Bài 3: Thiết lập giao diện Header Body và Footer website

Thiết lập giao diện Header Body và Footer website

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 Body và Footer website sau:

Tùy chỉnh Header

Chọn mục giao diện -> Tùy biến -> Header

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 trên cùng: Top Bar
  • Dòng ở giữa: Header Main
  • Dòng thứ 3: Header Bottom
  • Dòng thứ 4 là nơi chứa các chức năng mà chúng ta không sử dụng nằm ở đây.

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 của menu ở từng dòng làm việc ở trong này nhé.

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:

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:

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