Тёмная Яндекс карта в zero-блоке на Tilda

Инструкция по установке модификации

1. Создаёте Zero-block с необходимой высотой, удаляете из него все элементы и помещаете в него html-блок (нажимаете на «+» в левом верхнем углу экрана в созданном вами zero-блоке и выбираете «Add HTML»);
2. Созданному HTML-блоку задаете высоту, ширину, расположение по осям X и Y (в дальнейшем, ваша карта будет располагаться внутри данного HTML-блока);
3. Вставляете в созданный HTML-блок код № 1;

Код №1

4. В вашем Zero-блоке создаёте белый (!) shape (нажимаете на «+» в левом верхнем углу экрана в созданном вами zero-блоке и выбираете «Add Shape»), задаёте ему ширину, высоту, а также расположения по осям X и Y точно такое же (!) как у вашего html-блока;
ВАЖНО! Данный шейп должен располагаться на самом верху в слоях (нажимаете правую кнопку мыши на данном шейпе, а затем выбираете «Bring to front)»;
5. Сохраняете изменения и публикуете страницу;
6. Открываете опубликованную страницу по ссылке (как обычный пользователь), наводите курсор мыши на ваш белый shape, нажимаете правую кнопку мыши и выбираете «посмотреть код» (в браузере Google Chrom). После этого, вы попадёте в код страницы, а ваш белый shape (на который вы предварительно навели курсор) будет подсвечен в коде (!);
7. Здесь вам необходимо найти класс вашего элемента, он должен быть вида «tn-elem__434 346 096 441 649 723 484 272»
(цифры у вас будут другие);
8. Копируете класс вашего элемента (например, tn-elem__434 346 096 441 649 723 484 272) и вставляете его в код № 2;

Код №2

9. Вставляете полученный HTML-код (код №2) на вашу страницу в блок T123 (библиотека блоков, вкладка «другое»);
10. Загружаете ваш логотип, который хотите разместить на карте (можно загрузить как на тильду, так и на любой сайт в интернете) — в дальнейшем мы будем использовать ссылку на этот логотип в коде №3;
11. Узнаёте координаты необходимой точки на Яндекс карте (место, где будет располагаться ваш логотип);
Чтобы узнать координаты точки на Яндекс карте, нажмите правой кнопкой мыши на эту точку, затем
выберите пункт «Что здесь?». В левом верхнем углу появятся координаты, скопируйте их.
Нажмите сюда, чтобы увидеть пример
12. Подставляете свои значения в код №3;

ВАЖНО!
При подставлении значений в код №3, обратите внимание в каком формате эти значения указаны в моём примере
(подсказка внутри поля для ввода). Вы должны вставлять всё точно также, чтобы код сработал.

• Ширина задаётся в пикселях, но аббревиатура "px" не указывается, просто цифра;
• Координаты нужно указывать через запятую, а после запятой обязательно должен быть пробел;
• В поле «приближение карты при запуске» задаётся просто число.

Перед использованием кода №3, настоятельно рекомендую ознакомиться с дополнением к инструкции!!!

Код №3

13. Вставляете полученный HTML-код (код №3) на вашу страницу в блок T123 (библиотека блоков, вкладка «другое»);
14. Сохраняете изменения и публикуете страницу;

Дополнение к инструкции

В данной модификации мы использовали режим наложения «difference» на наш белый шейп. Но этот эффект будет также накладываться на ваш логотип (поскольку логотип находится над картой, но под шейпом). Чтобы это исправить, нужно пойти от обратного. Ниже прилагаю краткую инструкцию, как это сделать:

• Заходим в «Figma», создаём новый проект или используем существующий;
• Загружаем в проект ваш логотип;
• Создаём белый прямоугольник с заливкой 100%, помещаем его поверх вашего логотипа;
• Выбираем созданный прямоугольник и справа, во вкладке «Layer», меняем значение «Pass through» на «Difference»;
• Вы получите ваш логотип с наложением «Difference». Теперь вам необходимо пересоздать свой логотип, но в тех цветах,

которые вы получили при наложении «Difference». Например, на моём логотипе буквы жёлтые, но при наложении они становятся синими. Я пересоздаю свой логотип, но вместо жёлтого цвета букв, я использую синий цвет. И логотип такого вида я загружаю на сервер, копирую ссылку, и использую эту ссылку в коде № 3. В результате, при наложении эффекта «difference» (уже на самой карте), буквы логотипа будут менять свой цвет с синего на жёлтый.
Нажмите сюда, чтобы увидеть пример

Другие модификации