Hey ich bin Tim und in dieser anfänger
Anleitung zeige ich dir wie du in 21
einfachen schritten eine website selber
herstellen kannst viel spaß dabei hier
mal ein kleiner überblick
zuerst fangen wir an indem wir uns eine
domain also den namen deiner website und
hosting besorgen dann installieren wie
wordpress mit einem klick als nächstes
machen wir ein paar grundeinstellungen
für die website und können schon unsere
homepage hinzufügen diese design wir
dann mit dem page bilder elemente der
macht das erstellen von websites super
einfach da ist mir ein bisschen drag and
drop und kopieren und einfügen ist wenn
ich beispielsweise irgendwo auf meiner
seite einen tag stehen haben möchte kann
ich links text auswählen
diesen an die richtige stelle ziehen und
dann für meine bedürfnisse anpassen
du kannst natürlich nicht nur text
bearbeiten in diesem video zeige ich dir
die einfachste technik mit der du jede
gewünschte seite nach deinen
vorstellungen und wünschen bauen kannst
egal ob du ein kontaktformular haben
möchtest
video hintergründe
eine slideshow
animation
ein portfolio häufig gestellte fragen
und so weiter
die website wird
natürlich auch mobile optimiert das
sieht auch auf dem smartphone und tablet
gut aus wenn du möchtest kannst du deine
gesamte website von null aufbauen oder
du kannst auch vor lang verwenden die
von professionellen designern erstellt
wurden und diese für dich anpassen
davon gibt es tausende
auswahlmöglichkeiten und wird sich etwas
für dich finden
also wenn du schritt für schritt lernen
möchtest wie du im handumdrehen deinen
wunsch website erstellen kunstschau
dieses tutorial und ich zeig dir alles
viel spaß bevor wir jetzt mit
startnummer eins anfangen noch ein zwei
sachen zum video
zunächst einmal habe ich in der video
beschreibung times verlinkt das heißt
wenn ich irgendein schritt nicht
interessiert oder davor spielen möchtest
kannst du doch gucken meine nächste teil
kommt und auf die zeit klingen genauso
geht das video relativ langsam falls es
also in einer schnelleren
geschwindigkeit ab spielen möchtest
kannst du hier auf die einstellungen
gehen clever expeed und zum beispiel
zwei auswählen
der nächste folgt wird sich
wahrscheinlich kaum überraschen
in diesem video arbeiten wir mit
wordpress um die seite zu bauen
das hat mehrere vorteile zunächst einmal
ist es gratis
und das natürlich immer super und zudem
wird es von 35 prozent aller webseiten
im internet verwendet dementsprechend
habe ich sehr viele nutzer und auch sehr
viele entwickler dadurch können wir
tausende plugins also so was wir
erweiterungen und themes also sowas wie
designs für unsere webseite verwenden
und müssen nichts selber programmieren
the presses meiner meinung nach die
beste plattform um webseiten zu bauen
und damit arbeiten wir jetzt auch das
wäre auch schon alles zum video und da
kann man mit startnummer eins anfangen
und uns hosting und domains besorgen
damit dieser schritt ein bisschen mehr
sinn ergibt erkläre ich dir einmal kurz
was man überhaupt alles benötigt um eine
website zu bauen
die live im internet verfügbar ist um
eine eigene webseite zu erstellen die
live im internet verfügbar ist benötigen
wir drei dinge zunächst einmal brauchen
wir eine domäne
das ist einfach der name deiner webseite
zum beispiel ist facebooks luna in
facebook kommen google zu mehr in das
google da kommen um eine domain dass
webseiten machen
die domainnamen kosten ca 15 euro mehr
als zweites benötigen wir web hosting
beim webhosting bezahlt seine firma
dafür dass du einen teil ihrer server
mitbenutzen darfst damit deine webseite
live im internet betrachter und
erreichbar ist webhosting wird zu einem
preis von circa vier bis 15 euro pro
monat beworben wird aber normalerweise
auch in jährlichen abständen bezahlt als
nächstes benötigst du wordpress
das ist völlig kostenlos von wordpress
org erhältlich
es gibt auch webmaster komm wir wollen
aber wordpress org weiß die open source
version der webos plattform bietet mit
der wir die seite nach unseren wünschen
gestalten können presstore com ist eine
art light version die sehr eingeschränkt
ist mit nur diesen drei dingen kannst in
kürzester zeit zu einer komplett eigenen
webseite kommen und jetzt kommt der
beste teil früher musst dass du diese
drei dinge holen und dann selber
verbinden aber heute ist der prozess
viel für anfänger freundlicher geworden
und alles was du wirklich tun musst ist
dich für webhosting anmelden und dann
hast du die domain und wordpress schon
dabei und jetzt können wir die echte
schritt-für-schritt-anleitung gehen
vermieten des reportings installieren
von wordpress und dem design deiner
webseite
zudem werde ich dir eine ganze menge
tipps und tricks zeigen die dir dein
leben als anfänger um einiges einfacher
machen die habe ich über die jahre
mühselig gelernt wenn du hilfe bei
irgendeinem schritt benötigt stellt eine
frage in den kommentaren und ich werde
mein bestes geben um dir zu helfen
ich lese jeden kommentar und antwort
hoch auf jeden also schritt nummer 1
hosting und eine domain besorgen um
diesen schritt machen können als erstes
den begleitartikel öffnen
zu diesem video den finden wir beim
ersten link in der video beschreibung
ich werde ihn auch in den kommentaren
verlinken oder du kannst auch einfach
webseiten machten punkt de starten
öffnen da gehe ich immer rauf hier habe
ich meine lieblings videos oder artikel
zum thema website erstellung verlinkt
die für mich super hilfreich waren um
die grundlagen zu lernen also zb wie man
mit farbe umgehen kann wie man eine
geschäftsadresse erstellen kann also zum
beispiel info at dann domain punkt
kommen
ganz viele sachen die wir später noch
mein video verwenden werden
dementsprechend würde ich webseiten noch
ein punkt der iss starten vielleicht
eröffnen
das lesezeichen hinzufügen wenn es passt
wie ist ihr passt so hier können wir es
mal mit startnummer eins anfangen und
mal gucken ob die wunschdomain überhaupt
noch verfügbar ist wenn ich
beispielsweise nach webseiten aachen.de
suche ist die nicht mehr verfügbar
jetzt prüfen die ist beispielsweise weg
dann müsstest du müssen kreativ werden
du könntest zum beispiel ein bindestrich
einfügen oder eine zahl oder die domain
extension also das ende von zum beispiel
punkt.de zu punkt kommen oder punkt
nicht ändern
dort wirst du schon was finden im
nächsten schritt können wir euch schon
zur römerzeit kommen und uns groß denkt
und domain einrichten wie vorhin schon
erwähnt bezahlst du beim webhosting eine
firma dafür das tor ein teil ihrer
server für deine webseite nutzen kannst
diese lagert dann all deine bilder icons
texte videos erzähler auf ihren servern
und diese laufen 24 stunden sieben tage
die woche mit einer top
internetverbindung und spielen deine
website in höchstgeschwindigkeit ab wenn
sie jemand öffnet ohne web hosting
könnte man zwar deine domain öffnen
es würde aber nichts erscheinen auf das
thema wie ich jetzt auch nicht allzu
lange eingehen weil die flächen ein
oster hast es ist aber trotzdem anrecht
wichtiger punkt eine gute rosling firma
zu wählen ist meiner meinung nach einer
der ersten schritte zum erfolg einer
webseite
allein schon weil viele schlechte russe
sehr langsames server haben dadurch lebt
eine website langsamer und viele
besucher werden genervt sein und spring
ab wenn das öfter passiert merkt sich
google das und deine seite lange tiefer
in den suchergebnissen
deswegen gebe ich dir jetzt mal ganz
schnell ein crashkurs zu dem thema
hosting ein paar punkte auf die wachen
sollte ist wenn dein haus jetzt sind die
folgenden als erstes die geschwindigkeit
wie eben schon erwähnt ist es wichtig
dass der oster schnelle server bietet
dafür würde ich bei den potenziellen
host einfach nach rezension im internet
googeln
dort gibt es viele leute die das testen
21 ein ssl-zertifikat gehe dort sicher
dass die oster ein ssl-zertifikat
anbietet darauf gehen wir in fünf
minuten nochmal genauer ein aber wenn du
kein ist ssl zertifikat hast erscheint
so eine nachricht lösung bild ich bin
endlich mal was ein wenn jemand deine
seite öffnet und google blog die
benutzer ab und das vorhin wir definitiv
nicht auf unserer seite haben
drittens die uptime also wie selten die
server ausfallen
die sollte auch gut sein das kannst du
genauso wie die server geschwindigkeit
per google und 4 1 6 key word press ist
es meist direkte content management
system
dementsprechend es ist wichtig die seite
zu sichern
das passiert auf zwei ebenen einmal auf
der website das zeige ich dir noch und
zweitens auf das server eben geht dort
einfach sicher dass ein hosting anbieter
funktion eingerichtet hat um die server
und website zu schützen
normalerweise haben dass eigentlich alle
nur bei ganz ganz klein anbietern kann
das kann ich mir etwas zu kurz kommen
doch gut das war dann auch schon mal ein
kleiner ausflug in die welt des hostings
in diesem video werden wir es verwenden
das ist mein gott was schon seit
mehreren jahren mit denen bin ich sehr
zufrieden
hier sind auch mal auf deren seite wie
du auch hier sehen kannst werden sie
sogar von wordpress selbst holen da kann
ich sogar mal raufgehen orchester und
dann hier hosting wordpress org / ossing
und hier haben wir es ein grund es gibt
auch noch dreamers und büros die habe
ich aber jetzt seit mehreren jahren
nicht mehr verwendet deswegen kann ich
da schlecht was zu sagen
genau das ist eigentlich auch schon dazu
ich würde das jetzt auch nicht zu lange
verkaufen du hast dich ja vielleicht
schon für einen anderen ruster
entschieden
ich mag sie besonders gerne weniger
schnellen server die abteilung ist auch
sehr hoch also dass ich nie probleme mit
und der kundensupport ist einfach nur
super
das mag recht trivial wirken aber gerade
als anfänger hat man vielleicht mal ein
problem
und dann ist es super wenn man einen
guten kunden support an seiner seite hat
also den kann ich auch schon samstags
nachts um halb drei schreiben und habe
trotzdem eine schnelle antwort bekommen
du kannst du auch einfach mal die seite
hier beschreiben sie so ein bisschen
service wenn du zum beispiel mal auf die
homepage ist oder wenn wir jedem auf
technology und dann data centers gest
genau das ist recht interessant die
benutzten nämlich zum beispiel auch die
google datencenter diesen sogar öko
freundlich hier kannst du alles mal
durchlesen und ich selber entscheiden
ich würde dir rum führen vielleicht mal
eine rezension nachzugucken ich habe
auch eine die habe ich jetzt nicht auf
der seite verlinkt aber vielleicht
verlängere ich ja auch mal die
rezensionen kannst du dann auch mal
angucken würdig dürfen fehlen security
ist auch super
bisher wollte ich noch nicht genau falls
du dir das zeigt mal angucken möchtest
habe ich sie hier auch einmal auf der
startseite verlinkt oder auch im zweiten
denkt in der video beschreibung wenn du
ja mal drauf klickst sie ist auch hier
oben das ist meine fehlt link das
bedeutet ich kriege eine kleine
provision dafür dass du auf den link
legst keine sorge hast du dich kein cent
extra
und ich empfehle dir auch nicht nur
wegen dem befehl link jeder andere post
hat auch net programm
aber sei's drum benutze ich seit
mehreren jahren für über 70 prozent
meiner eigenen projekte also da finde
ich ist es nur richtig die dann auch zu
empfehlen
genau also falls du die erstellung von
solchen gratis videos unterstützen
möchtest das mache ich nehm der
universität kannst du auf diesen link
oder auf den zweiten link in der video
beschreibung klicken
das hilft mir sehr vielen dank gut dann
nehme ich kann auch einfach entschließen
und sie haben wir drei trainer denkt ogi
kubik und start up plan der go geplant
ist vermutlich etwas zu viel für den
anfang also der hauptunterschied
zwischen dem stall ab und grobe plan ist
dass du im stadtplan eine website osten
kannst und im gepäck kann kannst du so
viele webseiten hosen wie du
möchte ist ich habe tatsächlich ein
startup und ein grafikkern website
machen punkt.de läuft auf dem stadtplan
und auf dem publikum habe ich eher so
kleine webseiten aber davon auch eine
ganze menge über 25 stücken müssen ist
im moment sein
und das funktioniert auch super also ich
kann beidem fehlen der kobik planen ist
noch ein kleines bisschen schneller aber
mehr ressourcen von server bekommst aber
es ist nicht wirklich merkbar also der
hauptunterschied ist wirklich dass du
beim salat planen eine website hosen
kannst du kannst ja auch die genauen
details angucken in den du hier auf
compared with plans gehst und dann
kannst du alles in diesem video nämlich
jetzt einfach mal einen stadtplan du
kannst dich aber für ein von den
entscheiden der passt dann gehe ich im
ausschuss planen
es gibt übrigens auch eine 30 tage geld
zurück garantie
das ist also perfekt wenn es einfach nur
mal ausprobieren möchte ist und hier
kann es jetzt auch deine gewünschte
domain eingeben angenommen du besitzt
bereits eine domain und lustig und waren
das registriert kannst auch auf die
verwirrte mann gehen die ja eingeben auf
rossi klicken und oben rechts verlängern
ich dir jetzt ein video wie du dann
weiter vorgehen kannst das auch ziemlich
einfach gut ich gehe jetzt mal davon aus
dass noch keine domain also gehe ich mal
frisches denn je domain und in diesem
fall möchte ich zum beispiel webseiten -
machen
punkto haben das heißt hier rechts kann
ich die domain extension ändern du
kannst natürlich alles nehmen was du
möchtest hier das eingeben und hoffen
dass die noch verfügbar ist und ihr ex
kanzler extension ändern
hier kannst du die ameis beliebtesten
aus werden das würde ich dir
wahrscheinlich auch empfehlen oder auch
hier welche je nach land oder was auch
immer du möchtest ich teste zum beispiel
mal punkt org die kosten 15 euro mehr
hätte ich mal auf prosit und die ist
noch verfügbar
super angenommen die ist nicht verfügbar
guckt einfach was verfügbar ist und wer
ein bisschen kreativ hier können wir
jetzt ein paar informationen angeben
hier als erstes die account
informationen damit lagen wir uns bei
sound ein also einmal deine e mail
adresse ein passwort und das bestätigt
du noch mal
dann ein paar kundeninformationen die
brauchen sie auch für die domain also
einmal dein land vermutlich deutschland
sein vorname nachname falls das ganze
für deine firma kaufst kannst du dir den
firmennamen angeben und hierbei wird die
umsatzsteueridentifikationsnummer deiner
firma dann spaß und der umsatzsteuer
dann haben wir noch die stadt adresse
postleitzahl und telefonnummer und hier
die bezahlen formation also deine
kreditkartennummer das auslaufdatum dein
name und dann nochmal ins www code den
findest du auf der rückseite das ist der
dreistellige code angenommen du hast
keine kreditkarte oder möchtest nicht
mit kreditkarte zahlen macht es auch
nichts dann kannst du scrollen und hier
mit dem chat schreiben und sagen dass du
keine kreditkarte hass und ganz gerne
mit an bord sein würdest dann schenken
dir auch ein link und du kannst mit
paypal zahlen
ich schätze mal das machen die wir die
gebühren per kreditkarte ein bisschen
niedriger sind
gut dann haben wir noch die precious
informations also hier könnte nochmal
den plan wechseln zwischen stahel
abgelenkt onkologie das datencenter
kannst wechseln also wo der server
stehen soll
ich würde ja aber frankfurt auswählen
was bei dir vermutlich auch
vorausgewählt ist bei period kannst du
aus während für wie viele monate im
voraus zahlen möchtest du könntest
monatlich bezahlen ist aber ein bisschen
teurer
du könntest für drei jahre im voraus
bezahlen aber ich denke 12 sind ganz gut
monatlich macht wahrscheinlich auch
nicht ganz so viel sind weil wir auch
die 30 tage geld zurück garantie hast
aber da würde ich einfach gucken was für
dich am meisten sinn macht gut die
beiden brauchen wir nicht die kannst
also in ruhe lassen und dann kannst du
hier die checkbox setzen und auf pernau
gehen ich für das alles neben aus und
dann sehen wir uns auf der anderen seite
so ich habe das jetzt alles m ausgeführt
und dann kommen wir zum nächsten schritt
und können auf prosit to custom area
klicken
klasse dann wäre auch der schritt
geschafft und wir haben hier
schritt nummer eins groß singh und dem
ende sorgen check im nächsten schritt
können wir schon ssl und workers
installieren
dafür fangen wir erstmal an und richten
intern inside bringt eine seite ein
das ist noch nicht direkt eine webseite
das ist einfach nur fürs management
insight brot das heißt hier kann man im
offset upside klicken das könntest du
auch hier unter websites machen und dann
auf der website oder hier create website
machen wir es mal schnell also new
website hier wähle ich dann existieren
und dort wähle ich webseiten - machen
die ich hier gerade besorgt habe und
dann können wir auf konzentrieren und
dann auf skip ein create empty side und
dann auf finnisch angenommen der prozess
sieht bei die übrigens komplett anders
aus kann es auch einmal auf der
startseite
das gilt eigentlich für alles im video
files irgendwas komplett anders ist so
du nicht mehr wirklich nachvollziehen
kannst guck mal auf der startseite
vermutlich habe ich dann update video
gemacht wo ich diesen prozess erklären
so jetzt wird die seite intern erstellt
ist kann kurz dauern
super jetzt ist die seite erstellt und
wir können wir unter scrollen und auf
gott tools klicken also hier managed
zeit und dann sind wir schon hier drin
und hier können wir die seite managen
hier sehen wir zum beispiel die server
die ip adresse der seite brauchen aber
nicht wirklich
jetzt fangen wir erstmal an und
installieren ein ssl-zertifikat für
unsere domain wenn ich zum beispiel mal
hier in diese url gehe und die einmal
hier aus schneide und dann einfüge
dann siehst du hast hier http s steht
angenommen du hättest kein ssl
zertifikat würde dort jetzt http stehen
statt https wenn ich rausgehe jetzt
siehst du hier links auch dass so ein
schloss dort drauf ist und möchte darauf
klick normalerweise dann sagen wir mal
hier verbindung ist sicher zertifikat
gültig da steht dort weil auch meine
seite ein ssl-zertifikat hat angenommen
wir werden das jetzt nicht installieren
würde dort nicht ist schloss sein
sondern eher ein rotes offenes schloss
und dort wird stehen dass die seite
nicht sicher ist
genauso würde manchmal google die seite
blockieren wenn sie jemand öffnen würde
ich bleibe hier mal ein was dann so
erscheinen könnte und das wollen wir
halt nicht haben
dementsprechend uns zu denen wir einmal
schnellen ssl zertifikat das ist immer
tun indem wir links auf security die
londoner auf ssl manager und hier unten
bei manager sales könnte eventuell sogar
schon deine domain stehen dann ist das
perfekt dann wurde bereits ein erstes
lcd vorinstalliert ansonsten müssen wir
installieren
das heißt hierbei installer wird zwar
immer dann domain zum beispiel webseiten
- machen punkt kommt und sich rechts
bleibt select ssl willst du lädst crypt
aus und dann geht es dort kehrte das ist
einfach ein gratis service saas anbietet
waren immer kurz ok jetzt habe ich hier
unten schon das ssl zertifikat stehen
und hier steht auch active das ist also
super in diesem fall hat es direkt
funktioniert manchmal funktioniert es
aber nicht direkt das liegt dann
höchstwahrscheinlich daran dass du die
domain gerade erst gekauft hast und die
erst richtig registriert werden muss
oder weil letzten crypt gerade ein
bisschen überladen ist in dem fall würde
ich mich dann einfach mal abmelden ein
paar stunden wieder reinkommen wieder in
ssl manager gehen und gucken ob standort
steht vielleicht noch mal auf geld gehen
und das alle paar stunden mal
ausprobieren
nach maximal zwei tagen soll es
funktionieren aber es wäre auch schon
wirklich der längste zeitraum im
zweifelsfall kann es mir aber auch immer
einen kommentar da lassen und ich hätte
ja aus das sollte aber alles nicht so
ein problem seien gut als nächstes
können wir dann auf https und for skin
ihr links und einmal für die domain http
es in force an scheiden
das kann es aber auch erst machen
nachdem du ein aktives ssl zertifikat
auf der domain hast okay das wäre auch
schon alles für das ssl zertifikat und
können loslegen und wordpress
installieren
das heißt die links kam auf web rest
gehen und dann auf ins team manager hier
wen wir dann ressorts also gehe ich aufs
lag ganz gut mal runter hier können wir
die domain auswählen auf der wir
präsentieren wollen
meinem fall halt webseiten - machen
procom den installations solltest du
leer lassen also nichts drin stehen
haben bei language kannst du aus wenn in
welcher sprache to the press installiert
haben möchtest dort wird vermutlich
deutsch aus also schirmen diese checkbox
können wir wegnehmen wir brauchen das
star trek nicht bei der info kann es
seinen nutzern geben und dann hat das
passwort und nochmal die e mail adresse
damit bleibst du dich in deiner webseite
ein
dementsprechend sollte es sehr sehr
sicher sein beim nutzernamen würde ich
dir empfehlen nicht das wort atmen zu
verwenden und auch nicht unbedingt den
vornamen oder ganzen namen weil das
einfach ist zu erwarten und was pastor
sollte auch sehr lang und sicher sein
und dann können wir auf den store gehen
ich will das jetzt einmal schnell aus
und dann gehe ich auch auf den store
jetzt installiert the process kann kurz
dauern
super und webos wurde installiert
das heißt das war schritt nummer zwei
glückwunsch ich finde noch einmal
schnell zeigen wie du hier zurück
reinkommst falls du jemals das mit dem
ssl manager noch mal machen muss das
heißt einmal zurückgehen
so sieht es aus wenn du bist das erste
mal eröffnet nachdem du dich wieder ein
luchs dann kann's auch websites gehen
und dann siehst du hier website titels
und dann kannst du offside rules klicken
und dann kommst du hier wieder ein
security und das ist gut dann gehen wir
hier mal links auf rappers in store
manager und dann haben wir hier die
installation also webseiten - machen
punkt com
falls du dich jetzt einloggen möchtest
kannst du hier rechts auf logintern
antenne klingen auf dieses icon klicken
wir mal dort auf und dann sind wir im
web press day sport drin angenommen das
funktioniert jetzt nicht direkt kann es
auch daran liegen dass du gerade erst
die domain registriert hast dann würde
ich einfach nicht wieder abmelden und
ein paar stunden wieder reinkommen dann
sollte es eigentlich auch funktionieren
falls du hier jemals wieder reinkommen
möchtest kannst einfach deine domain
eingeben
/ wpf nennen und ich dann mit den
edmonton user daten anmelden die du eben
bei der installation aus gewählt hast
grund könne jetzt eigentlich auch schon
schließen das brauchen wir nicht mehr
und dann gucken wir noch mal hier in die
schritte als nächstes können ein paar
wordpress konnt lagen lernen und
einstellen also das hier ist das
wordpress dashboard hier drin bearbeiten
wir unsere seite rechts haben wir
einfach nur so eine kleine übersicht
über news und updates das brauchen aber
nicht wirklich dementsprechend können
wir oben rechts auf ansicht anpassen
gehen und hier mal die ganzen checkboxen
entfernen damit dass ein bisschen
übersichtlicher wird und dann wieder auf
ansicht anpassen gehen und schon es ist
hier ein bisschen übersichtlicher hier
oben haben wir die etwa die werden wir
kaum benötigen hauptsächlich um uns
unsere webseite anzugucken
das immer tun indem wir hier über den
namen der website wann in diesem fall
mike rodgers und dann auf zur website
klicken
das öffne ich mal in einem neuen tab
also rechtsklick klingt nur ein tab
öffnen und so sieht jetzt meine website
aus nicht besonders schön aber es ist
eine website
daran werden wir jetzt noch arbeiten gut
die hauptarbeit werden wir hier links
tun haben hier links können wir die
beiträge bearbeiten rücken medien
hinzufügen und managen wir können seiten
hinzufügen kommentare managen das design
bearbeiten plugins hinzufügen benutzer
hinzufügen werkzeuge hinzufügen und
einstellungen bearbeiten das wird jetzt
natürlich ziemlich schwer und auch
ziemlich überwältigend aber keine sorge
da gehen wir nach und nach durch und
nach diesem tutorial wirst du alles
verstehen also einfach weiter folgen und
dann wird das schon gut
zunächst einmal würde ich mit ein paar
grundeinstellungen anfangen die ich in
jeder einzelnen websites mache die ich
neu starte den solltest du das auch
folgen also zunächst einmal mehr links
auf einstellungen und dann auf allgemein
und hier siehst du jetzt den titel der
website und den untertitel jetzt gerade
ist der titel my world race und
untertitel ist justin aber website
wenn ich hier mal meine webseite öffnet
die habe ich ja noch in dem tab hoffen
sich auch hier ein wordpress just
another side und hier oben im tab sehe
ich das auch
das heißt der titel wird hier angezeigt
den würde ich jetzt ändern
in deinem fall wahrscheinlich zusammen
unternehmen haben und vielleicht ein
kurzes logen oder halt der name deiner
webseite
das mache ich mal schnell also bei titel
der website gebe ich zum bessert sein
und beim untertitel lerne webseiten zu
erstellen
oder zu gestalten genau wichtig ist dass
in wordpress adresse und websites
adresse nichts verändert ansonsten kann
sein dass die seite crash und neu
anfangen muss gut dann komm mal runter
scrollen und auf änderungen speichern
gehen und wenn ich jetzt die seite
aktualisiert
dann hat sich das schon geändert klasse
als nächstes kam links emma auf benutzer
und alle benutzer gehen dann sehen wir
hier den ein benutzer das bist du in
meinem fall ist mein name im 22 dann
kann ich immer drauf klicken und mal
runter scrollen so spitzname den werde
ich jetzt zum beispiel zu ändern oder
irgendwas anderes eingeben und bei
öffentlichen namen wechsele ich das zum
spitznamen und und aktualisierte das
profil einmal und wenn ich jetzt zum
beispiel mache ich hier auf der website
hier zum beispiel ist der name gerade
öffentlich weil ich den namen noch nicht
eingestellt hat aber wenn ich die seite
aktualisiert
ist jetzt dieser spritzen haben
angezeigt dass das macht es ein kleines
bisschen sicherer gut dann kam noch mal
zurück gehen und als nächstes hoffmann
wir über einstellungen klicken auf
permalink
übrigens wenn ich dann sage dann meine
ich einfach dass ich mit der maus über
diesen bereich fahre das wort werde ich
noch öfter verwenden also permalink
und hier solltest du beitragseinnahme
auswählen das war in meinem fall schon
ausgewählt
dadurch würde zum beispiel eine
kontaktseite unter webseiten - machen
doch com / kontakt auffindbar sein wirst
du es nicht auswählen wäre es zum
beispiel unter webseiten - machten punkt
com / 2020 19 27 / kontakt das ist nicht
so gut für die suchmaschinenoptimierung
also dass die seite höher bei google
lenkt und sie doch einfach nicht so gut
aus also änderungen speichern
super dass werden auch schon die
grundeinstellungen die ich immer machen
würde
das heißt schritt nummer 36 hey ich bin
es nochmal falls das video bisher
gefällt kannst du auch gerne einen
daumen hoch da lassen das hilft mir sehr
mit dem youtube algorithmus vielen dank
schon mal für eine erste seite erstellen
und diese zur homepage machen wenn wir
uns mal hier unsere webseite angucken
sehen wir hier hello world das ist ein
blogpost also was wir einen beitrag
wir wollen aber ihr eine homepage haben
dementsprechend müssen wir zunächst
einmal eine seite hinzufügen und diese
dann zur homepage machen
dafür können wir im dashboard links über
seiten hoffen
und dann auf erstellen klicken dann kann
ich hier der seite ein titel geben zum
beispiel könne nicht home eingeben und
dann auch veröffentlichen gehen und noch
mal veröffentlicht und wenn ich jetzt
die seite visier hat sich noch nichts
geändert
das heißt wir müssen die homepage
erstmal noch zur homepage machen
dementsprechend gehe ich einmal hier
zurück und dann kann ich hier links auf
einstellungen und dann lesen gehen und
bei deiner startseite zeigt wenn wir
eine statische seite und bei homepage
wähle ich dann rum und dann gehen wir
auf änderungen speichern
wenn ich jetzt die seite haben wir eine
homepage super also erst erstellen und
so breitmachen check jetzt gehen wir
langsam schon etwas schneller durch
super im nächsten schritt können wir das
richtige team installieren
auch ein sehr interessanter punkt wie
eben schon erwähnt sieht die seite ja
noch nicht besonders gut aus das liegt
auch an die ein team gibt dir vor was du
an deiner seite gestalten kannst also
zum beispiel was für eine art menü durch
erhoben haben kannst was für farben zu
verwenden kannst was für inhalte zu
verwenden kannst das alles wird über
steam festgelegt es gibt in regress
tausender teams die können wir uns auch
mal angucken in dem wir hier links über
design hoffer und dann auf teams kriegen
und hier siehst du dann so eine
übersicht
an möglichen teams wir können auch zum
beispiel auf dem inn zufügen klicken und
dann siehst du dir noch mehr vorgestellt
populär neueste da gibt es ganz viele
von einige sind komplett gratis
andere sind premium das heißt es gibt
eine gratisversion und premium version
und es gibt auch noch andere die nur in
der premium version vorhanden sind
wenn du dir hier mal eins von den
angriff zu sagen wie man zum beispiel
dass hier dann hast du so eine vorschau
die sehen da immer super aus das ist
halt das was sie gemeinsam haben
das problem ist meistens jedoch dass sie
gar nicht so viel erlauben was zu
verändern kannst und das kannst du
meistens erst im nachhinein sind
dementsprechend gehe ich hier mal fix in
diesem video werden wie rosen dhabi op
verwenden das sieht man sogar hier ist
eines der beliebtesten das sieht jetzt
in der forschung gar nicht so
interessant aus jedoch hat den großen
vorteil dass du quasi alles verändern
kannst und das für unsere zwecke perfekt
ist das heißt wenn du dieses video
verfolgen möchtest solltest du auch in
der pc installieren ansonsten kannst du
da leider nicht weitermachen ist ja auch
gratis zum glück also um das zu
installieren kannst du über design
hoffen auf teams gehen neues dem
hinzufügen und dann kannst du hier
rechts nach ocean david suchen und dann
findest du es hier dann kannst du auf
installieren gehen und aktivieren
klasse jetzt ist es unser aktives team
und wenn ich mal die seite aktualisieren
dann sieht das schon anders aus nicht
unbedingt für hübsche aber definitiv
anders und jetzt können auch die seite
einfacher bearbeiten gut wenn mich jetzt
mal zurück im dashboard sind sehen wir
jetzt auch diese nachricht dieses team
empfiehlt die folgenden plugins
elementen extra interviews
wir können jetzt einmal ganz schnell
hier in die schritte gehen also das
richtige team installieren check dann
sehen wir schon den nächsten schritt
nämlich die richtigen plugins
installieren das wäre jetzt zum beispiel
alle mentor und ocean extra was wir also
einmal machen können ist hier auf
installation der plug-in staaten kriegen
und dann werden wir hier alle menschen
extra aus
bei agence installieren und übernehmen
die beiden werden wir in diesem tutorial
verwenden wir brauchten auch noch ein
weiteres plugin dafür können wir ja
längst auf plug ins und dann auf
installieren gehen dann kann ich noch
einmal schon fix gehen das ist noch mal
so eine werbung von elemento skip setup
business hier kann mich jetzt wieder
werbung diese mitteilung ablehnen und
eine schnellbahn sicht anpassen die
beiden wieder rausnehmen und diese
mitteilung ablehnen perfekt gut also
sollte zu den plugins da gehen wir links
aber auch plugins und installieren das
ist ähnlich wie bei teams jedoch geht es
hier um die funktion deiner seite
du kannst es dir vorstellen wie bei
deinem handy von grund auf kommt ein
handy nicht mit instagram oder whatsapp
das sind alles apps die duh installieren
muss um diese funktion zu deinem
smartphone hinzuzufügen und das gleiche
haben wir bei wordpress plugins von
grund auf kommt es nicht mit der
funktion eines onlineshops dafür müssen
wir ein bestimmtes plugin installieren
davon gibt es tausende plugins kannst du
dir hier allemal so angucken also hier
in die vorgestellten oder populär zb
kannst du mit guttenberg seiten
bearbeiten mit contact vom selben kannst
du kontaktformulare machen mit jost seo
kannst du dafür sorgen dass deine seite
weiter oben in den suchergebnissen
erscheint mit williams' kannst du ein
online-shop bauen
also da gibt es ganz viele von und wenn
du ein weiteres plugin hinzufügen
möchtest was wir jetzt nämlich tun
wollen
kannst du hier zum beispiel danach
suchen in meinem fall möchte ich das
plug-in erwartung elements hinzufügen
da würde ich dir empfehlen dass auch
hinzuzufügen das würden auch super
hilfreich hier sehen wir das dann da
kannst du dann auch auf jetzt
installieren gehen und das dann auch
einmal aktivieren klasse jetzt haben wir
alle nötigen plugins hier sehen wir die
auch einmal werden sie oft plugins und
installierte plugins g ist elementar
damit brauchen wir die seite 1 watt
elements das gibt uns ganz viele
vorlagen für die seiten und ocean extra
das brauchen wir um ein paar extra
einstellungen zu haben
genau und die anderen die kampfzeit
brown selbst sind aber okay gut das war
dann auch schon schritt nummer sechs die
richtigen plugins installieren noch
einmal kurz zu den punkt wie du eben
gesehen hast gibt es ganz viele plugins
wenn du möchtest kannst du auch andere
plugins ausprobieren dort würde ich dir
einfach empfehlen die einmal zu googeln
das ist nämlich das tolle bei wordpress
es gibt millionen von nutzern und auch
tutorials das heißt dort wird eigentlich
für jedes plugin auch eine anleitung
finden und dann kannst du dich da ein
bisschen einlesen und damit herum
experimentieren gut im nächsten schritt
können wir die homepage mit ocean extra
vorbereiten dafür können wir einmal auf
die homepage gehen hier jede webseite
des in drei teile aufgeteilt
du hast hier oben den kopfbereich oder
auch hacker genannt das normalerweise
einmal in seinen titel oder logo unten
und navigation
dann haben wir hier den body der enthält
einfach alle informationen die du da
stellen möchtest und dann haben wir hier
unten den futter also diesen beiden
balken das normalerweise auch nochmal
kontaktinformationen vielleicht eine
anfahrt oder auch noch mal eine
navigation und hat so ein copyright
bereich wir bearbeiten unsere seite auf
zwei weisen die erste ist im team also
mit dem customizer alles was wir damit
bearbeiten ist seiten übergreifend das
heißt wenn ich darin zum beispiel den
hella bearbeite sieht er auch auf der
kontaktseite oder auf der über uns
genauso aus die zweite weise ist mit dem
plug-in element vor
das hast du auch schon im intro gesehen
damit können einfach mit drag and drop
im copy on pay ist unsere seiten ganz
einfach bauen
damit bauen wir den body und den futter
da man mit elemente aber nicht den hätte
also wirklich gut bauen kann und ist
halt doch nicht seiten übergreifend wäre
bauen wir den händler mit ocean view
also dem team also ist auch möglich den
header mit elemente zu bauen oder zum
beispiel auch den futter motorischen bip
zu bauen
das zeige ich dir alles dann noch ein
schritt 20 und 19 und 18
aber jetzt erst mal grundlegend wollen
wir anfangen und hier die seite ein
bisschen aufräumen damit wir erst mal
beginnen können die seite mit einem
mentor zu bauen da werden wir auch ein
bisschen mehr zeit mit verbringen weil
es so ziemlich der wichtigste punkt ist
und sobald wir das haben wir gelernt
haben gehen wir weitere und dort in die
navigation und bearbeiten den header mit
ocean therapy und dann zeige ich dir
halt noch wie die theoretisch auch den
futter mit motion der bdp bauen könntest
oder auch theoretisch den header und
elemente oder auch gar kein händler also
da noch verschiedene varianten aber
jetzt fangen wir erstmal an und räumen
hier ein bisschen auf um das zu tun
können wir die seite erst mal bearbeiten
das heißt ich gehe hier wieder ins
dashboard ist man in einem neuen tab
online gehen wir links auf seiten alle
sein und gehen hier dann auf home weil
wir haben von die homepage erstellt und
die wollen wir jetzt als erstes mal war
aber in also kriege ich hier drauf super
dadurch dass wir das plug in motion
extra installiert und aktiviert haben
haben wir hier unten die motion der bdp
settings damit können wir jetzt die
seite etwas aufräumen
fangen wir erstmal an und wählen bei
content layout 100 prozent fit und gema
auf aktualisieren
und wenn ich jetzt die seite
aktualisiert
ist das hier rechts weg super als
nächstes gehen wir links auf titel und
dann gehen wir hier auf disable dann
aktualisiere ich das mal
gehe hier wieder nach fresh und auch
dass es weg klasse als nächstes gehe ich
auf ich wollte nur dass weg geht so
dann gehe ich auf tour gehe längst
online gehe ich auch hier auf disable
und disable aktualisieren und dann ist
auch das weg super das letzte was wir
verschwinden lassen wollen ist hier oben
über dem titel hast du noch so eine
kleine weiße linie die wahrscheinlich
jetzt kaum sehen dass es die top paar
die brauchen wir auch nicht das heißt
hier links kann ich auf händler gehen
dass peter bauer und disable annahme
aktualisieren möchte das jetzt noch mal
refresh ist das auch weg die schritte
solltest du jetzt auch einmal nachmachen
kannst du auch immer wieder rückgängig
machen also da keine sorge gut das wäre
auch schon schritt nummer 7 homepage mit
ocean extra vorbereiten
das ganze mache mir jetzt noch mal mit
ein paar mehr seiten um zeit zu sparen
das heißt welcher stelle jetzt nochmal
eine kontaktseite über uns services und
macht dort auch noch mal die ocean extra
einstellung du kannst das natürlich auch
erst später machen oder auch im
nachhinein immer neue seiten hinzufügen
ich mach setzen einmal um zeit zu sparen
das heißt hier kann ich einmal
zurückgehen
und da gehe ich an auf erstellen gebt
der neuen seite zum beispiel den titel
kontakt haben auch veröffentlichen noch
einmal veröffentlichen
und da kann ich auch schon direkt die
einstellung hier machen also mein konnte
layout 100% head-up-display topper
disable titel des öl- und futter disable
und des apple aktualisieren
und wenn ich mir angucke ende mich auf
berlin clique und dann hier auf den link
klicken sehe ich habe eine lehre kontakt
also perfekt den schritt wieder höre ich
jetzt mal für die anderen seiten ja so
zurück erstellen aber macht das ein
bisschen schneller
ok klasse jetzt habe ich eine homepage
kontakt service ist und über uns und die
sind alle fertig um sie zu bearbeiten
da ist wäre auch schon schritten um 8
mehr seiten erstellen und ocean extra
einstellungen im nächsten schritt können
wir den elementen page bilder schon
starten und unsere seite wirklich die
seiten
ich kann hier erstmal ein paar der tat
schließen also zum beispiel kontakt
ruhig nicht und auch nicht mehr plugins
gut also hier sind wir jetzt in den
seiten und ich möchte erstmal anfangen
weil die homepage bearbeiten
dafür kann ich also auf hohn klingen und
um jetzt die seite zu bearbeiten können
wir hier auf mit elementen klingen und
dann öffnet sich schon der elemente page
bilder
das wäre ein schritt nummer 9 elemente
page später starten
in schritt nummer 10 können wir einmal
sehen wie eine seite elemente und
überhaupt aufgebaut ist elementar ist in
zwei abschnitte aufgeteilt
hier rechts hat eine vorschau von allem
was auf deiner seite passiert und links
kannst du alles bearbeiten wenn du die
vollversion deiner webseite ansehen
möchtest kannst du auch hier auf editor
ausblenden kleben dann sie ist einmal
die vollversion
ich öffne es aber mal wieder du kannst
auch die mobile oder tablet version
deiner seite angucken in dem durch ihr
unten links auf responsive modus text
und dann zum beispiel tablet aus willst
oder mobil
das wird später auch noch mal nützlich
sein ich kriege ja mal wieder auf
desktop und dann responsive modus okay
als erstes möchte ich einmal schnell
erklären wie überhaupt eine seite ein
element uhr aufgebaut ist dafür
importiere ich einmal schnell eine
vorlage einer seite also eine fertige
seite herein weil es das erklären um
einiges einfacher macht dem schritt kann
es auch folgen indem du hier einmal auf
etwa thomas klix das ist eines der
plugins was wir freundin studiert haben
online-games dorf wie geht's dir mir
jetzt ganz verschiedene vorlagen darauf
gehen wir später auch noch mal mehr im
detail ein
sagen wir jetzt einfach mal nicht nehmen
zum beispiel dass hier geht dann auf ins
tor kit und da kann ich auch auf judith
gehen wandern sehe ich jetzt die
verschiedenen seiten das hier oben
kannst erst mal ignorieren
sagen wir mal ich möchte hier die
homepage importieren also kann ich hier
auf insert template gehen dann
importierte eben die seite rein
und schon haben wir hier eine fertige
seite super wie ist eine seite in
elemente aufgebaut wenn ich meine maus
hier außenrum bewege siehst du ja das
ist außen blau markiert ist das ist ein
abschnitt
wenn ich immer roters call auch hier ich
bewegt die maus außen rum und da sieht
man dass es außen blau markiert das ist
auch ein abschnitt
das geht hier so weiter hier haben wir
den nächsten abschnitt
und hier den nächsten abschnitt das
heißt eine seite ist in mehrere
abschnitte aufgeteilt in diesen
abschnitten finden wir spalten
zum beispiel hier rechts ist eine spalte
die ist grau markiert uns hier links
finden wir auch eine spalte die ist auch
kaum markiert hier links haben wir auch
wieder eine spalte kann man sehen dass
kaum markiert und hier rechts zum
beispiel auch eine hier haben wir sogar
3 1 2 und 3 einige der spalten sind leer
zum beispiel die sich rechts andere
wiederum sind gefüllt zum beispiel die
ihr links ist mit einem text gefüllt und
hier mit noch einem text und hier noch
an text das ist dann blau umrandet und
das sind widgets
hier haben wir zum beispiel ein foto mit
hier haben wir einen text bridget und
hier haben wir einen button widget
richards kannst du hier links finden
wenn du auf diese neuen werke kleckst
hier
das sind alles richards du hast einen
inneren abschnitt überschrift bild text
video buttons trainer abstand
ganz ganz viele das ist also quasi der
inhalt deiner seite
also um das amt zusammenzufassen
deine seite besteht aus mehreren
richards in spalten und diese sind in
verschiedenen sektionen das wort
aufgebaut damit er eine seite besser
unterteilt werden kann
gut das wäre auschwitz schritten absehen
wie ist eine elementare seite aufgebaut
als nächstes kommen jetzt auch mal
anfangen und unsere eigenen texte
bearbeiten also von selber anfangen und
mit elemente unserer seite bauen
dafür gehe ich jemand wieder ein element
ohr rein und löschen mal eben das
template was wir importiert haben
dafür kann ich einfach hier oben auf ex
bei den jeweiligen abschnitten klingen
um die einmal zu löschen und die seite
leer zu haben
super ich möchte jetzt erstmal anfangen
und meinen eigenen abschnitt hinzufügen
und dann darin text bearbeiten um einen
eigenen abschnitt hinzuzufügen kann ich
hier auf dieses pinke plus klicken und
dann die struktur und darin aus werden
also wie viele spalten da drin sein
sollen eine 234 ein drittel rund 232
millionen eintritte oder eine von den
anderen ich als jetzt mal simpel und
fehle einfach mal eine okay jetzt haben
wir hier diese spalte links hat sich
dadurch auch schon das bearbeitungs menü
geöffnet hier haben wir layout stil und
erweitert den abschnitt wollen wir jetzt
aber erstmal nicht bearbeiten das machen
wir später
wir fangen jetzt erst mal an und
bearbeiten den text darin der noch nicht
existiert das heißt wir müssen erstmal
hinzufügen dafür kann ich einmal hier
auf diesen neuen vierecke klingen um
wieder in die grundeinstellung zu kommen
und hier sehe ich ja all diese widgets
wenn du ein widget in eine spalte
einfügen möchtest kannst du es ganz
einfach auswählen sagen wir mal wir
wollen mit einer überschrift anfangen
also einem text dann kriegst du darauf
schießt es nach rechts und wartet bis
dieser blaue balken erscheint und dann
kannst du loslassen
und dann hast du hier die überschrift
und jetzt hat sich auch hier links schon
das bearbeitungs menü geöffnet hier
haben wir inhalt stil und erweitert
alternativ wenn ich jetzt zum beispiel
mal wieder in richards wäre
und hier diesen text bearbeiten möchte
könnte ich auch entweder darüber fahren
und dann hier rechts auf diesem schiff
klingen oder ich kenne auch darüber
fahren und einen rechtsklick überschrift
arbeiten drücken ok also ich habe mir
jetzt inhalt stil und erweitert fangen
wir erstmal mit dem inhalt dieser
überschrift an das erste was wir hier
haben ist der titel
hier kann ich also den inhalt ändern
beispielsweise mache ich jetzt meine
seite übers surfen und schreibt hier ein
wir lieben surfen und schon hat sich der
text geändert
als nächstes könnten wir einen link
einfügen das bedeutet wenn jemand auf
wir lieben surfen klingen würde würde er
zu diesem link geführt werden
da haben wir verschiedene optionen wenn
ich das beispielsweise zu youtube führen
wollte
kann ich auf youtube gehen die url
kopieren und dann hier link einfügen mit
https doppelpunkt / / und wenn dann
jemand auf ihr leben surfen klickt
landet er auf youtube.com alternativ
könntest du auch wenn du bereits seiten
hinzugefügt hast zum beispiel kontakt
eingeben und dann schlägt elemento
reinem die kontaktseite vor da kannst du
drauf klicken und dann führt das zu
unserer kontaktseite dort kannst du auch
auf das zahnrädchen klicken und sagen in
einem neuen fenster öffnen und wenn
jetzt jemand auf jede lebenshilfen
klickt öffnet er die kontaktseite in
einem neuen tab das sind alles ein paar
optionen in diesem fall möchte ich hier
gar keinen linken haben deswegen
entferne ich den mal und dann kann ich
hier wieder auf klingen perfekt als
nächstes haben wir die größe doch kannst
einfach angeben wie groß diese
überschrift sein soll
das heißt hier könnte ich zum beispiel
groß auswählen oder xxl da verändert
sich jetzt aber nicht viel weil die
größe
und wir es eigentlich im stil einfügen
also das kannst du im grunde lassen den
html können auch nur lassen was sie noch
interessantes ist die ausrichtung jetzt
gerade das ist ja hier links wir können
das auch zentrieren
dann ist es jetzt zentriert wo du noch
recht packen ich lasse es mal zentriert
und dann können als nächstes in den stil
gehen das ist am spannendsten hier
da haben wir als erstes mal die text
farbe zu dem thema habe ich auch auf der
startseite unter statt vier ein super
artikel verlinkt der ein bisschen darauf
eingeht wie man mit farben arbeiten
sollte aber um es im grunde noch kurz
zusammenzufassen man sollte nicht mehr
als drei oder vier verschiedene farben
auf seiner seite verwenden weil sonst
einfach zu bunt wird das würde ich dir
auf jeden fall auch empfehlen aber da
kannst du natürlich gucken wie es auf
deiner seite passt um jetzt hier die
farbe von diesem text zu ändern können
wir hier rechts auf die farbe klicken
und da können wir hier das ganzem herzen
und den farbton zu ändern
du kannst auch hier die sind bald nach
links oder rechts ziehen und eine ganz
andere farbe auszuwählen
sagen wir mal zum beispiel hier so ein
lila und du kannst das ganze auch
transparenter machen indem du diesen
balken nach links schießt je nachdem was
du haben möchtest
sagen wir mal so angenommen beweis
bereits welche farben verwenden möchtest
kannst du auch hier unten den hacks code
einfügen
um das wieder zu schließen kannst du
noch mal auf die farbe klingen und wenn
du es wieder rückgängig machen möchtest
kannst du hier auf löschen klicken
ich stieß das ganze mal wieder das ist
natürlich super und auch schön einfach
ein kleines problem besteht darin das
ist relativ lange dauert wenn es für
jede einzelne farbe mast und auch für
jeden einzelnen text weil dir auch ein
bisschen übereinstimmen sollten und
zudem besteht das problem dass wenn du
beispielsweise eine farbe für normale
text verwendest du dann im nachhinein so
ich möchte die vielleicht doch nur ein
kleines bisschen verändern dann müsstest
du in jedem einzelnen text gehen und
dort die farbe anpassen
das dauert natürlich ganz schön lang
dementsprechend hat element eine
funktion eingebaut die uns das ganze vor
nämlich hierbei text farbe sehen wir
jetzt kasten da steht hier weil wir
gerade die farbe selber verändert haben
was daraus werden kannst wenn du hier
klickst eine primär farbe sekundär farbe
oder einen von den anderen das sind
sozusagen vorgegeben nach farben die du
immer wieder verwenden kannst sagen wir
mal ich möchte hier die primär farbe
verwenden dann ist es dies ableitungen
wenn ich jetzt zurück in die widgets die
in dem ich hier auf diese 94 gekicke und
dann sagen wir mal zum beispiel normalen
text einfügen also hier auf tags electro
optical das ist nach rechts ziehen und
darunter fallen lassen und dann auch
hier mal eben ins tier gehe
und hier die text farbe auch zu primär
andere dann ist die auch blau
das hat uns schon mal eine menge zeit
gestartet und wenn ich jetzt sagen würde
ich möchte dass meine primär farbe
vielleicht doch ein anderer blau ton ist
dann kann ich die primär farbe verändern
und dieser text und überschrift würden
sich dann auch automatisch verändern das
aber nicht nur auf der homepage sondern
wenn ich zum beispiel auch die primär
farbe auf der kontaktseite verwende
würde sich sogar auch dort der text
verändern
das heißt wenn ich diese primär habe zb
ändern möchte kann ich hier links auf
dieses bürger icon klicken globale
einstellung call center profi und dann
hier auf primär farbe klicken und die zb
bearbeiten wenn ich jetzt von grünton
auswähle
ferner hat sich das bei beiden das
solltest du also auf jeden fall im kopf
beiden wenn du diese globalen
einstellungen verwendest falls du was
änderst ändert sich das überall wo du
sie verwendet hast sagen wir mal ich
möchte jetzt dass man blau
diese farbe hat das sollte man primär
farbe seien sekundär ist gut die text
farbe gefällt mir auch die accent farbe
möchte ich vielleicht liegt ein bisschen
anders grün haben sagen wir mal so'n
grünton und ich kann sogar auch eine
eigene farbe hinzufügen indem ich hier
auf ökologie dieser kann ich den titel
geben zum beispiel bands
also diese knöpfe und dann rechts hier
eine farbe aus werden indem ich ja mal
drauf kirche online zum beispiel möchte
ich dass meine buttons eine rote farbe
haben und dann habe ich dadurch so ein
shortcut kann ich hier wieder rauf
klicken
und jetzt habe ich auch diese
hinzugefügt das heißt du kannst
theoretisch auch noch mehr farben
hinzufügen die verschiedene funktionen
haben oder du kannst natürlich auch wie
folgen einfach in jeder farbe gehen und
die selber bearbeiten
wenn dir das gefällt kannst du auf
speichern gehen und dann ist es
abgespeichert dann gehe ich mal zurück
und noch mal zurück ja exit und da sind
wir hier zurück in elemente in der
normalen version
und wenn ich jetzt wieder den titel
bearbeiten möchte kann ich einfach hier
auf den titel klicken und arbeite ich
dem wieder das wäre dann auch schon
alles zu text farben als nächstes können
wir die typographie gehen also in den
text selber das funktioniert quasi
gleich wie bei den farben hier hast du
erst mal primäre überschrift oder du
kannst auch eine eigene bearbeiten
dafür kannst also hier auf diesen stoff
klicken und dann stand bei mir schon
kasten
falls bei dir dann immer noch primär
überschrift da steht dann werden die
bearbeitungen hier links wahrscheinlich
gar nicht funktionieren
falls das der fall ist kannst du einmal
hier auf auf standard einstellungen
zurücksetzen klicken und dann sollte das
auch funktionieren
die schriftfamilie kannst du also den
front wechseln
gerade das ist auf roberto gestellt du
könntest auch zum beispiel irgendwas
anderes verwenden diesmal spielt das wir
ich möchte in meinem fall amarante
verwenden
und klickt er da mal drauf und dann
haben wir schon dir diesen fort dann
kannst du auch die größe von den text
verändern kannst es ganz groß machen
oder ganz klein
ich würde wahrscheinlich ein mittelding
wählen dann haben wir den schritt
das ist einfach vidic diese schrift ist
zum beispiel kannst du es auf 900
stellen dann wird es ein bisschen dicker
300 dann würdest du ja ich nehme mal 600
umwandlung ist gerade auf vorgabe
gestellt kannst versalien auswählen dann
ist alles groß kleinschreibung
großschreibung oder normal sagen wir mal
großschreibung stil kannst du normal
oder kursiv auswählen oder schräg
gestellt und bei der auszeichnung kannst
du das unterstreichen überstreichen
durchbrechen oder nichts machen
bei der zeilen höhe wenn du zwei zeilen
hättest dann könntest du dort den
abstand zwischen diesen zwei zeilen
auswählen
ich lass das jetzt mal hier und der
zeichner abstand ist einfach der abstand
zwischen den buchstaben aber das sollte
auch gut sein
das wäre auch eigentlich schon alles zur
typografie hier kann ich mal wieder auf
den stoff klicken
und genauso wie bei den farben eben
könntest du auch stattdessen statt auf
custom zu gehen eine primäre überschrift
auswählen oder eine sekundäre oder im
haupttext oder hervorgehobenen text das
heißt das sind wieder globaler
einstellung die du einmal einstellen
kann und dann verwenden kannst um der
zeit zu sparen
zum beispiel könnte ich hier auf primäre
überschrift gehen und dann würde schon
wieder ganz anders aussehen
und jetzt könnte ich auch die primäre
überschrift bearbeiten also kann ich
hier wieder rauf gehen global
einstellung koloss unterhalb hgv und
dann runter scrollen global topographie
und dann haben wir hier eine primäre
überschrift sekundär überschrift
haupttext und hervorgehobenen text geht
man auch primär überschrift familie
amarante größere kann ich einstellen
ich würd zwischendurch übrigens auch
immer mal hier den editor ausblenden um
zu sehen wie es in der live-version
aussieht erklärt primar überschrift also
wieder bearbeiten kann ich weder der
inschrift schnitt arbeiten das alles
sagen wir mal so es gut dann könnte ich
das ganze noch mal für eine sekundäre
überschrift machen für den haupttext ich
würde jetzt wahrscheinlich überall
amarante einstellen damit ich mir da die
zeit sprache aber wenn ich das jetzt
einmal macht dann muss ich das später
nicht immer wieder machen
ok klasse und wenn du wolltest können es
sogar noch einen weiteren stil
hinzufügen indem drauf stylist diesen
unbegrenzt und dann dort auch vorgaben
macht das kann dir also auch wieder eine
menge zeit sparen
gut dass es aber auch schon wieder das
den globalen einstellungen hier also
gehe ich mir auch speichern
gm zurück und nochmals zurück und dann
auf exit die globalen einstellung sind
auf jeden fall ein sehr cooles tool was
in eine menge zeit sparen kann weil du
halt diese voreinstellung einmal machst
und dann nur noch darauf gehen muss
sodann bearbeiten wir mal wieder hier
den stil texten ist einfach der schatten
von deinem text er kann nicht mehr
aufklären den könntest du also zum
beispiel nach rechts verschieben oder
nach links verschieben nach oben oder
unten die farbe von den staaten ändern
zum beispiel können wir den auch roth
machen oder pink blau denn auch weniger
transparent machen und auch die
unschärfe verstellen also jetzt wäre es
super verschwommen oder superscharf aber
ich würde hier mal gar kein schaden
wären vermutlich ok über blend modus
brauchen wir nicht und erweitert
brauchen wir auch erst mal nicht gut
dann gehe ich jemand wieder zurück in
die widgets und als nächstes können wir
hier diesen normalen text bearbeiten
weil hier oben haben wir eine
überschrift bearbeitet darunter haben
wir einen normalen text editor eingefügt
da gehe ich dann also auch mal auf und
hier haben wir halt auch wieder inhalt
stil und erweitert der inhalt hier
hat sich jetzt tatsächlich ein bisschen
verändert im vergleich zum titel
was wir hier bearbeiten können ist
einmal ganz normalen text dann kann ich
also verändern was andere schreiben
ich kann das fett machen indem ich hier
was markieren und dann hier auf b klicke
ich könnte irgendwas kursiv machen ich
könnte etwas unterstreichen das
funktioniert sehr sehr ähnlich wie word
oder google docs ich kann sogar ein
aufstellungs liste machen oder eine
nummerierte liste sagen wir mal so zum
beispiel eins und zwei ich kann sachen
verlinken indem ich das mag ihre hier
auf dieses link einfügen symbol klicken
und dann einen link einfügen oder zum
beispiel nach einer suche zum beispiel
kontakt dass die einfüge dann könnte ich
auch noch in den link optionen sagen
dass es in der neuen tab geöffnet werden
soll und auf aktualisieren gehen
und jetzt haben wir hier auch ein link
das funktioniert recht ähnlich wenn ich
ihm herunter scroll haben wir noch ein
paar andere einstellungen die brauchen
wir aber nicht in dem text dann kann ich
auch rot grün und hier ins ziel gehen
und hier haben wir quasi das gleiche
bloß dass dieses mal die ausrichtung im
stil des staates im inhalt also kann ich
das zum beispiel zentrieren kann es
links lassen ich kann die texte ändern
von primär- als sekundär oder text ich
kann die typographie rendern von
haupttext primäre überschrift oder nukem
was auch immer ich haben möchte sagen
wir mal haupttext weil es wäre ja ein
haupttext und in erweitert müssen wir
auch erst mal nicht reingehen
okay das wäre auch schon alles zu texten
da bin ich jetzt recht langsam
durchgegangen und auch recht im detail
weil es die ersten risse waren mit denen
wir arbeiten
das gute ist jetzt aber das quasi jedes
weitere widget mit dem wir arbeiten sehr
sehr ähnlich aufgebaut ist
im grunde muss es nur einfügen und dann
siehst du hat links inhalt stil und
erweitert und dann kann man dadurch die
einstellung gehen die sagen quasi auch
was sie machen man kann damit rum
spielen und wenn es einem nicht gefällt
kann man es immer wieder rückgängig
die machen was soll nämlich auch schon
der nächste punkt wäre dinge rückgängig
machen oder auch wieder herstellen wir
haben ja jetzt eine ganze menge hier
bearbeitet und angenommen mir gefällt
das nicht was ich gemacht habe habe ich
mehrere optionen und das rückgängig zu
machen
du kannst das über die tastatur machen
am windows-pc musste dafür strg und z
drücken am mac ich glaube ctl oder c n b
und c
also wenn ich das hier macht siehst du
gitter zurück hast du auch machen kannst
ist hier unten links auf verlauf klicken
und dann siehst du hier alles was du
gemacht hast seitdem du das letzte mal
gespeichert hast das heißt ich könnte
zum beispiel hier auf text editor
bearbeitet klingen und dann geht er auf
diesen stand zurück das könnte ich auch
ein paar mal öfter machen oder auch
wieder in die zukunft gehen was auch
machen kannst ist in die revision gehen
dort siehst du alle änderungen die duh
abgespeichert hast also wenn wir zum
beispiel das gefallen hat was ich
vorgestern gemacht habe und das habe ich
gespeichert kann ich in die revision
gehen
und dann habe ich hier meinen revision
zum beispiel was ich vor zwei tagen
gespeichert habe oder vor drei tagen
wenn ich da dann wieder drauf gehen
wollte könne nicht einfach draufklicken
dann ändert er hier den inhalt wieder zu
dem stand von vor drei tagen und ich
kann auf speichern gehen das ist also
super falls irgendwelche änderungen
vorgenommen hast die du eigentlich gar
nicht machen wolltest oder nachhinein
vielleicht bereust genau das wäre dann
auch schon schritten mal zwölf
wahrscheinlich einer der einfachsten
aber auch sehr sehr wichtig und
hilfreich
im nächsten schritt wollen wir mal
buttons bearbeiten dafür gar nicht hier
wieder in alter mentor eingehen bevor
wir das machen möchte ich einmal schnell
diesen text hier löschen weil der
eigentlich unnötig vater war nur ein
bisschen was zeigen also kann ich da
einmal überholen und dann rechtsklick
und auf löschen jetzt ist er weg dann
gehe ich hier mal wieder in die widgets
super wir haben hier jetzt ein abschnitt
mit einer spalte drin wo wir surfen drin
steht
ich würde hier drunter jetzt gerne zwei
buttons haben
ein links und ein rechts das ist
natürlich etwas schwierig wenn wir nur
eine spalte haben ich möchte das aber
auch alles in einem abschnitt beiden
damit wir später ein hintergrundbild
einfügen können was alles beinhaltet um
das zu verwirklichen kann ich jetzt ein
super hit hinzufügen nämlich einen
inneren abschnitt da kann ich immer
drauf klicken und den hierunter fielen
surfen packen dann wisst ihr nämlich
noch in diesem abschnitt aber unter
dieser einspielte und hier habe ich
jetzt links und rechts jeweils eine
spalte
ich könnte sogar noch eine dritte spalte
oder eine vierte sparte hinzufügen indem
ich rechtsklick machen und auf neue
spalten klicke jetzt hätte ich sogar
drei ich kann die aber auch wieder
löschen nämlich rechtsklick drauf mache
und löschen pflege so jetzt habe ich
hier zwei spalten innerhalb meines
großen abschnittes das ist super wenn
ich die bauarbeiten wollte könnte ich
auch hier auf inneren abschnitt arbeiten
klicken und dann zum beispiel angeben
wie breit das sein soll
da gehen wir aber später noch mal mehr
darauf einen wenn wir den anderen
abschnitt bearbeiten damit du die
einstellung dort siehst ok dann gehe ich
mal hier wieder auf die visuals und hier
möchte ich jetzt erstmal einen button
einfügen also haben wir hier den button
den kann ich jetzt anklicken und hier in
die linke spalte ziehen und fallenlassen
wie auch schon bei text haben wir jetzt
wieder inhalt stil und erweitert das ist
in jedem budget der inhalt hat sich hier
jetzt natürlich ein bisschen verändert
im vergleich zum text aber es auch recht
einfach
bei typ haben wir gerade vorgabe
ausgewählt da kann es auch mal drauf
klicken und zum beispiel informationen
auswählen erfolgsmeldung das ist einfach
so ein paar vorgefertigte bei uns mit
bestimmten die sein die du hier aus wenn
kannst macht aber auch keinen großen
unterschied den wir informationen bei
text steht hier klicken das würde ich
gerne zu warum fragezeichen ändern also
kann ich hier reingehen
warum fragezeichen schreiben und jetzt
kommt wahrscheinlich das wichtigste über
bans nämlich der link der sinn von
buttons ist ja
dass du darauf text und etwas passiert
beispielsweise das auf eine andere seite
geleitet wird oder dass du runter
scrolls hier im link kann es jetzt also
zum beispiel zügen der seite verlinken
beispielsweise könnte ich zu youtube.com
verlinken dem ich hier die url kopieren
und dann hier einfügen
das hast du steckst gesehen ich kann
dann auch wieder in den link optionen
einstellen dass es in der neuen tab
geöffnet werden soll oder nicht du hast
auch die option dass du doch nach einer
seite suchst die du bereits erstellt
hast zum beispiel kontakt wenn ich hier
anfangen den namen anzugeben würde mir
schon die kontaktseite vorgeschlagen da
kann ich dann drauf klicken und dann
leitet es zur kontaktseite weiter oder
auch noch eine weitere option ist nicht
dass mein lächeln das du dafür sorgt
dass die seite auf einen bestimmten
bereich der seite unter scrolls wenn man
darauf klickt das zeige ich dir immer in
diesem fall wenn ich hier jetzt hashtag
mehr ein gäbe würde das nachher
funktionieren da gehe ich noch mal
später aber auf ein merkte dass auf
jeden fall mal kannst du auch ruhig
mitmachen bei der ausrichtung kannst du
angeben wo das in dieser spalte
ausgerichtet sein soll zb zentriert
rechts links machen wir mal zentriert
gucken wir auch mal schnell wie das
aussieht in der großen version ja
nikolaus ok dann kann ich hier wieder
auftreten und das zu bearbeiten
als nächstes haben wir die größe die ist
gerade auf klein gestellt du kannst du
auch mittelmäßig groß machen groß und
extra groß lassen wir mal mitten aus
super interessant du kannst hier auf
plus gehen und dann hier ein icon
einfügen was mit dem button sein soll
zum beispiel weil es zum surfen geht
kann ich mal nach wellen oder brave
suchen water wasser das ist auch gut und
dann auf ins bett gehen und dann habe
ich hier hier zu wählen als icon in ganz
bayern aus richtung aus wien ab das vor
dem text wird dann nach dem text sein
soll und wie viel abstand zu dem wort
bestehen soll
das ist gut das wäre auch schon alles
was du im inhalt von einem button finden
kannst
als nächstes können wir den stil gehen
hier haben wir jetzt erstmal typographie
dort kann ich wieder entweder eine
globale farbe auswählen zum beispiel an
hervorgehobener text haupttext sekunde
überschrift premier überschrift dann
wäre schon anders aber auch ziemlich
groß du kannst natürlich auch immer dann
da reingehen
das als vorlage erst mal nehmen damit
ich mal das grundlegende stimmt zum
beispiel dass ich dann amarante ab aber
das ganze wieder kleiner machen das ist
auch möglich dann hast du zwei custom
text aber die ein bisschen zeit gespart
indem du einmal schnell primär aus
gewählt hast damit die wichtigsten
einstellungen schon mal stimmen
das geht natürlich auch immer das sagen
wir mal so könnte gut sein dann habe ich
die schriftfamilie schon mal geändert
die schriftgröße schrift schnitt das
kennst du alle schon das wichtig ist
auch nicht zu häufig zeigen den zeichen
abstand würde ich wahrscheinlich noch
ein bisschen verändern also okay dann
kann ich hier wieder auf den stoff
klicken als nächstes ist haben wir text
schaden den hast ja auch schon bei
normalen text gesehen
den würde ich jetzt auch gar nicht
bearbeiten in den button weil das nicht
so gut aussieht aber wenn du möchtest
kannst natürlich auch hier draufklicken
und damit ein bisschen herum
experimentieren
als nächstes haben wir ganz coole
einstellungen nämlich normal und hoffe
das bezieht sich auf die text farbe und
die hintergrundfarbe normal ist einfach
das was du jetzt gerade hier in den
button siehst und hofer ist wenn jemand
mit der maus über den bahn fährt was
dann passieren soll wenn ich jetzt mal
bei normalen die text farbe auf
sekundäre farbe stelle nämlich weiß und
hintergrundfarbe auf die primäre farbe
stellen nicht unser blau ton und die
hofer farbe dort die tags farbe auf die
primärfarben stelle und die
hintergrundfarbe auf die sekundäre farbe
und jetzt mit der maus darüber fahre
dann ändert sich die tags farbe zu blau
und hintergrundfarbe wird weiß das ist
auch ein ganz cooler effekt hier müsste
man bloß dafür sorgen
dass man den hintergrund überhaupt noch
sieht weil wir jetzt gerade an weißem
hintergrund haben dafür kann ich hier
einen rahmen typ hinzufügen
da ist gerade keiner ausgewählt ich
könnte zum beispiel durchgezogen
auswählen dann die breite auswählen zum
beispiel 1 dafür eine farbe auswählen
beispielsweise unserem blauton nämlich
die primäre farbe und wenn ich jetzt mal
darüber haben wir außen rum ist eine
blaue umrandung das ist super
also einrahmen typ ist einfach die
umrahmung eines buttons
wir haben hier oben auch noch eine
animation beim aus berührungen gerade
gibt es keine aber wir können zum
beispiel gros also wachsen lassen wenn
ich jetzt hier mal rüber hoffe dann
wächst der patenwehr nicht darüber fahre
oder man könnte puls nebenan pulsiert
hier ein bisschen da gibt es ganz cool
animationen kannst du auf jeden fall
nutzen nehmen wir froh das sollte gut
sein
hier haben wir als nächstes das geht
jetzt übrigens ab hier gar nicht mehr um
die haube einstellung sondern auch die
normalen das ist hier mit so einer
kleinen linie begrenzt ok als nächstes
haben wir den ecken radios das ist
einfach wie abgerundet die ecken sind
wenn ich hier zum beispiel 25 1 gäbe
dann würde das ziemlich rund die werte
sind verknüpft weil hier werte
verknüpfen ausgewählt ist wenn ich das
wegnehmen und jetzt zum beispiel mal
behoben 45 1 gäbe dann wird nur die
obere linke ecke besonders rund und der
rest bleibt gleich da solltest du auch
darauf achten
sagen wir mal ich verdient jetzt wieder
alles dann ist alles sehr rund geworden
weil es zum höchsten wert geworden ist
15 solcher gut sein
wir könnten dem ganzen jetzt noch ein
box schatten geben das wäre also ein
schatten von der umrandung also von dem
ganzen blauen bereich würde ich jetzt
aber auch nicht unbedingt machen kann es
aber auch eingehen sondern zum beispiel
zum blauen schatten auswählen denn hier
nach unten oder oben ziehen dann siehst
du dir ja schon aber es sieht nicht
besonders groß können es aber nutzen so
dann möchte ich mal wieder transparent
super die nächste einstellung die wir
hier im stil haben ist dass peking
das ist einfach der abstand vom wort zur
außenkante des buttons hier sind die
werte jetzt auch wieder verknüpft wenn
ich also zum beispiel mal 30 eingebe
haben wir hier mehr abstand nach außen
ich kann auch 301 geben dann ist es
besonders viel oder auch vielleicht 10
dann ist es eher normal normalerweise
würde ich wahrscheinlich nach oben und
unten zum beispiel 15 machen das dann
nicht mehr verknüpfen und nach links und
rechts ein bisschen mehr sagen wir mal
25 so ich finde das schon ganz gut aus
dann hätten wir auch noch die
erweiterten einstellungen die lasse ich
aber erstmal in ruhe dann können wir mal
wieder hier in die widgets gehen und
jetzt habe ich ja den ersten button
hinzugefügt die auch schon gut aussieht
hier kommt jetzt ein weiterer cooler
trick bei element worden
wir haben jetzt gerade viel zeit und
arbeit reingesteckt diesen baden gut
aussehen zu lassen was wir jetzt also
auch machen können ist an der stadt das
ganze nochmal für den zweiten buttons
machen hier rechts rauf zu klicken
kopieren rechtsklick einfügen und das
haben wir den gleichen baden ihr rechts
noch mal das heißt ich habe mir eine
ganze menge arbeit gespart was du auch
machen könntest du das ich löschte noch
mal also ich gehe auf rechtsklick und
löschen
du könntest rechtsklick und duplizieren
klicken dann hast du denn zweimal und
können zum beispiel einfach rüberziehen
der in möchte ich aber erst noch mal
und was so auch noch machen kannst ist
hier einen button einfügen also hier
button über ziehen und fallenlassen der
sieht jetzt so aus dass ich auch machen
kann ist hier rechts drauf kopieren und
dann rechts auf diesen button klicken
und dann auf stil einfügen gehen um das
design zu ändern
das heißt hier hat sich dann nicht der
inhalt direkt verändert ich musste immer
noch einen anderen link angeben ich
musste den text ändern
das icon ändern aber der grundlegende
stil also die farben die hofer animation
und all das
das wäre hier dann schon enthalten das
sind auch ein paar optionen die die auf
jeden fall zeit sparen können deswegen
würde ich dir immer empfehlen erstmal
falls du mehrere gleichartige widgets
bauen möchtest einzubauen das wirklich
gut zu machen und dann den stil einfach
immer wieder zu kopieren und einzufügen
oder ist ganz auch einfach zu
duplizieren und dann inhalt zu ändern
ok dieser hier sollte tatsächlich ein
bisschen anders sein also ich lege ich
hier mal drauf gehen den inhalt und sage
zb kurs buchen
der soll so kontaktseite führen
also gebe ich ihr kontakt 1
ich könnte hier wieder ein icon einfügen
zum beispiel ein pfeil also gebe ich mal
und dann zum beispiel der der zur seite
führt ins world und nachher genau jetzt
mache ich das ganze mal schon ein
bisschen schneller
dann gehe ich mal wieder hier auf stil
den möchte ich jetzt eine andere farbe
haben auch noch ein kleiner tipp von mir
zum beispiel auf der service seite ist
unser ziel kurse zu verkaufen
dann wollen wir ja auch dass der kurs
buchen button ein bisschen raus steht
normalerweise würden wir jetzt auf
dieser seite sehr viel blau und weiß
verwenden aber damit dieser button raus
stehen würde ich gerade den vielleicht
mal einer ganz anderen farbe machen zum
beispiel in einem grünen turm
also könnte ich hier text farbe weiß
nehmen hintergrundfarbe akzent der steht
jetzt definitiv raus und es wird dafür
sorgen dass mehr leute darauf klicken
designtechnisch wahrscheinlich nicht die
beste variante
aber es ist auf jeden fall etwas
effektiver
ich finde noch den ton und nicht ganz so
gut sagen wir mal so okay jetzt könnte
ich natürlich auch noch hier die hofer
farben ändern aber ich lasse das erstmal
so okay jetzt haben wir hier schon
wunderbar mit buttons gearbeitet und
hier zwei coole buttons drin
das ist super das wäre dann also auch
schritt nummer 13 bands bearbeiten
superwichtig und auf jeden fall auch
noch mal ein guter schritt um zu zeigen
wie die widgets funktionieren
im nächsten schritt können wir mal
bilder bearbeiten plus auch
hintergrundbilder und andere
hintergründe auch ein wichtiger
wichtiger schritt
dafür gehe ich mal hier wieder ein
element ohr rein und fangen wir mal an
und arbeiten hier den hintergrund dieses
abschnittes um erstmal den abschnitt zu
bearbeiten können wir hier auf diese
sechs punkte klicken
oder ich kann auch in einem leeren
abschnitt ging also hier links zum
beispiel online rechtsklick und
abschnitt bearbeiten klingen und hier
haben wir layout stil und erweitert das
ist recht ähnlich zurück aber dann doch
ein kleines bisschen anders
im layout haben wir erstmal die inhalts
breite jetzt gerade ist sie auf box
gestellt das bedeutet nicht dass jetzt
mal nach links und rechts wie wirst du
sehen dass sich die weiterhin müssen
verändert
das bedeutet einfach dass der inhalt
dieses abschnittes nicht komplett von
links nach rechts geht sondern ein
bisschen begrenztes je nachdem wie breit
das einstellst würde ich dir auf jeden
fall auch empfehlen weil es schon ganz
gut ist wenn es nicht komplett von links
nach rechts geht wenn du ein buch liest
geht es ja auch nicht komplett von links
nach rechts sondern sagst du auch noch
ein bisschen abstand
alternativ kannst du auch statt auf box
klicken voller breite aus werden danke
jetzt komplett von links nach rechts
gut ich wäre jetzt mal schnell boxt und
mach jetzt zum beispiel mal die größe
bei der höhe
das ist auch noch weitere gute
einstellungen haben wir gerade vorgabe
ausgewählt dementsprechend passt sich
das einfach daran an wie viele widgets
wieder einziehen wenn ich jetzt zum
beispiel noch mal ein texteditor
darunter ziehe dann wird hier der
abschnitt ein bisschen größer der
unterschied jetzt aber mal schnell
wieder geht auf abschnitt bearbeiten
du kannst auch bei der höhe minimum
höher auswählen und dann hier bei der
mindesthöhe das nach links oder rechts
ihnen um auszuwählen wie hoch denn
dieser abschnitt sein soll was auch
machen kannst ist stattdessen an
bildschirm anpassen wählen und dann
passt das genau einmal in deinem
bildschirm rhein bei diesem bereich
würde ich jetzt tatsächlich am
bildschirm anpassen auswählen weil das
ganz oben einmal in den bildschirm
passen soll und dann soll man scrollen
aber bei weiteren bereichen darunter
also bei weiteren abschnitten würde ich
wahrscheinlich minimum höhe wählen und
das ein bisschen kleiner machen als
nächstes damit die spitzenposition die
ist gerade mit ich wir könnten das aber
auch zum beispiel nach oben versetzen
und haben wir hier ganz oben die spalte
oder unten aber mit ich es
wahrscheinlich ganz gut
der rest ist ok struktur brauchen wir
auch nicht
und dann kann man mal in den stil gehen
und hier kommen jetzt den hintergrund
bearbeiten
hier hast du wieder normal und hofer
gehen wir erstmal auf normal ein
und dann hier den untergrund typ hier
haben wir klassisch verlauf video und
slideshow
lasst uns jemanden mit dem klassischen
hintergrund anfangen also klicke ich
hier mal drauf und dann können wir hier
als erstes eine farbe auswählen
beispielsweise könnte ich die primäre
farbe ist hintergrundfarbe auswählen
oder ich könnte auch eine besondere
farbe auswählen beispielsweise hier zum
pink oder lila
das herumführen das kennst du ja schon
dann hätten wir einfach eine normale
farbe als hintergrund da kann ich auch
noch mal wieder drauf klicken was auch
machen kannst ist hier ein verlauf gehen
und das ist dann eine mischung aus zwei
farben wie hast du farbe 1 und hier die
zweite farbe und die vermischen sich
dann das könnte ich zum beispiel auch zu
blau und pink ändern dann kann ich die
position ändern also wo welche farbe
anfängt wenn ich die sehr nah aneinander
park beispielsweise beide hier an dann
verlaufen die sich gar nicht wirklich
sondern treffen nur aufeinander
wir können das aber auch wieder
rückgängig machen wir können den winkel
ändern also dass zum beispiel von links
nach rechts gehört von rechts nach links
die art ist gerade linear wir können es
auch radial machen das heißt dass er wie
ein kreis verläuft da kannst du auf
jeden fall auch mit rumspielen das ist
ein bisschen weniger langweilig als eine
einzige farbe
du kannst zum beispiel auch zwei
verschiedene arten von lila wären das
ist nur ein ganz kleiner überlauf ist
das kannst du auf jeden fall auch
verwenden um es weniger langweilig zu
machen was wir hier auch cooles einfügen
können ist ein video hintergrund wenn
ich hier mal auf clique können wir hier
ein youtube-video einfügen oder auch an
vimeo link ich habe hier schon mal eins
vorbereitet da kopiere ich mache mir den
link und fügt den hier ein
dann kannst du eine startzeit auswählen
also bei wie vielen sekunden des videos
das ganze anfangen würde sagen wenn man
bei 5 40 sekunden und wann das in dem
video enten soll sagen wir mal nach 70
sekunden und dann fängt es wieder an
und dann habe ich hier so ein cooles
hintergrund view es ist auf jeden fall
eine schöne option du kannst auch
auswählen dass das ganze nur einmal
abgespielt werden soll
das heißt das wiederholt sich dann nicht
nach denen 25 sekunden
du kannst auch auswählen ob es auch auf
einem mobiltelefon abgespielt werden
soll oder nicht
ich könnte ja auch ja auswählen dann
wird es auch auf mobiltelefon
ausgespielt wenn du das nicht aus wird
also in der optionen wie es gerade ist
wird es nicht auf mobiltelefon
abgespielt dann brauchst du auf jeden
fall ein hintergrund fallback das heißt
ein bild was erscheint wenn das video
nicht abspielen kann
das würde ich dir auch so oder so
empfehlen weil manchmal kann das video
halt einfach nicht laden dann sollte
dort ein bild erscheinen was halt
stattdessen gezeigt wird grundlegend
würde ich dir aber wahrscheinlich nicht
empfehlen ein video hintergrund zu
verwenden weil das einfach ewig lebt und
eine seite langsamer macht und zudem
kann es manchmal ein bisschen probleme
machen also ich würde wahrscheinlich
lassen aber falls ein cooles video hast
was du unbedingt verwenden möchtest
kannst du es hier auf jeden fall
ich lösche das thema raus gut als
nächstes kannst du auch eine slideshow
machen das zeige ich dir aber gleich gut
dann gehen wir mal hier wieder auf
hintergrund typ klassisch und hier
können wir auch ein bild auswählen
das heißt hier kann ich mir auf plus
gehen und dann ein bild hochladen
dafür kann ich auf upload files gehen
dateien auswählen und hier kann ich dann
eines der bilder auswählen in diesem
fall möchte ich zum beispiel dieses bild
verwenden also kann ich da andere auf
klick öffnen dann wäre das jetzt
hochgeladen
hier super wichtig dass das bild nicht
zu groß ist 684 kilobyte ist schon ganz
schön groß muss man sagen es sollte auf
keinen fall größer sein was ich dir auf
jeden fall empfehlen würde ist falls so
coole bilder suchst kannst du diese
seite verwenden an splashtop kommen da
solltest du dich vielleicht einmal mit
auseinandersetzen mit den lizenzrechten
aber so wie ich es verstehe muss aber
selber einmal natürlich nachsuchen mal
keine rechtsberatung
kannst du diese bilder gratis verwenden
auch kommerziell
also das ist super und falls das bild zu
groß ist weil solche bilder kommen
normalerweise sogar in mb größen dann
solltest du eine seite wie zum beispiel
com press image dot de oder com
verwenden das bild hier hochladen hier
zum beispiel 90 prozent aus werden auf
com press image gehen und es dann
komprimieren dadurch wird es kleiner
verliert aber kaum an qualität und das
dann noch mal verwenden und hier
hochladen weiß ist super wichtig dass
seine bilder nicht zu groß sind
ansonsten lebt eine seite ewig besucher
sprechen ab google erkennt dass und
rankings tiefer in den suchergebnissen
also super wichtig dass deine bilder
schön klein sind dann habe ich hier
dieses hintergrundbild und kann dann auf
medien 1 führung gehen und schon habe
ich hier ein hintergrundbild das
passiert jetzt aber er kam rein
das heißt hier muss ich erst mal ein
bisschen an einer größe von je längst
kann ich bei größe
vorgabe koffer wählen dann adjustiert
elemente automatisch die größe so dass
es in den bildschirm passt es gibt auch
andere optionen könnte es beispielsweise
auto auswählen dann schnell sehr einfach
automatisch ein teil des bildes aus dort
kannst du dann auch noch verschiedene
positionen aus wenn zum beispiel oben
links sind wir glaube ich gerade schon
unten mitte dann ändert er hier die
position da solltest du auch immer mal
hier die folge größe sehen kannst du
machen aber du musst immer bedenken dass
jeder eine verschiedene bildschirmgröße
hat und es muss auch auf dem bildschirm
der anderen leute gut aussehen und das
ist oft schwierig bei auto genauso ist
eingepasst recht schwierig in diesem
fall wiederholt er dann beispielsweise
rechts und links das bild das das auch
nicht so gut und individuell dort kannst
du auswählen wie breit das bild sein
soll
zum beispiel würde sich hier immer
wieder wiederholen
ich würde dir auf jeden fall fehlen
koffer zu verwenden
die position hast du brauchst du gesehen
anhang brauchen wir nicht und repeat da
kannst einfach einstellen dass es rechts
und links nicht wiederholen soll das ist
bykow war aber gar nicht nötig als
nächstes können wir eine hintergrund
überlagerung einfügen wenn wir
beispielsweise ein sehr helles
hintergrundbild haben aber auch ganz
gerne weiß als schriftart verwenden
würden dann sollte man eine hintergrund
überlagerung einfügen um das
hintergrundbild ein bisschen dunkler zu
machen das heißt hier kann ich einmal
drauf klicken und dann bei hintergrund
überlagerung hintergrund typ klassisch
wählen dann können sich zum beispiel
schwarz als farbe auswählen
hier wieder raus klicken und dann die
deckkraft verändern zum beispiel ein
bisschen weniger stark das machen und
jetzt ist der untergrund halt schon ein
bisschen dunkler und man sieht die farbe
besser von der schrift du könntest sogar
eine hintergrund überlagerung als bild
einfügen also ein bild über dem
hintergrundbild das funktioniert
beispielsweise wenn du irgendwas hast
was aus geschnitten ist und da noch so
rein passen soll aber bleiben wir erst
mal hier bei gut das wäre dann also die
hintergrund überlagerung aus sehr
hilfreich wenn du helle schriftform
verwenden
möchtest dann haben wir schon den
hintergrund dann gehe ich mal wieder
hier auf die widgets und einmal schnell
den text bricht den ganz gern und weiß
haben würde
weil das besser aussieht werde ich
meinen stil text farbe und wähle hier
einfach sekundär und dann passt super
wenn nicht mehr das thema also an guckt
ja das ist schon ganz cool aus ok im
nächsten schritt möchte ich einen
weiteren abschnitt hinzufügen um dir
nochmal und nochmal normale bilder zu
zeigen also gehe ich hier mal wieder auf
plus
hier gehe ich jetzt zum beispiel ein
zwei drei auswählen
ich wähle mal 2 und jetzt habe ich hier
links und hier rechts eine spalte
dann könnte ich bei der hörstadt vorgabe
minimum höher auswählen und das ganze
etwas größer machen zum beispiel so das
sieht gut aus und dann kann ich hier in
die widgets gehen und mal schnell auf
speichern gehen aber auch mal meinen
aktuellen stands abzuspeichern
um jetzt ein bild richards zu verwenden
können wir es hier links auswählen und
rhein ziehen dann haben wir es jetzt
hier
dann haben wir wieder internet sd und
erweitert und hier kann ich ein bild
auswählen das heißt ich gehe darauf und
da kann ich entweder 1 hochladen oder
ich nehme 1 aus meiner mediathek also
aus den bildern die ich schon hoch
geladen habe dort würde ich mal zum
beispiel dieses verwenden da solltest du
auch wieder darauf achten das ist nicht
so großes und dann kannst du auf medien
einfügen gehen
super hier kannst du jetzt in größe
auswählen also einfach ein von denen da
kannst du ein bisschen mit
herumexperimentieren zb auch individuell
die ausrichtung brauchen wir nicht
bildunterschrift könntest du einfügen
wenn du wolltest zum beispiel eine
eigene beschriftung und hier dann
beschreiben das erscheint dann darunter
oder du kannst sogar auch ein link
einfügen das heißt wenn jemand darauf
klickt dann landet er irgendwo anders
dann können wir den stil gehen hier
können wir die breite und hilfsbereite
noch mal ändern aber wir haben ja schon
eine größe verändert dementsprechend ist
das unnötig deckkraft brauchen wir nicht
css filter brauchen wir nicht den ecken
radius würde ich tatsächlich noch mal
verändern wenn ich jetzt zum beispiel 25
angebe runde deren wissen ab das würde
ich auf jeden fall verwenden das ist
ähnlich wie bei buttons ich finde dass
sie sonst müssten zu klobig aus
gut dann können wir auch mal weitergehen
und hier haben wir jetzt margin und
petting penning hast ja vorhin schon bei
buttons gesehen das ist einfach wie viel
abstand von der außenkante des bildes
zur kante der spalt ist wenn ich jetzt
zum beispiel nach 50 1 gebe
haben wir 50 pixelabstand nach oben
links rechts und unten im grunde macht
ist ein bild einfach kleiner
ich mach das mal wieder auf null margin
verschiebt einfach dein bild nach oben
links rechts oder unten wenn ich hier
mal die werte eng knüpfe und hier würde
ich dir empfehlen prozent zu wählen da
gehe ich dann mal rauf und zum beispiel
mal 100 nach oben macht dann habe ich
jetzt 100% abstand nach oben und habe
das bild sozusagen nach unten verschoben
das gleiche könnte ich auch nach unten
machen dann habe ich hier noch mal super
viel platz nach unten oder auch nach
links und rechts also im grunde kannst
du mit dem wagen einfach die objekte
wissen herumschieben das ganze können es
doch zum beispiel sogar mit abschnitten
machen wenn du mehr abstand zu dem
oberen abschnitt haben möchtest da würde
ich einfach ein bisschen mit
herumspielen die findest du immer in
erweitert genau ich setze jetzt auf null
ok mehr brauchen wir ja eigentlich auch
nicht was ich dir noch einmal schnell
zeigen wollte ist ein bewegungs effekt
wenn wir mal drauf gehen nämlich unter
erweitert können wir zum beispiel den
eingangs animationen zufügen
beispielsweise fädeln fällen oft das
bedeutet diese animation erscheint er
wenn jemand das erst mal runter scrollt
und das sieht dann würde es zum beispiel
jetzt von links nach rechts rein fahren
so das kannst du auch machen würde ich
aber nicht übertreiben macht es anders
sieht es für mich eine powerpoint
präsentation von einem zehnjährigen das
war jetzt ein normales hintergrundbild
eines abschnittes du kannst auch
hintergrundbilder in spalten machen wenn
eine spalte bearbeiten möchtest kannst
einfach hier auf spalte bearbeiten
klicken und dort könnte es auch
hintergrund bilder und farben verändern
gut also schrieben 14 bilder bearbeiten
check damit würde ich einfach ein
bisschen nach oben spielen bevor wir
schritt nummer 15 machen will ich noch
ganz schnell zwei einstellungen machen
zunächst einmal hier den bann wenn ich
immer auf kriegst du ja haben wir jetzt
link hashtag mehr gemacht aber wenn ich
darauf klickt passiert noch gar nichts
das heißt um das jetzt zu machen werde
ich zum beispiel mal diesen abschnitt
wenn ich auf abschnitten gehe und unter
erweitert zur css id gehe
und hier mehr eingebe oder auch
speichere forscher oder änderungen an
klicke hier dieses auge und jetzt auf
warum clique scrollt darunter vielleicht
diesem abschnitt die cssr die märkte
geben ab und der zu hashtag mehr
verlinkt dh das kannst du verwenden um
auf der einen seite durch links herum
scrollen zu können auch ein cooler
effekt und eine sache wollte ich noch in
diesem abschnitt machen weil ich finde
dieser übergang ist zu hart wenn wir den
abschnitt hier bearbeiten und dann auf
istrien und trendigen formen ich hab das
eben schon mal geöffnet können wir bei
unten bei typ zum beispiel wellen
auswählen
dann haben wir hier unten solche kleinen
wellen die sozusagen ein viel leichteren
übergangen in diesen nächsten abschnitt
möglichen ich finde dass sie ziemlich
kurios mit surfen und passt auch
thematisch da kann es natürlich auch was
anderes auswählen eine andere farbe
wählen die breite verändern
die höhe verändern da kannst du ein
bisschen mit herumexperimentieren sieht
gut aus und da können wir jetzt mal
weitermachen und das ganze mobil
anpassen ein großteil der nutzer wird
von mobilen geräten kommen also vom
smartphone oder tablet und deswegen
müssen wir dafür sorgen dass ist auch
auf diesen geräten gut aussieht um das
nachzugucken können wir unten auf
response off modus gehen und dann sehen
wir tablet und mobil
da kann ich zum beispiel tablet öffnen
und dann sehe ich wie meine seite auf
dem tablett aussieht das sind ja ganz
gut aus ich kann auch mobil öffnen und
dann sehe ich wie es auf dem smartphone
aussieht
in diesem fall finde ich zum beispiel
dass der abstand zwischen den wörtern zu
groß ist und auch die wörter an sich
etwas zu groß sind um das dann zu
bearbeiten würde ich einfach einmal hier
draufklicken und an den ministerien und
dann in die typographie und dann steht
hier jetzt auch wieder custom angenommen
da steht hier nicht dann würde ich
einmal hier auf standard einstellungen
zurücksetzen klicken dann sollte sich
das auch so öffnen und hier sehe ich
jetzt neben der größe dieses mobile icon
das heißt alles was ich jetzt ändere
also dort wo zumindest das mobile icon
ist ändert sich nur in der mobilen
version der seite
wenn ich beispielsweise die schriftart
winzig mache so wie hier jetzt und dann
zurück in den desktop modus geht ist es
immer noch groß dann gehe ich mal wieder
in die mobile version und typographie
und passt mal die größe ein bisschen an
sagen wir beispielsweise so dann könnte
man hier noch weiter gucken
beispielsweise könnte ich die zeilen
höhe für die mobile version ändern oder
auch den zeichen abstand für die mobile
version aber so was wie der schrift
schnitt die umwandlungen der estv oder
die aufzeichnung die würden überall
geändert werden weil hier nicht dieses
icon zu sehen ist das gleiche könnte ich
jetzt zum beispiel für die buttons
machen dass die in der mobilen version
etwas kleiner sind
das heißt ich kann es dir gehen
typographie bearbeiten und dann auch
hier etwas kleiner machen in der mobilen
version
das gleiche zb für kurs buchen die
biografie größe so beispielsweise ich
könnte wenn er weiter gehen und hier ein
bisschen mehr platz nach unten schaffen
das heißt ich endlich das und gebe dem
ganzen nach unten
mehr platz machen um ein prozent so und
jetzt sieht es in der mobilen version
schon um einiges besser aus
da würde ich auf jeden fall gucken dass
es dort gut aussieht und immer schön
drauf achten dass die mobile version
ausgewählt ist es gibt noch ein paar
weitere einstellungen die du in response
off modus machen kannst das ist jetzt
schon mal auf jeden fall die wichtigste
was ich dir sonst empfehlen würde ist
wenn du auf der staaten seite guckst
habe ich unter schritt 5 hier eine super
video von ihrem mentor verlinkt das geht
vier minuten wo sie alles zeigen wie du
deinen seid so richtig responsive machen
kannst
das würde ich dir auf jeden fall mal
empfehlen die erklären dass nämlich sehr
sehr guter drin
gut dass wir dann auch schon punkt
nummer 15 die seite responsive machen
check dann gehen wir mal wieder in die
desktop version
und hier sieht es ja immer noch gleich
etwas perfekt jetzt zeige ich dir jetzt
noch einmal wie widgets spalten und
abschnitte um positioniert oder löscht
wenn ich ein widget um positionieren
möchte kann ich einfach hier auf diesen
stoff klicken und dann zb nach rechts
ziehen oder hier eine ganz andere spalte
ziehen zum beispiel hier rein
das gleiche kann ich auch mit
abschnitten machen wenn ich zum beispiel
diesen abschnitt über dem ihr haben
wollte könnte ich hier auf abschnitt
dabei indien rollen und das hier zum
beispiel fallen lassen oder auch mit
spalten wenn ich hier links diese spalte
ab kann ich diese auch anklicken
zum beispiel nach rechts ziehen oder
hier auch zum beispiel nach links unter
spalte einfügen wenn du abschnitte
löschen möchtest kannst du da drauf
klicken und auf das ex klicken oder in
einen lernbereich klicken
und auf löschen klicken und wenn du ein
widget löschen möchtest kannst auch auf
rechts krieg gehen das löschen mit einem
speicher löschen möchtest kannst du da
auch rechts aufkleben und passion klingt
super jetzt haben eine leere seite und
schritt nummer 16 auch gemacht hast aber
wahrscheinlich mittlerweile schon
mitbekommen weil wir schon recht lange
mit element uhr arbeiten jetzt können
wir zur schritt nummer 17 quasi im
halben geheimtipp nämlich mit vorlagen
und blöcken arbeiten wenn ich immer in
der seite binnen gut wir haben die seite
jetzt nicht mehr offen aber du hast
jetzt wahrscheinlich schon ein bisschen
elemento gearbeitet und gesehen dass es
spaß macht und auch recht einfach ist
aber es dauert auch recht lange seinen
seiten selber zu bauen
und wenn man 100 prozent ehrlich mit
sich selber ist besitzt meistens nicht
100 prozent professionell aus
dementsprechend empfehle ich meistens
mit vorlagen und blöcken zu arbeiten
das sind also vorgefertigten layout von
professionellen designern die du in
deiner seite importieren kannst und dann
musst du eigentlich nur noch den inhalt
und das design wissen für dich anpassen
aber dort ist der große vorteil dass
dieses layout sowie das ganze aufgebaut
ist sehr professionell gemacht ist das
heißt sie sind meistens super responsive
und du hast einfach diese kleinen
feineinstellung die das ganze auf ein
nächstes level bringen
dementsprechend weil ich die auf jeden
fall empfehlen damit zu arbeiten um das
machen kann ich jedoch dass mal löschen
gibt es zwei möglichkeiten
du kannst mit blöcken oder mit ganzen
seiten arbeiten
diese finden wir hier in diesem grünen
icon was wir mit dem plug-in erwartet
elements installiert haben ich kann
ihnen auch auf klicken und hier sehen
wir jetzt kids und blogs blogs sind die
blöcke das sind einfach abschnitte einer
seite beispielsweise über uns sektion
oder im call to action im kontaktbereich
häufig gestellte fragen da gibt es ganz
verschiedene bad beispielsweise könnte
ich mal auf 4 uhr gehen
und da kann man sich der einst von
aussuchen beispielsweise das gefällt mir
und da kann ich einfach auf install
template gehen dann importiere das in
meiner seite und jetzt habe ich schon
hier diesen abschnitt den könnte ich
dann ganz einfach bearbeiten so ist ihr
fuhren auch gezeigt habe das heißt ich
könnte jetzt sehen und hier ist ein
button erkläre ich darauf arbeite den
inhalt der in stil passt das für meine
bedürfnisse an
ich kann auch sachen raus löschen die
mir nicht gefallen oder ich kann das
ganze auch komplett rückgängig machen
das dann ganz viele möglichkeiten aber
dieses grundlegende design das sieht
einfach meistens besser aus genauso
könntest du dann weiter gehen wieder an
die templates gehen wie blogs und mit
dem nächsten weiter machen zum beispiel
eine karte vielleicht gefällt mir die
dann kann ich auf install tempo gehen
und dann ist sie auch darin dass klein
problem bei blizz meistens dass die
nicht aufeinander abgestimmt sind und
das heißt du musst das design noch
aneinander anpassen außen natürlich du
willst immer welche die den gleichen
stil haben
das spart ihr auf jeden fall schon mal
sehr viel zeit und du kannst es auch so
die sein wie du möchtest
alternativ kann es auch ganz tablets
einfügen also ganze seiten dem dorf and
the elements gehst free kids und hier
ist jetzt so tempel packung also ganze
themen sozusagen zum beispiel für ein
café oder für musiklehrer flight
training was auch immer du möchtest du
musst auch nicht irgendwas wählen was
inhaltlich zu deiner seite passt du
kannst theoretisch das design eines
mexikanischen restaurants nehmen wenn du
anwalt bist es geht mehr so um das
layout du passt den inhalt immer noch
für dich selber an
also hier würde ich mal gucken ob hier
irgendwas gefällt beispielsweise dass
ihr mag ich dann kann ich auf ins tor
kickt gehen kannst du auch vorankommen
im dorf preview ist dann kann ich auf
judith gehen denn sind wir hier nicht
ins tor kids und hier siehst du dann die
unterseiten zum beispiel die homepage
sales services karriere ganz
verschiedene seiten die duh verwenden
könnte ist sagen wir mal ich möchte hier
die homepage bearbeiten
das kann ich auf ins lot tempo gehen um
die ganze seite zu importieren
und schon hätte ich hier dann eine ganze
seite die ich einfach für mich anpassen
kann
das anpassen hast du jetzt quasi gelernt
weil ich dir die wichtigsten widgets
gezeigt habe also text bilder und
buttons hier kannst du dann einfach
reingehen und alles anklicken was sie
verändern möchte ist es gibt natürlich
noch sehr sehr viele andere gadgets wie
du hier auch sehen kann es auch einmal
unter das kreuz das gute mentors dass es
millionen nutzer hat und dementsprechend
auch tausende tutorials gibt das heißt
wenn du irgendein bestimmtes bridget
verwenden möchtest kannst du entweder
einfach mal rein ziehen und dann gucken
was dort steht das ist meistens nicht
besonders schwer
ganz einfach gucken was dort steht das
ausprobieren und im zweifelsfall
rückgängig machen oder du kannst ja auch
anleitungen zu den einzelnen widgets im
internet angucken die gips auch ich kann
natürlich leider nicht jedes einzelnen
richards im detail zeigen aber dadurch
dass ich dir vor die hauptbühne chips
gezeigt habe habe ich die quasi alle
schon gezeigt weil der rest eigentlich
immer gleich ist genau also meine
empfehlung ist definitiv nutzt tablets
also hier vorgefertigte seiten oder
blöcke importe die in jeder deiner
unterseiten und dann passt sie einfach
mit dem inhalt und design an das ist am
einfachsten sparten menge zeit und sind
im endeffekt meistens doch etwas besser
aus du kannst ja auch alles löschen was
ihr nicht gefällt
gut das wäre dann auch schon punkt
nummer 17 und danke wir auch mit punkt
nummer 18 weitermachen
hier stellen wir jetzt die navigation
oder auch das menü im hätte wenn ich mir
mal meine seite anguckt sieht er jetzt
hier super aus aber ich habe gar keine
möglichkeit um auf die kontaktseite zu
kommen oder über uns oder services
normalerweise hast ja in einer website
hier oben immer eine navigation und die
bauen wir jetzt auch erstmal dafür
müssen wir die zunächst einmal
hinzufügen und dann kommen auch noch das
design vom gesamten header bearbeiten
damit dass auch zur seite passt um die
navigation hinzuzufügen gehen wir erst
einmal ins dashboard nämlich hier mal
über den namen aber und auf dashboard
clique und dann können wir links über
die sein
und dann auf - klingt da können wir hier
den namen geben ich nenne das jetzt mal
mein und da können wir auf menü
erstellen gehen und habe mir dieses menü
dann haben wir hier links jetzt leiden
beiträge individuelle links kategorien
und menü icons settings wir wollen in
dieses menü seiten einfügen das heißt
hier möchte ich die serviceseite über
uns um kontakt haben und wenn ich hier
mal auf dem menü hinzufügen klick
erscheinen sich eher rechts ich möchte
auch noch die homepage drin haben diese
ich jetzt nicht bei zuletzt erstellt die
sehe ich bei alle anzeigen und die habe
ich zum beispiel nach oben dann kann ich
ja auch noch mal auf dem menü hinzufügen
klicken und dann habe ich hier jetzt
diese drei stück dann kann ich mal
runter scrollen und bei positionen wem
werde ich allgemein gehen auf menü
speichern
aber wenn ich jetzt mal die homepage
aktualisiert habe ich hier ein menü home
services bei uns in kontakt ich kann
noch die reihenfolge ändern das geht von
links nach rechts wenn ich zum beispiel
kontakt an zweiter stelle haben wollte
könnte ich das hier nach oben ziehen
und ich kann sogar unterpunkte einfügen
also wenn ich zum beispiel möchte dass
services ein unterpunkt von über uns ist
kann ich das ja immer runter ziehen und
dann nach rechts ziehen und es ist hier
recht wenn ich da mal auf mini speichern
gehe und dass aktualisiere hat sich hier
die reihenfolge geändert und unter über
uns ist services ein unterpunkt das ist
perfekt was du zum beispiel auch
hinzufügen könnte es werden individuelle
linkswende beispielsweise auf eine
externe seite verlinkt möchtest oder auf
youtube.com kannst hier individuelle
links öffnen hier die url einfügen
beispielsweise https doppelpunkt /
youtube bekommen
und beim linktext einfach den namen zum
beispiel youtube und dann zum menü
hinzufügen und dann hätten wir hier auch
den menüpunkt youtube falls die
blogbeiträge hast kannst du dir auch
einfügen in dem du hier längst beiträge
aus west und die einfügt gut dann nehme
ich selbst mal wieder einmal punkt und
geben auch speichern und dann aktuell
sehe ich die seite noch mal
und so sieht jetzt das menü aus dass es
schon ganz gut weil es die
funktionalität bietet aber sieht noch
nicht besonders gut aus und das können
wir jetzt mal machen also um jetzt das
ganze menü und den header zu bearbeiten
müssen wir das ein customizer machen das
ist sehr ähnlich wie elementar bloß die
version vom team um also den customizer
zu öffnen können wir links über die
seinen helfern und dann auf customizer
klicken
er eröffnet sich dann customizer haben
wir hier rechts der forschung von allem
was passiert und die links können wir
die seite bearbeiten
zunächst einmal können wir hier oben das
ändern dass du in konto zwei
möglichkeiten entweder du kannst ein
logo einfügen falls du also eine no go
ist kannst du die ersten 20 sekunden
überspringen falls nicht möchtest du
vielleicht den text hier ein bisschen
bearbeiten
das kannst du dann tun indem du ihr
links auf typographie text und dann auf
logo und dann kannst du hier die
schriftfamilie ändern also den ford
vielleicht hast du ja irgendwo und den
für den titel deiner seite verwenden
möchte ist zum beispiel das dann kannst
du die schrift stärke verändern den stil
die schriftgröße den zeichner abstand
all das war dann können wir mal zurück
gehen und noch mal zurück und dann
könnten wir auch schon in den
kopfbereich gehen nämlich hier und dann
auf logo und hier könnten jetzt auch
noch mal die schriftfarbe und die hofer
farbe ändern also zum beispiel könnte
ich das blaumachen okay ich gehe mal
davon aus dass du ein logo hast oder ein
logo verwenden möchtest dann kannst du
hier unter kopfbereich auf logo aus
hingehen dateien hochladen dateien
auswählen
und das logo auswählen ich nehme jetzt
zum beispiel matas hier denke ich auf
öffnen und dann auf auswählen
dann kann ich das sogar noch ein
bisschen zu schneiden dann gehe ich auf
bild zuschneiden und dann haben wir es
hier drin ist es viel zu groß aber dafür
können wir die maximale breite und
maximal erhöhen müssen verändern
so und jetzt passt es ja auch schon hier
rein
das würde ich auch einmal für die mobile
und die tablet-version machen also
einfach einmal hier die tablet-version
öffnen und gucken dass das auch hier
reinpasst zum beispiel in der mobilen
version würde ich das ein bisschen
kleiner machen
sagen wir so dann gehe ich wieder in die
desktop version und das ist wie du ein
logo einfügen kannst angenommen das ist
übrigens noch kein logo und möchtest
auch 1 für deinen website oder denn
unternehmen haben habe ich auch auf der
startseite ganz unten ein video verdient
wie man ein logo bekommen kann so ein
professionelles wie zum beispiel das von
webseiten machen punkt.de das kannst du
für sage und schreibe fünf dollar
bekommen und auch ziemlich einfach also
das erkläre ich auf der startseite
falls es dich interessiert gut dann
können wir einmal zurückgehen
und hier sind wir jetzt im kopfbereich
dann können wir auf allgemein gehen und
hier können wir den stil des menüs
ändern dass grades oft minimal gestellt
wir könnten aber zum beispiel auch ein
transparentes menü auswählen
dann ist der hintergrund transparent
sieht ziemlich cool aus da musst du halt
bloß darauf achten dass es auch auf den
anderen unterseiten gut aussieht und mit
dem hintergrund passt alternativ können
dass du zum beispiel auch ein rotes menü
nehmen mit full screen oder irgend eins
von den anderen da kannst du einfach
eins auswählen was ihr gefällt ich nehme
jetzt mal im himmel dann kannst du aus
werden wie hoch der kopfbereich maximal
sein soll wenn es das also größer machen
den kopfbereich rahmen unten das ist
einfach eine kleine linie unter dem
kopfbereich wenn ich die rot macht
dann sieht man sich auch hier ich könnte
ihn auch nicht mehr auswählen dann haben
wir den nicht mehr und dann ist der hier
auch weg genau dann kann es die
hintergrundfarbe von deinem kopf bereich
ändern zu irgendeiner farbe die du
möchtest zb deal aber ich lasse es mal
in weiß dann kann ich hier wieder auf
klicken im grunde kannst du auch einfach
immer nur gucken was ihr sagt anders und
ausprobieren in abstand brauchen wir
nicht okay das ist also alles gut denke
ich mal zurück und dann auf mobiles menü
und dann öffne ich mal hier die mobile
version der seite und dann sehe ich
jetzt hier das mobile menü
da kannst du auch den menüs die ländern
zum beispiel von seitenleiste so sieht
das jetzt aus zu drop down oder full
screen war sich jetzt auch mal verwenden
werde nämlich so menü textanzeigen hier
recht steht ja menü wenn ich das weg
nehme habe ich nur noch dieses bürger
icon okay hier könntest du brauchst uns
den text ändern suche aktivieren die
würde ich deaktivieren weil hier unten
ist untersuche die funktioniert bloß
nicht so gut deswegen würde ich die
wegnehmen dann können die
hintergrundfarbe ändern beispielsweise
würde ich hier den hintergrund zum
beispiel blau machen die link farbe
könnten wir beispielsweise hoch machen
dann wird das rot oder weiß ich lass das
mal weiß die linke aber ist die farbe
die erscheint wenn du über den denk
oberst zum beispiel könnten wir das in
gelb ton machen
okay die anfrage der links könnten wir
ändern sind habe ich nicht gut aus so
sieht das dann aus ich gehe mal wieder
auf leeren ok und den rest brauchen
eigentlich gar nicht super das heißt
jetzt haben wir schon das mobile menü
bearbeitet denke ich mal wieder in den
desktop
ok dann gehen wir mal wieder zurück und
dann hier auf menü und hier können jetzt
auch das menü für den desktop nochmal
bearbeiten hier können wir die position
ändern von rechts mitte oder links ich
lasse es mal war rechts wir können dem
ganzen einen links effekt geben wenn ich
zum beispiel unterstrich von links
auswähle
dann unterstreicht der den einzelnen
punkt wenn ich darüber fahren und dann
können wir dann auch noch mein links
effekt farbe geben also welche farbe
erscheinen soll
wenn dir doch überhaupt erst so dann
kommt das haupt styling die linke ist
gerade dieses graue wir könnten das zum
beispiel auch zu blau machen
die linke war ist welche link farbe
erscheint wenn darüber was zum beispiel
rot die linke von mark twain menüpunkt
jetzt gerade sind wir zum beispiel auf
der homepage
das können wir dann zum beispiel zurück
machen damit dass mehr auffällt die
linke hintergrundfarbe sieht nicht
besonders gut aus wenn man das ändert
aber so wird es dann aussehen ich hier
mal wieder auf lernen und den rest
braucht auch nicht
und dann haben wir hier noch mal suchen
symbol funktionsteile drop da und da
gehen wir auch mal auf deaktivieren weil
hier rechts ist ja auch dieses symbol
aber das wollen wir auch deaktiviert
haben weil es nicht besonders gut
funktioniert okay dann haben wir auch
das hier mal bearbeitet die inneren
farbe habe ich die er schon gezeigt ein
allgemein dann gehen wir mal zwei mal
zurück und gehen hier auf typografie um
noch mal den text ein bisschen zu ändern
also typografie und dann hauptmenü
hier kann ich jetzt die schriftfamilie
ändern damit die auch zur website passt
dort würde ich einfach einmal ein
element ohr gehen gucken welchen vor und
ich verwende und in ihr dann auch
anwenden also hier kannst du es ändern
dann kannst du die schrift stärke ändern
zum beispiel kannst du es besser machen
schriftzug and diskursiv machen und die
größe zb 25 pixel
so jetzt wäre es schon größer dann
können wir mal zurück gehen und wir
können auch in das mobile münchen gehen
indem ich das geöffnet
mobiles menü und dann kann ich auch hier
die schriftfamilie wieder ändern
schrift stärke all das soll ich
vielleicht einmal immobilien menü öffnen
und dann kann ich gucken wie groß ich
das machen möchte zum beispiel 20 pixel
also 20 px und das sieht doch schon mal
gut aus okay wenn ich jetzt mal
veröffentlichen und die seite
aktualisiert
habe ich hier schon ziemlich cooles menü
hier oben
das ist recht simpel du kannst auf jeden
fall mal hier in die einstellung gehen
das haupt ding ist eigentlich
kopfbereich da kannst du durch die
einstellung gehen und typographie
da kannst du dann die logo automobilist
menü einstellungen mal durchgehen aber
das war nur so ziemlich die wichtigsten
die ich dir hier zeigen wollte super
jetzt haben wir auch schon eine
navigation erstellt die funktioniert
punkt gut aussieht im nächsten schritt
möchte hier noch einmal schnell zeigen
wie ich meine futter mit element
verbauen würde
dafür habe ich ja hier die elemente
homepage zum beispiel auf wie ich das
nur nachts ist eigentlich recht einfach
ich gehe hier unten auf environments
jeffrey blogs gehe hier auf futter und
hier habe ich jetzt eine auswahl an
futter bleiben
die sind ziemlich cool aus und dann
suche ich mir einfach einen derzeit
passt zum beispiel der tanke ich auf
install tempel dann importiert er dass
diese passe ich dann einmal an zum
beispiel möchte ich nur drei spalten
haben dann wünsche ich mir eine da passe
ich den ganzen content anführt
vielleicht noch eine karte hinzu all das
und wenn wir dann dieser foto gefällt
und ich den auf jeder seite verwenden
möchte oder leicht angepasst verwenden
möchte kann ich hier ein rechtsklick auf
abschnitt arbeiten machen und dann auf
als tempel schweich angehen diesem zum
beispiel den namen futter geben dann auf
speichern gehen und jetzt ist es hier
abgespeichert wenn ich mal auf ex klub
den gleichen prozess könnte ich zum
beispiel auch meiner ganzen seite machen
wenn dir das design einer seite gefällt
und es gerne auf anderen seiten
wiederverwenden möchtest kannst du auch
hier auf option speichern gehen als
tablet speichern
dem ganzen den namen jedem zb home 1
auch speichern gehen und dann hast du es
auch hier abgespeichert wenn ich jetzt
mal beispielsweise eine neue seite in
elemente öffnen das mache ich mal
schnell also seien alle seinen kontakt
möchte ich jetzt als nächstes bauen dann
mache ich natürlich hier einmal die
ganze nation der bdp settings und dann
gehe ich oft mit element überarbeiten
und dann kann ich hier auf meine tempels
gehen oder template hinzufügen
hier in der mitte meine tablets anderen
sehe ich jetzt hier wo mein sticker
nicht einfügen und dann für mich weiter
bearbeiten dann hab ich schon mal die
habenseite die schon mal vorher gemacht
habe und ich kann das ganze auch für den
shooter machen bei denen möchte ich ja
zum beispiel auch auf meiner
kontaktseite haben ich glaube nicht
immer sogar aus dafür könnte ich dann
wieder auch auf templates hinzufügen
klicken meine tempels und dann habe ich
das als futter abgespeichert nämlich
hier dann kann ich auch an auf einfügen
gehen ja und dann habe ich hier diesen
foto hat den nicht vorhin bearbeitet
habe so kann ich den auf jeder einzelnen
unterseite anwenden
genau das wäre dann auch schritten
nummer 19 und damit haben wir eigentlich
auch die wichtigsten der einstellung
geschafft es gibt noch ein paar mehr
punkte die ich dir gerne zeigen würde
die sind jedoch nicht für jeden
einzelnen interessant deswegen möchte
ich dir gerne in extra videos einbauen
zunächst einmal möchte zeigen wie man
einen kontakt formular einbauen kann
das ist ziemlich einfach das zeige ich
dir auch unter der starken seite
er unterschritt fünf werde ich ein video
verlinken als nächstes ist noch
interessant wenn du mit templates
arbeitest ist es sehr wahrscheinlich
dass hier nicht sicher steht das ist
dann ein kleiner fehler mit dem ssl
zertifikat das kann man aber auch
ziemlich einfach lösen dafür mache ich
auch drei minuten video das werde ich ja
auch unterschritt fünfmal verlinken also
falls du das problem hast kannst du dir
das angucken damit ich dir gerne noch
zeigen wie man mit dem customizer also
mit taschen der bürger bauen kann
die sehen nicht ganz so gut aus dafür
ist dort eher vorteile
dass die automatisch auf jeder deiner
unterseiten erscheinen das heißt du
musst sie nicht jedes mal einfügen ist
vorteilhaft seien haltlos nicht so gut
aus aber falls du das ganz gerne mal
sehen möchtest mache ich da auch ein
extra video zu unterschritt 5 genauso
habe ich ja am anfang des videos beim
thema hosting den aspekt security
angesprochen der ist oft sind nicht
wichtig zu dem thema wie man da vorgehen
kann möchte ich auch meine extra video
machen ich schätze mal es wird so zehn
minuten dauern
das werde ich hier auch mal unterschritt
fünf verlinken das kannst du dann auch
angucken und das wäre es dann eigentlich
auch schon meinte man dich sucht ihr
richtig schöne bilder macht die
möglichst kleine mit einem
seitenschneider lädt finde gute farben
die zum thema und zu den bildern passen
und finden fordert der auch gut zu der
seite passt wenn diese drei aspekte gut
zusammen gemischt sind ergibt das ein
wunderschönes bild auf einer website und
das macht den hauptteil aus verwenden
nicht zu viel text das liest sich eh
kaum einer durch arbeitet mit templates
oder blöcken das macht das ganze um
einiges einfacher
falls irgendwelche fragen hast kannst du
mir gerne einen kommentar schreiben
falls das video gefallen hat kannst mir
gern einen daumen hoch erlassen das
hilft sehr mit dem algorithmus und falls
noch mehr videos sehen möchtest kannst
mich auch gerne abonnieren viel erfolg
mit deiner webseite
