Comment créer une carte image WordPress (et pourquoi la créer)

Vous pouvez imaginer des façons intéressantes d’inclure des cartes d’images. Comment créer des cartes d’images WordPress (en 7 étapes) maintenant que vous avez appris comment certaines organisations utilisent des cartes d’images sur leurs sites Web, nous vous montrerons comment créer vos propres cartes d’images.
Étape 1: Télécharger et installer le plug – in WP Draw attachment WP Draw attachment vous permet d’ajouter facilement des cartes d’images à votre site WordPress. Les cartes d’images créées à l’aide de cet outil répondent rapidement, sont optimisées pour les moteurs de recherche (référencement) et peuvent être personnalisées. Nous vous montrerons la version gratuite du plug – in, mais si vous passez à Premium, vous débloquerez plus d’options. Pour l’installer à partir du tableau de bord de l’administration, allez au plug – in > Ajouter un nouveau plug – in. Ensuite, localisez Alert et cliquez sur le bouton Installer maintenant: Une fois le plug – in installé, cliquez sur le bouton activer. Ceci vous mènera à l’écran modifier l’image.
Étape 2: Sélectionnez une image pour la Bibliothèque de cartes la première étape de la création réelle d’une carte d’images consiste à ajouter des photos ou des graphiques qui serviront de base. Si vous n’êtes pas déjà entré dans l’écran d’édition d’images, vous pouvez y accéder en cliquant sur l’attention dans le menu à gauche du tableau de bord WordPress: Tout d’abord, donnez à votre image un titre descriptif. Le titre sera visible pour les visiteurs de votre site, donc veuillez le préciser. Puis regardez la zone d’image à droite de l’écran: Si vous stockez un fichier image sur votre bureau, il suffit de le faire glisser et de le déposer dans la zone d’image. Alternativement, vous pouvez cliquer sur le bouton télécharger l’image pour localiser le fichier sur votre ordinateur et le télécharger.
Si votre image est déjà dans la médiathèque WordPress, cliquez sur le bouton médiathèque. Ensuite, localisez et sélectionnez l’image désirée, puis cliquez sur le bouton définir l’image en vedette:
Si vous changez d’avis sur l’image que vous souhaitez utiliser, vous pouvez toujours survoler la zone de l’image, cliquer sur le bouton Supprimer l’image et sélectionner un nouveau fichier. Étape 3: dessiner un Hotspot d’image l’étape suivante consiste à spécifier un Hotspot sur l’image. C’est une zone que l’utilisateur peut cliquer et interagir avec. Lorsque le visiteur survole un Hotspot, une mise en évidence indique que vous pouvez cliquer dessus.
Vous créez et définissez des actions pour les hotspots dans la section hotspots. Vous pouvez le trouver en bas de l’écran: Tout d’abord, cliquez pour ouvrir l’image en cliquant sur le menu déroulant de la zone 1. S’il est grand, vous devrez peut – être faire défiler l’image entière. Cliquez n’importe où dans l’image pour placer le premier point. Vous pouvez déplacer un point en cliquant et en faisant glisser le point. Lorsque vous ajoutez un deuxième point, une ligne reliant les deux points est affichée. Plus vous ajoutez de points, plus la forme est précise. Continuez à ajouter et à manipuler des points autour du périmètre de la zone cliquable jusqu’à ce que vous soyez satisfait de la couverture:
Si vous devez supprimer un point, vous pouvez le faire en cliquant avec le bouton droit du point. Vous pouvez également déplacer toute la forme cliquable en sélectionnant le point central et en le faisant glisser. Enfin, donnez un titre à votre Hotspot. Ce titre apparaît lorsque l’utilisateur survole un Hotspot, nous vous recommandons donc de le définir en fonction du contexte. Pour ajouter plus de hotspots, cliquez simplement sur le bouton Ajouter d’autres zones en bas de l’écran. Après avoir ajouté plusieurs hotspots, vous pouvez utiliser le bouton Supprimer la zone pour supprimer tout Hotspot inutile.
Étape 4: définir les actions pour les hotspots vous pouvez maintenant définir les actions pour les hotspots. Attirer l’attention vous donne l’occasion d’afficher plus d’informations sur l’image
Ou ouvrez l’URL dans un nouvel onglet. Vous trouverez ces deux options dans la section actions: Pour fournir plus d’informations à l’utilisateur, sélectionnez afficher plus d’informations dans le menu déroulant. Tapez le texte désiré dans le champ description. Si vous souhaitez voir d’autres images, vous pouvez les télécharger dans la section images détaillées: Vous pouvez répéter ces étapes pour tout autre Hotspot que vous créez. Lorsque l’utilisateur clique sur un Hotspot, il voit le texte et l’image correspondants:
Si vous voulez que le Hotspot ouvre une nouvelle url lorsque vous cliquez, sélectionnez aller à l’URL dans le menu déroulant. Ensuite, tapez l’URL désirée dans le champ URL. Si vous souhaitez ouvrir une page dans un autre onglet navigateur, vous pouvez également cocher la case ouvrir dans une nouvelle fenêtre: Chaque fois que vous effectuez des modifications, assurez – vous de cliquer sur le bouton mise à jour dans la zone de publication pour enregistrer la carte d’image. Étape 5: ajuster les paramètres de la carte d’image ensuite, vous pouvez ajuster certains paramètres de couleur de la carte d’image. En manipulant ces options, vous pouvez vous assurer que les éléments de la carte image correspondent à la marque du site. Vous trouverez les options suivantes dans la zone de style du panneau plus d’informations:
Si votre image est petite, le plug – in la place sur un fond coloré. Vous pouvez modifier cette couleur pour correspondre au reste du site en cliquant sur le bouton sélectionner la couleur: Vous pouvez également ajuster les couleurs utilisées dans la boîte plus d’informations. Sélectionnez la couleur désirée pour l’arrière – plan et le texte de la boîte en cliquant sur le bouton sélectionner la couleur pour chaque option. Lorsque vous sélectionnez une couleur, gardez à l’esprit l’accessibilité et assurez – vous qu’il y a suffisamment de contraste pour maintenir la lisibilité du texte. Pour aider les visiteurs du site à comprendre que votre image est interactive, vous devrez peut – être ajouter du texte pour l’afficher dans le
A si aucune zone cliquable n’est sélectionnée, voir plus d’informations. Saisissez ceci dans la zone plus d’informations par défaut: Vous pouvez utiliser ce texte pour fournir plus d’informations sur les cartes d’images ou pour encourager les utilisateurs à interagir avec elles. Étape 6: Ajoutez des couleurs aux hotspots Enfin, vous pouvez personnaliser le style des hotspots. Vous pouvez effectuer ces modifications dans la section styles de mise en évidence. De la même façon que vous sélectionnez une couleur pour la zone d’information, vous pouvez sélectionner la couleur que vous souhaitez être un point chaud. Vous pouvez également utiliser le curseur pour ajuster l’opacité des points saillants: Ensuite, vous pouvez ajuster les bords des points saillants. De même, vous pouvez choisir la couleur et l’opacité. Vous pouvez également augmenter ou diminuer l’épaisseur du bord: Si vous voulez que les points saillants n’aient pas de bordures, réglez simplement l’opacité de la bordure à zéro. Cliquez sur le bouton mise à jour pour enregistrer les modifications. Étape 7: insérez une carte image sur n’importe quel article ou page en utilisant le raccourci clavier une fois que vous êtes satisfait de la carte image, vous pouvez utiliser le raccourci clavier [attirer l’attention] pour voir la carte image sur n’importe quel article ou page du site WordPress. Si vous passez à une version avancée de WP Draw attachment, vous pouvez créer plusieurs cartes d’image. Dans ce cas, chacun d’eux recevra son propre code court que vous pourrez ajouter au contenu au besoin. Conclusion les cartes d’images WordPress sont un moyen intéressant de communiquer avec les visiteurs du site. Qu’il s’agisse d’afficher les caractéristiques clés du produit ou simplement d’afficher l’information visuellement, les cartes d’images peuvent être le meilleur outil pour ce faire. Utilisez le plug – in WP Draw attachment pour vous aider à démarrer rapidement. Une fois installé et activé, vous aurez accès à l’édition