Website Builder Documentation

Transcription

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

3 Logout From Website Builder Breadcrumbs. Click to select an element. Elements #Introduction You can see all the elements that come with Website Builder by default on the left sidebar (elements panel), they can be basic ones like button or link or they can be a lot more complex and combine html markup, css styling and javascript behaviour into one element. #Drag and Drop You can drag and drop elements from the elements panel into the builder. Note that you might not be able to drop them anywhere you like, because Website Builder follows official HTML5 specification for what elements accept what elements as children, for example an unordered list element (ul) will only accept list item (li) as a child, so you will only be able to drag and drop list items inside unordered list. #Inspector The panel on builder right is called an inspector, using the inspector you can modify various css styles for a selected element without any css knowledge while having realtime preview in the builder. Element visibily The buttons at the top of inspector control selected element's visibility on on phone, tablet, laptop and dekstop. If the buttons background is black the selected element will be hidden on that device. This helps building truly responsive pages.

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.

15 #Code Editors For a full control of your project you can use code editors at the bottom to edit your html, css and javascript and see a live preview of your changes. HTML Editor Click on the Html button at the bottom to bring up an html editor, here you can edit your projects html and see a live preview of your changes in the builder. Selecting a new element in the builder will highlight that element's markup in the html editor, you can also click view source in the right-click menu to show selected elements markup in the html editor.

16 CSS Editor In the css editor you have full control of your project css, css generated by inspector as well as your custom one will be visible here, you can edit, delete or add custom css all with a live preview in the builder and warning/error message to help you write correct syntax. JS Editor In the js editor you can edit your projects javascript as well as attach external libraries for your project to use, like google maps, animated scrols and rss feeds. To attach/detach a library simply click on it on the right. To add a new library click on the plus sign in the top right, this will bring a new library modal, simply enter the library details and clikc Save & Close Themes

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

19 You can create a new page by click add new button at the top of pages panel. This will create an empty page. Switching Pages Clicking on the page names on the left will switch the pages, so you can change their names and meta data as well as change the active page in the builder. Emptying Project Clicking on red Empty Project button at the bottom will clear all html, css and javascript for all the project pages. So you can start with blank pages. Name and Meta You can change the page name, title, description and tags in the middle of pages panel, these meta tags will be applied to the pages when they are exported. Delete, Copy, Save You can delete a page, copy it or save any changes you have made at the bottom of pages panel. #Export / Publish You can easily download your full project as a.zip file containing production ready code or you can directly export it to a remote server via ftp. Downloading a project, page or an image

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.