5.2. Tabs
Last updated
Vietnamese
Last updated
Tiện ích Tabs cho phép bạn tạo các tab chuyển đổi nội dung trên landing page, giúp tối ưu hóa không gian hiển thị và cung cấp cho người dùng một trải nghiệm mượt mà. Người xem có thể nhấp vào các thẻ này thay vì cuộn qua văn bản để xem nội dung liên quan. Mỗi tab có thể chứa các loại nội dung khác nhau như văn bản, hình ảnh, video, biểu đồ, và nhiều hơn nữa.
Nhấn vào Tiện ích ở thanh sidebar của trình chỉnh sửa.
Chọn Tabs trong mục Nâng cao.
Chọn phần tử Tabs và kéo vào trang landing page.
Để mở trình chỉnh sửa Nội dung, bạn click vào tiện ích Tabs muốn chỉnh sửa trên màn hình ⇒ Chọn Nội dung trên thanh thiết lập nhanh.
Để thêm một thẻ mới, nhấn vào +Thêm trong popup chỉnh sửa nội dung.
Để mở trình chỉnh sửa Thiết kế, bạn click vào tiện ích Tabs muốn chỉnh sửa trên màn hình ⇒ Chọn Thiết kế trên thanh thiết lập nhanh.
Căn chỉnh: giúp bạn căn chỉnh Tabs theo khung chứa, chi tiết tại đây.
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 của các phần tử trên trang web, chi tiết tại đây.
Hiển thị: cho phép bạn kiểm soát việc hiển thị section 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ế:
Tab Container:
Tab container là một thành phần bao gồm cả Tabs và nội dung Containers bên trong, giúp nhóm các nội dung theo từng tab để hiển thị một cách gọn gàng.
Thiết kế Tab container cho phép người dùng tùy chỉnh cài đặt chung như: Căn chỉnh, Gap, Hướng hiển thị, Nền, Box shadow.
Tabs:
Tabs là thanh điều hướng phía trên (hoặc bên cạnh) hiển thị các lựa chọn. Mỗi tab sẽ liên kết với một Container riêng biệt để hiển thị nội dung tương ứng
Thiết kế Tabs cho phép người dùng tùy chỉnh cài đặt chung cho từng loại Tabs trong các trạng thái như: Bình thường, Di chuột, Đã chọn.
Containers:
Containers là các khối chứa nội dung cụ thể bên trong mỗi tab. Mỗi container có thể tùy chỉnh để chứa văn bản, hình ảnh, hoặc các thành phần khác.
Thiết kế Containers cho phép người dùng tùy chỉnh cài đặt chung cho vùng khối chứa nội dung như: Nền, Box shadow.
Đường viền: cho phép bạn thêm và tùy chỉnh viền xung quanh của Tabs, bạn cũng có thể điều chỉnh độ bo tròn của viền, chi tiết tại đây.
Để mở trình chỉnh sửa Nâng cao, bạn click vào tiện ích Tabs muốn chỉnh sửa trên màn hình ⇒ Chọn Nâng cao trên thanh thiết lập nhanh.
Hiệu ứng: Cho phép bạn thêm các hiệu ứng động cho tiện ích trên landing page để tạo sự thu hút và sinh động hơn, chi tiết tại đây.
Đồng bộ thiết kế Máy tính/ Điện thoại: Cho phép bạn cài đặt tùy chọn đồng bộ thiết kế giữa máy tính và điện thoại, chi tiết tại đây.
Kiểu định vị: Cho phép bạn lựa chọn kiểu định vị phù hợp để tối ưu hóa trang web và mang lại trải nghiệm tốt nhất cho khách hàng, chi tiết tại đây.
Tùy chỉnh nâng cao: Cho phép bạn tùy biến giao diện và hành vi của thành phần thông qua các lớp CSS và mã CSS tùy chỉnh, chi tiết tại đây.
Nhấn vào biểu tượng cài đặt của từng thẻ để thiết lập cài đặt cho từng thẻ trên Tabs: Nhân bản, Đặt làm mặc định, Đổi tên, Xóa.
