Webdesign – Frau König Webdesign-Studio

Diese Bildgrößen brauchst du auf deiner Website

Sun, 12 Oct 2025 10:00:00 +0000

Diese Bildgrößen brauchst du auf deiner Website

- inklusive Übersicht der optimalen Bildgrößen zum Download!

Bei Fotos, Bildern, Grafiken und Icons für deine Website sind zwei Werte wichtig: die Bildgröße, also die Maße in Pixeln, und die Dateigröße. Beides solltest du vor dem Hochladen optimieren, damit deine Website schnell lädt und deine Bilder trotzdem scharf und professionell aussehen.

In diesem Beitrag erfährst du, welche Bildgrößen du für deine Website wirklich brauchst und wie du sie einfach ausrechnest – inklusive Übersicht der optimalen Bildgrößen zum Download.

Bilder sind das A und O auf deiner Website. Sie vermitteln ein bestimmtes Gefühl, untermauern deinen Website-Stil und illustrieren deinen Content. Du zeigst dich und dein Business. Das weckt Vertrauen. Daher sollten deine Bilder qualitativ hochwertig sein.

Damit wir uns verstehen: In diesem Artikel geht es eher um die technischen Eigenschaften deiner Fotos und Bilder auf deiner Website. Was gute Fotos inhaltlich ausmacht, liest du im Beitrag „7 Tipps für persönliche Fotos auf deiner Website„.

Warum sind die richtigen Bildgrößen auf der Website so wichtig?

Sowohl zu große als auch zu kleine Bilder tun deiner Website überhaupt nicht gut.

Wenn du zu große Bilder einfügst, muss dein System sie für die Anzeige verkleinern. Das wirkt sich negativ auf die Ladezeit deiner Website aus.

Ist dein Bild zu klein für den Bereich, in dem es angezeigt werden soll, wird es unscharf bzw. pixelig dargestellt. Und das ist nichts, was du auf deiner Website sehen willst.

Und auch hier muss dein System rechnen, damit das Bild eingepasst wird.

Daraus ergibt sich:

Lade deine Bilder in der Größe hoch, in der sie auf der Website angezeigt werden sollen.

Damit du das umsetzen kannst, musst du zunächst herausfinden, wie groß der entsprechende Platz auf deiner Website ist. Mit Bildgröße ist hier das eigentliche Format – also die Breite und Höhe deines Fotos – in Pixeln gemeint.

Monitor- bzw. Display-Größen

22 bis 49 Zoll große Desktop-Monitore, 13, 14, 16 Zoll große Laptop- oder MacBook-Monitore, Tablet- und Smartphone-Displays …

Es gibt sooo viele Monitor- und Display-Größen der unterschiedlichen Hersteller. Nicht zu verwechseln mit der Bildschirmauflösung, denn diese ist in der Regel viel höher.

Das Gerät, mit dem du die Website aufrufst, hat jeweils eigene Anforderungen. Wichtig ist, dass deine Bilder auf allen Endgeräten, also auf dem Desktop als auch mobil auf dem Tablet und dem Smartphone, optimal angezeigt werden.

Das sind die Bildgrößen für die volle Breite auf den verschiedenen Geräten (Stand 2026)

Desktop: 1920 x 1200 bis 1024 x 768 px
Laptop: 1280 x 900 bis 1024 x 768 px
Tablet: 800 x 1280 bis 601 x 962 px
Mobil: 414 x 896 bis 360 x 640 px

Bei diesen Angaben ist der erste Wert jeweils die Breite des Bildes.

Du siehst, die Standardwerte für mobile Geräte geht von einer Nutzung im Hochformat aus.

Wonach richtet sich die optimale Bildgröße auf der Website?

Die optimale Größe deiner Website-Bilder richtet sich nach der größten Monitor-Größe.

Wenn du ein Bild in voller Seitenbreite einbindest, sollte es 1920 px breit sein. So stellst du sicher, dass es auf dem großen Monitor scharf angezeigt wird.

Willst du ein Bild oder mehrere Bilder in einem begrenzten Abschnitt einbinden, kannst du über die Inhaltsbreite genau bestimmen, wie groß das Foto maximal sein darf.

So rechnest du deine Bildgröße aus:

Hast du eine Inhaltsbreite von 1200 px festgelegt und willst drei Fotos nebeneinander einfügen, sollte jedes Foto 360 px breit sein:

1200/3 = 400 px abzüglich 40 px Rand (20 px auf jeder Seite).

Du kannst auch mit mehr Abstand rechnen, dann hängen die Bilder nicht so dicht aufeinander.

In deinen Blogbeiträgen hast du eine fest definierte Breite für deinen Content. Bindest du hier ein Bild ein, gibt die festgelegte Inhaltsbreite die maximale Bildbreite vor.

Das sind die optimalen Bildgrößen für deine Website:

Bild in voller Breite (full width), z.B. als Hintergrundbild:

1920 px Breite (oder passend zur Bildschirmbreite)

Bild in voller Breite bei eingerückter Inhaltsbreite (boxed):

1080-1200 px Breite (je nach festgelegter Inhaltsbreite)

Bild im eingerückten Textbereich (z.B. Blogbeitrag):

750 px Breite (siehe auch den Beitrag zur Inhaltsbreite für ideale Lesbarkeit)

2 Bilder nebeneinander (z.B. in einem Grid-Layout mit 2 Spalten):

500-560 px Breite (je nach Inhaltsbreite)

3 Bilder nebeneinander (z.B. in einem Grid-Layout mit 3 Spalten):

320-360 px Breite (je nach Inhaltsbreite)

4 Bilder nebeneinander (z.B. in einem Grid-Layout mit 4 Spalten):

240-260 px Breite (je nach Inhaltsbreite)

kleines Bild/Icon in einem Grid-Layout mit 5 Spalten:

140-220 px Breite (je nach Layout)

Lade dir die Übersicht der Bildgrößen kostenlos als PDF herunter:

Optimiere deine Website und natürlich deine Bilder für die mobile Ansicht und beachte hier unbedingt deine Bildgrößen.

Je nach Thema, werden deine Besucher deine Website aber gar nicht am Desktop besuchen. In vielen Nischen, z. B. Ernährung mit Rezepten oder Sport mit Übungen und Workouts, wird die Website von bis zu 98% der Besucher mit dem Smartphone besucht.

Vor allem Bilder in voller Seitenbreite, die in der Desktop- und in der Tablet-Ansicht sehr gut funktionieren, kannst du auf dem Smartphone eventuell nicht optimal darstellen.

Ein Bild im Querformat (z.B. 1920 x 800 px) erreicht proportional eingepasst nicht die notwendige Höhe und sieht auf dem schmalen Smartphone-Display „mickrig“ aus.

Hintergrundbilder mit darauf platziertem Text lassen sich kaum für die Ansicht auf dem Smartphone optimieren und das Wesentliche des Bildes ist gar nicht sichtbar.

In beiden Fällen kannst du für die mobile Ansicht auf dem Smartphone ein anderes Bild einsetzen. Mit einem guten Pagebuilder, wie z.B. Elementor, ist das ganz leicht.

Live-Webinar am 6. November

Von unsichtbar
zu ausgebucht!

Wie du mit der 3 Schritte Formel bei Google ganz oben stehst, von den KI-Tools empfohlen wirst und so Wunschkunden auf Autopilot gewinnst.

So prüfst du deine Website auf verschiedenen Endgeräten

Lass mich raten: Du hast einen Desktop-Monitor, ggf. ein Notebook, ein Tablet und ein Smartphone? Eventuell gibt es in deinem Haushalt noch ein weiteres Tablet und ein Smartphone mit anderen Display-Größen?

Du musst nun nicht alle diese Geräte zur Optimierung deiner Website benutzen. Du kannst im Chrome-Browser mit den sogenannten Google Entwickler-Tools die Größe des Bildes auf verschiedenen mobilen Endgeräten ermitteln.

Klicke dazu mit der rechten Maustaste auf dein Foto.
Wähle in dem geöffneten Fenster „Untersuchen“ aus.
Klicke ggf. mit der Maus auf das Icon ganz oben links mit dem Pfeil, um die rechte Seitenleiste aufzuklappen.

Hier erkennst du, ob dein eingefügtes Bild zu groß oder zu klein ist.

Was ist neben den Bildmaßen noch zu beachten?

Neben der eigentliche Größe des Bildes (die Maße) ist auch die Dateigröße wichtig. Denn je größer das Bild in seinen Abmessungen ist, desto größer ist auch die Bilddatei.

Auch die Bildinhalte haben einen Einfluss auf die Größe der Datei: Die Datei wird umso größer, je mehr Farben dein Bild enthält.

Grundsätzlich solltest du keine Bilder von deiner Kamera oder deinem Smartphone unbearbeitet und direkt auf die Website laden. Auch Stockfotos (z.B. von Unsplash & Co.) sind zu groß. Ein unbearbeitetes Bild kann schon mal 5404×3606 px bei bis zu 6 GB auf die Waage bringen.

Das ist eine viel zu große Datenmenge.

Das Gute: Bilder in dieser Größe kannst du gar nicht in WordPress hochladen. Wenn du es dennoch versuchst, erhältst du eine Fehlermeldung, dass dein Bild maximal 2560 px breit sein darf.

Wenn du zunächst deine Bilder auf das richtige Maß verkleinert hast, komprimierst du sie im nächsten Schritt für die Anzeige im Web.

Beim Komprimieren reduzierst du die Bildqualität und damit die Dateigröße.

Deine Bilddatei sollte nicht größer als 150 KB sein.

Dies ist nur ein Richtwert. Sei hier nicht „päpstlicher als der Papst“. Deine wichtigen Fotos, die über die gesamte Breite deiner Website gehen, sind natürlich größer als Fotos, die im Fließtext eingebunden sind.

Sobald du ein Bild in WordPress hochgeladen hast, werden dir entsprechenden Daten wie Dateityp, Dateigröße und Abmessungen angezeigt.

Wenn du bei den Dateigrößen deiner hochgeladenen Bilder hohe MB- oder sogar GB-Werte findest, solltest du unbedingt handeln!

Wie komprimiere ich meine Bilder für die Website?

Es gibt verschiedene (kostenlose) Tools, die du zum Bearbeiten deiner Bilder nutzen kannst.

Profis nutzen Photoshop und es gibt kein besseres Tool, um Bilder u.a. zu bearbeiten, zurechtzuschneiden und zu komprimieren.

Deine Bilder zuschneiden und verkleinern kannst du aber ebenso gut mit dem kostenlosen Tool gimp. Bei Konrad Paul von „Fotografieren lernen“ erfährst du alles zur „Bildbearbeitung mit gimp“.

Auch mit Canva kannst du Bilder, Fotos, Grafiken und Icons beim Herunterladen im jpg-Format komprimieren.

Eines von vielen kostenlosen Online-Tools, das beides kann, ist Squoosh. Dieses Tool ist genial:

Du lädst das zu bearbeitende Foto hoch, um das Foto zu verkleinern und die Bilddatei direkt zu komprimieren. Die zu erreichende Dateigröße (in kb) wird dir dabei direkt angezeigt.

Und das Beste:

Du siehst in einer Vorschau auf deinem Bildschirm, wie das Bild nach der Komprimierung aussieht und kannst evtl. nachjustieren.

Ein Pro-Tipp zum Komprimieren deiner großformatigen Bilder:

Je größer dein Bild in Pixel, desto stärker kannst du es komprimieren. Vor allem dann, wenn du es als Hintergrundbild ggf. mit Farbüberlagerung zur Darstellung von Text oder anderen Inhalten nutzen willst. Dann kannst du dein Bild gut und gerne auf 20 % des eigentlichen Dateiformats bringen.

Wenn du Fotografin, Designerin, etc. bist, sind hochauflösende Bilder und Fotos dein Business. Hier solltest du dann abwägen, was dir wichtiger ist: Hammerscharfe Fotos oder eine schnelle Website.

Für welches Dateiformat entscheidest du dich?

Schließlich wäre es ja zu einfach, wenn du nicht auch hier eine Auswahl hättest. Bitte beachte, dass die folgende Aufzählung nur eine Auswahl der gängigsten Formate darstellt und keinen Anspruch auf Vollständigkeit erfüllt. Da gibt es noch viel mehr – aber wir bleiben hier mal pragmatisch.

JPEG/JPG (Joint Photographic Expert Group)
Dies ist eines der am weitesten verbreiteten Formate im Internet für das Hochladen von Fotos. JPG-Fotos sind komprimiert und haben eine geringe Dateigröße. Allerdings werden sie manchmal verpixelt dargestellt.

PNG (Portable Networks Graphics)
Dieses Format hat eine eingebaute Transparenz und wird für Bilder/Fotos mit einem transparenten Hintergrund genutzt. PNGs eignen sich besonders gut für Grafiken oder auch für dein Website-Logo.
GIF (Graphics Interchange Format)
Dieses Format benötigst du hauptsächlich für animierte Fotos und Grafiken. Auch dieses Format lässt sich gut komprimieren.

Es gibt noch ein weiteres Format, das du unbedingt kennen solltest:

Was ist WebP?

WebP, Weppy gesprochen, komprimiert deine Bilder noch effektiver. Die Dateien werden noch kleiner, aber die Qualität bleibt gleich. Und deine Seite wird (im Regelfall) noch schneller …

Dieses Format kann sowohl Bilder mit transparentem Hintergrund als auch animierte Grafiken darstellen. Mit dem Online-Tool „Squoosh“ kannst du deine Bilder auch in dieses Format umwandeln. Am besten testest du es einfach mal.

WebP wird aktuell von folgenden Browsern unterstützt: Chrome, Microsoft Edge, Firefox, Opera und Safari.

Um zu entscheiden, ob dieses Format für deine Bilder geeignet ist, schaust du am besten in deine Statistiken, um herauszufinden, mit welchen Browsern deine BesucherInnen auf deine Website kommen.

Aber das ist ein anderes Thema.

FAQ: Häufige Fragen zu Bildgrößen auf Websites

Welche Bildgröße ist für meine Website optimal?

Die optimale Bildgröße hängt davon ab, wo das Bild auf deiner Website angezeigt wird. Ein Bild über die volle Breite sollte 1920 px breit sein. Bilder im Blogbeitrag brauchen meist nur ca. 750 px Breite, mehrere Bilder nebeneinander entsprechend weniger.

Warum sollte ich Bilder vor dem Hochladen optimieren?

Zu große Bilder machen deine Website langsam, weil sie unnötig viel Datenvolumen laden muss. Zu kleine Bilder können dagegen unscharf oder pixelig wirken. Deshalb solltest du Bilder vor dem Hochladen auf die passende Pixelgröße bringen und anschließend komprimieren.

Was ist der Unterschied zwischen Bildgröße und Dateigröße?

Die Bildgröße beschreibt die Maße eines Bildes in Pixeln, zum Beispiel 1920 × 800 px. Die Breite wird immer zuerst genannt. Die Dateigröße gibt an, wie viel Speicherplatz die Datei braucht, zum Beispiel 150 KB oder 2 MB. Für deine Website sind Maße und Dateigröße wichtig.

Wie groß darf die Dateigröße eines Website-Bildes sein?

Als grober Richtwert sollten Website-Bilder möglichst nicht größer als 150 KB sein. Bei großen Bildern über die volle Breite kann die Datei auch etwas größer sein. Wichtig ist: Die Qualität soll gut bleiben, aber die Ladezeit darf nicht darunter leiden.

Welches Dateiformat ist für Website-Bilder sinnvoll?

Für Fotos ist JPG oft eine gute Wahl, weil die Dateien relativ klein sind. PNG eignet sich für Grafiken, Logos oder Bilder mit transparentem Hintergrund. WebP kann eine sehr gute Alternative sein, weil es Bilder stark komprimiert und dabei die Qualität erhält.

Was passiert, wenn ich Bilder direkt vom Smartphone oder aus der Kamera hochlade?

Dann sind sie fast immer viel zu groß für deine Website. Das belastet die Ladezeit unnötig und kann deine Seite spürbar langsamer machen.

Über die Autorin:

Silke König, M.A.

Silke König ist Webdesignerin, Online-Redakteurin und Business-Mentorin. Ihren ersten Artikel im Netz hat sie vor über 24 Jahren veröffentlicht, seit 2008 arbeitet sie mit WordPress. Heute unterstützt sie Selbstständige und Unternehmerinnen dabei, online bei ihrer Zielgruppe sichtbar zu werden.

Mehr über Silke …

Lies hier weiter:

Content, Technik und Tools

Wie komme ich in die Google KI-Suchergebnisse?

Online-Business, Webdesign

So enwickelst du deinen Website-Stil

Webdesign

So kombinierst du Schriften

Google Fonts in Elementor lokal einbinden

Thu, 20 Feb 2025 10:32:38 +0000

Google Fonts in Elementor lokal einbinden

So geht es nach dem Elementor-Update in zwei Klicks!

Google Fonts kannst du direkt in Elementor lokal einbinden, indem du die Funktion „Google Fonts lokal laden“ aktivierst. Das umständliche Herunterladen, Konvertieren und Hochladen der einzelnen Schriftdateien kannst du dir damit sparen. Die Funktion steht auch in der kostenlosen Version von Elementor zur Verfügung und ist mit wenigen Klicks eingerichtet.

In diesem Mini-Tutorial zeige ich dir Schritt für Schritt, welche Einstellungen du aktivieren musst und wie du anschließend prüfst, ob deine Google Fonts wirklich lokal geladen werden.

2022 ging eine massive Welle durchs Netz, als es ein Urteil zur Nutzung der Google Fonts direkt über den Google Server gab. Klicke hier zu meinem Beitrag zu den Google Fonts aus 2022 …

Dieser alte Beitrag ist trotzdem relevant für dich, denn darin erfährst du, was passiert, wenn du Google Fonts direkt über den Google Server in den USA lädst und was das technisch und rechtlich bedeutet.

Außerdem können Google Fonts noch über dein Theme oder weitere Dienste auf deiner Website aktiv sein. Deshalb musst du das unbedingt prüfen!

Darum sind Google Fonts so genial

In Googles Schriften-Bibliothek auf fonts.google.com findest du 1798 Schriftfamilien (Stand Februar 2025), die du kostenlos und lizenzfrei nutzen kannst – für deine Dokumente auf dem Computer, deine Social Media-Posts und natürlich auf deiner Website.

Das Geniale: Du kannst die Schriften hier auf Herz und Nieren prüfen. Die Größe anpassen, eigenen Text eintragen, um zu sehen, wie einzelne Worte bzw. Buchstaben der gewählten Schrift wirken.

Du glaubst gar nicht, wie oft ich schon eine Schrift nicht genutzt habe, weil das „W“ wie Website hässlich aussah 😂.

In diesem neuen Mini-Tutorial erfährst du, wie du mit Elementor die Google Fonts easy peasy lokal auf deine Website bringst.

Das Beste: Die neue Möglichkeit, Google Fonts lokal in Elementor zu nutzen, steht dir auch in der kostenlosen Version des Pagebuilders zur Verfügung.

Und damit hat Elementor ein wirklich geniales Feature geschaffen, das dir deine Arbeit erleichtert. Denn mal ehrlich: Das Konvertieren der Schriften war schon mehr als nervig – vor allem, wenn die Onlinetools tagelang nicht erreichbar bzw. überlastet waren.

Apropos Arbeit erleichtern: Mit Elementor Pro* machst du dir das Gestalten deiner Website nicht nur richtig leicht, du sparst dir auch viele weitere Plugins, die du für eine geniale Business-Website brauchst.

So bindest du die Google Fonts auf zwei Klicks in Elementor ein:

Stelle sicher, dass du die aktuellste Version von Elementor installiert hast. Zeigt dein Elementor-Plugin ein Update an, klicke auf „Jetzt aktualisieren“.

Schritt 1: Google Fonts in Elementor aktiveren

Gehe in deinem WordPress Backend in den Elementor-Einstellungen zum Unterpunkt „Erweitert“.
Klicke beim Punkt „Google Fonts“ ins Dropdown-Feld und wähle „Aktivieren“.
Klicke beim Punkt „Google Fonts laden“ ins Dropdown-Feld und wähle „Tauschen“ bzw. „Swap“.
Speichere die Änderungen.

Schritt 2: Binde die Google Fonts lokal ein

Gehe jetzt in den Elementor-Einstellungen zum Unterpunkt „Leistung“.
Hier klickst du beim Punkt „Google Fonts lokal laden“ ins Dropdown-Feld und wählst „Aktivieren“.
Speichere deine Änderung.

Die Google Fonts sind jetzt in Elementor lokal eingebunden.

Gehe in die Elementor Website-Einstellungen und schaue unter dem Punkt „Typographie“ nach:

Du findest dort jetzt alle Google Fonts sowie auch Neuheiten über „Early Access“ und kannst sie jetzt für deine Schriften nutzen.

Live-Webinar am 6. November

Von unsichtbar
zu ausgebucht!

Wie du mit der 3 Schritte Formel bei Google ganz oben stehst, von den KI-Tools empfohlen wirst und so Wunschkunden auf Autopilot gewinnst.

Hattest du bereits Google Fonts über ein Plugin oder direkt in Elementor Pro hochgeladen?

Prüfe zunächst in deinem Quellcode, ob die Google Fonts lokal geladen werden. Wie das geht, erfährst du in meinem alten Beitrag „So bindest du deine Google Fonts DSGVO-konform auf deiner Website ein„.

Werden keine Google Fonts über den US-Server geladen, z. B. über dein Theme oder weitere Tools, kannst du die hochgeladenen Schrift-Dateien aus deinen Medien löschen und das eventuell zum lokalen Einbinden der Fonts genutzte Plugin löschen.

Wie kommen gekaufte Schriften in den Elementor?

Auch hier gibt es inzwischen eine Abkürzung und die heißt „Variable Fonts“ (nur in Elementor Pro*) – noch so ein geniales Feature!

Hier lädst du deine gekaufte Schriftdatei direkt bei Elementor hoch und Elementor erledigt den Rest. D.h. dass du alle Größen, Schriftschnitte und Auszeichnungen (z. B. kursiv) mit nur einer Schriftdatei nutzen kannst.

Grundsätzliches zur Nutzung von Schriften auf deiner Website:

Auch wenn dir jetzt ALLE Google Fonts zur Verfügung stehen, heißt das nicht, dass du dich hier austoben sollst, indem du wahllos Schriften auf deiner Website nutzt.

Wähle zwei Schriften aus, die du konsequent nutzt – eine Schrift für deine Überschriften, eine Schrift für deinen Fließtext.

Erfahre hier, wie du Schriften auf deiner Website und in Social Media kombinierst.

FAQ - Häufige Fragen zu Google Fonts in Elementor lokal einbinden

Wie kann ich Google Fonts in Elementor lokal einbinden?

Aktiviere in den Elementor-Einstellungen unter „Leistung“ die Funktion „Google Fonts lokal laden“. Elementor speichert die verwendeten Schriften anschließend auf deinem eigenen Webserver und lädt sie nicht mehr direkt von Google.

Brauche ich Elementor Pro, um Google Fonts lokal zu laden?

Nein. Du kannst Google Fonts auch mit der kostenlosen Version von Elementor lokal einbinden. Ein zusätzliches Plugin ist dafür ebenfalls nicht notwendig.

Warum sollte ich Google Fonts lokal einbinden?

Beim lokalen Laden werden die Schriftdateien von deinem eigenen Server bereitgestellt. Dadurch muss beim Aufruf deiner Website keine direkte Verbindung zu den Google-Servern hergestellt werden. Das ist insbesondere im Hinblick auf Datenschutz und Ladezeit sinnvoll.

Muss ich die Google Fonts vorher herunterladen und hochladen?

Nein. Mit der integrierten Elementor-Funktion musst du die Schriftdateien nicht selbst herunterladen, konvertieren und hochladen. Elementor übernimmt die lokale Bereitstellung automatisch.

Wie kann ich prüfen, ob meine Google Fonts wirklich lokal geladen werden?

Öffne deine Website in einem privaten Browserfenster und kontrolliere über die Entwicklerwerkzeuge oder einen Google-Fonts-Checker, von welcher Domain die Schriftdateien geladen werden. Es sollten keine Anfragen mehr an Domains wie fonts.googleapis.com oder fonts.gstatic.com gesendet werden.

Werden automatisch alle Google Fonts lokal gespeichert oder nur die tatsächlich verwendeten?

Elementor erkennt, welche Google Fonts auf deinen Seiten verwendet werden, und stellt diese lokal bereit. Nicht verwendete Schriften werden daher nicht pauschal geladen. Auch die zugehörigen Ressourcen werden grundsätzlich nur auf den Seiten eingebunden, auf denen sie tatsächlich benötigt werden.

Was kann ich tun, wenn eine Schrift nach der Umstellung nicht mehr richtig angezeigt wird?

Leere zuerst den Cache deines Cache-Plugins, deines Hostings und deines Browsers. Prüfe außerdem, ob die WordPress- und Website-Adresse vollständig über HTTPS laufen. Besteht das Problem weiterhin, kannst du in den Elementor Werkzeugen die CSS-Dateien und Daten neu generieren. Nach einem Umzug oder Domainwechsel solltest du zusätzlich kontrollieren, ob noch alte URLs in den Schriftdateien hinterlegt sind.

*Werbe-Link
Der mit * gekennzeichnete Link ist ein Affiliate Link. Das heißt, ich bekomme eine kleine Provision, wenn du dir hierüber Elementor Pro holst. Am Preis für dich ändert das natürlich nichts.

Über die Autorin:

Silke König, M.A.

Mehr über Silke …

Lies hier weiter:

Online-Business, Technik und Tools

Google Fonts DSGVO-konform einbinden

Lädt deine Website Google Fonts noch direkt von den Google-Servern? Dann werden möglicherweise Daten deiner Besucherinnen und Besucher übertragen. In dieser Anleitung zeige ich dir Schritt für Schritt, wie du Google Fonts lokal einbindest, unnötige Verbindungen entfernst und anschließend prüfst, ob alles richtig funktioniert.

Online-Business, Webdesign

So enwickelst du deinen Website-Stil

Es dauert ganze 3 Sekunden, in denen dein Website-Besucher entscheidet ob er bleibt oder geht. Stellt sich innerhalb dieser kurzen Zeit nicht das richtige Feeling ein, klickt er weg. Für das richtige Gefühl auf deiner Website sorgst du mit deinem Website-Stil.

Webdesign

So kombinierst du Schriften

Schriften spielen viel zu oft eine untergeordnete Rolle auf Website und Social Media. Dabei komplettieren sie den Look, den Du mit Farben und Bildern herstellst und machen Dein Branding einzigartig. Erfahre hier, welche Schriftpaare auf Website und in Social Media zeitlos und schwer angesagt sind.

Website planen in 3 Schritten

Wed, 06 Jul 2022 15:50:00 +0000

Website planen:
In 3 Schritten zur strategischen Website

die von Anfang an deine WunschkundInnen anzieht und verkauft!

Du planst deine Website am besten, indem du zuerst deine Business-Basis klärst, dann deinen Website-Stil festlegst und anschließend die Struktur deiner Seiten skizzierst.

Denn einfach mit Hosting, Theme und Farben loszulegen, klingt zwar produktiv, endet aber oft in einer frustrierenden Dauerbaustelle. Wenn deine Website später die richtigen Menschen anziehen und verkaufen soll, brauchst du vorher einen klaren Plan:

Wen willst du erreichen?
Was soll deine Website für dein Business leisten?
Und wie führst du Besucherinnen und Besucher so durch deine Inhalte, dass sie verstehen, warum sie genau bei dir richtig sind?

In diesem Beitrag zeige ich dir, wie du deine Website strategisch planst, ohne dich in Perfektionismus, Technik oder hübschen Details zu verlieren.

Als Riesenfan der „Einfach mal machen“-Strategie fällt es mir schwer dir zu sagen, dass dieses Mindset in Sachen Website-Aufbau leider nicht funktioniert. Im Gegenteil: Du wirst höchstwahrscheinlich niemals richtig fertig und deine Website nicht mit einem guten Gefühl online stellen.

In die „Einfach machen“-Falle ging ich in Sachen Website auch schon einmal. Mit einem Riesenanlauf bin ich mitten rein gesprungen.

Voll motiviert buchte ich vor vielen Jahren eine Domain und das Webhosting. Dann legte ich los mit einer langen Liste empfohlener Plugins. Dann installierte ich ein schickes Theme. Dann ein anderes. Und dann noch einige weitere.

Ich legte Seiten an, verschiedene Kategorien und schrieb einen Beitrag. Einen! Diesen illustrierte ich planlos mit verschiedenen Bildern von meiner Festplatte.

Dann hörte ich frustriert auf. Ich wusste einfach nicht, wie ich weitermachen sollte …

Das hat sich inzwischen geändert. Als Webdesignerin erstelle ich Business-Websites für Selbstständige und Unternehmerinnen. Der Auftakt bei jedem neuen Projekt ist immer: das Website-Konzept.

Warum ist eine Website-Planung wichtig?

Bevor du loslegst und dich auf Hosting und Tools stürzt, solltest du wissen, warum Planung der Schlüssel zum Erfolg ist:

Wenn du weißt, was die Ziele deiner Website sind, wirst du deine Website schneller launchen, also online stellen können.

Außerdem wirst du mit deinem Angebot schneller und besser von den richtigen Menschen gefunden, da du deine Website mit Sinn und Verstand erstellt hast, deine Werte und das, worum es bei dir geht, auf einen Blick erkennbar sind.

Dein Website-Konzept zeigt dir auf

wen genau du mit deinem Angebot wie ansprechen willst (Stichwort Zielgruppe und Wunschkunde).
welche einzelnen Seiten du brauchst.
welche Struktur deine Website haben muss, um deine Ziele zu erreichen.
welche Inhalte relevant für deine Website-Besucher sind.
mit welchen Gestaltungselementen du für den Wow-Effekt sorgst und aus Besuchern Kunden machst.

Wann brauchst du ein Website-Konzept?

Anhand des Tortendiagramms siehst du, dass du sowohl für den ersten Aufbau deiner Website als auch für den Ausbau oder den Relaunch deiner bestehenden Website einen strategischen Plan brauchst.

Der berühmte erste Blick, hier der erste Klick, entscheidet darüber, ob dein Website-Besucher bleibt – oder deine Seite direkt wieder verlässt.

Weil er nicht sofort versteht, was für ihn drin ist.

Weil er sich auf deiner Website nicht wohl fühlt.

Wer dagegen bleibt, beginnt zu scannen: auf der Suche nach … ja wonach eigentlich?

Und jetzt kommst du:

Welche Ziele soll deine Website erreichen?

Das ist die essentielle Frage, die du beantworten musst, bevor du dich mit Farben, Buttonformen, Bildern, usw. beschäftigst.

Denn erst wenn du selbst die Ziele deiner Website kennst, kannst du sie so aufbauen, dass diese Ziele überhaupt erreicht werden können. Klingt logisch, oder?

Und erst mit festgelegten Zielen kannst du später messen, ob du die Ziele erreicht hast – oder ob du hier und da etwas anpassen, korrigieren oder erweitern solltest.

Wenn du jetzt denkst, dass das Ziel deiner Website doch klar ist, schau mal hier:

Was möchtest du mit deiner Website erreichen?

Website ist nicht gleich Website. Es kommt vor allem auf dein Business-Modell an. Willst du

mehr Kunden in deinem Geschäft begrüßen?
dass Kunden, Patienten, Klienten einen Termin bei dir buchen?
über deine Angebote oder besondere Aktionen informieren?
(digitale) Produkte, Dienstleistungen, Trainings, Onlinekurse verkaufen?
bei Google und KI-Tools ganz oben genannt werden?
dass sich deine Website-Besucher in deinen Newsletter eintragen?

Bestimmt hast du jetzt mehrfach „Ja“ gesagt. Du siehst also, dass deine Website verschiedene Ziele verfolgen kann – und sollte.

Was ist das primäre Ziel deiner Website?

Um das Hauptziel für deine Website festzulegen, nimm das große Ganze in den Blick: Im Business-Kontext ist das ganz klar „mehr Umsatz“.

Was bringen dir eine Top-Platzierung bei Google, hunderttausende Website-Besucher, eine lange Verweildauer auf deinen Seiten, wenn am Ende niemand bei dir kauft?

Machst du dein Hauptziel jetzt noch messbar, wie z. B. „X % mehr Umsatz durch den Verkauf meiner digitalen Produkte innerhalb von X Monaten“, kannst du nach dem festgelegten Zeitraum überprüfen, ob du dein Ziel erreicht hast.

Was sind die Unterziele deiner Website?

Unterziele sind bei deiner Website-Planung deshalb wichtig, weil du mit ihnen dein Hauptziel in kleinere Schritte unterteilst.

Sie helfen dir, deine Website zu strukturieren, deine Inhalte zu planen und zeigen dir auf, welche Tools und Funktionen du brauchst.

Durch Unter- oder Teilziele behältst du beim Aufbau deiner Website die vielen kleinen Schritte besser im Blick und du weißt ganz genau, was der nächste Schritt ist.

Die Unterziele zeigen dir auf, welche Maßnahmen du umsetzen musst, um dein Hauptziel zu erreichen, um z. B.

überhaupt online gefunden zu werden und dein Angebot bekannt zu machen.
deine Expertise zu zeigen und Vertrauen aufzubauen.
deine E-Mail-Liste aufzubauen.
Kennenlern-/Beratungsgespräche zu generieren.
deine (digitalen) Produkte, Dienstleistungen, etc. zu verkaufen.

Was bilden die definierten Unterziele deiner Website ab?

Wenn du aufmerksam auf die Unterziele guckst, siehst du, dass du mit ihnen die komplette Kundenreise abbilden kannst. Du legst fest, wie ein Nutzer auf deine Website kommt, zum Leser wird, zum Abonnenten wird, zum Kunden wird.

Stelle dir also folgende Fragen:

Für welche Zielgruppe ist mein Angebot gedacht?
Wie sorge ich dafür, dass meine Zielgruppe auf meine Website kommt?
Wie hebe ich mich von den Angeboten meiner Mitbewerber ab?
Wie baue ich Vertrauen auf?
Wie mache ich aus Website-Besuchern Abonnenten meines Newsletters?
Wie können Interessenten einen Termin bei mir buchen?
Wie können Interessenten meine (digitalen) Produkte buchen bzw. kaufen?

Prüfe jedes Unterziel, ob es auf dein Hauptziel einzahlt. Wenn du merkst, dass du abschweifst und dich mit „Nice to have“-Themen aufhältst, konzentriere dich auf umsatzrelevante Teilziele.

Denn eine schöne Schrift verkauft nicht. Eine sehr gute Struktur und sehr gutes Copywriting aber schon.

Live-Webinar am 6. November

Von unsichtbar
zu ausgebucht!

Wie du mit der 3 Schritte Formel bei Google ganz oben stehst, von den KI-Tools empfohlen wirst und so Wunschkunden auf Autopilot gewinnst.

So planst du deine Website in 3 einfachen Schritten

Schritt 1: Definiere deine Business-Basis

Wie beim Bau deines Traumhauses, brauchst du für deine Website eine solide Basis, das Fundament.

Dein Fundament sollte mindestens folgende drei Aspekte beinhalten:

1) Dein Warum und deine Werte

Damit erhältst du aber vor allem auch dein Website-Besucher Klarheit über dich und darüber, wofür du stehst.

2) Deine Nische, mit der du eine klar definierte Zielgruppe ansprichst

So findest du selbst schneller einen Fokus und kannst genauer auf die Wünsche deiner Website-Besucher eingehen.

3) Dein Wunschkunde

Dein Wunschkunde (Traumkunde, idealer Kunde, Soulclient) ist der typische Vertreter deiner Zielgruppe. Er oder sie hilft dir, deinen Content, dein Angebot, dein Marketing auszurichten. Es ist diese eine Person, die du vor Augen hast, wenn du

deine Über mich-Seite, einen Angebotstext, einen Blogbeitrag schreibst.
neue Fotos für deine Website aufnimmst oder recherchierst.
einen neuen Newsletter schreibst.
ein neues Angebot entwickelst.

Dein Wunschkunde ist die Hauptperson auf deiner Website. Richte alle deine Maßnahmen an ihrem Geschmack, ihren Fragen, Problemen und Zielen aus.

Um ein einheitliches Erscheinungsbild mit Wiedererkennungswert auf deiner Website zu kreieren, erarbeitest du im nächsten Schritt deinen Website-Stil: aus deinem Warum, deiner Positionierung und dem Wissen um deine Zielgruppe.

Schritt 2: Leg deinen Website-Stil fest

Kannst du aus deiner Positionierung typische Symbole ableiten? Gibt es bestimmte Farben, die charakteristisch sind? Welche Wirkung willst du mit verschiedenen Schriften erzielen? Welche Bildwelten bzw. Motive passen zu deiner Nische?

Die grundlegenden Fragen zum Website-Stil lauten:

Mit welchem Stil kannst du deine Zielgruppe anziehen?
Was gefällt deinem Wunschkunden? Was gefällt dir?
Welche Stimmung willst du mit dem Stil auf deiner Website hervorrufen? Was soll dein Website-Besucher fühlen?

Einen ausführlichen Beitrag, wie du deinen Website-Stil entwickelst, findest du hier …

Wichtige Punkte für deinen Website-Stil sind

Farben
Bilder (vor allem auch von dir)
Schriften
eventuell typische Symbole
Slogan, Texte, dein Angebot

Im Beitrag „15 Schriftpaare für deine Website und deine Social Media-Posts“ kannst du dich inspirieren lassen. Hier findest du moderne und zeitlose Schriften zum Kombinieren.

Selbst wenn du bereits ein Branding für dein Offline Business oder deine Social Media-Kanäle hast entwerfen lassen: Überprüfe unbedingt, ob sich dieses mit seinen Farben, Schriften, Motivwelten und Elementen 1:1 auf die Website übertragen lässt.

Auch ein vorhandenes Logo, das auf der Visitenkarte oder in deinem Schaufenster sehr gut aussehen, kann auf der Website plötzlich untergehen, wenn es zu kleinteilig oder mit einer zu zarten Schrift gestaltet ist.

Für deine Website brauchst du ein responsives Logo, das auch auf dem kleineren Smartphone-Display perfekt erkennbar ist.

Absolutes No Go in Sachen Branding:

Bastel dir nicht selbst dein Logo, wenn du keine Grafikdesignerin bist. Erfahre hier, warum du (erstmal) kein Logo auf deiner Website brauchst.

Schritt 3: Skizziere die Struktur deiner Website

Zusammen mit deinem Content entscheidet die Struktur deiner Website über Erfolg oder Misserfolg.

Wenn sich dein Besucher auf deiner Website nicht zurechtfindet, wird er sie schnell wieder verlassen und woanders suchen, was er bei dir nicht gefunden hat.

Zur Struktur deiner Website gehören in erster Linie:

die benötigten Seiten und Unterseiten
Kopfzeile (Header) und Fußzeile (Footer) mit den entsprechenden Menüs
die Benutzerführung zu deinem wichtigsten Angebot
Blogkategorien

Deine Website-Struktur sollte möglichst einfach zu durchschauen sein. Denn: Der Website-Besucher an sich ist nahezu blind. Du kannst ihn dir als unaufmerksames Toastbrot mit 4 Promille Blutalkohol vorstellen.

Zunächst überfliegt, ja scannt er deine Website nur und prüft, ob er für ihn relevante Inhalte findet.

Erschaffe also eine logische Struktur, die sich gerne in die Tiefe hin weiter verzweigt. Damit der Website-Besucher auf den ersten Blick erfassen kann, wohin er klicken muss, sollten in der ersten Ebene nur die relevanten Punkte stehen.

Deine Skizze erstellst du ganz einfach auf einem Blatt Papier – eben Oldschool. Oder du nutzt ein Tool, wie z. B. Figma.

Website planen: Deine Extrameile zur Wow-Website

Wenn du deiner Website den Wow-Effekt verleihen willst, kannst du die Extrameile gehen und dich mit weiteren Punkten beschäftigen:

Elemente, die du dringend auf deiner Websites brauchst (Must Have)
Elemente, die auf deiner Website toll wären (Nice To Have).
Wie und worin sich deine Website von deinen Mitbewerbern unterscheiden soll!
Was ist eigentlich das Ziel deiner Website?

Dir steht das gesamte Netz mit Millionen Websites zur Verfügung. Starte eine große Recherche und finde heraus, wie du deine Website strukturieren und gestalten willst. Lass dich inspirieren, aber kopiere niemals 1:1 den Stil einer anderen Website.

Wenn es dir gelingt, dein Thema, deine Zielgruppe und das Ziel deiner Website im Blick zu behalten, wird dein Website-Konzept schnell fertig. Für die eigentliche Erstellung der Website selbst hast du dann den perfekten Kompass.

Insgesamt geht es bei deiner Website-Planung niemals nur um deine Website.

Es geht um dich und deine Zielgruppe und wie du es schaffen kannst, aus dem riesigen Angebot an Websites von Coaches, Trainern, Beratern, Bloggern & Co. herauszustechen.

Insgesamt geht es also um dein Business an sich und dein Alleinstellungsmerkmal. Und das sorgt oft für Aha-Momente.

Was ist bei der Website-Planung noch wichtig?

Nichts ist in Stein gemeißelt. Wahrscheinlich wird dir selbst die erste Version deiner Website schon bald nicht mehr gefallen. Weil du dich schnell veränderst. Und weil sich dein Business erst noch eingroovt. Die Klarheit kommt mit der Zeit und dann wirst du auch deine Website noch einmal überarbeiten.

Gerade wenn du jetzt noch ganz am Anfang deines Online-Business stehst und du schnell starten willst, kann die Erarbeitung eines Website-Konzepts zur Mammut-Aufgabe werden. Halte dich nicht zu lange mit der Planung auf. Farben, Schriften, Struktur, etc. wirst du später höchstwahrscheinlich noch einmal (oder mehrmals) anpassen.

Wenn du, wie ich, Perfektionistin bist, lass dir gesagt sein:

Deine Website wird niemals perfekt sein. Aber das siehst nur du so.

Hier hilft das Prinzip „better done, than perfect!“.

Denn sonst wirst du auch mit deinem Website-Konzept niemals fertig.

Über die Autorin:

Silke König, M.A.

Mehr über Silke …

Lies hier direkt weiter:

Online-Business, Webdesign

Deine eigene Linkseite für Instagram™

Online-Business, Webdesign

So enwickelst du deinen Website-Stil

Technik und Tools

Webhoster für deine Website

Darum brauchst du kein Logo auf deiner Website

Tue, 07 Jun 2022 05:41:42 +0000

Darum brauchst du (erstmal) kein Logo auf deiner Website

plus 3 Logo Alternativen

Dass du für deine Website ein Logo brauchst, ist ein Gerücht, das sich hartnäckig hält. Viele Business-Starterinnen basteln erstmal selbst an ihrem Logo herum. Schließlich gibt es geniale Design-Programme wie z.B. Canva. Hier wird dir suggeriert, dass du mit einer Vorlage mal eben dein Logo selbst erstellen kannst. Und ein Logo braucht man doch, bevor man mit der Gestaltung seiner Website beginnt, oder?

NEIN! Du braucht (erstmal) kein Logo auf deiner Website!

Wusstest du, dass es zunächst besser ist, kein Logo auf der Website zu haben als ein schlechtes selbstgebasteltes?

Ausnahme: Du bist Grafikdesignerin und kannst dir ein professionelles Logo selbst gestalten. Der Ausdruck „basteln“ wäre hier natürlich fehl am Platze!

Was sind die Nachteile eines selbstgebastelten Logos?

Ein selbstgebasteltes Logo schreit aus allen Poren: „Ich bin ein DIY-Logo!“ und das ist auf deiner Business-Website alles, nur nicht professionell.

Wenn du eine Vorlage verwendest, hat dein Logo keinen Wiedererkennungswert. Es sieht dann auch selbstgebastelt aus und daher nicht professionell. Und das willst du mit deinem Business bestimmt nicht suggerieren. Schließlich bist du professionell!

Als Nicht-Designerin kennst du außerdem spezifische Design-Regeln nicht:

Die Schrift, die du verwendest, ist komplex oder zu verschnörkelt, sodass sie sich später nicht gut reproduzieren lässt.
Die Farbe deines Logos ist zu hell oder zu dunkel, sodass der notwendige Kontrast auf weißem oder schwarzem Hintergrund fehlt.
Die Bestandteile sind nicht grafisch genug, sodass dein Logo auf dunklem Hintergrund oder einem Bildhintergrund nicht wirkt und in kleiner Größe nicht mehr lesbar ist.

Welche Anforderungen muss ein Website-Logo erfüllen?

Auf deiner Website steht dein Logo in der Regel in der Kopfzeile – entweder links oder mittig. Die Kopfzeile selbst ist meist nicht höher als 80 Pixel.

Enthält dein Logo kleine Schriftelemente oder kleinteilige Grafikelemente funktioniert es im Header deiner Website überhaupt nicht.

Schlimm wird es bei runden Logos. Dann ist die Schrift in der verkleinerten Version auf deiner Website nicht mehr lesbar. Und schon gar nicht auf mobilen Geräten, denn hier hat deine Kopfzeile eine noch geringere Höhe.

So prüfst du, ob dein Logo sich für deine Website eignet:

Verkleinere dein Logo auf 70 px in der Höhe – auch wenn du kein rundes Logo hast! Das kannst du z. B. mit dem kostenlosen Bildbearbeitungstool gimp oder auch in Canva machen.
Schau mal, ob du alle Elemente auf deinem Logo gut erkennen kannst.

Wenn du nicht alle Elemente und Bestandteile deines Logos gut erkennen kannst, ist das Ergebnis nicht professionell!

Ein weiterer Nachteil eines selbstgebastelten Logos ist, dass es sich nicht für verschiedene Medien eignet, da es nicht in den entsprechenden Formaten vorliegt. Im Netz stößt du vielleicht auf Begriffe wie Vektorgrafik, EPS, JPG, PNG und SVG.

Hier ist es wichtig zu wissen, wofür du dein Logo auch später nutzen willst. Auf deiner Website? Auf deinem neuen Flyer, deiner Visitenkarte, auf Plakaten? Als Aufkleber auf deinem Schaufenster? Auf deinem Auto?

Was für ein Logo willst oder brauchst du eigentlich?

👉 Ein Schriftlogo wie Coca Cola?

👉 Ein abstraktes Logo plus Schriftzug wie Nike oder Airbnb?

👉 Ein Markenzeichen wie Apple, Twitter oder Instagram?

👉 Ein Buchstaben-Logo oder einen einzelnen Buchstaben oder ein Emblem-Logo?

Du siehst: Ein Logo ist nicht nur ein Logo.

Live-Webinar am 6. November

Von unsichtbar
zu ausgebucht!

Wie du mit der 3 Schritte Formel bei Google ganz oben stehst, von den KI-Tools empfohlen wirst und so Wunschkunden auf Autopilot gewinnst.

Für dein professionelles Logo brauchst du einen Profi an deiner Seite!

Wenn du dennoch unbedingt mit einem Logo auf deiner Website starten willst, lass es dir professionell von einer Grafikerin erstellen. Sie wird dir im Briefing viele Fragen stellen, um wirklich den Kern deines Business herausarbeiten und die passgenaue visuelle Sprache finden zu können:

zu deiner Positionierung und deiner Zielgruppe,
zu deinen Werten,
zu deinen Zielen und wie deine Zielgruppe deine Marke wahrnehmen sollte,
zu deinen Angeboten.

Denn schließlich soll dein Logo zu dir und deinem Business passen.

Was noch viel wichtiger ist: Deine Zielgruppe soll auf einen Blick erkennen und fühlen, worum es bei dir wirklich geht und wofür du stehst.

Von deiner Grafikerin bekommst du alle Logo-Formate

Neben der png- und der jpg-Datei brauchst du dein Logo zukünftig bestimmt als Vektorgrafik im eps- oder svg-Format, wenn es professionell gedruckt werden soll.

Auch wenn du am Anfang noch gar nicht an Plakate, großflächige Aufkleber, etc. denkst: Wenn du die Vektordaten von Anfang an hast, bist du langfristig auf der sicheren Seite und kannst auch mal spontan einen Druck in Auftrag geben.

Zwischenfazit: Starte besser ohne Logo, als mit einem Selbstgebasteltem!

Wenn du ganz am Anfang stehst, möchtest du dir vielleicht eine Grafikerin nicht leisten. Denn gutes Design hat natürlich seinen Preis. Und es immer eine wertvolle Investition in dein Business.

Als Business-Starterin brauchst du kein Logo!

Ein letzter Grund gegen ein Logo ist, dass du beim Start deines Business vielleicht noch gar nicht sicher weißt, wohin die Reise gehen wird.

Okay, das weiß man sowieso nie.

Aber beim Website-Aufbau überdenkst du eventuell deine Positionierung nochmal.

Deine Zielgruppe verfestigt sich, je mehr du dich mit deiner Positionierung beschäftigst.

Dein Wunschkunde ist noch eine dir unbekannte, etwas mysteriöse Person.

Auch deine Branding-Farben und dein Stil insgesamt sind noch nicht fix.

Ich verrate dir hier nicht, wie oft ich auf meiner Website meine Farben und Schriften schon geändert habe – im Gegensatz zu meinem Logo. Das hat übrigens ein Freund von mir gestaltet. Er ist Grafikdesigner und hat meinem ersten Logo im letzten Sommer ein kleines Make-over verpasst.

Doch lies hier unbedingt weiter, denn es gibt

3 Alternativen zum selbstgebastelten Logo

Damit du trotzdem mit deiner Website durchstarten kannst, gibt es tolle Alternativen, die du zunächst anstelle eines Logos nutzen kannst:

1. Nutze deinen Namen

Logo-Alternative Nr. 1 ist so einfach wie genial: Schreibe deinen (Website-)Namen in einer gut lesbaren Schrift in deine Kopfzeile.

Okay – ich gebe zu, auch die Auswahl einer passenden Schrift kann viel Zeit kosten. Aber handle hier nach dem Motto:

Better done than perfect!

Falls du dich hierzu inspirieren lassen möchtest, findest du in meinem Blogbeitrag „So kombinierst du Schriften auf deiner Website und Social Media“ 13 Beispiele dazu.

2. Nutze dein Profilbild

Schau mal in dein Insta-Profil oder dein Facebook-Konto. Für deinen Business-Account hast du bereits ein geniales Foto von dir hochgeladen. Du hast es ausgewählt, weil du dich selbst mit diesem Foto total wohl fühlst. Und genau dieses Foto kannst du auf deiner Website anzeigen – anstatt eines Logos.

3. Nutze ein einfaches Icon

Bestimmt gibt es für dein Thema ein Symbol. Ein einfaches aber aussagekräftiges Icon, das sich zunächst anstelle eines Logos eignet. Wenn du Fotografin bist, eine Kamera. Als Rechtanwältin ein Paragraphenzeichen. Als Foodexpertin Messer und Gabel. Als Texterin ein Notizbuch oder ein Stift. Dann schreib noch deinen (Website-)Namen daneben und fertig.

Egal ob mit oder ohne Logo:

Wenn du jetzt deine Business-Website erstellen willst, lies hier meinen Beitrag „So planst du deine Website in 3 einfachen Schritten“ und dann leg los!

Lies hier weiter:

Online-Business, Webdesign

Website planen in 3 Schritten

Online-Business, Webdesign

Deine eigene Linkseite für Instagram™

Webdesign

Lesbarkeit deiner Website-Texte verbessern

Website-Arten – Was brauchst du zum Start ins Business?

Mon, 23 May 2022 06:52:18 +0000

Website-Arten

Was brauchst du zum Start ins Online-Business?

Dass du für dein (Online-)Business eine Website brauchst, müssen wir an dieser Stelle nicht mehr diskutieren, oder? Wenn du startest, kommst du sehr schnell an den Punkt, an dem du dich fragst „Was für eine Website brauche ich eigentlich?“. Damit du weißt, welche Website-Art für dich und deine Zielgruppe am besten passt, kommt hier der Überblick.

Die Frage nach der Art deiner Website ist nicht so einfach zu beantworten. Es kommt nämlich darauf an, was dein Ziel ist. Welchen Zweck soll deine Website haben? Und: Was ist der Kern deines Business?

Inhaltsverzeichnis

Diese Website-Arten sind für dich interessant, wenn du gerade startest und dir dein Business aufbaust bzw. aufbauen willst:

Anhand deines Ziels kannst du nachsehen, welcher Website-Typ für dich am besten geeignet ist!

„Ich will Newsletter-AbonnentInnen gewinnen/mein erstes Angebot verkaufen!“

Landingpage

Rein technisch ist jede Seite einer Website eine Landingpage: Es ist eine Seite, auf der ein User über einen Link landet.

Eine Landingpage im Sinne des Online-Marketings ist eine Verkaufsseite, die auf ein bestimmtes Ziel ausgerichtet und auf dieses optimiert ist: Der User soll eine bestimmte Handlung ausführen.

Auf der Landingpage fehlen in der Regel die Kopf- und die Fußzeile, damit

👉 nichts vom Ziel dieser Seite ablenkt.
👉 der User sich nicht doch erst noch eine andere Seite bei dir durchliest oder durch deine Beiträge stöbert.
👉 der User die gewünschte Handlung ausführt.

Um eine Landingpage zu erstellen, brauchst du keine eigene Website.

Je nach Ziel, kannst du deine Landingpage mit dem entsprechenden Tool erstellen.

So bieten viele Newsletter-Tools wie z.B. ActiveCampaign (Affiliate Link) auch Landingpages an, um dein „Freebie“ zu bewerben. Hier kannst du dann das erforderliche Anmeldeformular direkt auf deiner Landingpage integrieren.

Auch bei Canva kannst du Landingpages erstellen, z.B. für eine eigene Linkseite zu deinen weiteren Social Media-Kanälen oder deinen Angeboten auf verschiedenen Plattformen.

Auch mit Tools wie Unbounce oder Leadpages kannst du deine Landingpage unabhängig von einer eigenen Website erstellen.

Diese Landingpage-Tools werben damit, dass sie Conversion optimiert sind. Das heißt, dass sie die Konversionsrate steigern, u.a. durch eine schnelle Ladezeit und mobile Anpassung. Meiner Meinung nach findet die Optimierung aber vor allem über deine Texte und deine (Angebots-)Bilder statt. Hierauf hat das Tool natürlich keinen Einfluss.

Deine Landingpage kannst du schnell online bringen.

Die meisten Tools arbeiten mit sogenannten Drag and Drop-Pagebuildern. Darüber ziehst du die Inhalte, die du anzeigen lassen willst, einfach auf die Seite und füllst sie mit Inhalt.

Der größte Nachteil bei diesen Landingpage-Tools sind die Kosten, im Vergleich zur eigenen Website, auf der du beliebig viele Landingpages erstellen kannst.

Und: Auch auf deiner Landingpage musst du ein Impressum und eine Datenschutzerklärung angeben.

„Ich starte gerade mein Business und will möglich schnell meine Website online bringen!“

Onepager

Wörtlich übersetzt ist ein Onepager ein „Einseiter“: eine Website, die aus „nur“ einer Seite besteht: der Startseite, auch Homepage genannt.

Aus den Menüpunkten in der Kopfzeile wird keine neue Seite geöffnet, sondern der Onepager springt bzw. rollt zum entsprechenden Abschnitt.

Auf deinem Onepager stellst du den Kundenvorteil kurz und knackig dar und dich und dein Angebot in verschiedenen Abschnitten vor.

Das sind die Vorteile eines Onepagers:

✅ Du musst nicht für viele verschiedene Seiten die Texte schreiben und Fotos machen bzw. aus einer Bilddatenbank suchen.
✅ Du bindest easy ein Anmeldeformular für den Aufbau deiner E-Mail-Liste oder/und ein Terminbuchungstool für Kennenlerngespräche ein.
✅ Du bewirbst deine extern gehosteten digitalen Produkte, Dienstleistungen, Coachings oder deinen Onlinekurs auf deiner Domain und leitest deine Interessenten weiter.
✅ Du bist total flexibel, da du von dieser Basis aus deine Website nach und nach ausbauen kannst – um weitere Seiten, z.B. deine Über mich-Seite, deine Angebotsseite und deinen Blog.
✅ Du kannst deine Website an einem Tag launchen.

Waaaahnsinn, so ein Onepager. Aber es gibt da noch weitere Seiten, die du unbedingt haben musst: das Impressum und die Datenschutzerklärung. Die brauchst du natürlich auch auf deinem Onepager.

Und was ist mit einer stylishen Linkseite z. B. für dein Profil hier auf Instagram? Die kannst du natürlich auch einbinden und mit wenigen Klicks wirst du den ollen Linktr.ee los.

Ist der Onepager also eine Mogelpackung?

🤓 Auf gar keinen Fall. Er ist ein echtes Allround-Talent.

Einige Nachteile bringt der Onepager aber auch mit sich:

❌ Du brauchst zwei Header, da ein Onepager zwei Menüs benötigt: Eines mit den „rollenden“ Links zu den entsprechenden Bereichen (= Sprungmarken) und eines, das von den weiteren Seiten Impressum und Datenschutzerklärung zum Onepager zurückführt.
❌ Du musst dich auf das Wesentliche konzentrieren, da der Onepager sonst unübersichtlich wird und deine User sich nicht zurecht finden.
❌ Durch weniger Content auf deiner Website wirst du es schwer haben, von den Suchmaschinen gefunden zu werden. Durch eine gute Seitenstruktur und die punktgenaue Platzierung deines Keywords kannst du Google zeigen, worum es bei dir genau geht.

„Ich will einfach mal starten und irgendwann später ein Angebot einbinden.“

Blog

Ein klassischer Blog (= Weblog) besteht aus Beiträgen in verschiedenen Kategorien. Die Startseite zeigt die neuesten Beiträge und in der Regel eine Seitenleiste mit Informationen zur Autorin, den beliebtesten Beiträgen und eventuell den neuesten Kommentaren. Denn auch heute noch ist ein Blog sehr gut dazu geeignet, sich mit seinen Lesern über Kommentare auszutauschen.

Für einen Blogbeitrag brauchst du

deinen Text
einen prägnanten Titel,
eine Einleitung
Bilder, Grafiken zur Illustration und Auflockerung, ein Video oder eine Podcast-Episode
ein Beitragsbild und eine kurze Zusammenfassung mit Call to Action (= Textauszug), die nach der Veröffentlichung auf der Startseite angezeigt werden.

Ein Blog hat viele Vorteile:

🥳 Blogbeiträge liefern Antworten auf Fragen, Inspiration, Anleitung, Unterhaltung und Mehrwert. Damit baust du Vertrauen auf.
🥳 Du zeigst deine Expertise und wie du an dein Thema herangehst.
🥳 Blogbeiträge werden geteilt und erhöhen damit deine Sichtbarkeit.
🥳 Deine Beiträge liefern dir Postideen für Social Media auf Autopilot.
🥳 Du lieferst regelmäßig neuen Content – und das lieben deine Blogleser und die Suchmaschine.

Argumente gegen einen reinen Blog gibt es nicht. Eigentlich.

❌ Allerdings ist es heute sehr viel schwieriger „nur“ mit einem Blog ein Business aufzubauen, da deine Leser kein konkretes Angebot mit dir verbinden und es sich angewöhnen, bei dir kostenlosen Content zu bekommen.

Live-Webinar am 6. November

Von unsichtbar
zu ausgebucht!

Wie du mit der 3 Schritte Formel bei Google ganz oben stehst, von den KI-Tools empfohlen wirst und so Wunschkunden auf Autopilot gewinnst.

„Ich brenne für ein (gesellschaftlich) relevantes Thema und will Content veröffentlichen.“

Onlinemagazin

Beim Onlinemagazin ist die Website das Business.

Zugegeben, die Grenzen vom Blog zum Onlinemagazin sind fließend. Doch diese Website Art geht einen großen Schritt weiter: Das Onlinemagazin ist stärker redaktionell ausgerichtet. Die thematisch abgestimmten Inhalte sind der größte Unterschied.

Gestalterisch sind dem Onlinemagazin keine Grenzen gesetzt. Die Startseite zeigt die neuesten und meistgelesenen Artikel in einem speziell gestalteten Magazinstil. Die Artikel können jeweils individuell gestaltet sein oder in einem festgelegten Template erscheinen.

Die Menüpunkte in der Kopfzeile führen zu den einzelnen Kategorien mit Unterpunkten.

Dieser Website-Typ macht Lust zu stöbern – in Artikeln, die in verschiedenen Rubriken und Kategorien miteinander verlinkt sind.

Monetarisieren lässt sich ein Onlinemagazin durch Kooperationen, bezahlte Beiträge und über Werbebanner oder Links sowie den Verkauf eigener Produkte oder Events.

Der Vorteil des Onlinemagazins liegt in der relativ schnellen Sichtbarkeit. Um zu starten, brauchst du eine gewisse Anzahl an vorproduzierten Beiträgen.

Damit du langfristig von deinem Onlinemagazin gut leben kannst, braucht dein Magazin wöchentlich mehrere neue Artikel, die gut recherchiert und mit eigenem Bildmaterial illustriert sind. Am besten gelingt das mit einem Team aus Schreibenden, FotografInnen, GrafikerInnen, WebdesignerInnen.

„Ich will meine Produkte online verkaufen!“

Onlineshop

Diese Website-Art kennen wir alle: Amazon und Zalando sind die Onlineshops schlechthin. Aber auch Otto, Ikea und Lidl verkaufen ihre Produkte online direkt über ihre Shops.

Ein eigener Onlineshop eignet sich nicht nur für physische Produkte, die versendet werden müssen. Du kannst auch virtuelle Produkte (Meetings, Workshops), digitale Produkte (Onlinekurse, Onlineprogramme, Vorlagen) oder Dienstleistungen (Stundenpakete) über deinen Onlineshop verkaufen.

Den eigenen Onlineshop aufzubauen ist technisch recht komplex, da er den gesamten Kaufprozess abbilden muss:

1️⃣ Die Anzeige des Produkts inkl. Preis und Steuerinformationen.
2️⃣ Den Bestellvorgang über den Warenkorb und die Kasse.
3️⃣ Das Erfassen der Käuferdaten und das Erstellen eines Kundenkontos.
4️⃣ Die Zahlung über verschiedene Zahlungsmethoden.
5️⃣ Die automatisierten E-Mail-Benachrichtigungen für den Käufer und den Shop-Betreiber.
6️⃣ Das Erstellen der Rechnung und des Lieferscheins.
7️⃣ Der Versand über einen Dienstleister.
8️⃣ Eventuelle Widerrufe und Retouren.

Viele nutzen zum Start ihres eigenen Onlineshops eine Plattform wie z. B. Etsy. Dort kannst du easy loslegen, musst dich nicht mit der Technik beschäftigen und deine Zielgruppe ist meistens schon da.

Allerdings verschwindet auf so einer Plattform deine Marke in der Masse.
Um aufzufallen, musst du die Plattform-eigene Werbung nutzen – und bezahlen.
Es fallen laufend Kosten an, wie die Einstell-, die Transaktions- und Zahlungsbearbeitungsgebühren.

Mit WordPress kannst du dir deinen eigenen Onlineshop auf deiner Domain aufbauen:

Das sind die Vorteile deines eigenen Onlineshops

✅ Ist der Shop erst technisch eingerichtet, kannst du deine Produkte, Angebote, Kurse, Workshops, Dienstleistungen über deine eigene Domain verkaufen.
✅ Du kannst alles in deinem Branding gestalten und deine Shopseiten so anpassen, wie es zu deinen Produkten am besten passt.
✅ Du hast keine laufenden Shop-Gebühren und die Transaktionskosten reduzieren sich auf wenige Prozent je nach gewählter Zahlungsart durch den Kunden.
✅ Du kannst dein eigenes Affiliate-Programm nutzen, um deine Verkäufe zu erhöhen.

Zwei Herausforderungen bringt der eigene Onlineshop mit:

📌 Ein eigener Onlineshop erfordert zum Beginn eine gewisse Investition in Tools und Support.
📌 Du (oder jemand aus deinem Team) bist dafür verantwortlich, dass der Shop funktioniert.

„Ich will meine (kreativen) Arbeiten online herausragend präsentieren!“

Portfolio-Website

Du bist Designerin, Fotografin, Videografin, Künstlerin, Schauspielerin, Filmemacherin? Mit deinem Portfolio zeigst du deine besten Arbeiten, damit

👉 du online gefunden wirst.
👉 Kunden/Auftraggeber sich ein Bild von deinen Arbeiten machen können.
👉 du deine Positionierung/Spezialisierung darstellst bzw. eingrenzt.

Online-Portfolios durchbrechen gerne die Regeln des klassischen Webdesigns.

Sie sind selbst die Arbeitsprobe. Das kann ganz schnell zum Nachteil werden, da das Portfolio selbst zur Nebensache werden kann.

Neben der Gestaltung der Portfolio-Website selbst, kommt es auf die Auswahl der Arbeiten an, die angezeigt werden sollen.

Du kannst
📌 deine besten Arbeiten zeigen.
📌 deine neuesten Arbeiten zeigen.
📌 einen Querschnitt deiner Arbeiten zeigen und damit, wie du dich weiterentwickelt hast.

Insgesamt kommt es natürlich auf das Ziel an: Was bzw. wen willst du mit deinem Portfolio erreichen?

„Ich will mir ein Business aufbauen, online sichtbar werden und Kundinnen und Kunden gewinnen.“

Corporate Website

Eine Corporate Website ist der zentrale Kommunikationskanal eines Unternehmens im Netz.

Oder anders herum: Wenn du selbständig bist oder dir (online) etwas Eigenes, Großes und Unabhängiges aufbauen willst, existierst du ohne Website nicht.

Natürlich kannst du erstmal auf Social Media starten und dich ausprobieren. Ob dein Thema deine Zielgruppe anzieht und dein Thema Potenzial hat, dass du damit Geld verdienen kannst. Doch wenn du online für deine Dienstleistung, deine Angebote oder deine Produkte gefunden werden willst, brauchst du eine Corporate Website. Lies hierzu auch den Beitrag Website vs. Social Media.

Eine Corporate-Website ist eine Business-Website mit einer Startseite, einer „Über mich“-Seite, einer Angebotsseite, Blogbeiträgen und damit mit einer Blogseite, etc. Damit bildest du ab, worum es bei dir geht. Damit UserInnen dich finden, Website-BesucherInnen Vertrauen zu dir und deiner Expertise fassen und zu Fans und zu KundInnen werden.

Lass uns mal einen Blick auf eine ganz seriöse Corporate Website werfen:

Die Website von VW richtet sich in erster Linie an AutokäuferInnen und setzt den Fokus auf die neuesten Fahrzeugmodelle.

Als KundIn kannst du auf volkswagen.de Modelle entdecken, konfigurieren, nach verfügbaren Neu- und Gebrauchtwagen stöbern. Die Website ist zugleich Onlineshop sowie Plattform rund um die Themen Technologie, Mobilität, Marke und Erlebnis. Wenn du etwas weiterscrollst, findest du Links zu VW als Arbeitgeber, zu Investor Relations, zur Volkswagen AG.

Corporate Websites können also verschiedene Zwecke erfüllen.

✅ Basis der digitalen Markenkommunikation.
✅ Darstellung der Angebotspalette und Möglichkeit zum Kauf oder Weiterleitung zum Händler.
✅ Userbindung (z. B. durch Newsletter und Vernetzung mit Social Media-Kanälen).
✅ Die systematische Gestaltung der Kundenbeziehungsprozesse (= Customer Relations).
✅ Herstellen eines auf die Marke ausgerichteten Nutzererlebnisses.
✅ Positionierung als Arbeitgeber.

Du musst kein Konzern sein, um eine Corporate Website aufzubauen.

Wichtig ist, dass du das primäre Ziel festlegst und deine Corporate Website darauf optimierst.

So wie der Onepager im Kleinen, bildet die Corporate Website dein Angebot und die Vorteile für deine Zielgruppe ab. Allerdings sehr viel ausführlicher. Das ist besonders positiv für die Sichtbarkeit, denn kann Google erkennen, worum es bei dir geht und ob deine Inhalte relevant sind.

Dieser Vorteil der Corporate Website ist zugleich ihr Nachteil:

Du brauchst mehr Inhalt, den du auf unterschiedlichen Seiten darstellst. Außerdem brauchst du eine gut durchdachte Struktur, damit sich deine Website-BesucherInnen zurecht finden und bei dir finden, was sie suchen.

Deine Corporate Website entwickelt sich mit deinem Business weiter

Natürlich kannst du deine Corporate Website zunächst mit den wichtigsten Seiten online bringen. Dann baust du sie nach und nach aus und

👑 bindest einen Blog ein, damit du regelmäßig aktuellen Content auf deine Website bringst und damit deine Sichtbarkeit erhöhst (Stichwort SEO) und von deiner Zielgruppe gefunden wirst.
👑 machst über Landingpages aus Website-Besuchern Abonnenten und Käufer.
👑 erstellst ein Portfolio, sodass InteressentInnen sich von deiner Expertise überzeugen können.
👑 baust deinen eigenen Shop auf deiner Corporate Website auf und verkaufst direkt in deinem Namen deine Dienstleistung, dein Angebot, deinen Onlinekurs, dein Gruppen-Coaching, deine Produkte.

All diese Website-Arten haben eines gemeinsam:

Deine Website erstellst du nicht für dich, sondern für deine Zielgruppe!

Bevor du direkt loslegst: Mach dir zunächst einen Plan. In diesem Beitrag erfährst du, worauf du achten solltest.

👑 Welche Website-Art passt zu dir und deinem Ziel?

Lies hier weiter:

Online-Business, Technik und Tools

Website erstellen in 10 Schritten

In dieser Schritt-für-Schritt-Anleitung erfährst du, wie du mit WordPress deine eigene Webseite an den Start bringst: Welche Einstellungen du vornehmen musst, wo du ein passendes Theme findest, welche Plugins wichtig sind und wie du deinen ersten Blogbeitrag veröffentlichst. Am Ende steigt deine Launchparty!

Online-Business, Technik und Tools

Website mit WordPress selbst erstellen

Wie sieht es mit deiner eigenen Onlinepräsenz aus? Hast Du die Website, die zu 100% zu dir und deiner Nische passt? Mit der du Reichweite aufbauen, deine Angebote im besten Licht zeigen und Kunden anziehen kannst? Erfahre, warum du deine Website selbst erstellen solltest.

Online-Business, Technik und Tools

WordPress.com oder WordPress.org?

Eigentlich ist es doch nur ein klitzekleiner Unterschied in der Domain. Doch was dahinter steckt, ist enorm. Damit du weißt, warum du bei WordPress voll auf .org setzen solltest und für wen .com die bessere Wahl ist und was sich dahinter verbirgt, erfährst du in diesem Beitrag.

So gestaltest du deine Buttons

Tue, 19 Oct 2021 17:13:49 +0000

So gestaltest du deine Buttons
wie ein Profi

6 + 1 Tipps für klickstarke Call to Actions

Klickstarke Buttons gestaltest du, indem du Farbe, Form, Schrift, Padding und Button-Text so kombinierst, dass dein Call to Action sofort auffällt, klar verständlich ist und zum Klicken einlädt. Denn ein Button ist nicht einfach nur eine Schaltfläche auf deiner Website. Er entscheidet mit darüber, ob Besucher weiterklicken, dein Angebot angucken, deinen Newsletter abonnieren oder deinen Kurs buchen. In diesem Beitrag zeige ich dir, welche 6 + 1 Regeln du bei deinen Buttons beachten solltest, damit sie geklickt werden.

Dieser Beitrag fällt unter die Kategorie „Mit kleinen Anpassungen einen riesigen Effekt erzielen“. Und das ist tatsächlich meine Lieblingsdisziplin.

Was ist ein Button?

Ein Button ist eine Schaltfläche auf einer Website, in einer App oder auf einem interaktiven Touchscreen (z. B. beim Geldautomaten). Durch einen Klick auf den Button öffnet sich

eine neue Seite,
ein neuer Tab in deinem Browser,
eine bestimmte Anwendung,
der nächste Schritt bei einer Installation oder einer Buchung.

Einfach genommen ist ein Button ein Textlink mit farbigem Hintergrund. Durch Farbe und Form bekommt er mehr Aufmerksamkeit als ein einfacher Textlink und regt zum Klicken an.

Textlink vs. Button

In einem Fließtext, wie z. B. einem Blogbeitrag, setzt du zur Verlinkung dennoch besser einen Textlink ein. So wie in diesem Beispiel:

Auch auf Grafiken kannst du (unechte) Buttons strategisch platzieren, um mehr Klicks zu erzeugen. Im Beitrag „So erstellst du deinen eigenen Linktree für deine Instagram Bio“ erfährst du, wie das funktioniert.

Würdest du hier auf einen Button klicken, der dich zu diesem Linktree-Beitrag bringt?

Eher nicht.

Buttons stehen selten allein oder mitten im Text, sondern sind integriert in einen Kontext. In der Regel ist das ein werblicher Zusammenhang, um einen Anmelde-, Buchungs- oder Kaufprozess in Gang zu setzen. Deine Website-Besucher sollen klicken. Das ist das Ziel.

Bei Apple und anderen großen Marken werden gerne gleich zwei Buttons nebeneinander gesetzt. Das sieht dann so aus:

3 Grundlagen für die Buttons auf deiner Website:

Gestalte deine Buttons einheitlich: Nutze immer dieselbe Form und Farbe und denselben Schriftstil. So gibst du deinen Website-Besuchern Orientierung und sorgst für Sicherheit.
Richte deine Buttons am Text aus. Damit stellst du einen direkten Zusammenhang zu deiner Botschaft her. Das heißt, wenn dein Text linksbündig steht, sollte der Button darunter auch links stehen.
Schenke auch dem Text auf deinem Button besondere Aufmerksamkeit und nutze mehr als nur ein Wort, denn nur „Klicken“ oder „Mehr“ überzeugt nicht.

6 + 1 Regeln für deine klickstarken Buttons

Wichtig für deine Buttons sind:

der Status des Buttons
die Form des Buttons
die Farbe des Buttons
die Schrift auf dem Button
die Innenabstände
alle Bestandteile zusammengesetzt

Das ist die Anatomie eines Buttons:

Ein Button besteht aus

der Hintergrundfarbe
dem Rahmen (Outline)
dem Eckenradius
dem Linktext
einem Icon (optional)

Den Link, also wohin der User beim Klick gelangt, erkennst du am Button selbst natürlich nicht. Den Link siehst du, wenn du mit der Maus über einen Button fährst unten links in deinem Browser.

Live-Webinar am 6. November

Von unsichtbar
zu ausgebucht!

Wie du mit der 3 Schritte Formel bei Google ganz oben stehst, von den KI-Tools empfohlen wirst und so Wunschkunden auf Autopilot gewinnst.

1. Status des Buttons

Das ist das Tolle: Deine Buttons sind nicht statisch. Sie können mit deinen Website-Besuchern interagieren, z. B. beim Hover, also beim Mauskontakt. Den jeweiligen Status deiner Buttons kannst du selbst festlegen.

Die wichtigsten Status sind

Standard (Basis-Farbe bei voller Deckkraft)
Hover (bei Mausberührung mit Anpassung der Hintergrundfarbe)
Aktiv (Button wird in diesem Moment geklickt)
Fokus (der Button ist über die Tastatur ausgewählt)
Ladevorgang (Aktion wird vom System verarbeitet)
Deaktiviert (Button hat keine Funktion und ist nicht klickbar)

Du kannst bei der Gestaltung deiner Buttons auch variieren, wie hier bei diesem Testbutton mit einer Hintergrundfarbe im Standard-Status und einem Rahmen beim Hover:

2. Form des Buttons

Hier gibt es nichts, das es nicht gibt. Aber: Tobe die nicht zu sehr aus und sorge unbedingt dafür, dass dein Button als solcher erkennbar bleibt.

Die Form deiner Buttons gestaltest du in erster Linie über den Eckenradius oder über einen Schatteneffekt.

Eckenradius 0 px

Eckenradius 6 px

Eckenradius 30 px

um mit 15 px verschobenem Box-Schatten

Gerade die Form des Buttons orientiert sich stark an deinem Website-Stil. Dasselbe gilt natürlich für die Farbe deiner Button:

3. Farbe des Buttons

Wenn alle anderen Faktoren stimmen, kann die Buttonfarbe über Erfolg oder Misserfolg bestimmen. Denn hier greift neben persönlichen Vorlieben die Farbpsychologie. Beim Button lösen die folgenden Farben die entsprechenden Trigger beim Betrachter aus:

Das heißt natürlich nicht, dass nun alle Buttons auf allen Websites idealerweise blau oder grün sein sollten. Auch ein roter Button kann ein hohes Aktivierungspotenzial haben – wenn die Farbe zum Branding insgesamt passt.

Du kannst auf deiner Website auch mal testen, welche Buttonfarbe für mehr Klicks sorgt.

4. Schrift auf dem Button

Auf die Größe kommt es an − auch bei der Schrift auf deinen Buttons. Ist die Schrift zu klein, ist der Text auf dem Button nicht gut lesbar und der Button verliert seine Relevanz. Ist die Schrift zu groß, erscheint der gesamte Button aufdringlich und schreckt deine User im schlimmsten Fall ab.

niedrige Priorität
Schriftgröße 16 px

mittlere Priorität
Schriftgröße 20 px

hohe Priorität
Schriftgröße 24 px

Setze die Schrift auf deinen Buttons ein wenig größer als deinen regulären Fließtext. Achte auch auf die Zeilenhöhe deiner Schrift: Denn ein längerer Text auf dem Button, der in der mobilen Ansicht eventuell in zwei Zeilen steht, sollte keine vergrößerte Zeilenhöhe haben.

Pro Tipp

Setze den Text auf deinen Buttons nicht in Versalien. Die normale Schrift ist besser lesbar.

5. Innenabstände (=Padding)

Um deinen Buttons ein ausgewogenes Design zu verleihen, kannst du vor allem links und rechts das Padding erhöhen:

Erhöhst du das Padding links und rechts auf 40 oder 50 px wertest du deine Buttons unheimlich auf und machst sie im jeweiligen Kontext zu Klickmagneten.

6. So sieht der ideale Button aus

Betrachtest du alle Empfehlungen von Designern und Studien aus der Verkaufspsychologie, kannst du dir das Ausprobieren und die Farbtüftelei sparen:

Demnach ist der „perfekte“ Button blau mit weißer Schrift, hat einen komplett abgerundeten Eckenradius und rechts und links ein großzügiges Padding.

Call to Action richtig texten

Neben der Form, Hintergrund- und Textfarbe, dem Schriftstil, Padding, Hover, etc. steht und fällt natürlich alles mit deinem Linktext.

„Klick hier“ klingt dabei wie ein Befehl. Mit der Peitsche.

„Hier klicken“ ist schon besser, sagt aber nicht nichts aus.

Gut ist es, wenn du deinem Button-Text Kontext gibst, und deine Besucher verstehen, was beim Klick auf den Button geschieht:

„Melde dich an“

„Buch dir dein Gespräch“

„Downloade das PDF“

Oder vielleicht „Jetzt Angebot sichern“

Du siehst: Design und Text sind BFF. Immer.

FAQ: Häufige Fragen zur Button-Gestaltung

Was macht einen guten Button auf einer Website aus?

Ein guter Button ist klar erkennbar, gut lesbar und führt deine Website-Besucher zum nächsten sinnvollen Schritt. Dafür müssen Farbe, Form, Schrift, Padding und Button-Text zusammenpassen.

Wo sollte ich Buttons auf meiner Website einsetzen?

Buttons eignen sich vor allem dort, wo du eine klare Handlung auslösen möchtest: z. B. eine Anmeldung, Buchung, Anfrage oder einen Kauf. Mitten im Fließtext ist ein normaler Textlink oft die bessere Wahl.

Welche Farbe sollte ein Button haben?

Die Buttonfarbe sollte sich deutlich vom Rest deiner Website abheben und trotzdem zu deinem Branding passen. Wichtig ist, dass der Button auffällt und als klickbares Element erkennbar ist. Welche Farbe am besten funktioniert, kannst du auch testen.

Wie sollte der Text auf einem Button formuliert sein?

Der Button-Text sollte klar sagen, was nach dem Klick passiert. Statt nur „Klicke hier“ zu schreiben, funktionieren konkrete Formulierungen besser, zum Beispiel „Hier für 0€ anmelden“, „Jetzt Angebot holen“ oder „In den Warenkorb legen“. Vier Wörter sind genug.

Warum ist das Padding bei Buttons wichtig?

Padding ist der Innenabstand zwischen Button-Text und Button-Rand. Genug Padding sorgt dafür, dass dein Button hochwertiger wirkt, besser lesbar ist und auf Desktop und Smartphone leichter geklickt werden kann.

Lies hier weiter:

Content

So schreibst du bessere Texte

Content, Technik und Tools

Wie komme ich in die Google KI-Suchergebnisse?

Technik und Tools, Webdesign

Diese Bildgrößen brauchst du auf deiner Website

Deine eigene Linkseite für Instagram™

Fri, 06 Aug 2021 21:05:57 +0000

"Adios Linktr.ee"
So erstellst du deine eigene Linkseite für deine Instagram™ Bio

Du bist auf Instagram™ aktiv und nutzt die beliebte App als Marketing-Kanal? Um deine Follower und User zu deinen besten Inhalten und deinem Angebot zu bringen, setze in deiner Bio am besten nur einen Link ein. Viele nutzen hier den Dienst Linktr.ee. Doch eine eigene Linkseite für deine Instragram Bio ist mehr als eine Alternative.

Linktr.ee wirbt mit diesem Satz: „Build a powerful social bio link that only Linktree can deliver.“

😳What? Nur Linktr.ee kann einen mächtigen Bio-Link erstellen?

Stimmt doch gar nicht.

Lass uns mal einen Blick auf Linktree werfen:

Du kannst dir kostenlos einen Linkbaum erstellen.
Du wählst einen Hintergrund. In der kostenlosen Version gibt es nicht so viele Designs.
Du erstellst deine Links, die in Form von Buttons angezeigt werden.

Der Vorteil ist, dass es ziemlich schnell geht, mit Linktree so einen Linkbaum zu erstellen.

Wenn du es ein wenig individueller haben und in deinen Brandingfarben gestalten willst, musst du die kostenpflichtige Version buchen für monatlich 6 $.

Dein eigener Linktree auf deiner Website ist mehr als eine Alternative zu Linktr.ee

Du kannst dir für deine Bio mit einigen Klicks eine eigene, stylishe und vor allem individuelle Linkseite erstellen.

Über deine Website geht das easy. Und, was sehr wichtig ist: Deine eigene Linkseite ist datenschutzkonform.

Denn deine Follower und Interessentinnen landen über den Dienst Linktr.ee erst einmal auf einem Server in den USA, wo ihre Daten gesammelt, gespeichert und verarbeitet werden. Und das solltest du unbedingt vermeiden.

Außerdem willst du sie ja auf DEINER Website haben. Dort, wo dein Content, dein Freebie und dein Angebot sie zu Kundinnen und Kunden macht. Und sie weiterleitet, z.B. in deine Facebook-Gruppe, zu deinem LinkedIn-Profil, zu Pinterest, und und und …

Ach ja, dein Impressum und deine Datenschutzerklärung kannst du natürlich auch ganz nebenbei hier platzieren. Und das ist ein absolutes Muss!

Mit deinem eigenen Linkbaum auf deiner Website bist du in der Gestaltung völlig frei.

So erstellst du deinen eigenen Linktree:

Leg eine Landingpage auf deiner Website an. Mit einem Pagebuilder wie Elementor* geht das ruckzuck.
Erstelle Grafiken für die einzelnen Bereiche, die du verlinken willst, in deinen Brandingfarben, mit passenden Bildern und/oder Grafiken. Hierzu kannst du z. B. Canva nutzen.
Platziere die Grafiken auf deiner Landingpage untereinander und verlinke sie in die verschiedenen Bereiche: zu deinem Freebie, Angebot, Onlinekurs, zu deiner „Über mich“-Seite, in deinen Blog, etc.
Setze die URL deiner Landingpage in deine Instagram™ -Bio und überall dort, wo du ebenfalls nur einen Link einfügen kannst!

Hier gibt’s noch den ultimativen Pro-Tipp für die Grafiken auf deiner eigenen Linkseite:

Setz auf deine Grafiken unbedingt Buttons mit Call to Actions.

Das hat einen riesengroßen Effekt und deine Klickrate zu deiner Website, deinem Angebot, deinem Blog, Podcast, YouTube-Kanal, etc. geht ab wie eine Rakete.

Ich hab das mal beobachtet:

Eine gute Freundin sitzt neben mir auf meinem Sofa.
Ich zeige ihr meine neue Insta-Linkseite.
Sie fragt: „Wie hast du denn die Buttons da drauf bekommen?“
Ich erkläre: „Mit Canva.“
Sie: „Ja wie mit Canva!?“
Ich so: „Na das sind keine echten Buttons. Aber sie sehen so aus! Natürlich ist die gesamte Grafik verlinkt!“
Sie staunt. Und nickt.
Dann klickt sie auf der Insta-Seite auf … den Button zu meinem Blog.

Wir alle sind total darauf trainiert, auf Buttons zu klicken! Also nutze Buttons und bring deine Follower und Interessentinnen dort hin, wo sie deinen besten Content oder das passende Angebot finden.

Der mit * gekennzeichnete Link ist ein Affiliate Link. Das heißt, ich bekomme eine kleine Provision, wenn du hierüber buchst. Am Preis für dich ändert das natürlich nichts.

Lies hier weiter:

Online-Business, Webdesign

Website planen in 3 Schritten

Online-Business, Technik und Tools

Website erstellen in 10 Schritten

Online-Business, Technik und Tools

Website mit WordPress selbst erstellen

So enwickelst du deinen Website-Stil

Thu, 22 Apr 2021 07:50:00 +0000

So entwickelst du deinen Website-Stil

und sorgst für das richtige Feeling bei deiner Wunschkundin!

Es dauert ganze 3 Sekunden, in denen dein Website-Besucher entscheidet ob er bleibt oder geht. Erkennt er nicht direkt, was für ihn drin ist, klickt er weg. Stellt sich innerhalb dieser kurzen Zeit nicht das richtige Feeling ein, klickt er weg. Für das richtige Gefühl auf deiner Website sorgst du mit deinem Website-Stil.

Den passenden Website-Stil zu finden, ist Teil der Planung deiner Website. Doch es steckt weit mehr dahinter, als die Suche nach Farben und Schriften. Du kannst es mit dem Hausbau vergleichen, wobei du vom Grundriss bis zur Einrichtung einen einheitlichen Look erreichen willst. Auch beim Website-Stil spielen verschiedene Faktoren zusammen – und ergeben am Ende ein stimmiges Gesamtbild.

Zum Schlagwort „Stil“ findest du online viele Zitate: Nietzsche schrieb „Den Stil verbessern, das heißt den Gedanken verbessern.“ Modezar Karl Lagerfeld erklärte, dass eine Frau ohne Stil auch in einem Kleid mit Stil keinen Stil habe. Und Kommunikationsprofi Georg-Wilhelm Exler sagt „Stil ist still“. Damit trifft er auch in Sachen Website ins Schwarze. Denn dein Website-Stil wirkt ganz unaufdringlich, fast beiläufig.

Stil wirkt. Vor allem auf deiner Website. Er sorgt dafür, dass du dich klar positionierst und abgrenzt.

Wer deinen Website-Stil nicht mag, wird deine Website schnell wieder verlassen. Und das ist auch gut so: Versuche nicht, es allen Recht machen zu wollen.

So, wie du dich auf eine Zielgruppe festgelegt hast, funktioniert auch der Website-Stil. Mit deinem Website-Stil ziehst du genau die Zielgruppe an, die zu dir, deinem Thema und zu deinem Angebot passt.

Diejenigen, die deinen Website-Stil mögen, ja lieben, werden sich bei dir wohlfühlen. Denn genau darum geht es.

Mit deinem Website-Stil kreierst du ein Momentum für deinen Wunschkunden: damit er bleibt, immer wieder kommt und schließlich bei dir kauft.

Damit stehst du vor der ersten und wichtigsten Fragen, die du dir stellen solltest:

Was soll ein neuer Website-Besucher beim Aufrufen deiner Website fühlen?

Auch hier gilt der vielzitierte Satz „Du hast keine zweite Chance auf einen guten ersten Eindruck!“

Aber halt, vergiss mal deine Website (kurz zumindest):

Was ist eigentlich Stil?

Bestimmt kennst du Jamie Oliver!?

Der britische Starkoch fügt nicht einfach Zutaten zusammen und kocht daraus eine Mahlzeit. Er komponiert und kreiert Gerichte wie ein Künstler. Dabei wirbelt er lässig im T-Shirt oder Hoody durch seine TV-Küche und liebt, was er macht. Er ist begeistert von der Farbkombination, die entsteht, wenn er die grüne Minze über den goldgelben Kartoffeln verteilt. Er zelebriert Zutaten und Düfte. Und wenn er zur Gabel greift und probiert, schwebt er im siebten Himmel.

Wenn du Jamie Oliver mit Johann Lafer vergleichst, ist der Unterschied riesig. Nicht nur in Sachen Kleidung.

Hurricane Festival trifft Musikantenstadl.

Selbst wenn beide einen Gemüseauflauf kochen, werden die Ergebnisse völlig verschieden sein.

Aber nicht nur das: Jamie Oliver hat eine völlig andere Zielgruppe als Johann Lafer.

Das liegt am Stil. Hier werden aus Persönlichkeiten Marken, Personal Brands. Mit ihren Werten, ihren Visionen. Und ihrer jeweils eigenen Zielgruppe.

Stil ist also alles, was dich ausmacht. Er umgibt dich.

Was gehört zum Website-Stil?

Bestimmt denkst du beim Website-Stil zunächst an Farben und Schriften. Diese Elemente gehören natürlich zum Website-Stil. Sie machen aber nur einen Teil aus.

Denn um einen nachhaltigen Stil zu entwickeln, solltest du auf das gesamte System, nämlich deine Business-Basis schauen:

dein Thema und deine Positionierung,
deine Zielgruppe und ihre Wünsche, Fragen und Ziele,
deine Art, Themen anzugehen, zu schreiben, deine Beiträge und Seiteninhalte,
Farben, Schriften, Gestaltungselemente, Motivwelten und Bilder, die dein Angebot illustrieren und deine Inhalte und Werte ideal transportieren,
und nicht zu vergessen deine Persönlichkeit: Du als Person, die hinter allem steht, mit deinem Warum, deiner Vision, deinem persönlichen Stil.

Deine Persönlichkeit & deine Positionierung geben den Website-Stil vor.

Du kannst dich deinem Website-Stil über verschiedene Fragen annähern:

Wofür stehe ich und welche Attribute transportiert mein Business?
Welche Motive sind typisch für mein Thema/meine Positionierung?
Welche Farben sind typisch für mein Thema/meine Positionierung?
Gibt es ein typisches Symbol für mein Thema/meine Positionierung?

Zwei Beispiele:

Du bist Achtsamkeitscoach und sprichst Mütter an, die mehr Ruhe und Zeit für sich selbst in ihren Alltag holen wollen.
Du bist Business-Fotografin für persönliche Porträts und hochwertige Produkte.

Passt zu diesen Beispielen ein bunter Website-Stil mit knalligen Farben? Eher weniger.

Die Attribute „Achtsamkeit“ und „hochwertig“ geben jeweils eine Richtung vor, die punktgenau den Wunschkunden ansprechen durch einen ruhigen und hochwertigen Look.

Wenn du Klarheit über deine Business-Basis hast, weißt du genau, welchen Stil du auf deiner Website realisieren wirst.

Live-Webinar am 6. November

Von unsichtbar
zu ausgebucht!

Wie du mit der 3 Schritte Formel bei Google ganz oben stehst, von den KI-Tools empfohlen wirst und so Wunschkunden auf Autopilot gewinnst.

Welche Website-Stile gibt es?

Da heute technisch alles möglich ist, gibt es auch in Sachen Website-Stil keine Grenzen. Hier sind die gängigsten:

modern
verspielt
elegant
natürlich
vintage,
feminin
bunt
minimalistisch …

Wenn du nach „Website-Stil“ googelst, erhältst du 190 Millionen Treffer zum Thema Webdesign.

Der Website-Stil ist aber weit mehr als das Webdesign: Er geht weit über die Struktur und den Aufbau deiner Website hinaus.

Denn: Mit deinem Website-Stil sorgst du für das Feeling, den kleinen Unterschied.

Also frage dich, was deine BesucherInnen fühlen sollen, wenn sie auf deine Website kommen.

Das Feeling sorgt für Connections. Vertrauen zu dir stellt sich ein.

Das Webdesign bringt deinen Website-Stil in die gewünschte Struktur.

Hier sind einige Beispiele:

Minimalistischer Website-Stil

Minimalismus ist die bewusste Beschränkung auf das Nötigste. Da eine Website grundsätzlich nicht überladen und auf das Wesentliche fokussiert sein sollte, empfehle ich jeder Website einen gewissen Minimalismus – von der Gestaltung her, aber nicht in Sachen Website-Stil.

Das beste Beispiel für einen minimalistischen Website-Stil liefert Apple:

Der Tech-Riese reduziert seine Inhalte sowohl auf seiner Startseite und auf allen anderen Seiten auf das Wesentliche: die Produkte.

Du siehst dabei, dass Minimalismus nicht zwangsläufig nur die Farben schwarz, weiß und grau nutzen muss.

Minimalismus bedeutet sehr viel Weißraum, also freie Flächen rund um das wesentliche Objekt plus gezielte Aktzente. So wird die volle Aufmerksamkeit hierauf gelenkt.

Für diese Themen und Nischen eignet sich ein minimalistischer Website-Stil:

Kunst/Kultur/Architektur
Mode/Interior
Design/Webdesign/Fotografie
Technologie

Feminin-eleganter Website-Stil

Dezent, unaufdringlich und ein Hauch von Luxus: So lässt sich der feminin-elegante Website-Stil beschreiben.

Klare Linien, dezente Farben, Fotos, die Statements setzen, ziehen eine Zielgruppe an, die ebenfalls Wert auf hochwertige Produkte legt.

Diesen Website-Stil kannst du ausgehend von deinem Lebensstil mit einer neutralen Farbe aufbauen und geschmackvoll kombinieren.

Mein Lieblingsbeispiel für diesen Stil ist die Website der Fotografin Nora Lange:

Noras Website folgt dem Stil ihrer Arbeit: klare, elegante Fotografien von hochwertigen Produkten. Ihr Website-Stil basiert auf den Farben schwarz und weiß, die sie mit beige konsequent kombiniert.

Auf Design-Elemente verzichtet Nora vollständig und lenkt damit durch nichts von ihren Texten und Fotografien ab, die hier natürlich im Mittelpunkt stehen.

Den feminin-eleganten Website-Stil kannst du in jeder Nische verwirklichen, wenn es der Stil deiner Zielgruppe ist. Ganz besonders eignet sich dieser Stil in hochwertigen Nischen:

Mode/Schmuck
Beauty/Wellness
Architektur/Interior/Lifestyle
Design/Fotografie
Genussmittel

Moderner Website-Stil

Unter diesem Label findest du die meisten Websites von Soloselbstständigen. Der Website-Stil folgt dem erarbeiteten Branding, es gibt keine festen Regeln. Farben, Schriften, Design-Elemente und Motivwelten finden sich ebenfalls auf den jeweiligen Social Media-Accounts wieder.

Der moderne/junge Website-Stil orientiert sich dabei weniger an Webdesign-Trends: Die Positionierung steht im Mittelpunkt und wird auf allen Seiten, im Content und in allen Produkten durchdekliniert.

Hier sind drei Beispiele, die zeigen, wie unterschiedlich dieser Website-Stil aussehen kann.

Der moderne/junge Website-Stil nähert sich der Bildsprache der Sozialen Medien an: vor allem durch kleine Design-Elemente, wie z B. Herzen, Likes, Sternen, Blumen, organische Formen im Hintergrund oder das sogenannte Flat-Design.

Website und Social Media-Profile gehen Hand in Hand und ergänzen sich visuell und inhaltlich. Erlaubt ist, was der Zielgruppe gefällt.

Mit diesem Website-Stil liegst du in nahezu allen Nischen richtig:

Coaching/Beratung
Marketing/Online-Marketing
Design/Webdesign/Texten
Social Media/Social Media Mangement
VA-Business
Sport/Ernährung/Gesundheit

Romantisch-verspielter Website-Stil

Kerzen, Rüschen, Pastellfarben, feine Linien und verschnörkelte Schriften, ein Hauch von Boho oder Vintage: Der romantisch-verspielte Website-Stil hat eine riesengroße Fangemeinde. Und er ist voll und ganz weiblich, zart bis mädchen- oder märchenhaft.

Beim romantisch-verspielten Website-Stil stehen nicht allein die Farben im Vordergrund. Du kannst ihn hell oder dunkel realisieren. Wichtig hier sind die Zutaten, die wie beiläufig platziert werden und zugleich die Hauptrolle übernehmen.

So wie auf der Website von Anna und ihrem Hochzeitsdeko-Team von Miet me at the wedding:

Auf ihrer Website kombiniert Anna den hellen Hintergrund mit Beige- und Brauntönen, einer zarten Schnörkelschrift und den moody Fotografien von ihren Dekorations-Arbeiten und den gefeierten Hochzeiten.

Wenn du selbst der romantisch-verspielte Typ bist, kannst diesen Website-Stil in einer dieser Nischen verwirklichen:

Backen/Kochen
Produkte und Dienstleitungen rund um Romantik
Mode/Beauty/Styling/Wellness
Design/Fotografie

Dein Website-Stil ist dann authentisch, wenn du durch und durch so bist und dich nicht verbiegst!

Mit deinem Website-Stil erhält deine Website eine dicke Portion von deinem Charakter. Deshalb muss es zusammenpassen.

Wenn du eher der stille Typ bist, kannst du dies auf deiner Website umsetzen durch dezente Farben, unaufdringliche Schriften und sanfte Bilder.

Bist du extrovertiert und haust gerne mal einen raus, kannst du es auch auf deiner Website krachen lassen.

Dazwischen gibt es viele Schattierungen. Das macht die Sache nicht unbedingt leichter.

3 Möglichkeiten, wie du deinem Website-Stil näher kommst

Jetzt kommen wir endlich zu den Farben. Die richtigen Farben und Farbabstufungen für deinen Website-Stil zu finden, kann zu einer echten Mammut-Aufgabe werden – wenn du dich nicht entscheiden kannst und es von Anfang perfekt haben willst.

Ich kenne Business-Starterinnen und Unternehmerinnen, die an diesem Punkt hängen bleiben. Sie gehen auf die Suche und stecken wochen- oder sogar monatelang in Farbgeneratoren wie coolors.co fest.

Hierzu zwei Gedanken:

Vergiss Perfektion, denn dann wirst du niemals fertig. Starte besser unperfekt, damit du überhaupt weiterkommst.
Selbst wenn du mit den vermeintlich perfekten Farben startest, wirst du nach einigen Monaten merken, dass diese gar nicht so gut passen. Es wird der Zeitpunkt kommen, an dem du weißt, welche Farben zu dir passen und deinen Wunschkunden anziehen.

Starte mit einem (digitalen) Moodboard und entwickle so deinen Website-Stil

Ein Moodboard zu erstellen macht großen Spaß. Das Beste: du kannst einfach drauf los sammeln. Fotos, Grafiken, Zeichnungen, Zitate und Texte, Schnipsel aus Zeitschriften, Stoffe, Texturen …

Behalte unbedingt deine Nische im Hinterkopf. So wirst du nach und nach die Stimmung erhalten, die zu dir, deinem Thema und deiner Zielgruppe passt.

Ob du deine Sammlung digital anlegst (z. B. bei Pinterest) oder ob du dein Moodboard analog erstellst – auf dem Esstisch oder auf dem Fußboden – , bleibt dir überlassen.

Leg deinem Website-Stil ein Foto zugrunde, das dein Thema auf den Punkt bringt

Bilder sagen mehr als tausend Worte und es gibt kein besseres Medium, um eine Stimmung unmittelbar auszudrücken.

Hast du ein solches Bild, das der beste Repräsentant deiner Business-Basis ist? Dann nutze es als Grundlage für deinen Website-Stil.

Schreib auf, welche Stimmung es widerspiegelt.
Extrahiere die Hauptfarben aus dem Bild und lege eine dunkle Farbe als Schriftfarbe fest.
Recherchiere zur Stimmung eine passende Schrift für deine Fließtexte und eine dazu passende Schrift für deine Titel und Überschriften. Bedenke: Die Lesbarkeit schlägt den Look. Mehr dazu erfährst du in meinem Beitrag „So verbesserst du die Lesbarkeit deiner Website-Texte“.
Leite weitere Design-Elemente aus deinem Bild ab.

Geh ganz klassisch vor und lege deinem Website-Stil die Farbpsychologie zugrunde

Farben werden Charaktereigenschaften zugeschrieben und diese Zuschreibungen sind (im eigenen Kulturkreis) allgemeingültig. Zugleich nimmt jeder Mensch Farben unterschiedlich wahr. Nicht jeder mag die Farbe orange. Blau ist dafür sehr beliebt.

Das Marketing kennt dieses Dilemma der Farbpsychologie, nutzt die Bedeutung von Farben aber konsequent.

So steht blau z. B. für Seriosität und da wundert es nicht, dass die meisten Versicherungen und Banken auf blau setzen.

Aber: Blau ist nicht gleich blau! Und so kannst du deinem Website-Stil zwar ein „seriöses Blau“ zugrunde legen und dich zugleich von den typischen Versicherungsfarben abgrenzen.

#003EFF

#5787ED

#306ECB

#254F9E

#00AFFF

Für deinen Website-Stil brauchst du Farben:

die Primärfarbe
die Sekundärfarbe
die Akzentfarbe
die Textfarbe

Du kannst aber auch mit nur einer Primärfarbe deine Wow-Website aufbauen. Schau allein auf Netflix: Der Streaming-Gigant hat sich bei der Farbgebung seines Branding und seiner Website vom klassischen Kino inspirieren lassen und ein reines Rot als Farbe gewählt.

Damit bringt Netflix das Kinogefühl für Zuhause konsequent auf den Punkt.

Für deinen Website-Stil brauchst du eine Farbe, von der du die andere(n) Farbe(n) ableitest.

Hast du deine Primärfarbe gefunden, kannst du

als Sekundärfarbe einen abgeschwächten, helleren oder dunkleren Farbton auswählen.
als Akzentfarbe die im Farbkreis gegenüberliegende Farbe auswählen.

Hierzu gibt es natürlich unzählig viele Varianten. Aber du willst ja fertig werden und dich nicht wochen- oder monatelang mit diesem Thema beschäftigen.

Also: Mach’s dir leicht.

Schriften runden das Gesamtbild ab

Als wäre die Suche nach den besten Farben nicht schon eine krasse Aufgabe: Auch in Sachen Schriften ist die Auswahl gigantisch.

Neben websicheren HTML Fonts wie „Arial“, „Courier“, „Georgia“, „Helvetica“, „Palatino“, „Tahoma“, „Times New Roman“, „Trebuchet MS“ oder „Verdana“ findest du allein bei den Google Fonts → über 1000 Schriften, die zur freien Verwendung bereitstehen.

Und dann gibts da noch die weiteren Schriften, aus der Adobe Cloud*, von Creativemarket, von Unsplash, … Waaaaahnsinn.

Wenn du die Abkürzung nehmen willst, klicke hier zu meinem Artikel → „So kombinierst du Schriften“ mit 15 tollen Inspirationen für deine Website und Social Media.

Bilder, Bilder, Bilder

Regelmäßig die zum Website-Stil passenden Bilder zu finden, ist die Herausforderung schlechthin.

Grundsätzlich brauchst du Bilder von dir.

„Oh nein!“ könnte jetzt eine Reaktion von dir sein.

Kaum jemand liebt Bilder von sich selbst. Du siehst dich selbst ja nie so, wie andere dich sehen.

Du siehst dich nämlich meistens nur spiegelverkehrt in Spiegeln, in Fensterscheiben. Aber nicht so, wie du wirklich aussiehst.

Dein Spiegelbild ist für dich normal. Auf Fotos siehst du die Realität. Und daran musst du dich erstmal gewöhnen.

Du bist schön so, wie du bist.

Und ab einem gewissen Alter darfst du mit Photoshop & Co. der Frische ein wenig auf die Sprünge helfen.

Richtig tolle Tipps zum Thema → „Persönliche Fotos auf deiner Website“ bekommst du in diesem Beitrag.

Wenn das nächste Fotoshooting noch auf sich warten lässt, hast du zwei Möglichkeiten:

Du verzichtest auf aktuelle Bilder von dir und riskierst, dass deiner Website dein Gesicht und damit deine Persönlichkeit fehlt.
Du springst über deinen Schatten und nutzt aus deiner Sicht unperfekte Fotos von dir.

Allerdings: Sich selbst mit Selbstauslöser zu fotografieren ist nur auf den ersten Blick eine gute Idee. Versuch es mal und erzähl in den Kommentaren von deinen Erfahrungen!

Du brauchst zusätzlich regelmäßig Bilder, die deinen Content illustrieren.

Diese Bilder sollen gleich zwei Bedingungen erfüllen, denn sie sollen

zum Content passen
zum Website-Stil passen

Wenn du nicht selbst zur Kamera greifst, kannst in kostenlosen oder kostenpflichtigen Datenbanken für lizenzfreie Bilder (oder sogar Videos) nach den passenden Fotos suchen.

So kommst du ans Ziel: MACHEN!

Du musst nicht mit einer (perfekt) durchgestylten Website an den Start gehen. Wichtig ist, dass du überhaupt anfängst.

Je länger du in die Planung deiner Website investierst desto mehr Möglichkeiten werden sich dir eröffnen. Mehr Auswahl führt oft dazu, dass man sich irgendwann gar nicht mehr entscheiden kann.

Lies hier weiter:

Online-Business, Webdesign

Website planen in 3 Schritten

Als Riesenfan der "Einfach mal machen"-Strategie fällt es mir schwer dir zu sagen, dass dieses Mindset in Sachen Website-Aufbau leider nicht funktioniert. Im Gegenteil. Erfahre hier, wie du deine Website strategisch und in 3 einfachen Schritten planst, damit du deine Zielgruppe erreichst und Kunden gewinnst.

Content, Online-Business

Website vs. Social Media

Brauchen Selbstständige heute überhaupt noch eine eigene Website? Wo doch die Kommunikation zwischen Personenmarken und ihrer Zielgruppe über Social Media Kanäle wie Facebook, Instagram, TikTok & Co. stattfindet! Erfahre hier, wo die Vorteile und wo die Nachteile liegen.

Online-Business, Technik und Tools

Website erstellen in 10 Schritten

So kombinierst du Schriften

Sat, 02 May 2020 14:05:00 +0000

So kombinierst du Schriften
auf deiner Website
und in Social Media

Es war noch nie so leicht, aus einem schier unendlichen Fundus an Fonts die passende Schrift für die eigene Website auszuwählen. Doch gerade diese Auswahl macht es so schwierig. Es gibt allein über 2.000 Google Fonts, die kostenlos heruntergeladen werden und sofort genutzt werden können.

Hast Du bei einer einzelnen Schrift schon einmal ganz nach unten gescrollt? Neben den Infos zum Designer und der Wirkung der Schrift findest Du hier passende weitere Schriften, die Du als Überschrift und Fließtext ausprobieren kannst.

Auch 2020 kannst Du eine Serifen-Schrift mit einer klaren Sans Serifen-Schrift kombinieren. Du musst es aber nicht. Auch in Sachen Schriften gilt: Es gibt (fast) keine Regeln.

Hier findest du die Schrift für deine Website

Playfair Display und Source Sans Pro.

Dies war 2019 die Top-Kombination auf Websites. Mit ihrem traditionellen Stil ist Playfair Display sowohl elegant als auch zeitlos. Die Schrift von Claus Eggers Sorense kann mit einer Vielzahl serifen-loser Schriften kombiniert werden. Source Sans Pro stellt mit ihren klaren Linie einen schönen Kontrast zur stylischen Playfair her.

Miso und Open Sans.

Ohne Ecken und Kanten kommt die klare Miso daher und gleichzeitig setzt die architektonische Schrift von Mårten Nettelbladt ein eindeutiges Statement. Um die Schrift als Webfont zu nutzen, brauchst Du eine Lizenz www.fontspring.com. Hierzu passt die clean und neutrale Open Sans von Steve Matteson bestens.

Live-Webinar am 6. November

Von unsichtbar
zu ausgebucht!

Wie du mit der 3 Schritte Formel bei Google ganz oben stehst, von den KI-Tools empfohlen wirst und so Wunschkunden auf Autopilot gewinnst.

Elsie und Roboto

Elsie ist mit ihren sanften Serifen und fließenden Lettern eine bezaubernde Schrift. Sie ist modern, weiblich und ein absolutes Business-Statement. Zusammen mit der leichtgewichtigen Roboto spielt Elsie die Hauptrolle, ohne sich in den Vordergrund zu drängen.

Lora und Montserrat

Einen Hauch Hollywood-Glamour bringt die Serifen-Schrift Lora mit sich. Die Schrift hat ihre Wurzeln in der Kaligraphie und kann sowohl als Überschrift als auch als Fließtext genutzt werden. Perfekt zur Lora passt die beliebte Schrift Montserrat im urbanen Style.

Merriweather und Quicksand

Die Merriweather wurde speziell für die Darstellung auf Monitoren entwickelt. Sie bringt viele verschiedene Schriftschnitte mit und ist so auch allein universell einsetzbar. Als Schriftpaar zusammen mit der Quicksand kommt das Kantige sehr gut zum Vorschein. Die Quicksand setzt mit ihren Rundungen einen starken Kontrast.

Vollkorn und DIN Alternate

Die 2005 von Friedrich Althausen entwickelte Schrift ruhige und bescheidene Schrift Vollkorn ist mit ihren hüpfenden Serifen zeitlos in der Tradition der Brotschrift. Als Schriftpaar sind Vollkorn und DIN Alternate nahezu unschlagbar.

Roboto und Poppins

Das mechanische Skelett und die großen geometrischen Formen der Roboto machen die Schrift zu einem freundlich geschwungenen Erlebnis. Die ebenfalls geometrische Poppins mit ihren fast monolinearen Formen ist die perfekte Ergänzung zur Roboto.

Saira und Maven Pro

Mit der Saira setzt Du ein starkes Statement auf deiner Website und in deinen Social Media-Posts. Als serifenlosen Schrift wirkt sie modern und kann in allen Medien sowohl als Headline als auch als Fließtext genutzt werden. Die klare Maven Pro bringt die versteckten Stärken der Saira zum Vorschein.

Philosopher und PT Sans

Die universell einsetzbare Philosopher von Jovanny Lemonad ist schwer in Worte zu fassen. Die Buchstaben scheinen zu tanzen und sind zugleich klassisch. Die PT Sans basiert auf russischen serifenlosen Schriften und rückt mit ihrem Stil nahe an zeitgenössisches, humanistisches Design.

Anton und Oswald

Diese Schriften hat Vernon Adams entwickelt. Die Webfont Anton basiert auf traditionellen Werbeschriften und wurde speziell für die Darstellung im Internet geformt. Mit der Oswald schuf er eine klassisch-historische Schrift im Sinne der „Alternate Gothic“. Als Schriftpaar sind Anton und Oswald „partner in crime“, Freunde fürs Leben.

Noto Serif und Noto Sans

Die Schriftfamilie Noto wurde von Google entwickelt, um Darstellungsfehler von Schrift im Web zu eliminieren. Serifen und serifenlosen Schriften aus der Noto-Familie lassen sich in nahezu allen Sprachen zu außergewöhnlichen Looks kombinieren.

Rokkitt und Ubuntu

Rokkitt steht in der Tradition unverwechselbarer Slab-Serifen, die im späten 19. Jahrhundert populär waren. Die ultramoderne Ubuntu setzt einen logischen Kontrast zur starken Rokkitt und holt das Schrift-Design damit ins Hier und Jetzt.

Fira Code und Heebo

Eigentlich als Programmier-Schrift entwickelt, macht sich Fira Code in Kombination mit der cleanen Heebo aus, das Netz auch im sichtbaren Bereich zu erobern.

Wie du siehst:

Mit Schriften rundest du dein Webdesign ab und begeisterst deine Zielgruppe.

Weitere tolle Schriftpaare findest du auf fontpair.co.

Hast du eine wundervolle Schrift gesehen und weißt nicht, welche Schrift es ist: Auf WhatTheFont findest du es heraus.

Übrigens brauchst du keine zwei Schriften:

Du kannst mit einer Schrift in unterschiedlichen Schriftschnitten für den Wow-Effekt sorgen.

Über die Autorin:

Silke König, M.A.

Mehr über Silke …

Lies direkt weiter:

Online-Business, Webdesign

Website planen in 3 Schritten

Webdesign

Lesbarkeit deiner Website-Texte verbessern

Texte spielen auf deiner Website die Hauptrolle. Der Inhalt, was du schreibst, ist dabei genauso wichtig wie die Gestaltung des Textes auf deiner Website. Die Typographie sorgt für den ersten Eindruck. Und damit dafür, ob der User bleibt. Erfahre, wie du die Lesbarkeit deiner Texte verbesserst.

Online-Business, Technik und Tools

Website erstellen in 10 Schritten

Lesbarkeit deiner Website-Texte verbessern

Wed, 26 Feb 2020 18:19:28 +0000

So verbesserst du die Lesbarkeit
deiner Website-Texte

Über gute Typographie und schlechte Typographie.

Texte spielen auf deiner Website die Hauptrolle. Der Inhalt, was du schreibst, ist dabei genauso wichtig wie die Gestaltung des Textes auf deiner Website. Die Typographie als Teil des Webdesigns sorgt für den ersten Eindruck. Und damit dafür, ob der User bleibt (und liest, abonniert und kauft) oder ob er wegklickt. Erfahre, wie du die Lesbarkeit deiner Texte verbesserst.

Die Aufmerksamkeit des durchschnittlichen Website-Besuchers gleicht einem Toastbrot. Sorry, aber so ist es leider. Deshalb hast du nur wenige Sekunden, den User auf deiner Seite davon zu überzeugen, dass er bei dir das findet, was er gesucht hat.

Bleibt der User auf deiner Website, beginnt er zu scannen. Er überfliegt deine Seiten und Beitrage nach einer für ihn relevanten Überschrift, nach dem Absatz, der sein Problem löst. Er ist auf der Suche nach dieser einen Info. Das kann ein einzelner Satz sein.

Hat der User gefunden, wonach er gesucht hat, wird er zum Leser.

Mach es deinem User also besonders leicht, deine Inhalte zu erfassen.

Gestalte die Typographie auf deiner Website so, dass der User den Text gut lesen kann und nicht bloß scannt. Auf allen Endgeräten Desktop, Mobil und Tablet. Dann wird er zum Leser, zum Abonnenten, zum Käufer.

Verbessere die Lesbarkeit deiner Website-Texte durch deine Schriften

In der Regel wählst du zwei Schriften: eine für deine Überschriften und besonders hervorzuhebende Wörter oder Textelemente und eine für deinen Fließtext.

Der Klassiker auf Websites ist die Kombination von einer markanten Serifen-Schrift mit einer nüchternen und klaren serifenlosen Schrift.

Trendy als Akzentschriften sind verschnörkelte Handschriften. Aber Achtung: Verwende diese nur bei besonders hervorzuhebenden Wörtern oder kurzen Phrasen. Warum, erfährst du weiter unten.

Wichtig ist, dass sich deine Schriften nicht zu ähnlich sind, sondern sich gut ergänzen. Sie müssen natürlich zu deinem Thema und deinem Branding passen und sich stimmig in dein Webdesign einfügen.

Schriften für deine Website oder deine Social Media-Posts findest du auf diesen Seiten:

fonts.google.com

dafont.com

fontsquirrel.com

elements.envato.com

www.creativemarket.com

Wenn es dir schwer fällt, zwei Schriftarten auszuwählen, kannst du auch nur eine einzige Schrift mit verschiedenen Schriftschnitten (light, bold, italic, condensed, etc.) nutzen.

Live-Webinar am 6. November

Von unsichtbar
zu ausgebucht!

Wie du mit der 3 Schritte Formel bei Google ganz oben stehst, von den KI-Tools empfohlen wirst und so Wunschkunden auf Autopilot gewinnst.

Gestalte mit deinen Schriften Hierarchien

Untersuchungen zeigen, dass wir Internet-Nutzer weniger als 20% einer Website lesen. Und vielleicht kennst du das von dir selbst auch: Du kommst auf eine Website und orientierst dich dort zunächst anhand der Überschriften.

Mache dir das Suchverhalten des Users zunutze und lenke ihn gezielt zu deinen wichtigen Inhalten.

Diese Zeile liest du danach.

Zuerst liest du diese Überschrift.

Und zum Schluss das hier.

Wenn du dich nicht entscheiden kannst, musst du nicht krampfhaft nach zwei Schriften suchen.

Suche dir stattdessen eine Schriftfamilie, sorge mit den unterschiedlichen Schriftgrößen, Schriftschnitten und Strukturelementen für Orientierung:

Das ist eindeutig die Überschrift.

Mit deinen unterschiedlichen Schriftstärken sorgst du für Struktur.

Und so findet sich dein Website-Besucher gut bei dir zurecht und wird

regelmäßiger Leser
Abonnent
Käufer

Wichtig ist: Wenn alles hervorgehoben (bold) ist, ist nichts hervorgehoben.

Dies ist der Titel.
Das hier ist die Einleitung, der Teaser.
Hier beginnt der Fließtext.

So verbesserst du die Lesbarkeit deiner Website-Texte durch die Größe des Fließtextes und den Zeilenabstand.

Wir sind uns einig darüber, dass Überschriften hervorstechen müssen. Sie tun dies in der Regel durch die Schriftart- und -größe.

Wenn deine Überschriften die Kür sind, ist der Fließtext auf deiner Website die Pflicht. Hier findet dein Website-Besucher die für ihn relevanten Infos.

Sorge also dafür, dass er deinen Text vernünftig auf allen Endgeräten lesen kann. Hier siehst du den Unterschied:

Diese Schrift hat 14 px.

Diese Schrift hat 16 px.

Diese Schrift hat 18 px.

Diese Schrift hat 20 px.

Welche Schrift ist für dich am besten lesbar? Wie ist es am großen Monitor und wie am Handy?

Für eine gute Lesbarkeit ist der Zeilenabstand ebenfalls wichtig. Hierbei gilt die Regel: Je größer die Schrift, desto größer der Zeilenabstand.

Bei einer Schrift von 14 px reicht ein Zeilenabstand von 1,3 px aus. Aber wir haben ja festgestellt, dass der Text in dieser Größe sowieso nicht gut lesbar ist. Ich wollte dir dieses Beispiel aber nicht vorenthalten.

Die Schrift mit 16 px kommt mit einem Zeilenabstand von 1,4 px gut aus. Aber findest du die Schrift nicht auch noch zu klein, um einen längeren Text aufmerksam zu lesen?

Die 18 px große Schrift benötigt einen größeren Zeilenabstand. Mit 1,5 px kann man den Text gut lesen.

Bei dem Beispiel mit 20 px ist ein Zeilenabstand von 1,6 px optimal.

Setze für eine gute Lesbarkeit deiner Website-Texte auf Farb-Kontraste

Damit deine Website-Texte gut gelesen werden können, müssen sie sich optimal vom Hintergrund abheben. Gerade bei farbigen oder Foto-Hintergründen kann es wichtig werden, deine reguläre Schriftfarbe anzupassen.

Hier sind einige Beispiele:

Beim Kontrast geht es einzig und allein um die Lesbarkeit.
Überprüfe unbedingt, ob du diesen Fließtext auch aus ein wenig Entfernung noch gut lesen kannst.

Und wie oft siehst du auf Websites eigentlich Links in einer wirklich ungünstigen Schriftfarbe?

Natürlich kannst du wichtige Textstellen mit einer anderen Textfarbe hervorheben. Werde aber hier nicht zu bunt. Wähle neben deiner definierten Grundfarbe eine Akzentfarbe, mit der du entweder die Schrift selbst färbst oder aber den Hintergrund des Textes hervorhebst.

Gib deinem Text Freiraum – dann ist er besser lesbar

Für eine gute Schriftgestaltung solltest du deinen Texten Raum geben, leeren Raum.

Achte darauf, dass oberhalb und unterhalb von Überschriften, Slogans, Verkaufstexten mindestens 30 px frei bleiben.

Hast du deinen Text farbig oder mit einem Bild unterlegt, solltest du diesen Freiraum weiter erhöhen. Dann hängt der Text nicht zu nah an der Farbkante und sieht gleich wertiger aus.

Noch wichtiger ist aber der Raum rechts und links vom Text.

Sieh mal in der Tageszeitung oder in Zeitschriften nach. Dort verläuft Text nie über die gesamte Seitenbreite. In Printmedien wird Text in Spalten gesetzt. So ist er lesbar.

In Print und Web gilt die Regel: Text mit 8 bis 12 Wörtern pro Zeile ist optimal zu erfassen.

Selbst wenn dein Webdesign auf die volle Monitorbreite ausgerichtet ist, solltest du für deinen Text eine Breite von maximal 750 px definieren.

Wie gesagt: Auf Websites lesen wir anders. Wir alle sind Toastbrot.

Wenn dein Text über fast die gesamte Seitenbreite verläuft, ist das eine massive Wand. Eine Textwand, die den Lesefluss des Users, der ja eigentlich nur scannt, schnell erschlagen kann.

Bei mir selbst habe ich Folgendes schon oft beobachtet:

Ich beginne zu lesen. Schon beim zweiten Satz merke ich, wie sich mein Gehirn ausschaltet. Ich scrolle dann nur noch. Dann erscheinen tolle Fotos. Ich scrolle weiter bis ich am Ende der Seite ankomme. Was in dem Text nach dem zweiten Satz steht, kann ich nicht mehr aufnehmen. Und erst recht nicht verarbeiten.

Wenn dein Text rund zehn Wörter pro Zeile und oben,
unten, rechts und links Freiraum hat, kann dein Website-
Besucher ihn sehr viel besser lesen.

Ungefähr so wirkt ein Text, der auf voller Seitenbreite links und rechts lediglich 20 px Rand erhalten hat:

Versuche jetzt einmal diesen Text, der nahezu über die gesamte Monitorbreite verläuft, entspannt zu lesen und am Ende dieses superlangen Satzes (auch das noch!) noch bei der Stange zu bleiben und zu wissen, worum es eigentlich geht. Hinzu kommt, dass dieser Text in einer womöglich auch noch viel zu kleinen Schrift mit einem zu geringen Zeilenabstand gestaltet ist, was noch weitere Minuspunkte bei deiner Aufmerksamkeit mit sich bringt. Die Frage ist, wie lange schaffst du es, am Ball zu bleiben?

Positiv ist, dass in der mobilen Darstellung die Seitenbreite begrenzt ist. Achte aber bei der Schriftgestaltung für Smartphone und Tablet darauf, dass dein Text nicht links und rechts an den Seitenrändern hängt, sondern definiere auch hier einige Pixel Abstand.

Lass uns zum Schluss einmal die trendigen Hand- oder Caligraphieschriften anschauen

Vorneweg muss ich dir sagen, dass ich geschwungen Schriften à la Bellwethers, Cattclay (Laura Seiler nutzt diese Schrift) oder Hello Sunday wirklich toll finde.

Auf einer früheren Version meiner Website hatte ich mit der Schrift Passengers Scripts Highlights im Text gesetzt.

Wenn du eine Schnörkelschrift sparsam einsetzt, kannst du tolle Effekte damit erzielen. Du solltest aber unbedingt vermeiden, sie als Überschrift oder zum Hervorheben ganzer Sätze zu nutzen. Denn dann sieht das so aus:

Nutze verspielte Schnörkel- oder Caligraphieschriften nur sehr sparsam, denn sonst findet das entspannte Lesevergnügen auf deiner Website schnell ein Ende.

Wie du siehst, kannst du mit wenigen Tricks die Aufmerksamkeit deines Users unterstützen.

Wenn du dir nicht sicher bist, ob deine Website optimal in Sachen Nutzerfreundlichkeit aufgestellt ist, lass uns einen Blick auf deine Website werfen: Im 1:1 Mentoring gibt’s konkrete Hinweise und viele Aha-Momente.

*Die gekennzeichneten Links sind Affiliate-Links.
Wenn du über einen Link etwas kaufst oder ein Abo abschließt, erhalte ich eine kleine Provision. Am Preis für dich ändert sich nichts.
Ich empfehle grundsätzlich nur Tools, die ich selbst nutze und von denen ich absolut überzeugt bin.

Über die Autorin:

Silke König, M.A.

Mehr über Silke …

Lies hier weiter:

Online-Business, Technik und Tools

Google Fonts DSGVO-konform einbinden

Webdesign

So gestaltest du deine Buttons

Webdesign

Webdesign – Frau König Webdesign-Studio

Diese Bildgrößen brauchst du auf deiner Website

Diese Bildgrößen brauchst du auf deiner Website

- inklusive Übersicht der optimalen Bildgrößen zum Download!

Warum sind die richtigen Bildgrößen auf der Website so wichtig?

Lade deine Bilder in der Größe hoch, in der sie auf der Website angezeigt werden sollen.

Monitor- bzw. Display-Größen

Das sind die Bildgrößen für die volle Breite auf den verschiedenen Geräten (Stand 2026)

Wonach richtet sich die optimale Bildgröße auf der Website?

So rechnest du deine Bildgröße aus:

Das sind die optimalen Bildgrößen für deine Website:

Bild in voller Breite (full width), z.B. als Hintergrundbild:

Bild in voller Breite bei eingerückter Inhaltsbreite (boxed):

Bild im eingerückten Textbereich (z.B. Blogbeitrag):

2 Bilder nebeneinander (z.B. in einem Grid-Layout mit 2 Spalten):

3 Bilder nebeneinander (z.B. in einem Grid-Layout mit 3 Spalten):

4 Bilder nebeneinander (z.B. in einem Grid-Layout mit 4 Spalten):

kleines Bild/Icon in einem Grid-Layout mit 5 Spalten:

Lade dir die Übersicht der Bildgrößen kostenlos als PDF herunter:

Optimiere deine Website und natürlich deine Bilder für die mobile Ansicht und beachte hier unbedingt deine Bildgrößen.

So prüfst du deine Website auf verschiedenen Endgeräten

Was ist neben den Bildmaßen noch zu beachten?

Deine Bilddatei sollte nicht größer als 150 KB sein.

Wie komprimiere ich meine Bilder für die Website?

Ein Pro-Tipp zum Komprimieren deiner großformatigen Bilder:

Für welches Dateiformat entscheidest du dich?

Was ist WebP?

FAQ: Häufige Fragen zu Bildgrößen auf Websites

Welche Bildgröße ist für meine Website optimal?

Warum sollte ich Bilder vor dem Hochladen optimieren?

Was ist der Unterschied zwischen Bildgröße und Dateigröße?

Wie groß darf die Dateigröße eines Website-Bildes sein?

Welches Dateiformat ist für Website-Bilder sinnvoll?

Was passiert, wenn ich Bilder direkt vom Smartphone oder aus der Kamera hochlade?

Google Fonts in Elementor lokal einbinden

Google Fonts in Elementor lokal einbinden

So geht es nach dem Elementor-Update in zwei Klicks!

Darum sind Google Fonts so genial

In diesem neuen Mini-Tutorial erfährst du, wie du mit Elementor die Google Fonts easy peasy lokal auf deine Website bringst.

So bindest du die Google Fonts auf zwei Klicks in Elementor ein:

Schritt 1: Google Fonts in Elementor aktiveren

Schritt 2: Binde die Google Fonts lokal ein

Die Google Fonts sind jetzt in Elementor lokal eingebunden.

Hattest du bereits Google Fonts über ein Plugin oder direkt in Elementor Pro hochgeladen?

Wie kommen gekaufte Schriften in den Elementor?

Grundsätzliches zur Nutzung von Schriften auf deiner Website:

FAQ - Häufige Fragen zu Google Fonts in Elementor lokal einbinden

Wie kann ich Google Fonts in Elementor lokal einbinden?

Brauche ich Elementor Pro, um Google Fonts lokal zu laden?

Warum sollte ich Google Fonts lokal einbinden?

Muss ich die Google Fonts vorher herunterladen und hochladen?

Wie kann ich prüfen, ob meine Google Fonts wirklich lokal geladen werden?

Werden automatisch alle Google Fonts lokal gespeichert oder nur die tatsächlich verwendeten?

Was kann ich tun, wenn eine Schrift nach der Umstellung nicht mehr richtig angezeigt wird?

Website planen in 3 Schritten

Website planen: In 3 Schritten zur strategischen Website

Inhaltsverzeichnis

Warum ist eine Website-Planung wichtig?

Wann brauchst du ein Website-Konzept?

Welche Ziele soll deine Website erreichen?

Was möchtest du mit deiner Website erreichen?

Was ist das primäre Ziel deiner Website?

Was sind die Unterziele deiner Website?

Was bilden die definierten Unterziele deiner Website ab?

So planst du deine Website in 3 einfachen Schritten

Schritt 1: Definiere deine Business-Basis

Dein Wunschkunde ist die Hauptperson auf deiner Website. Richte alle deine Maßnahmen an ihrem Geschmack, ihren Fragen, Problemen und Zielen aus.

Schritt 2: Leg deinen Website-Stil fest

Die grundlegenden Fragen zum Website-Stil lauten:

Absolutes No Go in Sachen Branding:

Schritt 3: Skizziere die Struktur deiner Website

Website planen: Deine Extrameile zur Wow-Website

Insgesamt geht es bei deiner Website-Planung niemals nur um deine Website.

Was ist bei der Website-Planung noch wichtig?

Hier hilft das Prinzip „better done, than perfect!“.

Darum brauchst du kein Logo auf deiner Website

Darum brauchst du (erstmal) kein Logo auf deiner Website

plus 3 Logo Alternativen

NEIN! Du braucht (erstmal) kein Logo auf deiner Website!

Was sind die Nachteile eines selbstgebastelten Logos?

Website planen:
In 3 Schritten zur strategischen Website

So gestaltest du deine Buttons
wie ein Profi