Як створювати та розвивати сторінки на WordPress 5.x

WordPress — це платформа, яка забезпечує живлення більшої частини Інтернету. CMS виросла зі скромного початку в гігант і продовжує розвиватися.

Однак для непосвячених наявність сайту WordPress створює певні труднощі.

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

Це складна робота, якщо ви робите це самостійно, не знаючи коду.

Щоб полегшити вам процес розробки, ми розробили короткий посібник про те, як розробити веб-сайт WordPress.

 

Як розробити сторінки на WordPress

Отже, не зволікаючи, почнемо:

 

Доступ до WordPress

Після встановлення WordPress введіть URL-адресу свого сайту в браузері.

Без сумніву, це виглядає дуже добре з самого початку, але трохи менш особисте. WordPress використовує тему за замовчуванням під час першого встановлення.

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

Щоб отримати доступ до серверної частини вашого веб-сайту, ви можете ввести URL-адресу свого веб-сайту, а потім «/wp-admin».

Наприклад: Yoursite.com/wp-admin

Тепер ви будете перенаправлені на екран адміністратора WordPress.

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

До Зовнішній вигляд> Теми. Там ви побачите список тем, встановлених на вашому веб-сайті.

Тепер, якщо у вас є преміальна або стороння тема, ви можете натиснути «Додати нову», щоб завантажити її zip-файл.

Якщо у вас його немає, ви можете шукати тему на свій вибір.

Для налаштування ви можете використовувати або WordPress Настроювач або Гутенберг редактор блоків.

Однак ви будете обмежені в рівні налаштувань, які ви можете виконувати.

У цій статті ми будемо використовувати Elementor Page Builder плагін для налаштування сторінки.

 

Встановлення Elementor

На інформаційній панелі WordPress перейдіть у розділ «Плагіни» та в полі пошуку введіть Elementor.

Результати пошуку видадуть різноманітні плагіни, пов’язані з Elementor.

Той, який вам потрібно завантажити, знаходиться з Elementor.com. Завантажте, встановіть і активуйте плагін.

Коли ви це зробите, час переходити до наступного розділу.

 

Створення сторінки WordPress за допомогою Elementor

До Сторінки> Додати нове і створіть сторінку під назвою Home.

Через Elementor ви побачите кнопку під редактором, яка читає Редагування за допомогою Факір.

Натисніть на нього, щоб запустити Elementor.

Щоб отримати максимальну віддачу від Elementor, вам слід видалити макет за замовчуванням, щоб почати створювати з нуля.

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

Звідти ви побачите розділ під назвою шаблон.

Клацніть спадне меню та виберіть «Конструктор сторінок на всю ширину».

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

Тепер ви можете налаштувати тему відповідно до власних уподобань, додавши новий розділ.

Проте для зручності ви можете використовувати шаблон із уже існуючих тем.

Якщо у вас є преміальна тема, як Deep тема, ви також можете налаштувати його.

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

Після того, як ви вибрали шаблон, вам просто потрібно натиснути «Вставити» та завантажити шаблон на Elementor.

Ви можете редагувати майже все в шаблоні.

Від зменшення прозорості, кнопок, зміни вмісту, кольорів, шрифту тощо.

За допомогою Elementor ви можете налаштувати будь-що.

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

Крім того, ви також можете створити та налаштувати розділ «Зв’яжіться з нами» та «Про нас» для свого сайту.

Після цього ви можете створити меню навігації та додати посилання на них на своєму сайті. Ось як ви можете це зробити.

 

Створення сторінки «Про нас».

Процес подібний до створення будь-якої сторінки на WordPress.

На інформаційній панелі WordPress перейдіть у «Сторінки» > «Додати нову» та назвіть сторінку «Про нас».

Тепер натисніть кнопку «Редагувати за допомогою Elementor», щоб почати редагування.

На цьому етапі ви побачите досить м’яку сторінку.

Тепер ви можете додати заголовок «Про нас» у верхній частині сторінки або нижче та зображення залежно від ваших вимог.

Зробивши це, вам потрібно вибрати макет, у який ви можете додати вміст «Про нас», який має відношення до вашого веб-сайту.

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

 

Створення сторінки «Контакти».

Сторінки контактів лежать в основі взаємодії з веб-сайтом.

Як ще можна дозволити користувачам зв’язатися з вами? Сторінка «Зв’язатися з нами» має чимало переваг, включаючи ретаргетинг та охоплення.

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

Перш за все, вам потрібно створити нову сторінку, перейшовши в «Сторінки» > «Додати нову» та назвавши її «Контакт» або «Зв’язатися з нами».

Поки що не натискайте кнопку «Редагувати за допомогою Elementor». Для сторінки контактів потрібна контактна форма.

Щоб додати форму на свій веб-сайт, вам потрібно мати такий плагін, як WP-Forms, який дозволяє створювати форми. Після того, як ви завантажили WP-Forms, настав час створити форму.

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

Тепер ви можете пограти з цим, додаючи стилі, карти Google, змінюючи шрифти тощо.

Коли ви все зробите, настав час інтегрувати контактну форму за допомогою віджета «Додати».

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

Тепер, коли ми розробили три основні сторінки, настав час створити меню та впорядкувати його на Elementor.

 

Додавання меню до WordPress

Ця частина відносно проста.

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

Зробивши це, почніть додавати створені вами сторінки до меню.

Коли ви закінчите, збережіть зміни, а потім поверніться до Elementor.

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

 

WooCommerce і Elementor

Якщо у вас є магазин електронної комерції на WordPress, ви також можете налаштувати його за допомогою Elementor.

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

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

 

Висновок

Отже, ви дійшли до кінця цієї статті.

Ми сподіваємося, що цей основний посібник дав вам відправну точку для розробки веб-сайту WordPress без потреби в коді.

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