Elementor es un potente creador de páginas que le permite crear sitios web impresionantes con facilidad y su widget básico Flipbox ofrece una forma sencilla de agregar efectos 3D interactivos. ¿El problema? Es una característica profesional, los diseños y animaciones son limitados.
Master Addons es un potente complemento de Elementor que también proporciona un widget flipbox. Es gratuito y permite una mayor personalización que el widget Elementors Flipbox.
Con los complementos maestros, puede crear flipboxes 3D visualmente impactantes que mueven, transforman e involucran a los usuarios de maneras que el widget Elementor predeterminado simplemente no puede.
En esta guía, le mostraremos cómo crear flipboxes 3D de primer nivel con complementos maestros y crear diseños llamativos que se destacan.
Creación de un Flipbox Elementor 3D con complementos maestros
Vayamos ladrillo a ladrillo y creemos el nuestro caja abatible usando Complementos maestros. Al final, deberías tener una comprensión muy clara de cómo crear el tuyo único.
Paso 1: instalación de complementos maestros para Elementor
Antes de poder comenzar a usar el widget Flipbox de complementos maestros, deberá hacerlo instalar y activar el complemento Master Addons. Así es como:
1. En su panel de WordPress, vaya a Complementos > Agregar nuevo.
2. Busque “Complementos maestros para Elementor” en la barra de búsqueda.
3. Haga clic Instalar ahora y luego Activar una vez instalado el complemento.
Una vez activados, los widgets de complementos maestros, incluido Flipbox, estarán disponibles en el editor Elementor.
Paso 2: Agregar el widget Flipbox
Ahora que el complemento está instalado, agreguemos Flipbox a su página
1. Abra su página en el editor Elementor. Elija Flexbox o grid como diseño.
2. En el panel izquierdo, busque el Caja abatible. Deberías ver un widget Flipbox con un “MAMÁ” etiqueta.
3. Arrastra y suelta el Caja abatible widget en la sección deseada de su página. Lo importante a tener en cuenta aquí es que siempre que trabajes con flipboxes lo es recomendado para utilizar Flexbox para asegurarte de que tus flipboxes se vean bien.
Una vez agregado, aparece un diseño básico de flipbox en su lienzo, listo para ser personalizado.
Paso 3: Creando un Flipbox Elementor 3D
Ahora hemos alcanzado la configuración que puedes modificar para obtener un efecto 3D de aspecto premium en tu flipbox.
Primero.
1. Estilo preestablecido
En el estilo preestablecido configuraste el variación de diseño y estilo de animación
La variación de diseño te permite personalizar el frente de tu caja. Puedes configurarlo en: Predeterminado o Icono frontal gratis, y Imagen frontal o Diagonal con Pro.
Con el estilo de animación puedes elegir exactamente cómo se animará tu flipbox.
Master Addons tiene 22 animaciones: 6 en el complemento gratuito y 16 más, incluidos los efectos Cube y 3D Flip, con Master Addons Pro. Desde un simple giro horizontal y vertical hasta 3D Flip, animaciones de cubos, efectos de vuelco, etc.
Master Addons te ofrece una animación flip 3D dedicada que le da a tus flipboxes una sensación dinámica. Incluso puedes personalizar el estilo flip de esta animación. Una vez que lo elijas, aparecerá una nueva opción en el “Estilo” pestaña en Configuración general: Estilo de volteo 3D.
2. Contenido frontal
Haga clic en el Caja abatible widget para editarlo.
Bajo el Contenido tab, verás campos para agregar tu contenido para el Frente Caja. Puede agregar un encabezado, una descripción y una imagen o ícono aquí.
3. Contenido anterior
Desplácese hacia abajo hasta el Contenido anterior sección en la misma Contenido pestaña.
De manera similar, agregue el contenido que desea que aparezca cuando se voltee el flipbox. Puede agregar un nuevo encabezado, texto o un botón de llamada a la acción.
Puedes diseñar ambos lados de la flipbox por separado, usando Estilo pestaña para ajustar fuentes, colores, relleno, bordes y más para cada lado.
Paso 4: mejorar los Flipboxes 3D con otras extensiones
Master Addons para Elementor no se limita sólo a la funcionalidad básica de flipbox: lleva tu flipbox a un nivel completamente nuevo con una variedad de extensiones diseñadas para agregar interactividad, animaciones fluidas y efectos atractivos.
Exploraremos las potentes funciones que le permitirán mejorar su flipbox, haciéndolo más dinámico, visualmente cautivador y fácil de usar.
Ya sea que desee crear transformaciones 3D avanzadas, agregar efectos de paralaje o ajustar las animaciones de entrada, Master Addons ofrece todo lo que necesita para llevar sus flipboxes al siguiente nivel.
Transformă:
- En el Avanzado tab, encontrarás el Transforma configuración.
- Aquí puede ajustar el rotación flipbox en los ejes X, Y o Z para crear efectos 3D más complejos.
- Juega con escala, traducir, y sesgar opciones para una flipbox aún más dinámica.
Rellax (efecto paralaje):
- Para habilitar el efecto Rellax, vaya a Avanzado pestaña y desplácese hasta el Reláx configuración.
- Habilite el efecto y ajuste el velocidad de desplazamiento para crear un efecto de paralaje, donde el flipbox se mueve a una velocidad diferente al resto del contenido a medida que los usuarios se desplazan.
Efectos flotantes:
- Agregue efectos flotantes (Pro) para que la caja plegable se desvíe suavemente en un bucle. Esta opción se puede encontrar debajo de Efectos de movimiento sección.
- Elige el tipo de movimiento (por ejemplo, flotando hacia arriba o hacia abajo) y ajusta la intensidad a tu gusto.
Información sobre herramientas:
- Los complementos maestros también te permiten agregar Información sobre herramientas a su flipbox, que aparece cuando los usuarios pasan el cursor sobre elementos. Tooltips puede proporcionar información o contexto adicional sin saturar su diseño.
- Puede habilitar y personalizar información sobre herramientas para el contenido frontal y posterior del flipbox en Configuración avanzada.
- Personalice el texto de la información sobre herramientas, la posición (arriba, abajo, izquierda o derecha) y el estilo (colores, tamaño de fuente) para que se ajuste a su diseño.
Algunas otras extensiones útiles
- Bajo el Efectos de movimiento pestaña, habilitar Animación de entrada para aplicar un efecto llamativo cuando aparece el flipbox en la página.
- Puede elegir entre varias animaciones como desvanecimiento, diapositiva o rebote para que su flipbox explote cuando ingrese a la ventana gráfica.
- Reveal (Pro) limpia un bloque de color en la flipbox una vez cuando se desplaza hacia la vista. Encender Revelación habilitada en el widget Avanzado pestaña.
- Se ejecuta en la entrada de la página, no en el flip, y puede configurar la dirección, la velocidad, el retardo y el color del bloque.
- Usar Condiciones de visualización para establecer reglas sobre cuándo y dónde aparece el flipbox. Puede controlar la visibilidad según los tipos de dispositivos (escritorio, tableta, móvil) o incluso condiciones como la posición de desplazamiento.
Vista previa y finalización de su Flipbox
Una vez que hayas personalizado tu flipbox, es hora de verlo en acción.
- Haga clic en el icono ojo en la parte inferior del panel Elementor para obtener una vista previa de su flipbox en el editor.
- Pruebe cómo se comporta la flipbox en diferentes dispositivos (escritorio, tableta y móvil) para asegurarse de que responda y se vea genial en todas partes.
- Realice cualquier ajuste final en el diseño, las velocidades de animación o la posición hasta que esté satisfecho con su apariencia.
Una vez satisfecho, haga clic Publicar para que su flipbox esté disponible en su sitio.
Conclusión
Master Addons para Elementor agrega más sabor a la experiencia flipbox estándar, ofreciendo una gama de funciones avanzadas que le permiten crear diseños interactivos y verdaderamente dinámicos.
Para combinar con los efectos de animación 3D, hay opciones como transformaciones, efectos de paralaje, transiciones de revelación suaves y más, que puedes usar para darle vida a tus flipboxes de maneras que van más allá de las animaciones básicas.
Siguiendo esta guía, puede agregar fácilmente flipboxes llamativos a su sitio, mejorando tanto la participación del usuario como el atractivo visual. Entonces, sumérgete en Master Addons y comienza a experimentar para crear impresionantes flipboxes 3D que impresionarán a tus visitantes!
