x
Bookmark

Divi – Theme Customizer

Video Tutorial

Script & Screenshots

In this video I’m going to go through the Theme Customizer settings.
Click on Divi on the left menu.  Then click on Theme Customizer.

The Customizing settings are on the left of the page.  Notice on the right side of the page, you will be able to preview your changes before you choose to save them.

At the top you’ll see two arrows, pointing up and down.  I go through this setting in the Portability video.

The next option, it shows the active theme.  This will be Divi as long as you’re in the customizer.  Unless you’re using another theme and the Divi Builder plugin.  If you’d like to change your theme, you can do it here.

I’ll start with the General Settings.

There are four options under General Settings.  Site Identity, Layout Settings, Typography, and Background.

Starting with Site Identity.  Here you can set your Site Title, Tagline, and your Site Icon.  This is also called a Fav Icon.  You can also set these under WordPress, Settings, General.  With the exception of the Fav Icon.

To go back to the other previous page, click on the back arrow highlighted in Yellow.

The Layouts Settings is where you can adjust various sizing and spacing options for your website.  Here you can adjust the width of your content area, increase or reduce spacing between columns, rows and sections, change the theme accent color, and adjust the size of your sidebar. You can also enable Boxed Layout mode.  Boxed layout removes the Full width capability of stretching all the way to the side of the pages.  The full width of a boxed layout will become the full width of the content area.
The Typography Settings is where you can adjust the default appearance of the text across your entire website. You can adjust the size of your body font and header fonts, which will be reflected across all areas of the site proportionally. You can adjust their colors as well as line height, letter spacing and font styles. Finally, you can also choose between dozens of fonts to be applied to each.
The Background Settings allow you to adjust the background color of your theme, as well as upload a custom background image.  You have the option to stretch the background image the width of the page, background repeat, position, and whether you want it to be a fixed image or to scroll.  Background images and colors work great when paired with the Boxed Layout option in the Layouts Settings mentioned earlier.
Under Header & Navigation, your options are Header Format, Primary Menu Bar, Secondary Menu Bar, Header Elements.

For Header Format, you can adjust your header’s general format, such as switching between the main layouts modes: Default, Centered and Centered Inline Logo. Choosing Centered will place your logo above your navigation menu and centered both within the header. Choosing Centered Inline Logo will place the logo in-line with your nav menu elements, centered between the links.

You can also enable Vertical Navigation from within this section, which will create a drastically new look for your site, putting the navigation bar on the left of your content.

For the Primary Menu Bar settings, you can adjust the size, font, style and color of your primary navigation menu. This is the large white bar at the top of your page that contains your logo and your primary menu links. Within this panel you can do a lot of things very easily, such as adjust the height of your logo, the background color of the menu bar and the color of your links.  There’s also settings for the drop down menu.
The Secondary Menu settings is the smaller of the two navigation bars that appears above your main navigation bar. This menu will not appear unless you have assigned a menu to the secondary menu location, or you have the social media icons, phone or email enabled under Header Elements.  Once enabled a smaller blue menu bar will appear. This panel allows you to customize that menu bar and the text within it, adjusting the background color, text color and text styles.
Header Elements are various optional things that appear in your secondary menu bar, each of which can be toggled on and off here, such as your social follow icons, the search icon, phone number and email address.
For the Footer Settings, you have 5 options.  Layout, Widgets, Footer Elements, Footer Menu, and Bottom Bar.
Under Layout Settings, you can select a column layout from 10 different options.  Depending on what type of information you want to display there, you can choose a layout that will fit your website needs.  You can also style the text of your widgets, and customize your footer menu styles if you’ve assigned a footer menu.  You can also change the background color of the footer here.
For the Footer Widget Settings, you can set the size of the fonts, colors, line height, and style.  This gives you control to have different font colors, etc. from the rest of your website.
Under Footer Elements, you can choose whether or not you want to show the Social Icons in the footer area.  To disable them, un-check this box.
If you’d like to add a menu to your footer area, under Footer Menu Settings, you can change the text styling, colors, sizes, spacing, etc.
The Bottom Bar Settings controls the settings of the bottom footer bar.  This area contains the website credits and any social links you have enabled.  You can set the background color, social icon colors, font size, color, and style.
For Buttons, you have two options.  Button Style, and Button Hover Style.
Here you can adjust the general appearance of your buttons using the various customizer controls. You can change the color of your button text & background, adjust the button font size and style, and even create rounded buttons using the border-radius slider. In addition, you can change the default font and icon used within the buttons.
Under Button Hover Style Settings, you can adjust the button’s hover style. When you make a hover style different from the normal button style, it creates a fun animation.  This animation is triggered when the visitor’s hovers over the button with their mouse.
Under Blog, our option is to edit the Post Settings.
Under Post Settings, you can set the size of the text, adjust spacing, and font style for all your blog posts.  Including the Meta text.
Here you have 3 sections within the Mobile Styles Settings:  Tablet, Phone and Mobile Menu.
Under Tablet Settings, you can adjust the styles seen by viewers on tablet-sized screens. You can adjust your font sizes, including body and header fonts, as well as your website spacing, such as the spacing between rows and sections.
Phone Settings:  Here you can adjust the styles seen by viewers on phone-sized screens. You can adjust your font sizes, including body and header fonts, as well as your website spacing, such as the spacing between rows and sections.
When the main mobile breakpoint is reached, the navigation menu appearance changes to a more standard mobile-style. This menu is seen by viewers on phones and tablets. Here you can adjust the appearance of this mobile menu, overriding the general styles chosen for your Primary Navigation bar within the Header & Navigation panel of the Theme Customizer.
Under Color Schemes, you can choose your color scheme.  Your choices are Default, Green, Orange, Pink, and Red.
Under Menus, your results will vary depending on the menus you have created.  You’ll see Menu Locations and the names of the Menus you have created.  I have Top Menu and Second Menu created on my site.
Under Menu Locations, you can choose what menu you want in each location.  This theme supports adding a menu as the Primary, Secondary, and one for the Footer.  You can also add custom sidebars to widgets that can be easily added to sidebars and the footer.
If you open up a Menu that you have created, it will allow you to add and remove pages, change the location, and you can select to automatically add new top-level pages to your menu.  You can also adjust these settings through WordPress under Appearance, Menus.
Under Widgets, you’ll have the option of all the Widgets supported by the Divi theme.  This is usually the four for the footer area.  You can create custom widget areas, but this will require some coding skills.  Widgets can also be edited under Appearance, Widgets.
If you had any widgets setup, they’d show up here.  You also have the ability to add and remove widgets from each area.  The nice thing with adding widgets from the Theme Customizer is that you can view the changes on the screen as you add them.
Under Static Front Page Settings, you can choose whether you’d like to have your blog posts be your home page.  This is great for bloggers.  Or you can choose a page you’ve created to be your front page.  This is great for business, especially if you don’t do any blogging.  If you do plan to blog and not have them show on the home page, you can choose which page those reside on here.  You can also find these same settings under Settings, Reading.
At the bottom of the Theme Settings, you have the option to change your preview pane to desktop, tablet, or phone.
There’s also an option to collapse the Theme Customizer menu.
When you’re all done making changes and you’re ready to save them, you can click on the Save button.  It currently says Saved for me, which means I have not made any changes to save.

If you click on the X, you will close out of the Theme Customizer settings.

That’s it for this video.  I’ll see you in the next one.

WordPress Divi Theme
Purchasing & Installing
   Purchase Divi Theme   (7:46)
   Installing Theme   (1:44)
Divi Builder
  Default Editor vs Divi Builder   (3:18)
   Page Settings   (1:05)
   Post Settings
Sections, Rows, Modules (SRMs)
  SRMs Overview
   SRMs Settings Tabs
  Adding SRMs
  Cloning SRMs
  Deleting SRMs
  Moving SRMs
  Changing Structures of Rows
   Types of Modules
   Types of Full Width Modules
Theme Options
   General Theme Options
   Navigation Theme Options
   Layout Theme Options
   Ads Theme Options
   SEO Theme Options
   Integration Theme Options
   Updates Theme Options
Customizers
   Theme Customizer
   Module Customizer
Role Editor
   Role Editor Overview
   High Level Theme Privileges
   Builder Interface
   Library Settings
   Settings Tabs & Types
   Module Use
  Portability
Library
   Divi Library
   Global Items
   Premade Layouts
  Saving to the Library
  Loading from Library
X

Forgot Password?

Join Us

Password Reset
Please enter your e-mail address. You will receive a new password via e-mail.