1. Начало
  2. WordPress
  3. WPFront Scroll Top плъгин за линк към началото на страницата

WPFront Scroll Top плъгин за линк към началото на страницата

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

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

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

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

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

Достъп до настройките на плъгина от главното меню

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

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

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

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

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

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

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

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

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

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

В секция 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.

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

Обновена: 03.09.2021

Беше ли Ви полезна тази статия?

Вижте още