Block css class name что это

25 ФЕВРАЛЯ 2022
CSS-класс для блоков

В настройках блоков появилась возможность задавать CSS-класс. Эта функция позволит удобнее работать с модификациями: вы задаёте класс блоку и указываете его название в html-коде.

Примеры и пошаговая инструкция, как применить новую функцию.

Градиент на текстовом блоке

Renner Yoga offers unique yoga classes for people of all skill levels. We will introduce you to a new way of life and feelings.

Как сделать

1 шаг
Добавьте блок с большим текстом, например, AB501.

Откройте настройки блока, нажмите Добавить CSS Class Name;
Задайте название класса, например, uc-about.

Добавьте блок T123 HTML-код;
Скопируйте код ниже и вставьте его в блок T123.

 .uc-about .t-title

→ Сохраните изменения и опубликуйте страницу

Скруглённые фотографии
Some Words About Us

We are an interior design studio based in Wales. We work in three contemporary design styles: functional minimalism, eco, and modernist nouveau. We have a database of designers and architects inside and outside the company.

Добавление CSS класса к любому элементу в Zero Block

Новый функционал в Зеро Блок позволяет добавлять индивидуальные стили ко всем элементам: текст, фото, шейп, кнопка.

Для того, чтобы добавить стиль к элементу нужно:
1. Зайти в Зеро Блок
2. Добавить любой элемент
3. Нажать на него правой кнопкой мыши
4. Нажать на Add CSS Class Name
5. Справа в меню указать название класса
6. Добавьте стиль в HTML блок или в индивидуальный CSS в общих настройках сайта

Основы создания стилей компонентов

У всех встроенных компонентов сайтов одинаковая структура класса CSS.

Каждый компонент имеет следующие три класса CSS, примененные к крайнему элементу :

scs-component scs-type design-style

type — это тип компонента (например, image , gallery или divider ). design-style — это выбранный класс стиля компонента, как определено в файле темы.

Основы стилей темы

В файле design.json темы перечисляются все стили ( frame , shadow , highlighted и т. д.), которые можно применить к компонентам всех типов (таким как button или image ). У каждого стиля есть display name и class name . Отображаемое имя отображается на вкладке Стиль панели Настройки . Имя класса указывает на селектор CSS в файле design.css темы. Например, запись для компонента button выглядит следующим образом:

"scs-button": < "styles": [< "name": "COMP_STYLE_ALTA_SMALL", "class": "scs-button-default-style" >, < "name": "COMP_STYLE_ALTA_LARGE", "class": "scs-button-style-2" >, < "name": "COMP_STYLE_SIMPLE", "class": "scs-button-style-3" >] >,

Имена встроенных компонентов переводятся, поэтому отображается ключ для получения имени стиля из пакета ресурсов. Если добавить на страницу компонент button , а затем выбрать Простой стиль на панели Настройки > Стиль , файл design.json связывает отображаемое имя Простой (ключ COMP_STYLE_SIMPLE ) с именем класса scs-button-style-3 . Элемент button визуализируется со следующими классами:

scs-component scs-button scs-button-style-3

Если для заданного компонента стиль не выбран, используется стиль по умолчанию scs-type-default-style . В предыдущем примере кнопка визуализируется со следующими классами:

scs-component scs-button scs-button-default-style

Для каждого встроенного компонента, в элементе scs-component , упомянутом ранее, существует элемент с CSS-классом scs-component-content . Другими словами:

scs-component scs-type design-style scs-component-content

В файле design.css класс scs-component-content часто используется для стилизации «рамки» вокруг компонента (например, для применения границы или тени).

Читать:

Как снять руль nissan primera p12

Следует отметить, что во встроенном файле comp.css общий класс scs-component-content определяется со свойствами position:relative и display:inline-block помимо других свойств CSS .

Хотя стиль scs-component-content полезен для стилизации «рамки» вокруг каждого компонента, для полного определения стиля компонента необходимы классы, характерные от компонента. См. Стили для компонентов.

CSS-класс для элементов в Zero block Tilda

Пожалуйста, внимательно и пошагово выполняйте инструкцию, во избежание ошибок!

В этой статье я покажу несколько способов добавления css класса элементам в тильда.

Данный пример простой, просто нужно скопировать код на страницу, а ссылку из скрипта вставить в кнопку.

Кнопка отправляет форму, которая находится в 1-м зеро блоке с ней.

Пример 1

Первым рассмотрим стандартный способ, он работает в Zero block

Инструкция

Кликаем в Zero блоке на любой элемент правой кнопкой мыши (это вызовет контекстное меню, как на изображении №1)
Выбираем пункт «Add CSS Class Name»
В открывшемся окне настроек справа, выбираем поле «CSS CLASS»
Пишем своё значение

CSS класс указывать без точки, как показано на изображении №2.
Данным способом можно присвоить 1 класс.

Пример 2

Второй способ несложный, добавим класс с помощью скрипта, так же к элементу в Zero блоке.

Инструкция

Выполняем действие из примера №1 (присвойте элементу класс стандартным способом, например css-class-main
Создаём блок T123 и добавляем в него код
В первую часть (где указан css-class-main) впишите своё значение из п.1, во вторую часть (где указан new-class впишите класс, который хотите добавить этому элементу.

Если необходимо присвоить несколько классов, то просто впишите их через пробел, без запятых и точек, например new-class new-class-second

Помните, что элементы zero блока создают дочерний элемент с классом tn-atom. Поэтому, когда вы пишите стили для них, используйте конструкцию вида .new-class .tn-atom .

Пример 3

В третьем примере мы добавим свой класс элементу из стандартного блока, для этого нам нужно будет воспользоваться инспектором кода в браузере.
Я написал стили для данной кнопки, кликните по ней и они применятся.

Инструкция

На опубликованной странице открываете инспектор кода
Выбираете на странице элемент, которому хотите присвоить css класс, как на изображении №1
Копируете его класс (изображение №2, класс кнопки .t142__submit)
Добавляете его в первую часть скрипта