Cómo diseñar un diseño de cuadrícula geométrica en Divi


Diseñar un diseño de cuadrícula geométrica para su sitio web puede ser extraordinariamente hermoso. Uno de mis elementos de diseño geométrico favoritos es un hexágono. Los hexágonos se pueden utilizar para diseñar diseños de cuadrícula armoniosos y equilibrados (piense en la colmena de abejas). Pero el diseño puede presentar desafíos. Ha creado formas para que sirvan de fondo para su contenido. Entonces tienes que encajar tu contenido dentro de la forma. Luego, debe asegurarse de que esas formas estén espaciadas correctamente en diferentes tamaños de pantalla. Pero no se preocupe. No es tan difícil como crees.

En cuanto a la creación de esas formas geométricas, hay formas de lograrlo utilizando CSS personalizado avanzado, pero creo que la forma más sencilla es crear una imagen. Entonces puedes usar el poder de Divi para el resto.

En este tutorial, le mostraré lo fácil que es crear una imagen con forma de hexágono para diseñar un diseño de cuadrícula geométrica con Divi.

¡Empecemos!

(incrustar) https://www.youtube.com/watch?v=s7bNFdljk8g (/ incrustar)

Vistazo

Aquí hay un vistazo al diseño de cuadrícula geométrica que construiremos en este tutorial.

cuadrícula geométrica

Que necesitas

  • Un editor de fotos (usaré Sketch) para crear una imagen hexagonal. O por ahora, puede simplemente arrastrar esta imagen a su escritorio y usarla.
    cuadrícula geométrica
  • Tema Divi (instalado y activo)

Creación de la imagen de fondo hexagonal

Para construir la imagen de fondo hexagonal, usaré el editor de fotos Sketch (solo para Mac). Sin embargo, esta debería ser una forma fácil de crear en cualquier número de editores de fotos (como Photoshop, Illustrator o Gimp).

Si no quiere molestarse con esta parte del tutorial, siempre puede arrastrar esta imagen a su escritorio por ahora. Es una imagen hexagonal oscura semitransparente que debería funcionar con varios diseños, ya que permitirá que se vean los colores de fondo detrás de ella.

A continuación se explica cómo crear la imagen en boceto. Primero, haz clic en el ícono de insertar en la parte superior derecha. Luego, pase el cursor sobre la opción de forma y seleccione la forma hexagonal.

cuadrícula geométrica

Ahora mantenga presionada la tecla Mayús y haga clic (y mantenga presionada) en el lienzo y arrastre el mouse para crear la forma y luego suelte el mouse. Mantener presionada la tecla Mayús 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 alto
Lados: 6
Color de relleno: 000000 hex, 0 R, 0 G, 0 B, 30 A (básicamente este es un color negro con un 30% de opacidad)

cuadrícula geométrica

Luego, exporte su imagen como png e impórtela a su biblioteca multimedia de WordPress para más tarde.

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 contiene nuestras diferentes estructuras de columnas. La primera sección tendrá nuestra estructura de tres columnas, la segunda sección tendrá dos columnas y la tercera tendrá solo una columna.

Para crear la primera sección, cree una nueva página e implemente el generador visual para crear un nuevo diseño desde cero. Se creará una nueva sección regular para usted y el constructor visual le pedirá que elija la estructura de la columna para su sección. Elija la estructura de tres columnas (un tercio un tercio un tercio).

cuadrícula geométrica

Ahora, antes de comenzar a editar nuestra fila y agregar nuestros módulos, démosle a nuestra sección un degradado de color de fondo actualizando la configuración de la sección con lo siguiente:

Color de degradado de fondo a la izquierda: # 2b87da
Gradiente de fondo Color derecho: rgba (0,0,0,0.6)

cuadrícula geométrica

Personalice la configuración de la fila y agregue imágenes hexagonales a los fondos de sus columnas

Para lograr el diseño que estamos buscando, debemos agregar nuestra imagen de fondo a cada columna de nuestra fila de tres columnas. Entonces, para cada columna, agregue la imagen hexagonal (debe ser de 360 ​​px por 360 px) a cada columna. A continuación, establezca el tamaño de la imagen de fondo en "tamaño real" y la imagen de fondo se repite en "no repetir".

cuadrícula geométrica

Asegúrese de hacer esto para las imágenes de fondo de las columnas 1, 2 y 3.

A continuación, debemos personalizar la configuración de nuestras filas para crear el espacio que necesitamos para que nuestras imágenes de fondo hexagonales se muestren correctamente en cada columna. Este espaciado también ayudará a mantener la respuesta y maximizar el espacio horizontal en el móvil.

Actualice la configuración de la fila de la siguiente manera:

Usar ancho personalizado: SÍ
Unidad:%
Ancho personalizado: 100%
Usar ancho de canalón personalizado: SÍ
Ancho de la canaleta: 2
Ecualizar alturas de columna: SÍ

Relleno personalizado (escritorio): 0px arriba, 0px abajo, 10% izquierda, 10% derecha
Relleno personalizado (tableta): 0% izquierda, 0% derecha

cuadrícula geométrica

Guarde la configuración de su fila por ahora.

Agregar sus módulos de Blurb a cada columna

Agregue un nuevo módulo de propaganda a su primera columna y actualice la configuración de propaganda de la siguiente manera:

Contenido: “Tu contenido va aquí. Edite o elimine este texto en línea o en la configuración de contenido del módulo ". (mantén esto corto porque solo tienes una cantidad limitada de espacio dentro de tu imagen hexagonal)
Usar icono: Sí
Seleccione el icono (cualquiera que desee obviamente)

Luego actualice la configuración de diseño de la siguiente manera:

Color del icono: # 66d1ff
Tamaño de fuente del icono: 66px
Orientación del texto: centro
Color del texto: claro
Ancho: 360 px (el mismo ancho de la imagen de fondo hexagonal)
Alineación del módulo: centro
Relleno personalizado: 85 píxeles en la parte superior, 85 píxeles en la parte inferior, 10% a la izquierda, 10% a la derecha

cuadrícula geométrica

Es importante agregar el contenido que desea que se muestre frente a su hexágono primero para que ahora sepa cómo ajustar el espacio de su módulo de propaganda para revelar la imagen de fondo por completo. Observe que agregué un relleno superior e inferior de 85px. Esto es suficiente para exponer el fondo hexagonal, incluso cuando se ajusta el navegador a los tamaños de los dispositivos móviles.

Después de guardar su módulo de propaganda, siga adelante con una copia y péguela en las columnas 2 y 3 para que las tres publicaciones estén presentes.

Ahora hemos agregado con éxito fondos hexagonales a nuestra primera fila de anuncios.

Creación de la segunda sección con dos columnas

Para crear nuestra segunda sección, siga adelante y duplique 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 degradado existente.

Luego, cambie la estructura de la columna de su fila a dos columnas y elimine el módulo adicional en la columna inferior derecha.

cuadrícula geométrica

Actualice la configuración de la fila de la siguiente manera:

Ancho de la canaleta: 3
Margen personalizado (escritorio): -145px arriba
Margen personalizado (tableta): -70 px en la parte superior
Relleno personalizado (escritorio): 24% izquierda, 24% derecha

cuadrícula geométrica

Agregué más relleno a la izquierda y a la derecha para colocar los fondos hexagonales entre los borrones en la sección de arriba (el 24% de relleno en cada lado nos acerca bastante). También cambié el ancho de la canaleta a 3 para acomodar el espacio de columna reducido debido a más relleno de filas. Luego utilicé un margen de -145px para subir un poco la fila.

Como puede ver, el diseño de la cuadrícula se está juntando.

Creación de la tercera sección con una columna

Para la última sección, siga adelante y duplique la sección de la sección. Luego vaya a la primera sección y copie el degradado de fondo y péguelo en la tercera sección que acaba de crear. Luego, voltee los degradados haciendo clic en el icono "cambiar" al pasar el cursor sobre la vista previa del color del degradado. Luego elimine el color de fondo en la tercera sección.

cuadrícula geométrica

Ahora actualice la estructura de la columna de la fila a una columna y elimine el módulo de propaganda adicional.

cuadrícula geométrica

Para que el fondo de la imagen hexagonal se adapte a los otros borrones en ventanas de navegador más pequeñas, debemos agregar más relleno a la fila. Esto hará que la imagen del hexágono se aplaste un poco para que coincida con las demás. Este es solo un pequeño detalle para hacer que el diseño sea más consistente.

En la configuración de la fila, actualice el relleno personalizado de la siguiente manera:

Relleno personalizado (escritorio): 37% izquierda, 37% derecha

cuadrícula geométrica

Ahora veamos el resultado final de nuestro diseño de cuadrícula geométrica.

cuadrícula geométrica

Así es como se ve en un dispositivo móvil.

cuadrícula geométrica

Así es como se ajusta a diferentes tamaños de pantalla.

cuadrícula geométrica

Pensamiento final

Este tutorial le muestra cómo crear una cuadrícula geométrica agregando un fondo de forma hexagonal a sus columnas, pero puede aplicar fácilmente esta misma técnica para agregar cualquier imagen de fondo que desee. Esto abre muchas puertas para diseñar hermosos diseños para diferenciar su sitio web.

Espero que lo encuentre útil para su próximo proyecto y espero tener noticias suyas en los comentarios.

¡Salud!