Cách sử dụng tiện ích Hộp 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 hộp Icon là gì ?

Tiện ích Hộp Biểu tượng (Icon Box) trong Elementor là một khối chức năng rất phổ biến, tương tự như Hộp Hình ảnh nhưng thay thế ảnh bằng một biểu tượng. Nó cho phép bạn kết hợp một biểu tượng, một tiêu đề và một đoạn văn bản mô tả trong một khung duy nhất. Đây là cách rất hiệu quả để trình bày các tính năng, lợi ích hoặc dịch vụ một cách ngắn gọn, trực quan và chuyên nghiệp.

3. Các bước sử dụng tiện ích hộp Icon

Bước 1. Chỉnh sửa nội dung

Đây là nơi bạn chọn biểu tượng, nhập tiêu đề, mô tả và thiết lập liên kết.

1. Biểu tượng (Icon):

• Đây là phần quan trọng nhất. Nhấp vào nút có hình biểu tượng (trong hình bạn cung cấp là ngôi sao) để mở Thư viện biểu tượng.

• Một cửa sổ pop-up sẽ hiện ra với hàng ngàn biểu tượng từ Font Awesome (và các thư viện khác nếu bạn có cài đặt thêm).
• Bạn có thể tìm kiếm biểu tượng theo tên (ví dụ: “check”, “gear”, “cloud”) hoặc duyệt qua các danh mục.
• Sau khi tìm thấy biểu tượng ưng ý, nhấp vào nó và sau đó nhấp vào nút “Chèn” ở dưới cùng bên phải của cửa sổ pop-up.

2. Xem (View):

• Tùy chọn này cho phép bạn thay đổi cách biểu tượng được hiển thị trong hộp:
  • Mặc định (Default): Biểu tượng chỉ hiển thị một mình.
  • Khối (Stacked): Biểu tượng được đặt trên một hình nền khối (vuông, tròn).
  • Khung (Framed): Biểu tượng được đặt trong một khung viền (vuông, tròn).

3. Hình dạng (Shape): (Chỉ xuất hiện khi bạn chọn “Khối” hoặc “Khung” ở tùy chọn “Xem”)

• Nếu bạn chọn “Khối” hoặc “Khung”, tùy chọn này cho phép bạn chọn hình dạng của khối nền hoặc khung viền:
  • Tròn (Circle): Hình tròn.
  • Vuông (Square): Hình vuông.

4. Tiêu đề (Title):

• Nhập tiêu đề chính cho hộp biểu tượng của bạn vào ô này. Đây thường là một dòng ngắn gọn mô tả nội dung.
• Trong hình bạn cung cấp, tiêu đề đang là “Đây là tiêu đề”.

5. Mô tả (Description):

• Nhập đoạn văn bản mô tả chi tiết hơn cho hộp biểu tượng vào ô này.
• Trong hình bạn cung cấp, mô tả đang là “Thêm một đoạn văn bản ở đây. Nhấp vào ô văn bản để tùy chỉnh nội dung, phong cách phông chữ và màu sắc của đoạn văn bản của bạn.”

6. Liên kết (Link):

• Đây là nơi bạn 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 hộp biểu tượng. Toàn bộ hộp biểu tượng (biểu tượng, tiêu đề, mô tả) có thể trở thành một liên kết.
• Ví dụ: dán link đến một trang chi tiết dịch vụ, một bài viết cụ thể.
• Bạn cũng có thể nhấp vào biểu tượng hình bánh răng nhỏ bên cạnh ô link để mở các tùy chọn nâng cao như “Mở trong tab mới” hoặc “Thêm rel=nofollow”.

7. Vị trí biểu tượng (Icon Position):

• Cho phép bạn chọn vị trí của biểu tượng so với tiêu đề và mô tả:
  • Mặc định (Default): Thường là ở trên cùng.
  • Trái (Left): Biểu tượng nằm bên trái văn bản.
  • Phải (Right): Biểu tượng nằm bên phải văn bản.

8. Tiêu đề HTML (HTML Tag):

• Bạn có thể chọn loại thẻ HTML cho tiêu đề của mình (ví dụ: H1, H2, H3, H4, H5, H6, div, span, p).
• Lựa chọn này quan trọng cho SEO (Tối ưu hóa công cụ tìm kiếm). Nên sử dụng H2, H3 hoặc H4 cho tiêu đề của hộp biểu tượng tùy thuộc vào cấu trúc tiêu đề tổng thể của trang.

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, tiêu đề và mô tả trong hộp.

A. Icon (Biểu tượng)

• Primary Color (Màu chính): Màu sắc chính của biểu tượng.
• Secondary Color (Màu phụ): (Chỉ xuất hiện khi chọn “Khối” hoặc “Khung”) Màu nền hoặc màu khung viền của biểu tượng.
• Size (Kích thước): Điều chỉnh kích thước của biểu tượng.
• Padding (Khoảng đệm): (Chỉ xuất hiện khi chọn “Khối” hoặc “Khung”) Khoảng cách giữa biểu tượng và viền của khối nền/khung viền.
• Space (Khoảng cách): Điều chỉnh khoảng cách giữa biểu tượng và phần văn bản (tiêu đề/mô tả).
• Border Width (Độ rộng viền): (Chỉ xuất hiện khi chọn “Khung”) Độ dày của đường viền.
• Border Radius (Bán kính bo tròn): Bo tròn các góc của khối nền hoặc khung viền.
• Rotate (Xoay): Xoay biểu tượng theo một góc.
• Hover (Khi di chuột qua): Tùy chỉnh màu sắc, độ xoay cho biểu tượng khi người dùng di chuột qua nó.

B. Nội dung (Content)

• Căn chỉnh (Alignment): Căn chỉnh toàn bộ nội dung (tiêu đề và mô tả) sang Trái, Giữa hoặc Phải.
• Vertical Alignment (Căn chỉnh dọc): (Nếu biểu tượng nằm bên trái/phải) Căn chỉnh biểu tượng và văn bản theo chiều dọc (trên, giữa, dưới).
• Màu sắc (Color):
  • Tiêu đề (Title Color): Chọn màu cho tiêu đề.
  • Mô tả (Description Color): Chọn màu cho đoạn văn bản mô tả.
• Typography (Phông chữ):
  • Tiêu đề (Title Typography): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho tiêu đề.
  • Mô tả (Description Typography): Tương tự, tùy chỉnh phông chữ cho mô tả.
• Khoảng cách giữa Tiêu đề & Mô tả (Gap Between Title & Description): Điều chỉnh khoảng cách thẳng đứng giữa tiêu đề và đoạn mô tả.

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 Hộp Biểu tượng.

1. Bố cục (Layout):

• Margin (Lề): Khoảng cách bên ngoài tiện ích Hộp Biểu tượ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, giữa đường viền của hộp và nội dung (biểu tượng, tiêu đề, mô tả).
• Width (Chiều rộng): Bạn có thể đặt chiều rộng của toàn bộ tiện ích Hộp Biểu tượ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 hộp biểu tượ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ộ hộp 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 Hộp Biểu tượ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 hộp biểu tượng trên các loại thiết bị khác nhau nếu cần hoặc muốn hiển thị nội dung khác.

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 hộp biểu tượng một cách nâng cao.

Lời khuyên cho người mới bắt đầu:

• Chọn biểu tượng ý nghĩa: Hãy đảm bảo biểu tượng bạn chọn thực sự minh họa cho tiêu đề và mô tả.
• Giữ ngắn gọn: Tiêu đề và mô tả nên súc tích, dễ đọc.
• Thử nghiệm vị trí biểu tượng: Với “Vị trí biểu tượng” bạn có thể tạo ra các bố cục khác nhau (icon trên, icon bên trái…).
• Sử dụng nhất quán: Nếu bạn có nhiều hộp biểu tượng, hãy giữ phong cách thiết kế nhất quán để trang web trông chuyên nghiệp.
• Kiểm tra trên các thiết bị: Luôn xem trước trên máy tính bảng và điện thoại để đảm bảo hiển thị tốt.