Часто задаваемые вопросы

1. Как добавить скрипт или стиль?
2. Как найти ID блока и class элемента?
3. Как добавить class целому блоку?
4. Как добавить class элементу в Zero-блоке?
5. Почему блоки T123 со скриптами лучше всего размещать в футере?
6. Где хранить изображения и как получить на них ссылки?
7. Как скопировать N ссылок на изображения?
8. Как открыть консоль разработчика?

По всем вопросам, касающимся модификаций, пишите в Telegram-чат.

1. Скопируйте скрипт или стиль.
2. Перейдите на страницу в Тильде.
3. Добавьте блок T123 (HTML-код).
4. Нажмите «Контент».
5. Вставьте скопированный скрипт или стиль.
6. Сохраните изменения.
7. Опубликуйте страницу.

Рекомендую всегда добавлять блок T123 либо в самый низ страницы, либо непосредственно под блок, для которого делаете модификацию — в таком случае в будущем вы всегда с лёгкостью сможете найти нужный скрипт или стиль.

Найти ID блока очень просто — зайдите в настройки блока и промотайте вниз. В последней строке и будет ID конкретного блока. Выглядит он примерно так: #rec123456789.

Также можно найти ID через просмотр HTML-кода страницы. Подробнее об этом смотрите в видео выше.

Class элемента вы также найдёте в HTML-коде:

1. Щёлкните правой кнопкой мыши на элементе.
2. Выберите «Показать код» (или «Проверить объект» — в разных браузерах по-разному).
3. Скопируйте первый из классов.

Например, если в строке будет написано class="t795__title t-title t-title_xs t-margin_auto", то вам нужен только первый, т. е. t795__title. Подробнее об этом говорится в видео со второй минуты.

P. S. Если у вас в контекстном меню не отображается пункт «Проверить код», зайдите в настройки браузера и включите меню «Разработка».

Здесь всё очень просто:

1. Заходим в настройки блока.
2. Проматываем все настройки вниз.
3. Над ID блока видим надпись «Добавить CSS Class Name».
4. Жмакаем по ней.
5. Вписываем свой класс, начиная с «uc-».

Будьте внимательны, имя класса должно начинаться с «uc-»! Дальше может написать что угодно, главное без пробелов.

1. Добавьте любой элемент в Zero-блок.
2. Нажмите на него правой кнопкой мыши.
3. В появившемся контекстном меню выберите «Add CSS Class Name».

В новом поле (раньше оно было скрыто) в настройках впишите класс для элемента.

Можете называть класс как захотите, но лучше не начинать с «t-» или «tn-», т.к. под такое начало зарезервированы классы тильды. И, даже, если сейчас такого класса нет, не факт, что он не появится в будущем.

Не пугайтесь, если вы удалите имя класса для текущего элемента, и в настройках пропадёт соответствующий раздел. Снова добавить класс можно будет точно также через контекстное меню.

Браузер «читает» вашу страницу сверху вниз. Соответственно, если он видит в скрипте элемент (например, какой-то блок, к которому вы обращаетесь в скрипте), который браузер ещё не видел на странице, скрипт не выполнится, т.к. браузер уже хочет выполнить скрипт, но ещё не знает о каком элементе идёт речь.

Поэтому лучше всего размещать скрипт под элементами, с которыми он взаимодействует или вообще в футере сайта. Первый вариант удобнее, т.к. пользуясь таким правилом, вы будете помнить, что скрипт относится к блоку (-ам) над ним. Однако, размещая скрипт в футере вы точно избежите проблем, которые могут возникнуть.

Есть один лайфхак. Если вы не хотите пользоваться специализированными сервисами, то прозе всего загрузить изображения в любой блок с изображениями на Тильде. Это может быть как блок с одним изображением (IM01), так и любая галерея.

Заходите в «Контент», загружаете нужные изображения, сохраняете блок, после чего снова нажимаете «Контент», копируете все ссылки (щёлкаете правой кнопкой мыши по ссылке и выбираете «Скопировать адрес ссылки»). После чего смело удаляете блок. С вашими изображениями ничего не случится, они будут храниться на Тильде.

Если вам для какой-то задачи нужно залить на Тильду этим методом очень много изображений и скопировать все ссылки на них, то не пугайтесь, вам не придётся вручную копировать каждую ссылку. Сделать это очень просто:
1. Создайте новую страницу на Тильде.
2. Добавьте галерею GL01 и загрузите туда изображения.
3. Откройте консоль разработчика.
4. Вставьте туда следующий текст и нажмите Enter:

Всё! Теперь все ссылки скопированы в ваш буфер обмена. Можете нажать Ctrl (Cmd) + V (или кликнуть по текстовой области правой кнопкой мыши и выбрать «Вставить») и проверить. Profit!

В разных браузера консоль разработчика может открываться по-разному. Где-то даже может быть выключена эта функция по-умолчанию (например, в Safari). Но, возможно, у вас сработает комбинация клавиш Ctrl+Shift+I (или Cmd+Shift+I для macOS), после чего вы сможете переключиться на вкладку «Консоль» («Console»). Также можно попробовать открыть консоль, нажав правой кнопкой мыши на странице и выбрав «Просмотреть код» («Inspect» или «Inspect Element») или что-то подобное (в Safari это будет «Проверить объект»), после чего также переключитесь на вкладку «Консоль».

Инструкции для разных браузеров:

• Google Chrome
• Safari
• Mozilla Firefox
• Microsoft Edge
• Internet Explorer

1. Нажмите на три точки в правом верхнем углу браузера.
2. Выберите «Дополнительные инструменты» («More tools»).
3. Выберите «Инструменты разработчика» («Developer tools»).

Или нажмите клавишу F12 или используйте сочетание клавиш Ctrl+Shift+J (Windows/Linux) и Cmd+Opt+J (macOS).

Убедитесь, что в настройках (вкладка «Дополнительно») в самом низу стоит галочка «Показать меню „Разработка“ в строке меню».

1. Раскройте меню «Разработка»
2. Нажмите «Показать консоль JavaScript».

Или используйте сочетание клавиш Cmd+Opt+C.

1. Нажмите на три линии в правом верхнем углу браузера.
2. Выберите «Web Developer».
3. Выберите «Toggle Tools».

или используйте сочетание клавиш Ctrl+Shift+K (Windows/Linux) и Cmd+Opt+K (macOS).

1. Нажмите на три точки в правом верхнем углу браузера.
2. Выберите «Developer tools».

Или нажмите клавиши F12.

1. Нажмите на шестеренку в правом верхнем углу браузера.
2. Выберите «Developer tools».

Или нажмите клавиши F12.