Шаг 1. Подготовка контентаСкачиваем все необходимые изображения, сжимаем по необходимости. (Photoshop "Экспортировать для Web", либо в TinyPNG.
Иконки, логотипы – в SVG.
Шаг 2. Настройки проекта и шрифтыВы можете загрузить любые шрифты, которые захотите. Для Bloomly использован Golos text. Его можно выбрать в библиотеке Гугл фонтс, вводим в поиске и выбираем Regular и Medium.
Переходим во вкладку Цвета и стили.
Шаг 3. Глобальные стили текстаЕсли у нас единый цвет весь страницы, можем его задать здесь же, тогда в мобильной версии окрасится вкладка с доменом и верхняя плашечка. Не придется тогда добавлять дополнительных модификаций.
Далее, ориентируясь на дизайн-систему, создаем глобальные стили Типографики и Кнопок.
Я решила сэкономить ваше время и уже заранее все создала, но сейчас расскажу в целом как пользоваться стилями. В моем случае это три типа заголовков и один размер наборного шрифта. Мы можем задать отдельные значения для каждого брейкпоинта. Поэтому еще один плюс отрисовывать мобилку, мы можем сразу выставить все нужные размеры и параметры.
Если допустим у нас два разных цвета заголовков, в зависимости от контента, можно быстро продублировать стиль и заменить то, что нужно.
- Единые правила для всего сайта
- Быстрое изменение текста в одном месте
- Аккуратность и единый визуальный ритм
- Сильная экономия времени при вёрстке
Шаг 4. Zero-блокИтак, первым делом удаляем все ненужное.
Cmd (Ctrl) + A – выделение всех элементов.
Я буду пользоваться горячими клавишами и параллельно рассказывать о них.
Очень советую постараться запоминать их, еще один способ верстать быстрее.
Начинаем с логотипа, я обычно сразу накидываю всё на холст и потом уже расставляю как нужно.
Старайтесь иконки и логотипы всегда переводить в вектор и сохранять как свг. Во-первых так они весь очень мало и при этом всегда хорошего качества, во-вторых их всегда можно будет внутри тильды перевести в элемент вектор и перекрасить например.
Переходим к меню, я пункты меню верстала как кнопки, чтобы сразу задать им ховер, тем более никакие коды использовать было нельзя.
Нажимаем В на клавиатуре и кликаем в нужное место. Еще одна горячая клавиша. На данный момент через горячие клавиши можно добавить кнопку, текст и вектор.
Сразу применяем стиль, затем его можно отключить и изменить цвета как нам нужно. Пункты меню у нас будут отличаться от основных кнопок, мы поменяем еще внутренние отступы на 15px, чтобы они ближе к друг другу стояли. Но тем не менее по типографике уже ничего не нужно настраивать.
Дальше дублируем кнопку, просто зажимаем Option или Alt и перетягиваем чуть подальше. Можно конечно и Cmd+C, Сmd+V, кому как удобнее.
Копируем текст и нажимаем два раза по кнопке и вставляем. Не обязательно вводить текст в панели настроек, можно сразу в кнопке это сделать.
И в конце дублируем последний раз, но уже применяем наш стиль и вешаем ссылку.
В мобилке вместо открытого меню у нас будет бургер, давайте его сразу и добавим.
Смотрим какого он размера, 47px, выставляем и тоже можно сразу повесить ссылку.
Верхняя часть блока у нас готова, давайте соберем ее в Автолейаут.
Шаг 5. Автолейауты Что вообще такое автолейаут, если кто-то не знает? Тем, кто работает в Фигме или знаком с CSS конечно намного проще.
Я в конспект тоже добавила:
Автолейаут – это функция, позволяющая объединить элементы в группу и задать определенные правила внутри этой группы: расположение элементов, отступы между ними и внешние и внутренние отступы у самой группы.
По сути своей, сейчас в Тильде есть три вида групп.
- Логическая. Берем допустим два элемента, нажимаем Cmd+G, и они у нас собрались в группу. Видим сбоку надпись Logical.
Это удобно, если мы хотим навести допустим порядок в слоях, или для удобства заказчику в дальнейшем, чтобы он понимал что где находится. Мы можем дублировать группу целиком, передвигать. НО! Все настройки, привязки у каждого элемента остаются свои собственные. Мы можем одному задать привязку к низу, на другой это не распространится.
- Группа как Объект. Но если мы переведем Логическую на Объект правила изменятся. Теперь можно представить что у этих элементов появилась такая оболочка. И у этой оболочки тоже теперь есть свои собственные настройки. Можем задать цвет фона, отступы, ссылку повесить на всю группу сразу. Но самое классное, чем пользуюсь теперь постоянно, мы можем задать анимацию как для каждого элемента отдельно, так и на всю группу целиком. И это одновременно. Мы можем так же например триггером в сбс анимации задать сразу группу, а не отдельные элементы.
- Группа с Автолейаут. И последний вариант, когда мы включаем группе Автолейаут.
Включить автолейаут можно нажать Shift+A, либо правой кнопкой мыши, либо на панели сбоку.
Всё, теперь мы не можем просто так взять и переставить кнопку куда нам хочется, они не просто теперь связаны, но еще и стоят в определенном порядке.
А за порядок и правила как раз отвечает правая панель настроек. Я сейчас прям сразу всё перечислять не буду, мы будем верстать и по ходу буду рассказывать про каждую настройку, мне кажется так будет понятнее.
Итак, удаляем эту группу и идем делать меню.
Сначала выделяем все пункты меню и нажимаем Shift+А. Они у нас встали в одну строку. За настройку направления выравнивания у нас отвечает Direction. Мы можем либо выставить все по горизонтали, либо по вертикали, либо по горизонтали, но с переносом строки. Если допустим у нас все кнопки не помещаются по ширине экрана.
Следующая настройка GAP. Это отступ между элементами, то есть на каком расстоянии друг от друга они находятся внутри группы. Давайте поставим 2, чтобы небольшой зазорчик был, когда перемещаешься по пунктам меню.
Другие настройки пока не трогаем, поднимемся чуть выше.
Помимо значений ширины и высоты группы здесь появились еще две настройки.
По умолчанию, когда мы только объединили элементы в автолейаут, здесь стоит параметр Hug. Это значит что у группы адаптивная ширина и высота и зависит от размеров контента, что находится внутри нее. Как бы обнимает всё содержимое.
Например добавили кнопку, ширина группы подстроилась и изменилась.
Но если мы зададим ширину вручную, она поменяется на Fixed. В этом случае она просто остается фиксированной и без разницы что внутри нее происходит.
Есть еще один параметр, о нем чуть позже расскажу.
Давайте теперь всю верхнюю часть объединим в автолейаут. Выделяем всё через Cmd+A, и нажимаем Shift+A. Сразу можно выключить видимости у бургера, он же нам будет нужен только в мобилке. Можно нажать в слоях, можно прям на него кликнуть правой кнопкой мыши и выбираем значок с глазиком – Видимость: Hide. Всё, он скрылся везде сейчас, но мы его можно включим в адаптиве.
Итак, меняем ширину группы на Hug, меняем выравнивание и теперь нам понадобиться еще одна настройка – Align Elements. Это выравнивание внутри группы, в нашем случае выставляем по центру.
Отступы между элементами у нас автоматически выставились, но мы можем вообще их убрать, они нам не понадобятся.
Если мы переведем Direction на Перенос, то видим еще одну настройку, Justify Content. Если в Align Elements мы выравнивали по вертикали, то теперь можем выровнять все по горизонтали. Но помимо обычных Право-Лево-Центр, есть еще три настройки. Последними двумя я вообще не пользовалась ни разу еще, чаще всего пригождается именно Space Between. Это распределение элементов разномерно без отступов по краям. То есть мы как бы прижимаем все к краям и при этом всех элементов одинаковый отступ между собой.
Ну всё отлично, к адаптивам вернемся позже, а пока давайте дальше поверстаем.
Нажимаем T, и добавляем текст, тут же идем в стили и применяем к нему стиль заголовка 1 уровня. Копируем, вставляем текст и меняем стиль на Наборный.
У текстового контейнера тоже теперь есть три настройки.
- Автовысота – когда ширину мы можем задать сами, а высота адаптируется
- Автоширина – когда весь текст выстраивается в одну строку и ширина адаптируется под размер текста
- Фиксированный размер, сами задаем ширину и высоту, и можем выровнять текст внутри этого контейнера как нам нужно.
Давайте зададим теперь внутренние отступы внутри нашей левой группы. По 30px.
И объединяем группу вместе с шейпом с картинкой тоже в автолейаут.
Теперь у нас есть две группы, это меню и основная часть.
Ну всё готово, осталось теперь собрать весь наш блок в автолейаут.
Спускаемся к настройкам всего блока и включаем автолейаут. Выставляем Window контейнер. Если оставим грид, то весь контент будет в 12 колонках.
Первый экран у нас будет занимать 100% высоты, и меняем на Stretch, чтобы у нас все растягивалось на весь экран. И еще задаем не фиксированную высоту всего блока, а меняем на Авто.
Возвращаемся к меню, и теперь у нас появилась еще одна настройка ширины, это Fill. Она появляется в том случае, если элемент или группа уже находится внутри автолейаута.
Переключаем на Fill и меню растянулось на всю ширину. Тоже самое делаем и со второй группой и с группами внутри них. Пусть всё подстроится под ширину экрана. И не забываем высоту тоже выставить Fill.
Выставляем закругления у картинки.
И нам осталось только выставить ширину к текстов. Они у нас будут фиксированными по ширине.
Вот и всё, быстро пройдемся по адаптивам. В планшете выключим пункты меню, оставим кнопку и бургер.
Объединяем бургер и кнопку в еще один автолейаут, чтобы элементы встали в правый край.
В планшете меняем Direction на вертикаль, и задаем фиксированный размер картинке.
В мобилке выключаем еще и кнопку.
Тексты и контейнер для них переводим в Fill, пусть подстраиваются под ширину мобилки. Gap между карточками меняем на 15px. И Padding меняем на 25px.
Первый блок готов.Давайте теперь сверстаем блок с акциями.
В карточках есть два варианта, можете задать фиксированную высоту. А можете ориентироваться на отступы от
Чтобы выбрать несколько элементов, нажимаем Сmd, выделяем элемент, затем еще зажимаем Shift и выделяем второй.
Сейчас между всеми тремя группами отступ 20px. Но от заголовка у нас должен быть отступ 40px. Для этого можно выбрать группу заголовка и добавить Margin.
Margin это внешние отступы. Добавляем 20px cнизу.
___
И еще хотела сверстать блок с отзывами. Но я думаю по времени мы уже не особо успеваем. Давайте я покажу пару моментов, которые мне кажется будут полезными.
У нас здесь на десктопе карточки распределяются по всей ширине, но на адаптивах нам уже нужен слайдер.
В таком случае мы так же оставляем ширину Fill, но меняем Оверфлоу по Х на Auto.
При это нам нужно еще пару моментов поправить.
У самого блока убираем отступы по бокам, чтобы не было полоски сбоку когда будем скроллить слайдер.
А вот у самого слайдера задаем Padding слева и справа по 20px.
И у заголовка тоже нужно будет задать 20px слева.
___
В общем главный совет, не бойтесь экспериментировать, пробуйте, изучайте. На мой взгляд можно понять автолейауты только на практике и все время повторяя "А что если?".
