Cómo añadir un efecto hover en divi builder

Wordpress

Hay muchas maneras de hacer que una página web en su sitio web se vea más atractiva. Una de ellas es que puedes añadir un efecto hover a un determinado elemento de la página. Si tienes un sitio web basado en WordPress construido con Divi Builder , puedes añadir sin esfuerzo un efecto hover a un elemento de tu página. Por cierto, ¿qué es Divi Builder?

En caso de que no hayas conocido Divi Builder. Es un plugin constructor de páginas para WordPress al igual que Elementor (Elementor es el constructor de páginas más popular de WordPress). También viene con un editor visual para facilitar la creación de la página. Divi Builder viene con algunas funciones incorporadas para añadir efectos de animación, incluyendo los que puedes añadir cuando un visitante pasa por encima de un determinado elemento de tu página. Echa un vistazo al screencast de abajo.

Los efectos hover de arriba se crean con Divi Builder. Divi Builder en sí hace uso de la transformación de CSS para la función de efecto hover. Así que técnicamente, cuando se agrega un efecto hover a un determinado elemento en Divi Builder, está implementando la transformación CSS a su página.

En Divi Builder, el elemento de diseño se divide en tres tipos: sección, fila y módulo. Usted puede agregar un efecto hover a esos tres tipos de elementos. En este ejemplo, te mostraremos cómo añadir un hover a un módulo de imagen (como puedes ver en el screencast de arriba).

Cómo añadir un efecto hover en Divi Builder

Primero, necesitas preparar una sección así como una fila en el área del lienzo de Divi Builder. Para ello, haz clic en el botón azul más para añadir una nueva sección (puedes añadir una sección normal para este ejemplo). Inserta una fila y selecciona la estructura de columnas según tu necesidad. En este ejemplo, seleccionamos la estructura de tres columnas.

Una vez añadida la fila, haz clic en el icono gris del signo más en una de las columnas para añadir un módulo. Como queremos añadir el efecto hover a la imagen, seleccionamos Image para añadir el módulo Image.

El panel de configuración del módulo Image aparecerá justo después de añadir el módulo Image. Para añadir una imagen, puede hacer clic en el soporte de la imagen en el bloque Imagen bajo la pestaña Contenido .

Una vez añadida la imagen, vaya a la pestaña Diseño y abra el bloque Transformación . En el bloque Transformación , haga clic en el icono del cursor y, a continuación, en la pestaña hover (que también se representa con un icono de cursor).

Seleccione un tipo de transformación que desee añadir haciendo clic en una de las pestañas disponibles y utilice el ratón para establecer el valor. O, también puede establecer el valor de la transformación manualmente escribiendo su valor preferido.

Eso es todo. Usted puede aplicar los cambios haciendo clic en el icono de la lista de verificación verde en la esquina inferior derecha del panel de configuración.

Con el fin de hacer su página más atractiva, también puede mostrar una imagen diferente en el hover. Puedes este artículo para saber más.

Puedes seguir el mismo camino para añadir un efecto hover a una sección y fila. Primero, abre el panel de configuración y luego ve a la pestaña Diseño . En la pestaña Diseño , puedes abrir el bloque Transformación . En este bloque puedes configurar el efecto hover como acabamos de ver más arriba.

YouTube video: Cómo añadir un efecto Hover en Divi Builder


Rate article