Cách sử dụng tiện ích Icon – biểu tượ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 biểu tượng là gì ?

Tiện ích Biểu tượng (Icon) trong Elementor cho phép bạn chèn và tùy chỉnh các biểu tượng từ thư viện Font Awesome hoặc các nguồn khác vào trang web của mình.

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

Đây là nơi bạn chọn biểu tượng và thiết lập liên kết cho nó.

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

• Đây là phần quan trọng nhất. Nhấp vào nút có hình ngôi sao (hoặc biểu tượng đã chọn) để 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ụ: “phone”, “check”, “star”) 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ị:
  • Mặc định (Default): Biểu tượng chỉ hiển thị một mình. (Đây là lựa chọn trong hình bạn gửi).
  • 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. 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 biểu tượng.
• Ví dụ: Dán link đến trang chủ, trang liên hệ, một bài viết cụ thể, hoặc một profile mạng xã hội.
• 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 hơn như “Mở trong tab mới” (Open in new window), “Thêm rel=nofollow” (cho SEO).

5. Căn chỉnh (Alignment):

• Cho phép bạn căn chỉnh biểu tượng sang Trái (Left), Giữa (Center) hoặc Phải (Right) trong cột chứa nó.

Bước 2. Chỉnh sửa kiểu hiển thị

Đây là nơi bạn tùy chỉnh màu sắc, kích thước và các hiệu ứng trực quan của biểu tượng.

1. Primary Color (Màu chính):

• Đây là màu sắc chính của biểu tượng. Nhấp vào ô màu để chọn màu bạn muốn.

2. Secondary Color (Màu phụ): (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”, đây là màu của hình nền hoặc màu của khung viền mà biểu tượng được đặt trong đó.

3. Size (Kích thước):

• Kéo thanh trượt để điều chỉnh kích thước của biểu tượng.

4. Padding (Khoảng đệm): (Chỉ xuất hiện khi bạn 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 hoặc khung viền.

5. Rotate (Xoay):

• Kéo thanh trượt để xoay biểu tượng theo một góc nhất định.

6. Border Width (Độ rộng viền): (Chỉ xuất hiện khi bạn chọn “Khung” ở tùy chọn “Xem”)

• Độ dày của đường viền khi bạn chọn kiểu “Khung”.

7. Border Radius (Bán kính bo tròn): (Chỉ xuất hiện khi bạn chọn “Khối” hoặc “Khung”)

• Bo tròn các góc của khối nền hoặc khung viền.

8. Hover (Khi di chuột qua):

• Giống như tiện ích Nút bấm, bạn có thể thiết lập các thay đổi về màu sắc, hiệu ứng cho biểu tượng khi người dùng di chuột qua nó.
• Các tùy chọn tương tự như ở trạng thái bình thường (Primary Color, Secondary Color, Rotate, Transition Duration).