Редактор Studio: создание закрепленных элементов и секций
3 мин.
Сделайте так, чтобы раздел или элемент оставались на странице, когда посетители прокручивают ее вверх и вниз. Когда элемент или раздел достигает области просмотра посетителя, он фиксируется сверху, снизу или в обоих положениях. Вы можете задать смещение — расстояние от верхнего или нижнего края.
Перейдите в Академию Wix Studio, чтобы посмотреть дополнительные вебинары, обучающие материалы и курсы по Wix Studio.
Знаете ли вы?
Вы можете добавить эффект прокрутки хедера, чтобы изменить его вид при прокрутке вверх и вниз. Например, настройте смену цвета хедера или его скрытие, чтобы посетители могли сосредоточиться на странице.
Применение липкого позиционирования к элементу или разделу
- Перейдите в редактор.
- Выберите нужный раздел или элемент.
- Нажмите на иконку Открыть инспектор
в правом верхнем углу редактора.
- Прокрутите вниз до пункта Позиция.
- Выберите Липкое в выпадающем списке Тип позиции.
- Выберите, где закрепить раздел или элемент: Сверху, Снизу или Сверху и снизу.
- (Необязательно) Введите значение смещения, чтобы создать пространство сверху или снизу.
- Установите или снимите флажок Оставить спереди, чтобы включить или отключить этот параметр товара:
- Включено: раздел или элемент визуально находится спереди, но не меняет своего положения в DOM-структуре страницы.
- Отключено: визуальное положение раздела или элемента соответствует его положению в DOM-структуре страницы. В зависимости от структуры страницы элемент или раздел может не отображаться на переднем плане.
Примечание:
Порядок DOM важен для специальных возможностей сайта, его производительности и позиций в результатах поиска. Поэтому мы рекомендуем включить Keep in front — так вы получите нужный визуальный эффект, сохранив структуру страницы.
Удаление липкого позиционирования
Вы всегда можете вернуть элементы и секции в положение по умолчанию. Это означает, что они больше не будут закрепляться на экране при достижении области просмотра, а останутся на своем месте.
Чтобы удалить липкое позиционирование:
- Перейдите в редактор.
- Выберите нужный раздел или элемент.
- Нажмите на иконку Открыть инспектор в правом верхнем углу редактора.
- Прокрутите вниз до пункта Позиция.
- Выберите По умолчанию в выпадающем списке Тип позиции.
Полезные уроки
С помощью закрепленных элементов и секций можно создать множество интересных эффектов. Посмотрите эти видео в Академии Wix Studio и изучите доступные варианты: