Hướng dẫn sử dụng Widget – Table Of Content

10/09/2025
122 lượt xem
5/5 - (1 đánh giá)
Chia sẻ qua

Cách sử dụng tiện ích Mục lục – Table of Contents

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 mục lục là gì ?

Tiện ích Mục lục (Table of Contents – TOC) trong Elementor là một công cụ rất hữu ích để tạo ra một danh sách điều hướng tự động cho các tiêu đề (headings) trên trang của bạn. Điều này giúp người đọc dễ dàng quét nội dung và nhanh chóng chuyển đến các phần họ quan tâm, cải thiện trải nghiệm người dùng và cả SEO.

3. Các bước sử dụng tiện ích mục lục

I. Nội dung (Content)

Đây là nơi bạn cấu hình tiêu đề, các thẻ tiêu đề để đưa vào, và cách hiển thị của mục lục.

A. Table of Contents (Mục lục)

Image6

  • Tiêu đề (Title): Nhập tiêu đề cho mục lục của bạn (ví dụ: “Table of Contents” hoặc “Mục lục”).
  • Thẻ HTML (HTML Tag): Chọn thẻ HTML cho tiêu đề mục lục (ví dụ: H1, H2, H3, H4, H5, H6, div, span).
  • Bao gồm (Include):
    • Anchors by Tags (Neo theo thẻ): Chọn các thẻ tiêu đề HTML (H1, H2, H3, H4, H5, H6) mà bạn muốn tiện ích Mục lục quét và đưa vào danh sách. Bạn có thể chọn nhiều thẻ.
    • Container (Vùng chứa): Cho phép bạn chỉ định một vùng chứa cụ thể (ví dụ: một Section hoặc Column) để tiện ích chỉ quét các tiêu đề bên trong vùng đó, thay vì toàn bộ trang. Điều này hữu ích nếu bạn có nhiều khu vực tiêu đề và chỉ muốn tạo mục lục cho một phần nhất định.
  • Marker View (Kiểu dấu đầu dòng): Chọn kiểu hiển thị dấu đầu dòng cho các mục trong danh sách (ví dụ: Numbers – Số, Icons – Biểu tượng, Dots – Dấu chấm).
  • Văn bản không tìm thấy tiêu đề (No headings found text): Nhập văn bản hiển thị nếu không tìm thấy tiêu đề nào trên trang hoặc trong vùng chứa đã chọn.

B. Tùy chọn bổ sung (Additional Options)

Image8

  • Các tùy chọn này thường bao gồm các cài đặt như:
    • Thu gọn (Collapse): Tùy chọn để mục lục có thể thu gọn/mở rộng.
    • Hiển thị thứ bậc (Hierarchy): Điều chỉnh cách hiển thị các cấp tiêu đề con.
    • Đánh dấu mục hiện tại (Mark current item): Đánh dấu mục đang được xem trên trang khi người dùng cuộn.
    • Tùy chỉnh khoảng cách cuộn (Custom scroll offset): Điều chỉnh khoảng cách cuộn khi nhấp vào một mục trong mục lục.

II. Kiểu hiển thị (Style)

Đây là nơi bạn tùy chỉnh giao diện của tiện ích Mục lục.

A. Box (Hộp)

Image4

  • Background Color (Màu nền): Màu nền của hộp mục lục.
  • Border Type (Loại đường viền): Thêm đường viền cho hộp mục lục.
  • Border Radius (Bán kính bo tròn): Bo tròn góc của hộp.
  • Box Shadow (Bóng đổ): Thêm bóng đổ cho hộp mục lục.
  • Padding (Khoảng đệm): Khoảng đệm bên trong hộp mục lục.

B. Header (Tiêu đề)

Image5

  • Background Color (Màu nền): Màu nền của phần tiêu đề mục lục.
  • Text Color (Màu văn bản): Màu chữ cho tiêu đề mục lục.
  • Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho tiêu đề mục lục.
  • Padding (Khoảng đệm): Khoảng đệm của phần tiêu đề.

C. List (Danh sách)

Image9

  • Text Color (Màu văn bản): Màu chữ mặc định cho các mục trong danh sách.
  • Hover Color (Màu khi di chuột): Màu chữ khi di chuột qua một mục.
  • Active Color (Màu khi hoạt động): Màu chữ của mục đang hoạt động (được đánh dấu).
  • Typography (Phông chữ): Tùy chỉnh phông chữ cho các mục trong danh sách.
  • Spacing (Khoảng cách): Khoảng cách giữa các mục trong danh sách.
  • Indent (Thụt lề): Điều chỉnh mức độ thụt lề cho các cấp tiêu đề con.
  • Marker Color (Màu dấu đầu dòng): Màu của dấu đầu dòng (số, biểu tượng, dấu chấm).
  • Marker Size (Kích thước dấu đầu dòng): Kích thước của dấu đầu dòng.

III. 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 Mục lục.

Image2

  1. Bố cục (Layout):
  • Margin (Lề): Khoảng cách bên ngoài tiện ích Mục lục với các phần tử khác xung quanh.
  • Padding (Khoảng đệm): Khoảng đệm bên trong tiện ích.
  • Width (Chiều rộng): Đặt chiều rộng của toàn bộ tiện ích Mục lục.
  • Position (Vị trí): Mặc định, Relative, Absolute, Fixed (các tùy chọn định vị nâng cao). Tiện ích mục lục thường được đặt ở vị trí cố định (Fixed) để luôn hiển thị khi cuộn.
  • 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.
  1. 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.
  1. 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 Mục lục khi trang được tải.
  • Hover Animation (Hoạt ảnh di chuột qua): Hiệu ứng chuyển động cho toàn bộ 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.
  1. 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 Mục lục.
  1. Đườ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.
  1. 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.
  1. 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 Mục lục trên các loại thiết bị khác nhau nếu cần.
  1. 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.
  1. 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 một cách nâng cao.
5/5 - (1 đánh giá)
Bài viết liên quan

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đang tải...