Visual Editor: cambia tu sitio en la propia página

#Ábrelo

La pestaña Visual Editor está junto a Studio en un espacio de trabajo con plan de pago; en Free la pestaña no aparece. El editor ocupa toda la ventana, y la flecha de arriba a la izquierda vuelve al proyecto. En la parte superior hay:

#Elige qué cambiar

• Haz clic en cualquier elemento de la página, o búscalo en Layers. Abre la flecha de una fila para ver lo que contiene; al elegir en la página se abre el camino hasta él.
• La ruta en la parte superior del panel indica dónde está lo seleccionado. Haz clic en un paso para elegir ese en su lugar, o pulsa Escape.
• Haz clic con Shift para elegir varios. Un cambio en el aspecto va a todos ellos.
• Cuando el mismo elemento se repite, como las tarjetas de una lista, se iluminan todos, y un cambio en el aspecto los cambia a todos. Las palabras de cada uno son suyas.
• Haz clic derecho en cualquier elemento, o pulsa Shift+F10, para abrir su menú.

El menú del clic derecho

Un elemento que no se puede aplicar aparece atenuado e indica por qué. Mientras escribes, una barra pequeña ofrece Bold, Italic, Link y Line break.

#Palabras y enlaces

Las palabras guardadas en los datos de tu sitio, como su correo electrónico o su nombre, cambian en todos los lugares donde aparecen, y el panel indica en cuántos es. El editor avisa cuando se usa una raya como signo de puntuación y ofrece una coma, y cuando un botón tiene el texto partido en dos líneas. Quick edit en el panel enumera todas las palabras e imágenes de una sección en un solo formulario.

#El aspecto

El panel tiene cinco pestañas: Element, Motion, Quick edit, Site y Check. En Element, Look incluye Layout, Space inside y Space outside, Text, Fill, Stroke y Effects. Un valor definido en el ancho que estás viendo se muestra completo; uno heredado de un ancho menor se muestra en gris, y al pasar el cursor por un campo aparece su botón para borrarlo.

Los colores son los roles propios de tu sitio, nunca un color aparte, así el sitio se mantiene coherente. Las clases que el panel no define se conservan tal cual, listadas en Kept as written.

La pestaña Site define lo que lee cada sección: sus Colours, su Type para titulares y texto, Text styles, Buttons, Boxes, y en Page su modo, esquinas, ancho y ritmo. La × junto a un ajuste lo devuelve al diseño propio de tu sitio.

#Añadir y organizar

• Add ofrece Section, Text, Heading, Button, Picture, Video, Icon, Divider, Form y Embed. Haz clic en uno para añadirlo donde elegiste, o arrástralo hasta donde deba quedar.
• Un Embed muestra una página de otro sitio web. Los mapas y reproductores de Google, YouTube, Vimeo, Spotify, SoundCloud y Calendly funcionan en todos los sitios; cualquier otro sitio web debe añadirse antes en Settings, Preferences, Allowed websites.
• + Add section entre dos secciones ofrece Designed (gratis, las secciones con las que construye Briks, en los colores de tu sitio), Blank (gratis) o Generate with AI, unos 5 créditos: tus palabras llegan al creador como un cambio.
• Picture en la pestaña Element la sustituye con Replace from your media, define su Alt text (o la marca como Decorative, nothing to read aloud), la recorta y fija el punto que queda a la vista en cada ancho. Section background… define un color, degradado, imagen o vídeo detrás de una sección.
• Los cambios de imagen se unen al borrador y se publican con tus otros cambios.
• En Layers, la fila de una sección en la página de inicio la sube o la baja, la copia o la oculta, y las secciones ocultas aparecen en Hidden from this page para volver a mostrarlas. En otras páginas, la fila de una sección la mueve o la quita de la página. Rename da a una capa un nombre propio, que solo sirve para el editor y nunca se publica.

#Páginas

Pages lista las páginas del sitio. Add page crea una Blank page o una Copy of a page, con su Title y Address. El menú de cada página tiene Search and share (su Search title, Search description, Hide from search engines y Share picture), Rename, Duplicate, Move up, Move down, Hide from menu y Delete. Al eliminar una página se pregunta adónde deben llevar en su lugar los enlaces que apuntaban a ella. Los cambios de página esperan en el borrador como cualquier otro.

#Trabajad en ello juntos

• Un borrador compartido. Tus cambios se guardan en el borrador del proyecto un instante después de hacer cada uno, así que sobreviven a una recarga, a una pestaña cerrada o a otro dispositivo, y todos los que abren el editor los ven. La barra dice Draft saved · not live yet, con cuándo y quién. Si otra persona cambió el borrador desde que lo abriste, una barra te pide Reload antes de seguir.
• Quién más está aquí. Las caras de otras personas con el editor abierto aparecen en la barra. Pasa el cursor sobre una para ver la página y el elemento en que está; su elemento elegido se resalta con su color. Nada se bloquea.
• Comments. Elige un elemento y pulsa C, o haz clic derecho y elige Comment. Escribe @ para nombrar a alguien. Un comentario tiene hasta 2.000 caracteres, queda fijado al elemento y tiene Reply, Resolve y Open again. Todos en el espacio de trabajo pueden comentar, incluidos los Viewers; solo los Editors, Admins y Owners pueden resolver. La campana avisa a todos, y las personas que nombras también lo saben en sus chats con el bot de Briks.

Los Viewers pueden abrir el editor para revisar el sitio y comentar. La página dice “You can look through this site here. Your role in this workspace can't change it.”

#Ask AI y el creador

Para algo que el panel no hace, como un elemento nuevo u otra distribución, Ask AI en el menú del clic derecho, o Ask the builder al pie de la pestaña Element, envía tus palabras al creador sobre el elemento que elegiste, como un cambio normal que usa créditos:

• New design for this section y Fix the layout muestran lo que suele costar el trabajo frente a tu saldo antes de enviar, como Design it for about 5 credits. El cambio se crea y se publica igual que un mensaje del estudio, y Versions lo deshace.
• Ask about this… responde una pregunta sobre el elemento seleccionado, gratis, sin construir nada.
• Publica o descarta primero el borrador: el creador trabaja a partir del sitio publicado, así que el editor te lo pide antes de enviar.
• Write alt text en Picture es gratis cuando ya hay guardada una descripción de la imagen; si no, cuesta hasta 0.10 créditos. Use this la conserva.

La pestaña Check revisa la página con el ancho en el que estás: imágenes sin texto alternativo, palabras difíciles de leer, encabezados desordenados, orden de lectura, y enlaces y botones sin nombre. Revisar es gratis; una corrección marcada con Uses credits va al constructor.

#Publica, o cambia de opinión

• Nada se publica hasta que lo publiques tú. Un borrador admite hasta 300 cambios.
• Publish escribe los cambios en el código de tu sitio y lo publica como una versión nueva, normalmente en unos treinta segundos, sin gastar créditos. Al publicar, el borrador queda vacío.
• Si no se puede hacer un cambio, no se publica nada, y el editor dice cuál y por qué.
• Drop this change en Changes quita uno. Discard draft en el menú ⋯ los descarta todos, para todos los que editan el sitio, y pregunta antes.
• History muestra las versiones del sitio. Preview muestra una tal como se publicó y Restore la vuelve a poner en vivo; tu borrador se conserva. Consulta Versiones, deshacer y rehacer.

#Atajos de teclado