Esta guía explica cómo personalizar el código fuente, modificar el CSS, modificar la parte HEAD o BODY de un sitio web creado con Site Creator de Infomaniak.

Requisitos previos

• Acceder a Site Creator:
  • Haga clic aquí para acceder a la gestión de su producto en el Manager Infomaniak (¿necesita ayuda?).
  • Haga clic directamente en el nombre asignado al Site Creator correspondiente.
  • Haga clic en el botón Editar mi sitio para iniciar el editor:
    

Agregar código personalizado

Una vez en Site Creator:

1. Haga clic en Diseño en el menú lateral izquierdo.
2. Haga clic en Más parámetros.
3. Haga clic en Código personalizado en la parte inferior:
   
4. Ingrese código HTML, JavaScript (con sus etiquetas script) o CSS personalizado (con sus etiquetas style) - consulte más abajo algunos ejemplos.
5. Guarde los cambios en la parte inferior de la página.

Metadatos en HEAD & BODY

Para agregar código JavaScript o cualquier otro código en la parte HEAD o BODY del código fuente de su sitio:

1. Haga clic en Configuración en el menú lateral izquierdo.
2. Haga clic en SEO & Metadatos en la sección Configuración del sitio web:
   
3. Desplácese hasta Código personalizado.
4. Elija agregar debajo de las pestañas HEAD o debajo de BODY.
5. Guarde los cambios al final de la página:
   

Ejemplos de personalización CSS

Estos ejemplos permiten comenzar la personalización avanzada de las páginas del sitio web. Sin embargo, existe el riesgo de que, según los cambios realizados, ya no pueda acceder al editor, lo que le obligará a empezar de nuevo.

Personalizar el fondo del sitio web

Para colocar la imagen de su elección (que debe cargarse en la biblioteca de archivos) como fondo de la página y personalizar su visualización:

1. Vaya al punto 3 visible en la primera imagen al principio de esta guía.
2. Inserte el código <style> para indicar que desea modificar el código CSS,
3. luego body { para indicar que desea modificar el cuerpo de la página y el "{" para abrir el espacio que permite insertar los comandos,
4. luego background-image: url("../data/files/fond01.jpg"); con la ruta & el nombre exacto de la imagen cargada en la biblioteca sin olvidar el punto y coma para poder insertar el comando siguiente.
5. background-repeat: repeat; para repetir la imagen insertada.
6. background-attachment: fixed; para que la imagen de fondo permanezca fija incluso si el visitante desplaza la página hacia abajo o hacia arriba para leer su contenido.
7. } para cerrar el espacio de inserción abierto anteriormente.
8. </style> para indicar que el código termina aquí.

Espaciar las letras de todos los enlaces del sitio

Para espaciar (mucho) las letras entre sí en las palabras clicables (enlaces):

1. Vaya al punto 3 visible en la primera imagen al principio de esta guía.
2. Inserte el código (si aún no está presente) <style> para indicar que desea modificar el código CSS,
3. luego .container div a { para indicar que desea modificar los bloques de la página y, más específicamente, los enlaces (a) y el "{" para abrir el espacio que permite insertar los comandos,
4. luego letter-spacing:1em; disminuyendo el valor (0.9em por ejemplo) sin olvidar el punto y coma para poder insertar el siguiente comando o finalizar.
5. } para cerrar el espacio de inserción abierto anteriormente.
6. </style> para indicar que el código termina aquí.

Tome nota de estos otros ejemplos de código CSS para insertar en su sitio.

Esta guía se refiere a las "Aplicaciones" (o "módulos", "extensiones") disponibles en Site Creator Infomaniak según la versión que tenga, para crear un sitio web, un blog o una tienda en línea 100% personalizable, sin ningún conocimiento técnico.

Diferentes Aplicaciones

Además de los bloques de contenido que ofrecen diferentes diseños preformateados, también puede insertar bloques en forma de módulos, cada uno con una función específica:

1. Video
2. Reproductor de audio
3. Diapositivas de imágenes / presentación
4. Descarga de archivo
5. Ubicación en el mapa
6. Encuesta
7. Base de conocimientos
8. Preguntas y respuestas
9. Calendario
10. Calendly
11. Menú de subpáginas
12. Mapa del sitio (sitemap)
13. Agregar a Google
14. Código HTML personalizado
15. Formulario de contacto
16. Blog
17. Tienda
18. Lector de feed RSS
19. Menú de restaurante

Insertar un módulo en una página

Para insertar un módulo:

1. Haga clic aquí para acceder a la gestión de su producto en el Manager Infomaniak (¿Necesita ayuda?).
2. Haga clic directamente en el nombre asignado al Site Creator correspondiente.
3. Haga clic en el botón Editar mi sitio para iniciar el editor:
   

Una vez en Site Creator:

1. Haga clic en el botón Contenido en el menú lateral izquierdo.
2. Haga clic en Aplicaciones en la parte inferior y el contenido disponible se mostrará a la derecha.
3. Haga clic en una de estas aplicaciones para insertarla en la página:
   
4. Una vez insertado, pase el ratón sobre el módulo (o el bloque en sí según el módulo) para acceder a su configuración:
   

Módulo múltiple o módulo desaparecido

Si elimina uno de sus módulos (como el de la encuesta) ya configurado y desea deshacerlo, haga clic en Deshacer inmediatamente:

o

También puede volver a insertar el módulo que debería volver con su configuración anterior.

No puede insertar varios módulos del mismo tipo para personalizarlos de forma independiente.

Otras integraciones y widgets

Haga clic en el botón APLICACIONES en la barra lateral izquierda de Site Creator:
‍

Ejemplo: insertar una cuenta atrás

Para añadir un contador que permita mostrar una cuenta atrás:

1. En el menú lateral izquierdo, haga clic en el botón Contenido.‍
2. Haga clic en Objetos en la lista y el contenido disponible se mostrará a la derecha.
3. Haga clic en uno de estos objetos para insertarlo en la página:
   
4. Una vez insertado, pase el ratón sobre el módulo para acceder a su configuración:
   

Esta guía explica cómo agregar y personalizar un botón en su página Site Creator de Infomaniak, incluyendo un botón fijo que permite volver al inicio de la página.

Requisitos previos

• Acceder a Site Creator:
  • Haga clic aquí para acceder a la gestión de su producto en el Manager Infomaniak (¿Necesita ayuda?).
  • Haga clic directamente en el nombre asignado al Site Creator correspondiente.
  • Haga clic en el botón Editar mi sitio para iniciar el editor:
    

Agregar un enlace en forma de botón

Para agregar un botón (que dirige a la dirección URL de su elección al hacer clic en él):

1. Redacte el texto del botón.
2. Seleccione el texto.
3. Presione los puntos ••• a la derecha de la barra de herramientas para acceder a las opciones adicionales.
4. Luego, haga clic en el ícono de la cadena para abrir la sección que le permitirá especificar el tipo de enlace y las opciones asociadas:
   
5. Configure la página de destino y la apariencia del botón.
6. Guarde los cambios en la parte inferior de la pestaña:
   
7. Visualice el botón en su página.
8. Haga clic en el botón para volver al editor si es necesario:
   

Agregar un botón “Volver arriba”

Para agregar y personalizar un botón que devuelve al visitante al inicio de su página Site Creator tan pronto como la página se desplace:

1. Haga clic en el botón Diseño en el menú lateral izquierdo.
2. Haga clic en Más parámetros.
3. Active la opción para mostrar el botón de volver arriba.
4. Ajuste el espaciado desde el borde derecho.
5. Guarde los cambios al final de la página:
   

Actualice la página si es necesario para ver el cambio:

Consulte esta otra guía sobre una solución alternativa.

Esta guía le ayuda a personalizar un sitio web creado con Site Creator de Infomaniak.

Requisitos previos

• Acceder a Site Creator:
  • Haga clic aquí para acceder a la gestión de su producto en el Gestor de Infomaniak (¿Necesita ayuda?).
  • Haga clic directamente en el nombre asignado al Site Creator correspondiente.
  • Haga clic en el botón Editar mi sitio para iniciar el editor:
    

Cambiar los colores del sitio

Para gestionar los temas, colores y fuentes en Site Creator:

1. Haga clic en el botón Diseño en el menú lateral izquierdo.
2. Haga clic en Colores del sitio:
   

Puede elegir entre las paletas de colores disponibles o crear su propio juego de colores personalizado.

Debajo hay parámetros más específicos, donde puede especificar a qué elementos debe aplicarse un color:

Gestionar el fondo (imagen/color) de los bloques

En la página de edición de su sitio, pase el ratón sobre un bloque y haga clic en la rueda dentada para acceder a la configuración:

Cargar una plantilla de sitio web

Puede modificar el diseño completo de su sitio web cambiando el tema del mismo y decidiendo qué se debe sobrescribir o no en el sitio actual durante el cambio:

1. Haga clic en el botón Diseño en el menú lateral izquierdo.
2. Haga clic en Selección del tema:
   

Es aquí donde puede elegir entre los temas de sitios web disponibles:

Cuando haya encontrado su nuevo tema, haga clic en Instalar y luego podrá elegir las partes del nuevo modelo que desea importar (por defecto, solo los colores, fuentes o estilo de menú) para evitar que el contenido de su sitio web se sobrescriba.

Si su sitio web es nuevo, puede elegir más opciones al importar.

Cambiar las fuentes del sitio web

Para ello:

1. Haga clic en el botón Diseño en el menú lateral izquierdo.
2. Haga clic en Fuentes:
   

Puede cambiar fácilmente las fuentes principales del sitio web, siendo la primera fuente utilizada para los encabezados y la segunda fuente para el contenido.

Debajo hay parámetros más específicos, donde puede especificar a qué elementos debe aplicarse una fuente.

No es posible importar o agregar una fuente personalizada, pero puede modificar el proveedor (la lista de fuentes será la misma) por razones de privacidad, por ejemplo:

1. Haga clic en Configuración en el menú lateral izquierdo.
2. Haga clic en Configuración general
3. Elija el proveedor de fuentes:
   

Resolver un problema de texto ausente/invisible

Si tiene la impresión de que su bloque de texto ha desaparecido o es invisible

entonces seleccione todo el contenido del sitio web (ctrl + a o cmd + a en Mac); si ve que su contenido está allí, probablemente significa que los parámetros del bloque están configurados para un fondo oscuro:

En este caso, vaya a los parámetros del bloque y asegúrese de que la opción "Fondo oscuro" no esté marcada. Esto debería resolver este problema:

Esta guía explica cómo gestionar la parte del logotipo, encabezado y pie de página (footer) en Site Creator de Infomaniak.

Requisitos previos

• Acceder a Site Creator:
  • Haga clic aquí para acceder a la gestión de su producto en el Administrador de Infomaniak (¿Necesita ayuda?).
  • Haga clic directamente en el nombre asignado al Site Creator correspondiente.
  • Haga clic en el botón Editar mi sitio para iniciar el editor:
    

Agregar un logotipo de sitio web

Una vez en Site Creator:

1. Haga clic en el botón Configuración en la barra lateral izquierda.
2. Haga clic en Logotipo/título.​​
3. Cargue una imagen y elija si el nombre del sitio también debe mostrarse al lado.
4. Guardar los cambios:
   

Configuración del logotipo

1. Haga clic en el botón Diseño en la barra lateral izquierda.
2. Haga clic en Diseñador de menú​.
3. Haga clic en Título/logotipo.
4. Luego ajuste los espacios y colores.
5. Guardar los cambios:
   

Mostrar el logotipo en el centro

En el mismo lugar que arriba (también puede acceder a él pasando el ratón por encima del encabezado y su logotipo), active la opción para mostrar el logotipo en una línea separada lo que centrará el logotipo del sitio:

Ocultar el logotipo (+encabezado y pie de página)

Para crear una página sin logo que no tenga ni encabezado (por lo tanto, ningún menú visible) ni pie de página, debe definirla como Página de inicio (es decir, "Landing page"; tenga en cuenta que esto no cambia el orden de las páginas) mediante un botón que se encuentra aquí:

1. Haga clic en el botón Configuración en la barra lateral izquierda.
2. Haga clic en Lista de páginas.
3. Pase el ratón sobre una página en la estructura existente y haga clic en el icono de engranaje que aparece al pasar el ratón.
4. ​Active la opción "Página de inicio" en la parte inferior para ocultar encabezados y pie de página:
   

Esta guía explica cómo modificar ciertos detalles de un sitio creado con Site Creator de Infomaniak.

Requisitos previos

• Acceder a Site Creator:
  • Haga clic aquí para acceder a la gestión de su producto en el Manager Infomaniak (¿necesita ayuda?).
  • Haga clic directamente en el nombre asignado al Site Creator correspondiente.
  • Haga clic en el botón Editar mi sitio para iniciar el editor:
    

Cambiar el nombre del sitio web

Haga clic en el botón Configuración en la barra lateral izquierda y luego en Título del sitio:

Datos de la empresa

Haga clic en el botón Configuración en la barra lateral izquierda y luego en Datos de contacto bajo Configuración del sitio web:

Esta guía trata sobre la configuración, en Site Creator de Infomaniak, del icono que se muestra en la barra de favoritos de un navegador web, el favicon.

Prólogo

• Los formatos recomendados por Microsoft para sus navegadores son 16 x 16, 32 x 32 y 48 x 48.
• Apple, por su parte, recomienda que la dimensión del favicon sea de 180 x 180.

Definir el favicon de Site Creator

Requisitos previos

• Acceder a Site Creator:
  • Haga clic aquí para acceder a la gestión de su producto en el Manager Infomaniak (¿Necesita ayuda?).
  • Haga clic directamente en el nombre asignado al Site Creator correspondiente.
  • Haga clic en el botón Editar mi sitio para iniciar el editor:
    

Para definir un nuevo favicon:

1. Haga clic en el botón Configuración en el menú lateral izquierdo.
2. Haga clic en Configuración general.
3. Desplácese hacia abajo hasta la sección Favicon:
   
4. Elija el favicon en su disco duro.
5. Guarde los cambios al final de la página.
6. Vea una vista previa del resultado en su navegador (si es necesario en una nueva ventana en modo de navegación privada, por ejemplo):
   

Esta guía explica cómo agregar y configurar un formulario de contacto en su sitio creado con Site Creator de Infomaniak.

Crear un formulario de contacto personalizado

Requisitos previos

• Acceder a Site Creator:
  • Haga clic aquí para acceder a la gestión de su producto en el Manager Infomaniak (¿Necesita ayuda?).
  • Haga clic directamente en el nombre asignado al Site Creator correspondiente.
  • Haga clic en el botón Editar mi sitio para iniciar el editor:
    

Puede crear uno o varios formularios que permitan a sus visitantes escribir un mensaje, inscribirse en una actividad, en resumen, completar cualquier tipo de formulario en línea con o sin archivo adjunto:

1. Haga clic en el botón Contenido en el menú lateral izquierdo.
2. Haga clic en Aplicaciones al final de la lista.
3. Haga clic en Creador de formularios:
   
4. Construya su formulario utilizando los elementos a la izquierda.
5. Guarde al final de la página:
   

Una vez creado el primer formulario, puede insertarlo haciendo clic en ‍ en la ubicación de su elección y seleccionándolo:

El formulario creado se insertará en su página:

Parámetros del formulario de contacto

Puede personalizar el mensaje de agradecimiento, la posible página de redirección después de la presentación, la dirección de correo electrónico utilizada, agregar un captcha (recomendado), etc.

Para ello, pase el ratón sobre el módulo para acceder a su configuración:

Haga clic, si es necesario, en el formulario que desea editar y luego en las Propiedades del formulario:

También puede eliminar el formulario creado para que ya no se proponga:

Esta guía explica cómo crear galerías con sus fotos en Site Creator de Infomaniak.

Crear una galería de fotos

Requisitos previos

• Acceder a Site Creator:
  • Haga clic aquí para acceder a la gestión de su producto en el Manager Infomaniak (¿Necesita ayuda?).
  • Haga clic directamente en el nombre asignado al Site Creator correspondiente.
  • Haga clic en el botón Editar mi sitio para iniciar el editor:
    

Una vez en Site Creator:

1. Haga clic en el botón Configuración en el menú lateral izquierdo, aparece la lista de sus páginas.
2. Haga clic en el botón Agregar una página debajo del árbol existente:
   
3. Active Mostrar más opciones para elegir el tipo de página GALERÍA DE FOTOS:
   
4. Confirme, la nueva página con el módulo de galería de fotos se muestra en pantalla:
   

Configurar la galería de fotos

Para ello:

1. Pase el ratón sobre el módulo para acceder a los parámetros de la galería.
2. Haga clic en Editar:
   

Álbumes de fotos

Puede crear galerías de fotos adicionales para sus diferentes álbumes:

 

Modificar el orden de las fotos

Cuando su galería esté creada, cada nueva foto que suba desde su ordenador se añadirá al final de la lista de fotos; puede modificar fácilmente este orden arrastrando las fotos con el ratón cuando edite una galería:

 

Además, puede agregar una descripción a cualquiera de sus fotos, debajo de cada imagen, notará el campo "Descripción de la imagen", comience a escribir su descripción y presione el botón verde para guardar los cambios:

Agregar un widget de desplazamiento de imágenes

Para configurar uno o más widgets Slider dinámico, en los que una o más fotos se deslizarán lateralmente (sin ningún vínculo con las galerías de fotos descritas anteriormente):

1. Haga clic en el botón Aplicaciones en el menú lateral izquierdo.
2. Haga clic en Slider:
   
3. Configure el widget según sus preferencias.
4. Inserta el widget configurado en el lugar deseado haciendo clic en Contenido luego Aplicaciones y elige Slider:
   
5. Seleccione el Slider creado para insertarlo en la página:
   

Esta guía explica cómo agregar y configurar un módulo de blog en su sitio creado con Site Creator de Infomaniak.

Prólogo

• No existe una funcionalidad que permita la gestión de múltiples usuarios en la sección Blog (ni en Site Creator).
• Varios usuarios de una misma Organización que tengan acceso a Site Creator (a través de su autorización de acceso al alojamiento web) podrán publicar en el blog, pero la identidad del autor será la misma para todos.
• Es posible obtener ayuda de la inteligencia artificial Euria, como ocurre en el resto de las páginas de Site Creator.
  • Tome nota de esta otra guía sobre el modelo utilizado por el asistente de redacción y las responsabilidades de cada uno.

Comenzar un blog en Site Creator

Requisitos previos

• Acceder a Site Creator:
  • Haga clic aquí para acceder a la gestión de su producto en el Gestor de Infomaniak (¿Necesita ayuda?).
  • Haga clic directamente en el nombre asignado al Site Creator correspondiente.
  • Haga clic en el botón Editar mi sitio para iniciar el editor:
    

Una vez en Site Creator, en la página donde desea insertar sus futuros artículos de blog:

1. Haga clic en el botón + situado debajo de un bloque ya insertado:
   
2. Haga clic en Aplicaciones (en la pestaña Contenido que se ha abierto cuando ha hecho clic para agregar el bloque visual).
3. Haga clic en el módulo Blog:
   
   • Si es la primera vez que inserta este módulo, obtendrá el siguiente bloque visual con un ejemplo de primer artículo publicado (pase al punto 4 a continuación):
     
   • Si ya ha probado el módulo Blog anteriormente y lo ha eliminado de sus páginas, obtendrá esto:
     
     1. Presione la opción superior para insertar el bloque principal.
     2. Presione la segunda opción para mostrar un bloque con los 3 últimos artículos publicados solo si ya tiene un bloque principal insertado en otro lugar del sitio.‍
4. Una vez insertado el módulo Blog, pase el ratón sobre el bloque y haga clic en el botón de menú de tres líneas horizontales ☰ Blog y luego en ‍ Nuevo artículo para insertar un artículo en blanco:
   

Publicar contenido utilizando la inteligencia artificial

Para redactar contenido y, si es necesario, mejorar sus redacciones:

1. Elija una imagen para la cabecera, introduzca un título, un subtítulo opcional, el cuerpo del artículo con diferentes formatos:
   
2. Presione el signo + en el texto del artículo o la tecla de tabulación de su teclado:
   
3. Seleccione el contenido y haga clic en él para hacer aparecer una barra de herramientas de formato de texto.
4. Desde esta barra de herramientas, acceda a las posibilidades ofrecidas por la IA (traducción, reformulación, corrección, etc.):
   
5. Publique haciendo clic en el botón Publicar (o guarde el borrador para más tarde).

Editar el blog

Para activar los comentarios, las notificaciones por correo electrónico, la disposición en lista y la clasificación de estos, etc.:

1. Haga clic en Aplicaciones en el menú lateral izquierdo.
2. Haga clic en Blog.
3. Haga clic en Configuración y ajuste sus preferencias sin olvidar guardar al final de la página:
   

Editar los artículos del blog

Independientemente del lugar donde se encuentre al editar su sitio, basta con ir al menú Aplicaciones en la parte inferior izquierda y luego hacer clic en Blog:

Para editar el contenido de su artículo, haga clic en Explorar artículos en el menú lateral izquierdo, pase el ratón por encima y haga clic en el icono de lápiz ✎:

Para configurar (leer a continuación) uno de los artículos, pase el ratón por encima y haga clic en la rueda dentada:

Etiquetar, archivar o hacer expirar un artículo

Un artículo de blog puede desaparecer de su lista de artículos, ya sea dándole una fecha de expiración o archivándolo de inmediato. También es posible agregar una etiqueta (etiqueta) que será clicable para el visitante y facilitará así la navegación dentro de las publicaciones:

No olvide guardar los cambios al final de la página.

Fecha de los artículos

Por defecto, los nuevos artículos de blog se agregarán con la fecha "de hoy" pero es posible modificarla:

1. Pase el ratón por encima y haga clic en el enlace de la fecha (directamente en el artículo):
   
2. Elija una nueva fecha.

Esta guía para Site Creator de Infomaniak aborda el tema de las cookies del navegador.

Prólogo

• Por defecto, cuando su sitio web es nuevo, no se debe almacenar ninguna cookie en los dispositivos de sus visitantes, no hay funcionalidad de seguimiento para publicidades o marketing.
• Como administrador del sitio web, se almacenan ciertos datos en sus propias cookies (como la información que indica que es administrador del sitio web).
• Si agrega aplicaciones/módulos integrados a su sitio web, se pueden usar cookies; ejemplo con el Formulario de encuesta: si agrega un módulo de encuesta a su sitio web, usará cookies cuando el visitante del sitio web vote (para recordar que ya ha votado).

Notificación para el visitante

Requisitos previos

• Acceder a Site Creator:
  • Haga clic aquí para acceder a la gestión de su producto en el Manager Infomaniak (¿Necesita ayuda?).
  • Haga clic directamente en el nombre asignado al Site Creator correspondiente.
  • Haga clic en el botón Editar mi sitio para iniciar el editor:
    

Puede activar un mensaje de consentimiento de cookies que se mostrará en una pequeña ventana emergente en la parte inferior de la pantalla para todos los nuevos visitantes de su sitio:

1. Haga clic en el botón Configuración en el menú lateral izquierdo.
2. Haga clic en Datos de contacto bajo Configuración del sitio web.
3. Active la opción de información sobre cookies para configurar el breve mensaje y la URL para información adicional.
4. Ajuste el tipo de visualización ampliada o no (leer más abajo).
5. Guarde los cambios en la parte inferior de la página:
   ‍

Configuraciones adicionales

El mensaje de consentimiento puede ajustarse por defecto o de manera ampliada, cuando haga clic en Visualización. El resultado obtenido es el siguiente:

• por defecto:
  
• ampliada:
  

Esta guía explica cómo no publicar directamente los cambios en una página de Site Creator de Infomaniak.

Prólogo

• El modo borrador permite no publicar los siguientes cambios:
  • agregar un nuevo bloque de contenido a través del menú Contenido
  • modificación visual o textual de un bloque de contenido
  • eliminación de un bloque de contenido
• El modo borrador no se aplica a:
  • cambios globales de diseño, a través del menú Diseño (colores, fuentes ...)
  • modificaciones de contenidos relacionados con aplicaciones (preguntas/respuestas, comercio electrónico ...)
  • modificaciones de parámetros globales, a través del menú Configuración (Páginas, idiomas ...)
  • subpáginas de la página que está despublicando

1. Guardar sin publicar

Requisitos previos

• Acceder a Site Creator:
  • Haga clic aquí para acceder a la gestión de su producto en el Administrador de Infomaniak (¿Necesita ayuda?).
  • Haga clic directamente en el nombre asignado al Site Creator correspondiente.
  • Haga clic en el botón Editar mi sitio para iniciar el editor:
    

Puede pasar una página al modo borrador para realizar cambios de texto u otros en el contenido de una página que no serán visibles en directo, hasta que decida volver a poner el sitio en modo de publicación directa:

1. Haga clic en el botón ... situado en la parte inferior del menú lateral izquierdo, para desarrollar las opciones de publicación y vista previa.
2. Haga clic en En Directo para cambiar al modo No Publicado:
   
3. Actualmente, el modo amarillo mostrado en la parte inferior indica que todos sus cambios (solo en esta página) no se verán en directo (a diferencia del modo En directo / En vivo) porque no se publicarán automáticamente:
   
   • Los cambios se guardarán en un borrador incluso si sale de la página o del editor...
   • En modo borrador, puede trabajar en la página, agregar texto, guardarlo, salir, volver para continuar editándolo, y este trabajo no se publicará hasta que lo decida expresamente (leer más abajo):
     
   • Según los cambios realizados (por ejemplo, agregar un bloque de contenido), piense en editar el texto para validar sus cambios y guardarlos.
   • Para verificar y confirmar que sus cambios en curso no se publican a medida que avanza, simplemente vaya a la dirección de su sitio desde otra página del navegador en modo incógnito, por ejemplo.

2. Publicar los cambios o eliminar el borrador

Puede salir del modo Borrador para volver a las publicaciones instantáneas:

1. Cuando el modo No publicado está activo, haga clic en el botón amarillo del modo No publicado para mostrar un panel de configuración:
   
2. El panel de configuración se abre para que pueda:
   1. publicar sus modificaciones,
   2. o eliminar el borrador en curso y volver al estado inicial de la página:
      

Ejemplo

1. Con el modo En directo / Live (visible en la parte inferior de la pantalla) un cambio es directamente visible para los visitantes de la página.
2. Con el modo No publicado / borrador (identificable por un símbolo amarillo en la parte inferior de las páginas pasadas a este modo) sus modificaciones no son visibles en directo.
3. Salga de la página para trabajar en otra página, el modo vuelve al modo predeterminado, es decir, el modo En directo porque la página no es la misma y el modo solo se aplica a las páginas seleccionadas.
4. Vuelva a la página guardada como borrador, un símbolo en la parte inferior de la página siempre indica el modo borrador activado.
5. Haga clic en él para elegir publicar o eliminar las modificaciones y restaurar la página tal como estaba antes de sus modificaciones en modo borrador.

Esta guía detalla el uso de los medios en Site Creator de Infomaniak.

Tenga en cuenta que también es posible insertar otros elementos, como por ejemplo un formulario de suscripción a la Newsletter de Infomaniak.

Requisitos previos

• Acceder a Site Creator:
  • Haga clic aquí para acceder a la gestión de su producto en el Manager de Infomaniak (¿necesita ayuda?).
  • Haga clic directamente en el nombre asignado al Site Creator correspondiente.
  • Haga clic en el botón Editar mi sitio para iniciar el editor:
    

Agregar una imagen

Los medios se gestionan en la biblioteca de archivos:

• Agregue un nuevo bloque de contenido:
  
• Los medios pueden luego ser reemplazados o complementados:
  

Pero también:

1. Haga clic en el botón Contenido en el menú lateral izquierdo.
2. Haga clic en Objetos en la lista para insertar una imagen única.
3. Haga clic en el bloque IMAGEN a la derecha:
   
4. Una vez agregada la imagen, también puede hacer de ella un enlace clicable o modificar su tamaño en el editor de imágenes:
   

También puede agregar imágenes como módulo Galeria de fotos.

Cambiar de imagen

Para reemplazar una imagen insertada, que adoptará las características de la anterior:

1. Haga clic en una imagen para editarla.
2. Haga clic en el botón tipo Marco de foto en la miniatura de la imagen para poder seleccionar una nueva imagen que reemplazará a la anterior:
   

Agregar un video

Para agregar un video:

1. Haga clic en el botón Contenido en el menú lateral izquierdo.
2. Haga clic en Objetos en la lista.
3. Haga clic en el bloque VIDEO a la derecha para insertar un video en pantalla completa:
   

También puede aplicar un enlace a una imagen utilizando un video de YouTube como URL: esto creará automáticamente un ícono de tipo PLAY que al hacer clic abrirá el video en una ventana tipo lightbox.

Agregar un archivo de audio

Para agregar un archivo de sonido:

1. Haga clic en el botón Contenido en el menú lateral izquierdo.
2. Haga clic en Aplicaciones abajo.
3. El contenido disponible se muestra a la derecha.
4. Haga clic en el reproductor de audio para insertarlo en la página y elegir los archivos:
   

Puede personalizarlo de manera avanzada a través de la edición HTML.

Agregar un archivo para descargar

Para ofrecer fácilmente un archivo para descargar:

1. Haga clic en el botón Contenido en el menú lateral izquierdo.
2. Haga clic en Aplicaciones abajo.
3. El contenido disponible se muestra a la derecha.
4. Haga clic en el widget Descarga de archivo para insertarlo en la página:
   
5. Seleccione en la biblioteca el archivo que podrá ser descargado por sus visitantes.

Este tutorial presenta la creación de menús de navegación para su sitio realizado con Site Creator de Infomaniak, así como su composición, estilos y parámetros.

Requisitos previos

• Acceder a Site Creator:
  • Haga clic aquí para acceder a la gestión de su producto en el Manager Infomaniak (¿necesita ayuda?).
  • Haga clic directamente en el nombre asignado al Site Creator correspondiente.
  • Haga clic en el botón Editar mi sitio para iniciar el editor:
    

Los diferentes menús de navegación

Las diferentes páginas que componen su sitio pueden ser accesibles dentro de uno o varios menús de navegación:

1. Haga clic en el botón Configuración en el menú lateral izquierdo.
2. Por defecto, aparece la lista de sus páginas, clasificadas en 2 secciones principales: MENÚ PRINCIPAL y LEGAL:
   

Pero puede agregar varios.

Estos menús con las páginas que contienen se utilizan luego en diferentes lugares de su sitio, según el tema elegido, entre otros:

• A menudo encontrará el menú principal colocado en la parte superior de la página:
  
• y los otros menús se propondrán automáticamente en el pie de página:
  

Administrar los menús

Agregar un nuevo menú

Para ello:

1. Haga clic en el botón Configuración en el menú lateral izquierdo.
2. Pase el cursor sobre un título de menú en la estructura existente.
3. Haga clic en el ícono "+" que aparece al pasar el cursor:
   

Podrá gestionar la presencia del menú en el mapa del sitio o eliminarlo (él y todas sus páginas):

1. Haga clic en el botón Configuración en el menú lateral izquierdo.
2. Pase el ratón sobre un título de menú en la estructura existente y haga clic en el icono de engranaje que aparece al pasar el ratón:
   
3. Seleccione las configuraciones deseadas y valide al final de la página:
   

Consulte esta otra guía para no mostrar ningún menú.

Crear un subelemento en un menú

Para ello:

1. Haga clic en el botón Configuración en el menú lateral izquierdo.
   • Aparece la lista de sus páginas.
2. Con el ratón, mueva una página ligeramente hacia la derecha debajo de otra página:
   
   • Se convertirá en una subpágina y su menú en el sitio podrá mostrar la estructura creada:
     
   • También tenga en cuenta el truco a continuación...

Título de menú no clicable

Si es necesario, elija no hacer clicable el primer elemento de un menú con elementos de submenú (como se configuró anteriormente):

1. Haga clic en el botón Configuración en el menú lateral izquierdo.
2. Haga clic en Configuración general para modificar esta configuración en Opciones de submenú:
   

Elemento de menú que contiene un enlace a otro sitio web

Para ello:

1. Haga clic en el botón Configuración en el menú lateral izquierdo.
   • Aparece la lista de sus páginas.
2. Haga clic en el botón Agregar página debajo de la estructura existente:
   
3. Introduzca un nombre de página y haga clic en Mostrar más opciones.
4. Elija la redirección de URL para especificar el destino al hacer clic:
   

Menú superior adicional

Para mostrar una "barra de menú" en la parte superior de su página:

1. Haga clic en el botón Diseño en el menú lateral izquierdo.
2. Haga clic en Más parámetros.
3. Active la Barra de menús de encabezado:
   
4. Una vez activada, puede personalizarla a través del enlace Configuración en el mismo lugar:
   

Estilos de menú

Para gestionar los diferentes estilos de menú:

1. Haga clic en el botón Diseño en el menú lateral izquierdo.
2. Haga clic en Editor de menú:
   
3. Luego en Configuración:
   
4. Podrá decidir, entre otras cosas, la ubicación de sus menús (en el lado izquierdo de la página o en la parte superior, fijo o móvil, tipo "menú hamburguesa ☰" a la derecha o normal, etc.):
   

Cambiar el color del menú "hamburguesa" (☰)

Si este botón de menú de tres líneas horizontales ☰ aparece, por ejemplo, en blanco sobre blanco en un dispositivo móvil:

1. Haga clic en el botón Diseño en el menú lateral izquierdo.
2. Haga clic en Editor de menú.
3. Haga clic en Título del menú / logo.
4. Ajuste el color del texto:
   

Adoptar un nuevo tema de menú

Cambie completamente de estilo predeterminado gracias a los temas en la parte superior del submenú:

• Haga clic en Plantillas de menú (siempre bajo Diseño, luego Editor de menú):
  

Menú fijo

La mayoría de los menús propuestos se moverán con el contenido de la página.

• El menú desaparece si se desplaza hacia abajo en la página:
  
  
   
• Puede definir un menú que siempre debe estar fijo en el borde superior (con diferentes opciones visuales):
  
  

Para activar o desactivar el menú fijo:

1. Haga clic en Diseño.
2. Haga clic en Editor de menú.
3. Haga clic en Configuración principal.
4. Seleccione En la cabecera en el cuadro Tipo de menú.
5. El botón de alternancia (toggle switch) Fijo en la parte superior se muestra más abajo y puede activarse.
6. Haga clic en Guardar:
   

Algunos modelos de menú (como el #3 y el #16) aplican directamente los ajustes óptimos para un menú fijo.

Insertar sus menús en el cuerpo de la página

Un módulo Menú de subpáginas permite la inserción de sus menús y submenús en cualquier lugar de su página:

• Añada el elemento desde las Apps:
  

El módulo mapa del sitio muestra todos los menús y todas sus páginas en un solo bloque.

Definir la URL de la página

Por defecto, si el nombre de su página es Contacto entonces la URL para acceder a ella será www.dominio.xyz/contacto.

Si más tarde cambia el nombre de la página a Hola entonces la URL será www.dominio.xyz/hola.

Para definir la URL personalizada de la página en la que se encuentra:

1. Haga clic en el botón Configuración en el menú lateral izquierdo.
2. Haga clic en SEO & Metadatos (bajo Configuración de esta subpágina).
3. El primer campo en la parte superior permite definir la dirección de la página. Todo espacio se convertirá en un guion y se deben evitar los caracteres especiales, acentos, símbolos, etc.:
   

Si se registran cambios de URL durante la creación del sitio y un menú ya contiene un enlace a la página en cuestión, se adaptará de manera dinámica.

Esta guía se refiere a la función de deshacer en el Creador de Sitios de Infomaniak.

Preámbulo

• No es posible realizar ninguna copia de seguridad/restauración desde el Gestor de Infomaniak.
• Si, por ejemplo, elimina un bloque de contenido y desea restaurarlo, puede deshacer hasta las 20 últimas operaciones en el Creador de Sitios.

Deshacer una operación

Requisitos previos

• Acceder al Creador de Sitios:
  • Haga clic aquí para acceder a la gestión de su producto en el Gestor de Infomaniak (¿necesita ayuda?).
  • Haga clic directamente en el nombre asignado al Creador de Sitios correspondiente.
  • Haga clic en el botón Editar mi sitio para iniciar el editor:
    

Una vez en el Creador de Sitios:

1. Haga clic en el botón … situado en la parte inferior del menú lateral izquierdo del Creador de Sitios, para desarrollar las opciones de deshacer.
2. Haga clic en Deshacer y confirme la restauración (las flechas al lado permiten "navegar" entre las últimas copias de seguridad):
     
   

Esta guía explica cómo poner temporalmente fuera de línea un sitio creado con Site Creator de Infomaniak.

Prólogo

• Visibilidad pública: la página de mantenimiento solo se mostrará a sus visitantes.
  • No hay traducciones disponibles por el momento; la página de mantenimiento se mostrará únicamente en francés.
• Acceso administrador: al permanecer conectado al editor, mantiene un acceso completo a su sitio para visualizarlo y modificarlo a través de Site Creator.

Poner Site Creator en mantenimiento

Para desactivar temporalmente Site Creator:

1. Haga clic aquí para acceder a la gestión de su sitio en el Manager Infomaniak (¿necesita ayuda?).
2. Haga clic directamente en el nombre asignado al sitio correspondiente:
   
3. Haga clic en Gestionar ‍ en la parte superior de la página.
4. Haga clic en Activar el mantenimiento:
   
5. Confirme la operación.

Desactivar la página de mantenimiento

Para volver a poner el sitio en línea para sus visitantes:

• Repita la operación anterior, el menú permite desactivar el mantenimiento:
  

También puede desactivar el mantenimiento desde la página de gestión y desde el bloque de vista previa de su sitio:

Esta guía explica cómo conectar un sitio creado con Site Creator de Infomaniak a un nombre de dominio.

Requisitos previos

• La oferta Site Creator Free permite acceder al sitio a través de un nombre de dominio en el formato 123xyz.infomaniak.site…
  • Para conectar un nombre de dominio personalizado, primero debe pasar a una oferta superior:
    
• Las ofertas Site Creator Lite y Pro incluyen un nombre de dominio gratuito durante 1 año entre las extensiones .ch, .com, .fr, .org, .co.uk, .be, .de, .eu, .it, .es
• Si desea utilizar un dominio existente, este debe encontrarse en la misma Organización.

Conectar Site Creator a un nombre de dominio

Para conectar Site Creator (Lite o Pro) a un nombre de dominio:

1. Haga clic aquí para acceder a la gestión de su sitio en el Manager Infomaniak (¿Necesita ayuda?).
2. Haga clic directamente en el nombre asignado al sitio correspondiente.
3. Haga clic en Conectar mi sitio a un dominio para iniciar el asistente de configuración:
   
4. El asistente le propone crear un nuevo nombre de dominio o utilizar uno ya existente:
   
   • Si crea un nuevo nombre de dominio en esta ocasión, deberá volver a este asistente de configuración una vez finalizada la orden.
   • Si elige adjuntar un dominio entre los existentes en su Organización, el asistente le propone la lista de dominios y se puede crear un subdominio en esta ocasión:
     
5. Haga clic en el botón Siguiente.
6. Verifique la dirección elegida y luego haga clic en el botón para Confirmar:
   

Administrar el/los nombre(s) de dominio de Site Creator

Para administrar el o los nombre(s) de dominio utilizado(s) con Site Creator:

1. Haga clic aquí para acceder a la gestión de su sitio en el Manager Infomaniak (¿Necesita ayuda?).
2. Haga clic directamente en el nombre asignado al sitio correspondiente.

En la parte superior de la página se muestran los posibles mensajes sobre problemas relacionados con Site Creator y los dominios.

Más abajo, puede administrar sus dominios si los hay, haga clic en la flecha ‍ si es necesario:

Dominio temporal, dirección provisional, URL de previsualización…

Varios nombres de dominio pueden estar vinculados a Site Creator, eliminados o intercambiados e invertidos si es necesario.

Haga clic en el menú de acción ⋮ a la derecha del dominio correspondiente:

Sin embargo, la URL de vista previa, de tipo 123xyz.infomaniak.site y distinta en la lista de dominios de Site Creator, nunca podrá ser eliminada para el correcto funcionamiento de su sitio.

Esta guía se refiere a Site Creator y la posibilidad de crear enlaces a anclajes.

Prólogo

• Un ancla en diseño web es un enlace hipertexto que apunta a una posición específica en una página web, ya sea en la misma página o en una página diferente.
  • Cuando un usuario hace clic en un enlace de anclaje, es redirigido al lugar especificado (en principio, una indicación invisible colocada en el código fuente) de la página.
• Los anclajes son útiles para permitir a los usuarios navegar rápidamente a secciones específicas de una página web o incluso de otra página.
  • Mejoran la experiencia del usuario proporcionando un medio eficaz para encontrar y acceder a información precisa.

Ejemplo de ancla

Un ancla está situada (de manera invisible) al final de la FAQ. Se llama "end", por lo tanto, el siguiente enlace contiene simplemente el objetivo #end y sin otra indicación, un navegador web buscará este término en el código de la página donde nos encontramos y dirigirá al usuario hacia él: haga clic aquí para alcanzarlo!

Crear este tipo de enlace en Site Creator

Habitualmente, para crear un ancla en HTML, así es como proceder:

1. Identifique el lugar en su página donde desea crear un ancla (sección de texto, imagen u otro elemento).
2. Utilice la etiqueta <a> con el atributo href para especificar el objetivo del ancla:
   1. si el objetivo está en la misma página, utilice simplemente el ID del elemento (ver punto 3 a continuación)
      <a href="#chapter1">Ir al capítulo 1</a>
   2. si el objetivo está en otra página, especifique la URL completa de la página, seguida del ID del elemento objetivo (ver punto 3 a continuación)
      <a href="page2.html#chapter1">Ir al capítulo 1 en la página 2</a>
3. En la sección de su página donde desea que los usuarios sean redirigidos, agregue un elemento con el ID correspondiente:
   <div id="chapter1"> &nbsp; </div>
    

Cuando los usuarios hacen clic en el enlace "Ir al capítulo 1", la página se desplazará automáticamente hasta la sección con el ID "chapter1". Si el objetivo está en otra página, serán redirigidos a esa página y el ancla funcionará de la misma manera.

Con Site Creator, el punto 3 anterior no es "libre": cada bloque ya tiene su ID (o hashtag) que deberá indicar (o modificar previamente - ver punto 3 a continuación) para hacer que un enlace apunte a él.

Encontrar la referencia del bloque de destino

Acceda a Site Creator:

1. Haga clic aquí para acceder a la gestión de su producto en el Manager Infomaniak (¿necesita ayuda?).
2. Haga clic directamente en el nombre asignado al Site Creator correspondiente.
3. Haga clic en el botón Editar mi sitio para iniciar el editor:
   

Una vez en Site Creator:

1. Pase el ratón sobre el bloque de contenido a modificar y haga clic en la rueda dentada:
   
2. Desplácese por los parámetros hasta el final para obtener el ID del bloque en cuestión:
   
3. Un doble clic en el campo que indica el ID permite especificar su propio título en lugar del ID aleatorio:
   

Crear un enlace a la referencia del bloque

Para agregar un enlace en el texto en Site Creator, con destino al bloque situado más abajo en la misma página:

1. Seleccione un texto.
2. Haga clic en el icono de la cadena:
   
3. En las opciones avanzadas, elija el tipo "Sección" para crear un enlace a una parte de la misma página eligiendo la referencia del bloque obtenida anteriormente:
   
   
   Otras posibilidades:
   1. Colocar el enlace con el signo diésis (enlace a la misma página):
      
   2. Colocar el nombre de la página seguido del ID (útil si coloca el enlace en otra página del sitio):
      

FIN DE LA PÁGINA (y ancla colocada en este elemento) - haga clic aquí para volver a la ancla situada al principio de la página…

Esta guía explica cómo personalizar y configurar el módulo de tienda en línea de Site Creator.

Configurar una tienda en Site Creator

Requisitos previos

• Acceder a Site Creator:
  • Haga clic aquí para acceder a la gestión de su producto en el Manager Infomaniak (¿Necesita ayuda?).
  • Haga clic directamente en el nombre asignado al Site Creator correspondiente.
  • Haga clic en el botón Editar mi sitio para iniciar el editor:
    

Para gestionar las preferencias generales del sistema de comercio electrónico (moneda, impuestos, etc.) una vez añadido el módulo:

1. Pase el cursor sobre el módulo de la tienda añadido en su página.
2. Haga clic en Configuración.

Una vez en Configuración, varios submenús se muestran a la izquierda permitiendo configurar otros parámetros:

Métodos de pago

• PayPal
• Tarjeta de crédito & Twint (a través de Stripe o Mollie)
• Pago personalizado
• al recibir el pedido

Para utilizar los servicios de Stripe y Mollie, debe tener un número de SIRET en Francia o un IDE en Suiza. Además, es necesario tener una empresa válida registrada en el registro mercantil de su país para utilizar los servicios de Stripe y Mollie.

Métodos de envío

Puede crear varios métodos de envío:

Estos se propondrán a continuación durante la validación del carrito del comprador:

Entre los parámetros para crear un método de envío:

• tarifas (+ gratuidad de los gastos de envío a partir de un determinado importe)
• países autorizados
• gastos de envío según el peso
• plazos de envío
  
  

Mensajería

Cuatro mensajes están predeterminados y no se pueden eliminar. Permiten cubrir toda la comunicación por correo electrónico en torno a un pedido, tanto para el cliente como para el gestor de la tienda.

Es posible personalizar los mensajes existentes y agregar (y luego eliminar estos mensajes adicionales si es necesario):

1. Elegir el momento en que el correo electrónico debe ser enviado (o simplemente desactivar el mensaje para conservarlo sin usarlo)
   1. correo electrónico de nuevo pedido (para notificarle)
   2. correo electrónico de pedido procesado (personalizable)
   3. albarán de entrega en formato PDF (personalizable)
   4. factura también generada y disponible en formato PDF en su cuenta Stripe/Paypal/Mollie
2. Se pueden insertar variables en cada uno de los campos para personalizar al máximo los textos con la ayuda de los elementos que contiene el pedido y la información proporcionada por el comprador:

Página de inicio de la tienda

• Visualización de las categorías de productos si las hay
• Presentación de productos aleatorios
• etc.

Gestión de productos

Para gestionar los productos, agregar o eliminar:

1. Pase el ratón por el módulo en la parte superior izquierda.
2. Haga clic en Productos.

Encuentre los 3 primeros productos de ejemplo:

Reorganice sus productos moviéndolos con el ratón.

Haga clic en un producto para ajustar sus detalles así como la categoría en la que debe estar (leer más abajo). Puede, en particular:

• crear atributos (color, por ejemplo) para ofrecer el mismo producto en varias versiones/precios
• definir si el producto debe ser desmaterializado (virtual) p. ej. un PDF, un ZIP o un MP3, y por lo tanto descargable después de la compra

Al final de la edición de su ficha de producto, busque otros productos de su lista para vincularlos y proponérselos al visitante.

Al final de la ventana de edición de un producto, elija ocultar si es necesario el producto a sus visitantes.

Para finalizar y volver a la lista de productos, guarde los cambios mediante el botón situado al final.

Eliminar o duplicar un producto

En la ficha de edición de un producto, haga clic al final en el menú de acción junto al botón de guardar para elegir si debe eliminar el producto o duplicarlo.

Gestión de stock / inventario

En este mismo menú de acción, gestione el stock directamente en la lista de sus productos (para editar el stock en masa).

Pero cada ficha de producto permite editar el stock y también introducir el SKU (unidad de gestión de stocks) y su código de barras (ISBN).

Categorías de producto

Sus productos pueden organizarse en Categorías y subcategorías que luego se mostrarán según el diseño de su sitio.

Haga clic en el submenú Categorías en el panel de administración de la tienda, a la izquierda, bajo Productos.

Defina una imagen para ilustrar su categoría.

Ocultar si es necesario una categoría (esto no oculta los productos que contiene).

Código promocional

Un código promocional permite conceder un descuento (en % o en moneda) en un pedido.

Haga clic en el submenú Código promocional en el panel de administración de la tienda, a la izquierda, bajo Productos.

Puede especificar:

• su fecha de caducidad
• su importe mínimo eventual
• su nombre ("Descuento especial Navidad" por ejemplo)
• su forma ("FELIZNAVIDAD")

Exportar la lista de sus productos

Exporte la lista de sus productos (formato CSV) gracias al menú de acción situado en la parte superior derecha de la lista de sus productos.

Gestión de pedidos

Para gestionar los pedidos realizados y en curso:

1. Pase el ratón por el módulo en la parte superior izquierda.
2. Haga clic en Configuración.
3. Haga clic en el submenú Pedidos en el lado izquierdo del panel de administración de la tienda.

Exportar la lista de sus pedidos

Exportar la lista de sus pedidos (formato CSV) gracias al botón Descargar situado a la derecha de la barra de búsqueda de pedidos.

Gestión de clientes

Para gestionar los clientes (un cliente proporciona información personal al realizar su pedido):

1. Pase el ratón por el módulo en la parte superior izquierda.
2. Haga clic en Configuración.
3. Haga clic en el submenú Clientes en el lado izquierdo del panel de administración de la tienda.

Exportar la lista de sus clientes

Exporte la lista de sus clientes en un archivo CSV (formato .csv) gracias al botón Descargar situado a la derecha de la barra de búsqueda de clientes.