Hướng dẫn thiết lập giao diện trang chủ website: Header, Body và Footer

Đây là học phần thiết kế giao diện trang chủ, Bài hôm nay sẽ hướng dẫn Bạn thiết lập trang chủ của website gồm 3 phần chính là:

  • Header: đầu trang sẽ chứa Logo, thông tin tên cty, số điện thoại
  • Body: Nội dung chi tiết gồm slide, hình ảnh sản phẩm.
  • Footer: Phần chân trang web

1. Để tùy chỉnh Header

Vào quản trị web, Chọn mục giao diện -> Tùy biến -> Header

Kết quả như hình sau:

Bạn để ý vùng làm việc bên phải như sau, Phần header có 3 dòng là 3 vùng hiển thị của phần đầu trang

  • Dòng thứ 1 trên cùng: Top Bar
  • Dòng thứ 2: Header Main
  • Dòng thứ 3: Header Bottom
  • Dòng thứ 4 là Kho chức năng: nơi chứa các chức năng mà chúng ta không sử dụng nằm ở đây.

Tham khảo website: 

https://daotaobinhduong.com/ mình đang sử dụng cả 3 dòng trên header

https://lml.vn/ mình đang sử dụng cả 2 dòng trên header

VD: dòng 1

VD: dòng 2

VD: dòng 3

Cách sử dụng;

Khi bạn muốn sử dụng chức năng gì chỉ cần nắm kéo và thả vào vùng muốn hiển thị là được.

Nào hãy thực hành các quản lý header khoảng 5 phút nhé!

Tiếp tục…………..

Logo & Site Identity: Vùng thiết lập Tên website, vị trí đặt logo và thay đổi logo.

Top Bar, Header Main, Header Bottom:

  • Bạn có thể màu sắc,
  • kích thức chữ của menu,
  • thay đổi độ rộng chữ của menu
  • màu sắc khi rê chuột lên menu

Chức năng HTML: Thay đổi nội dung trên header hiển thị

Chức năng Contact: Thay đổi hiển thị thông tin liên lạc

=> Sau khi tùy chỉnh xong nhớ bấm nút “Đăng” để lưu thay đổi ở góc trên bên trái.

Xem video:

BỔ SUNG HEADER VÀ HIỂN THỊ MOBILE

XEM VIDEO

2. Tùy chỉnh Body (thân website)

Chọn Mục Trang -> Tất cả các trang -> Trang chủ -> Edit with UXBuilder

Bắt đầu chỉnh từng phần nhé:

Slider: Thay đổi ảnh trượt

Chọn Image -> Option -> Change Media -> Chọn ảnh mới

Bạn lưu ý các ảnh phải cùng kích thước và hình có thiết kế thì website mới trượt đều và đẹp nhé

Hiện tại website đang dùng là dữ liệu mẫu nhé, nếu bạn không có nhiều thời gian để thực hàng web Bạn chỉ cần chỉnh lại nội dung là có thể sử dụng được

Nếu Bạn muốn tùy chỉnh nhiều hơn có khả năng thực hành nhiều hơn chúng ta sẽ thay đổi lại bố cục trang web lại, một số các chức năng thông dụng Bạn cần nắm sau:

Nhấp vào nút “add to nội dung  để chèn các chức năng cần thiết vào Trang web.

  1. Hình Trượt -> SLIDER
  2. Tạo tiêu đề -> TITLE
  3. Chia cột -> ROW
  4. Tạo lưới hình ảnh -> GRID
  5. Tạo Chữ văn bản -> TEXT
  6. Tạo hình ảnh -> IMAGE
  7. Tạo thư viện ảnh -> GALLERY
  8. Tạo hộp ảnh và văn bản -> IMAGE BOX
  9. Đưa chuyên mục tin tức bài viết ra trang chủ -> BLOG POSTS
  10. Đưa sản phẩm ra trang chủ -> SHOP -> PRODUCT

Sau khi thiết lập xong nhớ nhấp nút “Update” để cập nhật thay đổi. :D

Xem video hướng dẫn:

3. Tùy chỉnh chân trang Footer

Chọn mục Giao diện -> Tùy chỉnh -> Footer

Tại phần Footer 2:

Background color: Chọn màu nền

Tại phần Absolute Footer: 

Background color: Chọn màu nền

Bottom Text – Primary: Ghi lại tên thương hiệu hoặc cty bạn ở đây.

Bấm “Đăng” để lưu nhé!

….tiếp tục…..còn nữa……………

Bây giờ thay đổi nội dung ở đâu?

Chọn mục Giao diện -> Widget

Bạn nhìn cột bên phải chổ Footer 2 bấm mũi tên sổ xuống nhé

Bạn bấm vào từng mục và thay đổi nội dung ở đây nhé! Nhớ xong lưu lại.

Xem video hướng dẫn

Đến đây Bạn đã xong bài học hôm nay, Xin chúc mừng nếu bạn hoàn thành và thấu hiểu nội dung đã học! :D