Как добавить переключатель фиксированной карты в шаблон страницы Divi

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

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

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

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

Рабочий стол

Мобильный

Загрузите шаблон страницы БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

1. Создайте шаблон страницы в Divi Theme Builder.

Перейдите в конструктор тем Divi и добавьте новый шаблон страницы.

Мы начнем это руководство с перехода к Divi Theme Builder и добавления нового шаблона страницы.

Введите область тела шаблона

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

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

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

Интервал

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

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

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

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

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

Размеры

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

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

Интервал

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

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

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

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

3. Создайте фиксированный дизайн булавки карты.

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

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

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

Размеры

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

• Ширина: 90%
• Максимальная ширина:
  • Рабочий стол: 600 пикселей
  • Планшет и телефон: 100%

Интервал

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

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

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

Фоновый цвет

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

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

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

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

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

Также добавьте следующие строки кода CSS к основному элементу столбца:

width: 80% !important;
max-height: 80vh;

Видимость

Затем переведите вертикальный перелив в автоматический режим. Это, в сочетании с максимальной высотой на предыдущем шаге, гарантирует, что полоса прокрутки появится, как только столбец превысит высоту 80vh.

• Вертикальное переполнение: Авто

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

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

Откройте настройки столбца 2 и примените следующую строку кода CSS к основному элементу:

width: 12% !important;

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

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

Размеры

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

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

Интервал

Затем удалите нижнее поле по умолчанию.

• Нижнее поле: 0 пикселей

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

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

Добавьте модуль Blurb под модулем карты в столбце 1. Используйте контент по вашему выбору.

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

Далее выберите значок.

Настройки изображения / значка

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

• Цвет значка: #ffffff
• Расположение изображения / значка: слева

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

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

• Толщина шрифта заголовка: полужирный
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 16 пикселей
• Высота строки заголовка: 1,6 мкм

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

Затем соответствующим образом измените настройки основного текста:

• Цвет основного текста: #ffffff
• Размер основного текста:
  • Рабочий стол: 16 пикселей
  • Таблетка: 14 пикселей
  • Телефон: 13px
• Высота линии корпуса: 1,8 м

Интервал

Также примените следующие значения заполнения:

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

Анимация

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

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

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

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

Переходим к столбцу 2. Там мы добавим модуль Blurb без содержимого.

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

Далее выберите значок.

Фоновый цвет

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

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

Настройки изображения / значка

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

• Цвет значка: #ffffff
• Размещение изображения / значка: вверху
• Выравнивание изображения / значка: по центру
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 25 пикселей

Размеры

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

• Ширина: 70 пикселей
• Высота: 70 пикселей

Интервал

Затем удалите нижнее поле по умолчанию.

• Нижнее поле: 0 пикселей

Коробка Тень

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

• Горизонтальное положение тени блока: 6 пикселей
• Положение прямоугольной тени по вертикали: 6 пикселей
• Цвет тени: rgba (0,0,0,0.3)

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

Затем перейдите на вкладку «Дополнительно» и используйте следующие строки кода CSS для основного элемента:

display: flex;
justify-content: center;
align-items: center;

И добавьте эту строку кода CSS в поле Blurb Image:

margin-bottom: 0;

4. Добавить функцию переключения

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

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

• Класс CSS: map-toggle-row

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

Откройте модуль Blurb в следующем столбце 2 и используйте следующий класс CSS:

• Класс CSS: переключение карты

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

Затем добавьте модуль кода под модулем Blurb в столбце 2.

Добавить теги стиля и сценария

Поместите теги стиля и сценария в поле кода.

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

Мы используем следующий код CSS внутри тегов стиля:

.map-toggle-row {
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.reveal-map{
left: 0 !important;
}

.map-toggle {
cursor: pointer;
}

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

И следующий код JQuery внутри тегов скрипта:

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

var toggleIcon = $('.map-toggle');
var toggleRow = $('.map-toggle-row');

toggleIcon.click(function(){
toggleRow.toggleClass('reveal-map');
});

});
});

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

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

• Позиция: фиксированная
• Расположение: слева по центру
• Горизонтальное смещение:
  • Рабочий стол: -500 пикселей
  • Планшет и телефон: -72%
• Индекс Z: 11

5. Сохраните изменения Конструктора страниц и тем.

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

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

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

Рабочий стол

Мобильный

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

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

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