Header là một phần khá quan trọng trên mọi Website nhằm giúp người dùng của bạn dễ dàng điều hướng đến vị trí bạn mong muốn.
Trên thực tế, mỗi theme WordPress đều có những cách thiết kế header khác nhau. Hoặc nó cũng có số lượng tùy chỉnh khác nhau tùy vào theme miễn phí hoặc trả phí.
Nhưng bạn có thắc mắc.
Liệu có cách nào để tạo header tùy chỉnh trên WordPress theo ý muốn không?
Có!
Một số trình tạo chủ đề mạnh mẽ như Elementor Pro cung cấp lựa chọn thiết kế phần đầu trang (header) chỉ bằng thao tác kéo thả.
Vì vậy, nếu như bạn đang tìm cách tạo một header tùy chỉnh theo ý muốn mà không cần viết mã thì hướng dẫn này sẽ dành cho bạn.
Khi nào nên tạo Header tùy chỉnh cho WordPress?
Thật ra hầu hết theme WordPress hiện nay đều cung cấp khá nhiều lựa chọn cho bạn tùy biến header.
Tuy nhiên nếu như bạn dùng một Theme miễn phí và có plugin Elementor Pro thì có thể tận dụng lợi thế này nhằm xây dựng những phần đầu trang có thiết kế độc đáo.
Nó giúp bạn trông khác biệt và chuyên nghiệp hơn so với nhiều người trong lĩnh vực
Ví dụ Mediaworkx đã sử dụng Elementor Pro để tạo ra header vô cùng chuyên nghiệp với các yếu tố logo, điều hướng và nút CTA được nhấn mạnh.
Tạo Header cho WordPress bằng Elementor Pro
Để tạo Header thì trước tiên bạn cần có phiên bản Pro của Elementor Pro. Nếu như bạn chưa hiểu rõ về nó hãy đọc đánh giá Elementor Pro của mình.
Tiếp theo hãy thực hiện theo quy trình đơn giản dưới đây.
Bước 1: Kích hoạt Header template
Bây giờ bạn hãy đi đến trình tạo chủ đề bằng cách chọn Templates -> Theme Builder -> Add New.
Sau đó chọn Header, đặt tên và nhấn Create template.
Lúc này sẽ có một số mẫu Header cho bạn chọn, nếu thích hãy nhấn Insert để nhập với một cú click chuột.
Nếu bạn muốn tạo từ đầu hãy nhấn biểu tượng (close) để đóng lại.
Với hướng dẫn này mình sẽ thực hiện từ đầu để bạn dễ dàng hình dung ra cách trình tạo header hoạt động.
Bước 2: Tạo bố cục
Bây giờ hãy tạo cấu trúc cho Header của bạn.
Thông thường nó sẽ là Logo và Menu điều hướng, đôi khi bạn cũng có thể thêm nút hồ sơ xã hội, nút giỏ hàng hoặc thanh search.
Cá nhân mình thường chọn dạng logo bên trái, menu bên phải.
Theo cấu trúc này hãy nhấn vào nút dấu +, tiếp tục chọn loại 1/3+2/3 (tiêu chuẩn phổ biến nhất).
Bước 3: Thêm phần tử cho header
Bây giờ bạn sẽ thấy cấu trúc được tạo.
Hãy nhìn bên trái, bạn có một số widget thiết kế, trong đó hãy chú ý cho mình 3 mục phổ biến:
- Site Logo: Logo của website
- Site title: Tiêu đề của Website
- Nav menu: Menu của Website
- Search: Thanh tìm kiếm
Và các giá trị này đặc biệt ở chỗ nó được lấy tự động từ thiết lập tổng thể trên Website của bạn mà không cần tùy chỉnh thủ công.
Trong ví dụ này mình lấy logo và điều hướng.
Với Nav menu bạn có thể tùy chọn menu mà bạn đã tạo trong Appearance -> Menu.
Bước 4: Tùy chỉnh
Bây giờ bạn có thể thỏa sức tùy chỉnh header của mình như màu sắc, màu nền, hiệu ứng rể chuột, kích thước chữ, vị trí,…
Ví dụ mình cho điều hướng căn phải:
Hoặc chọn chữ có màu cam:
Ngoài ra còn rất nhiều thứ mà bạn tha hồ vọc vạch, miễn bạn có đủ am hiểu về Elementor và trải nghiệm người dùng.
Bước 5: Xuất bản Header
Để Header của bạn xuất hiện trên website, bạn cần phải kích hoạt điều kiện hiển thị cho nó.
Để làm điều này hãy nhấp vào nút Update ở góc dưới bên trái.
Chọn Add condition.
Bây giờ bạn có thể chọn những loại nội dung được áp dụng header, tuy nhiên thường thì sẽ chọn “Entire site” để hiện trên mọi trang để đồng bộ thiết kế.
Trường hợp bạn chỉ muốn áp dụng header cho một trang cụ thể thì chỉ cần chọn Page và tìm đến tên trang tương ứng.
Cuối cùng nhấn Save & close để hoàn tất.
Bạn có thể quay lại một trang bất kỳ trên website để kiếm tra thành quả.
Lời kết
Hy vọng qua bài viết này bạn đã biết được các tạo một header tùy chỉnh bằng Elementor Pro trên WordPress của mình.
Mình cho rằng nó khá đơn giản nhưng hiệu quả của nó đối với UX/UI cho Website của bạn thì không thể bàn cải.
Nếu có thắc mắc hoặc khó khăn nào trong quá trình thực hiện hãy để lại ý kiến trong comment bên dưới, mình sẽ phản hồi sớm cho bạn.
