Adjusting Your Website's Layout And Typography
To begin customizing your website's Layout and Typography, load the Theme Customizer by clicking on the Divi → Theme Customizer link within your WordPress Dashboard.
This will launch the customizer. Next, look for the General Settings panel. Click the panel to open up the relevant settings and begin customizing.
Within the General Settings panel, you will notice three sections:
Layout Settings
Typography
Background
Layout Settings
The layouts panel is where you can adjust your website's various sizing and spacing options. Here, you can increase or reduce spacing between columns, rows and sections and adjust the size of your sidebar. You can also enable Boxed Layout mode from within this panel.
Enable Boxed Layout
Here, you can change your site into a box layout that frames your site's content and exposes a background that can be customized.
Website Content Width
This is where you can set the max width of your content section. Since your content is on a responsive layout, it will adjust to smaller sizes but will not expand any wider than the maximum width set here. The default is set to 1080px. This is a good width for most standard laptops and desktops.
Website Gutter Width
Gutter width corresponds to the amount of horizontal space (margin) between the columns in each row. Optional values for gutter width range from 1 to 4 where:
1 represents zero margins between columns.
2 represents a 3% right margin between columns.
3 represents a 5.5% right margin between columns.
4 represents an 8% right margin between columns.
Use Custom Sidebar Width
This sets the default sidebar width for your theme. This applies to all pages on your theme with a sidebar not built using the Divi Builder.
Section And Row Height
These options adjust the amount of vertical spacing (top and bottom padding) for each section and row.
Theme Accent Color
Before you start changing the colors for your other elements, you should change this first. Once you change it, save & publish your settings and refresh your page. Now, the updated Theme Accent Color should have populated other elements automatically.
Typography
The typography panel 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 proportionally reflected across all site areas.
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.
Body Text Size: This changes the default body text for your theme. The default size is 14px.
Body Line Height: The line height of each line of text.
Header Text Size: Divi allows you to set your default Header text size here. This affects elements of Divi, like the Fullwidth Header Module titles.
Header Letter Spacing: Letter spacing adjusts the horizontal space between letters. The Header Letter Spacing value affects all header levels (h1, h2, h3, h4, h5, h6), blockquotes, and slide titles.
Header Line Height: Like the letter spacing value, the header line-height value affects all header levels (h1, h2, h3, h4, h5, h6), blockquotes, and slide titles. Because of the larger font size, 1em is the default setting.
Header Font Style: Use these options to change the font style of your headers.
Header And Body Font: The default font in Divi is Open Sans, but the Divi Theme Customizer has almost a hundred fonts to choose from! Take advantage of these built-in fonts and test which ones work best for your theme.
Body Link Color: Your theme accent color inherits the body link color. But you can always change it here.
Body Text Color: Here, you can change the color of your body text.
Header Text Color: Here, you can change the color of your headers.
Background
The background panel allows you to adjust the background color of your theme, upload a custom background image, and adjust its position on the page.
Background images and colors work great when paired with the Boxed Layout setting in the Layouts panel mentioned earlier.
