Erstellen Sie wirkungsvolle Seiten mit WordPress-Spalten: Vom Anfänger bis zum Profi

Veröffentlicht: 2023-08-06

WordPress-Spalten sind erstaunliche und flexible Blöcke, die Ihnen helfen, den üblichen Website-Layouts zu entfliehen. Damit können Sie Ihre Seiten attraktiv wie eine Zeitschrift gestalten und Ihre Besucher werden sich lange an Ihre Website erinnern. Aber wie fügt man Spalten in WordPress hinzu?

  1. Wenn Sie den Standardeditor verwenden, gehen Sie einfach zu einer Seite und suchen Sie nach dem Spaltenblock.
  2. Wenn Sie jedoch PostX verwenden, fügen Sie den Zeilenblock hinzu und wählen Sie dann aus den Layouts einen beliebigen Spaltenstil aus und passen Sie ihn mit unzähligen Optionen an.

Kommt es Ihnen immer noch verwirrend vor? Mach dir keine Sorge; Es spielt keine Rolle, ob Sie neu bei WordPress sind oder Erfahrung damit haben; Wir laden Sie ein, die Wunder der Verwendung von Säulen zu entdecken. Lesen wir also bis zum Ende weiter.

Inhalte ausblenden
1 Was sind WordPress-Spalten?
2 Methode 1: So fügen Sie Spalten in WordPress mit dem Standardeditor hinzu
2.1 Schritt 1: Anmelden und einen Beitrag/eine Seite erstellen
2.2 Schritt 2: Fügen Sie den Spaltenblock hinzu
2.3 Schritt 3: Wählen Sie die Anzahl der Spalten
2.4 Schritt 4: Elemente zu den Spalten hinzufügen
3 Methoden 2: So fügen Sie Spalten in WordPress mit PostX hinzu
3.1 Schritt 1: Anmelden und Seite/Beitrag erstellen
3.2 Schritt 2: Zeilenblock hinzufügen
3.3 Schritt 3: Wählen Sie ein Layout
3.4 Schritt 4: Passen Sie die Spalte an
4 letzte Worte

Was sind WordPress-Spalten?

In WordPress bezieht sich der Begriff „Spalten“ auf einen Block, der es Ihnen ermöglicht, Inhalte nebeneinander darzustellen und so die visuelle Attraktivität und Lesbarkeit zu verbessern. Mit einfachen Worten: Spalten sind eine praktische und effiziente Möglichkeit, Inhalte zu ordnen oder komplexe Informationen in den Beiträgen und Seiten von WordPress-Websites darzustellen. Glücklicherweise gibt es mehrere Methoden zum Hinzufügen von Spalten zu Ihrer WordPress-Site, und der Vorgang ist unkompliziert.

Der Standard-Gutenberg-Editor verfügt über einen Spaltenblock. Wenn Sie jedoch erweiterte Anpassungsoptionen wünschen, können Sie ein Plugin wie PostX verwenden, das zusätzliche Blöcke bietet.

Methode 1: So fügen Sie Spalten in WordPress mit dem Standardeditor hinzu

Beginnen wir mit der einfachen Methode – dem standardmäßigen WordPress-Spaltenblock.

Schritt 1: Melden Sie sich an und erstellen Sie einen Beitrag/eine Seite

Melden Sie sich im ersten Schritt bei Ihrem WordPress-Dashboard an und finden Sie oben die Schaltfläche „+ Neu“. Bewegen Sie nun den Cursor an die gewünschte Stelle und fügen Sie je nach Wunsch entweder einen Beitrag oder eine Seite hinzu.

add new page
neue Seite hinzufügen

Schritt 2: Fügen Sie den Spaltenblock hinzu

Klicken Sie nun auf die Option „Block hinzufügen“ oder auf die Schaltfläche „+“ und Sie werden ein Suchfeld sehen. Geben Sie dann im Suchfeld „Spalten“ ein und Sie finden das Spaltenblocksymbol.

add columns block
Block „Spalten hinzufügen“ hinzufügen

Schritt 3: Wählen Sie die Anzahl der Spalten

Nachdem Sie den Spaltenblock hinzugefügt haben, werden Sie aufgefordert, eine Variante auszuwählen. Es gibt 6 Variationen, zum Beispiel 100, 50/55/, 33/33/33 usw. Fahren wir mit den 50/50-Spalten fort.

choose number of columns
Wählen Sie die Anzahl der Spalten

Schritt 4: Elemente zu den Spalten hinzufügen

Unsere eigentliche Aufgabe, WordPress-Spalten hinzuzufügen, ist erledigt. Jetzt ist es an der Zeit, dass Sie es an Ihre Bedürfnisse anpassen.

Nehmen wir an, dass wir zwei Spalten für die Mittags- und Abendmenüs hinzufügen müssen. Fügen wir sie also hinzu.

  1. Fügen Sie Überschriften und Absätze zur ersten Spalte hinzu

Gehen Sie zunächst zur ersten Spalte. Dort sehen Sie die Schaltfläche „+“. Bewegen Sie den Cursor dorthin und Sie sehen den Text „Block hinzufügen“.

click on add block option
Klicken Sie auf die Option „Block hinzufügen“.

Klicken Sie hier und suchen Sie nach dem Block „Überschrift“.

add heading block
Überschriftenblock hinzufügen

Geben Sie nun alles ein, was Sie für die Überschriften eingeben müssen. Danach drücken Sie einfach die Eingabetaste und ein neuer Block wird erstellt. Fügen Sie unter der Überschrift hinzu, was Sie schreiben möchten.

add desired text
Fügen Sie den gewünschten Text hinzu
  1. Fügen Sie der Überschrift Stil hinzu

Jetzt können Sie es anpassen, damit es einprägsam aussieht. Es gibt beispielsweise verschiedene Optionen, wie Sie beispielsweise die Spaltenbreite, Textfarbe und Hintergrundfarbe von WordPress ändern können. Zunächst fügen wir eine Hintergrundfarbe hinzu. Klicken wir dazu auf das Stilsymbol.

Klicken Sie nun in der Blockeinstellung auf „Hintergrund“ und dann werden Ihnen Farboptionen angezeigt. Es gibt sowohl Vollton- als auch Verlaufsfarben. Wir wählen den Farbverlauf und die elektrische Grasfarbe aus.

add background color
Hintergrundfarbe hinzufügen

Machen wir nun dasselbe für die zweite Spalte, um Speisen für das Abendessen hinzuzufügen.

  1. Fügen Sie eine allgemeine Hintergrundfarbe hinzu

Unsere Aufgabe ist fast erledigt. Für den letzten Schliff fügen wir der gesamten Spalte eine weitere Hintergrundfarbe hinzu. Dazu müssen wir beide Spalten auswählen. Gehen Sie nun zu Stil, dann zum Hintergrund und wählen Sie die Farbe aus.

Wir haben die helle Ozeanfarbe gewählt. Sehen wir uns nun die endgültige Ausgabe an.

final output
endgültige Ausgabe

Lesen Sie auch: WordPress-Hintergrundvideo: Fügen Sie es auf zwei verschiedene Arten hinzu

Methoden 2: So fügen Sie Spalten in WordPress mit PostX hinzu

Der oben beschriebene Vorgang zum Einfügen von Spalten in WordPress ist recht einfach, aber das Endergebnis ist möglicherweise nicht so zufriedenstellend. Dies liegt daran, dass der Standardeditor nur sehr begrenzte Optionen zum Anpassen der Spalten bietet.

Mach dir keine Sorge; In diesem Fall kann PostX Ihr Retter sein. PostX bietet auch hochgradig anpassbare Spalten für WordPress. Im folgenden Abschnitt erfahren Sie, wie das geht, und erhalten eine Anleitung zur Anpassung.

Aber bevor wir beginnen: Wenn Sie PostX nicht verwenden, schauen Sie sich die verlinkte Anleitung an und installieren und aktivieren Sie das PostX-Plugin.

Holen Sie sich PostX Pro , um alle aufregenden Funktionen freizuschalten und fantastische Websites zu erstellen

Schritt 1: Melden Sie sich an und erstellen Sie eine Seite/einen Beitrag

Melden Sie sich wie im vorherigen Schritt bei Ihrem WordPress an und suchen Sie dann oben nach der Schaltfläche „+ Neu“. Gehen Sie mit der Maus dorthin und erstellen Sie eine neue Seite/einen neuen Beitrag. Wenn Sie möchten, können Sie auch jeden vorherigen Beitrag bearbeiten. Es hängt von Ihren Vorlieben ab.

add new page
neue Seite hinzufügen

Schritt 2: Fügen Sie den Zeilenblock hinzu

Klicken Sie in diesem Schritt auf die Schaltfläche „+“. Daraufhin wird ein Suchfeld angezeigt. Geben Sie nun im Suchfeld „Zeile“ ein und Sie sehen das Zeilenblocksymbol. Der Name des Blocks lautet Row, es handelt sich jedoch um eine Kombination aus Row- und Column-Blöcken.

add row block
Zeilenblock hinzufügen

Schritt 3: Wählen Sie ein Layout

Dort finden Sie 10 voreingestellte Layouts. Hier werden Sie aufgefordert, die Anzahl der Spalten auszuwählen. Wählen Sie eine davon nach Ihren Wünschen.

choose number of columns
Wählen Sie die Anzahl der Spalten

Wenn Sie möchten, können Sie nun die Spaltennummer ändern und das Layout anpassen. Es gibt 7 verschiedene Layouts. Sie können eine davon entsprechend Ihren Anforderungen auswählen.

choose a layout
Wahlen Sie ein Layout

Vorerst bleiben wir beim Standardlayout. Fahren wir mit dem nächsten Schritt fort.

Schritt 4: Passen Sie die Spalte an

Unsere Spalten sind bereits hinzugefügt. Jetzt müssen wir es anpassen. Angenommen, wir zeigen drei Gaming-Mäuse in drei Spalten. Mal sehen, wie wir es machen.

  1. Fügen Sie das Bild hinzu

Klicken Sie zunächst auf das „+“-Symbol in der ersten Spalte und suchen Sie im Suchfeld nach „Bild“.

add image block
Bildblock hinzufügen

Klicken Sie nun auf das Bild und dann auf die Schaltfläche Hochladen. (Wenn das Bild bereits zur Medienbibliothek hinzugefügt wurde, können Sie auf die Medienbibliothek klicken, um es der Spalte hinzuzufügen.) Wählen Sie nun das jeweilige Bild aus und klicken Sie auf „Öffnen“.

upload desired image
gewünschtes Bild hochladen
  1. Legen Sie die Bildgröße fest

Das hochgeladene Bild hat möglicherweise nicht die richtige Größe für WordPress. Suchen Sie in diesem Fall die Option „Bildabmessung“ und füllen Sie die Felder „Breite“ und „Höhe“ mit der richtigen Bildabmessung aus.

Set the Image Dimension
Legen Sie die Bildgröße fest
  1. Bildtitel hinzufügen

Jetzt müssen Sie dem Bild einen Namen geben. Dazu müssen Sie einen weiteren Block erstellen. Klicken Sie auf den Bildblock und dann auf die Eingabetaste. Dann erscheint ein neuer Block.

add image title
Bildtitel hinzufügen

Geben Sie nun den Namen des Bildes ein. Unser erstes Bild ist eine Razor V3-Maus.

  1. Fügen Sie Hintergrundfarbe für die erste Spalte hinzu

Um es einprägsamer zu machen, klicken Sie auf die erste Spalte und suchen Sie nach der Option „Hintergrund und Wrapper“.

click on background and wrapper option
Klicken Sie auf die Hintergrund- und Wrapper-Option

Fügen Sie nun je nach Wunsch eine Vollton-/Verlaufsfarbe hinzu.

add desired background color
Fügen Sie die gewünschte Hintergrundfarbe hinzu
  1. Passen Sie die 2. und 3. Reihe an

Befolgen Sie den gleichen Vorgang und passen Sie die zweite und dritte Zeile mit bestimmten Bildern und Titeln an.

  1. Legen Sie die maximale Breite des Inhalts fest

Nun ist die Position der Bilder möglicherweise nicht richtig in Bezug auf den Hintergrund ausgerichtet. In diesem Fall finden Sie die Option „Content Max-Breite“ und ändern diese entsprechend. Wir behalten den Wert 766 bei, um eine gute Ausrichtung zu erreichen.

set content max width
Legen Sie die maximale Breite des Inhalts fest
  1. Fügen Sie Hintergrund für den primären Zeilenblock hinzu

Hier ist der letzte Schritt. Um ihm ein endgültiges Aussehen zu verleihen, fügen wir einen Hintergrund für die Zeilenspalte hinzu; Wählen Sie dazu die Spalte „Zeile“ aus und suchen Sie nach „Hintergrund und Wrapper“. Klicken Sie darauf und wählen Sie eine beliebige Vollton-/Farbverlaufsfarbe.

add row background color
Zeilenhintergrundfarbe hinzufügen

Endlich ist es geschafft. Schauen wir uns nun die endgültige Ausgabe an.

final out of multiple columns
endgültige Ausgabe

Lesen Sie auch: WordPress Shape Divider: Meistern Sie die Kunst, Abschnitte zu trennen

Letzte Worte

Hoffentlich herrscht jetzt keine Verwirrung mehr über WordPress-Spalten. Wir haben Ihnen bereits erklärt, wie Sie Spaltenblöcke hinzufügen und diese sowohl im standardmäßigen WordPress-Spaltenblock als auch im PostX-Zeilenblock anpassen. Es ist Zeit für Sie zu üben.

Zögern Sie also nicht, mit Säulen zu experimentieren und Ihrer Kreativität freien Lauf zu lassen. Verwandeln Sie Ihre Website in ein Meisterwerk, das Ihr Publikum nicht nur fesselt, sondern auch inspiriert.

Holen Sie sich PostX Pro , um alle aufregenden Funktionen freizuschalten und fantastische Websites zu erstellen

Gefällt Ihnen dieser Artikel? Verbreiten Sie es weiter
  • Movie News Layout

    Exklusives Filmnachrichten-Layout – PostX: Starter Pack Donnerstag

  • How to Customize WooCommerce Thank You Page

    So passen Sie die WooCommerce-Dankesseite an

  • Timetics

    Timetics: Das perfekte Terminbuchungs-Plugin für WordPress

  • How to Create WordPress Page Template in Twenty Twenty-two Theme

    So erstellen Sie eine WordPress-Seitenvorlage im Twenty Twenty-Two-Theme