Learn with bit-sized videos

1. From WordPress Dashboard, click on the home icon or your website name found at the top left corner
2. Click “Enable Visual Builder” purple icon on the top of page to edit your page directly

1. Make sure you click “Enable Visual Builder” before editing anything on your page
2. Hover over the text you want to edit
3. Click the gear icon (0:48)
4. You can replace existing text or go to “Text” to edit HTML code
5. To adjust text sizes, color, or font, click on “Design” tab – make sure that you’re adjusting the correct “Text” or “Heading Text”.

   *Tip: If you hover over the text you want to adjust, a blue checkmark will appear (on 3:09). If you click on it, the “Design” tab will automatically take you to the functions to customize your text size, color, font, etc.

6. Click green checkmark on bottom right to save
7. Save website before exiting the Visual Builder

1. Hover over the button you want to edit
2. Click the gear icon 
3. Customize the button text or “call to action”
4. Add URL under “link” (0:27)
5. To adjust button background color, text sizes, color, or font, click on “Design” tab 
6. To undo, keyboard shortcut is CTRL + Z (for window) or CMD + Z (for mac) or click the red “X” instead of the green checkmark. This will prevent saving your work. In case you want to access history edits, click the purple “clock” icon found on bottom of the Visual Builder (1:20)
7. Click green checkmark on bottom right to save
8. Save website before exiting the Visual Builder

To switch photos, please make sure the new photo you intend to swap is about the same-sized dimension as the previous photo. For example, if you switch the original horizontal 16:9 photo with a vertical photo, this may affect the layout of the website. In case you need a photo editing tool, Canva is a tool you can use. I would download the photo as a “JPG” file.

To check photo size, click on photo’s gear icon “Module Setting” > Click on Gear Icon again > Media Library > click on photo from Media Library and the size will appear on right hand side

1. Hover over the photo you want to switch
2. Click the gear icon 
3. You can upload a new photo or select an existing photo from “Media Library”
4. Click green checkmark on bottom right to save
5. Save website before exiting the Visual Builder

To switch photos, please make sure the new photo you intend to swap is about the same-sized dimension as the previous photo. For example, if you switch the original horizontal 16:9 photo with a vertical photo, this may affect the layout of the website. In case you need a photo editing tool, Canva is a tool you can use. I would download the photo as a “JPG” file.

To check photo size, click on photo’s gear icon “Module Setting” > Click on Gear Icon again > Media Library > click on photo from Media Library and the size will appear on right hand side

1. From your Smugmug album, click the photo you wish to use
2. To grab the photo URL, right-click and select “Copy Image Address”
3. This is optional but in a separate tab, you can paste the image URL on your browser so that you have it ready.  Make sure the link ends with .JPG or .PNG
4. In Divi, hover over the photo you want to switch
5. Click the gear icon
6. Click the photo again
7. Select “Insert from URL”
8. Paste the image URL — CTRL + Z (for window) or CMD + Z (for mac)
9. Click “Insert into post”
10. Click green checkmark on bottom right to save
11. Save website before exiting the Visual Builder

You will notice that from the Visual Builder, there are a few duplicate sections that are visible and washed-out. If you view from your desktop, the sections that are washed out are for tablet or mobile-view only. These sections were made intentionally in case users are viewing your website on various devices.

I would advise against making any layout or design changes. However, you may update text or images to ensure it is consistent on various devices. Please reach out to Avidbits in case you have questions.

If you hover over a photo you wish to swap and the gear icon does not appear, it is a “background image”.

1.  To update the background image, hover over the “row” highlighted in green.
2. From “Row Settings”, you would select one of the columns with the background image. If the background image is on the 2nd column (right side), select the 2nd gear icon (0:29)
3. Select “Background”
4. Click on “Background Image” (0:35)
5. To swap, click on gear icon
6. Upload, add from Media Library, or insert image URL to replace background image
7. Click green checkmark on bottom right to save
8. Save website before exiting the Visual Builder

1. To edit the links from your Menu Bar, go to your WordPress’s Dashboard
2. Click “Appearance”, then click “Menus”
3. Select the menu you want to edit or create a new one. By default, it should be Main Menu (Primary Menu).
4. You can drag-drop pages or add “Custom Links”
5. Save Menu
6. If your website, the updated menu with links should appear.