Framework

Global Presets UI Style Guide

01. Color palette

In this part of the style guide, you can modify each color inside the Text Module’s background settings. Use that same color code inside the Text Module below it to have a written version of the color code too. Use these color codes inside your Divi Theme Builder default color palette afterward.

#42849b

#9992bb

#cba93a

#872f41

#ff6633

#cc0099

#4d2026

#BEBD3D

#61655D

#4c4c4c

#C6C6C6

#F9F9F9

#e0e0e0

#444444

#000000

02. Text styles

In the second part of this style guide wireframe, you can style your different text types. You’re also provided with a primary, secondary and tertiary option, each of which you can afterwards turn into individual presets.

H2 Roze 1.5em

H3 Roze 1.3em

H4 Roze kop 1.2em

H2 border oranje 1.5em

H3 border oranje 1.3em

H4 border oranje 1.2em

Heading 1

Heading 1

Heading 1

Heading 1

Heading 2

Heading 2 oranje 21 px

Heading 2

Heading 3

Heading 3

Heading 3

Heading 3

Heading 4

Heading 4

Heading 4

Heading 4

Body

Yanone Coffesatz H2

Titel 2.2em
Rand om de tekst module padding 8%
Border 1px #ededed Ronding 5px

Yanone Coffesatz H2

Titel 2.2em
Rand om de tekst module 8% padding
#ededed Ronding 5px | Schaduw

Yanone Coffesatz H2

Titel 2.2em
Rand om de tekst module 8% padding
#ededed Ronding 5px | Schaduw

Body

Row setting
Equalize column height

H4 Roze kop 1.2em

Rode tekst onder H4 Roze kop
Tekstkleur donkerrood #4d2026

H4 Roze kop 1.2em

Tekst onder H4 Roze kop
Met tekstkleur standaard

H3 Roze 1.3em

Achtergrond transparant
rgba(255,255,255,0.85)
In de 2e kolom van de rij

Spacing 9px

H3 Roze 1.3em

Achtergrond transparant
rgba(255,255,255,0.64)
In de 2e kolom van de rij

Koptekst H2 1.5em

Yanone Kaffeesatz 2vw
De hele rij kopieeren

List

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

All in one

Heading 1 | 3em

Heading 2  | 2.2em

Heading 3 | 1.8em

Heading 4 | 1.5em

Lorum ipsum dolor sit amet.

  • Lorum Ipsum

H2 work sans

WORK SANS 16px
The last part of this style guide handles some of the most-used modules inside Divi.
Rechter kolom heeft een border van 1 px aan de linkerkant.

Button

Neem contact op
Neem contact op
Neem contact op

Blurb

Eerste item

On Hoover color change from white to orange
l

Rode tekst 1.3em

J

Tweede item 1.3em

]

Derde item 1.3em

Curabitur aliquet

Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan

Deze is 't beste

height: 300px; width: 300px;
border-radius: 100%;
padding: 5% !important;
display: flex;

zwarte tekst H4 1.3em

zwarte tekst H4 1.3em

zwarte tekst H4 1.3em

zwarte tekst H4 1.3em

Appelman Vegetables BV

Noordervaart 32
1841 HA Stompetoren

20 wekenecho

De 20 weken echo is een medische echo bedoelt om te kijken of je baby geen afwijkingen heeft. Met behulp van de echo kunnen veel aandoeningen die goed zichtbaar zijn worden opgespoord. U kunt de 20 wekenecho laten doen van week 18 tot week 21.

Echo placenta lokalisatie

Deze echo wordt gemaakt als bij de 20 weken echo blijkt dat je placenta te dicht bij je baarmoedermond ligt of zelfs ervoor. Dat kan lastig zijn bij de bevalling. Deze echo wordt gemaakt
vanaf de 30e week van je zwangerschap

Groeiecho

Bij deze echo controleren we of je baby goed groeit. We kijken we naar de grootte van het kind, meten het vruchtwater, het hoofdje, de buik en het bovenbeen van je kindje. Deze echo vindt meestal plaats tussen de 26 en 34 weken zwangerschap.

Voldoende afstand houden

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Kinderen mogen mee naar binnen of niet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

We schudden geen handen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Hoest en nies in de binnenkant van uw elleboog

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

U mag uw partner meenemen bij de 20 wekenecho

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Bij aankomst handen desinfecteren

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Je vraag of opmerking

3 + 6 =

Image

Call to action

Your Title Goes Here

CSS to the Main Element
display:flex;
align-items: center;
CSS to the Promo Description:
padding-bottom: 0px

Your Title Goes Here

Ruimte voor Tekst

Neem contact met mij op

Divider

Person

Name Goes Here
Name Goes Here

Position

Name Goes Here
Name Goes Here

Position

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.

Name Goes Here

Name Goes Here

Position

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.

Social Media Follow

Toggle

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.

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.

Testimonial

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.

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

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

Name Goes Here

Wat zijn medische echo's?
Een medische echo is een professionele echo met een medische reden. Tijdens deze echo kijken we of het hartje van jouw kindje klopt en of hij of zij goed groeit. Daarnaast zoeken we actief naar mogelijke afwijkingen. Een echo vindt inwendig (vaginaal) of uitwendig (via de buikwand) plaats.
Hoe lang duurt een medische echo?
De echo duurt ongeveer 20 à 30 minuten en heeft als doel de groei en het vruchtwater te beoordelen en om ernstige lichamelijke afwijkingen op te sporen.
Kan je zelf kiezen waar je de medische 13 weken of 20 weken echo laat maken?
Jazeker mits de praktijk geaccrediteerd mag je zelf kiezen zelfs al heb je een verwijsbrief van een andere praktijk. First Look is geaccrediteerd voor alle medische echo’s
Kunnen te veel echo's kwaad?

Ondanks vele jaren van medisch wetenschappelijk onderzoek zijn, tot op heden, geen nadelige gevolgen voor moeder en ongeboren kind bekend door het gebruik van echografische apparatuur met betrekking tot de zwangerschap. Alle echoapparaten beschikken over zogeheten ‘veiligheidsmarges’. Deze veiligheidsmarges zorgen ervoor dat er in principe geen schade wordt toegebracht aan moeder en het kindje.

Welke echo's worden vergoed door je zorgverzekering

Bron: Zorgwijzer.nl
Bij een zwangerschap is het raadzaam om goed naar de dekking van de zorgverzekering te kijken. Veel wordt gedekt door de basisverzekering, maar soms maak je toch kosten, bijvoorbeeld omdat je gebruik maakt van zorg die niet (volledig) in het basispakket is opgenomen. Een aanvullende verzekering kan dan een handige optie zijn.
Tijdens de zwangerschap zal er minimaal twee keer een echo worden gemaakt. Bij de eerste, algemene termijnecho (na 12 weken) wordt bepaald wanneer je ongeveer bent uitgerekend. Tevens wordt de ligging van de baby bepaald.

ECHO’s
Na 20 weken volgt standaard een tweede echo, het structureel echoscopisch onderzoek (SEO). Deze twee echo’s vallen onder de dekking van het basispakket. Daarnaast geldt er een basisdekking voor alle overige echo’s die medisch noodzakelijk zijn.

Aanvullende verzekering
Sommige aanvullende verzekeringen vergoeden ook de 8-weken echo zonder medische indicatie. Informeer hiernaar bij je zorgverzekeraar of raadpleeg een zorgvergelijker.

Lukt een echo altijd?
De kwaliteit van een echobeeld is afhankelijk van meerdere factoren, waaronder de postitie van de baby of de BMI van de zwangere. Daardoor is het kindje soms wat minder goed te zien. Als de echoscopist de indruk heeft dat ander tijdstip in de zwangerschap een beter reslutaat geeft zal er kosteloos een nieuwe afspraak gemaakt worden

Apart toepassen bij OF pagina’s OF posts
Samen gebruiken geeft ongewenst resultaat ivm het Quote teken dat bij Posts op een verkeerde plek terechtkomt of bij Pagina’s op de verkeerde plek staat

Bij een pagina
Voeg de CLASS my-spacing
toe in de tekstwidget

/* Sets margins and other styling for blockquote */
.my-spacing blockquote {
padding-bottom: 1.2em;
padding-top: 1em;
padding-left: 5em;
margin-top: 3em;
}

blockquote::before {
content: “\201C”;
font-family: Georgia,serif;
font-size: 6em;
font-weight: bold;
color: #999;
position: absolute;
left: 30px;
top: 0px;
}

Bij een POST (inclusief schaduw

/* Sets margins and other styling for blockquote */
blockquote {
padding-bottom: 1.2em;
padding-top: 0em;
padding-left: 3em;
margin-top: 2em;
padding-right: 5%!important;
box-shadow: 0px 2px 18px 0px rgb(0 0 0 / 30%);
}

blockquote::before {
content: “\201C”;
font-family: Georgia,serif;
font-size: 4em;
font-weight: bold;
color: #999;
position: relative;
left: 0px;
top:0px

}

Divi Modules Pro van DiviLife
[dmpro_flip_box front_title=”Flipbox” use_front_icon=”on” front_icon=”H||divi||400″ front_icon_color=”#9992BB” front_content=”Divi Modules Pro” back_content=”

Achterzijde met tekst

” use_back_button=”on” back_button_text=”Lees verder” use_force_square=”on” front_side_bg_color=”#FFFFFF” back_side_bg_color=”#FF6633″ _builder_version=”4.15.1″ _module_preset=”default” front_desc_font=”Actor|600||on|||||” back_desc_text_color=”#FFFFFF” custom_back_button=”on” back_button_text_size=”14px” back_button_text_color=”#4D2026″ back_button_bg_color=”#FFFFFF” back_button_border_width=”1px” back_button_border_color=”#efefef” back_button_use_icon=”off” back_button_custom_padding=”|||||true” custom_margin=”||-284px|||” border_radii=”on|50%|50%|50%|50%” border_color_all_back_image=”#FFFFFF” box_shadow_style=”preset1″ locked=”off” global_colors_info=”{}” _i=”0″ _address=”5.1.0.0″ theme_builder_area=”post_content” /][dmpro_flip_box use_front_icon=”on” front_icon=”H||divi||400″ front_icon_color=”#9992BB” front_content=”

Tweede item

” back_content=”

Achterzijde met tekst

” use_back_button=”on” back_button_text=”Lees verder” use_3d_effect=”on” front_side_bg_color=”#FFFFFF” back_side_bg_color=”#FF6633″ _builder_version=”4.15.1″ _module_preset=”default” front_desc_font=”Actor|600||on|||||” back_desc_text_color=”#FFFFFF” custom_back_button=”on” back_button_text_size=”14px” back_button_text_color=”#4D2026″ back_button_bg_color=”#FFFFFF” back_button_border_width=”1px” back_button_border_color=”#efefef” back_button_use_icon=”off” back_button_custom_padding=”|||||true” border_radii=”on|50%|50%|50%|50%” border_color_all_back_image=”#FFFFFF” box_shadow_style=”preset1″ locked=”off” global_colors_info=”{}” _i=”1″ _address=”5.1.0.1″ theme_builder_area=”post_content” /]

[dmpro_flip_box front_title=”Flipbox 3D” use_front_icon=”on” front_icon=”||divi||400″ front_icon_color=”#FFFFFF” front_content=”

3D content effect

” back_title=”Achterzijde” back_content=”

En dit is de dummy tekst voor de achterkant

” flip_box_height=”254px” use_3d_effect=”on” back_side_bg_color=”rgba(15,7,6,0.43)” front_side_bg_image=”https://landbouwdagalkmaar.nl/wp-content/uploads/2022/04/fishing-boats-6919341_1280.jpg” back_side_bg_image=”https://landbouwdagalkmaar.nl/wp-content/uploads/2022/04/fishing-boats-6919341_1280.jpg” back_side_bg_blend=”multiply” _builder_version=”4.15.1″ _module_preset=”default” front_title_text_color=”#FFFFFF” front_desc_text_color=”#FFFFFF” back_title_text_color=”#FFFFFF” back_desc_text_color=”#FFFFFF” custom_padding=”|2vw||2vw|false|true” border_radii=”on|20px|20px|20px|20px” box_shadow_style=”preset1″ global_colors_info=”{}” _i=”0″ _address=”5.1.1.0″ theme_builder_area=”post_content” /]

[dmpro_flip_box front_title=”Flipbox 3D” use_front_icon=”on” front_icon=”||divi||400″ front_icon_color=”#FFFFFF” front_content=”

3D content effect

” back_title=”Achterzijde” back_content=”

En dit is de dummy tekst voor de achterkant

” flip_box_height=”254px” flip_box_animation=”flip_vertically_btt” use_3d_effect=”on” back_side_bg_color=”rgba(15,7,6,0.43)” front_side_bg_image=”https://landbouwdagalkmaar.nl/wp-content/uploads/2022/04/fishing-boats-6919341_1280.jpg” back_side_bg_image=”https://landbouwdagalkmaar.nl/wp-content/uploads/2022/04/fishing-boats-6919341_1280.jpg” back_side_bg_blend=”multiply” _builder_version=”4.15.1″ _module_preset=”default” front_title_text_color=”#FFFFFF” front_desc_text_color=”#FFFFFF” back_title_text_color=”#FFFFFF” back_desc_text_color=”#FFFFFF” custom_padding=”|2vw||2vw|false|true” border_radii=”on|20px|20px|20px|20px” box_shadow_style=”preset1″ global_colors_info=”{}” _i=”0″ _address=”5.1.2.0″ theme_builder_area=”post_content” /]

[dmpro_hover_box content_title=”Hover Box” content_hover_title=”Hover Box” content_hover_content=”Foto in de achtergrond op het tabblad: Content.
Daar bovenop een Gradient filter” use_content_hover_button=”on” content_hover_button_text=”Lees verder” hover_box_align_front=”top_left” hover_box_align_back=”top_left” content_hover_bg_color_gradient_overlays_image=”on” _builder_version=”4.16.0″ _module_preset=”default” content_title_text_color=”#FFFFFF” content_hover_title_text_color=”#FFFFFF” content_hover_desc_text_color=”#FFFFFF” background_enable_color=”off” use_background_color_gradient=”on” background_color_gradient_stops=”rgba(0,0,0,0.63) 0%|rgba(0,0,0,0.07) 99%” background_color_gradient_overlays_image=”on” background_image=”https://landbouwdagalkmaar.nl/wp-content/uploads/2022/04/fishing-boats-6919341_1280.jpg” custom_content_hover_button=”on” content_hover_button_text_size=”16px” content_hover_button_text_color=”#FFFFFF” content_hover_button_bg_color=”rgba(10,10,10,0.64)” content_hover_button_border_width=”1px” content_hover_button_border_color=”#FFFFFF” content_hover_button_icon=”9||divi||400″ content_hover_button_custom_margin=”||||false|true” content_hover_button_custom_padding=”|2vw||2vw|false|true” custom_padding=”1vw|1vw||1vw|false|true” link_option_url=”#” border_radii=”on|10px|10px|10px|10px” content_hover_button_text_shadow_style=”preset1″ global_colors_info=”{}” background__hover_enabled=”on|hover” use_background_color_gradient__hover=”on” background_color_gradient_overlays_image__hover=”on” background_color_gradient_stops__hover=”rgba(0,0,0,0.48) 0px|rgba(0,0,0,0.65) 98px” _i=”0″ _address=”5.2.0.0″ theme_builder_area=”post_content” /]
[dmpro_hover_box content_title=”Hover Box 2″ content_hover_title=”Hover Box 2″ content_hover_content=”Na een periode van lusteloosheid en nergens meer zin in hebben, terug naar de energieke jij!” use_content_hover_button=”on” content_hover_button_text=”Lees verder” content_hover_bg_color_gradient_overlays_image=”on” _builder_version=”4.16.0″ _module_preset=”default” content_title_text_color=”#FFFFFF” content_desc_text_color=”#FFFFFF” content_hover_title_text_color=”#FFFFFF” content_hover_desc_text_color=”#FFFFFF” background_enable_color=”off” use_background_color_gradient=”on” background_color_gradient_stops=”rgba(0,0,0,0.16) 0%|rgba(0,0,0,0.07) 99%” background_color_gradient_overlays_image=”on” background_image=”https://landbouwdagalkmaar.nl/wp-content/uploads/2022/04/fishing-boats-6919341_1280.jpg” custom_content_hover_button=”on” content_hover_button_text_size=”16px” content_hover_button_text_color=”#FFFFFF” content_hover_button_bg_color=”rgba(10,10,10,0.64)” content_hover_button_border_width=”1px” content_hover_button_border_color=”#FFFFFF” content_hover_button_icon=”9||divi||400″ content_hover_button_custom_margin=”||||false|true” content_hover_button_custom_padding=”|2vw||2vw|false|true” custom_padding=”|1vw||1vw|false|true” link_option_url=”#” border_radii=”on|10px|10px|10px|10px” content_hover_button_text_shadow_style=”preset1″ global_colors_info=”{}” background__hover_enabled=”on|hover” background_color_gradient_stops__hover=”rgba(0,0,0,0.62) 0%|rgba(0,0,0,0.61) 100%” use_background_color_gradient__hover=”on” background_color_gradient_overlays_image__hover=”on” _i=”0″ _address=”5.2.1.0″ theme_builder_area=”post_content” /]
[dmpro_hover_box content_title=”Hover Box” content_hover_title=”Hover Box” content_hover_content=”Foto in de achtergrond op het tabblad: Content.
Daar bovenop een Gradient filter” use_content_hover_button=”on” content_hover_button_text=”Lees verder” hover_box_align_front=”top_left” hover_box_align_back=”top_left” content_hover_bg_color_gradient_overlays_image=”on” _builder_version=”4.16.0″ _module_preset=”default” content_title_text_color=”#FFFFFF” content_hover_title_text_color=”#FFFFFF” content_hover_desc_text_color=”#FFFFFF” background_enable_color=”off” use_background_color_gradient=”on” background_color_gradient_direction=”89deg” background_color_gradient_stops=”rgba(0,0,0,0.8) 0%|rgba(0,0,0,0) 99%” background_color_gradient_overlays_image=”on” background_image=”https://landbouwdagalkmaar.nl/wp-content/uploads/2022/04/fishing-boats-6919341_1280.jpg” custom_content_hover_button=”on” content_hover_button_text_size=”16px” content_hover_button_text_color=”#FFFFFF” content_hover_button_bg_color=”rgba(10,10,10,0.64)” content_hover_button_border_width=”1px” content_hover_button_border_color=”#FFFFFF” content_hover_button_icon=”9||divi||400″ content_hover_button_custom_margin=”||||false|true” content_hover_button_custom_padding=”|2vw||2vw|false|true” custom_padding=”1vw|7vw|||false|false” link_option_url=”#” border_radii=”on|10px|10px|10px|10px” content_hover_button_text_shadow_style=”preset1″ global_colors_info=”{}” background__hover_enabled=”on|hover” use_background_color_gradient__hover=”on” background_color_gradient_overlays_image__hover=”on” background_color_gradient_stops__hover=”rgba(0,0,0,0.72) 0%|rgba(0,0,0,0) 99%” _i=”0″ _address=”5.2.2.0″ theme_builder_area=”post_content” /]

Een website voor verhuur van mijn vakantiehuis

Cherry cream soda