Искате да знаете как да създавате изскачащи прозорци с Elementor?
Elementor Elementor не е просто конструктор на страници. Това е универсален плъгин за WordPress. Има няколко други неща, които можете да правите с Elementor освен създаването на уеб страници. Едно от тях е създаването на изскачащи прозорци.
В тази статия ще ви покажем как да създадете изскачащ прозорец, използвайки функцията Popup Builder на Elementor.
Създаването на изскачащ прозорец с Elementor е невероятно лесно. Можете да го създадете, използвайки визуалния интерфейс на Elementor, където всичко е с плъзгане и пускане. Elementor предлага и шаблони за изскачащи прозорци, които можете да използвате за създаване на вашите изскачащи прозорци. Просто избирате шаблон, публикувате го и дефинирате спусъка.
Discover Как да инсталирам Elementor на WordPress
Преди да продължим, е важно да отбележим, че Popup Builder на Elementor е достъпен само в професионалната версия.
Как да създадете изскачащ прозорец с Elementor
Когато създавате изскачащ прозорец с Elementor, можете да дефинирате тригер (действие за показване на изскачащия прозорец) и да конфигурирате условието (на кои страници искате да се показва изскачащият прозорец). Освен това можете да дефинирате и разширено правило (разгледано по-долу).
Прочетете още: Как да създадете бутон за многоцветен градиент в Elementor
В това ръководство ще създадем изскачащ прозорец с призив за действие, който се задейства от кликвания върху бутони. Изскачащият прозорец ще се появи, когато потребителят кликне върху бутон.
Ако приемем, че сте инсталирали Elementor Pro, влезте в таблото за управление на WordPress и отидете на Шаблони -> Изскачащи прозорци и щракнете върху бутона Прибавям по-горе.
Дайте име на изскачащия прозорец и кликнете върху бутона СЪЗДАВАЙТЕ МОДЕЛ.
Изберете изскачащ шаблон, който искате да използвате. Задръжте курсора на мишката върху него и щракнете върху бутона вмъкнете за да го вмъкнете в редактора на Elementor.
Ако предпочитате да създадете изскачащия прозорец от нулата, можете просто да затворите библиотеката с шаблони, за да отворите редактора на Elementor.
В редактора на Elementor можете да персонализирате изскачащия прозорец. Можете да замените съдържанието по подразбиране (особено текста) със свое собствено. Използвайте браузъра, за да прескачате лесно между секции и джаджи.
Можете също да добавите анимация за влизане/излизане, да активирате/деактивирате наслагването и да активирате/деактивирате бутона за затваряне.
След като сте готови, кликнете върху бутона ПУБЛИКУВАНЕ.
В следващата стъпка ще бъдете помолени да дефинирате условията за показване и задействанията. Има и опция за дефиниране на разширени правила:
- Условия на показване: Определете на кои страници на вашия уебсайт да се показва изскачащият прозорец. Можете да конфигурирате изскачащия прозорец да се показва на целия уебсайт, на конкретни страници, в конкретни публикации, в конкретни категории и т.н.
- Тригери: Тригерът е действие за показване на изскачащ прозорец. Elementor поддържа 6 вида тригери: При зареждане на страница, При превъртане, При превъртане на елемент, При щракване. След неактивност, при излизане от страницата
- Разширени правила: Изисквания, които трябва да бъдат изпълнени, за да се появи изскачащият прозорец. Например, можете да конфигурирате изскачащия прозорец да се показва, ако посетител пристигне на вашия уебсайт чрез търсачка или конкретен URL адрес. Самият конструктор на изскачащи прозорци на Elementor предлага 7 разширени опции за правила, които можете да дефинирате.
Тъй като искаме да покажем изскачащия прозорец, когато потребителят щракне върху бутон, отворете раздела тригери и активирайте опцията При щракване, Кликнете върху Запази и затвори.
Създайте нова страница/публикация и я редактирайте с Elementor (можете също да редактирате съществуваща страница).
Добавете Джаджа за бутони като го плъзнете от левия панел към областта за редактиране. Или, ако редактирате съществуваща страница, която вече съдържа бутон, щракнете върху уиджета Бутон, за да го превключите в режим на редактиране.
Открийте също: Как да зададете персонализиран размер за иконата на бутона Elementor
Относно опцията бутон под раздела Съдържание, задайте връзката към Popup. За да направите това, можете да щракнете в секцията Динамична връзка.
Кликнете върху иконата на ключ в полето Popup и изберете изскачащия прозорец, който току-що създадохте. Въведете името на изскачащия прозорец, за да го намерите.
Кликнете върху ПУБЛИКУВАНЕ / АКТУАЛИЗИРАНЕ след редактиране на страницата. Преди да щракнете върху бутона ПУБЛИКУВАНЕ / АКТУАЛИЗИРАНЕПърво можете да прегледате страницата си, за да видите дали изскачащият прозорец вече работи.
Вземете Elementor Pro сега!!!
Заключение
С Elementor Pro вече не е необходимо да инсталирате изскачащ плъгин, защото функциите, предлагани от Elementor Pro, включват конструктор на изскачащи прозорци.
Конструкторът на изскачащи прозорци на Elementor ви позволява да създавате всякакъв тип изскачащи прозорци. От изскачащ прозорец с призив за действие, като този, който току-що създадохме по-горе, до изскачащ прозорец с форма за регистрация, лента за известия, бутон за споделяне в социалните мрежи и други...
Тъй като изскачащият прозорец е създаден с редактора на Elementor, можете да добавите всеки уиджет към него. С конструктора на изскачащи прозорци на Elementor можете също да създадете креативно меню на уебсайт, подобно на показаното по-долу:
Elementor предлага шаблони за изскачащи прозорци, за да ви спести време при създаването им. Можете също да използвате шаблон, ако нямате представа какъв дизайн искате да създадете.
Това е всичко! Това е всичко за тази статия, която ви показва как създавайте изскачащи прозорци с Elementor. Ако имате някакви притеснения относно това как да стигнете до там, уведомете ни в рамките на Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...