How to Add Astra Full Width Section

Laptop with Astra full width section

I get lots of questions on how to add an Astra full width section.

So I thought I’d make this quick post to show you how.

This post assumes you are using the Astra WordPress theme with Gutenberg.

While logged into the dashboard, add a new page.

Next, make sure the page setting for content layout is set to Full Width/Stretched.

To do so, click the Astra “A” icon in the editor then choose Full Width/Stretched from the Content Layout dropdown.

Also, if you don’t want a sidebar to appear, make sure No Sidebar is selected.

Decide whether you want to use a Section block or Advanced Columns block (available in Ultimate Addons for Gutenberg plugin).

I really like the Advanced Columns block because it gives you an option for setting a single or multiple columns.

For that reason, it makes it easy to structure a page.

In addition, the Advanced Column block has the ability to add a shape divider, which adds a nice design touch to your site.

However, if you want to use a Section block, keep reading.

Otherwise, skip to Using the Advanced Column Block.

Using Section Block

To use a Section block, switch over to the block editor by clicking the setting gear right next to the Publish button:

Block editor settings button

Add a Section block by clicking the “+” sign:

Type sec in the block editor search bar and click Section:

Choosing Gutenberg Section block

To style the Section block:

  1. Set content width to full width
  2. Set inner width to 100%

And now you have a full width section.

Using Advanced Column Block

If you want to use an Advanced Column block and don’t have Ultimate Addons for Gutenberg plugin installed, now is the time to install and activate it.

Next switch over to the block editor by clicking the setting gear right next to the Publish button:

Block editor settings button

Add an Advanced Columns block by clicking the “+” sign:

Type uag in the block editor search bar and click on Advanced Columns:

Advanced column block

Now we need to style the Advanced Columns block:

  1. Set layout to 1 column
  2. Set container width to custom
  3. Set custom width to 100%
Advanced Columns setting of one column and 100% width

Now you’ll have a full width column in your page.

Video Tutorial

Below is a short video that demos how to add an Astra full width section.

I hope this short tutorial helped you to add an Astra full width section to your page.

Any questions, please post in the comments below!


Related Posts

Print Friendly, PDF & Email

About The Author

Leave a Reply

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Scroll to Top