0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#Руководства</a></p>
1
<p><a>#Руководства</a></p>
2
<ul><li>23 мар 2021</li>
2
<ul><li>23 мар 2021</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Адаптировать сайт под разные устройства и экраны - та ещё задача. Разбираемся, как сделать это в Zero-блоках на "Тильде".</p>
4
</ul><p>Адаптировать сайт под разные устройства и экраны - та ещё задача. Разбираемся, как сделать это в Zero-блоках на "Тильде".</p>
5
<p>Автор статей по дизайну. В веб-дизайн пришёл в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил вёрстку. Время от времени публикую переводы на Habr.</p>
5
<p>Автор статей по дизайну. В веб-дизайн пришёл в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил вёрстку. Время от времени публикую переводы на Habr.</p>
6
<p>Типовые блоки "Тильды" сами подстраиваются под разные экраны - будь то телефон или Mac Pro. Но как только собираешь свой сайт на Zero-блоках, вёрстка плывёт. В этом уроке мы сверстаем несколько простых и красивых страниц сайта, которые будут одинаково хорошо выглядеть на всех устройствах.</p>
6
<p>Типовые блоки "Тильды" сами подстраиваются под разные экраны - будь то телефон или Mac Pro. Но как только собираешь свой сайт на Zero-блоках, вёрстка плывёт. В этом уроке мы сверстаем несколько простых и красивых страниц сайта, которые будут одинаково хорошо выглядеть на всех устройствах.</p>
7
<p><strong>Содержание</strong></p>
7
<p><strong>Содержание</strong></p>
8
<ul><li><a>Что такое отзывчивый дизайн</a></li>
8
<ul><li><a>Что такое отзывчивый дизайн</a></li>
9
<li><a>Создаём учебный Zero-блок</a></li>
9
<li><a>Создаём учебный Zero-блок</a></li>
10
<li><a>Расположение элементов в десктопной версии</a></li>
10
<li><a>Расположение элементов в десктопной версии</a></li>
11
<li><a>Собираем макет для планшета с горизонтальной ориентацией</a></li>
11
<li><a>Собираем макет для планшета с горизонтальной ориентацией</a></li>
12
<li><a>Собираем макет для планшета с вертикальной ориентацией</a></li>
12
<li><a>Собираем макет для планшета с вертикальной ориентацией</a></li>
13
<li><a>Собираем макет для смартфона</a></li>
13
<li><a>Собираем макет для смартфона</a></li>
14
<li><a>Заключение</a></li>
14
<li><a>Заключение</a></li>
15
</ul><p>Отзывчивый дизайн - это когда элементы сайта сами перераспределяются по экрану и подстраиваются под любое устройство. На "Тильде" необязательно создавать уникальный дизайн-макет для каждого разрешения - надо только грамотно расставить все элементы.</p>
15
</ul><p>Отзывчивый дизайн - это когда элементы сайта сами перераспределяются по экрану и подстраиваются под любое устройство. На "Тильде" необязательно создавать уникальный дизайн-макет для каждого разрешения - надо только грамотно расставить все элементы.</p>
16
<p>Сделать отзывчивый дизайн в "Тильде" можно двумя способами:</p>
16
<p>Сделать отзывчивый дизайн в "Тильде" можно двумя способами:</p>
17
<ul><li><strong>Автоматически</strong>. Когда вы используете готовые блоки, а отзывчивая версия уже настроена под все устройства. Их нельзя кастомизировать. Максимум - показать или скрыть на разных разрешениях экрана.</li>
17
<ul><li><strong>Автоматически</strong>. Когда вы используете готовые блоки, а отзывчивая версия уже настроена под все устройства. Их нельзя кастомизировать. Максимум - показать или скрыть на разных разрешениях экрана.</li>
18
<li><strong>Ручной режим</strong>. Работает только в Zero-блоках. Макет придётся корректировать под каждое разрешение, зато такой подход даст дизайнеру свободу действий - всё можно настроить очень гибко.</li>
18
<li><strong>Ручной режим</strong>. Работает только в Zero-блоках. Макет придётся корректировать под каждое разрешение, зато такой подход даст дизайнеру свободу действий - всё можно настроить очень гибко.</li>
19
</ul><p>Для работы над проектом надо создать Zero-блок.</p>
19
</ul><p>Для работы над проектом надо создать Zero-блок.</p>
20
<p>В настройках блока выставляем параметры как на картинке.</p>
20
<p>В настройках блока выставляем параметры как на картинке.</p>
21
Указываем параметры десктопной версии Zero-блока<p>Когда вы создаёте Zero-блок, "Тильда" по умолчанию делает проект для десктопной версии экрана - он считается основным, поэтому вёрстку логичнее начать с него. Поменять экран можно на панели устройств.</p>
21
Указываем параметры десктопной версии Zero-блока<p>Когда вы создаёте Zero-блок, "Тильда" по умолчанию делает проект для десктопной версии экрана - он считается основным, поэтому вёрстку логичнее начать с него. Поменять экран можно на панели устройств.</p>
22
<p>Теперь нам надо разместить в Zero-блоке макет - можете использовать свои заготовки или взять за основу проект<a>Moon Tutorial</a>, сайт астрофотографии.</p>
22
<p>Теперь нам надо разместить в Zero-блоке макет - можете использовать свои заготовки или взять за основу проект<a>Moon Tutorial</a>, сайт астрофотографии.</p>
23
Макет для десктопа Moon Tutorial<p>Макет состоит из простых элементов:</p>
23
Макет для десктопа Moon Tutorial<p>Макет состоит из простых элементов:</p>
24
<ul><li>логотип;</li>
24
<ul><li>логотип;</li>
25
<li>фотография Луны (слайдер);</li>
25
<li>фотография Луны (слайдер);</li>
26
<li>номера слайдов от 1 до 7;</li>
26
<li>номера слайдов от 1 до 7;</li>
27
<li>меню;</li>
27
<li>меню;</li>
28
<li>блок с описанием фотографии;</li>
28
<li>блок с описанием фотографии;</li>
29
<li>поле с указанием авторских прав;</li>
29
<li>поле с указанием авторских прав;</li>
30
<li>фон (цвет фона - #111a30).</li>
30
<li>фон (цвет фона - #111a30).</li>
31
</ul><p>Настройки для десктопной версии:</p>
31
</ul><p>Настройки для десктопной версии:</p>
32
<ul><li>800 px по высоте рабочей области (Grid Container) - чтобы было удобнее работать в редакторе;</li>
32
<ul><li>800 px по высоте рабочей области (Grid Container) - чтобы было удобнее работать в редакторе;</li>
33
<li>100% высоты экрана (Window Container) - чтобы при публикации макет растягивался на весь экран.</li>
33
<li>100% высоты экрана (Window Container) - чтобы при публикации макет растягивался на весь экран.</li>
34
</ul><p>Используйте комбинации клавиш, чтобы перемещаться по рабочей области (а не всему экрану) "Тильды":</p>
34
</ul><p>Используйте комбинации клавиш, чтобы перемещаться по рабочей области (а не всему экрану) "Тильды":</p>
35
<ul><li>Shift + колёсико мыши - перемещение<em>рабочей области</em>по горизонтали.</li>
35
<ul><li>Shift + колёсико мыши - перемещение<em>рабочей области</em>по горизонтали.</li>
36
<li>Alt + колёсико мыши - перемещение<em>рабочей области</em>по вертикали.</li>
36
<li>Alt + колёсико мыши - перемещение<em>рабочей области</em>по вертикали.</li>
37
</ul>Перемещение рабочей области экрана с помощью горячих клавиш<p>Макет может занимать много больше места, чем ожидалось, панели будут мешать увидеть и оценить его общий вид. Нажмите Ctrl+ или Ctrl- несколько раз, чтобы уменьшить или увеличить зону рабочей области. При этом элементы окна браузера останутся на своих местах - то есть изменения произойдут только в рабочей области. Это особенность "Тильды". Изменение масштаба в процентах отображается в верхнем левом углу.</p>
37
</ul>Перемещение рабочей области экрана с помощью горячих клавиш<p>Макет может занимать много больше места, чем ожидалось, панели будут мешать увидеть и оценить его общий вид. Нажмите Ctrl+ или Ctrl- несколько раз, чтобы уменьшить или увеличить зону рабочей области. При этом элементы окна браузера останутся на своих местах - то есть изменения произойдут только в рабочей области. Это особенность "Тильды". Изменение масштаба в процентах отображается в верхнем левом углу.</p>
38
Меняем масштаб рабочей области<p>Горизонтальная версия для планшета почти не отличается от десктопной, поэтому изменений будет немного. Основное отличие - фотография Луны растянется на весь экран. В результате получится вот такой макет.</p>
38
Меняем масштаб рабочей области<p>Горизонтальная версия для планшета почти не отличается от десктопной, поэтому изменений будет немного. Основное отличие - фотография Луны растянется на весь экран. В результате получится вот такой макет.</p>
39
<p>Перейти с десктопной версии на планшет можно с помощью панели для работы с отзывчивым дизайном - она расположена вверху в центре. Тут есть иконки для основных экранов устройств:</p>
39
<p>Перейти с десктопной версии на планшет можно с помощью панели для работы с отзывчивым дизайном - она расположена вверху в центре. Тут есть иконки для основных экранов устройств:</p>
40
<ul><li>Десктоп - 1200 х max.</li>
40
<ul><li>Десктоп - 1200 х max.</li>
41
<li>Планшет горизонтальной ориентации - 960×1200.</li>
41
<li>Планшет горизонтальной ориентации - 960×1200.</li>
42
<li>Планшет вертикальной ориентации - 640×960.</li>
42
<li>Планшет вертикальной ориентации - 640×960.</li>
43
<li>Смартфон в горизонтальном положении - 480×640.</li>
43
<li>Смартфон в горизонтальном положении - 480×640.</li>
44
<li>Смартфон в вертикальном положении - 320×480.</li>
44
<li>Смартфон в вертикальном положении - 320×480.</li>
45
</ul><p>Разрешение экрана можно посмотреть на этой же панели - просто наведите курсор на нужную иконку.</p>
45
</ul><p>Разрешение экрана можно посмотреть на этой же панели - просто наведите курсор на нужную иконку.</p>
46
В разрешении экрана указывается только диапазон по ширине<p>Нажимаем на иконку планшета и переходим в рабочую область экрана планшета - нас встретит такая безрадостная картина.</p>
46
В разрешении экрана указывается только диапазон по ширине<p>Нажимаем на иконку планшета и переходим в рабочую область экрана планшета - нас встретит такая безрадостная картина.</p>
47
Экран планшета - мы мечтали о Луне, но вёрстка поплыла<p>Практически все элементы в беспорядке - блоки текста уехали вправо за границы экрана рабочей области, меню последовало за ними, нумерация слайдов перекрыла строку авторских прав.</p>
47
Экран планшета - мы мечтали о Луне, но вёрстка поплыла<p>Практически все элементы в беспорядке - блоки текста уехали вправо за границы экрана рабочей области, меню последовало за ними, нумерация слайдов перекрыла строку авторских прав.</p>
48
<p>Начинаем исправлять. Для этого задаём глобальные параметры<a>GRID Container Height</a>640 px. Высоту окна не трогаем, оставляем 100%.</p>
48
<p>Начинаем исправлять. Для этого задаём глобальные параметры<a>GRID Container Height</a>640 px. Высоту окна не трогаем, оставляем 100%.</p>
49
<p>Следующим шагом масштабируем изображение Луны по высоте рабочей области и располагаем по центру.</p>
49
<p>Следующим шагом масштабируем изображение Луны по высоте рабочей области и располагаем по центру.</p>
50
Центруем фотографию Луны относительно рабочей области<p>Переносим логотип ближе к левому краю и выравниваем по вертикальной сетке.</p>
50
Центруем фотографию Луны относительно рабочей области<p>Переносим логотип ближе к левому краю и выравниваем по вертикальной сетке.</p>
51
Выравниваем логотип<p>Сиреневая рамка вокруг элемента означает, что объект позиционируется относительно контейнера окна, а синяя рамка - что относительно грид-контейнера.</p>
51
Выравниваем логотип<p>Сиреневая рамка вокруг элемента означает, что объект позиционируется относительно контейнера окна, а синяя рамка - что относительно грид-контейнера.</p>
52
<p>Переходим к блоку описания изображения.</p>
52
<p>Переходим к блоку описания изображения.</p>
53
<p>По идее, текст не должен был сместиться относительно блока. Поэтому заглянем в десктопную версию и посмотрим, почему так произошло. За смещение элементов относительно друг друга и экрана отвечает настройка позиционирования (Container) на панели Settings. Ищем решение проблемы там.</p>
53
<p>По идее, текст не должен был сместиться относительно блока. Поэтому заглянем в десктопную версию и посмотрим, почему так произошло. За смещение элементов относительно друг друга и экрана отвечает настройка позиционирования (Container) на панели Settings. Ищем решение проблемы там.</p>
54
<p>Выделяем подложку блока описания и переходим на панель настроек. На панели открываем строку Container и смотрим, какие значения указаны для подложки блока описания.</p>
54
<p>Выделяем подложку блока описания и переходим на панель настроек. На панели открываем строку Container и смотрим, какие значения указаны для подложки блока описания.</p>
55
Проверяем настройки позиционирования блока описания на десктопной версии<p>Подложка позиционируется относительно грид-контейнера: по оси X - справа, по оси Y - сверху. Теперь проверяем эти же параметры у текстового блока. Выделяем текст и смотрим на значения.</p>
55
Проверяем настройки позиционирования блока описания на десктопной версии<p>Подложка позиционируется относительно грид-контейнера: по оси X - справа, по оси Y - сверху. Теперь проверяем эти же параметры у текстового блока. Выделяем текст и смотрим на значения.</p>
56
Смотрим параметры для текста<p>Сразу видим несоответствие: текст позиционируется по оси X слева, в то время как подложка блока - справа. Меняем значение и проверяем: блоки текста автоматически выравниваются по правому краю.</p>
56
Смотрим параметры для текста<p>Сразу видим несоответствие: текст позиционируется по оси X слева, в то время как подложка блока - справа. Меняем значение и проверяем: блоки текста автоматически выравниваются по правому краю.</p>
57
Меняем расположение текста относительно оси X<p>Теперь необходимо сделать выключку текста влево. Для этого используем инструмент выравнивания элементов на панели настроек и двигаем текстовые блоки немного правее, чтобы они не прилипали к левому краю.</p>
57
Меняем расположение текста относительно оси X<p>Теперь необходимо сделать выключку текста влево. Для этого используем инструмент выравнивания элементов на панели настроек и двигаем текстовые блоки немного правее, чтобы они не прилипали к левому краю.</p>
58
Выравниваем текст относительно левого края<p>Отлично, в версии для планшета текст больше не съезжает. Этот небольшой лайфхак позволил сократить время и не двигать каждый элемент отдельно - мы быстро скорректировали весь текстовый блок.</p>
58
Выравниваем текст относительно левого края<p>Отлично, в версии для планшета текст больше не съезжает. Этот небольшой лайфхак позволил сократить время и не двигать каждый элемент отдельно - мы быстро скорректировали весь текстовый блок.</p>
59
Тестируем на экране планшета<p>Теперь выделите текст вместе с подложкой, переместите на фотографию и выровняйте по сетке.</p>
59
Тестируем на экране планшета<p>Теперь выделите текст вместе с подложкой, переместите на фотографию и выровняйте по сетке.</p>
60
Перемещаем блок описания и выравниваем по сетке относительно фотографии<p>Осталось выровнять строку копирайта относительно логотипа, поставить на место нумерацию слайдов и сместить меню влево.</p>
60
Перемещаем блок описания и выравниваем по сетке относительно фотографии<p>Осталось выровнять строку копирайта относительно логотипа, поставить на место нумерацию слайдов и сместить меню влево.</p>
61
<p>Выделяем строку авторских прав, перетаскиваем левее и выше, ставим на одну вертикальную линию с логотипом, а низ ровняем по основанию подложки.</p>
61
<p>Выделяем строку авторских прав, перетаскиваем левее и выше, ставим на одну вертикальную линию с логотипом, а низ ровняем по основанию подложки.</p>
62
<p>Инструменты выравнивания тут бессильны - не получится автоматически скорректировать расположенный вертикально текст относительно логотипа. Причина проста: контейнер текста располагается горизонтально, а сам текст - вертикально. Но выравнивание идёт относительно контейнера. Значит, этот элемент придётся перетаскивать вручную для каждого типа экрана.</p>
62
<p>Инструменты выравнивания тут бессильны - не получится автоматически скорректировать расположенный вертикально текст относительно логотипа. Причина проста: контейнер текста располагается горизонтально, а сам текст - вертикально. Но выравнивание идёт относительно контейнера. Значит, этот элемент придётся перетаскивать вручную для каждого типа экрана.</p>
63
Автоматически не выравнивается, нужно ручками<p>Поэтому выравниваем элемент вручную по сетке. Потом ровняем меню - делаем тот же отступ, что и для логотипа, только справа. Нумерацию слайдера выравниваем по подложке блока описания.</p>
63
Автоматически не выравнивается, нужно ручками<p>Поэтому выравниваем элемент вручную по сетке. Потом ровняем меню - делаем тот же отступ, что и для логотипа, только справа. Нумерацию слайдера выравниваем по подложке блока описания.</p>
64
Выравниваем нумерацию слайдера относительно блока описания<p>Тут тоже есть нюанс: текст не прилипает к своему контейнеру, а значит, после выравнивания текст будет располагаться чуть выше подложки - хотя формально они находятся на одной высоте. Если такой вариант вас не устраивает - корректируем ручками.</p>
64
Выравниваем нумерацию слайдера относительно блока описания<p>Тут тоже есть нюанс: текст не прилипает к своему контейнеру, а значит, после выравнивания текст будет располагаться чуть выше подложки - хотя формально они находятся на одной высоте. Если такой вариант вас не устраивает - корректируем ручками.</p>
65
Выравнивание относительно контейнера цифр, а не самих цифр<p>Ещё один важный момент: меню, логотип, чаты и другие функциональные элементы, которые обычно располагаются по краям, старайтесь позиционировать с помощью Window Container. Так с ними будет проще работать на разных экранах.</p>
65
Выравнивание относительно контейнера цифр, а не самих цифр<p>Ещё один важный момент: меню, логотип, чаты и другие функциональные элементы, которые обычно располагаются по краям, старайтесь позиционировать с помощью Window Container. Так с ними будет проще работать на разных экранах.</p>
66
Позиционируем логотип относительно окна контейнера<p>После всех корректировок и выравниваний элементов относительно друг друга получаем такую картинку.</p>
66
Позиционируем логотип относительно окна контейнера<p>После всех корректировок и выравниваний элементов относительно друг друга получаем такую картинку.</p>
67
Готовый макет для планшета<p>Закрываем редактор Zero-блока, публикуем и просматриваем страницу.</p>
67
Готовый макет для планшета<p>Закрываем редактор Zero-блока, публикуем и просматриваем страницу.</p>
68
Вкладка с опубликованным макетом десктопной версии<p>Конечно, в идеале надо проверить макет на реальном планшете, но его может не оказаться под рукой, да и на этапе разработки это не очень удобно. Поэтому мы используем эмулятор различных устройств и экранов. Вызвать его можно клавишей F12. Другой вариант - щёлкнуть правой кнопкой мыши в любом месте экрана и выбрать пункт "Просмотреть код".</p>
68
Вкладка с опубликованным макетом десктопной версии<p>Конечно, в идеале надо проверить макет на реальном планшете, но его может не оказаться под рукой, да и на этапе разработки это не очень удобно. Поэтому мы используем эмулятор различных устройств и экранов. Вызвать его можно клавишей F12. Другой вариант - щёлкнуть правой кнопкой мыши в любом месте экрана и выбрать пункт "Просмотреть код".</p>
69
<p>Внизу появится панель разработчика. Я обычно перетаскиваю её слева или справа - так удобнее тестировать вёрстку. Для этого нажмите на троеточие в правой части панели и выберите нужное расположение.</p>
69
<p>Внизу появится панель разработчика. Я обычно перетаскиваю её слева или справа - так удобнее тестировать вёрстку. Для этого нажмите на троеточие в правой части панели и выберите нужное расположение.</p>
70
Выбираем расположение панели разработчика<p>Далее нажмите на иконку экранов и введите нужное разрешение экрана (960×640) в центральной панели.</p>
70
Выбираем расположение панели разработчика<p>Далее нажмите на иконку экранов и введите нужное разрешение экрана (960×640) в центральной панели.</p>
71
Указываем разрешение экрана<p>У нас получился добротный макет для планшета с горизонтальной ориентацией экрана.</p>
71
Указываем разрешение экрана<p>У нас получился добротный макет для планшета с горизонтальной ориентацией экрана.</p>
72
<p>Для вертикальной версии планшета макет будет немного отличаться - текстовые блоки с подложкой перенесём влево, строку копирайта - вправо, увеличим нумерацию слайдера и немного увеличим меню и логотип. Результат будет таким.</p>
72
<p>Для вертикальной версии планшета макет будет немного отличаться - текстовые блоки с подложкой перенесём влево, строку копирайта - вправо, увеличим нумерацию слайдера и немного увеличим меню и логотип. Результат будет таким.</p>
73
<p>Возвращаемся в редактор Zero-блока и переходим на версию для планшета с вертикальной ориентацией.</p>
73
<p>Возвращаемся в редактор Zero-блока и переходим на версию для планшета с вертикальной ориентацией.</p>
74
<p>Вот что мы увидим.</p>
74
<p>Вот что мы увидим.</p>
75
<p>Могло быть и хуже. Вот что мы сделаем:</p>
75
<p>Могло быть и хуже. Вот что мы сделаем:</p>
76
<ul><li>Слегка уменьшим плашку с текстом по горизонтали и увеличим по вертикали.</li>
76
<ul><li>Слегка уменьшим плашку с текстом по горизонтали и увеличим по вертикали.</li>
77
<li>Сместим плашку влево.</li>
77
<li>Сместим плашку влево.</li>
78
<li>Слово MOON перенесём на следующую строку.</li>
78
<li>Слово MOON перенесём на следующую строку.</li>
79
<li>Нумерацию слайдера сместим вниз и немного увеличим.</li>
79
<li>Нумерацию слайдера сместим вниз и немного увеличим.</li>
80
<li>Фотографию сдвинем вправо - останется только часть Луны. Так она не будет перекрывать меню и логотип.</li>
80
<li>Фотографию сдвинем вправо - останется только часть Луны. Так она не будет перекрывать меню и логотип.</li>
81
</ul><p>Первым делом выставляем нужную высоту в панели настроек. Рекомендую всегда начинать с этого действия - так удобнее работать.</p>
81
</ul><p>Первым делом выставляем нужную высоту в панели настроек. Рекомендую всегда начинать с этого действия - так удобнее работать.</p>
82
Указываем высоту рабочей области<p>Теперь увеличиваем изображение Луны, чтобы оно было по всей высоте экрана, и выравниваем картинку по левому краю. То, что не входит в основную часть экрана, не будет отображаться на сайте.</p>
82
Указываем высоту рабочей области<p>Теперь увеличиваем изображение Луны, чтобы оно было по всей высоте экрана, и выравниваем картинку по левому краю. То, что не входит в основную часть экрана, не будет отображаться на сайте.</p>
83
<p>Теперь переносим блок с текстом к левому краю и слегка вниз. Подложку блока увеличиваем, нумерацию слайдера ставим под текст, а сам текст на подложке выравниваем по сетке.</p>
83
<p>Теперь переносим блок с текстом к левому краю и слегка вниз. Подложку блока увеличиваем, нумерацию слайдера ставим под текст, а сам текст на подложке выравниваем по сетке.</p>
84
Перемещаем и выравниваем элементы<p>Сейчас текст маловат относительно блока - увеличим его. Начинаем с заголовка - Photo Moon. Кликните по нему и перейдите к панели настроек. Напротив Size (размер шрифта) задайте значение 70.</p>
84
Перемещаем и выравниваем элементы<p>Сейчас текст маловат относительно блока - увеличим его. Начинаем с заголовка - Photo Moon. Кликните по нему и перейдите к панели настроек. Напротив Size (размер шрифта) задайте значение 70.</p>
85
Увеличиваем заголовок блока<p>Отлично, заголовок увеличили, но возникла проблема - он вылез за пределы блока. Тут есть два решения:</p>
85
Увеличиваем заголовок блока<p>Отлично, заголовок увеличили, но возникла проблема - он вылез за пределы блока. Тут есть два решения:</p>
86
<p>1. Переходим в режим редактирования текста и переносим слово Moon на вторую строку.</p>
86
<p>1. Переходим в режим редактирования текста и переносим слово Moon на вторую строку.</p>
87
<p>Правда, теперь заголовок разобьётся на две строки на всех экранах. Это особенность "Тильды". Но есть второй способ.</p>
87
<p>Правда, теперь заголовок разобьётся на две строки на всех экранах. Это особенность "Тильды". Но есть второй способ.</p>
88
<p>2. Меняем размер контейнера текста вручную или с помощью настройки ширины контейнера.</p>
88
<p>2. Меняем размер контейнера текста вручную или с помощью настройки ширины контейнера.</p>
89
<p>Ширину контейнера можно указать в пикселях и процентах. Чтобы поменять шкалу, нажмите на значок пикселей справа от значения и выберите проценты.</p>
89
<p>Ширину контейнера можно указать в пикселях и процентах. Чтобы поменять шкалу, нажмите на значок пикселей справа от значения и выберите проценты.</p>
90
Выбираем проценты<p>Проценты можно использовать для автоматической подстройки текста под разрешение экрана. Но такой способ уменьшает контроль над блоками текста и элементами, которые находятся рядом.</p>
90
Выбираем проценты<p>Проценты можно использовать для автоматической подстройки текста под разрешение экрана. Но такой способ уменьшает контроль над блоками текста и элементами, которые находятся рядом.</p>
91
<p>Теперь с помощью контейнера текста переносим слово Moon на вторую строку и уменьшаем параметр Spacing (межстрочный интервал) до единицы.</p>
91
<p>Теперь с помощью контейнера текста переносим слово Moon на вторую строку и уменьшаем параметр Spacing (межстрочный интервал) до единицы.</p>
92
Переносим слово на вторую строку и уменьшаем межстрочный интервал <p>С заголовком разобрались, теперь то же самое проделываем с текстом описания. Но для начала передвинем его под заголовок. Размер гарнитуры шрифта описания - 18, размер ссылки - 14, размер номеров в слайдере - 40, размер шрифта строки копирайта менять не надо.</p>
92
Переносим слово на вторую строку и уменьшаем межстрочный интервал <p>С заголовком разобрались, теперь то же самое проделываем с текстом описания. Но для начала передвинем его под заголовок. Размер гарнитуры шрифта описания - 18, размер ссылки - 14, размер номеров в слайдере - 40, размер шрифта строки копирайта менять не надо.</p>
93
<p>Макет для вертикального экрана планшета собран. Осталось увеличить логотип и немного поправить его по сетке.</p>
93
<p>Макет для вертикального экрана планшета собран. Осталось увеличить логотип и немного поправить его по сетке.</p>
94
Выравниваем и увеличиваем логотип <p>Готовый макет в "Тильде".</p>
94
Выравниваем и увеличиваем логотип <p>Готовый макет в "Тильде".</p>
95
<p>Закрываем редактор Zero-блока, публикуем и просматриваем страницу.</p>
95
<p>Закрываем редактор Zero-блока, публикуем и просматриваем страницу.</p>
96
Указываем нужное разрешение экрана<p>Получилось достойно. В последнем блоке статьи переверстаем страничку под смартфон в вертикальном положении - а горизонтальный макет попробуйте сделать самостоятельно. Это хорошая практика.</p>
96
Указываем нужное разрешение экрана<p>Получилось достойно. В последнем блоке статьи переверстаем страничку под смартфон в вертикальном положении - а горизонтальный макет попробуйте сделать самостоятельно. Это хорошая практика.</p>
97
<p>Макет для смартфона будет существенно отличаться от предыдущих версий: мы уберём плашку, увеличим заголовок, покрасим его в белый цвет, описание перекрасим в серый, приглушим фотографию Луны, чтобы яркая картинка не перебивала восприятие текста, а потом немного увеличим логотип и меню. У нас получится такой макет. Годнота.</p>
97
<p>Макет для смартфона будет существенно отличаться от предыдущих версий: мы уберём плашку, увеличим заголовок, покрасим его в белый цвет, описание перекрасим в серый, приглушим фотографию Луны, чтобы яркая картинка не перебивала восприятие текста, а потом немного увеличим логотип и меню. У нас получится такой макет. Годнота.</p>
98
<p>Переходим в редактор Zero-блока в режим редактирования макета для вертикально ориентированного смартфона.</p>
98
<p>Переходим в редактор Zero-блока в режим редактирования макета для вертикально ориентированного смартфона.</p>
99
<p>Смотрим, как отображается макет по умолчанию.</p>
99
<p>Смотрим, как отображается макет по умолчанию.</p>
100
<p>Можно просто поправить обозначенные места на скриншоте, и работа будет завершена. Но мы же перфекционисты, а восприятие информации со смартфона отличается от восприятия с планшета или десктопа, так что внесём больше правок:</p>
100
<p>Можно просто поправить обозначенные места на скриншоте, и работа будет завершена. Но мы же перфекционисты, а восприятие информации со смартфона отличается от восприятия с планшета или десктопа, так что внесём больше правок:</p>
101
<ul><li>Избавимся от подложки текста с описанием.</li>
101
<ul><li>Избавимся от подложки текста с описанием.</li>
102
<li>Заголовок, описание и ссылку скомпонуем в рабочей области.</li>
102
<li>Заголовок, описание и ссылку скомпонуем в рабочей области.</li>
103
<li>Поменяем цвет текста описания на более приглушённый (можно серый).</li>
103
<li>Поменяем цвет текста описания на более приглушённый (можно серый).</li>
104
<li>Уберём строку копирайта.</li>
104
<li>Уберём строку копирайта.</li>
105
<li>Выровняем логотип и меню.</li>
105
<li>Выровняем логотип и меню.</li>
106
<li>Создадим шейп на весь экран, покрасим его в тёмный цвет, сделаем процентов на 70 прозрачным и расположим поверх фотографии.</li>
106
<li>Создадим шейп на весь экран, покрасим его в тёмный цвет, сделаем процентов на 70 прозрачным и расположим поверх фотографии.</li>
107
<li>Уменьшим фотографию.</li>
107
<li>Уменьшим фотографию.</li>
108
</ul><p>Начнём стандартно - выставим высоту экрана рабочей области.</p>
108
</ul><p>Начнём стандартно - выставим высоту экрана рабочей области.</p>
109
Указываем высоту рабочей области<p>После этого избавляемся от подложки текста описания: удалить её нельзя - тогда она пропадёт со всех остальных макетов. Поэтому просто смещаем её за пределы экрана или делаем прозрачной.</p>
109
Указываем высоту рабочей области<p>После этого избавляемся от подложки текста описания: удалить её нельзя - тогда она пропадёт со всех остальных макетов. Поэтому просто смещаем её за пределы экрана или делаем прозрачной.</p>
110
<p>Теперь уберём за пределы экрана и фотографию - это поможет сконцентрироваться на компоновке текста и других элементов в рабочей области.</p>
110
<p>Теперь уберём за пределы экрана и фотографию - это поможет сконцентрироваться на компоновке текста и других элементов в рабочей области.</p>
111
<p>На этом этапе у вас должно получиться что-то подобное:</p>
111
<p>На этом этапе у вас должно получиться что-то подобное:</p>
112
<p>Переносим заголовок, описание и ссылку в рабочую область экрана.</p>
112
<p>Переносим заголовок, описание и ссылку в рабочую область экрана.</p>
113
Компонуем основной экран<p>Меняем цвет текста описания с помощью панели настроек.</p>
113
Компонуем основной экран<p>Меняем цвет текста описания с помощью панели настроек.</p>
114
<p>В тот же цвет красим обозначение слайда (-01) над заголовком. Нумерацию слайдов (01 - 07) переносим в самый низ экрана. А потом перетаскиваем логотип и меню по противоположным краям экрана, соблюдая отступы.</p>
114
<p>В тот же цвет красим обозначение слайда (-01) над заголовком. Нумерацию слайдов (01 - 07) переносим в самый низ экрана. А потом перетаскиваем логотип и меню по противоположным краям экрана, соблюдая отступы.</p>
115
<p>Готово. Уменьшаем фотографию и возвращаем её на экран.</p>
115
<p>Готово. Уменьшаем фотографию и возвращаем её на экран.</p>
116
<p>Осталось добавить Shape (форма), закрасить тёмным цветом и установить прозрачность 70%.</p>
116
<p>Осталось добавить Shape (форма), закрасить тёмным цветом и установить прозрачность 70%.</p>
117
<p>Нажмите на плюсик в левом верхнем углу редактора и выберите пункт Add Shape (добавить форму).</p>
117
<p>Нажмите на плюсик в левом верхнем углу редактора и выберите пункт Add Shape (добавить форму).</p>
118
<p>"Тильда" довольно странно добавляет элементы. Со временем привыкаешь и даже ловишь себя на мысли, что это вполне логично. Но нет - всё-таки нелогично.</p>
118
<p>"Тильда" довольно странно добавляет элементы. Со временем привыкаешь и даже ловишь себя на мысли, что это вполне логично. Но нет - всё-таки нелогично.</p>
119
<p>После добавления шейпа вас перебросит на экран десктопа. Это из-за той самой логики добавления элементов: элемент добавляется на все экраны. И чтобы оставить шейп только в нужной версии, придётся вынести его за пределы рабочей области и сделать прозрачным. Хорошая новость в том, что достаточно провернуть эту операцию в десктопной версии - она считается основной, а все остальные экраны наследуют её свойства.</p>
119
<p>После добавления шейпа вас перебросит на экран десктопа. Это из-за той самой логики добавления элементов: элемент добавляется на все экраны. И чтобы оставить шейп только в нужной версии, придётся вынести его за пределы рабочей области и сделать прозрачным. Хорошая новость в том, что достаточно провернуть эту операцию в десктопной версии - она считается основной, а все остальные экраны наследуют её свойства.</p>
120
<p>Теперь вернитесь к экрану смартфона и перенесите шейп в рабочую область. Ширину и высоту шейпа задайте равными ширине и высоте экрана. Отцентрируйте прямоугольник с помощью инструментов выравнивания на панели настроек.</p>
120
<p>Теперь вернитесь к экрану смартфона и перенесите шейп в рабочую область. Ширину и высоту шейпа задайте равными ширине и высоте экрана. Отцентрируйте прямоугольник с помощью инструментов выравнивания на панели настроек.</p>
121
<p>Образовалась небольшая заминка - шейп находится поверх всех элементов. Решается это так: выделяем шейп и нажимаем правой кнопкой мыши. В появившемся контекстном меню выбираем пункт Bring to back (расположить ниже всех слоёв). Но ниже всех нам не надо - ведь он должен перекрыть фотографию Луны. Поэтому теперь отправляем в самый низ фотографию Луны.</p>
121
<p>Образовалась небольшая заминка - шейп находится поверх всех элементов. Решается это так: выделяем шейп и нажимаем правой кнопкой мыши. В появившемся контекстном меню выбираем пункт Bring to back (расположить ниже всех слоёв). Но ниже всех нам не надо - ведь он должен перекрыть фотографию Луны. Поэтому теперь отправляем в самый низ фотографию Луны.</p>
122
<p>Есть ещё один способ разместить шейп ниже остальных слоёв. Нажмите сочетание клавиш Ctrl + L, и слева появится панель Layers (Слои). Выделите шейп на экране - он автоматически выделится и на панели. Теперь захватите его и перетащите почти в самый низ - чтобы под ним осталась только фотография Луны.</p>
122
<p>Есть ещё один способ разместить шейп ниже остальных слоёв. Нажмите сочетание клавиш Ctrl + L, и слева появится панель Layers (Слои). Выделите шейп на экране - он автоматически выделится и на панели. Теперь захватите его и перетащите почти в самый низ - чтобы под ним осталась только фотография Луны.</p>
123
<p>Отлично, все элементы на своих местах, остался последний штрих - поменять цвет шейпа и установить прозрачность.</p>
123
<p>Отлично, все элементы на своих местах, остался последний штрих - поменять цвет шейпа и установить прозрачность.</p>
124
<p>Что ж, выглядит вполне неплохо. Закрываем редактор Zero-блока, публикуем страницу и просматриваем её.</p>
124
<p>Что ж, выглядит вполне неплохо. Закрываем редактор Zero-блока, публикуем страницу и просматриваем её.</p>
125
<p>Отлично, всё работает как надо. Вы можете перейти по <a>ссылке</a>, посмотреть этот проект и протестировать его на разных экранах. А лучше создайте свой и попрактикуйтесь в работе с отзывчивым дизайном.</p>
125
<p>Отлично, всё работает как надо. Вы можете перейти по <a>ссылке</a>, посмотреть этот проект и протестировать его на разных экранах. А лучше создайте свой и попрактикуйтесь в работе с отзывчивым дизайном.</p>
126
<p>В этом уроке мы познакомились с основами отзывчивого дизайна в редакторе Tilda, посмотрели, как можно быстро адаптировать макеты для корректного отображения на разных экранах и научились тестировать странички с помощью панели разработчика. Если вам нравится редактор Tilda и вы хотите создавать в нём эффективные красивые сайты, обратите внимание на курс "<a>Дизайнер сайтов на Tilda</a>". Опытные преподаватели расскажут, с чего начать, как правильно организовать рабочий процесс и где брать исходники для проектов.</p>
126
<p>В этом уроке мы познакомились с основами отзывчивого дизайна в редакторе Tilda, посмотрели, как можно быстро адаптировать макеты для корректного отображения на разных экранах и научились тестировать странички с помощью панели разработчика. Если вам нравится редактор Tilda и вы хотите создавать в нём эффективные красивые сайты, обратите внимание на курс "<a>Дизайнер сайтов на Tilda</a>". Опытные преподаватели расскажут, с чего начать, как правильно организовать рабочий процесс и где брать исходники для проектов.</p>
127
<a>Научитесь: Дизайнер сайтов на Tilda Узнать больше</a>
127
<a>Научитесь: Дизайнер сайтов на Tilda Узнать больше</a>