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