Modificar el código (fuente / CSS) en Site Creator

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.