Простий спосіб Додайте повзунок «До» та «Після».
Зображення до і після широко використовуються в маркетингових цілях у дуже широкому діапазоні галузей. Немає слів, які могли б краще описати ефект певного процесу, ніж зображення, яке показує, як хтось або щось виглядало до і після цього процесу. Навіть у компаніях, які не займаються продуктами, ефект яких помітний, можна використовувати цю функцію в жартівливій формі.
Скажімо, ви керуєте рестораном – ви могли б показати, як виглядає людина перед їжею у вашому палаці і як вона задоволена, скуштувавши ваші делікатеси. Можливості до і після пропозицій слайдера щодо зображення переваг і переваг ваших продуктів/послуг безмежні. Все залежить від вашої уяви.
Подібно до того, як додавання ефекту паралакса на наші сторінки робить ваш веб-сайт сучасним, повзунок «до» та «після» ускладнює його забути, оскільки зображення можуть розповісти більше, ніж 1000 слів.
Крім того, ви можете самостійно додати цю функцію на свій веб-сайт. У цій статті ми покажемо вам, як створити повзунок до та після за допомогою популярного безкоштовного віджета порівняння до/після.
Залишайтеся з нами, щоб дізнатися більше про:
Додавання повзунка до та після за допомогою додатків Qi для Elementor
Qi Addons для Elementor — це інтуїтивно зрозумілий інструмент, який дозволяє без особливих зусиль додавати широкий спектр чудових елементів на ваш веб-сайт. Він постачається з дуже практичним, зручним інтерфейсом, і як новачки, так і досвідчені користувачі знайдуть його простим у використанні. Що особливо чудово в Qi, так це те, що окрім багатьох корисних функцій, він також надає вам нотку сучасної елегантності.
Процес встановлення QI Addons для Elementor нічим не відрізняється від встановлення будь-якого іншого плагіна. Якщо у вас виникнуть запитання щодо цього, перейдіть за посиланням, яке ми надали вище, а також можете написати нам у розділі коментарів.
Оскільки це плагін Elementor, не забудьте перейти до редактора Elementor під час створення нового допису. Усі віджети Qi Addons будуть акуратно відображені в меню елементів ліворуч. Просто прокрутіть меню вниз, щоб знайти їх.
Віджет «Півзунок до і після» пропонує простий і ефективний спосіб показати два зображення в одному кадрі. Знайдіть його в меню бічної панелі ліворуч, ввівши назву віджета в поле пошуку або переглянувши віджети в меню.
Щоб додати повзунок порівняння «До/після», перетягніть елемент Elementor у потрібне місце. Після додавання віджета всі параметри будуть зліва, а на вкладках «Вміст» і «Стиль» — усі параметри, пов’язані з повзунком.
Тепер вам потрібно додати зображення до та після до повзунка. По-перше, ми додаємо попереднє зображення – наведіть вказівник миші на поле зображення, і з’явиться опція «Вибрати зображення», або просто клацніть маленький значок плюса посередині поля.
Ви можете вибрати зображення з медіа-бібліотеки або за потреби завантажити зображення до своєї медіа-бібліотеки. Просто перетягніть вибране зображення та його до медіа-бібліотеки, якщо його там ще немає, виберіть його та виберіть.
Після того, як ви вставите потрібні зображення, ви можете продовжувати налаштовувати повзунок до/після, змінюючи текст, який відображатиметься в колі посередині повзунка. Ви можете написати тут інструкцію або більш помітне повідомлення, це залежить від вас і стилю вашого сайту. Ви також можете вибрати, чи потрібно вирівнювати текст по вертикалі чи горизонталі.
Якщо ви хочете налаштувати, де на повзунку з’являтиметься межа між зображенням до та після, ви можете ввести потрібне значення зсуву в полі. Значення за замовчуванням становить 50%, що означає, що межа за замовчуванням знаходиться прямо посередині зображення. Ось як може виглядати повзунок, якщо відрегулювати зсув:
Тепер настав час для більш точного налаштування повзунка до-після. Давайте подивимося, що ще можна налаштувати, щоб повзунок виглядав саме так, як вам потрібно. Натисніть вкладку «Стиль», щоб переглянути додаткові параметри.
Якщо ви хочете перемістити круглий маркер із центру зображення, просто скористайтеся повзунком, щоб відрегулювати значення зсуву верхнього маркера. Ви одразу побачите зміни в реальному часі, тож зможете легко вирішити, що вам найкраще підходить. Ви також налаштуєте розмір кола таким же чином, а також межу між версією до/після зображення.
Ви також можете клацнути колір тексту Nabdle, щоб створити свій відтінок кольору для тексту в колі, а також вибрати шрифт тексту таким же чином. Нарешті, ви також можете налаштувати колір кола таким же чином.
Вивчення додаткових параметрів
На вкладці «Додатково» ви знайдете багато інших параметрів, щоб зробити слайдер більш привабливим і помітним. Ці параметри не є ексклюзивними лише для цього віджета, це стандартні параметри Elementor, які ви також можете використовувати для редагування інших віджетів на сторінці.
Проілюструємо деякі з найцікавіших. Не соромтеся протестувати всі параметри, оскільки ви побачите всі зміни, які ви вносите в реальному часі, тож ви зможете миттєво дізнатися, що кожен параметр робить із повзунком і чи працює він для вас.
Якщо ви відкриєте меню «Додатково», ви побачите параметри налаштування поля та відступу. Ви помітите маленьку піктограму ноутбука поруч із кожною опцією, яка дозволяє встановлювати різні значення поля та відступу на різних пристроях – ноутбуці, планшеті чи мобільному телефоні.
Ефекти руху особливо цікаві, і у вас є дійсно широкий вибір із понад 35 ефектів руху на вибір. У вас також є можливість налаштувати різні анімації для показу на різних пристроях. Вибравши тип анімації, ви також можете налаштувати її тривалість і затримку, якщо вважаєте за потрібне.
Тепер клацніть вкладку «Трансформація», щоб дізнатися більше ефектів, які можна використовувати. Щоб змінити відображення повзунка, ви можете зробити багато речей, від обертання до нахилу, горизонтального та вертикального гортання.
На вкладці «Межа» ви знайдете параметри, які дозволять вам прикрасити бік, додавши межі тіньових зображень у вибраних кольорах. Ви також можете додати ефект тіні навколо вікна слайда та встановити ефект тіні.
Опції на вкладці «Маска» дуже зручні. Тут можна встановити, щоб повзунок відображався в різних формах – коло, квітка, ескіз, трикутник, крапка, шестикутник або навіть додати спеціальну форму. Також є можливість регулювати розмір і положення обраної форми.
Зверніть особливу увагу на вкладку Responsive, оскільки саме тут ви можете вибрати, щоб повзунок не відображався на вибраних пристроях.
Ось як виглядає повзунок на сторінці після того, як ми налаштували його для наших потреб:
Щоб дізнатися більше, перегляньте це відео:
На закінчення
Як бачите, додавання повзунка «до» та «після» на ваші сторінки — це не наука. Тепер ви можете дати волю своїй уяві та створити вражаюче візуальне представлення ефектів, які може спричинити ваша робота, продукти чи послуги. Якщо у вас є запитання, коментарі чи запити будь-якого роду, не соромтеся зв’язатися з нами в будь-який час.