La mayoría de los enlaces de texto hacen una cosa al pasar el cursor: cambiar de color. El Widget de enlaces creativos de Elementor from Master Addons te ofrece mucho más con qué jugar, corchetes que se deslizan alrededor de las palabras, un relleno que recorre el texto, un giro 3D y una docena de otros efectos flotantes que puedes colocar en cualquier enlace sin abrir un archivo CSS.
A continuación, agregaremos el widget, revisaremos todos los controles de contenido, cubriremos las opciones de estilo y ejecutaremos la lista de efectos. Las capturas de pantalla del editor vienen con cada paso. Primero, aquí es donde se encuentra el widget en el panel.
Qué hace el widget Creative Links #
Toma un enlace en línea simple y lo hace moverse. El Widget de botones creativos diseña un botón sólido y acolchado. Creative Links es la versión de enlace de texto: “Leer más”, un llamado a la acción estilo navegación o una sola frase que quieras destacar dentro de una oración. La animación se activa al pasar el cursor y la eliges entre un menú desplegable.
También obtienes un ícono opcional, una etiqueta alternativa que revelan algunos efectos, controles de alineación y una pestaña Estilo con tipografía, borde y un conjunto de opciones de color creadas alrededor de las animaciones de enlace. Está en la colección gratuita de Master Addons, por lo que se ejecuta en cualquier sitio de Elementor. El completo widgets y extensiones la lista tiene el resto.
¿Prefieres verlo antes de leer cada configuración? Aquí está el widget en acción.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en ello? Comience con el guía de instalación.
- Una página o plantilla abierta en el editor Elementor.
Cómo agregar el widget Enlaces creativos #
Esta parte es rápida:
- Abra una página con Elementor y haga clic en el icono del panel de widgets (la cuadrícula) en la parte superior izquierda.
- Tipo Enlaces creativos en el cuadro de búsqueda, o desplácese hacia abajo hasta Complementos maestros categoría.
- Arrastra el Enlaces creativos widget en el lienzo.
Aterriza con el texto del marcador de posición “Haga clic aquí”, listo para que lo edite.
Se explican los ajustes del contenido #
Seleccione el enlace y abra el Contenido pestaña. Aquí es donde configura el texto, el efecto y donde apunta el enlace.
Efectos #
El Efectos dropdown es la razón principal para utilizar este widget. Elija uno y el enlace se animará al pasar el cursor. La lista supera las 20 opciones:
Soportes, efecto 3D, deslizamiento de línea inferior, ampliación del borde inferior, deslizamiento hacia adentro, deslizamiento del borde hacia abajo, segundo borde deslizable hacia arriba, traducción del borde, segundo texto y borde, revelación de empuje hacia afuera, relleno de texto, círculo, tres puntos, interruptor de borde, escala hacia abajo, Caer hacia abajo, Mover hacia arriba, Cruzar, Deslizamiento 3D, Deslizamiento 3D hacia abajo y un par más.
Los nombres no revelan mucho, así que coloque el enlace en la vista previa en vivo para ver qué hace cada uno. Los corchetes y el relleno de texto funcionan bien en la copia corporal. Las opciones 3D son encabezados más ruidosos y ajustados o un enlace de héroe.
Alineación de elementos, alineación de enlaces y alineación de texto posterior #
Alineación de elementos posiciona todo el widget (izquierda, centro, derecha). Alineación de enlaces y Alineación de texto posterior maneja el texto del enlace y la etiqueta alternativa que aportan algunos efectos. Los tres responden, por lo que puedes configurarlos por dispositivo con el interruptor.
Texto de enlace y texto de enlace alternativo #
El Texto del enlace es la etiqueta visible, diga “Haga clic aquí”. El Texto de enlace alternativo (“¡Vamos!” en las capturas de pantalla) es la segunda etiqueta que intercambia los efectos que revelan uno. Mantenlo corto, ya que solo obtiene el espacio que deja la animación.
Espacio entre iconos y iconos #
Puede colocar un ícono al lado del texto y luego establecer el espacio con Espaciado de iconos. Master Addons incluye ocho premium bibliotecas iconos, entonces hay mucho para elegir dentro de Elementor.
Url del enlace #
Deja el destino en Url del enlace. El ícono de equipo al lado contiene las opciones habituales: abrir en una pestaña nueva, agregar nofollow. Para obtener un enlace en el sitio, pegue cualquier página de su propio sitio.
Se explicaron las configuraciones de estilo #
Cambiar al Estilo pestaña y abre Estilos de enlace. Así es como se ve el enlace antes y después de la animación.
- Ancho y Tamaño del icono: dimensiona el cuadro de enlace y el icono por sí solos.
- Tipografía: familia de fuentes, tamaño, peso y espacio entre letras para la etiqueta.
- Acolchado de enlaces: espaciado dentro del área de enlace. También da espacio para animar algunos efectos.
- Tipo de borde, ancho, color y radio: muchos efectos se desplazan sobre una frontera (Brackets, Border Slide Down y el resto), por lo que aquí cuentan más que en un enlace normal.
- Sombra de caja: profundidad en el cuadro de enlace si lo deseas.
Colores normales y flotantes #
Los controles de color se dividen en Normal y Flotar estados. Junto a lo habitual Color del texto y Color de fondo, vei vedea Color frontal BG, Antes del color BG, y Después del color BG. Esas capas adicionales son entre las que se animan los efectos de diapositiva y relleno, así que configúrelas cuando desee controlar el color que muestra la animación media.
Ver un efecto en acción #
Aquí está el efecto Brackets en el lienzo. Pase el cursor sobre el enlace y un soporte se desliza hacia cada lado, por lo que “Haga clic aquí” se lee como “[Haga clic aquí]”. Cada efecto se comporta así en la vista previa en vivo, lo que facilita probar algunos antes de comprometerse.
Consejos para utilizar enlaces creativos #
- Haga coincidir el efecto con el punto. Los sutiles como el relleno de texto o la diapositiva de referencia se encuentran bien en los párrafos. Guarde 3D Slide and Cross para encabezados y áreas de héroe.
- Mira los colores de BG. Los fondos Front, Before y After pueden borrar el texto a mitad de la animación, así que verifique que el enlace siga siendo legible durante todo el efecto.
- Mantenga breve la etiqueta alternativa. Un texto de enlace alternativo largo se estrecha en el espacio que deja la animación.
- No olvides el tacto. Hover no se dispara en un teléfono, por lo que el estado de reposo debe verse terminado por sí solo.
¿Necesitas un botón completo en lugar de un enlace de texto? Ese es el Widget de botones creativos. ¿Quieres un título, una descripción y un botón juntos? Mira el Widget de llamada a la acción.
Preguntas frecuentes #
¿qué es el widget Elementor Creative Links?
Es un widget de complementos maestros que agrega enlaces de texto animados a Elementor. En lugar de un cambio de color simple, los enlaces obtienen efectos flotantes como Brackets, Text Fill, Circle y 3D Slide, todo configurado desde un menú desplegable sin CSS personalizado.
¿cuántos efectos de enlace se incluyen?
El widget incluye más de 20 efectos, incluidos corchetes, efecto 3D, diapositiva de línea inferior, diapositiva, relleno de texto, círculo, tres puntos, interruptor de borde, cruz y diapositiva 3D. Obtienes una vista previa de cada uno en vivo en el editor Elementor antes de publicarlo.
¿el widget Creative Links es gratuito?
Sí. Creative Links es parte del complemento gratuito Master Addons for Elementor. Los planes profesionales agregan más widgets y extensiones. Ver el página de precios para la comparación completa.
¿cuál es la diferencia entre enlaces creativos y botones creativos?
Creative Links anima enlaces de texto en línea, como “Leer más” o una frase en una oración. Creative Buttons diseña un botón sólido y acolchado. Elija enlaces para llamadas a la acción de estilo texto y botones para llamadas de estilo bloque.
¿funcionan los efectos de desplazamiento del enlace en dispositivos móviles?
Los efectos flotantes necesitan un mouse, por lo que no se activan en las pantallas táctiles. Diseñe el estado de reposo para que parezca completo y el enlace aún funciona y se lee bien en teléfonos y tabletas.
Envolviendo #
El widget Elementor Creative Links le da a sus enlaces de texto un movimiento real: más de 20 efectos flotantes, un ícono y controles de color sintonizados con las animaciones, ninguno de los cuales requiere código. Elige un efecto, configura los colores y tus enlaces dejan de estar ahí. Desde aquí, el resto del Biblioteca de widgets de complementos maestros vale la pena echarle un vistazo.
