Comment ajouter une bordure autour d'une image dans WordPress (3 méthodes faciles)

Avez-vous parfois l'impression que vos images disparaissent simplement dans l'arrière-plan de votre site WordPress ? Vous choisissez de superbes visuels, mais une fois qu'ils sont sur la page, ils paraissent plats, comme s'ils étaient à peine là.

Cela arrive souvent, surtout sur des mises en page épurées et blanches. Et cela peut rendre votre contenu moins attrayant, même lorsque tout le reste semble soigné.

C'est là qu'ajouter une simple bordure peut faire une grande différence.

Chez WPBeginner, nous aimons ajouter des bordures épurées autour de nos captures d'écran pour les aider à se démarquer et à améliorer l'aspect général de nos pages. C'est l'une de nos astuces préférées pour un meilleur engagement, un design plus équilibré et une touche plus professionnelle.

Dans ce guide, nous vous montrerons trois façons simples d'ajouter une bordure autour d'une image dans WordPress. À la fin, vous saurez comment faire ressortir vos images et maintenir l'intérêt des visiteurs pour votre contenu. 🙌

Pourquoi ajouter une bordure autour d'une image dans WordPress ?

Une bordure aide vos images à se démarquer du reste de votre contenu, surtout sur les pages avec des arrière-plans clairs ou chargés. Elle crée une frontière visuelle claire qui rend vos images plus faciles à voir et plus susceptibles d'attirer l'attention.

Les images sont de puissants outils de communication. Elles peuvent partager des informations rapidement et rendre les pages très textuelles plus attrayantes.

Cependant, parfois, les images peuvent se fondre dans l'arrière-plan du site web. C'est plus probable si vous utilisez une image d'arrière-plan ou si les couleurs de votre site sont similaires à celles de vos images.

Les personnes malvoyantes ou daltoniennes peuvent également avoir du mal à distinguer les images de l'arrière-plan. Si vous souhaitez en savoir plus, nous avons un guide sur l'amélioration de l'accessibilité des sites Web WordPress.

L'ajout d'une bordure autour d'une image dans WordPress distingue clairement l'image de l'arrière-plan de votre site. C'est aussi un excellent moyen d'attirer l'attention sur vos visuels les plus importants.

Dans cette optique, nous allons vous expliquer comment ajouter une bordure autour d'une image sur votre blog WordPress.

Voici un aperçu rapide de toutes les méthodes que nous aborderons dans cet article :

• Méthode 1 : Utiliser des classes CSS personnalisées pour ajouter une bordure autour d'une image dans WordPress
• Méthode 2 : Utiliser un constructeur de page pour ajouter une bordure autour d'une image dans WordPress
• Méthode 3 : Utiliser HTML et CSS pour ajouter une bordure autour d'une image dans WordPress
• Astuce bonus : Utiliser un outil de conception graphique pour ajouter une bordure autour d'une image
• FAQ : Ajouter une bordure autour d'une image dans WordPress
• Plus de guides sur l'utilisation des images dans WordPress

Prêt ? Commençons.

Méthode 1 : Utiliser des classes CSS personnalisées pour ajouter une bordure autour d'une image dans WordPress

La création d'une classe CSS personnalisée est un moyen intelligent et facile d'ajouter des bordures à vos images. Une classe CSS est un bloc réutilisable de code qui vous permet d'appliquer le même style, comme des bordures, des couleurs ou des espacements, à plusieurs éléments de votre site.

Ainsi, au lieu de modifier chaque image une par une, vous pouvez définir vos paramètres de bordure en un seul endroit et les appliquer partout où vous en avez besoin en quelques clics. C'est parfait si vous prévoyez d'ajouter des bordures à plusieurs images sur votre site.

Il existe plusieurs façons de créer une classe CSS personnalisée. Vous pouvez utiliser le personnaliseur de thème, l'éditeur complet du site ou le plugin WPCode.

Nous recommandons toujours d'utiliser le plugin WPCode car il est convivial pour les débutants et indépendant du thème. Cela signifie que votre CSS personnalisé fonctionnera toujours même si vous changez de thème.

Sur toutes nos marques partenaires, nous utilisons WPCode pour ajouter et gérer des extraits de code personnalisés. Pour en savoir plus à ce sujet, consultez notre avis détaillé sur WPCode.

Installons et activons donc le plugin WPCode. Si vous avez besoin d'aide, vous pouvez vous référer à notre guide sur comment installer un plugin WordPress.

Après l'activation, vous devrez naviguer vers Extraits de code » + Ajouter un extrait.

Ensuite, vous pouvez survoler l'option « Ajouter votre code personnalisé (Nouvel extrait) » et cliquer sur « Utiliser l'extrait ».

Sur l'écran suivant, WPCode vous demandera de choisir un type de code.

Vous remarquerez peut-être que les paramètres par défaut de WPCode pointent vers « Extrait PHP », mais ici, vous devrez cliquer sur « Extrait CSS ».

Cela ouvrira l'éditeur WPCode. À partir de là, vous pouvez d'abord créer un nom pour l'extrait personnalisé. Par exemple, nous utilisons « border-black ».

Notez que lors de la création de votre classe CSS, vous devrez spécifier la couleur et la largeur de la bordure.

Par exemple, vous pouvez définir des pixels (px) pour la largeur et un code couleur hexadécimal pour la couleur.

Dans l'extrait de code suivant, nous créons une bordure noire de 5 pixels de large :

.border-black {
    border: #000 solid 5px;
}

Dans le code d'exemple ci-dessus, border-black est le nom de la classe CSS (le même que notre extrait de code personnalisé dans WPCode, ce qui facilite l'organisation).

Vous pouvez utiliser le nom que vous souhaitez, mais vous devrez taper le nom de la classe CSS chaque fois que vous voudrez créer une bordure. Dans cet esprit, vous voudrez créer un nom de classe CSS court et facile à retenir.

Maintenant, tout ce que vous avez à faire est de copier cet extrait de code dans le champ « Aperçu du code » de WPCode comme ceci :

Après cela, vous pouvez activer l'extrait en basculant l'interrupteur et cliquer sur le bouton « Enregistrer l'extrait » ou « Mettre à jour ». Pour des instructions détaillées, vous pouvez consulter notre guide sur l'ajout de CSS personnalisé à WordPress.

Vous pouvez ajouter autant de classes CSS que vous le souhaitez. Par exemple, vous pourriez créer des bordures de différentes couleurs.

Maintenant, ajouter une bordure à une image est assez simple.

Pour commencer, cliquez sur l'image sur votre page ou article WordPress. Ensuite, regardez l'onglet « Bloc » sur le côté droit de votre écran et localisez l'option « Avancé » là.

Cliquez dessus pour développer la section.

Dans le champ « CLASSES CSS SUPPLÉMENTAIRES », vous pouvez taper le nom de la classe CSS que vous souhaitez ajouter à l'image.

Notez que, comme vous pouvez le voir dans l'image suivante, la bordure n'apparaîtra pas dans l'éditeur de contenu WordPress.

Pour voir à quoi ressemblera la bordure pour vos visiteurs, cliquez sur le bouton « Aperçu ».

Vous verrez maintenant votre image avec la bordure appliquée.

Si vous êtes satisfait de l'apparence de la bordure, il vous suffit de publier ou de mettre à jour la page.

Méthode 2 : Utiliser un constructeur de page pour ajouter une bordure autour d'une image dans WordPress

Une autre méthode consiste à utiliser un plugin de constructeur de pages.

Les constructeurs de pages par glisser-déposer vous permettent de concevoir et de personnaliser facilement des pages Web, comme des pages de connexion et des pages de destination. Vous pouvez ajouter du texte, des images et d'autres éléments sans avoir besoin de compétences en codage.

Ces outils vous permettent également de créer facilement des bordures uniques pour chaque image. Vous pouvez les concevoir à l'aide d'un éditeur visuel, ce qui est plus facile pour de nombreuses personnes.

Nous recommandons SeedProd, qui est le meilleur constructeur de pages de destination pour WordPress. Il est convivial et vous permet de créer facilement des pages d'aspect professionnel.

N'hésitez pas à consulter notre avis complet sur SeedProd pour comprendre pourquoi nous recommandons cet outil.

SeedProd dispose d'un bloc d'image spécial avec des options de bordure intégrées. Vous pouvez également ajouter facilement des ombres et ajuster l'espacement.

Tout d'abord, vous devrez installer et activer le plugin. Si vous avez besoin d'aide, veuillez consulter notre guide sur comment installer un plugin WordPress.

Après l'activation, allons dans SeedProd » Landing Pages depuis votre tableau de bord WordPress.

SeedProd est livré avec des centaines de modèles conçus par des professionnels, regroupés par catégories. En haut de l'écran, vous verrez des catégories que vous pouvez utiliser pour :

• Créer une page 404.
• Créer une page de connexion personnalisée.
• Concevoir une belle page « bientôt disponible ».
• Et plus encore.

Pour jeter un coup d'œil à un design, survolez simplement votre souris sur un modèle, puis cliquez sur l'icône de la loupe lorsqu'elle apparaît.

Cela affichera un aperçu du modèle.

Si vous êtes satisfait de l'apparence du modèle, cliquez sur « Choisir ce modèle ».

Dans le champ « Nom de la page », tapez un nom pour la page. Par défaut, SeedProd utilisera ce nom comme URL de la page.

Si vous souhaitez modifier cette URL créée automatiquement, modifiez simplement le texte dans le champ « URL de la page ».

Une fois que vous avez saisi les informations, vous pouvez cliquer sur le bouton « Enregistrer et commencer à modifier la page ». Cela ouvrira le modèle choisi dans l'éditeur glisser-déposer de SeedProd.

Dans le menu de gauche, vous verrez tous les blocs que vous pouvez ajouter à votre page WordPress en utilisant le glisser-déposer.

Trouvez simplement le bloc « Image », puis faites-le glisser sur la conception de votre page.

Une fois que vous avez fait cela, cliquez simplement sur le bloc « Image » pour voir tous les paramètres que vous pouvez utiliser pour personnaliser le bloc.

Dans le menu de gauche, cliquez sur « Utiliser votre propre image ».

Vous pouvez maintenant choisir n’importe quelle image dans la médiathèque WordPress.

Après cela, cliquez sur l’onglet « Avancé » dans le menu de gauche.

Ensuite, cliquez pour développer la section « Bordure d’image ».

Par défaut, tous les paramètres de largeur de bordure de SeedProd sont à 0, ce qui signifie que l’image n’a pas de bordure.

La première chose à faire est d’augmenter ces valeurs à 1 ou plus. Cela ajoutera une bordure visible à l’image.

Pour commencer, cliquez sur chacun des champs « Largeur de bordure » puis tapez un nombre plus élevé ou utilisez les boutons fléchés qui apparaissent.

Lorsque vous êtes satisfait de l’épaisseur de la bordure, vous pouvez commencer à la styliser.

Une option consiste à changer la couleur de la bordure en cliquant sur le champ à côté de « Couleur de la bordure ». Cela ouvrira une fenêtre contextuelle où vous pourrez choisir une nouvelle couleur de bordure.

SeedProd propose trois styles de bordure simples : continue, pointillée et en tirets. Vous pouvez choisir celui qui convient le mieux à votre image.

Pour essayer ces différents styles de bordure, ouvrez simplement le menu déroulant « Style de bordure », puis choisissez une option dans la liste.

Et voilà !

Et si vous souhaitez ajouter une bordure à d'autres images, suivez le même processus décrit ci-dessus.

Une fois que vous êtes satisfait de la conception de votre page, vous pouvez cliquer sur le bouton « Enregistrer », puis choisir « Publier » pour la mettre en ligne.

Méthode 3 : Utiliser HTML et CSS pour ajouter une bordure autour d'une image dans WordPress

Vous pouvez également ajouter des bordures en utilisant HTML et CSS. Cette méthode ne nécessite pas de plugin, ce qui peut être pratique.

Cependant, la personnalisation de l'apparence de la bordure implique d'écrire du code, ce qui peut ne pas être le meilleur choix pour les débutants. Si vous êtes à l'aise avec un peu de codage, cette méthode offre une grande flexibilité.

Pour commencer, ajoutons une image à n'importe quelle page ou article.

Une fois que vous avez fait cela, vous pouvez cliquer sur l'icône à trois points dans le coin supérieur droit, puis cliquer sur « Éditeur de code ».

WordPress affichera maintenant tout le code qui compose la page ou l'article.

Vous pouvez maintenant trouver la section de code qui ajoute l'image à votre page. Ce code commencera par wp:image .

Si la page contient plusieurs images, vérifiez la valeur img src=. C'est l'URL de l'image dans votre médiathèque WordPress, et elle sera différente pour chaque image.

Une fois que vous avez trouvé la bonne section de code, l'étape suivante consiste à écrire une ligne de code qui ajoute la bordure et contrôle son style.

Par exemple, dans l'extrait de code suivant, la bordure a une largeur de 3 pixels. Nous ajoutons également 3 pixels de remplissage et de marge :

style="border:3px solid #000000; padding:3px; margin:3px;" />

Dans l'exemple de code ci-dessus, solid #000000 définit la couleur de la bordure. La valeur #000000 est le code hexadécimal de la couleur noire.

Et si vous ne voulez *pas* créer de bordure noire, vous pouvez remplacer la valeur par n'importe quel autre code hexadécimal.

Une fois que vous avez décidé du code de la bordure, vous devrez trouver la section /></figure> et ajouter votre code directement avant le premier caractère /.

Regardons un exemple :

<!-- wp:image {"id":1450,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:10003/wp-content/uploads/2022/06/logo.jpeg" alt="" class="wp-image-1450" style="border:3px solid #000000; padding:3px; margin:3px;" /></figure>
<!-- /wp:image -->

Lorsque vous êtes satisfait de votre code, quittez l'éditeur de code en cliquant sur « Quitter l'éditeur de code ».

Vous devriez maintenant voir une bordure autour de votre image. Ne vous inquiétez pas si vous recevez un avertissement concernant du HTML invalide. C'est normal et cela n'affectera pas l'affichage de votre image.

Si vous êtes satisfait du résultat, vous pouvez mettre à jour ou publier votre page normalement.

Maintenant, si vous visitez votre site web WordPress, vous verrez une bordure autour de votre image.

Astuce bonus : Utiliser un outil de conception graphique pour ajouter une bordure autour d'une image

Bien que WordPress offre plusieurs méthodes pour ajouter des bordures, ces options peuvent parfois être limitées en termes de style et de personnalisation. Alors, pourquoi ne pas modifier votre image d'abord, puis la télécharger sur WordPress ensuite ?

C'est là que les outils de conception graphique s'avèrent utiles.

Adobe Photoshop est le grand acteur ici, avec des tonnes de fonctionnalités sophistiquées pour les professionnels. Si vous ne voulez pas vous ruiner, alors Affinity Photo est un choix solide – il a des astuces similaires, mais vous ne payez qu'une seule fois.

Pour une expérience plus conviviale et basée sur le navigateur, Canva est un excellent outil. Notre équipe l'utilise régulièrement pour concevoir rapidement des images mises en avant et des graphiques pour les réseaux sociaux.

Et si vous surveillez votre portefeuille, GIMP (GNU Image Manipulation Program) peut être votre solution. Il est totalement gratuit, open-source, et peut faire beaucoup de ce que les outils payants peuvent faire.

GIMP est également une excellente option pour les débutants comme pour les utilisateurs expérimentés. Vous pouvez l'utiliser sur Mac et Windows.

Pour ce tutoriel, nous allons vous montrer comment ajouter une bordure autour d'une image en utilisant GIMP.

Lors de l'installation, vous voudrez ouvrir l'application de bureau GIMP. Ensuite, vous pouvez cliquer sur Fichier » Ouvrir et choisir une image à modifier sur votre disque local. Ou, vous pouvez en faire glisser une dans l'éditeur de GIMP.

Une fois l'image chargée dans l'éditeur GIMP, dessinons une bordure autour de l'image en utilisant l'outil « Sélection de rectangle ». Vous trouverez cet outil dans la barre d'outils en haut à gauche.

Ensuite, vous voudrez peut-être vérifier les paramètres de vos couleurs de premier plan et d'arrière-plan.

C'est parce que GIMP utilise la couleur de premier plan pour tracer les lignes. Donc, si vous avez besoin d'utiliser une couleur spécifique pour votre bordure, vous pouvez cliquer sur la couleur de premier plan pour l'ajuster.

Cela ouvrira le sélecteur de couleurs, où vous pourrez déplacer votre souris sur la zone de sélection des couleurs ou insérer le code hexadécimal de la couleur.

Une fois que vous avez fait cela, vous pouvez cliquer sur « OK ».

Maintenant que vous avez défini la couleur de votre bordure, il est temps de l'appliquer. Vous pouvez naviguer vers Édition » Contour de la sélection, et cela ouvrira la fenêtre contextuelle « Contour de la sélection ».

Ici, vous pouvez ajuster le style du contour, la largeur de la ligne, et plus encore. Par exemple, nous avons défini notre largeur de ligne à 5 px.

Une fois que vous avez terminé, cliquez sur « Contour », et la bordure devrait maintenant être ajoutée à votre image.

Avant de téléverser sur WordPress, vous voudrez peut-être optimiser l'image pour maintenir une excellente vitesse et performance du site. Les images brutes sont souvent volumineuses, donc cette étape peut être d'une grande aide.

Dans GIMP, vous pouvez optimiser votre image en la redimensionnant.

Pour commencer, vous devrez naviguer vers Image » Redimensionner l'image. Cela ouvrira la fenêtre contextuelle « Redimensionner l'image », où vous pourrez ajuster la « Taille de l'image » comme ceci :

Après avoir ajusté la taille de l'image, vous pouvez cliquer sur le bouton « Redimensionner ».

GIMP redimensionnera alors l'image et affichera la nouvelle version dans l'éditeur.

Une fois terminé, vous pouvez enregistrer l'image en allant dans Fichier » Exporter sous.

Ensuite, vous pouvez suivre l'invite pour choisir un emplacement, nommer le fichier et définir le format de l'image. Lorsque tout est réglé, cliquez sur « Exporter ».

Vous pouvez maintenant téléverser votre image dans votre article ou page WordPress. Voici à quoi cela pourrait ressembler dans l'éditeur de blocs :

C'est tout : vous avez appris à ajouter une bordure autour d'une image à l'aide d'un outil de conception graphique !

Vous pouvez utiliser cette méthode chaque fois que vous souhaitez téléverser une image dans WordPress.

FAQ : Ajouter une bordure autour d'une image dans WordPress

Vous avez encore des questions sur la mise en forme de vos images ? Voici quelques FAQ courantes pour vous aider à résoudre les problèmes, à personnaliser et à tirer le meilleur parti de l'ajout de bordures dans WordPress.

Puis-je ajouter la même bordure à toutes les images de mon site en une seule fois ?

Oui, vous pouvez le faire avec du CSS personnalisé en appliquant des styles à la balise img principale. Cependant, cela peut également affecter des éléments tels que les logos, les icônes ou les images dans les widgets.

Pour un meilleur contrôle, nous vous recommandons de créer une classe CSS (comme dans la méthode 1) et de l'appliquer uniquement aux images où vous souhaitez la bordure.

Comment puis-je créer des coins arrondis pour la bordure de mon image ?

Vous pouvez facilement créer des coins arrondis en utilisant la propriété CSS border-radius. Ajoutez simplement une ligne border-radius: 15px; à votre extrait CSS personnalisé. Plus la valeur en pixels est élevée, plus les coins seront arrondis.

Puis-je supprimer une bordure que mon thème WordPress ajoute automatiquement ?

Oui. Pour remplacer cela, vous pouvez créer une classe CSS personnalisée, par exemple .no-border avec border: none !important;. Vous pouvez ensuite l'appliquer à des images spécifiques en utilisant le champ « Classes CSS supplémentaires » dans les paramètres du bloc ou de l'image.

L'ajout d'une bordure CSS ralentira-t-il mon site web ?

Non, une simple bordure CSS n'est qu'une ligne de code et n'a aucun impact notable sur la vitesse de chargement de votre page. La taille du fichier de l'image elle-même est ce qui affecte les performances, alors assurez-vous toujours d'optimiser vos images pour le web.

Plus de guides sur l'utilisation des images dans WordPress

Nous espérons que cet article vous a aidé à apprendre comment ajouter une bordure autour d'une image dans WordPress.

Si vous avez trouvé cela utile, vous pouvez également consulter nos guides sur :

• Comment ajouter correctement des images dans WordPress
• Comment faire des retouches d'image de base dans WordPress
• Comment redimensionner et agrandir des images sans perdre en qualité
• Comment créer des tailles d'images supplémentaires dans WordPress
• Comment charger paresseusement les images dans WordPress
• Texte alternatif d'image vs titre d'image dans WordPress
• Comment ajouter une image héros dans WordPress (fonctionne pour tous les thèmes)
• Meilleurs plugins et outils d'images mises en avant pour WordPress

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.