Learn how to display directory data on your website using Grigora's powerful Directory Block. This guide will show you how to select your collection, loop through items, and customize how your directory appears on the page for creating visually appealing directories that automatically update as your collection grows.
Setting Up Your Directory Display
Go to your Grigora dashboard and click on "Site Editor" to open the website editing interface. You can choose where to display your directory - create a separate page for directory listings or add to your homepage for prominent display.
Adding the Directory Block
Click "Add Elements" in the left panel and search for "Directory Listing" in the search bar. Drag and drop the directory block into your editor where you want it to display.
Configuring Directory Settings
Right-click on the directory block to open settings and configuration options. Select your collection from the dropdown menu (like "Property Listing" or whichever collection you created). The block will now be connected to your chosen directory collection.
Click on dimension settings and set columns to three (or your preferred number) to create a grid layout where your directory items will display in organized rows and columns.
Creating Directory Item Layout
Click "Add Elements" and search for "Container" to drag the container into your directory block. This container will hold the layout for each individual directory item.
Add an image block into your container and enable dynamic source. The system will automatically detect your directory collection and link the image dynamically to display different images for each item.
Add a text block and enable dynamic source. Select your directory collection from the source dropdown and choose the name field from directory field options. Style the text by changing it to H3 heading and adjusting font size.
Adding Additional Information
Add another text block for additional information like price, description, or other fields. Enable dynamic source and select the specific field you want to display to make your directory items more informative and visually appealing.
Styling and Making Items Clickable
Select the container holding your directory item elements and add borders to create a card-like appearance. Change border colors to match your brand and adjust spacing and padding for better visual hierarchy.
To make directory items clickable, select your container block, navigate to the links section, and toggle the dynamic source. Select your source directory and link field so each item card becomes clickable and takes users to a dedicated detail page.
Publishing Your Directory
Click "Save and Publish" to make your directory live on your website. Your directory will display dynamic content that automatically updates as you add or modify items in your collection, providing visitors with an organized, professional way to browse and discover your directory content.