4 ejemplos asombrosos del módulo de título de publicación de Divi y cómo lograrlos
Publicado: 2019-01-13Para todos los blogueros de Divi que buscan nuevas formas de involucrar a las personas con las publicaciones de su blog, el módulo de título de publicaciones de Divi es un excelente lugar para comenzar. El módulo de título de la publicación le permite diseñar el título de la publicación (y la imagen destacada) de varias maneras para obtener innumerables diseños impresionantes. Esto le permite crear algunos artículos hermosos que enganchan a sus lectores potenciales desde el primer vistazo. Hoy, te mostraré cuatro formas asombrosas en las que puedes diseñar el módulo de título de la publicación Divi para ayudar a atraer a tus lectores.
¡Empecemos!
Vistazo
Aquí hay un vistazo rápido a los diseños del módulo de título de la publicación que se presentan en este tutorial.
# 1 Encuadre abstracto
Empiece a construir # 1
# 2 Texto superpuesto e imagen destacada
Empiece a construir # 2
# 3 Fondos de contenido únicos para legibilidad
Empiece a construir # 3
# 4 efecto de apilamiento con imágenes destacadas duales
Empiece a construir # 4
Empezando
Suscríbete a nuestro canal de Youtube
Todo lo que realmente necesitas para este tutorial es Divi. Crearemos nuevas publicaciones y usaremos Divi Builder para crear los diseños de los títulos de las publicaciones. También necesitará algunas imágenes para que sirvan como imágenes destacadas.
La configuración para nuevas publicaciones
Para este tutorial, usaré Divi Builder para crear diseños de títulos de publicaciones de ejemplo en una publicación nueva. Para configurar las compilaciones en este tutorial, deberá hacer lo siguiente:
- Crea una nueva publicación.
- Agrega un título a tu publicación.
- Agrega una imagen destacada a tu publicación.
- Implemente Divi Builder.
- Elija construir desde cero
- en Configuración de página Divi, seleccione el diseño de página Sin barra lateral y seleccione Ocultar el título de la publicación.
- Luego haga clic en Construir en el Front End o implementar el modo de vista de Escritorio en el backend para que pueda diseñar la página visualmente.
Depende de usted si desea o no crear una nueva publicación para cada diseño o simplemente agregar varios diseños de título de publicación a una publicación. Solo tenga en cuenta que si agrega varios títulos de publicación en una publicación, heredarán el mismo título de página y la misma imagen destacada.
# 1 Encuadre abstracto
Este diseño limpio del título de la publicación tiene elementos sutiles de encuadre abstracto que funcionarán bien con la imagen destacada y el título de la publicación. El efecto de encuadre se crea utilizando un borde personalizado y un estilo de sombra de cuadro.
He aquí cómo hacerlo.
Asegúrese de configurar la nueva publicación como se describe al principio de este artículo (Agregar título, Imagen destacada, Sin diseño de página de barra lateral, ocultar el título de la publicación predeterminada). Agrega una nueva sección con una fila de una columna a tu publicación. Luego agregue el módulo de título de la publicación a la fila.
En la configuración del título de la publicación, establezca la ubicación de la imagen destacada de la siguiente manera:
Ubicación de la imagen destacada: encima del título
Luego actualice agregue un degradado de fondo para agregar un pequeño elemento de diseño abstracto en la esquina inferior derecha del módulo.
Color de degradado de fondo a la izquierda: rgba (0,0,0,0.06)
Gradiente de fondo Color derecho: rgba (0,0,0,0)
Tipo de degradado: radial
Dirección radial: abajo a la derecha
Posición inicial: 10%
Posición final: 0%
Continúe actualizando el resto del diseño de la siguiente manera:
Fuente del título: Josefin Sans
Alineación del texto del título: derecha
Tamaño del texto del título: 36px
Altura de la línea de título: 1.7em (escritorio), 1.3em (tableta y teléfono inteligente)
Fuente Meta: Josefin Sans
Estilo de fuente Meta: TT
Alineación de metatexto: izquierda
Espaciado entre letras meta: 2px
Altura de la línea meta: 2em
Margen personalizado: -5vw superior
Relleno personalizado: 5vw superior, 5vw inferior, 5vw izquierda, 5vw derecha
Ancho del borde derecho: 4px
El margen de -5vw tira del módulo hacia arriba fuera de la fila para que el borde derecho quede encima del borde izquierdo que agregaremos a la fila.
Ahora agreguemos un elemento de diseño abstracto usando la sombra del cuadro:
Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: 112px
Posición vertical de la sombra del cuadro: 85px
Fuerza de propagación de la sombra de caja: -80px
Color de sombra: rgba (224,43,32,0.3)
Guardar ajustes.
Ahora abra la configuración de la fila para cambiar su tamaño y cree el lado izquierdo del diseño del marco usando un borde y una sombra de cuadro.
Ancho personalizado: 700px
Ancho del borde derecho: 4px
Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: 112px
Posición vertical de la sombra del cuadro: 85px
Fuerza de propagación de la sombra de caja: -80px
Color de sombra: rgba (224,43,32,0.3)
Ahora veamos el diseño final.
# 2 Texto superpuesto e imagen destacada
Cree una nueva sección con una fila de dos columnas. Luego agregue un módulo de imagen en la columna de la izquierda.
Esto servirá como nuestra imagen destacada usando contenido dinámico. Abra la configuración de la imagen y elimine la imagen simulada y haga clic en el icono de contenido dinámico en la parte superior derecha del cuadro de vista previa de la imagen. Luego, seleccione Imagen destacada de la lista para agregar la imagen destacada a la página.
Ahora agregue un módulo de título de publicación en la columna de la derecha. Abra la configuración y oculte la imagen destacada estableciendo la opción Mostrar imagen destacada en NO.
Luego agregue un degradado de fondo al módulo de título de la publicación.
Color de degradado de fondo a la izquierda: #ffffff
Gradiente de fondo Color derecho: rgba (255,255,255,0)
Esto se hará visible una vez que agreguemos un margen negativo para superponer la imagen.
Actualice el resto del diseño de la siguiente manera:
Fuente del título: Fira Sans Condensed
Peso de la fuente del título: ultraligero
Tamaño del texto del título: 80 px (escritorio), 70 px (tableta), 45 px (teléfono inteligente)
Fuente Meta: Fira Sans Condensed
Estilo de fuente Meta: TT
Alineación de metatexto: derecha
Color del meta texto: #cccccc
Espaciado entre letras meta: 2px
Margen personalizado: -20% restante (escritorio), 0% (tableta y teléfono inteligente)
Relleno personalizado: 5vw arriba, 5vw abajo, 30px a la izquierda
Ahora démosle una sombra de cuadro para crear una línea debajo del título.
Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: 80px
Posición vertical de la sombra del cuadro: 82px
Fuerza de propagación de la sombra de caja: -80px
Guarde la configuración y abra la configuración de la fila para ajustar el ancho de la canaleta.
Ancho de la canaleta: 1
Ecualizar alturas de columna: SÍ
Ahora mira el diseño final.
Diseño alternativo de imagen redondeada
Con solo unos pequeños ajustes, puede hacer que la imagen destacada sea circular y ajustar el mosaico de la publicación para que esté centrado verticalmente. Para hacer esto, abra la configuración de la imagen y actualice lo siguiente:
Esquinas redondeadas: 50%
Luego, abra la configuración de la fila y agregue el siguiente CSS personalizado en el elemento principal:
align-items: center;
Esto solo funciona si tiene Equalize Column Heights establecido en YES, lo que activa la propiedad flex permitiéndonos alinear los elementos verticalmente. 
Aquí está el diseño final.
# 3 Fondos de contenido únicos para legibilidad
El diseño de este título de publicación incorpora degradados de fondo para hacer que el título y el meta texto sean más legibles con una imagen de fondo destacada.
Así es como se hace.
Cree una nueva sección con una fila de una columna. Luego agregue el módulo de título de la publicación a la fila.
Luego actualice la configuración del módulo de título de la publicación para ocultar la imagen destacada.
Fuente del título: Abril Fatface
Color del texto del título: # 121212
Tamaño del texto del título: 75 px (escritorio), 50 px (tableta), 30 px (teléfono inteligente)
Espaciado de letras de título: 2px
Altura de la línea de título: 1.1em
Fuente Meta: Roboto Condensed
Color del meta texto: #ffffff
Tamaño del metatexto: 16px
Espaciado entre letras meta: 2px
Altura de la línea meta: 2em
Ancho: 60% (escritorio), 90% (tableta), 100% (teléfono inteligente)
Acolchado personalizado: 3vw a la izquierda
Ahora agreguemos una sombra de cuadro para que sirva de fondo al meta texto y lo haga legible.
Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: 0px
Posición vertical de la sombra del cuadro: -32px
Color de sombra de caja: # 121212
Ahora vamos a agregar nuestra imagen destacada al fondo de la sección usando contenido dinámico. Abra la configuración de la sección y haga clic en el icono de contenido dinámico en la parte superior derecha del cuadro de vista previa de la imagen de fondo. Luego, seleccione la imagen destacada de la lista para agregar la imagen destacada a la sección.
Ahora agreguemos nuestro elemento de fondo degradado para que el texto del título de la publicación sea más legible. Simplemente haga clic en la pestaña de degradado y actualice lo siguiente:
Color de degradado de fondo a la izquierda: rgba (255,255,255,0.76)
Gradiente de fondo Color derecho: rgba (255,255,255,0)
Tipo de degradado: radial
Dirección radial: arriba a la izquierda
Posición inicial: 40%
Posición final: 0%
Colocar degradado sobre la imagen de fondo: SÍ
Ahora veamos el diseño final.
# 4 efecto de apilamiento con imágenes destacadas duales
Este diseño incorpora algunas sombras de caja para dar el efecto de apilar los elementos que componen el módulo de título de la publicación y el fondo de la sección. También utiliza dos versiones de la imagen destacada (dinámicamente) para un elemento de diseño único.
He aquí cómo hacerlo.
Cree una nueva sección con una fila de una columna. Luego agregue el módulo de publicación a la fila y actualice la ubicación de la imagen destacada a Título / Imagen de fondo meta.
Luego actualice la configuración de diseño de la siguiente manera:
Color del texto: claro
Color de fondo del texto: rgba (1,59,104,0.79)
Orientación del texto: centro
Fuente del título: Roboto Condensed
Peso de la fuente del título: Ligero
Tamaño del texto del título 70 px (escritorio), 50 px (tableta), 30 px (teléfono inteligente)
Altura de la línea de título: 1.3em
Peso de la fuente meta: Ligero
Estilo de fuente Meta: TT
Color del meta texto: #cccccc
Espaciado entre letras meta: 1px
Relleno personalizado: 10vw superior, 0px inferior
Ahora agreguemos nuestra primera sombra de cuadro para crear nuestra primera capa de apilamiento.
Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: 0px
Posición vertical de la sombra del cuadro: -46px
Color de sombra: #ffffff
Puede ver que esto también sirve como una forma creativa de dividir el título y el meta texto.
Ahora guarde su configuración y abra la sección de configuración. Agrega la imagen destacada a tu fondo como contenido dinámico. Luego agregue un degradado de la siguiente manera:
Color de degradado de fondo a la izquierda: rgba (1,59,104,0.79)
Gradiente de fondo Color derecho: rgba (1,59,104,0.79)
Colocar degradado sobre la imagen de fondo: SÍ
Este diseño de fondo de imagen destacada adicional es una forma única de darle al título de su publicación un diseño único que cambiará dinámicamente con cada nueva imagen destacada.
A continuación, agregue un poco de relleno personalizado.
Relleno personalizado (escritorio): 10vw superior, 0px inferior
Relleno personalizado (teléfono inteligente): 0vw arriba, 0px abajo
Luego agregue otra sombra de cuadro para continuar con el efecto de apilamiento.
Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: 0px
Posición vertical de la sombra del cuadro: -92px
Color de sombra: #ffffff
Para terminar el diseño, abra la configuración de la fila y actualice lo siguiente:
Hacer esta fila de ancho completo: SÍ
Ancho de la canaleta: 1
Relleno personalizado (escritorio): 0px arriba, 0px abajo, 6% a la izquierda, 6% a la derecha
Relleno personalizado (teléfono inteligente: 0 px en la parte superior, 0 en la parte inferior, 0% a la izquierda, 0% a la derecha
Ahora mira el diseño final.
Pensamientos finales
Con estos diseños de títulos de publicaciones, debería tener una buena idea de lo que es posible con el módulo de títulos de publicaciones de Divi y Divi Builder. Con solo unos pocos ajustes de diseño, combinados con el poder del contenido dinámico para las imágenes destacadas, puede crear innumerables estilos de título de publicación únicos para las publicaciones de su blog. En todo caso, espero que esto lo inspire a crear algunos títulos de publicaciones impresionantes por su cuenta.
Para obtener más inspiración de diseño relacionado, consulte nuestra publicación de blog sobre las hermosas y atractivas secciones dinámicas de las publicaciones de blog y el secreto para diseñar diseños de cuadrícula rotos en Divi.
Espero tener noticias tuyas en los comentarios.
¡Salud!