El widget Flip Box te ayuda a crear cuadros animados que se voltean hacia el otro lado una vez que los usuarios actúan. Puedes crear un flip box de Elementor al hacer clic y pasar el cursor sobre ambos. Puedes personalizar ambos lados del flip box usando este widget.

Cómo agregar el cuadro desplegable al sitio de WordPress usando ElementsKit #

Siga los pasos que se describen a continuación para agregar un cuadro desplegable a su sitio de WordPress con facilidad usando ElementsKit y Elementor:

Paso 1: habilite el widget de cuadro desplegable #

Navegar a ElementsKit ⇒ widgets ⇒ widget de caja plegable, enciende el widget, y haga clic en Guardar cambios.

Paso 2: arrastra y suelta el widget  #

Edite la página con la opción Editar con Elementor. Entonces buscar para el widget de flip box con el icono de Ekit y simplemente arrastra y suelta el widget en la pagina.

Paso 3. Personaliza la configuración  #

Expanda el menú Flip box para modificar las siguientes configuraciones:

• Voltear: Tiene cuatro opciones para voltear: Voltear hacia adentro, Acercar, Deslizar y 3D.
• Dirección de giro: Hay varias opciones disponibles para girar la dirección. Sin embargo, la opción aparecerá según el valor que seleccione para la opción Voltear.
• Activador de giro: Aquí puedes elegir la opción que activará el giro. Hay tres opciones disponibles: pasar el cursor, hacer clic en el cuadro y hacer clic en el botón.
• Altura de la caja abatible: Puede ajustar la altura del flip box usando esta opción.

En Altura del cuadro Flip, encontrará dos pestañas DELANTERO y TRASERO. Seleccione cualquiera de las opciones para personalizar los elementos del flip box para cada lado. Encontrarás la misma opción para ambos lados. 

Las opciones que puede personalizar para cada lado de la caja plegable incluyen: 

• Tipo de medio: Puedes elegir un icono o una imagen. También puede elegir la opción Ninguno si no desea agregar ningún archivo multimedia..
• Icono/Elegir archivo: Dependiendo de la opción que elijas para Tipo de medio, puedes elegir el ícono/imagen aquí. 
• Título: Proporcione un título.
• Subtitular: Puedes agregar un subtítulo aquí.
• Descripción del giro: Escriba una descripción relevante usando esta opción.
• Alineación: Puede configurar la alineación para que sea izquierda, central o derecha.

Una vez que haya terminado de preparar el contenido para ambos lados de su caja plegable, es hora de modificar el estilo. 

Paso 4: estiliza tu flip box #

Ahora vaya a la pestaña Estilo y expanda cada una de las secciones para modificar las opciones de estilo relacionadas:

Envoltura: Debajo del envoltorio, puede personalizar el tipo de fondo, el color, la ubicación, el segundo color, la ubicación, el tipo, el ángulo, etc. Puede personalizar las opciones tanto para el frente como para la parte posterior de la caja plegable.

Icono: Si expande esta opción, puede modificar el color, el tipo de fondo, la sombra del cuadro, el tipo de borde, etc., tanto para la vista normal como para la vista flotante. Puede personalizar el estilo del icono tanto para la parte delantera como para la trasera del cuadro desplegable.

Título: Aquí puede personalizar la tipografía, el color del título y el margen del título para ambos lados del flip box.

Subtitular: Amplíe esta opción para personalizar la tipografía, el color del título y el margen del subtítulo para ambos lados del cuadro desplegable.

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 flip box.

Botón: Expanda la sección del botón para personalizar el color del texto, el color de fondo, el tipo de borde, el radio del borde, el cuadro del borde y muchas más opciones. Puede diseñar el botón tanto para la vista normal como para la vista flotante.

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