Springe zum Hauptinhalt

So erstellen Sie eine Bildergalerie mit Registerkarten in Elementor

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Müssen Sie in Elementor eine Bildergalerie mit Registerkarten erstellen?

Wie wir ständig sagen, ist Elementor mehr als nur ein Page Builder-Plugin. Es ist ein vielseitiges Plugin, das mehrere Arten von WordPress-Plugins gleichzeitig ersetzen kann. Eines der Plugins, die von Elementor ersetzt werden können, ist das Image Gallery-Plugin.

Mit Elementor, Sie müssen kein zusätzliches Plugin installieren, um eine Bildergalerie erstellen auf Ihrer WordPress-Website. Es gibt zwei Widgets, die von Elementor zum Erstellen einer Bildergalerie angeboten werden: Basic Gallery und Gallery.

Mit dem Basis-Galerie-Widget – verfügbar auf Elementor Free – können Sie eine einfache Bildergalerie erstellen, während Sie mit dem Galerie-Widget eine erweiterte Bildergalerie erstellen können, einschließlich einer Bildergalerie mit Registerkarten.

Dies ist großartig, wenn Sie eine Galerie auf einer Foto-Website erstellen möchten. In diesem Artikel zeigen wir Ihnen, wie Sie in Elementor eine Bildergalerie mit Registerkarten erstellen.

So erstellen Sie eine Bildergalerie mit Registerkarten in Elementor

Das Galerie-Widget ist in der Pro-Version von Elementor verfügbar. Stellen Sie also sicher, dass Sie Ihr Elementor auf die Pro-Version aktualisiert haben, falls dies nicht der Fall ist. Es gibt viele Vorteile, die Sie durch die Verwendung von Elementor Pro erhalten, einschließlich der Möglichkeit, ein WordPress-Theme ohne Codierung zu erstellen.

Lesen Sie auch: So erstellen Sie eine Bildergalerie mit Registerkarten in Elementor

In diesem Beispiel erstellen wir eine Fotogalerie im Querformat. Die Fotos sind in drei Typen unterteilt: Berg, Meer und Wasserfall. Wir werden drei Registerkarten erstellen, um jede Art von Landschaft zu hosten, sowie eine Registerkarte, um alle Fotos anzuzeigen.

Erstellen Sie zunächst eine neue Seite und bearbeiten Sie sie mit Elementor. Sie können auch eine vorhandene Seite bearbeiten. Fügen Sie einen Abschnitt hinzu und ziehen Sie das Galerie-Widget hinein.

So erstellen Sie eine Bildergalerie mit Registerkarten in Elementor

Unter dem Block Einstellungen unter der Registerkarte Inhalt, setze die Option Typ von Mehrere.

Standardmäßig enthält Ihre Galerie nur eine Registerkarte. Um eine neue Registerkarte hinzuzufügen, klicken Sie einfach auf die Schaltfläche EIN ELEMENT HINZUFÜGEN.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Siehe auch: So erstellen Sie einen Verlaufsbalken in Elementor

Öffnen Sie eines der Elemente (Registerkarten). Definieren Sie die Registerkartenbeschriftung im Feld Titel. Klicken Sie auf die Plus-Schaltfläche, um die Bilder auszuwählen, die Sie der Registerkarte hinzufügen möchten.

Wählen Sie die Bilder aus Ihrer WordPress-Medienbibliothek aus. Wenn Sie keine haben, laden Sie sie einfach herunter. Klicken Sie auf die Schaltfläche Neue Galerie erstellen -> Galerie einfügen um die Galerie zur Registerkarte hinzuzufügen.

So erstellen Sie eine Bildergalerie mit Registerkarten in Elementor

Öffnen Sie die anderen Elemente (Registerkarten) und wiederholen Sie die obigen Schritte, um die Registerkartenbezeichnung festzulegen und die Bilder hinzuzufügen.

Passen Sie die Galerie an

Nachdem Sie jedem Tab Bilder hinzugefügt haben, können Sie Ihre Galerie anpassen. Im Block Einstellungen, Sie können das Layout, die Zeilenhöhe, den Abstand zwischen den Bildern und die Bildgröße einstellen. Es gibt auch eine Option zum Aktivieren der Lazy-Load-Funktion.

Öffne den Block Filterleiste um die Beschriftung der Hauptregisterkarte (die Registerkarte "Alle"), den Zeiger und die Animation zu definieren.

Öffne den Block Auflage um die Überlagerung zu aktivieren. Sie können den Bildtitel und die Beschreibung anzeigen, wenn Sie mit der Maus über ein Bild fahren, indem Sie die Titel und Beschreibung.

Wenn Sie Titel und Beschreibung bei Mouse-Over anzeigen möchten, müssen Sie das einzelne Bild in der Galerie bearbeiten und die von Ihnen definierte Einstellung (Alt-Text, Titel, Bildunterschrift oder Beschreibung) hinzufügen.

Öffnen Sie die Registerkarte Stil um Ihre Galerie anzupassen. Es gibt 4 Blöcke, die Sie öffnen können: Bild, Überlagerung, Inhalt und Filterleiste.

Bild

In diesem Block können Sie die Bildrandfarbe, die Zeigerandfarbe, die Randbreite, den Randradius, den CSS-Filter und die Zeigeanimation einstellen.

So erstellen Sie eine Bildergalerie mit Registerkarten in Elementor

Auflage

In diesem Block können Sie die Overlay-Farbe, die Hover-Overlay-Farbe, den Mischmodus und die Hover-Animation festlegen.

Inhalt

Mit diesem Block können Sie den Inhalt des Bildes anpassen. Inhalt bezieht sich auf den Titel und die Beschreibung des Bildes. Sie können die Ausrichtung, vertikale Position, Füllung, Textfarbe und Typografie (Schriftart, Schriftfamilie und Schriftgröße) festlegen.

Filterleiste

In diesem Block können Sie den Filter anpassen. Sie können Ausrichtung, normale Farbe, Zeigefarbe, aktive Farbe, Textfarbe, Abstand zwischen Registerkarten und Typografie einstellen.

Sie können diese Einstellungen manipulieren, bis Sie mit dem Ergebnis zufrieden sind. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche VERÖFFENTLICHEN / AKTUALISIEREN unten im linken Bereich, um Ihre Seite zu veröffentlichen oder zu aktualisieren.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Holen Sie sich jetzt Elementor Pro!

Fazit

Hier ist ! Das war's für diesen Artikel, der Ihnen zeigt, wie Sie eine Bildergalerie mit Registerkarten in Elementor erstellen. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, flass es uns wissen im commentaires.

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren