Divi 5 makes it easy to construct timelines which might be transparent, versatile, and simple to reuse. On this loose pack, you’ll get 11 unstyled Timeline Sections — every keen on blank construction so you’ll be able to plug on your personal design device, presets, and branding. Drop one onto any web page, attach it for your kinds, and get started telling your tale. No further setup required.
Preview
Right here’s a handy guide a rough take a look at all 11 Timeline Sections integrated 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 at no cost. 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:prior to { border-top-color: #ffffff !necessary; border-left-color: clear !necessary; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !necessary; border-left-color: clear !necessary; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:prior to { background: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !necessary } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .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 !necessary;}
Obtain For Unfastened
Sign up for the Divi E-newsletter and we can electronic mail you a replica of without equal Divi Touchdown Web page Format Pack, plus lots of alternative wonderful and loose Divi assets, pointers and methods. Observe alongside and you are going to be a Divi grasp very quickly. If you’re already subscribed merely kind on your electronic mail cope with under and click on obtain to get admission to the structure pack.
You’ve gotten effectively subscribed. Please take a look at your electronic mail cope with to substantiate your subscription and get get admission to to loose weekly Divi structure packs!
What’s Incorporated (11 Exports)
After you obtain and unzip the document, you’ll in finding 11 Timeline Phase exports.
Unstyled — Person Timelines (11) → Blank structural layouts with minimum styling, waiting on your personal presets and Design Variables.
Best possible beginning issues for challenge roadmaps, procedure overviews, product trips, and release timelines.
How To Use The Timeline Sections
Stay your obtain folder to hand — we’ll import, then upload a bit to a web page.
1. Import Sections Into The Divi Library
Cross to Divi → Divi Library. Click on Import & Export on the height of your display screen.
Within the Import & Export Layouts modal, transfer to the Import tab, then click on Select Document and make a selection your JSON.
Select any Timeline structure JSON you wish to have to make use of, then click on Import Divi Builder Layouts.
2. Upload A Timeline Phase To Any Web page
Open a web page within the Visible Builder and upload a brand new Phase.
Within the Insert Phase modal, click on Upload From Library and make a selection a Timeline structure.
In the end, click on Use This Phase.
3. Change The Content material
Exchange dates, headings, descriptions, and CTAs to compare your challenge or tale. Those layouts make the most of core Divi modules (Textual content, Symbol, Icon, Button, and so forth.), making edits simple. Use the right-click menu to duplicate/paste kinds in the event you’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 throughout the construction — for instance: Phase → 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 all your opting for.
To switch 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 appropriate) to interchange the textual content in seconds.
4. Regulate Kinds (Not obligatory)
All timelines are structurally waiting as-is, however you’ll be able to temporarily exchange their styling by way of the usage of the Divi 5 Inspector characteristic. 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 structure within the Design tab. Regulate the Format Taste (CSS Grid or Flex), Gaps, Format Path, and extra with a couple of clicks.
Save your favourite model as a Preset to temporarily observe it right through your website conveniently.
Guidelines For Efficient Timelines
Small alternatives upload up. Listed below are fast wins to stay your timelines transparent and impactful.
Stay Steps Brief
Use Divi 5’s Customizable Responsive Breakpoints to stay every step concise on smaller display screen sizes. Intention for brief headings and 1–3 traces of textual content on cell, particularly with multi-column layouts, to keep away from overwhelming small displays.
You’ll additionally use Divi AI to summarize lengthy paragraphs into scannable timeline steps, preserving the focal point on key milestones.
Spotlight Key Milestones
When including timelines for your site, make your maximum necessary milestones stand out. Use transparent labels, dates, and quick descriptions. Imagine including icons or small visuals for primary levels (reminiscent of launches, releases, and achievements) to assist customers temporarily scan the tale.
Be Conscious Of Distinction
When the usage of textual content over photographs, gradients, or coloured backgrounds, make sure that the background accommodates sufficient distinction for clarity. Use Divi 5’s Background Gradient choices so as to add a light-to-medium gradient in the back of your timeline textual content, making every step simple to learn. That is necessary no longer just for design, but in addition for accessibility.
Use Constant Imagery
When development timelines, use constant icon kinds, avatar shapes, and symbol sizes. Blending too many sizes and styles makes the design glance messy and no more visually interesting. If a picture is only ornamental, go away the alt textual content empty to keep away from useless noise for display screen 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 along with your maximum related or spectacular milestone, reminiscent of your newest release, largest 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 Flippantly
When the usage of movement, delicate hover or divulge results are sufficient. Keep away from heavy parallax results in the back of lengthy blocks of frame textual content. Imagine the usage of mild fades, slide-in results, or automated rotation on Carousels as timeline steps become visible, so the movement helps the content material fairly than distracting from it.
Get started Development In Divi 5 As of late
Those 11 unstyled timeline sections supply versatile, production-ready buildings that seamlessly combine along with your present design device. Use them for release roadmaps, product histories, provider processes, or editorial calendars, and stay iterating with Divi 5‘s fashionable equipment.
The submit 11 Timeline Designs For Divi 5 (Unfastened Obtain!) gave the impression first on Chic Subject matters Weblog.
WordPress Web Design