Panel Content Blocks

Whether you're looking to showcase text and images side by side, organize content dynamically, or group related information for easy navigation, blocks like Split Sections, Overlap Panels, and Panels provide powerful tools to design effective layouts.

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

1. Split Sections

Split sections are a versatile way to present text and images side by side, creating visually impactful and mobile-friendly layouts.
‍

Steps to Set Up a Split Section:

1. Add a Split Section Block:
   • Start by creating a split section and adding placeholder text and images.
   • Without an image, the section structure might look incomplete, so it's recommended to upload an image right away.
2. Apply a Theme:
   • Since split sections run full width, add a theme from the settings to ensure the section has a background tint. For example:
     • Use a light theme for subtle differentiation.
     • Adjust colours based on your design needs.
3. Customise Settings:
   • Adjust the image position (left or right) and section depth for added impact.
   • Experiment with block-level effects to refine the design.

Split sections stack seamlessly on mobile devices, ensuring a consistent user experience.

2. Overlap Panels

Overlap panels offer a dynamic way to present alternating content blocks with visually alternating listings.

Key Features:

• Alternating layout for panel listings.
• Suitable for presenting step-by-step guides, processes, or featured content.

How to Set Up Overlap Panels:

1. Add the Overlap Panel Block:
   • Start by adding a container for overlap panels.
2. Customise Content:
   • Add text, images, or other content blocks within each panel.
   • Alternate designs to make the content visually distinct.
3. Adjust Panel Settings:
   • Use settings to tweak the layout and effects, ensuring it fits the page design.

Overlap panels are excellent for breaking up dense content while keeping it engaging and easy to navigate.

3. Panels

Panels provide a structured way to group and display related content in expandable or collapsible sections. This is particularly useful for FAQs, step-by-step guides, or detailed product descriptions.

Steps to Set Up Panels:

1. Add a Panel Block:
   • Create a panel container to hold your content.
2. Organize Content:
   • Add sub-content blocks within each panel (e.g., text, images, or forms).
   • Customise each block to match the desired structure.
3. Customise Panel Settings:
   • Adjust settings for each panel to:
     • Enable or disable expansion.
     • Set themes or visual effects for individual panels.
4. Theme and Layout Options:
   • Use the settings menu to apply themes or adjust block-level effects for visual variety.
     ‍

Panels provide a user-friendly way to display structured content, ensuring accessibility and a smooth user experience on all devices.

By combining split sections, overlap panels, and panels effectively, LOOP allows for flexible, visually appealing layouts that enhance user engagement across devices. If you have any questions or need further assistance, feel free to reach out to the team!

‍