How To Set Rows And Columns With Elementor Data Tables (Quick Tutorial)

Facebook
Twitter
LinkedIn

Table of Contents

Introduction

Welcome to our guide on how to set rows and columns with Elementor Data Tables! Elementor, a popular and user-friendly page builder, allows you to effortlessly create stunning websites without any coding knowledge. One of the powerful features within Elementor is the Data Tables widget, which enables you to display and organize data in a visually appealing way.

In this tutorial, we will walk you through the process of setting up rows and columns with Elementor Data Tables. Whether you’re creating a pricing comparison table, product features overview, or any other type of content that requires organized information, this guide will help you achieve the desired layout effortlessly.

Step 1: Adding a Data Table

  • Open your Elementor page editor.
  • Search for “Data Table” in the Elementor widgets list.
  • Drag and drop the Data Table widget into your desired section.
  • By default, the Data Table has four columns and one row.
  • Click on the Table Header to change its name to “Column Five”.

Step 2: Adding Columns and Rows

  • To add a new column below the header table, click on the “Content” tab under the Data Table settings.
  • Every time you add a new row, you can add a new column by clicking on “Add Item” and selecting “Column”.
  • To add a new row, click on “Add Item” and select “Row”.
  • To add more columns to a specific row, click on the row and then click on “Add Item” and select “Column”.
  • Repeat steps 3 and 4 for each row you want to add columns to.

Step 3: Customizing the Data Table

  • To customize the appearance of the Data Table, go to the “Advanced” tab under the Data Table settings.
  • Here, you can adjust the table’s width, padding, and other advanced settings to make it look how you want.

How To Add Rows In Elementor?

Understanding Basic Row Creation

Creating a new Inner section

To begin, initiate a new Inner section within the container. Simply drag and drop it into the empty container section. This Inner section will serve as the canvas for your row.

Adding content to the Inner section

Fill the Inner section with relevant content. This could include text, images, or other widgets depending on your design requirements. This initial step sets the groundwork for your row.

Enhancing Row Structure with Elementor Heading

Adding an Elementor Heading above the Inner section

Now, take your design a step further by adding an Elementor Heading above the Inner section. Drag and drop the Heading element above the row, creating a structured header for the section.

Creating a header structure

With the Elementor Heading in place, you’ve established a clear header structure for the row. This structure serves as a visual guide, making your design more organized and visually appealing.

Incorporating Images into the Inner Section

Adding an image widget to the Inner section

To make your row visually engaging, integrate an image widget into the Inner section. This step allows you to create a single row featuring images, adding a dynamic element to your design.

Creating a single row with images

With the image widget in place, you’ve successfully crafted a single row within the Inner section. This row can be duplicated to create multiple rows of images, providing versatility in your design.

How To Add A Responsive Table?

Method 1 – Plugin Installation

Choose a Plugin

When it comes to designing responsive tables, plugins are your best friends. They streamline the process and offer various styles. Here are a few notable options:

  • Ninja Tables: includes more than a hundred different table styles.
  • WPDataTables: A feature-packed option with a premium version.
  • WP Responsive Table: A simple and free plugin for easy table creation.
  •  

Installation Process

  • Download your chosen plugin.
  • Go to the WordPress admin dashboard.
  • Click on Plugins, then Add New.
  • Upload and activate the plugin.

Method 2 – Creating a Table with NinjaTables

Installation and Activation

After installing NinjaTables, follow these steps to create a table:

  • Go to NinjaTables > All Tables > Add Table.
  • Choose to add a new table or import one from a file.

Adding Information and Creating Columns

  • Click on Add to create the table.
  • Add columns to structure your table.
  • Input data, specifying column headers and data types.

Setting up Table Responsiveness

  • Access the menu by clicking on Always Show on all devices.
  • Choose from options for responsive behavior.

Method 3 – Exploring NinjaTable’s Settings

With a table in hand, it’s time to explore customization:

Customizing Style and Appearance

  • Access NinjaTable’s settings.
  • Explore style options, including row colors and text alignment.

Testing Screen Responsiveness

  • Use the Table Design tab.
  • Test your table’s appearance on Desktop, Tablet, and Mobile views.

Method 4 – Testing and Shortcodes

Testing Table Responsiveness

  • Edit your table in NinjaTable.
  • Use Desktop, Tablet, or Mobile views for responsiveness testing.

Using Shortcodes to Add Tables to Website

  • Find the shortcode for each table.
  • Add tables easily to your content using the NinjaTable block in the Block Editor menu.

How To Add More Columns In Elementor?

Website design is a delicate dance between creativity and functionality, and Elementor serves as the choreographer for this digital ballet. One crucial aspect of Elementor’s toolkit is its column feature, allowing designers to structure content elegantly. Let’s delve into the step-by-step guide on how to add more columns in Elementor seamlessly.

Understanding Elementor Columns

Columns in Elementor act as the backbone of your webpage’s layout. They influence not only the visual appeal but also the user experience. Properly structured columns enhance readability and engagement, making them a pivotal component of any well-designed website.

Method 1: Adding Columns via Section

  • Step 1: Go to the section and hover in the middle.
  • Step 2: Right-click on the column icon to the left.
  • Step 3: Click on “Add New Column” to add a new column to the section.

This method ensures precision by focusing on the middle of the section, offering a user-friendly approach to augmenting your Elementor layout.

Method 2: Utilizing Elementor Toolbox

Step 1: Open the Elementor Toolbox Menu

Click on the button with three horizontal lines to the upper top left corner of the page. That will open up the Elementor menu.

Step 2: Go to the Preferences Menu

Click on the preferences menu from the Elementor toolbox. Then, set the Editing Handles to Yes.

Step 3: Hover over the edit column icon.

  • Step 3.1: Hovering over the edit column icon on the section will reveal the handles.
  • Step 3.2: Now click on the “+” icon to add a column.

This method empowers users with additional editing capabilities, allowing for a more customized and tailored design.

Editing Handles and Adding Columns

Setting the Editing Handles to Yes amplifies your control over Elementor’s layout. Hovering over the edit column icon initiates the process of customizing columns to suit your design needs.

Handle Functionality

Handles within Elementor provide a range of functionalities, including adding, duplicating, and deleting columns. This versatile feature ensures flexibility in adjusting your webpage’s structure.

Step 3.1: Revealing Handles

Hovering over the edit column icon exposes the handles, giving you a visual cue for the available customization options.

Step 3.2: Adding a Column

Clicking on the “+” icon during the handle reveal allows you to effortlessly add a column to your Elementor layout, enhancing the overall design.

Conclusion

In conclusion, adding columns in Elementor is a straightforward process with the provided methods. Whether you choose the precision of Method 1 or the enhanced features of Method 2, Elementor ensures that your design experience remains intuitive and user-friendly.

Share on Facebook
Tweet this article
Share on LinkedIn
Email this article

More to explorer

Crafting Hero Section in Brizy

Understanding the Importance of a Hero Section Introduction to Hero Sections A hero section is the prominent and visually striking part of