Escribir en la página y añadir bloques

Escribir directamente

Haga clic en un texto y escriba: eso es todo. Al seleccionar un fragmento, aparece una pequeña barra para ponerlo en negrita, en cursiva, tacharlo, añadir un enlace, y un botón ✨ para retocarlo con la IA. En el panel derecho, la pestaña Bloque ofrece también los títulos, las listas, la cita y la alineación.

En esta barra, la lista Estilo de texto transforma el párrafo donde está el cursor: Texto, Título 1 a 4, Antetítulo (una línea corta encima de un título) o Entradilla (un párrafo de introducción, más grande). Cada opción se muestra tal como se verá.

El selector de enlaces ofrece una página, una sección, una dirección de correo u otro sitio, y también una entrada del blog, un producto o una colección de la tienda (pestañas Artículo, Producto y Colección). El enlace sigue a la entrada en cada idioma del sitio, y se retira limpiamente si la entrada deja de estar publicada.

En la pestaña Externo, se acepta una dirección de su propio sitio que empiece por «/» (por ejemplo /boutique/ma-collection/): se pone en el idioma correcto al publicar.

Destacar palabras en un título

En un título grande (Título 1, Título 2 o el título de un bloque Hero), seleccione una o dos palabras y haga clic en Cursiva: adoptan el acento del estilo de su sitio. Según el estilo, es otro color, una fuente de acento, a veces un degradado, y las palabras no siempre quedan inclinadas.

Es la forma correcta de colorear una palabra: el acento sigue al estilo si lo cambia, se adapta solo al modo claro y al modo oscuro, y sigue siendo legible. Un color elegido a mano no haría nada de eso.

Añadir un bloque con la tecla «/»

1. Coloque el cursor en una línea vacía.
2. Escriba /: se abre el menú de comandos, clasificado por categorías (Sección, Texto, Multimedia, Contenido, Acción).
3. Escriba unas letras para filtrar («gal» para Galería) y confirme.

También puede hacer clic en Insertar un objeto… en la pestaña Bloque del panel derecho.

Los bloques principales

• Texto y diseño: títulos, listas, cita, Recuadro, Columnas (de 2 a 4 zonas lado a lado), Separador, Espaciador, Tabla, Índice.
• Medios: Imagen, Galería, Medio (vídeo, audio o contenido de YouTube, Vimeo, SoundCloud, Spotify…), Antes / después, Insertar (una cámara web, una agenda, un widget de opiniones… por su dirección o su código HTML).
• Presentar su actividad: Portada (banner con título y botones), Características, Cuadrícula de tarjetas, Equipo, Testimonios, Cifras clave, Cronología, Ficha técnica, Relato con desplazamiento, Cinta en movimiento, Nube de logotipos.
• Precio: Planes de precios (tarjetas con sus ofertas, con un Precio tachado y una Nota bajo el precio si hace falta) y Lista de precios (una lista de servicios y precios por categoría, como la carta de un restaurante).
• Interactuar: Botón de acción, Formulario, Preguntas frecuentes, Mapa, Redes sociales, Boletín, Reserva, Comentarios / Opiniones.
• Destacar: Productos de la tienda y Entradas del blog.

El bloque Imagen ofrece cinco tamaños: XS (150 px como máximo, para un logotipo o una insignia), S, M, L y 100 %.

Las entradas del blog y los artículos de la documentación ofrecen los mismos bloques que las páginas, con los mismos gestos. El bloque Comentarios / Opiniones, en cambio, solo se ofrece en las entradas del blog.

Los enlaces de la Portada y del Equipo

En un bloque Portada, haga clic en el bloque: el panel derecho ajusta el texto y el destino de cada botón, con el selector de enlaces habitual (una página, una sección, una dirección de correo, otro sitio…).

En un bloque Equipo, cada miembro tiene su campo Página del miembro: su foto y su nombre llevan entonces a su propia página, a una sección o a otro sitio.

El ajuste Tamaño de las fotos del bloque Equipo va de S a XL. Un miembro sin foto se representa con sus iniciales, que siguen su nombre. Elija Ninguna para un comité o una lista de contactos presentados solo con su nombre y su función, sin foto ni iniciales.

El bloque Mapa

El bloque Mapa coloca un mapa en la dirección que elija. Su Proveedor es OpenStreetMap o Google Maps. Con Google Maps, Tipo de mapa elige entre Mapa y Satélite (la vista aérea, con los nombres de las calles): son las dos vistas que Google ofrece sin clave.

La cuadrícula de tarjetas

Haga clic en un bloque Cuadrícula de tarjetas: el panel derecho muestra sus tarjetas. Despliegue una tarjeta para modificar su título, su texto, su meta, su precio y el texto de su botón; así, una tarjeta que añada puede recibir un botón. El campo Enlace de la tarjeta elige adónde lleva. También puede hacer clic en el texto de una tarjeta, directamente en la página.

El enlace de una tarjeta se elige como los demás enlaces de TOWeb: una página del sitio, una entrada, un producto, una colección de la tienda, un archivo o una dirección externa. El ajuste Alineación del texto centra el texto de las tarjetas.

Cuando hay menos tarjetas que columnas, una indicación bajo Columnas le dice cuántas tarjetas añadir para completar la fila.

El bloque Planes de precios

Haga clic en un bloque Planes de precios: el panel derecho enumera sus planes. El ajuste Botón coloca el botón de cada plan Bajo el precio, a la misma altura en todas las tarjetas, para que siga visible sin desplazarse, o Abajo de la tarjeta.

En las Características de un plan, cada punto puede llevar un enlace: haga clic en el icono Enlace del punto y elija una página del sitio, un ancla o una dirección externa. Con un Texto del enlace («Ver la demo», por ejemplo), se muestra como un pequeño enlace tras el texto del punto; sin texto de enlace, todo el punto se convierte en el enlace.

Modificar, mover, eliminar

Haga clic en un bloque: sus ajustes aparecen en la pestaña Bloque del panel derecho. El tirador a la izquierda del bloque se arrastra para moverlo; un clic en él abre el menú Subir, Bajar, Duplicar, Eliminar.

Los títulos y los párrafos también tienen su asa ⋮⋮, que aparece al pasar el ratón: arrástrela para mover el texto a otro lugar de la página, o haga clic en ella para abrir el mismo menú. Un bloque Columnas tiene la suya cuando pasa el ratón por su texto. El texto de una columna, de una tabla o de un recuadro no tiene: lo que se mueve es el bloque que lo rodea.

Para deshacer un bloque Columnas, haga clic en él y luego en Quitar las columnas en sus ajustes: el contenido de las columnas se conserva, uno debajo del otro, a todo el ancho, y una columna vacía desaparece.

El índice de una página

El bloque Índice enumera los títulos de una página, de un artículo del blog o de un artículo de documentación, con un enlace a cada uno. Escriba / y luego «índice» o «tabla de contenidos», o añádalo desde la pestaña Añadir.

Se crea solo a partir de los títulos que lo siguen: ajuste Títulos incluidos en H2 y H3 o Solo H2. Se actualiza en cada publicación y aparece en el idioma de cada página, con los mismos enlaces en todos los idiomas. Si deja vacío su Título, se muestra «Índice», también traducido. En el móvil permanece plegado hasta que se toca.

En el editor, su tarjeta muestra los títulos actuales. Mientras ningún título lo siga, permanece vacío y no se muestra en el sitio.

El formulario de contacto

Escriba / y elija Formulario. Haga clic en el bloque: sus ajustes aparecen en la pestaña Bloque del panel derecho.

Para dividir el formulario en grupos («Sus datos», «Su proyecto»), añada un campo de tipo Título: un texto fijo que no pide nada al visitante.

• Campos: añádalos uno a uno (texto, correo, teléfono, área de texto, lista desplegable, opción única, casilla, fecha, archivo) e indique si son obligatorios.
• Enlace de la etiqueta: en una casilla, la etiqueta lleva a un documento, por ejemplo sus condiciones generales. Se abre en una pestaña nueva, sin perder el formulario en curso.
• Texto del botón: lo que muestra el botón de envío.
• Después del envío: Mostrar un mensaje (el Mensaje de confirmación aparece en lugar del formulario) o Ir a una página: una vez enviado el mensaje, el visitante llega a la página elegida, en su idioma.
• Asunto del correo: propio de cada formulario, sirve de asunto de los mensajes recibidos cuando el visitante no ha escrito ninguno, para ordenarlos de un vistazo («Presupuesto», «Inscripción»…).

En un campo Lista desplegable o Botones de opción, las flechas Subir la opción y Bajar la opción cambian el orden de las opciones, con el ratón o con el teclado.

Los mensajes llegan a la dirección de recepción de los formularios, definida una sola vez para todo el sitio en Ajustes › i-Services. Para que un formulario escriba a otra dirección, indique su Correo del destinatario en los ajustes del bloque.

En el sitio publicado, bajo un campo de correo (formulario de contacto, boletín, pedido, reserva), una errata en la dirección de un gran servicio de correo web (gmail.vom, hotmial.com…) se señala al visitante con «¿Quisiste decir …?»: un clic la corrige. La dirección escrita se acepta siempre tal cual.

Proteger sus formularios contra el spam

En Ajustes › i-Services, el apartado Protección antispam protege los formularios de contacto, los comentarios del blog y las opiniones de productos. Elija el Proveedor de CAPTCHA (Cloudflare Turnstile o Google reCAPTCHA) y pegue la Clave del sitio y la Clave secreta que le ha dado ese proveedor.

Al publicar, TOWeb comprueba con Google o Cloudflare que la clave secreta es aceptada: una clave rechazada dejaría pasar el spam sin avisar. La pantalla Publicar lo indica, junto con el lugar donde corregir la clave. También señala una protección configurada a medias, cuando falta la clave del sitio o la clave secreta. Sin conexión, la publicación sale sin esperar.

En el sitio publicado, el servidor del sitio comprueba cada envío. Con reCAPTCHA v3, se rechaza un envío que Google considera automático; si Google no responde, el envío se acepta para que no se pierda ningún mensaje de sus clientes. Con Turnstile, se rechaza una validación obtenida en otro sitio.

En una página protegida por contraseña, un formulario no muestra captcha: solo los visitantes que han escrito la contraseña pueden enviarlo.

El sitio también limita los envíos masivos, incluso cuando un robot envía todas sus solicitudes a la vez. El acuse de recibo enviado al visitante solo copia su mensaje si el sitio tiene protección antispam: sin ella, un robot podría usar su sitio para enviar correos a terceros.

La suscripción al boletín

Con el bloque Boletín, el visitante que introduce su dirección recibe un correo de confirmación. Su enlace abre una página de su sitio con el botón Confirmar mi suscripción: solo ese botón suscribe la dirección. Un antivirus de correo que abre los enlaces de los correos recibidos no puede, por tanto, confirmar una suscripción en lugar de la persona.

Insertar un servicio externo

Una cámara web, una agenda en línea, un widget de opiniones, una previsión meteorológica, un formulario de otro servicio: el bloque Insertar los coloca en cualquier lugar de sus páginas.

1. En una línea vacía, escriba / y luego Insertar.
2. En el panel derecho, elija lo que inserta: Una dirección (la página del servicio, mostrada en un marco cuya altura usted ajusta) o Un código HTML (el código que le facilita el servicio, para copiar y pegar tal cual).
3. Describa en pocas palabras Lo que muestra la inserción: es lo que leen los lectores de pantalla.
4. Abra la Vista previa para ver el resultado: en el editor, el bloque se muestra como una tarjeta.

En el modo Un código HTML, el código se escribe directamente en el bloque, en colores, y la pestaña Vista previa muestra el resultado. El código puede llegar a 1 MB, para los servicios que proporcionan un código largo.

Si el servicio deposita cookies o sigue a sus visitantes, elija su categoría en Consentimiento del visitante: Medición de audiencia o Marketing y redes sociales. El bloque espera entonces a que el visitante acepte esa categoría en el banner de cookies; hasta entonces, un mensaje ocupa su lugar, con un enlace para gestionar las cookies. Funciona con el banner de TOWeb y con el de WebLegal.

El código también puede contener PHP, como una página .php de TOWeb 14: la página que lo contiene se publica como index.php, en la misma dirección. Antes de publicar, TOWeb comprueba la sintaxis del código: un error detiene la publicación indicando la página y la línea. El código se ejecuta en su alojamiento, bajo su responsabilidad, y en la prueba local; en la vista previa, un marco ocupa su lugar. No se publica en una página protegida con contraseña. Para comprobar que su alojamiento ejecuta PHP, use Publicar › Probar el servidor.

Copiar o duplicar un fragmento

Un título, su texto y una imagen se copian juntos, como en un procesador de textos:

1. Seleccione el fragmento con el ratón, desde el principio del título hasta el final del último elemento. También puede hacer clic al principio y luego Mayús + clic al final.
2. Copie: ⌘C (Mac) o Ctrl+C (Windows).
3. Haga clic al final de la línea tras la que quiere colocar la copia y pulse Intro: se crea una línea vacía.
4. Pegue: ⌘V (Mac) o Ctrl+V (Windows).

Para reproducir una sección entera, con su fondo y todo su contenido, utilice mejor Duplicar en sus comandos: vea el artículo Las secciones.

Mostrar un bloque según la pantalla

Al final del panel de cada bloque, Mostrar en elige las pantallas donde aparece: Escritorio, Tableta y Móvil. Un bloque desactivado para una pantalla no aparece en ella en el sitio publicado, pero sigue visible en el editor con una etiqueta. La vista previa por dispositivo muestra el resultado.