Class shape элемента в тильде как узнать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Class shape элемента в тильде как узнать

<style>
. coloroff <
transition: .3s ease;
>

. coloroff :hover <
filter: grayscale(100%);
>
</style>

<style>
. bluroff <
filter: blur(1px);
transition: .3s ease;
>

<style>
.t396__elem.bluroff <
overflow: hidden;
>

.bluroff .tn-atom <
filter: blur(3px);
transition: 0.2s ease;
transform: scale(1.01);
>

.bluroff .tn-atom:hover <
filter: none;
>
</style>

<style>
.t396__elem. zoomon <
overflow: hidden;
>

. zoomon .tn-atom <
transition: all 0.5s ease;
>

. zoomon .tn-atom:hover <
transform: scale(1.6);
>
</style>

<style>
.t396__elem. zoomoff <
overflow: hidden;
>

. zoomoff .tn-atom <
transform: scale(1.6);
transition: 0.5s ease;
>

. zoomoff .tn-atom:hover <
transform: none;
>
</style>

<style>
.t396__elem. zoomrotateon <
overflow: hidden;
>

. zoomrotateon .tn-atom <
transition: 0.5s ease;
>

. zoomrotateon .tn-atom:hover <
transform: scale(1.6) rotate(-20deg);
>
</style>

<style>
.t396__elem. zoomrotateoff <
overflow: hidden;
>

. zoomrotateoff .tn-atom <
transform: scale(1.6) rotate(-20deg);
transition: 0.5s ease;
>

. zoomrotateoff .tn-atom:hover <
transform: none;
>
</style>

<style>
.t396__elem. rotatecircle <
overflow: hidden;
>

. rotatecircle <
transition: all 0.6s ease;
>

. rotatecircle :hover <
border-radius: 100%;
transform: rotate(360deg);
>
</style>

<style>
.t396__elem. circleon <
overflow: hidden;
>

. circleon <
transition: 0.5s ease;
>

. circleon :hover <
border-radius: 100%;
>
</style>

<style>
.t396__elem. circleoff <
overflow: hidden;
>

. circleoff <
border-radius: 100%;
transition: 0.5s ease;
>

<style>
.t396__elem. mooveleft <
overflow: hidden;
>

.tn-elem. mooveleft .tn-atom <
transition: 0.5s ease;
background-position: center left !important;
>

.tn-elem. mooveleft :hover .tn-atom <
background-position: center right !important;
>
</style>

Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода

1) Создаем основной Zero блок и добавляем в него элемент «SHAPE», в котором будет наш слайдер. У «SHAPE» нужно убрать цвет заднего фона, рамки, тени.

2) Добавляем дополнительные несколько блоков, которые будут слайдами. Все элементы в слайдах должны быть выравнены «Container: Window — Left — Top». Положение этих элемента не меняем, всегда в левом верхнем углу, именно эту область будет «видеть» shape в первом блоке. Дополнительные элементы можно перемещать в границах этого элемента.Добавляем контент — изображения (обязательно отключаем lazy load), кнопки, текст, формы.

3) Размеры по высоте shape и элементов — слайдов должны быть одинаковы.

4) Вставляем код в блок T123 после всех Zero блоков действующих в скрипте
указываем вот эти параметры —
/* Указываем высоту слайда */
height: 300px !important;
/* Указываем ширину слайда */
width: 300px !important;

5) Узнаем id блоков, которые будут слайдами, блока в котором будет слайдер и class shape элемента, в основном блоке.

6) Заменяем id и class shape элемента в первых строках нашего кода.

8 строка — Id блока, в котором будет слайдер.
10 строка — class элемента, в котором будет слайдер.
12 строка — id блоков, через запятую, которые должны стать слайдами.

7) В блоке со слайдером добавляем два изображения под стрелочки и указываем им ссылки #slider_left для стрелочки влево и #slider_right для стрелочки вправо.

Настройки слайдера:
21 строка — цикличность слайдера.
25 строка — количество слайдов на одном экране (после изменения надо проверить чтобы все правильно отображалось)
28−43 строки — адаптивность. Можно изменить количество слайдов в мобильной или планшетной версии
(Номера строк будут видны когда разместите код в блок T123, в редакторе)

Как кастомизировать элемент shape в Zero Block TILDA?

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь тот же класс что и в генераторе;

2. Настраиваем размытие шейпа.

3. Настраиваем размер скругления нужных углов;

4. Настраиваем размытие фона. Здесь нужно обязательно указать цвет и прозрачность. Цвет и прозрачности внутри настроек зеро блока не будут учитываться.

4. Настраиваем внутреннюю тень;

5. Настраиваем градиент;

6. Копируем сгенерированный HTML код и вставляем его в CSS-СТИЛИ;

CSS-СТИЛИ находятся в Настройки сайта-Ещё-CSS-СТИЛИ

Конечный шейп со всеми настройками будет отображаться в редакторе и на опубликованной странице, внутри Зеро Блока увидеть получившиеся настройки нельзя((