¿Te gustaría mejorar las publicaciones de tu blog? Divi al agregarle una sección de héroe?
Las secciones Hero a pantalla completa se ven muy bien en cualquier página web, pero son especialmente buenas 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. Es fácil de hacer con el Creador de temas Divi .
En este artículo, veremos varias formas de agregar una sección Hero de pantalla completa a la plantilla de su publicación de blog. división
Vamos a empezar.
vista
Aquí hay una vista previa de lo que diseñaremos en este tutorial.
Lea también: Divi: Cómo usar el "Generador de degradados" para embellecer tus imágenes
Sección de héroe con módulo de versión de escritorio de título de publicación
Sección de héroe con módulo de versión móvil Post Title
Diseño alternativo de la sección Hero con el módulo de versión de escritorio Post Title
Descarga DIVI ahora!!!
Diseño de sección de héroe alternativo con módulo de título de publicación móvil
Sección de héroe con metadatos Versión de escritorio
Sección de héroe con versión móvil de metadatos
Descarga DIVI ahora!!!
Plantillas de publicaciones de blog para su sección principal de pantalla completa
Puede crear la plantilla de publicaciones de blog en Divi Theme Builder desde cero o descarga una plantilla del Blog de Elegant Themes. Para encontrarlos, busca en el blog. plantilla de publicación de blog gratis. Si descarga una plantilla, asegúrese de descomprimirla.
Para nuestros ejemplos, usaremos el Plantilla de publicación de blog gratuita para el paquete de diseño de diseñador de moda de Divi . También utilizamos el paquete de diseño. gratis Encabezado y pie de página Diseñador de moda .
Descargue o cree su plantilla de publicación de blog para su sección Hero a pantalla completa
Puede descargar su plantilla de publicación de blog o crear una desde cero. Subiremos uno, pero el proceso para crear una sección de héroe a pantalla completa es el mismo.
Ver también: Divi: Cómo usar máscaras y patrones de fondo para una sección de héroe
Método 1: módulo de título de publicación a pantalla completa
Este método utilizará el Módulo PostTítulo . 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 subimos tiene una sección con la imagen destacada. Eliminaremos esta sección y agregaremos una Sección de ancho completo en su sitio.
seleccionar Título de la publicación de ancho completo en la lista de módulos de ancho completo.
Todos los elementos se seleccionan de forma predeterminada. Déjalos habilitados. Desplácese hasta Ubicación de la imagen destacada y seleccione Por encima del título.
- Ubicación de la imagen destacada: encima del título
Desplazarse hasta Color de fondo y establece el color en #fff9f2
- Fondo: #fff9f2
Texto del título
Seleccione la pestaña Diseño. Para el texto del título, mantenga H1 y elija Playfair Display. Establézcalo en Justificado a la izquierda y elija #34332e para el color.
- Título:
- Nivel de título: H1
- Fuente: Pantalla Playfair
- Alineación de texto: justificado a la izquierda
- Color del texto: #34332e
Para la tamano del texto , establezca la versión de escritorio en 65 px, la versión móvil en 42 px y la altura de fila en 1,2 em.
- Tamaño del texto del título (escritorio): 65 px (escritorio), 42 px (teléfono)
- Altura de la línea del título: 1,2 cm
metatexto
Desplazarse hasta Meta texto. Seleccione Montserrat para la fuente y configúrela en media, mayúscula, alineación a la derecha para la versión de escritorio y alineación a la izquierda para la versión móvil. Elija #7b7975 para el color.
- Metafuente:
- Fuente: Montserrat
- Peso: Medio
- Estilo: TT
- Metatexto:
- Alineación: derecha (Escritorio), izquierda (Teléfono)
- Color: #7b7975
Selecciona el tamaño de fuente para la versión de escritorio a 14 px, para la versión móvil a 10 px, el espacio entre letras a 1 px y la altura de línea a 1,6 cm. Cierra tu configuración y guarda tu plantilla.
- Metatexto:
- Tamaño (Escritorio): 14px
- Tamaño (teléfono): 10px
- Espaciado entre letras: 1px
- Altura de la línea: 1,6 cm
Título en la imagen de fondo
Si decide que desea que el título aparezca en la imagen destacada, use la misma configuración de diseño y vuelva a la pestaña Contenido.
seleccionar Imagen de título/metafondo para Ubicación de la imagen destacada.
- Colocación de la imagen destacada: Título/Meta imagen de fondo
Desplazarse hasta Antecedentes y seleccione Gradiente de fondo. Définissez la couleur de gauche sur # fff9f2, la couleur de droite sur rgba (255,255,255,0), la direction sur 90 degrés, la position de départ sur 30 % et choisissez Oui pour placer le dégradé au-dessus de l'image d' fondo. Cierra y guarda tu configuración.
- Paradas de gradiente:
- 30%: #fff9f2
- 100%: rgba(255,255,255,0)
- Dirección del gradiente: 90 grados
- Gradiente cuadrado sobre la imagen de fondo: SÍ
Método 2: Sección de héroe de pantalla completa con metadatos
Este método utilizará módulos de texto con contenido dinámico por la informacion. Esta es una buena opción si desea mostrar todos los elementos en diferentes lugares.
Primero, descargue 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.
Configuración de la sección Hero a pantalla completa con metadatos
Abra la configuración de la . y desplázate hasta Imagen de fondo. Seleccione Gradiente de fondo y cambie la configuración de la siguiente manera:
- Paradas de gradiente:
- 30%: #fff9f2
- 100%: rgba(255,255,255,0)
- Dirección del gradiente: 90 grados
- Gradiente cuadrado sobre la imagen de fondo: SÍ
seleccionar Imagen de fondo y elige la opción Usar contenido dinámico.
Elegir Foto Principal en las opciones.
Seleccione la pestaña Diseñoy desplázate hasta Guía de Tallas. Agregue 100vh a la altura mínima. Cierra la configuración de la sección.
- Altura mínima: 100vh
Configuración de la sección Hero a pantalla completa con metadatos
A continuación, agregue una fila de doble columna a la sección.
Agrega un Módulo de texto en la columna de la derecha.
Por su contenido, seleccione Usar contenido dinámico.
Elegir Título de la publicación / archivo en la lista de opciones.
- Contenido dinámico: título de publicación/archivo
ir a la pestaña Diseño.
- Bóveda:
- Texto: H1
- Fuente: Pantalla Playfair
- Alineación de texto: justificado a la izquierda
- Color del texto: #34332e
para el tamaño de textos , establezca para la versión de escritorio en 65 px, para la versión móvil en 42 px y la altura de la fila en 1,2 em.
- Bóveda:
- Tamaño del texto: 65 px (escritorio), 42 px (teléfono)
- Altura de la línea: 1,2 cm
Desplazarse hasta Distanciamiento e ingrese 50% para el relleno superior. Cerrar Configuración.
- Relleno: 50% (Superior)
También puedes leer este artículo sobre: Cómo crear una sección de héroe con el módulo de encabezado de ancho completo de Divi
Sección principal con categoría de metadatos
Agregar una nueva sección regular en la sección Héroe.
Abra su configuración y establezca el los colores fondo en #fff9f2. Cerrar Configuración.
- Color de fondo: #fff9f2
Luego agrega un línea de 4 columnas a la nueva sección.
Héroe de pantalla completa con texto de categoría de metadatos
Agrega un Módulo de texto en la columna izquierda
Abra la configuración del módulo y seleccione Usar contenido dinámico para el cuerpo del texto.
seleccionar Categorías pasadas en 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 media, mayúscula, alineación a la derecha para la versión de escritorio y alineación a la izquierda para la versión de teléfono. Elija #7b7975 para el color.
- Bóveda:
- Visualización de texto
- Fuente: Pantalla Playfair
- Peso de fuente: Medio
- Estilo: TT
- Alineación de texto: Centro
- Color del texto: #7b7975
Establezca el tamaño de fuente para la versión de escritorio en 14 px, para la versión móvil en 10 px, el espacio entre letras en 1 px y la altura de línea en 1,6 em. Cierra tu configuración y guarda tu plantilla.
- Título 4:
- Tamaño (Escritorio): 14px
- Tamaño (teléfono): 10px
- Espaciado entre letras: 1px
- Altura de la línea: 1,6 cm
Desplazarse hasta Distanciamiento y agregue 0px al margen inferior. Cerrar Configuración.
- Margen (inferior): 0px
Sección Héroe a pantalla completa con metadatos de metatexto
A continuación, copie el módulo Categoría y arrástrelo 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 copiarlo dos veces para crear los otros módulos.
autor
Abra la configuración y elimine el contenido dinámica.
Cliquez sur Usar contenido dinámico y elige Autor de publicación.
- Contenido dinámico: autor de la publicación
en la pestaña Diseño, Cambie los siguientes ajustes.
- Título 4:
- Fuente: Montserrat
- Peso de fuente: Medio
- Estilo: TT
- Alineación de texto (Escritorio): Centro
- Alineación de texto (teléfono): izquierda
- Color: #7b7975
Los parámetros de tamaño de fuente incluir:
- Tamaño del texto: 14 px (escritorio), 10 px (teléfono)
- Espaciado entre letras: 1px
- Altura de la línea: 1,6 cm
La margen inferior debe tener 0px.
- Margen (inferior): 0px
Fecha
copia el módulo Autor y arrástrelo a la siguiente columna.
Bórralo contenido dynamique actual, elige Usar contenido dinámico y seleccione Fecha de publicación. Cerrar Configuración.
- Contenido dinámico: Publicar fecha de publicación
comentarios
Enfin, copiar el módulo Publicar fecha de publicación y arrástrelo a la última columna.
Al igual que con otros módulos, elimine el contenido dinámico y seleccione Usar contenido dinámico .
Elegir Publicar recuento de comentarios de tus elecciones.
- 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
Lea también: Divi: cómo mostrar el módulo de encabezado de ancho completo en pantalla completa
Resultados
Sección de héroe con módulo de versión de escritorio de título de publicación
Sección de héroe con módulo de versión móvil Post Title
Diseño alternativo de la sección Hero con el módulo de versión de escritorio Post Title
Diseño de sección de héroe alternativo con módulo de título de publicación móvil
Sección de héroe con metadatos Versión de escritorio
Sección principal con metadatos de la versión móvil
Descarga DIVI ahora!!!
Conclusión
Eso es eso es todo ! Este es nuestro vistazo a cómo agregar una sección Hero a pantalla completa a la plantilla de su publicación de blog. Divi.
Los módulos Divi y Theme Builder ofrecen varias opciones para crear secciones Hero en pantalla completa. Todos los métodos funcionan muy bien y todos tienen sus ventajas.
Con estos métodos, puede agregar una sección Hero de pantalla completa a cualquier plantilla de publicación de blog Divi.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.
No dudes en consultar también nuestra guía sobre la 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.
...
