20+ Wichtige Design-Elemente für eine effektive WordPress-Website

Als wir anfingen, mit WordPress zu arbeiten, hatten wir keine Ahnung, wie man eine Website richtig gestaltet. Aber durch ausgiebiges Ausprobieren haben wir die wichtigsten WordPress-Design-Elemente herausgefunden, die eine Website wirklich außergewöhnlich machen.

Im Laufe der Zeit haben wir unzählige WordPress-Websites für unsere Unternehmen und persönlichen Projekte erstellt und umgestaltet. Jetzt wenden sich viele Nutzer an uns, wenn sie eine Designberatung benötigen.

Wenn Sie neu im WordPress-Webdesign sind, dann brauchen Sie wahrscheinlich eine Menge Hinweise. Wir verstehen es – das Internet ist überschwemmt mit WordPress-Ressourcen, und es gibt oft eine Menge widersprüchlicher Ratschläge, was zu tun oder zu lassen ist, wenn es um das Design geht.

Aber keine Sorge. In diesem Artikel werden wir Sie durch die wichtigsten WordPress-Design-Elemente führen. Von der Auswahl des richtigen Themes und Farbschemas bis hin zur Optimierung Ihres Layouts für die Nutzeraktivität und Konversionen.

Das Wichtigste zuerst: Wählen Sie das richtige Tool für die Gestaltung Ihrer WordPress-Website

Bevor wir uns mit den besten Designelementen für WordPress-Websites befassen, sollten wir über die Verwendung des richtigen Tools zur Bearbeitung Ihrer Website sprechen.

Wir haben viele Methoden zur Erstellung von Websites ausprobiert, von einfachen Drag-and-Drop-Buildern bis hin zur manuellen Programmierung, wenn wir besondere Funktionen hinzufügen müssen. Jede Methode hat ihre Vorteile, je nachdem, was Sie brauchen.

Dennoch finden wir, dass das beste WordPress-Website-Design-Tool dasjenige ist, das:

• Passend zu Ihren Fähigkeiten und zu dem, was Sie tun möchten. Wenn Sie neu in diesem Bereich sind, sind Drag-and-Drop-Seitenerstellungsprogramme großartig, weil sie einfach zu bedienen sind und keine Programmierung erfordern. Wenn Sie aber wissen, wie man programmiert, dann mögen Sie vielleicht die Kontrolle über die Dinge, die mit Code gemacht werden.
• Hat alle Funktionen, die Sie brauchen. Einige Theme-Builder, wie SeedProd, haben spezielle Blöcke wie Testimonials und Countdown-Timer, die helfen können, Besucher in Kunden zu verwandeln. Andere bieten nur grundlegende Funktionen für die Gestaltung einer Website. Überlegen Sie, was Ihre Website braucht, um gut zu funktionieren.
• Funktioniert gut mit anderer Software, die Sie verwenden. Ob es sich um E-Mail-Marketing oder Design-Software wie Figma handelt, alles sollte reibungslos zusammenarbeiten. Das macht es einfacher, coole Designelemente zu Ihrer WordPress-Website hinzuzufügen.
• Passt zu Ihrem Budget. Sie wollen nicht zu viel für ein Tool ausgeben, dessen Funktionen Sie nicht nutzen werden. Suchen Sie nach etwas, das Ihnen das meiste für Ihr Geld bietet.

Wir haben viele Bewertungen und Listen für verschiedene Webdesign-Tools geschrieben, einschließlich AI-Website-Builder. Aber wir kommen immer wieder auf SeedProd als unseren Favoriten zurück.

Als Theme-Builder ist SeedProd einfach zu bedienen, bietet aber dennoch viele Funktionen. Sie können Dinge per Drag & Drop dorthin ziehen, wo Sie sie haben möchten, und es hat mehr Blöcke und Elemente als das, was normalerweise mit WordPress geliefert wird.

SeedProd hat sogar eine coole Funktion, die mithilfe von KI eine ganze Website für Sie erstellt. Sie sagen ihr einfach, was Sie wollen, und in weniger als einer Minute haben Sie eine neue Website.

Mehr dazu erfahren Sie in unserem ausführlichen SeedProd Test.

Wenn Sie kein Fan von SeedProd sind, dann ist ein anderer Page Builder, den wir gerne verwenden, Thrive Architect. Dieser Seitenersteller ist etwas fortschrittlicher, aber er lässt sich mit vielen Tools zur Conversion-Rate-Optimierung integrieren, darunter Thrive Ultimatum.

Wir mögen auch ein Tool namens CSS Hero. Es ist großartig, wenn Sie ein klassisches WordPress-Theme verwenden, aber das Aussehen ohne Programmierung ändern möchten oder mehr Flexibilität benötigen, als der Theme-Entwickler bietet.

Mehr dazu erfahren Sie in unserem CSS Hero Testbericht.

Natürlich können Sie auch die integrierten WordPress-Tools wie den Full-Site-Editor verwenden. Mit dieser Funktion können Sie Ihr Theme mithilfe von Blöcken anpassen, genau wie beim Schreiben eines Beitrags oder Erstellen einer Seite. Aber Sie benötigen möglicherweise einige Gutenberg-Block-Plugins, um erweiterte Designoptionen zu erhalten.

Sobald Sie das richtige Tool ausgewählt haben, können Sie eine WordPress-Website gestalten, die gut aussieht und einfach zu bedienen ist. Hier sind die Themen, die wir behandeln werden, und Sie können die Quicklinks unten verwenden, um durch diesen Artikel zu navigieren:

Unverzichtbare WordPress-Webdesign-Elemente

Durch die Arbeit an zahlreichen WordPress-Websites haben wir gelernt, dass die Anforderungen an das Design sehr unterschiedlich sein können.

Es gibt jedoch einige Schlüsselelemente, die jede Website haben sollte, unabhängig von ihrer Nische oder ihrem Zweck. Diese wesentlichen Komponenten bilden das Rückgrat eines effektiven WordPress-Website-Designs und tragen zu einem großartigen Benutzererlebnis bei.

In diesem Abschnitt werden wir diese unverzichtbaren Designelemente für Ihre WordPress-Website untersuchen. Wir werden verschiedene Plugins und Themes besprechen, die Ihnen bei der Umsetzung dieser Funktionen helfen können.

Denken Sie daran, dass nicht alle Tools für Ihre speziellen Bedürfnisse geeignet sind. Wenn Sie sie ohne Risiko testen möchten, sollten Sie WordPress Playground verwenden. Damit können Sie mit verschiedenen Designelementen experimentieren, ohne Ihre Live-Site zu beeinträchtigen.

1. Responsive WordPress Theme

Die Grundlage eines jeden guten WordPress-Webseitendesigns ist ein funktionales, gut aussehendes und mobilfreundliches Theme. Ohne ein solches Theme könnte Ihre Website Schwierigkeiten haben, ein konsistentes Nutzererlebnis auf verschiedenen Geräten zu bieten, was in der heutigen Mobile-First-Welt sehr schädlich ist.

Nachdem wir jahrelang verschiedene WordPress-Themes getestet haben, haben wir eine Reihe von Kriterien entwickelt, mit denen Sie das beste WordPress-Theme für Ihre Website auswählen können.

Stellen Sie zunächst sicher, dass das Theme responsive ist. Es sollte gut aussehen und auf allen Bildschirmgrößen gut funktionieren. Lesen Sie unseren Leitfaden, wie Sie die mobile Version von WordPress-Sites vom Desktop aus anzeigen, um das Theme zu testen.

Prüfen Sie als Nächstes, ob das Thema alle Funktionen enthält, die Sie benötigen. Einige Themes verfügen über Layouts mit Seitenleisten, andere über animierte Effekte und wieder andere über separate Plugins für zusätzliche Funktionen.

Wählen Sie außerdem ein Theme, das Sie langfristig nutzen können. Der Wechsel von WordPress-Themes kann eine Herausforderung sein und erfordert oft den Neuaufbau von Teilen Ihrer Website. Stellen Sie sicher, dass die Funktionen und Designelemente Ihren langfristigen Bedürfnissen entsprechen.

Außerdem sollten Sie die Kompatibilität mit beliebten Plugins und Seitenerstellungsprogrammen prüfen, die Sie verwenden möchten. Wenn Sie beispielsweise planen, WooCommerce für einen Online-Shop zu verwenden, müssen Sie sicherstellen, dass das Theme damit kompatibel ist.

Stellen Sie außerdem sicher, dass Sie Ihr WordPress-Theme anhand der neuesten Standards testen. Dieser Schritt ist sehr wichtig, um sicherzustellen, dass Ihr Theme den WordPress-Regeln und modernen Webstandards entspricht, was Sicherheitslücken und Kompatibilitätsprobleme verhindern kann.

Sie müssen auch die Leistung überprüfen. Wenn möglich, testen Sie die Demo-Website des Themes auf ihre Geschwindigkeit. Einige Themes können unnötigen Ballast enthalten, der Ihre Website verlangsamt.

Achten Sie außerdem darauf, dass das Theme eine gute Dokumentation und Unterstützung bietet. Prüfen Sie, wann das WordPress-Theme zuletzt aktualisiert wurde, da dies entscheidend sein kann, wenn Sie Hilfe benötigen.

Sie können auch automatische Updates aktivieren, damit Ihr Theme immer mit den neuesten Funktionen und Sicherheitspatches aktualisiert wird. Allerdings raten wir davon ab, wenn Sie eine komplexe Einrichtung haben, da einige Updates Ihre Website zerstören können.

Und nicht zuletzt sollten Sie Ihr Budget berücksichtigen. Premium-WordPress-Themes sind oft von hoher Qualität, aber das ist nicht immer der Fall. Bei kostenlosen Themes sollten Sie darauf achten, woher Sie sie herunterladen. Unser Leitfaden über kostenlose vs. Premium-WordPress-Themes kann Ihnen bei der Entscheidung helfen.

Bei unserer eigenen Website sind wir ziemlich wählerisch, was unser Theme angeht. Deshalb haben wir uns entschieden, ein individuelles WordPress-Theme auf der Grundlage des Genesis-Frameworks zu erstellen. So haben wir die volle Kontrolle über unser Design und unsere Funktionen.

Wenn Sie Builder wie SeedProd verwenden, werden diese oft mit ihren eigenen Themes geliefert. Auf diese Weise müssen Sie nicht mehrere Quellen durchsuchen, um eine kompatible Kombination aus Theme und Page Builder zu finden.

In diesem Fall müssen Sie nur eine auswählen, deren Farben und Stil Ihren Bedürfnissen entsprechen, damit Sie nicht so viele Änderungen vornehmen müssen.

Wenn Sie mehr Anleitung benötigen, haben wir einen umfassenden Leitfaden zu den besten und beliebtesten WordPress-Themes, den Sie sich ansehen können.

Und wenn Sie SeedProd verwenden, sehen Sie sich unsere Liste der besten SeedProd Vorlagen und Website-Kits an.

2. Farbschema, das Ihre Marke repräsentiert

DieWahl der richtigen Farben ist wichtig, wenn Sie ein WordPress-Theme auswählen oder anpassen. Im Idealfall finden Sie ein Theme mit einem Farbschema, das perfekt zu Ihrer Marke passt, aber das ist nicht immer möglich.

Für Unternehmen haben Sie wahrscheinlich bereits eine etablierte Farbpalette, die mit Ihrer Markenidentität übereinstimmt, z. B. die Farben in Ihrem Logo. Falls nicht, ist jetzt ein hervorragender Zeitpunkt, eine solche zu erstellen, insbesondere für Ihre Website.

Die Auswahl von Farben für eine Website unterscheidet sich von anderen Designprojekten. Hier sind einige Dinge, die wir bei der Auswahl eines Farbschemas berücksichtigen:

• Konsistenz – Die Farben Ihrer Website sollten mit der bestehenden visuellen Identität Ihrer Marke übereinstimmen, um ein kohärentes Markenerlebnis zu gewährleisten.
• Persönlichkeit – Farben können bestimmte Emotionen ausdrücken. Deshalb sollten Sie Farben wählen, die die Persönlichkeit Ihrer Marke widerspiegeln. Blau wird zum Beispiel oft mit Vertrauen assoziiert, während Grün für Wachstum steht.
• Branche – Berücksichtigen Sie Branchenkonventionen. Finanz-Websites beispielsweise verwenden oft Blau, um Vertrauen und Stabilität zu vermitteln, während Gesundheits- und Wellness-Websites eher zu Grün- und Weißtönen tendieren, um ein sauberes, natürliches Gefühl zu vermitteln.
• Lesbarkeit – Achten Sie darauf, dass Ihre Textfarbe gut mit der Hintergrundfarbe kontrastiert, damit die Besucher Ihren Inhalt leicht lesen können, ohne ihre Augen zu überanstrengen. Das Gleiche gilt für die Farbe Ihrer Links. Sie sollte sich vom normalen Text abheben, aber nicht mit dem Gesamtdesign kollidieren.
• Visuelle Hierarchie – Sie können Farbe verwenden, um die Aufmerksamkeit der Nutzer auf wichtige Elemente wie Handlungsaufforderungen oder Schlüsselinformationen zu lenken. Wenn die Website beispielsweise ein Verkaufsangebot bewirbt, kann die Schaltfläche „Jetzt kaufen“ in einer kräftigen, von der Hintergrundfarbe abgesetzten Farbe gehalten sein, um die Aufmerksamkeit auf sich zu ziehen.
• Kultureller Kontext – Achten Sie darauf, wie Farben in verschiedenen Kulturen wahrgenommen werden, um unbeabsichtigte Bedeutungen zu vermeiden. Während Weiß beispielsweise in einigen westlichen Kulturen Reinheit symbolisiert, wird es in einigen östlichen Kulturen mit Trauer assoziiert.

Für Nicht-Designer kann die Wahl des richtigen Farbschemas eine Herausforderung sein. Wir verwenden gerne Tools wie Adobe Color CC und Coolors, die auf der Grundlage der von Ihnen gewählten Hauptfarbe Farben empfehlen können.

Auf diese Weise können Sie ganz einfach eine harmonische Farbpalette erstellen, die die Hauptfarbe Ihrer Marke ergänzt.

Es gibt keine feste Regel für die Anzahl der Farben, die Sie in Ihrem Website-Design verwenden sollten, aber es ist im Allgemeinen eine gute Praxis, es einfach zu halten. Ein typisches Farbschema könnte sein:

• Eine Grundfarbe für Ihre Markenidentität, die häufig in Logos und Kopfzeilen verwendet wird
• Eine Sekundärfarbe für Akzente und zur Schaffung von visuellem Interesse, z. B. zur Hervorhebung wichtiger Abschnitte
• Eine Farbe für Call-to-Action-Schaltflächen, um sie hervorzuheben
• Eine neutrale Farbe (wie Schwarz, Weiß oder Grau) für Text und Links

Dieser Ansatz schafft ein ausgewogenes und visuell ansprechendes Design, ohne den Nutzer zu überfordern. Die Primärfarbe sorgt für die Markenpräsenz, die Sekundärfarbe verleiht Tiefe, die Call-to-Action-Farbe leitet den Nutzer zur Interaktion an, und die neutrale Farbe gewährleistet die Lesbarkeit.

Sie sind sich immer noch nicht sicher, wie ein gutes Farbschema für eine Website aussieht? Es gibt eine Menge toller Beispiele, aber wir werden eines von der Homepage von All in One SEO (AIOSEO) nehmen.

Es gefällt uns, weil es nur die Farben Weiß, Schwarz, Blau und Grün enthält, die aber alle effektiv eingesetzt werden.

Man kann erkennen, dass die charakteristische Farbe von AIOSEO blau ist, aber sie ist nicht überwältigend. Für die Aufforderung zum Handeln wird Grün verwendet, um die Aufmerksamkeit zu erregen, und für den Text Schwarz und Weiß. Auf diese Weise bleibt das Design sauber und professionell und ist dennoch visuell interessant.

Außerdem gibt es zwischen den einzelnen Elementen viel Weißraum, so dass das Design nicht überladen wirkt.

Beachten Sie, dass die Methode zur Anpassung der Farben in WordPress je nach Theme unterschiedlich ist. Detaillierte Anweisungen finden Sie in unserem Leitfaden zum Anpassen von Farben auf Ihrer WordPress-Website.

3. Lesbare Schriftarten

Tolle Inhalte auf Ihrer Website gehen verloren, wenn die Besucher sie nicht leicht lesen können. Deshalb ist es so wichtig, lesbare Schriftarten zu wählen. Aber keine Sorge – lesbar bedeutet nicht langweilig.

Es gibt viele Schriftarten, die sowohl gut lesbar als auch visuell interessant sind. In unseren Anleitungen zu den besten websicheren Schriftarten und WordPress-Typografie-Plugins finden Sie einige großartige Optionen.

Ein großartiges Beispiel für effektive Typografie ist die Website von Art Director Dondre Green. Die Website kombiniert eine moderne serifenlose Schrift für den Fließtext mit einer stilisierteren serifenlosen Schrift für die Überschriften. Dieser Kontrast erhöht die visuelle Attraktivität und sorgt gleichzeitig für Klarheit.

Besonders interessant ist die kreative Verwendung von Stilen, die fette und kursive Schriftarten mischen, manchmal sogar innerhalb eines einzigen Wortes. Dies verleiht dem Text ein dynamisches Element, ohne den Leser zu überwältigen.

Sie sind sich nicht sicher, ob eine Schriftart lesbar genug ist? Sie können es in Google Docs oder Microsoft Word ausprobieren.

Wenn Sie Google Fonts verwenden, können Sie mit der Funktion „Type Tester“ eine Vorschau von Schriften in verschiedenen Größen, Farben, Ausrichtungen und sogar Sprachen anzeigen.

Beim Testen von Schriftarten sollten Sie auf die folgenden Schlüsselfaktoren achten:

• Größe – Ist sie auf verschiedenen Geräten leicht zu lesen?
• Zeilenabstand – Ist der Abstand zwischen den Zeilen ausreichend?
• Buchstabenabstand – Ist der Abstand zwischen den Buchstaben gut?
• Gewichtsvariationen – Ist sie in fetten oder hellen Versionen noch lesbar?
• Bildschirmdarstellung – Sieht es auf digitalen Bildschirmen gut aus, nicht nur im Druck?

Sobald Sie die gewünschte Schriftart gefunden haben, können Sie sie zu Ihrer WordPress-Website hinzufügen. In unserer Anleitung zum Hinzufügen benutzerdefinierter Schriftarten in WordPress finden Sie eine schrittweise Anleitung.

Wenn Sie Google Fonts verwenden, sollten Sie diese datenschutzfreundlich gestalten. In einigen Ländern gibt es strenge Datenschutzgesetze, die das Laden von Google Fonts als potenzielles Datenschutzproblem betrachten. Aus diesem Grund entscheiden sich viele Nutzer dafür, Google Fonts zu deaktiv ieren und stattdessen lokal gehostete Alternativen zu verwenden.

Neben normalen Textschriften können Sie auch Icon-Schriften verwenden. Dies sind spezielle Schriftarten, die kleine, skalierbare Grafiken anstelle von Buchstaben darstellen. Sie können sie für Dinge wie Schaltflächen für soziale Medien oder Menüanzeigen verwenden.

Icon-Fonts funktionieren wie normale Fonts, sind also einfach zu gestalten und verlangsamen Ihre Website nicht.

4. Effektive Website-Kopfzeile

Ein Website-Header ist der oberste Abschnitt einer Webseite, der in der Regel für die gesamte Website gleich ist. Er ist ein entscheidender Teil des Website-Layouts und dient der Navigation, dem Branding und oft auch den wichtigsten Aktionen für die Besucher.

Eine gute Kopfzeile enthält in der Regel ein Logo, ein Hauptnavigationsmenü und manchmal eine Schaltfläche für eine Aufforderung zum Handeln oder eine Suchleiste. Wie Ihre Kopfzeile aussehen sollte, hängt jedoch vom Zweck, Inhalt und der Zielgruppe Ihrer Website ab.

Wenn Sie sich beispielsweise die Website von Awesome Motive ansehen, ist die Kopfzeile einfach und konzentriert. Er enthält ein Logo, ein Navigationsmenü mit Dropdown-Optionen für den Zugriff auf verschiedene Seiten und eine Schaltfläche mit der Aufforderung, dem AM-Team beizutreten, die zur Karriereseite führt.

Andererseits hat eine große Website wie Britannica eine umfangreichere Kopfzeile. Sie ist dicker und enthält mehr Elemente: das Logo, eine Suchleiste, Links zu verschiedenen Enzyklopädie-Kategorien, eine Schaltfläche, um die Britannica-Mitgliedschaft zu abonnieren, und eine Schaltfläche, um den Chatbot der Website zu befragen.

Es gibt sogar eine Hamburger-Menü-Schaltfläche in der oberen linken Ecke, um zu weiteren Seiten zu navigieren. Dieses Design spiegelt den umfangreichen Inhalt und die verschiedenen Bedürfnisse der Nutzer einer Enzyklopädie-Website wider.

Manche Website-Besitzer entscheiden sich auch dafür, eine benutzerdefinierte Kopfzeile für bestimmte Seiten auf ihrer Website zu erstellen. Auf diese Weise können sie die Benutzererfahrung für verschiedene Arten von Inhalten oder Zielen anpassen.

So könnten Sie beispielsweise eine spezielle Kopfzeile für Ihre Produktseiten haben, die die wichtigsten Merkmale oder Angebote hervorhebt, oder eine einzigartige Kopfzeile für Ihren Blog, die beliebte Kategorien hervorhebt.

Der WordPress Full-Site-Editor und Page Builder wie SeedProd bieten diese Möglichkeit, sodass Sie problemlos mehrere Header erstellen und verwalten können.

5. Leicht zu navigierende Menüleiste

Das Navigationsmenü ist ein Teil der Kopfzeile, aber wir sind der Meinung, dass es einen eigenen Abschnitt benötigt. Ein gut gestaltetes Menü ist sehr wichtig für das Nutzererlebnis und kann die Interaktion der Besucher mit Ihrer Website erheblich beeinflussen.

Wenn Sie ein Menü erstellen, müssen Sie auch bedenken, wie mobile Nutzer damit umgehen werden. Ein Menü ist auf dem Desktop oft ziemlich groß, aber auf mobilen Geräten ist der Platz begrenzt. Deshalb ist ein mobilfähiges Menü für das moderne WordPress-Website-Design so wichtig.

Bei der Entscheidung, was auf Ihrem Speiseplan stehen soll, sollten Sie diese Fragen berücksichtigen:

• Welches sind die wichtigsten Seiten oder Abschnitte Ihrer Website, auf die Nutzer schnell zugreifen müssen? Denken Sie an Ihre Kernseiten wie Ihre Homepage, die Produkt- oder Dienstleistungsseite, die Blogseite usw.
• Gibt es eine Haupthandlung, zu der Sie Ihre Besucher bewegen möchten, z. B. sich anzumelden oder einen Kauf zu tätigen?

So wie es verschiedene Arten von Kopfzeilen gibt, so gibt es auch verschiedene Arten von Menüs. Die meisten Websites verwenden ein horizontales Standardmenü, das Links zu den Hauptseiten enthält.

Wenn sie mehrere Seiten abdecken müssen, werden sie höchstwahrscheinlich ein Dropdown-Menü oder ein Mega-Menü verwenden, wie in dem folgenden Beispiel von The Points Guy.

Viele Websites entscheiden sich auch für ein Schiebepanel oder ein bildschirmfüllendes responsives Menü. Die zweite Option ist das, was wir hier bei WPBeginner verwenden, wenn unsere Website auf dem Handy angezeigt wird.

Da wir viele Blog-Kategorien haben, können wir auf diese Weise alle Optionen übersichtlich darstellen, ohne den Bildschirm zu überfrachten.

So sieht es aus, wenn Sie das Werkzeug Inspect verwenden, um es zu betrachten:

Es gibt viele Tipps und Tricks, wie Sie Ihr Navigationsmenü gestalten können. Manche Leute entscheiden sich zum Beispiel dafür, ihr Menü klebrig und schwebend zu gestalten, damit es immer sichtbar ist, wenn die Nutzer die Seite nach unten scrollen. Das kann die Navigation verbessern, vor allem auf längeren Seiten.

Einige Benutzer wenden auch CSS an, um einen bestimmten Menüpunkt hervorzuheben. Auf diese Weise können Sie die Aufmerksamkeit auf wichtige Seiten oder Abschnitte lenken, aber Sie können bei Bedarf immer noch alle Menüoptionen als ein einziges Element verwalten.

Wenn Sie weitere Tipps und Tricks für die Gestaltung Ihrer Speisekarte suchen, schauen Sie sich einfach diese Leitfäden an:

• Wie man WordPress-Navigationsmenüs gestaltet (aktualisiert)
• Wie man Menüs in WordPress mit bedingter Logik versieht

6. Umfassender Fußzeilenbereich

Eine Fußzeile ist der unterste Teil einer Website und erscheint einheitlich auf allen Seiten. Sie ergänzt in der Regel die Kopfzeile und bietet zusätzliche Navigationsoptionen und wichtige Informationen, ohne die Hauptseite zu überladen.

Obwohl sie sich am unteren Rand befindet, ist eine Fußzeile aus mehreren Gründen wichtig. Viele Unternehmen und Online-Shops haben sein Potenzial erkannt und nutzen es auf kreative Weise.

Die meisten Websites enthalten z. B. Links zu Seiten, die sonst nicht in das Hauptmenü passen würden, sowie Informationen zum Urheberrecht und zur Datenschutzrichtlinie.

Heutzutage findet man jedoch häufig Anmeldeformulare für den Newsletter, Erfahrungsberichte von Kunden und manchmal auch eine Liste von Vorteilen, die überzeugen sollen, warum man auf der Website einkaufen sollte.

Ein gutes Beispiel für eine effektive Fußzeile ist die Website von SearchWP. Ihre Fußzeile enthält Links zu allen wichtigen Seiten, empfohlene Integrationen und eine Sitemap.

Sie haben auch Sicherheits- und Vertrauensabzeichen hinzugefügt, um den sozialen Beweis zu erhöhen. Über der großen Liste von Links befindet sich ein Call-to-Action-Button, um SearchWP zu erhalten, der sich an Nutzer richtet, die den ganzen Weg nach unten gescrollt haben und möglicherweise an dem Produkt interessiert sind.

Weitere Inspirationen finden Sie in unseren WordPress-Footer-Designbeispielen und in unserer Liste der Dinge, die Sie in den Footer Ihrer WordPress-Website aufnehmen sollten.

7. Beeindruckender Abschnitt über dem Falz

Unserer Erfahrung nach kann der Hauptteil einer WordPress-Website je nach Website-Typ sehr unterschiedlich ausfallen, so dass man nicht wirklich ein einheitliches Design erstellen kann. Unabhängig von der Art der Website und der Branche denken wir jedoch, dass es immer gut ist, einen starken „above-the-fold“-Bereich zu haben.

Mit „Above-the-fold“ ist der Inhalt gemeint, der auf einer Webseite ohne Scrollen sichtbar ist. Er ist einer der wichtigsten Teile des Website-Layouts, da er das erste ist, was Besucher sehen, wenn sie auf Ihrer Website landen.

Ein starker „above-the-fold“-Bereich erfordert in der Regel ein beeindruckendes Hero-Image, d. h. ein großes, auffälliges Bild, das den oberen Teil der Seite dominiert. Es sollte für Ihren Inhalt relevant, hochwertig und für die Verwendung im Web optimiert sein.

Ein Heldenbild ist bei Online-Shops und Unternehmenswebsites üblich, aber auch Blogs verwenden heutzutage diesen Ansatz. Sie verwenden es, um ihre neuesten oder beliebtesten Beiträge vorzustellen oder um kurz zu erklären, worum es in dem Blog hauptsächlich geht.

Ein gutes Beispiel ist die Website von Ryan Robinson. Seine „Above-the-fold“-Sektion zeigt ein großes Bild von ihm, eine starke Überschrift, eine Subheadline, die zur Anmeldung mit Social Proof ermutigt („join 332,947+ bloggers“), und ein Newsletter-Anmeldeformular.

Normalerweise verwenden wir einfache Tools wie Canva, um Heldenbilder zu erstellen. Sieh dir aber auch unsere Liste der Canva-Alternativen an, wenn du nach anderen Optionen suchst.

Alternativ dazu entscheiden sich manche Nutzer für einen bildschirmfüllenden Videohintergrund. Dies kann Ihre Website lebendiger machen und die Aufmerksamkeit der Besucher sofort auf sich ziehen.

Wir empfehlen dies jedoch nur, wenn Sie Ihre Datei auf eine Hosting-Plattform wie YouTube oder Vimeo hochladen, da das Hosting Ihrer eigenen Videos Ihre WordPress-Website verlangsamen kann.

Weitere Inspirationen finden Sie in unserer Liste hervorragender WordPress-Website-Beispiele, die wir zusammengestellt haben.

8. Einfach zu benutzende Kontaktformular-Seite

Ein weiteres unverzichtbares WordPress-Design-Element ist eine Kontaktformular-Seite. Ganz gleich, ob Sie einen Blog, einen Online-Shop oder eine geschäftliche Website betreiben, Sie brauchen immer ein Kontaktformular, damit die Nutzer Ihnen direkt auf Ihrer Website eine Nachricht zukommen lassen können.

Ein gutes Kontaktformular ist einfach und benutzerfreundlich und erhebt nur die notwendigen Informationen. Es sollte die Besucher nicht mit zu vielen Feldern oder komplexen Fragen überfordern, da dies die Nutzer einschüchtern kann.

Wenn Sie eine kleine Website haben, sollte ein einziges Kontaktformular ausreichen. In der Regel benötigen Sie Felder für den Vornamen, die E-Mail-Adresse zum Senden und Benachrichtigen einer Antwort und die Anfrage.

Wenn Ihre Website jedoch gewachsen ist und Sie häufig gestellte Fragen identifizieren können, möchten Sie Ihr Formular vielleicht weiter anpassen.

Auf der Website von Pinch of Yum wurde zum Beispiel ein Dropdown-Feld„Grund für die Kontaktaufnahme“ hinzugefügt. Wenn Sie eine Option auswählen, erscheint über dem Nachrichtenfeld eine kurze Nachricht zu dem Grund, die Sie zuerst lesen müssen.

Dieser Ansatz kann helfen, Anfragen zu filtern und sofortige Antworten auf häufige Fragen zu geben, was die Effizienz und die Benutzerfreundlichkeit verbessert.

Zum Glück, Form Builder Plugins wie WPForms kann leicht wachsen mit Ihrer Website braucht. Es ist einer der vielen Gründe, warum wir immer wieder zurück zu WPForms für Jahre.

Neben Dropdown-Feldern können Sie in Ihrem Formular auch eine bedingte Logik aktivieren, so dass die Felder je nach den Antworten des Benutzers ein- oder ausgeblendet werden können. Dies kann nützlich sein, wenn Sie unterschiedliche Informationen für verschiedene Arten von Anfragen erfassen müssen.

Wenn Sie einen Blog mit mehreren Autoren betreiben, sollten Sie benutzerdefinierte Autorenprofilseiten erstellen und auf jeder ein Kontaktformular hinzufügen. Auf diese Weise können sich die Leser direkt an bestimmte Autoren wenden, was das Engagement und die Vernetzungsmöglichkeiten verbessert.

Für Unternehmen kann die Kontaktseite zwei Zwecke erfüllen: Potenzielle Kunden können sich an sie wenden und bestehende Kunden können um Unterstützung bitten. In diesem Fall sollten Sie zwei verschiedene Schaltflächen erstellen, die zu separaten Formularen führen.

Wenn Sie Telefonsupport anbieten, sollten Sie vielleicht sogar eine Schaltfläche „Click-to-Call“ hinzufügen, um den Nutzern die Kontaktaufnahme auf dem von ihnen bevorzugten Weg zu erleichtern.

9. Merkmale der Barrierefreiheit im Web

Zu guter Letzt in unserer Liste der wesentlichen WordPress-Design-Elemente muss das Design Ihrer WordPress-Website für alle Benutzer zugänglich sein.

Viele Nutzer haben Behinderungen, die es ihnen erschweren, auf Websites zu navigieren und mit ihnen zu interagieren. Wenn Ihre Website nicht auf diese Bedürfnisse eingeht, kann eine große Anzahl von Nutzern nicht auf Ihre Inhalte zugreifen. Das bedeutet, dass Sie wertvolle Besucher und potenzielle Kunden verlieren könnten.

Außerdem geht es bei der Barrierefreiheit nicht nur um Inklusion, sondern auch um rechtliche Aspekte.

Nach dem Americans with Disabilities Act (ADA) können Verbraucher Beschwerden gegen Websites einreichen, die nicht den Richtlinien für Barrierefreiheit entsprechen. Wenn Sie diese Probleme nicht beheben, kann das Ihren Ruf schädigen und möglicherweise zu finanziellen Verlusten führen.

Ein großartiges Beispiel für eine barrierefreie Website ist die von Smeg. Diese Website verfügt über eine praktische Symbolleiste für Barrierefreiheit, mit der Sie die Funktionen der Website an unterschiedliche Bedürfnisse anpassen können.

Neben der Anpassung des Seiteninhalts, wie z. B. Schriftgröße und -ausrichtung, können Sie spezifische Profile auswählen, wie z. B. krampfanfallssicher, ADHS-freundlich, für blinde Nutzer und mehr. Auf diese Weise können Nutzer die Website schnell zugänglicher machen, ohne viele verschiedene Einstellungen ändern zu müssen.

Obwohl WordPress bereits über integrierte Funktionen verfügt, um Ihre Website barrierefrei zu gestalten, können Sie noch viel mehr tun. Als Einstieg können Sie die W3C-Website besuchen, die umfassende Informationen über Standards für die Barrierefreiheit im Internet bietet.

Außerdem finden Sie in unserem Leitfaden zur Verbesserung der Barrierefreiheit Ihrer WordPress-Website praktische Schritte, die Sie unternehmen können.

Eine einfache Möglichkeit, die Zugänglichkeit zu verbessern, ist die Installation des WP Accessibility Plugins. Dieses Plugin fügt Ihrer Website eine Symbolleiste hinzu, mit der Benutzer die Schriftgröße ändern können, was für Menschen mit Sehbehinderungen von großem Vorteil ist.

Außerdem können die Nutzer Ihre Website im kontrastreichen Farbmodus anzeigen, der dem Dunkelmodus ähnelt, aber für farbenblinde Nutzer besser geeignet ist.

Eine weitere wichtige Funktion ist die Aktivierung der Navigation mit Pfeiltasten auf Ihrer Website. Dies ist wichtig für Nutzer mit Behinderungen, die sich auf die Tastatur statt auf die Maus verlassen. Es ist eine einfache Änderung, die die Benutzerfreundlichkeit für viele Besucher erheblich verbessern kann.

Top-Webdesign-Elemente für WordPress-Blogs

Während viele Designelemente für alle Arten von Websites gleich sind, weisen WordPress-Blogs oft einzigartige Merkmale auf, die sie von anderen unterscheiden. Schauen wir uns einige wichtige Designelemente speziell für WordPress-Blogs an.

10. Hilfreiche Seitenleiste

Eines der Dinge, die Blogs so einzigartig machen, ist das mit ihnen verbundene Layout. Sie kennen vielleicht das Design, bei dem der Hauptinhalt die linke oder rechte Seite einnimmt und eine Seitenleiste über alle Beiträge und Seiten hinweg erscheint.

Wir verwenden gerne eine Seitenleiste, weil sie uns hilft, Inhalte vorzustellen, die für die Leser hilfreich sein können, wie z. B. ein vorgestelltes Must-Have-WordPress-Plugin, kostenlose Ressourcen und sogar Angebote und Gutscheine.

Dies ist jedoch optional. Heutzutage haben nicht alle Blogs eine Seitenleiste. Einige haben keine Seitenleiste oder nur ein schwebendes Element, wie soziale Symbole oder ein Inhaltsverzeichnis für den Blogbeitrag.

Dieser klare, minimalistische Ansatz steht im Einklang mit den aktuellen Webdesign-Trends, die Einfachheit und Fokus in den Vordergrund stellen.

Wenn Sie sich jedoch für eine Seitenleiste entscheiden, haben wir einige Tipps und Tricks für die Seitenleiste, um das Beste aus diesem Element herauszuholen:

• Berücksichtigen Sie die Sprache Ihres Inhalts (z. B. von rechts nach links) und die Lesegewohnheiten der Nutzer. Die Platzierung der Seitenleiste sollte sich für Ihr Publikum natürlich anfühlen. Wenn Sie sie ändern müssen, finden Sie hier eine Anleitung, wie Sie die Seitenleiste in WordPress ändern können.
• Je nach Größe Ihrer Website möchten Sie vielleicht verschiedene Seitenleisten für bestimmte Seiten oder Beiträge anzeigen. So können Sie die Benutzeroberfläche auf bestimmte Inhalte abstimmen und die Relevanz und das Engagement verbessern.
• Fügen Sie nur die nötigsten WordPress-Widgets hinzu. Überladen Sie Ihre Seitenleiste nicht mit so vielen Elementen, dass die Nutzer vom Hauptinhalt abgelenkt werden.

11. Inhaltsempfehlungsblöcke

Ein weiteres Schlüsselelement im WordPress-Blogdesign sind Inhaltsempfehlungsblöcke. Wie und wo Blogger diese anzeigen, hängt vom Layout und den Vorlieben ab.

Wenn die Einzelbeitragsvorlage eine Seitenleiste hat, zeigen viele Nutzer dort die letzten Beiträge oder ihre beliebtesten Beiträge an, genau wie auf der Cookie + Kate Website.

Eine andere Möglichkeit ist, sie am Ende des Beitrags anzuzeigen, wie wir es bei WPBeginner tun.

Auf diese Weise können Leser, die den Artikel beendet haben, leicht weitere relevante Inhalte finden, was die Seitenaufrufe erhöht und die Absprungrate verringert.

Bei der Empfehlung von Inhalten kommt es vor allem auf die richtige Platzierung an. Sie sollte sichtbar genug sein, um die Aufmerksamkeit des Lesers zu erregen, aber nicht so auffällig, dass sie vom Hauptinhalt ablenkt.

Bei verwandten Inhalten sollten Sie auch überlegen, wie relevant diese für den aktuellen Beitrag sind. Vielleicht möchten Sie die Beiträge sogar mit Miniaturansichten anzeigen, damit die Leser schnell einen visuellen Eindruck davon bekommen, worum es bei den empfohlenen Inhalten geht.

Außerdem haben wir einen coolen Trick gefunden, um neue Beiträge für wiederkehrende Besucher in WordPress hervorzuheben. Auf diese Weise können regelmäßige Leser neue Inhalte leicht erkennen, was sie ermutigt, länger auf Ihrer Website zu bleiben und mehr zu erkunden.

Sie sind sich nicht sicher, welches Ihre beliebtesten Beiträge sind? Dann empfehlen wir die Verwendung eines Analyse-Plugins wie MonsterInsights, das diese Daten direkt aus Ihrem Google Analytics-Konto abrufen kann.

Dies erspart Ihnen die Zeit und den Aufwand, Ihre beliebten Beiträge manuell zu verfolgen und zu aktualisieren. Sie können diese beliebten Beiträge als Block auf Ihrer Webseite anzeigen, der sich automatisch ändert, je nachdem, was bei Ihren Lesern am beliebtesten ist.

12. Hilfen zur Lesbarkeit

Wussten Sie, dass die durchschnittliche menschliche Aufmerksamkeitsspanne heute kürzer ist als die eines Goldfisches? Deshalb ist es wichtiger denn je, Ihren Blogbeiträgen Elemente hinzuzufügen, die die Aufmerksamkeit der Nutzer wecken und aufrechterhalten.

Sie sollten überlegen, ob Sie in Ihren Blog-Beiträgen Funktionen verwenden, die die Lesbarkeit erhöhen und es den Lesern ermöglichen, Ihre Inhalte leicht zu überfliegen und aufzunehmen.

Wenn Ihr Blogbeitrag besonders lang ist, können Sie zum Beispiel eine benutzerdefinierte Trennlinie einfügen. Mit diesem kreativen Designelement können Sie lange Inhalte visuell auflockern, sodass sie für die Leser weniger einschüchternd wirken.

SeedProd bietet genau diese Funktion in seinem Page Builder, und Sie können das Design, die Farben, die Größe und vieles mehr der Form anpassen.

Viele Blogs, wie z. B. HubSpot, fügen einen Lesefortschrittsbalken hinzu, um den Benutzern zu zeigen, wie weit sie durch einen Artikel gescrollt haben.

Dieses einfache, aber wirksame Element verbessert die Nutzererfahrung, indem es den Lesern einen visuellen Hinweis auf ihren Fortschritt gibt und sie ermutigt, den Beitrag zu beenden.

Sie könnten auch in Erwägung ziehen, Ihren Inhalt mit Großbuchstaben zu versehen, vielleicht nicht am Anfang jedes Absatzes, aber stattdessen bei neuen Abschnitten oder Kapiteln. Dies kann visuelles Interesse wecken und das Auge des Lesers lenken.

Hier ein Beispiel aus The New Yorker:

Wenn Sie viele Informationen mitzuteilen haben, aber Ihren Hauptinhalt kurz halten wollen, sollten Sie einfache, aber elegante Fußnoten hinzufügen. Auf diese Weise können Sie zusätzliche Details liefern, ohne den Haupttext zu überfrachten.

Ein weiterer nützlicher Trick ist die Anzeige von Live-Vorschauen Ihrer internen Links. Mit dieser Funktion können Leser einen Blick auf den verlinkten Inhalt werfen, ohne die aktuelle Seite zu verlassen. Dies ist ein innovativer Ansatz für die interne Verlinkung, der die Aufmerksamkeit der Nutzer beim Lesen Ihrer Inhalte aufrechterhalten kann.

13. Relevantes Featured Image

Während Blogposts hauptsächlich aus Text bestehen, spielen Bilder eine entscheidende Rolle, insbesondere das Featured Image.

Stellen Sie sich vor, Sie betreiben einen Food-Blog und posten ein neues Rezept, aber es gibt kein Bild, um das Gericht zu präsentieren. Wie sollen die Leser dazu verleitet werden, auf den Beitrag zu klicken und ihn zu lesen?

Ein gutes Featured Image sollte sein:

• Relevant für den Inhalt des Beitrags
• Hochwertig und visuell ansprechend
• Angemessene Größe für Ihr WordPress-Theme (lesen Sie die Dokumentation Ihres Themes für weitere Informationen)
• Optimiert für das Web, um schnelles Laden zu gewährleisten
• Kohärent mit der Gesamtästhetik Ihrer Marke

Für WPBeginner’s Featured Images ist es unser Ziel, ein einfaches Bild zu erstellen, das zeigt, worum es in dem Beitrag geht. Dennoch sollte es interessant genug aussehen, um die Leser dazu zu bringen, sich den Beitrag anzusehen.

Wir versuchen, es nicht zu künstlerisch zu gestalten, da die Nutzer vielleicht nicht sofort verstehen, was das Bild vermitteln will.

Sie können mit Online-Tools wie Adobe Express oder Canva eigene Bilder erstellen oder lizenzfreie Bilder verwenden, um Zeit zu sparen. Vergewissern Sie sich nur, dass Sie das Recht haben, die Bilder zu verwenden, und dass sie zum Stil Ihres Blogs passen.

Wir wissen, dass es nicht immer möglich ist, für jeden Beitrag ein eigenes Bild zu erstellen, da dies mit einem hohen Zeit- und Kostenaufwand verbunden ist. In solchen Fällen ist es gut, ein Ersatzbild festzulegen. Dadurch wird sichergestellt, dass auch Beiträge ohne eigenes Bild eine visuelle Darstellung haben.

Um Abwechslung zu schaffen, lesen Sie unseren Leitfaden zum Einrichten von Fallback-Bildern, die auf Beitragskategorien basieren. Dieser Ansatz sorgt für visuelle Vielfalt in Ihrem Blog und hilft den Nutzern, Beiträge mit unterschiedlichen Themen leicht zu erkennen.

14. Klare visuelle Elemente

Nicht jeder liest gerne lange Textabschnitte auf seinem Bildschirm. Deshalb empfehlen wir, Ihre Blogbeiträge bei Bedarf mit Bildern zu ergänzen, damit die Nutzer Ihre Inhalte besser verstehen können.

Doch manchmal reichen einfache Bilder oder Fotos nicht aus. Vielleicht brauchen Sie mehr interaktive oder informative visuelle Elemente, um Ihre Leser wirklich zu fesseln und Ihre Ideen zu vermitteln.

Außerdem können visuelle Elemente Ihren Textinhalt ausdrucksstärker und sympathischer machen. Zum Beispiel können Emojis Ihrem Text Persönlichkeit und Emotionen verleihen, den Tonfall vermitteln und ein fesselndes Leseerlebnis schaffen.

Ein Tipp, den Sie in das Design Ihrer WordPress-Website einbauen können, ist das Hinzufügen interaktiver Bild-Hotspots. Diese Funktion ist besonders nützlich für Produktrezensionen oder Anleitungen, die es den Lesern ermöglichen, verschiedene Teile eines Bildes zu erkunden, um mehr Informationen zu erhalten.

Wenn Sie lange Zitate oder lange Codeblöcke anzeigen, sollten Sie eine benutzerdefinierte Bildlaufleiste in diese Elemente einfügen. So können die Leser einfach durchblättern, ohne ihren Platz im Hauptinhalt zu verlieren.

Ein weiteres interessantes visuelles Element ist ein Fortschrittsbalken. Sie können damit den Status des Projektabschlusses, einen Lernmeilenstein, das Qualifikationsniveau, Informationen über die Ernährung und vieles mehr anzeigen.

WordPress-Design-Elemente zur Umwandlung von Besuchern in Kunden

Als Nächstes sehen wir uns einige wichtige WordPress-Designfunktionen an, die Ihre Website zu einem leistungsstarken Instrument für die Gewinnung und Bindung von Kunden machen können.

15. Warteliste „Demnächst“ Landing Page

Unabhängig davon, ob Sie ein dienstleistungsbasiertes Unternehmen oder einen Online-Shop gründen, empfehlen wir Ihnen, eine Landing Page mit einer Warteliste zu erstellen. Dies ist ein wichtiger Teil des Website-Designs, der die Vorfreude steigert und Leads einfängt, bevor Sie Ihre Website vollständig einführen.

Sie unterscheidet sich von einer gewöhnlichen „Coming Soon“-Seite, da das Ziel nicht nur darin besteht, die Besucher über Ihre bevorstehende Markteinführung zu informieren. Es geht auch darum, sie aktiv einzubinden und sie zu ermutigen, sich auf eine Warteliste zu setzen. Dieser Ansatz kann Ihnen helfen, Interesse zu wecken und einen ersten Kundenstamm aufzubauen.

Wir haben eine Anleitung zum Erstellen einer Landing Page für die Warteliste für weitere Informationen. Das Tutorial verwendet SeedProd, so dass es einfach zu bedienen ist, auch wenn Sie kein Design-Experte sind.

Nachfolgend finden Sie einige Schlüsselelemente, die Sie in Ihre Landing Page für die Warteliste aufnehmen können:

• Ein Countdown-Timer-Widget, um ein Gefühl der Dringlichkeit und Aufregung über Ihren Start zu erzeugen. SeedProd bietet dieses Element standardmäßig an, sodass Sie kein separates Plugin installieren müssen, um es zu aktivieren.
• Ein E-Mail-Anmeldeformular zur Erfassung von Besucherinformationen. Wir empfehlen die Verwendung einer auffälligen Farbe für den Call-to-Action-Button.
• Ein Exit-Intent-Popup, um Besucher zu erfassen, die im Begriff sind, Ihre Seite zu verlassen. Sie können dafür OptinMonster verwenden, mit dem wir unsere E-Mail-Abonnenten um 600 % steigern konnten.
• Einige visuelle Elemente, wie Bilder, geben den Nutzern eine Vorschau auf das, was Sie verkaufen. Das kann ein teilweise verdecktes Produktbild sein, ein Schnappschuss hinter den Kulissen Ihrer Dienstleistung in Aktion oder sogar eine stilisierte grafische Darstellung Ihres Angebots.
• Schaltflächen für soziale Medien, um Nutzer dazu zu bringen, Ihnen auf Ihren offiziellen sozialen Profilen zu folgen. Auf diese Weise können sie die neuesten Updates über die Einführung Ihres Produkts oder Ihrer Dienstleistung erhalten.
• Links zu sozialen Netzwerken, damit die Nutzer Ihr Unternehmen bekannt machen können.

Hier ist ein großartiges Beispiel für eine Wartelisten-Landingpage von Every Tuesday. Diese Warteliste versucht, einen Hype für eine bevorstehende Einschreibung für einen Kurs in Schriftgestaltung aufzubauen.

Wir finden es gut, dass es Beispiele für frühere Arbeiten von ehemaligen Studenten zeigt. Dies dient als sozialer Beweis und zeigt, was künftige Studierende erreichen können.

16. Auffälliger Call-to-Action-Button

Wir haben in diesem Leitfaden einige Male Call-to-Action-Schaltflächen (CTA) erwähnt, und das aus gutem Grund. Sie sind einer der wichtigsten Bestandteile des WordPress-Webseitendesigns, da sie das Nutzerverhalten direkt beeinflussen und die Konversionsrate erhöhen.

Aber wenn Sie glauben, dass jede Form einer Schaltfläche ausreicht, dann irren Sie sich. Wir haben bereits darüber gesprochen, wie wichtig die Farbe ist, aber es gibt eine Menge wissenschaftlicher Erkenntnisse darüber, was einen CTA effektiv macht. Es ist ein Schlüsselelement, das über Ihre Konversionsraten entscheiden kann.

Erstens ist es am besten, nur eine primäre CTA pro Seite einzufügen, um Verwirrung und Entscheidungslähmung zu vermeiden. Andernfalls riskieren Sie, Ihre Besucher zu überwältigen.

Das bedeutet nicht, dass Sie die Schaltfläche nur einmal verwenden dürfen, sondern nur, dass Sie sich auf eine Hauptaktion konzentrieren sollten, die die Nutzer ausführen sollen.

Nehmen wir die Homepage von RafflePress als Beispiel. Oberhalb des Falzes wird der CTA-Button „Get RafflePress“ zweimal im Menü und im Hero-Bereich wiederholt.

Es enthält auch einen Link zu „View Live Example“, aber er ist nicht so gestaltet wie der „Get RafflePress“-Button, so dass er nicht um Aufmerksamkeit konkurriert.

Zweitens: Allgemeine CTA-Texte wie „Erfahren Sie mehr“ oder „Melden Sie sich an“ sind zwar in Ordnung, aber Sie können sie auf die nächste Stufe heben, indem Sie sie nutzenorientierter gestalten.

Wenn Sie Ihren Aufruf zum Handeln verfassen, sollten Sie kurz die Vorteile hervorheben, die Sie anbieten, und erklären, was die Nutzerinnen und Nutzer davon haben, wenn sie aktiv werden. Wenn sie sehen können, was für sie drin ist, werden sie eher zum Klicken motiviert sein.

John Turner, Mitbegründer von SeedProd

Ein hervorragendes Beispiel ist LowFruits, ein Tool zur Recherche von Schlüsselwörtern.

Ihr CTA lautet „Find your lowfruits“, was sowohl clever ist als auch die Vorteile beschreibt, die die Nutzer erhalten: Schlüsselwörter wie lang hängende Früchte, für die man leicht ranken kann.

John Turner spricht in seinem Gastbeitrag für WPBeginner mehr über diese Call-to-Action-Best-Practices, die Ihre Conversions steigern können.

Stellen Sie schließlich sicher, dass Ihre CTA-Schaltfläche auf Desktop-, Mobil- und Tablet-Geräten klickbar ist. Eine Schaltfläche, die auf einem Desktop-Gerät perfekt funktioniert, aber auf einem mobilen Gerät nur schwer zu betätigen ist, kann Ihre Konversionsraten erheblich beeinträchtigen. Dies gilt insbesondere angesichts der zunehmenden Anzahl von mobilen Nutzern.

17. Leicht zu lesende Merkmalskästen

Wenn Sie ein einzelnes Produkt, eine SaaS-Plattform oder ein dienstleistungsbasiertes Unternehmen verkaufen, dann ist die Anzeige von Feature-Boxen eine gute Idee. In diesem Abschnitt werden in der Regel die wichtigsten Merkmale Ihres Produkts oder Ihrer Dienstleistung aufgeführt, aber wenn er nur aus Text besteht, kann er schwer zu lesen und zu verstehen sein.

Aus diesem Grund enthalten viele Unternehmenswebsites jetzt Funktionsboxen mit Symbolen. Diese visuellen Hinweise helfen den Nutzern, die einzelnen Funktionen schnell zu erkennen und zu verstehen, und verbessern so die allgemeine Nutzererfahrung.

Icons sorgen auch für eine visuelle Unterbrechung des Textes und machen das Layout ansprechender und weniger überwältigend.

Außerdem versuchen wir, eine kleine Überschrift hinzuzufügen, die das Merkmal kurz und klar beschreibt. Danach folgt ein einziger Satz, der die Funktion beschreibt. Er sollte nicht zu lang sein, damit die Seite nicht überladen wird.

Die Homepage von Charitable demonstriert dies sehr gut:

18. Elemente des sozialen Beweises

Als wir für unsere eCommerce-Statistiken recherchierten, fanden wir heraus, dass 95 % der Käufer nach Bewertungen und anderen Formen des sozialen Nachweises suchen, bevor sie einen Kauf tätigen.

Das macht Sinn. Wenn potenzielle Kunden positive Bewertungen auf Ihrer Website sehen, werden sie sich in ihrer Entscheidung, bei Ihnen zu kaufen, sicherer fühlen.

Wenn Sie ein Landing Page Plugin wie SeedProd verwenden, erhalten Sie Zugang zu Blöcken, die speziell für die Darstellung von Social Proof entwickelt wurden.

Sie können zum Beispiel rotierende Testimonials hinzufügen. Dabei handelt es sich um einen Schieberegler, der mehrere Zeugnisse an einem Ort auf einmal anzeigt, und die Nutzer müssen nur die Pfeiltasten verwenden, um sie zu lesen.

Sie können auch Animationen zum Zählen von Zahlen anzeigen. Diese sind gut geeignet, um den Nutzern mitzuteilen, wie viele Kunden Sie bedient haben, welche Produkte Sie verkauft haben oder andere beeindruckende Statistiken über Ihr Unternehmen.

Platzieren Sie diese Bewertungen nicht nur auf Ihrer Homepage. Sie können sie auch in anderen Bereichen Ihrer Website anzeigen, z. B. in der Preloader-Animation.

Möchten Sie Testimonials anzeigen, ohne einen Page Builder zu verwenden? Versuchen Sie es mit dem Reviews Feed Plugin von Smash Balloon. Dieses Plugin macht es sogar noch einfacher, da es Bewertungsinhalte von Drittanbieter-Websites wie Google, Yelp, Facebook und mehr abrufen kann.

Auf diese Weise können Sie automatisch frische, authentische Bewertungen von verschiedenen Plattformen direkt auf Ihrer WordPress-Website präsentieren.

19. Aufmerksamkeitsstarke Banner

Sie haben vielleicht eine Google-Anzeigen-Landingpage für Ihr Produkt oder Ihre Dienstleistung erstellt. Aber wenn die Leute nicht konvertieren und Sie Geld verlieren, dann ist es vielleicht an der Zeit, andere Strategien in Betracht zu ziehen.

Manchmal brauchen Besucher nur einen sanften Anstoß, um einen Kauf zu tätigen. In diesem Fall können Website-Banner bei der Gestaltung Ihrer WordPress-Website nützlich sein.

Wir sprechen hier von dynamischen Elementen wie Fußleisten, die Sonderangebote anzeigen, oder Laufschriften, die zeitlich begrenzte Angebote ankündigen.

Sie können wichtige Informationen hervorheben, für Ihre Kampagnen werben und Konversionen fördern, ohne dabei zu aufdringlich zu sein.

Unsere bevorzugte Plattform für diese Zwecke ist OptinMonster. Viele kennen es als Popup-Plugin, aber wir haben es erfolgreich für die Anzeige verschiedener Werbeaktionen auf unserer Website eingesetzt.

Zum Beispiel haben wir während des Black Friday ein schwebendes Banner auf unserer Website eingefügt, um die Nutzer zu unserer Sammlung von über 100 exklusiven Angeboten zu führen. Wir haben es so gestaltet, dass es den Nutzern beim Scrollen folgt, aber so klein gehalten, dass es die Nutzererfahrung nicht beeinträchtigt.

Bei diesem Ansatz für die Gestaltung von Bannern geht es vor allem um Ausgewogenheit. Das Ziel ist es, die Aufmerksamkeit der Besucher zu erregen, ohne sie zu überfordern, und eine Benutzeroberfläche zu schaffen, die eher leitet als drängt.

Bei der Gestaltung dieser Website-Banner müssen Sie berücksichtigen, wie sie in das Gesamtdesign Ihrer WordPress-Website passen.

Sie sollten so aussehen, als wären sie ein Teil des Layouts Ihrer Website, aber sie sollten sich genug abheben, um die Aufmerksamkeit des Benutzers zu erregen. Wir empfehlen die Verwendung von Farben, die die Farbpalette Ihrer Website ergänzen und gleichzeitig genügend Kontrast bieten.

20. Hochkonvertierende Warenkorb- und Kassenseiten

Der Weg vom Einkaufswagen zum Checkout ist der wichtigste Teil der eCommerce-Nutzererfahrung. In unserer Statistik über den Abbruch von Einkaufswagen haben wir herausgefunden, dass 7 von 10 Personen ihren Einkaufswagen verlassen, bevor sie einen Kauf abgeschlossen haben. Das ist ein enormer Verlust an potenziellen Einnahmen.

Wenn Sie eine hohe Abbruchquote feststellen, sollten Sie einen Blick auf Ihre Warenkorb- und Kassenseiten werfen. Möglicherweise gibt es Designelemente, die Kunden an ihrem Kauf zweifeln lassen oder sie frustriert zurücklassen.

Zum Beispiel haben Sie vielleicht zu viele Felder, in denen Informationen abgefragt werden, oder der Gesamtpreis auf der Warenkorb-Seite und der Kasse sind sehr unterschiedlich. Diese Probleme können das Nutzererlebnis und die Konversionsraten beeinträchtigen.

Die Kassenseite vonWPCode ist ein gutes Beispiel dafür. Da es sich um ein digitales Produkt handelt, werden nur die wichtigsten Informationen abgefragt, wie Ihre E-Mail-Adresse, Ihr Vor- und Nachname sowie Ihre Telefonnummer.

Der Zahlungsabschnitt befindet sich ebenfalls auf derselben Seite, wodurch sich die Anzahl der Schritte, die ein Kunde zum Abschluss seines Kaufs unternehmen muss, verringert. Der Rabatt wird automatisch angewandt, so dass Sie nicht nach einem Gutscheincode suchen und diesen manuell eingeben müssen.

Darüber hinaus gibt es Social-Proof-Elemente wie einen Testimonial-Block, um Kunden zu beruhigen, die möglicherweise zögern, umzuwandeln.

Wir haben Anleitungen zum Erstellen einer benutzerdefinierten WooCommerce-Warenkorb-Seite und zum Anpassen der WooCommerce-Kasse für weitere Informationen.

Achten Sie auch auf die Dankeseite nach dem Kauf, denn das ist eine gute Gelegenheit, den durchschnittlichen Bestellwert zu erhöhen. Sie können Produkte vorschlagen, die mit dem Kauf zusammenhängen, oder einen exklusiven Gutscheincode für den nächsten Kauf anzeigen.

Das beste Tool für die Optimierung dieser Seiten ist FunnelKit, ein Sales Funnel Builder für WooCommerce, der mit vorgefertigten Dankeseitenvorlagen geliefert wird. Sie können mehr über seine Funktionen und Möglichkeiten in unserem FunnelKit Test lesen.

Nice-to-Have WordPress Design-Elemente, um Ihre Besucher zu beeindrucken

Während die WordPress-Design-Elemente, über die wir bisher gesprochen haben, für eine gut funktionierende WordPress-Website unerlässlich sind, gibt es zusätzliche Design-Funktionen, die Ihre Website auf die nächste Stufe heben können.

Diese Elemente sind nicht unbedingt ein Muss, aber sie können einen bleibenden Eindruck bei Ihren Besuchern hinterlassen und Ihre Website von der Konkurrenz abheben:

• Fügen Sie einen animierten Hintergrund hinzu – Lassen Sie Ihre Website lebendiger aussehen, um die Aufmerksamkeit Ihrer Besucher sofort zu erregen.
• Verwenden Sie dynamische Inhalte für die Personalisierung – Damit können Sie Inhalte auf der Grundlage von Faktoren wie Nutzerverhalten oder Standort anpassen.
• Gestalten Sie jeden WordPress-Beitrag anders – Lassen Sie jeden Beitrag passend zu seinem Thema einzigartig aussehen.
• Browser-Tab-Benachrichtigung hinzufügen – Binden Sie Besucher wieder ein, die von Ihrer Website abgewandert sind und sich in einem anderen Tab befinden.
• Fügen Sie ein Widget für eine Umfrage zum Website-Design hinzu – Sammeln Sie wertvolle Erkenntnisse über die Nutzer, um das Design und die Funktionalität Ihrer Website kontinuierlich zu verbessern.

Benötigen Sie Hilfe bei der Webgestaltung? WPBeginner Pro Dienstleistungen zur Rettung

Die Verwaltung all der WordPress-Design-Elemente, die für eine effektive Website benötigt werden, kann wirklich beängstigend sein. Wenn Sie sich lieber auf das Wachstum Ihres Unternehmens konzentrieren möchten, warum lassen Sie dann nicht die Experten Ihr Webdesign übernehmen?

WPBeginner Pro Services bietet problemlose WordPress-Website-Design-Lösungen.

Wir stellen Ihnen einen engagierten Projektmanager zur Seite, der mit Ihnen zusammenarbeitet, um ein individuelles Design zu erstellen, das auf Ihre speziellen Bedürfnisse zugeschnitten ist. Wir werden auch alle notwendigen SEO- und Geschwindigkeitsoptimierungsfunktionen einrichten, um sicherzustellen, dass Ihre Website optimal funktioniert.

Sie haben bereits eine Website, die eine Auffrischung benötigt? Unser Team ist auch auf die Neugestaltung von WordPress-Websites spezialisiert, um Ihrer bestehenden Website neues Leben einzuhauchen, ohne bei Null anfangen zu müssen.

Möchten Sie mehr erfahren? Vereinbaren Sie noch heute einen Termin mit unseren Experten. Sie helfen Ihnen dabei, den besten Plan für Ihre Website-Ziele und Ihr Budget zu erstellen, damit Sie eine professionelle, leistungsstarke WordPress-Website erhalten, ohne den Stress des DIY-Designs.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, die wichtigsten Design-Elemente für eine effektive WordPress-Website zu entdecken. Vielleicht interessieren Sie sich auch für unsere Expertenauswahl der besten Tools für die Erstellung und den Verkauf digitaler Produkte und unseren Leitfaden zu den Dingen, die Sie tun müssen, bevor Sie ein WordPress-Webdesign-Unternehmen gründen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.