Bạn có muốn thêm một biểu trưng đáp ứng vào mô-đun Trình đơn toàn độ rộng của bạn Divi để nó thích ứng với chế độ xem trên thiết bị di động?
Bạn có biết rằng hơn 50% giao thông Internet đến từ thiết bị di động? Điều này có nghĩa là phiên bản di động của bạn Website là cực kỳ quan trọng và thậm chí có thể là cách chính mà ai đó sẽ truy cập trang của bạn.
Hãy chắc chắn rằng của bạn Website đáp ứng và thân thiện với thiết bị di động là một bước thiết yếu trong việc thiết kế một Website.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm biểu trưng đáp ứng vào mô-đun Menu Fullwidth của bạn bằng cách sử dụng các tùy chọn đáp ứng được tích hợp sẵn của Divi.
Điều này sẽ cho phép bạn thêm một biểu trưng lớn hơn hoặc phức tạp hơn sẽ xuất hiện trên màn hình lớn hơn và một biểu trưng nhỏ hơn hoặc đơn giản hơn sẽ xuất hiện trên màn hình nhỏ hơn.
Hãy bắt đầu nào!
khảo sát
Đây là bản xem trước về những gì chúng tôi sẽ thiết kế. Phiên bản dành cho máy tính để bàn của trang web sẽ có biểu trưng mở rộng với văn bản bổ sung và phiên bản dành cho thiết bị di động của biểu trưng sẽ chỉ có thương hiệu biểu trưng cơ bản.
Những gì bạn cần để bắt đầu
Tất cả trước tiên, cài đặt và kích hoạt chủ đề Divi và đảm bảo rằng bạn có phiên bản mới nhất của Divi trên trang web của bạn. Tiếp theo, hãy đảm bảo bạn có ít nhất hai phiên bản logo của mình: một cho chế độ xem trên máy tính để bàn của trang web và một cho chế độ xem trên thiết bị di động. Cuối cùng, tải xuống mẫu Mẫu đầu trang và chân trang cho gói bố cục trường trung học của Divi.
Bây giờ bạn đã sẵn sàng để bắt đầu!
Làm thế nào để thêm một biểu trưng đáp ứng vào mô-đun tiêu đề băng thông đầy đủ của bạn trong Divi
Tạo mô-đun Tiêu đề đầy đủ độ rộng
Đọc cũng: Divi: Cách hiển thị mô-đun Fullwidth Header trên toàn màn hình
Thêm một phần chiều rộng đầy đủ
Vì menu gốc được xây dựng bằng mô-đun menu tiêu chuẩn, chúng tôi sẽ cần sửa đổi bố cục để thêm mô-đun Tiêu đề đầy đủ độ rộng.
Đầu tiên, hãy thêm một phần đầy đủ độ rộng (Chiều rộng đầy đủ) vào tiêu đề chung trong menu hiện có.
Trong cài đặt phần băng thông đầy đủ, điều hướng đến Nâng caoVà sau đó Hiệu ứng cuộn.
- Vị trí cố định: Bám sát lên đầu
Tiếp theo, thêm màu nền.
- Nền: # f5f0eb
Thêm một màu khác cho nền ở trạng thái dính.
- Nền (Cố định): #ffffff
Thêm mô-đun Tiêu đề có độ rộng đầy đủ
Bây giờ chúng ta hãy thêm mô-đun Fullwidth Header.
Mở cài đặt mô-đun và xóa nền.
Để dễ dàng sao chép giao diện của menu gốc, chúng ta có thể sử dụng tính năng Copy Styles để sao chép một số cài đặt tùy chỉnh.
Mở cài đặt menu chính, sau đó nhấp chuột phải vào Văn bản Menu và chọn Sao chép kiểu văn bản của menu.
Sau khi được sao chép, hãy nhấp vào ba dấu chấm của mô-đun Tiêu đề đầy đủ độ rộng, sau đó chọn Các kiểu văn bản trong menu trước đây.
Bây giờ chúng ta sẽ lặp lại các bước tương tự với cài đặt menu thả xuống.
Lặp lại một lần nữa cho các biểu tượng.
Đặt căn chỉnh văn bản sang phải.
- Căn chỉnh văn bản: phải
Đặt chiều cao tối đa của biểu trưng bên dưới Thiết kếSau đó Sizing.
- Chiều cao tối đa của biểu trưng: 50px
Thêm CSS sau vào phần Liên kết menu trong CSS tùy chỉnh.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
Cuối cùng, điều chỉnh phần đệm trên và dưới.
- Phần đệm trên cùng: 10px
- Phần đệm-dưới: 10px
Bây giờ xóa phần menu gốc.
Thêm biểu trưng đáp ứng
Bây giờ chúng ta sẽ thêm logo đáp ứng. May mắn thay, Divi làm cho điều này trở nên dễ dàng với các tùy chọn phản hồi tích hợp.
Dưới Nội dung, mở cài đặt biểu trưng và tải lên phiên bản máy tính để bàn của biểu trưng của bạn.
Chọn biểu tượng chế độ di động để sử dụng các tùy chọn đáp ứng, sau đó thay thế biểu trưng di động bằng biểu trưng đáp ứng của bạn.
Tạo một trang mới với bố cục được xác định trước
Để xem menu toàn chiều rộng với biểu trưng đáp ứng đ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 thiết kế này, chúng tôi sẽ sử dụng trang chủ trường trung học của Gói bố cục trường trung học để khớp với đầu trang và chân trang.
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 Sử dụng Divi Builder. Vì chúng tôi đã nhập bố cục đầu trang và chân trang dưới dạng đầu trang và chân trang chung, hãy sử dụng bố cục mặc định cho trang này.
Chúng tôi sẽ 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 Duyệt qua các bố cục.
Tìm và chọn bố cục Trang chủ trường trung học.
Sélectionnez Sử dụng bố cục này để thêm bố cục vào trang của bạn.
Kết quả cuối cùng
Bây giờ chúng ta hãy nhìn vào thiết kế cuối cùng của chúng tôi.
Tải DIVI ngay bây giờ !!!
Kết luận
Có một trang web đáp ứng và thân thiện với thiết bị di động quan trọng hơn bao giờ hết. Và nhờ các tùy chọn đáp ứng tích hợp của Divi, việc xây dựng một tùy chọn dễ dàng hơn bao giờ hết!
Với một biểu trưng đáp ứng, nhận diện thương hiệu của bạn sẽ luôn rõ ràng, bất kể kích thước màn hình.
Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn cho các dự án Divi tiếp theo của bạn. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.
Bạn cũng có thể tham khảo tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
