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

1. Haga clic en Configuración 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 la sección Código personalizado.
4. Elija si desea agregar el código debajo de la pestaña HEAD o debajo de la pestaña BODY.
5. Guarde los cambios en la parte inferior de la página:
   

Ejemplos de personalización CSS

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

Personalizar el fondo de pantalla del sitio web

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

1. Diríjase 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 las comillas { para abrir el espacio donde se pueden 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 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í.

Aumentar el espaciado entre las letras de todos los enlaces del sitio

Para aumentar considerablemente el espacio entre las letras de las palabras en las que se puede hacer clic (enlaces):

1. Diríjase 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 la "{" para abrir el espacio donde se pueden 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 que puede insertar en su sitio web.