Elementor Startseite Erstellen 2021
Summary
TLDRIn diesem Tutorial zeigt die Webdesignerin, wie man eine überzeugende Startseite aufbaut. Sie erklärt, dass die Startseite wie eine Visitenkarte im Internet ist und auf die Situation der Besucher eingehen muss. Dann geht sie Schritt für Schritt vor: Sie wählt eine passende Vorlage, personalisiert das Design mit eigenen Farben und Bildern, fügt Vertrauenselemente wie Kundenstimmen ein, stellt das Angebot vor, beschreibt die Benefits und ergänzt einen Call-to-Action. Zum Schluss überprüft sie die mobile Ansicht und gibt SEO-Tipps.
Takeaways
- 😀 Die Startseite ist wie eine Visitenkarte im Internet und muss überzeugen
- 👩💻 Wähle eine passende Vorlage für deine Startseite aus
- 🌈 Passe die Farben und Schriften an deine Marke an
- 📸 Stelle dein Gesicht auf deinem Titelbild sichtbar dar
- 👥 Füge Logos von Partnern oder Kundenstimmen ein, um Vertrauen aufzubauen
- 📈 Beschreibe dein Hauptangebot und dessen Nutzen konkret
- 💡 Fasse auf der Seite zusammen, warum du die Richtige für den Job bist
- 🙋♀️ Ergänze eine Kundenstimme als vertrauensbildendes Element
- ⏰ Füge einen gut sichtbaren Call-to-Action hinzu
- 🔍 Optimiere die Seite für Suchmaschinen mit Fokus-Keywords
Q & A
Wieso ist der erste Eindruck so wichtig für eine Website?
-Der erste Eindruck entscheidet, ob Besucher auf der Website bleiben und kaufen oder sie schnell wieder verlassen. Die Startseite ist wie eine Visitenkarte und sollte überzeugen.
Wie strukturiert man am besten den Aufbau einer Startseite?
-Man sollte sich am Verkaufsprozess orientieren. Zuerst das Angebot anteigen, dann die Benefits erklären, eine Kundenzufriedenheit zeigen, die eigene Expertise beweisen und zum Schluss einen Call-to-Action setzen.
Wieso ist es wichtig, die Startseite auf mobilen Geräten zu testen?
-Viele Besucher kommen heutzutage über mobile Geräte auf eine Website. Deshalb sollte man testen, ob die Startseite auch auf Smartphones gut aussieht und alles gut lesbar ist.
Wozu dienen die Farbpaletten in Elementor?
-Mit den Farbpaletten kann man schnell ein konsistentes Farbschema erstellen. Die Primär- und Sekundärfarben bestimmen dabei die Grundfarben der Website.
Wie kann man Vertrauen beim Besucher aufbauen?
-Zum Beispiel durch Logos von bekannten Kunden, Zitate zufriedener Kunden oder die Präsentation der eigenen Expertise und Erfahrung.
Wofür sind die Tipps und Shades in den Farbpaletten gedacht?
-Die helleren Tints eignen sich für weibliche Zielgruppen, die dunkleren Shades für männliche Zielgruppen, da sie unterschiedliche Farbwahrnehmungen haben.
Warum sollte man Text auf Mobilgeräten linksbündig ausrichten?
-Damit hat das Auge eine feste Orientierung und die Inhalte können besser aufgenommen werden. Bei zentriertem Text muss das Gehirn erst den Lesestartpunkt suchen.
Wie integriert man einen Call-to-Action-Button?
-Indem man ein Button-Element einfügt, dieses mit einer Aktion wie einem Link zum Anmeldeformular verbindet und die Button-Farbe auf die Markenfarbe setzt.
Wozu dient der Abschnitt „Futter“?
-Im Futter kann man zusätzliche Angebote unterbringen wie einen Newsletter oder die besten Blogartikel, falls jemand noch nicht gekauft hat.
Wie optimiert man eine Seite für Suchmaschinen?
-Im SEO-Tab kann man ein Fokus-Keyword eingeben. Elementor analysiert dann, ob dieses Keyword im Titel, in der URL etc. vorkommt und gibt Verbesserungstipps.
Outlines
😊 Einführung und Erstellung der Startseite
In diesem Abschnitt geht es um die Erstellung und Einrichtung der Startseite. Es wird erklärt, wie man eine neue Seite anlegt, sie als Startseite festlegt und mit dem Bearbeiten der Elemente beginnt. Der Fokus liegt auf der strategischen Planung des Seitenaufbaus, um Besucher zu überzeugen.
😃 Hintergrundbild und Layout der Startseite
Dieser Abschnitt behandelt das Hintergrundbild der Startseite und das Layout. Es wird gezeigt, wie man das eigene Gesicht im Bild platziert, die Spaltenposition anpasst und eine dezente Hintergrundüberlagerung hinzufügt. Zuletzt wird die mobile Ansicht überprüft.
💡 Farbgebung, Vertrauensaufbau und Verkaufsargumente
Hier geht es um die Farbgebung durch Anpassen der Palette, den Aufbau von Vertrauen durch Logos und Kundenstimmen sowie die Formulierung der Verkaufsargumente mit Hinweisen zur nutzerfreundlichen mobilen Ansicht.
🎉 Fertigstellung mit Call-to-Action
Abschließend werden die Call-to-Action-Elemente ergänzt, etwa durch Terminbuchungs-Buttons. Es folgen Hinweise zur finalen Überprüfung, zur Suchmaschinenoptimierung über Keywords sowie zur Titel- und Metadatengestaltung.
Mindmap
Keywords
💡Startseite
💡Verkaufsprozess
💡Angebot
💡Benefits
💡Call-to-Action
💡Kundennutzen
💡SEO
💡Social Media
💡Vertrauen
💡Verkauf
Highlights
Die Startseite ist ein Aushängeschild und Visitenkarte im Netz. Sie muss überzeugen.
Verkaufe auf der Startseite dein bestes Produkt, für das du bekannt bist und das meisten Umsatz bringt.
Passe die Farbpalette auf deiner Seite an, damit du schnell arbeiten kannst.
Achte darauf, wie deine Seite auf mobilen Geräten aussieht.
Richte Text auf Mobilgeräten linksbündig aus, damit das Auge sich orientieren kann.
Verwende Farbwechsel zwischen Abschnitten für bessere Orientierung.
Fasse auf der Verkaufsseite den Kundennutzen prägnant zusammen.
Erkläre in einem "Über mich"-Bereich kurz, warum du die Richtige für das Angebot bist.
Füge Vertrauensbildende Elemente wie Kundenstimmen ein.
Füge einen gut sichtbaren Call-to-Action hinzu.
Optimiere für Suchmaschinen mit Fokus-Keywords.
Formuliere die Snippet-Vorschau für Google sexy.
Gestalte den Footer mit Newsletter oder Blog-Artikeln.
Füge Social-Media-Buttons für Teilen ein.
Speichere regelmäßig, um keinen Fortschritt zu verlieren.
Transcripts
es gibt keine zweite chance für den
ersten eindruck die startseite ist ein
aushängeschild der ena visitenkarte im
netz die muss sitzen und überzeugen in
diesem tutorial zeige ich dir wie du
deine startseite strategisch aufbaut und
mit dem element umsetzt
als allererstes erstellen wird eine
seite dazu gehen wir auf neu seite die
nennen wir startseite und
veröffentlichen die auch gleich jetzt
ist die chance online
jetzt legen wir diese seite auch noch
als startseite fest dazu gehen wir auf
die seit customizer zum customer hab ich
übrigens ein separates tutorial hier
startseiten einstellungen und die
startseite wählen veröffentlichen und
schließen jetzt geht's los hier mit dem
element bearbeiten
die frage die du immer stellen musst
bevor du eine seite erstellst ist
folgende in welcher situation kommen
menschen auf genau diese seite kommen
die auf deine startseite nach einer
weiterempfehlung nachdem sie sich auf
eine messe getroffen haben nach einem
seiner vorträge kommen die auf social
media
gerade für die startseite ist es eher
unwahrscheinlich dass sie auch social
media kommen
da kommen die besucher meist direkt auf
einzelne blogartikel die frage behältst
du bitte mal im hinterkopf
denn wenn die menschen nicht in der
situation ab holst in der sie gerade
sind dann verkaufst du ganz sicher gar
nichts
jetzt ist auch ein guter zeitpunkt und
die renn stylesheet zu holen mit deinen
farben und deinen schriften auf der
startseite verkaufst du dein bestes
produkt dieses eine für das duo bekannt
bist und mit dem du den meisten umsatz
und auch den meisten gewinn macht und
dafür suchen wir als erstes eine
passende vorlage aus hier könnt ihr euch
eine vorlage raussuchen und zwar könnt
ihr euch hier im element eine komplette
seite raussuchen oder ihr sucht euch
einfach eine aus meinen vorlag
graus da gibt es ja hier auch schon eine
startseite da kann man hier auch immer
in der vorschau sich anschauen wie würde
das denn aussehen die sieht in dem fall
jetzt so aus und die nehmen war auch und
fügen die 1
die dokumenten einstellungen die
importieren wir nicht uns importiert ihr
die ganzen serie snippets und alles mit
jetzt passen wir das mal anders nicht
mehr meine startseite ist sondern eure
damit dass ein bisschen schneller geht
holen wir uns hier erst mal die
standardfarben in den elementen hier
könnt ihr die primäre die sekundäre den
text und dem akzent erstmal einsetzen
das sind ihre farben aus dem style sheet
und dann auch die standard schriftarten
bitte hier einsetzen
die primäre die sekundäre den haupttext
und auch einen hervorgehobenen text so
könnt ihr wirklich schon eure akzente
setzen zum beispiel wenn ihr jetzt mal
eine andere überschrift nehmen würde
dann sieht das ganze schon mal anders
aus das können wir auch direkt anwenden
gehen wir wieder zurück hier in die
wirtschafts- und weiter geht's mit eurer
seite
was jetzt noch fehlt ist dass wir die
farbpaletten schnell anpassen dass ihr
wirklich sauber und schnell arbeiten
könnt dann klicken wir hier mal den text
angehen auf stil die text farbe und
jetzt seht ihr schon meine palette sieht
hier ganz anders aus als eure dieses
blau das gehört für mich überhaupt nicht
dazu das ist aber nicht schlimm was ich
gerne noch hätte ist und ganz ganz
helles grau so dass da das kann ich hier
mit dem regler einstellen oder hier
unten eingeben und da drücke ich hier
auf plus und dann ist es schon dabei das
ziehe ich mir dann dahin weil das gehört
für mich genau hierhin und dieses blau
hat für mich gar nichts zu suchen das
kommt weg genauso hätte ich das gerne
und jetzt hab ich auch noch meine
farbpaletten eingestellt die schrift
soll aber bitte weiterhin weiß sein
da gehe ich noch mal zurück und speicher
auch gleich noch mal ab wir starten hier
oben mit dem hannah habe ich mein buch
hinterlegt
dann nehmt ihr natürlich ein eigenes
bild und tauscht das aus hier einfach
mal abschnitt bearbeiten dann seht ihr
schon die mindesthöhe 600 die könnt ihr
nochmal anpassen
gehen wir erstmal auf stil hier den
hintergrund der ist schon bei mir
aufgeklappt und hier liegt auch das bild
das tauschen wir mal aus und zwar ich
nehme jetzt hier mal bewusst und bild
von mir denn viele von euch werden auch
ein bild von sich selbst einfügen und
dann passiert ganz auf das oh mein gott
wo ist mein gesicht was mache ich denn
jetzt wie kriege ich das hin und da gibt
es eine kleinigkeit auf die man achten
muss nehme ich hier bei der position
immer da ein norden wo das gesicht ist
in dem fall oben mitte zack jetzt ist
das blöde das genau der text vor dem
gesicht liegt da gehen wir noch mal
zurück auf layout und schauen uns die
spalten position an das hier ist nämlich
unsere spalte die ist in der mitte die
setzen wir mal nach unten und schon kann
man das gesicht sehen und jetzt ist noch
eine sache warum ist das bild denn jetzt
so grau gehen wir noch mal zurück auf
stil das hat nämlich eine hintergrund
überlagerung das ist so ein kleiner
trick den ich nutze wenn die bilder so
ein bisschen unruhig sind dann gebe ich
gerne hintergrund überlagerungen drauf
da könnt ihr zum beispiel hintergrund
überlagerung in eurer markenfarbe machen
das habe ich bei der anti von stimme
nürnberg bei ganz vielen bildern gemacht
und das sieht mega aus oder ihr könnt
nur über lagerung in schwarz machen das
wirkt auch gleich viel zulauf da werden
die texte in weiß sehr sehr sehr lesbar
letzte amtshandlung immer noch mal
überprüfen wie sieht's mobil aus das mag
ich ganz gerne man kann mein gesicht
sehen der text ist lesbar den habt ihr
natürlich ausgetauscht und jetzt gebe
ich noch eine empfehlung gerade auf
mobile würde ich die texte immer immer
immer links bündig machen dann hat das
auge hier war es wo sich festhalten kann
und die inhalte können auch aufgenommen
werden sonst ist die komplette hirn
kapazität dafür verbraucht diesen anfang
zu suchen und man hat überhaupt keine
ahnung was man gelesen hat text
anklicken hierauf inhalt
ist immer die möglichkeit dass links
bündig zu machen das nächste element in
meiner vorlage ist hier diese logo
leiste das ist ein schönes
vertrauensbildendes element wenn ihr
schon veröffentlicht seid dann könnt ich
hier die ganzen veröffentlichung
eintragen das ist so eine art bekannt
aus ihr könnt aber genauso gut zu nehmen
dropping machen über die kunden die ihr
schon hatte
wenn ihr also kunden wirklich hatte die
in der branche auch bekannt sind hier
die logos einfügen bitte immer um
erlaubnis fragen einfach anklicken und
hier austauschen
und wenn ihr noch so am anfang sagt dass
ihr noch gar nicht veröffentlicht seit
und nichts vorzuzeigen habt und auch
keine großen kunden in eurer kartei sind
tag weg ist genau so in ordnung man
könnte zb auch gleich am anfang ein
anderes vertrauensbildendes element
setzen nämlich eine kundin stimme auch
hier einfach anklicken austauschen
personalisieren natürlich mit bild noch
mal besser und dann wieder als letzte
amtshandlung kontrollieren wie sieht s
mobil aus das ist hier alles mit ich und
das mag ich nicht ich hätte gerne auch
hier wieder links bündig und damit bin
ich find jetzt gehen wir zu ihrem
angebot hier beim angebot habe ich drei
zeilen vorgesehen
ich möchte aber mit euch bewusst staaten
wie mit einem gründer ihr habt dieses
eine angebot und damit gehen wir jetzt
erstmal raus und das machen wir konkret
und dann löschen wir die anderen zwei
weg und machen dieses eine richtig gut
da gibt ihr hier eure texte rein und bei
dem jahr das will ich da kommt bitte
auch hier der link zur sales page ein
bild dazu und schon sind wir fein soll
jetzt noch mal als letzte amtshandlung
wie sieht's in mobil aus
das ist wieder alles mit ich das klicken
wir nacheinander an und schon ist das
schön links bündig und da kann sich das
auge da festhalten und orientieren dass
sie sauber und aufgeräumt aus und einem
aufgeräumten laden da wird auch gekauft
eine weitere anmerkung zum aufgeräumten
laden wenn wir von oben runter scrollen
haben wir das bild die kunden stimme auf
weiß das angebot auf einem zarten grau
und hier jetzt wieder die benefits da
komme ich später dazu auf weiß
und da empfehle ich euch wirklich sucht
euch nochmal ein style sheet raus und
guckt euch eure tipps und shades an
denn dieser farbwechsel der gibt auch
genauso wie die links bündig kite eine
gute orientierung fürs auge da
signalisieren wir im unterbewusstsein
achtung hier fängt etwas neues an
das ist so ein bisschen wie umblättern
auf einer internetseite
ihr könnt jetzt eure tipps und chats
nutzen um das einzustellen denn dafür
sind die gedacht geht man hier auf den
abschnitt und dann auf stil
da seht ihr schon beim hintergrund in
der farbe da ist bei mir jetzt dieses
leichte grau hinterlegt ich könnte jetzt
auch mein geld nutzen um dann
farbwechsel reinzubringen das ist dann
gleich noch mehr ich und noch wieder
erkennbarer in den teens und schels
nutztier hellere abstufungen wenn eure
kunden eher weiblich sind wenn ihr war
über kommen wollt ihr nutzt aber die
shades also die dunkleren abstufungen
wenn ihr cooler sein wollt wenn eure
kunden eher männer sind ich bleibe mal
hier bei dem leichten grau gehe noch mal
einfach hier
1 zurück jetzt ist es wieder das grau
könnte ich hier bei verlauf einfach 1
zurückgehen
nachdem jetzt hier das angebot schön
angeteasert wurde mit lust drauf machen
summen und wässrig spitzen hier geht's
auf die sales page
fassen wir nochmal den kundennutzen
zusammen und zwar nicht im sinne von 14
stunden coaching 7 einzelsitzungen mit
symbol sondern wirklich die benefit den
nutzen und dein leben wird sich
verbessern
deine probleme sind gelöst diese sachen
kommen hier wirklich hin wie wird er
sich hinterher fühlen leicht wunderbar
und dann können wir hier auf die
einzelnen elemente gehen und die texte
natürlich anpassen und das was wirklich
wichtig ist ist beim stil da könnt ihr
an passen nämlich die primäre farbe
könnt ihr hier anpassen
auf zum beispiel oder grün oder blau das
können wir natürlich dann machen und
jetzt zeige ich euch einen trick wie wir
das auf alle übertragen nämlich hiermit
kopieren stil einfügen und schon sehen
die alle gleich aus und wenn ihr nicht
so viele kunden nutzen habt dann
schmeißt ihr die unteren beiden einfach
raus und jetzt schauen wir wieder als
letztes kurz noch mal wie sieht's mobil
aus dass auch unsere kunden am handy
nicht dastehen und das nicht gut lesen
können auch hier die überschrift die
hätte ich gerne wieder links dieses
schmuck element das kommt bitte auch
links das da ist schon schön links und
jetzt so wir haben unser angebot
beschrieben wir haben die benefits und
was mir jetzt fehlt ist ein
vertrauensbildendes element ich hätte da
gerne noch nur kunden stimme und die
hole ich mir von oben einfach hier mit
rechtsklick duplizieren hier anfassen
mit der linken maustaste gedrückt halten
und nach hier unten ziehen
da fehlt mir jetzt der farbwechsel weil
da fängt ja was neues an also hier
draufklicken auf stil im hintergrund
euren farbwerte bitte eingeben
für eure kunden stimme dass wir hier
wieder ein grau weiß grau weiß haben und
die ist ja dann schon richtig
eingestellt
da sind schon alle voreinstellungen
gemacht dies links bündig alles tauscht
nur die texte aus im verkaufsprozess
würden wir jetzt deinen kunden erklären
warum du verdammt noch mal die richtige
für diesen job ist und da holen wir uns
das angebot und duplizieren das und
machen daraus einen kleinen über mich
bereich so ganz kurz und knackig erstmal
auf stil und den hintergrund löschen so
dass es wieder auf weiß ist grau weiß
das ist wunderbar und packen hier
einfach hinüber mich hier kommt dein
foto hin hier verlinkt du bitte deine
über mich seite
das wird dann auch direkt schon
angezeigt und in diesem abschnitt musst
du wirklich ganz kurz und knackig in
drei sätzen sagen warum du richtig bist
für diesen job nämlich du bist experte
auf seinem gebiet du hast ein
meisterbrief irgendwas du hast die
erfahrung also dein portfolio kurz anti
sahen du hattest kunden das waren gute
projekte und du weißt wie der prozess
abzulaufen hat damit dass tatsächlich am
ende auch spaß macht ein ergebnis mit
dir zu produzieren
als letztes wie immer kurz schauen ob
das mobil auch aussieht und das gefällt
mir ganz gut unsere startseite ist fast
fertig es gibt einen schönen heber wir
haben eine kundin stimme als
vertrauensbildendes element das angebot
ist schön angeteasert wir haben die
benefits beschrieben es gibt noch mal
eine kundin stimme es gab wirklich
jemand dem wir so so geholfen haben
darum sind wir die richtigen für dieses
produkt oder um dieses problem zu lösen
und als letztes kommt jetzt noch der
call to action was soll jetzt passieren
in meinem fall ist das ein kostenloses
vorgespräch
da habe ich auch wieder ein bild hinten
dran gelegt das können wir genauso
bearbeiten hier wieder ein händler
einfach auf die ganze seite strecken
dann geht das bild auch über die ganze
zeit
anderes bild einfügen die position
festlegen repeat und auf cover und dann
bleibt nur noch diesen button zu
verlinken und zwar hier auf die seite
die wir auch erstellen können nämlich
kalender
dazu gibt es ein separates video und
wenn ihr bilder von fotografen habt hier
noch mal ein hinweis von wem die sind
und schon sind wir fertig mit der
startseite was ganz wichtig ist nochmal
zum abschluss nicht zu voll machen
hangelt euch genau am verkaufsprozess
lang den habt ihr im world book
erarbeitet den call to action den hier
ihr hier unten habt dann könnt ihr auch
noch mal duplizieren und dann nehmen wir
den einfach mit hoch und setzten den
hierhin als abkürzungen kann den jemand
der wieder auf eure seite kommt und sich
beim ersten mal noch nicht entschieden
hatte direkt nutzen um zu buchen und
dann solltet ihr noch mal ein double
check im futter haben gibt es da einen
guten plan b wenn wirklich jemand noch
nicht gekauft hat was kann man im futter
für ein angebot setzen sei es newsletter
oder die besten blogartikel was jetzt
noch fehlt ist das seiten bild das
könnte ich hier unten einstellen auf
einstellungen
da könnt ihr das bild einfügen von dem
ihr möchtet dass es erscheint wenn ihr
die seite auf facebook teilt oder in
whatsapp ich habe dieses bild gewählt
hier ein zu geben was ist denn der
alternativ text also hier einzugeben
meine wirklich suchbegriffe und auch im
titel das bin ich deswegen heißt dass
mareike schamberger dieses medium füge
ich ein
damit sind wir soweit jetzt durch und
dann bitte noch auf seo schauen bedeutet
hier oben auf die kästchen und hier ist
der balken für seo
hier seht ihr ich habe noch keinen fokus
keyword eingegeben bedeutet wenn ich
diese seite auf ein keyword optimieren
wollen würde könnte ich das hier
eingeben und dann zeigt mir dieses
kleine seo tool direkt an
okay das erscheint noch nicht im titel
das wurde noch nicht in der url gefunden
da bekommt ihr gute hinweise was ihr
noch tun müsst um die seite noch besser
auf dieses keyword zu optimieren
das aller aller wichtigste ist aber hier
diese snippet klicken wir drauf und das
ist das tatsächlich wie es in google
angezeigt wird wenn ihr gesucht werde
diesen kleinen text den sollten wir so
sexy wie möglich formulieren und das
geht hier unten
wenn ihr da noch gar keinen eingetragen
habt dann ist das hier auch noch rot
bedeutet ihr fangt dann an euren text zu
schreiben
und wenn der eine gute länge hat dann
wird das auch grün und damit sind wir
wirklich mit unserer startseite komplett
fertig nochmal speichern
du hast noch mehr vor mit deiner
webseite alles was du wissen musst zeige
ich dir in einem kanal abonniere einfach
und verpasse kein video mehr
na dann bis zum nächsten tutorial
Weitere ähnliche Videos ansehen
6 Years of Copywriting Knowledge in 19 Minutes
Der Geld-Check | Reportage für Kinder | Checker Tobi
Neues Bestellformular anlegen und gestalten | Digistore24 Bestellformular anlegen
Write a Cover Letter That Gets You Hired!
13 Years of YouTube Knowledge in 46 Minutes
Try TONGUE CHEWING for 30 days. One FACE EXERCISE for DOUBLE CHIN and JAW RESHAPING
5.0 / 5 (0 votes)