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

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

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

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

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

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

Рабочий стол

Мобильный

Загрузите The Global Header БЕСПЛАТНО

Чтобы получить доступ к бесплатному глобальному заголовку, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки 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 в пункт меню блога.

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

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

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

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

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

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

• Классы CSS: первый уровень, первый уровень-1

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

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

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

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

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

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

Фоновый цвет

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

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

Интервал

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

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

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

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

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

Размеры

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

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

Интервал

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

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

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

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

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

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

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

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

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

• Шрифт меню: Roboto Mono
• Стиль шрифта меню: прописные
• Цвет текста меню: # 000000
• Размер текста меню: 18 пикселей
• Расстояние между буквами меню: -1px

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

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

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

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

Затем измените цвет значка меню гамбургера в настройках значков.

• Цвет значка меню гамбургера: # 000000

CSS-класс

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

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

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

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

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

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

Фоновый цвет

Откройте настройки строки и используйте белый цвет фона.

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Ширина: 80vw (рабочий стол), 100% (планшет и телефон)
• Макс.ширина: 50 Вт (рабочий стол), 100% (планшет и телефон)

Интервал

Затем измените значения заполнения.

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

Коробка Тень

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

• Сила размытия тени коробки: 30 пикселей
• Цвет тени: rgba (0,0,0,0.13) (рабочий стол), rgba (0,0,0,0) (планшет и телефон)

CSS-класс

Затем мы добавим в нашу строку два класса CSS. Эти классы CSS (в сочетании с некоторым кодом позже) помогут нам разместить весь контейнер строки внутри пункта меню блога в виде раскрывающегося списка.

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

Позиция

Перейдите на вкладку «Дополнительно» и также измените положение строки.

• Позиция: абсолютная (компьютер), относительная (планшет и телефон)
• Расположение: вверху справа
• Вертикальное смещение: 100 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Индекс Z: 11

Оба столбца - главный элемент

И последнее, но не менее важное: завершите настройки строки, добавив по одной строке кода CSS к основному элементу каждого столбца. Это поможет нам сохранить структуру столбцов на экранах меньшего размера.

width: 50% !important;

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

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

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

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

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

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

Затем примените следующий градиентный фон:

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

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

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

• Размер фонового изображения: фактический размер
• Повтор фонового изображения: повторить X (по горизонтали)

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

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

• Шрифт текста: Roboto Mono
• Толщина шрифта текста: полужирный
• Цвет текста: #ffffff
• Размер текста: 1.9vw (рабочий стол), 3vw (планшет), 3.5vw (телефон)
• Расстояние между буквами текста: -0,1vw
• Высота текстовой строки: 1em

Размеры

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

• Ширина: 99%
• Выравнивание модуля: слева

Интервал

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

• Нижнее поле: 10 пикселей
• Правая маржа: 1% (планшет и телефон)
• Верхнее заполнение: 60% (настольный компьютер), 40% (планшет и телефон)
• Нижняя обивка: 4%
• Левый отступ: 2%

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

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

cursor: pointer;

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

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

Изменить текстовый модуль в столбце 2

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

Измените заголовок категории и ссылку в дублирующем модуле.

Изменить фоновое изображение

Измените также фоновое изображение. Вы можете найти иллюстрацию в папке для загрузки.

• Повтор фонового изображения: без повтора

Изменить размер

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

• Выравнивание модуля: справа

Клонировать оба модуля один раз

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

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

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

Изменить фоновые изображения

Вместе с фоновыми изображениями. Вы можете найти новые иллюстрации в папке, которую вы смогли скачать в начале этого поста.

• Размер фонового изображения: По размеру
• Повтор фонового изображения: без повтора

• Размер фонового изображения: По размеру
• Расположение фонового изображения: внизу справа

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

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

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

Добавить код CSS

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

<style>
/* 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);  
}
  
.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: #00C995; 
}  
  
.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: '\37';
color: black;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\36';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
visibility: visible;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
</style>

Добавить код JQuery

Наряду с некоторым кодом 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 Builder и откройте настройки повторяющейся строки.

Изменить повторяющийся класс CSS строки

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

• Класс CSS: раскрывающееся меню dropdown-menu-2

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

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

• Классы CSS: первый уровень, первый уровень-2

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

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

Рабочий стол

Мобильный

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

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

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