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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
A website's headers and footers are essential elements. In most cases, the Header provides navigation…
Two of the most popular WordPress themes on the market are Astra and OceanWP. Professional…
Creating an excellent news website does not necessitate you to become a web designer. We…
The Newspaper theme is one of the most significant WordPress themes designed by tagDiv, an…
When it comes to setting up an online store, WooCommerce is the go-to plugin. It…
A header is generally the first thing a person sees when they visit your website,…
View Comments
Ik heb een vraag over het aanpassen van de container. Die is in de breedte in te stellen. Maar nergens lees ik hoe je de hoogte van de container box (blok) kunt instellen. Bij mijn site is er teveel wit. Ik zou de body tekst dichter op de header willen hebben door het blok waarin deze staat minder hoog te maken.
Hi, there's no setup for height, it's defined by all the page sections content + margins. In your case, I guess it's a problem of margin/padding of your header or first section.