1 Website Builder Documentation Main Dashboard page In the main dashboard page you can see and manager all of your projects. Filter Bar In the filter bar at the top you can filter and search your projects or click on the Create New Project button to open new project page. Shareable Project Link At the top of each project you can see a shareable link. With this link you or other people can access a fully production ready website of your project without even exporting or publishing it to a remove server. You can make a project inaccessible by unchecking the checkbox next to the link. Publish, Delete, Edit To publish a project click on blue cloud icon, enter your remove server details and click publish. Click on trash and pencil icons to delete and edit a project. Create a new project
2 To open a new project page, click on a Create New Project button in dashboard. To create a new project either click a Start From Scratch button or click a template image, enter a name for your project and click Save. Your new project will be opened in a builder. User Interface Responsive View Controls Open/Close Various Panels Undo/Redo Last undoable actions Preview Project Save/Publish Project
4 Attributes Attributes section of inspector will contain: Float - This is basically same as aligning text left/center/right, but for elements instead of text. Id - A unique id for selected element, so css cap be applied easier to it. Class - All the selected element classes will be listed here, you can remove them by clicking the x icon next to class name, you can apply new custom classes to an element by clicking anywhere on the input (gray background), entering your class name and hiting enter or clicking green check mark. There are a bunch of predefined class that you can use, for example text-danger will make the text color red. You can find more predefined classes here. This section will also have various other attributes depending on what element you have selected, for example, if you have a heading selected it will have a heading type attribute, so you can choose between h1, h2, h3, h4, h5, h6. Background Background section will allow you to set a background image, color or gradient for a selected element. Color Click on the color button to bring up a color picker. Here you can choose from over a 100 different predefined popular colors from adobule kuller and other sites. You can ofcourse select a completely custom color by dragging your mouse in the color paletter and selecting a transparancy with a dragger underneath, you can also enter a color code in the input below.
5 Image Click on the image button to bring up an image background panel, here you can apply one of over 40 textures included with Website Builder and control the backgroun image alignment and repeating. You can also click on media manager icon to bring up the media manager to upload and use a custom image or select an already uploaded image. More on media manager here.
6 Gradient Click on the gradient button to bring up a gradient panel, here you can choose from over 30 css3 gradients included with Website Builder to use as selected element's background.
7 Shadows You can use shadows panel to apply css shadows to selected element or to text inside it. Angle - to control shadows angle, click on the green knob in the circle and drag it around. Color - to control shadows color, click on the white square, this will bring up a color picker, same as the one for elements background color. Distance - this will control how far away the shadow will be from selected element. Blur - this will control how clear the shadow is. Spread - this will control how big the shadow is. Box/Textthis will apply the shadow to either the element box or text inside it. Innter/Outterthis will either apply shodow to the outside or inside of selected element box.
8 Margin / Padding Margin controls the spacing between selected elements box and the content outside, while padding controls the spacing between selected elements border and the content inside it. To use the dragger, first select the sides you want to apply margin or padding to and then drag the handle until you have your desired effect. For a more precise control you can enter your margin and padding values in the input boxes, big one will apply the value to all sides while the smaller ones represet a particalar side of elements box.
9 Text Style This panel controls the appearence of selected elements text. Font Click on the font select, to change selected elements font to one of the native browser fonts, or click the G icon to open up google fonts modal, so you can choose from one of nearly 700 google fonts. Style Click on of the buttons under the fonts to change text boldness or make it italic, underlines, overlined or crossed-out. Size, color, alignment You can change text size by entering desired number in the input box, you can click one of the alignment options to align text left, center or right or you can change text color by clicking on the square at the bottom of the panel to bring up a color picker.
10 Border / Border Roundness In the last two panels you can control the selected elements border appearence and it's corners roundness. Width, color and style To change border width and color first select the border sides you want to change at the top and then either use the dragger or input boxes at the bottom to get the disired effect. To change border color click on the square under the dragger to bring up a color picker. Roundness To change border roundness, first apply the border you want via the border panel, then select the corners you want to change at the top and use the dragger or enter the value you want in the input boxes.
11 #Image Editor Note that image editor will only work on images that are accessible from internet, meaning it will not work when working locally with something like wamp or mamp. To open image editor, select an image element in the builder and click the pencil icon.
12 Once image editor is open you can selet a modification/addition you want to make from the top, once you are done simply click save button in the top right corner and the changes will be instantly applied in the builder. #Media Manager To open media manager either select an image element in the builder or click on image button in the inspector and then click blue Media Manager buton. Folders
13 In the My Images tab, you can create/edit and delete folders. You can use these folders to organize your images, once an image is uploaded to a folder it will not be visible in other ones. Uploading To upload a new image drag it onto the manager or click the blue Upload Images button in the top right corner. Using images To use an image(s) simply select the ones you want and click Use button at the bottom right corner, how images will be used depends on how the media manager was opened, for example, if you opened it from the attributes panel in inspector the selected image will replace the one currently selected in the builder. #WYSIWYG Editor To open a wysiwyg editor double-click on any element in the builder that contains text contents. Editing Text Once editor is open you can edit/delete and write new text in there as in any other text editor. Changing Styles
14 To change text font family, size or styling, simply select the text you want to apply these styles to with your mouse and then click the relevant style icon in the wysiwyg bar. Wrapping text in a link To wrap text in a link, simply select text you want to wrap with the mouse and click icon, then enter the url you want and click Go. Icon Manager To insert an icon, position the carrot where you want to insert the icon, click the smiley face icon in the wysiwyg bar, find the icon you want and click on it.
17 #Introduction Themes will completely change your project styling like colors, fonts, borders, spacing etc. There are 17 pre-made themes included with Website Builder, you can of course create your own. #Changing a theme To change your active theme click on themes in the top navigation bar, this will open a themes panel. You can select a new theme by clicking on it's image on the left and you can see a preview of your active page with a new theme on the right. Templates #Introduction Templates are complete and fully featured multi-page designs for various types of sites like landing page, blog, portfolio etc. Once you apply a template to your project you can just change some text and you will have a fully made website in no time. There are currently 9 pre-made templates included with Website Builder with more to come in future updates. You can ofcourse create your own. #Choosing a Template You can select a template when creating a new project or you can apply it to an active project by clicking on templates in the top navigation bar, this will open a templates panel. You can preview a template by clicking on it's image on the left and you can apply a template to your project by clicking use at the bottom, please note that all of you projects previous html, css and js will be erased when new template is applied.
18 #Creating a New Template To create a new template, open templates panel and click on Save current project as a template at the bottom. This will open a modal, where you can enter your templates name, category and primary color. Once you click Save & Close your new template will be saved using your current projects css, html and js. Pages #Introduction Your project can have more then one page, you can manage your project pages by clicking pages on the top navigation bar, this will open a pages panel. Adding a New Page
20 To download a project, click on the Export button on the navigation bar, this will open exports panel. From here, you can click images on the left side to download them, you can copy&pase or click copy to clipboard button to copy your projects html and css. You can click export project button at the bottom to download the whole project or you can instead select a page and only download that page. Publishing a project To publish a project, click on the publish button at the top right on the navigation bar while in the builder or the cloud icon in the dashboard, this will open publish modal, here, simply enter your ftp credentials, the folder on your server you want the project to be uploaded to and check the SSL box if you want to use a secure connection, then simply click publish. Note that this proccess might take a minute or two depending on connection speed, so don't close the browser or Website Builder tab until upload is done.
21 #Context Menu To open context menu right click anywhere in the builder. The menu will contain some extra options depending on that element your cursor is hovering over, for example, if open menu while hovering over table it will have options to add and remove table rows and columns. Here are the options context menu will always have: Select Parent - This will select currently selected elements parent node in the builder. Wrap In Transparent Div - This will wrap the selected element with transparent black background. Cut, Copy, Paste, Delete, Duplicate - Will perform these operations on a selected element. Move Up, Move Down - Move selected element up or down in the builder, usefull when you need more precision for positioning then drag & drop can provide. Undo, Redo - Undo or Redo the last undoable action in the builder.
22 View Source - Open html editor and highligh the markup for selected element. #Keybinds If keybinds are not working you might need to click anywhere inside the builder to focus the main window. Keybind Del Description Move selected element up in builder Move selected element down in builder Delete selected element from builder Ctrl + C Copy selected element Ctrl + V Ctrl + X Paste selected element Cut selected element #Settings
23 To open settings panel click on settings button on the navigation bar. Here you can change various builder settings by choosing yes or no, these settings will be saved in the local storage so they will persist after page reloads.