Editar código (fuente / CSS) en Sitio 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 realizado con Sitio Creator Infomaniak.

Requisitos previos

• Acceda a Site Creator:
  1. Haga clic aquí para acceder a la gestión de su producto en el Manager Infomaniak (¿Necesitas ayuda?).
  2. Haga clic directamente sobre el nombreasignado al producto afectado.
  3. Haga clic en Personalizar mi sitio:
     

Añadir código personalizado

Una vez en Site Creator:

1. Haga clic en Diseño en el menú lateral izquierdo.
2. Haga clic en No más parámetros.
3. Haga clic en Código personalizado abajo:
   
4. Introduzca el 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 añadir el código JavaScript o cualquier otro código en la parte 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 & Metadatos en la parte Configuración del sitio web.
3. Baje hasta Código personalizado.
4. Elija añadir debajo de las pestañas HEAD o en BODY.
5. Guarde los cambios al final de la página:
   

Ejemplos de personalización CSS

Estos ejemplos permiten iniciar la personalización avanzada de las páginas del sitio web. Sin embargo, existe un riesgo en función de los cambios introducidos de no poder acceder al propio editor, lo que le obligará a empezar de nuevo desde cero.

Personalizar el fondo de pantalla del sitio web

Para poner la imagen de su elección (a cargar en la biblioteca de archivos) en el fondo de la página y personalizar su pantalla:

1. Ve 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 código CSS,
3. y luego body { para indicar que desea modificar el cuerpo de la página y el "{" para abrir el espacio para insertar los comandos,
4. y luego background-image: url("../data/files/fond01.jpg"); con la ruta & nombre preciso de la imagen cargada en la biblioteca, sin olvidar el punto 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 hace marchar 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í.

Cerrar las letras de todos los enlaces del sitio

Para descartar (muchos) las letras entre ellas sobre las palabras clicables (enlaces):

1. Ve 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 código CSS,
3. y luego .container div a { para indicar que desea modificar los bloques de la página y más concretamente los enlaces ("a") y el "{" para abrir el espacio para insertar los comandos,
4. y luego letter-spacing:1em;reduciendo el valor (0.9em p.ex) sin olvidar el punto coma para poder insertar el siguiente comando o completarlo.
5. } para cerrar el espacio de inserción abierto anteriormente.
6. </style> para indicar que el código termina aquí.

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