How do I place widgets next to each other in a column?

Introduction

In order to place elements (widgets) next to each other, horizontally, within the same column, a setting in the Advanced Tab > Width properties is used. This setting is called Inline (auto).

Note: If the Container element is activated you will use the Direction > Row property in the Layout tab of the Container instead of the widgets Inline (auto) property.

What is Inline Positioning

When the Width > Inline (auto) setting is applied, each widget will only take up the minimum width necessary to hold it. The elements will then align horizontally within their column.

How To Use Inline Positioning

Applying Inline settings to widgets

Note: To horizontally align multiple widgets, each widget needs to be defined as Inline(auto) separately.

Example Of Inline Width Setting
Applying the inline width property to widgets.

Under any Widget > Advanced > Layout locate the Width property dropdown. Here is where you will find the Inline (auto) setting.

  1. Width: Set to Inline (auto) for each widget in the horizontal stack.
  2. Margin: This may be used to create small spaces between the elements. To set a relative space between elements you will use the Column Layout properties below

Applying Horizontal Align to the parent column

Example of the column horizontal align property
Using the horizontal align properties of a column to distribute widgets.

In order to distribute the elements within the column on their primary axis, you will use the Horizontal Align property in the Layout tab of the Column. This property uses Flex CSS properties and is later expanded in the Container element.

  1. Under the Column > Layout set your desired Horizontal Alignment. Choose between: Start, Center, End, Space between, Space Around, and Space Evenly. 

Example of Flex Properties

Below is an infographic of the Horizontal Align properties. It is based on the accepted Flex CSS terms.

Infographic of horizontal align flex properties.
Infographic of horizontal align flex properties.

Note: Some elements may not function correctly when set to Inline (auto) e.g. Image Carousel, Slides etc.

在社交網絡上分享它

今天開始使用Elemenor

加入數百萬專業人士,使用Elementor更快、更好地構建WordPress網站

本頁內容