Элементы "Structure"

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

Section — это основной строительный блок страницы. Он обозначает смысловой раздел сайта.

Примеры

На практике это просто контейнер, который «держит» внутри себя другие элементы.

👉 Совет: сразу давай имя классу, например, section-hero.

Container — это "внутренний ограничитель" контента.

Он центрирует всё, что в нём находится, и задаёт стандартную ширину (по умолчанию — 940px).

Когда использовать

• Внутри каждого Section — чтобы текст, кнопки и изображения не «разъезжались» по ширине экрана

📌 Запомните: Section + Container — классическая пара. Section задаёт область, Container — ограничивает ширину контента. Container - всегда с одним и тем же классом, тк он переиспользуется по всему проекту

Quick Stack — это готовая сетка с отступами.

Ты выбираешь: сколько колонок нужно, и Webflow сам всё выстраивает с правильными расстояниями.

Когда использовать

• Для карточек (услуги, отзывы, портфолио).

• Когда нужно быстро выстроить 2–3–4 колонки.

V Flex = Flexbox с вертикальной ориентацией. То есть всё, что ты в него положишь, будет располагаться друг под другом.

📌 Это удобно, если тебе нужно сделать аккуратную вертикальную структуру с гибкой настройкой отступов, выравнивания и порядка.

Когда использовать

• При работе с формами, списками, колонками текста.

H Flex = горизонтальный Flex-контейнер. Всё, что положишь внутрь — станет в линию, слева направо.

📌 Это как полка в шкафу: можно поставить книги, коробки, и всё выстроится в один ряд.

Когда использовать

• Для создания горизонтального меню.

• Для блоков с текстом и иконкой рядом.

• Для карточек в линию.

Page Slot — это специальная зона, куда можно вставлять компоненты, шаблонные секции или повторяющиеся блоки (меню, футер, шапка, формы (CTA) и тд.)

📌 Это особенно полезно, когда работаешь с символами (Components) и шаблонами.

Когда использовать

• Если ты используешь один и тот же компонент на многих страницах.

• Для шаблонных проектов, где есть заранее заготовленные секции.