Как найти класс элемента в тильде - Autoru.top - решение различных проблем

Как узнать класс элемента в Zero Block

Периодически для редактирования блоков с HTML-кодом требуется знать класс элементов прописанных в этом коде. Рассказываем, как это сделать

/
/
Как узнать класс элемента в Zero Block

Мы работаем в браузере Google Chrome

Начнем с того, что нужно кликнуть правой кнопкой мыши по тому элементу, класс которого вы хотите узнать. В появившемся контекстном меню выберите пункт Просмотреть код(если вы работаете не в браузере Google Chrome, то этот пункт может называться иначе)
Убедитесь, что вы находитесь во вкладке Elements.

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

Класс элемента, в данном случае, на скриншоте мы подчеркнули линией красного цвета.

Класс имеет вид .tn-elem__2068601511470210224069
С недавнего времени в Тильде появилась возможность вручную задавать классы элементам в Zero Block.

Для того чтобы задать класс элементу зайдите в редактор Zero Block и кликните правой кнопкой мыши по нужному вам элементу. В появившемся контекстном меню выберите пункт Add CSS Class Name
В поле CSS CLASS NAME вы можете задать любое имя классу выбранного вами элемента и в дальнейшем использовать этот класс в своем HTML-коде

Помогло? Поделитесь мнением здесь, задайте вопросы в комментариях

Источник

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

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

Источник

<style>
.gradient {
        background: linear-gradient(45deg, #e9474a 0%, #70358f 50%, #1e4be2 100%);
        background: -webkit-linear-gradient(45deg, #e9474a 0%, #70358f 50%, #1e4be2 100%);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: rgba(255, 255, 255, 0); 
        -moz-text-fill-color: rgba(255, 255, 255, 0);
}

.gradient .tn-atom {
    display: inline;
}
</style>

Источник

Удобный инструмент для модификаций элементов в Zero Block

В октябре на платформе Tilda появилась удобная фишка — возможность присвоить свой CSS Class элементам в Zero block. Эта возможность избавила нас от колдунств в инспекторе кода, и выискиванием нужного элемента в надежде оформить его своими стилями. Теперь просто нужно вызвать контекстное меню, кликнув правой кнопкой мышки на элемент и добавить свой класс.

От чего такая радость?
— Да все предельно просто, наконец-то можно уйти от конструкции .addClass, при написании модификаций в Tilda, которые я выкладываю в своем блоге.
Теперь достаточно легко сделать градиент текста, добавить кастомную карусель в Zero block или добавить красивые эффекты кнопок в Tilda.
Теперь достаточно легко описывать единый стиль элементов глобально, для всего сайта. Короче — одни плюсы!

Если возник вопрос, задайте его в комментариях или через форму внизу страницы.
Не забудьте поделиться записью в соцсетях:)

AnKu

Тот, кто пишет

Напишите свой вопрос или предложение через форму ниже

Понравился материал? Поблагодари проект!

Источник

2022-03-14 16:49

Обновления

На примере стандартного блока IM01 я покажу, как можно настраивать стили блоков с помощью добавления к ним своих CSS классов.

Эффект: добавление к изображению обводки и скругления углов.

1/5
Добавим блок с фото IM01

2/5
В настройках блока, в самом низу, нажимаем на «Добавить CSS Class Name», чтобы открылось поле для ввода класса
3/5
Добавляем имя класса: cs-IM01
4/5
Ниже добавляем код со стилем:
<style>.uc-IM01 img {border: 1px solid #f3f3f3; border-radius: 10px;}</style>
5/5
Опубликовываем страницу и получаем результат — скругление углов с обводкой у стандартного блока с изображением IM01
Таким образом можно добавлять любой стиль к стандартным блокам, Zero Block и даже к элементам, внутри Zero Block (внутри Zero Block нажать на элемент правой кнопкой мыши — Add CSS Class Name).

Смотрите пример этого эффекта в фотографиях + почитайте интересную статью: ТОП-10 сервисов для бизнеса по созданию сайтов на Тильде

Источник

Не пропустите также: