To access the website builder, simply sign into your website and click the "Edit Website" button at the top of the admin dashboard screen.
**If you do not see the Edit Website button, you are using an older "Non-Builder" version of our website platform. If you would like to be upgraded to the newer builder version, please reach out to your account manager to have the builder enabled.
The page view within the builder reflects exactly how the page looks on the live site but contains all the editable rows and elements that make up each page.
On the left side of the builder there will be options for accessing different sections of the builder such as global design options, pages, design elements, settings and display device options. These sections will all be covered in depth in their own overview pages.
The Building Blocks
Each page in the builder is made up of a few different components that come together to make the design, layout and functionality on each page.
Rows
Rows function as sections on the page that contain other components to make up the content and functionality within that section. Pages are made up of a collection of different rows all containing different components.
Options to edit a row are available by hovering over the top left corner of the row. You will see the black row box pop up.
Clicking the row box will present you with some options for editing the row. Edit Design will take you to the row design options window for this particular row.
The row design window gives many options for customizing the row. All the options under the design tab relate to the look of the row, you can change the color of the background, add an image or video as the background, add border and shadow options to the row or change the width and heigh of the row.
The spacing window gives spacing options for how you want the spacing to work within the row. The spacing is measured in pixels(px) and you have options to add spacing to the top, bottom, left and right of the row. There is two levels of spacing options for the row, the spacing values in the white part of the box will add space to the outside of the row and the spacing values in the grey area will add spacing inside the row on the outside of the content.
For example, if there is 100px of space added to the top values both in the white and grey areas on the spacing tab, 100px of space will be added to the top of the row as a whole. This pushes the entire row down on the page. Then, 100px of space is also added to the inside of the row pushing the content inside the row down. In the screenshot below, the red line indicates the space added above the row by the spacing value in the white section. The blue line indicates the space added to the inside of the row but above the content by the spacing value in the grey area.
In the row options, there are also options to add, delete, copy or paste a row. To move a row on the page, you can click on the black row box and drag and drop the row where you want it or you can click the row box and use the arrows in the top of the row pop up to move the row up or down on the page.
Inner Rows
Inner rows work as rows within rows. We can add an inner row by clicking the row box in the corner of the row and clicking add followed by selecting inner row. Within an inner row, multiple columns of content can be added where as only one column of content can be added to a regular row. These inner rows give the functionality to create well designed content layouts. As an example, inner rows make it easy to create content where we have a photo on one side and a text write up on the other side of the photo. Each column in the inner row is able to be independently edited and elements can be added to each column without affecting the other column. Up to four content columns can be added within an inner row.
Inner rows can also be added into other inner rows to create smaller nested content areas of columns.
Elements
Elements are the various content blocks that can be added into rows and inner rows. There are a variety of elements that are talked about in more detail on the design page, but ultimately if rows and inner rows are the layout structure of the section, the elements are the actual content within that structure. Hovering over an element will show a dotted outline of the space that element is contained within and a pencil icon and red X will show in the top right corner to give the option to edit the element or delete it.
Each element has unique design properties and settings that will show in the edit tab accessible through the pencil icon. This element design tab works very similarly to the row design tab. A more detailed breakdown of each element and it’s design options will be available on the design page.
Header
The header section is where you can edit the header area of your website. Changes made to the header section will apply to the header that shows on all pages of your website. To access the header design options, hover over the header menu area and you will see a gold colored header tab appear. Click on the tab to open up the available options.
On the header design window, you will have multiple different options available for changing the design of the header along with options for customizing your navigation menu.
Logo
-
This section gives you the ability to edit the logo displaying in the header menu or add a new logo. To add a new logo, delete the existing image and an upload logo option will appear to upload a new image. Other options are also available to change the height and width of the logo, add spacing, or add background, border and show to the logo.
Layout
-
This section gives options for how you want the logo and navigation menu to display in the header. Clicking the layout preview will open up a side tab that shows all the available layout options. Click an option to change the format of the navigation menu layout.
Fixed Header
-
This section gives options for customizing the header that displays at the top of the page as the page is scrolled through. The header menu itself will always show at the top of the website page, enabling a sticky header though will allow for the header menu to stay displaying at the top of the page as the page is scrolled. A sticky header can be enabled by toggling the enable sticky header option in this section. The header design will switch to the fixed header design as soon as the page is scrolled and the design options in this section are for customizing the header that shows as the page is scrolled.
Menu
-
This section gives you customization options for how the menu bar design will look. The style tab gives options for the background color or image, border options and spacing options for the header menu. The text tab gives similar design options but for the text that shows in the header menu.
Dropdowns
-
This section gives customization options for how the drop down menus will look and function. The background options are for customizing the color and border of the menu dropdowns. The link options allow for customization of how the folders and pages display in the dropdown menu.
Top Line
-
This section allows you to customize the background and text color of the top line. The top line is the thin bar that appears above the header menu.
Typically this topline is used to add social icon links or phone numbers and email addresses.
Footer
The footer section is where you can edit the footer area of your website. Changes made to the footer section will apply to the footer that shows on all pages of your website. To access the footer design options, hover over the footer menu area and you will see a gold colored footer tab appear.
Click on the tab to open up the footer design window. You will have options to customize the background color and border of the footer along with options for spacing within the footer.
Publishing Changes and Undoing Changes
After making changes to a website page, the changes will need to be published before they show on the live website. Click the publish button in the upper right corner of the editor to make your changes go live.
The website will periodically autosave changes as you are working on the site, these auto saves will only save changes in the editor though and changes will not publish until the publish button is clicked.
If you need to undo or redo a change, the curved arrows beside the publish button allow for you to undo and redo changes.
