Riviera Theme - Divi Visual Builder Overview

Modified on Wed, 29 Oct at 12:44 PM

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

Riviera header consists of just the one Divi (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. Active menu item which is set to the default global Camelot blue.

2. Enter the Menu Settings and click the Design tab.

3. Scroll down to the Menu Text settings and you will see the default blue. Click on the highlighted blue and enter your hex value for the main highlight colour you have chosen for your site. This is connected to many modules throughout Riviera and will update them all – there will be a popup message to warn this, click to confirm.

Topbar 1 – The default Topbar has a social media module to the left and a code module for saved properties on the right. Open up the wireframe view here and you can see these labels. Click the social module settings icon and you will see a list of default channels. You may delete all you don’t actively use via the trash icon. For channels you do, again click the settings icon and then enter your page url in the link tab. Confirm changes with the green tick.

Topbar 2 – There is an alternative Topbar you may use if you are not active on social media. Simply click the blue (section) plus icon, ‘Add from Library’ tab and select Topbar 2 – ‘Use this layout’ button. This uses a Text module for you to display Tel, Email and/or address. Delete the existing Topbar 1 with the trash icon in the toolbar menu.

Toolbar 2 - There is an alternative Topbar you may use if you are not active on social media. Simply click the blue (section) plus icon, ‘Add from Library’ tab and select Topbar 2 – ‘Use this layout’ button. This uses a Text module for you to display Tel, Email and/or address. Delete the existing Topbar 1 with the trash icon in the the toolbar menu.

Main Header – this has already had the logo and buttons formatted from previous steps, so all that is left to do, should you want to, is change the font of the menu to either your header or paragraph font Design > Menu Text > Menu Font.

2.Global Footer

Enter the footer via the Edit icon where you will make a few small edits to your company information. The footer logo is also connected to the Site logo settings so no changes needed. 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.