Divi 5 makes it simple to build timelines which could be clear, flexible, and easy to reuse. In this free pack, you’ll get 11 unstyled Timeline Sections — each and every focused on clean development so that you’ll be capable of plug for your non-public design tool, presets, and branding. Drop one onto any internet web page, connect it in your types, and get began telling your story. No additional setup required.
Preview
Proper right here’s a at hand information a coarse check out all 11 Timeline Sections built-in throughout the pack. The download is further down the publish.
Subscribe To Our Youtube Channel
Download 11 Unstyled Timeline Sections For Divi 5
Get all 11 sections without charge. Import them into your Divi Library and add them to any internet web page throughout the Visual Builder.
@media simplest visual display unit and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:previous to { border-top-color: #ffffff !vital; border-left-color: transparent !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: transparent !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 { color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:previous to { 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 powerful { 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 powerful, .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 !vital;}
Download For Free
Join the Divi Newsletter and we will be able to piece of email you a duplicate of the ultimate Divi Landing Internet web page Structure Pack, plus quite a lot of selection glorious and free Divi property, guidelines and techniques. Follow along and you’re going to be a Divi clutch in no time. When you’re already subscribed simply sort for your piece of email deal with below and click on on download to get entry to the construction pack.
You’ve gotten successfully subscribed. Please check out your piece of email deal with to confirm your subscription and get get entry to to free weekly Divi construction packs!
What’s Included (11 Exports)
After you got and unzip the record, you’ll to find 11 Timeline Segment exports.
Unstyled — Individual Timelines (11) → Clean structural layouts with minimal styling, ready for your non-public presets and Design Variables.
Easiest conceivable starting problems for problem roadmaps, process overviews, product journeys, and unencumber timelines.
How To Use The Timeline Sections
Keep your download folder at hand — we’ll import, then add a bit of to a internet web page.
1. Import Sections Into The Divi Library
Go to Divi → Divi Library. Click on on Import & Export at the top of your visual display unit.
Throughout the Import & Export Layouts modal, switch to the Import tab, then click on on Choose Report and make a choice your JSON.
Choose any Timeline construction JSON you need to use, then click on on Import Divi Builder Layouts.
2. Add A Timeline Segment To Any Internet web page
Open a internet web page throughout the Visual Builder and add a brand spanking new Segment.
Throughout the Insert Segment modal, click on on Add From Library and make a choice a Timeline construction.
In spite of everything, click on on Use This Segment.
3. Exchange The Content material subject material
Alternate dates, headings, descriptions, and CTAs to match your problem or story. The ones layouts take advantage of core Divi modules (Text, Image, Icon, Button, and so on.), making edits easy. Use the right-click menu to replicate/paste types for those who’re matching other parts of the internet web page.
With the ones Timeline layouts, Divi 5 makes it easy to change content material subject material and reorder steps. Open any step’s Module Settings to edit its content material subject material.
If a step contains an image or icon, you’ll be capable of navigate all the way through the development — for example: Segment → Row → Column → Module — and change the Image possible choices.
Click on at the Image tab, hover over the Settings Icon, and exchange the image with one in every of your choosing.
To change text, hover over the comparable Module throughout the canvas to show the Module’s Settings icon.
Click on on into the Heading field (or Body field, if suitable) to exchange the text in seconds.
4. Keep an eye on Types (Now not necessary)
All timelines are structurally ready as-is, then again you’ll be capable of briefly alternate their styling by means of the use of the Divi 5 Inspector function. Click on at the Inspector Icon to show at the panel.
When the Inspector Modal opens, there are 3 tabs — Types, Content material subject material, and Presets — where you’ll be capable of merely alternate the colors, fonts, or step content material subject material with a few clicks.
You’ll moreover tweak your construction throughout the Design tab. Keep an eye on the Structure Style (CSS Grid or Flex), Gaps, Structure Trail, and additional with a few clicks.
Save your favorite style as a Preset to briefly follow it all over your website online comfortably.
Pointers For Environment friendly Timelines
Small choices add up. Listed here are rapid wins to stick your timelines clear and impactful.
Keep Steps Temporary
Use Divi 5’s Customizable Responsive Breakpoints to stick each and every step concise on smaller visual display unit sizes. Goal for short headings and 1–3 strains of text on mobile, specifically with multi-column layouts, to steer clear of overwhelming small presentations.
You’ll moreover use Divi AI to summarize long paragraphs into scannable timeline steps, retaining the point of interest on key milestones.
Highlight Key Milestones
When together with timelines in your website online, make your most vital milestones stand out. Use clear labels, dates, and fast descriptions. Consider together with icons or small visuals for number one ranges (paying homage to launches, releases, and achievements) to lend a hand consumers briefly scan the story.
Be Mindful Of Difference
When the use of text over images, gradients, or colored backgrounds, make certain that the background incorporates enough difference for readability. Use Divi 5’s Background Gradient possible choices so to upload a light-to-medium gradient at the back of your timeline text, making each and every step easy to be told. This is vital now not only for design, however as well as for accessibility.
Use Consistent Imagery
When construction timelines, use consistent icon types, avatar shapes, and image sizes. Mixing too many styles and sizes makes the design look messy and not more visually attention-grabbing. If an image is simplest decorative, move away the alt text empty to steer clear of needless noise for visual display unit readers.
Order For Affect
Decide whether or not or no longer your story makes additional sense chronologically or in reverse-chronological order. Lead at the side of your most comparable or impressive milestone, paying homage to your latest unencumber, biggest win, or provide phase — and then let consumers scroll once more in time. Use contrasting colors or higher headings to emphasize the necessary factor moments.
Motion Lightly
When the use of motion, subtle hover or expose effects are enough. Steer clear of heavy parallax effects at the back of long blocks of body text. Consider the use of delicate fades, slide-in effects, or computerized rotation on Carousels as timeline steps change into visual, so the motion is helping the content material subject material somewhat than distracting from it.
Get began Construction In Divi 5 Today
The ones 11 unstyled timeline sections provide flexible, production-ready structures that seamlessly mix at the side of your provide design tool. Use them for unencumber roadmaps, product histories, supplier processes, or editorial calendars, and keep iterating with Divi 5‘s trendy apparatus.
The publish 11 Timeline Designs For Divi 5 (Unfastened Obtain!) appeared first on Chic Subject matters Weblog.
Contents
- 1 Preview
- 2 Download 11 Unstyled Timeline Sections For Divi 5
- 3 Download For Free
- 4 You’ve gotten successfully subscribed. Please check out your piece of email deal with to confirm your subscription and get get entry to to free weekly Divi construction packs!
- 5 What’s Included (11 Exports)
- 6 How To Use The Timeline Sections
- 7 Pointers For Environment friendly Timelines
- 8 Get began Construction In Divi 5 Today
- 9 9 Trade Demanding situations Each Small Trade Struggles With (And Tips on how to Repair Them)
- 10 32 of the Very best Place of work Pranks & Sensible Jokes to Use at Paintings
- 11 Mullenweg / The WordPress Global: A Glance At Safety And…
0 Comments