Efecto sombra al módulo de Recomendación de Divi

Vamos a añadir un efecto sombre al módulo de Recomendación de Divi de la plantilla WordPress de Elegant Themes de manera que cuando pasemos el ratón sobre el módulo lo resaltemos para que destaque sobre el resto. Añadiremos un efecto sombra para resaltarlo sobre el resto de módulos que tengamos a su alrededor y conseguir así efecto visual más agradable y amigable para el usuario.

Configuración del Módulo Recomendación

Añadir los siguientes estilos en la pestaña CSS Personalizado:

• Clase CSS: productos_sobre
• Descripción de opinión: background-color: rgba(255, 255, 255, 0.5);
• Autor de opinión: display: none !important;
• Metadatos de opinión: display: none !important;

Añadir estilos CSS al tema hijo

Añadir a la hoja de estilos de Child Divi Theme el siguiente código CSS:

/* Sección de productos */
.et_divi_builder #et_builder_outer_content .productos_sobre .et_pb_testimonial_description:hover {
/* Al pasar el ratón por encima resalto el cuadro de texto */
background-color: rgba(255, 255, 255, 0.85);
/* efecto sombra */
box-shadow: 0 0 15px 0;
}
.et_divi_builder #et_builder_outer_content .et_pb_testimonial.et_pb_testimonial_no_bg:hover {
/* efecto sombra */
box-shadow: 0 0 15px 0;
}

Resultado obtenido

Y este es el resultado después de aplicar todos los estilos CSS a nuestro módulo de recomendación Divi,

• sin estar el ratón sobre el artículo
• con el ratón sobre el artículo
• y con el ratón sobre el título del artículo.

Guardar