Как создать (фиксированный) липкий блок в Гутенберге без кода

Вы ищете способы создать липкий блок в Гутенберге? 🤔

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

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

👉 Вот пример того, о чем мы говорим — вы можете видеть, как значки социальных сетей «застревают» на своих местах даже при прокрутке пользователем:

Добавление липкого блока в Гутенберге обеспечивает удобство и удобство работы с пользователем, позволяя вам эффективно передать свое сообщение и заинтересовать аудиторию.

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

В этом уроке мы покажем вам, как использовать популярный плагин Gutenberg под названием Otter Blocks, чтобы добавить липкий блок на ваш сайт WordPress.

Давайте углубимся в это. 🤿

Как добавить липкий блок в редакторе Гутенберга

Чтобы добавить липкий блок в редакторе Gutenberg, вам необходимо выполнить следующие шаги:

• Шаг 1. Установите и активируйте плагин Otter Blocks.
• Шаг 2. Включите инструмент «Преобразование в липкий» для вашего блока.
• Шаг 3. Измените положение липкого блока.
• Шаг 4. Настройте смещение
• Шаг 5. Включите липкую блокировку на мобильном телефоне.
• Необязательный шаг: попробуйте плавающий режим
• Необязательный шаг: укажите поведение блока

Шаг 1. Установите и активируйте плагин Otter Blocks 🔌

Otter Blocks — это плагин WordPress, расширяющий функциональные возможности редактора Gutenberg.

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

Некоторые из наиболее популярных блоков, предлагаемых Otter, — это, среди прочего, таблицы цен, отзывы, социальные значки, карты, индикаторы выполнения, анимация, обратный отсчет и обзоры продуктов. Вот полный список блоков Выдры.

У Otter Blocks есть бесплатная и премиум-версия (называемая Otter Pro).

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

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

Otter Pro доступен за годовую плату в размере 49 долларов США за один веб-сайт. Вы можете купить его здесь. А если вы хотите опробовать плагин перед его использованием, попробуйте эту демо-версию.

➡️ Чтобы продолжить, установите бесплатную или премиум-версию Otter. В приведенном ниже уроке мы попытаемся отметить, когда для определенной функции требуется премиум-опция.

Шаг 2. Включите инструмент «Преобразование в липкий» для вашего блока 🚧

Откройте страницу или публикацию, куда вы хотите добавить липкий блок, в редакторе Gutenberg.

Выберите блок , который хотите сделать прикрепленным, и перейдите на панель , расположенную в правой части редактора.

На панели перейдите к блоку и выберите параметр «Инструменты блока» . Разверните Инструменты блоков, выбрав знак плюса .

Затем выберите «Преобразовать в липкий» в раскрывающемся меню.

Новая опция под названием «Закрепить» появится прямо под «Инструментами блока». Разверните его и перейдите в Sticky To .

В Sticky To вы можете указать элемент, к которому хотите прикрепить блок. Есть четыре варианта:

1. Блок верхнего уровня
2. Раздел
3. Родительский блок
4. Экран

Чтобы понять эти параметры и какой из них подходит для вашего прикрепленного сообщения, откройте «Обзор документа» в редакторе Gutenberg и посмотрите на блоки, окружающие ваш блок прикрепленного сообщения.

Самый верхний блок — это блок верхнего уровня. Выбрав блок верхнего уровня , вы прикрепите липкий блок к самому верхнему блоку . В нашем случае это блок «Группа» на изображении ниже.

Затем, выбрав «Раздел» , вы прикрепите липкий блок к блоку «Раздел», а при выборе «Родительский блок» липкий блок будет прикреплен к блоку прямо над вашим липким блоком .

В нашем случае родительским блоком является блок «Столбец раздела». См. изображение ниже.

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

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

Шаг 3. Измените положение липкого блока 🚩

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

Вы можете разместить липкий блок вверху или внизу экрана. Нижнее положение доступно только пользователям Otter Pro .

Вот как блок выглядит на одном из наших демонстрационных сайтов:

Шаг 4: Настройте смещение ⚙️

После установки положения липкого блока попробуйте просмотреть его. Если блок появляется слишком далеко или рядом с экраном, используйте параметр «Смещение» , чтобы увеличить или уменьшить расстояние между прикрепленным блоком и экраном.

Шаг 5. Включите липкую блокировку на мобильном телефоне 📱

По умолчанию липкий блок появляется только на настольных компьютерах. Если вы хотите включить его на мобильном устройстве, просто включите параметр «Включить на мобильном устройстве» .

Кстати, мобильная опция доступна только пользователям Otter Pro .

Необязательный шаг: попробуйте плавающий режим 🏄

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

Только пользователи Otter Pro могут использовать плавающий режим, и его можно применять только к блоку верхнего уровня , который в нашем случае является групповым блоком.

Как только вы переключите режим плавающего режима, вам будет предложено определить ширину , сторону и смещение стороны блока.

Ширина, конечно, относится к ширине блока , а сторона помогает вам определить местоположение блока (слева или справа) на экране. Смещение относится к расстоянию между липким блоком и выбранной стороной .

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

Необязательный шаг: укажите поведение блока 👨🏽‍💼

Используя плагин Otter Block, вы можете создавать несколько липких блоков на одной странице. Иногда эти блоки могут сталкиваться друг с другом. Вы можете указать, как липкий блок будет реагировать во время столкновений, используя опцию «Поведение» .

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

Выбор схлопывания приведет к тому, что липкие блоки будут сжиматься один в другой при столкновении одним и тем же движением, например:

А выбор постепенного исчезновения приведет к тому, что блок будет исчезать или исчезать один в другом блоке .

Наконец, при выборе стека блок будет складываться поверх других липких блоков, с которыми он сталкивается, как показано на рисунке ниже.

И затухание, и стек доступны только пользователям Otter Pro .

Вот и все. Теперь вы добавили липкий блок в Гутенберге. 🤩

Создайте свой первый липкий блок в Гутенберге 🧱

Добавление фиксированного или прикрепленного блока в Гутенберге — отличный способ привлечь внимание посетителей к важным частям вашего веб-сайта WordPress.

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

Несмотря на то, что существует несколько плагинов для закрепления блоков, Otter Blocks — самый простой и удобный плагин для блоков.

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

👉 Чтобы запустить липкий блок на своей странице с помощью плагина Otter Blocks, вам необходимо выполнить следующие действия:

Если у вас есть вопросы о том, как создать липкий блок в Гутенберге, сообщите нам об этом в разделе комментариев ниже .