Блок с двумя кнопками CSS шаблон

Блок представляет вступительный раздел «О компании» в центрированном одноколоночном макете. Круглый портрет с теплой оранжевой обводкой расположен над заголовком, за которым следуют пояснительный абзац и указание авторства изображения для Freepik. Две расположенные рядом кнопки действий, «Забронировать звонок» и «Наши работы», завершают структуру контента. Черный заголовок, более мелкий темный текст, просторные вертикальные отступы и контрастные скругленные кнопки формируют спокойную визуальную иерархию. Эта статичная секция создана для лаконичной презентации организации с понятными сопутствующими целевыми действиями.

Оранжевая рамка для портрета в секции «О компании»

Круглый портрет задает визуальную отправную точку, а его теплая оранжевая обводка создает сдержанный акцент вокруг центрированного вступления. Ниже черный заголовок «О компании» и более мелкий темный абзац образуют компактную текстовую иерархию. Просторные вертикальные отступы разделяют эти элементы, не нарушая целостности сообщения, благодаря чему портрет, заголовок и текст воспринимаются как единая композиция, а не разрозненные детали. Указание авторства Freepik подчиняется этой иерархии и может быть оформлено как ненавязчивый вспомогательный элемент.

Две кнопки обеспечивают самый выразительный стилевой контраст внутри блока. Элементы «Забронировать звонок» и «Наши работы» расположены рядом в версии для десктопа; для них используются скругленные формы с контурным оформлением и оранжевой заливкой. Такое сочетание придает каждому действию свой визуальный вес, сохраняя их общее выравнивание под вводным текстом. При верстке CSS-шаблона основное внимание уделяется гармонии между теплой обводкой портрета, темной типографикой, свободными отступами и двумя состояниями кнопок. Эти параметры можно гибко настраивать без изменения исходного контента блока «О компании». В результате получается визуально выверенная секция, оформление которой подчеркивает презентацию компании без визуального шума и лишних компонентов. Единое выравнивание также обеспечивает гармоничную связь ряда кнопок с центрированным портретом над ними.

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

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

Скачать

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

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

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

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

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

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 основным способом настройки шаблона.