Esta guía explica cómo personalizar el código fuente, modificar el CSS, o modificar la sección 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 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:
    

Añadir código personalizado

Una vez dentro de 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. Introduzca código HTML, JavaScript (con sus etiquetas script) o CSS personalizado (con sus etiquetas style). Consulte más abajo para ver algunos ejemplos.
5. Guarde los cambios en la parte inferior de la página.

Metadatos en HEAD y BODY

Para añadir código JavaScript o cualquier otro código en la sección HEAD o BODY del código fuente de su sitio:

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

Ejemplos de personalización CSS

Estos ejemplos le permitirán comenzar con la personalización avanzada de las páginas del sitio web. Sin embargo, existe el riesgo de que, dependiendo de las modificaciones realizadas, no pueda acceder al editor, lo que le obligará a empezar de nuevo.

Personalizar el fondo de pantalla del sitio web

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

1. Vaya al punto 3 que se muestra en la primera imagen en la parte superior 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 donde puede 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 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 termina aquí.

Espaciar las letras de todos los enlaces del sitio

Para separar (mucho) las letras entre sí en las palabras que se pueden hacer clic (enlaces):

1. Vaya al punto 3 que se muestra 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 código 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 que permite insertar los comandos,
4. luego letter-spacing:1em; reduciendo 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í.

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