Какво представлява ефектът на Паралакс? Защо и как да го използвате на сайта си WordPress

Какво представлява ефектът на Паралакс? Защо и как да го използвате на сайта си WordPress

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


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

Какво е ефектът на Паралакс?

Двадесет Седемнадесет

Ефектът Паралакс включва уеб страници фонът се движи с по-ниска скорост от преден план. Това създава илюзия за дълбочина на страницата, придава на съдържанието 3D ефект, докато зрителите се превъртат надолу.

По-голямата част от премиум WordPress теми сега идват с вграден паралакс ефект на началната си страница. Дори безплатната тема по подразбиране WordPress Twenty Seventeen идва с функция за паралакс. Повечето създатели на страници също включват инструмент за паралакс ефект, който ви позволява да добавите ефекта към всяка страница или публикация на вашия уебсайт. И разбира се, има много WordPress плъгини, които можете да инсталирате, за да добавите елементи на паралакс ефект към вашия уебсайт.

Какви са ползите от използването на ефект Паралакс?

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

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

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

Parallax на мобилни устройства

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

Изберете тема с Parallax Effect

Обща сума

За тези от вас, които стартират нов проект, трябва да изберете премиум тема, която включва функция за паралакс ефект. И ако искате да използвате паралакс ефект върху различни страници на уебсайта си, а не само за началната страница, тогава може да искате да помислите за многофункционална тема, която се предлага с усъвършенстван конструктор на страници. Теми като Divi от Elegant Themes, Parallax от Themify и нашата собствена тема Total, всички включват създатели на страници, предоставящи инструменти за паралакс ефект.

Добавете Parallax плъзгачи с плъгин за слайд революция WordPress

Паралекс на плъзгащата революция

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

Активиране на плъзгача Revolution Parallax

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

Настройки на паралела на плъзгача Revolution

След това редактирайте слайда Основна информация за да добавите a източник фоново изображение и изберете Паралакс / 3D раздела, за да зададете ниво на паралакс. След това като добавите слоеве, изберете Паралакс / 3D опция на слой за паралакса дълбочина, за да добавите движение към вашия текст, изображение, бутон и други слоеве. Това е толкова лесно!

Когато сте готови, запазете плъзгача и използвайте краткия код, за да го поставите във всяка публикация или страница. Или ако използвате конструктор на страници като Visual Composer, можете да използвате елемента за превключване на слайд Revolution на създателя на страница, за да изберете бързо и да поставите плъзгача си.

Добавете секции Parallax с приставката за превъртане на WordPress на Parallax

Паралелен свитък

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

Така че сега нека да разгледаме как да инсталирате и започнете да използвате Parallax Scroll …

Инсталиране на Parallax Scroll

За да инсталирате Parallax Scroll, влезте в таблото си за управление на WordPress като администратор и изберете Приставки> Добавяне на нови от менюто.

Добавете нов Plugin

Търсене Паралелен свитък, след това изберете Инсталирайте сега> Активирай.

Parallax превъртане Активирай

Сега ще намерите раздела за превъртане Parallax е добавен към вашето WordPress меню.

Добавяне на раздел за превъртане Parallax

За да започнете с Parallax Scroll, първо трябва да създадете нов раздел за паралакс. За целта изберете Превъртане Parallax> Добавяне на ново от менюто си WordPress.

Превъртане на паралакс Добавяне на ново

Тук вече можете да създадете своя нов раздел за паралакс …

Добавете нов Паралакс

Задаване на фоново изображение на превъртащата се паралела

Първо трябва да зададете изображение за вашия превъртащ се паралакс фон. За целта кликнете върху Задайте Featured Image и добавете изображението в секцията Featured Image.

Представено изображение

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

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

Създаване на текст в заглавието на фона на паралела

Добавяне на заглавка

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

Може да не искате заглавка в секцията си за паралакс. Ако това е така, все пак трябва да дадете заглавие на публикация на всеки паралакс, така че всеки раздел, който създавате, е лесно разпознаваем. След това ще трябва да изберете, за да скриете заглавието в Опции за превъртане на Parallax (разгледано по-нататък в тази статия), така че заглавката не се показва от предната страна на вашия сайт.

Показване на всяко съдържание с фон за превъртане Parallax

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

Персонализиране на настройките за превъртане Parallax

След като сте доволни от съдържанието, трябва да персонализирате настройките на секцията за паралакс, според вашата страница.

Опции за превъртане на Parallax

Превъртете надолу до Опции за превъртане на Parallax. Под Style можете да промените височината на паралакса и размера на изображението, както и да изберете Full Width, за да принудите темата ви да показва фоновото изображение на цялата ширина на екрана, ако вече не е.

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

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

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

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

Поставяне на раздела Паралекс в публикация или страница

След това трябва да вмъкнете секцията си за паралакс в публикация или страница на вашия уебсайт. Изберете Parallax Scroll от менюто си WordPress.

Кратък код за превъртане на Parallax

В представената таблица вече ще видите кратък код за току-що създадения раздел за паралакс. Копирайте кода и след това отворете подходящата страница или публикация. Поставете кода в съдържанието на страницата на съответната позиция.

Вмъкнете кратък код

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

Заключителни мисли

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

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

Ще добавите ли паралакс ефект към началната си страница, целевата страница, публикацията или някъде другаде? Моля, споделете мислите си в коментарите по-долу …

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map