Hướng dẫn cài đặt ban đầu Visual Config

Sau khi đã khởi tạo trang web thành công và chuyển hướng đến không gian làm việc, bước tiếp theo bạn cần làm là nhấn vào biểu tượng bánh xe (có tên là Visual Config) bên cạnh nút Save ở góc trên bên phải rồi làm theo các bước sau:

1. Background:

Color: chọn màu nền chủ đạo cho tất cả các trang web, ví dụ: #ffffff.

Image: chọn hình nền chủ đạo cho tất cả các trang web.

Size: kích cỡ của hình nền, ví dụ: auto, 100%

2. Fonts:

Font size: cỡ chữ thường được mặc định là 16px, tuy nhiên bạn có thể tùy ý thay đổi theo nhu cầu.

Font chữ: Theo thứ tự từ trên xuống tương ứng font 0 đến font 4, bên cạnh các font chữ có nhiều lựa chọn về độ đậm, nhạt khác nhau cho từng font:

- Font 0: là phông chữ chủ đạo của cả trang web, sử dụng cho văn bản thường, đoạn văn, bài viết, miêu tả sản phẩm,...

- Font 1: là phông chữ nhấn với mục đích làm nổi bật tiêu đề, nhấn mạnh phần văn bản theo ý muốn.

- Font 2 - font 4: bạn có thể sử dụng thêm các phông khác tùy nhu cầu nhưng thông thường mỗi trang web chỉ sử dụng từ 1 đến 2 phông chữ.

Bạn có thể tham khảo toàn bộ phông chữ Tiếng Việt tại Google Fonts

3. Color: thông thường 1 trang web sử dụng tối đa 5 màu chủ đạo. Theo thứ tự từ trên xuống tương ứng color 0 đến color 4.

- Color 0: Mặc định là màu #333333 (màu đen với độ tương phản vừa phải) phù hợp để sử dụng cho văn bản thường.

- Color 1: Là màu sắc chủ đạo của trang web

- Color 2 - Color 3: Các màu chủ đạo khác hoặc màu nhấn tùy theo mỗi trang web.

- Color 4: Gợi ý bạn sử dụng mã màu #FAFAFA. Bạn có thể dùng màu này cho các đoạn văn bản ở trên nền tối.

4. Heading: Các thông số của Heading có sẵn, tuỳ mục đích thì bạn có thể tuỳ chỉnh cho phù hợp trên cả 5 màn hình.

5. Container:

Width: ở tất cả các màn hình, chiều dài được mặc định là 100%. Bạn chỉ cần tùy chỉnh chiều ngang của màn hình Large Desktop và 1100px là một gợi ý. Tìm hiểu thêm về Width.

Padding: ở màn hình Large Desktop, bạn chỉ cần cho Padding là 0px. Ở các màn hình còn lại, hệ thống đã mặc định sẵn như sau: Desktop (40px), Tablet (30px), Small Tablet (20px), Mobile (15px). Tìm hiểu thêm về Padding.

6. Functions:

Fullpage Scroll: các nội dung sẽ hiển thị trong 1 Section khi lướt lên/xuống trang web

Scroll Navigation: một thanh cuộn cho biết bạn đang lướt đến Section nào, bạn có thể chọn đặt chúng bên trái hoặc bên phải trang web

Navigation Name: hiển thị tên của Section khi bạn lướt web

Navigation Active Name:

- Bật: tên Section sẽ luôn hiển thị sẵn mỗi khi bạn lướt web

- Tắt: khi rê chuột vào thanh cuộn thì tên của Section mới hiển thị