Table Maker is a third-party module for the Divi Builder that does precisely what the identify describes- it makes tables. This can be a tough module that simplifies making tables of any dimension. Upload any form of content material and elegance the desk with the usual Divi settings in addition to settings for each and every part. The most recent model provides much more choices. On this put up, we’ll take an in depth take a look at Desk Maker – along our Divi Home Remodeling Layout Pack – to assist making a decision if it’s the precise product to your wishes.
Desk Maker Module Settings
A brand new Module is added to the Divi Builder known as Desk Maker. Upload this module for your Divi layouts as you can any Divi Module. We’re the usage of the module so as to add a pricing desk to the Service Page Layout of the Divi House Renovation Format Pack.
The Normal tab comprises submodules for each and every column. Upload as many as you wish to have through clicking Upload New Column. It additionally comprises settings for the identify, description, columns, rows, making it responsive, adjusting the way it scrolls, and adjusting the icons, buttons, and photographs. The submodules additionally come with settings that override the module settings.
Desk Maker Column Submodule
Clicking Upload New Column creates a column submodule and opens its settings. Upload as many columns as you wish to have.
Including Content material to Desk Maker Cells
Prior to we see the Desk Maker’s settings, let’s see methods to upload cells and content material. We will be able to upload a variety of various kinds of content material to the cells.
Desk Maker Column Content material
Throughout the column submodule, you’ll to find the Rows box. That is an HTML editor. You’ll be able to create the Rows simply by getting into the content material for each and every row. Every row is numbered. The numbers correspond to a mobile, so each numbered line is a brand new mobile. So as to add content material to a undeniable mobile, simply upload that content material to the road that’s numbered for that mobile. This comprises textual content, code, hyperlinks, movies, or the rest you wish to have.
Taste the Content material with Markup
For those who’ve added textual content to the cells, you’ll be able to markup the textual content with HTML. This implies you’ll be able to simply upload daring, italics, paragraphs, breaks, headings, hyperlinks, photographs, and even a complete structure. Simply make sure that all of the HTML is on a unmarried line.
As an example, I’ve added tags for H2 and impressive to among the cells on this symbol.
Including Get away Characters
For the reason that Row editor is an HTML box, there are particular characters that we will be able to’t generally use, such because the ampersand, quote, apostrophe, and nice than and not more than symbols. Thankfully, those characters can nonetheless be used inside of Desk Maker’s fields. Desk Maker makes use of particular characters, known as get away characters, to inform the cells to show the ones characters. To make use of them, upload double curly brackets and the abbreviation for the nature.
As an example, to turn an ampersand, you’d input {{amp}}, as I’ve carried out in row 4 within the instance beneath.
Including Buttons
Upload a button through getting into the button tag to the mobile you wish to have to show a button. If you input the tag for the button, you’ll see the default button. Upload the textual content you wish to have to show inside the tags.
Customise the Button
The button can also be custom designed within the Content material tab of the Desk Maker module’s settings and the person submodule’s settings. Upload the button textual content, URL, hyperlink goal, set the button width in keeping with the textual content or the mobile, and use customized types.
Upload an Icon to the Desk
Come with an icon through getting into the icon tag. You’ll be able to come with the icon’s identify to show it or make a choice an icon within the Content material tab. You’ll be able to additionally upload as many icons as you wish to have through including extra tags and the icon identify inside the tag. As an example, so as to add a move icon, upload this code: <icon>cross_alt</icon>. I’ve additionally added this code so as to add a unique icon: <icon>check_alt</icon>. You’ll be able to to find a full list of available icons at the Divi Desk Maker web page.
You’ll be able to additionally make a choice to choose a uniform icon selection. To do that, scroll all the way down to Desk Icons within the Content material tab. Use the Content material tab of the module to select an icon that may be positioned in all of the cells. There may be the choice to select an icon in particular for that mobile. You’ll be able to additionally modify the icon’s dimension and colour, as I’ve carried out within the instance beneath.
Upload an Symbol to the Desk
So as to add the pictures to the desk, scroll all the way down to Desk Pictures within the Content material tab. Upload the pictures as a gallery from the media library. You’ll be able to additionally make a choice the picture high quality, share, scale, vertical alignment, and horizontal alignment. You’ll be able to additionally get entry to those settings for each and every mobile within the submodules, so you’ll be able to override the usual module settings.
Show the Pictures
Show the pictures through including the picture tag and the picture quantity within the mobile. As an example, if you wish to have the second one mobile of your column to show a picture, input the HTML symbol tag into that mobile. Alternate the quantity to turn a selected symbol in keeping with the order that it seems that within the gallery.
Shortcodes and iFrames
You’ll be able to additionally upload shortcodes and iFrames to the cells. Merely paste them at the line for the mobile you wish to have. You received’t see a preview of the shortcode within the Divi Builder, however they do run at the web page. Paste iFrames the similar approach as shortcodes. They do display a preview within the Divi Builder, however it could now not display the similar approach that it’ll at the entrance finish. They do display accurately at the entrance finish.
Taste the Content material with CSS
You’ll be able to additionally taste the content material with inline CSS. This can be utilized to keep an eye on the colours of the textual content, the dimensions of the textual content, underline, and so forth. Merely upload the inline CSS as you can in any WordPress content material editor. As an example, to make the primary column heading textual content white, you’ll be able to upload this CSS:
<h2 taste="colour: white;"></h2>
Customizing the Desk Maker Cellular Itself
You’ll be able to customise the mobile itself the usage of the mobile tag and inline CSS. As an example, this inline CSS would exchange the mobile’s background:
<mobile taste="background: #0d232d;"></mobile>
For our instance, we position the heading of the mobile – which we had up to now styled with inline CSS – inside the mobile tag.
Column Width
Regulate the Max Width and Min Width of each and every column independently.
Desk Identify
Desk Identify is a brand new function. It’s disabled through default. Allow it and upload a identify within the box. You’ll be able to additionally make a choice its place. Choices come with above the desk, beneath the desk, and hidden.
Desk Description
Desk Description is any other new function. It’s additionally disabled through default. Allow it and upload the outline into the sector. You’ll be able to additionally make a choice its place from above, beneath, or hidden.
Desk Columns
Regulate the Header Rely, Footer Rely, Max Width, and Min Width. The Header Rely and Footer Rely means that you can make a choice the collection of cells to make use of for each and every.
Desk Rows
Desk Rows additionally has changes for the Header Rely, Footer Rely, Max Width, and Min Width. The Header Rely and Footer Rely means that you can make a choice the collection of cells to make use of for each and every.
Desk Corners
Desk Corners is any other new function. It’s disabled through default. This allows you to taste the nook as a part of the Row Header or Column Header. Desk Corners works with Column Footer and Row Footer. If it’s enabled, you’ll have new settings in Desk Corners to taste them.
Desk Responsive
The responsive options are fascinating. You’ll be able to set the breakpoint in keeping with the instrument kind and feature it smash through columns or rows. You’ll be able to additionally show the cells as blocks or as an accordion. The most recent replace provides the breakpoints to desktops so you’ll be able to create accordions on desktops if you wish to have. Your guests received’t see the total desk structure in the event you use both blocks or accordion for the desktop. This case presentations blocks.
This case presentations the Accordion. I’ve opened the second one accordion to turn how the desk appears.
Desk Scrolling
Scrolling means that you can show a bigger desk in the similar area. You’ll be able to additionally make the column and row headers sticky.
Styling the Tabel Maker Desk
Desk Maker has in depth styling choices within the Design tab of the submodules and the primary module. Regulate the colours, stripes, cells, textual content, header textual content, column headers, row headers, column footers, row footers, footer textual content, and all of the usual Divi choices. Taste all of the cells in combination or each and every mobile independently. Let’s take a look at a couple of examples. I’ll describe the settings as we pass.
Desk Maker Desk Identify
If in case you have Desk Identify enabled, you’ll see design settings for the identify. The settings come with lots of the usual textual content choices for fonts, colours, alignment, and so forth. It provides spacing between the desk and the identify textual content. Within the instance beneath, I’ve modified the font to compare the frame font used inside of our structure pack, Raleway.
Desk Description
If in case you have Desk description enabled, you’ll see the design settings for the outline textual content. Settings come with lots of the textual content choices together with dimension, fonts, wights, and so forth. It additionally provides spacing between the desk and the outline textual content. On this instance, I’ve adjusted font and colour to raised fit our structure pack.
Desk Accordion
If in case you have the Accordion choice decided on below Desk Responsive, you’ll have design settings for the accordion. All accordions are closed through default. You’ll be able to set a selected toggle to be open if you wish to have. The Toggle Opened choice means that you can make a choice which toggle to open through default. Set the icon alignment, exchange the dimensions, make a choice an open icon, and make a choice an in depth icon.
Desk Body
The Desk Body choices will let you upload gaps or traces to the cells, make a choice a border kind, exchange the border colour, and alter the road width. On this instance, I’ve decided on the traces taste, and adjusted the colour.
Desk Stripes
Desk Stripes puts stripes in the back of the abnormal and even fields and can also be horizontal or vertical. You’ll be able to make a choice the sector varieties that come with the stripes and choose from abnormal or even rows. Stripes can now be a tint, a mixed colour (which contains the tint), or common colour choices. The responsive dimension can pass in a unique course, or you’ll be able to disable them. Follow the stripes to the desk frame, column header, column footer, row header, and row footer for my part.
Desk Hover
Desk Hover is a brand new environment that highlights a row or column as you hover, so they may be able to be horizontal or vertical. The responsive dimension will have a unique course or none. You’ll be able to additionally modify the colour. Make a choice from tint, mixed colour, or forged colour. Within the instance beneath, I’ve decided on horizontal and colour. I’m soaring over the second one row.
Desk Textual content
Desk Textual content comprises all of the usual textual content choices and provides a wrap function, supplying you with keep an eye on over how the textual content behaves. On this instance, I’ve set it to wrap, and adjusted the font circle of relatives, textual content colour, and font dimension.
Desk Cells
The settings for Desk Cells will let you exchange the background colour of the cells, set the textual content alignment for vertical and horizontal alignment, upload padding, customise the border, and upload a field shadow.
Desk Maker Column Header Textual content
At the start, the row and column header textual content have been wrapped in header and impressive tags. This did motive issues of accessibility readers. Now, the environment is off through default. You’ll be able to flip it again on when you have problems with older tables, nevertheless it’s higher to depart it off and elegance the textual content with the settings equipped through Divi Desk Maker. For this situation, I’ve made capitalized the titles, larger the road peak, larger the font dimension and ensured that the inline styling has been got rid of.
Column Header Cells
Column Header Cells adjusts the background colour of the heading cells. It comprises the usual mobile settings. I’ve adjusted the background colour on this instance.
Column Footer Textual content
The Column Footer Textual content adjusts the textual content within the footer. It comprises all of the usual settings.
Column Footer Cells
Column Footer Cells adjusts the cells for the footer. It comprises all of the usual settings. I’ve adjusted the background colour, border colour and border taste, and border width on this instance.
Row Header Textual content
Just like the Column Header Textual content, Row Header Textual content additionally has the heading stage disabled through default to toughen accessibility. The row header is at the left. It additionally comprises the usual font settings. On this instance, I’ve added textual content wrap, modified the font circle of relatives, up to date the font taste, and changed the textual content colour and line peak.
Row Header Cells
Row Header Cells controls the background of the cells used for the row’s header. On this instance, I’ve adjusted the background colour, plus each horizontal and vertical alignment.
Row Footer Textual content
The Row Footer Textual content settings modify the textual content for the row footer, which is at the proper. In our instance, the row footer holds the E-book Now buttons. So the instance of the row footer textual content could be within the very closing mobile of this desk.
Row Footer Cells
The Row Footer Cells settings keep an eye on the mobile used for the footer row. I’ve adjusted the background colour, horizontal and vertical alignment.
The Up to date Layou with Completed Desk
That is the up to date Service Page Layout with the totally styled Desk Maker module, coupled with the FREE Header and Footer Template for the Home Remodeling Layout Pack.
Acquire Desk Maker
Desk Maker is available in the Divi Marketplace for $39. It features a 30-day money-back ensure and three hundred and sixty five days of strengthen and updates.
Finishing Ideas
That’s our take a look at Table Maker for Divi. This can be a tough table-making module. The most recent replace provides a variety of new options. The brand new accessibility updates permit tables made with Desk Maker to go Google’s Lighthouse accessibility audit. You’ll be able to make any dimension desk and upload absolutely anything to a mobile with tags. Upload HTML, CSS, shortcodes, iFrames, and extra. Taste the cells for all the desk immediately or taste them for my part. The responsive equipment make the tables glance nice on any instrument. For those who’re fascinated by an impressive instrument to create tables in Divi, Desk Maker is a brilliant selection.
We wish to listen from you. Have you ever attempted Desk Maker to your Divi web page? Tell us what you take into accounts it within the feedback.
The put up Divi Plugin Highlight: Table Maker gave the impression first on Elegant Themes Blog.
0 Comments