How to Setup and Configure Divi 2024

Theme Builder

For a start, this part is is optional, but highly recommended.  By taking a little time to set this up to make your life easier by speeding up the process when you start designing your pages, especially the Global Body component 

Global (Default) vs Custom

Theme Builder has similar purpose to Theme Options and Theme Customizer, however, the difference is that it allows the flexibility for users to target apply styles to a group of page / post / projects, or just a single one.  Any styles you build in Theme Builder will override anything that you’ve configured within Theme Options and Theme Customizer.  This doesn’t only allow applying styles to different groups of pages much easier, but also allows any changes to styles in a much more efficient manner.

The process to adding Global and Custom styles here is pretty much the same, the only difference is as specified below.

• Global Styles: When you go to the Theme Builder interface, you’ll see a module that’s been labelled Default Website Template, the Header, Body, and Footer you add here will applied Globally throughout the site.  These will all appear in green.

• Custom Styles: You can also click on the Add New Template module to create a template that’s going to be applied to specific pages or posts.  The only difference is that you’ll need to select where this should be applied to.

Global Body / Custom Body: Default Content Style

Adding the Global Body / Custom Body module

1. Go to Theme Builder
2. At the Default Website Template box, click on Add Global Body / Add Custom Body
3. When the Body module appears, click on the pencil icon to edit the Body styles

Creating the style templates contents

1. Once you’re inside the Body module, select Build From Scratch
2. Insert a row with single column
3. Click on the + icon and select to add a Post Content module
4. This module is for you to setup most of the default styles on the pages, mainly font styles for headings (H1 to H6), font styles for text, fonts styles for links, image styles, etc.  For the purpose of this exercise, let’s focus on the fonts.
5. After adding the Post Content module, hover over the module and find the gear icon to edit the module.
6. Go to the Design tab, and in here, you’re able to edit styles for different elements, then when it comes to design the webpages, you don’t need to edit every single element anymore unless you want to do something that’s not default.

• Text – contains tabs for paragraph Text, Link Text, Unordered List Text, Ordered List Text, and Blockquote Text styles.
• Heading Text – contains tabs for H1 to H6 heading styles
• For both Texts and Heading Texts, you’ll be able to style the following:
  • Font
  • Font Weight
  • Font Style
  • Text Alignment
  • Text Color
  • Text Size
  • Letter Spacing
  • Line Height
  • Text Shadow

Global Header / Custom Header (Optional)

This is optional, if you’ve setup a default header in Theme Customizer unless you’d like to further customize the design of your header menu. The default menu will work just fine!

Adding the Global Header / Custom Header module

1. Go to Theme Builder
2. At the Default Website Template box, click on Add Global Header / Add Custom Header
3. Click the pencil icon on the left of the module to edit the Header

Creating the Header

1. Once you’re inside the Header module, select Build From Scratch
2. Insert a row with single column
3. Click on the + icon and select to add a Menu module
4. Once you’re in the module, go to Content > Menu, Select the menu you created in the Theme Customizer.
5. After you’ve selected the menu to use, go to Logo, then click on Add Image and open the Media Library (the place that stores all the images, videos, files, etc.)
6. From there, you can either choose a previously uploaded image, or upload a new image by drag and drop from your computer, then click Upload Image on the bottom right hand corner.
7. Now you’ve created your basic top menu
8. Click on the tick icon and save changes to the module
9. Click on the Save button at the bottom right hand corner to publish your changes.

Global Footer / Custom Footer (Optional)

Adding the Global Footer / Custom Footer module

1. Go to Theme Builder
2. At the Default Website Template box, click on Add Global Footer / Add Custom Footer
3. Click the pencil icon on the left of the module to edit the Footer

Creating the Footer – the most basic footer

1. Once you’re inside the Footer module, select Build From Scratch
2. Insert a row with single column and add a Text module
3. In the Text module, add whatever text you need at the footer, most common would be the copyright stamp (e.g. ©COMPANY NAME 2024, etc.)
4. Click on the tick icon and save changes to the module
5. Click on the Save button at the bottom right hand corner to publish your changes.