Как сделать плавающую кнопку в Elementor

Rifat Элементор Jul 29, 2022

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

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

Сделать плавающую кнопку в Elementor

Здесь мы настроим z-индекс для создания нашей плавающей кнопки. Используя бесплатную версию Elementor, вы можете создать плавающую кнопку для определенной страницы, выполнив эту процедуру. Если вы хотите добавить плавающую кнопку на весь сайт, вы должны вручную добавить кнопку на каждую страницу, если вы используете бесплатную версию Elementor.

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

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

Добавьте виджет кнопки во вновь созданный столбец с панели виджетов.

Теперь вы должны выбрать действие кнопки. В этом случае мы используем кнопку для перехода к URL-адресу страницы магазина. Для этого перейдите в поле ссылки и добавьте ссылку на страницу. Расположение кнопки можно изменить с помощью параметра выравнивания. Сделайте кнопку как можно меньше.

Теперь наша кнопка готова плавать, когда пользователь прокручивает страницу вниз. Для этого перейдите на вкладку «Дополнительно» и выберите параметр «Макет». Установите ширину и положение на встроенный (авто). Вы также должны настроить горизонтальную и вертикальную ориентацию, а также смещение.

Теперь вы должны указать z-индекс, чтобы кнопка всегда была плавающей. Заполните слот z-index значением 800. Это всегда сделает кнопку плавающей.

Окончательный вид

Вот как выглядит наш окончательный дизайн.

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

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