Configurar el diseño y el contenido de la versión de última generación de Instant Site
Instant Site es un sitio web gratuito que obtendrá con su cuenta de tienda. Es una tienda online integrada donde puede empezar a vender de inmediato.
Instant Site está compuesto por bloques personalizables que le permiten crear fácilmente un sitio web atractivo y funcional. Puede añadir bloques desde la biblioteca, quitar u ocultar los bloques que ya no quiera usar, y organizar las secciones en el orden que prefiera. También puede cambiar fácilmente el contenido y el diseño de los bloques para adaptarlos a sus necesidades y su imagen de marca. El sitio web de la tienda online tendrá un diseño adaptable que resultará atractivo en equipos de escritorio, tabletas y móviles.
Para editar el contenido y el diseño del Instant Site, vaya a Panel de control → Gestionar Instant Site en el panel de administración de su tienda y haga clic en el botón Editar sitio.
Presentación del modo de edición
Al abrir su Instant Site para editarlo (Resumen → Gestionar Instant Site → Editar sitio o Sitio web → Editar sitio), verá la lista de Bloques del sitio que componen actualmente su Instant Site.
Todos estos bloques son visibles en la vista previa de Instant Site de la parte derecha, donde aparecen en el mismo orden que la lista.
Para visitar su sitio en la web y comprobar la apariencia en una nueva pestaña, haga clic en en la dirección de su Instant Site en la parte superior del editor.
Añadir bloques
Si necesita añadir secciones adicionales a su sitio web (por ejemplo, una sección de «Oferta especial», bloques con información sobre entrega o pagos, o un bloque adicional de «Información sobre la empresa»), o bien quiere reemplazar el bloque predeterminado por uno que se adapte mejor a su tienda, puede añadir fácilmente tantos bloques como prefiera.
Para añadir un bloque a su Instant Site:
- Desde el panel de administración de su tienda, vaya a Resumen → Gestionar Instant Site → Editar sitio (o Sitio web → Editar sitio).
- Haga clic en Añadir bloque.
- En la página que se abra, haga clic en la vista previa del bloque que necesite. Los bloques se agrupan por temas.
- Después de hacer clic en el bloque, se abrirá para edición y se añadirá a la lista de Bloques del sitio, justo antes del bloque Pie de página.
Puede editar el diseño y el contenido del bloque como prefiera, así como cambiar la posición en el sitio web. Si tiene bloques duplicados (por ejemplo, si ha añadido un nuevo bloque de portada con un diseño que le parece más atractivo), puede eliminar los bloques que ya no quiera usar.
Edición de bloques
El sitio web puede tener los textos, colores e imágenes que mejor se adapten a sus necesidades empresariales. Puede editar el contenido y el diseño de todos los bloques que aparezcan en la lista Bloques del sitio del editor de Instant Site.
Para editar el contenido del bloque:
- Desde el panel de administración de su tienda, vaya a Resumen → Gestionar Instant Site → Editar sitio (o Sitio web → Editar sitio).
- Haga clic en el bloque.
- En la pestaña Contenido, busque el elemento que necesite.
- Realice los cambios necesarios (cambia el texto, cargue una nueva imagen, configure enlaces de acción, etc.).
Los textos predefinidos en las plantillas del bloque contienen consejos sobre lo que puede escribir en los campos.
Puede cargar imágenes en formato JPG, PNG, JPEG2000, GIF, WEBP y TIFF con un tamaño inferior a 20 MB.
Para editar el diseño del bloque:
- Desde el panel de administración de su tienda, vaya a Resumen → Gestionar Instant Site → Editar sitio (o Sitio web → Editar sitio).
- Haga clic en el bloque.
- Cambie a la pestaña Diseño.
- Realice los cambios necesarios (configure el diseño del bloque, que define las posiciones de los elementos entre sí; cambie el color, el estilo o la fuente de los elementos del bloque; configure el fondo; elija los elementos que se mostrarán; etc.).
Siempre puede volver a la versión anterior del sitio web haciendo clic en Su sitio web → Descartar cambios en la parte superior del editor. Para deshacer los cambios realizados en la pestaña Diseño del bloque, también puede usar el enlace Restaurar predeterminados en la parte inferior. Tenga en cuenta que este enlace restablece la configuración inicial de la plantilla de diseño para este bloque.
Los bloques que tengan cambios sin guardar se mostrarán con un punto azul en la lista Bloques del sitio.
Cuando termine de editar el sitio web, haga clic en el botón Guardar y publicar en la esquina superior derecha del editor.
Cambiar el orden de los bloques
Los bloques del Instant Site se muestran en el orden en que aparecen en la lista Bloques del sitio del editor de Instant Site (Resumen → Gestionar Instant Site → Editar sitio). Puede cambiar el orden de las secciones como prefiera. Para esto, simplemente arrastre y suelte las secciones de Instant Site en la lista.
Como opción, también puede hacer clic en Configuración → Reorganizar bloques para arrastrar y soltar las secciones de Instant Site en una página dedicada.
Puede cambiar el orden de todos los bloques, excepto los bloques de encabezado y pie de página (que son siempre el primer y el último bloque del sitio web, respectivamente).
Eliminar bloques
Si ya no necesita una sección del Instant Site, puede eliminarla desde la lista Bloques del sitio. Por ejemplo, si quiere configurar la tienda y aún no tiene ningún testimonio de cliente que pueda mostrar, o bien su negocio es de temporada y no necesita el bloque «Productos destacados» en ese momento.
Para quitar un bloque del Instant Site:
- Desde el panel de administración de su tienda, vaya a Resumen → Gestionar Instant Site → Editar sitio (o Sitio web → Editar sitio).
- Haga clic en el bloque.
- Desplácese hasta la parte inferior y haga clic en Eliminar bloque.
Si más tarde necesita usar el bloque en su sitio web, puede añadir bloques similares desde la biblioteca.
Si ha eliminado el bloque «Testimonio de cliente» y quiere volver a añadirlo, elija cualquier bloque similar de la lista y adáptelo a sus necesidades. También puede usar este método para añadir testimonios adicionales a su sitio web.
No puede eliminar los bloques de encabezado y pie de página, pero puede desactivarlos para que no se muestren en el sitio web. Para hacerlo, haga clic en el bloque correspondiente del editor y, a continuación, desplácese hasta la parte inferior y desactive las opciones Mostrar pie de página o Mostrar encabezado. Puede activarlas más tarde si quiere.
Añadir el menú de navegación
El menú del sitio web o navegación es una lista de enlaces que se muestra en el sitio web.
Puede crear un menú de sitio web para que sus clientes puedan desplazarse más fácilmente por la tienda y encontrar lo que busquen. El menú de navegación del Instant Site se mostrará como una barra horizontal de enlaces en la parte superior del sitio para los usuarios de equipos de escritorio. Los clientes que usen móviles verán el menú de tres barras en su lugar. Tendrán que pulsar en el menú para ver los enlaces.
Cuando un cliente hace clic en un enlace, se ejecuta una acción específica. Según la opción seleccionada, los clientes serán redirigidos a un bloque específico del sitio o a una página de Internet. También puede crear un enlace de clic para llamar o enviar correo electrónico para que los clientes puedan contactarle.
Para configurar un menú de navegación:
- Desde el panel de administración de su tienda, vaya a Resumen → Gestionar Instant Site → Editar sitio (o Sitio web → Editar sitio).
- En la sección Bloques del sitio, haga clic en Encabezado.
- En la pestaña Contenido, haga clic en Menú de navegación.
- Puede hacer clic en el enlace existente para editarlo, o bien puede crear un nuevo enlace haciendo clic en + Añadir elemento de menú.
- En el campo Nombre, escriba un nombre que sus clientes entiendan fácilmente. Por ejemplo, Información sobre la empresa, Llámenos, etc.
- Seleccione la acción que se ejecutará al hacer clic:
- Desplazarse al bloque del sitio: el cliente será redirigido a uno de los bloques del sitio.
- Abrir página: puede escribir cualquier URL para redirigir a los clientes a esa página.
- Escribir correo electrónico: después de hacer clic en el enlace, se abrirá el servicio de correo predeterminado del dispositivo del cliente.
- Llamar al teléfono: después de hacer clic en el enlace, se marcará su número en el teléfono del cliente.
- Ir a la tienda: el cliente será redirigido al escaparate.
- Haga clic en Guardar y publicar.
- (Opcional) Puede cambiar el orden de los enlaces. Al editar el sitio, vaya a Encabezado → Menú de navegación para ver la lista de todos los enlaces que haya creado. Arrastre los elementos de menú como prefiera para cambiar el orden. Haga clic en Guardar y publicar.
También puede cambiar el diseño de la barra de navegación para que coincida con su identidad de marca.
Para editar el diseño del menú del sitio web:
- Desde el panel de administración de su tienda, vaya a Resumen → Gestionar Instant Site → Editar sitio (o Sitio web → Editar sitio).
- En la sección Bloques del sitio, haga clic en Encabezado.
- En la pestaña Diseño, haga clic en Fondo para elegir el color de la barra de navegación.
- Haga clic en Menú de navegación para elegir la fuente y el color de los enlaces de la barra.
- Haga clic en Guardar y publicar.
Añadir menú de categorías
Las categorías de productos son grupos de artículos que se muestran en la misma página de la tienda (por ejemplo, tazas de café, moda de verano, más vendidos, etc.). Puede mostrar el menú de las categorías raíz para que los compradores encuentren rápidamente el producto que buscan.
Para crear un menú de categorías en el Instant Site:
- Desde el panel de administración de su tienda, vaya a Resumen → Gestionar Instant Site → Editar sitio (o Sitio web → Editar sitio).
- En el menú de la izquierda, haga clic en Encabezado → Menú de navegación y seleccione + Añadir menú.
- Asigne al elemento un nombre descriptivo que indique a los clientes que es el enlace a su tienda.
- Haga clic en la lista desplegable Acción al hacer clic y seleccione Ir a la tienda.
- Asegúrese de que esté activada la opción Mostrar categorías al pasar el cursor por el menú. Puede desactivar la opción para ocultar el menú de categorías.
- Haga clic en Guardar y publicar.
Tenga en cuenta que, como el menú de categorías se muestra al mantener el cursor, no se mostrará en los dispositivos móviles. Cuando un cliente pulse en un enlace de la tienda desde el menú, será redirigido de inmediato a la tienda.
Añadir enlaces de acción
Puede añadir enlaces de acción en algunas secciones del Instant Site (por ejemplo, en los bloques «Portada del sitio», «Testimonio» o «Contacto»). Los enlaces de acción son textos o botones con texto en los que se puede hacer clic. Cuando un cliente hace clic en el texto (o botón), se ejecuta una acción específica.
Por ejemplo, puede especificar la URL de un producto que se abrirá al hacer clic, o bien puede enviar a los clientes a una sección específica del sitio web (por ejemplo, si hay una oferta).
Para configurar un enlace de acción:
- Desde el panel de administración de su tienda, vaya a Resumen → Gestionar Instant Site → Editar sitio (o Sitio web → Editar sitio).
- Haga clic en el bloque.
- En la pestaña Contenido del bloque, haga clic en Añadir enlace de acción.
El bloque de portada tiene los botones Acción principal y Acción secundaria en su lugar.
- Escriba el Título. Será el texto del enlace.
- Seleccione la Acción al hacer clic: Desplazarse al bloque del sitio, Abrir página, Redactar correo electrónico o Llamar por teléfono.
- Elija el bloque del sitio, escriba la URL o especifique el número de teléfono o correo electrónico.
- (Opcional) Cambie la apariencia, la fuente, el tamaño, la forma y el color del enlace de acción en la pestaña Diseño.
Diseño de ejemplo de un enlace de acción para un correo electrónico en el bloque «Contacto».
Configurar los bloques de la tienda
Hay dos bloques que pueden indicar a los clientes dónde acceder a la tienda en el Instant Site: el bloque Productos destacados y el bloque Categorías raíz. De forma predeterminada, solo se muestra el bloque Productos destacados en la lista Bloques del sitio.
En el bloque Productos destacados, se muestran todos los productos asignados a la categoría de la página del escaparate de la tienda. Este bloque es el lugar ideal para mostrar los artículos que quiere que sus clientes vean con más frecuencia. Cuando un cliente haga clic en un producto destacado, será redirigido a la página de ese producto en la tienda.
Si tiene un catálogo pequeño, puede mostrar todos los productos en la sección Productos destacados. Si tiene un catálogo más amplio, es probable que necesite un sistema de categorías en la tienda. Para mostrar estas categorías directamente en la página principal del Instant Site, puede añadir el bloque especial Categorías raíz. Este bloque contendrá todas las categorías raíz que tenga.
Para que sea más fácil navegar por las categorías, también puede configurar un menú de categorías.
Para añadir el bloque Categorías raíz:
- Desde el panel de administración de su tienda, vaya a Resumen → Gestionar Instant Site → Editar sitio (o Sitio web → Editar sitio).
- Haga clic en Añadir bloque.
- En la página que se abra, desplácese hasta Productos.
- Haga clic en el bloque Comprar por categorías.
- Después de hacer clic en el bloque, se abrirá para edición y se añadirá a la lista Bloques del sitio.
Puede configurar cómo se mostrarán los bloques Productos destacados y Categorías raíz en la página principal del Instant Site. Para hacerlo, vaya a la página Diseño en el panel de administración de su tienda. En el editor del sitio, también puede cambiar el diseño de estos bloques (por ejemplo, el nombre y precio del producto, cómo se mostrará el botón «Comprar ahora» y la imagen principal del producto, etc.).
Para cambiar el diseño de los bloques de la tienda en el editor del sitio:
- Desde el panel de administración de su tienda, vaya a Resumen → Gestionar Instant Site → Editar sitio (o Sitio web → Editar sitio).
- Haga clic en el bloque.
- Realice los cambios necesarios en las pestañas Contenido y Diseño (defina el título del bloque, elija los elementos que se mostrarán, cambie las fuentes y el estilo del fondo y el color, etc.).
Los ajustes del editor del sitio tienen prioridad sobre ajustes similares en la página Diseño del panel de administración de su tienda.
Aplicar CSS y fuentes predeterminadas
Hay dos formas principales de cambiar las fuentes del Instant Site. Primero, puede establecer las fuentes de cada elemento en todos los bloques individualmente desde la pestaña Diseño del bloque. Aquí puede elegir el tipo de fuente, el tamaño y el estilo (negrita o cursiva), así como el color del texto. En segundo lugar, también puede establecer la fuente predeterminada para todos los bloques del sitio con la configuración global de fuente.
Por ejemplo, puede usar la configuración global si prueba varias opciones de diseño y no necesita distintas fuentes para elementos diferentes de los bloques del sitio. Así podrá ahorrar tiempo y tendrá un diseño uniforme para todo el sitio web en solo un momento.
Puede establecer:
- Fuentes de título (las fuentes en los encabezados de bloque)
- Fuentes del texto de cuerpo (las fuentes en los párrafos de texto, textos de botones y subtítulos)
Después de configurar la fuente predeterminada del sitio, podrá cambiar las fuentes de los elementos individuales. La configuración global de fuente solo se aplica en los elementos que tengan seleccionada la fuente «Predeterminada» en la pestaña Diseño del editor.
La configuración global de fuente que aplique en el editor de Instant Site solo se usa para el sitio web en sí, incluyendo los bloques de la tienda (una vista previa donde se muestra a los clientes dónde acceder a la tienda en su sitio). No se usan en la tienda en sí, donde los clientes exploran los productos, ya que el escaparate se considera una parte independiente del sitio web.
Si necesita ajustar la apariencia (incluyendo las fuentes) de la tienda o quiere personalizar la apariencia del Instant Site (si quiere cambiar otros ajustes que no estén disponibles en el editor), puede añadir código CSS personalizado. Si usa hojas de estilo en cascada (CSS), podrá cambiar los estilos de las páginas (podrá ajustar el color de los botones u ocultarlos, cambiar las fuentes, ocultar precios y mucho más).
Para aplicar fuentes o estilos:
- Desde el panel de administración de su tienda, vaya a Resumen → Gestionar Instant Site → Editar sitio (o Sitio web → Editar sitio).
- Haga clic en Configuración → Fuentes y estilos.
- Para configurar las fuentes predeterminadas de su Instant Site, elija las fuentes en las listas desplegables Fuente de título y Fuente del texto de cuerpo.
- Para aplicar estilos, haga clic en Ajustes avanzados y escriba el código CSS.
Si ha cambiado a la versión de última generación de Instant Site y hay activos temas CSS que aplicó anteriormente en la página Diseño del panel de administración de su tienda, dichos códigos seguirán aplicándose en la tienda (hasta que los desactive). Si posteriormente aplica nuevos códigos en el editor de Instant Site y hay conflictos, los códigos que aplique en la página Diseño tendrán prioridad para las páginas de la tienda.
Cambiar la dirección del sitio web y el nombre de la tienda
Puede editar el nombre y la dirección del sitio web de la tienda para que reflejen el concepto y el nombre de su marca.
Para editar el nombre del sitio web:
- Desde el panel de administración de su tienda, vaya a Configuración → General → Perfil de la tienda.
- Escriba el nombre de la tienda en el campo Nombre de la tienda, en la sección Nombre de la tienda y dirección web.
- Haga clic en Guardar.
Para editar la dirección del sitio web:
- Desde el panel de administración de su tienda, vaya a Resumen → Gestionar Instant Site (o Sitio web → Dominio).
- Haga clic en el botón Cambiar dirección.
- Escriba el nombre que prefiera para la dirección web en el campo Usar nuestro subdominio.
- Haga clic en Guardar.
Mostrar el banner de consentimiento de cookies
En algunos países (por ejemplo, los países de la UE), puede que necesite mostrar el banner de consentimiento de cookies en el sitio web de la tienda. Para mostrarlo, vaya a Ajustes →Seguimiento y análisis en el editor de Instant Site (Resumen → Gestionar Instant Site → Editar sitio) y active la opción Mostrar banner de consentimiento de cookies.