Вы хотите создать плавающую кнопку с включенным индексом Z? Elementor ?
Мы уверены, что вы знакомы с кнопкой, которая появляется перед всем содержимым экрана и обычно имеет круглую форму и значок в центре. Ну, это плавающая кнопка действия.
Плавающая кнопка действия может вызвать действие или отправить вас куда-то. Такие как триггеры для электронных писем, социальных сетей, ориентации посетителей подписаться на канал и многое другое.
В Elementor, существует два метода создания плавающей кнопки действия:
- Установив Z-индекс
- Создав всплывающее окно -Popup-
В этом уроке мы только покажем вам, как создать плавающую кнопку действия, установив индекс Z. И мы будем использовать профессиональную версию, чтобы это произошло.
Но сначала узнайте: Как установить Elementor на WordPress
Как создать плавающую кнопку действия в Elementor
Вы можете использовать бесплатную версиюElementor чтобы создать кнопку плавающего действия с помощью этого метода. Но вам нужно вставить кнопку, которую вы разработали, на каждую страницу, где вы хотите, чтобы кнопка отображалась на вашем компьютере. сайт.
С Факир Pro, вы также можете получить доступ к функции Пользовательские CSS, который мы будем использовать в этом уроке.
Перейдите в редактор Elementor; вы можете изменить существующий контент (страницы, статьи и т. д.) или создать новый. В этом уроке мы собираемся изменить страницу.
Сначала создайте новый раздел с одним столбцом. Выберите виджет «Кнопка» и перетащите его в область редактирования с панели виджетов. Затем поменяйте кнопку Текст и залог.
В этом уроке мы будем использовать кнопку в качестве триггера для нажатия кнопки посетителей ориентироваться Веб-сайт Элементор. Тогда по варианту Alignement, установите его на право et, Наконец, измените размер кнопки включения Очень большой.
Как видно на гифке выше, эта кнопка стационарна в разделе. Далее мы заставим его двигаться при прокрутке, оставляя его в том же положении.
Перейти на вкладку Передовой. В параметре Макет, установите ширину на Inline (автомобиль), определить положение на фиксированном, определять горизонтальная ориентация на право и настроить его décalage по желанию.
Далее мы определим основы этого метода. В поле Z-Index, введите число 9999 ; это сделает кнопку всегда впереди (плавающей).
Теперь пришло время повернуть плавающую кнопку действия. Всегда под вкладкой Передовой, доступ css-классы из блока раскладка, затем написать rotate внутри.
См. Также: Elementor: представляем лучший конструктор страниц WordPress
После этого переходим к блоку Пользовательские CSS , затем вставьте в поле следующий код:
.rotate.rotate
{transform: rotate(90deg);}Вы можете видеть, что ручка только что повернулась, но между краями экрана есть странный зазор. Итак, давайте исправим это, настроив décalage при -92
Наконец, мы собираемся сделать последний маленький штрих для этой плавающей кнопки действия. Доступ к блоку трансформатор, выберите это ОБЗОР, доступ к опции сдвиг и установите для каждого параметра значение 7.
В Elementor есть несколько вариантов достижения определенной цели. Когда дело доходит до плавающей кнопки, вы можете использовать два варианта. Здесь мы рассмотрели только один метод, другим методом будет отдельный учебник.
Читайте также: Elementor: как перенести сайт WordPress
Если вы хотите иметь больше параметров стиля, создание плавающей кнопки действия с помощью конструктора всплывающих окон будет лучшей альтернативой, поскольку у вас будут параметры для настройки кнопки, а также ее поведения, такие как время закрытия кнопки, продолжительность, анимация входа или выхода и т. д. .
Вы только что легко справились с этой задачей. Просто просмотрите работу своего планшета и смартфона, пытаясь изменить поля, чтобы они соответствовали каждому устройству.
Получите Elementor Pro прямо сейчас!
Заключение
Так ! Вот и все, что касается этой статьи, в которой показано, как применить эффект масштабирования к карточке профиля. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
