Los botones son uno de los elementos básicos de cualquier diseño web. Nos permiten llamar la atención del usuario y dirigirle a aquella página o sección web que nos interese. Por ello, saber diseñarlos y utilizarlos adecuadamente puede influir de manera positiva en la capacidad de nuestro sitio para retener al usuario.

En el post de hoy, hablaremos de cómo diseñar botones originales con Divi. Os mostraremos diferentes estilos para que, de este modo, podáis crear vistosos CTA que inviten a hacer clic.

¿Te gustaría aprender a crear botones con Divi? ¡Quédate porque empezamos!

Cómo diseñar botones originales con Divi

Antes de empezar, es importante destacar que deberás disponer del maquetador visual «Divi Builder» para poder seguir los pasos que detallaremos a continuación.

*Puedes descargar aquí la plantilla Divi

¡Vamos a ello!

¿Cómo personalizar botones con Divi?

Divi Builder es un constructor visual muy versátil y fácil de usar, que nos ofrece infinidad de opciones para personalizar los botones de nuestra web.

Si tienes la herramienta pero todavía no sabes usarla a fondo, no te preocupes, aquí aprenderás a hacerlo rápidamente.

En primer lugar, deberás acceder a la página o sección web en la que quieras insertar el botón.

Una vez dentro, abre el constructor visual de Divi y escoge el módulo «botón» para insertarlo en la fila o columna que desees.

Una vez hecho esto, podrás empezar a personalizar tus botones asignándoles un fondo, un tipo de letra, un borde, etc.

A la hora de crear un botón nos encontramos con una ventana que dispone de 3 pestañas principales: Contenido, diseño y avanzado.

En el post de hoy nos centraremos en las dos primeras pestañas que son, básicamente, las que necesitarás dominar para diseñar botones originales con Divi.

Pestaña contenido

En esta sección deberás especificar qué contenido textual tendrá en botón y hacia dónde quieres que dirija dicho botón. Es decir, deberás escribir el texto del botón y asignar la URL de destino, por ejemplo:

• En la pestaña texto, escribe el texto del botón: ¡Compra mi e-book!
• En la pestaña enlace, introduce la URL de destino: www.mipaginaweb.com/compra-mi-ebook

Pestaña diseño

En esta sección es donde podremos personalizar al máximo nuestros botones. Encontraremos muchas pestañas y opciones para conseguirlo:

• Alineación: Nos permite alinear el botón a la izquierda, al centro o a la derecha.
• Texto: Te permite asignarle el perfil claro u oscuro al texto del botón pero, en nuestro caso, vamos a personalizarlo totalmente, por lo que no usaremos esta pestaña.
• Botón: En este apartado deberás activar la opción usar estilos personalizados y se te desplegarán un sinfín de opciones de personalización. Aquí podrás asignarle el color al texto del botón, establecer el color de fondo, la tipografía, su tamaño y un montón de características más.
• Separación: Nos permite añadir márgenes alrededor del botón (para separarlo de otros módulos) y relleno interior, si queremos que haya cierto espacio entre el texto y el borde del botón.
• Sombra de la caja: Te permite agregarle diferentes estilos de sombra al botón.
• Transformar: En esta opción podrás escalar el tamaño del botón y hacerlo más grande o más pequeño.
• Animación: Te permitirá agregarle una animación al botón: hacer que aparezca en pantalla de una forma u otra.

* Dentro de «botón background» y «botón color del texto» podrás establecer el color que tomará el fondo y el texto del botón cuando pasemos el ratón sobre él. Para personalizar esta función, deberás hacer clic sobre el símbolo de la flechita del ratón y en el apartado «flotar» establecer los colores que desees.

Ejemplos de diseños de botones con Divi

Bien, ahora que ya conocemos las funciones y sabemos cómo crear botones en el constructor, vamos a ver unos cuantos ejemplos de diseños originales de botones con Divi que podrías aplicar a tu página web:

→ Botón cuadrado estándar:

Para hacer un botón cuadrado estándar deberás, en el apartado botón, buscar la opción: «Botón radio frontera» y asignarle el valor cero. De esta forma, el botón será completamente cuadrado.

→ Botón redondo:

En caso de querer un botón redondeado, tendremos que asignar en «Botón radio frontera» un valor superior a cero. Cuanto mayor sea el valor, más redondeados serán los bordes. Este botón es ideal para sitios web que trabajen con diseños y formas redondeadas.

→ Botón con degradado de fondo:

Si quieres diseñar botones originales, los fondos degradados son una muy buena opción. Para que tu botón tenga un gradiente de fondo, deberás ir al apartado botón y en «botón background» seleccionar la opción de gradiente. A continuación, podrás escoger los dos tonos principales del degradado.

→ Botón con sombra:

Otra opción para darle un toque original y diferente a tus botones en la plantilla Divi, es asignarles una sombra. De esta forma, podrás hacerlos destacar sobre el fondo y darles relieve. Para conseguir este efecto, tendrás que dirigirte al apartado «sombra de la caja» y escoger entre los distintos sombreados disponibles. Luego, podrás personalizar las opciones y hacerlo más a tu gusto.

Conclusión: ¿Es fácil crear botones con Divi?

Como hemos podido ver a lo largo de todo el post, crear y personalizar con Divi es muy fácil. Solamente deberás conocer las opciones disponibles e ir probándolas para conseguir el resultado que desees.

Las posibilidades son infinitas, ya que el maquetador nos ofrece un montón de opciones de personalización.

Esperamos que hayas encontrado útil este post y que puedas poner en práctica algunos de los ejemplos de diseños de botones. Estamos seguros de que, con esta guía, diseñar botones originales con Divi será coser y cantar.

Además de este módulo botón de Divi, en el blog puedes aprender a manejar el resto de módulos de Divi 😉