Templates & Page Styles
Page Styles
Overview
Customizing your website’s appearance is a breeze with our versatile page styles. Whether you’re working with pages, projects, posts, or products, you have the flexibility to choose templates for both archive and item pages. This allows you to create a unique look for each blog tag or product category. Let’s dive into the available options:
Split Template
The Split template features a sticky header on the left side, with content displayed on the right. It’s a great choice for a modern, dynamic layout.
Full Template
Opt for the Full template if you prefer a full-width design. With this template, you gain access to additional customization options, including header templates, container sizes, and card templates.
Container Size
Control the width of your content container with ease. Choose from various options: sm (small), md (medium), lg (large), xl (extra-large), full (full-width), or none (no container).
Card Template
Customize the appearance of your content cards by selecting either the grid or flex option. Grid presents a square block with a background image, while flex displays the image above the text for a distinct look.
Hero Template
Tailor your hero section by choosing between an image or plain background.
Hero Surface
Fine-tune your hero section’s appearance further by setting the background color and text color.
Hero Image Opacity
Adjust the opacity of your hero image to enhance text readability. The default value is set at 70%, but you can modify it to suit your needs.
Custom Classes
Personalize each page by adding custom classes to different sections. These can be Tailwind classes or your own custom styles. Here’s how you can apply them:
- Page Class: Add a class to the
**<body>**element. - Hero Class: Add a class to the hero element.
- Content Class: Add a class to the main markdown content of the page.
- Block Class: Add a class to sections within the page builder.
Blog, Shop, Menu & Work Settings
Customize the appearance and functionality of your collections using these settings. For example, if you want to modify your blog’s style, follow these steps:
- Go to SETTINGS > BLOG.
- Here, you can configure the title, description, hero intro, items per page (pagination), add hero buttons, set the page style, featured image, and add tags.
Tags
Tags play a significant role in organizing your content. Each tag also functions as a landing page, allowing you to provide unique titles, descriptions, images, and more. Additionally, you can override the page style for each tag. In the case of a webshop, categories serve a similar purpose instead of tags.
Enhance your website’s visual appeal and functionality with these flexible customization options. Tailor your pages, sections, and content to create a unique online presence that aligns with your brand and vision.
