Как скруглить углы в тильде
Чтобы узнавать первыми о новых модификациях — подпишитесь на мой телеграмм-канал. Также вы сможете общаться, задавать вопросы и помогать другим дизайнерам.
Скругления углов у карточек стандартных блоков
Смотрите обучающее видео на YouTube канале
Скругления углов у карточек стандартных блоков
Graphic design is the process of visual communication and problem-solving
Ask for price
Information architecture is the art and science of structuring and organizing information
It is a form of solution-based thinking with the intent of producing a constructive future result
Read article
Для более удобного поиска, вы можете ввести номер блока в поле ниже и подтянется вся информация по нему
Введите номер блока
Классы для модификации
Вкладка «Видео» из библиотеки блоков
Блок; Контейнер; Изображение
VD06, VD06A ; .t223 iframe, .t223 .t-video-lazyload VD01 ; .t121 iframe, .t121 .t-video-lazyload VD08 ; .t230 .t-video-lazyload, .t-video-lazyload iframe VD03 ; .t230 .t-video-lazyload, .t-video-lazyload iframe VD05 ; .t212 video VD11 ; .t347__video-carier iframe, .t347__overlay, .t347__bg, .t347__table VD12 ; .t-video-lazyload iframe, .t368 .t-video-lazyload ; .t368__img
Блок; Контейнер; Изображение
BF501; .t-popup__container; .t281__img BF502N; .t-popup__container; .t702__img BF503; .t-popup__container; .t390__img BF920; .t-popup__container, .t862__quiz; .t862__quiz-description-wrapper ST500; t-popup__container; .t756 .t-slds__container ST505; .t-popup__container; .t766 .t-slds__container VD09 ; .t331__video-carier iframe VD10 ; .t358__video-carier, .t358__video-carier iframe
Вкладка «Плитка и ссылка» из библиотеки блоков
Блок; Контейнер; Изображение
TE100 ; .t686__col, .t686__table, .t686__cell, .t686__bg, .t686__overlay TE105 ; .t336__table TE210 ; .t649__blockimg TE215 ; .t688__inner-col TE225 ; .t774__wrapper TE110 ; .t694__col TE225 ; .t774__wrapper TE230 ; .t902__inner-col
Вкладка «Галерея» из библиотеки блоков
Блок; Контейнер; Изображение
GL02 ; .t667__bgimg GL03 ; .t214__blockimg GL04 ; .t155 .t-bgimg GL05 ; .t156 .t-img GL08N ; .t746__imgwrapper .t-slds__bgimg GL09 ; .t-beforeafter__slider GL12 ; .t603__blockimg GL13 ; .t660__bgimg GL14; .t661__bgimg GL15; .t662__bgimg GL16 ; .t218__blockimg GL17 ; .t663__bgimg GL20 ; .t604__imgwrapper .t-slds__bgimg GL22 ; .t816__bgimg GL23 ; .t827__grid-item, .t827__image GL24 ; .t909__bgimg GL25 ; .t979__image GL26 ; .t989 .t-slds__img GL27 ; .t994__slds-wrapper
Вкладка «Текстовый блок» из библиотеки блоков
Блок; Контейнер; Изображение
TX16N2 ; .t668__wrapper TX13 ; .t220__textwrapper TX15 ; .t203__textwrapper
Вкладка «Преимущества» из библиотеки блоков
Блок; Контейнер; Изображение
FR301 ; .t509__blockimg FR302N ; .t1066__img FR304 ; .t908__img FR601 ; .t939__card FR602 ; .t940__card
Вкладка «Список страниц» из библиотеки блоков
Блок; Контейнер; Изображение
IX02 ; .t404__img IX03 ; .t405__img IX07 ; .t401__overlay, .t401__table
Вкладка «Магазин» из библиотеки блоков
Блок; Контейнер; Изображение
Если товары добавлены через контент ST200 ; .t744__col .t-slds__main ST205, ST405 ; .t-slds__bgimg ST210 ; .t760__img ST215 ; .t922__textwrapper ST300 ; .t754__bgimg ST305N; .t776__bgimg ST315N; .t786__bgimg ST320N ; .t-store__card__bgimg, .t-store__card__bgimg_second ST330 ; .t1025__bgimg ST405 ; .t780 .t780__img .t-slds__item Если товары добавлены через каталог Тильды ST200 ; .js-product .t744__col .t-slds__container ST205 ; .js-product .t744__col .t-slds__container ST210 ; .js-product .t760__flexcolumn .t760__img ST215 ; .t922__textwrapper ST300, ST305N, ST315N, ST320N, ST330 ; .js-product .t-store__card__imgwrapper,.t-store__prod-popup__slider .t-slds__container ST310N ; .js-product .t-store__card__wrap_all, .t-store__prod-popup__slider .t-slds__container ST405 ; .js-product .t780__img .t-slds__item
Вкладка «Команда» из библиотеки блоков
Блок; Контейнер; Изображение
TM102 ; .t537__bgimg TM201 ; .t527__bgimg TM301 ; .t531__blockimg TM302 ; .t982__imgratio-wrapper TM401 ; .t532__table TM402 ; .t539__textwrapper; .t539__bgimg TM502 ; .t543__textwrapper TM601 ; .t544__blockimg TM602 ; .t545__textwrapper; .t545__blockimg
Вкладка «Услуги» из библиотеки блоков
Блок; Контейнер; Изображение
SV101 ; .t843__blockimg SV102 ; .t847__img SV306 ; .t842__inner-col; .t842__bgimg SV401 ; .t851__table SV402 ; .t853__bgimg SV403 ; .t856__table SV404 ; .t857__bgimg SV405 ; .t852__bgimg SV406 ; .t860__inner-col
Вкладка «Новости и потоки» из библиотеки блоков
Блок; Контейнер; Изображение
FD101; .js-feed-post-image FD201; .t-feed__post-bgimg FD301 ; .t-feed__post-bgimg FD302 ; .t-feed__col-grid__post-wrapper FD401; .t-feed__slider-grid__post-wrapper
Как кастомизировать элемент shape в Zero Block TILDA?
Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь тот же класс что и в генераторе;
2. Настраиваем размытие шейпа.
3. Настраиваем размер скругления нужных углов;
4. Настраиваем размытие фона. Здесь нужно обязательно указать цвет и прозрачность. Цвет и прозрачности внутри настроек зеро блока не будут учитываться.
4. Настраиваем внутреннюю тень;
5. Настраиваем градиент;
6. Копируем сгенерированный HTML код и вставляем его в CSS-СТИЛИ;
CSS-СТИЛИ находятся в Настройки сайта-Ещё-CSS-СТИЛИ
Конечный шейп со всеми настройками будет отображаться в редакторе и на опубликованной странице, внутри Зеро Блока увидеть получившиеся настройки нельзя((
Размытие настраивается на стороне Тильды — ссылка на инструкцию
Как скруглить углы в стандартных popup формах?
Модификация поможет скруглить углы в стандартных popup формах BF50N, BF502N, BF503, BF902(popup квиз)
Генератор кода
Радиус скругления
id блока(опционально см. инструкцию)
Войдите в аккаунт чтобы получить доступ к генератору кода
КОПИРОВАТЬ КОД
- Инструкция
- Пример
1. Выбираем тип блока который в котором нужно скруглить углы. Модификация работает с блоками (BF50N, BF502N, BF503, BF902);
2. Указываем дополнительные настройки:
Радиус скругления — указываем число для скругления углов
ID блока — оставляем пустым. Если у вас несколько одинаковых popup блоков и нужно скруглить углы только в конкретном блоке, то указываем id блока в это поле.
3. Копируем готовый код и вставляем в HTML блок T123
Скруглить углы у видео с ютуба
Как можно победить этот момент. Загружаю видео с ютуба на сайт, для родительского элемента задаю border-radius , сразу, при загрузке страницы всё нормально, углы скруглены, но после запуска видео оно вылазит за пределы родительского блока.
var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() < player = new YT.Player('player', < height: '160', width: '340', videoId: 'M7lc1UVf-VE', playerVars: < rel: 0, controls: 0, showinfo: 0 >>); >