Divi: как создать скользящее и отзывчивое боковое меню

паритет Гаэтан Таффо | Дива, Учебники Divi

Хотите создать скользящее и отзывчивое боковое меню в Divi?

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

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

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

Поэтому в этом уроке мы покажем вам, как создать его с помощью конструктора тем Divi.

Давайте начнем!

обследование

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

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

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

Чтобы начать, перейдите в Theme Builder из меню Divi на панели управления WordPress и нажмите «Добавить глобальный заголовок».

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

Продолжите, выбрав «Создать глобальный заголовок».

Создайте стиль заголовка

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

Фоновый цвет

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

• Фон: rgba (255,255,255,0 XNUMX XNUMX)

расстояние

Перейдите на вкладку «Стиль» и удалите все нижние и верхние поля.

• Вершина внутреннего поля: 0px
• Нижнее внутреннее поле: 0px

Пост

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

• Позиция: Фиксированная
• Расположение: Верхний центр

Добавьте первую строку

Структура колонны

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

калибровка

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

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

расстояние

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

• Пиковая внутренняя маржа: 1%
• Нижнее внутреннее поле: 0px

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

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

display: flex;

align-items: center;

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

Скачать логотип

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

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

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

<spanclass="line line-1"></span>

<spanclass="line line-2"></span>

<spanclass="line line-3"></span>

Фоновый цвет

Измените цвет фона модуля.

• Фон: rgba (0,0,0,0.04 XNUMX XNUMX)

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

Затем перейдите на вкладку «Стиль» и удалите высоту строки текста. Это поможет нам иметь полный контроль над добавленными областями.

• Высота строки текста: 0em

калибровка

Мы собираемся изменить параметры размера модуля.

• Максимальная ширина: 120 пикселей
• Выравнивание текста: вправо

расстояние

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

• Вершина внутреннего поля: 40px
• Нижнее внутреннее поле: 60px
• Левое внутреннее поле: 40 пикселей
• Внутреннее поле справа: 40 пикселей

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

Структура колонны

Следующий ряд! Мы будем использовать эту строку для разработки всего нашего скользящего меню. Используйте следующую структуру столбцов:

Фоновый цвет

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

• Фон: #e7e0e2

Фоновое изображение

Мы также используем узорчатое фоновое изображение. Вы можете использовать фоновый узор по вашему выбору.

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

калибровка

Затем перейдите на вкладку «Стиль» и соответствующим образом измените настройки размера:

• Использовать пользовательскую ширину желоба: Да
• Расстояние между столбцами: 1
• Максимальная ширина: 20 % (рабочий стол), 40 % (планшет), 60 % (телефон).
• Высота: 100вх

расстояние

Также измените настройки интервала для разных размеров экрана.

• Внутренняя маржа Summit: 10 vw (настольный компьютер), 30 vw (планшет), 40 vw (телефон)

граница

И завершите параметры линии, добавив левую границу.

• Ширина левой границы: 10 пикселей
• Цвет левой границы: #24394a
• Стиль левой границы: Двойной

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

Добавить контент

Пришло время добавить первый пункт меню «Текстовый модуль»! Добавьте копию в область содержимого.

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

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

• URL-адрес ссылки на модуль: #

Фоновый цвет

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

• Фон: rgba (216,210,212,0.35 XNUMX XNUMX)

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

Затем перейдите на вкладку Style'3 и измените настройки текста следующим образом:

• Шрифт текста: Домин
• Мягкий светлый текст: Жирный текст
• Цвет текста Текст: #000000
• Текст Размер текста: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Выравнивание текста: по центру

расстояние

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

• Нижнее поле: 1vw (настольный компьютер), 2vw (планшет), 3vw (телефон)
• Пиковое внутреннее поле: 1vw
• Нижнее внутреннее поле: 1vw

Клонировать текстовый модуль (1 модуль на пункт меню)

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

Редактировать содержимое и ссылки модуля Duplicate Text

Отредактируйте содержимое и ссылки каждого модуля Duplicate Text.

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

Добавить копию

Последний модуль, который нам нужен в этом ряду, — это модуль Button. Добавьте копию по вашему выбору.

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

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

• URL ссылки на кнопку: #

Alignement

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

• Выравнивание кнопок: по центру

Настройки кнопки

Продолжите, настроив модуль Button следующим образом:

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 0,7 vw (настольный компьютер), 1,5 vw (планшет), 2,5 vw (телефон)
• Цвет текста кнопки: #000000
• Фоновая кнопка: rgba (0,0,0,0)
• Цвет границы кнопки: #24394a
• Кнопка «Радиус границы»: 0 пикселей
• Расстояние между буквами кнопки: 4 пикселя

• Кнопка шрифта: открыть нет
• Кнопка Soft Light: жирный текст
• Кнопка копирования стиля: TT

расстояние

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

• Верхнее поле: 5vw
• Максимальное внутреннее поле: 1vw (настольный компьютер), 2vw (планшет), 3vw (телефон)
• Внутреннее поле снизу: 1vw (настольный компьютер), 2vw (планшет), 3vw (телефон)
• Внутреннее поле слева: 1,8 vw (настольный компьютер), 3 vw (планшет), 4 vw (телефон)
• Правое внутреннее поле: 1,8 vw (рабочий стол), 3 vw (планшет), 4 vw (телефон)

Добавьте функцию скольжения

Добавить CSS ID в текстовый модуль значка меню

Теперь, когда у нас есть все элементы, пришло время создать эффект адаптивного скользящего меню! Сначала откройте модуль «Текст» (содержащий области) в третьем столбце первой строки и используйте собственный идентификатор CSS на вкладке «Дополнительно». Мы будем использовать этот идентификатор CSS для создания функции щелчка в нашем коде.

• Идентификатор CSS: слайд-в-открытом

Добавьте класс CSS в строку № 2

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

• Класс CSS: слайд-в-меню-контейнер

Измените положение строки № 2

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

• Позиция: Абсолют
• Расположение: вверху справа
• Горизонтальное смещение: -20% (рабочий стол), -40% (планшет), -60% (телефон)

Изменить непрозрачность линии 2

И доведите непрозрачность до 0 в состоянии по умолчанию.

opacity: 0;

Добавьте модуль кода во второй столбец первой строки.

Вставьте CSS-код

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

#slide-in-open{

cursor: pointer;

}

.line{

display: block;

position: absolute;

height: 4px;

width: 100%;

background: #24394A;

border-radius: 9px;

opacity: 1;

-webkit-transition: .1s ease-in-out;

-moz-transition: .1s ease-in-out;

-o-transition: .1s ease-in-out;

transition: .1s ease-in-out;

}

.line-2{

top: 10px;

}

.line-3{

top: 20px;

}

#slide-in-open.open .line-1{

top: 10px;

-webkit-transform: rotate(135deg);

-moz-transform: rotate(135deg);

-o-transform: rotate(135deg);

transform: rotate(135deg);

}

#slide-in-open.open .line-2{

display: none;

}

#slide-in-open.open .line-3{

top: 10px;

-webkit-transform: rotate(-135deg);

-moz-transform: rotate(-135deg);

-o-transform: rotate(-135deg);

transform: rotate(-135deg);

}

.slide-in-menu {

right: 0!important;

opacity: 1!important;

}

.slide-in-menu-container {

-webkit-transition: all0.5s ease !important;

-moz-transition: all0.5s ease !important;

-o-transition: all0.5s ease !important;

-ms-transition: all0.5s ease !important;

transition: all0.5s ease !important;

}

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

Нам также нужно будет добавить немного JQuery для функции щелчка. Убедись, что ты поместите код между тегами скрипта , как вы можете видеть на экране печати ниже:

jQuery (функция ($) { $ ('# слайд-в-открытии'). нажмите (функция () { $ (это). toggleClass ('открыть'); $ ('.слайд-в-меню-контейнер') .toggleClass('слайд-меню'); }); });

Сохранить изменения конструктора тем и отобразить результат на веб-сайте

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

обследование

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

Заключение

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

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

Divi: Как добавить контактную форму в глобальный заголовок

паритет Гаэтан Таффо | Дива, Учебники Divi

Нужно добавить контактную форму в глобальный заголовок?

Когда вы создаете собственный заголовок для своего веб-сайта с помощью конструктора тем Divi, вы обнаруживаете, что ищете идеальный способ добавить CTA (призыв к действию). Один из способов сделать это — добавить раскрывающуюся контактную форму. 

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

В этом уроке мы покажем вам, как создать выпадающую контактную форму, используя Divi и немного кода JQuery и CSS.

Давайте начнем!

обследование

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

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

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

Перейдите в Theme Builder из меню Divi на панели инструментов WordPress и нажмите «Добавить глобальный заголовок».

Выберите «Создать глобальный заголовок».

Создайте стиль заголовка

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

Фоновый цвет

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

• Фон: #FFFFFF

расстояние

Затем удалите верхнее и нижнее внутренние поля по умолчанию из раздела.

• Вершина внутреннего поля: 0px
• Нижнее внутреннее поле: 0px

Shadow box

Также примените легкую коробчатую тень.

• Box Shadow Blue Сила: 50px
• Цвет шрифта субтитров: rgba(0,0,0,0.15)

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

Структура колонны

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

калибровка

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

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

расстояние

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

• Пиковое внутреннее поле: 1vw
• Нижнее внутреннее поле: 1vw

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

Выровняйте все содержимое столбца, добавив одну строку кода CSS к основному элементу строки.

align-items: center;

Z нижний индекс столбца 2

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

• Z-индекс: 12

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

Скачать логотип

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

Alignement

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

• Выравнивание изображения: по центру

калибровка

Также измените ширину.

• Максимальная ширина: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)

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

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

Во второй столбец мы добавим модуль меню.

Предоставление

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

• Стили: по центру

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

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

• Меню шрифтов: открыть нет
• Меню приглушенного света: полужирный шрифт
• Цвет текста меню: #000000
• Размер текста меню: 0,8 vw (настольный компьютер), 2 vw (планшет), 3 vw (телефон)
• Расстояние между буквами меню: 1px

Настройки текста выпадающего меню

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

• Цвет строки выпадающего меню: #007dff

иконки

Изменить цвет значка меню гамбургера.

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

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

Добавить сообщение

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

Фоновый цвет

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

• Цвет фона: #007dff

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

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

• Шрифт текста: Open Sans
• Мягкий светлый текст: полужирный
• Цвет текста Текст: #ffffff
• Текст Размер текста: 0,8 vw (настольный компьютер), 2 vw (планшет), 3 vw (телефон)
• Выравнивание текста: по центру

калибровка

Затем измените параметры размеров модуля.

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

расстояние

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

• Верхнее внутреннее поле: 0,8 vw (настольный компьютер), 2 vw (планшет и телефон)
• Низкая внутренняя маржа: 0,8 vw (настольный компьютер), 2 vw (планшет и телефон)

граница

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

• Прямоугольник со скругленными углами: 100 пикселей

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

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

Давайте перейдем к следующему модулю, еще одному текстовому модулю. Добавьте следующий символ стрелки в области содержимого: «▼».

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

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

• Шрифт текста: Open Sans
• Цвет текста: #007fff
• Текст Размер текста: 3vw
• Высота строки текста: 0em
• Выравнивание текста: по центру

Z-индекс

Давайте также увеличим z-индекс модуля.

• Z-индекс: 11

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

Добавьте поля полной ширины по вашему выбору

Следующий и последний модуль, который нам нужен в третьем столбце, — это модуль контактной формы. Добавьте любые поля полной ширины, которые вам нужны.

Добавить заголовок

Также используйте заголовок.

Фоновый цвет

Далее давайте изменим цвет фона.

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

Настройки поля

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

• Поля цвета фона: #ffffff
• Цвет текста поля: #dddddd
• Цвет текста в фокусе: #007dff
• Поля заполнения вершин: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Нижние поля заполнения: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Поля шрифта: Открыть Нет

• Поля Размер текста: 0,7 vw (рабочий стол), 1,8 vw (планшет), 3 vw (телефон)

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

Отредактируйте настройки текста заголовка.

• Вставьте третий заголовок: H3
• Мягкий свет Заголовок: Жирный текст
• Выравнивание текста: по центру
• Цвет текста заголовка: #007dff
• Размер текста заголовка: 1 vw (рабочий стол), 2,5 vw (планшет), 3,5 vw (телефон).
• Высота строки заголовка: 1,6 см

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

С настройками текста капчи.

• Капча шрифта: Open Sans
• Цвет текста капчи: #007dff

Настройки кнопок

Продолжите, настроив кнопку.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 0,8 vw (настольный компьютер), 2 vw (планшет), 3 vw (телефон)
• Цвет текста кнопки: #ffffff
• Кнопка фона: #007dff
• Кнопка ширины границы: 0 пикселей
• Радиус границы кнопки: 100 пикселей

• Кнопка шрифта: открыть нет
• Кнопка Soft Light: жирный текст

• Маржа кнопки: 1vw
• Верхняя кнопка заполнения: 1vw (рабочий стол), 2vw (планшет и телефон)
• Нижняя кнопка заполнения: 1vw (рабочий стол), 2vw (планшет и телефон)
• Кнопка левой панели: 2vw (рабочий стол), 7vw (планшет и телефон)
• Правая кнопка пэда: 2vw (рабочий стол), 7vw (планшет и телефон)

расстояние

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

• Пиковый внутренний запас: 4vw (настольный компьютер), 6vw (планшет и телефон)
• Внутреннее поле снизу: 4vw (настольный компьютер), 6vw (планшет и телефон)
• Левое внутреннее поле: 2vw (рабочий стол), 6vw (планшет и телефон)
• Правое внутреннее поле: 2vw (настольный компьютер), 6vw (планшет и телефон)

граница

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

• Входной прямоугольник со скругленными углами: 10px

Основной элемент, заголовок контакта и Captcha CSS

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

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

Название контакта:

Капча:

Настройте элементы для создания контактной формы в один клик

Добавьте высоту столбца 3

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

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

таблетка:

Вызов:

Добавьте класс CSS к кнопке и стрелке

Затем мы добавим тот же класс CSS к первым двум текстовым модулям в столбце 3.

• Класс CSS: показать контакт

Добавить класс CSS в форму контакта

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

• Класс CSS: модуль контактной формы

Скрыть модуль контактной формы

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

Добавьте модуль кода в столбец 3 с кодом JQuery и CSS.

А для создания функции клика нам понадобится код JQuery. Мы также будем использовать пользовательский код CSS. Добавьте новый модуль кода в столбец 2 с кодом. Обязательно поместите код JQuery между тегами сценария и код CSS между тегами стиля.

jQuery(function($){

$(".show-contact").click(function() {

$('.contact-form-module').slideToggle();

});

});

.show-contact {

cursor: pointer;

}

.et-menu>li {

padding-left: 0.7vw !important;

padding-right: 0.7vw !important;

}

обследование

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

Заключение

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

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