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

Si te ha parecido interesante este artículo y crees que Divi puede ayudarte con tu proyecto Web y estás pensando en comprarlo, te pido que lo hagas pinchando en la siguiente imagen. Estoy afiliado a ElegantThemes y me llevaría una pequeña comisión si llegas a comprarlo. De esta manera me ayudas a mantener el blog y a escribir más artículos como este.

Si además, te haces suscriptor de ElegantThemes, podrás comprarlo con hasta un 20% de descuento en algunos casos.

Guardar