Configurar el diseño y el contenido de Instant Site (versión de nueva generación)

El Instant Site de Ecwid es un sitio web gratuito que obtiene con su cuenta de Ecwid. Es una tienda online integrada donde puede empezar a vender de inmediato. 

Con la versión de nueva generación de nuestro Instant Site, puede:

• Construir un sitio web a partir de secciones de contenido personalizables;
• Utiliza plantillas de sitios web listas para ser utilizadas en diferentes tipos de tiendas - desde restaurantes y cosméticos hasta la venta de arte y cursos;
• Añadir una gran variedad de secciones como portadas u ofertas especiales de la biblioteca;
• Crear menús de navegación para facilitar a los clientes la navegación por su tienda;
• Traducir todo el contenido de su sitio, incluyendo el título y la descripción SEO.

Para editar su Instant Site, vaya a Sitio web y haga clic en Editar sitio. Si Instant Site no es su sitio principal, vaya a Panel de control → Gestionar Instant Site en el panel de administración de Ecwid y haga clic en el botón Editar sitio.

Elegir una plantilla de sitio

Para agilizar la configuración del Instant Site, puede elegir entre un conjunto de plantillas. Estas plantillas pueden editarse como usted desee para adaptarlas a su negocio.

Para elegir una plantilla para su sitio:

1. Desde su administrador de Ecwid, vaya a Sitio web → Editar sitio. Si Instant Site no es su sitio principal, vaya a Resumen → Gestionar Instant Site y haga clic en Editar sitio.
2. Haga clic en Configuración → Plantillas de sitio.
3. Navegue por la lista de plantillas hasta encontrar la que más le guste.
4. Para ver el aspecto de una plantilla, pase el ratón sobre ella y haga clic en Vista previa de la plantilla. Para aplicar la plantilla, haga clic en Usar Plantilla:

   

¡Eso es todo! Ha elegido una plantilla para su Instant Site. Ahora puede continuar con la configuración del sitio y realizar cambios en esta plantilla en el editor.

Presentación del modo de edición

Al abrir su Instant Site para editarlo (Sitio web → Editar sitio o Resumen → Gestionar Instant Site → Editar sitio), verá la lista de Secciones de página de inicio que componen actualmente su Instant Site.

Todos estos sección 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 ver su aspecto en una pestaña independiente, haga clic en Su Instant Site en la parte superior del editor.

Añadir sección

Si necesita añadir secciones adicionales a su sitio web (por ejemplo, una sección de «Oferta especial», sección con información sobre entrega o pagos, o un sección adicional de «Información sobre la empresa»), o bien quiere reemplazar la sección predeterminado por uno que se adapte mejor a su tienda, puede añadir fácilmente tantos sección como prefiera. Cuando tengas muchas secciones, puedes renombrarlas para facilitar la navegación por el sitio.

Para añadir un sección a su Instant Site:

1. Desde el panel de administración de Ecwid, vaya a Sitio web → Editar sitio). Vaya a Resumen → Gestionar Instant Site → Editar sitio si Sitio instantáneo no es su sitio principal.
2. Haga clic en Añadir sección.
3. En la página que se abra, haga clic en la vista previa del sección que necesite. Los secciones se agrupan por temas.
4. Después de hacer clic en la sección, se abrirá para edición y se añadirá a la lista de Secciones de página de inicio, justo antes del sección Pie de página.
5. (opcional) Para renombrar un sección, haz clic en él en el menú lateral izquierdo del editor y, a continuación, haz clic en su nombre para introducir un nombre personalizado:

   

Puede editar el diseño y el contenido del sección como prefiera, así como cambiar la posición en el sitio web. Si tiene secciones duplicados (por ejemplo, si ha añadido un nuevo sección de portada con un diseño que le parece más atractivo), puede eliminar los secciones que ya no quiera usar.

Edición de sección

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 secciones que aparezcan en la lista Secciones de la página de inicio del editor de Instant Site.

Para editar el contenido del sección:

1. Desde el panel de administración de Ecwid, vaya a Sitio web → Editar sitio.
2. Haga clic en la sección.
3. En la pestaña Contenido, busque el elemento que necesite.
4. Realice los cambios necesarios: cambia el texto, cargue una nueva imagen, configure enlaces de acción, etc. También puedes renombrar una sección haciendo clic en su título en la parte superior. 

Los textos predefinidos en las plantillas del sección 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. El tamaño recomendado es de 1500-2000px. Como el diseño del sitio web se adapta al tamaño de la pantalla del dispositivo del cliente, intente recortar sus imágenes de modo que la información más importante esté en el centro. Si desea añadir texto a sus imágenes, puede añadirlo en el editor de Instant Site (en lugar de en un editor de fotos).

Para editar el diseño del sección:

1. Desde el panel de administración de Ecwid, vaya a Sitio web → Editar sitio.
2. Haga clic en la sección.
3. Cambie a la pestaña Diseño:
   

   

4. Realice los cambios necesarios (configure el diseño del sección, que define las posiciones de los elementos entre sí; cambie el color, el estilo o la fuente de los elementos del sección; 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 Borrador autoguarda → Descartar cambios en la parte superior del editor. Para deshacer los cambios realizados en la pestaña Diseño del sección, 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 sección.

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 secciones

Los secciones del Instant Site se muestran en el orden en que aparecen en la lista Secciones de la página de inicio del editor de Instant Site (Sito web → Editar sitio). Puede cambiar el orden de todos los secciones, excepto los secciones de encabezado y pie de página (que son siempre el primer y el último sección del sitio web, respectivamente).

Para cambiar el orden de las secciones, simplemente arrastre y suelte las secciones de Instant Site en la parte izquierda del editor:

Eliminar secciones

Si ya no necesita una sección del Instant Site, puede eliminarla desde la lista Secciones de la página de inicio. Por ejemplo, si quiere configurar la tienda y aún no tiene ningún testimonio de cliente que pueda mostrar.

Para quitar un sección del Instant Site:

1. Desde el panel de administración de Ecwid, vaya a Sitio web → Editar sitio.
2. Haga clic en la sección.
3. Desplácese hasta la parte inferior y haga clic en Eliminar sección:
   

   

Si más tarde necesita usar el sección en su sitio web, puede añadir secciones similares desde la biblioteca.

Traducir secciones

Puede traducir el contenido de la sección a otro idioma, creando así un sitio multilingüe. El contenido del sitio incluye el encabezado del menú, el pie de página, las opiniones de los clientes, novedades, información de entrega y pago, ofertas especiales, información de la empresa, ubicaciones y el título y la descripción SEO del sitio.

Cada nuevo idioma aparece en el selector de idioma para que los clientes puedan elegir su idioma preferido.

Aprenda a traducir el contenido de Instant Site →

Personalizar el aspecto del encabezado

El encabezado de un sitio web es la sección superior de su sitio. Contiene un logotipo (o el nombre de su tienda), una barra de búsqueda, enlaces de acción, un icono de bolsa, un menú de navegación e información de contacto. Puede ajustar el diseño del encabezado para que coincida con la identidad de su marca.

Para editar el diseño del encabezado:

1. Desde su administrador de Ecwid, vaya a Sitio web y haga clic en Editar sitio.
2. En el menú Secciones de página de inicio , haga clic en Encabezado.
3. Haga clic en la pestaña Diseño para personalizar la apariencia:
   • Disposición. Elija el aspecto de su encabezado.
     
   • Logotipo del sitio. Cambie la fuente, el tamaño y el color del nombre. También puede añadir más espacio entre las letras y escribir en mayúsculas el nombre.
   • Fondo. Puede hacer que el encabezado sea transparente, transparente en escala de grises, o elegir un color sólido para el fondo. Para cambiar el color, seleccione el Color sólido en el desplegable y elija el color.
   • Menú e iconos. Cambie la fuente y el color para todo el contenido del encabezado. Aquí también puede especificar qué elementos mostrar en el encabezado (menú de navegación, icono de la bolsa de la compra, búsqueda y/o enlace a la cuenta del cliente).
   • Enlaces de acción. Personalice el estilo del botón de llamada a la acción en el encabezado. También puede desactivar o activar el botón con el conmutador Mostrar elemento.
4. Haga clic en Publicar.

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:

Un menú web facilita a los clientes la navegación por su tienda y que encuentren lo que buscan. Puede elegir mostrar el menú como una barra horizontal de enlaces en la parte superior de su sitio o como un menú de hamburguesa. Los clientes de móviles verán el menú de hamburguesa independientemente del diseño que elija.

Cada enlace del menú de la barra de navegación puede redirigirle a un sección específico de su sitio web o a cualquier otra 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:

1. Desde su administrador de Ecwid, vaya a Sitio web y haga clic en Editar sitio.
2. En la sección Secciones del sitio, haga clic en Encabezado y menú.
3. En la pestaña Contenido, haga clic en Menú de navegación.
4. Puede hacer clic en el enlace existente para editarlo, o bien puede crear un nuevo enlace haciendo clic en + Añadir elemento de menú.
5. (opcional) Puede cambiar el orden de los enlaces, arrástrelos como quiera.
6. Haga clic en el elemento del menú para personalizarlo. En el campo Nombre, escriba un nombre que sus clientes entiendan fácilmente. Por ejemplo, Información sobre la empresa, Llámenos, etc.
7. Seleccione la acción que se ejecutará al hacer clic:
   • Desplazarse al sección del sitio: el cliente será redirigido a uno de los secciones 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.
8. Haga clic en Atrás, luego en Atrás otra vez, y luego en Diseño.
9. En la sección Diseño, seleccione cómo desea mostrar su menú de navegación.
10. Haga clic en 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:

1. Desde el panel de administración de Ecwid, vaya a Sitio web y haga clic en Editar sitio.
2. En el menú de la izquierda, haga clic en Encabezado y menú → Menú de navegación y seleccione + Añadir menú.
3. Asigne al elemento un nombre descriptivo que indique a los clientes que es el enlace a su tienda.
4. Haga clic en la lista desplegable Acción al hacer clic y seleccione Ir a la tienda.
5. 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.
6. Haga clic en Guardar y publicar.

Añadir enlaces de acción

Puede añadir enlaces de acción en algunas secciones del Instant Site (por ejemplo, «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:

1. Desde el panel de administración de Ecwid, vaya a Resumen → Gestionar Instant Site → Editar sitio (o Sitio web → Editar sitio).
2. Haga clic en la sección.
3. En la pestaña Contenido del sección, haga clic en Añadir enlace de acción.
   
   La sección de portada tiene los botones Acción principal y Acción secundaria en su lugar.
4. Escriba el Título. Será el texto del enlace.
5. Seleccione la Acción al hacer clic: Desplazarse al sección del sitio, Abrir página, Redactar correo electrónico o Llamar por teléfono.
6. Elija el sección del sitio, escriba la URL o especifique el número de teléfono o correo electrónico.
7. (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 la sección «Contacto»:

Configurar las secciones de la tienda

Hay dos secciones que pueden indicar a los clientes dónde acceder a la tienda en el Instant Site: Tienda y Categorías raíz. Por defecto, solo la sección Tienda está presente en la lista Secciones de página de inicio:

La sección Tienda incluye todos los productos que asignados a la categoría de la página del escaparate de la tienda (en inglés). Este sección 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 Tienda. 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 la sección especial Categorías raíz. Este sección contendrá todas las categorías raíz que tenga.

Para añadir la sección Categorías raíz:

1. Desde el panel de administración de Ecwid, vaya a Sitio web → Editar sitio.
2. Haga clic en Añadir sección.
3. En la página que se abra, desplácese hasta Productos.
4. Haga clic en la sección Comprar por categorías para que aparezca en la lista Sección de la página de inicio:

Puede configurar cómo se mostrarán las secciones Tienda y Categorías raíz en la página de inicio del Instant Site. Para hacerlo, vaya a la página Diseño en el panel de administración de Ecwid. En el editor del sitio, también puede cambiar el diseño de estos secciones (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 secciones de la tienda en el editor del sitio:

1. Desde el panel de administración de Ecwid, vaya a Sitio web → Editar sitio.
2. Haga clic en el sección.
3. 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.).

Añadir una presentación promocional al Instant Site

La presentación promocional, o carrusel, muestra una imagen grande cada vez como una presentación de diapositivas automática o manual. También contiene un pequeño fragmento de texto y el botón de llamada a la acción. La presentación promocional es una forma estupenda de mostrar en detalle productos concretos, presentar las marcas que vende, destacar una cartera de obras de arte o explicar por qué los clientes deben elegir su marca.

Supongamos que quiere destacar las marcas que vende.

Para añadir una presentación promocional a su versión Ecwid Instant Site de nueva generación:

1. Desde su panel de administración de Ecwid, vaya a Sitio web → Editar sitio.
2. Haga clic en + Añadir sección.
3. En el menú de la izquierda, haga clic en Presentación promocional y seleccione la plantilla.
4. Haga clic en el nombre de la diapositiva en el menú de la izquierda para sustituir el contenido predeterminado con sus imágenes y textos. Supongamos que quiere destacar las marcas que vende. En nuestro ejemplo, las nuevas imágenes muestran diferentes marcas que la tienda tiene para ofrecer.
5. En la sección Enlace de acción del menú lateral izquierdo, haga clic en el botón para cambiar su nombre y especificar a dónde debe redirigir a los visitantes. Dado que en nuestro ejemplo se trata de la presentación promocional de las marcas, el enlace de cada diapositiva llevará a su propia categoría de marca específica.
6. Para cambiar la apariencia del contenido de las diapositivas, vaya a la pestaña Diseño:
   

   

   En la pestaña Diseño, puede alinear el texto cambiando el diseño de la diapositiva, desactivar y activar la presentación automática, añadir superposición para las fotos, cambiar la fuente y la letra, y también ocultar el título, la descripción y el botón.

¡Eso es todo! Ahora la barra de promociones aparecerá en la parte superior de la página principal de su Instant Site:

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 las secciones individualmente desde la pestaña Diseño del sección. 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 las secciones 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 la sección)
• Fuentes del texto de cuerpo (las fuentes en los párrafos de texto, textos de botones y subtítulos)

La configuración global de fuente que aplique en el editor de Instant Site solo se usa para el sitio web en sí, incluyendo las secciones 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 (en inglés). 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:

1. Desde el panel de administración de Ecwid, vaya a Sitio web → Editar sitio.
2. Haga clic en Configuración → Fuentes y estilos.
3. 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.
4. Para aplicar estilos, haga clic en Ajustes avanzados y escriba el código CSS:
   

   

Adaptar la vista móvil de Instant Site

Puede elegir cómo se ajustará la imagen de portada de su Instant Site a las pantallas de los móviles.

Hay dos opciones disponibles:

• La portada de su sitio ocupa toda la pantalla del móvil. En este caso, la imagen se recorta y el texto del sitio aparece sobre ella.
• La portada de su sitio web se ajusta a la anchura de la pantalla. En este caso, la portada permanece totalmente visible y se muestra en la parte superior de la pantalla con el texto del sitio colocado debajo.

Para configurar la visualización de la imagen de portada en el móvil:

1. Desde su administrador de Ecwid, vaya a Sitio web → Editar sitio.
2. En Secciones de página de inicio, haga clic en Portada y vaya a la pestaña Diseño.
3. (opcional) Elija un diseño de portada.
   
   El ajuste de la visualización de la imagen de portada en móviles está disponible para diseños de pantalla completa solamente.
4. Pulse Diseño móvil para seleccionar la opción de diseño:
   

   

5. (opcional) Cambie el estilo y el color del fondo si es necesario.
6. Haga clic en Publicar.

¡Eso es todo! Ahora puede ir y comprobar cómo se ve su sitio en diferentes dispositivos móviles.

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:

1. Desde el panel de administración de Ecwid, vaya a Configuración → General → Perfil de la tienda.
2. 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.
3. Haga clic en Guardar.

Para editar la dirección del sitio web:

1. Desde el panel de administración de Ecwid, vaya a Resumen → Gestionar Instant Site (o Sitio web → Dominio).
2. Haga clic en el botón Cambiar dirección.
3. Escriba el nombre que prefiera para la dirección web en el campo Usar nuestro subdominio.
4. Haga clic en Guardar.

En los planes de pago de Ecwid, también puede conectar su propio dominio.

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 (Sitio web → Editar sitio) y active la opción Mostrar banner de consentimiento de cookies:

Obtenga más información sobre notificaciones de cookies →