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 usar para diseñar diseños de cuadrícula bien equilibrados y armoniosos (piense en una colmena de abejas). Pero el diseño puede venir con desafíos. Ha creado formas para que sirvan como fondos 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 te preocupes. No es tan difícil como piensas.
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, les 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!
Aquí hay un vistazo al diseño de 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 simplemente arrastrar esta imagen a su escritorio y usarla.
- Tema Divi (Instalado y Activo)
Crear la imagen de fondo del hexágono
Para construir la imagen de fondo del hexágono, 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 semitransparente oscura que debería funcionar con una serie de diseños teniendo en cuenta que permitirá que se vean los colores de fondo detrás de ella.
Aquí se explica cómo crear la imagen en boceto. Primero, haga clic en el icono de inserción en la parte superior derecha. Luego pase el cursor sobre la opción de forma y seleccione la forma hexagonal.
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 30% de opacidad)
Luego, exporta tu imagen como png e impórtala a tu biblioteca de medios de WordPress para más tarde.
Crear 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 generador visual le pedirá que elija la estructura de columnas para su sección. Elija la estructura de tres columnas (un tercio un tercio un tercio).
Ahora, antes de comenzar a editar nuestra fila y agregar nuestros módulos, demos a nuestra sección gradientes de color de fondo actualizando la configuración de la sección con lo siguiente:
Color de degradado de fondo a la izquierda: #2b87da
Color de degradado de fondo a la derecha: rgba(0,0,0,0.6)
Personalice la configuración de las filas 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. Luego establezca el tamaño de la imagen de fondo en «tamaño real» y la repetición de la imagen de fondo en «no repetir».
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 espacio también ayudará a mantener las cosas receptivas y maximizar el espacio horizontal en dispositivos móviles.
Actualice la configuración de la fila de la siguiente manera:
Usar ancho personalizado: SÍ
Unidad: %
Ancho personalizado: 100%
Usar ancho de medianil personalizado: SÍ
Ancho de medianil: 2
Igualar alturas de columna: SÍ
Relleno personalizado (escritorio): 0 px superior, 0 px inferior, 10 % izquierda, 10 % derecha
Relleno personalizado (tableta): 0 % izquierda, 0 % derecha
Guarde la configuración de su fila por ahora.
Agregar sus módulos de Blurb a cada columna
Agregue un nuevo módulo de publicidad a su primera columna y actualice la configuración de publicidad 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”. (mantenga esto breve porque solo tiene una cantidad limitada de espacio dentro de su imagen hexagonal)
Use Icon: Yes
Select Icon (cualquiera que desee obviamente)
Luego actualice la configuración de diseño de la siguiente manera:
Color del icono: #66d1ff
Tamaño de la fuente del icono: 66 px
Orientación del texto: Centro
Color del texto:
Ancho de la luz: 360 px (el mismo ancho de la imagen de fondo del hexágono)
Alineación del módulo: centro
Relleno personalizado: 85 px arriba, 85 px abajo, 10 % a la izquierda, 10 % Bien
Es importante agregar primero el contenido que desea que se muestre frente a su hexágono para que sepa cómo ajustar el espaciado de su módulo de publicidad para revelar la imagen de fondo por completo. Observe que agregué un relleno superior e inferior de 85 px. Esto es suficiente para exponer el fondo del hexágono, incluso cuando se ajusta el navegador al tamaño de los dispositivos móviles.
Después de guardar su módulo de publicidad, copie y péguelo en las columnas 2 y 3 para que las tres publicidades estén presentes.
Ahora hemos agregado con éxito fondos hexagonales a nuestra primera fila de anuncios publicitarios.
Crear la segunda sección con dos columnas
Para crear nuestra segunda sección, continúe 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.
Actualice la configuración de la fila de la siguiente manera:
Ancho de medianil: 3 Margen personalizado (escritorio): -145 px
Margen personalizado
superior (tableta): -70 px
Relleno personalizado superior (escritorio): 24 % a la izquierda, 24 % a la derecha
Agregué más relleno a la izquierda y a la derecha para colocar los fondos hexagonales entre los anuncios publicitarios en la sección anterior (24% de relleno en cada lado nos acerca bastante). También cambié el ancho de la canaleta de nuevo a 3 para acomodar el espacio de columna reducido debido a más relleno de fila. Luego usé un margen de -145px para subir un poco la fila.
Como puede ver, el diseño de la cuadrícula se está uniendo.
Crear 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 ícono «cambiar» cuando se desplaza sobre la vista previa del color del degradado. Luego elimine el color de fondo en la tercera sección.
Ahora actualice la estructura de la columna de fila a una columna y elimine el módulo de publicidad adicional.
Para que el fondo de la imagen del hexágono se escale con los otros anuncios publicitarios en ventanas de navegador más pequeñas, necesitamos agregar más relleno a la fila. Esto hará que la imagen del hexágono se aplaste 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 de la fila, actualice el relleno personalizado de la siguiente manera:
Relleno personalizado (escritorio): 37 % a la izquierda, 37 % a la derecha
Ahora veamos el resultado final de nuestro diseño de cuadrícula geométrica.
Esto es lo que parece en el móvil.
Así es como se ajusta a diferentes tamaños de pantalla.
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 saber de usted en los comentarios.
¡Salud!