¿Cómo crear una nueva sección y editarla con bloques en Waclis?

Aprende a crear una nueva sección para tu Página web y diseñar su contenido utilizando el Editor de bloques de Waclis.

Una nueva sección te permite crear una página con contenido propio, por ejemplo:

• Quiénes somos.
• Promociones.
• Preguntas frecuentes.
• Servicios especiales.
• Información institucional.
• Una landing page.
• Un catálogo informativo.
• Una campaña.
• Una página de distribuidores.
• Una sección personalizada para cualquier otra necesidad.

A diferencia de páginas como Productos, Blog o Contacto, donde existen áreas editables específicas, cuando creas una Nueva sección puedes diseñar libremente todo su contenido utilizando bloques.

¿Qué sucede cuando creas una nueva sección?

Al crear una nueva sección, Waclis genera una nueva opción que puedes incorporar a la navegación de tu Página web.

Después de crearla, encontrarás junto a ella el icono de la paleta, correspondiente a Bloque editable.

Al hacer clic sobre ese icono accederás directamente al Editor de bloques de esa sección.

Desde allí puedes:

• comenzar con una sección prediseñada;
• construir el contenido desde cero;
• agregar títulos y párrafos;
• incorporar imágenes;
• crear botones y enlaces;
• utilizar columnas;
• agregar galerías o carruseles;
• incorporar videos;
• agregar formularios;
• utilizar mapas;
• personalizar colores, tipografías y espacios;
• adaptar el diseño para diferentes dispositivos;
• trabajar con HTML y CSS cuando necesites una personalización avanzada.

Paso 1: ingresa a Menúes

Desde el panel de administración de Waclis dirígete a:

Configuración → Editar sitio → Menúes

Aquí encontrarás las diferentes opciones que forman parte de la navegación de tu Página web.

También podrás visualizar páginas existentes como:

• Home;
• Noticias o Blog;
• Productos;
• Servicios;
• Contacto;

además de las secciones personalizadas que hayas creado.

El flujo actual de creación se realiza desde esta administración de Menúes.

Paso 2: haz clic en Agregar

En la parte superior derecha encontrarás el botón:

Agregar

Haz clic para crear una nueva opción.

Waclis abrirá una ventana donde podrás configurar los datos de la nueva sección.

Paso 3: escribe el nombre de la sección

En:

Nombre de la opción de menú

escribe el texto con el que quieres identificar la nueva página.

Este será también el nombre que podrá visualizar el visitante dentro de la navegación, según la configuración seleccionada.

Por ejemplo:

Quiénes somos

Promociones

Preguntas frecuentes

Mayoristas

Distribuidores

Nuestra empresa

Conviene utilizar nombres breves y fáciles de comprender.

Paso 4: selecciona Nueva sección

Dentro de la configuración encontrarás la opción Contenido.

Para crear una página que posteriormente diseñarás con el Editor de bloques, selecciona:

Nueva sección

Esta es la opción que debes utilizar cuando deseas generar contenido propio dentro de Waclis.

El formulario también contempla URL externa para opciones que simplemente deben dirigir a otra dirección web, pero esa alternativa no crea una sección editable con bloques.

¿Cuál es la diferencia entre Nueva sección y URL externa?

Es importante distinguir ambas opciones.

Nueva sección

Crea una página dentro de Waclis.

Después podrás ingresar mediante el icono de Bloque editable y construir todo su contenido.

Por ejemplo:

QUIÉNES SOMOS

Nuestra historia

[Imagen del equipo]

Conoce nuestra empresa y cómo trabajamos.

[Botón: Contactarnos]

Todo este contenido puede construirse mediante el Editor de bloques.

URL externa

No crea una página de contenido dentro del Editor de bloques.

Se utiliza cuando quieres que una opción del menú dirija al usuario hacia otra dirección.

Por ejemplo:

Portal de clientes
→ https://otro-sitio.com

Si tu objetivo es diseñar una página mediante bloques, debes seleccionar Nueva sección.

Paso 5: decide dónde aparecerá la opción del menú

Durante la creación encontrarás también la opción:

Solo visible en el footer

Esta configuración determina dónde aparecerá el enlace hacia la sección dentro de la navegación.

Si la opción está desactivada, la sección puede mostrarse en la navegación superior y también en la inferior.

Si activas Solo visible en el footer, el acceso a esa sección se mostrará solamente en el menú inferior.

Importante: esto no significa que estés editando el Footer

La opción:

Solo visible en el footer

determina dónde aparecerá el enlace del menú que lleva a tu nueva sección.

No convierte el Footer en un bloque editable.

El Header y el Footer forman parte de la plantilla general de la Página web y no se editan mediante el Editor de bloques.

Por ejemplo, si creas:

Políticas comerciales

y seleccionas Solo visible en el footer, el visitante encontrará allí un enlace hacia esa nueva página.

El contenido de “Políticas comerciales” sí podrá diseñarse con bloques.

El Footer en sí continuará perteneciendo a la plantilla.

Paso 6: guarda la nueva sección

Una vez completados los datos, haz clic en:

Guardar

La nueva sección aparecerá en el listado de Menúes.

A partir de ese momento estará disponible para que agregues su contenido mediante el Editor de bloques.

Paso 7: identifica el icono de Bloque editable

Junto a la nueva sección encontrarás diferentes iconos de administración.

Para comenzar a diseñarla, utiliza el icono de la paleta.

Al colocar el cursor sobre esta opción podrás identificarla como:

Bloque editable

En las secciones nuevas, al hacer clic sobre la paleta Waclis abre directamente el Editor de bloques.

No confundas Bloque editable con el icono del ojo

Junto a las opciones del menú también encontrarás un icono con forma de ojo.

Cumple una función diferente.

El icono del ojo permite controlar la visibilidad de esa sección.

Si ocultas la sección, dejará de mostrarse en la navegación y no estará disponible normalmente para el visitante desde el frontend.

Para ingresar al Editor de bloques debes utilizar el icono de la paleta.

Paso 8: comienza a diseñar la sección

Cuando ingreses mediante Bloque editable encontrarás el entorno completo del Editor de bloques.

Puedes trabajar de dos maneras principales:

Utilizar una sección prediseñada

Es la alternativa recomendada cuando quieres construir rápidamente una página.

Puedes elegir diseños preparados para:

• texto e imagen;
• beneficios;
• testimonios;
• preguntas frecuentes;
• galerías;
• banners;
• llamados a la acción;
• formularios;
• equipo;
• servicios;
• mapas;
• redes sociales;
• y muchas otras opciones.

Después puedes reemplazar los contenidos originales por los tuyos.

Construir desde cero

También puedes utilizar Componentes individuales y crear tu propia estructura.

Por ejemplo:

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

Esta alternativa ofrece mayor libertad cuando necesitas un diseño específico.

Ejemplo: crear una sección “Quiénes somos”

Supongamos que quieres agregar una página institucional.

1. Crea la sección

Ingresa a:

Configuración → Editar sitio → Menúes

y selecciona:

Agregar

2. Completa sus datos

Nombre:

Quiénes somos

Contenido:

Nueva sección

Solo visible en el footer:

Déjalo desactivado si quieres que también esté disponible desde la navegación superior.

3. Guarda

Haz clic en:

Guardar

4. Abre Bloque editable

Localiza “Quiénes somos” en el listado y haz clic en el icono de la paleta.

Se abrirá el Editor de bloques.

5. Crea el contenido

Por ejemplo, podrías construir:

QUIÉNES SOMOS

[Imagen institucional]

Somos una empresa dedicada a...

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

NUESTRA HISTORIA

Texto sobre la historia de la empresa.

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

NUESTROS VALORES

[Calidad] [Innovación] [Servicio]

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

CONOCE NUESTRO EQUIPO

[Integrante] [Integrante] [Integrante]

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

¿QUIERES CONTACTARNOS?

[Botón: Contacto]

No necesitas crear cada parte como una página independiente.

Puedes incluir diferentes secciones y componentes dentro de la misma página.

Agregar una sección prediseñada

Dentro del Editor de bloques abre la opción:

Secciones

Encontrarás diferentes categorías de diseños.

Elige la categoría que necesites, selecciona uno de los diseños disponibles e incorpóralo a la página.

Después puedes seleccionar cada elemento para modificarlo.

Por ejemplo, si agregas una sección de beneficios podrás reemplazar:

• títulos;
• textos;
• íconos;
• imágenes;
• colores;
• enlaces;
• fondos.

No tienes que conservar el contenido de ejemplo.

La sección prediseñada funciona como punto de partida.

Agregar componentes individuales

Si prefieres construir desde cero, abre:

Componentes

Allí encontrarás elementos como:

• Heading;
• Image;
• Paragraph;
• Link;
• Html Button;
• Container;
• Grid Row;
• Card;
• Gallery;
• Carousel;
• Accordion;
• Tabs;
• Form;
• Iframe;
• y otros componentes.

Puedes combinarlos para construir tu propia estructura.

Utiliza el botón + para continuar agregando contenido

Dentro del área de diseño encontrarás botones + para incorporar contenido en determinadas posiciones.

Puedes utilizarlos para continuar construyendo la página y agregar nuevas estructuras.

Una misma página puede contener varias secciones.

Por ejemplo:

Sección 1
Banner principal

Sección 2
Presentación

Sección 3
Beneficios

Sección 4
Galería

Sección 5
Testimonios

Sección 6
Formulario

No existe la necesidad de colocar todo dentro de una única estructura.

Organiza correctamente el contenido

A medida que agregues elementos, el Editor de bloques construirá una jerarquía.

Por ejemplo:

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

Puedes consultar esta estructura mediante Navigator.

Navigator es especialmente útil cuando una página empieza a contener muchos elementos y ya no resulta sencillo seleccionarlos directamente desde la vista visual.

Modificar textos

Cuando selecciones un elemento de texto puedes editar su contenido y utilizar las opciones disponibles para personalizarlo.

Desde Estilo también puedes configurar propiedades como:

• tamaño;
• grosor;
• alineación;
• altura de línea;
• espaciado;
• color;
• márgenes.

Reemplazar imágenes

Cuando seleccionas una imagen, Waclis muestra sus propiedades en el panel izquierdo.

Desde allí puedes utilizar:

Set Image

para sustituirla.

También puedes configurar aspectos como:

• texto alternativo;
• dimensiones;
• alineación;
• enlaces;
• ID;
• Class.

Agregar enlaces

Los elementos compatibles pueden dirigir al visitante hacia otras páginas.

Al seleccionar un enlace podrás indicar una:

URL

Por ejemplo:

/productos

o una dirección externa cuando corresponda.

Antes de finalizar la página, comprueba siempre que los enlaces funcionen correctamente.

Personalizar colores, espacios y dimensiones

Desde la pestaña:

Estilo

puedes trabajar visualmente con configuraciones como:

• Typography;
• Size;
• Margin;
• Padding;
• Border;
• Border radius;
• Background Image;
• Background Color;
• Text Color.

Para modificaciones habituales no necesitas escribir CSS.

Revisa el diseño en diferentes dispositivos

Una sección que funciona correctamente en computadora puede necesitar ajustes cuando se visualiza desde un celular.

Utiliza las vistas disponibles en la barra superior para comprobar el resultado en diferentes tamaños de pantalla.

Revisa especialmente:

• tamaño de los textos;
• ancho de las imágenes;
• columnas;
• separación entre elementos;
• botones;
• contenido que pueda desbordarse.

Diferencia entre previsualizar y ocultar por dispositivo

Cambiar la vista del editor a celular, tablet o computadora sirve para comprobar visualmente el diseño.

No significa que ese contenido solamente se mostrará en el dispositivo seleccionado.

Si quieres ocultar realmente un elemento según el tamaño de pantalla, debes utilizar las opciones correspondientes dentro de:

Avanzado → Hide based on device screen width

Puedes mover y duplicar elementos

Cuando seleccionas determinados componentes aparece una barra de herramientas.

Desde allí puedes:

• arrastrarlos;
• seleccionar el elemento padre;
• moverlos;
• editar su HTML;
• clonarlos;
• eliminarlos.

La opción Clonar elemento resulta especialmente útil cuando quieres repetir un diseño.

Por ejemplo, puedes crear una tarjeta de servicio y luego duplicarla para mantener exactamente el mismo estilo.

Cuidado al eliminar

Eliminar un elemento no muestra una confirmación adicional.

Por este motivo, verifica siempre qué componente está seleccionado antes de utilizar la papelera.

Si eliminaste algo por error, utiliza Deshacer inmediatamente.

No necesitas utilizar código para crear una sección

Puedes construir una página completa utilizando solamente las herramientas visuales.

HTML y CSS deberían utilizarse cuando:

• necesitas un comportamiento específico;
• el editor visual no ofrece determinada configuración;
• quieres crear un diseño más avanzado;
• estás trabajando con código preparado específicamente para esa sección.

Si estás comenzando, recomendamos primero dominar:

Secciones → Componentes → Contenido → Estilo → Navigator

y avanzar posteriormente hacia las herramientas de código.

Guardar los cambios

Cuando termines de diseñar la sección, haz clic en:

Guardar Cambios

Waclis guardará el contenido y mostrará una notificación verde de confirmación.

No necesitas realizar un segundo paso de publicación dentro del Editor de bloques.

Verifica el resultado final

Después de guardar utiliza:

Ver página

para comprobar la sección dentro de tu Página web.

Revisa:

• el contenido;
• las imágenes;
• los botones;
• los enlaces;
• la visualización en diferentes tamaños;
• la navegación;
• las animaciones, si las utilizaste.

La vista del editor es una herramienta de trabajo; la comprobación final debería realizarse también sobre la Página web.

¿Puedo modificar una sección después de crearla?

Sí.

Puedes volver a:

Configuración → Editar sitio → Menúes

localizar la sección y utilizar nuevamente el icono de Bloque editable.

Waclis abrirá el contenido existente para que continúes trabajando sobre él.

No necesitas crear otra sección cada vez que quieras realizar una modificación.

¿Puedo crear varias secciones?

Sí.

Puedes crear las páginas personalizadas que necesites según la estructura de tu Página web.

Por ejemplo:

Home
Productos
Servicios
Quiénes somos
Mayoristas
Preguntas frecuentes
Distribuidores
Contacto

Las secciones personalizadas pueden utilizarse para ampliar el contenido que no pertenece a las páginas fijas administradas por Waclis.

¿Cuándo conviene crear una nueva sección y cuándo usar un bloque de una página fija?

Esta diferencia es importante.

Crea una nueva sección cuando...

Quieres disponer de una página independiente.

Por ejemplo:

Quiénes somos

Mayoristas

Distribuidores

Nuestra historia

Utiliza un área editable de una página fija cuando...

Quieres complementar una página que ya tiene una función propia.

Por ejemplo, si quieres agregar un banner encima del catálogo:

No necesitas crear una nueva página.

Puedes utilizar:

Productos → Bloque editable debajo del menú

De esta forma el banner aparecerá junto al catálogo sin crear una opción adicional en la navegación.

Ejemplo comparativo

Supongamos que quieres agregar información para clientes mayoristas.

Si necesitas una página completa con:

• requisitos;
• beneficios;
• condiciones;
• formulario;
• preguntas frecuentes;

puedes crear:

Mayoristas → Nueva sección

Pero si solamente quieres mostrar:

¿Eres mayorista? Conoce nuestras condiciones.

sobre el catálogo, puedes utilizar:

Productos → Bloque editable debajo del menú

La elección depende de si necesitas una página independiente o simplemente complementar una página existente.

Buenas prácticas al crear una nueva sección

Antes de comenzar a diseñar, recomendamos definir:

Objetivo

¿Qué debe lograr la página?

Por ejemplo:

informar, vender, captar contactos, presentar servicios o responder preguntas.

Estructura

Define primero las grandes áreas.

Por ejemplo:

Título
↓
Presentación
↓
Beneficios
↓
Galería
↓
Testimonios
↓
Llamado a la acción

Contenido

Prepara:

• textos;
• fotografías;
• enlaces;
• botones;
• videos;
• información de contacto.

Responsive

Comprueba cómo se comporta cada sección en dispositivos pequeños.

Resultado final

Utiliza Ver página antes de considerar terminada la sección.

Errores frecuentes

Crear una página cuando solo necesitas complementar Productos

Utiliza las áreas editables de Productos si el contenido debe aparecer junto al catálogo.

Confundir “Solo visible en el footer” con editar el Footer

Esta opción únicamente controla dónde aparece el enlace a la sección dentro de la navegación.

Agregar todo dentro de una única estructura

Puedes dividir una página en diferentes secciones para que resulte más fácil de administrar.

Eliminar sin comprobar qué está seleccionado

La eliminación es inmediata y no solicita confirmación.

Revisar solamente la versión de computadora

Siempre comprueba también dispositivos más pequeños.

Utilizar código antes de probar las herramientas visuales

Para cambios habituales, comienza por las opciones del propio Editor de bloques.

En resumen

Para crear una página personalizada en Waclis:

1. Ingresa a Configuración → Editar sitio → Menúes.
2. Haz clic en Agregar.
3. Escribe el nombre de la opción.
4. Selecciona Nueva sección.
5. Decide si será visible únicamente en el footer.
6. Guarda la sección.
7. Localízala en Menúes.
8. Haz clic en el icono de la paleta — Bloque editable.
9. Diseña el contenido utilizando Secciones o Componentes.
10. Comprueba el diseño en diferentes dispositivos.
11. Haz clic en Guardar Cambios.
12. Utiliza Ver página para revisar el resultado.

Una nueva sección te permite crear una página completa con contenido personalizado, mientras que las áreas editables de Home, Blog, Productos, Servicios y Contacto sirven para complementar páginas que ya tienen contenido propio.