Using the Divi Builder

App State WordPress websites use a custom theme that incorporates Divi, a powerful visual page builder that allows you to create and edit pages visually using a drag-and-drop interface. The Divi Builder (ie. Visual Builder) lets you edit your page directly on the front end of the website. You can click on text to edit it, drag and drop elements to move them around the page, and see your changes in real time, with no coding required. This guide will give you a basic understanding of how to use the Divi Builder on your website.

How to Access the Visual Builder

1. Log into your website and navigate to the page you want to edit.
2. In the top admin toolbar, click Enable Visual Builder.
3. The page will reload with the Divi Builder activated.

Understanding Divi's Structure

Divi pages are built using three main building blocks, which must be present and in this specific order:

• Sections (blue): Large horizontal blocks that divide your page into parts.
• Rows (green): Layout containers inside sections (e.g., one column, two columns).
• Modules (gray): The actual content (text, images, buttons, etc.)

Adding New Content

To Add a New Section:

1. Click the blue "+" button.
2. Choose a section type (you'll usually want Regular).

To Add a New Row:

1. Hover over an existing section and click the green "+" button.
2. Choose a row type (e.g., 1 column, 2 column, etc.).

To Add a New Module:

1. Hover over an existing row and click the gray "+" button.
2. Choose a module type (e.g., text, image, button).
3. Fill in the content in the popup editor.
4. Click the green checkmark to save.

Editing Existing Content

1. Hover over the content you want to change.
2. Click the gear icon to open the settings.
3. Make your edits in the popup window.
4. Click the green checkmark to save.

Deleting Existing Content

1. Hover over the content you want to delete.
2. Click the trash icon ().

Saving Your Page

1. Click the purple circle at the bottom of the screen to open the Divi menu.
   
2. Click Save (or Publish if it’s a new page).
   
3. Click Exit Visual Builder to return to the normal view.
   

Previewing for Mobile Responsiveness

Ensuring your content looks good on all devices (e.g., desktop, tablet, and mobile) is an important part of building accessible and user-friendly pages.

How to Preview Your Page on Different Devices:

1. While in the Divi Builder, click the purple circle at the bottom of the screen to open the Divi menu.
2. Click the icon for the screen size you want to preview (usually located in the bottom-left corner of the screen).

What to Look For:

Divi handles most of the responsiveness automatically, so you likely won't need to make any changes. However, it’s always a good idea to preview each screen size to make sure it looks how you want. Here are a few things to look for:

• Content scaling: Is any content cut off or scaled unproportionally (specifically images, videos, tables, and embedded content)?
• Spacing: Are sections too cramped or too spread out?
• Stacking order: Do columns stack in a logical order on smaller screens?

Divi Modules

Divi offers a wide variety of modules for adding content to your pages. While there are many available, here are some of the most commonly used ones:

• Text: Add and format paragraphs, headings, and links.
• Image: Display a photo or graphic from your Media Library.
• Button: Create a clickable button that links to another page or file.
• Video: Embed an uploaded video or one from YouTube or Vimeo.
• Call to Action: Highlight a key message with a headline, supporting text, and a button (e.g., "Apply to App State" message with "Apply Now" button).
• Blurb: Combine an icon/image with a short block of text (e.g., feature highlights).
• Accordion: Create collapsible content sections (e.g., policies).
• Tabs: Display content in a tabbed layout to save space.

Tips for Using the Divi Builder

• Keep layouts simple: Use one or two columns for most content.
• Preview on mobile: Use the responsive view options to check how your page looks on phones and tablets.
• Avoid the Design and Advanced tabs unless you’ve been trained to use them. The Divi Builder includes a lot of styling options, but we want to keep our websites consistent with the University's design standards. You likely won't need to adjust these settings anyway.