15%

Спести 15% на всички хостинг услуги

Тествай уменията си и получи Отстъпка за всеки хостинг план

Използвайте код:

Skills
За начало
10.10.2024

Как да инсталирате Elementor WordPress Page Builder: Пълно техническо ръководство

Elementor е визуален плъгин за изграждане на страници с функция drag-and-drop за WordPress, който замества стандартния блоков редактор с интерфейс за дизайн в реално време от предната страна. Той визуализира промените в оформлението незабавно, без да изисква презареждане на страницата, което го прави един от най-широко използваните WordPress плъгини с над 10 милиона активни инсталации в производствени сайтове.

Това ръководство обхваща целия процес на инсталиране на Elementor Free и Elementor Pro, включително предварителните изисквания от страна на сървъра, честите точки на неуспех и стъпките за конфигуриране след инсталацията, които повечето уроци напълно пропускат.

Предварителни изисквания за сървъра и WordPress

Преди да инсталирате Elementor, проверете дали вашата хостинг среда отговаря на минималните технически изисквания. Elementor е по-ресурсоемък от стандартен WordPress плъгин поради своя механизъм за компилиране на активи и динамично генериране на CSS.

Минимални изисквания:

  • PHP 7.4 или по-висока версия (PHP 8.0+ е силно препоръчителна за производителност)
  • MySQL 5.7+ или MariaDB 10.3+
  • WordPress 6.0 или по-висока версия
  • Поне 128 MB ограничение на паметта за PHP (memory_limit в php.ini), въпреки че 256 MB или повече е практическият производствен стандарт
  • WP_DEBUG трябва да бъде деактивиран на работещи сайтове, за да се предотврати намесата на изхода за отстраняване на грешки на Elementor в рендирането
    Валиден SSL сертификат, активен на домейна — редакторът на Elementor се зарежда през HTTPS и ще се провали или ще показва предупреждения за смесено съдържание при обикновен HTTP
    
    Ако използвате среда с VPS Хостинг, имате директен достъп до php.ini или конфигурацията на PHP-FPM пула, което ви позволява да настроите прецизно memory_limit, upload_max_filesize и max_execution_time. Споделените среди често ограничават тези стойности до настройки по подразбиране, което може да доведе до изтичане на времето за изчакване на редактора на Elementor или до неуспех при запазване.
    За да проверите текущото ограничение на паметта за PHP от административната зона на WordPress, отидете на Инструменти > Здраве на сайта > Информация > Сървър.
    Стъпка 1: Влезте в административното табло на WordPress
    Отидете на страницата за вход в администраторската зона на вашия сайт. Пътят по подразбиране е /wp-admin, добавен към вашия домейн:
    https://yourdomain.com/wp-admin
    Въведете вашите администраторски данни и кликнете върху Вход. Трябва да сте влезли като потребител с роля administrator — ролите Редактор или Автор нямат привилегии за инсталиране на плъгини.
    Стъпка 2: Отидете до инсталатора на плъгини
    От лявото административно меню отидете на Плъгини > Добавяне на нов плъгин. Това отваря браузъра на директорията с плъгини за WordPress, който в реално време прави заявки към API на хранилището за плъгини на WordPress.org.
    Ако вашият сървър се намира зад ограничителна защитна стена или има блокиран outbound_connections на мрежово ниво, тази страница може да се зареди без резултати. В такъв случай ще трябва да инсталирате плъгина ръчно чрез SFTP или да използвате WP-CLI (описано по-долу).
    Стъпка 3: Потърсете и намерете Elementor
    В полето за търсене на страницата Добавяне на плъгини въведете Elementor. Плъгинът, който търсите, е Elementor Website Builder от Elementor.com. Потвърдете следното преди инсталирането:
    
    Автор: Elementor.com
    Активни инсталации: над 10 милиона
    Последна актуализация: в рамките на последните 60 дни (остаряла дата на актуализация е тревожен знак за всеки плъгин)
    Тестван до: трябва да съответства или да е близо до текущата ви версия на WordPress
    
    Не бъркайте безплатния плъгин с пакети за добавки на Elementor от трети страни, които се появяват в същите резултати от търсенето. Това са отделни плъгини, които разширяват Elementor, но не са самият основен конструктор.
    Стъпка 4: Инсталирайте и активирайте Elementor
    Кликнете върху Инсталирай сега до записа на Elementor Website Builder. WordPress ще изтегли архива на плъгина от CDN на WordPress.org и ще го разархивира в директорията wp-content/plugins/.
    След като изтеглянето приключи, надписът на бутона се променя на Активирай. Кликнете върху него. WordPress регистрира плъгина, зарежда неговия начален файл и ви пренасочва към екрана за въвеждане в употреба на Elementor.
    Какво се случва зад кулисите по време на активирането:
    
    Elementor създава собствени таблици в базата данни (elementor_library, записи с персонализирани мета данни за публикации)
    Регистрира персонализиран тип публикация за библиотеката с шаблони
    Генерира директория за CSS кеш на wp-content/uploads/elementor/css/
  • Условно добавя активите на редактора в опашката (само когато редакторът на Elementor е активен, а не при всяко зареждане на страница)

Ако активирането се провали с фатална грешка, най-честите причини са версия на PHP под 7.4, ограничение на паметта, твърде ниско за зареждане на автозареждача на плъгина, или конфликтен плъгин, който се закача към plugins_loaded неправилно.

Стъпка 5: Инсталиране чрез WP-CLI (препоръчително за администратори на сървъри)

Ако управлявате WordPress от командния ред — което е предпочитаният работен процес на всеки VPS с cPanel или сървър без допълнителен софтуер — използвайте WP-CLI за инсталиране и активиране на Elementor, без да отваряте браузъра:

wp plugin install elementor --activate --allow-root

За да проверите дали инсталацията е успешна:

wp plugin status elementor

За да актуализирате Elementor по-късно, без да влизате в административното табло:

wp plugin update elementor

WP-CLI е значително по-бърз от GUI инсталатора и е скриптируем, което го прави идеален за автоматизирано осигуряване на сървъри, клониране на тестови среди или CI/CD конвейери, които разгръщат конфигурации на WordPress.

Стъпка 6: Завършете съветника за настройка на Elementor

След активирането Elementor стартира съветник за настройка. Ключовите решения тук имат трайни технически последици:

Име и лого на сайта: Те се включват в глобалните настройки на сайта на Elementor и се използват от Theme Builder, ако го използвате по-късно.

Цветове и шрифтове по подразбиране: Elementor поддържа собствена глобална система за дизайн, независима от таблицата със стилове на активната тема на WordPress. Ако дефинирате глобални цветове тук, те се съхраняват в базата данни на Elementor и се прилагат чрез динамично генериран вграден CSS — а не чрез style.css на вашата тема. Това е важно да се разбере при отстраняване на конфликти в специфичността на CSS.

Избор на шаблонен комплект: Шаблонните комплекти са предварително изградени набори от страници, които едновременно импортират множество страници, глобални настройки и понякога зависимости от плъгини на трети страни. Ако изберете такъв, Elementor ще импортира значително количество съдържание в базата ви данни. На нов сайт това е нормално; на съществуващ сайт със съдържание внимателно преценете дали импортираните шаблони ще влязат в конфликт с вече съществуващите структури на страниците.

Можете да пропуснете съветника изцяло и да конфигурирате всичко ръчно чрез Elementor > Настройки в административното меню.

Стъпка 7: Създайте първата си страница с Elementor

За да изградите нова страница с редактора на Elementor:

  1. Отидете на Страници > Добавяне на нова страница в административната зона на WordPress.
  2. Въведете заглавие на страницата.
  3. В десния панел под Атрибути на страницата задайте шаблона на Elementor Full Width или Elementor Canvas (Canvas премахва изцяло хедъра и футъра, полезно за целеви страници).
  4. Кликнете върху Редактирай с Elementor.

Редакторът на Elementor се зарежда в iframe на цял екран. Левият панел съдържа библиотеката с уиджети и настройките; десният панел е живото платно.

Ключови структурни концепции в редактора на Elementor:

  • Секции (или контейнери в режим Flexbox): Обвивките за оформление от най-високо ниво. Всяка секция обхваща пълната ширина на страницата.
  • Колони: Подразделения в рамките на секция, които контролират хоризонталното оформление.
  • Уиджети: Отделни елементи на съдържанието (текст, изображение, бутон, видео, формуляр и др.), поставени в колони.
  • Flexbox контейнер: По-новият модел на оформление на Elementor (заместващ модела Секция/Колона), който използва CSS Flexbox нативно, давайки ви по-прецизен контрол върху подравняването и адаптивното поведение.

За да запазите работата си, кликнете върху бутона Публикувай или Актуализирай в долната част на левия панел. Elementor запазва данните на страницата като сериализиран JSON в таблицата post_meta под ключа _elementor_data.

Инсталиране на Elementor Pro (премиум версия)

Elementor Pro е отделно лицензиран плъгин, който се инсталира заедно с безплатната версия — той не я замества. Безплатният плъгин трябва да остане инсталиран и активен, за да функционира Elementor Pro.

Какво добавя Elementor Pro

ФункцияElementor FreeElementor Pro
Брой уиджети~40 основни уиджета100+ разширени уиджета
Theme BuilderНеДа (шаблони за хедър, футър, архив, единична публикация)
Конструктор на формуляриНеДа (с интеграции: Mailchimp, HubSpot и др.)
WooCommerce конструкторНеДа (шаблони за продуктови страници, количка, каса)
Глобални уиджетиНеДа
Динамично съдържаниеНеДа (извличане на данни от ACF, персонализирани полета, мета данни на публикации)
Конструктор на изскачащи прозорциНеДа
Мениджър на ролиНеДа
Персонализиран CSS за всеки елементНеДа

Как да инсталирате Elementor Pro

  1. Закупете лиценз от официалния уебсайт на Elementor и изтеглете файла elementor-pro.zip от таблото на вашия акаунт.
  2. В административната зона на WordPress отидете на Плъгини > Добавяне на нов плъгин.
  3. Кликнете върху Качване на плъгин в горната част на страницата.
  4. Кликнете върху Избор на файл, изберете файла elementor-pro.zip и кликнете върху Инсталирай сега.
  5. След като инсталацията приключи, кликнете върху Активирай плъгина.
  6. Отидете на Elementor > Лиценз в административното меню и въведете вашия лицензен ключ, за да активирате Pro функциите и да разрешите автоматичните актуализации.

Инсталиране на Elementor Pro чрез WP-CLI

Ако вече имате файла .zip на вашия сървър (прехвърлен чрез SFTP), инсталирайте го директно:

wp plugin install /path/to/elementor-pro.zip --activate --allow-root

Заменете /path/to/elementor-pro.zip с действителния път на файла на вашия сървър.

Активиране на лиценза чрез WP-CLI

WP-CLI не обработва нативно API извикването за активиране на лиценза на Elementor, затова все още трябва да въведете лицензния ключ чрез административния интерфейс на WordPress на Elementor > Лиценз или да използвате собствените CLI команди на Elementor, ако са налични във вашата Pro версия.

Elementor Free срещу Pro: Пълно сравнение

КритерийElementor FreeElementor Pro
ЦенаБезплатенПлатен (годишен лиценз)
Източник на инсталацияХранилище на WordPress.orgДиректно изтегляне от акаунта в Elementor
Автоматични актуализацииЧрез актуализатора на WordPressИзисква активен лицензен ключ
Theme BuilderНе е включенПълен контрол върху йерархията на шаблоните на темата
Динамично свързване на данниНе е включеноACF, персонализирани полета, мета данни на публикации, данни за автора
Интеграция с WooCommerceСамо основно показванеПълна персонализация на шаблоните на магазина
ПоддръжкаФоруми на общносттаПриоритетна поддръжка чрез тикети
Подходящ заБлогове, прости бизнес сайтовеСложни сайтове, агенции, електронна търговия

Съображения за производителността и чести грешки

Elementor генерира CSS файлове за всяка страница, съхранявани в wp-content/uploads/elementor/css/. При сайтове с голям трафик тази директория може да натрупа стотици файлове. Периодичното регенериране на CSS кеша чрез Elementor > Инструменти > Регенериране на CSS и данни поддържа тези файлове чисти и предотвратява обслужването на остарели стилове.

Критични грешки, които трябва да избягвате:

  • Активирането на Improved Asset Loading в настройките за производителност на Elementor намалява броя на скриптовете и таблиците със стилове, заредени на страници, които не използват уиджети на Elementor. По подразбиране е деактивирано, но трябва да бъде активирано на повечето производствени сайтове.
  • Вграденото зареждане на шрифтове на Elementor може да влезе в конфликт с добавянето на Google Fonts от вашата тема. Деактивирайте дублираното зареждане на шрифтове в Elementor > Настройки > Разширени > Google Fonts.
  • Честота на автоматично запазване: По подразбиране Elementor автоматично запазва чернови на всеки 30 секунди. На бавни сървъри с бази данни или споделен хостинг с висока латентност на I/O, това може да причини забавяне на редактора. Ако използвате среда с Dedicated Servers, това рядко е проблем, но при споделен хостинг може да се прояви като неотзивчивост на редактора.
  • Конфликти с плъгини: Elementor е несъвместим с определени плъгини за кеширане, които агресивно минифицират или комбинират JavaScript. Ако редакторът не успее да се зареди, временно деактивирайте вашия плъгин за кеширане и тествайте отново.
  • Кеширане на ниво обратен прокси и CDN: Ако вашият сайт се намира зад Cloudflare или подобен прокси с агресивно HTML кеширане, редакторът на Elementor може да зареди кеширана версия на страница вместо живата редактируема версия. Уверете се, че пътят /wp-admin/ и URL адресите на редактора на Elementor са изключени от правилата за кеширане на ниво edge.

Препоръки за хостинг среда

Редакторът на Elementor е едностранично приложение с интензивно използване на JavaScript. Неговата производителност е пряко свързана с времето за отговор на сървъра, скоростта на изпълнение на PHP и ефективността на заявките към базата данни.

За производствени WordPress сайтове, работещи с Elementor Pro с WooCommerce или големи библиотеки с шаблони, среда с VPS Хостинг с поне 2 vCPU и 4 GB RAM осигурява необходимото пространство за плавна производителност на редактора и бързо рендиране от предната страна. Възможността за конфигуриране на OPcache, Redis обектно кеширане и пулове от работни процеси на PHP-FPM на VPS прави измеримо различие в сравнение със споделените среди.

Ако изграждате клиентски сайтове в мащаб или управлявате мрежа от WordPress Multisite с Elementor, разгледайте VPS контролни панели, които ви позволяват да осигурявате и управлявате множество изолирани среди от един интерфейс.

За сайтове, изискващи HTTPS (което редакторът на Elementor изисква), уверете се, че имате валиден SSL сертификат, инсталиран и правилно конфигуриран, преди да се опитате да отворите редактора на Elementor. Самоподписан сертификат или изтекъл сертификат ще доведе до блокиране на iframe на редактора от политиката за смесено съдържание на браузъра.

Контролен списък с ключови технически изводи

Преди да пуснете в работа сайт, захранван от Elementor, проверете всяко от следните:

  • Версията на PHP е минимум 7.4, предпочитана е 8.0+; memory_limit е зададен на 256 MB или повече
  • SSL сертификатът е валиден и HTTPS е наложен в целия сайт
  • Експериментът Improved Asset Loading на Elementor е активиран в Elementor > Настройки > Експерименти
  • CSS кешът е регенериран след финализиране на всички промени в дизайна
  • Плъгинът за кеширане е конфигуриран с изключени URL адреси на редактора на Elementor от правилата за кеш
  • Лицензният ключ на Elementor Pro е активиран и автоматичните актуализации са потвърдени като работещи
  • Директорията wp-content/uploads/elementor/ е записваема от процеса на уеб сървъра
  • WP-CLI е наличен на сървъра за бъдещи актуализации на плъгини и задачи по поддръжка
  • Google Fonts не се зарежда два пъти (веднъж от темата, веднъж от Elementor)
  • Редовните резервни копия на базата данни включват таблицата post_meta, където се съхраняват всички данни на страниците на Elementor

Често задавани въпроси

Работи ли Elementor с всяка тема за WordPress?

Elementor е съвместим с повечето добре написани теми за WordPress. Въпреки това, за пълна функционалност на Theme Builder (персонализирани хедъри, футъри и шаблони за архиви), активната тема трябва да поддържа куките body_class(), wp_head() и wp_footer(). Безплатната тема „Hello Elementor” от Elementor.com е специално създадена да бъде базова тема без намеса.

Защо редакторът на Elementor не успява да се зареди след инсталацията?

Най-честите причини са: ограничение на паметта за PHP под 128 MB, конфликт на JavaScript с друг плъгин (тествайте, като временно деактивирате всички останали плъгини), изтекъл или невалиден SSL сертификат, причиняващ блокиране на iframe на редактора, или защитна стена на ниво сървър, блокираща REST API крайните точки, които Elementor използва за комуникация между редактора и бекенда.

Може ли Elementor да бъде инсталиран на WordPress Multisite?

Да. Elementor може да бъде активиран в мрежата на инсталация на WordPress Multisite. Всеки подсайт поддържа собствени настройки на Elementor, библиотека с шаблони и CSS кеш. Лицензите на Elementor Pro са за домейн, затова проверете дали вашето ниво на лиценз покрива броя сайтове в мрежата ви.

Каква е разликата между шаблоните Elementor Canvas и Elementor Full Width?

Elementor Canvas премахва всички елементи, генерирани от темата — хедър, футър и странична лента — давайки ви напълно чисто платно. Предназначен е за самостоятелни целеви страници и персонализирани екрани за вход. Elementor Full Width премахва страничната лента, но запазва хедъра и футъра на темата непокътнати, което го прави подходящ за стандартни страници със съдържание, където навигацията в целия сайт трябва да остане видима.

Влияе ли Elementor на скоростта на сайта и Core Web Vitals?

Elementor добавя CSS и JavaScript натоварване в сравнение с ръчно написана страница. Въпреки това, при правилна конфигурация — активиране на експеримента Improved Asset Loading, използване на CDN, активиране на OPcache на сървъра и минимизиране на броя на плъгините за добавки на Elementor от трети страни — сайтовете с Elementor могат да постигнат добри резултати за Core Web Vitals. Най-голямата единична променлива за производителността е хостинг инфраструктурата, а не самият Elementor.

15%

Спести 15% на всички хостинг услуги

Тествай уменията си и получи Отстъпка за всеки хостинг план

Използвайте код:

Skills
За начало