Panel Content Blocks

Whether you're looking to showcase text and images side by side, organise 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.

1. Add a Split Section Block: Create a split section and add placeholder text and images. Upload an image right away to ensure the structure looks complete.
2. Apply a Theme: Since split sections run full width, add a theme from settings to ensure a background tint.
3. Customise Settings: Adjust the image position (left or right) and section depth. Experiment with block-level effects to refine the design.

Split sections stack seamlessly on mobile devices.

2. Overlap Panels

Overlap panels offer a dynamic way to present alternating content blocks with visually alternating listings. Suitable for step-by-step guides, processes, or featured content.

1. Add the Overlap Panel Block container.
2. Add text, images, or other content blocks within each panel, alternating designs to make content visually distinct.
3. Use settings to tweak the layout and effects.

3. Panels

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

1. Create a panel container.
2. Add sub-content blocks within each panel (text, images, forms).
3. Adjust settings to enable/disable expansion and set themes or visual effects.

By combining split sections, overlap panels, and panels effectively, LOOP allows for flexible, visually appealing layouts that enhance user engagement across devices.

4. Panel Sliders

We've added some new options to the Panels block, making it easy to give your pages a more modern look and add a bit of movement. You'll find them by clicking the cog on the panel block (or Settings), then going to Config.

• Image aspect ratio: You can now change the shape of your panel images. Deeper images (such as square) look more modern and work especially well on mobile.
• Carousel option: Tick the box to turn your panels into a carousel. You can also switch on autoplay to bring some movement to the page.
• Full width layout: By default, panels sit within the central column of the page. Full width runs them edge to edge, for an immersive, Netflix style listing.
• Container aligned layout: Content lines up with the page column, then runs off the side of the screen. Another Netflix style option.
• Items per row: You can still choose how many panels show in a row. On mobile, everything condenses down to a single column.

Tip: Add enough panels (six works well) so the carousel has something to scroll through. If you stack several full width rows, it's best to leave autoplay off.

Created by Neil Lewin, Modified on Tue, 6 Oct at 3:22 PM by Neil Lewin