Tearing your hair out trying to work out why your pages aren’t full width in your WordPress (Astra + Elementor) websites, even though all the settings are right? Here’s a simple fix.
For my WordPress website builds, my preferred theme is Astra, combined with the Elementor page builder. For most design tasks, the two work very well together, and I’m familiar enough with them now that I have no desire to change.
However, even though it has not been admitted by either Astra or Elementor as far as I’m aware, there seems to be a bug whereby webpages will not stretch to full-width, despite all of the correct settings being turned on in both the Astra theme settings and the Elementor page settings.
This issue has impacted several of my websites, and after hours exploring the issue, I am pretty sure it is something weird to do with the Astra theme placing width constraints on containers, that prevent it from stretching the full width of the page.
I am sick of people saying “it’s in the settings” as though I’m a numpty. I have checked and tried every setting multiple times, and hence my belief this is an actual bug.
If you’ve come to this post thinking the same thing, then here’s a solution, that will get your pages to full width reliably and quickly.
When Does the Astra Full Width Issue Happen?
I’ve noticed that the issue happens most commonly after:
Swapping theme to Astra, from a different WordPress theme
Every time I have tried to swap a WordPress website from a different theme over to Astra, the full width page setting never works properly on existing pages. I don’t know why, it just doesn’t. I have tried re-installing WordPress and the issue persists.
Tinkering with the Single Page settings in Astra settings
Just now, on the website where I finally found a solution to this full width issue, I had my homepage page built perfectly and sitting full width just how I liked it. The home page was built with Elementor, and the page template in the post settings set to ‘Elementor Full Width’.
Then I decided to tinker with the Single Page settings in the Astra settings, for the purpose of styling my About and Contact page. Lo and behold, after saving it, suddenly my homepage was no longer properly full width, even after I reverted the settings back to how they were.
How to Fix Full Width Not Working in Astra Elementor
Double Check the Full Width Settings
Mostly to appease those people who seem hell-bent in telling us that we’ve simply set the Settings incorrectly, and that’s all there is to it… here are the settings you should check first. I know, you’ve probably already checked them about 12 times, but doesn’t hurt to check one final time.
Here are the official guides on how to do that:
How to Set Full Width in Astra theme
How to Set Full Width in Elementor page builder
If full width is still not working, then here’s the workaround solution.
Stop Using Elementor Full Width
Yes, you heard that right.
Pretty unintuitive, but you need to stop using the Elementor Full Width page template. Why?
The Elementor Full Width page template builds your Elementor blocks within the constraints of the content area, between the header and footer. If there is a bug in the Astra full width settings, that means Astra could very well be setting the container width to something narrower than the 100% full width that it should be. Therefore, although Elementor would be happy to go to full width, Astra is preventing it from doing so, because it has constrained the width of the content area.
Admittedly, I haven’t looked into the code to confirm that fact. But I do know that when I stopped using Elementor Full Width – the problem disappeared.
Instead, Use Elementor Canvas
With Elementor Canvas, all of the content on the page is wiped and replaced with whatever you build in Elementor. Therefore, it will not be constrained by the width of Astra’s containers, which I suspect is causing the full-width page issue.
You set the template in the WordPress Post itself, not in Elementor. In the right hand menu settings, there is a dropdown for ‘Template’.
Before you switch the template, you need to understand the main differences between the two:
| Template | Differences |
|---|---|
| Elementor Full Width | Retains the header & footer. Only the page content between the header and footer is created. |
| Elementor Canvas | Does not retain the header & footer. The entire page is replaced by whatever you build on this Elementor page. Global header & footer will not be visible. |
If you go ahead and turn on Elementor Canvas in your WordPress page settings under ‘Template’, and hit Save, you will see that the page content is now properly 100% full width…. but your header and footer are missing.
Good… Astra-Elementor full width issue solved.
But now we’ve got a header/footer issue to deal with.
But that’s ok, because you can add the header and footer manually. You can do this in both the Elementor Pro and Elementor Free quickly, with no or minimal rebuilding.
Elementor Pro
If you’re using the paid version of Elementor, then you will add the header and footer via the templates element in the Elementor Page Builder.
For this, I am going to assume that you have built and saved your header and footer as a template (with or without the theme builder tool). To check, go to Templates and click ‘All’, to view all your templates. You should have a header and footer template there.
In which case, you have two methods by which you can insert the template. Inserting via import is a little bit quicker.
Insert Template Via Widget:
- Go to the Elementor Editor for the page you’re working on (eg home page)
- Scroll to the bottom.
- Add a new Flexbox container (1 column)
- In the container Layout settings, set the Content Width to ‘Full Width’
- In the container Advanced settings, set all Margins and Padding to “0”
- Inside the container, hit the “+” symbol to add a Widget
- Search for Widget ‘Template’ and search/choose your Elementor Header template.
- Move the entire container/widget to the top of the page, where the header belongs.
Then, repeat steps 3-7 to create the Footer, the same way.
Insert Template Via Import:
- Go to the Elementor Editor for the page you’re working on (eg home page)
- Scroll to the bottom.
- Hit the Folder icon in the middle of the page (next to the ‘+’ icon) – see image.
- Hit ‘My Templates’.
- Next to the Template for your Header, hit ‘Insert’.
- Move the entire container/widget to the top of the page, where the header belongs.
Then, repeat steps 3-8 to create the Footer, the same way.
Save the page, and it’s done! Full width, with header and footer, just how you like it.
If you somehow managed to build your website with Elementor Pro without creating a template for the header and footer, then you will need to create those templates first. The instructions for Elementor Free will show you how to do it without rebuilding them from scratch.
Elementor Free
If you’re using the free version of Elementor, then there are a couple of ways to do it.
In this case, I’m going to give you instructions for the free Elementor Header & Footer Builder plugin, because I am familiar with it.
To do this, you’re going to save your Header and Footer as a .json template, and then reimport the template into the Elementor Editor for the page you’re working on (eg home page).
This is what you do:
Step 1: Save Your Header & Footer Templates (.json files)
- Go to Elementor Header & Footer Builder, select your Header, and Edit in Elementor.
- Select the entire container with the header in it. If your header is made up of separate containers, you will want to put them all in one container, first.
- Above the selected container, right click the icon with 6 dots – see image.
- Select ‘Save as Template’.
- Name Your Template (eg Header), then Save.
- Save the template to your computer (.json file)
If you get the ‘An Error Occurred’ message, just ignore it. In my experience, it still saves as normal.
Step 2: Import the Header & Footer templates into your Elementor page
- Go to the Elementor Editor for the page you’re working on (eg home page)
- Scroll to the bottom.
- Hit the Folder icon in the middle of the page (next to the ‘+’ icon) – see image.
- Hit ‘My Templates’.
- In the list, find the Template you just created*
- Next to the Template, hit ‘Insert’.
- If it asks you “Apply the settings of this Container too?” select DON’T APPLY (if you select do apply, it can mess with other elements on the page).
- Move the entire container/widget to the top of the page, where the header belongs.
Then, repeat steps 2-8 to create the Footer, the same way.
Save the page, and it’s done! Full width, with header and footer, just how you like it.
*Template is not in the list?
If for some reason your template doesn’t appear in the list, import it like this:
- In the top right corner, hit the Up arrow (Import)
- Find the .json file you saved in Step 1, then hit ‘Open’.
- If prompted, hit ‘Continue’ and ‘Enable and Import’.
- Now your template will imported and show up in the list.
Other Free Methods
If you’re not using the free Elementor Header & Footer Builder plugin, then another straightforward way is to simply have the Elementor Editor for your Header/Footer and the Elementor Editor for your page (eg home page) open at the same time, in separate tabs in your browser.
Then, just copy and paste the container from the original, to the page and position it where it should go.
You may need to place it in a new container – if so, just make sure to remove the margin & padding on the container, so there is no white space around it.
Final Thoughts in Full Width Not Working in Astra Elementor
Even though I learnt how to write HTML and CSS code, and how to build websites from scratch while I was studying at university, I love building websites in WordPress.
They are easy, quick to build meaning less time for you and less cost for the client, and you get to focus on the more fun aspects like visual branding and in my opinion more important aspects like SEO, marketing and UX rather than coding. Also, a good theme and page builder like Astra and Elementor are guaranteed to be great on mobile, which is essential in this age of mobile devices.
But the drawback is bugs. Theme and page builders and plugins don’t always play nicely together, and this is one of those times. Fortunately, after some trial and error, I found that the solution to the full width not working in Astra and Elementor is actually pretty straightforward, as long as you don’t have too many pages affected by it. These instructions are ok if it’s only a few pages affected, or just your homepage, but for a large number of pages it is cumbersome and you may need a tech to help.
Either way, I hope you’ve found this post useful. If you need help with a website build – you can check out my current prices and contact me.
Cheers,
Ayla Marika