In this Elementor table tutorial, I’ll show you how to create tables in Elementor that are fully responsive and you’ll be able to search, sort and filter data with images using the Plus Addons.
You’ll be able to add table data with a sort feature, a search feature and images or icons. You’ll as well be able to import a table into your Elementor website.Â
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Elementor Table Tutorial with Images
What You’ll Need
- Elementor (either free or pro).
- Plus Addons for Elementor; go to your Plugins area and search for it then install and activate it.
After activating your plus addons, go to The Plus Settings on your dashboard, in the next window you’ll be able to activate or deactivate any widget, find the Table widget and activate it (01:49), then save your changes.
To Read: Free Elementor Pricing Table Tutorial: Create Pricing Tables using Premium Addons
Create a Table in Elementor
After activating your widget, go to your Pages section ad open up any page where you would like to add a table (02:00)
In your Elementor editor, click (+) to add a new section, then go to your Widgets area and search for the Table widget, drag it to your section (02:26)
Back to your Widgets area, drag the Heading widget and place it above the table.
Under Content > Title, add a title for your table, and align it to the centre under Alignment
(02:58), then under Style > Text colour, choose a colour for your heading.
Select your table then under Content > Table > Content Table, select Custom.
Go to Table Header, under Row, select Action to be Start a new row, then under Cell ID select Action to be Cell Content.
Under Text, rename ID to Camera (or whatever text you prefer).
Go to the Icon/Image option, Select Icon, then on the Icon Library option, select an icon (04:35)
In the next cell: Title 1, under Text add Type (or any other text), then choose an Icon/Image for it.
Repeat these steps and rename the last cell, as well as give it an icon.
Under Style, go down to Icon/Image Options and under Icon Position select After. This will position the icons after the text (05:50)
On the Table Header option, go to Row Text Color and set it to black, Row Background Color to purple with some transparency then set Border Color to purple too but with no transparency, under Alignment, align the heading to the centre (06:49)
Still under Style, go over to the Table Body option to style your content.
Under Text Alignment, set it to centre.
Leave the Row Text Color on default, then set Stripe Rows Color 1 to white and Stripe Rows Color 2 to purple with a tint.
Under Border Type, leave it on Solid, with a Width of 1px on all sides, then set the Color to purple with a light tint (08:45)
Back to the Content option, go to Table Body to add entries to your table.
On the first row, go to Icon/Image and select Image, on the Choose Image option, select ad insert an image from your Media Library.
Go to the Content tab and add your text (09:53), in this case, the name of the camera (EOS Rebel 6), then under Link, paste a link where your visitor will be redirected, for example, a link to Amazon where they can buy this particular camera. On the link settings (âš™), set the link to open in a new window.
On the second cell, enter the type of the camera under Text, then on the Icon/Image option, select Icon, then choose an icon to use.
Under Style, set Icon Color to purple.
On the third cell add the cost, and you can still add the shopping link under Link (10:41)
By default, Plus Addons give you a button in the third cell (11:12), all you have to do is style it up to your preference.
To do this:
Go to Style > Table Body > Button, set the button Text Color to white, then for Background Type select Gradient; add purple for the first Color then red for Second Color.
Under Border Style, select None, then under Border Radius add 15pixels on all sides.
Under Button Padding, add 7pixels to the top and bottom the 10pixels to the left and right (12:18)
Still under Style > Table Body, go to Icon/Image Options and increase Image Size to 100, then update and preview your page.
To add more entries to the table, go back to your editor under Content > Table Body, delete all the sample text in the cells in the second and third rows then update to start anew.
Click Add Item, under Action, select Start New Row.
Add Item again and in the Content tab, add the text for the Camera name ‘EOS 7D’.
In the Icon/Image tab, Select Image then choose an image and insert it from your media library
Add another cell item and add the Type of the camera under Content, then go to Icon/Image tab and Select Icon, then under Icons Font select Icon Minds and add the icon you want.
Add the last cell item and add the Cost of the camera under Content, then on the Link option, Enable the Button option and add your button text, and a link for your web visitor to follow and purchase the camera, and remember to set it to open in a new window (19:24). When you’re done, update and preview.
Add Filterable Features to your Table
Back in your editor under Content, go to Extra Settings, enable the Table Searchable, Table Sortable and Entry Filter Dropdown options, and on the Mobile Responsive option select Swipe Responsive.
Update and preview (21:14)
Now your table should be having a sort feature with a dropdown, and a search feature as well.
Also Read: How the Elementor Kits Library Works
In conclusion
That’s how you can use the Plus Addons to create a filterable and mobile responsive table for your Elementor website, with images, icons, buttons, etc.
For any questions or comments about this or any other tutorial, let me know in the comments section below, and don’t forget to subscribe to my newsletter and youtube channel for more of these tips and tutorials.
