Ir al contenido principal

¿Cómo adaptar una plantilla para que se vea bien en Escritorio y en Móvil (duplicando filas)?

En este artículo te mostramos cómo duplicar filas dentro de una plantilla para ajustar su diseño y asegurar una visualización clara y ordenada en escritorio y en dispositivos móviles, sin perder información ni estructura.

Cuándo usar este método

Úsalo si al pasar a móvil notas alguno de estos problemas:

  • Títulos, precios o botones quedan desplazados hacia un lado.

  • Los elementos quedan desalineados respecto a las imágenes.

  • Si hay varios productos, quedan demasiado juntos al apilarse.

Paso a paso

1) Volver al editor y ubicar la fila con el problema

  1. Abre el editor.

  2. Desplázate hasta la sección donde está la fila (por ejemplo, una fila con productos).

  3. Confirma que actualmente hay una sola fila que se usa tanto para escritorio como para móvil.

2) Duplicar la fila

  1. Clona o duplica la fila completa.

  2. Ahora tendrás dos filas iguales una debajo de la otra.

3) Configurar visibilidad por dispositivo (Disposición / Ocultar en…)

Este es el paso clave.

  1. Selecciona la fila completa (no el texto ni el botón; haz clic fuera de los elementos hasta que quede seleccionada la fila).

  2. Ve a la sección Disposición (Layout).

  3. Busca la opción “Ocultar en”.

Configuración recomendada:

  • Fila 1 (arriba): ocultarla en Escritorio

    • Resultado: se verá solo en Móvil

  • Fila 2 (abajo): ocultarla en Móvil

    • Resultado: se verá solo en Escritorio

De esta forma:

  • La fila de escritorio queda como estaba (si ya se veía bien).

  • La fila de móvil se puede ajustar sin afectar la versión de escritorio.

4) Ajustar la versión Móvil

Para editar con mayor claridad:

  1. En la parte superior izquierda, cambia la vista a Móvil (modo de visualización/edición móvil).

  2. En la fila visible en móvil, aplica ajustes típicos como:

    • Centrar títulos

    • Centrar precios

    • Centrar el botón

Opcional

5) Agregar separadores cuando hay más de un producto

Si en móvil se apilan varios productos y quedan demasiado juntos:

  1. Agrega un contenido tipo Separador debajo del botón (o entre productos).

  2. Elige un color.

  3. Ajusta el grosor del separador según el diseño.

Esto ayuda a diferenciar claramente cada producto cuando se apila en móvil.

6) Validar con la vista previa

  1. Abre la vista previa.

  2. Selecciona un perfil y visualiza.

  3. Verifica:

    • En Escritorio: no debería cambiar nada (solo duplicaste la fila).

    • En Móvil: debería verse alineado y ordenado.

Resultado final esperado

Tendrás:

  • Una configuración exclusiva para Móvil

  • Otra configuración exclusiva para Escritorio

Así el diseño se adapta correctamente en ambas versiones.

Artículos relacionados
¿Cómo crear y personalizar una fila dinámica de productos en una plantilla de email?
¿Ha quedado contestada tu pregunta?