UX/UI tips: cách tạo Header tùy chỉnh bằng Elementor Pro

tao-header-tuy-chinh-bang-elementor

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.

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.

[block_content id=”706″]

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.

cach-tao-header-bang-elementor-pro

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.

header-template-elementor-pro

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).

chon-cau-truc-header

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ả.

[block_content id=”1534″]

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/

Leave a Reply

Your email address will not be published. Required fields are marked *