Skip to content
  • Webo
  • Elementor
  • Flatsome
  • Blocksy
  • Divi
Webo Developers
  • Webo
  • Elementor
  • Flatsome
  • Blocksy
  • Divi
Webo Developers

Hướng dẫn Blocksy

7
  • Blocksy - Cơ bản
    • Bảng Menu
    • Trang web khởi đầu
    • Bảng điều khiển Blocksy
    • Theme con
    • Dịch thuật Blocksy
    • Cài đặt chủ đề Blocksy
    • Cách Nâng cấp lên Blocksy Pro

Hướng dẫn Webo

22
  • Webo Help: Tổng quan trang quản lý Webo
  • Webo Help: Cách chỉnh sửa nội dung cơ bản
  • Webo Help: Cách xem danh sách website
  • Webo Help: Cách upload và tối ưu hình ảnh
  • Webo Help: Cách tạo website trial
  • Webo Help: Cách gửi yêu cầu hỗ trợ
  • Webo Help: Cách đăng nhập quản trị website bằng SSO
  • Webo Help: Cách cấp quyền để Webo kiểm tra website
  • Webo Help: Cách mời người quản lý website
  • Webo Help: Cách thêm tên miền riêng vào website
  • Webo Help: Cách trỏ DNS tên miền về Webo
  • Webo Help: Cách dùng Cloudflare cho tên miền Webo
  • Webo Help: Cách kiểm tra SSL và trạng thái tên miền
  • Webo Help: Webo Help Center là gì?
  • Webo Help: Cách chọn gói website phù hợp
  • Webo Help: Cách đăng nhập tài khoản Webo bằng email
  • Webo Help: Cách thanh toán và nâng cấp gói
  • Hệ thống Webo
    • Hướng dẫn tạo website trên Webo sau khi đăng ký tài khoản
    • Hướng dẫn mua gói tự tạo website tại Webo
    • Trang tổng quan (Dashboard) của website sau khi tạo site trên hệ thống Webo
    • Đăng ký tài khoản tại hệ thống tạo website tự động của Webo
    • Giới thiệu về hệ thống tạo website của Webo.vn

Hướng dẫn Wordpress

6
  • Thiết lập Trang chủ và Blog
  • Tạo trang mới
  • Cách thay đổi trang chủ
  • Cách tạo tài khoản quản trị cho đội ngũ hỗ trợ
  • Thay đổi Logo & Tiêu đề Trang
  • Thiết lập Menu điều hướng (Navigation Menu)

Hướng dẫn Elementor

14
  • Cách tùy chỉnh tiện ích giỏ hàng WooCommerce của Elementor
  • Cách thêm mục lục vào website bằng Elementor Pro
  • Hướng dẫn cài đặt Elementor chi tiết cho người mới bắt đầu
  • Xây dựng addons Elementor
    • Quy trình tải – Loading Process
    • Lớp Chính – Main Class
    • Kiểm tra tương thích – Compatibility Checks
    • Quy trình khởi tạo – Initialization Process
    • Sử dụng Namespaces – Using Namespaces
    • Bình Luận Header – Header Comments
    • Cấu trúc Tệp & Thư mục
  • Elementor Editor
    • Bảng Cài Đặt Trang
    • Bảng Tùy chọn Người dùng
    • Xem trước Elementor
    • Bảng điều khiển Elementor

Hướng dẫn Flatsome

13
  • Các mẫu biến thể
  • Cách dịch giao diện hoặc plugin
  • Cách tạo Mega Menu (menu thả xuống tùy chỉnh hoàn toàn)
  • Hình ảnh biến thể bổ sung
  • Cách sử dụng Flatsome Studio
  • Cách chỉnh sửa tiêu đề cửa hàng bằng UX Builder
  • Cách thêm biểu tượng thanh toán vào chân trang
  • Cách tạo cửa sổ bật lên Hướng dẫn Kích thước sản phẩm
  • Cách Xóa “Tải xuống” khỏi Tài khoản của tôi
  • Cách tạo một trang sản phẩm tùy chỉnh
  • Cách thêm nhãn menu cá nhân của riêng bạn
  • Giấy phép/đăng ký giao diện
  • Cách tạo nội dung trang 404 tùy chỉnh
View Categories

Cách thêm mục lục vào website bằng Elementor Pro

Với tiện ích Mục lục trong Elementor Pro, bạn có thể tự động tạo danh sách nội dung hiển thị trên mọi bài viết – giúp người dùng dễ điều hướng và tăng hiệu quả SEO. Khi người dùng nhấp vào một mục trong danh sách, họ sẽ được điều hướng ngay đến phần tương ứng trên trang nhờ tính năng điểm seo. Cùng Webo tìm hiểu chi tiết thêm mục lục vào website bằng Elementor qua bài viết này nhé!

Cách thêm mục lục vào website bằng Elementor Pro #

Bước 1: Tạo hoặc chỉnh sửa mẫu bài đăng đơn lẻ #

Để thêm mục lục vào website bằng elementor, hãy mở Elementor Theme Builder và tạo một mẫu bài đăng đơn mới hoặc chỉnh sửa một mẫu sẵn có mà bạn muốn thêm mục lục. Webo sẽ hướng dẫn bạn cách tối ưu bài viết blog để cải thiện trải nghiệm người đọc và tăng hiệu quả SEO.

Bước 2: Thêm tiện ích mục lục #

Sau khi mở mẫu bài đăng đơn, hãy kéo tiện ích Mục lục (Table of Contents) vào vị trí bạn muốn hiển thị trên trang. Tiện ích này nằm trong danh mục Đơn (Single), cùng với các thành phần như Tiêu đề bài đăng và Nội dung bài đăng.

Kéo mục lục đến vị trí bạn muốn
Thêm mục lục vào website bằng Elementor

Ngay khi thêm mục lục vào WordPress bằng Elementor, hệ thống sẽ tự động quét và hiển thị danh sách các tiêu đề có trong bài viết. Bước tiếp theo, bạn chỉ cần tùy chỉnh cài đặt để mục lục hoạt động theo ý muốn.

Bước 3: Cấu hình nội dung tiện ích mục lục #

Để tùy chỉnh nội dung hiển thị trong mục lục, hãy mở cài đặt tiện ích Mục lục và chuyển đến tab Nội dung (Content). Tại đây, bạn có thể cấu hình các thành phần quan trọng như:

  • Tiêu đề mục lục (Specific heading tags): Nhập tiêu đề hiển thị, ví dụ “Mục lục”, để xuất hiện phía trên danh sách liên kết.
  • Chọn nội dung hiển thị:
    • Thẻ tiêu đề: Chọn thẻ heading cần đưa vào mục lục (ví dụ, chỉ hiển thị H2 & H3).
    • Container khác (Other containers): Thêm mục lục từ các phần ngoài nội dung bài viết, như chân trang (tính năng nâng cao).
Cấu hình nội dung tiện ích mục lục
Cấu hình nội dung tiện ích mục lục

Ngoài ra, bạn có thể loại trừ tiêu đề không mong muốn trong tab Exclude bằng cách thêm một lớp CSS đặc biệt (ví dụ: “bỏ qua”) vào tiêu đề H2 trong trình chỉnh sửa WordPress. Sau đó, sử dụng Anchors by Selector để ẩn tiêu đề đó khỏi mục lục.

  • Bạn có thể tùy chỉnh cách hiển thị mục lục bằng cài đặt Marker View, lựa chọn giữa kiểu đánh số hoặc dấu đầu dòng.
  • Nếu chọn dấu đầu dòng, bạn có thể sử dụng các biểu tượng từ Font Awesome để tạo điểm nhấn.
Loại trừ tiêu đề không mong muốn
Loại trừ tiêu đề không mong muốn

Ngoài ra, phần Tùy chọn bổ sung giúp bạn kiểm soát nhiều cài đặt khác:

  • Word Wrap – Cho phép nội dung mục lục hiển thị trên nhiều dòng nếu cần.
  • Minimize Box – Người dùng có thể thu gọn hoặc mở rộng mục lục. Bạn cũng có thể thiết lập biểu tượng tùy chỉnh và điều chỉnh hành vi trên thiết bị di động.
  • Hierarchical View – Khi bật, các tiêu đề phụ sẽ thụt lề dưới tiêu đề chính. Bạn cũng có thể cài đặt thu gọn các mục con hoặc giữ danh sách hiển thị đầy đủ.

Bước 4: Tùy chỉnh giao diện mục lục #

Chuyển sang tab Kiểu (Style) để thiết lập giao diện cho hộp mục lục. Tại đây, bạn có thể thay đổi màu sắc, kiểu chữ và các tùy chọn khác nhằm đảm bảo mục lục hài hòa với thiết kế tổng thể của trang web. Việc tùy chỉnh này giúp mục lục không chỉ thân thiện với người dùng mà còn tạo sự đồng nhất với giao diện của bạn.

Tùy chỉnh giao diện mục lục
Tùy chỉnh giao diện mục lục

Bước 5: Tùy chỉnh Cài đặt Nâng cao #

Cuối cùng, truy cập tab Nâng cao (Advanced)để điều chỉnh một số cài đặt bổ sung, giúp mục lục hoạt động linh hoạt hơn. Nếu đặt Chiều rộng (Width) là Tùy chỉnh (Custom) và Vị trí (Position) là Cố định (Fixed) trong phần Định vị (Positioning), mục lục sẽ luôn hiển thị ngay cả khi người dùng cuộn trang.

Tùy chỉnh Cài đặt Nâng cao
Tùy chỉnh Cài đặt Nâng cao

Khi muốn hiển thị mục lục “trên” một phần tử khác (chẳng hạn như tiêu đề), bạn có thể tăng Z-Index để đảm bảo nó xuất hiện phía trên.

Việc thêm mục lục vào website bằng Elementor không chỉ giúp tối ưu trải nghiệm người dùng mà còn cải thiện SEO hiệu quả. Với các bước hướng dẫn chi tiết trên, bạn có thể dễ dàng tạo mục lục tự động, giúp nội dung trở nên chuyên nghiệp và dễ điều hướng hơn. Hãy áp dụng ngay để nâng cao chất lượng website của bạn!

What are your Feelings

  • Happy
  • Normal
  • Sad

Share This Article :

  • Facebook
  • X
  • LinkedIn
  • Pinterest
Cách tùy chỉnh tiện ích giỏ hàng WooCommerce của ElementorHướng dẫn cài đặt Elementor chi tiết cho người mới bắt đầu
Mục lục
  • Cách thêm mục lục vào website bằng Elementor Pro
    • Bước 1: Tạo hoặc chỉnh sửa mẫu bài đăng đơn lẻ
    • Bước 2: Thêm tiện ích mục lục
    • Bước 3: Cấu hình nội dung tiện ích mục lục
    • Bước 4: Tùy chỉnh giao diện mục lục
    • Bước 5: Tùy chỉnh Cài đặt Nâng cao
W
WEBO DEVELOPERS

CÔNG TY TNHH MTV WEBO
Giấy chứng nhận ĐĂNG KÝ DOANH NGHIỆP do SỞ KẾ HOẠCH VÀ ĐẦU TƯ TP. ĐÀ NẴNG cấp ngày 08/10/2021
Chịu trách nhiệm nội dung: Dương Phú Phương

MST: 0402112909
14 Mỹ Đa Tây 4, Đà Nẵng
0905 93 92 99
lienhe@webo.vn

Công ty

  • Về chúng tôi
  • Tiếp thị liên kết
  • Liên hệ
  • Tuyển dụng
  • Tin tức

Hổ trợ

  • Blog webo

Sản phẩm

  • Webo
  • Elementor
  • Flatsome
  • Blocksy
  • Divi