{"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:45:52","modified_gmt":"2019-12-14T10:45:52","slug":"wie-man-eine-sch%C3%B6ne-grid-galerie-zu-ihrer-website","status":"publish","type":"post","link":"https:\/\/kenzap.blog\/de\/wie-man-eine-sch%C3%B6ne-grid-galerie-zu-ihrer-website\/","title":{"rendered":"Wie man eine sch\u00f6ne Grid-Galerie zu Ihrer Website hinzuf\u00fcgt"},"content":{"rendered":"<p>Dieser Artikel erkl\u00e4rt im Detail, wie Sie mit Gutenberg Editor einen sch\u00f6nen Grid-Galerie-Bereich unter Ihrer Website hinzuf\u00fcgen und anpassen k\u00f6nnen. Daf\u00fcr brauchst du:<\/p>\n<ul>\n<li>Eine laufende WordPress Website<\/li>\n<li>Vorzugsweise <a href=\"https:\/\/blog.kenzap.com\/what-is-kenzap-core-theme\/\">Kenzap Core Design<\/a> vorinstalliert (optional)<\/li>\n<li><a href=\"https:\/\/github.com\/kenzap\/gallery-gutenberg-blocks\/archive\/master.zip\">Kenzap Gallery Plugin<\/a> vorinstalliert<\/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>Sobald die erforderlichen Komponenten installiert sind, k\u00f6nnen Sie den Gallery-Block hinzuf\u00fcgen, wie im Bild oben gezeigt. <em>Gehen Sie zu Seiten &gt; Neu hinzuf\u00fcgen &gt; klicken Sie auf das Pluszeichen und suchen Sie<\/em> nach der Kenzap <strong>Gallery 2.<\/strong> <\/p>\n<p>Standardm\u00e4\u00dfig ist der Galerieblock mit 12 verschiedenen Bildern vorinstalliert, die Sie ersetzen oder komplett entfernen k\u00f6nnen.<\/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>Anpassen der Galerie<\/h2>\n<p>Derzeit unterst\u00fctzt dieser Block die folgenden Einstellungen (\u00c4nderungen in zuk\u00fcnftigen Releases vorbehalten)<\/p>\n<ul>\n<li><strong>Filter<\/strong> &#8211; Navigationslinks oben in der Galerie. Filter werden verwendet, um Bilder zu kategorisieren und je nach Filterauswahl auszublenden.<\/li>\n<li><strong>Bildstil<\/strong> &#8211; wird als Bildseitenverh\u00e4ltnis verwendet, um zwischen quadratischer Bildgr\u00f6\u00dfe, Hochformat und horizontaler Bildgr\u00f6\u00dfe zu w\u00e4hlen.<\/li>\n<li><strong>Spalten<\/strong> &#8211; w\u00e4hrend der Desktop-Vorschau l\u00e4dt das Gitter der Galerie standardm\u00e4\u00dfig drei Spalten. Verwenden Sie diese Einstellung, um die Anzahl der Spalten im Desktop-Modus zu begrenzen. Die Anzahl der Spalten wird bei Tabletts und mobilen Ger\u00e4ten automatisch reduziert.<\/li>\n<li><strong>Paddings<\/strong> &#8211; f\u00fcgt zus\u00e4tzliche Abst\u00e4nde zwischen den Bildern hinzu.<\/li>\n<li><strong>Farben<\/strong> &#8211; betonen Sie bestimmte Designelemente der Galerie, wie z.B. die Farbe des Image Hover Overlays.<\/li>\n<li><strong>Hover-Opazit\u00e4t<\/strong> &#8211; f\u00fcgt der Overlay-Farbe Transparenz hinzu.<\/li>\n<li><strong>Typografie<\/strong> &#8211; Passen Sie die Schriften an die Gr\u00f6\u00dfe der Farben an, etc.<\/li>\n<li><strong>Hintergrund<\/strong> &#8211; Hintergrundeinstellungen der Galerie.<\/li>\n<li><strong>Beh\u00e4lter<\/strong> &#8211; stellen Sie die maximale Beh\u00e4lterbreite ein oder stellen Sie reaktionsschnelle Polster ein.<\/li>\n<li><strong>Erweitert<\/strong> &#8211; f\u00fcgt dem Galerie-Container eine benutzerdefinierte Klasse hinzu.<\/li>\n<\/ul>\n<h2>Wie kann man das Bild hinzuf\u00fcgen oder \u00e4ndern?<\/h2>\n<p><strong>Bildwechsel.<\/strong> Um das Bild zu \u00e4ndern, vergewissern Sie sich zuerst, dass der Galerieblock im Fokus ist, klicken Sie dann auf das zu ersetzende Bild und klicken Sie auf die Schaltfl\u00e4che <strong>\u00c4ndern<\/strong>. Holen Sie sich das Bild aus Ihrer Galerie oder laden Sie ein neues hoch.<\/p>\n<p><strong>Hinzuf\u00fcgen eines Bildes.<\/strong> Um ein neues Bild hinzuzuf\u00fcgen, klicken Sie auf die Schaltfl\u00e4che <strong>Neues Bild hinzuf\u00fcgen<\/strong>, die sich unterhalb der Galeriebilder befindet, wie auf dem Bild oben gezeigt. Vergewissern Sie sich, dass der Galerieriegel im Fokus ist.<\/p>\n<p><strong>Bild entfernen<\/strong>. Um das Bild zu entfernen, bewegen Sie den Mauszeiger \u00fcber das Bild und klicken Sie auf das schwarze Kreuz in der linken oder rechten oberen Ecke des Bildes.<\/p>\n<h2>Fehlerbehebungs-Galerie<\/h2>\n<p>Wenn Sie die Galerie in Kombination mit anderen Themen und nicht mit dem <strong>Kenzap Core Thema<\/strong> verwenden, k\u00f6nnen Sie einige visuelle Probleme erleben. Dies geschieht h\u00f6chstwahrscheinlich, weil jedes Design seine eigene Struktur und eigene CSS-Regeln hat.<\/p>\n<p>Das h\u00e4ufigste Problem ist die schmale Containerbreite, besonders wenn das Thema eine Seitenleiste hat. Wenn dies Ihr Fall ist, k\u00f6nnen Sie keine Container-Layouts mit breiter und voller Breite verwenden. Dar\u00fcber hinaus m\u00fcssen Sie die <em>Einstellung Container &gt; Max width<\/em> auf 600px oder weniger reduzieren. Dadurch wird die Galerie gezwungen, den Tablet- oder Mobilmodus auch im Desktop-Modus zu laden.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dieser Artikel erkl\u00e4rt im Detail, wie Sie mit Gutenberg Editor einen sch\u00f6nen Grid-Galerie-Bereich unter Ihrer Website hinzuf\u00fcgen und anpassen k\u00f6nnen. Daf\u00fcr brauchst du: Eine laufende WordPress Website Vorzugsweise Kenzap Core Design vorinstalliert (optional) Kenzap Gallery Plugin vorinstalliert Sobald die erforderlichen Komponenten installiert sind, k\u00f6nnen Sie den Gallery-Block hinzuf\u00fcgen, wie im Bild oben gezeigt. Gehen Sie &hellip; <a href=\"https:\/\/kenzap.blog\/de\/wie-man-eine-sch%C3%B6ne-grid-galerie-zu-ihrer-website\/\" 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\/de\/wp-json\/wp\/v2\/posts\/284"}],"collection":[{"href":"https:\/\/kenzap.blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kenzap.blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kenzap.blog\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kenzap.blog\/de\/wp-json\/wp\/v2\/comments?post=284"}],"version-history":[{"count":0,"href":"https:\/\/kenzap.blog\/de\/wp-json\/wp\/v2\/posts\/284\/revisions"}],"wp:attachment":[{"href":"https:\/\/kenzap.blog\/de\/wp-json\/wp\/v2\/media?parent=284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kenzap.blog\/de\/wp-json\/wp\/v2\/categories?post=284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kenzap.blog\/de\/wp-json\/wp\/v2\/tags?post=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}