Timelines make sequences more uncomplicated to know. An organization historical past, product roadmap, undertaking segment, resume, onboarding procedure, or case learn about can all develop into more uncomplicated to scan when every step follows a transparent visible trail.
Divi 5’s Timeline module will provide you with a local technique to construct the ones layouts without delay within the Visible Builder. You’ll be able to upload Timeline Pieces, make a choice a vertical or horizontal route, taste the observe, markers, connectors, playing cards, and textual content, and use alternating layouts with out customized CSS.
On this submit, we’ll discover how the Timeline module works, the place its maximum necessary settings reside, and how you can construct a responsive timeline you’ll reuse throughout your Divi 5 web page.
What Is The Timeline Module In Divi 5?
The Timeline module is a local Divi 5 module for showing a series of occasions alongside a connecting observe.
Each and every match lives inside of its personal Timeline Merchandise kid module. That implies you’ll upload, edit, replica, delete, reorder, and magnificence particular person pieces whilst nonetheless managing the full timeline from one dad or mum module.
Use it for:
- Corporate or emblem historical past pages.
- Product roadmaps and unlock plans.
- Mission timelines and case research.
- Resume, CV, training, and certification sections.
- Step by step processes, onboarding flows, and repair explainers.
Ahead of this module, many timeline layouts required stacked modules, customized CSS, or third-party extensions. Now you’ll construct the construction and magnificence it from Divi’s local settings.
What Makes The Timeline Module Helpful?
The Timeline module is not only a listing of playing cards. It will provide you with regulate over the timeline construction, the content material inside of every match, and the visible device that connects the whole thing in combination.
Timeline Pieces Are Unbiased Kid Modules
Each and every milestone is controlled as a Timeline Merchandise. You’ll be able to edit the date or label, identify, frame textual content, icon, hyperlink, and item-level design settings for every access.
This makes the module more uncomplicated to care for than a timeline constructed from separate rows and modules. You’ll be able to reorder occasions from the dad or mum module with out rebuilding the format.
Timeline Pieces Strengthen Nested Modules
Timeline Pieces additionally improve Divi 5’s Nested Modules workflow. That implies a timeline access can comprise greater than easy textual content.
You’ll be able to upload supporting modules inside of a Timeline Merchandise, comparable to pictures, buttons, icons, or different content material modules. This turns a elementary milestone right into a richer content material card when the timeline wishes extra context.
Use nested content material sparsely. A timeline will have to keep scannable. Upload additional modules best after they lend a hand provide an explanation for the development.
Even Choice Teams Make Alternating Layouts More uncomplicated
The Timeline module comprises Even choice teams for each 2d merchandise. Those can help you taste alternating pieces another way with out manually modifying every one.
For instance, you’ll give alternating playing cards other backgrounds, modify spacing on each 2d merchandise, or create a left-right rhythm in a vertical timeline.
Even choice teams are to be had for Merchandise, Spacer, Card, Date Textual content, Identify Textual content, and Frame Textual content. The observe, connector, and marker kinds are in most cases best possible saved constant so the timeline nonetheless feels unified.
Composable Settings Upload Deeper Keep watch over
The Timeline module works with Composable Settings. You’ll be able to permit further choice teams on particular portions of the module when you want extra regulate.
For instance, you’ll permit Animation, Become, or Filters at the Card choice team as a substitute of animating all the Timeline Merchandise.
This issues as a result of a Timeline Merchandise incorporates more than one portions: the cardboard, marker, connector, and spacing construction. Composable Settings can help you goal the section you if truth be told wish to have an effect on.
Design Variables And Presets Stay Timelines Reusable
Timelines frequently seem on a couple of web page. A roadmap web page, About web page, case learn about web page, and repair procedure web page might all use the similar visible development.
Use Design Variables for colours, spacing, font sizes, border radius, and different reusable values. Then save the completed Timeline module as an Component Preset, or save targeted Choice Team Presets for playing cards, markers, dates, and frame textual content.
This assists in keeping the timeline attached for your greater Divi 5 design device.
Timeline Module Settings Evaluation
The Timeline module makes use of the similar Divi 5 construction as different modules: Content material, Design, and Complex tabs.
Content material Tab
The Content material tab is the place you organize the Timeline Pieces and module-level content material settings.
You’ll be able to:
- Upload, edit, replica, delete, and reorder Timeline Pieces.
- Set module-level hyperlinks and background kinds.
- Permit Loop settings when the timeline will have to pull from dynamic content material.
- Modify Order settings when the module sits inside of a Flexbox or Grid format.
- Use Meta settings to label the module within the Visible Builder.
Loop improve is particularly helpful for dynamic timelines, comparable to a roadmap, unlock record, match historical past, or case learn about archive.
Design Tab
The Design tab controls the visible construction and styling.
Vital design teams come with:
- Timeline: Controls the full timeline format, route, place, and spacing.
- Observe: Kinds the principle line that connects the occasions.
- Merchandise: Kinds the wrapper for every Timeline Merchandise.
- Spacer: Controls the distance round pieces alongside the observe.
- Connector: Kinds the quick line between a marker and its card.
- Marker: Kinds the dot, icon, or form that marks every match.
- Card: Kinds the content material field that holds the date, identify, and frame.
- Date Textual content: Kinds the date or label textual content.
- Identify Textual content: Kinds every Timeline Merchandise identify.
- Frame Textual content: Kinds every Timeline Merchandise description.
You additionally get the standard Divi design teams comparable to Sizing, Spacing, Border, Field Shadow, Filters, Become, and Animation.
Complex Tab
Use the Complex tab for extra technical regulate. This comprises attributes, customized CSS, semantic HTML choices, prerequisites, Interactions, visibility settings, transitions, place controls, and scroll results.
Maximum timelines will also be constructed from the Content material and Design tabs on my own. Use Complex settings when you want additional regulate over habits, visibility, or customized markup.
How To Construct A Timeline In Divi 5
Now let’s construct a blank timeline from scratch.
The instance under makes use of a vertical timeline with six stages, alternating playing cards, customized markers, and responsive changes for smaller monitors.
Step 1: Upload The Timeline Module
Create a brand new web page or open an present one within the Visible Builder.
Upload a Phase and a single-column Row. Then click on the grey plus icon within the Row, seek for Timeline, and upload the Timeline module.
Divi a lot the module with starter Timeline Pieces, so you’ll see the construction instantly. Stay them as placeholders or delete them and get started recent.
Step 2: Upload Timeline Merchandise Content material
Open the Timeline module settings. Within the Content material tab, you are going to see the record of Timeline Pieces.
Click on Upload Timeline Merchandise to create a brand new merchandise. You’ll be able to additionally replica an present merchandise if you wish to maintain its construction or styling.
Open a Timeline Merchandise and increase Merchandise Content material. Upload the date or label, identify, and frame textual content.
The Date box does now not should be a literal date. It can be a segment label, step quantity, unlock identify, or brief standing observe. For instance:
Segment 1 • Weeks 1–2
Within the Timeline Merchandise’s Content material tab, you’ll additionally upload an icon, hyperlink the object, modify background settings, upload nested parts, and use different item-level controls.
Upload the remainder of your timeline content material ahead of styling. As soon as every merchandise has a identify, the object labels develop into more uncomplicated to acknowledge within the dad or mum module record.
Step 3: Set The Total Timeline Structure
Transfer to the dad or mum Timeline module’s Design tab.
Open the Timeline choice team. That is the place you place the basis for the format.
Use those controls to select the timeline route, set how pieces sit down relative to the observe, and modify the space between pieces. For a vintage corporate historical past or undertaking timeline, a vertical alternating format is in most cases a powerful start line.
For cellular, plan to simplify the format later. Alternating timelines glance nice on extensive monitors, however a left-aligned or right-aligned format is frequently more uncomplicated to learn on telephones.
Step 4: Taste The Observe
The Observe choice team controls the road that runs throughout the timeline.
Use it to taste the observe’s coloration, gradient, width, top, spacing, border, and shadow.
Stay the observe visual however now not overpowering. It will have to attach the occasions, now not compete with the content material playing cards.
Step 5: Taste Pieces, Spacers, And Connectors
The Merchandise choice team kinds the wrapper round every Timeline Merchandise.
Use it for item-level background, sizing, spacing, borders, and shadows. The Merchandise (Even) choices can help you taste each 2d merchandise another way.
The Spacer choice team controls the distance round pieces alongside the observe. It additionally comprises Even choices when you wish to have alternating spacing.
For those who upload nested parts to Timeline Pieces, the Show Components On Spacer environment can position the ones parts within the spacer house for extra complex compositions.
The Connector choice team controls the quick line between the marker and the cardboard.
Taste the connector so it visually belongs to the similar device because the observe. Matching colours or comparable Design Variables paintings neatly right here.
Step 6: Taste The Markers
Markers are the dots, icons, or shapes that sit down at the observe for every match.
Open the Marker choice team to taste marker coloration, dimension, background, border, shadow, spacing, and place.
You’ll be able to additionally upload customized icons from every Timeline Merchandise’s Content material tab. Use icons after they explain the milestone. For instance, a release icon, checkmark, calendar, trophy, or caution icon could make necessary stages more uncomplicated to acknowledge.
You’ll be able to place markers at the beginning, heart, or finish of every Timeline Merchandise.
Step 7: Taste The Timeline Playing cards
The Card choice team controls the content material field for every Timeline Merchandise. Use it to taste the cardboard background, border, radius, shadow, and padding.
In an alternating format, use Card (Even) to taste each 2d card another way. You may use a delicate background alternate, a relatively other border coloration, or a unique shadow route.
Stay alternating kinds intentional. An excessive amount of distinction between atypical or even playing cards could make the timeline really feel inconsistent.
Step 8: Taste Date, Identify, And Frame Textual content
The Timeline module offers separate typography controls for the date or label, identify, and frame replica. Use Date Textual content to taste the date label on the height of every card.
The Show Date On Spacer environment can transfer the date into the spacer house. It will lend a hand steadiness alternating layouts via striking brief labels at the reverse aspect of the observe.
Use Identify Textual content for the milestone identify.
Use Frame Textual content for the outline.
Even variants are to be had for Date Textual content, Identify Textual content, and Frame Textual content. Use them when alternating playing cards want other textual content colours or alignment.
Step 9: Upload Card Animations With Composable Settings
Animation works best possible when it helps the timeline’s waft. A easy fade, slide, or zoom could make every milestone really feel like a part of a guided tale.
To animate the playing cards best, open the dad or mum Timeline module’s Design tab. Hover over the Card choice team and click on the Toggle Choices icon.
Permit the Animation choice team. You’ll be able to additionally permit Filters or Become if the design wishes them.
Select an Animation Taste, comparable to Fade, Slide Up, Zoom In, or Leap. In case you are the use of alternating playing cards, you’ll permit Animation on Card (Even) too and use a unique lengthen or route.
Step 10: Use Person Overrides When Wanted
Guardian Timeline settings observe throughout the entire module. Person Timeline Merchandise settings observe best to that merchandise.
To edit a unmarried merchandise, open the Timeline module, click on the Timeline Merchandise you wish to have to customise, and use that merchandise’s Content material or Design tab.
You’ll be able to observe item-level design adjustments for a featured milestone, ultimate step, caution state, release date, or necessary consequence.
You’ll be able to additionally animate a person Timeline Merchandise from its personal Animation team.
Remember that item-level animation impacts the entire Timeline Merchandise, together with its marker and connector. For those who best need the cardboard to animate, permit Animation at the Card choice team with Composable Settings as a substitute.
Within the particular person Timeline Merchandise’s Content material tab, you’ll additionally upload a customized marker icon, set a hyperlink, or upload nested modules.
Step 11: Check The Timeline Responsively
As soon as the desktop timeline seems to be appropriate, transfer to pill and make contact with perspectives within the Visible Builder.
Alternating layouts frequently want a more practical cellular remedy. Within the Timeline settings, you’ll modify the Place environment for smaller breakpoints so the timeline turns into left-aligned or right-aligned on cellular.
This prevents the playing cards from feeling cramped on slender monitors.
Additionally test:
- Card width and padding.
- Frame replica duration.
- Marker dimension.
- Connector spacing.
- Date placement.
- Animation timing.
When the whole thing seems to be just right, save the web page.
Step 12: Save The Timeline As A Preset
For those who plan to reuse the timeline taste, put it aside as a preset.
Click on the Timeline module header to expose the preset icon. Select New Preset From Present Kinds, give the preset a transparent identify, and put it aside.
Use a role-based identify, comparable to Timeline Roadmap Alternating, Timeline Corporate Historical past, or Timeline Procedure Steps.
That makes the preset more uncomplicated to reuse later.
Very best Practices For Timeline Design
A timeline is best helpful if other people can perceive the collection briefly. Use those practices ahead of publishing.
Stay Each and every Merchandise Targeted
Timeline playing cards will have to be brief sufficient to scan.
Use the identify for the principle concept and the frame textual content for the supporting element. If an merchandise wishes a protracted clarification, hyperlink to a devoted web page or upload a button with nested content material.
Use Constant Icons, Colours, And Spacing
A timeline can develop into visually noisy if each merchandise makes use of a unique coloration, icon, or card taste.
Select a small set of design regulations and repeat them. Use Design Variables for shared colours and spacing values so updates keep simple.
Spotlight Vital Milestones Deliberately
Some occasions deserve additional consideration. Use marker dimension, marker coloration, card background, icon selection, or typography to focus on them.
Do that sparingly. If each match is highlighted, none of them stand out.
Use Horizontal Timelines For Quick Sequences
Horizontal timelines paintings best possible when the collection is brief and the labels are compact.
Use them for procedure overviews, release stages, roadmap summaries, or step by step previews. For longer histories or detailed undertaking timelines, a vertical format is in most cases more uncomplicated to learn.
Use Vertical Timelines For Longer Tales
Vertical timelines are higher for detailed content material as a result of they apply the herbal scroll route of the web page.
They paintings neatly for corporate histories, resumes, case research, and lengthy undertaking timelines. For those who use alternating playing cards, take a look at the cellular format sparsely and simplify the cardboard place on smaller monitors.
Check Customized Breakpoints
Use Customizable Responsive Breakpoints to test the timeline on the widths that topic to your design.
Search for cramped playing cards, lengthy date labels, outsized markers, and animations that really feel too sluggish on smaller monitors.
Obtain And Set up The Instance Information
That can assist you get began, we created a full-page format the use of the Timeline module from this submit. After downloading the zip document, move for your WordPress dashboard and open Divi > Divi Library. Click on Import & Export.
Open the Import tab, make a choice the JSON document out of your laptop, and click on Import Divi Builder Layouts.
After the document imports, create a brand new web page and open the Visible Builder. Within the Builder Bar, click on the blue plus icon.
When the Insert Structure modal seems, make a choice Stored Structure.
Make a selection New Timeline Module in Divi 5 to load the format.
Construct Your Personal Timelines In Divi 5 These days!
The Timeline module offers Divi 5 a local technique to construct chronological and step-based layouts with out piecing in combination the construction from separate modules.
Use Timeline Pieces for every match. Use the observe, markers, connectors, playing cards, and textual content teams to form the visible device. Use Even choice teams for alternating layouts. Use Composable Settings when you want to animate or taste a selected a part of the timeline. Use presets when the similar timeline taste will have to seem in different places.
Whether or not you’re development an organization historical past, product roadmap, undertaking timeline, resume, onboarding waft, or procedure segment, the Timeline module will provide you with a cleaner technique to flip a series into a visible tale.
The submit Exploring Divi 5’s New Timeline Module gave the impression first on Elegant Themes Blog.
0 Comments