Как добавить кнопку «Вернуться наверх» в Elementor

Вы когда-нибудь сталкивались с чрезвычайно обширной страницей и нуждались в возврате наверх? Прокрутка может раздражать, особенно на мобильных устройствах, но вы можете смягчить это, используя Elementor в WordPress, чтобы добавить кнопку «Вернуться к началу».

Кнопки обычно являются важным компонентом сайтов WordPress, и Elementor упрощает их создание. Люди часто хотят видеть, что они могут вернуться к началу страницы без прокрутки. Кнопка «Вернуться к началу» Elementor работает здесь очень хорошо.

В этом уроке мы научим вас, как добавить кнопку возврата наверх Elementor в конструктор страниц Elementor за три простых шага.

Важность наличия кнопки «Вернуться к началу»

Вы можете спросить, какой веб-сайт требует кнопки «Вернуться к началу». И ответ — одностраничный сайт.

Веб-сайты, которые просто содержат всю информацию на определенной странице, называются одностраничными веб-сайтами. Я знаю, что это очевидно, но в этом дизайне есть один существенный недостаток. Страницы становятся очень длинными. Это может раздражать посетителей, которые хотят быстро вернуться в топ.

На самом деле, чтобы вернуться наверх, некоторые пользователи могут просто закрыть браузер и ввести URL-адрес. Это если они решат вернуться.

Большинство страниц веб-сайтов недостаточно длинные, чтобы заслуживать эту опцию. Однако есть исключения, так что это действительно зависит от содержания вашего сайта.

Пожалуйста, помните, что эта кнопка в WordPress предназначена не только для страниц; это также работает для статей. Мы также должны рассмотреть возможность включения оглавления для очень длинных записей, чтобы помочь читателям быстро найти то, что они ищут.

В зависимости от контекста, для статей длиннее 2000 слов или длинного контента может потребоваться кнопка возврата наверх. Это простой подход, позволяющий посетителям вернуться к началу публикации, если есть какие-либо ссылки или другие призывы к действию, которые они хотят использовать.

Добавление кнопки «Вернуться к началу»

Создание кнопки возврата наверх — простая операция, которую можно быстро выполнить, если выполнить следующие шаги. Просто имейте в виду, что для классов CSS требуется Elementor Pro .

Добавить кнопку

Elementor можно использовать для редактирования страницы, на которую вы хотите добавить кнопку «наверх». Чтобы войти в режим редактирования, щелкните маркер раздела в верхней части.

Добавьте идентификатор CSS, введя его в поле «Идентификатор CSS» на вкладке «Дополнительно» на левой панели.

Добавьте на свою страницу виджет «Кнопка» или любой другой виджет, который позволяет добавить ссылку, например текст, значок или даже изображение. Вы можете поставить его где угодно.

В поле «Ссылка» укажите идентификатор CSS для области в верхней части страницы, которую вы только что указали. Для начала добавьте префикс «#».

Теперь нажмите кнопку и вот вы сделали это!

Размещение кнопки

Установка положения кнопки, очевидно, необходима перед внесением каких-либо изменений на вашу страницу. Кнопка обычно находится в правом нижнем углу экрана.

Откройте вкладку «Дополнительно» на левой панели и выберите параметр «Позиционирование» для виджета «Кнопка». Установите ширину на пользовательскую и положение на стабильную. " Таким образом вы сможете перемещать свою кнопку по своему усмотрению.

Поместите кнопку в нужное место, перетащив ее туда (например, в правый нижний угол).

Вы также можете точно настроить местоположение, отрегулировав горизонтальное и вертикальное смещения. Вот и все.

Если вы хотите изменить внешний вид кнопки, щелкните страницу «Стиль». Не забудьте сохранить свою работу и опубликовать ее, когда закончите.

Скрыть или показать кнопку “Вернуться к началу”

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

Как только они достигнут дна, они могут просто щелкнуть по нему, и он исчезнет из их поля зрения.

Однако, если у вас установлен и запущен Elementor Pro, вы можете легко «приклеить» кнопку внизу страницы. Использование «эффекта липкой прокрутки», доступного только в профессиональной версии, является единственным решением.

Поскольку к кнопке можно получить доступ из любого места сообщения или страницы, вариант закрепления более гибкий.

Подведение итогов

С Elementor легко создавать красивые страницы для вашего сайта WordPress. Даже если у вас есть доступ только к бесплатной версии, вы можете многое с ней сделать. Действия, которые вам нужно выполнить в бесплатной версии, могут отличаться от тех, которые вам нужно выполнить, если вы используете профессиональную версию , так что имейте это в виду.

Бесплатная версия может быть достаточной для ваших целей, в зависимости от того, для чего она вам нужна. Версия Pro, с другой стороны, определенно стоит дополнительных денег во многих ситуациях.

Тем не менее, я надеюсь, что этот урок показал вам, как просто добавить кнопку «наверх» в Elementor . С помощью нескольких быстрых щелчков здесь и там вы можете упростить прокрутку людей назад к началу любой страницы или публикации на вашем сайте.