Как работать со страницами в 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

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

«Enable Divi Builder» — нажмите на неё.

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

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

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

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

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

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

Шаг 3a: Добавление Sections и Rows

1. Нажмите на синий значок «+» в нижней части холста, чтобы добавить новый Section
2. Выберите тип section: Regular, Fullwidth или Specialty
3. Внутри section нажмите на значок «+», чтобы добавить Row
4. Выберите предпочитаемый макет столбцов (например, 1/2 + 1/2 для двухколоночного дизайна)

Шаг 3b: Добавление Modules

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

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

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

• Text Module — для абзацев, заголовков и отформатированного текста
• Image Module — для фотографий, графики и иллюстраций
• Button Module — для CTA и навигационных ссылок
• Slider Module — для каруселей изображений героев
• Contact Form Module — для сбора лидов и запросов
• Blurb Module — для блоков функций с иконкой + текстом
• Video Module — для встроенного видеоконтента
• Testimonial Module — для социального доказательства и отзывов
• Code Module — для пользовательских фрагментов HTML, CSS или JavaScript

Шаг 3c: Настройка Modules

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

1. Content Tab

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

2. Design Tab

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

• Typography — семейство шрифтов, размер, вес, высота строки, интервал между буквами
• Colors — цвета фона, текста, границы, иконок
• Spacing — элементы управления отступами и полями (с адаптивными точками разрыва)
• Borders & Shadows — скруглённые углы, тени блоков, стили границ
• Sizing — ширина, высота, ограничения максимальной ширины

3. Advanced Tab

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

• CSS Classes and IDs — для пользовательских крючков стилизации
• Custom CSS — напишите CSS для конкретного модуля напрямую
• Visibility — показывайте/скрывайте модуль на рабочем столе, планшете или мобильном устройстве
• Animations — эффекты входной анимации и синхронизация

> Совет по дизайну: Адаптивные элементы управления 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 Slug)

• В боковой панели редактора блоков найдите раздел Постоянная ссылка
• Отредактируйте URL slug, чтобы он был коротким, описательным и богатым ключевыми словами
• Избегайте автоматически сгенерированных slug’ов с номерами (например, /?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 вы найдёте:

• Save Draft — сохраняет вашу работу без публичной видимости
• Preview — открывает живой предпросмотр вашей страницы в новой вкладке
• Publish/Update — делает страницу активной на вашем сайте

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

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

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

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

Продвинутые советы: получение максимума от WordPress и Divi

Используйте Divi Theme Builder для глобальных шаблонов

Divi Theme Builder (доступен в Divi 4.0+) позволяет создавать глобальные шаблоны для заголовков, подвалов и определенных типов записей/страниц. Это обеспечивает единообразие дизайна на всем сайте без необходимости редактирования каждой страницы вручную.

Сохраняйте макеты в библиотеку Divi

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

Включите A/B тестирование Divi (Split Testing)

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

Защитите свой сайт с помощью SSL

Если вы еще этого не сделали, убедитесь, что ваш сайт WordPress работает на HTTPS. SSL сертификат необходим для доверия пользователей, безопасности данных и рейтинга Google. AlexHost предлагает SSL сертификаты, которые легко устанавливаются и совместимы со всеми окружениями хостинга WordPress.

Используйте пользовательский домен

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

Устранение распространенных проблем

Заключение

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

• Создавать хорошо структурированные страницы WordPress с четкими заголовками и содержимым
• Проектировать визуально привлекательные макеты с помощью конструктора Divi с перетаскиванием
• Организовывать ваши страницы в логические иерархии для лучшего UX и SEO
• Настраивать ключевые параметры, такие как постоянные ссылки, метаданные и шаблоны
• Публиковать с уверенностью после предварительного просмотра на всех типах устройств

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

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

*Готовы создать свой следующий проект WordPress? Начните с прочного фундамента — выберите правильный хостинг, установите Divi и следуйте этому руководству, чтобы создавать страницы, которые выглядят отлично и ранжируются еще лучше.*