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 basic web builder that anyone can use to create webpages.

Pages are built in blocks: text blocks, photos, or image blocks, html blocks, container blocks, all reside in the Add Elements tab.

See this help section with details about Silex UI.

Dashboard

When the Silex Editor is opened the first page a new designer will see is the dashboard. The dashboard gives two options for building a new webpage.

Blank Layouts

The user can select one of four blank layouts. The layouts allow users to build pages that can be formatted to fit specific types of devices:

• Blank - does not setup specific page formatting
• Desktop - desktop computers
• Narrow - tablets
• Responsive - mobile phones

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 begin, click the add elements button. A menu will pop up that gives several options:

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

There is no limit to the number of element blocks users can creating, 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 web page click the Add Text option. The following options are available:

• A re-sizable box will appear on the page that allows you to change 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 their 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, which takes a little more effort than 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 setup and manage storage space for your graphical page elements.

Storage

The Silex Editor allows users to choose from several different cloud storage services and local storage 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 setup 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 Sylex

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 setup 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 Editor 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 to any element on your page 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!