
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
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 staatBij 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}
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” /]
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” /]
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” /]
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” /]
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” /]