Índice
Siempre comento en este blog que el tema Divi es una excelente opción para crear una web en WordPress, y las dos principales razones son el diseño limpio y actual de esta plantilla y la fácil usabilidad de su constructor web.
Es cierto que si únicamente se trata de un blog, la plantilla incluye gran cantidad de funciones que puedes no necesitar, como por ejemplo el módulo de «Tienda», pero la diferencia de este constructor web en comparación con otros, es que apenas influye en la velocidad de carga de la web.
Sin embargo, proporciona herramientas que te pueden servir para hacer de tu empresa online más profesional, como la facilidad de crear, entre otras muchas cosas, landing pages, formularios de contacto, galerías de imágenes, contadores de barra, acordeones o diferentes formas de crear un blog con Divi, las cuales vamos a comentar a continuación 😉
Crear un blog con Divi paso a paso
Crear un blog con la plantilla Divi, en lo que al diseño se refiere, es bastante sencillo e intuitivo. Pero antes de empezar tendrás que configurar tu WordPress como un blog, tal y como lo harías con cualquier otra plantilla;
- Sube la plantilla a WordPress, en WordPress -> Apariencia -> Temas -> Añadir nuevo.
- Instala el tema hijo de la plantilla y actívalo.
- Selecciona el Estilo Blog en la plantilla Divi, en WordPress -> Divi -> Opciones del tema -> General -> Modo Estilo Blog.
Una vez tengas la plantilla lista para usar, es el momento de dar estilo y diseño a tu blog con la plantilla Divi.
Cómo personalizar un Blog en la plantilla Divi
Divi te lo pone fácil y te permite configurar prácticamente todo lo que necesitas para arrancar tu blog desde un mismo panel de configuración.
Este panel se encuentra en WordPress -> Divi -> Personalizador de temas.
Vemos cada apartado con detalle a continuación:
AJUSTES GENERALES
Añade un título a tu blog y una descripción corta, que será los que mostrará Google en las búsquedas.
Añade imagen o color de fondo al Blog, configura el ancho de la barra lateral y selecciona la tipografía de los títulos, párrafo y metadatos (color, tamaño, fuente, interlineado y espacio entre letras).
CABECERA Y NAVEGACIÓN
Elige aquí el formato de la cabecera, añade tu logo, añade o elimina elementos, selecciona el diseño del Menú principal, del Menú secundario, de la barra de navegación fija (se activa o desactiva en Opciones del Tema) y del Menú desplegable.
PIE
Diseña y añade widgets al Menú Inferior (distribución de columnas), edita el estilo del Pie de página (edita los créditos de Divi) y añade o elimina los iconos de las redes sociales de tu blog.
BOTONES
Aquí puedes definir de forma general, cómo quieres que se muestren los botones de la plantilla.
Por ejemplo el botón de «Enviar comentario» o «Responder» del blog se ajustarán al estilo que marques en este apartado.
BLOG
Puedes mantener los estilos de tipografía generales en el resto de la web y seleccionar estilos personalizados solo para las entradas del blog.
ESTILOS PARA DISPOSITIVOS MÓVILES
Aunque la plantilla Divi es responsive, te permite personalizar algunos ajustes para que tu web o blog se muestre a tu gusto en los distintos dispositivos; tablet y smartphone.
Personaliza aquí el formato del Menú Principal en estos dispositivos, la altura de las secciones y de las filas y el tamaño de titulos y párrafos.
COMBINACIONES DE COLORES
Selecciona una combinación de colores para la web o déjalo por defecto si has configurado cada sección de forma individual.
MENÚS
Elige los elementos que deseas mostrar en la barra del Menú Principal y del Menú Secundario del blog y personaliza cada uno de ellos.
WIDGETS
Elige los widgets que deseas mostrar tanto en la Barra Lateral como en el Menú Inferior del blog.
PORTADA ESTÁTICA
Selecciona si quieres que en tu página principal se muestre una página estática o directamente las entradas de tu blog.
Este ajuste también se puede seleccionar en WordPress -> Ajustes -> Lectura, donde te permite elegir, por ejemplo, qué número de entradas quieres que se muestren en una página.
CSS ADICIONAL
Añade aquí todos los códigos que necesites para modificar detalles del estilo de tu blog.
También puedes acceder a este apartado desde WordPress -> Divi -> Opciones del Tema -> CSS Personalizado.
Comienza a escribir tus post y ¡a publicar!
Muchas de estas opciones, se pueden configurar desde el panel de WordPress, pero te resultará más sencillo si lo editas desde el Personalizador de temas de Divi, como te hemos mostrado, pues dispones de todas los ajustes en un solo apartado.
Usar la plantilla Blog de Divi
Siempre que lo necesites, Divi pone a tu disposición las plantillas predefinidas con diseño de blog.
Y añadirlas es tan sencillo como clicar en «Cargar de Biblioteca» y elegir la plantilla. Esta se cargará automáticamente en tu blog.
Divi incluye dos plantillas predefinidas para blogs;
- Blog estándar, con el aspecto de toda la vida y con barra lateral.
- Blog ladrillos o rejilla, con los posts en forma de bloques.
Ambos diseños incluyen una imagen con título en la cabecera, seguida de las publicaciones del blog.
Una vez selecciones una plantilla predefinida, con el constructor podrás personalizar todas las opciones que se incluyen dentro del módulo «Blog» de Divi, las cuales, te ayudarán a crear un blog completamente personalizado y a tu gusto.
Configurar el módulo Blog de Divi
Otra opción es utilizar directamente el contructor web en la página donde quieres que se muestren las entradas de tu blog y añadir una sección con el módulo Blog de Divi. Si además quieres mostrar un sidebar a la izquierda o a la derecha de las entradas del blog, puedes añadir el módulo «Barra Lateral».
En los Ajustes generales del módulo «Blog» te permite configurar el formato, Ancho completo para Blog estándar o Rejilla para Blog en bloques.
También permite personalizar cuántas entradas quieres que se muestren en la página, qué categorías deseas incluir, el formato de fecha, añadir el botón de «Leer más», mostrar la imagen destacada…
En Ajustes avanzados, configura los ajustes de tipografía de los títulos, párrafos y metadatos (fuente, tamaño, color, internlineado y espacio entre letras).
Si no modificas nada de este apartado, automáticamente se usarán los estilos que hayas usado en la configuración general de la plantilla.
2 Ejemplos de blogs con Divi
Veamos un ejemplo de cada uno de estos dos estilos de blogs con Divi (Estándar y Rejilla):
Blog estándar
El estilo de Blog Estándar es el de toda la vida, con sidebar lateral (izquierda o derecha) y con estractos de los útimos posts en la página principal.
El formato de entradas lo puedes configurar a tu gusto; puedes seleccionar una imagen destacada (manualmente en cada post o de forma general en Opciones del tema) e indicar hasta donde deseas que se muestre el texto (insertando etiqueta «leer más» en el editor).
Blog en Rejilla
Este es el otro estilo de blog que incluye Divi. Este formato es menos común pero cada vez se usa más.
Puedes ajustar manualmente la longitud de los estractos que quieres que se muestren en cada post, activando la casilla «Usar estractos cuando se defina» en Opiones del tema.
Estos son solo dos ejemplos generales de cómo crear un blog con Divi, pero dependiendo de tu temática y marca, o añadiendo estilos personalizados con código, puedes cambiar por completo y personalizar cualquier detalle. Recuerda que Divi incluye un apartado de CSS personalizado en cada módulo o incluso dispone de un campo donde insertar publicidad para tu blog.
Pero si lo que quieres es diseñar un blog increíble en muy poco tiempo, entonces te recomendamos usar esta extensión para Divi.
hola!
se puede hacer un menú en el blog de divi?
Hola! Muchas gracias por ayudarnos. Yo hice un Blog en DIVI, usando el Constructor Visual y agregando un módulo de Blog con formato grilla. Todo funciona perfectamente. Mi pregunta es:
¿Cómo puedo configurar que las personas puedan subscribirse a mi Blog?
¿Qué herramienta necesito para lograr esas subscripciones, o DIVI ofrece una solución dentro de su configuración?
Gracias de antemano!!!
Hola Maria Silvia, gracias por comentar.
En Divi tienes el módulo de opt-in para crear un formulario de suscripción, pero si necesitas un formulario más completo y con más opciones, puedes usar el plugin Bloom, también de Elegant Themes. Te dejo varios enlaces que te pueden interesar:
https://divesp.com/crear-formularios-de-suscripcion-con-bloom/
https://divesp.com/conectar-divi-mailchimp/
Espero que te sirvan de ayuda.
Gracias y saludos!
Buen artículo, seguiré leyendo, saludos.
Hola. Mi página de blog por defecto no muestra los títulos y el extracto de cada entrada sino que muestra las notivias compleyas una detras de otra. En la cofiguracion generica de WordPress esta configurado pata que salgan dolo extractos. ¿Sabrias a que es debido? Gracias
Hola Mateo! ¿Has seleccionado el botón de «modo estilo blog» que hay en las opciones del tema? ¿Has probado a utilizar la etiqueta «leer más» que puedes añadir en la edición individual de cada post?
Saludos!
Hola a mí siempre me queda a tres columnas la rejilla. La quiero en dos columnas y he probado este tutorial donde dicen que se hace con solo CSS (al final)
https://www.elegantthemes.com/blog/divi-resources/how-to-style-your-divi-blog-page-to-look-like-elegant-themes-new-design
pero mi blog sigue en tres columnas. ¿Alguna solución? ¡Gracias!
Hola, veo que cuando pones el blog en modo rejilla, todos los recuadros quedan de la misma altura, eso es evidentemente porque todos los titulos ocupan los mismos renglones y porque el texto que muestras de cada articulo tiene más o menos la misma longitud. En mi caso los titulos de los articulos no ocupan siempre los mismos renglones, ni el texto que muestro es de la misma longitud, por eso la rejilla aparece descuadrada, unos recuadros más bajos o altos que otros. ¿Como podría hacer para que todos quedasen igual, a la misma altura?
Hola Marcelo!
Tienes razón y este es uno de los inconvenientes que tiene usar un blog de rejilla o grid. Aunque si te fijas, en el mismo blog de Elegant Themes no coincide la longitud y no se queda mal. Así que se trata más bien de ir jugando un poco con la longitud de los títulos, con el tamaño de letra, el grosor, el padding… o también puedes modificar el número de caracteres de los extractos (Divi por defecto usa 270 caracteres). Esto último lo explico con detalle en la guía gratuita que ofrezco con los 7 Trucos de diseño para Divi.
Gracias por seguir el blog! Saludos.
Buenos dias
Permiteme una consulta por favor.
Tengo un blog con los post en modo de rejilla, pero al actualizar la plantilla Divi a la ultima version en Chrome se siguen viendo en modo rejilla, pero en otros navegadores como Opera o firefox se ven en modo “ancho completo”. He revisado en la configuracion del blog y esta elegida la opcion “rejilla”.
Antes de la actualizacion de la plantilla se veian igual, en rejilla, en todos los navegadores.
¿Tienes alguna idea de porque se ven en ancho completo en Firefox y Opera?
Muchas gracias . un saludo!
Hola Rafa!
Si hubieras realizado un cambio en el blog para pasarlo de ancho completo a rejilla, te diría que borraras la caché de cada navegador, pero si comentas que siempre ha estado en formato rejilla y de repente ha cambiado, no sabría decirte qué problema puedes tener 🙁
¿Tienes instalado algún plugin para alguna función del blog, que pudiera ser incompatible con la actualización de Divi?
Dejamos aquí tu duda por si alguien tiene el mismo problema o alguna solución.
Suerte y gracias por seguir el blog!