Si está buscando un tutorial sobre cómo crear flip boxes en WordPress, tenemos una guía completa para usted.
Lo que necesitas es seguir cómo puedes crear una desde cero. Pero antes de eso, vamos a aprender algunos detalles acerca de cajas flip.
¿Qué es un Flip box en WordPress?
A caja abatible en WordPress es un elemento de contenido interactivo que combina texto e imágenes con un efecto de animación.
Suele tener dos caras. Se suele utilizar para presentar texto de forma creativa combinado con un hipnótico efecto flip.
La gente añade flip boxes porque son un elemento atractivo e interactivo muy recomendable para captar la atención de los visitantes de inmediato.
Veamos ahora otros escenarios relacionados con las cajas Flip.
Cree bonitas mesas
Con el editor de bloques
¿Por qué utilizar Flip Boxes en sitios web WordPress?
Las cajas volteables son un poderoso elemento de diseño que puede elevar el contenido de su WordPress de varias maneras. A continuación te explicamos por qué merece la pena utilizarlas:
- Captar la atención: Las cajas abatibles captan la atención de los visitantes como un imán y despiertan su curiosidad, animándoles a seguir explorando.
- Destaque la información clave: Los recuadros abatibles le permiten presentar detalles significativos con precisión en el anverso y ofrecer explicaciones o más detalles en el reverso, lo que hace que el contenido sea más completo.
- Presente a Conent con elegancia: Los flip boxes le permiten presentar su contenido con elegancia. En lugar de texto plano o cuadros estáticos, los flip boxes ofrecen una forma elegante de presentar servicios, perfiles de equipo, CTA, etc.
Ahora que ha aprendido algunos beneficios de usar flip boxes en su sitio web, nos dirigiremos a nuestro tutorial principal a continuación.
Cómo crear Flip Boxes en WordPress
Dado que WordPress no dispone de un bloque central para crear un flip box, utilizaremos un plugin de terceros llamado Flipbox.
Flipbox tiene una colección de geniales efectos CSS3 plugin para hacer flipboxes más atractivo. Funciona con cualquier page builder y es responsive por defecto.
Paso 1: Instalar el Flipbox
El primer paso es instalar el plugin Flipbox accediendo al panel de control de tu sitio web. A continuación, vaya a Plugins (1) > Añadir nuevo plugin (2). Buscar en Flipbox (3) y instalar el plugin (4).
No olvide activar el plugin después de la instalación.
Paso 2: Cree sus Flip Boxes
Ahora haga clic en Caja abatible (1) y Crear nuevo después (2).
Selecciona cualquier estilo que te guste de la página y haz clic en "Crear estilo". Si te desplazas hacia abajo, podrás ver numerosos estilos.
Dar un nombre a tu flip box (1)y seleccione número de diseño. En diseños están en el Estilos que ha visto anteriormente (Cada Estilo tiene tres disposiciones). Por último, haga clic en el botón Guardar botón (3).
Paso 3: Personalice su Flip Box
Todas las opciones son de personalización. Personalícelas según sus necesidades. La vista previa se muestra a continuación en la misma página.
Seleccione la opción "Abrir cajas abatibles de" para insertar su contenido.
Introduzca el Título delantero (1) y Icono frontal (2)y, por último, haga clic en Cargar imagen cargar una imagen para la portada (3).
Desplácese hacia abajo en la misma página e introduzca la dirección Información de fondo o texto detallado del contenido (1) y el Texto del botón Backend (2). También puede introducir el enlace de botón si quieres (3). Después de eso, debe establecer una imagen para la Imagen de Fondo del Backend haciendo clic en el botón "Cargar imagen” (4).
Después de configurar todo, pulsa el botón "Enviar"Botón (1).
Puede añada más casillas si lo desea. Siga las directrices del "Paso 3" repetidamente para añadir más flip boxes al flip box actual.
También puede editar o eliminar tus flip boxes también. Puedes ver las opciones llevando el cursor a los flip boxes.
Después de toda la edición y personalización, haz clic en "Artículo por filas” (1) para definir el número de cuadros que desea mostrar a la vez por fila. He seleccionado tres elementos porque quiero mostrar tres elementos por fila. Ahora, pulse el botón Enviar botón (2).
A continuación, deberá guardar su Flip Box. Haga clic en el botón Guardar (1).
Paso 4: Inserte el Flip Box Shortcode
Ir a Caja abatible (1) y copiar el shortcode (2).
Vaya a las entradas o páginas en las que desea mostrar el cuadro de rotación. Para ello, vaya a Mensajes (1) > Todos los mensajes (2) y editar ese mensaje o página (3). N.B. Lo mismo ocurre para editar una página, pero hay que ir a Páginas > Todas las páginas primero.
Para insertar el cuadro de simetría, debe insertar el botón Bloque de código cortohaga clic en el icono "+" (Añadir icono de bloque) del editor (1) y escriba "Código corto" en la casilla de búsqueda (2). Haga clic en el botón "Código corto" para insertarlo en el editor(3).
Ahora pega el shortcode (1) y guarda o publica tu post o página.
A continuación se muestra la demostración.
Reflexiones finales
Crear flip boxes en WordPress es una forma sencilla de mejorar el diseño y la interacción de su sitio web. Los flip boxes son un añadido sencillo que puede dejar una impresión duradera en tu audiencia.
Siguiendo estos pasos, puede integrar fácilmente elementos dinámicos y visualmente atractivos que tengan un aspecto profesional y mejoren la forma en que los visitantes interactúan con su contenido.
Espero que las directrices hayan sido fáciles de seguir. Pero si te has encontrado con alguna dificultad, házmelo saber en la sección de comentarios más abajo. Me encantará ayudarte.
Además, no olvides compartir el tutorial con tus amigos a través de las redes sociales.
Seguir leyendo
- Cómo añadir un cuadro de revisión a las entradas/páginas de WordPress de 2 formas sencillas
- Cómo hacer que un encabezado de tabla sea adhesivo en WordPress (3 sencillos pasos)
- Cómo cambiar el color del botón Hover en WordPress en 3 sencillos pasos
- Cómo crear una tabla adaptable en WordPress
- Cómo añadir un botón de alternancia a su sitio de WordPress
