Cách sử dụng tiện ích đường dẫn văn bản

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 đường dẫn văn bản là gì ?

Tiện ích Đường dẫn văn bản (Text Path) trong Elementor là một công cụ sáng tạo cho phép bạn làm cho văn bản uốn lượn theo một đường dẫn hoặc hình dạng cụ thể. Điều này có thể tạo ra các hiệu ứng văn bản độc đáo và hấp dẫn mà không thể đạt được với văn bản thông thường.

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

I. Nội dung (Content)

Đây là nơi bạn nhập văn bản, chọn loại đường dẫn và thiết lập liên kết.

1. Văn bản (Text):

• Nhập nội dung văn bản mà bạn muốn hiển thị trên đường dẫn.

2. Loại đường dẫn (Path Type):

• Tùy chọn này cho phép bạn chọn hình dạng của đường dẫn mà văn bản sẽ uốn lượn theo. Các tùy chọn phổ biến bao gồm:
  • Hình sóng (Wave): Văn bản uốn lượn như sóng biển.
  • Vòng tròn (Circle): Văn bản theo hình tròn.
  • Đường thẳng (Line): Văn bản theo một đường thẳng (có thể điều chỉnh góc nghiêng).
  • Đường cong (Curve): Văn bản theo một đường cong.
  • Tùy chỉnh (Custom): Cho phép bạn vẽ đường dẫn riêng (có thể yêu cầu Elementor Pro và tính năng SVG).
• Tùy thuộc vào loại đường dẫn, các tùy chọn bổ sung như Chiều rộng (Width) hoặc các điều chỉnh hình dạng khác có thể xuất hiện để bạn tinh chỉnh độ cong/hình dáng của đường dẫn.

3. Liên kết (Link):

• Bạn có thể thêm một đường dẫn URL vào văn bản, biến nó thành một liên kết có thể nhấp được.
• Tùy chọn liên kết: Nhấp vào biểu tượng bánh răng cưa để thiết lập liên kết mở trong cửa sổ mới (_blank) hoặc thêm thuộc tính nofollow.

4. Căn chỉnh (Alignment):

• Căn chỉnh văn bản theo đường dẫn sang Trái (Left), Giữa (Center) hoặc Phải (Right).

5. Hướng văn bản (Text Direction):

• Cho phép bạn điều chỉnh hướng của văn bản trên đường dẫn (ví dụ: xuôi chiều hoặc ngược chiều).

6. Hiển thị đường dẫn (Show Path):

• Gạt nút sang phải nếu bạn muốn hiển thị đường dẫn thực tế mà văn bản đang uốn lượn theo trên trang web. Nếu tắt, chỉ có văn bản được hiển thị theo hình dạng đó, còn đường dẫn thì vô hình.

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

Đây là nơi bạn tùy chỉnh giao diện của văn bản và đường dẫn.

A. Văn bản (Text)

• Color (Màu sắc): Chọn màu chữ cho văn bản.
• Typography (Phông chữ): Nhấp vào biểu tượng bút chì để tùy chỉnh phông chữ, kích thước, độ đậm, kiểu chữ, v.v. cho văn bản.
• Rotation (Xoay): Tùy chọn này cho phép bạn xoay toàn bộ văn bản trên đường dẫn (có thể hữu ích cho các hiệu ứng đặc biệt).
• Offset (Độ lệch): Điều chỉnh vị trí của văn bản dọc theo đường dẫn (dịch chuyển lên/xuống hoặc trái/phải trên đường dẫn).

B. Đường dẫn (Path)

• Color (Màu sắc): Chọn màu cho đường dẫn (chỉ hiển thị nếu bạn đã bật “Hiển thị đường dẫn” ở tab Nội dung).
• Stroke Width (Độ dày nét): Điều chỉnh độ dày của đường dẫn.

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 Đường dẫn văn bản.

1. Bố cục (Layout):

• Margin (Lề): Khoảng cách bên ngoài tiện ích Đường dẫn văn bản 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): Bạn có thể đặt chiều rộng của toàn bộ tiện ích Đường dẫn văn bản.
• 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 văn bản 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 Đường dẫn văn bản.

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 Đường dẫn văn bản 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 Đường dẫn văn bản một cách nâng cao.