Cómo usar texto como un elemento de diseño abstracto en Divi

El uso de texto como un elemento de diseño abstracto puede ser una excelente manera de darle un aspecto único a su sitio sin tener que crear gráficos o imágenes personalizados. Puede usar el texto para un atractivo estético estrictamente abstracto o puede hacer que sirva como un mensaje creativo y sutil para sus espectadores.

Hoy, le mostraré cómo puede usar Divi y su módulo de texto para agregar cualquier contenido de texto que desee como un elemento de diseño abstracto en su sitio web. Voy a incluir un par de ejemplos que, con suerte, serán una inspiración para sus proyectos futuros.

Empecemos.

Vistazo

Aquí hay un vistazo de los diseños que crearemos en este tutorial.

Cómo usar texto como un elemento de diseño abstracto en Divi

Suscríbete a nuestro canal de Youtube

Cómo usar texto grande como fondo de encabezado

Usar texto grande para crear un fondo único es una excelente manera de darle vida a un color de fondo simple y agregar un elemento de textura. Aquí está cómo hacerlo.

Primero, cree una sección regular con una fila de una columna.

Luego agregue su primer módulo de texto que incluirá el encabezado de su página.

En la configuración del módulo de texto, agregue el texto que desee agregar al campo de contenido. Para este ejemplo voy a utilizar la palabra «creativo». Como quiero dividir la palabra, usaré la pestaña de texto del campo de contenido y agregaré algo de html con etiquetas de ruptura.

Agregue el siguiente html debajo de la pestaña de texto del campo de contenido…

01
<p>cre<br>ati</br>ve</p>

A continuación, actualice las opciones de la pestaña de diseño…



Fuente del texto: Texto
Oswald Tamaño del texto: 400 px (escritorio) y 200 px (tableta)


Color del texto del texto: rgba(12,113,195,0.11)


Altura de la línea del texto: 0.5em

La altura de la línea de texto es en realidad donde realizamos la superposición del texto. Esta superposición combinada con el color semitransparente del texto agrega un efecto genial. Pero si prefiere que el texto no se superponga, simplemente aumente la altura de la línea.

También puede agregar una sombra de texto a su texto para crear un duplicado del texto que se puede colocar en cualquier lugar de la sección. Incluso puedes darle un color diferente también.

Longitud horizontal de la sombra de texto: 1,72 em

Longitud vertical de la sombra de texto: -0,81 em


Color de la sombra de texto: rgba(244,0,204,0,08)

Guardar ajustes.

Esto es lo que tenemos hasta ahora.

Ahora necesitamos agregar nuestro módulo de texto que contendrá nuestro texto de encabezado real. Simplemente agregue un módulo de texto debajo del módulo de texto utilizado para su texto de fondo. Luego actualice la configuración de la siguiente manera:

Contenido:

01
02
<h1>Creative Header<br />Design</h1>
Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh.

Fuente del texto: Texto abierto Sans

Tamaño del texto: 20 px

Fuente del encabezado: Oswald

Tamaño del texto del encabezado: 80 px (escritorio) y 42 px (tableta)


Color del texto del encabezado: #555555

Margen personalizado: -370 px superior (escritorio) y -240 px (tableta)

Relleno personalizado: 20 % a la izquierda (escritorio) y 0 % (tableta)

El margen superior negativo se utiliza para centrar verticalmente el texto del encabezado sobre el texto de fondo. También ajusté el margen y el relleno para dispositivos móviles.

Dado que el valor del margen negativo elevó nuestro margen 370 px, necesitamos agregar algo de espacio agregando relleno inferior a nuestra fila. Vaya a la configuración de la fila y actualice lo siguiente:

Relleno personalizado (escritorio): 0 px arriba, 300 px abajo

Relleno personalizado (tableta): 0 px arriba, 150 px abajo

El relleno superior 0px eleva el contenido para que tenga más espacio en la parte superior del pliegue. El relleno inferior de 300 px agrega el espacio para completar el margen superior de -370 px del módulo de texto.

Guarde su configuración.

Ahora ya terminaste. Mira el resultado.

Siéntase libre de ajustar la configuración para crear su propio diseño personalizado. Por ejemplo, agregué un degradado de fondo a la sección con lo siguiente:

Colores: rgba(244,0,204,0,82) y rgba(12,113,195,0,86)

Dirección del degradado: 90 grados

Luego cambié el texto de mi encabezado a blanco y creé un diseño único con el texto de fondo agregando una agradable textura colorida.

Siempre puede rotar su texto para crear fondos aún más únicos. Todo lo que necesita hacer es agregar un fragmento corto de CSS.

Para agregar el CSS, vaya a la configuración del módulo de texto e ingrese el siguiente código CSS personalizado en el cuadro Elemento principal en la pestaña Avanzado.

01
transform: rotate(90deg)

Este css establece que el contenido del módulo de texto gire 90 grados desde su posición original. El resultado es texto vertical.

Pero puede ajustar el grado al valor que desee para diferentes diseños.

Aquí está el resultado.

Cómo usar texto como superposiciones de imágenes únicas

Usar texto como una superposición de imagen es una excelente manera de agregar un poco de estilo adicional a sus imágenes.

Para completar este diseño, usemos uno de nuestros diseños prefabricados. Cree una nueva página, implemente el generador visual y agregue el Diseño de página de destino de moda a su página.

Luego elimine todas las secciones excepto la sección «Acerca de nosotros» debajo de la sección del encabezado principal.

Ahora vamos a agregar un módulo de texto debajo de la imagen en la columna derecha de la fila.

En el campo de contenido, agregue las letras «vía».

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

Fuente de texto: Fuente Sans Pro

Peso de fuente de texto: Texto pesado


Tamaño de texto: 320 px (escritorio) y 290 px (tableta)


Color de texto: blanco (#ffffff)


Espaciado entre letras de texto: -5 px

El color del texto debe ser del mismo color que el color de fondo de la sección para ocultar la parte inferior del texto que no se superpone a la imagen.

Ahora necesitamos agregar algunos márgenes personalizados para colocar el texto sobre la imagen.

Relleno personalizado: -80 px arriba, 80 px abajo, -70 px izquierda

La superposición de texto está lista. Ahora necesitamos actualizar el diseño del resto del contenido de la sección para darle un aspecto más pulido.

Actualice el módulo de imagen en la columna de la derecha eliminando la sombra del cuadro.

A continuación, actualice la configuración del módulo de texto en la parte superior de la columna izquierda con lo siguiente:

Contenido:

01
<h2>Create your own<br />text style.</h2>

Título 2 Fuente: Fuente Sans Pro

Título 2 Color del texto: #4a4d91

Elimine el módulo divisor directamente debajo del módulo de texto que acaba de actualizar.

Luego actualice el último módulo de texto en la columna izquierda con una fuente para que coincida con el diseño.

Fuente del texto: Fuente Sans Pro

Texto Color del texto: rgba(74,77,145,0.73)

Ahora necesitamos cambiar el color de nuestro fondo degradado de la columna 2. Para hacer eso, edite la configuración de la fila y cambie los colores del degradado de fondo a lo siguiente:

Gradiente de fondo de la columna 2: #4a4d91 y #181a3d

Ahora los colores del texto y el degradado coinciden y ofrecen un bonito contraste con nuestra superposición de texto.

Si lo desea, puede agregar un divisor de sección en la parte inferior que superpondrá la parte inferior del contenido de su sección y dará la impresión de que el texto está flotando.

Para crear el divisor de sección, vaya a la configuración de la sección en la pestaña de diseño. Seleccione para editar el divisor inferior. Luego actualice lo siguiente:

Estilo del divisor: vea la captura de pantalla

Color del divisor: rgba (74,77,145,0.16)


Altura del divisor: 332px


Disposición del divisor: En la parte superior del contenido de la sección

Relleno personalizado: 200 px inferior

El truco aquí es establecer la disposición de los divisores sobre el contenido de la sección para que se superponga al texto que se encuentra sobre la imagen.

Aquí esta el resultado final.

Pensamientos finales

Con los cientos de fuentes y combinaciones de diseño disponibles en Divi, tiene un excelente recurso de diseño para agregar elementos de texto abstractos en su sitio web. Y a diferencia de las imágenes, puede cambiar el texto y el diseño fácilmente desde el constructor Divi sin tener que usar un editor de fotos. Pero tenga en cuenta que deberá asegurarse y ajustar los tamaños de texto y el espaciado de sus dispositivos móviles para asegurarse de que el diseño responda.

Así que adelante y pruébalo. Agregue un nuevo diseño de texto abstracto a su próximo proyecto.

Espero escuchar de usted en los comentarios.

¡Salud!