A small product photo or a check mark makes a table much quicker to scan than plain text.
The Table widget from The Plus Addons for Elementor can place an image or an icon in any header or body cell, before or after the cell text.
To check the complete feature overview documentation of The Plus Addons for Elementor Table widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free — this works in the free plugin; Pro is not needed.
- Widget to enable: Table, switched on under The Plus Addons > Widgets.
- The images you want to use, uploaded to the Media Library. Give them a title: the widget uses it as the image’s alt text.
How to Add an Image to a Cell
- Add the Table widget and keep Content Table set to Custom.
- Open Table Body and click the cell item you want. Its Action must be Cell Content.
- Go to the ICON / IMAGE tab of the item and set Select to Image.
- Click Choose Image and pick the image. Use Image Resolution to load a smaller file, such as Thumbnail.
For a header cell, open Table Header, pick the cell and use its ICON / IMAGE tab.
How to Add an Icon to a Cell
- On the same ICON / IMAGE tab, set Select to Icon.
- Keep Icon Font on Font Awesome and choose the icon. Icon Color changes the colour of this icon only.
This is the result on the page, with a header icon, product photos and check icons:
Size and Position
Go to Style > Icon / Image Options. The settings apply to every cell of the table.
| Setting | What it does | Default |
|---|---|---|
| Icon Size | Size of the icons | 30 |
| Icon Position | Icon Before or After the text | Before |
| Icon Spacing | Space between icon and text | 10 |
| Image Size | Width of the images, in px | 30 |
| Image Position | Image Before or After the text | Before |
| Image Spacing | Space between image and text | 10 |
| Border Radius | Rounds the corners of the images | — |
How It Behaves
- Images are shown 30 px wide until you change Image Size, whatever file size you choose in Image Resolution.
- The image’s title in the Media Library becomes its alt and title text.
- Per-cell icons and images belong to the Custom source. Tables filled from CSV File, Google Sheet, Plus Form or SQL Query have no per-cell icons or images.
Limitations
- Icons can be invisible. The Font Awesome icons use the older Font Awesome 4 icon classes, and the widget does not load that icon font. On our test page the icons took up no space and showed nothing until Font Awesome was loaded by something else on the page.
- Icons Mind icons need The Plus Addons for Elementor Pro.
- Size and position are set once for the whole table, not per cell.
Troubleshooting
My icon does not show on the page
The Font Awesome 4 icon font is not loaded on that page. Check the page on the front end; if other widgets on the page load Font Awesome the icon appears. An image of the icon is a reliable alternative.
My image is tiny
Raise Image Size in Style > Icon / Image Options. The default is 30 px.
