Elementor Table Tutorial with Images: Create Tables in Elementor (search, sort, and filter)

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.

n1GJsksH44z0SSb21Wi2F8lkHiaMquKVKd2OO2NxYmju R5e0ASvVTTFMicsxTlR wdrHcqDVDlpSGZ JfCuoSK8U kmgNa2PcfMuBzHytqIk1 XbhJZnFQWLDw8fjt9IwJgn5e

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)

e VZ lqFRGnPtcFYo07ZHrBriaPHcLDzsRRIrlCdWjg3 bvfUNeJx1Y5lMvvl5MEzRNCMcOYi4kL6pKf0q6bmFdDuQ53hdSlpdzy4cR1BPGy

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)

uzxBBw0HM2GzdtK59AXRlETxCy1S46sKKiKK JZzuBEzqSXLAigzCb52vhcPLn4CLXLBE7nZjitXjIuhswdGrWCQumu0PbVKur8GhaNVjTDA58cytiqIvh0KsH9dPy sTOtfwb l

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)

D5WynnwPsig4Pdv4NSfdj20BhJ1ZqiviA1eMXoxHnfQiaAKYe1c aS7mdynRTNCO3DiK7MMzu8S AzWq6fj5 IMoaWJmsLmm7EJ BUgtP j9pIHm 4fzzeiTUX GD0sJbc6bfk62

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)

67wBW3hiraPRIuAv sWDWsr8qX65nqg68HdzY5hD0pjmXAjLLnF7eQ ZacYl2N8Y65waC hepvKqJFq8qrja

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)

Gmie6xZ B4X89RgcfwjMQp0td70lZooWEu6JM Cm27odX uGL9jLthVm0wDbzL8 h3G7jPbH5MHY6tR4GF3jYTAGwH5s4La4iLqcp7kbjDoueE mdjAsXytZ448s03b7jW5fsDXr

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)

0kwmgdgMc08ayPTuij7NlEIAaVCqSEmcouOnMeYYrrvgrBUXFPlVOnRxTn7qyz xVd rYuJG0c5t8cne BExV7Y5dzWlUPvA4O 3rZNbi8VQhGxvCZ1ci1urMb4OnlXcCM R wQs

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.

Create Tables In Elementor Tutorial

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.

zk6eVMhz jb1dsUq4Zoi74 QXGhltzAgrtxyAp39Of6da0rQF2c2xIIZC6eeE SXXvWp

On the third cell add the cost, and you can still add the shopping link under Link (10:41)

s7jeQyxyc3FeyMdGOkMn8Fqu7GCto CcqeNuURQLlvrIQrXe2QPs03m

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.

x7g X3xJaiRfJkmmrezaQwFMXRD2i15rJJVfmLnaVF8rqLN MHwH8Ud4fyqKeHG g9RM4RynIAREAz6hmyV4HnEZ2C6Ez8uCB1yOTjfOV8hkmXRstRMKwOh PseUjnPKv0FkVCNy

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)

N7HpAWQzNU1EmfnM17GudAjNXiDUjQaqnt7pYmz7ZAVlNNkHXQFW6FedMWod6INJE8zgG5ezX6aObQ07

Still under Style > Table Body, go to Icon/Image Options and increase Image Size to 100, then update and preview your page.

hn5TYrNgjOrB0HyxFGmCndaH1wnIDHbzyGJpMLXEWnCx2pJeQPzCjsDV8Gy3Z8872dV1 Th9QfoqnFZZJbYb yn8ISWXJBKUFe3K s Y24nSEZnoygQXQUBJkKelYJXhZNYiLRp0

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.

7VINrx0oJuzFuLWpSAGQfpXBX5Jd1CfXW0MCSNAMbpjgQuvq5teYIhzttWHNY d9rA8yzP3olSV3ja94vBEdX

To Read: Create Custom Elementor Tables with Images, Links, Icons and Lotties. Import Tables from CSV and Google Sheets

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.

biBAs89dICbk8c29W0mGph8FEkdu9ygJpwHHul

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users