Cách sử dụng tiện ích Blockquote

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

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

I. Nội dung (Content)

Tiện ích Blockquote trong Elementor là một công cụ giúp bạn hiển thị các trích dẫn hoặc đoạn văn bản nổi bật một cách chuyên nghiệp. Điều này rất hữu ích để làm nổi bật các câu nói quan trọng, lời chứng thực hoặc các phần văn bản đặc biệt.

Đây là nơi bạn nhập nội dung trích dẫn và cấu hình các tùy chọn cơ bản.

• Màu sắc (Color): Trong hình, có vẻ đây là một tùy chọn cài đặt màu sắc nhanh cho tiện ích, với giá trị đang là “Villen”. Đây có thể là một preset màu hoặc một tùy chọn định nghĩa trước.
• Nội dung (Content):
  • Nội dung: Nhập văn bản trích dẫn của bạn vào đây.
  • Tác giả (Author): Nhập tên của tác giả trích dẫn. Trong hình trên là “John Doe”.
• Tweet Button (Nút Tweet):
  • Hiển thị/Ẩn (Toggle): Trong hình, nút này đang BẬT (Hiển thị). Khi bật, một nút “Tweet” sẽ xuất hiện bên cạnh trích dẫn, cho phép người dùng chia sẻ trích dẫn này lên Twitter.
  • Xem (View): Chọn cách hiển thị nút Tweet (ví dụ: “Icon & Text” – Biểu tượng & Văn bản).
  • Màu sắc (Color): Chọn màu sắc cho nút Tweet (ví dụ: “Cổ điển” – Classic).
  • Label (Nhãn): Văn bản hiển thị trên nút Tweet (ví dụ: “Tweet”).
  • Username (Tên người dùng): Nhập tên người dùng Twitter bạn muốn được gắn thẻ (@) khi người dùng tweet. (ví dụ: “@username”).
  • Target URL (URL đích): Chọn URL mà nút Tweet sẽ liên kết đến. Trong hình là “Trang hiện tại” (Current Page), nghĩa là nó sẽ tweet kèm liên kết đến trang hiện tại.

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

Đây là nơi bạn tùy chỉnh giao diện của Blockquote. Tiện ích này không có tùy chọn hiển thị tuy nhiên các tùy chọn điển hình sẽ bao gồm:

• Content (Nội dung):
  • Text Color (Màu chữ): Màu của văn bản trích dẫn.
  • Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, kiểu chữ cho văn bản trích dẫn.
• Author (Tác giả):
  • Text Color (Màu chữ): Màu của tên tác giả.
  • Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, kiểu chữ cho tên tác giả.
• Quote Icon/Border (Biểu tượng/Đường viền trích dẫn):
  • Color (Màu sắc): Màu của biểu tượng trích dẫn (ví dụ: dấu ngoặc kép) hoặc đường viền đặc trưng của blockquote.
  • Size (Kích thước): Kích thước của biểu tượng.
  • Spacing (Khoảng cách): Khoảng cách giữa biểu tượng/đường viền và nội dung trích dẫn.
• Tweet Button (Nút Tweet):
  • Background Color (Màu nền): Màu nền của nút Tweet.
  • Text Color (Màu chữ): Màu chữ trên nút Tweet.
  • Border Radius (Bán kính bo tròn): Bo tròn các góc của nút.
  • Padding (Khoảng đệm): Khoảng đệm bên trong nú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 Blockquote.

1. Bố cục (Layout)

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

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