¿Quieres crear una página de blog con el módulo Blog? de divi?
Por lo general, cada paquete de diseño Divi publicado en Elegante Temas ofrece un diseño de blog, que te ayuda a crear tu blog bastante rápido. Pero ¿alguna vez has querido ver cómo crear tú mismo una de estas páginas de blog?
En este artículo, veremos cómo crear una página de blog con el módulo Blog de Divi. Repasaremos cada configuración paso a paso.
¡Empecemos!
vista
Antes de comenzar, primero veamos una descripción general de lo que vamos a crear.
Crear una nueva página de blog
Crea una nueva página
Primero, crearemos nuestra página. En el tablero de WordPress, haga clic en Páginas > Añadir.
Dale a la página un título que tenga sentido para ti.
- Título de la página: Blog sobre Divi
Cambiar a Divi Builder
Haga clic en el botón morado en el centro de la página: Utilice Divi Builder .
Agregar una sección para el título de la página del blog
Personaliza la sección
Comenzaremos con la primera sección. Ábrelos parámetros de la sección .
Desplazarse hasta Fondo y cambia el color a #f9f3fd. Ingrese Blog como la etiqueta de administrador. Cierra la configuración de la sección.
- Fondo: #f9f3fd
- Etiqueta de administrador: Blog
Crear título de página de blog
Luego agregaremos un línea por el titulo Seleccione el icono verde y elija la fila de una sola columna.
Luego agrega un módulo de texto a la linea.
Personaliza el módulo Texto del título del blog
Abrirlos Configuración del módulo de texto y seleccione H1. Añade el título Nuestro blog.
- Fuente: Título 1
- Texto: Nuestro blog
Luego ve a laFicha estilo y establezca la alineación en Centrado. Para el texto del título H1, elija Cormorant Infant para la fuente y póngala en negrita.
- Alineación de texto: centrado
- Texto de encabezado: H1
- Fuente del encabezado: Cormorant Infant
- Encabezado de luz suave: texto en negrita
Establezca Color en #442854, Tamaño en 130 px y Altura de línea en 0,8 em.
- Color: #442854
- Tamaño de texto de escritorio: 130px
- Altura de la línea: 0,8 em
Crear el último artículo y la sección de llamado a la acción
Nuestra sección consta del último artículo y un correo electrónico de suscripción.
Agregar una nueva línea debajo de nuestra primera fila y seleccione el diseño de columna 2/3 a la izquierda y 1/3 a la derecha.
Abrirlos parámetros de línea haciendo clic en el icono de engranaje.
Selecciona elFicha estilo, desplácese hasta espaciamiento y agregue 0px al margen interno inferior. Cerrar Configuración.
- Margen interno inferior: 0px
Agregue y personalice el módulo de publicación de blog destacado
Luego agregaremos un blog-modulo . Esto contendrá nuestro último artículo. Haga clic en el ícono gris más en la columna izquierda de nuestra nueva fila y agregue el módulo Blog.
Contenido
Sous Contenido , ingrese 1 para el número de publicaciones.
- Número de posiciones: 1
Elementos
Desplazarse hasta Elementos y desmarque Autor y Paginación. Dejaremos el resto en sus valores predeterminados.
- Mostrar autor: no
- Mostrar paginación: No
Provisión
Luego seleccione el Ficha estilo y elija Pantalla completa para el diseño y desactive la superposición de imágenes destacadas.
- Modelo: pantalla completa
- Superposición de imagen seleccionada: deshabilitado
Texto del título
Desplazarse hasta Texto del título . Seleccione H2 y elija Cormoran Infant. Selecciona Negrita y cambia el color a #442854.
- Insertar encabezado tres: H2
- Título de la fuente: Cormorant Infant
- Título de luz suave: texto en negrita
- Color del texto del título: #442854
Establezca el tamaño de fuente en 30 píxeles. Cambie la altura de la línea a 1.1 em.
- Tamaño: 30 píxeles para escritorio, 20 píxeles para tableta, 18 píxeles para teléfono
- Altura de la línea del título: 1,1 em
El cuerpo del texto
Luego, desplácese hacia abajo hasta cuerpo de texto . Elija Cabin para la fuente, cambie el color a #442854 y cambie la altura de la línea a 1,8 em.
- Cuerpo de Policía: Cabina
- Color del cuerpo del texto: #442854
- Altura de la línea del cuerpo: 1,8 cm
metadatos de texto
Luego, desplácese hacia abajo hasta Metadatos de texto . Establezca los parámetros de la siguiente manera:
- Fuente de metadatos: Cormorant Infant
- Luz tenue de metadatos: Regular
- Estilo de copia de metadatos: Ninguno
- Color del texto de los metadatos: #442854
- Tamaño del texto de metadatos: escritorio 16 px, tableta 15 px, teléfono 14 px
- Altura de la fila de metadatos: 1,8 cm
espaciamiento
Luego, desplácese hacia abajo hasta espaciamiento y cambie el margen superior a 0vw.
- Margen superior: 0vw
Caja de sombra
Finalmente, desplácese hacia abajo hasta Caja de sombra y desactivarlo.
- Cuadro de sombra: Deshabilitar
Agregar y personalizar el módulo de texto del correo electrónico del blog
Ahora vamos a pasar a la columna de la derecha y crear la llamada a la acción por correo electrónico . Primero, agregue un módulo de texto en la columna de la derecha. Haga clic en el ícono gris más y busque Texto.
Contenido
Seleccione el Título 2 e ingrese el texto Suscríbase a nuestras ofertas.
- Fuente: Título 2
- Texto: Suscríbete a nuestras ofertas
Texto de cabecera
Para el textos del título, seleccione Center Alignment, elija H2, seleccione Cormorant Infant y configúrelo en Negrita.
- Alineación de texto: centrado
- Texto de encabezado: H2
- Fuente del encabezado: Cormorant Infant
- Encabezado de luz suave: Negrita
Cambia el color a #442854, el tamaño a 32px y la altura de la línea a 0,95em.
- Color del texto del encabezado: #442854
- Tamaño del texto del encabezado: 32 píxeles
- Altura de la línea de cabecera: 0,95 em
espaciamiento
Finalmente, desplácese hacia abajo hasta espaciamiento y agregue 10 píxeles al margen inferior. Cierre la configuración del módulo de texto.
- Margen inferior: 10px
Agregue y personalice el módulo de opción de correo electrónico de blog
Entonces vamos crear el formulario Email . Agregue un módulo de opción de correo electrónico debajo del módulo de texto en la columna de la derecha.
Contenido
Primero, elimine el título y el cuerpo del texto.
- Título: Ninguno
- Cuerpo del texto: ninguno
Desplazarse hasta Cuenta de correo electrónico y agregue su proveedor de servicios.
Luego, desplácese hacia abajo hasta Fondo y anule la selección del color de fondo.
- Usar color de fondo: no
Campos
Ve a la Ficha estilo y cambie el Color de fondo de los campos a rgba(255,255,255,0) y el Color del texto a #442854.
- Campos de color de fondo: rgba(255,255,255,0)
- Campos de color de texto: #442854
Desplácese hacia abajo para opciones de fuente y cambie la fuente a cabina, el tamaño a 16px y la altura de la línea a 1,8em.
- Campos de fuente: Cabina
- Campos de tamaño de texto: 16 píxeles
- Altura de la fila de campo: 1,8 cm
A continuación, ajuste la esquina redondeada de los campos a 32 px, el ancho del borde a 2 px y cambie el color del borde a #442854.
- Controles de rectángulo redondeado: 32px
- Campos de ancho de borde: 2px
- Campos de color de borde: #442854
Bouton
Desplácese hasta Botón y seleccione Use estilos personalizados para el botón . Cambie el tamaño a 18ps, el color del botón a blanco y el color de fondo del botón a #442854.
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 18 píxeles
- Color del texto del botón: #ffffff
- Botón de fondo: #442854
Cambie el radio del borde a 50 píxeles, la fuente a Cormorant Infant y ponga el peso en negrita.
- Botón de radio de borde: 50px
- Botón de fuente: Cormorant Infant
- Botón de luz tenue: texto en negrita
Finalmente, agreguemos algunos Márgenes. Introduzca 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 Email Optin.
- Botón Margen superior: 20 px
- Botón de relleno superior e inferior: 12 px
- Botón de relleno izquierdo y derecho: 32px
Agregar nueva línea para la lista de publicaciones del blog
Ahora vamos crear lista de elementos de la pagina Primero, agregue una nueva fila de una sola columna debajo de nuestra sección anterior.
Configuraciones de línea
Acceder al Ficha estilo y agregue 0px al margen interior del vértice. Cerrar Configuración de línea.
- Vértice del margen interno: 0px
Añade un módulo Blog a tu línea
Agrega un blog-modulo a su nueva línea haciendo clic en el icono gris más y haciendo clic en Blog.
Diseñar el feed de publicaciones del blog
Cambiemos el feed de la página de blog.
Contenido de la fuente del blog
Abrirlos Configuración del módulo de blog e ingrese 3 para el número de publicaciones. Esto le permite elegir la cantidad de publicaciones que se muestran en la pantalla.
Un número más bajo, como 3, nos permite centrarnos en publicaciones recientes y reducir el tamaño de la página. Esta es una buena opción si no publica con frecuencia o desea mantener la página limpia. Mostrar más publicaciones, como 6-9, es una buena idea si desea concentrarse en el flujo del blog.
- Número de publicaciones: 3
Introduzca 1 para el desplazamiento. Esto le dice a Divi que comience con la segunda publicación del blog, lo que nos impide mostrar el mismo artículo que ya se mostró en la publicación del blog que se muestra arriba.
- Número de desplazamiento posterior: 1
Elementos
Desplazarse hasta Elementos . Habilite la imagen destacada, la fecha, el fragmento de categorías y la paginación. Deshabilitar el resto.
- Mostrar imagen destacada: Sí
- Datos: Sí
- Categorías: Sí
- Extracto: Sí
- Paginación: Sí
Fondo
Acceso a Fondo y establezca el color de fondo del mosaico de la cuadrícula en rgba (255,255,255,0)
- Color de fondo del mosaico de la cuadrícula: rgba (255,255,255,0)
Diseño y superposición
Luego ve a la Ficha estilo . Deje el diseño establecido en Cuadrícula. Elegimos el diseño de ancho completo para la publicación de blog que se muestra arriba de esta. Usaremos el diseño de cuadrícula para este feed de blog, que es la opción predeterminada. Deshabilite la superposición de imágenes destacadas.
- Diseño: Cuadrícula
- Superposición de imagen seleccionada: deshabilitado
Texto del título
Para el texto del título , seleccione H2. Elija Cormorant Infant, configúrelo en Negrita e ingrese #442854 para el color.
- Insertar encabezado tres: H2
- Título de la fuente: Cormorant Infant
- Título de luz suave: texto en negrita
- Color del texto del título: #442854
Elija 20px para el tamaño del texto. Establezca la altura de la línea en 1,1 em.
- Tamaño del texto del título: Escritorio 20px
- Altura de la línea del título: 1,1 em
El cuerpo del texto
Desplazarse hasta Cuerpo de texto y elige Cabina. Establece el color en #442854.
- Cuerpo de Policía: cabina
- Color del cuerpo del texto: #442854
Establezca la altura de la línea en 1,8 cm.
- Altura de la línea: 1,8 cm
metadatos de texto
Desplazarse hasta Metadatos de texto y elige Cormorant Infant. Establezca el peso en normal, el estilo en ninguno y el color en #442854.
- Fuente de metadatos: Cormorant Infant
- Luz tenue de metadatos: Regular
- Estilo de copia de metadatos: Ninguno
- Color del texto de los metadatos: #442854
- Tamaño del texto de los metadatos: escritorio 16 px, tableta 15 px, teléfono 14 px
- Altura de la fila de metadatos: 1,8 cm
Texto de paginación
Ahora pasemos al Paginación . Para la fuente, elija Cormorant Infant, seleccione Bold y cambie el color a #442854.
- Mostrar fuente Paginación: Cormorant Infant
- Mostrar luz suave de paginación: Negrita
- Color del texto Mostrar paginación: #442854
espaciamiento
Luego pasaremos a la espaciado y agregue el margen 0vw en la parte superior. Esto evita que nuestro módulo se superponga al módulo anterior.
- Margen superior: 0vw
frontera
Desplazarse hasta frontera e ingrese 0px para las cuatro esquinas. Esto nos da nuestra forma cuadrada para la tarjeta.
- Diseño de cuadrícula de rectángulo redondeado: 0px
Caja de sombra
Finalmente, desplácese hacia abajo hasta Shadow Box y desactivarlo. Cierra la configuración del blog. La sección del blog está terminada.
- Cuadro de sombra: ninguno
Agregue una nueva sección de "Llamado a la acción" a la página del blog
Entonces vamos crear la sección "Llamado a la acción" de la pagina Esta sección incluye una imagen de fondo de pantalla completa de paralaje, contacte y enlaces de seguimiento social.
Agregar una nueva sección
Haga clic en el icono azul para agregar una nueva sección regular al final de la página.
- Sección: Normal
Dale estilo a la sección de llamada a la acción
Abrirlos parámetros de la sección haciendo clic en su icono de engranaje.
Fondo
Desplazarse hasta Fondo y elija la pestaña Imagen. Haga clic en el icono gris etiquetado Imagen de fondo.
Elija una imagen de pantalla completa de su biblioteca de medios. Seleccione Usar efecto de paralaje, luego elija CSS para el método de paralaje.
- Imagen de fondo
- Usar efecto de paralaje: Sí
- Método de paralaje: CSS
Desplácese hacia abajo hasta Etiqueta de administrador e ingrese "Pie de página" en el campo. Esto le ayudará a realizar un seguimiento de las secciones.
- Etiqueta de administrador: Pie de página
Luego ve a la Ficha estilo.
- Margen interno: 10vw (superior e inferior)
Añadir una nueva linea
Haga clic en el ícono verde más y agregar una fila a una sola columna por nuestro contenido.
apresto
Abrirlos parámetros de línea y vaya a la pestaña Estilo.
- Ancho máximo: 320 píxeles
Módulo de texto de título
Nuestra sección Llamada a la acción se presenta con un título. Para crear esto, añadir un módulo de texto a la linea.
Personalizar el texto del título
Agregue su título y cambie la fuente a Título 3.
- Fuente: Título 3
- Texto: Todo sobre Divi
Texto de cabecera
Acceder al Ficha estilo y desplázate hasta Texto del subtítulo . Elija el centro para la alineación, seleccione H3, elija Cormorant Infant, configúrelo en Negrita y elija blanco para el color.
- Alineación de texto: Centro
- Texto de encabezado: H3
- Fuente del encabezado: Cormorant Infant
- Encabezado de luz suave: Negrita
- Color del texto del encabezado: #ffffff
- Tamaño del texto del encabezado: 42 píxeles para escritorio, 20 píxeles para tableta, 16 píxeles para teléfono
- Altura de la línea de cabecera: 1,1 em
espaciamiento
Finalmente, desplácese hacia abajo hasta espaciamiento y agregue 10 píxeles al margen inferior. Cierre la configuración del módulo.
- Margen inferior: 10px
Módulo de texto para la dirección
Agregar otro módulo de texto para su dirección física.
Aplicar estilo al módulo Texto de dirección física
Texto de dirección
Añada su dirección como texto del párrafo.
- Estilo: Párrafo
- Texto: tu dirección
Texto de párrafo
Luego vaya a Texto en el Ficha estilo y elige Cormorant Infant, semi negrita, y configúralo en blanco.
- Fuente: Cormorant Infant
- Texto de luz suave: semi-negrita
- Color del texto Texto: #ffffff
- Texto Tamaño del texto: 28 px para escritorio, 20 px para tableta, 16 px para teléfono
- Altura de la línea de texto: 1,2 em
Agrega el módulo síguenos en las redes sociales
Nuestro último módulo es el módulo Suivez-nous sur les réseaux sociaux . Agréguelo al final de la línea.
Estilizar el módulo Síguenos en las redes sociales
Empezaremos con el Ficha estilo esta vez. Seleccione Center for Module Alignment y cambie el color del icono a #442854.
- Alineación del módulo: Centro
- Color del icono: #442854
Desplazarse hasta Orillaure y agregue 23 píxeles para las esquinas redondeadas.
- rectángulo redondeado: 32px
Añade y personaliza tus redes sociales
Ahora vuelve a la Pestaña de contenido y añade las redes sociales que quieras incluir. Haga clic en el ícono gris más.
Abrirlos ajustes para cada una de tus redes sociales , elija la red y agregue el enlace a su cuenta. Establezca el color de fondo en #f9f3fd. Cierre la configuración del submódulo.
- Red social: tu elección
- URL del enlace de la cuenta: su enlace
- Color de fondo: #f9f3fd
Guarde la página del blog y salga del generador visual.
Enfin, guardar la página en la esquina inferior derecha y seleccione Salir del constructor visual parte superior de la página. Estás listo para ver tu trabajo.
Vista previa de la página de blog
Aquí están nuestros resultados.
¡¡¡Descarga DIVI ahora!!!
Conclusión
Listo ! Este es nuestro vistazo a cómo crear una página de blog con Divi.
Divi Builder facilita la creación de diseños interesantes y hay múltiples formas de usar cada uno de los módulos. Como se ha explorado en este tutorial, es posible usar varias versiones del módulo Blog en la misma página para mostrar el feed del blog de diferentes maneras.
Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
