Table of contents

Set Divi Builder correctly

Divi Builder: Now set up the Divi Customizer correctly in 3 steps

The most important settings before you start working in Divi Builder!

With over 800,000 installations, 200 layout packs, 70,000 Facebook members, countless extensions and 50 local groups, the Divi theme from Elegant Themes is one of the most used WordPress themes worldwide. The Divi Builder not only comes with a huge wealth of great designs, but also has a diverse number of different features that can be added to a website. That's why it's so popular!

Divi installations and figures

Set up Divi Theme

If you plan to use your WordPress website with the Divi theme in the future, it is important to set up your site properly in advance. And not only within the Divi Builder, but also in the WordPress Customizer, which many people forget. A proper setup in advance will save you a lot of work later when creating your content. Sounds logical. It is. How to install Divi and thus the Divi Builder can be read here.

Within the WordPress Customizer, there are numerous setting options that can fundamentally change the appearance of your website. Therefore, it always makes sense to think in advance about how your website (such as colour palette, fonts, navigation, footer, website layout, etc.) should look later. Write everything down and only get to work when you are ready. Good planning is half the battle.

My tip: Take the time now to save time later!

So here we go - First steps in the Customizer

There are two ways to access the Customizer (Divi Builder should already be installed and activated). Either via the Design - Customizer tab or directly via Divi - Theme Customizer. Both ways lead to the goal. When you click on it, you will find a menu bar with different settings on the left-hand side. You can also see which theme is currently active. The Divi theme (or the corresponding child theme if you are already using it).

Divi Builder: Settings

The general settings for your Divi page

We start with the general settings. Clicking on the menu item "General settings" opens a submenu with the various settings for setting up your website. Of particular interest to us are the tabs "Layout settings" and "Typography" in Divi Builder.

Divi Builder: General settings

Layout settings

In the first step you can decide whether you want to use a box layout or whether you prefer to use the standard layout of a website. The box layout gives the website a left and right margin. It is also often used for pure blogs.

Divi Builder: Layout

Then set the width of the content of your website under "Content width of website". The default value of 1080 px has proven itself in practice, so it makes sense to leave the default value here.

The next setting called "Website column spacing" is, in my opinion, translated somewhat incomprehensibly in Divi Builder. This is the margin between the columns within a row. So, for example, if you create a module with three columns within your website, this item controls the spacing between the columns. The Divi Builder defines the whole thing in numbers from 1 to 4, which result in percentages of the following values.

1 stands for zero space between the columns.
2 stands for a right margin of 3% between the columns.
3 stands for a right margin of 5.5% between the columns.
4 stands for a right margin of 8% between the columns.

Divi Builder: Interface

If you want to use a sidebar for your website, you can define the width of the sidebar in the Divi Builder via the item "Use custom width for sidebar" here.

Under the items "Section height" and "Line height", the upper and lower spacing can be defined for each section or line. A little tip: A higher spacing gives a website more "space", which has a positive effect on readability. And now for the last point, accent colour: This controls the colour for various elements on your page (such as the hamburger menu, background colour for the secondary menu bar, active link... etc.).

Don't worry, you can adjust the colour in the Divi Builder in a more refined way in the settings for the respective elements. The good thing about this is that you are not fixed here. As a tip, I would definitely choose your accent colour from your colour palette. This way it will be displayed as soon as you call up a new element and not the standard WordPress colour.

Typography

Under Typography you can define the default settings of the Divi Builder for fonts. This is very practical, because once defined, your pre-set fonts/line heights/font sizes etc. are displayed for each new module. In my opinion, this is one of the most important settings in the Divi Builder.

Divi Builder: Typography

There are two selection fields for typography here that are most helpful for the later structure of your website - namely Font Header and Main Font. Under the term "Header font" you can set the font for headings and under the keyword "Main font" you set the font for the body text. You also have the option of directly adjusting the font size and line height in the body.

Divi Builder: Font

As far as the colours are concerned, you can adjust the colours for the font in the body and for links here. As far as the link colour is concerned, it is identical to the accent colour, which you can set under "Layout settings", unless you change it here.

Wow, that was a lot. But most of it is done. Because we've already made some settings for the Divi Builder and your new website with it. Now it's time for the finishing touches.

Header & Navigation Setup

Divi Builder: Header

Header format

We will now jump to the sub-item "Header format" in the Divi Builder. Here you can easily create your desired menu from various options. A small hint: If you decide on a centred menu, your logo will also be displayed centred, otherwise left-aligned. You can also decide here whether you would rather have the menu in the header or vertically integrated into the sidebar.

Divi Builder: Header format

Primary menu bar

Don't be surprised! Under this point in the Divi Builder, one could now assume that the primary menu bar controls the appearance of the top bar. This is not the case! The top bar (here the menu with the magenta background) is called the "secondary menu bar". A little confusing, isn't it? Back to the "Primary menu bar" tab - here you can make a variety of settings.

Divi Builder: secondary menu bar

However, I would like to focus on the following point: "Logo Max Height". Here I am often asked what size the logo should best have so that it integrates well into the menu.

The following applies to the desktop version: For a logo in landscape format, a minimum height of 45 - 55 px and a minimum width of 250 px have become established. A logo format of 90 x 500 px is optimal. The PNG format, which can also be used to display transparent logos, is the most suitable image format. In addition to the menu height, the font size in the menu also plays an important role in how your logo is displayed. You can play around with the values in Divi Builder until you find the ideal display.

Since the display of square or portrait format logos in standard menus is not always optimal, it is advisable to have a variant in landscape format in addition to your main logo. If you do not have one, you can alternatively solve this problem by displaying your menu bar in a different way, e.g. a centred menu. Another alternative is to remove the logo from the menu and centre it on the page. There are many possibilities here in the Divi Builder.

The following applies to the mobile view: less is more. Logos with a lot of text or elaborate elements that would appear illegible when scaled down can also be displayed for mobile devices. The trick: Many designers resort to scaled-down logos that only include part of the logo text, e.g. in the form of initials, or contain fewer image elements.

The top menu or secondary menu bar

As mentioned earlier, the secondary menu bar is the bar that sits above the primary menu bar or main menu. It is often used to display contact details or social media buttons. The settings are similar to those of the primary menu bar and are self-explanatory even for beginners.

Divi Builder: secondary menu site settings

Settings for fixed navigation

And again, it is not really obvious what exactly is meant by this. To clarify, these are settings for the primary menu. The settings take effect when you want your menu bar to be displayed fixed in the upper area. By default, when you scroll, the items in the menu become slightly smaller. If you do not want this, select the same settings for the elements as in the "Primary menu bar" area.

Divi Builder: Fixed Navigation

Header elements

Here you can activate those elements that you would like to have displayed in your secondary menu bar, such as social media icons. The link to the social media icons can be set in Divi under Divi - Theme Options - General.

Divi Builder: Header elements

If you want to know where the search appears. It is displayed in the primary menu bar.

Buttons, Buttons, Buttons

To avoid having to start from scratch every time you create a new button, it makes sense to define the button style in advance in the Customizer. You can find the settings for buttons under Design - Customizer - Buttons (Button).

Divi Builder: Buttons

Here you will find two subcategories, the general settings for buttons "Style of the button" and the settings for the hover mode "Style of the button". The hover mode means nothing other than that you hover over a certain element on a web page, in this case a button, and the appearance of the element changes, e.g. by changing the button colour. This is the hover effect.

The hover effect makes your website more interesting for users. You can also customise a whole range of settings for your button, especially background colour, border, font, icon, ...etc.

What cannot be set here are gradients for button backgrounds and you can only define one button style here. If you want to use two button styles (e.g. one button for dark backgrounds and one for light backgrounds) or add gradients, I recommend that you set this up directly in Divi Builder and save this button(s) as global element(s) in the library. This way you always have the possibility to fall back on it when needed.

So that's it for this tutorial on the most important settings in the Customizer.

A few final words about working with Divi

As you can see, it's not difficult to set up your new Divi website in advance in the Customizer using the Divi Builder. With a little practice and good planning, the adjustments can even be made in a relatively short time.

And it is already worthwhile if you want some elements of your website to be predefined and you only need to fill them with your content (such as call-to-action buttons or body text). Even if it may seem a bit cumbersome to make detailed adjustments at one point or another, we can report from our own experience that the time spent will be more than worth it. Afterwards, you can relax and dedicate yourself to your website. So it's best to just try it out!

We hope you enjoyed the tutorial and that it will help you to set up your website. If you have any further questions or comments, we would be very happy to hear from you. Tell us how you got on with your new Divi website, show us your new website or anything else you can think of about WordPress.
We'd love to hear from you.

About the author(s):

Share article:

Facebook
Twitter
LinkedIn
WhatsApp
Reddit
XING

About the guest author

Meriem Benois

What has developed over the years from curiosity and passion, Meriem Benois has made her profession. Since 2021, she has been a web designer with heart and soul, founder and head of the agency Raster & Pixel, which specialises in WordPress sites for coaches, trainers, consultants and service providers. She not only creates websites with the popular Divi theme but also offers support for Divi for her clients.

Similar articles

One answer

Write a comment

Your email address will not be published.