Nếu bạn đã và đang sử dụng Divi cho website WordPress của mình, hẳn bạn biết rằng tạo một header chuyên nghiệp, mang dấu ấn cá nhân không chỉ giúp website đẹp hơn, mà còn giúp tăng trải nghiệm người dùng. Trong hướng dẫn này, tôi sẽ giúp bạn hiểu rõ cách tạo một header tùy chỉnh hoàn toàn từ đầu trong Divi Theme. Tất cả được thực hiện một cách chi tiết và dễ hiểu nhất.
Chúng ta sẽ cùng nhau tạo một header có logo, menu và nút call-to-action. Header này sẽ phản hồi tốt trên mọi thiết bị, đồng thời có hiệu ứng sticky đẹp mắt. Nào, cùng bắt đầu nhé!
Cài Đặt Cơ Bản Trước Khi Bắt Đầu
Đầu tiên, bạn cần truy cập Divi Theme Builder trong trang quản trị WordPress. Đây là nơi mọi thứ liên quan đến header sẽ được xây dựng. Bạn có thể chọn tạo một Global Header áp dụng cho tất cả các trang trong website hoặc chỉ tạo header riêng cho một trang cụ thể.
Nếu bạn chưa quen với Divi, hãy làm quen bằng cách vào Divi Theme Builder, nhấn vào dấu cộng để tạo template mới. Tại đây, bạn sẽ được hỏi muốn áp dụng template này cho toàn bộ website hay chỉ một số trang nhất định.
Việc áp dụng header dựa theo từng trang cụ thể sẽ cho phép bạn tùy biến linh hoạt hơn. Ví dụ, header trên trang chủ có thể khác với header trên các trang dịch vụ hoặc liên hệ.
Bắt Đầu Tạo Header Bằng Divi Builder
Chúng ta sẽ xây dựng header từ đầu, không sử dụng bất kỳ template có sẵn nào. Khi bạn thêm Custom Header, hãy chọn xây dựng bằng Divi Builder.
- Tạo một section và thêm một row với 3 cột.
- Phân chia bố cục như sau: logo ở bên trái, menu ở giữa, và nút call-to-action ở bên phải.
- Để logo và nút gọn gàng, bạn có thể giảm độ rộng của 2 cột này và tăng độ rộng cho menu ở giữa.
Sau khi hoàn tất, hãy lưu lại để tránh mất dữ liệu nếu có sự cố nhé.
Thêm Logo Vào Header
Logo là một phần quan trọng trong header vì nó giúp nhận diện thương hiệu của bạn ngay lập tức.
- Trong cột đầu tiên, chèn mô-đun hình ảnh.
- Upload logo của bạn (nên sử dụng file PNG với nền trong suốt).
- Điều chỉnh kích thước logo trong mục Design > Sizing. Một kích thước phổ biến là 200px chiều rộng.
Để logo nổi bật hơn lúc thiết kế, bạn có thể tạm thời thêm một nền màu sáng hoặc gradient cho toàn bộ row. Điều này sẽ giúp bạn nhìn rõ logo khi thao tác.
Tạo Hiệu Ứng Sticky Cho Header
Sticky header là cách tuyệt vời để giữ các thông tin quan trọng như logo, menu và nút call-to-action luôn hiển thị khi người dùng cuộn trang.
- Truy cập phần cài đặt section, sau đó vào Advanced > Scroll Effects.
- Chọn “Stick to the Top” để giữ header cố định phía trên khi cuộn.
- Trong mục Background, đặt nền của header ở trạng thái ban đầu là trong suốt. Khi stick, chuyển sang nền trắng.
Đừng quên lưu và kiểm tra hiệu ứng sticky trên trang thực tế để đảm bảo mọi thứ hoạt động như ý muốn.
Đổi Logo Khi Cuộn Trang
Có thể bạn muốn logo của mình thay đổi khi header trở nên sticky, giúp tăng thẩm mỹ và sự khác biệt.
- Nhân đôi mô-đun hình ảnh logo.
- Với logo thứ nhất, đặt trạng thái hiển thị ở chế độ desktop (không stick).
- Với logo thứ hai, đặt trạng thái hiển thị ở chế độ sticky.
Đừng quên sử dụng tính năng “Transform” để xác định vị trí logo khi chuyển đổi giữa các trạng thái.
Thêm Menu Vào Header
Menu giúp khách truy cập dễ dàng điều hướng website.
- Trong cột giữa, thêm mô-đun Menu từ Divi Builder.
- Tùy chỉnh màu sắc và kiểu chữ của menu trong Design > Menu Text.
- Đặt màu sắc khác nhau cho menu trong chế độ bình thường và sticky để người dùng dễ nhận biết sự thay đổi.
Nếu website của bạn có submenu (menu con), bạn cũng có thể tùy chỉnh màu sắc và hiệu ứng hover cho chúng để trải nghiệm người dùng tốt hơn.
Tạo Nút Call-to-Action
Nút call-to-action rất quan trọng nếu bạn muốn hướng người dùng đến một hành động cụ thể, như liên hệ hoặc bắt đầu mua sắm.
- Trong cột cuối cùng, thêm mô-đun Button.
- Thiết lập văn bản, kiểu chữ, và màu nền cho nút trong Design > Button.
- Đừng quên thêm liên kết cho nút để dẫn đến trang bạn mong muốn, ví dụ trang liên hệ.
Hãy làm nổi bật nút này bằng cách tăng kích thước chữ hoặc chọn màu sắc tương phản.
Tối Ưu Header Cho Mọi Thiết Bị
Bạn có biết rằng hơn 70% người truy cập web hiện nay đến từ thiết bị di động? Vì vậy, tối ưu header trên điện thoại và máy tính bảng là cực kỳ quan trọng.
Trong Divi, bạn có thể tùy chỉnh chế độ hiển thị của một số phần tử dựa trên thiết bị. Ví dụ:
- Ẩn header desktop trên mobile/tablet và ngược lại.
- Tạo một cấu trúc header đơn giản hơn cho mobile, như logo ở giữa và một menu dạng toggle.
Sử dụng tính năng Custom CSS trong cài đặt Advanced để kiểm soát tốt hơn khoảng cách và vị trí các phần tử.
Tạo Header Cho Riêng Từng Trang
Bạn có thể nhân đôi header đã tạo và chỉnh sửa nó để dùng riêng cho các trang cụ thể. Ví dụ, header của trang liên hệ có thể chứa thông tin liên lạc hoặc số điện thoại hotline trong khi các trang khác thì không.
Chỉ cần sao chép template trong Divi Theme Builder, gán nó cho trang mong muốn, và tùy chỉnh nội dung.
Một Vài Lời Kết
Việc tạo một header tùy chỉnh trong Divi không quá khó, nhưng đòi hỏi sự cẩn thận và sáng tạo. Hãy nhớ rằng header chính là nơi gây ấn tượng đầu tiên với người dùng, vì vậy hãy thiết kế nó thật ấn tượng và tiện lợi.
Dành thời gian để thử nghiệm các hiệu ứng, bố cục, và tinh chỉnh trên cả desktop lẫn mobile. Khi làm tốt, bạn không chỉ tạo được sự chuyên nghiệp cho website mà còn giữ chân khách truy cập lâu hơn.
Chúc bạn thành công trong hành trình xây dựng website thật đẹp và tối ưu với Divi Theme!