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.

/* CSS para crear un botón divi muy mono */
 
    .boton-blanco {
            font-size: 20px;
            font-weight: 500;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            padding: 8px 20px;
            line-height: 1.7em;
            background: transparent;
            border: 2px solid;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            -moz-transition: all 0.2s;
            -webkit-transition: all 0.2s;
            transition: all 0.2s;
            position: relative;}
    a.boton-blanco {
        background-color: transparent;
            border: 2px solid #8e3737; /* cambia aquí el color del borde */
            color: #8e3737!important; /* cambia aquí el color del texto */
        font-weight: bold;}
    a.boton-blanco:hover {
        background: transparent;
            border: 2px solid #8e3737; /* cambia aquí el color del borde al pasar el cursor */
            padding: 8px 34px 8px 14px !important;}
    a.boton-blanco:after {
        font-family: 'ETmodules';
            font-size: 32px;
            opacity: 0;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: 32px;
            line-height: 1em;
            content: "\35";
            position: absolute;
            margin-left: -1em;
            -moz-transition: all 0.2s;
            -webkit-transition: all 0.2s;
            transition: all 0.2s;}
    a.boton-blanco:hover:after {
        opacity:1;
        display: block!important;
            font-family: 'ETmodules';
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            right: 0px;
            top: 5px;
        margin-left: 0;}

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:

class="boton-blanco"

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)

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 5 / 5. Total de votos: 3

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)

Sobre el autor

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba
Ir al contenido