How to Use the ZigZag Snippet
The ZigZag snippet creates a repeating set of content-and-image rows that automatically alternate layout as users scroll. It’s ideal for storytelling, step-by-step overviews, program highlights, or any page where you want visitors to move through multiple sections without a wall of text. Each row includes a WYSIWYG content area (for headings, paragraphs, links, and buttons) plus a single image.
What you can control
Color + style variant
Choose whether the text boxes sit on a white background or a color background. If you choose color, you can also pick a theme and decide whether the overlay is solid or gradient.
Width
Use full-width for a more immersive, page-section feel, or boxed/contained when you want the ZigZag to visually align with other page content.
Rows
Add as many rows as you need. The live page will alternate the image/text placement automatically from row to row.
Buttons and links
Add text links in the WYSIWYG, or add button-style links using either the link tool (with a button class) or the Global Button Styles component.
|
Visual Mode |
Button Style to Use |
|
White mode |
Red Solid / Black Hover |
|
Color mode |
White Transparent / Black Hover |
How to Use This Snippet
Demos
Headline Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus vitae orci eget egestas. Morbi pharetra lobortis turpis, sit amet ultrices lorem aliquet ac. Morbi ut lacinia turpis. Aliquam pharetra dictum libero a lobortis. Vestibulum semper, urna ac placerat fringilla, purus quam suscipit lacus, at efficitur purus diam finibus nisl.
Maecenas condimentum egestas dui id posuere. Donec iaculis maximus tempor. Nunc ut tincidunt felis. Suspendisse eu finibus justo, euismod euismod odio.
Sample Button CTA
