So erstellen Sie Spalten und Raster in Gutenberg: Einfache Schritte

Das Erstellen optisch ansprechender und übersichtlicher Layouts ist für jede Website unerlässlich. Der Gutenberg-Editor von WordPress bietet eine flexible Plattform zum Erstellen benutzerdefinierter Designs, und Spalten und Raster sind grundlegende Bausteine. 

In diesem Tutorial führen wir Sie durch den Prozess zum Erstellen von Spalten und Rastern in Gutenberg mithilfe des Containerblocks und des Post-Rasterblocks von GutenKit. 

Lasst uns eintauchen!

Übersicht: Gutenberg-Spalten und -Raster

Gutenberg, der intuitive Blockeditor für WordPress, hat die Art und Weise revolutioniert, wie Benutzer Inhalte erstellen und verwalten. Eines seiner herausragenden Features ist die Möglichkeit, komplexe Layouts mithilfe von Spalten und Rastern zu erstellen. Diese Elemente ermöglichen eine strukturiertere und optisch ansprechendere Präsentation von Inhalten und verbessern so die Lesbarkeit und das Engagement der Benutzer. 

Ob Sie einen einfachen Blogbeitrag oder einen komplexen Zielseite, ist es wichtig zu verstehen, wie Spalten und Raster effektiv eingesetzt werden.

Die standardmäßigen WordPress Gutenberg Grid- und WordPress Gutenberg Column-Blöcke haben jedoch nur begrenzte Gestaltungs- und Anpassungsmöglichkeiten. Und hier kommt ein Gutenberg-Plugin wie GutenKit kommt rein.

So erstellen Sie Spalten und Raster in Gutenberg

Dank der leistungsstarken Tools des Containerblocks von GutenKit ist das Erstellen von Spalten und Rastern in Gutenberg ein unkomplizierter Vorgang. 

Hier sind die Schritte zum Einstieg:

Installieren und aktivieren Sie GutenKit:

Öffnen Sie Ihre WordPress-Website und gehen Sie zu „Plugins“. Wählen "Neues Plugin hinzufügen” und geben Sie GutenKit in die Suchleiste ein. Klicken Sie auf „Jetzt installieren" Und "aktivieren Sie“ das Plugin.

Nachdem Sie GutenKit erfolgreich aktiviert haben, wird es nun in Ihrem WordPress-Dashboard angezeigt. Sie können das Plugin öffnen und einen kurzen Blick auf die Demo des „Container“-Blocks werfen, um zu sehen, wie es funktioniert.

So erstellen Sie Spalten in Gutenberg

Hier sind die eigentlichen Schritte zur Verwendung von Spalten in Gutenberg:

Schritt 1: Spalten in WordPress Gutenberg hinzufügen

Öffnen Sie zunächst die Seite oder den Beitrag, wo Sie Spalten und Raster hinzufügen möchten. 

Klicken Sie oben im Editor auf das „+“-Symbol, um die Blockbibliothek zu öffnen. 

Suchen Sie nach „Container”-Block und fügen Sie ihn Ihrer Seite hinzu. Stellen Sie sicher, dass Der Block trägt das GutenKit-Abzeichen. Dieser Block dient als Grundlage für Ihre Spalten und Raster.

Ziehen Sie den Block per Drag & Drop auf Ihren Editor-Bildschirm oder klicken Sie einfach auf den Block, um ihn auf Ihren Editor-Bildschirm zu ziehen.

GutenKit bietet Ihnen 6 verschiedene Layouts. Wählen Sie das Layout aus, das Sie für Ihren Beitrag oder Ihre Seite planen. Für dieses Tutorial wählen wir das 50/50-Layout.

Eine andere Möglichkeit, den Containerblock zu Ihrem Editor-Bildschirm hinzuzufügen, besteht darin, auf das Plus-Symbol (+) in Ihrem Editor-Bildschirm zu klicken.

Schritt 2: Konfigurieren Sie den Containerblock

Sobald das Containerblock ist vorhanden, Sie können die Einstellungen Ihren Designanforderungen entsprechend konfigurieren. Passen Sie Breite, Abstand und Ränder an, um den gewünschten Layoutbereich zu erstellen.

Im Abschnitt „Layout“ können Sie Folgendes anpassen:

• Behälterbreite
• Richtung
• Ausrichtung
• Spalten- und Zeilenabstand zwischen Spalten
• Überlaufstil
• HTML-Tag

Im Abschnitt „Stil“ können Sie Folgendes festlegen:

• Hintergrund
• Hintergrundüberlagerung
• Grenze

Wenn Sie nun das Design Ihrer Spalten und Raster verbessern möchten, gehen Sie zu den erweiterten Einstellungen. Dort können Sie Folgendes festlegen:

• Layout 
• Position
• Sichtweite
• Bewegungseffekte
• Glasmorphismus
• CSS-Transformation
• Erweiterter Tooltip
• Klebrig
• Parallaxe
• Zusätzliche CSS-Klasse

Schritt 3: Spalteninhalt anpassen

Jetzt kommt der spannende Teil! Hinzufügen Bilder, Symbole, Texte, usw. zu Ihren Spalten.

Jede Spalte kann nun mit verschiedenen Blöcken wie Text, Bildern oder Schaltflächen gefüllt werden. Klicken Sie einfach in eine Spalte und fügen Sie den gewünschten Inhaltsblock aus der Bibliothek hinzu. Ordnen und gestalten Sie jeden Block, um ein einheitliches Design zu erstellen.

In jedem Container befindet sich ein Plus-Symbol. Klicken Sie auf dieses Symbol, um einen neuen Block hinzuzufügen. Angenommen, Sie möchten ein Bild anzeigen von Lebensmitteln und deren Beschreibung.

Wählen Sie den Container aus, dem Sie die Beschreibung hinzufügen möchten, und fügen Sie den Absatzblock hinzu.

Fügen Sie nun im nächsten Container den Bildblock hinzu, um ein Bild anzuzeigen.

So sehen Ihre Spalten aus:

Sieht langweilig aus, oder? Kein Problem! Sie können das Erscheinungsbild verbessern, indem Sie den Textstil, die Schriftgröße und die Hintergrundfarbe anpassen. Klicken Sie einfach auf den ersten Container und fahren Sie mit dem Seitenleistentool fort. Spielen Sie mit den Einstellungen, bis Sie mit dem Ergebnis zufrieden sind. Sie können auch zu den Containerblockeinstellungen zurückkehren, um Hintergrund usw. hinzuzufügen.

Um weitere Spalten zu erstellen, wiederholen Sie einfach den Vorgang vom Hinzufügen des Containerblocks bis zum Anpassen des Spalteninhalts.

So erstellen Sie Raster in Gutenberg

Der GutenKit Post Grid-Block ermöglicht es Ihnen, Ihre Beiträge in einem auffälligen Rasterlayout zu präsentieren. Es bietet umfangreiche Anpassungsoptionen, mit denen Sie die Anzahl der Spalten, Bildgrößen und den Abstand zwischen den Beiträgen an Ihre Designvorlieben anpassen können.

So geht's ganz einfach:

Gehe zu Seiten und wähle Neue Seite hinzufügen oder Sie können einen vorhandenen Beitrag oder eine vorhandene Seite öffnen und mit dem Blockeditor bearbeiten. Suchen Sie das „+“-Symbol auf der rechten Seite oder oben auf dem Editorbildschirm und klicken Sie darauf. Suchen Sie im angezeigten Blockmenü nach „Post Grid“. Wenn Sie das Element mit dem GutenKit-Abzeichen gefunden haben, klicken Sie entweder darauf oder ziehen Sie es per Drag & Drop auf den Blockeditorbildschirm.

In der seitlichen Symbolleiste sehen Sie Folgendes:

Wählen Sie Kategorien aus: Wählen Sie mit dieser Option die Beitragskategorien aus, die Sie anzeigen möchten.

Anzahl der Beiträge: Geben Sie hier die Anzahl der Beiträge an, die Sie präsentieren möchten.

Titel nach Wörtern zuschneiden: Wenn Sie Beitragstitel kürzen möchten, aktivieren Sie diese Option, um die Wortanzahl für das Zuschneiden anzupassen.

Wählen Sie Spalte aus: Verwenden Sie diese Einstellung, um die Anzahl der anzuzeigenden Spalten zu bestimmen.

Wenn Sie zur Stil Abschnitt, werden Ihnen die folgenden Parameter angezeigt:

Netz: Passen Sie die Höhe und den Abstand mit den verfügbaren Schiebereglern an.

Titel: Passen Sie Typografie, Farbe, Hover-Farbe und Rand mit den bereitgestellten Gestaltungsoptionen an.

Wenn Sie das Erscheinungsbild Ihres Rasters verbessern möchten, verwenden Sie einfach die erweiterten Einstellungen. Dort können Sie Folgendes anpassen:

• Layout 
• Position 
• Hintergrund 
• Grenze 
• Sichtweite 
• Bewegungseffekte

und so weiter……

Und voilà! Ihr Raster ist fertig!

FAQs

Zusammenfassung

Wenn Sie den Umgang mit Spalten und Rastern in Gutenberg beherrschen, können Sie die Optik und Funktionalität Ihrer WordPress-Site deutlich verbessern. Indem Sie diese einfachen Schritte befolgen und den Containerblock von GutenKit verwenden, können Sie ganz einfach professionelle und ansprechende Layouts erstellen. 

Warum GutenKit?

• A Gutenberg-Seitenersteller Spalte.
• Vollständig anpassbare Raster und Spalten in WordPress Gutenberg.
• Drag-and-Drop-Schnittstelle.
• Benutzerfreundliche Oberfläche, ideal für Anfänger.

Experimentieren Sie mit verschiedenen Konfigurationen und Stilen, um das perfekte Design für Ihren Inhalt zu finden. Mit etwas Übung können Sie atemberaubende Seiten erstellen, die Ihr Publikum fesseln und Ihre Website auf ein neues Niveau heben.