Añadir y mover secciones y arrastrar medidas

Módulo 3: Textos, fotos y secciones · Tiempo de lectura: 10 minutos

Objetivo de aprendizaje: Después de esta lección podrá construir una página a partir de secciones: añadir una sección desde el selector o el chat, moverla, copiarla y eliminarla, arrastrar el espaciado y las medidas, y elegir para cada sección las columnas, las esquinas, el fondo y la visibilidad en móvil.

Conceptos clave: sección, Secciones, Añadir sección, forma, Sección debajo, tres diseños, Crear con IA, Editar sección, Espaciado, Espacio entre elementos, Columnas, Esquinas, Ocultar en móvil, tirador, HTML propio

Una página es una pila de secciones

Cada página de su sitio está formada por secciones: franjas horizontales colocadas una debajo de otra. Arriba suele haber una Portada (la gran apertura con título, texto y botón); debajo, por ejemplo, Tarjetas con sus servicios, Reseñas, Horario de apertura y, abajo del todo, Contacto. El editor tiene 35 tipos, cada uno en una o más formas: el mismo contenido, con otra presentación.

Quien piensa así construye una página mejor. Ponga la información más importante arriba, un tema por sección, y termine con lo que el visitante debe hacer (llamar, escribir un correo, pedir un presupuesto). En Schildersbedrijf Example, la página de inicio es así: Portada con "Pida un presupuesto", Tarjetas con tres servicios, Foto y texto sobre la forma de trabajar, Reseñas, Preguntas y Contacto.

Añadir una sección: tres caminos

1. Elegir usted mismo en el selector (gratis)

Abra el panel Secciones en la barra lateral, o haga clic en la vista previa en Sección debajo: ese botón está en la barra de herramientas de la sección seleccionada y en la línea con + que aparece al pasar el ratón entre dos secciones. Debajo de la vista previa también encontrará Añadir sección.

El selector muestra los tipos agrupados: Populares, Apertura y encabezado, Texto e historia, Servicios y productos, Precios y ofertas, Confianza y equipo, Foto y vídeo, Información práctica, Contacto y llamada a la acción y Propio y widgets. Hay un campo de búsqueda ("Buscar, por ejemplo reseñas, precios o equipo"). Cada tipo se muestra como ejemplo con su propia identidad visual. Haga clic en un tipo para ver sus formas y elija una con Añadir. Si no ha llegado desde una sección concreta, el editor pregunta "¿Dónde debe ir ...?": haga clic en una línea verde de su página, o elija Arriba del todo o Abajo del todo. También puede arrastrar un elemento directamente desde el panel a su página.

Esto no cuesta nada. La nueva sección llega con textos de ejemplo que después cambia usted mismo (lección 3.2) o deja que rellene la IA (lección 3.1). Importante: mientras su sitio tenga ese texto de ejemplo, el editor no lo publica. Verá entonces "Su web todavía tiene texto de ejemplo. Rellénelo primero o elimine la sección."

2. Pedirlo en el chat: tres diseños

Si escribe en el chat "Quiero una sección con nuestra forma de trabajar en cuatro pasos", la IA le muestra primero tres diseños adecuados de la biblioteca de secciones, con su identidad visual. Usted elige con Este diseño o hace clic en Dejar que elija la IA. Después la IA rellena la sección con contenido, como propuesta. Como se añade una sección, esto cuesta 2 ediciones.

Si indica que algo debe ir en una sección existente ("pon el horario en el bloque de contacto"), o menciona un servicio como Spotify o Calendly con un enlace, el editor se salta los tres diseños: entonces ya está claro lo que quiere.

3. Dejar que se cree una sección a medida

¿No encuentra lo que busca? Arriba del selector está Cree su propia sección con IA. Describa lo que los visitantes deben poder hacer, por ejemplo una calculadora de precios o un breve test, y haga clic en Crear con IA. Esto cuesta 2 ediciones, porque se añade un elemento nuevo.

Mover, copiar y eliminar

Pase el ratón por encima de una sección. Aparece una barra de herramientas con Modificar con IA, Subir, Bajar, Duplicar, Sección debajo y Eliminar, y un tirador para arrastrar la sección ("Arrastre esta sección a otro lugar"). Con Eliminar, el editor pregunta primero "¿Seguro?". También puede arrastrar, duplicar y eliminar elementos sueltos dentro de una fila, como una tarjeta o una reseña.

Todos estos botones son gratuitos. Cada acción crea una nueva versión ("Sección movida (versión ...)"), así que una sección eliminada por error se recupera desde Versiones (lección 3.5). En cambio, eliminar mediante una instrucción en el chat sí cuesta una edición: por eso, use el botón.

Arrastrar medidas

Pase el ratón en la vista previa por encima de una sección, una foto o un texto y aparecerán tiradores. Arrastrar es gratis y no usa la IA:

• Borde inferior de una sección: más o menos espacio encima y debajo de la sección.
• Portada: hacerla más alta o más baja.
• Foto: más ancha o más estrecha, más alta o más plana (la forma), esquinas más redondeadas o más rectas, y el punto de enfoque (lección 3.3).
• Bloque de texto: más ancho o más estrecho (borde derecho).
• Título: más grande o más pequeño, y el espacio debajo.
• Fila de tarjetas o columnas: la anchura de toda la fila.

Haga doble clic en un tirador y vuelve la medida predeterminada; en la portada, el editor vuelve a elegir la altura por sí mismo.

Por qué arrastrar es mejor que pedir "hazlo más grande": ve enseguida lo que pasa, no cuesta nada y la IA no cambia ningún texto por el camino.

Editar sección: los ajustes de una sección

Haga clic en una sección y elija Editar sección. Se abre una ventana con:

Debajo están los mismos botones que en la barra de herramientas (Subir, Bajar, Duplicar, Sección debajo, Eliminar) y, bajo "O pida otra cosa a la IA:", un campo de texto para una instrucción a la IA solo sobre esta sección.

Algunos consejos. Alterne los fondos (panel claro, ninguno, tono), para que los visitantes vean dónde termina un tema. En una fila de tarjetas, use como máximo tres o cuatro columnas; en un teléfono se colocan de todos modos una debajo de otra. Use Ocultar en móvil con moderación: no oculte nunca sus datos de contacto ni nada que necesite un visitante desde el móvil. Si quiere comprobar cómo se ve, elija Móvil en la barra superior.

HTML propio

En el grupo Propio y widgets está también HTML propio: una sección en la que pega usted mismo HTML y, si lo desea, CSS. Una vez colocada, la modifica con Editar HTML en la sección. Los colores y las fuentes siguen su identidad visual mediante variables como var(--acc), var(--tekst) y var(--kop-font). El CSS solo se aplica a esta sección.

Las limitaciones son intencionadas: aquí no funcionan los scripts, los iframes ni los formularios. Para un reproductor, una agenda, un mapa o un formulario de otro servicio, use el Widget (lección 4.3). El HTML propio es para quien conoce HTML; para todos los demás, las secciones normales y la IA son el camino más rápido.

Errores frecuentes

• Dejar el texto de ejemplo en una sección del selector: entonces no puede publicar.
• Demasiadas secciones. Una página larga con diez secciones no se lee. Elimine lo que no aporta nada. Una página admite como máximo 40 secciones, pero nunca necesitará tantas.
• Ajustar el espaciado por el chat. Cuesta ediciones y es menos preciso que arrastrar.
• Mirar solo en el ordenador. Las columnas, el espaciado y la ocultación funcionan de otra manera en un teléfono.
• Eliminar desde el chat cuando el botón Eliminar es gratis.

En el editor: cómo hacerlo

1. Haga clic en la vista previa en Sección debajo, o abra Secciones.
2. Elija un grupo, un tipo y una forma, y haga clic en Añadir.
3. Sustituya los textos de ejemplo usted mismo o con la IA.
4. Mueva con Subir, Bajar o el tirador; duplique o elimine desde la barra de herramientas.
5. Arrastre el borde inferior para el espaciado; haga doble clic para volver al valor predeterminado.
6. Abra Editar sección para el fondo, las columnas, las esquinas, la altura de la portada y Ocultar en móvil.
7. Compruebe en Móvil.

Resumen

• Una página es una pila de secciones; 35 tipos, cada uno en una o más formas.
• Añadir desde el selector es gratis y trae texto de ejemplo que debe sustituir antes de publicar; desde el chat recibe tres diseños y cuesta 2 ediciones.
• Mover, duplicar, eliminar y arrastrar medidas es gratis; un doble clic en un tirador restablece el valor predeterminado.
• Editar sección controla el fondo, el espaciado, el espacio entre elementos, las columnas, las esquinas, la altura de la portada y Ocultar en móvil.
• HTML propio es posible, pero sin scripts, iframes ni formularios; para eso está el widget.

Cuestionario

Ejercicio

Ejercicio D3.4: Una sección más, una sección menos. Mejore la estructura de su página de inicio con los botones y los tiradores, sin instrucciones innecesarias a la IA.

Lista de comprobación:

• [ ] ha anotado las secciones de su página de inicio de arriba abajo;
• [ ] ha añadido una sección desde el selector y ha sustituido todo el texto de ejemplo;
• [ ] ha eliminado o fusionado con Eliminar una sección que no aportaba nada;
• [ ] ha movido una sección con Subir, Bajar o el tirador;
• [ ] ha arrastrado el espaciado de al menos una sección y lo ha restablecido una vez con doble clic;
• [ ] ha ajustado en Editar sección el fondo o las columnas;
• [ ] ha revisado la página en Móvil.

Preguntas:

1. ¿Cómo era el orden de sus secciones antes y después, y por qué eligió este orden?
2. ¿Qué sección ha eliminado y por qué un visitante no la echa ahora de menos?
3. ¿Cuántas ediciones le ha costado este ejercicio y qué paso sí habría costado ediciones desde el chat?

Después de "hecho" verá una respuesta de ejemplo: de Portada, Cifras, Tarjetas, Reseñas, Contacto a Portada, Tarjetas, Foto y texto (forma de trabajar), Reseñas, Preguntas, Contacto, para que los servicios aparezcan justo debajo de la apertura; la sección Cifras se ha eliminado porque las cifras eran inventadas; el ejercicio costó 0 ediciones, mientras que eliminar o añadir una sección desde el chat habría costado 1 o 2.

Para seguir leyendo

• Curso gratuito Que te encuentren en internet 3.2: Los encabezados y la estructura de una página
• Curso gratuito Que te encuentren en internet 4.2: El móvil primero y el viewport
• Sitebuilder y AI Builder: ¿cuál elegir y cómo abrirlo?