How to migrate a divi site to a different theme

ACF field for related posts

ACF field for content

Theres a snippet we use for all sites experiencing FOUC which should work just fine on any site. You shouldn’t need this, but in a case where there is an element or subframe which is not being properly called in time, this is a silver bullet to resolve it from my experience.

Paste this to your HEAD code injector or JS file:

    //eliminate fouc hero flashing - https://www.markhendriksen.com/how-to-fix-divi-flashing-unstyled-content-on-page-load/ 
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; });

  • The first line looks for the first element with the tag name “html” from the current page and assigns it to variable “elm”.
  • The second line sets a “display” property of the “elm” variable to “none” which will briefly (split second) hide the entire HTML content of the page.
  • The next line is a DOMContentLoaded event, which will fire when the initial HTML document has been completely loaded and parsed out, without waiting for stylesheets, images, frames, etc. to finish rendering or loading.
  • Inside the event listener, the display property is then set back to “block”, which will make all the HTML content visible again.

Test it on your own site’s before deploying first, of course. I’ve noticed a drastic reduction of any page flickering, font switching and general FOUT just from using this.

ACF field for related posts

ACF field for content

Leave the first comment