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 Danh sách Icon
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 danh sách Icon là gì ?
Danh sách Icon (Icon List) trong Elementor là một công cụ rất hữu ích để tạo các danh sách có dấu đầu dòng bằng biểu tượng thay vì dấu chấm tròn truyền thống. Đây là cách tuyệt vời để liệt kê các tính năng, lợi ích, dịch vụ hoặc bất kỳ điểm nổi bật nào một cách rõ ràng và hấp dẫn về mặt hình ảnh.
3. Các bước sử dụng tiện ích danh sách Icon
Bước 1. Chỉnh sửa nội dung
Đây là nơi bạn thêm, chỉnh sửa các mục trong danh sách và thiết lập liên kết.
1. Danh sách Icon (Icon List):
- Phần này hiển thị các mục trong danh sách của bạn. Bạn có thể thấy trong hình “Mục danh sách #1”, “Mục danh sách #2”, “Mục danh sách #3”.
- Để chỉnh sửa một mục: Nhấp vào mục đó (ví dụ: “Mục danh sách #1”). Các tùy chọn chi tiết cho mục đó sẽ mở ra:
- Văn bản (Text): Nhập nội dung văn bản cho mục danh sách này.
- Biểu tượng (Icon): Nhấp vào biểu tượng hiện tại (hoặc biểu tượng placeholder) để mở Thư viện biểu tượng. Chọn một biểu tượng mới cho mục này.
- Liên kết (Link): Dán đường link (URL) mà bạn muốn người dùng được chuyển hướng đến khi họ nhấp vào mục danh sách này.
- Để thêm một mục mới: Nhấp vào nút “+ Thêm mục”. Một mục mới sẽ được thêm vào cuối danh sách, và bạn có thể tùy chỉnh nó.
- Để xóa một mục: Nhấp vào biểu tượng “X” bên cạnh mục bạn muốn xóa.
- Để sắp xếp lại các mục: Kéo và thả các mục lên hoặc xuống để thay đổi thứ tự.
2. Bố cục (Layout):
- Tùy chọn này xác định cách các mục trong danh sách được sắp xếp:
- Mặc định (Default): Các mục sẽ hiển thị theo chiều dọc, mỗi mục một dòng.
- Nội tuyến (Inline): Các mục sẽ hiển thị theo chiều ngang, trên cùng một dòng (nếu đủ chỗ). Thường dùng cho các danh sách ngắn gọn hoặc danh sách trong thanh điều hướng nhỏ.
3. Áp dụng liên kết vào (Apply Link On):
- Tùy chọn này cho phép bạn quyết định khi nào liên kết sẽ được kích hoạt:
- Toàn màn hình (Whole Item): Khi người dùng nhấp vào bất kỳ phần nào của mục danh sách (biểu tượng hoặc văn bản), liên kết sẽ hoạt động. (Đây là lựa chọn trong hình bạn gửi).
- Chỉ văn bản (Text Only): Chỉ khi người dùng nhấp vào văn bản, liên kết mới hoạt động.
Bước 2. Chỉnh sửa kiểu hiển thị
Đây là nơi bạn tùy chỉnh giao diện của biểu tượng, văn bản và các khoảng cách trong danh sách.
A. Danh sách (List)
- Space Between (Khoảng cách giữa): Điều chỉnh khoảng cách thẳng đứng giữa các mục trong danh sách.
- Divider (Đường phân cách):
- Bật/Tắt (Toggle): Bạn có thể bật tùy chọn này để thêm một đường kẻ ngang nhỏ giữa các mục danh sách.
- Weight (Độ dày): Độ dày của đường phân cách.
- Color (Màu sắc): Màu của đường phân cách.
B. Icon (Biểu tượng)
- Color (Màu sắc): Màu sắc của các biểu tượng trong danh sách.
- Hover (Khi di chuột qua): Màu sắc của biểu tượng khi người dùng di chuột qua nó.
- Size (Kích thước): Điều chỉnh kích thước của các biểu tượng.
- Alignment (Căn chỉnh): Căn chỉnh biểu tượng sang Trái, Giữa hoặc Phải so với văn bản của mục danh sách.
C. Text (Văn bản)
- Text Indent (Thụt lề văn bản): Điều chỉnh khoảng cách ngang giữa biểu tượng và văn bản của mục danh sách.
- Color (Màu sắc): Màu sắc của văn bản trong danh sách.
- Hover (Khi di chuột qua): Màu sắc của văn bản khi người dùng di chuột qua nó.
- Typography (Phông chữ): Nhấp vào biểu tượng bút chì để tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho văn bản trong danh sách.
Bước 3. Chỉnh sửa nâng cao
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 Danh sách Icon.
- Bố cục (Layout):
- Margin (Lề): Khoảng cách bên ngoài tiện ích Danh sách Icon 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 và nội dung danh sách.
- Width (Chiều rộng): Bạn có thể đặt chiều rộng của toàn bộ tiện ích Danh sách Icon.
- 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.
- 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 danh sách khi trang được tải.
- Hover Animation (Hoạt ảnh di chuột qua): Hiệu ứng chuyển động cho toàn bộ danh sách hoặc từng mục 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 Danh sách Icon.
- Đườ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 danh sách 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 danh sách icon một cách nâng cao.
