Модули карт позволяют легко интегрировать пользовательские Карты Google в любое место на вашей странице. Вы даже можете добавить на карту неограниченное количество булавок и указать свое начальное местоположение. Карточные моды также доступны в полноформатном формате, так что не забудьте проверить и это!
Ключ API Карт Google
Ключ API требования использовать модуль карты. Чтобы получить ключ API, войдите в Консоль разработчиков Google, который проведет вас через процесс и автоматически активирует JavaScript API Карт Google и все связанные службы. Первое, что вас попросят, - это создать новый проект.
Далее вас попросят назвать ваш проект. Вы можете назвать проект как хотите. В этом примере я просто назвал его «Карты». Вы также можете ввести доменное имя вашего веб-сайта (добавьте * перед ним, если вы разрешаете доступ с www.domain.com и domain.com), чтобы убедиться, что ваш ключ API авторизован.
После создания именованного проекта вы увидите ключ API, который сможете использовать.
После получения ключа API вы должны скопировать / вставить его в панель параметров темы, перейдя по ссылке: Divi >> Параметры темы >> Общие настройки >> Ключ API Карт Google
Как добавить модуль карты на свою страницу
Прежде чем вы сможете добавить модуль карты на свою страницу, вы должны сначала перейти в Divi Builder. Однажды Диви тема установлен на вашем сайте, вы увидите кнопку Использовать Divi Builder над редактором сообщений всякий раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите на кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать кнопку Использовать Visual Builder когда вы просматриваете свой веб-сайт на переднем плане, если вы подключены к своей панели управления WordPress.
После входа в Visual Builder вы можете нажать серую кнопку «плюс», чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы начинаете новую страницу, не забудьте сначала добавить строку на свою страницу.
Найдите модуль карты в списке модулей и щелкните его, чтобы добавить на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «карта» и затем нажать Enter, чтобы автоматически найти и добавить модуль карты! После добавления модуля вы увидите список опций модуля. Эти параметры разделены на три основные группы: Содержание , Дизайн et Передовой .
Пример использования: добавление модуля карты на страницу контактов
Модуль карты — отличный способ продемонстрировать местоположение вашей компании на странице контактов. А возможность добавлять на карту несколько булавок для выделения различных местоположений и бизнес-информации — полезная и привлекательная функция.
В этом примере я собираюсь добавить модуль карты, чтобы продемонстрировать местоположение и бизнес-информацию, добавив на карту пользовательский значок.
Важнo : убедитесь, что на панели параметров Диви тема. Модуль карты не будет работать без него.
Используя Visual Builder, добавьте стандартный раздел внизу страницы контактов. Затем вставьте модуль карты в новый раздел. На вкладке «Содержимое» настроек карты введите адрес своей компании в поле «Адрес центра карт». Адрес центра карты - это центральная точка карты.
Затем нажмите + Добавить новый предмет чтобы создать свой первый значок. Обновите следующее:
Название: [введите название вашего местоположения]
Содержание: [введите содержание вашего PIN-кода (адрес и номер телефона)]
Адрес карты: [введите адрес для этого конкретного места]
Сохранить настройки
Вот и все. Теперь у вас есть модуль динамической карты в нижней части страницы контактов с интерактивной меткой, на которой отображается информация о компании.
Параметры содержимого модуля карты
На вкладке «Содержимое» вы найдете все элементы содержимого модуля, такие как текст, изображения и значки. Все, что контролирует какие появляется в вашем модуле, всегда будет найден в этой вкладке.
+ Добавить новую статью
Здесь вы добавляете новые контакты (или слоты) в модуль платы. Нажатие на «добавить новый элемент» откроет совершенно новый список настроек дизайна (включая контент, дизайн, дополнительные) для вашего нового пина. Ниже приведены индивидуальные настройки контактов.
После того, как вы добавили свой первый PIN-код, вы увидите серую полосу с названием вашего булавки в качестве тега. На серой полосе также есть три кнопки, позволяющие редактировать, дублировать или удалять канцелярскую кнопку.
Ключ Google API
Модуль «Карты» использует API Google Maps, и для его работы требуется действительный ключ Google API. Прежде чем использовать модуль «Карта», убедитесь, что вы добавили свой ключ API на панели «Параметры» Диви тема.
Адрес центра карты
Введите адрес для центральной точки карты, и адрес будет геокодирован и отображаться на карте ниже. Это полезно, если у вас есть несколько булавок и вы хотите, чтобы карта увеличивалась в определенном и более точном месте. Вы можете просто ввести адрес в стандартном формате, например «1235 Sunny Road, Some City, State, 88343».
Метка администратора
Это изменит метку модуля в конструкторе для упрощения идентификации. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в модульном блоке интерфейса Divi Builder.
Параметры дизайна модуля карты
На вкладке «Дизайн» вы найдете все параметры стиля модуля, такие как шрифты, цвета, размер и интервал. Это вкладка, которую вы будете использовать для изменения внешнего вида вашего модуля. Каждый модуль Divi имеет длинный список настроек дизайна, которые вы можете использовать, чтобы изменить все, что захотите.
Колесо мыши Zoom
Здесь вы можете выбрать, будет ли уровень масштабирования управляться колесом мыши или нет. Часто лучше отключить эту опцию, чтобы посетители не отвлекались, когда они прокручивают страницу вниз и втыкают колесико мыши в iframe карты. Это особенно актуально для модулей карт полной ширины.
Перетаскиваемый зум
Вы можете выбрать здесь, если карта может быть перемещена на мобильных устройствах.
Используйте фильтр оттенков серого
Включение этой опции превратит вашу карту в полутоновое изображение.
Расширенные параметры карты
На вкладке «Дополнительно» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю пользовательские классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.
CSS-идентификатор
Введите необязательный идентификатор CSS, который будет использоваться для этого модуля. Идентификатор можно использовать для создания собственного стиля CSS или для ссылки на определенные разделы вашей страницы.
Класс CSS
Введите дополнительные классы CSS для использования в этом модуле. Класс CSS можно использовать для создания пользовательского стиля CSS. Вы можете добавить несколько классов, разделенных пробелом. Эти классы можно использовать в вашей дочерней теме Divi или в настраиваемой таблице стилей CSS, которую вы добавляете на свою страницу или веб-сайт с помощью параметров темы Divi или настроек на странице Divi Builder.
Пользовательский CSS
Пользовательский CSS также может быть применен к модулю и к любому внутреннему устройству модуля. В разделе «Пользовательский CSS» вы найдете текстовое поле, в котором вы можете добавить пользовательские таблицы стилей CSS непосредственно к каждому элементу. Записи CSS в этих настройках уже заключены в теги стилей. Так что просто введите правила CSS через точку с запятой.
видимость
Эта опция позволяет вам контролировать устройства, на которых появляется ваш модуль. Вы можете по отдельности деактивировать свой модуль на планшетах, смартфонах или настольных компьютерах. Это полезно, если вы хотите использовать разные моды на разных устройствах или если вы хотите упростить мобильный дизайн, удалив определенные элементы со страницы.
Индивидуальные варианты контактов
Название
При создании нового пина вы можете назначить заголовок. Этот заголовок появится в поле при наведении курсора на маркер на карте.
Содержание
При создании нового пина вы можете назначить блок текста содержимого. Этот текст появится в поле при наведении курсора на маркер на карте.
Адрес карты
Это точное место на карте, где появится ваш новый значок. Вы можете ввести адрес в стандартном формате.
[vc_row center_row="yes"][vc_column width="1/2"][vcex_button target="blank" layout="expanded" align="center" font_family="Raleway" font_weight="700" style="flat" 18 /69″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=118&url=7&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”2″ style=”flat” custom_background=”#c23065e” custom_hover_background=”#40632d1f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”] СКАЧАТЬ ШАБЛОНЫ DIVI[/vcex_button][/vc_column][/vc_row]
Другие учебные пособия Divi
- сайты 5 для использования ресторана Divi темы
- Как добавить текст в продукт Divi WooCommerce
- Как изменить цвет меню между страницами Divi
- Как персонализировать сетки блога с Divi
- Как использовать роль DiVi редактор на WordPress
- Как создать полноэкранный слайдер Divi
- Как изменить цвет меню между страницами Divi
- Особенности, которые вы, вероятно, не знаете о Divi
- Как использовать Divi Builder в WordPress
- Как использовать модуль прокрутки видео Divi
- Как использовать модуль Flip Builder Flip
- Как добавить отзыв модуль на Divi Builder
- Как использовать текстовый модуль Divi
- Как создать слайдер на Divi
- Как редактировать роль пользователя Divi
- Как использовать модуль Divi Social Media
- Как пользоваться магазинным модулем на тему WordPress Divi
- Как использовать боковую панель Divi
- Как использовать модуль таблицы цен Divi
- Как использовать титульный модуль изданий Divi
- Как добавить видео модуль Divi
- Как использовать навигационный модуль статьи
- Как использовать модуль поиска Divi
- Как использовать модуль кошелька Divi
- Как использовать модуль пользователя в Divi Builder
- Как использовать модуль кошелька с фильтром Divi
- Как использовать ползунок полной ширины
- Как использовать модуль изображения Divi Builder
- Как использовать полноразмерный навигационный модуль Divi Builder
- Как использовать модуль галереи изображений
- Как использовать модуль карты полной ширины Divi Builder
- Как использовать модуль Divi Full Width Portfolio
- Как использовать полноразмерный заголовочный модуль Divi
- Как использовать Divi Counter Module
- Как использовать слайдер статей в Divi Builder
- Как использовать модуль Divi Email Optin
