¿Cómo dar vida a un sitio web estático? Ya sabe, esos sitios web en los que todo lo que se ve es texto, texto y texto. Una solución rápida es añadir un elemento visual, como una imagen o un vídeo.
¿Y si además pudieras hacer que las imágenes fueran interactivas? ¿Te parece interesante?
Cuando se trata de crear un sitio web, WordPress es la opción más popular. Después de todo, 41% de los sitios web de todo el mundo funcionan con WordPress.
Puede crear y poner en marcha un sitio web WordPress totalmente funcional en el menor tiempo posible. La facilidad con la que WordPress le permite personalizar su sitio web y mejorar su funcionalidad es insuperable.
Una de estas funciones para mejorar el aspecto de su sitio web es añadir superposiciones de flipbox de imágenes y efectos hover.
Con flipbox overlays y hovers, puedes crear efectos animados para las imágenes de tu sitio. Esto aumenta el potencial de interacción de las imágenes.
Vamos a cubrir todo lo que necesita saber acerca de la imagen flipbox superposiciones y efectos hover en este artículo. También hemos cubierto algunos de los plugins de WordPress más populares para ayudarle a añadir esos efectos de imagen y animaciones.
¿Qué es un Flipbox?
Un flipbox es una caja que se voltea al pasar el ratón sobre ella. Es una forma sencilla y eficaz de añadir efectos atractivos a una imagen.
¿Tiene poco espacio para añadir la descripción de la imagen? Utilice un flipbox. Puede incluir la descripción que se mostrará al pasar el ratón por encima de la imagen.
Todas estas funciones adicionales contribuyen a mejorar la experiencia del usuario en su sitio web.
Los flipbox son algo más que un elemento atractivo. Con un flipbox, puede combinar la potencia de un infobox y una llamada a la acción. Todo en uno.
Por ejemplo, ¿se ha encontrado con esas imágenes de productos en su sitio de compras favorito con un botón de comprar ahora cuando pasa el ratón por encima?
¿Le ha animado a comprar? Si es así, ¡no eres el único en el que trabajan!
Otro caso de uso de las superposiciones y los hovers de flipbox en WordPress es para mostrar tu portafolio. Si ejerces una profesión como fotógrafo, autónomo o chef cuyo trabajo puede apreciarse visualmente, esta es una forma excelente de mostrar tus creaciones. Basta con mostrar las imágenes en miniatura en el anverso y enlazar con tu trabajo en el reverso.
Además de texto y llamadas a la acción, puede incluir iconos, imágenes, vídeos, botones y otros efectos.
Ni que decir tiene que, como resultado, su sitio web mejorará su aspecto.
Cómo crear Flipbox Overlays y Hovers en WordPress
Crear flipbox overlays y hovers en WordPress es sencillo. Desde el uso de un plugin de WordPress para constructores de página, usted tiene más de una manera de ir sobre la creación de ellos.
Crear Flipbox Overlays y Hovers usando un plugin de WordPress
Una búsqueda en los plugins de WordPress para flipbox aparecerán varias opciones para elegir. Uno de los plugins más populares flipbox WordPress es Flipbox - Awesomes Flip Boxes Image Overlay.
Flipbox - Awesomes Flip Boxes Image Overlay es un plugin responsivo de imágenes flipbox que le permite mejorar su página de producto o información en su sitio web. Usando el plugin, también puede crear deslizadores con efectos de transición.
Para crear superposiciones flipbox en WordPress, instale el plugin Flipbox - Awesomes Flip Boxes Image Overlay.
Paso 1: Instalar el plugin de WordPress Flipbox
Visite Plugins > Añadir nuevoInstale y active el plugin.
Una vez activado, verá un nuevo elemento de menú a la izquierda de su panel de control de WordPress llamado Flipbox.
Paso 2: Crear un nuevo Flipbox
Como nuevo usuario, no tendrás ningún flipbox existente.
Para crear una, basta con hacer clic en Crear nuevo Flipbox o el Crear nuevo en la parte superior.
Cree un nuevo flipbox seleccionando uno de los estilos disponibles. Utilícelo como plantilla y personalícelo según sus necesidades.
¿Quiere más opciones? Haga clic en Importar plantillas de los enlaces anteriores.
Una vez que se haya decidido por un estilo, haga clic en Crear estilo.
Póngale un nombre a su flipbox y seleccione una presentación (1ª, 2ª, 3ª) según sus necesidades.
Haga clic en Guardar una vez que haya terminado.
Paso 3: Personaliza tu Flipbox
Ahora puede personalizar su flipbox en la página siguiente.
Desde cómo debe aparecer el flipbox por delante hasta el contenido por detrás, añadir CSS personalizado (función pro), puedes personalizar el flipbox a tu gusto.
Mientras realizas los cambios y personalizas tu flipbox, puedes previsualizarlo desplazándote hacia abajo.
Una vez que hayas terminado de personalizar y jugar, haz clic en Enviar.
Paso 4: Insertar Flipbox
Ahora que ya has creado tu flipbox, tenemos que incluirlo donde queramos.
Copie el shortcode de la página de inicio de Flipbox (Flipbox > Flipbox).
Para insertarlo en una página/post, haga clic en Páginas > Añadir nueva (o Posts > Añadir nuevo).
Añade el bloque shortcode e incluye el shortcode que acabamos de copiar.
Publica tu página/post una vez que hayas terminado.
Ha creado correctamente las superposiciones flipbox en WordPress.
¿Quieres crear uno en tu barra lateral? Muy sencillo. Añade un widget.
Visite Apariencia > Widgets y arrastre el widget Flipbox - Awesomes Flip Boxes Image Overlay a su barra lateral.
Como puedes ver en la imagen, tienes que insertar el ID de Estilo para que esto funcione.
¿Cómo se obtiene el identificador de estilo?
¿Recuerdas el shortcode que hemos añadido antes? Ese es tu ID de Estilo - [oxilab_flip_box id="1″]especialmente la parte en la que dice id="1".
Incluye el ID en tu widget y haz clic en Guardar.
Su flipbox se mostrará en la barra lateral del sitio web.
Crea Flipbox Overlays y Hovers con Elementor Page Builder
¿Queréis utilice Elementor como constructor de páginas? Si es así, usted tiene una opción que está disponible en el salpicadero Elementor si usted tiene Elementor Pro.
Buscar el Caja abatible en la barra lateral de Elementor.
Si quieres utilizar esta función, entre muchas otras que tiene Elementor, deberías considerar actualizar a la versión Pro.
Si ya lo utiliza, arrastre el widget Flip box a la página y elija entre los seis asombrosos efectos: voltear, deslizar, empujar, fundir, acercar y alejar.
(Fuente: Elementor)
Una vez que hayas seleccionado un efecto de tu elección, sigue adelante y personalízalo.
¿Quieres crear un efecto 3D? También tienes esa opción.
(Fuente: Elementor)
La opción 3D está disponible para todos los efectos flip y se puede incluir fácilmente para mejorar aún más sus cajas flip.
Crea Flipbox Overlays con Ultimate Addons for Beaver Builder
Otro método para crear flipbox overlays y hovers en WordPress es utilizar la función Ultimate Addons for Beaver Builder.
Este plugin ha sido desarrollado por nosotros en Brainstorm Forceel equipo que está detrás de nuestro popular tema Astra y de muchos otros productos similares de categoría mundial.
El plugin está repleto de funciones y hace la mayor parte del trabajo pesado por ti.
Basta con arrastrar y soltar los módulos personalizados y utilizar plantillas de páginas prediseñadas para reducir el tiempo de desarrollo de su sitio web en unos 30%.
Flipbox es una de las últimas y más populares incorporaciones a Ultimate Addons for Beaver Builder.
Usando este plugin, puedes crear una animación flip y tener contenido en ambos lados.
Ultimate Addons for Beaver Builder es gratuito e incluye la función Flipbox.
Si desea explorar las diversas funciones que le ahorrarán tiempo, el soporte premium, los más de 60 potentes módulos, las más de 200 plantillas de secciones y las más de 100 plantillas de páginas, le recomendamos que actualice a la versión Ultimate Addons versión pro.
Los mejores plugins Flipbox Overlay y Hover para WordPress
Aunque las opciones anteriores son buenas, siempre es bueno saber que hay más opciones.
Aquí tienes algunos plugins adicionales para WordPress que puedes utilizar.
Flipbox Fancy Elementor
Flipbox Fancy Elementor es un plugin gratuito para WordPress que puede utilizar junto con el plugin Creador de páginas Elementor para crear superposiciones flipbox. Un plugin ideal que se puede utilizar para mostrar sus servicios, características, miembros del equipo, infoboxes de contacto, cartera, galerías de imágenesy otros elementos.
Fancy Elementor Flipbox es un widget que sólo se puede añadir desde el panel de control de Elementor. Usando este plugin, puede crear seis estilos diferentes: flipbox, rotar, zoom-in, zoom-out, lado derecho, y el estilo de lado izquierdo.
El plugin funciona bien con casi cualquier tema compatible con Elementor y ofrece una flexibilidad de personalización total.
Pruebe Fancy Elementor Flipbox gratis.
Flipboxes - Estilos Flipbox definitivos
He aquí otra forma sencilla y eficaz de incluir flipboxes en WordPress.
Utilice la Flipboxes - Estilos Flipbox definitivos Plugin de WordPress para mejorar la experiencia del usuario mediante la creación de cajas flip impresionantes.
Algunas de sus características son:
- Utilice colores personalizados para personalizar el aspecto de la caja abatible
- Incluya iconos, botones, imágenes y enlaces increíbles dentro de los cuadros de contenido con facilidad
- Utilice el título, la descripción y los estilos personalizados para personalizar ambas caras del cuadro de contenido flip
- Reordena la posición del flipbox con facilidad
- Cree un número ilimitado de flipboxes con una amplia gama de hermosos diseños disponibles
Descargar Flipboxes - Ultimate Flipbox Styles gratis.
Flipbox
Flipbox te permite mostrar el contenido de forma atractiva. Puedes crear flip boxes en Gutenberg fácilmente y mejorar la experiencia general del usuario en tu sitio web.
Flipbox es totalmente personalizable, y puedes usarlo como quieras. Teniendo en cuenta que no requiere ningún recurso adicional, lo hace ligero, y también está altamente optimizado para la velocidad.
Puede descargar e instalar Flipbox por sí mismo o junto con el programa Complementos esenciales para Gutenberg Plugin de WordPress.
Resumen
Cuando se trata de crear una experiencia de usuario asombrosa y de retener a los visitantes en su sitio web, no queremos dejar piedra sin remover.
Desde tener el diseño adecuado hasta crear contenidos atractivos, pasando por imágenes destacadas relevantes, hasta tener un diseño de sitios web despejadosTodos estos elementos contribuyen en gran medida a mejorar la experiencia del usuario de un sitio web.
Las superposiciones y los hovers de Flipbox son uno de esos elementos que ayudan a atraer a los usuarios y a mejorar el aspecto general de su sitio web.
Aunque incluir un flipbox tiene sus ventajas, es mejor que no te pases y añadas uno para casi todas las imágenes de tu sitio web. Es como preparar un plato. El ingrediente adecuado en la proporción adecuada da como resultado un plato delicioso.
En este artículo, hemos cubierto todo lo que necesita saber sobre flipboxes y hemos explicado cómo instalar un plugin flipbox WordPress para impresionar a los usuarios de su sitio web.
Ahora le toca a usted. ¿Qué métodos de los mencionados anteriormente has puesto en práctica? ¿Te han resultado útiles las opciones de plugin mencionadas anteriormente? Coméntanoslo a continuación.
Divulgación: Este blog puede contener enlaces de afiliados. Si realiza una compra a través de uno de estos enlaces, es posible que recibamos una pequeña comisión. Leer información. Tenga la seguridad de que sólo recomendamos productos que hemos utilizado personalmente y que creemos que aportarán valor a nuestros lectores. Gracias por su apoyo.
Hola Wpastra buen artículo, yo estaba tratando de crear Flipbox Superposiciones durante tanto tiempo en mi blog, pero yo no tenía ni idea hasta que leí su artículo. Muchas gracias, con la ayuda de Flipbox WordPress Plugin ahora puedo crear fácilmente. Por cierto estoy usando Astra en mi blog bloggervoice[dot]com también.
Me alegra saber que este artículo te ha ayudado, James.
Aplaudo enérgicamente este artículo por la información bien investigada y la excelente gramática. Me involucré tanto en este contenido que no pude dejar de leerlo. No puedo esperar más. Nuestras cajas personalizadas están disponibles a todo color y con otros efectos especiales para que sus productos destaquen. Puede embalar casi cualquier cosa cómodamente en estas cajas, ya que están disponibles en todas las formas y tamaños según sus productos.
Hola
¿Ofrece el Spectra funciones Flipbox?
Gracias