Cách sử dụng tiện ích hộp lật – Flip Box

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 Flip box là gì ?

Tiện ích Hộp lật (Flip Box) trong Elementor (thường là một tính năng của Elementor Pro) là một cách rất sáng tạo và tương tác để hiển thị nội dung. Nó cho phép bạn tạo một hộp có hai mặt – mặt trước và mặt sau – và khi người dùng di chuột qua (hoặc chạm vào trên thiết bị di động), hộp sẽ lật để hiển thị nội dung của mặt sau. Điều này rất hữu ích cho các thẻ dịch vụ, giới thiệu đội ngũ, hoặc các phần tử “call to action” độc đáo.

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

I. Nội dung (Content)

Đây là nơi bạn thiết lập nội dung cho cả mặt trước và mặt sau của hộp lật, cũng như các cài đặt hoạt ảnh.

A. Front (Mặt trước)

• Nền (Background): Chọn loại nền cho mặt trước (Màu sắc, Gradient, Hình ảnh).
  • Màu nền (Color): Đặt màu nền cho mặt trước.
• Phần tử đồ họa (Graphic Element): Chọn loại nội dung đồ họa hiển thị trên mặt trước.
  • Icon (Biểu tượng): Chọn một biểu tượng từ thư viện.
  • Image (Hình ảnh): Chọn một hình ảnh từ thư viện media.
• Tiêu đề (Title): Nhập tiêu đề cho mặt trước (ví dụ: “HVN Group”).
• Mô tả (Description): Nhập mô tả ngắn gọn cho mặt trước.

B. Back (Mặt sau)

• Nền (Background): Chọn loại nền cho mặt sau (Màu sắc, Gradient, Hình ảnh).
  • Màu nền (Color): Đặt màu nền cho mặt sau.
• Tiêu đề (Title): Nhập tiêu đề cho mặt sau.
• Mô tả (Description): Nhập mô tả chi tiết hơn cho mặt sau.
• Văn bản nút (Button Text): Nhập văn bản cho nút ở mặt sau (ví dụ: “Click Here”).
• Liên kết (Link): Nhập URL mà nút sẽ dẫn đến khi nhấp.
• Áp dụng hiệu ứng Lightbox (Apply Lightbox Effect): Bật/tắt hiệu ứng Lightbox cho liên kết.

C. Settings (Cài đặt)

• Chiều cao (Height): Đặt chiều cao cho hộp lật (Mặc định, Tùy chỉnh).
• Kiểu lật (Flip Effect): Chọn hiệu ứng hoạt ảnh khi hộp lật (ví dụ: Flip, Slide, Zoom In, Zoom Out, Fade, 3D Rotate, Cube, v.v.).
• Hướng lật (Flip Direction): Chọn hướng lật của hộp (Lên, Xuống, Trái, Phải).
• Độ sâu 3D (3D Depth): Điều chỉnh độ sâu của hiệu ứng 3D (nếu áp dụng).
• Hover/Click (Di chuột/Nhấp): Chọn hành vi kích hoạt lật hộp (di chuột qua hoặc nhấp).
• Tiêu đề HTML (HTML Tag): Chọn thẻ HTML cho tiêu đề của cả hai mặt (ví dụ: H1, H2, H3, H4, H5, H6, div, span).

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

Đây là nơi bạn tùy chỉnh giao diện của cả mặt trước và mặt sau của hộp lật.

A. Front (Mặt trước)

• Spacing (Khoảng cách): Điều chỉnh khoảng cách cho các thành phần bên trong mặt trước.
• Icon (Biểu tượng) / Image (Hình ảnh):
  • Color (Màu sắc): Màu của biểu tượng.
  • Size (Kích thước): Kích thước của biểu tượng/hình ảnh.
  • Border Radius (Bán kính bo tròn): Bo tròn góc của hình ảnh.
  • Rotate (Xoay): Xoay biểu tượng/hình ảnh.
  • Spacing (Khoảng cách): Khoảng cách giữa biểu tượng/hình ảnh và tiêu đề.
• Tiêu đề (Title):
  • Color (Màu sắc): Màu chữ cho tiêu đề.
  • Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho tiêu đề.
  • Spacing (Khoảng cách): Khoảng cách giữa tiêu đề và mô tả.
• Mô tả (Description):
  • Color (Màu sắc): Màu chữ cho mô tả.
  • Typography (Phông chữ): Tùy chỉnh phông chữ cho mô tả.
• Border (Đường viền): Thêm đường viền cho mặt trước.

B. Back (Mặt sau)

• Spacing (Khoảng cách): Điều chỉnh khoảng cách cho các thành phần bên trong mặt sau.
• Tiêu đề (Title):
  • Color (Màu sắc): Màu chữ cho tiêu đề.
  • Typography (Phông chữ): Tùy chỉnh phông chữ cho tiêu đề.
  • Spacing (Khoảng cách): Khoảng cách giữa tiêu đề và mô tả.

• Mô tả (Description):
  • Color (Màu sắc): Màu chữ cho mô tả.
  • Typography (Phông chữ): Tùy chỉnh phông chữ cho mô tả.
• Button (Nút): Tùy chỉnh màu sắc, nền, phông chữ, đường viền, bo tròn góc cho nút.
• Border (Đường viền): Thêm đường viền cho mặt sau.

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 Hộp lật.

1. Bố cục (Layout):

• Margin (Lề): Khoảng cách bên ngoài tiện ích Hộp lật 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): Đặt chiều rộng của toàn bộ tiện ích Hộp lật.
• 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 Hộp lật 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.
• 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 lật.

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 Hộp lật 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.