¿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:
- identifica el cuarto elemento;
- utiliza Navigator si es necesario;
- comprueba que seleccionaste su contenedor completo;
- 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:
- comprueba Navigator;
- revisa el elemento seleccionado;
- comprueba ID y Class;
- verifica si aparece Linked styles;
- 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:
- comprueba la versión de computadora;
- revisa tablet;
- revisa celular;
- prueba botones y enlaces;
- utiliza Vista previa si lo necesitas;
- 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:
- Define qué contenido necesitas.
- Abre Secciones.
- Busca la categoría correspondiente.
- Elige la estructura más adecuada.
- Incorpórala al contenido.
- Reemplaza textos.
- Reemplaza imágenes.
- Configura enlaces y botones.
- Adapta colores y tipografías.
- Ajusta Margin y Padding.
- Utiliza Navigator para revisar la estructura.
- Comprueba si existen Linked styles.
- Revisa desktop, tablet y celular.
- Configura animaciones solamente si las necesitas.
- Guarda los cambios.
- 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