¿Quiere 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. Flipboxes y Image Hovers agregan llamativos efectos animados a su sitio. En este artículo, le mostraremos cómo agregar superposiciones de cuadros abatibles y desplazamientos de imágenes en su sitio de WordPress.
¿Qué es un Flipbox?
Una caja plegable es una caja que se voltea cuando pasa el mouse sobre ella. Puede agregar este efecto de animación de desplazamiento a secciones específicas de su sitio web, incluidos cuadros de texto e imágenes.
El término proviene de la función única de «voltear» que ocurre cuando el mouse pasa sobre la imagen. Puede controlar cómo se voltea la imagen, así como la información y el diseño en ambos lados de la imagen. Si su sitio web es relativamente estático, puede usar un efecto flipbox para hacerlo más interactivo. Por ejemplo, puede agregar un flipbox flotante de imagen a una página de precios de productos. De esta manera, cuando los usuarios se desplazan sobre sus niveles de precios, se muestra el precio. O, si es un escritor independiente, puede agregar logotipos de la empresa con la que ha trabajado y vincularlos 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. Habiendo dicho eso, veamos 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 utiliza el complemento Flipbox – Awesomes Flip Boxes Image Overlay. Este complemento es flexible y fácil de usar. Es el mejor plugin de desplazamiento de imágenes y flipbox de WordPress. La versión gratuita del complemento le ofrece rapidez y sencillez. Una vez que el complemento está instalado, puede agregar rápidamente hermosos flip boxes 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 cuyo caso no es necesario realizar actualizaciones. Lo primero que debe hacer es instalar y activar el complemento Flipbox – Awesomes Flip Boxes Image Overlay. 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 modelos. 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, puede elegir entre 5 plantillas diferentes, además de 10 plantillas más 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. Debes hacer clic en «Crear un estilo» para cargar tu primer diseño de flipbox. Esto abrirá un menú contextual donde puede nombrar su flipbox y elegir el diseño para personalizar.
Las opciones 1ª, 2ª, 3ª de «Diseño» corresponden a 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 vea como desea que se vea en su sitio web. Hay tres pestañas principales que usará para cambiar la apariencia de su flipbox, «General», «Antes» 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, vamos a cambiar el texto en ambos lados del flipbox. Pase el mouse sobre el flipbox en la parte inferior de la pantalla y haga clic en «Editar».
Esto abrirá una ventana emergente que le permite editar el texto del frente, el texto del reverso y la imagen de fondo. Para cambiar el título, edite el cuadro de texto «Título antes» y el cuadro «Icono de fuente:» si desea que aparezca un icono diferente.
Si desea agregar una imagen de fondo, haga clic en «Cargar imagen» a la derecha de la opción «Imagen frontal». Luego 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 la sección « Configuración del backend ». Aquí puede cambiar el título y el texto que se muestra cuando se voltea la tarjeta.
También puede editar los campos «Texto del botón de backend» y «Enlace». Estos cambian el texto del botón y el destino de sus usuarios cuando el usuario hace clic en él.
Finalmente, haga clic en «Descargar ahora» para cambiar la imagen de fondo en la parte posterior del flipbox. Como se indicó anteriormente, puede cargar una imagen o seleccionar una de su biblioteca de medios.
Una vez que se completen los cambios, asegúrese de hacer clic en el botón «Enviar» para guardar sus cambios. Notará que sus nuevos cambios aparecerán inmediatamente en la ventana «Vista previa». Si desea crear una fila completa de flipboxes, haga clic en el icono «+» en el meta-cuadro «Agregar nuevo flipbox».
Aparecerá un cuadro de diálogo similar al anterior que le permitirá personalizar su segundo flipbox. Ahora 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 usar el shortcode incluido. En el lado derecho de su pantalla hay un cuadro meta titulado « Código corto », copie el código corto que se parece a la imagen de abajo.
Luego, vaya a una página o publicación donde desee agregar el flipbox y pegue su código corto. Luego haga clic en «Publicar» o «Actualizar» si su mensaje ya está en línea.
Sus nuevos flipboxes ahora estarán en línea en su sitio. Tenga en cuenta que cuando cambia el tamaño de la ventana del navegador, los flipbox se ajustan porque responden al 100%.
Este complemento también incluye un widget Flipbox que puede agregar a cualquier área de widgets compatible con su tema. Para hacer esto, vaya a Apariencia »Widgets y busque el widget titulado ‘Flipbox – Flip Boxes Awesomes 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. También puede consultar nuestra guía sobre la optimización de imágenes para SEO y nuestra guía de solución de problemas sobre cómo solucionar problemas comunes de imágenes de WordPress. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
