Cómo diseñar un aspecto de la red geométrica en la división

Diseñar una apariencia geométrica de la cuadrícula para su sitio web puede ser extraordinariamente hermosa. Uno de mis elementos de diseño geométrico favoritos es un hexágono. Los hexágonos se pueden usar para diseñar estructuras de red bien balanceadas y armoniosas (creo que la colmena de abejas). Pero el diseño puede encontrar desafíos. Ha creado formularios para servir como fondos para su contenido. Luego debe adaptarse a su contenido dentro del formulario. Luego, debe asegurarse de que estas formas se especifiquen correctamente en diferentes tamaños de pantalla. Pero no te preocupes. No es tan difícil como piensas.
Con respecto a la creación de estas formas geométricas, hay formas de lograr esto usando CSSS avanzado, pero creo que la forma más simple es crear una imagen. Entonces puedes usar el poder de div para el resto. En este tutorial, le mostraré lo fácil que es crear una imagen en forma de hexágono para diseñar un aspecto de la rejilla geométrica con el Div. ¡Vamos a empezar! Pull With the Eye es un vistazo al diseño de la cuadrícula geométrica que construiremos en este tutorial.

Que necesitas
Un editor de fotos (usaré Sketch) para crear una imagen hexagonal. O, por ahora, puede extraer esta imagen en el escritorio y usarla.

El tema de la división (instalado y activo)
Creando la imagen de fondo hexagonal para construir la imagen de fondo hexagonal, usaré el editor de fotos de Sketch (solo para Mac). Sin embargo, este debería ser un formulario fácil de crear en cualquier número de editores de fotos (como Photoshop, Illustrator o GIMP).
Si no desea perturbar esta parte del tutorial, simplemente puede dibujar esta imagen en el escritorio. Es una imagen hexagonal semi -transparente oscura que debería funcionar con varios modelos, dado que permitirá que se muestren los colores de fondo detrás de él. Aquí le mostramos cómo crear la imagen en el boceto. Primero, haga clic en el icono de inserción en la parte superior derecha. Luego pase el mouse sobre la opción de formulario y seleccione la forma hexagonal. Ahora mantenga presionado la tecla de cambio y haga clic (y mantenga presionada) en el lienzo y tire del mouse para crear la forma, luego suelte el mouse. Al presionar la tecla, le permite crear dimensiones perfectamente cuadradas para su forma ahora actualice las propiedades de su forma en la barra lateral derecha de la siguiente manera:

Tamaño: 360 Ancho, 360 Altura Partes laterales: 6 Relleno de color: 000000 Hex, 0 R, 0 G, 0 B, 30 A (prácticamente un color negro con 30% de opacidad)
Luego exporte su imagen como un archivo PNG e importe en la biblioteca de medios de WordPress para más adelante. Creación de la primera sección con tres columnas Este diseño tendrá tres secciones apiladas una encima de la otra, cada una con una fila que posee nuestras diferentes columnas. La primera sección tendrá nuestra estructura de tres columnas, la segunda sección tendrá dos columnas y la tercera solo tendrá una columna. Para crear la primera sección, cree una nueva página e implemente el Visual Builder para crear un nuevo aspecto. Se creará una nueva sección habitual para usted, y el Visual Builder le pedirá que elija la estructura de la columna para su sección. Elija la estructura de las tres columnas (un tercio un tercio).

Ahora, antes de comenzar a editar nuestro giro y agregar nuestros módulos, le dé a nuestra sección un gradiente de color de fondo, actualizando la configuración de la sección con lo siguiente: Color izquierdo del gradiente de fondo: # 2B87DA Color derecho del gradiente de fondo: RGBA (0.0, 0,0,6) Personalice la configuración de la fila y agregue imágenes hexagonales en los fondos de la columna para hacer el diseño que estamos buscando, debemos agregar la imagen de fondo a cada columna de tres columnas. Entonces, para cada columna, agregue la imagen hexagonal (debe tener 360px 360px) en cada columna. Luego establezca el tamaño de la imagen de fondo en el “tamaño real” y la imagen de fondo se repite en “sin repetición”.

Asegúrese de hacer esto para las columnas 1, 2 y 3 imágenes de fondo. A continuación, necesitamos personalizar nuestra configuración ordinaria para crear el espacio que necesitamos para que nuestras imágenes de fondo hexagonales se muestren correctamente en cada columna. Esta distancia también contribuirá a mantener la sensibilidad de las cosas y maximizar el espacio horizontal en los dispositivos móviles. Actualizar la configuración de la fila de la siguiente manera: Use el ancho personalizado: Sí Unidad: % Ancho personalizado: 100 % Use el ancho personalizado de la canal

Revestimiento personalizado (escritorio): 0 px arriba, 0 px abajo, 10% izquierda, 10% revestimiento personalizado derecho (tableta): 0% izquierda, 0% derecho

Guarde la configuración de la fila por el momento. Agregar sus módulos de propaganda a cada columna Agregue un nuevo módulo de blurb a la primera columna y actualice la configuración de la propaganda de la siguiente manera: Contenido: “Su contenido va aquí. Editar o eliminar este texto en línea o en la configuración de contenido. “(Mantenga esto corto, porque solo tiene una cantidad limitada de espacio en la imagen hexagonal) Use el icono: Sí, seleccione el icono (cualquier persona que desee) luego actualice la configuración de diseño de la siguiente manera: Color del icono: icono de tamaño de fuente # 66d1ff: 66 PX Orientación de texto: Centro de color de texto: Ancho abierto: 360 PX (el mismo ancho del fondo hexagonal) Alineación del modelo: Centro de revestimiento personalizado: 85 px arriba, 85 px hacia abajo, 10% izquierda, 10% derecho

Es importante agregar primero el contenido que desea mostrar frente al Hexagon para que ahora ajuste el espacio de su módulo para revelar la imagen de fondo completa. Tenga en cuenta que he agregado un revestimiento superior e inferior de 85 PX. Esto es suficiente para exponer el fondo hexagonal, incluso cuando ajusta el navegador al tamaño de los dispositivos móviles.

Después de haber guardado el módulo de la propaganda, continúe una copia y pégala en la columna 2 y 3 para que las tres desenfoque estén presentes. Ahora hemos agregado con éxito fondos hexagonales a nuestra primera fila de borrones. Creando la segunda sección con dos columnas para crear la segunda sección, continúe y copie la primera sección, luego actualice la configuración de la sección con el siguiente color de fondo: RGBA (0.0,0.0.6) y elimine el gradiente existente. Luego cambie la estructura de su columna de fila en dos columnas y borre el módulo adicional en la columna inferior derecha. Permita la configuración de la fila de la siguiente manera:
El ancho de la canaleta: 3 margen personalizado (escritorio): -145 PX Margen personalizado superior (tableta): -70 PX Top personalizada (escritorio): 24% izquierda, 24% derecha derecha

Hemos agregado varios rellenos a la izquierda y a la derecha para colocar los fondos hexagonales entre los borrones en la sección anterior (el 24% de llenado en cada lado nos trae). Además, cambiamos el ancho de la canaleta a 3 para adaptarse a la columna vertebral baja debido a varios rellenos de fila. Luego usé un margen de -145px para tirar de la fila hacia arriba. Como puede ver, se acerca la apariencia de la cuadrícula.
Creando la tercera sección con una columna para la última sección, continúe un duplicado de la sección de la sección. Luego vaya a la primera sección y copie el gradiente de fondo y pegue a la tercera sección que acaba de crear. Luego navegue por los gradientes haciendo clic en el icono de “conmutación” al pasar con el mouse sobre la vista previa del color de gradiente. Luego elimine el color de fondo de la tercera sección.

Ahora actualice la estructura de la columna de fila en una sola columna y limpie el módulo de propaganda adicional. Para obtener un fondo hexagonal en la escala con las otras borrachas de las ventanas del navegador más pequeñas, debemos agregar más revestimiento en una fila. Esto hará que la imagen hexagonal se endurezca un poco para que coincida con los demás. Este es solo un pequeño detalle para que el diseño sea más consistente. En la configuración promedio, actualice el relleno personalizado de la siguiente manera: trenza personalizada (escritorio): 37% izquierda, 37% correcto
Ahora, verifiquemos el resultado final de nuestra estructura geométrica de la cuadrícula.

Así es como se ve en los dispositivos móviles.
Así es como se adapta a diferentes tamaños de pantalla.

El pensamiento final este tutorial le muestra cómo crear una cuadrícula geométrica agregando un fondo hexagonal a sus columnas, pero puede aplicar fácilmente la misma técnica para agregar cualquier imagen de fondo. Esto abre muchas puertas para diseñar modelos hermosos para distinguir su sitio. Espero que encuentre su ayuda para su próximo proyecto y espero escucharlo de los comentarios. ¡Suerte!