Website Style Guide

This global presets style guide is a great way to start a new web design project! Wondering how to turn modules into global presets? For a detailed tutorial on how to use this style guide, click on the link below to be redirected.

01. Kleurenpalet

In the first part of the style guide, you can find the color palette that’s been used for the layout pack. Use these colors inside the default color palette in your Divi Theme Options.

#113C43

Midnight

#15464D

petrol

#426770

mist

#CCDBD4

seafoam

#C49C9D

blush

#f0e6e6

babyroze

#D9D5D6

taupe

#F8F7F5

off-white

#000000

zwart

#3d3d3d

koppengrijs

#666666

bodytekst

#BEBEC5

bodytekst licht

#ffffff

wit

02. Lettertypes

In this part of the style guide, you’ll find the different text styles that were used throughout the layout pack. There’s a separate preset for each heading style and a global preset with all text styles in one.

Heading 1

slechts 1x gebruiken, boven aan de pagina

Heading 1

Heading 2

Heading 2

Heading 3

Heading 3

Heading 4

Heading 4

Heading 5

Heading 5

Heading 6

P – introzin

Heading 6

P

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.

P groter

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.

P kleiner

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.

P kleinst

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.

List

  • Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
  • Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Proin eget tortor risus.
Quote
Lichte tekst
Donkere achtergrond

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut sem erat.”

Quote
Donkere tekst
Lichte achtergrond

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut sem erat.”

aanhalingstekens

nummer donkere tekst

123

nummer lichte tekst

123

All in one

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

Lorum ipsum dolor sit amet.

  • Quisque velit nisi

03. Knoppen

Here, you’ll find the buttons that have been used in the layout pack.

Button BLUSH FILL

Button PETROL FILL

Button BLUSH OUTLINE

Button PETROL OUTLINE

04. Modules

In this part of the style guide, you’ll find the different text styles that were used throughout the layout pack. There’s a separate preset for each heading style and a global preset with all text styles in one.

Blurb Opsommingen Vinkje Groen Vierkant

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blurb Opsommingen Vinkje Roze Cirkel

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CTA Lichte Achtergrond

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae molestie dui. Morbi sit amet ligula sit amet augue consequat tristique ac ultrices sapien. Vestibulum non maximus mi. Aliquam eget diam purus. Vestibulum rhoncus, libero vel porta lacinia, lacus nulla blandit metus, ac suscipit eros arcu at felis. Sed mollis velit ut massa faucibus, ac maximus velit dignissim. Maecenas placerat eu velit id aliquet. Vestibulum pretium aliquet nibh non gravida. Etiam lobortis vestibulum lorem, quis laoreet felis mollis non. Sed ac neque sem. Curabitur nunc ante, tincidunt ut tincidunt ut, dignissim sit amet nisl. Vivamus leo diam, volutpat nec pulvinar a, gravida non lorem.

Testimonials

Asset

De training geeft herkenning, maar biedt ook steun

De training bracht me waardevolle inzichten over wat voor mij nu echt belangrijk is. Tijd om alleen te zijn bijvoorbeeld. Hierdoor maak ik meer bewuste keuzes voor rust en ruimte. Het was echt van meerwaarde om de training in een groep met andere ouders te volgen. Het geeft herkenning, maar biedt ook steun. Lieke is bovendien een fijne trainer die op heldere wijze theorie aan praktijk verbindt.

 – Anna

circle counter

%

van alle werkende ouders heeft last van vermoeidheid, stress of depressie

%

van de moeders valt uit binnen drie maanden na haar verlof

%

van de ouders verdeelt zorg en werk gelijk

social media follow