Модульная сетка сайта.
Правила первого экрана.

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

12 колонок

Вся сетка Тильды строится по 12 колонкам по 60 рх и с отступами между ними.
12 идеальное число так как делится на 2,3,4,6
Благодаря этому мы можем разбить блок на разное количество одинаковых колонок и навести визуальный порядок в блоке.

Приведем примеры на карточках товара ниже:

Обязательно не забывай выравнивать все блоки в одну линию, чтобы все было ровно и качественно!

В меню слева в настройках есть кнопка "12-колоночная сетка" - она отображает все видимые колонки блоков.

По такой сетке строятся все блоки в Тильде и как узнать сколько колонок занимает текстовый блок или картинка мы рассмотрим на примере:

Параметры в настройках мы можем изменять и тем самым подгонять наш сайт под одинаковое кол-во колонок.

Высота блока

Возьмем для примера блок обложка:

100 VH - 100% Не зависимо от того, какой высоты будет девайс, блок всегда будет поджиматься в эти 100%

Правило первого экрана:

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

Сначала дайте себе ответ на вопрос: на сайте после момента открытия находится то, что ищет пользователь?

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

Здесь вам может помочь формула 4U:
usefulness - польза;
uniqueness - уникальность;
urgency - срочность;
ultraspecificity - специфичность.

Вывод: первый экран должен быть полезным, с УТП (уникальное торговое предложение), желательно указывающим на время выполнения услуги.
Специфичность же отвечает за то, какой фишкой компании Вы можете удивить клиента (например, вы единственная фирма, которая дарит в подарок москитную сетку при установке окна в Чукотском автономном округе. Такое предложение вполне имеет право на существование.

Основная ошибка новичков:

ВАЖНО: добавляя меню сайта и обложку надо уместить их оба в 100 VH.
Новички же не меняют высоту обложки и на первом экране посетитель видит меню и часть обложки - это не правильно.

Указываем размер блока меню в vh. Если у нас высота верхней части 10 вх и высота нижней части 10 вх - в сумме 20 vh. Поэтому обложку меняем не 100 v, а 80.

Размер контейнера - это ширина экрана, поэтому данный блок всегда будет на всю ширину экрана.

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

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

Не все блоки можем растягивать на всю ширину экрана или задавать ширину по колонкам. Один из таких блоков: текст в три колонки.
Если бы мы растянули текст в 3 колонки на весь экран - текст был бы не читабельным совсем.

В ZB есть основные настройки блока, где есть
- GRID CONTAINER HEIGHT
- WINDOW CONTAINER HEIGHT

GRID CONTAINER HEIGHT по умолчанию 550 пикселей. А 550 пикселей это безопасная высота для всех девайсов, так как разрешение экрана у всех разное. И именно 550 пикселей является самым оптимальным решением.
Но не всегда этого достаточно.

WINDOW CONTAINER HEIGHT - это 12 колонок, т.е. 100 %

Если же мы увеличиваем грид контейнер (например 2000 пикселей). У нас получается блок вытянутый и текст и объекты располагающиеся по центру экрана, при большом экране создадут большие отступы по бокам и будет выглядеть скучно.

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

Результат: на большом экране человек видит текст и часть шейпов, которые создают визуальный баланс.

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

Визуальный баланс:

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

Пример блока на большом экране с шейпами:

Резиновая верстка сайта

Ниже представлен вариант, когда шейпы располагаются по краям экрана, а центровой строго по центру вне зависимости от ширины экрана.

Tilda Publishing