Mode développeur

Le mode développeur vous permet de modifier le HTML et le CSS de votre site Web. L'ajout d'un code personnalisé permet une personnalisation avancée qui n'est pas possible avec l'éditeur glisser-déposer. Cependant, ce processus ne doit être réalisé que par des utilisateurs avancés ayant une connaissance approfondie du code de développement Web.

Remarque

Le code personnalisé qui est censé apparaître sur le site doit être ajouté à l'aide d'un widget HTML. Si ce n'est pas le cas, le code personnalisé doit généralement être placé dans l'en-tête. En général, il est toujours mieux de suivre d'abord les instructions fournies par le scripteur du code avant de l'ajouter sur votre site.

Attention

Les applications de gestion du consentement ne sont pas en mesure d'empêcher l'exécution du code avant le consentement lorsque le code est placé dans l'en-tête HTML. En effet, IONOS optimise la structure et l'ordre du chargement du contenu, en fonction des meilleures pratiques en matière de performances sur le site. Nous plaçons les scripts et les bannières CMP plus bas sur la page, afin d'améliorer les performances du contenu principal. C'est pourquoi il est recommandé de placer le code dans le corps du texte lorsqu'on utilise une application de gestion du consentement.

Pour accéder au mode développeur :

  1. Cliquez sur le bouton Mode développeur dans la barre de navigation. Vous pouvez également effectuer un clic droit sur un widget et sélectionner Modifier HTML/CSS, puis cliquer sur Mode Dév. en bas à gauche.
  2. Poursuivez ensuite avec vos modifications. Utilisez les boutons Enregistrer et Aperçu pour voir un aperçu de votre travail.
  3. Utilisez la fonction Obtenir l'URL de l'image pour obtenir l'URL d'une image existante ou transférez une nouvelle image dans le mode développeur pour pouvoir la placer directement dans le HTML.

Remarques

  1. Veillez à rester dans les colonnes. Nos sites Web adaptatifs s'appuient sur une structure ligne-colonne. Cela signifie que chaque ligne contient une colonne, qui contient elle-même le contenu. Lorsque vous ajoutez ou modifiez votre propre HTML, assurez-vous qu'il est à l'intérieur d'une colonne.
  2. Laissez les classes en place. L'éditeur dépend des différentes classes qui sont ajoutées aux éléments. Si une classe existe déjà (elle commence généralement par « dm »), laissez-la en place. Si vous supprimez des classes, le site peut ne pas avoir le même aspect que sur l'aperçu.
  3. Jetons un œil aux dimensions des classes. Les colonnes ont une valeur de taille qui est ajoutée comme classe, par exemple, large-6 ou small-12. Cette valeur détermine la taille des colonnes à l'intérieur de cette ligne. Vous devrez les laisser en place, car elles constituent le cœur du dimensionnement de la ligne sur différents appareils.
  4. Évitez de modifier les extensions si possible. Dans le HTML, vous verrez les paramètres fictifs d'éléments qui sont déjà sur la page. Si vous pouvez, évitez de les modifier, en particulier les données et valeurs qui s'y trouvent. Leur modification peut rompre ces éléments une fois que vous revenez à l'éditeur de site.
  5. Une sauvegarde de votre site est automatiquement réalisée lorsque vous entrez en mode développeur. Ne saisissez du code que si vous comprenez son effet, et effectuez des sauvegardes régulières. Nous ne pouvons pas résoudre les problèmes de code personnalisé.

Erreurs

  • DUPLICATE_ID. Tous les éléments doivent comporter un identifiant unique
  • INVALID_ELEMENT_LOCATION. Tous les éléments doivent se trouver dans une colonne qui doit elle-même figurer dans une ligne
  • BAD_PROPORTION. Le total des colonnes dans une ligne doit s'élever à 12
  • INVALID_CLASS_FOR_ELEMENT. Une classe de IONOS a été ajoutée à un élément non valide