Bạn có muốn có một Menu Divi Mega với các hình ảnh minh họa nội dung từ thực đơn? Làm theo hướng dẫn của chúng tôi về cách thêm hình ảnh vào Mega Menu?
Chúng tôi thích tương tác với hình ảnh trực tuyến. Với ý nghĩ đó, việc thêm hình ảnh vào Website bất cứ khi nào có thể.
Ngoài ra, thêm hình ảnh trong menu lớn là một cơ hội tuyệt vời khác để cung cấp cho người dùng của bạn sự tương tác mà họ cần.
Hình ảnh cũng nâng cao menu bằng cách thu hút sự chú ý của họ để đơn giản hóa hơn nữa quá trình điều hướng.
khảo sát
Trước khi xem hướng dẫn này, chúng ta hãy xem kết quả mà chúng ta muốn đạt được.
Tạo menu lớn
Để bắt đầu, trước tiên chúng ta cần tạo menu.
Đối với ví dụ này, chúng tôi sẽ tạo một mục menu chính có tên là "Mega Menu" với bốn mục menu con bên dưới. Mỗi mục trong số bốn mục menu phụ có ba mục menu phụ phụ.
Đi tới bảng điều khiển WordPress sau đó nhấp vào Giao diện> Thực đơn
Bấm vào 'Tạo menu mới', đặt tên cho nó và nhấp vào 'Tạo menu'.
Đảm bảo bật thuộc tính menu Lớp CSS bằng cách nhấp vào tab Các lựa chọn ở trên cùng bên phải của màn hình Menu và kiểm tra Các lớp CSS.
Bây giờ bạn có thể thêm các mục menu của mình vào menu mới mà bạn đã tạo.
Đầu tiên, hãy tạo mục menu sẽ là mục gốc của tất cả các mục menu khác. Đây là liên kết sẽ hiển thị menu lớn của bạn khi di chuột.
Để tạo mục menu này, hãy tạo một liên kết tùy chỉnh với các thông số sau:
- URL: http: // #
- Tiêu đề điều hướng: Mega Menu
- Các lớp CSS: mega-menu
Bây giờ sắp xếp / kéo bốn mục menu (mỗi mục có ba mục phụ của riêng chúng) để trở thành các mục phụ của liên kết Mega Menu chính.
Sau khi các liên kết được thêm vào menu, hãy cuộn xuống 'Cài đặt menuở cuối màn hình menu và chọn 'Thực đơn chính' cho vị trí hiển thị. Cuối cùng, nhấp vào 'Lưu menu'
Đây là những gì thực đơn lớn của chúng tôi trông giống như cho đến nay:
Thêm hình ảnh vào menu mega
Bây giờ menu đã sẵn sàng, đã đến lúc thêm hình ảnh.
Đọc cũng: Làm cách nào để nổi các bài đăng trên blog trong DIVI?
Nhận hình ảnh
Bắt đầu bằng cách lấy bốn hình ảnh. Những hình ảnh này phải liên quan đến bốn mục menu con (Giới thiệu, Cung cấp dịch vụ, Công việc của Chúng tôi và Liên hệ với Chúng tôi).
Sử dụng trình chỉnh sửa ảnh để thu nhỏ và cắt từng hình ảnh để có chiều rộng 500px và chiều cao 300px.
Thêm những hình ảnh này vào thư viện WordPress. Bấm vào Phương tiện> Thêm.
Kéo hình ảnh của bạn vào trang để thêm chúng hoặc nhấp vào 'Chọn tệp tin'
Chèn hình ảnh vào Mega Menu
Quay lại trang menu trong bảng điều khiển WordPress.
Trong ví dụ này, liên kết ở đầu cột đầu tiên là " Về ".
Nhấp vào mũi tên ở bên phải của mục " Về ". Trong hộp Nhãn dẫn hướng, thêm hình ảnh mong muốn bằng thẻ html img trực tiếp trước văn bản " Về ". Thẻ hình ảnh sẽ trông như thế này:
<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />
Để tìm url của hình ảnh, hãy truy cập Phương tiện> Thư viện phương tiện, nhấp vào hình ảnh bạn muốn thêm.
Trong màn hình bật lên Chi tiết tệp đính kèm, tìm URL trong phần bên phải, sau đó nhấp vào 'Sao chép URL vào khay nhớ tạm'
Bây giờ quay lại cấu hình mục menu " Về " trên trang menu và thay thế văn bản "Chèn URL hình ảnh" bằng cách dán URL hình ảnh của bạn bằng cách sử dụng ctrl + v.
Trước khi thoát khỏi các tùy chọn cấu hình cho mục menu " Về ", tìm hộp văn bản Lớp CSS và nhập lớp "mega-link".
Điều này sẽ cho phép chúng tôi thêm một kiểu tùy chỉnh sau này.
Lặp lại quá trình này để thêm ba hình ảnh sau vào từng mục trong menu con có lớp "mega-link". (Trong ví dụ này, ba mục còn lại là “Cung cấp dịch vụ”, “Công việc của chúng tôi” et " Liên hệ chúng tôi ".)
Kết quả
Truy cập của bạn website và di chuột qua liên kết menu lớn. Bây giờ mega menu của bạn sẽ trông như thế này:
Lưu ý rằng khi bạn di chuột qua từng hình ảnh, hình ảnh sẽ mờ dần theo mục menu con ngay bên dưới. Điều này là do hình ảnh là một phần của liên kết đó, vì vậy nhấp vào nó sẽ đưa bạn đến URL được liên kết.
Lần chỉnh sửa cuối cùng
Đối với bước cuối cùng này, hãy thêm css tùy chỉnh vào menu để làm cho phông chữ văn bản lớn hơn và căn giữa. Đồng thời cung cấp bán kính đường viền xung quanh hình ảnh để làm cho hình ảnh trông gọn gàng hơn.
Trong bảng điều khiển WordPress, hãy truy cập Divi> Tùy chọn chủ đề .
Cuộn xuống hộp Tùy chỉnh CSS, nhập CSS bên dưới và nhấp vào 'Lưu thay đổi' :
.mega-link > a {
text-align: center;
font-size: 20px !important;
text-transform: uppercase;
font-weight: 400 !important;
letter-spacing: 3px;
}
.mega-link > a img {
margin-bottom: 8px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Kết quả cuối cùng
Bạn đã hoàn thành !
Nếu bạn đã làm theo tất cả các bước trong hướng dẫn này, đây là kết quả bạn sẽ nhận được.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Bạn có một menu Divi mega với hình ảnh mà không cần phải sử dụng plugin. Loại menu này hoạt động đặc biệt tốt cho các trang web. thương mại điện tử người có rất nhiều nội dung và yêu cầu hình ảnh sản phẩm. Chúng tôi hy vọng hướng dẫn này sẽ hữu ích cho các dự án Divi tiếp theo của bạn.
Nếu bạn cần thêm các yếu tố để hoàn thành các dự án tạo trang web của mình, hãy duyệt qua 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.
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ó.
Nhưng trong khi đó, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
