Numerical Indexing for Repeated Fields in the Divi Machine Repeater Module





Elevate the organization of your Divi Machine grids with our practical CSS snippet that introduces numerical indexing to each item. This ingenious piece of code automatically numbers your grid items, enhancing the readability and navigability of your content. Perfect for galleries, listings, or any repeated group of fields, the snippet ensures your users can follow along effortlessly. Implement this feature to maintain a sleek and professional appearance on your Divi-powered website, making your content not only more accessible but also more engaging. With this addition, keeping track of items in a dynamic grid layout becomes a breeze, providing a polished look and feel for your Divi Machine elements.

Snippets Demo




This code will display numbers for each increment of a repeater group of fields in Divi Machine.

NOTE: Depending on the structure of your loop layout, you might need to make some changes. This snippet is for a layout or section layout in your Divi library. If you have a row for example, remove .et_pb_section from the selector.

Language: CSS

Where to add: Divi Theme Options

                        /* Set a counter to keep track of the grid items */
.grid-posts {
  counter-reset: dmach-item-counter;

/* Target the first child row of the grid item within .grid-posts to display the counter before it */
.grid-posts > .dmach-grid-item > .et_pb_section > .et_pb_row:nth-child(1)::before {
  /* Increment the counter for each grid item */
  counter-increment: dmach-item-counter;
  /* Display the counter number */
  content: counter(dmach-item-counter) "";
  /* Position the counter at the top left of the grid item */
  position: absolute;
  left: 10px; /* If you want this on the right, change it here */
  top: 10px;
  /* Style the counter with a background, size, and center the text */
  background-color: #fff4e1; /* Light orange background */
  width: 40px; /* Width of the circle */
  height: 40px; /* Height of the circle */
  /* Flexbox properties to center the content */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Make the counter a rounded circle */
  border-radius: 100px;

Related Snippets

Explore more from Divi Engine