Cách sử dụng tiện ích nút chia sẻ – Share Buttons

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 Share Buttons là gì ?

Tiện ích Nút chia sẻ (Share Buttons) trong Elementor là một công cụ mạnh mẽ để khuyến khích khách truy cập chia sẻ nội dung trang web của bạn lên các mạng xã hội. Điều này giúp tăng khả năng tiếp cận và lượng truy cập cho trang web của bạn.

3. Các bước sử dụng tiện ích Share Buttons 

I. Nội dung (Content)

Đây là nơi bạn quản lý các nút chia sẻ riêng lẻ và cấu hình các tùy chọn cơ bản.

A. Share Buttons (Nút chia sẻ)

• Các mạng xã hội: Đây là danh sách các mạng xã hội mà bạn muốn hiển thị nút chia sẻ.
  • Bạn sẽ thấy các mục đã được thêm vào như “Facebook”, “Twitter”, “LinkedIn”.
  • Nhấp vào nút “+ Thêm mục” để thêm một mạng xã hội mới.
  • Đối với mỗi mục mạng xã hội, bạn có thể:
    • Chọn mạng xã hội: Chọn tên mạng xã hội từ danh sách thả xuống (ví dụ: Facebook, Twitter, LinkedIn, Pinterest, Email, WhatsApp, v.v.).
    • Văn bản (Text): Nhập văn bản tùy chỉnh sẽ xuất hiện trên nút (ví dụ: “Share on Facebook”).

B. Cài đặt (Settings)

• Xem (View): Chọn cách hiển thị các nút chia sẻ.
  • Icon (Biểu tượng): Chỉ hiển thị biểu tượng của mạng xã hội.
  • Text (Văn bản): Chỉ hiển thị văn bản (label) của nút.
  • Icon & Text (Biểu tượng & Văn bản): Hiển thị cả biểu tượng và văn bản (như trong hình bạn cung cấp).
• Label (Nhãn): Nút này có lẽ để bật/tắt hiển thị nhãn văn bản trên các nút. Trong hình, nó đang BẬT (Hiển thị).
• Màu sắc (Color): Chọn bảng màu cho các nút.
  • Official Color (Màu chính thức): Sử dụng màu sắc mặc định của từng mạng xã hội (ví dụ: xanh của Facebook, xanh của Twitter).
  • Custom (Tùy chỉnh): Cho phép bạn tự chọn màu nền và màu biểu tượng/văn bản.
  • Trong hình là “Gradient”, có nghĩa là các nút sẽ có hiệu ứng màu chuyển sắc.
• Hình dạng (Shape): Chọn hình dạng của các nút.
  • Square (Hình vuông): Nút hình vuông.
  • Rounded (Bo tròn góc): Nút có các góc bo tròn (như trong hình).
  • Circle (Hình tròn): Nút hình tròn.
• Cột (Columns): Điều chỉnh số lượng cột mà các nút sẽ được sắp xếp.
  • Auto (Tự động): Elementor sẽ tự động điều chỉnh số cột.
  • Bạn có thể chọn số cột cụ thể (ví dụ: 1, 2, 3, 4, 5, 6) để kiểm soát bố cục.
• Căn chỉnh (Alignment): Căn chỉnh các nút theo chiều ngang (trái, giữa, phải).
• Target URL (URL đích): Xác định URL sẽ được chia sẻ.
  • Current Page (Trang hiện tại): Chia sẻ liên kết của trang mà tiện ích đang được đặt. (Đây là tùy chọn phổ biến nhất).
  • Custom URL (URL tùy chỉnh): Cho phép bạn nhập một URL cụ thể để chia sẻ.

II. Kiểu hiển thị (Style)

Đây là nơi bạn tùy chỉnh giao diện của các nút chia sẻ.

A. Buttons (Các nút)

• Space Between (Khoảng cách giữa): Điều chỉnh khoảng cách giữa các nút chia sẻ.
• Row Gap (Khoảng cách hàng): Khoảng cách giữa các hàng nút (nếu có nhiều hàng).
• Size (Kích thước): Điều chỉnh kích thước tổng thể của các nút.
• Icon Size (Kích thước biểu tượng): Điều chỉnh kích thước của biểu tượng bên trong nút.
• Border Radius (Bán kính bo tròn): Điều chỉnh độ bo tròn của các góc nút.
• Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, kiểu chữ cho văn bản trên nút.
• Normal (Bình thường): Các tùy chọn kiểu khi nút ở trạng thái bình thường.
  • Background Color (Màu nền): Màu nền của nút.
  • Color (Màu chữ/biểu tượng): Màu của văn bản hoặc biểu tượng.
  • Border Type (Loại đường viền): Thêm đường viền cho nút.
  • Box Shadow (Bóng đổ): Thêm hiệu ứng bóng đổ cho nút.
• Hover (Di chuột): Các tùy chọn kiểu khi di chuột qua nút.
  • Background Color (Màu nền): Màu nền khi di chuột.
  • Color (Màu chữ/biểu tượng): Màu của văn bản hoặc biểu tượng khi di chuột.
  • Animation (Hoạt ảnh): Hiệu ứng hoạt ảnh khi di chuột.

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 Nút chia sẻ.

1. Bố cục (Layout)

• Margin (Lề): Khoảng cách bên ngoài tiện ích với các phần tử khác xung quanh.
• Padding (Khoảng đệm): Khoảng đệm bên trong tiện ích.
• Width (Chiều rộng): Đặ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 toàn bộ tiện ích khi trang được tải.
• 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.

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 tiện ích 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 tiện ích một cách nâng cao.