Astra и Spectra: как сделать адаптивный сайт с красивым дизайном
Traffic Cardinal Traffic Cardinal  написал 02.07.2025

Astra и Spectra: как сделать адаптивный сайт с красивым дизайном

Traffic Cardinal Traffic Cardinal  написал 02.07.2025
7 мин
0
46
Содержание

Выбор шаблона и настройка дизайна для сайта на WordPress — это один из ключевых моментов при запуске проекта. Внешний вид и юзабилити косвенно влияют на поисковую оптимизацию, поэтому будьте готовы, что заменить шаблон при необходимости вы сможете лишь через год, а то и два.

banner banner

Помимо настраиваемости, тематики и прочих атрибутов, шаблоны WordPress делят на две основных категории — платные и бесплатные. В первом случае, как правило, вы получаете блочный конструктор, из которого можете сделать все что угодно без необходимости ставить дополнительные плагины, полностью настраиваемый внешний вид и обязательно — саппорт от разработчиков. Во втором случае — (чаще всего) просто готовая тема по конкретному пресету с минимумом настроек и без технической поддержки. Иногда даже с рекламой, которую приходится удалять вручную через код.

Ранее мы уже писали о том, как сделать сайт с пользовательским дизайном просто, быстро и без знания программирования. Но есть еще один вариант, в котором вы можете настроить дизайн сайта согласно собственным запросам не менее быстро и абсолютно бесплатно, — это связка Astra + Spectra.

Что это и как работает

Все, кто давно знаком с WordPress, знают, что Astra — это одна из самых популярных бесплатных тем, отличающаяся высокой скоростью работы и гибкими настройками. При этом Astra (вернее, ее бесплатная версия) не блочная тема. Это означает, что в ней по умолчанию отсутствует возможность настраивать дизайн посредством управления блоками (стандартные блоки Gutenberg не в счет).

Далее — Spectra Gutenberg Blocks. Это плагин от разработчиков Astra, позволяющий работать с блоками при создании дизайна. Короче говоря, Astra + Spectra — это полноценный стабильный конструктор страниц, о котором мы сегодня и поговорим.

Установка и возможности

В первую очередь скачаем и установим саму ‭«Астру», воспользовавшись соответствующим разделом в админке WordPress.

Astra в каталоге шаблонов WordPress
Astra в каталоге шаблонов WordPress

Затем переходим в каталог плагинов, находим там Spectra Gutenberg Blocks, устанавливаем и активируем.

Spectra Gutenberg Blocks в каталоге плагинов WordPress
Spectra Gutenberg Blocks в каталоге плагинов WordPress

Теперь по порядку — более детально рассмотрим пул возможностей плагина Spectra Gutenberg Blocks и самой темы Astra.

Дополнительные блоки для Gutenberg

Spectra Gutenberg Blocks добавляет более 30 блоков во встроенный WordPress-редактор Gutenberg. Многие из них пересекаются со стандартными, поэтому выделим именно уникальные.

  • Container — преднастройка структуры (сетки) страницы;

  • Infobox — информационный блок с заголовком и кратким описанием;

  • Call To Action — призыв к действию (короткий текст + кнопка со ссылкой);

  • Countdown — счетчик обратного отсчета;

  • Content Timeline — блок для визуализации событий или контента по времени;

  • FAQ — блок с часто задаваемыми вопросами в виде раскрывающегося списка;

  • Form — вставка формы (обратная связь, подписка на рассылку и простая контактная форма);

  • Google Maps — карты от Google с настройкой необходимого местоположения;

  • How To — блок-инструкция к чему-либо;

  • Icon List — кастомный маркированный список (с иконками вместо маркеров);

  • Inline Notice — кастомный блок с заметкой;

  • Lottie Animation — вставка анимации в формате Lottie;

  • Marketing Button — кастомная кнопка с призывом к действию;

  • Modal — кнопка, вызывающая модальное всплывающее окно (popup);

  • Post Carousel — слайдер из превью публикаций на сайте;

  • Post Grid — сетка из превью публикаций на сайте;

  • Post Timeline — блок для визуализации публикаций по времени;

  • Price List — блок с ценой, фото и кратким описанием предполагаемого товара;

  • Review — блок с отзывом и оценкой чего-либо;

  • Social Share — кнопки соцсетей;

  • Star Rating — рейтинг в формате звезд;

  • Table Of Contents — содержание материала в виде заголовков и подзаголовков;

  • Tabs — разделяет контент по вкладкам (например, может вместить несколько отзывов в 1 блок с возможностью переключаться между ними посредством вкладок);

  • Team — информация о ком-либо (например, об участнике команды) со ссылками на соцсети;

  • Testimonials — блок с отзывами от клиентов.

Блоки Spectra
Блоки Spectra

Библиотека шаблонов

Плагин Spectra Gutenberg Blocks также имеет собственную библиотеку готовых дизайнов страниц самых разных категорий — от кафе до строительных проектов.

Чтобы подобрать интересующий вас дизайн, создайте новую запись и найдите в верхней панели кнопку Design Library.

Кнопка Design Library (ссылка на библиотеку дизайнов)
Кнопка Design Library (ссылка на библиотеку дизайнов)

Также библиотека включает в себя паттерны отдельных элементов и страниц сайта, например шапки и подвалы, галереи, формы, отзывы, страницы ‭«Контакты» и так далее.

Шаблоны галерей
Шаблоны галерей

А это уже полностью готовые дизайны сайтов.

Давайте для примера установим самый первый слева. В готовой версии это будет выглядеть вот так:

Главная страница
Главная страница

Страница «О нас»
Страница «О нас»

Страница «Контакты»
Страница «Контакты»

Естественно, внешний вид сайта полностью редактируемый, включая расположение и тип блоков, картинки, текст и заголовки. Стоит отметить, что результат на скринах выше достигается благодаря Spectra Gutenberg Blocks и чуточке фантазии (на самом деле опыту в дизайне). Но никто не мешает экспериментировать — пространство для творчества и набор необходимых инструментов здесь присутствует.

Роль темы Astra

Что касается самой темы, то ее основное предназначение в данном случае — это основа (или болванка), которая придает сайту адаптивность на различных устройствах. Все другие настройки, которые предлагаются в меню настроек темы, полностью заменяются плагином. По словам самих разработчиков, Spectra совместима с большинством известных шаблонов, но при этом они советуют использовать именно Astra.

Если же брать тему отдельно от Spectra Gutenberg Blocks, то здесь доступны следующие настройки:

  • типографика, цветовая схема, кнопки, базовое расположение и размеры контейнеров;

  • заголовки и меню (содержимое и расположение);

  • пресеты расположения контейнеров для отдельных страниц и записей;

  • виджеты, навигация, скроллинг;

  • структура подвала сайта (расположение и количество контейнеров).

Например, в платной версии Astra пул настроек намного шире (в частности, собственный конструктор страниц и искусственный интеллект). Стоит это $49, $79 и $149 в месяц в зависимости от тарифа. Мы же сегодня рассмотрели полностью бесплатный и ничем не худший вариант создания привлекательного и адаптивного дизайна сайта.

Итог

Astra — это отличный базовый шаблон, который включает в себя пул основных настроек и возможностей. Spectra — крутое дополнение, позволяющее генерировать новые блоки, управлять ими, а также использовать готовые пресеты для страниц целых сайтов из собственной библиотеки дизайнов.
Конечно же, большим плюсом в данном случае будут хоть какие-нибудь знания редактора Gutenberg, но в целом он и так интуитивно понятен — достаточно посидеть за ним пару часов, этого времени вполне хватит, чтобы разобраться не только с базовым, но и с более глубоким управлением.

Здравствуйте! У вас включен блокировщик рекламы, часть сайта не будет работать!