Editar un sitio web.

El editor de un vistazo

Arriba está la barra superior: ← «Tus webs» te lleva de vuelta a la vista general, «Elegir página» cambia entre la página de inicio y las subpáginas, «Escritorio», «Tableta» y «Móvil» cambian la vista previa, y ↶ y ↷ deshacen y rehacen. Al lado ves si todo está guardado, cuánto queda libre en tu barra de IA, «Llévatelo», el estado de la página y, en el extremo derecho, «Publicar».

A la izquierda están las áreas de trabajo, en tres grupos: en «Diseñar sitio web», «Sitio web», «Secciones», «Páginas y menú», «Menú y pie de página», «Colores y tipografía» y «Editar con Kenji»; en «Conectar herramientas», ShopBuilder, FormBuilder y DomainStudio; en «Gestionar», «Ajustes», «Miembros», «En Google» y «Empresa». En el centro está tu página real; a la derecha, la herramienta de lo que selecciones.

«Ajustes» reúne lo esencial de un sitio web: «Nombre de la web» e «Idioma de la web» — el idioma se aplica a palabras fijas como botones, contacto y textos de error; tus textos no se traducen —, además de «Llévatelo» y «Eliminar la web». Para todo lo que ya tiene su sitio, ahí solo se indica el camino: «En Google», «Miembros» y «Dirección en DomainStudio». Si el sitio web lleva una marca, aparece ahí con «Asignar en BrandStudio».

En pantallas más pequeñas, también en muchos portátiles, el editor muestra una columna cada vez: abajo cambias entre «Secciones», «Vista previa» y «Herramienta», y las áreas de trabajo están tras «Elegir área de trabajo». En el móvil, el indicador de IA, «Llévatelo», el estado de la página y «Poner la web fuera de línea» están tras «Mostrar más».

El guardado es automático. Si en la barra superior aparece «Sin guardar», una línea roja indica el motivo, con «Guardar de nuevo» al lado.

Escribir directamente en la página

Los títulos, los párrafos, los textos de los botones y los puntos de las listas los cambias donde están: haz clic en el texto y escribe. La vista previa es tu página real, no una réplica al lado.

Enter aplica el cambio y Escape restaura el texto anterior. Un texto siempre ocupa una sola línea: los saltos de línea se convierten en espacios. En el editor, los enlaces no llevan a ninguna parte; un clic solo selecciona.

Se guarda poco después de escribir, en el borrador. En la web no cambia nada hasta que publiques.

1. 1En la vista previa, haz clic en el texto que quieras cambiar.
2. 2Escribe el nuevo texto.
3. 3Pulsa Enter o haz clic fuera para aplicarlo — Escape descarta lo que has escrito.

Escribir no consume saldo de IA.

Diseñar el menú y el pie de página

El aspecto del menú y del pie de página se ajusta en el área «Menú y pie de página». Para el menú principal hay seis plantillas: «Claro», «Centrado», «Dos filas», «Flotante», «Barra lateral» y «Foco» — con «Foco», un único botón de menú abre toda la navegación. Cambiar de plantilla solo modifica el aspecto; tus elementos, su orden y sus estados se mantienen.

En «Personalizar menú» ajustas «Altura», «Espacio entre enlaces», «Alineación» y «Fondo» de la barra, si acompaña al desplazarte por la página («Menú fijo al desplazarse») y qué ocurre en pantallas estrechas: «Menú desplegable» o «Barra de enlaces con desplazamiento horizontal». Si el menú está sobre una superficie de color, el constructor elige un color de texto legible.

En «Logotipo en la cabecera», con «Elegir tu propio logotipo» eliges un logotipo de tus archivos en MediaStudio; «Quitar el logotipo» lo vuelve a quitar. Sin logotipo propio, la cabecera muestra el logotipo de tu marca y, si no hay ninguno, el nombre del sitio web. El logotipo lo eliges cuando el diseño está guardado; igual que este, se pone en línea con la próxima publicación.

Para el pie de página hay cuatro plantillas: «Compacto», «Columnas de enlaces», «Contacto destacado» y «Cierre con una acción». Lo que contiene se describe en el siguiente apartado.

1. 1En el editor, haz clic a la izquierda en «Menú y pie de página».
2. 2Elige arriba «Menú principal» y haz clic en una plantilla; la «Vista previa para visitantes» muestra tu menú con ella y puedes alternar entre «Escritorio» y «Móvil».
3. 3Si lo necesitas, abre «Personalizar menú» y ajusta la barra.
4. 4Haz clic en «Guardar diseño» y luego en «Volver al editor».

El diseño queda en el borrador y se pone en línea con la próxima publicación. No consume saldo de IA, y Kenji no lo toca: «Acorta el título» nunca cambia el aspecto de tu menú.

Qué aparece en el pie de página

El pie de página lo rellenas en el área «Menú y pie de página», en «Pie de página». Las líneas de contacto proceden de los datos de tu empresa y se gestionan allí. En «Enlazar páginas existentes» decides para cada página si queda como «No mostrar en el pie de página», va en la «Lista de enlaces» o entre los «Enlaces legales», independientemente de si aparece arriba en el menú. Ahí solo aparecen páginas públicas; una página solo para miembros, nunca.

Los «Enlaces propios» constan de nombre y destino del enlace: una página de tu sitio web, una sección o una dirección con https://, mailto: o tel:. El campo no acepta un destino que no sea seguro. En «Redes sociales» eliges la «Fuente de los perfiles»: los datos de tu empresa o perfiles propios para el pie de página, diez como máximo; las redes conocidas aparecen con su icono y su nombre para los lectores de pantalla.

Con «Columnas personalizadas» organizas hasta cuatro columnas con título, cada una con hasta diez entradas: páginas, enlaces, contacto, redes sociales. «Cierre con una acción» coloca un botón al final; sin texto propio, usa el botón de la cabecera. La «Nota al pie» es una línea libre al final de la página. El pie de página enlaza automáticamente el aviso legal de tu marca.

1. 1Abre «Menú y pie de página» y elige arriba «Pie de página».
2. 2Abre un apartado, por ejemplo «Enlaces propios», introduce el nombre y el destino del enlace y haz clic en «Añadir enlace».
3. 3Revisa la «Vista previa de tu pie de página» y haz clic en «Guardar diseño».

Un enlace empezado o un perfil introducido a medias debe añadirse o vaciarse primero; de lo contrario, el diseño no se puede guardar.

Poner tu tienda en la página

Si tienes una tienda en ShopBuilder ai, puedes llevarla a tu sitio web de dos formas: como sección propia en una página o como elemento del menú. Un clic en «ShopBuilder» en la barra muestra tus tiendas junto a la página, cada una con sus productos activos y sus categorías: «Insertar» la coloca como nueva sección detrás de la sección que hayas seleccionado y «Al menú» la añade como elemento del menú. En la sección eliges a la derecha la «Apariencia»: «Catálogo» muestra tu oferta en plena página y «Solo botón» lleva a la tienda con un botón. También puedes añadir la sección con «+ Añadir sección» → «Tienda» y elegir la tienda a la derecha.

Lo que muestra la sección lo ajustas a la derecha en «¿Qué mostrar?»: «Todo el catálogo», «Una categoría» o «Productos concretos» — como máximo 24, en el orden en que los marques, y reordenables con ↑ y ↓. Además están «Orden», «Como máximo» (0 significa: mostrar todos), el «Campo de búsqueda sobre los productos» y «Mostrar categorías como filtro»; el campo de búsqueda está disponible a partir de cuatro productos en la selección, y las categorías, a partir de dos. La misma tienda puede aparecer varias veces en una página, cada sección con su propia selección; si eliges otra tienda en una sección, su selección empieza de cero. Si cambias el nombre de una categoría en ShopBuilder, la sección te lo indica y vuelves a elegir.

El catálogo adopta los colores y la tipografía de este sitio web para que no parezca un elemento ajeno; el diseño que tienes guardado para la tienda no se modifica. La compra siempre se realiza en la tienda: cada clic en un producto o en el carrito lleva a la dirección de tu tienda, donde están la caja y el pago. No hay una segunda caja dentro del sitio web.

Solo puedes elegir tus propias tiendas. Debajo de la selección se indica el estado de la tienda: «Tienda accesible», «Esta tienda aún no tiene productos activos.» — en ese caso solo aparece el botón — o «Esta tienda aún no es accesible al público.» Los visitantes no ven una tienda en borrador; en su lugar aparece una frase breve.

1. 1Selecciona en la página la sección tras la que debe ir la tienda y, a la izquierda, en «Conectar herramientas», haz clic en «ShopBuilder».
2. 2Junto a la página, haz clic en «Insertar» en tu tienda — o en «Al menú».
3. 3A la derecha, ajusta en «Apariencia» y «¿Qué mostrar?» lo que muestra la sección.
4. 4Publica el sitio web; solo entonces aparece el enlace.

«Más opciones», debajo de la lista, abre el área amplia: allí eliges la tienda, la apariencia y la selección antes de insertar, y haces clic en «Insertar en esta página» o «Añadir al menú». Los productos, precios y pedidos los gestionas en ShopBuilder ai — más información en el capítulo de ShopBuilder ai.

Añadir, ordenar, duplicar y eliminar secciones

Cada página es una sucesión de secciones. Con «Secciones» abres la lista a la izquierda: arriba, la «Cabecera»; debajo, las secciones en el orden de la página. Un clic te lleva a ese punto en la vista previa.

Las secciones nuevas se añaden con «+ Añadir sección»; el catálogo «¿Qué tipo de sección?» muestra cada tipo con un pequeño dibujo. La nueva sección se coloca detrás de la seleccionada. Se reordena arrastrando o con las flechas ↑ y ↓, lo que también funciona sin ratón.

A la derecha de la sección seleccionada están «Duplicar sección» — la copia se crea sin imagen — y «Eliminar sección», con una pregunta de confirmación. Una página admite hasta 14 secciones; cada subpágina tiene su propia lista.

1. 1Haz clic a la izquierda en «Secciones».
2. 2Selecciona una sección, haz clic en «+ Añadir sección» y luego en un tipo.
3. 3Arrastra las secciones a su sitio o usa ↑ y ↓.
4. 4Para eliminar: haz clic en la sección, luego a la derecha en «Eliminar sección» y después en «Sí, eliminar».

Nada de esto consume saldo de IA, y «Deshacer» recupera una sección eliminada.

Diez tipos de sección

«Texto» para todo lo narrativo, con imagen si quieres. «Servicios» para puntos uno al lado de otro. «Contacto» con dirección, teléfono, correo electrónico, horario de apertura y un formulario que realmente se envía. «Llamada a la acción» es una franja de color con un botón. «Preguntas y respuestas» se despliega y se pliega. «Opiniones de clientes» muestra citas; «Precios», ofertas como tarjetas informativas sin caja. «Imagen» es una imagen grande con pie de foto, «Formulario» inserta un formulario de FormBuilder ai y «Tienda», tu tienda.

Servicios, Preguntas y respuestas, Opiniones de clientes y Precios constan de «Puntos». Los gestionas a la derecha: dos campos por punto, «+ Añadir punto» hasta doce, ↑ y ↓ para ordenar y ✕ para quitar. Las secciones nuevas traen marcadores de posición neutros: ninguna opinión de clientes inventada, ningún precio inventado.

Las preguntas y respuestas se incluyen además en la página en formato legible por máquinas, para que Google pueda reconocerlas. A propósito no hay más tipos: cada uno tiene que verse bien con cualquier estilo y funcionar en el móvil.

1. 1En la vista previa, haz clic en una sección con puntos, por ejemplo «Precios».
2. 2Cambia los campos a la derecha, en «Puntos»; el cambio se aplica en cuanto sales de un campo.
3. 3Haz clic en «+ Añadir punto» para añadir otro punto.

Los marcadores de posición de las secciones nuevas existen en alemán e inglés; en un sitio web en otro idioma, los sobrescribes directamente.

La cabecera

La cabecera de cada página tiene tres estructuras: «Texto centrado» — si hay una imagen, va debajo —, «Imagen como fondo», con la imagen oscurecida y texto claro, y «Texto a la izquierda, imagen a la derecha». «Imagen como fondo» necesita una imagen; si falta, la página muestra «Texto centrado», y antes aparece a la derecha «Para esto hace falta una imagen — elige una abajo.»

El título, la frase de debajo y el texto del botón los escribes directamente en la página. Sin texto, la página publicada no tiene botón. Adónde lleva lo eliges en «El botón lleva a» (consulta Los botones apuntan a páginas). La barra de la cabecera muestra el mismo botón arriba a la derecha si hay una sección de contacto o el botón tiene un destino.

1. 1En la lista de secciones, haz clic en «Cabecera» o, en la vista previa, en la parte superior de la página.
2. 2A la derecha, en «Estructura», elige una de las tres formas.
3. 3Si lo necesitas, añade una imagen con «Elegir imagen».

Prescindir de la imagen no es un apaño: una cabecera tranquila con una frase clara suele ser mejor punto de partida que una foto de stock.

Fondo, lado de la imagen, alineación

Para cada sección eliges a la derecha un «Fondo»: «Como la página», «Superficie clara» o «Acento suave». En «Texto» decides en «Imagen junto al texto» si una imagen va a la izquierda, a la derecha o si no va ninguna al lado; «Alineación» alinea el texto: «Izquierda» o «Centrado».

Estos pocos interruptores marcan el ritmo de la página: las franjas alternas separan los temas mejor que cualquier línea. La franja «Llamada a la acción» siempre va sobre el color de acento; su fondo no se puede cambiar.

1. 1En la vista previa, haz clic en una sección.
2. 2A la derecha, elige el «Fondo», en las secciones de texto «Imagen junto al texto», y la «Alineación».

Vista previa por dispositivo

Con «Escritorio», «Tableta» y «Móvil» en la barra superior ves la página a todo lo ancho, a 768 y a 390 píxeles de ancho. No es una imitación, sino tu propia página en un marco más estrecho: el contenido se reorganiza exactamente igual que para los visitantes, incluido el menú que se despliega en el móvil.

La mayoría de los visitantes llegan desde el móvil. Echar un vistazo ahí antes de publicar es la prueba más barata que existe.

1. 1Haz clic arriba en «Móvil».
2. 2Desplázate por la página y revisa el menú, las imágenes y los botones.
3. 3Con «Escritorio» vuelves al ancho completo.

Deshacer y rehacer

Con ↶ y ↷ en la barra superior deshaces y rehaces pasos, hasta cincuenta, mientras el editor esté abierto. Está pensado para la propia página: textos escritos, secciones que has añadido, movido, duplicado o eliminado, los puntos de una sección, la tipografía y un cambio hecho por Kenji.

«Deshacer» no revierte lo que se guarda por otra vía: los datos de «Empresa», «En Google», «Páginas y menú», «Menú y pie de página» y «Miembros». Al cerrar el editor, el historial desaparece; la página publicada no se ve afectada hasta que vuelvas a publicar.

1. 1Haz clic en ↶ (Deshacer) para revertir el último paso.
2. 2Haz clic en ↷ (Rehacer) para recuperarlo.

Deshacer no consume saldo de IA. Si deshaces un cambio de Kenji, el saldo de IA que se gastó en él no se recupera.

Cambiar cosas con Kenji

En lugar de buscar campos, le dices a Kenji qué quieres cambiar: «Acorta el título y añade una sección sobre nuestro desayuno». Hablas con él en la ventana de Kenji, abajo a la derecha: la misma ventana que en todo KENJTEC. Arriba aparece en qué estás trabajando: la herramienta, el nombre de tu web, la página abierta y la sección que has elegido. Kenji reescribe la página que se muestra en ese momento en la vista previa, y el cambio se guarda en el borrador. Kenji puede reescribir textos; añadir, reordenar o eliminar secciones, y buscar una imagen nueva para un lugar concreto.

Kenji responde con palabras: primero dice en una frase lo que va a hacer, luego el editor cambia la página y debajo aparece «Hecho: el cambio está en el borrador. No se publica hasta que pulses «Publicar».». Si solo preguntas algo, por ejemplo «¿Qué puedo mejorar en esta página?», te responde en lugar de cambiar nada. Si acabas de escribir algo, el editor lo guarda primero; si no lo consigue, Kenji no cambia nada y en la ventana aparece «Guarda primero: tu última versión aún no está guardada.».

No se tocan tus datos de empresa, las páginas y el menú, el diseño del menú y del pie de página, los ajustes de Google, tus propios colores, los ajustes de tu marca ni tu código en el modo desarrollador. Por eso, una frase a Kenji no cambia los colores que elegiste tú o que proceden de la marca; para eso está «Colores y tipografía».

Si el resultado no te gusta, «Deshacer» en el editor recupera el estado anterior.

1. 1En el editor, haz clic en «Editar con Kenji», a la izquierda, o en el botón redondo con la K, abajo a la derecha.
2. 2Escribe lo que quieres en el campo «Di qué debe cambiar, o pregúntame algo…» y pulsa Intro.
3. 3Espera a que en la ventana aparezca «Hecho» y la vista previa muestre el nuevo estado.

Cada cambio que pides en la conversación consume saldo de IA, pero si falla, no se cobra nada. Si tu barra de IA está vacía, se vuelve a llenar sola, o puedes contratar un paquete de IA adicional: consulta Cuenta y facturación.

Propuestas de texto para un lugar concreto

Si un texto concreto no te convence, puedes pedir propuestas justo para ese lugar. En «Empresa» → «Textos» están los textos de la página de inicio: «Título de la cabecera», «Frase debajo», «Texto del botón», «Subtítulo del sitio», el título y el texto de cada sección y la «Línea del pie».

Ahí puedes cambiar el texto a mano y fijarlo con «Aplicar». O puedes usar uno de los cuatro botones: «Más corto», «Más largo», «Otro tono» o «Tres propuestas». Kenji ofrece tres versiones, una debajo de otra, y solo se coloca una de ellas cuando haces clic. Hasta entonces, tu texto se queda como está.

1. 1Haz clic en «Empresa», a la izquierda, y abre «Textos».
2. 2Despliega el texto que quieres cambiar.
3. 3Haz clic en «Más corto», «Más largo», «Otro tono» o «Tres propuestas».
4. 4Haz clic en la versión que te guste: aparece de inmediato en el borrador.

Las propuestas consumen saldo de IA; aplicar una versión o cambiar el texto a mano, no.