Añadir tablas, iframes, Multimedia, Foto 360 y código

La pestaña Elementos del panel derecho trae bloques que no se dibujan con la barra de abajo: tablas, iframes, Multimedia, fotos 360 y código. Todos se añaden arrastrándolos a la página. Los átomos, que están en la misma pestaña, tienen su propio artículo: Configurar los átomos.

Añadir bloques desde la pestaña Elementos

La pestaña Elementos del panel derecho tiene tres grupos:

• Contenido: Tabla, Multimedia, iframe, Foto 360 y Código.
• Átomos: los bloques preparados para propuestas y cotizaciones. Se explican en Configurar los átomos.
• Plugins: los bloques propios de tu cuenta.

Para añadir cualquiera de ellos:

1. Haz clic en la zona gris junto al lienzo para que no haya nada seleccionado y abre la pestaña Elementos.
2. Mantén pulsado el bloque y arrástralo hasta la página.
3. Suéltalo. Aparece en Capas y el Inspector pasa a mostrar sus propiedades.

Un clic solo en un bloque no lo añade: hay que arrastrarlo. Estos son los tamaños con que entran los de Contenido:

Bloque	Tamaño al entrar
iframe	400 × 300
Multimedia	400 × 225
Foto 360	640 × 360
Código	200 × 120

La Tabla abre antes un cuadro para elegir filas y columnas; se explica en la sección siguiente.

Crear una tabla

1. Haz clic en la zona gris junto al lienzo y abre la pestaña Elementos.
2. Arrastra Tabla hasta la página. Se abre el cuadro Configurar tabla.
3. Elige el tamaño de una de estas dos formas:
   • Cuadrícula: pasa el ratón por la rejilla hasta marcar las columnas y filas que quieres. Debajo lo confirma, por ejemplo «3 × 3».
   • Manual: escribe el número en Columnas y en Filas.
4. Si la primera fila es de títulos, marca Incluir fila de encabezado. Cuenta dentro de las filas: con 3 filas y encabezado salen una fila de títulos (Header 1, Header 2…) y dos filas vacías.
5. Pulsa Crear tabla. Con Cancelar se cierra el cuadro sin crear nada.

Con la tabla seleccionada, el panel derecho muestra además Bordes de celdas: el ancho del borde (1 px por defecto) y su color (E5E7EB).

Escribir en una tabla y cambiar filas y columnas

1. Haz doble clic en la tabla.
2. Haz clic dentro de la celda que quieres editar y escribe.
3. En el panel derecho aparecen las opciones de formato de texto y, debajo, Opciones de tabla:
   • Color de celda.
   • Añadir columna antes y Añadir columna después.
   • Añadir fila antes y Añadir fila después.
   • Eliminar columna, Eliminar fila y Eliminar tabla.
4. Pulsa Esc para salir de la tabla.

Mientras editas la tabla, el panel derecho tiene sus propios botones de deshacer y rehacer, arriba del todo.

Mostrar otra web con un iframe

Un iframe muestra otra página web dentro de la tuya. Mientras no tenga dirección, en el lienzo dice «Set iframe URL».

1. Arrastra iframe desde el grupo Contenido de la pestaña Elementos hasta la página.
2. En el panel derecho, baja hasta Propiedades del Componente y escribe la dirección en URL del iframe. Pulsa Enter: la web se carga dentro del recuadro.
3. Debajo de la dirección hay cinco casillas. Alto automático y Permitir pantalla completa vienen marcadas. Permitir pantalla completa deja que la web incrustada se ponga a pantalla completa por sí misma, por ejemplo con el botón de pantalla completa de un video. Lo comprobamos con un video de YouTube: con la casilla marcada, el documento le da ese permiso al recuadro; desmarcada, se lo quita. Las otras tres casillas se explican a continuación.

Que el iframe ocupe toda la página

Marca Ajustar a página. El iframe pasa a medir lo mismo que la página y se coloca en la esquina de arriba a la izquierda: en una página horizontal, 792 × 612. Si desmarcas la casilla, vuelve al tamaño y al sitio que tenía.

Mostrar el calendario de reservas del primer producto

Con Calendario del ítem 1 de la cotización, el iframe no muestra una web fija, sino el calendario de reservas del primer producto de la cotización.

1. Selecciona el iframe.
2. En Propiedades del Componente, marca Calendario del ítem 1 de la cotización. El campo URL del iframe desaparece, porque ya no hace falta.
3. En el lienzo, el recuadro pasa a decir «Calendario de reservas del primer producto» y «Se resuelve al ver el documento». Dentro del editor no verás el calendario: ese aviso ocupa su lugar.

Para volver a una web normal, desmarca la casilla. El campo URL del iframe reaparece con la dirección que tenía.

Tapar el iframe con una máscara

Activar máscara pone un velo gris encima de la web y, en el centro, un botón redondo Abrir. Quien lee el documento ve la web de fondo y la abre a pantalla completa con ese botón.

1. Selecciona el iframe.
2. En Propiedades del Componente, marca Activar máscara. El recuadro se oscurece y aparece el botón Abrir.
3. Guarda la plantilla y ábrela en el visor para probarla: en la ficha, pulsa el botón de abrir en una pestaña nueva, arriba a la derecha del documento.
4. Pulsa Abrir encima del iframe. La web ocupa toda la pantalla, con una X arriba a la derecha para volver al documento.

Dentro del editor, la Vista previa muestra la máscara, pero el botón Abrir no hace nada ahí. Pruébalo en el visor, como en el paso 3.

Poner una foto o un video con Multimedia

Multimedia es un recuadro para una foto o un video, con un botón de play encima.

1. Arrastra Multimedia desde el grupo Contenido hasta la página.
2. En el panel derecho, dentro de Relleno, haz clic en la miniatura que dice Multimedia. Se abre el cuadro Multimedia.
3. Carga el archivo con Cargar imagen o video (desde tu equipo), con Buscar en Cloud Drive o pegando la dirección en URL.
4. Arriba a la izquierda, elige cómo encaja en el recuadro (Rellenar viene elegido). Los dos botones de la derecha lo espejan o lo giran.
5. Marca lo que necesites:
   • Mostrar barra de controles, con el volumen en el icono del altavoz de la derecha.
   • Foto/video del usuario: en lugar del archivo que cargaste, el recuadro muestra la foto o el video de perfil del usuario. Se explica más abajo.
   • Botón play encima, que viene marcada.
   • Loop, para que el video se repita.
   • Empezar sola al abrir.
   • Oscurecer fondo, que viene marcada al 35 %. La barra de debajo cambia cuánto se oscurece.
6. Cierra el cuadro con la X.

Mostrar la foto o el video del usuario

Con Foto/video del usuario, el bloque Multimedia deja de usar un archivo fijo y muestra la foto o el video de perfil del usuario.

1. Selecciona el bloque Multimedia y abre el cuadro Multimedia desde Relleno, como en los pasos anteriores.
2. Marca Foto/video del usuario.
3. Cierra el cuadro con la X.

En el lienzo, el recuadro pasa a decir «Foto / video del usuario» y «Se resuelve al ver el documento». Dentro del editor no verás la foto ni el video: ese aviso ocupa su lugar.

Poner una foto 360

Foto 360 muestra una foto panorámica que el lector puede girar.

1. Arrastra Foto 360 desde el grupo Contenido hasta la página. Entra con 640 × 360, así que en una página horizontal de 792 de ancho puede quedar medio fuera: ajusta la X en Posición si hace falta.
2. En Propiedades del Componente, carga la imagen en Foto 360: pega su dirección o usa los botones de la derecha (subir desde tu equipo o buscar en Cloud Drive). Tiene que ser una «Foto panorámica equirectangular (el doble de ancha que alta)».
3. Con Vista inicial eliges hacia dónde mira al abrirse.
4. Marca las opciones que quieras: Girar solo, Abrir en una ventana y Zoom con la rueda. Las dos primeras vienen marcadas. Con Abrir en una ventana, la foto muestra encima el botón Abrir 360°.

Añadir un bloque de código

Con el bloque Código puedes escribir tu propio HTML, CSS y JavaScript.

1. Arrastra Código desde el grupo Contenido hasta la página.
2. En el panel derecho, junto al título Código, pulsa el +. Se abre una ventana con el nombre del bloque, por ejemplo Code 629.
3. Elige la pestaña HTML, CSS o JS y escribe. El texto gris del principio («Write your HTML here» y un «Hello World») es un ejemplo: bórralo y escribe el tuyo.
4. Mira el resultado a la derecha, en Vista previa. Con Actualización automática marcada, se actualiza mientras escribes; si la desmarcas, pulsa Ejecutar. Abajo a la izquierda, «Sin guardar» avisa de que hay cambios pendientes.
5. Pulsa Guardar (o Ctrl+S) y luego Cerrar. Arriba a la derecha tienes también la casilla Guardado automático, que viene desmarcada.

El bloque muestra en la página lo que escribiste. En el panel derecho, la sección Código pasa a decir HTML 1 (las líneas que tiene) con un lápiz (Editar código) para volver a abrirlo. Debajo está el campo ID. Más arriba, Ajustar al contenido trae cuatro opciones: Hug (ancho y alto siguen al contenido), Auto width, Auto height y Fixed.

El código se guarda con la plantilla: si guardas, cierras el editor y lo vuelves a abrir, el bloque sigue mostrándolo.