Модуль Карта Divi

Как добавить, настроить и адаптировать под свои требования модуль Divi — Карта.

Модули карт позволяют легко встраивать пользовательские Карты Google в любое место на вашей странице. Вы даже можете добавлять на карту неограниченное количество булавок и определять начальную точку пользовательского окна просмотра. Модули карт также имеют формат Full Width, так что не забудьте проверить и это!

Ключ API Карт Google

Ключ API необходим для использования модуля Maps. Чтобы получить ключ API, войдите в консоль разработчика Google, которая проведет вас через процесс и автоматически активирует Google Maps JavaScript API и любые связанные службы. Первое, что вас попросят сделать, — это создать новый проект.

Далее вам будет предложено назвать ваш проект. Вы можете назвать проект как угодно. В этом примере я просто назвал его «Карты». Вы также можете ввести имя домена своего веб-сайта (добавьте * перед ним, если вы разрешаете доступ как с www.domain.com, так и с domain.com), чтобы убедиться, что ваш ключ API разрешен для других веб-сайтов.

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

После того, как вы получили ключ API, вы должны скопировать / вставить его на панель параметров темы, перейдя по ссылке: Divi >> Параметры темы >> Общие настройки >> Ключ API Карт Google.

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

Прежде чем вы сможете добавить модуль карта на свою страницу, вам сначала нужно перейти в Divi Builder. После установки темы Divi на ваш веб-сайт вы увидите кнопку «Использовать Divi Builder» над текстовым редактором страницы каждый раз, когда создаете новую страницу. Нажатие этой кнопки активирует Divi Builder, предоставляя вам доступ ко всем модулям Divi Builder. Затем выберите один из трёх вариантов, чтобы запустить редактор страницы в визуальном режиме. Вы также можете нажать кнопку «Включить Visual Builder» при просмотре веб-сайта в интерфейсе пользователя, если вы вошли в свою панель управления WordPress.

После того, как вы вошли в Visual Builder, вы можете нажать серую кнопку с плюсом, чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы создаете новую страницу, не забудьте сначала добавить строку на свою страницу. У нас есть несколько уроков о том, как использовать строки и разделы Divi .

Найдите модуль карта в списке модулей и щелкните его, чтобы добавить на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «карта», а затем нажать клавишу ВВОД, чтобы автоматически найти и добавить модуль отзывов! После добавления модуля вы увидите список его параметров. Эти параметры разделены на три основные группы: Контент, Дизайн и Расширенный.

Пример использования: добавление модуля карты на страницу контактов

Модуль карты — отличный способ продемонстрировать местонахождение вашей компании на странице контактов. А возможность добавить несколько булавок на карту, чтобы продемонстрировать различные местоположения компании и информацию, является полезной и интересной функцией.

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

Важно: убедитесь, что на панели параметров темы Divi введен действительный ключ Google API. Без него модуль карты работать не будет.

Используя Visual Builder, добавьте стандартный раздел внизу страницы контактов. Затем вставьте модуль карты в свой новый раздел. На вкладке «Содержимое» в настройках карты введите адрес своей компании в поле «Адрес центра карты». Адрес центра карты предназначен для центральной точки карты.

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

Заголовок: [введите названиеместоположения]
Body: [введите содержимое метки, например: адрес и номер телефона]
Адрес пункта на карте: [введите адрес]

Сохраните настройки

Готово! Теперь у вас есть модуль динамической карты в нижней части страницы контактов с интерактивной булавкой, на которой отображается информация о компании.

Вкладка Контент модуля Слайдер

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

+ Добавить новый Pin

Здесь вы добавляете новые булавки (или местоположения) в модуль карты. Нажатие на «добавить новый элемент» откроет совершенно новый список настроек дизайна (включая «Контент», «Дизайн», «Расширенный») для вашего нового пина. Ниже приведены индивидуальные настройки контактов.

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

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

Ключ API Google

Модуль Карт использует API Карт Google и требует действующего ключа API Google для работы. Перед использованием модуля карты убедитесь, что вы добавили ключ API на панели параметров темы Divi. Узнайте больше о том, как создать свой ключ API Google здесь.

Центральная точка на карте

Введите адрес центральной точки карты, и адрес будет геокодирован и отображаться на карте ниже. Это полезно, если у вас есть несколько булавок и вы хотите, чтобы карта была увеличена до определенного, более сфокусированного места. Вы можете просто ввести адрес в стандартном формате, например «1235 Sunny Road, Some City, State, 88343.»

Метка администратора

Это изменит метку модуля в построителе для облегчения идентификации. При использовании представления WireFrame в Visual Builder эти метки будут отображаться в блоке модуля в интерфейсе Divi Builder.

Вкладка Дизайн модуля Карта

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

Увеличение колесиком мыши

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

Draggable на мобильных устройствах

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

Использовать фильтр оттенков серого

Включение этой опции превратит вашу карту в изображение в оттенках серого.

Вкладка Расширенный модуля Карта

На вкладке «Расширенный» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю собственные классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.

CSS ID

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

Класс CSS

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

Пользовательский CSS

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

Отключить на:

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

Индивидуальные настройки модуля Карты — вкладка Pin (Булавка)

Заголовок

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

Body

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

Адрес пункта на карте

Это конкретное место на карте, где появится ваш новый значок. Вы можете ввести адрес в стандартном формате.