Дизайн и вёрстка в прямом эфире
Разбор шаблона Bloomly. Эфир 29.01.26
1. Настройки проекта и шрифты
Шаг 1. Подготовка контента
Скачиваем все необходимые изображения, сжимаем по необходимости. (Photoshop «Экспортировать для Web», либо в TinyPNG.
Иконки, логотипы — в SVG.
Иконки, логотипы — в SVG.
Шаг 2. Загрузка шрифтов
- Библиотека Тильды
- Google Fonts
- Файлом в Woff/woff2
Шаг 3. Глобальные стили
- Единые правила для всего сайта
- Быстрое изменение текста в одном месте
- Аккуратность и единый визуальный ритм
- Сильная экономия времени при вёрстке
2. Горячие клавиши
Выделить всё
Объединить в группу
Включить автолейаут
Создать кнопку
Создать текст
Создать Shape
Слой вверх и вниз
Дубликат слоя
3. Auto Layout
Что такое Автолейаут?
Функция, позволяющая задать определенные правила внутри группы: расположение элементов, отступы между ними, внешние и внутренние отступы самой группы.
Режимы поведения
- Fixed — фиксированный размер,
- Hug — размер по контенту,
- Fill — заполняет доступное пространство.
Direction (направление элементов)
- Vertical — элементы выстраиваются сверху вниз
- Horizontal, элементы идут слева направо
- WRAP — перенос элементов на новую строку
Отступы
- Gap — расстояние между элементами внутри группы
- Padding — внутренние отступы от границ контейнера до элементов
- Margin — внешние отступы элемента относительно других блоков
Align (выравнивание элементов)
- Align Elements — выравнивает элементы поперёк
- Justify Content — распределяет элементы вдоль
- Align Content — управляет строками, если включён Wrap
Space-режимы
- Space Between: элементы равномерно распределяются, но без отступов по краям
- Space Around: отступы по краям есть, но они в два раза меньше, чем между элементами
- Space Evenly: все отступы одинаковые — и между элементами, и по краям.
4. Дополнительно
Скрыть элементы в отдельном разрешении
Клик правой кнопкой мыши на элементе > Visibility: Hide. Перейдя на разрешение ниже, повторите действия и, при необходимости, укажите отображение элемента Visibility: Show.
Выровнять аккордеон на 50% ширины экрана
<style>
@media (min-width: 960px){
/* 1) снимаем ограничение контейнера 1200px */
.t668 .t-container{
max-width: none !important;
width: 100% !important;
display: flex !important;
justify-content: flex-end;
}
/* 2) убираем сеточный "сдвиг" у правой колонки (t-prefix_5 = padding-left:500px) */
.t668 .t668__col.t-prefix_5{
padding-left: 0 !important;
}
/* 3) делаем две колонки по пол-экрана */
.t668 .t668__col{
flex: 0 0 50vw !important;
width: 50vw !important;
max-width: 50vw !important;
box-sizing: border-box;
}
}
</style>
@media (min-width: 960px){
/* 1) снимаем ограничение контейнера 1200px */
.t668 .t-container{
max-width: none !important;
width: 100% !important;
display: flex !important;
justify-content: flex-end;
}
/* 2) убираем сеточный "сдвиг" у правой колонки (t-prefix_5 = padding-left:500px) */
.t668 .t668__col.t-prefix_5{
padding-left: 0 !important;
}
/* 3) делаем две колонки по пол-экрана */
.t668 .t668__col{
flex: 0 0 50vw !important;
width: 50vw !important;
max-width: 50vw !important;
box-sizing: border-box;
}
}
</style>
Нажимая на кнопку, вы соглашаетесь с политикой конфиденциальности
Оставьте пожалуйста контактные данные, и я свяжусь с вами в ближайшее время. Обсудим детали, стоимость и план работы
Связь со мной
