¿Cómo utilizar títulos, párrafos, listas y citas en el Editor de bloques de Waclis?

El Editor de bloques de Waclis incluye diferentes componentes para agregar y organizar contenido textual dentro de una Página web.

Dentro de:

Componentes → Base

encontrarás, entre otros:

• Heading

• Paragraph

• Blockquote

• List

• Horizontal Rule

• Preformatted

Cada uno cumple una función diferente.

Aunque todos permiten trabajar con texto o ayudar a organizarlo, no deberían utilizarse indistintamente.

Elegir correctamente el componente ayuda a crear páginas:

• más claras;

• más organizadas;

• más fáciles de mantener;

• visualmente consistentes;

• con una jerarquía comprensible.

¿Qué componente debería utilizar?

Una guía rápida:

Ejemplo de estructura

Una sección informativa puede tener:

Heading
↓
Paragraph
↓
List
↓
Paragraph

Por ejemplo:

CARACTERÍSTICAS DEL SERVICIO

El servicio incluye las siguientes etapas:

- Relevamiento inicial
- Configuración
- Capacitación
- Puesta en marcha

El alcance final dependerá de las necesidades del proyecto.

Cada parte cumple una función diferente.

No utilices todos los textos de la misma manera

Una página donde todo se visualiza como:

TÍTULO GRANDE

TEXTO GRANDE

OTRO TEXTO GRANDE

OTRO TÍTULO GRANDE

pierde jerarquía.

El visitante necesita poder reconocer rápidamente:

• qué es un título;

• qué es una explicación;

• qué es una lista;

• qué es una cita;

• qué contenido pertenece a cada sección.

1. ¿Cómo utilizar Heading?

El componente Heading permite crear títulos y subtítulos.

Lo encontrarás en:

Componentes → Base → Heading

¿Para qué se utiliza?

Para identificar:

• una página;

• una sección;

• una subsección;

• una Card;

• un bloque de contenido;

• un tema específico.

Por ejemplo:

Nuestros servicios

Características principales

Cómo funciona

Preguntas frecuentes

Heading no es simplemente “texto grande”

Este concepto es importante.

Puedes hacer que un Paragraph tenga:

40 px

pero eso no lo convierte conceptualmente en un título.

Heading está pensado específicamente para definir una jerarquía de encabezados.

Configuración de Heading

Al seleccionar un Heading y abrir:

Contenido

encontrarás una opción:

Size

que permite elegir el nivel del Heading.

Por ejemplo:

• Heading 1;

• Heading 2;

• Heading 3;

• otros niveles disponibles.

También encontrarás en:

General

opciones como:

• Id;

• Class.

¿Qué significa Heading 1, Heading 2, Heading 3...?

Los niveles permiten organizar jerárquicamente el contenido.

Conceptualmente:

Heading 1
Página

    Heading 2
    Sección

        Heading 3
        Subsección

Ejemplo

Una página podría organizarse:

H1
Servicios para empresas

    H2
    Implementación

        H3
        Qué incluye

        H3
        Cómo trabajamos

    H2
    Capacitación

        H3
        Modalidades

No elijas el nivel solamente por el tamaño visual

Por ejemplo:

“Quiero que este título sea más pequeño, entonces lo cambio de Heading 2 a Heading 5.”

No debería ser la primera decisión.

Si el Heading sigue siendo conceptualmente una sección principal, puedes mantener su nivel y modificar su apariencia desde:

Estilo → Typography

Jerarquía y diseño son conceptos diferentes

Puedes tener:

Heading 2

con un tamaño de:

32 px

y otro Heading de menor nivel con:

24 px

según la identidad visual.

Heading 1

Normalmente se utiliza para el título principal del contenido.

Por ejemplo:

Soluciones para empresas

Evita utilizar muchos Heading 1 sin necesidad

Una estructura clara suele tener un título principal y después niveles inferiores para organizar las secciones.

Heading 2

Puede utilizarse para secciones principales:

Nuestros servicios

Beneficios

Cómo trabajamos

Heading 3

Puede utilizarse dentro de estas secciones.

Por ejemplo:

Mantenimiento preventivo

dentro de:

Nuestros servicios

Ejemplo completo

H1
Servicios tecnológicos

H2
Nuestros servicios

H3
Implementación

H3
Capacitación

H3
Soporte

H2
Cómo trabajamos

H3
Relevamiento

H3
Configuración

No es necesario que el usuario vea “H1” o “H2”

Es una estructura interna.

El visitante simplemente verá:

• títulos;

• subtítulos;

con su estilo correspondiente.

¿Cómo modificar el texto?

Selecciona el Heading correspondiente y reemplaza el contenido de ejemplo por el texto real.

Utiliza títulos:

• claros;

• relativamente breves;

• descriptivos.

Buenos ejemplos

Nuestros servicios

Cómo trabajamos

Características principales

Conoce nuestro equipo

Evita títulos genéricos

Información

Más

Contenido

si puedes explicar mejor qué encontrará el visitante.

Ejemplo

En lugar de:

Información

utiliza:

Información sobre envíos

Longitud del Heading

Un Heading puede tener varias palabras, pero evita convertirlo en un párrafo.

Por ejemplo:

Descubre todas las diferentes alternativas que tenemos disponibles para ayudarte en cada una de las distintas etapas de tu proyecto

puede ser demasiado extenso.

Mejor

Soluciones para cada etapa

y desarrollar el resto mediante Paragraph.

Personalizar Heading

Selecciona el elemento y utiliza:

Estilo → Typography

Puedes modificar, entre otros:

• Font size;

• Font weight;

• Font family;

• Text align;

• Line height;

• Letter spacing;

• Text decoration.

También puedes trabajar

• Margin;

• Padding;

• Text Color.

No utilices Margin excesivo para solucionar una mala estructura

Por ejemplo:

margin-top: 150px

para separar un título puede indicar que deberías revisar:

• Section;

• Container;

• Padding;

• orden del contenido.

Heading y responsive

Un Heading puede verse correctamente en desktop:

SOLUCIONES PARA EMPRESAS

pero ocupar demasiadas líneas en celular.

Revisa

• Font size;

• Line height;

• longitud del texto;

• Padding.

No reduzcas todos los títulos del sitio

si solamente uno tiene problemas.

Utiliza:

• Class;

• ID;

cuando necesites una excepción.

2. ¿Cómo utilizar Paragraph?

El componente Paragraph permite agregar texto explicativo.

Lo encontrarás en:

Componentes → Base → Paragraph

¿Cuándo utilizar Paragraph?

Para desarrollar:

• una explicación;

• una descripción;

• una introducción;

• información complementaria;

• instrucciones;

• contenido institucional.

Ejemplo

NUESTROS SERVICIOS

Acompañamos a empresas y organizaciones mediante diferentes soluciones adaptadas a las necesidades de cada proyecto.

Aquí:

NUESTROS SERVICIOS

es Heading.

Y:

Acompañamos a empresas...

es Paragraph.

Paragraph no debería utilizarse como Heading

Si necesitas un título:

utiliza Heading.

Tampoco conviertas cada oración en un Paragraph separado

Por ejemplo:

Trabajamos con empresas.

Tenemos diferentes soluciones.

Acompañamos cada proyecto.

Nuestro equipo puede ayudarte.

puede generar una estructura innecesariamente fragmentada.

Agrupa ideas relacionadas

Por ejemplo:

Trabajamos con empresas de diferentes sectores y acompañamos cada proyecto mediante soluciones adaptadas a sus necesidades.

Párrafos demasiado largos

En una Página web, un bloque de texto excesivamente extenso puede resultar difícil de recorrer.

Por ejemplo:

500 palabras seguidas...

sin:

• subtítulos;

• listas;

• espacios;

puede dificultar la lectura.

Divide el contenido

Puedes utilizar:

Heading

Paragraph

Heading

Paragraph

O:

Paragraph

List

Paragraph

Ejemplo

En lugar de:

Nuestro servicio incluye relevamiento inicial, análisis de necesidades, configuración, capacitación, implementación y acompañamiento posterior...

puedes utilizar:

El servicio contempla las principales etapas necesarias para la implementación:

- Relevamiento inicial
- Análisis
- Configuración
- Capacitación
- Puesta en marcha

Paragraph y Typography

Puedes modificar:

• Font size;

• Font weight;

• Line height;

• Text Color;

• Font family;

• Text align.

Line height es especialmente importante

Un Paragraph con líneas demasiado juntas puede resultar incómodo.

También evita separaciones exageradas

que hagan parecer que cada línea pertenece a un contenido diferente.

Ancho de lectura

En pantallas grandes, un Paragraph que ocupa todo el ancho:

────────────────────────────────────────────────────────────────────────────────────────────────────────

puede generar líneas demasiado largas.

Puedes limitar el contenido mediante

• Container;

• Grid Column;

• Max Width.

Ejemplo conceptual

       ┌──────────────────────────────┐
       │ Texto con ancho controlado   │
       │ para facilitar la lectura.   │
       └──────────────────────────────┘

No necesitas centrar todos los Paragraphs

La alineación izquierda suele ser cómoda para textos largos.

Texto centrado

puede funcionar para:

• introducciones breves;

• CTA;

• frases;

• pequeñas descripciones.

Ejemplo adecuado

NUESTROS SERVICIOS

Conoce las principales soluciones que ofrecemos.

centrado.

Ejemplo menos adecuado

Un texto institucional de:

300 palabras

centrado puede resultar difícil de leer.

3. ¿Cómo utilizar List?

El componente List permite organizar elementos en forma de lista.

Lo encontrarás en:

Componentes → Base → List

¿Cuándo utilizar una lista?

Cuando necesitas presentar:

• características;

• requisitos;

• pasos breves;

• elementos incluidos;

• ventajas;

• opciones;

• especificaciones.

Ejemplo

El servicio incluye:

- Configuración
- Capacitación
- Soporte
- Puesta en marcha

Lista vs Paragraph

Una lista facilita escanear contenido.

Comparemos.

Paragraph

El servicio incluye configuración, capacitación, soporte y puesta en marcha.

List

El servicio incluye:

- Configuración
- Capacitación
- Soporte
- Puesta en marcha

La segunda alternativa puede ser más fácil de recorrer.

No conviertas cualquier texto en lista

Por ejemplo:

- Somos una empresa fundada en...
- Nuestra misión...
- Nuestra historia...

puede ser menos natural que varios Paragraphs.

Utiliza List cuando los elementos tienen relación entre sí

Listas cortas

Por ejemplo:

- Diseño
- Producción
- Instalación

Listas extensas

Si tienes:

30 elementos

puede resultar más apropiado utilizar:

• varias categorías;

• Acordeón;

• Table;

• otra estructura.

Listas de características

Ejemplo:

Características:

- Multiusuario
- Reportes
- Integraciones
- Diseño responsive

Listas de requisitos

Antes de comenzar necesitarás:

- Acceso al panel
- Imágenes preparadas
- Textos definitivos

Listas de elementos incluidos

Incluye:

- Relevamiento
- Configuración
- Capacitación

Listas y pasos

Puedes utilizar una lista numerada para procesos simples.

Por ejemplo:

1. Ingresa al Editor.
2. Selecciona la sección.
3. Realiza los cambios.
4. Guarda.

Pero si el proceso necesita mayor explicación visual

puede ser mejor utilizar:

Timeline

Lista simple vs Timeline

Lista:

1. Relevamiento
2. Configuración
3. Capacitación

Timeline:

01
Relevamiento
Descripción...

↓

02
Configuración
Descripción...

↓

03
Capacitación
Descripción...

Utiliza la estructura proporcional a la importancia del contenido

No uses listas solamente para crear espacios

Los elementos de lista tienen una función específica.

Estilo de listas

Puedes personalizar mediante:

• Typography;

• Margin;

• Padding;

• color;

según la estructura.

Espacio entre elementos

Evita:

• Elemento 1
• Elemento 2
• Elemento 3

demasiado comprimidos si cada ítem tiene varias líneas.

Tampoco separes cada uno exageradamente

si forman parte del mismo grupo.

Iconos personalizados

Si necesitas una composición más visual:

✓ Característica A
✓ Característica B
✓ Característica C

puedes construirla mediante otros componentes y estilos.

No sustituyas automáticamente las viñetas por iconos

si una lista tradicional ya comunica correctamente.

4. ¿Cómo utilizar Blockquote?

El componente Blockquote permite representar una cita o fragmento destacado.

Lo encontrarás en:

Componentes → Base → Blockquote

Puede utilizarse para

• cita;

• frase;

• declaración destacada;

• fragmento editorial.

Ejemplo

“Cada proyecto comienza entendiendo qué necesita realmente el cliente.”

Blockquote vs Paragraph grande

Aunque visualmente puedes hacer que ambos se parezcan, Blockquote está específicamente orientado a una cita.

No utilices Blockquote simplemente para agrandar cualquier texto

Por ejemplo:

ENVÍOS GRATIS

puede ser mejor:

• Heading;

• Banner;

• CTA.

Cita atribuida

Puede acompañarse de:

“Texto de la cita.”

Nombre Apellido
Cargo

Recuerda

Si atribuyes una frase a una persona real:

comprueba que la atribución sea correcta.

Blockquote no significa Testimonio automáticamente

Puede contener una cita institucional.

Si representa la experiencia de un cliente

considera la sección:

Testimonios

Ejemplo de Blockquote editorial

“Una buena experiencia comienza reduciendo aquello que el usuario necesita descubrir por sí mismo.”

Frase propia de marca

También puede utilizarse cuando corresponda.

Estilo de Blockquote

Puedes modificar:

• Font size;

• Font weight;

• Font style según la configuración;

• color;

• Line height;

• Margin;

• Padding;

• Border;

• Background.

Ejemplo visual

│
│ “Texto de la cita destacado
│  dentro de la página.”
│

Una línea lateral puede ayudar a identificar visualmente la cita.

No necesitas copiar este diseño exactamente

Es solamente una posibilidad.

Blockquote dentro de una Card

También puede utilizarse:

╭─────────────────────────╮
│                         │
│ “Texto destacado...”    │
│                         │
│ Autor                   │
│                         │
╰─────────────────────────╯

5. ¿Cómo utilizar Horizontal Rule?

El componente Horizontal Rule permite insertar una separación visual horizontal.

Lo encontrarás en:

Componentes → Base → Horizontal Rule

¿Para qué sirve?

Para separar visualmente contenidos relacionados sin crear necesariamente una nueva Section.

Por ejemplo:

Información general

────────────────────────

Especificaciones

Puede ser útil dentro de

• artículos;

• Cards;

• textos largos;

• contenidos institucionales.

No lo utilices para separar todas las secciones

Las Sections ya pueden diferenciarse mediante:

• Padding;

• Background;

• espacio.

Ejemplo innecesario

Section A

────────────────────────

Section B

────────────────────────

Section C

────────────────────────

puede generar demasiado ruido.

Utilízalo cuando la línea aporta jerarquía

Horizontal Rule puede personalizarse

Según la estructura y los estilos aplicados puedes trabajar con:

• ancho;

• Margin;

• color;

• Border.

Separador completo

────────────────────────────────

Separador corto

       ───────────

Puede utilizarse como elemento decorativo.

No confundas Horizontal Rule con los Separators de Section

Dentro de la configuración de Section también existen controles como:

• Top Separator;

• Bottom Separator.

Estos pertenecen a la configuración de la Section.

Horizontal Rule es un componente independiente dentro del contenido.

6. ¿Cómo utilizar Preformatted?

El componente Preformatted permite mostrar texto respetando de manera especial su formato y espacios.

Lo encontrarás en:

Componentes → Base → Preformatted

¿Cuándo puede ser útil?

Para información donde el formato tiene importancia.

Por ejemplo:

Producto     Cantidad
ABC          10
XYZ          20

También puede utilizarse para

• ejemplos técnicos;

• texto monoespaciado;

• fragmentos donde los saltos y espacios deben mantenerse.

No lo utilices como Paragraph habitual

Para contenido normal:

utiliza Paragraph.

Preformatted tampoco es lo mismo que Code

El Editor también cuenta con un componente:

Code

dentro de Elementos.

Además existe:

Code editor

para editar código de la página.

Son herramientas diferentes.

Preformatted

se refiere a:

presentación de texto con formato preservado.

Code

puede utilizarse para presentar contenido de código.

Code editor

permite trabajar sobre código de la página.

No confundas estas herramientas

Ejemplo de Preformatted

Nombre:      Producto ABC
Código:      ABC-001
Categoría:   Equipamiento

Pero para datos estructurados

también puede ser mejor utilizar:

Table

dependiendo del contenido.

Preformatted vs Table

Preformatted:

Campo      Valor
Nombre     ABC
Código     123

Table:

Cuando los datos son realmente tabulares:

Table suele ser conceptualmente más adecuado.

Utiliza Preformatted cuando la conservación del formato textual sea parte importante del contenido

Construir una sección utilizando componentes de texto

Supongamos que quieres crear desde cero:

¿CÓMO FUNCIONA?

Nuestro proceso está organizado en tres etapas.

1. Relevamiento
2. Configuración
3. Puesta en marcha

Cada implementación puede adaptarse según las necesidades del proyecto.

Estructura

Puedes utilizar:

Section
└── Container
    ├── Heading
    ├── Paragraph
    ├── List
    └── Paragraph

Paso 1: agrega Section

Puedes partir de una estructura existente o crear la composición correspondiente.

Paso 2: agrega Heading

Desde:

Componentes → Base → Heading

Paso 3: escribe

¿Cómo funciona?

Paso 4: revisa Size

Selecciona el nivel de Heading adecuado para la jerarquía de la página.

Paso 5: agrega Paragraph

Escribe:

Nuestro proceso está organizado en tres etapas principales.

Paso 6: agrega List

Incluye:

Relevamiento
Configuración
Puesta en marcha

Paso 7: agrega otro Paragraph

Cada implementación puede adaptarse según las necesidades del proyecto.

Paso 8: personaliza

• Typography;

• Margin;

• Padding;

• colores.

Paso 9: revisa Navigator

Deberías identificar una estructura similar a:

Section
└── Container
    ├── Heading
    ├── Paragraph
    ├── List
    └── Paragraph

Esta jerarquía es mucho más fácil de mantener

que una composición construida mediante:

un único bloque enorme de texto

¿Cómo seleccionar correctamente cada texto?

Puedes hacerlo directamente en el lienzo.

Pero cuando existen muchos elementos:

utiliza Navigator.

Por ejemplo

Section
└── Container
    ├── Heading
    ├── Paragraph
    ├── Grid Row
    │   ├── Heading
    │   └── Paragraph
    └── Paragraph

Navigator te ayuda a reconocer cuál estás modificando.

Seleccionar padre

También puedes utilizar:

Seleccionar padre

desde la barra contextual.

Ejemplo

Seleccionaste:

Paragraph

pero necesitas modificar la:

Card

que lo contiene.

Utiliza Seleccionar padre hasta llegar al nivel correcto.

No elimines la Section completa

si solamente querías borrar un Paragraph.

Mover textos

Puedes utilizar:

• Mover elemento arriba;

• Mover elemento abajo;

• Arrastrar elemento;

según corresponda.

Por ejemplo

Antes:

Heading
List
Paragraph introductorio

Después

Heading
Paragraph introductorio
List

puede ser más lógico.

El orden afecta la lectura

No es solamente una decisión visual.

Clonar un Heading

Puede ser útil para mantener:

• tamaño;

• Class;

• estilo.

Por ejemplo

Tienes:

Heading
Características

y necesitas otro título equivalente:

Especificaciones

Puedes clonar el Heading y modificar su texto.

Pero revisa IDs

Si el Heading original posee:

id="caracteristicas"

la copia no debería conservar el mismo ID.

Clonar Paragraph

Puede ser útil para mantener estilo.

Pero no olvides reemplazar todo el contenido de ejemplo.

Clonar una unidad completa

Si tienes:

Card
├── Heading
└── Paragraph

y quieres crear otra Card:

no clones Heading y Paragraph por separado.

Clona la Card completa.

Esta regla continúa siendo fundamental

Eliminar contenido

Al utilizar el icono de eliminar:

Waclis no solicita confirmación.

Si eliminas accidentalmente

utiliza:

Deshacer

Cuanto más grande sea el elemento seleccionado

mayor será el contenido que puede eliminarse.

Por ejemplo

Eliminar:

Paragraph

elimina ese texto.

Eliminar:

Container

puede eliminar:

Heading
Paragraph
List
Button

que estaban dentro.

Revisa Navigator antes de eliminar estructuras grandes

Contenido y Estilo son diferentes

Cuando modificas:

Contenido

cambias lo que dice el elemento.

Cuando modificas:

Estilo

cambias cómo se presenta.

Por ejemplo

Heading:

Nuestros servicios

Contenido

Nuestros servicios
→ Cómo trabajamos

Estilo

32 px
→ 40 px

Mantén esta distinción

Linked styles en textos

Supongamos que varios Headings comparten una Class:

section-title

Si modificas Typography

puede aparecer el aviso:

Linked styles

indicando que otros elementos comparten el mismo estilo.

Esto puede ser deseable

Por ejemplo:

Nuestros servicios
Beneficios
Testimonios
Contacto

pueden compartir:

section-title

Así mantienes consistencia

No agregues IDs diferentes solamente para evitar Linked styles

si quieres que todos los títulos se vean iguales.

Cuándo crear una excepción

Si una sección necesita:

Heading más grande

puedes utilizar una Class adicional.

Por ejemplo:

section-title hero-title

Mantienes:

section-title

como base,

y:

hero-title

como excepción.

IDs en componentes de texto

Dentro de:

Contenido → General

puedes utilizar:

• Id;

• Class;

cuando el componente lo permita.

ID debe ser único

Por ejemplo:

id="servicios"

No utilices

id="servicios"

en tres Headings diferentes.

IDs pueden servir para anclas

Por ejemplo:

id="preguntas-frecuentes"

puede utilizarse como referencia interna cuando la estructura correspondiente lo permite.

Utiliza nombres descriptivos

Evita

id="texto1"

id="titulo2"

si puedes utilizar:

id="servicios"

Classes

Son ideales para estilos compartidos.

Por ejemplo:

section-title

section-description

feature-title

No reemplaces Classes estructurales existentes

si no comprendes su función.

Puedes agregar una nueva Class personalizada.

Estados Hover y textos

Dentro de Estilo encontrarás estados como:

• hover;

• active;

• nth-of-type(2n).

Un Heading normalmente no necesita Hover

si no es interactivo.

No hagas

Heading cambia de color al pasar el mouse

si eso hace pensar que puede seleccionarse.

Links de texto sí pueden utilizar Hover

porque son interactivos.

Paragraph tampoco suele necesitar Hover

Texto dentro de una Card clicable

Puede cambiar visualmente como parte del Hover general de la Card, pero mantén la interacción coherente.

Responsive de textos

Siempre revisa:

• mobile;

• tablet;

• desktop.

Especialmente

• Heading grande;

• textos centrados;

• listas;

• palabras largas;

• Blockquote.

Ejemplo

Desktop:

SOLUCIONES PARA EMPRESAS Y ORGANIZACIONES

puede ocupar dos líneas.

Mobile

puede ocupar:

SOLUCIONES
PARA EMPRESAS
Y
ORGANIZACIONES

Puede ser necesario

• reducir Font size;

• ajustar Line height;

• simplificar el título.

No ocultes un Heading en celular

solamente porque ocupa demasiado espacio.

Corrige el diseño.

Paragraph responsive

Un texto de:

4 líneas desktop

puede transformarse en:

8 líneas mobile

Esto es normal

Permite que el contenedor crezca.

Evita Height fijo en contenedores con texto variable

List responsive

Normalmente una lista se adapta naturalmente.

Pero revisa:

• Padding izquierdo;

• iconos;

• palabras largas.

Blockquote responsive

Una cita con Font size muy grande puede ocupar demasiada pantalla.

Ajusta el tamaño

manteniendo su protagonismo.

Horizontal Rule responsive

Comprueba que no tenga:

width fijo

mayor que el contenedor.

Preformatted responsive

Este componente requiere especial atención.

El contenido preformateado puede contener líneas que no se ajustan automáticamente de la misma manera que un Paragraph.

Por ejemplo

CódigoProducto          DescripciónMuyExtensa          Cantidad

puede superar el ancho de un celular.

Por eso comprueba realmente el resultado en móvil

Si el contenido es tabular

puede ser mejor utilizar Table.

Textos y colores

Utiliza suficiente contraste.

Evita

gris muy claro
sobre
fondo blanco

para información importante.

No utilices colores diferentes para cada Paragraph

sin una razón.

Jerarquía mediante color

Puede funcionar:

Heading → oscuro
Paragraph → gris secundario
Link → color de marca

Mantén consistencia.

Text Color y Background

Si cambias Background de la Section:

revisa todos los textos dentro.

Por ejemplo

Background:

negro

puede requerir:

Heading blanco
Paragraph gris claro

No cambies solamente el Heading

y olvides Paragraph.

Texto sobre Background Image

Necesita:

• contraste;

• Overlay cuando corresponda.

No confíes en que una fotografía siempre tendrá la misma luminosidad.

Anchura y legibilidad

Un error común es:

Heading
Paragraph de 200 palabras ocupando 100 % del ancho

en una pantalla muy grande.

Utiliza Container

o un ancho controlado.

Por ejemplo

            TÍTULO

       Texto explicativo
       con un ancho más
       cómodo de lectura.

Espaciado vertical

Una jerarquía habitual:

Heading

pequeño espacio

Paragraph

espacio mayor

siguiente bloque

Evita:

Heading



gran espacio



Paragraph

si parece que no pertenecen a la misma sección.

Margin inferior del Heading

puede ser menor que el espacio entre secciones.

Padding de Section

sirve para separar grupos completos.

Margin de elementos

sirve para organizar relaciones internas.

No resuelvas todo con Margin

Utiliza la estructura adecuada.

Textos alineados en Cards

Mantén consistencia.

Por ejemplo:

[ Card ]
Título
Texto

[ Card ]
Título
Texto

[ Card ]
Título
Texto

Evita

Card 1 → centrada
Card 2 → izquierda
Card 3 → derecha

sin intención.

Diferentes longitudes

Una Card:

Título corto
Descripción de 10 palabras

y otra:

Título muy extenso...
Descripción de 80 palabras...

pueden desequilibrar una grilla.

Resume cuando sea posible

No inventes contenido para igualar alturas

Texto real antes del diseño final

Una recomendación importante:

reemplaza primero el contenido de ejemplo por el contenido real.

Después ajusta el diseño.

¿Por qué?

Una plantilla puede verse perfecta con:

Lorem ipsum

pero romperse cuando introduces:

Responsable de Desarrollo de Negocios Internacionales

Diseña con el contenido real

Texto de ejemplo

Antes de guardar comprueba que no quede:

Lorem ipsum

Your title

Sample text

John Doe

Este error es especialmente común

después de clonar componentes.

Edición HTML de textos

El botón contextual:

Editar código HTML <>

permite abrir el HTML del elemento seleccionado.

Puede ser útil para usuarios avanzados

si necesitas comprender la estructura exacta.

Pero no necesitas editar HTML para

• cambiar un Heading;

• modificar un Paragraph;

• cambiar una lista;

• modificar Typography.

Utiliza primero las herramientas visuales.

Code editor global

Tampoco necesitas abrir:

Code editor

para modificar textos normales.

Recuerda la diferencia

Editor visual
→ contenido habitual

<>
→ HTML del elemento seleccionado

Code editor
→ código amplio de la página

Evita modificaciones de código innecesarias

CSS personalizado para Typography

En personalizaciones avanzadas puedes utilizar Classes como:

section-title
section-description
content-list
highlight-quote

Ejemplo

.mi-seccion .section-title {
    font-size: 40px;
    line-height: 1.2;
}

Paragraph

.mi-seccion .section-description {
    font-size: 18px;
    line-height: 1.6;
}

Responsive

@media (max-width: 768px) {
    .mi-seccion .section-title {
        font-size: 30px;
    }
}

Estas Classes son ejemplos

No representan nombres obligatorios de Waclis.

Evita CSS global

No utilices:

h2 {
    font-size: 40px;
}

si quieres modificar solamente un título.

Tampoco

p {
    font-size: 18px;
}

si no quieres afectar todos los Paragraphs.

Utiliza scope

Por ejemplo:

.mi-seccion h2 {
}

o preferentemente una Class específica.

No utilices !important como primera solución

Primero revisa:

• selector;

• Class;

• Linked styles;

• especificidad.

Utilizar IA para mejorar títulos

Puedes utilizar ChatGPT, Claude o Gemini.

Por ejemplo:

Tengo este título para una sección:

[texto]

Necesito:
- máximo 6 palabras;
- español neutro;
- mantener exactamente la misma idea;
- tono profesional.

Genera 5 alternativas.

No inventes beneficios ni información.

IA para resumir Paragraphs

Tengo este texto:

[pegar]

Necesito reducirlo a un máximo de 45 palabras para una Página web.

Mantén todos los datos importantes.

Utiliza español neutro.

No agregues información nueva.

IA para transformar un Paragraph en List

Este párrafo contiene varios elementos:

[texto]

Transforma únicamente aquellos elementos que realmente forman una enumeración en una lista.

No cambies los datos.
No inventes nuevos puntos.

IA para revisar jerarquía

Tengo esta estructura de contenidos:

[pegar títulos y textos]

Clasifica qué debería ser:
- Heading principal;
- Heading de sección;
- Heading de subsección;
- Paragraph;
- List.

No cambies el contenido.

IA para reducir títulos demasiado largos

Tengo estos títulos:

[lista]

Redúcelos a un máximo de 5 palabras.

Mantén el significado.

No agregues términos comerciales.

IA para mejorar listas

Tengo esta lista:

[lista]

Revisa:
- si todos los puntos siguen la misma estructura;
- si existen repeticiones;
- si alguno debería ser un Paragraph separado.

No inventes elementos.

IA para una Blockquote

Tengo esta idea institucional:

[texto]

Quiero convertirla en una frase destacada de máximo 18 palabras.

Debe ser una frase propia de la marca.

No la atribuyas a ninguna persona.
No inventes datos.

IA para CSS responsive

Estoy personalizando textos dentro de una sección de Waclis.

La sección utiliza:
.mi-seccion

El título:
.section-title

La descripción:
.section-description

Necesito:
- título de 42 px en desktop;
- 30 px en celular;
- Line height 1.2;
- descripción de 18 px;
- ancho máximo del texto de 760 px;
- centrado horizontal;
- no afectar otros títulos o párrafos.

Waclis utiliza Bootstrap 4.

No modifiques HTML.
No agregues JavaScript.

Devuélveme solamente CSS limitado a .mi-seccion.

IA para revisar HTML

Este es el HTML de una sección de Waclis:

[pegar únicamente la sección]

Identifica:
- Heading;
- Paragraphs;
- Lists;
- Blockquote;
- Classes compartidas.

No reescribas el HTML.

Indícame qué elemento debería seleccionar para modificar cada contenido.

Errores frecuentes

Utilizar Paragraph como título

Utiliza Heading.

Elegir Heading 5 solo porque visualmente es más pequeño

Define primero la jerarquía y después el estilo.

Utilizar muchos Heading 1 sin necesidad

Mantén una estructura lógica.

Escribir títulos excesivamente largos

Resume.

Convertir cada oración en un Paragraph separado

Agrupa ideas relacionadas.

Crear bloques enormes de texto sin subtítulos

Divide el contenido.

Centrar textos muy extensos

Revisa legibilidad.

Utilizar List para cualquier contenido

Las listas son para elementos relacionados.

Utilizar Paragraph para una enumeración muy larga

Considera List.

Utilizar Blockquote solamente para agrandar texto

Utiliza Heading o Typography cuando corresponda.

Presentar un Testimonio como una cita genérica

Considera la sección Testimonios.

Atribuir una cita sin verificarla

Comprueba autoría.

Utilizar Horizontal Rule entre todas las Sections

Puede generar ruido visual.

Confundir Horizontal Rule con los Separators de Section

Son herramientas diferentes.

Utilizar Preformatted como Paragraph normal

Utiliza Paragraph para texto habitual.

Confundir Preformatted con Code editor

Son conceptos diferentes.

Dejar Lorem ipsum

Reemplaza todo el contenido de ejemplo.

Clonar un título con un ID y no cambiarlo

Los IDs deben ser únicos.

Eliminar un Container cuando querías borrar un Paragraph

Revisa Navigator.

Usar Font size como única forma de crear jerarquía

Utiliza Heading correctamente.

Utilizar Font size enorme en móvil

Adapta responsive.

Utilizar Height fijo alrededor de textos variables

Permite que el contenido crezca.

Aplicar CSS global a h2

Puede afectar muchos títulos.

Aplicar CSS global a p

Puede afectar toda la Página web.

Modificar HTML para un cambio que puede realizarse visualmente

Utiliza primero Contenido y Estilo.

Utilizar muchos estilos diferentes de texto

Mantén una identidad visual consistente.

Buenas prácticas

Recomendamos:

• utilizar Heading para títulos;

• mantener una jerarquía lógica;

• utilizar Paragraph para explicaciones;

• utilizar List para enumeraciones;

• utilizar Blockquote para citas;

• utilizar Horizontal Rule con moderación;

• utilizar Preformatted únicamente cuando el formato sea relevante;

• escribir primero contenido real;

• mantener títulos breves;

• dividir textos extensos;

• controlar ancho de lectura;

• utilizar Line height adecuado;

• mantener colores con suficiente contraste;

• utilizar Navigator;

• aprovechar Linked styles;

• mantener IDs únicos;

• adaptar Typography a celular;

• limitar CSS al contenido correspondiente;

• utilizar código solamente cuando sea necesario;

• revisar mediante Ver página.

Flujo recomendado

1. DEFINIR QUÉ CONTENIDO NECESITAS
↓
2. ELEGIR EL COMPONENTE CORRECTO
↓
3. AGREGARLO DESDE COMPONENTES
↓
4. REEMPLAZAR EL CONTENIDO DE EJEMPLO
↓
5. REVISAR LA JERARQUÍA
↓
6. UTILIZAR NAVIGATOR
↓
7. CONFIGURAR HEADING SIZE CUANDO CORRESPONDA
↓
8. PERSONALIZAR TYPOGRAPHY
↓
9. AJUSTAR MARGIN / PADDING
↓
10. REVISAR LINKED STYLES
↓
11. REVISAR IDS / CLASSES
↓
12. COMPROBAR DESKTOP
↓
13. COMPROBAR TABLET
↓
14. COMPROBAR CELULAR
↓
15. GUARDAR CAMBIOS
↓
16. VER PÁGINA

Checklist antes de finalizar

• Utilicé Heading para los títulos.

• La jerarquía de Headings tiene sentido.

• No elegí niveles solamente por el tamaño visual.

• Los títulos son claros.

• Los títulos tienen una longitud razonable.

• Utilicé Paragraph para textos explicativos.

• Dividí textos excesivamente largos.

• El ancho de lectura es cómodo.

• Line height es adecuado.

• Utilicé List cuando realmente existe una enumeración.

• Los elementos de la lista siguen una estructura consistente.

• Utilicé Blockquote solamente cuando corresponde.

• Verifiqué la atribución de citas cuando existe.

• Utilicé Horizontal Rule con moderación.

• No confundí Horizontal Rule con los Separators de Section.

• Utilicé Preformatted solamente cuando necesito conservar el formato.

• No confundí Preformatted con Code o Code editor.

• No quedan textos de ejemplo.

• No queda Lorem ipsum.

• Revisé Navigator.

• No eliminé contenedores por accidente.

• Los IDs personalizados son únicos.

• Las Classes compartidas tienen sentido.

• Linked styles tiene el alcance esperado.

• Los estilos tipográficos son consistentes.

• Existe suficiente contraste.

• Desktop se ve correctamente.

• Tablet se ve correctamente.

• Celular se ve correctamente.

• Los títulos no desbordan.

• Los Paragraphs no se cortan.

• Las listas se visualizan correctamente.

• Preformatted no provoca un overflow inesperado.

• No utilicé CSS global innecesario.

• No edité HTML si podía resolverlo visualmente.

• Guardé los cambios.

• Revisé el resultado mediante Ver página.

En resumen

Los principales componentes de texto del Editor de bloques cumplen funciones diferentes:

HEADING
→ título

PARAGRAPH
→ explicación

LIST
→ enumeración

BLOCKQUOTE
→ cita o frase destacada

HORIZONTAL RULE
→ separación visual

PREFORMATTED
→ texto cuyo formato necesita preservarse

Una estructura bien organizada puede ser tan simple como:

Section
└── Container
    ├── Heading
    ├── Paragraph
    ├── List
    └── Paragraph

No necesitas resolver todos los contenidos mediante:

• HTML;

• CSS;

• Code editor.

Para la mayoría de los casos:

utiliza los componentes adecuados y personalízalos mediante Contenido y Estilo.

En el caso de Heading, recuerda una regla fundamental:

el nivel del Heading define su jerarquía; Font size define su apariencia.

No son la misma cosa.

Utiliza Navigator cuando necesites comprobar exactamente qué elemento estás seleccionando y ten especial cuidado antes de eliminar contenedores que poseen varios textos dentro.

Si utilizas Classes compartidas y aparece:

Linked styles

puede ser perfectamente correcto que diferentes títulos o Paragraphs mantengan una apariencia común.

Para excepciones:

• Class adicional;

• ID único.

Y siempre revisa responsive.

Un título que funciona en desktop puede necesitar un tamaño diferente en celular, mientras que un Preformatted puede requerir especial cuidado para no provocar scroll horizontal.

Finalmente:

Guardar Cambios → Ver página → revisar jerarquía → leer el contenido completo → comprobar celular.

Una buena página no necesita tener muchos estilos de texto.

Necesita que el visitante pueda reconocer inmediatamente:

qué es importante, qué lo explica y cómo se relaciona cada contenido con el siguiente.