Editor UI
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.
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
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 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.
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.
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 backend to handle the submitted data.
help wanted: this page needs to be documented
- Preview
- Edition
- Parameters
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 buttons are as follow
help wanted
- "P":
- link button:
- "B":
- "U":
- "I":
- "H1":
- "H2":
- "H3":
- "UL":
- "OL":
- 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 some doc here
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
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 t
-
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)
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)
A drop-down menu or hamburger menu is a great way to add a discreet and clean navigation menu to your site. Here is an example of a side menu:
- Create an html box, and put it in the background of your site, on the side, in the sections background for example.
- Double click on the HTML box and paste the code below into the editor.
- Save and preview your site to confirm that it's working.
<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>Double click on the HTML box again to edit the HTML code. In the code below, replace the all href values with links to your corresponding pages. Replace all titles between <a href> and </a> tags with your own 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>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.
This widget is like a section element with multiple embedded containers:
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 */
/* ********************* */
@media (min-width:481px) {
div.column-section {
display: flex;
position: relative;
top: auto;
left: auto;
}
div.column-section>.editable-style {
flex: 1 1 auto;
position: relative;
top: auto;
left: auto;
width: auto;
height: auto;
min-height: 20px;
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;
}
}
/* ********************* */The result should look like this
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:
Create additional containers and drop them into your section seperately, try to line them up on the border of your section box. It should look like this:
Add text or images into the containers like this:
Use the up/down arrows just like you do to move sections:
