Làm web bán hàng với Flatsome – Tạo nội dung trang chủ

Ngày đăng: 29 - 03 - 2020 Lượt xem: 253 lượt

Trong bài viết trước mình đã tạo phần đầu trang chủ với các loại banner. Trong bài viết này, mình sẽ hướng dẫn các bạn tạo nội dung tiếp theo cho trang chủ. Nội dung bao gồm: Sản phẩm bán chạy, Sản phẩm mới nhất, Banner full, Bài viết mới.

Tạo nội dung trang chủ

Bạn tiếp tục chỉnh sửa trang chủ với UX Builder như bài trước nhé. Ngay dưới thành phần Grid mà mình tạo trong bài trước, bạn tạo cho mình thành phần có tên là Gap, dùng để tạo một khoảng trống. Mình chọn chiều cao cho Gap là 30px.

Sau đó, mình tạo một thành phần mới, có tên là Row, nghĩa là dòng, trong dòng sẽ có cột, mình chọn một cột thôi nhé.

Nội dung mình thêm vào sẽ nằm trong cột này, nên bạn nhấn nút Add to Column.

Sau đó chọ thành phần có tên là Title.

Trong Title, mình sửa title thành SẢN PHẨM BÁN CHẠY, chọn màu sắc và icon cho nó.

Tiếp theo, bạn thêm vào cột một thành phần sản phẩm bán chạy có tên là Products – Best Selling.

Trong thiết lập bạn sửa số sản phẩm thành 8, để nó hiển thị 8 sản phẩm bán chạy nhất.

Xong xuôi bạn Duplicate (nhân đôi) cái Row này lên.

Sau đó chỉnh sửa cái Title thành SẢN PHẨM MỚI NHẤT. Xoá cái Products – Best Selling đi và thay bằng một thành phần khác có tên là Product – Recent để nó hiển thị sản phẩm mới. Trong đó bạn cũng chỉnh sửa cho nó hiển thị 8 sản phẩm.

Tiếp theo bạn tạo một Row mới, cũng có một cột. Nhưng bạn chỉnh sửa cho Row này có Width là Full.

Sau đó, bạn thêm Banner vào cột có kiểu là Simple Center.

Bạn chỉnh sửa chiều cao cho banner này là 300px và thêm ảnh nền cho banner. Sau đó chỉnh sửa Text và Nút (tương tự như banner ở phần đầu trang).

Tiếp theo ta tạo một Row tương tự như trên sản phẩm mới nhưng dùng cho bài viết mới. Thêm tiêu đề BÀI VIẾT MỚI vào cột trong Row này.

Sau đó thêm vào Column thành phần có tên là Blog posts. Cuối cùng bạn nhấn Update cho trang. Sau đó ra ngoài trang chủ xem thử thành quả nhé.

Tổng kết

Dưới đây là kết quả của trang web bán hàng mình tạo bằng Flatsome, vẫn còn thiếu một số chỉnh sửa, chẳng hạn như phần Footer. Trong bài viết sau mình sẽ hướng dẫn bạn tạo Footer tuyệt đẹp cho trang web này nhé.

0 0 vote
Article Rating

Mục lục
guest
2 Comments
Bình chọn
Mới nhất Cũ nhất
Inline Feedbacks
View all comments
Trung

Ui bác Huykira mở nhiều web vậy???

Admin

Hiện tại mần 2 site chính thôi bạn, site này với site huykira.net

Bài viết liên quan

Tạo bảng giá trong Wordpress với Flatsome

Tạo bảng giá trong Wordpress với Flatsome

06 - 04 - 2020

Trong quá trình làm website, có đôi bạn muốn tạo một bảng giá, phục vụ cho việc cho thuê...

Làm web bán hàng với Flatsome – Tuỳ chỉnh cho WooCommerce

Làm web bán hàng với Flatsome – Tuỳ chỉnh cho WooCommerce

03 - 04 - 2020

Tuỳ chỉnh cho giao diện WooCommerce sẽ là bài cuối trong series Làm Web bán hàng với Flatsome. Trong...

Làm web bán hàng với Flatsome - Tuỳ chỉnh hiển thị Blog

Làm web bán hàng với Flatsome - Tuỳ chỉnh hiển thị Blog

31 - 03 - 2020

Các giao diện wordpress chuyên nghiệp cho phép bạn chỉnh sửa hiển thị các trang chức năng riêng biệt....

Làm web bán hàng với Flatsome - Tuỳ chỉnh giao diện

Làm web bán hàng với Flatsome - Tuỳ chỉnh giao diện

31 - 03 - 2020

Tuỳ chỉnh giao diện bao gồm bố cục, màu sắc, font chữ,... để website mang phong cách riêng. Đây...

Làm web bán hàng với Flatsome – Tạo trang liên hệ tuyệt đẹp

Làm web bán hàng với Flatsome – Tạo trang liên hệ tuyệt đẹp

30 - 03 - 2020

Trang liên hệ là một thành phần không thể thiếu đối với mỗi website. Trang liên hệ là nơi...

Làm web bán hàng với Flatsome – Tạo footer

Làm web bán hàng với Flatsome – Tạo footer

30 - 03 - 2020

Footer hay còn gọi là chân trang, là thành phần nằm dưới cùng của trang. Footer thường chứa các...

2
0
Would love your thoughts, please comment.x
()
x