Cómo construir una página de blog con el div

Por lo general, cada paquete de diseño que aparece en nuestro blog incluye un look de blog, que lo ayuda a preparar su blog en el menor tiempo. Pero, ¿alguna vez has querido ver cómo construir una de esas páginas de blog? En este artículo, utilizaremos uno de esos aspectos de blog para ver cómo construir una página de blog con el módulo de blog de Divic. Pasaremos por cada configuración paso a paso. ¡Vamos a empezar! Vista previa de la página del blog primero, veamos lo que construimos. Vista previa de escritorio

Vista previa móvil

La creación de una nueva página de blog crea una nueva página en primer lugar, crearemos nuestra página. En el tablero de WordPress, seleccione páginas> Agregar nuevos.

Dé a la página un título que tenga sentido para usted. Utilizo el nombre de la página en el paquete de diseño, que es la página de blog de ACAI. Seleccione todos los atributos de la página deseados en la barra lateral derecha. Dejo los atributos a los valores predeterminados.
Título de la página: página del blog de acai

Cambie a Divi Builder entonces, es hora de mudarse a Divic Builder. Haga clic en el botón Violet en el centro de la página: Use Divi Builder. Esto lo redirigirá al front-end con la Divic Active Builder, para que podamos comenzar a construir la página.

Agregue el héroe con el título de la página de blog Estresante la sección Hero, comenzaremos con la primera sección. Abra la configuración de la sección.

Desplácese hacia abajo hacia el fondo y cambie el color a #F9F3FD. Ingrese su blog como etiqueta de administrador. Cierre la configuración de la sección.
Antecedentes: #F9F3FD
Etiqueta de administrador: blog

Cree el título de la página del blog a continuación, agregaremos una fila para el título. Seleccione el icono verde y elija una sola fila de columna.

Luego agregue un módulo de texto en una fila. Si el Modal no se abre cuando agrega la fila, seleccione el icono Gray Plus y busque texto. Remate el módulo de texto del título del blog Abra la configuración del módulo de texto y seleccione el Título 1. Agregue el título de nuestro blog.

Fuente: Título 1
Texto: nuestro blog
Luego acceda a la pestaña de diseño y establezca la alineación en el centro. Para el texto del Título H1, elija Cormorant Child para la fuente y hágalo en negrita.

Alineación de texto: Centro
Texto del título: H1
FUENTE: Cormoran Baby
Peso: en negrita
Establezca el color en #442854, el tamaño a 130px (es para el escritorio, cambiaremos la tableta y el teléfono en un minuto) y estableceremos la línea en 0.8em.

Color: #442854
Tamaño de texto de escritorio: 130px
Altura de la línea: 0.8 em
Pase con el mouse sobre las opciones del texto del título y seleccione el icono de la pantalla. Elija el icono de la tableta y establezca el tamaño en 60px.

Tamaño del texto de la tabla: 60px
Finalmente, seleccione el icono del teléfono y configure el tamaño en 40px.

Teléfono: 40px
Cree la última página de blog y la sección CTA Nuestro Heroes incluye la última publicación y una opción de correo electrónico. Agregue una nueva fila debajo de nuestra primera fila y seleccione el diseño de la columna 2/3 a la izquierda y 1/3 a la derecha.

Abra la configuración de la fila haciendo clic en la rueda.

Seleccione la pestaña de diseño, desplácese hacia abajo y agregue 0px al relleno inferior. Cierre la configuración.

Llenado inferior: 0px
Agregue y estilice el módulo de publicación de blog recomendado, agregaremos un módulo de blog. Contendrá nuestra última publicación. Haga clic en el icono más gris en la columna izquierda de nuestra nueva fila y agregue el módulo de blog.

Contenido en Contenido, ingrese 1 para el número de publicaciones.

Número de publicaciones: 1
Los elementos se desplazan hacia abajo hasta los elementos y desactivar autor y paginación. Dejaremos el resto en los valores predeterminados.

El autor del espectáculo: no
Paging de visualización: no
Apariencia Entonces, seleccione la pestaña de diseño y elija el ancho completo para mirar y apagar la superposición de las imágenes presentadas.

Apariencia: ancho completo
PM Supperta Images Presentadas: Desactivado
El texto del título se desplaza hacia abajo hasta el texto del título. Seleccione H2 y elija Cormorant Child. Seleccione Bold y cambie el color a #442854.

Nivel de título: H2
FUENTE: Cormoran Baby
Peso: en negrita
Color: #442854
Establezca el tamaño de fuente para el escritorio a 30px, tableta a 20px y teléfono a 18 px. Cambie la altura de la línea a 1.1 em.

Tamaño: 30 PX Desktop, Tableta de 20 Px, 18 PX Teléfono
Altura de la línea de título: 1.1 em
El cuerpo del texto entonces, desplácese hasta el texto del cuerpo. Elija la cabina de fuente, cambie el color a #442854 y cambie la altura de la línea a 1.8EM.

Fuente: taxi
Color: #442854
Altura de la línea: 1.8 em
Meta texto entonces, desplácese al meta texto. Cambie la fuente al niño con cormorán, establezca el peso en el regular, retire el estilo TT y establezca el color en #442854. Para el tamaño, configure el escritorio en 16px, la tableta 15px y el teléfono 14px. Cambie la altura de la línea a 1.8 em.

FUENTE: Cormoran Baby
Peso: ordinario
Estilo: ninguno
Color: #442854
Tamaño: Desktop de 16 px, tableta 15px, teléfono 14px
Altura de la línea: 1.8 em
Espacio entonces, desplácese hacia abajo hasta el espacio y cambie el margen superior a 0VW.

Margen superior: 0VW
Box Shadow Finalmente, desplácese hasta el Box Shadow y apáguelo.

Box Shadow: Desactivar
Agregue y estilice el módulo de texto de correo electrónico en el blog ahora, iremos a la columna correcta y crearemos el correo electrónico. Primero, agregue un módulo de texto a la columna derecha. Haga clic en el icono más gris y busque texto. Seleccione conscientemente el Título 2 e ingrese el suscriptor de texto para ofertas y recetas.

Fuente: H2

Texto: suscribir para ofertas y recetas
El texto del título para el texto del título, seleccione la alineación en el centro, elija H2, seleccione Cormorant Child y configúrelo en BOLD.
Alineación de texto: Centro

Texto del título: H2
FUENTE: Cormoran Baby
Peso: en negrita
Cambie el color a #442854, tamaño a 32px y la altura de línea a 0.95em.
Color: #442854

Tamaño: 32px
Altura de la línea: 0.95 em
Finalmente, espaciado, desplácese hacia abajo hasta el espacio y agregue 10px al margen inferior. Cierre la configuración del módulo de texto.
Margen inferior: 10px

Agregue y estilice su opción para el correo electrónico para el blog, crearemos el formulario de correo electrónico. Agregue un módulo Optin de correo electrónico en el módulo de texto en la columna derecha.
Contenido primero, elimine el texto y el texto del cuerpo.

Título: Ninguno

Texto del cuerpo: ninguno
Desplácese hacia abajo a su cuenta de correo electrónico y agregue su proveedor de servicios.
Luego desplácese en el fondo y disminuya el color de fondo.

Use el color de fondo: no

Los campos van a la pestaña de diseño y cambian el color de fondo de los campos en RGBA (255,255,255.0) y el texto del texto en #442854.
Color de fondo: RGBA (255,255,255.0)

Color de texto de campo: #442854
Desplácese hacia abajo hasta las opciones de fuente y cambie la fuente a la cabina, tamaño a 16 px y altura de línea a 1.8 em.
Campos de fuentes: cabina

Tamaño: 16px
Altura de la línea: 1.8 em
Luego ajuste la esquina redondeada a 32 px, el ancho del borde a 2 px y cambie el color del borde a #442854. Cincones redondeados: 32 PX
Ancho fronterizo: 2px

Color del borde: #442854
Botón Desplácese hacia abajo hasta el botón y seleccione Usar estilos personalizados para el botón. Cambie el tamaño a 18 ps, el color del botón en blanco y el color de fondo del botón en #442854.
Use estilos personalizados para el botón: Sí
Tamaño: 18px

Color: #ffffff
Botón de fondo: #442854
Cambie el rayo del borde a 50 px, la fuente en el niño cormorante y haga que el peso se espese.
Chenar Radius: 50px
FUENTE: Cormoran Baby

Peso: en negrita
Finalmente, agregue un margen y acolchado de botones. Ingrese 20 PX para el margen superior, 12 PX para el relleno superior e inferior y 32 PX para el relleno izquierdo y derecho. Cierre la configuración de correo electrónico de OPN.
El margen superior del botón: 20px
SUS Relleno, abajo: 12 PX

Llenamiento izquierdo, derecho: 32 PX
Agregue una nueva línea para la página del blog de blog ahora, construiremos la lista de blogs para la página del blog. Primero, agregue una nueva fila con una sola columna en Hero Row.
Configuración para las filas de listado de blog Vaya a la pestaña Diseño y agregue 0px al relleno superior. Cierre la configuración de las filas.
SUS Relleno: 0px

Agregue un módulo de blog a su turno, agregue un módulo de blog a su nueva fila haciendo clic en el icono Gray Plus y haciendo clic en el blog.


Stile el blog Flow para atacar el feed para la página del blog. El contenido del flujo del blog abre la configuración del módulo de blog e ingrese 3 para el recuento de publicaciones. El recuento de publicaciones le permite elegir el número de publicaciones que se muestran en la pantalla. Un número más pequeño, como 3, nos permite centrarnos en las últimas publicaciones y mantiene la página más pequeña. Esta es una buena opción si no publica con frecuencia o desea mantener la página más limpia. Mostrar varias publicaciones como 6-9 es una buena idea si desea concentrarse en el flujo del blog. Publicaciones: 3
Ingrese 1 para la brecha. Esto le dice que comience en la segunda publicación de blog, lo que nos impide mostrar la misma publicación que ya se muestra en la publicación del blog presentada anteriormente.

Número de compensación post: 1

Los elementos se desplazan hacia abajo hasta los artículos. Active la imagen presentada, la fecha, el extracto de categorías y la paginación. Deshabilite el resto.
Mostrar la imagen presentada: Sí

Fecha: si
Categorías: Sí

Extracto: si
Paging: si
Acceda a fondo y establezca el color de fondo de las placas de cuadrícula en RGBA (255,255,255.0)
El color de fondo de las placas de cuadrícula: RGBA (255,255,255.0)
Apariencia y superposición luego acceda a la pestaña de diseño. Deja la apariencia establecida en la cuadrícula. Elegí el aspecto de ancho completo para la publicación de blog presentada arriba. Usaremos la apariencia de la cuadrícula para este flujo de blog, que es la opción predeterminada. Deshabilite la superposición de las imágenes presentadas.
Apariencia: cuadrícula

PM Supperta Images Presentadas: Desactivado
Texto de título para el texto del título, seleccione H2. Elija un cormorán infantil, configúrelo en Bold e ingrese #442854 para el color.

Nivel de título: H2
FUENTE: Cormoran Baby
Peso: Caulrure en negrita: #442854

Elija 20px para el tamaño de texto de escritorio. Seleccione el icono del teléfono y configúrelo en 18px. Establezca la altura de la línea en 1.1 em.
Tamaño: Desktop 20px, 18px Teléfono
Altura de la línea: 1.1 em
El cuerpo del texto se desplaza al texto del cuerpo y elige la cabina. Establezca el color en #442854.
Fuente: taxi

Color: #442854
Establezca la altura de la línea en 1.8 em.
Altura de la línea: 1.8 em

El meta texto se desplaza hacia abajo hasta el meta texto y elige un bebé de cormorán. Establezca el peso en el regular, el estilo en ninguno y el color en #442854.
FUENTE: Cormoran Baby
Peso: ordinario

Estilo: ninguno
Color: #442854

Establezca el tamaño del escritorio en 16 px, la tableta a 15 px y el teléfono a 14 px. Cambie la altura de la línea a 1.8 em.
Tamaño: Desktop de 16 px, tableta 15px, teléfono 14px
Altura de la línea: 1.8 em
El texto de la paginación ahora, pasemos al texto de la paginación. Para la fuente, elija un cormorán infantil, seleccione Bold y cambie el color a #442854.
FUENTE: Cormoran Baby

Peso: en negrita
Color: #442854
Espacio entonces, iremos al espacio y agregaremos un margen de 0VW a la parte superior. Esto evita que nuestro módulo se superponga al módulo anterior.

Margen superior: 0VW
Border desplácese hasta el borde y ingrese 0px para las cuatro esquinas. Esto nos da nuestra forma cuadrada para la tarjeta.
Esquinas redondeadas: 0px
Box Shadow Finalmente, desplácese hasta el Box Shadow y apáguelo. Cierre la configuración del blog. La sección del blog ha terminado.

Box Shadow: Ninguno
Agregue una nueva sección CTA a la próxima página del blog, crearemos la sección CTA de la página. Esta sección incluye una imagen de ancho de ancho completo en Paralax, información de contacto y enlaces de seguimiento social. Acuerde una nueva sección Haga clic en el icono azul para agregar una nueva sección habitual a la parte inferior de la página.

Sección: Común
Sigue la sección CTA Abra la configuración de la sección haciendo clic en el icono de su rueda.

Desplácese hacia atrás y elija la pestaña Imagen. Haga clic en el icono gris con la etiqueta Agregar la imagen de fondo.
Elija una imagen de ancho completo de su biblioteca de medios. Seleccione Use el efecto de paralaje y luego elija CSS para el método de paralaje.

Imagen de fondo

Use el efecto de paralaje: sí
Método Paralax: CSS

Desplácese hacia abajo hasta la etiqueta de administración e ingrese el sótano en el campo. Esto te ayudará a ver las secciones.

Etiqueta del administrador: sótano

Luego acceda a la pestaña de diseño. Desplácese hasta el espacio y agregue 10 VW al relleno superior e inferior. Cierre la configuración de la sección.
Forro: 10VW (arriba y abajo)
Agregue una nueva fila CTA Haga clic en el icono Green Plus y agregue una sola columna para nuestro contenido.
Fila: una columna

Tamaño Abra la configuración de la fila y acceda a la pestaña de diseño. Bajo tamaño, seleccione el icono de la tableta bajo el ancho máximo e ingrese 320 PX. Esto se reflejará automáticamente en la configuración del teléfono. Cierre la configuración de las filas.
Ancho máximo: tableta 320px

Texto del título Nuestro módulo CTA se ingresa con un título. Para crear esto, agregue un módulo de texto en una fila.
Dominar el texto del título Agregue el título y cambie la fuente al Título 3.

Font: H3Text: La salud comienza aquí
Texto del título Vaya a la pestaña Diseño y desplácese hacia abajo hasta el texto del título. Elija el Centro para la Alineación, seleccione H3, elija Cormorant Child, configúrelo en negrita y elija White.

Alineación: centro
Texto del título: H3

FUENTE: Cormoran Baby

Peso: en negrita
Color: #ffffff
Cambie el tamaño del escritorio a 42 px, el tamaño de la tableta a 20 px y el tamaño del teléfono a 16 px. Seleccione 1.1 EM para la altura de la línea.

Tamaño: escritorio 42px, tableta 20px, teléfono 16px
Altura de la línea: 1.1 em
Finalmente espaciado, desplácese y agregue 10px al margen inferior. Cierre la configuración del módulo.
Margen inferior: 10px
El módulo de texto para la dirección agregue otro módulo de texto en el título CTA para su dirección física.
Dusta el módulo de texto para la dirección de dirección Texto Agregue su dirección como texto de párrafo.

Estilo: párrafo
Texto: su dirección
El texto del párrafo entonces, acceda al texto en la pestaña de diseño y elija el niño con cormorán, semi audaces, y póngalo en blanco.

FUENTE: Cormoran Baby
Peso: semi en negrita

Color: #ffffff

Para el tamaño, configure el escritorio en 28px, tableta a 20px y teléfono a 16 px. Cambie la altura de la línea a 1.2 EM y cierre la configuración del módulo.
Tamaño: 28 PX Desktop, Tableta de 20 Px, 16 px Teléfono
Altura de la línea: 1.2 em

Agregue el módulo de búsqueda en las redes sociales Nuestro módulo final es el módulo de seguimiento de las redes sociales. Agréguelo a la parte inferior de la fila.
Modele el módulo de seguimiento en las redes sociales, comenzaremos esta vez con la pestaña Design. Seleccione el centro para alinear el módulo y cambiar el color del icono a #442854.
Alineación del módulo: centro
Icono de color: #442854 Depreso al borde y agregue 23px para esquinas redondeadas.

Esquina redondeada: 23px
Agregue y estilice sus redes sociales ahora, vuelva a la pestaña de contenido y agregue todas las redes sociales que desea incluir. Haga clic en el icono Gray Plus. Para modelarlos, seleccione las herramientas.
Abra la configuración para cada una de sus redes sociales, elija la red y agregue el enlace a su cuenta establece el color de fondo en #F9F3FD. Cierre la configuración de sub -modos.

Red social: su elección

URL del enlace de la cuenta: su enlace
Color de fondo: #F9F3FD
Guarde la página del blog y salga del constructor visual finalmente, guarde la página en la esquina inferior derecha y seleccione Salir de Visual Builder en la parte superior de la página. Estás listo para ver tu trabajo.

La vista previa de la página del blog aquí son nuestros resultados. Vista previa de escritorio
Vista previa móvil

Pensamientos finales Esta es nuestra forma de construir una página de blog con Div. Divi Builder facilita la creación de diseños interesantes y hay varias formas en que se puede usar cada uno de los módulos. Como este tutorial ha explorado, puede usar más versiones del módulo de blog en la misma página para mostrar el flujo del blog de diferentes maneras. Queremos escuchar de ti. ¿Construyó su propia página de blog con Div? Cuéntanos sobre tu experiencia en comentarios.