¿Cómo utilizar Navigator, jerarquías y estilos compartidos en el Editor de bloques de Waclis?

Cuando trabajas con diseños sencillos dentro del Editor de bloques de Waclis, normalmente puedes seleccionar un texto, una imagen o un botón directamente desde la pantalla y modificarlo.

Pero a medida que una sección se vuelve más compleja pueden aparecer situaciones como:

• haces clic en una imagen y se selecciona su enlace;

• cambias el fondo de una tarjeta y se modifican varias;

• eliminas una columna y desaparecen también sus textos e imágenes;

• intentas mover un botón y termina fuera de su estructura;

• cambias un estilo y afecta otros elementos;

• no sabes qué contenedor controla el espacio o el fondo;

• resulta difícil seleccionar la Section completa.

Para trabajar correctamente en estos casos es fundamental comprender tres conceptos:

1. Navigator

2. Jerarquía de elementos

3. Estilos compartidos o Linked styles

Estos conceptos te permiten entender cómo está construido un bloque y realizar modificaciones de manera mucho más precisa.

¿Qué es Navigator?

Navigator es una herramienta del Editor de bloques que muestra la estructura jerárquica de los elementos que forman el contenido.

En lugar de ver únicamente el resultado visual, Navigator permite ver qué elementos están dentro de otros.

Por ejemplo, una composición que visualmente se ve así:

┌─────────────────────────────────────┐
│                                     │
│  [ IMAGEN ]    Título               │
│                Descripción          │
│                [ VER MÁS ]          │
│                                     │
└─────────────────────────────────────┘

puede estar construida internamente de esta manera:

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

Navigator permite visualizar esta estructura y seleccionar exactamente el nivel que necesitas.

¿Por qué existe una jerarquía?

Una Página web no está formada por elementos independientes colocados libremente sobre la pantalla.

Habitualmente unos elementos contienen a otros.

Por ejemplo:

Section
└── Container
    └── Grid Row
        └── Grid Column
            └── Card
                ├── Image
                ├── Heading
                ├── Paragraph
                └── Button

Cada nivel cumple una función diferente.

La Section puede controlar el fondo general.

El Container puede limitar el ancho.

El Grid Row organiza la fila.

La Grid Column determina el espacio que ocupa la columna.

La Card agrupa un conjunto de contenido.

Image, Heading, Paragraph y Button son los elementos internos.

Padre, hijo y elementos hermanos

Para comprender Navigator es útil conocer tres conceptos sencillos.

Elemento padre

Un elemento padre contiene otro elemento.

Por ejemplo:

Link
└── Image

Aquí:

Link es el padre de Image.

Elemento hijo

Un elemento hijo se encuentra dentro de otro.

En el ejemplo anterior:

Image es hijo de Link.

Elementos hermanos

Son elementos que se encuentran dentro del mismo padre.

Por ejemplo:

Card
├── Image
├── Heading
├── Paragraph
└── Button

Image, Heading, Paragraph y Button son elementos hermanos porque todos pertenecen a la misma Card.

¿Por qué es importante entender esto?

Porque muchas propiedades dependen del nivel seleccionado.

Por ejemplo:

Quieres aumentar el espacio interno de toda una tarjeta.

Si seleccionas:

Paragraph

y agregas Padding, solamente modificarás el párrafo.

Si seleccionas:

Card

y agregas Padding, modificarás el espacio interior de toda la tarjeta.

Ejemplo visual

Tienes:

┌───────────────────────┐
│ Imagen                │
│ Título                │
│ Texto                 │
│ Botón                 │
└───────────────────────┘

Quieres obtener:

┌───────────────────────┐
│                       │
│   Imagen              │
│   Título              │
│   Texto               │
│   Botón               │
│                       │
└───────────────────────┘

En este caso conviene agregar Padding al contenedor de la tarjeta, no a cada elemento individual.

Navigator te ayuda a localizar ese contenedor.

¿Cómo abrir y utilizar Navigator?

Dentro del Editor de bloques accede a:

Navigator

Se mostrará una estructura formada por diferentes elementos.

Por ejemplo:

Section
Section
Link
Image
Link
Image
Link
Image

Los elementos anidados aparecen representados jerárquicamente.

Puedes seleccionar cualquiera de ellos directamente desde Navigator.

Seleccionar desde Navigator

Haz clic sobre el nombre del elemento.

Waclis:

• seleccionará ese componente;

• lo identificará en el área visual;

• mostrará sus propiedades;

• permitirá trabajar con Contenido, Estilo y Avanzado.

Esto resulta especialmente útil cuando dos elementos ocupan prácticamente el mismo espacio.

Ejemplo: imagen dentro de un enlace

Una estructura puede ser:

Link
└── Image

Si haces clic sobre la fotografía puedes terminar seleccionando Image.

Pero si quieres modificar la URL, necesitas seleccionar:

Link

Desde Navigator puedes hacerlo directamente.

Ejemplo: seleccionar la Section completa

Tienes una sección con:

• título;

• imagen;

• texto;

• botones;

• columnas.

Quieres cambiar:

el fondo de toda la sección.

Intentar hacer clic sobre una zona vacía puede resultar incómodo.

En Navigator puedes seleccionar:

Section

y posteriormente modificar:

• Background;

• Overlay;

• Container width;

• Container height;

• separadores;

• otros estilos.

Secciones de Página como alternativa

También puedes utilizar:

Secciones de Página

cuando quieres localizar las grandes secciones que ya forman parte del contenido.

Desde allí puedes seleccionar una Section y acceder a configuraciones como:

• Title;

• Container width;

• Container height;

• Background;

• Overlay;

• Top Separator;

• Bottom Separator.

Navigator y Secciones de Página son herramientas complementarias.

Navigator muestra más detalle

Puedes pensar:

Secciones de Página

→ grandes secciones.

Navigator

→ estructura interna detallada.

Seleccionar padre

Además de Navigator, la barra de herramientas del elemento seleccionado incluye:

Seleccionar padre

Esta función permite subir progresivamente dentro de la jerarquía.

Por ejemplo:

Section
└── Container
    └── Grid Row
        └── Grid Column
            └── Link
                └── Image

Tienes seleccionada:

Image

Primer Seleccionar padre

Pasas a:

Link

Segundo

Pasas a:

Grid Column

Tercero

Pasas a:

Grid Row

Y así sucesivamente

Puedes llegar hasta:

Section

Navigator o Seleccionar padre: ¿cuál utilizar?

Ambos sirven para navegar por la estructura.

Utiliza Seleccionar padre cuando:

ya tienes seleccionado un elemento interno y quieres subir rápidamente.

Por ejemplo:

Image
↑
Card

Utiliza Navigator cuando:

quieres ver toda la estructura o desplazarte directamente hacia un elemento específico.

Por ejemplo:

Section
├── Card
├── Card
├── Card
└── CTA

Puedes seleccionar directamente CTA sin recorrer todos los niveles.

La ruta inferior también muestra jerarquía

En la parte inferior del Editor de bloques puedes encontrar una ruta similar a:

body > section > div > a > img

Esta ruta representa la posición del elemento dentro de la estructura HTML.

Por ejemplo:

img

está dentro de:

a

que está dentro de:

div

y así sucesivamente.

Es otra referencia útil para comprender qué elemento tienes seleccionado.

No necesitas conocer HTML para utilizar Navigator

Aunque la estructura se corresponde con elementos HTML, puedes utilizar Navigator sin conocimientos de programación.

Puedes pensar simplemente en:

CAJA GRANDE
└── CAJA
    └── FILA
        └── COLUMNA
            └── CONTENIDO

Lo importante es comprender:

qué elemento contiene a cuál.

Una estructura habitual de Waclis

Cuando construyes una sección desde cero puedes encontrarte con algo similar a:

Section
└── Container
    └── Grid Row
        ├── Grid Column
        │   └── Componentes
        │
        └── Grid Column
            └── Componentes

Esta organización facilita:

• responsive;

• alineación;

• distribución;

• mantenimiento;

• personalización.

Section

Es uno de los niveles generales.

Puede controlar aspectos como:

• ancho;

• altura;

• fondo;

• Overlay;

• separadores;

• estilos generales.

Container

Agrupa y limita el contenido dentro de la Section.

Puede permitir que:

FONDO DE SECTION → ancho completo

CONTENIDO → ancho contenido

Esto es muy habitual en diseño web.

Grid Row

Organiza una fila.

Dentro puede contener varias columnas.

Grid Column

Representa cada columna de la fila.

Por ejemplo:

Grid Row
├── Grid Column 6
└── Grid Column 6

puede representar dos columnas iguales.

Componentes internos

Finalmente aparecen elementos como:

• Heading;

• Paragraph;

• Image;

• Button;

• Link;

• Card;

• Form;

• Gallery;

• otros componentes.

¿Qué sucede si un componente queda en el nivel incorrecto?

Supongamos que quieres:

Grid Row
├── Grid Column
│   └── Image
│
└── Grid Column
    └── Paragraph

Pero después de arrastrar obtienes:

Grid Row
├── Image
├── Grid Column
└── Grid Column
    └── Paragraph

Visualmente puede parecer aceptable en determinadas condiciones, pero la estructura ya no es la esperada.

Esto puede generar problemas en:

• responsive;

• alineación;

• anchos;

• mantenimiento.

Navigator permite detectar estos problemas

Si algo se ve extraño después de mover un elemento:

1. abre Navigator;

2. localiza el componente;

3. comprueba su padre;

4. verifica si se encuentra dentro de la columna correcta.

Muchas veces el problema no está en el CSS.

Está en la estructura.

Ejemplo: botón fuera de su tarjeta

Quieres:

Card
├── Image
├── Heading
├── Paragraph
└── Button

pero Navigator muestra:

Card
├── Image
├── Heading
└── Paragraph

Button

El botón quedó fuera de la Card.

Puede verse cerca visualmente, pero ya no pertenece a la misma estructura.

¿Por qué importa?

Si posteriormente:

• mueves Card;

• cambias su fondo;

• agregas Padding;

• clonas Card;

• eliminas Card;

el botón no acompañará esos cambios porque quedó fuera.

Navigator antes de clonar

Supongamos que quieres duplicar:

┌─────────────────────┐
│ Imagen              │
│ Servicio            │
│ Texto               │
│ Botón               │
└─────────────────────┘

Antes de utilizar Clonar elemento, comprueba Navigator.

Si seleccionaste:

Heading

solo duplicarás el título.

Si seleccionaste:

Card

duplicarás toda la estructura.

Navigator antes de eliminar

Lo mismo ocurre con Eliminar.

Si seleccionas:

Paragraph

desaparece solamente el texto.

Si seleccionas:

Grid Column

pueden desaparecer:

• imagen;

• título;

• texto;

• botón;

si todos están dentro de esa columna.

Recuerda que Waclis no solicita confirmación al eliminar.

Jerarquía y Margin

La jerarquía también influye al aplicar espacios.

Supongamos:

Section
└── Card
    ├── Heading
    └── Paragraph

Quieres separar la Card de la siguiente Card.

Puedes necesitar:

Margin sobre Card

Pero si quieres espacio dentro

Quieres:

┌───────────────────┐
│                   │
│   Título          │
│   Texto           │
│                   │
└───────────────────┘

Entonces probablemente necesites:

Padding sobre Card

No Padding sobre Heading.

Jerarquía y Background Color

Supongamos:

Section
└── Container
    └── Card
        └── Heading

Quieres cambiar el fondo de la tarjeta.

Si seleccionas Heading:

cambiará el fondo del título.

Si seleccionas Card:

cambiará la tarjeta.

Si seleccionas Section:

puede cambiar toda la sección.

Una misma propiedad puede producir resultados muy diferentes

Por ejemplo:

Background Color

no sabe qué quieres colorear.

Simplemente se aplica al elemento que estás modificando.

Por eso la selección correcta es tan importante.

Jerarquía y Border

Quieres agregar un borde alrededor de:

Imagen + título + texto

Si cada componente recibe Border tendrás:

[Imagen con borde]

[Título con borde]

[Texto con borde]

Pero probablemente quieres:

┌──────────────────────┐
│ Imagen               │
│ Título               │
│ Texto                │
└──────────────────────┘

En ese caso selecciona el contenedor que agrupa todos esos elementos.

Jerarquía y Border radius

Lo mismo ocurre con esquinas redondeadas.

Si quieres redondear:

la Card completa

selecciona Card.

Si seleccionas solamente Image, el Border radius se aplicará únicamente a la imagen.

Jerarquía y animaciones

Supongamos:

Card
├── Image
├── Heading
└── Paragraph

Puedes aplicar una animación a:

• Image;

• Heading;

• Paragraph;

por separado.

Pero si quieres que toda la tarjeta aparezca como una unidad, selecciona:

Card

y utiliza:

Avanzado → Animate on scroll

Jerarquía y responsive

La estructura también controla cómo se reorganiza el contenido en diferentes pantallas.

Por ejemplo:

Grid Row
├── Grid Column
│   └── Image
│
└── Grid Column
    └── Text

puede adaptarse correctamente:

Desktop:
[ IMAGEN ] [ TEXTO ]

Mobile:
[ IMAGEN ]

[ TEXTO ]

Pero si Text quedó fuera de Grid Column, el comportamiento podría ser diferente.

Cuando un problema responsive parece inexplicable

Antes de escribir CSS:

1. abre Navigator;

2. comprueba la estructura;

3. revisa padres e hijos;

4. verifica Grid Row;

5. verifica Grid Columns;

6. comprueba el orden.

Una jerarquía incorrecta puede ser la causa del problema.

¿Qué son los estilos compartidos?

Además de la estructura, existe otro concepto importante:

varios elementos pueden compartir estilos.

Esto suele ocurrir mediante clases.

Por ejemplo:

Card 1 → .servicio-card
Card 2 → .servicio-card
Card 3 → .servicio-card

Las tres utilizan:

servicio-card

¿Qué significa esto?

Que una regla visual asociada a esa clase puede afectar las tres tarjetas.

Por ejemplo:

.servicio-card
→ fondo blanco
→ borde
→ padding
→ border radius

Las tres pueden recibir esas propiedades.

Linked styles

Cuando Waclis detecta que el estilo seleccionado está relacionado con varios elementos, puede mostrar una advertencia:

Linked styles

La advertencia indica que esos estilos están vinculados y pueden afectar más de un elemento.

También puede indicar cuántos elementos se encuentran asociados.

¿Linked styles es un problema?

No necesariamente.

En muchas situaciones es exactamente lo que necesitamos.

Por ejemplo, tienes:

[ Servicio 1 ]

[ Servicio 2 ]

[ Servicio 3 ]

Quieres que las tres tarjetas tengan:

• mismo fondo;

• mismo Padding;

• mismo Border radius;

• mismo Hover.

Utilizar una clase compartida es una forma correcta de mantener consistencia.

Ejemplo de estilo compartido útil

Card 1 → .beneficio-card
Card 2 → .beneficio-card
Card 3 → .beneficio-card

Todas deben tener:

fondo claro
20px de padding
bordes redondeados

Una misma regla permite mantenerlas iguales.

¿Cuándo Linked styles genera confusión?

Cuando tú esperabas modificar solamente un elemento.

Por ejemplo:

Tienes:

Card 1
Card 2
Card 3

Seleccionas Card 2.

Cambias:

Background Color

y de repente cambian:

Card 1
Card 2
Card 3

Puede ocurrir porque las tres comparten el mismo estilo.

Seleccionar un elemento no siempre significa modificar solamente ese elemento

Este concepto es fundamental.

Puedes tener seleccionada:

una única Card

pero la propiedad que estás modificando puede corresponder a:

una Class compartida por varias Cards.

Por eso:

selección visual y alcance del estilo no siempre son lo mismo.

¿Qué hacer si varios elementos cambian?

Si el resultado no era el esperado:

1. utiliza Deshacer;

2. comprueba qué elemento está seleccionado;

3. revisa la advertencia Linked styles;

4. abre Contenido;

5. comprueba Class;

6. comprueba ID.

Class e ID

Muchos componentes muestran:

• ID;

• Class.

Estos atributos son importantes para comprender los estilos compartidos.

Class

Una Class está pensada para poder utilizarse en varios elementos.

Por ejemplo:

producto-destacado

puede utilizarse en:

Card 1
Card 2
Card 3
Card 4

ID

Un ID permite identificar un elemento específico.

Por ejemplo:

producto-destacado-principal

Un ID debe mantenerse único dentro de la página.

La propia advertencia Linked styles puede recomendar un ID

Cuando varios elementos comparten estilos y necesitas aplicar una modificación solamente a uno, Waclis puede recomendar utilizar un ID único.

Esto permite crear una referencia específica para ese elemento.

Ejemplo

Tienes:

Card 1 → class="servicio-card"

Card 2 → class="servicio-card"

Card 3 → class="servicio-card"

Quieres que Card 2 tenga una personalización adicional.

Puedes mantener:

class="servicio-card"

y agregar a Card 2 un ID único:

id="servicio-destacado"

Así puedes distinguirla de las demás cuando necesites una personalización específica.

No elimines automáticamente una clase compartida

Si un elemento forma parte de un grupo visual, su Class puede ser necesaria para conservar:

• dimensiones;

• alineación;

• colores;

• responsive;

• Hover;

• otros estilos.

No elimines clases simplemente para evitar Linked styles sin comprender primero qué función cumplen.

Class e ID pueden convivir

Un elemento puede tener:

Class:
servicio-card

y además:

ID:
servicio-premium

La Class mantiene los estilos generales.

El ID permite personalizaciones específicas.

Ejemplo práctico

Todas las Cards:

.servicio-card

tienen:

• fondo blanco;

• borde gris;

• Padding.

Pero:

#servicio-premium

puede tener:

• borde destacado;

• fondo diferente.

De esta manera mantienes una base común y una excepción específica.

Clonar elementos y estilos compartidos

Cuando utilizas:

Clonar elemento

la copia puede conservar las mismas clases.

Por ejemplo:

Antes:

Card 1 → .servicio-card

Después:

Card 1 → .servicio-card
Card 2 → .servicio-card

Esto normalmente es correcto porque ambas deben compartir estilo.

Cuidado con los IDs al clonar

Si el elemento original tiene:

id="servicio-principal"

la copia puede requerir que revises ese identificador.

Los IDs deben mantenerse únicos.

No deberías tener:

Card 1 → id="servicio-principal"
Card 2 → id="servicio-principal"

Si ambas necesitan identificadores, utiliza valores diferentes.

Ejemplo

Card 1
id="servicio-diseno"

Card 2
id="servicio-desarrollo"

Card 3
id="servicio-soporte"

Elemento padre y estilos compartidos son problemas diferentes

Supongamos que modificas un fondo y cambian muchas cosas.

Puede deberse a dos situaciones diferentes.

Caso A: seleccionaste un padre

Seleccionaste:

Grid Row

que contiene tres Cards.

Cambias su fondo.

Naturalmente el fondo pertenece al contenedor común.

Caso B: seleccionaste una Card pero comparte Class

Seleccionaste:

Card 1

pero:

Card 1
Card 2
Card 3

comparten .servicio-card.

La regla modifica las tres.

Cómo distinguir ambos casos

Utiliza:

• Navigator para verificar la jerarquía;

• Linked styles para comprobar estilos compartidos;

• Class e ID para identificar el alcance.

Una metodología para diagnosticar cambios inesperados

Si modificas algo y el resultado no es el esperado:

Paso 1

Deshacer

Recupera el estado anterior.

Paso 2

Abre Navigator.

Paso 3

Comprueba el elemento seleccionado.

Paso 4

Pregúntate:

¿Estoy modificando el hijo o su padre?

Paso 5

Comprueba si aparece:

Linked styles

Paso 6

Revisa:

Class

Paso 7

Revisa:

ID

Paso 8

Realiza nuevamente la modificación sobre el nivel correcto.

Ejemplo completo: tres tarjetas

Tienes:

Grid Row
├── Grid Column
│   └── Card
│       ├── Image
│       ├── Heading
│       └── Paragraph
│
├── Grid Column
│   └── Card
│       ├── Image
│       ├── Heading
│       └── Paragraph
│
└── Grid Column
    └── Card
        ├── Image
        ├── Heading
        └── Paragraph

Quieres modificar todos los títulos

Si todos los Heading comparten una misma Class, puedes aprovechar esa relación.

Un cambio común permite mantener:

• mismo tamaño;

• mismo peso;

• mismo color.

Esto es una ventaja.

Quieres modificar solamente el segundo título

Selecciona el Heading correspondiente.

Comprueba:

• Class;

• Linked styles.

Si necesitas una personalización exclusiva, puedes utilizar un ID único o una clase adicional específica.

Quieres cambiar el fondo de las tres tarjetas

Si las Cards comparten una Class, puedes aprovecharla.

No necesitas modificar cada una individualmente.

Quieres cambiar solamente la segunda Card

Utiliza una identificación específica sin eliminar necesariamente la Class común.

Quieres mover la segunda Card

En este caso no estás trabajando con estilos.

Selecciona su:

Grid Column o Card

según qué estructura necesites mover.

Utiliza Navigator para identificarla.

Quieres eliminar la segunda Card

Selecciona el contenedor completo correspondiente.

No elimines:

• Image;

• Heading;

• Paragraph;

uno por uno si quieres quitar toda la tarjeta.

Navigator y HTML

La jerarquía que ves en Navigator representa conceptualmente la estructura HTML.

Por ejemplo:

Link
└── Image

puede corresponder a algo similar a:

<a href="/productos">
    <img src="imagen.webp" alt="Productos">
</a>

No necesitas escribir este código para utilizar Navigator, pero comprender esta relación ayuda cuando avanzas hacia herramientas de HTML y CSS.

Navigator y Editar código HTML

Si seleccionas un elemento y utilizas:

Editar código HTML <>

el código mostrado corresponde al elemento o estructura seleccionada.

Por eso Navigator puede ayudarte antes de abrir HTML.

Primero identifica:

¿Quiero editar Image?
¿Quiero editar Link?
¿Quiero editar Card?
¿Quiero editar Section?

Después utiliza <>.

Navigator y CSS

El mismo concepto se aplica a CSS.

Antes de escribir una regla conviene conocer:

• Section;

• Container;

• Class;

• ID;

• jerarquía.

Una regla demasiado general puede afectar muchos elementos.

Ejemplo de selector demasiado amplio

img {
    border-radius: 20px;
}

Puede afectar muchas imágenes.

Ejemplo más específico

.equipo-foto {
    border-radius: 20px;
}

Limita mejor la intención.

Ejemplo todavía más específico

#director-comercial {
    border-radius: 20px;
}

puede dirigirse a un elemento identificado específicamente.

El tutorial de clases e IDs profundizará en estos conceptos.

No agregues IDs a todo indiscriminadamente

Los IDs son útiles para elementos concretos, pero no es necesario asignar uno a cada párrafo, imagen o columna.

Utilízalos cuando necesites:

• identificar un elemento;

• aplicar una personalización particular;

• crear una referencia específica.

Para estilos compartidos utiliza normalmente Classes.

Utiliza nombres descriptivos

Cuando necesites una Class o ID personalizado, utiliza nombres que expliquen su función.

Por ejemplo:

servicios-grid

servicio-card

servicio-titulo

servicio-premium

Son preferibles a:

caja1

elemento2

prueba

Esto facilita el mantenimiento posterior.

Jerarquía y nombres personalizados

En bloques complejos puede resultar útil seguir una estructura clara.

Por ejemplo:

servicios-section

servicios-grid

servicio-card

servicio-icono

servicio-titulo

servicio-texto

De esta manera, cuando posteriormente revisas CSS o HTML, resulta mucho más sencillo identificar cada parte.

¿Qué es mejor: muchas secciones pequeñas o una gigantesca?

No existe una regla que obligue a separar cada título, texto o botón en una Section diferente.

Una Section puede contener una composición completa y coherente.

Por ejemplo:

Section: Servicios
├── Heading general
├── Paragraph introductorio
└── Grid Row
    ├── Card
    ├── Card
    └── Card

Esta es una estructura lógica.

No fragmentes innecesariamente

No es necesario crear:

Section → título

Section → descripción

Section → tarjetas

Section → botón

si todos forman parte de una misma composición.

La organización debería responder a la lógica del contenido y del diseño.

Pero evita estructuras gigantescas difíciles de mantener

Tampoco es recomendable incorporar una página completa de contenido sin una jerarquía comprensible dentro de un único contenedor.

Por ejemplo:

Section
└── cientos de elementos sin organización

puede resultar difícil de:

• editar;

• mover;

• mantener;

• adaptar;

• comprender.

Piensa en unidades visuales y funcionales

Una buena forma de organizar es:

Section: Presentación

Section: Beneficios

Section: Servicios

Section: Testimonios

Section: Preguntas frecuentes

Section: CTA

Cada Section puede contener internamente todos los elementos necesarios para cumplir su función.

Navigator ayuda a mantener esta organización

A medida que la página crece, utiliza Navigator para comprobar:

• cuántas Sections tienes;

• qué contiene cada una;

• si existen elementos fuera de lugar;

• qué Cards pertenecen a cada Grid Row;

• si alguna imagen quedó fuera de su contenedor.

Buenas prácticas con Navigator

Recomendamos:

• utilizarlo en secciones complejas;

• consultarlo antes de eliminar;

• revisarlo después de arrastrar elementos;

• utilizarlo antes de clonar estructuras;

• comprobarlo ante problemas responsive;

• utilizar Seleccionar padre para navegar rápidamente;

• identificar correctamente Section, Row, Column y componentes internos;

• no asumir qué elemento está seleccionado solamente por su apariencia visual.

Buenas prácticas con estilos compartidos

Recomendamos:

• aprovechar Classes para mantener consistencia;

• prestar atención al aviso Linked styles;

• utilizar Deshacer si un cambio alcanza más elementos de los deseados;

• mantener los IDs únicos;

• no eliminar clases sin comprender su función;

• utilizar identificadores específicos solo cuando los necesites;

• evitar CSS demasiado general;

• utilizar nombres de clases descriptivos.

Errores frecuentes

Pensar que cada elemento visual es independiente

Muchos elementos están contenidos dentro de otros.

Seleccionar Image cuando querías modificar Link

Utiliza Navigator.

Modificar Grid Column cuando querías modificar Card

Comprueba la jerarquía.

Eliminar un padre y perder todos sus hijos

Antes de eliminar verifica qué contiene.

Clonar solamente el título cuando querías clonar la tarjeta

Selecciona el contenedor correcto.

Corregir un problema responsive con CSS cuando la estructura es incorrecta

Revisa Navigator primero.

Pensar que seleccionar una Card garantiza que el estilo afectará solo a ella

Puede compartir una Class con otras.

Ignorar Linked styles

Es una advertencia importante sobre el alcance de la modificación.

Eliminar una Class compartida para evitar que cambien varios elementos

Puedes romper otros estilos necesarios.

Repetir IDs después de clonar

Los IDs deben permanecer únicos.

Crear una Section diferente para cada pequeño elemento

Organiza por unidades de contenido, no por cada título o párrafo.

Procedimiento recomendado ante un problema

Cuando algo no funciona como esperabas, utiliza este orden:

1. DESHACER
      ↓
2. NAVIGATOR
      ↓
3. ¿QUÉ ELEMENTO ESTÁ SELECCIONADO?
      ↓
4. ¿QUIÉN ES SU PADRE?
      ↓
5. ¿QUÉ ELEMENTOS CONTIENE?
      ↓
6. ¿APARECE LINKED STYLES?
      ↓
7. REVISAR CLASS
      ↓
8. REVISAR ID
      ↓
9. REALIZAR LA MODIFICACIÓN
      ↓
10. REVISAR RESPONSIVE

Este procedimiento resuelve una gran parte de los problemas que pueden parecer inicialmente relacionados con CSS.

Tabla rápida de referencia

En resumen

Navigator permite comprender cómo está construida una sección.

En lugar de ver solamente:

Imagen + título + texto + botón

puedes comprender:

Section
└── Container
    └── Grid Row
        └── Grid Column
            └── Card
                ├── Image
                ├── Heading
                ├── Paragraph
                └── Button

Esto te ayuda a seleccionar correctamente qué elemento quieres:

• modificar;

• mover;

• clonar;

• eliminar;

• estilizar;

• animar.

Al mismo tiempo, debes tener en cuenta que distintos elementos pueden compartir estilos mediante Classes.

Cuando Waclis muestra:

Linked styles

significa que la modificación puede alcanzar más de un elemento.

La combinación de:

Navigator + jerarquía + Linked styles + Class + ID

permite comprender con precisión por qué ocurre una modificación y controlar mucho mejor los bloques complejos.

Antes de recurrir a HTML o CSS para corregir un problema, comprueba siempre primero la estructura.

Muchas veces la solución no consiste en escribir más código, sino simplemente en seleccionar o colocar correctamente el elemento.