L'éditeur est flexible dans la mesure où il vous permet à la fois de modifier le code existant ou d'ajouter le vôtre. Cela vous permet d'étendre les fonctionnalités de la plate-forme et de vous fournir des fonctionnalités supplémentaires. Par exemple, vous pouvez ajouter un widget de calendrier personnalisé ou même un formulaire de contact personnalisé tiers pour accepter des paiements sur votre site.
Avertissement
Le mode développeur n'est pas disponible lorsque vous modifiez le site en mode flexible dans l'éditeur classique. Vous devez quitter le mode flexible pour accéder au mode développeur.
Vous pouvez ajouter du code personnalisé de plusieurs manières : via le mode développeur ou le widget HTML. Vous trouverez ci-dessous des instructions sur la façon d'accéder aux deux.
Note
-
code personnalisé destiné à être visible sur le site doit être ajouté à l'aide d'un widget HTML. Le code personnalisé qui n'est pas visible doit généralement être placé dans l'en-tête. En général, il est toujours préférable de suivre d'abord les instructions fournies par l'auteur du code avant de l'ajouter à votre site.
-
Vous ne pouvez ni charger ni exécuter de fichiers PHP. Les langages côté serveur, tels que PHP, ne sont pas pris en charge, car la plate-forme ne fournit pas d'exécution côté serveur
Le mode développeur vous permet de modifier et de modifier le code HTML et CSS de votre site. L'ajout de code personnalisé permet une personnalisation avancée qui n'est pas possible avec l'éditeur glisser-déposer, mais cela ne doit être effectué que par des utilisateurs expérimentés ayant une solide compréhension du code de développement Web.
Pour accéder au mode développeur, cliquez pour ouvrir le menu hamburger dans l'éditeur et sélectionnez Mode de développement.
Le widget HTML est la méthode la plus simple pour ajouter du code personnalisé à votre site. Selon l'endroit où vous placez votre widget HTML, il apparaîtra soit sur toutes les pages de votre site, soit sur une seule page. Si vous placez le widget HTML 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 widget HTML ailleurs, il n'apparaîtra que dans le corps.
Pour ajouter un widget HTML :
-
Rechercher HTML, puis faites glisser le widget dans une colonne ou une ligne de votre site, puis collez-le dans votre code.
Vous pouvez placer du code dans l'en-tête de l'ensemble du site ou dans l'en-tête d'une page individuelle.
Note
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, en fonction des meilleures pratiques en matière de performances du 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. Pour cette raison, il est recommandé de placer le code dans le corps lorsque vous utilisez une application de gestion du consentement
Pour placer le code dans l'en-tête de l'ensemble du site :
It is common for pixel tracking codes to disappear when placed in the header. The head section <head> does not accept any code that is <img>, <iframe>, and more. It normally only takes <link>, <script>, and <meta>.
Si vous devez coller du code qui n'est pas enregistré dans la section d'en-tête, collez-le dans l'en-tête ou dans le fichier body-end.html. Pour ce faire, suivez les étapes décrites dans Code personnalisé après l'ouverture de la balise Body section de cet article.
Nous ne disposons pas actuellement d'une fonctionnalité permettant de placer le code directement après la balise body d'ouverture. Vous pouvez toutefois coller du code directement dans le fichier body-end.html. Il existe deux manières de procéder, en mode développeur ou dans les paramètres.
Pour coller du code directement dans le fichier body-end.html en mode développeur :
-
Cliquez pour ouvrir le menu hamburger dans l'éditeur, puis sélectionnez Mode développement.
-
CliquezSite HTML/CSSpour élargir la sélection.
-
Cliquezbody-end.html.
-
Collez votre code dans la dernière ligne ici.
-
Cliquez Enregistrer et Terminé.
Pour coller du code directement dans le fichier body-end.html dans les paramètres :
De nombreux éléments, notamment des lignes, des colonnes et des widgets, offrent la possibilité d'accéder à son code HTML/CSS.
Si vous utilisez l'éditeur classique en mode Flex ou l'éditeur 2.0 :
-
Vous pouvez modifier le CSS des conteneurs flexibles (section, colonne, colonne intérieure et grille avancée). Si vous utilisez Editor 2.0 : Vous pouvez également modifier le CSS des en-têtes et des pieds de page.
-
Le panneau de conception peut ne pas refléter toutes les modifications de code personnalisé. Cela peut entraîner des différences de style entre le panneau de conception et les éléments intégrés
Pour ajouter du code à un élément ou à un widget :
-
Dans l'éditeur classique, cliquez avec le bouton droit sur votre widget ou élément pour afficher le menu contextuel.
-
Si vous êtes en mode Flex dans l'éditeur classique ou dans Editor 2.0 : Cliquez pour sélectionner le conteneur flexible, l'en-tête ou le pied de page.
-
ClécherModifier HTML/CSS. Si vous êtes en mode Flex dans Classic Editor ou Editor 2.0, ccliquez sur l'icône à trois points dans le menu flottant, puis sélectionnezModifier le CSS.
-
Modifiez ou ajoutez du code ici, selon vos besoins.
-
Cliquez Mettre à jour.
Il se peut que le navigateur doive être actualisé pour voir les modifications.
Le mécanisme actuel de mise à jour des styles ne prend pas en charge les règles CSS at. Si vous souhaitez utiliser le CSS dans les règles en mode Flex ou Editor 2.0, vous devez les ajouter via le mode développeur, accessible en cliquant sur l'icône du mode développeur dans la barre de navigation supérieure.
Les règles AT suivantes ne sont prises en charge qu'en mode développeur :
-
@import : Permet d'importer des feuilles de style externes.
-
@media : définit les règles de style pour différents types/appareils de médias.
-
@font -face : permet de charger et d'utiliser des polices personnalisées.
-
@supports : applique des 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 le codage des caractères.
-
@counter -style : définit des styles de compteur personnalisés.
-
@document : (Obsolète) Styles appliqués à des URL spécifiques.
-
@layer : Utilisé dans les couches CSS Cascade.
-
@property : définit des propriétés personnalisées avec des types et des valeurs initiales spécifiques.
Dans Editor 2.0 et en mode Flex : Vous pouvez ajouter des classes CSS aux éléments flexibles (section, colonne, colonne intérieure et grilles avancées). L'utilisation de classes CSS permet de gagner du temps lors de la mise en forme des éléments. Par exemple, au lieu d'utiliser le panneau de conception pour modifier le remplissage et la taille d'une seule colonne, vous pouvez créer une classe CSS et appliquer ces modifications de style à un nombre quelconque de colonnes.
La même classe peut être appliquée à plusieurs éléments de la même page, et plusieurs classes peuvent être appliquées au même élément.
Note
Vous devez avoir accès au mode développeur pour utiliser cette fonctionnalité.
Pour ajouter ou modifier une classe CSS :
-
Sélectionnez l'élément flexible souhaité (section, colonne, colonne intérieure ou grille avancée).
-
Dans le menu flottant ou le menu contextuel, sélectionnez Ajouter un nom de classe CSS.
-
Tapez un nouveau nom de classe CSS ou sélectionnez un nom de classe existant dans le menu déroulant. Vous pouvez sélectionner plusieurs classes.
-
(Facultatif) Si vous n'avez pas encore ajouté la classe CSS au code, cliquez sur ouvrir le mode Dev.
-
Cliquez Terminé.
Pour ajouter un code de suivi à un formulaire de contact :
-
Accédez à la page sur laquelle se trouve votre formulaire de contact.
-
Cliquez sur votre formulaire de contact pour ouvrir les options.
-
CliquezSoumission.
-
CliquezSuivi.
-
Collez votre code de suivi des conversions ici.
Voici les instructions recommandées à suivre lorsque vous travaillez avec du code personnalisé et en mode développeur.
Directives générales
-
Créez toujours une sauvegarde de votre site avant d'ajouter du code personnalisé.
-
Lorsque vous travaillez avec du code personnalisé, utilisez toujours votre éditeur à partir de ce lien : http://my.duda.co?nossl
-
Vous pouvez prévisualiser le code en dehors 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 d'abord sur un site de test distinct. Vous pouvez le faire en dupliquant votre site pour tester le code personnalisé.
-
Pour le code qui doit être placé sur une page, créez une page de test et placez-y le code.
-
version préliminaire utilise le protocole HTTPS, ce qui n'est pas le cas de votre site en ligne. Cela cassera souvent le code personnalisé.
-
Assurez-vous de rester dans les colonnes. Nos sites adaptatifs sont basés sur une structure en lignes et colonnes. Cela signifie que chaque ligne contient des colonnes qui contiennent en fin de compte le contenu. Lorsque vous ajoutez ou modifiez votre propre code HTML, assurez-vous qu'il se trouve dans une colonne.
Directives spécifiques au mode développeur
-
Assurez-vous de rester dans les colonnes. Nos sites adaptatifs sont basés sur une structure en lignes et colonnes. Cela signifie que chaque ligne contient des colonnes qui contiennent en fin de compte le contenu. Lorsque vous ajoutez ou modifiez votre propre code HTML, assurez-vous qu'il se trouve dans une colonne.
-
Laissez les cours en place. L'éditeur s'appuie sur les nombreuses classes ajoutées aux éléments. Si vous voyez une classe existante (qui commence généralement par dm), laissez-la en place. Si vous supprimez des classes, le site risque de ne pas avoir la même apparence lorsque vous allez le prévisualiser.
-
Notez la taille des classes. Les colonnes ont une valeur de taille qui est ajoutée en tant que classe, telle que grand-6 ou small12. Cela détermine la taille des colonnes à l'intérieur de cette ligne. Vous devez les laisser en place, car ils sont au cœur du dimensionnement de la ligne sur différents appareils
-
possible, évitez 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 possible, évitez de les modifier, en particulier les valeurs de données qu'ils contiennent. Les modifier peut casser les widgets une fois que vous revenez dans l'éditeur.
Si vous avez ajouté du code personnalisé à votre site qui a un impact sur ses performances ou vous empêche de le modifier, cela est probablement dû au fait que le code n'est pas correctement formaté ou n'est pas conforme au protocole HTTPS.
Attention
Le support Duda ne peut pas résoudre les problèmes liés au 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, cela vaut peut-être la peine de faire appel à unExpert Dudapour vous aider à faire fonctionner votre code sur votre site.
-
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. C'est parce queDudaoptimise la structure et l'ordre de chargement du contenu, en fonction des meilleures pratiques en matière de performances du 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. Pour cette raison, il est recommandé de placer le code dans le corps lorsque vous utilisez une application de gestion du consentement
Vous trouverez ci-dessous des solutions de dépannage aux problèmes que vous pouvez rencontrer lors de l'utilisation de 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 que vous passez en mode développeur).
Pour restaurer une sauvegarde :
Voici 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 figurer dans une colonne qui doit être dans une ligne. -
BAD_PROPORTION. La somme des colonnes d'une ligne doit être égale à 12. -
INVALID_CLASS_FOR_ELEMENT.Dudala classe a été ajoutée à un élément non valide.
Si votre code ne fonctionne pas sur le site, c'est probablement parce que le code n'est pas correctement formaté ou qu'il n'est pas HTTPS.
Si votre code contient des liens (http ://ou//) et que votre site utilise le protocole HTTPS ou que vous êtes dans l'aperçu, vous devrez le modifier pour qu'il soit remplacé par https ://. La raison en est que le code non HTTPS ne fonctionnera pas dans une connexion HTTPS chargée (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 à votre éditeur sur une nouvelle page en saisissant une URL différente dans le lien de votre éditeur, telle que https://my.Duda.co/home/site/XXXXXXX/about . Une fois sur place, vous pouvez supprimer et ajouter à nouveau la page qui pose problème, ou accéder au mode développeur pour corriger le problème dans le code du site
Ou, si l'éditeur ne fonctionne pas, essayez de forcer l'ouverture de l'éditeur en utilisant le raccourci clavier de l'inspecteur d'éléments. Pour Mac, le raccourci est Commande+Option+C. Pour 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 entraîner 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.
-
Changez l'URL en « testing_scripts ».
-
Publiez, puis consultez la page sur votre site en ligne.
-
Si votre code fonctionne sur cette page, contactez le support pour désactiver l'optimisation de la vitesse des pages de votre site.
Si vous utilisez un script, vous pouvez également essayer de vous assurer qu'il s'exécute de manière asynchrone. Cela n'est pas garanti, mais cela peut parfois résoudre le problème lié à l'exécution incorrecte des scripts dans le navigateur.
Pour activer l'asynchronisation sur les scripts, modifiez votre code comme suit :
-
Ancien code :
<script src="https://example.com/script.js"></script> -
Nouveau code :
<script src="https://example.com/script.js" async defer></script>