Выровненные по центру заголовок «О нас» и пояснительный абзац формируют вступительное сообщение раздела до того, как центральным визуальным элементом становится большая фотография продуктов. Под ней три светлые полупрозрачные карточки перекрывают край изображения в один ряд, создавая многослойный переход между фотографией и содержимым карточек. Круглые иконки на тему еды и зеленые заголовки категорий повторяются в блоках «Специальные предложения», «Замороженные продукты» и «Яйца и сыр», благодаря чему группа категорий воспринимается как единая согласованная визуальная композиция, а не три разрозненные панели.
При оформлении в виде CSS-шаблона удобная система стилей полностью содержится внутри этого блока. Белый фон оставляет изображению и карточкам достаточно пространства, чтобы выделиться, а выравнивание по центру объединяет текст, фотографию и ряд повторяющихся карточек. Рукописный курсивный заголовок создает выразительный типографический контраст с компактным сопроводительным текстом с засечками, а зеленое оформление иконок служит объединяющим акцентом для всех карточек. Отступы, степень прозрачности, круги иконок, стиль заголовков и наложение можно легко настраивать, сохраняя структуру вводного контента. В результате получается раздел, внешний вид которого можно адаптировать с помощью локальных стилей без необходимости менять компоновку фотографии или карточек категорий.
При использовании Конструктор шаблонов CSS вы сможете настраивать цвета, шрифты, верхний и нижний колонтитулы, макет, столбцы и другие элементы дизайна, а также контент и изображения.
Настройте внешний вид этого готового шаблона непосредственно в редакторе Nicepage. Регулируйте типографику, отступы, фон, границы, цвета, позиционирование и другие свойства стиля с помощью визуальных элементов управления, сохраняя при этом простоту управления макетом страницы без необходимости ручного написания CSS.
Для требований к стилю, выходящих за рамки стандартных параметров редактора, используйте Пользовательский CSS для добавления целевых правил. CSS может применяться к отдельным элементам, конкретным страницам или всему веб-сайту в зависимости от масштаба настройки, а классы CSS могут использоваться для связи пользовательских правил с выбранными элементами.
Для проектов, где важны размер CSS и производительность страницы, Nicepage может экспортировать минимальный CSS для каждой страницы. Вместо использования одного большого общего файла стилей, каждая страница может использовать отдельный CSS-файл, содержащий только необходимые для этой конкретной страницы правила стиля. Согласно документации Nicepage, эти CSS-файлы, специфичные для каждой страницы, могут быть примерно в десять раз компактнее, что помогает уменьшить количество ненужного CSS и улучшить скорость загрузки страницы.
Этот рабочий процесс сочетает визуальное оформление с дополнительным пользовательским CSS и оптимизированным выводом CSS для каждой страницы, предоставляя вам дополнительный контроль, когда это необходимо для проекта, без необходимости делать ручное редактирование CSS основным способом настройки шаблона.