Как вставить Яндекс.Карты на landing page в ClickDimensions

Команда Ёлва

Подпишитесь, чтобы получать новые статьи

Подписаться

Сегодня мы рассмотрим пример использования Яндекс.Карт на landing page, сделанных в ClickDimensions.

Например, мы планируем сделать несложный микро-сайт для мероприятия и нам необходимо предоставить инструкции «как добраться» ClickDimensions.

Для начала мы создали простую страницу (для теста и примера без особой стилизации) в редакторе Block Editor. Мы планируем вставить карту в пустой блок в середине страницы.

Простая страница в редакторе Block Editor

Теперь открываем Яндекс.Карты, вводим адрес проведения мероприятия, выбираем маршрут от ближайшего метро, указываем пешком или на автомобиле.

Маршрут от ближайшего метро

Дальше в верхнем правом углу раскрываем меню и выбираем опцию «Поделиться», затем копируем код iframe для вставки на сайт (можно раскрыть предпросмотр).

Копируем код iframe для вставки на сайт

Вернитесь к редактору с landing page, выберите необходимый блок, после клика по нему правой кнопкой выберите «Добавить контент» и в открывшемся окне выберите компонент:

Компонент <HTML>

Нажмите Next, затем внизу перейдите в новом окне на вкладку «<>HTML», сотрите и вставьте скопированный ранее код для вставки с Яндекса.

Вставка скопированного ранее кодаТак выглядит карта, если мы просто ее вставим:

Карта после вставки

Но мы можем изменить ширину и высоту нашего элемента iframe непосредственно в коде. Например, мы хотим расположить карту на полную ширину страницы (с модификацией кода до 790х400 px для сохранения пропорции 16:9). После наших изменений наша карта отображается уже по-другому:

Карта после наших измененийМожно расположить карту и текст в два столбца и дать к карте описание текстовое «как дойти».Но благодаря этому, если человек добирается не от точки, установленной вами, ему не потребуется покидать ваш landing page. Он может построить маршрут непосредственно в iframe.

#Landing page#Мероприятия

Подпишитесь на наши статьи

Добавить комментарий

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