WordPress Layout Begriffe entmystifiziert (Kurzreferenz)

Versuchen Sie zu verstehen, was WordPress-Layoutbegriffe bedeuten?

Viele Anfänger stoßen bei der Arbeit an ihren Websites auf WordPress-Layoutbegriffe und -Vokabeln. Diese Begriffe werden von Designern und Entwicklern verwendet und können für den Durchschnittsnutzer verwirrend sein.

In diesem Leitfaden werden wir einige der am häufigsten verwendeten WordPress-Layout-Begriffe erklären. Dies wird Ihnen helfen, die Fachsprache für WordPress-Website-Layouts zu verstehen und an Ihrer Website wie ein absoluter Profi zu arbeiten.

Warum WordPress Layout Begriffe lernen?

WordPress-Themes steuern das Erscheinungsbild Ihrer Website. Je nachdem, welches Theme Sie verwenden, können Sie es auf verschiedene Weise anpassen.

Für Themes, die den vollständigen Site-Editor unterstützen, können Sie diese anpassen, indem Sie dieErscheinungsbild “ EditorSeite.

Wenn Sie ein klassisches Thema verwenden (ein Thema, das derzeit nicht den vollständigen Site-Editor unterstützt), können Sie es anpassen, indem Sie dieErscheinungsbild “ Anpassen Seite.

Dadurch wird der Theme-Customizer gestartet, der wie folgt aussieht:

AlleTop-WordPress-Themes Sie haben die Möglichkeit, das Design Ihrer Website mit dem Theme-Customizer oder dem vollständigen Site-Editor zu ändern, aber Ihre Möglichkeiten sind je nach Theme begrenzt.

Sie können verwendenWordPress-Seitenerstellungs-Plugins wieSeedProd für noch mehr Flexibilität.

SeedProd ermöglicht es Ihnen, benutzerdefinierte Layouts mit einfachen Drag-and-Drop-Tools zu erstellen, ohne Code zu schreiben.

Außerdem bietet es Dutzende von Vorlagen, die Sie als Ausgangspunkt verwenden können. Außerdem unterstützt SeedProd WooCommerce, was Ihnen auch bei der Erstellung von Layouts für IhreInternetshop.

Bei der Erstellung eines Layouts für Ihre Website stoßen Sie jedoch möglicherweise auf Webdesign-Begriffe, mit denen Sie nicht vertraut sind.

Das Erlernen dieser Website-Layout-Begriffe wird Ihnen helfen, die Bausteine des WordPress-Website-Designs zu verstehen, so dass Sie jedes Design, das Sie sich vorstellen können, leichter erstellen können.

Lassen Sie uns diese gängigen WordPress-Layout-Begriffe entmystifizieren, um zu erfahren, was sie bedeuten und wie man sie verwendet. Hier ist eine kurze Liste der Konzepte und Begriffe, die wir in diesem Artikel erklären werden:

Ein typisches WordPress-Layout verstehen

Die meisten Websites verwenden ein sehr vertrautes Layout. Es sieht in etwa so aus:

Der obere Bereich einer Website wird als Kopfzeile bezeichnet, gefolgt von einem Inhaltsbereich und einer Fußzeile am unteren Ende der Seite.

Je nachdem, welche Seite ein Benutzer aufruft, kann das Layout unterschiedlich sein.

Zum Beispiel kann einWordPress-Blog Seite kann eine Seitenleiste neben dem Inhaltsbereich enthalten.

Dieses Grundlayout wird durch weitere Elemente ergänzt, die wir später in diesem Artikel besprechen werden.

Lassen Sie uns zunächst auf jeden dieser Hauptbereiche näher eingehen.

Kopfzeile im WordPress-Layout

Die Kopfzeile in einem WordPress-Layout ist der oberste Abschnitt einer Seite. Er enthält normalerweise IhreWebsite-LogoTitel, Navigationsmenüs, ein Suchformular und andere wichtige Elemente, die die Nutzer zuerst sehen sollen.

Hier sehen Sie, wie der Kopfbereich von WPBeginner aussieht.

Benutzerdefinierte Kopfzeile in WordPress-Themes

Viele beliebte WordPress-Themes verfügen über zusätzliche Funktionen, mit denen Sie den Kopfbereich Ihres WordPress-Layouts anpassen können. Diese Funktion wird manchmal als benutzerdefinierte Kopfzeile bezeichnet.

Wenn Sie ein Theme mit Site-Editor-Unterstützung verwenden, können Sie die Kopfzeile ändern, indem Sie im Site-Editor auf den Kopfzeilenbereich klicken.

Von hier aus können Sie die Kopfzeile nach Ihren Wünschen anpassen. Sie können Farben und das Navigationsmenü ändern und Blöcke wie Suche, Website-Logo, Schaltflächen und mehr hinzufügen.

Bei klassischen Themen finden Sie die benutzerdefinierten Kopfzeileneinstellungen auf der Registerkarte „Kopfzeilenoptionen“.

Je nach WordPress-Theme können Sie der Kopfzeile ein Bild über die gesamte Breite mit einer Tagline oder einemCall-to-Action-Schaltfläche.

Bei einigen WordPress-Themes können Sie die Position des Logos, der Navigationsmenüs und der Header-Bilder ändern.

Benutzerdefinierter Hintergrund in WordPress

Bei einigen WordPress-Themes können Sie auch ganz einfach die Hintergrundfarbe ändern oder ein Hintergrundbild für Ihre Website verwenden.

Wenn Sie ein Thema mit Site-Editor-Unterstützung verwenden, können Sie die Hintergrundfarbe ändern, indem Sie im vollständigen Site-Editor auf „Stile“ gehen.

Wählen Sie einfach die Option „Farben“ aus dem Bedienfeld „Formatvorlagen“.

Danach können Sie auf „Hintergrund“ klicken, um eine Hintergrundfarbe für Ihre Website auszuwählen.

Bei klassischen Themen hängen die Einstellungen von den Funktionen Ihres Themas ab.

Viele klassische Themes bieten Unterstützung für benutzerdefinierte Hintergründe. Sie finden diese Einstellungen in den Optionen „Farben“ oder „Hintergrundbild“ im Theme-Customizer.

Oft sind diese Optionen in anderen Registerkarten versteckt, und Sie müssen sich umsehen, um sie zu finden.

Weitere Einzelheiten finden Sie in unseren Leitfäden zuHinzufügen eines Hintergrundbildes in WordPress oderÄndern der Hintergrundfarbe in WordPress.

Inhaltsbereich in WordPress

Der Inhaltsbereich kommt direkt nach dem Kopfbereich eines Layouts. Hier wird der Hauptinhalt der Seite angezeigt.

Für eineindividuelle Homepage Layout kann der Inhaltsbereich eine Aufforderung zum Handeln enthalten, gefolgt von Dienstleistungen oder Produkten, Erfahrungsberichten und anderen wichtigen Informationen.

Online-Shops nutzen diesen Bereich in der Regel, um laufende Verkäufe, vorgestellte Produkte, meistverkaufte Artikel und mehr zu bewerben.

Ein WordPress-Blog kann ein inhaltslastiges Layout mit Auszügen und Bildern aus aktuellen Artikeln verwenden, einNewsletter-Anmeldeformularund mehr.

So sieht das Layout der Homepage von WPBeginner aus. Da es sich um eine inhaltsreiche Website handelt, nehmen die neuesten Artikel den gesamten Inhaltsbereich ein.

Standardmäßig verwendet WordPress ein Blog-Layout, das Ihre neuesten Blog-Beiträge als Startseite Ihrer Website anzeigt.

Sie können diese Einstellung jedoch ändern und eine beliebige Seite als Startseite für Ihre Website verwenden.

Gehen Sie einfach zumEinstellungen “ Lesen Seite und wählen Sie unter der Option „Ihre Homepage wird angezeigt“ die Option „Eine statische Seite“.

Danach können Sie eine Seite für Ihre Homepage und eine andere für Ihre Blogseite auswählen.

Weitere Einzelheiten finden Sie in unserem Leitfaden überErstellung einer eigenen Seite für Ihre Blogbeiträge in WordPress.

Vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Jetzt können Sie die Seite bearbeiten, die Sie als Ihre Homepage ausgewählt haben, undein individuelles Homepage-Layout erstellen.

Sidebars in WordPress-Layouts

Wie der Name schon sagt,Seitenleisten erscheinen normalerweise auf der rechten oder linken Seite des Inhaltsbereichs.

In WordPress sind die Seitenleisten auch Widget-fähige Bereiche. Dies bedeutet, dass Sie Folgendes hinzufügen könnenWidgets zu diesem Bereich hinzufügen und Elemente wie Archive, Newsletter-Anmeldeformulare, Kategorien, beliebte Inhalte und mehr anzeigen.

Um Ihre Seitenleisten zu bearbeiten, müssen Sie in derErscheinungsbild “ Widgets Seite. Von hier aus können Sie Blöcke zu Ihren Seitenleisten hinzufügen und sie nach Ihren Wünschen bearbeiten.

Allerdings verfügen nicht alle WordPress-Themes über Widget-fähige Bereiche oder Seitenleisten.

Wenn Sie das Menü Widgets nicht unterErscheinungsbilddann unterstützt Ihr Thema keine Seitenleisten oder hat keine Widget-bereiten Bereiche.

Fußzeilenbereich in WordPress-Layouts

Der Fußzeilenbereich erscheint unterhalb des Inhaltsbereichs am unteren Rand eines Seitenlayouts.

Wenn Sie ein WordPress-Theme mit Site-Editor-Unterstützung verwenden, können Sie den Fußzeilenbereich bearbeiten, indem Sie darauf klicken.

Sie können den Fußzeilenbereich auch bearbeiten, indem Sie in der Navigation des Website-Editors auf „Muster“ klicken. Der Fußzeilenbereich wird unter dem Menüpunkt „Vorlagenteile“ angezeigt.

Bei der Bearbeitung des Fußzeilenbereichs im Website-Editor können Sie beliebige Blöcke hinzufügen, um verschiedene Elemente anzuzeigen.

Sie können zum Beispiel eine Liste Ihrer wichtigsten Seiten hinzufügen, ein Navigationsmenü anzeigen, ein Kontaktformular hinzufügen und vieles mehr.

Wenn Sie ein klassisches Theme verwenden, ist die Wahrscheinlichkeit groß, dass Ihr Theme über einen Footer-Widget-Bereich verfügt.

Gehen Sie einfach zumErscheinungsbild “ Widgets Seite und suchen Sie nach einem Fußzeilen-Widget-Bereich.

Wie beim Site-Editor können Sie Blöcke verwenden, um verschiedene Elemente zu Fußzeilen-Widgets in Ihrem Thema hinzuzufügen.

Sie fragen sich, was Sie in die Fußzeile Ihrer Website aufnehmen sollten? Siehe unsere Checkliste mitDinge, die Sie in die Fußzeile Ihrer WordPress-Website einfügen sollten.

Andere Komponenten eines WordPress-Layouts

Als Nächstes werden wir uns einige der Komponenten eines WordPress-Layouts ansehen, die Sie zu Ihren Kopf-, Inhalts-, Seitenleisten- oder Fußzeilenabschnitten hinzufügen können. Dies sind die Bausteine, die Ihnen helfen, ein funktionierendes Layout zu erstellen.

Navigationsmenüs in WordPress

Navigationsmenüs oder Menüs sind horizontale oder vertikale Listen von Links. Die meisten Websites haben mindestens ein primäres Navigationsmenü im Kopfbereich.

Einige Websites verwenden jedoch mehrere Navigationsmenüs im Kopfbereich.

WordPress ermöglicht es Ihnen auch, Navigationsmenüs als Widget anzuzeigen. Diese Menüs erscheinen als vertikale Liste von Links, und Sie können sie in Seitenleisten oder in den Widget-Bereichen der Fußzeile platzieren.

Weitere Einzelheiten finden Sie in unserem Leitfaden überwie man Navigationsmenüs in WordPress hinzufügt.

Widgets in einem WordPress-Layout verwenden

Wenn Ihr WordPress-Theme Widgets unterstützt, können Sie diese verwenden, um das Layout Ihrer Website neu zu gestalten. Und mit Block-Widgets kann Ihr Theme jetzt auch Blöcke in den Widget-Bereichen verwenden.

Sie können Widgets zu den Widget-bereiten Bereichen oder Seitenleisten Ihrer WordPress-Website hinzufügen. Einige WordPress-Themes verfügen über mehrere Widget-fähige Bereiche zum Hinzufügen von Widgets oder Blöcken.

WordPress verfügt über mehrere integrierte Widgets und Blöcke, die Sie verwenden können. Viele beliebte WordPress-Plugins bieten auch ihre eigenen Widgets und Blöcke.

Sie können zum Beispiel Widgets/Blöcke verwenden, um Listen mit beliebten Beiträgen hinzuzufügen, eineKontakt-FormularWerbebanner,Social Media Feedsund mehr.

Sie können alle diese Widgets sehen, indem Sie dieErscheinungsbild “ Widgets Seite im WordPress-Verwaltungsbereich.

Anmerkung:Möglicherweise sehen Sie die Seite „Widgets“ im WordPress-Administrationsbereich nicht, wenn Ihr Theme keine Widget-Bereiche hat.

Weitere Einzelheiten finden Sie in unserem Leitfaden überwie man Widgets in WordPress hinzufügt und verwendet.

Verwendung von Blöcken in WordPress-Layouts

WordPress verwendetder Blockeditor um Inhalte zu schreiben, Widgetbereiche zu verwalten oder Ihre Website zu bearbeiten. Er verwendet Blöcke für alle gängigen Webelemente, weshalb er auch Block-Editor genannt wird.

Mit diesem Editor können Sie mithilfe von Blöcken schöne Layouts für Ihre WordPress-Beiträge und -Seiten erstellen.

Es gibt verschiedene Arten von Blöcken für die gängigsten Elemente jeder Art von Inhalt. Sie können zum Beispiel Absätze, Überschriften, Bilder und Galerien hinzufügen,Videoeinbettungen, Spalten,Tabellenund mehr.

So können Sie für jeden Beitrag oder jede Seite Ihrer WordPress-Website verschiedene Layouts erstellen, ohne ein Plugin zu installieren oder Ihr Theme zu ändern.

Hervorgehobene Bilder in WordPress-Layouts

Wenn Sie die Homepage von WPBeginner besuchen, werden Sie neben jedem Artikeltitel Miniaturbilder sehen. Diese werden „Featured Images“ genannt.

Mit WordPress können Sie Bilder für Ihre Beiträge und Seiten festlegen. Ihr WordPress-Theme verwendet diese Bilder dann in verschiedenen Bereichen Ihrer Website.

Weitere Informationen finden Sie in unserem Leitfaden überwie man Bilder in WordPress einfügt.

Titelbilder in WordPress

Ein Titelbild ist in der Regel ein breites Bild, das als Titelbild für einen neuen Abschnitt in einem Blogbeitrag oder einer Seite verwendet wird.

Sie können es mithilfe des Cover-Blocks zu Ihrem Beitrag oder Ihrer Seite hinzufügen. Der Cover-Block ermöglicht Ihnen auch die Verwendung einer Hintergrundfarbe anstelle eines Bildes.

Weitere Informationen finden Sie in unserem ausführlichen Leitfaden über dieUnterschied zwischen dem Titelbild und dem angezeigten Bild.

Verwendung von Mustern im WordPress-Editor

Muster sind Sammlungen von vorbereiteten Blöcken, mit denen Sie schnell verschiedene Abschnitte in Ihre Layouts einfügen können.

Sie können Muster für das Schreiben von Inhalten und die Bearbeitung von Beiträgen und Seiten verwenden.

In ähnlicher Weise können Sie Muster im vollständigen Site-Editor in Ihrem WordPress-Theme und Website-Layout verwenden.

Starten Sie einfach den Website-Editor, und Sie werden Muster in den „Design“-Optionen sehen.

Jedes Muster ist eine Sammlung von Blöcken, die in einer bestimmten Reihenfolge für häufig verwendete Layouts angeordnet sind.

Ihr WordPress-Theme wird möglicherweise mit mehreren Mustern geliefert. Sie können auch weitere Muster in der WordPress-Musterbibliothek finden.

Möchten Sie Ihre Designabschnitte speichern? Sie speichern Ihre eigenen Blockanordnungen als Muster und können sie später wiederverwenden.

Es handelt sich um eine relativ neue Funktion, so dass nur eine begrenzte Anzahl von Mustern verfügbar ist. Es werden jedoch mehr Optionen verfügbar sein, wenn mehr WordPress-Themes und Plugins ihre Muster zum Block-Editor hinzufügen.

Weitere Informationen finden Sie in unserem Leitfaden überVerwendung von Blockmustern in WordPress.

Hinzufügen von Schaltflächen im WordPress-Layout

Schaltflächen spielen eine wichtige Rolle bei der Gestaltung moderner Websites und Layouts. Sie bieten den Nutzern eine klare Aufforderung zum Handeln, was Ihnen hilft, Ihr Geschäft und Ihre Konversionen zu steigern.

Der Standard-Block-Editor wird mit einem Button-Block geliefert, den Sie in jedem WordPress-Beitrag, auf jeder Seite oder im Site-Editor verwenden können.

Ihr WordPress-Theme kann auch mit einer Call-to-Action-Schaltfläche ausgestattet sein, die Sie im Theme-Customizer einstellen können. Die meisten beliebten WordPress-Plugins für die Seitenerstellung bieten ebenfalls Schaltflächen in verschiedenen Stilen an, die Sie verwenden können.

Sie können sogarClick-to-Call-Schaltflächen in WordPress hinzufügen mit einem Plugin.

Weitere Einzelheiten finden Sie in unserem Leitfaden überwie man Call-to-Action-Buttons in WordPress hinzufügt.

Benutzerdefinierte CSS in WordPress-Layouts verwenden

CSS ist die für die Gestaltung von Websites verwendete Sprache. Ihr WordPress-Theme und Ihre Plugins verfügen über eigene CSS-Regeln, aber von Zeit zu Zeit möchten Sie vielleicht kleine Dinge wie Textfarbe, Schriftgröße oder Hintergrundfarbe ändern.

Hier kommt das benutzerdefinierte CSS ins Spiel. WordPress erleichtert es Ihnen, Ihre eigenen benutzerdefinierten CSS-Regeln zu speichern.

Wenn Sie ein Theme mit Unterstützung für den Site-Editor verwenden, gehen Sie einfach in den BereichErscheinungsbild “ Editorum den Site-Editor zu starten.

Klicken Sie auf eine beliebige Vorlage, um mit der Bearbeitung zu beginnen, und klicken Sie dann auf die Schaltfläche „Stil“ in der oberen rechten Ecke des Bildschirms.

Daraufhin wird in der rechten Spalte das Feld „Stile“ angezeigt. Scrollen Sie von hier aus nach unten und klicken Sie auf die Registerkarte „Zusätzliche CSS“.

Daraufhin wird ein Textfeld angezeigt, in das Sie Ihren zusätzlichen CSS-Code einfügen können.

Vergessen Sie nicht, auf die Schaltfläche „Speichern“ zu klicken, um Ihre Änderungen zu speichern, wenn Sie fertig sind.

Wenn Sie ein klassisches WordPress-Theme verwenden, können Sie Ihr eigenes CSS im Theme-Customizer hinzufügen.

Gehen Sie einfach zumErscheinungsbild “ Anpassen Seite und klicken Sie dann auf die Registerkarte „Zusätzliche CSS“.

Von hier aus können Sie Ihre benutzerdefinierten CSS-Regeln hinzufügen, und Sie können sie in der Live-Vorschau sehen.

Hinzufügen von benutzerdefiniertem CSS in WordPress mit einem Plugin

Wenn Sie die Standardmethoden verwenden, wird Ihr benutzerdefinierter CSS-Code normalerweise mit den Einstellungen Ihres Themas gespeichert. Wenn Sie Ihr Thema ändern, wird Ihr benutzerdefinierter CSS-Code deaktiviert.

Eine bessere Möglichkeit, Ihr benutzerdefiniertes CSS in WordPress zu speichern, ist die Verwendung derWPCode Plugin. Es ist das beste WordPress-Code-Snippet-Plugin, mit dem Sie ganz einfach benutzerdefinierte Code-Snippets hinzufügen können, ohne Ihre Website zu zerstören.

Zunächst müssen Sie das Programm installieren und aktivieren.WPCode Plugin. Einzelheiten finden Sie in unserem Leitfaden überwie man ein WordPress-Plugin installiert.

Gehen Sie nach der Aktivierung auf die SeiteCode-Schnipsel “ + Neu hinzufügen aus dem WordPress-Administrations-Dashboard.

Bewegen Sie dann den Mauszeiger über die Option „Eigenen Code hinzufügen (neues Snippet)“ in der Code-Snippet-Bibliothek und klicken Sie auf die Schaltfläche „Snippet verwenden“.

Fügen Sie dann oben auf der Seite einen Titel für Ihr benutzerdefiniertes CSS-Snippet hinzu. Das kann alles sein, was Ihnen hilft, den Code zu identifizieren.

Schreiben oder fügen Sie anschließend Ihr benutzerdefiniertes CSS in das Feld „Codevorschau“ ein und legen Sie den „Codetyp“ fest, indem Sie die Option „CSS Snippet“ aus dem Dropdown-Menü auswählen.

Scrollen Sie dann nach unten zum Abschnitt „Einfügen“ und wählen Sie die Methode „Automatisches Einfügen“, wenn Sie den Code in Ihrer gesamten Datenbank ausführen möchten.WordPress-Website.