Как вставить КАРТУ в ZERO-блок на Tilda С ВЫСОТОЙ. Яндекс и Google карты в Зеро-блоке на Тильде 100%
Вставить Яндекс-карту или Google-карту в Зеро-блоке на Тильде, Схема проезда в Тильде.
Скачать программный код:
=================
Ссылка на видео как вставить карту бесплатно:
Индивидуальное обучение Тильде:
=================
ЗАРАБАТЫВАЙТЕ НА МОИХ ВИДЕО:
Здесь пойдёт речь о платном варианте с использованием моего программного кода для тех, кто желает избавиться от недостатков бесплатного метода.
При добавлении карты общепринятым способом возникает проблема растягивания карты на всю высоту 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
62 views
2876
911
3 weeks ago 00:08:33 1
Пророчество Христа о нашем времени. Предсказания 2024. Апокрифы Христианства
3 weeks ago 00:10:20 1
Анекдот про зверей, Как Медведь мстил Лосю и Зайцу (Все серии подряд). МультАнекдот
3 weeks ago 00:01:02 32
[RED] GROVE ST. #flexstoterr
3 weeks ago 00:16:40 1
Здоровая шея НЕ вставая со стула – Гимнастика для ШЕИ
3 weeks ago 00:14:27 1
Pixel 5 в 2024 Самый лучший среди компактов!?
1 month ago 00:18:01 1
Как улучшить кровообращение в ногах и лимфоток нижних конечностей не вставая с постели
3 months ago 00:04:25 1
“Плач Гавриила“ Ургебадзе о нерожденных детях и их матерях - исполняет Алексей Фадеев
3 months ago 00:03:54 1
ДИВАННЫЙ СЛАВНЫЙ МИР. Автор — Максим Шингаркин
3 months ago 00:12:56 1
💥Warframe: Окина vs Парные Ихоры? Лучшие билды!
3 months ago 01:53:50 1
Удав - мастер класс
3 months ago 00:03:13 1
Как Сделать Ссылку Словом в Телеграмм на Телефоне / Как Вставить Ссылку в Текст в Telegram
3 months ago 00:16:03 1
Прохождение игры ГОООООООЛ
3 months ago 00:10:12 1
Сайт Умскул
3 months ago 00:03:55 1
На память о зажигалочке @motoTanya она так много еще не успела сделать #мотоТаня
3 months ago 00:11:20 1
Поднимаем свой VPN сервер в Европе за 5 минут. VPS/VDS в Европе за рубли.
3 months ago 00:20:05 22
ВЕЩИ КОТОРЫЕ ПОМНЯТ ТОЛЬКО ОЛДЫ ДОТА 2
3 months ago 00:06:17 1
5 упражнений на растяжку при боли в пояснице. Как облегчить боль в спине?
3 months ago 00:05:20 1
Manowar - Warriors of the World (Cover на русском | RADIO TAPOK)
3 months ago 01:19:23 1
“Книга нескольких поколений“ - встреча, посвященная Н.А.Островскому и роману “Как закалялась сталь“
3 months ago 00:04:13 1
Баллада о борьбе - Владимир Высоцкий
3 months ago 00:06:21 1
Частицы Не и Ни. Различие частиц не и ни
3 months ago 00:02:58 1
Faint - Linkin Park (Cover на русском | RADIO TAPOK)
3 months ago 00:13:43 1
Типичные задачи junior разработчика в компании | Как работают джуниоры? (мой опыт)