Підручник WordPress Elementor | Покроковий посібник у 2024 році

Ви хочете розпочати роботу з Elementor і шукаєте Підручник WordPress Elementor? Тут ваш пошук закінчується. У цій статті я розповім вам усе, що вам потрібно знати про Elementor.

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

Але вам потрібен плагін конструктора веб-сайтів, щоб зробити ваш сайт професійним.

Як ви це отримуєте? Ну я користуюся Elementor для того. Elementor дуже полегшує мені створення професійного веб-сайту за допомогою простої функції перетягування. 

Цікаво дізнатися більше про Elementor, тоді перегляньте мої детальні відомості Огляд Elementor.

Як встановити Elementor на WordPress

Ну, є 2 способи, якими ви можете встановити Elementor на WordPress. 

• Через офіційний сайт Elementor

Перейдіть на офіційний веб-сайт Elementor і натисніть кнопку Безкоштовне завантаження, яка відображається на веб-сайті. 

Щойно ви натиснете кнопку «Безкоштовне завантаження», з’явиться спливаюче вікно для підписки на веб-сайт Elementor, і як тільки ви це зробите, плагін автоматично почне завантажуватися.

Ви знайдете zip-файл, завантажений на свій ноутбук/ПК. Тепер перейдіть на інформаційну панель WordPress і натисніть розділ «Плагіни» > «Додати новий плагін» > «Завантажити плагін».

Виберіть файл Elementor і завантажте його на WordPress.

• Через інформаційну панель WordPress

Ви також можете встановити плагін Elementor безпосередньо з інформаційної панелі WordPress. Просто перейдіть до Plugin, а потім Add New Plugin

У верхньому правому куті ви знайдете рядок пошуку, введіть Elementor у рядку пошуку. Найперший результат — це те, що вам потрібно встановити у свій WordPress. Просто натисніть «Встановити» та дочекайтеся встановлення плагіна. Активуйте плагін, і ви отримаєте чудовий конструктор веб-сайтів, готовий до розгортання.

Тепер, коли ви встановили Elementor на інформаційній панелі WordPress, давайте подивимося на функції, які він надає.

Функції Elementor та їх використання для створення веб-сторінки

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

Є два плани для Elementor The Free і The Pro. Як випливає з назви плану Pro, вам доведеться грати, але в безкоштовний план також є кілька функцій.

Я почну з обговорення функцій у безкоштовному плані, а потім у Pro.

Особливості безкоштовного плану Elementor

Основні характеристики:

• Перетягування

Функція перетягування в Elementor дуже швидка і допомагає швидше створювати веб-сторінки. Від створення макета веб-сторінки до тонкого налаштування все це можна зробити простим перетягуванням.

Вам не потрібно перемикати вкладки або змінювати сторінку, щоб створити верхні та нижні колонтитули. За допомогою Elementor ви можете зробити це на тій самій сторінці, де знаходиться ваша основна веб-сторінка.

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

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

Існує 3 варіанти збереження дизайну: від видалення до створення резервної копії. Ви можете повторити/скасувати створені дизайни. Це дає вам можливість провести A/B-тестування сторінки за вашими спостереженнями. 

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

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

Як використовувати функцію перетягування Elementor

Усі функції перетягування доступні в лівій частині сторінки, щойно ви створите сторінку.

Створивши сторінку на WordPress і давши їй назву, просто натисніть «Редагувати за допомогою Elementor», після чого ви перейдете до живого редактора Elementor, який виглядає як на зображенні нижче.

На другому зображенні вище ви можете подивитися на параметри перетягування в лівій частині сторінки. Є багато віджетів, які потрібно просто прокрутити вниз, або ви також можете шукати віджет за допомогою панелі пошуку вгорі.

• Шаблони дизайну

Ви отримуєте вбудовані шаблони дизайну з Elementor. Не лише 5 чи 10, але Elementor надає вам понад 100 безкоштовних шаблонів дизайну та багато іншого після оновлення до версії Pro.

Як вибрати потрібний шаблон для бібліотеки шаблонів Elementor

Коли ви вперше відкриєте сторінку конструктора Elementor, ви побачите щось подібне до показаного нижче:

Зображення взято з веб-сайту Elementor і досить зрозуміле.

Як тільки ви клацнете опцію «Папка», ви побачите спливаюче вікно, показане нижче.

• віджети

Віджетів перетягування, які постачаються з Elementor, незліченна кількість. Деякі з них:

• Внутрішня секція: давайте розділимо секцію на дві частини.
• Заголовок: перемістіть це поле на свою веб-сторінку, щоб додати цікавий заголовок
• Зображення: розмістіть зображення на своїй веб-сторінці за допомогою цього віджета
• Текстовий редактор: введіть текст на своїй веб-сторінці за допомогою віджета текстового редактора
• Відео: Ви можете використовувати віджет Video для розміщення якісних відео на своїй сторінці. Це покращить користувацький досвід
• Кнопка. Заклик до дії дуже важливий майже для всіх сайтів. За допомогою кнопок ви можете розмістити заклик до дії на своїй сторінці та зв’язати їх із цільовою сторінкою продукту.
• Зірковий рейтинг: Зірковий рейтинг корисний для будь-якого веб-сайту електронної комерції, щоб оцінити кілька різних продуктів, які він пропонує.
• Роздільник: допомагає вашій веб-сторінці зробити відступи та створює пробіл для покращення взаємодії з користувачем.
• Піктограми: за допомогою віджета піктограм ви можете розміщувати помітні піктограми соціальних мереж, а також різних служб, щоб ваша сторінка виглядала привабливіше.
• Лічильник: створіть таймер зворотного відліку для своїх продуктів або обмежених додаткових послуг, щоб створити терміновість.
• Відгуки: додайте відгуки про свої продукти та послуги, щоб створити довіру відвідувачів вашого веб-сайту.

Окрім цього, є багато інших віджетів, таких як карусель зображень, основна галерея, вкладки, короткі коди, HTML, рядок меню тощо. Обов’язково перегляньте всі функції після встановлення плагіна на WordPress.

Подивіться на деякі з віджетів Elementor нижче на зображенні.

Як використовувати віджети Elementor

Для використання віджетів Elementor:

Перейдіть на інформаційну панель Elementor і подивіться на ліву частину сторінки. Існує кілька віджетів, які можна перетягнути на свою веб-сторінку та почати роботу.

• Адаптивний дизайн і редагування

Завдяки тому, що правило індексу мобільних пристроїв стає все відомішим, Google гарантує, що сайт, зручний для мобільних пристроїв, займає лише вищі позиції в Google, і те саме зараз стосується інших пошукових систем. 

З Elementor вам не потрібно турбуватися про зручність для мобільних пристроїв, оскільки всі шаблони, безкоштовні чи платні, адаптовані до мобільних пристроїв, а також до планшетів і комп’ютерів. Ви також можете змінити, які функції бачитимуть ваші користувачі, коли вони отримають доступ із мобільного чи комп’ютера. 

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

Як переглянути швидкість реагування веб-сторінок на мобільні пристрої

У нижній частині конструктора веб-сторінок, у нижньому лівому куті, ви побачите три значки, за допомогою яких можна переглядати веб-сторінку на комп’ютері, планшеті та мобільному пристрої. Сайт виглядатиме так само для інших користувачів після того, як ви опублікуєте свій веб-сайт.

Особливості робочого процесу:

• Не вимагає кодування

Під час використання вам не потрібно бути експертом або навіть трохи знати про кодування Elementor . Усі згадані вище віджети можна перетягувати, і ви можете легко створити з ними високоякісну та стильну веб-сторінку. 

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

• Панель навігації

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

Як користуватися панеллю навігації

Щоб скористатися Навігатором, просто клацніть правою кнопкою миші на серверній частині вашої веб-сторінки, відкритої за допомогою Elementor, і виберіть Навігатор. З’явиться спливаюче вікно, як показано на зображенні нижче.

• Гарячі клавіші

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

• Функція вбудованого редагування

З Elementor вам не потрібно писати свій вміст деінде, копіювати, вставляти та редагувати його стиль. Ви можете вводити текст безпосередньо на інформаційній панелі WordPress із потрібним стилем і заощаджувати свій дорогоцінний час.

Особливості дизайну

• Глобальні шрифти

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

• Глобальні кольори

Подібним чином, якщо встановлено глобальний шрифт, ви можете встановити однаковий колір усього тексту веб-сайту, якщо потрібно.

• Фонові градієнти

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

• Фонові відео

Ви можете використовувати відео як фон із Elementor. Відео у фоновому режимі справді може засвітити вашу веб-сторінку.

Як використовувати функції дизайну в Elementor

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

• Інші особливості
• Застосувати фонове накладання
• Перемістіть слайд-шоу у фоновий режим
• Створіть полотно, щоб ваша сторінка виглядала живою
• Використовуйте режими змішування
• Фільтри стилів CSS
• Формові роздільники
• Тінь коробки
• іконки
• Експорт значків SVG з інших веб-сайтів

Особливості компонування

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

Ви також можете налаштувати поля та відступи, що є дуже важливою функцією веб-сторінки. 

Особливості плану Elementor Pro

Необхідний

Окрім безкоштовної функції, Elementor Pro пропонує ще 2 функції.

1. Конструктор спливаючих вікон

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

Функція, як і інші віджети, присутня на інформаційній панелі Elementor.

За допомогою конструктора спливаючих вікон ви можете створити такі спливаючі вікна:

• E-mail підписка
• Спливаючі вікна форми входу
• Спливаючі банери для просування та продажу
• Захоплення свинцю
• Блокування вмісту та розкриття спливаючих вікон
• Сповіщення
• Вихід із наміру
• Спливаючі вікна вітального типу
• Пов’язаний продукт і додаткові продажі

2. Конструктор тем

З Elementor Pro ви маєте повний контроль над усіма функціями, які використовуєте на своєму веб-сайті. Ви можете створити 404 сторінки та спрямувати користувачів на сторінку за вашим вибором. 

Ви можете керувати верхнім і нижнім колонтитулами на тій самій сторінці, на якій ви розробляєте дизайн. Завдяки потужній інтеграції WooCommerce ви також можете оптимізувати сторінки своїх продуктів.

Особливості дизайну

1. Користувацький CSS

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

Використовуючи його без будь-яких попередніх знань, ви також можете піти на південь. Тому, якщо ви не володієте набором навичок, краще тримайтеся подалі від функції Custom CSS.

2. Ефекти руху

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

Як використовувати функцію дизайну в Elementor

Ну, це не ракетобудування. Як і інші віджети, ви можете прокручувати панель приладів і шукати їх або просто вводити назву віджета на панелі пошуку.

Маркетинг

Ці функції відсутні у безкоштовній версії Elementor.

• Віджет форми

За допомогою конструктора форм Elementor ви можете вносити різні зміни та робити свої форми цікавими та привабливими для заповнення.

• Досить легко вибрати потрібний вам макет і інтервал.
• 10+ полів на вибір, які ви хочете у своїй формі.
• Вибирайте з-поміж багатьох кольорів і типографіки, які підходять до дизайну та колірної схеми веб-сторінки.
• Ви також можете створювати динамічні форми
• Якщо вам потрібна довга форма з конструктором форм Elementor, ви можете створити її та розбити на кілька кроків, щоб користувачі легко заповнювали її.

• Віджет "Карусель"

• Ви можете використовувати попередньо розроблені шаблони, які постачаються з Pro версією Elementor, і створити приголомшливу карусель відгуків для вашого бізнесу, щоб отримати більше конверсій.
• Вирівняйте вміст і макет каруселі. Повністю контролюйте вигляд і розташування каруселі.
• Шаблони налаштування, надані в Elementor Pro, прості у використанні та забезпечують зручність як для того, хто його створює, так і для того, хто його бачить.

Як використовувати віджет «Карусель відгуків» у Elementor Pro

• Знайдіть слайдер відгуків на панелі пошуку. Відкрийте віджет і відразу створіть повзунок. На вибір є два скіни: стандартний і бульбашка. Вибирайте потрібний відповідно до укладання.
• Вирівняйте та завершіть макет своїх відгуків, що можна зробити за допомогою 5 варіантів: зображення в рядку, зображення в стосі, зображення вгорі, зображення ліворуч і зображення праворуч.
• Виберіть стиль і дизайн відповідно до вашої колірної схеми та додайте вміст до слайдера.
• Ви можете автоматично відтворювати слайди на повзунку, призупиняти його, коли користувачі натискають на нього, або встановити певний час у параметрі зміни слайда. Я віддаю перевагу використанню паузи в опції взаємодії для повзунків своїх відгуків.
• Посилання на дії

Ви можете підключити свій веб-сайт до WhatsApp, календаря Google і багатьох інших програм за допомогою Elementor Pro.

Як використовувати посилання на дії в Elementor Pro

• Перейти до Elementor інформаційну панель і пошук полів посилань, що є одним із Pro-віджетів Elementor.
• Виберіть динамічний параметр, доступний у верхньому правому куті спливаючого вікна віджета.
• Виберіть URL-адресу контакту під опцією дії.
• Додайте всі деталі, які запитує віджет, і ви готові інтегрувати свою контактну платформу зі своїм веб-сайтом.

Функція Theme Builder

• Динамічний вміст
• Використовуйте бездоганну інтеграцію, щоб створити чудову динамічну веб-сторінку.
• Ви можете додати до своєї веб-сторінки динамічні кольори, зображення, навіть логотипи веб-сайтів і багато іншого.
• Найкраще те, що ви можете зберегти макет створеного вами динамічного вмісту та використовувати його будь-де на веб-сайті.

Як використовувати динамічний вміст із Elementor Pro

Я покажу приклад використання текстового редактора та створення динамічного вмісту. Переконайтеся, що ви бачите всі інші віджети та спробуйте їх.

1. Відкрийте текстовий редактор і введіть потрібний текст на веб-сторінці. Тепер натисніть значок у верхньому правому куті редактора, як показано на зображенні нижче.
2. Коли ви клацнете піктограму, ви побачите список параметрів, які з’являться у розкривному меню. Вони поділяються на повідомлення, архіви та сайти. Виберіть потрібний варіант і негайно приступайте до роботи.
3. Тепер для подальшого редагування заголовка вашої сторінки вам слід натиснути піктограму, яка є гайковим ключем, як показано на зображенні нижче.

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

Інші функції конструктора тем у Elementor Pro

• Умови відображення: ви можете вирішити, що показувати та де показувати
• Верхній і нижній колонтитули: простим перетягуванням ви можете налаштувати верхній і нижній колонтитул веб-сторінки
• Закріплений заголовок: додайте закріплений заголовок до окремих сторінок або для всього веб-сайту в усьому світі.
• Сторінка 404: Створіть спеціальну сторінку 404 і перенаправте користувачів і аудиторію на потрібну сторінку.

Зміст теми

• Віджет панелі меню навігації

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

Як використовувати віджет панелі меню навігації

1. Перейдіть до інформаційної панелі та знайдіть рядок меню
2. Ви можете встановити горизонтальне, вертикальне або спадне меню відповідно до стилю, який добре виглядає на вашому веб-сайті.
3. Ви також можете додати одну або подвійну лінію під кожним вмістом меню, щоб виділити та навіть змінити колір тексту на інформаційній панелі.

• Віджет пошуку

Віджет пошуку має три оболонки: типовий, мінімальний і повноекранний віджет пошуку.

Ви можете налаштувати дизайн панелі пошуку, а також кнопку відповідно до стилю веб-сторінки.

Як користуватися панеллю пошуку з Elementor Pro

Перейдіть на інформаційну панель Elementor і знайдіть віджет панелі пошуку, виберіть потрібний стиль, за замовчуванням, повноекранний або мінімальний, і змініть типографіку та кольори панелі пошуку відповідно до вашої колірної теми.

• Інші функції вмісту теми, які ви отримуєте з Elementor Pro

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

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

Ціни Elementor Pro

Відгуки користувачів 

Швидкі посилання:

• Підручник Elementor Pro
• НАЙКРАЩІ ДОДАВКИ ELEMENTOR
• Якір меню Elementor
• Дуда проти Елемента

Поширені запитання про підручник WordPress Elementor

Також прочитайте:

• Beaver Builder проти Divi
• Бобр-будівельник проти Елементара

Висновок: Підручник WordPress Elementor 2024

Одне з провідних програм для розробки веб-сторінок, Elementor , це надійна та яскрава платформа для створення вашого сайту. Від створення основної сторінки блогу до створення стильної та захоплюючої цільової сторінки продукту – усе можна зробити за допомогою Elementor.

Професійна версія Elementor має безліч функцій, з якими можна працювати та вивести ваш веб-сайт на новий рівень. Це також дає вам повний контроль над своїм веб-сайтом.

Вам не потрібно бути програмістом, щоб використовувати Elementor. Користуватися Elementor так само просто, як навчитися натискати та перетягувати функції.

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

Отже, спробуйте Elementor і розкажіть мені про свій досвід, залишивши коментарі нижче! 

Elementor Популярні відео

Elementor у соціальних мережах

Page Builder Summit 2021 (@summit_camp) починається завтра! Отримайте БЕЗКОШТОВНИЙ квиток і поспілкуйтеся з більш ніж 35 експертами галузі, зокрема @bpines1 . Раді бути спонсором цієї великої події. Побачимось там! 💻🎉https://t.co/gDtFpUJLBH

— Elementor (@elemntor) Травень 9, 2021

Відійдіть убік і вітайте нашу презентацію у квітні 2021 року. 🏆🌷 Цього місяця ми аплодуємо 10 дизайнерським агентствам з усього світу. Ця різноманітна колекція відповідає талантам Elementor для створення веб-сайтів у всьому світі. 🌎 https://t.co/bwwOUDQCuu

— Elementor (@elemntor) Травень 19, 2021