Divi 5 makes it easy to create polished, visual sections that be in agreement information truly really feel clear, organized, and attractive. In this unfastened pack, you’ll get 17 Graphs & Charts sections for Divi 5 that are perfect for showcasing internet web page visits, source of revenue, growth, advertising marketing campaign potency, comparisons, timelines, evaluations, dashboards, analytics highlights, and further. Each phase uses clean layouts, bold color treatments, readable labels, and chart-inspired design elements that can assist you supply wisdom in a additional visual means. Import a little, substitute the numbers and labels, and in addition you’re in a position to transport.
Preview
Proper right here’s a handy guide a rough take a look on the 17 Graphs & Charts sections integrated inside the pack. The download is further down the publish.
Download 17 Graphs & Charts For Divi 5
Get all 17 sections without spending a dime. Import them into your Divi Library and add them to any internet web page inside the Visual Builder.
@media most simple computer screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:quicker than { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:quicker than { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 robust { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}
Download For Unfastened
Join the Divi Publication and we can electronic mail you a reproduction of the ultimate Divi Landing Internet web page Construction Pack, plus tons of different excellent and unfastened Divi property, tips and pointers. Follow along and you’re going to be a Divi clutch in no time. For those who’re already subscribed simply type on your electronic mail handle beneath and click on on download to get admission to the structure pack.
You’re going to have successfully subscribed. Please take a look at your electronic mail handle to ensure your subscription and get get admission to to unfastened weekly Divi structure packs!
What’s Integrated (18 Exports)
After you got and unzip the file, you’ll find 17 styled Graphs & Charts phase exports, plus 1 file containing all layouts.
Styled – Graphs and Charts Phase 1 to 17 (17) → Seventeen completely styled graph and chart-inspired phase layouts with visual information blocks, vibrant chart elements, clear labels, polished spacing, and flexible structures that you just’ll have the ability to use as-is or customize.
Styled – Graphs and Charts Sections (All) → Imports all 17 designs into your Divi Library in an instant.
How To Use The Graphs & Charts Sections
Keep your download folder at hand. We’ll import the files, add a little to a internet web page, and then alternate the placeholder information.
1. Import Sections Into The Divi Library
Transfer to Divi → Divi Library. Click on on Import & Export at the top of the computer screen.
Inside the Import & Export Layouts modal, switch to the Import tab, then click on on Choose Document and select your JSON file.
Choose any Graphs & Charts Phase JSON you’d like to use, then click on on Import Divi Builder Layouts.
2. Add A Graph Or Chart Phase To Any Internet web page
Open a internet web page inside the Visual Builder and add a brand spanking new Phase.
Click on on Add From Library and select one amongst your Graphs & Charts sections.
3. Exchange The Data, Labels, And Content material subject material
As quickly because the phase is on the internet web page, converting the placeholder content material subject material most simple takes a few clicks. Get began by means of updating headings, chart titles, information labels, percentages, numbers, legends, captions, buttons, and supporting copy so the phase fits your internet web page, document, product, or advertising marketing campaign.
Because of the ones sections rely on clear visual relationships between labels, chart elements, spacing, and color, it’s perfect to exchange one chart or information workforce at a time. That is serving to stay the structure’s stability while making sure the information nevertheless reads clearly.
If you want to prolong or simplify a little, copy or remove provide rows, columns, groups, bars, taking part in playing cards, labels, or modules as an alternative of rebuilding the design from scratch. That’s one of the vital highest tactics to stay the original development, spacing, and rhythm of the structure.
4. Keep watch over Varieties (No longer mandatory)
The ones Graphs & Charts sections are already styled, so that you’ll have the ability to use them right away or refine them to better suit your internet website online. Exchange typography, colors, borders, spacing, backgrounds, shadows, chart blocks, and information accents as sought after using the settings inside the Design tab.
To change typography, open any Text or Heading module and pass to the Design tab. Make larger the similar text settings to keep an eye on Font, Font Weight, Text Alignment, Text Color, and further.
To refine the chart styling, open the row, column, workforce, or module you need to keep an eye on and use the Design tab to tweak Background, Border Width, Border Color, Border Radius, Box Shadow, Sizing, and Spacing.
If your phase uses stacked bars, comparison taking part in playing cards, line-style elements, pie-style graphics, legends, stat blocks, or dashboard-style layouts, keep those relationships in ideas as you edit so the design continues to keep in touch the data clearly.
Use Divi’s responsive improving tools to fine-tune spacing, stacking, chart width, label dimension, and alignment on smaller displays so each phase stays readable right through gadgets.
Tips For Environment friendly Graphs & Charts Sections
Graph and chart sections artwork perfect after they make wisdom easier to grasp at a glance. Use the ones rapid tips to keep your information visuals clean, useful, and easy to scan.
Keep The Primary Takeaway Clear
Each chart phase will have to keep in touch one primary thought. Use a powerful heading, simple labels, and a clear visual hierarchy so visitors instantly understand what the data is showing.
Use Color With Purpose
Color can be in agreement separate categories, show enlargement, highlight growth, or identify attention to an important information degree. Keep your palette focused so the chart remains easy to be told.
Make Labels Easy To Scan
Readable labels make visual information additional useful. Keep chart labels fast, use consistent formatting, and make sure numbers, percentages, legends, and captions are easy to grasp.
Keep Spacing Consistent
Charts need enough room to breathe. Keep spacing consistent between bars, taking part in playing cards, labels, legends, and supporting text so the phase feels polished as an alternative of crowded.
Check The Construction On Mobile
Graph and chart sections can exchange noticeably on tablet and contact displays as content material subject material stacks. Overview your structure on smaller gadgets to make sure labels keep readable, chart elements nevertheless align, and the data remains to be easy to grasp.
Get began Building In Divi 5 In recent times!
The ones 17 Graphs & Charts sections give you a snappy strategy to create polished visual information sections for landing pages, evaluations, dashboards, product pages, analytics highlights, case analysis, provider pages, and further. Alternate on your numbers, substitute the labels, customize the styling if sought after, and in addition you’ll have a certified data-focused phase in a position in minutes with Divi 5’s Visual Builder.
The publish 17 Graphs & Charts For Divi 5 (Loose Obtain!) gave the impression first on Sublime Subject matters Weblog.
0 Comments