Cách sử dụng tiện ích Menu Anchor
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 Menu Anchor là gì ?
Tiện ích Menu Neo (Menu Anchor) trong Elementor không phải là một tiện ích hiển thị nội dung trực tiếp, mà là một công cụ giúp bạn tạo các liên kết “neo” (anchor links) trong trang web của mình. Điều này cực kỳ hữu ích để tạo hiệu ứng cuộn mượt mà đến các phần cụ thể trên cùng một trang, đặc biệt là trên các trang dài hoặc trang đích (landing page).
3. Các bước sử dụng Menu Anchor
I. Nội dung (Content)
Đây là nơi bạn đặt ID cho điểm neo của mình.
1. ID của Menu Neo (Menu Anchor ID):
- Nhập một ID duy nhất cho điểm neo này. ID này phải bắt đầu bằng một chữ cái (a-z) và chỉ chứa các ký tự chữ và số (a-z, 0-9) hoặc dấu gạch ngang (-). Không dùng dấu cách hoặc các ký tự đặc biệt khác!
- Đây là ID mà bạn sẽ sử dụng trong các liên kết để trỏ đến phần này của trang.
- Ví dụ: Nếu bạn muốn tạo một liên kết đến phần “Liên hệ” trên trang, bạn có thể đặt ID là lien-he hoặc phan-lien-he.
- Trong hình bạn cung cấp, ô này đang trống với hướng dẫn: “Đây là ID CSS bạn nên sử dụng trong các liên kết của bạn. Lưu ý! Liên kết ID CSS chỉ chấp nhận các ký tự chữ và số: “A-Z, a-z, 0-9, _ và -” và KHÔNG phải là dấu gạch dưới hoặc dấu gạch ngang ở đầu.”
II. Kiểu hiển thị (Style)
Tiện ích Menu Neo không có tùy chọn kiểu hiển thị trong tab này. Như đã đề cập, nó không hiển thị bất kỳ nội dung nào trên trang trực tiếp. Nó chỉ là một điểm đánh dấu “vô hình” để bạn có thể liên kết đến.
III. Nâng cao (Advanced)
Tiện ích Menu Neo cũng không có các tùy chọn nâng cao thông thường như Margin, Padding, Motion Effects, Background, Border, v.v., vì bản chất của nó là một điểm neo chứ không phải một phần tử hiển thị.
Tuy nhiên, có thể có một số tùy chọn chung của Elementor áp dụng cho mọi tiện ích, nhưng trọng tâm chính của Menu Neo là chỉ thiết lập ID.
Cách sử dụng Menu Neo:
- Kéo tiện ích Menu Neo vào vị trí bạn muốn người dùng cuộn đến khi nhấp vào liên kết.
- Đặt một ID duy nhất và dễ nhớ cho tiện ích Menu Neo đó (ví dụ: ve-chung-toi).
- Lưu trang.
- Bây giờ, bạn có thể tạo một liên kết đến điểm neo này từ bất kỳ tiện ích nào khác có hỗ trợ liên kết (ví dụ: nút, văn bản, menu điều hướng).
- Khi tạo liên kết, bạn sẽ nhập dấu thăng (#) theo sau là ID của Menu Neo mà bạn đã đặt.
- Ví dụ: Nếu ID là ve-chung-toi, liên kết sẽ là #ve-chung-toi.
- Nếu bạn muốn liên kết đến một điểm neo trên một trang khác, bạn sẽ sử dụng định dạng: URL_của_trang/#ID_của_neo (ví dụ: https://ten-trang-cua-ban.com/gioi-thieu/#ve-chung-toi).









