Tutorial Divi: Colocar el texto sobre la imagen del módulo de blog

Darle un giro diferente a tu módulo de blog ubicando el texto sobre la imagen. ¡En solo 2 pasos y un poco de personalización lo lograrás!

Por Jefferson M.

Oct 13, 2020

Si quieres darle un giro diferente al título y la imagen de tu blog, una distribución que llama la atención es ubicar el texto sobre la imagen del módulo del blog. Este es otro tutorial de nuestra serie de contenidos de Blog Hub Design donde nos centramos en el mejoramiento y personalización del blog en Divi.

Este procedimiento requiere agregar un poco de código y luego personalizar los elementos pero como siempre, acá abajo déjamos la explicación completa:

Lo que queremos lograr es algo como esto:

Colocar el texto sobre la imagen destacada del módulo de blog

Comencemos con el tutorial: Combina los elementos

Por defecto, el módulo de blog está dividido en distintas partes: título, meta y contenido. Para comenzar, debes convertir esas partes en un solo elemento y lo lograrás añadiendo código.

Añade el siguiente jQuery a la caja <head> de tu blog. Para esto debes entrar en la sección de Integraciones en las Opciones de tema de Divi. Si estás usando un child theme, recuerda eliminar las tags <script> del principio y el final.

<script>
	(function ($) {
		$(document).ready(function () {
			$(document).bind('ready ajaxComplete', function () {
				$(".pa-blog .et_pb_post").each(function () {
					$(this).find(".entry-title, .post-meta, .post-content").wrapAll('<div class="pa-blog-text"></div>');
				});
			});
		});
	})(jQuery); 
</script>

Luego de guardar los cambios, quedará el texto sobre la imagen destacada del blog, esta vez como un elemento combinado.

Como siguiente paso, debemos agregar una capa u overlay sobre la imagen para que el texto resalte. Si la añadimos en el módulo de texto, se vería por encima del mismo.

Añade la clase  “pa-blog” en la caja de Clase CSS del módulo de blog que encontrarás entrando a la pestaña Avanzado y luego CSS ID’s y Clases.

Si estás usando un child theme, añade el siguiente snippet en el archivo style.css. De no ser así, añádelo a la caja de CSS personalizado de las Opciones de la página:

/*Mover titulo, meta y resumen sobre la imagen destacada del blog*/

.pa-blog-text {
	position: absolute;
	top: 53%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	padding: 30px;
	z-index: 1;
}


/*Mantener los elementos movidos agrupados*/

.et_pb_blog_grid article {
	position: relative;
}


/*Remover el espacio del blog post*/

.et_pb_blog_grid .et_pb_post {
	padding: 0px;
}


/*Quitar el margen negativo de las imagenes*/

.et_pb_image_container {
	margin: 0;
}


/*Quitar el margen inferior del marco de la imagen*/

.et_pb_post .entry-featured-image-url {
	margin: 0;
}



.et_pb_blog_grid .entry-featured-image-url::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

Ajusta los detalles del texto sobre la imagen

Elimina el borde

Divi añade por defecto un borde gris de 1px de grosor, debes removerlo hasta que sea casi imperceptible.

Texto del título

Como el overlay se agregó para que fuera más fácil ver el texto sobre la imagen, ahora debes cambiar a un color claro el color del texto.

Metatexto

Si estás usando algún metatexto como el nombre del autor, categorías, fecha, etc. también debes configurarlo con un color claro.

Texto del cuerpo o párrafo

Si tienes activado el Excerpt, debes personalizar el color del texto sobre la imagen para que sea más claro y por ende visible.

Botón de Leer más

Como ves, colocar el texto sobre la imagen del módulo de blog no es nada difícil. Si estás usando el botón de Leer más y es visible el texto sobre la imagen, recuerda cambiarle el color o añadir un icono que concuerde con los elementos anteriormente mencionados.

Recuerda que si quieres imágenes excelentes para la destacada de tu blog, Unsplash es una excelente opción y en UXDivi te contamos cómo usar el plugin para WordPress. ¡Nos leemos en la próxima!

Tutoriales relacionados:

¿Te ha ayudado este contenido? ¡Dale 5 estrellitas!

Tutorial Divi: Colocar el texto sobre la imagen del módulo de blog Darle un giro diferente a tu módulo de blog ubicando el texto sobre la imagen. ¡En solo 2 pasos y un poco de personalización lo lograrás!
5 1 5 1
0 / 5 Rate: 5 Votos: 1

Tu voto:

¿Quieres aprender a usar Divi de manera profesional?

Conoce nuestro contenido premium y comienza hoy mismo a llevar tu sitio web o el de tus clientes a otro nivel

¿Te gustó este contenido?

Conoce nuestro contenido premium y aprende a crear sitios web geniales, modernos y potentes.

¿Te ha ayudado este contenido? ¡Dale 5 estrellitas!

0 / 5 Rate: 5 Votos: 1

Tu voto:

Post relacionados:

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Shares