Ngày 27 / Tiết 1 / Thời lượng 30 phút. Mục lục khóa 100 ngày làm web [tháng thứ 2].
Nhìn chung thiết kế mặc định của header và menu trong theme Astra khá ổn rồi, bài này dành cho bạn nào muốn điều chỉnh sâu thêm thiết kế của chúng.
Bạn vào Astra > Customize > Header Buider:
Chuyển sang tab DESIGN:
Mặc định nó đang để là Content Width, nghĩa là chiều rộng của header đang bằng với chiều rộng của phần nội dung, nếu bạn muốn nó rộng hơn, thì click vào phần Full Width, bạn cứ thử sẽ thấy rõ sự khác biệt, cái này phù hợp với các website nào có menu dài hoặc chỉ đơn giản là bạn thích không gian menu trông thoáng hơn.
Còn cái Margin dùng để điều chỉnh lề của header. Có 4 thông số có thể điều chỉnh là Top (lề trên), Right (lề phải), Bottom (lề dưới), Left (lề trái). Đơn vị khoảng cách là PX (pixel), bạn cứ thử điều chỉnh để xem giao diện thay đổi thế nào. Thường thì mặc định của nó trông cũng ổn, trong quá trình thử nghiệm, nếu bạn muốn quay về mặc định, hãy để cả 4 giá trị là 0 hoặc để trống (tốt nhất là để trống).
Khi bạn điều chỉnh cái Margin này, bạn nhập một số vào, cả 4 số sẽ đồng thời thay đổi theo, ví dụ:
Giờ bạn muốn chỉ chỉnh sửa một yếu tố thôi thì click vào biểu tượng bên tay phải, ví dụ:
Như hình trên tôi chỉ chỉnh lề của header ở phía đáy (bottom) mà thôi, các phía khác giữ như mặc định.
Có 2 điều nữa cần lưu ý:
- Nếu bạn để lề là số dương nó sẽ tăng khoảng cách, nếu bạn để lề là số âm nó sẽ giảm khoảng cách giữa các yếu tố.
- Lề này có thể thiết lập các giá trị khác biệt cho 3 loại thiết bị khác nhau là máy bàn, máy tính bảng và di động, hay nói chính xác hơn là theo kích cỡ màn hình to, trung bình, và nhỏ. Để làm điều đó, bạn nhìn xuống cuối sẽ thấy phần lựa chọn thiết bị:
—
Bây giờ bạn click vào tab ELEMENTS, rồi chọn Primary Menu để tinh chỉnh cho menu chính:
Chuyển sang tab DESIGN của Primary Menu:
Đầu tiên là Menu Hover Style dùng để điều chỉnh hiệu ứng khi bạn hover vào link trên menu (khi di chuyển chuột đến một mục trên menu):
- None: là mặc định, không bổ sung hiệu ứng gì.
- Zoom In: là kiểu khi di chuột đến chữ sẽ phóng to thêm một chút.
- Underline: là kiểu khi di chuột đến chữ sẽ có gạch chân bên dưới.
- Overline: là kiểu khi di chuột đến chữ sẽ có gạch chân bên trên.
Cá nhân tôi thích hiệu ứng Underline:
Phần SUBMENU CONTAINER, nghĩa là điều chỉnh cho menu con ở trong menu to, thiết kế này chỉ dùng khi chúng ta có rất nhiều mục cần hiển thị trên menu, đa số các trang mới không bao giờ cần dùng đến trong năm đầu. Bây giờ bạn cũng không cần quan tâm vội, nó sẽ được đưa vào tiết phụ của những ngày sau.
Kéo tiếp xuống dưới bạn sẽ đi vào phần Menu Color:
Bạn thấy là ở phần Text / Link, từ trái qua phải nó có các lựa chọn sau:
- Normal: màu sắc bình thường của text / văn bản trên menu.
- Hover: màu của text khi hover chuột qua.
- Active: là màu của text khi nó đã được người dùng click chọn.
Ví dụ, tôi đổi màu hover:
Chỗ Background cũng có 3 lựa chọn (bình thường, hover, active), dành cho màu nền trên các mục của menu. Tuy nhiên chỉnh nền đẹp tương đối khó nên bạn cứ để như mặc định sẽ tốt hơn, ngoài ra chúng ta đã có các hiệu ứng vừa bổ sung rồi (underline, đổi màu khi hover).
Kéo xuống phần FONT, bạn sẽ điều chỉnh được các thông tin như:
- Kiểu font (font family).
- Độ đậm nhạt của chữ (font weight).
- Kích thước font (font size).
Phần cuối chỗ SPACING dùng để căn lề. Ví dụ khi bạn thấy các mục trong menu quá gần hoặc quá xa nhau, bạn có thể click vào dấu mũi tên vàng chỉ (để điều chỉnh cụ thể lề trái, nếu không làm vậy, bạn chỉnh một cái nó sẽ chỉnh giống nhau cả 4 chiều):
Sau đó bạn nhập giá trị vào để khoảng cách giữa các mục trên menu theo chiều dọc được cân đối.
Còn cái Margin là lề cho cả menu, bạn nên để như mặc định thì ổn hơn, nhưng cứ thử nhập một số nào đó vào để quan sát hiệu ứng.
Cuối cùng để chính thức áp dụng các thay đổi cho website bạn click vào nút Publish.
Bài tiếp >>> Điều chỉnh thiết kế cho trang chuyên mục (category) trong theme Astra.