Wenn Sie Bilder haben, die Sie auf Ihrer WordPress-Website anzeigen möchten, ist das Einfügen in eine Bildergalerie im Pinterest-Stil eine der beliebtesten Möglichkeiten. Tatsächlich so beliebt, dass Sie viele Premium-WordPress-Themes finden, die es verwenden.
Es kann auch ein Kinderspiel sein, es zu erstellen – wir haben es mit unseren Qi Addons für Elementor-Plugin geschafft. Unter den sechzig Elementor-Addons, die Sie im Plugin erhalten – das meiste, was Sie in einem kostenlosen Plugin finden – finden Sie ein Pinterest-Bildergalerie-Widget.
Wir zeigen Ihnen, wie Sie mit dem Widget in wenigen Schritten eine Bildergalerie im Pinterest-Stil in WordPress erstellen. Wir haben ein Video-Tutorial für alle erstellt, die Videos bevorzugen, und wir werden sie hier einbetten, wenn Sie sie sehen möchten.
Wenn Sie lesen möchten, wie wir eine der Beispielgalerien erstellt haben, die Sie auf der Seite des Widgets sehen, können Sie bei diesem Artikel bleiben.
Hinzufügen einer Bildergalerie im Pinterest-Stil in WordPress
Um dieser Demonstration folgen und eigene tolle Bildergalerien im Pinterest-Stil erstellen zu können, benötigen Sie zwei Schlüsselkomponenten – Elementor und unser Qi-Addons für Elementor Plugin. Sie können sich auch unser kostenloses Qi WordPress-Theme ansehen, wenn Sie sich immer noch nicht für eines für Ihre Website entschieden haben und etwas möchten, das ohne den Premium-Preis erstklassig aussieht und sich anfühlt.
Ihr erster Schritt wäre also, Elementor zu installieren und zu aktivieren und dann das Qi-Addons für Elementor-Plugin zu installieren und zu aktivieren. Danach können Sie eine neue Seite oder einen neuen Beitrag erstellen, auf der Sie die Bildergalerie hinzufügen oder einen Beitrag oder eine Seite öffnen möchten, die Sie bearbeiten möchten. In jedem Fall, Wenn Sie auf der Registerkarte „Elemente“ nach „Pinterest“ suchen, wird das Pinterest-Bildergalerie-Widget angezeigt, und es reicht aus, es in einen freien Abschnitt zu ziehen, um loszulegen.
Die Tatsache, dass wir vor dem Hinzufügen des Widgets keine Spalten erstellt haben, sollte Sie nicht beunruhigen. Auch sollte das etwas schlichte und leere Aussehen des Widgets nicht sein, bevor der Galerie Bilder hinzugefügt werden.
Dies wäre ein guter Zeitpunkt, um darauf hinzuweisen, dass Sie wahrscheinlich einige Einstellungen durchsuchen müssen, wenn Sie Ihre Bildergalerie wirklich in voller Breite haben möchten, wie die, die wir Ihnen hier zeigen. Standardmäßig ist die Galerie möglicherweise eingerahmt, sodass zwischen den Kanten der Galerie und den Kanten der Seite etwas Platz bleibt. Dies kann vom verwendeten Design und dem gewählten Layout abhängen.
Wir zeigen Ihnen, wie wir unser Layout und unseren Bereich so eingerichtet haben, dass die Galerie die volle Bildschirmbreite einnimmt. Zunächst finden Sie in den Seiteneinstellungen die Layoutoptionen, mit denen Sie die breiteste auswählen können. In unserem Fall war es beim Qi-Thema die Qi-Option mit voller Breite. Wenn Sie ein anderes Thema verwenden, wählen Sie die Elementor-Vorlage mit voller Breite oder eine ähnliche Option, die mit Ihrem Thema geliefert wird.
Bei der Auswahl dieses Layouts wurde der Abschnitt in voller Breite angezeigt, sein Inhalt blieb jedoch eingerahmt. So sah es aus, als wir unsere Galerie erstellten.
Um dies zu beheben, mussten wir auf das Menü Abschnitt bearbeiten zugreifen, indem wir die mittlere Taste über dem Abschnitt drücken, der weder das „+“ zum Hinzufügen eines neuen Abschnitts noch das „x“ zum Löschen des vorhandenen Abschnitts ist. In den Optionen zum Bearbeiten des Abschnitts haben wir Volle Breite für unsere Inhaltsbreite anstelle der standardmäßigen Boxed-Option gewählt und die Option Spaltenlücke auf Keine Lücke gesetzt.
Das hat funktioniert und uns die breitestmögliche Galerie ohne Lücken gegeben. Sie können natürlich beide das Box-Setup verlassen oder andere Optionen für die Lücken wählen – Genau so haben wir es bei der Erstellung des Beispiels gemacht.
Einrichten der Bildergalerie
Nun zum lustigen Teil – Bilder hinzufügen und die Galerie einrichten. Auf der Registerkarte Inhalt der Pinterest-Bildergalerie sehen Sie, dass Sie mit den allgemeinen Optionen Bilder auswählen können. Durch Drücken der Schaltfläche zum Erstellen einer Galerie gelangen Sie in ein Menü, in dem Sie Bilder aus Ihrer Mediathek auswählen oder neue hochladen können. Wir haben zehn Bilder ausgewählt, die sich bereits in unserer Mediathek befanden.
Nachdem Sie die neue Galerie erstellt und in das Widget eingefügt haben, sehen Sie, wie eine Standardgalerie aussieht. Da wir die Breiteneinstellungen zuvor vorgenommen haben, war unsere die volle Breite, und sie wurde in drei Spalten mit etwas Abstand zwischen den Elementen geliefert.
Im nächsten Stapel von Einstellungen können Sie einige ziemlich wichtige Änderungen an der Galerie vornehmen. Mit der ersten Option in den Galerieeinstellungen können Sie beispielsweise auswählen, ob benutzerdefinierte Links für die Bilder aktiviert werden sollen. Dadurch wird jedoch die Lightbox-Popup-Option standardmäßig deaktiviert. Die anderen Optionen, die Sie auswählen können, umfassen die Anzahl der Spalten – die Sie für unterschiedlich große Bildschirme unterschiedlich einstellen können, den Abstand zwischen den Elementen, den Bild-Hover-Effekt und die Überlagerungsfarben für die normale Ansicht und beim Hover.
Wir haben das Lightbox-Popup aktiviert, da dies eine sehr nützliche Option ist. Wir haben fünf Spalten für unsere Galerie ausgewählt, aber Wir haben einige Anpassungen in den Spalten Responsive-Optionen vorgenommen. Für die beiden größten Bildschirmgrößen haben wir fünf Spalten gewählt. Für den nächsten setzen wir drei und folgen mit einer zwei, bevor wir mit zwei einzelnen Spalten fertig sind. Wir wollten den zusätzlichen Platz nutzen, den die größeren Bildschirme bieten, um mehr Spalten für einen ansprechenden ästhetischen Effekt anzuzeigen und gleichzeitig die Bilder groß genug zu halten. Der Versuch, dasselbe mit einem kleineren, schmaleren Bildschirm zu tun, würde die Bilder zu klein werden lassen. Deshalb haben wir umso weniger Spalten verwendet, je schmaler der Bildschirm ist. Sie werden jedoch immer noch da sein, nur einer unter dem anderen, anstatt eines neben dem anderen.
Wir haben den Abstand zwischen den Elementen auf Null gesetzt und das Bild zum Verkleinern beim Schweben ausgewählt, wobei die Mitte der Bild-Hover-Zoom-Ursprung ist. Wir haben uns dagegen entschieden, eine Overlay-Farbe hinzuzufügen, sowohl normal als auch beim Schweben, aber Sie können es gerne hinzufügen, wenn Sie Ihre Galerie ein wenig aufpeppen möchten. Denken Sie daran, jeder ausgewählten Farbe einen gewissen Grad an Transparenz hinzuzufügen, es sei denn, Sie möchten, dass die Bilder in Ihrer Galerie vollständig ausgeblendet werden.
Der letzte Schliff, den wir angewendet haben, war die Neuordnung der Bilder. Wenn Sie zurück zu den allgemeinen Optionen navigieren, können Sie durch Klicken auf das Galeriefenster die Galerie bearbeiten. Durch einfaches Verschieben der Bilder ändert sich die Reihenfolge, in der sie auf der Seite erscheinen. Nach Fertigstellung und erneutem Einfügen der Galerie war dies das Ergebnis.
Lass es uns einwickeln!
Abhängig von Ihrem Beruf und dem Zweck Ihrer Website sind Bilder möglicherweise der wichtigste Inhaltstyp, den Sie hosten können. Aus diesem Grund müssen Sie Galerien schnell und einfach erstellen und anzeigen können. In diesem Artikel haben wir gezeigt, wie unser Qi-Addons für Elementor-Plugin diese Option dank des Pinterest-Bildergalerie-Widgets bieten kann.
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.
