ElegantThemes

Cómo agregar publicaciones relacionadas a su plantilla de publicación de blog Divi

Los artículos relacionados son una excelente manera de aumentar el tráfico de tu blog. Los usuarios de tu blog verán publicaciones en las que ya están interesados. Esto los mantiene en su sitio web por más tiempo y aumenta su compromiso con usted y su sitio web. Afortunadamente, las publicaciones relacionadas son fáciles de agregar a la plantilla Divi Blog Posts en Divi Theme Builder. En este artículo, le mostraremos cómo.

avance

Esto es lo que hacemos en este tutorial.

Publicaciones relacionadas en el escritorio

Así es como se ve la publicación relacionada en el escritorio. El título y la parte superior de la publicación se superponen a la sección superior. La navegación trasera coincide con el estilo del diseño.

Publicaciones relacionadas en el teléfono

Publicaciones relacionadas en el teléfono

Así es como se ven nuestras publicaciones relacionadas en dispositivos móviles. Incluye una superposición del título y el primer artículo.

Publicaciones relacionadas en el teléfono

Esto también incluirá la navegación, como se muestra en la parte inferior de la publicación relacionada.

¿Qué necesitas para una plantilla de publicación de blog?

Hay varios elementos que se consideran esenciales para una plantilla de publicación de blog que funcione bien. Las publicaciones de blog requieren un título, una imagen destacada, metadatos y contenido del cuerpo. Sin ellos, no funcionaría bien como publicación de blog. Los usuarios se confunden o se alejan de la experiencia del usuario.

Otros elementos de publicación de blog

Algunos elementos no son esenciales para la funcionalidad de la plantilla de publicación de blog, pero agregan muchas funciones adicionales para mejorar la experiencia del usuario. Vale la pena considerar estos elementos.

Por ejemplo, puede incluir comentarios para que los lectores puedan interactuar con usted y otros lectores. Los CTA llamarán la atención sobre sus productos, servicios y boletines. Otra opción son las publicaciones relacionadas, que veremos en este tutorial. Las publicaciones relacionadas facilitan a los usuarios la búsqueda de contenido que les interese.

Cree o descargue su plantilla de publicación de blog

Puede crear su plantilla de publicación de blog desde cero o descargar una desde Elegant Themes Blog.

Para construirlo desde cero, asegúrese de incluir la lista de elementos esenciales que discutimos anteriormente. Agregue módulos Divi como el título de la publicación, la imagen destacada, los metadatos y el contenido de la publicación. A continuación, considere funciones adicionales que le gustaría incluir, como comentarios y módulos de suscripción por correo electrónico.

Elegant Themes ofrece muchas plantillas de publicaciones de blog gratuitas diseñadas para combinar con los paquetes de diseño gratuitos disponibles en Divi. Para descargar uno del blog de ET, simplemente busque en el blog «plantillas de publicaciones de blog gratuitas».

Para mi ejemplo, utilicé la plantilla de publicación de blog gratuita del Paquete de diseño de ciencia de datos.

Sube la plantilla de tu publicación de blog

Sube la plantilla de tu publicación de blog

Si descargó la plantilla del blog de ET, descomprímala para poder cargar el archivo JSON.Para subirlo, vaya a dos > generador de temas en el tablero de WordPress.escoger portabilidad y seleccione importar en modo abierto.hacer clic Seleccione el archivo y navegue a su archivo JSON y selecciónelo.hacer clic Importar la plantilla Divi Theme Builder y espere a que se complete la importación. ahorrar tu cambio.

  1. Ve a Divi en tu panel de WordPress.
  2. Seleccione Generador de temas.
  3. Elige la portabilidad.
  4. Seleccione Importar en el modo abierto.
  5. Haga clic en Elegir archivo y navegue hasta su archivo JSON y selecciónelo.
  6. Haga clic en Importar plantillas de Divi Theme Builder y espere a que se complete la importación.
  7. Guarde sus cambios.

Cómo agregar publicaciones relacionadas a su plantilla de publicación de blog

Cómo agregar publicaciones relacionadas a su plantilla de publicación de blog

Primero, haga clic editar icono Abra la plantilla de publicación de blog.

Cómo agregar publicaciones relacionadas a su plantilla de publicación de blog

A continuación, necesitamos añadir una nueva sección y una fila de una columna para nuestro nuevo módulo de blogs. Mirando la plantilla en la vista de estructura alámbrica, vemos que la plantilla contiene un módulo Post Slider en la parte inferior. Quitaremos este control deslizante y usaremos esta fila, pero primero, arrastre Sección sobre Llamada a la acción.

Cómo agregar publicaciones relacionadas a su plantilla de publicación de blog

Después de mover la sección, quite el control deslizante de la publicación.

Cómo agregar publicaciones relacionadas a su plantilla de publicación de blog

Esta parte ha sido diseñada fondo negroSi agrega el fondo usted mismo, abra la configuración en esa sección y establezca el fondo en negro.

  • Color de fondo: #000000

Cómo agregar publicaciones relacionadas a su plantilla de publicación de blog

A continuación, seleccione el ícono gris más y agregue un Módulo de blogs.

Artículos relacionados Blog Configuración del módulo

Artículos relacionados Blog Configuración del módulo

La configuración se abrirá automáticamente donde puede elegir. Cambié a la vista de escritorio en vivo para ver cómo se ve el módulo en el diseño.

Salir tipo de mensaje Establecer para publicar.configurar recuento de entradas a 3. En Categorías incluidaspara seleccionar la categoría actual. Si desea crear una plantilla de publicación de blog para una categoría específica, seleccione esa categoría aquí. Puede encontrar más información sobre la asignación de plantillas de publicaciones de blog a categorías específicas en el artículo Cómo usar diferentes plantillas de publicaciones de blog para diferentes categorías con Divi.

  • Tipo de publicación: publicación
  • Número de publicaciones: 3
  • Categorías incluidas: categoría actual

Artículos relacionados Blog Configuración del módulo

seleccione sí Usar extractos de publicaciones. Cambio longitud del extracto a 150.En Elementos, seleccione Sí Mostrar imagen destacada.

  • Usar extracto de la publicación: sí
  • Longitud del extracto: 150
  • Mostrar imagen destacada: sí

Artículos relacionados Blog Configuración del módulo

También en Elementos, seleccione mostrar extracto y paginación.

  • Mostrar extracto: sí
  • Mostrar paginación: sí

Módulo Blog de artículos relacionados con estilos

Módulo Blog de artículos relacionados con estilos

A continuación, vaya a la pestaña Diseño.asegurarse Superposición de imagen destacada activado.Cambio Color del icono superpuesto al blanco y Color de fondo superpuesto a rgba(65,226,186,0.62).

  • Superposición de imagen destacada: activada
  • Color del icono de anulación: #ffffff
  • Color de fondo superpuesto: rgba(65,226,186,0.62)

Módulo Blog de artículos relacionados con estilos

Cambio fuente del titulo a Robot Mono.Cambio peso Para regular, el color es azul oscuro, #323770.

  • Texto del título: Roboto Mono
  • Color del texto: #323770
  • Peso de fuente: Normal

Módulo Blog de artículos relacionados con estilos

configurar texto del título del escritorio a 15px y cambiar texto del título del teléfono a 14 píxeles.Cambio altura de la fila del encabezado a 1,7 em.

  • Tamaño del texto del título (escritorio): 15px
  • Tamaño del texto (teléfono): 14 px
  • Altura de la línea T: 1,7 em

Módulo Blog de artículos relacionados con estilos

por cuerpo principal del artículo, establezca la fuente en PT Sans, peso es normal y el color es #62748a (estas son las configuraciones predeterminadas).

  • Fuente del texto: PT Sans
  • Peso del texto: Regular
  • Color del texto: #62748a

Módulo Blog de artículos relacionados con estilos

Seleccione el icono del teléfono Tamaño del texto del cuerpo y cambie el tamaño del teléfono a 12px. Deje el escritorio en los 14 píxeles predeterminados.Cambio Altura de la línea (para todos los tamaños de pantalla) a 2em.

  • Tamaño del cuerpo del texto (escritorio): 14px
  • Tamaño del texto (teléfono): 12 px
  • Altura de línea de texto: 2em

Módulo Blog de artículos relacionados con estilos

A continuación, desplácese hacia abajo hasta texto paginadoPara Fuente, seleccione Roboto Slab.configurar peso regular y cambiar color a #41e2ba.

  • Fuente de paginación: Roboto Slab
  • Peso de fuente: Normal
  • Color: #41e2ba

1641700355 700 Como agregar publicaciones relacionadas a su plantilla de publicacion de

El módulo de blog tiene un margen superior El valor predeterminado es -7vw. Si desea cambiar la cantidad de superposición, agregue más -vw al margen superior (este ejemplo muestra -12vw).

  • Depósito máximo: -7vw (o monto preferido)

Agregar títulos de capítulo

Agregar títulos de capítulo

Finalmente, agregaremos un título a la sección para que los usuarios sepan de un vistazo que se trata de publicaciones relacionadas. También podemos omitir el título de esta sección, ya que es fácil para los usuarios entender que las publicaciones son relevantes para lo que están leyendo.agregar un nuevo módulo de texto Haciendo clic y arrastrando el ícono gris más sobre el módulo de blog en la misma fila. Lo estoy viendo en vista de estructura alámbrica porque nuestra configuración actualmente hace que aparezca detrás del módulo de blog.

Agregar títulos de capítulo

escoger Título 2 Ingrese el título, artículo relacionado en el editor de contenido.

  • Texto: Título 2
  • Contenido: publicaciones relacionadas

Agregar títulos de capítulo

escoger diseño pestaña, desplácese hacia abajo hasta texto del títuloy seleccione H2. Para la fuente Heading 2, elija Roboto Slab.configurar peso de fuente elección audaz alineado al centro. configuración tamaño de fuente de escritorio a 53px y tamaño de fuente del teléfono a 15 píxeles.

  • Encabezado 2 Fuente: Robo Slab
  • Peso de fuente: Negrita
  • Tamaño de fuente de escritorio: 54px
  • Tamaño de fuente móvil: 26px

Agregar títulos de capítulo

desplácese hacia abajo para espaciadoSeleccione Configuración de escritorio y configure margen superior a -12vw y margen inferior a 9vw.

  • Margen máximo: -12vw
  • Margen inferior: 9vw

Agregar títulos de capítulo

escoger teléfono Márgenes establecer icono y cambio margen superior a -50vw. Cierra la configuración y guarda los cambios.

  • Margen máximo: -50vw

resultado

Publicaciones relacionadas en el escritorio

escritorio

A continuación se muestran nuestras publicaciones relacionadas en el escritorio.

Publicaciones relacionadas en el teléfono

teléfono

Así es como se ven nuestras publicaciones relacionadas en dispositivos móviles. Todavía tiene superposición.

teléfono

Esto también incluye la navegación. Esta es la parte inferior de la publicación relacionada.

la idea de terminar

Aquí está nuestra opinión sobre cómo agregar publicaciones relacionadas a su plantilla de publicación de blog Divi. Puede configurarlo para que muestre la categoría actual o cualquier categoría específica que desee. Esto es fácil de hacer con el módulo de blog, que coincide fácilmente con la plantilla de su publicación de blog.

Nos encantaría saber de usted. ¿Agregaste artículos relacionados a tu plantilla de publicación de blog? Cuéntanos tu experiencia en los comentarios.

La publicación Cómo agregar publicaciones relacionadas a su plantilla de publicación de blog Divi apareció por primera vez en el blog de Elegant Themes.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *