Clark Divi Child Theme | Brand Elemental

Header & Footer

Our headers and footers are created in the Divi Theme Builder.

Find the Divi Builder:
From the Dashboard, select Divi.
Select Theme Builder.
Click the edit icon for the global header or footer.
Make your edits
Save your changes.
Save the Theme Builder page.

Text Settings

Clark Divi Child theme includes a script font and an underline effect. In the following we will show you how to use the script font and setup the underline effect.

Script Font

Open your text module.
Click the Advance tab.
Add the class name: ‘accent’ to the CSS Class field.
Click the green check box to save the settings.

Underline Effect

To use the underline effect, add span tags to your text. Note in the Call to Action module, we are not using the Title field. We used the text section to add a span tag.

You can add this between header tags if required. In our Call to Action module, we placed the span tags between the h2 header tags.

Change Color

Add this code snippet to the Divi CSS box at the bottom of the Divi Theme Options page. Change the hex colors.

/* UNDERLINE TEXT */
/* Optin CTA */
.underline.et_pb_promo h2  {
    background: linear-gradient(rgba(255,255,255,0) 45%,#489FC8 45%,#489FC8);
	width: 50%;
    margin: auto;
    margin-bottom: 20px;
}

.underline span, span.underline {
	background: linear-gradient(rgba(255,255,255,0) 45%,#489FC8 45%,#489FC8);
}

Testimonial Slider

Change the Color

Copy this code snippet into your Divi CSS box and change the hex colors.

/*  Slider Arrow Before  */
.be-slider .et-pb-arrow-prev:before {
    background: #489FC8;
}

/* Slider Arrow After */
.be-slider .et-pb-arrow-next:before {
    background: #489FC8;
}

Horizontal & Vertical Lines in the Blog Modules

Change the Color

Copy this code snippet into your Divi CSS box and change the hex colors.

Blog Grid

/* Line Connecting Title to Image */
.be-blog-grid .et_pb_image_container:before {
  	background: #479FC7;
}

Featured Blog Posts on Blog Landing Page & Single Post

@media all and (min-width: 980px) {
/* Featured Blog Post */
.featured-blog-image:before {
    background: #479FC7;
}
	
/* Single Post Featured Image */
	.single-post-featured-img:before {
    	background: #479FC7;
}
}

Blog Read More Button Background

Change Color

.be-featured-post a.more-link:hover {
	background: #489fc8;
}

Click Trigger Opt-In

Bloom Plugin

Open the Bloom plugin and find your optin.
Setup your opt-in content.
Click the Display Settings.
Select the “Trigger on Click” option.
Add “*.optin-cta” to the CSS Selector field.
Select the “Display on Everything” option.

On Page Click Trigger

Select the Page to add the Click Trigger Opt-In.
Open the Call to Action Module.
Add “#1” to the Button Link (leave the Module Link blank).
Select the Advanced tab.
Add “optin-cta” to the CSS Class field.