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

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 Tutoriales Free donde nos centramos en el mejoramiento y personalización del blog en Divi.

Tiempo de lectura estimado: 3 minutos

Índice

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:

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:

Artículos relacionados

Comentarios

Haz clic para unirte a la comunidad de diseñadores que están revolucionando el mercado con sus proyectos web 👇

Recuerda: Esta oportunidad es tu primera y más importante inversión hacia el éxito que siempre has soñado. ¡Actúa ahora y empieza a construir el negocio que deseas, mientras creas una vida llena de libertad, estabilidad y propósito!