Cách đây khoảng 3 năm, tôi nhận một dự án thiết kế website cho một thương hiệu thời trang local brand khá có tiếng tại TP.HCM. Khách hàng yêu cầu một giao diện cực kỳ cá tính: Header phải có hiệu ứng đổi màu khi cuộn trang, tích hợp thanh tìm kiếm ẩn hiện hiện đại, và Footer phải chia làm 4 cột gọn gàng kèm form đăng ký nhận bản tin khuyến mãi. Lúc đó, tôi vẫn đang loay hoay với những theme WordPress mặc định. Việc can thiệp vào file header.php hay footer.php bằng code CSS/PHP là một cơn ác mộng thực sự đối với một đứa “tay ngang” như tôi.
Sau 2 ngày mất ngủ, tôi quyết định đầu tư bản Elementor Pro. Và bạn biết gì không? Chỉ trong vòng chưa đầy 2 tiếng đồng hồ, tôi đã hoàn thiện cả Header lẫn Footer đúng chuẩn yêu cầu của khách hàng mà không cần viết một dòng code nào. Đó là khoảnh khắc tôi nhận ra sức mạnh kinh ngạc của tính năng Theme Builder. Hôm nay, tôi sẽ chia sẻ lại toàn bộ quy trình thực chiến đó, giúp bạn tự tay thiết kế Header và Footer bằng Elementor Pro một cách chuyên nghiệp nhất.
Hầu hết các theme WordPress miễn phí hoặc thậm chí là trả phí đều giới hạn khả năng tùy biến ở khu vực đầu và cuối trang. Bạn thường chỉ được chọn vài bố cục có sẵn, khó thay đổi khoảng cách, màu sắc theo ý muốn, hoặc việc thêm một nút kêu gọi hành động (CTA) vào menu cũng vô cùng phức tạp.
Khi tự thiết kế bằng Elementor Pro, bạn sẽ có những đặc quyền:
Hãy bắt đầu với phần “mặt tiền” của website – nơi đầu tiên đập vào mắt khách hàng khi họ truy cập vào trang web của bạn.
Từ bảng điều khiển WordPress (Dashboard), bạn điều hướng đến Templates > Theme Builder. Tại đây, bạn chọn tab Header và nhấn Add New. Một cửa sổ hiện ra yêu cầu bạn đặt tên cho Header (ví dụ: “Header Chính”), sau đó nhấn Create Template.
Elementor sẽ gợi ý cho bạn một số mẫu Header có sẵn rất đẹp. Tuy nhiên, vì chúng ta đang tự thiết kế tùy biến, hãy tắt bảng thư viện này đi để bắt đầu với một trang trắng tinh.
Thông thường, một Header tiêu chuẩn sẽ có cấu trúc 3 cột:
Bạn nhấn vào biểu tượng dấu cộng (+) để thêm một Section mới với cấu trúc 3 cột tương ứng.
Bây giờ là phần thú vị nhất. Bạn chỉ cần kéo các widget từ thanh bên trái vào các cột:
Để Header luôn hiển thị khi người dùng cuộn trang xuống, giúp họ dễ dàng điều hướng, bạn làm như sau: Chọn toàn bộ Section của Header > Vào tab Advanced > Tìm mục Motion Effects > Tại phần Sticky, chọn Top. Bạn cũng có thể chọn ẩn hiệu ứng này trên thiết bị di động nếu muốn.
Footer (chân trang) là nơi khách hàng tìm kiếm thông tin liên hệ, chính sách mua hàng và các liên kết mạng xã hội. Một Footer chỉn chu sẽ làm tăng mức độ uy tín của doanh nghiệp.
Tương tự như Header, bạn vào Theme Builder > Chọn tab Footer > Nhấn Add New, đặt tên và tạo một template mới.
Kinh nghiệm thực chiến của tôi cho thấy bố cục 4 cột là tối ưu nhất cho Footer. Bạn tạo một Section mới với 4 cột bằng nhau:
Footer thường có màu nền tối (như xám đậm, đen, hoặc màu thương hiệu đậm) để phân biệt rõ ràng với phần nội dung trang. Hãy chọn Section Footer, vào tab Style, chọn Background Type là Classic và chọn màu nền phù hợp. Đừng quên đổi màu chữ của các widget bên trong sang màu trắng hoặc xám nhạt để đảm bảo độ tương phản dễ đọc.
Sau khi đã thiết kế xong Header hoặc Footer, khi bạn nhấn nút Publish (Xuất bản), Elementor Pro sẽ hiển thị một bảng thông báo hỏi bạn muốn áp dụng template này ở đâu. Đây chính là tính năng “ăn tiền” nhất của bản Pro.
Bạn nhấn vào Add Condition:
Cuối cùng, nhấn Save & Close. Hãy ra ngoài trang chủ và tận hưởng thành quả của mình!
Trong quá trình làm việc với hàng trăm dự án lớn nhỏ, tôi đã rút ra được một số kinh nghiệm quý báu dưới đây để tránh các lỗi phổ biến:
div sang header. Tương tự với Footer, hãy chuyển sang thẻ footer. Việc này giúp các bot tìm kiếm của Google hiểu rõ cấu trúc website của bạn hơn, cực kỳ tốt cho SEO.Việc tự tay thiết kế Header và Footer bằng Elementor Pro không hề khó như bạn nghĩ. Nó giống như việc bạn đang chơi một trò chơi xếp hình, nơi bạn hoàn toàn làm chủ mọi mảnh ghép để tạo nên một tác phẩm nghệ thuật mang đậm dấu ấn cá nhân hoặc thương hiệu của doanh nghiệp. Hy vọng bài viết này đã truyền cho bạn đủ cảm hứng và kiến thức thực chiến để bắt tay vào nâng cấp giao diện website của mình ngay hôm nay. Chúc các bạn thành công!
