Giới thiệu

Phần Header (đầu trang)Footer (chân trang) là hai khu vực quan trọng nhất của website:

  • Header thường chứa logo, menu điều hướng, thông tin liên hệ nhanh.

  • Footer thường hiển thị thông tin công ty, bản quyền, liên kết nhanh, mạng xã hội.

Bài viết này sẽ hướng dẫn bạn tự điều chỉnh, tạo mới hoặc cập nhật Header và Footer bằng Elementor, giúp website của bạn đẹp, đồng bộ thương hiệu mà không cần biết lập trình.


1. Chuẩn Bị Trước Khi Thực Hiện

  • Tài khoản quản trị (Admin) của WordPress.

  • Website đã cài đặt Elementor và Elementor Pro.

    Lưu ý: Tính năng tạo Header/Footer tùy chỉnh nằm trong Elementor Pro.


2. Truy Cập Khu Vực Quản Lý Header và Footer

  1. Đăng nhập trang quản trị WordPress.

  2. Vào Mẫu Elementor → Theme Builder.

  3. Chọn tab Header hoặc Footer để bắt đầu.

Vào Mẫu Elementor → Theme Builder.

 

Chọn tab Header hoặc Footer để bắt đầu.

 

Hoặc bạn có thể chọn “+” Để thêm Header hoặc Footer mới.

3. Quản Lý Header

3.1 Tạo hoặc Chỉnh Sửa Header

  • Tạo mới: Nhấp Add New → chọn Header.

  • Chỉnh sửa Header sẵn có: Di chuột vào template hiện có → chọn Edit.

Giao diện chọn Add New Header.

 

Giao diện chọn Header sau khi đã nhấn Add New.

 

Nếu bạn đã tạo Header trước đó và muốn chỉnh sửa -> Bạn có thể bấm vào edit để vào chỉnh sửa.

3.2 Tùy Chỉnh Nội Dung

Trong giao diện chỉnh sửa Elementor, bạn có thể:

  • Kéo thả các Widget như Logo, Menu, Nút Gọi Ngay, Icon mạng xã hội…

  • Thay đổi màu sắc, font chữ, khoảng cách, căn chỉnh để phù hợp thương hiệu.

Chọn thêm thành phần “+” -> Kéo widget WordPress Menu vào vùng Header.

3.3 Cài Đặt Hiển Thị

  • Nhấn nút Xuất bản → chọn Display Conditions.

  • Quy định nơi hiển thị: Entire Site (Toàn bộ website), Archives (Chỉ áp dụng cho các trang lưu trữ), Singular (Áp dụng cho trang hoặc bài viết đơn lẻ).

Giao diện chọn cài đặt hiển thị.

4. Quản Lý Footer

4.1 Tạo hoặc Chỉnh Sửa Footer

  • Tương tự như Header: Add New → Footer hoặc chỉnh sửa template sẵn có.

4.2 Bố Cục Gợi Ý

  • Thông tin liên hệ: địa chỉ, email, số điện thoại.

  • Liên kết nhanh: các trang quan trọng như Giới thiệu, Dịch vụ, Liên hệ.

  • Bản quyền.

Giao diện Footer mẫu với các cột nội dung.

5. Mẹo Tối Ưu

  • Giữ Header gọn gàng, dễ đọc cả trên desktop và mobile.

  • Sử dụng màu nền tương phản nhẹ để phân tách với nội dung chính.

  • Kiểm tra hiển thị trên nhiều thiết bị bằng chế độ Responsive trong Elementor.


6. Lưu và Kiểm Tra

  • Sau khi hoàn tất, nhấn Xuất bản để lưu.

  • Mở trang web thật để kiểm tra kết quả.


7. Một Số Câu Hỏi Thường Gặp (FAQ)

1. Không thấy thay đổi trên website?
→ Xóa cache trình duyệt (Có thể sử dụng phím tắt CTRL + SHIFT + R) hoặc cache của plugin (nếu có).

2. Không có Elementor Pro thì sao?
→ Bạn chỉ có thể chỉnh Header/Footer mặc định của theme hoặc dùng plugin bổ sung.


Kết Luận

Việc tự quản lý Header và Footer với Elementor giúp bạn:

  • Chủ động trong việc thay đổi nội dung, bố cục.

  • Giữ giao diện luôn đồng bộ và chuyên nghiệp.

Hãy định kỳ kiểm tra và cập nhật để website của bạn luôn tươi mới và phù hợp với thương hiệu.

Tagged: