Большинство текстовых ссылок делают одно на hover: меняют цвет.The Виджет Elementor Creative Links от Master Addons дает вам гораздо больше, чтобы играть с: скобки, которые скользят вокруг слов, заливка, которая проходит по тексту, 3D-флип (Pro), и 22 hover эффекты в общей сложности вы можете опустить на любую ссылку, не открывая CSS файл.
Ниже добавим виджет, пройдемся по каждому элементу управления Контентом, накроем параметры Стиль и запустим список эффектов.С каждым шагом идут скриншоты из редактора. во-первых, вот где виджет находится на панели.
Что делает виджет Creative Links #
Он берет простой встроенный канал и заставляет его двигаться. The Виджет "Креативные кнопки" стили сплошная, мягкая кнопка.Creative Links - это версия текстовой ссылки: “Читать больше”, призыв к действию в стиле nav или одна фраза, которую вы хотите выделить внутри предложения. анимация срабатывает при наведении, и вы выбираете ее из одного раскрывающегося списка.
Вы также получаете опциональный значок, альтернативную метку, которую раскрывают некоторые эффекты, элементы управления выравниванием и вкладку Стиль с типографикой, рамкой и набором цветовых параметров, построенных вокруг анимации ссылок. Это в бесплатном плагине Master Addons с 10 эффектами, а Master Addons Pro разблокирует остальные 12.The full виджеты и расширения у списка есть остальное.
Скорее увидеть перед чтением каждой настройки Вот виджет в действии.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новый к этому? Начните с руководство установки.
- Страница или шаблон, открытые в редакторе Elementor.
Как добавить виджет Creative Links #
Эта часть быстрая:
- Откройте страницу с помощью Elementor и щелкните значок панели виджетов (сетку) в левом верхнем углу.
- Тип Креативные ссылки в поле поиска или прокрутите вниз до Мастер Аддоны категория.
- Перетащите Креативные ссылки виджет на холст.
Он приземляется с заполнителем “Click Here” текст, готовый для вас редактировать.
Объяснены настройки контента #
Выберите ссылку и откройте Содержание вкладка. Здесь вы устанавливаете текст, эффект и точки ссылки.
Эффекты #
The Эффекты выпадающий является всей причиной использования этого виджета.Выберите один и ссылка оживляет на hover. список имеет 22 опции. десять бесплатны и двенадцать нужно Pro:
Бесплатно: Кронштейны, скольжение нижней линии, увеличение нижней границы, скольжение вверх по второй границе, текстовая заливка, три точки, масштабирование вниз, перемещение вверх, эффект 21 и эффект 22.
Про: 3D-эффект, слайд-вход, сдвиг границы вниз, перевод границы, 2-й текст и граница, раскрытие выталкивания, круг, пограничный переключатель, падение вниз, крест, 3D слайд, и 3D сползание вниз.
Имена не дают много, поэтому наведите ссылку в живом предварительном просмотре, чтобы увидеть, что делает каждый. скобки и текстовая заливка хорошо работают в боди-копии. 3D-опции (Pro) громче и подходят заголовки или ссылка героя.
Выравнивание элементов, выравнивание ссылок и выравнивание текста сзади #
Выравнивание предметов размещает весь виджет (слева, в центре, справа). Выравнивание ссылок и Выравнивание текста сзади обработайте текст ссылки и альтернативную метку, которую приносят некоторые эффекты. все три являются отзывчивыми, поэтому вы можете установить их для каждого устройства с помощью переключателя.
Текст ссылки и текст альтернативной ссылки #
The Текст ссылки является видимой меткой, скажем “Click Here”.The Альтернативный текст ссылки (“Go!” в скриншотах) - вторая метка, которая меняется на Reveal Push Out, Move Up, Cross, 3D Slide и 3D Slide Down. Держите его коротким, так как он получает только то пространство, которое анимация оставляет после себя.
Пространство значков и значков #
Вы можете разместить значок рядом с текстом, а затем установить пробел с Размещение значков. Основные дополнения включают восемь премиум-классов библиотеки значковтак что есть что выбрать прямо изнутри Элементора.
URL-адрес ссылки #
Опустите пункт назначения URL-адрес ссылки. Значок шестеренки рядом с ним содержит обычные параметры: открыть на новой вкладке, добавить nofollow. для ссылки на сайте вставьте любую страницу с вашего собственного сайта.
Объяснены настройки стиля #
Переключиться на Стиль вкладка и открыть Стили ссылок. Вот как выглядит ссылка до и после анимации.
- Ширина и Размер значка: размер поля ссылки и значка отдельно.
- Типографика: семейство шрифтов, размер, вес и расстояние между буквами для этикетки.
- Набивка ссылок: расстояние внутри области ссылки. Это также дает некоторые эффекты пространство для анимации.
- Тип границы, ширина, цвет и радиус: граница вокруг коробки ссылок. движущиеся линии в эффектах, как Слайд нижней линии приходят от цветов до и после BG, а не от этой границы.
- Коробка Тень: глубина в поле ссылки, если хотите.
Нормальные цвета и цвета Hover #
Цветовые элементы управления разделены на Нормальный и Наведите курсор государства. Наряду с обычным Цвет текста и Цвет фона, вот увидите Передняя BG Цвет, Перед BG Colorи После BG Color. Эти дополнительные слои - это то, что оживляют эффекты скольжения и заполнения, поэтому установите их, когда хотите контролировать цвет, показывающий среднюю анимацию.
Видеть эффект в действии #
Вот эффект Кронштейнов на холсте Наведите ссылку и скобка скользит в каждой стороне, так “Click Here” читается как “[Нажмите здесь]”.Каждый эффект ведет себя так в живом предварительном просмотре, что позволяет легко попробовать несколько, прежде чем вы обязуетесь.
Советы по использованию Creative Links #
- Сопоставьте эффект с точностью. Тонкие, как Заполнение текста или Слайд нижней линии хорошо сидят в параграфах Сохранить 3D Слайд и крест (оба Pro) для заголовков и областей героев.
- Смотрите цвета BG. Фон "Перед", "До" и "После" может смыть ваш текст в середине анимации, поэтому проверьте, что ссылка остается читаемой на протяжении всего эффекта.
- Держите альтернативную этикетку короткой. Длинный текст альтернативной ссылки становится тесным в пространстве, которое оставляет анимация.
- Не забывайте прикосновения. Наведение курсора на телефон не срабатывает, поэтому покоящемуся состоянию приходится выглядеть законченным самостоятельно.
Нужна полная сплошная кнопка вместо текстовой ссылки, Это Виджет "Креативные кнопки". Хотите заголовок, описание и кнопку вместе? Посмотрите на Виджет "Призыв к действию".
Часто задаваемые вопросы #
Что такое виджет Elementor Creative Links?
Это виджет Master Addons, который добавляет анимированные текстовые ссылки на Elementor. Вместо простого изменения цвета ссылки получают эффекты наведения, такие как скобки, текстовая заливка и (с Pro) круг и 3D слайд, все они установлены из раскрывающегося списка без пользовательского CSS.
Сколько эффектов ссылок включено?
Виджет имеет 22 эффекта Десять бесплатны, включая скобки, слайд нижней линии, текстовую заливку, три точки и движение вверх. Двенадцати нужен Pro, включая 3D-эффект, слайд-вход, круг, пограничный переключатель, крест и 3D-слайд. вы предварительно просматриваете каждый из них в прямом эфире в редакторе Elementor перед публикацией.
Виджет Creative Links бесплатен?
Да. Creative Links является частью бесплатного плагина Master Addons for Elementor с 10 эффектами. Master Addons Pro добавляет другие 12 эффектов. см страница ценообразования для полного сравнения.
В чем разница между Creative Links и Creative Buttons?
Creative Links анимирует встроенные текстовые ссылки, например “Читать далее” или фразу в предложении. Creative Buttons стилизует надежную мягкую кнопку. Выберите ссылки для текстовых призывов к действию и кнопки для блочных.
Работают ли эффекты наведения ссылки на мобильных устройствах?
Эффектам наведения на действие нужна мышь, поэтому они не срабатывают на сенсорных экранах. спроектируйте состояние покоя так, чтобы оно выглядело полным, и ссылка по-прежнему хорошо работает и читается на телефонах и планшетах.
Завершая #
The Виджет Elementor Creative Links дает ваш текст ссылки движение: 22 hover эффекты (10 бесплатно), значок, и управление цветом для слоев анимации, без кода. выбрать эффект, установить цвета, и ваши ссылки перестают просто сидеть там.Отсюда, остальные из Библиотека виджетов Master Addgets стоит посмотреть.
