Настройка цветов и шрифтов в шаблоне Joomla
Цвета и шрифты создают первое впечатление о сайте за 3–5 секунд. Это не украшение, а инструмент коммуникации с клиентом. Мы настроили фирменный стиль более чем на 70 сайтах Joomla и знаем: правильная палитра и типографика повышают доверие и конверсию. Разберём, как настроить их без правки кода.
Где настраиваются цвета в Joomla
Настройки находятся в админке, в зависимости от шаблона:
- Откройте «Система» → «Стили шаблонов».
- Выберите активный шаблон.
- Найдите вкладку с настройками оформления (обычно «Colors», «Theme», «Style»).
- Измените цветовую схему или введите HEX-коды вручную.
Большинство современных шаблонов имеют визуальный редактор с палитрой. Если визуального редактора нет — цвета настраиваются через custom.css. Это уже требует базовых знаний CSS.
Фирменная палитра: правило трёх цветов
Используйте цвета бренда, но не больше 3 основных:
- Основной цвет — для кнопок, ссылок, акцентов.
- Дополнительный — для фонов секций, блоков.
- Акцентный — для важных элементов, CTA.
- Нейтральные оттенки — для текста и фонов (серый, белый, чёрный).
Согласованная палитра создаёт целостность. Если цветов больше 5 — сайт выглядит как винегрет, и бренд не запоминается. Если у вас есть брендбук — работайте строго по нему. Если нет — подберите палитру на основе логотипа.
Настройка шрифтов
Шрифты задают тон всему сайту:
- Выберите шрифт для заголовков — заметный, с характером.
- Шрифт для основного текста — читабельный, нейтральный.
- Настройте размеры и межстрочный интервал.
- Подключите Google Fonts или локальные шрифты.
Правило: не больше 2 шрифтов на сайте — один для заголовков, один для текста. Иначе сайт выглядит перегруженным. Если шрифт фирменный (из брендбука) — подключайте локально, а не через Google Fonts. Подробнее — в статье Фирменные шрифты в Joomla.
Что настраивается в шаблоне
Основные параметры оформления:
- Цветовая схема (основной, дополнительный, акцентный).
- Шрифты заголовков (H1–H6).
- Шрифт основного текста.
- Размеры элементов (кнопок, полей, отступов).
- Отступы и поля между блоками.
Не пытайтесь настроить всё сразу. Начните с базового: цвета и шрифты. Размеры и отступы — вторым этапом.
Цвет кнопок и CTA-элементов
Кнопки — ключевые элементы конверсии:
- Основная кнопка — контрастный цвет, заметный на фоне.
- Вторичная кнопка — менее заметная, но узнаваемая.
- Ховер-эффекты — изменение цвета или тени при наведении.
- Согласованность — одинаковые кнопки на всех страницах.
Кнопки направляют действия пользователя. Если CTA-кнопка сливается с фоном — конверсия падает. Тестируйте цвет кнопок на контрастность (например, через WebAIM Contrast Checker).
Типографика: иерархия текста
Настройте чёткую иерархию:
- Заголовки H1 — крупные, акцентные.
- Заголовки H2–H3 — меньше, но заметные.
- Основной текст — читабельный, 16–18px.
- Цитаты — выделенные курсивом или линией.
- Подписи и сноски — мелкие, серые.
Чёткая иерархия улучшает восприятие и помогает пользователю сканировать текст.
Сохранение настроек
После настройки:
- Сохраните изменения в настройках шаблона.
- Очистите кэш Joomla («Система» → «Очистить кэш»).
- Проверьте сайт на разных страницах — главная, услуги, блог, контакты.
- Проверьте мобильную версию — некоторые настройки работают иначе.
- Очистите кэш браузера (Ctrl+Shift+R).
Кэш может показывать старые настройки — это самая частая причина «настройки не применились».
Когда нужен специалист
Обратитесь к профессионалу, если:
- Шаблон не имеет визуальных настроек — только через код.
- Нужна сложная кастомизация (градиенты, анимации, уникальные элементы).
- Требуется интеграция фирменного стиля по брендбуку.
- Нет времени разбираться с настройками.
Специалист настроит быстрее и точнее. Это входит в услугу Адаптация под бренд. А если нужна полная установка и настройка — смотрите Установка и настройка шаблона.
«Цвета и шрифты — это не украшение, а инструмент коммуникации с клиентом. Правильная палитра работает на бренд, неправильная — против него».
Коротко: что запомнить
- Правило трёх цветов: основной, дополнительный, акцентный.
- Не больше 2 шрифтов: для заголовков и текста.
- Кнопки — контрастные, заметные, единые.
- Настройки сохраняются в шаблоне, не в коде.
- После изменений очищайте кэш Joomla и браузера.
- Проверяйте мобильную версию — настройки могут отличаться.
Если хотите настроить фирменный стиль без ошибок — обратитесь к нам. Мы сделаем это быстро и с учётом брендбука.