Cách tạo Header trong WordPress với Beaver Builder

Cập nhật: 18/06/2019

Header là phần trên cùng, xuất hiện ở mọi nơi trong trang web.

Một ví dụ dễ thấy nhất là phần Logo và Menu. Đây là 2 phần cơ bản của Header.

Để tạo Header mà không cần code, bạn có thể sử dụng Plugin Beaver Buider và Beaver Themer. Hai plugin này cho phép bạn tạo ra toàn bộ bố cục của website.

layout-website

Header đơn giản

Header đơn giản bao gồm một số kiểu chính là:

  • Kiểu 1: Logo và Menu
  • Kiểu 2: Chỉ có Menu
  • Kiểu 3. Logo, Menu, nút Call to Action
  • Kiểu 4. Logo và Menu (có icon)
  • Kiểu 5. Topbar (trên), Logo và Menu (dưới)
  • Kiểu 6: Logo (trên) và Menu (dưới) hoặc Ngược lại

Topbar là phần phía trên của Header, thường sẽ chứa thông tin liên hệ như Email, SĐT hoặc lời chào mừng, hoặc một số liên kết mạng xã hội.

Sticky Header

Header sẽ đính vào phần trên cùng của website khi cuộn chuột. Cuộn chuột tới đâu, header đi theo tới đó.

Sticky Header cũng có một số kiểu:

  • Kiểu 1: Logo và Menu
  • Kiểu 2: Logo (trên, sticky) – Menu (dưới)
  • Kiểu 3: Logo (trên) – Menu (dưới, sticky)
  • Kiểu 4: Topbar (trên, sticky) – Logo, Menu (dưới)
  • Kiểu 5: Topbar (trên) – Logo, Menu (dưới, sticky)

Header thu nhỏ (Shrink Header)

Khi cuộn chuột, header sẽ thu nhỏ chiều cao và chiều rộng các phần tử bên trong và đính vào phần trên cùng website. Kéo chuột tới đâu thì header đi theo tới đó.

Bạn có thể kết hợp các kiểu Shrink Header tương tự Sticky Header.

Header trong suốt (Transparent Header)

Header có màu nền là trong suốt.

Header với Logo ở giữa

Header có Menu ở 2 bên và Logo ở giữa

Không Header

Web không có Header, hoặc Header bị ẩn. Thường gặp ở các trang Landing Page.