Mode développeur

Présentation

Le mode développeur vous permet de modifier et de changer 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.

Guide

Il existe deux façons d'accéder au mode développeur. La manière la plus simple est de cliquer sur le bouton Developer Mode (Mode développeur) dans le menu du haut.

developermode1_en-US.png

Un autre moyen est d'effectuer un clic droit sur un widget et de sélectionner Edit HTML/CSS (Modifier le HTML/CSS).

developermode2_en-US.png

Puis, cliquez sur le bouton « Developper Mode » (Mode développeur) dans le coin inférieur gauche.

developermode3_en-US.png

Poursuivez ensuite avec vos modifications. Utilisez les boutons « Save and Preview » (Enregistrer et prévisualiser) pour voir un aperçu de votre travail.

developermode4_en-US.png

Utilisez la fonction « Get Image URL » (Obtenir l'URL de l'image) pour obtenir l'URL d'une image existante ou téléchargez une nouvelle image dans ce mode pour que vous puissiez la placer directement dans le HTML. 

developermode5_en-US.png

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 les widgets. 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 vous voyez une classe existante (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. Notez les dimensions des classes. Les colonnes ont une valeur de taille qui est ajoutée comme classe, par exemple, large-6 ou small-12. Cela 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 au créateur de site Web. 
  5. Une sauvegarde de votre site est automatiquement réalisée lorsque vous entrez en mode développeur. Saisissez uniquement le code si vous comprenez son effet et sauvegardez souvent. Nous ne pouvons pas résoudre les problèmes concernant le code personnalisé.

Erreurs

DUPLICATE_ID : tous les éléments doivent avoir un identifiant unique

INVALID_ELEMENT_LOCATION : tous les éléments doivent se trouver dans une colonne qui doit elle-même être dans une ligne

BAD_PROPORTION : le total des colonnes dans une ligne doit s'élever à 12

INVALID_CLASS_FOR_ELEMENT : une classe a été ajoutée à un élément non valide

FAQ

Où dois-je placer mon code personnalisé ?

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