Astra template setup sidebar with full-width page toggle

in using Astra Theme to create WordPress website, many people will encounter such a need: some pages need to display sidebar (such as the blog listings page), and some pages need to be full-width layout (such as the home page, landing page, or reading mode page).Astra provides a simple way to set up, so that the different pages to display different layouts.

1. Enter Astra Customization Settings

• Log in to the WordPress backend.

• Click [Appearance] in the left menu.

• Click Customize to enter the Astra theme.customizablePanel.

2. Go to Global Settings and find the container

• In the Customization panel, click [Global].

• Inside Global, click [ ].Container(container)]

At this point, you will see the Container Layout settings page, which contains three layout options.

3. Selection of a site-wide default layout

In [Container Layout], follow the icon prompts to select the desired layout:

• Narrow: Narrower content area and more white space on the left and right for pages that require visual focus.
• Normal / Default: The content is medium width and fits most pages, including blog listing pages and post pages.
• Full Width / Stretched layout: Content spread across the width of the browser, commonly used on the home page, Banner,landing pageor read the page without interruptions.

Once you have made your selection, click the [Publish] button at the top of the page to save your settings.

4. Setting up different layouts for individual pages

If you only want to set a different layout for a page than the whole site, you can follow the steps below:

• Go back to the WordPress backend and click [Pages].
• Find the page that needs to be modified and click [Edit] to enter the page.editor (software)The

• In the right-hand [Document] panel, find the Astra SettingsThe

exist Container Layout (Container Layout) in which you can see four layout icons to choose from:

• first: Use the site-wide Customizer Setting.

• second reason: Standard width (Normal), with a fixed width for the content and white space on both sides.

• third: Narrow layout (Narrow), where the content width is narrower than the standard layout.

• fourth: Full Width / Stretched, where the page content is spread across the width.

5. Blog page sidebar settings

If you need to turn it on or off for a blog pagea side-bar (in software)::

• Go back to the [Customize] panel and click [Post Types].

• Select [Blog / Archive(blog/archive)] or [Single Post].

• In the [Sidebar Layout] section, select:
  • no sidebar
  • left sidebar
  • right-hand sidebar

When the settings are complete, click [Publish] to save.

6. Elementor page layout settings

If the page uses the Elementor Editor:

• Select the "Full Width / Stretched" layout in the Page Astra Settings.

• After entering the Elementor editor, set the page layout in [Site Settings] in the upper left corner:
  • Elementor Canvas(completely blank canvas, hide header and footer)
  • Elementor Full Width(content full width, header and footer retained)

7. Summary

Astra provides flexible layout switching methods, which can be standardized in site-wide settings or set up for each page individually to satisfyblog (loanword)The first page, the reading page, the landing page and other different scenarios demand.

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