Getting Started With Silex Website Builder

This tutorial has been started by @jeff3211 in this issue

This article needs screen shots and rewriting. 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.

The page is built in blocks; text blocks, photos, or image blocks, html blocks, container blocks, all residing inside the insert 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 webpage click the Add Text option. A re-sizable box will appear on the page. To edit text, users can click on the pencil icon at the top of the screen or double click the text box they would like to edit. A standard menu bar runs along the top of the editing window, which allows users to change text attributes using standard word processor text formatting options such as: size, font, list type, alignment, text color, etc. To edit the content of a text block simply click in the text window, and start typing. Once the user is done they can simply close the box and their text block will be updated.

Graphics

Text is only one part of the equation when we're designing a webpage. The modern internet user will take one quick look at the endless stream of text on a flat colored background, sigh and just close your page out of boredom. To really grab the average 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 use several different cloud storage services and local storage tools to manage your website. The simplest service to link your Silex project to in the beginning will be Dropbox.

First you will need to sign up for a dropbox account at dropbox.com. After your account is setup download the Dropbox app. This app will give you access to 2 gigabytes (available for free) on the Dropbox cloud server. The Dropbox app links your computer to your cloud account allowing you to upload and download files in larger folders and archives that would otherwise be difficult to transfer. You can also access your account directly from a browser window.

Once your account is setup the first thing you should do is create a folder for your website graphics. Click on the folder option and name the new folder 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.

And more

I'm not explaining an HTML element... If you knew THAT, you wouldn't be reading THIS! But just for those of you who wanted to know, if you wanted to link to another website, a photo that already is hosted somewhere online, or embed a You-Tube video into your page, the HTML block is what you need to use for that. You'll need to know HTML programming language, or know how to copy embed code into the block to make it work... That's too much information for this simple tutorial to contain, but sources exist where you can learn more, search in google for HTML coding tutorials. Or simply use embed.ly to create an embed code.

Now you know how to create a basic web page with text, graphics and photos using Silex. Don't forget to save your creation in your dropbox folder before you close the browser tab, or window you're working in, or all your effort will disappear into cyberspace! Save the file with the name you want (avoid accents and strange characters). Once it's saved in dropbox, you can preview it! No one else can see it yet.... You'll need a domain name, server space from a web host and a hosting account for that (see this issue about publishing your site online), then you can learn more about FTP where you'll transfer your saved page and all the graphics you used from dropbox to the web host's server... If you built multiple pages, you'll upload them all, that's how you'll "go live online" with your creation.