Регистрация
Личный кабинет
Регистрация
Личный кабинет

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

Краткое содержание

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

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

Как добавить скрипт или стиль?

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

Как найти ID блока и class элемента?

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

Также можно найти ID через просмотр HTML-кода страницы. Подробнее об этом смотрите в видео выше.
Как найти ID блока
Как найти ID блока
Class элемента вы также найдёте в HTML-коде:
  1. Щёлкните правой кнопкой мыши на элементе.
  2. Выберите «Показать код» (или «Проверить объект» — в разных браузерах по-разному).
  3. Скопируйте первый из классов.
Например, если в строке будет написано class="t795__title t-title t-title_xs t-margin_auto", то вам нужен только первый, т. е. t795__title. Подробнее об этом говорится в видео со второй минуты.
Как найти class элемента
Как найти class элемента
P. S. Если у вас в контекстном меню не отображается пункт «Проверить код», зайдите в настройки браузера и включите меню «Разработка».
Как включить меню «Разработка» в Safari
Как включить меню «Разработка» в Safari

Как добавить class целому блоку?

Здесь всё очень просто:
  1. Заходим в настройки блока.
  2. Проматываем все настройки вниз.
  3. Над ID блока видим надпись «Добавить CSS Class Name».
  4. Жмакаем по ней.
  5. Вписываем свой класс, начиная с «uc-».
Будьте внимательны, имя класса должно начинаться с «uc-»! Дальше может написать что угодно, главное без пробелов.
Как добавить class целому блоку
Как добавить class целому блоку

Как добавить class элементу в Zero-блоке?

  1. Добавьте любой элемент в Zero-блок.
  2. Нажмите на него правой кнопкой мыши.
  3. В появившемся контекстном меню выберите «Add CSS Class Name».
В новом поле (раньше оно было скрыто) в настройках впишите класс для элемента.
Нажмите правой кнопкой мыши на элемент в Zero-блоке и выберите «Add CSS Clas Name».
Нажмите правой кнопкой мыши на элемент в Zero-блоке и выберите «Add CSS Clas Name»
Можете называть класс как захотите, но лучше не начинать с «t-» или «tn-», т.к. под такое начало зарезервированы классы тильды. И, даже, если сейчас такого класса нет, не факт, что он не появится в будущем.
В настройках элемента появится новый раздел. Впишите сюда название класса.
В настройках элемента появится новый раздел. Впишите сюда название класса
Не пугайтесь, если вы удалите имя класса для текущего элемента, и в настройках пропадёт соответствующий раздел. Снова добавить класс можно будет точно также через контекстное меню.

Почему блоки T123 со скриптами лучше всего размещать в футере?

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

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

Где хранить изображения и как получить на них ссылки

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

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

Как скопировать N ссылок на изображения?

Если вам для какой-то задачи нужно залить на Тильду этим методом очень много изображений и скопировать все ссылки на них, то не пугайтесь, вам не придётся вручную копировать каждую ссылку. Сделать это очень просто:
1. Создайте новую страницу на Тильде.
2. Добавьте галерею GL01 и загрузите туда изображения.
3. Откройте консоль разработчика.
4. Вставьте туда следующий текст и нажмите Enter:
var tGalleryImages = document.querySelectorAll('.gallery-imgs-class');
var linksArray = new Array();
tGalleryImages.forEach(img => { linksArray.push(img.querySelector('table a').href) });
copy(linksArray)
Скопировать код
Всё! Теперь все ссылки скопированы в ваш буфер обмена. Можете нажать Ctrl (Cmd) + V (или кликнуть по текстовой области правой кнопкой мыши и выбрать «Вставить») и проверить. Profit!

Как открыть консоль разработчика?

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

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

Google Chrome

  1. Нажмите на три точки в правом верхнем углу браузера.
  2. Выберите «Дополнительные инструменты» («More tools»).
  3. Выберите «Инструменты разработчика» («Developer tools»).
Или нажмите клавишу F12 или используйте сочетание клавиш Ctrl+Shift+J (Windows/Linux) и Cmd+Opt+J (macOS).

Safari

Убедитесь, что в настройках (вкладка «Дополнительно») в самом низу стоит галочка «Показать меню „Разработка“ в строке меню».
  1. Раскройте меню «Разработка»
  2. Нажмите «Показать консоль JavaScript».
Или используйте сочетание клавиш Cmd+Opt+C.

Mozilla Firefox

  1. Нажмите на три линии в правом верхнем углу браузера.
  2. Выберите «Web Developer».
  3. Выберите «Toggle Tools».
или используйте сочетание клавиш Ctrl+Shift+K (Windows/Linux) и Cmd+Opt+K (macOS).

Microsoft Edge

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

Internet Explorer

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

Как включить / подключить jQuery?

Сделать это можно двумя способами:

Включить средствами самой Тильды

  1. Перейдите в настройки своего проекта на Тильде.
  2. Откройте раздел «Ещё».
  3. Пролистайте до середины.
  4. Поставьте галочку напротив «Подключить jQuery на страницах сайта».
  5. Сохраните настройки.
  6. Переопубликуйте все страницы сайта на всякий случай.

Включить с помощью скрипта


  1. Перейдите в настройки своего проекта на Тильде.
  2. Откройте раздел «Ещё».
  3. Пролистайте до раздела «Html-код для вставки внутрь HEAD».
  4. Нажмите «Редактировать код».
  5. Вставьте последней строкой следующий скрипт:
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
Скопировать код
После чего сохраните изменения, сохраните настройки и переопубликуйте все страницы сайта.
Made on
Tilda