Представляем новый плагин WordPress Gutenberg Custom Blocks — BlockArt

Опубликовано: 2022-05-02

BlockArt Plugin — это плагин блоков Gutenberg, который поднимет ваш сайт на новый уровень.

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

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

С учетом сказанного, давайте полностью разберемся и подробно изучим BlockArt!

Оглавление

Что такое БлокАрт? (Новый плагин WordPress Gutenberg Blocks)

Вы должны быть знакомы с Gutenberg, редактором блоков WordPress по умолчанию, который позволяет редактировать каждый блок контента в записях/страницах. Хотя вы можете добавлять такие блоки, как «Абзац», «Кнопка», «Заголовок» и т. д., для создания мультимедийного контента и формирования макета вашего сайта с помощью Гутенберга, этого может быть недостаточно для вашего сайта.

Вот где пользовательские блочные плагины Gutenberg для WordPress очень удобны. Среди таких плагинов BlockArt также поставляется со всеми необходимыми блоками, необходимыми для беспрепятственного процесса создания веб-сайта.

Плагин блоков BlockArt Gutenberg

С BlockArt скорость вашего сайта не пострадает, так как блоки плагина очень легкие и полностью совместимы с плагинами кэширования. Плагин отлично работает с последней версией WordPress и предлагает регулярные обновления. На данный момент плагин пользовательских блоков Gutenberg имеет более 3000 активных установок.

Теперь давайте рассмотрим некоторые важные функции BlockArt одну за другой.


Некоторые ключевые особенности BlockArt

Расширенные блоки Гутенберга:

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

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

Готовые шаблоны:

Вы всегда можете выбрать их блоки и настроить их, но вы всегда можете начать работу с готовых шаблонов. Профессиональные дизайнеры UI/UX красиво создали готовые к импорту шаблоны, разделы и сайты, так что вы будете в восторге, когда будете их использовать.

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

Адаптивное редактирование:

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

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

Стиль любого элемента:

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

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

Скопируйте и вставьте стили:

С BlockArt все, что вам нужно сделать, чтобы скопировать стиль блока, — это нажать кнопку на панели инструментов блока.

Копировать блок

Вы можете копировать и вставлять стили с помощью сочетаний клавиш; Ctrl + C, Ctrl + Alt + V. Кроме того, копирование и вставка стилей работает на любой вкладке вашего браузера.

Область виджетов панели инструментов и редактор виджетов Customizer:

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

Виджет BlockArt

Подробное руководство по блокам BlockArt

BlockArt предлагает пользователям 6 уникальных блоков. Мы объяснили их ниже:

  1. Заголовок: с помощью этого блока вы можете добавить заголовки для каждого раздела, чтобы сделать вашу страницу/публикацию более понятной. Вы можете выбирать из различных надбавок от H1 до H6.
  2. Абзац: этот блок позволяет добавлять абзацы, которые можно настраивать и стилизовать по типографике, размеру и т. д.
  3. Раздел/столбец: вы можете добавлять строки и столбцы внутри разделов и создавать различные макеты.
  4. Изображение: изображения помогают сделать ваш контент более визуально привлекательным и захватывающим, поэтому используйте этот блок для визуальной коммуникации со своей аудиторией.
  5. Кнопка: Вы можете позволить своим пользователям перенаправляться на нужные вам страницы с помощью кнопки.
  6. Интервал: с его помощью вы можете добавить пространство между блоками на своей странице/сообщении.

Простое руководство по созданию страницы/записи WordPress с помощью BlockArt

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

1. Установите и активируйте BlockArt

BlockArt — это бесплатный плагин, который вы можете установить и активировать с панели инструментов. Сначала вам нужно войти в панель управления WordPress, а затем перейти в «Плагины» >> «Добавить новый».

Добавить новый плагин

Затем найдите BlockArt в строке поиска, и после того, как вы увидите его в результатах поиска, нажмите « Установить » и, наконец, активируйте плагин.

Установить Активировать BlockArt

Примечание . В плагин встроена популярная многоцелевая тема; Закра. Так что, если вы используете тему, вам не нужно будет устанавливать BlockArt отдельно.


2. Использование и начало работы с BlockArt

После того, как вы активируете плагин, вам нужно его настроить. Теперь вы увидите сообщение « Добро пожаловать в BlockArt» на своей панели инструментов, и вы можете начать, нажав кнопку « Создать свою первую страницу », которая затем приведет вас к редактору страниц.

Добро пожаловать в БлокАрт

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


3. Создайте страницу/публикацию с помощью блоков

В редакторе страниц вы можете добавить нужный заголовок . Далее нажмите на значок «+» в левом верхнем углу. Здесь вы теперь можете увидеть все шесть блоков BlockArt, которые вы можете использовать для создания страницы/публикации.

Блоки

Например, выбор блока « Раздел » позволяет выбирать различные макеты и позволяет добавлять до 4 столбцов в один раздел. Вы можете либо добавить столбцы внутри раздела, либо оставить раздел как есть.

Добавить раздел

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

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

Добавить столбцы

Затем нажмите значок «+» , чтобы добавить блоки внутри столбца. Затем найдите BlockArt в строке поиска, и вы увидите все блоки, которые вы можете использовать. Нажмите на блок, который вы хотите использовать, и все готово!


4. Настройте параметры блока

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

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

Блок заголовка

Доступные настройки:

  • Общие: в этом параметре вы можете выбрать разметку HTML от H1 до H6, а также изменить размер и выравнивание текста.
  • Текст: вы можете настроить размер шрифта, высоту строки, толщину и дополнительные параметры типографики.
  • Интервал: вы можете добавить поля слева и справа или сверху и снизу.
  • Цвет: с помощью этого параметра вы можете добавить цвет к своему тексту, а также добавить цвет фона.
  • Граница: используйте этот параметр для настройки радиуса границы и типа. Кроме того, он позволяет вам добавить радиус границы сверху, снизу, слева и справа, и вы также можете включить тень блока с помощью этого параметра,
Настройки заголовка

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

Доступные настройки:

  • Общее: позволяет добавлять URL, замещающий текст и выравнивание. Кроме того, вы также можете добавлять изображения со своего рабочего стола и внешних источников.
  • Изображение: с его помощью вы можете настроить высоту, ширину, максимальную ширину, непрозрачность и соответствие объекта вашего изображения.
  • Граница: этот параметр позволяет добавить тип и настроить радиус. Вы даже можете включить box-shadow с ним.
Настройки изображения

Блок абзаца

Доступные настройки:

  • Общие: используйте его для настройки выравнивания абзаца.
  • Текст: вы можете добавить размер шрифта, семейство, высоту строки и толщину, а также настроить расширенную типографику.
  • Интервал: с его помощью вы можете установить поля абзаца.
  • Цвет: позволяет добавить цвет при наведении курсора, цвет фона и цвет изображения.
Настройки абзаца

Блок кнопок

Доступные настройки:

  • Общее: позволяет добавить URL-ссылку, которая позволяет открывать его в новой вкладке.
  • Макет: вы можете изменить размер, тип и выравнивание.
  • Значки: когда вы включите эту опцию, вы увидите различные значки. Вы даже можете настроить размер и зазор, а также разместить значки слева/справа от кнопки.
  • Текст: вы можете изменить размер шрифта, семейство, толщину и высоту строки вместе с опцией расширенного типографики.
  • Цвет: позволяет добавить цвет по вашему вкусу, цвет фона или изображения, а также цвет при наведении.
  • Граница: с помощью этой опции вы можете включить тень окна, тип границы и радиус для вашей кнопки.
Настройки кнопки

Блок интервалов :

Доступные настройки:

  • Общее: используйте его для регулировки высоты блока.
  • Цвет: этот параметр позволяет добавить цвет, фоновое изображение и цвет, а затем цвет при наведении по вашему выбору.
  • Граница: добавьте параметр box-shadow, радиус и тип наведения.
Настройки интервала

Расширенные настройки

Расширенные настройки одинаковы для всех шести блоков, так что давайте пройдемся по ним.

  • Расширенный: он предлагает опцию Z-индекса, если вы хотите перекрыть два блока. Кроме того, вы можете добавить поля блока и отступы по своему желанию.
  • Отзывчивый: у вас есть три разных варианта; Скрыть на мобильных устройствах, планшетах и ​​компьютерах. Блок не будет отображаться на этом устройстве, если вы включите один из этих параметров.
  • Дополнительные классы CSS. Если вы знакомы с программированием, вы можете добавить дополнительные классы CSS.
Расширенные настройки

5. Добавьте готовые шаблоны

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

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

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

Библиотека БлокАрт

С каждым шаблоном вы можете выбирать из различных вариантов, например, с шаблонами; вы можете создавать отличные страницы, такие как «О нас», «Целевая страница», «Контактная страница» и т. д.

Шаблоны BlockArt

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

Разделы BlockArt

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

Стартовые пакеты BlockArt

Чтобы импортировать эти элементы, вам нужно навести указатель мыши на шаблон, который вы хотите использовать, и выбрать «Параметры импорта».

Импорт шаблонов BlockArt

Кроме того, вы даже можете добавлять блоки внутри шаблонов, щелкнув параметр « Добавить блок » и настроив параметры.

Добавьте блоки BlockArt

6. Опубликуйте свою страницу/публикацию

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

Для этого нажмите кнопку « Опубликовать » в правом верхнем углу страницы, и все!

Кнопка публикации

Это означает, что вы успешно создали страницу/публикацию с помощью BlockArt.


Завершение!

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

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

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

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