{"id":830333,"date":"2018-01-04T12:00:24","date_gmt":"2018-01-04T12:00:24","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/9-wordpress-image-filters-you-can-add-to-your-website-2\/"},"modified":"2022-12-11T09:46:53","modified_gmt":"2022-12-11T09:46:53","slug":"9-wordpress-image-filters-you-can-add-to-your-website-2","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/9-filtres-dimage-wordpress-que-vous-pouvez-ajouter-a-votre-site-web\/","title":{"rendered":"9 filtres d&rsquo;image WordPress que vous pouvez ajouter \u00e0 votre site Web"},"content":{"rendered":"<div id=\"post-65104\">\n<p>Les filtres d&rsquo;image sont actuellement une m\u00e9thode tr\u00e8s populaire pour ajouter un \u00e9clat d&rsquo;aspect professionnel \u00e0 vos photos. Si vous \u00eates sur Instagram ou Snapchat, il y a de fortes chances que presque toutes les images que vous voyez soient pass\u00e9es par un filtre quelconque. Cependant, les filtres d&rsquo;image peuvent \u00eatre bien plus qu&rsquo;un simple gadget &#8211; ils peuvent constituer un moyen rapide et facile d&rsquo;am\u00e9liorer les visuels de votre site Web.<\/p>\n<p>WordPress n&rsquo;est pas livr\u00e9 avec de nombreuses fonctionnalit\u00e9s d&rsquo;\u00e9dition d&rsquo;images. Cependant, cela ne signifie pas que vous ne pouvez pas tirer parti de leurs avantages au sein de la plate-forme. Dans cet article, nous allons voir pourquoi vous souhaitez ajouter des filtres d&rsquo;image WordPress, puis nous allons explorer comment le faire en utilisant un plugin ou des feuilles de style en cascade (CSS). C&rsquo;est parti !<\/p>\n<h2>Pourquoi vous devriez envisager d&rsquo;ajouter des filtres d&rsquo;image \u00e0 WordPress<\/h2>\n<div id=\"attachment_65107\" class=\"wp-caption aligncenter\" style=\"width: 890px;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65107\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/main-example-filters.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/main-example-filters.png 922w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/main-example-filters-300x104.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/main-example-filters-768x267.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/main-example-filters-610x212.png 610w\" alt=\"An example of a WordPress image filter plugin.\" width=\"880\" height=\"305\" aria-describedby=\"caption-attachment-65107\" \/><\/p>\n<p id=\"caption-attachment-65107\" class=\"wp-caption-text\">Les filtres d&rsquo;image sont un excellent moyen de personnaliser les images de votre site Web.<\/p>\n<\/div>\n<p>Si vous ne les avez jamais rencontr\u00e9s, pensez aux filtres d&rsquo;image comme \u00e0 des \u00a0\u00bb pr\u00e9r\u00e9glages \u00a0\u00bb pour obtenir un certain look. Alors que certaines personnes les consid\u00e8rent comme un simple gadget de m\u00e9dias sociaux, ils constituent en fait un moyen puissant de personnaliser les graphiques. De plus, ils sont incroyablement utiles pour les utilisateurs de WordPress, car la plateforme ne permet pas de modifier les images au-del\u00e0 de leur redimensionnement et de leur recadrage.<\/p>\n<p>D\u00e9cortiquons certaines des choses que vous pouvez faire avec les filtres d&rsquo;image WordPress :<\/p>\n<ul>\n<li><strong>Personnalisez les images pour qu&rsquo;elles correspondent \u00e0 votre style.<\/strong> Imaginez, par exemple, que vous \u00eates un photographe avec un portfolio WordPress. Vous pourriez utiliser les filtres d&rsquo;image pour personnaliser vos images et cr\u00e9er un look coh\u00e9rent sans avoir \u00e0 utiliser des outils tiers.<\/li>\n<li><strong>Marquez vos m\u00e9dias.<\/strong> De nombreux sites Web utilisent des types d&rsquo;images sp\u00e9cifiques pour leur contenu. Par exemple, vous avez peut-\u00eatre remarqu\u00e9 que la plupart des images pr\u00e9sent\u00e9es sur notre blog sont de type vectoriel. Vous pouvez utiliser des filtres pour cr\u00e9er votre propre style et vous d\u00e9marquer \u00e9galement.<\/li>\n<li><strong>Am\u00e9liorez les images de stock.<\/strong> \u00c0 moins que vous ne soyez un photographe disposant de beaucoup de temps libre, vous finirez probablement par utiliser des images de stock sur votre site Web. Dans la plupart des cas, d&rsquo;autres sites utiliseront \u00e9galement les m\u00eames images. Vous pouvez vous d\u00e9marquer en utilisant des filtres.<\/li>\n<\/ul>\n<p>Si vous souhaitez disposer de plus d&rsquo;options en mati\u00e8re de personnalisation des images sur WordPress, les filtres constituent une premi\u00e8re \u00e9tape importante. Cependant, vous pouvez \u00e9galement ajouter un \u00e9diteur d&rsquo;images de base \u00e0 votre tableau de bord, ce qui rend inutile l&rsquo;utilisation d&rsquo;<em>un<\/em> logiciel autonome.<\/p>\n<h2>Comment ajouter des filtres d&rsquo;images WordPress \u00e0 votre site Web \u00e0 l&rsquo;aide de plugins ?<\/h2>\n<p>Compte tenu de la popularit\u00e9 des filtres d&rsquo;images, il est surprenant qu&rsquo;il existe peu de plugins WordPress dans ce domaine. En fait, apr\u00e8s quelques recherches, nous n&rsquo;avons trouv\u00e9 qu&rsquo;une seule option que nous sommes en mesure de vous recommander &#8211; <a href=\"https:\/\/codecanyon.net\/item\/ultimate-image-filters-wordpress-plugin\/8074975\" target=\"_blank\" rel=\"noopener\">Ultimate Image Filters<\/a>:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65108\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/ultimate-image-filters.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/ultimate-image-filters.png 966w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/ultimate-image-filters-300x66.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/ultimate-image-filters-768x169.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/ultimate-image-filters-610x134.png 610w\" alt=\"The Ultimate Image Filters plugin.\" width=\"880\" height=\"193\" \/><\/p>\n<p>Gardez \u00e0 l&rsquo;esprit que c&rsquo;est un plugin premium, mais il offre une exp\u00e9rience presque transparente pour l&rsquo;ajout de filtres \u00e0 vos images. Le plugin comprend plus de 40 filtres uniques que vous pouvez ajouter \u00e0 n&rsquo;importe quelle image sur votre site. De plus, vous pouvez personnaliser l&rsquo;intensit\u00e9 de chaque filtre (c&rsquo;est-\u00e0-dire contr\u00f4ler dans quelle mesure vos images sont affect\u00e9es), <em>et<\/em> il fonctionne de mani\u00e8re transparente avec Divi pour d\u00e9marrer.<\/p>\n<p><strong>Caract\u00e9ristiques principales :<\/strong><\/p>\n<ul>\n<li>Ajoutez plus de 40 filtres d&rsquo;image \u00e0 votre galerie multim\u00e9dia WordPress.<\/li>\n<li>Enregistrez vos images personnalis\u00e9es en tant que nouvelles pi\u00e8ces jointes.<\/li>\n<li>Passez d&rsquo;un filtre \u00e0 l&rsquo;autre de mani\u00e8re transparente.<\/li>\n<\/ul>\n<p>Aucune autre configuration n&rsquo;est n\u00e9cessaire apr\u00e8s l&rsquo;installation du plugin. Cliquez simplement sur n&rsquo;importe quelle image dans votre m\u00e9diath\u00e8que WordPress, puis dans le menu de droite, faites d\u00e9filer vers le bas jusqu&rsquo;\u00e0 ce que vous atteigniez la liste des filtres disponibles. Chacun d&rsquo;entre eux comprend une vignette de pr\u00e9visualisation de l&rsquo;effet, mais \u00e0 moins que vous ne travailliez sur un grand \u00e9cran, il est pr\u00e9f\u00e9rable d&rsquo;appliquer l&rsquo;effet et de visualiser les changements. Quoi qu&rsquo;il en soit, il vous suffit de choisir un filtre, d&rsquo;en modifier l&rsquo;intensit\u00e9 et d&rsquo;enregistrer l&rsquo;image mise \u00e0 jour si vous \u00eates satisfait des r\u00e9sultats :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65110\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/image-filters-example.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/image-filters-example.png 945w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/image-filters-example-300x84.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/image-filters-example-768x216.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/image-filters-example-610x172.png 610w\" alt=\"Applying a filter to your images.\" width=\"880\" height=\"248\" \/><\/p>\n<p>Vous pouvez \u00e9galement ajouter des filtres \u00e0 vos images depuis l&rsquo;\u00e9diteur de WordPress. Il suffit de cliquer sur le bouton <em>Ajouter un m\u00e9dia <\/em>, de choisir l&rsquo;image que vous voulez et de r\u00e9p\u00e9ter le processus ci-dessus :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65111\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/insert-media.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/insert-media.png 925w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/insert-media-300x126.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/insert-media-768x321.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/insert-media-610x255.png 610w\" alt=\"Inserting an image into your post.\" width=\"880\" height=\"368\" \/><\/p>\n<p>Gardez cependant \u00e0 l&rsquo;esprit que vous ne pouvez <em>pas <\/em>acc\u00e9der aux filtres du plugin si vous essayez de modifier une image que vous avez d\u00e9j\u00e0 ajout\u00e9e \u00e0 un article. Vous devrez d&rsquo;abord la supprimer, ajouter le filtre \u00e0 partir de votre m\u00e9diath\u00e8que et placer la nouvelle image \u00e0 sa place. Mis \u00e0 part ce petit probl\u00e8me, le processus ne pourrait pas \u00eatre plus simple.<\/p>\n<h2>9 filtres d&rsquo;image WordPress que vous pouvez ajouter \u00e0 vos sites Web (\u00e0 l&rsquo;aide de CSS)<\/h2>\n<p>Si vous pr\u00e9f\u00e9rez ne pas installer de plugins suppl\u00e9mentaires &#8211; surtout s&rsquo;ils ont un prix &#8211; vous pouvez utiliser des effets CSS pour obtenir un aspect filtr\u00e9 similaire. Dans le pass\u00e9, nous avons parl\u00e9 de plusieurs fa\u00e7ons de personnaliser le CSS de votre site Web WordPress. Les utilisateurs de Divi devront se rendre dans l&rsquo;onglet <em>Divi<\/em> &gt; <em>Options du th\u00e8me<\/em> dans votre tableau de bord WordPress, et rechercher le champ <em>Custom CSS <\/em>en bas de la page :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65112\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/custom-css.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/custom-css.png 865w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/custom-css-300x84.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/custom-css-768x216.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/custom-css-610x171.png 610w\" alt=\"The Custom CSS field.\" width=\"880\" height=\"247\" \/><\/p>\n<p>Ici, vous pouvez coller le code CSS que vous trouverez dans chaque section (pour les filtres que vous voulez utiliser), enregistrer vos modifications, et vous \u00eates pr\u00eat \u00e0 partir.<\/p>\n<h3>1. Opacit\u00e9<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-65113\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/filter-opacity-example.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/filter-opacity-example.png 810w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/filter-opacity-example-300x93.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/filter-opacity-example-768x238.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/filter-opacity-example-610x189.png 610w\" alt=\"The opacity filter in action.\" width=\"880\" height=\"273\" \/><\/p>\n<p>Pour ce premier exemple, nous allons ajouter un filtre d&rsquo;opacit\u00e9 \u00e0 l&rsquo;une de vos images. Il s&rsquo;agit d&rsquo;un moyen de rendre vos images transparentes. Vous l&rsquo;utiliserez souvent pour r\u00e9duire la visibilit\u00e9 d&rsquo;une image (par exemple, si elle fait partie de l&rsquo;arri\u00e8re-plan) ou pour la superposer \u00e0 d&rsquo;autres images. Voici l&rsquo;extrait CSS que vous devez ajouter au champ <em>CSS personnalis\u00e9 <\/em>:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">.filter-opacity\n{\nfilter : opacity(.7) ;\n-webkit-filter : opacity(.7) ;\n}<\/pre>\n<p>Vous remarquerez que nous cr\u00e9ons ici une nouvelle classe CSS, appel\u00e9e <em>filter-opacity<\/em>. \u00c0 l&rsquo;int\u00e9rieur, nous avons appliqu\u00e9 un filtre d&rsquo;opacit\u00e9 d&rsquo;une intensit\u00e9 de <em> 0,7 <\/em>(qui peut \u00eatre modifi\u00e9e par toute valeur comprise entre z\u00e9ro et un), et nous utilisons \u00e0 la fois la propri\u00e9t\u00e9 <em>filter <\/em>et le filtre <a href=\"https:\/\/webkit.org\/\" target=\"_blank\" rel=\"noopener\">\u00ab\u00a0WebKit\u00a0\u00bb<\/a>. Ainsi, les navigateurs qui utilisent WebKit comme moteur de rendu CSS (comme Safari sur macOS) reconna\u00eetront \u00e9galement les instructions.<\/p>\n<p>Maintenant, pour tester notre nouveau filtre, nous allons ouvrir une de nos pages Divi et personnaliser le portrait d&rsquo;un membre de notre \u00e9quipe. Voici l&rsquo;image originale :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-65114\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/original-headshot.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/original-headshot.png 871w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/original-headshot-300x87.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/original-headshot-768x224.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/original-headshot-610x178.png 610w\" alt=\"Our example image without any filters.\" width=\"880\" height=\"257\" \/><\/p>\n<p>Pour appliquer le filtre, ouvrez la page \u00e0 l&rsquo;aide du Divi Builder et localisez le module <em>Image <\/em>correspondant. Cliquez ensuite sur le bouton <em>Param\u00e8tres du module <\/em>:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-65115\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/module-settings.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/module-settings.png 890w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/module-settings-300x59.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/module-settings-768x150.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/module-settings-610x119.png 610w\" alt=\"Clicking on your module settings option.\" width=\"880\" height=\"172\" \/><\/p>\n<p>Une fois que vous y \u00eates, allez dans l&rsquo;onglet <em>Avanc\u00e9 <\/em>et cherchez le champ <em>Classe CSS <\/em>, puis tapez le nom de votre nouvelle classe. Dans ce cas, il s&rsquo;agit de <em>filter-opacity<\/em>:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-65116\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/filter-opacity-class.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/filter-opacity-class.png 874w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/filter-opacity-class-300x79.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/filter-opacity-class-768x201.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/filter-opacity-class-610x160.png 610w\" alt=\"Adding the filter-opacity class to your image.\" width=\"880\" height=\"231\" \/><\/p>\n<p>Vous pouvez nommer les classes de votre filtre comme vous le souhaitez. Essayez simplement de leur donner un nom dont vous vous souviendrez facilement pour \u00e9viter toute confusion. Une fois que vous aurez enregistr\u00e9 vos modifications, vous pourrez voir les effets du filtre que vous avez appliqu\u00e9. Notez que ce processus est similaire pour tous les autres filtres CSS que vous souhaitez ajouter. Pour ajouter des filtres \u00e0 vos images, il suffit d&rsquo;ajouter la classe souhait\u00e9e aux images que vous voulez personnaliser.<\/p>\n<h3>2. S\u00e9pia<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-65117\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/example-sepia.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/example-sepia.png 806w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/example-sepia-300x90.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/example-sepia-768x230.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/example-sepia-610x182.png 610w\" alt=\"The sepia image filter in action.\" width=\"880\" height=\"263\" \/><\/p>\n<p>Les filtres s\u00e9pia offrent un excellent moyen d&rsquo;ajouter un aspect \u00ab\u00a0ancien\u00a0\u00bb \u00e0 vos images, bien que vous deviez l&rsquo;appliquer de mani\u00e8re s\u00e9lective car il est devenu un aspect d\u00e9pass\u00e9 s&rsquo;il est trop utilis\u00e9. Ce filtre applique un voile brun-rouge\u00e2tre sur vos images, les faisant ressembler \u00e0 des photographies d\u00e9lav\u00e9es. Voici le code dont vous aurez besoin pour ajouter ce filtre \u00e0 votre site Web :<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">.filter-sepia\n{\nfiltre : sepia(100%) ;\n-webkit-filter : sepia(100%) ;\n}<\/pre>\n<p>Dans cet exemple, nous avons d\u00e9cid\u00e9 d&rsquo;appliquer le filtre en utilisant un pourcentage. Vous pouvez utiliser ce pourcentage ou des d\u00e9cimales (ou les deux), mais nous vous recommandons de vous en tenir \u00e0 l&rsquo;un ou l&rsquo;autre pour \u00e9viter toute confusion. Dans ce cas, le chiffre un correspond \u00e0 un filtre dont la force est de 100 %.<\/p>\n<h3>3. Saturer<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-65118\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/saturate-example.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/saturate-example.png 811w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/saturate-example-300x89.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/saturate-example-768x228.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/saturate-example-610x181.png 610w\" alt=\"The saturate image filter in action.\" width=\"880\" height=\"262\" \/><\/p>\n<p>Saturer une image est un excellent moyen de raviver des couleurs ternes. Ce filtre augmente l&rsquo;intensit\u00e9 de toutes les couleurs de votre image. Prenez les jaunes dans l&rsquo;exemple ci-dessus, qui ressortent maintenant beaucoup plus qu&rsquo;avant. Voici le code que vous devez ajouter \u00e0 votre champ <em>CSS personnalis\u00e9 <\/em>:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">.filter-saturate\n{\nfilter : saturate(1) ;\n-webkit-filter : saturate(1) ;\n}<\/pre>\n<p>Dans ce cas, nous avons choisi une valeur de un pour sursaturer notre exemple, mais vous pouvez (bien s\u00fbr) ajuster les chiffres comme vous le souhaitez.<\/p>\n<h3>4. Inverser<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-65119\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/invert-example.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/invert-example.png 807w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/invert-example-300x90.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/invert-example-768x230.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/invert-example-610x183.png 610w\" alt=\"The invert image filter in action.\" width=\"880\" height=\"264\" \/><\/p>\n<p>Maintenant, quelque chose d&rsquo;un peu diff\u00e9rent &#8211; ce filtre inverse toutes les couleurs de votre image. Par exemple, le noir devient blanc, et ainsi de suite. Ce n&rsquo;est pas un filtre que l&rsquo;on voit souvent en photographie, mais c&rsquo;est aussi un moyen pratique d&rsquo;offrir une <a href=\"https:\/\/www.imore.com\/how-invert-screen-colors-iphone-and-ipad\" target=\"_blank\" rel=\"noopener\">accessibilit\u00e9 visuelle<\/a> \u00e0 certains visiteurs. Voici l&rsquo;extrait de code que vous devrez copier :<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">.filter-invert\n{\nfilter : invert(.8) ;\n-webkit-filter : invert(.8) ;\n}<\/pre>\n<p>Une valeur de un, dans ce cas, donnerait une image compl\u00e8tement invers\u00e9e. Il s&rsquo;agit d&rsquo;un filtre d\u00e9licat \u00e0 configurer, vous devrez donc peut-\u00eatre modifier la valeur jusqu&rsquo;\u00e0 ce que vous trouviez une force qui vous convienne.<\/p>\n<h3>5. Hue-Rotate<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-65120\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/hue-rotate-example.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/hue-rotate-example.png 809w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/hue-rotate-example-300x91.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/hue-rotate-example-768x234.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/hue-rotate-example-610x185.png 610w\" alt=\"The hue rotate image filter in action.\" width=\"880\" height=\"268\" \/><\/p>\n<p>Le filtre de <em>rotation de la teinte <\/em>est une autre option joker. Si vous avez d\u00e9j\u00e0 utilis\u00e9 un outil d&rsquo;\u00e9dition d&rsquo;images, vous connaissez peut-\u00eatre les roues chromatiques. Elles fonctionnent en affichant toutes les couleurs disponibles dans une roue, que vous pouvez ensuite utiliser pour s\u00e9lectionner les couleurs et les teintes que vous souhaitez. Ce filtre fonctionne sur ce principe, mais sans repr\u00e9sentation visuelle. Voyons le code pour que vous puissiez avoir une meilleure id\u00e9e de son fonctionnement :<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">.filter-rotate\n{\nfiltre : hue-rotate( deg ) ;\n}<\/pre>\n<p>Vous pouvez remplacer la valeur <em>deg <\/em>par n&rsquo;importe quel nombre allant de <em>0deg<\/em> \u00e0 <em>360deg<\/em>. Nous admettons que, sans un graphique vous donnant une indication de la couleur que vous choisissez, les r\u00e9sultats peuvent \u00eatre un peu al\u00e9atoires. C&rsquo;est un filtre amusant \u00e0 utiliser si vous voulez rendre les couleurs de vos photos al\u00e9atoires, mais il peut n\u00e9cessiter quelques ajustements pour obtenir exactement les teintes que vous souhaitez.<\/p>\n<h3>6. Niveaux de gris<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-65121\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/grayscale-example.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/grayscale-example.png 816w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/grayscale-example-300x90.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/grayscale-example-768x231.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/grayscale-example-610x183.png 610w\" alt=\"The grayscale image filter in action.\" width=\"880\" height=\"264\" \/><\/p>\n<p>Le filtre en niveaux <em>de gris<\/em> remplace les couleurs de vos images par des tons de gris. Il s&rsquo;agit d&rsquo;un moyen rapide de transformer vos photos en images anciennes en noir et blanc. Voici le code dont vous aurez besoin :<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">.filter-greyscale\n{\nfilter : grayscale(1) ;\n-webkit-filter : grayscale(1) ;\n}<\/pre>\n<p>Une valeur de 1 supprimera toutes les autres couleurs de vos images, tandis que les valeurs inf\u00e9rieures ne feront que les att\u00e9nuer. Vous remarquerez \u00e9galement que vous pouvez obtenir un effet similaire avec une faible valeur de <em>saturation<\/em>. Le choix de l&rsquo;une ou l&rsquo;autre de ces valeurs d\u00e9pend enti\u00e8rement de vos pr\u00e9f\u00e9rences personnelles.<\/p>\n<h3>7. Contraste<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-65122\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/contrast-example.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/contrast-example.png 814w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/contrast-example-300x90.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/contrast-example-768x229.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/contrast-example-610x182.png 610w\" alt=\"The contrast image filter in action.\" width=\"880\" height=\"263\" \/><\/p>\n<p>Le filtre de <em>contraste <\/em>est celui que vous connaissez le mieux. Il rend essentiellement les blancs plus blancs et les noirs plus sombres, ce qui vous permet de raviver les couleurs d\u00e9lav\u00e9es. Voici le CSS dont vous avez besoin pour l&rsquo;utiliser dans WordPress :<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">.filter-contrast\n{\nfilter : contrast(1) ;\n-webkit-filter : contrast(1) ;\n}<\/pre>\n<p>Comme toujours, la puissance du filtre d\u00e9pend de la valeur que vous saisissez ici, alors n&rsquo;h\u00e9sitez pas \u00e0 la modifier \u00e0 votre convenance.<\/p>\n<h3>8. Luminosit\u00e9<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-65123\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/brightness-example.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/brightness-example.png 814w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/brightness-example-300x88.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/brightness-example-768x226.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/brightness-example-610x180.png 610w\" alt=\"The brightness image filter in action.\" width=\"880\" height=\"259\" \/><\/p>\n<p>Le filtre de <em>luminosit\u00e9 <\/em>est tr\u00e8s simple. Il vous permet d&rsquo;\u00e9claircir ou d&rsquo;assombrir une image en fonction de la valeur que vous saisissez dans le code. Voici le code CSS de base :<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">.filter-brightness\n{\nfilter : brightness(1.5) ;\n-webkit-filter : brightness(.5) ;\n}<\/pre>\n<p>Dans ce cas, toute valeur <em>sup\u00e9rieure \u00e0 <\/em>un augmentera la luminosit\u00e9 de votre image, et les valeurs inf\u00e9rieures \u00e0 un l&rsquo;assombriront &#8211; gardez cela \u00e0 l&rsquo;esprit.<\/p>\n<h3>9. Flou<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-65124\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/blur-example.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/blur-example.png 813w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/blur-example-300x90.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/blur-example-768x230.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/11\/blur-example-610x183.png 610w\" alt=\"The blur image filter in action.\" width=\"880\" height=\"264\" \/><\/p>\n<p>Le dernier filtre, mais non le moindre, est le filtre <em>flou <\/em>. Il s&rsquo;agit \u00e9galement d&rsquo;un filtre populaire disponible dans la plupart des applications de retouche d&rsquo;images. Il donne un aspect \u00ab\u00a0flou\u00a0\u00bb \u00e0 vos images et peut \u00eatre utilis\u00e9 pour masquer des informations sensibles. Voici le code CSS dont vous avez besoin pour l&rsquo;impl\u00e9menter :<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">.filter-blur\n{\nfilter : blur(5px) ;\n-webkit-filter : blur(5px) ;\n}<\/pre>\n<p>Il existe en fait diff\u00e9rents types d&rsquo;effets de flou, et celui qui est int\u00e9gr\u00e9 \u00e0 CSS est un flou \u00a0\u00bb gaussien \u00a0\u00bb qui rend l&rsquo;image enti\u00e8re floue avec une superposition douce.<\/p>\n<h2>C&rsquo;est encore plus facile si vous \u00eates un utilisateur de Divi<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-66589\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/filters-blend-01.jpg\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/filters-blend-01.jpg 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/filters-blend-01-300x172.jpg 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/filters-blend-01-768x441.jpg 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/filters-blend-01-610x350.jpg 610w\" alt=\"\" width=\"880\" height=\"505\" \/><\/p>\n<p>Nous avons r\u00e9cemment publi\u00e9 une importante mise \u00e0 jour des fonctionnalit\u00e9s de conception qui a ajout\u00e9 des filtres de couleur, des effets et des modes de fusion pour toutes les images, tous les modules, toutes les rang\u00e9es et toutes les sections de Divi. Ainsi, pour les utilisateurs de Divi, vous pouvez faire tout ce qui pr\u00e9c\u00e8de (et bien plus encore) sans aucun code requis.<\/p>\n<h2>Conclusion<\/h2>\n<p>Les filtres d&rsquo;image peuvent avoir beaucoup plus d&rsquo;utilisations que ce \u00e0 quoi on pourrait s&rsquo;attendre de prime abord, \u00e9tant donn\u00e9 leur utilisation sur des sites tels qu&rsquo;Instagram. Par exemple, vous pouvez utiliser des filtres pour personnaliser les images que vous t\u00e9l\u00e9chargez sur WordPress, ou pour diff\u00e9rencier les graphiques de stock. Quoi qu&rsquo;il en soit, Divi permet d&rsquo;utiliser facilement des ajusteurs de couleurs, des effets et des modes de fusion pour toutes les images, modules, rang\u00e9es et sections de votre site Web.<\/p>\n<p>Les non-utilisateurs de Divi peuvent toujours utiliser un plugin pour ajouter plusieurs filtres d&rsquo;image \u00e0 WordPress. Il n&rsquo;y en a pas beaucoup qui r\u00e9pondent \u00e0 nos crit\u00e8res, bien que <a href=\"https:\/\/codecanyon.net\/item\/ultimate-image-filters-wordpress-plugin\/8074975\" target=\"_blank\" rel=\"noopener\">Ultimate Image Filters<\/a> soit l&rsquo;une des rares bonnes options. D&rsquo;autre part, l&rsquo;utilisation de CSS vous permet d&rsquo;avoir beaucoup plus de contr\u00f4le sur vos filtres et leur apparence. La mise en place de nouveaux filtres d&rsquo;images WordPress demande un peu de travail, mais l&rsquo;utilisation de Divi simplifie les choses.<\/p>\n<p><strong>Vous avez des questions sur la fa\u00e7on d&rsquo;ajouter des filtres d&rsquo;images WordPress \u00e0 votre site Web ? Parlons-en dans la section des commentaires ci-dessous !<\/strong><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Les filtres d&rsquo;image sont actuellement une m\u00e9thode tr\u00e8s populaire pour ajouter un \u00e9clat d&rsquo;aspect professionnel \u00e0 vos photos. Si vous \u00eates sur Instagram ou Snapchat, il y a de fortes chances que presque toutes les images que vous voyez soient pass\u00e9es par un filtre quelconque. Cependant, les filtres d&rsquo;image peuvent \u00eatre bien plus qu&rsquo;un simple [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":825767,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[186,1,1551],"tags":[],"class_list":["post-830333","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-non-classifiee","category-tips-tricks-2"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/830333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/comments?post=830333"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/830333\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/825767"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=830333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=830333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=830333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}