Cách sử dụng tiện ích Icon mạng xã hội

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 Icon mạng xã hội là gì ?

Tiện ích Icon mạng xã hội (Social Icons) trong Elementor là một công cụ đơn giản nhưng rất cần thiết để hiển thị các liên kết đến hồ sơ mạng xã hội của bạn. Điều này giúp khách truy cập dễ dàng tìm thấy và theo dõi bạn trên các nền tảng khác nhau, tăng cường sự hiện diện trực tuyến của bạn.

3. Các bước sử dụng tiện ích Icon mạng xã hội

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

Đây là nơi bạn thêm, chỉnh sửa, xóa và sắp xếp các biểu tượng mạng xã hội.

1. Icon mạng xã hội (Social Icons):

• Phần này hiển thị các biểu tượng mạng xã hội hiện có của bạn: “Facebook”, “Twitter”, “Youtube”.

• Để chỉnh sửa một mục: Nhấp vào mục biểu tượng đó (ví dụ: “Facebook”). Các tùy chọn chi tiết cho mục đó sẽ mở ra:

Thư viện Icon (Icon Library): Nhấp vào biểu tượng hiện tại (ví dụ: Facebook) để mở Thư viện biểu tượng. Tìm kiếm và chọn một biểu tượng khác nếu bạn muốn thay đổi.

Liên kết (Link): Dán đường link (URL) đến hồ sơ mạng xã hội tương ứng của bạn vào ô này (ví dụ: https://facebook.com/yourpage).

Màu sắc tùy chỉnh (Custom Color): Bạn có thể bật tùy chọn này để đặt màu sắc riêng cho từng biểu tượng thay vì sử dụng màu chung.

Để thêm một mục mới: Nhấp vào nút “+ Thêm mục”. Một biểu tượng 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ự hiển thị.

Hình dạng (Shape):

• Cho phép bạn chọn hình dạng của các biểu tượng:
  • Mặc định (Default): Biểu tượng hiển thị đơn giản.
  • Tròn (Circle): Biểu tượng được đặt trong một hình tròn.
  • Vuông (Square): Biểu tượng được đặt trong một hình vuông.
  • Bo tròn góc (Rounded Square): Biểu tượng được đặt trong một hình vuông với các góc bo tròn.
• Trong hình bạn cung cấp, tùy chọn đang là “Bo tròn góc”.

3. Cột (Columns):

Tùy chọn này cho phép bạn quyết định số lượng cột mà các biểu tượng sẽ hiển thị. Thường dùng khi bạn có nhiều biểu tượng và muốn chúng trải đều trên nhiều hàng.

Bạn có thể điều chỉnh riêng cho các chế độ xem máy tính để bàn, máy tính bảng và điện thoại.

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

• Cho phép bạn căn chỉnh toàn bộ bộ biểu tượng sang Trái (Left), Giữa (Center) hoặc Phải (Right) trong cột chứa nó.
• Trong hình bạn cung cấp, căn chỉnh đang là “Trái”.

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

Đây là nơi bạn tùy chỉnh giao diện của các biểu tượng mạng xã hội.

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

• Color (Màu sắc):

• • Mặc định (Official Color): Sử dụng màu sắc chính thức của từng nền tảng mạng xã hội (ví dụ: Facebook màu xanh, Twitter màu xanh nhạt, YouTube màu đỏ).
  • Tùy chỉnh (Custom): Cho phép bạn đặt màu sắc riêng cho tất cả các biểu tượng.
    • Primary Color (Màu chính): Màu nền của biểu tượng (hoặc màu chính của biểu tượng nếu không có nền).
    • Secondary Color (Màu phụ): Màu của biểu tượng (hoặc màu nền nếu có).

• Size (Kích thước): Điều chỉnh kích thước của các biểu tượng.
• Padding (Khoảng đệm): Điều chỉnh khoảng cách bên trong giữa biểu tượng và viền của hình dạng (nếu bạn chọn hình tròn/vuông).
• Spacing (Khoảng cách): Điều chỉnh khoảng cách giữa các biểu tượng riêng lẻ.
• Border Radius (Bán kính bo tròn): Bo tròn các góc của các biểu tượng (chỉ áp dụng nếu bạn không chọn hình dạng bo tròn góc).

Hover (Khi di chuột qua): Tùy chỉnh hiệu ứng khi người dùng di chuột qua biểu tượng:

• Primary Color (Màu chính): Màu chính khi di chuột qua.
• Secondary Color (Màu phụ): Màu phụ khi di chuột qua.
• Animation (Hoạt ảnh): Chọn hiệu ứng chuyển động khi di chuột qua (ví dụ: Push, Pop, Grow).

Bước 3. Chỉnh sửa 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 Icon mạng xã hội.

1. Bố cục (Layout):

• Margin (Lề): Khoảng cách bên ngoài tiện ích Icon mạng xã hội 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): Bạn có thể đặt chiều rộng của toàn bộ tiện ích.
• 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 các 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ộ tiện ích khi di chuột qua (khác với hiệu ứng từng icon).
• 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 Icon mạng xã hội.

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