Cách sử dụng tiện ích 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 văn bản là gì ?

Tiện ích Văn bản (Text Editor) trong Elementor là một công cụ kéo-thả giúp bạn thêm nội dung văn bản vào website một cách dễ dàng, tương tự như soạn thảo văn bản trên Word hoặc Google Docs.

Tiện ích văn bản giúp bạn:

• Viết và chỉnh sửa nội dung: đoạn giới thiệu, mô tả sản phẩm, thông điệp marketing, thông tin liên hệ,… 
• Thêm định dạng: in đậm, nghiêng, gạch chân, gạch ngang, danh sách, căn lề… Chèn liên kết (link), hình ảnh, video hoặc nút call-to-action trực tiếp trong khối văn bản.
• Thiết kế kiểu chữ (font, màu, kích cỡ, khoảng cách dòng) và trang trí (nền, viền, bóng chữ…).

Tại sao nên dùng tiện ích Văn bản?

• Dễ dàng kiểm soát nội dung chi tiết.
  
• Dễ chỉnh sửa, không cần biết code.
  
• Có thể kết hợp nhiều kiểu chữ và hình ảnh trực tiếp.
  
• Thân thiện với SEO nếu viết nội dung chuẩn.

3.Các bước sử dụng Tiện ích Văn bản trong Elementor

Bước 1: Thêm tiện ích Văn bản

Trong giao diện Elementor, tìm Text Editor (Tiện ích Văn bản).

Kéo và thả vào khu vực mà bạn muốn đặt đoạn văn bản.

Bước 2: Chỉnh sửa nội dung (Tab Nội dung)

Ở phần Văn bản, bạn sẽ thấy một ô soạn thảo giống như Word.

Nhập hoặc dán đoạn văn bản mà bạn muốn hiển thị.

Tiếp theo bạn có thể:

Thêm tiêu đề nhỏ, đoạn mô tả, hoặc nội dung dài.

Bạn có thể tuỳ thích in đậm (B), nghiêng (I), gạch chân (U).

Hay là căn trái, giữa, phải cho văn bản của mình

Tùy chọn liên kết

Thêm liên kết cho văn bản bằng cách chèn đường link tại phần trực quan hoặc tuỳ chọn Thêm Media.

Chèn đường link hình ảnh bằng cách dùng tuỳ chọn thanh bên trái

Bước 3: Tùy chọn bổ sung

Chữ viết hoa: Bật/Tắt để toàn bộ chữ thành in hoa.

Cột: Chia văn bản thành nhiều cột (thường dùng cho các layout phức tạp).

Khoảng cách cột: Điều chỉnh khoảng cách giữa các cột.

Bước 4: Thiết kế (Tab Kiểu hiển thị)

Kiểu chữ: Chỉnh font, kích cỡ, độ đậm, kiểu chữ (regular, italic…), khoảng cách chữ.

Màu chữ: Chọn màu bạn muốn.

Bóng văn bản: Thêm hiệu ứng đổ bóng.

Căn lề và khoảng cách: Tinh chỉnh khoảng cách giữa các đoạn, hoặc lề của khối văn bản.

Bước 5: Nâng cao (Tab Nâng cao)

Tại bước này bạn sẽ sẽ dụng những tiện ích nâng cao của văn bản để giúp văn bản của bạn được tương tác sống động hơn

Bố cục: Chỉnh margin và padding (lề ngoài, lề trong).

Nền và Viền: Thêm nền màu, hình nền hoặc viền khối văn bản.

Biến đổi: Xoay, di chuyển hoặc phóng to thu nhỏ mục văn bản của bạn.

Còn lại là các hiệu ứng khi sử dụng website của bạn:

Hiệu ứng động: Chọn hiệu ứng khi cuộn chuột đến (fade, zoom, slide…).

Mặt nạ, Tương thích, Thuộc tính, CSS tùy chỉnh: Chỉnh sâu hơn nếu bạn muốn code hoặc tối ưu đa thiết bị.