Changer la couleur d'un élément
Pour effectuer des modifications avec l'éditeur WYSIWYG, il suffit de cliquer avec le bouton droit de la souris sur l'élément que vous souhaitez modifier. Notez qu'il est très important que vous ayez sélectionné le bon élément pour que vos modifications fonctionnent.
Supposons que vous vouliez changer la couleur d'un bouton. Faites un clique droit sur le bouton et sélectionnez Modifier le style (Edit style).
Vous obtenez alors un menu contextuel avec différents paramètres de style pour cet élément. Celui-ci est préréglé avec les valeurs de style actuelles de l'élément. Pour changer la couleur du bouton, il suffit de cliquer sur la couleur actuelle dans le paramètre d'arrière-plan.
Pour modifier la couleur, utilisez le sélecteur de couleur ou entrez le code hexadécimal de la nouvelle couleur dans le champ de saisie. Les changements sont maintenant définis et vous verrez immédiatement les modifications dans l'éditeur, qui a généré un code à cet effet. Pour fermer le popup de style d'élément, il suffit de cliquer avec le bouton gauche de la souris n'importe où sur le site web.
L'éditeur WYSIWYG a maintenant généré un code pour ce changement. Vous pouvez le voir en cliquant sur Afficher le code (Show code), puis sur l'onglet CSS.
Modification de la copie d'un élément
Supposons que vous souhaitiez modifier la copie du bouton. Faites un clique droit sur le bouton et choisissez Modifier le contenu (Edit content), puis Modifier le texte (Edit text).
Vous allez maintenant obtenir une fenêtre contextuelle où vous pourrez modifier ce texte. Modifiez-le selon vos souhaits et cliquez sur Appliquer (Apply).
Vous verrez vos changements immédiatement et vous pouvez également voir le code généré pour cela si vous cliquez sur Afficher le code (Show code) et ensuite sur l'onglet Javascript / jQuery (si vous ne visualisez pas déjà cet onglet).
Note! L'éditeur WYSIWYG apportera vos modifications à cet élément précis en paramétrant les changements dans son sélecteur CSS. Cela signifie qu'il définit le sélecteur CSS le plus court et le plus unique pour cet élément (sur cette page exacte). Cela ne signifie pas qu'il est unique pour l'ensemble du site web.
Si un élément d'une autre page du site web a exactement le même sélecteur CSS, cet élément recevra également ces modifications (si l'expression "audience" est également vraie sur cette page).
Cela signifie également que si vous avez plusieurs boutons similaires que vous souhaitez modifier, vous devez effectuer cette modification sur chacun d'eux en répétant les étapes. Vous pouvez également modifier le code généré de manière à ce que le sélecteur CSS pointe sur chacun d'entre eux. Cela nécessite toutefois quelques compétences en matière de code ou au moins quelques connaissances sur le fonctionnement des sélecteurs CSS.
Déplacement d'un élément
Disons que nous voulons déplacer l'image vers la gauche et le texte et le CTA vers la droite. La première chose que nous faisons est de cliquer avec le bouton droit de la souris sur l'image pour la sélectionner.
Nous devons ensuite déterminer si nous avons sélectionné le bon élément pour ce changement. L'élément présentement sélectionné est l'image. Normalement, vous voulez obtenir l'élément conteneur le plus haut niveau lorsque vous déplacez un élément. En effet, l'élément peut avoir des règles CSS (styles) qui sont liées à l'élément conteneur (parent).
Vous pouvez vérifier cela et sélectionner l'élément parent le plus éloigné en utilisant la fonction Select -> Select parent. Cela affichera une liste d'éléments parents par rapport à l'élément cliqué, en commençant par le parent, puis en listant le parent de cet élément parent et ainsi de suite.
Si vous survolez ces choix, la sélection d'éléments affichée dans l'éditeur changera. Essayez d'obtenir le parent le plus éloigné de l'élément que vous souhaitez déplacer. Dans notre exemple ci-dessus, c'est le choix .container qui est l'élément le plus éloigné et qui comprend tous les éléments que nous souhaitons déplacer (l'image) et aucun autre élément.
Si l'on survole le suivant dans la hiérarchie, la sélection comprend la partie gauche (le texte et le bouton). Nous remontons alors et cliquons sur le .container pour le définir comme sélectionné.
Maintenant que l'élément conteneur de l'image est sélectionné, nous pouvons le modifier. Choisissez maintenant Couper (Cut) dans le menu encore ouvert.
Ensuite, nous devons choisir où coller ceci. Une fois de plus, nous devons sélectionner l'élément correct à coller (après, avant, à l'intérieur, etc.). Cliquez donc avec le bouton droit de la souris sur l'endroit où vous voulez commencer, puis remontez jusqu'à l'élément souhaité, cliquez ensuite sur cet élément pour le sélectionner, puis cliquez sur Coller (Paste) et choisissez l'endroit où vous voulez le coller.
Dans l'exemple ci-dessus, nous avons commencé par un clic droit sur le texte "Convertir plus", puis nous sommes allés jusqu'à l'élément conteneur le plus éloigné contenant le texte et le bouton, en utilisant la fonction Sélectionner -> Sélectionner le parent, comme précédemment.
Vous pouvez maintenant voir les changements et vous pouvez également voir le code généré pour cela en cliquant sur Afficher le code et en cliquant sur l'onglet javascript / jQuery.
Il ne nous reste plus qu'à mettre du rembourrage pour que ces changements aient l'air bien. Nous sélectionnons donc l'élément correct et choisissons ensuite le style d'édition. Ensuite, nous faisons défiler la page jusqu'à la zone de rembourrage (padding) et nous cliquons sur Plus d'options (More options) pour pouvoir définir un rembourrage spécifique. Ensuite, nous modifions le padding-gauche à 100px en le saisissant dans le champ de saisie. Maintenant, tout est réglé.
Finalement, enregistrez votre projet et définissez votre audience, puis prévisualisez le projet pour vérifier que l'audience est correcte et pour voir si les changements apportés fonctionnent bien.
Comment défaire les changements
L'éditeur WYSIWYG ajoute toujours le code après toute modification antérieure, ce qui signifie également que ces modifications se feront dans cet ordre. Si plusieurs modifications sont apportées à un même élément, le code de cette modification sera ajouté et NON modifié par l'éditeur.
Cela signifie que si vous changez la copie du bouton (comme mentionné dans l'exemple précédent) plusieurs fois, les changements jusqu'à la génération d'un code pour chaque changement et la copie des boutons changera plusieurs fois avant d'atteindre le dernier changement. Bien entendu, cela se produira si rapidement qu'il ne sera pas possible de le remarquer, mais attention si vous effectuez des changements importants. Il vaut peut-être mieux repartir de zéro plutôt que de continuer à faire des modifications qui s'écrasent d'elles-mêmes.
Si vous souhaitez tout recommencer, vous pouvez toujours cliquer sur Afficher le code et simplement supprimer le code généré et cliquer sur Appliquer dans chaque onglet. Si le site web n'est pas revenu à son état d'origine, vous devrez peut-être cliquer sur Sauvegarder et recharger la fenêtre du navigateur.
Si vous souhaitez annuler les dernières modifications, vous pouvez utiliser le bouton d'annulation dans l'éditeur. Cela annulera les modifications par étapes en commençant par la plus récente et en remontant aussi loin que possible.
Vous pouvez également supprimer manuellement le code généré pour les modifications que vous souhaitez annuler. Il peut donc être judicieux de garder un œil sur le code généré.