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