Прячем схему проезда в раскрывающемся блоке
Мы рекомендуем в разделе с контактной информацией (обычно, "Контакты") выводить схему проезда, в том числе, интерактивную от Яндекс или Google, чтобы Ваши пользователи смогли сориентироваться и составить маршрут своего передвижения.
Однако, иногда схема проезда может выглядеть громоздкой или их может быть несколько, поэтому целесообразно будет скрыть некоторые или все схемы проезда в раскрывающийся блок, содержимое которого будет доступно пользователю при клике по специальной ссылке.
Пример, как это обычно выглядит:
Компания: ООО «Успешная компания»
Телефон: +7 (123) 456-78-90
Эл.почта: mailname@email.com
Время работы: пн-пт, 09:00 - 18:00 (сб, вск - выходной)
Адрес: г. Москва, ул. Уличная, д. 100, офисы: 101-102.
Схема проезда:
Пример, если схема проезда скрыта:
Компания: ООО «Успешная компания»
Телефон: +7 (123) 456-78-90
Эл.почта: mailname@email.com
Время работы: пн-пт, 09:00 - 18:00 (сб, вск - выходной)
Адрес: г. Москва, ул. Уличная, д. 100, офисы: 101-102.
Как это работает. Инструкция
В начале, Вам необходим заполнить раздел с контактами базовой информацией - контактные телефоны, электронная почта, время работы, адрес местоположения и так далее.
Далее, необходимо получить код карты. Сервис можете выбрать на свое усмотрение:
После того как Вы сформируете код карты для размещения на сайте, возвращаемся к редактированию раздела с контактной информацией. В панели визуального редактора переходим в HTML код содержимого.
В открывшемся окне, после всего содержимого, вставляем следующий код:
<div class="l-toggle">
<div class="lt-caption" style="cursor: pointer;">ЗАГОЛОВОК ДЛЯ КЛИКА</div>
<div class="lt-content">ЗАМЕНИТЬ НА КОД КАРТЫ</div>
</div>
Примерный вид редактора HTML кода:
Далее, остается заменить "ЗАГОЛОВОК ДЛЯ КЛИКА" - на свой текст, который будет являться ссылкой, например: "Схема проезда (посмотреть)" или "Посмотреть схему проезда".
А также, заменить текст "ЗАМЕНИТЬ НА КОД КАРТЫ" на код, полученный в сервисе Яндекс, Google или 2gis.
В финальном варианте, HTML код с необходимыми изменениями будет выглядеть примерно так:
Нажмите в окне кнопку "Ок" и сохраните раздел. Проверьте вывод скрытого блока на сайте.
Если вам необходимо вставить несколько схем проезда, тогда просто вставьте несколько раз указанный код и замените текст для заголовка и вставьте в каждом блоке свой код карты.