Cách sử dụng tiện ích Nội dung thu gọn – Accordion

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 nội dung thu gọn là gì ?

Tiện ích Nội dung thu gọn (Accordion) trong Elementor là một công cụ hữu ích để hiển thị các phần nội dung có thể mở rộng và thu gọn. Điều này rất lý tưởng để tạo các phần FAQ (Câu hỏi thường gặp), danh sách sản phẩm với thông tin chi tiết, hoặc bất kỳ nội dung nào bạn muốn người dùng có thể mở rộng/thu gọn để xem.

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 mục nội dung thu gọn và thiết lập biểu tượng.

1. Các mục nội dung thu gọn (Accordion Items):

• Phần này hiển thị các mục nội dung thu gọn hiện có của bạn. bạn có thể thấy trong hình “Mục nội dung thu gọn #1” và “Mục nội dung thu gọn #2”.
• Để chỉnh sửa một mục: Nhấp vào mục đó (ví dụ: “Mục nội dung thu gọn #1”). Các tùy chọn chi tiết cho mục đó sẽ mở ra:
  • Tiêu đề (Title): Nhập tiêu đề sẽ hiển thị trên thanh có thể nhấp để mở rộng.
  • Mô tả (Description): Nhập nội dung chi tiết sẽ hiển thị khi mục này được mở rộng. 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 mục mới: Nhấp vào nút “+ Thêm mục”. Một mục 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 mục: Nhấp vào biểu tượng “X” bên cạnh mục bạn muốn xóa.
• Để sắp xếp lại các mục: Kéo và thả các mục lên hoặc xuống để thay đổi thứ tự.

2. Biểu tượng (Icon):

• Nhấp vào biểu tượng hiện tại (thường là dấu cộng/trừ hoặc mũi tên) để mở Thư viện biểu tượng.
• Chọn một biểu tượng sẽ hiển thị bên cạnh tiêu đề khi mục nội dung thu gọn đang thu gọn.

3. Biểu tượng Hoạt động (Active Icon):

• Tương tự, nhấp vào biểu tượng hiện tại để mở Thư viện biểu tượng.
• Chọn một biểu tượng sẽ hiển thị bên cạnh tiêu đề khi mục nội dung thu gọn đang mở rộng (hoạt động).

4. Tiêu đề HTML (HTML Tag):

• Bạn có thể chọn loại thẻ HTML cho tiêu đề của mỗi mục nội dung thu gọn (ví dụ: H1, H2, H3, H4, H5, H6, div, span, p).
• Lựa chọn này quan trọng cho SEO, đặc biệt là đối với các phần FAQ. Thường sử dụng div hoặc h3/h4.

5. FAQ Schema (Elementor Pro):

• Gạt nút sang phải để kích hoạt FAQ Schema. Điều này giúp công cụ tìm kiếm hiểu được cấu trúc câu hỏi và câu trả lời của bạn, có thể cải thiện khả năng hiển thị trong kết quả tìm kiếm (ví dụ: hiển thị trực tiếp trong rich snippets của Google).

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 tiêu đề, nội dung và các biểu tượng.

A. Item (Mục)

• Background Color (Màu nền): Chọn màu nền cho toàn bộ mỗi mục nội dung thu gọn (tiêu đề và nội dung).
• Border Type (Loại đường viền): Thêm đường viền cho mỗi mục.
• 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 mỗi mục.
• Space Between (Khoảng cách giữa): Điều chỉnh khoảng cách thẳng đứng giữa các mục nội dung thu gọn.

B. Header (Tiêu đề)

• Background Color (Màu nền): Chọn màu nền cho thanh tiêu đề có thể nhấp.
• Color (Màu sắc): Chọn màu chữ cho tiêu đề ở trạng thái bình thường (khi chưa mở).
• Active Color (Màu hoạt động): Chọn màu chữ cho tiêu đề khi mục đang mở.
• 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 đề.
• Padding (Khoảng đệm): Khoảng cách bên trong giữa đường viền của thanh tiêu đề và văn bản/biểu tượng bên trong.

C. Icon (Biểu tượng)

• Alignment (Căn chỉnh): Căn chỉnh biểu tượng sang Trái hoặc Phải trong thanh tiêu đề.
• Color (Màu sắc): Màu sắc của biểu tượng khi mục đang thu gọn.
• Active Color (Màu hoạt động): Màu sắc của biểu tượng khi mục đang mở rộng.
• Space (Khoảng cách): Điều chỉnh khoảng cách giữa biểu tượng và văn bản tiêu đề.

D. Content (Nội dung)

• Background Color (Màu nền): Chọn màu nền cho khu vực nội dung khi mục được mở.
• Color (Màu sắc): Chọn màu chữ cho nội dung bên trong mục.
• 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.

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 Nội dung thu gọn.

1. Bố cục (Layout):

• Margin (Lề): Khoảng cách bên ngoài tiện ích Nội dung thu gọn 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 Nội dung thu gọn.
• 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.

2. 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.

3. 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 Nội dung thu gọn 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.

4. 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 Nội dung thu gọn.

5. Đườ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.

6. 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.

7. 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 Nội dung thu gọn trên các loại thiết bị khác nhau nếu cần.

8. 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.

9. 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 Nội dung thu gọn một cách nâng cao.