Global Presets Style Guide

01. section + rows

The styles of sections (blue) and rows (green) are set globally throughout the site and marked as the default styles. For ease changing one of them and applying the styles to the preset will extend the changes site-wide. Below is a brief description of the different sections and rows found around the site and how they are used.

sections

Global Preset

The main and default section of the site. Used throughout the whole site content and it is what determines the boxed layout with a newspaper feel across the site.
The section is responsive with a maximum width of 1200px to achieve this effect.
The padding in this section is 50px 35px 5px 35px.

Footer Preset

Used once in the Theme Builder footer and is displayed globally throughout the site.
The section is responsive with a background color of #232323
The sizing of the section is 100% of the screen width and with a 5% top and 0% bottom padding and auto margin.

rows

Header Row

Header rows are used for all the page main headers and elements that have a smaller left margin on the page, lined up with the start of the navigation menu.

Content Row

Content rows are used for all the content of the site and globally set to align with the middle of the logo on the main navigation menu.

02. color palette

These are the colors used throughout the website, found in the theme color palettes and embeded in the theme global colors. For maximizing readability, white and both yellows need to be paired up with black and greys and not with each other.
#000000
#232323
#565656
#FFB600
#FFCE00
#FFFFFF

03. text styles

In this part of the style guide, you can modify each color inside the Text Module’s background settings. Use that same color code inside the Text Module below it to have a written version of the color code too. Use these color codes inside your Divi Theme Builder default color palette afterward.
Heading 1

Heading 1

Heading 2

Heading 2

Heading 3

Heading 3

Heading 4

Heading 4

Strong Text
This sentence uses the the html tags <strong> which means the content here is emphasized.
Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lists
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  1. Lorum Ipsum
  2. Lorum Ipsum
  3. Lorum Ipsum

03. Modules

The last part of this style guide handles some of the most-used modules inside Divi. Here, we’re also providing you with a primary, secondary and tertiary version of each module which you can style and add as a global preset. Feel free to create more alternative designs for each module.
Primary
Secondary
Tertiary
Button
Primary
Secondary
Tertiary
Divider
Page Bottom Divider
Visible Divider
In text divider
Social Media Follow
Accordion

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Blog

accessibility for everyone

by | Apr 21, 2021 |

This is our April 2021 newsletter. Sign up here to receive our monthly news!     This quarter we are taking a deep dive into accessibility; what it means to us, what we want to prioritize, and how we want to show up. It is a big task, so we are taking it one...

female by chance, feminist by choice

by | Mar 21, 2021 |

This is our March 2021 newsletter. Sign up here to receive our monthly news!     This International Women’s Day we are celebrating the fact that we are a team who, in the words of Sabine, are “female by chance and feminist by choice”. Since marketing is...

main title

top level section

subsection 1

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

sub-sub section 1

  • some
  • list
  • here

sub-sub section 2

some quote here

sub section 2

more text with a link

top level section 2

here is some normal text

here is some text with strong

here is some text with em

here is some text with mark

  1. list item 1
  2. list item 2

 

how we sell
matters.

Medium