Egal, ob Sie Freiberufler oder ein anderer Kreativer sind, der seine Arbeit online präsentieren möchte, oder einfach nur Ihre Website oder Ihren Blog für Ihre Besucher interessanter gestalten möchten, das Hinzufügen einer Bildergalerie ist eine großartige Möglichkeit, dies zu tun. Schließlich können Bildergalerien ein wesentlicher Bestandteil des Designs Ihrer Website sein, insbesondere wenn Sie auf visuelle Elemente angewiesen sind, um Ihre Marke oder Ihr Geschäft richtig zu präsentieren.
Bei Ihrer Suche nach einer perfekten Möglichkeit, verschiedene Arten von Bildern auf Ihrer Website anzuzeigen, sind Sie wahrscheinlich auch auf einige verschiedene Arten von Galerien gestoßen – wie Karussell-Bildergalerie, Pinterest-Galerie und Mauerwerk, um nur einige zu nennen. Und obwohl jeder dieser Galerietypen für sich genommen großartig ist, werden wir uns dieses Mal besonders auf Mauerwerksgalerien konzentrieren. Nämlich diese Art von Galerien ermöglichen es Ihnen, Ihre Bilder visuell ansprechend anzuordnen, indem Sie jedes Bild seine Proportionen beibehalten und auch den Abstand zwischen den einzelnen Bildern konstant halten und gut optimiert, sodass kein Platz ungenutzt bleibt. Als Ergebnis können Sie mehrere Bilder mit unterschiedlichen Größen in einer zusammenhängenden Einheit organisieren, sodass Ihre Galerie für jeden, der sie betrachtet, attraktiv und professionell erscheint.
Dieses Mal, Wir führen Sie durch die Erstellung einer Mauerwerksgalerie in WordPress mit unseren eigenen Qi-Addons für Elementor-Plugin, also unbedingt weiterlesen.
Erstellen einer Mauerwerk-Bildergalerie mit den Qi-Addons für das Elementor-Plugin
Mit einem Satz von 60 vollständig flexiblen Widgets ist Qi Addons für Elementor ein großartiges kostenloses Plugin, mit dem Sie praktisch jede erdenkliche Art von Seite erstellen können. Sie können alle Arten von Add-Ons kombinieren, um das gewünschte Aussehen für Ihre Seite oder Ihren Bereich zu erhalten – von Portfolio- und Business-Add-Ons bis hin zu WooCommerce und kreativen Add-Ons.
Jetzt ist das Masonry Image Gallery-Widget ein weiteres großartiges Widget in dieser Sammlung, mit dem Sie wunderschöne und fesselnde Galerien für Ihre Site erstellen können. Das Widget ist vollständig anpassbar und ermöglicht es Ihnen, fügen Sie verschiedene Bilder hinzu und wählen Sie deren Größe mit größter Leichtigkeit. Sie kommen auch zu Passen Sie den Abstand zwischen den Bildern an, fügen Sie Hover-Effekte hinzu, und mehr.
Wir werden einige der Dinge demonstrieren, die Sie mit diesem Widget mit seinen vielseitigen Optionen tun können. Stellen Sie einfach sicher, dass der Elementor Page Builder zuerst installiert ist, um das Qi Addons für Elementor-Plugin auf Ihrer Site zu verwenden. Die kostenlose Version des Page Builders reicht aus.
Falls Sie es vorziehen, Videos anzusehen, anstatt zu lesen, sollten Sie sich unser Video ansehen, das das gleiche Thema behandelt:
Gehen Sie zum Backend Ihrer Seite oder Ihres Beitrags und suchen Sie das Mauerwerk-Bildergalerie-Widget in Ihrer Elementor-Seitenleiste.
Ziehen Sie es anschließend einfach auf die rechte Seite des Bildschirms.
Sie werden feststellen, dass das Widget standardmäßig leer ist. Dies ist völlig normal, da Sie noch keine Bilder hinzufügen müssen.
Wir sollten auch gleich erwähnen, dass Sie einige zusätzliche Optionen einstellen müssen, wenn Sie möchten, dass Ihr Mauerwerks-Galeriebereich wie unserer in voller Breite angezeigt wird.
Es besteht die Möglichkeit, dass Ihre Galerie standardmäßig geboxt ist. Wenn Sie diese Einstellung jedoch ändern möchten, können Sie dies einfach tun, indem Sie auf das Menü Abschnitt bearbeiten zugreifen. Klicken Sie auf die Schaltfläche, die oben in Ihrem Abschnitt angezeigt wird, genau in der Mitte:
Verwenden Sie dann die Layout Abschnitt auf der linken Seite, Sie sollten einfach auswählen Gesamtbreite für Ihre Inhaltsbreite statt Boxed.
Natürlich können Sie stattdessen auch die Option „Boxed“ verwenden und dann über den Schieberegler die gewünschte Breite einstellen:
Wenn Sie zwischen den Rändern der Seite und Ihrer Galerie keinen Platz haben möchten, können Sie auch das gesamte Seitenlayout auf die volle Breite ändern. Gehen Sie dazu zu den Seiteneinstellungen und wählen Sie das Elementor volle Breite Möglichkeit. Wenn Sie das Qi-Theme verwenden, können Sie alternativ auch mit dem Qi volle Breite Möglichkeit.
Schließlich können Sie auch die Spaltenlückenoption auf setzen Keine Lücke um eine Galerie ohne Lücken zwischen den Spalten zu erstellen.
Sie können diese Einstellungen beliebig kombinieren, bis Sie den gewünschten Look für Ihr Galerie-Layout/Ausschnitt erreicht haben.
Nachdem Sie nun den bevorzugten Abschnitt und/oder die Seitenbreite festgelegt haben, können Sie Ihre Bilder als Elemente hinzufügen. Klicken Sie auf die Schaltfläche „+Artikel hinzufügen“ und klicken Sie dann auf das Bildfeld, um Ihr Bild auszuwählen.
Klicken Sie dann auf Medien einlegen.
Unten wird das neue Feld angezeigt, in dem Sie Ihre auswählen können Bildgröße. Sie können zwischen Quadrat, Querformat, Hochformat und Riesiges Quadrat wählen. Wir haben uns für unser Beispiel für die Square-Option entschieden.
Von da an können Sie so viele Bilder hinzufügen, wie Sie möchten, indem Sie auf das +Artikel hinzufügen und wählen Sie dann das Bild aus Ihrer Medienbibliothek aus.
Wir haben unserer eigenen Galerie auf die gleiche Weise einige weitere Bilder hinzugefügt, mit Ausnahme einiger Abweichungen in der Größe.
Hier ist das Aussehen unserer Mauerwerk-Galerie, nachdem wir alle Bilder hinzugefügt haben. Wir haben insgesamt acht Bilder hinzugefügt, sodass wir auch acht verschiedene Elemente in unseren Optionen haben.
Jetzt im Galerieeinstellungen Abschnitt finden Sie einige nützliche Optionen, mit denen Sie das Aussehen Ihrer Galerie weiter anpassen können.
Dazu gehört die Lightbox-Popup aktivieren Option, die das Bild als Overlay öffnet, sobald es angeklickt wird. Außerdem können Besucher Ihre gesamte Galerie durchsuchen. Wir haben diese Einstellung für unser Beispiel aktiviert.
Als nächstes können Sie die Anzahl der Spalten mit der gleichnamigen Option auswählen. Es ist standardmäßig auf drei eingestellt, aber Sie können zwischen einer und acht Spalten wählen. Wir haben vier Spalten für unsere Galerie ausgewählt:
Wie Sie sehen, haben die Bilder ihre ursprünglichen Proportionen beibehalten, obwohl sie sich an diese neue Spaltenanordnung angepasst haben.
Dann können Sie die Responsive Spalten Option, um auszuwählen, wie Ihre Galerie auf verschiedenen Bildschirmgrößen angezeigt wird.
Es ist standardmäßig auf Vordefiniert eingestellt, aber Sie können Benutzerdefiniert auswählen, um die Anzahl der Spalten für jede Bildschirmgröße auszuwählen. Sie können die gewünschte Anzahl einfach über das Dropdown-Menü neben der spezifischen Größe anpassen, die Sie ändern möchten.
Wie der Name vermuten lässt, ist die Abstand zwischen Elementen Mit dieser Option können Sie den Abstand zwischen Ihren Bildern anpassen. Sie können dies entweder tun, indem Sie den Schieberegler verwenden oder einen neuen Wert eingeben (wir haben 26px für unseren hinzugefügt).
Jetzt die Bild-Hover Mit dieser Option können Sie die Art und Weise anpassen, wie Ihr Bild beim Hover angezeigt wird. Sie können Vergrößern, Verkleinern, Verschieben oder Keine auswählen.
Wir haben uns für die Standardoption (Zoom In) entschieden:
Wenn Sie am Ende einen der oben genannten Zoomeffekte auswählen (Zoom In oder Zoom Out), können Sie auch das Bild verwenden Hover Zoom Ursprung Möglichkeit. Diese Option ist besonders interessant, da Sie damit den bestimmten Teil Ihres Bildes auswählen können, der vergrößert (oder verkleinert) wird. Wir haben diese Einstellung in der Mitte beibehalten, aber Sie können ruhig damit herumspielen, um zu sehen, welche Ihnen am besten gefällt.
Als nächstes ist der Overlay-Farbe Möglichkeit. Sie können eine beliebige Farbe aus dem Farbwähler auswählen und dann mit dem Schieberegler die gewünschte Transparenz einstellen.
Wie Sie sehen, werden Ihre Bilder unter der ausgewählten Farbe angezeigt.
Der Overlay-Hover-Farbe Option funktioniert auf ähnliche Weise, mit dem Unterschied, dass Ihre Farbe beim Bewegen der Maus angezeigt wird.
Auch hier müssen Sie den Transparenzgrad auswählen, um Ihre Bilder sichtbar zu machen. So kann Ihre Galerie aussehen, wenn Sie diese Option verwenden:
Und das ist es, wenn es darum geht Galerieeinstellungen. Endlich können Sie die Veröffentlichen/Aktualisieren -Button und dann fahren Sie fort und sehen Sie, wie Ihre Masonry-Galerie auf Ihrer Seite/Ihrem Beitrag aussieht.
Fazit
Wie Sie aus dem oben gezeigten Beispiel sehen können, gibt es viele verschiedene Möglichkeiten, das Aussehen Ihrer Mauerwerksgalerie mit den Qi-Addons für das Mauerwerksgalerie-Widget von Elementor anzupassen. Abhängig von den spezifischen Optionen, die Sie auswählen, können Sie das Aussehen Ihrer Galerie drastisch ändern und an Ihr Design anpassen. Sie können die Hover-Optionen ändern, den Abstand zwischen Elementen anpassen, Bildgrößen festlegen und alle anderen verfügbaren Einstellungen mischen und anpassen. Egal, ob Sie unser Design kopieren oder sich für etwas ganz anderes entscheiden, die flexiblen Optionen des Plugins helfen Ihnen, visuell beeindruckende Mauerwerksgalerien zu erstellen und ein unvergessliches Erlebnis für Ihre Website-Besucher zu schaffen. Wir empfehlen Ihnen dringend, diesem Tutorial zu folgen und das Widget selbst auszuprobieren.
Unterstützen Sie unsere Arbeit ❤️
Wenn Ihnen dieser Artikel gefallen hat, können Sie uns mit einem Trinkgeld unterstützen, damit wir weiterhin großartige Inhalte veröffentlichen können.
