Создание раскрывающегося меню расширенных элегантных тем с помощью конструктора тем Divi

С тех пор, как появился конструктор тем Divi, создание верхних и нижних колонтитулов на наших веб-сайтах с помощью Divi стало проще, чем когда-либо. Все можно настроить, и вы можете получить именно то меню, которое вы задумали, даже не покидая интуитивно понятную среду Divi. В какой-то момент вы могли встретить раскрывающееся меню «Элегантные темы» на нашем веб-сайте. Это раскрывающееся меню представляет собой более продвинутый тип мегаменю, в котором творчески сочетаются значки, текст и призывы к действию. Это позволяет посетителям визуально перемещаться по различным предлагаемым продуктам. Это также превращается в красивое вложенное меню на экранах меньшего размера.

В этом уроке мы покажем вам, как воссоздать это расширенное раскрывающееся меню Elegant Themes внутри Divi Theme Builder. Мы объединим лучшее из обоих миров; мы будем использовать встроенные элементы Divi, чтобы создать основу для наших выпадающих списков и объединить их с некоторым кодом, который помещает выпадающие списки внутри меню WordPress. Вы также сможете бесплатно скачать файл JSON!

Давайте перейдем к этому.

Предварительный просмотр

Прежде чем мы углубимся в руководство, давайте быстро посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Загрузите макет заголовка раскрывающегося меню Advanced Elegant Themes БЕСПЛАТНО

Чтобы получить доступ к бесплатному макету заголовка, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Как загрузить файл JSON

Разархивируйте заархивированную папку, которую вы смогли загрузить выше. Затем перейдите на свой сайт WordPress> Divi> Divi Library и загрузите JSON.

После сохранения макета в библиотеке Divi вы можете перейти к Divi Theme Builder и импортировать сохраненный макет, нажав «Добавить глобальный заголовок» или «Добавить настраиваемый заголовок» и выбрав «Создать глобальный / настраиваемый заголовок». Перейдите на вкладку «Ваши сохраненные макеты» в библиотеке Divi, выберите макет, который вы загрузили на предыдущем шаге, и сохраните все изменения Divi Theme Builder.

Чтобы сразу иметь работающее меню, вам нужно будет пройти первую часть этого урока ниже; добавление классов CSS в пункты меню на индивидуальном уровне. Вам также необходимо включить один из классов CSS внутри модуля кода, как показано в части 5 этого руководства.

1. Добавьте классы CSS в пункты меню

Перейти к меню во внешнем виде

Первая часть этого руководства посвящена настройке пунктов меню WordPress с использованием соответствующих классов CSS. Для этого перейдите в панель управления WordPress> Меню> Создать новое меню или откройте существующее.

Включить параметр класса CSS

Затем в правом верхнем углу экрана вы увидите «Параметры экрана». Включите этот параметр и включите «Классы CSS» в свойствах расширенного меню. Это позволит нам добавлять классы CSS к определенным пунктам меню на индивидуальном уровне.

Добавление последовательных классов CSS в пункты меню, для которых требуется раскрывающийся список

В этом руководстве мы создадим три разных раскрывающихся списка и назначим каждое из них определенному пункту меню. Чтобы запустить этот процесс, нам нужно назначить два разных класса CSS трем пунктам меню, которые мы хотим содержать раскрывающееся меню.

• Первый пункт меню, которому вы хотите назначить раскрывающийся список: first-level first-level-1
• Второй пункт меню, которому вы хотите назначить раскрывающийся список: first-level first-level-2
• Третий пункт меню, который вы хотите назначить раскрывающемуся списку: first-level first-level-3

2. Создайте собственный заголовок с помощью конструктора тем Divi.

Перейти в конструктор тем Divi

После того, как классы CSS для пункта меню созданы, пора переключиться на Divi. Перейдите в конструктор тем Divi и выберите «Добавить глобальный / настраиваемый заголовок».

Начать создание глобального заголовка

Затем выберите «Создать глобальный заголовок» для перенаправления в редактор шаблонов.

Настройки раздела

Фоновый цвет

Внутри шаблона вы заметите раздел. Откройте этот раздел и измените цвет фона.

• Цвет фона: #ffffff

Интервал

Затем удалите все стандартные отступы верхней и нижней части.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Коробка Тень

И также добавьте тонкую тень коробки.

• Вертикальное положение тени блока: 0 пикселей
• Сила размытия тени коробки: 30 пикселей
• Цвет тени: rgba (103,151,255,0.17)

Добавить новую строку

Структура столбца

Продолжите, добавив первую строку в раздел, используя следующую структуру столбцов:

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и измените настройки размера следующим образом:

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Максимальная ширина: 1440 пикселей

Интервал

Затем измените значения верхнего и нижнего отступов в настройках интервала.

• Верхний отступ: 10 пикселей
• Нижний отступ: 10 пикселей

Добавить модуль меню в строку

Выберите меню

Затем добавьте модуль меню в столбец вашей строки и выберите меню WordPress, которое вы изменили в первой части этого руководства.

Загрузить логотип

Затем загрузите логотип.

Настройки текста меню

Перейдите на вкладку дизайна и соответствующим образом измените настройки текста меню:

• Шрифт меню: Lato
• Толщина шрифта меню: полужирный
• Стиль шрифта меню: прописные
• Цвет текста меню: rgba (32,41,47,0,62)
• Размер текста меню: 13 пикселей
• Расстояние между буквами меню: 3 пикселя
• Выравнивание текста: вправо

Параметры раскрывающегося меню

Затем внесите некоторые изменения в настройки раскрывающегося меню.

• Цвет фона выпадающего меню: #ffffff
• Цвет строки выпадающего меню: rgba (0,0,0,0)
• Цвет текста раскрывающегося меню: # 000000
• Цвет фона мобильного меню: # f2f4f5
• Цвет текста мобильного меню: # 000000

Настройки значков

А также настройки иконок.

• Цвет значка корзины покупок: # 000000
• Цвет значка поиска: # 000000
• Цвет значка меню гамбургера: # ff4a9e

Размеры

И завершите настройки модуля, назначив максимальную высоту логотипа для настроек размера.

• Максимальная высота логотипа: 64 пикселя

3. Создайте раскрывающиеся элементы.

Добавить новую строку в раздел

Структура столбца (требуется соответствующее количество раскрывающихся меню)

После того, как ваше меню по умолчанию создано, пришло время создавать раскрывающиеся меню. Для этого мы добавим новую строку, содержащую три столбца одинакового размера. Количество столбцов соответствует количеству выпадающих меню, которые мы создадим.

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и соответствующим образом измените настройки размеров:

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 86%
• Максимальная ширина: Нет

Интервал

Затем удалите все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

CSS-класс

И присвойте строке класс CSS.

• Класс CSS: строка выпадающего меню

Все классы CSS для столбцов

После завершения общих настроек строки откройте каждый столбец по отдельности и назначьте следующий класс CSS:

• Класс CSS: выпадающее меню-столбец

Добавить модуль Blurb # 1 в столбец 1

Добавить содержимое

Пора добавлять модули! Мы начнем с создания первого раскрывающегося меню в первом столбце. Для отображения всех различных продуктов мы будем использовать модуль Blurb от Divi. Добавьте контент по вашему выбору.

Выбрать значок

Затем выберите соответствующий значок.

Добавить ссылку

Также добавьте ссылку на модуль.

Настройки значков

Перейдите на вкладку дизайна и настройте параметры значка следующим образом:

• Цвет значка: # 8f42ec
• Расположение изображения / значка: слева
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 30 пикселей

Настройки текста заголовка

Затем стилизуйте текст заголовка.

• Шрифт заголовка: Lato
• Толщина шрифта заголовка: полужирный
• Стиль шрифта заголовка: прописные
• Цвет текста заголовка: # 8f42ec
• Размер текста заголовка: 16 пикселей
• Интервал между заглавными буквами: 2 пикселя

Настройки основного текста

Вместе с основным текстом.

• Шрифт тела: Lato
• Цвет основного текста: # 999999

Размеры

Мы также следим за тем, чтобы ширина содержимого была «100%».

• Ширина содержимого: 100%

Интервал

Затем мы перейдем к настройкам интервалов и будем использовать разные значения отступов для разных размеров экрана.

• Верхний отступ: 15 пикселей
• Нижний отступ: 15 пикселей
• Левое заполнение: 6% (рабочий стол), 2% (планшет), 3% (телефон)
• Правое заполнение: 6% (рабочий стол), 2% (планшет), 3% (телефон)

Наведите:

• Верхний отступ: 15 пикселей
• Нижний отступ: 15 пикселей
• Левый отступ: 8%
• Правое заполнение: 4%

Анимации

Далее мы удалим анимацию значков по умолчанию в настройках анимации.

• Анимация изображения / значка: без анимации

CSS-класс

Затем мы перейдем на вкладку «Дополнительно» и назначим нашему модулю класс CSS. Каждому модулю в раскрывающемся меню необходим назначенный ему класс CSS, который будет включен в раскрывающееся меню.

• Класс CSS: элемент раскрывающегося меню

Основной элемент CSS

И последнее, но не менее важное: мы завершим настройку модуля, изменив курсор, используя одну строку кода CSS в основном элементе.

cursor: pointer;

Клонировать модуль Blurb x3

Завершив первый модуль Blurb, клонируйте его три раза.

Изменить содержимое и значки

Измените весь контент и значки для каждого дубликата.

Изменить ссылки

Вместе со ссылками.

Клонировать последний рекламный модуль один раз

Продолжите, клонируя последний модуль Blurb в столбце один раз.

Добавить цвет фона

Откройте настройки дублирующего модуля Blurb и измените цвет фона.

• Цвет фона: # f9f9f9

Изменить настройки значков

Измените также настройки значка.

• Цвет значка: # 3b45eb
• Размер шрифта значка: 22px

Изменить настройки текста заголовка

Вместе с настройками текста заголовка.

• Цвет текста заголовка: # 3b45eb
• Размер текста заголовка: 14 пикселей

Изменить контент и ссылку

И, конечно же, контент и ссылка.

Отключить на планшете и телефоне

Второй тип модуля Blurb, который есть в этом раскрывающемся списке, будет виден только на экранах большего размера. Это поможет нам убедиться, что раскрывающееся меню не будет слишком подавляющим на экранах меньшего размера. Чтобы скрыть модуль на экранах меньшего размера, перейдите на вкладку «Дополнительно» и отключите модуль на планшете и телефоне.

Клонировать модуль Blurb x3

Как только ваш второй тип модуля Blurb будет завершен, вы можете клонировать его три раза.

Изменить содержимое и значки

Убедитесь, что вы изменили содержимое и значки для каждого дубликата.

Изменить ссылки

Вместе со ссылками.

Добавить текстовый модуль в столбец 1

Добавить содержимое

Последний модуль, который нам нужен в раскрывающемся меню, - это текстовый модуль. Мы используем текстовый модуль вместо кнопочного, потому что текстовый модуль легче адаптируется к среде с раскрывающимся списком. Добавьте какую-нибудь копию по вашему выбору.

Фоновый цвет

Затем измените цвет фона.

• Цвет фона: # 3776ff

Настройки текста

Перейдите на вкладку дизайна и соответствующим образом измените настройки текста:

• Шрифт текста: Lato
• Толщина шрифта текста: полужирный
• Стиль шрифта текста: прописные.
• Цвет текста: #ffffff
• Расстояние между буквами текста: 3 пикселя
• Выравнивание текста: по центру

Интервал

Также добавьте несколько значений пользовательского интервала.

• Верхнее поле: 20 пикселей
• Нижнее поле: 20 пикселей
• Левая маржа: 4%
• Правая маржа: 4%
• Верхний отступ: 15 пикселей
• Нижний отступ: 15 пикселей

Граница

Затем добавьте закругленные углы к настройкам границы.

• Все углы: 100 пикселей

Коробка Тень

Включите тонкую тень блока.

• Вертикальное положение тени блока: 14 пикселей
• Цвет тени: rgba (0,0,0,0) (по умолчанию), rgba (0,0,0,0.09) (при наведении)

Преобразовать Перевести

При наведении мы хотим, чтобы кнопка слегка приподнялась. Чтобы добавить этот эффект, мы будем использовать некоторые настраиваемые параметры преобразования при наведении курсора.

• Вправо: -3px (при наведении)

CSS-класс

Как и всем другим модулям в нашем раскрывающемся списке, этому модулю нужен следующий класс CSS:

• Класс CSS: элемент раскрывающегося меню

Основной элемент CSS

И мы завершим настройку модуля, изменив курсор, используя одну строку кода CSS в основном элементе.

cursor: pointer;

Удалить столбцы 2 и 3

После того, как вы заполнили первый столбец раскрывающегося меню, вы можете открыть настройки строки и удалить два пустых столбца в строке.

Клонировать первый столбец дважды

Клонируйте первый столбец дважды.

Настроить предметы

И настройте все элементы в двух других раскрывающихся меню, как вам нравится.

4. Добавьте код CSS и JQuery.

Добавить новый модуль кода в столбец строки №1

Теперь, когда у нас есть все элементы раскрывающегося меню, пришло время превратить их в раскрывающееся меню и поместить раскрывающееся меню в соответствующий элемент меню. Добавьте модуль кода в первую строку прямо под модулем меню.

Вставить код CSS

И вставьте следующий код CSS:

<style>
  
/* Enable class below once you're done editing the menu */
  
/*
.dropdown-menu-row {
display: none;
}*/
  
</style>
<style>
  
.et_pb_menu__menu [class*="dropdown-menu-container"] {
position: absolute;
top: 75px;
left: -195px;
background-color: white;
width: 464px;
-webkit-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
-moz-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
border-radius: 20px;
padding-top: 20px;
padding-bottom: 5px;
visibility: hidden;
opacity: 0;
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);     
}
  
.et_pb_menu__menu ul>li:hover [class*="dropdown-menu-container"] {
visibility: visible;
opacity: 1;
}
  
.et_pb_menu__menu [class*="dropdown-menu-container"]:before  {
position: absolute;
left: 195px;
top: -20px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}    
.et_mobile_menu [class*="dropdown-menu-container"] {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   
.et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF4A9E;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.et_mobile_menu [class*="dropdown-menu-container"] {
display: none;
}
  
.et_mobile_menu [class*="dropdown-menu-container"].reveal-items {
display: block;
}
  
.et_mobile_menu {
width: 130%;
margin-left: -15% !important;
min-height: 100vh;
}
</style>

Вставить код JQuery

Мы также используем код JQuery. Убедитесь, что вы поместили этот код между тегами скрипта, как вы можете видеть на экране печати ниже.

jQuery(function($){
$(document).ready(function(){
  
$('.dropdown-menu-column').each(function(i){
  
i = i + 1;
  
var $dropdownMenuItems = $(this).find('.dropdown-menu-item');
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdownMenuItems.wrapAll('<div class="dropdown-menu-container-' + i + '" />');
var $dropdownContainer = $('.dropdown-menu-container-' + i);
$dropdownContainer.insertAfter($mainMenuItem);
  
});
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu [class*="dropdown-menu-container"]');
$firstLevel.off('click').click(function() {
$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 
$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');
var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();
var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  
});    
    
$(".dropdown-menu-row").css('visibility','hidden');
     
$(window).load(function() {
$(".dropdown-menu-row").fadeIn(1000);
});
  
});
});

5. Включите класс CSS, когда закончите настройку меню.

Как только вы закончите настройку всех раскрывающихся элементов, вам останется сделать одно: скрыть всю строку, содержащую элементы раскрывающегося меню. Это, в сочетании с функцией загрузки внутри нашего кода, предотвратит отображение раскрывающихся меню при загрузке страницы. После того, как вы включите этот класс CSS, вы больше не увидите вторую строку внутри Visual Builder, но вы сможете получить к ней доступ в каркасном режиме и / или временно отключить класс CSS при внесении изменений в раскрывающиеся меню. Чтобы включить класс, удалите скобки '/ * * /' в начале и в конце класса CSS.

• Класс CSS: строка выпадающего меню

6. Создание более трех раскрывающихся меню.

Добавление классов CSS в элементы меню во внешнем виде

Если вы ищете способ добавить в свое меню более трех раскрывающихся меню, вам нужно вернуться в свое меню и добавить последовательные классы CSS в четвертый пункт меню.

• Четвертый пункт меню, которому вы хотите назначить раскрывающийся список: first-level first-level-4

Клонировать столбец в конце строки

Затем вернитесь к своему заголовку и клонируйте последний столбец.

Убедитесь, что классы CSS для столбцов и модулей на месте

Убедитесь, что классы CSS столбца и модуля соответствуют новому раскрывающемуся меню, и все готово! Важно всегда выделять новый столбец новому раскрывающемуся меню и соблюдать порядок столбцов в строке. Это означает, что столбец 1 будет выпадающим 1, столбец 2 будет выпадающим 2 и т. Д.

• Класс CSS столбца: dropdown-menu-column
• Модуль CSS Class: dropdown-menu-item

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Последние мысли

В этом уроке мы показали вам, как воссоздать раскрывающееся меню Elegant Themes с помощью Divi Theme Builder. Мы объединили лучшее из обоих миров и использовали встроенные элементы Divi для стилизации всех элементов в нашем раскрывающемся меню, а затем использовали некоторый код для размещения всех раскрывающихся списков внутри соответствующего элемента меню внутри меню WordPress. Вы также смогли бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.