Insertar elementos y bloques en el lienzo

Además de añadir secciones completas desde Templates, puedes insertar piezas sueltas dentro de cualquier sección para agregar un botón extra, una foto, una cuadrícula, un vídeo o unas preguntas frecuentes.

En las Opciones avanzadas, encontrarás todas las piezas en el icono Insertar (+) del raíl izquierdo. En el Modo esencial, puedes insertarlas pulsando el botón + que aparece al seleccionar cualquier elemento en el lienzo.

Carpeta Básicos: las piezas esenciales para armar cualquier sección

La primera carpeta del panel Insertar se llama Básicos y viene abierta por defecto. Reúne en un solo lugar los 13 elementos más utilizados para que no tengas que buscarlos carpeta por carpeta:

Section, Heading 1, Heading 2, Párrafo, Imagen, Botón principal, Icono, Grid, Separador, Galería, Formulario, Preguntas frecuentes y Reseñas.

Debajo de Básicos, el resto del catálogo se organiza por familias.

Estructura (Layout): Section, Bloque (Div), Cuadrícula (Grid) y Separador (Divider)

Son las cajas que ordenan y agrupan a los demás elementos:

• Section: la franja horizontal principal de una página. Toda página se compone de una lista de secciones apiladas de arriba abajo.
• Bloque (Div): un contenedor flexible para agrupar varios elementos (por ejemplo, un icono, un título y un párrafo dentro de una tarjeta) y alinearlos en fila o en columna.
• Cuadrícula (Grid): reparte los elementos hijos en columnas y filas proporcionales que se adaptan automáticamente en tablet y móvil.
• Separador (Divider): una línea divisoria horizontal o vertical para separar bloques de contenido.

Texto (Tipografía): Títulos (H1 a H6), Párrafo y Texto pequeño / Etiqueta (Small)

Cada pieza de texto nace conectada a su Estilo de texto global correspondiente:

• Títulos (Heading 1 a Heading 6): jerarquía de encabezados para portadas (H1), títulos de sección (H2), subtítulos (H3) y encabezados de tarjeta (H4–H6).
• Párrafo: bloque de texto corrido para descripciones y lectura general.
• Texto pequeño / Etiqueta (Small): pensado para antetítulos (Eyebrows), notas al pie, etiquetas o aclaraciones breves.

Media: Imagen, Vídeo propio, Vídeo de YouTube/Vimeo (Embed), Icono, Logo, Galería, Galería infinita (Marquee) y Antes / Después

Piezas visuales y multimedia:

• Imagen: fotografía o ilustración con control de encuadre, recorte, bordes redondeados y texto alternativo (Alt).
• Vídeo: reproductor para archivos de vídeo propios (MP4 o WebM), ya sea como vídeo de ambiente (en bucle y sin sonido) o con controles de reproducción.
• YouTube / Vimeo: incrusta un vídeo externo pegando su enlace público.
• Icono: selector con miles de iconos vectoriales organizados por familia (Interfaz, Flechas, Contacto, Comercio, Multimedia, Tecnología, Símbolos y Redes).
• Logo: inserta el logo global de tu marca (con cambio automático entre versión clara y oscura según el fondo).
• Galería: mosaico o cuadrícula de varias fotografías.
• Galería infinita (Marquee): cinta en movimiento continuo ideal para carruseles de fotos o logotipos de clientes.
• Antes / Después: comparador interactivo con deslizador central entre dos fotografías.

Interacción: Botón principal, Botón secundario, Acordeón desplegable (Disclosure), Ventana emergente (Modal) y Popover

Elementos que responden al clic del visitante:

• Botón principal y Botón secundario: botones de llamada a la acción conectados a los estilos globales de tu marca.
• Acordeón desplegable (Disclosure): un bloque con un disparador que muestra u oculta contenido adicional al pulsarlo.
• Ventana emergente (Modal): abre una ventana superpuesta en el centro de la pantalla al hacer clic en su botón disparador. Puedes diseñar libremente todo lo que va dentro de la ventana.
• Popover: despliega un globo o tarjeta flotante anclada al botón que lo activa.

Navegación: Barra de navegación (Navbar), Pie de página (Footer) y Enlace (Link)

• Navbar y Footer: la cabecera y el pie globales de tu sitio, que se sincronizan en todas las páginas.
• Enlace (Link): un enlace de texto independiente para llevar a otra página, sección o sitio externo.

Componentes: Preguntas frecuentes (FAQ), Reseñas y Testimonios, Carrusel (Slider), Slider de tarjetas (Card rail), Tabs carrusel, Métrica (Stat), Estrellas (Rating), Grupo de avatares, Cuenta regresiva (Countdown) y Código personalizado (Embed)

Piezas compuestas con comportamiento propio listo para usar:

• Preguntas frecuentes (FAQ): lista de preguntas y respuestas desplegables con ajustes de estilo e icono.
• Reseñas (Reviews): tarjetas de testimonios con foto del autor, nombre, cargo, estrellas y botón Ver más para textos largos.
• Carrusel (Slider) y Slider de tarjetas (Card rail): diapositivas a ancho completo o carruseles horizontales donde se ven varias tarjetas a la vez con flechas y puntos de navegación.
• Tabs carrusel: pestañas interactivas que cambian el bloque de contenido mostrado al hacer clic.
• Métrica (Stat): bloque formateado para destacar una cifra clave y su descripción.
• Estrellas (Rating): indicador de calificación configurable en estrellas, corazones o círculos.
• Avatares: fila de fotos circulares superpuestas (ideal para acompañar reseñas o prueba social).
• Cuenta regresiva (Countdown): contador en vivo por días, horas, minutos y segundos hasta una fecha de lanzamiento o promoción.
• Código personalizado (Embed): bloque para insertar HTML, CSS o iframe de herramientas externas (calendarios de terceros, mapas interactivos, widgets).

Formularios, CMS y Catálogo: En el panel Insertar también verás Formularios (para añadir un formulario de contacto o registro) y CMS (para insertar listas dinámicas conectadas a tus colecciones). Las listas y tarjetas de tus ofertas de venta tienen su propio icono Catálogo en el raíl izquierdo.

Marcar elementos como favoritos y usar el botón + entre elementos del lienzo

• Favoritos: pasa el cursor sobre cualquier pieza del panel Insertar y pulsa el icono de estrella (Agregar a favoritos). Luego podrás activar el filtro Ver sólo los favoritos arriba en el buscador para tener tus piezas habituales siempre a mano.
• Botón + en el lienzo: cuando seleccionas un elemento en la página, aparece un botón + en su barra contextual y en el borde del bloque. Al pulsarlo se abre el selector rápido con vista previa en vivo: eliges una pieza, ves al instante cómo queda colocada después (o dentro) del elemento actual y confirmas con un clic.