5 maneras de personalizar el módulo título de publicación de Divi paso a paso

por | 14 Nov, 2017 | Blog, css, Diseño Divi, Funcionalidades Divi | 10 comentarios

La inspiración

Comenzar nuestros post con un diseño limpio y atractivo es una buena forma de enganchar a nuestros visitantes. Y en eso va a ayudar mucho el módulo título de publicación de Divi.

Aunque, evidentemente, debe ir acompañado de un contenido de calidad, la primera piedra será un diseño de nuestro título que no desmerezca de los contenidos que ofrecemos a nuestros lectores.

Este tutorial está inspirado en un post del blog de Elegant Themes, los creadores de Divi. Puedes acceder a su contenido original (en inglés) desde AQUÍ.

Nos hemos permitido la licencia de interpretarlo y hacer algunas modificaciones que pensamos pueden enriquecer los ejemplos propuestos.

El módulo título de publicación de Divi predeterminado

Seguidamente, antes de entrar en materia vamos a echar un vistazo al módulo título de publicación de Divi predeterminado. En la imagen inferior puedes ver el aspecto de un módulo de este tipo sin ninguna modificación.

módulo título de publicación de Divi predeterminado

módulo título de publicación de Divi predeterminado

Obviamente, además de ajustar los estilos de los metadatos, del título la imagen destacada podemos hacer muchas cosas más.

Antes de empezar con los 5 tutoriales tienes que tener en cuenta algunas premisas.

1.- El título que mostrará el módulo título de publicación de Divi será el que pongas a tu entrada. Si quieres cambiarlo, debes hacerlo en el título de la página o entrada, no en los ajustes del módulo.

2.- La imagen que usa el módulo viene determinada por la imagen destacada. La que hayas añadido desde tu escritorio wordpress, en la zona inferior derecha de tu pantalla. Ocultar-titulo-de-publicacion

3.- Fíjate en el panel disponible en la zona superior derecha de tu escritorio WordPress. Son los Ajustes de publicación de Divi, como puedes ver en la imagen de la izquierda. Pues bién; no debe estar visible el título de publicación. De lo contrario, la imagen destacada y el título que hayas puesto a tu entrada aparecerá repetido cuando visualices la entrada.

De manera que haz clic en el desplegable junto al texto Titulo de publicación (remarcado en rojo en la captura que tienes a tu izquierda) y selecciona la opción Ocultar. Así, sólo verás el título que diseñemos y configuremos desde los ajustes del módulo.

4.- En algunos casos debes tener en cuenta la visualización de tus contenidos en otros dispositivos. Esto implica que dependiendo de la longitud de tu título y dispositivo, deberás ajustar el tamaño y/o las opciones de relleno y CSS.

Qué vamos a configurar

Para todos los ejemplos ajustaremos (1) alguna de las opciones que tenemos disponibles en las pestañas dentro de la configuración del módulo. Contenido (2), Diseño (3) o Avanzado (4), esta última pestaña la usaremos cuando debamos incluir algo de código CSS. configuracion-modulo-titulo-publicacion

Si quieres usar la misma imagen que yo, puedes descargártela de este enlace en PIXABAY. Dicho esto, vamos a la faena.

1. Título sobre imagen destacada de fondo

Así es como va a quedar una vez hayamos configurado el módulo. 1-ejemplo-titulo-sobre-fondo Observarás que nosotros hemos usado unos determinados ajustes de tipografías, sombra, etc. Por supuesto que puedes modificar a tu gusto estas opciones para conseguir el aspecto que a tí te parezca mejor.

Ajustes del módulo

En primer lugar, abrimos los ajustes del módulo pulsando sobre el iconito de las tres rayas grises (marcado como 1 en la imagen de más arriba) y empezamos con la pestaña de contenido.

Pestaña Contenido

A continuación, en esta pestaña activamos las opciones mostrar título,metadatos, Autor, fecha (J M Y) e imagen destacada y desactivamos la visibilidad para los comentarios y categorías. Hemos cambiado el formato de fecha al español (día/mes/año), pero puedes dejarlo como está por defecto si prefieres el sajón. Aquí tienes una captura:

Pestaña Diseño

Dentro de esta zona tenemos muchas opciones para configurar. Texto, Título de texto, metadatos, animación, sombras de texto o de módulo, separación, etc. Para esta práctica sólo vamos a configurar el texto, título de texto, metadatos, borde y sombra de módulo. En el primer panel, Texto, elegimos color oscuro, activamos color de fondo de texto y ponemos un blanco al 80% de opacidad (rgba(255,255,255,0.8)) y en orientación del texto: Centrado. En el panel Título de texto ajustamos: Título Fuente: Asap Condensed, Peso Regular, Estilo (la tercera opción), tamaño 36 px y color #aa4c00. Aquí, una imagen.

titulo-publicacion-Divi-ajustes-texto-ejercicio1

A continuación vamos a los ajustes de Metadatos Texto y cambiamos la fuente a Asap Condensed también, bold, tamaño 14 px y listo. Ahora vamos a poner un marco blanco al módulo, De manera que, en Borde, lo activamos, le damos un grosor de 12px y estilo sólido. Por último en box Shadow, activamos la primera opción. Creará una sombra suave alrededor del módulo. Y ya tenemos el primer título de publicación terminado.

titulo-publicacion-Divi-ajustes-sombra-ejercicio1

 

¿Quieres verlo mejor en un video tutorial? Aquí lo tienes.

 

2. Imagen destacada encima del título

Como ya has visto antes, Divi posiciona primero el título y debajo la imagen destacada. En esta segunda propuesta, vamos a invertir el orden. Colocaremos el título debajo de la imagen. Además le añadiremos un color de fondo y ajustaremos un poquito los metadatos con CSS. Así lucirá al final. 2-ejemplo-titulo-bajo-imagen

Ajustes del módulo

Abrimos los ajustes del módulo.

Pestaña Contenido

En la pestaña contenido la configuración será la misma que la elegida en el primer ejemplo excepto la ubicación de la imagen destacada que seleccionamos sobre el título.

Pestaña Diseño

Aquí los ajustes son:

  • Texto: en el panel de texto general, color de texto, claro. Activamos usar color de fondo de texto e introducimos el color #ec4127. Es un naranja como el de la taza, tú inserta el que quieras según tu imagen. En orientación, marca centrado.
  • Título de texto: Fuente, poppins, bold. Tamaño: 28 px. Título altura de línea: 1.5 em.

Dejamos el resto de opciones por defecto y cambiamos a la pestaña Avanzado.

Pestaña Avanzado

En esta pestaña sólo vamos a insertar una línea de código CSS. El objetivo es reducir la cantidad de espacio entre el contenido meta (autor, fecha…) y el cuadro naranja. Por lo tanto pulsamos en CSS personalizado y en el campo Metadatos escribimos (o copiamos y pegamos) lo siguiente en CSS Personalizado >> Metadatos (imagen inferior)

padding-bottom: 0px;

titulo-publicacion-Divi-ajustes-css-ejercicio2 Y ya tenemos nuestra segunda propuesta acabada. Mira el vídeo para que no se te escape nada.

 

 

Vamos a por la siguiente

3.- Título e imagen destacada dentro de un recuadro

Y ahora vamos a diseñar otro módulo título de publicación de Divi. En esta tercera propuesta, tanto la imagen destacada como los textos del título van a estar ubicados dentro de un rectángulo de color. Necesitaremos un poco de código de CSS. Verás que no es nada complicado. Al final este será el resultado. 3-ejemplo-titulo-imagen-dentro-rectangulo

Ajustes del módulo

Abrimos los ajustes del módulo.

Pestaña Contenido

En la pestaña contenido, en el panel elementos, la configuración será la misma que la de la anterior propuesta excepto la ubicación de la imagen destacada que pondremos bajo el título. En fondo, ponemos el mismo color que vamos a usar de fondo de texto un poco más adelante. el color es #597786.

Pestaña Diseño

Estos son los ajustes que yo he utilizado:

  • Texto: en el panel de texto general, color de textoclaro. Activamos usar color de fondo de texto e introducimos el color #597786. Es un azul de la parte del portatil, tú inserta uno que se corresponda con tu imagen. En orientación, marca centrado.
  • Título de texto: Fuente, Cinzel Decorative, bold. Tamaño: 28 px. Título altura de línea: 1.4 em.

Dejamos el resto de opciones por defecto y cambiamos a la pestaña Avanzado.

Pestaña Avanzado

En esta pestaña vamos a insertar código CSS que va a afectar a los metadatos y a la imagen. Te recomendamos que apliques este CSS desde la vista USAR CONSTRUCTOR VISUAL para ver los cambios en tiempo real. Esto te va a permitir comprender rápidamente su aplicación. En el campo de metadatos, dentro de CSS personalizado introduce:

border-top: 1px solid #fff2e1;
 padding-top: 5px;
 padding-bottom: 0px;

Esto agregará una línea superior sobre los metadatos (autor, fecha…) y ajustará el relleno para que se vea bien.

Y Finalmente, copia el siguiente CSS y pégalo en el campo de la imagen principal.

margin-top: -20px!important;
 padding: 20px;

Por supuesto, la explicación. Estas dos líneas de código añaden un espacio extra entre el texto y la imagen y agregará algo de relleno alrededor de la imagen para que el color de fondo general se mezcle con el color de fondo del título.

titulo-publicacion-Divi-ajustes-css-ejercicio3

No te pierdas el video-tutorial.

 

Y ahora, a por la cuarta propuesta.

4.- Título abajo sobresaliendo de la imagen destacada

Esta original propuesta de diseño de módulo título de publicación de Divi solo va a requerir un par de líneas de código. Así se verá cuando acabemos.

4-ejemplo-titulo-imagen-sobresale

Ajustes del módulo

Abrimos los ajustes del módulo título de publicación de Divi.

Pestaña Contenido

En la pestaña contenido, en el panel elementos, seguimos con los mismos ajustes de las propuestas anteriores. Activamos todo excepto categorías y comentarios. La ubicación de la imagen destacada la ponemos sobre el título.

Pestaña Diseño

Aquí están los ajustes:

  • Texto: en el panel de texto general, color de textoclaro. Activamos usar color de fondo de texto e introducimos el color #ff5327. Es un muestra del naranja del plato de café. En orientación, marca centrado.
  • Título de texto: Fuente, Barrio, Regular. Tamaño: 32 px. Título altura de línea: 1.4 em.

A continuación vamos a la pestaña Avanzado.

Pestaña Avanzado

En esta pestaña vamos a insertar código CSS que va a afectar sólo a la imagen. Es conveniente que apliques este CSS desde la vista USAR CONSTRUCTOR VISUAL para ver los cambios en tiempo real.  En el campo de imagen principal, dentro de CSS personalizado pega este código:

margin-bottom: -15px;
padding: 0% 3%!important;

Con estas dos líneas ajustamos la imagen con el título y damos un poco de espacio alrededor de la imagen para hacer el efecto de que el título sobresale de la imagen.

Y aquí el videotutorial.  

5.- Título sobre fondo de color superpuesto a la imagen

Esta última propuesta de diseño de módulo título de publicación de Divi mostrará el título sobre un fondo de color semitransparente aplicado a la imagen. Crearemos también un marco fino que realce la composición. Así se verá. 5-ejemplo-titulo-superposicion-imagen

Ajustes del módulo

Abrimos los ajustes del módulo título de publicación de Divi.

Pestaña Contenido

En la pestaña contenido, en el panel elementos, desactivamos comentarios y categorías (como en todos) y en esta ocasión también desactivamos mostrar imagen destacada. ¿Por qué? Pues por que la imagen la vamos a referenciar mediante css en los ajustes de fila, que es donde estará el peso de este diseño.

Pestaña Diseño

Aquí solo ponemos el color de texto en claro y la orientación centrada. Por supuesto, puedes configurar como mejor te parezca el resto de opciones. Aunque nosotros lo dejamos así.

Ajustes de fila

 

ajustes-filaPestaña Diseño

Como decíamos antes, el mayor peso de esta propuesta está en la fila. Aquí ajustaremos el relleno y aplicaremos el código CSS. De manera que pulsamos en ajustes de fila para acceder a la configuración y accedemos  a la pestaña Diseño. Entonces vamos a los ajustes de separación >> Relleno personalizado y añadimos los siguientes valores: Superior 100px, Derecha 75px, Base 100px e Izquierda 75px. Esto crea el espacio que necesitamos. ajustes-fila-titulo-publicacion

Pestaña Avanzado

Y ahora, el código CSS. Ya sabes en la pestaña avanzado >> CSS Personalizado >>Elemento principal, y ahí pegamos el código que te proporcionamos. Va por partes con su correspondiente explicación. Estas líneas son para asegurarnos de que la imagen de fondo se ajuste en el marco

background-repeat: no-repeat !important;
 background-position: top center !important;
 -webkit-background-size: cover !important;
 -moz-background-size: cover !important;
 background-size: cover !important;

Con este CSS crea la superposición de color (degradado) en la imagen de fondo. Fíjate en la URL de la imagen: tienes que poner la URL de tu imagen destacada ahí, donde he puesto «http:// la direccion de tu imagen destacada». (la obtienes desde la biblioteca de medios)

background-image:
 linear-gradient(rgba(39, 63, 107, 0.7), rgba(39, 63, 107, 0.7)),
 url('http://la direccion de tu imagen destacadada');

Y finalmente, este CSS es para la línea blanca que bordea el título y la imagen de fondo.

 outline: solid 1px #fff;
 outline-offset: -20px;

css-titulo-superposicion-color

 

Y el video-tutorial