,

Sections, Columns, Padding and Margins in Elementor

Share This Post

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp

Table of Contents

Elementor Logo

In this WPDesigns guide, we are going to learn very interesting topic which is about sections, columns, padding and margins in Elementor.

Sections

Section on the web should correctly represent your organization and categorize the details that your consumers may need.  A list of potential parts for your website is given below.  Not all of these will work for your company, and some critical categories could be missing—these are just examples of Web site categories to get you started.  We work closely with you to identify the categories that most correctly represent your company type as we construct your platform.  I elementor you will get two different kind of Section. One is normal sections and another is inner section.  Inner section is a section which we can implement under a section. That means it will work as a section branch.  People use sections to split a page into several categories, making it more user-friendly for users.

Sections can be manipulated and styled using the Elementor Panel’s options on the left, or by right-clicking the Section handle and choosing from the context menu that appears.

Section
Example of section
Example Of Sections In Elementor
Example of section in Elementor

Right-Click Options

Right-click on a section handle and select Duplicate from the context menu to duplicate the section. You can also use the Copy and Paste options here to copy and paste a section to another location, or copy and paste only the styling (without the content) from one section to another. To save the section as a template that can be added anywhere later, click Save as Template. When you click Navigator here, it will open the Navigator that is already set to that section. Clicking Delete here, which will remove the section.

If you click Edit Section, the column’s options will appear in the Elementor Panel to the left, and you’ll have access to any of the following options.

Right Click Options Of Section
Right click options of section
Layout Options Of Section
Layout options of section

Layout

Content Width: Set the Content Width to Full Width or Boxed. Use the slider to set your width when selecting Boxed.

Columns Gap:  You can set your Columns Gap here.

Height:  Fit to Screen is your section will take up the entire screen, and the minimum height is set a minimum height and adjust the section height with the slider.

Vertical Align: Here you can set the alignment of content in the section vertically.

Overflow: Choose how to manage content that exceeds the container’s overflow.  The overflow is enabled by default.  To hide the overflowing content, choose Hidden.

Section Stretch: Force the Section to extend to the full width of the page. 

HTML Tag: Give your section an HTML Tag. More information on HTML Tags can be found here.

Style

Background (Normal & Hover)

  • Backgrund Type: Choose from Classic (which allows us to create a background color or picture), Gradient (which allows you to set a color gradient background), Video (which allows you to set a video background), or an image Slideshow (which allows you to set an image Slideshow background). 

 

Background Overlay (Normal & Hover)

  • Background Type: Here you will get two option classic and gradient.
  • Blend Mode: You can set a Blend Mode here.

 

Border (Normal & Hover)

  • Border Type: Here you can set which type of border you want to set.
  • Border Radius: If you want to make the corners rounded you can do it from here.
  • Box Shadow: If you want to add box shadow to your section you can do it from here.

 

Shape Divider (Normal & Hover)

  • Type: Select a style from the dropdown to add shape divider.
  • Color: Pick a color for for the shape.
  • Width: Here you can set the width of your Shape Divider.
  • Height: Set your Shape Divider’s height.
  • Flip: Switch the Shape Divider’s direction.
  • Bring to Front: Force your Shape Divider to be in front of other elements.

 

Typography

Here  you can set the typography colors for the content of the section.

Style Options Of Section
Style options of section
Advanced Option Of Section
Advanced option of section

Advanced

The Advanced tab is full of useful features:

  • Advanced – Options include; margin, padding, z-index, CCS ID and CSS Class.
  • Motion Effects – There are a range of scrolling effects, mouse effects, and you can also choose how the selected element enters the screen, the delay and if it is sticky.
  • Responsive – The responsive options will allow you to hide certain sections or elements on different screen sizes.  This can be useful when redesigning a page for mobile. On certain elements, you can reverse the columns.
  • Attributes – (Pro Feature) You can add custom attributes to the element; you can find a full list here.
  • Custom CSS – (Pro Feature) You can add CSS to the site or the element through this box.  It is best to add the CSS for the element and add the CSS for the global setting site.  You can use “selector” to target the specific element you have open.

Columns

Columns are always contained inside a section. Only horizontally can a column be stacked.  And all of the website’s content is always included inside the column. There is no way to put content within the section. As a result, you’ll always need a column to bring something on. The section, as you can see, is still full screen, but the column is not. This is important because everyone’s screen is different. The section stretches out as the screen becomes larger, but the columns remain the same.

Elementor column width is set to 1140px by default, and sections are as wide as the screen allows. And only the desktop edition would be able to use this width. When it has a fixed width, it provides an ideal arrangement for the website’s content and images, and the content remains in place even when we use a wider screen.

Column
Example of column
Example Of Columns In Elementor
Example of column in Elementor

If you click Edit Column, the column’s options will appear in the Elementor Panel to the left, and you’ll have access to any of the following options.

Layout Options Of Column
Layout options of column

Layout

  • Column Width (%):  You can set the column width here.
  • Vertical Align:  You can set the vertical orientation of your Column Material. This way, you will balance columns of unequal heights by sticking the content of all the columns in a section to the bottom, middle, or “stretch to fill” the content of all the columns in a section to the bottom, middle, or “stretch to fill” the content of all the columns in a section to the bottom, middle, or “stretch to fill” the content of all the columns in a section to the bottom, Choose from top, middle, and bottom, as well as space between, around, and evenly.
  • Horizontal Align: This extends the functionality of inline positioning by allowing you to fit inline widgets in the same row horizontally. Start, center, end, space between, space around, and space evenly are all options.
  • HTML Tag:  You can set the HTML tag for the column here.

Style

Background

Background Type: Here you can choose the type of background like Classic (which lets you choose a background color or picture), Gradient (which lets you choose a color gradient background), or an image Slideshow.

 


 

Background Overlay (This option will available when a background type is selected)

  • Background Type: Here you will get classic and gradient background type.
  • CSS Filters :  Here you can adjust Blur, Brightness, Contrast, and Saturation of the background.
  • Blend Mode:  You can set the  blend mode. You will get different mode here.

 


 

Border

  • Border Type:  You can set the border type here.
  • Border Radius:  If you want to make the border round you can do that from border radius.
  • Box Shadow:  If you want to make shadow around the column you can do that from here easily.

 


 

Typography

Here you can set Heading Color, Text Color, Link Color, Link Hover Color, Text Align.

Style Options Of Column
Style options of column
Advanced Option Of Columns
Advanced option of columns

Advanced

The Advanced tab is full of useful features:

  • Advanced – Options include; margin, padding, z-index, CCS ID and CSS Class.
  • Motion Effects – There are a range of scrolling effects, mouse effects, and you can also choose how the selected element enters the screen, the delay and if it is sticky.
  • Responsive – The responsive options will allow you to hide certain sections or elements on different screen sizes.  This can be useful when redesigning a page for mobile. On certain elements, you can reverse the columns.
  • Attributes – (Pro Feature) You can add custom attributes to the element; you can find a full list here.
  • Custom CSS – (Pro Feature) You can add CSS to the site or the element through this box.  It is best to add the CSS for the element and add the CSS for the global setting site.  You can use “selector” to target the specific element you have open.

Inner Sections

You may need to insert a section into a column with another section if you want to make more complicated layouts in Elementor. A section cannot normally be inserted into another section. You should have an Inner Section in this situation. You may use the Inner Section to build a nested section within a section.  When you put an inner section under a section column, it takes up two columns by default.  So, as you can’t include a section under a section, you may need to use an inner section to make the concept more eye-catching and complex.

By default, it is not possible to add an inner section into an inner section, but there is a trick that allows you to do this.  You can read our article on adding inner sections into inner sections to discover how!

Inner Section
Example of inner section
Example Of Inner Section In Elementor
Example of inner section in Elementor
Margin
Example of margin
Margin Options In Elementor
Example of margin in Elementor

Margin

The area between the border and the next element of your design is known as the margin. Find the area outside the boundary as well as the area between it and the other components. This is the whole of the margin.  We know that content always inside the column.  So, the area outside the element’s boundary is known as the margin.  You can set and adjust the margin for each side of the content, which goes around all four sides.  When you go to the advanced tab of every widget in Elementor that you want to adjust the margin of, you’ll see the options. There are four sides of the margin: top, right, bottom, and left. And you can change it in a variety of units in Elementor, like px, em, percent, and rem. We can create an overlapping effect with margins, which gives the style a very cool look.

Padding

Padding is what makes room inside the element/container.  Padding refers to the additional space inside the content area.  It can expand the whole block, but only from the inside.  Generally, we use padding to make a gap between the container’s edges and the material inside, when we want to extend the content block’s size or build more room inside the border and to increase the content block’s size without increasing the content’s size. As margin, ew can control the padding from four sides top, right, left and bottom which will apppear in every widget under advanced tab.
Padding
Example of padding
Padding Options In Elementor
Example of padding in Elementor

Search

Social Media

Recent Posts

Josh

Typically replies in minutes

Hi there,

Feel free to message me if you have any questions.