Как работать со страницами в WordPress и Divi: полное пошаговое руководство

WordPress работает более чем на 43% всех веб-сайтов в интернете — и не без причины. Его интуитивный интерфейс, обширная экосистема плагинов и гибкие возможности управления контентом делают его CMS по выбору для всех, от независимых блогеров до крупных компаний. Когда вы объединяете WordPress с темой Divi от Elegant Themes, вы получаете доступ к визуальному конструктору с перетаскиванием, который позволяет вам создавать потрясающие профессиональные страницы без написания единой строки кода.

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

Что такое страницы в WordPress? (И чем они отличаются от записей)

Прежде чем переходить к техническим шагам, важно понять, что такое страница WordPress на самом деле — и чем она отличается от записи блога.

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

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

Предварительные требования: что вам нужно перед началом

Чтобы следовать этому руководству, убедитесь, что у вас есть следующее:

• Активная установка WordPress в надежной среде хостинга
• Установленная и активированная тема Divi (доступна от Elegant Themes)
• Доступ администратора к панели управления WordPress
• Базовое понимание структуры и целей вашего веб-сайта

Если вы все еще настраиваете свою среду хостинга, рассмотрите VPS Hosting от AlexHost — высокопроизводительное масштабируемое решение, которое дает вам полный доступ root, выделенные ресурсы и гибкость для запуска WordPress с оптимальной скоростью. Для небольших проектов или личных сайтов Shared Web Hosting — это доступная и удобная для начинающих альтернатива, полностью совместимая с WordPress.

Шаг 1: Войдите в панель управления WordPress

Начните с открытия предпочитаемого веб-браузера и перейдите на панель администратора WordPress. URL по умолчанию:

http://yourdomain.com/wp-admin

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

> Совет профессионала: Если вы управляете несколькими сайтами WordPress или вам нужен более оптимизированный опыт администратора, рассмотрите использование VPS с cPanel для централизованного управления сервером и сайтами из единого интуитивного интерфейса.

Шаг 2: Создайте новую страницу WordPress

Находясь в панели управления, выполните следующие шаги для создания новой страницы:

1. В меню навигации слева найдите и нажмите на Страницы
2. Нажмите Добавить новую в верхней части списка страниц (или используйте ярлык + Новая > Страница в верхней панели администратора)
3. Вы будете перенаправлены в редактор блоков WordPress (Gutenberg)

Добавление заголовка и базового контента

• Нажмите на поле «Добавить заголовок» в верхней части и введите название страницы (например, О нас, Контакты, Услуги)
• В области контента ниже вы можете добавлять текстовые блоки, изображения, заголовки, кнопки и другие элементы, используя редактор блоков Gutenberg
• Используйте ярлык «/» в редакторе для быстрого поиска и вставки любого типа блока

На этом этапе вы работаете со стандартным редактором WordPress. Однако, если вы хотите расширенную визуальную настройку — и вы используете Divi — вы захотите активировать Divi Builder на следующем шаге.

Шаг 3: Активируйте и используйте Divi Builder

Divi Builder преобразует стандартный редактор WordPress в мощную визуальную среду проектирования с перетаскиванием. Вот как его включить и использовать:

Включение Divi Builder

После открытия страницы в редакторе вы увидите заметную кнопку рядом с верхней частью области контента:

«Включить Divi Builder» — нажмите на нее.

WordPress предложит вам три варианта начала:

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

Понимание структуры Divi Builder

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

Section
  └── Row
        └── Column
              └── Module

• Секции — это самые большие контейнеры, охватывающие полную ширину страницы
• Строки находятся внутри секций и определяют структуру столбцов (1, 2, 3 столбца и т. д.)
• Столбцы — это отдельные вертикальные разделения в строке
• Модули — это фактические элементы контента (текст, изображения, кнопки, формы и т. д.)

Шаг 3a: Добавление секций и строк

1. Нажмите на синий значок «+» в нижней части холста, чтобы добавить новую Секцию
2. Выберите тип секции: Обычная, Полная ширина или Специальная
3. Внутри секции нажмите на значок «+», чтобы добавить Строку
4. Выберите предпочитаемый макет столбцов (например, 1/2 + 1/2 для двухколонного дизайна)

Шаг 3b: Добавление модулей

Модули — это строительные блоки контента каждой страницы Divi. Чтобы добавить один:

1. Нажмите на серый значок «+» внутри столбца
2. Появится библиотека модулей — просмотрите или найдите нужный модуль
3. Нажмите на модуль, чтобы вставить его в ваш макет

Часто используемые модули Divi включают:

• Текстовый модуль — для абзацев, заголовков и отформатированного текста
• Модуль изображения — для фотографий, графики и иллюстраций
• Модуль кнопки — для CTA и навигационных ссылок
• Модуль слайдера — для каруселей героических изображений
• Модуль контактной формы — для сбора лидов и запросов
• Модуль Blurb — для блоков функций с иконкой + текстом
• Видеомодуль — для встроенного видеоконтента
• Модуль отзывов — для социального доказательства и отзывов
• Модуль кода — для пользовательских фрагментов HTML, CSS или JavaScript

Шаг 3c: Настройка модулей

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

#### 1. Вкладка контента

Настройте фактический контент модуля — текст, изображения, ссылки, метки кнопок, поля формы и т. д.

#### 2. Вкладка дизайна

Управляйте визуальным внешним видом модуля:

• Типография — семейство шрифтов, размер, вес, высота строки, интервал букв
• Цвета — цвета фона, текста, границы, иконки
• Интервал — элементы управления отступами и полями (с адаптивными точками останова)
• Границы и тени — скругленные углы, тени блоков, стили границ
• Размеры — ограничения ширины, высоты, максимальной ширины

#### 3. Расширенная вкладка

Получите доступ к настройкам уровня разработчика:

• CSS классы и ID — для пользовательских крючков стилизации
• Пользовательский CSS — напишите CSS для конкретного модуля напрямую
• Видимость — показать/скрыть модуль на рабочем столе, планшете или мобильном устройстве
• Анимации — эффекты входной анимации и синхронизация

> Совет по дизайну: Адаптивные элементы управления Divi позволяют устанавливать разные значения для представлений рабочего стола, планшета и мобильного устройства. Всегда предварительно просмотрите вашу страницу на всех трех точках останова перед публикацией.

Шаг 4: Организуйте ваши страницы с помощью иерархий

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

Создание отношения страницы родитель-потомок

1. При редактировании страницы посмотрите на боковую панель справа в редакторе блоков
2. Нажмите на Страница, чтобы развернуть панель настроек страницы
3. Найдите раздел Атрибуты страницы
4. Под Родительская страница нажмите на раскрывающееся меню и выберите страницу, которую вы хотите назначить в качестве родителя

Пример иерархии:

Services (parent)
  ├── Web Design (child)
  ├── SEO Consulting (child)
  └── Content Marketing (child)

Эта структура создает более чистые URL (например, yoursite.com/services/web-design/) и помогает поисковым системам лучше понять архитектуру контента вашего сайта.

Шаг 5: Добавьте страницы в меню навигации

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

1. В панели управления WordPress перейдите в Внешний вид > Меню
2. Выберите существующее меню или нажмите Создать новое меню
3. На панели Страницы слева установите флажок рядом со страницами, которые вы хотите добавить
4. Нажмите Добавить в меню
5. Перетащите и отпустите элементы меню, чтобы переупорядочить их или создать раскрывающиеся подменю
6. Нажмите Сохранить меню когда закончите

> Лучшая практика: Сосредоточьте меню основной навигации на ваших наиболее важных страницах. Стремитесь к максимум 5–7 элементам верхнего уровня, чтобы не перегружать посетителей.

Шаг 6: Настройте параметры страницы для SEO и производительности

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

Постоянная ссылка (URL-слаг)

• В боковой панели редактора блоков найдите раздел Постоянная ссылка
• Отредактируйте URL-слаг, чтобы он был коротким, описательным и богатым ключевыми словами
• Избегайте автоматически созданных слагов с номерами (например, /?p=123)
• Хороший пример: yoursite.com/about-us/
• Плохой пример: yoursite.com/?page_id=47

Избранное изображение

• Назначьте релевантное избранное изображение для улучшения внешнего вида при социальном обмене и визуальной согласованности

Шаблон страницы

• Некоторые темы (включая Divi) предлагают несколько шаблонов страниц (например, полная ширина, без боковой панели)
• Выберите подходящий шаблон в разделе Атрибуты страницы > Шаблон

SEO метаданные

• Если вы используете плагин SEO, такой как Yoast SEO или Rank Math, заполните:
• Мета-заголовок — включите ваше основное ключевое слово
• Мета-описание — напишите привлекательное резюме из 150–160 символов
• Целевое ключевое слово — установите ваш целевой поисковый термин

Шаг 7: Сохраните, просмотрите и опубликуйте вашу страницу

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

Параметры сохранения в Divi Builder

В верхнем правом углу интерфейса Divi Builder вы найдете:

• Сохранить черновик — сохраняет вашу работу без публичного отображения
• Предпросмотр — открывает живой предпросмотр вашей страницы в новой вкладке
• Опубликовать/Обновить — делает страницу активной на вашем веб-сайте

Публикация из редактора блоков

Если вы выходите из Divi Builder и возвращаетесь в стандартный редактор блоков:

1. Нажмите Сохранить черновик, чтобы сохранить без публикации
2. Нажмите Предпросмотр, чтобы просмотреть, как страница выглядит на фронтенде
3. Нажмите Опубликовать, когда вы готовы запустить ее
4. Подтвердите, нажав Опубликовать еще раз в панели подтверждения

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

Продвинутые советы: получите больше от