что такое скролл в тильде

Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода

1) Создаем два зеро блока. Один будет в начале страницы, второй в конце. Они нужны исключительно в технических целях. Контент на этих экранах быть не должен и лучше поставить им задний фон как на остальном сайте.

2) Создаем блоки, которые мы будем использовать.

4.2) И id всех блоков, которые нужны для горизонтальный секций. Обратите внимание, если у вас одна горизонтальная секция, тогда вам нужно просто написать в таком формате «#rec109090579, #rec109090580, #rec109090581». Если же у вас несколько горизонтальных секций, тогда вам нужно указывать как в первом варианте, но через запятую. В примере ниже показан вариант с двумя горизонтальными секциями. Обратите внимание на кавычки и запятую после третьего блока, это означает что закончилась одна секция и началась другая.
var sliders = [«#rec109090579, #rec109090580, #rec109090581», «#rec109090579, #rec109090580»];

6) В части 3 можно указать дополнительные настройки:
// Скорость скролла
scrollingSpeed: 600,
// Анимация
// Можно заменить «easeInOutCubic» на любую другую анимацию. Список анимаций вы можете найти тут:
// https://easings.net/ru
easing: «easeInOutCubic»,

// Управление клавиатурой
keyboardScrolling: true,

// Стрелки управления на горизонтальном скролле
controlArrows: true,

// Скролл с последнего экрана переводит на первый экран
loopBottom: true,

// Скролл с последнего экрана переводит на первый экран
loopTop: true,

Источник

Что такое скролл в тильде

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

1. Начнем с настройки Trigger offset / Точки начала анимации.

Точка отсчитывается относительно выбранной нами области, Window center.

Начните с верхнего объекта. Так удобнее рассчитать точки начала анимации для остальных. У него точка начала анимацииточка равна 0px. Это значит, что первый объект залипнет точно по центру экрана.

Нижний объект должен залипнуть когда коснется верхнего. Это значит, что его точка начала анимации будет ниже на высоту первого объекта. Ставим отступ100px.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

2. Настроим Distance / Дистанцию.

Это то расстояние, которое должен пройти объект в режиие фиксирования. Начните настройку анимации с нижнего объекта. Так вам будет удобнее рассчитать расстояние залипания.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Круг. Круг в режиме фиксации на экране проходит расстояние до квадрата. После этого эффект фиксации пропадает и обе фигуры скроллятся как обычно.

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

Источник

Что такое скролл в тильде

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

1. Начнем с настройки Trigger offset / Точки начала анимации.

Точка отсчитывается относительно выбранной нами области, Window center.

Начните с верхнего объекта. Так удобнее рассчитать точки начала анимации для остальных. У него точка начала анимацииточка равна 0px. Это значит, что первый объект залипнет точно по центру экрана.

Нижний объект должен залипнуть когда коснется верхнего. Это значит, что его точка начала анимации будет ниже на высоту первого объекта. Ставим отступ100px.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

2. Настроим Distance / Дистанцию.

Это то расстояние, которое должен пройти объект в режиие фиксирования. Начните настройку анимации с нижнего объекта. Так вам будет удобнее рассчитать расстояние залипания.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Круг. Круг в режиме фиксации на экране проходит расстояние до квадрата. После этого эффект фиксации пропадает и обе фигуры скроллятся как обычно.

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

Источник

Плавный скролл в Тильде

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

Всего есть два способа добавления плавного скролла к якорным ссылкам:

Рассмотрим каждый способ подробнее

Плавный скролл с помощью стандартных модификаторов

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

В настройках этого блока вы сможете:

Очень важно разместить этот блок плавного скролла в самом низу страницы.

Задать плавность в этом блоке, к сожалению нельзя. Также, модификатор будет применятся абсолютно к каждой якорной ссылке на странице. Но все это можно изменить с помощью следующего способа.

Плавный скролл с помощью javascript

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Зайдите в Контент блока и вставьте следующий код:

В этом коде вам нужно будет поменять nazvanie-yakorya на ваше название якорной ссылки. В коде так же можно поменять:

С помощью этого способа плавный скролл можно добавить к определенным якорям на странице в Тильде

А у вас получилось сделать плавный скролл хотя бы одним из способов?

Источник

Учимся работать с Tilda: создание отзывчивого дизайна в Zero-блоках

Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Типовые блоки «Тильды» сами подстраиваются под разные экраны — будь то телефон или Mac Pro. Но как только собираешь свой сайт на Zero-блоках, вёрстка плывёт. В этом уроке мы сверстаем несколько простых и красивых страниц сайта, которые будут одинаково хорошо выглядеть на всех устройствах.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикую переводы на хабре.

Что такое отзывчивый дизайн

Отзывчивый дизайн — это когда элементы сайта сами перераспределяются по экрану и подстраиваются под любое устройство. На «Тильде» необязательно создавать уникальный дизайн-макет для каждого разрешения — надо только грамотно расставить все элементы.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Сделать отзывчивый дизайн в «Тильде» можно двумя способами:

Создаём учебный Zero-блок

Для работы над проектом надо создать Zero-блок.

В настройках блока выставляем параметры как на картинке.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Когда вы создаёте Zero-блок, «Тильда» по умолчанию делает проект для десктопной версии экрана — он считается основным, поэтому вёрстку логичнее начать с него. Поменять экран можно на панели устройств.

Расположение элементов в десктопной версии

Теперь нам надо разместить в Zero-блоке макет — можете использовать свои заготовки или взять за основу проект Moon Tutorial, сайт астрофотографии.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Макет состоит из простых элементов:

Настройки для десктопной версии:

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Используйте комбинации клавиш, чтобы перемещаться по рабочей области (а не всему экрану) «Тильды»:

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Макет может занимать много больше места, чем ожидалось, панели будут мешать увидеть и оценить его общий вид. Нажмите Ctrl+ или Ctrl− несколько раз, чтобы уменьшить или увеличить зону рабочей области. При этом элементы окна браузера останутся на своих местах — то есть изменения произойдут только в рабочей области. Это особенность «Тильды». Изменение масштаба в процентах отображается в верхнем левом углу.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Собираем макет для планшета с горизонтальной ориентацией

Горизонтальная версия для планшета почти не отличается от десктопной, поэтому изменений будет немного. Основное отличие — фотография Луны растянется на весь экран. В результате получится вот такой макет.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

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

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Разрешение экрана можно посмотреть на этой же панели — просто наведите курсор на нужную иконку.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

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

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

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

Начинаем исправлять. Для этого задаём глобальные параметры GRID Container Height 640 px. Высоту окна не трогаем, оставляем 100%.

Следующим шагом масштабируем изображение Луны по высоте рабочей области и располагаем по центру.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Переносим логотип ближе к левому краю и выравниваем по вертикальной сетке.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Сиреневая рамка вокруг элемента означает, что объект позиционируется относительно контейнера окна, а синяя рамка — что относительно грид-контейнера.

Переходим к блоку описания изображения.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

По идее, текст не должен был сместиться относительно блока. Поэтому заглянем в десктопную версию и посмотрим, почему так произошло. За смещение элементов относительно друг друга и экрана отвечает настройка позиционирования ( Container) на панели Settings. Ищем решение проблемы там.

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

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Подложка позиционируется относительно грид-контейнера: по оси X — справа, по оси Y — сверху. Теперь проверяем эти же параметры у текстового блока. Выделяем текст и смотрим на значения.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Сразу видим несоответствие: текст позиционируется по оси X слева, в то время как подложка блока — справа. Меняем значение и проверяем: блоки текста автоматически выравниваются по правому краю.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

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

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Отлично, в версии для планшета текст больше не съезжает. Этот небольшой лайфхак позволил сократить время и не двигать каждый элемент отдельно — мы быстро скорректировали весь текстовый блок.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Теперь выделите текст вместе с подложкой, переместите на фотографию и выровняйте по сетке.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Осталось выровнять строку копирайта относительно логотипа, поставить на место нумерацию слайдов и сместить меню влево.

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

Инструменты выравнивания тут бессильны — не получится автоматически скорректировать расположенный вертикально текст относительно логотипа. Причина проста: контейнер текста располагается горизонтально, а сам текст — вертикально. Но выравнивание идёт относительно контейнера. Значит, этот элемент придётся перетаскивать вручную для каждого типа экрана.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

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

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

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

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

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

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

После всех корректировок и выравниваний элементов относительно друг друга получаем такую картинку.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Закрываем редактор Zero-блока, публикуем и просматриваем страницу.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Конечно, в идеале надо проверить макет на реальном планшете, но его может не оказаться под рукой, да и на этапе разработки это не очень удобно. Поэтому мы используем эмулятор различных устройств и экранов. Вызвать его можно клавишей F12. Другой вариант — щёлкнуть правой кнопкой мыши в любом месте экрана и выбрать пункт « Просмотреть код».

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Внизу появится панель разработчика. Я обычно перетаскиваю её слева или справа — так удобнее тестировать вёрстку. Для этого нажмите на троеточие в правой части панели и выберите нужное расположение.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Далее нажмите на иконку экранов и введите нужное разрешение экрана ( 960×640) в центральной панели.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

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

Собираем макет для планшета с вертикальной ориентацией

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

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Возвращаемся в редактор Zero-блока и переходим на версию для планшета с вертикальной ориентацией.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Могло быть и хуже. Вот что мы сделаем:

Первым делом выставляем нужную высоту в панели настроек. Рекомендую всегда начинать с этого действия — так удобнее работать.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

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

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Теперь переносим блок с текстом к левому краю и слегка вниз. Подложку блока увеличиваем, нумерацию слайдера ставим под текст, а сам текст на подложке выравниваем по сетке.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Сейчас текст маловат относительно блока — увеличим его. Начинаем с заголовка — Photo Moon. Кликните по нему и перейдите к панели настроек. Напротив Size (размер шрифта) задайте значение 70.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Отлично, заголовок увеличили, но возникла проблема — он вылез за пределы блока. Тут есть два решения:

1. Переходим в режим редактирования текста и переносим слово Moon на вторую строку.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Правда, теперь заголовок разобьётся на две строки на всех экранах. Это особенность «Тильды». Но есть второй способ.

2. Меняем размер контейнера текста вручную или с помощью настройки ширины контейнера.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

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

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

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

Теперь с помощью контейнера текста переносим слово Moon на вторую строку и уменьшаем параметр Spacing (межстрочный интервал) до единицы.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

С заголовком разобрались, теперь то же самое проделываем с текстом описания. Но для начала передвинем его под заголовок. Размер гарнитуры шрифта описания — 18, размер ссылки — 14, размер номеров в слайдере — 40, размер шрифта строки копирайта менять не надо.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Макет для вертикального экрана планшета собран. Осталось увеличить логотип и немного поправить его по сетке.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Готовый макет в «Тильде».

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Закрываем редактор Zero-блока, публикуем и просматриваем страницу.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Получилось достойно. В последнем блоке статьи переверстаем страничку под смартфон в вертикальном положении — а горизонтальный макет попробуйте сделать самостоятельно. Это хорошая практика.

Собираем макет для смартфона

Макет для смартфона будет существенно отличаться от предыдущих версий: мы уберём плашку, увеличим заголовок, покрасим его в белый цвет, описание перекрасим в серый, приглушим фотографию Луны, чтобы яркая картинка не перебивала восприятие текста, а потом немного увеличим логотип и меню. У нас получится такой макет. Годнота.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Переходим в редактор Zero-блока в режим редактирования макета для вертикально ориентированного смартфона.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Смотрим, как отображается макет по умолчанию.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Можно просто поправить обозначенные места на скриншоте, и работа будет завершена. Но мы же перфекционисты, а восприятие информации со смартфона отличается от восприятия с планшета или десктопа, так что внесём больше правок:

Начнём стандартно — выставим высоту экрана рабочей области.

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

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

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

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

На этом этапе у вас должно получиться что-то подобное:

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

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

что такое скролл в тильде. Смотреть фото что такое скролл в тильде. Смотреть картинку что такое скролл в тильде. Картинка про что такое скролл в тильде. Фото что такое скролл в тильде

Меняем цвет текста описания с помощью панели настроек.

Источник

Добавить комментарий

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