Una guía útil para diseñar elementos circulares en Divi
Publicado: 2019-05-01De 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 ser 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 que le resulte 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 hacer 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 te mostraré lo fácil que es implementar esas técnicas en un diseño prefabricado.
¡Echale un vistazo!
Vistazo
Descargue el diseño de elementos circulares de ejemplo GRATIS
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.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
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, déle 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 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, 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 convertir el elemento en un cuadrado perfecto antes de convertirlo en un círculo perfecto. En este ejemplo, démosle 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: 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 arriba, 3vw a la izquierda, 3vw a la derecha
Por supuesto, todavía hay ajustes que pueden ser necesarios para asegurarse de que el texto / contenido quepa dentro del elemento circular en el dispositivo 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 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 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.
Echemos un vistazo a cómo se ve nuestro módulo de llamada a la acción circular de ejemplo cuando reduzco el ancho del navegador.
Uso de la unidad de longitud VW para contenido de elementos circulares
El uso de la unidad de longitud 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 con el uso de la unidad de longitud de 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
Como puede ver, todo el contenido ahora también se encuentra 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 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 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: 500px
Alto: 500px
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 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.
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 en su lugar.
Por qué la unidad de% de longitud realmente no funciona 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 establecer 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). 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 se modifiquen en la configuración. Esta es la razón por la que la unidad de% de longitud no es la mejor opción para usar cuando se intenta construir un elemento circular receptivo. 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 con el uso de una unidad de longitud porcentual para la altura. Sin embargo, hay formas de hacer que el 100% de la altura y el ancho funcionen 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 da 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 el relleno dentro de un elemento circular cuyo tamaño se utiliza 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 agrega un relleno de 100 px a 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.
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 flex. 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
Consulte esta publicación sobre cómo alinear contenido verticalmente 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 utilizar la página de destino de granjero de Divi del 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.
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.
Ahora necesitamos agregar nuestro radio de borde del 50% en las cuatro esquinas.
Esquinas redondeadas: 50% (las cuatro esquinas)
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
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 superior (escritorio), 5vw (tableta), 0vw (teléfono)
Acolchado personalizado: 3vw a la izquierda, 3vw a la derecha
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.
Ahora veamos el resultado.
Hacer módulos circulares de propaganda
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
A continuación, agregue el radio del borde o las esquinas redondeadas:
Esquinas redondeadas: 50%
Después de eso, actualice el diseño del contenido y el espaciado de la siguiente manera:
Ubicación de la imagen / icono: parte superior
Tamaño del texto del título: 2vw (escritorio), 20px (tableta)
Orientación del texto: centro
Relleno 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:
display: flex; align-items: center;
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.
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. ¡No dude en explorar la creación de módulos circulares, filas o incluso secciones enteras!
Espero tener noticias tuyas en los comentarios.
¡Salud!