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.
Tabla de contenidos
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.
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.
Buenos días Javier,
Recientemente arranque un proyecto personal realizado con Divi. Me gustaría saber como puedo utilizar el moudlo de recomendación para que pueda ser mencionado en twitter, como lo haces tú en este ejemplo.
Gracias y un saludo,
Dídac
No entiendo a qué te refieres con que sea mencionado en Twitter.
Hola Javier. Se podría hacer tambien sobre el modulo imagen?
Hola Ramón. Seguramente. Es cuestión de localizar la clase de cada elemento con Firebug y probar a ver cómo queda. Saludos!