Divi Development Notes

A series of notes by NPM as an aide-memoire for a variety of tips, tricks & code used in Divi Development to improve the appearance & effectiveness of the design

Google Review Slider

To setup the plugin, follow the instructions within the plugin. You will need an active Google My Business account (to get a Place_ID) containing reviews and a Google API Key. To get a Google API key you will need an active billing account associated with your API Key, but effectively this is free as a result of the FREE monthly allowance Googles permits.

Once setup, retrieve reviews and the plugin will fetch the five most helpful reviews (in Googles opinion). We can use this data to get the presentation of the slider right for your site, via CSS. For example, I have added the following: …. read seperate PDF

The MS Excel PHP TimeStamp Calculator refered to in the attached PDF is avaiable to download here

 

Equalize Blog Grid Height

This script equalizes the height of the blog grids in the Divi Blog Module. Place the below code in Divi |  Theme Options | Integration | Add code to the < head > of your blog.

In the Blog Module, apply the ‘Class Name’ of ‘npm-grid’ (Blog Settings | Advanced | CSS ID & Classes | CSS Class).

<script>
/* Equalizes the height of blog grid. Apply class name of npm-grid to blog module */
(function ($) {
$(document).ready(function () {

$( window ).resize(function() {
$(“.npm-grid”).each(function(){
equalise_articles($(this));
});
});

$(“.npm-grid”).each(function(){
var blog = $(this);
equalise_articles($(this));

var observer = new MutationObserver(function (mutations) {
equalise_articles(blog);
});

var config = { subtree: true, childList: true };
observer.observe(blog[0], config);
});

function equalise_articles(blog){
var articles = blog.find(“article”);

var heights = [];

articles.each(function(){
var height = 0;
//height += $(this).outerHeight() – $(this).height();
height += $(this).find(“.et_pb_image_container”).outerHeight(true);
height += $(this).find(“.entry-title”).outerHeight(true);
height += $(this).find(“.post-meta”).outerHeight(true);
height += $(this).find(“.post-content”).outerHeight(true);
heights.push(height);
});

var max_height = Math.max.apply(Math,heights);

articles.each(function(){
$(this).height(max_height);
});
}

$(document).ajaxComplete(function(){
$(“.npm-grid”).imagesLoaded().then(function(){
console.log(“images loaded”);
$(“.npm-grid”).each(function(){
equalise_articles($(this));
});
});
});

$.fn.imagesLoaded = function () {
var $imgs = this.find(‘img[src!=””]’);
if (!$imgs.length) {return $.Deferred().resolve().promise();}
var dfds = [];
$imgs.each(function(){
var dfd = $.Deferred();
dfds.push(dfd);
var img = new Image();
img.onload = function(){dfd.resolve();}
img.onerror = function(){dfd.resolve();}
img.src = this.src;

});
return $.when.apply($,dfds);
}

});
})(jQuery);
</script>

 

Zoom on Mobile

The code below allows mobile browsers to Zoom to enlarge fonts/images etc. Place the below code in Divi |  Theme Options | Integration | Add code to the < head > of your blog.

The Maximum level of zoom can be controlled by setting the ‘maximum-scale=2.0’ to a value of your choice.

<!– Allows zooming on mobile. Change maximum-scale to limit zoom level. –>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1″ />

Popup for Divi - Don't show for 24 hours

Popups are a great way to show information, but repeated popups become very annoying. Here is an article that explains how to delay ‘Popups for Divi’ by 1 day.

 https://divimode.com/how-to-display-a-popup-only-once-per-day/#

Other useful articles to at: https://divimode.com/category/tutorials/

 

Animated Text Link

Though CSS, we can create an animated underline on hover to text links e.g.

Hover here to see animation

To your style.css in child theme, add:

/* START Animated link line.
Add a CSS Class of “animline” to link e.g. <a class=”animline” href=”/shop”>online shop</a>
See https://letswp.io/link-underline-animation/
*/
a.animline, a.animline:visited {
text-decoration: none;
background-image:
linear-gradient(
transparent 2px,
#00E507 2px, /* animated line color on hover */
#00E507 4px, /* animated line color on hover*/
transparent 4px
),
linear-gradient(
transparent 2px,
#B99F38 2px, /* line color */
#B99F38 4px, /* line color */
transparent 4px
);
background-size: 0% 6px, 100% 6px;
background-position: 0 bottom, 0 bottom;
transition: background-size 0.8s ease-in-out; /* transition line speed on hover*/
background-repeat: no-repeat;
padding-bottom: 4px;
border-bottom: 6px solid transparent;
}
a.animline:hover {
background-size: 100% 6px;
}
@supports (-ms-ime-align:auto) {
a.animline, a.animline:visited {
background-image:
linear-gradient(#00E507, #00E507), /* animated line color on hover */
linear-gradient(#B99F38, #B99F38); /* line color */
background-size: 0% 2px, 100% 2px;
padding-bottom: 2px;
}
a.animline:hover {
background-size: 100% 2px;
}
}
/* END animated line */

In a text module, add a CSS Class of “animline” to a link in the text editor (not visual editor) e.g. <a class=”animline” href=”/contact”>Contact Page</a>

Change the colours of the Line, Hovered Line and Transition Speed as indicated in the code comments

For a full explanation, see: https://letswp.io/link-underline-animation/

 

Current Year in Footer

It looks professional to have the current year included in the footer for things like ‘Copyright 2021’. In Divi, this is a two stage process:

1) create a shortcode with code in ‘functions.php’

2) edit the footer code and include the shortcode in ‘footer.php’

1) To create the shortcode for YEAR, copy the code below to functions.php

// Display current year – Used in footer to generate current year (see footer.php)
function year_shortcode() {
$year = date_i18n(‘Y’);
return $year; } add_shortcode
(
‘year’, ‘year_shortcode’);

The above generates a ‘Year’ shortcode e.g. 2021 or whatever the current year is, but additionally, various other shortcodes can be created as indicated below. Being a shortcode, these can be used anywhere within your posts/pages in the normal way.

Code in functions.php Short Code Result
//Display current month
function monthyear_shortcode () {

$monthyear = date_i18n (‘F Y’);
return $monthyear;
}
add_shortcode (‘monthyear’, ‘monthyear_shortcode’);
[month] March
//Display current date as YYYY-MM-DD
function yyyymmdd_shortcode () {
$yyyymmdd = date_i18n (‘y-m-d’); return $ yyyymmdd;
}
add_shortcode (‘yyyymmdd’, ‘yyyymmdd_shortcode’);
[yyyymmdd] 2021-03-16
//Display current month and year
function monthyear_shortcode () {

$ monthyear = date_i18n (‘F Y’);
return $ monthyear;
}
add_shortcode (‘monthyear’, ‘monthyear_shortcode’);
[monthyear] March 2021
//Display current day
function day_shortcode () {

$ day = date_i18n (‘F Y’);
return $ day;
}
add_shortcode (‘day’, ‘day_shortcode’);
[day] Tuesday

2) Now we have the year shortcode, we can insert this into the footer. But first we need to have the footer.php file accesable from the child-theme admin, so in either cPanel File Manager or FTP (Filezilla), copy the footer.php file from Divi theme (/wp-content/theme/Divi/) to the same directory in your child theme (/wp-content/theme/Divi-child/).

Open the footer.php in your child-theme admin (appearance | theme editor | footer.php)and find the code below:

<div class=“container clearfix”>
<?php
if ( false !== et_get_option( ‘show_footer_social_icons’, true ) ) {
get_template_part( ‘includes/social_icons’, ‘footer’ );
}
echo et_get_footer_credits();
</div> <!– .container —>

 

Replace this with the following code:

<div class=”container clearfix”>
<?php
if ( false !== et_get_option( ‘show_footer_social_icons’, true ) ) {
get_template_part( ‘includes/social_icons’, ‘footer’ );
}
?>
<p id=”footer-info”>All rights reserved. &nbsp; Copyright &copy; The Nursery Ltd &nbsp; 2020 – <?php echo do_shortcode
(‘[ year]’);?> </p>

</div> <!– .container –>

This produces a footer of: “All rights reserved.   Copyright © The Nursery Ltd   2020 – 2021

Change the text as required. Note the &nbsp; in the above code adds an additional space and the  &copy; places a copyright symbol after the word copyright. The <?php echo do_shortcode(‘[ year]’);?> is the shortcode function for the current year.

Note: Because the shortcode Year function exists in this child theme, the correct code of [ year] isn’t displaying as code but rather as the result i.e. 2021. Therefore to overcome this, a space has been added between the ‘[‘ and ‘year]’. Please remove this space if you copy the code above.

 

Add Parallax to Mobile

To add a Parallax effect on mobile when scrolling up or down, add the following code to the < head > of your blog in Divi | Theme Options | Integration

<script>
/* Add mobile parallax */
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>

An example of this in action on mobile is on the Home page at the top where the parallax effect can be seen between the Logo and the background.