Bạn đã chán ngấy những mẫu Header và Footer gò bó, đơn điệu mặc định của giao diện WordPress? Bạn muốn tạo ra một thanh menu điều hướng độc đáo, có gắn logo nổi bật, nút kêu gọi hành động (CTA) thu hút và một chân trang chuyên nghiệp đầy đủ thông tin? Tin vui là bạn hoàn toàn có thể làm được điều đó mà không cần biết một dòng code nào.
Trong bài viết này, tôi sẽ hướng dẫn bạn từng bước chi tiết cách tự thiết kế Header và Footer tùy biến bằng Elementor Pro. Hãy cùng bắt đầu biến website của bạn trở nên ấn tượng và chuẩn SEO ngay hôm nay!
Header (đầu trang) và Footer (chân trang) là hai khu vực xuất hiện trên hầu hết mọi trang con của website. Chúng đóng vai trò cực kỳ quan trọng trong việc định hình thương hiệu và điều hướng người dùng. Sử dụng tính năng Theme Builder của Elementor Pro mang lại cho bạn những lợi ích vượt trội:
Để quá trình thiết kế diễn ra mượt mà nhất, bạn cần chuẩn bị sẵn một số yếu tố sau:
Từ bảng điều khiển WordPress (Dashboard), bạn truy cập theo đường dẫn: Templates > Theme Builder. Tại đây, hãy nhấp vào mục Header ở menu bên trái và chọn nút Add New (Thêm mới) ở góc trên bên phải.
Elementor Pro cung cấp sẵn một thư viện mẫu Header rất đẹp mắt. Bạn có thể chọn một mẫu ưng ý và nhấn Insert để chỉnh sửa. Tuy nhiên, để tạo ra phong cách riêng, bạn nên tắt cửa sổ thư viện và bắt đầu thiết kế từ một trang trắng.
Thông thường, một Header chuẩn sẽ bao gồm 3 phần chính. Hãy tạo một Section có 3 cột với tỷ lệ phù hợp:
Hãy chuyển sang chế độ xem Mobile bằng cách nhấn vào biểu tượng Responsive Mode dưới góc trái thanh công cụ. Tại giao diện Mobile:
Sau khi thiết kế xong, nhấn nút Publish (Xuất bản). Cửa sổ Display Conditions sẽ hiện ra. Nếu muốn Header này xuất hiện trên toàn bộ website, bạn chọn Include > Entire Site. Cuối cùng, nhấn Save & Close.
Cách tạo Footer tương tự như tạo Header, nhưng cấu trúc nội dung sẽ phong phú hơn nhằm cung cấp thông tin cho khách hàng và hỗ trợ SEO footstep.
Vào Templates > Theme Builder > Footer > Add New.
Hãy tạo một Section 4 cột với nội dung gợi ý như sau:
Tạo thêm một Section 1 cột nằm ngay dưới Footer chính. Sử dụng widget Text Editor để thêm dòng chữ bản quyền, ví dụ: “© 2024 Tên-Website-Của-Bạn. All Rights Reserved.”. Bạn có thể sử dụng các thẻ động (Dynamic Tags) của Elementor Pro để năm xuất bản tự động cập nhật.
Nhấn Publish và thiết lập điều kiện Entire Site tương tự như phần Header.
Để thanh menu luôn đi theo người dùng khi họ cuộn trang xuống dưới, hãy nhấp vào Chỉnh sửa Section của Header > chọn thẻ Advanced > Motion Effects > Tại mục Sticky, chọn Top.
Header và Footer tải ở mọi trang, vì vậy hãy tối ưu dung lượng hình ảnh logo (nên dưới 50KB), hạn chế sử dụng quá nhiều hiệu ứng chuyển động rườm rà gây giật lag.
Tránh sử dụng các thẻ tiêu đề quan trọng như <h1> hay <h2> trong Header và Footer. Thay vào đó, hãy dùng thẻ <h3>, <h4> hoặc thẻ <p> để không làm ảnh hưởng đến cấu trúc thẻ tiêu đề chính của bài viết/trang sản phẩm.
Chỉ với vài thao tác kéo thả đơn giản trên Elementor Pro, bạn đã có thể tự tay tạo nên hệ thống Header và Footer độc đáo, mang đậm dấu ấn cá nhân và chuyên nghiệp không kém gì các đơn vị thiết kế web cao cấp. Hãy bắt tay vào thực hành ngay hôm nay để khoác lên mình một diện mạo mới cho website của bạn!
