Editor UI

Alex Hoyau edited this page Sep 20, 2018 · 58 revisions

Description

The Silex editor is where you build and edit your website. Here we'll go through the various components that make up the editor UI.

Table of Contents

1 Editing Techniques
2 Context Menu
3 Dashboard
4 Elements
5 Components
5.1.1 Technical overview of Silex components
5.2 Contact Form
5.3 Live Map
5.4 Share Bar
5.5 Slideshow
5.6 Skill Bar
6 Text, fonts and styles
7 Main Menu
8 Pages
9 Properties
10 Settings
11 Stage
12 Widgets
13.1 Side Menu
13.2 Multi-Column Section

1 Editing Techniques

Update this section

You can edit, add, remove, resize elements with the mouse, properties or the context menu.

In the mobile editor, use the keyboard arrow keys to move elements up/down in their container. Style elements - resize, change background color or image, and this will not change the desktop version. If you change the structure of the website - add or remove elements or move elements to another container, this will affect the desktop version.
Back to Top


2 Context Menu

The context menu allows designers to access frequently used editing functions without having to navigate the main menu bar. The context menu provides the following functions:

  • quick page navigation - allows designers to select a page from a multi-page website
  • text editing window - opens a text editing window with standard text formatting options
  • copy and paste
  • layer change - moves elements up and down from the bottom of a set of page layers to the top or vice-versa.

Silex UI
Back to Top


3 Dashboard

The dashboard opens when Silex starts.

Silex dialog: create a new website

The dashboard provides the following options:

File History

  • Select an html file from the recent html file history listing to open for further editing (files are pulled from cloud storage).

Import

  • The import button allows users to open Silex projects from the storage service they are using: GitHub, Dropbox, WebDav or ftp services are currently available.

Blank Layouts

Below the html file history is a set of four basic web page sectional layouts that can be used to start designing a new website from scratch.

  • Desktop layout allows users to set up a layout predefined to properly fit larger desktop computer screens including a predefined header and footer section for the page.
  • Narrow layout allows users to set up a layout predefined to work with smaller mobile devices, such as tablets.
  • Responsive layout allows users to set up a layout predefined to initially fit mobile phones, but a responsive page can easily be resized to fit other device screens without formatting issues coming up.

Community Templates

Users can also start building a website based on pre-made templates provided for Silex users under the creative commons license.

A set of thumbnails is listed that gives users a quick preview of the templates available for use. Under each thumbnail the template name is listed on the left and users can click on three other options to the right to get more information about the template they are interested in

  • Preview opens the template demo website in a new browser tab so users can review the sections of each template in detail.
  • Detail opens up the readme.md file associated with the template on GitHub so users can get background info for each template.
  • Select opens a chosen template the Silex editing window.

Once a blank layout or community template is selected, the primary Silex editing window (below) will open and users can begin designing and exploring the full functionality of Silex.

Blank Silex Editor

For further information, you can find these short dashboard-related videos under Tutorials and Guides:


4 Elements

this section needs more details - help needed

Think of Silex elements as building blocks. You use them to create your website content. You can add an element by simply pressing the "+" from the left vertical menu bar in the editor. Double click on an element to edit its content.

4.1 Element Types

Basic elements:

the + menu

4.1.1. Text

When you create a text element a re-sizable and movable text box will appear in the middle of the stage. Double click the text box to open it in the text editor.

4.1.2 Images

Images can be added to a page in two ways:

  • A re-sizeable, movable image element can be added to the stage.
  • To use an image to cover a website section that will not change proportions you can create a container element and set a background image.

To set an image you have to be able to access the image file from cloud storage. The saved image can be used by double clicking on it in the file explorer window.

4.1.3 Containers

To group elements, or setup a border around an element, put it in a container. To move elements inside a container, add the container, select the elements and drag and drop them in the container, sending the container to the back layer.

4.1.4 HTML

When you want to add HTML code to your website, embed code for a Youtube video, embed an open-street or twitter map then you will need an HTML element.

Double click on the HTML element to edit its content in the HTML editor.

4.1.5 Sections

Sections have a background and a foreground, which are both containers in which you can drop elements and style as you like. The background container uses a 100% browser width and is set to the background. The foreground container is centered within the background container. You can change its width just as you would with any other container.

screenshot from 2017-03-01 13-43-37

Sections are designed to be used for:

  • Header/footer patterns
  • Stripes layouts - here are some great examples
  • Hero images
  • Websites containing pages of different heights
  • Easy rearranging of content - move sections up/down with keyboard arrow keys

help wanted: Write a tutorial for any of the options above - check here to learn more.

Tip: You can force the width of the foreground containers for all sections of the website:

  • Open Settings
  • Under Website Width, enter the desired width value

screenshot from 2017-03-01 13-42-24
Back to Top


5 UI Components

Components are like elements in that they can be added to the stage, and manipulated like base elements, e.g. the text box.

A component is based on an element, but it adds special functionality. Components have additional parameters which depend on the component type, e.g. a list of images for a slideshow.

Components can be added the same way ("+" menu). They have properties and parameters, which can be changed with the params panel. Double click on a component to display the params panel.

Here are the available components:

5.1.1 Technical overview of Silex components

In Silex, components are made of two files:

  • a template file (.ejs) which contains HTML code (it may include Javascript and CSS)
  • a yaml file (.yml) which holds all the info about the component, the description of its parameters, etc

See the component files in Silex source code.

Silex uses Prodotype to compile the components and create the UI which allows you to edit their parameters.
Back to Top

5.2 Contact Form

This is a form which let your visitors get in touch with you.

By default it is configured to use the Formspree (not open source) service to make it easy for you to test it. This will forward the incoming messages to your email for free. But you are encouraged to host your own backend to handle the submitted data.

help wanted: this page needs to be documented

  • Preview

Contact form component

  • Edition

Contact form component

  • Parameters

Contact form component

Back to Top

5.3 Live Map

This component is based on the great OpenLayer project by OpenStreetMap.

Creating a Live Map component can be split into two parts:

  1. Create a map on the Open Street Map website.
  2. Import the map in Silex with the live map component

Create a map

Open Street Map is an open-source mapping tool useful in creating maps of any scale that provide useful geographical data in many different contexts. In most cases Silex users will be creating street maps that help their website users find the location of a business or event.

Setting up a map for the Silex Live Map Component is quite simple.

  1. Click and drag the map to the proper region.
  2. Press the plus button at the top of the right menu to zoom in.
  • You can drag the screen left and right to properly center it on your location.
  1. Once the map is set at the correct scale right click on your location on the map, and select the Centre Map Here option.
  • Once the map is setup, you can change the geographic data available by selecting different types of map layers.
  • The coordinates of your map are included in the URL. You don't have to save the map to import it into your Silex page.
  • When you are happy with your map copy the Open Street Map URL.

Full Open Street Map documentation is available here. OSM licensing requires developers to credit OSM for all maps used in other websites.

Live map component
Open Street Map Example

Import the map in Silex with the live map component

  1. Add a "live map" component to the stage ("+" menu)
  2. Copy the URL from the Open Street Map page.
  3. Paste the URL into the Silex Editor URL field.

Live map component

The OSM map will appear in the component block on the Silex page that is being edited. The size of the block can be resized like any other component, and the map will maintain its scale. When the page is previewed or published users can zoom in and out to change the map scale, and drag to other locations on the OSM map. This allows users to get oriented with the larger area your location is in.

Back to Top

5.4 Share Bar

This component is based on the awesome project Simple Sharing Buttons Generator

help wanted: this page needs to be documented

  • Preview

Share bar component

  • Edition

Share bar component

  • Parameters

Share bar component

Back to Top

5.5 Slideshow

This component lets you display pictures with captions. It has many parameters to play with.

It is based on the great Unslider project

help wanted: this page needs to be documented

  • Preview

Slideshow component

  • Edition

screenshot from 2017-05-08 16-49-57

  • Parameters

Slideshow component

Back to Top

5.6 Skill Bar

A skill bar is often used in online CV's/resumes to display your skills in different subjects: HTML. 90%. CSS. 80%. JavaScript. 65%. PHP. 60% ...

help wanted: this page needs to be documented

  • Preview

Skill bar component

  • Edition

Skill bar component

  • Parameters

Skill bar component

Back to Top


6 Text, fonts and styles

To edit texts in Silex, double click on a text box and start editing in place:

screenshot from 2018-09-10 17-11-31

6.1 The text format bar

Here is where you can add semantic and style to the selected text:

Silex text format button bar

The buttons are as follow

help wanted

  1. "P":
  2. link button:
  3. "B":
  4. "U":
  5. "I":
  6. "H1":
  7. "H2":
  8. "H3":
  9. "UL":
  10. "OL":
  11. image button: select an image to add in the middle of the text

6.2 Image options

When an image is selected in a text box, you can change the options of the image

screenshot from 2018-09-10 17-05-24

Here are the available options for the image in a text box:

  • alt: a desctiption which will be visible only to screen readers and search engines
  • floating options:
    • no float: text goes on a new line, not on the same line as the image
    • float left or right: the text goas "around the image", on the left or right

When you select some text and click the link button in the text format bar, the link editor opens for you to add a link to the selected text:

screenshot from 2018-09-10 17-15-35

The external link tab

When you select the external link tab like this: screenshot from 2018-09-10 17-17-35

Then you can add a link with 3 main properties:

help wanted here

  • The URL: help wanted here
  • A target which can be
    • _self: help wanted here
    • _blank: help wanted here
  • The link title: help wanted here

The "Link to a page" tab

screenshot from 2018-09-10 17-20-51

In this tab you can choose a page of your website so that the selected text will open this page

The "advanced params" section

screenshot from 2018-09-10 17-20-35

Here you can define the following link attributes:

help wanted, extract the definition of these attributes from mdn

  • rel
  • type
  • download

Style manager

The style manager is a tab on the right panel which makes it easy to change text styles accross your whole site or just for one text box. First edit text and format it with the text format bar (see description above) then you can change its style here:

screenshot from 2018-09-20 11-47-25

help wanted to write some doc here

6 Main Menu

This section needs a new main menu image

The main menu gives you access to all of the major elements and tools included with the Silex Website Editor. Here is the menu content:

  • File

    • Dashboard
    • Save website - save current work on a webpage
    • Save website as - creates a new html file
    • Publish (see Publishing and Releasing Your Website)
    • File explorer - opens the interface for the cloud storage service used to store files. All webpage assets can be managed from this window.
  • Add elements

  • Code Menu

    • Html Head Editor - allows you to add HTML, CSS, or javascript into the head of your html file
    • javascript editor - allows you to add javascript to your html file
    • CSS editor - allows you to link CSS styling to your html markup
  • Pages - create a new page

  • Undo - crtl + Z

  • Redo - ↑ + ctrl + Z

  • Preview - preview your website in your browser as the end user will see it

  • Preview in Responsize - preview your website in a range of simulated devices to examine performance at differing

  • Mobile editor - enter mobile editor mode to change how your site will look on mobile phones

  • Desktop editor - enter desktop editor mode to change how your site will look on desktop computers

  • Settings

  • Help - links connect you to the following information:

    • Github documentation wiki
    • Silex Labs website
    • user forum
    • widget and template downloads
    • newsletter and more!
      Back to Top

7 Pages

Page panel opened

Description

List of the pages in the opened website.

Usage

You can open this page panel from the side menu:

open page panel

You can add, rename, delete, reorder pages with the buttons at the bottom:

manage pages

When you select an element, you can set on which pages it is visible from properties. You can also "link" it to a specific page with the "link to" dropdown list from properties, so that it opens the selected page when you click on the element.
Back to Top


8 Properties

Description

This is where you can edit the properties of the elements selected on the stage:

  • Position and size - adjust X and Y values to change position on the stage, and adjust height and width to change element size

  • SEO - search engine optimization adding tool tips and alt id's to images

  • Visible on - you can choose the pages where the selected elements are visible, uncheck all for "always visible"

  • Link - link the selected elements to a specific page so that it opens the page when you click on the element(s)

  • Opacity - sets the transparency of the selected element as a percentage: 0 is invisible and 100 is solid

  • Background color - uncheck transparent and click the box to the left to select a color from the palette

  • Background image - select an image from cloud storage to set an element background, you can update several background positioning and display options

  • Border - add a border to selected elements, you can adjust the following properties:

    • the thickness of the border stroke
    • application of a border on the top, bottom, left or right
    • the corners of the element border can be rounded by adjusting the radius value, and selecting which corner the radius will apply to
  • Styles - edit CSS linked to the element you are working with
    Back to Top


9 Settings

this section needs to be updated with the latest version of Silex - help needed

The settings button

the settings button

The settings panel

Silex settings panel

Description

This panel lets you change the settings of your website, such as

Please read the help texts which are provided on top of each setting.
Back to Top


10 Stage

Description

The stage is where you see your website, and you can select, drag and drop the elements.

Press shift (↑) and click on an element to select multiple elements.

Press shift (↑) and drag elements around to keep them aligned.

Double click on a text, HTML box or image to open an editor and change it.

Silex UI
Back to Top

11 Widgets

Description

This section is written but needs to be copied over. View the issue here. (help needed)

11.1 Side Menu

11.1.1 About This Widget

A dropdown menu or hamburger menu is a great way to add a discreet and sober navigation menu to your site. Here is an example of a side menu:

11.1.2 Add it to your site

  1. Create an html box, and put it in the background of your site, on the side, in the sections background for example.
  2. Double click on the HTML box and paste the code below into the editor.
  3. Save and preview your site to check that it worked.
<style>
/* Navigation Menu - Background */

.navigation {
    /* critical sizing and position styles */
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -250px;
    z-index: 10;
    /* non-critical appearance styles */
    list-style: none;
    background: #111;
    margin: 0;
}
/* Navigation Menu - List items */

.nav-item {
    /* non-critical appearance styles */
    width: 200px;
    border-top: 1px solid #111;
    border-bottom: 1px solid #000;
}

.nav-item a {
    /* non-critical appearance styles */
    display: block;
    padding: 1em;
    color: white;
    font-size: 1.2em;
    text-decoration: none;
}

.nav-item a:hover,
.nav-item a.page-link-active {
    color: #2b4b98;
}
/* Nav Trigger */

.nav-trigger {
    /* critical styles - hide the checkbox input */
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
    position: absolute;
    left: 15px;
    top: 15px;
    z-index: 2;
    height: 30px;
    width: 30px;
    cursor: pointer;
}
label[for="nav-trigger"]:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    background: white;
    box-shadow: 
    0 10px 0 0 white,
    0 20px 0 0 white;
}                    
.silex-runtime label[for="nav-trigger"] {
    /* only at runtime, needed as the nav is fixed*/
    position: fixed;
}
/* Make the Magic Happen */

.nav-trigger+label,
.navigation {
    transition: left 0.2s;
}

.nav-trigger:checked+label {
    left: 275px;
}

.nav-trigger:checked~.navigation {
    left: 0;
}

body {
    /* Without this, the body has excess horizontal scroll when the menu is open */
    overflow-x: hidden;
}
/* Additional non-critical styles */
</style>
<script>
// when Silex says a page changed, close the menu
$('body').on('pageChanged', function (event, pageName) {
    $('#nav-trigger').prop('checked', false);
});
</script>
<input id="nav-trigger" class="nav-trigger" type="checkbox">
<label for="nav-trigger"></label>
<ul class="navigation">
<li class="nav-item"><a href="#!page-home" class="page-link-active">Home</a></li>
<li class="nav-item"><a href="#!page-details" class="">Some details</a></li>
<li class="nav-item"><a href="#!page-details2" class="">Sum expectantes</a></li>
<li class="nav-item"><a href="#!page-contact" class="">Contact</a></li>
</ul>

11.1.3 Customization

Now double click on the HTML box again to edit the HTML code. In the code below, replace the all href values with links to corresponding pages. Replace all titles between <a href> and </a> tags with corresponding page names. For example, for "My Home Page", the line should look like this:

<li class="nav-item"><a href="#!page-my-home-page">My Home Page</a></li>

11.1.4 Support

Help wanted.

If you like this widget, give us feedback. You can contribute by improving the widget or transforming it into a component that appears in the + menu to the right. Let us know if you are able to do this.

Back to Top

11.2 Multi-Column Section

11.2.1 Description

This widget is like a section element with multiple container embedded:

Each container takes as much space as it can. The elements in the containers will be centered.

11.2.2 Setup

Open the CSS editor and add this code anywhere

/* ********************* */
/* Column section widget */
/* ********************* */
@media (min-width:481px) {
div.column-section {
    display: flex;
    position: relative;
    width: 100%;
    top: auto;
    left: auto;
}

div.column-section>.editable-style {
    flex: 1 1 auto;
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    min-height: auto;
    margin: 15px;
    transition: margin .2s ease;
}

div.editable-style.drop-zone-candidate>.editable-style {
    margin-bottom: 55px;
}

.silex-runtime div.column-section>.editable-style {
    margin: 0;
}

div.column-section>.editable-style>.editable-style {
    position: relative;
    top: auto;
    left: auto;
    margin: auto;
}
}

/* ********************* */

This should look like this

11.2.3 Create a multi columns section

Add a container to the stage as explained here move the container to the body element (move it somewhere where there is no section, like at the bottom of your site), set its class name to column-section like this:

11.2.4 Add columns

Create other containers and drop them into your section not into each other, aim for the border of your section, this should look like this:

11.2.5 Add content

Then add text or images into the containers like this:

11.2.6 Move your section around

Use the up/down arrows just like you do to move sections:

Back to Top

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.