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.
#BA8865
tan
#F8F7F5
off-white
#E3DACE
randen beige
#c9cfcc
mist
#315750
ocean
#061615
Midnight
#292929
koppengrijs
#666666
bodytekst
#C4C7C7
Lichte tekst
#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
Heading 1
Heading 2
Heading 2
Heading 3
Heading 3
Heading 4
Heading 4
Heading 5
Heading 5
Heading 6
Heading 6
Body
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.
BlockQuote
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.
Text Default
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
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.
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.”
Aanhalingsteken in Bol Donkere tekst op Lichte achtergrond
“
Aanhalingsteken in Bol Lichte tekst op Donkere achtergrond
“
Aanhalingsteken Lichte tekst op Donkere achtergrond
“
Aanhalingsteken Lichte tekst op Donkere achtergrond
“
Cijfer in Bol Groot Lichte tekst op Donkere achtergrond
01
Cijfer in Bol Klein Lichte tekst op Donkere achtergrond
01
Cijfer in Bol Groot Donkere tekst op Lichte achtergrond
01
Cijfer in Bol Klein Donkere tekst op Lichte achtergrond
01
Jane Doe
03. Buttons
Button GROEN FILL (Default)
Button TAN FILL
Button MIDNIGHT FILL
Button GROEN OUTLINE
Button TAN OUTLINE
Button MIDNIGHT OUTLINE
Button GROEN UNDERLINE
Button TAN UNDERLINE
Button MIDNIGHT UNDERLINE
Button GROEN LINKEDIN
Button TAN LINKEDIN
Button MIDNIGHT LINKEDIN
cooking school
influencer
Subscribe
influencer
home staging
home staging
home staging
home staging
Bekijk
meditation center
home staging
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 Default
Blurb Lichte tekst op Donkere Achtergrond
Persoonlijk Leiderschap
Heb jij het gevoel dat je méér in je hebt? Door middel van opdrachten ga je je persoonlijke drive, sterke punten en valkuilen ontdekken. Hierdoor ga jij je eigen kwaliteiten en talenten optimaal benutten.
Persoonlijk Leiderschap
Heb jij het gevoel dat je méér in je hebt? Door middel van opdrachten ga je je persoonlijke drive, sterke punten en valkuilen ontdekken. Hierdoor ga jij je eigen kwaliteiten en talenten optimaal benutten.
Blurb Opsommingen Icon 15px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Blurb Opsommingen Icon 30px
Je bent aanbeland op een punt waarop je niet meer tevreden bent met jouw leven
Blurb Opsommingen Lijntjes Smal
Minder verzuim & verloop
Blurb Opsommingen Lijntjes Breed
Zorgen goed voor zichzelf én hun gezin
Blurb Contactgegevens Bol Left
emailadres
Blurb Contactgegevens Zonder Bol Left
06 1234 5678
Blurb Contactgegevens Top
telefoonummer
06 1234 5678
emailadres
Blurb: Pictogram in Bol
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.
Stap 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.
“Jane is een sympathieke dame die met aandacht met je omgaat.”
Jane geeft praktische adviezen, denkt mee en ziet snel de context van je situatie. Ze gaat recht op het doel af: welke baan past bij je en waar kun je die vinden. Vervolgens helpt ze concreet met hoe die ideale baan te vinden. Jane is bovendien een prettige en sympathieke dame, die met zorg en aandacht met je omgaat.
Blurb: Title above image
Certificering
Accreditatie
Blurb: Foto + Naam