Пропустить

Divi Tutorial: Как использовать модуль Full Screen Card Divi

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

Полноширинный-карта-overview.png

Ключ API Карт Google

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

создать ключ API Google.jpg

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

добавить ключ API в project.jpg

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

графические документы

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

Как добавить модуль Divi Full Screen Card

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

использовать divi builder

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

полный раздел divi builder.png

Если вы начинаете новую страницу, не забудьте сначала добавить на свою страницу полноразмерный раздел.

полная карта screen.png

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

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

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

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

добавить полноразмерную карту divi builder.jpg

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

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

добавить карту divi example.jpg

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

Заголовок: [введите название вашего местоположения] Содержание: [введите содержание вашего PIN-кода (адрес и номер телефона)] Адрес карты: [введите адрес для этого конкретного местоположения]

добавить детали карта полной ширины divi.jpg

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

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

приведите карту полной ширины divi.jpg

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Параметры содержимого модуля карты полной ширины

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

опция content divi builder полная ширина map module.png

Ключ Google API

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

Адрес центра карты

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

Ярлык администрации

Это изменит метку модуля в конструкторе для упрощения идентификации. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в модульном блоке интерфейса Divi Builder.

Варианты дизайна полной ширины

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

модуль дизайна опций полная ширина map.png

Колесо мыши Zoom

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

Перетаскиваемый зум

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

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

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

Расширенные опции карты полной ширины

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

расширенный модуль расширенного модуля divi.png

CSS-идентификатор

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

Класс CSS

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

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

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

видимость

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

Индивидуальные параметры содержимого полной ширины

контактный модуль модуля full width.png

Название

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

Содержание

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

Адрес карты

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

Другие учебные пособия Divi

Эта статья содержит комментарии 0

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
18 акции
доля10
чирикать3
Регистрация5