Làm web bán hàng với Flatsome – Chỉnh sửa Header

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

Trong bài viết trước mình đã giới thiệu về theme Flatsome, giao diện web bán hàng số 1 cho WordPress. Trong bài viết này, mình sẽ hướng dẫn mọi người bước đầu tiên là chỉnh sửa header của giao diện. Header là phần đầu của trang web, nó thường bao gồm các thành phần quan trong của website như là logo, menu chính, các menu phụ, tìm kiếm, giỏ hàng,…

Chỉnh sửa Header theme Flatsome

Để chỉnh sửa giao diện Flatsome, bạn vào menu Flatsome Theme Options, nó sẽ hiện ra giao diện tuỳ chỉnh như thế này. Bên trái là danh sách các mục chỉnh sửa, bên phải là xem trước chỉnh sửa. Trong bài viết này mình sẽ chỉnh sửa Header, do đó bạn nhấn vào menu Header.

Các menu chỉnh sửa phần Header hiện ra, bạn vào tiếp menu Presets. Đậy là mục chọn kiểu xuất hiện cho header. Có khoảng 10 kiểu, bạn có thể chọn kiểu ưng ý, như mình chọn luôn kiểu đầu tiên nhé. Sau khi chọn thì nhấn nút Đăng, rồi nhấn nút < để quay lại Header.

Flatsome chia bố cục header làm 3 phần, gồm: Top bar, Header main, Header bottom. Tiếp theo mình tuỳ chỉnh Top bar, là thành phần trên cùng của header. Ở đây mình chỉ chỉnh sửa style của top bar thôi nhé, chưa chỉnh tới nội dung của nó.

  • Enable Top Bar: kích hoạt top bar hay tắt nó đi.
  • Height: chiều cao của top bar.
  • Nav Color: màu sắc của chữ menu.
  • Top Bar Background: màu nền của top bar.
  • Navigation Style: kiểu hiển thị của menu

Sau mỗi lần chỉnh sửa xong thì nhấn nút Đăng hoặc Xuất bản nhé.

Tiếp theo, mình chỉnh sửa Header Main cũng gần tương tự như Top Bar. Mình không dùng tới Header Bottom nên không chỉnh sửa nó nhé.

Tiếp theo bạn chỉnh sửa dùm mình cái Sticky Header, là header sẽ hiển thị cố định khi bạn lướt trang xuống.

Như vậy là mình chỉnh sửa xong phần nhìn cho header, bây giờ ta sẽ chỉnh sửa các thành phần trong header. Khi bạn nhìn xuống dưới sẽ thấy một phần có tên Header Builder. Đây là tính năng xây dựng header bằng phương pháp kéo thả rất hay của Flatsome.

Ở đây bạn sẽ thấy bố cục 3 hàng của header như mình đã nói ở trên, mỗi hàng có 3 ô. Dưới cùng là danh sách các thành phần bạn có thể dùng cho header. Bạn sử dụng chúng bằng cách kéo thả vào ô tương ứng. Chẳng hạn ở đây mình kéo các thành phần Search icon, Top Bar Menu, Social Icons, Logo, Main Menu, Account, Cart vào các vị trí như hình.

Chỉnh sửa các thành phần trong header

Để chỉnh sửa các thành phần, bạn có thể click vào chúng. Đầu tiên mình chỉnh sửa logo, trong đó có tên website, khẩu hiệu và hình ảnh logo.

Sau đó chỉnh sửa hiển thị cho phần Account.

Chỉnh sửa kiểu xuất hiện giỏ hàng.

Sau đó bạn vào phần Menu, tạo cho mình Main Menu và đặt vị trí của nó là Main Menu. Các menu bên trong tuỳ bạn lựa chọn.

Tương tự thêm một menu mới có tên Top Menu, chọn vị trí xuất hiện cho nó là Top Bar Menu.

Bên cạnh đó, bạn chọn kiểu hiển thị Mobile / Tablet để chỉnh sửa header khi hiển thị trên thiết bị di động. Mình chỉ sử dụng 3 thành phần là Nav Icon, Logo, Cart.

Sau đó mình chỉnh sửa Nav Icon, như là style và các thành phần xuất hiện trong Menu này như là Tìm kiếm, Main Menu,  Account, Newsletter.

Như vậy là mình đã chỉnh sửa xong phần giao diện. Ra ngoài trang chủ để xem thử nhé.

Tổng kết

Trên đây là bước đầu tiên chỉnh sửa header cho theme Flatsome. Có rất nhiều thành phần khác bạn có thể thêm cho Header, như là một đoạn mã HTML để điền số Hotline chẳng hạn. Trong bài viết mình không thể giới thiệu hết, bạn có thể tự nghiên cứu các thành phần khác nhé.

5 1 vote
Đánh giá bài viết

Nhận thông báo
Nhận thông báo cho
guest

0 Góp ý
Inline Feedbacks
View all comments

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...

0
Would love your thoughts, please comment.x