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, 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
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 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.
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.
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.
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.
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 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:
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 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:
When you select the external link tab like this:
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
In this tab you can choose a page of your website so that the selected text will open this page
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 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:
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, reorder pages with the buttons at the bottom:
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
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
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 texts which are provided on top of 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 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:
- 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 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>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>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 container embedded:
Each container takes as much space as it can. The elements in the containers will be centered.
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
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 other containers and drop them into your section not into each other, aim for the border of your section, this should look like this:
Then add text or images into the containers like this:
Use the up/down arrows just like you do to move sections:
