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

De vez en cuando, el diseño de un sitio web requiere ciertos elementos circulares. Es una buena manera de salir de la monotonía de las cajas de diseño estándar en una página web. Crear elementos circulares puede sonar simple (¡y en realidad lo es!), Pero si no está familiarizado con algunas reglas básicas, puede encontrar algunos obstáculos innecesarios que pueden ser bastante frustrantes. Por ejemplo, a veces es difícil lograr el contenido para alinearse y coincidir dentro de un elemento en forma de círculo con un espacio correcto. O puede ser difícil para usted hacer el círculo receptivo para dispositivos móviles. Por esta razón, algunos han recurrido al uso de un fondo de imagen circular. Pero si no desea utilizar un fondo de imagen personalizado, su siguiente mejor opción es usar CSS. La buena noticia es que el Divin elimina la necesidad de crear su propio CSS personalizado para hacer elementos circulares, lo que hace que el proceso sea mucho más fácil. Entonces, si alguna vez desea darle a un elemento un círculo en la división, esto está publicando para usted.
En este tutorial, presentaré los elementos básicos sobre cómo crear elementos circulares en la división (incluidas secciones, filas y módulos). Luego le mostraré lo fácil que es implementar esas técnicas en un aspecto prefabricado. ¡Échale un vistazo! Tirar del ojo



Descargue el ejemplo de los elementos circulares de forma gratuita para poner su mano en los ejemplos de elementos circulares diseñados en este tutorial, primero tendrá que descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Pasemos al tutorial, ¿no? ¿Qué necesitas para comenzar a comenzar? Crear una nueva página en el Div. Luego, déle un título a la página e implementa el Builder Divi en el frente. Seleccione la opción “Construir desde cero”. También agregaremos un aspecto prefabricado a nuestra página un poco más tarde, pero por ahora podemos comenzar a construir desde cero. ¡Ahora estás listo para irte! Los tres pasos básicos para crear un elemento circular son realmente tres pasos simples para crear un elemento circular. Para ilustrar estos pasos, aplicaré estos pasos a un módulo de llamada a acción utilizando Divi Builder. Básicamente, queremos hacer del elemento un cuadrado perfecto antes de convertirlo en un círculo perfecto. En este ejemplo, le dé al módulo de acción para la acción una altura y un ancho de 10 VW.
Paso 2: Agregue un rayo de borde del 50% para las cuatro esquinas es establecer el borde del elemento (o módulo) en 50% en las cuatro esquinas. En la división, puede cambiar el rayo del borde de un elemento debajo de la opción etiquetada “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 llenado del artículo. (También cubro una forma de usar la flexión para centrar el contenido más adelante en esta publicación) En este ejemplo, podemos agregar el siguiente llenado para abordar el contenido al centro del elemento circular: revestimiento personalizado: 18 VW arriba, 3VW izquierda, 3VW Derecha

Por supuesto, todavía hay ajustes que pueden ser necesarios para garantizar que el texto / contenido se ajuste dentro del elemento circular en el móvil, pero cubre la configuración básica. Es posible notar que he usado la unidad de longitud VW para medir y Perder mi artículo circular. Esto es útil para crear un diseño receptivo más consistente. Lo explicaré. El uso de unidades de longitud relativa para hacer que los elementos circulares receptivos el uso de la unidad de longitud VW para la altura y el ancho entre todas las unidades de longitud relativa, la unidad de longitud VW es una de mis favoritas para un diseño receptivo. Debido a que la unidad de longitud VW es relativa al ancho de la ventana del navegador (no del elemento principal), puede obtener un diseño consistente que se ajusta fácilmente con el tamaño de la ventana del navegador.

Echemos un vistazo a cómo parece que nuestro módulo de llamada circular reducimos el ancho del navegador.

El uso de la unidad de longitud VW para el contenido del elemento circular 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 un diseño receptivo. Básicamente, esto permite que el contenido (como el texto o las imágenes) se adapte perfectamente al tamaño del círculo de elementos 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 móvil. Me gusta usar la unidad de longitud VW para títulos y luego ajustar el tamaño del cuerpo con píxeles, según sea necesario.
Además, si tiene la intención de mantener el diseño del elemento circular en la pantalla del teléfono, deberá mantener su contenido y ajustar el tamaño del elemento circular para obtener un espacio máximo. Usando nuestro ejemplo actual, puede darle al texto del título un valor de longitud de VW y luego puede 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): 70 VW Altura (teléfono: 70VWDUA Como puede ver , todo el contenido se descubre ahora dentro del elemento circular en la pantalla del teléfono. ¿Pero los píxeles? Si desea usar unidades de longitud absoluta (tal en cada punto de interrupción para mostrar la tableta y el teléfono, para garantizar que el elemento circular se ajuste en el Ventana del navegador. En algunos casos, el uso de píxeles puede ser más fácil obtener el tamaño correcto (o más preciso) en las tabletas en la tableta y el teléfono.
Por ejemplo, tomemos el mismo módulo para la acción y usemos píxeles (en lugar de VW) para dimensionar y ahorrar nuestro módulo. Puede actualizar la altura, el ancho y el revestimiento de la siguiente manera: Ancho: 500 PX Altura: 500 PX Interusación personalizada: 200 PX hacia arriba, 20 px izquierda, 20 px derecha a la derecha

Este diseño se verá similar en el escritorio, pero el problema aparece cada vez que ve el elemento circular en la pantalla del teléfono. Debido a que el elemento circular tiene un tamaño usando píxeles (una unidad de longitud absoluta), el elemento circular se extenderá fuera del contenedor y el navegador en la pantalla del teléfono.
Es por eso que es importante ajustar el ancho y los valores de los píxeles de llenado en pantallas móviles.Por ejemplo, puede ser necesario cambiar el ancho y la altura a 300 PX a cambio.Por qué la longitud de% de la unidad no funciona muy bien para dimensionar elementos circulares si desea una solución más receptiva para elementos circulares, puede pensar que el uso de porcentajes es la respuesta.Sin embargo, al dimensionar los elementos en una página web, la unidad de porcentaje de longitud no funciona como la unidad de porcentaje de longitud.Esto se debe al hecho de que la altura implícita de los elementos generalmente se deja al valor predeterminado (altura:

automático). Por ejemplo, si intenta establecer, dar al 100% de altura a un módulo de división, el módulo no se ajustará porque los contenedores principales (columna, fila, sección, etc.) tienen un valor indefinido para la altura. El navegador no trata prácticamente de establecer el módulo en el 100% de nada (que no puede). Este no es el caso del ancho. El ancho implícito de cualquier elemento de bloque (o DI) es del 100%. Entonces, todas las secciones, líneas y módulos tienen este ancho predeterminado del 100%, a menos que se modifiquen por configuración. Esta es la razón por la cual la longitud de% de la unidad no es la mejor opción para usar cuando intentamos construir un elemento circular receptivo. El elemento circular debe tener la misma altura y ancho en todos los tamaños del navegador, por lo que es difícil lograr esto utilizando una unidad de longitud porcentual. Sin embargo, hay formas de hacer que la altura y el ancho funcionen al 100% con CSS más personalizado aplicado a los elementos de los padres. Pero para crear elementos circulares en la división, puede encontrar que la unidad de longitud VW es más fácil de usar.
Alineando el contenido en un elemento circular si desea alinear el contenido en un elemento circular, realmente tiene dos opciones que consideraría simples cuando use Div. Puede usar el relleno para alinear el contenido, lo que le brinda más control sobre el lugar donde desea el contenido en el elemento Circle. O puede usar la propiedad Flex (con relleno) para asegurarse de que el contenido se muestre directamente en el centro del círculo. Alineando el contenido del elemento circular con el relleno para alinear el contenido dentro de un círculo con relleno, sugeriría el uso de una unidad de longitud relativa (como% o VW) para que el relleno aumente o disminuya con el tamaño del ancho de contenedor o navegador. No desea usar unidades de longitud absoluta para llenar dentro de un elemento circular que se dimensione usando unidades relativas. El resultado sería inconsistente, y el diseño se rompería en el móvil. Por ejemplo, si tenía un elemento circular que tenía una altura de 10 VW y un ancho de 10 VW. El elemento disminuirá en la medida en que el navegador se encoge en ancho. Si ha agregado un relleno de 100 -px a la parte superior del artículo, se quedaría 100 PX cada vez que ajuste el ancho del navegador y rompa el diseño. Sin embargo, si agrega un revestimiento de 3VW, este revestimiento se ajustaría bien con el elemento. Esta es la razón por la que sugerimos el uso del relleno VW en nuestro ejemplo de un llamado a la acción.

Alinear el contenido del elemento circular con la propiedad Flex Si no desea preocuparse tanto para obtener el llenado superior e inferior para asegurarse de que el contenido esté enfocado verticalmente, puede usar la propiedad Flex. Al agregar algunos fragmentos de CSS al padre (elemento circular), puede asegurarse de que todo el contenido permanezca enfocado verticalmente. Luego puede usar la alineación, el relleno o el borde para asegurarse de que el contenido permanezca horizontal. Esto es lo que quiero decir. Usando nuestro ejemplo, abra la configuración del módulo de acción. Luego configure el relleno superior e inferior en 0 PX. Luego acceda a la pestaña avanzada y agregue el siguiente fragmento CSS al elemento principal: Display: Flex; Aline-Ritms: Center;

Para este módulo especial, hay un cierto relleno adicional bajo la descripción promocional que lanzará un poco de alineación. Para que pueda deshacerse de él agregando los siguientes CSS a la descripción de la promoción: Bootomio: 0px
Vea esta publicación sobre cómo alinear verticalmente el contenido para obtener más información.Compra: Agregar elementos circulares a un aspecto prefabricado ahora, que tiene una mejor comprensión sobre cómo crear elementos circulares en la división, veamos cómo esto podría funcionar con un diseño de aspecto real.Para este ejemplo, usaré la página de destino de Farmer de Divin del paquete de diseño de agricultores.Cargue la página de destino del agricultor a su página para comenzar, primero para agregar la página de destino del agricultor a la página.Para hacer esto, abra el menú Configuración y la parte inferior del constructor de la Divica y haga clic en el botón de carga en la biblioteca.En la ventana de carga emergente en la biblioteca, busque el paquete de apariencia de Pharmar y seleccione.Luego haga clic para usar la página de destino de los agricultores.

Esto cargará la apariencia en la página. Haciendo un encabezado de sección circular para el primer ejemplo, convertiremos la sección del encabezado superior en un elemento circular. Para hacer esto, utilizaremos las tres reglas básicas: 1: El elemento de tamaño con valores iguales de altura y ancho 2: Agregue un rayo de borde del 50% para las cuatro esquinas: alinee el contenido del elemento circular Abra la sección Configuración y Actualización de lo siguiente: Ancho: 70VW (escritorio), 70VW (tableta), 80VW (teléfono) Ancho máximo: 1080px Sección Alineación: Altura: 70VW (escritorio), 70VW (tableta), 80VW (teléfono) Altura máxima: 1080px Observación. Agregué valores adicionales de altura y ancho para tableta y teléfono, además agregué la altura máxima y el ancho máximo. Es importante asegurarse de que todos los valores de la altura y todos los valores del ancho sean iguales. Ahora debemos agregar el rayo de borde del 50% en las cuatro esquinas. Esquinas redondeadas: 50% (las cuatro esquinas)

Debido a que esta es una sección, el contenido incluye una fila de dos columnas con múltiples módulos. Con este contenido tan grande, necesitamos hacer algunos ajustes de tamaño de módulos para garantizar que el contenido esté en 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 de tamaño de texto: 4VW
Luego reduzca la cantidad de texto en el módulo de texto directamente debajo del módulo de texto que contiene el encabezado.
Ahora podemos alinear el contenido ajustando el espacio de fila. Abra la configuración de la fila y actualice lo siguiente: Margen personalizado: Top de 10 VW (escritorio), 5VW (tableta), 0VW (teléfono) Oeste personalizado: 3VW izquierda, 3VW derecha para hacer que el círculo sea más visible, podemos agregar un divisor de la parte superior de la parte superior sección y podemos mover la posición de la imagen de fondo en la parte superior izquierda.

Ahora verifiquemos el resultado.

Hacer módulos de señal circulares ahora, para tomar una grieta al hacer borrones circulares en este aspecto. Para este ejemplo, usemos los cuatro módulos de propaganda en la sección titulada “Nuestros productos”. Después de encontrarlo, abra la configuración del módulo de la propaganda en la parte superior de la columna 2. Luego actualice el tamaño del módulo de la siguiente manera: Ancho de imagen: 7VW Ancho: 50VW (escritorio), 80VW (teléfono) Ancho máximo: 400 PX Alineación del módulo: Centro Altura: 50VW (escritorio), 80VW (teléfono) Altura máxima: 400 PX

Luego agregue el rayo de borde o las esquinas redondeadas: esquinas redondeadas: 50%

Después de eso, actualicemos el diseño y el espacio de contenido de la siguiente manera: Colocación de la imagen / icono: arriba Tamaño del texto: 2VW (escritorio), 20 px (tableta) Orientación del texto: Centro

ENLINGO PERSONALIZADO: 0VW arriba, 0VW abajo, 4VW izquierda, 4VW a la derecha

Finalmente, para alinear verticalmente el contenido utilizando la propiedad Flex agregando los siguientes CSS personalizados al elemento principal: Display: Flex;

Alinine-Ritams: Centro;

Expanda el estilo circular de todos los borrones en la sección Esto se encarga del diseño circular para nuestro primer módulo. Ahora todo lo que tenemos que hacer es expandir la configuración de diseño del módulo de la propaganda a las otras tres blurbbs en la sección. Para hacer esto, haga clic con el botón derecho en el módulo de la propaganda que acabo de diseñar y seleccione “Estilos de propaganda extensos”. En la ventana emergente, extiende los estilos, seleccione para expandir el estilo en toda la sección. Resultado final ahora, para verificar el resultado final.



Pensamientos finales Espero que hayas aprendido algunos consejos útiles sobre cómo crear elementos circulares en el Div. Al comprender tres pasos básicos y cómo usar adecuadamente las unidades de longitud para medir y ahorrar el elemento, puede crear fácilmente el diseño circular que está buscando. Y puede ser muy divertido incorporar algunos elementos circulares en una división existente o premodida. ¡Siéntase libre de explorar la creación de módulos circulares, filas o incluso secciones completas! Espero tener noticias suyas en los comentarios. ¡Suerte!