Artículo de ayuda · Waclis

¿Cómo utilizar secciones prediseñadas en el Editor de bloques de Waclis?

¿Cómo utilizar secciones prediseñadas en el Editor de bloques de Waclis?

Las secciones prediseñadas del Editor de bloques de Waclis permiten agregar rápidamente estructuras completas a una Página web sin tener que construir todos sus elementos desde cero.

Puedes utilizarlas como punto de partida para crear galerías, banners, testimonios, preguntas frecuentes, formularios, presentaciones institucionales, llamados a la acción, mapas y muchos otros tipos de contenido.

Después de agregar una sección puedes reemplazar sus textos, imágenes, enlaces y demás contenidos, además de personalizar su apariencia mediante las herramientas visuales del editor.

Para la mayoría de las modificaciones no necesitas utilizar código. El artículo anterior ya contemplaba precisamente esta combinación entre edición visual y personalización avanzada mediante código cuando fuera necesaria.

¿Qué es una sección prediseñada?

Una sección prediseñada es una composición que ya incluye una estructura preparada para cumplir una determinada función.

Por ejemplo, una sección de beneficios puede incluir:

  • un título;
  • varias columnas;
  • íconos o imágenes;
  • títulos individuales;
  • descripciones.

Una sección de testimonios puede incluir:

  • nombre del cliente;
  • fotografía;
  • opinión;
  • elementos visuales;
  • diferentes columnas o tarjetas.

En lugar de construir manualmente todos esos componentes, puedes insertar un diseño existente y luego adaptarlo a tu contenido.

Sección prediseñada no significa contenido fijo

Los diseños incluidos funcionan como puntos de partida.

Después de incorporar uno puedes modificar sus elementos.

Por ejemplo:

Diseño original

NUESTROS BENEFICIOS

[Icono]
Beneficio número uno
Descripción de ejemplo

[Icono]
Beneficio número dos
Descripción de ejemplo

[Icono]
Beneficio número tres
Descripción de ejemplo

Puedes convertirlo en:

¿POR QUÉ ELEGIRNOS?

[Icono]
Envíos a todo el país
Despachamos tus pedidos de forma rápida y segura.

[Icono]
Compra segura
Diferentes medios de pago disponibles.

[Icono]
Atención personalizada
Nuestro equipo puede ayudarte antes y después de tu compra.

Puedes mantener el diseño y reemplazar solamente el contenido o realizar una personalización visual mucho mayor.

¿Cuándo conviene utilizar una sección prediseñada?

Son especialmente útiles cuando:

  • quieres crear contenido rápidamente;
  • no tienes experiencia en diseño web;
  • necesitas una estructura visual como punto de partida;
  • quieres mantener una composición ordenada;
  • no quieres construir filas y columnas manualmente;
  • encuentras un diseño similar al resultado que buscas.

Si ningún diseño disponible se adapta a tu necesidad, también puedes construir una sección desde cero utilizando Componentes.

Esto lo veremos en el próximo tutorial.

¿Cómo acceder a las secciones prediseñadas?

Ingresa al Editor de bloques de la sección o área editable sobre la que quieras trabajar.

En el panel lateral izquierdo encontrarás:

Secciones

Desde allí puedes consultar las diferentes categorías disponibles.

Junto a esta opción también encontrarás Secciones de Página.

No debes confundirlas.

Secciones

Contiene la biblioteca de diseños prediseñados que puedes incorporar.

Secciones de Página

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

Paso 1: abre Secciones

Dentro del Editor de bloques selecciona:

Secciones

Verás las diferentes categorías disponibles.

Cada categoría agrupa diseños destinados a una función determinada.

Paso 2: elige el tipo de contenido

Antes de seleccionar un diseño, piensa qué quieres comunicar.

Por ejemplo:

Si quieres mostrar opiniones de clientes:

Testimonios

Si quieres responder dudas habituales:

Preguntas frecuentes

Si quieres mostrar fotografías:

Galerías de imágenes

Si quieres dirigir al usuario hacia una acción:

CTA

Si quieres presentar a tu empresa:

Quiénes somos

Elegir primero el objetivo ayuda a encontrar una estructura apropiada.

Paso 3: despliega una categoría

Selecciona una de las categorías para visualizar los diseños disponibles.

Puedes revisar las diferentes alternativas y elegir la que mejor se adapte al tipo de contenido que quieres mostrar.

No es necesario que los colores, textos o imágenes originales sean exactamente los que necesitas.

Lo más importante es evaluar su estructura.

Por ejemplo:

  • cantidad de columnas;
  • posición de las imágenes;
  • ubicación del título;
  • distribución de los botones;
  • orden de los elementos;
  • proporciones generales.

Todo esto puede personalizarse posteriormente.

Paso 4: agrega el diseño al contenido

Selecciona la alternativa que quieras utilizar para incorporarla al contenido que estás diseñando.

Una vez agregada, la sección pasa a formar parte de la página y puedes comenzar a modificar sus elementos.

A partir de ese momento ya no debes pensar en ella como una plantilla cerrada.

Es una estructura editable compuesta por diferentes elementos.

Paso 5: selecciona el elemento que quieras modificar

Haz clic sobre el contenido que quieras cambiar.

Por ejemplo:

  • título;
  • imagen;
  • párrafo;
  • botón;
  • enlace;
  • columna;
  • sección completa.

Al seleccionar un elemento, el panel lateral mostrará las opciones correspondientes.

Recuerda que las propiedades cambian según el tipo de elemento seleccionado.

Modificar textos

Selecciona el título, párrafo u otro elemento de texto que quieras personalizar.

Puedes reemplazar el contenido original por el de tu Página web.

También puedes utilizar:

Estilo → Typography

para modificar propiedades como:

  • tamaño;
  • grosor;
  • alineación;
  • altura de línea;
  • separación entre caracteres;
  • otras configuraciones tipográficas.

Reemplazar imágenes

Selecciona una imagen de la sección.

Dentro de sus propiedades encontrarás:

Set Image

Desde allí puedes sustituirla por la imagen que quieras utilizar.

También puedes configurar propiedades como:

  • Width;
  • Height;
  • Alt;
  • Align;
  • Link;
  • ID;
  • Class.

Utiliza correctamente el texto alternativo de las imágenes

En el campo:

Alt

puedes escribir una descripción breve de la imagen.

Por ejemplo:

Equipo de atención al cliente de la empresa

o:

Botella térmica negra sobre fondo claro

No es recomendable utilizar nombres genéricos como:

imagen1

cuando puedes describir qué muestra la fotografía.

Modificar botones y enlaces

Si la sección incluye un botón o vínculo, selecciónalo para modificar sus propiedades.

Puedes cambiar:

  • texto;
  • URL;
  • comportamiento del enlace;
  • ID;
  • Class;
  • otras propiedades disponibles según el componente.

Por ejemplo, un botón de muestra:

CONOCER MÁS

puede convertirse en:

VER PRODUCTOS

y dirigir hacia la sección correspondiente de tu Página web.

Personalizar colores

Selecciona el elemento correspondiente y utiliza las opciones de Estilo.

Dependiendo del elemento puedes trabajar con:

  • Background Color;
  • Text Color;
  • Border;
  • otros estilos disponibles.

Esto permite adaptar la sección prediseñada a la identidad visual de tu marca.

Modificar espacios

Dos configuraciones especialmente importantes son:

Margin

Controla el espacio exterior alrededor de un elemento.

Padding

Controla el espacio interior entre su contenido y sus límites.

Por ejemplo:

┌───────────────────────────────┐
│ PADDING │
│ │
│ TÍTULO / TEXTO │
│ │
│ PADDING │
└───────────────────────────────┘

↓ MARGIN ↓

SIGUIENTE ELEMENTO

Estas herramientas son muy útiles para ajustar visualmente una sección sin necesidad de escribir CSS.

Modificar el fondo de una sección

Selecciona la Section completa cuando quieras modificar propiedades generales de esa composición.

Desde Contenido puedes encontrar opciones como:

  • Container width;
  • Container height;
  • Background;
  • Overlay;
  • Top Separator;
  • Bottom Separator.

Utilizar una imagen de fondo

Dentro de una Section puedes seleccionar:

Background → Image

También puedes trabajar desde las opciones de Estilo relacionadas con Background Image.

Según la configuración disponible podrás controlar aspectos como:

  • imagen;
  • repetición;
  • tamaño;
  • posición horizontal;
  • posición vertical.

Utilizar un video como fondo

Las propiedades de una Section también permiten seleccionar:

Background → Video

Esta alternativa puede utilizarse cuando el diseño y el contenido lo justifiquen.

Recuerda comprobar especialmente su comportamiento en dispositivos móviles y el impacto visual que genera sobre los textos superpuestos.

Overlay

Overlay permite utilizar una capa sobre el fondo de la sección.

Puede ser especialmente útil cuando tienes:

  • una fotografía como fondo;
  • texto encima de la imagen;
  • poco contraste entre ambos.

Por ejemplo:

IMAGEN DE FONDO
+
OVERLAY OSCURO
+
TEXTO BLANCO

puede mejorar considerablemente la legibilidad del contenido.

Boxed o Full

Cuando seleccionas una Section encontrarás:

Container width

con opciones como:

Boxed

Limita el contenido dentro de un ancho determinado.

Full

Permite que la sección aproveche todo el ancho disponible.

La elección depende del diseño.

Un bloque de texto puede funcionar bien en Boxed, mientras que determinados banners, fondos o composiciones visuales pueden aprovechar mejor Full.

Auto o Full para la altura

También encontrarás:

Container height

con opciones como:

Auto

La altura se adapta al contenido.

Full

La sección utiliza una altura completa.

Para la mayoría de las secciones informativas, Auto suele permitir que el propio contenido determine la altura.

Full puede ser útil en composiciones que necesitan ocupar una superficie vertical mayor.

Separadores superiores e inferiores

Una Section puede disponer de:

Top Separator

y

Bottom Separator

Estas herramientas permiten generar transiciones visuales entre una sección y otra.

Utilízalas cuando contribuyan al diseño general de la página y evita abusar de diferentes separadores en todas las secciones.

Utiliza Navigator cuando no puedas seleccionar algo fácilmente

Las secciones prediseñadas pueden contener numerosos elementos anidados.

Por ejemplo:

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

En determinadas ocasiones puede ser difícil seleccionar exactamente el elemento que necesitas desde la vista visual.

En esos casos utiliza:

Navigator

para localizarlo dentro de la estructura.

Seleccionar el elemento padre

La barra de acciones también dispone de:

Seleccionar padre

Esta herramienta puede ayudarte a subir dentro de la jerarquía.

Por ejemplo:

Image

Link

Grid Column

Grid Row

Section

Es especialmente útil cuando quieres pasar de editar un elemento individual a editar el contenedor que lo incluye.

Clonar elementos dentro de una sección prediseñada

Puedes utilizar:

Clonar elemento

para crear una copia.

Por ejemplo, una sección incluye tres beneficios:

Beneficio 1
Beneficio 2
Beneficio 3

Si la estructura lo permite y necesitas un cuarto, puedes duplicar uno de los elementos existentes y modificar después su contenido.

Antes de hacerlo, revisa su estructura mediante Navigator para asegurarte de estar clonando el elemento correcto.

Eliminar elementos que no necesitas

También puedes eliminar elementos de una sección prediseñada.

Por ejemplo, puedes utilizar una composición que originalmente tenga cuatro tarjetas y quitar una si solamente necesitas tres.

Importante: la acción Eliminar no solicita confirmación.

Verifica siempre qué elemento está seleccionado antes de utilizar la papelera.

Si eliminas algo accidentalmente, utiliza Deshacer inmediatamente.

Puedes combinar varias secciones prediseñadas

Una página no tiene que utilizar un único diseño.

Puedes combinar diferentes secciones para construir un recorrido completo.

Por ejemplo:

BANNER



QUIÉNES SOMOS



BENEFICIOS



SERVICIOS



TESTIMONIOS



PREGUNTAS FRECUENTES



CTA



FORMULARIO

Cada sección puede tener una estructura diferente y formar parte de una misma página.

Categorías de secciones disponibles

La biblioteca actual del Editor de bloques de Waclis incluye diferentes tipos de secciones.

A continuación explicamos para qué puede servir cada una.

Galerías de imágenes

Pensadas para mostrar varias imágenes dentro de una composición visual.

Son útiles para:

  • fotografías de productos;
  • instalaciones;
  • proyectos;
  • eventos;
  • trabajos realizados;
  • portfolios visuales.

Beneficios

Permiten presentar ventajas, diferenciales o razones para elegir una empresa, producto o servicio.

Por ejemplo:

  • envíos;
  • garantía;
  • experiencia;
  • soporte;
  • financiación;
  • atención personalizada.

Testimonios

Permiten incorporar opiniones, experiencias o reseñas.

Pueden incluir diferentes combinaciones de:

  • texto;
  • nombre;
  • imagen;
  • cargo;
  • empresa.

Preguntas frecuentes

Pensadas para responder dudas comunes de los visitantes.

Son especialmente útiles para organizar:

  • condiciones;
  • envíos;
  • compras;
  • servicios;
  • procesos;
  • políticas;
  • preguntas comerciales.

Acordeones

Permiten mostrar y ocultar contenido de forma desplegable.

Son útiles cuando necesitas presentar bastante información ocupando inicialmente menos espacio visual.

Carruseles

Permiten disponer contenido en una estructura deslizable.

Pueden utilizarse para mostrar diferentes contenidos dentro de una misma área.

Sliders de imágenes

Están orientados especialmente a secuencias visuales de imágenes.

Pueden resultar útiles para:

  • promociones;
  • presentaciones;
  • fotografías destacadas;
  • campañas.

Banners

Permiten destacar visualmente mensajes importantes.

Por ejemplo:

  • promociones;
  • lanzamientos;
  • novedades;
  • campañas;
  • información institucional.

CTA

CTA significa Call to Action o llamado a la acción.

Estas secciones están pensadas para estimular una acción concreta.

Por ejemplo:

Comprar ahora

Solicitar presupuesto

Contactarnos

Ver productos

Conocer más

Texto e imagen

Combinan contenido escrito con apoyo visual.

Son especialmente versátiles para:

  • explicar servicios;
  • presentar una empresa;
  • contar una historia;
  • describir beneficios;
  • introducir una categoría.

Quiénes somos

Son composiciones institucionales destinadas a presentar:

  • empresa;
  • marca;
  • proyecto;
  • trayectoria;
  • historia;
  • misión;
  • visión.

Tabla de precios

Permiten presentar diferentes alternativas de precios, planes o servicios dentro de una estructura comparativa.

Formularios de contacto

Permiten incorporar estructuras destinadas a recibir datos o consultas del visitante.

Antes de utilizar un formulario en producción, comprueba siempre su funcionamiento desde la Página web.

Newsletters

Diseños orientados a invitar al visitante a suscribirse o dejar sus datos para recibir comunicaciones.

Características

Permiten destacar atributos, funciones o cualidades.

Pueden utilizarse para presentar:

  • funcionalidades;
  • ventajas;
  • especificaciones;
  • características de un servicio;
  • puntos importantes.

Mapas y localización

Pensadas para mostrar información relacionada con ubicaciones.

Pueden utilizarse para:

  • sucursales;
  • oficinas;
  • locales;
  • puntos de retiro;
  • zonas de atención.

Portafolio

Permiten mostrar trabajos, proyectos, diseños, casos o realizaciones.

Son especialmente útiles para empresas de servicios, profesionales y marcas que necesitan presentar ejemplos visuales.

Citas o frases

Permiten destacar una frase, concepto, testimonio breve o mensaje importante dentro del recorrido visual de la página.

Redes sociales

Están destinadas a incorporar accesos o contenidos relacionados con redes sociales.

Equipo o colaboradores

Permiten presentar personas que forman parte de una empresa, equipo o proyecto.

Pueden incluir:

  • fotografía;
  • nombre;
  • cargo;
  • descripción;
  • información adicional.

Contenidos destacados

Permiten dar mayor protagonismo a determinada información.

Pueden utilizarse para:

  • novedades;
  • campañas;
  • conceptos importantes;
  • productos o servicios que quieras presentar mediante contenido estático;
  • enlaces hacia otras secciones.

Servicios

Pensadas para presentar los diferentes servicios ofrecidos.

Por ejemplo:

SERVICIO 1
Descripción

SERVICIO 2
Descripción

SERVICIO 3
Descripción

Timeline

Permiten representar información mediante una secuencia o recorrido.

Son útiles para:

  • historia de una empresa;
  • etapas de un proceso;
  • pasos;
  • acontecimientos;
  • evolución de un proyecto.

El artículo anterior ya incluía varias de estas categorías —como Galerías, Carruseles, Quiénes somos, Beneficios, Testimonios, FAQ, Acordeones, Banners, CTA, Texto e imagen, Tablas de precios, Formularios, Características, Portfolio, Equipos, Servicios y Timeline—, pero la interfaz actual amplía esa biblioteca con otras opciones que ahora incorporamos a la documentación.

¿Qué pasa si una sección tiene más elementos de los que necesito?

Puedes adaptar la estructura.

Por ejemplo, si una sección contiene:

Servicio 1
Servicio 2
Servicio 3
Servicio 4

y solamente necesitas tres:

  1. identifica el cuarto elemento;
  2. utiliza Navigator si es necesario;
  3. comprueba que seleccionaste su contenedor completo;
  4. elimínalo.

Evita eliminar únicamente el texto dejando un espacio vacío si tu intención es quitar toda la tarjeta o columna.

¿Y si necesito agregar más elementos?

Puedes utilizar la opción Clonar elemento cuando la estructura permita repetir el diseño.

Por ejemplo:

[Servicio]

Clonar

[Servicio]
[Servicio]

Después modifica los textos, imágenes y enlaces de la copia.

Cuidado con los estilos compartidos

Una sección prediseñada puede utilizar las mismas clases en varios elementos.

En determinadas situaciones Waclis mostrará:

Linked styles

Esto indica que una modificación de estilo puede afectar a más de un elemento.

Por ejemplo, tres títulos pueden compartir una misma clase.

Modificar el estilo de esa clase podría cambiar los tres simultáneamente.

Si observas un resultado inesperado:

  1. comprueba Navigator;
  2. revisa el elemento seleccionado;
  3. comprueba ID y Class;
  4. verifica si aparece Linked styles;
  5. utiliza Deshacer si el cambio no era el esperado.

No confundas contenido con estructura

Supongamos que tienes una tarjeta compuesta por:

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

Si solamente quieres reemplazar la fotografía, selecciona Image.

Si quieres mover toda la tarjeta, debes seleccionar Card o el contenedor correspondiente.

Si quieres cambiar el espacio entre todas las tarjetas, probablemente necesites seleccionar su fila o contenedor.

Saber qué nivel estás modificando es fundamental para trabajar correctamente con diseños prediseñados.

Adapta siempre la sección a dispositivos móviles

No des por terminado un diseño después de comprobarlo solamente en computadora.

Utiliza las vistas disponibles para revisar:

  • celular;
  • tablet;
  • computadora.

Presta especial atención a:

  • columnas;
  • imágenes;
  • tamaño de títulos;
  • botones;
  • márgenes;
  • espacios internos;
  • contenido que pueda quedar demasiado ancho.

Una sección puede cambiar completamente entre desktop y móvil

Por ejemplo:

Computadora

[Imagen] [Texto] [Imagen]

puede reorganizarse en celular como:

[Imagen]

[Texto]

[Imagen]

Esto no significa necesariamente que exista un problema.

Es parte del comportamiento responsive del diseño.

Lo importante es comprobar que el resultado siga siendo claro y usable.

Si necesitas ocultar un elemento en determinados dispositivos

Selecciona el elemento y dirígete a:

Avanzado → Hide based on device screen width

Desde allí puedes determinar en qué tamaños se ocultará.

Recuerda:

Vista móvil/tablet/desktop = previsualización.

Hide based on device screen width = comportamiento real de visibilidad.

Agregar animaciones

También puedes utilizar:

Avanzado → Animate on scroll

para aplicar animaciones cuando el visitante llega a determinado elemento mientras recorre la página.

Puedes configurar:

  • tipo de animación;
  • duración;
  • demora.

Utiliza:

Play animation

para comprobar el resultado.

Recomendación sobre animaciones

No es necesario animar todos los elementos.

En general, las animaciones funcionan mejor cuando ayudan a:

  • destacar información;
  • acompañar la aparición de una sección;
  • mejorar el recorrido visual.

Demasiados movimientos simultáneos pueden dificultar la lectura.

¿Puedo modificar el HTML de una sección prediseñada?

Sí.

Puedes utilizar la opción:

Editar código HTML <>

sobre el elemento seleccionado.

Esta herramienta está orientada a personalizaciones más avanzadas.

También existen otras herramientas como:

  • CSS;
  • Code editor.

Pero para modificaciones habituales recomendamos comenzar por las opciones visuales.

¿Puedo utilizar CSS?

Sí.

El editor dispone de una herramienta CSS para trabajar directamente con reglas de estilo.

Es útil cuando:

  • necesitas una propiedad no disponible visualmente;
  • quieres aplicar efectos específicos;
  • utilizas selectores;
  • estás creando una personalización avanzada.

Antes de utilizar CSS, comprueba las clases existentes para evitar modificar otras partes de la sección accidentalmente.

¿Puedo pedir ayuda a una inteligencia artificial?

Sí.

Puedes utilizar herramientas como ChatGPT, Claude o Gemini para ayudarte a:

  • modificar HTML;
  • escribir CSS;
  • crear efectos;
  • adaptar estructuras;
  • solucionar problemas responsive;
  • desarrollar secciones personalizadas.

Cuando solicites ayuda, es preferible proporcionar solamente el código relacionado con la sección que quieres modificar, junto con una explicación precisa de lo que deseas conseguir.

Existe un tutorial específico para este tipo de trabajo.

Secciones prediseñadas y contenido dinámico

Las secciones de esta biblioteca están orientadas al contenido editable mediante bloques.

No debes utilizarlas pensando que reemplazan automáticamente funcionalidades dinámicas administradas por Waclis, como el listado del catálogo o las fichas de productos.

El artículo anterior ya diferenciaba las secciones prearmadas del contenido dinámico del catálogo.

Si quieres complementar una página dinámica, utiliza las áreas editables correspondientes.

Por ejemplo:

PRODUCTOS

Bloque editable debajo del menú

Sección prediseñada de Beneficios

CATÁLOGO DINÁMICO DE WACLIS

Bloque editable arriba del menú inferior

Sección prediseñada de FAQ

De esta manera ambos tipos de contenido pueden convivir.

Ejemplo práctico: crear una página institucional

Supongamos que quieres crear la página:

Nuestra empresa

Podrías combinar:

1. Banner

Título:

Conoce nuestra empresa

2. Texto e imagen

Fotografía institucional + historia.

3. Beneficios

Tres diferenciales principales.

4. Timeline

Historia o evolución de la empresa.

5. Equipo o colaboradores

Presentación de integrantes.

6. Testimonios

Opiniones de clientes.

7. CTA

¿Quieres trabajar con nosotros?

Botón:

Contactarnos

Así puedes construir una página completa combinando distintas secciones existentes.

Ejemplo práctico: mejorar la página Productos

No necesitas crear una página nueva.

Puedes utilizar:

Productos → Bloque editable debajo del menú

e incorporar una sección de:

Beneficios

con información como:

ENVÍOS A TODO EL PAÍS

COMPRA SEGURA

ATENCIÓN PERSONALIZADA

Luego, arriba del Footer, puedes utilizar:

Preguntas frecuentes

para responder dudas habituales sobre compra y envío.

El listado dinámico de productos permanece entre ambos contenidos.

Guardar los cambios

Una vez finalizada la personalización:

  1. comprueba la versión de computadora;
  2. revisa tablet;
  3. revisa celular;
  4. prueba botones y enlaces;
  5. utiliza Vista previa si lo necesitas;
  6. haz clic en Guardar Cambios.

Waclis mostrará una notificación verde cuando el contenido haya sido guardado correctamente.

Comprueba el resultado en la Página web

Después de guardar utiliza:

Ver página

Esto es especialmente importante en secciones que contienen:

  • enlaces;
  • formularios;
  • animaciones;
  • contenido responsive;
  • elementos incrustados;
  • comportamientos interactivos.

Errores frecuentes

Elegir una sección solamente por sus colores

Prioriza primero su estructura.

Los colores y contenidos pueden modificarse posteriormente.

Borrar solamente el contenido de una tarjeta cuando quieres eliminarla

Selecciona el contenedor correspondiente y elimina la estructura completa.

Modificar la Section cuando solo querías cambiar una imagen

Comprueba siempre el elemento seleccionado.

No revisar Navigator

En estructuras complejas puede evitar muchos errores.

Ignorar Linked styles

Si varios elementos cambian al mismo tiempo, comprueba si comparten estilos.

Revisar solamente desktop

Comprueba siempre dispositivos pequeños.

Utilizar CSS para algo que puede resolverse desde Estilo

Empieza por las herramientas visuales y utiliza código cuando realmente sea necesario.

Utilizar demasiadas secciones diferentes sin una estructura

Antes de construir una página, define el recorrido que quieres que siga el visitante.

Flujo recomendado

Cuando utilices una sección prediseñada, recomendamos este orden:

  1. Define qué contenido necesitas.
  2. Abre Secciones.
  3. Busca la categoría correspondiente.
  4. Elige la estructura más adecuada.
  5. Incorpórala al contenido.
  6. Reemplaza textos.
  7. Reemplaza imágenes.
  8. Configura enlaces y botones.
  9. Adapta colores y tipografías.
  10. Ajusta Margin y Padding.
  11. Utiliza Navigator para revisar la estructura.
  12. Comprueba si existen Linked styles.
  13. Revisa desktop, tablet y celular.
  14. Configura animaciones solamente si las necesitas.
  15. Guarda los cambios.
  16. Utiliza Ver página.

En resumen

Las secciones prediseñadas permiten comenzar a construir una Página web a partir de estructuras ya preparadas.

Puedes utilizarlas para acelerar el diseño y después personalizarlas mediante:

  • Contenido;
  • Estilo;
  • Avanzado;
  • Navigator;
  • clases e IDs;
  • HTML;
  • CSS.

No estás limitado al aspecto original del diseño.

Puedes reemplazar textos, imágenes y enlaces, modificar colores y espacios, quitar o duplicar elementos y combinar varias secciones para crear una página completa.

Si necesitas una estructura que no existe en la biblioteca, puedes construirla desde cero utilizando Componentes.

¿Necesitas más ayuda?

Si este artículo no resolvió tu consulta, nuestro equipo puede ayudarte personalmente.

Soporte por WhatsApp
QA · /ayuda-test