So verwenden Sie das Elementor Loop Grid Widget in WordPress mit HappyAddons

Die Gestaltung optisch ansprechender und gut funktionierender Websites ist für jeden ein Muss, um Engagement zu schaffen, Zielgruppen anzusprechen und den Umsatz zu steigern. Um diesen Prozess zu vereinfachen, führen Webdesign-Tools wie Elementor und seine Add-ons kontinuierlich innovative Funktionen und Module ein.

Das Loop Grid ist ein so neues Widget, das Elementor und seine Add-ons erst kürzlich für uns entwickelt und veröffentlicht haben. Mit dem innovativen Widget können Sie Ihre Inhalte in schön organisierten Rasterlayouts erstellen und anzeigen.

Machen Sie sich keine Sorgen, wenn Sie nicht viel über dieses Widget im Detail wissen. In diesem Tutorial-Beitrag behandeln wir eine Schritt-für-Schritt-Anleitung zur Verwendung des Elementor Loop Grid-Widgets in WordPress mit HappyAddons. Ich hoffe, dass Sie dieses Tutorial sowohl hilfreich als auch interessant finden.

Was ist ein Schleifengitter in Elementor?

Das Loop Grid ist ein multifunktionales Elementor-Widget, mit dem Sie dynamische Layouts erstellen können, um verschiedene Arten von Inhalten auf Ihrer Website anzuzeigen und diese jederzeit anzupassen. Dieses Widget ist besonders nützlich bei der Anzeige von Blogbeiträgen, Produkten und Portfolioinhalten im Rasterformat.

Dieses Widget ist sehr nützlich für die Anzeige dynamischer Inhalte. Sobald neue Beiträge, Produkte oder gewünschte Inhalte veröffentlicht werden, werden diese ohne manuelle Eingabe automatisch über das Widget angezeigt. Sie können einzigartige Vorlagen erstellen, um den Inhalt nach Ihren Wünschen anzuzeigen.

Im nächsten Abschnitt erklären wir, wie Sie das Widget in WordPress verwenden. Lesen Sie weiter!

So verwenden Sie das Elementor-Loop-Grid-Widget

Sie müssen die folgenden Plugins installiert haben, um dieses Widget auf Ihrer Website verwenden zu können. Klicken Sie auf die unten angehängten Links, um sie zu erhalten.

• Elementor
• HappyAddons
• HappyAddons Pro

Sobald sie fertig sind, folgen Sie den Schritten des Tutorials wie beschrieben.

Schritt 01: Ziehen Sie das Loop-Grid-Widget per Drag-and-Drop auf Ihre Seite

Öffnen Sie die Seite, auf der Sie das Widget hinzufügen möchten. Entscheiden Sie sich dann für einen Abschnitt, um das Widget hinzuzufügen.

Geben Sie „Happy Loop Grid“ in das Suchfeld des Elementor-Bedienfelds ein. Sobald das Widget angezeigt wird, ziehen Sie es per Drag & Drop in den gewünschten Bereich der Leinwand.

Schritt 02: Erstellen Sie eine Loop-Grid-Vorlage

Nachdem Sie das Widget hinzugefügt haben, werden Sie aufgefordert, eine Loop-Vorlage auszuwählen. Wenn Sie bereits über eine fertige Vorlage verfügen, können Sie diese auswählen. Andernfalls müssen Sie eines von Grund auf erstellen.

Um also eine völlig neue Vorlage zu erstellen, klicken Sie auf die Schaltfläche „Vorlage erstellen“ .

Sie werden auf eine neue Seite weitergeleitet. Klicken Sie auf die Schaltfläche „Neu hinzufügen“, während die Registerkarte „Loop-Vorlage“ ausgewählt ist.

Geben Sie der Vorlage einen Namen . Wir haben es beispielsweise „Loop Template One“ genannt. Klicken Sie dann auf die Schaltfläche „Vorlage erstellen“ .

Eine neue Leinwand wird geöffnet. Auch hier können Sie die Widgets, mit denen Sie das Layout Ihrer Loop Grid-Vorlage gestalten möchten, per Drag & Drop verschieben.

In dieser Anleitung erfahren Sie, wie Sie ein Popup auf Elementor-Websites erstellen.

Schritt 03: Entwerfen Sie ein Layout für die Loop-Grid-Vorlage

Angenommen, wir erstellen dieses Schleifenraster, um unsere Blogbeiträge dynamisch anzuzeigen. Daher verwenden wir die Post-Widgets, um die Vorlage zu erstellen.

# Beitragsbild posten

Die Anzeige von Post-Feature-Bildern ist im Post-Grid-Bereich ein Muss. Suchen Sie dazu das Widget und legen Sie es auf der Leinwand ab.

# Info posten

Durch Hinzufügen des Beitragsinfo-Widgets können Sie den Autor, das Veröffentlichungsdatum und den Zeitpunkt der Veröffentlichung des Beitrags anzeigen. Es ist besser, das Widget unter dem vorgestellten Bild hinzuzufügen.

Wenn Sie ein Element des Widgets entfernen möchten, klicken Sie einfach auf das Kreuzsymbol (x) daneben. Um ein neues Element hinzuzufügen, klicken Sie auf die Schaltfläche + Element hinzufügen .

Gehen Sie zur Registerkarte „Stil“ . Auf dieser Registerkarte erhalten Sie Optionen zum Ändern der Farbe, Dicke und Ausrichtung der Texte und Symbole des Widgets.

# Titel des Beitrags

Ziehen Sie das Widget „Beitragstitel“ per Drag-and-Drop unter das Widget „Beitragsinformationen“.

Auf der Registerkarte „Inhalt“ erhalten Sie Optionen zum Anpassen des HTML-Tags, der Größe und der Ausrichtung. Nehmen Sie die erforderlichen Änderungen nach Bedarf vor.

Gehen Sie zur Registerkarte „Stil“ . Sie können die Farbe und Typografie des Titels nach Ihren Wünschen gestalten.

# Beitragsauszug

Durch Hinzufügen des Widgets „Beitragsauszug“ zur Vorlage können Sie die Zusammenfassung oder den Auszug der jeweiligen Beiträge im Abschnitt „Loop Grid“ anzeigen. Suchen Sie das Widget „Beitragsauszug“ und fügen Sie es unter dem Titel hinzu.

Auf die gleiche Weise können Sie, wie oben gezeigt, die Textfarbe und Typografie über die Registerkarte „Stil“ anpassen.

Schritt 04: Optimieren Sie das Vorlagenlayout für mobile Geräte

Sie müssen Ihr Vorlagenlayout für alle Gerätetypen (Tablets und Mobiltelefone) sowie Desktops optimieren. Andernfalls haben Benutzer anderer Geräte kein gutes Erlebnis, wenn sie dieses Widget auf Mobil- und Tablet-Geräten erkunden.

Um das Vorlagenlayout zu optimieren, klicken Sie in der Fußzeile des Elementor-Bedienfelds auf die Option „Responsiver Modus“ . Auf der Vorlage erscheint eine obere Leiste mit der Option, zwischen verschiedenen Gerätemodi (Desktop, Tablet und Mobiltelefon) zu wechseln.

Wechseln Sie nun zu verschiedenen Gerätemodi und prüfen Sie, ob das Vorlagenlayout für verschiedene bestimmte Geräte perfekt ist. Wenn es nicht perfekt ist, ändern Sie die Größe der Vorlagenelemente und passen Sie sie nach Bedarf an.

Hoffentlich können Sie dadurch die Vorlage für alle Bildschirmgrößen responsiv gestalten.

Hier finden Sie eine Anleitung zu den Dingen, die Sie bei der mobilen Responsive-Anpassung einer Website beachten sollten.

# Veröffentlichen Sie die Vorlage

Wenn Sie fertig sind, veröffentlichen Sie die Vorlage , indem Sie im Elementor-Bedienfeld auf die Schaltfläche „Veröffentlichen“ klicken.

Schritt 04: Gehen Sie zum Hauptbereich und wählen Sie die Loop-Vorlage aus

Kommen Sie zur Hauptleinwand von Elementor. Wählen Sie den Abschnitt „Loop Grid“ aus. Im Abschnitt „Layout“ finden Sie die Option „Eine Loop-Vorlage auswählen“ .

Geben Sie den Namen ein, unter dem Sie die Vorlage speichern. Nach der Eingabe erscheint die Vorlage in Echtzeit. Klicken Sie auf die Vorlage, um sie auf der Leinwand anzuzeigen.

Sobald die Vorlage „Loop Grid“ ausgewählt ist, werden Ihre veröffentlichten Beiträge in einem Rasterformat wie im Bild unten angezeigt.

Das Raster sieht möglicherweise umständlich aus, da es mit Standardeinstellungen ausgestattet ist. Sie können das Layout jetzt weiter anpassen.

Schritt 05: Passen Sie den Schleifenrasterabschnitt an und stilisieren Sie ihn

Im Abschnitt „Layout“ wählen Sie die Spaltennummer, den Beitrag pro Seite und die gleiche Höhe aus. Nehmen Sie die erforderliche Konfiguration nach Bedarf vor.

Für dieses Tutorial haben wir drei Spalten und drei Beiträge pro Seite beibehalten.

# Abfrage konfigurieren

Kommen Sie danach zum Abschnitt „Abfrage“ .

Sie können Inhalte aus verschiedenen Quellen im Loop Grid-Widget anzeigen. Standardmäßig werden Beiträge im Rasterformat angezeigt. Sie können jedoch Seiten oder Zielseiten anzeigen, wenn Sie möchten.

Klicken Sie auf das Dropdown-Symbol neben der Option „Beitragstyp“. Wählen Sie den gewünschten Inhaltstyp aus.

Sie müssen jeden Beitrag mit einem Tag oder einer Kategorie speichern. Wenn Sie nur Inhalte eines bestimmten Autors, Tags oder einer bestimmten Kategorie anzeigen möchten, klicken Sie auf das Pluszeichen + unter „Einschließen von“.

Wählen Sie Autoren oder Begriffe aus. Sie können auch beides wählen.

Sobald die Optionen „Einschließen nach“ ausgewählt sind, geben Sie die Autorennamen und Begriffe in die entsprechenden Felder ein. Der Inhalt wird sofort gefiltert und nur der Inhalt dieses bestimmten Autors und Begriffs wird im Schleifenraster angezeigt.

Konfigurieren Sie die anderen Abfrageoptionen nach Ihren Wünschen. Ich hoffe, Sie können sie selbst machen.

Schritt 06: Konfigurieren Sie die Paginierungsoption für den Abschnitt „Loop Grid“.

Erweitern Sie den Abschnitt „Paginierung und mehr laden“ .

Klicken Sie auf das Dropdown-Symbol neben Paginierung . Wählen Sie die gewünschte Option aus.

Wir haben Numbers + Previous/Next ausgewählt. Sie können im Bild sehen, dass diese Paginierungsoption unter dem Widget angezeigt wurde.

Schritt 07: Stilisieren Sie das Layout des Loop Grid Widgets

Gehen Sie zur Registerkarte „Stile“ . Sie finden Optionen zum Anpassen und Stilisieren des Layouts, der Elementbox und der Paginierung des Widgets.

Erweitern wir zunächst den Abschnitt „Layout“ . Hier können Sie den Spaltenabstand und den Zeilenabstand konfigurieren. Tun Sie dies nach Bedarf.

Erweitern Sie auf ähnliche Weise den Abschnitt „Artikelfeld“ . Sie können Polsterung , Hintergrundtyp (Farbe oder Bild), Rahmenschatten, Rahmentypen und Rahmenradius hinzufügen.

Für dieses Tutorial haben wir Polsterung, einen Radius und eine Hintergrundfarbe hinzugefügt. Machen Sie dasselbe selbst.

Auf die gleiche Weise können Sie die Optionen für Farbe, Typografie, Abstand, Radius, Abstand und Paginierung des Widgets stilisieren.

Hinweis: Sieht ein bisschen augenschreiend aus, oder? In dieser Phase des Entwurfs stellen Sie möglicherweise fest, dass die Schleifengittervorlage noch etwas stilisiert und angepasst werden muss. Aber wie geht das? Es wird im nächsten Schritt angezeigt.

Schritt 08: Passen Sie die Loop-Grid-Vorlage neu an

Zuerst müssen Sie die Vorlage finden. Gehen Sie nach dem Entwerfen mit HappyAddons zu Ihrem WordPress-Dashboard . Navigieren Sie dann zu HappyAddons > Theme Builder > Loop Template .

Suchen Sie die Vorlage und öffnen Sie sie mit der Option „Mit Elementor bearbeiten“ .

Beispielsweise haben wir die Typografie des Textes „Weiterlesen >>“ geändert.

Sobald Sie fertig sind, aktualisieren Sie die Änderungen.

Schritt 09: Vorschau der Änderungen

Gehen Sie erneut zur Hauptleinwand. Wählen Sie das Dropdown-Symbol aus. Klicken Sie dann auf die Option Entwurf speichern .

Sobald der Entwurf gespeichert ist, laden Sie die Leinwand neu . Sie sehen die Änderungen auf der Seite, die Sie an der Vorlage vorgenommen haben.

Somit können Sie die Loop Grid-Vorlage jederzeit anpassen.

Schritt 10: Veröffentlichen Sie das Loop-Grid-Design

Hoffentlich ist Ihr Loop Grid-Bereich bereits zur Veröffentlichung bereit. Klicken Sie unten im Elementor-Bedienfeld auf die Schaltfläche „Veröffentlichen“ .

Hinweis: Stellen Sie sicher, dass Sie das Widget perfekt für die Reaktionsfähigkeit auf Mobilgeräten optimiert haben, wie wir Ihnen oben bei der Optimierung der Loop Grid-Vorlage gezeigt haben. Der Vorgang wird auch hier derselbe sein.

Häufige Anwendungsfälle des Elementor Loop Grid Widgets

Bisher haben wir beschrieben, was das Loop Grid-Widget ist und wie Sie es auf Ihren Elementor-Websites verwenden. Werfen wir nun einen kurzen Blick auf einige wichtige Anwendungsfälle des Widgets, bei denen es einen unschätzbaren Eindruck hinterlassen kann.

1. Blog-Layouts

Elementor Loop Grid vereinfacht Blog-Layouts, da es Ihnen ermöglicht, Beiträge in einem dynamischen und ansprechenden Raster darzustellen. Sie können anpassen, wie der Inhalt (Beiträge oder Seiten) angezeigt wird, einschließlich Beitragstitel, Auszüge, Bilder, Metadaten usw., um ein zusammenhängendes Erscheinungsbild zu gewährleisten.

Erfahren Sie, wie Sie mit Elementor eine Blog-Beitragsvorlage entwerfen.

2. Produktraster

Das Loop Grid ist auf E-Commerce-Websites von unschätzbarem Wert, um Produkte in einem übersichtlichen Raster anzuzeigen. Damit können Sie Produktbilder, Preise und Beschreibungen anzeigen, damit Kunden beim Erkunden der Produkte auf Ihrer Website ein angenehmes Erlebnis haben.

3. Portfolio-Schaufenster

Mit dem Loop Grid-Widget können Sie Ihre Zeichnungen, Artikel, Fallstudien und Portfolioteile in einem ansprechenden Layout anordnen. Sie können das Raster sogar an Ihr Branding anpassen, sodass Ihr Portfolio für Ihre Kunden und Mitarbeiter hervorgehoben werden kann.

Erfahren Sie, wie Sie eine Portfolio-Site erstellen.

4. Veranstaltungsverzeichnisse

Mit Loop Grid können Sie Ihre Veranstaltungen grafisch organisieren. Damit können Sie Veranstaltungsinformationen wie Daten, Orte und Beschreibungen visuell auflisten, sodass die Leute schnell herausfinden können, was ansteht.

5. Servicelisten

Sie können Ihre Dienste auch im Rasterformat mit Gestaltungsoptionen anbieten. Sie können Schlüsselelemente wie Servicetitel, Beschreibungen und Fotos anzeigen, damit Kunden auf einen Blick erkennen können, was Sie zu bieten haben.

Abschluss

Wir hoffen, dass Sie jetzt die Besonderheiten des Elementor Loop Grid-Widgets kennen. Sobald Sie wissen, wie Sie das Widget richtig nutzen, können Sie endlose Gestaltungsmöglichkeiten für Ihre Website schaffen. Mit seinen intuitiven Funktionen und seiner Benutzerfreundlichkeit können Sie bei fesselnden Besuchern eine professionelle Wirkung auf Ihrer Website hinterlassen.

Wir haben unser Bestes getan, um in diesem Beitrag alles abzudecken, was Sie suchen könnten. Wenn Sie feststellen, dass wir etwas verpasst haben, teilen Sie uns dies über das Kommentarfeld unten mit. Sie können auch einen Chat im Support-Feld hinterlassen, wenn Sie mehr über unser Produkt erfahren möchten.

Zum Schluss vielen Dank für Ihre Zeit und dafür, dass Sie bis zum Ende bei uns waren. Viel Spaß beim Lesen!