Як працювати зі сторінками в 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

Після відкриття вашої сторінки в редакторі ви побачите помітну кнопку біля верхньої частини області вмісту:

«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 — елементи управління padding та margin (з адаптивними точками розриву)
• Borders & Shadows — закруглені кути, тіні блоків, стилі меж
• Sizing — ширина, висота, обмеження max-width

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 перейдіть до Appearance > Menus
2. Виберіть існуюче меню або натисніть Create a New Menu
3. На панелі Pages ліворуч установіть прапорець біля сторінок, які ви хочете додати
4. Натисніть Add to Menu
5. Перетягніть елементи меню, щоб змінити їх порядок або створити розкривні підменю
6. Натисніть Save Menu, коли закінчите

> Найкраща практика: Зберігайте своє основне меню навігації зосередженим на найважливіших сторінках. Прагніть максимум 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 включає вбудований інструмент split testing, який дозволяє тестувати різні версії модуля, розділу або сторінки один проти одного, щоб побачити, яка працює краще — безцінно для оптимізації коефіцієнта конверсії.

Захистіть свій сайт за допомогою SSL

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

Використовуйте власний домен

Професійна назва домену посилює вашу марку та покращує коефіцієнт кліків у результатах пошуку. Ви можете зареєструвати та керувати своїм доменом безпосередньо через сервіс реєстрації доменів AlexHost, з підтримкою сотень розширень TLD.

Усунення поширених проблем

Висновок

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

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

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

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

*Готові створити свій наступний проект WordPress? Почніть з міцної основи — виберіть правильний хостинг, встановіть Divi і дотримуйтесь цього посібника, щоб створити сторінки, які виглядають чудово і мають ще кращий рейтинг.*