Bài 11: Tùy chỉnh giao diện website - Tomaz

Bài 11: Tùy chỉnh giao diện website

Website trong hệ thống iTop có đặc điểm cực kỳ dễ sử dụng và tùy biến. Hướng dẫn Tùy chỉnh giao diện dưới đây sẽ cho phép admin có thể thay đổi giao diện chung của website, bao gồm: màu sắc, hình ảnh, kiểu dáng,…

1/ Cấu hình cơ bản
●    Chọn font chữ mặc định chung cho website
●    Tạo hiệu ứng loading khi truy cập website bằng cách click vào nút ON bên cạnh

Tùy chỉnh giao diện cơ bản

●    Admin có thể tùy chỉnh hiệu ứng loading theo kiểu dáng (hình tròn, khối lập phương…), màu nền hiệu ứng và màu hiệu ứng

2/ Cấu hình banner trượt 2 bên
Khi layout website ở dạng 1000px, ta có thể thiết đặt cấu hình banner: 
●    Tạo banner hình ảnh trượt 2 bên trang website tùy thích. Banner có thể trượt dọc lên xuống khi scroll chuột
●    Tạo banner bằng cách click vào nút chọn hình

Cấu hình banner trượt 2 bên

●    Kết quả 

Kết quả cấu hình banner trượt 2 bên

3/ Giao diện chung

●    Tùy chỉnh giao diện chung (màu sắc, ảnh nền) của admin. Bao gồm các mục sau:

Tùy chỉnh giao diện chung

❖    Màu chính: chọn để chỉnh màu cho nút chính, tiêu đề chính. 

Kết quả:

Chỉnh màu chính

❖    Màu phụ: bấm chọn để chỉnh màu cho nền footer phụ, nền tab phụ
Kết quả

Chỉnh màu phụ

❖    Màu chữ mặc định: định màu chữ chính trong website
❖    Màu chữ liên kết: định màu chữ cho các dòng text có gắn liên kết
❖    Màu giá sản phẩm: định màu cho giá sản phẩm
Kết quả:

Chỉnh màu chữ mặc định

❖    Ảnh nền website: click chọn ảnh nền bằng cách nhấn vào nút Chọn hình và Lưu lại

Chỉnh ảnh nền website

Kết quả

Kết quả chỉnh ảnh nền website

❖    Màu nền

4/ Giao diện Header
●    Tùy chỉnh giao diện header, menu theo màu sắc mong muốn 

Chọn mặc định để về cấu hình Header ban đầu

Mô tả tùy chỉnh Header

❖    Màu nền header top: định màu cho header trên cùng trang website
❖    Màu chữ header top: định màu cho chữ nằm trên header top
❖    Màu nền header chính: định màu cho nền header bao quanh phần menu
❖    Màu nền menu: định màu cho nền menu
❖    Màu chữ menu: định màu cho chữ của từng phần menu 
❖    Màu chữ menu active: định màu cho dòng chữ active trong menu 

5/ Giao diện Footer

Tùy chỉnh giao diện footer

❖    Ảnh nền footer chính: thiết lập ảnh nền cho footer chính.
❖    Màu nền footer chính: định màu nền cho footer chính, nếu đang để ảnh nền thì phải xóa ảnh nền thì footer mới chuyển sang màu đã định
❖    Màu chữ tiêu đê chính: định màu cho tiêu đề chính trên footer
❖    Màu chữ tiêu đề phụ: định màu cho tiêu đề phụ thuộc tiêu đề chính ở footer

Ảnh nền footer phụ

❖    Ảnh nền footer phụ: tương tự như ảnh nền footer chính
❖    Màu nền footer phụ: tương tự như màu nền footer phụ
❖    Màu chữ footer phụ: định màu cho chữ nằm trên footer phụ

●    Điều chỉnh dữ liệu theo mong muốn hoặc chọn mặc định > Sau đó bấm nút Lưu

6/ Tùy chỉnh CSS
●    Phần này cần tham khảo kỹ thuật trước khi thêm dữ liệu vào

Tùy chỉnh CSS

Trên đây là một vài hướng dẫn nếu còn thắc mắc vui lòng liên hệ đến Hotline 0977474790 để được tư vấn và biết thêm thông tin chi tiết. Chúng tôi rất hân hạnh được phục vụ quý khách hàng!.

Công ty TNHH Truyền Thông Tomaz chuyên cung cấp giải pháp tiếp cận hàng chục triệu khách hàng online – giúp bạn BỨT PHÁ trong kinh doanh.

Nguồn Itop.website

 

CÔNG TY TNHH TRUYỀN THÔNG TOMAZ

Trụ sở: 980/3 Quang Trung, P. Chánh Lộ, TP. Quảng Ngãi.

Văn phòng 1: 146 Hai Bà Trưng, P. Lê Hồng Phong, TP. Quảng Ngãi.

Văn phòng 2: 668 Phạm Văn Bạch, Phường 12, Q. Gò Vấp, TP. HCM

Hotline: 0977474790

Email: info@tomaz.vn