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] (https://github.com/silexlabs/Silex/issues).

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](Silex UI).

Text

To begin, click the insert tab and choose what you wish to begin with... Text for example can be built directly in the builder by inserting a text element. You will write your text in the window that pops up as a result of clicking on the insert button and then clicking text. A small box will appear on your page labelled: "new text box". It is a moveable text elements. Click in the center, drag it to the point on your page where you want it to be anchored, then expand it to your desired size by pointing to an edge and dragging the border. The easiest way is to anchor it into it's position to the left hand side of the page (for English languages read left to right) and pointing to the lower right hand corner and dragging the corner down and to the right until the element is the size you desire. Then double click in the middle of the element and the text editing window will pop open for you with the text "new text box" delete that text, then at the top of the element select your size, font, and other text attributes before you begin, or you will have to highlight any text you want to change attributes for. You can add box after box, anywhere you want sized just the way you want, and you can move them around any time you wish, just point to the element and drag... If you size them too small some text may be hidden, expand the box...

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.