Divi 5 makes it easy to construct timelines which are transparent, versatile, and simple to reuse. On this loose pack, you’ll get 11 unstyled Timeline Sections — every considering blank construction so you’ll be able to plug to your personal design gadget, presets, and branding. Drop one onto any web page, attach it on your types, and get started telling your tale. No additional setup required.
Preview
Right here’s a handy guide a rough have a look at all 11 Timeline Sections incorporated within the pack. The obtain is additional down the submit.
Subscribe To Our Youtube Channel
Obtain 11 Unstyled Timeline Sections For Divi 5
Get all 11 sections free of charge. Import them into your Divi Library and upload them to any web page within the Visible Builder.
@media handiest display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of { 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 { colour: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:ahead of { 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 Loose
Sign up for the Divi E-newsletter and we will be able to e-mail you a replica of without equal Divi Touchdown Web page Structure Pack, plus heaps of alternative wonderful and loose Divi sources, pointers and methods. Observe alongside and you’re going to be a Divi grasp very quickly. If you’re already subscribed merely kind to your e-mail deal with underneath and click on obtain to get right of entry to the format pack.
You’ve effectively subscribed. Please test your e-mail deal with to substantiate your subscription and get get right of entry to to loose weekly Divi format packs!
What’s Incorporated (11 Exports)
After you obtain and unzip the document, you’ll to find 11 Timeline Segment exports.
Unstyled — Particular person Timelines (11) → Blank structural layouts with minimum styling, waiting in your personal presets and Design Variables.
Easiest beginning issues for undertaking roadmaps, procedure overviews, product trips, and release timelines.
How To Use The Timeline Sections
Stay your obtain folder at hand — we’ll import, then upload a bit to a web page.
1. Import Sections Into The Divi Library
Pass to Divi → Divi Library. Click on Import & Export on the height of your display.
Within the Import & Export Layouts modal, transfer to the Import tab, then click on Make a choice Record and make a selection your JSON.
Make a choice any Timeline format JSON you need to make use of, then click on Import Divi Builder Layouts.
2. Upload A Timeline Segment To Any Web page
Open a web page within the Visible Builder and upload a brand new Segment.
Within the Insert Segment modal, click on Upload From Library and make a selection a Timeline format.
In any case, click on Use This Segment.
3. Change The Content material
Change dates, headings, descriptions, and CTAs to compare your undertaking or tale. Those layouts make the most of core Divi modules (Textual content, Symbol, Icon, Button, and so on.), making edits simple. Use the right-click menu to replicate/paste types for those who’re matching different portions of the web page.
With those Timeline layouts, Divi 5 makes it simple to switch content material and reorder steps. Open any step’s Module Settings to edit its content material.
If a step comprises a picture or icon, you’ll be able to navigate during the construction — as an example: Segment → Row → Column → Module — and replace the Symbol choices.
Click on the Symbol tab, hover over the Settings Icon, and substitute the picture with one in every of your opting for.
To exchange textual content, hover over the related Module within the canvas to expose the Module’s Settings icon.
Click on into the Heading box (or Frame box, if acceptable) to interchange the textual content in seconds.
4. Modify Kinds (Non-compulsory)
All timelines are structurally waiting as-is, however you’ll be able to briefly exchange their styling via the usage of the Divi 5 Inspector function. Click on the Inspector Icon to turn on the panel.
When the Inspector Modal opens, there are 3 tabs — Kinds, Content material, and Presets — the place you’ll be able to simply exchange the colours, fonts, or step content material with a couple of clicks.
You’ll additionally tweak your format within the Design tab. Modify the Structure Taste (CSS Grid or Flex), Gaps, Structure Course, and extra with a couple of clicks.
Save your favourite model as a Preset to briefly follow it all through your website conveniently.
Pointers For Efficient Timelines
Small possible choices upload up. Listed below are fast wins to stay your timelines transparent and impactful.
Stay Steps Quick
Use Divi 5’s Customizable Responsive Breakpoints to stay every step concise on smaller display sizes. Purpose for brief headings and 1–3 strains of textual content on cell, particularly with multi-column layouts, to steer clear of overwhelming small displays.
You’ll additionally use Divi AI to summarize lengthy paragraphs into scannable timeline steps, protecting the focal point on key milestones.
Spotlight Key Milestones
When including timelines on your web page, make your maximum vital milestones stand out. Use transparent labels, dates, and quick descriptions. Believe including icons or small visuals for main stages (comparable to launches, releases, and achievements) to assist customers briefly scan the tale.
Be Conscious Of Distinction
When the usage of textual content over photographs, gradients, or coloured backgrounds, make certain that the background accommodates sufficient distinction for clarity. Use Divi 5’s Background Gradient choices so as to add a light-to-medium gradient at the back of your timeline textual content, making every step simple to learn. That is vital now not just for design, but additionally for accessibility.
Use Constant Imagery
When construction timelines, use constant icon types, avatar shapes, and symbol sizes. Blending too many styles and sizes makes the design glance messy and not more visually interesting. If a picture is solely ornamental, depart the alt textual content empty to steer clear of useless noise for display readers.
Order For Have an effect on
Make a decision whether or not your tale makes extra sense chronologically or in reverse-chronological order. Lead together with your maximum related or spectacular milestone, comparable to your newest release, greatest win, or present section — after which let customers scroll again in time. Use contrasting colours or better headings to emphasise the important thing moments.
Movement Calmly
When the usage of movement, refined hover or expose results are sufficient. Keep away from heavy parallax results at the back of lengthy blocks of frame textual content. Believe the usage of delicate fades, slide-in results, or computerized rotation on Carousels as timeline steps come into sight, so the movement helps the content material reasonably than distracting from it.
Get started Construction In Divi 5 As of late
Those 11 unstyled timeline sections supply versatile, production-ready constructions that seamlessly combine together with your present design gadget. Use them for release roadmaps, product histories, provider processes, or editorial calendars, and stay iterating with Divi 5‘s fashionable gear.
The submit 11 Timeline Designs For Divi 5 (Free Download!) seemed first on Elegant Themes Blog.
Contents
- 1 Preview
- 2 Obtain 11 Unstyled Timeline Sections For Divi 5
- 3 Obtain For Loose
- 4 You’ve effectively subscribed. Please test your e-mail deal with to substantiate your subscription and get get right of entry to to loose weekly Divi format packs!
- 5 What’s Incorporated (11 Exports)
- 6 How To Use The Timeline Sections
- 7 Pointers For Efficient Timelines
- 8 Get started Construction In Divi 5 As of late
- 9 How To Add ARIA And data-* Attributes In Divi 5
- 10 WP Engine – WordPress Safety: Protective Your New Mexico Web page…
- 11 How to Use WordPress Block Patterns: A Simple Guide
0 Comments