UPDATED: April 22nd, 2022

Today we have a quick Code Snippet for you that will allow you to Reverse Loop Layout Columns in Divi Machine. This is another Code Snippet that was inspired by a request that we received from one of our awesome customers, maybe it was you 😉

Basically, we are going to reverse the column order in our loop layout on an interval that we specify. This can mean that we will alternate the order of the columns for every 2nd, 3rd, or 4th loop, and so on, you get to decide! In our example today we will be alternating the column order for every second loop in our Divi Machine Archive Loop module and we’ll be doing all of this with some clever CSS.

Preview:

AFTER

Video Tutorial

Let’s Talk CSS and :nth-child(n)

So like we mentioned, we want every second loop in our archive loop to reverse the order of the columns in that loop. That is heavy usage of the word loop and can get confusing, so definitely check out our support article on What Is The Custom Loop Layout to lift some of the fog on that topic.

To achieve this, we will need to convert every second loop to a flex layout, and then reverse the order by setting the flex-direction property to row-reverse. Sounds easy right? Well, it actually is because all we need here is 4 lines of IQ1000 CSS. But wait? How will my CSS be applied to only every second loop? Say hello to our little friend, Tony Mon:nth-child.

:nth What now? :nth-child‘s formal definition is as a structural pseudo-class which means that it is used to style content as it relates to its parent and sibling elements. Maybe you can now start to see how we would use this to select every second loop on the page and reverse those columns. We are not going to get too much into it for this post, but let me quickly explain How to Reverse Loop Layout Columns in Divi Machine using it.

:nth-child(n) takes an argument (n) which can be used in two ways.

:nth-child(2)

We can replace the (n) with an integer number which will literally count out the loops until it reaches the second loop as used in this example, then apply the relevant CSS to ONLY that loop. If you changed that (2) to (7), it would count out the loops until it reaches the seventh loop, and play the CSS and so forth.

:nth-child(2n)

Now when we prefix the (n) with an integer number, we are telling it to count out the loops until it reaches the second loop, apply the relevant CSS, BUT THEN, it restarts the count and continues to the page applying the CSS to EVERY second loop. Again, if you change the (2n) to (7n), it will apply the CSS to every seventh loop.

Adding the CSS Code

To add the code, we have two options, depending on the scope of where you want the CSS applied.

If we want the code to be applied across our entire site and to all the Divi Machine Archive Loop Modules, then we would add it to the DIvi Theme Options.

Or if we would like it to only be applied to a single page, we would add it to a Code Module on that page.

Entire Site

Go to Divi > Theme Options > Custom CSS

Paste the Code below in the Custom CSS Box

Save

Single Page

Add a Code Module

Paste the Code below in the Code Box between opening and closing <style> tags

Save

Tutorial Update – Reversing Margins

UPDATED: April 22nd, 2022

Sometime you may have margin added to your columns that are uneven, which means that you would need to reverse that uneven margin also. Margin can be added through the margin properties on columns, but also through the gutter between the columns, so you would need to inspect the page to determine whether there is uneven margin applied if you are unsure.

How to inspect the page for uneven margin?

To inspect the page all you need to do is right-click the loop where you want to reverse the columns, then click on inspect.

This will show you something similar to the image below, which is where you will see if margin is applied unevenly, and as you can see here, there is a margin-right of 5.5%.

This means that we need to apply some additional CSS.

Adding the additional CSS

Entire Site

Go to Divi > Theme Options > Custom CSS

Paste the Code below in the Custom CSS Box

Save

Single Page

Add a Code Module

Paste the Code below in the Code Box between opening and closing <style> tags

Save

All done! Now repeat after me…

Conclusion

:nth-child(n) is a super powerful CSS structural pseudo-class that can help you create all sorts of dynamic styles. Today it showed us How to Reverse Loop Layout Columns in Divi Machine, but that is just the beginning. Maybe we’ll look at making some other tutorials using this if you guys liked it 😁

If you don’t yet have a Divi Machine License, definitely check out the Product Page, you’ll see how it is a game-changer for creating more dynamic websites using the power of custom post types and advanced custom fields.