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