/* Make Superscript look right */



font-size: 70%;

vertical-align: text-middle;

line-height: 0;



/** Target IE to respect aspect ratios and sizes for SVG files *

* [1] IE9

* [2] IE10+


/* 1 */

.ie9 img[src*=”.svg”] {

width: 100%;


/* 2 */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

img[src*=”.svg”] {

width: 100%;





/* Vertically centre items in a row */

.v-centre {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-ms-flex-direction: row;

flex-direction: row;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

padding-top: 10%;



/** Stop words breaking: **/


.et_pb_slide_title {

word-wrap: normal !important;

-webkit-hyphens: none !important;

-moz-hyphens: none !important;

hyphens: none !important;



.et_pb_cta_0.et_pb_promo .et_pb_promo_description {

word-wrap: normal !important;

-webkit-hyphens: none !important;

-moz-hyphens: none !important;

hyphens: none !important;





/* Class to make items centre vertically in a column – add to Column CSS ID*/


.jh-vertical-align {

display: flex;

flex-direction: column;

justify-content: center;



/* Improve appearance of Contact Form7 */


.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {

background-color: #f4f4f3 !important;

border: 2px solid #fff !important;

width: 100% !important;

-moz-border-radius: 2 !important;

-webkit-border-radius: 2 !important;

border-radius: 2 !important;

font-size: 14px;

color: #4e4e4e !important;

padding: 8px !important;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;


.wpcf7-submit {

color: #D83431 !important;

margin: 6px auto 0;

cursor: pointer;

font-size: 20px;

font-weight: 500;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

padding: 1px 10px;

line-height: 1.7em;

border: 1px #d83431;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

-moz-transition: all 0.2s;

-webkit-transition: all 0.2s;

transition: all 0.2s;


.wpcf7-submit:hover {

background-color: #bbb;


padding: 1px 10px !important;




Tips and tricks for Divi


Make the slider full screen

To your >Slider Module >Custom CSS section >Main Element in your Divi builder, and to each slide custom CSS Main Element.

add: height:100vh;


Create a Vertical Rule

<hr width=”1″ size=”400″>



/* Change colour of tab module in Divi Theme */


/* change tab color to green */

.et_pb_tabs_controls li {

float: left;

padding: 5px 30px 3px;

border-right: 1px solid #d9d9d9;

font-weight: 600;

position: relative;

cursor: pointer;

background: #257c2c;



.et_pb_tabs_controls li a:link {

color: white;}


.et_pb_tabs_controls {

background-color: #257c2c;

border-bottom-color: #d9d9d9;

border-bottom-style: solid;

border-bottom-width: 1px;



/* Change the Divi Header Menu Link Hover appearance */

/* You can change hover colour of the the Divi Theme’s menu links with the following CSS: */

#top-menu a:hover { color: red !important; }



Add a Full-Width Image Above the Divi Header

One feature missing from the Divi Theme which can be found in some other themes is the ability to have a full-width image displayed right at the top of the page, above the main header bar. We can add such a “banner” image to Divi by Manually Editing Files

Step 1: Include the image into the page

We first begin by adding the image to the HTML page and moving it into the correct location. To do so, add the following HTML code into the Divi theme footer.php (or your child theme footer.php) file just before the final </body> tag:

<div style=”display:none”>

<img id=”myprefix-page-start-img” src=””/>



Change the src=”…” part to the URL of your image. If you don’t yet have a URL for your image you can get one by uploading the image to your WordPress media library, and then viewing the information for the uploaded image.

Style tip: The image will be stretched to fit the width of the screen, so wide images will generally look better than tall ones.

Step 2: Adjust the page layout to accommodate the image

The above code puts the image into the right place in the page. But it doesn’t do anything to make sure it looks good. We can fix this by adding the CSS below. The CSS achieves several things:

•       It makes the image full width on full-size screens.

•       It hides the image on mobiles, defaulting to the standard Divi mobile layout.

•       It fits the image to the width of the “box” when box mode is used.

•       As the header is now lower down the page, it delays making the header “float” until the user has scrolled down far enough.

•       It fixes up the padding and margins so there are no unsightly gaps.

While it looks complicated, you don’t need to understand it to use it, just copy it into the end of the Divi theme style.css (or your child theme style.css) file and it should work.

/* Change header to float correctly wherever it is in the page */

@media only screen and ( min-width:981px ) {

#main-header { position:relative !important; top:0px !important; } /* inline */ { position:fixed !important; margin-bottom:0px; top:0px !important; } /* floating */

body.admin-bar { top:32px !important; } /* adjust for WP admin bar */

#page-container { overflow:hidden; } /* prevent sub-menus from breaking scrolling */


/* Handle top header */

#top-header { position:relative !important; top:0px !important; } /* inline header */



/* Style the image for full screen layouts */

@media only screen and ( min-width:981px ) {


#myprefix-page-start-img { margin-bottom:0px; width:100%; }


/* Override Divi JS padding adjustment */

div#page-container[style] { padding-top:0 !important; }


/* Remove gap between heading and menu caused by line height */

body { line-height:0 !important; }

body * { line-height:1.7em }



/* Style the image for box layout */

@media only screen and (min-width: 1200px) {

.et_boxed_layout #myprefix-page-start-img {


-moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);

-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);

box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);

display:block !important;






/* Hide the image on smaller screens */

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

#myprefix-page-start-img { display:none; }


Now, your Divi theme should show your image full width across the top of your blog (or fill the width of the box area when in box layout), with the Divi header below. When you scroll passed the Divi header, it will remain visible at the top of the screen as normal.



Changing the Divi Header Top Header Styles

The Divi Theme allows you to set a phone number and email address to be shown at the top of the header, as well as a number of social media icons. Here’s how to change the look of these top header text and icons.

Changing the Top Header Bar Font Size

You can adjust the font size of the icons with the following CSS:

#top-header #et-info-phone,

#top-header #et-info-email,

#top-header .et-social-icon a {



Note that the default font-size is 100% so anything bigger than this will increase the font size and anything smaller will decrease it.

Changing the Top Header Text and Icon Color

To change the color of the top header icons and text, you can use this CSS:

#top-header #et-info-phone,

#top-header #et-info-phone a,

#top-header #et-info-email,

#top-header .et-social-icon a {

color: yellow !important;


Changing the Top Header Hover Color

To change the hover color of the top header icons and text you can do:

#top-header #et-info-phone a:hover,

#top-header #et-info a:hover span#et-info-email,

#top-header .et-social-icon a:hover {

color: red !important;


Changing the Top Header Bar Background Color

To change the background of the whole top header bar, you can use the following CSS:

#page-container #top-header { background-color: red !important; }



Make Divi Accordions Closed by Default

The default behavior of the Divi Theme’s accordion module is to show the first item of the accordion as open. If you’d like to have all accordion items to start in the closed state by default, you can do so by adding the following into the footer:



$(‘.et_pb_accordion .et_pb_toggle’).addClass(‘et_pb_toggle_close’).removeClass(‘et_pb_toggle_open’);





Open Divi Slider Button Link in New Tab

To make Divi Theme’s slider button links open in a new tab, you can add the following into the footer.php file (of the theme itself, or a child theme):



$(‘.et_pb_more_button’).attr(‘target’, ‘_blank’);




Customized Slider height

I’ve accomplished this without a plugin by doing the following:

1. Create a full-width slider.

2. Create a custom class that adjusts the slider height, and place this in the CSS class for the section (code below). 3. Add the slider images at 1920 x 1080 (that is what I am using).

Using the modification below

– replace “.topslider” with whatever you want – that is the CSS class name

– adjust the 700px and 40% accordingly based on your needs

– add more media queries and adjust height (700px) and description location (40%) accordingly

@media only screen and ( min-width:981px ) { /* Set the slider height */

.top_slider, .top_slider .et_pb_container { height: 700px;


.top_slider, .top_slider .et_pb_slide { max-height: 700px;


.top_slider .et_pb_slide_description { position: relative;

top: 40%;

padding-top: 0;

padding-bottom: 0; height: auto;





/* Use a different logo on specific pages in Divi Theme */


.page-id-1216 #logo {

content: url(<a href=”http:”>http://your_logo.png</a>);




HTML for adjusting Paragraph text size:

<p style=”font-size: 45px;”><strong>SERVING THE CRUISE INDUSTRY WORLDWIDE</strong></p>



Show a Background Image in edit area

<div style=”background-image: url(‘wp-content/uploads/2014/06/pen_bg_feint.jpg’); background-position: center center; background-repeat: no-repeat; text-align: center;”>


For non-breaking hyphens use:



Transparent Table Backgrounds


You can try this in your html file:

<table class=’table1′>


And this in your css file:

.table1 {

background: rgba(255,255,255,0.5);




* HTML *

<div id=”navcontainer”>

<ul id=”navlist”>

<li id=”active”><a href=”#” id=”current”>Item one</a></li>

<li><a href=”#”>Item two</a></li>

<li><a href=”#”>Item three</a></li>

<li><a href=”#”>Item four</a></li>

<li><a href=”#”>Item five</a></li>




* CSS *



margin-left: 0;

padding-left: 0;

list-style: none;



#navlist li


padding-left: 10px;

background-image: url(images/arrow.gif);

background-repeat: no-repeat;

background-position: 0 .5em;





<li style=”margin-bottom: 20px;”>



Use  &#160;&#160;


Make Full width Grid Portfolios Square


@media (min-width: 1041px) {

.et_pb_portfolio_item.et_pb_grid_item { min-width: 25%; height: 25vw !important; }

.et_pb_portfolio_item.et_pb_grid_item img { max-width: 100%; object-fit: cover; } }


@media (min-width: 785px) and (max-width: 1040px) {

.et_pb_portfolio_item.et_pb_grid_item { height: 33vw !important; }

.et_pb_portfolio_item.et_pb_grid_item img { max-width: 100%; object-fit: cover; } }


@media (min-width: 497) and (max-width: 784px) {

.et_pb_portfolio_item.et_pb_grid_item { height: 50vw !important; }

.et_pb_portfolio_item.et_pb_grid_item img { max-width: 100%; object-fit: cover; } }


@media (max-width: 496px) {

.et_pb_portfolio_item.et_pb_grid_item { height: 100vw !important; }

.et_pb_portfolio_item.et_pb_grid_item img { max-width: 100%; object-fit: cover; } }


.et_pb_fullwidth_portfolio .et_pb_portfolio_image:hover h3 {

margin-top: 45%;




/* Rotate Colour Palette */


/* put this in the page custom css or change a Class ID site wide with (for instance) #top-header { */

.et_pb_image_1 { -webkit-animation: adjustHue 1s alternate infinite; animation-duration:5s; } @-webkit-keyframes adjustHue { 0% { -webkit-filter: hue-rotate(30deg); } 50% { -webkit-filter: hue-rotate(60deg); } 100% { -webkit-filter: hue-rotate(190deg); } }


Hide Sidebars on Posts & everywhere


/*** Take out the divider line between content and sidebar ***/

#main-content .container:before {background: none;}


/*** Hide Sidebar ***/

#sidebar {display:none;}


/*** Expand the content area to fullwidth ***/

@media (min-width: 981px){

#left-area {

width: 100%;

padding: 23px 0px 0px !important;

float: none !important;




Post to Email: to get first image as FEATURED IMAGE


Divi Options


>General Settings

>Show Thumbs on Index pages ENABLED

>All other Layout Settings DISABLED


DIVI Options


>Grab the first post image ENABLED

>Blog Style Mode DISABLED



Make a Post full width by default in Divi Options


.single-post .container:before {

display: none!important;


.single-post #left-area {

width: 100% !important;




Centre the Text in a Divi Slider


In the Header Container add the following:

float: none;

display: inline-block;

vertical-align: middle;




Vertically Centring with FlexBox


This is to centre align the content of the columns across a row.


1st Make sure the Row >Advanced Design Settings >Equalise Column Heights >YES


In Divi Options add the following CSS to create a new class:


.ds-vertical-align {

display: flex;

flex-direction: column;

justify-content: center;



Then in each >Column # CSS Class – enter: ds-vertical-align



Enhanced Shadow under the top Menu


Put this in the Divi Options CSS:


#main-header {

-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);

-moz-box-shadow:    0px 3px 5px rgba(100, 100, 100, 0.49);

box-shadow:         0px 3px 5px rgba(100, 100, 100, 0.49);


-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49)!important;

-moz-box-shadow:    0px 3px 5px rgba(100, 100, 100, 0.49)!important;

box-shadow:         0px 3px 5px rgba(100, 100, 100, 0.49)!important;




Nesting Divi Modules


Unicode Characters for Bullets

Just add the following code to the page Custom CSS in the Divi Builder settings


.entry-content ul li {

list-style-type: none;


.entry-content ul li::before {

color: #d3651b;

content: “✔︎”;

font-size: 120%;

padding-right: 8px;




To get WordPress to Auto Update add the following to the wp-config.php


// Update core – development, major, and minor versions

define( ‘WP_AUTO_UPDATE_CORE’, true );


You can also add this to the Theme functions.php


add_filter( ‘auto_update_plugin’, ‘__return_true’ );

add_filter( ‘auto_update_theme’, ‘__return_true’ );



Blog Page Layout settings

Do not set a Featured Image

Theme Options >Layout >General Settings >Show thumbs on Index Pages >Enable

Theme Options >Layout >Single Post Layout >Place thumbs on Posts >Disable

Theme Options >General >General >Grab First Post Image >Enable

Theme Options >General >General >Blog Style Mode >Disable

Blog Module Settings >General Settings >Show Featured Image >Yes

Blog Module Settings >General Settings >Read More button >On


To Vertically Align images in a row


Add the following code to the >Row Module Settings >Custom CSS >Column # Main Element







Simple Drop Capitals Shortcode





DropCapitals using CSS – works better


/* Drop Caps */


float: left;

font-size: 3.26em;

line-height: 0.5;

margin: 0.205em 0.153em 0 0;



.firstLetter + span{

margin-left : -0.5em;



.typographic p {




<p><span class=”firstLetter”>N</span>



Full Screen or adjustable Divi Slider


/** Full Screen or adjustable Divi Slider **/


.et_pb_slide {

height: 100vh;



Then add

height: 100vh;


to your >Slider Module >Custom CSS section >Main Element in your Divi builder, and to each slide custom CSS Main Element.



Stop one slide from animating as on HQW Showroom


In the Custom CCS for the slide, in Slide Description, enter:


-webkit-animation: none !important;

-moz-animation: none !important;

-o-animation: none !important;

-ms-animation: none !important;

animation: none !important;



Format the Divi Contact Form email better:


<p>———— Message from the Website ———-</p>

Sender’s Name: %%Name%%<br /> Sender’s Phone or Email: %%Email%%<br />Message: %%Message%%</br>





/* Add a background to the Header */

#main-header::after {

content: “”;

background-image: url(‘myimage.png’);


opacity: 0.5;

top: 0;

left: 0;

bottom: 0;

right: 0;

position: absolute;

z-index: -1;




Use Google Fonts – add this to Custom CSS:


@import url(;

h1, h2, h3, h4, h5, h6 {

font-family: “Cinzel”,cursive; !important




• For this effect: —————————— TITLE —————————


Add to the Page Builder CSS:


/* headlines with lines */ .decorated{ overflow: hidden; text-align: center; } .decorated > span{ position: relative; display: inline-block; } .decorated > span:before, .decorated > span:after{ content: ”; position: absolute; top: 50%; border-bottom: 2px solid; border-color:#aaa; width:800px; /* half of limiter*/ margin: 0 10px; } .decorated > span:before{ right: 100%; } .decorated > span:after{ left: 100%; }


Then insert a CODE Module and use the following Code:

<h4 class=”decorated”><span>Finger Buffet</span></h4>



• Adding Divi little Icon Symbols

<h5><span id=”et-info-phone”><a href=”tel:01825840269″> +44 (0)1825 840269



• Inline Styling examples:

<span STYLE=“font-family: ‘ETmodules’; >/33</span>


<span STYLE=”margin-left: 25px”>Hi there! If you are reading this then you have found my home page! Congratulations!</span>


<h2 STYLE=”background: #000080; color: green; line-height: 50px; font-size: 40px”>


/** Fix the DIVI Captcha **/


.et_pb_contact .et_pb_contact_right p input {

max-width: 50px;





.et_pb_contact_captcha_question {






/** App Style header and Drop Down Menu **/


.mobile_nav.opened .mobile_menu_bar:before {

content: “\4d”;



Change the colour of the Hamburger Menu

span.mobile_menu_bar:before {

color: red !important;




/** full width on mobile **/

.et_boxed_layout #page-container {

margin: auto;

max-width: 1200px;

width: 100%;






/** Stop Words Breaking: **/


.et_pb_slide_title {

word-wrap: normal;

-webkit-hyphens: none;

-moz-hyphens: none;

hyphens: none;




Hide the logo on a specific page:

.page-id-48 #logo {

display: none;




Resize the Logo on Mobile:

@media (max-width: 980px)

‪#‎‪logo {

max-height: 100%;






/* headlines with lines: Add this to the Page Custom CSS: */

.decorated{ overflow: hidden; text-align: center; } .decorated > span{ position: relative; display: inline-block; } .decorated > span:before, .decorated > span:after{ content: ”; position: absolute; top: 50%; border-bottom: 2px solid; border-color:#aaa; width:800px; /* half of limiter*/ margin: 0 10px; } .decorated > span:before{ right: 100%; } .decorated > span:after{ left: 100%; }



Then add text like in a Code Module:

<h4 class=”decorated”><span>ADVICE</span></h4>



Make Boxed Layouts go to the edge on mobile:


.et_boxed_layout #page-container, .et_fixed_nav.et_boxed_layout #page-container #main-header, .et_fixed_nav.et_boxed_layout #page-container #top-header  {

margin: auto;

width: 100%;




Make the Featured Post Image smaller on Blog Module Page

Put this into Custom CSS on the Page Builder Code


.et_pb_image_container img, .et_pb_post a img {

max-width: 50%;

vertical-align: bottom;



Hide the Header or Footer


#main-header { display:none; }

#page-container { padding-top:0px !important }

It hides the header, then moves the rest of the page up into the space the header occupied.


Hide the Footer


.page-id-135 #footer-bottom {

display: none;


And if you want to hide it on the entire site, just use this:

#footer-bottom {

display: none;



Same deal for footer-widgets


Divi Quick Tip: How to Create Modules That Overlap Sections


tp://″ target=”_blank”>Try watching this video on</a>, or enable JavaScript if it is disabled in your browser.</div></div>

In this Divi Quick Tip we show you how to create a module that appears to overlap two sections. This is perfect for achieving that “broken grid” effect and adding another level of novelty to a Divi built page.


Add CSS Class to last module (cta-overlap) and first module (section-overlap) of two adjoining sections


Add the following code:



.section-overlap:before {










.cta-overlap {






Click to Call link on mobile :


<a href=”tel:123.456.7890″>123.456.7890 CLICK TO CALL</a>



Call to Action Button in the Menu


In this Divi Quick Tip we show you how to turn a standard menu item into an in-line call to action button.

You can use this code to follow along:

<span class=”et_pb_more_button et_pb_button”>Register</span>

/*Menu CTA Button*/

#et-top-navigation .et_pb_button {

margin-top: 0px;

font-size: inherit;

font-weight: inherit;



#et-top-navigation .et_pb_button:after {

font-size: 23px;





Use this Custom CSS in the Main Element to put a shadow behind text


text-shadow: 0 3px 12px rgba(0, 0, 0, 1.0);




Make CSS Changes for a certain format or screen size:


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







Overlay a screen effect on an image:


#fly-screen {

background: transparent url(“”) repeat scroll left top;

height: 100%;

position: absolute;

top: 0;

width: 100%;

z-index: 2;




Increase Colour Saturation on gallery thumb nails


In Custom CSS / Main Element


-webkit-filter: saturate(1.75);

filter: saturate(1.75);



Message before the Captcha:


.et_pb_contact_right:before {

content: “Prove you’re human “;

left: -150px;

position: absolute;

top: 13px;


.et_pb_contact_right {

position: relative;





a.more-link {

border: 0px solid;

border-radius: 3px;

display: inline-block;

margin-top: 10px;

padding: 3px 10px;

text-transform: uppercase;



To see the Read More… button you must go to >Settings >Reading show [x] Full Text.

Then use the More button in the editor to add a break point.


Somewhere in the post add the following: <!–more–>

Also go to Divi Theme Options:




/* for B&W Map change percentage for saturation */

.et_pb_map_container {

filter: url(“data:image/svg+xml;utf8,#grayscale”);

filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: gray; /* IE6-9 */

-webkit-filter: grayscale(100%);




Getting a working Google API Maps Key for DIVI Maps module.


Log into a Google account.

Go to:

In Google Maps APIs – select Javascript API

First time it will ask you to create a project

Either pick one you made previously or create a new project

Now you must Enable the API

And finally create Credentials

At this point just click API key to skip the walkthrough

And choose Browser Key

Click Create and collect your API Key

Creating more Credentials: click on >Credentials >Create Credentials >Help me choose:

Choose >Google Maps and Roads >What Credentials do I need?

Click on Create a new API Key:

Copy your key: AIzaSyDqFhco-v3tJHoftRg7UkPNsygpNzQLeZk and paste it into the Divi Options >General >Google API


Elegant Themes API Key: c4f3b4c8383f46743756d55d7e1bcc60b0db282a



Your Akismet API key is: f671fbd9ff21


Please keep this private, treat it like a password.