Выравниваем контент в стандартных блоках в Тильде по ширине на мобильных (код, 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 (при «резиновой» верстке).
Как добавить код на сайт на Тильде?
- Добавить блок T123 на страницу, на которой требуется внести изменения и вставить в него код в вышеуказанном формате (код должен начинаться с тега
);
- Добавить код (таким же способом, как и в пункте 1) в футер или в хэдер, чтобы воздействовать на стиль элементов с таким же классом на всех страницах, где есть футер/хэдер;
- Добавить код в Настройки сайта – Еще – Пользовательские CSS-стили. В этом случае теги
в начале и в конце кода не потребуются.
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 является высотой блока.
Положение контейнеров относительно друг друга по оси Y
Если вы хотите, чтобы ваш блок занимал всегда 100% высоты экрана, для этого нужно задать высоту Window Container, отличную от высоты Grid Container. Соответственно, нужно в настройках артборда указать 100% высоты для Window Container.
Затем определить выравнивание Grid Container относительно экрана: сверху, по центру или по низу. По умолчанию стоит выравнивание по центру.
Изменение контейнера и начала координат для элемента
Изменение контeйнера
По умолчанию все элементы привязаны к Grid Container и начало координат находится в левом верхнем углу.
Но иногда требуется привязать элемент не к сетке, а к экрану. Например, вы хотите, чтобы логотип всегда был в левом верхнем углу любого экрана.
Для этого нужно открыть настройки элемента и поменять тип контейнера на Window Container. Начало координат сместится в левый верхний угол Window Container.
Теперь на любом экране логотип будет в левом верхнем углу.
Если мы хотим привязать элемент, например, к правому верхнему углу , то логика будет та же: задаем контейнер: Window Container и начало координат: ось X — right, ось Y — top.
Координаты элемента
У каждого элемента в рабочей области есть координаты — положение относительно начала координат по оси X и по оси Y.
Выделите объект, откройте панель настроек (клавиша tab) и в самом верху вы увидите координаты объекта.
Начало координат по умолчанию у всех элементов находится в левом верхнем углу Grid Container. Но оно может смещаться и находиться в одной из девяти точек прямоугольника: справа вверху, слева внизу и т.д.
Чтобы поменять положение начала координат, откройте меню +Container (по умолчанию оно свернуто).
Если вы зададите начало координат Center Center , то это упростит работу над адаптивной версией для разных экранов.
Создание «резиновых» элементов
Мы предусмотрели, чтобы размер элементов так же мог задаваться в процентах. Таким образом получаются «резиновые» элементы, которые меняют размер, в зависимости от окна браузера.
Например, мы хотим, чтобы половина экрана всегда была желтая. Добавим фигуру и в настройках элемента зададим контейнер — Window Container , а для ширины и высоты поменяем единицы измерения на проценты вместо пикселей и зададим 50% ширины экрана и 100% высоты. Также в процентах можно задавать значения осей — если нужно, чтобы элемент всегда занимал правую половину экрана, поставим значение для оси X — 50%.
На видео видно, что правая часть блока всегда заполняет половину экрана.
Параметры желтого прямоугольника: Container — Window, ширина — 50%, высота — 100%, смещение по оси Х — 50%.
Пример: создание полноэкранной обложки
Рассмотрим на примере как создать обложку со следующими параметрами:
— фоновое изображение занимает всю площадь экрана
— заголовок, подзаголовок и кнопка всегда по центру экрана
— стрелка «вниз» всегда по низу экрана
В настройках артборда добавим фоновое изображение и зададим ему параметр: Window Container Height — 100%.
Для заголовка, подзаголовка и кнопки определим начало координат — Center / Center и, при необходимости зададим смещение по оси Y.
Для стрелки назначим контейнер Window Container, начало координат: Center / Bottom и сместим ее на 70 пикселей вверх. Это значит, что кнопка всегда будет на 70 пикселей выше нижнего края окна браузера.
Посмотрим, что получилось: фоновая картинка заполняет всю область экрана, заголовок, текст и кнопка выровнились по центру, а стрелка — по низу.
Посмотреть пример вживую http://help.tilda.ws/zero-block-example
Масштабирование элементов под ширину экрана
По умолчанию все элементы привязаны к Grid контейнеру — это прямоугольник с шириной 1200 пикселей на десктопе, он всегда расположен по центру экрана и имеет одинаковый размер, независимо от размера монитора.
С помощью функции автоматического масштабирования можно масштабировать все элементы, которые принадлежат Grid контейнеру, пропорционально ширине экрана или браузера. Grid контейнер будет занимать не фиксированную ширину 1200 пикселей, а растягиваться на всю ширину экрана. Все добавленные элементы будут пропорционально увеличены, чтобы занять весь экран.
Чтобы включить автоматическое масштабирование, откройте настройки артборда и найдите параметр Scale Grid Container. Выберите параметр Autoscale to Window Width и сохраните изменения.
Данная настройка позволит дизайну сайта адаптировался под любое разрешение, в том числе для HD-экранов. Настройка поможет избежать лишнего пустого пространства на экранах с высоким разрешением, а также ускорит работу дизайнера — не придётся тратить время на резиновую вёрстку.
При необходимости, вы можете установить автоматическое масштабирование для всех типов экрана или, например, только для мобильных устройств, установив настройку только в определенном диапазоне ширины экрана. Контейнер десктопной версии увеличивается от 1200px до 1920, 4К или даже 6К. В мобильной версии размер увеличивается от 320px.
Высота блока будет динамической: она будет изменяться пропорционально ширине при масштабировании блока.
Важно: Данная настройка работает только для элементов, которые привязаны к Grid контейнеру и не будет влиять на элементы, привязанные к Window.
Особенности работы с масштабированием
Чтобы кнопка оставалась на нужном расстоянии от границ окна браузера, но не масштабировалась на разных разрешениях, задайте для неё координаты в Window Container. Используйте привязку к разным контейнерам, чтобы некоторые элементы в рамках одного блока масштабировать, а некоторые оставлять с фиксированным расстоянием от краёв браузера, но без изменения размера.
Будьте внимательны при загрузке изображений: они должны быть подходящего размера, чтобы не потерять в качестве при масштабировании под большие экраны.
Используйте векторные изображения в формате svg для иконок, а фоновые изображения и фотографии загружайте с запасом. В Тильде при загрузке большого изображения оно по умолчанию уменьшается до 1680 пикселей, но если вы нажмёте на иконку шестерёнки при загрузке, появится возможность загрузить изображение с размером 1920px по большей стороне. Переключите тумблер “Разрешить загрузку до 1920px”, а затем загрузите файлы. Изображения больше 1920px загрузить не получится, потому что такой размер будет влиять на производительность браузера и скорость загрузки сайта.
Как увеличить или уменьшить ширину блока сайта, созданного на Тильде
Стандартная ширина контентной части сайта, созданного на Тильде в десктопной версии составляет 1200 пикселей.
Как же нам быть, если наш дизайн предусматривает другие размеры?
Если по дизайну наш блок должен быть меньше, сделать его таким не составит труда, используя Zero блок и располагая в нем элементы так, как нам это необходимо. Если же необходимо уменьшить ширину блока с помощью кода, то делать это можно аналогично тому, как ниже в примере мы будем делать блок шире.
Как увеличить ширину блока в Тильде? Можно ли?
Да. Можно. Используя пользовательский код CSS, мы можем влиять на ширину отдельных блоков Тильды — как стандартных, так и Zero блоков.
Разберем на конкретном примере.
Добавим на страницу, например, блок AB201.
Видим, что контент блока расположен по центру экрана и занимает определенное место в нем.
С помощью инструментов разработчика (F12 в Яндекс-браузере, например) исследуем макет сайта и конкретно нашего блока.
Выясняем, что контент заключен в блоке
класс которого t-container,имеет ограничение ширины, равное 1200 пикселей, о котором упоминалось выше в посте.
Так вот, этот параметр мы с Вами изменим, например, на 1400 пикселей, тем самым увеличив ширину нашего блока на 200 пикселей.
Добавим на нашу страницу в Тильде блок из категории Другое — Т123 «HTML код».
И во вкладке Контент этого блока напишем следующее:
где #rec338186146 — это id нашего блока. Этот параметр Вы можете найти на вкладке Настройки необходимого блока (в самом низу).
Опубликуем страницу после внесенных изменений, увидим, что блок стал шире:
Однако, также заметим, что контент в этом блоке стал располагаться не по центру.
Исправим это следующими манипуляциями:
Во-первых, в Настройках блока, для параметра Отступ слева укажем Без отступа.
Получим:
Как видим из разметки в инструментах разработчика, заголовок блока и описание располагаются в div блоке
Очевидно, чтобы центрировать эти элементы, нам необходимо переопределить стили класса:t-col_8, но конкретно для нашего блока с указанием его id (на сайте, вероятно, будут присутствовать другие элементы с этим классом. Если мы не укажем id блока, то стили будут переопределены для всех элементов с классом t-col_8).
Итак, напишем в добавленный ранее блок с HTML кодом следующие строчки:
#rec338186146 .t-col_8 display: block;
float: none;
margin: 0 auto;
>
После сохранения внесенных изменений и публикации страницы увидим, что заголовок и описание блока теперь располагаются по центру:
Центрируем галерею изображений блока.
Также используя инструменты разработчика в браузере, видим, что контент с изображениями располагается в блоке div
Переопределять стили будем для класса:t-row. А точнее, не переопределять, а дописывать необходимые для решения нашей задачи.
В блок с HTML-кодом допишем строчки:
#rec338186146 .t-row display: flex;
justify-content: center;
>
Опубликуем страницу после внесенных изменений, увидим требуемый результат — ширина блока 1400 пикселей, контент располагается по центру:
Таким образом, мы научились увеличивать ширину блока в Тильде, используя пользовательский код.
Надо отметить, что пользовательский код доступен только на платных тарифах Тильды.
Пример был рассмотрен на отдельном несложном блоке. Аналогично Вы можете использовать этот прием и для других видов блоков. Однако, как видите, недостаточно изменить лишь одну ширину блока, так как вслед за этим на странице «поедут» другие элементы блока. Так что для них тоже необходимо будет вносить свои правки. Какие именно, все зависит от ситуации, которые бывают весьма различны. Очевидно, Вы должны обладать знаниями и навыками работы с инструментами разработчика браузера и знать основы HTML и CSS, чтобы понимать, какие именно нужно вносить изменения, чтобы влиять на элементы сайта.
Надеюсь, статья была Вам полезна и помогла в реализации Ваших задач.
Спасибо, что дочитали до конца!
Желаю Вам удачи!
Zero Block: создание собственных блоков
«Нулевой» блок (Zero Block) — это профессиональный редактор внутри Тильды, который позволяет реализовать любую идею, создавая блоки с собственным дизайном. Это как популярные графические редакторы. Только в Тильде.
Вы уже тут!
Проскрольте, чтобы начать читать
Обзорная статья по основным возможностям
Статья о работе с контейнерами и созданию «резиновых» элементов
Cписок всех комбинаций для ускорения работы
Cоздание единой схемы расположения всех элементов сайта
Справка по простой анимации: фиксации, параллаксу и анимации появления
Статья о сложной пошаговой анимации: основные принципы, настройки и примеры
Справка по сложной триггерной анимации: настройка и примеры
Как автоматически импортировать макет из Figma в Zero Block
Как добавить «Нулевой блок»
Чтобы добавить «Нулевой блок» на страницу, нажмите кнопку Zero внизу страницы. Либо выбeрите его в библиотеке блоков — он находится в самом низу, после категории «Другое».
Zero Block сохраняет основные функции обычного блока — его можно копировать, перемещать, удалять, прятать. У него есть настройки. Только вместо кнопки «Контент» кнопка «Редактировать блок». Ее нужно нажать, чтобы начать редактирование блока, откроется редактор.
Общее представление об интерфейсе
В «Нулевом блоке» две рабочих области или два «контейнера»: область сетки — Grid Container и Window Container — условное обозначение границ экранов браузера.
В Grid Container используется та же сетка, что и в Тильде, 12 колонок (1200 px). Если включить привязку объектов к Grid Contaner и располагать элементы внутри Grid Container, то они всегда будут в границах 12 колонок, независимо от размера экрана.
Grid Container — это основная, главная рабочая область.
Подробная информация о контейнерах содержится во второй части руководства: «Отзывчивый дизайн».
Добавление и редактирование элементов
Чтобы добавить элемент на страницу, нажмите «плюс» в левом верхнем углу. Вы можете добавить текст, изображение, объект, кнопку, видео, тултип, блок кода, форму или галерею.
Изображение также можно добавить, перетянув картинку из папки в область блока.
Редактирование элемента мышкой
В Zero Block поддерживаются все основные манипуляции, выполняемые с помощью мышки: элементы можно перемещать, менять размер, копировать (зажав клавишу Alt), выделять несколько объектов.
В элементах с изображением можно поменять размер, но пропорции исходной картинки всегда сохранятся .
В элементах с текстом высота меняется автоматически , в зависимости от объема текста.
Размер кнопки и фигуры меняется во всех направлениях.
Для операций с несколькими объектами нажмите: Cmd+A (выделить все объекты), либо, удерживая Shift, выделите мышкой те объекты, с которыми нужно работать.
Когда выделено несколько объектов, их можно выровнять по горизонтали и по вертикали относительно друг друга или относительно контейнера
Редактирование элемента с клавиатуры
Редактирование с клавиатуры значительно ускоряет работу, поэтому мы рекомендуем пользоваться горячими клавишами.
Поменять тип экрана
Спрятать сетку
Спрятать настройки
Спрятать управляющие элементы
Отмена последнего действия
Сохранить
Копировать элемент
Вставить элемент
Переместить элемент
Удалить элемент
Изменить прозрачность
Заблокировать элемент
Изменить размер шрифта
Изменить межстрочное расстояние
Изменить межбуквенное расстояние
Выделить все
Показать/спрятать слои
Добавить горизонт. направляющие
Добавить верт. направляющие
⌘+1. 5
G
TAB
F
⌘+Z
⌘+S
⌘+C
⌘+V
(Shift+) ←↑→↓
Backspace
0. 9
L
+ / –
⌘+ ↑ / ↓
⌘+ ← / →
⌘+A
⌘+L
⌘+H
⌘+Shift+H
(На Windows используйте Ctrl вместо ⌘)
Также список горячих клавиш вы найдете в контекстном меню «нулевого блока».
Редактирование через панель настроек
(Клавиша TAB)
Текст
Полные настройки элемента открываются при клике на кнопку Settings в правом нижнем углу экрана.
Открывать/закрывать панель настроек можно нажатием клавиши Tab.
По умолчанию панель настроек всегда свернута, чтобы рабочее пространство было свободнее.
Верхний ряд кнопок служит для быстрого выравнивания элемента относительно контейнера по вертикали и горизонтали .
Ниже — координаты положения элемента. Могут быть заданы в пикселях или в процентах. Ниже мы рассмотрим этот момент подробнее.
Начало координат обозначено синим крестиком .
Здесь же параметры элемента: ширина и высота. Единицы измерения — пиксели.
Изменение контейнера и начала координат для элемента
Чтобы поменять размер шрифта, используйте клавиши –/+
Cmd+стрелки вверх-вниз меняют межстрочное расстояние.
Cmd+стрелки влево-вправо меняют межбуквенное расстояние.
Чтобы скопировать элемент, зажмите Alt и потяните его .
Прозрачность удобно регулировать с помощью клавиш:
1 — 10%
2 — 20%
.
0 — 100%
Изображение
При загрузке картинка принимает размер фрейма, в который она загружается. Кнопка Original size в настройках возвращает изображению исходный размер.
Если вы хотите сделать фото в круге, задайте изображению радиус скругления.
Чтобы получился ровный круг, исходное фото должно быть квадратным, а радиус скругления равен половине длины стороны . То есть если у картинки размер 100×100 px, задайте радиус 50.
Для изображения можно добавить тень. Для этого в настройках выберите цвет тени, прозрачность, смещение по оси x и y, степень размытия и рассеивания.
Каждому изображению можно задать aльтернативный текст (тег alt) . Поисковые системы воспринимают альтернативный текст как ключевые слова и учитывают их при индексации. Напишите текст таким образом, чтобы он был релевантен содержанию сайта в целом и отражал содержание картинки.
Любое изображение можно сделать ссылкой — чтобы при клике на него пользователь переходил на другую страницу. Укажите в настройках ссылку и назначение: открывать в том же окне или в новом.
Фигура (Shape)
При добавлении фигуры на странице появляется квадрат, который можно трансформировать в прямоугольник, окружность или линию.
Прямоугольник : измените длины сторон, потянув мышкой за контрольные точки.
Либо задайте значения в настройках элемента.
Окружность. Чтобы получился круг, задайте в настройках радиус скругления, равный половине длины стороны квадрата.
Линия. Задайте в настройках высоту прямоугольника 1-5 px, получится линия.
Фигурам можно задавать тень, обводку и ставить на них ссылки.
Кнопка
У кнопки меняется размер, цвет, радиус скругления. Можно сделать обводку и добавить тень.
Надпись на кнопке и ссылка задаются в настройках . Там же настраивается типографика: размер, тип, насыщенность и цвет шрифта.
Кнопке можно задать реакцию: при наведении мышкой на кнопку она будет менять цвет фона, текста или обводки.
Тултип
Tooltip — это интерактивный элемент, при наведении на который появляется подсказка с текстом и/или изображением.
Тултипу можно настроить цвет, тень, размер, задать иконку, которая будет отображаться внутри кружка, загрузить изображение, которое будет всплывать при наведении и настроить анимацию.
Не забудьте после распределения всех элементов в блоке и использования тултипа проверить расположение всплывающей подсказки на всех разрешениях экранов, чтобы подсказка не обрезалась сверху или снизу блока или по его краям.
Использование тултипа для того, чтобы показать характеристики товара. Фото: SPERA.de
Форма
Вы можете добавить горизонтальную или вертикальную форму в «Нулевой блок» и применить все необходимые настройки: добавить поля для ввода, подключить сервисы приема данных, задать сообщения об успехе и ошибках, стиль формы и применить к ней анимацию.
Форма в нулевом блоке в блоге Tilda Publishing
Чтобы отредактировать поля формы, перейдите в Настройки элемента формы и далее в Input fields. Здесь вы можете отредактировать и настроить поля как в блоке обычной формы.
Для подключения сервисов приема данных перейдите в Настройки элемента формы и далее в Services. Здесь вы можете подключить интегрированные с сайтом сервисы приема данных.
Галерея
В Zero Block можно добавить галерею изображений. У галереи можно изменять ширину и высоту, как у элемента Shape.
Рассмотрим настройки галереи:
Stretch. Имеет два параметра: Cover и Contain.
При параметре Cover изображения будут полностью заполнять область галереи, таким образом могут обрезаться, если отличаются по формату от галереи.
При параметре Contain изображения внутри галереи будут всегда в исходном формате, таким образом при любом формате галереи не будут обрезаться.
Position. Определяет положение изображения относительно области галереи. Например, при параметре Left Top изображение будет расположено относительно левого верхнего угла галереи.
Loop. Эта настройка зацикливает слайды (изображения) в галерее. Имеет два параметра: Loop и None.
При параметре Loop слайды в галерее будут перелистываться бесконечно, то есть после последнего слайда будет идти первый.
При параметре None зацикливания не будет и на последнем слайде галерея закончится.
Slide Speed. Определяет вид анимации смены слайдов. Имеет три параметра: None, Slow и Fast.
При параметре None будет слайды будут перелистываться без анимации.
При параметре Slow слайды будут перелистываться медленно.
При параметре Fast слайды будут перелистывать быстро.
Autoplay. Определяет скорость автоматической смены слайдов в секундах. Если значение в секундах не задано, то автоматической смены слайдов не будет.
Zoomable. Добавляет возможность увеличивать изображения галереи по клику. Имеет два параметра: Zoom on Click и None.
При параметре Zoom on Click изображения будут увеличиваться по клику.
При параметре None изображения не будут увеличиваться по клику.
Arrows. Набор настроек, который определяет внешний вид стрелок (кнопок).
Dots. Набор настроек, который определяет внешний вид точек под галереей. Точки отображают количество слайдов.
У каждого слайда (изображения) есть индивидуальные настройки:
В них можно задать подпись к слайду (Image Caption), alt-тег для SEO, добавить видео из YouTube или Vimeo, а также добавить ссылку, по которой будет осуществлен переход при клике на этот слайд.