Progress Bar is a pro element that is only available in the WP Table Builder pro version.

The progress bar in a table visually represents the completion status or progress of a specific task, project, or process associated with the data in the table.

Adding the Progress Bar is easy. Just drag & drop the Progress Bar Element into the table.

Progress Bar Options

You will get 5 progress bar options to customize your progress bar.

Value

The value allows you to set the static number of your progress bar. By default, the value is 35%.

Bar Thickness

The bar thickness lets you determine the bar thickness.

Primary Color, Secondary Color, & Label Color

The color lets you choose the bar’s label’s color. The Primary color lets you choose the bar color. Finally, the secondary color lets you determine the color for the remaining bar.

Hope you find this little tutorial helpful. Feel free to drop your thoughts in the comment section.

Badges in a table are a visual representation of metadata or specific attributes associated with the data in the table.

They serve various use cases and are commonly used to enhance the presentation and understanding of the data. Badges can be used to categorize or classify data based on certain criteria.

You will see Badges on most pricing pages. That is why WP Table Builder presents you with the Badge, another pro element to make your pricing page stand out from others’ pricing pages.

To add the badge element, you need to drag & drop the badge element into the table.

Badge Options

We present you with simple customization options for customizing the badge, too.

Font Size

You can customize the font size of your badge.

Color & Background Color

Choose any color for your badge’s text that suits your pricing table and website. The Background color lets you determine the badge’s background.

Alignment

The Alignment option helps you determine the position of your badge.

Hope this simple tutorial has helped you understand the Badge element. Feel free to leave your thoughts about the element in the comment section.

The List element is the basic version of the Styled List element. The List element allows you to create simple lists.

Look at the image below to see how you can add lists to your table using WP Table Builder.

Adding the List element is simple, as all you need is to drag & drop the List element into the table.

List Options

To customize the List element, you will get three tabs for List Options: General, Font, and Layout.

General

In the General Tab, you will have the option of List Type.

List Type

The List Type option enables you to choose between two list types: Ordered and Unordered.

List Type: Ordered

If you choose the ordered list type, numbers will be put before each list item.

List Type: Unordered

But if you choose the Unordered list type, you can choose three icons for your Unordered list items: circle, square, and disc.

Font

The Font Tab offers two options: Text Color and Font Size

List Font Color

List Font Color allows you to change the color of the list font. You can choose any color you like.

Font Size

Font size enables you to maintain the font size within the table.

Layout

You will get the Item Spacing and List Alignment options in the Layout option.

Item Spacing & List Alignment

Item Spacing lets you define the spacing between two list items vertically. The List Alignment allows you to choose the alignment for your list items.

Hope you find this tutorial helpful. Let us know if you have questions regarding List Element in the comment section below.

The Custom HTML element is a free element that comes with WP Table Builder. Though the element is free, it is the most important one the affiliate marketer needs.

WP Table Builder is like a blessing for affiliate marketers as it allows you to show the Linked Image directly in the table.

Besides, downloading the image, resizing it, and finally attaching links to it all of these are very tiresome and time-consuming.

But you can easily show the linked product image very easily. You can easily get the linked image from Amazon if you are an Amazon Affiliate marketer. To get that and learn more about this, follow this link.

After getting the link, drag & drop the Custom HTML element into the table, remove everything inside the ‘Insert HTML’ box, and paste the HTML code.

When you are done pasting the HTML code, click outside the table just like the image above; you will see the magic of the CUSTOM HTML element.

Hope you’ve liked this small tutorial of adding a Custom HTML element to your table. Let us know your thoughts about the element in the comment section below.

Adding Text is essential to anything and everything.

When creating a table for your website, adding text is essential, and it is very easy to add text elements to your table.

By default, the text element is added to every cell, and you can start typing to add text immediately.

Also, you can add the text element by drag and drop the element into the table.

Text Options

Text Options provides you with some of the important features when adding text.

Font Color

Font color allows you to adjust font color.

Link Font Color

With this feature, you can finally say goodbye to the blue color of links. Whenever we add a link, it automatically turns blue. Using the feature, you can also color your link text.

Font Size

Finally, the font size option allows you to maintain your font size when adding text.

Spacing Options

You can also adjust the spacing of the text element if you want. Learn more about the Spacing Options here.

Hope this little tutorial helped you. Let us know your thoughts in the comment section regarding the Text element.

Do you want to highlight a product, service, or anything in a table?

Then, use ribbons. A ribbon lets you highlight a row/column in a table.

WP Table Builder has 5 types of ribbons – Rectangle, Bookmark, Corner, Icon, and Side.

Let’s see how to add a ribbon in WP Table Builder.

RIBBON GENERAL

In the General tab, you can select the ‘Ribbon Type’ and change the ‘Side’ of the ribbon. Now, let’s discuss ribbon types.

Rectangle

The very first ribbon type is ‘Rectangle‘. You can position the ribbon by changing the X and Y Offset values.

Side

The next ribbon type is ‘Side‘. Here, you can change the side and Y offset of the ribbon.

Icon

The third ribbon is ‘Icon‘. It lets you add an icon with text. Here, you can change the icon, side of the ribbon, icon animation, and Y offset.

Here is a preview of the ribbon when added with animation.

Bookmark

The fourth ribbon type is ‘Bookmark’. Here, you can change the ribbon’s width, X offset, and Y offset.

Corner

The last ribbon is ‘Corner’. Here, you can change the side of the ribbon.

RIBBON STYLE

RIBBON STYLE consists of other general settings for the ribbon. It includes Font Size, Text Color, Background Color, and Border Color.

Font Size

You can change the font size from here. The font size is changeable based on pixel.

Text Color

You can easily change the text color of the Ribbon’s text.

Background Color

You can also change the background color and border color of the ribbon.

Border Color

The Border Color lets you add color around your ribbon’s border.

We hope this documentation has helped you. Let us know if you have any questions regarding the Ribbon element of WP Table Builder. 

Icons are beautiful and eye-catching. What makes an icon more interesting is having text with it.

Yes, text with an icon makes things more attractive and understandable.

WP Table Builder Pro offers an element called ‘Text Icon’ that lets you add text beside an icon.

Let’s see how to add ‘Text Icon’ to a table.

Text Icon Options

The Text Icon element has some versatile functions to make your Text Icons look incredible. Text Icon Options are divided into three tabs: General, Text, and Icon. 

Let’s take a look at them one by one. 

General

In the General tab, you will find the primary options. 

Icon Spacing

This option allows you to adjust the space between the icon and your text. The input value is based on pixels. First, select the Text Icon element in table (1) and use the icon spacing slider to adjust the spacing between the text and icon (2).

List Alignment

Here, you can select your content and icon alignment. By default, element alignment is always left alignment. You can change the content and icon alignment. Select the Text icon element in the table (1) and then adjust the alignment from the List Alignment (2).

Text

The Text Tab includes font size and text color options.

Text Color

Here, you will get the option to set font size and text color. Put your text color in the hex code or select the custom color with the color window.

Font Size

Set your desired font size through the Font Size option. 

Icon Tab

The Icon tab contains the settings related to icon and icon decoration. 

List Icon

You can change the icon for the particular List Icon element using the option. Select the element (1), click on the icon of the List Icon (2), and choose your icon (3).

Icon Size

With this option, you can reduce or increase the size of the icons. The size input is based on pixels. 

Icon Color 

You can select icon colors to make your table content look great. You can choose your icon’s color by inputting a hex code or selecting the color from the color window. 

Icon Location

Set your icon’s location either after the text or before the text. If you want to place your icon before the text, choose the icon location on the left. Choose the right to place the icon after the text. By default, the icon is placed before the text.

We hope this documentation has helped you understand the functionality of this pro element of WP Table Builder. 

Let us know your thoughts and questions in the comment box.

Icons can make things visually attractive. At WP Table Builder, we have icons on two elements – Styled List and Text Icon.

And now the great news is we also have a dedicated ‘Icon’ element.

The ‘Icon’ element lets you insert icons anywhere in the table. Just drag and drop it where you want to add it.

Icon Options

You will get several useful options for modifying the Icons to meet your criteria in the icon options.

Number of Icons

Now, you can display multiple icons in any place you like. Just insert the number of icons into the box, which will be displayed on your table. You can add up to 5 icons maximum.

You can choose different icons for each icon you add when placing numerous icons. To change the default icon, click on that particular icon and change the icon from the icon library.

Icon Color

Icon color allows you to adjust the color of your icons. You can choose different colors for your different icons.

Icon Link

You can set link and link attributes for your icons using the Icon Link option. Also, you can attach different links and link attributes for separate icon numbers.

Here are the other link options available for the icon link.

If you choose the icon element, the UI will show the options for the overall icon element. But, If you click on a particular icon item, the Icon Link and other icon item-related options will appear.

Icon Size

Make your icons look smaller or bigger with the help of the Icon Size option. Add or reduce the icons’ size through the Icon size slider or write your icon’s size directly in numbers. Shape the icon’s size to your requirements. 

Icon Alignment

Set your icon’s alignment with the Icon alignment option. You will have 3 icon alignment options: left, right, and center alignment. 

Spacing

You can set your desired margin and padding to set the layout of your icons.

You can separately input your margin and padding values for each direction by merely activating the Link values icon.

Deactivate the link value icon to input the same margin and padding value for each direction. 

By default, the Link value option remains deactivated.  

We hope this documentation helped you understand the ‘Icon’ element of WP Table Builder. 

If you have any questions, don’t forget to ask them through the comment box. 

WP Table Builder has a ‘Star Rating‘ element on its free version. That’s enough for showing product/service reviews.

But what if you want to make your rating a bit more attractive?

WP Table Builder PRO has a solution for that. The ‘Circle Rating’ element can help to make your reviews more attractive.

Let’s see how to add a circle rating in WP Table Builder.

Like any other element, drag and drop it into your table.

Circle Rating Options

In the Circle Rating Options, you can adjust the rating according to your needs. 

Circle Size

Here, you will get the Circle Size option, with which you can adjust the size of the Circle rating. By default, the circle size remains at 100px. Adjust the size of the Circle rating with the slider. Its size is based on pixels. 

Circle Color

With the Circle Color option, you can change the circle’s color. Change the circle and its text color with the hex code or through the color window. 

Rating Type

You can choose between two rating types for the Circle Rating: Percentage and Number.

Rating Type: Percentage

You can even change the percentage of the circle rating. By default, it is set to 35%. 

Rating Type: Number

Choosing the Number for your Rating Type will let you display your rating on a scale 10. But if you want, you can set the Highest Rating number and the Rating.

Spacing

Finally, the Spacing option helps you set your desired margin and padding to adjust your Circle Rating element’s layout. You can set the margin and padding according to percentage and pixel with this element of WP Table Builder. 

You can separately input your margin and padding values for each direction by merely deactivating the Link values option.

If you want to input the same margin and padding value for each order, activate the link value icon. 

By default, the Link value option remains deactivated.

We hope this documentation has helped you understand the functionality of this pro element of WP Table Builder. 

Let us know your thoughts and questions in the comment box. 

WP Table Builder has a ‘List‘ element on the free version. It’s enough to create simple lists.

But to create attractive lists, you must have more customization options.

We have introduced the ‘Styled Lists’ element on the WP Table Builder PRO. It lets you add icons to your list, and you can customize your list.

Let’s see if you can add the ‘Styled List’ in the WP Table Builder.

Adding a Styled List is super easy. Just drag and drop the Styled List element in your table, and that’s it.

Let’s see what you can accomplish with this WP Table Builder pro element.

Styled List Options

The ‘Styled List’ is packed with versatile options that will customize the icons and text to the next level within the table.

The Styled List Options contains three tabs: Layout, Icon, and Font.

Layout

The Layout tab allows you to adjust the icon spacing, item spacing, list alignment, spacing, etc.

Icon Spacing

You can increase the space between the icon and the text.

Item Spacing

You can also change the space between list items.

List Alignment

You can also change the alignment of the list.

Spacing

Like every element, Styled List has a spacing option. You can learn more about spacing here.

Icon

Icon has three options: list icon, icon size, and icon color. Look at the details below.

List Icon

The Icon option allows you to add any icon that you like. There are tons of icons to choose from. You can search for your desired icons by using the search box.

Icon Size

The icon size allows you to adjust the icon size for your styled list.

Icon Color

Icon Color allows you to choose colors for your Styled List icon.

Font

The Font Tab allows you to edit the font size and color.

Font Size & Font Color

You can change the size and color of the text beside the icon.

Tooltip

The Tooltip functionality allows you to add a tooltip to your Styled List. First, select the item list, and you will see the Tooptip Text option will appear at the top left side. Then, you can add a tooltip.

You can also define the tooltip text and position. This functionality is available for every item of the Styled List Options.

We Hope this doc helped you comprehend the usage of the Styled List element of WP Table Builder in detail. 

Feel free to ask questions through the comment section if you have any.