Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62.

Хотите создать плавающую кнопку с индексом Z на Elementor?

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

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

В Elementor есть два метода создания плавающей кнопки действия:

  • Установив Z-индекс
  • Создав всплывающее окно -Popup-

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

Но сначала узнайте: Как установить Elementor на WordPress

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

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

С Факир Pro, вы также можете получить доступ к функции Пользовательские CSS, который мы будем использовать в этом уроке.

Перейдите в редактор Elementor; вы можете изменить существующий контент (страницы, статьи и т. д.) или создать новый. В этом уроке мы собираемся изменить страницу.

Легко создайте свой сайт с Elementor

Elementor позволяет создавать Легко и бесплатно любой дизайн веб-сайта или блога с профессиональным видом. Перестаньте платить много за веб-сайт, который вы можете сделать сами.

Сначала создайте новый раздел с одним столбцом. Выберите виджет «Кнопка» и перетащите его в область редактирования с панели виджетов. Затем поменяйте кнопку Текст и залог. 

В этом уроке мы будем использовать кнопку в качестве триггера, чтобы подтолкнуть посетителей к просмотру веб-сайта Elementor. Тогда по варианту Alignement, установите его на право et, Наконец, измените размер кнопки включения Очень большой.

создать плавающую кнопку с индексом Z

Как видно на гифке выше, эта кнопка стационарна в разделе. Далее мы заставим его двигаться при прокрутке, оставляя его в том же положении.

Перейти на вкладку Передовой. В параметре Макет, установите ширину на Inline (автомобиль), определить положение на фиксированном, определять горизонтальная ориентация на право и настроить его décalage по желанию.

создать плавающую кнопку с индексом Z

Далее мы определим основы этого метода. В поле Z-Index, введите число 9999 это сделает кнопку всегда впереди (плавающей).

создать плавающую кнопку с индексом Z

Теперь пришло время повернуть плавающую кнопку действия. Всегда под вкладкой Передовой, доступ css-классы из блока раскладка, затем написать rotate внутри.

См. Также: Elementor: представляем лучший конструктор страниц WordPress

После этого переходим к блоку Пользовательские CSS , затем вставьте в поле следующий код:

.rotate.rotate
{transform: rotate(90deg);}

Вы можете видеть, что ручка только что повернулась, но между краями экрана есть странный зазор. Итак, давайте исправим это, настроив décalage при -92

создать плавающую кнопку с индексом Z

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

создать плавающую кнопку с индексом Z

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

Читайте также: Elementor: как перенести сайт WordPress

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

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

Получите Elementor Pro прямо сейчас!

Заключение

Так ! Вот и все, что касается этой статьи, в которой показано, как применить эффект масштабирования к карточке профиля. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.

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

Но тем временем поделитесь этой статьей в разных социальных сетях.

...