Getting Started
Without any doubt, the divi theme is an ideal choice to design a fantastic website. Divi brings every single module required to build a website that attracts visitors instantly. However, Divi has some limitations at some points because nothing is perfect in this world. Creating a table module in Divi required a lot of effort and knowledge about coding. Here is the solution, Diviflash introduced the data table module for divi consisting of numerous features. Such as the table content, table option, table, head, body, foot, search, info, pagination, font style, image, icon, link, border, custom spacing features, and so on. Except for these prominent features, a couple of other features are imported here. Let’s get into the deep of every single feature to learn appropriately. Finally, the structure of these features are separated into three categories,
+ Content Tab
+ Design Tab
+ Advanced Tab
Advanced Divi Table Content Tab
The advanced divi table content tab significantly contributes to building a table from scratch in the divi theme. This tab contains several valuable basic features that complement the first step of creating & designing the table module. Among other features, the table content & table option are the most famous. However, a few supportive features are placed in the content tab of the advanced divi table module.
Table Content
The table content feature allows the implementation of data in the table module. It contains five different types of methods to apply the data in the module.
CSV Upload: You can upload a CSV file directly to the module
Import Table: The entire procedure of importing data in the table module is completed by writing the regular text in the table content area. Remember, the text is separated by commas, and providing an icon, image & link on the table required HTML codes.
Google Sheet: Extracting data from the google sheet required a different process. You need to get the Google API Key, Sheet ID & Sheet Range and then implement that information on the table content area.
Database Table: Under this method, you utilize the WordPress default data to import in the table.
Table Press: Table Press is a plugin that was invented to create a table in WordPress websites. So, if you already have the plugin installed on the website, you can integrate that plugin here.
Table Option
The table option works to add some additional attributes to the advanced divi table module. Here, you get yourself an option to implement a search box and pagination button to the module. Moreover, you can apply an order sign in the table header for better navigation. Finally, the entire information about the table data can be shown at the bottom of the table here.
Background
The background features of the Content tab have multiple attributes to apply for a better page layout, such as background color, gradient color, image, and video properties. On top of these features, there are some settings to make each adjustment as you desire. Note, this background will apply to the entire module.
Admin Label
Admin Label of the advanced divi table module provides the opportunity to keep the module name as you wanted. So, it doesn’t have to be the module’s actual name that generally shows on the wireframe view.
Advanced Divi Table Design Tab
The design tab is responsible for decorating every single element of the advanced divi table module. Under this tab, numerous features are imported depending on the ingredients categories. Each of the features amplifies the beauty of a particular ingredient. However, let’s just not stuck with the design tab instead of learning all the features in detail.
Table
The table feature is imported to modify the entire border of the advanced divi table module. This feature authorizes you to implement a table background color, border style, width & color with a border corner rounding effect. Moreover, you can apply different types of box-shadow effects along with a perfect shadow color. Nevertheless, you get yourself an option to define the border shadow position.
Head
Decorating the head section of the advanced divi table module demands a touch of the head feature. This feature is obliged to modify the header background color, font-weight, style, alignment, text color & size. Also, you can fix the table header letter-spacing & line-height over different text-shadow effects. Not only that, the head feature lets you implement a new border style, width & color along with a border corner rounding effect.
Body
The body is an imperative feature to adorn every single body row of the advanced divi table module. Under this feature, you can implement a body row background color, row odd & even number background color. Moreover, this feature lets you embellish the font-weight, style, alignment. text color, size, letter spacing & ,line-height with text-shadow effect. Even, you can apply a distinct border style, width & color alongside a border corner rounding & box-shadow effects.
Search
The search feature is dedicated to change the search box background color, font style, weight & alignment. Further, you can provide a text color, size, letter spacing & line-height with various text-shadow effects. Finally, a stylish border can be placed with a corner rounding & box-shadow effects.
Info
Every bit of the customizing properties you get in the search setting is also included under the info setting of the advanced divi table module.
Pagination
The pagination setting is a way to design the pagination buttons in a different style & look. This feature lets the designer give a background color for the pagination regular & active button. In addition, designers can precisely play with the dot size & color, text color, size, letter spacing & line-height. Lastly, a decorative border can be made with a corner rounding & box-shadow effects under the pagination feature.
Font Style
Font Style helps decorate the module’s three different text properties: the search input, pagination active & disable button. Here, you can adorn the font style, color, weight & alignment of these three text properties. Moreover, it authorizes you to change the text color, letter spacing, line height & text-shadow effects.
Image
The image feature of the design tab helps to define a compatible image size. Moreover, this feature authorizes you to specify the image border width, style, & color with a border corner rounding effect. However, don’t forget to play with different types box-shadow effect that exists in this feature.
Icon
Every bit of the customizing properties you get in the image settings are also included under the icon settings of the advanced divi table module. In addition, you can modify the icon color as you desire.
Link
The link is an extraordinary feature that embellishes any link or button provided in the advanced divi table module. This feature allows designers to adorn the link background color, font-weight, style & alignment. Moreover, you can apply the padding around the background color. In addition, you are authorized to decorate the link text color, size, letter spacing & line-height over different text-shadow effects. Finally, the link border width, style & color can be decorated with a corner rounding effect under the link feature.
NO Match
First of all, you need to understand what is No Match property here is. When you input text in the search box that doesn’t match the existing data, you get the outcome as written NO Match. So, this feature allows amplifying the beauty of this No Match text property. Here, you can modify the font style, weight, color & alignment of this ingredient. Even more, the text color, letter spacing & line-height can be decorated under this feature over a text-shadow effect.
Border Style
The border-style feature provides you with a couple of design properties imported to adjust the overlap of the advanced divi table border. Activating the Head & Row Cell Equal Border attribute eliminates the border where it gets doubled at the head & row of the module. Consequently, the head & row border looks clean & great that improves the entire module appearance. Also, turning on the Row’s Last Cell Border-right attribute diminish the border from the right side of the row’s last cell. At the same time, the Row First Cell Border-left attribute helps to hide the left border of the row first cell. Moreover, you achieve the same for all top cells of the first-row border & all bottom cells of the last-row border.
Custom Spacing
The advanced divi table module brings a fantastic feature to fix a compatible distance between each ingredient, the Custom Spacing system. Custom spacing is counted as one of the imperative features among others. This feature provides padding over the elements in two different ways, the Wrapper and Content Spacing.
Wrapper spacing
The wrapper spacing allows designers to input padding around the table, including features like search box, pagination, etc. Also, you can apply table wrapper padding and pagination spacing from here
Content spacing
On the other hand, the content spacing lets designers implement padding over the table, head cell, body cell, and search input box. Moreover, designers get the opportunity to fix the spacing issues around the search label & between the pagination buttons.
Sizing
As a designer, you would love to control the divi table module’s alignment, width, and height. Here, the sizing feature stands in your favor to increase or decrease your container’s width and height. In addition, you can set a min or max-height & width of the table.
Spacing
Divi makes the spacing setting a default feature for the entire module. Therefore, you will find two standard margins and padding settings that work the same for all Divi modules in this function.
Border
The Border feature of the advanced divi table module can provide you with a border corner rounding effect for the container. Also, you can customize the design by changing the border width, style, and color. However, don’t feel confused by just reading; try once, and it’s easier than you thought.
Box-shadow
This Box shadow affects the entire advanced divi table module. It has six distinct shadow effect styles with all the necessary settings.
Transform
The transform feature of the advanced divi table module provides you with five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on your table module will give you better control over the section.
Animation
Animation effect setting exists in all the Divi default modules. It has seven different effects and other options to adjust the beauty of the animated section.
Advanced Divi Table Advanced Tab
Each desire designers possess to create a fantastic website is achievable under the content & design tab. Nevertheless, the advanced divi table module gives developers a scope to play with every single element precisely. Furthermore, they can implement codes in the CSS ID & Classes and Custom CSS feature for further customization. Moreover, The visibility, transitions, position, and scroll effects settings are included to work proficiently.
CSS ID & Classes
CSS ID: The only purpose of the CSS ID section is to identify the ingredient separately while linking, scripting, or style the module.
CSS Class: Assign any CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child’s theme or from Divi’s custom CSS inputs.
Custom CSS
The Custom CSS section has three distinct CSS implementing areas in the advanced divi table module. You have access to all the areas to write down any CSS Code and target any particular area.
Visibility
The visibility option of the advanced setting offers designers to conceal the advanced divi table module on particular devices.
Transitions
Under the transition setting, you have features like Transition duration, Delay, and Curve Speed for better customization.
Position
Here you can take complete control over the relative, absolute, and fixed position. This option is also available in every Divi module and works almost the same for all.
Scroll Effects
If you want to provide a scroll effect to your module, you have the opportunity with the scroll effect setting. Under this setting, you get a Sticky position, scroll transform effects, vertical motion, and motion effect trigger functions like any other Divi module.
NOTE:
Mobile: Any setting that has a mobile icon will allow you to customize according to devices. You can select different settings for desktop, tablet & Mobile.
Mouse: A mouse pointer in the setting will allow you to set a hover effect on this element.
