Spade Divi Child Theme | Brand Elemental

You wll find most of your color settings in the Spade Divi Child theme are in the individual Divi modules. We have provided the code snippets for changing the color of the elements that are not managed in Divi modules.

Menu Social Icon Section

Spade Divi Child theme has a color block in the menu on the social media area. We also use Font Awesome to create the font icons in the menu.

Menu Color Block Background Color

To change the background color, add the following code snippet to the Divi CSS box in the Divi Theme Options page and change the hex color value.

@media only screen and (min-width: 981px) {
	.social-icons-menu, 
	#et-top-navigation > a.et-cart-info, 
	#et-top-navigation > #et_top_search {
		background-color: #C3A990;
	}
}

Menu Social Icon Font Awesome

We have setup a couple of social examples in the menu. Replace the “#” sign with a link to your social media account.

If you would like to add different icons to the menu, visit Font Awesome to get the shortcode of the social media icon you prefer.

Menu Color Block CSS Class

If you want your new icon to be located in the color block, you must add the CSS Class “social-icons-menu” to the CSS field.

*If you do not see the CSS field under your menu Navigation Label, scroll to the top left corner and select your Screen Options. Enable the the CSS Class option.

Text Settings

Spade Divi Child theme includes a script font in the home page header module and in various locations. In the following we will show you how to use the script font.

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.

Footer

The footer is 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 footer.
Make your edits
Save your changes.
Save the Theme Builder page.

Vertical Text

The vertical text works best with less than 8 characters. If you need to have more characters the position of the vertical text may adjust. You may try decreasing the size of the text and the letter spacing in the Design tab of the Text module till the vertical text is perfectly aligned next to your image.