Một website chuyên nghiệp không chỉ cần nội dung hay mà còn phải sở hữu một giao diện đẹp mắt, dễ dàng điều hướng. Trong đó, Header (đầu trang) và Footer (chân trang) là hai thành phần quan trọng nhất, xuất hiện trên mọi trang con của website. Thay vì bị gò bó bởi các giao diện (theme) mặc định nhàm chán, bạn hoàn toàn có thể tự tay sáng tạo chúng theo phong cách riêng của mình.
Trong bài viết này, tôi sẽ hướng dẫn bạn cách thiết kế header footer bằng elementor pro một cách chi tiết, từng bước một, cực kỳ dễ hiểu ngay cả khi bạn là người mới bắt đầu và không biết một dòng code nào. Hãy cùng bắt đầu nhé!
Elementor là một trong những plugin dựng trang (page builder) phổ biến nhất trên WordPress hiện nay. Phiên bản Elementor Pro sở hữu tính năng mạnh mẽ mang tên Theme Builder. Tính năng này mang lại những lợi ích vượt trội so với phiên bản miễn phí:
Để quá trình thiết kế diễn ra suôn sẻ và không gặp lỗi, hãy đảm bảo rằng website WordPress của bạn đã cài đặt và kích hoạt thành công hai plugin sau:
Ngoài ra, bạn nên chuẩn bị sẵn một số tài nguyên như: ảnh logo định dạng PNG (nền trong suốt), bảng mã màu thương hiệu, danh sách các liên kết menu mong muốn (đã được tạo sẵn trong mục Appearance > Menus của WordPress).
Hãy bắt đầu với phần đầu trang (Header) – nơi đập vào mắt khách hàng đầu tiên và quyết định việc họ có ở lại khám phá website của bạn hay không.
Từ bảng quản trị WordPress (Dashboard), bạn truy cập vào đường dẫn: Templates > Theme Builder. Tại giao diện mới hiện ra, bạn chọn mục Header ở menu bên trái và nhấn vào nút Add New ở góc trên bên phải màn hình.
Elementor Pro sẽ hiển thị một thư viện chứa rất nhiều mẫu Header được thiết kế sẵn cực kỳ chuyên nghiệp. Nếu lười, bạn chỉ cần chọn một mẫu ưng ý và nhấn Insert. Tuy nhiên, để tự tay thiết kế một Header độc nhất vô nhị, hãy tắt bảng thư viện này đi để bắt đầu với một trang trắng.
Thông thường, một Header cơ bản, chuẩn SEO và thân thiện với người dùng sẽ có cấu trúc 3 cột. Hãy nhấn vào biểu tượng dấu cộng (+) màu hồng để thêm một Section mới với bố cục 3 cột:
Bạn nhấp vào từng widget để thay đổi màu sắc, font chữ, kích thước sao cho đồng bộ với bộ nhận diện thương hiệu của mình. Đặc biệt, hãy chú ý căn giữa các thành phần theo chiều dọc bằng cách chọn Section chính, tại mục Vertical Align chọn Middle.
Lưu ý quan trọng: Đừng quên nhấn vào biểu tượng Responsive Mode (hình máy tính và điện thoại) ở thanh công cụ phía dưới cùng bên trái. Kiểm tra xem trên giao diện Mobile, menu đã tự động chuyển thành dạng nút rút gọn (Hamburger Menu) gọn gàng chưa và căn chỉnh lại kích thước logo cho vừa vặn.
Sau khi đã hoàn toàn hài lòng với thiết kế, hãy nhấn nút Publish màu xanh lá cây. Một bảng thông báo hiện ra yêu cầu bạn thiết lập điều kiện hiển thị (Conditions). Bạn nhấn vào Add Condition, chọn Include > Entire Site nếu muốn Header này xuất hiện trên toàn bộ các trang của website. Cuối cùng, nhấn Save & Close.
Sau khi hoàn thành Header, phần chân trang (Footer) sẽ là bước tiếp theo để hoàn thiện tổng thể website. Footer là nơi chứa các thông tin pháp lý, liên hệ và giúp giữ chân người dùng ở lại website lâu hơn.
Tương tự như cách làm với Header, bạn vào Templates > Theme Builder > chọn mục Footer > nhấn Add New.
Một Footer chuyên nghiệp thường được chia làm 3 đến 4 cột để chứa được nhiều thông tin một cách khoa học. Hãy tạo một Section mới với 4 cột bằng nhau và kéo các widget tương ứng vào:
Để Footer trông gọn gàng và chuyên nghiệp, hãy thêm một Section mới 1 cột ở ngay phía dưới cùng của Footer. Đổ màu nền tối hơn màu nền Footer một chút. Sau đó, kéo widget Text Editor vào và nhập nội dung bản quyền, ví dụ: “Copyright © 2026 Tên Doanh Nghiệp. Thiết kế bởi Elementor.” Căn giữa đoạn chữ này để tạo sự cân đối.
Nhấn Publish, chọn điều kiện hiển thị là Entire Site (toàn bộ trang web) tương tự như Header và nhấn Save & Close để hoàn tất.
Nếu muốn website của mình trông thực sự đẳng cấp như các trang web của tập đoàn lớn, bạn hãy áp dụng ngay 3 mẹo nâng cao cực kỳ đơn giản dưới đây:
Sticky Header giúp người dùng có thể truy cập menu điều hướng bất cứ lúc nào mà không cần phải cuộn ngược lên đầu trang. Để làm điều này, bạn chọn Section chứa Header của mình, chuyển sang tab Advanced > chọn mục Motion Effects. Tại phần Sticky, bạn chọn Top. Bạn cũng có thể thiết lập hiệu ứng này chỉ hoạt động trên Desktop và Tablet, còn ẩn đi trên Mobile để tiết kiệm diện tích hiển thị.
Vì Header và Footer là hai thành phần sẽ tải trên mọi trang con của website, nên việc tối ưu dung lượng của chúng là cực kỳ quan trọng để tăng tốc độ load web. Tránh sử dụng các hình ảnh có dung lượng quá lớn, hạn chế tối đa việc lạm dụng các hiệu ứng chuyển động (animation) quá phức tạp hoặc chèn quá nhiều đoạn mã script bên thứ ba vào hai khu vực này.
Thay vì nhập thủ công Logo hay Tên website bằng chữ, hãy tận dụng tính năng Dynamic Tags của Elementor Pro. Khi kéo widget Image vào làm logo, hãy nhấn vào biểu tượng cơ sở dữ liệu nhỏ ở góc và chọn Site Logo. Điều này giúp bạn khi muốn thay đổi logo trong tương lai, chỉ cần vào cài đặt chung của WordPress thay đổi một lần, toàn bộ Header và Footer trên website sẽ tự động cập nhật theo.
Việc tự tay thiết kế header footer bằng elementor pro thực sự không hề khó khăn và phức tạp như nhiều người vẫn nghĩ. Chỉ với một chút tư duy thẩm mỹ kết hợp với các thao tác kéo thả trực quan của Elementor Pro, bạn đã có thể tự mình làm chủ hoàn toàn giao diện website, tạo nên một trải nghiệm người dùng tuyệt vời và đồng nhất. Chúc các bạn thực hiện thành công và sở hữu một website ưng ý nhất!
