Design Flourishes
CSS, JS and plugin settings.
Solving the main Divi pain points and taking sites to the next level with some nice touches
Unclickable menu items
This makes certain items in the nav unclickable (usually in the main nav so that only second level items are unclickable).
To action, go to Appearance > Menu > Screen Options and enable the tick box that says CSS Classes. This will allow you to add a CSS class to individual menu items. Add .unclickable to any menu items that shouldn’t be clickable.
The code
After following those steps, add the following under Divi> Theme Customiser > Additional CSS
/*navigation unclickable*/
.unclickable > a:hover {
cursor: default;
}
Columns on mobile
By default, mobiles will stack all columns on top of each of, so even two column sections will sit on top of each other. This is usually fine, but not ideal for things like company logos in a carousel.
To resolve this, open the Row setting and go to Advanced > Custom CSS > Main Element and add display:flex;
Wording before counters
By default, the number counter only allows things to be added before the number.
This can be changed by going to Module Settings > Advanced > CSS Class and giving it your chosen class (eg, if you want to add a £ symbol, give it the class pound). Then add the below code in Divi > Theme Customiser > Additional CSS, changing the class name accordingly. Then, where it says ‘CONTENT GOES HERE’ in the code, add whatever it is you need to show before the number.
The code
/*—Text before counters—*/
.(CLASS NAME) span.percent-value:before {
content: ‘CONTENT GOES HERE‘;
}
Wording after counters
By default, the number counter only allows things to be added after the number.
This can be changed by going to Module Settings > Advanced > CSS Class and giving it your chosen class (eg, if you want it to say ‘miles’, give it the class miles). Then add the below code in Divi > Theme Customiser > Additional CSS, changing the class name accordingly. Then, where it says ‘CONTENT GOES HERE’ in the code, add whatever it is you need to show before the number.
The code
/*—Text after counters—*/
.(CLASS NAME) span.percent-value:after {
content: ‘CONTENT GOES HERE’;
}
Change logo per page
If you want to change the logo based on certain pages (they might have different colours for different sections, or a different logo for logged in users), add the below to Divi > Theme Customiser > Additional CSS
To find out the Page ID, hover over the page in the backend of WordPress and the ID will be shown in the bottom left of the browser window (see screenshot – in this case, the ID to add to the CSS would be .page-id-21311)
.(PAGE ID) img#logo {
content: url(LINK TO NEW LOGO – THIS CAN BE FOUND IN WORDPRESS MEDIA LIBRARY) !important;
}
Selector highlight colour
It’s a nice touch to change the text highlight colour to the brand colour.
To do this add the folowing to Divi > Theme Customiser > Additional CSS
/*Selector text*/
::selection {
background: rgba(BRAND COLOUR HERE);
color: #000;
}
::-moz-selection { /* Code for Firefox */
color: red;
background: rgba(BRAND COLOUR HERE);
}
Reorder colums on mobile
Divi stacks rows in order from left to right, which sometimes means having two images / two blocks of text on top of each other. This snipper reverses the order so you don’t have to do a mobile version.
First, add a custom CSS class of reverse-columns-mobile to the Row Settings > Advanced > CSS ID & Classes > Class.
Then go to Divi > Theme Customiser > Additional CSS and add:
@media (max-width:980px) {
.reverse-columns-mobile {
display: flex;
flex-direction: column-reverse;
}
}
Centre-align text and social modules
If your content looks good left- or right-aligned on desktop, but would look better center-aligned on smaller screen sizes, add a custom CSS class of center-text-mobile in Text Module settings > CSS ID & Classes > Class
Then go to Divi > Theme Customiser > Additional CSS and add:
@media (max-width:980px) {
.center-text-mobile,
.center-text-mobile .et_pb_text_inner,
.center-text-mobile .et_pb_social_media_follow {
text-align: center!important;
}
}
NOTE: Add the class to a Row, Column or a Section settings if you want to target multiple Text Modules at once.
Animated text link
If you want to add animation to text links, go to the Text module under Settings > Advanced > CSS ID & Classes > CSS class and add .de-highlights
Then add the code below to Divi > Theme Customiser > Additional CSS
The code
/* Highlighted Link Animation Effect */
.de-highlights p>a:link {
text-decoration: none;
color: #5430ce; /* Set the color of your text here or in the text module settings */
background-image: linear-gradient(#5430ce, #5430ce), linear-gradient(#0fe5a8, #0fe5a8); /* Set the color of the line under the link when it is hovered, then set the background color that will show on hover, this is also the initial line color */
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px, 100% 2px;
transition: background-size .16s; /* Set the speed of the animation */
position: relative;
}
.de-highlights p>a:link:hover,
.de-highlights p>a:link:focus {
background-size: 100% 2px, 100% 100%;
color: #ffffff; /* Set the link text color when it is hovered */
}
Menu callouts
If you want to add callouts to menus to highlight key areas, sales etc, go to Appearance > Menu and add the following to the Navigation Label field that you want to add the callout to: <span class=“pa-callout-inline”>NEW</span>MENU ITEM HERE
(where NEW is whatever callout you want and MENU ITEM HERE is the page as it appears in the nav bar)
NOTE: the code below has options for the callout to appear inline, raised to the left or raised to the right. Replace pa-callout-inline from the above code with -left or -right if using one of those.
The code
/*inline menu callout text css snippet*/
.pa-callout-inline {
font-size: 16px;
margin-right: 8px;
margin-top: -3px;
color: #ffffff;
background-color: #e03574;
padding: 3px 4px;
border-radius: 3px;
}
/*left side menu callout text css snippet*/
.pa-callout-left {
font-size: 10px;
margin-right: 4px;
position: relative;
top: -10px;
margin-bottom: 13px;
color: #ffffff;
background-color: #e03574;
padding: 3px 4px;
border-radius: 3px;
}
/*right side menu callout text css snippet*/
.pa-callout-right {
font-size: 10px;
margin-left: 4px;
position: relative;
top: -10px;
margin-bottom: 13px;
color: #ffffff;
background-color: #e03574;
padding: 3px 4px;
border-radius: 3px;
}
OPTIONAL EXTRA:
/*the bounce effect*/
@keyframes bouncing {
0% {top: -6px;}
100% {top: -10px;}
}
.pa-callout-right (REPLACE -right WITH -inline OR -left AS NEEDED) { animation: bouncing .8s cubic-bezier(0.1,0.05,0.05,1) 0s infinite alternate both;
}
Parallax on mobile
Parallax scrolling does not work on mobile devices by default. In order to get it working, the code opposite needs to be added to Theme Options > Integration > <head>
NOTE: The parallax option in use on the page needs to be ‘True Parallax’ NOT ‘CSS Parallax for this to work. On desktop, True Parallax can be very jumpy, so it may be necessary to create a mobile-only version for this.
The code
<script>
jQuery(document).ready(function($) {
// Mobile device check
$is_mobile_device = null !== navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/);
if ($is_mobile_device) {
// Function to check if an element is in the Viewport
isInViewport = function(elem) {
elementTop = elem.offset().top, elementBottom = elementTop + elem.outerHeight(), viewportTop = $(window).scrollTop(), viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
// Apply Parallax transform calculations when scrolling
$(window).scroll(function() {
$(“.et_parallax_bg”).each(function() {
var $this_parent = $(this).parent();
// Check if the parent element is on-screen
var $is_visible = isInViewport($this_parent);
if ($is_visible) {
element_top = $this_parent.offset().top,
parallaxHeight = $(this).parent(“.et_pb_fullscreen”).length && $(window).height() > $this_parent.innerHeight() ? $(window).height() : $this_parent.innerHeight(),
bg_height = .3 * $(window).height() + parallaxHeight,
main_position = “translate(0, ” + .3 * ($(window).scrollTop() + $(window).height() – element_top) + “px)”;
$(this).css({height: bg_height,”-webkit-transform”: main_position,”-moz-transform”: main_position,”-ms-transform”: main_position,transform: main_position});
}
});
});
}
});
</script>
Disable right click
Some sites may wish to disable the right click option on its site in order to stop people right clicking on images and stealing them. The below code can be added at Theme Options > Integrations > <head>
Each section disable right clicking on different content types – only use the code necessary (eg, if you only want to disable on images, only paste in the first section).
The code
// Disables right clicking for images only
jQuery(function(){
jQuery( “img” ).contextmenu(function() {
alert( “Here is your custom alert for user” ); // this line can be deleted if you don’t’ want alert to be displayed
return false;
});
});
// Disables right clicking for body element
jQuery(function(){
jQuery( “body” ).contextmenu(function() {
alert( “Here is your custom alert for user” ); // this line can be deleted if you don’t’ want alert to be displayed
return false;
});
});
// Disables right clicking for paragraphs only
jQuery(function(){
jQuery( “p” ).contextmenu(function() {
alert( “Here is your custom alert for user” ); // this line can be deleted if you don’t’ want alert to be displayed
return false;
});
});
Off-centre text highlight
Wrap the wording you’re looking to highlight with <span class=”pa-color-highlight”> and then add the following under Divi > Theme Customiser > Additional CSS:
/*Offset colour highlight for headers*/
.pa-color-highlight {
text-decoration: none;
box-shadow: inset 0 -.5em 0 rgba(178,224,30,1);
color: inherit;
padding-top:13px;
padding-right:10px;
margin-bottom:50px;
}
If different colours are needed, make the code in the <span> tags something like .pa-color-highlight-blue, .pa-color-highlight-yellow etc, and reuse the above code snipper with the classes changed accordingly.
Highlighting bold text
If you want the bold text to have a colour behind for extra emphasis, go into the Section Settings > Advanced > CSS ID & Classes > Class and add .pa-bold-highlight.
Then add the below to Divi > Theme Customiser > Additional CSS:
/*add highlight around bold text*/
.pa-bold-highlight p strong, h2 strong {
padding: 0 5px;
background-color: rgba(178,224,30,0.5);
}
If different colours are needed, make the code in the Section something like .pa-bold-highlight-blue, .pa-bold-highlight-yellow etc, and reuse the above code snipper with the classes changed accordingly.
Add to Cart buttons in WooCommerce
To add a button to products, copy and paste the following code into the functions.php file. Remember you click Update File when complete. Make sure that you add the code before the closing ?> tag.
/* Display Add to cart button on archives */
add_action(‘woocommerce_after_shop_loop_item_title’, ‘woocommerce_template_loop_add_to_cart’, 10);