Transkripte
1. Einführung: Willkommen zurück zu einem weiteren
fantastischen Skillshare-Kurs bei mir, kann Besser. Es ist immer ein Vergnügen
, dich hier zu haben. Möchten Sie lernen, wie Sie
Ihrer Website
animierte Vektoren wie diese hinzufügen können? Ich möchte Ihnen zeigen, wie
Sie geladene Dateien
mit Elementor-Last zu
Ihrer WordPress-Website hinzufügen , die Datei wurde vom
Airbnb-Team erstellt und
ist Open Source. Und wie Sie sehen können,
wurde der Service von Designern
und Entwicklern aus sehr
vielen Unternehmen weltweit genutzt . Einige von ihnen sind heute
die größten Marken in der Technologiebranche. Das werden wir
alles umsonst machen. Sie müssen nicht
für ein Plug-In
oder einen Service bezahlen , wenn
Sie immer mehr Zeit verbringen. Lasst uns weitermachen und loslegen.
2. Lass uns animierte Bilder hinzufügen: Hier sind wir in meinem Dashboard. Dies ist eine brandneue
Installation von WordPress, daher habe ich keine Plugins installiert, außer denen
, die standardmäßig verfügbar sind. Ich gehe fort und wähle
die beiden aus, indem ich
dieses Kästchen ankreuze und lösche. Ich will
sie einfach nicht dort haben. Jetzt, da wir eine saubere Weste
haben, klicke
ich auf Neu hinzufügen. Und natürlich
muss ich Elementor hinzufügen. Installiere Elementor. Ich muss erwähnen, dass
elementary selbst
die Möglichkeit hat , Ihrer Website
Animationen hinzuzufügen, die
jedoch in der
Pro-Version von Elementor verfügbar sind. Wenn wir also
zur offiziellen Website wechseln, wie Sie hier bei
erstaunlichen Animationen auf Ihrer
Website mit vielen Widget sehen können . Sie müssen Profi
gehen, um diese Funktion nutzen zu
können . dies
kostenlos zu tun, da dies
in der Pro-Version verfügbar Gibt es eine Möglichkeit, dies
kostenlos zu tun, da dies
in der Pro-Version verfügbar
ist , ohne Geld auszugeben? Und die Antwort lautet „Ja“. also wieder in
unser Dashboard gehen, haben
wir, wie Sie hier sehen können, wie Sie hier sehen können, zusätzliche
Elementor-Add-Ons von
Drittentwicklern
erstellt wurden. Und einige dieser zusätzlichen
Funktionen, die mit diesen Add-Ons
kostenlos zur Verfügung stehen. Die Funktionen, die Premium oder in der Pro-Version von
elementary selbst sind. Deshalb möchten wir
Premium-Add-Ons für Elementor installieren. Und dies ist das Add-On
, das uns die Funktion bietet,
Animationen zu unserer Website hinzuzufügen. Jetzt, da wir die
beiden installiert haben, können
wir beide
gleichzeitig
aktivieren , indem wir in
installierte Plugins gehen. Ich wähle beide aus,
indem ich dieses Kästchen hier ankreuze. Und dann
sage ich „Aktivieren“ und „Bewerben“. Stimmt's? Und jetzt, da wir die beiden Plugins
installiert und aktiviert haben, muss
ich erwähnen, dass ich das Astra-Theme
verwende. Wenn ich also ins Aussehen gehe, wirst
du feststellen, dass mein
aktives Thema Astra ist. Ich gehe in Seiten. Ich
erstelle eine neue Seite. Nennen wir es Landung. Dann gehe ich genau hier
in diesen Einstellungen, ich gehe zur Vorlage
Elementor in voller Breite. Dann
veröffentliche ich es. Wahrscheinlich überschreiben die Statistik. Gehen wir also zu Edit with Elementor, denn das wird es vom Front-End aus
tun. Stimmt's? Also hier sind wir. Was wir tun wollen, ist neu hinzuzufügen. Ich möchte einen neuen Abschnitt hinzufügen. Also füge ich diesen
zweispaltigen Abschnitt hinzu. Und in dieser Kolumne hier fügen wir hier unsere Animation hinzu. Also klicke ich hier auf das
Pluszeichen. Und dann bin
ich hergekommen und tippe Lottie. Sie werden feststellen, dass wir
die elemental Pro-Version
und die Version der
Premium-Lading-Animationen haben. Wenn wir also auf die
Elementor Pro-Version klicken, können
wir sie nicht verwenden,
da
das Protokoll hier besagt, dass Sie die Pro-Version haben
müssen. Aber das Gute ist, dass
wir das
Premium-Elementor Adams-Plug-In ins Stocken geraten sind und es uns ermöglicht, die
ladenden Dateien hinzuzufügen, die es verwenden. Es wird uns hier
die
Edit-Premium-Lawdy-Animationsoptionen präsentieren . Und das erste, was
Sie bemerken werden
, ist , dass wir eine Dateiquelle haben. In der Dateiquelle haben
wir zwei Möglichkeiten. Wir können unsere eigene Datei hochladen, unsere eigene Animation, wenn sie das richtige Format hat
. Oder wir können eine externe URL hinzufügen. Also gehen wir mit
der externen URL. Und das bedeutet, dass wir beim Laden
von Dateien eine URL abrufen
und sie hier ablegen
müssen . Wird in das Laden von Dateien gehen. Und hier gehe
ich in die Suchleiste und tippe für jede Art
von Animation ein, die ich brauche. Sagen wir zum
Beispiel Schärfen. Drücken Sie dann Enter. Wie Sie sehen können, haben
wir
hier mehrere Möglichkeiten zur Auswahl. Äh, die meisten von ihnen sind kostenlos, natürlich muss es
einige Premium-Versionen geben. Ich gehe weiter und wähle
vielleicht diesen hier aus. Also klicke ich darauf. Und es wird dieses
Pop-up mit allen
Details aufrufen , die wir brauchen. Jetzt ist dies die URL, die
wir kopieren müssen, also klicke ich darauf, um
sie zu kopieren, und jetzt wird sie kopiert. Ich gehe in unsere
Elementor-Seite und füge sie in dieses Feld ein. Es wird einen Moment dauern, bis es auftaucht. Da haben wir es. Jetzt wirst du
feststellen, dass es zu klein ist. Das erste, was Sie tun müssen, ist vielleicht seine Größe zu vergrößern. Sie können hier auch einfach die Größe eingeben , die
Sie benötigen. Sagen wir 500. Dann
lasst uns das aktualisieren. Sehen Sie sich die Änderungen an.
Da haben wir es, die Animation auf unserer Website. So können Sie Ihrer Website
weitere Details hinzufügen. Vielleicht willst du vielleicht
den Weg dorthin. Begrenzte Einkaufsmöglichkeiten. Vielleicht möchten Sie
diese Schriftfarbe ändern. Vielleicht hat die Topographie die Schriftgröße von
Montserrat geändert. Vielleicht. Ich wähle
die Spalte selbst aus. Kolumne, die diesen Bereich enthält. Geh rein und geh rein. Fortgeschritten. Deaktivieren Sie die Marge und geben Sie ihm dann
eine Top-Marge von 70 an. Okay, dann
klicken wir
hier oben auf dieses Symbol , um etwas Text hinzuzufügen. Klicken wir erneut darauf
, um eine Schaltfläche hinzuzufügen. Ändern wir die
Farbschaltfläche auf dieses gelbe. Also klicke ich auf den Button. Und dann unter Schaltfläche, unter Style, gehe zu Farbe. Dieses Gelb genau hier. Da haben wir es. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Vielleicht kannst du diesen
Schriften die Farbe so blau geben. Ich gehe und wähle diese blaue,
braune Farbkonsistenz aus. Und jetzt stimmt das Blau
mit dem Blau überein. Und dann klicken wir auf diese Lawdy Animation, die in den Stil
geht. Wie Sie sehen können, haben wir hier
viele verschiedene Möglichkeiten. Wir können auch
die Animationsgeschwindigkeit erhöhen. Die Geschwindigkeit wird in
kleinen Schritten zunehmen ,
da
wir, wie Sie sehen können, in Punkten zunehmen. Und wir können auch wählen, was die Animation
auslöst. Vielleicht beim Mauszeiger, wenn
jemand darüber schwebt
, dann animiert es. Auf dem Scrollen. Wenn jemand scrollen
muss ,
beginnt er dann zu animieren. Insight-Stil. Wir können auch in
die CSS-Filter gehen und mit diesen
Einstellungen gleich hier
herumspielen. So können wir zum Beispiel die Helligkeit
erhöhen. Wir können
mit dem Kontrast herumspielen. Wir können auch die Sättigung
der Farben erhöhen
und verringern . Wir können auch mit
dem Farbton herumspielen , nur um zu sehen, ob wir unsere
Markenfarben bekommen können, richtig. Okay, lasst uns das aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Und da haben wir es. Wenn wir den Mauszeiger über acht bewegen
, wird es dann animiert. Wenn wir nicht schon schweben, animiert
es nicht, denn
das ist die Einstellung, die wir gewählt haben. So macht man das, Leute. Ich würde
Ihnen empfehlen, mit
allen Einstellungen herumzuspielen und sehen, wie kreativ Sie mit ihnen werden
können. Und das ist das
Ende unseres Tutorials. Ich hoffe, du hast heute
etwas gelernt. Und vor allem hoffe ich, dass Sie etwas
Großartiges damit machen werden. Wenn Ihnen der Kurs gefällt, vergessen Sie
nicht, eine Bewertung abzugeben. Es könnte einem anderen
Schüler helfen, zu entscheiden, ob danach sucht,
bevor er es sich tatsächlich ansieht. Wenn Sie Elementor verwenden und lernen möchten, wie
Sie großartige Webseiten und
voll funktionsfähige Websites
erstellen. Sieh dir mein Profil an. findest du mehrere Kurse Dort findest du mehrere Kurse, in denen ich
dir beibringe, wie man das macht. Ansonsten war es mir ein Vergnügen, dir das heute
beizubringen und wir sehen uns das
nächste Mal. Frieden.
Ken Mbesa, Web Designer | 3D Artist
