Cómo crear un diseño de imagen creativo con texto superpuesto y vertical

Preparación de los elementos de diseño

Esto es lo que necesitará para construir este diseño:

1. Última versión del tema Divi instalado y activo
2. Copia del paquete de diseño de restaurante gratuito . Importe el archivo Restaurant_Gallery.json a la Biblioteca Divi. Esto le dará una ventaja inicial en la creación del nuevo diseño.
3. Si elige usar sus propias imágenes, me aseguraría de que su tamaño sea de al menos 800 × 500.
   

Construyendo el diseño de la imagen y agregando contenido

Este diseño único requiere un proceso de diseño único. Piense en ello como si estuviera haciendo un álbum de recortes. Vamos a diseñar todas nuestras piezas antes de comenzar a moverlas para encontrar el lugar adecuado para cada una. Este proceso también lo ayudará a apropiarse más del proceso de diseño y modificar las cosas de la manera que desee cada vez que agregue su propio contenido.

Entonces, creo que es mejor agregar todas nuestras filas y contenido (imágenes, texto) primero. Esto proporcionará un marco básico para que podamos visualizar el todo antes de comenzar a diseñar las partes.

Use el diseño de la galería del restaurante

Para empezar, creemos una nueva página y subamos el diseño de la galería del restaurante a la página. El diseño tiene una sección de encabezado y pie de página (que dejaremos solo ahora. Usaremos las imágenes dentro de cada una de las cuatro filas (cuatro columnas) para agregar a nuestro nuevo diseño. Puede elegir crear sus módulos de imagen desde rasca si lo prefieres Simplemente estoy haciendo esto para acelerar el proceso.

Puede pensar en el contenido existente (todas las imágenes de la galería) como recursos que puede usar para completar su nuevo diseño.

Agregar contenido de la primera sección

Cree una nueva sección regular con una nueva fila con una estructura de columnas de dos columnas (la mitad de la mitad). Luego arrástrelo justo debajo de la sección de encabezado de su diseño.

En la primera columna de su nueva fila, vamos a crear un módulo de imagen y tomar una imagen vertical de nuestra galería de medios (esta es la única imagen que no se encuentra en el contenido existente a continuación).

A continuación, arrastre una imagen directamente debajo de la imagen anterior en la primera columna.

Luego agregue un módulo de texto debajo de la segunda imagen en la primera columna y agregue el siguiente texto ficticio por ahora:

“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architectoeaque ipsa quae ab illo inventore.”

Agregue otro módulo de texto directamente debajo de ese módulo de texto con el texto de contenido: «Hornear»

Eso se ocupa de la primera columna en la primera fila.

En la segunda columna de la primera fila, agregue un módulo de texto con el texto de contenido: «Fresco»

Luego, arrastre un módulo de imagen directamente debajo de ese módulo de texto desde el contenido existente en la parte inferior.

Copie los dos módulos de texto de la primera columna y péguelos en la segunda columna debajo de la imagen (asegurándose de que el contenido ficticio del párrafo permanezca sobre el contenido de texto único. Luego cambie la palabra «Hornear» a «Principiantes».

Agregar contenido de la segunda sección

A continuación, agregue una nueva sección regular debajo de la que acaba de crear. Dale una fila con una estructura de una columna.

Arrastre dos imágenes (módulos de imagen) del contenido existente a continuación a la nueva fila de una columna. Ocuparán todo el ancho de la fila. Está bien, ajustaremos el tamaño y la posición más adelante.

Agrega una nueva fila directamente debajo de la anterior y dale una estructura de tres columnas (un tercio un tercio un tercio).

Arrastre una imagen del contenido existente a continuación a la primera columna (extremo izquierdo).

En la segunda columna (del medio), agregue un módulo de texto con el texto de contenido: «Postres»

Luego copie cualquiera de los módulos de texto con el texto ficticio del párrafo en la primera sección y péguelo debajo del módulo de texto «Postres».

En la tercera fila (extrema derecha), agregue un módulo de texto con el texto de contenido: «Café».

Eso es todo por el contenido de la segunda sección.

Agregar contenido de la tercera sección

Para la tercera y última sección, agregue una sección regular con una estructura de fila de dos columnas (la mitad de la mitad).

En la primera columna (izquierda), arrastre una imagen del contenido existente a continuación. Debajo de la imagen, copie y pegue el texto ficticio del párrafo que hemos estado usando. Luego agregue un módulo de texto debajo de ese texto ficticio con el texto de contenido: «Cangrejo»

En la columna derecha de la misma fila, ingrese un módulo de texto con el texto de contenido: «Mariscos»

Luego agregue el módulo de texto ficticio de párrafo debajo de él.

Debajo del texto ficticio, arrastre una imagen del contenido existente a continuación.

Bueno, eso se ocupa del marco y el contenido de nuestro diseño. Pero antes de comenzar a diseñar este diseño, borre la sección que contiene nuestro contenido de «ayuda» de diseño anterior.

Diseñar el diseño

Ahora que tenemos listo nuestro marco (filas y columnas) y nuestro contenido (módulos de imagen y texto), podemos comenzar el proceso de diseño. Para mover las cosas, ajustaremos los anchos y los márgenes de ciertas imágenes para que puedan hacer cosas como superponerse. El secreto de las imágenes superpuestas es utilizar valores negativos en la configuración de los márgenes para «tirar» de las imágenes en la dirección que desea que vayan. Y, además de configurar nuestras fuentes, tamaños y márgenes de texto, agregaré algunas líneas de CSS personalizado en línea para rotar algunas palabras y mostrarlas verticalmente.

Empecemos.

La primera ola de diseño: módulos de texto

Debido a que todo el diseño comparte un diseño de fuente similar, me resulta más fácil actualizar primero la configuración de un módulo de texto y luego copiar y pegar el estilo en otros módulos de texto que comparten la configuración. Esto evita la repetición de agregar los mismos ajustes generales para cada módulo uno por uno.

Hay dos fuentes y tres tamaños usados ​​para el texto en este diseño. Playfair Display se usa para las palabras individuales más grandes y Montserrat se usa para el texto del párrafo.

Texto de párrafo pequeño

Haga clic para actualizar la configuración del módulo de texto ficticio en la primera columna de la primera sección (o cualquiera en realidad, no importa) y actualice lo siguiente:

Fuente del texto: Montserrat

Eso es realmente todo lo que hay que hacer. Con el ingenioso menú contextual (o las teclas de acceso directo ctr+alt+C y ctr+alt+V), copie la configuración de estilo/diseño del módulo y pegue la configuración de diseño en cada uno de los módulos de texto de párrafo ficticio en todo el diseño.

Texto grande de una sola palabra

Busque el módulo de texto con el texto único «Hornear». Actualice la configuración de la siguiente manera.

Fuente del texto: Playfair Display

Peso de la fuente del texto:

Texto en negrita Tamaño del texto: 72 px (D), 50 px (T), 42 px (S)

Espaciado entre letras del texto: 12 px

Altura de la línea de texto: 1 em

Ahora, usando el menú contextual (o las teclas de acceso rápido ctr+alt+C y ctr+alt+V), copie la configuración de estilo/diseño del módulo de texto y pegue la configuración de diseño en cada uno de los módulos de texto que contengan palabras sueltas (Fresco, Entrantes, Postres, Café, Marisco y Cangrejo).

Texto medio de una sola palabra

No queremos que todas nuestras palabras individuales tengan el mismo tamaño grande, pero fue más rápido pegar las configuraciones de diseño para todas antes de hacer ajustes a los pocos módulos de texto que requieren un tamaño diferente.

Localice el módulo de texto con el texto de contenido «Starters» y actualice la siguiente configuración:

Texto Tamaño del texto: 42 px (D), 32 px (T), 32 px (S)

Ahora copie la configuración de diseño del módulo de texto y pegue la configuración de diseño en el módulo de texto con la palabra «Postres» y el que tiene la palabra «Café».

La segunda ola de diseño: tamaños, márgenes y sombras de caja

Para ajustar los márgenes de las imágenes y el texto en todo el diseño, comenzaré en la parte superior con la primera sección (superior) y luego continuaré con la segunda y la tercera sección.

Seccion uno

En la columna izquierda de la sección uno, actualice la configuración del módulo de imagen de la primera imagen (superior) de la siguiente manera:

Margen personalizado: -30 % inferior, -20 % restante

Esto hace dos cosas. En primer lugar, tira de la imagen de abajo hacia arriba para que se superponga y, en segundo lugar, tira de la imagen hacia la izquierda.

Nota: Es importante señalar que en el valor del margen negativo se puede realizar este tipo de colocación de las imágenes. Podría pensar que agregar un margen de 30% arriba y 20% a la derecha lograría un efecto similar, pero todo lo que hace es empujar la imagen hacia abajo y reducirla para que tenga un 20% de margen a la derecha.

Para la imagen directamente debajo, actualice la siguiente configuración en la pestaña de diseño para darle una sombra de cuadro:

Sombra de cuadro: [seleccione la primera opción]

Posición horizontal de sombra de cuadro: -18 px

Posición vertical de sombra de cuadro: -18 px

Fuerza de desenfoque de sombra de cuadro: 50 px

Fuerza de extensión de sombra de cuadro: -7 px

Color de sombra: rgba(0,0,0,0.3)

En el módulo de texto debajo de la imagen que contiene el texto ficticio, actualice lo siguiente:

Ancho: 65% (D), 100% (T), 100% (S)

Esto es para crear espacio para cada vez que flotamos la palabra «Hornear» para mostrarse verticalmente a la derecha.

A continuación, actualice la configuración del módulo de texto de párrafo ficticio en la columna derecha de la siguiente manera:

Esto creará espacio para que la palabra «Principiantes» flote y se muestre verticalmente a la izquierda del párrafo.

Sección Dos

En la primera fila de la segunda sección, actualice el tamaño de la imagen en la columna izquierda de la siguiente manera:

Forzar ancho completo: NO

Ancho: 60 % (D), 100 % (T), 100 % (S)

Para la segunda imagen de la columna, copie el diseño de la imagen en la sección uno que tiene la sombra del cuadro y péguelo en la imagen. Luego actualice lo siguiente:

Forzar ancho completo: NO

Ancho: 70 % (D), 80 % (T), 80 % (S)

Alineación del módulo: Derecha

Margen personalizado: -20 % Superior

A continuación, vaya a la fila de tres columnas en la segunda sección y actualice la configuración de la imagen en la columna de la izquierda de la siguiente manera:

Forzar ancho completo: NO

Ancho: 90 % (D), 50 % (T), 50 % (S)

Margen personalizado: -30 % Superior

Sección Tres

Para la última sección, comenzando con la columna izquierda, actualice el módulo de texto de párrafo ficticio de la siguiente manera:

Margen personalizado: 50 % derecho (D), 0 px derecho (T), 0 px derecho (S)

En la columna de la derecha, actualice el módulo de texto que contiene el texto del párrafo ficticio de la siguiente manera:

Ancho: 65% (D), 100% (T), 100% (S)

Para la imagen directamente debajo del texto ficticio en la columna de la derecha, copie el diseño de la imagen en la sección uno que tiene la sombra del cuadro y péguelo en la imagen. Luego actualice lo siguiente:

Force Fulwidth: NO

Margen personalizado (escritorio): 10 % superior, -30 % a la izquierda

Margen personalizado (tableta): 0 px a la izquierda;

Esto es lo que tenemos hasta ahora.

La última ola de diseño: hacer que el texto sea vertical con CSS personalizado

En este punto, todo lo que queda por hacer es rotar nuestro texto para que se muestre verticalmente en lugar de horizontalmente. Para hacer esto, usaremos CSS personalizado (la propiedad «transform:rotate») y algunos ajustes a los márgenes para posicionar el texto para la ubicación vertical.

g> Nota: podría agregar CSS en línea en la pestaña avanzada de cada módulo de texto individualmente, pero calculo que agregar el CSS a la configuración de la página y luego apuntar a cada módulo con una clase le daría más control sobre esta configuración. Por ejemplo, podría agregar consultas de medios para deshabilitar la visualización de texto vertical en dispositivos móviles.

Abra Configuración de página en el menú de configuración inferior. Luego haga clic en la pestaña Avanzado e ingrese el siguiente CSS en el cuadro CSS personalizado:

Observe que las dos clases que usaré son «rotar a la derecha» y «rotar a la izquierda». Usaremos estos ID de CSS para orientar los módulos de texto con el texto de contenido «Hornear», «Entrantes», «Café» y «Cangrejo».

Para el módulo de texto que contiene «Hornear», actualice lo siguiente en la pestaña Diseño:

Margen personalizado (ordenador): 10 % superior, -40 % derecho

Margen personalizado (tableta): 35 % superior, -20 % derecho

Luego vaya a la pestaña Avanzado y agregue la siguiente Clase CSS:

girar a la izquierda

Para el módulo de texto que contiene «Principiantes», actualice lo siguiente en la pestaña Diseño:

Margen personalizado: 20 % superior, 75 % derecho

Luego vaya a la pestaña Avanzado y agregue la siguiente Clase CSS:

Gira a la derecha

Para el módulo de texto que contiene «Café», actualice lo siguiente en la pestaña Diseño:

Margen personalizado (escritorio): 80 % superior, 15 % derecho

Margen personalizado (tableta): 30 % superior

Margen personalizado (teléfono inteligente): 50 % superior

Luego vaya a la pestaña Avanzado y agregue la siguiente ID de CSS:

Gira a la derecha

Para el módulo de texto que contiene «Cangrejo», actualice lo siguiente en la pestaña Diseño:

Margen personalizado (escritorio): -20 % derecho

Margen personalizado (tableta): 20 % superior, -20 % derecho

Luego vaya a la pestaña Avanzado y agregue la siguiente ID de CSS:

girar a la izquierda

¡Eso es todo!

Guarde su configuración y vea los resultados en el sitio en vivo.

¿Sensible?

Debido a las especificaciones de margen adicionales hechas a lo largo del diseño, el diseño también se ve muy bien en dispositivos móviles.

Pensamientos finales

Mi objetivo final para este tutorial es hacer fluir esos jugos creativos. Hay tantas cosas que se pueden hacer con los márgenes para crear el diseño perfecto. A propósito, no modifiqué la configuración de las secciones y filas para concentrarme en mover los módulos. Sin embargo, puede llevar el diseño a otro nivel de diseño (especialmente para monitores grandes) incorporando algunos márgenes y espacios adicionales para sus filas y secciones.

Espero que esto haya sido útil.

Hasta la próxima, los veo en los comentarios.

¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!