Base de conocimientos

WordPress y Site Creator son dos herramientas de creación de sitios completamente diferentes y, lamentablemente, no es posible utilizar componentes de una con la otra.

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

Conectar Site Creator a un nombre de dominio

Para conectar Site Creator a un nombre de dominio existente en su cuenta de Infomaniak:

1. Inicie sesión en el Manager de Infomaniak (manager.infomaniak.com) desde un navegador web como Brave o Edge.
2. Haga clic en el icono en la esquina superior derecha de la interfaz (o navegue a través del menú lateral izquierdo, por ejemplo).
3. Elija Hosting (universo de Web y Dominio).
4. Haga clic en el nombre del objeto relevante en la tabla mostrada.
5. Haga clic en Site Creator en el menú lateral izquierdo.
6. Haga clic en Conectar mi sitio a un dominio para iniciar el asistente de configuración a continuación:
   

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

Para gestionar el o los nombres de dominio utilizados con Site Creator:

1. Inicie sesión en el Manager de Infomaniak (manager.infomaniak.com) desde un navegador web como Brave o Edge.
2. Haga clic en el icono en la esquina superior derecha de la interfaz (o navegue a través del menú lateral izquierdo, por ejemplo).
3. Elija Hosting (universo de Web y Dominio).
4. Haga clic en el nombre del objeto relevante en la tabla mostrada.
5. Haga clic en Site Creator en el menú lateral izquierdo.

En la parte superior de la página se muestran cualquier mensaje sobre problemas con Site Creator y dominios.

A continuación, puede gestionar sus dominios si los hay:

Dirección temporal, URL de vista previa

Varios nombres de dominio pueden estar vinculados a Site Creator, eliminados o intercambiados y cambiados si es necesario:

Sin embargo, la URL de vista previa, del tipo abcd.infomaniak.site y distinta en la lista de dominios de Site Creator, nunca se puede eliminar para el buen funcionamiento de su sitio:

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

Cabe destacar que también es posible insertar otros elementos, como por ejemplo un formulario de suscripción al boletín de Infomaniak.

Agregar una imagen

Los medios se gestionan en la biblioteca de archivos:

1. Inicie sesión en el Manager de Infomaniak (manager.infomaniak.com) desde un navegador web como Brave o Edge
2. Haga clic en el icono en la esquina superior derecha de la interfaz (o navegue a través del menú lateral izquierdo)
3. Elija Hosting (universo Web & Dominio)
4. Haga clic en el nombre del objeto correspondiente en la tabla que se muestra
5. Haga clic en Site Creator en el menú lateral izquierdo
6. Haga clic en Personalizar mi sitio

Una vez dentro de Site Creator:

1. Agregue un nuevo bloque de contenido que contenga imágenes que luego podrá reemplazar o completar
2. Haga clic en el botón Contenido en el menú lateral izquierdo
3. Haga clic en Objetos en la lista para insertar una imagen única
4. Haga clic en el bloque de IMAGEN a la derecha

Una vez agregada la imagen, también puede hacerla clickeable o cambiar su tamaño:

También puede agregar imágenes como un módulo de Galería de fotos.

Cambiar una imagen

Para reemplazar una imagen insertada:

1. Haga clic en una imagen para editarla
2. Haga clic en el botón de tipo Marco de foto en la miniatura de la imagen para poder seleccionar una nueva imagen que reemplazará 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 de VIDEO a la derecha para insertar un video a toda la anchura

También puede aplicar un enlace a una imagen utilizando una URL de YouTube como URL: esto creará automáticamente un icono de tipo PLAY que, al hacer clic, abrirá el video en un "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 en la parte inferior
3. El contenido disponible se muestra a la derecha
4. Haga clic en el reproductor de audio para insertarlo en la página

Puede personalizarlo de forma 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 en la parte inferior
3. El contenido disponible se muestra a la derecha
4. Haga clic en el widget Descargar archivo para insertarlo en la página
5. Seleccione en la biblioteca el archivo que sus visitantes podrán descargar

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

Por defecto, cuando su sitio web es nuevo, no se deben almacenar cookies en los dispositivos de sus visitantes y no hay funcionalidad de seguimiento para publicidad o marketing.

Como administrador del sitio web, algunos datos se almacenan en sus propias cookies (como información que indica que usted es un administrador del sitio web).

Si agrega aplicaciones/módulos integrados a su sitio web, se pueden utilizar cookies. Por ejemplo, con el Formulario de encuesta: si agrega un módulo de encuesta a su sitio web, utilizará cookies cuando el visitante del sitio web vote (para recordar que ya ha votado).

Notificación para Visitantes

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

1. En la barra lateral izquierda, haga clic en el botón Configuración
2. Haga clic en Datos de contacto bajo Configuración del sitio web
3. Habilite la opción de información sobre cookies para configurar el mensaje breve y la URL para obtener información adicional
4. Ajuste el tipo de visualización, expandido o no (lea a continuación)
5. Guarde los cambios en la parte inferior de la página
   
   
   

Configuración Adicional

El mensaje de consentimiento se puede establecer como predeterminado o expandido, cuando hace clic en Mostrar. El resultado es el siguiente:

• Predeterminado:
  
• Expandido:
  

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

Agregar código personalizado

Para acceder a Site Creator:

1. Inicie sesión en el Manager de Infomaniak (manager.infomaniak.com) desde un navegador web como Brave o Edge
2. Haga clic en el icono en la esquina superior derecha de la interfaz (o navegue a través del menú lateral izquierdo, por ejemplo)
3. Elija Hosting (universo Web & Dominio)
4. Haga clic en el nombre del objeto en cuestión en la tabla que se muestra
5. Haga clic en Site Creator en el menú lateral izquierdo
6. Haga clic en Personalizar mi sitio

Una vez en Site Creator:

1. Haga clic en Diseño en el menú lateral izquierdo
   
2. Haga clic en Más ajustes
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) - lea más abajo para algunos ejemplos
5. Guarde los cambios en la parte inferior de la página

Metadatos en HEAD y BODY

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

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

Ejemplos de personalización CSS

Estos ejemplos le permiten comenzar con la personalización avanzada de las páginas del sitio web. Sin embargo, existe un riesgo, según las modificaciones realizadas, de que ya no pueda acceder al editor mismo, lo que le obligaría a comenzar desde cero.

Personalizar el fondo de pantalla del sitio web

Para establecer la imagen de su elección (para cargar en la biblioteca de archivos) como fondo de página y personalizar su visualización:

1. Vaya al punto 3 visible en la primera imagen en la parte superior de esta guía
2. Inserte el código <style> para indicar que desea modificar el CSS
3. Luego, body { para indicar que desea modificar el cuerpo de la página y el "{" para abrir el espacio para insertar comandos
4. Luego, background-image: url("../data/files/fond01.jpg"); con la ruta y el nombre de la imagen cargada en la biblioteca, sin olvidar el punto y coma para poder insertar el siguiente comando
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 arriba o hacia abajo para leer su contenido
7. } para cerrar el espacio de inserción abierto anteriormente
8. </style> para indicar que el código finaliza aquí

Espaciar las letras de todos los enlaces del sitio

Para separar (mucho) las letras entre sí en las palabras enlazadas:

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

Consulte otros ejemplos de código CSS para insertar en su sitio web.

Esta guía detalla el comportamiento de Site Creator de Infomaniak y del sitio creado con él frente a diferentes formatos y resoluciones de pantalla.

Visualizar el sitio en diferentes dispositivos

Los sitios creados con Site Creator se adaptan automáticamente a los navegadores independientemente de su soporte (computadora, dispositivo móvil, tableta, pantalla grande y pequeña, etc.). Sin embargo, pueden reaccionar de manera diferente según algunos parámetros que puede ajustar accediendo a Site Creator:

1. Inicie sesión en el Infomaniak Manager (manager.infomaniak.com) desde un navegador web como Brave o Firefox
2. Haga clic en el icono en la esquina superior derecha de la interfaz (o navegue a través del menú lateral izquierdo, por ejemplo)
3. Seleccione Hosting (universo Web & Domain)
4. Haga clic directamente en el nombre del objeto relevante en la tabla que se muestra
5. Haga clic en Site Creator en el menú lateral izquierdo
6. Haga clic en Personalizar mi sitio

Una vez en Site Creator, para previsualizar la versión del sitio según el dispositivo de lectura, haga clic en el botón  …  azul en la parte inferior del menú lateral izquierdo, para expandir las opciones de publicación y previsualización.

Haga clic en Vista previa y luego en la parte superior de la página, haga clic en el menú de acción a la derecha de Vista previa para cambiar el tipo de dispositivo de lectura.

Mostrar su sitio con ancho reducido

Puede reducir el ancho de su sitio. Sin embargo, esta visualización dentro de un "contenedor" o "caja" solo será visible en pantallas grandes tipo computadora de escritorio:

1. En el menú lateral izquierdo, haga clic en el botón Diseño
2. Haga clic en Más ajustes
   
   
3. Guarde los cambios en la parte inferior de la página

Ocultar un bloque de contenido según el tipo de dispositivo

En las opciones de un bloque de contenido, puede configurarlo para que se muestre solo en ciertos tipos de dispositivos (por ejemplo, móviles):

Esta guía explica cómo integrar archivos de vídeo / audio importados en un servicio VOD / AOD de Infomaniak en páginas web.

Este código de integración es único y corresponde a los ajustes que está especificando en la página. Le permite integrar el mismo vídeo con configuraciones de visualización diferentes según sus necesidades.

Más adelante, podrá modificar los ajustes de esta integración ajustándolos desde la página de historial de integraciones en el Manager de Infomaniak.

Generar y copiar el código de integración

El código de integración que le permite insertar su medio en el lugar deseado (blog, sitio web, etc.) se encuentra en su interfaz de VOD:

1. Inicie sesión en el Manager de Infomaniak (manager.infomaniak.com) desde un navegador web como Brave o Edge
2. Haga clic en el icono ‍ en la esquina superior derecha de la interfaz (o navegue a través del menú lateral izquierdo, por ejemplo)
3. Elija VOD/AOD (área de Streaming)
4. Haga clic en el nombre del objeto relevante en la tabla que se muestra
5. Haga clic en Medios en el menú lateral izquierdo
6. Haga clic en Gestión de medios en el menú lateral izquierdo
7. Haga clic en el medio relevante en la tabla que se muestra
8. Haga clic en el botón azul Compartir
9. Haga clic en Crear integración
10. Personalice la integración del medio
11. Haga clic en el botón para Generar el código de integración
12. Copie el código para pegarlo en el lugar de su elección

Modificar una integración anterior

Para personalizar nuevamente una integración previamente realizada de su medio y mantener el código correspondiente sin necesidad de volver a insertarlo:

1. Inicie sesión en el Manager de Infomaniak (manager.infomaniak.com) desde un navegador web como Brave o Edge
2. Haga clic en el icono ‍ en la esquina superior derecha de la interfaz (o navegue a través del menú lateral izquierdo, por ejemplo)
3. Elija VOD/AOD (área de Streaming)
4. Haga clic en el nombre del objeto relevante en la tabla que se muestra
5. Haga clic en Medios en el menú lateral izquierdo
6. Haga clic en Gestión de medios en el menú lateral izquierdo
7. Haga clic en el medio relevante en la tabla que se muestra
8. Haga clic en el botón azul Compartir

9. Haga clic en Editar integración

   

10. Haga clic en el menú de acción ⋮ a la derecha del elemento relevante en la tabla que se muestra

11. Haga clic en el elemento deseado para obtener / modificar los códigos de integración / compartir:

    

Pegar el código de integración

Pegue el código en el lugar deseado en la página web.

Para SiteCreator, por ejemplo, genere un código de integración "Fijo" (no "Reactivo"):

Luego, pegue este código en Site Creator dentro de un bloque de "Código HTML personalizado".

Aquí tiene un ejemplo de copiar y pegar desde la página de integración de medios:

Esta guía le ayuda a comprender cómo crear y editar páginas en Infomaniak Site Creator.

Edición sencilla de páginas

Para acceder a Site Creator:

1. Inicie sesión en el Manager de Infomaniak (manager.infomaniak.com) desde un navegador web como Brave o Firefox.
2. Haga clic en el icono en la parte superior derecha de la interfaz (o navegue a través del menú lateral izquierdo, por ejemplo).
3. Seleccione Hosting (en el área de Web y Dominio).
4. Haga clic directamente en el nombre del objeto relevante en la tabla que se muestra.
5. Haga clic en Site Creator en el menú lateral izquierdo.
6. Haga clic en Personalizar mi sitio.

La edición de una página ocurre en tiempo real y sus cambios se guardan automáticamente a medida que edita el contenido de sus bloques.

Crear un enlace

Cree un enlace desde una imagen o texto seleccionando el objeto.

Luego, haga clic en el icono de la cadena para abrir la sección que le permitirá especificar el tipo de enlace y las opciones relacionadas:

Convertir un enlace en un botón

En la configuración del enlace, puede seleccionar el estilo (botón redondeado, sólido, etc.), el icono asociado y más:

Editar un enlace

Edite un enlace haciendo clic en él:

Crear un enlace a un archivo

Para permitir que sus visitantes descarguen un archivo desde un enlace en un objeto, seleccione el tipo "Archivo" en la configuración del enlace:

Crear un enlace a un correo electrónico

Seleccione el tipo "Dirección de correo electrónico" en la configuración del enlace. Al hacer clic en el enlace, se abrirá la aplicación de correo electrónico predeterminada en el visitante y comenzará a redactar un correo electrónico con la dirección predefinida.

Para evitar que la dirección de correo electrónico se muestre en la página, recomendamos el uso de un formulario de contacto.

Crear un enlace a una sección específica

Para dirigir al visitante a una sección específica de su sitio web o de otra página, debe utilizar el sistema de anclajes.

Crear un enlace desde una imagen

Cuando hace clic en una imagen para editarla, simplemente active el botón "Esto es un enlace" debajo de la imagen para especificar la URL que se mostrará cuando un visitante haga clic en ella:

Si ingresa la URL de un video de YouTube, el video se abrirá en una ventana emergente de tipo lightbox.

Crear una lista, insertar un emoji...

Las diferentes opciones de formato de texto se encuentran sobre la selección de texto y las opciones adicionales (listas con viñetas, alineación, emojis, etc.) se acceden con la flecha:

Cambiar el nombre del sitio web

Haga clic en el botón Configuración en la barra lateral izquierda, luego haga clic en Título del sitio .

Detalles de la compañía

Haga clic en el botón Configuración en la barra lateral izquierda, luego haga clic en Información de contacto en Configuración del sitio web .

Esta guía trata sobre las "Aplicaciones" y "módulos" disponibles en Site Creator de Infomaniak, para crear un sitio web de escaparate, un blog o una tienda en línea totalmente personalizable, sin necesidad de ningún conocimiento técnico.

Diferentes módulos

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

1. Vídeo
2. Reproductor de audio
3. Slider de imágenes / presentación de diapositivas
4. Descarga de archivos
5. Ubicación en 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 feeds RSS
19. Menú de restaurante

Insertar un módulo en una página

Para insertar un módulo:

1. Inicia sesión en el Manager de Infomaniak (manager.infomaniak.com) desde un navegador web como Brave o Edge.
2. Haz clic en el icono en la esquina superior derecha de la interfaz (o navega a través del menú lateral izquierdo, por ejemplo).
3. Selecciona Hosting (universo Web & Domain).
4. Haz clic en el nombre del objeto correspondiente en la tabla que se muestra.
5. Haz clic en Site Creator en el menú lateral izquierdo.
6. Haz clic en Personalizar mi sitio.

Una vez en Site Creator:

1. Haz clic en el botón Contenido en el menú lateral izquierdo.
2. Haz clic en Aplicaciones en la parte inferior y se mostrará el contenido disponible a la derecha.
3. Haz clic en una de estas aplicaciones para insertarla en la página:
   
4. Una vez insertada, pasa el ratón por encima del módulo para acceder a sus ajustes:
   

Múltiples módulos o módulo faltante

Si eliminas uno de tus módulos (como el de la encuesta) que ya está configurado y quieres volver atrás, presiona inmediatamente Deshacer.

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

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

Otras integraciones y widgets

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

Insertar un contador

Para agregar un contador que muestre una cuenta regresiva:

1. En el menú lateral izquierdo, haz clic en el botón Contenido.
2. Haz clic en Objetos en la lista y el contenido disponible se mostrará a la derecha:
   
3. Haz clic en uno de estos objetos para insertarlo en la página y personalizarlo: