Как скруглить углы в тильде
Семь новых функций в Zero block для удобной работы в редакторе. Обновления ускорят работу с группами, анимацией и сделают работу с большим количеством элементов более комфортной. Рассказываем об обновлениях подробнее.
Групповой ресайз элементов
Позволяет изменить размер нескольких элементов сразу. Выделите элементы и потяните за любую сторону, чтобы уменьшить или увеличить их размер. Работает с несколькими элементами и группами.
Копирование анимации
Базовую и пошаговую анимацию элементов можно копировать между одиночными элементами и группами. Если вы копируете анимацию для группы, она будет добавлена для каждого элемента. Скопировать анимацию можно через контекстное меню или в настройках анимации в панели блока.
Расстояние до элементов и границ рабочей области
Линейки показывают расстояние в пикселях от выделенного элемента или группы до других элементов, групп и границ рабочей области. Выберите элемент, зажмите option для mac или alt для windows и наведите на рабочую область или другой элемент.
Подсветка размеров выделенной области
Показывается размер выделенной области в пикселях при выделении одного или нескольких элементов и групп.
Притяжение элементов друг к другу
Если элемент или группу переместить близко к другому элементу, группе, направляющим или к границам рабочей области, они примагнитятся.
Ресайз за любую границу элемента и группы
Менять размер элемента можно не только за якорь, а за любое место границы элемента. Работает с элементами и группами.
Подсветка элементов и групп при наведении
Элементы и группы подсвечиваются при наведении.
Новые блоки в библиотеке
Блок CR45. Обложка: текст и кнопка на изображении
На обложке ширина изображения регулируется в процентах, ширина текста — по колонкам. Можно задать отступы по бокам. Находится в категории «Обложка».
Блок CR46. Обложка: заголовок, подзаголовок, кнопки и колонки
В блоке настраивается любое количество колонок, для иконок можно выбрать стиль или загрузить своё изображение. Находится в категории «Обложка».
Блок CR09. Обложка с отступами по краям
Универсальная обложка не занимает весь экран. Можно настроить скругление углов, добавить заголовок, описание и кнопку. Находится в категории «Обложка».
Блок GL26. Галерея с миниатюрами
Галерея с миниатюрами внизу позволит быстрее ориентироваться в изображениях. Можно настроить размер превью и задать автоматическое листание по времени. Находится в категории «Галерея».
Блок BF802A. Кнопки с иконкой
Для кнопок гибко настраивается ширина и отступы, можно задать стиль и загрузить иконку. Подойдёт для создания мультиссылок для публикации в соцсетях. Находится в категории «Форма и кнопка».
Новые шаблоны для ваших проектов
Architecture
Строгий стиль, крупная типографика, акцент на фотографиях. Подойдет для сайта венчурного фонда, архитектурного бюро, студии дизайна интерьеров.
Color Cards
Яркие карточки, закругленные края, четыре акцентных цвета. Подойдет для лендинга онлайн-сервиса, главной магазина, страницы мероприятия.
Микрообновления в Интернет-магазинах
Обновление показа опций в карточке товара
Теперь в списке товаров магазина при выборе варианта товара меняется изображение в карточке. Это удобно, потому что пользователю не понадобится переходить в попап, чтобы увидеть, как выглядят разные варианты.
Функция доступна автоматически в блоках с карточками товара ST300, ST305N, ST310N, ST315 и ST320, если вы выводите товары с несколькими вариантами из каталога.
Чтобы в списке товаров отображались варианты, установите галочку «Показывать опции товара рядом с миниатюрой в списке товаров» в Настройках блока > Карточки.
Сортировка опций в карточке товара и фильтрах каталога
Автоматическая сортировка числовых значений опций товара с учетом единиц измерения в карточке товара и в фильтре каталога. Больше не придется переставлять параметры вручную для последовательного отображения. Работает для размеров одежды, чисел, ватт, байт, единиц изменения длины и веса (метрическая система).
Показ продукции в наличии и сортировка товаров на сайте по умолчанию
Появилась возможность при открытии страницы по умолчанию показывать уже отфильтрованные товары. Например, только те, которые есть в наличии и отсортированные по названию, цене, дате добавления и так далее. Обновление будет полезно, если вы запускаете рекламные кампании и для вас важен определенный порядок продуктов на странице. Работает в блоках ST300, ST305N, ST310N, ST315 и ST320. Задать изменения можно в Настройках блока > Фильтры и разделы.
Дополнительные параметры при скачивании каталога в CSV-формате
При экспорте товаров каталога в CSV-файл появилась возможность добавить выключенные товары, ссылки на изображения и на товар.
Заголовки товара без свойств при генерации Facebook Feed
Появилась настройка «Не добавлять свойства вариантов к заголовку товара» при создании фида. Если включить эту настройку, то для всех вариантов товара будет использоваться одинаковый заголовок, а значения свойств варианта будут добавлены к описанию товара.
Корзина товаров в Каталоге переместилась в меню модуля
Теперь в Каталоге корзина вынесена отдельным пунктом меню. Отображается только если есть удалённые товары.
Больше обновлений на платформе
Ручная настройка языка для системных элементов сайта
Появилась возможность вручную задать язык для системных элементов сайта: для поиска по сайту, форм, полей, ошибок, корзины, доставки, каталога и для потоков. Доступны французский, немецкий, испанский, португальский и другие языки.
По умолчанию язык системных сообщений адаптируется под браузер пользователя. Чтобы не терять гибкость, рекомендуем оставить настройку «По умолчанию». Где найти: Настройки сайта > Ещё > Язык сайта.
Новый дизайн главной страницы справочного центра
Обновлён дизайн и разделы главной страницы справочного центра. Вы сможете лучше ориентироваться в разделах, быстрее находить ответы на свои вопросы и материалы разного формата — обучающие статьи, видеотуториалы и тексты из Tilda Education.
Вакансии в Тильде
Мы растём и развиваемся, поэтому ищем
талантливых специалистов в команду мечты
Полный цикл поиска людей в различные департаменты, формирование кадрового резерва, онбординг новых сотрудников
SEO и поведение пользователя: сайт, который полюбят люди и поисковики
На позиции сайта в поиске всё сильнее влияет то, как пользователи взаимодействуют с ресурсом. Расскажем, как учесть поведение пользователя при разработке лендинга или сайта.
Скругление углов у Google Maps и Яндекс Карт
Очень простая модификация, которая добавляет скругление углов для блоков с картами T143 (Карта Google или Yandex) и CN401 (Контакты и карта в две колонки).
Посмотрите пример, чтобы понять, как работает модификация.
Выберите нужный вам блок, радиус скругления и просто скопируйте код, представленный ниже и вставьте его в блок T123 на странице под блоком с картами.
Если хотите, чтобы скругление углов применилось для всех карт на сайте, добавьте внутренность кода (то, что между тегами
) в общий CSS в настройках сайта.
Как скруглить углы в тильде
Чтобы узнавать первыми о новых модификациях — подпишитесь на мой телеграмм-канал. Также вы сможете общаться, задавать вопросы и помогать другим дизайнерам.
Старт второго потока курса
Если хочешь прокачать свои знания по css для тильды, научиться делать крутые модификации, как у меня на сайте и улучшить визуал своих проектов – то самое время идти на второй поток обучения!
5 недель практики без воды, 35+ уроков и домашних заданий
Записаться на обучение или попасть в чат предзаписи можно перейдя по кнопкам ниже
прокачай свои знания по работе со стандартными блоками в тильде
старт второго потока обучения по css для тильды
Скругления углов у карточек стандартных блоков
Смотрите обучающее видео на 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
Скруглить углы у видео с ютуба
Как можно победить этот момент. Загружаю видео с ютуба на сайт, для родительского элемента задаю 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 >>); >