Руководство по пониманию и использованию фиксированной позиции в Divi

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

В этом посте мы рассмотрим:

• Обзор четырех типов позиционирования Divi
• Как фиксированная позиция «позиционирует» элемент в Divi
• Использование параметров фиксированного положения в Divi
• Советы, которые следует помнить при использовании фиксированного положения
• 6 полезных способов использования фиксированной позиции в Divi

Проверьте это!

Обзор четырех типов позиционирования Divi

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

Статический (по умолчанию)

Статические элементы технически не «позиционируются», поскольку они остаются в нормальном порядке или порядке элементов на странице, и они не реагируют на свойства top, right, bottom и left, как другие позиционированные элементы (вот почему нет смещения доступны в Divi для элементов в статической позиции / позиции по умолчанию). В Divi, когда мы выбираем позицию по умолчанию для модуля, мы выбираем статическую позицию. Также стоит упомянуть, что некоторые элементы в Divi (например, строки и разделы) по умолчанию будут иметь относительное положение (а не статическое положение).

Родственник

Относительно расположенные элементы похожи на статические элементы в том смысле, что они следуют обычному потоку страницы. Основное отличие состоит в том, что относительно позиционированные элементы можно позиционировать с помощью свойств top, bottom, left и right. Кроме того, в отличие от статических элементов, их также можно позиционировать с помощью свойства Z Index.

Чтобы узнать больше, ознакомьтесь с нашим руководством по пониманию и использованию относительного положения в Divi.

Абсолютный

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

Для получения дополнительной информации ознакомьтесь с нашим руководством по пониманию и использованию абсолютного положения в Divi.

Фиксированный

Как и в случае с абсолютным положением, элементы с фиксированным положением вырвутся из обычного потока страницы и не будут иметь фактического пространства внутри страницы. Ключевое различие между абсолютным и фиксированным состоит в том, что фиксированная позиция определяется по отношению к окну браузера или области просмотра. Другими словами, независимо от того, где элемент находится в обычном потоке страницы, как только ему будет присвоена фиксированная позиция, его позиция теперь будет напрямую связана с окном браузера. Мы можем использовать свойства top, bottom, left и right для позиционирования элемента в области просмотра. Поскольку фиксированные элементы часто будут находиться позади или перед другими элементами на странице, Z Index поможет упорядочить фиксированные элементы над другими.

ПРИМЕЧАНИЕ. В CSS есть еще один тип позиционирования, называемый липким. Залипший позиционированный элемент ведет себя как относительно позиционированный элемент, пока мы не перейдем к его контейнеру (в какой-то момент, определяемый верхним значением). Затем элемент становится фиксированным (или застревает), пока пользователь не прокрутит до конца контейнера. Однако липкое положение может быть немного непредсказуемым, поскольку другие факторы могут препятствовать работе. Липкое позиционирование будет встроено в Divi в ближайшем будущем.

Как фиксированная позиция «позиционирует» элемент в Divi

Как упоминалось в обзоре, тип фиксированной позиции аналогичен абсолютной позиции, поскольку элемент выходит за рамки обычного потока документа (HTML на странице). Прерывание потока документа означает, что элемент не оставит фактического места на странице, где он изначально находился. Вот иллюстрация модуля с изменением относительного положения на фиксированное. Обратите внимание, как область, которую он изначально создал / занимала в столбце, теперь исчезла, а модуль теперь закреплен в верхнем левом углу окна браузера.

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

Вот иллюстрация того, как работают три позиции (относительная, абсолютная и фиксированная) при прокрутке страницы вниз. Обратите внимание, что фиксированный модуль остается на месте (позиционируется относительно браузера) при прокрутке пользователем.

Использование параметров фиксированного положения в Divi

В Divi вы можете задать фиксированное положение любому элементу, выбрав параметр фиксированного положения в переключателе группы параметров «Положение» на вкладке «Дополнительно». Вы также найдете дополнительные параметры фиксированного положения (положение, смещения, z-индекс) после выбора относительного положения.

Регулировка базового положения фиксированного положения

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

Использование смещений с фиксированным положением

Элементы управления «Вертикальное смещение» и «Горизонтальное смещение» позволяют дополнительно регулировать базовое положение фиксированного элемента по его оси местоположения.

Значения Offset Origin и Offset будут работать вместе, чтобы разместить наш элемент в любом месте окна просмотра браузера. В этом примере у нас есть модуль, который имеет фиксированное положение, начало смещения в верхнем левом углу, вертикальное смещение 50 пикселей и горизонтальное смещение 50 пикселей. Обратите внимание, как значения смещения будут перемещать элемент от начала смещения по горизонтали и / или вертикали (от верхнего левого угла браузера).

При использовании значений горизонтального и вертикального смещения в Divi (например, свойств top, bottom, left и right в CSS) для фиксированного элемента важно помнить, что эти значения будут позиционировать элемент относительно области просмотра браузера. Свойство Z Index также может пригодиться с фиксированным элементом. Поскольку большую часть времени вы хотите, чтобы эти фиксированные элементы оставались впереди других элементов на странице, вам нужно будет присвоить им высокое значение индекса Z (например, 9999).

Использование перетаскиваемых якорей для изменения положения фиксированных элементов на странице

Когда вы меняете положение элемента на «Фиксированное», при наведении курсора на элемент появляется перетаскиваемая привязка. Это позволяет перетаскивать элемент, чтобы изменить его положение. Когда вы перемещаете элемент, его смещение по осям X и Y регулируется в настройках модуля.

Несколько советов по использованию фиксированного позиционирования

Отрегулируйте фиксированные элементы для мобильных устройств

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

Создайте пространство для фиксированных элементов

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

Хороший пример - фиксированная боковая панель. Если вы хотите добавить фиксированную боковую панель к шаблону страницы в Divi, вам сначала нужно убедиться, что ширина области основного содержимого уменьшена, чтобы создать необходимое пространство для фиксированной боковой панели. Поэтому, если вы используете раздел для создания боковой панели, вы можете задать ему фиксированное положение, высоту 100% и ширину 300 пикселей.

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

Используйте более высокий индекс Z для фиксированных элементов

Если фиксированному элементу не было предоставлено достаточно места для него на вашей странице, он будет перекрывать другой контент на странице. В большинстве случаев вам нужно, чтобы фиксированный элемент оставался видимым (вверху), поскольку он сталкивается с другими элементами на странице во время прокрутки. Для этого вы можете добавить более высокий индекс Z к фиксированному элементу, чтобы он оставался выше всего остального содержимого в Z-пространстве. Если вы не знаете, какое значение дать, вы можете добавить большое число, например 9999.

6 способов использовать фиксированное положение

# 1 фиксированные заголовки

Одно из лучших применений новых опций фиксированной позиции - создание фиксированных заголовков. Используя Divi Theme Builder, вы можете создать полностью настраиваемый заголовок и зафиксировать весь раздел.

Как разместить

Вот сообщение о том, как создать фиксированный заголовок в Divi:

• Как создать фиксированный заголовок с опциями позиции Divi

# 2 Фиксированные панели нижнего колонтитула

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

Публикации с инструкциями

Вот несколько сообщений о том, как создать фиксированную панель нижнего колонтитула в Divi:

• Как создать фиксированную панель нижнего колонтитула для вашей темы Divi
• Как создать фиксированные мобильные нижние колонтитулы с помощью Divi
• Как создать (фиксированную) панель мобильных контактов в Divi

# 3 Фиксированные боковые панели / вертикальные меню

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

Публикации с инструкциями

Вот пост о том, как создать фиксированную боковую панель в Divi:

• Как создать адаптивную фиксированную боковую панель с плавной прокруткой якорных ссылок с помощью Divi
• Как создать вертикальное (фиксированное) меню навигации для вашего сайта Divi

# 4 фиксированные кнопки возврата вверх

Кнопки Back-to-Top обычно закреплены в правом нижнем углу веб-сайта, и пользователи всегда могут нажать на них, чтобы отправить их обратно в верхнюю часть страницы.

Вот сообщение о том, как создать фиксированные кнопки с верхним расположением кнопок в Divi:

• Как создать собственный липкий (фиксированный) дизайн с помощью Divi

# 5 Фиксированные меню

Большинство скользящих или всплывающих меню имеют фиксированное положение. Они также отлично подходят для мобильных устройств.

Вот пост о том, как создать фиксированное меню в Divi:

• Как создать адаптивное слайд-меню с помощью конструктора тем Divi

# 6 Фиксированные окна уведомлений, призывы к действию, подписки на электронную почту и т. Д.

Вот сообщение о том, как создать фиксированное окно уведомлений в Divi:

• Как добавить закрывающийся скользящий призыв к действию в любой угол шаблона страницы в Divi

Последние мысли

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

Каков ваш опыт работы с фиксированным типом должности?

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!