Content, Text and Tab Sections

The modular Content Block approach ensures flexibility while maintaining a consistent design that aligns with your brand. Blocks can range from simple text sections to more complex layouts, such as tabbed content or interactive elements.

Once you understand how these blocks work, you'll notice a consistent pattern in their setup and editing process. Let’s dive into the basics, starting with the most commonly used block: the Basic Text Section.

(note this is sped up 30% but if you'd like the original that's here on Loom)
‍

Basic Text Section

The Basic Text Section is one of the most versatile and frequently used blocks in LOOP. It provides a "what you see is what you get" (WYSIWYG) editor for adding and formatting text content. This section is ideal for creating paragraphs, headings, bullet lists, and more.

Adding a Basic Text Section

1. Open the Block Editor on your desired page.
2. Select the "Text Section" block.
3. A WYSIWYG editor will appear, allowing you to input and format your content.

Formatting Options

• Headings: Use headings (H1, H2, H3, etc.) to break up your text and make it easier to scan.
• Bullet Points and Lists: Create numbered or bullet lists to organise information clearly.
• Links: Add links by highlighting text and selecting the link icon. Use the built-in page picker for internal links to ensure proper redirects.
• Buttons: Convert links into buttons by selecting the "Button" option after adding a link.
• Styling and Alignment: Adjust text alignment, bold, italicise, or underline text using the toolbar options.

Adding Buttons - the New Way

There's a new icon to add buttons in Rich Text Editors. Take a look at this brief video for details.

‍

Best Practices

• Keep text concise and scannable by using headings and lists.
• Ensure text is mobile-friendly by avoiding long paragraphs.
• Use buttons for key calls-to-action (e.g., "Learn More," "Contact Us").

Tab Section

The Tab Section is a block designed to organise related content into tabs, making it easier for users to navigate and access specific information. This is particularly useful for pages with segmented content, such as "How to Get Here" or product details.

Adding a Tab Section

1. Open the Block Editor on your desired page.
2. Select the "Tab Section" block.
3. You’ll be prompted to create individual tabs. For example:
   • Tab 1: "Car"
   • Tab 2: "Train"
   • Tab 3: "Plane"
4. Publish the block to display the tabs.

Adding Content to Tabs

1. Click on a tab to open its content area.
2. Add content blocks within each tab. You can include:
   • Text Sections
   • Images
   • Maps
   • Other blocks (e.g., split sections for layout variety).
3. Publish the page to save your changes.

Customisation Options

• Themes: Apply different themes (e.g., dark mode, seasonal designs) to the tab section for branding consistency.
• Effects: Add visual effects to highlight specific tabs.
• Alias: Use aliases for anchor links to allow users to jump directly to a specific tab.

Best Practices

• Limit the number of tabs to ensure easy navigation.
• Keep tab titles short and descriptive.
• Use tabs for related but distinct content, like FAQs or travel options.

Summary

Blocks in LOOP provide a modular and flexible way to build engaging and visually consistent pages. The Basic Text Section and Tab Section are two foundational blocks that can be combined and customised to create a wide range of layouts.

If you have any questions or need assistance, reach out to the team, and they’ll be happy to help!

‍