How To Create Ful-Width & Full-Height Page Sections in Elementor WordPress Plugin For Free?

In today's video tutorial we'll learn how to setup the fill-width and full-height content section in your WordPress website for free, in a simple, fast and effective method using Elementor website builder plugin.

To set up a full-width and full-height page section in Elementor, you can follow these steps: Install and activate the Elementor plugin on your WordPress site if you haven't already.

Create a new page or edit an existing one using Elementor. Add a new section to your page by clicking the "Add New Section" button in Elementor's content area.

In the section settings panel on the left-hand side, go to the "Layout" tab.

Set the "Stretch Section" option to "Yes." This will make the section stretch to the full width of the browser window.

Scroll down to the "Style" tab in the section settings panel. In the "Style" tab, adjust the section's height to make it full height. There are two methods you can use:

a. Fixed Height: If you want to set a specific height for the section, enter the desired value in the "Min Height" field. For example, you can enter "100vh" to make it 100% of the viewport height. This will make the section full height on all devices.

b. Flexible Height: If you want the section to dynamically adjust its height based on the content, leave the "Min Height" field empty. Elementor will automatically calculate the height based on the content inside the section.

Customize the section's content, add widgets, images, text, etc., as per your requirements. Adjust the content inside the section to fit properly within the full-height section. You can use Elementor's column and widget settings to control the layout and spacing.

Click the "Update" button to save the changes to your page. By following these steps, you will set up a full-width and full-height page section using the Elementor WordPress plugin.

I hope you guys enjoy this video, feel free to use the comments section below in case you have any questions, and don't forget to check out that Visualmodo website and subscribe to our channel for more web design and development training videos. Please check the links below for more content.

[Mia_Bella]

I love that they change the layout of Elementor like i change my underwear.

Theres no such thing as a) "SECTION" everything is a container, b) a "Stretch Section" Button.

[zerobambiro]

Have fun doing this with a containern now

[lazymeowing]

When I click on the Section to edit it, I don't have all those styling options... I have width and min. height, and then just something with Direction and Gaps. Why are all these options missing for me?

[unicorp]

Exellent content and guide, thanks for the teach

[mohamedelmorabit]

On new update Elementor Container i don't have this button please Help

[donaldudumah]

I can't find the stretch section in my elementor

[mtgfovi]

The strech button isn't available with the latest wordpress version, I'm using elementor and astra theme so still unable to make it full width. Also followed your other video of inactive flexbox container, but I don't want to do that for the benefits flexbox gives.

[Danixyz]

Best tips but it work only for a section it did'nt edit the full home page

[gvgjhkq]

why is it that the settings u have i dont have? is it cuz of the update?

[attilavarga]

Hi! I don’t see the stretch selection option. Where is the mistake? 😭