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 pretty simple, but you want to add a photo or graphic don't you? OK, but you can't! Not yet anyway! First the web builder needs to have access to your files, somewhere where your text and graphics can be saved. It offers you two options: Dropbox, or FTP. If you know what FTP is, then you probably won't be looking at this because you probably already own a domain name, have hosting set up and have transferred bulk files to the server space you purchased to host your website. If you didn't know what FTP was, then reread the sentence above because I just explained it to you in basic details. If you don't own web space, you probably have never used FTP (File Transfer Protocol) FTP allows you to move bulk folders to a server. It's kind of like copying your pictures folder to another hard drive or USB drive. Usually you have to move one file at a time when uploading to a server, but with FTP you can just move an entire folder full of files in one operation. But if you have no where to move them, then what? Dropbox gives you a place to save these items for the web builder to access. Go to Dropbox to learn more, then open your free account. You can save up to 2Gb for free on Dropbox. You can password protect your files which become encrypted on the server, but you can also access them from any internet connected device capable of allowing you to sign into your account. Full disclosure: I didn't own a Dropbox account until (today when) I started trying to use Silex.

Once you create a Dropbox account, an installation download will be made available to you, download it, install it, and a new "drive" will exist on your computer, except it will really be resident in the "cloud" not on your hard drive. This, by the way would be an excellent place to store all the things you can't live without in case your computer crashes. Simply copy the items you desire to your new "drive" named Dropbox. Once all the photos or graphics you want on your web page are in Dropbox you can use them in your webpage. (Don't forget your 2Gb limit!)

Insert -> Image, then select Dropbox (NOT FTP), if you're already logged into your Dropbox account, then the window will open with the files you copied into Dropbox. Click the one you desire and it will appear on the page, drag it where you want to place it. If you need to resize it, you can drag the borders like a text element, or use one of the editors in Silex (which I haven't used yet, so can't explain). If you click on a selection and it appears as if nothing is happening, then you may have selected a file which is not an image. If your photo, image or graphic is too large, it will have to be resized. Again, you can experiment with the tools built into Silex, or resize your image using your favorite image editing program.

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.