Widget Eintragungsformular-Test

Leadgeneireungs-Widget

Wie kannst Du in Elementor ein Formular zur Leadgewinnung im Widget machen?

Heute habe ich mal einige Versuche gemacht um Dir zeigen zu können, ist es überhaupt möglich einen Beitrag oder eine Seite so zu gestalten, dass diese in einem Widget in der Seitenleiste sichtbar wird und Du damit eine Formular zu Leadgewinnung erstellen kannst.

Und ja, es ist gelungen. jetzt willst Du sicherlich wissen, wie kannst Du das auch realisieren. Du sieht unten das Ergebnis, das ich als Dummy-Vorlage hier erstellt habe. Und das Du jetzt in der rechten Seitenleiste sehen kannst. 

Gib hier deine Überschrift ein

Kurzer Text

Die einzelnen Schritte

Zuerst habe ich mit einem Beitrag (Post) wie diesem hier experimentiert und war da mit dem Einfügen in ein Widget auf dem Holzweg. Also nächster Versuch und kam dann über das Backend unter Design in den Widget-Einstellung dahinter, dass nur Seiten scheinbar in ein Widget angezeigt werden können. Also nächster Versuch:

  • Seite erstellen.
  • Abschnitt mit Überschrift anfertigen
  • dann Text-Widget darunter.
  • Bild-Widget hinzufügen und
  • anschließend das Formularfeld,
  • sowie alternativ ein Listenelement-Widget.
  • Im weiteren Verlauf, den Abschnitt zum bearbeiten anklicken und
  • Jetzt die Inhaltsbreite auf 240 px einstellen
  • Sodann die Headline Schriftgröße und Farbe einrichten
  • Bild des Reports hinzufügen und eventuell Größe anpassen.
  • Nachfolgend das Formular mit Autoresponder (MailChimp, MailPoet oder passenden von Elementor vorgegebenen) verbinden
  • Und weitere Einstellungen am Formular nach Wunsch vornehmen
  • Zum Schluss kannst Du um das Element (Die Spalte) in der Mitte noch weitere Anpassungen realisieren, wie Rahmen, Hintergrundfarbe etc.

Und das Ganze dann entweder als Vorlage speichern oder die Seite veröffentlichen. Ich habe es als Vorlage gespeichert und als privat veröffentlicht, damit es nich gefunden wird.

Der nächste Schritt

Nachdem das geschafft war, habe ich mich im Backend unter Design, Widget, die Elementor Bibliothek in die Seitenleiste gezogen und dort kannst Du dann einstellen welche Seite angezeigt werden soll. Abschließend alles überprüfen und wenn alles OK aussieht ist das geschafft.

So kannst Du also mit eigenen Mitteln und Ohne zusätzliche kostenpflichtige Plugins auch ein solches Formular einbinden. Und ja, es ist nicht 100 % perfekt. Warum, weil Du keinen einfachen Splittest damit machen kannst.

Wenn Dir dieser Beitrag gefallen hat, freue ich mich über einen Kommentar unten. 

Hol Dir Jetzt den GRATIS Report!

erfolgreiche Landingpages mit Elementor

Trag unten Deine E-Mail Adresse und Du erhältst den REPORT gratis und sofort!

5 unbezahlbare Tipps, wie mehr Leser Deine Beiträge schmökern

5 unbezahlbare Tipps für Überschriften die knallen!

Wie schreibst Du Deine Blog - Beiträge, die mehr Leser fesseln

Machen wir uns jetzt mal nichts vor! Die Meisten von uns schreiben Blog Beiträge nicht oder zumindest nicht gerne, stimmt’s? Aber warum ist das so? Du weißt nicht was Du schreiben sollst? Oder werden Deine Beiträge nicht gelesen? Vielleicht wartest Du auch einfach nur ab, denn was Du schreibst ist wichtig, klar? 

Aber jetzt mal ehrlich, Du wartest und wartest und keine S.. interessiert sich für Deinen Text. Keiner kommt vorbei, naja, vielleicht ein Spamer oder Hacker, der Deine Webseite mit Links oder Schadende infizieren will!

Aber WARUM? Warum liest das keiner? Ganz einfach, weil Deine Überschrift nicht anzieht, auffällt, neugierig macht. Schließlich ist es einzig und allein die Überschrift, auch Headline genannt, die den Besucher Deiner Webseite anlockt, wie der Nektar die Biene. Denn was sieht derjenige der im Internet sucht. Nur eine Headline! Du musst bedenken, Du hast nur Sekundenbruchteile um die Aufmerksamkeit Deines Besuchers zu erhaschen. Er scannt Google oder jede andere Suchmaschine und wenn das, was er sucht nicht nach wenigen Augenblicken gefunden hat und Ihn zum weiterlesen ermuntert ist er weg und das auf nimmer Wiedersehen. Denke einmal an die Zeitung mit dem roten B… links oben. Was hat sie so erfolgreich gemacht. Ihre reißerischen Headlines!

Und Ludwig Leseratte entdeckt Deine Headline über seinen RSSFeed, den Suchergebnissen auf Google & Co. oder auf der Zeitleiste in seinen Social-Medien-Kanälen. Und dort selektiert er nur anhand der Überschriften. Das ist ja auch klar. Auf Grund der Fülle an Angeboten kann er nur selektiv entscheiden und so sagt das Gehirn:”Klasse, da will ich mehr erfahren!” Wenn dieser Impuls nicht da ist, bist Du schon im Nirvana des Internet-Streams verschwunden.

Aber jetzt kommt die gute Nachricht für Dich! Überschriften gut zu schreiben ist keine Kunst! Nein, denn es gibt ein ganz klare Wissen dazu und deshalb habe ich Dir hier 5 der erfolgreichsten Überschriften sozusagen als Blaupause hier hinterlegt. Diese musst Du nur entsprechend umformulieren, um mehr Besucher und Leser für Deinen Beiträge zu erhalten.

Tipp 1: Wie Du / Sie ............, die............

Diese Headline zählt wohl zu den absoluten Klassikern der Überschriften. Warum? Nun, Ludwig Leseratte bekommt sofort was er sucht, nämlich einen Nutzen und das ist was ihn interessiert.

Das hat die “Wie Du… “Headline zu einer meiner uneingeschränkten Favoriten gemacht. Und hier sind jetzt 2 Beispiele:

Wie Du tolle Blogbeiträge schreibst, die Deine Leser einfach fesseln

Wie Sie mehr Traffic auf ihrer Webseite bekommen, die Ihnen mehr Besucher und somit mehr Anerkennung bringen

Tipp 2: Wie Du / Sie ............, in nur............

Hier ein weiterer Klassiker der “Wie Du…” Option, die durch das “in nur” den Leser in eine vorbestimmt Haltung gleiten lässt. Sie lässt eine Hoffnung aufkeimen und verführt deshalb zu lesen. Und hier wieder 2 Beispiele für Dich

Wie Du mit diesen Tipps, in nur 5 Tagen mehr Besucher erhalten kannst

Wie Sie mit nur 15 Minuten Training, in nur 20 Tagen ein SixPack aufbauen

Tipp 3: Wie Du / Sie ............ und weniger ............

Und jetzt aber die 3. und letzte “Wie Du… “ Überschrift, die durch die und Verbindung eine Praxis aus dem NLP oft genutzt wird um unterschwellig eine Verbindung herzustellen. Jetzt wieder 2 Beispiele dazu:

Wie Du 4 mal am Tag essen kannst und weniger wiegen wirst

Wie Sie mehr Leads bekommen und weniger Geld für Werbung ausgeben

Tipp 4: ............ Wege um ............

Diese Headlines werden als “List Post” bezeichnet. Dabei ist es nicht wichtig  ob Du 9 Tipps9 Fehler, 9 Punkte, 5 Tricks, 7 Wege, oder 3 Sonst etwas… benützt. 

Diese Headlines sowie die “Wie Du…” Überschriften laufen bestens. Warum?

Sie suggerieren dem Leser ein eindeutiges Versprechen, etwas zu bekommen und as siehst Du in den 2 Beispielen

5 Wege, um Deine(n) Ex zurück zu gewinnen

3 Wege, um jetzt einen Job zu bekommen

Hier ist noch eine Studie dazu die ich gefunden habe.

Tipp 5: ............ Tipps für ............

Jetzt zum letzten Tipp, der wieder zu den “List Post” zählt. Aber was macht jetzt diese Headline. Sie trifft eine Vorauswahl Deiner Leser. Schau Dir einmal das Beispiel 1 an, Landingpages. Es spricht speziell Interessierte an Landingpages an. Un beachte die 3 Beispiele unten.

5 Tipps für eine Landingpage, die Kunden bringt

10 Tipps für mehr Fitness

20 Tipps für mehr Traffic und Besucher

Zusammenfassung:

Du kannst die allerbesten Texte schreiben, die wertvollsten Inhalte , Tipps und Ideen liefern. Aber wenn das keiner liest, weil Deine Headline nicht die Leser anspricht, war jede Mühe umsonst.

Also, Du hast hier den Tipp.”Was jeder Texter über Headlines oder Überschriften wissen sollte.

Nimm Dir Zeit für eine gute Überschrift, denn so bekommst Du mehr und mehr Leser für Deinen Blog.

Aber Achtung, die Überschrift darf kein Blender sein, sie muss halten was sie verspricht.

Und jetzt bist Du am Zug. Habe Dir die Tipps geholfen bessere Überschriften zu verfassen? Dann freue ich mich über ein Feedback oder einen Kommentar.

Du willst mehr zum Thema Überschriften erfahren?

Gratis Report für Dich.

90 Vorlagen für verkaufsstarke Überschriften

Top-Info: Landingpage erstellen, anhand abgestimmter Farben

Landingpage erstellen vorher - nachher

Wenn Du eine Landingpage erstellen willst, beabsichtigst Du ja ein bestimmtes Ziel erreichen, stimmt doch?

Eine Landingpage erstellen, eine Squeezepage, oder eine Eintragungsseite verfolgt doch einen bestimmten Zweck, oder? Dazu muss du dir Gedanken über diesen Zweck machen. Was soll oder muss er bewirken. Soll nur eine E-Mail-Adresse gewonnen oder soll ein Produkt verkauft werden. Eine weitere Überlegung ist die Gestaltung der Webseite. Hast du schon ein bestimmtes Corporate Identity, sprich deine eigenen Firmenfarben. Ein weiterer Punkt der oft vergessen wird ist, harmonieren denn die Farben überhaupt miteinander! Denn eines ist ja klar, wenn ich die falschen Farben wähle wird der Besucher die Seite schnell wieder verlassen und zwar ohne mein Angebot überhaupt zu würdigen. Du musst bedenken, der Besucher entscheidet nach dem ersten Eindruck. Und wie du unten siehst macht diese Farbstellung keinen harmonischen Eindruck.

Landingpage unharmonisch

Was ist ein Farbschema

Zu diesem Thema gibt es lange Abhandlungen im Internet. Die zum Teil sehr wissenschaftlich sind und viele Menschen beschäftigen sich professionell mit diesem Punkt. Da sind Verkaufspsychologen, Webdesigner, Texter, Werbegrafiker, aber auch Maler etc. Allein unter dem Suchbegriff “Farbschemata” gibt es über 1 Million Einträge auf Google. Aber, Gott sei Dank, es gibt auch mich und ich habe dir schon einige Tools aus dieser riesigen Menge herausgesucht. Toll was?

Da gibt es zum einen die Webseite von Chromaflo.com die das Theme sehr umfassend behandelt und wenn du Interesse an diesem Thema hast, besuche einfach mal die Webseite. Grundsätzlich kann man sagen, es gibt in den Farbschemata 4 grundsätzliche Richtungen. Diese werden:

  1. Monochromatisch (1-Farbe)
  2. Angrenzende Farben (3-Farben) manchmal auch als ähnlich
  3. Triade (3-Farben)
  4. Tetrade (4-Farben)

bezeichnet.

Hierzu habe ich mal 3 Tools für dich herausgesucht:

  1. Paletton
  2. Adobe Color CC
  3. Color Scheme Designer

Diese 3 Online Design-Tools helfen ungemein den richtigen und harmonischen Farbton zu finden. Mir persönlich gefällt das Tool von Paletton.com am besten, weil es einfach und bequem zu bedienen ist und ja, es ist auf Englisch aber sehr leicht zu bedienen. Das macht dir das Landingpage erstellen und die optimale Farbgebung erheblich einfacher. Denn du willst ja mit Sicherheit den maximalen Erfolg, wenn du eine Landingpage erstellst.

online-colorshemer-paletton_com

Landingpage erstellen: Und so sieht das harmonisch aus

Die Grundfarben sind Rot, Gelb, Blau. Im HTML-Code  sind das, Rot = #ff0000; Gelb = #ffff00; und Blau = 0000ff. Und daraus kann man jetzt, zum Landingpage erstellen im Colorshemer-Tool aus www. Paletton.com die einzelnen Grundfarben eingeben. Wie das geht zeige ich dir in diesem Video.

Video abspielen

Unterhalb siehst du das Ergebnis. Hier habe ich die Farben aus dem Video angewandt. Ich hoffe das Ergebnis gefällt Dir und ich freue mich über einen Kommentar.

Landingpage harmonisch

10 Fehler die Du bei Landingpages vermeiden solltest

10 Fehler die Du bei deinen Landingpages

10 Fehler, die Du bei Deinen Landingpages nicht machen darfst

Was sind Landingpages eigentlich

Landingpages, ist dafür da, eine bestimmtes Produkt oder eine Dienstleistung zu bewerben. Und ganz wichtig dabei ist, es darf nur 1 Produkt oder 1 Dienstleistung sehr klar und deutlich beworben bzw. heraus gestellt werden. Es bringt nichts ellenlange Beschreibungen und Kundenmeinungen dabei hinzuzufügen. Denn bringt eine Landingpage keine Leads, Adressen, Interessenten oder Newslettereinträge hat sie ihr Ziel verfehlt. Somit kann man im Grunde sagen, je besser eine landingpage gemacht wurde, desto erfolgreicher wird man das jeweilig definierte Ziel erreichen. Welche Optionen du hast um dich besser zu präsentieren und mehr Umsatz zu machen. Das habe ich hier in den 10 Fehlern beschrieben, die du vermeiden solltest.

LP-EBook Schritt für Schritt
Landingpage

Fehler Nr. 1 - kein Ziel - kein Idealkunde

Den 1. Fehler, den sehr viele Marketer , besonders aber Einsteiger, begehen, ist. Sie haben keine Ahnung wer ihre Zielgruppe bzw. ihr Idealkunde ist. Die Meisten denken mein Produkt oder meine Dienstleistung braucht eigentlich Jeder. Denn es ist so genial. Aber ist das wirklich so? Jeder mensch hat bestimmte Bedürfnisse und Wünsche. Dies mündet in einem Ziel. Was heißt das jetzt aber genau. Nun, nehmen sie einmal mich. Ich bin fast 69 Jahre alt, männlich, Rentner und bin erstens nicht 100 % gesund und liebe die EDV sowie besonders das Internet und die Chancen. Ich kann aber gar nichts anfangen mit Computerspielen, mit Schicki-Micki, dumpfen Fernseh-Serien. Das heißt jetzt, Du kannst mir Werbung schicken für GZSZ oder ähnliches etc. Es interessiert mich nicht. Ich werde es nicht anschauen und wenn man mich nervt ist es Spam und ich werde sauer.

Fazit: Also beschäftigt Euch mit eurer Zielgruppe und erstellt ein Kunden-Avatar, definiert euren idealen Kunden. 

Fehler Nr. 2 - keine knackige Headline bei Landingpages

Den 2. Fehler, bei dem zahlreiche Einsteiger riesige Schwierigkeiten haben, ist, dass Sie keine Top-Headline für Ihre Landingpages erstellen können, die anspricht und den Interessenten fesselt.

Das bedeutet, es muss lupenrein kommuniziert werden, was den Besucher bzw. Interessent erwartet und um was es geht. 

Eindeutige Aussagen kommen einfach am besten an. Eine Haupt-Überschrift muss klar, einfach und verständlich sein. Als Ergänzung darf und sollte eine Subheadline, also eine Unter-Überschrift nicht fehlen.

Fazit: Nur mit einer fesselnden Haupt-Überschrift, knackst Du deine Besucher.

Landingpages fesselnde und Headlines

Fehler Nr. 3 - Erwartungshaltung sowie Rechtschreibung

Immer wieder erlebst du sicherlich auch und das sollte eigentlich selbstverständlich sein, die Rechtschreibung ist zum Teil mangelhaft. Ja, ich kenne das auch! Du sitzt vor dem Rechner und tippst in den Editor deinen Text. Doch dieser Gerät schreibt einfach etwas ganz anderes. Also ist es immer wichtig, den gesamten Text selbst durchzulesen oder besser noch von einer anderen Person gegenlesen zu lassen.

Denn Du willst je Deinem Gegenüber etwas tolles bieten und Dich als Experte präsentieren. Da machen Rechtschreibfehler keinen guten Eindruck.

Ebensowenig ist es hilfreich wenn die Erwartungshaltung, die Du durch die Werbung erzeugt hast, nicht erfüllt wird. Wirbst Du mit einem Gratis E-Book, dann kannst Du nicht eine Angebot für 9,99 € zeigen. 

Du denkst Dir jetzt bestimmt, das ist doch logisch, aber sicherlich hast Du solche oder ähnlich Fehler auch schon erlebt.

Fazit: Lieber 5 mal schauen ob alles so ist, dass es Deine zukünftigen Kunden animiert auf deiner Landingpage zu bleiben und letztendlich den Butten zu drücken.

Fehler Nr. 4: Kein oder das falsche Bild oder Video

Neben der Headline ist ein aussagekräftiges Bild oder Video der wichtigste und entscheidendenste Punkt für den Erfolg der Landingpage. Das Bild auch “Heroshot” genannt, muss klar das Angebot und die Nutzen zeigen, wenn man das Angebot annimmt.
Klar muss auch der Text das noch einmal aussagen. Jedoch, wie heißt es so schön:

Ein Bild sagt mehr als tausend Worte.

Allerdings sind kurze Videos von 1 -2 Minuten, die das essentielle des Angebots, verbunden mit einer klaren Handlungsaufforderung noch viel stärker.

Fazit: Denke daran ein “Heroshot”-Bild oder ein knackiges Video hilft dem Interessenten bei seiner Entscheidung und da der Interessent uns seine wertvolle zeit schenkt, müssen wir damit respektvoll umgehen.

Fehler Nr. 5 - Wenig oder kaum Vertrauensaufbau

Der Vertrauensaufbau ist ein wichtiges Detail um dem Besucher und Interessenten positiv zu stimmen. 

Was gehört jetzt aber dazu: Wenn man über echte Testimonials verfügt, sind diese ein hervorragendes Instrument des Vertrauensaufbaus. Daneben sind Siegel von anderen Institutionen wirkungsvoll. Aber bitte nur solche die man auch selbst nutzen darf.

Aber bitte nicht übertreiben und denkt daran weniger ist oft mehr. Was heißt das jetzt wieder! Vermeidet jedwede Ablenkung. Sei es durch Menüs oder zusätzliche Informationen. Das einige was noch an Links sein muss ist das Impressum und der Datenschutz, also alles was rechtlich notwendig ist.

Fazit: Ohne Vertrauensaufbau, wird der Besucher die Seite nur kurz überfliegen und wieder verschwinden.

Fehler Nr. 6 - Keinerlei Vorteile oder Nutzen

Oftmals werden, statt Vorteile bzw. Nutzen, nur die Eigenschaften eines Produktes oder einer Dienstleistung aufgeführt.

Das berühmte Beispiel, das Dir sicher auch bekannt, ist lautet:

Du willst ein Loch in die Wand haben, um ein Bild auf zu hängen, nur darum kaufst Du eine Bohrmaschine.

Denke genau über die Vorteile Deines Produktes oder der Dienstleistung nach. Und zwar aus Sicht der zukünftigen Kunden. Und fasse die am sinnvollsten in Form eines Listenelementes, wie unten dargestellt, zusammen.

  1. Headline 1
  2. Sub-headline 2
  3. Bild oder Video 3
  4. Nutzen und Vorteile 4
  5. Call-to-Action 5

Gut kommt es an, wenn Du die Zeilen der Auflistung unterschiedlich formatierst, so wie ich das oben dargestellt habe.


Fazit: Vermeide diesen fatalen Fehler, denn ohne Vorteile keine neuen Interessenten oder Kunden.

Fehler Nr. 7 - Call to Action fehlt oder ist undeutlich.

Die klickstarke Landingpage besitzt auch einen klaren Call-to-Action Button. Damit ist aber weder die Farbgebung noch die Form des Buttons gemeint.Das Entscheidende ist, durch die eindeutige Handlungsauffoderung muss klar werden, was getan werden muss um das entsprechende und gewünschte Ergebnis zu bekommen.

Das kann von einem “Klicke hier” bis zu einem “Jetzt hier zum Newsletter anmelden und Geschenk abholen” gehen. Je nachdem, um was es auf der Landingpage geht.

Im Grundsatz geht es bei dem Call to Action darum sich als Inhaber der Landingpage, immer klar äußert. 

Fazit: Hat man als Betreiber keinen eindeutigen Call to Action, verliert man schnell, eventuell mögliche Interessenten, Kunden oder Käufer.

Fehler Nr. 8 - Bei der Landingpage fehlt Dringlichkeit

Vielen Einsteiger ins Marketing ist nicht klar, dass Besucher einer Landingpage, die dieser, ohne Aktion, wie Anmeldung, Kauf oder Download wieder den Rücken kehren, zum einen Geld gekostet haben und zum anderen sehr wahrscheinlich verloren sind. So müssen wir nach dem Motto verfahren

Jetzt oder nie

Das heißt wiederum, Du musst alles tun, damit der Besucher, jetzt auf der Stelle, während er auf der Landingpage ist, den Button anklickt! Aus diesem Punkt ist es nötig, ein wenig sanften Druck zu erzeugen. 

Wie kann das geschehen? Etwa, in dem ein zeitlich befristeter Produktverkauf oder ein kostenloser Download angeboten wird.

Fazit: So wird beim Besucher die “Angst” vor Verlust, etwas nicht zu bekommen oder Geld zu verlieren, erzeugt. Das kann zu spürbarem Anstieg der Anmeldungen oder Käufe führen.

Fehler Nr. 9 - Wichtige Inhalte sind nicht im sichtbaren Bereich

Im Marketing und bei Landing-Pages wird oft mit viel zuviel Information gearbeitet und so die Landing Page überfrachtet.

So rutscht oft der entscheidende Teil der Seite aus dem sichtbaren Bereich des Bildschirmes. Wissenschaftlich ausgerückt, ist der Call to Action nicht “Above the Fold”. Was ist damit gemeint? Nun wenn man eine Zeitung anschaut, sieht man die Hauptüberschrift und das wesentliche oben auf der Seite. Auch wenn diese gefaltet ist.

So soll es bei Landingpages, aber auch auf jeder Webseite sein. 

Daher ist es wichtig, dass für den Erfolg einer Landingpage, Headline, Sub-Headline, Bild o. Video und Button (Call to Action) sofort auf dem Bildschirm zu sehen sind.

Fazit: Bitte schaue jede Landingpage auch im fertigen Zustand auf dem Bildschirm dem Tablet und dem Smartphone an.

Fehler Nr. 10 - Tests werden nicht gemacht

Was bei einer Landingpage funktioniert oder wie diese beim Besucher ankommt, läßt sich nicht zu 100% voraussagen.

Grundsätzlich sollte man sich an diesen 10 Punkten orientieren. Da man einerseits auf das zu bewerbende Produkt oder die Dienstleistung berücksichtigen muss und auf der anderen Seite die Anforderungen der Besucher nicht genau kennt, ist eine Konzeption einer jeden Landingpage empfehlenswert. 

Doch das reicht nicht aus. Nein – jetzt geht die Arbeit erst richtig los. Warum? Nun es muss einfach getestet werden. Das heißt, regelmäßig die Ergebnisse zu analysieren. Headlines, Sub-Headlines, Bilder etc. zu verändern. 

Aber nur nach und nach. Und nur 2 Variationen gegen einander. Das wird nach und nach die richtigen Erkenntnisse bringen und anschließend auch die gewünschten Ergebnisse

Fazit: Wenn Du also Landingpages erfolgreich nutzen willst, dann empfehle ich Dir das Buch hier von Tim Ash. Dort erfährst Du so ziemlich alles wissenswertes über Landingpages.

Video abspielen

Elementor Hack 1

WordPress, Wordpress-Design

Was ist jetzt eigentlich ein Hack

Ein Hack ist laut. Wikipedia ein technischer Kniff. Hier zitier ich Wikipedia:

Hack, ein technischer Kniff, vornehmlich aus dem Bereich der Informations- und Kommunikationstechnik, insbesondere das Ergebnis der Aktion eines Hackers; Computerslang; siehe auch Lifehack.

Ich stelle also an dieser Stelle, immer mal wider kleine Kniffe vor, damit Ihr mit Elementor, dem genialen LIVE PageBuilder, besser und besser zurecht kommt.

Elementor.com Page-Builder

Um was geht es jetzt im ersten Elementor Hack

Normalerweise ist das Überschriften-Widget von Elementor so eingestellt, dass jeder Einsteiger glaubt, hier kann ich nur eine Überschrift eingeben. Und diese formatieren, zuerst einmal in den sogenannten Überschrift-Auszeichnungsgößen H1 bis H6.

Diese Größen werden normalerweise, vom jeweiligen Theme vorgegeben und haben eine bestimmte Größe. Nur ganz grob angerissen, um euch nicht allzu sehr zu verwirren. 

In dem Theme dieser Seite sind die Überschriften z.B. wie folgt formatiert:

Hier seht ihr die Auflistung

  • Überschrift (H1) = 40 px
  • Überschrift (H2) = 30 px
  • Überschrift (H3) = 20 px
  • Überschrift (H4) = 15 px
  • Überschrift (H5) = 12 px
  • Überschrift (H6) = 10 px

Schön zu sehen ist auch, dass rechts die Größen H4 – H6 gleich dargestellt werden da sie im Theme nicht vorformartiert wurden.

Hier seht ihr die tatsächliche Größe im Beitrag:

  • Überschrift (H1)

  • Überschrift (H2)

  • Überschrift (H3)

  • Überschrift (H4)

  • Überschrift (H5)
  • Überschrift (H6)
Überschiften-Formate im Theme Customizer

Weiter Schritt für Schritt zum Elementor Hack

Wie jetzt unten im Bild zu sehen ist, zeige ich euch die normalen Einstellungen des Überschriften-Widgets.

Im ersten Teil, mit dem Stift versehen kommt das Eingabefeld bzw. der Inhalt (siehe Bild links)

In der Mitte, befinden sich die Style-Einstellungen, also die Stile (Ausrichtung, Textfarbe, Typografie) – Wenn man die Typografie mit dem Schiebeschalter auf Ein stellt öffnen sich weitere Einstellungen, wie Größe der Schrift, Schriftfamilie, Schriftschnitt, Umwandlung, Stil, Linien-Höhe, Buchstabenabstand. * siehe nächstes Kapitel.

Und rechts im Punkt Erweitert, finden sich diese Einstellungen – Element-Stil (Margin, Padding) Z.-Index, Eingangsanimation, Hintergrund, Rahmen, Responsive, eigene CSS

Das alles werde ich in einem weiteren Artikel einmal vorstellen. 

Weiter im Text

Hier jetzt zu den versprochenen Erklärungen des Punktes Style:

  1. Textfarbe –  Hier kann ich Farben auswählen
  2. Größe der Schrift – Hier kann ich die Größe der Schrift auswählen. zum einen per Schieberegler und zum anderen per Eingabe der Größe in px direkt.
  3. Schriftfamilie – Auswahl mit Listenauswahl oder per Eingabe
  4. Schriftschnitt – bedeutet die Stärke der Schrift (der Buchstaben) von kräftig bis fein – wird aber nicht von allen Schriften unterstützt!
  5. Umwandlung – hier kann ich den text Umwandels z.B. in Grossschreibung. Kleinschreibung, Kapitälchen (jeder erste Buchstabe im Wort wird groß geschrieben)
  6. Stil – Kursiv (italien) etc.
  7. Line-Hight – bestimmt die Höhe der Linie
  8. Buchstabenabstand (Abstand der Buchstaben von einander)
  9. Textschatten

Jetzt aber kommt der Überschriften Effekt (Elementor Hack)

Denn eines kann ich mit dem Überschriften Widget nicht so einfach erreichen. Eine solche Überschrift!

Elementor-Hack Überschrift 2 farbig

Aber so geht der Überschriften Effekt (Elementor Hack)

Das erste was ihr tun müßt, ist, aus dem Dashoard von WordPress in eurem Browser, ein neues Tab mit einem neu erstellten Beitrag zu öffnen.

Folgende Schritte:

  1. Zu Dashboard gehen
  2. Links im Menü auf Beitrag und
  3. Dann Erstellen wählen
  4. Und mit der rechten Maustaste Link in neuem Tap öffnen wählen.
  5. Im Editor-Fenster gebt ihr jetzt den Text der Überschrift ein (Achtung bitt darauf achten, dass Visuell ausgewählt ist
  6. Jetzt könnt ihr die Einstellungen im Text vornehmen wie Farbe, Fett, unterstrichen etc.
  7. Um das Ergebnis dann in das Überschrift-Widget einzutragen, wechselt ihr zu
  8. Text im Editor-Fenster. Markiert den Text mit der Maus und kopiert das ganze in das Inhalts-Fenster des Überschriften-Widgets
  9. Jetzt alles überprüfen und wenn OK speichern.

Die einzelnen Schritte als Bildfolge

Bild-Beitrags-Editor Visuell - Ansicht

Beitrags-Editor-Visuell

Bild - Beitrags-Editor zu Text umstellen

Beitrags-Editor-Text 1

Bild Beitrags-Editor - Text zu kopieren auswählen

Beitrags-Editor-Text zum kopieren

Text aus Beitrags-Editor hier einfügen

Überschrift bearbeiten-Text hier einfügen

Ergebnis

Elementor-Hack Überschrift 2 farbig