Ngày 29 / 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].
Chúng ta tiếp tục học các chỉnh sửa nâng cao trong theme Astra bản premium.
1. Chỉnh sửa sidebar
Bạn vào Astra > Customize > Sidebar, sau đó click để chuyển sang tab Design:
Ở đây chúng ta có khá nhiều tùy chỉnh có thể làm được với Sidebar:
- COLORS: dùng để điều chỉnh màu sắc, trong đó có màu nền (background), màu tiêu đề (content title của các widget, nếu nó có), màu văn bản (content text), màu liên kết (content link, có 2 màu là màu link bình thường và màu hover).
- Các tùy chọn trước đó mà chúng ta đã thực hiện, áp dụng chung cho cả website như màu link, hover, văn bản, background đều được áp dụng lên sidebar, và thường cũng đủ tốt, trừ khi bạn muốn tạo sự khác biệt thì mới nên điều chỉnh.
—
- FONT: điều chỉnh đầy đủ các thông tin liên quan đến font chữ bao gồm kiểu font, mức độ đậm nhạt và cỡ font chữ (các điều chỉnh này giờ bạn đã quen thuộc rồi đúng không?).
- Title Font: để điều chỉnh font chữ của tiêu đề cho các mục trong sidebar (phần này không có trong thiết kế sidebar của website đang demo).
- Content Font: điều chỉnh phần lớn font chữ trong sidebar, cái bạn cần quan tâm chính. Phần này có thể bạn cần chỉnh lại cỡ font chữ vì có khả năng bạn thấy nó nhỏ hoặc to quá. Về loại font cũng nên kế thừa (Inherit) từ các tùy chọn chung cho cả website (mặc định font ở sidebar sẽ sử dụng loại font mà bạn thiết lập chung cho giao diện).
—
- SIDEBAR SPACING: dùng để căn lề sidebar, trong đó Outside là lề của sidebar với các thành phần bên ngoài nó, đây là cái bạn nên để như mặc định, không nên chỉnh. Còn Inside là lề của sidebar với các thành phần bên trong của nó, và cái này bạn có thể chỉnh nếu muốn (con số bên dưới chỉ là ví dụ):
- Nếu muốn quay về mặc định thì xóa tất cả các giá trị đi:
2. Chỉnh nút bấm (button)
Phần này thực tế không phải phần mà theme Astra bản cao cấp mới chỉnh được, mà ngay bản miễn phí bạn cũng thực hiện thoải mái. Nhưng nút bấm không phải thành phần bạn thấy nhiều trong website mới phát triển (ngoại trừ nút gửi bình luận), vậy nên bây giờ chúng ta mới học.
Để có nút bấm trên website nhằm thực hành bạn hãy vào Astra > Customize > Blog > Blog / Aarchive, kéo xuống phía dưới, rồi bật tùy chọn Display Read More as Button:
Khi ấy các bài viết ở chuyên mục sẽ có nút đọc thêm:
Bây giờ chúng ta sẽ học cách điều chỉnh thiết kế của nút này.
Bạn vào Astra > Customize > Global > Buttons:
- Ở ô bên phải, bạn click vào chuyên mục bất kỳ trên website, để việc điều chỉnh được trực quan.
- Đầu tiên cái Button Presets: là các mẫu button được xây dựng sẵn trong theme Astra, hãy click vào từng lựa chọn để xem nút đọc thêm thay đổi như thế nào.
- Phần thay đổi màu sắc gồm: (a) Text Color là màu của văn bản, trong ví dụ là màu của văn bản Đọc thêm >>, (b) Background Color là màu nền của nút, (c) Border Color là màu của đường viền. Bình thường ngay cả khi bạn không thiết lập màu cụ thể cho các lựa chọn ở phần này thì nó vẫn có các màu mặc định rồi (và cả lấy màu ở phần cài đặt tổng quan trước đây).
- Để thực hành, bạn hãy chọn màu bất kỳ cho nút:
- Màu của đường viền sẽ không hiển thị nếu kích cỡ của đường viền chưa được thiết lập.
- Cả 3 màu trên đều có hai tùy chọn là màu ở trạng thái thông thường (normal) và màu ở trạng thái hover (khi chuột di chuyển vào nút).
- Font: dùng để chọn font chữ của phần text, cũng bao gồm 3 lựa chọn là kiểu font, độ đậm nhạt và kích cỡ font.
- Padding: là lề trong của button, tức là lề tính từ viền của nó đến phần văn bản bên trong, để dễ hiểu, bạn hãy điều chỉnh các con số ở Top (trên), Right (phải), Bottom (đáy), Left (trái). Thường để nút cân đối thì Top và Bottom có giá trị bằng nhau, Right và Left cũng có giá trị bằng nhau. Nút có hình chữ nhật ngang nên thường Right sẽ có giá trị lớn hơn Top.
- Border Width: là chiều rộng của đường viền, nó thường mỏng và hay có cỡ 1px mà thôi. Ở đây Top (trên), Right (phải), Bottom (đáy), Left (trái) là kích cỡ đường viền ở bốn phía. Để thấy rõ đường viền trong minh họa bạn cần chọn màu cho nó ở chỗ Border Color.
- Thông thường kích cỡ đường viền ở cả 4 phía được thiết lập bằng nhau cho cân đối.
- Border Radius: là bo góc cho nút bấm, bo sẽ làm nút trông mềm mại hơn là kiểu vuông vức hình chữ nhật.
- Trong đa số các thiết kế, góc cũng được bo đồng đều để nút trông cân đối. Thường là sẽ bo cả 4 góc bằng nhau, không thì ít nhất Top và Bottom bằng nhau, và Right và Left bằng nhau.
- Sau một hồi thử nghiệm, nếu thấy ổn hãy Publish, còn không thì bạn click vào nút mẫu Button Presets để nó về một nút ‘đẹp trung bình’.
Quá trình thực hành với button kết thúc ở đây. Và nếu bạn không muốn nút Đọc thêm xuất hiện thì hãy vào Astra > Customize > Blog > Blog / Aarchive, kéo xuống phía dưới, rồi tắt tùy chọn Display Read More as Button đi.
Bài tiếp >>> Thêm chức năng tìm kiếm vào website trong theme Astra, bản cao cấp [phần 4]