Hướng dẫn sử dụng Widget – Blog Posts

Chào anh/chị,

Trong bài hướng dẫn này, chúng tôi sẽ chỉ cho anh/chị cách để tự động trưng bày các bài viết, tin tức mới nhất của mình lên các trang quan trọng như Trang chủ.

Anh/chị hãy tưởng tượng thế này:

• Mục “Bài viết” (Posts) trong khu vực quản trị là nơi anh/chị viết và lưu trữ tất cả các bài tin tức, khuyến mãi, cẩm nang…
• Còn khối “Blog Posts” mà chúng ta sắp học đây giống như một cái “Bảng Tin Tự Động”. Nhiệm vụ của nó là tự động lấy những bài viết mới nhất từ kho lưu trữ và sắp xếp chúng thật đẹp mắt trên trang web để khách hàng xem.

Mỗi khi anh/chị đăng một bài viết mới, “Bảng Tin Tự Động” này sẽ tự cập nhật, anh/chị không cần phải làm gì thêm. Rất tiện lợi phải không ạ?

Lưu ý quan trọng trước khi bắt đầu:

Để khối “Blog Posts” này hoạt động, anh/chị cần phải có sẵn ít nhất một vài bài viết đã được đăng trong mục “Bài viết” (Posts) của website. Nếu chưa có, anh/chị hãy viết trước một vài bài nhé.

Phần 1: Mở trình chỉnh sửa trang web (UX Builder)

Đầu tiên, chúng ta cần vào đúng trang mà anh/chị muốn đặt “Bảng Tin Tự Động” lên.

Bước 1: Đăng nhập vào trang quản trị

• Truy cập vào link quản trị: tenmiencuabạn.com/wp-admin
• Nhập Tên người dùng và Mật khẩu.

Bước 2: Mở trang cần chỉnh sửa (thường là Trang chủ)

1. Trong menu màu đen bên trái, tìm và bấm vào mục “Trang” (Pages).
2. Tìm đến trang anh/chị muốn hiển thị bài viết (ví dụ: Trang chủ)
3. Rê chuột vào tên trang và bấm nút “Edit with UX Builder”.

Phần 2: Thêm và tùy chỉnh “Bảng Tin Tự Động” (Khối Blog Posts)

Bước 1: Thêm khối “Blog Posts” vào trang

1. Ở cột công cụ bên trái, anh/chị bấm vào nút có dấu cộng + Add Elements.
2. Trong bảng chức năng hiện ra, gõ chữ “Blog Posts” vào ô tìm kiếm.
3. Khi khối Blog Posts hiện ra, anh/chị hãy bấm vào nó.

Ngay lập tức, anh/chị sẽ thấy một loạt các bài viết mẫu được hiển thị trên trang web. Cột bên trái sẽ là bảng điều khiển để chúng ta tùy chỉnh cách hiển thị này.

Bước 2: Chỉnh sửa cách hiển thị cho các bài viết

Đây là phần thú vị nhất, giúp anh/chị sắp xếp “Bảng Tin” của mình sao cho đẹp mắt.

1.STYLE (Kiểu dáng hiển thị):

• Đây là mục quan trọng nhất, quyết định toàn bộ bố cục của các bài viết. Anh/chị hãy bấm thử từng kiểu để xem cái nào mình thích nhất nhé.
• • Normal: Kiểu truyền thống, ảnh bên trên, chữ bên dưới.
  • Grid: Kiểu lưới ô vuông, rất hiện đại và gọn gàng. Đây là kiểu được ưa chuộng nhất.
  • Vertical: Kiểu sắp xếp dọc, ảnh bên trái, chữ bên phải.
  • Bounce: Giống kiểu Normal nhưng có hiệu ứng nảy lên khi rê chuột vào.

2. COLUMNS (Số cột):

• Mục này quyết định xem các bài viết sẽ được chia thành mấy cột trên một hàng.
• • Ví dụ: Nếu anh/chị chọn 3, các bài viết sẽ được xếp thành một hàng 3 bài. Đây là lựa chọn phổ biến nhất cho máy tính.

3. POSTS (Số lượng bài viết):

• Anh/chị muốn hiển thị bao nhiêu bài viết mới nhất? Hãy nhập con số vào đây.
  • Ví dụ: Nhập 6 để hiển thị 6 bài viết mới nhất.

4. CATEGORY (Chọn chuyên mục):

• Đây là một tính năng rất hay! Nó cho phép anh/chị chỉ hiển thị bài viết từ một chuyên mục cụ thể.
  • Ví dụ: Nếu website của anh/chị có 2 chuyên mục là “Tin Tức” và “Khuyến Mãi”, anh/chị có thể:
    • Tạo một khối “Blog Posts” và chọn chuyên mục “Tin Tức” để hiển thị các tin tức mới.
    • Tạo một khối “Blog Posts” khác ở chỗ khác và chọn chuyên mục “Khuyến Mãi” để chỉ hiển thị các bài khuyến mãi.
  • Nếu muốn hiển thị tất cả bài viết không phân biệt chuyên mục, anh/chị cứ để trống mục này.

5. IMAGE (Tùy chỉnh hình ảnh):

• Các mục này giúp anh/chị chỉnh sửa hình ảnh đại diện của bài viết.
  • Image Height (Chiều cao ảnh): Anh/chị có thể nhập chiều cao cố định cho ảnh (ví dụ: 200px) để tất cả các ảnh đều cao bằng nhau, trông sẽ rất đều và đẹp.
  • Image Radius (Bo tròn góc ảnh): Nhập một số vào đây (ví dụ 10) để các góc ảnh được bo tròn lại, trông mềm mại hơn.
  • Image Size (Kích thước ảnh): Nên để “Medium” hoặc “Large” để ảnh nét và tải nhanh.

6. READ MORE (Nút “Xem thêm”):

Read More Text: Anh/chị có thể đổi chữ “Read More” mặc định thành chữ khác cho thân thiện hơn.

• • Ví dụ: “ĐỌC TIẾP”, “XEM CHI TIẾT”, “TÌM HIỂU THÊM”.

Phần 3: Ví dụ thực tế – Tạo mục “Tin Tức & Sự Kiện” trên Trang chủ

Hãy cùng nhau tạo một khu vực tin tức thật chuyên nghiệp nhé.

1. Đầu tiên, hãy tạo một tiêu đề bằng khối Title, gõ vào chữ “TIN TỨC & SỰ KIỆN” và chọn kiểu “Center with line”.
2. Ngay bên dưới tiêu đề, bấm + Add Elements -> tìm và chọn Blog Posts.
3. Trong bảng điều khiển bên trái:
   • Style: Chọn Grid.
   • Columns: Chọn 3.
   • Posts: Nhập số 3 (để hiển thị 3 tin mới nhất).
   • Category: Bấm vào và chọn chuyên mục “Tin Tức” (nếu có).
   • Trong mục Image, tìm Image Height và nhập vào 180px để các ảnh cao bằng nhau.
   • Trong mục Read More, tìm Read More Text và gõ vào “Xem Chi Tiết”.

Vậy là xong! Anh/chị đã có một khu vực tin tức gồm 3 bài mới nhất, được xếp theo lưới 3 cột rất đẹp mắt và chuyên nghiệp.

Phần 4: Lưu lại thành quả

Đây là bước cuối cùng và quan trọng nhất để mọi thay đổi được áp dụng.

1. Bấm nút “Apply” hoặc “Update” ở góc dưới cùng bên trái để lưu cài đặt cho khối “Blog Posts” này.
2. Sau đó, bấm nút “Update” màu xanh lá cây ở góc trên cùng bên phải để lưu lại toàn bộ thay đổi cho trang.

Chờ nút “Update” mờ đi là xong. Anh/chị đã thành công trong việc tạo một “Bảng Tin Tự Động” cho website của mình!