Вставить Яндекс-карту или Google-карту в Зеро-блоке на Тильде, Схема проезда в Тильде.
Скачать программный код:
howmakesite.ru/products/Dobav...
=================
Ссылка на видео как вставить карту бесплатно:
• Как вставить КАРТУ в Z...
Индивидуальное обучение Тильде:
howmakesite.ru/products/Konst...
=================
ЗАРАБАТЫВАЙТЕ НА МОИХ ВИДЕО:
howmakesite.ru/pages/returns
Здесь пойдёт речь о платном варианте с использованием моего программного кода для тех, кто желает избавиться от недостатков бесплатного метода.
При добавлении карты общепринятым способом возникает проблема растягивания карты на всю высоту HTML-элемента. Обычно все советуют в значение height написать 100%, но так не работает. Поэтому в своём ролике про бесплатный вариант я устанавливал фиксированные значения высоты в пикселях. И не для всех дисплеев надо одинаковую высоту. А программный код общий для всех. Поэтому приходится для других вёрсток дублировать этот блок и в коде указывать другую высоту.
Кроме того, при добавлении яндекс-карты получается бордюр, который не вписывается в дизайны сайтов.
Поэтому я написал программный код, который избавит Вас от всех этих проблем. Вы просто добавите яндекс- или гугл-карту на свой сайт и она будет принимать размеры HTML-элемента. Вам не придётся придумывать как уместить её на любых экранах в любых вёрстках, ведь мало сверстать карту для ПК, необходимо сделать ещё вёрстки для всех вот этих мобильных дисплеев.
К тому же, Вы теперь сможете задавать размеры карты в процентах по ширине и высоте окна, то есть без проблем использовать её в резиновой вёрстке.
Ну и конечно я убрал бордюр. Теперь карта чисто, без излишеств впишется в Ваш сайт.
Итак, добавляем схему проезда в Тильде: добавляем в ZERO-блок элемент HTML-код, и сначала вставим Яндекс-карту, потом Гугл. Переходим на Яндекс-карты, ищем нужный адрес, жмём вот сюда, потом «Поделиться», и вот тут, где виджет с картой, жмём на квадратики. Карта скопировалась в буфер обмена, идём в ZERO-блок, дважды кликаем на элементе HTML, выделяем и удаляем этот код по умолчанию и вставляем код карты из буфера обмена. Всё! Никаких исправлений в этом коде вносить не нужно, ничего мудрить не придётся, мой программный код потом всё сделает за Вас. Сохраняем, закрываем. А чтобы программный код был в курсе наших ожиданий, на карте мы кликаем правой кнопкой мыши и выбираем пункт Add CSS Class Name - то есть, добавить имя CSS-Класса. И вот тут появляется поле, которого раньше не было, сюда печатаем имя нашего кода. Это «mapframe». Если забудете, оно есть в самом коде, я сейчас покажу это.
После этого Вы можете верстать этот блок как обычный любой другой блок - то есть менять его ширину и высоту для любых размеров дисплеев, устанавливать положение и размеры в пикселях или процентах, привязывать эти параметры к Грид-контейнеру или Виндоуз-контейнеру… Это Вы можете делать в соответствии с Вашими фантазиями по дизайну, не задумываясь о том как карта ляжет на сайт, влезет она или нет в свой блок. За Вас всё сделает мой программный код.
Далее переходим по ссылочке внизу, в описании к этому видео, покупаем и качаем программный код с моего сайта.
Открываем файлик с кодом, копируем всё содержимое. Добавляем на страницу блок Т123 HTML, жмём «Контент» и вставляем туда содержимое файлика. И вот здесь - имя кода «mapframe», которое мы присваивали в настройках нашей карты. Так что всегда его потом можете копировать отсюда если ссылку на этот ролик потеряете.
Всё! Публикуем и наслаждаемся результатом! Карта автоматически принимает именно те размеры, которые Вы задумали в дизайне. И нет этого бордюра.
То же самое с Гугл-картой. Ищем адрес, жмём «Поделиться», выбираем «Встраивание карт», «Копировать HTML».
Переходим в ZERO-блок и можете создать новый HTML-элемент, можете заменить карту в уже созданном. Сохраняем и закрываем. Публикуем - и наша карта работает как положено.
Теперь Вы навсегда избавитесь от проблем вёрстки нескольких вариантов карты для ваших сайтов и забудете лазить в их программные коды каждый раз когда надо будет изменить размеры.
Ключевые слова:
как вставить карту в зеро блоке
вставить карту в тильде
tilda
тильда
встроить карту в zero блок
карта в zero блоке
яндекс карты в тильде
google карта в тильде
яндекс карта в tilda
google карта в tilda
встроить карту на сайт в тильде
встроить карту в зеро блок
zero блок
зеро блок
вставить карту в зеро блок
вставить карту в zero
карта зеро блок
карта zero блок
схема проезда в тильде
#картавзероблоке #tilda #zeroblock