How to customize typography and layout on Divi
To start customizing the layout and typography of your website, you must first access the Theme Customizer by clicking on the link Divi> Theme Customizer on your WordPress dashboard. This will launch the customizer. Then look for the "General Settings" panel. Click on the panel to open the appropriate settings and start customizing. In the "General Settings" panel, you'll notice three sections: Layout Settings, Typography, and Background.
Layout settings
The layout panel allows you to adjust various sizing and spacing options for your website. Here you can increase or decrease the spacing between columns, lines and sections and adjust the size of your sidebar. You can also enable the "Boxed Layout" mode from this panel.
Enable nesting layout
Here you can edit your site into a box format that frames the content of your site and exposes a background that can be customized.
Width of the content of the website
This is where you can set the maximum width of your content section. Since your content is on a responsive layout, it will adjust to smaller sizes but will not extend more than the maximum width defined here.
The default value is 1080px. It's a good width for most standard laptops and desktops.
Column spacing on the website
The width of the gutter is the amount of horizontal space (margin) between the columns of each line.
The optional values for the gutter width are between 1 and 4.
1 represents the zero margin between the columns.
2 represents a margin of 3% between the columns.
3 represents a margin of 5,5% between the columns.
4 represents a margin of 8% between the columns.
Use custom sidebar width
This sets the width of the default sidebar for your theme. This applies to all pages in your theme that have a sidebar and that are not created with Divi Builder.
Height of section & line
These options adjust the amount of vertical spacing (top and bottom fill) for each section and line.
Theme accent color
Before you begin to change the colors of your other elements, you must first change that. Once you change it, save and publish your settings and refresh your page. Now the updated Accent Color theme should have automatically filled other elements.
Typography
The Typography panel is where you can adjust the default appearance of text across your entire website. You can adjust the size of your font and headers, which will be reflected in all areas of the site proportionately. You can adjust their colors as well as line height, letter spacing, and font styles. Finally, you can also choose from dozens of fonts to apply to each.
Body text size
This changes the body of the default text for your theme. The default size is 14px.
Height of the body line
The line height of each line of text.
Text size of the header
Divi allows you to set the default text size of your header here. This affects the elements of Divi as the titles of the header module Fullwidth.
Letter space of the header
The spacing of the letters adjusts the horizontal space between the letters. The spacing value of the header letters affects all header levels (h1, h2, h3, h4, h5, h6), quotation marks, and slide titles.
Height of the header line
Similar to the letter spacing value, the header line height value affects all header levels (h1, h2, h3, h4, h5, h6), quotation marks, and titles. slides.
Police style
Use these options to change the font style of your headers.
Body and header font
The default font in Divi is Open Sans, but Divi has almost a hundred fonts to choose from! Take advantage of these built-in fonts and test the best ones for your theme.
Color of body links
The color of the body link is inherited by the accent color of your theme. But you can always change it here.
Body text color
Here you can change the color of your body text.
Text color of the header
Here you can change the color of your headers.
Background
The background pane allows you to adjust the background color of your theme, as well as upload a custom background image and adjust its placement on the page. Background images and colors work best when they are associated with the Boxed Layout setting in the Layouts panel mentioned earlier.
That's all for this tutorial, I hope it will allow you to better adjust the font and layout of the Divi theme.
Other Divi tutorials
- 5 websites for restaurant use Divi theme
- How to add text on a Divi WooCommerce product
- How to change the menu color between Divi pages
- How to personalize the grids of a blog with Divi
- How to use the role Divi editor on WordPress
- How to create a full screen Divi slider
- How to change the color of menus between Divi pages
- Features you probably do not know about Divi
- How to use Divi Builder on WordPress
- How to use the Divi video scrolling module
- How to use the Divi Builder Flip module
- How to add a testimonial module on Divi Builder
- How to use the Divi text module
- How to create a slider on Divi
- How to edit a Divi user role
- How to use the Divi Social Media module
- How to use the shop module on the theme WordPress Divi
- How to use the Divi sidebar module
- How to use the Divi Price Table Module
- How to use the title module of Divi publications
- How to add a video module of Divi
- How to use the article navigation module
- How to use the Divi search module
- How to use the Divi wallet module
- How to use the person module on Divi Builder
- How to use the wallet module with Divi filter
- How to use the full width slider module
- How to use the Divi Builder Image Module
- How to use the full-width navigation module of Divi Builder
- How to use the image gallery module
- How to use the Divi Builder Full-Width Card Module
- How to use the Divi Full Width Portfolio Module
- How to use the Divi full-width header module
- How to use the Divi Counter Module
- How to use the articles slider on Divi Builder
- How to use the Divi Email Optin module
