In diesem Blogartikel zeige ich dir, wie du gleich hohe Spalten oder Boxen mit dem WPBakery Page Builder _{Affiliatelink} realisieren kannst.

Unregelmässig hohe Spalten durch den Inhalt

Wenn du, wie ich, regelmässig mit dem WPBakery Page Builder arbeitest, hattest du die folgende Situation bestimmt schon öfter. Du erstellst zwei oder mehr Spalten (Columns) nebeneinander, die unterschiedlich viel Inhalt, z. B. in Form von Text enthalten.

Dadurch wirken die Spalten im Vergleich zueinander unregelmässig.

Symmetrie wirkt harmonisch

In einem Design wirkt jedoch meist eine symmetrische Anordnung harmonischer und "sauberer". Gerade wenn es mehrere Spalten (Columns) nebeneinander sind, wirkt es schnell sehr unordentlich.

In manchen Fällen kann es natürlich gewollt sein, eine Form der Asymmetrie umzusetzen, aber wenn du nicht genau weisst, was du tust, dann vertrau im Zweifelsfall lieber auf ein ausgeglichenes Design. In diesem Fall gleich hohe Spalten.

Genügend Weissraum, um dein Design entfalten zu können

Ein weiterer wichtiger Aspekt beim Designen ist der Weissraum. Damit kann die "leere" (weisse) Fläche gemeint sein, aber auch grosse und helle Hintergründe definieren wir als Weissraum.

Wie wichtig der Einsatz von Weissraum ist, kannst du bereits erkennen, wenn du dir das nachfolgende Bild anschaust und es mit dem vorherigen Bild vergleichst. Du kannst unschwer erkennen, dass die Wirkung mit Platz zwischen den beiden Spalten direkt eine ganz andere ist.

Dadurch, dass die beiden Spalten nicht mehr aneinander "kleben", wirkt nicht nur das komplette Design professioneller, sondern jeder Spalte wird ihr eigener Platz zugestanden.

Alle Spalten in der Höhe gleichmässig ausrichten

Und hier siehst du, wie sich das Design nochmal um ein Vielfaches anders anfühlt, wenn nicht nur genügend Weissraum, sondern auch dieselbe Höhe für jede Spalte verwendet wurde.

Design ist nicht alles, auf den Content kommt es an

In diesem Beispiel ist der Unterschied zwischen der ersten Spalte mit einem Absatz und der zweiten Spalte mit drei Absätzen sehr gross. Wann immer möglich, solltest du versuchen den Inhalt so zu formulieren, dass er einigermassen dieselbe Länge hat.

Manchmal kann es auch sinnvoll sein, den Inhalt vertikal mittig zu zentrieren. Aber auch mit dieser Strategie wirst du zu grosse Unterschiede nicht wettmachen können. Daher beschränke dich lieber aufs Wesentliche bei deinen Texten.

WPBakery Page Builder: Spalten auf dieselbe Höhe bringen – so gehts

Ciao, a presto

Mary

Du möchtest deine Website selbst erstellen oder bist gerade dabei? Grossartig, dann bist du hier goldrichtig. Ich verrate dir sieben typische Fehler, die beim selbst erstellen einer Website oft passieren und wie du diese von vornherein vermeiden kannst.

Fehler Nummer 1: das falsche Content-Management-System (CMS), um deine Website selbst zu erstellen

Mit der Basis deiner Website, dem Fundament, steht und fällt alles. An diesem Punkt spielt es eine essenzielle Rolle, für welches Website-System du dich entscheidest. Und lass mich dir gleich hier einen wertvollen Tipp geben: Lass dich nicht von Baukastensystemen wie WIX, Jimdo, Squarespace und wie sie alle heissen, verführen.

Auf den ersten Blick scheinen die meisten ganz akzeptabel und die damit erstellten Demo-Websites sehen auch mehr oder weniger okay und stylisch aus, aber spätestens, wenn es daran geht, dein Business auszubauen, wirst du an deine Grenzen stossen.

Website-Baukastensysteme schränken dich immer ein

Bei einigen dieser Systeme kannst du nicht einmal ein Terminbuchungs-Tool deiner Wahl mit der Website verknüpfen. Das absolute Minimum, wenn es darum geht, von deinen Kund*innen gebucht zu werden!

Oder einen Newsletter … oft dasselbe Problem, dass die Verknüpfung entweder erst gar nicht möglich ist, zusätzlich kostet oder nur über technisch komplizierte Umwege realisierbar ist.

Entscheide dich besser gleich zu Beginn für eine Lösung, die kostenfrei ist, ständig erweitert wird, eine weltweite Community hat, die dir bei Fragen und Problemen weiterhelfen kann und bei der du die volle Kontrolle über wirklich alle Inhalte hast.

WordPress als optimales CMS (Content-Management-System)

Von welchem Website-System ich spreche? Von WordPress.org. The one and only.

⚠️ Wichtiger Hinweis an dieser Stelle: Es gibt zwei verschiedene WordPress-Versionen! Ich spreche immer von der WordPress.org-Version. Lies dazu auch meinen Blogartikel:

WordPress.COM und WordPress.ORG – was ist der Unterschied?

Fehler Nummer 2: ein falsches WordPress-Theme, das deine Website-Anforderungen nicht erfüllt

Sobald die Basis mit WordPress steht, wirst du dich für ein Theme entscheiden müssen. Es gibt kostenlose wie auch kostenpflichtige WordPress-Themes. Und auch hier rate ich dir von Anfang an, direkt in das richtige Theme zu investieren.

Und bitte jetzt keine Panik: Ich spreche nicht von hunderten Euronen! 💸 Die meisten gut programmierten Themes kosten zwischen zwanzig und achtzig Euro. Eins meiner absoluten Lieblings-Themes ist das "The7"-Theme von Dream-Theme _{Affiliatelink}. Es kostet lediglich 39＄ und ist darüber hinaus noch voll gepackt mit Premium-Plugins (kostenpflichtige Plugins), die allein gekauft die Kosten des Themes bereits um ein Vielfaches übersteigen würden.

Weshalb von Anfang an ein Premium-Theme statt ein kostenloses?

Well … lass mich ein wenig ausholen. Wenn WordPress das Fundament für deine Website darstellt, ist ein Theme gewissermassen der Rahmen. Sobald dieser Rahmen steht (du das Theme aktiviert hast), stehen dir verschiedene Einstellungen und Werkzeuge zur Verfügung, wie deine Website aussehen und funktionieren soll.

Beispielsweise, ob dein Design responsive ist. Also kurz gesagt, ob sich deine Website an alle möglichen Endgeräte, seien dies PCs, Tablets, Smartphones, u.s.w. auch anpassen wird. Oder aber auch, wie deine Buttons aussehen werden, deine Schriftarten, dein Menü, deine Kontaktformulare und vieles mehr.

Gehen wir einmal kurz davon aus, du startest mit einem nicht gut programmierten Theme. Und ob es gut oder schlecht ist, wirst du als nicht-Webdesigner*in mit ziemlicher Sicherheit erst viel zu spät bemerken, wenn überhaupt. Jedenfalls startest du mit diesem Theme und hast bereits viel Zeit und Arbeit in die Erstellung deiner Website gesteckt, bis du merkst, dass gewisse Funktionen oder das Design sich nicht so umsetzen lassen, wie du es benötigst.

Klar kannst du mithilfe von Tipps aus der WordPress-Community, hier übrigens ein ganz tolles Forum: https://forum.wpde.org, nun versuchen, diese ganzen Dinge anzupassen. Ob es klappt oder nicht, sei dahingestellt. Jedenfalls wird es dich viel Zeit kosten und oft dann auch Geld, weil du es allein wahrscheinlich trotz toller Tipps nicht hinbekommen wirst.

Kostenlose Website-Themes sind meist ein Schnupperangebot

Ich bin hier ganz ehrlich: Ich habe mit wirklich schon sehr vielen Themes gearbeitet und es ist mir bis heute kein einziges kostenloses Theme untergekommen, das ich dir empfehlen kann und von dem ich überzeugt bin, dass es deine Anforderungen an eine professionelle Business-Website erfüllen wird.

Die allermeisten sogenannten kostenlosen WordPress-Themes sind ein Schnupperangebot, um dann später doch die Vollversion zu kaufen. Stell es dir ähnlich vor wie eine kostenlose App, bei der du in relativ kurzer Zeit dann doch bezahlen müsstest, um die wirklich geilen Features nutzen zu können. 🙄

Daher: Mach diesen typischen Fehler nicht und entscheide dich von Anfang an für ein gescheites Theme, das dir ermöglicht, mit deiner Website so zu wachsen, dass dir keine Grenzen gesetzt werden.

Fehler Nummer 3: falsche WordPress-Plugins, die dich mehr Zeit kosten, als sie dir zu schenken

So ähnlich wie mit einem falschen Theme verhält es sich auch mit Plugins. Plugins sind Software-Erweiterungen, die dir schier unendlich viele Möglichkeiten geben, dein ohnehin schon powervolles WordPress um so ziemlich alle Funktionen zu erweitern, die du dir vorstellen kannst.

Aber auch hier gibt es einige Fehler, die du machen kannst und viele Stolpersteine. Denn einmal installiert, ist es unter bestimmten Umständen gar nicht mal so einfach, diese Plugins wieder zu entfernen, ohne dass deine Website Fehler aufweist.

Kleine Codeschnipsel auf deiner gesamten Website

Lass mich gerne auch hier ein Beispiel machen: Nehmen wir einmal an, du möchtest einen Newsletter in deinen Blog einbinden. Sagen wir, du entscheidest dich für den beliebten Anbieter, den ich übrigens auch nutze, ActiveCampaign _{Affiliatelink}. Dir gefällt das Design der Newsletter-Eintragungsformulare vom jeweiligen E-Mail-Marketing-Anbieter aber nicht und so entscheidest du dich für eines der unzähligen Plugins, die dir versprechen, dass du damit wunderschöne Formulare kreieren kannst.

So weit, so gut … aber nach einer gewissen Zeit merkst du, dass dieses Plugin eben doch nicht ganz alles kann, was du benötigst und du es gerne gegen ein anderes, besseres austauschen möchtest. Das Problem hierbei: Dein Newsletter-Plugin hat auf all deinen Seiten und Blogartikeln nun einen kleinen Code eingebaut, den du händisch wieder entfernen müsstest, um ihn gegen den neuen Code vom richtigen Plugin einzutauschen. Das kann bei wenigen Seiten schon mühsam sein, aber stell dir das mal bitte bei einem über die Zeit gewachsenen Blog vor. 😳

Versteh mich bitte nicht falsch: Plugins sind GENIAL! Ich liebe sie! Aber bevor du den Fehler machst und wahllos das erstbeste Plugin installierst, nur um dann später zu merken, dass es das Falsche war, nimm dir lieber die Zeit und informiere dich ausführlich.

Und wo wir schon dabei sind 😉, wenn dir meine Inhalte und Tipps gefallen, trage dich gerne in meinen Newsletter ein und erhalte in regelmässigen Abständen weiteren wertvollen Content.

Fehler Nummer 4: kein strategisches Brand-Konzept

Deine Website sollte von Anfang an einem Branding folgen, welches dich und deine Werte, aber auch die deines Businesses und deiner Zielgruppe bestmöglich repräsentiert. Zu einem Branding gehören aber nicht nur die passenden Business-Farben, ein abgestimmtes Schriftkonzept und die Bildsprache, es gehört einiges mehr dazu.

Um aber zunächst einmal mit deiner Website zu starten, reicht es, dir über diese Punkte klarzuwerden:

1. Welche Farben transportieren deine Message bestmöglich nach aussen, sodass sich deine Zielgruppe angesprochen fühlt?
2. Was für Schriften unterstützen deine Aussage und lassen deinen Charakter nach aussen dringen?
3. Welche Bilder, Grafiken, Symbole, … fügen sich in dein restliches Design ein und vermitteln, was du anbietest?

Wenn du dir über diese Punkte klar bist, halte dich auch daran. Mach nicht den Fehler und nutze einmal dieses Design, dann wieder ein anderes. Das verwirrt bloss und im schlimmsten Fall springen dir potenzielle Kund*innen ab, weil sie verwirrt werden.

Fehler Nummer 5: kein passendes Angebot, das deine Wunschkund*innen abholt

Ein Fehler beim Erstellen einer Website, der mir immer wieder auffällt, ist, dass entweder gar kein Angebot oder aber dann zu viele auf der Website sind. Damit du gebucht werden kannst, benötigst du zwingend – Trommelwirbel 🥁 – ein ANGEBOT. Und zwar nicht irgendein Angebot, sondern eines, das absolut klar und verständlich ist. Eines, das deine Wunschkund*innen abholt und ein Problem von ihnen löst.

Es ist nicht die Aufgabe deiner potenziellen Kund*innen, erst herauszufinden, was du ihnen denn bitteschön anzubieten hast. Nope. Es ist deine Aufgabe, dein Angebot so klar und verständlich zu machen, dass sogar ein Kind es versteht. Punkt.

Im Gegensatz dazu beobachte ich leider auch oft, dass viel zu viele Angebote auf einer Website vorhanden sind und interessierte Menschen so mehr oder weniger erschlagen werden von der Masse. Überlege dir genau, ob du wirklich zwei oder mehr Angebote bereitstellen willst, oder ob es nicht vielleicht Sinn ergibt, ein Angebot mit verschiedenen Variationen zusammenzustellen.

Überlege dir auch, ob alle deine Angebote wirklich direkt sichtbar sein müssen oder ob es nicht vollkommen ausreicht, insbesondere Folgeangebote erst dann anzubieten, wenn deine Kund*innen auch bereit dazu sind.

Kurzum: Überlege dir, wo deine Kund*innen wirklich stehen und welche Angebote sie sehen müssen und welche du ihnen gegebenenfalls zu einem anderen Zeitpunkt anbieten kannst.

Fehler Nummer 6: rechtliche Themen rund um deine Website und dein Online-Business

Jede Person mit eigener Website muss sich um das rechtliche Thema kümmern. Nichtwissen schützt vor Strafe nicht. Is so. Daher solltest du dich früh genug um diesen Aspekt kümmern, auf den ich hier nicht gesondert eingehen werde, da ich 1. keine Juristin bin und daher 2. keine Rechtsberatung geben darf und 3. das auch nicht will 😉.

Fehler Nummer 7: Perfektionismus

Zu guter Letzt ein Tipp zum Thema Perfektionismus. Ich oute mich hier mal als Perfektionistin und eben darum kann ich dir ein Lied davon singen. 🙈 Ich weiss genau, wie sich das anfühlt … hier noch etwas und da noch etwas und eigentlich würde doch dort noch … BASTA. Hör auf damit. Es lohnt sich nicht. Zumindest nicht zu diesem Zeitpunkt.

Wenn du deine Website erstellst, und auch Jahre später, wird es immer Dinge geben, die du noch besser, schöner, effizienter, … machen kannst. Und ja, bald wirst du die Zeit und das Geld haben, dies entweder selbst zu tun oder es eine andere Person machen zu lassen.

Aber jetzt gerade nicht. Jetzt gerade geht es darum, dass du deine Website erstellst und sie dann auch so schnell wie möglich veröffentlichst. Glaube mir, jede Sekunde, die vergeht und in der du dir überlegst, was noch zu tun wäre, bevor deine "perfekte" Website online gehen kann, vergrössert die Wahrscheinlichkeit, dass sie es niemals wird! Word.

Die Welt braucht mehr Frauen + FLINTA*, die mit ihren Businesses zu einem nachhaltig positiven Wandel beitragen. Also erstelle deine Website, bring sie online und rock dein Business. 🚀

Du wünschst dir Hilfe beim Erstellen deiner Website?

Wenn du dir Hilfe wünschst beim Erstellen deiner eigenen Website, kannst du entweder 1:1 mit mir arbeiten (Achtung: Stark limitierte Plätze im done-for-you) oder dich auf die Warteliste von meinem begleiteten Online-Kurs "Create your Website" eintragen.

Fazit

Ja, beim Erstellen deiner eigenen Website kannst du viele Fehler machen. Nun kennst du aber auch sieben typische Fehler und kannst vorbeugen. Ein Haus würdest du wahrscheinlich auch nicht aufs Geratewohl zusammenzimmern, oder? So ist es auch mit deiner Website. Investiere lieber etwas mehr Zeit und Geld in das Fundament und erfreue dich dafür ein Leben lang an einer funktionierenden und mitwachsenden Website.

Über 70 Punkte zum Abhaken, damit deine Website die richtigen Menschen von dir und deiner Expertise überzeugt.

Eine Website besteht aus vielen individuellen Einstellungen, die wichtigsten davon habe ich hier einmal als Website-Checkliste zusammengefasst, um dir Zeit zu sparen. Am besten gehst du diese Step-by-step durch und prüfst, ob du alles bereits umgesetzt hast. Oder noch Verbesserungspotenzial besteht.

Wenn du Fragen hast, schreib mir in die Kommentare. Und jetzt viel Spass!

Branding und Design

• Benutzt du dieselben Design-Elemente auf all deinen Seiten?
• Hast du die wichtigsten Informationen möglichst above the fold (vor dem ersten Scrollen) untergebracht?
• Ist das Design aufgeräumt und konsistent, wirkt also professionell?
• Ist deine Seite inklusiv und barrierefrei? Werden Bilder mit Alt-Texten versehen und nutzt du bspw. eine inklusive Sprache?
• Ist der Kontrast des Textes zum Hintergrund gross genug?
• Ist die Schriftgrösse auf allen Geräten gross genug und passt sie sich dem jeweiligen Endgerät an?
• Nutzt du ausreichend Bulletpoints (Listen) und selbsterklärende Icons?
• Nutzt du ausreichend farbliche Kontraste, um zwischen hellen und dunklen Bereichen zu unterscheiden?
• Nutzt du dieselben Schriften und Farben?
• Passen die verwendeten Bilder zu deinem Corporate Design und unterstreichen deine Message?
• Passt dein Design auch zu deiner Zielgruppe oder gefällt es in erster Linie dir selbst?
• Sind Buttons und Links klar als solche erkennbar und regen zum Klicken an?
• Sind grafische Elemente, wie z. B. Pfeile, Trennlinien, etc. so eingesetzt, dass sie deine Usys durch die Seite navigieren?

Datenübermittlung

• Sind erforderliche Felder klar ersichtlich ggü. optionalen?
• Informierst du deine Besuchys über die Verarbeitung aller – vor allem personenbezogener – Daten?
• Nutzt du das Double-Opt-in-Verfahren für Newsletter-Eintragungen? Ich empfehle dir als Newsletter-Provider ganz klar "Active Campaign" _Werbelink.
• Nutzt du eine verschlüsselte Datenübertragung mittels eines Sicherheitszertifikates?
• Sind deine Formulare gegen Spam und Malware abgesichert? Lies hierzu auch: WordPress: DSGVO-konformer Spamschutz für das Contact Form 7-Kontaktformular
• Verarbeitest du nur Daten, die du nach der DSGVO auch abfragen darfst? Hier möchte ich dir wärmstens Sabrinas Online-Kurs: "DSGVO Masterkurs" _Werbelink empfehlen.

Kontakt und E-Recht

• Bietest du mehrere Wege für eine Kontaktaufnahme an? Und ist dies sofort ersichtlich?
• Hast du datenschutzkonforme Share-Buttons zum Teilen deiner Inhalte eingebaut? Das Plugin "Shariff Wrapper" ermöglicht dies beispielsweise.
  
• Hast du deine Social-Media-Accounts alle verlinkt?
• Hast du ein rechtsgültiges Impressum hinterlegt?
• Hast du in deiner Datenschutzerklärung alle von dir genutzten Tools und insbesondere alle Anbieter, die personenbezogene Daten verarbeiten, aufgeführt?
• Ist die Seite SSL / TLS-verschlüsselt?
• Ist sowohl deine Datenschutzerklärung, wie auch dein Impressum von jeder Seite aus mit einem Klick erreichbar?
• Nutzt du ein DSGVO-konformes Cookie-Consent-Banner, welches erst Cookies setzt, wenn deine Website-Besuchys aktiv eingewilligt haben? Hier empfehle ich dir das "DSGVO Pixelmate"-Plugin _Werbelink von Christian.
• Sind nur DSGVO-konforme Plugins und Software im Einsatz?

Navigation und Usability

• Hast du deine Buttons und Links aussagekräftig beschriftet?
• Hast du dich für eine überschaubare und sinnvolle Anzahl an Menüpunkten und Unterseiten darin entschieden?
• Hat deine Website eine klar aufgebaute Struktur und deine Besuchys finden sich selbsterklärend zurecht?
• Ist deine Navigation auch in der responsive Ansicht optimiert?
• Ist für deine Besuchys jederzeit klar, wo auf deiner Website sie sich gerade befinden?
• Können deine Website-Besuchys jederzeit mit einem Klick zur Startseite zurücknavigieren (ausgenommen Landing-Pages)?
• Nutzt du klare Bezeichnungen in deinem Menü, statt ausgefallener Begriffe?
• Nutzt du klare Call-to-Action (Handlungsaufforderungen)?
• Nutzt du verständliche und deine Aussage unterstützende Icons als Hilfe?

SEO / Suchmaschinenoptimierung

• Achtest du darauf, keinen "Duplicate Content" zu verwenden?
• Haben alle deine Bilder einen Alt-Text und Beschreibungstext?
• Hast du für geänderte Permalinks Redirects eingerichtet? Mit dem Plugin "Redirection" geht das easy.
  
• Hat deine Website eine Sitemap?
• Hat jede Seite eine H1-Überschrift mit den wichtigsten Keywörtern?
• Hat jede Seite und jeder Blogartikel einen einzigartigen Titel?
• Hat jede Unterseite und jeder Blogartikel ein eigenes Keyword, wofür gerankt werden soll?
• Kommt das Haupt-Keyword im Titel, den Überschriften, Absätzen, sowie in Bildbeschreibungen vor?
• Können Suchmaschinen wie Google die Seite korrekt indizieren?
• Leiten fehlerhafte Seiten (404-Errors) auf die Hauptseite oder eine eigens dafür eingerichtete Seite?
• Nutzt du eine Analyse-Software wie z. B. Google Analytics oder Matomo?
• Nutzt du für deine Dateien eine klare Bezeichnung? Siehe hierzu auch meinen Blogartikel: So benennst du Dateinamen korrekt für WordPress
• Nutzt du sprechende URLs?
• Wurden die Metadaten korrekt eingetragen? Hierfür eignet sich z. B. das Plugin "Yoast SEO"
  

Technik

• Funktioniert deine Website auf allen Browsern und mit allen Endgeräten?
• Hast du die korrekte Sprache, Zeitzone und das korrekte Datumsformat hinterlegt?
• Hast du ein Favicon hinterlegt?
• Ist das mobile Menü optimiert?
• Ist die Ladezeit deiner Webseiten geprüft?
• Können Menschen mit Behinderungen die Website gut bedienen?
• Lässt sich deine Website mit Touchscreens mühelos bedienen?
• Werden CSS, JavaScript, HTML und Co. korrekt zusammengefasst und ggf. gecacht? Mit dem Plugin "WPRocket" _Werbelink ist das z. B. möglich.
• Werden eingebettete Schriftarten korrekt eingebunden?

Texte und Content

• Hast du deine Inhalte auf Rechtschreibfehler, korrekt gegenderte Formen und inhaltliche Richtigkeit geprüft?
• Ist dein Text übersichtlich formatiert? Überschriften wie H1, H2, H3, usw., ausreichend Absätze, gegliederte Listen, wichtige Formulierungen hervorgehoben, etc.?
• Ist die Qualität bei Fotos und Grafiken hochwertig und nicht verpixelt? Auch bei Retina-Bildschirmen?
• Nutzt du reichlich grafische Elemente, um Textwüsten zu vermeiden und das Auge der lesenden Person abzuwechseln?
• Sind Bilder im korrekten Format hochgeladen und komprimiert?
• Sind deine Texte einfach und verständlich? Achte auf eine laiengerechte Sprache statt Fachjargon!
• Sind die eingebetteten Medien barrierefrei? Untertitel, Alt-Texte, Screenreader-optimiert?
• Werden Videos auf einer Video-Plattform wie z. B. Vimeo _Werbelink oder YouTube und Audios auf einer Audio-Plattform gehostet und korrekt eingebunden?

Uff, das waren nun doch einige Punkte, die hier zusammengekommen sind. Das sind natürlich bei Weitem nicht alle und ich werde die Liste immer mal wieder erweitern. Trage dich am besten gleich in meine #BrandNews ein, wenn du über zukünftige Updates informiert werden möchtest.

Fehlt dir och etwas oder hast du Frage zu einem Punkt? Dann schreib es mir in die Kommetare.

Deine Mary

WPBakery Page Builder – mein Favorit

Du willst deine WordPress-Seite ansprechend und harmonisch gestalten? Dann ist ein Page Builder genau das Richtige für dich. Damit kannst du ganz ohne Programmierkenntnisse per Drag-and-drop individuelle Layouts und Designs erstellen. Und heute verrate ich dir warum das WordPress-Plugin "WPBakery Page Builder" _{Affiliate-Link} mein absoluter Favorit ist und ich alle meine Website-Projekte damit aufsetze.

Was ist ein Page Builder-Plugin überhaupt?

Ein Page Builder ist ein WordPress-Plugin, mit dem du deine Seiten und Blogbeiträge gestalten und bearbeiten kannst. Und zwar in einem weitaus grösseren Umfang, als dies mit dem WordPress-Editor möglich wäre. Statt des von Haus aus mitgelieferten WordPress-Editors nutzt du dann den Funktionsumfang des Page Builders.

Du ziehst per Drag-and-drop die gewünschten Elemente, wie z. B. ein Bild, einen Button, Text u.s.w. an ihren Platz und siehst sofort wie das Endergebnis aussehen wird.

Grundsätzlich lassen sich die Page Builder Elemente in drei Komponenten unterscheiden:

• Row (Zeilen): Quasi Container, in welchen innerhalb weitere Elemente angeordnet werden und die untereinander stehen
• Column (Spalten): In jeder Row (Zeile) können ein oder mehrere Columns (Spalten) existieren
• Element (Elemente): In jeder Column (Spalte) können wiederum mehrere oder einzelne Elemente platziert werden

Als Erstes legst du eine Zeile an und definierst, wie viele Spalten diese haben soll. In diese Spalten ziehst du dann die gewünschten Elemente und kannst sowohl die Zeilen, Spalten als auch die einzelnen Elemente ganz individuell an deine Bedürfnisse anpassen.

Ersetzt ein Page Builder ein Theme?

Nein. Ein Theme brauchst du immer als Basis. Dazu eignen sich sowohl die kostenlosen Themes, wie auch Premium-Themes, also Themes, die einen gewissen Beitrag kosten.

Ich persönlich nutze gerne das The7 Premium WordPress Theme _{Affiliate-Link}. Es ist unglaublich flexibel und beinhaltet obendrauf diverse Premium-Plugins, darunter auch den WPBakery Page Builder _{Affiliate-Link}, für den du alleine bereits mehr bezahlen würdest als für das Theme und um den es in diesem Blogbeitrag geht.

Viele Themes sind mittlerweile vorbereitet für Page Builder, damit du das Maximum herausholen kannst. Achte daher beim Kauf oder der Auswahl darauf, ob sie kompatibel sind mit dem WPBakery Page Builder und frage im Zweifelsfalle den Theme-Autor.

Ist ein Page Builder ein Website-Baukasten?

Nein. Page Builder stehen entweder als eigenständige Plugins zur Verfügung, die man mit den meisten gut programmierten WordPress-Themes verwenden kann oder aber als integrierter Bestandteil eines Themes und können dann auch nur mit diesem Theme verwendet werden.

Ein Website-Baukasten hingegen ist immer ein eigenständiges Tool, welches auf den jeweiligen Anbieter bezogen ist und auch nur auf dessen Oberfläche läuft. Beispielsweise Joomla, Jimdo, Wix u.s.w. Man ist bei solchen Baukästen also komplett abhängig von deren Leistungsangebot und individuelle Anpassungen können meist nur sehr mühsam, wenn überhaupt realisiert werden.

Ist der Gutenberg-Editor ein Page Builder?

Nicht wirklich … Der Gutenberg-Editor geht zwar bereits in die Richtung eines Page Builders, bietet aber im Vergleich nur sehr beschränkte Möglichkeiten. Ich bin sicher, dass er in Zukunft noch erweitert wird, aber an einen eigens dafür geschaffenen Page Builder wird er wohl noch sehr lange nicht herankommen. Ich persönlich bin ehrlicherweise auch überhaupt kein Fan vom Gutenberg-Editor und benutze nach wie vor den Classic-Editor. Wie übrigens viele meiner "Kolleg*innen" auch.

Was kann ein Page Builder also?

Mit einem Page Builder kannst du so ziemlich alle Elemente deiner Website Design-technisch gestalten und sogar neue Funktionen hinzufügen. Einzig das verwendete Theme limitiert dich ggf. hierbei. Du erhältst so also die Möglichkeit, so ziemlich alle Bereiche deiner Website wie Seiten, Blogartikel, u.s.w. zu gestalten. Und auch dem Erstellen von Landing-Pages, Sales-Pages, etc. steht nichts mehr im Wege.

Mit dem WPBakery Page Builder _{Affiliate-Link} hast du auch die Option deine Änderungen in Echtzeit zu sehen, wenn du den Frontend-Modus aktivierst. Du siehst also direkt dein Ergebnis, ohne vorher die Seite aktualisieren zu müssen. Und das Ganze selbstverständlich ohne eine Zeile Code programmieren zu müssen. Wobei dir auch diese Option offensteht. Du kannst natürlich alle Elemente mittels CSS, HTML oder JavaScript noch mehr an deine Bedürfnisse anpassen.

Der WPBakery Page Builder vorgestellt

Nach dem Erstellen einer Seite oder eines Blogartikels hast du die Wahl zwischen dem Frontend-, Backend- oder Gutenberg-Editor. Je nachdem für welche Editor-Version du dich entscheidest, geht es dann auch schon los mit dem Bearbeiten deiner Inhalte.

Als Erstes wählst du das Layout entweder anhand vorgefertigter und mitgelieferter Vorlagen aus oder beginnst bei null und lässt deiner Fantasie freien Lauf. Durch einen Klick öffnen sich alle zur Verfügung stehenden Elemente und du kannst nun frei entscheiden, welche davon du einsetzen möchtest.

Dabei kannst du entweder dein WordPress-Theme als Basis benutzen, also z. B. den Header, Footer, die Navigation und ggf. die Sidebar übernehmen und "nur" den Inhalt gestalten oder aber du startest "from scratch", also mit einer komplett leeren Seite und von Grund auf neu.

Vorlagen und Templates des WPBakery Page Builder

Der WPBakery Page Builder _{Affiliate-Link} bringt dir eine Vielzahl an Vorlagen für alle möglichen Einsatzgebiete mit. Du kannst die Website-Templates mit einem Klick aktivieren und diese dann ganz nach deinen eigenen Bedürfnissen weiter gestalten.

Darüber hinaus gibt es unzählige Plugins, die es dir ermöglichen noch mehr Templates hinzuzufügen. Dabei gibt es sowohl kostenlose als auch kostenpflichtige.

(Kleiner Werbespoiler an dieser Stelle: Für die Businessladys meiner "Holistic Brand- & Business-Academy" gibt es regelmässig neue Website-Templates für alle möglichen Webseiten.)

Responsive Webdesign mit dem WPBakery Page Builder

Selbstverständlich kannst du mit dem WPBakery Page Builder _{Affiliate-Link} alle deine Designs responsive gestalten. Und das ist auch essenziell, denn Google straft dich schneller ab, als du "Ranking" sagen kannst, wenn deine Website nicht "mobile first" gestaltet ist! Mit dem Plugin kannst du alle deine Webseiten so gestalten, dass sie auf allen Endgeräten – z. B. Smartphones, Tablets, Desktops, … – gut aussehen und funktionieren.

Na? Lust bekommen deine Website upzugraden?

Wie du siehst, bietet der WPBakery Page Builder _{Affiliate-Link} unzählige Möglichkeiten, deine Website ganz nach deinen Bedürfnissen und den Wünschen deiner Kund*innen zu gestalten. Und ich mache keinen Hehl daraus, dass ich begeistert von diesem WordPress-Plugin bin und es auch bei jedem Projekt meiner Kundinnen einsetze.

Und solltest du von diesen vielen Optionen immer noch nicht genug haben, stehen dir noch ganz viele Add-ons zur Verfügung, die dem Page Builder noch mal zahllose weitere Möglichkeiten hinzufügen. Aber dazu schreibe ich ein anderes Mal.

Na? Lust bekommen, deiner Website ein Upgrade zu verpassen? Hier findest du den WP Bakery Page Builder zum Downloaden _{Affiliate-Link}.

Deine Mary

Padding, margin, border… What?!

Ich weiss noch, wie ich mir Fresszettel an meinen Mac klebte. Nur so konnte ich mir den Unterschied zwischen padding und margin merken 😂.

Gerade bei Page- oder Website-Builders, z.B. meinem allerliebsten "WPBakery Page Builder" _Affiiatelink, aber auch bei Newsletter-Tools wie z.B. Active-Campaign _{Affiliatelink} werden diese Eigenschaften regelmässig benötigt. In diesem Artikel habe ich die verschiedenen Eigenschaften versucht so einfach wie möglich zu erklären, damit du dir ab jetzt deinen Kopf nicht mehr zerbrechen musst.

Let’s go!

Padding, Margin, Border – in einer Grafik erklärt

Zur Veranschaulichung stell dir bitte vor, dass jedes Element deiner Website, also z.B. Text, ein Bild, ein Button, ein Icon, usw., aus jeweils einem Block, ein sogenannter "Container" besteht.

Padding

Mit padding wird der erzwungene Innenabstand (padding = engl.: Polsterung) zwischen dem Inhalt (im oberen Beispiel das weisse Quadrat) und seiner eigenen Grenze (border) gemeint. Wäre kein padding da, würde der Text direkt am border "kleben".

Für jede Richtung einen padding-Wert

Wenn es nur eine Einstellung gibt, dann kannst du davon ausgehen, dass der Wert für alle "Richtungen" gleichermassen zählt. Hast du hingegen die Option, verschiedene Werte einzutragen, gibt es:

• padding-top (oberer Abstand)
• padding-right (rechter Abstand)
• padding-bottom (unterer Abstand)
• padding-left (linker Abstand)

Meist eignen sich hier prozentuale Angaben (%) besser als statische Angaben wie z.B. px (Pixel), damit auf allen Endgeräten (von PC bis Smartphone) das Ergebnis responsive bleibt.

Border

Unter border versteht man die Elementgrenze. Im Beispiel unten siehst du den border-Wert als Rahmen um den "Button". Wenn beim border kein Wert definiert wird, sieht man ihn auch nicht (es gäbe dann keinen Rand, sondern wäre einfach pink).

Damit man ihn sieht, musst du zusätzlich zum eigentlichen Wert wie z.B. 1px, auch den Stil definieren. Folgende Stile gibt es:

Zusätzlich hast du bei border die Möglichkeit einen Rahmenradius zu vergeben. In der Grafik siehst du, was die verschiedenen Werte, angefangen bei 5px aufsteigend bis zu 35px, für eine Auswirkung haben. Die Ecken des borders werden also abgerundet.

Für jede Seite einen border-Wert

Wenn es nur eine Einstellung gibt, dann kannst du auch hier davon ausgehen, dass der Wert für alle "Seiten" gleichermassen zählt. Hast du hingegen die Option, verschiedene Werte einzutragen, gibt es:

• border-top (oberer Rahmen)
• border-right (rechter Rahmen)
• border-bottom (unterer Rahmen)
• border-left (linker Rahmen)

Hier eignen sich meist statische Angaben wie z.B. px (Pixel). Hierbei ist 1px das Minimum was definiert werden muss, damit der Rahmen sichtbar wird.

Margin

Mit Margin (Spanne, Marge) bezeichnet man den Aussenabstand eines Elements. Also der erzwungene Leerraum zwischen dem aktuellen Element und seinem übergeordneten Elternelement bzw. seinen Nachbarelementen.

Die margin Eigenschaft ist immer transparent. Du kannst sie also nicht gestalten, sie dient lediglich dem Layout. Du kannst mit negativen Werten wie -50px auch Überlappungen der Elemente erreichen, wobei hier dann auch der z-index eine Rolle spielt, worauf ich in diesem Artikel nicht eingehe.

Für jede Seite einen margin-Wert

Wenn es nur eine Einstellung gibt, dann kannst du hier ebenfalls davon ausgehen, dass der Wert für alle "Seiten" gleichermassen zählt. Hast du hingegen die Option, verschiedene Werte einzutragen, gibt es:

• margin-top (oberer Aussenabstand)
• margin-right (rechter Aussenabstand)
• margin-bottom (unterer Aussenabstand)
• margin-left (linker Aussenabstand)

Hier eignen sich numerische Angaben wie z.B. px (Pixel) am besten. Wie bereits oben schon erwähnt, kannst du aber auch negative Werte mit einem "-" davor, also z.B. -20px, verwenden um den Aussenabstand zu verringern und so ggf. eine Überlappung von Elementen zu erreichen.

Zusammenfassung

Padding = Erzwungener Innenabstand bis zur eigenen Elementgrenze. Prozentuale (%) Angaben meist besser geeignet.

Border = Elementgrenze. Nur sichtbar, wenn zusätzlich ein Stil definiert wird und ein numerischer Wert (px). Mit einem Radiuswert können die Ecken abgerundet werden.

Margin = Erzwungener Aussenabstand bis zum nächsten Element. Hier können auch negative Werte (-50px) verwendet werden, um den Abstand zu verringern.

Natürlich gäbe es hier noch einiges mehr zu schreiben. Da ich mich mit diesem Blogartikel aber an Solopreneurinnen richte und nicht an Webdesignerinnen ;-), halte ich es so einfach wie möglich. Für die meisten Situationen in der täglichen Arbeit mit deiner Website sollten diese Angaben ausreichen.

A presto!

Deine Mary

Alle Elemente, die du für deine Landing-Page benötigst zusammengefasst.

Hast du dich auch schon gefragt, welche Bestandteile eine perfekte Landing-Page haben sollte? Da bist du nicht allein und weil ich das jetzt schon mehrfach gefragt wurde, habe ich hier eine Zusammenfassung für dich geschrieben.

Ja, okay ich gebe es zu, der Begriff "perfekt" ist vielleicht ein wenig "reisserisch". Aber im letzten Pimp-Talk mit einer Kundin hat sie den Begriff so oft genannt, das konnte ich schlichtweg nicht ignorieren. Wie immer gilt: Pick dir die Rosinen raus (ich mag die ja nicht mal) und pass alles an deine Brand an. Here we go!

Key Visual oder Angebotsbild

Ganz oben auf deine Landing-Page als Erstes gehört das Key Visual. Eine Grafik, die dein Angebot bestmöglich darstellt und beim ersten Blick bereits vermittelt, was einem erwartet. Es hat den einzigen Auftrag, die Atmosphäre und das Gefühl zu transportieren, das man als Kundin/Kunde bekommt, nachdem man bei dir gekauft hat.

Idealerweise ist das ein Bild, auf welchem du selbst zu sehen bist. Z. B. bei einem Coaching-Gespräch, wenn du Coach bist oder dem Entwerfen von einem Schnittmuster, wenn du Schneiderin bist.

Wenn du ein Produkt verkaufst, wie z. B. ein E-Book, kann das gerne auch ein sogenanntes Mockup sein, eine grafische 3D-Darstellung deines digitalen Angebots. In diesem Beispiel also ein Buch. Wenn du es auf dem Bild noch zusätzlich selbst präsentierst, es z. B. in Händen hältst, liest, … , umso besser!

Ein schönes Symbolbild, Stockfoto genannt, tut es aber auch und ist manchmal sogar – vorausgesetzt es wird sorgfältig ausgewählt, die klügere Alternative, wenn keine qualitativ guten Fotos vorhanden sind.

Der Angebotstitel

Dass der Titel von deinem Angebot möglichst konkret und selbsterklärend sein sollte, liegt auf der Hand. Ein Titel wie: "Deine Website für mehr Kunden" macht schnell klar, was man bekommt und trägt zusätzlich noch das Endergebnis mit sich.

Überschriften, die dagegen lauten: "Glücklich und zufrieden leben" sind so unanschaulich, dass sie alles und nichts aussagen. Man hat keine Ahnung, was einem denn nun genau hier angeboten wird.

Der Titel auf deiner Landing-Page sollte so lang wie nötig und kurz wie möglich sein. Im Titel sollte auch das wichtigste (Long Tail)-Keyword enthalten sein, für das du mit dieser Seite gefunden werden möchtest.

Untertitel von deinem Angebot

Der Untertitel ist dann die Auflösung. Du erklärst hier knapp, um was es genau geht. Das kann z. B. die Dauer sein (90 Min. Einzelcoaching per Zoom), der Effekt, den dein Angebot auslöst (straffe Gesichtsmuskeln auch im Alter), ein Call-to-action (jetzt ihre Offerte anfordern) oder eine Mischung wie z. B. "12-wöchiger Onlinekurs für Solopreneurinnen".

Kombination aus Key Visual, Titel, Untertitel und Call-to-action

Du kannst auch direkt auf deinem Key Visual den Titel und Untertitel unterbringen und zusätzlich, wenn es zu deinem Angebot passt, den Call-to-action dort setzen, sei dies in Textform oder als Button.

Call-to-action

Ein Call-to-action ist, wie der Name schon sagt, eine Aufforderung zur Handlung. Du forderst also dazu auf, etwas Bestimmtes zu tun. Dies kann ein Kauf, eine Terminvereinbarung, eine Eintragung in den Newsletter, das Verfassen eines Kommentars, usw. sein, alles, was jemand jetzt tun soll. Ein Call-to-action sollte sich immer abheben vom restlichen Design und optimalerweise einheitlich gestaltet werden auf deiner ganzen Website. Er soll ins Auge fallen und ein Eyecatcher sein.

Wähle die Call-to-action sorgfältig und passend zu deinem Angebot aus.

Zu viele Call-to-action auf einer Landing-Page?

Eine grosse Sorge von vielen, auch meinen Kundinnen, ist, zu viele Call-to-action zu benutzen und so die Interessentinnen und Interessenten abzuschrecken. Bedenke hierbei aber bitte Folgendes: Wenn jemand bereits nach zwei Absätzen genug Informationen hat und dein Angebot in Anspruch nehmen will, wird es auch an der Stelle auf der Landing-Page seine Handlung vornehmen und nicht mehr weiterscrollen und lesen.

Wenn er aber noch mehr Informationen braucht, wird er weiterscrollen und daher ist es wichtig, regelmässig Call-to-action zu setzen und somit überhaupt die Möglichkeit zu bieten, dann auch zu kaufen, wenn dein potenzieller Kunde / deine potenzielle Kundin kaufbereit ist.

Bedenke auch, dass Sekunden im Netz Gold wert sind und wenn ich jetzt buchen möchte und mich zuerst noch eine gefühlte Ewigkeit durch eine Seite scrollen muss, bis ich dann irgendwo endlich eine Option zum Kaufen finde, vielleicht schon vorher entnervt die Website verlasse und nie wieder komme.

Die Call-to-action müssen zum Angebot passen

Was bei Call-to-action aber sehr wichtig ist, dass sie passend gewählt werden. Überlege dir, wie sich dein*e Interessent*in fühlt beim Lesen dieses Abschnitts und was die nächste logische Folge im Verhalten wäre. Nehmen wir als Beispiel den Satz "Wünschst du dir auch schon lange, nur noch mit deinen absoluten Wunschkunden zu arbeiten?", wäre hier ein logischer Call-to-action "Ja, das wünsche ich mir!" oder "Ja genau, zeig mir wie!". Verstehst du, was ich meine? Baue Brücken und setze nicht wahllos "Befehle" ein.

Beginne mit "weichen" Sätzen und baue dann, je länger die Landing-Page wird, auf und werde konkreter in der Aufforderung. Du kannst bei jedem Call-to-action etwas offensiver werden, achte aber immer auf eine angemessene zu deiner Marke passende Sprache.

Als Beispiel:

1. CTA = Termin vereinbaren
2. CTA = Jetzt Termin vereinbaren
3. CTA = Vereinbare jetzt einen Termin
4. CTA = Warte nicht mehr länger und vereinbare gleich jetzt einen Termin
5. …

Dein Elevator-Pitch

Wenn wir etwas kaufen, wollen wir wissen, mit wem wir es zu tun haben und ob wir dieser Person vertrauen können. Eine erste Möglichkeit uns auf der Landing-Page vorzustellen, bietet uns der Elevator-Pitch.

Stell dir vor, du steigst in einen Lift (Elevator) und triffst dort eine wildfremde Person, die dich fragt, was du tust. Du hast maximal 30 Sekunden Zeit, danach ist sie wieder weg. Diesem Menschen musst du jetzt möglichst einfach und klar verständlich kommunizieren, was genau du machst, damit er dich und dein Angebot gut findet und Lust auf mehr bekommt.

Zusammengefasst ist der Elevator-Pitch der Satz, indem du dich und dein Business jemand völlig unbekanntem vorstellen würdest, während ihr zusammen in einem Lift (Elevator) 2 Stockwerke fahrt.

WEM hilfst du

bei welchem PROBLEM

WAS zu erreichen

mit welchem ANGEBOT?

Beispiel:

Ich bin Mary Mattiolo, Webdesignerin und Business-Creator und ich helfe ONLINE-UNTERNEHMERINNEN OHNE PASSENDE WEBSITE, IHRE WUNSCHKUNDEN MAGISCH ANZUZIEHEN, DURCH EINZIGARTIGES BRAND- UND WEBDESIGN.

"Bekannt aus"-Bereich

Wenn du bekannt aus Sendungen, Podcasts, Magazinen & Co. bist, kannst du in einem Bereich der Landing-Page die Banner und Logos davon platzieren. Achte darauf, dass alle ungefähr dieselbe Grösse haben und dass sie nicht überhandnehmen. Bei sehr vielen entscheide dich für die Bekanntesten. Achte hier darauf, nur Logos zu verwenden, die du auch benutzen darfst! Frag also immer nach und lass dir die Besttätigung schriftlich geben.

Headline plus Problem deiner Kunden

Menschen, die auf deiner Landing-Page landen, haben ein Problem, von dem sie hoffen, dass du es lösen kannst. Zeig, dass du sie verstehst und weisst, wie es ihnen geht und wie sich das anfühlt!

Sprich hier ganz gezielt die Probleme und negativen Emotionen an, die die Menschen mit sich herumtragen und von denen sie sich befreien möchten.

Je genauer und spezifischer du diese ansprichst, desto mehr zeigst du, dass du sie verstehst und ihnen mit deinem Angebot helfen kannst. Denn seien wir ehrlich: Wir gehen lieber zu jemandem, der dasselbe wie wir schon durchgemacht hat, als zu jemandem der nur über theoretisches Wissen verfügt und keine Expertin / kein Experte ist.

Hier eignet sich eine Auflistung mit Bulletpoints meist gut. Achte auf konkrete Beispiele, die sich direkt auf dein Angebot beziehen und verallgemeinere möglichst nicht. Nutze eine starke Headline vor der Aufzählung.

Z.B. "Eine riesige To-do-Liste und keinen Plan wo anfangen?"

• Tag für Tag arbeitest du planlos darauf los und hast am Abend das Gefühl nichts wirklich geschafft zu haben?
• Du hetzt von Aufgabe zu Aufgabe und es kommt dir vor, als ob es immer mehr statt weniger zu tun gibt?
• Pausen für dich schiebst du schon so lange vor dir her, dass du sie gar nicht mehr einhältst?
• Du fühlst dich in einem Hamsterrad aus Aufgaben und Verpflichtungen gefangen und hast total die Lust an der Arbeit verloren?
• …

Dein Versprechen, das Endergebnis und der Benefit

Nachdem du gezeigt hast, dass du weisst wie es deiner Zielgruppe geht und du sie verstehst, ist es wichtig, dass du nun auch den Nutzen hervorhebst, den deine Interessenten und Interessentinnen erwarten können, wenn sie mit dir arbeiten oder dein Produkt kaufen.

Die negativen Aspekte waren der ist-Zustand und dein Versprechen, das Endergebnis ist der soll-Zustand.

Dein Versprechen hier ist allgemein auf dein Angebot/Produkt bezogen. Was hat dein*e Kunde/Kundin zu erwarten? Was bekommt er/sie im Endergebnis? Hier geht aber noch nicht um die Inhalte, das ist wichtig zu verstehen, sondern darum, welche Emotionen da sein werden, wenn die Transformation stattgefunden hat. Wie fühlen sich deine Kundinnen und Kunden nach der Arbeit mit dir oder nachdem sie dein Produkt gekauft haben? Auch Ergebnisse oder Nutzen, die direkt messbar sind, gehören hier hin.

Auch hier bietet sich eine Aufzählung mit Bulletpoints gut an. Ca. 5 – 10 Aufzählungspunkte sind optimal. Davor kommt wieder eine Headline.

Beispiel:

"Mit dem »PLANE DEIN BUSINESS- Onlinekurs« bist du endlich nachhaltig organisiert!"

• Schnelle und sichtbare Ordnung dort, wo du sie am meisten brauchst
• Neue Organisation und klare Zeitfenster für alle deine To-dos
• 15 Minuten täglich und langfristig alles erledigt für mehr ich-Zeit
• Böse Überraschungen und Zeitdruck wegen unvorhergesehenen Terminen sind vorbei
• Simple Routinen mit denen du täglich Zeit und Nerven sparst
• Eine neue Basis für mehr Ordnung in deinem Business ab jetzt
• …

Social Proof / Kundenfeedbacks / Testimonials

Übersicht und Inhalt des Angebots, ggf. mit Bonus

Der Teil auf deiner Landing-Page, wo es um die konkrete Übersicht des Angebots, also um den Inhalt geht. Hier ist es wichtig, einen kompletten Überblick zu liefern, was dein*e Kunde/Kundin erhält. Quasi die wichtigsten Dinge auf einen Blick. Je nach Angebot bieten sich hier verschiedene Designs an. Was hier alles hingehört kann Folgendes sein:

• Die Dauer (z. B. 90 Min., 12 Wochen, einmal wöchentlich, jeden Donnerstag, 3 Monate, usw.)
• Die Anzahl (z. B. Einzelsitzung, 3er-Paket, 3für2-Bundle, usw.)
• Die Strukturierung (z. B. 7 Lektionen, 12 Module, jeden Montag ein neues Modul, usw.)
• Die Begleitung (z. B. Facebook-Gruppe, Q/A, Live-Call, Webinar, Workshop, Zoom-Call, E-Mail, WhatsApp, usw.)
• Die Materialien (z. B. Workbooks, Audios, Videos, Checklisten, usw.)
• Der Preis (z. B. ob Einmalzahlung oder Ratenzahlung, Abo oder begrenzte Zeitdauer, mit oder ohne MwSt., usw.)
• Die Location (online, offline, live, aufgezeichnet, Veranstaltung, usw.)
• Die Boni wenn es Zusatzleistungen gibt
• usw.

Alles auf einen Blick

Kurz gesagt, ist das hier der Bereich, der am konkretesten zusammenfasst, aus was genau dein Angebot besteht. Also nicht, die Gefühle und Ergebnisse, die mit deinem Angebot erreicht werden können, sondern der physische (digitale oder analoge) Inhalt. Beim Erreichen dieses Bereichs auf der Landing-Page sollte man das Gefühl haben, alles wichtige auf einen Blick erfassen zu können.

Als Headline eignet sich z. B.:

1. Das ist im Onlinekurs enthalten:
2. Du bekommst im Einzelgespräch:
3. Mit meinem 1:1-Coaching erhältst du:
4. usw.

Kurze und knackige Angebote, die mit wenigen Worten auskommen kann man sehr gut mit passende Icons visuell unterstützen. Hier bietet sich z. B. jeweils ein Icon, eine kurze Überschrift und ein erklärender Satz an.

Bei umfassenderen Angeboten (Coachingpakete, Onlinekurse, …) gehören hier auch die verschiedenen Varianten hin, also bei einem Coaching z. B. ein Paket mit einem Einzelcoaching, ein 3er-Paket und ein 9er-Paket. Es empfiehlt sich maximal 3 Pakete pro Angebot (und somit pro Landing-Page) zu verwenden, da es sonst schnell unübersichtlich wird.

Hier lautet das oberste Gebot: "Einfach halten!" So einfach wie möglich, so ausführlich wie nötig. Der/die Kundin/Kunde soll nicht nachdenken müssen sondern glasklar sehen, was sie/er bekommt. Keine langen, verschachtelten Texte und dergleichen.

Deine Vorstellung und dein Reason Why

Deine Zielgruppe hat bis hierher schon viel an Input über dein Angebot erfahren, nun ist es an der Zeit ein wenig über dich zu erzählen. An dieser Stelle ist ein schönes ausdrucksstarkes Foto von dir mit einer kurzen Vorstellung optimal. Schreib aber bitte keinen Roman über dich, sondern dein "Reason Why". Also, weshalb du dieses Produkt/Angebot entwickelt hast, was dein Antrieb dazu war und weshalb es so toll ist. Du hast später noch die Möglichkeit, deine Vision und Brand-Story ausführlicher zu erzählen.

Beispiel:

Als alleinerziehende Mutter mit zwei Kindern und einem 100 %-Job hatte ich nie genügend Zeit und finanzielle Mittel für meine Söhne nahrhafte, vollwertige und leckere Gerichte zuzubereiten. Täglich hatte ich deswegen mit Gewissensbissen zu kämpfen und fühlte mich schlecht, bis ich eine geniale Methode entwickelte, die mir Woche für Woche garantiert, dass ich jeden Tag leckere und gesunde Mahlzeiten für mich und meine Familie kochen kann und mir auch noch dabei hilft, Geld zu sparen, während ich auf regionale und saisonale Nahrungsmittel zurückgreife.

Für wen ist dein Angebot gedacht? Und für wen nicht?

Genauso wichtig wie es ist auf deiner Landing-Page herauszukristallisieren, für wen das Angebot richtig ist, so essenziell ist es, auch klarzustellen für was du oder dein Angebot nicht stehen!

Stelle klar, was man zu erwarten hat und was nicht. Bedenke immer, je besser du Interessierte vorab segmentierst, umso höher schlussendlich die Zufriedenheit bei deiner Kundschaft und auch bei dir!

An dieser Stelle empfehle ich wieder eine Auflistung oder sogar eine Gegenüberstellung der Pros und Kontras.

Beispiel:

Mein Onlinekurs ist perfekt für dich, wenn:

• Du online automatisiert Kundschaft gewinnen willst
• Du mit deiner Expertise sichtbar werden willst
• Du verstanden hast, wie wichtig das richtige Branding ist
• Du mit deiner aktuellen Website unzufrieden bist
• Du bereit bist, Zeit und Geld in dich und dein Business zu investieren

Mein Onlinekurs ist ungeeignet für dich, wenn:

• Du keine Lust hast, dich mit deinem Business auseinanderzusetzen
• Du lieber jemand anderes mit dem Erstellen deines Contents beauftragen willst, anstatt es selbst zu tun
• Du nicht bereit bist, dich von sinnlosen Strategien zu verabschieden
• Du der Meinung bist, dass dein Business einmal aufgesetzt schon von alleine rennt
• Du kein Geld in die Hand nehmen willst und nur auf der Suche nach dem nächsten gratis Angebot bist, dass dann auf deiner Festplatte herumliegt

Überlege dir an dieser Stelle auch gerne, mit welchem Klientel du Mühe hattest in der Vergangenheit und warum. Und natürlich ebenso andersrum: Welche Käufer*innen hatten Erwartungen an dich, die du dann nicht erfüllt hast. Das sind super Ansätze, hier noch spezifischer auf dein Angebot einzugehen und dich abzugrenzen, von dem, was du nicht bietest.

FAQ-Bereich

• Bietest du auch Coachings vor Ort an?
• Muss ich etwas vorbereiten für unser Gespräch?
• Gibt es die Möglichkeit von Ratenzahlung?
• Brauche ich einen Facebook-Accounnt, um am Onlinekurs teilzunehmen?
• Was ist, wenn ich an einem Live nicht teilnehmen kann?
• Gibt es eine Aufzeichnung vom Webinar?
• usw.

Deine Brand-Story – warum hast du das Angebot entwickelt?

• Eigener Erfahrungsbericht
• Auslösendes Ereignis
• Werte und Wünsche
• Vision
• …

Zusammenfassung

Ich hoffe, ich konnte dir einen Einblick in die verschiedenen Bereiche einer Landing-Page geben. Je nach deinem Angebot bietet sich ein anderes Design und eine andere Anordnung der jeweiligen Bereiche besser an. Bitte bedenke immer, dass eine Landing-Page flüssig gelesen werden sollte. Achte also auf einen harmonischen Aufbau und fliessende Übergänge der einzelnen Bereiche.

A presto!

Deine Mary

Ganz egal ob ich Webseiten im Kundenauftrag designe oder an meinen eigenen Seiten bastle, ich benutze eine ganze Reihe von Browser-Erweiterungen für meine Arbeit als Webdesignerin. Heute möchte ich dir fünf davon vorstellen. Es handelt sich dabei um kleine Browser-Tools, die dir als Werkzeug dienen und ich bin mir ganz sicher, dass sie auch dir deinen Alltag erleichtern werden!

Die folgenden Anleitungen wurden für den Chrome-Browser erstellt. Die meisten Extensions gibt es auch für Firefox und Co. Ich möchte mich hier jedoch auf Chrome beschränken.

Browser-Erweiterungen installieren

Zuerst möchte ich dir zeigen wie du die Browser-Erweiterungen überhaupt installierst.

Öffne zuerst Chrome …

… und klicke auf den folgenden Link: Chrome-Webstore. Dieser führt dich direkt in den Chrome-Webstore, wo du die nachfolgenden Browser-Erweiterungen kostenlos und mit zwei Klicks installieren kannst.

Falls du die Anleitung lieber als Video sehen möchtest:

Floating Player

Ist dir das auch schon passiert? Du suchst ein Video-Tutorial, z.B. auf YouTube und möchtest dann die darin vorgestellten Schritte step-by-step auf deiner Website umsetzen. Das Doofe daran ist nur, dass du jetzt alle paar Sekunden zwischen dem Tab mit dem Video und dem Tab von deiner Webseite hin und her wechseln musst 🙄.

Ab jetzt nicht mehr! Diese Browser-Extension ermöglicht dir, Videos "anzupinnen". Genauer gesagt, öffnet sich ein kleines Fenster mit dem Video und egal in welchem Tab du dich gerade befindest, das Video "fliesst" mit.

Schau dir am besten das kurze Video an, installiere die Browser-Extension und probiere es direkt aus 👍🏼! Wenn mehrere Videos auf einer Seite eingebettet sind (wie hier bei diesem Blog-Artikel), dann wirst du eine Miniaturansicht der gesamten Website sehen und kannst einfach zum gewünschten Video scrollen 😉).

Browser-Extension "Floating Player" installieren und verwenden (Video-Anleitung)

ColorZilla

Die kleine Browser-Erweiterung ermöglicht es dir, den exakten Farbcode von Bildern, Fotos, Grafiken, Illustrationen und allem, was halt Farbe enthält, herauszufinden und in deine Zwischenablage zu kopieren, um ihn dann wiederzuverwenden, z.B. in Canva, für Texte, u.s.w.

Gehen wir mal davon aus, dass du auf deiner Website ein Foto mit einer roten Rose eingebunden hast und nun möchtest du in derselben Farbe wie die Rose den Titel einfärben. Dazu klickst du nach dem Installieren lediglich die Browser-Erweiterung an, fährst mit der Pipette über die Rose und pickst so den exakten Farbcode als Hexcode heraus und kannst ihn dann bei der Schriftfarbe wieder hineinkopieren.

Page Ruler

"Page Ruler" hilft dir als Browser-Extension dabei, die genaue Anzahl Pixel herauszufinden und so z.B. beim Designen deiner Seiten Abstände genauer zu definieren, Elemente genauer auszurichten und anzuordnen oder Design symmetrischer zu gestalten. Du kannst "Page Ruler" als erweiterten Lineal verstehen, der dir die genauen Pixel eines Elements, eines Abstandes zwischen zwei Elementen, u.s.w. anzeigt.

Browser-Extension "Page Ruler" installieren und verwenden (Video-Anleitung)

View Image Info (properties)

Mit View Image Info (properties) kannst du mit einem Klick auslesen, welche Masse (Breite/Höhe) ein Bild effektiv hat, wie gross es ist (KB/MB), was für ein Format (JPG/PNG) es hat und wie der Alt-Text lautet, ebenso den genauen Pfad auf dem Server anzeigen. Das ist dann zum Beispiel extrem hilfreich, wenn du unsicher bist, ob du das bereits hochgeladene Bild auch für andere Stellen auf deiner Seite verwenden kannst, wenn du z.B. andere Grössen benötigst.

Browser-Extension "View Image Info (properties)" installieren und verwenden (Video-Anleitung)

WhatFont

Warst du auch schon mal online unterwegs und hast eine Schriftart entdeckt, in die du dich sofort verliebt hast? Nur wie findest du jetzt heraus, wie diese Schriftart heisst? Du möchtest sie ja vielleicht selbst verwenden oder sie für ein Kundenprojekt abspeichern, zu dem sie perfekt passt. Mit der Browser-Extension "WhatFont" fährst du nur noch über die Schriftart und schon wird dir in einem kleinen Fenster angezeigt, wie sie genau heisst, geil oder?

Browser-Extension "WhatFont" installieren und verwenden (Video-Anleitung)

Haben dir meine Tipps gefallen? Oder hast du noch Fragen? Hinterlasse mir gerne einen Kommentar, ich freue mich immer sehr darüber!

A presto!

Deine Mary