Cómo agregar publicaciones relacionadas a tu div

Las publicaciones relacionadas son una excelente manera de aumentar el tráfico de su blog. Los usuarios de su blog verán publicaciones que ya están interesadas. Esto los mantiene en su sitio por más tiempo y aumenta su interacción con usted y su sitio. Afortunadamente, las publicaciones relacionadas son fáciles de agregar a las publicaciones de blog en DIV en Temo Builder. En este artículo, te mostraremos cómo. La vista previa es una mirada a lo que hacemos en este tutorial. Publicaciones similares en el escritorio

Así es como se verán las publicaciones relacionadas en un escritorio. El título y la parte superior de las publicaciones se superponen en la sección arriba. La navegación de las publicaciones coincide con el estilo de estilo.
Publicaciones similares en su teléfono

Así es como se verán nuestras publicaciones asociadas en un teléfono. Incluye superposición para el título y la primera publicación.

Esto también incluirá la navegación, como se muestra en la parte inferior de las publicaciones relacionadas. Suscríbase a nuestro canal de YouTube por qué una plantilla de publicación de blog necesita más elementos se consideran cruciales para una plantilla de publicación de blog. La publicación del blog necesita un título, una imagen presentada, metadatos y contenido del cuerpo. Sin ellos, no funcionará bien como una publicación de blog. Los usuarios estarán confundidos o rechazarán la experiencia del usuario.
Otros elementos de publicación de blogs no son esenciales para la funcionalidad de una plantilla de publicación de blog, pero agregue muchas características adicionales para mejorar la experiencia del usuario. Estos elementos están bien considerar. Por ejemplo, puede incluir comentarios para que los lectores puedan interactuar con usted y otros lectores. CTA llama la atención sobre sus productos, servicios y boletín. Otra opción son las publicaciones relacionadas, como veremos en este tutorial. Las publicaciones relacionadas ayudan a los usuarios a encontrar el contenido que los interesa más fácilmente. Cree o descargue la plantilla de publicación de blog Puede crear la plantilla de publicación de su blog o descargar uno del blog elegante de temas. Para construirlo desde cero, asegúrese de incluir la lista de elementos esenciales que discutimos anteriormente. Agregue módulos Divui, como publicar título, imagen presentada, metadatos y contenido de publicación. Luego considere los extractos que desea incluir, como comentarios y módulos por correo electrónico. Elegant Temas ofrece muchas publicaciones de blog gratuitas diseñadas para que coincidan con los paquetes de diseño gratuitos que están disponibles en el DIV. Para descargar uno del blog ET, simplemente busque en el blog “Publicación de blog gratuita” Blog.
Para mis ejemplos, utilizo la plantilla de publicación de blog gratuita para el paquete de apariencia de ciencia de datos. Cargue la plantilla de publicación de blog
Si descarga una plantilla del blog de ET, descúbralo para que pueda cargar el archivo JSON. Para cargarlo, vaya a Divin> temas Builder en el tablero de WordPress. Seleccione la portabilidad y elija Importar en el módulo que se abra. Haga clic en Elija el archivo y navegue por su archivo JSON y seleccione. Haga clic en Importar plantillas de constructor de temas Div Div y espere la importación. Guarde los cambios. Accece div en el tablero de WordPress.

Seleccione el constructor de temas.
Seleccione la portabilidad.
Elija importar de una manera que se abra.
Haga clic en Elija el archivo y navegue por su archivo JSON y seleccione.
Haga clic en Importar plantillas de constructor de temas Div Div y espere la importación.
Guarde los cambios.
Cómo agregar publicaciones relacionadas a la plantilla de publicación del blog
Primero, haga clic en el icono Editar para abrir la plantilla de publicación del blog.
Luego, debemos agregar una nueva sección y una sola columna para nuestro nuevo módulo de blog. Mirando la plantilla de visualización TempoFrame, vemos que incluye un módulo deslizante posterior a la parte inferior. Eliminaremos esta diapositiva y usaremos esta fila, pero primero, dibuje la sección sobre el impulso.

Una vez que haya movido la sección, limpie el control deslizante de poste.

Esta sección ya está decorada con un fondo negro. Si agrega el fondo usted mismo, abra la configuración de la sección y establezca el fondo en negro.

Color de fondo: #000000

Luego seleccione el icono más gris y agregue un módulo de blog. Publicaciones relacionadas Configuración del módulo de blog
La configuración se abrirá automáticamente, donde puede hacer sus selecciones. Continué al escritorio en vivo para ver cómo se ve el módulo. Deje el tipo de publicación establecido en publicaciones. Establezca el número de publicaciones en 3. En las categorías incluidas, seleccione la categoría actual. Si crea una plantilla de publicación de blog para una categoría en particular, seleccione esa categoría aquí. Puede ver más sobre la asignación de una plantilla de publicación de blog a una categoría particular en el artículo sobre cómo usar diferentes plantillas de publicación de blog para diferentes categorías.

Número de publicaciones: 3

Las categorías incluyen: categoría actual
Seleccione Sí para usar extractos de publicación. Cambie la longitud del extracto a 150. En elementos, seleccione Sí para mostrar la imagen recomendada.
Use fragmentos posteriores: sí
Longitud del extracto: 150

Mostrar la imagen presentada: Sí

Además, debajo de los elementos, seleccione Mostrar el extracto y la paginación.
Muestra el extracto: si
Show Paging: Sí

Estilización del módulo de blog para publicaciones relacionadas
Luego acceda a la pestaña de diseño. Asegúrese de que la superposición de imágenes recomendadas se active. Cambie el color del icono de superposición blanca y el fondo superpuesto de RGBA (65,226,186,0,62).
PM Supperta Imágenes presentadas: Activado
Icono de superposición de color: #ffffff

Color de fondo superpuesto: RGBA (65,226,186,0,62)
Cambie la fuente del título a Roboto Mono. Cambie de peso en normal y en color en un azul oscuro, #323770.
Texto del título: Roboto mono
Color de texto: #323770

Peso de fuente: ordinario
Establezca el texto del título en el escritorio a 15 píxeles y cambie el texto del título del teléfono a 14 píxeles. Cambie la altura de la línea de título a 1.7 em. La dimensión del texto del título (escritorio): 15px
Tamaño de texto (teléfono): 14px
Altura de la línea: 1.7 em

Para el texto del cuerpo, configure la fuente en PT SANS, peso regular y color en #62748a (estas son la configuración predeterminada).
Fuente para el texto del cuerpo: para sans
Peso de texto: ordinario
Color de texto: #62748a

Seleccione el icono del teléfono para el tamaño del texto del cuerpo y cambie el tamaño de su teléfono a 12 PX. Deje el escritorio a 14px predeterminado. Cambie la altura de la línea (para todos los tamaños de pantalla) a 2EM.
Tamaño de texto del cuerpo (escritorio): 14px
Tamaño de texto (teléfono): 12px
La altura de la línea de texto: 2em

Luego desplácese hacia abajo en el texto de la paginación. Para la fuente, seleccione Roboto débil. Establezca el peso en el normal y cambie el color a #41E2BA.
Paging Font: Roboto débil
Peso de fuente: ordinario
Color: #41E2BA

El módulo de blog tiene un margen superior de -7VW de forma predeterminada. Si desea cambiar la cantidad de superposición, agregue más -VW (este ejemplo muestra -12VW) al margen superior.
Margen superior: -7VW (o cantidad preferida)
Agregar un título de sección
Finalmente, agregaremos un título a la sección, para que los usuarios sepan de un vistazo que son publicaciones relacionadas. También podríamos dejar el título de la sección, porque es bastante fácil para los usuarios comprender que las publicaciones están relacionadas con lo que leen. Agregue un nuevo modo de texto haciendo clic en el icono más gris y extrayendo sobre el módulo de blog desde la misma fila. Lo miro en la visualización de Wireframe, porque nuestra configuración actualmente aparece detrás del módulo de blog. Seleccione el Título 2 en el Editor de contenido e ingrese el título, Publicaciones relacionadas.

Texto: Título 2
Contenido: publicaciones relacionadas
Seleccione la pestaña Diseño, desplácese hacia abajo hasta el texto del título y elija H2. Para encabezar 2 fuentes, seleccione Roboto débil. Establezca el peso de la fuente en Bold y elija la alineación en el centro. Establezca el tamaño de fuente para el escritorio en 53px y el tamaño de la fuente del teléfono a 15px.

Título 2 Fuente: Robo débil

Peso de fuente: en negrita
Tamaño de escritorio de fuente: 54px
Tamaño de fuente telefónica: 26px

Desplácese hacia abajo hasta el espacio. Seleccione la configuración de escritorio y establezca el margen superior en -12VW y menor margen a 9VW.
Margen superior: -12VW
Margen inferior: 9VW
Seleccione el icono del teléfono para la configuración del margen y cambie el margen superior a -50VW. Cierre la configuración y guarde los cambios.
Margen superior: -50VW

Resultados publicaciones similares en el escritorio
Aquí hay un vistazo a nuestras publicaciones relacionadas en un escritorio. Publicaciones similares en su teléfono
Así es como se ven nuestras publicaciones asociadas en un teléfono. Todavía tiene superposición.