(2023) Elementor Pro – Basics of How Sections Work

In Elementor Pro, a section, soon to be called a “container”, helps organize and structure your page content. You can think of a section as a building block that holds and arranges different widgets and elements, such as text, images, buttons, and more. A section can contain one or more columns, and you can add various widgets to each column to create your desired layout and design.

Sections are important because they allow you to create a visually appealing and organized layout for your page. With sections, you can divide your content into different columns and arrange them in a away that is easy to read and navigate. This can help improve the user experience and keeps your visitors engaged with your content.

In addition, sections offer a ton of customization options, such as the ability to adjust the height, width and spacing of each section. You can also add background colors, images, videos, overlays, and shape dividers to make your sections stand out more.

Not only are you able to customize each section to your liking, but sections are also fully responsive. Meaning that your sections will adapt to different screen sizes and devices, ensuring that your page always looks great and functions properly.

Overall, sections are a fundamental building block of Elementor Pro’s page builder, allowing you to create complex and dynamic layouts with ease. By using sections effectively, you can create well-structured and visually appealing pages that capture the attention of your visitors.

How To Add Sections in Elementor Pro

Adding sections in Elementor Pro is easy and straightforward. To start, simply click the plus icon located in the page builder toolbar to open up the Add Section panel. From here, you can select from a variety of section types such as one-column, two-columns, and much more. After selecting your desired section type, you’ll be taken to the Elementor editor where you can customize your section as you wish. 

It’s important to keep in mind that the first two options in the section panel are actually directional, meaning any widgets you drag and drop into that section will follow the others. For instance, if you were to choose the first section and add three headings, it would become a top-down list of headings. However, if you chose the second section and added three headings, each one would fall side-by-side, making it a horizontal section. Refer to the image below to understand how directional sections work. 

How Do I Customize My Sections?

Customizing sections in Elementor Pro is a great way to create a unique page layout that grabs your visitors’ attention. With Elementor Pro’s intuitive page builder, customizing sections is an easy task. You can adjust sizes, layouts, backgrounds and much more, creating a page that suits your overall needs and aesthetic preferences. In this tutorial, we will walk you through the steps to customize your Sections in Elementor Pro so you can create pages that leave a lasting impression. Just like every widget, customizing sections is broken down into three parts: Layout, Style and Advanced. We will dive into advanced settings in other tutorials, so, for now let’s take a look at the two main parts for customizing your sections.

Layout:

• Content Width: Content width lets you decide whether you want to adjust the width of your content or the width of the overall section itself. The “Boxed” option is often used when individuals want to adjust the width of the content within the section. On the other hand, “Full Width” is used when you want to adjust the overall section/container width. Keep in mind that the full width option may adjust content. However, you can fix that by using the “Padding” and “Margin” options in the Advanced tab. 
• Width: Depending on which Content Width is chosen, the Width option lets you adjust the width of either the section/container itself or the content inside. It’s important to remember that Boxed will adjust content inside and Full Width will adjust the overall width of the section.
• Min. Height: The “Min. Height” option is self-explanatory. It allows you to set the minimum height of the section/container.
• Direction: The “Direction” option is used to set the overall direction of the content to either row or column. This is handy for when content needs to be displayed left to right, or top to bottom. For example, if you want to add a Heading, Subheading, and Text, the “Column – Vertical” option would be the best route to display this content. Refer to the image below.                         
• Justify Content: The “Justify Content” option determines the spacing between items in the container and the items’ distance form the container’s borders. The justification options for content include, Top, Centered, Bottom, Space Between, Space Around, and Space Evenly.
• Align Items: This option allows you to control how content is aligned within the container. Although, it all depends on the direction your container is set to. If the container’s direction is set to “Row”, then the alignment determines whether the content is set to the top, middle, or bottom of the container. However, if the container’s direction is set to “Column”, then the alignment is set to left, center, or right. 
• Gap Between Elements: The “Gap Between Elements” option is another self-explanatory one, yet when used right it can be a great way to separate content. It lets you determine how much space is between the content within the container. 
• Wrap: This setting allows you to decide whether all items in a row or column will be forced onto one line or whether they overflow to additional rows or columns. The “Wrap” option helps ensures that all content remains within the section’s boundaries. 
• Overflow: This option determines how the Container should manage content when it exceeds the container size. There are three options when it comes to overflow; Default, Hidden and Auto. Default will make your item visible even if it exceeds the container size. Hidden means that only items within the container are visible, anything outside of the container size will be hidden. Lastly, Auto is similar to Hidden, however it adds a scroll bar which enables you to see any items that are hidden within the container. 

Style:

• Background: The “Background” setting lets you customize your background with color, images, gradients, videos and even slideshows. You also have the ability to customize the section for when individuals hover over it, allowing you to add any additional color or gradient.
• Background Overlay: Similar to the Background option, “Background Overlay” allows you to include an additional color or gradient, as well as having the option to adjust colors on hover too. The Background Overlay option is great for when you need to darken up a background image or even add a certain tint of color
• Border: The “Border” option is yet another simple setting. It allows you to add a border to your container, giving you the ability to adjust it’s size, width, color and even the style of the border itself. 
• Shape Divider: “Shape Dividers” are graphic shapes that help separate sections of a page. This option allows you to add decorative shapes to the top or bottom of a section. You can choose from a variety of shapes and will have the ability to adjust the size, position and color of the shape that best fit your website’s design. 

Conclusion:

With Elementor Pro sections/containers, you can adjust the layout, style and overall content of your website with ease. Elementor Pro sections are responsive by default, ensuring your website will look great on all devices and screen sizes. Overall, sections are an essential for all websites and they provide you with the flexibility and customization options needed in order to create your dream website.