The Grid Block

The Grid block in WordPress is a versatile tool for creating structured layouts of content such as text, images, and links. Here’s how to add and customise a Grid block on your WordPress site.

Adding a Grid Block

1. Navigate to the Grid Block Section:
   • Start by logging into your WordPress dashboard.
   • From the sidebar menu, select the appropriate post or page where you want to add the grid.
2. Add a New Grid Block:
   • Within the post or page editor, click on the + icon to add a new block.
   • Search for “Grid” and select it from the available block types.

Customising the Grid Block

1. Content Tab:
   • Subheading: You can add an optional subheading that appears above the grid. This can provide context or a brief introduction to the grid content.
   • Text: Enter the primary content for the grid in the provided field.
   • Button: Add a call to action button with a link if needed.
   • Grid Rows: Define how many rows there will be in the grid.
   • Grid Columns: Define how many columns there will be in the grid.
   • Grid Gap: Add a gap between grid items for better spacing.
   • Grid Items: Add grid items consisting of heading, summary, image, background image, and link. Note that a grid item can have either an image or a coloured background.
2. Settings Tab:
   • Section ID: This option allows you to add an ID to the block, which is useful for one-page websites with smooth scrolling links.
   • Container Size: Decide how the grid will display. Options are small, default, and full width.

Example Configuration

• Subheading: Grid Block Example
• Text: “Lorem ipsum dolor sit amet consectetur adipiscing elit rhoncus interdum urna inceptos hendrerit fermentum, libero scelerisque placerat augue tortor metus ullamcorper neque.”
• Button: “Learn More” with a link.
• Grid Rows: Two
• Grid Columns: Three
• Grid Gap: Medium

Grid Items:

1. Heading: Event One
   • Text: “Lorem ipsum dolor sit amet consectetur adipiscing elit nec curae potenti mattis libero.”
   • Image: Add an image of the event.
   • Background Image: Add a coloured background if desired.
   • Link: Add a link to the event page.
2. Heading: Event Two
   • Text: “Lorem ipsum dolor sit amet consectetur adipiscing elit nec curae potenti mattis libero.”
   • Image: Add an image of the event.
   • Background Image: Add a coloured background if desired.
   • Link: Add a link to the event page.
3. Heading: Event Three
   • Text: “Lorem ipsum dolor sit amet consectetur adipiscing elit nec curae potenti mattis libero.”
   • Image: Add an image of the event.
   • Background Image: Add a coloured background if desired.
   • Link: Add a link to the event page.

With these settings, your grid block will create a visually appealing and organised layout of your content, enhancing the user experience on your site.