Cómo crear superposiciones y hovers de Flipbox en WordPress

Cuando se trata de diseñar un sitio de WordPress atractivo y atractivo, agregar elementos interactivos puede mejorar notablemente la experiencia del usuario. Flipbox es uno de esos elementos que le permite mostrar contenido de una manera dinámica e interactiva.

En esta publicación de blog, exploraremos qué es Flipbox, el papel de las superposiciones y desplazamientos de Flipbox en los sitios de WordPress, y le proporcionaremos una guía paso a paso sobre cómo agregar superposiciones y desplazamientos de Flipbox en WordPress.

¿Qué es Flipbox?

Un Flipbox es una función de diseño que le permite proporcionar material como un cuadro que se voltea o gira cuando el usuario pasa el mouse sobre él. Por lo general, incluye dos lados, el anverso y el reverso, con un contenido diferente en cada lado.

Papel de las superposiciones y hovers de Flipbox en el sitio de WordPress

Las superposiciones y desplazamientos de Flipbox pueden ayudar a mejorar la experiencia del usuario y el atractivo visual de su sitio de WordPress. Le permiten llamar la atención sobre detalles importantes, resaltar características o exhibir sus fotos y videos de forma dinámica. Puede hacer que su sitio sea más atractivo, estimular la participación del usuario y mejorar la estética general del diseño al incluir superposiciones y desplazamientos de Flipbox.

Una guía paso a paso para agregar Flipbox al sitio de WordPress

Para agregar superposiciones y desplazamientos de Flipbox a su sitio de WordPress, necesitará un complemento adecuado que ofrezca esta funcionalidad. Hay varios complementos Flipbox disponibles, pero dos opciones populares son los complementos Elementor y ElementsKit Flipbox . Estos complementos brindan opciones fáciles de usar y una variedad de configuraciones de personalización para crear impresionantes efectos Flipbox. Instalar y activar un complemento no es ciencia espacial. Puedes hacerlo fácilmente siguiendo unos pocos pasos.

Ahora, volvamos a agregar Flipbox a su sitio. Aquí hay 4 formas fáciles y simples de hacerlo:

Paso 1: Habilitar el widget Flip Box

Para hacer esto, inicie sesión en su panel de administración de WordPress y navegue hasta ElementsKit ⇒ widgets ⇒ flip box widget , encienda el widget y haga clic en Guardar cambios .

Paso 2: Arrastra y suelta el widget

Edite la página seleccionando la opción Editar con Elementor. Luego, busque el widget de flip box con un icono de Ekit y simplemente arrastre y suelte el widget en la página.

Paso 3: Personaliza la configuración

Expanda el menú Flip box para modificar la configuración:

0. Opciones de volteo: puede elegir cómo se ve la animación de volteo. Hay cuatro opciones: Voltear, Acercar, Deslizar y 3D. Cada uno tiene un estilo diferente.

• Dirección de volteo: esto determina en qué dirección irá la animación de volteo. Dependiendo del tipo de voltereta que elijas, verás diferentes opciones para la dirección en la que puede voltear.

• Flip Trigger: Así es como haces que ocurra el flip. Puede elegir entre tres opciones: pasar el mouse (cuando pasa el mouse sobre él), hacer clic en el cuadro (cuando hace clic en el cuadro) o hacer clic en el botón (cuando hace clic en un botón específico).

• Altura del cuadro giratorio: puede cambiar la altura del cuadro giratorio. Dentro de esta configuración, hay dos pestañas: FRONTAL y ATRÁS. Puede personalizar el contenido de cada lado por separado.

Para cada lado de la caja plegable, puede personalizar las siguientes cosas:

• Tipo de medio: elija si desea usar un ícono, una imagen o ninguno (si no desea agregar ninguna imagen).

• Ícono/Elegir archivo: si eligió un ícono o una imagen, puede seleccionar cuál desea usar de una lista o elegir un archivo de su computadora.

• Título: Asigne un título o nombre a ese lado del cuadro giratorio.

• Subtítulo: agregue un texto más pequeño debajo del título para brindar más información.

• Descripción de la tapa: escriba una descripción o explicación para ese lado de la caja de tapa.

• Alineación: Decide si quieres que el contenido esté en el lado izquierdo, en el centro o en el lado derecho.

Una vez que haya terminado de personalizar el contenido de ambos lados del cuadro, puede cambiar el estilo para que se vea como desee.

Paso 4: Formaliza tu flip box

Ahora, vaya a la pestaña Estilo y expanda cada sección a las opciones de estilo correspondientes:

Envoltorio: aquí puede cambiar el tipo de fondo, el color, la ubicación, el segundo color, la ubicación, el tipo, el ángulo, etc. debajo del envoltorio. Las opciones tanto para la parte delantera como para la trasera de la caja plegable se pueden personalizar.

Icono: Al expandir esta opción. Puede cambiar el color, el tipo de fondo, la sombra del cuadro, el tipo de borde y otras configuraciones para las vistas normal y flotante. Tanto el extremo frontal como el posterior de la caja plegable pueden tener estilos de iconos personalizados.

Título: Desde aquí puedes cambie la Tipografía , el Color del título y el Margen del título para ambos lados del cuadro giratorio.

Subtítulo: modifique esta opción para personalizar la tipografía, el color del título y el margen del título del subtítulo para ambos lados del cuadro giratorio.

Descripción: Aquí puede personalizar la Tipografía, el Color de la descripción y el Margen de la descripción para ambos lados del recuadro.

Botón: expanda la sección del botón para cambiar el color del texto, el color de fondo, el tipo de borde, el radio del borde, el cuadro del borde y otras configuraciones. Se puede diseñar el botón para vistas regulares y de desplazamiento.

Finalmente, haga clic en publicar/actualizar para guardar los cambios y obtener una vista previa de su caja de Elementor:

Gráfico fácil de usar

El mejor complemento Flipbox Overlays and Hovers para WordPress

Aquí está mi descripción general de dos superposiciones populares de Flipbox y complementos flotantes para WordPress uno al lado del otro. Estos son complementos de Elementor y ElementsKit Flipbox. Echar un vistazo

Complemento Elementor Flipbox

Elementor es un complemento de creación de páginas ampliamente utilizado y de gran prestigio para WordPress. Ofrece un widget Flipbox que le permite crear impresionantes animaciones en su sitio web. Con Elementor, puede agregar fácilmente efectos de volteo interactivos a sus imágenes, íconos, títulos y descripciones. El complemento proporciona una interfaz fácil de usar en la que puede personalizar la dirección de giro, el estilo de animación, el evento de activación (pasar el mouse, hacer clic) y varios elementos de diseño. Elementor es conocido por su flexibilidad, amplias opciones de estilo y compatibilidad con diferentes temas.

Complemento Flipbox de ElementsKit

ElementsKit es un paquete completo de complementos para Elementor que mejora su funcionalidad. Hay un módulo Flipbox dedicado dentro de ElementsKit. Agrega funciones y efectos de Flipbox más avanzados a su sitio web con tecnología de Elementor. Este complemento ofrece una extensa biblioteca de plantillas Flipbox prediseñadas. Esto le permite crear rápidamente animaciones flip visualmente atractivas. El complemento ElementsKit Flipbox también proporciona opciones de personalización adicionales. Puede tener diferentes estilos de Flipbox, efectos de superposición, efectos de desplazamiento y varios eventos de activación. Se integra a la perfección con Elementor y proporciona una experiencia de usuario perfecta para diseñar elementos cautivadores de Flipbox.

Tanto el complemento Elementor Flipbox como el complemento ElementsKit Flipbox pueden ser las mejores opciones para usted. Estos traen animaciones interactivas y atractivas a los sitios web. Estos complementos tienen interfaces fáciles de usar y amplias opciones de personalización. Además, estos son compatibles con el generador de páginas Elementor. No hay necesidad de escribir códigos. Por lo tanto, estos complementos facilitan la creación de elementos Flipbox visualmente atractivos e interactivos.

Preguntas frecuentes (FAQ)

¿Cómo se agrega un efecto de desplazamiento en WordPress?

Para agregar un efecto de desplazamiento en WordPress, puede utilizar CSS o complementos que ofrecen funciones de efecto de desplazamiento. Muchos creadores de páginas y complementos de personalización brindan opciones para agregar efectos de desplazamiento a varios elementos, incluidos Flipboxes.

¿Cómo se crea un flip box en WordPress?

Puede crear un flip box en WordPress utilizando complementos dedicados de Flipbox como ElementsKit. Estos complementos le permiten crear y personalizar elementos de Flipbox fácilmente sin necesidad de conocimientos de codificación.

¿Cómo se agrega una imagen flotante en WordPress?

Para agregar una imagen flotante en WordPress, puede usar CSS o complementos que proporcionan efectos flotantes de imagen. Estos complementos generalmente tienen opciones para especificar una imagen diferente o cambiar la apariencia al pasar el mouse sobre un elemento de imagen.

¿Cómo se muestra el contenido al pasar el mouse en WordPress?

Puede mostrar contenido al pasar el mouse en WordPress usando varios métodos. Una forma es usar CSS para mostrar contenido oculto al pasar el cursor sobre un elemento específico. Alternativamente, los complementos de Flipbox a menudo ofrecen opciones para mostrar diferentes contenidos en la parte delantera y trasera de Flipbox, visibles al pasar el mouse.

Envolver

Agregar superposiciones y desplazamientos de Flipbox a su sitio de WordPress puede mejorar significativamente la experiencia del usuario y hacer que su contenido sea más atractivo. Si sigue la guía paso a paso descrita en esta publicación de blog y utiliza complementos populares de Flipbox como ElementsKit, puede crear fácilmente impresionantes efectos de Flipbox sin ningún conocimiento de codificación. Así que continúe para darle vida a su sitio web con superposiciones y desplazamientos de Flipbox, y cautive a los visitantes de su sitio con contenido interactivo y visualmente atractivo.