Ngày 26 / Tiết 2 / Thời lượng 30 phút. Mục lục khóa 100 ngày làm web [tháng thứ 2].
Đầu tiên bạn vào Astra > Customize > Global > Color:
Bạn click vào hình cái bút chì ở chỗ Global Palette để chọn tông màu chung cho website:
Các Style chỉ khác nhau một chút ở nền và một vài phần nhỏ khác, nhưng màu sắc ảnh hưởng đáng kể đến cảm nhận của chúng ta, do vậy màu nền chỉ cần tối hay sáng đi một chút là bạn cũng thấy thay đổi tương đối rồi.
Ngay bên dưới là bộ màu mặc định của website:
Ở đây nó quy định toàn bộ màu sắc của theme, chẳng hạn như:
- Màu nền.
- Màu link (liên kết).
- Màu nút bấm (button), ví dụ nút gửi bình luận.
- Màu của đường viền.
- Màu tiêu đề.
- Màu chữ của nội dung chính.
- Vân vân.
Lời khuyên chung là bạn không nên động vào phần này, có 2 lý do chính:
- Bộ màu sắc thường được thiết kế chuẩn và nó hoạt động ổn trên hầu hết website.
- Chỉnh màu ở đây khó thấy màu đó chỉnh cho phần nào, và vì thế bạn dễ nhầm lẫn.
Khi điều chỉnh màu thì thường chúng ta chỉ điều chỉnh một, hai yếu tố của website thôi, ví dụ màu viền, màu nền ở vị trí cụ thể như bình luận, bài viết chính, vân vân. Các bạn nên vào chính các khu vực đó để chỉnh thì sẽ tốt hơn, vì nó rõ ràng, thay vì chỉnh chung chung như ở trong phần bộ màu này.
—
Ngay ở bên dưới bạn sẽ thấy phần chỉnh màu cụ thể từng khu vực:
Trong đó:
- Accent: để chỉnh màu như kiểu màu nút bấm.
- Links: để chỉnh màu liên kết, có 2 phần là màu dạng thông thường, và màu khi di chuyển chuột đến link đó (màu hover). Chỗ này chỉ dùng để chỉnh màu link ở chỗ phần tên tác giả, ngày tháng đăng bài.
- Heading (H1 – H6): chỉnh màu các tiêu đề chính cũng như phụ trong bài.
- Body Text: chỉnh màu chữ nội dung chính của bài.
- Borders: chỉnh màu đường viền.
Một lần nữa phần này cũng có rất ít thứ nên chỉnh, vì phần lớn màu này đã là chuẩn rồi. Thay đổi thường làm xấu hoặc trông dị chứ hiếm khi tốt lớn, nhất là khi ở thời điểm này, bạn vẫn chưa đủ mạnh về màu sắc hay thiết kế nói chung.
Chẳng hạn các liên kết mặc định trong hầu hết các website là màu xanh nước biển, bạn thay màu khác cũng không hay lắm, hoặc nếu vẫn muốn chỉnh thì vẫn nên chọn tông xanh thì hơn.
Màu chữ cũng vậy, thường các website để màu ngả đen (nhưng không phải đen tuyệt đối), ví dụ:
Cái này để tránh tương phản quá lớn giữa màu chữ và màu nền (màu nền thường trắng gần tuyệt đối).
Tóm lại nếu định chỉnh thì bạn cũng chỉ nên chỉnh sắc độ đen cao hay thấp của nó mà thôi, vì văn bản chính ít khi để tông màu khác ngoài màu đen.
Thứ duy nhất mà tôi muốn bạn thử chỉnh trong phần này là màu nút bấm bình luận, bạn thử thay màu mặc định bằng mã màu #ffbd03 xem sao (nhập mã màu vào ô dưới chữ Hex):
Kết quả:
Tiếp theo chúng ta sẽ chuyển qua màu nền chung của cả website, và màu nền cho phần nội dung chính:
Hầu hết các website sẽ để màu nền cho cả website là màu trắng xám (để đỡ chói), còn màu nền cho nội dung chính cũng có thể trắng xám hoặc trắng gần tuyệt đối. Một lần nữa thì lời khuyên cho phần này là bạn cứ để như mặc định, hoặc nếu đổi hãy chỉ chọn tông màu trắng xám tương tự, và hết sức chú ý xem website trông có dễ đọc không với nền bạn chọn:
Bạn cũng có thể để nền website là ảnh, bằng cách chọn vào Image rồi up bức ảnh làm nền cho website lên. Nhưng thành thật mà nói, ở thời điểm này có khả năng đến 95% bạn chọn ảnh nền cho trang web thì sẽ chỉ làm nó xấu đi mà thôi! Nguyên nhân là chọn ảnh nền đạt yêu cầu không hề dễ, chúng ta sẽ dành vào bài học khác phù hợp hơn.
Ôi, bài này thật kỳ lạ, cả bài tôi chỉ dành công sức khuyên bạn không làm gì!
Bài tiếp >>> Tinh chỉnh header và menu trong theme Astra.