Skip to main content
Using The Divi Theme Customizer

Divi makes it easy to take your custom layouts anywhere using the WordPress Importer.

Updated over a week ago

About The Theme Customizer

The Theme Customizers allow you to set up the basic styles of a Divi website, such as:

  • Website's Background Color

  • Website's Identity:

    • Favicon

    • Name

    • Tag line

  • Menu and Logo size

  • The default sizes of Sections and Rows

  • Basic Typography for Headings and body text

Note: Using the Divi Builder, many styles can be overridden for each page individually.

Accessing The Theme Customizer

  1. Go to WordPress Dashboard

  2. From the Dashboard Sidebar → Divi → Theme Customizer

Exploring The Theme Customizer

There are hundreds of options here, separated into different categories. When you first open up the customizer, you will see several panels, such as:

  • General Settings

  • Header & Navigation

  • Footer

  • Buttons

  • Blog

  • Mobile Styles

  • Color Scheme

  • Menus

  • Widgets

  • Homepage Settings

  • Additional CSS

General Settings

  • Site Identity - Defines the entire website identity, such as:

    • Site Title

    • Site Tag Line

    • Site Favicon

    Divi Theme Customizer - Site Identity

  • Layout Settings—This section defines the basic layout of any Divi website, including the Section's default top and bottom padding, the Row's default top and bottom padding, the Row's column gutter, and much more, as well as the Primary and Secondary Colors.

    Divi Theme Customizer - Layout Settings

    Both Primary and Secondary colors will be available as Global Colors throughout your website. If you use them and later change them from the Theme Customizer, the changes will be automatically applied to all elements using any of those two colors.

  • Typography: Defines the basic typography of the entire website, such as:

    • Body text's default font size

    • Body text's line-height

    • Header's Text size

    • Header and Body font family and text color, and more.

Pro Tip: The Header Text Size value set will be applied to all H1 Heading levels. Also, based on that value and the columns' layout, all the font sizes for the other heading levels will be calculated.

  • Background: Defines the website's background color and background image.

Note: Check the Divi Layout & Typography Customizer Settings article for more information.

Header & Navigation

  • Header Format: Defines the styles of Divi's Header. It can also Enable vertical Navigation or Hide the Navigation until scrolling the page.

  • Primary Menu Bar: Customize the Primary menu layout by changing the Height, the Logo's max height, Text size, and Letter Spacing, choosing the Menu's font family and color, changing the default background color and much more.

  • Secondary Menu Bar: Customize the Secondary menu layout by changing the font size and letter Spacing, choosing Menu's font family and color, changing the default background color and much more.

  • Fixed Navigation Settings: Customize the appearance of the Primary Menu when in a fixed state.

  • Header Elements: Choose to show the Social Icons the Search Icon and configure the Phone number and email address - which will appear at the top of Divi's Header.

Note: Check The Divi Header & Navigation Theme Customizer Settings article for more information.

Footer

  • Layout: Customize the Footer column's layout - by default, 4 columns layout is being used

  • Widgets: Customize the appearance of the Widget's text, such as the Widget's title text, body text, links color, etc.

  • Footer Elements: Display or Hide the Footer Social Icons

  • Footer Menu: Defines the styles applied for the Menu assigned as Footer Menu in WordPress Dashboard Appearance → Menus

  • Bottom Bar: Customize the styles of the Footer bottom bar and customize the default Copyright text.

Buttons

  • Buttons Style: Customize the default appearance of all buttons.

  • Buttons Hover Style: Customize the button's Hover state appearance of all buttons.

Note: Check the Adjusting Divi Button Styles In The Theme Customizer article for more information.

Blog

  • Post: defines the default text styles for the post's Meta information and Header text.

Mobile Styles

  • Tablet: Customize the default Sections and rows' top and bottom padding and the body and header text size for tablet devices.

  • Phone: Customize the default Sections and rows' top and bottom padding and the body and header text size for phone devices.

  • Mobile menu: Customize the mobile menu displayed on Tablets and Phones.

Note: Check the Using The Divi Mobile Customizer Settings article for more information.

Color Schemes

  • Color Schemes: Set one of the available color schemes for the entire website.

Menus

  • Menus: Create WordPress Menus.

  • Menu Location: set the Location where each WordPress menu should be displayed, such as Primary, Secondary or Footer.

Widgets

  • Sidebar: Place WordPress widgets in the default Divi Sidebar area

  • Footer Area #1...#6: Place WordPress widgets into any of the Footer's Columns.

Homepage Settings

  • Your Homepage Display: Allows you to choose what the website's homepage will display:

    • Your latest posts: A list of the most recent published posts

    • A static Page (recommended): where Divi Builder can be used to build an awesome layout

Additional CSS

Add your custom CSS Code, which will be applied site-wide.

Note: The CSS code placed in the Additional CSS area will also be displayed in Divi → Theme Options → General Tab → Custom CSS and vice-versa.

Did this answer your question?