Tạo Header tùy chỉnh bằng ElementorHeader – là một phần khá quan trọng trên mỗi Website 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 chủ đề WordPress đều có thiết kế tiêu đề khác nhau. Hoặc nó cũng có lượng tùy chỉnh khác nhau tùy theo theme miễn phí hay trả phí.
Nhưng bạn có câu hỏi.
Có cách nào để tạo tiêu đề tùy chỉnh trong WordPress theo ý muốn không?
Có!
Một số trình tạo chủ đề mạnh mẽ như Elementor Pro cung cấp tùy chọn thiết kế tiêu đề kéo và thả.
Vì vậy, nếu bạn đang tìm cách tạo tiêu đề tùy chỉnh mà không cần mã hóa, thì hướng dẫn này là dành cho bạn.
Mục lục bài viết
Khi nào nên tạo Header tùy chỉnh cho WordPress?
Trên thực tế, hầu hết các chủ đề WordPress ngày nay đều cung cấp khá nhiều tùy chọn để bạn tùy chỉnh tiêu đề.
Tuy nhiên, nếu bạn sử dụng Theme miễn phí và có plugin Elementor Pro, bạn có thể tận dụng điều này để xây dựng các tiêu đề được thiết kế độc đáo.
Nó giúp bạn trông khác biệt và chuyên nghiệp hơn nhiều người trong lĩnh vực này
Ví dụ: Mediaworkx đã sử dụng Elementor Pro để tạo tiêu đề rất 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.
Search Engine Optimization - Tối ưu hóa công cụ tìm kiếm (SEO) là quá trình tăng chất lượng và lưu lượng truy cập website bằng cách tăng khả năng hiển thị của website cho người dùng trên Google, Bing, Yahoo,... SEO liên quan tới cải thiện kết quả tìm kiếm không tốn phí. Là một chiến lược Internet marketing, SEO dùng để cải thiện thứ hạng website trên trang kết quả của công cụ tìm kiếm (SERP), nhờ đó tăng lưu lượng truy cập và lượng khách hàng được chuyển đổi từ nguồn này.
Tạo Header cho WordPress bằng Elementor Pro
Để tạo Tiêu đề, trước tiên bạn cần phiên bản Pro của Elementor Pro. Nếu bạn không hiểu nó, hãy đọc bài đánh giá Elementor Pro của tôi.
Tiếp theo làm theo thủ tục đơ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 lựa chọn, nếu thích bạn nhấn Insert để nhập bằng một cú click chuột.
Nếu muốn tạo lại từ đầu, nhấn biểu tượng (đóng) để đóng.
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 Tiêu đề 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 tìm kiếm.
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, nhấn nút +, tiếp tục chọn loại 1/3+2/3 (chuẩn thông dụng 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í,…
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.
Giờ đây, bạn có thể chọn loại nội dung mà tiêu đề được áp dụng, nhưng thường chọn “Toàn bộ trang web” để hiển thị tiêu đề trên mọi trang nhằm đồng bộ hóa thiết kế.
Trong trường hợp bạn chỉ muốn áp dụng tiêu đề cho một trang cụ thể, chỉ cần chọn Trang và điều hướng đến tên trang tương ứng.
Cuối cùng nhấp vào Lưu và đóng để hoàn tất.
Bạn có thể quay lại bất kỳ trang nào trên website để kiểm tra kết quả.
Thiết Kế Website - Thiết kế web chuẩn SEO không chỉ đẹp mắt mà còn mang về nhiều lượt truy cập, nhiều đơn hàng. Và điều quan trọng nhất hiện nay là khi thiết kế website bắt buộc phải chuẩn SEO với Google. Giúp website thân thiện với Google và nhanh lên TOP hơn so với 1 website thông thường. Với đội ngũ thiết kế web luôn chăm chút từ nội dung, chức năng đến cả cách thức vận hành.
Lời kết
Hy vọng rằng thông qua bài viết này, bạn đã học được cách tạo tiêu đề tùy chỉnh bằng cách sử dụng Elementor Pro trên WordPress của mình.
Mình nghĩ nó khá đơn giản nhưng tác dụng của nó đối với UX/UI cho Website của bạn là không thể bàn cãi.
Nếu có bất kỳ thắc mắc hay khó khăn nào trong quá trình thực hiện, hãy để lại ý kiến ở bình luận bên dưới, mình sẽ sớm phản hồi cho các bạn.
Link bài viết UX/UI tips: cách tạo Header tùy chỉnh bằng Elementor Pro: https://imo.com.vn/ux-ui-tips-cach-tao-header-tuy-chinh-bang-elementor-pro/
