Divi Tutorial: как использовать модуль карты
06.09.2018
Divi: самая простая тема WordPress для использования
Вот лучшие инструменты для монетизации вашего блога
Модули карт способствуют интеграции Google Maps персонализированный везде на вашей странице. Вы даже можете добавить неограниченные контакты на карту и установить пользовательское начальное местоположение. Модули карт также имеют полный формат, поэтому обязательно проверьте это!
Ключ API Карт Google
Ключ API требования для использования модуля карты. Чтобы получить ключ API, войдите в Консоль разработчиков Google , который проведет вас через процесс и автоматически активирует API JavaScript Карт Google и все связанные службы. Первое, что вас попросит, - создать новый проект.
Затем вам будет предложено назвать ваш проект. Вы можете назвать проект так, как хотите. В этом примере я просто назвал его «Карты». Вы также можете ввести доменное имя ваш сайт (добавьте * перед этим, если вы разрешаете доступ с www.domain.com и domain.com), чтобы убедиться, что ваш ключ API разрешен.
После того, как вы создали именованный проект, отобразится ключ API, который вы можете использовать.
После получения ключа API вы должны скопировать / вставить его в панель параметров темы, перейдя к: Дива >> Параметры темы >> Общие настройки >> Ключ API Карт Google
WPML, лучший плагин для перевода вашего сайта
Как добавить модуль карты на свою страницу
Прежде чем вы сможете добавить модуль карты на свою страницу, вы должны сначала перейти к Divi Builder. После того, как тема Divi установлена на вашем веб-сайте, вы заметите кнопку Использовать Divi Builder над издателем каждый раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать на кнопку Использовать Visual Builder когда вы просматриваете свой сайт на переднем плане, если вы подключены к панели инструментов WordPress.
После того, как вы вошли в Visual Builder, вы можете нажать кнопку «серый плюс», чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы запустите новую страницу, не забудьте сначала добавить строку на свою страницу.
Найдите модуль карты в списке модулей и щелкните по нему, чтобы добавить его на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «карта», а затем нажмите «Ввод» для поиска и автоматического добавления модуля карты! После добавления модуля вы будете приветствоваться списком параметров модуля. Эти параметры разделены на три основные группы: Содержание ,Дизайн и Передовой ,
Пример использования примера: добавьте модуль карты на страницу контакта
Модуль карты - отличный способ представить местоположение вашей компании на вашей странице контактов. А возможность добавления нескольких контактов на карту, чтобы выделить различные местоположения и информацию о компании, является полезной и привлекательной функцией.
В этом примере я добавлю модуль карты, чтобы представить информацию о местоположении и компании, добавив к карте пользовательский вывод.
Важный Убедитесь, что действительный ключ API Google введен на панели «Параметры» темы Divi. Модуль карты не будет работать без него.
Используя Visual Builder, добавьте стандартный раздел внизу страницы контактов. Затем вставьте модуль Card в новый раздел. На вкладке «Содержание настроек карты» введите адрес вашей компании в разделе «Адрес центра карты». Адрес центра карты является центральной точкой карты.
PEARL: тема WordPress для бизнеса
Затем нажмите + Добавить новый элемент для создания вашего первого булавки. Обновите следующие пункты:
Название: [введите название своего местоположения] Содержание: [введите содержимое вашего отпечатка (адрес и номер телефона)] Адрес карты: [введите адрес для этого местоположения]
Сохранить настройки
Вот и все. Теперь у вас есть динамический модуль карты в нижней части страницы контактов с щелчком, который отображает информацию о компании.
Параметры содержимого модуля карты
На вкладке «Содержание» вы найдете все элементы содержимого модуля, такие как текст, изображения и значки. Все, что контролируеткакиев вашем модуле всегда будет отображаться на этой вкладке.
+ Добавить новую статью
Здесь вы добавляете новые контакты (или слоты) в модуль вашей карты. Нажав «добавить новый элемент», вы откроете новый новый список параметров дизайна (включая контент, дизайн, продвинутый) для вашего нового булавки. Ниже приведены отдельные настройки булавки.
После добавления вашего первого булавки вы увидите серое полотно с названием вашего булавки в качестве метки. Серая полоса также имеет три кнопки, которые позволяют редактировать, дублировать или удалять ошибку.
Elementor: легко создать свой сайт - 100% Free
Ключ API Google
Модуль «Карты» использует API Карт Google и требует наличия действующего ключа API Google. Прежде чем использовать модуль «Карта», убедитесь, что вы добавили ключ API в панель «Параметры темы Divi».
Адрес центра карты
Введите адрес для центральной точки карты, и адрес будет геокодирован и отображен на карте ниже. Это полезно, если у вас несколько контактов и требуется, чтобы карта была увеличена до определенного и более конкретного места. Вы можете просто ввести адрес в стандартном формате, например «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, разделенные точкой с запятой.
видимость
Эта опция позволяет вам управлять устройствами, на которых отображается ваш модуль. Вы можете отключить свой модуль на планшетах, смартфонах или настольных компьютерах по отдельности. Это полезно, если вы хотите использовать разные модули на разных устройствах, или если вы хотите упростить мобильный дизайн, исключив некоторые элементы страницы.
Индивидуальные варианты контактов
Название
При создании нового вывода вы можете назначить заголовок. Этот заголовок появится в поле, наведя курсор на карту на карте.
Содержание
При создании нового вывода вы можете назначить блок текста содержимого. Этот текст появится в поле, наведя курсор на значок на карте.
Адрес карты
Это точное место на карте, где появится ваш новый контакт. Вы можете ввести адрес в стандартном формате.
Вы ищете лучшие темы и плагины WordPress?
Пользователи BlogPasCher рекомендуют следующие категории: