Начало > Помощен център > Апликации > WordPress > WordPress Plugins – WPFront Scroll Top

WordPress Plugins – WPFront Scroll Top

Помощен център

WordPress Plugins – WPFront Scroll Top

Представяме ви WordPress плъгина WPFront Scroll Top. Неговата функция е при кликане на линк, обикновено в долния десен ъгъл на екрана, плавно да ни върне в началото на страницата.

Изключително полезна функция и е странно, че много темплейти и теми не я предлагат.

Влизаме в Plugins > Add New и въвеждаме името на плъгина WPFront Scroll Top в полето за търсене, след което инсталираме и активираме плъгина:

Инсталиране и активиране на плъгина WPFront Scroll Top

Панела с настройки се зарежда веднага след активирането, но може да го достъпим и от главното меню като кликнем Settings > Scroll Top:

Достъп от главното меню

Най-напред поставяме отметка в полето Enabled и въвеждаме стойност в полето Scroll Offset, която указва на плъгина на какво разстояние от горния край на екрана да се визуализира линка:

Настройки Enabled и Scroll Offset

В секция Button Style избираме вида на линка от наличните опции:

Опции в секция Button Style

Ако изберем опцията Image, трябва да маркираме една от иконите в дъното на панела:

Избиране на икона с опцията Image

Ако изберем опцията Text в панела Text Button трябва да въведем текста на бутона (Text), да посочим цвят на текста (Text Color), цвят на фона (Background Color), цвят на фона при посочване с мишката (Mouse Over Color) и като CSS код да въведем стойност за големина на шрифта:

Създаване на бутон с опцията Text

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

Изглед на Text бутона

Ако изберем последната опция Font Awesome трябва от следния адрес https://fontawesome.com/v4.7.0/icons/ да изберем икона, да копираме нейния CSS клас и да го поставим в полето Icon Class. Плъгина не работи с най-новата Font Awesome версия 5, но и с версия 4.7 имаме достъп до над хиляда икони.

Настройване на икона Font Awesome

Големината на иконата се определя от класа fa-3x, максималната стойност е fa-5x, а цвят на иконата избираме от полето Icon Color:

Изглед на Font Awesome икона

В секция Button Action също имаме избор между три настройки. Тази по подразбиране при кликане връща страницата в начална позиция.

Настройки в секция Button Action

С избиране на Scroll to Element посочваме до коя секция от страницата желаем да се връщат посетителите при кликане, например може да пропуснем началната хедър секция и Scroll Top да ни връща към първата секция със съдържание:

Настройка Scroll to Element

Опцията Link to Page ни пренасочва към посочения URL адрес, което би изненадало повечето посетители, които очакват стандартната функционалност - връщане в началото на страницата:

Настройка Link to Page

Следващите настройки указват в кой ъгъл на екрана да се визуализира иконата на линка (Location) и на какво разстояние от ъгъла да бъде разположена (Margin...):

Указване местоположение на иконата

В секция Display on Pages опцията по поддразбиране е All Pages (всички страници), но може да посочим и конкретни страници, на които да бъде активирана функцията (Include in following pages) или същата да бъде деактивирана (Exclude in following pages):

Позициониране на всички или отделни страници

В секция Image ALT въвеждаме Alt текст на изображението ако сме избрали опция с икона:

Поле Image ALT за въвеждане на Alt текст

Запазваме избраните настройки като кликаме бутона Save Changes.

Зареждаме страница от сайта, скролираме надолу и след 400px (в примера) в долния десен ъгъл се зарежда избраната икона. Кликаме иконата и се връщаме в началото на страницата.