¿Cómo utilizar componentes para construir una sección desde cero en el Editor de bloques de Waclis?
El Editor de bloques de Waclis permite crear diseños completamente personalizados combinando componentes individuales.
En lugar de comenzar con una sección prediseñada, puedes construir tu propia estructura utilizando contenedores, filas, columnas, títulos, textos, imágenes, botones, formularios, galerías y muchos otros elementos.
Esta alternativa es especialmente útil cuando:
- ningún diseño prediseñado se adapta a lo que necesitas;
- quieres controlar la distribución del contenido;
- necesitas una cantidad específica de columnas;
- quieres crear una composición personalizada;
- necesitas combinar diferentes tipos de contenido;
- quieres desarrollar una sección desde cero sin utilizar HTML manualmente.
En este tutorial aprenderás cómo funcionan los componentes, cómo organizarlos correctamente y cómo crear una sección completa paso a paso.
¿Qué es un componente?
Un componente es una pieza individual que puedes incorporar dentro de una sección.
Por ejemplo:
- un título;
- una imagen;
- un párrafo;
- un botón;
- una fila;
- una columna;
- una tarjeta;
- una galería;
- un formulario;
- un video;
- un acordeón.
Los componentes pueden combinarse entre sí para construir estructuras más complejas.
Por ejemplo:
Section
└── Container
└── Grid Row
├── Grid Column
│ └── Image
│
└── Grid Column
├── Heading
├── Paragraph
└── Html Button
El resultado visual podría ser:
┌──────────────────────────────────────────┐
│ │
│ [ IMAGEN ] Título principal │
│ Texto descriptivo │
│ [ VER MÁS ] │
│ │
└──────────────────────────────────────────┘
¿Cuál es la diferencia entre Secciones y Componentes?
Esta diferencia es fundamental.
Secciones
Son diseños completos que ya contienen una estructura preparada.
Por ejemplo:
Testimonios
puede incluir varias columnas, fotografías, nombres y textos.
Componentes
Son las piezas individuales con las que puedes construir tu propia estructura.
Por ejemplo:
Grid Row
+
Image
+
Heading
+
Paragraph
+
Button
Por lo tanto:
Secciones = diseños preparados.
Componentes = piezas para construir tus propios diseños.
Puedes utilizar ambos métodos dentro de una misma página.
¿Dónde encuentro los componentes?
Dentro del Editor de bloques selecciona:
Componentes
En el panel lateral izquierdo encontrarás diferentes categorías.
Entre las principales están:
- Base;
- Elementos;
- componentes estructurales;
- Widgets;
- Incrustados;
- Componentes personalizados.
También dispones de un buscador para encontrar rápidamente un componente por su nombre.
Antes de agregar contenido: piensa primero en la estructura
Cuando construyes una sección desde cero, es recomendable no comenzar agregando inmediatamente textos e imágenes.
Primero piensa:
¿Cómo quiero distribuir el contenido?
Por ejemplo, si quieres:
IMAGEN | TEXTO
necesitas primero una estructura de dos columnas.
Si quieres:
SERVICIO 1 | SERVICIO 2 | SERVICIO 3
necesitas una estructura de tres columnas.
Si solamente quieres:
TÍTULO
TEXTO
BOTÓN
puedes utilizar una única columna.
La estructura debería construirse primero y el contenido agregarse después.
Una estructura básica
Una organización habitual puede ser:
Section
└── Container
└── Grid Row
├── Grid Column
└── Grid Column
Después puedes colocar contenido dentro de cada columna.
Por ejemplo:
Section
└── Container
└── Grid Row
├── Grid Column
│ └── Image
│
└── Grid Column
├── Heading
├── Paragraph
└── Html Button
Comprender esta jerarquía te ayudará a trabajar correctamente con cualquier composición.
Section: el contenedor general de la composición
Una Section representa una gran área horizontal de contenido.
Puede contener:
- un Container;
- una o varias filas;
- columnas;
- diferentes componentes.
La Section también dispone de propiedades propias.
Cuando la seleccionas puedes configurar, entre otras opciones:
- Container width;
- Container height;
- Background;
- Overlay;
- Top Separator;
- Bottom Separator.
Container: organiza el contenido dentro de la sección
Un Container ayuda a controlar el ancho y la organización del contenido.
Puedes pensar en él como una caja general dentro de la sección.
Por ejemplo:
SECTION - ancho completo
┌────────────────────────────────────────────┐
│ │
│ ┌──────────────────────────────┐ │
│ │ CONTAINER │ │
│ │ │ │
│ │ Contenido interno │ │
│ └──────────────────────────────┘ │
│ │
└────────────────────────────────────────────┘
Esto permite que un fondo ocupe todo el ancho mientras el contenido permanece visualmente contenido.
Grid Row: crea una fila
El componente Grid Row permite crear una fila y distribuir el contenido en columnas.
Es una de las herramientas estructurales más importantes del editor.
Por ejemplo:
Grid Row
├── Column 1
├── Column 2
└── Column 3
Visualmente:
┌─────────────┬─────────────┬─────────────┐
│ Columna 1 │ Columna 2 │ Columna 3 │
└─────────────┴─────────────┴─────────────┘
Configurar Grid Row
Cuando seleccionas un Grid Row puedes encontrar opciones como:
- Direction;
- Vertical align;
- Horizontal align;
- Wrap;
- cantidad de columnas;
- tamaños de las columnas según el dispositivo.
Estas configuraciones permiten decidir cómo se distribuyen los elementos.
¿Cómo funcionan las columnas?
La estructura utilizada por Waclis permite dividir una fila en diferentes proporciones.
El sistema de grilla trabaja normalmente sobre una base de 12 unidades.
Por ejemplo:
Dos columnas iguales
6 + 6 = 12
Resultado:
┌──────────────────┬──────────────────┐
│ 50 % │ 50 % │
└──────────────────┴──────────────────┘
Tres columnas iguales
4 + 4 + 4 = 12
Resultado:
┌────────────┬────────────┬────────────┐
│ 33 % │ 33 % │ 33 % │
└────────────┴────────────┴────────────┘
Una columna más grande que otra
8 + 4 = 12
Resultado aproximado:
┌──────────────────────────┬─────────────┐
│ 66 % │ 33 % │
└──────────────────────────┴─────────────┘
Esto permite crear estructuras muy diferentes sin tener que escribir CSS.
Responsive: las columnas pueden cambiar según el dispositivo
Una misma fila puede comportarse de manera diferente en computadora y celular.
Por ejemplo:
Computadora
[ IMAGEN ] [ TEXTO ]
Celular
[ IMAGEN ]
[ TEXTO ]
Esto es especialmente importante cuando trabajas con columnas.
Dentro de las configuraciones de Grid Row puedes definir tamaños para diferentes anchos de pantalla.
Entre ellos aparecen:
- Extra small;
- Small;
- Medium;
- Large;
- Extra large;
- Extra extra large.
Paso a paso: crear una sección con imagen y texto
Vamos a construir una estructura sencilla como ejemplo.
Queremos obtener:
┌──────────────────────────────────────────────┐
│ │
│ [ IMAGEN ] CONOCE NUESTRA EMPRESA │
│ Texto descriptivo... │
│ │
│ [ CONOCER MÁS ] │
│ │
└──────────────────────────────────────────────┘
Paso 1: agrega la estructura
Desde:
Componentes
localiza los componentes estructurales que necesites.
Crea una estructura con:
Section
└── Container
└── Grid Row
Paso 2: crea dos columnas
Configura el Grid Row para disponer dos columnas.
La estructura será:
Grid Row
├── Grid Column
└── Grid Column
En computadora puedes utilizar una distribución aproximadamente igual:
6 / 6
Paso 3: agrega una imagen
Dentro de la primera columna agrega:
Image
La estructura quedará:
Grid Row
├── Grid Column
│ └── Image
│
└── Grid Column
Después selecciona la imagen y utiliza:
Set Image
para elegir la fotografía que quieras mostrar.
Paso 4: agrega el título
En la segunda columna incorpora:
Heading
Por ejemplo:
Conoce nuestra empresa
Puedes configurar posteriormente su estilo desde:
Estilo → Typography
Paso 5: agrega el texto
Debajo del Heading incorpora:
Paragraph
Escribe el contenido correspondiente.
Por ejemplo:
Somos una empresa especializada en ofrecer soluciones para nuestros clientes, acompañándolos desde la consulta inicial hasta la entrega de cada proyecto.
Paso 6: agrega un botón
Debajo del párrafo incorpora:
Html Button
Puedes cambiar su texto, por ejemplo:
Conocer más
Si quieres que el usuario navegue hacia otra sección, configura también el enlace correspondiente utilizando la estructura apropiada.
La estructura final
En Navigator deberías observar algo conceptualmente similar a:
Section
└── Container
└── Grid Row
├── Grid Column
│ └── Image
│
└── Grid Column
├── Heading
├── Paragraph
└── Html Button
Navigator te permite comprobar que cada componente se encuentra dentro del contenedor correcto.
Utiliza Navigator mientras construyes
Cuando construyes desde cero, Navigator es especialmente importante.
Visualmente puede resultar difícil saber si un elemento quedó dentro de:
- una columna;
- la fila;
- el Container;
- la Section.
Navigator te muestra la estructura.
Si algo no se comporta como esperabas, revisa primero allí.
Una regla práctica
Cuando construyas una grilla:
el contenido debe colocarse dentro de las columnas.
Evita estructuras confusas como:
Grid Row
├── Heading
├── Image
└── Grid Column
cuando realmente querías:
Grid Row
├── Grid Column
│ └── Image
│
└── Grid Column
└── Heading
Una estructura organizada facilitará posteriormente:
- responsive;
- alineación;
- mantenimiento;
- personalización;
- modificaciones con CSS.
Componentes Base
La categoría Base contiene muchos de los componentes fundamentales.
Entre ellos puedes encontrar:
- Heading;
- Image;
- Horizontal Rule;
- Form;
- Input;
- Text Area;
- Select Input;
- Checkbox;
- Radio Button;
- Link;
- Html Button;
- Paragraph;
- Blockquote;
- List;
- Table;
- Preformatted;
- Audio;
- Iframe.
Veamos para qué sirve cada uno de los principales.
Heading
Utiliza Heading para títulos y subtítulos.
Por ejemplo:
Nuestros servicios
o:
¿Por qué elegirnos?
Los diferentes niveles de Heading ayudan también a organizar correctamente la estructura del contenido.
Paragraph
Utiliza Paragraph para textos descriptivos.
Por ejemplo:
Conoce todas las soluciones que tenemos disponibles para tu empresa.
Es preferible utilizar Paragraph para bloques de texto en lugar de intentar construirlos con múltiples títulos.
Image
Permite incorporar una imagen.
Puedes configurar:
- imagen;
- Width;
- Height;
- Alt;
- Align;
- Link;
- ID;
- Class.
Link
Permite crear vínculos.
Puedes configurar:
- URL;
- Rel;
- Target;
- Download;
- ID;
- Class.
Html Button
Permite incorporar un botón HTML.
Entre sus configuraciones aparecen:
- Text;
- Name;
- Type;
- Autofocus;
- Disabled;
- ID;
- Class.
Horizontal Rule
Permite incorporar una línea o separador horizontal.
Puede utilizarse para dividir visualmente diferentes grupos de contenido.
List
Utiliza List cuando quieras presentar información organizada.
Por ejemplo:
• Atención personalizada
• Envíos a todo el país
• Diferentes medios de pago
• Soporte especializado
Table
Permite incorporar estructuras tabulares.
Puede resultar útil para:
- características;
- comparaciones;
- especificaciones;
- datos organizados en filas y columnas.
Utiliza tablas solamente cuando la información realmente tiene una estructura tabular.
Blockquote
Está pensado para citas o textos destacados.
Puede utilizarse, por ejemplo, para resaltar una frase o declaración.
Formularios
Dentro de Base encontrarás diferentes componentes relacionados con formularios:
- Form;
- Input;
- Text Area;
- Select Input;
- Checkbox;
- Radio Button.
Estos elementos permiten construir estructuras de formulario.
Cuando trabajes con formularios personalizados, comprueba siempre su funcionamiento real después de guardar.
Iframe
Un Iframe permite incrustar determinados contenidos externos compatibles dentro de una página.
Utilízalo solamente con fuentes confiables y comprueba siempre el resultado en la Página web.
Componentes de Elementos
La categoría Elementos incorpora componentes más elaborados.
Entre los disponibles puedes encontrar:
- Font Icon;
- Carousel;
- Gallery;
- Slider;
- Tabs;
- Accordion;
- Flip box;
- Counter;
- SVG Icon;
- Figure;
- Social icons;
- Code;
- Image Compare.
Font Icon y SVG Icon
Permiten incorporar íconos.
Son útiles para:
- beneficios;
- servicios;
- datos de contacto;
- listas de características;
- botones;
- elementos visuales.
Gallery
Permite incorporar una galería de imágenes.
Puede utilizarse para:
- trabajos realizados;
- instalaciones;
- proyectos;
- productos;
- eventos;
- portfolio.
Carousel y Slider
Permiten mostrar contenido mediante una estructura desplazable.
Son útiles cuando quieres presentar diferentes elementos ocupando una misma zona visual.
Tabs
Las pestañas permiten dividir información en diferentes contenidos seleccionables.
Por ejemplo:
[ CARACTERÍSTICAS ] [ MEDIDAS ] [ ENVÍOS ]
Accordion
Permite mostrar contenido desplegable.
Es especialmente útil para:
- preguntas frecuentes;
- especificaciones;
- condiciones;
- información extensa.
Counter
Puede utilizarse para destacar cifras.
Por ejemplo:
+10 años de experiencia
+500 clientes
+20 países
Social icons
Permite incorporar iconos relacionados con redes sociales.
Figure
Permite trabajar con imágenes acompañadas de información o descripciones relacionadas.
Image Compare
Está orientado a comparar visualmente dos imágenes.
Puede resultar útil para mostrar:
- antes y después;
- diferentes acabados;
- cambios visuales;
- comparaciones.
Componentes estructurales
Dentro del editor encontrarás una categoría que actualmente aparece identificada en la interfaz como Bootstrap 5.
Dentro de ella se incluyen componentes principalmente destinados a estructura e interfaz, como:
- Container;
- Grid Row;
- Button;
- Button Group;
- Button Toolbar;
- Alert;
- Card;
- List Group;
- Badge;
- Progress Bar;
- Nav Bar;
- Breadcrumbs;
- Pagination.
Para construir secciones desde cero, los dos más importantes inicialmente son:
Container
y
Grid Row.
Card
Una Card permite agrupar contenido dentro de una misma unidad visual.
Por ejemplo:
┌────────────────────────┐
│ [IMAGEN] │
│ │
│ Servicio técnico │
│ │
│ Descripción breve │
│ │
│ [VER MÁS] │
└────────────────────────┘
Puedes utilizar varias Cards para crear:
- servicios;
- beneficios;
- categorías;
- características;
- equipo;
- contenidos destacados.
Ejemplo: crear tres tarjetas de servicios
Puedes construir:
Section
└── Container
└── Grid Row
├── Grid Column
│ └── Card
│ ├── Image
│ ├── Heading
│ ├── Paragraph
│ └── Button
│
├── Grid Column
│ └── Card
│ └── ...
│
└── Grid Column
└── Card
└── ...
Visualmente:
[ SERVICIO 1 ] [ SERVICIO 2 ] [ SERVICIO 3 ]
Construye una tarjeta y luego clónala
No necesitas repetir el proceso tres veces desde cero.
Puedes:
- crear correctamente la primera tarjeta;
- comprobar su diseño;
- seleccionar el contenedor correspondiente;
- utilizar Clonar elemento;
- modificar los contenidos de cada copia.
Esto ayuda a mantener consistencia visual.
Importante al clonar
Asegúrate de seleccionar la estructura completa que quieres repetir.
Si seleccionas únicamente:
Heading
duplicarás solamente el título.
Si querías duplicar:
Image
Heading
Paragraph
Button
deberás seleccionar el contenedor que incluye esos cuatro elementos.
Navigator te ayudará a identificarlo.
Alert
Permite mostrar un mensaje destacado.
Puede utilizarse para:
- avisos;
- información importante;
- condiciones;
- advertencias.
Badge
Permite mostrar pequeñas etiquetas visuales.
Por ejemplo:
Nuevo
Oferta
Destacado
Progress Bar
Permite representar visualmente un progreso o porcentaje.
Button Group
Permite organizar varios botones dentro de un mismo grupo.
List Group
Puede utilizarse para organizar conjuntos de opciones o contenidos relacionados.
Breadcrumbs y Pagination
Son componentes de navegación.
Su utilización depende del tipo de diseño o funcionalidad que necesites construir.
Widgets
La categoría Widgets incluye diferentes herramientas adicionales.
Entre las opciones disponibles pueden aparecer:
- Google Maps;
- Embed Video;
- Lottie;
- Paypal;
- Twitter;
- Open Street Map.
Mapas
Los componentes de mapas pueden utilizarse para mostrar:
- ubicación de un local;
- oficinas;
- sucursales;
- puntos de atención;
- zonas de referencia.
Embed Video
Permite incorporar contenido de video compatible.
Lottie
Puede utilizarse para incorporar determinadas animaciones compatibles.
Como ocurre con cualquier animación, recomendamos utilizarla solamente cuando aporte valor al diseño y comprobar su comportamiento en dispositivos móviles.
Componentes incrustados
La categoría Incrustados permite incorporar contenidos procedentes de servicios externos.
Entre las opciones disponibles en la interfaz puedes encontrar servicios como:
- YouTube;
- Vimeo;
- Spotify;
- SoundCloud;
- TikTok;
- Pinterest;
- Twitter;
- Reddit;
- y otras plataformas compatibles.
Selecciona el componente correspondiente según el contenido que quieras mostrar.
Componentes personalizados
Waclis también puede incorporar:
Componentes personalizados
Estos pueden variar según las funcionalidades disponibles en el editor.
Si encuentras un componente específico para la necesidad que estás desarrollando, puedes utilizarlo igual que los demás elementos y revisar sus propiedades desde el panel izquierdo.
Utiliza el buscador de componentes
Si ya sabes qué necesitas, no hace falta recorrer todas las categorías.
Puedes utilizar el buscador.
Por ejemplo, escribe:
image
para localizar componentes relacionados con imágenes.
O:
button
para buscar botones.
Esto agiliza considerablemente el trabajo cuando la biblioteca de componentes es grande.
¿Cómo agregar un componente?
Selecciona el componente que necesitas y colócalo en la ubicación correspondiente dentro de la estructura.
Mientras construyes, presta atención a dónde estás agregándolo.
Por ejemplo:
Si quieres un título dentro de la columna derecha:
Grid Row
├── Grid Column
│
└── Grid Column
└── Heading ← aquí
no deberías colocarlo accidentalmente fuera de Grid Row.
Cómo saber dónde quedó colocado
Utiliza:
Navigator
Después de agregar el componente.
Si esperabas:
Grid Column
└── Image
pero Navigator muestra:
Grid Row
├── Image
└── Grid Column
significa que el elemento quedó en otro nivel de la estructura.
Puedes moverlo a la posición correcta.
Mover un componente
Cuando seleccionas un elemento puedes utilizar las herramientas de movimiento disponibles.
Entre ellas:
- Arrastrar elemento;
- Mover elemento arriba;
- Mover elemento abajo.
También puedes utilizar Navigator para comprender mejor la posición antes de moverlo.
Seleccionar padre
Una herramienta especialmente útil es:
Seleccionar padre
Por ejemplo, si seleccionaste:
Image
puedes subir hacia:
Grid Column
y posteriormente hacia:
Grid Row
Esto facilita muchísimo la edición de estructuras creadas desde cero.
Modificar el contenido después de insertarlo
Una vez agregado el componente, selecciónalo.
La pestaña:
Contenido
mostrará las propiedades específicas de ese elemento.
Por ejemplo:
Image
puede mostrar:
- Set Image;
- Width;
- Height;
- Alt;
- Align;
- Link.
Link
puede mostrar:
- URL;
- Rel;
- Target.
Html Button
puede mostrar:
- Text;
- Type;
- Name.
Las opciones cambian según el componente seleccionado.
Personalizar la apariencia
Después de configurar el contenido puedes utilizar:
Estilo
para modificar propiedades visuales como:
- Typography;
- Size;
- Margin;
- Padding;
- Border;
- Border radius;
- Background Image;
- colores.
Este método permite construir diseños personalizados sin tener que escribir CSS para cada modificación.
Ejemplo: dar espacio interior a una tarjeta
Supongamos que una Card tiene el contenido demasiado cerca de sus bordes.
Selecciona el contenedor correspondiente y utiliza:
Estilo → Padding
Por ejemplo, puedes agregar espacio:
┌──────────────────────────┐
│ │
│ [Imagen] │
│ │
│ Título │
│ Descripción │
│ │
└──────────────────────────┘
El Padding afecta el espacio dentro del elemento.
Ejemplo: separar tarjetas entre sí
Si necesitas separar elementos externamente, puedes utilizar:
Margin
o ajustar el espacio de la estructura correspondiente.
Recuerda:
Padding = espacio interior.
Margin = espacio exterior.
Fondos
Puedes aplicar fondos a diferentes niveles de la composición.
Por ejemplo:
Fondo de Section
Puede abarcar una gran área.
██████████████████████████████
█ █
█ CONTENIDO █
█ █
██████████████████████████████
Fondo de Card
Puede aplicarse solamente a una tarjeta.
[ Card ] [ Card ] [ Card ]
Por eso es importante seleccionar el nivel correcto antes de modificar Background Color o Background Image.
¿Qué elemento debo seleccionar?
Piensa siempre qué quieres modificar.
Quiero cambiar solamente una fotografía
Selecciona:
Image
Quiero cambiar el fondo de una tarjeta completa
Selecciona:
Card o su contenedor.
Quiero separar toda una fila de la siguiente sección
Selecciona:
Grid Row, Container o Section según la estructura.
Quiero cambiar el fondo de toda la composición
Selecciona:
Section
Linked styles al trabajar con componentes
Cuando creas o clonas componentes, varios elementos pueden compartir una misma clase.
Waclis puede mostrar:
Linked styles
Esto significa que determinados estilos son compartidos.
Por ejemplo:
Card 1 → .servicio
Card 2 → .servicio
Card 3 → .servicio
Si modificas una regla asociada a .servicio, es posible que cambien las tres.
Esto puede ser exactamente lo que deseas.
Por ejemplo, cambiar simultáneamente el fondo de todas las tarjetas.
Pero si solamente querías modificar una, necesitarás identificarla de manera más específica.
Clases compartidas no siempre son un problema
De hecho, pueden ser muy útiles.
Supongamos que tienes seis botones.
Si todos utilizan una misma clase, puedes mantener:
- mismo color;
- misma tipografía;
- mismo borde;
- mismo efecto hover.
Así consigues consistencia.
El problema aparece solamente cuando esperabas modificar un único elemento y la regla alcanza a varios.
Construir una sección de beneficios desde cero
Otro ejemplo.
Queremos crear:
¿POR QUÉ ELEGIRNOS?
[✓] [✓] [✓]
Envíos Calidad Soporte
Descripción Descripción Descripción
Estructura
Podríamos utilizar:
Section
└── Container
├── Heading
│
└── Grid Row
├── Grid Column
│ ├── Icon
│ ├── Heading
│ └── Paragraph
│
├── Grid Column
│ ├── Icon
│ ├── Heading
│ └── Paragraph
│
└── Grid Column
├── Icon
├── Heading
└── Paragraph
Paso 1
Crea la Section.
Paso 2
Agrega el Container.
Paso 3
Agrega el Heading general:
¿Por qué elegirnos?
Paso 4
Agrega un Grid Row de tres columnas.
Paso 5
Dentro de la primera columna incorpora:
- icono;
- Heading;
- Paragraph.
Paso 6
Configura visualmente esa columna.
Cuando estés conforme, puedes clonar su estructura para generar las demás.
Paso 7
Cambia el contenido de cada copia.
Por ejemplo:
Envíos a todo el país
Compra segura
Atención personalizada
Revisa qué sucede en celular
En desktop podrías mostrar:
[ BENEFICIO ] [ BENEFICIO ] [ BENEFICIO ]
Mientras que en móvil será preferible:
[ BENEFICIO ]
[ BENEFICIO ]
[ BENEFICIO ]
Configura la estructura responsive de las columnas cuando sea necesario.
No utilices tamaños fijos innecesarios
Cuando construyas diseños responsive evita fijar dimensiones rígidas en todos los elementos si no es necesario.
Por ejemplo, establecer:
width: 1200px
sobre un contenido puede generar problemas en celulares.
Siempre que sea posible, utiliza estructuras que puedan adaptarse al espacio disponible y comprueba las diferentes vistas.
Vista responsive
Utiliza los controles superiores para revisar:
- celular;
- tablet;
- computadora.
La vista permite detectar problemas como:
- contenido cortado;
- columnas demasiado angostas;
- textos demasiado grandes;
- imágenes que desbordan;
- botones fuera de pantalla;
- espacios excesivos.
Ocultar un componente según el dispositivo
Si realmente necesitas que un componente no aparezca en determinados tamaños, utiliza:
Avanzado → Hide based on device screen width
Esto es diferente de simplemente cambiar la vista del editor.
Animaciones
Cualquier componente compatible puede utilizar las opciones de:
Avanzado → Animate on scroll
Puedes seleccionar:
- Animation type;
- Duration;
- Delay.
Después utiliza:
Play animation
para probarla.
No abuses de las animaciones
Si construyes una sección de tres tarjetas, no necesariamente necesitas aplicar tres animaciones completamente diferentes.
Una página suele resultar más coherente cuando los efectos siguen una lógica común.
Por ejemplo:
Tarjeta 1 → fade
Tarjeta 2 → fade
Tarjeta 3 → fade
puede ser más consistente que utilizar un efecto diferente en cada una.
Estados Hover y Active
Dentro de Estilo puedes trabajar con estados como:
- hover;
- active.
Esto permite crear comportamientos visuales.
Por ejemplo:
Estado normal
[ VER MÁS ]
Hover
[ VER MÁS ] ← cambia fondo/color al pasar el cursor
Esta herramienta puede utilizarse en:
- botones;
- enlaces;
- tarjetas;
- imágenes;
- otros componentes compatibles.
¿Cuándo utilizar HTML o CSS?
Construir desde componentes no significa que debas evitar código siempre.
Puedes utilizarlo cuando necesites algo que las opciones visuales no permiten resolver.
Pero recomendamos este orden:
1. Estructura con Componentes
↓
2. Contenido
↓
3. Estilo
↓
4. Avanzado
↓
5. HTML/CSS solamente si todavía es necesario
Esto ayuda a mantener los bloques más fáciles de administrar.
Editar el HTML de un componente
Puedes seleccionar el elemento y utilizar:
Editar código HTML <>
Esto permite modificar directamente la estructura HTML seleccionada.
Es útil para tareas más avanzadas como:
- agregar atributos;
- ajustar una estructura;
- incorporar clases;
- modificar código generado mediante una IA.
Utilizar CSS
Desde la herramienta CSS puedes crear reglas más específicas.
Por ejemplo:
.tarjeta-servicio:hover {
transform: translateY(-5px);
}Pero antes de agregar CSS, revisa si el mismo resultado puede conseguirse desde las opciones visuales.
Evita selectores demasiado generales
Supongamos que escribes:
img {
width: 100%;
}Eso puede afectar todas las imágenes alcanzadas por esa regla, no solamente la fotografía que tienes seleccionada.
Un selector más específico puede ser:
.servicio-imagen {
width: 100%;
}La especificidad es especialmente importante cuando una página contiene muchos componentes.
Utiliza nombres de clases claros
Cuando necesites clases personalizadas, intenta utilizar nombres relacionados con la función del componente.
Por ejemplo:
beneficios-grid
beneficio-card
beneficio-icono
beneficio-titulo
Es preferible a nombres poco descriptivos como:
caja1
cosa
estilo2
Esto facilita las modificaciones posteriores.
Construir bloques con ayuda de inteligencia artificial
Una vez creada la estructura básica puedes pedir ayuda a ChatGPT, Claude o Gemini para realizar personalizaciones.
Por ejemplo:
Tengo una sección con tres tarjetas de beneficios. Quiero que en desktop aparezcan en tres columnas y en celular una debajo de otra. Al pasar el cursor quiero que la tarjeta se eleve suavemente 5 píxeles. No modifiques otras secciones de la página.
Cuanto más preciso seas, mejor será el código generado.
Existe un tutorial específico dedicado a utilizar IA con los bloques de Waclis.
No copies innecesariamente todo el Code editor
Si necesitas pedir ayuda para un componente específico, intenta identificar primero su estructura mediante:
- Navigator;
- clases;
- ID;
- Editar código HTML.
Compartir únicamente el código relacionado con el elemento que necesitas modificar reduce el riesgo de cambiar otras partes de la página.
Ejemplo completo: crear un CTA desde cero
Queremos construir:
┌────────────────────────────────────────────┐
│ │
│ ¿LISTO PARA COMENZAR? │
│ │
│ Descubre todos nuestros productos. │
│ │
│ [ VER PRODUCTOS ] │
│ │
└────────────────────────────────────────────┘
Puedes crear:
Section
└── Container
├── Heading
├── Paragraph
└── Link / Button
Después puedes:
- centrar los textos;
- agregar Padding;
- seleccionar un Background Color;
- cambiar Text Color;
- personalizar el botón;
- configurar su URL;
- agregar una animación si lo deseas;
- comprobar el resultado en móvil.
Con pocos componentes puedes crear una sección completamente personalizada.
Ejemplo completo: imagen + contenido + beneficios
También puedes crear:
Section
└── Container
└── Grid Row
├── Grid Column
│ └── Image
│
└── Grid Column
├── Heading
├── Paragraph
└── List
Resultado:
[ IMAGEN ] SOLUCIONES PARA TU EMPRESA
Te acompañamos durante todo
el proceso.
✓ Atención personalizada
✓ Entregas rápidas
✓ Soporte especializado
No necesitas buscar una sección prediseñada que coincida exactamente con esta estructura.
Puedes construirla con componentes.
¿Secciones prediseñadas o componentes?
No existe una única opción correcta.
Utiliza una sección prediseñada cuando:
- existe una alternativa similar a lo que necesitas;
- quieres trabajar más rápido;
- no quieres construir la estructura manualmente.
Utiliza componentes cuando:
- necesitas una distribución específica;
- ningún diseño existente se adapta;
- quieres controlar la estructura;
- necesitas crear algo personalizado.
Combina ambos cuando:
una sección prediseñada te sirve como base pero necesitas agregar componentes adicionales.
Puedes agregar componentes a una sección prediseñada
No son sistemas separados.
Por ejemplo, puedes insertar una sección prediseñada de Quiénes somos y agregarle posteriormente:
- otro botón;
- una galería;
- un contador;
- un video;
- una fila adicional;
- un acordeón.
Esto permite utilizar lo mejor de ambos métodos.
Eliminar componentes
Si un elemento ya no es necesario, puedes eliminarlo mediante la papelera.
Recuerda:
no existe confirmación adicional.
Comprueba primero:
- qué componente está seleccionado;
- su posición en Navigator;
- si estás eliminando solamente un elemento o todo su contenedor.
¿Qué pasa si elimino una columna?
Si una columna contiene:
Grid Column
├── Image
├── Heading
└── Paragraph
y eliminas Grid Column, también estarás eliminando la estructura que contiene esos elementos.
Por eso es importante comprender la jerarquía.
Deshacer ante un error
Si eliminaste o moviste algo accidentalmente, utiliza:
Deshacer
lo antes posible.
Evita continuar realizando muchas modificaciones antes de corregir el error.
Guardar Cambios
Cuando la sección esté terminada:
- revisa la estructura;
- comprueba los textos;
- verifica imágenes;
- prueba enlaces;
- revisa desktop;
- revisa tablet;
- revisa celular;
- comprueba animaciones;
- haz clic en Guardar Cambios.
Waclis mostrará una notificación verde confirmando el guardado.
Utiliza Ver página
Después de guardar recomendamos utilizar:
Ver página
para revisar el resultado fuera del editor.
Esto es especialmente importante si agregaste:
- formularios;
- enlaces;
- videos;
- contenido incrustado;
- animaciones;
- CSS;
- elementos interactivos.
Flujo recomendado para construir desde cero
Puedes utilizar este orden:
- Define el objetivo de la sección.
- Decide cuántas columnas necesitas.
- Crea la Section.
- Agrega Container si corresponde.
- Agrega Grid Row.
- Define las columnas.
- Incorpora los componentes.
- Agrega los contenidos.
- Configura imágenes y enlaces.
- Personaliza Typography.
- Ajusta Margin y Padding.
- Personaliza fondos y bordes.
- Utiliza Navigator para comprobar la jerarquía.
- Revisa Linked styles.
- Configura responsive.
- Agrega animaciones solamente si son necesarias.
- Utiliza HTML o CSS únicamente para ajustes más avanzados.
- Revisa todas las vistas.
- Guarda.
- Utiliza Ver página.
Errores frecuentes
Agregar contenido antes de definir la estructura
Primero piensa en filas y columnas.
Colocar elementos fuera de sus columnas
Utiliza Navigator para comprobar la jerarquía.
Modificar la Section cuando solamente querías cambiar una Card
Comprueba siempre el elemento seleccionado.
Duplicar solamente el título cuando querías duplicar toda una tarjeta
Selecciona el contenedor completo.
Eliminar una columna sin darse cuenta de que contiene varios elementos
Revisa Navigator antes de eliminar.
Diseñar únicamente para computadora
Comprueba siempre el comportamiento responsive.
Utilizar ancho o alto fijo sin necesidad
Puede generar problemas en dispositivos pequeños.
Escribir CSS para cada pequeña modificación
Prueba primero Contenido, Estilo y Avanzado.
Ignorar Linked styles
Una clase compartida puede provocar que varios elementos cambien simultáneamente.
Utilizar demasiados componentes sin una estructura lógica
Una sección más simple y ordenada suele ser más fácil de mantener.
En resumen
Los Componentes permiten construir secciones completamente personalizadas dentro del Editor de bloques.
El concepto principal es trabajar de afuera hacia adentro:
SECTION
↓
CONTAINER
↓
GRID ROW
↓
COLUMNAS
↓
COMPONENTES
Después puedes incorporar:
- títulos;
- textos;
- imágenes;
- botones;
- galerías;
- tarjetas;
- formularios;
- íconos;
- videos;
- mapas;
- y otros elementos.
Una estructura correctamente organizada facilita:
- la edición;
- el responsive;
- el mantenimiento;
- la personalización visual;
- el uso de CSS;
- futuras modificaciones.
No necesitas utilizar código para construir una sección personalizada. HTML y CSS pueden incorporarse posteriormente cuando necesites mayor control.
¿Necesitas más ayuda?
Si este artículo no resolvió tu consulta, nuestro equipo puede ayudarte personalmente.
Soporte por WhatsApp