Полезные статьи

Как скруглить углы у Яндекс карты в Тильде. Код и как его использовать

2025-05-13 11:05
У меня часто бывает потребность вставить на Тильду код из яндекс карты в zero-block, чтобы карта отображалась в определенном месте сайта. Это нужно, когда используется не стандартные блоки Тильды. Тогда с помощью html элемента, мы добавляем код, который предварительно копируем из яндекс карты и карта отображается в нужной части сайта.

Как добавить яндекс карты в zero-block на Тильде

1.Заходим в яндекс карту и ищим нужный адрес.
2.Наводим мышкой на три точки в правом верхнем углу карты и у нас открывается панель меню
3.В этой панели нажимаем на пункт "Поделиться" и копируем код из пункта "Виджет с картой"
4.Далее идем в Тильду в zero block и добавляем элемент html, в который мы вставляем этот код.

Обратите внимание, что в самом коде нужно поменять длину и высоту вашей карты, если вы просто поменяете длину и высоту html элемента - это не повлияет на то, как она будет отображаться на сайте.

5.Карта добавлена, но у нее не скруглены углы. Тут нам поможет хитрость и дополнительный код. Задаем html элементу класс karta. Нажимаем на элемент правой кнопкой мыши и выбираем Add CSS class name
Теперь сохраняем zero block и добавляем на сайт код через блок html:
<style>
.karta .tn-atom {
border-radius: 30px;
overflow: hidden;
background: rgba(0,0,0,0) !important;
}
</style>
Соответственно, в пункте border-radius: 30px; задаем необходимое скругление углов.
Пользуйтесь!