Cách sử dụng tiện ích trang – Facebook Page

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. Cách sử dụng tiện ích Slides

Tiện ích Facebook Page trong Elementor là một công cụ giúp bạn nhúng (embed) một trang Facebook công khai trực tiếp vào trang web của mình. Điều này cho phép khách truy cập xem các bài đăng, sự kiện và tương tác với trang Facebook của bạn mà không cần rời khỏi trang web.

3. Các bước sử dụng tiện ích danh mục hồ sơ

I. Nội dung (Content)

Đây là nơi bạn cấu hình trang Facebook muốn nhúng và các tùy chọn hiển thị cơ bản.

A. Page (Trang)

• Link bài viết (URL): Dán URL của trang Facebook công khai mà bạn muốn nhúng vào đây. Ví dụ: https://www.facebook.com/Elementor/.
• Layout (Bố cục): Chọn bố cục hiển thị cho trang Facebook nhúng. Các tùy chọn phổ biến thường là:
  • Standard (Tiêu chuẩn): Hiển thị các bài viết và khung bình luận.
  • Tab (Thẻ): Hiển thị các tab như Timeline, Events, Messages.
• Show Header (Hiển thị tiêu đề): Bật/tắt hiển thị tiêu đề của trang Facebook.
• Small Header (Tiêu đề nhỏ): Sử dụng tiêu đề nhỏ gọn hơn nếu bật “Show Header”.
• Cover Photo (Ảnh bìa): Bật/tắt hiển thị ảnh bìa của trang Facebook.
• Profile Photos (Ảnh đại diện): Bật/tắt hiển thị ảnh đại diện của trang Facebook.
• Custom CTA Button (Nút kêu gọi hành động tùy chỉnh): Bật/tắt nút kêu gọi hành động tùy chỉnh.
• Chiều rộng (Width): Điều chỉnh chiều rộng của tiện ích (tính bằng px).
• Chiều cao (Height): Điều chỉnh chiều cao của tiện ích (tính bằng px). Trong hình, giá trị đang là 500px.

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

Vì hình ảnh bạn cung cấp chỉ hiển thị tab “Nội dung” cho tiện ích Facebook Page, tôi không thể cung cấp chi tiết về các tùy chọn kiểu hiển thị cụ thể. Tuy nhiên, tương tự như các tiện ích Elementor khác, tab “Kiểu hiển thị” sẽ cho phép bạn tùy chỉnh:

• Background (Nền): Màu nền hoặc hình nền cho khung tiện ích.
• Border (Đường viền): Thêm đường viền, điều chỉnh độ dày, màu sắc và bán kính bo tròn cho khung tiện ích.
• Box Shadow (Bóng đổ): Thêm hiệu ứng bóng đổ cho khung tiện ích.
• Padding (Khoảng đệm): Khoảng đệm bên trong khung tiện ích.
• Margin (Lề): Khoảng cách bên ngoài khung tiện ích.

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 Facebook Page. Tương tự như các tiện ích Elementor khác, bạn sẽ tìm thấy:

• 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.
  • 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.
• 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 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.
• Nền (Background): Thêm màu nền, hình nền hoặc gradient cho vùng chứa tiện ích.
• Đườ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 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.
• 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.
• 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 tiện ích một cách nâng cao.