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

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

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

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

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

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

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

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

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

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

Теперь по порядку — более детально рассмотрим пул возможностей плагина 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 Gutenberg Blocks также имеет собственную библиотеку готовых дизайнов страниц самых разных категорий — от кафе до строительных проектов.

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

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

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

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

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

Роль темы Astra

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

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

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

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

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

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

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

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

Итог

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