Лучшие оригинальные блоки WordPress [Краткий обзор]

Мы предлагаем вам руководство по использованию редактора и блоков Gutenberg WordPress. Пожалуйста, прочитайте новости об изменениях блоков, которые появятся в самой следующей версии 5.4. Мы выбрали все наиболее часто используемые блоки, которые необходимо использовать на любом сайте. После выпуска мы опубликуем более подробную информацию обо всех функциях.

Когда WordPress анонсировал новый редактор Gutenberg еще в 2018 году, мы были в восторге от этого. Теперь, спустя пару лет, мы видим огромное улучшение. Редактор Gutenberg WordPress — отличный инструмент для создания веб-сайта.

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

С Плагины AitThemes Citadela, вы можете создавать определенный контент для презентации компании, бизнеса, блога или некоммерческого веб-сайта. Или даже начать новый онлайн-бизнес. Скорость веб-сайта и простота редактирования веб-сайта являются наиболее важными факторами.

Что такое блок?

Блоки Gutenberg WordPress являются строительными единицами веб-сайта. Каждый из них имеет свое особое место и предназначение. Очень важно использовать правильный блок WordPress для определенного типа контента.

Но как найти наиболее подходящий блок, соответствующий вашим намерениям?

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

Блоки текстового контента

Есть несколько блоков, которые вы можете использовать для вставки текстового контента на свой сайт. Вы можете использовать несколько блоков. В WordPress 5.4 есть новая настройка, вы можете изменить цвет текста.

• Параграф
• Заголовок
• Цитировать
• Список
• Цитата
• Стол
• Стих
• предварительно отформатировано

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

Блок кнопок

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

Где использовать блок кнопок?

Как только веб-посетитель попадает на ваш сайт, вы хотите побудить его к действию. Вот для чего нужны CTA-кнопки.

В общем, есть 3 места, где вы должны использовать блок кнопок WordPress:

• Домашняя страница — чтобы выполнить действие, которое приведет к достижению вашей цели, например, подписаться на информационный бюллетень, узнать о специальных предложениях или зарегистрироваться для получения бесплатной пробной версии.
• Страница продукта — в зависимости от того, как ведет страница вашего продукта, может быть 1 кнопка CTA (КУПИТЬ) или несколько кнопок, например, детали продукта, купить, добавить в список желаний и т. д.
• Блог — кнопки призыва к действию могут ссылаться на другую полезную статью или покупку вашего продукта/услуги.

Настройки блока кнопок

В Inspector справа вы можете легко управлять настройками вашей кнопки:

• Стиль
• Фоновый цвет
• Цвет шрифта
• Граница

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

Новости появятся в следующей версии WordPress 5.4 (выпуск 31 марта 2020 г.)

Блок кнопок будет заменен новой кнопкойс блокировать.
Из нового названия можно предположить, что вы сможете создавать больше кнопок рядом друг с другом в одном блочном контейнере. Часто возникает необходимость создать сразу два CTA, например: «Купить сейчас» и «Подробнее». Кроме того, появятся некоторые новые настройки стиля и цвета. Выберите стиль заливки или контура, а затем цвет фона. Вы можете выбрать сплошной или градиентный фон. Некоторые пресеты в качестве отправной точки будут доступны для более легкой тонкой настройки. Хорошей новостью является то, что все существующие блоки кнопок будут работать, и их не нужно будет переносить.

Блок столбцов

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

Работать с блоком Columns легко:

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

По сравнению с предыдущими трудностями, через которые вам пришлось пройти перед выпуском редактора блоков WordPress, использовать блок Columns WordPress очень просто.

Как использовать блок столбцов?

Как указано выше, есть 2 способа использования блока Columns:

• Организовать поток ваших текстов (в записи блога или на обычной странице).
• Чтобы расположить другие блоки в столбцы.

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

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

Настройки блока столбцов

После вставки блока столбцов на страницу выберите, сколько столбцов вы хотите. Это может быть любое количество от 2 до 6 столбцов. Затем вы можете начать вводить текст или добавлять блоки в каждый столбец.

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

Блок крышки

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

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

Где использовать защитный блок?

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

Блок крышки может использоваться как:

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

Настройки блока обложки

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

Вы можете выбрать выравнивание блока и, конечно же, выравнивание текста внутри.

Выравнивание блока крышки предлагает следующие варианты:

• Выровнять по левому краю
• Выровнять по центру
• Выровнять по правому краю
• Широкая ширина
• Полная ширина

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

Начиная с WordPress 5.4 вы можете выбрать градиентный фон вместо сплошного.

Блок галереи

Демонстрируйте изображения на своем веб-сайте с помощью блока «Галерея». Этот стандартный блок WordPress был разработан для хранения ваших изображений и их красивого отображения на любой странице вашего сайта. Как и другие блоки WordPress, блок «Галерея» может быть расположен в любом месте на веб-сайте или в сообщении блога.

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

Где использовать блок Галерея?

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

• Ваша домашняя страница
• Отдельные подстраницы, созданные как альбомы вашей фотогалереи
• Страницы продукта
• Сообщение блога

Настройки блока галереи

Помимо различных параметров выравнивания самого блока «Галерея», в этом блоке есть несколько интересных параметров, таких как:

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

Блок изображения

Блок изображения — это не что иное, как блок для отображения изображения на вашем сайте.

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

Когда использовать блок изображения?

Блок изображения следует использовать, особенно когда объект, отображаемый на изображении, особенно важен для вашего веб-посетителя, и вы хотите:

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

Настройки блока изображения

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

Еще одна важная опция — поля ввода для альтернативного текста, подписи и ссылки. Я настоятельно рекомендую использовать эти поля, так как они играют важную роль в поисковой оптимизации страницы.

Медиа и текстовый блок

Давайте перейдем к более сложным макетам страниц, которые вы можете создать с помощью блока «Медиа и текст». Этот основной блок WordPress позволяет вам комбинировать медиа и текст бок о бок эстетичным и контекстуальным образом.

Где использовать Медиа и текстовый блок?

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

Не забудьте добавить блок «Кнопка» в текстовую часть блока «Медиа и текст», если он используется в качестве обзора продукта/услуги. Таким образом, вы можете создать красивый раздел CTA на любой странице.

Преимущества Медиа и текстового блока

• Объединение изображения и текста, которые контекстуально соответствуют друг другу.
• Избегайте неуместного изображения в сообщении блога.
• Помощь с отзывчивостью сайта (используйте функцию «Стек на мобильном»).

Настройки медиа и текстового блока

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

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

Вставьте ссылку из WordPress версии 5.4 (31.03.2020). Вы можете выбрать ссылку, медиафайл или страницу вложения.

Табличный блок

Блок таблицы — один из примеров того, как WordPress улучшился после появления редактора блоков WordPress в версии 5.0 и выше. Если раньше вам нужен был плагин для вставки таблицы на ваш сайт WordPress, то теперь вы можете просто использовать блок Table.

Где использовать табличный блок?

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

• Сравнение данных
• Таблицы цен
• Технические детали продукта
• Рецепты
• Обзор пакетов членства

Блок Table как часть бесплатного ядра WordPress — это действительно здорово.

Настройки табличного блока

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

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

Дополнительные параметры включают в себя:

• Фоновый цвет
• Ячейки фиксированной ширины
• Заголовок
• Нижний колонтитул
• Ссылка (текстовая запись в таблице может ссылаться на другие страницы)

Какой блок вы бы хотели видеть следующим?

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