Как уменьшить высоту блока в тильде

Выравниваем контент в стандартных блоках в Тильде по ширине на мобильных (код, CSS)

Как изменить ширину и отступ стандартного блока на мобильных устройствах на сайте, созданном на Тильде? Как создать и куда вставить код?

Проблема: Если Вы используете на сайте стандартные блоки и ZERO, верстаете в grid, можете столкнуться с тем, на мобильных устройствах ширина контента в стандартных блоках сильно отличается от ширины в zero-блоках.

Например, Вы сверстали блок с текстом, задали ему ширину на мобильных устройствах 300px. Следующий блок Вы добавили стандартный, например, TX01. На мобильных TX01 будет иметь другую ширину и другой отступ, что выглядит неаккуратно.

Для того, чтобы это исправить, нужно добавить блок T123 и код. Для данного примера (стандартный блок TX01) подходит следующий код:

Как мы получили этот код?

Заходим в браузер Firefox Developer Edition — Mozilla.
Рядом с поисковой строкой нажимаем на иконку Гаечный ключ, выбираем Адаптивный дизайн и нужное устройство, например, Iphone 11 pro. Перед нами открывается вид сайта на соответствующем устройстве.

Кликаем по контенту правой кнопкой мыши. Выбираем пункт Исследовать. Затем кликаем на иконку Выбрать элемент со страницы (скриншот).

Тыкаем на интересующий элемент: в нашем случае, на текстовый блок. Слева мы видим код и класс элемента. В средней колонке, в данном случае, видим стили элемента – цвет, шрифт, размер, насыщенность и прочее. И справа мы видим разметку блока. В данном случае, нам нужно задать для элемента с классом .t-text на устройствах @media screen and (max-width: 480px) , то есть на мобильных, такие же параметры, как и для нашего ZERO-блока:

width: 300px
padding-left: 20px

То есть мы меняем ширину и внутренний отступ. Вы можете задать эти параметры в разметке и увидите, что расположение и ширина контента изменились. Если это не сработало, то попробуется воздействовать на другой селектор (выберите другой элемент).

Теперь нам нужно из полученных данных создать рабочий код.

Мы понимаем, что нужно задать в коде брейкпоинт, то есть максимальную ширину экрана устройства, для которого мы хотим применить стиль.

В нашем случае это:
@media screen and (max-width: 480px). Пишем.

После этого ставим символ <

Затем пишем класс элемента, для которого будем применять стиль. В нашем случае, это .t-text (перед названием класса ставим всегда точку). Затем снова символ <

И затем сами параметры:

width: 300px !important;
padding-left: 20px !important;

( !important повышает приоритет нашего пользовательского стиля).

Затем закрываем параметры также двумя фигурными скобками:

Теперь осталось заключить код в теги:

Таким образом, Вы можете кастомизировать любые элементы на сайте на Тильде – менять отступы, цвета, радиусы скругления, добавлять тени и многое другое, что касается стилей элементов. Размеры, ширину, высоту блоков можно задавать также в %, hv, vw (при «резиновой» верстке).

Настройки блоков Тильды

Создадим какой-нибудь блок, например, текстовый.
Итак, у нас есть текст, выполненный черным цветом, расположенный посередине экрана:

Допустим, нам необходимо, чтобы отступы текста от края экрана или соседних блоков были больше. Чтобы изменить этот параметр, зайдем во вкладку Настройки, расположенную в верхнем левом углу блока, появляющуюся при наведении на блок курсора мыши:

Для каждого блока в настройках доступны:

ширина блока,
отступ слева,
выравнивание,
настройки типографики, позволяющие настроить отображение текста,
настройки анимации появления элементов на странице при загрузке и скроллинге,
верхний и нижний отступ от соседних блоков,
цвет фона для всего блока,
настройки видимости блока на различных разрешениях экранов. То есть Вы можете скрыть блок на том или ином устройстве,
конвертация блока в ZERO блок. Подробнее об этом — в отдельной статье.

Подробнее о настройках блока в сайтах на Тильде

Как настроить ширину блока в сайте на Тильда?

Напомним, что в Тильде для построения сайта используется 12-колоночная сетка.
Чтобы настроить ширину блока, нам необходимо указать количество колонок, которое будет занимать блок — от 1 до 12 колонок:

Изменив ширину блока, например, на 8 колонок, необходимо настроить отступ слева у этого блока. Так как блоком мы заняли 8 колонок, свободными у нас остаются 4 колонки. Если мы хотим, чтобы блок отображался по центру, тогда для отступа слева нужно задать 2 колонки (для отступа справа также останется 2 колонки: 4-2=2).

Выравнивание текстового содержимого блока в Тильде. Настройки типографики

по левому краю,
по центру,
по правому краю.

Настройки текста в Тильде

цвет текста,
размер шрифта,
шрифт,
межстрочное расстояние,
межбуквенное расстояние,
насыщенность текста,
начертание текста заглавными буквами,
отступы от текста сверху и снизу,
прозрачность текста.

Настройка анимации элементов блоков в Тильде

прозрачность,
прозрачность (снизу),
прозрачность (сверху),
прозрачность (справа),
прозрачность (увеличение).

Как задать отступы снизу и сверху блока Тильды

В Тильде имеются настройки для того, чтобы увеличить или уменьшить верхний и нижний отступы для блоков:

Отдельно можно указать отступы блока Тильды для мобильных устройств. Зачастую они должны быть меньше, чем отступы на экранах ПК, ноутбуков. Для этого нужно нажать на иконку с монитором, после чего появятся отдельные настройки отступов для экранов мобильных устройств:

Как настроить цвет фона для блока Тильды

Для того, чтобы указать цвет фона для блока Тильды, необходимо кликнуть мышью в соответствующее поле, после чего появится встроенная в Тильду палитра цветов, в которой Вы можете подобрать необходимый цвет. Либо напечатать в это поле код в формате hex заранее подготовленного цвета (например, #ff00ff). Такие цвета легко найти, воспользовавшись, например, поиском Яндекс или Гугл, также в макете сайта в Фотошопе, Фигме или другом графическом приложении, кроме того, цвет можно определить с помощью различных специализированных расширений для браузеров.

Как включить или отключить анимацию появления блоков Тильды

Для управления анимацией появления блоков сайта на Тильде в настройках предусмотрен переключатель — чекбокс:

Диапазон видимости блоков Тильды на различных устройствах

Блоки Тильды можно настраивать таким образом, что блок может быть виден на определенных разрешениях экрана, и при этом не будет отображаться на других. Сделать это можно, передвигая левый и правый ползунки соответствующей настройки блока:

В данной статье мы рассмотрели с Вами пример настройки простейшего текстового блока Тильды.
На самом деле это не исчерпывающий набор настроек. И для блоков других категорий Вы найдете множество дополнительных настроек: для изображений, кнопок, галерей, карточек и т.д.

Мы же в нашем блоге эти настройки будем рассматривать в соответствующих более подробных тематических статьях, посвященных уже конкретным видам блоков.

Как изменить размер высоты блока на странице в CMS Tilda?

Чтобы изменить высоту блока на странице в CMS Tilda, нужно зайти в редактор страницы и выбрать нужный блок. Затем навести курсор на нижнюю границу блока и кликнуть на нее. Появится панель инструментов с настройками блока. В разделе "Размер" можно задать высоту блока в пикселях или процентах. Также можно выбрать опцию "Авто", которая автоматически установит высоту блока в зависимости от его содержимого. После внесения изменений нужно сохранить страницу.

Zero Block: отзывчивый дизайн

Grid Container — основная рабочая область . В Grid Container используется та же сетка, что и в Тильде, 12 колонок (1200 px). Если мы располагаем элементы внутри Grid Container, то независимо от размера экрана они будут находиться внутри сетки из 12 колонок.

По оси X Grid Container всегда позиционируется по центру.

То же самое происходит с версиями для разных устройств: при переключении между экранами ширина Grid Container становится 980, 640, 480, 320 px, он остается неизменным и всегда по центру.

Высоту Grid Container можно задать в настройках артборда или потянув контейнер вверх / вниз с помощью мыши. Ее можно задавать для каждого разрешения свою. Высота Grid Container является высотой блока.

Но иногда требуется привязать элемент не к сетке, а к экрану. Например, вы хотите, чтобы логотип всегда был в левом верхнем углу любого экрана.

Для этого нужно открыть настройки элемента и поменять тип контейнера на Window Container. Начало координат сместится в левый верхний угол Window Container.

У каждого элемента в рабочей области есть координаты — положение относительно начала координат по оси X и по оси Y.

Выделите объект, откройте панель настроек (клавиша tab) и в самом верху вы увидите координаты объекта.

Мы предусмотрели, чтобы размер элементов так же мог задаваться в процентах. Таким образом получаются «резиновые» элементы, которые меняют размер, в зависимости от окна браузера.

Например, мы хотим, чтобы половина экрана всегда была желтая. Добавим фигуру и в настройках элемента зададим контейнер — Window Container , а для ширины и высоты поменяем единицы измерения на проценты вместо пикселей и зададим 50% ширины экрана и 100% высоты. Также в процентах можно задавать значения осей — если нужно, чтобы элемент всегда занимал правую половину экрана, поставим значение для оси X — 50%.

По умолчанию все элементы привязаны к Grid контейнеру — это прямоугольник с шириной 1200 пикселей на десктопе, он всегда расположен по центру экрана и имеет одинаковый размер, независимо от размера монитора.

С помощью функции автоматического масштабирования можно масштабировать все элементы, которые принадлежат Grid контейнеру, пропорционально ширине экрана или браузера. Grid контейнер будет занимать не фиксированную ширину 1200 пикселей, а растягиваться на всю ширину экрана. Все добавленные элементы будут пропорционально увеличены, чтобы занять весь экран.

Чтобы включить автоматическое масштабирование, откройте настройки артборда и найдите параметр Scale Grid Container. Выберите параметр Autoscale to Window Width и сохраните изменения.

Данная настройка позволит дизайну сайта адаптировался под любое разрешение, в том числе для HD-экранов. Настройка поможет избежать лишнего пустого пространства на экранах с высоким разрешением, а также ускорит работу дизайнера — не придётся тратить время на резиновую вёрстку.

При необходимости, вы можете установить автоматическое масштабирование для всех типов экрана или, например, только для мобильных устройств, установив настройку только в определенном диапазоне ширины экрана. Контейнер десктопной версии увеличивается от 1200px до 1920, 4К или даже 6К. В мобильной версии размер увеличивается от 320px.

Высота блока будет динамической: она будет изменяться пропорционально ширине при масштабировании блока.

Чтобы кнопка оставалась на нужном расстоянии от границ окна браузера, но не масштабировалась на разных разрешениях, задайте для неё координаты в Window Container. Используйте привязку к разным контейнерам, чтобы некоторые элементы в рамках одного блока масштабировать, а некоторые оставлять с фиксированным расстоянием от краёв браузера, но без изменения размера.

Будьте внимательны при загрузке изображений: они должны быть подходящего размера, чтобы не потерять в качестве при масштабировании под большие экраны.

Используйте векторные изображения в формате svg для иконок, а фоновые изображения и фотографии загружайте с запасом. В Тильде при загрузке большого изображения оно по умолчанию уменьшается до 1680 пикселей, но если вы нажмёте на иконку шестерёнки при загрузке, появится возможность загрузить изображение с размером 1920px по большей стороне. Переключите тумблер “Разрешить загрузку до 1920px”, а затем загрузите файлы. Изображения больше 1920px загрузить не получится, потому что такой размер будет влиять на производительность браузера и скорость загрузки сайта.