FERMÀT’s Module Layouts and Styling Controls let you customize how each module looks and feels, faster, with fewer design bottlenecks. Choose from preset layout options for supported modules, and fine-tune details like padding, alignment, colors, and content visibility directly in the editor.
What's in this guide:
What's Included
This release expands the number of modules that support layout and styling customization in FERMÀT. You can now switch between layout presets and fine-tune visual settings like spacing, backgrounds, and content formatting, all from within the module editor. These controls make it faster to test new formats, align with your brand, and build high-performing pages in just a few clicks.
Note: Module Layouts are currently supported on Lander Modules only. More modules will be added over time.
New Module Layout System
Below, you’ll find a detailed breakdown of what’s included for each module, along with visuals to illustrate the updates:
When you add a module, you’ll be prompted to pick a layout right in the editor. You can preview each option across desktop and mobile views to see how it adapts to different screen sizes.
You can also update the layout at any time, all of your content and styling will stay intact, so you can experiment without starting over.
Hero Header
Feature | Description |
Split Layout | Best for square or portrait images, or when you want to foreground a single creative asset. |
Overlay Layout | Best for wide, landscape images, or when imagery is used as a background behind your headline and CTA. |
Reposition Images | Allows you to set a custom aspect ratio and drag the image within the frame to control the crop. |
Choose from multiple aspect ratios to get the most out of your specific creative asset.
Important: Currently, the repositioning feature is only supported for images added via the Media Library. Repositioning is not yet available for product images synced directly from Shopify.
Shoppable Product Card
Feature | Description |
Standard Layout | Optimized for mobile-first experiences and quick product detail viewing. |
Carousel Layout | Ideal for desktop or when you want to highlight multiple product images side by side. |
Product Grid
Feature | Description |
Classic Grid Layout | Best when you want to show a full collection and scroll depth is not a concern. |
Carousel Layout | Helps you showcase more products while reducing scroll depth. |
Shoppable Image
Feature | Description |
Interactive Hotspots | Mark clickable areas on an image and link them to specific products. |
Customization | Control hotspot colors, product card styling, and other visual settings. |
Flexible Layouts | Leverage all the aspect ratio and container options from the Media module. |