Tapato Timeline là module timeline chuyên nghiệp dành cho Tapato Website Builder, giúp bạn dễ dàng xây dựng các dòng thời gian trực quan để trình bày lịch sử hình thành, quá trình phát triển, các cột mốc dự án, quy trình hoạt động, sự kiện hoặc hành trình thương hiệu.

Module được thiết kế theo hướng trực quan, responsive và tùy biến cao, cho phép người dùng kiểm soát từng thành phần của timeline ngay trong giao diện Builder.

Trình bày timeline theo nhiều kiểu

TP Timeline hỗ trợ nhiều cách bố trí để phù hợp với từng loại nội dung:

Vertical – Timeline dạng dọc truyền thống.
• Alternating – Nội dung luân phiên hai bên timeline.
• Horizontal – Timeline dạng ngang.
• Horizontal Card – Timeline ngang kết hợp card nội dung.
• Hỗ trợ Swiper Slide đối với các bố cục ngang.
•  

Nhờ đó, cùng một module có thể được sử dụng cho nhiều mục đích khác nhau mà không cần xây dựng lại từ đầu.

Không giới hạn số lượng cột mốc

Bạn có thể thêm các mốc thời gian tùy theo nội dung của website.

Mỗi item có thể thiết lập riêng:

• Ngày/thời gian.
• Tiêu đề.
• Mô tả.
• Icon hoặc hình ảnh marker.
• Màu icon.
• Màu nền marker.
• Border.
• Outer Border.
• Màu nền nội dung.
• Border, radius và shadow của card.
• Class tùy chỉnh.

Điều này giúp mỗi cột mốc có thể mang một nội dung và phong cách riêng nhưng vẫn nằm trong cùng một hệ thống thiết kế.

Marker được tùy biến chi tiết

Marker là thành phần trung tâm của Timeline và TP Timeline cho phép tùy chỉnh nhiều thuộc tính:

• Kích thước marker.
• Icon.
• Hình ảnh.
• Màu icon.
• Màu nền.
• Border.
• Outer Border.
• Màu sắc và kiểu hiển thị theo cấu hình của module.

Đặc biệt, Border và Outer Border được tách riêng, giúp tạo những kiểu marker nổi bật hơn trên đường timeline.

Một số mẫu timeline trên hệ thống Tapato

Mẫu timeline 1

Mẫu timeline 2

Mẫu timeline 3

Opposite Content – Hiển thị thông tin đối diện

TP Timeline hỗ trợ khu vực Opposite Content, cho phép hiển thị thêm thông tin ở phía đối diện của timeline.

Bạn có thể sử dụng khu vực này để hiển thị:

• Tiêu đề phụ.
• Nội dung mô tả.
• Icon.
• Hình ảnh.
• Màu nền.
• Màu chữ.
• Màu tiêu đề.
• Border radius.

Opposite có thể được bật/tắt ở cấp độ toàn bộ Timeline hoặc điều khiển riêng trên từng item.

Header tùy chỉnh

Timeline có khu vực Header riêng với khả năng thiết lập:

• Bật/tắt Header.
• Tiêu đề.
• Mô tả.
• Kích thước tiêu đề.
• Màu tiêu đề.
• Khoảng cách phía dưới Header.

Nhờ đó, module có thể tự chứa tiêu đề và phần giới thiệu mà không cần thêm module khác.

Responsive Desktop – Tablet – Mobile

TP Timeline được xây dựng với khả năng responsive cho nhiều kích thước màn hình.

Có thể thiết lập riêng cho:

Desktop

• Vị trí timeline.
• Content Width.
• Số lượng slide hiển thị.

Tablet

• Vị trí timeline.
• Content Width.
• Số lượng slide hiển thị.

Mobile

• Bố cục Vertical hoặc Horizontal.
• Kiểu hiển thị Compact / Minimal.
• Vị trí timeline.
• Content Width.
• Số lượng slide.

Module có thể tự nhận diện kích thước thiết bị để lựa chọn cấu hình responsive tương ứng.

Swiper Slide tích hợp

Đối với Timeline dạng ngang, TP Timeline có thể sử dụng Swiper để tạo trải nghiệm slide mượt mà.

Có thể cấu hình:

• Số lượng card hiển thị trên Desktop.
• Số lượng card trên Tablet.
• Số lượng card trên Mobile.
• Space Between.
• Navigation.
• Pagination.
• Loop.
• Autoplay.
• Autoplay Delay.
• Centered Slides.
• Grab Cursor.

Điều này giúp timeline ngang phù hợp với các website có nhiều cột mốc nhưng không muốn kéo dài trang quá nhiều.

Thiết kế card linh hoạt

Mỗi nội dung Timeline có thể sử dụng card riêng với các tùy chọn:

• Background.
• Border.
• Border Radius.
• Shadow.
• Padding.
• Màu ngày tháng.
• Màu tiêu đề.
• Màu mô tả.

Bạn có thể tạo từ những timeline tối giản cho đến những timeline dạng card nổi bật.

Drag & Drop quản lý cột mốc

Các item trong Timeline có thể được:

• Thêm mới.
• Xóa.
• Nhân bản.
• Kéo thả để thay đổi thứ tự.
• Chỉnh sửa từng item.

Điều này giúp quản lý timeline có nhiều cột mốc nhanh chóng và trực quan.

Template giúp tạo Timeline nhanh hơn

TP Timeline hỗ trợ hệ thống template để người dùng có thể nhanh chóng lựa chọn một cấu trúc có sẵn thay vì phải thiết lập toàn bộ từ đầu.

Sau khi chọn template, các thành phần vẫn có thể tiếp tục chỉnh sửa theo nhu cầu của từng website.

JSON – Dễ quản lý và tích hợp

Cấu hình Timeline được quản lý bằng JSON, giúp dữ liệu module có cấu trúc rõ ràng và thuận tiện cho việc:

• Lưu cấu hình vào Database.
• Export / Import.
• Clone module.
• Render module từ PHP.
• Quản lý nhiều Timeline trên cùng một trang.
• Tích hợp vào hệ thống Tapato Builder.

Mỗi Timeline có thể được quản lý độc lập thông qua module ID.

Hỗ trợ nhiều Timeline trên cùng một trang

TP Timeline được thiết kế để có thể sử dụng nhiều instance trên cùng một trang.

Mỗi module có:

• ID riêng.
• JSON riêng.
• Cấu hình riêng.
• Sidebar chỉnh sửa riêng.
• Swiper instance riêng.

Điều này phù hợp với kiến trúc Website Builder, nơi một trang có thể sử dụng nhiều Timeline với nội dung và thiết kế khác nhau.

Ứng dụng thực tế

TP Timeline có thể được sử dụng cho nhiều loại nội dung:

Lịch sử doanh nghiệp

2018 → Thành lập
2020 → Mở rộng hoạt động
2022 → Ra mắt sản phẩm
2024 → Phát triển thị trường mới

Quy trình dự án

Tiếp nhận → Phân tích → Thiết kế → Phát triển → Kiểm thử → Bàn giao

Lịch sử sản phẩm

Version 1.0 → Version 2.0 → Version 3.0 → Version 4.0

Sự kiện

Sự kiện 01 → Sự kiện 02 → Sự kiện 03 → Sự kiện 04

Hành trình thương hiệu

Khởi đầu → Phát triển → Mở rộng → Tăng trưởng

---

Tapato Timeline – Xây dựng mọi hành trình theo cách của bạn

Với sự kết hợp giữa Timeline, Card, Opposite Content, Responsive và Swiper, Timeline mang đến một cách trực quan để trình bày các mốc thông tin trên website.

Không chỉ đơn thuần là một đường thời gian, module cho phép bạn kiểm soát từng thành phần, từng cột mốc và từng thiết bị hiển thị ngay trong Website Builder.

Tapato Timeline – Biến những cột mốc thành một trải nghiệm trực quan trên website.