Форма с двумя столбцами CSS шаблон

Блок «Свяжитесь с нами» размещает белую карточку формы по центру темного монохромного фотофона. Оранжевый прямоугольный акцент за карточкой создает яркий горизонтальный контраст. Заголовок обозначает секцию, а пять видимых полей служат для ввода адреса, имени, телефона, даты и сообщения. «Адрес» и «Имя» делят первую строку, во второй строке находятся «Телефон» и «Дата», а поле сообщения завершает форму. Выровненная по левому краю черная кнопка «Отправить» выступает финальным элементом взаимодействия в этой центрированной контактной секции.

Белая карточка формы формирует четкую визуальную иерархию

Центрированная белая карточка служит основной визуальной поверхностью этой секции «Свяжитесь с нами», поэтому ее контраст с темным фотофоном не просто отделяет форму от изображения. Благодаря ему заголовок, пять полей и кнопка отправки воспринимаются как единая цельная группа контента. Оранжевый прямоугольный акцент за карточкой добавляет дополнительный уровень выделения и придает композиции выразительный горизонтальный цветовой штрих, не нарушая функциональное назначение формы.

Расположение полей также создает удобные стилистические группы. «Адрес» и «Имя» делят первую строку, а «Телефон» и «Дата» — вторую, благодаря чему двухколоночная структура считывается еще до того, как более крупное поле сообщения завершает форму. Светло-серые прямоугольные поля ввода можно оформить в едином стиле, в то время как черная кнопка «Отправить», выровненная по левому краю, служит четким завершающим элементом управления. Типографику, внутренние отступы, расстояния между полями, положение акцента и пропорции карточки можно настраивать как взаимосвязанные свойства этого блока, а не как разрозненные декоративные детали.

При реализации в виде CSS-шаблона ключевая задача дизайна — сохранить эти взаимосвязи: темное изображение, белую карточку, оранжевую фоновую фигуру, спаренные поля и контрастный элемент действия. Инструмент Nicepage Пользовательский CSS позволяет расширить стилизацию, если стандартных свойств недостаточно для нужного визуального оформления, сохраняя контактную информацию аккуратно организованной в пределах одной секции.

Настроить с помощью Nicepage

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

Скачать

Редактировать шаблон в автономном режиме

1. Загрузите и установите приложение Nicepage для Windows и Mac. Или плагины WordPress и Joomla из страница загрузки
2. Создайте новую страницу или выберите существующую.
3. Нажмите "Добавить новый блок", найдите идентификатор 179165 и нажмите "Ввод".

Редактировать шаблон онлайн

Запустите Онлайн-конструктор чтобы редактировать этот шаблон на нашем хостинге

Создавайте потрясающие сайты

WordPress

Windows App

Joomla

Mac OS App

HTML5

Online

Бесплатный конструктор Nicepage Builder

Более 15 000 шаблонов

Легкое перетаскивание

Без программирования

Адаптивность

Ключевые слова

Настройка этого шаблона с помощью CSS

Управление стилем для каждой страницы

Настройте внешний вид этого готового шаблона непосредственно в редакторе Nicepage. Регулируйте типографику, отступы, фон, границы, цвета, позиционирование и другие свойства стиля с помощью визуальных элементов управления, сохраняя при этом простоту управления макетом страницы без необходимости ручного написания CSS.

Добавление пользовательского CSS при необходимости

Для требований к стилю, выходящих за рамки стандартных параметров редактора, используйте Пользовательский CSS для добавления целевых правил. CSS может применяться к отдельным элементам, конкретным страницам или всему веб-сайту в зависимости от масштаба настройки, а классы CSS могут использоваться для связи пользовательских правил с выбранными элементами.

Экспорт минимального CSS для каждой страницы

Для проектов, где важны размер CSS и производительность страницы, Nicepage может экспортировать минимальный CSS для каждой страницы. Вместо использования одного большого общего файла стилей, каждая страница может использовать отдельный CSS-файл, содержащий только необходимые для этой конкретной страницы правила стиля. Согласно документации Nicepage, эти CSS-файлы, специфичные для каждой страницы, могут быть примерно в десять раз компактнее, что помогает уменьшить количество ненужного CSS и улучшить скорость загрузки страницы.

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