Варианты членства CSS шаблон

Блок «Варианты абонементов» представляет три плана — «Здоровье», «Здоровье Плюс» и «Другое» — в центрированной секции с ценами. Фотография на тему фитнеса заполняет фон позади контента, а три белые карточки заходят на ее нижний край ровным горизонтальным рядом. В каждой карточке объединены название тарифа, перечень преимуществ и кнопка действия. План «Здоровье» делает упор на безлимитные занятия, доступ к шкафчикам, фитнес-тестирование, гостевые визиты и одну персональную тренировку. «Здоровье Плюс» дополнен расширенными возможностями, ночным доступом к шкафчикам и тремя персональными тренировками, а тариф «Другое» объединяет несколько категорий абонементов.

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

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

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

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

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

Скачать

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

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

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

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

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

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