Convertir CSS

La conversión de estilos es deliberadamente conservadora: BricksShift migra estructura, contenido y media, pero no los estilos visuales detallados de Elementor.

Por qué no migramos estilos detallados

Elementor guarda los estilos en un formato propio, acoplado a su sistema de controles por widget. Replicarlos en Bricks de forma fidedigna implicaría:

  • Reproducir la cascada propietaria de Elementor (tablets, móviles, hover, custom breakpoints).
  • Traducir centenas de controles a CSS equivalente por cada widget.
  • Aceptar incompatibilidades sutiles que degradan el resultado.

El camino realista es aprovechar la migración para limpiar técnica y visualmente el sitio: re-estilar en Bricks con clases globales y variables.

Qué sí conserva BricksShift

  • Jerarquía semántica: h1, h2, párrafos, listas.
  • Atributos HTML esenciales: enlaces, targets, alt de imágenes, IDs.
  • Clases anidadas con hash estable para referencia.
  • IDs de adjuntos (media library intacta).

Qué se rehace en Bricks

  • Tipografía (fuentes, pesos, tamaños).
  • Colores y backgrounds.
  • Spacing fino (margin, padding por widget).
  • Shadows, transitions, hover states.
  • Responsive (se reescribe con los breakpoints del proyecto).

Estrategia recomendada

  1. Tokens del proyecto en Bricks antes de migrar: define colores, tipografía y spacing globales con el Design System del sitio.
  2. Clases reutilizables: .btn, .heading, .section-padding. FlowKit y FDS tienen un catálogo aprovechable.
  3. Primera pasada estructural: revisar que la migración dejó la jerarquía correcta.
  4. Segunda pasada visual: aplicar clases y variables globales. Mucho más rápido que reestilar widget por widget.
<!-- Post-migración, en Bricks -->
<section class="section-padding">
  <div class="container">
    <h2 class="heading">Título</h2>
    <p class="text-medium">Contenido...</p>
  </div>
</section>

Oportunidad, no pérdida

Los clientes que migran de Elementor a Bricks suelen tener CSS acumulado por años con inconsistencias. Reconstruir el estilo desde cero con clases globales es un upgrade, no una regresión.

Qué no migra

  • CSS custom introducido en el panel de Elementor por widget.
  • Animaciones y efectos propietarios de Elementor.
  • Global Colors / Fonts de Elementor (se registran de nuevo en Bricks).
  • Theme Styles del theme builder Pro.