How to Create Tables with Elementor Table Widget. JetElements Tutorial

How to Create Tables with Elementor Table Widget. JetElements Tutorial


Hi everyone. Welcome to this tutorial. In
this video I’ll be showing you how to create a table with the help of Elementor page builder. Now with JetElements plugin for Elementor it is possible to
create tables with Elementor editor. So as you see you can add various types
of content to your tables and you can style them in very different ways, You
can also filter the items in your tables like so. And you can add icons. So now
I’ll show you what theme I’m using in this tutorial. I’m using Monstroid 2 – a
multi-purpose modular Elementor WordPress theme that you can get if you
follow the link in the description and you can also get the JetElements plug-in if
you click the link down below in the description. So now we’re in Elementor
editor and what I need to do is to go to the elements panel and if you already have
JetElements plug-in installed you only need to search for table and the widget
I need will look like this. And I’ll drop it onto this section. And in the content
tab I see these three tabs. And that’s pretty easy to understand how this
module works. You don’t need to know any code, even basic HTML or CSS, nothing,
because everything is done within Elementor with no custom CSS. So what
we’re gonna do is to create a table similar to this one. This one column will
be of a different color so here in the table header tab you can add the
headings for your columns. Let me open one item. You see content, advanced, and
style. In the content tab you can add the title,
and choose whether you want to use an icon or an image for this particular
cell. In the Advanced tab you can set the column span and the width for the column. If you want the width to be set
automatically just live this value as 0. And here in the style tab you can set
the text color and the background color for this particular cell. What I want to
do is to leave the text color as white and set the background color as purple
and then also change the color of these two columns that I have left. So we’re done with the table header. Now
let’s move on to the table body. As you see you’ve got again a number of items
in here. And the start row item only means that with this item you want to
start a new row. So I’ve got three cells in this row and let’s say I want to add
one more row which will be having three items again. So I press add item and here
I got a new item appearing which is named cell and by default the action is
add new cell. But let’s say I want to start a new row instead because if I go
with add new cell it will add one more cell in here but I don’t want this cell
to be here. I want this cell to start from the new row. So I choose start new row
and I can also add the custom style to this particular row. And then I press add
item again and now I will add a new cell and let’s say I will add some text and
we’ll add a new cell in the new row. So I can also add a link, set an image or an
icon and let’s go with the icon this time and select an icon from the list. Like so and you can choose the position for
the icon before or after the text. In the Advanced tab you can set the column and the
row span. And you can also set this particular cell as a table heading. Later
in the cell table you can tweak the gap between the icon and the text. Now if I
want to add some more items in this row I will proceed and create a new item and
then when I’m finished with this row and I want to create a new one, as you
remember, I need to click “add item” and choose start new row in the action
drop-down. Now let me quickly add a couple more rows and we will go on to
the style tab. So I’m ready with the basic setup and now let’s head over to
the style tab and see what styling settings we’ve got for the table
module. So here you can set the general table width, the table alignment, the
column width and the body radius. Let’s go with the border radius as 10 and before we move on let me show that
you’ve got a one more tab in here saying settings. You can enable the sorting
table option. If you click on it you’ll be able to sort your columns like so. And if you toggle the responsive
table option to yes it will allow your table to be scrolled horizontally. Here
you can choose the devices on which this option will work like, on mobile devices,
on tablets and on desktop. So let’s get back to the style tab. Here you can apply the
styles for the table header such as the behavior on normal and on hover. The
typography settings, the color of the text, the background color,
padding, let’s actually add some padding in there so it looks nice. If you want to
apply any border there’s also an option to set the color for the border
and hide the border for a header container, so this border will only be
visible in here, and it will only divide the items in your header. Here are the sightings for the icons,
images and sorting icons, that you can have in your table header. well, I actually don’t have any icons or images in the table header but we do have icons in the
table body. Let’s add padding again. here you see that you can tweak the
typography settings. Set the row color and the row background color and you can also enable this striped row option. This will allow you to set the color for the
even rows. Like so, we can change the background color and the text color. We
can also set the custom link color, set the alignment, and the vertical alignment. Right here are the settings for the
icons and images. We can make the icons a little bigger, increase the gap between
the text and the icon, So here it is. Now you know the basics of
creating tables with Elementor page builder and JetElements plug-in. If you
like the video give it thumbs up, and subscribe to our Channel. And don’t forget to check
the links in the description down below. You can find the links to JetElements
plugin and Monstroid 2 WordPress theme in the description, as I have said before.
Thank you for watching.

5 thoughts on “How to Create Tables with Elementor Table Widget. JetElements Tutorial”

  1. I wish it had a searchable table. Looks great! But without a search bar… it limits everything. I have the Jupiter theme with JetElements, but now I have to find another plugin that will have a searchable table.

Leave a Reply

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