How to Randomize Items in Modules/Rows/Sections

Example below:  Refresh the page to see the order change.

for Written Instructions, Scroll Down

 

Name Goes Here

Name Goes Here

Position

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Call to Action Module

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Random Script

Paste the Script below into a “Code” module on your page.  This script is Javascript.

The only thing you need to change is where the script says “.four” — which you can name anything you want, as long as there are no spaces and it starts with a “.”

Then go to the Row or Section that you want randomized (everything in it will be randomized); go to the Advanced tab: CSS ID and Classes: CSS Class.  Enter your new class name here:  for ex: “four” without the “.”

(CSS ID’s and Classes are what web pages use to identify a particular element or elements)

That should randomize everything in that row or section each time the page is refreshed.

<script src=”https://code.jquery.com/jquery-3.5.1.min.js”

integrity=”sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=”

crossorigin=”anonymous”>

</script>

<script>$(function() {
$(“.four”).html($(“.four”).children().sort(function() { return 0.5 – Math.random() }));
});

</script>

1111111111111111111

1111111111111111111

2222222222222222222

3333333333333333333

4444444444444444444

5555555555555555555

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

%

Your Title Goes Here

Share This