Cách sử dụng tiện ích Tiêu đề động – Animated Headline

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 tiêu đề động là gì ?

Tiện ích Tiêu đề động (Animated Headline) trong Elementor (là một tính năng của Elementor Pro) là một cách hiệu quả để thu hút sự chú ý bằng cách thêm hiệu ứng hoạt ảnh vào một phần của tiêu đề của bạn. Nó cho phép bạn nhấn mạnh các từ hoặc cụm từ cụ thể với nhiều kiểu hoạt ảnh khác nhau.

3. Các bước sử dụng tiện ích tiêu đề động

I. Nội dung (Content)

Đây là nơi bạn thiết lập văn bản, kiểu hoạt ảnh và các tùy chọn liên quan đến chuyển động.

A. Headline (Tiêu đề)

• Kiểu (Style): Chọn kiểu hoạt ảnh cho phần được làm nổi bật của tiêu đề. Các tùy chọn phổ biến có thể là:
  • Highlighted (Làm nổi bật): Chỉ làm nổi bật một phần của văn bản với một hình dạng hoặc hiệu ứng nhất định.
  • Rotating (Xoay tròn/Thay đổi): Các từ hoặc cụm từ sẽ thay đổi tuần tự với các hiệu ứng chuyển động khác nhau.
• Hình dạng (Shape): Nếu bạn chọn kiểu “Highlighted”, bạn có thể chọn hình dạng cho phần nổi bật (ví dụ: Circle, Underline, Curly, Double, Strikethrough).
• Before Text (Văn bản trước): Nhập văn bản sẽ xuất hiện trước phần được làm nổi bật/hoạt ảnh.
• Highlighted Text (Văn bản nổi bật):
  • Nếu kiểu là “Highlighted”: Nhập từ hoặc cụm từ bạn muốn làm nổi bật.
  • Nếu kiểu là “Rotating”: Bạn sẽ có nhiều trường để nhập các từ/cụm từ khác nhau sẽ luân phiên hiển thị.
• After Text (Văn bản sau): Nhập văn bản sẽ xuất hiện sau phần được làm nổi bật/hoạt ảnh.
• Lặp lại vô hạn (Loop): Gạt nút sang phải để hoạt ảnh lặp lại vô hạn.
• Duration (Thời lượng) (ms): Đặt thời gian (tính bằng mili giây) cho mỗi lần chuyển đổi hoạt ảnh.
• Delay (Độ trễ) (ms): Đặt thời gian (tính bằng mili giây) trước khi hoạt ảnh bắt đầu lại sau khi hoàn thành một chu kỳ (nếu vòng lặp được bật).
• Liên kết (Link): Nhập URL mà toàn bộ tiêu đề động sẽ dẫn đến khi nhấp.
• Căn chỉnh (Alignment): Căn chỉnh toàn bộ tiêu đề (Trái, Giữa, Phải).
• Thẻ HTML (HTML Tag): Chọn thẻ HTML cho tiêu đề (ví dụ: H1, H2, H3, H4, H5, H6, div, span). Điều này quan trọng cho cấu trúc SEO của trang.

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

Đây là nơi bạn tùy chỉnh giao diện của tiêu đề động, bao gồm màu sắc, phông chữ và kiểu của hoạt ảnh.

A. Headline (Tiêu đề)

• Text Color (Màu văn bản): Màu chữ cho các phần “Before Text” và “After Text”.
• Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, kiểu chữ, v.v. cho toàn bộ tiêu đề.

B. Highlighted Text (Văn bản nổi bật)

• Text Color (Màu văn bản): Màu chữ cho phần “Highlighted Text”.
• Background Color (Màu nền): Màu nền cho phần được làm nổi bật (nếu áp dụng kiểu highlight với nền).
• Shape Color (Màu hình dạng): Màu sắc của hình dạng hoạt ảnh (nếu áp dụng kiểu “Highlighted” với hình dạng như Underline, Circle).
• Stroke Width (Độ rộng nét): Điều chỉnh độ rộng của nét vẽ cho các hình dạng như Underline, Curly.
• Padding (Khoảng đệm): Khoảng đệm xung quanh phần văn bản được làm nổi bậ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 Tiêu đề động.

1. Bố cục (Layout):

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

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