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.

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

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

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.

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.

Sidebar/ Featured Image/ Disable Title

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.

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.

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 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.

Header and Footer Options

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.

Mobile Header Options

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.

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.