Редагування головної сторінки за допомогою Elementor: додавання модулів (тексту, зображень, кнопок тощо)

Навчання додавання базових модулів — це основна навичка для дизайну сторінок за допомогою Elementor. У цьому розділі ми навчимо вас додавати текст, зображення, кнопки та інші часто використовувані елементи, а також налаштовувати їхній стиль, щоб ваша головна сторінка набула своєї первинної форми.

Підготовка: перейти в режим редагування Elementor.

1. Увійдіть у адмінпанель WordPress, перейдіть до розділу "Сторінки", знайдіть "Головну сторінку" (або сторінку, яку ви хочете відредагувати) і натисніть "Редагувати".
2. Натисніть кнопку "Редагувати за допомогою Elementor" (синя, з логотипом Elementor) у верхній частині сторінки, щоб перейти до візуального редактора.

Після входу інтерфейс розділений на три частини:

• Зліва: панель модулів.(включаючи всі елементи, які можна додати)
• Середина: зона редагування.(Показує ефект сторінки в режимі реального часу)
• З правого боку: панель стилів.(Після вибору елемента можна налаштувати стиль деталей)

Перший крок: додати модуль "Заголовок" (текстовий заголовок).

Заголовок є "каркасом" сторінки, який допомагає відвідувачам зрозуміти ієрархію контенту.

1. Знайти модуль заголовка.У панелі модулів на лівій стороні знайдіть модуль "Заголовки" в категорії "Основи" (значок "T").
2. Зіставте та додайте на сторінку.Натисніть на модуль "Заголовок", перетягніть його на місце "Додати елемент сюди" у центральній області редагування і відпустіть мишу. Після цього на сторінці з'явиться стандартний заголовок "Це заголовок".
3. Змініть вміст заголовка.Виберіть щойно доданий модуль заголовка, і на правому боці з'явиться панель редагування:
   • У розділі "Контент" → "Текст заголовка" видаліть стандартний текст і введіть свій заголовок (наприклад, "Ласкаво просимо на мій особистий блог").
   • Виберіть рівень у розділі "Рівень заголовка" (H1 є найвищим і підходить для головних заголовків; H2 є наступним і підходить для підзаголовків; виберіть відповідно до ієрархії контенту).
4. Змініть стиль заголовка.Натисніть на вкладку "Стиль" на правій панелі, щоб налаштувати його на свій розсуд:
   • ШрифтУ спискуку «Шрифти» виберіть потрібний шрифт (наприклад, «Microsoft Yahei» або «Arial»).
   • РозмірЗмініть розмір шрифту, пересунувши повзунок "Розмір шрифту", або введіть значення вручну (рекомендується, щоб розмір заголовка був у межах від 24 до 48 пікселів).
   • КолірНатисніть на квадрат "Колір тексту", щоб вибрати колір заголовка (наприклад, чорний або темно-синій).
   • Вирівняти.Натисніть кнопку "Вирівнювання тексту", щоб налаштувати вирівнювання заголовка ліворуч, по центру або праворуч (для головного заголовка на головній сторінці рекомендується вирівнювання по центру).

Другий крок: додайте модуль "Параграфи" (текст основної частини).

Абзаци використовуються для представлення детальної інформації, такої як опис, пояснення тощо.

1. Додати модуль абзацуУ розділі "Основи" зліва знайдіть модуль "Абзац" (його значок — символ абзацу) і перетягніть його під заголовочний модуль.
2. Змініть вміст абзацу.Виберіть модуль "Параграфи", а потім у розділі "Вміст" → "Текст" з правого боку введіть свій текст (наприклад, "Тут я ділюся своїми життєвими спостереженнями та навчальними записами. Запрошую вас сюди для спілкування!").
3. Оптимізуйте стиль абзаців.Перейдіть на вкладку "Стиль":
   • Розмір шрифтуРекомендується встановити розмір шрифту на 16-18 пікселів (для зручності читання).
   • Висота рядкаЗмініть його на 1,5–1,8 разів (щоб інтервал між словами був більш зручним).
   • КолірВиберіть колір, який відрізняється від кольору заголовка (наприклад, темно-сірий), щоб його не плутали з кольором фону.

Третій крок: додайте модуль "Зображення" (вставте зображення).

Зображення можуть зробити сторінку більш привабливою, тому рекомендується вибирати чіткі та релевантні зображення (наприклад, фотографії особи, зображення продуктів, пейзажі тощо).

1. Завантажте або виберіть зображення.У розділі "Основи" зліва знайдіть модуль "Зображення", перетягніть його вниз до абзацу. Виберіть модуль "Зображення", а потім у розділі "Контент" → "Зображення" натисніть "Вибрати зображення":
   • Якщо зображення вже є на комп'ютері, натисніть "Завантажити файл" → виберіть зображення → натисніть "Вибрати".
   • Якщо ви вже завантажували фото раніше, просто виберіть потрібне зображення в розділі "Медіатека".
2. Змініть налаштування відображення зображень.Перейдіть на вкладку "Стиль":
   • РозмірУ розділі "Ширина" встановіть пропорції зображення на сторінці (наприклад, 100% означає повноекранну ширину, а 80% — трохи вужчу).
   • Закруглені кути.Змініть параметр "Радіус рамки", щоб зробити краї зображення округлими (чим більше значення, тим більш вираженими будуть округлі краї).
   • ТіньУвімкніть "Тінь коробки", щоб додати легку тінь до зображення (щоб зробити зображення більш об'ємним).
3. Додайте опис зображення (необов'язково).Введіть опис зображення (наприклад, "Мої фотографії з подорожей") в розділі "Контент" → "Альтернативний текст", що допоможе пошуковим системам зрозуміти зміст зображення і покращити SEO.

Крок 4: додайте модуль "Кнопка" (для заохочення до кліку)

Кнопки часто використовуються для направлення відвідувачів на певні дії, такі як "Переглянути більше", "Зв'язатися зі мною", "Купити зараз" тощо.

1. Модуль кнопки додаванняУ розділі "Основи" на лівій стороні знайдіть модуль "Кнопки" і перетягніть його під зображення.
2. Налаштуйте вміст кнопки та посилання.Модуль вибору кнопки в розділі "Контент" праворуч:
   • Текст: Введіть текст кнопки (наприклад, "Переглянути мої статті").
   • посилання (на сайті)Натисніть на поле для вводу поруч із "Діяльність" і введіть адресу посилання (наприклад, адресу сторінки зі списком ваших блогів або зовнішнє посилання).
     • Якщо посилання веде на сторінку всередині сайту, ви можете натиснути на іконку "Вибрати сторінку" праворуч від поля вводу і безпосередньо вибрати цільову сторінку.
3. Створення стилю кнопкиПерейдіть на вкладку "Стиль" і створіть привертаючі увагу кнопки:
   • КолірВиберіть білий колір для "кольору тексту" і яскравий колір (наприклад, синій або оранжевий, який гармонує з основним кольором сторінки) для "кольору фону".
   • РозмірВиберіть "Середній" або "Великий" для розміру кнопки, щоб її було легше натискати.
   • формаВстановіть "Радіус рамки" на 5-10 пікселів (трохи закруглений кут виглядає краще).
   • ** Ефект "ховер "**: натисніть на вкладку "Ховер", щоб налаштувати колір, який відображатиметься при наведенні курсору миші (наприклад, зміна кольору на більш темний), і таким чином підвищити інтерактивність.

5-й крок: налаштуйте відступи між модулями (щоб сторінка виглядала акуратніше).

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

1. Виберіть модуль.Натисніть на край модуля (з'явиться синій контур).
2. Змініть зовнішні відступи.У правій панелі "Додаткові налаштування" → "Поля", встановіть відстань між модулем і верхніми елементами (наприклад, "Верхній відступ" встановіть на 30 пікселів, щоб збільшити відстань між модулем і верхнім елементом).
3. Здійснити уніфіковане вирівнювання.Натисніть і утримуйте Ctrl Клавіша (або Command Щоб вибрати кілька модулів одночасно, натисніть кнопку "Вирівняти" на верхній панелі інструментів (наприклад, "Вирівняти по центру"), щоб елементи виглядали більш акуратно.

Шостий крок: збереження та перегляд.

1. Зберегти зміниНатисніть кнопку "Оновити" внизу ліворуч на сторінці (рекомендується зберігати зміни відразу після їх внесення).
2. Ефект попереднього перегляду.Натисніть кнопку "Перегляд" у лівому верхньому куті та виберіть "Перегляд на настільному ПК", "Перегляд на планшеті" або "Перегляд на телефоні", щоб перевірити, як контент відображається на різних пристроях (переконайтеся, що на телефоні текст не перекривається, а зображення не спотворюються).

Поради для новачків

• Модулі можна додавати повторно: якщо вам потрібно кілька абзаців або зображень, просто перетягніть відповідний модуль кілька разів.
• Видалення модуля: після вибору модуля натисніть на клавіатурі. Delete Натисніть клавішу Delete або клікніть значок "кошик" над модулем.
• Модуль копіювання: після вибору модуля натисніть значок "Копіювати", щоб швидко скопіювати елементи з однаковим стилем (з можливістю внесення змін).

За допомогою вищеописаних кроків ви вже освоїли основні навички додавання модулів у Elementor. Далі спробуйте додати такі модулі, як "Іконки", "Роздільні лінії", "Списки", щоб зробити головну сторінку більш різноманітною!