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

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

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

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

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

Рабочий стол

Мобильный

Загрузите шаблон глобального заголовка БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

1. Построить структуру заголовка

Создать новый шаблон глобального заголовка

Начните с перехода к Divi Theme Builder и начните создавать новый глобальный или настраиваемый заголовок.

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

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

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

• Цвет 1: #ffffff
• Цвет 2: #eaeaea
• Тип градиента: линейный
• Направление градиента: 90 градусов
• Стартовая позиция: 50%
• Конечная позиция: 50%

Интервал

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

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

Коробка Тень

Также добавьте тень от коробки.

• Цвет тени: rgba (0,0,0,0.06)

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

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

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

Размеры

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

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

Интервал

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

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

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

Затем перейдите на вкладку «Дополнительно» и примените несколько строк пользовательского кода CSS основного элемента для разных размеров экрана. Этот код поможет нам вертикально центрировать элементы на рабочем столе.

Рабочий стол:

display: flex;
place-items: center;

Планшет и телефон:

display: block;

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

Интервал

Затем откройте настройки столбца 1 и примените отступы слева и справа.

• Левый отступ: 5%
• Правое заполнение: 5%

Главный элемент

Мы меняем размер нашего столбца на рабочем столе и возвращаем его к «100%» на планшете и телефоне, применяя некоторый собственный CSS к основному элементу столбца.

Рабочий стол:

width: 88% !important

Планшет и телефон:

width: 100% !important;

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

Фоновый цвет

Затем мы откроем настройки столбца 2 и изменим цвет фона на белый.

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

Интервал

Мы также добавим некоторые значения адаптивного заполнения в настройки интервала этого столбца.

• Верхняя обивка:
  • Рабочий стол: 50 пикселей
  • Планшет и телефон: 20 пикселей
• Нижняя обивка
  • Рабочий стол: 50 пикселей
  • Планшет и телефон: 20 пикселей
• Отступ слева: 1%
• Правый отступ: 1%

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

Мы также изменим размер второго столбца на рабочем столе. Мы возвращаем это значение к «100%» на экранах меньшего размера.

Рабочий стол:

display: flex;
place-items: center;
width: 12% !important;

Планшет и телефон:

width: 100% !important;

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

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

Пора добавлять модули, начиная с модуля меню в столбце 1. Выберите меню по вашему выбору.

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

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

Удалить цвет фона

Затем удалите цвет фона по умолчанию.

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

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

• Шрифт меню: Playfair Display
• Шрифт текста меню: Playfair Display
• Цвет текста меню: # 000000
• Размер текста меню: 19 пикселей
• Высота строки меню: 1.4em
• Выравнивание текста: вправо

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

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

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

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

Также измените цвета значков в настройках значков.

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

Размеры

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

• Максимальная ширина логотипа: 200 пикселей
• Ширина: 100%
• Выравнивание модуля: по центру

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

Оставьте поле содержимого пустым

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

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

Затем выберите значок по вашему выбору.

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

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

• Цвет значка
  • По умолчанию: #dbdbdb
  • Наведите: # 000000
• Расположение значков: вверху
• Выравнивание значка: по центру
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 200%

Размеры

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

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

CSS для основного элемента и размытого изображения

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

Главный элемент:

display: inline-block;

Вставка изображения:

margin-bottom: 0px !important

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

После того, как вы завершили первый переключатель Blurb Module, вы можете клонировать его дважды.

Изменить значок

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

2. Добавить переключаемые элементы

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

Размеры

Теперь, когда мы заложили основу нашего заголовка, нам все еще нужно включить переключаемые элементы. Для этого мы добавим новый раздел прямо под предыдущим. Откройте настройки раздела и убедитесь, что высота этого раздела равна «0 пикселей». Это поможет нам не допустить, чтобы этот раздел занимал место в дизайне нашего заголовка. Единственная причина, по которой нам нужен этот раздел, - показать наши переключаемые элементы.

• Высота: 0 пикселей

Интервал

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

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

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

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

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

Размеры

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

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

Интервал

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

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

Позиция

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

• Позиция: Абсолютная
• Расположение: верхний правый угол

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

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

Пора добавить переключаемые элементы! Сначала мы добавим номер телефона. Добавьте новый текстовый модуль в столбец 2 и вставьте номер телефона в поле содержимого.

Фоновый цвет

Затем добавьте черный цвет фона.

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

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

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

• Шрифт текста: Playfair Display
• Цвет текста: #ffffff
• Размер текста: 27 пикселей
• Выравнивание текста: по центру

Размеры

Убедитесь, что ширина тоже 100%.

• Ширина: 100%

Интервал

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

• Верхняя набивка: 10%
• Нижняя обивка: 10%
• Левый отступ: 2%
• Правое заполнение: 2%

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

После того, как вы завершили работу с первым элементом переключения Text Module, клонируйте его один раз.

Изменить содержимое на адрес электронной почты

Измените содержимое в поле содержимого.

Добавить модуль "Социальные сети" в столбец 2

Добавьте предпочтительные социальные сети

Затем добавьте модуль отслеживания социальных сетей в столбец 2. Добавьте столько социальных сетей, сколько хотите.

Измените цвет фона каждой социальной сети на белый

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

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

Фоновый цвет

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

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

Выравнивание

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

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

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

Также измените цвет значка в настройках значков.

• Цвет значка: # 000000

Размеры

Затем примените ширину «100%» к настройкам размера.

• Ширина: 100%

Интервал

Также примените пользовательские отступы сверху и снизу.

• Верхняя набивка: 10%
• Нижняя обивка: 10%

Граница

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

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

3. Добавить функциональность

Добавление последовательных идентификаторов CSS в модули Blurb в первом разделе

Теперь, когда все элементы на месте, мы можем начать добавлять эффект переключения. Первое, что вам нужно сделать, это открыть каждый модуль Blurb по отдельности и добавить последовательный идентификатор CSS.

• Вставка 1: header-cta-1
• Вставка 2: заголовок-cta-2
• Вставка 3: заголовок-cta-3

Добавить последовательные идентификаторы CSS для переключения элементов

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

• Текстовый модуль 1: заголовок-элемент-1
• Текстовый модуль 2: заголовок-2
• Модуль подписки на социальные сети: header-item-3

Добавить абсолютное положение ко всем элементам переключения

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

• Позиция: Абсолютная
• Расположение: вверху справа

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

Теперь, когда все идентификаторы CSS установлены, мы можем добавить код, чтобы функция щелчка работала. Добавьте новый модуль кода прямо под модулем меню в столбце 1.

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

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

[id*="header-cta"]{
cursor: pointer;
}
[id*="header-item"] {
visibility: hidden;
opacity: 0;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-item {
visibility: visible;
opacity: 1;
}
.highlight-icon{
color: #000 !important;
}

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

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

jQuery(function($){
$(document).ready(function(){
 
$('[id*="header-cta"]').click(function() {
 
var $selector = $(this).attr('id').replace('cta', 'item');
var $item = $('#' + $selector);
 
$item.toggleClass('show-item');
$('[id*="header-item"]').not($item).removeClass('show-item');

var $icon = $(this).find('.et-pb-icon');
var $allIcons = $('[id*="header-cta"]').find('.et-pb-icon');
  
$icon.toggleClass('highlight-icon');
$allIcons.not($icon).removeClass('highlight-icon');
  
});
 
});
});

4. Сделайте заголовок и переключение элементов липкими.

Сделать раздел №1 липким

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

• Липкая позиция: придерживаться верха
• Нижний предел липкости: нет
• Смещение от окружающих липких элементов: Да
• Стандартные стили перехода и закрепленные стили: Да

Сделать раздел № 2 липким

И проделайте то же самое с разделом 2. Вот и все!

• Липкая позиция: придерживаться верха
• Нижний предел липкости: нет
• Смещение от окружающих липких элементов: Да
• Стандартные стили перехода и закрепленные стили: Да

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

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

Рабочий стол

Мобильный

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

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

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