Getting Started With Silex Website Builder

This tutorial has been started by @jeff3211 in this issue

This article needs screen shots. Login and click "edit" to contribute. Ask here if you need help.

About Silex

Silex is a WYSIWYG drag and drop static website builder created with the express purpose to allow anyone, regardless of skill level, to create their own webpages. Simple menus allow users to assemble design elements to built-in basic units called "blocks" which include: text, image, container, html, and section, which make for a user-friendly, efficient design experience.

The Silex Website Builder also allows users to complete all their design work online and save the final product in cloud storage. You own all the data (unlike Wordpress or Squarespace)! Users never have to manage files at home, and the work is always backed up online.

This guide provides a quick review of the basic functions of the Silex Web Builder. See this help section for more in-depth information about the Silex UI.

Dashboard

Once the Silex Editor is opened it first displays the Dashboard page. The dashboard provides two options for building a new webpage.

Layout

The current layout is setup to be responsive. The page and menu sizes will adapt to the device you are working with.

Community Templates

Community templates are generic webpages that have been designed using Silex, and made available to the public under the creative commons license. Templates give users a starting point to work from so that they don't have to assemble their own fonts, page layout concepts, and design elements. Users can simply swap out text and pictures, or move around pre-made design elements to fit their custom design requirements.

Creating Elements

To add a design element click the add elements button. A pop-up menu with several options is displayed:

• Add Text
• Add Image
• Add Container
• Add HTML
• Add Section

There is no limit to the number of element blocks users can create, and the positioning and sizing options are quite flexible.

Element Block Position and Size

Text, image, container, and html blocks can be resized, and re-positioned using the following basic edit functions:

• Users can left-click and drag to move boxes around the edit window.
• The height and width of a block can be changed by left-clicking and dragging the sides to the appropriate height and width.
• Block height and width can also be proportionally changed by clicking and dragging a corner point of a block to make it larger or smaller.

Add Text

To include text in a webpage click the Add Text option. The following options are available:

• A re-sizable box will appear on the page that allows you to change the block size and position.
• To edit text, you can click on the pencil icon at the top of the screen or double click the text box you would like to edit.
• Now you can start typing. Once you're done you can simply close the box, and the text block will be updated.

A standard menu bar runs along the top of the text editing window, which allows users to change text attributes using standard word processor formatting options such as: size, font, list type, alignment, text color, etc.

Graphics

Text is only one part of the equation when we're designing a webpage. To really grab the average internet user's attention you need graphics. The process of adding images is a little more complex than working with text. Text is embedded in your HTML page right along with the code, but images cannot be saved in the HTML document. To solve this problem you will need to set up and manage storage space for your graphical page elements.

Storage

The Silex Editor allows users to choose from several different cloud storage services and tools to manage projects. The simplest service to use in the beginning will be Dropbox.

Dropbox

First you will need to sign up for a Dropbox account at dropbox.com. After your account is set up you have access to 2 gigabytes of cloud storage directly from your browser. The browser window links your computer to the Dropbox account, allowing you to upload and download files in larger folders and archives that would otherwise be difficult to transfer.

Now that your account is set up the first thing you should do is create a folder for your website graphics.

• Click on the folder option to create a new folder, and name it graphics.
• You can click on the folder and drag your images into the browser to save them in your Dropbox account.

Accessing Images From Silex

Now that you have images saved in your graphics folder in the Dropbox cloud you can go back to Silex to add graphic blocks to your webpage.

1. Click on the add elements button and select Add Image from the menu. A new window will open up asking you to select the icon that represents the file storage service you are using.
2. Click on the Dropbox icon and you will be asked if you want to authorize Cloud Explorer to access your Dropbox account.
3. Click the continue link and then click the allow button on the Dropbox page that opens. You will be brought back to Silex. A Browse Your Cloud Drives window will show a list of the files and folders currently saved on Dropbox.
4. Open the graphics folder and click on the file you want to import into your Silex project.
5. You will be brought back to the main Silex editing window with the image in the middle of the screen.

You can move and resize the image using the standard block editing mouse options. Opacity and borders can be edited in the menu on the right side of the screen.

Add Container

Containers can be used as graphical framing devices to offset text or images from complex backgrounds. Container color is changed in the background color drop-down in the menu on the right side of the editor. You can click on a color in the color palette window to change block color, or select a hex color code.

Don't Forget To Save!

You've created a lovely page promoting your exciting new service to the community. Eye catching images draw the reader's attention to engaging promotional writing. The final step in your day's work is to save your files in Dropbox:

1. Create a new folder with the name of your project in Dropbox.
2. Drag and drop the graphics folder into the new folder.
3. In Silex open the file menu and click on Save website.
4. The Cloud Explorer page will open your Dropbox account. Click on your project folder to open it.
5. In the blue bar at the bottom of the window you can type in the name of your html file and click save.

You now have a brand new web site! At this point you have all the files needed to build a website saved in your Dropbox account. In order to actually publish your website, you will need to set up server space, upload your files, and assign an official domain name. This process is covered in more detail here.

Further Learning Opportunities

The tools available in Silex allow you to build a basic static page using layers, text, graphics, and color at the click of a mouse button. This is great, because it removes a lot of the boring coding work that used be involved in creating websites.

When you're ready, html blocks and the CSS section of the Silex Webpage Builder allow you to do advanced design work, and take your web development skills to the next level. You can learn to add interactive logic using javascript, flashy effects and animation using HTML5 and CSS3, or simply link your site to media and websites that you want to share with your audience. The only limit is your imagination!