Una guía útil para diseñar elementos circulares en Divi


De vez en cuando, el diseño de un sitio web requiere algunos elementos circulares. Es una buena manera de romper con la monotonía de los diseños de cajas estándar en una página web. La creación de elementos circulares puede parecer simple (¡y en realidad lo es!), Pero si no está familiarizado con algunas reglas básicas, puede encontrarse con algunos obstáculos innecesarios que pueden resultar bastante frustrantes.

Por ejemplo, a veces es difícil lograr que el contenido se alinee y encaje dentro de un elemento en forma de círculo con el espacio correcto. O puede resultarle difícil hacer que el círculo responda a los dispositivos móviles. Por esta razón, algunos han recurrido al uso de un fondo de imagen circular para el contenido. Pero si no desea utilizar un fondo de imagen personalizado, su siguiente mejor opción es utilizar CSS. La buena noticia es que Divi elimina la necesidad de crear su propio CSS personalizado para crear elementos circulares, lo que facilita mucho el proceso. Entonces, si alguna vez quisiste darle a un elemento una forma de círculo en Divi, esta es la publicación para ti.

En este tutorial, lo guiaré a través de los conceptos básicos de cómo crear elementos circulares en Divi (incluidas secciones, filas y módulos). Luego, le mostraré lo fácil que es implementar esas técnicas en un diseño prediseñado.

¡Echale un vistazo!

Vistazo

Descargue GRATIS el diseño de elementos circulares de ejemplo

Para poner sus manos sobre los elementos circulares de ejemplo diseñados en este tutorial, primero deberá descargarlos usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, cree una nueva página en Divi. Luego, asigne un título a la página e implemente el generador Divi en la interfaz. Seleccione la opción "construir desde cero".

También agregaremos un diseño prediseñado a nuestra página un poco más tarde, pero por ahora podemos comenzar a construir desde cero.

¡Ahora estás listo para ir!

Los tres pasos básicos para crear un elemento circular

Realmente hay tres pasos simples para crear un elemento circular. Para ilustrar estos pasos, los aplicaré a un módulo de llamada a la acción utilizando Divi Builder.

Paso 1: elemento de tamaño con valores iguales de altura y ancho

El primer paso es establecer la altura y el ancho al mismo valor igual. Básicamente, queremos hacer del elemento un cuadrado perfecto antes de convertirlo en un círculo perfecto. En este ejemplo, démosle al módulo de llamado a la acción una altura y un ancho de 10vw.

elementos circulares divi

Paso 2: agregue un radio de borde del 50% para las cuatro esquinas

El segundo paso es establecer el radio del borde del elemento (o módulo) al 50% en las cuatro esquinas. En Divi, puede cambiar el radio del borde de un elemento en la opción denominada "Esquinas redondeadas".

elementos circulares divi

Paso 3: alinea el contenido dentro del elemento circular

El tercer paso es alinear el contenido del elemento circular. Podemos hacer esto ajustando el relleno del elemento. (Además, cubro una forma de usar flex para centrar verticalmente el contenido más adelante en esta publicación)

En este ejemplo, podemos agregar el siguiente relleno para acercar nuestro contenido al centro del elemento circular:

Acolchado personalizado: 18vw superior, 3vw izquierda, 3vw derecha

elementos circulares divi

Por supuesto, todavía hay ajustes que pueden ser necesarios para asegurarse de que el texto / contenido se ajuste dentro del elemento circular en el móvil, pero esto cubre la configuración básica.

Puede notar que utilicé la unidad de longitud vw para dimensionar y espaciar mi elemento circular. Esto es útil para crear un diseño receptivo más consistente. Lo explicaré.

Uso de unidades de longitud relativa para hacer que los elementos circulares respondan

Usando la unidad de longitud VW para altura y ancho

De todos los unidades de longitud relativa, la unidad de longitud vw es una de mis favoritas para el diseño receptivo. Dado que la unidad de longitud de vw es relativa al ancho de la ventana del navegador (no al elemento principal), puede obtener un diseño consistente que se ajusta sin problemas al tamaño de la ventana del navegador.

Veamos cómo se ve nuestro módulo de llamada a la acción circular de ejemplo cuando reduzco el ancho del navegador.

elementos circulares divi

Uso de la unidad de longitud VW para contenido de elementos circulares

Usar la unidad de longitud de vw para el tamaño y el contenido del elemento circular es una buena combinación para un diseño receptivo. Básicamente, esto permite que el contenido (como texto o imágenes) se ajuste sin problemas con el tamaño del elemento del círculo para un diseño consistente en todos los navegadores. Sin embargo, debe tener cuidado al usar la unidad de longitud vw para el texto del cuerpo porque el texto puede volverse demasiado pequeño en el dispositivo móvil. Me gusta usar la unidad de longitud de vw para los títulos y luego ajustar el tamaño del texto del cuerpo con píxeles según sea necesario.

Además, si planea mantener el diseño del elemento circular en la pantalla del teléfono, deberá mantener su contenido al mínimo y ajustar el tamaño del elemento circular para obtener el máximo espacio.

Usando nuestro ejemplo actual, puede darle al texto del título un valor de longitud de vw y luego cambiar el tamaño del módulo en el dispositivo móvil de la siguiente manera:

Tamaño del texto del título: 4vw
Ancho (teléfono): 70vw
Altura (teléfono: 70vw

elementos circulares divi

Como puede ver, todo el contenido ahora se encuentra bien dentro del elemento circular en la pantalla del teléfono.

¿Y los píxeles?

Si desea usar unidades de longitud absoluta (como píxeles) para dimensionar su círculo, está perfectamente bien. Solo tendrá que asegurarse y hacer los ajustes de tamaño necesarios en cada punto de interrupción para la pantalla de la tableta y el teléfono para asegurarse de que el elemento circular se ajuste dentro de la ventana del navegador. En algunos casos, el uso de píxeles puede ser más fácil para obtener el tamaño correcto (o más exacto) en las pantallas de tabletas y teléfonos.

Por ejemplo, tomemos el mismo módulo de llamado a la acción y usemos píxeles (en lugar de vw) para dimensionar y espaciar nuestro módulo.

Puede actualizar la altura, el ancho y el relleno de la siguiente manera:

Ancho: 500px
Alto: 500px
Relleno personalizado: 200 px arriba, 20 px a la izquierda, 20 px a la derecha

elementos circulares divi

Este diseño se verá similar en el escritorio, pero el problema surge cada vez que ve el elemento circular en la pantalla del teléfono. Dado que el elemento circular tiene un tamaño de píxeles (una unidad de longitud absoluta), el elemento circular se extenderá fuera del contenedor y el navegador en la pantalla del teléfono.

elementos circulares divi

Por eso es importante ajustar el ancho y los valores de píxeles de relleno en las pantallas de los dispositivos móviles. Por ejemplo, es posible que deba cambiar el ancho y el alto a 300 px.

Por qué la unidad de porcentaje de longitud no funciona realmente bien para dimensionar elementos circulares

Si desea una solución más receptiva para elementos circulares, puede pensar que usar porcentajes es la respuesta. Sin embargo, al dimensionar elementos en una página web, la unidad de longitud porcentual para la altura no funciona de la misma manera que la unidad de longitud porcentual para el ancho. Esto se debe a que la altura predeterminada de los elementos generalmente se deja a la predeterminada (altura: auto). Entonces, por ejemplo, si está tratando de configurar dar 100% de altura a un Módulo Divi, el módulo no se ajustará porque los contenedores principales (columna, fila, sección, etc.) tienen todos un valor indefinido para la altura. Básicamente, el navegador no está tratando de configurar el módulo al 100% de nada (lo cual no puede hacer). Este no es el caso del ancho. El ancho predeterminado de cualquier elemento de bloque (o div) es 100%. Por lo tanto, todas las secciones, filas y módulos tienen este ancho predeterminado del 100% a menos que la configuración lo cambie. Es por eso que la unidad de% de longitud no es la mejor opción para usar cuando se intenta construir un elemento circular sensible. El elemento circular debe tener la misma altura y ancho en todos los tamaños de navegador, por lo que es difícil lograr esto usando una unidad de longitud porcentual para la altura. Sin embargo, hay formas de hacer que el 100% de altura y ancho funcione con más CSS personalizado aplicado a los elementos principales. Pero para hacer elementos circulares en Divi, es posible que le resulte más fácil trabajar con la unidad de longitud vw.

Alinear contenido dentro de un elemento circular

Si desea alinear el contenido dentro de un elemento circular, realmente tiene dos opciones que consideraría simples al usar Divi. Puede usar el relleno para alinear el contenido, lo que le brinda más control sobre dónde desea que se muestre el contenido dentro del elemento del círculo. O puede usar la propiedad flex (con relleno) para asegurarse de que el contenido se muestre directamente en el centro del círculo.

Alineación del contenido del elemento circular con relleno

Para alinear el contenido dentro de un elemento circular usando relleno, sugeriría usar una unidad de longitud relativa (como% o vw) para que el relleno aumente o disminuya con el tamaño del contenedor o el ancho del navegador. No desea utilizar unidades de longitud absoluta para rellenar el interior de un elemento circular cuyo tamaño se utilice en unidades relativas. El resultado sería inconsistente y el diseño se rompería en el móvil. Por ejemplo, si tuviera un elemento circular que tuviera una altura de 10vw y un ancho de 10vw. Ese elemento se reduciría de tamaño a medida que el navegador se reduzca de ancho. Si agregó un relleno de 100 px en la parte superior del elemento, los 100 px permanecerán siempre que ajuste el ancho del navegador y rompa el diseño. Sin embargo, si agrega un relleno de 3vw, este relleno se ajustará bien con el elemento.

Es por eso que sugerí usar el relleno de vw en nuestro ejemplo del módulo de llamada a la acción.

elementos circulares divi

Alineación del contenido del elemento circular con la propiedad Flex

Si no quiere preocuparse tanto por colocar el relleno superior e inferior en su lugar para asegurarse de que el contenido esté centrado verticalmente, puede usar la propiedad flexible. Al agregar algunos fragmentos de CSS al elemento principal (elemento circular), puede asegurarse de que todo el contenido permanezca centrado verticalmente. Luego, puede usar alineación, relleno o margen para asegurarse de que el contenido también permanezca centrado horizontalmente.

Esto es lo que quiero decir.

Usando nuestro ejemplo, abra la configuración del módulo de llamada a la acción.

Luego, establezca el relleno superior e inferior en 0px.

Luego, vaya a la pestaña avanzada y agregue el siguiente fragmento de CSS al elemento principal:

display:flex;
align-items: center;

Para este módulo en particular, hay un relleno adicional debajo de la descripción de la promoción que alterará un poco la alineación. Para que pueda deshacerse de él agregando el siguiente CSS a la Descripción de la promoción:

padding-bottom: 0px

elementos circulares divi

Mira esta publicación en cómo alinear verticalmente el contenido para más información.

Ponerlo en práctica: agregar elementos circulares a un diseño prefabricado

Ahora que comprende mejor cómo crear elementos circulares en Divi, veamos cómo podría funcionar esto en un diseño de diseño real. Para este ejemplo, voy a utilizar la página de destino de agricultores de Divi de la Paquete de diseño de granjero.

Cargue el diseño de la página de destino del agricultor en su página

Para comenzar, primero agreguemos el diseño de la página de destino del agricultor a la página. Para hacer esto, abra el menú de configuración y la parte inferior de Divi Builder y haga clic en el botón cargar desde la biblioteca. En la ventana emergente Load from Library, busque el Farmer Layout Pack y selecciónelo. Luego haga clic para usar la página de destino del agricultor.

elementos circulares divi

Esto cargará el diseño en la página.

Hacer un encabezado de sección circular

Para el primer ejemplo, vamos a convertir la sección de encabezado superior del diseño en un elemento circular. Para hacer esto usaremos nuestras tres reglas básicas:

1: elemento de tamaño con valores iguales de altura y ancho
2: agregue un radio de borde del 50% para las cuatro esquinas
3: alinear contenido dentro del elemento circular

Abra la configuración de la sección y actualice lo siguiente:

Ancho: 70vw (escritorio), 70vw (tableta), 80vw (teléfono)
Ancho máximo: 1080px
Alineación de la sección: centro
Altura: 70vw (escritorio), 70vw (tableta), 80vw (teléfono)
Altura máxima: 1080px

Tenga en cuenta que agregué valores adicionales de altura y ancho para la tableta y el teléfono, además de que agregué una altura máxima y un ancho máximo también. Lo importante es que se asegure de que todos los valores de altura y todos los valores de ancho sean iguales.

elementos circulares divi

Ahora debemos agregar nuestro radio de borde del 50% en las cuatro esquinas.

Esquinas redondeadas: 50% (las cuatro esquinas)

elementos circulares divi

Dado que se trata de una sección, el contenido incluye una fila de dos columnas con varios módulos. Con tanto contenido, necesitamos hacer algunos ajustes de tamaño en los módulos para asegurarnos de que el contenido se ajuste a la sección.

Primero, abra la configuración del módulo de texto superior en la columna 1 que contiene el título de la sección. Luego actualice el tamaño del texto del título de la siguiente manera:

encabezado Tamaño del texto: 4vw

elementos circulares divi

Luego, disminuya la cantidad de texto del cuerpo en el módulo de texto directamente debajo del módulo de texto que contiene el encabezado.

elementos circulares divi

Ahora podemos alinear el contenido ajustando el espaciado de la fila. Abra la configuración de la fila y actualice lo siguiente:

Margen personalizado: 10vw superior (escritorio), 5vw (tableta), 0vw (teléfono)
Acolchado personalizado: 3vw a la izquierda, 3vw a la derecha

elementos circulares divi

Para que la forma del círculo sea más notoria, podemos agregar un divisor de la sección superior y mover la posición de la imagen de fondo a la parte superior izquierda.

elementos circulares divi

Ahora veamos el resultado.

elementos circulares divi

elementos circulares divi

elementos circulares divi

Hacer módulos de propaganda circular

Ahora, intentemos hacer algunos borrones circulares en este diseño. Para este ejemplo, usemos los cuatro módulos de propaganda en la sección titulada "Nuestros productos". Una vez que lo encuentre, abra la configuración del módulo de propaganda en la parte superior de la columna 2.

Luego actualice el tamaño del módulo de la siguiente manera:

Ancho de la imagen: 7vw
Ancho: 50vw (escritorio), 80vw (teléfono)
Ancho máximo: 400px
Alineación del módulo: centro
Altura: 50vw (escritorio), 80vw (teléfono)
Altura máxima: 400 px

elementos circulares divi

A continuación, agregue el radio del borde o las esquinas redondeadas:

Esquinas redondeadas: 50%

elementos circulares divi

Después de eso, actualice el diseño del contenido y el espaciado de la siguiente manera:

Ubicación de la imagen / icono: Arriba
Tamaño del texto del título: 2vw (escritorio), 20px (tableta)
Orientación del texto: centro

elementos circulares divi

Relleno personalizado: 0vw arriba, 0vw abajo, 4vw izquierda, 4vw derecha

elementos circulares divi

Finalmente, alineemos verticalmente el contenido usando la propiedad flex agregando el siguiente CSS personalizado al elemento principal:

display: flex;
align-items: center;

elementos circulares divi

Extienda el estilo circular a todos los desenfoques de la sección

Eso se encarga del diseño circular de nuestro primer módulo. Ahora todo lo que tenemos que hacer es extender la configuración de diseño del módulo de propaganda a los tres anuncios restantes en la sección. Para hacer esto, haga clic derecho en el módulo de propaganda que acabamos de diseñar y seleccione “Extender estilos de propaganda”. En la ventana emergente Extender estilos, seleccione extender el estilo a lo largo de la sección.

elementos circulares divi

Resultado final

Ahora veamos el resultado final.

elementos circulares divi

elementos circulares divi

Pensamientos finales

Espero que hayas aprendido algunos consejos útiles sobre cómo crear elementos circulares en Divi. Al comprender tres pasos básicos y cómo usar correctamente las unidades de longitud para dimensionar y espaciar su elemento, puede crear el diseño circular que está buscando con bastante facilidad. Y puede ser muy divertido incorporar algunos elementos circulares en un diseño Divi existente o prefabricado. ¡No dude en explorar la creación de módulos circulares, filas o incluso secciones enteras!

Espero tener noticias tuyas en los comentarios.

¡Salud!