Урок за WordPress Elementor | Ръководство стъпка по стъпка през 2024 г

Искате да започнете с Elementor и търсите a Урок за WordPress Elementor? Вашето търсене приключва тук. В тази статия ще ви запозная с всички неща, които трябва да знаете за Elementor.

Още от инсталирането му до създаването на изключително стилна страница, всичките ви съмнения ще бъдат разрешени, ако прочетете статията. Уверявам те; четенето няма да отиде напразно!

Но имате нужда от плъгин за създаване на уебсайтове, за да придадете професионален щрих на вашия уебсайт.

Как го получаваш? Е, аз използвам Elementor за това. Elementor ме прави изключително лесно да направя професионален уебсайт чрез проста функция за плъзгане и пускане. 

Любопитно е да научите повече за Elementor, след това разгледайте моите подробности Преглед на Elementor.

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

Е, има 2 начина, по които можете да инсталирате Elementor на WordPress. 

• Чрез официалния уебсайт на Elementor

Отидете на официалния уебсайт на Elementor и щракнете върху бутона за безплатно изтегляне, показан на уебсайта. 

Веднага след като щракнете върху бутона за безплатно изтегляне, ще се появи изскачащ прозорец за абониране за уебсайта на Elementor и след като направите същото, приставката автоматично ще започне да се изтегля.

Ще намерите zip файл, изтеглен на вашия лаптоп/компютър. Сега се насочете към таблото за управление на WordPress и щракнете върху секцията Plugins > Add New Plugin > Upload Plugin

Изберете файла 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; можете да проектирате страницата в режим на чернова, да изпробвате всичко и да вземете страницата по-късно, след като сте напълно готови да я публикувате.

Как да използвате функцията Drag and Drop на Elementor

Всички функции за плъзгане и пускане са достъпни от лявата страна на страницата веднага щом създадете страница.

След като създадете страница в WordPress и й дадете заглавие, просто щракнете върху редактиране с Elementor, което ще ви отведе до живия редактор на Elementor, който изглежда като изображението по-долу.

Във второто изображение по-горе можете да разгледате опциите за плъзгане и пускане от лявата страна на страницата. Има много джаджи, които просто трябва да превъртите надолу, или можете също да търсите джаджа с помощта на лентата за търсене отгоре.

• Готови дизайни

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

Как да изберете желания шаблон за библиотеката с шаблони на Elementor

Когато за първи път отворите страницата на Elementor builder, ще видите нещо от вида, показан по-долу:

Изображението е взето от уебсайта на Elementor и е доста разбираемо.

Веднага щом щракнете върху опцията Папка, ще видите изскачащ прозорец, показан по-долу.

• Widgets

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

• Вътрешна секция: Нека разделим една секция на две.
• Заглавие: Пуснете това поле в уеб страницата си, за да включите привлекателно заглавие
• Изображение: Поставете изображения на вашата уеб страница с помощта на тази джаджа
• Текстов редактор: Въведете текст във вашата уеб страница с помощта на изпълним модул за текстов редактор
• Видео: Можете да използвате приспособление за видео, за да поставите качествени видеоклипове на вашата страница. Това ще увеличи потребителското изживяване
• Бутон: Призивът към действие е много важен за почти целия сайт, с бутоните можете да поставите призива към действие на вашата страница и да го свържете към целевата страница на вашия продукт.
• Оценка със звезди: Оценката със звезди е полезна за всеки уебсайт за електронна търговия, за да даде оценка на няколко различни продукта, които предлага.
• Разделител: Помага на вашата уеб страница във вдлъбнатината и генерира бяло пространство, за да увеличи потребителското изживяване.
• Икони: С приспособлението за икони можете да поставите закачливи икони на социални медии, както и различни услуги, за да направите страницата си да изглежда по-привлекателна.
• Брояч: Създайте таймер за обратно отброяване за вашите продукти или ограничени допълнителни услуги, за да създадете спешност.
• Препоръки: Добавете препоръки за вашите продукти и услуги, за да изградите доверие сред посетителите на уебсайта си.

Освен това има много други джаджи, като въртележка с изображения, основна галерия, раздели, кратки кодове, HTML, лента с менюта и т.н. Уверете се, че разглеждате всички функции, след като инсталирате приставката в WordPress.

Разгледайте някои от джаджите, които Elementor има по-долу на изображението.

Как да използвате Elementor Widgets

За използване на Elementor Widgets:

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

• Адаптивен дизайн и редактиране

С навлизането в светлината на прожекторите на правилото за индексиране на първо място за мобилни устройства, Google гарантира, че удобният за мобилни устройства сайт се класира само по-високо в Google и същият е случаят с други SERP. 

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

Можете да им предоставите различни изживявания на двете устройства, въпреки че тази практика не се препоръчва, тъй като понякога може да създаде объркване в съзнанието на вашите потребители относно марката.

Как да видите мобилната реакция на вашите уеб страници

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

Функции на работния процес:

• Няма изискване за кодиране

Не е необходимо да сте експерт или дори да знаете малко за кодирането, когато използвате Elementor. Всички уиджети, споменати по-горе, са плъзгане и пускане и можете лесно да създадете висококачествена и стилна уеб страница с тях. 

Самият Elementor се грижи за кодиращата част. Не само това, използваният код е оптимизиран и съкратен, така че да намалява времето за зареждане на вашата уеб страница – много важен фактор за класиране на върха.

• Лента за навигация

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

Как да използвате лентата за навигация

За да използвате Навигатора, просто щракнете с десния бутон върху задната част на вашата уеб страница, отворена с Elementor, и щракнете върху Навигатор. Ще се появи изскачащ прозорец, както е показано на изображението по-долу.

• Hotkeys

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

• Функция за вградено редактиране

С Elementor не е необходимо да пишете съдържанието си другаде и да копирате-поставяте и редактирате стила му. Можете да пишете директно в таблото за управление на WordPress с желания стил и да спестите ценното си време.

Характеристики на дизайна

• Глобални шрифтове

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

• Глобални цветове

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

• Фонови градиенти

С функцията за градиентен цвят можете да осветите фона, който сте задали за всеки блок и дори за началната си страница. Тези градиентни цветове се прилагат за всяка страница, която имате на уебсайта си.

• Фонови видеоклипове

Можете да използвате видеоклипове като фон с Elementor. Видеоклиповете на заден план наистина могат да озарят вашата уеб страница.

Как да използвате дизайнерски функции в Elementor

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

• Други характеристики
• Прилагане на фоново наслагване
• Поставете слайдшоу във фонов режим
• Създайте платно, за да направите страницата си да изглежда жива
• Използвайте режимите на смесване
• CSS филтри за стилизиране
• Разделители на формата
• Кутия сянка
• Икони
• Експортирайте SVG икони от други уебсайтове

Функции на оформлението

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

Можете също така да регулирате полетата и подложките, което е много важна функция на уеб страницата. 

Функции на плана Elementor Pro

Essentials

Освен безплатната функция, Elementor Pro предлага още 2 функции.

1. Конструктор на изскачащи прозорци

Можете да създадете изскачащи прозорци за регистрация, за оферта с ограничен период от време, както и изскачащи прозорци за намерение за изход, за да увеличите продажбите си и да направите страницата си по-привлекателна.

Функцията, подобно на други джаджи, присъства в таблото за управление на Elementor.

С конструктора на изскачащи прозорци можете да създавате следните изскачащи прозорци:

• Email абонамент
• Изскачащи прозорци на формата за вход
• Изскачащи банери за промоция и продажби
• Улов на олово
• Изскачащи прозорци за заключване и разкриване на съдържание
• Съобщения
• Изход намерение
• Изскачащи прозорци тип „Добре дошли
• Свързан продукт и допълнителни продажби

2. Създател на теми

С Elementor Pro имате пълен контрол върху всички функции, които използвате на уебсайта си. Можете да проектирате 404 страници и да насочвате потребителите си към страницата по ваш избор. 

Можете да управлявате горния и долния колонтитул на същата страница, на която проектирате. С мощната интеграция на WooCommerce можете да оптимизирате и продуктовите си страници.

Характеристики на дизайна

1. Персонализиран CSS

С всяка джаджа, която добавите, можете да добавите персонализиран CSS фрагмент, за да направите съдържанието по-персонализирано и привлекателно. Но за да използвате тази функция, трябва да имате прилични познания по CSS. 

Използването му без никакви предварителни познания също може да отиде на юг. Така че, ако не притежавате набор от умения, по-добре стойте далеч от персонализираната CSS функция.

2. Ефекти на движение

Можете да добавите страхотни анимации и да придадете на уебсайта си анимационен тип. Това помага за привличането на конкретна целева аудитория и понякога може да бъде много полезно. 

Как да използвате функцията за дизайн в Elementor

Е, това не е ракетна наука. Подобно на други уиджети, можете да превъртите панела на таблото за управление и да ги търсите или просто да въведете името на уиджета в панела за търсене.

маркетинг

Тези функции липсват в безплатната версия на Elementor.

• Приспособление за формуляри

С конструктора на формуляри Elementor можете да правите различни промени и да направите формулярите си интересни и привлекателни за попълване.

• Изберете оформлението, което желаете, и разстоянието доста лесно.
• 10+ полета за избор, които искате във вашия формуляр.
• Изберете от множество цветове и типография, които подхождат и отговарят на дизайна и цветовата схема на уеб страницата.
• Можете също така да създавате динамични форми
• Ако имате нужда от дълга форма със създател на формуляри на Elementor, можете да я изградите и разделите на няколко стъпки, така че потребителите да я попълнят по лесен начин.

• Приспособление за въртележка за препоръки

• Можете да използвате предварително разработените шаблони, които идват с Pro версията на Elementor, и да направите зашеметяваща въртележка с препоръки за вашия бизнес, за да спечелите повече реализации.
• Подравнете съдържанието и оформлението на въртележката. Имайте пълен контрол върху външния вид и подравняването на въртележката.
• Шаблоните за персонализиране, предоставени в Elementor Pro, са лесни за използване и дават удобно изживяване както на този, който го изгражда, така и на този, който го вижда.

Как да използвате джаджа Carousel за препоръки в Elementor Pro

• Потърсете плъзгача за препоръки в лентата за търсене на таблото. Отворете приспособлението и можете да започнете, като създадете плъзгача веднага. Има два скина за избор от стандартния и балончето. Изберете този, от който се нуждаете според стайлинга.
• Подравнете и финализирайте оформлението на вашите препоръки, което може да се направи чрез 5 опции Изображение в ред, изображение подредено, изображението отгоре, изображение отляво и изображение отдясно.
• Изберете стила и дизайна според вашата цветова схема и добавете съдържание към плъзгача.
• Можете да пуснете автоматично слайдовете на плъзгача, да го поставите на пауза, когато потребителите щракнат върху него, или да зададете определено време в опцията за смяна на слайда. Предпочитам да използвам паузата на опцията за взаимодействие за моите плъзгачи за препоръки.
• Връзки за действие

Можете да свържете уебсайта си с WhatsApp, google календар и много други приложения с Elementor Pro.

Как да използвате връзки за действие в Elementor Pro

• Отидете в Elementor табло за управление и търсене на полета за връзка, което е една от Pro джаджите, които Elementor има.
• Изберете динамичната опция, която е налична в горния десен ъгъл на изскачащия прозорец.
• Изберете URL адреса за контакт под опцията за действие.
• Добавете всички подробности, които джаджата изисква, и сте готови да интегрирате платформата си за контакт с уебсайта си.

Функция за създаване на теми

• Динамично съдържание
• Възползвайте се от безупречната интеграция, за да направите страхотна динамична уеб страница.
• Можете да добавите динамичен цвят, изображения, дори лога на уебсайтове и много повече към вашата уеб страница.
• Най-хубавото е, че можете да запазите оформлението на създаденото от вас динамично съдържание и да го използвате навсякъде в уебсайта.

Как да използвате динамично съдържание с 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
• Beaver Builder срещу Elementor

Заключение: Урок за WordPress Elementor 2024

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

Pro версията на 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