Divi 5 makes it simple to create polished, visible sections that assist records really feel transparent, arranged, and tasty. On this loose pack, you’ll get 17 Graphs & Charts sections for Divi 5 that are ideal for showcasing website online visits, income, enlargement, marketing campaign efficiency, comparisons, timelines, stories, dashboards, analytics highlights, and extra. Each and every segment makes use of blank layouts, daring shade remedies, readable labels, and chart-inspired design parts that can assist you provide knowledge in a extra visible method. Import a piece, replace the numbers and labels, and also you’re in a position to head.
Preview
Right here’s a snappy take a look at the 17 Graphs & Charts sections integrated within the pack. The obtain is additional down the publish.
Obtain 17 Graphs & Charts For Divi 5
Get all 17 sections free of charge. Import them into your Divi Library and upload them to any web page within the Visible Builder.
@media handiest display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:sooner than { border-top-color: #ffffff !vital; border-left-color: clear !vital; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !vital; border-left-color: clear !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { shade: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:sooner than { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .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 shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !vital;}
Obtain For Unfastened
Sign up for the Divi Publication and we will be able to e mail you a replica of without equal Divi Touchdown Web page Format Pack, plus heaps of different superb and loose Divi assets, guidelines and tips. Practice alongside and you’ll be a Divi grasp very quickly. In case you are already subscribed merely sort on your e mail deal with beneath and click on obtain to get right of entry to the structure pack.
You could have effectively subscribed. Please take a look at your e mail deal with to substantiate your subscription and get get right of entry to to loose weekly Divi structure packs!
What’s Incorporated (18 Exports)
After you obtain and unzip the record, you’ll to find 17 styled Graphs & Charts segment exports, plus 1 record containing all layouts.
Styled – Graphs and Charts Phase 1 to 17 (17) → Seventeen totally styled graph and chart-inspired segment layouts with visible records blocks, colourful chart parts, transparent labels, polished spacing, and versatile buildings that you’ll be able to use as-is or customise.
Styled – Graphs and Charts Sections (All) → Imports all 17 designs into your Divi Library without delay.
How To Use The Graphs & Charts Sections
Stay your obtain folder to hand. We’ll import the information, upload a piece to a web page, after which substitute the placeholder records.
1. Import Sections Into The Divi Library
Move to Divi → Divi Library. Click on Import & Export on the height of the display screen.
Within the Import & Export Layouts modal, transfer to the Import tab, then click on Select Document and choose your JSON record.
Select any Graphs & Charts Phase JSON you’d like to make use of, then click on Import Divi Builder Layouts.
2. Upload A Graph Or Chart Phase To Any Web page
Open a web page within the Visible Builder and upload a brand new Phase.
Click on Upload From Library and choose certainly one of your Graphs & Charts sections.
3. Replace The Information, Labels, And Content material
As soon as the segment is at the web page, changing the placeholder content material handiest takes a couple of clicks. Get started through updating headings, chart titles, records labels, percentages, numbers, legends, captions, buttons, and supporting reproduction so the segment suits your website online, record, product, or marketing campaign.
As a result of those sections depend on transparent visible relationships between labels, chart parts, spacing, and shade, it’s absolute best to replace one chart or records team at a time. This is helping keep the structure’s stability whilst ensuring the tips nonetheless reads obviously.
If you wish to increase or simplify a piece, reproduction or take away present rows, columns, teams, bars, playing cards, labels, or modules as an alternative of rebuilding the design from scratch. That’s the best way to keep the unique construction, spacing, and rhythm of the structure.
4. Regulate Types (Not obligatory)
Those Graphs & Charts sections are already styled, so you’ll be able to use them straight away or refine them to raised fit your website. Replace typography, colours, borders, spacing, backgrounds, shadows, chart blocks, and information accents as wanted the usage of the settings within the Design tab.
To modify typography, open any Textual content or Heading module and cross to the Design tab. Amplify the related textual content settings to regulate Font, Font Weight, Textual content Alignment, Textual content Colour, and extra.
To refine the chart styling, open the row, column, team, or module you need to regulate and use the Design tab to tweak Background, Border Width, Border Colour, Border Radius, Field Shadow, Sizing, and Spacing.
In case your segment makes use of stacked bars, comparability playing cards, line-style parts, pie-style graphics, legends, stat blocks, or dashboard-style layouts, stay the ones relationships in thoughts as you edit so the design continues to keep in touch the knowledge obviously.
Use Divi’s responsive enhancing equipment to fine-tune spacing, stacking, chart width, label measurement, and alignment on smaller monitors so each and every segment remains readable throughout gadgets.
Guidelines For Efficient Graphs & Charts Sections
Graph and chart sections paintings absolute best after they make knowledge more straightforward to grasp at a look. Use those fast tricks to stay your records visuals blank, helpful, and simple to scan.
Stay The Primary Takeaway Transparent
Each chart segment will have to keep in touch one number one thought. Use a powerful heading, easy labels, and a transparent visible hierarchy so guests in an instant perceive what the knowledge is appearing.
Use Colour With Objective
Colour can assist separate classes, display growth, spotlight enlargement, or name consideration to a very powerful records level. Stay your palette targeted so the chart stays simple to learn.
Make Labels Simple To Scan
Readable labels make visible records extra helpful. Stay chart labels quick, use constant formatting, and ensure numbers, percentages, legends, and captions are simple to grasp.
Stay Spacing Constant
Charts want enough space to respire. Stay spacing constant between bars, playing cards, labels, legends, and supporting textual content so the segment feels polished as an alternative of crowded.
Test The Format On Cellular
Graph and chart sections can exchange noticeably on pill and make contact with monitors as content material stacks. Overview your structure on smaller gadgets to verify labels stay readable, chart parts nonetheless align, and the knowledge continues to be simple to grasp.
Get started Construction In Divi 5 Nowadays!
Those 17 Graphs & Charts sections provide you with a quick method to create polished visible records sections for touchdown pages, stories, dashboards, product pages, analytics highlights, case research, carrier pages, and extra. Change on your numbers, replace the labels, customise the styling if wanted, and also you’ll have a certified data-focused segment in a position in mins with Divi 5’s Visible Builder.
The publish 17 Graphs & Charts For Divi 5 (Free Download!) gave the impression first on Elegant Themes Blog.
0 Comments