Một số điều lưu ý khi thiết kế Sidebar của Astra

Sidebar là thành phần quan trọng của Blog giúp bạn tăng tỷ lệ chuyển đổi vì vậy bạn cần chú ý đặc biệt đến nó.

Khi thiết kế Sidebar theme Astra bạn cần chú ý một số điểm sau

Bề rộng của Sidebar

Tuỳ chỉnh bề rộng Sidebar trong Customize
Tuỳ chỉnh bề rộng Sidebar trong Customize

Bạn nên chỉnh Sidebar có chiều rộng cân bằng để tránh gây phân tâm người đọc. Tỷ lệ phần trăm của Sidebar Width sẽ phụ thuộc theo Layout Contain.

Tôi thường chỉnh Sidebar <30% cho người đọc có tầm nhìn tốt nhất khi đọc bài.

Quy định Sidebar xuất hiện ở đâu trên website của bạn

Bạn có thể quy định Sidebar xuất hiện ở Trang, Blog Post hay Blog Archive (là trang chủ của bạn nếu bạn chỉnh latest post).

Tuỳ vào mục đích của bạn, bạn có thể quy định không cho hiển thị Sidebar trên Page và Blog Post.

Nếu bạn muốn Sidebar chỉ hiển thị trên trang chủ thì bạn có thể chỉnh Blog Archive.

Sidebar có thể Sticky nếu bạn muốn

Không cần dùng plugin, bạn chỉ cần chèn CSS vào Additional CSS sẽ giúp bạn Sticky Sidebar Astra

div#secondary{
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  padding-bottom: 55px;
}

Bạn có thể dùng Custom Layout (Astra Pro) để tạo toàn bộ Sidebar

Do Custom Layout có thể dùng với Page Builder như Brizy, Elementor, Beaver Builder… nên bạn có thể dùng kết hợp để thiết kế Sidebar.

Hook Custom Layout Astra
Chọn Hook với Sidebar Before

Bạn có thể dùng Page Builder Template (Elementor Pro hay Beaver Builder Pro) để tạo Sidebar

Bạn có thể dùng chức năng Template của Page Builder để tạo Sidebar mà không cần Custom Layout của Astra Pro nếu bạn đang sử dụng các phiên bản Pro của Elementor hay Beaver Builder Pro.

Ví dụ: bạn có thể dùng Anywhere Elementor để chèn template vào Sidebar với Shortcode.