How to Apply Divi Global Presets in the Ramona Child Theme
In this tutorial, we are setting up the Global Presets that have been created specifically for the Ramona Child Theme. We will also walk through applying Global Presets on the site’s homepage to match the demo site. This is not an all-encompassing deep dive into Global Presets. To get an overview of Divi’s Global Presets feature and better understand the function of presets, I recommend checking out this post on the Elegant Themes blog.
1. Set the default Button Style using Global Presets
In the sidebar, go to Pages > Branding > Edit with the Divi Builder.
Scroll down to the Button Styles section > Hover over the bouncing button listed as Option 1 and click the gear icon to open the module.
At the top of the module, click where it says Preset: Default. Look for the option that says Imported in the name, hover over the option so it’s highlighted in blue, and click on the trash icon to delete it. When prompted with Are You Sure, select Yes.
With the module still open, click back into the Preset: Default menu. This time, hover over the option called Button – black text and click on the star icon. This sets this button style as your default option. When prompted with Are You Sure, select Yes.
Hit the green checkmark button to Save changes.
NOTE: This change will affect all buttons throughout the site.
2. Set the alternative Button Style using Global Presets
Next, hover over the button in the section with the dark background labeled as Option 2. The module will be hard to see because it’s currently black on black but that’s what we’re going to change. Just move your mouse over the area until you see the module frame appear.
Click the gear icon to open the module.
At the top of the module, click where it says Preset: Default. Hover over the option called Button – white text and select it by clicking on the text. This sets this button style for this particular button.
Hit the green checkmark to save your changes.
3. Set the Project Blurb style using Global Presets
Scroll down to the Blurb Styles section > Hover over the blurb listed as Project Blurb Style and click the gear icon to open the module.
At the top of the module, click where it says Preset: Default. Look for the option that says Imported in the name, hover over the option so it’s highlighted in blue, and click on the trash icon to delete it. When prompted with Are You Sure, select Yes.
With the module still open, click back into the Preset: Default menu. This time, hover over the option called Project Blurb and select it by clicking on the text. This sets this blurb style for this particular blurb. Hit the green checkmark to save your changes.
Save the page before exiting.
NOTE: The blurb setup is a little different than the buttons because, with the buttons, we are not using the system default button anywhere on the site. This means we can change the default button to one of our styled/Preset buttons. For the blurbs, we are using the system default blurb on the Experience page and one of the Service page layouts. We could make either blurb option the default but there are more instances of the left-aligned blurb, so it makes sense to keep that as the default.
4. Set the Project Blurbs on the Homepage
In the sidebar, go to Pages > Home > Edit with the Divi Builder.
Scroll to the Projects section, hover over the first blurb, and click the gear icon to open the module.
At the top of the module, click where it says Preset: Default. Hover over the option called Project Blurb and select it by clicking on the text. This sets this blurb style for this particular blurb. Before you hit Save, we are going to implement a shortcut to update the rest of the blurb modules on this page.
With the module still open, click on the three dots in the upper right corner of the purple header. In the flyout menu, select Extend Blurb Styles. In the next screen, click the dropdown box that appears and select Throughout This Section. Click the blue Extend button. Then hit the green checkmark to save your changes.
Save the page before exiting.
✱ Yay ✱
If you’ve followed the installation steps in order, your site should now look and function just like the demo site. If you like all the fonts and colors as they are, you can move on to personalizing the site by adding your own content.
If you want to change fonts or colors, then continue on with the necessary tutorials, or do both.