Cómo agregar un héroe de pantalla completa a la plantilla de publicación en tu div

Los héroes de pantalla completo buscan en cualquier página web, pero son particularmente interesantes en las publicaciones de blog. Incluso si la imagen presentada está en una pantalla completa, hay muchas opciones de diseño para colocar el título y el meta texto. Esto es fácil de hacer con Temo Builder Div. En este artículo, veremos más formas de agregar un héroe de pantalla completa a la plantilla de publicación en su DIV. Vamos a empezar. La vista previa es una mirada a lo que haremos. Módulo de escritorio de títulos de publicación de pantalla completa

Módulo de título de publicación telefónica en la pantalla completa

Modo alternativo de publicar el título en la pantalla completa con el título sobre el escritorio de fondo

Modo alternativo de publicación en la pantalla completa con el título sobre el teléfono de fondo

Héroe de pantalla completa con escritorio de metadatos

Héroe de pantalla completa con teléfono de metadatos

Publicaciones de blog para tu héroe de pantalla completa

Puede crear la plantilla de publicación del blog en el constructor de temas Divin desde cero o puede cargar una plantilla del blog elegante de temas. Para encontrarlos, busque el blog “Publicación gratuita del blog” en el blog. Si descarga una plantilla, asegúrese de decepcionarla. Para mis ejemplos, utilizo la plantilla de publicación de blog gratuita para el paquete de diseño para el diseñador de moda. También utilizo el paquete de diseño de diseño de encabezado y diseño gratuito para que se ajuste.
Subir o crear plantilla de publicación de blog para su héroe de pantalla completa

Puede cargar la plantilla de publicación del blog o crear una desde cero. Cargaremos uno, pero el proceso de crear el héroe en la pantalla completa es el mismo. Para cargar una plantilla, vaya a Divin> Temo Builder en el tablero de WordPress. Seleccione la portabilidad y haga clic en Importar de una manera que se abra. Navegue a su archivo JSON y seleccione. Haga clic en Importar plantillas de constructor de temas Div Div y espere la carga. Guarde su configuración para Divcce en el tablero de WordPress
Seleccionar constructor de temas
Haga clic en la portabilidad
Seleccionar importar
Elija su archivo JSON
Haga clic para importar
Guarde su configuración
Método 1: Módulo de título de publicación posterior a la pantalla
Este método utilizará el módulo de título de publicación. Esta es una buena opción si desea mostrar toda la información juntos. Después de tener la plantilla, seleccione el icono de edición para abrirla.

La plantilla que cargué tiene una sección con la imagen presentada. Eliminaremos esta sección y agregaremos una sección de ancho completo en su lugar.

Seleccione el título de la publicación de Valor completo de FullWidth Module List.

Todos los elementos se seleccionan de forma predeterminada. Déjalos activados. Desplácese hacia abajo al colocar las imágenes recomendadas y seleccione por encima del título.

Colocación de la imagen recomendada: arriba del título
Desplácese hacia abajo hacia el fondo y configure el color en #FFF9F2

Color: #FFF9F2
El texto del título
Seleccione la pestaña Diseño. Para el texto del título, mantenga H1 y elija PlayFair Display. Contácelo a la izquierda justificado y elija #34332E para el color.

Font: PlayFair Display
Alineación: justificado a la izquierda
Color: #34332e
Para el tamaño de texto, configure el escritorio en 65 px, teléfono a 42 PX y altura de línea a 1.2 em. Desktop de dimensión: 65px

Tamaño del teléfono: 42px
Altura de la línea: 1.2 em
Meta texto
Desplácese hacia abajo hasta Meta. Seleccione Montserrat para la fuente y configúrelo en peso medio, alineación diestra y alineación del teléfono izquierdo. Elija #7B7975 para el color.
Fuente: Montserrat

Peso: medio
Estilo: mayúsculas
Alineación de escritorio: correcto
Alineación telefónica: izquierda
Color: #7B7975
Establezca el tamaño de la fuente en el escritorio a 14 px, el tamaño del teléfono a 10 px, el espacio de las letras a 1 px y la altura de la línea a 1.6 em. Cierre la configuración y guarde la plantilla.
Tamaño de escritorio: 14px

Tamaño del teléfono: 10px
Espacio entre letras: 1px
Altura de la línea: 1.6 em
Título sobre el fondo
Si decide que desea que el título aparezca a través de la imagen presentada, use la misma configuración de diseño y vuelva a la pestaña de contenido. Seleccione el título/Meta Wallpaper para colocar la imagen recomendada.
Colocación de la imagen recomendada: Título/Meta de fondo

Desplácese hacia abajo hacia el fondo y seleccione el gradiente. Establezca el color izquierdo en #FFF9F2, el color derecho a RGBA (255,255,255.0), la dirección a 90 grados, la posición inicial al 30% y elija colocar el gradiente sobre la imagen de fondo. Cierre y guarde la configuración.
Color de gradiente izquierdo: #FFF9F2

Color de gradiente derecho: RGBA (255,255,255.0)
Dirección de gradiente: 90 grados
Posición inicial: 30%
Coloque el gradiente sobre la imagen de fondo: sí
Método 2: Héroe de pantalla completa con metadatos
Este método utilizará módulos de texto dinámicos para obtener información. Esta es una buena opción si desea mostrar todos los elementos en diferentes lugares. Primero, cargue su plantilla y elimine la primera sección. Recrearemos sus módulos y configuraciones en la columna izquierda, pero los revisaremos para que pueda configurarlos. Dispara completamente con configuración para la sección de metadatos
Abra la configuración de la sección y desplácese por el color de fondo. Seleccione el gradiente y configure el color de la izquierda a #FFF9F2, el color derecho en RGBA (255,255,255.0), la dirección del gradiente a 90 grados, la posición inicial al 30% y coloque el gradiente sobre la imagen de fondo.

Color de gradiente izquierdo: #FFF9F2
Color de gradiente derecho: RGBA (255,255,255.0)

Dirección de gradiente: 90 grados
Posición inicial: 30%
Coloque el gradiente sobre la imagen de fondo: sí
Seleccione la imagen y elija la opción de contenido dinámico.
Elija la imagen presentada en las opciones.
Seleccione la pestaña de diseño y ejecute la configuración. Agregue 100 VH a la altura mínima. Cierre la configuración de la sección.

Altura mínima: 100 VH

Héroe de pantalla completa con el texto del título de metadatos

Luego agregue una fila con dos columnas a la sección.
Agregue un módulo de texto a la columna derecha.
Para su contenido, seleccione usando el contenido dinámico.

Elija el título de publicación/archivo de la lista de opciones.


Contenido dinámico: título de publicación/archivo

Seleccione la pestaña Diseño. Para el texto del título, mantenga H1 y elija PlayFair Display. Contácelo a la izquierda justificado y elija #34332E para el color.

Font: PlayFair Display
Alineación: justificado a la izquierda

Color: #34332e
Para el tamaño de texto, configure el escritorio en 65 px, teléfono a 42 PX y altura de línea a 1.2 em. Desktop de dimensión: 65px
Tamaño del teléfono: 42px
Altura de la línea: 1.2 em

Desplácese hacia abajo hasta el espacio e ingrese al 50% para el relleno superior. Cierre la configuración.
Revestimiento superior: 50%
Héroe en una pantalla completa con la categoría de metadatos
Agregue una nueva sección habitual en la sección Hero.

Abra la configuración y establezca el color de fondo en #FFF9F2. Cierre la configuración.
Color de fondo: #FFF9F2
Luego agregue una fila con 4 columnas a la nueva sección. Héroe en una pantalla completa con texto en la categoría de metadatos

Agregue un módulo de texto a la columna izquierda.

Abra la configuración del módulo y seleccione Usar contenido dinámico para el cuerpo de texto.
Seleccione las publicaciones de publicaciones de la lista.

Contenido dinámico: categorías de publicaciones

Seleccione la pestaña Diseño y desplácese hacia abajo hasta el texto del título. Seleccione H4. Elija la pantalla PlayFair para la fuente y configúrela en peso medio, alineación diestra y alineación del teléfono izquierdo. Elija #7B7975 para el color.

Texto del título: H4

Font: PlayFair Display
Peso: medio

Estilo: mayúsculas
Alineación: centro
Color: #7B7975
Establezca el tamaño de la fuente en el escritorio a 14 px, el tamaño del teléfono a 10 px, el espacio de las letras a 1 px y la altura de la línea a 1.6 em. Cierre la configuración y guarde la plantilla.
Tamaño de escritorio: 14px
Tamaño del teléfono: 10px
Espacio entre letras: 1px

Altura de la línea: 1.6 em
Desplácese hacia abajo hasta el espacio y agregue 0px al margen inferior. Cierre la configuración.
Margen inferior: 0px
Héroe en pantalla completa con metadatos de metatext
Luego copie el módulo de categoría y tírelo a la siguiente columna. Cada uno de los módulos meta tiene la misma configuración. Mostraremos cómo crear el primer módulo y luego copiaremos dos veces para crear los otros módulos. AutoSdepose la configuración y elimine el contenido dinámico de las categorías de publicación.

Haga clic en Usar contenido dinámico y elija Post Autor.
Contenido dinámico: autor de la publicación
En la pestaña de diseño, vaya a la fuente 4 de encabezado y seleccione Montserrat para la fuente. El resto de la configuración se copiaron del módulo anterior. Estos incluyen peso mediano, mayúscula, alineación derecha, alineación lateral de mano izquierda y #7B7975 para el color.

Fuente: Montserrat

Peso: medio

Estilo: mayúsculas
Alineación de escritorio: centro

Alineación telefónica: izquierda
Color: #7B7975
La configuración del tamaño de la fuente incluye el tamaño del escritorio a 14 px, el tamaño del teléfono a 10 px, el espacio de las letras a 1 px y la altura de la línea a 1.6em.
Tamaño de escritorio: 14px
Tamaño del teléfono: 10px
Espacio entre letras: 1px
Altura de la línea: 1.6 em

El margen inferior debe tener 0px.
Margen inferior: 0px
Fecha
Copie el módulo del autor y tírelo a la siguiente columna.
Elimine el contenido dinámico, elija el contenido dinámico y seleccione la fecha de publicación. Cierre la configuración.

Contenido dinámico: fecha de publicación
Comentario
Finalmente, copie la fecha de la fecha de publicación y póngala en la última columna.

Al igual que con los otros módulos, elimine el contenido dinámico y seleccione Usar contenido dinámico.

Elija el número de comentarios de sus opciones.
Contenido dinámico: número de publicaciones
Esta vez, agregue un espacio y la palabra comentarios en el campo después. Cierre el pequeño modal y luego cierre la configuración. Guarde su trabajo. Después: comentarios

Resultados de la pantalla completa Módulo de escritorio de título

Módulo de título de publicación telefónica en la pantalla completa

Modo alternativo de publicar el título en la pantalla completa con el título sobre el escritorio de fondo
Modo alternativo de publicación en la pantalla completa con el título sobre el teléfono de fondo

Héroe de pantalla completa con escritorio de metadatos
Héroe de pantalla completa con teléfono de metadatos
Pensamientos finales Esta es nuestra forma de agregar un héroe de pantalla completa a la plantilla de publicación en su blog de Divic. Los módulos Divi y Builder de temas ofrecen varias opciones para construir un héroes de pantalla completa. Cualquiera de los métodos funciona excelente y todos tienen sus ventajas. Usando estos métodos, puede crear agregar un héroe de pantalla completa a cualquier plantilla de publicación en el blog de la divicidad. Queremos escuchar de ti. ¿Has agregado un héroe de pantalla completa a las plantillas de publicación del blog? Cuéntanos sobre esto en los comentarios.