Ready to step away from the usual website layouts and explore the wide-open possibilities of a full-width design? With Astra’s Full Width Site Layout feature, it’s now simpler than ever to give your website a captivating look.
Check out the next sections of this document to learn more about using the Full Width Site Layout in Astra.
What is a Full Width Site Layout?
With a full-width layout, your website’s content stretches edge-to-edge across the user’s screen, creating a visually immersive and impactful experience.
Imagine this: your website takes over the entire screen, like a massive, impressive billboard showcasing all your cool stuff. Whether it’s photos, text, or videos, everything expands, creating a bold and memorable impact on your visitors.
What are the Benefits of Full Width Designs
- Enhanced Visual Appeal: Full-width layouts offer a modern and sophisticated look that can instantly grab your visitor’s attention and keep them engaged.
- Focus on Content: By removing distractions like sidebars, you can truly highlight the content and ensure your message resonates with your audience.
- Responsive Design: A full-width layout can be built to adapt seamlessly to different screen sizes, ensuring a positive user experience on all devices.
- Creative Freedom: With the wide-open space of a full-width layout, you have more creative freedom to experiment with typography, imagery, and other design elements.
How to Achieve a Full Width Site Layout with Astra
A website generally has the main wrapper followed by the container.
- The main wrapper consists of header, content, sidebar, and footer โ the entire website;
- And the container is the child wrapper that includes a content & sidebar.
When you select the Full-Width Site Layout, the main wrapper of the website goes edge to edge of the browser. Whereas the content is managed by the container width.
Thus, implementing a full-width layout with Astra is a simple process. Here’s what you need to do:
1. Activate the Pro Addon: The Full Width Site Layout feature is available with the Astra Pro Addon. So, if you haven’t already, install and activate it on your website.
2. Activate Site Layouts Module: Inside the WordPress dashboard, go to the Astra Dashboard, and activate the Site Layouts module within the Astra Pro modules.
3. Access the Site Layout Settings: Navigate to Appearance > Customize > Global > Container in your WordPress dashboard.
4. Choose your Layout: Locate the setting and select “Full Width Widthโ.
5. Customize Further: Astra offers additional options to fine-tune your full-width layout, such as adjusting container layout, content width, and narrow container width.
6. Preview and Publish: With your settings configured, preview your website to see your stunning full-width layout in action. Once satisfied, hit the publish button.
We hope this document has been helpful. If you have any questions, feel free to leave a comment below.
