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

If you have ever wanted to create custom elementor tables or import CSV tables with images, icons, Lottie animations, and hyperlinks, that are sortable, searchable, and also responsive, or if you simply want to use your remote tables from Google sheets in Elementor, then this is the table tutorial for you! 

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: Create Custom Elementor Tables Tutorial

What we’re going to cover in this article:

  • How to use custom data tables with images, links, icons, Lottie images
  • How to use CSV imported tables in Elementor
  • How to use links and images in imported tables
  • How to use remote files to import tables into Elementor
  • How to style tables in Elementor

What You’ll Need

For this tutorial, you’re going to need the Pro version of the Premium Addons for Elementor. This is where you’ll find the Table widget that we’re going to use. 

To use the Premium Addons Pro, you should also have the free version. With Premium addons (Pro) you’re able to dynamically link your tables to several resources on your website. 

To install the free version of Premium Addons for Elementor, go to your WordPress dashboard > Plugins, search for Premium Addons, install and activate it.

You should also be having Elementor page builder plugin installed and activated. The free version will do.

1. Create a Table with custom Data Rows and Columns

OgzEM U uWbh2pwN 6mbz6qqJ6U4l3dAbwKsf2YdwqaGg5stoW9RVU 7M4Vp WM43V3XW yah7RKHPyDGrZMyzNR7WJrY3bpt02QtxQOGXwjp0KHPA1TrM i 6c TLT5rdPogZzU

In this section of this tutorial, you’ll be able to create a table with custom added rows and columns; it’ll have images and icons, Lottie animations, links; whereby when you click on a link it takes you to that particular page, it’ll have filters (be searchable), for example, you’ll be able to search for anything within the table, you’ll also be able to choose how many records to display.

Go to Premium Addons for Elementor on your WordPress dashboard, under Widgets and Addons (05:08) find the Table widget and activate it.

8qyRHD1ZB00ZnLYXCTpC508Db zI8bFWsCBSzvKMzYme ZdpYGZCJKfHS7z14dDPqkb4EMlWOWLw2E3TvY2XzztwaakOKFZb354uPk4QVcQrF8NK67oK7 ZOHgpsonKUOhL4D 93
ocvo8oAao9CrCefwydAGUe1o vn9xmNqLe RuJxjGuDiLf99lwfe4IL2Vpz9nOHmWi5NzsWaKBr24LagmFJeHVmZ0w1xzYG8At24yvm2g1U xV4noxZPb0OKYYE SKPxZAb 5H2o

Tip:

To avoid any disturbance with many different widgets running in the background of your site, you can switch off all the other widgets and addons you’re not going to use and leave only the Table widget enabled.

When you’re done enabling the table widget, click the Save Settings button.

Go to your dashboard > Pages and open up any page with Elementor (where you want to add a table), just go to that particular page and click Edit with Elementor (05:53)

T7au tGMDNE2O0BRi2P0jm0Rg1juz9hnLytqarLzOyFRABcMGvLfhBmYZBMdrXQ8qnkafgq1GkyH5O ndK1HqOjO4FGLrav3hqRBLeqddifrVOt5augSl5qhZ5p vMQDwI8b

In your Elementor editor, go to the Widgets area and search for the table widget called Premium Table then drag it to your canvas (06:31)

bcKDVT 3YcZmAK8HNkzYZpRBHK1WmQalXawSzPR6Grys84n7rsUudgVanvOqSoLYxUL6cpFECKOad20rmtOHeoW 1vH2rOtHssu8qmiKzdskLOLblW WkKjvzLXgwWFM5lzbkYWl

Select your table widget, under Content > Data > Data type, select Custom. 

Under Header, add your titles; Name, Position, Company. Use the Add Item option (or duplicate the previous title) and add; Office, Age, Salary.

pY76KsJ uzzyRdgLDEtp35mMPfNysOF gTecjQdHhH86h89LYF8yXN5EPkxnavVTKIXnHGgphOynNRM69TfrcSAUD6Rg9iOmBIv 5OJwlbAYq JiCsZmwSIcjE72Ecak8zUmooz

Click on the header to close it then go to Body;

There are 3 default columns and 3 default rows, click (X) to delete them.

Click the Add Item option, under Type select Row (that’s for the Name). For the first Cell, select the Cell Type to be Body, under Text, type in a name of your choice, under Icon Type select custom image; click on the Upload image option to add an image from your Media Library.

Click on the Add Item button again; this automatically takes you to the Position section, Cell Type is Body and the Text is Personnel Lead (you can use whatever text you want). 

Add another item (that’s for the Company section), then just go to Icon Type and select image, then on the Upload image option select an image for your Library, like a company logo.

Add another item (for the Office section) with Cell Type Body and under Text, type in Edinburgh (or any other country of your choice).

Add another item for Age; Cell Type Body and under Text, type in any age. 

Add the last item for Salary, Cell Type Body, and under Text, add any amount.  And with this, you’re done with the first row of your table (09:41)

lHlz7qXpHy7Ur moyHRiEhz qYq2ZjWNkRLQI9MDEErmURx2aMQOa88xHas6uMojmcg7euXAHV nW1HaWeyE0FjXangAW2OFuU4IItMWQJ0jmOLac5R656Lp6lltP4yKB5Xe7uv9

To create the second row;

Click Add Item, under Type choose Row

Add another item, Type Cell, Cell Type Body and under Text type a name of your choice.

Repeat the above steps and add information under position, company, office, age and salary. 

However, in this row, the image under the Company cell is a Lottie animation. To add this, when you get to the Company, under Icon Type choose Lottie animation instead of custom image. Go to lottiefiles.com, click on the animation you want then copy its URL (). Go back to your dashboard and paste the link under Animation JSON URL

AdQUdHvJqMj7tyeDhkVJabmQGANgfvC2tgtgpCMkvjy6GMHq9kounXlkWcFUzwRtwk17F9pWUXOvOTkgXiQy78NewrkbHCAvvU1RTCx3zqDPx

Under Icon Size, you can increase the size of your Lottie, and under Alignment, you can align your animation to the left, right, or center.

If you want to link your Lottie or your image to another page, you can use the Link option and type in your page URL (the full URL with https://…). 

If you want to link it to an internal page or a page on your website; go to Link and under Link Type select existing page then select a page from the dropdown (12:00).

JuTm3szlMkaP2w8IkRbgQSEXCqV wQI jlGJ7u1HYK1yy6bUztO23hApDeclberznR6fkEHlAU2RSGE4qoHnPgUXkAaZFsSczmNs9EXHFtM D qsJr7C9jCg9Xj4unmK20OQOplJ

After adding your content to the table, the next step is to style it up.

Click on the table widget, in the Edit premium table section on the left, go to Content > Advanced settings, enable the Sortable option, and enable the Search option as well. On the Placeholder option under Search, you can type in what you want to appear in your search box for example “search names, age or salary”. Enable the Show records option too.

Under Style, go to the Search option and under Border Radius, you can either remove or increase it by using the slider, depending on how you want your search box to look. Same with the Records option.

Go to the Head option; under Background color select white, do this for both Odd and Even options (14:36)

nTGmM93DLZbdWeSo1abu5jLRKo BdIiUR3k8l8in4mSHF8hNbph2l1F9LCKVYAFvmctm

To make changes to the rows;

Click on the Rows option, under Style, you can set the Text Color to white (or another of your choice), under Background set it to purple. You can give it some transparency. Remember to do this for both Odd and Even options (15:54)

iZ1OEzgNvpaPiXCXm15PEP0Dy1xzOp Mgxi343Z 25r a iZiXBd3wY6HMvuEwYnpL8VsoZbMB1XvUrCUvUhBmz VjM89fSLp63Qj3codxqvd w3FfV hnHT7zhDAFLbAcBJWQC4

Let’s check out what this table looks like on Mobile;

In your Responsive Mode select the mobile device (16:19)

sow8Q3cph1LVtMCzdTNQtTuoorYCveV BIFK7cyV3LrszelA2gQc 0svIIyeB1W 1kQub buYLMEjMox42 pbAaOAIDWurfbn5pMQFYr 9iMT2Jw1mqGiGTMAvq42aWtlI431Ua9

Select the heading widget, under Style > Typography, reduce the header size.

Select the table widget, go to Content > Display options, enable the Responsive option., this makes the table visible and gives it the horizontal scroll to be able to view all the data.

Under Advanced Settings, you can enable the Sort on mobile feature to be able to sort through the table. 

You can also edit other options like the Padding and others to your preference.

If you want to use an Icon in your table;

Select the table widget and add a new item with Type of Row.

Add another item under this table row with a Type of Cell, Cell Type Body. For Text, type in a name. 

Down on Icon Type select Font Awesome Icon, then on Icon,  you can choose the icon you want, then you can adjust it to your preference using the Icon Size and Spacing options. You can also use the link option to link your icon to any other page (18:54).

create custom elementor tables with images, icons, lottie

Back to the Body option, use Add Item to add the rest of the cell info under Position, Company, Age and Salary. When you’re done, click the Update button.

2. Create Table from CSV (Comma Separated Values)

Create a new section on your page by clicking the (+) icon, then drag the Premium Table widget to your new section (20:20)

kVUB46E9xpX7Gq02ganpTXLcYBlYAfnPX32yUHgWwLkN8ZDwP4k2lyMNTzZ C343wWcLNoLNb IyepSNWlBw8y PTn3vT Incz9ollU0e0CZQOLerhfWQduMyoaFMAe9MIZVeYYU

Select the table widget, under Content > Data, select CSV File for Data Type, on the File Type option select Upload File, on Data Separator, type in a comma (the comma is important here).

Moving on to the Upload CSV File option, first you need to have created a CSV file to upload here.

To create a CSV table, just use your Excel sheet, enter in your data for example a row with Name, Position, Age, and Salary, then add info to the cells (21:12).

Be3sHwxO9xGsdGwu79zk6IvOBZd9nE1yN6ri8Xu3jUGvu2HDMGGtk6xGaVd aMx7q8OCHrJxq6pRvfabxYAn WxbfWoaLPq8T4ur47LINHwv7Ko 4cszbntRCdn4tiJObfr vb3D

Tip:

When you’re entering data into the Salary section (that’s in currency format), be sure NOT to use a comma, if you use a comma, Elementor is going to add another column into your table because the comma is a separator.

After adding your rows and cells with their info, go to File > Save as, give your table a name, then on File format choose .csv, and save (21:48)

GwfHd vvoHbzCEzdZ3VBvEt1PNg 4U2Ldk9Qftn7NJmOw7GU1dOySd270D1x4 OhhT80t3 YmTReOAto4fewjJeMzybRav0lFi0Xmgd4Me

Now when you click on the Upload CSV File option back in your editor, you can go upload your .csv file then insert it from the Media Library.

Under Render first row as, select header.

Go to the Display options, set the Table layout to Auto. 

Enable the Responsive option so that your table is visible on a smaller screen device.

Under Table alignment, you can align your table where you want it.

Go to Advanced Settings, enable Search so that someone can search for specifics in the table. Under Search still, set the Border Radius to 0 pixels. On Placeholder, type in ‘Search anything’ (or whatever text you want your search to show).

Enable the Pagination option as well, here, you can be able to choose how many rows per page to display in your table, set it to 7.

Note:

The CSV imported table provides fewer options than the custom table we previously looked at. For example, the sort and record features aren’t provided.

To style up the table, go to Style, select the Head option, select white for Text color, yellow for Text on hover, then select purple for the Background color.

Do this for both the Odd and Even options (24:42).

lgLtvRxXdhKQmZivO3SXO aK0kqV9O9U7SgMytbhig7bqfLBZh1vtz0Fs1t4yIHk8Ziry2CBQcHvQaR5MnWvvK4K3t0PNokQqVUff15VRNSaJxMkC pr7Som94ovU EOqpUvZGuj

Under Typography, change the font to ‘short stack’.

Go to Rows, set Text color to white on both Odd and Even. 

For the Background color, select purple and add some transparency to it, that’s for the Even option. Over to the Odd option, under Background color give it purple with more transparency (25:52)

bsbeStqW7bE7HSL8u ZJop5KbO9gjEZ1PfqnPX2qpSKIJERXz1n3

To adjust the table width;

Select the table widget, under Content > Display Options, set Table Layout to Fixed, and set the Width to 65% (26:14).

WN3FqtUdDtQ5RyrZEvIBhqIVhl2O2y962Rqti ahWOS2vommqHOdQKF03gAlsynIeIYTB0CmzQTadbQ94TwE9en QHQJYXQY2l3IKtD t Wid9pkR5kUBHVA9t kPyS5WbncA2cm

Go back to Style > Pagination,  set Color to orange and Background color to white. On the Hover option, set the Color to white and the Background color to orange. On Active, set the Color to white and the Background color to purple. When you’re done, click the Update button and then preview (27:01).

hEgFhUztYpz2pNZUfTJ5o4P8kC1hFzFiKhEO6UoDiKSTxoaDbZyBXu8f6ls P0aQm2Q9G1Umz5bfS7QWyrsUOnXkgLRjpRnb f05rZhPzDQJ1cCy7OmFlfsb2JI2TR7SzDyqDaU4

3. Import Tables from CSV with images and links

Back in your editor, add another section then as you did with the previous table, go to your Widgets area and drag the Premium Table widget to your section.

Under Content > Data > Data Type, select the CSV file option, select Upload file for the File Type option and add a comma for the Data Separator.

For this next step, you need to have your CSV file ready. In this case, I have a sort of monthly savings table in excel with Name, Date, Particulars, Balance, Subtotal, and a Total (28:58). 

GHYcNMasAtzvChkFU8DkZGUFOkxw1HfJyvRGCkJ0yEFO 10rSItQJl8xUV251Jt60b96Duptf

But in this table, I also want to add images and links to another site or blog.

To do this:

Add a new row above the total, add a name in the row. To add a corresponding image to the name you need to copy an image URL from an already uploaded image on your WordPress website (29:33).

MQRYufeOHZpVXDQh PBoRRUVTpCE aRL9Rl93mapdVQYfu6EKhp8hrL0KHIw3C2yR NbLwv0c LkXU IO1v9O3FCTRWDy NFpM9g

After copying your image link, paste it into your excel sheet but you have to use the HTML tags to add the image and the website link, as well as the person’s name (30:34)

In the next columns add the date, balance, and the rest of the info. Remember to NOT use any commas or quotations.

J2hyuqIjyfDuh1CfmGQtH3HmrGiblwb7QkDamFnUT60RVegQLxEmeAJ2HZxOeAUfMYgPFuOr nzcA5zmG9GqN

When you’re done go to File > Save as; give the table a name then save as a .csv file.

Tip:

You can also edit this table using a text editor like NotePad.

Back to the Upload CSV file option in your Elementor editor, select the .csv file you’ve just saved and insert it (32:22)

fmA GU3ZKNI7unpWdU z098P52uSNMj8KnEwtfVgykr4O N0UUr5EeLSh14 61FJDs6vSoOlpP2rywY5EAxccZ7 4 ZoHscIo25Nbt35a

Next, let’s do some styling on the table. Under Style, select the Head option; set Text Color to white and Background Color to purple. Do this for bot Odd and Even.

Go to the Columns option;  set the Background color to purple but with transparency, same for the Even option. Set the Text color to white for both Odd and Even column options. Update and preview (34:04).

Wc5VlN8plQ

To add a link to a particular data item; just go to your excel or text editor and make sure you use the HTML link code on that particular cell.

4. Import Remote Data from Google Sheets

This last feature provides you with the option to import data tables from your Google sheets without having to download and import the CSV file. All you have to do is link it to your premium tables widget.

To get this done; first, add a new section and drag the Premium Tables widget to it from your Widgets area. 

Select the table widget, under Content > Data > Data type select CSV File, on File Type select Remote File this time instead of upload file, Data Separator is a comma.

On the File URL option, this is where you paste your link. With a table like this one in your Google sheets (36:16), go to File and select Publish to web, select Entire Document and Comma-separated values, then copy the link.

UwJAAeWeXW0bE3vTdQh4RVKv1Mrsgvq9Y0ZuHZcxmNmg6Y1SWCsvEk1VzSYEHYmhltkFQiuNejwq33qmcr3BLM WYto TkqUcWFYacvUWBOkj3XSK9bJZhReUfVWsdpPdzqDHHwV

Make sure you enable the ‘automatically republish when changes are made’ option; so that whenever you make changes to your table in Google sheets, it automatically updates in Elementor, depending on the time you set on the ‘Refresh cached data’ option.

Paste your URL under the File URL option, and your new table will automatically show (37:06)

0cGbaewRoQMiW7u Q4kOwqsUPqxX3OHvWGSrrowXkWQ2vOvKaUyPo3PEPZzF8U VFMRatOvygtoUE5jX1mWq YN7f5XaTbeR P GumSgwqH8xp5D0zpz3uJOXRYt HT9IYOZirY

To style the table;

Select it and go to Style, on the Head option, set the Text color to white, and make the Background transparent, for both the Odd and Even options.

Under Content > Display options, set Table Layout to Fixed, and the Width to 55%

To add a rounded table border, go to Style, select the Table option, select solid for the Border Type, on Color add orange, and for the Border Radius, give it 30 pixels.

Select the Rows option, under Style, set the Text color to black for both Odd and Even. Change the Background color on the Even option to grey.

When you’re done, update and preview (39:32).

kkEEwOIyiWf39WS6HSrg3BxhcfYodXq8FKOaKUqcc4Up6qKr7uokJAHMphErYvz5x0E5AF jS6T bcOqhwEr8o jATiIu97 agILNwlly6hSptu7o6uIAs2LwtUFTiyz3lbdhcT8

To make your table responsive, go to Content > Display options, enable the Responsive option. This way it will add a horizontal scroll when someone is viewing the table on a mobile device.

Closing remarks

That’s how you can create tables in your Elementor with links, images, icons, and Lottie animations using custom tables, CSV tables, and Google sheets with the Premium addons.

Thanks for sticking with me through this tutorial. If you have any questions or comments, let me know in the comments action. Don’t forget to subscribe to my newsletter and youtube channel for more tips and tutorials.

Also Read. . .

Snapchat Device Ban: The Why And The How

Snapchat is one of the quickest and easiest social media platforms used to communicate through photos and videos. Because of its emphasis on security and safety, Snapchat may ban a user’s account due to violations,

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