For most projects, we use the Divi Builder, which allows our clients to edit their websites easily in the future without too much support.

The Divi builder allows you to edit your website pages using the drag-drop feature via the backend page builder or the visual builder.

The visual builder has the advantage of allowing you to amend the page on the frontend of the website, previewing your changes instantly on the page. You just click on the text and start typing, giving you a more accurate picture of how your visitors experience your website content.

Whereas you must visit the dashboard to edit via the backend builder. The backend builder is more similar to the way WordPress works initially, however with more control. On the back end, you see the wireframe mode only, giving you a good idea of how your page layout appears.

Listen to our latest episode of The MoPod with lead developer, Liam and developer, Nathan for a rundown of Divi Builder!:

The anatomy of Divi builder explained…

The structure of every Divi website uses three types of building blocks: Sections, Rows and Modules. Sections are the largest building blocks. Then you have your rows, which sit inside of sections. Modules are placed inside of rows.

Modules are the content elements which allow you to insert or edit text, videos, images, call to action and much more. Carry on reading if you want to know how to edit your modules.

To edit using the Divi visual builder

1. Log into your WordPress dashboard (‘https://yourdomain.co.uk/wp-admin’)
2. Then return to the frontend website and go to the page you want to edit
3. Click on ‘Enable Visual Builder’ in the top black bar
4. Making changes to text with the Divi Visual Builder is as simple as clicking and typing. To save your changes, click on the purple icon at the bottom of the page, and click save in the bottom right-hand corner.
5. To replace an image, start by hovering your mouse over it. A panel should appear with some icons inside it. Click on the cog icon. This will open a new panel. In this new panel, hover over the image and click on the cog icon again. You may now choose an image from the Media Library or Upload a new image. Select your image and then click ‘Upload an image’. To save your changes, click on the tick in the bottom right-hand corner.
6. When you are happy, click on ‘Exit Visual Builder’ in the top black bar and click ‘Save & Exit’.

To edit using the divi backend builder

1. Log into your WordPress dashboard (‘https://yourdomain.co.uk/wp-admin’)
2. Find your page. To do this go to left-hand menu > Pages > All Pages.
3. Choose the page you want to edit, hover and click ‘Edit’, You will now see the wireframe mode.
4. To edit a specific module (‘Text’ or ‘Image’), click on the three horizontal lines in the top right-hand corner of the aforementioned module.
5. In the module editor, you can make the changes you need, which may include any of the following: Selecting a new image, uploading a new image or editing the body text or title.
6. When you are happy with your changes click ‘Save & Exit’. This will then close the module.
7. Then when you have finished editing all the modules you want to update, click on the blue ‘Update’ button on the right of the page.

For any further help please contact our team on support@mosaiconline.co.uk

Need Further Tutorials?

Divi Builder overview: http://www.elegantthemes.com/gallery/divi/documentation/builder-overview/

Here is a list of other tutorials that may be of extra help: http://www.divithemeresources.com/divi-tutorial-sites/

Source of Images: https://www.elegantthemes.com/documentation/divi/visual-builder/