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 desde 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 (Pro) y 22 efectos flotantes en total que puedes soltar 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 el complemento gratuito Master Addons con 10 efectos, y Master Addons Pro desbloquea los otros 12. 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 única para utilizar este widget. Elija uno y el enlace se animará al pasar el cursor. La lista tiene 22 opciones. Diez son gratis y doce necesitan Pro:
Gratis: Soportes, Diapositiva de línea inferior, Ampliación del borde inferior, Diapositiva del segundo borde hacia arriba, Relleno de texto, Tres puntos, Escala hacia abajo, Movimiento hacia arriba, Efecto 21 y Efecto 22.
Pro: Efecto 3D, deslizarse hacia adentro, borde deslizarse hacia abajo, traducción de borde, segundo texto y borde, revelar empujar hacia afuera, circular, interruptor de borde, caer, cruzar, deslizamiento 3D y deslizamiento 3D hacia abajo.
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 (Pro) 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 se intercambia en Reveal Push Out, Move Up, Cross, 3D Slide y 3D Slide Down. 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: un borde alrededor del cuadro de enlace. Las líneas móviles en efectos como Bottom Line Slide provienen de los colores BG Antes y Después, no de este borde.
- 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 Text Fill o Bottom Line Slide se encuentran bien en los párrafos. Guarde 3D Slide y Cross (ambos Pro) 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 de desplazamiento como Brackets, Text Fill y (con Pro) Circle y 3D Slide, todo configurado desde un menú desplegable sin CSS personalizado.
¿cuántos efectos de enlace se incluyen?
El widget tiene 22 efectos. Diez son gratuitos, incluidos Brackets, Bottom Line Slide, Text Fill, Three Dots y Move Up. Doce necesitan Pro, incluidos 3D Effect, Slide In, Circle, Border Switch, Cross y 3D Slide. Obtienes una vista previa de cada uno en vivo en el editor Elementor antes de publicar.
¿el widget Creative Links es gratuito?
Sí. Creative Links es parte del complemento gratuito Master Addons for Elementor con 10 efectos. Master Addons Pro agrega los otros 12 efectos. 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 de enlaces creativos de Elementor proporciona movimiento a tus enlaces de texto: 22 efectos flotantes (10 gratis), un ícono y controles de color para las capas de animación, sin código. Elige un efecto, establece los colores y tus enlaces dejarán de estar ahí. Desde aquí, el resto del Biblioteca de widgets de complementos maestros vale la pena echarle un vistazo.
