Table of Contents
Elementor Page Builder; adding widget with drag & drop option
Elementor has become one of the best WordPress page builders. Here we will explain how to use wpDataTables – WordPress table plugin with it.
You can insert tables and charts you’ve created with this WordPress table plugin into your pages or posts using the Elementor interface. The only thing to note here is that you should build your tables first (with “Table Creation Wizard“) before inserting them on any page or post you create with Elementor Page Builder.
If you open the Elementor Page Builder editor after wpDataTables installation you will see two new elements in the wpDataTables widget on the Elementor Panels (left image) or you can simply search for wpDataTables widgets by inserting ‘wpData’ in the search bar (right image):
Adding wpDataTable on the page
After you drag & drop wpDataTables widget in the edit area the wpDataTables content settings will be shown in the Elementor’s Panel.
From here you can:
- Select which table you want to display on the page.
- Choose table view between Regular view and Excel-like view.
- Set placeholders for %VAR1% %VAR2% %VAR3% if you need to use them. You can read more about dynamic placeholders on this link.
- Set the name for the export file. More about Table tools on this link.
If you change something in the wpDataTables widget content, you will notice that the shortcode is automatically changed in an edit area.
Adding wpDataCharts on the page
After you drag & drop wpDataCharts widget in the edit area that you need, the wpDataCharts content settings will be shown in the Elementor’s Panel.
From here you can select which chart you want to display on the page.
If you change something in the wpDataCharts widget content, you will notice that the shortcode is automatically changed in an edit area.
Publish on the page
When you finish preparing your wpDataTable or wpDataChart shortcode click on PUBLISH button to save your changes (left image) and then check out your tables and charts on the page by clicking on the HAVE A LOOK link (right image).
