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)
VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(3 votos, promedio: 5)

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido