Web Developer Resources by Brian Shim — WordPress, Divi, accessibility, hosting, troubleshooting
All about the Divi Theme, including articles on Divi 5!
If you have a website that uses the CSS parallax effect on background images (i.e., background-attachment:fixed), you might have noticed that those backgrounds get super zoomed in on iOS devices. That’s because on those devices, the background image is expanded to the height of the whole site, rather than the browser window, resulting in the … Read more
One of the most annoying things about the Divi theme is that often, elements of a page shift around upon load and take a few seconds or more to stabilize. This is technically known as Cumulative Layout Shift (CLS), and when this is high, it is red-flagged in Google Search Console, Google Pagespeed Insights, and … Read more
Recently when I tried to migrate a Divi 4 WordPress site to the Divi 5 theme by using the Divi 5 Migrator, the process never finished and the “Migrate” button never showed up. Investigating the Problem Looking in the inspector, I noticed that the admin-ajax.php file was getting 503 errors. Additionally, the migrator worked fine … Read more
Packed with exciting new features, a much faster editing experience, and Elegant Theme’s endorsement to use it on new sites, it might be tempting to use Divi 5 on production sites. But on the other hand, it is still technically an alpha release (not even beta!) and it’s not feature complete. I’ve been playing around … Read more
I had a situation where I wanted to be able to set the background color of a custom post type when displayed as a feed or archive page in Divi. Each post could be a different color as chosen by a custom field of that post. I was using the Divi Machine plugin from Divi … Read more
After migrating a Divi site to production using the All-in-One Migration plugin, I discovered that I was unable to edit any sections, rows, or modules in the Divi editor on the migrated site. In the console, I got the error: The front end of the site was fine. I tried all of the usual tricks, … Read more
Out of the box, the Divi theme mobile menus are not navigable using the tab key, and therefore do not meet accessibility requirements. A quick solution to this is to install the Divi Accessibility plugin, available on GitHub: This works on the default built-in Divi menu. The problem, though is that it doesn’t seem to … Read more
The Divi theme comes with the Elegant Themes Icon Font which contains 360 cool icons. You can use these icons in the Divi Blurb module, but what if you want to use them somewhere else, like in a Text module or Code module, or sidebar? This article shows you how to easily do it. Note, … Read more
Somehow I got in a situation where a page that was supposed to use the WordPress Block Editor got “stuck” and would only allow me to open it with the Divi Builder. When I tried that, it only gave options to start from scratch or a template, which of course I did not do for … Read more
These are some of the most useful plugins for the Divi builder that I’ve seen. They work great with the Divi Theme or Divi Builder Plugin. Divi Accessibility ★ (GitHub) This plugin fixes many of the accessibility problems with Divi, and lets you see where your site is in violation so you can fix others. … Read more
Web Accessibility compliance has become a “must” in today’s world, not only to serve your visitors but also to avoid expensive litigation by accessibility trolls. The Divi Theme/Builder is one of the most popular WordPress frameworks out there, yet, out of the box, it is not accessible, unfortunately. In this article, I’ll give you some … Read more
It’s very common to want to add social icons to a website’s main menu. When using the Divi theme, you can do this by using the Divi Builder to create a custom menu. But, if you’re not already using a custom menu for other reasons, that might be more work than necessary. In this article, … Read more
Out of the box, the Divi Slider Module has many gross accessibility violations. The keyboard control is poor because you can’t see what you’re selecting as you’re tabbing through the navigation controls. And, the dot and arrow navigation symbol contrast can be bad. For an example of an accessible slider, check out W3C’s demo. In … Read more
Divi is one of the most popular drag-and-drop WordPress builder themes out there today. As a long time Divi user myself, I was super excited (and envious) when I learned about some of the killer features of Oxygen, a newer WordPress builder that claims to create fast bloat-free code. After building a couple of sites … Read more
Elegant Themes already has a blog post entitled “How to Add More Columns to Your Divi Builder Posts or Pages” which shows how to add more columns to your Divi theme. Currently, the builder maxes out at 6 columns. The blog article’s method works fine if your modules are all equal height as shown in … Read more
On one of my sites, my Divi contact form worked great on desktop but someone told me it didn’t work on mobile. Sure enough, they were right! On my iPhone, I got this message after submitting the form: “Please refresh the page and try again.” In French, the error is “Veuillez actualiser la page et … Read more
Many people who use the WordPress Divi Accordion Module want it to start out closed by default. Every WordPress client I have who uses the Divi Accordion has asked for it, and there are many people online asking about it. The way it works now is that the first element of the accordion defaults to open, … Read more