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

Тема Total WordPress поставляется с целым набором инструментов, которые могут когда-либо понадобиться бизнес-сайту.

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

Как видите, бесплатная версия Total не ограничивает вас какими-либо дополнительными компоновщиками страниц WordPress, а предоставляет собственный способ создания веб-сайта на основе WordPress.

С появлением Гутенберга, блочного редактора WordPress, любая тема WordPress, включая Total, может быть настроена намного дальше. Выбор элементов контента (блоков) дает нам свободу настройки, которую мы никогда раньше не видели в ядре WordPress, и это трудно отрицать.

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

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

• Создание вводных/приветственных разделов веб-сайта
• Продвигайте ключевые продукты или события
• Сосредоточьтесь на конкретных элементах портфолио или услугах и т. д.

Чтобы расширить возможности настройки Gutenberg, мы будем использовать плагин Getwid WordPress Blocks, который мы рекомендуем пользователям темы Total. Мы уверены, что некоторые пользователи Total уже пробовали свои силы в Getwid.

Но для тех из вас, кто интересуется, что такое Getwid, ниже приводится краткое описание.

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

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

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

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

Примеры разделов героев и призывов к действию, созданных с помощью Getwid in Total

Мы выполнили эти тестовые запуски в бесплатной версии темы Total и можем с уверенностью сказать, что ограничений практически не было.

Однако параметры ширины контейнера веб-сайта Total ограничены, поэтому, если вы ищете полноэкранные иммерсивные макеты, вы можете подумать о Total Plus.

Во-первых, вам почти всегда нужно будет использовать блок Section от блоков Getwid WordPress. Это контейнер, который может обрабатывать любое количество любых других блоков. Таким образом, ваши главные разделы могут отображать любой контент.

Еще одна важная особенность контейнера Section заключается в том, что он предлагает вам множество типов фона: изображение, цвет, видео (из вашей медиатеки WP или YouTube), многоцветный градиент и многое другое.

Итак, ваши основные задачи при оформлении областей сайта блоком Раздел:

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

Давайте теперь пойдем с примерами.

Пример 1. Товарная витрина

Все блоки в этом примере размещены внутри блока Section:

1. Расширенный заголовок
2. Расширенный заголовок
3. Расширенный заголовок
4. Группа кнопок
5. Фон раздела: изображение (Позиционирование > Верхний правый угол; Размер > Авто)

Блок заголовка позволяет использовать любой шрифт Google, размер текста, толщину шрифта и т. д. Также есть несколько стилей для кнопок (заливка или контур).

Самая большая проблема, которая может возникнуть, — найти правильное фоновое изображение и выбрать правильное положение изображения, поскольку его размер автоматически изменяется в зависимости от области просмотра.

Пример 2. Выписка из портфолио

Все блоки размещены внутри блока Section:

1. Расширенный заголовок
2. Расширенный заголовок
3. Три столбца (абзац, изображение, изображение, изображение)
4. Фон раздела: градиент

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

Пример 3. Карточка характеристики или события

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

Блок Advanced Heading позволяет выбрать любой шрифт:

В этом примере мы использовали градиентный фон и разделитель нижней формы фона (многослойные волны).

1. Два расширенных заголовка
2. Пункт
3. Кнопка
4. Изображение
5. Фон раздела: градиент + разделители формы

Пример 4. Раздел призыва к действию

Опять же, вам нужно начать с блока Section. Чтобы разместить заголовки, как в примере ниже, вы можете использовать шаблон из библиотеки шаблонов Getwid или создать шаблон с нуля.

Это очень простой раздел с фоновым изображением, несколькими заголовками и централизованной кнопкой.

1. Три расширенных блока заголовков
2. Блок кнопок
3. Фон раздела: изображение с непрозрачностью (Размер > обложка)

Вам также понравится, как легко можно настроить выравнивание содержимого с помощью перетаскиваемых углов:

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

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

Пример 5. Секции подгероев

Довольно часто разделы подгероев предоставляют больше информации о проекте или человеке. Он подходит для демонстрации вашей биографии, истории или ключевых целей.

В качестве визуального элемента мы использовали блок Image Stack Gallery от Getwid, который имеет несколько стилей. Однако вы можете заменить его изображением, видео или любым другим элементом контента.

1. Два расширенных заголовка
2. Пункт
3. Кнопка
4. Блок Галерея стека изображений
5. Фон раздела: сплошной цвет

Пример 6. Визуальные акценты

Галереи изображений, слайдеры и видео — очень распространенные визуальные инструменты для создания привлекающих внимание разделов.

Например, вы можете использовать блок Media & Text Slider от Getwid для создания слайд-шоу с дополнительным текстовым содержимым:

1. Медиа и текстовый слайдер
2. Фон раздела: градиент + верхний и нижний разделители произвольной высоты

Существует также множество пост-блоков Getwid, которые могут быть представлены в слайдере (они будут автоматически получены из контента вашего сайта). Хотите представить несколько последних или выбранных вручную сообщений в формате слайдера или сетки/списка? Для этого есть блок.

Пример 7. Баннеры

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

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

1. Баннер
2. Фон раздела: монохромный градиент

Пример 8. Информационные разделы

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

Вот двухколоночный макет с блоком Accordion и изображением рядом с ним:

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

Есть много других блоков, которые могут добавить уникальные функции в ваши маркетинговые разделы, например, Image Hotspot для создания информативных разделов изображений, Icon Box для услуг, лента галереи Instagram в реальном времени и многое другое.

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

Обернуть

Знаете ли вы, что самое лучшее в использовании комбинации Gutenberg и Getwid в бесплатной теме Total? Нет, важно не только количество блоков.

Что еще более важно, вам не нужно иметь глаз дизайнера (или навыки разработчика), чтобы создавать красивый контент. Есть так много готовых скинов, шаблонов блоков и готовых дизайнов, которые помогут вам. Блоки Getwid WordPress также являются хорошей альтернативой конструкторам страниц для тех из вас, кто пользуется бесплатной версией Total.

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

Вы пробовали Гутенберг или Getwid? Дайте нам знать об этом в комментариях.