En un tutorial anterior, nosotros introdujiste a Divi. Para quien no lo sepa, Divi es un tema de WordPress premium diseñado por el equipo Elegante Temas que ofrece varios servicios en WordPress y complementos y temas de diseño.

Divi es un tema receptivo y este último es compatible con varios otros complementos, entre otros que tenemos. WooCommerce. Hoy te vamos a mostrar cómo darle una animación diferente a tus productos WooCommerce.

A veces el estilo de WooCommerce Puede resultar un poco inadecuado, especialmente si su estilo CSS es un poco diferente. Este tutorial, que será un poco técnico (un poco de CSS y nada más), le permitirá remediarlo.

Otros tutoriales sobre el tema Divi

• 5 sitios web para su uso restaurante temático Divi
• Cómo añadir texto en un producto Divi WooCommerce
• Cómo cambiar el color del menú entre páginas en Divi
• Características que no conoce sobre Divi
• Cómo crear un control deslizante en Divi
• Cómo editar un rol de usuario en Divi

Vamos a empezar.

Modificando un icono para texto sobre el mouse

De forma predeterminada, cuando usa WooCommerce con Divi y pasa el cursor sobre un producto, ve un pequeño icono '+' que es una fuente (make-icono) propuesto por Divi y que es el siguiente:

Es realmente fácil cambiar eso a un ícono diferente en la configuración, pero si desea agregar algo de texto, ¿es otra cosa? Le mostraré cómo lograr esto con los fragmentos de CSS de hoy y también incluiré un código opcional para agregar a su sitio.

Esto es lo que habremos completado una vez:

¿Por qué utilizar texto en lugar de un icono de todos modos?

Se me ocurren algunas razones que pueden obligarlo a hacer esto:

Para definir darle un aspecto único a su tienda: Cualquier cosa que pueda hacer para distinguir su sitio Divi / WooCommerce de otro es siempre algo bueno.

El uso de una palabra como "Ver" o "Comprar" puede generar más conversiones.: Todos deben hacer lo mejor para su sitio web, y usted puede aprovechar las pruebas A / B integradas en Divi para ayudar con eso.

Fuente de inspiración

Recientemente navegué por un sitio que tenía texto sobre el producto. Por supuesto, he visto otros sitios de comercio electrónico que tienen palabras en lugar de íconos sobre el producto, por lo que este no era un concepto nuevo. Nunca había tenido que hacer esto en un Tema divi, y cuando vi esto, me propuse un desafío y me di cuenta de que es realmente fácil de implementar. Con muy poco código requerido, está seguro de que no afectará el rendimiento de su blog.

Implementando el mouse sobre el texto

Paso 1: la superposición de color

Primero cambiaremos el color de la superposición de desplazamiento al pasar el ratón. Esto es extremadamente fácil de hacer en Divi. En el módulo de tu tienda, ve al " parámetros avanzados de diseño avanzado Y selecciona tu color.

Paso 2: Agregar CSS

El siguiente código CSS en " Opciones de tema> CSS personalizado O en la hoja de estilo del tema de su hijo.

.woocommerce .et_overlay: before {left: 0; margen izquierdo: 0; contenido: 'ver'; / *** Su texto aquí *** / font-family: 'Fuente sin Pro', Arial! / *** Elija su fuente *** / text-transform: mayúscula; tamaño de fuente: 24px; color: #fff; / *** Establecer el color del texto *** / font-weight: bold; alinear texto: centro; ancho: 100%; relleno: 5px 0; }

Si desea que sus productos sean bastante redondos, puede agregar este código opcional:

.woocommerce ul.products li.product un img, .et_overlay {border-radius: 50%; }

Es todo !

Ahora puede visitar su tienda y ver cómo se tienen en cuenta sus cambios.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" extended "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DESCARGUE EL TEMA DIVI [/ vcex_button] [/ width_column] [»vc_column] »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" blank "layout =" extended "align =" center " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DESCARGAR PLANTILLAS DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Otros tutoriales de Divi

• 5 sitios web para su uso restaurante temático Divi
• Cómo agregar texto en un producto Divi WooCommerce
• Cómo cambiar el color del menú entre páginas Divi
• Cómo personalizar las cuadrículas de un blog con Divi
• Cómo utilizar la función de editor Divi en WordPress
• Cómo crear un control deslizante Divi a pantalla completa
• Cómo cambiar el color de los menús entre páginas Divi
• Características que probablemente no conozcas sobre Divi
• Cómo usar Divi Builder en WordPress
• Cómo usar el módulo de desplazamiento de video Divi
• Cómo usar el módulo Divi Builder Flip
• Cómo agregar un módulo testimonial en Divi Builder
• Cómo usar el módulo de texto Divi
• Cómo crear un control deslizante en Divi
• Cómo editar un rol de usuario Divi
• Cómo usar el módulo de Divi Social Media
• Cómo usar el módulo de tienda en el tema WordPress Divi
• Cómo usar el módulo de la barra lateral Divi
• Cómo usar el Módulo Divi Price Table
• Cómo usar el módulo de título de las publicaciones de Divi
• Cómo agregar un módulo de video de Divi
• Cómo usar el módulo de navegación del artículo
• Cómo usar el módulo de búsqueda Divi
• Cómo usar el módulo Divi wallet
• Cómo usar el módulo de persona en Divi Builder
• Cómo usar el módulo de billetera con filtro Divi
• Cómo usar el módulo deslizante de ancho completo
• Cómo usar el Módulo de imagen Divi Builder
• Cómo utilizar el módulo de navegación de ancho completo de Divi Builder
• Cómo usar el módulo de la galería de imágenes
• Cómo utilizar el módulo de tarjeta de ancho completo de Divi Builder
• Cómo utilizar el módulo de cartera de ancho completo de Divi
• Cómo usar el módulo de encabezado de ancho completo Divi
• Cómo usar el módulo Divi Counter
• Cómo usar el control deslizante de artículos en Divi Builder
• Cómo usar el módulo Divi Email Optin