CodeCanyon Timelentor - WordPress Plugin

How to Set Up CodeCanyon Timelentor for Clear, Visual Timelines in Elementor

CodeCanyon Timelentor is not meant for a basic text block. It is built for cases where an event, a project phase, a company story, or a personal journey needs to be read as a sequence. In this guide, we will walk through how to prepare a WordPress site, where to find the widget in Elementor, how to build your first timeline, which settings to review after installation, and how to confirm the final result does not break the mobile layout.

This article is written as a practical guide for site owners, content managers, and webmasters who already work with Elementor or are willing to use it for a visual content block. It is not a retelling of the product listing. Instead, we will focus on real-world use cases: an agency timeline, a project roadmap, an event schedule, a portfolio with project stages, an achievements section, and a compact knowledge base for common issues.

Special attention is given to the product's limits. Timelentor provides a set of timeline layouts and visual controls, but it does not replace an event management system, a project catalog, a booking calendar, or a complex database. If you understand that boundary from the start, it becomes much easier to use the plugin in a focused way without overloading the page.

What the timeline widget actually solves

A timeline is useful when a regular list loses the relationship between items. The visitor should not just see four cards. They should understand the order: what happened first, what comes next, where the current stage sits, and why the elements are connected. Timelentor addresses that need with ready-made Elementor layouts. The available sources confirm four designs, vertical and horizontal formats, color settings, borders, shadows, hover effects, and responsive behavior.

The main advantage of this approach is that the editor works inside the familiar Elementor visual environment. They add the block to a page, fill in the items, and adjust the appearance without separate coding. For a company site, that makes it easy to build a growth story. For a portfolio, it helps show the client journey from challenge to outcome. For an educational project, it can present a course as a sequence of modules. For a blog, it can organize key posts in chronological order.

Timelentor works especially well when each item includes a date, a stage, a short headline, an explanation, and sometimes a link to a deeper page. If the elements are not connected by time or process, standard cards, a services grid, an accordion, or regular Elementor sections are usually a better fit. A timeline used purely for decoration quickly becomes hard to read: the user sees a line and dots, but does not understand why they are there.

Where a timeline works best

The real value appears in scenarios where sequence explains the value on its own:

• A company history with major growth milestones, new service launches, and key achievements.
• A product roadmap where development, testing, and release stages appear in a logical order.
• An event schedule that presents the agenda for a conference, webinar, or workshop series.
• A portfolio case study where the visitor can follow the path from the original problem to the implemented solution.
• A personal profile, resume, career path, awards list, or educational track.

For each scenario, decide in advance what the unit of the timeline will be. It might be a date, a stage, a year, a sprint name, a module number, a city, a project category, or a short status. If those units are mixed, for example one point refers to a year, another to a service, and a third to a client review, the structure starts to feel random.

When the widget may be unnecessary

The plugin is not worth installing just because the page needs a nice-looking section. If you only have two items, a timeline is usually excessive. If you have more than fifteen, the block can become long and tiring without filters, pagination, or grouping. If the data is updated frequently from an external system, you should look for a solution with a dynamic data source, because Timelentor is primarily designed for manually building a timeline block inside Elementor.

You should also be more cautious on pages that already include lots of animation, sliders, and heavy visual sections. A timeline adds styles, images, icons, and sometimes hover effects. On its own, that block may still be lightweight, but on an overloaded page, any new visual section increases the risk of conflicts with the theme, cache, or script optimization tools.

Preparing the site before installation

Before installing the plugin, it is worth doing a quick environment check. That takes less time than diagnosing an empty block in Elementor later. Timelentor is positioned as an Elementor add-on, so the core dependency is obvious: Elementor must already be installed and active on the site. The developer also lists compatibility with Elementor Pro, but for a standard timeline block, start by confirming that Elementor itself is available and that you can access the page editor.

WordPress supports plugin installation through the admin panel and ZIP upload. For a commercial archive from a marketplace, the usual path is Plugins - Add New - Upload Plugin. Before that, make sure the user has administrator permissions, the site is not locked down from file installs, and the hosting environment allows ZIP uploads through the admin dashboard.

Quick pre-install checklist

Do not start on the homepage if it already receives traffic and drives important conversions. Create a separate page, reproduce the same container width and typical theme settings there, and then move the finished block into place. That approach is safer because you can catch conflicts before publishing.

Result check: before installation, open a page in Elementor and make sure the editor loads without errors. If Elementor is already freezing or showing an empty panel, Timelentor will not fix that problem - restore the base editor first.

Installation and the first check in WordPress

Installing Timelentor should not turn into a separate technical project. In most cases, the process is the same as with other commercial WordPress plugins: upload the ZIP archive through the admin panel, activate the plugin, and check whether the new widget appears in Elementor. It is important not to mix this stage with purchasing, licensing, or obtaining the archive - this guide covers working with the file you already have.

A safe installation sequence

1. Open the WordPress admin dashboard with an administrator account.
2. Go to Plugins - Add New and click Upload Plugin.
3. Select the plugin ZIP archive and start the installation with Install Now.
4. After a successful install, click Activate Plugin.
5. Open the test page through Edit with Elementor and search for Timelentor in the widget panel.
6. Add the widget to an empty section, save the page, and check the live preview.

If WordPress says the archive does not contain a valid plugin, the downloaded package may include documentation, source files, and a separate plugin ZIP rather than the installable file itself. In that case, locate the actual plugin archive inside the package. Do not unpack and upload random folders into wp-content/plugins unless you are sure about the structure.

What should appear after activation

After activation, the expected result is simple: Elementor should load, and the Timelentor widget or a similarly named timeline widget should be available in the panel. The developer's materials show that the workflow is based on dragging the widget into place and filling in items inside the editor. Because of that, your first test should not involve final design work. Add one or two entries, save the page, and confirm that the line, cards, dates, and buttons are displaying.

If the widget does not appear when you search in Elementor, check three things: whether the plugin is active, whether Elementor is active, and whether you are looking at an old editor tab that was opened before installation. Sometimes reloading the editor page and clearing the browser cache is enough. If that does not help, temporarily disable other Elementor add-ons and check whether the widget appears on a clean page.

How to design timeline content before styling it

The most common mistake with timelines is starting with color, icons, and effects before the event structure is clear. A nice layout will not save the block if the events are too long, the dates use different formats, and the headlines do not explain how the items differ. Before configuring Timelentor, it helps to collect the content in a table or document: date, short headline, explanation, link, image, status.

Timelines work best with short entries. The headline should make sense without reading the paragraph, the description should communicate one core point, and the button should link to a detailed page only when it is truly needed. If every item turns into a mini article, the visitor stops seeing the timeline. In that case, keep only the short takeaways in the timeline and move the details into separate pages or expandable sections below.

The logic of a single entry

A strong entry answers four questions:

• When it happened or which stage it belongs to.
• What exactly changed.
• Why it matters to the visitor.
• Where to go for more detail.

For a company history, that could mean a new service launch, an office opening, a major project, or a brand repositioning. For a product roadmap, it might be research, a prototype, closed testing, a public launch, or feature expansion. For a course, it could be a module, a topic, a hands-on assignment, or a result check. All entries need to follow the same logic, or the timeline will feel like a random collection of facts.

Vertical or horizontal format

Timelentor's sources list both vertical and horizontal timelines. The choice should not be based on taste alone. It depends on how many items you have and how wide the content needs to be. A vertical format works better for long stories, detailed descriptions, and mobile screens. A horizontal format is better for short roadmaps, process stages, and compact layouts. If you have more than five to seven items, test the horizontal version especially carefully because longer headings may require more height or extra scrolling.

For the first implementation, choose the format that is easiest to read without training the user. If the visitor has to guess where to scroll, where the next item is, or why part of the text is hidden, the visual idea loses to usability. In Timelentor, it is usually better to start with the clearest layout and add more complex effects only after the content has been validated.

Detailed Timelentor setup after installation

Once the plugin is active and the first test is complete, the main phase begins: configuring the widget for a real page. According to the developer, Timelentor emphasizes ready-made styles, colors, borders, shadows, hover effects, and responsive behavior. That means setup should not be random. Work in layers: content first, then layout, then visual accents, then responsiveness, then speed and compatibility checks.

Layer 1: content and order

Start by filling in the timeline entries without final styling. Check that the event order is logical, the headings are roughly the same length, the buttons lead to real pages, and any images you use play the same role across the block. Do not mix historical dates, services, and testimonials in a single timeline. If you need to show different types of information, build two timelines or split the page into separate content blocks.

How to check the order

Open the live preview and read only the headings. If the story is already understandable from the headings alone, the structure works. If the meaning disappears without the descriptions, rewrite the headings. Elementor makes it easy to jump back into the widget and edit the text quickly, but weak content is still weak content even in a polished design.

Layer 2: choosing the layout

Next, choose one of the available styles. Timelentor includes four ready-made designs, so for most use cases you do not need to build the visual structure from scratch. Compare styles by readability: where the date is easiest to see, where the description is not cramped, where the button does not compete with the heading, and where the timeline line does not dominate the content.

Calm vertical styles usually work best for a corporate history. A horizontal or compact scheme often fits a product roadmap. For a photo-based portfolio, choose a style where the image does not overpower the text. For an event schedule, large dates and short cards matter more.

Layer 3: colors, borders, and shadows

Your color settings should support the site's brand style, not turn the block into a separate promotional banner. The developer mentions controls for content colors, borders, and shadows. Start with three baseline decisions: the main line accent, the card background, and the button or link color. Do not change everything at once. If every dot, border, date, and button gets its own color, the timeline becomes noisy.

Practical rule of thumb: take the line color and active points from the site's main accent, keep the card background calm, and use shadow only if the cards get lost against the section background.

Layer 4: hover effects and buttons

Hover effects can improve interactivity, but they should not be the only way a user can tell that an element is clickable. If an entry includes a button, label it specifically: "View the case study," "See this stage," "Open the program." Do not rely on the same generic "Read More" label unless it truly fits the context. On a live page, a clear CTA is always better than a vague one.

Layer 5: responsiveness

Elementor supports responsive editing mode, and for a timeline that is critical. After you finish the desktop version, switch to tablet and mobile views. Look beyond width alone and pay attention to reading rhythm: does the date break awkwardly, does the description become too narrow, does the icon overlap the text, does the horizontal line turn into frustrating scrolling?

If the mobile version looks worse, do not try to rescue it only by shrinking the font. It is often better to choose a different style, shorten the description, remove an unnecessary image, or replace a long button label with a shorter one. Readable mobile content matters more than preserving the exact desktop composition.

Four designs and how to match the structure to the task

Timelentor's built-in styles should not be viewed as a simple scale of "prettier versus worse." Each style fits a different kind of story. The developer's demo shows that the blocks can look like several variations of vertical and horizontal storytelling: date-focused, image-based, card-based, line-based, and built around repeated visual elements. Your job is to choose the structure that supports reading instead of getting in the way.

Company history

For a company history, it is better to use a style where the date and heading are visible immediately while the description stays compact. Overly decorative icons often get in the way here because the visitor wants to understand how the business evolved, not decode symbols. If the stages are tied to specific achievements, add a link to a case study or service page. If the milestones are more brand-oriented, you can skip the button.

Project roadmap

A roadmap needs a clear status: planned, in progress, completed, under review. If Timelentor is used for that kind of structure, the status can be embedded in the headline or short description. Do not promise deadlines if they change often. For internal projects, it is usually better to use stage labels instead of exact dates so you do not have to update the block every time the schedule shifts.

Event schedule

For a schedule, the important pieces are time, topic, speaker, and a short action cue. A timeline works well if the program is linear. If the event has several parallel tracks, one shared timeline can become confusing. In that case, separate tabs or different blocks by room or day usually work better. Timelentor can still handle a single track, while a more complex schedule may be better moved into a table or a dedicated event plugin.

Portfolio and case studies

In a portfolio, a timeline can clearly show the process: audit, prototype, design, development, launch, support. That kind of block helps explain the value of the work because the client sees not only the polished final result, but also the path that led there. The key is not to turn every stage into a long report. Keep the stage outcome in the card and link to a detailed case study if one exists.

Always evaluate the style using real text, not demo Lorem ipsum. Demo content usually looks neat because every entry has the same length. On a real site, stage names, project titles, and descriptions almost always vary. That is why the final decision should be made only after the block has been filled with actual content.

Practical example: a timeline for "Project path from inquiry to launch"

Let's look at a concrete scenario for a web studio or digital agency site. The goal is to show potential clients how a project moves from first contact to delivery. A timeline like this helps reduce uncertainty: the visitor sees the sequence, understands when approvals happen, where the prototype appears, and what happens after launch.

Goal

You need a six-stage block: inquiry, brief, prototype, design, development, launch, and support. It should sit on the service page after the process explanation and before the contact form. Each item will include a short description, and only the entries that have a separate page or a detailed case study will include a button.

Preparation

Before working in Elementor, prepare the text. Do not write it directly in the widget from scratch because that makes repetition harder to notice. Start with a list:

1. Inquiry - we capture the task and the initial constraints.
2. Brief - we clarify the audience, structure, and success criteria.
3. Prototype - we build the page logic without final styling.
4. Design - we define the visual style and responsive states.
5. Development - we move the layout into WordPress and test the workflows.
6. Launch - we test the live page, forms, speed, and analytics.

After that, decide whether you need dates at all. For a service process, exact dates are usually unnecessary. Stages or step numbers work better because timing depends on the project. If you are showing a company history instead, dates become essential.

Steps in Elementor

1. Create a test page and open it with Edit with Elementor.
2. Add a section with a width close to where the block will eventually sit on the live page.
3. Find the Timelentor widget in the Elementor panel and drag it into the section.
4. Fill in the six entries using your prepared headlines and descriptions.
5. Choose a vertical style if each stage description takes more than one line.
6. Set the line color to match the site's main accent and keep the card backgrounds calm.
7. Check the mobile view and shorten descriptions if the cards become too long.
8. Save the page, open the live preview, and review the whole block through a visitor's eyes.

Expected result

The page should now show a readable process block. The visitor can see that the work does not begin with design right away, understands the role of the brief and the prototype, and sees that launch includes result verification. If the block sits before the inquiry form, it prepares the visitor for the next action and reduces the number of repetitive questions.

A detail that often gets in the way

If the cards look uneven, the problem is not always the plugin. Very often the text lengths are simply too different. Start by evening out the content: one heading should stay within about 4 to 6 words, the description should be 1 to 2 short sentences, and the button should appear only when necessary. Then adjust spacing, shadows, and borders.

Checking the result on the page and in the editor

Verification should happen in two places: inside Elementor and on the live site. The editor shows how the widget is built, but the final page can behave differently because of the theme, caching, deferred scripts, global styles, and container width. That is why after every meaningful change, you should save the page and open it in a separate tab as a regular visitor would.

What to check on desktop

• The timeline line should not compete with the headings and buttons.
• The cards should have even spacing and should not stick to the edges of the section.
• The buttons should be clear and should lead to the correct pages.
• Hover effects should not hide text or reduce contrast.
• The timeline typography should fit naturally with the rest of the page.

What to check on mobile

On mobile, reading order matters most. Make sure the date, headline, and description appear in a clear sequence. If the horizontal version becomes too cramped, switch to a vertical style or reduce the number of items. If icons start looking larger than the text, tone down the decorative elements. If buttons take up too much space, keep only the most necessary links.

What to check after re-enabling cache

After the final save, turn caching and optimization back on if you disabled them during testing. Clear the site cache, the browser cache, and, if a CDN is involved, the relevant service-side cache as well. Then review the page in a private window. If the block disappears or loses its styles, a script or CSS optimizer is probably merging files too aggressively. In that case, do not exclude all of Elementor. Exclude the specific optimization rule that is breaking the page.

Quick quality check: ask someone who did not build the page to explain in 10 seconds what the timeline is showing. If they only see a nice line but do not understand the story, the problem is in the content structure, not the colors.

SEO, speed, and accessibility without inflated expectations

The developer mentions an SEO-friendly approach and a lightweight plugin, but those phrases should not be treated as an automatic ranking boost. The search value of a timeline does not come from the widget itself. It comes from clear structure, useful text, internal links, and reasonable page speed. If the timeline contains meaningful headings, concise descriptions, and links to deeper resources, it helps develop the page topic. If it contains only decorative dates and repeated phrases, the SEO value will be minimal.

How to write timeline text

Each entry should add meaning. Do not repeat the service name in every point. It is better to explain the action and the result: "We gather requirements," "We present the prototype," "We test the forms," "We launch the page." Phrasing like that helps both users and search engines understand that the block is not purely decorative.

How to avoid slowing down the page

Do not add large images to every timeline point unless they are truly needed. If the use case does require visuals, optimize images to a reasonable size before uploading them to the media library. Do not enable effects just for motion. The longer the page is, and the more third-party Elementor widgets are used nearby, the more important it becomes to check the real page speed after publishing.

Accessibility and readability

A timeline should not rely on visuals alone. Use enough contrast, do not depend only on color, do not make dates too small, and do not hide important text behind hover interactions. If a card contains a button, its text should clearly explain the action. For images inside entries, use meaningful alt text in the media library when those images matter to understanding.

Also review the page's heading order as a whole. The plugin may render its elements nicely, but the overall page structure still needs to stay logical: the main heading already exists on the page, the following sections develop the topic, and the timeline supports one of those sections. Do not use the timeline as a replacement for the full text of a guide, service page, or case study.

How to integrate a timeline into a real page instead of just adding a pretty block

After the widget is configured, the next question is page composition. Even a good timeline can perform poorly if it appears without context. The visitor needs to understand in advance why they are looking at a sequence, what they should take away from it, and what action is expected after they finish reading it. Because of that, Timelentor works best as part of the page flow, not as a standalone decorative element.

On a service page, a timeline usually belongs after a short process explanation. First, the user learns what problem the service solves. Then they see the workflow stages. After that, they get proof - case studies, testimonials, examples of results - and only then move to the form. If the timeline appears too early, the visitor sees the stages before understanding the service's value. If it appears too late, the block can get lost after long sections.

Placement on a service page

For a service page, a strong sequence looks like this: client problem, brief solution, process timeline, proof of results, answers to objections, contact form. In that logic, Timelentor does not say "look how great we are." It explains how a person moves from inquiry to outcome. That difference matters. The timeline becomes a trust-building tool because it shows the order of work and reduces uncertainty.

Do not make every stage sound equally promotional. If each entry begins with lines like "We professionally..." or "We deliver high quality...", the user learns nothing new. Be specific instead: "We collect source materials," "We present the structure," "We align the visual style," "We test forms and analytics." That language feels calmer and more useful.

Placement on an About page

On an About page, Timelentor can work as a growth story. The key is balancing facts and meaning. There is no need to list every minor date. Choose the events that help explain the company as it exists today: a product launch, a change in specialization, a major project, team growth, expansion into a new market, or the introduction of support. If an event does not explain development, it is better left in the body text or omitted entirely.

A company history has another nuance: it should make sense to someone who does not know the internal context. An entry like "Moved to a new office" says very little by itself. An entry like "Opened a dedicated support studio to help clients faster after launch" explains why the event matters. In Timelentor, those meaning-based links are especially valuable because users read the block quickly.

Placement in a portfolio or case study

In a case study, it is usually better to use the timeline for a cause-and-effect chain rather than simple dates. For example: audit, hypothesis, prototype, test, implementation, result. A block like that helps show the team's work without turning the page into a long report. But it should not replace the case study itself. After the timeline, there should still be screenshots, metrics, quotes, or a result summary if those materials are available and relevant. The timeline shows the path, while the proof shows the value.

If the case involves a confidential client and the details cannot be disclosed, a timeline is a safe way to show the process without exposing extra data. In that case, the wording needs to be especially precise: "Identified the bottleneck in the inquiry form," "Reduced the path to submission," "Verified the mobile flow." Avoid empty stages like "Analysis," "Work," or "Final" without explanation.

Connecting internal links

If the entries include buttons or links, they should support the reader's path. In a company history, you can link to a detailed product page or case study. In a roadmap, link to a feature announcement. In a course outline, link to a module description. But if every entry leads to the same destination, the buttons lose their purpose. In Timelentor, it is usually better to keep fewer links and make them more precise.

A good rule: if the link does not help the user go deeper into that specific stage, it is better to remove it. A card without a button reads more cleanly than a card with a formal "Read More" button that leads to a generic section.

Editorial control: how not to ruin the timeline after publishing

A timeline is often created once and then expanded little by little. A few months later, a new stage gets added, then another one, then the text changes, and the original clarity disappears. If you want Timelentor to remain useful, set editing rules in advance. This matters even more on sites where Elementor is used not by one developer, but by several content managers.

A consistent entry format

Create a small editorial standard. For example: date or stage up to 12 characters, headline up to 6 words, description up to 160 to 220 characters, and a button only when there is a separate page. Those numbers are not universal, but the principle is important. When all entries have the same content density, Timelentor looks like an intentional block rather than a set of randomly added cards.

If you need to add a longer stage, first decide whether it can be split into two points or moved into a separate page. A timeline should not become the storage place for every detail. It shows the route, not the full project documentation.

Check after every new entry

After adding an entry, always review three states: desktop, tablet, and phone. A new point may look fine on its own while still breaking the overall rhythm. For example, a long headline can increase one card's height, an image can shift the vertical balance, and a button can add an extra line on mobile. If the block sits on an important page, that check takes less time than fixing the issue after someone complains.

What to record in project notes

For an internal team, it is helpful to keep short notes next to the task: which Timelentor style was chosen, which colors are used, which elements are disabled, which section class is assigned for CSS, and which cache rules were tested. That way, the next editor does not have to guess why the block was built the way it was. It lowers the risk of accidentally turning on an effect that already broke the mobile version, or replacing a vertical layout with a horizontal one without testing.

When it is better to create a second timeline

If different stories start getting mixed into one block, do not be afraid to split them apart. For example, on a company page you might show the business history separately from the client process. On a product page, you might separate the roadmap from the implementation process. One long timeline with mixed item types is usually worse than two shorter ones because the user loses the rule for how to read it.

This separation is especially important on mobile screens. Two compact blocks with clear headings are easier to read than one long block where the user scrolls through dozens of cards and forgets how the story started.

Limitations worth accepting in advance

Every visual Elementor add-on has boundaries. Timelentor should not be expected to handle everything: complex data storage, schedules with filters, access permissions, email sequences, attendee registration, automatic chronology generation from blog posts, or integration with an external CRM. The more precisely you understand where the widget's role ends, the more stable your result will be.

Manual content versus dynamic data

The sources describe Timelentor as a widget for building and customizing a timeline inside Elementor. That is excellent for manual control, but it does not automatically mean support for arbitrary post types, ACF fields, calendars, or external tables. If you need stages to appear automatically from a database, look for confirmed documentation for that exact integration before implementation. If no such documentation exists, do not build your site architecture around an unverified feature.

Ready-made styles versus a fully custom design

The four built-in designs speed up the workflow, but they also define the limits. If a designer requires completely custom mechanics, complex animation, unusual scroll behavior, or deep integration with the theme template, a ready-made widget may feel restrictive. In that case, it is often cheaper and more reliable to build a dedicated block for the task than to force Timelentor into a role it was never meant to play.

Compatibility with the theme and other add-ons

The developer states compatibility with WordPress themes and major browsers, but a real site always has its own specific environment: a theme, a child theme, Elementor global styles, cache, optimization tools, other widget packs, and custom CSS. That is why final compatibility is verified on your actual page, not by a promise on the product listing. The more visual add-ons are installed, the more carefully you need to watch for CSS and JS conflicts.

Updates and support

Commercial plugins depend on developer support and updates for WordPress and Elementor. The sources include a changelog, so before any important rollout, check when the product was last updated and what changed. But do not insert that date into the public page text unless the reader genuinely needs it. For the site itself, the practical takeaway is more important: make a backup before updating, test on a staging page, and do not update everything at once directly on a live homepage without control.

Localization and safe visual adjustments

The sources state that Timelentor is translation-ready and includes a .pot file. That matters for plugin interface strings and public-facing elements that might appear in the wrong language. At the same time, you control the text of the timeline entries directly in Elementor, so that content should be written in the page's language from the start.

If the live page still shows an English button like Read More, first look for a text setting inside the widget itself. If that option exists, it is the safest fix. If the text belongs to the plugin's internal strings, use WordPress's standard translation methods or a string translation plugin. Do not edit Timelentor files directly, because those changes may be lost during updates.

When a small CSS adjustment makes sense

Sometimes you do not need to change the widget logic at all, only to tune the look slightly to fit the theme: add more space between cards, soften a shadow, or align a button. Without confirmed classes for the exact plugin version, do not invent highly specific CSS that targets the plugin's internal markup. A safer approach is to add your own section CSS class in Elementor, for example project-timeline, and scope the adjustment to that area.

The example below does not rely on the plugin's internal API and does not modify its files. You can add it to the child theme CSS or another safe location for custom CSS. Before using it, inspect the selectors in the browser and replace the internal card class if the actual class name is different.

.project-timeline {
  --timeline-accent: #4f46e5;
}

.project-timeline a {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.project-timeline .elementor-button,
.project-timeline a[role="button"] {
  border-radius: 6px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.project-timeline .elementor-button:hover,
.project-timeline a[role="button"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.18);
}

The check is simple: refresh the page, hover over the timeline button, and make sure the effect does not shift neighboring elements. Rolling it back is simple too - remove that CSS or remove the project-timeline class from the section. If buttons elsewhere on the site break after the change, the selector is too broad.

Which sites CodeCanyon Timelentor fits best, and where another solution makes more sense

Timelentor is a good fit for sites where the timeline is a standalone visual block inside an Elementor page. That includes service landing pages, About pages, portfolios, case study pages, educational programs, event presentations, and small roadmaps. The product's main strength is the ability to build a styled sequence quickly without separate development.

The plugin may not be the best choice if you need a large event system with dates, registrations, filters, categories, and automatic output from a database. It can also be unnecessary if the site does not use Elementor. On a block-editor site where Elementor is not needed, it makes more sense to look for a block-based or shortcode timeline. On a site that already relies on another large Elementor add-on pack with its own timeline widget, compare feature overlap and performance cost before adding another tool.

How to decide before implementation

Answer five questions:

• Will the timeline be used on multiple pages or only once?
• Does the editor need manual control over every entry?
• Are four built-in designs and basic customization enough?
• Does the site already run Elementor without conflicts or heavy delays?
• Is there real content that actually benefits from chronological presentation?

If the answers are yes, Timelentor is worth testing. If the timeline needs to be part of a large event database, catalog, or dynamic feed, look for a tool built around that data model. Closer to the final check, you can download the installation file, install it on a staging copy of the site, and run through the short workflow from this guide.

If Timelentor does not display or looks wrong

It is easiest to troubleshoot from simple to complex: first verify activation and the editor, then theme conflicts, then cache, and only after that move on to rarer issues. Below are the symptoms most typical of Elementor add-ons and timeline widgets.

The widget cannot be found in Elementor

Symptom: the plugin is activated, but the Timelentor widget or a similar timeline element does not appear in the Elementor panel. Possible causes include Elementor not being active, the editor having been opened before installation, the plugin failing to load because of a PHP error, a conflict with another add-on, or an incorrectly installed archive.

Check the Plugins page, refresh the Elementor editor, try searching by part of the name, and then open the browser console. If there is a fatal error, temporarily disable other Elementor add-ons and repeat the test on an empty page. If the widget appears, re-enable the add-ons one by one.

The timeline is visible in the editor but disappears on the live site

Symptom: the block is present inside Elementor, but the public page shows an empty space or partial markup without styles. In most cases, cache, CSS or JS optimization, or deferred script loading is responsible. Clear the cache, temporarily disable file merging, and check the page in a private window.

If the block returns after optimization is disabled, do not leave the site without caching forever. Identify the specific rule that breaks the widget: CSS merging, deferred JS loading, unused-style removal, or aggressive minification. After every change, clear the cache and verify the result.

The cards break on mobile

Symptom: everything looks tidy on desktop, but on a phone the date, icon, or description becomes too narrow. The cause is often long headings, a horizontal layout, oversized images, or theme settings that impose their own spacing. Switch to Elementor's responsive mode and check the widget at several widths.

Start the fix with content: shorten the headings, remove unnecessary buttons, reduce decorative elements. If that does not help, switch the timeline style to a simpler vertical version. Roll back any questionable setting right away if it makes the block harder to read on mobile.

The timeline styles conflict with the theme

Symptom: buttons do not look the way they do in Elementor, fonts inherit strangely, or borders differ from the configured settings. The theme or Elementor global styles may be overriding part of the design. Check the global colors and fonts first, then use more precise widget settings or your own section class.

Do not try to fix everything with !important. That quickly creates new conflicts. It is better to scope the adjustment to the timeline area and change only the properties that truly interfere with readability.

The appearance changed after an update

Symptom: after updating WordPress, Elementor, the theme, or Timelentor, the block looks different. That is a normal risk with visual add-ons. Check the product changelog, clear the cache, and compare the page to a backup or screenshot from before the update. If the change is critical, temporarily roll the update back on a staging copy and confirm the cause.

When CodeCanyon Timelentor is the right choice

CodeCanyon Timelentor is worth using if you build pages in Elementor, want to add a chronological or process-driven block quickly, and are prepared to think through the content of each entry manually. The product is especially useful for About pages, service pages, case studies, roadmaps, event programs, and personal story layouts. Its main strength is visual presentation of a sequence without building a custom widget from scratch.

Before publishing, run a short control check: Elementor works, the archive was installed correctly, the timeline reads well on desktop and phone, cache does not break the styles, the entries follow one shared logic, and the buttons lead where they say they do. If those checks pass, the block will not just be decoration - it will be a working explanatory element on the page.

If you need a large event database, dynamic entries, advanced filters, or a solution that works without Elementor, compare Timelentor with alternatives before implementation. The right choice here is not about the highest number of effects. It is about how quickly the visitor understands the story, the stages, and the next step.