Seguro que en muchas ocasiones te has comido la cabeza buscando imágenes, vídeos u otros elementos multimedia para «embellecer» una página en la que predominaba el texto. Evidentemente, los contenidos multimedia son importantes y realzan nuestra web, pero siempre y cuando estén introducidos con gracia, sin calzador; esto es, de forma natural y si la ocasión realmente lo requiere.

Pero existen ocasiones en las que tu web «no te pide» una imagen, o un vídeo, sino que te pide a gritos un diseño distinto, con otros recursos o sólo con bloques de texto.

Así que en este tutorial vamos a ver paso a paso como crear la composición que ves bajo estas líneas.

Tutorial Divi. Bloques de texto y algunos efectos

Como ves en la imagen, vamos a trabajar con dos módulos de texto, de forma que jugaremos un poco con la tipografía. Añadiremos una letra capital (bloque de texto de la derecha). También ajustaremos los rellenos de cada columna, aplicaremos un difuminado al texto de la izquierda y por último crearemos una sombra y contorno a toda la fila que contiene los dos módulos de texto.

Vamos allá.

ESTRUCTURA DE LA SECCIÓN

Una vez hemos creado una página o entrada nueva, le ponemos un nombre y pulsamos el botón usar constructor Divi. Esto no muestra una sección por defecto, lista para incluir las columnas. Clicamos entonces donde pone Insertar columnas y elegimos dos columnas (1/2-1/2). Encada una de ellas añadimos un módulo de texto, de forma que nuestra estructura queda como ves en la imagen.

Configurando la fila 

Ajustes Generales

Vamos a ajustar la configuración básica de la fila que contiene las dos columnas de texto, así que pulsamos el botón de ajustes de fila como ves en la imagen y configuramos. En Ajustes generales usamos anchura personalizada. Lo ponemos en 80%. Activamos el Uso personalizado de canalón de ancho con valor 1. Finalmente, en esta pestaña introducimos en relleno personalizado 0 píxeles en todos los campos: superior derecha, base e izquierda. Esto es para que no quede espacio blanco en las zonas superior e inferior de la fila, que se vería cuando pongamos la sombra.

Es una buena idea jugar con estos valores cuando esté el ejercicio terminado en modo constructor visual para que te quede claro a qué me refiero. Puedes ver la configuración de Ajustes generales en la imagen siguiente.

Ajustes avanzados de diseño

En esta pestaña, activamos Igualar las alturas de las columnas, ponemos el color de fondo de la columna 1(la de la izquierda) a negro. ¡Ojo! Desplázate hasta donde pone Color de fondo para la columna 1, si lo haces donde pone solo color de fondo cambiaras el color de las dos columnas, y eso no es lo que queremos. Ahora vamos a crear «aire» alrededor de los textos, por lo que en Relleno personalizado tanto para la columna 1 como la columna 2 ponemos 10% en cada casilla.

Justo bajo estas líneas tienes una imagen que muestra los ajustes que hemos aplicado.

 Configurando el módulo de texto de la izquierda

Abrimos los ajustes del módulo de texto de la columna de la izquierda y, en Ajustes generales seleccionamos claro en color de texto. Orientación: Centro. En contenido, añadimos el texto. El texto mas grande es un encabezado (h1) y abajo, párrafo.

Abre ahora la pestaña Ajustes avanzados de diseño y configurala de esta forma: en Cabecera fuente: PT Serif. Ajusta el tamaño de Cabecera fuente a 56 px y en color, elige blanco.

Seguimos en Ajustes avanzados de diseño, ahora con los parámetros para el texto más pequeño. De manera que en texto fuente elegimos Confortaa, tamaño 12 px y ajustamos el espacio entre letras para que se ajuste a la anchura del texto superior. Yo he usado 4 píxeles. Luego, en caso necesario, podemos ajustarlo.

Luego volveremos a estos ajustes para aplicar un efecto de resplandor difuminado al texto.

Configurando el módulo de texto de la derecha

Añadimos el texto que deseamos en el módulo de texto de la derecha y ajustamos los parámetros a nuestra conveniencia. Yo he elegido Raleway como fuente, he usado color oscuro, orientación, justificado. En tamaño, he puesto 13 px y la altura 1.6 em. En cualquier caso, te aconsejo que busques variaciones y experimentes para ir cogiendo soltura con las opciones.
La primera letra le hemos hecho capitular con la clase dropcap, o sea, hemos envuelto la letra que queremos que se comporte como capital en la clase de esta manera: Y .

Puedes verlo e la imagen de la izquierda. Con esto terminamos la configuración de el segundo módulo de texto.

Últimos retoques. Sombras y contorno

Y ya solo nos resta añadir la guinda a nuestro diseño. Vamos a crear un efecto de resplandor usando CSS. Queremos aplicarlo sobre el texto de la izquierda, por lo tanto, volvemos a abrir los ajustes del módulo de texto y nos vamos a la pestaña CSS personalizado donde incluimos en el campo Elemento principal el siguiente código:

text-shadow:0px 0px 20px #FFF;

(NOTA: ya no es necesario, ahora podemos aplicarlo directamente desde los ajustes / diseño, pero nunca viene mal practicar un poquito de css)

Experimenta con los valores de este CSS. El primer valor se refiere al desplazamiento horizontal. Un valor negativo desplaza el efecto hacia la izquierda y un valor positivo hacia la derecha. El segundo valor es el desplazamiento vertical. Valores negativos, hacia arriba y positivos hacia abajo. El tercer valor es la intensidad del difuminado y el último el color. Nosotros hemos elegido blanco para que resalte sobre el negro. Prueba otras opciones.

Y para acabar, ponemos un contorno y una sombra a toda nuestra fila. En ajustes de fila >> CSS personalizado >> Elemento principal

border: 6px solid #FFCE63;

-webkit-box-shadow: -2px 21px 61px 1px rgba(38,37,38,0.39);
-moz-box-shadow: -2px 21px 61px 1px rgba(38,37,38,0.39);
box-shadow: -2px 21px 61px 1px rgba(38,37,38,0.39);

(NOTA: ya no es necesario, ahora podemos aplicarlo directamente desde los ajustes / diseño)

La primera línea añade un contorno de 6 píxeles de anchura, sólido y de color amarillo.

El resto es la clase box-shadow en sus versiones para navegadores.

Y esto es todo. Por favor, si te ha parecido interesante, compártelo para poder seguir haciendo más tutoriales.