Cómo dividir la plantilla de publicación de blog en pantalla dividida con el generador de temas de Divi
Publicado: 2020-08-23Al crear un sitio web, es muy probable que incluya una página de blog y publicaciones de blog en él. Por supuesto, la parte más importante de una estrategia de blog es crear contenido de publicación de blog de alta calidad, pero la parte del diseño también juega un papel importante en el éxito de su estrategia. Al crear un sitio web con Divi, puede optimizar la apariencia de las publicaciones de su blog dentro de Divi Theme Builder al crear una plantilla de publicación con contenido dinámico. Hemos estado compartiendo constantemente plantillas de publicaciones de blog en nuestro blog que lo ayudan a acelerar el proceso, pero si está buscando específicamente crear una publicación de blog en pantalla dividida, le encantará esta publicación. ¡Le mostraremos paso a paso cómo hacerlo y también podrá descargar el archivo JSON de plantilla de forma gratuita!
Hagámoslo.
Avance
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue la plantilla de publicación de blog de pantalla dividida GRATIS
Para poner sus manos en la plantilla de publicación de blog de pantalla dividida gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
1. Vaya a Divi Theme Builder y agregue una nueva plantilla de publicación
Vaya a Divi Theme Builder y agregue una nueva plantilla
Empiece por ir a Divi Theme Builder. Una vez allí, agregue una nueva plantilla.
Usar plantilla en todas las publicaciones
Utilice la nueva plantilla en todas sus publicaciones.
- Usar en: todas las publicaciones
Empezar a construir el cuerpo de la plantilla
Y comience a construir el cuerpo de la plantilla.
2. Crear cuerpo de plantilla de publicación de blog
Configuración de la sección
Espaciado
Una vez dentro del editor de plantillas, verá una sección. Abra su configuración, pase a la pestaña de diseño y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Acolchado inferior: 0px
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho de la canaleta: 1
- Ecualizar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 100%
- Altura mínima: 100vh (escritorio), automático (tableta y teléfono)
- Altura máxima: 100vh (escritorio), ninguno (tableta y teléfono)
Espaciado
A continuación, elimine todo el acolchado superior e inferior predeterminado.
- Relleno superior: 0px
- Acolchado inferior: 0px
Desbordes
Y establezca los desbordamientos de la fila en ocultos.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Configuración de la columna 1
Fondo degradado
Luego, abra la configuración de la columna 1 y agregue un fondo degradado.
- Color 1: rgba (255,255,255,0)
- Color 2: # 000000
- Tipo de degradado: lineal
- Colocar degradado sobre la imagen de fondo: Sí
Imagen de fondo
Estamos usando la imagen destacada dinámica como imagen de fondo para la siguiente columna.
- Imagen de fondo: Imagen destacada
Configuración de la columna 2
Espaciado
Luego, abriremos la configuración de la columna 2 y agregaremos algunos valores de relleno personalizados a la configuración de espaciado.
- Acolchado superior: 8%
- Acolchado inferior: 8%
- Acolchado izquierdo: 8%
- Acolchado derecho: 8%
Desbordes
Para permitir que las personas se desplacen por la segunda columna, donde aparecerán el contenido de la publicación y el cuadro de comentarios, vamos a cambiar el desbordamiento vertical en la configuración de visibilidad.
- Desbordamiento vertical: desplazamiento (escritorio), visible (tableta y teléfono)
Agregar módulo de título de publicación a la columna 1
Elementos
Es hora de agregar módulos, comenzando con un Módulo de título de publicación en la columna 1. Desactive la opción de imagen destacada en la configuración de elementos.
- Mostrar imagen destacada: No
Configuración del texto del título
Vaya a la pestaña de diseño y cambie la configuración de texto H1 en consecuencia:
- Nivel de encabezado del título: H1
- Fuente del título: Work Sans
- Peso de la fuente del título: negrita
- Color del texto del título: #ffffff
- Tamaño del texto del título: 60 px (escritorio), 45 px (tableta), 35 px (teléfono)
- Espaciado de letras de título: -1px
- Altura de la línea de título: 1.2em
Configuración de meta texto
A continuación, modifique la configuración del meta texto.
- Fuente Meta: Work Sans
- Estilo de fuente Meta: mayúsculas
- Color del meta texto: #eaeaea
- Espaciado entre letras meta: 2px
Dimensionamiento
Luego, cambie el ancho en diferentes tamaños de pantalla.
- Ancho: 81% (escritorio), 100% (tableta y teléfono)
Espaciado
Agregue algunos valores de relleno receptivos a continuación.
- Acolchado superior: 8% (solo tableta y teléfono)
- Acolchado inferior: 8% (solo tableta y teléfono)
- Relleno izquierdo: 7% (tableta), 8% (teléfono)
- Relleno derecho: 7% (tableta), 8% (teléfono)
Posición
Y complete la configuración del módulo cambiando la configuración de posición de la siguiente manera:
- Posición: Absoluta (escritorio), predeterminada (tableta y teléfono)
- Ubicación: Centro Inferior
- Desplazamiento vertical: 10%
Agregar módulo de contenido de publicación a la columna 2
A la siguiente columna. Allí, el primer módulo que necesitamos es un módulo de contenido de publicaciones. Este módulo mostrará dinámicamente el contenido de su publicación.
Configuración del texto del encabezado
Realice algunos cambios en la configuración del texto del encabezado del módulo.
- Fuente de encabezado: Work Sans
- Peso de la fuente del encabezado: Semi negrita
- Tamaño del texto del encabezado:
- H2: 40 px
- H3: 30 px
- H4: 25 px
- H5: 16 píxeles
- H6: 14 píxeles
- Espaciado entre letras del encabezado: -1px (H2, H3 y H4)
Clase CSS
Y agregue una clase CSS. En el siguiente paso de este tutorial, usaremos esta clase CSS para generar algo de espacio entre encabezados y párrafos.
- Clase CSS: contenido de publicación de blog
Agregar módulo de código a la columna 2
Agregar código CSS para el espacio entre párrafos y encabezados
Agregue un módulo de código justo debajo del módulo de contenido de publicación y agregue las siguientes líneas de código CSS para generar espacio entre los encabezados y los párrafos:
<style>
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6
{
margin-top: 20px;
margin-bottom: 20px;
}
</style>
Agregar módulo de comentarios a la columna 2
Configuración de campos
El siguiente y último módulo que necesitamos en la columna 2 para completar este tutorial es un módulo de comentarios. Cambie la configuración de los campos del módulo en consecuencia:
- Color de fondo de los campos: #ffffff
- Color del texto de los campos: # 000000
- Relleno superior de campos: 30px
- Relleno de la parte inferior de los campos: 30px
- Relleno de campos a la izquierda: 30px
- Relleno de campos a la derecha: 30px
- Fuente Fields: Work Sans
- Estilo de fuente de campos: mayúsculas
- Tamaño del texto de los campos: 15px
- Espaciado de letras de campos: 3px
- Esquinas redondeadas de campos: 10px (todas las esquinas)
- Fuerza de desenfoque de sombra de la caja de campos: 30px
- Color de la sombra del cuadro de campos: rgba (0,0,0,0.06)
Configuración del texto del recuento de comentarios
Luego, cambie la configuración del texto del recuento de comentarios.
- Fuente de recuento de comentarios: Work Sans
- Peso de fuente de recuento de comentarios: negrita
Configuración del texto del título del formulario
Modifique también la configuración del texto del título del formulario.
- Título del formulario Nivel de encabezado: H3
- Fuente del título del formulario: Work Sans
- Título del formulario Peso de la fuente: Semi negrita
Configuración de meta texto
A continuación, haremos algunos cambios en la configuración del meta texto.
- Fuente Meta: Work Sans
- Peso de fuente meta: Semi negrita
- Color del meta texto: # 000000
Configuración de botones
Luego, aplicaremos el estilo del botón en consecuencia:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 16px
- Color del texto del botón: #ffffff
- Color de fondo del botón: # 000000
- Ancho del borde del botón: 0px
- Radio del borde del botón: 100 px
- Espacio entre letras del botón: 2px
- Fuente del botón: Work Sans
- Estilo de fuente del botón: mayúsculas
- Acolchado superior de botones: 2%
- Acolchado de la parte inferior de los botones: 2%
- Acolchado inferior izquierdo: 5%
- Acolchado del botón derecho: 5%
Espaciado
Agregaremos un margen superior también.
- Margen superior: 15%
Cuerpo de comentario CSS
Y completaremos la configuración del módulo agregando una línea de código CSS al cuerpo del comentario del módulo en la pestaña avanzada.
margin-top: 50px
3. Guarde los cambios del Creador de temas y vea el resultado
Ahora que hemos completado la plantilla de publicación de blog, lo único que queda por hacer es guardar todos los cambios de Divi Theme Builder y ver el resultado en nuestras publicaciones de blog.
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos un enfoque diferente para crear una plantilla de publicación de blog para su sitio web Divi. Más específicamente, le mostramos cómo crear un diseño de plantilla de publicación de blog en pantalla dividida utilizando el Generador de temas de Divi y contenido dinámico. Lo guiamos paso a paso a través del proceso y agregamos un archivo JSON que también pudo descargar de forma gratuita. Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.