Как сделать кнопку наверх elementor

Обновлено: 05.07.2024

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

54 комментария к “Как сделать кнопку с бликом в Divi и Elementor”

А с Unlimited Elements – решение кто нибудь пробовал?

Спасибо! Можете такие фичи выпускать

Премиум? Или бесплатный элементор?

Бесплатный подойдёт. Просто css стили добавляем в кастомайзере темы)

Спасибо Артем Абрамович. Мне показалось у вас лучше способ чем у wplowers

Стрем уже можно опустится до того как шрифт поменять. ОТСТОЙ.

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

Артём, классное видео, нужные фичи, спасибо за труды. Хотелось бы попросить Вас продолжить обзор и разбор виджетов от Крокоблок, если это входит в ваши планы конечно.

Всегда пожалуйста. Да, есть подобное в планах, но уже в следующем году

с наступающим Вас, Артем! Удачи Вам и здоровья!

Спасибо! И вас с Наступающим!

Думаю, что эффект не добавляют, т.к. он страшненький. Если хотите добить дизайнера, то наверните эти два эффекта))

Это к маркетологам вопросы) Попросили показать способ я показал)

Здравствуйте. Сделайте видео как сделать дочернюю тему Темы Basic. Заранее спасибо.

Вопрос снят, посмотрел ваши предыдущие видео, вы уже это делали, спасибо!

Интересная функция. Спасибо!

Артем, спасибо за полезное видео! Пожалуйста, можете посоветовать как решить следующий вопрос. У меня не работает ссылка на внутреннюю страницу Пользовательского соглашения, которую я сделал в подвале шаблона своего сайта на вордпресс. При этом, ссылка на Политику конфиденциальности работает отлично. Обе ссылки указаны в одном блоке сделанном с помощью Elementor. Ранее ссылка работала, а потом почему-то перестала. Сбился с ног в поисках причины. Пожалуйста, помогите рекомендациями!

Что значит не работает ссылка? Что говорит?

@Финты WordPress при наведении курсора мыши на сайте не появляется рука, которая говорит о том, что это ссылка и не позволяет нажать на политику. Захожу на сайт как пользователь, не как админ.

Это вообще ни о чем не говорит, вот если по клику ничего не работает, тогда да, какая-то трабла.

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

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

Для работы мы будем использовать бесплатную версию плагина Unlimited Elements. С его помощью можно создавать собственные виджеты для Elementor из любого кода, который вы можете найти в интернете.

HTML код будущей кнопки

А это стили CSS

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

Важное исправление

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

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

Кстати, в архиве, который можно скачать в зелёном блоке выше, уже всё исправлено.

Где брать идеи эффектов

Идеи эффектов и сам код я часто ищу на сервисе Codepen. Потрясающее сообщество и платформа для демонстрации кода имеет библиотеку народного творчества, которое изумляет представленными решениями.

Напишите в комментариях какие ещё эффекты вы бы хотели реализовать и поделитесь этой статьёй на страницах в социальных сетях, своих и не только .

Обновления статьи

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

11.12.2019 — Исправлено: одинаковое выравнивание для всех кнопок на странице

Есть сайт про игры, страничка с уровнями

Как сделать так, чтобы и в elementor они были точно такими же.

Пытаюсь добавить в css от elementor не получается

Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.

Посмотрите другие вопросы с метками css wordpress elementor или задайте свой вопрос.

Пример

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

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

Специалисты компании проведут независимое оценивание в сжатые сроки, учтут техническое состояние техники и сопутствующие факторы.

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

Назначаем нужные классы

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

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

Читайте также: