Opt In Image
APÚNTATE Y DESCARGA GRATIS
1.- Guía para crear una Página web Profesional
2.- Vídeo Training, Mis Plugins Imprescindibles WordPress
  • Recibe todos los domingos las últimas entradas del blog.
  • Recibe contenidos exclusivos.

Te puedes dar de baja en cualquier momento. Nada de Spam

 

En este post vamos a ver cómo crear un blog con Divi y WordPress. Divi es mi plantilla favorita para WordPress, la utilizo en mis dos blogs y en todos los sitios web que realizo para mis clientes, ya sean blogs, webs corporativas o tiendas online con Woocommerce.

En el post veremos cómo crear la página de principal del blog de la manera estándar y utilizando el módulo blog de Divi.

DESCUENTO DIVI

 

 

1.- CREAR UNA PÁGINA DE BLOG ESTÁNDAR CON WORDPRESS

 

Existen diferentes maneras de crear la página principal del blog con WordPress. Podemos crear la página principal del blog de la manera habitual en WordPress o utilizar el page builder de la plantilla Divi.

 

Si estás inmerso en la creación de un blog seguro que te interesa este post que escribí sobre las diferente etapas que pasa un bloguer a la hora de la creación de su blog: Cómo crear un blog paso a paso

 

Para el método estándar existen dos opciones:

 

 

A.- MOSTRAR LAS ENTRADAS DE BLOG EN LA HOME O PÁGINA DE INICIO

 

En este caso mostraríamos las entradas de blog en la página de inicio o home de WordPress. Esta es la configuración que viene por defecto en WordPress.

Lo puedes ver en el panel de administración de wordpress en: “Ajustes > Lectura”.

Si en la opción “Página frontal muestra” tienes seleccionada la opción “Tus últimas entradas”, significa que en la página de inicio mostrará las últimas entradas de blog.

 

Ajustes de lectura blog wordpress

En Ajustes > Lectura le indicaremos a WordPress que ha de mostrar en la página de inicio

 

Esta es la configuración estándar, y de esta manera se mostrarán las entradas de blog en la página de inicio ordenadas de más reciente a más antigua, con una paginación y un sidebar o barra lateral.

 

 

B.- MOSTRAR LAS ENTRADAS DE BLOG EN UNA PÁGINA INTERIOR

 

Ahora vamos a ver como mostrar la página principal del blog en una página interior del sitio web. Es decir, el blog no aparecerá en la home.

Esto es muy habitual hoy en día ya que la página de inicio a pesar de ser un blog se suele utilizar para mostrar los servicios y productos más destacados del bloguer.

En mi caso, yo tampoco muestro el blog en la página de inicio, tengo una página interior dedicada a mostrar las últimas entradas del blog.

Para mostrar el blog en una página interior del sitio web de la manera tradicional o estándar iremos otra vez en el panel de administración a: “Ajustes > Lectura”.

Ahora en la opción “página frontal muestra” seleccionaremos:

i.- Página de inicio: seleccionaremos la página que hemos dedicado a la home o inicio (tenemos que haberla creado y publicado previamente, aunque esté sin contenido)

ii.- Página de entradas: Aquí seleccionaremos la página interior en la cual queremos mostrar las entradas de blog (debemos haber creado esta página previamente).

 

Manera standar de motrar el blog en una página interior

Mostrar el blog en una página interior del sitio web con WordPress

 

De esta manera estamos indicando a WordPress que página queremos mostrar como inicio o home de la web y cual como blog.

 

 

2.- CREAR LA PÁGINA PRINCIPAL DEL BLOG CON EL DIVI BUILDER Y EL MÓDULO BLOG

 

Si para mostrar las entradas de blog utilizamos el módulo blog del divi builder vamos a poder crear una pagina de blog mucho más espectacular.

Podemos insertar el módulo blog en la página de inicio o home del sitio web, y de esta manera mostrar las entradas de blog en la home junto con otros recursos o mostrar el blog en una página interior dedicada a ello utilizando también el módulo blog del divi builder.

También podemos hacer las dos cosas. Mostrar en la home solo algunas pocas entradas de blog, por ejemplo las 5 últimas y dedicar una página interior para mostrar un bloque con muchas más entradas de blog.

De una manera u otra tendremos que utilizar el Divi builder y el módulo blog.

Para la página principal del blog también tendremos que utilizar el módulo sidebar o barra lateral del divi builder para mostrar los típicos widgets de wordpress (en caso de que queramos hacerlo).

 

A.- MOSTRAR LAS ENTRADAS DE BLOG EN LA HOME O PÁGINA DE INICIO CON EL MODULO BLOG

 

Vamos a ver ahora un ejemplo de cómo podríamos insertar el módulo blog en la página de inicio o home de mi web para mostrar las 6 últimas entradas del blog.

Este sería el resultado visual de añadir a mi home las 6 últimas entradas publicada del blog:

 

Cómo poner el módulo blog del divi builder en la página de inicio

Resultado de insertar el módulo blog de divi en la home

 

Para hacer esto, lo primero que debemos hacer es editar la página de inicio de nuestro sitio web.

Una vez allí, añadiremos una nueva sección donde insertaré una fila de una columna y el módulo blog. No es imprescindible añadir una nueva sección, pero yo lo voy a hacer así para que se vea más claro.

 

 

En la configuración del módulo blog, definiré las siguientes opciones:

  • Número de artículos: pondré un 6, para que solo se muestren los 6 posts más nuevos.
  • Incluir categorías: no marco ninguna categoría, para que se muestren entradas de blog de cualquiera de ellas.
  • Contenido: selecciono mostrar extracto, para que muestre una pequeña parte del contenido del post a modo de extracto.
  • Mostrar imagen destacada: selecciono “si” para que añada la imagen destacada a cada post.
  • Botón de leer más: selecciono “Si” para que muestre un enlace de “leer más” al final de cada extracto.
  • Mostrar autor: seleccionaremos “SI”, si queremos que muestre el autor del post.
  • Mostrar fecha: si queremos que muestre la fecha de creación de la entrada de blog, marcaremo “Si”
  • Mostrar categorías: si queremos que muestre a la categoría que pertenece cada entrada de blog, marcaremo “Si”
  • Mostrar número de comentarios: seleccionaremos “Si” si queremos que muestre el número de comentarios del post.
  • Mostrar paginación: si queremos que muestre paginación. En este caso yo seleccionaré que no, ya que en la home no me parece adecuado.
  • Color de fondo de baldosa de cuadrícula: esta opción de diseño ser refiere al color de fondo del bloque de texto que aparece bajo la imagen destacada. En la siguiente imagen puedes ver a qué me refiero. Voy a poner un gris claro #f5f5f5

 

color de fondo del bloque de texto del resumen de la entrada de blog

Estableciendo el color de fondo de la caja de texto del post

 

  • Disposición: Aquí elegimos si queremos que se muestren varios post por cada fila o un solo post por fila (modo tradicional). En nuestro caso seleccionaremos rejilla.
  • Usar sombra: al marcar “si” aparecerá un reborde sombreado en cada post.
  • Superposición de imagen principal: seleccionaremos “encendido” para que se muestre una capa sobre la imagen destacada del post al pasar el ratón sobre ella.
  • Color icono de superposición: elegiremos blanco para que el icono se muestre en blanco.
  • Color capa superpuesta al pasar el ratón: pondremos un color semitransparente para que al pasar el ratón por la imagen destacada del post se vea una capa superpuesta, pero que detrás de la misma se pueda distinguir la imagen de la entrada de blog.
  • Selector de icono al pasar el ratón: seleccionaré el icono del “+”.

 

capa superpuesta al poner el ratón sobre la entrada de blog

Efecto hover al pasar el ratón sobre el resumen del post

 

Te presento mi Curso WordPress online con Divi: Más info

 

En cuanto al formato del título de cada post lo único que haré será ponerlos en negrita y a un tamaño un poco mayor.

Para ello realizaré las acciones:

  • Cabecera fuente: marcaré la opción de “negrita”
  • Cabecera tamaño de fuente: seleccionare 19px

 

En la personalización del diseño del cuerpo del texto que se refiere a la forma de mostrarse el extracto de texto del post no voy a hacer ningún cambio.

En la personalización de los meta datos, que se refiere a la zona donde pone el autor, fecha, número de comentarios, etc., lo único que voy a hacer es cambiar el color del texto:

  • Metadatos color del texto: pondré el color azul #336699

 

 

3.- CREAR UNA PÁGINA ESPECÍFICA PARA EL BLOG CON EL DIVI BUILDER

 

Crear una página específica para el blog utilizando el Divi Builder va a ser similar a lo que hemos visto en el apartado anterior, ya que debemos volver a usar el módulo blog.

 

Lo primero que haremos será crear una página que llamaremos “Blog”.

Vamos a hacer una estructura muy sencilla, aunque esta se podría complicar todo lo que quisiéramos.

Te muestro una imagen con la estructura que queremo establecer en la página (vista desde el page builder tipo backend):

 

estructura página blog wordpress con divi

Estructura que queremos para la página dedicada al blog

 

 

CABECERA

Vamos a añadir una sección de ancho completo en la parte superior, donde insertaremos un módulo de “imagen de anchura completa” y ahí pondré la imagen de cabecera.

 

BLOG

En el caso anterior como estábamos trabajando en la home no hemos incluido la barra lateral o sidebar con los típicos widgets del blog, pero en una página interior ya es otro cantar. Aunque también debes tener en cuenta que ya hay muchos blogueros que han decidido prescindir de la barra lateral en las entradas de blog.

Ahora añadiremos una “sección especial” eligiendo la distribución de columna ancha a la derecha (donde podremos el módulo sidebar) como te muestro en la siguiente imagen:

 

seccion especial divi para añadir barra lateral

Estructura con sección especial para sidebar a la derecha

 

En la columna de la derecha insertaremos el módulo Barra lateral y en la configuración seleccionaremos en área de widget: “Barra lateral”.

Para añadir widgets a dicha barra lateral tendrás que ir a “Apariencia > Widgets”.

En diseño, en la opción de “orientación” seleccionaremos: “Derecha”.

En la columna de la izquierda insertaremos el módulo blog con la misma configuración que realizamos en el apartado anterior (aunque ahora si permitiremos la paginación).

 

FORMULARIO

Finalmente insertaremos una nueva sección estándar con una fila de una sola columna y en ella el módulo “formulario de contacto”.

 

El resultado será algo como esto:

 

Blog realizado con Divi y wordpress

Ejemplo página interior dedicada al blog hecha con Divi

 

Si en el módulo blog marcamos la opción “Disposición: ancho completo” en vez de “Disposición: rejilla”, se mostrarán un solo post por cada fila a la manera más tradicional.

 

disposición ancho completo modulo blog divi

Modulo blog Divi al seleccionar disposición de ancho completo en vez de rejilla para las entradas

 

 

 

4.- VENTAJAS E INCONVENIENTES DE CADA MÉTODO PARA CREAR LA PÁGINA PRINCIPAL DEL BLOG

 

 

A.- MOSTRAR ELEMENTOS ESPECIALES:

 

La principal ventaja de utilizar una página para el blog creada con el Divi builder es que vamos a poder añadir a la página principal del blog otros elementos como pudieran ser: imágenes, sliders, formulario de contacto, acordeones, botones desplegables, iconos y cualquier otro recurso del Divi Builder (page builder de divi).

Si por el contrario, usamos el método estándar para crear la página del blog, en ella solo podrán aparecer las entradas del blog y el sidebar.

 

 

B.- MOSTRAR CATEGORÍAS ESPECÍFICAS:

 

Al crear la página principal del blog wordpress con el Divi builder y el módulo blog podremos mostrar solo determinadas categorías y otras no. Es decir, podremos establecer un filtro que muestre solo entradas de blog que pertenezcan a determinadas categorías.

Con el método tradicional para añadir el blog a wordpress no podremos establecer este filtrado de entradas de blog por categorías (solo a través de widget de categorías de wordpress).

 

 

C.- DIFERENTES FORMAS DE MOSTRAR LAS ENTRADAS DE BLOG

 

Al crear las entradas de blog con el Divi builder podremos mostrar las entradas o posts del blog de variadas formas, y no solo de la manera tradicional en la cual la entrada ocupa todo el ancho disponible.

 

 

5.- CÓMO CRERA ENTRADAS DE BLOG PERSONALIZADAS CON EL DIVI BUILDER

 

Con la maravillosa plantilla Divi no hace falta que nos limitemos a la típica estructura de entrada de blog con la imagen destacada encima, título del post, metadatos y contenido del post.

Con divi podremos crear una estructura personalizada de entradas de blog, ya que desde hace ya bastante actualizaciones es posible utilizar el Divi builder en la creación de entradas de blog.

Y no solo eso, sino que además Divi ha creado módulos específicos de las diferentes partes fundamentales de una entrada de blog como el cajetín del autor, comentarios, compartir redes sociales, etc.

Pero como esto daría para un post completo, la creación de entradas de blog personalizadas con Divi lo veremos en otro post.

 

Bloguer especializado en WordPress, Woocommerce, Divi y Prestashop. Apasionado por la formación y el diseño web. Me gustaría que este blog te sirviera para ayudarte en el desarrollo de tu proyecto online, ya sea un blog, una web corporativa, cursos online o cualquier otro proyecto.
Mi otro blog, especializado en tiendas online: tiendaonlinemurcia.es

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información AQUÍplugin cookies

ACEPTAR
Aviso de cookies