✅Cómo Crear Flip Cards con Gutenberg sin Plugins Usando solo HTML y CSS

A veces solo quieres mostrar un efecto visual atractivo, como unas flip cards o cajas que giran al pasar el cursor, pero no quieres instalar un plugin más para hacerlo. Tal vez lo necesitas en una sola página, como en el Inicio, la sección de Contacto o una landing page, y no te compensa sobrecargar tu WordPress con más bloques de terceros.

Pues te alegrará saber que puedes hacerlo solo con HTML y CSS, usando un simple bloque HTML personalizado de Gutenberg. No necesitas instalar nada extra, ni modificar archivos del tema. Solo copiar, modificar, pegar y listo.

En este artículo te explico paso a paso cómo hacerlo, cómo modificar colores, iconos y cómo asegurarte de que se vea bien en todos los dispositivos.

¿Qué vamos a crear?

Vamos a construir un bloque que muestra 4 tarjetas (flip cards). Cada una tiene:

• Una cara frontal con un título y un icono SVG
• Una cara trasera con un texto descriptivo
• Un bonito efecto de giro en 3D al pasar el ratón por encima
• Diseño responsive para que se adapte a móviles y tablets

Paso 1: Inserta un bloque HTML en Gutenberg

Desde el editor de WordPress, haz clic en el botón de añadir bloque y selecciona «HTML personalizado». Ahí dentro puedes pegar todo el código que te dejo a continuación.

Paso 2: Código completo para las flip cards

<style>
.flip-card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 40px 0;
}

.flip-card {
  width: 250px;
  height: 300px;
  perspective: 1000px;
}

.flip-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease;
  transform-style: preserve-3d;
  position: relative;
}

.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

.flip-front, .flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 20px;
  backface-visibility: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flip-front {
  background-color: #13b0a0;
  color: #111518;
}

.flip-back {
  background-color: #f9fafb;
  color: #111518;
  transform: rotateY(180deg);
}

.flip-front svg {
  width: 48px;
  height: 48px;
  fill: #111518;
  margin-bottom: 15px;
}
</style>

<div class="flip-card-container">
  <div class="flip-card">
    <div class="flip-inner">
      <div class="flip-front">
        <!-- INNOVACIÓN -->
        <svg viewBox="0 0 24 24"><path d="M12 2C6.476 2 2 6.486 2 12s4.476 10 10 10 10-4.486 10-10S17.524 2 12 2zm0 18c-4.418 0-8-3.589-8-8 0-4.418 3.582-8 8-8s8 3.582 8 8c0 4.411-3.582 8-8 8z"/><path d="M13 7h-2v6h6v-2h-4z"/></svg>
        <h3>Innovación</h3>
      </div>
      <div class="flip-back">
        <p>Fomentamos la creatividad y la búsqueda de nuevas soluciones para transformar ideas en realidades que impacten positivamente en el entorno.</p>
      </div>
    </div>
  </div>

  <div class="flip-card">
    <div class="flip-inner">
      <div class="flip-front">
        <!-- VELOCIDAD -->
        <svg viewBox="0 0 24 24"><path d="M7 2v6h3v6h4l-5 8v-6H6l1-6H3z"/></svg>
        <h3>Velocidad</h3>
      </div>
      <div class="flip-back">
        <p>Nuestro equipo actúa con rapidez y eficacia, adaptándose a los cambios y ofreciendo resultados en tiempo récord sin comprometer la calidad.</p>
      </div>
    </div>
  </div>

  <div class="flip-card">
    <div class="flip-inner">
      <div class="flip-front">
        <!-- SEGURIDAD -->
        <svg viewBox="0 0 24 24"><path d="M12 2C7 2 4 5 4 9v4c0 5.25 4.8 9.09 8 9.95 3.2-.86 8-4.7 8-9.95V9c0-4-3-7-8-7zm0 2c3.35 0 6 2.61 6 5.83v4.02c0 3.78-3.13 6.66-6 7.72-2.87-1.06-6-3.94-6-7.72V9.83C6 6.61 8.65 4 12 4z"/><path d="M11 11h2v3h-2zm0-4h2v2h-2z"/></svg>
        <h3>Seguridad</h3>
      </div>
      <div class="flip-back">
        <p>Protegemos tus datos con las mejores prácticas de seguridad, asegurando privacidad y confianza en todos los procesos de desarrollo web.</p>
      </div>
    </div>
  </div>

  <div class="flip-card">
    <div class="flip-inner">
      <div class="flip-front">
        <!-- SOSTENIBILIDAD -->
        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2zm0 18a8 8 0 0 1-7.938-7h4.1a3.5 3.5 0 0 0 3.41 2.5 3.5 3.5 0 0 0 3.41-2.5h4.1A8 8 0 0 1 12 20zm0-8a1.5 1.5 0 1 1 1.5-1.5A1.502 1.502 0 0 1 12 12z"/></svg>
        <h3>Sostenibilidad</h3>
      </div>
      <div class="flip-back">
        <p>Creemos en el desarrollo responsable, utilizando tecnología eficiente y prácticas que minimicen el impacto ambiental a largo plazo.</p>
      </div>
    </div>
  </div>
</div>

Lenguaje del código: HTML, XML (xml)

¿Cómo modificar el diseño?

Cambiar el color del fondo frontal

Busca esta parte del CSS:

.flip-front {
  background-color: #13b0a0;
  color: #111518;
}

Puedes cambiar background-color por cualquier color hexadecimal, RGB o incluso un gradiente.

Por ejemplo:

background-color: #8b0000; /* burdeos */

Cambiar el icono SVG

Los iconos que ves están incrustados como SVGs inline, lo que significa que puedes cambiarlos fácilmente. Para conseguir más iconos SVG:

• Ve a https://heroicons.com/
• O a https://www.svgrepo.com/
• Copia solo el <svg>...</svg> y pégalo en lugar del actual.

Si usas SVGs simples en negro (fill="#000"), se adaptarán perfectamente al diseño.

¿Es responsive?

Sí. El bloque está diseñado para que se adapte automáticamente a distintos tamaños de pantalla:

• En pantallas grandes, se ven en fila horizontal
• En contenedores pequeños, tablets y móviles, se apilan o se ajustan con flex-wrap

Si quieres personalizar aún más el comportamiento en móvil, puedes agregar media queries, pero para la mayoría de los casos, este diseño se adapta sin problema.

¿Puedo duplicarlo y usarlo en otras páginas?

¡Claro! Solo copia el bloque HTML completo y pégalo en cualquier parte de tu sitio: página de inicio, sobre nosotros, contacto, etc. Gutenberg lo tratará como contenido estático sin necesidad de plugin adicional.

Conclusión

Con solo un poco de código HTML y CSS puedes crear flip boxes animadas en WordPress sin instalar ningún plugin. Es una solución ligera, personalizable y perfectamente compatible con Gutenberg.

Ya no tienes excusa para no mostrar tus valores, servicios o ideas de forma visualmente atractiva.