Gửi ticket
Khuyến mại
Kiến thức
Quản lý dịch vụ
Cách sử dụng Tiện ích HTML
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 HTML là gì ?
Tiện ích HTML trong Elementor là một công cụ mạnh mẽ cho phép bạn nhúng trực tiếp mã HTML tùy chỉnh vào trang của mình. Điều này cực kỳ hữu ích khi bạn cần thêm các đoạn mã đặc biệt từ các dịch vụ bên ngoài (ví dụ: mã nhúng từ YouTube, Google Maps, các widget của bên thứ ba), hoặc khi bạn muốn viết HTML thủ công để tạo ra một bố cục hoặc hiệu ứng không có sẵn trong các tiện ích Elementor khác.
3. Các bước sử dụng Menu Anchor
I. Nội dung (Content)
Đây là nơi bạn dán mã HTML của mình.
- Mã HTML (HTML Code):
- Đây là phần chính của tiện ích. Bạn chỉ cần dán đoạn mã HTML tùy chỉnh của mình vào ô này.
- Elementor sẽ diễn giải và hiển thị nội dung/chức năng mà mã HTML đó đại diện trực tiếp trên trang.
- Ví dụ:
- Để nhúng một video YouTube: Dán mã nhúng (<iframe>) từ YouTube.
- Để nhúng bản đồ Google Maps: Dán mã nhúng (<iframe>) từ Google Maps.
- Để thêm một nút hoặc đoạn văn bản với cấu trúc HTML phức tạp: Viết mã HTML tương ứng.
II. Kiểu hiển thị (Style)
Tiện ích HTML không có tùy chọn kiểu hiển thị trực tiếp trong tab này, vì bản thân nó chỉ là một “khung” để chứa mã. Mọi tùy chỉnh về kiểu hiển thị của nội dung được tạo bởi mã HTML sẽ được điều khiển bởi:
- CSS được nhúng trong chính mã HTML bạn dán vào.
- CSS từ các tệp style của trang web bạn.
- Hoặc thông qua CSS tùy chỉnh của bạn.
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 HTML (và do đó, nội dung mà nó hiển thị).
- Bố cục (Layout):
- Margin (Lề): Khoảng cách bên ngoài tiện ích HTML 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, giữa đường viền của hộp tiện ích và nội dung HTML.
- Width (Chiều rộng): Bạn có thể đặt chiều rộng của toàn bộ tiện ích HTML.
- 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.
- 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. Điều này đặc biệt hữu ích khi bạn muốn tùy chỉnh kiểu của nội dung HTML bằng CSS của riêng mình.
- 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 tiện ích HTML 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.
- 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 HTML.
- Đườ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.
- 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.
- 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 HTML trên các loại thiết bị khác nhau nếu cần.
- 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.
- 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 HTML một cách nâng cao. Điều này rất mạnh mẽ để điều khiển giao diện của nội dung mà mã HTML tạo ra.
