How to customize the typography and layouts on Divi

customize typography and layout divi

Customize typography and layout: To start customizing the layout and typography of your website, you must first access the Theme Customizer by clicking on the Divi> Theme Customizer link 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 will notice three sections: Layout Settings, Typography, and Background.

Customize typography and layout divi: Layout settings

The Customize typography and layout panel allows you to adjust various sizing and spacing options for your website. Here you can increase or decrease the spacing between columns, rows, and sections and adjust the size of your sidebar. You can also activate the “Boxed layout” mode from this panel.

Enable nested layout

Here you can change your site to a box format that frames your site content and exposes a background that can be customized.

Website content width

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 expand more than the maximum width set here. The default 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 in each row.

Optional values ​​for the gutter width are from 1 to 4.

1 represents the zero margin between columns.
2 represents a 3% margin between columns.
3 represents a 5.5% margin between columns.
4 represents an 8% margin between columns.

Use custom sidebar width

This sets the default sidebar width for your theme. This applies to all the pages in your theme that have a sidebar and that are not created with Divi Builder.

Section & Line 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 of your other elements, you need to change that first. Once you change it, save and publish your settings and refresh your page. Now the updated Accent Color theme should have filled in other elements automatically.


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 one.

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 the default text size for your header here. This affects Divi elements like Fullwidth header module titles.

Header letter space

Letter spacing adjusts the horizontal space between letters. The header letter-spacing value affects all header levels (h1, h2, h3, h4, h5, h6), quotes, and slide titles.

Header Row Height

Just like the letter-spacing value, the header row height value affects all header levels (h1, h2, h3, h4, h5, h6), quotes, and titles of slides.

Font style

Use these options to change the font style of your headers.

Read more: How to configure the lines on Divi builder

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 which ones best suit your theme.

Body tie color

The color of the body link is inherited from your theme’s accent 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.


The background panel allows you to adjust your theme’s background color, as well as upload a custom background image and adjust its positioning on the page. Background images and colors work well when paired with the Boxed Formatting 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 the layout of the Divi theme.


For website maintenance service contact us.

Leave a Reply