Cách sử dụng tiện ích Menu điều hướng

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 điều hướng là gì ?

Tiện ích Menu Điều hướng (Navigation Menu) trong Elementor (thường là một phần của Elementor Pro) là một công cụ thiết yếu để hiển thị các menu đã được tạo trong WordPress của bạn. Nó cho phép bạn tùy chỉnh hoàn toàn giao diện của menu, từ kiểu chữ, màu sắc đến hiệu ứng di chuột và hành vi trên thiết bị di động.

3. Các bước sử dụng tiện ích Menu điều hướng

I. Nội dung (Content)

Đây là nơi bạn chọn menu, thiết lập bố cục, hiệu ứng và hành vi trên thiết bị di động.

A. Bố cục (Layout)

• Tên menu (Menu Name): Chọn menu mà bạn muốn hiển thị từ danh sách thả xuống. Danh sách này sẽ bao gồm tất cả các menu bạn đã tạo trong WordPress.
• Bố cục (Layout): Chọn cách menu sẽ hiển thị:
  • Theo chiều ngang (Horizontal): Các mục menu nằm trên một hàng ngang (thường dùng cho menu chính).
  • Theo chiều dọc (Vertical): Các mục menu nằm theo một cột dọc.
  • Thả xuống (Dropdown): Menu hiển thị dưới dạng thả xuống (thường dùng cho menu phụ hoặc menu di động).
• Căn chỉnh (Alignment): Căn chỉnh các mục menu (Trái, Giữa, Phải).
• Con trỏ (Pointer): Chọn kiểu hiệu ứng xuất hiện khi di chuột qua một mục menu (ví dụ: Gạch chân, Khung, Nền).
• Hiệu ứng động (Animation): Chọn hiệu ứng hoạt ảnh cho con trỏ khi di chuột qua.
• Chỉ báo menu con (Submenu Indicator): Bật/tắt biểu tượng chỉ báo cho các mục menu có menu con.

B. Mobile Dropdown (Menu thả xuống trên thiết bị di động)

• Điểm ngắt (Breakpoint): Chọn kích thước màn hình mà tại đó menu sẽ chuyển sang dạng thả xuống (ví dụ: Máy tính bảng ngang (>1024), Máy tính bảng (>768), Di động (>360), v.v.). Điều này xác định khi nào menu hamburger sẽ xuất hiện.
• Full Width (Chiều rộng đầy đủ): Gạt nút sang phải để menu thả xuống chiếm toàn bộ chiều rộng của màn hình trên thiết bị di động.
• Căn lề (Align Items): Căn chỉnh các mục trong menu thả xuống (Trái, Giữa, Phải).
• Toggle Button (Nút chuyển đổi): Chọn kiểu biểu tượng cho nút menu di động (thường là Hamburger).
• Bình thường/Di chuột (Normal/Hover): Đặt trạng thái ban đầu và trạng thái khi di chuột qua của nút chuyển đổi.
• Biểu tượng (Icon): Thay đổi biểu tượng của nút chuyển đổi (ví dụ: biểu tượng hamburger).
• Toggle Align (Căn chỉnh chuyển đổi): Căn chỉnh nút chuyển đổi (Trái, Giữa, Phải).

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

Đây là nơi bạn tùy chỉnh giao diện của menu, các mục menu, menu con và nút điều hướng di động.

A. Main Menu (Menu chính)

• Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, kiểu chữ, v.v. cho các mục menu chính.
• Text Color (Màu văn bản): Màu chữ cho các mục menu. Bạn có thể đặt màu cho trạng thái Bình thường (Normal), Di chuột (Hover) và Hoạt động (Active).
• Background Color (Màu nền): Màu nền cho các mục menu. Tương tự, có thể đặt cho Bình thường, Di chuột và Hoạt động.
• Pointer Color (Màu con trỏ): Màu sắc của hiệu ứng con trỏ.
• Padding (Khoảng đệm): Khoảng đệm bên trong các mục menu.
• Horizontal Padding (Khoảng đệm ngang): Khoảng đệm ngang.
• Vertical Padding (Khoảng đệm dọc): Khoảng đệm dọc.
• Space Between (Khoảng cách giữa): Khoảng cách giữa các mục menu.
• Border Radius (Bán kính bo tròn): Bo tròn góc của các mục menu.
• Box Shadow (Bóng đổ): Thêm bóng đổ cho các mục menu.

B. Dropdown (Menu con/thả xuống)

• Background Color (Màu nền): Màu nền của menu con.
• Border Radius (Bán kính bo tròn): Bo tròn góc của menu con.
• Box Shadow (Bóng đổ): Thêm bóng đổ cho menu con.
• Typography (Phông chữ): Tùy chỉnh phông chữ cho các mục trong menu con.
• Text Color (Màu văn bản): Màu chữ cho các mục menu con (Bình thường, Di chuột, Hoạt động).
• Pointer Color (Màu con trỏ): Màu sắc của hiệu ứng con trỏ trong menu con.
• Padding (Khoảng đệm): Khoảng đệm bên trong các mục menu con.
• Horizontal Padding (Khoảng đệm ngang): Khoảng đệm ngang.
• Vertical Padding (Khoảng đệm dọc): Khoảng đệm dọc.
• Space Between (Khoảng cách giữa): Khoảng cách giữa các mục menu con.
• Divider (Dấu phân cách): Thêm dấu phân cách giữa các mục menu con.
• Distance (Khoảng cách): Khoảng cách giữa menu chính và menu con.

C. Toggle Button (Nút chuyển đổi – cho di động)

• Color (Màu sắc): Màu sắc của biểu tượng nút chuyển đổi.
• Background Color (Màu nền): Màu nền của nút chuyển đổi.
• Size (Kích thước): Kích thước của biểu tượng.
• Border Width (Độ dày đường viền): Độ dày của đường viền nút.
• Border Radius (Bán kính bo tròn): Bo tròn góc của nút.
• Padding (Khoảng đệm): Khoảng đệm bên trong nút.

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 Menu Điều hướng.

1. Bố cục (Layout):

• Margin (Lề): Khoảng cách bên ngoài tiện ích Menu Điều hướng 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): Đặt chiều rộng của toàn bộ tiện ích Menu Điều hướng.
• 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 Menu Điều hướng 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.

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 Menu Điều hướng.

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 Menu Điều hướng 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 một cách nâng cao.