Як працювати зі сторінками в 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 з оптимальною швидкістю. Для менших проектів або особистих сайтів Спільний веб-хостинг — це доступна та дружелюбна до початківців альтернатива, яка повністю сумісна з 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. Натисніть Зберегти ч