NLM122 • Время настройки: 3 минуты
Автоскейл для стандартных блоков в Tilda без кода
Модификация позволит автоматически адаптировать размер стандартного блока или элемента в зависимости от содержимого или размеров экрана.
Она работает в связке с другими нашими решениями, чтобы вы могли пройти весь путь от макета до запуска сайта, не привлекая разработчиков.
Эта модификация — часть системы инструментов для работы с Тильдой
Перенесите макет в Тильду за 10 минут
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Плагин для Figma
AI-ассистент
Генератор CSS-стилей
Модификации
Расширение для Тильды
Работайте с модификациями внутри привычного редактора Тильды
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Ваш персональный AI-ассистент для Тильды
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Стандартные блоки Tilda не вписываются в дизайн?
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Добавьте уникальные функции в один клик
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
Установи ее в один клик прямо внутри Тильды — без копирования кода. Плюс еще 200 модификаций, инструменты для Zero Block и генератор CSS-стилей в привычном интерфейсе
Эта модификация есть в нашем расширении
4,7•20 000+ пользователей
Chrome Web Store•1,32 MB• бесплатно
Для корректной работы модификации включите поддержку jQuery. Подробнее. Как это сделать: Настройка сайта > Вставка кода > Подключить jQuery на страницах сайта.
Посмотрите, как будет выглядеть модификация на вашем сайте.
Дизайн настраиваете сами — наша модификация добавит нужный эффект.
Блог
В блоге кондитерской школы Вы найдете полезные статьи и подробные рецепты тортов и десертов
Смотрите, как быстро установить модификацию
Инструкция
Важно:
На данный момент модификация гарантированно работает корректно только с этими блоками: AB603, CN401, DV13, FD301, FD302, GL02, IX02, PL125N, SM403, ST305N, ST315N, SV402, SV502, TB301, TE215, TE600, TE605, TE610, TE800, TM102, TS204, TX13, TX16N2.
Это не значит, что автоскейл не сработает с другими стандартными блоками Тильды, но мы не можем гарантировать их правильное отображение с автоскейлом.
Настройки полей в генераторе:
Имей ввиду:
Важно:
На данный момент модификация гарантированно работает корректно только с этими блоками: AB603, CN401, DV13, FD301, FD302, GL02, IX02, PL125N, SM403, ST305N, ST315N, SV402, SV502, TB301, TE215, TE600, TE605, TE610, TE800, TM102, TS204, TX13, TX16N2.
Это не значит, что автоскейл не сработает с другими стандартными блоками Тильды, но мы не можем гарантировать их правильное отображение с автоскейлом.
Настройки полей в генераторе:
- «Блоки, которые нужно увеличивать, (если хотите увеличить все блоки, то оставьте поле пустым)» — укажи через запятую ID блоков, которым нужно добавить автоскейл, если хочешь добавить его ко всем блокам на странице оставь поле пустым;
- «Блоки, которые не нужно увеличивать» — укажи через запятую ID блоков, которым не нужно добавить автоскейл. Если уже выбраны блоки, которые нужно увеличивать, оставь это поле пустым;
- «Не применять zoom к popup» — включи этот чекбокс, если не хочешь увеличивать поп-апы;
- «Настройка пользовательского масштабирования (100 — 100%, 120 — 120%)» — для каждого breakpoint доступна возможность настройки пользовательского значения zoom. Это значение выражается в процентах. Значение 100 соответствует масштабу 100%, что означает отсутствие изменений;
- «Настройка отступов от края страницы» — для каждого breakpoint доступна возможность настройки отступов блоку в пикселях от края страницы;
- «Добавить элемент, у которых есть карточки, новости» — если используешь на странице блоки из раздела «Новости», «Отзывы» или «Магазин» для каждого breakpoint доступна возможность настройки количества карточек в ряд и отступов между карточками. Расстояние между колонками карточек регулирует горизонтальный отступ, а расстояние между строками карточек регулирует вертикальный отступ.
Имей ввиду:
- Автоскейл стандартных блоков в Тильде основан на 12‑колоночной сетке шириной 1200 px. Если на странице есть зероблоки с автоскейлом, в которых добавлены нестандартные брейкпоинты (отличные от 1200 px), то отступы и выравнивание в таких зероблоках могут масштабироваться иначе и не совпадать с отступами стандартных блоков — чтобы избежать расхождений, используй одинаковые брейкпоинты.
- Если блок отображается некорректно (например, часть переносится на другую строку), попробуй применить настройки для блоков с карточками. Даже если блок внешне не похож на карточки, включение параметров для карточек может улучшить верстку — например, выставить 2 карточки в ряд, чтобы элементы не разрывались.
- Если в блоках TX16N и TX16N2 отступы краёв неправильные, используй настройки для карточек. Задай количество карточек в ряд: 1 — одна колонка, 2 — две колонки и т. д.
- Вертикальный отступ между карточками в TX16N2 настраивается в модификации для элементов с карточками и новостями и равен расстоянию между строками карточек.
- Для двух колонок в TX16N и TX16N2 ширина блока должна быть 12 колонок. В разделе «Добавить элемент, у которых есть карточки, новости и т. п.» укажи ID блока и в генераторе задай 2 карточки в ряд. Чтобы настроить отступ между колонками, укажи расстояние между колонками карточек.
- В блоках с товарами не указывай «Два товара в ряд на мобильных устройствах». Количество карточек в ряд задается в настройках модификации.
- Для блоков TX01, TX13, ME605, МЕ606, CL46, BF802A нужно применить настройки для блоков с карточками. Настройки отступов можно выбирать любые. Ширина этих блоков должна быть 12 колонок.
- Расстояние между карточками в слайдерах (например, блоки FD401, TE800) будет стандартным.
- Если используешь автоскейл для блоков с картами, учитывай, что скрипт Яндекса не предназначен для работы с применением zoom. В результате точки на карте могут стать неактивными.
- Функция «Показывать карточки в один ряд на мобильных устройствах» работает только с блоками в настройках которых есть опция размещения «Показывать карточки в один ряд на мобильных устройствах».
- Если на странице с автоскейлом установлена модификация NLM048, рекомендуем добавлять id блока с кодом модификации NLM048 в поле «Блоки, которые не нужно увеличивать».
- Если в блоках с автоскейлом изображения выглядят «мыльными», отключи Lazy Load в настройках сайта. Как найти: Настройки сайта > Ещё > Выключить Lazy Load изображений.
Сгенерируйте код для своего сайта
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Автоскейл в Tilda — решение проблемы, которую все знают, но не все решают
Создаёшь красивый блок в Zero Block под 1920 пикселей. На 1440 — нормально. На 1280 — верстка начинает ломаться. На ноутбуке — элементы наплывают. Знакомо?
Автоскейл помогает сохранить пропорции блока на разных разрешениях. Вместо ручной перевёрстки под каждый экран ты задаёшь правила масштабирования: какие блоки увеличивать или уменьшать, какие оставить без изменений, какие отступы использовать и как вести себя на разных брейкпоинтах.
Автоскейл помогает сохранить пропорции блока на разных разрешениях. Вместо ручной перевёрстки под каждый экран ты задаёшь правила масштабирования: какие блоки увеличивать или уменьшать, какие оставить без изменений, какие отступы использовать и как вести себя на разных брейкпоинтах.
Как включить автоскейл в стандартном блоке Tilda?
Сначала включи jQuery в настройках сайта: Настройки сайта → Ещё → Подключить jQuery на страницах сайта. Затем открой генератор на странице модификации и укажи ID блоков, к которым нужно применить автоскейл.
Если нужно масштабировать все блоки на странице, поле с ID можно оставить пустым. Если часть блоков трогать нельзя — добавь их в список исключений. После настройки брейкпоинтов, zoom и отступов скопируй код, вставь его в блок T123 и опубликуй страницу.
Если нужно масштабировать все блоки на странице, поле с ID можно оставить пустым. Если часть блоков трогать нельзя — добавь их в список исключений. После настройки брейкпоинтов, zoom и отступов скопируй код, вставь его в блок T123 и опубликуй страницу.
Где используют автоскейл
Автоскейл в Tilda особенно полезен для сложных первых экранов, промо-блоков, карточек товаров, блоков с новостями, отзывами, тарифами и каталогами. То есть для тех мест, где важно сохранить композицию: размер заголовка, расстояние между элементами, положение кнопки, изображений и бейджей.
Например, в блоке товаров можно настроить количество карточек в ряд и расстояние между ними для разных разрешений. Это помогает избежать ситуации, когда на одном экране карточки выглядят аккуратно, а на другом начинают слипаться или переноситься не так, как задумано.
Например, в блоке товаров можно настроить количество карточек в ряд и расстояние между ними для разных разрешений. Это помогает избежать ситуации, когда на одном экране карточки выглядят аккуратно, а на другом начинают слипаться или переноситься не так, как задумано.
Чем автоскейл отличается от обычной адаптации
Обычная адаптация в Тильде часто требует вручную проверять каждый брейкпоинт и подгонять элементы. Автоскейл работает иначе: он пропорционально масштабирует выбранные блоки и помогает сохранить исходную логику макета.
Это не замена нормальной адаптивной верстке, а инструмент для ситуаций, где блок уже собран хорошо, но плохо переживает промежуточные разрешения. Особенно это заметно на ноутбуках и экранах 1280−1440 px, где стандартные настройки иногда дают неожиданные переносы.
Это не замена нормальной адаптивной верстке, а инструмент для ситуаций, где блок уже собран хорошо, но плохо переживает промежуточные разрешения. Особенно это заметно на ноутбуках и экранах 1280−1440 px, где стандартные настройки иногда дают неожиданные переносы.
Что важно настроить правильно
Главное — не включать автоскейл без проверки. Сначала выбери, какие блоки действительно должны масштабироваться, а какие лучше исключить: например, попапы, карты или отдельные технические блоки с кодом.
Для блоков с карточками, товарами и новостями лучше использовать отдельные настройки: количество карточек в ряд, горизонтальные и вертикальные отступы. Даже если блок визуально не похож на карточки, этот режим может помочь, когда элементы переносятся на новую строку или ломают сетку.
Для блоков с карточками, товарами и новостями лучше использовать отдельные настройки: количество карточек в ряд, горизонтальные и вертикальные отступы. Даже если блок визуально не похож на карточки, этот режим может помочь, когда элементы переносятся на новую строку или ломают сетку.
Что проверить после публикации
После установки проверь страницу на 1920, 1440, 1280, 1024 и мобильной версии. Обрати внимание на заголовки, кнопки, карточки, бейджи, изображения и попапы. Если изображения стали «мыльными», проверь настройки Lazy Load — иногда его лучше отключить для страниц с активным масштабированием.
Отдельно протестируй кликабельные элементы: кнопки, ссылки, карточки товаров, фильтры и карты. Автоскейл должен помогать верстке, а не мешать пользователю совершить действие. Если всё отображается ровно и клики работают корректно, модификация решает задачу быстрее, чем ручная перевёрстка каждого разрешения.
Отдельно протестируй кликабельные элементы: кнопки, ссылки, карточки товаров, фильтры и карты. Автоскейл должен помогать верстке, а не мешать пользователю совершить действие. Если всё отображается ровно и клики работают корректно, модификация решает задачу быстрее, чем ручная перевёрстка каждого разрешения.
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
Автоскейл — это режим масштабирования, при котором блок автоматически подстраивает свои размеры под ширину и высоту экрана пользователя. Не все стандартные блоки Tilda не поддерживают его из коробки — модификация Nolim включает autoscale для любого выбранного блока.
В генераторе на nolim. cc/autoscale укажи ID нужного блока и параметры масштабирования (минимальная и максимальная ширина, базовое разрешение). Скопируй код и вставь в блок «HTML-код» или в настройки страницы. После публикации блок будет масштабироваться пропорционально.
Да. Ты можешь задать отдельные параметры для мобильной версии: минимальный размер шрифта, пороговые значения ширины, при которых масштабирование включается или отключается. Это предотвращает слишком мелкий текст на маленьких экранах.
Было: дизайнер создал в Zero Block сложный Hero с крупным заголовком — на FullHD смотрелось отлично, на 1280 элементы начинали наплывать друг на друга.
Стало: модификация autoscale Nolim автоматически уменьшила блок на 1280 до 80% от исходного размера — верстка перестала ломаться. Потратил 10 минут вместо часа на ручное переверстывание.
Стало: модификация autoscale Nolim автоматически уменьшила блок на 1280 до 80% от исходного размера — верстка перестала ломаться. Потратил 10 минут вместо часа на ручное переверстывание.