Editor UI
⚠️ WARNING: Support for Silex v2 has stopped.
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.
Editing Techniques
Context Menu
Dashboard
Elements
Components
Text, fonts and styles
Main Menu
Pages and links
Properties
Settings
Stage
Widgets
Update this section
You can edit, add, remove, or re-size elements using the mouse, properties, or the context menu.
In the mobile editor use the keyboard arrow keys to move elements up/down in a container.
Resizing elements, changing background-color, and changing images in the mobile editor will not take effect in the desktop version of your webpage.
Adding or removing elements or moving elements into different containers will take effect in the desktop version of your webpage.
Back to Top
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.
The dashboard opens when Silex starts.
The dashboard provides the following options:
- Select an html file from the recent html file history listing to open for further editing (files are pulled from cloud storage).
- 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.
Below the html file history is a set of web pages that can be used to start designing a new website from scratch or from a template.
The pre-made templates provided for Silex users are licensed 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.
For further information, you can find these short dashboard-related videos under Tutorials and Guides:
- Opening a Website from Cloud Storage via the Dashboard
- Starting a Website from a Blank Layout
-
Using the Dashboard to Edit a Template
Back to Top
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.
Basic elements:
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.
Images can be added to a page in two ways:
- A re-sizeable, movable image element can be added to the stage.
- To create a static image element that will not re-size simply create a container element and set the background to an image of your choosing.
Images used in Selix are all stored in cloud storage. To use an image double click the image thumbnail in the file explorer window.
Containers are used to group elements.
To move elements inside the container:
- add the container
- select elements and drag and drop them in the container in the order you would like them to appear
- send the container to the back layer
An element border can be set when it is put in a container.
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 to use an HTML element.
Double click on the HTML element to edit its content in the HTML editor.
Sections have a background and a foreground container. Each container allows you to drop in elements and style them using standard Silex functions. The background container uses 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 any other container.
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
Components can be added to the stage like elements. They are also 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 using the "+" menu bar. They have properties and parameters, which can be changed in the params panel. Double click on a component to display the params panel.
Here are the available 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
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 back-end or use a FAAS service such as AWS Lambda to handle the submitted data.
help wanted: this page needs to be documented
- Preview
- Edition
- Parameters
Send To: Enter the email address or the URL of the server you would like the contact form to sent the message entered into the form to.
submitButtonLabel: This field allows users to change the text on the contact form button.
textBackgroundColor: Sets the color of the contact button text.
buttonBackgroundColor: Sets the color of the contact button background.
buttonBorderColor: Sets the color the contact button border.
- Users can replace the hexcode in any of the color fields to change the color of the element.
- Clicking on the color selection box allows users to select a color from the color wheel.
- There is also an eyedropper available that allows users to select a color from any image currently visible on the computer screen.
There are three input fields included that allow users to customize the titles and colors of each input field included with the contact form component.
field: The checkbox allows users to include or remove an input field in your contact form.
label: Allows users to edit the title text for each input field in the contact form.
placeholder: Allows users to edit the placeholder text listed by default in each user input field.
onsubmit
The hamburger menu component is a button you add to your website, when clicked it opens a panel on the side, which contains links.
In the preview, when you click the button, the hamburger's side panel slides in:
Here is how it looks on mobile:
- Open the "+" menu
- Click "Hamburger menu" to create a button on the stage (
) - Double click this new button to open its parameters on the right panel
- click the "+" button in the parameters to add links
In the parameters you can change the button colors and the side panel's background color, for example:
Pro tip: if you remove the background color, the side panel's background will be transparent
To change the links appearance / design, just do the same as for any element, select it and open the Style manager, select the links styles (
) and change the properties - color, line height...
For example, this style:
Will look like this:
You can also edit the hover style in this same editor :
This component is based on the great OpenLayer project by OpenStreetMap.
Creating a Live Map component can be split into two parts:
- Create a map on the Open Street Map website.
- Import the map in Silex with the live map component
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.
- Click and drag the map to the proper region.
- 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.
- 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.
Open Street Map Example
- Add a "live map" component to the stage ("+" menu)
- Copy the URL from the Open Street Map page.
- Paste the URL into the Silex Editor URL field.
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.
This component is based on the awesome project Simple Sharing Buttons Generator
help wanted: this page needs to be documented
- Preview
- Edition
- Parameters
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
- Edition
- Parameters
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
- Edition
- Parameters
To edit texts in Silex, double click on a text box and start editing in place:
Here is where you can add semantic and style to the selected text:
The available options identify HTML text style tags.
- "P": the the paragraph tag < p >."P" is used to style body text on a webpage.
- link button: sets selected text to a hyper-text link to other html pages.
- "B": the bold tag < b >. "B" is used to change the selected font style to bold.
- "U": the bold tag < u >. "U" is used to create underline markup for selected text.
- "I": the italics tag < i >. "I" is used to change the selected font style to italics.
- "H1": the largest heading tag < h1 >. "H1" is used to set a page or section title.
- "H2": the second largest heading tag < h2 >. "H2" is used to set a page or section title.
- "H3": the third largest heading tag < h3 >. "H3" is used to set a page or section title.
- "UL": the unordered list tag < ul >. "UL" sets up a bulleted list.
- "OL": the ordered list tag < ol >. "OL" sets up a numbered list.
- image button: select an image to add in the middle of the text
When an image is selected in a text box, you can change the options of the image
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 text and click the link button in the text format bar, the link editor opens and your link is added to the selected text:
Select the external link tab like this:
Links are added using 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 allows you to link to a specific page on your website using the selected text.
Here you can define the following link attributes:
help wanted, extract the definition of these attributes from mdn
- rel
- type
- download
The style manager is located on the right of the website editor. The style manager makes it easy to make style changes to specific blocks. These style choices can be applied on every page of your website, or just on one text box. To begin edit text and format it with the text format bar (see description above). You can change text styles here:
help wanted to write more doc here
Use cases and FAQ
In my website I want all my P to be grey, my H1 green and my H2 red
Deselect everything (esc key) and edit the styles:
- "All Style" will be selected
- select "P" and color => grey
- select "H1" and color => green
- select "H2" and color => red
In my website I want all my P, H1 and H2 to be red
Deselect everything (esc key) and edit the styles:
- "All Style" will be selected
- select "All" and color => red
This is like a CSS rule saying h1,h2,p {color:red;}
I try to edit "All Style" but when I select it, Silex complains "The style 'All style' is a special style, it is already applyed to all text elements."
This is because when you select a text box, then select "All Style", Silex understands that you want to apply "All Style" to the text box. What you want to do is Deselect everything (esc or click on "Body" in the bread crumbs as shown in screen shot bellow), then "All Style" will be selected in the style manager.
Located in the website settings, here is how the embedded fonts manager looks like:
You can add and remove fonts from google fonts, the open font library or other web font sites (feel free to add some to the list)
Each web font has a URL (http://fontlibrary.org/face/absortile-bold in the example above) and a name, which can include "backup" fonts used while the font is loading ('AbsortileBoldBold' in the example above, which should be 'AbsortileBoldBold', serif to be safe)
These URL and name are what Silex asks for when you add or replace a font:
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
-
Elements
-
Components
-
-
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
List of the pages in the opened website.
You can open this page panel from the side menu:
You can add, rename, delete, re-order pages with the buttons at the bottom:
When you select an element, you can set which page is visible from properties. You can also "link" the element to a specific page using the "link to" drop-down list in properties. This allows you to use the selected element as a link.
Back to Top
In Silex, all elements have a Visible on property. This is useful for exaple to have a footer and a header which are on all pages (sections with Visible on set to all pages) but other elements visible only on some pages, e.g. the contact form only on the contact page (component with Visible on set to Contact)
All pages need to have links which lead to them so that users can visit the page. In Silex you need to create these links.
1- On any element you can define a link from the properties menu
2- In the text editor you can add a link on the selected text
3- If you have several page, you probably have a hamburger menu component in the mobile version. You need to add links to the menu to of all your pages
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. Adjust height and width to change element size
-
Layout - make a container "flex" and some elements in it "position automatic, this will make elements stack on top of one another, center them automatically or distributed evenly.
-
SEO - search engine optimization tha adds tool tips and alt-ids to images
-
Visible on - you can choose the pages where 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 the element(s) is clicked
-
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 as an element background, you can update several background positioning and display options from here
-
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 the corner(s) the radius will apply to
-
Styles - edit CSS linked to the element you are working with
Back to Top
this section needs to be updated with the latest version of Silex - help needed
The settings button
The settings panel
This panel lets you change the settings of your website, such as
- enable or disable the mobile mode
- website width
- SEO info
- social networks info
- publish settings (see Publishing and Releasing Your Website)
- embedded fonts manager
Please read the help text provided above each setting.
Back to Top
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.
This section is written but needs to be copied over. View the issue here. (help needed)
This widget is like a section element with multiple embedded containers:
Or like this:
Each container attempts to fill the entire element space. All elements in the containers are centered.
Open the CSS editor and add this code anywhere
/* ********************* */
/* Column section widget */
/* ********************* */
body .editable-style.column-section.container-element {
padding: 0;
margin: 0;
}
/* section takes all width */
div.column-section {
width: 100%;
}
div.column-section > div {
width: 100%;
}
@media (min-width:481px) {
.silex-editor div.column-section {
/* leave space to drop, only in the editor */
padding: 50px 0;
}
div.column-section > div {
/* 3 elements per line */
width: 33.333%;
}
}
/* ********************* */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:
Then change the container properties, in the layout section like this:
Create additional containers and drop them into your column section. For each container, change its properties like this:
It should look like this:
Add text or images into the containers like this:
For each new element, you need to set its layout property to automatic
Use the up/down arrows just like you do to move sections:
Here is a widget to create cards which are "foldable", i.e. they have open and closed states.
Here is an example of a closed "details card":
And here is the same card open:
Drop a container in your website and change its tag name to DETAILS:
In the container properties, write open - this is to make it open while we are designing
Inside this container you can add any content you want to the card, it will be hidden when the user clicks on the "details" header
Here is the default "details" header:
In order to change this header, simply drag a new element in the card and set its tag name to SUMMARY. This element will then replace the default header
In the custom "details" header, add an arrow somewhere and add the css class details-rotate to it, like this:
Then paste this CSS code in the CSS editor
details .details-rotate {
transition: transform .25s ease;
}
details:not([open]) .details-rotate {
transform: rotate(180deg);
}This will rotate the arrow when the details widget opens / closes
