{"id":284,"date":"2019-08-26T15:08:03","date_gmt":"2019-08-26T15:08:03","guid":{"rendered":"https:\/\/blog.kenzap.com\/?p=284"},"modified":"2019-12-14T10:46:15","modified_gmt":"2019-12-14T10:46:15","slug":"comment-ajouter-une-belle-galerie-de-grilles-%C3%A0-votre-site-web","status":"publish","type":"post","link":"https:\/\/kenzap.blog\/fr\/comment-ajouter-une-belle-galerie-de-grilles-%C3%A0-votre-site-web\/","title":{"rendered":"Comment ajouter une belle galerie de grilles \u00e0 votre site Web"},"content":{"rendered":"<p>Cet article explique en d\u00e9tail comment ajouter et personnaliser une belle section de galerie de grilles sous votre site web en utilisant l&#8217;\u00e9diteur Gutenberg. Pour cela, vous avez besoin :<\/p>\n<ul>\n<li>Un site WordPress en cours d&#8217;ex\u00e9cution<\/li>\n<li>De pr\u00e9f\u00e9rence le <a href=\"https:\/\/blog.kenzap.com\/what-is-kenzap-core-theme\/\">th\u00e8me Kenzap Core<\/a> pr\u00e9install\u00e9 (en option)<\/li>\n<li><a href=\"https:\/\/github.com\/kenzap\/gallery-gutenberg-blocks\/archive\/master.zip\">Kenzap Gallery plugin<\/a> pr\u00e9-install\u00e9<\/li>\n<\/ul>\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.kenzap.com\/wp-content\/uploads\/2019\/08\/i177_search.jpeg\" alt=\"Preview of Minimalistic Gallery Grid - Kenzap Gallery plugin\" class=\"wp-image-285\"\/><\/figure>\n<p>Une fois les composants requis install\u00e9s, vous pouvez ajouter le bloc Galerie comme indiqu\u00e9 dans l&#8217;image ci-dessus. <em>Allez dans Pages &gt; Ajouter un nouveau &gt; cliquez sur le signe plus et cherchez<\/em> Kenzap <strong>Gallery 2.<\/strong> <\/p>\n<p>Par d\u00e9faut, le bloc galerie est pr\u00e9charg\u00e9 avec 12 images diff\u00e9rentes que vous pouvez remplacer ou supprimer compl\u00e8tement.<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.kenzap.com\/wp-content\/uploads\/2019\/08\/gallery_grid_gutenbeg_block-1200x621.png\" alt=\"\" class=\"wp-image-293\"\/><\/figure>\n<h2>Personnaliser la galerie<\/h2>\n<p>Actuellement, ce bloc prend en charge les param\u00e8tres suivants (sous r\u00e9serve de modifications dans les prochaines versions)<\/p>\n<ul>\n<li><strong>Filtres<\/strong> &#8211; liens de navigation situ\u00e9s en haut de la galerie. Les filtres sont utilis\u00e9s pour cat\u00e9goriser les images et les masquer en fonction de la s\u00e9lection du filtre.<\/li>\n<li><strong>Style d&#8217;image<\/strong> &#8211; utilis\u00e9 comme rapport d&#8217;aspect de l&#8217;image pour choisir la taille de l&#8217;image carr\u00e9e, la taille de l&#8217;image portrait, la taille de l&#8217;image horizontale.<\/li>\n<li><strong>Colonnes<\/strong> &#8211; pendant la pr\u00e9visualisation du bureau, la grille de la galerie charge trois colonnes par d\u00e9faut. Utilisez ce param\u00e8tre pour limiter le nombre de colonnes en mode bureau. Le nombre de colonnes est r\u00e9duit automatiquement pour les tablettes et les appareils mobiles.<\/li>\n<li><strong>Rembourrage<\/strong> &#8211; ajoutez des espaces suppl\u00e9mentaires entre les images.<\/li>\n<li><strong>Couleurs<\/strong> &#8211; mettez l&#8217;accent sur certains \u00e9l\u00e9ments de design de la galerie comme la couleur de surimpression de l&#8217;image.<\/li>\n<li><strong>Opacit\u00e9 au survol<\/strong> &#8211; ajoute de la transparence \u00e0 la couleur de surimpression.<\/li>\n<li><strong>Typographie<\/strong> &#8211; personnaliser la taille des polices de caract\u00e8res, la taille des couleurs, etc.<\/li>\n<li><strong>Arri\u00e8re-plan<\/strong> &#8211; param\u00e8tres d&#8217;arri\u00e8re-plan de la galerie.<\/li>\n<li><strong>Conteneur<\/strong> &#8211; d\u00e9finir la largeur maximale du conteneur ou d\u00e9finir des rembourrages r\u00e9actifs.<\/li>\n<li><strong>Avanc\u00e9<\/strong> &#8211; ajouter une classe personnalis\u00e9e dans le conteneur de la galerie.<\/li>\n<\/ul>\n<h2>Comment ajouter ou modifier l&#8217;image ?<\/h2>\n<p><strong>Changement d&#8217;image<\/strong>. Pour changer l&#8217;image, assurez-vous d&#8217;abord que le bloc Galerie est mis au point, puis cliquez sur l&#8217;image que vous voulez remplacer et cliquez sur le bouton <strong>changer<\/strong>. Prenez l&#8217;image de votre galerie ou t\u00e9l\u00e9chargez-en une nouvelle.<\/p>\n<p><strong>Ajout d&#8217;une image<\/strong>. Pour ajouter une nouvelle image, cliquez sur le bouton <strong>Ajouter une nouvelle image<\/strong> qui se trouve sous les images de la galerie comme indiqu\u00e9 sur l&#8217;image ci-dessus. Assurez-vous que le bloc Galerie est mis au point.<\/p>\n<p><strong>Suppression d&#8217;une image<\/strong>. Pour supprimer l&#8217;image, passez le curseur sur l&#8217;image et cliquez sur la croix noire dans le coin sup\u00e9rieur gauche ou droit de l&#8217;image.<\/p>\n<h2>Galerie de d\u00e9pannage<br \/>\n<\/h2>\n<p>Si vous utilisez la galerie en combinaison avec d&#8217;autres th\u00e8mes plut\u00f4t qu&#8217;avec le <strong>th\u00e8me Kenzap Core<\/strong>, vous pouvez rencontrer des probl\u00e8mes visuels. Cela se produit tr\u00e8s probablement parce que chaque th\u00e8me a sa propre structure unique et des r\u00e8gles de style CSS personnalis\u00e9es.<\/p>\n<p>Le probl\u00e8me le plus courant est li\u00e9 \u00e0 la largeur \u00e9troite des conteneurs, surtout lorsque le th\u00e8me a une barre lat\u00e9rale. Si c&#8217;est votre cas, vous ne pouvez pas utiliser les mod\u00e8les de conteneurs larges et pleine largeur. En outre, vous devez r\u00e9duire le <em>param\u00e8tre Conteneur &gt; Largeur maximale<\/em> \u00e0 600px ou moins. Ceci forcera la galerie \u00e0 charger la tablette ou le mode mobile m\u00eame en mode bureau.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cet article explique en d\u00e9tail comment ajouter et personnaliser une belle section de galerie de grilles sous votre site web en utilisant l&#8217;\u00e9diteur Gutenberg. Pour cela, vous avez besoin : Un site WordPress en cours d&#8217;ex\u00e9cution De pr\u00e9f\u00e9rence le th\u00e8me Kenzap Core pr\u00e9install\u00e9 (en option) Kenzap Gallery plugin pr\u00e9-install\u00e9 Une fois les composants requis install\u00e9s, &hellip; <a href=\"https:\/\/kenzap.blog\/fr\/comment-ajouter-une-belle-galerie-de-grilles-%C3%A0-votre-site-web\/\" class=\"more-link\">Continue reading <\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,13,14],"tags":[],"_links":{"self":[{"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/posts\/284"}],"collection":[{"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/comments?post=284"}],"version-history":[{"count":0,"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/posts\/284\/revisions"}],"wp:attachment":[{"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/media?parent=284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/categories?post=284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/tags?post=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}