Як перетворити WordPress у візуальний будівельник

Jan 28, 2026

Як

(Зображення кредиту: Elementor / Joseph Ford)

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

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

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

Ми зробимо веб-сторінку мобільного зв'язку та використовуючи два плагіни, ми розглянемо основну турботу з використанням візуального будівельника та мінімізувати вже мінімальний час завантаження сторінки. Крім того, див. Наш круглий Підручники WordPress ще далі відточити свої навички.

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

Найкращі служби хостингу WordPress у 2019 році

01. Встановіть копію WordPress

Щоб вимкнути речі, встановіть копію WordPress на систему, яку ви використовуєте. Ми використовуємо програму "Ларагон", який пропонує швидкий варіант встановлення, щоб створити екземпляр на моїй машині.

02. Зніміть деталі, які вам не потрібно

Give yourself a clutter-free page to work with — Дайте собі безладну сторінку для роботи з (Зображення кредиту: Elementor / Joseph Ford)

Перейдіть до плагінів, і видаліть все, що постачається в комплекті з WordPress. На момент написання він буде оптимізувати наші зусилля, щоб встановити плагін "Класичний редактор", щоб вимкнути нове Гентенбурзький редактор . Щоб зменшити безлад, ми також повинні йти на зовнішній вигляд & GT; Віджети та видалення всіх віджетів.

03. Виберіть тему з заголовком і нижньою кількістю

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

04. Встановіть елементатор і створіть сторінку

You'll find Elementor in the WordPress plugins library — Ви знайдете елементатор у бібліотеці плагінів WordPress (Зображення кредиту: Elementor / Joseph Ford)

Використовуйте пошук плагіна WordPress, щоб знайти Елементатор і встановіть його. Після встановлення та активування створіть нову сторінку. Назвіть нову сторінку "додому" і збережіть його як проект, щоб він існує в базі даних. Натисніть "Редагувати в ElemenOR". Це завантажить візуальний будівельник елементатора.

05. Повна ширина сторінки

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

06. Додайте певний вміст

Give yourself some content to work with — Дати собі певний вміст, щоб працювати (Зображення кредиту: Elementor / Joseph Ford)

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

07. Видалити лінії заголовка

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

 H1: раніше, H2: до {
Дисплей: Ні;
}

08. Виправити ширину вмісту

Ensure the content lines up with the header — Переконайтеся, що лінії вмісту з заголовком (Зображення кредиту: Elementor / Joseph Ford)

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

Ми також повинні збільшити ширину вмісту на сторінці налаштувань головного елементатора.

 @media тільки екран і (min-ширина: 768px) {
.Lementor-top-section.lementor-section-
boxed & gt; .lementor-контейнер {
маржа: 0 Calc (10% + 60px);
}
}

09. Зробіть розділ відкриття

Drag in the elements you want to include — Перетягніть елементи, які ви хочете включити (Зображення кредиту: Elementor / Joseph Ford)

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

10. Додайте фон

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

Використовуючи вкладку «Макет», дайте наш розділ висотою 80VH. Виберіть Стиль, щоб знайти параметри та використовувати опцію фону, щоб встановити фон # 0073AA.

11. Стиль тексту

You can change the font for your whole document in one go — Ви можете змінити шрифт для весь свій документ за один раз (Зображення кредиту: Elementor / Joseph Ford)

Щоб змінити шрифт для нашого всього документа, ми можемо натиснути кнопку «Шрифти за замовчуванням» у меню гамбургера у верхній частині панелі елементатор. Ви також можете натиснути на окремі текстові елементи та скористайтеся вкладкою "Стиль", щоб змінити колір та інші параметри.

12. Використовуйте ефект накладання фону

Відмінне додавання - це можливість швидко додавати фонові накладки з вкладки Стиль розділу. Виберіть наш розділ і перейдіть на вкладку Фон. Дайте нашому фоні зображення, щоб дати йому текстуру, а потім перейдіть до "фонового накладання", спадне зниження та виберіть накладку градієнта.

13. Створіть заклик до дії

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

Встановіть плагін форми контакту та створіть короткий код для вашої форми. У правильному стовпчику перетягніть віджет короткого коду та вставте короткий камінь у поле.

14. Мобільний дружній

Don't forget to tweak your design for mobile — Не забудьте налаштувати ваш дизайн для мобільних пристроїв (Зображення кредиту: Elementor / Joseph Ford)

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

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

15. Оптимізувати зображення

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

16. Сторінки кешу для підвищення продуктивності

Make your site lightning-fast with help from a cache plugin — Зробіть свій сайт lightning-швидкий за допомогою плагіна кеш-пам'яті (Зображення кредиту: Elementor / Joseph Ford)

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

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

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London — (Зображення кредиту: майбутнє)

Приєднуйтесь до нас 26 вересня Генерувати CSS , бешскана конференція для веб-дизайнерів принесла вам креативним блоком, мережею та веб-дизайнером . Зберегти 50 фунтів стерлінгів з раннього квитка птахів, коли ви бронюєте до 15 серпня 2019 року.

Ця стаття була опублікована в журналі Creative Web-дизайну Веб-дизайнер . Купити проблему 287 або підписатися .

Читати далі:

40 блискучих підручників WordPress
Використовуйте WordPress як безголову CMS
Що нового у WordPress 5.0?

Як перетворити WordPress у візуальний будівельник

01. Встановіть копію WordPress

02. Зніміть деталі, які вам не потрібно

03. Виберіть тему з заголовком і нижньою кількістю

04. Встановіть елементатор і створіть сторінку

05. Повна ширина сторінки

06. Додайте певний вміст

07. Видалити лінії заголовка

08. Виправити ширину вмісту

09. Зробіть розділ відкриття

10. Додайте фон

11. Стиль тексту

12. Використовуйте ефект накладання фону

13. Створіть заклик до дії

14. Мобільний дружній

15. Оптимізувати зображення

16. Сторінки кешу для підвищення продуктивності

Як - Найпопулярніші статті

Як використовувати масштабний ескіз

Побудуйте клієнтський портал з WordPress

Як малювати асуку з неонового генезису Євангеліон

Створіть примарні текстури з методами змішаного медіа

Все, що потрібно знати про новий Node.JS 8

Створіть декоративні плитки в дизайнері речовини

брендингові плюси поділитися, як вони нігті бренду голос

Створіть символ зі стилізованим реалізмом

Категорії