Tạo layout tùy chỉnh cho trang Blog Archive trong theme Flatsome cực dễ

Đóng góp bởi: Lê Thiện 91 lượt xem Đăng ngày 09/05/2024

Chào các bạn, mình đang làm một dự án web trong đó có phần tin tức khách yêu cầu clone lại layout blog archive của một trang khác với 3 khối post khác nhau hiển thị lần lượt các bài viết trong danh mục. Hôm nay mình chia sẻ lại cho các bạn, chắc chắn sẽ nhiều bạn cần dùng layout blog archive kiểu này.

Đây là kiểu layout trang danh mục tin tức mà khách muốn:

Giuseart.com---Tùy-chỉnh-layout-trang-blog-archive-theme-flatsome
Giuseart.com – Tùy chỉnh layout trang blog archive theme Flatsome theo mẫu

Link demo: http://thietbicongnghiep3.ninhbinhweb.top/tin-tuc-dien-dan/

Chúng ta sẽ cùng nhau thực hiện nhé, bài viết hướng dẫn trên theme Flatsome nên các bạn sử dụng theme Flatsome mới làm theo được nha.

Vì mình hướng dẫn chủ yếu cho các bạn biết một chút ít về code hoặc không biết code vẫn có thể làm được, do đó, các bạn chỉ cần copy paste thôi, mình cũng không ghi chú giải thích gì nhé, cũng không cần tìm hiểu sâu, miễn sao copy xong mà nó hoạt động đúng là được!

Bước 1: Chỉnh layout hiển thị bài viết trang archive thành dạng list

Các bạn vào Giao diện – Tùy biến – Blog – Blog layout và chỉnh các option theo hình dưới đây:

Giuseart.com---Chỉnh-layout-hiển-thị-post-trong-trang-archive
Giuseart.com – Chỉnh Layout Right Sidebar, sau đó chỉnh post layout về dạng List – chọn kiểu căn trái cho tiêu đề post

Sau đó, các bạn quay trở lại một bước, vào mục Blog Archive, chỉnh Post Layout theo như hình:

Giuseart.com---Chỉnh-Post-layout-trang-archive
Giuseart.com – Chỉnh Post Layout cho trang archive theme Flatsome

Bước 2: Sửa code thay đổi layout dạng List của trang Archive

Các bạn vào Giao diện – Theme File Editor (sửa theme), chọn theme flatsome/template-parts/posts/archive-list.php

Các bạn copy toàn bộ code dưới dây thay về vào file archive-list.php hiện tại, nhớ xóa trắng hết và paste vào nhé!

Bước 3: Trang trí đẹp với CSS

Copy toàn bộ CSS dưới đây và paste vào Giao diện – Tùy biến – Style –  Custon CSS nhé!

Bước 4: Lưu lại và xem thành quả

Các bạn lưu lại và xem thành quả được chưa nha, vì code CSS mình set cho trang đang làm nên có thể đưa sang trang của bạn nó không được đẹp đúng ý, phần CSS các bạn có thể tùy ý trang trí lại cho đẹp hơn nhé.

Có vấn đề hay thắc mắc gì vui lòng liên hệ mình nhé!

Chúc bạn thành công!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Mẫu web mới đăng

Mời bạn xem một số mẫu web mới đăng của Toptheme.info | NinhBinhweb