Cách sử dụng tiện ích Call to Action

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 Call to Action là gì ?

Tiện ích Kêu gọi hành động (Call to Action – CTA) trong Elementor là một công cụ rất hiệu quả để thu hút sự chú ý của người dùng và khuyến khích họ thực hiện một hành động cụ thể, chẳng hạn như truy cập một trang, đăng ký dịch vụ, hoặc mua sản phẩm. Nó thường kết hợp hình ảnh, tiêu đề, mô tả và nút bấm để tạo ra một lời kêu gọi hấp dẫn.

3. Các bước sử dụng tiện ích Call to Action

I. Nội dung (Content)

Đây là nơi bạn thiết lập nội dung cho CTA của mình.

A. Image (Hình ảnh)

• Hình ảnh (Image): Tải lên hoặc chọn một hình ảnh để sử dụng làm nền hoặc hình ảnh chính cho CTA của bạn.
• Kích thước hình ảnh (Image Size): Chọn kích thước hiển thị của hình ảnh (ví dụ: Large – 1000 x 1000).
• Vị trí hình ảnh (Image Position): Chọn vị trí của hình ảnh so với nội dung văn bản (ví dụ: Left, Right, Above).
• Hover Effect (Hiệu ứng di chuột qua): Áp dụng hiệu ứng động khi di chuột qua hình ảnh (ví dụ: Zoom In, Fade).

B. Content (Nội dung)

• Tiêu đề (Title): Nhập tiêu đề chính cho CTA (ví dụ: “Nguyên nhân & Giải pháp hiệu quả?”).
• Mô tả (Description): Nhập mô tả ngắn gọn hoặc thông điệp thuyết phục cho CTA.
• Văn bản nút (Button Text): Nhập văn bản cho nút kêu gọi hành động (ví dụ: “Xem ngay →”).
• Liên kết (Link): Nhập URL mà nút sẽ dẫn đến khi nhấp vào.
• Thẻ HTML (HTML Tag): Chọn thẻ HTML cho tiêu đề (ví dụ: H1, H2, H3, H4, H5, H6, div, span).

C. Ribbon (Ruy băng)

• Show Ribbon (Hiển thị ruy băng): Gạt nút sang phải để hiển thị một ruy băng nổi bật trên CTA.
• Text (Văn bản): Nhập văn bản hiển thị trên ruy băng.
• Position (Vị trí): Chọn vị trí của ruy băng (Trái, Phải).

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

Đây là nơi bạn tùy chỉnh giao diện của tiện ích Kêu gọi hành động.

A. Box (Hộp)

• Height (Chiều cao): Đặt chiều cao cho toàn bộ CTA.
• Vertical Align (Căn chỉnh dọc): Căn chỉnh nội dung theo chiều dọc trong hộp CTA.
• Border Type (Loại đường viền): Thêm đường viền cho toàn bộ hộp CTA.
• Border Radius (Bán kính bo tròn): Bo tròn góc của hộp CTA.
• Box Shadow (Bóng đổ): Thêm bóng đổ cho hộp CTA.

B. Image (Hình ảnh)

• Spacing (Khoảng cách): Khoảng cách giữa hình ảnh và nội dung văn bản.
• Opacity (Độ mờ): Điều chỉnh độ mờ của hình ảnh.
• CSS Filters (Bộ lọc CSS): Áp dụng các hiệu ứng như Blur, Brightness, Contrast, Saturation, Hue cho hình ảnh.

C. Content (Nội dung)

• Background Color (Màu nền): Màu nền của phần nội dung (tiêu đề, mô tả, nút).
• Padding (Khoảng đệm): Khoảng đệm bên trong phần nội dung.
• 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 đề.
• 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.

D. Ribbon (Ruy băng)

• Background Color (Màu nền): Màu nền của ruy băng.
• Text Color (Màu văn bản): Màu chữ của ruy băng.
• Typography (Phông chữ): Tùy chỉnh phông chữ cho ruy băng.
• Distance (Khoảng cách): Khoảng cách từ cạnh của hộp CTA.

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 Kêu gọi hành động.

1. Bố cục (Layout):

• Margin (Lề): Khoảng cách bên ngoài tiện ích CTA 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 CTA.
• 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 CTA 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 CTA.

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 CTA 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.