Ya en otras ocasiones hemos hablado de cómo crear un blog con la plantilla Divi. Recordemos que esta plantilla cuenta con un módulo específico en su constructor, con el que puedes diseñar tu blog de forma estándar o en rejilla (masonry).

Si deseas configurar el formato de tu blog con un diseño diferente, tendrás que recurrir al desarrollo o a extensiones.

Hoy te vamos a hablar del plugin Divi Blog Extras, una herramienta muy útil que incluye 7 formas diferentes de diseñar un blog con la plantilla Divi y personalizar el formato de las entradas fácilmente.

Tras probarla vamos a mostrarte, en este post, cómo funciona y cuál es el resultado final.

¡Te va a encantar!

¿Para qué sirve el plugin Divi Blog Extras?

Divi Blog Extras es una extensión desarollada por Divi Extended, que sirve para añadir un estilo diferente y original a tu blog con Divi.

Por ahora incluye 7 diseños elegantes de blogs con Divi que no tienen ningún desperdicio. Realmente da un aspecto muy profesional a la web, sin perder la esencia de la plantilla, pero para nuestro gusto, mejorando muchísimo las opciones de diseño de blog que vienen por defecto en Divi.

La ventaja es que funciona tanto para diseñar posts individuales como páginas individuales.

Además, al incorporarse directamente como un módulo más del constructor, es posible añadirlo a cualquier página individual. De esta forma podrás personalizar la página de categorías de Divi, algo que nos parece esencial y por lo que nos soléis preguntar a menudo.

Para ello, habría que elegir primero la categoría que quieres mostrar en el resumen de posts y después hacer una redirección desde la url original de categoría.

Ejemplos de Blogs usando el plugin Divi Blog Extras

A continuación te mostramos 7 ejemplos de blog con la plantilla Divi y el plugin Divi Blog Extras, todos ellos totalmente responsives:

Classic

El diseño Classic es idóneo para blogs en los que las imágenes tienen una gran importancia. Será perfecto para blogs de viajes, reportajes, fotografía…

En este diseño, se muestran las imágenes principales de las entradas del blog a tamaño completo. Debajo de estas, los extractos de ancho completo, el autor, las redes sociales y el número de comentarios.

El título de la entrada, la categoría y la fecha se muestran en la parte superior de la imagen.

Las líneas de separación que ves incluidas, también se muestran por defecto al elegir este formato de blog.

Puedes configurar para que se muestre un efecto de capa superpuesta al pasar el ratón por encima de la imagen.

Block Extended

Este estilo de blog es parecido al blog de rejilla que viene incluido en Divi, pero añade algunas mejoras.

Te permite elegir entre tres diseños diferentes de bloques, según la ubicación de la imagen principal de las entradas: Superior, Fondo o Alternate.

Esta selección la debes hacer dentro del módulo de Divi Blog Extras. Al seleccionar Block Extended, te aparecerá de forma automática un desplegable:

Una vez selecciones el estilo de blog, podrás configurar los elementos que quieras mostrar (autor, categoría, comentarios, fecha), el color e icono de superposición al pasar el ratón, el tamaño y color de los títulos y los textos…

Y muy importante indicar el número de palabras en el extracto (Excerpt), para que todas las entradas tengan la misma longitud.

Por defecto, en el estilo Block Extended se muestra un efecto zoom al pasar el ratón por las entradas del blog.

El autor, fecha y comentarios, se muestran en la parte inferior de la imagen principal.

Estos serían 3 ejemplos de blogs con estos layouts:

Superior

El estilo estándar de un blog masonry.

Fondo

Ubica la imagen principal de fondo, bajo una capa superpuesta. El extracto del post se muestraen la capa superior.

Alternate

Alterna los dos diseños de blogs anteriores.

Full Width Background

Este diseño de blog con Divi, muestra la imagen principal de fondo y en ancho completo.

El extracto del post lo ubica en una capa superior semi transparente y con el autor, fecha, categoría y comentarios arriba.

Esta capa va alternando la ubicación entre izquierda y derecha.

Recuerda incluir imágenes sin texto y que se adapten a estas dimensiones si no quieres que se vean cortadas.

Box Extended

Personalmente, este es uno de los diseños de blog que más nos gusta. Es muy visual, elegante y se diferencia de la mayoría de blogs que puedes encontrar.

Este estilo coloca una capa con el título y extracto del post, que se superpone a la imagen principal de la entrada.

Al igual que en el ejemplo de blog anterior, la ubicación del texto y las imágenes se van alternando entre izquierda y derecha.

Full Width

En el formato de blog de Full Width, las entradas de muestran en ancho completo, con la imagen principal a la izquierda y el texto a la derecha. Además, si activas la casilla de mostrar fecha, esta aparecerá en grande en el lateral izquierdo.

Es un formato de blog estándar que consigue mostrar el listado de entradas del blog de forma más recogida y ordenada.

Grid Extended

Es muy parecido al diseño de blog anterior, pero añade un espacio entre cada post de la página de blog. Aunque en ete diseño se resalta la categoría en la parte superior del extracto del post.

Como este diseño deja huecos donde se ve el fondo de la web, puedes añadir algún color a la fila, para que resalten más los posts.

Más Layouts

Por último, un diseño extra que incluye el plugin. Se trata de un estilo parecido al Block Extended que hemos comentado antes, pero mostrando las publicaciones en dos columnas.

Es decir, se trata de un diseño de blog masonry o rejilla con Divi en dos columnas.

Cómo configurar Divi Blog Extras paso a paso

Si ya te has fijado en cuál de estos diseños de blogs en WordPress eligirás para el tuyo, ahora vamos a ver cómo configurarlo todo paso por paso.

Ya te avisamos que es muy sencillo y no tardarás mucho tiempo.

Instalar el plugin Divi Blog Extras

Una vez tengas el plugin descargado en tu Pc, agrégalo a tu panel de WordPress como cualquier otro, en Plugins > Añadir nuevo. A continuación actívalo.

Al activar el plugin, directamente se agregará un nuevo módulo al constructor de Divi.

De esta manera, cuando entres en la edición de una página o post, actives el constructor y cliques en añadir un módulo, te aparecerá así:

Clica en él para agregarlo a la fila.

Este módulo solo se incluye a las secciones estándar y no a las secciones de ancho completo, aunque después, el blog sí se muestra en ancho completo. (Si no, configura la fila para que ocupe 1280px).

La ventaja de este nuevo módulo, es que además de poder customizar las entradas de tu blog para darles un diseño profesional, podrás customizar el resto de la página e incluir el blog en la parte que tú quieras.

Elegir el diseño para tu blog

Ahora, para diseñar el blog, entra en el módulo creado (icono de las tres líneas). La configuración se realiza igual que cualquier otro módulo de la plantilla Divi.

Es decir, con los apartados Contenido, Diseño y Avanzado (en las versiones anteriores de Divi eran Ajustes generales, Ajustes avanzados de diseño y CSS personalizado).

Ahora veamos cada uno de ellos:

Contenido

• Elige el tipo de blog: Classic, Block Extended, Full Width Background, Box Extended, Grid Extended, Full Width o More Layouts. Esta es la parte más importante de la configuración.
• Selecciona el número de posts a mostrar en el listado.
• Selecciona las categorías a mostrar (si vas a customizar una página de categorías, selecciona solo una de ellas).
• El formato de fecha.
• Habilita la imagen principal.
• Establece el número de palabras a mostrar en el extracto.
• Selecciona si quieres mostrar el botón de leer más, el autor, la fecha, las categorías, los comentarios y el botón de mostrar más posts.
• Establece un icono y un color para mostrar una capa superpuesta al pasar el ratón.
• Elige el color del texto.
• Y selecciona si quieres desactivar este módulo en algún dispositivo (smartphone, tablet, escritorio).

Diseño

• Selecciona el formato, el tamaño, el color, el espacio entre letras y la altura de línea de la cabecera o títulos de los posts.
• Selecciona el formato, el tamaño, el color, el espacio entre letras y la altura de línea de los metadatos (autor, categoría, fecha y número de comentarios).
• Selecciona el formato, el tamaño, el color, el espacio entre letras y la altura de línea del texto.
• Activa la casilla de «Borde» si quieres que se muestre y configúralo.

Avanzado

• Añade códigos personalizados si deseas modificar algo más del diseño.

Esta sería la configuración básica del módulo Divi Blog Extras.

Al tratarse de una módulo, acepta diferentes diseños. Por ejemplo, podrías alternar varios módulos, cada uno con un diseño diferente de blog, dentro de una misma fila, para crear un blog original con Divi.

Esto ya dependerá de cómo desees mostrar las entradas del blog. Divi Blog Extras te permite hacer infinidad de combinaciones de estilos.

Todos los diseños quedan a la perfección en ancho completo, pero si quisieras utilizar un sidebar, lo podrías añadir con el módulo de Divi, «Barra Lateral».

Por el contrario, si quieres mostrar los posts de tu blog en ancho completo, recuerda configurar el ancho de la fila en 1280px. De esta forma, también se mostrarán las imágenes de cabecera completas.

¿Cómo conseguir Divi Blog Extras?

Si sigues leyendo es porque realmente te está interesando este plugin tanto como a nosotros 😉

Te recomendamos este plugin después de probar otros parecidos. Sinceramente, esta extensión de Divi Extended es barata, sencilla de implementar y te permite crear diseños muy bonitos de un blog.

Al comprar Divi Blog Extras, te ahorrarás códigos, dinero y mucho tiempo, que podrás gastar, por ejemplo, en otras acciones para conseguir más clientes o más visitas a tu web.

Su precio es muy muy razonable teniendo en cuenta que es 100% compatible con la plantilla Divi, tiene licencia lifetime (de por vida), actualizaciones frecuentes, permite personalizar la página de categorías de entrada del blog e incluye 7 formas de diseñar un blog con Divi.

Esto te permite modificar de un estilo a otro, si con el tiempo no te convence. O incluso si adquieres la licencia multisitio, usar un estilo diferente en cada web.

• Precio para un sitio: 29$ (24,80€).
• Precio para varios sitios: 69$ (59,16€).

VER PLUGIN

Recuerda, que por el momento, esta herramienta para diseñar un blog, solo es compatible con el tema Divi y los temas hijos de Divi. Con el resto de plantillas no funciona, aunque pertenezcan a Elegant Themes.

[sin_anuncios_b30]