Camelot 2.0 Theme - Divi Visual Builder Overview

Modified on Fri, 24 Oct at 11:35 AM

Introduction

The Divi Visual Builder is what we use to create our content for pages in a live front-end view. We use this for any page listed in the Pages menu and for page templates we have prepared in the Theme Builder.

Let the page content load fully, it may take a few seconds to render our Guestwisely plugin modules.

Please note: Some modules that are linked to the property API may display differently to the front-end live site and this can be ignored.

To enter the Visual Builder we must go to Pages Menu > Select Page > Edit With the Divi Builder.

Section Types

#	Color / Icon	Section Type	Description
1	Purple	Full-Width Sections	For modules you want to display edge-to-edge, usually background images or sliders.
2	Blue	Standard Sections	Keeps the content within a set container/page width.
3	Green	Row/Column Sections	Located within blue sections; allows formatting the width of columns and rows.
4	Grey	Module Sections	Tools used to create page content; found within green column sections. Edited about 90% of the time.
5	Lime Green	Global Sections	Any section type converted to a global version, appearing in multiple places site-wide; edits apply everywhere. Saved in the Divi Library in your CMS.
6	Red Padlock	Code Sections	Locked sections not edited in the visual builder; for advanced custom development.

Toolbars

All the above sections have the same toolbar on mouse-over.

Move – Drag your section
Settings – Content, formatting and styling configuration
Duplicate – Make a copy of section
Save Section – Save section to Divi Library
Delete – Remove section

Settings will be mostly heavily used, which is split into 3 tabs of Content, Design and Advanced. You may visit the Design tab for initial setup of styling but Content will be the go-to place for add/editing your website text and images.

Important: Always remember to confirm changes made with the green tick (or ignore them with the red close) or your edit will revert back. This does NOT save the page yet, see below.

Menus

Wireframe ViewThis is an alternative view of the page to the live view of the visual builder. It shows a section view of what we have covered above, color-coded and labelled for clarity. We recommend using this in some intricate edits, covered later in the tutorials.

Device Previews: These 3 device icons will allow you to preview your webpage on three default device sizes of desktop, tablet and mobile. Once you enter the tablet view you will also be presented with a dropdown list of device models for more detailed inspection.

Save Button: Always remember to save changes! You may need to be a little patient at times and allow the button to stop spinning and display the tick icon.

Exit Visual Builder: This can be done from the WordPress topbar. If you wish to leave and visit the current live page, click Exit Visual Builder. Or to go back to your WordPress CMS click Dashboard from the top-left dropdown.

Site Logo

Head to the main Divi Menu and you will see at the top of the General settings is the Logo Upload. This will take you to your media library where you can drag your logo file in from your desktop. It will be added to your main menu header and your custom 404 page. ‘Save Changes’ at the bottom of the page.

Design Tips: Be sure to use a version of your logo that stands out well on the navigation section. PNG or JPG format will be suitable – just try to make sure your logo is cropped to its edges to make the most of its size.

Color Palette: A little further down from Logo you will see a default colour palette. These will pull through to the Divi Page Builder for every setting you have for editing – making it a much quicker process for updating your template theme. These will also link with your global colour which we will set later, that updates the whole website.

Work your way through, clicking each of the default colours and enter your own 6-symbol hex code taken from your brand colours.

Design Tips: There will likely be only 2 or 3 colours in your brand but including some tints of your primary colours will help you style the pages. You can order these in the palette however you please but try to keep in mind which will be the main highlighting colour of the website. Don’t know your hex codes? Click here.

Header & Footer

Go to Divi Menu > Theme Builder.

The first container stores the templates that are used as default on every webpage – we call this our global templates. Click the edit icon on either the green global header or footer bars to open the Divi Visual Builder.

Tip: Open the Wireframe View via the grid icon in the bottom Visual Builder Menu. We have multiple sections in a small area so it can be difficult to edit in the live view.

1. Global Header

Your theme header consists of the Primary Menu (module). It is connected to your Site Logo in Divi settings and the font pulls automatically from the WP Customizer body font – so nearly everything is pre-prepared.

The only action required following:

1. Enter menu module settings to update active menu item colour.

2. Click the Design tab.

3. Scroll down to Active Link Color under Menu text.

Click on the current highlighted swatch to open your primary global colour and enter your new hex value to update. This primary global colour is synced to various modules throughout the theme and will update them all to match – there will be a popup message to warn this, click to confirm. Alternatively you can select another colour from your saved swatches which are not synced to other modules.

2.Global Footer

Enter the footer via the Edit icon where you will make a few small edits to your company information. Make your way through each grey module editing Tel, Email, Address and Social Media as shown below. The Menu items are controlled in WordPress CMS later, should you need to update.