Gửi ticket
Khuyến mại
Kiến thức
Quản lý dịch vụ
Cách sử dụng tiện ích Tabs
1. Các tiện ích Widgets trong Elementor
Widgets hay các tiện ích trong ngữ cảnh của Elementor (và rộng hơn là WordPress) là các khối nội dung có thể tái sử dụng, được thiết kế để thực hiện một chức năng hoặc hiển thị một loại thông tin cụ thể.
Khi bạn nhấp vào một widget trong khu vực chỉnh sửa chính, các tùy chọn chỉnh sửa cho widget đó sẽ xuất hiện trong Bảng điều khiển (Panel) bên trái. Mỗi widget thường có 3 tab chính:
- Content (Nội dung): Tùy chỉnh nội dung của widget (ví dụ: văn bản của tiêu đề, nguồn ảnh, URL nút bấm, v.v.).
- Style (Kiểu hiển thị): Tùy chỉnh giao diện (ví dụ: màu sắc, phông chữ, kích thước, căn chỉnh, border, shadow, v.v.).
- Advanced (Nâng cao): Các tùy chọn nâng cao như:
- Margin & Padding: Khoảng cách bên ngoài và bên trong phần tử.
- Z-index: Thứ tự hiển thị của các lớp phần tử.
- CSS ID & CSS Classes: Dùng để tùy chỉnh CSS bổ sung.
- Motion Effects (Hiệu ứng chuyển động): Ví dụ: hiệu ứng cuộn (scroll effects), hiệu ứng vào (entrance animation).
- Background: Màu nền, hình ảnh nền, gradient.
- Border: Đường viền.
- Positioning: Vị trí của phần tử (mặc định, tương đối, tuyệt đối, cố định).
- Responsive: Ẩn/hiện phần tử trên các thiết bị khác nhau.
- Custom CSS (Elementor Pro): Viết CSS tùy chỉnh.
2. Tiện ích Tabs là gì ?
Tiện ích Tabs (Thẻ) trong Elementor là một công cụ mạnh mẽ để tổ chức nội dung trên trang web của bạn một cách gọn gàng và tương tác. Nó cho phép bạn hiển thị nhiều phần nội dung khác nhau trong các tab riêng biệt, giúp tiết kiệm không gian và cải thiện trải nghiệm người dùng.
3. Các bước sử dụng tiện ích Tabs
Bước 1. Chỉnh sửa nội dung
Đây là nơi bạn thêm, chỉnh sửa các tab và nội dung của chúng.
1. Các mục trong Tab (Tabs):
- Phần này hiển thị các tab hiện có của bạn. Bạn có thể thấy “Tab #1” và “Tab #2”.
- Để chỉnh sửa một tab: Nhấp vào mục tab đó (ví dụ: “Tab #1”). Các tùy chọn chi tiết cho tab đó sẽ mở ra:
- Tiêu đề (Title): Nhập tiêu đề sẽ hiển thị trên tab.
- Mô tả (Description): Nhập nội dung chi tiết sẽ hiển thị khi tab này được chọn. Bạn có thể nhập văn bản, sử dụng các thẻ HTML cơ bản hoặc thậm chí kéo các tiện ích Elementor khác vào đây để tạo nội dung phức tạp.
- Để thêm một tab mới: Nhấp vào nút “+ Thêm mục”. Một tab mới sẽ được thêm vào cuối danh sách, và bạn có thể tùy chỉnh tiêu đề và nội dung của nó.
- Để xóa một tab: Nhấp vào biểu tượng “X” bên cạnh tab bạn muốn xóa.
- Để sắp xếp lại các tab: Kéo và thả các tab lên hoặc xuống để thay đổi thứ tự.
2. Vị trí (Position):
- Tùy chọn này cho phép bạn chọn vị trí của các tiêu đề tab:
- Mặc định (Default): Các tab sẽ hiển thị theo chiều ngang (tab trên cùng, nội dung bên dưới).
- Dọc (Vertical): Các tab sẽ hiển thị theo chiều dọc (tab ở bên cạnh, nội dung bên cạnh).
3. Căn chỉnh (Alignment):
- Tùy chọn này chỉ xuất hiện khi “Vị trí” là “Dọc”. Nó cho phép bạn căn chỉnh các tiêu đề tab dọc sang Trái (Left), Giữa (Center) hoặc Phải (Right).
Bước 2. Chỉnh sửa kiểu hiển thị (Style)
Đây là nơi bạn tùy chỉnh giao diện của các tab (tiêu đề) và nội dung bên trong.
A. Tabs (Thẻ)
- Background Color (Màu nền): Chọn màu nền cho các tab (phần tiêu đề).
- Color (Màu sắc): Chọn màu chữ cho tiêu đề tab ở trạng thái bình thường (không được chọn).
- Active Color (Màu hoạt động): Chọn màu chữ cho tiêu đề tab đang được chọn (active).
- Border Type (Loại đường viền): Thêm đường viền cho các tab.
- Border Width (Độ rộng viền): Độ dày của đường viền.
- Border Color (Màu viền): Màu của đường viền.
- Typography (Phông chữ): Nhấp vào biểu tượng bút chì để tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho tiêu đề tab.
B. Nội dung (Content)
- Background Color (Màu nền): Chọn màu nền cho khu vực nội dung của tab.
- Color (Màu sắc): Chọn màu chữ cho nội dung bên trong tab.
- Typography (Phông chữ): Nhấp vào biểu tượng bút chì để tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho văn bản nội dung.
- Padding (Khoảng đệm): Điều chỉnh khoảng cách bên trong giữa đường viền của khu vực nội dung và văn bản bên trong.
- Border Type (Loại đường viền): Thêm đường viền cho khu vực nội dung.
- Border Width (Độ rộng viền): Độ dày của đường viền.
- Border Color (Màu viền): Màu của đường viền.
- Border Radius (Bán kính bo tròn): Bo tròn các góc của khu vực nội dung.
Bước 3. Chỉnh sửa nâng cao (Advanced)
Tab này cung cấp các tùy chọn nâng cao hơn để kiểm soát bố cục, hiệu ứng và khả năng đáp ứng của toàn bộ tiện ích Tabs.
- Bố cục (Layout):
- Margin (Lề): Khoảng cách bên ngoài tiện ích Tabs với các phần tử khác xung quanh.
- Padding (Khoảng đệm): Khoảng cách bên trong tiện ích.
- Width (Chiều rộng): Bạn có thể đặt chiều rộng của toàn bộ tiện ích Tabs.
- Position (Vị trí): Mặc định, Relative, Absolute, Fixed (các tùy chọn định vị nâng cao).
- Z-index: Xác định thứ tự xếp lớp của tiện ích nếu nó chồng lên các phần tử khác.
- CSS ID & CSS Classes:
- Cho phép bạn thêm ID hoặc class CSS tùy chỉnh để tác động đến tiện ích bằng mã CSS riêng.
- Hiệu ứng chuyển động (Motion Effects):
- Entrance Animation (Hoạt ảnh khi vào): Chọn hiệu ứng xuất hiện cho toàn bộ tiện ích Tabs khi trang được tải.
- Hover Animation (Hoạt ảnh di chuột qua): Hiệu ứng chuyển động cho tiện ích khi di chuột qua.
- Scrolling Effects (Hiệu ứng cuộn): Tạo các hiệu ứng khi người dùng cuộn trang.
- Mouse Effects (Hiệu ứng chuột): Tạo các hiệu ứng khi di chuột qua tiện ích.
- Nền (Background):
- Bạn có thể thêm màu nền, hình nền hoặc gradient cho toàn bộ vùng chứa tiện ích Tabs.
- Đường viền (Border):
- Tùy chỉnh kiểu đường viền, độ dày, màu sắc và bán kính bo tròn cho toàn bộ vùng chứa tiện ích.
- Mặt nạ (Mask):
- Áp dụng một hình dạng mặt nạ để tạo hiệu ứng đặc biệt cho tiện ích.
- Khả năng đáp ứng (Responsive):
- Ẩn trên máy tính để bàn (Hide On Desktop), Ẩn trên máy tính bảng (Hide On Tablet), Ẩn trên thiết bị di động (Hide On Mobile): Cho phép bạn ẩn tiện ích Tabs trên các loại thiết bị khác nhau nếu cần.
- Thuộc tính (Attributes):
- Cho phép bạn thêm các thuộc tính HTML tùy chỉnh cho thẻ tiện ích.
- CSS tùy chỉnh (Custom CSS) (chỉ có trong Elementor Pro):
- Cho phép bạn viết mã CSS trực tiếp để tùy chỉnh giao diện và hành vi của tiện ích Tabs một cách nâng cao.
