Cách sử dụng tiện ích bài viết

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 bài viết là gì ?

Tiện ích Bài viết (Posts) trong Elementor là một công cụ mạnh mẽ để hiển thị các bài đăng trên blog của bạn (hoặc các loại bài đăng tùy chỉnh khác) một cách linh hoạt và tùy chỉnh cao. Nó cho phép bạn tạo ra các bố cục lưới, danh sách hoặc carousel cho các bài viết, điều khiển số lượng, danh mục, và nhiều tùy chọn hiển thị khác.

3. Các bước sử dụng tiện ích bài viết

I. Nội dung (Content)

Đây là nơi bạn thiết lập bố cục, truy vấn bài viết và các tùy chọn hiển thị khác.

A. Bố cục (Layout)

• Skin (Giao diện): Chọn cách hiển thị tổng thể của các bài viết. Các tùy chọn phổ biến thường là:
  • Cổ điển (Classic): Hiển thị các bài viết theo dạng danh sách hoặc lưới truyền thống với hình ảnh, tiêu đề, nội dung và nút đọc thêm.
  • Thẻ (Cards): Hiển thị các bài viết dưới dạng thẻ, thường có bóng đổ và hiệu ứng di chuột, trông hiện đại hơn.
  • Full Content (Nội dung đầy đủ): Hiển thị toàn bộ nội dung của bài viết (thường không khuyến khích cho các lưới bài viết).
• Columns (Cột): Chọn số lượng cột mà bạn muốn hiển thị các bài viết trên mỗi hàng. Bạn có thể thiết lập số cột khác nhau cho máy tính để bàn, máy tính bảng và thiết bị di động.
• Posts Per Page (Số bài viết mỗi trang): Đặt số lượng bài viết bạn muốn hiển thị trên mỗi trang trước khi có phân trang (nếu bạn bật phân trang).
• Image Position (Vị trí hình ảnh): Chọn vị trí của hình ảnh nổi bật (featured image) trong mỗi bài viết (ví dụ: Trên cùng, Trái, Phải, Không có).
• Masonry (Xếp gạch): Gạt nút sang phải để bật bố cục Masonry, nơi các bài viết sẽ được sắp xếp linh hoạt để lấp đầy không gian một cách hiệu quả, giống như xây gạch.
• Image Size (Kích thước hình ảnh): Chọn kích thước hình ảnh nổi bật được sử dụng (ví dụ: Thumbnail, Medium, Large, Full). Điều này ảnh hưởng đến chất lượng và tốc độ tải trang.
• Excerpt Length (Độ dài đoạn trích): Đặt số lượng từ sẽ hiển thị trong đoạn trích của mỗi bài viết.
• Title (Tiêu đề): Gạt nút sang phải để hiển thị tiêu đề bài viết.
• Title HTML Tag (Thẻ HTML tiêu đề): Chọn thẻ HTML cho tiêu đề bài viết (ví dụ: H1, H2, H3, v.v.). Quan trọng cho SEO.
• Meta Data (Dữ liệu meta): Gạt nút sang phải để hiển thị dữ liệu meta như tác giả, ngày đăng, bình luận.
• Read More (Đọc thêm): Gạt nút sang phải để hiển thị nút “Đọc thêm” hoặc liên kết để truy cập toàn bộ bài viết.
• Apply to Custom Excerpt (Áp dụng cho đoạn trích tùy chỉnh): Gạt nút sang phải nếu bạn muốn tiện ích này sử dụng đoạn trích tùy chỉnh mà bạn đã đặt cho bài viết trong WordPress (nếu có).

B. Query (Truy vấn)

• Source (Nguồn): Chọn nguồn bài viết (ví dụ: Posts, Pages, Custom Post Types).
• Include (Bao gồm): Chọn các danh mục, thẻ hoặc bài viết cụ thể để bao gồm.
• Exclude (Loại trừ): Loại trừ các danh mục, thẻ hoặc bài viết cụ thể.
• Order By (Sắp xếp theo): Chọn tiêu chí sắp xếp bài viết (ví dụ: Ngày, Tiêu đề, ID).
• Order (Thứ tự): Sắp xếp theo thứ tự Tăng dần (ASC) hoặc Giảm dần (DESC).
• Offset (Độ lệch): Bỏ qua một số lượng bài viết nhất định từ đầu kết quả truy vấn.
• Do Not Duplicate (Không trùng lặp): Tránh hiển thị các bài viết đã được hiển thị ở nơi khác trên cùng trang (hữu ích cho các bố cục phức tạp).
• Fallback (Dự phòng): Tùy chọn hiển thị bài viết dự phòng nếu không tìm thấy bài viết nào phù hợp.

C. Phân trang (Pagination)

• Pagination (Phân trang): Chọn kiểu phân trang (ví dụ: Số trang, Tải thêm khi cuộn, Nút “Tải thêm”).
• Page Limit (Giới hạn trang): Giới hạn số trang phân trang hiển thị.
• Shorten (Rút ngắn): Rút ngắn các liên kết phân trang.
• Alignment (Căn chỉnh): Căn chỉnh các nút phân trang.
• Previous/Next (Trước/Sau): Đặt nhãn cho nút “Trang trước” và “Trang sau”.
• Load More Button (Nút “Tải thêm”): Đặt nhãn cho nút “Tải thêm” và tùy chọn tải thêm nội dung khi nhấp.
• Open in new window (Mở trong cửa sổ mới): Gạt nút sang phải để các liên kết bài viết mở trong một tab hoặc cửa sổ trình duyệt mới.

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

Đây là nơi bạn tùy chỉnh giao diện của lưới/danh sách bài viết.

A. Layout (Bố cục)

• Columns Gap (Khoảng cách cột): Điều chỉnh khoảng cách giữa các cột bài viết.
• Rows Gap (Khoảng cách hàng): Điều chỉnh khoảng cách giữa các hàng bài viết.
• Alignment (Căn chỉnh): Căn chỉnh nội dung trong mỗi bài viết.

B. Image (Hình ảnh)

• Border Radius (Bán kính bo tròn): Bo tròn các góc của hình ảnh nổi bật.
• Spacing (Khoảng cách): Điều chỉnh khoảng cách giữa hình ảnh và nội dung bài viết.
• CSS Filters (Bộ lọc CSS): Áp dụng các bộ lọc như Blur, Brightness, Saturation cho hình ảnh.
• Opacity (Độ trong suốt): Điều chỉnh độ trong suốt của hình ảnh.
• Transition Duration (Thời gian chuyển tiếp): Thời gian của hiệu ứng chuyển động khi di chuột qua.
• Hover Animation (Hoạt ảnh di chuột qua): Hiệu ứng hoạt ảnh cho hình ảnh khi di chuột qua.

C. Content (Nội dung)

• Title (Tiêu đề):
  • Color (Màu sắc): Màu chữ cho tiêu đề.
  • Hover Color (Màu khi di chuột qua): Màu chữ khi di chuột qua tiêu đề.
  • Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho tiêu đề.
• Meta Data (Dữ liệu meta):
  • Color (Màu sắc): Màu chữ cho dữ liệu meta.
  • Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho dữ liệu meta.
  • Divider (Dấu phân cách): Chọn dấu phân cách giữa các mục meta (ví dụ: gạch dọc, chấm tròn).
  • Spacing (Khoảng cách): Điều chỉnh khoảng cách giữa các mục meta.
• Excerpt (Đoạn trích):
  • Color (Màu sắc): Màu chữ cho đoạn trích.
  • Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho đoạn trích.
• Read More Button (Nút “Đọc thêm”):
  • Color (Màu sắc): Màu chữ cho nút.
  • Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho nút.
  • Background Color (Màu nền): Màu nền của nút.
  • Border Type (Loại đường viền): Thêm đường viền cho nút.
  • Border Radius (Bán kính bo tròn): Bo tròn góc nút.
  • Padding (Khoảng đệm): Khoảng đệm bên trong nút.
  • Spacing (Khoảng cách): Khoảng cách giữa nút và nội dung.

D. Pagination (Phân trang)

• Color (Màu sắc): Màu chữ cho các số trang/nút phân trang.
• Hover Color (Màu khi di chuột qua): Màu chữ khi di chuột qua.
• Active Color (Màu khi hoạt động): Màu chữ cho trang hiện tại.
• Typography (Phông chữ): Tùy chỉnh phông chữ.
• Space Between (Khoảng cách giữa): Khoảng cách giữa các số trang/nút.
• Padding (Khoảng đệm): Khoảng đệm bên trong các số trang/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 Bài viết.

1. Bố cục (Layout):

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

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 Bài viết 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 Bài viết một cách nâng cao.