Thiết kế website bán hàng

Thiết Kế Trang Chủ Đẹp Cho Website Bán Hàng WordPress


Bạn muốn khi khách hàng truy cập trực tiếp website bán hàng của bạn, trang đầu tiên họ thấy phải thật đẹp và thể hiện đầy đủ, tổng quan nhất về webiste của bạn. Thiết kế trang chủ đẹp và chuyên nghiệp sẽ giúp bạn làm được điều đó.

Có những công cụ miễn phí và tính phí có thể giúp bạn thiết kế một trang chủ đẹp. Gồm slider với ảnh chạy ngang chạy dọc, danh mục các sản phẩm trực quan, các sản phẩm bán chạy nhất, …

Những thành phần như vậy sẽ gây ấn tượng với người ghé thăm website bán hàng của bạn.

Các hướng dẫn khác tương tự bạn có thể quan tâm:

Cài đặt plugin Elementor Page Builder

Trước hết, để thiết kế trang chủ đẹp, bạn cần cài đặt một plugin. Plugin mình sẽ giới thiệu cho bạn là Elementor.

thiết kế trang chủ đẹp cho website bán hàng wordpress

Giờ thì bạn thêm một trang mới.

thiết kế trang chủ đẹp cho website bán hàng wordpress 1

Đặt tiêu đề cho trang, chọn giao diện “Elementor Full Width” => “Đăng”. Sau khi đăng xong => “Sửa với Elementor”.

thiết kế trang chủ đẹp cho website bán hàng wordpress 2

Chọn mẫu trang chủ

Giao diện để thiết kế trang chủ đẹp với Elementor như bên dưới. Bạn bấm vào ô màu đỏ để chọn mẫu trang chủ có sẵn.

Mẫu trang có biểu tượng “Chèn” màu xanh như bên dưới bạn có thể sử dụng miễn phí.

thiết kế trang chủ đẹp cho website bán hàng wordpress 4

Mẫu  có biểu tượng chữ “Nâng cấp bản Pro” màu vàng bạn phải trả tiền mới sử dụng được.

thiết kế trang chủ đẹp cho website bán hàng wordpress 5

Nếu làm trang chủ, bạn nên chọn mẫu có chữ “Hompage”. Đây là những mẫu được thiết kế sẵn dành riềng để thiết kế trang chủ đẹp và chuyên nghiệp.

Trang chủ của bạn giờ có giao diện như bên dưới.

thiết kế trang chủ đẹp cho website bán hàng wordpress 6

  1. Section: Nơi chứa các cột.
  2. Cột: Nơi chứa các thành phần.
  3. Thành phần: là các khối văn bản, ảnh, nút, thư viện hình ảnh.

Sửa mẫu trang chủ có sẵn

 

Để thêm được thành phần vào, bạn cần thêm cột trước. Để thêm được cột, bạn cần thêm section trước.

Như hình trên bạn thấy, thành phần 3 nằm trong cột 2, cột 2 lại nằm trong section 1.

Nếu bạn hài lòng với bố cục trên, đơn giản là bạn sửa nội dung ở mỗi thành phần. Mình vừa sửa 3 thành phần đánh số 1, 2, 3 trong 3 ô màu đỏ bên dưới.

Để sửa một thành phần, bạn click chuột vào nó. Bên trái sẽ chuyển sang bảng thuộc tính của thành phần bạn muốn sửa. 

Ở ô số 4, có 3 tab, bạn click chuột vào, thay đổi thử. Bạn sẽ biết mỗi thuộc tính sẽ thay đổi thành phần như thế nào.

thiết kế trang chủ đẹp cho website bán hàng wordpress 7

Để sử dụng thành thạo các tính năng, thành phần trong Elementor, chỉ có một cách duy nhất. Là bạn bấm chuột vào mỗi thành phầm, thử thay đổi hết các thuộc tính. Bạn sẽ nắm được nhanh thôi.

Sau khi sửa xong, bạn bấm “Cập nhật”.

Thêm các thành phần mới

Để thêm thành phàn mới, bạn bám chuột vào biểu tượng 3 gạch. Ngay bên dưới sẽ xuất hiện các thành phần.

thiết kế trang chủ đẹp cho website bán hàng wordpress 8

Mình sẽ thử thêm một thành phần ảnh cuộn ngang vào ngay dưới hình em bé.

Bạn nhấn chuột vào thành phần ở bên trái bạn muốn thêm, giữ chuột, kéo sang phải vào ngay vị trí bạn muốn nó nằm ở đó. Như bên dưới mình kéo thành phần tới ngay dưới hình em bé.

thiết kế trang chủ đẹp cho website bán hàng wordpress 9

Thành phần đã được thêm => Bấm thêm hình ảnh.

thiết kế trang chủ đẹp cho website bán hàng wordpress 10

Và bộ sưu tập đã được tạo. Bạn muốn thay đối các thuộc tính như kích thước, màu sắc, … bạn có thể thử nghiệm.

thiết kế trang chủ đẹp cho website bán hàng wordpress 11

Thêm danh mục sản phẩm

Bấm vào biểu tượng bên dưới để thêm một section mới.

thiết kế trang chủ đẹp cho website bán hàng wordpress 12

Chọn cấu trúc bạn muốn. Bên dưới mình chọn cấu trúc 3 cột. Cột giữa để thêm danh mục sản phẩm chính. Hai cột hai bên để thêm hai danh mục con của danh mục chính này.

thiết kế trang chủ đẹp cho website bán hàng wordpress 13

Mỗi khi thêm một section, Elementor sẽ tự động chèn cột vào. Bạn chỉ đơn giản là kéo thành phần bạn muốn sang và thả vào.

thiết kế trang chủ đẹp cho website bán hàng wordpress 14

Sau đó chỉnh sửa thành phần. Nhớ thêm link danh mục sản phẩm vào. Để khi khách hàng click vào, họ sẽ được dẫn đến danh mục sản phẩm này.

thiết kế trang chủ đẹp cho website bán hàng wordpress 15

Và mình đã tạo được 3 danh mục sản phẩm. Nhưng có vẻ chưa được đẹp lắm. Bạn hoàn toàn có thể làm tốt hơn thế này khi có thời gian để chỉnh sửa, thử nghiệm thêm các thành phần khác. 

thiết kế trang chủ đẹp cho website bán hàng wordpress 18

Bạn có thể tạo danh mục như bên dưới. Tạo một section khác, có 3 cột đều nhau.

thiết kế trang chủ đẹp cho website bán hàng wordpress 20

Di chuyển các thành phần

Section mới lúc nãy mình tạo đang nằm dưới cùng của trang chủ. Mình muốn kéo nó lên trên.

Bạn nhấn chuột vào vị trí ô tròn đỏ. Giữ chuột. Lăn con lăn chuột giữa kéo lên phía trên.

thiết kế trang chủ đẹp cho website bán hàng wordpress 21

Đến vị trí bạn muốn và xuất hiện đường ngang màu xanh, bạn thả ra.

thiết kế trang chủ đẹp cho website bán hàng wordpress 22

Và kết quả như bên dưới.

thiết kế trang chủ đẹp cho website bán hàng wordpress 23

Bạn có thể sửa lại những thành phần bên dưới để thêm thông tin giao hàng, chính sách đổi trả, cam kết, đảm bải, …

thiết kế trang chủ đẹp cho website bán hàng wordpress 24

Xóa, sao chép thành phần

Bạn muốn xóa, sao chép một thành phần, cột, section bất kỳ, bấm chuột vào thành phần đó, nhấn chuột phải, và bảng bên dưới xuất hiện. Bạn có thể chọn tác vụ mà bạn muốn.

thiết kế trang chủ đẹp cho website bán hàng wordpress 25

OK! Vậy là mình đã hướng dẫn bạn một sô thứ tương đối cơ bản về cách dùng Elementor để thiết kế trang chủ đẹp trong website wordpress.

Để thành thạo công cụ này, bạn cần tự mày mò và thử nghiệm nhiều. Trong một bài viết mình không thể cover hết được.

Hy vọng nó hữu ích và giúp bạn tự thiết kế được trang chủ đẹp cho website wordpress của mình. Có câu hỏi nào, bạn cứ để lại comment ở bên dưới.

 

 

 


2 Comments

Leave a Comment

Your email address will not be published. Required fields are marked *

Nhận Hướng Dẫn Kinh Doanh Online Hiệu Quả
Thông tin của bạn được bảo mật