Этапы настройки базового дизайна в Astra

1. Выбор предустановленного шаблона. Astra предлагает библиотеку готовых шаблонов, которые можно выбрать и использовать как основу:
   • Выберите шаблон из доступных вариантов (для Elementor) и импортируйте его (Подробнее тут).
2. Настройка цветов и шрифтов
   • Откройте раздел Внешний вид → Настройки (Customizer).
   • Выберите пункт Глобальные настройки → Цвета и шрифты.
   • Измените основные цвета (фон, текст, заголовки) и шрифты (стиль, размер) под ваш бренд.
3. Настройка макета страниц
   1. Страницы
      • В разделе Страница вы можете:
        • Настроить ширину страницы (полная, с отступами или коробочная).
        • Указать, отображать ли заголовок страницы.
        • Выбрать стиль боковой панели (слева, справа, без панели).
        • Настроить отступы и межблочные интервалы.
   2. Боковая панель
      • В разделе Боковая панель настраивается расположение панели для всех страниц или записей:
        • Выберите, где будет расположена панель (слева, справа или отключена).
        • Настройте ширину боковой панели, чтобы она гармонировала с контентом.
   3. Блог
      • Раздел Блог позволяет настроить макет страниц блога и записей:
        • Отображение заголовков, миниатюр, мета-данных (дата, автор, категории).
        • Включение/отключение краткого описания записей.
        • Настройка числа записей на странице и их расположения (сетка или список).
   4. Пользовательские типы записей
      • В разделе Пользовательские типы записей настраивается внешний вид и структура уникальных типов контента, которые вы добавили (например, портфолио, товары и т.д.).
        • Задайте отображение боковой панели.
        • Настройте отступы и ширину для этого типа записей.
   5. Подвал и шапка сайта
      • С помощью Конструктора шапки и Конструктора подвала можно детализировать макет верхней и нижней части сайта:
        • Добавить меню, контактные данные, логотип или кнопки.
        • Настроить ширину и отступы блоков.
        • Настройте расположение блоков, выбрав один из предложенных вариантов или создав свой макет.
4. Адаптивность (мобильная версия)
   • Astra автоматически адаптируется под мобильные устройства, но вы можете уточнить настройки:
     • В Customizer выберите просмотр для мобильного устройства.
     • Измените шрифты, размеры и отступы, чтобы элементы корректно отображались на экранах смартфонов и планшетов.
5. Добавление пользовательского CSS (опционально)
   • Для продвинутых пользователей доступен раздел Дополнительные стили в Customizer, где можно добавить свой CSS для более точной настройки.
6. Интеграция с Elementor
   • Astra идеально работает с Elementor, позволяя редактировать дизайн страниц с помощью конструктора:
     • Откройте нужную страницу в Elementor и добавьте виджеты из темы Astra.
     • Настройте блоки в визуальном редакторе, чтобы добиться желаемого результата.

Советы для настройки базового дизайна #

• Начните с готового шаблона, чтобы сократить время на разработку.
• Используйте глобальные настройки цветов и шрифтов, чтобы дизайн выглядел целостно.
• Регулярно проверяйте результат на разных устройствах, чтобы убедиться в корректном отображении.