The web builder uses pre-built HTML templates for you to drag and drop and edit to create full websites.
Choose from different site categories ( Navigation, Features, Team, Contact, Content & more) to stack individual blocks together, creating fully responsive websites one block at a time.
Edit colors, content, images, links or even raw HTML and CSS to customize your site template exactly how you want it.
When you first load the JS builder, you'll see menu options for Blocks, Components and Pages on the left:
Blocks are the pre-built HTML "chunks" that you will drag and drop onto the canvas to build your website.
Components are raw block level items that you use for extra customizations with forms and buttons and layouts.
Pages are the unique HTML pages ( home page, contact us page, about page, service page) that make up your site's template.
Above these options, you'll see buttons to toggle the viewport size between mobile, tablet and desktops views.
Finally, the grid toggle will show you outlines for the draggable grid within your web template:
The top right of your builder view will have 6 action links:
When you make changes to a template the left most option will allow you to "save" your changes while you keep working (or to come back to later). Exit without saving, will simply exit the builder and you will lose any unsaved changes.
Save & Continue will save what you're working on and move you into deploying the template to a live domain.
The "?" link will show you available variables you have access to as part of the Jensen HTML templating engine (see help guide for templating information).
Page Settings will allow you to set the SEO settings for the specific page you're viewing.
Finally, Preview will open up a preview window of the current template so you can see what it'll look like in a real browser.
Now... lets drag and drop a navigation block into the canvas so we can see how the style editor works:
Each block has a menu on the right side with 5 options:
Checking the Global option for a header and footer block allows you to create any number of pages that will automatically have those blocks frozen at the top and bottom.
The "+" sign next to the global checkbox allows you to move a block up and down.
The "</>" symbol allows you to edit the raw HTML of any block in the system:
The "Refresh" button reverts the current block back to its original design and settings and the "Trash" icon removes the block from the current template.
To edit the styles or content of a block, hover over the element in the canvas and you'll see a red square around the currently selected object:
Click the button and the style editor will appear on the right side:
From there, you'll be able to edit selected styles like CSS margins and background colors.
Through dragging blocks you like into the canvas and editing them with the style editor, you'll quickly be able to create beautiful, responsive websites.