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

Vistazo

Descargue el diseño de elementos circulares de ejemplo GRATIS

Para poner sus manos en los elementos circulares de ejemplo diseñados en este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» 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 a Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, crea una nueva página en Divi. Luego, asigne un título a su página e implemente el constructor Divi en la parte delantera. Seleccione la opción «construir desde cero».

También agregaremos un diseño prefabricado 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, voy a aplicar estos pasos a un módulo de llamada a la acción utilizando Divi Builder.

Paso 1: Elemento de tamaño con valores iguales de alto y ancho

El primer paso es establecer la altura y el ancho en el mismo valor. Básicamente, queremos que el elemento sea un cuadrado perfecto antes de convertirlo en un círculo perfecto. En este ejemplo, vamos a darle al módulo de llamada a la acción una altura y un ancho de 10vw.

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».

Paso 3: alinee 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 arriba, 3vw izquierda, 3vw derecha

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

Puede notar que usé 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

Uso de la unidad de longitud VW para altura y anchura

De todas las 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 vw es relativa al ancho de la ventana del navegador (no al elemento principal), puede obtener un diseño coherente que se ajuste sin problemas al tamaño de la ventana del navegador.

Echemos un vistazo a cómo se ve nuestro módulo de llamada a la acción circular de ejemplo a medida que reduzco el ancho del navegador.

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

El uso de la unidad de longitud vw para el tamaño y el contenido de los elementos circulares es una buena combinación para el diseño receptivo. Básicamente, esto permite que el contenido (como texto o imágenes) se ajuste a la perfección con el tamaño del elemento circular para lograr un diseño uniforme en todos los navegadores. Sin embargo, debe tener cuidado al usar la unidad de longitud vw para el cuerpo del texto porque el texto puede volverse demasiado pequeño en el móvil. Me gusta usar la unidad de longitud vw para los encabezados y luego ajustar el tamaño del cuerpo del texto 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 a su texto de título un valor de longitud vw y luego cambiar el tamaño del módulo en el móvil de la siguiente manera:

Título Tamaño del texto: 4vw

Ancho (teléfono): 70vw

Alto (teléfono: 70vw

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

¿Qué pasa con los píxeles?

Si desea utilizar unidades de longitud absoluta (como píxeles) para dimensionar su círculo, está perfectamente bien. Solo deberá asegurarse y realizar 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 llamada 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: 500 px

Alto: 500 px

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

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 tamaño del elemento circular se utiliza en píxeles (una unidad de longitud absoluta), el elemento circular se extenderá fuera del contenedor y del navegador en la pantalla del teléfono.

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

Por qué la unidad de % 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 en el valor predeterminado (altura: automática). 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 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). 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. Esta es la razón por la cual la unidad de % de longitud no es la mejor opción para usar cuando se trata de construir un elemento circular receptivo. El elemento circular debe tener la misma altura y anchura en todos los tamaños de navegador, por lo que es difícil lograrlo utilizando una unidad de longitud porcentual para la altura. Sin embargo, hay formas de hacer que el alto y el ancho funcionen al 100 % con más CSS personalizado aplicado a los elementos principales. Pero para hacer elementos circulares en Divi, puede que le resulte más fácil trabajar con la unidad de longitud vw.

Alineación de 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 circular. O puede usar la propiedad flexible (con relleno) para asegurarse de que el contenido se muestre directamente en el centro del círculo.

Alineación del contenido de elementos circulares con relleno

Para alinear el contenido dentro de un elemento circular usando el 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 usar unidades de longitud absoluta para el relleno dentro de un elemento circular cuyo tamaño se mide con 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 reduce de ancho. Si agregó un relleno de 100 px en la parte superior del elemento, los 100 px permanecerán cada vez que ajuste el ancho del navegador y rompa el diseño. Sin embargo, si agregó un relleno de 3vw, este relleno se ajustaría bien con el elemento.

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

Alineación del contenido de elementos circulares 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 flex. Al agregar algunos fragmentos de css al padre (elemento circular), puede asegurarse de que todo el contenido permanezca centrado verticalmente. Luego, puede usar la alineación, el relleno o el 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:

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

Consulte esta publicación sobre cómo alinear verticalmente el contenido para obtener 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 usar la página de inicio de Farmer de Divi del Farmer Layout Pack .

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

Para comenzar, primero agreguemos el diseño de la página de destino del granjero 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 Cargar desde la biblioteca, busque el Paquete de diseño Farmer y selecciónelo. Luego haga clic para usar la página de destino del agricultor.

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

Hacer un encabezado de sección circular

Para el primer ejemplo, vamos a convertir la sección del 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 de altura y anchura iguales

2: añadir un radio de borde del 50 % para las cuatro esquinas

3: alinear el 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: 1080 px

Alineación de la sección: centro

Altura: 70vw (escritorio), 70vw (tableta), 80vw (teléfono)

Altura máxima: 1080 px

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

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

Esquinas redondeadas: 50% (las cuatro esquinas)

Como 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 a los módulos para asegurarnos de que el contenido encaje dentro de 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

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.

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 arriba (escritorio), 5vw (tableta), 0vw (teléfono)

Relleno personalizado: 3vw izquierda, 3vw derecha

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

Ahora veamos el resultado.

Hacer módulos circulares de Blurb

Ahora intentemos hacer algunos anuncios circulares en este diseño. Para este ejemplo, usemos los cuatro módulos publicitarios en la sección titulada «Nuestros productos». Una vez que lo encuentre, abra la configuración del módulo de publicidad 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: 400px

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

Esquinas redondeadas: 50%

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

Ubicación de la imagen/icono: Título superior

Tamaño del texto: 2vw (escritorio), 20px (tableta)

Orientación del texto: centro

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

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

Extienda el estilo circular a todos los Blurbs en la sección

Eso se ocupa 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 publicidad a las tres publicidades restantes en la sección. Para hacer esto, haga clic con el botón derecho en el módulo de publicidad que acabamos de diseñar y seleccione «Extender estilos de publicidad». En la ventana emergente Extender estilos , seleccione para extender el estilo a lo largo de la sección.

Resultado final

Ahora veamos el resultado final.

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. ¡Siéntete libre de explorar haciendo módulos circulares, filas o incluso secciones enteras!

Espero escuchar de usted en los comentarios.

¡Salud!