Производим впечатление: как создать заголовок поста с блоками

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

Веб-сайт Джейсона Санта-Марии, вероятно, является наиболее цитируемой витриной таких сообщений. Я настоятельно рекомендую просматривать, особенно просматривать статьи Candygram.

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

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

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

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

Сегодня я уверен, что WordPress делает это более возможным, чем раньше. Есть некоторые вещи, которые он мог бы сделать лучше, например, расширить свой общий набор инструментов CSS и расширить диапазон элементов управления дизайном до большего количества блоков. Но по своей сути редактор блоков — это язык дизайна, который позволяет конечным пользователям рассказывать свои истории с помощью визуальных и текстовых элементов. Это станет лучше только с версией 6.0 и выше.

Я хотел показать, как пользователи могут использовать эти инструменты для создания более визуально уникальных историй. Эта статья из серии «Строительство из блоков» призвана стать отправной точкой.

Для тех, кто следит за нами, мы создадим раздел заголовка/введения для вымышленной истории о Готэм-сити:

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

На самом деле я собрал два разных шаблона для этого урока. Однако мне не нравились методы, использованные для оригинала:

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

Во-вторых, полагаться на элемент управления позиционированием блока Cover для выравнивания внутреннего блока Group по левому краю. Это лучший вариант для чистого адаптивного макета. Однако его вывод был непоследовательным при тестировании нескольких тем блоков.

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

Создание героя заголовка сообщения

Для этого паттерна я работал с плагином Gutenberg версии 12.9. Я попытался придерживаться функций, доступных пользователям WordPress 5.9, но старый интерфейс кажется медленнее и громоздче, чем последние обновления плагина.

Я также использовал пользовательскую тему блока. Подойдет любой, но он должен иметь «пустой» шаблон или эквивалентный полноразмерный вариант с открытым холстом. Если нет, вы можете создать его во встроенном редакторе шаблонов. Ему понадобится только блок Post Content внутри него.

Шаг 1: Создание фона

Блок «Обложка» — мой выбор при создании множества макетов. Это один из самых универсальных вариантов в WordPress, открывающий путь для многих типов дизайна. Неудивительно, что я начал здесь.

Первый шаг — вставить новый блок «Обложка» и выбрать для него изображение. Затем установите его на полную ширину и включите параметр полной высоты.

В зависимости от выбранного изображения вы можете настроить параметр наложения в соответствии с ним. Я выбрал градиент от ярко-голубого до ярко-фиолетового с непрозрачностью 70%. Я хотел, чтобы фоновое изображение проглядывало достаточно, чтобы увидеть его, но не настолько, чтобы оно подавляло все остальное.

Шаг 2: Прокладки и группа

На данный момент мы все еще строим общий макет контента. Внутри крышки из шага № 1 добавьте разделитель, группу и еще один разделитель.

Установите для каждой проставки значение 2rem или предпочитаемое вами значение. Это просто для того, чтобы показать немного больше фонового изображения в верхней и нижней части шаблона. В качестве альтернативы вы можете настроить параметр заполнения на внешнем блоке Cover для достижения того же эффекта.

Для блока Group я изменил только настройки границы. Я выбрал 3px для ширины, установил сплошной стиль и выбрал белый цвет.

Примечание. Блок «Группа» на этом шаге в будущем будет не нужен. В идеале мы могли бы просто вставить обложку из шага №3. Однако он пока не поддерживает пользовательские границы. Есть открытый тикет на добавление функции. Неясно, будет ли WordPress предлагать это для обложек в предстоящем выпуске 6.0. Сейчас мы должны добавить дополнительную оболочку.

Шаг 3: Внутренняя крышка

Добавьте новый блок Обложки внутри группы из шага №2. Установите его на выравнивание по всей ширине и включите полную высоту. Затем выберите цвет фона по вашему выбору и отрегулируйте непрозрачность в соответствии с вашим дизайном. Этот слой должен быть достаточно темным, чтобы ваш текст можно было прочитать. Вы можете изменить это позже, в зависимости от того, как все выглядит.

Для тех, кто тестирует последнюю версию Gutenberg, см. примечание в конце следующего шага.

Шаг 4: Группа контента

Я обещаю, что это последний слой вложенных контейнеров, чтобы заставить этот шаблон работать. Для этого шага вставьте новый групповой блок внутрь обложки из шага №2.

Единственная необходимая настройка — включить опцию «Наследовать макет по умолчанию» на боковой панели блока. Я установил параметр «Интервал между блоками» на 4rem , чтобы дать контенту достаточно места для дыхания, но это может меняться от темы к теме. Вы также должны выбрать белый или другой светлый цвет для параметров цвета текста и ссылок.

Примечание: это еще раз сценарий, когда WordPress 5.9 просто стесняется предлагать инструменты, которые нам нужны, чтобы сократить часть мусора. Блок Cover из шага №3 был необходим для прозрачного фона. Однако WordPress 6.0 позволяет пользователям настраивать непрозрачность любого цвета. Для тех, кто тестирует плагин Gutenberg, вы можете просто использовать блок Group на этом этапе и поместить на него прозрачный фон.

Шаг 5: Броский заголовок

Теперь мы переходим к самой интересной части — фактическому содержанию. Просто помните, что с WordPress 6.0 можно сократить предыдущие шаги вдвое.

Желая иметь дополнительное пространство между заголовком и его контейнером, я вставил блок Spacer высотой 2rem внутрь блока Group из шага №3. После этого я добавил блок «Заголовок сообщения» и установил для него выравнивание по ширине. Помните, что мы используем «пустой» шаблон для этого поста, поэтому нам нужно где-то добавить заголовок.

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

Лучший вариант — выбрать достаточно большой размер шрифта, если это предусмотрено темой для блока заголовка сообщения. Хорошо продуманный дизайн предоставит широкий выбор вариантов и позволит изменить их размер для небольших экранов. Если он недоступен, вам нужно будет добавить собственный размер шрифта и высоту строки. В моей настройке используются 6rem и 1 соответственно.

Затем выберите параметр «Черный» для параметров «Внешний вид» или «Вес», в зависимости от того, что доступно.

Шаг 6: Добавьте изображение

У вас есть два варианта для этого шага: опубликовать избранное изображение или блок изображения. У первого не так много настроек в WordPress 5.9. Ваша активная тема также может сделать некоторые пользовательские стили доступными для одного, но не для другого.

Я выбрал блок «Изображение» прежде всего потому, что хотел добавить подпись к фотографии. Затем я установил выравнивание по всей ширине и выбрал стиль «Граница», доступный в моей теме, чтобы немного отделить ее от фона.

Шаг 7: Завершение

С этого момента просто получайте удовольствие от вещей. Я добавил лед для своей вымышленной истории и еще один блок Spacer, но вы можете повозиться с другими параметрами, такими как отображение автора сообщения и даты.

Это походило на много работы по кусочкам. Тем не менее, WordPress 6.0 должен сделать все намного проще.