¿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.

Animación de demostración de Flipbox

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 mouse 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 plugin. Esto plugin es flexible y fácil de usar. Es el mejor flipbox e imagen flotante de WordPress. plugin.

La versión gratuita del plugin te ofrece rapidez y sencillez. Una vez el plugin 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 plugin. 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 plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress. plugin.

Una vez el plugin está instalado y activado, puede crear su primer flipbox yendo a Flip Box »Crear nuevo.

Crear una nueva flipbox

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.

Importar una plantilla de flipbox

Con la versión gratuita del plugin, 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.

Flipbox haga clic en el botón de importación

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.

Elige qué flipbox 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 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’, ‘Frontal’ y ‘Backend’.

Menú de configuración general de Flipbox

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.

Coloca el cursor sobre el flipbox en la parte inferior de la pantalla y haz clic en “Editar”.

Vista previa de Flipbox editar texto

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.

Cambiar el título y el icono del frente de flipbox

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.

Cargar imagen de fondo frontal para flipbox

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.

Cambiar el texto del flipbox del backend

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.

Agregar botón y enlace backend flipbox

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.

Subir imagen de fondo de backend

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 icono ‘+’ en el metacuadro ‘Agregar nuevos flipboxes’.

Agregar una fila de 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 hacerlo es utilizando el shortcode. En el lado derecho de la pantalla, hay un cuadro de meta con la etiqueta ‘Código corto’, copie el shortcode que se parece a la imagen de abajo.

Copiar flipbox shortcode

A continuación, 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á publicada.

Pegar flipbox shortcode

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%.

Pantalla de WordPress en vivo de Flipbox

Esto plugin 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’.

Agregar widget de flipbox

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

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

ID del widget de Flipbox

Esperamos que este artículo le haya ayudado a aprender a agregar superposiciones y elementos flotantes de flipbox 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 . También puedes encontrarnos en Twitter y Facebook.

.

Fuente: wpbeginner

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *