Building Blocks

Blocks are self-contained, reusable components that contain a specific set of content. These blocks can be combined and arranged to construct the overall structure of your website pages.

Each collection type - Home, Pages, Breedings and Articles uses the hero section to introduce the web page. Then you can utilize the Blocks field to build the rest of the web page.

Different block types

1. Accordion: The accordion block allows you to create collapsible content sections. This is useful when you have content that needs to be presented in a structured and space-efficient manner, allowing users to expand and collapse sections to access more details. For example, a Frequently Asked Questions section.

2. Articles List: The articles list block enables you to display a list of articles from the Articles collection. This is handy for showcasing multiple articles in a section, such as Featured Articles or Latest News (shows latest three articles).

3. Banner: By placing the Banner block between different sections of content, it can serve as a visual break, helping to separate distinct parts of the page and enhance the overall layout.

4. Breedings List: Similar to the articles list, the breedings list block allows you to showcase a list of breedings or litters, enabling users to browse through available options.

5. Form: The form block allows you to create online forms, such as a contact form or puppy application form.

6. Gallery: The gallery block lets you create visually appealing image galleries. You can display multiple images in a grid format, making it ideal for showcasing photos, product images, or portfolio items.

7. Image and Text: The image and text block allows you to combine an image and text in a flexible layout. This block is perfect for presenting content with supporting visuals.

8. Individuals List: The individuals list block enables you to showcase a list of individual profiles. For example Featured Pugs.

9. Rich Text: The rich text block provides a flexible content area where you can add formatted text.

10. Testimonials List: The testimonials list block allows you to display customer reviews or client testimonials in an attractive format.

11. Video: The video block lets you embed one video from platforms like YouTube or Vimeo.

By combining and reordering these blocks, along with the design and layout options available, you can create unique and visually appealing web pages tailored to your specific needs.

Create and add a block

1. Click on the "Create New" button within the Blocks field to initiate the process of adding a new block to the page.

2. After clicking "Create New," you'll be presented with a list of available block types. Choose the specific type of block you want to add to the page. Choose from the options - Accordion, Articles List, Banner, Gallery, Image and Text, Individuals List, Rich Text, Testimonials List, or Video.

3. Once you've selected the block type, complete the block fields from the drawer. The fields will vary depending on the chosen block type.

4. After filling in the necessary information in the block fields, click the "Save" button to save the block.

5. With the block created and saved, remember to save the entire page to ensure all changes are applied. Click the "Save" button for the page to finalize and publish your changes, making them visible on the live website.

Create and add a banner block

Add an existing block

1. Click on the "Add Existing" button.

2. After clicking "Add Existing," you will be prompted to choose the block type you want to add from the available options.

3. Once you've selected the block type, a list of existing blocks of that type will be displayed in a drawer. Choose the specific block you want to add to the current page.

4. After adding the existing block to the page, make sure to save the entire page to apply the changes.

Add an existing banner block

Reorder blocks

1. Locate the block that you want to move and hover the mouse cursor over it.

2. With the block selected, click and hold the right mouse button (or press and hold the trackpad on a touchpad-equipped device). This action initiates the dragging capability.

3. While holding the right mouse button, move the cursor up or down to drag the block to the desired position within the block list.

4. Once the block is in the desired position, release the right mouse button to drop and place the block at its new location.

5. After reordering the blocks, make sure to save the entire page to apply the changes.

Reorder banner blocks

Remove a block

1. Click on the "X" icon associated with the block you wish to remove. Upon clicking the "X," the block will be marked for deletion and will have a red border around it to indicate that it's selected for removal.

2. After removing the block, make sure to save the entire page to apply the changes.

When you remove a block from a specific page, it doesn't mean that the block is permanently deleted from the system. Instead, it becomes available for reuse later or on other pages within your website.

Remove a block