Bạn có muốn tạo tiêu đề chung bằng mô-đun Menu Toàn màn hình trong Divi không?
Tiêu đề là một trong những yếu tố quan trọng nhất của bất kỳ Website và là trung tâm của trải nghiệm người dùng. Menu điều hướng cung cấp cho người dùng của bạn ý tưởng về những gì họ có thể mong đợi tìm thấy trên Website và giúp họ định vị thông tin họ cần.
Ngoài ra, thanh menu phụ có thể là không gian tuyệt vời để làm nổi bật lời kêu gọi hành động hoặc khuyến khích một lời đề nghị. Chưa kể rằng tiêu đề là một trong những phần quan trọng nhất của trang web của bạn. Website, vì nó thường xuất hiện trên mọi trang. Đây là cơ hội tuyệt vời để giới thiệu thương hiệu của bạn và tạo tiêu đề phù hợp với thiết kế của phần còn lại trên trang web của bạn.
Các tùy chọn Trình tạo chủ đề của Divi cho phép bạn tạo tiêu đề chung tùy chỉnh và tùy chỉnh giao diện của mô-đun tiêu đề và menu trên toàn bộ trang web của bạn.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo tiêu đề chung bằng cách sử dụng mô-đun menu toàn màn hình của Divi.
Hãy bắt đầu!
khảo sát
Đây là bản xem trước của tiêu đề chung mà chúng tôi sẽ thiết kế.
Mở trình tạo chủ đề
Vì chúng tôi đang xây dựng tiêu đề chung trong ví dụ này, hãy điều hướng đến "Trình tạo chủ đề", bạn có thể tìm thấy phần này trong menu Divi của WordPress. Chọn Thêm tiêu đề chung, sau đó chọn Tạo tiêu đề chung.
Tạo thanh menu phụ
Khi bạn lần đầu tiên mở bố cục tiêu đề chung, nó được tải sẵn một phần thông thường. Chúng tôi sẽ sửa đổi đây thành thanh menu phụ của chúng tôi, sẽ nằm phía trên menu toàn chiều rộng của chúng tôi và bao gồm văn bản gọi hành động và một nút.
Đầu tiên, mở cài đặt phần và thêm màu nền.
- Nền: # 92A8A1
Tiếp theo, phần lề.
- Đỉnh lề bên trong: 0px
- Lề nội bộ dưới cùng: 0px
Bây giờ hãy chèn một hàng. Đối với ví dụ này, chúng tôi sẽ sử dụng bố cục được hiển thị bên dưới.
Trong cài đặt hàng, dưới Định cỡ của tab Kiểu, hãy điều chỉnh độ cao của cột.
- Hài hòa độ cao của cột: CÓ
Tiếp theo, đặt lề Trên và dưới như sau:
- Lề bên trong trên cùng: 5px
- Lề bên trong dưới cùng: 5px
Vì chúng tôi muốn các phần tử tiêu đề phụ được căn chỉnh theo chiều dọc, chúng tôi sẽ thêm một số CSS tùy chỉnh vào phần tử hàng chính.
1.
align-items:center;
Bây giờ dòng của chúng tôi đã được định cấu hình, chúng tôi có thể chèn các mô-đun cho nội dung. Đầu tiên chèn một mô-đun văn bản ở phía bên trái.
Sửa đổi nội dung của văn bản. Đây là nơi hoàn hảo để đưa vào Lời kêu gọi hành động hoặc khuyến khích một đề nghị.
- Văn bản: "Tham gia danh sách gửi thư của chúng tôi để nhận được giảm giá 10% cho đơn hàng của bạn!" »
Truy cập tab Kiểu của mô-đun Văn bản và sửa đổi các tham số như sau:
- Phông chữ “Văn bản”: Poppins
- “Văn bản” Dim Light: Trung bình
- Màu văn bản "Text": #FFFFFF
Tiếp theo, thêm mô-đun Nút ở bên phải.
Thêm văn bản nút.
- Văn bản: "Nhận báo giá miễn phí"
Trong tab Kiểu, căn chỉnh nút ở giữa.
- Căn chỉnh nút: Trung tâm
Bây giờ chúng ta hãy tùy chỉnh sự xuất hiện của nút.
- Sử dụng kiểu tùy chỉnh cho "Nút": Có
- Kích thước văn bản nút: 14px
- Màu văn bản của nút: #FFFFFF
- Nút nền: # 2F5349
- Chiều rộng đường viền nút: 0px
- Nút bán kính đường viền: 50px
- Khoảng cách chữ cái nút: 1px
- Phông chữ nút: Poppins
Thêm mô-đun Menu Toàn màn hình
Bây giờ menu phụ đã được thiết kế, chúng ta có thể chuyển sang menu chính. Chúng tôi sẽ xây dựng menu bằng cách sử dụng mô-đun Menu Toàn màn hình. Thêm phần Toàn màn hình mới vào tiêu đề chung.
Chọn và chèn mô-đun Menu Toàn màn hình
Tiếp theo, chúng tôi sẽ tùy chỉnh cài đặt Menu Toàn màn hình.
- Màu liên kết hoạt động: # 2F5349
- Menu phông chữ: Poppins
- Menu Dim Light: Semi Bold
- Sao chép menu kiểu: TT
- Màu văn bản menu: # 000000
- Màu văn bản của Menu Di chuột: # 2F5349
- Kích thước văn bản trên menu: 15px
- Khoảng cách giữa các chữ cái trong menu: 2px
Thay đổi màu biểu tượng menu bánh hamburger thành màu đen.
- Màu biểu tượng menu bánh hamburger: # 000000
Trước khi thêm logo vào menu, hãy thay đổi các tùy chọn định cỡ. Chúng tôi sẽ sử dụng các tùy chọn đáp ứng tích hợp của Divi để đặt chiều cao tối đa khác cho PC và thiết bị di động.
- Chiều cao logo tối đa trên PC: 3vw
- Chiều cao logo tối đa trên thiết bị di động: 6vw
Bây giờ, hãy thêm logo của bạn vào Menu Toàn màn hình.
Cuối cùng, chúng tôi muốn menu chính vẫn ở đầu màn hình khi người dùng cuộn qua trang web, vì vậy chúng tôi sẽ sử dụng cài đặt dính dính tích hợp của Divi cho việc này.
- Vị trí cố định: Dán trên đầu
Với điều đó, thiết kế tiêu đề toàn cầu của chúng tôi đã hoàn thành.
Tạo một trang mới với bố cục được xác định trước
Để xem trình đơn và tiêu đề có chiều rộng đầy đủ đang hoạt động, hãy tạo một trang mới với bố cục được xác định trước từ thư viện Divi. Đối với ví dụ này, chúng tôi sẽ sử dụng Trang chủ Sàn từ gói cách bố trí tầng.
Thêm một trang mới vào trang web của bạn và đặt tiêu đề cho nó, sau đó chọn tùy chọn Use Divi Builder.
Chúng tôi đang sử dụng bố cục tạo sẵn từ Thư viện Divi cho ví dụ này, vì vậy hãy chọn Chọn bố cục.
Tìm và chọn bố cục “Trang chủ Sàn”.
Chọn "Chọn bố cục" để thêm bố cục vào trang của bạn.
Bây giờ thiết kế đã hoàn thành!
Kết quả cuối cùng
Kết luận
Như chúng tôi đã nói ở trên, tiêu đề và menu điều hướng là trọng tâm của trải nghiệm người dùng trên trang web của bạn. Bây giờ bạn đã thấy việc thiết kế một tiêu đề tổng thể tuyệt đẹp dễ dàng như thế nào với mô-đun "Menu Toàn màn hình" của Divi.
May mắn thay, trình tạo chủ đề của Divi cho phép bạn kiểm soát mọi khía cạnh của menu và tiêu đề trang web của bạn, đồng thời bạn có thể tạo các thiết kế hoàn toàn tùy chỉnh và độc đáo chỉ với một vài cú nhấp chuột.
Bạn đã sử dụng các tùy chọn tiêu đề chung của Divi để tùy chỉnh tiêu đề và menu điều hướng của mình chưa? Hãy cho chúng tôi biết suy nghĩ của bạn trong các bình luận!
