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.
Table of Contents
Let’s Talk CSS and
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 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.
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
(7), it would count out the loops until it reaches the seventh loop, and play the CSS and so forth.
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
(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.
Go to Divi > Theme Options > Custom CSS
Paste the Code below in the Custom CSS Box
Add a Code Module
Paste the Code below in the Code Box between opening and closing
All done! Now repeat after me…
: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.