How to edit a page in the Visual Builder

Getting Started

1. Navigate to pages in your dashboard (left column) and select All Pages

2. Select the page you would like to work on and select Edit

3. Select Build On The Front End

Working with Images

How to replace an image

1. Follow steps 1, 2 & 3 outlined under How to edit a page in the Visual Builder
2. Click the image you would like to change and in the grey module editor select the gear icon

3. Click the image

4. Clicking the image will open up the media library in which you can select or upload a
different image
5. Select either Upload Files or Media Library
6. Select Upload an image in the bottom right corner

7. Ensure that you are saving your changes in the grey module box as well as at the bottom of the whole page.

How to upload an image

If you are already in the visual builder:

1. Follow the steps 1-3 outlined in 4) a) How to replace an image
2. Under Choose an Image select the tab Upload Files
3. You can either select files from your computer or drag and drop files to upload

Alternatively, you can add an image directly to your Media Library

1. In the dashboard (left column), navigate to Media
2. Select Add New
3. You can either select files from your computer or drag and drop files to upload

Guidance to image sizing

The size of your images can play a large role in your overall site speed. This blog article does a great job explaining which pixel size to use in different Divi modules. If your designer has not advised otherwise (certain design elements may require a specific ratio), feel free to refer to the information provided here:

https://www.elegantthemes.com/blog/divi-resources/the-ultimate-guide-to-using-images-within-divi

An easy-to-use online image resizing tool:

https://picresize.com/

How to edit text and change content

1. Follow steps 1, 2 & 3 outlined under 4) How to edit a page in the visual builder
2. Select the text module you would like to edit
3. Select the gear icon in the grey box

4. In the text editor module select the Text tab

5. Only edit the text within the code tags – leave code tags intact (<span> example </span> <p> example2 </p>)

6. Alternatively, select the Visual tab – In this setting, you will not encounter any code
tags & can edit your text in a similar way in which you would edit text in Microsoft
Word.

7. Save your changes in the text module as well as the whole page

How to change your page’s featured image

1. Follow steps 1, 2 & 3 outlined under 4) How to edit a page in the Visual Builder
2. Instead of editing on the frontend, stay in the backend editor
3. Scroll down until you see the featured image module on the right
4. To change the image: Click the existing featured image to edit or update
5. To add a featured image: Click the button Set Featured Image

6. Select either Upload Files or Media library

7. The feature logo/image should have the following dimensions: 400×400

8. Click the Update button on the right to save your changes

Meta Descriptions and Titles

How to edit your page’s meta and titles

1. Follow steps 1, 2 & 3 outlined under 4) How to edit a page in the Visual Builder
2. Instead of editing on the frontend, stay in the backend editor
3. Scroll to the bottom of the backend editor and Add your meta description and title

• A meta description is an element in the HTML code of a web page that provides a brief description of the content of that page. Although the visitors of a website cannot see it directly, search engines such as Google use it to display a web page in search results, as seen on the right in the screen capture below.
• Your title should be no shorter than 40 and a maximum of 60 characters long.
• Your Meta description should not exceed 160 characters to be fully shown in the search result.

4. Click the Update button on the right to save your changes