# Встраивания
Встраивания позволяют интегрировать некоторые стандартные возможности редактора в ваш код.
Чтобы добавить встраивание, в нужном месте HTML кода нужно вставить:
cr-embed name="myname" /> Где myname — название встраивания, данное ему при добавлении.
# Редактируемый текст
Встроенный текст редактируется по клику.
Если в коде встречается несколько встраиваний текста с одним именем, то при изменении одного из них, все будут синхронизироваться.
# Загружаемая картинка
Элемент, в фоне которого загружаемая картинка. Размеры элемента нужно указывать через CSS.
Поскольку картинка в фоне, изначально высота элемента 0 пикселей. Следовательно, картинка не видна.
Поэтому если вы добавили встраивание картинки, а ее не видно — не переживайте, нужно просто настроить стили.
# Настраиваемая иконка
Иконка, которую так же можно изменить по клику.
Цвет иконки можно изменить, указав параметр color.
cr-embed name="myicon" color="black" /> Параметр color может принимать одно из следующих значений:
- white — Белый цвет
- black — Черный цвет
- _textcolor — цвет текста. На светлом фоне будет темным, а на темном — белым.
- Название переменной типа «Цвет».
Если в коде встречается несколько встраиваний иконки с одним именем, то при изменении любого из них, все будут синхронизироваться, но цвет у каждой иконки может быть свой уникальный.
# Контейнер для компонентов
Контейнер, внутрь которого перетаскивающем можно вставлять компоненты.
Компоненты пытаются автоматически определить цвет фона. Цвет текста и некоторых других элементов делаются констрастным фону.
Если контейнер ошибочно определяет цвет фона, на этот случай есть параметр colorside, который говорит компонентам, на светлом(light) фоне они находятся, или на темном(dark).
cr-embed name="myname" colorside="dark" /> Параметр colorside может принимать одно из следующих значений:
- light — Контейнер на светлом фоне
- dark — Контейнер на темном фоне
- Свойство .colorside переменной с типом «Цвет».
Если в коде встречается несколько контейнеров с одним именем, то все, кроме первого, будут удалены.
Стоит избегать изменений свойств overflow, transform и стилей текста (color, font-style и т.д.) если внутри элемента с этим свойством находится контейнер для компонентов.
Поддержка в Telegram-чате
Подскажем, как решить вашу задачу!
Мы все еще дописываем документацию для разработчиков, поэтому нам важно, чтобы вы писали, что с чем возникают трудности, и какие еще возможности нужно добавить.
Получение кода вставки
Для получения кода встраивания плеера зайдите в настройки трансляции, либо скопируйте код сразу при создании трансляции (код встраивания существует с трансляцией и не меняется все время ее хранения ).
Зайдите в настройки трансляции и найдите код встраивания в нижней части страницы настроек:
В данном блоке с настройками вы также можете:
- Выбрать дизайн встраиваемого плеера («Новый дизайн» и «Старый дизайн»).
- Выбрать настройку «Заполнять доступное пространство», что позволит автоматически подстраивать плеер под контейнер, в который он будет помещен.
- Получить прямую ссылку на страницу трансляции.
- Выбрать вариант встраивания: «с Javascript» или «без Javascript». Первый вариант подходит для встраивания на большинство сайтов и обладает дополнительными возможностями, например, в нем предусмотрена передача UTM-меток.
Второй вариант предлагается для встраивания на сайты, которые не поддерживают JavaScript. - После выбора варианта встраивания вы можете скопировать код для вставки на сайт. Он вставляется в виде обычного html кода.
Коды встраивания
Код встраивания определяет то, как веб-шрифты загружаются на ваш веб-сайт в браузере или в электронное письмо в формате HTML в почтовом клиенте.
Коды встраивания по умолчанию и коды встраивания @import используют только CSS для загрузки шрифтов (без JavaScript); их можно использовать для добавления шрифтов на веб-страницы, в сообщения электронной почты или информационные бюллетени в формате HTML, Google AMP, и многие другие типы проектов, в которых поддерживаются веб-шрифты. Загрузка шрифтов JavaScript используется для динамического подмножества, что требуется для работы с восточноазиатскими веб-шрифтами.
Код встраивания для каждого из ваших проектов можно найти на Странице веб-проектов.
Код встраивания по умолчанию
Код встраивания по умолчанию представляет собой один тег , который загружает CSS веб-проекта из сети шрифтов ( use.typekit.net ) в браузере.
Чтобы найти код встраивания по умолчанию для своего проекта, посетите страницу веб-проектов. Добавьте этот код встраивания к тегу на своем веб-сайте.
Вставка HTML кода
Если вам нужна какая-то специфичная функция, используйте блок T123 «HTML-код». Через него добавляется абсолютно любой код, включая теги script и style.
HTML код можно добавлять на страницу (внутрь тега
), либо в head сайта или страницы.Чтобы добавить блок на страницу, откройте Библиотеку блоков → Другое и добавьте блок T123.
HTML-код также возможно вставить как отдельный элемент в Zero Block. Принципы работы блока T123 и элемента HTML в Zero не имеют существенных отличий.
В режиме редактирования (и предпросмотра) код выводится просто текстом. Чтобы код заработал, страницу нужно опубликовать.
Вы можете использовать готовый код, который предлагают различные сервисы, либо, если вам нужен уникальный элемент, заказать код у программистов.
В блоке поддерживается HTML, JavaScript (нужно использовать тэг ) и CSS (нужно использовать тег ). Свой код PHP вставить на страницу не получится, но его можно добавить на свой сервер и отправлять на него данные с помощью приемщика Webhook.
T123: список горячих клавиш
- Ctrl+F для Windows
- ⌘+F для MacOS
- Ctrl+Space для Windows
- Ctrl+Space или ⌘+Shift+Space для MacOS
Чтобы избежать влияния на внешний вид и работоспособность интерфейса Тильды, рекомендуется не использовать теги и универсальные классы в качестве селекторов для кастомных стилей. Также не рекомендуется использовать селектор «*». Вместо этого стоит использовать уникальные классы или ID, которые не будут конфликтовать с уже существующими стилями на странице Тильды. Таким образом, вы сможете применять кастомные стили к вашим элементам без влияния на другие элементы на странице редактора блоков.
Как добавить HTML-код в head сайта или страницы
Чтобы добавить код перед закрывающим тегом head, нужно зайти: «Настройки сайта» → «Еще» → «HTML-код для вставки внутрь head».
Чтобы добавить код в head на отдельной странице, нужно зайти: «Настройки страницы» → «Дополнительно» → «HTML-код для вставки внутрь head».