Myvideo

Guest

Login

Как вставить КАРТУ в ZERO-блок на Tilda С ВЫСОТОЙ. Яндекс и Google карты в Зеро-блоке на Тильде 100%

Uploaded By: Myvideo
6 views
0
0 votes
0

Вставить Яндекс-карту или Google-карту в Зеро-блоке на Тильде, Схема проезда в Тильде. Скачать программный код: Добавление-карты-в-ZERO-Блок-Программный-код-для-TILDA-p394004564 ================= Ссылка на видео как вставить карту бесплатно: Индивидуальное обучение Тильде: Конструктор-сайтов-Tilda-Индивидуальное-обучение-p596083432 ================= ЗАРАБАТЫВАЙТЕ НА МОИХ ВИДЕО: Здесь пойдёт речь о платном варианте с использованием моего программного кода для тех, кто желает избавиться от недостатков бесплатного метода. При добавлении карты общепринятым способом возникает проблема растягивания карты на всю высоту 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 блок схема проезда в тильде

Share with your friends

Link:

Embed:

Video Size:

Custom size:

x

Add to Playlist:

Favorites
My Playlist
Watch Later