Astra Theme Container Layout Optimization: Fully Upgraded Design Options and Flexible Configuration

Astra Theme recently updated with containersopening (chess jargon)options, simplifying the original choices and adding more customization. By offering different layout options, Astra makes it easy for users to create visually stunning, feature-rich website pages on demand.

New container layout options

Astra The previous five container layouts were streamlined into three, which are:

1. Normal (standard width)

• The width of the container is 1200px
• Suitable for most websites, it provides a well-balanced layout effect and is able to display content clearly.

2. Narrow

• The width of the container is 750px
• Ideal for pages with less content or those that require a compact design, delivering a sophisticated, focused visual effect.

3. Fullwidth

• The width of the container is 100%, covering the entire browser window.
• Suitable for visually strong pages that can provide a more expansive display.

Setting the container layout

Container layouts can be set globally orweb pagesettings to adjust:

global setting

• exist Appearance > Customize > Global > Container Select the type of layout that applies to the entire site in Set as Default Layout.

Page Setup

• Each page can also be set up independently of the layout. Page settings take precedence over global settings. For example, if the global setting is a full-width layout, but a page is set to a narrow layout, the final page will have the narrow layout applied.

Modify page settings

• When editing a page, click on the top right corner of the page's Astra icon to access the settings and select the appropriate container layout.

Combined Sidebar Style and Container Layout

Astra allows users to combine container layout anda side-bar (in software)The style is designed. For example:

• Select the "Normal" layout and set the "Container Style" to "Boxed", then set the "Sidebar Style and set "Sidebar Style" to "Unboxed".
• This combination provides great flexibility to adjust the structure and appearance of the page as required.

Full Width Layout (FWL)

The full-width layout aims to provide a more immersive and spacious design. Its container width is 100%The content will seamlessly cover the entire browser window.

Features:

• The entire page content expands to the full width of the browser, making it suitable for pages that need to display content over a large area.
• Provide users with a wider visual experience, suitable for creative websites or websites with outstanding visual effects.

Set the path:

go into WordPress backend, in order to enter:Appearance > Customize > Global > Container

Page Setup and Global Setup:

• existglobal settingChoose a layout in the center for the entire site.
• If you need to apply a different layout for a specific page, you can do so in thePage SetupAdjustments are made in the Page settings have a higher priority, so page settings will override global settings.

While editing a page, click on the top right corner of the page's Astra icon (computing), go to the Settings panel and select the appropriate container layout.

Content Boxed Layout (CBL)

Content boxed layouts are suitable for scenarios where you need to highlight content areas of your website, such as blogs and content-oriented websites.

Features:

• only ifprimary container(Primary Container) is in a boxed format with a fixed width content area.
• Sidebar container(Secondary Container) remains as is, with a solid color background.
• Ideal for pages where you want the content area to be more prominent and the sidebar does not take up the main visual of the page.

Set the path:

go into WordPress backend, in order to enter:Appearance > Customize > Global > Container

Other notes:

• can provideSpecific page or articleSetting up a content boxed layout, through the page'sMeta SettingsMake individual configurations.
• The width of the container depends on theSite Layout Settings, can be adjusted as needed.

If you are using the Astra Pro plug-in, you can also add a new function to the Color & Background Module to find more setting options, such as background color customization. If you don't have the Astra Pro plugin, you can also customize the background color via the customizable CSS Add a background image.

reach a verdict

Astra The theme's container layout optimization opens up more possibilities for website design, from global settings toweb pageWith independent settings, users can choose the right layout for different content display needs. Whether it is a standard, narrow or full-width layout, or even a content boxed layout, Astra offers efficient and flexible design options for sites. With these settings, users can easily achieve visual uniformity and unique web styles.

Related articles

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off