Стилизация блоков

Как настроить внешний вид блоков — цвета, шрифты, отступы и другие стили

Стилизация блоков

Каждый блок в конструкторе можно настроить визуально — изменить цвет, размер, скругление углов и многое другое. Все настройки доступны в правой панели при выделении блока.

Основные свойства стиля

Цвет фона

Задайте цвет фона блока. Доступны:

  • Выбор цвета из палитры
  • Ввод цвета вручную (HEX, RGB)
  • Прозрачный фон — для текстовых блоков и ссылок

Скругление углов

Скруглите углы блока, чтобы сделать его мягче. Значение задаётся в пикселях:

  • 0 — острые углы (прямоугольник)
  • 10-20px — лёгкое скругление
  • 50% — полностью круглый элемент (при одинаковой ширине и высоте)

Прозрачность (opacity)

Управляйте прозрачностью блока:

  • 1 — полностью непрозрачный
  • 0.5 — полупрозрачный
  • 0 — полностью прозрачный (невидимый)

Рамка (border)

Добавьте рамку вокруг блока. Настройте:

  • Толщину рамки
  • Цвет рамки
  • Стиль (сплошная, пунктирная)

Трансформация

Примените CSS-трансформации к блоку — например, поворот или масштабирование.

Стили изображения

Для блока «Изображение» доступны дополнительные настройки:

  • Позиция фона — какая часть изображения видна (центр, верх, низ)
  • Размер фона — cover (заполнить блок) или contain (показать целиком)
  • Повтор фона — повторять изображение, если оно меньше блока
  • Режим наложения — как изображение смешивается с цветом фона

Стили текста

При редактировании текстового блока (двойной клик) доступен текстовый редактор с настройками:

  • Размер заголовка (H1–H6) и обычный текст
  • Жирный, курсив, подчёркнутый
  • Цвет текста
  • Вставка ссылки
  • Выравнивание текста

Размер и позиция

Для точного позиционирования используйте числовые поля в правой панели:

ПараметрОписание
XГоризонтальная позиция (от левого края секции)
YВертикальная позиция (от верха секции)
ШиринаМожно задать в px, % или vw
ВысотаМожно задать в px, % или vh
z-indexПорядок наложения (чем больше — тем выше блок)

Используйте проценты (%) для ширины, если хотите, чтобы блок масштабировался вместе с секцией. Пиксели (px) — для фиксированного размера.

Советы

  • Для кнопок используйте скругление 8–12px — это выглядит современно
  • Не бойтесь прозрачных фонов — текст на прозрачном фоне хорошо смотрится поверх секции с фоновой картинкой
  • Используйте z-index, чтобы расположить один блок поверх другого — например, текст поверх изображения
Назад СекцииКак работать с секциями — основными структурными блоками страницы в Framix Дальше АдаптивностьКак настроить отображение сайта на разных устройствах — компьютере, планшете и телефоне

На этой странице