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.
- Hình Trượt -> SLIDER
- Tạo tiêu đề -> TITLE
- Chia cột -> ROW
- Tạo lưới hình ảnh -> GRID
- Tạo Chữ văn bản -> TEXT
- Tạo hình ảnh -> IMAGE
- Tạo thư viện ảnh -> GALLERY
- Tạo hộp ảnh và văn bản -> IMAGE BOX
- Đưa chuyên mục tin tức bài viết ra trang chủ -> BLOG POSTS
- Đư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
