d2-thumb

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.

Efecto Sombra Modulo Recomendacion Divi 02

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. AfiliadosDivi Guardar Guardar

Guardar

About these ads

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

CERRAR

Pin It on Pinterest

Share This

Compártelo

¡Comparte este artículo con tus amigos!