Cách tạo sidebar trên theme Astra

Ngày 23 / Tiết 2 / Thời lượng 20 phút. Mục lục khóa 100 ngày làm web [tháng thứ 2].

Kiểu website không có sidebar khá thú vị, chính bản thân tôi cũng hay áp dụng nó cho một số trang web của mình, tính tối giản và giúp tập trung cao vào nội dung chính trên trang là hai ưu điểm nổi trội của website không sidebar.

Tuy nhiên kiểu có sidebar vẫn là kiểu phổ biến hơn, và có khả năng bạn sẽ cần đến vào một thời điểm nào đó (ngay cả khi không có sidebar là kiểu ưu thích của bạn), vậy nên hôm nay chúng ta sẽ học cách thiết lập sidebar nhé.

Website có sidebar
Website có sidebar
  • Ở trang quản trị bạn vào Appearance > Customize (chỗ này nói chung sẽ là vị trí chính khi bạn muốn điều chỉnh giao diện website):
Appearance > Customize
Appearance > Customize
  • Click chọn Sidebar:
Chọn Sidebar
Chọn Sidebar
  • Bạn click chọn kiểu sidebar nằm bên phải (kiểu bên phải phổ biến hơn kiểu bên trái) như hình bên dưới mũi tên vàng trỏ đến:
Chọn kiểu sidebar nằm bên phải
Chọn kiểu sidebar nằm bên phải
  • Các thông số khác không điều chỉnh, cái Sidebar Width nghĩa là chiều rộng của sidebar đang được thiết lập bằng 30% chiều rộng website, bạn cứ để như mặc định, về sau nếu muốn thì điều chỉnh sau. Cuối cùng nhấn Publish để lưu cài đặt.
  • Nếu bạn nào học bài này, sau khi thực hành bài thiết lập website không có sidebar, thì bạn sẽ thấy website bây giờ lại nhỏ bất thường. Sở dĩ như vậy là vì ở bài học trước chúng ta đã để chiều rộng của website chỉ 768px, cái đó không có sidebar thì được, nhưng chúng ta vừa thiếp lập cột phải cho website, cho nên bây giờ cần điều chỉnh kích cỡ lớn hơn thì nó mới trông bình thường được.
  • Để làm điều đó, bạn click vào mũi tên vàng chỉ để quay lại phần cài đặt tổng quan:
Quay lại phần cài đặt tổng quan
Quay lại phần cài đặt tổng quan
  • Sau đó bạn click tiếp vào Global > Container, rồi điều chỉnh Container Width lên 1000px, 1050px hoặc 1100px, tùy vào kiểu nào bạn thấy vừa mắt hơn:
Điều chỉnh tăng Container Width
Điều chỉnh tăng Container Width
  • Cuối cùng nhấn Publish để lưu cài đặt, và bạn sẽ thấy thiết lập đó trên website.

Ở đây bạn mới thiết lập vị trí cho sidebar chứ nó chưa có nội dung gì trên sidebar cả:

Sidebar chưa có nội dung gì
Sidebar chưa có nội dung gì

Các bài học sau chúng ta sẽ học cách đưa một số nội dung thường thấy vào sidebar.

Bài tiếp >>> Cách đưa một số nội dung vào sidebar.