Introduction
You can adjust the container’s styling by navigating to the Advanced tab > Layout section.
To learn about adjusting the container’s size and behavior, click here.
Adjusting Margin and Padding
You can define this element’s margin and padding using the following controls:
Margin
The margin controls the amount of space “outside” the element. You can set the margin in pixels (PX), EM, percentage (% ), and REM.
The margin values are linked to each other by default, to maintain ???. To set individual margin values, click the link icon.
Padding
The padding controls the amount of space “inside” the element. You can set the margin in pixels (PX), EM, percentage (% ), and REM.
The margin values are linked to each other by default. To set individual margin values, click the link icon.
Tip: Learn more about paddings and margins in this helpful guide.
Adjusting Organization Settings
The Organization controls are relevant only for elements that are contained in a flexbox container, meaning to all Elementor widgets except for a parent container. These settings will override the ones defined on the Items section of the parent container.
Align Self
The Align Self setting determines the alignment for the selected item inside the flexible container. This property will override the Align Items setting which is defined for the container.
Order
The Order option allows you to control the position of this element in relation to other contained elements.
- To move the element to the start, click the left icon.
- To move the element to the end, click the right icon.
- To set the element’s position manually, click the ellipsis and enter the place in which you want the element to be placed.
Size
The Size option controls how this element will react to the available space in the container, along the main axis.
- Grow: If the grow property is used, the item will attempt to use the remaining space in the container by growing to fit. The default value is 1.
- Shrink: Similar but in the reverse, if all the items in the container are too large to naturally fit, the Shrink property may be used. The default shrink value is 1.
- Custom: A custom value of each may also be applied to each. For example when you wish one or more elements to occupy a specific amount of the available space when allowed.
Tip: Learn more about the Size property here.
Adjusting Positioning and CSS
Position
This option allows you to select absolute or fixed positioning for your element. If using the absolute or fixed positioning, you may manually enter the numeric X and Y positions in the Horizontal and Vertical Offset scales.
- Default Position – The element is in its natural state, positioned merely by the natural flow of the page. This is the default position of all elements.
- Absolute Position – The element is positioned absolutely to its first positioned parent.
- Fixed Position – Set your widget to have a fixed position and place it in a custom position. The element will stay fixed in that position as the page is scrolled. The element is positioned relative to the user’s viewport.
Tip: The Default Position option is recommended because it’s a quick and simpler way to keep elements responsive.
Z Index
The Z-Index property specifies the stack order of elements. An element with greater stack order will always be in front of an element with a lower stack order (i.e. an element with a Z-index of 10 will be on top of (in front of) an element with a Z-index of 5.
CSS ID
Set a CSS ID for your section. These are used to trigger events or provide anchor links. It is important that you do not add the “#” before the CSS ID in the field.
CSS Classes
Set CSS Classes for your section. These are used when defining CSS rules for your design. It is important that you do not add the “.” before the class in the field.
Example: A class of pink-link could be applied to any element that you have defined in your Custom CSS as .pink-link a {color:#f876f8}.