Las secciones principales de pantalla completa se ven muy bien en cualquier página web, pero son especialmente interesantes en las publicaciones de blog. Aunque la imagen destacada es de pantalla completa, hay muchas opciones de diseño para colocar el título y el metatexto. Esto es fácil de hacer con Divi Theme Builder . En este artículo, veremos varias formas de agregar un héroe de pantalla completa a su plantilla de publicación de blog Divi .
Empecemos.
Aquí hay un vistazo a lo que haremos.
Escritorio de módulo de título de publicación a pantalla completa
Módulo de título de publicación en pantalla completa Teléfono
Módulo de título de publicación alternativo a pantalla completa con título sobre escritorio de fondo
Módulo de título de publicación alternativo a pantalla completa con título sobre teléfono de fondo
Héroe de pantalla completa con escritorio de metadatos
Héroe de pantalla completa con teléfono de metadatos
Plantillas de publicaciones de blog para su héroe de pantalla completa
Puede crear la plantilla de publicación de blog en Divi Theme Builder desde cero o cargar una plantilla desde el blog de Elegant Themes. Para encontrarlos, busque en el blog «plantilla de publicación de blog gratuita». Si descarga una plantilla, asegúrese de descomprimirla.
Para mis ejemplos, estoy usando la plantilla de publicación de blog gratuita para el paquete de diseño de diseñador de moda de Divi . También estoy usando el Paquete de diseño de diseñador de moda de encabezado y pie de página gratuito para combinar.
Cargue o cree su plantilla de publicación de blog para su héroe de pantalla completa
Puede cargar su plantilla de publicación de blog o crear una desde cero. Subiremos uno, pero el proceso de creación del héroe a pantalla completa es el mismo.
Para cargar una plantilla, vaya a Divi > Theme Builder en el panel de control de WordPress. Seleccione Portabilidad y haga clic en Importar dentro del modal que se abre. Navegue a su archivo JSON y selecciónelo. Haga clic en Importar plantillas de Divi Theme Builder y espere a que se complete la carga. Guarde su configuración.
- Ve a Divi en el tablero de WordPress
- Seleccionar generador de temas
- Haga clic en Portabilidad
- Seleccione Importar
- Elija su archivo JSON
- Haga clic para importar
- Guarde su configuración
Método 1: Módulo de título de publicación en pantalla completa
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 en conjunto. Una vez que tenga su plantilla, seleccione el icono de edición para abrirla.
La plantilla que subí tiene una sección con la imagen destacada. Eliminaremos esta sección y agregaremos una sección de ancho completo en su lugar.
Seleccione Título de publicación de ancho completo de la lista de módulos de ancho completo.
Todos los elementos están seleccionados por defecto. Déjalos habilitados. Desplácese hacia abajo hasta Ubicación de la imagen destacada y seleccione Sobre el título .
- Ubicación de la imagen destacada: encima del título
Desplácese hacia abajo hasta Fondo y establezca el color en #fff9f2
- Color: #fff9f2
Texto del título
Seleccione la pestaña Diseño . Para el texto del título, mantén H1 y elige Playfair Display. Establézcalo en Justificado a la izquierda y elija #34332e para el color.
- Fuente: Pantalla Playfair
- Alineación: Justificado a la izquierda
- Color: #34332e
Para el Tamaño del texto , establezca el escritorio en 65 px, el teléfono en 42 px y la Altura de línea en 1,2 em.
- Tamaño del escritorio: 65px
- Tamaño del teléfono: 42px
- Altura de la línea: 1,2 em
metatexto
Desplácese hacia abajo hasta Meta . Seleccione Montserrat para la fuente y configúrela en peso medio, mayúsculas, alineación a la derecha para escritorio y alineación a la izquierda para teléfono. Elija #7b7975 para el color.
- Fuente: Montserrat
- Peso: Medio
- Estilo: Mayúsculas
- Alineación de escritorio: Derecha
- Alineación del teléfono: Izquierda
- Color: #7b7975
Establezca el Tamaño de fuente del escritorio en 14 px, el tamaño del teléfono en 10 px, el Espaciado entre letras en 1 px y la Altura de línea en 1,6 em. Cierra tu configuración y guarda tu plantilla.
- Tamaño del escritorio: 14px
- Tamaño del teléfono: 10px
- Espaciado entre letras: 1px
- Altura de la línea: 1,6 em
Título sobre la imagen de fondo
Si decide que desea que el título aparezca sobre la imagen destacada, use la misma configuración de Diseño y vuelva a la pestaña Contenido. Seleccione Título/Meta imagen de fondo para la ubicación de la imagen destacada.
- Colocación de la imagen destacada: Título/Meta imagen de fondo
Desplácese hacia abajo hasta Fondo y seleccione Degradado . Establezca el color de la izquierda en #fff9f2, el color de la derecha en rgba(255,255,255,0), la dirección en 90 grados, la posición de inicio en 30 % y elija Sí para colocar el degradado sobre la imagen de fondo. Cierra y guarda tu configuración.
- Color de degradado izquierdo: #fff9f2
- Color de degradado derecho: rgba(255,255,255,0)
- Dirección del gradiente: 90 grados
- Posición inicial: 30%
- Coloque el degradado sobre la imagen de fondo: SÍ
Método 2: Héroe a pantalla completa con metadatos
Este método utilizará módulos de texto con contenido dinámico para la información. Esta es una buena opción si desea mostrar todos los elementos en diferentes lugares. Primero, cargue la plantilla y elimine la primera sección. Volveremos a crear los módulos y sus configuraciones en la columna de la izquierda, pero los revisaremos para que pueda configurarlos.
Héroe a pantalla completa con la configuración de la sección de metadatos
Abra la configuración de la sección y desplácese hacia abajo hasta Color de fondo . Seleccione Degradado y establezca el color izquierdo en #fff9f2, el color derecho en rgba(255,255,255,0), la Dirección del degradado en 90 grados, la Posición de inicio en 30 % y Colocar degradado sobre la imagen de fondo en SÍ.
- Color de degradado izquierdo: #fff9f2
- Color de degradado derecho: rgba(255,255,255,0)
- Dirección del gradiente: 90 grados
- Posición inicial: 30%
- Coloque el degradado sobre la imagen de fondo: SÍ
Seleccione Imagen y elija la opción Contenido dinámico.
Elija Imagen destacada en las opciones.
Seleccione la pestaña Diseño y desplácese hasta Configuración. Agregue 100vh a la altura mínima. Cierra la configuración de la sección.
- Altura mínima: 100vh
Héroe de pantalla completa con texto de título de metadatos
A continuación, agregue una fila de doble columna a la sección.
Agregue un módulo de texto a la columna de la derecha.
Para su contenido, seleccione Usar contenido dinámico .
Elija 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 de encabezado, mantenga H1 y elija Playfair Display. Establézcalo en Justificado a la izquierda y elija #34332e para el color.
- Fuente: Pantalla Playfair
- Alineación: Justificado a la izquierda
- Color: #34332e
Para el tamaño del texto , configure el escritorio en 65 px, el teléfono en 42 px y la altura de la línea en 1,2 em.
- Tamaño del escritorio: 65px
- Tamaño del teléfono: 42px
- Altura de la línea: 1,2 em
Desplácese hacia abajo hasta Espaciado e ingrese 50% para el Relleno superior. Cierra la configuración.
- Acolchado superior: 50%
Héroe a pantalla completa con sección de categoría de metadatos
Agregue una nueva sección regular debajo de la sección de héroe.
Abra su configuración y establezca el Color de fondo en #fff9f2. Cierra la configuración.
- Color de fondo: #fff9f2
A continuación, agregue una fila de 4 columnas a la nueva sección.
Héroe de pantalla completa con texto de categoría de metadatos
Agregue un módulo de texto a la columna de la izquierda.
Abra la configuración del módulo y seleccione Usar contenido dinámico para el cuerpo del texto.
Seleccione Categorías de publicación de la lista.
- Contenido dinámico: categorías de publicaciones
Seleccione la pestaña Diseño y desplácese hacia abajo hasta Texto de encabezado. Seleccione H4. Elija Playfair Display para la fuente y configúrela en peso medio, mayúsculas, alineación a la derecha para escritorio y alineación a la izquierda para teléfono. Elija #7b7975 para el color.
- Texto de encabezado: H4
- Fuente: Pantalla Playfair
- Peso: Medio
- Estilo: Mayúsculas
- Alineación: Centro
- Color: #7b7975
Establezca el Tamaño de fuente del escritorio en 14 px, el tamaño del teléfono en 10 px, el Espaciado entre letras en 1 px y la Altura de línea en 1,6 em. Cierra tu configuración y guarda tu plantilla.
- Tamaño del escritorio: 14px
- Tamaño del teléfono: 10px
- Espaciado entre letras: 1px
- Altura de la línea: 1,6 em
Desplácese hacia abajo hasta Espaciado y agregue 0px al Margen inferior. Cierra la configuración.
- Margen inferior: 0px
Héroe de pantalla completa con metadatos metatexto
A continuación, copie el módulo de categoría y arrástrelo a la siguiente columna. Cada uno de los módulos Meta tiene la misma configuración. Le mostraremos cómo crear el primer módulo y luego copiarlo dos veces para crear los otros módulos.
Autor
Abra la configuración y elimine el contenido dinámico de Categorías de publicaciones.
Haga clic en Usar contenido dinámico y seleccione Publicar autor.
- Contenido dinámico: autor de la publicación
En la pestaña Diseño , vaya a la fuente Título 4 y seleccione Montserrat para la fuente. El resto de la configuración se ha copiado del módulo anterior. Incluyen grosor medio, mayúsculas, alineación a la derecha para escritorio, alineación a la izquierda para teléfono y #7b7975 para el color.
- Fuente: Montserrat
- Peso: Medio
- Estilo: Mayúsculas
- Alineación del escritorio: Centro
- Alineación del teléfono: Izquierda
- Color: #7b7975
La configuración de Tamaño de fuente incluye el tamaño del escritorio en 14 px, el tamaño del teléfono en 10 px, el Espaciado entre letras en 1 px y la Altura de línea en 1,6 em.
- Tamaño del escritorio: 14px
- Tamaño del teléfono: 10px
- Espaciado 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 Autor y arrástrelo a la siguiente columna.
Elimine el contenido dinámico , elija Usar contenido dinámico y seleccione Publicar fecha de publicación. Cierra la configuración.
- Contenido dinámico: Publicar fecha de publicación
Comentarios
Finalmente, copie el módulo Fecha de publicación y arrástrelo a 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 publicados entre sus opciones.
- Contenido dinámico: número de comentarios publicados
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. Guarda tu trabajo.
- Después: Comentarios
Resultados
Escritorio de módulo de título de publicación a pantalla completa
Módulo de título de publicación en pantalla completa Teléfono
Módulo de título de publicación alternativo a pantalla completa con título sobre escritorio de fondo
Módulo de título de publicación alternativo a pantalla completa con título sobre 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
Ese es nuestro vistazo a cómo agregar un héroe de pantalla completa a su plantilla de publicación de blog Divi. Los módulos Divi y Theme Builder brindan varias opciones para crear secciones de héroes a pantalla completa. Cualquiera de los métodos funciona muy bien y todos tienen sus ventajas. Con estos métodos, puede agregar un héroe de pantalla completa a cualquier plantilla de publicación de blog Divi.
Queremos escuchar de ti. ¿Ha agregado un héroe de pantalla completa a las plantillas de publicación de su blog? Cuéntanoslo en los comentarios.