Как создать собственное мегаменю электронной коммерции с помощью конструктора тем Divi

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

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

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

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

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

Рабочий стол

Мобильный

Загрузите макет мегаменю электронной коммерции БЕСПЛАТНО

Чтобы получить доступ к бесплатному макету мегаменю электронной коммерции, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки 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 этого руководства. Если значки отображаются неправильно, убедитесь, что вы проверяете содержимое значков внутри модуля кода. Значки должны содержать содержимое «\ 4c» и «\ 21», как вы можете заметить на экране печати ниже.

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

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

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

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

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

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

Каждому из пунктов меню, которому вы хотите назначить выпадающее мегаменю, нужны два класса CSS. Во-первых, общий класс CSS, который называется «первого уровня». Второй класс CSS содержит порядковый номер в конце: «first-level-1», «first-level-2», «first-level-3» и т. Д.

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

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

Перейдите в Divi Theme Builder и начните создание глобального заголовка

Как только ваши пункты меню готовы, пора переключиться на Divi. Мы создадим новый глобальный заголовок, перейдя в наш конструктор тем Divi и нажав «Добавить глобальный заголовок». Создадим глобальный заголовок с нуля.

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

Интервал

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

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

Видимость

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

Добавить строку №1

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

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

Размеры

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

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

Интервал

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

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

Добавить модуль изображения в столбец 1

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

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

Интервал

Перейдите на вкладку дизайна модуля и добавьте верхнее поле.

• Максимальная маржа: 3%

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

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

Переходим к следующему столбцу. Добавьте текстовый модуль с любым содержимым по вашему выбору.

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

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

• Шрифт текста: Освальд
• Толщина шрифта текста: средний
• Стиль шрифта текста: прописные.
• Цвет текста: # 000000
• Размер текста: 19 пикселей

Интервал

Также добавьте немного верхнего и нижнего поля.

• Максимальная маржа: 5%
• Нижняя маржа: 5%

Клонировать текстовый модуль дважды и размещать дубликаты в столбцах 3 и 4

Изменить копию

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

Добавить раздел # 2

Интервал

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

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

Добавить строку №2

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

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

Размеры

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

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

Интервал

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

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

Граница

Затем перейдите к настройкам границы и примените верхнюю и нижнюю границу.

• Ширина верхней границы:
  • Рабочий стол: 2 пикселя
  • Планшет и телефон: 0 пикселей
• Ширина нижней границы: 2 пикселя
• Цвет границы: # ff6600

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

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

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

Добавить логотип на планшет и телефон

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

Элементы

Мы также включаем значки корзины покупок и поиска.

• Показать значок корзины покупок: Да
• Показать значок поиска: Да

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

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

• Шрифт меню: Oswald
• Стиль шрифта меню: прописные
• Цвет текста меню: # 000000
• Размер текста меню: 19 пикселей

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

Мы также меняем цвет строки раскрывающегося меню.

• Цвет строки раскрывающегося меню: #ffffff

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

Вместе с настройками иконок.

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

CSS-класс

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

• Класс CSS: меню категорий

3. Создайте строку раскрывающегося списка внутри шаблона заголовка.

Добавить новый раздел (посвященный раскрывающемуся списку первого пункта меню)

Размеры

Теперь, когда у нас есть наше меню, пришло время перейти к следующей части руководства, посвященной созданию раскрывающихся списков мегаменю электронной коммерции. Чтобы создать первое выпадающее мегаменю электронной коммерции, мы добавим новый раздел. Откройте настройки раздела и убедитесь, что ширина и максимальная ширина установлены на 100% в настройках размера.

• Ширина: 100%
• Максимальная ширина: 100%

Интервал

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

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

CSS-класс

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

• Класс CSS: dropdown-menu dropdown-menu-1

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

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

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

Фоновый цвет

Еще не добавляя никаких модулей, откройте настройки строки и добавьте белый цвет фона.

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

Размеры

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

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

Интервал

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

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

Граница

И примените нижнюю границу.

• Ширина нижней границы: 2 пикселя
• Цвет нижней границы: # ff6600

Столбцы 1 и 2 Настройки

Затем откройте настройки столбца 1 и 2 по отдельности.

Интервал

Добавьте следующие значения адаптивного заполнения в оба столбца:

• Верхняя обивка:
  • Компьютеры и планшеты: 10%
  • Телефон: 5%
• Нижняя обивка:
  • Компьютеры и планшеты: 10%
  • Телефон: 5%
• Левый отступ: 5%
• Правое заполнение: 5%

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

Вместе с одной строкой кода CSS. Это поможет нам разместить столбцы рядом друг с другом и на экранах меньшего размера.

width: 50% !important

Столбец 3 Настройки

Градиентный фон

Переходим к настройкам столбца 3. Примените следующий градиентный фон:

• Цвет 1: rgba (0,0,0,0.08)
• Цвет 2: # 0a0a0a
• Поместите градиент над фоновым изображением: Да

Фоновая картинка

Затем загрузите фоновое изображение по вашему выбору.

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

И добавьте правое поле к столбцу, используя одну строку кода CSS.

margin-right: 10px !important;

Видимость

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

Столбец 4 Настройки

Градиентный фон

Далее у нас есть четвертый столбец. Добавьте такой же градиентный фон.

• Цвет 1: rgba (0,0,0,0.08)
• Цвет 2: # 0a0a0a
• Поместите градиент над фоновым изображением: Да

Фоновая картинка

Загрузите сюда также фоновое изображение.

Видимость

И спрячьте колонку на планшете и телефоне.

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

Добавить название категории продукта в поле содержимого

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

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

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

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

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

• Шрифт текста: Освальд
• Стиль шрифта текста: прописные.
• Цвет текста: # 000000
• Размер текста:
  • Рабочий стол: 22 пикселя
  • Таблетка: 18 пикселей
  • Телефон: 16px
• Расстояние между буквами текста: -0,6 пикселей
• Высота текстовой строки: 2,4 м

Граница

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

• Ширина нижней границы: 2 пикселя
• Цвет нижней границы:
  • По умолчанию: rgba (0,0,0,0)
  • Наведите указатель мыши: # ff6600

Клонируйте и изменяйте текстовый модуль столько раз, сколько необходимо

Завершив первый, вы можете клонировать его столько раз, сколько захотите, и распределить дубликаты по столбцам 1 и 2.

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

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

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

Добавить название категории продукта

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

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

Добавьте ссылку тоже.

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

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

• Шрифт текста: Освальд
• Толщина шрифта текста: полужирный
• Стиль шрифта текста: прописные.
• Цвет текста: #ffffff
• Размер текста: 3.4vw
• Высота текстовой строки: 1em

Позиция

Переставьте и модуль.

• Позиция: Абсолютная
• Расположение: внизу слева
• Вертикальное смещение: 2%
• Горизонтальное смещение: 2%

Клонировать текстовый модуль в столбец 3 и поместить дубликат в столбец 4

Вы можете клонировать текстовый модуль в столбце 3 и поместить дубликат в столбец 4.

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

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

Клонировать весь раздел для повторного использования в качестве раскрывающегося списка для других пунктов меню

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

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

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

Последовательное изменение классов CSS раздела

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

• Класс CSS: dropdown-menu dropdown-menu-2

• Класс CSS: dropdown-menu dropdown-menu-3

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

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

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

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

Откройте модуль кода и добавьте следующие строки кода CSS между тегами стилей, как вы можете видеть на экране печати ниже :

/* Enable class below once you're done editing the menu */ 
   
/*
.dropdown-menu {
visibility: hidden;
}
*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
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);    
  
position: absolute!important;
top: 75px;
bottom: auto;
left: 0px;
right: auto;
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}

.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
} 

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #FF6600; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF6600;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
.category-menu .et_pb_menu__menu>nav>ul>li {
position: static !important;
}

.category-menu .et_mobile_menu .dropdown-menu {
visibility: visible !important;
}

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

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

jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$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');  

});      
  
});
});

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

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

6. Сохраните изменения Divi Theme Builder.

После того, как вы заполнили глобальный заголовок, обязательно сохраните все изменения Divi Theme Builder, прежде чем просматривать результат на своем веб-сайте!

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

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

Рабочий стол

Мобильный

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

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

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