Setup A Full Width Or Boxed Content With Astra Free Theme

Introduction

Welcome to the guide on how to set up a full width or boxed content with the Astra free theme. Astra is a popular WordPress theme that is lightweight, fast, and SEO friendly. It is also highly customizable and comes with a variety of options to help you create the perfect website. In this guide, we will show you how to set up a full width or boxed content with Astra. We will cover how to set up the page layout, how to customize the content width, and how to add a background image or color. We will also provide some tips and tricks to help you get the most out of your Astra theme. So let’s get started!

Setup A Full Width Or Boxed Content With Astra Free Theme

Astra is a free WordPress theme that is designed to be lightweight and fast. It is a great choice for creating a website that looks professional and modern. One of the great features of Astra is the ability to easily set up a full width or boxed content layout. This tutorial will show you how to do this.

Step 1: Install and Activate Astra Theme

The first step is to install and activate the Astra theme. You can do this by going to Appearance > Themes in your WordPress dashboard and clicking the “Add New” button. Search for “Astra” and then click the “Install” button. Once the theme is installed, click the “Activate” button.

Step 2: Set Up Full Width or Boxed Content Layout

Once the Astra theme is activated, you can set up the full width or boxed content layout. To do this, go to Appearance > Customize in your WordPress dashboard. On the left side of the screen, click the “Layout” option. You will then see the “Content Layout” option. Here you can choose between a full width or boxed content layout.

Step 3: Save Your Changes

Once you have chosen the content layout you want, click the “Save & Publish” button at the top of the screen. Your changes will now be applied to your website.

Conclusion

Setting up a full width or boxed content layout with Astra is a simple process. All you need to do is install and activate the theme, go to Appearance > Customize, and choose the content layout you want. Once you have done this, click the “Save & Publish” button and your changes will be applied to your website.

Setup A Full Width Or Boxed Content With Astra Free Theme


Astra Theme

Astra is an efficient, and fully customizable WordPress theme. It is beautiful and fast as well which makes it ideal for blog, business, personal portfolio, and WooCommerce storefront. Being lightweight, it offers great speed for the website. Astra is built with SEO in mind which makes the website rank higher in search engines. With its special features and templates, it is ideal for page builders like Elementor, Divi, Beaver Builder, SiteOrigin, Visual Composer, etc.

Container

A page on a website can be conveniently called a container because a container is an area where we display the content. Simply put, container encompasses the whole page. Whether it is the content area or the sidebar, it will be included in the container. Technically, we call the content area as the primary container, whereas the sidebar is termed as a secondary container.

How to manipulate container layouts on a website?

Using an Astra theme makes it convenient to apply container layouts on the entire website. You can set up the grides with through the Customizer option. This can be found in the Appearance tab: Appearance > Customizer > Global > Container.

  • You can also apply different containers for different pages and posts individually, from meta settings.
  • If you have applied different settings for the overall website, and different settings in meta settings, then the page-specific meta settings will have higher priority than the overall page customizer settings.

Container Width

All the website content, whether graphical or text, will be displayed within this width. You can create a variety of views by combining width with container layout.

1.png

Container Layout

Astra Free Theme offers 4 types of Containers layout. These are global layouts and will be applied to the entire website. If you want a varying layout for different post types, you can do it with dedicated Container Layout.

With the helpd of page ‘meta settings’, you can have more control over container layout of each page.

There are following types of container layouts.

  • Boxed
  • Content Boxed
  • Full Width / Contained
  • Full Width / Stretched
  • Dedicated Container Layout

Dedicated or Specific Layout

The above given four types of container layouts are available for specific post types separately. This means that if you pick a default layout, let’s say Boxed layout, and for Archives you have picked Full Width, then the entire site will have Boxed layout, while Archive pages will have Full Width/Contained layout.

  • Page Layout – For only pages
  • Archives Layout – All archives
  • Blog Post Layout – For blog archive and single blog post pages
2.png

Astra theme offers integration with a lot of popular plugins. These plugins offer integration with Astra:

WooCommerce

EDD (Easy Digital Downloads)

LearnDash

LifterLMS (3)

When the above plugins are installed, you can have access to a dedicated container layout options for those plugin pages too.

The dedicated modules of the Astra Pro Addon plugin provide more advanced options. The dedicated modules of Astra Pro Addon plugin contain these options:

  • The page meta settings have preference over container layout. Meta settings’ priority is higher than the customizer settings.
  • The Site Layout settings decide the width of the container.

Container Layout/Full-Width Layout

The full-width container settings can be manipulated through Customizer Settings found in Docs.

Docs » Customizer Settings » Global » Full Width / Contained – Container Layout

As explained earlier, a website can have two containers; Primary Container and Secondary Container.

Primary Container is the page where the main content appears.

Secondary container makes up the sidebar and various widgets in the sidebar.

With the help of a “Full Width / Contained” layout, you can combine the primary and secondary containers. These containers can then be displayed in a single container for a more tidy appearance. “Full Width / Contained” layout displays content and sidebar side by side in a single container. This container will leave space around the container because it displays in a container width.

The container settings can be changed or altered by going to Appearance and following this path:

Appearance > Customize > Global > Container

4.png

Full Width / Contained layout is ideal for those websites which need a tidy design, without any boxes or grid boundaries. This layout can be set as default through integrations with plugins like WooCommerce, LifterLMS, etc.

Many page builders, such as Visual Composer, require the theme to control the width of containers. For the same reason, they recommend Full Width / Contained layout.

The dedicated modules of Astra Pro Addon plugin offer more styling options.

Content Boxed – Container Layout

Docs » Customizer Settings » Global » Content Boxed – Container Layout

We have discussed earlier that normally a website can have two containers:

Primary Container: where the main content appears

Secondary Container: Consists of sidebar and various different widgets

If you pick the “Content Boxed Layout”, then only the primary container will appear in the boxed format. Whereas, the secondary container will remain on a plain background.

5.png

If you want to make the content area of your website more prominent than the sidebar, then selecting this layout is ideal. Simply put, content Boxed Layout is perfect for the content websites and blogs.

The settings for boxed layout can be found as:

 Appearance > Customize > Global > Container

Moreover, if you want to apply a different container for individual pages, you can do it from meta settings.

  • A content Boxed container can be applied for selected pages or posts, from meta settings.
  • The Site Layout settings decide the width of the container.
  • With the help of Astra Pro Addon plugin, you can change the site background color through Colors & Backgrounds module. However, if you don’t have Astra Pro, then you can also add a background image with Custom CSS.

Features of Astra Free Theme

Astra is undoubtedly the best theme for Elementor. It works great with Elementor, which makes it the best free theme for building websites. Below, we have discussed the features which make Astra the best theme.

Full Width / Stretched Layout

Astra provides a Full Width / Stretched Layout, which is made especially for Elementor. With this layout, Elementor gets the complete control of your layout, freeing you from the trouble of including complicated JavaScript method to extend your rows or sections to full width.

Full-width or stretched.png

With Astra, you can disable sidebar, page title, breadcrumb and featured images quite easily to get a full freedom to design with Elementor. By disabling these features you can have a blank canvas, which allows you to design your website from scratch- just the way you want it. You can even build a custom landing page, disable the header and footer of Astra, so that Elementor enjoys the full control of the page.

Most themes output these features by default, therefore reducing the control of user to design the site.

disable.png

Global Options From Customizer

Astra global options allow you to set your required layout, sidebar and other custom settings that are suitable for Elementor right in the Customizer. The global option is ideal especially if you are building a website where most pages are designed with Elementor.

Again, if you want different settings for individual pages then the global option will be overridden by these individual settings.

Global options.png

Elementor Pro 2.0 Compatible

Astra is one of those few themes that are completely compatible with the Elementor 2.0 Theme Builder. By using Astra and Elementor Pro 2.0 Theme Builder, you can micro-design every aspect of your website. Whether it is selecting a different header, footer, blog templates, or anything else, you can have it your way with these two powerful tools.

elementor.png

Elementor Integration

Astra offers smart integration with Elementor. If you are building a page with Elementor, Astra will automatically set those options that are best for Elementor. This smart integration saves quite a lot of time and energies which you can use on other important things.

Astra offers more than 30 types of headers, and more than 10 types of footers. You can pick whether you want a transparent header or a solid one. You can even build your header from scratch on elementor, as per your custom requirements, with Astra Pro addon.

header footer.png

You can make mobile responsive sites with Astra. Astra provides a convenient solution for mobile responsive menu, which has very easy settings in customizer. This allows you to control and design beautiful mobile menu. You can build the entire menu without any custom code.

mobile header.png

Lightweight & Bloat Free

Astra provides support to Elementor. This means that Astra does not duplicate features offered by elementor. Astra is lightweight and modular theme. It takes care of the cosmetics, such as global colors, typography, and styling and third-party plugin integrations. Whereas, Elementor handles the page building part.

light weight.png
Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Jassweb.com/

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Contact
San Vito Al Tagliamento 33078
Pordenone Italy
Item added to cart.
0 items - 0.00
Open chat
Scan the code
Hello 👋
Can we help you?