Add CMS Loops in Sections

CMS loops repeat a layout for each content item. This guide shows how to add a CMS loop to a section, configure its layout, and display post details on each card.

Adding Blog List Block

Open the Grigora site editor and click on "Elements". Search for "Blog List" and drag and drop it into the editor where you want your dynamic content to appear.

Configuring Blog List Settings

Once the Blog list is added, open its settings to customize how your content displays. Set the number of posts according to your requirement. 

You can also adjust offset, order, order by, and apply filters as needed to control which posts appear and in what sequence.

Configuring Pagination

Once you have configured the Blog List settings, you can enable pagination to allow visitors to navigate through multiple pages of blog posts.

Under the Blog List settings, enable the Enable Pagination toggle. Once enabled, pagination controls will automatically appear below the blog list based on the configured limit and offset values.

The pagination numbers are generated automatically according to the number of available blog posts and the configured post limit. You do not need to manually add or configure individual pagination buttons.

Styling and Aligning Pagination

You can customize the appearance and positioning of the pagination controls from the available styling settings.

Under the Size & Space settings, you can control the pagination gap and alignment. The Pagination Gap option lets you adjust the vertical space between the Directory listings and the pagination controls, while the Alignment options allow you to position the pagination controls to the left, center, or right. The Style settings also let you customize the appearance of the pagination by changing the pagination background and pagination text colors, allowing you to match the pagination controls with your website’s overall design.

Creating Column Layout

Scroll down and select "Columns" under Size & Space section to create a column layout for your CMS list. This organizes your content in a grid format that's visually appealing and responsive across devices.

Adding and Linking Inner Section

Add an Inner Section by dragging it from "Elements" and placing it inside the Blog list. 

Link this container dynamically to the CMS post by going to its settings, opening the link section, and toggling on "Dynamic Source". Then select "Current CMS Post". This makes your container clickable and linked to CMS posts dynamically.

Designing the Content Layout

Typically inside a CMS loop, you add elements like the post's featured image, title, date, and excerpt:

Add an image block inside the Inner Section. In its settings under Advanced Image Options, toggle on "Is Image Dynamic" and select "Post Featured Image" as the source to display each post's featured image automatically.

Add a Text block for the post title, turn on the Dynamic toggle next to the structure tag selector, and select Post Title as the source.

Add the post date by dragging it from "Elements" to show when each post was published.

For the post excerpt, add another text block. Toggle on Dynamic next to the structure tag selector, select "Post Summary", and limit the number of words as per your requirement. You can also add a suffix like three dots for a clean, professional look.

Styling and Customization

To remove unwanted link decoration, select the Inner Section and in its settings under "Links," enable "Remove Link Decoration". 

To differentiate each card, add a border to the Inner Section (for example, one pixel solid black) to create clear visual separation between posts.

Using Pre-Built CMS Sections

Click the Add Section button on the existing section to add a new prebuilt CMS section above or below it, depending on where you want to place the section.

Now, a modal will appear. Select Sections from the top menu, then choose Blogs from the available categories to view the pre-built blog section templates. Choose a template you like and click on it to add it to your editor..

Publishing Your CMS Loop

After configuring all elements, save and publish your website. Your CMS loop is now ready and when a user clicks on any card, it will dynamically open that post.