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ấp vào Thêm.
Nhấp vào 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, kiểu mặc định, đổi tên, xóa
Để 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. 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 của các phần tử trên trang web. 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ị section trên các thiết bị khác nhau bao gồm Máy tính và Điện thoại
Tab Container:
Tab Container là vùng bao quanh các tab và thường chứa toàn bộ giao diện điều hướng của tab. Việc thiết kế phần này bao gồm việc tùy chỉnh các thuộc tính như màu nền, bóng đổ và đường viền. Sử dụng Styles để tùy chỉnh các kiểu dáng cơ bản cho khung ngoài của tab container bằng. Xem thêm thông tin, xem Thiết kế.
Tabs:
Phần đầu tab là nơi người dùng có thể chọn các tab khác nhau. Mỗi tab có thể được tùy chỉnh khi ở trạng thái bình thường, khi di chuột qua, và khi được chọn. Sử dụng Thiết kế để tùy chỉnh kiểu dáng chung cho các tab. Xem thêm thông tin, xem Thiết kế.
+ Regular:
Biểu tượng: Nếu tab có chứa biểu tượng, bạn có thể tùy chỉnh cách hiển thị biểu tượng đó.
Nền: Màu nền cho tab ở trạng thái bình thường.
Box shadow: Tùy chọn Box Shadow cho phép bạn tạo hiệu ứng bóng đổ cho các phần tử, giúp chúng nổi bật và có chiều sâu hơn. Bạn có thể tùy chỉnh loại bóng, vị trí, màu sắc, độ mờ, và kích thước của bóng.
Hướng: Xác định hướng của các tab: chiều ngang/ chiều dọc
Fitted: Tab có kích thước vừa với nội dung hoặc container của nó.
Spacing Between: Xác định khoảng cách giữa các tab. Kéo khoảng cách mong muốn.
+ Hover: Trạng thái khi di chuột qua
Biểu tượng: Nếu tab có chứa biểu tượng, bạn có thể tùy chỉnh cách hiển thị biểu tượng đó.
Nền: Màu nền của tab khi người dùng di chuột qua.
Box shadow: Tùy chọn Box Shadow cho phép bạn tạo hiệu ứng bóng đổ cho các phần tử, giúp chúng nổi bật và có chiều sâu hơn. Bạn có thể tùy chỉnh loại bóng, vị trí, màu sắc, độ mờ, và kích thước của bóng.
+ Selected: trạng thái khi được chọn
Biểu tượng: Biểu tượng có thể thay đổi khi tab được chọn.
Nền: Màu nền của tab khi được chọn.
Box shadow: Tùy chọn Box Shadow cho phép bạn tạo hiệu ứng bóng đổ cho tabs, giúp chúng nổi bật và có chiều sâu hơn. Bạn có thể tùy chỉnh loại bóng, vị trí, màu sắc, độ mờ, và kích thước của bóng.
Containers:
Containers là nơi chứa nội dung của từng tab sau khi được chọn. Sử dụng Thiết kế để tùy chỉnh kiểu dáng chung cho phần thân tab. Sử dụng Styles để tùy chỉnh kiểu dáng chung cho các tab. Xem thêm thông tin, xem Thiết kế.
Nền: Màu nền của container khi được chọn.
Box shadow: Tùy chọn Box Shadow cho phép bạn tạo hiệu ứng bóng đổ cho container, giúp chúng nổi bật và có chiều sâu hơn. Bạn có thể tùy chỉnh loại bóng, vị trí, màu sắc, độ mờ, và kích thước của bóng.
Đườ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. Xem thêm thông tin, xem Đường viền.
Để 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.
