Cómo dividir la pantalla de tu plantilla de publicación de blog con Divi’s Theme Builder

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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

1. Vaya a Divi Theme Builder y agregue una nueva plantilla de publicación

Vaya a Divi Theme Builder y agregue una nueva plantilla

Comience yendo al Divi Theme Builder . Una vez allí, agregue una nueva plantilla.

Usar plantilla en todas las publicaciones

Usa la nueva plantilla en todas tus publicaciones.

• Usar en: todas las publicaciones

Comience 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

Ajustes de sección

Espaciado

Una vez dentro del editor de plantillas, verás 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
• Relleno 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 la fila y modifique la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho del canalón: 1
• Igualar 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

Elimine todo el relleno superior e inferior predeterminado a continuación.

• Relleno superior: 0px
• Relleno inferior: 0px

desbordamientos

Y configure los desbordamientos de la fila como 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 gradiente: lineal
• Coloque el 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%
• Relleno izquierdo: 8%
• Relleno derecho: 8%

desbordamientos

Para permitir que las personas se desplacen por la segunda columna, donde aparecerá 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. Deshabilite la opción de imagen destacada en la configuración de elementos.

• Mostrar imagen destacada: No

Configuración del texto del título

Pase a la pestaña de diseño y cambie la configuración de texto H1 en consecuencia:

• Título Nivel de encabezado: 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 entre letras del título: -1px
• Altura de la línea del título: 1,2 em

Configuración de metatexto

Modifique la configuración del metatexto a continuación.

• Fuente Meta: Work Sans
• Estilo de fuente Meta: Mayúsculas
• Color del metatexto: #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 de respuesta 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 publicación. Este módulo mostrará dinámicamente el contenido de su publicación.

Ajustes de texto de encabezado

Realice algunos cambios en la configuración del texto del encabezado del módulo.

• Fuente del título: Work Sans
• Peso de la fuente del encabezado: semi negrita
• Tamaño del texto del encabezado:
  
  • H2: 40px
  • H3: 30px
  • H4: 25px
  • H5: 16px
  • H6: 14px
• Espaciado entre letras de encabezado: -1px (H2, H3 y H4)

Clase CSS

Y agregue una clase CSS. En el próximo paso de este tutorial, usaremos esta clase CSS para generar espacio entre encabezados y párrafos.

• Clase CSS: blog-post-contenido

Agregar módulo de código a la columna 2

Agregar código CSS para espacios entre párrafos y encabezados

Agregue un módulo de código justo debajo del módulo de publicación de contenido y agregue las siguientes líneas de código CSS para generar espacio entre encabezados y párrafos:

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 inferior de campos: 30px
• Campos de relleno izquierdo: 30px
• Campos Relleno derecho: 30px
• Fuente de los campos: Work Sans

• Estilo de fuente de los campos: Mayúsculas
• Tamaño del texto de los campos: 15px
• Espaciado entre letras de los campos: 3px
• Campos Esquinas redondeadas: 10px (Todas las esquinas)

• Fuerza de desenfoque de sombra de caja de campos: 30px
• Color de sombra del cuadro de campos: rgba(0,0,0,0.06)

Configuración de texto de recuento de comentarios

Luego, cambie la configuración del texto del conteo de comentarios.

• Fuente de recuento de comentarios: Work Sans
• Número de comentarios Peso de la fuente: 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
• Peso de la fuente del título del formulario: semi negrita

Configuración de metatexto

A continuación, haremos algunos cambios en la configuración del metatexto.

• Fuente Meta: Work Sans
• Peso de fuente meta: semi negrita
• Color del metatexto: #000000

Configuración de botones

Luego, diseñaremos el 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: 100px

• Espaciado entre letras de botones: 2px
• Fuente del botón: Work Sans
• Estilo de fuente del botón: Mayúsculas

• Relleno superior de botones: 2%
• Relleno inferior del botón: 2%
• Relleno inferior izquierdo: 5%
• Relleno derecho del botón: 5%

Espaciado

Agregaremos un poco de margen superior también.

• Margen superior: 15%

CSS del cuerpo del comentario

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.

3. Guarde los cambios del generador 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 Theme Builder 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 regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.