Tutorial Divi: Convertir cualquier enlace en un botón de Divi

Uno de los elementos que creo más gustan a todo usuario de Divi, y a los visitantes de las webs creadas con Divi, son los botones animados de acción, son limpios, claros y bien diseñados, y de verdad incitan a la acción, que es lo que deben hacer.

Es por ello que cualquier usuario de Divi en alguna ocasión ha pensado eso de “¿Cómo pondría yo un botón de estos en una página normal que no esté maquetada con Divi?

Y sí, si tienes Divi, o el constructor Divi, instalado, puedes convertir cualquier enlace de una entrada o página en un bonito botón estilo Divi.

Vamos a ver los 2 pasos requeridos.

Tienes que tener Divi instalado

Vaya por delante dejar claro que este tutorial es para usar los botones animados de Divi en cualquier parte, pero que tengas claro que Divi tiene que estar instalado, el tema o el plugin, por poco que lo uses.

Un poquito de CSS por favor

En este ejemplo daremos un poco de estilo a un botón animado estilo Divi con el texto y borde en rojo, y fondo transparente (lo siento, me pirran los fondos transparentes).

Lógicamente, adapta los colores y demás a tu diseño como gustes.

En el mismo código te señalo dónde cambiar los colorines.

Simplemente añade el código en tu administración de WordPress > Apariencia > Personalizar > CSS adicional. Publica los cambios, no se te olvide.

Crea el enlace con “clase”

Ya solo nos queda añadir algo de “clase” a tu enlace, para que luego se convierta en un botón.

Para ello, en tu entrada o página, añade el enlace que quieras.

Si pasas a la pestaña HTML del editor verás el enlace generado.

Pues bien, lo único que nos queda por hacer es aplicarle al enlace la clase que creamos anteriormente. Puedes hacerlo manualmente editando el enlace, para añadir lo siguiente:

Con lo que quedaría así:

¡Y ya está!

Ahora tu enlace se verá mucho más mono, como cualquier botón de Divi pero con tus colores personalizados.

Enlace como botón Divi (inactivo)

Enlace como botón Divi (hover)

VALORA ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
FlojitoNo está malEstá bienMe ha servidoFantástico (3 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas, si ya estás suscrito a nuestra newsletter, para reconocer el estado de tu sesión si la tuvieses y para servir más rápidos los contenidos.

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

JSESSIONID, _cfuid, wpSGCachePypass, mailerlite, gdpr, gawp
mailerlite, _cfuid

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID, disqus_unique, disqusauth
disqus_unique, disqusauth
1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID

Pin It on Pinterest

Share This
Ir al contenido