¿Desea agregar superposiciones de flipbox y efectos de desplazamiento de imágenes a su sitio de WordPress?
Incluso si está utilizando un tema de WordPress de alta calidad, es posible que se sienta limitado por las opciones de personalización. Los flipboxes y las imágenes flotantes añaden efectos animados llamativos a su sitio.
En este artículo, le mostraremos cómo agregar superposiciones de cuadros abatibles y desplazamientos de imágenes a su sitio de WordPress.
¿Qué es un Flipbox?
Una caja giratoria es una caja que se voltea cuando pasa el mouse sobre ella. Puede agregar este efecto de animación flotante a secciones específicas de su sitio web, incluidos cuadros de texto e imágenes.
El término proviene de la característica única de “voltear” que ocurre cuando el mouse se desplaza sobre la imagen. Puede controlar cómo se voltea la imagen, junto con la información y el diseño de ambos lados de la imagen.
Si su sitio web es relativamente estático, puede usar un efecto flipbox para que se sienta más interactivo.
Por ejemplo, puede agregar un flipbox flotante de imagen a una página de precios de productos. De esa manera, cuando los usuarios pasen el cursor sobre sus niveles de precios, se mostrará el precio.
O, si es un profesional independiente, puede agregar logotipos de la empresa con la que ha trabajado en ese flip y un enlace a cada proyecto.
Si bien estos efectos animados pueden mejorar la experiencia del usuario de su sitio web, es importante no exagerar.
Piense en el efecto flipbox como agregar condimento a una comida. Está ahí para mejorar los sabores e ingredientes existentes, pero demasiado y arruinará el plato.
Dicho esto, echemos un vistazo a cómo puede agregar superposiciones de flipbox y efectos de desplazamiento de imagen a su blog o sitio web de WordPress.
Cómo crear superposiciones de Flipbox y efectos de desplazamiento en WordPress
Puede agregar flipboxes y efectos de desplazamiento a su sitio de WordPress utilizando muchos métodos, como el creador de páginas Elementor, o agregando CSS personalizado.
Sin embargo, el enfoque que recomendamos es utilizar el Flipbox: superposición de imágenes de cajas abatibles de Awesomes enchufar. Este complemento es flexible y fácil de usar. Es el mejor complemento de WordPress para flipbox e imagen flotante.
La versión gratuita del complemento le ofrece rapidez y sencillez. Una vez que el complemento está instalado, puede agregar rápidamente flip boxes atractivos a su sitio.
Si necesita más opciones de personalización, es posible que desee actualizar a la versión premium del complemento. Esto le permite controlar los colores de sus flipboxes y agregar CSS personalizado.
Puede encontrar que las plantillas existentes ya se ven muy bien cuando se agregan a su sitio, en este caso, no es necesario actualizar.
Lo primero que deberá hacer es instalar y activar el Flipbox: superposición de imágenes de cajas abatibles de Awesomes enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Una vez que el complemento está instalado y activado, puede crear su primer flipbox yendo a Flip Box »Crear nuevo.
Esto muestra toda la selección de plantillas.
Si eso no es suficiente, puede hacer clic en la opción de menú ‘Importar plantillas’ para obtener aún más plantillas que puede usar.
Con la versión gratuita del complemento, hay 5 plantillas diferentes para elegir, además de otras 10 plantillas que puede importar.
Para importar una nueva plantilla personalizable, haga clic en el botón “Importar” junto al número de estilo.
Ahora es el momento de seleccionar y comenzar a personalizar su plantilla.
Debe hacer clic en ‘Crear estilo’ para cargar su primer diseño de flipbox.
Esto abrirá un menú emergente donde puede nombrar su flipbox y elegir qué diseño desea personalizar.
Las opciones 1ª, 2ª y 3ª de ‘Diseños’ coinciden con los flipboxes individuales del diseño. Haga clic en ‘Guardar’ una vez que haya realizado sus elecciones.
Es importante mencionar que su diseño final coincidirá estrechamente con la plantilla de flipbox, por lo que es mejor elegir una plantilla que se parezca a cómo desea que se vea en su sitio web.
Hay tres pestañas principales que usará para cambiar el aspecto de su flipbox, ‘General’, ‘Front’ y ‘Backend’.
En cada una de estas pestañas, puede cambiar las fuentes, el relleno y los márgenes. Pero creemos que las opciones predeterminadas ya se ven muy bien.
A continuación, cambiaremos el texto en ambos lados del flipbox.
Coloca el cursor sobre el flipbox en la parte inferior de la pantalla y haz clic en “Editar”.
Esto abrirá una ventana emergente que le permite cambiar el texto frontal, el texto posterior y la imagen de fondo.
Para cambiar el título, edite el cuadro de texto ‘Título frontal’ y el cuadro ‘Icono de fuente:’ si desea que se muestre un icono diferente.
Si desea agregar una imagen de fondo, haga clic en ‘Cargar imagen’ a la derecha de la opción ‘Imagen frontal’.
A continuación, cargue una nueva imagen o seleccione una imagen de su biblioteca de medios existente.
Después de eso, seguirá la misma serie de pasos para la parte posterior del flipbox en ‘Configuración de backend’.
Aquí puede cambiar el título y el texto que se muestra cuando se voltea la tarjeta.
También puede cambiar los campos ‘Texto del botón de backend’ y ‘Enlace’.
Estos cambian el texto del botón y a dónde irán los usuarios cuando se haga clic en él.
Finalmente, haga clic en ‘Cargar ahora’ para cambiar la imagen de fondo en la parte posterior del flipbox.
Igual que el anterior, puede cargar una imagen o seleccionar una de su biblioteca de medios.
Una vez que haya terminado de editar, asegúrese de hacer clic en el botón “Enviar” para guardar los cambios.
Notará que sus nuevos cambios aparecerán en la ventana ‘Vista previa’ de inmediato.
Si desea crear una fila completa de flipboxes, haga clic en el ícono ‘+’ en el metacuadro ‘Agregar nuevos flipboxes’.
Aparecerá un cuadro emergente similar al anterior que le permite personalizar su segundo flipbox.
A estas alturas ya ha creado y personalizado sus flipboxes, por lo que es hora de agregarlos a su sitio de WordPress.
La forma más sencilla de hacer esto es usando el shortcode incluido. En el lado derecho de la pantalla, hay un cuadro de meta con la etiqueta ‘Código corto’, copie el código corto que se parece a la imagen de abajo.
A continuación, navegue a una página o publicación donde le gustaría agregar el flipbox y pegue su código corto.
Luego, haga clic en ‘Publicar’ o ‘Actualizar’ si su publicación ya está publicada.
Sus nuevos flipboxes ahora estarán activos en su sitio.
Tenga en cuenta que a medida que cambia el tamaño de la ventana de su navegador, los flipboxes se ajustan ya que responden al 100%.
Este complemento también incluye un widget de flipbox que puede agregar a cualquier área de widgets compatible con su tema.
Para hacer esto, navegue a Apariencia »Widgets y busque el widget titulado ‘Flipbox – Awesomes Flip Boxes Image Overlay’.
Luego, puede arrastrar y soltar el widget en su ubicación preferida.
Finalmente, ingrese el ID de estilo, que se puede encontrar en el menú principal del complemento Flipbox, y haga clic en ‘Guardar’.
Esperamos que este artículo le haya ayudado a aprender cómo agregar superposiciones de flipbox y hovers a su sitio de WordPress. Es posible que también desee ver nuestra guía sobre la optimización de imágenes para SEO y nuestra guía de solución de problemas para solucionar problemas comunes de imágenes de WordPress.
Si le gustó este artículo, suscríbase a nuestro Canal de Youtube para tutoriales en video de WordPress. También puedes encontrarnos en Gorjeo y Facebook.