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­didunt ut labo­re et dolo­re magna ali­qua. Ut enim ad minim veniam, quis nostrud exer­ci­ta­ti­on ullam­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­didunt ut labo­re et dolo­re magna ali­qua. Ut enim ad minim veniam, quis nostrud exer­ci­ta­ti­on ullam­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­tuer adi­pi­scing elit. Donec odio. Quis­que volut­pat mat­tis eros. Null­am 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­tuer adi­pi­scing elit. Lorem ipsum dolor sit amet, con­sec­te­tuer 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. Donec odio. Quis­que volut­pat mat­tis eros.

Lorem ipsum dolor sit amet, con­sec­te­tuer adi­pi­scing elit. Donec odio. Quis­que volut­pat mat­tis eros. Null­am 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­tuer adi­pi­scing elit.
  • Donec odio. Quis­que volut­pat mat­tis eros.

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

Donec odio. Quis­que volut­pat mat­tis eros. Null­am 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 Title Goes Here

Your con­tent goes here. Edit or remo­ve this text inline 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 Title Goes Here

Your con­tent goes here. Edit or remo­ve this text inline 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 Title Goes Here

Your con­tent goes here. Edit or remo­ve this text inline 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

Cont­act form

5 + 12 =

1 + 2 =

14 + 14 =

Image

Call to action

Your Title Goes Here

Your con­tent goes here. Edit or remo­ve this text inline 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 Title Goes Here

Your con­tent goes here. Edit or remo­ve this text inline 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 Title Goes Here

Your con­tent goes here. Edit or remo­ve this text inline 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 inline 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 inline 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 inline 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 Title Goes Here

Your con­tent goes here. Edit or remo­ve this text inline 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 Title Goes Here

Your con­tent goes here. Edit or remo­ve this text inline 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 Title Goes Here

Your con­tent goes here. Edit or remo­ve this text inline 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 inline 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 inline 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 inline 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 Title Goes Here

Your con­tent goes here. Edit or remo­ve this text inline 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 Title Goes Here

Your con­tent goes here. Edit or remo­ve this text inline 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 Title Goes Here

Your con­tent goes here. Edit or remo­ve this text inline 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 Title Goes Here

Your con­tent goes here. Edit or remo­ve this text inline 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 Title Goes Here

Your con­tent goes here. Edit or remo­ve this text inline 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 Title Goes Here

Your con­tent goes here. Edit or remo­ve this text inline 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

Teil 1: Ira­ki-Kur­­di­­stan 2023 — Über das War­um und wieso

Es gefiel mir, wenn die Welt um mich her­um anders roch, anders schmeck­te, anders klang und sich gar anders anfühl­te. Und so web­te ich im Lau­fe der ver­gan­ge­nen Jah­re mei­nen eige­nen Wand­tep­pich aus Ein­drü­cken und Erfah­run­gen, aus Begeg­nun­gen und Gesprä­chen, aus Geschmä­ckern und Gerü­chen und fand zuneh­mend Gefal­len dar­an, mein unvoll­kom­me­nes Selbst in die Unvoll­kom­men­heit der Welt fal­len zu lassen.

mehr lesen

Von 42 gol­de­nen Kilo­me­tern durch Prag und einem rund­um gelun­ge­nen Marathonwochenende

Der Prag Mara­thon ist mei­nes Erach­tens ein wahr­li­cher Genuss­lauf. Die Stre­cke führt größ­ten­teils an den Sigh­t­­see­ing-Hig­h­­lights der soge­nann­ten “Gol­de­nen Stadt” vor­bei und gilt als eine der schöns­ten Mara­thon­stre­cken der Welt. Tra­di­tio­nell fin­det er seit 1995 am ers­ten Mai­wo­chen­en­de statt und ist der teil­neh­mer­stärks­te Mara­thon Tschechiens.

mehr lesen

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

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

Teil 1: Ira­ki-Kur­­di­­stan 2023 — Über das War­um und wieso

Es gefiel mir, wenn die Welt um mich her­um anders roch, anders schmeck­te, anders klang und sich gar anders anfühl­te. Und so web­te ich im Lau­fe der ver­gan­ge­nen Jah­re mei­nen eige­nen Wand­tep­pich aus Ein­drü­cken und Erfah­run­gen, aus Begeg­nun­gen und Gesprä­chen, aus Geschmä­ckern und Gerü­chen und fand zuneh­mend Gefal­len dar­an, mein unvoll­kom­me­nes Selbst in die Unvoll­kom­men­heit der Welt fal­len zu lassen.

mehr lesen

Von 42 gol­de­nen Kilo­me­tern durch Prag und einem rund­um gelun­ge­nen Marathonwochenende

Der Prag Mara­thon ist mei­nes Erach­tens ein wahr­li­cher Genuss­lauf. Die Stre­cke führt größ­ten­teils an den Sigh­t­­see­ing-Hig­h­­lights der soge­nann­ten “Gol­de­nen Stadt” vor­bei und gilt als eine der schöns­ten Mara­thon­stre­cken der Welt. Tra­di­tio­nell fin­det er seit 1995 am ers­ten Mai­wo­chen­en­de statt und ist der teil­neh­mer­stärks­te Mara­thon Tschechiens.

mehr lesen

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

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

Teil 1: Ira­ki-Kur­­di­­stan 2023 — Über das War­um und wieso

Es gefiel mir, wenn die Welt um mich her­um anders roch, anders schmeck­te, anders klang und sich gar anders anfühl­te. Und so web­te ich im Lau­fe der ver­gan­ge­nen Jah­re mei­nen eige­nen Wand­tep­pich aus Ein­drü­cken und Erfah­run­gen, aus Begeg­nun­gen und Gesprä­chen, aus Geschmä­ckern und Gerü­chen und fand zuneh­mend Gefal­len dar­an, mein unvoll­kom­me­nes Selbst in die Unvoll­kom­men­heit der Welt fal­len zu lassen.

mehr lesen

Von 42 gol­de­nen Kilo­me­tern durch Prag und einem rund­um gelun­ge­nen Marathonwochenende

Der Prag Mara­thon ist mei­nes Erach­tens ein wahr­li­cher Genuss­lauf. Die Stre­cke führt größ­ten­teils an den Sigh­t­­see­ing-Hig­h­­lights der soge­nann­ten “Gol­de­nen Stadt” vor­bei und gilt als eine der schöns­ten Mara­thon­stre­cken der Welt. Tra­di­tio­nell fin­det er seit 1995 am ers­ten Mai­wo­chen­en­de statt und ist der teil­neh­mer­stärks­te Mara­thon Tschechiens.

mehr lesen

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

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