L'éditeur est flexible dans le sens où il vous permet de modifier le code existant ou d'ajouter le vôtre. Ainsi, vous pouvez à la fois élargir le champ de fonctionnalité de la plateforme et bénéficier de fonctionnalités supplémentaires. Vous pouvez par exemple ajouter un widget calendrier personnalisé, ou même un formulaire de contact personnalisé tiers qui vous permettra d'accepter les paiements sur votre site.
Attention
Le mode développeur n'est pas disponible lorsque vous éditez le site en mode flexible dans l'éditeur classique. Vous devez quitter le mode flexible pour accéder au mode développeur.
Il y a plusieurs façons d'ajouter du code personnalisé : via le mode développeur ou le HTML widget. Vous trouverez ci-dessous des instructions sur la manière d'accéder aux deux.
Remarque
Le code personnalisé destiné à être visible sur le site doit être ajouté à l'aide d'un widget HTML. Les codes personnalisés qui ne le sont pas doivent généralement être placés dans l'en-tête. En général, il est toujours préférable de suivre les instructions fournies par l'auteur du code avant de l'ajouter à votre site.
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.
Pour accéder au mode développeur :
-
Cliquez sur Mode développeur (
) dans la barre de navigation. Vous pouvez également cliquer avec le bouton droit de la souris sur un widget et sélectionner Edit HTML/CSS, puis cliquer sur Dev Mode dans le coin inférieur gauche.
-
Après avoir ajouté ton code, utilisez les boutons Enregistrer et Aperçu pour voir ton travail.
Le site HTML widget est la méthode la plus simple pour ajouter un code personnalisé à votre site. Selon l'endroit où vous placez votre HTML widget, il apparaîtra soit sur toutes les pages de votre site, soit sur une seule page. Si vous placez le HTML widget dans l'en-tête ou le pied de page, il sera placé sur toutes les pages du site en même temps. En effet, chaque site partage l'en-tête et le pied de page. Si vous placez le HTML widget à un autre endroit, il n'apparaîtra que dans le corps du texte.
Dans le panneau latéral, cliquez sur widgetet faites glisser le HTML widget dans une colonne ou une ligne de votre site et collez le code.
Vous pouvez placer le code dans l'en-tête du site ou dans l'en-tête d'une page individuelle.
Remarque
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, nous optimisons la structure et l'ordre de chargement du contenu, sur la base 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 la performance du contenu principal. Pour cette raison, il est recommandé de placer le code dans le corps du texte lorsque vous utilisez une application de gestion du consentement.
Pour placer le code dans l'en-tête du site :
-
Dans le panneau latéral, cliquez sur SEO & Settings.
-
Cliquez sur Header HTML.
-
Tête HTML. Ajoutez du contenu au champ de la section d'en-tête.
-
Corps Fin HTML. Ajoutez du HTML/Javascript personnalisé juste avant la fermeture tag de l'élément <body> pour chaque page du site.
-
-
Collez le code tu, puis enregistrez.
Il est fréquent que les codes de suivi des pixels disparaissent lorsqu'ils sont placés dans l'en-tête. La section head <head> n'accepte aucun code qui soit <img>, <iframe>, et plus encore. Il ne prend normalement que <link>, <script>, et <meta>.
Si vous devez coller du code qui n'est pas enregistré dans la section head, collez-le dans le header ou dans le body-end.html. Pour ce faire, suivez les étapes de la section Code personnalisé après le corps d'ouverture tag de cet article.
Pour le moment, aucune fonctionnalité ne permet de placer du code directement après le tag d'ouverture du corps. Vous pouvez toutefois coller un code directement dans le fichier body-end.html. Il existe deux façons de le faire : en mode développeur ou dans les paramètres.
Pour coller le code directement dans le fichier body-end.html en mode développeur :
-
Cliquez sur l'icône du mode développeur (
-
Cliquez sur Site HTML / CSS pour élargir la sélection.
-
Cliquez sur body-end.html.
-
Collez votre code dans la dernière ligne.
-
Cliquez sur Enregistrer et Terminé.
Pour coller le code directement dans le fichier body-end.html dans les paramètres :
De nombreux éléments, notamment les lignes, les colonnes et widget, offrent la possibilité d'accéder à leur code HTML/CSS.
Si vous êtes dans l'éditeur classique en mode flex ou dans l'éditeur 2.0, vous pouvez modifier le CSS des conteneurs flex (section, colonne, colonne intérieure et grille avancée). Si vous utilisez l'éditeur 2.0, vous pouvez également modifier le CSS des en-têtes et des pieds de page.
Pour ajouter n'importe quel code à n'importe quel élément ou widget :
-
Cliquez avec le bouton droit de la souris sur widget ou sur un élément pour afficher le menu contextuel. Si vous êtes en mode flex dans l'Éditeur classique ou l'Éditeur 2.0, cliquez sur pour sélectionner le conteneur, l'en-tête ou le pied de page flexibles.
-
Cliquez sur Modifier HTML/CSS. Si vous êtes en mode flex dans l'Éditeur classique ou l'Éditeur 2.0, cliquez sur l'icône en forme de trois points dans le menu flottant, puis sélectionnez Éditer CSS.
-
Modifiez ou ajoutez du code selon les besoins.
-
Cliquez sur Mettre à jour.
Vous devrez peut-être actualiser le navigateur pour voir la modification.
Le mécanisme actuel de mise à jour du style ne prend pas en charge les règles CSS. Si vous souhaitez utiliser des règles CSS en mode Flex ou dans l'éditeur 2.0, vous devez les ajouter en mode développeur, auquel vous pouvez accéder en cliquant sur l'icône du mode développeur dans la barre de navigation supérieure.
Les règles d'at suivantes ne sont prises en charge qu'en mode développeur :
-
@import : Utilisé pour importer des feuilles de style externes.
-
@media : Définit les règles de style pour les différents types de médias/appareils.
-
@font-face : Permet de charger et d'utiliser des polices personnalisées.
-
@supports : Applique les styles en fonction de la prise en charge des fonctionnalités.
-
@keyframes : Définit les animations.
-
@page : Utilisé dans les médias paginés, tels que l'impression.
-
@namespace : Déclare un espace de noms pour les documents XML.
-
@charset : Spécifie l'encodage des caractères.
-
@counter-style : Définit les styles de compteur personnalisés.
-
@document : (Obsolète) Appliquait des styles à des URL spécifiques.
-
@layer : Utilisé dans les couches CSS en cascade.
-
@property : Définit des propriétés personnalisées avec des types et des valeurs initiales spécifiques.
Pour ajouter un code de suivi à un formulaire de contact :
-
Rendez-vous sur la page contenant votre formulaire de contact.
-
Cliquez sur votre formulaire de contact pour ouvrir les options.
-
Cliquez sur Soumission.
-
Suivi des clics.
-
Collez votre code de suivi des conversions.
Vous trouverez ci-dessous les recommandations à suivre lorsque vous travaillez avec du code personnalisé et en mode développeur.
Lignes directrices générales
-
Créez toujours une sauvegarde de votre site avant d'ajouter du code personnalisé.
-
Lorsque vous utilisez du code personnalisé, accédez toujours à votre éditeur à partir de ce lien : http://my.duda.co?nossl.
-
Vous pouvez prévisualiser le code hors d'un iframe en modifiant le lien de l'éditeur de https://my.duda.co/home/ed/site/xxxxx/page à https://my.duda.co/site/xxxxx/page?preview=true.
-
Avant de placer le code dans l'en-tête, testez-le d'abord sur un site distinct. Vous pouvez le faire en créant une copie de votre site pour tester le code personnalisé.
-
Pour le code devant être inséré sur une page, créez une page d'essai et intégrez-y le code.
-
L'aperçu utilise HTTPS, alors que le site réel peut ne pas l'utiliser. Cela entraînera souvent une rupture du code personnalisé.
-
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.
Lignes directrices spécifiques au mode développeur
-
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.
-
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.
-
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.
-
Évitez autant que possible de modifier les extensions. Dans le code HTML, vous verrez déjà des espaces réservés pour les éléments de la page. Si vous le pouvez, évitez de les modifier, en particulier les valeurs de données qu'ils contiennent. La modification de ces éléments peut briser le site widget une fois qu'il est renvoyé à l'éditeur.
Si vous avez ajouté du code personnalisé à votre site et que celui-ci nuit à votre performance ou vous empêche de modifier votre site, il est probable que le code en question n'ait pas été correctement formaté ou qu'il ne soit pas compatible avec le HTTPS.
Attention
L'assistance Duda ne peut pas dépanner le code personnalisé.
-
Le code personnalisé est très imprévisible. De nombreux facteurs peuvent expliquer pourquoi votre code personnalisé ne fonctionne pas avec notre plateforme. Si vous avez besoin d'aide pour faire fonctionner le code personnalisé sur votre site, il peut être intéressant d'engager un expert Duda pour vous aider à faire fonctionner votre code sur votre site.
-
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, Duda optimise la structure et l'ordre de chargement du contenu, en se basant sur les meilleures pratiques en matière de performance sur le site. Nous plaçons les scripts et les bannières CMP plus bas sur la page, afin d'améliorer la performance du contenu principal. Pour cette raison, il est recommandé de placer le code dans le corps du texte lorsque vous utilisez une application de gestion du consentement.
Vous trouverez ci-dessous des solutions de dépannage pour les problèmes que vous pouvez rencontrer lorsque vous travaillez avec du code personnalisé.
Restaurez une sauvegarde de votre site à un point antérieur à l'ajout du code personnalisé (même si vous n'avez pas créé de sauvegarde, l'éditeur en crée une pour vous lorsque vous publiez ou passez en mode développeur).
Pour restaurer une sauvegarde :
Vous trouverez ci-dessous les messages d'erreur spécifiques et leur signification :
-
DUPLICATE_ID. Chaque élément doit avoir un identifiant unique. -
INVALID_ELEMENT_LOCATION. Tous les éléments doivent se trouver dans une colonne qui doit se trouver dans une ligne. -
MAUVAISE_PROPORTION. La somme des colonnes d'une même ligne doit être égale à 12. -
INVALID_CLASS_FOR_ELEMENT. Une classe a été ajoutée à un élément non valide.
Si vous avez du code qui ne fonctionne pas sur le site, il est probable que le code en question n'ait pas été correctement formaté ou qu'il ne soit pas compatible avec le HTTPS.
Si votre code inclut des liens (http:// ou //) et que votre site utilise le HTTPS ou que vous êtes dans l'aperçu, vous devrez remplacer ces éléments par https://. En effet, le code non compatible avec le HTTPS ne fonctionnera pas dans le cadre d'une connexion HTTPS (aperçu du site, éditeur, etc.).
Si vous ne parvenez pas à accéder à l'éditeur lors du chargement initial de votre site, essayez d'accéder à l'éditeur sur une nouvelle page en saisissant une URL différente dans le lien de l'éditeur, par exemple https://my.Duda.co/home/site/XXXXXXX/about. Une fois sur place, vous pouvez supprimer et réajuster la page qui pose problème, ou accéder au mode développeur pour résoudre le problème au niveau du code du site.
Ou, si l'éditeur est cassé, essayez de forcer l'ouverture de l'éditeur en utilisant le raccourci clavier pour l'inspecteur d'éléments. Pour Mac, le raccourci est Commande+Option+C. Sur PC, le raccourci est Ctrl+Alt+C.
L'optimisation de la vitesse des pages affecte la façon dont certains scripts sont exécutés. Nous optimisons PageSpeed sur la plupart des pages, ce qui peut causer des problèmes avec votre code personnalisé.
Pour déterminer si votre code personnalisé est affecté par un problème de vitesse de page :
-
Dupliquez la page avec vos scripts.
-
Modifiez l'URL en "testing_scripts."
-
Publiez et vérifiez la page sur votre site réel.
-
Si le code tu fonctionne sur cette page, contactez le support pour désactiver l'optimisation de la vitesse des pages pour votre site.
Si vous utilisez un script, vous pouvez également essayer de vous assurer que votre script s'exécute de manière asynchrone. Il n'y a pas de garantie, mais cela résout parfois le problème de scripts qui ne s'exécutent pas correctement dans le navigateur.
Pour activer l'exécution asynchrone du script, vous devez le modifier de la manière suivante :
-
Ancien code :
<script src="https://example.com/script.js">< /script ></script> -
Nouveau code :
<script src="https://example.com/script.js" async defer>< /script ></script>