Secciones y elementos

Cada página de tu web es una pila de secciones: un hero arriba, luego servicios, precios, un formulario de contacto, etc. Una sección especial, el Contenedor, agrupa elementos más pequeños (títulos, textos, botones, imágenes…) que colocas libremente en columnas.

Tipos de sección

La Cabecera (menú) y el Pie de página están siempre presentes en todas las páginas y no se pueden mover. Haz clic en ellos en la lista de Estructura para editar el logo, los enlaces del menú, el botón del menú, los textos del pie, los enlaces y las redes sociales.

Ajustes comunes a todas las secciones

Selecciona una sección y abre Apariencia:

• Fondo de la sección: ninguno, tarjeta (un poco más claro), resplandor o color de acento.
• Espaciado arriba/abajo: compacto, normal o amplio.
• Alineación del título: por defecto, a la izquierda o centrado.
• Imagen de fondo de la sección y Oscurecimiento de la imagen de fondo.
• Tamaño y espaciado: ancho, altura, margen y relleno de la sección (ver Tamaño y espaciado más abajo).
• ID de la sección: el nombre que se usa en los enlaces, por ejemplo #contact. Un enlace del menú a #contact lleva a esta sección. Si cambias el ID, los enlaces que apuntaban a él se actualizan solos.

Muchas secciones tienen además sus propias opciones de estilo (columnas, estilo de las tarjetas, forma de la imagen, etc.) en la misma pestaña.

Añadir una sección

1. En la pestaña Estructura, haz clic en la sección después de la cual quieres que aparezca la nueva (o en ninguna, para añadirla al final).
2. Haz clic en Añadir sección bajo la lista, o abre la pestaña Añadir a la derecha.
3. En Secciones prediseñadas, haz clic en el tipo que quieras.

La nueva sección llega con contenido de ejemplo para que nunca se vea vacía, y queda seleccionada para que puedas empezar a editarla enseguida.

Gestionar secciones

En la lista de Estructura, cada fila de sección tiene:

• el asa de arrastre a la izquierda: arrástrala hacia arriba o hacia abajo para cambiar el orden;
• el icono del ojo: Ocultar del sitio / Mostrar en el sitio. Las secciones ocultas siguen en el editor (atenuadas), pero los visitantes no las ven;
• el menú ⋯: Duplicar, Subir, Bajar y Eliminar sección.

Al eliminar se te pide confirmación, y siempre puedes recuperar una sección con Ctrl+Z.

Elementos: crea tu propio diseño

La sección Contenedor (contenido libre) te permite crear cualquier diseño. Elige una Disposición de columnas (1, 2, 3 o 4 columnas, o 2/3 + 1/3 y 1/3 + 2/3) y rellena las columnas con elementos.

Tipos de elemento

Añadir elementos

Abre la pestaña Añadir. En Elementos puedes:

• Arrastrar un elemento a la vista previa. Una línea indica dónde caerá: dentro de una columna, dentro de una caja o entre secciones (si lo sueltas entre secciones, se crea una nueva sección Contenedor para él).
• Hacer clic en un elemento para añadirlo justo después del elemento seleccionado (o en la primera columna del Contenedor seleccionado). Si no hay ningún Contenedor seleccionado, se añade una nueva sección Contenedor.

Editar, mover, duplicar y ocultar elementos

Haz clic en un elemento de la vista previa para seleccionarlo. La pestaña Editar muestra sus campos y una barra de herramientas:

• Subir / Bajar (las flechas);
• Mover a la columna anterior / Mover a la columna siguiente (aparecen cuando el Contenedor tiene más de una columna): el elemento pasa al final de esa columna y sigue seleccionado;
• Mostrar / Ocultar (el ojo), para ocultarlo a los visitantes sin eliminarlo;
• Duplicar;
• Eliminar;
• ✦ AI (elementos con texto): abre el campo de IA sobre el texto del elemento. Ver El editor.
• la flecha de volver te lleva de vuelta a la sección completa.

También puedes cambiar el Tipo de elemento (por ejemplo, convertir un Texto en una Tarjeta) y la Columna en la que está. El campo Alineación alinea el elemento a la izquierda, al centro o a la derecha.

Tamaño y espaciado

Cada elemento, cada sección y cada columna de un Contenedor tiene un panel Tamaño y espaciado: está en los ajustes del elemento y en la pestaña Apariencia de una sección. Los campos vacíos mantienen el aspecto del tema, así que nada cambia hasta que escribes un valor.

• Ancho, Ancho máx. y Altura: escribe un número y elige la unidad al lado: px, rem, em, %, vw, vh o auto. En textos, botones y contenedores la altura es un mínimo (el contenido más largo sigue cabiendo); las imágenes y los vídeos toman exactamente esa altura y la imagen la rellena.
• El Margen (el anillo exterior) es el espacio alrededor del elemento; el Relleno (el anillo interior) es el espacio dentro, entre su borde y su contenido. Cada anillo tiene cuatro campos: arriba, abajo y los dos lados. Escribe 24 (píxeles), 2rem, 5% o auto (solo márgenes: auto a ambos lados centra un elemento que tiene ancho).
• El botón de cadena de un anillo pone el mismo valor en los cuatro lados a la vez.
• En cualquier campo, ↑ y ↓ cambian el valor de 1 en 1 (Mayús + flecha: de 10 en 10; en rem y em de 0,1 y de 1).
• Mientras el puntero está sobre el panel, la vista previa muestra el margen (naranja) y el relleno (verde) de la selección.
• Restablecer borra los valores del dispositivo que estás editando.

Dispositivos. Los tres iconos de arriba del panel (Escritorio, Tableta, Teléfono) funcionan como los botones de la vista previa: elige uno y la vista previa cambia a ese tamaño. Los valores que escribas después solo se aplican a ese dispositivo. La tableta usa los valores de escritorio salvo que le pongas los suyos, y el teléfono los de la tableta (o los de escritorio); los valores heredados se ven en gris en los campos vacíos, y un punto en un icono indica qué dispositivos tienen valores propios. Tableta son pantallas de hasta 1023 px de ancho, teléfono hasta 640 px.

Columnas. En la pestaña Apariencia de un Contenedor, Tamaño y espaciado de las columnas tiene un botón por columna (Col 1, Col 2…): elige una y ajusta su tamaño y espaciado.

Conviene saber:

• Un elemento nunca es más ancho que el espacio donde está, así que un ancho grande en píxeles no provoca desplazamiento lateral en el teléfono.
• Los lados son «inicio» y «final», no izquierda y derecha: en árabe y otros idiomas que se escriben de derecha a izquierda el espaciado se invierte solo.
• El ancho, la altura y el relleno de un botón dimensionan el propio botón; su margen lo desplaza.

El elemento Caja / cuadrícula

Usa Caja / cuadrícula para agrupar elementos, por ejemplo tres tarjetas una al lado de otra dentro de una columna.

1. Añade un elemento Caja / cuadrícula.
2. En sus ajustes, elige la Disposición: Uno debajo de otro, En fila o una cuadrícula de 2, 3 o 4 columnas.
3. Elige el Aspecto de la caja: sin marco, tarjeta, cristal o color de acento. Ajusta el Espaciado interior y el Espacio entre elementos.
4. Añade elementos a la caja: arrástralos sobre la caja en la vista previa o añádelos en Elementos en la caja.

Una caja no puede contener otra caja (solo hay un nivel).

Imágenes y fotos gratis

Cada campo de imagen (imagen principal, fondo de sección, galería, imagen de tarjeta…) abre el selector de imágenes al hacer clic en Elegir. Tiene dos pestañas:

• Mis imágenes: las imágenes que has subido (arrástralas a la ventana o haz clic en Subir; JPG, PNG, WebP, AVIF o GIF de hasta 10 MB) y las fotos gratis que ya has usado.
• Fotos gratis: millones de fotos gratuitas con licencia de Unsplash o Pexels. Puedes usarlas en tu web sin coste.

Para usar una foto gratis:

1. Haz clic en Elegir en un campo de imagen y abre la pestaña Fotos gratis.
2. Describe la foto con unas pocas palabras en inglés, por ejemplo bakery counter, yoga studio o mountain lake. Elige una forma (horizontal, vertical o cuadrada) si el lugar lo necesita.
3. Haz clic en una foto. Se añade a tus imágenes y se coloca en el campo al instante.

La misma búsqueda está en el panel, en Imágenes → Fotos gratis.

Conviene saber:

• El nombre del fotógrafo aparece debajo de cada resultado, y el pie de página de tu web menciona a los fotógrafos cuyas fotos muestra (por ejemplo Fotos: Jane Doe en Unsplash). Es lo que piden los servicios de fotos, así que mantenlo.
• Las fotos de Unsplash se quedan en los servidores rápidos de Unsplash y se muestran desde allí; las fotos de Pexels se copian a tus imágenes.
• Las webs creadas a partir de una plantilla o con el creador de webs con IA pueden empezar ya con fotos gratis elegidas para tu negocio. Sustitúyelas por las tuyas cuando quieras.
• Tus propias fotos (tu equipo, tus productos, tu local) suelen convertir mejor que las fotos de stock. Usa las fotos gratis para ambientes, fondos y lugares.

La pestaña Fotos gratis solo aparece cuando la plataforma tiene activado el servicio de fotos.

Consejos

• Dale a cada sección un único objetivo claro: un titular, un mensaje, un botón.
• Usa Duplicar para crear secciones coherentes rápidamente y luego cambia los textos.
• Oculta una sección en lugar de eliminarla si puede que la vuelvas a necesitar (por ejemplo, una oferta de temporada).