Фиксация элементов на экране при прокрутке
Чтобы важные действия (например, «Заказать» или «Помощь») всегда были под рукой у пользователя на всех этапах взаимодействия с сайтом, вы можете закрепить элемент в выбранной области экрана, обеспечивая его видимость при прокрутке страницы.
В этой статье вы узнаете, как закрепить следующие элементы:
Кнопка
Иконка
Для начала наведите на блок и нажмите на «плюс» в том месте, где хотите разместить элемент:
Саму кнопку можно добавить двумя способами. Первый - с помощью готового элемента Закреплённая кнопка:
Второй - превратив обычную кнопку в закрепленную. В новом окне выберите элемент Кнопка для добавления в блок:
Примечание: возможность закрепить элемент Две кнопки отсутствует.
Нажмите на добавленный элемент и кликните на «шестерёнку», чтобы перейти к настройкам кнопки:
Чтобы зафиксировать кнопку, включите соответствующий переключатель в её настройках:
Подсказка: вы можете открепить кнопку, снова нажав на тот же переключатель.
Примечание: эта функция недоступна для блоков-коллекций, Flex-блока и некоторых других.
После включения этой функции вы можете изменить расположение плавающей кнопки на экране по горизонтали ① и по вертикали ②, предварительно выбрав один из готовых пресетов позиции кнопки ③.
Примечание: в зависимости от размера экрана, масштаба браузера и системных настроек масштабирования, отображение на опубликованном сайте может отличаться.
Также вы можете включить функцию отображения при прокрутке, чтобы плавающая кнопка появлялась после определённого процента прокрутки страницы либо же после первого блока:
Не забудьте опубликовать свой сайт, чтобы изменения отобразились на нём.
Для начала наведите на блок и нажмите на «плюс» в том месте, где хотите разместить элемент:
В новом окне выберите элемент Иконка для добавления в блок:
Подсказка: подробнее о настройках самой иконки можно узнать из этой статьи.
Примечание: возможность закрепить элементы Иконки соцсетей, Список иконок, Список иконок + описание, Подписаться на нас отсутствует.
Нажмите на добавленный элемент и кликните на «шестерёнку», чтобы перейти в его настройки:
Чтобы зафиксировать иконку, включите соответствующий переключатель в её настройках:
Подсказка: вы можете открепить иконку, снова нажав на тот же переключатель.
Примечание: эта функция недоступна для блоков-коллекций, Flex-блока и некоторых других.
После включения этой функции вы можете изменить расположение плавающей иконки на экране по горизонтали ① и по вертикали ②, предварительно выбрав один из готовых пресетов позиции ③.
Примечание: в зависимости от размера экрана, масштаба браузера и системных настроек масштабирования, отображение на опубликованном сайте может отличаться.
Также вы можете включить функцию отображения при прокрутке, чтобы фиксированная иконка появлялась после определённого процента прокрутки страницы либо же после первого блока:
Подсказка: вы можете задать для иконки действие «Перейти к блоку» и выбрать первый блок вашей страницы — тогда закреплённая иконка может использоваться как кнопка прокрутки вверх.. Также это можно сделать при помощи готового элемента Наверх страницы.
Не забудьте опубликовать свой сайт, чтобы изменения отобразились на нём.
В этой статье вы узнаете, как закрепить следующие элементы:
Кнопка
Иконка
1. Добавление фиксированной кнопки
Для начала наведите на блок и нажмите на «плюс» в том месте, где хотите разместить элемент:
Саму кнопку можно добавить двумя способами. Первый - с помощью готового элемента Закреплённая кнопка:
Второй - превратив обычную кнопку в закрепленную. В новом окне выберите элемент Кнопка для добавления в блок:
Примечание: возможность закрепить элемент Две кнопки отсутствует.
Нажмите на добавленный элемент и кликните на «шестерёнку», чтобы перейти к настройкам кнопки:
Чтобы зафиксировать кнопку, включите соответствующий переключатель в её настройках:
Подсказка: вы можете открепить кнопку, снова нажав на тот же переключатель.
Примечание: эта функция недоступна для блоков-коллекций, Flex-блока и некоторых других.
После включения этой функции вы можете изменить расположение плавающей кнопки на экране по горизонтали ① и по вертикали ②, предварительно выбрав один из готовых пресетов позиции кнопки ③.
Примечание: в зависимости от размера экрана, масштаба браузера и системных настроек масштабирования, отображение на опубликованном сайте может отличаться.
Также вы можете включить функцию отображения при прокрутке, чтобы плавающая кнопка появлялась после определённого процента прокрутки страницы либо же после первого блока:
Не забудьте опубликовать свой сайт, чтобы изменения отобразились на нём.
2. Добавление фиксированной иконки
Для начала наведите на блок и нажмите на «плюс» в том месте, где хотите разместить элемент:
В новом окне выберите элемент Иконка для добавления в блок:
Подсказка: подробнее о настройках самой иконки можно узнать из этой статьи.
Примечание: возможность закрепить элементы Иконки соцсетей, Список иконок, Список иконок + описание, Подписаться на нас отсутствует.
Нажмите на добавленный элемент и кликните на «шестерёнку», чтобы перейти в его настройки:
Чтобы зафиксировать иконку, включите соответствующий переключатель в её настройках:
Подсказка: вы можете открепить иконку, снова нажав на тот же переключатель.
Примечание: эта функция недоступна для блоков-коллекций, Flex-блока и некоторых других.
После включения этой функции вы можете изменить расположение плавающей иконки на экране по горизонтали ① и по вертикали ②, предварительно выбрав один из готовых пресетов позиции ③.
Примечание: в зависимости от размера экрана, масштаба браузера и системных настроек масштабирования, отображение на опубликованном сайте может отличаться.
Также вы можете включить функцию отображения при прокрутке, чтобы фиксированная иконка появлялась после определённого процента прокрутки страницы либо же после первого блока:
Подсказка: вы можете задать для иконки действие «Перейти к блоку» и выбрать первый блок вашей страницы — тогда закреплённая иконка может использоваться как кнопка прокрутки вверх.. Также это можно сделать при помощи готового элемента Наверх страницы.
Не забудьте опубликовать свой сайт, чтобы изменения отобразились на нём.
Последнее изменение: 20/05/2025
Спасибо!