The Lookbook template offers a full-height, side-to-side browsing experience that feels modern and editorial. Each slide takes over the screen with rich visuals and interactive features that prompt users to discover more as they move through the layout.
Here’s how to set it up and customize it for your content:
What is theLookbook Template?
The Lookbook template is a visually immersive experience that presents full-height, horizontally sliding content designed for storytelling, product showcases, or editorial-style layouts:
- Full-Height Sliding Flow: Each slide fills the entire viewport and moves horizontally, creating a smooth, magazine-like browsing experience ideal for high-impact visuals.
- Integrated Interactive Elements: Slides can include a variety of built-in interactions; such as tabs, accordions, reveals, a short quiz, and auto-sliding image galleries to encourage exploration and keep users engaged throughout the journey.
- Clean, Immersive Layout: Visuals, text, and interactive components are organized in a spacious, full-screen design that highlights your content while maintaining clarity and focus.
- Conversion-Driven Ending: The final slide features a lightbox that opens a form, allowing you to collect leads or guide users toward a specific call to action.
Step-by-Step Guide to Using the Template
Replacing background images
- In the Creative Studio, select the element:
- You can change the colour of the background using Microthemes or adding your custom colour:
- Under the Styles section, open the Background section. Click on the background image to open the editing window:
- Click on the top right link to reselect the image:
- After the image selection, add a transparency to your image, for this example it’s going to be set at 40% and click on “Apply”, the blue button on the bottom right:
Adjusting the Flow
- The images slider is a Flow element with auto-play enabled. You can adjust an array of things with it, first let’s select the Flow element:
- On the right side the interface has changed, opening the Settings tab:
- Once Auto-Play is enabled you can adjust for how long between each Flow Step change in seconds:
- There’s also the option of the Auto-Play stopping on Navigation, when the user clicks on the navigation arrows, the Auto-Play stops.
The Reveal settings
- You can change how the reveals behave either on hover or clicking. First let’s select the element:
- Upon clicking on it, you’ll notice the Settings tab opens as well. Here you can change variables, for more information on the Reveals you can read the article here.
- Open the Design tab, under Micro-Themes click on the Others tab and from the dropdown, click on Reveal. These settings act in the transition from Reveal Trigger to Reveal Container, we suggest playing around with them to find the one you like the most.
Test and Publish
Before publishing, preview your Lookbook on all device sizes to confirm slides display at full height, horizontal navigation works correctly, and interactive modules: quiz, accordion, tabs, reveals, gallery, and the final lightbox, function as expected. Replace sample content with your final assets, verify that the animations render properly, and test the form submission inside the lightbox. Once everything is validated, tag all interactive elements, publish the Lookbook as a standalone experience or embed it on your website to deliver an immersive, high-engagement visual journey.
