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;'></span>
***
Color
***
<span class='et-pb-icon' style='font-size: 33px; color: red;'></span>
***
Sample:
<span class='et-pb-icon' style='font-size: 33px; color: black;'>N</span>
<span class='et-pb-icon' style='font-size: 33px; color: black;'>Z</span>
<span class='et-pb-icon' style='font-size: 33px; color: black;'></span>
<span class='et-pb-icon' style='font-size: 33px; color: black;'></span>
<span class='et-pb-icon' style='font-size: 33px; color: black;'></span>
<span class='et-pb-icon' style='font-size: 33px; color: black;'>v</span>
<span class='et-pb-icon' style='font-size: 33px; color: black;'>w</span>
<span class='et-pb-icon' style='font-size: 33px; color: black;'></span>