Хотели бы вы иметь мега-меню Divi с изображениями, иллюстрирующими содержание из меню? Следуйте нашему руководству о том, как добавлять изображения в мега-меню?
Мы любим взаимодействовать с изображениями в Интернете. Имея это в виду, имеет смысл добавить изображение в Веб-сайт при любой возможности.
Кроме того, добавление изображений в мегаменю — еще одна отличная возможность дать вашим пользователям необходимое взаимодействие.
Изображения также улучшают меню, привлекая их внимание и еще больше упрощая процесс навигации.
обследование
Прежде чем мы перейдем к этому уроку, давайте посмотрим на результат, которого мы хотим достичь.
Создание мега меню
Для начала нам нужно создать меню.
Для этого примера мы создадим пункт главного родительского меню с именем “Мега Меню” с четырьмя пунктами подменю ниже. Каждый из четырех пунктов подменю имеет три пункта подменю.
Перейдите в панель управления WordPress, затем нажмите Появления> Меню
Cliquez-сюр- «Создать новое меню», дайте ему имя и нажмите на «Создать меню».
Обязательно включите свойство меню CSS Classes, нажав на вкладку Опции в правом верхнем углу экрана меню и проверка CSS классы.
Теперь вы можете добавить пункты меню в созданное вами новое меню.
Давайте сначала создадим пункт меню, который будет родительским для всех остальных пунктов меню. Это ссылка, которая будет отображать ваше мегаменю при наведении.
Для создания этого пункта меню создайте пользовательскую ссылку со следующими параметрами:
- URL-адрес: http://#
- Навигационное название: Мегаменю
- Классы CSS: мегаменю
Теперь расположите/перетащите четыре пункта меню (каждый с тремя собственными подпунктами), чтобы они стали подпунктами основной родительской ссылки Мегаменю.
Как только ссылки будут добавлены в меню, прокрутите вниз до «Réglages du меню' в нижней части экрана меню и выберите 'Главное меню' для расположения дисплея. Наконец, нажмите на «Сохранить меню»
Вот как выглядит наше мегаменю на данный момент:
Добавление изображений в мегаменю
Теперь, когда меню готово, пришло время добавить изображения.
Читайте также: Как размещать сообщения блога в DIVI?
Получить изображения
Начните с получения четырех изображений. Эти изображения должны относиться к четырем пунктам подменю (О нас, предоставление услуг, наша работа и контакты).
Используйте фоторедактор, чтобы уменьшить масштаб и обрезать каждое изображение до 500 пикселей в ширину и 300 пикселей в высоту.
Добавьте эти изображения в библиотеку WordPress. Нажмите на Медиа > Добавить.
Перетащите изображения на страницу, чтобы добавить их, или нажмите 'Выбрать файлы"
Вставка изображений в Мегаменю
Вернитесь на страницу меню в панели управления WordPress.
В этом примере ссылка в верхней части первого столбца " О ".
Щелкните стрелку справа от элемента " О ". В поле Метка навигации добавьте нужное изображение с помощью тега html. IMG прямо перед текстом " О ". Тег изображения должен выглядеть так:
<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />
Чтобы найти URL-адрес изображения, перейдите на Медиа > Медиатека, щелкните изображение, которое хотите добавить.
Во всплывающем окне Сведения о вложении, найдите URL-адрес в правом разделе, затем нажмите «Скопировать URL в буфер обмена»
Теперь вернитесь к настройке пункта меню. " О " на странице меню и заменить текст "Вставить URL-адрес изображения" вставив URL-адрес вашего изображения, используя ctrl + v.
Перед выходом из параметров настройки пункта меню " О ", найдите текстовое поле «Классы CSS» и введите класс «мега-ссылка».
Это позволит нам позже добавить собственный стиль.
Повторите этот процесс, чтобы добавить следующие три изображения в каждый из пунктов подменю с классом «мега-ссылка». (В этом примере оставшиеся три элемента равны «Оказание услуг», «Наша работа» et " Связаться с нами ".)
Результат
Доступ к вашему сайт и наведите курсор на ссылку мегаменю. Теперь ваше мегаменю должно выглядеть так:
Обратите внимание, что когда вы наводите курсор на каждое из изображений, изображения исчезают с элементом подменю непосредственно под ним. Это связано с тем, что изображение является частью этой ссылки, поэтому, нажав на него, вы перейдете к соответствующему URL-адресу.
Последние штрихи
Для этого последнего шага добавьте в меню пользовательский CSS, чтобы сделать текстовый шрифт больше и отцентровать. Также задайте радиус границы вокруг изображения, чтобы оно выглядело чище.
В панели управления WordPress перейдите к Divi> Параметры темы .
Прокрутите вниз до поля Пользовательский CSS, введите CSS ниже и нажмите 'Сохранить изменения' :
.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;
}
Конечный результат
Вы закончили!
Если вы выполнили все шаги в этом руководстве, вот результат, который вы должны получить.
Скачайте DIVI прямо сейчас!!!
Заключение
У вас есть мегаменю Divi с изображениями без использования плагина. Этот тип меню особенно хорошо подходит для веб-сайтов. электронная коммерция у кого много содержание и требуйте изображения продуктов. Мы надеемся, что это руководство будет полезно для ваших следующих проектов Divi.
Если вам нужно больше элементов для завершения проектов по созданию веб-сайтов, также просмотрите наше руководство на Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
А между тем, поделитесь этой статьей в разных социальных сетях.
...
