¿Quiere agregar superposiciones de flipbox y efectos de desplazamiento de imagen 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 agregan efectos animados llamativos a su sitio.
En este artículo, le mostraremos cómo agregar superposiciones de flip box y desplazamientos de imágenes a su sitio de WordPress.
¿Qué es un flip box?
Un flip box es un cuadro que se voltea cuando pasas el mouse sobre él. 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 pasa 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 de imagen a la página de precios de un producto. De esa manera, cuando los usuarios se desplacen sobre sus niveles de precios, se mostrará el precio.
O, si trabaja por cuenta propia, puede agregar logotipos de empresas con las que ha trabajado en ese volteador y 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 condimentos a una comida. Está ahí para realzar 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 imágenes 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 generador de páginas de Elementor o agregando CSS personalizado.
Sin embargo, el enfoque que recomendamos es usar el Flipbox: superposición de imágenes de Awesomes Flip Boxes enchufar. Este complemento es flexible y fácil de usar. Es el mejor complemento de WordPress para flipbox y desplazamiento de imágenes.
La versión gratuita del complemento le ofrece velocidad y simplicidad. Una vez que se instala el complemento, puede agregar rápidamente cuadros 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 hay necesidad de actualizar.
Lo primero que debe hacer es instalar y activar el Flipbox: superposición de imágenes de Awesomes Flip Boxes 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 en el diseño. Haga clic en ‘Guardar’ una vez que haya hecho sus elecciones.
Es importante mencionar que su diseño final coincidirá estrechamente con la plantilla flipbox, por lo que es mejor elegir una plantilla que se asemeje 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 geniales.
A continuación, cambiaremos el texto en ambos lados del flipbox.
Pase el cursor sobre el flipbox en la parte inferior de la pantalla y haga clic en ‘Editar’.
Aparecerá una ventana emergente que le permitirá 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 multimedia 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 backend’ y ‘Enlace’.
Estos cambian el texto del botón y el lugar al que irán los usuarios cuando hagan clic en él.
Finalmente, haga clic en ‘Cargar ahora’ para cambiar la imagen de fondo en la parte posterior del flipbox.
Igual que arriba, puede cargar una imagen o seleccionar una de su biblioteca multimedia.
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 metabox ‘Agregar nuevos Flip Boxes’.
Aparecerá un cuadro emergente similar al de arriba que le permite personalizar su segundo flipbox.
Ya ha creado y personalizado sus flipboxes, por lo que es hora de agregarlos a su sitio de WordPress.
La forma más fácil de hacer esto es usando el shortcode incluido. En el lado derecho de la pantalla, hay un meta cuadro con la etiqueta ‘Código corto’, copie el código corto que se parece a la imagen a continuación.
Luego, navegue a una página o publicación donde le gustaría agregar el flipbox y pegue su shortcode.
Luego, haga clic en ‘Publicar’ o ‘Actualizar’ si su publicación ya está activa.
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 flipbox que puede agregar a cualquier área de widget 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 a su ubicación preferida.
Finalmente, ingrese la identificación del estilo, que se puede encontrar en el menú principal del complemento Flipbox, y haga clic en ‘Guardar’.
Esperamos que este artículo lo haya ayudado a aprender cómo agregar superposiciones de flipbox y desplazamientos a su sitio de WordPress. También puede consultar nuestra guía sobre cómo optimizar imágenes para SEO y nuestra guía de resolución de problemas sobre cómo solucionar problemas comunes de imágenes de WordPress.
.