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