Ask veg box AI...
Knowledge base
How can we help?
All Categories
System & store set-up
Guide to our content blocks

Guide to our content blocks

A quick guide to our content blocks and ideas on how to use them

Last updated on January 2, 2024

💡

Looking for guidance on how to create and build content pages? Link iconHow to build your website content pages – Growing Good | Help Centre.

Guide to the different content blocks

Container blocks

Columns

Adding a column block allows you to:

  • Place content side-by-side
  • Stack content vertically
  • Create structured sections
  • Build responsive layouts

Adding Columns

  1. Once you have selected a Column block to add.
  1. Click + Add column.
  1. Inside the column, click + Add block.
  1. Choose the content block you want to insert.
  1. Add your content.
Notion image
Notion image

Slider Block

What the Slider Block Is Used For

The Slider block allows you to add up to five slides within a single animated container. Users can click the arrows on either side of the content to move between slides.

Sliders are ideal for:

  • Customer quotes or testimonials
  • Full-width images
  • Promotional banners
  • Highlighted messages
      • 💡

      The slider blocks work best when the same content type is added to each slide.

Adding Content to a Slider

Within each slide, you can add:

  • Text blocks
  • Image blocks
  • Banner blocks

To configure a slider:

  1. Add the Slider block.
  1. Click + Add slide
  1. Click + Add block
  1. Use the + icon to add additional slides.
  1. Select the content block type for each slide.
  1. Adjust settings such as:
      • Full width
      • Spacing
      Notion image
      Notion image
      Notion image

Carousel Block

What the Carousel Block Is Used For

The Carousel block allows you to add multiple content blocks within columns that scroll horizontally in an animated slider format.

It is great for:

  • Product showreels
  • Image galleries
  • Featured product selections

You can add content such as:

  • Product cards
  • Images
  • Card blocks
💡

The carousel blocks work best when the same content type is added to each column.

Notion image

Adding Content to a Carousel

  1. Add the Carousel block.
  1. Click + Add item.
  1. Click + Add block within the item.
  1. Choose the content block type.
  1. To add more items, click the existing block and use the + icon on either side.

You can configure:

  • Number of visible items
  • Dots and arrows display
  • Device responsiveness

Text Block

What the Text Block Is Used For

Text blocks allow you to add written content to your pages. They can be used on their own or inside columns.

Formatting options include:

  • Text size and weight
  • Bold, italic, underline, strikethrough, quotation
  • Numbered and bulleted lists
  • Indentation
  • Text alignment
  • Hyperlinks
  • Clear formatting

These function similarly to a word processor.

💡

A note about fonts - when you have chosen specific fonts in your theme settings these apply to the following: Title Fonts - apply to Heading 1-3

Subtitle font - apply to heading 4-6

Normal - default plain text sans serif font (not configurable)

Divider Block

What the Divider Block Is Used For

Divider blocks are visual elements used to separate sections of a page. They improve readability and create visual flow.

Available divider styles include:

  • Waves
  • Layered waves
  • Splatter
  • Brush
  • Peak
  • Diagonal
  • Gradient

Each divider includes different variants that adjust styling and levels.

Notion image

Configuring a Divider

After adding the block:

  1. Select the divider.
  1. Use the right-hand settings panel.
  1. Choose:
      • Divider type
      • Divider variant
      • Background colour
      • Shape colour

You can also invert the shape to move it to the top or bottom of the section.

💡

The divider block colours should be used to connect two sections of a page together - make sure to use the same colours either above or below depending on the divider block to create a seamless look. Adjust the ‘spacing’ to pad out any areas between text and images.

Card Block

What the Card Block Is Used For

Card blocks combine multiple elements into one structured block with a background.

A card typically includes:

  • An image
  • Text
  • A button

They are ideal for:

  • Highlighting products
  • Linking to recipes or events
  • Featuring services

Card styling can be customised in your theme settings.

Notion image

Adding a Card Block

  1. Add the Card block.
  1. Click + Add content.
  1. Select the blocks you want inside the card.
  1. Use the + icon to add blocks above or below.
  1. Click Upload image to add an image.
  1. Adjust image height in settings.

Video Block

What the Video Block Is Used For

The Video block allows you to embed YouTube videos into your page.

This is useful for:

  • Promotional videos
  • Enterprise stories
  • Tutorials
Notion image

Embedding a YouTube Video

  1. Add the Video block.
  1. In YouTube, click Share on your video.
  1. Copy the end of the URL (e.g. Ly5Ji4my0JI).
  1. Paste it into the video field.

The video will automatically embed.

Banner Block

What the Banner Block Is Used For

Banner blocks display an image with content layered on top. The image background is slightly darkened so text and other blocks stand out.

Banners work well for:

  • Page headers
  • Hero sections
  • Promotional links
  • Wide image sections
Notion image

Adding a Banner Block

  1. Add the Banner block.
  1. Click + Add block to banner to add content on top.
  1. Use the + icon to add blocks above or below existing content.
  1. Click Upload image.
  1. Adjust banner height in settings.
      2. 💡
      When adding a banner they work best when set as ‘full width’ so they span the full width of the page. Also setting the spacing between the block and what’s above or below it to ‘none’ . Make sure to select images that work in the dimensions of the banner - images will need to be cropped to the correct dimensions before uploading. Ideal dimensions of banner images: 1200px x 350 px

Image Block

What the Image Block Is Used For

Image blocks allow you to add images to your pages. They can also be placed inside columns to display images side-by-side.

Images help tell your story visually and showcase your products or brand.

💡
Wherever you use images make sure they are not too large in size as this slows down the load speeds of your website. Keep them under 1500 px wide. Images speak volumes on a website so make sure you use high-quality ones wherever you can. When adding images side by side in columns if you want them to be neat and consistent make sure the images are the same dimensions.

Adding an Image

  1. Add the Image block.
  1. Click Drop or Select file.
  1. Upload your image.
💡

💡 Image best practices:

  • Keep images under 1500px wide to maintain fast load speeds.
  • Use high-quality images.
  • When placing images side-by-side, ensure they are the same dimensions for a neat layout.
  • PNG images with transparent backgrounds can work well against coloured sections.

Button Block

What the Button Block Is Used For

Button blocks create clear calls to action.

You can configure:

  • Button label (text shown on the button)
  • URL (where the button links)
  • Variant
  • Colour
  • Size

Buttons work well alongside text or images when you want to direct users to another page.

 

Google Reviews Carousel

What the Block Is Used For

Displays animated Google reviews in a card format.

Each review includes:

  • Reviewer name
  • Review date
  • Star rating
  • Written review

Available variants:

  • Card – Name at top, rating at bottom
  • Testimonial – Rating at top, name at bottom
 

You can change the colour of the review block and add dividers to make it stand out and link to other sections of the page.

Notion image
 
⚠️

To enable the google reviews carousel to work you need to add a Google place ID in your theme settings under ‘general’ . Follow the link beneath the Google place ID field to find your businesses google place ID.

Google Reviews Badge

What the Block Is Used For

Displays your overall Google rating score and total number of reviews.

This provides social proof and builds customer trust.

Notion image

USP Block

What the Block Is Used For

The USP (Unique Selling Point) block allows you to highlight key features of your business.

Each block includes:

  • An icon (searchable by keyword)
  • A title
  • A subtitle

Ideal for showcasing benefits such as:

  • Free delivery
  • Local sourcing
  • Sustainable packaging
      • 💡

      This works best with multiple USP’s in columns - check out our Preset USP block in the ‘presets’ tab. Also work great in a ‘carousel block’ to add animation to the blocks.

Accordion Block

What the Block Is Used For

Accordion blocks allow you to create expandable sections.

Each item includes:

  • A title (e.g. a question)
  • A dropdown area where you can add different blocks to

This is ideal for:

  • FAQ pages
  • Policy explanations
  • Large amounts of structured text
 

HTML Block

What the Block Is Used For

The HTML block allows you to add custom code within the page builder.

This can be used for:

  • Custom newsletter forms
  • Embedded surveys
  • Third-party widgets

The system will validate whether the HTML is permitted before saving.

Notion image
Notion image

Button Group Block

What the Block Is Used For

Button groups allow you to add multiple buttons within a single block.

Buttons can be arranged:

  • Horizontally
  • Vertically
      • Notion image

Adding a Button Group

  1. Add the Button Group block.
  1. Click + Add button.
  1. To add more buttons, select an existing button and click the + icon.
  1. Adjust direction and alignment in the control panel.
 
Notion image
 
 
Did this answer your question?
😞
😐
🤩
Contact Us