3.1. Đếm ngược
Last updated
Last updated
Tiện ích Đếm ngược cho phép bạn dễ dàng tạo một đồng hồ đếm ngược trên landing page của mình. Đồng hồ này có thể đếm thời gian còn lại cho các sự kiện, khuyến mãi, hoặc deadline quan trọng, giúp người dùng cảm thấy cấp bách và tăng cường động lực hành động.
Trong thanh sidebar, nhấp vào Tiện ích, sau đó chọn Đếm ngược
Nhấp và kéo tiện ích Đếm ngược vào trang landing page của bạn
Nhấp chuột vào tiện ích Đếm ngược và chọn Nội dung trên thanh thiết lập nhanh để mở trình chỉnh sửa nội dung Đếm ngược
Thiết kế: Chọn kiểu hiển thị cho đồng hồ đếm ngược
+ Mặc định: Đây là kiểu hiển thị mặc định của đồng hồ đếm ngược, thường là một thiết kế cơ bản với các mục đếm ngược hiển thị theo cách đơn giản.
+ Vòng tròn: Hiển thị đồng hồ đếm ngược dưới dạng hình tròn, với các phần tử (ngày, giờ, phút, giây) được bao quanh bởi vòng tròn. Đây là một lựa chọn đẹp mắt và hiện đại.
+ Cùng dòng: Hiển thị đồng hồ đếm ngược dưới dạng một dải nằm ngang hoặc dọc, với các mục đếm ngược được sắp xếp theo hàng hoặc cột.
Kiểu hiển thị: Chọn kiểu đồng hồ đếm ngược mà bạn muốn sử dụng
+ Phút: đếm ngược theo số phút cụ thể từ thời điểm hiện tại
+ Hàng ngày: đếm ngược đến một thời điểm cụ thể trong ngày
+ Thời lượng: đếm ngược theo một khoảng thời gian cụ thể
Thời lượng: Nhập thời gian cụ thể mà đồng hồ sẽ đếm ngược đến. Đây có thể là số phút, giờ, hoặc ngày tùy thuộc vào loại đếm ngược bạn chọn.
Lặp lại: Quyết định xem đồng hồ đếm ngược có nên lặp lại sau khi kết thúc không. Khi bật tùy chọn này, đồng hồ đếm ngược sẽ bắt đầu lại từ đầu sau khi kết thúc.
Ẩn khi hết thời gian: Bật tính năng này để tự động ẩn đồng hồ đếm ngược khi thời gian đếm ngược kết thúc. Điều này có thể giúp giữ cho giao diện trang web của bạn gọn gàng và sạch sẽ sau khi đồng hồ hoàn tất.
Bật tắt các phần tử của đếm ngược và chỉnh sửa tên nhãn.
Nhấp chuột vào tiện ích Đếm ngược và chọn Thiết kế trên thanh thiết lập nhanh để mở trình chỉnh sửa thiết kế Đếm ngược
Căn hỉnh: giúp bạn căn chỉnh Đếm ngược theo khung chứa. Xem thêm thông tin, xem Căn chỉnh.
Kích thước: trong trình chỉnh sửa thiết kế giúp bạn điều chỉnh kích thước và vị trí của các phần tử trên landing page. Xem thêm thông tin, xem Kích thước.
Hiển thị: cho phép bạn kiểm soát việc hiển thị Đếm ngược trên các thiết bị khác nhau bao gồm Máy tính và Điện thoại
Thiết kế: cho phép bạn thay đổi màu nền và hiệu ứng đổ bóng của Đếm ngược đã chọn. Xem thêm thông tin, xem Thiết kế.
Đường viền: cho phép bạn thêm và tùy chỉnh viền xung quanh của Countdown, bạn cũng có thể điều chỉnh độ bo tròn của viền. Xem thêm thông tin, xem Đường viền.
Items: tùy chỉnh cách hiển thị các mục đếm ngược như điều chỉnh khoảng cách giữa các phần tử liên quan đến các mục đếm ngược, khoảng cách giữa nhãn và giá trị.
+ Khoảng cách giữa các mục: Đây là tùy chọn cho phép bạn điều chỉnh khoảng cách giữa các thành phần (các phần tử như ngày, giờ, phút, giây) trong widget Countdown. Bạn có thể tăng hoặc giảm khoảng cách để tạo không gian hợp lý giữa các mục
+ Khoảng cách giữa ký hiệu và giá trị: Tùy chọn này giúp bạn điều chỉnh khoảng cách giữa nhãn (label) và giá trị (value) tương ứng. Ví dụ, nếu nhãn của bạn là "Ngày" và giá trị là "10", bạn có thể điều chỉnh khoảng cách giữa hai thành phần này để chúng trông gọn gàng hơn.
+ Đường viền: Điều chỉnh đường viền xung quanh mỗi mục đếm ngược.
+ Bo góc: Tùy chọn này cho phép bạn điều chỉnh góc của từng mục trong bộ đếm ngược.
+ Nền: Tùy chỉnh màu nền của các mục đếm ngược.
+ Box shadow: Tạo hiệu ứng đổ bóng cho các mục đếm ngược.
Ký hiệu: tùy chỉnh các nhãn mô tả bên cạnh các mục đếm ngược như “Giờ”, “Phút”, “Giây”
+ Chiều rộng: Tùy chỉnh chiều rộng của nhãn. Điều này cho phép bạn điều chỉnh kích thước ngang của các nhãn mô tả, giúp chúng phù hợp với không gian bố trí của Countdown trên landing page.
+ Chiều cao: Tùy chỉnh chiều cao của nhãn. Tương tự như Width, tùy chọn này cho phép bạn điều chỉnh kích thước dọc của nhãn để phù hợp với thiết kế tổng thể.
+ Đường viền: Thiết lập viền cho các nhãn. Bạn có thể tùy chỉnh độ dày, kiểu viền (solid, dashed, dotted, double, v.v.), và màu sắc của viền để tạo viền cho các nhãn. Điều này giúp nhãn nổi bật hơn hoặc hòa hợp với phong cách tổng thể.
+ Bo góc: Tùy chỉnh độ cong của các góc nhãn. Bạn có thể điều chỉnh mức độ bo tròn của các góc để làm cho nhãn có vẻ mềm mại hơn hoặc giữ cho các góc nhọn. Tùy chọn này giúp nhãn phù hợp với phong cách thiết kế tổng thể của Đếm ngược, từ những thiết kế tối giản, góc cạnh đến phong cách hiện đại, mượt mà.
+ Nền: Tùy chỉnh màu nền cho nhãn. Bạn có thể chọn màu nền để làm nổi bật nhãn hoặc giữ chúng nhẹ nhàng bằng cách chọn màu sắc nhạt.
+ Box shadow: Thêm hiệu ứng bóng đổ cho nhãn. Bạn có thể tùy chỉnh màu sắc, độ mờ, và vị trí của bóng đổ để tạo cảm giác nhãn đang nổi lên hoặc có chiều sâu.
+ Font chữ: Chọn phông chữ cho văn bản của nhãn. Bạn có thể chọn từ danh sách các phông chữ có sẵn hoặc nhập tên phông chữ tùy chỉnh để phù hợp với thiết kế của toàn bộ landing page.
+ Căn chỉnh văn bản: Tùy chỉnh cách căn chỉnh văn bản trong nhãn. Bạn có thể chọn căn trái, căn giữa, căn phải, hoặc căn đều tùy thuộc vào thiết kế của bạn.
+ Thể loại: Thiết lập kiểu trang trí cho văn bản trong nhãn. Các tùy chọn bao gồm: mặc định, gạch chân, gạch trên, gạch giữa
+ Màu sắc: Chọn màu sắc cho văn bản trong nhãn. Điều này giúp bạn đồng bộ hóa màu chữ của nhãn với chủ đề tổng thể của trang web hoặc làm nổi bật nó.
+ Độ đậm chữ: Điều chỉnh độ đậm nhạt của văn bản, từ rất mỏng (thin) đến rất đậm (bold). Điều này giúp nhãn rõ ràng hơn và dễ đọc hơn.
+ Kiểu chữ: Chọn kiểu chữ cho văn bản, với các tùy chọn như: bình thường, in nghiêng, hơi nghiêng
+ Chuyển đổi chữ: Tùy chỉnh cách viết hoa cho văn bản trong nhãn, với các tùy chọn: viết hoa chữ cái đầu, viết hoa tất cả, viết thường
+ Kích thước chữ: Tùy chỉnh kích thước chữ của văn bản trong nhãn. Bạn có thể điều chỉnh kích thước theo pixel hoặc phần trăm để phù hợp với thiết kế tổng thể.
+ Khoảng cách giữa chữ: Điều chỉnh khoảng cách giữa các ký tự trong văn bản của nhãn. Bạn có thể chọn khoảng cách tự động, hẹp, rộng, tùy chỉnh
+ Khoảng cách dòng: Điều chỉnh chiều cao dòng của văn bản trong nhãn, giúp văn bản dễ đọc và thẩm mỹ hơn.
+ Text shadow: Thêm bóng đổ cho văn bản trong nhãn. Bạn có thể tùy chỉnh màu sắc, độ mờ, và vị trí của bóng đổ theo các trục X, Y và độ mờ (Blur) để tạo hiệu ứng nổi bật cho văn bản.
Chữ số: Tùy chọn Chữ số cho phép bạn tùy chỉnh cách hiển thị các số trong đồng hồ đếm ngược.
+ Chiều rộng: Điều chỉnh chiều rộng của số trong đồng hồ đếm ngược
+ Chiều cao: Điều chỉnh chiều cao của số trong đồng hồ đếm ngược.
+ Đường viền: Thay đổi kiểu và màu sắc của viền xung quanh số.
+ Bo góc: Điều chỉnh độ cong của các góc trong khung chứa số trên đồng hồ.
+ Nền: Đặt màu nền cho các số trong đồng hồ đếm ngược.
+ Box shadow: Thêm hiệu ứng bóng đổ cho các số trong đồng hồ đếm ngược.
+ Font chữ: Chọn kiểu chữ cho các số trong đồng hồ đếm ngược.
+ Căn chỉnh văn bản: Căn chỉnh vị trí của các số bên trong phần tử chứa.
+ Thể loại: Thay đổi các thuộc tính trang trí văn bản như gạch chân hoặc gạch ngang.
+ Màu sắc: Thay đổi màu sắc của các số trong đồng hồ đếm ngược.
+ Độ đậm chữ: Thay đổi độ dày của chữ để làm cho số trở nên dày hơn hoặc mỏng hơn.
+ Kiểu chữ: Thay đổi kiểu chữ như in đậm hoặc in nghiêng.
+ Chuyển đổi chữ: Thay đổi cách hiển thị chữ như viết hoa toàn bộ, viết thường toàn bộ, hoặc viết hoa chữ cái đầu tiên của mỗi từ.
+ Kích thước chữ: Thay đổi kích thước của các số trong đồng hồ đếm ngược.
+ Khoảng cách giữa chữ: Điều chỉnh khoảng cách giữa các ký tự trong số.
+ Khoảng cách giữa dòng: Điều chỉnh khoảng cách giữa các dòng văn bản trong số.
+ Text shadow: Thêm hiệu ứng bóng chữ để tạo chiều sâu cho các số.
Thời gian kết thúc: là phần hiển thị văn bản hoặc thông báo khi thời gian đếm ngược kết thúc. Đây có thể là một dòng thông báo như "Hết giờ", "Countdown Complete", hoặc bất kỳ thông báo tùy chỉnh nào mà bạn muốn hiển thị khi đếm ngược kết thúc.
+ Đường viền: Thiết lập viền cho phần Thời gian kết thúc. Bạn có thể tùy chỉnh độ dày, kiểu viền (solid, dashed, dotted, double, v.v.), và màu sắc của viền để làm nổi bật thông báo kết thúc.
+ Bo góc: Thiết lập độ cong cho các góc của phần Thời gian kết thúc
+ Nền: Tùy chỉnh màu nền cho phần Thời gian kết thúc. Màu nền có thể được sử dụng để nhấn mạnh thông báo kết thúc, giúp thu hút sự chú ý của người xem.
+ Box shadow: Thêm hiệu ứng bóng đổ cho phần Thời gian kết thúc. Bạn có thể tùy chỉnh màu sắc, độ mờ, và vị trí của bóng đổ để tạo hiệu ứng chiều sâu hoặc nổi bật cho thông báo kết thúc.
+ Font chữ: Chọn phông chữ cho văn bản trong phần Thời gian kết thúc. Bạn có thể chọn từ danh sách các phông chữ có sẵn hoặc nhập tên phông chữ tùy chỉnh để đồng bộ hóa với giao diện tổng thể của landing page.
+ Căn chỉnh văn bản: Tùy chỉnh cách căn chỉnh văn bản trong phần Thời gian kết thúc. Bạn có thể chọn căn trái, căn giữa, căn phải, hoặc căn đều để văn bản được hiển thị theo cách bạn muốn.
+ Thể loại: Thiết lập kiểu trang trí cho văn bản trong phần Thời gian kết thúc với các tùy chọn: mặc định, gạch chân, gạch trên, gạch giữa
+ Màu sắc: Chọn màu sắc cho văn bản trong phần Timeout. Màu sắc có thể được sử dụng để làm cho thông báo kết thúc nổi bật hoặc phù hợp với chủ đề chung của trang web.
+ Độ đậm chữ: Điều chỉnh độ đậm nhạt của văn bản, từ rất mỏng (thin) đến rất đậm (bold). Điều này giúp văn bản trong phần Thời gian kết thúc trở nên rõ ràng và dễ đọc hơn.
+ Kiểu chữ: Chọn kiểu chữ cho văn bản, với các tùy chọn như: bình thường, in nghiêng, hơi nghiêng
+ Chuyển đổi chữ: Tùy chỉnh cách viết hoa cho văn bản trong phần Thời gian kết thúc, với các tùy chọn: viết hoa chữ đầu, viết hoa tất cả, viết thường
+ Kích thước chữ: Tùy chỉnh kích thước chữ của văn bản trong phần Thời gian kết thúc. Bạn có thể điều chỉnh kích thước để phù hợp với thông báo kết thúc hoặc làm cho thông báo nổi bật hơn.
+ Khoảng cách giữa chữ: Điều chỉnh khoảng cách giữa các ký tự trong văn bản của phần Thời gian kết thúc. Bạn có thể chọn khoảng cách tự động, hẹp, rộng, tùy chỉnh
+ Khoảng cách dòng: Điều chỉnh chiều cao dòng của văn bản trong phần Thời gian kết thúc, giúp văn bản dễ đọc và thẩm mỹ hơn.
+ Text shadow: Thêm bóng đổ cho văn bản trong phần Timeout. Bạn có thể tùy chỉnh màu sắc, độ mờ, và vị trí của bóng đổ theo các trục X, Y và Blur (độ mờ) để tạo hiệu ứng nổi bật cho văn bản.
Kiểu đếm ngược: cho phép điều chỉnh độ dày, màu sắc của phần đồng hồ đếm ngược
Kiểu đếm ngược phân cách:
+ Kiểu phân cách: sử dụng ký tự phân cách pipe để phân tách các đơn vị thời gian hoặc sử dụng dấu hai chấm (colon) để phân tách
+ Màu sắc: Để tạo sự nổi bật cho tiện ích đếm ngược, bạn có thể tùy chỉnh màu sắc của đường phân cách.
+ Chiều rộng: chiều rộng của đường phân cách có thể được điều chỉnh để tạo ra một thiết kế hấp dẫn hơn.
+ Chiều cao: Chiều cao của đường phân cách cũng có thể tùy chỉnh để phù hợp với thiết kế tổng thể của landing page.
Kiểu đếm ngược vòng tròn
+ Chiều rộng: Điều chỉnh độ dày của các thành phần đồng hồ đếm ngược, chẳng hạn như viền hoặc các thanh hiển thị thời gian.
+ Mặc định: Cài đặt màu sắc mặc định cho phần đồng hồ đếm ngược khi không có tương tác hoặc hành động nào xảy ra.
+ Active: Tùy chỉnh màu sắc cho phần đồng hồ đếm ngược khi nó đang ở trạng thái hoạt động, chẳng hạn như khi có sự kiện hoặc khi người dùng tương tác.
