¿Cómo crear secciones alternadas de texto e imagen en el Editor de bloques de Waclis?

Las secciones alternadas de texto e imagen permiten explicar diferentes características, servicios, procesos o beneficios mediante una secuencia visual fácil de recorrer.

Una composición habitual puede verse así:

SECCIÓN 1

[       TEXTO       ][       IMAGEN       ]

SECCIÓN 2

[       IMAGEN      ][       TEXTO        ]

SECCIÓN 3

[       TEXTO       ][       IMAGEN       ]

Esta alternancia ayuda a generar ritmo visual y evita que una página extensa parezca formada por bloques idénticos.

Pero existe un problema frecuente.

Si la estructura se construye únicamente pensando en desktop, en celular puede terminar así:

TEXTO 1
IMAGEN 1

IMAGEN 2
TEXTO 2

TEXTO 3
IMAGEN 3

La segunda sección comienza mostrando una imagen antes de explicar qué representa.

En muchos casos puede ser más lógico que mobile mantenga:

TEXTO 1
IMAGEN 1

TEXTO 2
IMAGEN 2

TEXTO 3
IMAGEN 3

aunque visualmente en desktop tengamos:

TEXTO | IMAGEN

IMAGEN | TEXTO

TEXTO | IMAGEN

En este tutorial aprenderás a:

• planificar correctamente estas secciones;

• definir el orden lógico antes del diseño;

• utilizar Section;

• utilizar Container;

• utilizar Grid Row;

• elegir 6+6, 5+7 o 7+5;

• trabajar con Image;

• decidir cuándo utilizar Background Image;

• mantener un ritmo visual consistente;

• clonar una sección base;

• crear variantes sin duplicar todo el CSS;

• evitar IDs repetidos;

• trabajar el responsive;

• evitar Position absolute y márgenes rígidos;

• utilizar alternancia sin comprometer la lectura;

• probar correctamente desktop, tablet y celular.

¿Cuándo conviene utilizar texto + imagen?

Este patrón funciona especialmente bien para explicar:

• características;

• servicios;

• etapas;

• soluciones;

• funcionalidades;

• productos;

• casos de uso;

• ventajas;

• procesos.

Ejemplo

GESTIONA TUS PRODUCTOS

Administra información, imágenes y contenido desde un único entorno.

[ IMAGEN DEL SISTEMA ]

Después:

[ IMAGEN ]

PERSONALIZA TU PÁGINA WEB

Adapta contenidos y diseño según las necesidades de tu empresa.

Después:

AUTOMATIZA TAREAS

Simplifica procesos repetitivos...

[ IMAGEN ]

La alternancia crea continuidad

Sin alternancia:

TEXTO | IMAGEN

TEXTO | IMAGEN

TEXTO | IMAGEN

también puede funcionar.

Alternar no es obligatorio

No debes alternar solo porque:

“se suele hacer”.

La alternancia tiene sentido cuando mejora

• ritmo;

• lectura;

• relación entre bloques.

Primera regla

El orden del contenido debe tener sentido antes de comenzar a alternar visualmente.

No diseñes primero desktop

y recién después preguntes:

“¿cómo hago para arreglarlo en celular?”

Piensa primero en el documento

Por ejemplo:

1. TÍTULO A
2. TEXTO A
3. IMAGEN A

4. TÍTULO B
5. TEXTO B
6. IMAGEN B

7. TÍTULO C
8. TEXTO C
9. IMAGEN C

Ese puede ser el orden lógico

Aunque desktop muestre:

A TEXTO | A IMAGEN

B IMAGEN | B TEXTO

C TEXTO | C IMAGEN

¿Qué vamos a construir?

Crearemos tres Sections.

Sección 1

┌─────────────────────────────────────────────────────┐
│                                                     │
│ TEXTO                              IMAGEN            │
│                                                     │
│ Título                                               │
│ Descripción                                          │
│ CTA                                                  │
│                                                     │
└─────────────────────────────────────────────────────┘

Sección 2

┌─────────────────────────────────────────────────────┐
│                                                     │
│ IMAGEN                             TEXTO             │
│                                    Título            │
│                                    Descripción       │
│                                    CTA               │
│                                                     │
└─────────────────────────────────────────────────────┘

Sección 3

┌─────────────────────────────────────────────────────┐
│                                                     │
│ TEXTO                              IMAGEN            │
│                                                     │
└─────────────────────────────────────────────────────┘

En celular

buscaremos mantener:

TEXTO A
IMAGEN A

TEXTO B
IMAGEN B

TEXTO C
IMAGEN C

cuando ese orden sea el más lógico para el contenido.

Estructura base

Una Section puede organizarse conceptualmente así:

Section
└── Container
    └── Grid Row
        ├── Column Text
        │   ├── Paragraph
        │   ├── Heading
        │   ├── Paragraph
        │   └── Link
        └── Column Image
            └── Image

Esta será nuestra sección base

Después crearemos variantes.

Paso 1. Define el contenido antes de maquetar

Para cada sección escribe primero:

Texto superior:
[...]

Heading:
[...]

Descripción:
[...]

CTA:
[...]

Imagen:
[...]

Ejemplo A

Texto superior:
GESTIÓN CENTRALIZADA

Heading:
Administra tu contenido desde un solo lugar

Descripción:
Organiza la información de tu Página web y mantén actualizados los contenidos desde tu panel de autogestión.

CTA:
Conocer más

Ejemplo B

Texto superior:
PERSONALIZACIÓN

Heading:
Adapta la Página web a la identidad de tu empresa

Descripción:
Combina herramientas visuales y opciones de personalización para construir una experiencia coherente con tu marca.

CTA:
Ver opciones

Ejemplo C

Texto superior:
CRECIMIENTO

Heading:
Amplía tu Página web a medida que evoluciona tu negocio

Descripción:
Incorpora nuevas secciones y herramientas según las necesidades de cada etapa.

CTA:
Explorar posibilidades

Estos textos son ejemplos

Debes utilizar información real correspondiente a tu Página web.

Paso 2. Verifica que cada bloque represente una idea

Cada Section debería desarrollar:

una idea principal

No intentes incluir en una misma sección:

Diseño
+
Hosting
+
Pagos
+
Soporte
+
Marketing

sin una relación clara.

Mejor:

Section 1
Diseño

Section 2
Gestión

Section 3
Automatización

El patrón alternado funciona porque cada unidad es fácil de identificar.

Paso 3. Crea la primera Section

Dentro del Editor de bloques agrega una:

Section

Para este ejemplo utiliza:

Container width:
Boxed

Y:

Container height:
Auto

No necesitamos una Height fija.

Queremos que la Section se adapte al contenido.

Paso 4. Revisa Navigator

Antes de agregar componentes

abre:

Navigator

Comprueba qué estructura ya existe.

No agregues varios Containers sin revisar.

Idealmente queremos algo conceptualmente similar a:

Section
└── Container

Después:

Grid Row

Evita:

Container
└── Container
    └── Container

si no existe una razón.

Paso 5. Agrega Grid Row

Añade:

Grid Row

Necesitaremos dos Columns.

Para comenzar puedes utilizar:

6 + 6

Resultado:

[       TEXTO       ][       IMAGEN       ]

Paso 6. ¿6+6, 5+7 o 7+5?

No siempre necesitas dos columnas iguales.

6 + 6

[     TEXTO     ][     IMAGEN     ]

Es equilibrado.

7 + 5

[        TEXTO        ][   IMAGEN   ]

Puede ser útil cuando:

• el Heading es largo;

• el texto necesita más espacio.

5 + 7

[   TEXTO   ][        IMAGEN        ]

Puede ser útil cuando:

• la imagen necesita protagonismo.

No cambies la proporción solamente por estética

Pregunta:

¿Qué parte necesita realmente más espacio?

Para este ejemplo

utilizaremos:

6 + 6

como base.

Más adelante veremos variantes.

Paso 7. Configura Vertical align

Queremos evitar:

TEXTO arriba

mientras la imagen ocupa una gran altura

si visualmente deberían relacionarse.

Selecciona Grid Row

y utiliza:

Vertical align

Puedes buscar una alineación centrada

cuando corresponda.

Así:

       ┌──────────────┐
TEXTO  │              │
       │    IMAGEN    │
       │              │
       └──────────────┘

No utilices:

margin-top: 150px;

para centrar el texto.

Ese valor se romperá al cambiar:

• tamaño de imagen;

• cantidad de texto;

• pantalla.

Paso 8. Agrega el texto superior

Dentro de la primera Column agrega:

Paragraph

Ejemplo:

GESTIÓN CENTRALIZADA

Puedes personalizarlo con:

• Font size menor;

• Font weight;

• Letter spacing.

No lo conviertas automáticamente en Heading.

Paso 9. Agrega el Heading

Debajo agrega:

Heading

Si estas secciones dependen de un H1 principal

normalmente pueden utilizar:

H2

Por ejemplo:

H1
Página principal

    H2
    Administra tu contenido...

    H2
    Adapta tu Página web...

    H2
    Amplía tu Página web...

Dependiendo de la jerarquía real de tu página

puede corresponder otro nivel.

No elijas el nivel únicamente por apariencia.

Paso 10. Agrega el Paragraph

Debajo del Heading:

Paragraph

Mantén una extensión razonable.

Una sección de dos columnas funciona mejor con:

1–2 párrafos breves

que con:

12 párrafos

Si necesitas más detalle:

puedes utilizar:

• otra Section;

• List;

• página específica.

Paso 11. Agrega un Link

Si necesitas una acción:

agrega:

Link

Por ejemplo:

Conocer más →

Configura:

Url

con el destino real.

No dejes:

#

Si no existe un destino real

no agregues un CTA falso.

Paso 12. Agrega la Image

Dentro de la segunda Column agrega:

Image

Selecciona:

Set Image

Configura:

• Width;

• Height;

• Alt;

• Align;

según corresponda.

Paso 13. Elige una imagen directamente relacionada

Si la sección explica:

gestión de contenidos

puede ser apropiada:

• captura del panel;

• ilustración del proceso;

• visual del producto.

Evita una imagen genérica sin relación.

Paso 14. Completa Alt

Ejemplo:

Panel de gestión utilizado para editar el contenido de una Página web

si realmente describe la imagen.

No utilices:

imagen de servicio

Paso 15. Define la proporción visual

Cuando vas a alternar varias secciones

la consistencia de las imágenes se vuelve especialmente importante.

Evita:

Sección 1:
imagen 16:9

Sección 2:
imagen vertical

Sección 3:
imagen cuadrada enorme

sin una intención.

Puede romper el ritmo.

Puedes decidir un tratamiento visual común.

Por ejemplo:

todas las capturas dentro de un marco similar

O:

todas las fotografías con una relación visual parecida

No significa que deban ser archivos idénticos en dimensiones.

El objetivo es coherencia.

Paso 16. Cover vs Contain

Si muestras una captura completa:

Contain

puede ser más apropiado.

Si muestras fotografía dentro de una caja definida:

Cover

puede funcionar.

Pero recuerda

Cover puede recortar.

No lo utilices para:

• capturas con información;

• productos que necesitan verse completos;

sin comprobar el resultado.

Paso 17. Define el espacio general

La Section necesita:

• Padding top;

• Padding bottom.

Por ejemplo

puedes comenzar conceptualmente con:

72px

arriba y abajo.

No es obligatorio.

Lo importante es mantener un ritmo consistente entre las tres Sections.

Si cada una utiliza:

72
40
110

sin una razón

la secuencia puede sentirse irregular.

Paso 18. Crea una Class base

A la Section puedes asignar:

content-feature-section

Esta Class puede ser compartida por todas las Sections de este patrón.

Eso permite mantener:

• Padding;

• Typography;

• imágenes;

• espacios.

Por ejemplo:

.content-feature-section {
    /* estilos compartidos */
}

No necesitas un ID diferente para el diseño.

Paso 19. Crea Classes internas si las necesitas

Por ejemplo:

content-feature-text

Y:

content-feature-image

Solo si realmente necesitas CSS específico.

No agregues Classes por obligación.

Paso 20. Guarda la primera sección como referencia visual

Antes de clonar:

comprueba que la primera Section funcione correctamente.

Revisa:

• desktop;

• tablet;

• mobile;

• Link;

• Image.

Solo después:

clona.

No clones una estructura que todavía tiene errores

porque multiplicarás el problema.

Paso 21. Clona la Section completa

Selecciona:

Section

mediante Navigator.

Utiliza:

Clonar

Ahora tendrás:

Section A
Section A copia

La copia conservará:

• estructura;

• componentes;

• estilos.

Debes reemplazar el contenido.

Paso 22. Actualiza todo el contenido de la copia

Revisa:

• texto superior;

• Heading;

• Paragraph;

• CTA;

• URL;

• Image;

• Alt;

• IDs.

No cambies solo:

Heading

Error frecuente

Original:

GESTIÓN

Ver más →
/gestion

Copia:

PERSONALIZACIÓN

Ver más →
/gestion

La URL quedó incorrecta.

Paso 23. Revisa IDs duplicados

Si la primera Section tenía:

id="gestion"

la copia no debe conservarlo.

Puedes utilizar:

id="personalizacion"

si necesitas un enlace interno.

Si no necesitas ID:

puedes dejarlo vacío.

Classes sí pueden mantenerse.

Paso 24. ¿Cómo alternamos visualmente la segunda Section?

Aquí aparece el punto central.

Tenemos dos objetivos:

Desktop:

[ IMAGEN ][ TEXTO ]

Mobile:

queremos posiblemente:

TEXTO

IMAGEN

Existen diferentes estrategias.

La mejor depende de la estructura final.

Estrategia A: mantener orden lógico en HTML y modificar orden visual en desktop

Conceptualmente el Navigator podría mantener:

Grid Row
├── Column Texto
└── Column Imagen

Mobile:

Texto
Imagen

Desktop podemos invertir visualmente la ubicación de las Columns mediante la configuración disponible o una técnica CSS cuidadosamente localizada.

Esta estrategia conserva:

orden lógico

en el documento.

Puede ser útil cuando el texto debería leerse primero en mobile.

Importante

No afirmaremos un control específico de order en el panel si no aparece en tu versión.

Si el Grid disponible permite reorganizarlo sin alterar el orden lógico

puedes utilizarlo.

Si no

puede utilizarse CSS localizado.

Estrategia B: cambiar directamente el orden de las Columns

Navigator:

Grid Row
├── Column Imagen
└── Column Texto

Desktop:

IMAGEN | TEXTO

Pero mobile:

IMAGEN
TEXTO

Esto puede ser correcto

si la imagen necesita presentarse antes.

No está mal por definición.

Pregunta:

¿Qué debería conocer primero el visitante en celular?

Elige según el contenido.

No existe una obligación absoluta de texto primero.

Paso 25. ¿Cuándo es lógico mostrar imagen primero en mobile?

Por ejemplo

si la imagen es:

• producto principal;

• resultado;

• elemento que debe observarse antes de la explicación.

Podría ser:

IMAGEN DEL PRODUCTO

Nombre
Descripción

Esto tiene sentido.

Pero si la imagen es simplemente decorativa:

puede ser mejor:

TÍTULO
EXPLICACIÓN
IMAGEN

La semántica decide.

Paso 26. No alteres el orden solo por alternancia

Este es uno de los errores principales.

Desktop:

TEXTO | IMAGEN
IMAGEN | TEXTO
TEXTO | IMAGEN

se ve visualmente atractivo.

Pero mobile:

TEXTO
IMAGEN

IMAGEN
TEXTO

TEXTO
IMAGEN

puede provocar:

dos imágenes seguidas

entre el final de una Section y el comienzo de otra.

Por ejemplo:

Texto A
Imagen A
Imagen B
Texto B

Puede resultar confuso.

El visitante puede no saber:

¿la segunda imagen pertenece a la sección anterior o a la siguiente?

Por eso

la alternancia visual de desktop no debería diseñarse ignorando mobile.

Paso 27. Patrón mobile recomendado cuando el texto introduce cada bloque

TEXTO A
IMAGEN A

TEXTO B
IMAGEN B

TEXTO C
IMAGEN C

Esto mantiene una secuencia clara.

Cada Section se entiende como:

EXPLICACIÓN
↓
RECURSO VISUAL

Paso 28. Variante con CSS de orden

Si necesitas conservar el orden HTML:

texto
imagen

pero invertir únicamente desktop,

puedes utilizar Classes específicas.

Por ejemplo:

Section base:

content-feature-section

Variante invertida:

content-feature-section content-feature-section-reverse

Después

puedes trabajar la distribución mediante CSS localizado.

Conceptualmente:

@media (min-width: 992px) {
    .content-feature-section-reverse .content-feature-text {
        order: 2;
    }

    .content-feature-section-reverse .content-feature-image {
        order: 1;
    }
}

Este código es conceptual

Debes adaptar las Classes a la estructura real.

Antes de utilizarlo:

comprueba que:

• las columnas se comporten mediante Flex/Grid compatible;

• las Classes correspondan a los elementos correctos.

Waclis utiliza Bootstrap 4

Por eso cualquier personalización debe respetar la estructura existente.

Paso 29. ¿Por qué aplicamos la inversión solo desde desktop?

Porque queremos que el orden base:

texto
imagen

permanezca en mobile.

Entonces:

mobile:

Texto
Imagen

Desktop con variante reverse:

Imagen | Texto

Esto es diferente de aplicar:

flex-direction: column-reverse;

en celular.

Esa técnica podría invertir innecesariamente la lectura.

Paso 30. No copies el ejemplo CSS sin revisar HTML

Primero utiliza Navigator.

Confirma qué elemento posee:

content-feature-text

Y cuál:

content-feature-image

Si las Classes están en elementos internos incorrectos

order puede no producir el resultado esperado.

Primero estructura.

Después CSS.

Paso 31. No utilices Position absolute para alternar

Evita:

.image {
    position:absolute;
    left:0;
}

.text {
    position:absolute;
    right:0;
}

Grid ya puede resolver la composición.

Position absolute elimina los elementos del flujo normal.

Esto dificulta:

• crecimiento del texto;

• responsive;

• altura automática.

Paso 32. No utilices grandes márgenes negativos

Evita:

margin-left:-500px;

para mover la Image al otro lado.

Es una solución frágil.

Utiliza:

• Grid;

• orden de columnas;

• Classes.

Paso 33. Crea la tercera Section

Ahora clona nuevamente la base.

Si la tercera vuelve a:

TEXTO | IMAGEN

puedes mantener la Class base:

content-feature-section

Y no utilizar la variante:

content-feature-section-reverse

Resultado:

Section 1:
base

Section 2:
base + reverse

Section 3:
base

Esto es mucho más mantenible que crear tres CSS completamente distintos.

Paso 34. Base + variantes

Este es un patrón profesional muy útil.

Estilo base:

.content-feature-section {
    ...
}

Variante:

.content-feature-section-reverse {
    ...
}

Otra futura variante:

content-feature-section-dark

No dupliques:

40 líneas de CSS

solo para cambiar:

• orden;

• Background.

Reutiliza la base.

Paso 35. Ritmo entre las Sections

Cuando tienes tres o más bloques similares

debes prestar atención al ritmo.

Por ejemplo:

Section A
Padding 80 / 80

Section B
Padding 80 / 80

Section C
Padding 80 / 80

Puede crear continuidad.

Otra opción

alternar Background:

Section A:
blanco

Section B:
gris suave

Section C:
blanco

Esto puede ayudar a diferenciar.

Pero no necesitas:

blanco
azul
rojo
verde

en cada bloque.

Mantén coherencia.

Paso 36. ¿Alternar Background además de columnas?

Puede hacerse.

Por ejemplo:

A:
texto | imagen
fondo blanco

B:
imagen | texto
fondo suave

C:
texto | imagen
fondo blanco

Esto refuerza la alternancia.

Pero utiliza solo si encaja con la identidad visual.

No es obligatorio.

Paso 37. Evita que cada Section parezca un diseño distinto

Aunque alternes:

• posición;

• Background;

deben compartir:

• Typography;

• Padding;

• estilo de Image;

• CTA;

• jerarquía.

Si la primera tiene:

Heading 48px

la segunda:

Heading 32px

y la tercera:

Heading 64px

sin una razón,

la página puede perder continuidad.

Paso 38. Mantén el mismo sistema de CTA

Por ejemplo:

Conocer más →

en todas.

O distintas acciones:

Ver gestión →
Ver personalización →
Ver herramientas →

pero con el mismo estilo visual.

No hagas:

Section A → Button sólido
Section B → Button outline
Section C → Link diminuto

sin una razón.

Paso 39. Mantén la posición relativa del CTA

Dentro del contenido:

Texto superior
Heading
Paragraph
CTA

Mantén esa jerarquía en todas.

Esto hace que el visitante aprenda rápidamente el patrón.

Paso 40. ¿Qué ocurre si una Section no necesita CTA?

No lo agregues por obligación.

Puede existir:

Heading
Paragraph
Image

Es completamente válido.

Pero si solo una sección no tiene CTA:

asegúrate de que visualmente el espacio final siga siendo coherente.

Paso 41. Evita descripciones excesivamente diferentes

Por ejemplo:

Section A:
2 líneas

Section B:

12 líneas

Section C:

1 línea

La alternancia puede perder ritmo.

Primero revisa editorialmente.

No uses Height fija para compensar.

Paso 42. ¿Qué hacer si una Section tiene mucho más contenido?

Tal vez necesita:

• List;

• segunda Section;

• página específica.

No obligues todos los conceptos a entrar en el mismo patrón.

El patrón es una herramienta,

no una restricción.

Paso 43. List dentro de texto + imagen

Una Section puede incluir:

Heading
Paragraph
List
CTA

Ejemplo:

Incluye:

✓ Gestión de contenido
✓ Personalización
✓ Herramientas adicionales

Puede funcionar.

Pero si todas las Sections tienen:

listas de 10 elementos

la página se vuelve muy extensa.

Resume.

Paso 44. Cards dentro de una columna

Puedes colocar:

texto
+
pequeñas Cards

junto a una Image.

Pero eso transforma la composición.

Antes de agregar estructuras internas complejas

pregunta si debería convertirse en otra Section especializada.

No anides componentes por decorar.

Paso 45. Image vs Background Image

Esta diferencia vuelve a ser importante.

En una sección texto + imagen:

si la imagen representa:

• producto;

• interfaz;

• ejemplo;

• resultado;

utiliza generalmente:

Image

Porque forma parte del contenido.

Background Image puede ser apropiada cuando:

• llena una mitad visual;

• funciona como ambientación.

Conceptualmente:

[ TEXTO ][ BACKGROUND VISUAL ]

Pero el Background puede recortarse.

Si necesitas mostrar un producto completo:

no es la mejor opción.

Paso 46. Sección con mitad visual como Background

Una composición avanzada puede ser:

┌──────────────────────┬──────────────────────┐
│                      │                      │
│       TEXTO          │  BACKGROUND IMAGE    │
│                      │                      │
└──────────────────────┴──────────────────────┘

Puede resultar muy atractiva para fotografías.

Pero debes comprobar:

• Height;

• recorte;

• mobile.

No fijes una Height arbitraria solamente para que se vea la fotografía.

Paso 47. ¿Qué pasa con Background en mobile?

Puede ser preferible:

• convertirlo en Image;

• mantenerlo con una altura controlada;

según la composición.

No asumas que:

Background desktop

funciona automáticamente como:

imagen mobile

Pruébalo.

Paso 48. No escondas la imagen en mobile sin necesidad

Si la Image aporta contexto:

debe mantenerse.

No utilices:

Hide based on device

solo porque el bloque resulta largo.

Una página móvil puede ser vertical y más extensa.

Eso es normal.

Lo importante es que el recorrido sea claro.

Paso 49. ¿Cuándo sí podría ocultarse una imagen?

Si es:

• puramente decorativa;

• redundante;

• demasiado costosa para la experiencia;

y el contenido sigue completo.

Esa debe ser una decisión consciente.

No una solución rápida.

Paso 50. Alternancia y mobile

Este es el test más importante del tutorial.

Supongamos:

Desktop:

Texto A | Imagen A

Imagen B | Texto B

Texto C | Imagen C

Ahora ignora desktop

y lee solo el orden mobile:

Texto A
Imagen A

Texto B
Imagen B

Texto C
Imagen C

Pregunta:

¿Se entiende cada bloque?

Si sí:

la estructura es sólida.

Paso 51. Evita imágenes consecutivas sin contexto

Un mobile incorrectamente planteado puede quedar:

Texto A
Imagen A

Imagen B
Texto B

Visualmente:

[IMAGEN A]
[IMAGEN B]

quedan juntas.

Eso puede confundir.

Especialmente si las imágenes se parecen.

Orden lógico evita este problema.

Paso 52. Revisa tablet

Tablet es especialmente importante.

Una composición:

6 + 6

puede ser demasiado estrecha para:

• Heading largo;

• captura compleja.

Puedes decidir:

12 + 12

antes de llegar a mobile.

No reduzcas el H2 demasiado solo para mantener dos columnas.

Paso 53. Tablet puede utilizar una composición distinta

Por ejemplo:

Desktop:

6 + 6

Tablet:

12 + 12

Mobile:

12 + 12

Perfectamente válido.

No necesitas utilizar dos columnas hasta el último momento.

Paso 54. Revisa las imágenes en tablet

Una captura de interfaz puede quedar:

demasiado pequeña

dentro de una Column 6.

Si deja de ser legible:

apila.

No agrandes mediante:

transform: scale(1.4);

Eso no resuelve la estructura.

Paso 55. Revisa Heading en tablet

Si pasa de:

2 líneas

a:

5 líneas

el diseño puede necesitar:

• más ancho;

• texto más corto;

• apilar columnas.

No reduzcas siempre Typography.

Paso 56. Revisa la separación entre Sections

Cuando una termina:

Imagen A

y comienza:

Texto B

debe existir suficiente separación.

No tanto como para parecer páginas diferentes.

Ni tan poco como para mezclar contenidos.

Padding de Section ayuda a crear ese ritmo.

Paso 57. Background alternado y separación

Si alternas:

blanco
gris
blanco

puedes necesitar menos separación visual

porque el Background ya diferencia.

Evalúa el conjunto.

No analices cada Section aislada.

Paso 58. Revisa la página completa

Este es otro punto importante.

Tres secciones individualmente bonitas pueden no funcionar juntas.

Utiliza:

Ver página

y recorre:

Hero
↓
Servicios
↓
Texto + imagen A
↓
Texto + imagen B
↓
Texto + imagen C
↓
CTA

Pregunta:

• ¿el ritmo es coherente?

• ¿hay demasiados bloques similares?

• ¿la página se vuelve repetitiva?

Paso 59. Alternancia no resuelve toda repetición

Aunque cambies:

izquierda
derecha
izquierda

si las tres Sections tienen:

Heading
Paragraph
Button
Image

puede seguir habiendo repetición.

Puedes variar moderadamente:

• Background;

• tipo de imagen;

• presencia de List;

• CTA;

sin perder coherencia.

Paso 60. No conviertas cada bloque en un diseño independiente

La solución no es:

Section A
minimalista

Section B
neón

Section C
glassmorphism

Section D
retro

La Página web necesita identidad común.

La alternancia ya aporta variación suficiente.

Paso 61. Hover en estas Sections

Normalmente no necesitas Hover sobre toda la Section.

Son bloques informativos.

Puedes tener Hover en:

• CTA;

• pequeños elementos interactivos.

No hagas que toda la columna de texto:

se eleve

si no es clicable.

Paso 62. Animación

Después de que todo funcione

puedes evaluar:

Avanzado → Animate on scroll

Una opción moderada:

• sección entra suavemente;

• imagen entra suavemente.

Evita:

texto izquierda → derecha
imagen derecha → izquierda
Heading zoom
Button rebota

todo simultáneamente.

Mantén consistencia entre las tres Sections.

Paso 63. No uses animación para explicar la alternancia

El diseño debe comprenderse:

sin animación

Si desactivas todo movimiento

la página debería seguir funcionando correctamente.

Paso 64. Imagen con Border radius

Puedes compartir una Class:

content-feature-image

Y aplicar un mismo:

• Border radius;

• sombra;

a todas las Images.

Esto ayuda a crear unidad visual.

No necesitas configurar manualmente cada una con valores diferentes.

Paso 65. Linked styles

Si las imágenes comparten selector:

un cambio puede afectar todas.

En este caso:

puede ser deseado.

Por ejemplo:

Border radius:
16px

para las tres.

Si una necesita una excepción:

agrega una variante.

Paso 66. No utilices IDs para estilos repetidos

Incorrecto:

#imagen-1
#imagen-2
#imagen-3

con tres reglas idénticas.

Mejor:

.content-feature-image

ID solo cuando necesitas una referencia única.

Paso 67. Enlaces internos

Puedes asignar ID a cada Section:

gestion
personalizacion
crecimiento

Después un Link puede apuntar conceptualmente a:

#gestion

Solo si utilizas navegación interna.

Mantén IDs:

• únicos;

• descriptivos.

Paso 68. No agregues ID al clonar sin revisarlo

La clonación puede conservar:

id="gestion"

Debes cambiarlo.

Este es uno de los errores más habituales en secciones clonadas.

Paso 69. CSS base localizado

Si necesitas personalización adicional:

.content-feature-section {
    /* estilos comunes */
}

Mucho mejor que:

section {
    /* afecta todo */
}

Paso 70. CSS para las imágenes

Por ejemplo:

.content-feature-section .content-feature-image img {
    max-width: 100%;
    height: auto;
}

Solo si coincide con tu estructura real

y necesitas la regla.

No copies el selector a ciegas.

Paso 71. Evita CSS global

No utilices:

img {
    border-radius: 20px;
}

Puede afectar:

• logo;

• productos;

• galerías.

Tampoco:

.row {
    align-items: center;
}

globalmente.

Puede alterar todas las grillas.

Utiliza:

.content-feature-section .row {
    ...
}

si realmente necesitas esa regla.

Paso 72. No modifiques .col-* globalmente

Evita:

.col-md-6 {
    padding: 50px;
}

Puede afectar cualquier Column con esa Class.

Agrega una Class propia a tu zona.

Paso 73. Bootstrap 4

Waclis utiliza:

Bootstrap 4

Si una IA te devuelve:

order-md-2

u otras Classes,

debes comprobar que correspondan a Bootstrap 4 y a la estructura real antes de utilizarlas.

No pegues automáticamente ejemplos de versiones diferentes.

Mucho menos agregues:

<link href="bootstrap5...">

Waclis ya utiliza Bootstrap 4.

Paso 74. No agregues JavaScript para invertir columnas

No lo necesitas.

Alternancia puede resolverse mediante:

• estructura;

• Grid;

• CSS.

Evita scripts que detecten:

ancho de pantalla

y muevan elementos.

CSS responsive está hecho para eso.

Paso 75. No dupliques Section desktop y mobile

Una mala solución sería:

Section A desktop
Section A mobile

Y luego ocultar una u otra.

Puede duplicar:

• textos;

• imágenes;

• Links;

• mantenimiento;

• IDs.

Una sola Section responsive es preferible cuando puede resolverlo.

Paso 76. ¿Qué ocurre cuando actualizas el contenido?

Imagina que dentro de seis meses cambias:

Heading

Con una sola Section:

actualizas una vez.

Con dos versiones:

debes recordar actualizar:

desktop
+
mobile

Es fácil generar inconsistencias.

Por eso

evita duplicar contenido para responsive sin necesidad.

Paso 77. Reutilizar el patrón en otras páginas

Puedes utilizar esta estructura para:

• página institucional;

• servicios;

• producto;

• soluciones;

• funcionalidades.

Por ejemplo

Página de producto:

Característica 1
Texto | Captura

Característica 2
Captura | Texto

Característica 3
Texto | Captura

Página institucional:

Historia
Texto | Foto

Equipo
Foto | Texto

Propuesta
Texto | Foto

Paso 78. No utilices alternancia si el contenido es secuencial

Si explicas:

Paso 1
Paso 2
Paso 3

puede ser mejor:

Timeline

Porque alternar izquierda/derecha puede dificultar la percepción de secuencia.

Usa la estructura adecuada al significado.

Paso 79. No utilices este patrón para FAQ

Si tienes:

Pregunta
Respuesta

utiliza:

• FAQ;

• Accordeon;

cuando corresponda.

Paso 80. No utilices este patrón para precios

Si necesitas comparar planes:

Tabla de precios

puede ser más adecuada.

No todo debe convertirse en texto + imagen.

Paso 81. Comprobar la alternancia sin imágenes

Haz un test simple.

Imagina que todas las Images desaparecen.

¿Los textos siguen una secuencia lógica?

A
B
C

Si sí:

la página tiene una buena estructura editorial.

Si no:

quizá dependes demasiado de la imagen.

Paso 82. Comprobar sin CTA

Lee:

Eyebrow
Heading
Paragraph

¿Cada Section se comprende?

Si no:

el CTA está intentando explicar lo que debería explicar el Heading.

Corrige el contenido.

Paso 83. Comprobar mobile como documento independiente

No pienses:

“es la versión pequeña de desktop”.

Léelo desde arriba:

Hero
↓
Servicios
↓
Texto A
↓
Imagen A
↓
Texto B
↓
Imagen B
↓
Texto C
↓
Imagen C

¿Tiene sentido?

Ese es el verdadero test.

Paso 84. Revisa la sección con el texto más largo

No pruebes únicamente la primera.

Busca:

• Heading más largo;

• Paragraph más largo;

• CTA más largo.

Comprueba:

• desktop;

• tablet;

• mobile.

Paso 85. Revisa la imagen más problemática

Puede ser:

• vertical;

• muy ancha;

• captura con texto pequeño.

Esa será la que determine si tu tratamiento visual es robusto.

No pruebes solo la imagen más fácil.

Paso 86. Guarda por etapas

Después de construir la base:

Guardar Cambios

Después de clonar y reemplazar contenido:

Guardar Cambios

Después de responsive y estilos:

Guardar Cambios

No asumimos autosave.

Paso 87. Utiliza Ver página

Comprueba la secuencia completa.

No revises cada Section de forma aislada únicamente.

Recorre:

Section A
↓
Section B
↓
Section C

Observa:

• ritmo;

• separación;

• alternancia;

• coherencia.

Paso 88. Prueba los CTA

Cada Link debe llevar al destino correcto.

Después de clonar:

no asumas.

Haz clic en:

CTA A
CTA B
CTA C

Paso 89. Revisa desktop

Comprueba:

• proporciones;

• Vertical align;

• tamaños de Image;

• Padding;

• alternancia.

Las secciones deberían sentirse relacionadas.

Paso 90. Revisa monitor grande

Boxed ayuda a evitar:

texto en un extremo
imagen en el otro

demasiado separados.

Si existe demasiada distancia

revisa:

• Container;

• Column sizes.

No aumentes las imágenes solo para llenar.

Paso 91. Revisa tablet

Especialmente:

• Heading;

• Column width;

• tamaño de captura.

Decide si apilar antes.

Paso 92. Revisa mobile

Comprueba:

• orden;

• separación;

• imágenes consecutivas;

• CTA;

• Width;

• Padding.

No debe existir:

scroll horizontal

Paso 93. Revisa un dispositivo real

Cuando sea posible.

Comprueba:

• lectura;

• tamaño de CTA;

• velocidad;

• largo general.

Una página con muchas Sections puede sentirse mucho más extensa en celular.

No es necesariamente un problema,

pero debe estar bien organizada.

Paso 94. ¿Qué hacer si la alternancia reverse no funciona?

Primero:

1. abre Navigator;

2. identifica las Columns;

3. verifica las Classes;

4. revisa el CSS;

5. confirma el breakpoint.

No agregues inmediatamente:

!important

Puede ser un selector incorrecto.

Paso 95. ¿Qué hacer si se invierte también en mobile?

Revisa el media query.

Si quieres invertir solamente desktop:

la regla debe estar limitada a un ancho adecuado.

No apliques order globalmente.

Paso 96. ¿Qué hacer si la imagen aparece primero en mobile y no quieres?

Comprueba:

• orden HTML;

• order CSS;

• Direction.

La solución debe mantener:

texto primero

en mobile si esa es tu intención.

No reconstruyas la Section antes de comprobar el orden.

Paso 97. ¿Qué hacer si dos imágenes quedan juntas?

Es una señal clásica de orden inconsistente entre Sections.

Por ejemplo:

Texto A
Imagen A
Imagen B
Texto B

Decide si B debe mantener:

Texto B
Imagen B

en mobile.

Ajusta el orden.

Paso 98. ¿Qué hacer si una Section es mucho más alta?

Revisa:

• contenido;

• Image;

• Padding.

No fijes Height a todas.

Puede ser normal que una tenga algo más de altura.

Lo importante es que el ritmo no se rompa de forma extrema.

Paso 99. ¿Qué hacer si una Image es mucho más alta?

Puede tener otra proporción.

Evalúa:

• recorte;

• otra Image;

• Max Height;

sin deformarla.

No estires las demás para coincidir.

Paso 100. ¿Qué hacer si quiero que todas las Images tengan exactamente el mismo marco?

Puedes crear un wrapper con una proporción común.

Pero asegúrate de que:

• Cover no corte información esencial.

Para fotografías puede funcionar.

Para capturas de software

puede no ser apropiado.

Paso 101. ¿Qué hacer si el texto queda muy lejos de la Image?

Revisa:

• Column proportion;

• Container width;

• Padding de Columns.

No uses:

margin-left:-100px;

como primera solución.

Paso 102. ¿Qué hacer si están demasiado pegados?

Agrega espacio controlado:

• Padding;

• Margin;

• separación de Grid.

No uses:

 

Paso 103. ¿Qué hacer si quiero una Image que sobresalga del Container?

Es una composición avanzada.

Puede requerir:

• Width;

• Margin;

• Overflow.

Primero construye una versión normal.

No empieces rompiendo el Container.

La versión estándar es más robusta.

Paso 104. ¿Qué hacer si quiero superposición?

Por ejemplo:

Image parcialmente detrás de texto

Puede requerir:

• Position;

• z-index.

Es una variante avanzada.

Debes probar especialmente:

• tablet;

• mobile.

No es necesaria para conseguir una composición profesional.

Paso 105. ¿Qué hacer si quiero usar dos Images?

Puede ser:

Texto | composición visual

Pero utiliza:

• Grid;

• Gallery;

si la parte visual necesita varias imágenes.

No agregues varias Images posicionadas mediante coordenadas sin necesidad.

Paso 106. ¿Qué hacer si quiero agregar un video en vez de Image?

Puedes reemplazar:

Image

por:

Embed Video

La estructura sigue siendo:

Texto | Video

Pero recuerda:

• mayor peso;

• interacción;

• proporción.

Revisa mobile.

Paso 107. ¿Qué hacer si quiero Lottie?

También puede funcionar:

Texto | Lottie

Pero no utilices animación solamente para ocupar el espacio visual.

Pregunta si aporta.

Paso 108. ¿Qué hacer si quiero iconos + texto dentro de una Section?

Puede ser:

Heading
Paragraph
List con iconos
CTA

Sigue siendo válida.

Pero no conviertas cada Section en una mezcla de:

• Cards;

• Gallery;

• Lottie;

• Slider;

sin una razón.

Paso 109. IA para planificar las secciones

Puedes utilizar ChatGPT, Claude o Gemini.

Prompt

Necesito crear 3 secciones alternadas en el Editor de bloques de Waclis.

Cada sección contiene:
- texto superior;
- Heading;
- Paragraph;
- CTA;
- Image.

Desktop:
1. texto | imagen
2. imagen | texto
3. texto | imagen

Mobile:
quiero mantener siempre:
texto
imagen

Waclis utiliza Bootstrap 4.

No generes código todavía.

Explícame:
- jerarquía;
- orden lógico;
- cómo deberían organizarse las Columns.

IA para decidir proporción

Tengo esta sección:

Heading:
[...]

Paragraph:
[...]

Image:
[describir]

Necesito elegir entre:
- 6+6;
- 7+5;
- 5+7.

Analiza qué parte necesita más espacio.

No generes CSS.

IA para comprobar orden mobile

Esta es la estructura HTML de una sección:

[pegar]

Objetivo:

Desktop:
imagen | texto

Mobile:
texto
imagen

Comprueba:
- orden HTML;
- Classes;
- si existe algún order actual.

No cambies código.

IA para generar CSS reverse localizado

Tengo una Section Waclis.

Class raíz:
.content-feature-section

La variante invertida tiene además:
.content-feature-section-reverse

Columna de texto:
.content-feature-text

Columna de imagen:
.content-feature-image

Objetivo:

Mobile:
texto
imagen

Desktop desde 992px:
imagen
texto

Waclis utiliza Bootstrap 4.

Genera únicamente el CSS mínimo necesario.

No cambies HTML.
No utilices position:absolute.
No utilices JavaScript.
No agregues Bootstrap.

IA para auditar el CSS generado

Este CSS se utiliza para alternar columnas:

[pegar]

Revisa:
- si afecta únicamente .content-feature-section-reverse;
- si el breakpoint está limitado;
- si puede alterar otras .row o Columns;
- si utiliza !important innecesariamente.

No modifiques todavía el código.

IA para revisar tres Sections

Tengo estas tres secciones:

A:
[...]

B:
[...]

C:
[...]

Analiza:
- si todas representan ideas equivalentes;
- si existe repetición;
- si algún Paragraph es mucho más largo;
- si la secuencia tiene sentido.

No inventes contenido.

IA para equilibrar textos

Estos son los textos de 3 secciones alternadas:

[pegar]

Necesito que sean fáciles de recorrer.

Marca:
- frases redundantes;
- descripciones excesivamente largas;
- Headings ambiguos.

No inventes beneficios.
No reduzcas información esencial.

IA para imágenes

Tengo estas tres imágenes:

1. [descripción]
2. [descripción]
3. [descripción]

Se utilizarán en secciones alternadas.

Analiza:
- coherencia visual;
- proporciones;
- si conviene Cover o Contain;
- cuál puede presentar problemas en mobile.

No inventes elementos visuales.

IA para revisar HTML clonado

Section original:
[HTML]

Section clonada:
[HTML]

Busca:
- IDs duplicados;
- Links repetidos;
- src de Image repetido;
- Alt repetido;
- textos que no fueron reemplazados.

No inventes valores nuevos.

IA para detectar CSS global

Revisa este CSS:

[pegar]

Busca reglas demasiado globales sobre:

section
.container
.row
.col
h2
p
a
img

Indica cuáles podrían afectar otras partes de Waclis.

No modifiques nada.

IA para responsive

Estas 3 secciones se ven correctamente en desktop.

En tablet los Headings ocupan demasiadas líneas y las capturas quedan pequeñas.

Estructura:
[describir]

Analiza si conviene:
- mantener 6+6;
- apilar 12+12 antes.

No reduzcas Typography como primera solución.
No generes CSS todavía.

IA para detectar Position innecesario

Este CSS se utiliza en una sección texto + imagen:

[pegar]

Busca:
- position:absolute;
- left;
- right;
- top;
- transform;
- márgenes negativos.

Indica qué reglas podrían sustituirse por Grid o alineación.

No modifiques el código.

IA para crear variante de Background

Tengo una clase base:

.content-feature-section

Necesito una variante:

.content-feature-section-soft

Debe cambiar únicamente:
- Background;
- color de texto si es necesario.

No dupliques los estilos base.
Devuélveme solo CSS de la variante.

Buenas prácticas

Recomendamos:

• definir contenido antes del layout;

• mantener una idea por Section;

• construir una Section base;

• utilizar Grid Row;

• elegir 6+6, 5+7 o 7+5 según contenido;

• definir el orden mobile antes de alternar;

• utilizar Navigator;

• clonar la Section completa;

• reemplazar todo el contenido clonado;

• mantener IDs únicos;

• compartir Classes;

• utilizar variantes;

• mantener Typography consistente;

• mantener Images coherentes;

• probar tablet;

• probar mobile;

• utilizar CSS localizado solo cuando sea necesario.

Errores frecuentes

Alternar solo porque queda bonito

El contenido debe justificarlo.

Diseñar desktop primero y mobile después

Planifica ambos desde el comienzo.

Dejar Image primero en mobile sin evaluar

Comprueba el orden lógico.

Generar dos Images consecutivas entre Sections

Revisa la secuencia.

Utilizar Direction reverse indiscriminadamente

Puede alterar el orden de lectura.

Utilizar column-reverse en mobile sin necesidad

Mantén el flujo lógico.

Utilizar Position absolute para alternar

Utiliza Grid.

Utilizar grandes márgenes negativos

Evita soluciones frágiles.

Duplicar Section desktop y mobile

Mantén una sola estructura responsive cuando sea posible.

Clonar Section y dejar ID original

Mantén IDs únicos.

Clonar y dejar la URL anterior

Prueba todos los CTA.

Clonar y dejar la Image anterior

Actualiza contenido completo.

Dejar Alt anterior

Revisa cada Image.

Utilizar Cover para capturas importantes

Puede recortar información.

Utilizar imágenes completamente diferentes en proporción

Busca coherencia.

Fijar Height para igualar las Sections

Permite crecimiento natural.

Utilizar demasiado texto en una Section

Resume o divide.

Utilizar CSS global sobre .row

Puede afectar otras grillas.

Utilizar CSS global sobre .col-*

Puede alterar otros bloques.

Utilizar CSS global sobre img

Puede afectar otras imágenes.

Agregar Bootstrap adicional

Waclis ya utiliza Bootstrap 4.

Agregar JavaScript para invertir columnas

No es necesario.

Animar cada sección de forma distinta

Mantén coherencia.

Ocultar imágenes en mobile como solución rápida

Adapta primero.

No revisar tablet

Es uno de los puntos más delicados.

No revisar la página completa

El ritmo se evalúa en conjunto.

Flujo profesional recomendado

1. DEFINIR LAS IDEAS
↓
2. REDACTAR EL CONTENIDO
↓
3. ELEGIR IMÁGENES
↓
4. DEFINIR EL ORDEN MOBILE
↓
5. CREAR SECTION BASE
↓
6. CONFIGURAR BOXED / AUTO
↓
7. AGREGAR GRID ROW
↓
8. DEFINIR PROPORCIÓN
↓
9. CONFIGURAR RESPONSIVE
↓
10. AGREGAR TEXTO
↓
11. AGREGAR CTA
↓
12. AGREGAR IMAGE
↓
13. COMPLETAR ALT
↓
14. CREAR CLASSES BASE
↓
15. REVISAR DESKTOP
↓
16. REVISAR TABLET
↓
17. REVISAR MOBILE
↓
18. GUARDAR CAMBIOS
↓
19. CLONAR SECTION
↓
20. REEMPLAZAR TODO
↓
21. REVISAR IDS
↓
22. CREAR VARIANTE REVERSE
↓
23. INVERTIR SOLO DONDE CORRESPONDA
↓
24. CLONAR TERCERA SECTION
↓
25. AJUSTAR CONTENIDO
↓
26. REVISAR RITMO GENERAL
↓
27. REVISAR LINKED STYLES
↓
28. GUARDAR CAMBIOS
↓
29. VER PÁGINA
↓
30. PROBAR LINKS

Checklist de contenido

• Cada Section desarrolla una idea.

• Los Headings son claros.

• Los Paragraphs son breves.

• No existe contenido repetido innecesariamente.

• Los CTA corresponden a cada idea.

• Las URLs son reales.

• Las Images aportan información.

• Los Alt están actualizados.

Checklist de estructura

• Cada unidad utiliza una Section.

• No existen Containers innecesarios.

• Utilicé Grid Row.

• Cada Row tiene dos Columns cuando corresponde.

• La proporción tiene sentido.

• Utilicé Navigator.

• El orden lógico está definido.

• No utilicé Position absolute.

• No utilicé grandes márgenes.

Checklist de alternancia

• La alternancia aporta ritmo.

• No altera el significado.

• Desktop alterna como deseo.

• Mobile conserva un orden lógico.

• No aparecen dos Images seguidas sin contexto.

• La variante reverse está localizada.

• No afecta Sections normales.

• No utilizo JavaScript para alternar.

Checklist de Images

• Todas mantienen una línea visual coherente.

• No deformé proporciones.

• Elegí Cover o Contain conscientemente.

• Capturas importantes se ven completas.

• Alt está configurado.

• Desktop funciona.

• Tablet funciona.

• Mobile funciona.

• No existe scroll horizontal.

Checklist de estilos

• Padding entre Sections es coherente.

• Typography mantiene jerarquía.

• Los CTA comparten un sistema visual.

• Border radius es consistente.

• Backgrounds alternados mantienen coherencia.

• No cada Section parece pertenecer a una Página web diferente.

• Linked styles tiene el alcance esperado.

Checklist responsive

• Desktop funciona.

• Tablet funciona.

• Mobile funciona.

• Los Headings no quedan excesivamente estrechos.

• Las Images no quedan demasiado pequeñas.

• Las Columns se apilan cuando corresponde.

• El orden de lectura es correcto.

• El Padding lateral es adecuado.

• Los CTA no desbordan.

• No oculté contenido esencial.

Checklist técnico

• Utilicé Classes base.

• Utilicé variantes cuando corresponde.

• No dupliqué todo el CSS.

• Los IDs son únicos.

• No modifiqué .row globalmente.

• No modifiqué .col-* globalmente.

• No modifiqué img globalmente.

• No agregué Bootstrap.

• No agregué jQuery.

• No agregué JavaScript innecesario.

• El CSS adicional tiene scope.

• No utilicé !important como primera solución.

Checklist final

• Guardé los cambios.

• Utilicé Ver página.

• Probé cada CTA.

• Revisé las tres Sections juntas.

• Revisé desktop.

• Revisé tablet.

• Revisé celular.

• Revisé un dispositivo real cuando fue posible.

• No existen dos Images consecutivas sin contexto.

• No existe scroll horizontal.

• El diseño funciona sin animaciones.

• El orden mobile puede entenderse sin conocer el diseño desktop.

En resumen

Las secciones alternadas funcionan muy bien para crear una Página web dinámica,

pero deben construirse con una lógica clara.

La base es

SECTION
↓
CONTAINER
↓
GRID ROW
↓
TEXT COLUMN
+
IMAGE COLUMN

Desktop puede alternar:

TEXTO | IMAGEN

IMAGEN | TEXTO

TEXTO | IMAGEN

Pero mobile puede mantener:

TEXTO
IMAGEN

TEXTO
IMAGEN

TEXTO
IMAGEN

cuando el texto necesita presentar cada sección.

Esta distinción es fundamental

ORDEN VISUAL DE DESKTOP

no debe obligarte a destruir:

ORDEN LÓGICO DEL CONTENIDO

Para lograrlo

puedes mantener una estructura base:

Texto
Imagen

y crear una variante visual para desktop.

Por ejemplo:

content-feature-section

Y:

content-feature-section-reverse

Esto es mucho más mantenible que crear:

Section desktop
+
Section mobile

duplicadas.

Recuerda también

6 + 6

no es obligatorio.

Puedes utilizar:

7 + 5

o:

5 + 7

según:

• texto;

• imagen.

Y en tablet

si dos columnas dejan de ser cómodas:

12 + 12

puede ser mejor que reducir artificialmente:

• Typography;

• Padding;

• Image.

Respecto de las imágenes

IMAGE
→ contenido visual

Mientras:

BACKGROUND IMAGE
→ recurso de presentación

Utiliza Image cuando necesitas que el visitante vea realmente el recurso.

Respecto de la clonación

revisa siempre:

HEADING
PARAGRAPH
CTA
URL
IMAGE
ALT
ID

Y respecto del CSS

evita:

.row {
}

o:

img {
}

globalmente.

Utiliza scope.

Finalmente

el flujo correcto es:

CONTENIDO
↓
ORDEN MOBILE
↓
SECTION BASE
↓
GRID
↓
RESPONSIVE
↓
CLONAR
↓
CREAR VARIANTE VISUAL
↓
REVISAR TODA LA PÁGINA
↓
GUARDAR CAMBIOS
↓
VER PÁGINA

La alternancia funciona correctamente cuando puedes responder:

“En computadora la página tiene variedad visual, pero en celular cada bloque sigue apareciendo en un orden natural y fácil de comprender.”

Cuando ambas condiciones se cumplen, el patrón está correctamente implementado.