In diesem Tutorial finden Sie Informationen zu:<\/p>\n\n\n\n
- Was ist der Zweck von Spalten?<\/a><\/li>
- So funktionierten Spalten im alten Editor<\/a><\/li>
- So erstellen Sie Spalten in WordPress ohne Plugin (im Blockeditor)<\/a><\/li>
- Grundlegende Einstellungen f\u00fcr den Spaltenblock<\/a><\/li>
- So arbeiten Sie mit dem WordPress-Spaltenblock<\/a><\/li>
- So bearbeiten Sie verschachtelte Bl\u00f6cke<\/a><\/li>
- Spalten blockieren Vorteile<\/a><\/li><\/ul>\n\n\n\n
<\/span><\/a>Was ist der Zweck von Spalten?<\/span><\/h3>\n\n\n\n
Spalten auf einer Website k\u00f6nnen mehrfach verwendet werden. Erstens k\u00f6nnen sie Inhalte \u00fcbersichtlicher, lesbarer und leichter durchsuchbar machen. Durch die Organisation von Inhalten in Spalten k\u00f6nnen Sie wichtige Informationen oder Parameter hervorheben.<\/p>\n\n\n\n
Sie k\u00f6nnen beispielsweise ein mehrspaltiges Layout verwenden, um Ihre Dienste darzustellen. F\u00fcgen Sie dort ein illustratives Bild, eine Beschreibung oder eine Schaltfl\u00e4che hinzu. Sie k\u00f6nnen das Bild nat\u00fcrlich anklickbar machen.<\/p>\n\n\n\n
![\"Mehrspaltiges](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-services.png\")
<\/a>Mehrspaltiges Layout mit Diensten<\/figcaption><\/figure><\/div>\n\n\n\n \u00c4hnlich wie bei Diensten k\u00f6nnen Sie in WordPress Spalten verwenden, um Produkte oder Produktkategorien anzuzeigen. Es ist ideal, wenn Sie eine einfache Unternehmenswebsite haben.<\/p>\n\n\n\n
![\"Mehrspaltiges](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-shop-cat.png\")
<\/a>Spalten zur Anzeige von Produkten und Kategorien<\/figcaption><\/figure><\/div>\n\n\n\n In Blogbeitr\u00e4gen k\u00f6nnen Sie Spalten verwenden, um Inhalte zu trennen. Sie k\u00f6nnen Text, Aufz\u00e4hlungspunkte oder Bilder nebeneinander platzieren.<\/p>\n\n\n\n
![\"Getrennter](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-post-example.png\")
<\/a>Verwenden von Spalten zum Trennen von Inhalten<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>So funktionierten Spalten im alten Editor<\/span><\/h3>\n\n\n\n
Wenn Sie vor WordPress 5+ mehrspaltigen Inhalt erstellen wollten, mussten Sie Tabellen verwenden. Es war viel schwieriger als im neuesten Editor. Dar\u00fcber hinaus gab es in der Regel ein Problem mit Stilen und der Darstellung von Tabellen auf Mobilger\u00e4ten. Wie hat es fr\u00fcher funktioniert?<\/p>\n\n\n\n
Sie hatten mehrere M\u00f6glichkeiten, Spalten auf einer WordPress-Website zu erstellen:<\/p>\n\n\n\n
1. F\u00fcgen Sie HTML-Code manuell in den Texteditor ein<\/b><\/p>\n\n\n\n
<table>\n <tr>\n <td><\/td>\n <td><\/td>\n <\/tr>\n<\/table><\/pre>\n\n\n\n
Dieser Ansatz wurde haupts\u00e4chlich von Entwicklern verwendet, die schnell Tabellen oder Spalten basierend auf ihren Anforderungen erstellen konnten. Der Nachteil war, dass nicht alle WordPress-Themes gut mit Spalten umgehen konnten. Tabellen waren normalerweise nicht perfekt und der durchschnittliche Benutzer konnte nicht alle m\u00f6glichen Probleme einfach l\u00f6sen.<\/p>\n\n\n\n
2. Tabellen im WordPress-Editor zulassen<\/b><\/p>\n\n\n\n
Da WordPress den TinyMCE-Editor verwendet, war es m\u00f6glich, Funktionen zum Bearbeiten von Tabellen zuzulassen. Wenn Sie mehr erfahren m\u00f6chten, finden Sie hier alle Details in diesem Forum<\/a>. Wenn Sie dasselbe f\u00fcr unsere AIT-Themes tun, funktionieren die Tabellen korrekt.<\/p>\n\n\n\n
3. Verwendung des Columns-Elements in AIT-Themen<\/b><\/p>\n\n\n\n
Wenn Sie eines unserer \u00e4lteren WordPress-Themes verwenden, kennen Sie sicherlich unser Columns-Element. Mit diesem Element k\u00f6nnen Spalten innerhalb von Seiten hinzugef\u00fcgt werden. Es handelt sich um ein bestellbares Element, das hei\u00dft, Sie k\u00f6nnen es \u00fcberall dort platzieren, wo Sie es ben\u00f6tigen. Der Vorteil liegt in der Variabilit\u00e4t innerhalb der Seiten.<\/p>\n\n\n\n
![\"Spaltenelement\"](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/ait-columns-element.png\")
<\/a>Bestellbare Elementspalten \u2013 Sie k\u00f6nnen es in jedem AIT-Theme verwenden<\/figcaption><\/figure><\/div>\n\n\n\n 4. Laden Sie das Plugin eines Drittanbieters herunter, um Tabellen zu verwalten<\/b><\/p>\n\n\n\n
Eine weitere L\u00f6sung zum Erstellen von Spalten in WordPress-Beitr\u00e4gen und -Seiten bestand darin, eines der verf\u00fcgbaren Plugins zum Erstellen von Tabellen herunterzuladen. Diese Plugins erm\u00f6glichen das Hinzuf\u00fcgen von Spalten\/Tabellen mit wenigen Klicks und ohne Programmieraufwand. Dies war auch f\u00fcr weniger erfahrene Benutzer m\u00f6glich.<\/p>\n\n\n\n
<\/span><\/a>So erstellen Sie Spalten in WordPress ohne Plugin (im Blockeditor)<\/span><\/h3>\n\n\n\n
Dank des neuen Blockeditors ist das Erstellen von Spalten extrem einfach geworden. Wenn Sie noch altes WordPress verwenden, ist jetzt der richtige Zeitpunkt f\u00fcr ein Update auf die neueste Version. Mit dem Spaltenblock k\u00f6nnen Sie Spalten einfach und mit wenigen Klicks hinzuf\u00fcgen und verwalten.<\/p>\n\n\n\n
Dieser Block ist eine willkommene Abwechslung f\u00fcr alle, die mit mehrspaltigen Inhalten arbeiten, Produkte pr\u00e4sentieren oder Blogs schreiben m\u00f6chten und keine Erfahrung mit Programmierung haben.<\/p>\n\n\n\n
Schauen wir uns an, wie man den Columns-Block hinzuf\u00fcgt und wie man Spalten in WordPress ohne Plugin erstellt:<\/p>\n\n\n\n
- Die erste M\u00f6glichkeit besteht darin, in der oberen Leiste auf \u201e+\u201c zu klicken und aus den verf\u00fcgbaren Bl\u00f6cken den Block \u201eSpalten\u201c auszuw\u00e4hlen.<\/li>
- Die zweite M\u00f6glichkeit besteht darin, irgendwo im Editor auf \u201e+\u201c zu klicken.\n<\/li><\/ul>\n\n\n\n
![\"F\u00fcgen](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-add.png\")
<\/a>Spalten in WordPress hinzuf\u00fcgen, indem Sie auf \u201e+\u201c klicken<\/figcaption><\/figure><\/div>\n\n\n\n ![\"Spaltenblock](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-shortcut.gif\")
<\/a>Spalten in WordPress mit Schr\u00e4gstrich \u201e\/\u201c hinzuf\u00fcgen<\/figcaption><\/figure><\/div>\n\n\n\n <\/span>Vordefinierte Layouts des WordPress-Spaltenblocks (NEU ab WP 5.3)<\/span><\/h4>\n\n\n\n
Die neueste Version brachte enorme Verbesserungen bei den Spalteneinstellungen. Zun\u00e4chst einmal stehen Standard-Layoutstile zur Verf\u00fcgung. Was bedeutet das?<\/p>\n\n\n\n
Benutzer k\u00f6nnen beim Hinzuf\u00fcgen eines neuen Blocks zum Inhaltsbereich ihr Layout und ihren Ausrichtungsstil ausw\u00e4hlen. Vordefinierte Layouts k\u00f6nnen sehr hilfreich sein \u2013 insbesondere f\u00fcr Benutzer, die nicht \u00fcber fortgeschrittene WordPress-Kenntnisse verf\u00fcgen. Diese Funktion stellt dar, wie wir uns die Art und Weise vorstellen, wie man Spalten in WordPress erstellt (ohne Plugin oder andere Add-Ons).<\/p>\n\n\n\n
![\"Vordefinierte](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/wordpress-columns.jpg\")
Vordefinierte Layoutoptionen<\/figcaption><\/figure>\n\n\n\n <\/span><\/p>\n\n\n\n
Wenn Sie im WordPress-Spaltenblock kein vordefiniertes Layout ausw\u00e4hlen m\u00f6chten, \u00fcberspringen Sie es einfach. Nachdem Sie diesen Schritt \u00fcbersprungen haben, wird der Inhalt in zwei gleiche Teile\/zwei einzelne Spalten aufgeteilt, die bearbeitet werden k\u00f6nnen.<\/p>\n\n\n\n
![\"Erstellter](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns.png\")
<\/a>Spaltenblock mit 2 Standardbereichen (Spalten), die Sie bearbeiten k\u00f6nnen<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Spalten Blockieren Sie Grundeinstellungen<\/span><\/h4>\n\n\n\n
Der WordPress-Spaltenblock selbst bietet nicht viele Optionen. Warum das so ist, erkl\u00e4ren wir sp\u00e4ter. In der oberen Leiste k\u00f6nnen Sie die Ausrichtung auf \u201eBreit\u201c oder \u201eVolle Breite\u201c \u00e4ndern. Sie k\u00f6nnen diese Ausrichtung \u00e4ndern, wenn sie von Ihrem aktiven Theme unterst\u00fctzt wird.<\/p>\n\n\n\n
![\"Obere](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-toolbar.png\")
<\/a>Obere Symbolleiste mit Ausrichtungsoptionen<\/figcaption><\/figure><\/div>\n\n\n\n Die wichtigste Einstellung des Spaltenblocks ist die Anzahl der Spalten in der Inspektor-Seitenleiste auf der rechten Seite. Standardm\u00e4\u00dfig gibt es 2 Spalten, aber Sie k\u00f6nnen diese Zahl auf 6 erh\u00f6hen. Sie k\u00f6nnen sie mit der Maus \u00e4ndern oder eine Zahl eingeben. Wie es aussieht, sehen Sie sofort, nachdem Sie die Spalten vergr\u00f6\u00dfert oder verkleinert haben. Der Block \u00e4ndert sich je nach Schieberegler dynamisch.<\/p>\n\n\n\n
![\"Anzahl](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-count.gif\")
<\/a>Bewegen Sie den Schieberegler, um die Anzahl der Spalten nach Bedarf zu \u00e4ndern<\/figcaption><\/figure><\/div>\n\n\n\n Dies ist sehr praktisch, da Sie die Anzahl der Spalten buchst\u00e4blich in Sekundenschnelle \u00e4ndern k\u00f6nnen, ohne dass schwierige \u00c4nderungen an den Einstellungen oder der Codierung erforderlich sind.<\/p>\n\n\n\n
\u00c4hnlich wie bei anderen Bl\u00f6cken im WordPress-Editor k\u00f6nnen Sie auch im Spaltenblock eine benutzerdefinierte CSS-Klasse einf\u00fcgen.<\/p>\n\n\n\n
<\/span>Block-Appender f\u00fcr reibungsloseres Arbeiten mit Bl\u00f6cken<\/span><\/h4>\n\n\n\n
Der Spaltenblock ist etwas Besonderes, da Sie damit mehrere Bl\u00f6cke erstellen k\u00f6nnen. Bis zur Ver\u00f6ffentlichung der neuen Version war es ziemlich schwierig, mit einzelnen Bl\u00f6cken zu arbeiten. Als Sie einen Block hinzuf\u00fcgen wollten, wussten Sie nicht genau, wo Sie klicken sollten. Dank des Block-Appenders (und seiner Unterscheidung nach Hintergrundfarbe) ist es einfacher, Inhalte in die richtige Spalte einzuf\u00fcgen.<\/p>\n\n\n\n
![\"Appender](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/wp-columns-block-appender.jpg\")
Appender mit Hintergrundfarbe blockieren<\/figcaption><\/figure>\n\n\n\n <\/span><\/a>So arbeiten Sie mit dem WordPress-Spaltenblock<\/span><\/h3>\n\n\n\n
Das Sch\u00f6ne am Columns-Block ist, dass jede Spalte andere Bl\u00f6cke verschachteln kann. Es kann sich um einen Absatz, einen Bildblock oder einen Schaltfl\u00e4chenblock handeln. Die maximale Anzahl der Spalten betr\u00e4gt 6. Sie k\u00f6nnen daher nach Bedarf mehrspaltige Inhalte erstellen. Wie bereits erw\u00e4hnt, k\u00f6nnen Sie zur Pr\u00e4sentation von Produkten Produktbild, Name, Preis und Schaltfl\u00e4che nebeneinander hinzuf\u00fcgen.<\/p>\n\n\n\n
![\"Verschiedene](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-blocks.png\")
<\/a>Mit dem Spaltenblock k\u00f6nnen Sie verschiedene Arten von Inhalten nebeneinander pr\u00e4sentieren<\/figcaption><\/figure><\/div>\n\n\n\n Sie k\u00f6nnen auch mehrere S\u00e4ulenbl\u00f6cke untereinander verwenden, um ein Raster zu erstellen. Sie k\u00f6nnen damit Ihre Dienstleistungen pr\u00e4sentieren oder wichtige Funktionen bewerben.<\/p>\n\n\n\n
![\"Spalten](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-features.png\")
<\/a>Rastereffekt von untereinander platzierten Spaltenbl\u00f6cken<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Bearbeiten verschachtelter Bl\u00f6cke<\/span><\/h4>\n\n\n\n
Wie bereits erw\u00e4hnt, k\u00f6nnen Sie andere Bl\u00f6cke in Spalten verschachteln. F\u00fcr jeden verschachtelten Block sind alle Einstellungen verf\u00fcgbar. Das hei\u00dft, wenn Sie einen Bildblock zu einer Spalte hinzuf\u00fcgen, k\u00f6nnen Sie ihn genauso bearbeiten wie im Standalone-Modus Bildblock<\/a>.<\/p>\n\n\n\n
![\"Bildblock](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-image-block.png\")
<\/a>Verf\u00fcgbare Einstellungen f\u00fcr den im Spaltenblock verschachtelten Bildblock<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Fazit: S\u00e4ulen blockieren Vorteile<\/span><\/h3>\n\n\n\n
Durch die Ver\u00f6ffentlichung des WordPress-Blockeditors und die M\u00f6glichkeit, Spalten in Seiten und Beitr\u00e4gen zu verwenden, wurde die Art und Weise, wie Benutzer mit Inhalten arbeiten k\u00f6nnen, erheblich vereinfacht. Dank des WordPress Columns-Blocks ist es nicht mehr wichtig, L\u00f6sungen von Drittanbietern zu verwenden oder HTML-Code zu schreiben. Das Hinzuf\u00fcgen oder L\u00f6schen von Spalten ist mit wenigen Klicks m\u00f6glich. Alles ist sehr intuitiv und schnell, auch f\u00fcr weniger technisch versierte Benutzer.<\/p>\n\n\n\n
Ihr Inhalt im mehrspaltigen Layout wird gut im Raster ausgerichtet. Auch in der responsiven Version sieht es sofort gut aus.<\/p>\n\n\n\n
Wir haben hart an dem neuen Citadela-WordPress-Theme gearbeitet, das speziell f\u00fcr den WordPress-Blockeditor entwickelt wurde. Erfahren Sie mehr \u00fcber das Citadela-Theme und die verf\u00fcgbaren Layoutpakete.<\/p>\n
\n\nInhalts\u00fcbersicht<\/p>\n<\/span><\/div>\n
- So funktionierten Spalten im alten Editor<\/a><\/li>