Cómo crear superposiciones y efectos de desplazamiento (hover) de flipbox en WordPress

¿Quieres añadir superposiciones de flipbox y efectos de desplazamiento de imágenes a tu sitio de WordPress?

Incluso si estás utilizando un tema de WordPress de alta calidad, es posible que te sientas limitado por las opciones de personalización. En este caso, puedes usar flipboxes y efectos de desplazamiento de imágenes para añadir efectos animados llamativos a tu sitio.

En este artículo, te mostraremos cómo añadir superposiciones de flip box y efectos de desplazamiento de imágenes a tu sitio de WordPress.

¿Qué es un Flipbox?

Un flipbox es una caja que se voltea cuando pasas el ratón sobre ella. Puedes añadir este efecto de desplazamiento a contenido como imágenes y cuadros de texto.

Similar a otro contenido animado como GIFs y sliders responsivos, el efecto flipbox puede hacerlo más interactivo y atractivo. Por ejemplo, podrías mostrar la foto y el nombre de un autor, y luego usar una animación de flipbox para revelar su biografía cuando un lector pase el ratón sobre ella.

Si eres un freelancer de WordPress, podrías mostrar los logotipos de tus clientes y luego usar una animación de flip para revelar un enlace a cada proyecto.

Si bien estos efectos animados pueden mejorar la experiencia de usuario de tu sitio web, es importante no exagerar. Una gran cantidad de animaciones puede resultar abrumadora y confusa, e incluso afectar el rendimiento de tu sitio web.

Dicho esto, veamos cómo puedes agregar superposiciones de flipbox y efectos de desplazamiento de imágenes a tu sitio web de WordPress.

Cómo crear superposiciones de Flipbox y efectos de desplazamiento en WordPress

Hay muchas maneras diferentes de agregar animaciones a WordPress, incluido el uso del constructor de páginas SeedProd o la escritura de código personalizado.

Sin embargo, la mejor manera de crear efectos de flipbox y desplazamiento es utilizando el plugin Flipbox – Awesomes Flip Boxes Image Overlay. Este plugin gratuito viene con varios estilos diferentes de flipbox que incluyen una combinación de imágenes, texto y botones de llamada a la acción. 

Crear un nuevo Flipbox

Lo primero que deberás hacer es instalar y activar el plugin Flipbox – Awesomes Flip Boxes Image Overlay. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté instalado y activado, puedes crear tu primer flipbox yendo a Flip Box » Crear Nuevo.

Esto muestra todas las diferentes plantillas que puedes usar.

Si no deseas utilizar ninguno de estos diseños, haz clic en 'Importar plantillas'.

Si ves una plantilla que quieres usar, haz clic en ‘Importar’ para agregarla a tu blog de WordPress o sitio web.

Después de elegir un diseño, necesitas hacer clic en su botón ‘Crear estilo’.

En la ventana emergente que aparece, escribe un nombre para el diseño del flipbox. Esto es solo para tu referencia, así que puedes usar lo que quieras.

También puedes elegir qué diseño usar haciendo clic en el 1.º, 2.º o 3.º.

Hecho eso, haz clic en ‘Guardar’.

Agrega contenido a tu Flipbox

Puedes cambiar la apariencia de la flipbox usando las pestañas General, Frontal y Trasera.

Puedes cambiar las fuentes, el relleno y los márgenes. La mayoría de estas configuraciones se explican por sí solas, así que vale la pena revisarlas para ver qué efectos diferentes puedes crear.

Cuando estés satisfecho con la apariencia de la caja, es hora de agregar contenido. Simplemente desplázate hasta la vista previa de la flipbox en la parte inferior de la pantalla y coloca el cursor del mouse sobre ella.

Cuando aparezca, haz clic en el botón ‘Editar’.

Para cambiar el título que aparece en la parte frontal de la flipbox, puedes escribirlo en el campo ‘Título frontal’.

Después de eso, puedes cambiar el ícono frontal haciendo clic en el campo ‘Ícono de fuente’ y luego eligiendo una nueva imagen del cuadro emergente que aparece.

A continuación, puedes agregar una imagen al frente del flipbox. Simplemente haz clic en ‘Subir imagen’ y luego elige un archivo de la biblioteca de medios o sube una nueva imagen desde tu computadora.

Si aún no tienes una imagen que quieras usar, puedes crear una usando software de diseño web como Canva.

Cuando estés satisfecho con el frente del flipbox, es hora de diseñar la parte trasera. Para empezar, escribe el contenido que deseas mostrar en el cuadro ‘Información del backend’.

A menudo, querrás usar una llamada a la acción para enviar a los visitantes a una página relacionada, como la lista de un producto popular, información de precios o algún otro contenido.

Para cambiar el texto que aparece en el botón de llamada a la acción, simplemente escribe en ‘Texto del botón de backend’. Luego puedes agregar la URL de destino al campo ‘Enlace’.

Finalmente, haz clic en ‘Subir ahora’ para cambiar la imagen de fondo.

Cuando estés satisfecho con cómo está configurada la parte trasera del flipbox, es hora de hacer clic en ‘Enviar’.

La vista previa ahora se actualizará para mostrar todos tus cambios.

Crear Múltiples Flipboxes

En este punto, es posible que desees agregar más cuadros haciendo clic en el ‘+’ en la sección ‘Agregar Nuevos Flip Boxes’.

Esto te permite crear múltiples flipboxes con el mismo estilo y luego organizarlos en columnas y filas.

Ahora puedes crear más flipboxes siguiendo el proceso descrito anteriormente.

Por ejemplo, podrías crear un flipbox para cada uno de tus planes de precios.

Agrega el Flipbox a tu sitio web de WordPress

Cuando estés satisfecho con el flipbox, puedes agregarlo a tu sitio web de WordPress usando un shortcode que el plugin proporciona automáticamente.

En el lado derecho de tu pantalla, simplemente copia el valor en el cuadro ‘Shortcode’.

Ahora puedes agregar el flipbox a cualquier página, publicación o área lista para widgets usando el shortcode.

Para obtener instrucciones paso a paso sobre cómo colocar el shortcode, consulta nuestra guía sobre cómo agregar un shortcode en WordPress.

El plugin también tiene un widget de flipbox que puedes agregar a cualquier área lista para widgets de tu tema de WordPress.

Si has creado más de una animación de flipbox, necesitarás conocer el ID. Para obtener esta información, puedes ir a Flip Box » Flip Box y buscar en la columna 'ID'.

En la siguiente imagen, el ID de flipbox es 1.

Cuando tengas esta información, ve a Apariencia » Widgets.

Aquí, necesitas hacer clic en el botón '+'.

Ahora puedes escribir 'Flipbox'.

Cuando aparezca el widget correcto, simplemente arrástralo y suéltalo en la barra lateral, el pie de página o una sección similar.

El widget Flipbox mostrará una de tus animaciones por defecto.

Para mostrar una flipbox diferente en su lugar, escribe su ID en el campo.

Cuando estés satisfecho con el aspecto del widget, haz clic en 'Actualizar'.

Para más información, consulta nuestra guía sobre cómo agregar y usar widgets en WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo agregar superposiciones y efectos de hover de flipbox a tu sitio de WordPress. También puedes consultar nuestra guía sobre cómo crear una galería de imágenes, o ver nuestra selección experta de los mejores plugins de slider para WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.