Índice
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€).
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]
¡Hola! Me gustaría poder aplicarle el efecto zoom en las imágenes del módulo de Divi Blog Extras, ¿saben si hay algún css que poder aplicarle? Muchas gracias de antemano.
No veo por ningún sitio dónde descargar el plugin DIVI BLOG EXTRAS gratis.
¿Podriais echarme una mano a conseguirlo?
Gracias.
Hola, los precios del plugin son los que comentamos en el post. Desde el botón puedes acceder a los distintos planes. No conocemos la opción gratuita.¡Saludos!
Estaba buscando la posibilidad de que las entradas del |módulo por defecto «Blog» de Divi aparezcan desordenadas (aleatoriamente)
Pero mi problema no se soluciona porque tengo varios módulos Blog en el mismo sitio web y solo quiero que en uno aparezcan desordenados.
Entonces creo que necesitaré poner en el que quiero un CSS.
Podría ayudarme? Qué código sería y en qué lugar de los ajustes del módulo.
Muchas gracias.
¡Buenos días!
Tengo un problema. En el blog tengo instalado el block extended y en móviles se ve fatal ¿sabes como arreglar esto?
Gracias 🙂
Hola!
Tras leer este post me he comprado el pluging y estoy encantada.
Eso sí, con la última actualización (noviembre 2018), me ha desaparecido el pluging de wordpress, como si se hubiese desactivado.
La cosa es que aparece en listado de pluging como activado, pero como se intuye…. ha desaparecido de la edición de páginas y por tanto, mi blog ha quedado desconfigurada.
¿A alguien más le ha ocurrido algo similar?
Gracias!
Hola!
Me encanta este pluging y estoy pensando en descargármelo para mi blog.
¿Pueden combinarse distintos tipos?
Es decir, se podría poner «classic» y debajo, «block extended» ¿se puede hacer?
Gracias!
Hola Belén! sí puedes hacerlo, ya que funciona con el propio constructor de Divi y tu vas añadiendo los módulos que quieras y los puedes configurar individualmente. Saludos!
Buenos días
muchas gracias por este artículo, porque creo que es justo lo que necesitaba, y lo explicais de una manera muy clara y fácil. Sólo me surge una duda: ¿con este plugin puedo personalizar la barra lateral de cada post?. Mi dea es que la página del blog vaya sin la barra, pero que cada post individual, tenga una. ¿Es esto posible?. Es que, hasta ahora,la barra que consigo tener con el módulo de DIVI es una barra que no me permite personalización en cuanto a tipografía, o color y necesito saber si con este plugin sí podré hacerlo.
Muchísimas gracias
Un saludo
Hola Pilar! Me alegro que te haya sido útil este artículo.
Con este plugin puedes personalizar la página de blog a tu gusto. La puedes personalizar en ancho completo o añadir un módulo de «Barra lateral», puesto que al fin y al cabo se personaliza con el constructor de Divi.
En cuanto a los posts individuales, automáticamente se mostrarán con el sidebar general que hayas diseñado en el personalizador del tema de Divi, tanto estilo de títulos como widgets… Y si quieres mostarlos en ancho completo, lo puedes hacer individualmente desde la edición.
Pero actualmente no conozco una forma de tener un sidebar diferente para lo posts que no sea instalar otro plugin, por ejemplo este: https://wordpress.org/plugins/easy-custom-sidebars/
Gracias y hasta pronto!
Hola, a ver si me puedes ayudar con algo que me tiene loco.
Instale divi blog extras en mi web y a la hora de visualizar el post no consigo hacer que se vea la imagen. Únicamente se ve cuando accedo a leer más.
Muuuchas gracias
Hola Napoleón, como te comentaba, así por lo que cuentas no sabría decirte cuál es tu problema. Lo más recomendable es contactar directamente con el soporte del plugin: https://diviextended.com/support/. Saludos!
Buenos días,
yo tengo instalado el tema extra de divi, por lo que he leído este plugin no valdría?? Me gusta mucho, ya que no me deja personalizar nada las paginas de las categorías.
Espero me podáis ayudar.
Hola, he creado una página BLOG dentro de mi web con el tema hijo de DIVI. Le he dado la funcionalidad de que sea la página de entradas de los POST que iré subiendo, aunque tb la he probado sin darle esa funcionalidad.
La página la configuro con el modulo blog DIVI EXTRAS (que compré recientemente) y no hay manera de que se vea el diseño una vez que actualizo y publico. También he probado con el modulo BLOG que trae por defecto DIVI y tampoco se ven cambios.
Lo único que veo en la Página Blog es la barra latera a la derecha que si cambia si ajustas los widgets, pero las entradas se mantienen igual, como por defecto.
Ya he probado de todo pero no sé que opción debo de tener mal puesta para que no se me vean las entradas según he definido en la PAGINA BLOG con el modulo blog divi extra o el propio modulo Blog como le decía anteriormente.
He mirado las opciones de tema de divi, y no se si hay algo que haya configurar ahí, o si hay que hacer algo en categorías o no tiene nada que ver con eso…
Bueno, agradezco su ayuda, porque estoy que no doy con la tecla. Soy fotógrafo y no tengo mucha idea de diseño, todo lo he tenido que hacer yo mirando e investigando pero ahora ando bastante bloqueado con esto. Le dejo mi web por si quiere echar un vistazo a la página blog a ver si me puede echar una mano.
Muchas gracias !
Hola Jorge!
Antes de nada gracias por seguir el blog 😉
Así con lo que me comentas no sabría decirte cuál podría ser el problema, ya que por lo que dices, lo estás haciendo bien. No obstante, ya hace días que dejaste tu comentario y he podido ver en tu web que ya se muestran los posts, ¿Lo pudiste solucionar?
Seguimos en contacto. Un saludo!
Hola, Buena tarde!
Tengo un blog montado en mi página web, en la pantalla donde aparecen las entradas lo tengo configurado a que me muestre 6 entredas por página pero no me muestra el número de páginas para poder ver el resto de las entradas, sabes que parte tengo que editar para poder ver activar esa función?
Agradeceré mucho tu asesoría!
Saludos 🙂
Hola José Luis!
Por ahora, no hay opción de activar la numeración de las páginas del blog desde la plantilla Divi. Tampoco desde este plugin de Divi Blog Extras.
Para añadirla, puedes usar el plugin gratuito WP-PageNavi: https://wordpress.org/plugins/wp-pagenavi/, compatible tanto con Divi como con el módulo Blog de Divi.
Espero haberte ayudado 🙂
Hola, gracias por el interesante artículo.
Sólo una cosa, para que se mantenga actualizado, los precios a fecha de hoy (8/10/2017) son de 19$ (16,19€) para un sitio y de 49$ (41,76€) para varios sitios.
Saludos
Hola Enrique!
Muchas gracias por tu aportación. Ya están los precios actualizados 😉 Saludos!