Una de las ventajas que tiene crear un blog con la plantilla Divi de Elegant Themes es que adquiere un diseño de lectura completamente limpio para el lector.

Con muy pocas configuraciones de diseño, todo el contenido queda ordenado y siguiendo la imagen de tu marca.

Pero si quieres ir un poquito más allá y diseñar una web a tu medida, te recomiendo echarle un ojo a estas 3 formas de diseñar los títulos de las publicaciones de un blog con la plantilla Divi.

Con ellas, podrás personalizar los títulos de las entradas de tu blog y mostrar tus post de forma altamente atractiva e interactiva 😉

Cómo diseñar un blog con Divi

La estética y la manejabilidad de tu blog es esencial para que el lector encuentre lo que necesita, para que lo «engache» al blog y permanezca más tiempo navegando o para que prefiera compartirlo en las redes sociales, entre otras cosas.

Por defecto, los diseños que un blog con la plantilla Divi puede tener según lo configures, son dos: Blog estándar y Blog rejilla o masonry. Tendrás que usar alguna extensión de Divi para mostrar otro diseño de blog.

Y las herramientas que el constructor Divi incluye para blogs son:

• Plantillas predefinidas de blog
• Módulo Blog
• Módulo Título de Publicación
• Módulo Título de Publicación de anchura completa

En este post, vamos a ver cómo configurar el Módulo Título de Publicación del tema Divi para conseguir un diseño personalizado de los títulos de las entradas de tu blog.

Por defecto, las entradas de los posts se muestran con el título en la parte superior y con la imagen destacada en la parte inferior, tal y como puedes ver en la imagen:

Configurar el Módulo Título de Publicación

Para poder diseñar el título de las entradas del blog con un estilo diferente al habitual, entra en la Edición de la entrada (post) y realiza los siguientes pasos:

1. Activa el constructor Divi desde en botón superior.
   
2. Agrega una Imagen destacada: Esta será la imagen que aparecerá en la parte superior del post junto con el títtulo. La puedes agregar desde la barra lateral derecha de la edición de la entrada en WordPress.
   
3. Selecciona «No mostrar título» desde la barra lateral derecha de la edición de la entrada en WordPress.
   
4. Agrega un Módulo Título de Publicación: este es solo para la configuración del título, ya que el texto del título lo escribiremos en el campo de arriba del editor de WordPress, como cualquier entrada normal.
   
5. Agrega un «Módulo Texto» en una fila diferente: dentro de este módulo es donde tienes que escribir todo el texto de tu post.
   

Ahora vamos a ver 3 opciones de diseño de un blog con Divi usando el Módulo Título de Publicación.

Título de publicación con imagen de fondo

El objetivo aquí es ubicar el texto del título del post encima de la imagen destacada. Para ello no tendrás que utilizar ningún código CSS y tan solo tendrás que usar y configurar el Módulo Título de Publicación de Divi.

En el Módulo Título de Publicación selecciona:

EN AJUSTES GENERALES:

• Mostrar imagen destacada: Si.
• Ubicación de imagen destacada: Imagen de fondo de título.
• Orientación del texto: Centro.
• Color de texto: elige entre color oscuro o claro.
• Usar color de fondo de texto: Si.
• Color de fondo de texto: elige color. En este caso he seleccionado rgba(255,255,255,0.76).

EN AJUSTES AVANZADOS DE DISEÑO:

• Título fuente: elige la fuente del texto. En este caso he seleccionado Oswald.
• Título tamaño de fuente: en este caso, he seleccionado 30px.
• Título color del texto: en este caso he seleccionado el color blanco #ffffff.

La configuración sería la siguiente:

Con estas configuraciones, el diseño de la publicación del post se quedaría así:

También se puede añadir un efecto parallax activando la casilla «Usar efecto de paralaje», para conseguir que la imagen de fondo se vaya deslizando mientras haces scroll.

Título de publicación con imagen destacada superior y efecto caja

Como hemos visto más arriba, por defecto, la imagen de las publicaciones de los posts se muestra en la parte inferior del título.

Si te interesa resaltar la imagen principal de la publicación, una buena opción sería mostrarlo al revés. La imagen en la parte superior y el título en la parte inferior.

Para lograr esto selecciona:

EN AJUSTES GENERALES:

• Mostrar imagen destacada: Si.
• Ubicación de imagen destacada: Sobre el título.
• Orientación del texto: Centro
• Color de texto: elige entre color oscuro o claro. O ve al apartado Ajustes avanzados de diseño y selecciónalo en «Título color del texto». Aquí también podrás elegir el tipo de fuente de letra o el tamaño del título.
• Usar color de fondo de texto: Si.
• Color de fondo de texto: elige color. En este caso he seleccionado #41596b.

EN AJUSTES AVANZADOS DE DISEÑO:

• Título fuente: elige la fuente del texto. En este caso he seleccionado Oswald.
• Título tamaño de fuente: en este caso, he seleccionado 30px.
• Título color del texto: en este caso he seleccionado el color blanco #ffffff.

EN CSS PERSONALIZADO:

Esta configuración es opcional y con ella agregarás un «efecto caja» en el título de publicación y una línea de separación entre los metadatos y el título.

– Metadatos:

border-top: 1px solid #fff2e1;
padding-top: 5px;
padding-bottom: 0px;

– Imagen destacada:

margin-top: -20px!important;
padding: 20px;

La configuración sería la siguiente:

Con estas configuraciones, el diseño de la publicación del post se quedaría así:

Capa de color sobre imagen destacada de publicación

Ahora, en el caso de que tu cometido sea destacar el título del post sobre la imagen, el siguiente efecto para el título de las publicaciones de un blog con Divi te va a gustar.

Esta configuración es un poco más compleja que las anteriores, pero siguiendo los pasos resulta fácil de implementar.

Lo primero que tienes que hacer es eliminar la imagen destacada del post en caso de que la hubieras subido ya.

Primero habrá que configurar los ajustes de la Fila del Módulo Título de Publicación de Divi.

EN AJUSTES GENERALES:

• Relleno personalizado: marca superior 100px, derecha 75px, base 100px izquierda 75px.
• Si quieres que la fila se vea a tamaño completo, selcciona la casilla «Hacer que esta fila tenga anchura completa». En este caso no lo he seleccionado.

CSS PERSONALIZADO:

• En elemento principal pega este código y sustituye los colores a tu gusto y la url por la de tu imagen de fondo (la encontrarás en Medios de WordPress).

background-repeat: no-repeat !important;
background-attachment: fixed;
background-position: top center !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
background-size: cover !important;
background-image:
linear-gradient(rgba(39, 63, 107, 0.86), rgba(39, 63, 107, 0.86)),
url(‘http://localhost:8888/blog-divi/wp-content/uploads/2017/03/slider-decoracion-3.jpg’);
outline: solid 1px #fff;
outline-offset: -20px;

La configuración sería la siguiente:

Después toca configurar los ajustes del Módulo Título de Publicación de Divi.

EN AJUSTES GENERALES:

• Mostrar imagen destacada: No.
• Oientación del texto: Centro.
• Color del texto: Claro.
• Usar color de fondo del texto: No.

EN AJUSTES AVANZADOS DE DISEÑO:

• Título fuente: elige la fuente del texto. En este caso he seleccionado Oswald.
• Título tamaño de fuente: en este caso, he seleccionado 30px.
• Título color del texto: en este caso he seleccionado el color blanco #ffffff.

La configuración sería la siguiente:

Con estas configuraciones, el diseño de la publicación del post se quedaría así:

En este ejemplo de título de publicación, la sección consigue un efecto paralaje aunque no se muestre en esta imagen.

Si esto lo piensas hacer numerosas veces en todos los post de tu blog, no hará falta que cada vez que publiques una entrada realices el mismo proceso. La solución está en guardar esta sección en la Biblioteca de Divi, marcarla como «Global» y automáticamente podrás agregarla en las próximas entradas.

Estas configuraciones para los títulos de las publicaciones de un blog con Divi son solo una pequeña demostración de la gran capacidad de configuración que Elegant Themes incluye en su plantilla Divi. De esta forma es posible crear blogs totalmente distintos y seguir el estilo de diseño que más se adapte a tu imagen de marca.

¿Y tú? ¿Qué diseño de blog sigues en tu web?