¿Cómo seleccionar, mover, duplicar y eliminar elementos en el Editor de bloques de Waclis?

Cuando trabajas dentro del Editor de bloques de Waclis, una sección puede contener muchos elementos organizados dentro de otros.

Por ejemplo:

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

Para modificar correctamente el diseño es importante identificar qué elemento tienes seleccionado y comprender dónde se encuentra dentro de la estructura.

El editor incluye distintas herramientas para ayudarte a:

• seleccionar elementos;

• identificar su elemento padre;

• utilizar Navigator;

• arrastrar componentes;

• cambiar su orden;

• clonar elementos;

• eliminar elementos;

• deshacer errores;

• acceder al HTML del elemento seleccionado.

En este tutorial aprenderás cómo utilizar estas herramientas correctamente.

¿Por qué es importante seleccionar correctamente un elemento?

Una de las causas más frecuentes de modificaciones inesperadas es trabajar sobre un nivel diferente al que realmente querías editar.

Por ejemplo, visualmente puedes estar viendo:

[ IMAGEN ]

pero esa imagen podría encontrarse dentro de:

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

Si seleccionas Image, estarás modificando la imagen.

Si seleccionas Link, estarás modificando el vínculo que la contiene.

Si seleccionas Grid Column, estarás modificando toda la columna.

Y si seleccionas Section, los cambios pueden afectar una superficie mucho mayor.

Por eso, antes de mover, clonar o eliminar un elemento, verifica siempre qué nivel de la estructura tienes seleccionado.

Formas de seleccionar un elemento

Puedes seleccionar los componentes de distintas maneras:

1. directamente desde el área visual;

2. mediante Navigator;

3. utilizando Seleccionar padre;

4. mediante la ruta jerárquica inferior.

Cada método resulta útil en situaciones diferentes.

1. Seleccionar directamente desde el diseño

La forma más sencilla es hacer clic sobre el elemento que quieres modificar.

Por ejemplo:

• una imagen;

• un título;

• un párrafo;

• un botón;

• una tarjeta;

• una sección.

Cuando Waclis reconoce el elemento, aparece visualmente seleccionado y se muestran sus herramientas correspondientes.

El panel lateral también cambia para mostrar sus opciones de:

• Contenido;

• Estilo;

• Avanzado.

Cuando hacer clic directamente no alcanza

En diseños sencillos es fácil seleccionar un elemento.

Pero en una composición compleja puedes tener:

Card
└── Link
    └── Image

Al hacer clic puedes seleccionar la imagen cuando en realidad quieres editar el Link.

O puedes seleccionar el texto cuando querías mover toda la Card.

En esos casos conviene utilizar Navigator.

2. Utilizar Navigator

Navigator muestra la estructura interna del contenido de manera jerárquica.

Por ejemplo:

Section
├── Section
│   ├── Link
│   │   └── Image
│   ├── Link
│   │   └── Image
│   └── Link
│       └── Image

Puedes hacer clic directamente en uno de los elementos del listado para seleccionarlo.

¿Cuándo conviene utilizar Navigator?

Navigator es especialmente útil cuando:

• varios elementos están uno dentro de otro;

• no puedes seleccionar correctamente un componente;

• quieres identificar qué contiene una imagen;

• necesitas encontrar el contenedor de una tarjeta;

• vas a eliminar una estructura completa;

• quieres clonar un grupo de elementos;

• necesitas comprender por qué varios elementos se mueven juntos.

Ejemplo: seleccionar una imagen

Supongamos que Navigator muestra:

Link
└── Image

Si quieres reemplazar la fotografía, selecciona:

Image

Si quieres modificar la URL a la que dirige esa fotografía, selecciona:

Link

Aunque visualmente ambos ocupen prácticamente el mismo espacio, son elementos diferentes.

Ejemplo: seleccionar una tarjeta completa

Tienes:

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

Si quieres cambiar solamente el título:

selecciona Heading.

Si quieres duplicar toda la tarjeta:

selecciona Card o el contenedor que incluya toda la composición.

Si seleccionas solamente Heading y utilizas Clonar, duplicarás únicamente el título.

3. Seleccionar padre

Cuando tienes seleccionado un elemento, la barra de acciones incluye:

Seleccionar padre

Esta herramienta permite subir un nivel dentro de la estructura.

Por ejemplo, tienes seleccionado:

Image

y su estructura es:

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

Al utilizar Seleccionar padre una vez pasarás a:

Link

Otra vez:

Grid Column

Luego:

Grid Row

Y posteriormente podrías llegar a:

Section

¿Para qué sirve Seleccionar padre?

Es especialmente práctico cuando visualmente puedes seleccionar fácilmente un elemento interno pero necesitas modificar su contenedor.

Por ejemplo:

Seleccionas una imagen.

↓

Seleccionar padre.

↓

Seleccionas la tarjeta que contiene esa imagen.

↓

Ahora puedes modificar el fondo, Padding o posición de toda la tarjeta.

4. Ruta jerárquica inferior

En la parte inferior del Editor de bloques puedes encontrar una ruta que representa la posición del elemento dentro del HTML.

Por ejemplo:

body > section > div > a > img

Esto también te permite comprender la jerarquía.

En este ejemplo:

img

está dentro de:

a

que está dentro de:

div

y así sucesivamente.

¿Qué herramienta conviene utilizar?

Puedes utilizar esta referencia:

Todas pueden combinarse.

La barra de acciones del elemento

Cuando seleccionas determinados componentes aparece una barra sobre el elemento.

Desde allí dispones de varias acciones.

Entre las verificadas en Waclis se encuentran:

• Arrastrar elemento;

• Seleccionar padre;

• Mover elemento arriba;

• Mover elemento abajo;

• Editar código HTML;

• Clonar elemento;

• Eliminar elemento.

Veamos cada una.

Arrastrar elemento

La opción Arrastrar elemento permite cambiar visualmente la posición del componente.

Puedes utilizarla para mover contenido dentro de la estructura.

Por ejemplo:

Tienes:

Título

Imagen

Texto

y quieres obtener:

Título

Texto

Imagen

Puedes mover los elementos para modificar su orden.

Importante al arrastrar

El Editor de bloques trabaja con una estructura jerárquica.

Esto significa que no solamente importa dónde se ve un elemento, sino también dentro de qué elemento queda colocado.

Por ejemplo, quieres:

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

pero al arrastrar incorrectamente podrías generar una estructura diferente.

Después de realizar movimientos importantes recomendamos revisar Navigator para comprobar que el elemento quedó dentro del contenedor esperado.

Arrastrar una imagen dentro de una columna

Supongamos que tienes:

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

y quieres colocar una fotografía dentro de la primera columna.

El resultado esperado debería ser:

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

No simplemente:

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

La diferencia puede afectar considerablemente el comportamiento responsive.

Mover elemento arriba

La barra incluye una acción para:

Mover elemento arriba

Permite cambiar la posición relativa del componente dentro de su estructura.

Por ejemplo:

Antes:

Heading
Paragraph
Image
Button

Seleccionas Image y la mueves hacia arriba.

Después:

Heading
Image
Paragraph
Button

Mover elemento abajo

La acción correspondiente permite desplazar el componente en la dirección contraria.

Por ejemplo:

Antes:

Heading
Button
Paragraph

Después de mover el Button hacia abajo:

Heading
Paragraph
Button

Diferencia entre mover y arrastrar

Ambas herramientas cambian la posición, pero se utilizan de forma diferente.

Mover arriba / abajo

Es útil para modificar el orden dentro de una estructura ya existente.

Por ejemplo:

Elemento A
Elemento B
Elemento C

puedes convertirlo en:

Elemento A
Elemento C
Elemento B

Arrastrar

Permite una manipulación más visual y puede utilizarse para cambiar la ubicación del elemento dentro de estructuras más complejas.

Recomendamos utilizar Navigator después de movimientos importantes para comprobar dónde quedó colocado.

Modo diseñador: Arrastre libre

La barra superior del editor incluye:

Modo diseñador (Arrastre libre)

Esta modalidad permite trabajar con un comportamiento de movimiento más libre.

Puede resultar útil en determinados diseños, pero conviene utilizarla con atención.

Una página correctamente organizada normalmente depende de relaciones como:

Section
→ Container
→ Grid Row
→ Grid Column
→ Componente

Mover visualmente un elemento sin considerar esta jerarquía puede generar comportamientos inesperados, especialmente en diferentes tamaños de pantalla.

Recomendación sobre el arrastre libre

Si utilizas Modo diseñador:

1. realiza el cambio;

2. revisa Navigator;

3. comprueba desktop;

4. comprueba tablet;

5. comprueba celular.

No evalúes el resultado únicamente en el tamaño de pantalla que estás utilizando durante la edición.

Clonar elemento

La opción Clonar elemento permite crear una copia del componente seleccionado.

Es una de las herramientas más útiles cuando necesitas repetir estructuras.

Ejemplo: duplicar una tarjeta

Tienes:

┌─────────────────────┐
│      [Imagen]       │
│                     │
│      Servicio       │
│   Descripción       │
│                     │
│     [Ver más]       │
└─────────────────────┘

Si quieres crear cuatro servicios con el mismo diseño, no necesitas construir cada tarjeta desde cero.

Puedes:

1. crear correctamente la primera;

2. seleccionar su contenedor completo;

3. utilizar Clonar elemento;

4. repetir el proceso;

5. modificar el contenido de cada copia.

El elemento seleccionado determina qué se clona

Esto es fundamental.

Supongamos:

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

Si seleccionas:

Heading

y haces Clonar:

obtendrás:

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

No una segunda Card.

Si quieres duplicar todo

Debes seleccionar:

Card

o el contenedor correspondiente.

Entonces el resultado podrá ser:

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

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

Navigator ayuda a identificar exactamente qué nivel debes clonar.

Ejemplo: crear tres beneficios

Puedes construir primero:

Beneficio
├── Icon
├── Heading
└── Paragraph

Después clonar el contenedor dos veces.

Resultado:

Beneficio 1
Beneficio 2
Beneficio 3

Luego reemplazas:

• ícono;

• título;

• descripción.

Esto mantiene una estructura visual consistente.

Clonar también puede duplicar clases e identificadores

Cuando duplicas estructuras, presta atención a sus propiedades.

Los elementos pueden utilizar:

• Class;

• ID.

Compartir una misma Class puede ser correcto y deseable.

Sin embargo, un ID debe mantenerse único dentro de la página.

Si clonas un elemento que contiene un ID utilizado como identificador individual, comprueba después si necesitas modificarlo.

Este tema será explicado en profundidad en el tutorial de clases, IDs y estilos vinculados.

Clonar y Linked styles

Las copias pueden continuar compartiendo clases y estilos.

Por ejemplo:

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

Esto significa que modificar determinados estilos puede afectar las tres tarjetas.

No necesariamente es un problema.

Puede ser útil para mantenerlas visualmente iguales.

Pero presta atención si aparece:

Linked styles

y solamente quieres personalizar una de ellas.

Eliminar elemento

La barra de acciones incluye la opción:

Eliminar elemento

representada mediante el icono de papelera.

Esta acción elimina el elemento actualmente seleccionado.

Importante: no existe confirmación

En Waclis, al eliminar un elemento:

no aparece una ventana solicitando confirmación.

La eliminación se realiza directamente.

Por eso debes verificar siempre qué componente está seleccionado antes de utilizar la papelera.

Eliminar un elemento también puede eliminar sus hijos

Supongamos:

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

Si eliminas solamente:

Paragraph

desaparece el párrafo.

Pero si eliminas:

Card

desaparecerán también todos los elementos que contiene.

Otro ejemplo

Tienes:

Grid Column
├── Image
├── Heading
└── Paragraph

Si seleccionas Grid Column y utilizas Eliminar, no estarás quitando solamente la columna visual.

También desaparecerá su contenido:

• Image;

• Heading;

• Paragraph.

Verifica antes de eliminar

Antes de utilizar la papelera recomendamos comprobar:

1. la etiqueta del elemento seleccionado;

2. Navigator;

3. la ruta inferior si tienes dudas;

4. si el elemento contiene otros componentes.

Esto es especialmente importante en estructuras complejas.

¿Qué hacer si eliminé algo por error?

Utiliza:

Deshacer

inmediatamente.

La herramienta Deshacer se encuentra en la barra superior del editor.

Deshacer

Deshacer permite revertir modificaciones recientes.

Puede ayudarte si:

• eliminaste un elemento;

• moviste algo incorrectamente;

• modificaste una propiedad;

• cambiaste un estilo;

• alteraste accidentalmente la estructura.

Recomendación ante una eliminación accidental

Si eliminaste un elemento sin querer:

1. no sigas realizando muchos cambios;

2. utiliza Deshacer;

3. comprueba que el elemento reapareció;

4. revisa Navigator;

5. continúa trabajando.

Cuantas más modificaciones realices después del error, más difícil puede resultar volver exactamente al estado anterior.

Rehacer

El editor también dispone de Rehacer.

Sirve para volver a aplicar una acción que acabas de deshacer.

Por ejemplo:

Realizas un cambio.

↓

Deshacer.

↓

Decides que el cambio sí era correcto.

↓

Rehacer.

Editar código HTML

Dentro de la barra del elemento aparece el icono:

<>

correspondiente a:

Editar código HTML

Esta acción abre una ventana que permite visualizar y modificar el HTML relacionado con el elemento seleccionado.

¿Cuándo puede ser útil?

Por ejemplo, cuando necesitas:

• agregar una clase;

• modificar un atributo;

• revisar la estructura;

• realizar un cambio avanzado;

• utilizar código preparado con ayuda de una IA.

Ejemplo

Visualmente tienes un enlace:

Ver productos

Su estructura puede ser similar a:

<a href="/productos">Ver productos</a>

Editar código HTML permite intervenir directamente sobre esa estructura cuando sea necesario.

No es necesario utilizar HTML para mover o duplicar

Para operaciones habituales utiliza las herramientas visuales.

Por ejemplo:

Mover un elemento → utiliza mover o arrastrar.

Duplicarlo → utiliza Clonar.

Eliminarlo → utiliza Eliminar.

Cambiar texto → utiliza Contenido.

Cambiar color → utiliza Estilo.

Abrir HTML para realizar estas tareas normalmente agrega una complejidad innecesaria.

Editar código HTML y Code editor no son lo mismo

Es importante distinguirlos.

Editar código HTML <>

Está relacionado con el elemento o estructura que tienes seleccionado.

Code editor

Es una herramienta diferente disponible en el editor y puede mostrar una estructura de código mucho más amplia.

Utiliza Editar código HTML cuando necesites trabajar específicamente sobre el elemento seleccionado.

El Code editor será explicado en un tutorial avanzado.

Ejemplo práctico: duplicar una sección de servicios

Supongamos que tienes:

SERVICIOS

[ Diseño web ]
[ Desarrollo ]
[ Soporte ]

y quieres incorporar:

Consultoría

Paso 1: identifica una tarjeta completa

Haz clic sobre una tarjeta existente.

Si seleccionas solamente el título, utiliza Navigator o Seleccionar padre hasta llegar al contenedor que contiene:

Image / Icon
Heading
Paragraph
Button

Paso 2: utiliza Clonar elemento

Crea una copia de la tarjeta.

Paso 3: verifica Navigator

Comprueba que ahora tienes una estructura adicional equivalente.

Paso 4: reemplaza el contenido

Modifica:

• imagen;

• título;

• descripción;

• enlace.

Por ejemplo:

Consultoría

Paso 5: revisa el Grid Row

Si originalmente tenías tres columnas y ahora agregaste una cuarta, comprueba cómo se distribuye la fila.

Tal vez necesites ajustar las columnas para conseguir:

Desktop:

[ 1 ] [ 2 ] [ 3 ] [ 4 ]

o:

Desktop:

[ 1 ] [ 2 ]
[ 3 ] [ 4 ]

según el diseño.

Paso 6: revisa móvil

Comprueba que las cuatro tarjetas se adapten correctamente.

Por ejemplo:

Mobile:

[ 1 ]

[ 2 ]

[ 3 ]

[ 4 ]

Ejemplo práctico: eliminar una tarjeta

Ahora supongamos que quieres pasar de cuatro servicios a tres.

No elimines solamente:

• el título;

• la imagen;

• el párrafo.

Eso puede dejar una tarjeta vacía.

Selecciona el contenedor completo de la tarjeta y utiliza Eliminar.

Antes

[ Servicio 1 ] [ Servicio 2 ] [ Servicio 3 ] [ Servicio 4 ]

Después

[ Servicio 1 ] [ Servicio 2 ] [ Servicio 3 ]

Luego comprueba si la grilla necesita ser ajustada.

Ejemplo práctico: cambiar el orden

Tienes:

Nuestra empresa

Servicios

Beneficios

Testimonios

pero quieres:

Nuestra empresa

Beneficios

Servicios

Testimonios

Selecciona la estructura completa de Beneficios y utiliza las herramientas de movimiento disponibles.

Después verifica Navigator para confirmar el nuevo orden.

Mover elementos dentro de una sección y mover secciones completas

No es lo mismo seleccionar:

Heading

que seleccionar:

Section

Si mueves Heading, solamente cambiará la posición del título dentro de su estructura.

Si mueves Section, puedes cambiar la posición de toda una gran área de la página.

Ejemplo

Tienes:

Section: Quiénes somos
Section: Beneficios
Section: Testimonios

Si seleccionas la Section completa de Testimonios y la mueves, puedes reorganizar grandes partes del contenido.

Por eso Navigator resulta especialmente importante cuando trabajas a nivel de Section.

Secciones de Página

El panel Secciones de Página también puede ayudarte a identificar las secciones que forman parte del contenido actual.

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

• Title;

• Container width;

• Container height;

• Background;

• Overlay;

• Top Separator;

• Bottom Separator.

Puede resultar útil cuando necesitas seleccionar una sección completa en lugar de uno de sus elementos internos.

No confundas Secciones con Secciones de Página

Secciones

Biblioteca de diseños prediseñados que puedes agregar.

Secciones de Página

Representa las secciones que ya forman parte del contenido que estás editando.

Ejemplo práctico: seleccionar un fondo completo

Quieres cambiar la fotografía de fondo de una sección, pero cada vez que haces clic seleccionas el texto que está encima.

Puedes:

1. abrir Navigator o Secciones de Página;

2. seleccionar la Section;

3. abrir Contenido;

4. modificar Background.

No necesitas intentar hacer clic repetidamente sobre una zona vacía del fondo.

¿Qué sucede si muevo algo y el diseño se rompe?

Utiliza este procedimiento:

1. usa Deshacer;

2. abre Navigator;

3. identifica la estructura;

4. comprueba cuál era el contenedor correcto;

5. vuelve a mover el componente;

6. revisa las vistas responsive.

Esto suele ser más seguro que intentar corregir visualmente varias posiciones consecutivas.

¿Por qué algo que moví se ve bien en desktop y mal en celular?

Porque el elemento forma parte de una estructura responsive.

Por ejemplo:

Grid Row
├── Column
└── Column

puede comportarse de manera diferente según el dispositivo.

Mover un elemento de una columna a otra puede alterar:

• su ancho;

• orden;

• alineación;

• comportamiento móvil.

Después de reorganizar una estructura, revisa siempre:

• computadora;

• tablet;

• celular.

Selección y Linked styles

Seleccionar correctamente el elemento también es fundamental cuando modificas estilos.

Por ejemplo:

Tienes:

Card 1
Card 2
Card 3

y todas comparten:

.servicio-card

Seleccionar Card 1 no significa necesariamente que una modificación de la clase afectará solamente Card 1.

Si aparece:

Linked styles

presta atención antes de realizar cambios visuales.

Seleccionar elemento y seleccionar estilo son conceptos diferentes

Puedes tener seleccionado un único elemento, pero ese elemento puede utilizar una clase compartida.

Por eso es posible que:

selecciones una tarjeta

pero

cambien tres tarjetas.

Esto no significa que hayas seleccionado mal necesariamente.

Puede deberse a los estilos vinculados.

Lo veremos en detalle en el tutorial específico sobre clases, IDs y Linked styles.

Flujo recomendado antes de clonar o eliminar

Antes de ejecutar una acción estructural importante utiliza este pequeño proceso:

1. Selecciona

Haz clic sobre el elemento.

2. Comprueba

Utiliza Navigator.

3. Identifica

¿Es:

• Image?

• Heading?

• Card?

• Grid Column?

• Grid Row?

• Section?

4. Ejecuta

Recién entonces:

• mueve;

• clona;

• elimina.

Flujo recomendado después de mover o clonar

Después de modificar la estructura:

1. revisa Navigator;

2. comprueba el orden;

3. revisa desktop;

4. revisa tablet;

5. revisa celular;

6. comprueba los enlaces si los duplicaste;

7. revisa ID y Class si corresponde;

8. guarda los cambios.

Guardar Cambios

Cuando termines de reorganizar el contenido haz clic en:

Guardar Cambios

Waclis guardará lo realizado y mostrará una notificación verde cuando el proceso finalice correctamente.

Utiliza Ver página

Después de guardar recomendamos utilizar:

Ver página

especialmente si:

• cambiaste el orden de varias secciones;

• clonaste componentes;

• modificaste enlaces;

• moviste columnas;

• alteraste estructuras responsive.

La comprobación final debe realizarse también fuera del entorno de edición.

Errores frecuentes

Eliminar un contenedor cuando solo querías eliminar un texto

Comprueba Navigator antes de utilizar la papelera.

Clonar el Heading cuando querías clonar toda la Card

Selecciona el contenedor completo.

Arrastrar un elemento fuera de su Grid Column

Revisa Navigator después del movimiento.

Mover visualmente algo sin comprobar móvil

La estructura puede responder de manera diferente en dispositivos pequeños.

Continuar trabajando después de una eliminación accidental

Utiliza Deshacer inmediatamente.

Intentar seleccionar siempre haciendo clic sobre la pantalla

Utiliza Navigator cuando la estructura sea compleja.

No utilizar Seleccionar padre

Es una de las formas más rápidas de pasar desde un componente hacia su contenedor.

Confundir mover un elemento con mover toda una Section

Verifica siempre el nivel seleccionado.

Duplicar elementos con un ID y no revisarlo

Los IDs deben mantenerse únicos dentro de la página.

Confundir Editar código HTML con Code editor

Son herramientas diferentes.

Tabla rápida de acciones

Buenas prácticas

Cuando reorganices contenido recomendamos:

• utilizar Navigator con frecuencia;

• comprobar qué nivel seleccionaste;

• clonar el contenedor completo cuando quieras repetir una composición;

• revisar los IDs después de clonar;

• eliminar estructuras completas cuando ya no las necesitas;

• utilizar Deshacer inmediatamente ante errores;

• revisar responsive después de mover elementos;

• no utilizar Arrastre libre sin comprobar la jerarquía posterior;

• guardar periódicamente;

• comprobar el resultado final mediante Ver página.

En resumen

El Editor de bloques de Waclis permite administrar visualmente cada elemento mediante distintas herramientas.

Puedes:

Seleccionar directamente para modificaciones sencillas.

Utilizar Navigator para estructuras complejas.

Seleccionar padre para subir dentro de la jerarquía.

Arrastrar o mover para reorganizar contenido.

Clonar para repetir diseños.

Eliminar para quitar elementos.

Deshacer si realizaste una modificación accidental.

Editar código HTML cuando necesitas intervenir directamente sobre la estructura del elemento.

La regla más importante es sencilla:

Antes de mover, clonar o eliminar, confirma exactamente qué elemento tienes seleccionado.

Una misma sección puede contener varios niveles y eliminar o duplicar el nivel incorrecto puede modificar más contenido del esperado.

Navigator, Seleccionar padre y la ruta jerárquica inferior son las herramientas que te ayudarán a mantener siempre el control sobre la estructura.