Frame­work

Glo­bal Pre­sets UI Style Guide

01. Color palette

In this part of the style gui­de, you can modi­fy each color insi­de the Text Module’s back­ground set­tings. Use that same color code insi­de the Text Modu­le below it to have a writ­ten ver­si­on of the color code too. Use the­se color codes insi­de your Divi The­me Buil­der default color palet­te afterward.

#FFFFFF

#1b2e85

#2a48d1

#01a1b8

#ff6b5a

#ffeca7

#2a48d1

#1b2e85

#B4D6DB

#01a1b8

#ff8072

#ff6b5a

#fef2c3

#ffeca7

02. Text styles

In the second part of this style gui­de wire­frame, you can style your dif­fe­rent text types. You’­re also pro­vi­ded with a pri­ma­ry, secon­da­ry and ter­tia­ry opti­on, each of which you can after­wards turn into indi­vi­du­al presets.

Pri­ma­ry

Secon­da­ry

Ter­tia­ry

Hea­ding 1

Hea­ding 1

Hea­ding 2

Hea­ding 2

Hea­ding 2

Hea­ding 2

Hea­ding 3

Hea­ding 3

Hea­ding 3

Hea­ding 3

Hea­ding 4

Hea­ding 4

Hea­ding 4

Hea­ding 4

Body

Lorem ipsum dolor sit amet, con­sec­te­tur adi­pi­scing elit, sed do eius­mod tem­por inci­did­unt ut labo­re et dolo­re magna ali­qua. Ut enim ad minim veni­am, quis nostrud exer­ci­ta­ti­on ull­am­co labo­ris nisi ut ali­quip ex ea com­mo­do consequat.

Lorem ipsum dolor sit amet, con­sec­te­tur adi­pi­scing elit, sed do eius­mod tem­por inci­did­unt ut labo­re et dolo­re magna ali­qua. Ut enim ad minim veni­am, quis nostrud exer­ci­ta­ti­on ull­am­co labo­ris nisi ut ali­quip ex ea com­mo­do consequat.

List

  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum

All in one

Hea­ding 5

Hea­ding 1

Hea­ding 6

Hea­ding 2

Hea­ding 3

Hea­ding 4

 

Lorem ipsum dolor sit amet, con­sec­te­tu­er adi­pi­scing elit. Don­ec odio. Quis­que volutpat mat­tis eros. Nullam male­sua­da erat ut tur­pis. Sus­pen­dis­se urna nibh, viver­ra non, sem­per sus­ci­pit, posue­re a, pede.

  1. Lorem ipsum dolor sit amet, con­sec­te­tu­er adi­pi­scing elit. Lorem ipsum dolor sit amet, con­sec­te­tu­er adi­pi­scing elit. male­sua­da erat ut tur­pis. Sus­pen­dis­se urna nibh, viver­ra non, sem­per sus­ci­pit, posue­re a, pede.
  2. Don­ec odio. Quis­que volutpat mat­tis eros.

Lorem ipsum dolor sit amet, con­sec­te­tu­er adi­pi­scing elit. Don­ec odio. Quis­que volutpat mat­tis eros. Nullam male­sua­da erat ut tur­pis. Sus­pen­dis­se urna nibh, viver­ra non, sem­per sus­ci­pit, posue­re a, pede.

  • Lorem ipsum dolor sit amet, con­sec­te­tu­er adi­pi­scing elit.
  • Don­ec odio. Quis­que volutpat mat­tis eros.

Lorem ipsum dolor sit amet, con­sec­te­tu­er adi­pi­scing elit.

Don­ec odio. Quis­que volutpat mat­tis eros. Nullam male­sua­da erat ut tur­pis. Sus­pen­dis­se urna nibh, viver­ra non, sem­per sus­ci­pit, posue­re a, pede.

 

03. Modules

The last part of this style gui­de hand­les some of the most-used modu­les insi­de Divi. Here, we’­re also pro­vi­ding you with a pri­ma­ry, secon­da­ry and ter­tia­ry ver­si­on of each modu­le which you can style and add as a glo­bal pre­set. Feel free to crea­te more alter­na­ti­ve designs for each module.

Pri­ma­ry

Secon­da­ry

Ter­tia­ry

Blurb

Your Tit­le Goes Here

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Your Tit­le Goes Here

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Your Tit­le Goes Here

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Email optin

Con­ta­ct form

4 + 14 =

14 + 4 =

9 + 14 =

Image

Call to action

Your Tit­le Goes Here

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Your Tit­le Goes Here

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Your Tit­le Goes Here

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Divi­der

Per­son

Name Goes Here

Name Goes Here

Posi­ti­on

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Name Goes Here

Name Goes Here

Posi­ti­on

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Name Goes Here

Name Goes Here

Posi­ti­on

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Togg­le

Your Tit­le Goes Here

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Your Tit­le Goes Here

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Your Tit­le Goes Here

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Tes­ti­mo­ni­al

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Name Goes Here

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Name Goes Here

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Name Goes Here

Video

YouTube

Mit dem Laden des Vide­os akzep­tie­ren Sie die Daten­schutz­er­klä­rung von You­Tube.
Mehr erfah­ren

Video laden

YouTube

Mit dem Laden des Vide­os akzep­tie­ren Sie die Daten­schutz­er­klä­rung von You­Tube.
Mehr erfah­ren

Video laden

YouTube

Mit dem Laden des Vide­os akzep­tie­ren Sie die Daten­schutz­er­klä­rung von You­Tube.
Mehr erfah­ren

Video laden

Accor­di­on

Your Tit­le Goes Here

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Your Tit­le Goes Here

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Your Tit­le Goes Here

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Your Tit­le Goes Here

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Your Tit­le Goes Here

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Your Tit­le Goes Here

Your con­tent goes here. Edit or remo­ve this text inli­ne or in the modu­le Con­tent set­tings. You can also style every aspect of this con­tent in the modu­le Design set­tings and even app­ly cus­tom CSS to this text in the modu­le Advan­ced settings.

Blog

Lauf-Tipps :)

Lauf-Tipps 🙂

Die ers­ten 5 Kilo­me­ter am Stück — You can do it! Sie ist in vie­len Köp­fen fest ver­an­kert: die roman­ti­sche Vor­stel­lung von “ein­fach los­ren­nen und lau­fen, so lan­ge, wie man möch­te” – For­rest-Gump-Style qua­si. Doch auch wenn wir Men­schen gebo­re­ne Läu­fer sind, so gehört…

mehr lesen
Mind­Set

Mind­Set

Das rich­ti­ge Mind­set kann unser Leben posi­tiv beein­flus­sen, denn unser Den­ken und Han­deln beein­flus­sen sich gegen­sei­tig. Wie wir unse­re Gedan­ken zu mehr posi­ti­ver Selbst­be­kräf­ti­gung steu­ern & unse­re men­ta­le Stär­ke trai­nie­ren kön­nen, erfährst du in mei­nem nach­fol­gen­den Artikel.

mehr lesen
Lauf-Tipps :)

Lauf-Tipps 🙂

Die ers­ten 5 Kilo­me­ter am Stück — You can do it! Sie ist in vie­len Köp­fen fest ver­an­kert: die roman­ti­sche Vor­stel­lung von “ein­fach los­ren­nen und lau­fen, so lan­ge, wie man möch­te” – For­rest-Gump-Style qua­si. Doch auch wenn wir Men­schen gebo­re­ne Läu­fer sind, so gehört…

mehr lesen
Mind­Set

Mind­Set

Das rich­ti­ge Mind­set kann unser Leben posi­tiv beein­flus­sen, denn unser Den­ken und Han­deln beein­flus­sen sich gegen­sei­tig. Wie wir unse­re Gedan­ken zu mehr posi­ti­ver Selbst­be­kräf­ti­gung steu­ern & unse­re men­ta­le Stär­ke trai­nie­ren kön­nen, erfährst du in mei­nem nach­fol­gen­den Artikel.

mehr lesen
Lauf-Tipps :)

Lauf-Tipps 🙂

Die ers­ten 5 Kilo­me­ter am Stück — You can do it! Sie ist in vie­len Köp­fen fest ver­an­kert: die roman­ti­sche Vor­stel­lung von “ein­fach los­ren­nen und lau­fen, so lan­ge, wie man möch­te” – For­rest-Gump-Style qua­si. Doch auch wenn wir Men­schen gebo­re­ne Läu­fer sind, so gehört…

mehr lesen
Mind­Set

Mind­Set

Das rich­ti­ge Mind­set kann unser Leben posi­tiv beein­flus­sen, denn unser Den­ken und Han­deln beein­flus­sen sich gegen­sei­tig. Wie wir unse­re Gedan­ken zu mehr posi­ti­ver Selbst­be­kräf­ti­gung steu­ern & unse­re men­ta­le Stär­ke trai­nie­ren kön­nen, erfährst du in mei­nem nach­fol­gen­den Artikel.

mehr lesen