Springe zum Hauptinhalt

So fügen Sie mehrere Spalten in WordPress hinzu, ohne ein Plugin zu verwenden

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 701.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öchten Sie Ihren WordPress-Beiträgen mehrspaltigen Inhalt hinzufügen?

Spalten können zum Erstellen verwendet werden Attraktive Layouts für Ihre Publikationen und Seiten.

Herkömmliche Printmedien wie Zeitungen und Zeitschriften verwenden seit den Anfängen des Drucks ein mehrspaltiges Layout. Ihr Ziel war es zu ermöglichen Nutzer Einfacheres Lesen eines kleineren Textes bei sparsamer Nutzung des verfügbaren Platzes.

Wenn Sie noch keine Website oder kein Blog in WordPress erstellt haben, laden wir Sie ein, sich zu beraten Wie man ein Wordpress-Blog 7 Schritte für die Installation dann, Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren

Einspaltige Layouts werden im Web häufiger verwendet. Die Gitter mit mehreren Spalten sind immer noch nützlich, um Inhalte hervorzuheben und das Lesen und Analysieren zu erleichtern.

In diesem Tutorial zeigen wir Ihnen, wie Sie Ihren WordPress-Posts mühelos mehrspaltigen Inhalt hinzufügen können, ohne HTML-Code schreiben zu müssen.

Hinzufügen von Inhalten zu mehreren WordPress-Spalten e1565264744355

Hinzufügen von mehrspaltigen Inhalten in WordPress - Die einfache Lösung

Das Erstellen von mehrspaltigen Inhalten, in WordPress auch als Rasterinhalte bezeichnet, ist jetzt einfach, da dies eine Standardfunktion ist. Das neuer WordPress Gutenberg Block Editor schlägt einen Spaltenblock vor.

Um ein mehrspaltiges Layout hinzuzufügen, müssen Sie einen neuen Beitrag erstellen oder einen bearbeiten. Klicken Sie im Bearbeitungsbereich auf " hinzufügen Oben einen Block hinzufügen.

Dann müssen Sie den Block auswählen Spalten "Befindet sich unter der Registerkarte" Layoutelemente ".

Fügen Sie WordPress-Spalten hinzu

In der linken Spalte springt der Mauszeiger und in der rechten Spalte erscheint ein Platzhalter für den Text.

Spalten auf WordPress Gutenbeg

Wie Sie im obigen Screenshot sehen können, ist der Block Spalten scheint zunächst ein leerer Bereich zu sein. Wenn Sie mit der Maus nach links fahren, sehen Sie den Rand des markierten Blocks.

Sie können auch die Blockparameter in der rechten Spalte des Bildschirms sehen.

Beispiel für Gutenberg-SäulenStandardmäßig fügt der Spaltenblock zwei Spalten hinzu. Sie können die Anzahl der Spalten, die Sie hinzufügen möchten, in den Blockeinstellungen auf der rechten Seite erhöhen. Auf diese Weise können Sie bis zu sechs Spalten in einer einzelnen Zeile hinzufügen.

Bearbeiten Sie gutenberg WordPress-SpaltenKlicken Sie einfach auf eine Spalte und beginnen Sie mit der Eingabe, um Inhalte hinzuzufügen. Sie können die Tabulatortaste auf Ihrer Tastatur verwenden, um zur nächsten Spalte zu gelangen.

Gehen Sie zu einer nächsten WordPress-SpalteHinzufügen von Multimedia- und anderen Inhalten zu Ihren Spalten

Neben Textinhalten können Sie auch Bilder hinzufügen und Videos in WordPress-Spalten einbetten.

Mit dem Spaltenblock können Sie Blöcke in jede Spalte einfügen. Bewegen Sie einfach die Maus über eine Spalte und Sie werden das "Füge einen neuen Block hinzuInnen. Sie können einen Block auch hinzufügen, indem Sie den Namen des Blocks eingeben.

Fügen Sie einer Spalte ein Bild hinzu

Ihr ausgewählter Block wird in der Spalte angezeigt. Sie können dorthin gehen und Inhalte 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]

Um Ihre Medien hochzuladen, laden Sie unseren Artikel auf Wie lade ich deine Massenmedien auf WordPress hoch?

Gutenberg-Spaltenbildblock

So könnte Ihre neue Spalte im Standard-WordPress-Design von Twenty Nineteen aussehen. In diesem Beispiel verwenden wir drei Spalten und die letzte Spalte enthält ein Bild.

Bild hinzufügen Gutenberg Spalte

Wenn Sie der Seite nur ein Bild und einen Text hinzufügen möchten, können Sie auch den Block verwenden Medien und Text Anstelle von Spalten. Dieser Block wurde speziell für die Anzeige von Medien wie Bildern und Videos neben dem Text entwickelt.

Wordpress-Blocktextmedien

Hinzufügen mehrerer Spalten im klassischen Editor von WordPress

Wenn Sie WordPress nicht auf Gutenberg aktualisiert haben und das noch verwendenklassischer EditorSie müssen ein separates Plugin installieren, um ein Rasterlayout zu erstellen von Spalten.

Beginnen Sie mit der Installation und Aktivierung des Plugins Leichte Rastersäulen

Ausführliche Anweisungen finden Sie in unserer Schritt-für-Schritt-Anleitung um ein Plugin in WordPress zu installieren.

Bei der Aktivierung können Sie eine neue Nachricht erstellen oder eine alte Nachricht zum Bearbeiten öffnen. Dann klicken Sie auf " Spalten hinzufügen In der visuellen Editor-Symbolleiste.

Spalten hinzufügen WordPress Classic EditorSie sehen nun ein Popup-Fenster, in dem Sie Ihre erste Spalte hinzufügen können. Sie können wählen, wie viel Bereich Ihre Spalte auf Desktops, Tablets und Mobilgeräten unterschiedlich abdecken kann.

Gehen Sie weiter und entdecken Sie Wie eine volle Seitenbreite auf Wordpress erstellen

Wenn Sie beispielsweise den Prozentsatz des 50% -Desktoprasters festlegen, deckt Ihre Spalte die Hälfte der Zeile ab.

Definieren Sie den Prozentsatz der Spalten

Es gibt viele Optionen zum Festlegen der Breite Ihrer Spalte, von 5% bis 100% mit einem 5-Intervall. Sie können einen auswählen, indem Sie auf das Dropdown-Menü klicken.

Option für die Spaltenbreite

Anschließend müssen Sie den Inhalt Ihrer Spalte im Bereich "Inhalt" hinzufügen und dann auf die Schaltfläche "OK" klicken, um ihn in Ihre Publikation einzufügen.

Inhalt der Divi-Spalte

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Das Plugin generiert den erforderlichen Shortcode mit Ihren Inhalten und fügt ihn Ihrem Post-Editor hinzu.

Entdecken Sie in diesem Tutorial Wie zu installieren und die WP Super-Cache-Plugin konfigurieren um die Leistung Ihres Blogs zu verbessern.

Spalte im klassischen WordPress-Editor hinzugefügt

Nachdem Sie Ihre erste Spalte hinzugefügt haben, können Sie den Vorgang wiederholen, um weitere Spalten hinzuzufügen. Vergessen Sie für die letzte Spalte nicht, das Kontrollkästchen 'Letzte Spalte der Zeile'.

Fügen Sie dem klassischen WordPress-Editor eine weitere Spalte hinzu

Danach können Sie Ihre Vorschau speichern und in der Vorschau anzeigen. So sieht es auf unserer Twenty Seventeen-Testwebsite aus.

Spalte hinzugefügt WordPress-Demo

Wenn Sie auch WordPress-Themes suchen, mit denen Sie Spalten auf Ihren Seiten oder in Ihrer Publikation erstellen können, finden Sie hier 3 WordPress-Themes Premium perfekt für diese aufgabe.

1. TheGem

Es gibt viele WordPress-Themes, die behaupten, ein OnePage-Layout anzubieten, aber keines kann die Fülle an Optionen und Funktionen bieten, die im WordPress TheGem-Tempate verfügbar sind. 

Thegem Mehrzweck-WordPress-Themen erstellen Website

Alle Gestaltungselemente, die Sie mit einer guten OnePage-Website verknüpfen, sind in diesem WordPress-Design enthalten: ein Vollbild-Schieberegler (der mit dem Revolution Slider-Plugin erstellt werden kann, das im WordPress-Design enthalten ist) und sechs verschiedene Kopfzeilenstile und die Möglichkeit, Abschnitte in voller Breite mit dem im Paket enthaltenen Visual Composer-Plugin zu erstellen.

Darüber hinaus stehen eine Reihe von Anpassungsoptionen für Elemente wie Schriftarten, Farben und Symbole zur Verfügung. Es ist eine seltene Sache, aber es gibt auch Details, die wir an TheGem nicht mögen. Aber im Grunde genommen ist es ein WordPress-Thema, das Ihnen angesichts der Anzahl der positiven Punkte natürlich zusagt. Es ist ein starker Konkurrent, der die Erstellung einer OnePage-Website erleichtern würde.

DownloadDemo | Web-Hosting

2. Stockholm

Stockholm ist ein WordPress-Thema, mit dem Sie die Website für ein Bauunternehmen, einen Tiefbau oder ein Unternehmen erstellen können, das mit der Welt der Gebäudesanierung zu tun hat. Diese WordPress-Vorlage richtet sich an Profis, die Wert auf Qualität und Detail legen.

stockholm-Themen-Wordpress-Mehrzweck-vielseitig-create-Site-Internet

Mit einem Optionsfeld und einem benutzerfreundlichen Backend können Sie Ihre Inhalte einfach verwalten. Es gibt ungefähr 20 Demos dieser Vorlage, die eine breite Palette von Aktivitäten präsentieren, für die dieses WordPress-Thema verwendet werden kann. Und diese können auch als Grundlage für zukünftige Anpassungen verwendet werden, damit Ihre Website ein einzigartiges Aussehen erhält.

Sehr reaktionsschnell, es wird perfekt auf jedem Bildschirm angezeigt. Wenn Sie während der Anpassung oder Installation dieser Vorlage auf Schwierigkeiten stoßen, kann die vollständige Dokumentation, die im Paket enthalten ist, als Leitfaden dienen. Und wenn Sie es immer noch nicht können, steht Ihnen weiterhin der WordPress-Support zur Verfügung.

DownloadDemo | Web-Hosting

3. Jupiter

Jupiter ist ein weiteres sehr beliebtes WordPress-Thema. Es enthält 25-Demos, die 6 aus unseren Kategorien abdecken - Agentur, Kreativ, Bildung, Essen, Gesundheit und E-Commerce - und weitere werden in zukünftigen Updates hinzugefügt. Die meisten Layouts haben ein minimalistisches Design mit einer angenehmen Typografie.

Jupiter-theme-Wordpress-Mehrzweck-vielseitig-create-Site-Internet

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]

Eines der wichtigsten Verkaufsargumente von Jupiter ist der Creative Header Customizer, mit dem Sie das Header-Design Ihrer Website schnell und einfach anpassen können. Visual Composer, 3-Schieberegler (Layer, Revolution und iCarousel), neue 10-Shortcodes, mehr als 1800-Symbole und benutzerdefinierte 10-Beitragstypen sind im Lieferumfang enthalten.

Die Ladezeit der Seite ist ebenfalls exzellent. Dies ist ein großartiges Produkt, und es wird schwierig sein, so viele WordPress-Themen mit ihren Eigenschaften zu finden.

DownloadDemo | Web-Hosting

Andere empfohlene Ressourcen

Um Ihr Blog oder Ihre Website weiter zu optimieren, empfehlen wir Ihnen, einige Links zu konsultieren, die Sie in die Welt von Gutenberg eintauchen lassen

Fazit

Hier ! Das war's für dieses Tutorial. Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Ihren WordPress-Posts und -Seiten Spalten hinzufügen. Zögere nicht zu Teile dieses Tutorial mit deinen Freunden in deinen sozialen Netzwerken.

Wenn Sie Vorschläge oder Kommentare haben, sind diese willkommen. Aber wenn Sie ein Anfänger sind, laden wir Sie ein, unsere zu konsultieren Ressourcen.

... 

Dieser Artikel enthält Kommentare 18

  1. Hallo, ich habe dieses Plug-In…. aber es funktioniert nicht gut, es passiert:

    Ich erstelle zwei Spalten, eine kleinere für das Foto und eine größere für den Text, sodass der Text nur aus zwei Zeilen besteht, nicht in der vollen Höhe der Spalte, wenn der JUMP-Text unter dem Foto gespeichert wird und nicht bleib accano, sieh, dass eine Spalte verschwindet… ..
    Was mache ich? Warum passiert das? Es gibt hier ein anderes besseres und einfacheres Plg-In als dieses?
    Danke, ich wäre dankbar für die Hilfe!

    1. Hallo Irina,

      Versuchen Sie, das Standard-WordPress-Design zu aktivieren. Wenn alles einwandfrei funktioniert, liegt das Problem bei Ihrem aktuellen WordPress-Design.

      Überprüfen Sie auch, ob Sie Plugin-Updates vorgenommen haben.

  2. Ich kann nur sagen, dass dies Geniale ist.
    es funktioniert sehr gut und ca reagiert auf alle meine Erwartungen.
    Dank nombreu (BCP)

      1. Ich habe Text kopiert und ohne Erfolg versucht, ihn mit CRTL + V einzufügen. Das Kontextmenü mit der rechten Maustaste bietet kein Einfügen an.
        Ich habe keine andere Lösung gefunden, als alles neu einzugeben ...

        1. Sorry für die späte Antwort.
          Können Sie sicherstellen, dass durch Klicken mit der rechten Maustaste auf ein anderes Element auf der Seite das Kontextmenü angezeigt wird? Wenn dies der Fall ist, liegt wahrscheinlich ein JavaScript-Problem mit Ihrem Hosting vor.
          Wenn Sie sich in Google Chrome befinden, rufen Sie die betreffende Seite auf, auf der das Problem auftritt, drücken Sie die Taste "F12" (ein Fenster wird geöffnet oder an die Seite angehängt) und wählen Sie die Registerkarte "Konsole" . Machen Sie einen Screenshot dieser Registerkarte und ich werde Ihnen sagen, ob es ein Problem gibt.

          1. Guten Tag,
            Merci pour votre réponse.
            Meine Website wird von Free gehostet. Möglicherweise liegt ein Problem mit Javascript vor.
            Können Sie mir sagen, wie Sie den von mir erstellten Screenshot weiterleiten?
            herzlich

          2. Wir wollen Mireille aber die Art der Dienstleistung, die Sie benötigen, ist leider zu bezahlen und wir laden Sie unser technisches Team kontaktieren blogpascher.com

          3. Da ich eine eingeschränkte Version kostenlos installiert habe, denke ich, dass das Problem da ist.
            Ich werde versuchen, eine andere Version zu installieren ...

      2. Ich habe Text kopiert und versucht, ihn in eine Spalte im Plugin einzufügen. Unmöglich, weder mit der Tastenkombination STRG + V noch im Kontextmenü des Rechtsklicks, das diese Funktion nicht bietet.
        Gibt es eine Alternative alles neu eingeben?

  3. Ich habe nur ein Wort zu sagen Awesome! Ich habe es installiert und nach zwei oder drei Korrekturen habe ich es geschafft, Spalten zu erstellen, danke!

  4. Hallo, ich habe erweiterte WP-Spalten installiert.
    Aber wenn ich auf die Seite schaue, habe ich oben links in jeder Spalte ein weißes Quadrat? können Sie mir helfen. Vielen Dank

    1. Hallo,

      Haben Sie versucht, das Standard-WordPress-Design zu verwenden, um festzustellen, ob das Problem weiterhin besteht?

    2. Guten Tag,

      Wir können Ihnen nicht wirklich helfen, wenn Sie nicht geben Informationen darüber, wie Sie tun, ein weißes Quadrat zu haben.

      Merci.

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
6 Aktien
Aktie4
tweet1
Registrieren1