Html Code for Divi

Mobile Address Bar Color In Your Divi Website

You actually need 3 meta tags to support Android, iPhone and Windows Phone.

***

<meta name=”theme-color” content=”#4285f4″>
<meta name=”msapplication-navbutton-color” content=”#4285f4″>
<meta name=”apple-mobile-web-app-status-bar-style” content=”#4285f4″>

***

Now once you have that copied, go to your website to the Divi Theme Options. Look for the Integration tab, and paste the code snippet into the first section labeled “Add code to the < header >   of your blog.”

Replace The Color with 6 digit hex color with your own.

Now go check your site on an Android device with Chrome browsers. I have also been told it works on other browsers like Safari on iMac, but I do not have any to test, so let me know. This is a really nice touch, and really shows how you can go the extra mile for your website or client website.

 

Change Your Header Color

Now once you have that copied.

***

#main-header {

background-color:#212121;

}

***

1-Go to your website to the Divi Theme Options.
2-General
3-Custom CSS
4-Paste code
5-Change the color code #
6- Save

 

Columns in Divi

This ensures that the columns and their modules do not slide and remain together.

Now once you have code copied.
Go to Divi > Theme Options > Custom CSS, and paste code

***

@media only screen and (max-width: 980px) {

.two-columns .et_pb_column {

width: 50%!important;

}

.three-columns .et_pb_column {

width: 30.33%!important;

}

.four-columns .et_pb_column {

width: 25%!important;

}

.five-columns .et_pb_column {

width: 25%!important;

}

}

***

1-Go to Row Sections – Click Design > Spacing > Margin each column minim 10px
2-In Row sections go Advance
3-In the ROW  Advance  > CSS ID & Classes *** four-columns  .et_pb_column ***(Change the number columns in the Row)
4-Paste Code

 

 

Button Link (Action)

Insert the code in the Link section of the button module

 

TEXT MESSAGE:  sms:13050000000

 

WHATSAPP: http://api.whatsapp.com/send?phone=13050000000

 

CALL: tel:+13050000000

 

SEND BY EMAIL: mailto:?Subject=Name%20Last%20-%20Business%20-%20My%20Virtual%20Business%20Card&Body=Look%20at%20my%20vCard%20%20%20%20%20https://mywebsite.com/page SEND BY EMAIL (Single): mailto:myemail@email.com

 

SEND BY TEXT: sms:?&body=Name%20Last%20-%20Business%20-%20View%20My%20vCard%20https://mywebsite.com/page

 

Iframe

<iframe src="https://mywebsite.com/file//preview" width="640" height="480" allowfullscreen="allowfullscreen"></iframe>
Footer html Code for Divi

DIVI – Footer Credits

Insert the code – Appearance > Customize > Footer > Footer credits

***

Site Designed by  <a href="https://mywebsite.com">Gables Tech </a>(Graphic Design Team)

 DIVI Footer  Credit center text  (Additional CSS Section)

Insert the code – Wp Dashboard > Divi > Theme options > Custom CSS

***

 #footer-info {

      text-align: center;

      width: 100%;

}

 —-

DIVI Footer menu Center text (Additional CSS Section)

Insert the code – Wp Dashboard > Divi > Theme options > Custom CSS

***

 .bottom-nav {

text-align: center;

}

 ———————

 DIVI Footer text module (Paste into widget footer module)

Insert the code – Wp Dashboard > Divi > Theme options > Custom CSS

***

 <p style="text-align: center;">CENTER</p>
Adding Anchor Links in Div
Using anchor links allows your readers to navigate your site better. It also saves them energy with scrolling

ANCHOR
1-In the button put #ancla-name (replace name with the name to use)
2- In CSS ID & CLASS of the module where you want to put the anchor, insert anchor-name without using l# ( Name is replaced by the name you want. The anchor in the CSS and the button always have to be the same)

ANCHOR FROM MENU
1-In the MENU LINK put https://website.com/home #ancla-name (replace name with the name to use) (That is, the URL of the page where the anchor is followed by #ancla-name

Check-Mark and Symbol - Divi

Use one of the following codes and then paste into the text section (not Visual). Change the color and symbol codes. For more symbols codes go to the following link
https://www.gableshost.net/elegant-icon-font

Gray or black color

***

<span class='et-pb-icon' style='font-size: 33px;'>&#xe0d1;</span>

***

Color

***

<span class='et-pb-icon' style='font-size: 33px; color: red;'>&#xe0d1;</span>

***

Sample:

N <span class=’et-pb-icon’ style=’font-size: 33px; color: black;’>&#x4e;</span>

Z <span class=’et-pb-icon’ style=’font-size: 33px; color: black;’>&#x5a;</span>

<span class=’et-pb-icon’ style=’font-size: 33px; color: black;’>&#xe009;</span>

<span class=’et-pb-icon’ style=’font-size: 33px; color: black;’>&#xe010;</span>

<span class=’et-pb-icon’ style=’font-size: 33px; color: black;’>&#xe090;</span>

v <span class=’et-pb-icon’ style=’font-size: 33px; color: black;’>&#x76;</span>

w <span class=’et-pb-icon’ style=’font-size: 33px; color: black;’>&#x77;</span>

<span class=’et-pb-icon’ style=’font-size: 33px; color: black;’>&#xe01d;</span>