Astra Theme Container Layouts

A container is an area where we display the content. In general, the container encloses the whole page.

The content area and the sidebar are parts of the container. The content area is technically called the primary container, whereas the sidebar is the secondary container.

You can apply container layouts globally for the entire website through the Customizer option at Appearance > Customizer > Global > Container.

Different containers can be applied for individual pages and posts from the meta settings. These are page-specific settings that have higher priority than customizer settings.

Container Layouts

Astra offers three types of Container Layout. These are global containers that will be applied to the entire website. But you can set different containers’ layouts for different post types with Dedicated Container Layout. To have more control over container layout on each page, you can refer to page meta settings.

All container layout types are explained in the following links –

• Normal
• Narrow Width
• Full Width

Normal Container

The “Normal” layout offers a default container width of 1200px. This versatile option provides a balanced width for most websites, allowing for optimal content presentation. It serves as a go-to choice for many users seeking a standard layout with a broad range of compatibility.

Narrow Container:

The “Narrow” layout, with a default container width of 750px, is ideal for websites that favor a more compact design or have limited content to display. This option provides a sleek and focused appearance, ensuring efficient use of screen real estate.

Fullwidth Container:

The “Fullwidth” layout is designed for those seeking a more immersive and spacious feel. With a default container width set to 100% of the screen, this option allows your website’s content to stretch seamlessly across the entire width of the browser window. It offers a visually impactful experience for users.

Container Style

With the container layouts, you can also choose a container style to display the content in the Unboxed or Boxed view. There are two container styles available for Normal and Narrow container layouts.

The container styles are not applicable for the Full Width Container layout.

Container Width

Content will be displayed within this width. You can try width in combination with container layout to create different views. By default, this is set to 1200px and applicable for the normal container layouts.

The width of the container depends on the Site Layout settings. Site Layout is a premium module of Astra Pro that allows more control over the website layout.

Narrow Container Width

A narrow container width slider is available in Astra Version 4.0.0 or higher, specifically for the Narrow Width Container Layout, called “Narrow Container Width”. This will adjust the narrow container width for Single Blog Posts, Blog Archives & Pages.

The width set globally via the “Narrow Container Width” slider control will apply to the content width across Single Blog Posts, Blog Archives & Pages (provided those post types are set to Narrow Width Layout). By default, the Narrow Width Container will have a value of 750px, with a range of 400px to 1000px.

Dedicated Container Layout

The above 3 types of container layouts are separately available for all the post types. That means if you choose the default layout as Narrow, and for Archives you choose the Full Width option, then the entire site, except archive pages, will have the Normal layout while Archive pages will have the Full Width layout.

You can access these dedicated container layout settings from Customize > Post Types.

• Single Page Layout – For only pages
• Single Post Layout – For single blog posts
• Blog/Archive Layout – All archives
• Search Page – For the search page
• Custom Post Types – For all other supported post types

Astra has integration with a few popular plugins. When those plugins are installed you will get dedicated container layout options for those plugin pages too. Below is the list of plugins that has integration with Astra –

• WooCommerce
• LifterLMS
• LearnDash
• EDD (Easy Digital Downloads)

Check this doc to learn more about the page layout setup.

Meta Settings:

In the global settings, you can choose a layout option that will apply to your whole website. It’s like setting a default layout for all the pages.

But if you want to change the layout for a specific page, you can do that in the page settings. The page settings have more importance than the global settings. This means that if you set the layout to be full-width in the global settings, but then set it to be narrow in the page settings, the narrow layout will be used for that page.

So, just remember that the page settings have more power and can override the global settings. This allows you to have different layouts for different pages if you want.

To change the meta settings of a page, once you edit the page, click on the Astra Icon in the top right corner, which will open the Astra settings. You can choose the container layouts based on your requirement from here.

Combining Sidebar Style with Container Style and Layout:

To create visually appealing pages and posts, you can combine the Sidebar Style option with the Container Style and Sidebar Layout options. For example, you can select the “Normal” layout, set the “Container Style” to “Boxed,” and choose the “Unboxed” style for the sidebar. This combination allows for creative customization possibilities.

Important: The sidebar appears only for the Normal Layout. If you’re using Narrow or Full Width Container layouts, the sidebar will not appear.

Conclusion

In conclusion, the Astra theme’s container layouts have been revamped to offer a wide range of customizable options, significantly improving the user experience. With intuitive interfaces, seamless integration with page builders and plugins, and a focus on user-centric design, Astra empowers website creators to effortlessly build captivating and successful websites. Embrace the revamped options, enjoy the enhanced user experience, and unlock the full potential of your website with Astra.