Извлеченные уроки из редизайна веб-сайта SaaS с помощью Гутенберга

Выпуск WordPress 5.0 в декабре 2018 года стал знаковым событием для мира WordPress. Мы все знали, что введение редактора Гутенберга сильно изменит то, как мы строим, взаимодействуем и управляем нашими веб-сайтами.

Но в целом это был плавный переход.

Хотя наилучшей практикой будет поддержание наших веб-сайтов в актуальном состоянии с последними и лучшими предложениями WordPress, смена редактора – это большой шаг. Но есть кое-что, что(возможно, по праву) заставило многих замедлить внедрение редактора блоков.

В самом деле, может быть не следует спешить с перестройкой веб-сайта для бизнеса или покупателей в новой среде редактора блоков?

Не страшась проблем, наша команда Castos приступила к переделке собственного сайта в начале этого года. Переделка базировалась на Гутенберге. Мы многому научились и хотели поделиться с вами большей частью данных новых знаний.

Известные ограничения встроенного редактора блоков

Хотя новая среда редактирования значительно превосходит предыдущие версии, в ней могут отсутствовать некоторые ключевые элементы, которые вы хотели бы видеть на веб-сайте. Некоторые из данных расширений ещё не доступны в собственном редакторе или в сторонних пакетах блоков.

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

Поработав с несколькими, мы решили использовать один пакет первичных блоков CoBlocks. Он имеет большинство возможностей, которые мы использовали, и прекрасно работает с основными блоками WordPress.

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

Выбор темы

Для начала необходимо выбрать тему. Для нашего дизайна мы отошли от среды Genesis, служившей нам в течение многих лет и до сих пор, решив создать дочернюю тему из первой темы Гутенберга – Atomic Blocks.

Есть много тем, готовых работать с Гутенбергом, включая Genesis. Но зная, что блоки будут выполнять тяжелую работу по созданию веб-сайта, мы выбрали минималистичную легкую тему, которая предлагала только то, что нам было необходимо, без большого числа дополнений.

Блок соображений для темы

Вы тоже захотите убедиться, что тема имеет в себя широко открытый базовый шаблон страницы для работы, который использует преимущества двух новых настроек выравнивания: wide и full.

Проверьте, настроена ли тема для

add_theme_support

в файле functions.php и обязательно добавьте поддержку для этого, если она отсутствует.

Увеличение производительности при помощи Гутенберга

В новом редакторе Gutenberg есть пару областей, которые могут сэкономить время – это повторное использование элементов страницы на веб-сайте.

Многоразовые блоки

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

Мы используем это чаще всего в том, что мы называем «блоком CTA», который присутствует на нашей домашней странице и чуть выше нижнего колонтитула на большинстве страниц.

редизайна сайта SaaS

Смотрите также:

Лучшие в 2019 году темы WordPress 5.0 для веб-сайта.

Копирование блоков между страницами

Если вы собрали отличный макет для целевой страницы, который хотели бы использовать повторно, можете без проблем скопировать макет блока и сохранить его на новой странице. Для этого перейдите в элементы InspectorControls, переключившись в Code Editor, и скопируйте все элементы блока для данной страницы и вставьте их на новую страницу.

На нашем веб-сайте мы использовали этот способ для выведения формата страниц на многих специальных страницах. Таким образом, все они имеют одинаковый внешний вид и формат, и наша маркетинговая команда редактирует для каждой страницы только контент.

CSS селекторы уровня блока

В нескольких местах мы обнаружили, что функция добавить пользовательский CSS селектор в блок – это отличный метод быстро изменить элемент, в котором необходимо настроить стиль. Хотя это и не самый лаконичный метод написания CSS, на крайний случай он будет полезен.

В частности, мы сделали это, чтобы добавить тени и эффекты в блок Testimonials, который предлагает GhostKit.

Извлеченные уроки из редизайна сайта SaaS при помощи Гутенберга

Трудные места

Наши пользователи не заметят изменений, происходящих в новом редакторе за кулисами. Но данные изменения оказывают огромное влияние на администраторов веб-сайта.

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

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

В процессе редизайна Castos мы постарались создать основу для быстрого и безболезненного создания новых страниц и записей в будущем. Это включало предоставление нескольких параметров элементов Gutenberg Inspector Controls в боковой панели, таких как цветовая палитра и ограничение стилей блоков.

Если тема работает с Гутенбергом, добавить цветовую палитру можно без труда довольно просто, добавив поддержку тем для editor-color-palette. Этот фрагмент сделает ваше дело:

add_theme_support('editor-color-palette',array(array('name' => __( 'independence', 'castos-theme'),'slug' => 'independence','color' => '#555471',),array('name' => __( 'payne grey', 'castos-theme'),'slug' => 'payne grey','color' => '#5F5D7E',),));

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

Если на веб-сайте есть руководство по стилю, то загрузка его напрямую в палитру цветов будет означать, что на веб-сайте установлены постоянные цвета. И ошибок или путаниц с выбором цвета не будет.

Ещё один шаг вперед

Можно сделать ещё один шаг вперед и расширить существующие базовые блоки, используя варианты стилей блоков. Этот способ дает большой выигрыш, как и цветовая палитра, так как вы добавляете функциональность там, где администратор ожидает ее найти – в рамках существующих параметров блока.

Извлеченные уроки из редизайна сайта SaaS при помощи Гутенберга
Лучшее всего рассмотреть функция использования данной техники на блоке кнопок.

Большинство блочных пакетов и плагинов предоставляют собственную версию кнопок, которая быстро добавляет несколько кнопок и их стилей.

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

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

Максимально использовать шаблоны страниц

Учитывая, что построение страниц сейчас в основном выполняется в редакторе, шаблоны страниц также развиваются.

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

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

Пожалуй, единственное место в Гутенберге, в котором мы искали то, что не могли запросто найти: шаблоны блоков.

«Шаблон блока» может быть чем-то похожим на многократно используемый блок, но в котором содержимое запросто изменяется для каждого экземпляра, где используется блок. Мы хотели бы использовать его в разделе дополнительных возможностей в дизайне нашей домашней страницы.

Извлеченные уроки из редизайна сайта SaaS при помощи Гутенберга

Здесь расположение и структура каждого из данных 3-х блоков одинаковы, но все содержимое отличается. Что-то вроде блочного шаблона было бы идеальным, чтобы сэкономить нам время на создание одного и того же каждый раз, когда мы хотим создать один из данных разделов.

Послесловие

Проектирование и разработка темы в новом редакторе блоков – это баланс между предоставлением стиля, который определяет внешний вид веб-сайта, и пользовательского интерфейса для администратора, чтобы создавать страницы, соответствующие дизайну веб-сайта в целом.

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *