ВИДЕО-ОБЗОР НА RUTUBE:
Предназначено ТОЛЬКО для ZERO-Блоков Tilda
Совместимо с анимацией!
Вы можете назначить любую стандартную или SBS-анимацию тексту, и он будет изменяться как одно целое с изображением.
ВНИМАНИЕ !!!
Код НЕ совместим с Автоскейлом! Это значит, что стабильная работа кода не гарантируется если на странице или в блоке используется Автоскейл (Autoscale).
Добавьте программный код из этого файла на свой сайт на Tilda в соответствии с инструкцией, и высота ZERO-блока будет автоматически меняться при переносе строк резинового текста в зависимости от его ширины.
После оплаты Вы получите:
- Программный код для решения проблем резиновой вёрстки и обтекания текстом картинки;
- Подробную видеоинструкцию по применению программного кода;
- Секретную ссылку на эту же видеоинструкцию на Youtube;
- Файл .png для подложки под стандартные элементы ZERO-блока
 |
1 покупка навсегда! Покупаете 1 раз и можете использовать в любом количестве проектов без ограничений во времени. |
Задать вопрос перед покупкой
Далее можете не читать (написано для SEO-продвижения сайта)
В конструкторе сайтов Тильда нет стандартных инструментов, автоматически меняющих высоту ZERO-блока при переносе текста на новые строки в резиновой вёрстке.
В этом ролике я расскажу о решении проблемы резиновой вёрстки текстов в ZERO-блоке в Тильде.
Когда мы привязываем ширину текста к ширине Window-контейнера, то при уменьшении этой ширины текст начинает переноситься на новые строки, и поэтому ему требуется теперь больше места по вертикали.
Если сразу оставлять больше места, это выглядит некрасиво на широких дисплеях. Если не оставлять, то на узких дисплеях текст просто не влезет в отведённое для него пространство.
Было бы круто, если бы зеро блок автоматически менялся по высоте, в зависимости от того, как ведёт себя текст. И есть конечно стандартные возможности Тильды, которые должны решать эту проблему – разная высота ZERO-блока для разных диапазонов ширины дисплея. Но кто этим пользовался, тот отлично понимает что результат не совсем удовлетворительный.
Решение этой проблемы я и реализовал в своём программном коде.
Мой код меняет высоту ZERO-блока в зависимости от того, сколько места требуется тексту. Это работает на любых браузерах и на всех размерах дисплеев, в том числе и на мобильных.
Кроме того, он позволяет вставлять в текст картинки и делать так, чтобы текст обтекал их по краям. Края могут быть ровные как у этой фотографии или неровные, как например, у изображений без фона типа PNG или SVG.
А ещё можно сделать так, чтобы текст обтекал любой объект в вашем ZERO-блоке: форму, кнопку, галерею, видео и так далее.
Вы можете включать или отключать выравнивание текста по ширине, то есть по правому и левому краям одновременно, а также устанавливать размер отступа красной строки перед абзацем или совсем отключить красную строку.
Вы можете позиционировать изображение по вертикали, выносить края изображения за пределы текстового блока, устанавливать размеры изображения фиксированными в пикселях или резиновыми в процентах. Можете задавать расстояние между текстом и изображением, размещать изображение справа или слева… И всё это совместимо со стандартной и SBS-анимацией! И таких ZERO-блоков с резиновой вёрсткой вы можете делать сколько угодно!
В общем, друзья, я постарался учесть все нюансы, чтобы вам было комфортно верстать и не стыдно за поведение текстов на ваших сайтах перед клиентами и заказчиками.
С этих пор вы окончательно влюбитесь в резиновую вёрстку, потому что это круто, современно, и это больше не будет доставлять вам проблем.
Спасибо, и удачи Вам!
Ключевые слова:
резиновая вёрстка тильда,
резиновая вёрстка tilda,
текст по виндоу контейнеру,
текст по window контейнеру,
выровнять текст в тильде,
текст по картинке тильда,
выравнивание текста tilda,
как выровнять текст по краю изображения в тильде,
обтекание картинки в тильде,
выровнять текст по изображению,
выравнивание текста в тильде,
картинка в тексте в тильде,
верстка текста в тильде,
обтекание изображения tilda,
обтекание картинки tilda,
как сделать обтекание картинки текстом,
обтекание текстом,
картинка в тексте на тильде,
изображение в тексте на тильде
