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

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 Infomaniak.

Requisitos previos

• Accede 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 producto correspondiente.
  3. Haga clic en Personalizar mi sitio:
     

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. Escriba código HTML, JavaScript (con sus etiquetas script o CSS personalizado (con sus etiquetas estilo) - leer más abajo para algunos ejemplos.
5. Guarde los cambios al final de la página.

Metadatos en HEAD & BODY

Para agregar código JavaScript o cualquier otro código en la sección CABEZA o CUERPO del código fuente de tu sitio web:

1. Haga clic en Configuración en el menú lateral izquierdo.
2. Haga clic en SEO & Métadatos en la sección Configuración del sitio web.
3. Desplácese hasta Código personalizado.
4. Selecciona agregar bajo las pestañas CABEZA o debajo de CUERPO.
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 cero.

Personalizar el fondo de pantalla del sitio web

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

1. Diríjase al punto 3 visible en la primera imagen en la parte superior de esta guía.
2. Inserta el código <style> para indicar que deseas modificar el código CSS,
3. luego body { para indicar que deseas 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 y el nombre exactos 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 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 separar (mucho) las letras entre sí en las palabras cliqueables (enlaces):

1. Diríjase al punto 3 visible en la primera imagen en la parte superior de esta guía.
2. Inserta el código (si no está presente) <style> para indicar que deseas modificar el código CSS,
3. luego .container div a { para indicar que deseas 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 terminar.
5. } para cerrar el espacio de inserción abierto anteriormente.
6. </style> para indicar que el código termina aquí.

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