Nhớ lại thời điểm 3 năm trước khi mới tập tành làm website WordPress, tôi từng rơi vào một hoàn cảnh dở khóc dở cười. Khi đó, tôi nhận một dự án thiết kế web cho một thương hiệu thời trang cao cấp. Mọi trang nội dung đều lung linh cho đến khi khách hàng thốt lên: “Em ơi, sao cái Menu trên cùng nhìn thô thế? Còn cái Footer dưới cùng lại chèn chữ lem nhem, không sửa được à?”. Lúc đó, giao diện (theme) miễn phí mà tôi dùng hoàn toàn khóa chặt phần Header và Footer. Tôi bất lực vì không biết về lập trình PHP hay CSS để can thiệp.
Chính trong giây phút bế tắc đó, tôi đã “bén duyên” với Elementor Pro và tính năng Theme Builder kỳ diệu của nó. Nó không chỉ giải cứu tôi khỏi bàn thua trông thấy năm đó, mà còn thay đổi hoàn toàn tư duy làm web của tôi sau này. Hôm nay, tôi sẽ chia sẻ lại toàn bộ “bí truyền” thực chiến giúp bạn tự tay thiết kế Header và Footer tùy biến 100% theo ý muốn mà không cần viết một dòng code nào.
Trong thiết kế website, Header (đầu trang) và Footer (chân trang) giống như hai bức tường định hình ngôi nhà của bạn. Chúng xuất hiện ở hầu hết mọi trang đơn (Single Page) hay trang bài viết (Post).
Nếu chỉ dùng Header/Footer mặc định của Theme, bạn sẽ bị giới hạn khung hình, màu sắc và tính năng. Nhưng với Elementor Pro, bạn có quyền năng của một nhà thiết kế thực thụ: muốn đặt Logo ở đâu, thêm thanh tìm kiếm dạng popup, hay tạo hiệu ứng cuộn trang linh hoạt đều nằm trong tầm tay.
Để bắt đầu, hãy đảm bảo bạn đã cài đặt WordPress và kích hoạt plugin Elementor Pro. Hãy cùng tôi bắt tay vào thực hành ngay nhé!
Từ giao diện quản trị WordPress (Dashboard), bạn truy cập theo đường dẫn: Templates > Theme Builder. Tại đây, bạn sẽ thấy một giao diện trực quan quản lý toàn bộ cấu trúc website. Hãy nhấn vào biểu tượng dấu cộng (+) tại mục Header.
Elementor Pro sẽ gợi ý cho bạn hàng chục thư viện Header dựng sẵn rất đẹp mắt. Kinh nghiệm của tôi là: Nếu bạn cần làm nhanh, hãy chọn một mẫu ưng ý rồi sửa lại. Nhưng nếu muốn rèn luyện tư duy thiết kế, hãy đóng bảng gợi ý lại và bắt đầu từ một trang trắng (Canvas).
Một Header hiện đại chuẩn thương mại điện tử thường có cấu trúc 3 cột. Bạn tạo một Container (hoặc Section) mới và chia thành 3 phần:
Đây là tính năng khách hàng của tôi cực kỳ thích. Khi người dùng cuộn trang xuống, Header vẫn sẽ dính chặt ở mép trên màn hình, giúp họ dễ dàng chuyển trang mà không cần cuộn ngược lên.
Cách làm rất đơn giản: Chọn vào Container chính của Header > Vào tab Advanced > Tìm mục Motion Effects > Tại phần Sticky, chọn Top. Đừng quên bật tính năng này trên cả Desktop và Mobile nhé!
Hơn 60% lượng truy cập đến từ điện thoại. Một Header hoàn hảo trên máy tính có thể trở thành “thảm họa” trên Smartphone nếu bạn bỏ qua bước này. Hãy bấm vào biểu tượng Responsive Mode ở góc dưới màn hình, chuyển sang chế độ Mobile.
Lúc này, hãy thu nhỏ Logo lại, chuyển Nav Menu sang dạng “Hamburger Button” (biểu tượng 3 dấu gạch ngang). Elementor Pro hỗ trợ tùy chỉnh khoảng cách (Padding/Margin) riêng cho Mobile mà không làm ảnh hưởng đến giao diện Desktop.
Sau khi đã hoàn thành Header và bấm Publish, hãy quay lại Theme Builder để tạo Footer. Quy trình tạo Footer tương tự như Header, nhưng về mặt nội dung, tôi khuyên bạn nên chia thành 4 cột chính chuẩn SEO và UX:
Đừng quên thêm một dòng nhỏ dưới cùng (Copyright Section) ghi rõ bản quyền thuộc về thương hiệu của bạn để tăng tính uy tín.
Sau khi thiết kế xong Header hay Footer, khi bạn nhấn nút **Publish**, Elementor Pro sẽ hỏi bạn một câu quan trọng: “Where do you want to display your template?” (Bạn muốn hiển thị mẫu này ở đâu?). Đây chính là tính năng **Display Conditions** ăn tiền nhất.
Kinh nghiệm thực chiến của tôi đối với phần này:
Include > Entire Site (Hiển thị trên toàn bộ trang web).Exclude > Singular > Landing Page đó. Hoặc bạn có thể tạo một Header hoàn toàn mới dành riêng cho trang Blog!Trải qua hàng chục dự án lớn nhỏ, tôi rút ra 3 bài học xương máu mà bạn nhất định phải tránh:
1. Nhồi nhét quá nhiều Widget: Đừng biến Header/Footer thành “nồi lẩu thập cẩm”. Nhồi nhét quá nhiều hình ảnh, hiệu ứng động sẽ làm tăng dung lượng DOM, khiến tốc độ tải trang (PageSpeed) tụt dốc thảm hại.
2. Quên kiểm tra tương thích trên Tablet: Chúng ta thường tối ưu cho Desktop và Mobile mà quên mất Tablet. Nhiều trường hợp Menu bị vỡ nét trên iPad chỉ vì thiếu thao tác căn chỉnh Responsive cho màn hình tầm trung.
3. Đặt màu sắc thiếu tương phản: Hãy đảm bảo màu chữ trên Header/Footer đủ nổi bật so với màu nền (Background). Nếu nền tối, hãy dùng chữ trắng/vàng; nếu nền sáng, hãy dùng chữ đen/xám đậm để tối ưu trải nghiệm đọc của khách hàng.
Thiết kế Header và Footer tùy biến bằng Elementor Pro không hề khó hay mang tính đánh đố kỹ thuật. Nó giống như việc bạn xếp hình Lego – chỉ cần một chút sáng tạo, tư duy sắp xếp bố cục hợp lý và nắm vững các thao tác tôi vừa chia sẻ, bạn hoàn toàn có thể tự tay tạo ra những website đẳng cấp không thua kém gì các Agency chuyên nghiệp.
Hãy mở máy tính lên, cài đặt Elementor Pro và bắt đầu sáng tạo chiếc Header/Footer mang đậm cá tính thương hiệu của riêng bạn ngay hôm nay. Nếu gặp bất kỳ khó khăn nào trong quá trình thực hiện, hãy để lại bình luận bên dưới, tôi sẽ trực tiếp giải đáp giúp bạn!
