Использование редактора сайта WordPress в WooCommerce

Редактор сайта WordPress — это мощный визуальный инструмент, который позволяет настраивать весь магазин WooCommerce без кода. С помощью блоков и шаблонов можно изменять любые части сайта: от шапки и подвала до страниц товаров и оформления заказа.

В этой статье вы найдете обзор редактора сайта WordPress — основного инструмента для работы с шаблонами и содержимым страниц магазина. Также рассмотрим, как использовать редактор, работать с блоками WooCommerce, отменять и повторять действия, а также настраивать глобальные стили: шрифты, цвета и макет.

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

Что такое блочная тема?

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

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

Установка блочной темы

Чтобы выбрать и установить блочную тему:

1. Перейдите в админке WordPress в Внешний вид → Темы.
2. Нажмите Добавить новую.
3. Выберите фильтр Блочные темы.

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

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

Знакомство с редактором сайта WordPress

Если вы раньше не работали с редактором WordPress, рекомендуем изучить следующие материалы:

• Обзор интерфейса
• Верхнее меню
• Область контента
• Настройки боковой панели
• Навигация по редактору
• Настройка редактора

Как открыть редактор сайта

После активации блочной темы в админке WordPress появится пункт Внешний вид → Редактор.

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

Структура редактора сайта WordPress

Редактор сайта состоит из трех основных частей:

1. Вставка блоков / Список блоков — левая панель, где можно добавлять блоки или просматривать структуру страницы.
2. Область контента — центральная часть, где отображается редактируемая страница, шаблон или его часть.
3. Настройки / Стили — правая панель с настройками блока или глобальными стилями сайта.

Список блоков

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

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

Выход из редактора

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

Отмена и повтор действий

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

Глобальные стили для управления дизайном сайта

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

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

Чтобы настроить стили магазина:

1. В панели администратора WordPress перейдите в Внешний вид → Редактор.
2. Нажмите на значок «Стили» в правом верхнем углу редактора (иконка в виде круга с тёмной и светлой половинами).
3. Выберите Типографика, Цвета, Макет или Блоки и настройте нужные параметры.

Типографика

Настройки «Типографика» позволяют управлять размером, стилем и внешним видом текста на сайте, помогая создать единый и аккуратный дизайн. Узнайте, как настроить типографику в редакторе сайта WordPress.

Цвета

Цвета играют важную роль в визуальном оформлении сайта. Узнайте, как управлять цветовой палитрой сайта.

Цвет фона и изображение

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

Блоки

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

Макет

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

• Изменение ширины контента
• Настройки размеров
• Настройка расстояния между блоками

Управление и сброс стилей

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

Чтобы узнать больше о редактировании магазина с помощью блоков в WooCommerce, ознакомьтесь с руководством по использованию блоков в WooCommerce.