El Editor de bloques de Waclis no te obliga a utilizar únicamente secciones prediseñadas.

También puedes comenzar con una estructura básica y construir una sección completamente personalizada utilizando:

• Section;

• Container;

• Grid Row;

• columnas;

• Heading;

• Paragraph;

• Image;

• Links;

• estilos;

• configuración responsive.

En este tutorial realizaremos un caso práctico completo.

El objetivo será construir una sección similar a esta:

┌──────────────────────────────────────────────────────────────┐
│                                                              │
│   SOLUCIONES PARA EMPRESAS          [                      ]  │
│                                     [                      ]  │
│   Potencia tu negocio con           [       IMAGEN         ]  │
│   herramientas digitales            [                      ]  │
│                                     [                      ]  │
│   Una descripción breve que         [                      ]  │
│   explica la propuesta.             [                      ]  │
│                                                              │
│   [ CONOCER MÁS ]  VER SERVICIOS →                          │
│                                                              │
└──────────────────────────────────────────────────────────────┘

En computadora tendremos:

TEXTO                  IMAGEN

y en celular:

TEXTO

IMAGEN

De esta forma aprenderás una metodología que después podrás reutilizar para construir:

• presentaciones;

• servicios;

• características;

• páginas institucionales;

• llamadas a la acción;

• bloques comerciales;

• Landing Pages;

• secciones personalizadas.

Antes de comenzar: piensa primero en la estructura

Uno de los errores más frecuentes al diseñar una sección es comenzar cambiando:

• colores;

• tamaños;

• sombras;

• Border radius;

antes de definir correctamente la estructura.

El orden recomendado es:

ESTRUCTURA
↓
CONTENIDO
↓
RESPONSIVE
↓
ESTILO
↓
DETALLES

No al revés.

La estructura que construiremos

Conceptualmente utilizaremos:

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

Dependiendo de la estructura que genere la Section que estés utilizando, el Navigator puede mostrar algunos wrappers adicionales.

Eso es normal.

Lo importante es comprender la jerarquía:

SECTION
→ área general

CONTAINER
→ limita y organiza el ancho del contenido

GRID ROW
→ distribuye columnas

COLUMN
→ contiene los componentes

COMPONENTES
→ contenido real

Resultado que construiremos

Utilizaremos este contenido solamente como ejemplo:

Texto superior

SOLUCIONES PARA EMPRESAS

Título

Potencia tu negocio con herramientas digitales

Descripción

Centraliza la información de tu empresa y crea una experiencia digital clara, profesional y adaptada a todos los dispositivos.

CTA principal

CONOCER MÁS

CTA secundario

Ver servicios →

Imagen

Una imagen relacionada con el servicio o empresa.

Cuando construyas tu propia sección deberás reemplazar completamente estos textos.

Paso 1. Ingresa al Editor de bloques

Desde el panel de autogestión de Waclis, dirígete a la sección correspondiente dentro de:

Menúes

y utiliza el icono:

Bloque editable

representado mediante la paleta.

Dependiendo de la página que estés editando, Waclis puede mostrarte una o varias posiciones disponibles.

Por ejemplo, en Home

puedes encontrar:

• Bloque editable debajo del menú;

• Bloque editable debajo del banner;

• Bloque editable arriba de los productos destacados;

• Bloque editable arriba del menú inferior.

En otras páginas

como:

• Blog;

• Productos;

• Servicios;

• Contacto;

puedes encontrar posiciones como:

Debajo del menú

y:

Arriba del menú inferior

Estas posiciones son independientes

Puedes diseñar una sección dentro de una de ellas sin modificar directamente el contenido dinámico principal de la página.

Importante

El Editor de bloques no modifica:

• Header;

• Footer;

de la plantilla.

Por ejemplo:

Bloque debajo del menú

significa:

contenido ubicado después del menú.

No:

editar el menú.

Paso 2. Comienza con una Section

Abre:

Secciones → Secciones de Página

y agrega o selecciona una:

Section

para comenzar la composición.

Después selecciónala

Puedes hacerlo mediante:

• el lienzo;

• Navigator.

Al seleccionar Section

dentro de Contenido encontrarás opciones como:

• Title;

• Container width;

• Container height;

• Background;

• Overlay;

• Top Separator;

• Bottom Separator.

Para este ejemplo

utilizaremos:

Container width:
Boxed

Container height:
Auto

Background:
None

¿Por qué Boxed?

Porque queremos mantener:

contenido

dentro de un ancho cómodo,

especialmente en pantallas grandes.

Sin un límite razonable

un texto puede terminar extendiéndose demasiado:

Este es un párrafo que ocupa prácticamente toda una pantalla de 1900 píxeles y resulta mucho más difícil de leer...

Boxed ayuda a mantener una composición controlada

¿Por qué Auto?

Porque queremos que la altura dependa del contenido.

Evitaremos una Height fija

como:

height: 600px

sin necesidad.

Si el texto crece

la Section debería poder crecer con él.

¿Por qué no utilizamos Full Height?

Porque estamos construyendo una sección de contenido,

no necesariamente una portada que deba ocupar toda la pantalla.

Utilizaremos Full Height en otros casos prácticos cuando realmente sea apropiado.

Paso 3. Revisa Navigator

Antes de continuar:

abre Navigator.

Observa la estructura que creó la Section

Puede existir algo similar a:

SECTION
└── DIV

o una estructura con otros wrappers.

No agregues Container automáticamente sin mirar primero

Esta es una buena práctica importante.

Si la Section ya posee la estructura que necesitas

puedes aprovecharla.

Si necesitas construir una composición personalizada

puedes incorporar el componente:

Container

desde la biblioteca.

Container vs Container width de Section

No son exactamente el mismo concepto dentro de la interfaz.

Section

dispone de una configuración:

Container width:
Boxed / Full

Además

la biblioteca contiene un componente:

Container

que puedes utilizar dentro de una composición personalizada.

Antes de colocar Containers dentro de Containers

revisa Navigator.

Un error frecuente es terminar con:

Container
└── Container
    └── Container
        └── contenido

sin necesidad.

¿Qué problema puede generar?

Cada nivel puede agregar:

• ancho máximo;

• Padding;

• espacios laterales.

Resultado

El contenido puede quedar:

demasiado estrecho

Regla práctica

Utiliza únicamente los Containers necesarios para controlar correctamente la composición.

Paso 4. Agrega Grid Row

Dentro de la estructura de contenido agrega:

Grid Row

Este será el componente encargado de crear las dos columnas.

Selecciona Grid Row

En Contenido encontrarás opciones relacionadas con:

• Direction;

• Vertical align;

• Horizontal align;

• Wrap;

• Column 1;

• Column 2;

• etc.

También puedes:

• agregar columnas;

• eliminar columnas;

• configurar sus tamaños según dispositivos.

Para este diseño necesitamos dos columnas

Conceptualmente:

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

En desktop

queremos aproximadamente:

6 + 6

La grilla de Bootstrap se organiza conceptualmente en 12 unidades

Por ejemplo:

12
→ una columna completa

6 + 6
→ dos columnas iguales

4 + 4 + 4
→ tres columnas iguales

3 + 3 + 3 + 3
→ cuatro columnas

5 + 7
→ composición asimétrica

En nuestro caso

comenzaremos con:

6 + 6

No utilices Margin para crear columnas

Evita:

.texto {
    width: 500px;
    margin-left: 300px;
}

Eso no es una grilla responsive.

Utiliza Grid Row.

Paso 5. Configura el responsive de las columnas

Dentro de Grid Row puedes configurar el tamaño de cada columna según diferentes niveles de dispositivo.

El editor presenta:

• Extra small;

• Small;

• Medium;

• Large;

• Extra large;

• Extra extra large.

Nuestro objetivo

En pantallas amplias:

[ TEXTO ][ IMAGEN ]

En celular:

[ TEXTO ]

[ IMAGEN ]

Es decir

desktop:

6 + 6

mobile:

12
12

No necesitas memorizar Classes para hacerlo desde el Editor

Utiliza los controles de tamaño disponibles en cada Column.

Si posteriormente inspeccionas el HTML

puedes encontrar Classes Bootstrap como:

col-sm-6

u otras equivalentes,

dependiendo de la configuración.

Waclis utiliza Bootstrap 4

Por eso, si utilizas IA para trabajar con código:

indica:

Waclis utiliza Bootstrap 4.

No le pidas:

“Conviértelo a Bootstrap 5”

Paso 6. Define el orden correcto

Dentro de Navigator queremos:

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

Este orden también es importante para celular

Cuando las columnas se apilen:

TEXTO
↓
IMAGEN

Esto es más robusto que crear:

IMAGEN
↓
TEXTO

y después intentar invertir todo mediante CSS.

Regla importante

Construye primero un orden lógico del contenido y después diseña su distribución visual.

Evita utilizar Direction reverse únicamente para corregir un orden de contenido mal planteado

especialmente sin comprobar:

• lectura;

• teclado;

• celular.

Paso 7. Configura la alineación vertical

Nuestro objetivo es que:

texto

e:

imagen

se perciban equilibrados verticalmente.

Grid Row incluye controles como:

• Vertical align;

• Horizontal align.

Utiliza la opción correspondiente para lograr una alineación visual adecuada.

Por ejemplo

la columna de texto puede quedar centrada verticalmente respecto de la imagen.

Pero cuidado

Vertical align:

no significa necesariamente que ambos contenidos tendrán exactamente la misma altura.

Una imagen puede medir:

500px

y el texto:

320px

La alineación determina cómo se relacionan dentro de la fila.

No agregues:

margin-top: 170px

al texto solamente para centrarlo.

Eso se rompería al cambiar:

• texto;

• imagen;

• dispositivo.

Utiliza la alineación del Grid.

Paso 8. Agrega un texto superior

Dentro de la primera Column agrega:

Paragraph

Escribe:

SOLUCIONES PARA EMPRESAS

Este pequeño texto cumple una función editorial:

presentar la categoría antes del título principal de la sección.

Puedes darle un estilo diferente

por ejemplo:

• Font size más pequeño;

• Font weight mayor;

• Letter spacing moderado.

No necesitas convertirlo en Heading

si no representa un nuevo nivel de título.

Ejemplo visual

SOLUCIONES PARA EMPRESAS

Potencia tu negocio...

Evita crear:

H4
H2

solamente para conseguir tamaños diferentes.

La jerarquía HTML y el tamaño visual son conceptos distintos.

Paso 9. Agrega el Heading principal de la sección

Agrega:

Heading

En nuestro ejemplo:

Potencia tu negocio con herramientas digitales

Si esta sección está dentro de una página que ya tiene un H1

puede ser apropiado utilizar:

Heading 2

No utilices H1 en cada sección

Un esquema conceptual puede ser:

H1
Página principal

    H2
    Solución A

    H2
    Solución B

    H2
    Preguntas frecuentes

No:

H1
H1
H1
H1

solo porque quieres títulos grandes.

Si el H2 se ve pequeño

modifica:

Estilo → Typography → Font size

No cambies su nivel semántico únicamente por apariencia.

Paso 10. Define una longitud de título razonable

Este título:

Potencia tu negocio con herramientas digitales

tiene una extensión razonable.

Evita títulos como:

Descubre todas nuestras increíbles soluciones digitales especialmente desarrolladas para ayudarte a mejorar absolutamente todos los aspectos de tu empresa

Son difíciles de:

• escanear;

• distribuir;

• adaptar a celular.

Intenta comunicar una idea principal.

El detalle va en Paragraph.

Paso 11. Agrega la descripción

Debajo del Heading agrega:

Paragraph

Ejemplo:

Centraliza la información de tu empresa y crea una experiencia digital clara, profesional y adaptada a todos los dispositivos.

Mantén el texto relativamente corto

para este tipo de sección.

No conviertas una sección introductoria en:

8 párrafos

Si tienes mucha información:

puedes:

• crear otra Section;

• utilizar Lists;

• utilizar Accordeon;

• llevar a una página específica.

Paso 12. Mantén un ancho de lectura razonable

Aunque la Column ocupe la mitad del Grid,

no siempre necesitas que el Paragraph utilice todo el ancho disponible.

En determinados diseños

puede ser apropiado utilizar:

Max Width

para controlar la longitud de línea.

Puedes encontrar esta configuración dentro de:

Estilo → Size

No existe un ancho universal

Dependerá de:

• tipografía;

• tamaño;

• Column;

• diseño.

Lo importante es evitar líneas excesivamente largas.

Paso 13. Agrega el CTA principal

Para navegar hacia otra página utilizaremos:

Link

Recuerda

un Link es conceptualmente apropiado para:

ir a otro destino

Configura:

Texto:
CONOCER MÁS

Y:

Url:
destino real

Puedes darle apariencia de Button mediante los estilos correspondientes.

No utilices Html Button para navegación

si un Link resuelve mejor la acción.

Html Button y Link son componentes diferentes

Un:

<button>

no posee necesariamente un destino URL solo por parecer un botón.

Para CTA de navegación

utiliza Link.

Paso 14. Agrega un CTA secundario

También puedes agregar:

Ver servicios →

como segundo Link.

De esta forma creamos jerarquía:

ACCIÓN PRINCIPAL
[ CONOCER MÁS ]

ACCIÓN SECUNDARIA
Ver servicios →

No hagas que ambos tengan exactamente el mismo peso visual

si uno es prioritario.

Por ejemplo

Principal:

fondo sólido

Secundario:

Link de texto

Esto ayuda a comprender qué acción es principal.

Paso 15. Evita demasiados CTA

No agregues:

[ CONOCER MÁS ]
[ VER SERVICIOS ]
[ CONTACTAR ]
[ COMPRAR ]
[ MÁS INFORMACIÓN ]

dentro de una pequeña sección.

El visitante terminará teniendo demasiadas decisiones.

En este caso

dos acciones son suficientes.

Paso 16. Revisa todos los Links

Antes de continuar:

selecciona cada Link y revisa:

• Url;

• Target;

• Rel;

• Download;

según corresponda.

Para navegación interna

comprueba especialmente:

Url

No dejes:

#

No dejes:

https://ejemplo.com

de una plantilla.

Y si clonaste un Link

comprueba que no conserve el destino anterior.

Paso 17. Agrega la imagen

Dentro de la segunda Column agrega:

Image

Selecciónala

y abre:

Contenido

Encontrarás opciones como:

• Set Image;

• Width;

• Height;

• Alt;

• Align;

• Enable link;

• Id;

• Class.

Utiliza:

Set Image

para seleccionar la imagen correcta.

No cambies la ruta manualmente desde HTML

si puedes utilizar la herramienta visual.

Paso 18. Elige una imagen que aporte contenido

Evita imágenes genéricas que no expliquen nada.

Ejemplo poco útil

persona sonriendo frente a una computadora

sin relación clara con el servicio.

Puede ser mejor

• captura real;

• producto;

• interfaz;

• trabajo realizado;

• recurso visual relacionado.

La imagen debería reforzar el mensaje.

Paso 19. Completa Alt

Por ejemplo:

Panel de gestión digital utilizado desde una computadora

si eso describe realmente la imagen.

Evita:

foto

O:

imagen1

Alt debería describir el contenido relevante.

Si la imagen es completamente decorativa

la estrategia puede ser diferente,

pero no inventes una descripción comercial que la imagen no contiene.

Paso 20. Mantén la proporción

No fuerces:

Width:
500

y:

Height:
100

si la imagen original no tiene esa proporción.

Puede deformarse.

Para esta composición

normalmente interesa:

• ancho adaptado a la Column;

• altura proporcional.

Si necesitas un recorte controlado

puedes utilizar CSS y:

object-fit

pero no es necesario en todos los casos.

Para una imagen que debe mostrarse completa

puede ser preferible:

Contain

Para fotografía dentro de una caja de proporción fija

puede resultar apropiado:

Cover

No existe una única regla

Piensa qué debe ocurrir con la imagen.

Paso 21. Agrega Border radius si corresponde

Para modernizar la composición

puedes utilizar:

Estilo → Border radius

Por ejemplo

un valor moderado como:

12px

o:

16px

puede funcionar.

No es obligatorio.

Dependerá de la identidad visual de tu Página web.

Evita combinar:

Border radius 40px
+
sombra enorme
+
borde grueso
+
rotación

sin una razón.

Un diseño profesional suele depender más de:

• estructura;

• espacios;

• tipografía;

que de muchos efectos simultáneos.

Paso 22. Trabaja los espacios internos

Ahora que la estructura y el contenido están correctos,

podemos trabajar:

• Margin;

• Padding.

Dentro de Estilo encontrarás

ambas opciones.

Recuerda

Padding
→ espacio interior

Mientras:

Margin
→ espacio exterior

Por ejemplo

el Heading puede tener:

Margin bottom

para separarse del Paragraph.

Mientras la Section puede tener:

Padding top
Padding bottom

para generar aire general.

No crees espacios utilizando

<br><br><br><br>

Ni:

espacios vacíos

Utiliza Margin y Padding.

Paso 23. Espaciado vertical de la Section

Para una sección profesional

puedes comenzar con un Padding vertical generoso.

Por ejemplo

conceptualmente:

64 px arriba
64 px abajo

No es una medida obligatoria.

Una Section principal puede necesitar más.

Una secundaria:

menos.

Lo importante es evitar:

contenido pegado arriba y abajo

Y también:

300 px de espacio vacío

sin función.

Utiliza el espacio para construir jerarquía.

Paso 24. Define una separación consistente

Una estructura puede utilizar algo similar a:

Texto superior
↓ 12px

Heading
↓ 20px

Paragraph
↓ 28px

CTA

Estos números son únicamente un ejemplo de ritmo visual.

No necesitas configurar exactamente esos valores.

Lo importante

es que las separaciones tengan una relación lógica.

Evita:

8px
53px
11px
74px

sin una razón.

Un sistema coherente facilita el diseño.

Paso 25. Configura Typography

Revisa:

Estilo → Typography

Puedes trabajar:

• Font size;

• Font weight;

• Font family;

• Text align;

• Line height;

• Letter spacing;

• Text decoration.

Para el Heading

busca:

• claridad;

• jerarquía;

• buena lectura.

Para el Paragraph

prioriza:

• legibilidad;

• line height apropiado;

• contraste.

No utilices Font weight máximo en todos los textos

Si todo está en negrita:

nada se destaca.

Jerarquía conceptual

TEXTO SUPERIOR
pequeño / destacado

HEADING
grande / fuerte

PARAGRAPH
regular

CTA
claro

Paso 26. Alineación del texto

Para esta composición

podemos mantener:

Text align:
left

Especialmente en desktop.

No centres automáticamente todos los elementos.

Una sección:

texto a la izquierda
+
imagen a la derecha

suele funcionar bien con alineación izquierda.

Center puede ser apropiado para otras composiciones

como:

• CTA;

• encabezados;

• bloques simétricos.

Elegiremos esos casos más adelante.

Paso 27. Agrega una Class a la Section

Para facilitar futuras personalizaciones,

puede ser útil agregar una Class propia.

Por ejemplo:

custom-business-intro

Utiliza:

Contenido → General → Class

cuando corresponda al elemento seleccionado.

Esto permitirá escribir CSS como:

.custom-business-intro {
    ...
}

En lugar de modificar globalmente:

section {
    ...
}

Esto es mucho más seguro.

Paso 28. Utiliza Classes descriptivas

Buenos ejemplos:

custom-business-intro

business-intro-title

business-intro-image

Menos útiles:

caja1

texto-rojo

abc123

Las Classes deberían ayudarte a entender el propósito.

Paso 29. No agregues IDs sin necesidad

Para diseño compartido:

utiliza Classes.

Reserva ID para:

• elemento único;

• enlace interno;

• necesidad específica.

Por ejemplo

si quieres que un Link lleve hasta esta Section:

#soluciones

puedes configurar:

Id:
soluciones

Pero recuerda

el ID debe ser único.

No lo dupliques al clonar.

Paso 30. Revisa Linked styles

Cuando selecciones elementos,

el Editor puede avisarte que:

el elemento comparte estilos con otros.

Esto significa

que un cambio puede aplicarse también a:

• otros Headings;

• otras Cards;

• otras Images;

que compartan el mismo selector.

Antes de cambiar:

pregunta:

¿Quiero realmente que cambien todos?

Si sí

aprovecha el estilo compartido.

Si no

agrega una Class específica.

No agregues un ID a cada elemento como primera solución.

Paso 31. Revisa desktop

Utiliza la vista de computadora del Editor.

Comprueba:

• equilibrio 6/6;

• Heading;

• Paragraph;

• CTA;

• imagen;

• Padding;

• alineación.

Pregunta

¿el texto y la imagen se sienten como una única sección?

No:

texto a un lado
y una imagen perdida al otro

Debe existir relación visual.

Paso 32. Revisa tablet

Utiliza la previsualización correspondiente.

Comprueba:

• ancho de columnas;

• longitud del Heading;

• imagen;

• Buttons.

Puede ocurrir que:

6 + 6

siga funcionando.

O que resulte demasiado estrecho.

En ese caso

puedes decidir apilar antes.

Responsive no consiste solamente en:

Desktop
vs
Mobile

Tablet también debe funcionar correctamente.

Paso 33. Revisa celular

Utiliza la vista móvil.

Nuestro objetivo:

SOLUCIONES PARA EMPRESAS

Potencia tu negocio...

Descripción...

[ CONOCER MÁS ]

Ver servicios →

[ IMAGEN ]

No:

[TEXTO MINIATURA][IMAGEN MINIATURA]

Mantener 6+6 en una pantalla muy estrecha

puede resultar poco legible.

Por eso apilamos.

Paso 34. Revisa el orden en celular

Es especialmente importante.

Queremos:

1. CONTEXTO
2. TÍTULO
3. EXPLICACIÓN
4. CTA
5. IMAGEN

El usuario comprende la propuesta

antes de llegar al elemento visual.

Si la imagen es esencial para comprender la sección

puede existir otro orden,

pero debe ser una decisión consciente.

No utilices Direction reverse automáticamente

para crear alternancias visuales sin comprobar la lectura móvil.

Paso 35. Revisa los CTA en celular

Comprueba que:

• el texto no se corte;

• no desborden;

• sean fáciles de seleccionar;

• mantengan separación.

No necesitas necesariamente que todos los Buttons sean:

width: 100%

Pero puede resultar apropiado en algunos diseños móviles.

Evalúa el resultado.

No fuerces reglas globales sobre todos los Buttons del sitio.

Paso 36. Revisa la imagen en celular

Comprueba:

• ancho;

• proporción;

• calidad.

No dejes:

width: 600px

en una pantalla de:

360px

Puede provocar scroll horizontal.

Si aparece scroll horizontal

no soluciones con:

body {
    overflow-x: hidden;
}

Eso solamente oculta el problema.

Identifica el elemento que desborda.

Paso 37. ¿Necesitas CSS adicional?

Después de construir la sección visualmente,

pregunta:

¿Hay algo que realmente no pueda resolver con las herramientas del Editor?

Si la respuesta es no:

no necesitas CSS adicional.

Eso es perfectamente válido.

Más código no significa mejor diseño.

Si necesitas un pequeño ajuste

puedes utilizar:

Variables/CSS → Css

Por ejemplo

si asignaste:

custom-business-intro

puedes limitar la regla:

.custom-business-intro {
    ...
}

Evita:

.row {
    ...
}

O:

.container {
    ...
}

O:

img {
    ...
}

globalmente.

Pueden afectar otras partes de la Página web.

Paso 38. Ejemplo de ajuste responsive localizado

Supongamos que quieres reducir el Padding vertical únicamente en teléfonos.

Puedes utilizar una regla localizada como:

@media (max-width: 576px) {
    .custom-business-intro {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

Esto es preferible a:

section {
    padding: 40px 0 !important;
}

La primera regla afecta:

tu sección

La segunda puede afectar:

todas las Sections

Además

evitamos !important sin necesidad.

Paso 39. No agregues Bootstrap nuevamente

Si utilizas código generado por IA,

no aceptes:

<link href="bootstrap...">

Waclis ya utiliza Bootstrap 4.

Tampoco agregues nuevamente:

jQuery

o librerías externas

si no son realmente necesarias.

Para esta sección

no necesitamos JavaScript.

Todo puede resolverse con:

• estructura;

• Grid;

• HTML existente;

• CSS.

Paso 40. No utilices Position absolute para construir la sección

Evita soluciones como:

.intro-text {
    position: absolute;
    left: 180px;
    top: 120px;
}

Puede parecer correcta en tu monitor,

pero romperse en:

• notebook;

• tablet;

• celular;

• zoom.

Grid ya resuelve la distribución.

Position absolute puede utilizarse para detalles avanzados específicos,

pero no debería ser la base de una composición sencilla de dos columnas.

Paso 41. No utilices Heights fijas para alinear

Evita:

.intro-section {
    height: 620px;
}

solo para que:

texto

e:

imagen

coincidan.

Si el título crece:

puede cortarse.

Si se traduce:

puede cortarse.

Si el visitante aumenta el tamaño del texto:

puede cortarse.

Utiliza:

Container height:
Auto

cuando sea apropiado.

Paso 42. No utilices espacios vacíos para empujar elementos

Evita:

Paragraph vacío
Paragraph vacío
Paragraph vacío

para bajar un Button.

Utiliza:

• Margin;

• Padding;

• alineación.

El contenido vacío termina siendo difícil de mantener.

Paso 43. No utilices columnas vacías para crear espacios arbitrarios

Por ejemplo:

Column 2
vacía

solo para desplazar:

Column 5

Puede funcionar en una pantalla

pero complicar mobile.

Utiliza:

• Grid correctamente;

• Padding;

• Margin.

Columnas vacías pueden tener usos específicos,

pero no deberían ser tu principal herramienta de separación.

Paso 44. No utilices <br> para responsive

Evita modificar el Heading:

Potencia tu negocio<br>
con herramientas<br>
digitales

solo para conseguir una forma visual exacta en desktop.

En mobile puede quedar:

Potencia tu
negocio
con
herramientas
digitales

Deja que el texto fluya naturalmente

salvo que el salto tenga una intención editorial real.

Paso 45. Revisa la sección sin la imagen

Este es un buen test.

Pregunta:

¿El texto sigue explicando claramente la propuesta?

Si la respuesta es no

quizá estás dependiendo demasiado de un recurso visual.

La imagen debería reforzar el contenido,

no reemplazar una explicación esencial.

Paso 46. Revisa la sección sin leer el Paragraph

Otro test:

Texto superior
+
Heading
+
CTA

¿Permiten comprender rápidamente:

• qué se ofrece;

• qué puede hacer el visitante?

Si el Heading es:

Todo lo que necesitas

puede ser demasiado ambiguo.

Mejor:

Potencia tu negocio con herramientas digitales

Paso 47. Comprueba contraste

Texto y Background deben poder leerse fácilmente.

Evita:

texto gris muy claro
sobre
fondo blanco

O:

texto blanco
sobre
imagen muy clara

En este ejemplo utilizamos Background simple,

por lo que el contraste es fácil de controlar.

En futuros casos prácticos trabajaremos:

• Image Background;

• Overlay.

Paso 48. Comprueba Hover

Si el CTA principal utiliza un estilo Hover:

comprueba que siga siendo legible.

Por ejemplo

Normal:

fondo oscuro
texto blanco

Hover:

fondo claro
texto oscuro

No:

fondo blanco
texto blanco

Prueba.

Paso 49. Comprueba Active

Si has configurado estado:

active

revisa que tenga sentido.

No necesitas crear un estado espectacular.

La interacción debe ser clara.

Paso 50. No agregues animación todavía

Para nuestro primer caso práctico

recomendamos construir primero una versión:

sin animaciones

Comprueba:

• estructura;

• contenido;

• responsive.

Después puedes evaluar:

Avanzado → Animate on scroll

Por ejemplo

una animación sutil de entrada sobre la Section completa

puede ser suficiente.

Evita animar:

texto superior
Heading
Paragraph
Button 1
Button 2
Image

todos de forma diferente.

Primero diseño.

Después movimiento.

Paso 51. Si agregas una animación

Utiliza:

Avanzado → Animate on scroll

Puedes configurar:

• Animation type;

• Duration;

• Delay;

• Play animation.

Utiliza valores moderados.

La animación no debería retrasar la lectura.

Paso 52. No ocultes elementos para arreglar responsive

Dentro de Avanzado también encontrarás:

Hide based on device screen width

No utilices:

Ocultar imagen en mobile

solo porque la imagen no cabe.

Primero intenta:

• adaptar ancho;

• apilar columnas;

• corregir Grid.

Ocultar es una decisión de contenido,

no una solución automática.

Paso 53. Guarda durante el proceso

No esperes a terminar 40 modificaciones.

Puedes guardar en momentos lógicos:

estructura lista
↓
Guardar Cambios

Después:

contenido listo
↓
Guardar Cambios

Después:

estilos listos
↓
Guardar Cambios

No asumimos autosave.

Utiliza el botón:

Guardar Cambios

Paso 54. Utiliza Ver página

Una vez terminada:

selecciona:

Ver página

La vista final es fundamental.

El Editor es una herramienta de construcción

pero la experiencia final ocurre en:

la Página web

Comprueba:

• aspecto;

• Links;

• imagen;

• responsive.

Paso 55. Prueba los dos CTA

CTA 1:

CONOCER MÁS

CTA 2:

Ver servicios →

Ambos deben:

• responder;

• ir al destino correcto.

No consideres terminada la Section

si solamente comprobaste el diseño.

Paso 56. Revisa en celular real

Cuando sea posible

abre la Página web desde un teléfono.

Comprueba:

• tamaño del Heading;

• espacio lateral;

• Buttons;

• imagen;

• scroll;

• velocidad.

Un diseño puede verse correcto dentro de una simulación

y necesitar pequeños ajustes en un dispositivo real.

Paso 57. Revisa pantallas grandes

También es importante.

Una Section puede verse bien en:

1366 px

pero demasiado extendida en:

1920 px

Boxed ayuda a controlar este problema.

No hagas que Paragraph ocupe toda una pantalla grande.

Paso 58. Revisa el zoom del navegador

Un diseño profesional debería seguir siendo usable si el visitante modifica el zoom.

Esto es otra razón para evitar:

• Width rígidos;

• Position absolute;

• Heights fijas.

Paso 59. ¿Cómo saber si la Section está bien diseñada?

Pregúntate:

¿Puedo comprenderla en cinco segundos?

El visitante debería identificar:

• qué ofrece;

• para quién;

• qué acción puede realizar.

¿Tiene una jerarquía clara?

categoría
↓
título
↓
descripción
↓
acción

¿Tiene demasiados elementos?

Si agregaste:

• cinco Buttons;

• cuatro iconos;

• tres imágenes;

• dos animaciones;

probablemente debes simplificar.

¿Funciona sin Hover?

Debe ser comprensible también en dispositivos táctiles.

¿Funciona sin animación?

Si no:

el problema está en la estructura o contenido.

¿Funciona en celular?

No debería ser una versión:

desktop encogida

Debe convertirse en una composición vertical coherente.

Ejemplo final de estructura

Navigator podría mostrar conceptualmente algo similar a:

SECTION .custom-business-intro
└── DIV .container
    └── DIV .row
        ├── DIV .col...
        │   ├── P
        │   ├── H2
        │   ├── P
        │   └── DIV
        │       ├── A
        │       └── A
        └── DIV .col...
            └── IMG

La estructura exacta puede variar

No utilices este ejemplo como HTML obligatorio.

Utiliza Navigator para comprobar la estructura real que construiste.

¿Qué hacer si las columnas no aparecen lado a lado?

Revisa:

• tamaños de Column;

• Grid Row;

• ancho del padre;

• CSS personalizado.

Si tienes:

12 + 12

en desktop:

se apilarán.

Configura el tamaño apropiado.

¿Qué hacer si una columna pasa abajo inesperadamente?

Revisa si:

• la suma efectiva supera el ancho disponible;

• hay Width fijas;

• Padding excesivo;

• CSS adicional.

No reduzcas el contenido arbitrariamente.

¿Qué hacer si la imagen queda demasiado pequeña?

Comprueba:

• tamaño de Column;

• Width de Image;

• Max Width;

• tamaño del archivo.

No utilices:

transform: scale(1.5);

como primera solución.

Ajusta estructura y tamaño.

¿Qué hacer si la imagen ocupa demasiado?

Mismo procedimiento.

Puedes utilizar una distribución:

5 + 7

en lugar de:

6 + 6

si quieres dar mayor espacio al texto o imagen.

No existe una obligación de usar columnas iguales.

Ejemplo 5 + 7

[   TEXTO   ][       IMAGEN       ]

Ejemplo 7 + 5

[       TEXTO       ][   IMAGEN   ]

Elige según el contenido.

¿Qué hacer si el Heading ocupa seis líneas en celular?

Primero revisa el texto.

Puede ser demasiado largo.

Después:

• Font size;

• Line height.

No reduzcas automáticamente a:

18px

si deja de parecer un Heading.

Puede ser mejor simplificar el mensaje.

¿Qué hacer si el CTA desborda?

Revisa:

• texto;

• Padding;

• Width.

En lugar de:

DESCUBRE TODAS NUESTRAS SOLUCIONES AHORA MISMO

puede ser:

Ver soluciones

Mejor texto también mejora responsive.

¿Qué hacer si hay demasiado espacio entre texto e imagen?

Revisa:

• Column;

• Padding;

• Margin;

• Container width.

No agregues Width arbitrarias.

¿Qué hacer si están demasiado pegados?

Utiliza:

• Padding;

• Grid;

• espacios controlados.

No insertes:

    

¿Qué hacer si todo está demasiado cerca de los bordes?

Revisa:

• Container;

• Section Padding.

No agregues Margin diferente a cada componente.

Resuelve primero en el nivel estructural.

¿Qué hacer si el contenido está demasiado estrecho?

Busca:

• Containers anidados;

• Max Width;

• Column demasiado pequeña.

Navigator es especialmente útil.

Puede existir:

Container
└── Container
    └── Container

sin necesidad.

¿Qué hacer si Full todavía se ve Boxed?

Puede existir un Container interno limitando el contenido.

Revisa Navigator.

La configuración Full de una Section no implica necesariamente que todos sus hijos deban ignorar sus propias restricciones.

¿Qué hacer si Boxed afecta demasiado la imagen?

Puedes reconsiderar la composición.

Por ejemplo:

Section Full
└── Container para texto
└── zona visual más amplia

sería una composición avanzada.

Pero no compliques una sección simple si Boxed ya funciona.

¿Qué hacer si en mobile quiero la imagen primero?

Si existe una razón editorial real,

puedes construir el orden de acuerdo con esa prioridad.

No lo hagas simplemente porque:

“se ve más lindo”

en desktop.

Comprueba el flujo completo.

¿Qué hacer si quiero alternar varias secciones?

Por ejemplo:

TEXTO | IMAGEN

IMAGEN | TEXTO

TEXTO | IMAGEN

Este es un patrón frecuente.

Pero en mobile puede ser mejor mantener:

TEXTO
IMAGEN

TEXTO
IMAGEN

TEXTO
IMAGEN

No permitas que la alternancia desktop genere:

IMAGEN
TEXTO

TEXTO
IMAGEN

IMAGEN
TEXTO

si dificulta la lectura.

Planifica primero el orden del documento.

¿Qué hacer si quiero reutilizar esta sección?

Una vez que esté correctamente construida:

puedes clonar la unidad completa.

Selecciona:

Section

No únicamente:

Heading

Después de clonar actualiza:

• texto superior;

• Heading;

• Paragraph;

• Image;

• Alt;

• CTA principal;

• URL;

• CTA secundario;

• URL;

• IDs.

Classes de diseño pueden mantenerse

si quieres que ambas Sections compartan apariencia.

Esto es muy útil

Por ejemplo

ambas pueden utilizar:

custom-business-intro

si realmente quieres el mismo estilo.

Pero el ID:

soluciones

no debería duplicarse.

¿Qué hacer si al modificar la copia cambia la original?

Probablemente estás modificando:

• una Class compartida;

• Linked style.

Pregunta:

¿Quiero que ambas tengan el mismo diseño?

Si sí

es correcto.

Si no

agrega una Class adicional a la variante.

Por ejemplo

Original:

custom-business-intro

Variante:

custom-business-intro custom-business-intro-dark

Después puedes personalizar únicamente la segunda variante.

No dupliques todo el CSS

si solo cambia:

• Background;

• Text Color.

Utiliza una variante.

Cómo utilizar IA para crear esta sección

Puedes utilizar ChatGPT, Claude o Gemini para ayudarte.

Pero primero construye la estructura conceptual

Por ejemplo:

Section
└── Container
    └── Row
        ├── Texto
        └── Imagen

Después pide ayuda específica.

Prompt para planificar la estructura

Quiero crear una sección en el Editor de bloques de Waclis.

Contenido:
- texto superior;
- título;
- párrafo;
- CTA principal;
- CTA secundario;
- imagen.

Desktop:
texto a la izquierda e imagen a la derecha.

Mobile:
texto arriba e imagen abajo.

Waclis utiliza Bootstrap 4.

No generes HTML ni CSS todavía.

Indícame únicamente:
- jerarquía de Section;
- Container;
- Grid Row;
- cantidad de columnas;
- distribución recomendada.

Este prompt es muy útil

porque obliga a pensar:

estructura

antes de:

código

Prompt para revisar contenido

Tengo esta sección:

Texto superior:
[...]

Título:
[...]

Descripción:
[...]

CTA:
[...]

Revisa:
- claridad;
- longitud;
- jerarquía;
- si el CTA explica la acción.

No inventes características ni beneficios.

Prompt para revisar responsive

Tengo una sección Waclis con:

Desktop:
2 columnas 6 + 6.

Mobile:
quiero que las columnas se apilen.

El texto debe aparecer primero.

Waclis utiliza Bootstrap 4.

Indícame primero cómo debería configurarse conceptualmente mediante Grid Row.

No generes CSS si puede resolverse con las opciones del Grid.

Prompt para revisar HTML

Si ya construiste la Section y necesitas ayuda:

Este es únicamente el HTML de una Section creada en Waclis:

[pegar]

Waclis utiliza Bootstrap 4.

Identifica:
- Section;
- Container;
- Row;
- Columns;
- Heading;
- Paragraphs;
- Links;
- Image;
- IDs;
- Classes.

No modifiques nada todavía.

Prompt para CSS localizado

Esta Section ya funciona correctamente.

Class raíz:
.custom-business-intro

Necesito solamente:
- Padding superior e inferior de 72 px en desktop;
- 40 px en pantallas pequeñas;
- no modificar otras Sections;
- no modificar Bootstrap Classes.

Waclis utiliza Bootstrap 4.

No cambies HTML.
No agregues JavaScript.

Devuélveme solamente CSS limitado a .custom-business-intro.

Prompt para diagnosticar scroll horizontal

Esta Section creada en Waclis genera scroll horizontal en celular.

HTML:
[pegar solamente la Section]

CSS relacionado:
[pegar]

Busca:
- Width fija;
- Min Width;
- Margin lateral;
- Position;
- imágenes;
- Column;
- Padding.

No utilices overflow-x:hidden como solución.
No reescribas toda la Section.

Prompt para comparar desktop y mobile

Esta es la estructura de mi Section:

[pegar]

Objetivo:

Desktop:
texto | imagen

Mobile:
texto
imagen

Comprueba si el orden HTML permite ese recorrido sin utilizar CSS order o Direction reverse.

No modifiques el código.

Prompt para detectar CSS global

Este CSS fue generado para una Section de Waclis:

[pegar]

Busca selectores demasiado globales:

section
.container
.row
h2
p
a
img
button

Indica cuáles podrían afectar otras partes de la Página web.

No modifiques todavía el CSS.

Prompt para crear una variante

Tengo esta Section:

.custom-business-intro

Quiero una segunda variante:
.custom-business-intro-dark

Debe cambiar solamente:
- Background;
- color del Heading;
- color del Paragraph.

No dupliques todos los estilos de la sección base.

Genera únicamente CSS para la variante.

Buenas prácticas de este caso práctico

Recomendamos:

• comenzar por Section;

• utilizar Container conscientemente;

• utilizar Grid Row;

• mantener una jerarquía simple;

• definir orden mobile desde el comienzo;

• utilizar Heading correctamente;

• utilizar Paragraph para explicación;

• utilizar Link para navegación;

• completar Alt;

• utilizar Margin y Padding;

• evitar Height fija;

• evitar Position absolute;

• evitar grandes Margins laterales;

• utilizar Classes propias;

• mantener IDs únicos;

• revisar Linked styles;

• probar desktop;

• probar tablet;

• probar celular;

• probar todos los Links.

Errores frecuentes

Comenzar por colores antes de la estructura

Primero layout.

Agregar muchos Containers

Revisa Navigator.

Crear columnas con Margin

Utiliza Grid Row.

Mantener 6 + 6 en una pantalla estrecha

Apila cuando sea necesario.

Utilizar Direction reverse para arreglar un mal orden

Define primero un orden lógico.

Centrar verticalmente con Margin top

Utiliza alineación del Grid.

Utilizar H1 solamente porque se ve grande

Respeta jerarquía.

Crear espacio con <br>

Utiliza Margin/Padding.

Crear espacio con Paragraphs vacíos

Utiliza estilos.

Utilizar Columns vacías como espaciadores

Utiliza Grid y espacios reales.

Utilizar cinco CTA

Prioriza.

Utilizar Html Button para un destino URL sin necesidad

Utiliza Link.

Dejar URL #

Configura el destino real.

No actualizar Links clonados

Prueba todos.

No completar Alt

Revisa Image.

Deformar la imagen mediante Width/Height incompatibles

Mantén proporción.

Utilizar Width fija en la imagen

Puede romper mobile.

Utilizar Height fija en Section

Puede cortar contenido.

Utilizar Position absolute para todo

Utiliza Grid.

Utilizar overflow-x:hidden para ocultar errores

Corrige la causa.

Aplicar .row globalmente

Puede afectar todo el sitio.

Aplicar .container globalmente

Puede alterar otros layouts.

Aplicar img globalmente

Puede modificar muchas imágenes.

Agregar Bootstrap desde CDN

Waclis ya utiliza Bootstrap 4.

Agregar jQuery nuevamente

Evita dependencias duplicadas.

Agregar JavaScript a una sección estática

No es necesario.

Animar todo antes de terminar el diseño

Primero estructura y responsive.

Ocultar elementos en mobile para evitar corregirlos

Adapta primero.

No utilizar Navigator

Pierdes control de la jerarquía.

No guardar durante el proceso

Guarda en etapas lógicas.

No utilizar Ver página

El frontend es la comprobación final.

Flujo profesional recomendado

1. DEFINIR OBJETIVO
↓
2. DEFINIR CONTENIDO
↓
3. CREAR SECTION
↓
4. CONFIGURAR BOXED / AUTO
↓
5. REVISAR NAVIGATOR
↓
6. AGREGAR CONTAINER SI ES NECESARIO
↓
7. AGREGAR GRID ROW
↓
8. CREAR COLUMNAS
↓
9. DEFINIR RESPONSIVE
↓
10. DEFINIR ORDEN
↓
11. AGREGAR TEXTO
↓
12. AGREGAR CTA
↓
13. AGREGAR IMAGEN
↓
14. CONFIGURAR ALT
↓
15. AJUSTAR TYPOGRAPHY
↓
16. AJUSTAR MARGIN / PADDING
↓
17. REVISAR LINKED STYLES
↓
18. REVISAR DESKTOP
↓
19. REVISAR TABLET
↓
20. REVISAR CELULAR
↓
21. AGREGAR CSS SOLO SI ES NECESARIO
↓
22. GUARDAR CAMBIOS
↓
23. VER PÁGINA
↓
24. PROBAR LINKS
↓
25. COMPROBAR EN DISPOSITIVO REAL

Checklist de estructura

• Existe una Section clara.

• No tengo Containers innecesarios.

• Utilicé Grid Row.

• Existen únicamente las Columns necesarias.

• El orden del contenido es lógico.

• Navigator muestra una jerarquía comprensible.

• No utilicé Position absolute para la estructura principal.

• No utilicé Margins enormes para crear columnas.

• No utilicé elementos vacíos como espaciadores.

Checklist de contenido

• El texto superior aporta contexto.

• El Heading comunica una idea clara.

• El Heading utiliza un nivel semántico apropiado.

• El Paragraph es breve y comprensible.

• Existe una acción principal clara.

• El CTA utiliza un texto descriptivo.

• El segundo CTA realmente es necesario.

• Todos los Links tienen URL real.

• La imagen está relacionada con el contenido.

• Alt está correctamente configurado.

Checklist de diseño

• Existe suficiente Padding vertical.

• Las separaciones son coherentes.

• Typography presenta jerarquía.

• No todo está en Bold.

• El Paragraph es legible.

• El contraste es suficiente.

• La imagen mantiene proporción.

• Border radius es coherente con el sitio.

• Los CTA tienen jerarquía visual.

• Hover mantiene legibilidad.

• No utilicé efectos innecesarios.

Checklist responsive

• Desktop funciona.

• Tablet funciona.

• Celular funciona.

• Las columnas se apilan correctamente cuando corresponde.

• El texto aparece en un orden lógico.

• El Heading no ocupa demasiadas líneas.

• Los CTA no desbordan.

• La imagen no genera scroll horizontal.

• No existe Width rígida problemática.

• No existe Height fija problemática.

• No oculté elementos simplemente para arreglar el layout.

Checklist técnico

• Utilicé Classes propias cuando corresponde.

• Los IDs son únicos.

• Revisé Linked styles.

• No modifiqué .row globalmente.

• No modifiqué .container globalmente.

• No modifiqué img globalmente.

• No agregué Bootstrap adicional.

• No agregué jQuery adicional.

• No agregué JavaScript innecesario.

• El CSS adicional está localizado.

Checklist final

• Guardé los cambios.

• Utilicé Ver página.

• Probé CTA principal.

• Probé CTA secundario.

• Revisé la imagen.

• Revisé desktop.

• Revisé tablet.

• Revisé celular.

• Revisé un teléfono real cuando fue posible.

• No existe scroll horizontal.

• No se superpone con otras Sections.

• No afecta Header o Footer.

• El resultado sigue siendo comprensible sin animaciones.

En resumen

Crear una sección profesional desde cero no significa comenzar escribiendo HTML o CSS.

La base es:

SECTION
↓
CONTAINER
↓
GRID ROW
↓
COLUMNS
↓
COMPONENTES

Después

configuras:

CONTENIDO
↓
RESPONSIVE
↓
ESTILO

Y solo al final

si realmente lo necesitas:

CSS PERSONALIZADO

Para nuestro caso construimos

Desktop:

┌─────────────────────┬─────────────────────┐
│                     │                     │
│ TEXTO               │ IMAGEN              │
│                     │                     │
│ CTA                  │                     │
│                     │                     │
└─────────────────────┴─────────────────────┘

Y mobile

┌─────────────────────┐
│ TEXTO               │
│                     │
│ CTA                  │
├─────────────────────┤
│ IMAGEN              │
└─────────────────────┘

No necesitamos

position:absolute

Ni:

margin-left:400px

Ni:

height:600px

Ni:

JavaScript

El sistema de bloques ya ofrece las herramientas necesarias para construir una base sólida.

La metodología profesional es:

primero estructura, después contenido, luego responsive y finalmente estética.

Si inviertes ese orden, normalmente terminarás utilizando CSS para corregir problemas que en realidad pertenecían a la estructura.

Y recuerda:

la sección debe funcionar antes de empezar a decorarla.

Finalmente:

Guardar Cambios → Ver página → probar desktop, tablet, celular y todos los Links.

No existe un paso adicional de publicación.