Cómo crear superposiciones y compensaciones Flipbox en WordPress »Wiki Ùtil

¿Desea agregar una superposición de marco giratorio y un efecto de retención de imagen a su sitio web de WordPress?

Incluso si usa un tema de WordPress de alta calidad, es posible que las opciones de personalización lo limiten. Flipboxes e imágenes flotantes agregan atractivos efectos de animación a su sitio web.

En este artículo, le mostraremos cómo agregar superposiciones de menú desplegable y cambios de imagen a su sitio de WordPress.

¿Qué es Flipbox?

Una caja plegable es una caja que se voltea cuando se coloca el cursor del mouse sobre ella. Puede agregar este efecto de animación flotante a ciertas partes de su sitio web, incluidos cuadros de texto e imágenes.

El término proviene de la característica única de "inversión", que ocurre cuando el mouse coloca el cursor del mouse sobre una 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 el efecto de cambio de marco para hacerlo más interactivo.

Por ejemplo, puede agregar un cuadro de imagen flotante a la página de precios de su producto. De esta manera, cuando el usuario pase el cursor del mouse sobre su nivel de precio, se mostrará el precio.

O, si eres autónomo, puedes agregar el logo de la empresa con la que trabajaste y un enlace a cada proyecto.

Si bien estos efectos de animación pueden mejorar la experiencia del usuario de su sitio web, es importante no usarlos demasiado.

Piense en el efecto de una caja plegable como agregar especias a un plato. Puede mejorar los sabores e ingredientes existentes, pero estropeará demasiado el plato.

Con eso en mente, veamos cómo agregar una superposición de cuadro desplegable y efectos de retención de imagen a su blog o sitio web de WordPress.

Cómo crear efectos de desplazamiento y superposición de Flipbox en WordPress »Wiki Ùtil

Puede usar muchos métodos (por ejemplo, Elementor Builder) o agregar CSS personalizado para agregar cajas de cambio y efectos de desplazamiento a su sitio de WordPress.

Sin embargo, nuestro método recomendado es utilizar la superposición de imágenes Flipbox-Awesomes Flip Boxes. El accesorio es flexible y fácil de usar. Este es el mejor complemento de WordPress para voltear cuadros e imágenes flotantes.

La versión gratuita de este complemento le brinda velocidad y simplicidad. Una vez que instale el complemento, puede agregar rápidamente un marco plegable a su sitio.

Si necesita más opciones de personalización, es posible que deba actualizar a una versión mejorada del complemento. Esto le permite controlar el color del cuadro desplegable y agregar CSS personalizado.

Puede encontrar que una plantilla existente se ve bien cuando se agrega a su sitio web, en cuyo caso no es necesario actualizar.

Lo primero que debe hacer es instalar y activar Flipbox-Awesomes Flip Boxes Image Overlay. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.

Después de instalar y activar el complemento, puede crear su primera caja plegable de las siguientes maneras Flip box »Crear un nuevo.

Esto muestra toda la selección de plantillas.

Si eso no es suficiente, puede hacer clic en la opción de menú Importar plantilla para obtener más plantillas para usar.

Para la versión gratuita del complemento, hay 5 plantillas diferentes para elegir y 10 plantillas más que se pueden importar.

Para importar una nueva plantilla personalizada, haga clic en el botón "Importar" junto al número de estilo.

Ahora es el momento de elegir y empezar a personalizar la plantilla.

Debe hacer clic en "Crear estilo" para cargar su primer diseño de caja plegable.

Esto abrirá un menú emergente donde puede nombrar el cuadro desplegable y seleccionar el diseño que desea personalizar.

Las opciones de diseño 1, 2 y 3 corresponden a cada caja plegable del diseño. Una vez que haya realizado su selección, haga clic en Guardar.

Vale la pena mencionar que su diseño final coincidirá estrechamente con la plantilla del cuadro desplegable, por lo que es mejor elegir una plantilla que sea similar a la forma en que desea que se vea en su sitio web.

Utilizará tres pestañas principales para cambiar la apariencia del marco abatible, "General", "Delantero" y "Atrás."

En cada sección puede cambiar la fuente, el relleno y los márgenes. Pero creemos que las opciones predeterminadas ya son geniales.

Luego, cambiaremos el texto en ambos lados del cuadro invertido.

Coloca el cursor sobre el cuadro de inversión 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, si desea mostrar un icono diferente, edite el cuadro de texto "Título frontal" y el cuadro "Icono de fuente:".

Si desea agregar una imagen de fondo, haga clic en "Cargar una imagen" en el lado derecho de la opción "Foto anterior".

Luego cargue una nueva imagen o seleccione una imagen de una biblioteca de medios existente.

Luego, seguirá la misma serie de pasos en la parte posterior de la caja plegable en Configuración del borde posterior.

Aquí puede cambiar el título y el texto que se muestran cuando se da la vuelta a la tarjeta.

También puede cambiar los campos de Vínculo y Texto del botón Atrás.

Cambiarán el texto del botón y a dónde va el usuario cuando hace clic en él.

Finalmente, haga clic en Cargar ahora para cambiar la imagen de fondo en la parte posterior del cuadro desplegable.

Al igual que arriba, puede cargar una imagen o seleccionar una de la biblioteca de medios.

Después 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 flip boxes, haga clic en el icono "+" en el metabox "Agregar un nuevo cuadro".

Aparecerá una ventana emergente similar a la anterior, que le permitirá personalizar el segundo campo de inversión.

Hasta ahora, ha creado y personalizado sus flip boxes, ahora es el momento de agregarlos a su sitio web de WordPress.

La forma más sencilla es utilizar el código corto incluido. En el lado derecho de la pantalla hay un cuadro de meta con la etiqueta "Código corto", copie el código corto como se muestra en la siguiente figura.

Luego vaya a la página o publicación donde desea agregar el cuadro de conversión y pegue su código corto.

Si su publicación está publicada, haga clic en "Publicar" o "Actualizar".

Su nueva caja plegable ahora estará activa en su sitio web.

Tenga en cuenta que cuando se cambia el tamaño de la ventana del navegador, el marco de volteo se configurará al 100% de capacidad de respuesta.

Este complemento también incluye un widget giratorio que puede agregar a cualquier área de widgets compatible con su tema.

Para hacer esto, vaya a Apariencia »Enanos Y busque el widget titulado "Flipbox-Awesomes Flip Boxes Image Overlay".

A continuación, puede arrastrar y soltar el widget en su ubicación preferida.

Finalmente, ingrese la ID de estilo que se puede encontrar en el menú principal de Flipbox y luego haga clic en Guardar.

Esperamos que este artículo le haya ayudado a comprender cómo agregar una superposición de cuadro desplegable y desplazarse sobre su sitio de WordPress. Es posible que también desee revisar nuestra Guía de optimización de imágenes de SEO y la Guía de solución de problemas para problemas comunes de imágenes de WordPress.

Si le gusta este artículo, suscríbase a nuestro canal de tutoriales en vídeo de YouTube para WordPress. También puede encontrarnos en Twitter y Facebook.