Оформление решения Аспро: Максимум — цвета, шрифты, логотип, шапка

Внешний вид решения настраивается из админки без программиста: цвет, шрифт, тип шапки, состав подвала. Разбираем, что где лежит и какие настройки влияют на скорость и мобильную версию.

Решение Аспро настраивается из админки: большинство визуальных изменений делается без разработчика. Ниже — порядок, в котором это удобно делать после установки.

С чего начать

1. Загрузите логотипы: для светлой шапки, для тёмной и для мобильной версии.
2. Выберите цветовую схему и задайте основной цвет бренда.
3. Выберите шрифт из доступных в решении.
4. Настройте тип шапки и подвала.
5. Проверьте результат на мобильном.

Логотип

Готовьте три файла: основной, инверсный (для тёмного фона) и компактный для мобильной версии. Формат — SVG, если логотип векторный: он не размывается на экранах с высокой плотностью и весит меньше растрового.

Проверьте, как логотип выглядит:

• в обычной шапке;
• в «прилипающей» шапке при прокрутке;
• на мобильном, где места мало.

Цвет и схема

В настройках решения выбирается цветовая схема и основной цвет. Он используется для кнопок, ссылок, акцентов.

Практические советы:

• Не берите слишком светлый акцентный цвет: кнопки становятся плохо читаемыми.
• Проверьте контраст текста на цветных плашках — особенно на мобильном.
• Один акцентный цвет работает лучше трёх.

Шрифт

Решение предлагает набор шрифтов. Свой подключается правкой шаблона, но помните: каждый дополнительный шрифт и начертание — это вес страницы. Двух начертаний обычно достаточно.

Шапка

В решении несколько вариантов шапки. При выборе учитывайте:

• сколько пунктов в меню — широкое меню не поместится в компактную шапку;
• нужны ли телефон и кнопка заказа в шапке;
• будет ли выбор города;
• как шапка выглядит при прокрутке.

Проверьте, что на ноутбуке с шириной 1366 px меню не переносится на две строки: это частая проблема при добавлении новых пунктов.

Подвал

Соберите состав блоков: разделы, контакты, соцсети, юридические ссылки. Обязательное: ссылка на политику обработки персональных данных и реквизиты компании.

Мобильная версия

Проверьте отдельно:

• меню-бургер: открывается, закрывается, прокручивается;
• кликабельность телефона;
• нижнюю панель действий, если она включена в решении;
• порядок блоков на главной: на телефоне важное должно быть выше.

Что не стоит делать

• Править файлы шаблона решения напрямую: изменения слетят при обновлении. Используйте собственный шаблон-наследник.
• Загружать логотип огромным PNG: он замедлит каждую страницу.
• Включать все возможные блоки на главной: страница станет тяжёлой, а внимание посетителя размоется.

Проверка после настройки

• Сбросьте кэш и посмотрите главную, каталог, карточку и страницу контактов.
• Проверьте на 360–390 px: нет ли горизонтальной прокрутки.
• Замерьте скорость до и после: тяжёлые шрифты и большие изображения в шапке заметно влияют.