Elementor widgets are at the core of how a page or post layout is created.
In Elementor, widgets are split into either basic or pro, with basic widgets the more commonly used elements such as text editor and images.
Pro widgets include more advanced elements including forms and galleries.
You can always view the widgets panel by clicking on the widgets icon in the right corner of the Elementor toolbar which will show you the list of active widgets as shown below:
To add a widget to your layout, click on the widget icon and drag and drop it into a column within your layout.
Once added, it can be edited, moved or deleted as required.
Editing Widgets
To edit a widget’s content or style, either click on the widget or right-click and select Edit.
When you click a widget the Elementor toolbar changes to show you the widget’s content allowing you to make changes.
Each widget has the same three tabs that allow you to update specific areas of the widget, as follows:
- Content
- Style
- Advanced
These options are contextual and change depending on the type of the widget.
Content Tab
The content tab displays the content of the widget, for example, if the widget is an image, you be able to view the image and make changes.
Style Tab
The style tab shows you any style options for the widget, for example, you can change alignment, text colour or typography.
Advanced Tab
The advanced tab is used for adding margin and padding spacing and more custom design using CSS. Unless required, this tab is less frequently used for general design and layout.
Note, sections and columns have slightly different tabs.
In the example, we have selected a text editor and we can edit the text content or make changes to the font style and colour in the style tab.
Each widget has different options in these three tabs related to the widget selected.
Frequently Used Widgets
When designing or editing layouts, there are certain widgets that are used to create the core layout.
The more frequently used widgets are listed below:
Inner Section
Inner sections can be used within columns to create nested columns, useful for layout and controlling how content is structured.
Heading
The heading widget can be used to create a text title.
Image
Image widgets allow you to add a single image to your layout, adjust size and alignment.
Text Editor
The text editor allows you to add text content to your layout.
Button
Button widgets are useful for linking to pages, posts or media.
