Bạn đã bao giờ tìm cách tạo một trình theo dõi tiến trình dọc thay vì một thanh cuộn truyền thống chưa? Nếu không, hãy duyệt bài viết này đến cuối để tìm hiểu cách tạo nó với Elementor Pro.
Nhưng trước khi giải quyết chủ đề chính, trước tiên chúng ta hãy nhớ lại trình theo dõi tiến trình là gì.
Trình theo dõi tiến trình là một chỉ báo tiến trình thông báo cho người dùng về tiến trình của một quá trình đang diễn ra, chẳng hạn như cài đặt ứng dụng, cập nhật, đọc một bài báo, v.v. Và có hai loại:
- le trình theo dõi tiến trình tuyến tính
- le theo dõi tiến trình vòng tròn
Bạn cũng có thể đọc: Elementor: Cách tạo thẻ hiệu ứng từ danh mục đầu tư
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách chèn chỉ báo tiến trình dọc từng bước vào một phần chứa các lưu trữ bài đăng.
Tạo trình theo dõi tiến trình
Trong tab Các yếu tố từ bảng công cụElementor, gõ vào thanh tìm kiếm Trình theo dõi tiến trình. Sau đó kéo tiện ích vào một phần.
Một chỉ báo tiến trình sau đó sẽ xuất hiện. Theo mặc định, nó được định hướng theo chiều ngang. Nhưng đừng lo lắng, sau này bạn sẽ thấy cách sắp xếp nó theo chiều dọc.
Chỉ báo tiến trình đang được tạo, hãy thực hiện các sửa đổi cần thiết để có được kết quả mong muốn.
Xem thêm: Elementor: Cách tạo thẻ hiệu ứng từ danh mục đầu tư
Chỉnh sửa nội dung trình theo dõi tiến trình
Ở đây bạn sẽ chọn loại trình theo dõi và những gì nó liên quan đến.
Các cài đặt chính là:
- trình theo dõi điển hình: ở đây giá trị mặc định là Ngang. Tuy nhiên khi cuộn xuống danh sách, loại vòng tròn cũng được cung cấp cho bạn. Giữ nguyên giá trị mặc định.
- Tiến trình liên quan đến: trong cài đặt thứ hai này, hãy chọn giá trị bộ chọn. Lựa chọn này sẽ đưa ra một cài đặt bổ sung: Bộ chọn.
- Bộ chọn: Trường này nhằm nhận định danh của đối tượng mà trình theo dõi sẽ được gắn vào.
Hãy chọn kho lưu trữ ấn phẩm vì nó là phần tử mà trình theo dõi của chúng tôi được đính kèm.
Trong bảng cài đặt của nó, hãy chuyển đến tab Nâng cao, sau đó điền một giá trị vào trường ID CSS.
Tiếp theo, quay lại bảng theo dõi và hoàn thành trường Bộ chọn trong menu nội dung.
Cuối cùng, đặt hướng của chỉ báo tiến độ sang bên phải.
Thay đổi kiểu của trình theo dõi tiến trình
Trong bước này, chúng ta sẽ cấu hình các thông số của chỉ báo tiến trình cũng như nền của chỉ báo tiến độ.
Bắt đầu bằng cách thiết lập chỉ báo tiến trình.
Đọc cũng: Elementor: Cách tạo Thư viện Hình ảnh
- Điều chỉnh màu tiến độ cho phép bạn chọn giữa một tiến trình cổ điển và một tiến trình gradient. Trong ví dụ của chúng tôi, hãy chọn tùy chọn đầu tiên. Tuy nhiên, bất kể lựa chọn nào, nó sẽ xuất hiện cài đặt màu.
- Đặt lcó màu sắc bằng cách sử dụng bảng màu toàn cục hoặc công cụ chọn màu.
- Loại đường viền: bạn có sáu đề xuất ở đây (không có, đầy đủ, kép, chấm, chấm, rãnh). Chọn đường viền đầy đủ.
- chiều rộng: Điều này là để cung cấp độ dày cho đường viền của chỉ báo tiến trình của bạn.
- Bán kính biên giới: Theo mặc định, chỉ báo tiến trình trông giống như một hình chữ nhật. Bằng cách thay đổi bán kính của nó, các điểm cực đại của nó trở nên tròn trịa.
Cuối cùng, đặt piste cài đặt nền. Bạn nhận thấy rằng nó gần như giống nhau các cài đặt quay trở lại. Do đó, giới hạn của bạn với những người đã đề cập trước.
Thay đổi các tùy chọn nâng cao của trình theo dõi tiến trình
Để hoàn thành công việc của mình, chúng tôi sẽ đặt các tab sau: hiệu ứng chuyển động, Chuyển đổi và CSS tùy chỉnh.
Trước tiên hãy bắt đầu với tab CSS tùy chỉnh. Chọn nó, sau đó chèn mã sau vào trường thích hợp. Nó cho phép xác định chiều rộng của trình theo dõi. Vì vậy, nó đặt chiều rộng bằng 50% chiều cao của cửa sổ.
Tiếp theo, xoay trình theo dõi theo hướng thẳng đứng. Để thực hiện việc này, hãy chọn menu con Transformer, cho phép xoay, sau đó nhập 90 vào trường trống. Thao tác này sẽ xoay widget của chúng tôi 90 độ để cho bạn vị trí thẳng đứng mong muốn.
Để căn chỉnh tiện ích của chúng tôi ở cùng mức với các bài đăng đầu tiên, hãy áp dụng độ lệch là 145.
Ở cấp độ này, nếu chúng tôi cuộn trang của mình, bạn sẽ thấy chỉ báo tiến trình của chúng tôi biến mất khi chúng tôi cuộn trang của mình. nội dung.
Để khắc phục sự cố này, bạn sẽ mở tab Hiệu ứng chuyển động, sau đó thả xuống lệnh Ghim và chọn phía dưới.
Lần này, cuộn xuống, chúng ta có thể thấy trình theo dõi tiến trình của mình dần dần xuất hiện khi chúng ta di chuyển qua kho lưu trữ các bài đăng của mình.
Tải xuống Elementor Pro ngay!
Kết luận
Vì thế ! Đó là vì bài viết này hướng dẫn bạn cách tạo trình theo dõi tiến trình dọc.
Thêm các yếu tố tương tác, chẳng hạn như chỉ báo tiến trình dọc khi tạo website thực sự có thể đưa nó lên một tầm cao mới bằng cách làm cho nó trực quan hơn. Ngoài ra, nó có thể được liên kết đến toàn bộ trang hoặc tới nội dung của một ấn phẩm và thậm chí tới bất kỳ thành phần cụ thể nào khác của một trang. Do đó, biết cách sử dụng nó sẽ là một lợi thế bổ sung.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
