Divi Development Notes

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

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>

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″ />

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/

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/

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.

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:

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 opening square bracket ‘[‘ and the word ‘year]’. Please remove this space if you copy the code above.

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.

Add the following code to maintenance.php which can be found in …./wp-content/maintenance.php

Change text & images as required.