Neuer Container-basierter Workflow (2023): Eine Fitness-Website-Landing-Page von Scratch aufbauen

1. Intro: Willkommen zurück zu einem weiteren großartigen Elementarkurs mit mir, den ich besser machen kann. Es ist immer eine Freude, Sie hier zu haben und ich freue mich sehr, Ihnen einen brandneuen Kurs zum Erstellen schöner Landingpages und Websites mit Elementor vorstellen einen brandneuen Kurs zum Erstellen zu können. Wie immer, egal ob Sie ein Geschäftsinhaber, ein Freelancer oder einfach nur jemand sind , Ihre Webdesign-Fähigkeiten verbessern möchte. In diesem Kurs erfahren Sie alles, was Sie wissen müssen , um mühelos atemberaubende Websites zu erstellen. Elementor ist ein WordPress-Seitenersteller, der die Art und Weise, wie Websites erstellt werden, revolutioniert hat . Und jetzt, mit ihrem neuen containerbasierten Workflow, so einfach, professionell aussehende Websites zu erstellen, die auf allen Geräten gut aussehen noch nie so einfach, professionell aussehende Websites zu erstellen, die auf allen Geräten gut aussehen. In diesem Kurs. Ich werde Sie Schritt für Schritt durch den Aufbau einer Landingpage für eine Fitness-Website führen. Die Verwendung von Elementor ist die neuesten Funktionen und Techniken. Und wir werden es von Grund auf neu machen. Sie müssen keine Erfahrung haben, um loszulegen. Während des Kurses lernen Sie, jeden Aspekt Ihrer Landingpage mithilfe einer elementaren, intuitiven Drag-and-Drop-Oberfläche zu gestalten und anzupassen , wobei Schwerpunkt auf der Nutzung des Container-Workflows liegt. Wir werden uns die Container im Detail ansehen und wenn wir den Kurs abgeschlossen haben, wirst Detail ansehen und wenn wir den Kurs abgeschlossen haben, du ein gründliches Verständnis dafür haben wie man mit den Elementarbehältern arbeitet, um eine voll funktionsfähige Landingpage zu erstellen . Die fiktive Fitness-Website, die ich gerade erwähnt habe, von der Auswahl des perfekten Farbschemas die Anpassung der Schrift und die Erstellung auffälliger Grafiken bis hin zum Hinzufügen und Ändern der Größe von Bildern bis hin zur Erstellung cooler Hintergründe und Bewegungseffekte. Ich führe Sie durch den gesamten Prozess, damit Sie eine Landingpage erstellen können , die nicht nur gut aussieht, sondern Ihrem Unternehmen auch online hilft, sich von anderen abzuheben. Und wie immer werden wir die kostenlose Version von Elementor und andere tolle kostenlose Tools verwenden . Deshalb möchten Sie, dass ich jedes Geld für Premium-Plugins ausgebe , um diese schönen Landingpages zu erstellen. Alles was ich von dir brauche ist der tiefe Wunsch, Elementor zu lernen. Wenn Sie mich zum ersten Mal sehen, mein Name ist Ken und ich verwende Elementary seit fünf Jahren, um Websites für mich und Kunden zu erstellen Websites für mich und . Ich habe in den letzten zweieinhalb Jahren auch Tausenden von Schülern Grundunterricht gegeben , genau wie Sie hier oder Skillshare auf YouTube und anderen Online-Plattformen genau wie Sie hier oder Skillshare auf YouTube und anderen Online-Plattformen . Also, wenn Sie bereit sind Ihre Webdesign-Fähigkeiten auf die nächste Stufe zu heben und zu lernen, wie Sie mit einer neuen Funktion für elementare Container wunderschöne Websites erstellen . Nehmen Sie an diesem aufregenden neuen Kurs und lassen Sie uns gemeinsam eine tolle Landingpage erstellen. Also lasst uns anfangen. 2. Projektübersicht: Der beste Weg, ein neues Konzept zu verstehen oder eine Fähigkeit zu verbessern, besteht nun darin , ein Projekt zu erstellen. Während dieses Kurses werden wir also, wie bereits erwähnt, an einer voll funktionsfähigen Landingpage aus der realen Welt für eine fiktive Fitness-Website arbeiten. Verschaffen wir uns also einen kurzen Überblick über die Landingpage. Also hier sind wir. Dies ist die Landingpage die mit Elementor erstellt wird. Und bevor wir einen kurzen Blick darauf werfen, muss ich erwähnen, dass ich diese Seite während der Vorbereitung des Kurses als Referenz-Landingpage erstellt habe. Und das Gute an einer Referenz-Landingpage oder Referenz-Website ist, dass Sie so sehen können, was wir erstellen. Wenn es also an der Zeit ist, diesen Teil zu erstellen kann ich Ihnen zumindest zeigen , dass wir so etwas erstellen. Also werden wir gemeinsam diese Seite durchgehen und sie von Grund auf neu erstellen. Scrollen wir also schnell von oben nach unten. Wie Sie sehen können, lassen Sie mich es zunächst aktualisieren. Lassen Sie mich diese Seite neu laden. Wie Sie sehen können, haben wir diese Animationen im Heldenbereich. Und die Animationen befinden sich überall auf der Landingpage, nicht nur im Heldenbereich. Wie Sie sehen können, haben wir diesen Videoplayer hier. Und wenn Sie darauf klicken, können Sie hier ein Video haben, das dem Besucher erzählt worum es auf dieser Landingpage geht oder worum es auf Ihrer Website geht. Und wenn sie auf Play klicken, können sie sich ein Video ansehen. Klicken Sie nach draußen. Während wir scrollen, haben wir hier verschiedene Abschnitte, in denen Sie Ihre Dienste auflisten können und der Benutzer die Schaltfläche „ Mehr erfahren“ klicken kann, um die obszöne Seite zu gelangen. Wir haben diese Animation. Also nach unten scrollen. Und diese und diese Testimonials sollen genau hier in der Mitte sein. Ich muss vergessen haben , es genau hier in der Mitte auszurichten . Aber auf der letzten Seite, die wir erstellen, wird es natürlich gut aufeinander abgestimmt sein. Geh runter zur Fußzeile, Das ist ein Ordner. Und wenn ich Control Shift drücke, werde ich verschiedene Geräte nachahmen. Wenn ich hier auf dieses Symbol klicke, , wie Sie sehen können sieht die Landingpage, wie Sie sehen können, auch auf einem Tablet fantastisch aus. Das ist das iPad Air. Lässt mich ein iPhone 12s Pro bauen. So wird die Landingpage auf einem iPhone 12s Pro aussehen . Und natürlich ist die Speisekarte hier ein Burger-Menü. Und wenn wir im Tablet-Modus sind, ist es immer noch ein Burger-Menü. Scrollen wir also ganz nach unten. Und so sieht es auf einem Smartphone aus. Wie Sie sehen können, sieht die Landingpage im Grunde auf allen Geräten fantastisch aus. Es ist responsiv und wir werden sehen, wie wir es auch responsiv machen können. Kurz gesagt, ich habe dies als Referenz-Landingpage erstellt. Das Gute an der Erstellung der Referenz-Landingpage ist , dass ich Ihnen, wenn es an der Zeit ist, diesen Abschnitt zu erstellen, zumindest im Voraus zeigen kann , was wir erstellen werden, anstatt es einfach so zu gestalten anstatt es einfach so und Ihnen zu sagen, dass Sie mitmachen sollen, ohne dass Sie wissen, was wir erstellen. Das ist nur ein kurzer Überblick darüber, woran wir arbeiten werden, wenn wir fertig Sie werden diese Landingpage voll funktionsfähig haben und bereit sein, auf einer Website verwendet zu werden. Das werden wir also entwerfen. Und um diese Landingpage zu erreichen, müssen wir einige elementare Funktionen verwenden und viele Einstellungen anpassen, um Sie mit den Fähigkeiten auszustatten, die Sie benötigen , um in Zukunft selbstbewusst Ihre eigenen Webseiten mit Elementor zu erstellen . Und um Ihnen zu helfen, in diesem Kurs mitzumachen und dieselbe Landingpage zu reproduzieren. Ich habe alle Bilder für Sie vorbereitet und stelle sie in einem Ordner namens Assets zur Verfügung. Laden Sie es einfach von der Registerkarte Projekte direkt unter diesem Videoplayer herunter. Jetzt, wo Sie gesehen haben, woran wir arbeiten werden, habe ich das Gefühl, dass Sie sich sehr darauf freuen, loszulegen. Also, ohne weitere Verzögerung, sehen wir uns im Unterricht. 3. Astra-Theme installieren: Und hier sind wir. Wie Sie sehen können, handelt es sich um eine brandneue Installation von WordPress. Dies ist WordPress-Version 6.2. Und das erste, was ich immer mache, wenn ich an einem WordPress-Projekt arbeite , ist, ein WordPress-Theme zu installieren. also, ohne Zeit zu verschwenden, Gehen wir also, ohne Zeit zu verschwenden, zu Appearance Themes. Da wir uns im Jahr 2023 befinden, ist das aktive Thema natürlich standardmäßig 2023. Letztes Jahr war es 2022 und im Jahr davor war es 2021. Wir werden diese Standard-WordPress-Themes jedoch nicht verwenden . Wir sagen „Neu hinzufügen“. Und wir werden eines der besten Themes auf dem Markt mit dem Namen Astra installieren . Also klicke ich auf Installieren. Astra ist eines der besten Themes auf dem WordPress-Marktplatz. In Ordnung, also mache ich weiter und klicke auf Aktivieren. Und jetzt ist Astra das aktive Thema. Wie Sie sehen können, haben wir diese Dankeschön für die Installation der Astra-Benachrichtigung. Lassen Sie mich das einfach schließen. Und so installiert man ein WordPress-Theme. In der nächsten Lektion installieren wir Elementor. Wir sehen uns in Kürze. 4. Elementor installieren: Wir sind zurück. Jetzt, wo wir unser Theme installiert haben, ist es an der Zeit, Elementor zu installieren bevor wir mit der Erstellung unserer Seite beginnen können. Gehen wir also direkt zu den Plugins. Wir können auf Neu hinzufügen klicken, aber zuerst möchte ich nur auf Plugins klicken, damit wir zur Liste der installierten Plugins gelangen . Und das sind die Plugins, die standardmäßig mitgeliefert wurden , als ich WordPress installiert habe. Also möchte ich sie einfach alle loswerden. Bevor ich das tun kann, wähle ich diese beiden aus und deaktiviere sie. Wählen Sie in diesem Drop-down-Menü die Option Aktivieren aus. Und dann sagen wir Bewerben. Möglicherweise haben Sie andere Standard-Plugins von mir. Ich schlage vor, dass Sie sie einfach alle löschen. Jetzt, da sie alle deaktiviert sind, wähle ich alle aus indem ich auf dieses Kontrollkästchen klicke. Dann gehe ich hier zu Löschen, bewerbe mich. Okay? In Ordnung, wenn ich jetzt die Seite aktualisiere, haben wir kein Plug-in installiert. Also sage ich Add New und werde zum WordPress-Plugin-Verzeichnis weitergeleitet. Also werde ich weitermachen und hier nach Elementor suchen , Elementor. Und seien Sie der erste Treffer in der Ergebnisliste von elementary.com mit mehr als 5 Millionen aktiven Installationen. Klicken Sie auf „Installieren“. So installieren Sie nun jedes Plugin in WordPress. In Ordnung, also lass uns weitermachen und auf Aktivieren klicken. Da haben wir es. Also ist Elementor jetzt aktiviert. Bevor wir fortfahren, werden Sie manchmal, wenn Sie Elementor zum ersten Mal installieren, zu einem Einrichtungsassistenten weitergeleitet, in dem Sie mehrere Schritte ausführen müssen, um Ihre Website einzurichten. Weil ich Elementor bereits auf dieser speziellen Domain installiert hatte. Ich wurde nicht zu diesem Wizard weitergeleitet. Und nur für den Fall, dass Sie zu diesem Setup-Assistenten weitergeleitet wurden , in dem Sie diese Schritte ausführen müssen. Die nächsten Minuten werden Schritt für Schritt ablaufen. Ich hatte für einen anderen Kurs vorab aufgenommen in dem ich dir zeige, wie du all diese Schritte durchgehst. Also los geht's. Also klicke ich auf installiert, oder? Wenn ich also auf Aktivieren klicke, werde zum Elementor-Setup-Assistenten weitergeleitet. Also klicken wir auf Aktivieren. Und das ist der Zauberer hier. Lassen Sie mich also ein wenig herauszoomen damit Sie alles sehen können. Wie Sie jetzt sehen können, müssen wir ungefähr fünf Schritte ausführen, um alles einzurichten, bevor wir Elementor verwenden können. Der erste Schritt besteht darin, ein Konto bei elementor.com zu erstellen , wenn Sie diese Vorteile nutzen möchten, aber kein elementares Konto benötigen , um Elementor nutzen zu können. Also überspringe ich diesen Teil. Der zweite Schritt besteht also darin , zu entscheiden, ob Sie das Hello-Thema verwenden möchten , das vom Elementarteam entwickelt und gepflegt wurde. Sie haben aber auch die Möglichkeit, diesen Schritt zu überspringen , wenn Sie ein anderes Team haben, das Sie verwenden möchten Ich verwende gerne Astra. Astra Theme ist eines der leichtesten, schnellsten und SEO-freundlichsten Themes auf dem Markt. Also überspringe ich diesen Teil. Der dritte Schritt besteht darin, Ihrer Website einen Namen zu geben. Standardmäßig ist der Name, der in diesem Feld angezeigt wird, der Name, den Sie Ihrer Website bei der Installation von WordPress gegeben haben . Das ist also der Name, den ich meiner Website gegeben habe. Ich werde es nicht ändern. Also werde ich einfach weitermachen und einfach Escape drücken. Wenn Sie dann ein Logo haben, haben Sie die Möglichkeit, es in diesem Moment hochzuladen. Dies können Sie jedoch jederzeit später tun, während Sie Ihre Website erstellen, damit wir weitermachen und es überspringen können. Und dann können wir endlich direkt eine leere Leinwand bearbeiten und mit dem Erstellen einer Webseite von Grund auf neu beginnen . Oder wir können in Hunderten von Vorlagen stöbern , die von Elementor erstellt wurden und sich im Elementor-Arbeitsbereich befinden , oder unser eigenes Element von Vorlagen importieren , die wir möglicherweise zuvor gekauft oder selbst erstellt haben . Ich überspringe das. Und wenn Sie auf Überspringen klicken, gelangen Sie standardmäßig direkt zu einer leeren Leinwand, auf der Sie mit dem Erstellen Ihrer Webseite beginnen können. Um diesen Ort zu verlassen, klicken Sie auf dieses Burger-Menü und dann auf Exit to Dashboard. Wir werden also zum Backend des Editors für die bestimmte leere Leinwand weitergeleitet , die wir gerade verlassen haben. Aber was wir tun wollen, ist darauf zu klicken, um zum eigentlichen Dashboard zu gelangen, in dem wir alle Wordpress-Einstellungen haben. Und wenn Sie jetzt hier im linken Menü nachschauen, werden Sie feststellen, dass wir Elementor und Vorlagen haben. Beides wird nach der Installation von Elementor angezeigt. Und wenn wir auf Elementor klicken, können wir hier mit allen Einstellungen herumspielen. In der Regel müssen Sie jedoch keine Änderungen an den Standardeinstellungen des Plugins vornehmen. Sie werden einfach direkt mit dem Erstellen Ihrer Webseiten beginnen. Aber schauen Sie sich natürlich gerne an, wofür all diese anderen Einstellungen gedacht sind. Wenn Sie hier eine Vorlage öffnen, finden Sie hier eine Liste aller elementaren Vorlagen, die Sie möglicherweise hochgeladen oder erstellt haben. Wenn Sie eine neue Vorlage erstellen möchten, die Sie in Ihrem Projekt immer wieder verwenden können. Sie können neue hinzufügen. Wenn Sie eine Vorlage importieren möchten , die Sie heruntergeladen haben, können Sie sie von hier aus importieren. Ordnung, nachdem wir Astro, das Theme und Elementor installiert haben , können wir jetzt mit der Erstellung der Landingpage beginnen. Und wir beginnen mit der Heldenabteilung. Das ist der obere Teil jeder Landingpage , den der Kunde sieht, wenn er auf die Seite gelangt. in der nächsten Lektion Lassen Sie uns in der nächsten Lektion mit dem Aufbau des Heldenbereichs beginnen. Wir sehen uns in Kürze. 5. Elementor-Workspace-Übersicht: Willkommen zurück. Jetzt ist es an der Zeit, die Heldenabteilung aufzubauen. Und um das zu tun, schauen wir uns zunächst an , was die Helden-Sektion ist. also zu dieser Referenz-Landingpage ich zur Vorbereitung auf diesen Kurs erstellt habe. Das hier ist der Heldenbereich. Es enthält das Haupt-H1 oder die Überschrift der Landingpage, was eine kurze Beschreibung dessen ist worum es auf der Landingpage geht. Einige Call-to-Action-Schaltflächen. Wir haben diesen Video-Button hier. Dann haben wir diese Dame. Dieser Video-Button hier ruft einen Videoplayer von YouTube auf. Sie können zeigen, worum es auf Ihrer Website geht. Und Besucher können spielen und sehen, was. Lass mich das schließen. Schauen wir uns also an, wie man diese erstellt. Sie also zurück in unser Dashboard und gehen Sie direkt zu den Seiten. Und da dies eine brandneue Installation von WordPress ist , haben wir Standardseiten, die mit jeder neuen Installation von WordPress geliefert werden. Also wähle ich beide aus, indem ich das Kästchen dort ankreuze. Und in diesem Drop-down-Menü verschieben Sie sie in den Papierkorb und wenden Sie sie an. Jetzt haben wir also keine Seiten. Ich sage Neu hinzufügen. Und weil dies unsere Landingpage ist, ich davon aus, dass es die Homepage ist. Also sage ich Zuhause, das ist der Name der Seite. Und jetzt haben wir hier oben ein paar Einstellungen. Dies sind die Wordpress-Einstellungen und dies sind die Astro-Einstellungen. Wenn du Astra nicht installiert hast, wirst du diese Einstellungen hier nicht haben, weil sie mit einem Theme geliefert werden und wir sie benötigen. Lassen Sie uns also zunächst die Vorlage hier auf Elementor in voller Breite ändern . Einfach so, weil wir wollen, dass es von links nach rechts oder von rechts nach links läuft . Also Elementor in voller Breite. Und das ist alles, was wir von den WordPress-Einstellungen benötigen. Lassen Sie uns nun die Astro-Einstellungen ändern. Und hier haben wir mehrere Drop-down-Menüs , die wir öffnen müssen. Zuallererst wollen wir sagen, in voller Breite gestreckt. So sollte das Inhaltslayout aussehen. Natürlich sind diese Optionen auch nutzbar, aber ich verwende gerne volle Breite gestreckt. Gehen wir zur Seitenleiste. Wir möchten nicht, dass eine Website oder Landingpage eine Seitenleiste hat. Also werde ich ohne Seitenleiste gehen. Wir können diese Einstellungen jederzeit auf der Seite selbst ändern , während wir sie mit Elementor erstellen. Und ich zeige dir, wo wir das ändern können. Und dann lasst uns endlich Elemente deaktivieren. Wir wollen nicht die standardmäßige Astra-Kopf- oder Fußzeile , da wir mit Elementor unsere eigene erstellen werden. diese Einstellungen festgelegt sind, sage ich Veröffentlichen, klicken Sie erneut auf Veröffentlichen. Und jetzt ist unsere Seite veröffentlicht. Klicken wir nun auf Bearbeiten mit Elementor und werden zum Frontend-Builder weitergeleitet , wo wir mit dem Erstellen unserer Seite beginnen können. Wenn Sie Elementor zum ersten Mal verwenden, die neueste Version von Elementor führt die neueste Version von Elementor das ein, was wir Container nennen. Vor der Einführung von Containern verwendeten wir Abschnitte und Spalten. Und das ist der Arbeitsablauf, den du in all meinen vorherigen Elementarklassen finden wirst . Und dieser Arbeitsablauf ist immer noch sehr relevant. Sie können wählen, ob Sie mit Abschnitten und Spalten arbeiten möchten, wenn Sie damit vertraut sind. Aber jetzt gibt uns Elementor die Möglichkeit, Container zu verwenden, und das werden wir heute lernen. Also möchte ich die Container-Funktionalität aktivieren . Also klicke ich darauf. Es öffnet sich ein neuer Tab , der uns zu den Einstellungen führt , in denen wir den Flexbox-Container aktivieren können. Gehen Sie also einfach zum Flexbox-Container. Dies sind die internen Funktionen und die Elementor-Einstellungen. Drop-down-Menü aktivieren. Und dann scrollen wir nach unten und speichern die Änderungen. Ordnung, also mit diesen Änderungen gehen wir zurück zur Seite. Da sind wir. Und bevor wir die Seite aktualisieren, sieht die Benutzeroberfläche des Editors hier natürlich wie die alte Benutzeroberfläche aus, die den Workflow für Abschnitte und Spalten enthielt. Wenn wir diese Seite nun aktualisieren , um die Aktivierung des Flexbox-Containers widerzuspiegeln , wird sich dies nun geringfügig ändern. Beachten Sie, dass wir jetzt den Container haben und die Spalten weg sind. Jetzt müssen wir uns zunächst einen kurzen Überblick darüber verschaffen, wie die Container funktionieren. Also ziehe ich einfach einen Container hierher. Und jetzt haben wir diesen Container hier, der von links nach rechts verläuft. Und genau das werden wir in unserer Helden-Sektion abhalten. Und in diesen Container können wir mehr Behälter werfen, in denen wir verschiedene Arten von Inhalten aufbewahren. Um die ziehbaren Elemente erneut anzuzeigen, können wir hier oben auf dieses Symbol klicken. Und das wird die Elemente enthüllen. Nochmals, wenn ich all diese Panels hier zusammenklappen kann . Dies sind verschiedene Elemente, die wir auf unsere Seite ziehen können , um Inhalte zu erstellen. Also haben wir z.B. den Pro-Bereich. Dies sind die Elemente , die nur mit Elementor Pro verfügbar sind . Sie müssen bezahlen, um Elementor Pro nutzen zu können. Aber jetzt haben wir die grundlegenden Elemente wie die Überschrift, Bildtexteditor und all das. Dann haben wir auch allgemeine Elemente. Diese sind immer noch kostenlos. Pro Elements hat oben rechts ein kleines Schlosssymbol. Wie hier. Wir können das ziehen und dort hinstellen. Wir können das ziehen und dort ablegen. Lassen Sie mich einfach das Steuerelement Z rückgängig machen Im Grunde genommen werden wir hier unsere Elemente abrufen und sie hier ablegen und dann Änderungen an ihnen vornehmen. Kehren wir also zu unserem Basisbereich zurück und erweitern das Layout Das Layoutfenster enthält das Container-Element. Und zu Beginn gibt es eine sehr wichtige Einstellung, die wir ändern müssen. Und ich zeige dir, was das ist. Immer wenn Sie den Mauszeiger über einen Container bewegen, können Sie ihn auswählen, indem Sie zu einer dieser Ecken gehen . Also wenn ich z.B. hier reingehe und eine Überschrift da reinziehe, kann ich sie auswählen, indem ich in diese Ecke hier gehe . Und jetzt ändert sich die Überschrift. Wenn ich den Container selbst auswählen möchte, der diese Inhalte enthält, kann ich ihn auswählen, indem ich darauf klicke. Und jetzt hat es diese Container gewählt. Und wenn ich diesen äußeren Container auswählen möchte, kann ich darauf klicken. Und diese Änderungen enthalten einen Stahl. Wenn wir nun hier mit der Maus über diese Auswahlmöglichkeiten fahren, können wir einige schnelle Abkürzungen anzeigen, die uns ein paar Schritte in unserem Arbeitsablauf ersparen . Also, wenn ich in dieses Burger-Menü gehe, Benutzereinstellungen ändere und die Bearbeitungsgriffe einschalte. Wenn ich nun den Mauszeiger über eine dieser Ecken bewege, haben wir diese Tastenkombination duplizieren und löschen. Anstatt dorthin zu gehen. Wenn ich das ausschalte, anstatt hierher zu gehen, rechten Maustaste zu klicken und dann zu duplizieren. Wenn das an ist. Alles was ich tun muss, ist den Mauszeiger über diese zu bewegen und dann über das Löschen zu duplizieren. Nun, zurück zu diesem Burger-Menü, wir haben auch mehr Einstellungen. Wenn ich also auf diese Seiteneinstellungen klicke, haben wir globale Farben und wir werden sehen , wie man mit globalen Farben und globalen Schriftarten arbeitet. Wir können das Verhalten aller Telefone auf der Website und all diese anderen Einstellungen ändern. Aber wir müssen sie vorerst nicht anfassen. Normalerweise müssen Sie diese berühren , wenn Sie an der gesamten Website arbeiten. Aber im Moment konzentrieren wir uns auf die Landingpage. Lassen Sie mich also diese Einstellungen schließen. Und das ist jetzt ein kurzer Überblick über den elementaren Arbeitsbereich. In der nächsten Lektion werden wir nun anfangen , mit Containern zu arbeiten , um den Heldenbereich zu erstellen. Also wir sehen uns in Kürze. 6. Container verstehen: Hallo, willkommen zurück. Nachdem wir uns einen kurzen Überblick über den elementaren Workspace verschafft haben , ist es an der Zeit, zu verstehen, wie Container funktionieren. Lassen Sie mich das also einfach löschen. Und dann, anstatt diesen Container hierher zu ziehen, lassen Sie mich hier auf dieses Plus-Symbol klicken. Nun, hier sind hübsche Build-Strukturen eines Containers. Ziehen und Ablegen hier entspricht dem Hinzufügen eines dieser Container. Aber jetzt sind diese Container, denen sich Unterteilungen befinden , Container, in denen sich andere Container als Vorlagen befinden. Diese beiden haben keine Behälter drin. Und sie sind das Gleiche wie das Ziehen und Ablegen dort hin, weil es keinen Container hat. Wenn wir das hier hinzufügen, ist es, wie Sie sehen können, ein Container. Du kannst an der Grenze sehen. Und es hat diesen Behälter. Und dieser Container. Wenn wir vielleicht diesen hier hinzufügen. Wie Sie sehen können, ist es der Container, und dann hat er sechs weitere Behälter darin. Und jetzt, wenn ich das lösche, schauen wir uns das kurz an. Nun, weil dieser äußere Behälter zwei Behälter enthält. Wenn wir es auswählen und die Einstellungen anzeigen, werden Sie feststellen, dass wir diese Elemente hier unten unter Layoutelementen haben hier unten unter Layoutelementen und dass wir die Richtungseinstellung haben. Und was diese Richtungseinstellung bedeutet, ist einfach, wie die Behälter in einem anderen Container angeordnet sind. Zeile, horizontal bedeutet also , dass sie von links nach rechts angeordnet sind . Denn das haben wir derzeit von links nach rechts. Wenn wir wollen , dass diese Behälter übereinander gestapelt werden , dann von oben nach unten. Wir können diese vertikale Einstellung so wählen. Und jetzt ist das oben auf der Basis. Nur um uns zu helfen, visuell zu verstehen, was wir tun. Lassen Sie mich dort eine Überschrift hinterlassen und hier wieder reingehen und vielleicht dort einen Knopf hineinwerfen. Denken Sie jetzt daran, dass dies immer noch Container sind. Und jeder Container enthält jetzt ein Element. Das enthält also ein Button-Element und dieses enthält ein Textelement. Gehen wir jetzt zurück und wählen diesen äußeren Behälter hier Jetzt sind wir wieder bei den Esseinstellungen. Denken Sie daran, wir sind von links nach rechts gegangen. Lassen Sie mich von links nach rechts, von links nach rechts und dann von oben nach unten auswählen . Aber bevor ich von oben nach unten darauf klicke, können wir es rückgängig machen. Und das bedeutet, dass der Behälter auf der linken Seite jetzt auf der rechten Seite steht und der auf der rechten Seite auf der linken Seite. Sehen wir uns also die Umkehrung an und jetzt sind sie umgekehrt. Und jetzt stapeln wir sie von oben nach unten. Das bedeutet, dass der erste Container jetzt oben und der zweite unten ist. Und das Gegenteil ist von unten nach oben. Und jetzt wird es umgekehrt. So funktioniert ein Container. Und natürlich spielt es keine Rolle, wie viele Container wir haben. Was wirklich zählt, ist, welche Richtung Sie für den äußeren Behälter gewählt haben , in dem sich die anderen Behälter befinden. Also, wenn wir wieder reingehen und hier einen Container hinzufügen, lassen Sie uns ihn da hineinwerfen. Und jetzt haben wir drei Container. Und wenn wir sie von links nach rechts anordnen , wählen Sie dies aus. Wenn wir sie von links nach rechts anordnen. Jetzt haben wir drei Container. Und wenn wir welche hinzufügen, fügen wir vielleicht ein hinzu, fügen wir dort ein Symbol hinzu. nun den äußeren Behälter auswählen, können wir sie umkehren. Und die mittlere ändert sich nicht denn wenn wir sie umkehren, bleibt sie immer noch in der Mitte. Jetzt, wo wir die verschiedenen Teile der Landingpage erstellen, werden Sie diese Container in Aktion sehen. Und sie ermöglichen uns viel Flexibilität bei der Gestaltung der verschiedenen Elemente auf unserer Webseite. Und das ist nur ein kurzer Überblick über Container. In der nächsten Lektion werden wir praktischer vorgehen und sehen, wie man sie einsetzt, um eine wunderschöne Helden-Sektion zu erstellen. Nur so wirst du verstehen können, wie man sie wirklich benutzt. Also wir sehen uns in Kürze. Stück. 7. Der Heldenabschnitt - Hinzufügen der Heldenelemente: Willkommen zurück. Lassen Sie uns nun theoretische Wissen, das wir über Container gelernt haben , in die Tat umsetzen. Also lass uns weitermachen und alles von hier aus löschen. Und jetzt schauen wir uns diesen Abschnitt für eine Sekunde an. Wir haben diesen Container hier, der den Text und die Schaltflächen enthält. Und wir haben noch einen Container mit dem Heldenbild. Fügen wir also einen Doppelcontainer hinzu. Behälter. Mit anderen Worten, ein Container, der bereits zwei Container hat. Da haben wir es. nun in diesem Container Lassen Sie uns nun in diesem Container ein Bildelement hinzufügen . In diesem Behälter. Fügen wir eine Überschrift hinzu. Gehen wir wieder rein. Texteditor, mit anderen Worten, ein Absatz. Lassen Sie es fallen, sobald diese Anzeige erscheint. Und dann lassen Sie uns ein Button-Element löschen. In Ordnung, also lass mich zuerst auf Update klicken. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Das ist es also, was wir haben. Sehr einfach. Lassen Sie uns nun zunächst hier ein Bild hinzufügen, ein aktuelles Bild dieser Dame. Denken Sie daran, dass ich bereits erwähnt habe, dass all diese Bilder in einem Ordner namens Assets bereitgestellt werden. direkt unter diesem Bild Schauen Sie sich direkt unter diesem Bild einfach den Tab Projekte unter diesem Bild an. gehe also wieder hier rein Ich gehe also wieder hier rein und wähle das Bildelement aus und das ändert sich in Bild bearbeiten. Das sind also Einstellungen dieses Elements. Ich wähle das Kästchen da drin aus. Vorerst. Ich habe noch keine Bilder in der Medienbibliothek, also gehe ich zum Hochladen von Dateien und wähle aus. Und jetzt ist dieser Ordner auf meinem Desktop. Ich klicke einfach darauf. Es heißt Vermögen. Sie können es auf der Registerkarte Projekte herunterladen . Also lass mich es öffnen. Das ist die Lady Open. Und es ist jetzt hochgeladen. Also lass mich sagen auswählen. Da haben wir es. Da ist also die Dame. Das zweite, was wir tun müssen, ist die Schriftart und Schriftfarbe zu ändern . Gehen wir also wieder rein, wenn wir die Schrift auf Weiß ändern, wirst du nicht sichtbar sein. Das bringt uns zum nächsten Schritt, der Änderung des Hintergrunds unserer Website. Gehen wir also in dieses Burger-Menü und gehen wir zu den Seiteneinstellungen. Dadurch werden all diese Einstellungen hier angezeigt. Und wir wollen zu Hintergrund, Hintergrundtyp gehen. Und lassen Sie uns diese Farbe auswählen und sie schwarz machen. Ich aktualisiere das zurück zum Editor. Jetzt können wir diese Schrift hier ändern. Wir wollen eine Schrift namens Montserrat verwenden. Um diese Texte zu ändern, wählen wir das Überschriftenelement aus, und dieses wird zur Überschrift bearbeiten geändert. Und wir können stilvoll reingehen. Ändere das auf Weiß. Klicken Sie zunächst auf eine beliebige Stelle hier im Editor, um dieses Feld zu entfernen. Und dann lasst uns in die Topographie gehen. Und in diesem Drop-down-Menü geben Montserrat ein, wählen Sie Monate, Irak aus, und wie Sie sehen können, wurde es zu Monitor Rack geändert. Als Nächstes wollen wir die Schriftstärke ändern. Ich benutze gerne Schwarz. Das bedeutet einen sehr fetten Text, da dies unsere Hauptüberschrift auf dieser Landingpage ist. Ich mache einfach weiter und kopiere das. Sie müssen es eingeben. Mach weiter und kopiere das. Und solange dies noch ausgewählt ist, gehen Sie in den Inhalt, in den Titel, und fügen Sie ihn dort ein. Starker Körper, Geist und Seele. Ich wähle diese Texte aus. Gehen Sie Insights, fügen Sie Text und Farbe hinzu, ändern Sie das auf Weiß. Klicken Sie hier auf eine beliebige Stelle , um das zu entfernen. Und dann werden Sie natürlich feststellen, dass dies Roboto ist. Elemental wird mit Standardschriftarten geliefert, und hauptsächlich für die Absätze ist es Roboto. Das heißt, jedes Mal, wenn wir ein brandneues Texteditor-Element hinzufügen , wird es immer Roboto sein, sofern wir es nicht manuell ändern. Um zu vermeiden, dass wir es jedes Mal manuell ändern müssen, können wir im Burger-Menü erneut die Seiteneinstellungen aufrufen . Und hier ändern wir jetzt globale Schriftarten. Primär, das sind die Überschriften. Wir haben diese spezifischen bereits auf Montserrat geändert. Aber beachte, dass es Roboto ist. Das heißt, jedes Mal, wenn wir eine Überschrift hinzufügen, werden es immer Roboter sein. sei denn, wir sagen ausdrücklich, wir wollen , dass es Montserrat ist und wir wollen, dass es schwarz ist. Gehen wir zur Sekundarstufe. Ändern wir das auf Montserrat. Gehen wir zu den Texten. Jetzt. Das sind die Absatztexte. Ändere das auf Montserrat. Gehen wir zu Accent. Ändere das in Montero. Aktualisiere das zurück zum Editor. Aus irgendeinem Grund hat sich das nicht geändert, aber wir können es jederzeit manuell ändern. Ich werde herausfinden warum. Also lass uns hier rein gehen. Im Inneren, solange dies ausgewählt ist, Texteditor Topographie, Montserrat. Aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Da haben wir es. 8. Der Hero-Abschnitt - Styling der Heldenelemente: Jetzt wollen wir den Button so ändern, dass er diese abgerundeten Ecken hat. Und gleichzeitig müssen wir ihm dieses Grün geben. Und ich habe den grünen Farbcode genau hier. Lass mich es einfach von meinem anderen Bildschirm auswählen. Ich gehe hier rein. Wählen Sie das aus. Ich gebe auch diese spezifischen grünen Farbcode nur für den Fall, dass Sie mit dem ausgewählten grünen Farbcode gehen möchten , ich werde diese Schaltfläche auswählen, passendes Stil. Der Knopf. Wir haben die Topographie. Wir sind bereits nach Montserrat gewechselt, aber wir haben auch Farbe. Wählen Sie das aus, fügen Sie das dort ein. Und Sie werden feststellen, dass sich die Farbe der Schaltfläche geändert hat. Nun zur Textfarbe, ändern wir sie auf Schwarz, und jetzt ist sie schwarz. Beim Schweben. Wir wollen, dass es eine weiße Farbe hat. Wenn wir jetzt den Mauszeiger bewegen, ist es weiß. Wir wollen, dass der Text schwarz bleibt. Gehen wir jetzt auch zur Polsterung. Wir möchten den Abstand zwischen dem Rand der Schaltfläche und dem Inhalt, dem Text, hinzufügen . Der Abstand ist genau hier. Wie Sie sehen können, ist es hier etwas größer. Also geh zum Padding, unterbrich diesen Link. Um die einzelnen Seiten zu bearbeiten. Ohne die Verbindung zu unterbrechen. Das heißt, wann immer Sie hier eine Änderung an einer der Zellen vornehmen, wirkt sich dies auf alle Seiten aus. Möchte einzelne Seiten bearbeiten. Also deaktiviere das. Wähle die linke aus, gib ihr dort 50, oder? 50. Die Ober- und Unterseite können 20 sein. Und jetzt für den Grenzradius, geben wir ihm 50. Um die abgerundete Ecke hier kleiner als die Zahl zu nennen, desto weniger abgerundet ist sie. Wenn wir also vielleicht 20 angeben, sehen Sie, dass es weniger gerundet wird. Wenn wir zehn geben, ist es viel weniger gerundet. Wenn wir Null geben, ist es nicht gerundet. Also geben wir ihm 15. Wenn Sie diesen Link auf diese Weise unterbrechen, können Sie eine Seite ohne die abgerundete Ecke haben . Aktualisiere das. Lassen Sie uns die Änderungen so in der Vorschau anzeigen. Fakt, ich lasse es so. Eine Sache, die Sie jetzt bemerken werden, ist, dass wir zwei Knöpfe haben. Also, wie fügen wir hier die zweite Schaltfläche hinzu? Wenn wir eine neue Schaltfläche hierher ziehen, wird sie direkt hier unter dieser Schaltfläche angezeigt. Und das liegt daran, dass sich die Schaltflächen, der Texteditor und die Überschrift alle in einem Container befinden. Wenn ich also den Container auswähle, wenn wir uns die Richtung ansehen, sind sie alle von oben nach unten angeordnet. Alle Elemente gehen also von oben nach unten. Wenn Sie möchten, dass sie von links nach rechts gehen und die horizontale Zeile auswählen. Alles, einschließlich der Steuer, wird von links nach rechts neu angeordnet. Aber das wollen wir nicht. Wir möchten nur, dass die Schaltflächen von links nach rechts angeordnet sind, nicht der Text. Also zurück zu dieser Einstellung hier, oben nach unten, was machen wir? Wir können einen Container hier verwenden, einen Container ziehen und ihn dort ablegen. Dann ziehen wir diesen Button da rein. Und lassen Sie uns auch diese anderen Schaltflächen in diesen Container ziehen , wenn dieser Indikator erscheint. Und jetzt sind sie beide im Container. Und wenn wir jetzt diesen speziellen Container hier auswählen, können wir die Richtung so ändern, dass sie von links nach rechts verläuft. Das ist die Macht von Containern. Wählen Sie nun diese Schaltfläche, klicken Sie mit der rechten Maustaste auf Kopieren. Wählen Sie diese Schaltfläche und fügen Sie den Stil ein. Und jetzt hat es alle Stile dieser anderen Schaltflächen geerbt . Aber jetzt wollen wir, dass es weiß ist. Also, solange es noch ausgewählt ist, werde ich mich stilistisch umschauen. Farbe. Ändere das auf Weiß. Und beim Schweben. Wenn der Mauszeiger darüber schwebt, oder wechselt es zu einem hellgrauen Farbton? Auf Hobo wollen wir es auch Bob geben. Also solange es beim Hover noch ausgewählt ist, möchte ich so hellgrün sein. Und während Hover ausgewählt ist, wird eine Hover-Animation angezeigt. In diesem Drop-down-Menü. Sie können jede gewünschte Animation auswählen. Ich mag Bob und Bob, einfach so. Wählen wir das aus. Unter Hover schweben Sie mit dem Mauszeiger über die Animation. Bob. Ordnung, also lasst uns weitermachen und das aktualisieren und eine Vorschau der Änderungen anzeigen. Ordnung, jetzt gehe ich wieder hier rein und lasse mich diese Überschrift auswählen. Gehe zu Style-Typografie. Und lass uns die Größe so ändern , dass sie vielleicht irgendwo da ist. Aktualisiere das. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. In Ordnung, jetzt werden Sie feststellen, dass sie vertikal nicht gut ausgerichtet sind. Der Text und der Button scheinen etwas erhabener zu sein als das Mädchen. Denn wenn wir hier eine imaginäre Linie ziehen, sollten diese etwas niedriger sein. Der beste Weg, dies zu tun, besteht nun darin, eine Rechtfertigung zu verwenden. Wenn wir also diesen Hauptcontainer auswählen und Elemente ausrichten, kommen hier die Einstellungen ins Spiel. Wenn wir Zentrum sagen. Jetzt befindet sich alles, was sich auf den äußeren Behälter bezieht , vertikal in der Mitte. Das ist der Abstand von hier. Und der Abstand wird hier gleich sein. Einfach so. Aktualisiere das. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Da haben wir es. Aber jetzt beachte, dass dieser Inhalt bis an den Rand geschoben wird und unserer nach innen geschoben wird. Gehen Sie also zurück, wählen Sie in diesem Drop-down-Menü den Hauptcontainer und die Inhaltsbreite aus und wählen Sie Ganze Woche aus. Und jetzt haben wir ein Container-Update in voller Breite. Lassen Sie uns die Änderungen überprüfen. Da haben wir es. Aber jetzt wollen wir nicht, dass es die Kanten vollständig berührt. also hier nochmal reingehen, solange das noch ausgewählt ist, können wir sagen, vielleicht 80%. Also 80% Und jetzt nimmt es 80 Prozent der Bildschirme ein. Weint. Lassen Sie uns das aktualisieren und eine Vorschau der Änderungen anzeigen. Da haben wir es. Als Nächstes wollen wir diesen Hintergrund hinzufügen, diese Wellen, die ihnen einen gewissen ästhetischen Wert verleihen. Landingpage. gehe also wieder rein, solange dies noch ausgewählt ist, solange dies noch ausgewählt ist, möchte ich mich mit Stil, Hintergrund und Hintergrundtyp befassen. Ich wähle Classic. Und jetzt haben wir diesen Bildraum hier. Klicken Sie auf dieses Bild, da wir diese Wellen als Bildhintergrund hinzufügen möchten . Also gehe ich zum Upload und du wirst diese Welle immer noch hier finden. Dies ist der Heldenbereich mit Neonhintergrund. Ich habe es bereits in Adobe Illustrator für dich erstellt. Und jetzt haben wir es hochgeladen. Also wähle aus. Und da haben wir es. Aber jetzt werden Sie feststellen, dass es genau hier abgeschnitten ist. Also eine Sache, die wir tun wollen, ist, in die Innenposition zu gehen und Mitte zu sagen, oder? So. Und wir wollen auch sagen, keine Wiederholung, keine Wiederholung. Aktualisiere das. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Da haben wir es. Das bringt jetzt eine kleine Herausforderung mit sich. Wie Sie sehen, ist es abgeschnitten, weil der Rand dieses Abschnitts bis zu 80 Prozent der Seitenbreite ausmacht. Und was wir wollen, ist, dass es so bis zum Ende geht . Also müssen wir hier kreativ werden. Denken Sie daran, dieser Behälter enthält zwei Hauptbehälter. Es enthält den Textblock-Container und den Hero-Abschnittscontainer. Und die Einstellungen laufen von links nach rechts. Wenn wir also hier einen Container hinzufügen möchten, müssen wir ihn genau dort hinzufügen. Jetzt haben wir also drei Container, aber wir wollen diesen Container, diese beiden Container, in den neuen Container stellen . Also werde ich das da reinschleppen. Und dann das da drin. Und jetzt haben wir diesen Container, diese beiden Container enthält. Aber standardmäßig läuft alles von oben nach unten. Also müssen wir ihm sagen, dass er von links nach rechts laufen soll. Und jetzt sind diese beiden Behälter in diesem Behälter, das ist in diesem äußeren Behälter. Und wenn wir diesen äußeren Container in voller Breite gestalten, verläuft der Hintergrund jetzt von links nach rechts, von Kante zu Kante. Lassen Sie mich das aktualisieren. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Ordnung, jetzt ist der innere Behälter, der diese beiden Behälter enthält, immer noch verpackt. Wir wollen, dass es die volle Breite hat, aber jetzt wollen wir, dass es 80 Prozent ist. Und wir wollen den äußeren Behälter auswählen, um diesen inneren Container in die Mitte zu schieben. Also wollen wir, dass es im Mittelpunkt steht. Aktualisiere das. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Da haben wir es. Und jetzt fangen wir zumindest an, irgendwohin zu kommen. Dieser Text ist etwas größer, also wählen wir die Überschrift aus, gehen zur Seitentopographie und machen sie so größer. Update, solche Vorschauänderungen. Und jetzt richten wir alles vertikal in der Mitte aus. In diesem Container. Einfach so, Update. Änderungen in der Vorschau anzeigen. Jetzt ist alles richtig ausgerichtet. So baut man also die Helden-Sektion auf. Aber jetzt wundern Sie sich vielleicht, das ist ein wunderschöner Heber-Abschnitt, aber wir haben keine Navigationsleiste. Wo ist die Menüleiste? Wo ist das Logo? Keine Sorge, genau das werden wir tun. In der nächsten Lektion. Sehen wir uns an, wie man die Navigationsleiste hinzufügt, die das Menü und das Logo enthält. Einfach so. Das Logo und die vielen. Also wir sehen uns in Kürze. 9. Die Nav-Leiste – Installieren Sie ElementsKit: Willkommen zurück. Jetzt haben wir also bereits an der Helden-Sektion gearbeitet. Natürlich weiß ich, dass wir diesen Video-Button hier nicht hinzugefügt haben , aber das werden wir tun, keine Sorge. Aber was wir tun wollen, ist die Napa zu gründen. Gehen wir also zurück in unseren Editor, das ist die Landingpage, aber hier werden wir die Napa nicht erstellen. Also möchte ich einfach von hier weggehen. Wir werden wieder hier sein, um den Rest der Seite zu erstellen, all diese anderen Teile. Aber lassen Sie uns vorerst diese Seite verlassen. Also klicke ich auf dieses Burger-Menü. Und unten hier ist ein Ausgang. Wenn Sie es zum ersten Mal aufrufen, wird ein Drop-down-Menü angezeigt, in dem Sie auswählen können, wohin Sie immer weitergeleitet werden möchten , wenn Sie auf Exit klicken. Also wähle ich das WP-Dashboard. Das heißt, jedes Mal, wenn Sie hier auf Exit klicken, werden Sie immer zum Dashboard weitergeleitet. Das passiert nur einmal, also wähle ich das WP-Dashboard aus und bewerbe mich dann. Lassen Sie mich zunächst stornieren und aktualisieren, die Änderungen sind richtig. Da ich bereits ausgewählt habe wohin ich weitergeleitet werden möchte, , wenn ich auf Beenden klicke dieses Popup nicht angezeigt, wenn ich auf Beenden klicke. Es bringt mich einfach zum Armaturenbrett. Nun, da wir bereits wissen, dass dies Version 6.2 ist, lassen Sie mich das verwerfen. Und jetzt, um diese Navbar zu erstellen, müssen wir ein weiteres Plugin installieren, das eine Erweiterung von Elementor mit dem Namen Elements Keep Light Plugin ist . Gehen wir also zurück in unser Dashboard. Plugins, füge neue hinzu. Und hier möchte ich nach Elementor suchen. Elementor. Und jetzt werden Sie feststellen, dass es neben Elementor natürlich neben Elementor viele andere auf Elementor basierende Plug-ins gibt. Dies sind Plugins, die von Drittanbietern erstellt wurden , um die Leistung und Funktionen von Elementor zu erweitern . Elementor wurde von Elementary Outcome entwickelt, aber wichtige Add-Ons für Elementor wurden vom WP-Entwickler entwickelt, Premium-Add-Ons von Leap 13. Und was wir brauchen, sind Elemente, die elementare Add-Ons von WP erfüllen. Also klicke ich auf Jetzt installieren. Wir benötigen auch die Sticky-Header-Effekte für Elementor, und ich zeige Ihnen, wo sie verwendet werden. Für. Notieren wir uns nun, dass Sie es installieren. Wir werden es installieren , wenn wir es brauchen. Nun, da das Elements Kit installiert ist, klicken wir auf Aktivieren. Da haben wir es. Jetzt haben wir die Elements-Tastenbeleuchtung installiert, und hier ist sie in unserer Seitenleiste. Select Elements Kit wird also zum schrittweisen Assistenten weitergeleitet, in dem wir das Plugin oder Add-on einrichten können. Der erste Schritt besteht darin, hier eine dieser drei Optionen auszuwählen . Was diese Optionen bedeuten, hängt im Grunde davon ab, welche Option Sie hier auswählen. Einige der Widgets und Funktionen hier sind nicht aktiv und stehen Ihnen im Frontend zur Verfügung , während Sie Elementor verwenden. Also wenn ich hier z.B. Advanced auswähle, schau dir an, was mit einigen dieser Widgets passiert. ZB ist der Widget-Builder jetzt standardmäßig aktiviert. Das heißt, wenn ich Elementor im Frontend verwende , um eine Seite zu erstellen , die wir erstellt haben, wird mir eine im Frontend zur Verfügung stehen. Und das gilt auch für andere Funktionen hier unten. Also benutze ich gerne Advanced. Also klicken wir auf den nächsten Schritt. Der nächste Schritt. Geben Sie im nächsten Schritt einige nicht sensible Diagnosedaten weiter. Als Nächstes, max., speichern Sie die Änderungen. Jetzt ist das Elements Kit für uns einsatzbereit. Lass mich das loswerden. 10. Die Nav-Leiste - Fügen Sie die Navbar-Elemente hinzu: Und jetzt werden Sie feststellen, dass wir unter Elements Kit eine sogenannte Kopf- und Fußzeile haben. Hier wollen wir hin, klicken Sie auf Kopf- und Fußzeile. Und hier können wir verschiedene Kopf- und Fußzeilen erstellen , die je nach unseren Einstellungen auf verschiedenen Seiten angezeigt werden . Also werde ich weitermachen und neue hinzufügen. Nennen wir es Header. Der Typ ist Header. Wir können nur eine Kopf- oder Fußzeile haben. Voraussetzung ist, dass ich möchte, dass es auf der gesamten Website sichtbar ist. Wenn Sie jetzt die Pro-Version dieses Plugins kaufen, können Sie entscheiden, ob dieser bestimmte Header nur auf bestimmten Seiten verfügbar oder sichtbar sein soll . Ich möchte also, dass es auf der Vorderseite sichtbar ist und ich möchte, dass es aktiviert wird, wenn Sie Wartungsarbeiten durchführen, und Sie möchten nicht diese Navigationsleiste sichtbar dass diese Navigationsleiste sichtbar ist, während Sie diese Wartung durchführen. Sie können es deaktivieren. Also speichere die Änderungen, weil ich möchte, dass sie sichtbar sind. Ich lasse es aktiviert und speichere die Änderungen. Und los geht's. Jetzt ist es also aktiv. Sagen wir bearbeiten. Bearbeiteter Inhalt wird zum Frontend umgeleitet , wo wir ihn jetzt visuell erstellen können. Da sind wir. Jetzt werden Sie feststellen, dass wir den Heldenbereich, den wir bereits erstellt haben, nicht haben. Und das liegt daran, dass wir den Teil verlassen haben , in dem wir den Heldenbereich bearbeitet haben. Das ist jetzt der Teil, in dem wir die Navigationsleiste bearbeiten. Lassen Sie uns also weitermachen und einen Doppelcontainer hinzufügen, Container. Die Struktur, das wird das Logo enthalten. Klicken Sie also auf dieses Plus auf das Bild, da unser Logo im Wesentlichen ein Bild ist. Und während das ausgewählt ist, ändert sich dies, um Bild bearbeiten zu können. Gehen Sie hierher, laden Sie Dateien hoch, wählen Sie Dateien aus. Fitness. Das ist das Logo, das ich für dieses Projekt erstellt habe. Da haben wir es. Wählen Sie das aus. Als Nächstes möchten wir unser Menü hinzufügen. Also lass uns hier reingehen und Plus sagen. Und hier geben wir Navi ein. Jetzt werden Sie feststellen, dass wir Elemente navigieren müssen. Wir haben das Navi von Elements Kid und dann jetzt von Elementor Pro. Und wir können diese Elementor Pro-Navigationselemente nicht verwenden diese Elementor Pro-Navigationselemente , da sie hier dieses Schlosssymbol haben. Es ist ein Pro-Element. Also lass mich das hier reinziehen und ablegen. Und wenn Sie es jetzt dort ablegen, solange es noch aktiv ist, ist es natürlich, Bearbeitungselemente erhalten das Nav-Menü. Dies sind seine Einstellungen. Und Sie werden feststellen, dass das erste, was hier passiert, das Auswahlmenü ist, ein Menü wie dieses. Und dieses Menü besteht aus Menüpunkten. Und diese Menüelemente sind eigentlich Seiten, Webseiten, die About-Seite, Video-Seite, die Sharp-Seite und die Kontaktseite. Das bedeutet, dass wir eine Reihe von Webseiten als Menüelemente erstellen müssen . Also gehe ich wieder rein und klicke einfach auf Update. Lassen Sie uns dann eine Vorschau der Änderungen anzeigen. Und natürlich haben wir hier keine Speisekarte. Also, wenn ich wieder hier reingehe, möchte ich zurück zum Armaturenbrett gehen, also gehe ich. Und lassen Sie uns innerhalb von Seiten gehen , um ein paar Seiten zu erstellen. Wir haben bereits die Homepage. Also werde ich mit der rechten Maustaste darauf klicken und den Link in einem neuen Tab öffnen. Das mache ich immer wieder. Gehen wir nun zu diesen Tabs und ändern wir das. Nennen wir das ungefähr. Wir sind nicht wirklich besorgt über diese jetzt veröffentlichten Änderungen. Wir wollen nur ein paar Menüpunkte haben, die veröffentlicht sind. Gehen wir zu den nächsten veröffentlichten Videos über. Gehen wir zum Laden. Veröffentlichen. Viele haben auch den Kontakt veröffentlicht. Also jetzt zurück hier, wenn ich das Dashboard aktualisiere, haben wir jetzt all diese Seiten. Als Nächstes müssen wir in die Darstellungsmenüs gehen. Und hier erstellen wir das Menü, das all diese Seiten als Menüelemente enthält. Und Sie werden gleich hier links feststellen, dass dieser Teil ausgeblendet ist, da wir noch kein Menü erstellt haben. Erstellen Sie unten Ihr erstes Menü. Also nenne ich es Fitness-Menü. Und ich mache es zum Hauptmenü. Dann Menü erstellen. Jetzt, wo es erstellt ist, können wir Menüelemente aus der linken Spalte hinzufügen, genau hier. Und wenn ich das zusammenklappe, können Menüelemente Seiten sein, was wir verwenden werden. Sie können aber auch Beiträge wie Blogbeiträge sein. Es können benutzerdefinierte Links sein. Wir können das erweitern und haben hier einen spezifischen Link. Und dann erfahren die Linktexte vielleicht mehr. Und wir können sagen Menü hinzufügen, oder wir müssen einen Link angeben, ich füge einfach einen Hash ein. Also haben wir das jetzt dort hinzugefügt. Oder sie können auch Kategorien sein. Aber im Moment wollen wir, dass die Menüelemente Seiten sind. Und wenn wir das erweitern, hier sind alle unsere Seiten. Lassen Sie mich also alles auswählen und zum Menü hinzufügen. Lassen Sie uns diese entfernen. Erfahren Sie mehr über einen benutzerdefinierten Link, da wir ihn nicht benötigen. Und lassen Sie uns diese Menüelemente hineinziehen und neu anordnen. Zuhause. Kontakt, weil es sich auf der äußersten rechten Seite befindet. Startseite über Videos Sharp. Startseite über Videos Sharp. Und jetzt sind wir drin, das ist erledigt. Menü speichern. Unser Fitnessmenü ist also gespeichert. Es wurde mit diesen Menüpunkten aktualisiert. Gehen wir jetzt zurück in den Header-Ordner, Header und bearbeiten Sie ihn mit Elementor, da wir bereits angefangen haben, daran zu arbeiten. Wenn wir das Navigationselement auswählen, das wir zu dieser Hälfte hinzugefügt haben , und zum Auswahlmenü gehen. Jetzt steht uns das Fitnessmenü zur Verfügung. Wenn wir das wählen. Unsere Speisekarte wurde hinzugefügt. 11. Die Nav-Leiste – Styling der Elemente: Aber standardmäßig ist alles schwarz, also müssen wir, solange es noch ausgewählt ist, zum Stil wechseln. Lassen Sie mich zuerst das Menü-Wrapper-Panel zusammenklappen. Geh rein. Menü, Elementstil, Element, Schriftfarbe. Lass es uns weiß machen. Da haben wir es. Gehen wir zurück zum Inhalt und sagen die horizontale Menüposition, oder? Dadurch wird es auf die rechte Seite geschoben. Gehen wir zurück in den Stil. Aber wir wollen, dass es so grün ist. Also lass mich einfach die grüne Farbe ziehen. Kopiere das. Solange dies noch ausgewählt ist, möchte ich den Menü-Wrapper, Stil der Menüelemente und die Farbe der Elementsets reduzieren. Wir möchten jedoch, dass es so grün ist. Und wenn es aktiv ist, wollen wir immer noch, dass es so grün ist. Ich sage Update. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Da haben wir es. Aber jetzt ist dieses Logo natürlich zu groß. Lassen Sie mich diese Tabs schließen. Gehen wir also wieder rein, wählen Sie den äußeren Container aus und lassen Sie uns ihn in voller Breite erstellen. Aktualisiere das. Sehen wir uns eine Vorschau der Änderungen an. Und jetzt scheint es aus zu sein. Also, was ist hier die Lösung? Dieselbe Lösung, die wir für den Heldenbereich verwendet haben, als wir diese beiden Behälter in einen Behälter gestellt haben diese beiden Behälter in , der sich innerhalb des äußeren Containers befand. Mal sehen, wie das geht. Also, wenn wir hier rein gehen, ziehen wir einen Container genau hierher. Denn denken Sie daran, dass im äußeren Behälter alles von links nach rechts gestapelt ist. Und jetzt ziehen wir das Logo hier neben diesen neuen Containern hinein. Und lassen Sie uns diese Container auch in diese anderen Container ziehen . Das heißt, es sollte sich unter dem Logo befinden. Einfach so. In Ordnung, also wählen wir es jetzt aus. Solange es noch ausgewählt ist. Wählen wir solche Anordnungen von links nach rechts aus. Solange es noch ausgewählt ist, machen wir es in voller Breite. Und wählen wir den Logo-Container und machen ihn zu 20 Prozent breit. So. Fakt ist, lassen Sie uns eine Breite von 1010 Prozent erreichen. Und jetzt werden Sie feststellen, dass wir dieses Feld hier haben weil wir dafür keinen bestimmten Prozentsatz angegeben haben. Und es sollten 90 sein, weil das zehn Prozent sind. Der Logo-Container besteht aus zehn Prozent, also sollten sie die restlichen 90, 90 Prozent so einnehmen. Aktualisieren. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Also los geht's. Aber jetzt auf unserer Referenzwebsite hier waren sie nicht sehr nah an den Rändern. also wieder hier reingehen, können wir diesen inneren Behälter herstellen , der diese beiden Behälter enthält. Volle Breite, aber 90%. Jetzt geht es natürlich von links nach rechts. also den äußeren Behälter auswählen, können wir alles darin in der Mitte platzieren. Einfach so. Jetzt ist es genau in der Mitte. Aktualisieren. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Einfach so. So erstellen Sie nun das Navigationsmenü. Ich gehe wieder rein, weil wir mit der Navbar fertig sind. Gehen wir zum Dashboard. Gehe innerhalb der Seiten. Homepage, weil wir angefangen hatten , sie mit Elementor zu bearbeiten. Es hat diese Option. Wenn Sie noch nie eine Seite mit Elementor bearbeitet haben, haben Sie diese Option nicht. Also mit Elementor bearbeiten. Und los geht's. Beachten Sie jetzt, dass dieser Teil editierbar ist, der Heldenbereich. Und der Napa ist in unserer Helden-Sektion oder auf unserer Landingpage auf der gesamten Seite sichtbar . Aber es ist nicht editierbar. Und das liegt daran, dass wir hier nicht bearbeitet haben oder dass wir hier nicht das Navigationsmenü erstellt haben. Lassen Sie mich also einfach eine Vorschau der Änderungen anzeigen. Da haben wir es. Natürlich können wir diese nach außen schieben. Lassen Sie mich das zuerst schließen. Solange wir hier sind, können wir einfach, wir können diesen inneren Behälter auswählen und ihn zu 90% machen. Genau wie die Navbar. Aktualisiere das. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Und los geht's. Wenn wir uns diese jetzt ansehen und sie mit unserer Referenz-Landingpage vergleichen , sieht das fast so aus. Identisch. Lassen Sie uns nun diesen Videoplayer hinzufügen bevor wir ihn als Wrap bezeichnen. Also gehe ich wieder rein, öffne die Elemente und suche dann nach einem Video. Video. Und das, was wir wollen, ist dieses von Elements Kit. Also ziehe es per Drag & Drop da rein. Wir wollen es genau dort fallen lassen. Und dann ziehe es ganz nach n. Aktualisiere das. eine Vorschau der Änderungen an. Und los geht's. Also weiter, dieser wird jedoch grün. Aber standardmäßig aktiviert, ändert das, was wir hinzugefügt haben, nicht einmal die Farben. Lassen Sie uns das klären, solange dies ausgewählt ist. Lass uns mit Stil gehen. Wo ist es? Tastenstil, leuchtende Farbe. Geben wir ihm zunächst diese grüne Farbe. Hintergrundtyp. Beim Schweben. Machen wir es grün. Einfach so. Aktualisieren. Sehen Sie sich eine Vorschau der Änderungen an. Wir möchten, dass dieses Symbol beim Schweben schwarz wird. Das ist die Schriftfarbe, wenn Sie den Mauszeiger bewegen. Machen wir es schwarz, auch im normalen Zustand. Machen wir es schwarz. Update, Vorschau der Änderungen. Jetzt ist es schwarz beim Schweben. Tatsächlich mögen sie das nicht. Grün und Rosa. Ich glaube nicht, dass sie sich reimen. Lassen Sie mich also einfach die Glühfarbe wieder auf pinkes Update ändern. Und der Grund, warum ich mich für die schlechte Standardfarbe Rosa entschieden habe , ist, dass sie dadurch auffällt. Fast alles andere ist weiß und grün, aber das ist pink, also fällt es wirklich auf. Und diese Glühwelle zieht auch Aufmerksamkeit des Betrachters auf sich und bringt ihn dazu, darauf zu klicken. Und wenn du darauf klickst, hat es jetzt natürlich dieses Video. Solange es noch ausgewählt ist, kannst du hier eine URL zu deinem Video hinzufügen. Wenn Sie also ein YouTube-Video haben, können Sie es hier hinzufügen. Und wenn die Leute darauf klicken, wird das Video abgespielt. Und so fügen Sie das Navigationsmenü hinzu. Im nächsten Video sehen wir uns an, wie Sie mit der Erstellung der restlichen Abschnitte beginnen . Also wir sehen uns in Kürze. 12. Körperabschnitt 1 – Teil 1: Wir sind zurück. Jetzt, wo wir mit dem Hero-Bereich und der Navigationsleiste fertig sind , ist es an der Zeit, mit dem Aufbau dieser verschiedenen Abschnitte zu beginnen , die den Hauptteil der Landingpage bilden. Also lasst uns gleich hier mit dieser Straße beginnen. Gehen wir also zurück in unseren Landing-Page-Editor, direkt unter unserem Heldenbereich, fügen wir einen Container hinzu. Einfach so. Und in diesem Container fügen wir natürlich einen Text hinzu. Ich möchte einfach so einen Texteditor hinzufügen, keine Überschrift. Lassen Sie mich, lassen Sie mich einfach diese Texte hier abrufen, natürlich werden Sie jetzt den gewünschten Text eingeben. Also kopiere das Grün wieder rein. Ich füge es da ein. Aber ich möchte es nicht mit seiner Formatierung einfügen, also mache ich das rückgängig. Und dann Control Shift V, den Text ohne ein ehemaliges Team in diesen Editor einzufügen . Ordnung, also jetzt, wo es noch ausgewählt ist, gehe ich in den Stil und ändere es auf Schwarz. Und ich ändere den Hintergrund des äußeren Containers in dieses Grün. Lassen Sie mich also diesen Button auswählen, der dem gleichen Stil entspricht. Wählen Sie dieses Grün aus. Kopiere das und gehe zurück zu diesem Container hier. Stil, Hintergrundtyp, klassische Farbe. Ich füge es hier ein. Jetzt ist es also so grün. Als Nächstes möchte ich natürlich zuerst diese Texte auswählen. Wie Sie sehen können, hat es standardmäßig eine gewisse Polsterung oder einen Rand . Gehen Sie also, während der Text ausgewählt ist, zu Erweitert. Entferne, unterbrich diesen Link. Und dieser Link auch. Ich möchte zunächst stilistisch vorgehen und es so zentralisieren. Und dann Typografie. Lassen Sie uns die Größe bis zu diesem Punkt erhöhen. Vielleicht gehen Sie fortgeschritten hinein solange es noch für die untere Polsterung ausgewählt ist, für den unteren Rand. Lass es uns einfach so reduzieren. Und ich werde dafür sorgen, dass es verteilt ist. Es sind zwar immer noch ausgewählte fortlaufende Standorte, Topographie, Buchstabenabstand, aber lassen Sie uns das so verteilen. Und mach dir keine Sorgen , dass es eingewickelt ist. Alles was wir tun müssen, ist den äußeren Container auszuwählen, den äußeren Container auszuwählen. Lassen Sie uns unter Layout die volle Breite festlegen. Einfach so. Lassen Sie uns die obere Marge erhöhen. Lassen Sie uns nun den unteren Rand weiter nach oben reduzieren , bis er irgendwo da ist. Aktualisiere das. Natürlich müssen wir in diesem Streifen einen gewissen Abstand zwischen dem Heldenbereich hinzufügen . Wenn Sie also den äußeren Container und den erweiterten Rand auswählen , entfernen Sie diesen Link, sodass wir nur eine Zelle bearbeiten können , die oberste Zelle. Geben wir mal an, vielleicht ist 15150 zu viel. Hundert. Aktualisieren Sie diese Vorschau der Änderungen. Da haben wir es. Also haben wir diesen Strip. Und natürlich können wir so viel erhöhen, wir können den Außenbehälter selbst so viel polstern, wie wir wollen. Also äußere Behälterpolsterung, lass uns das kaputt machen. Und geben wir ihm eine obere und untere Polsterung, vielleicht 20, unten, 20 oben so. Aktualisiere. In Ordnung, da ist es also. Lassen Sie mich nur eine Vorschau der Änderungen anzeigen. Da ist es. Aber jetzt werden Sie feststellen, dass dieser Hintergrund durch den Rand des Containers, in dem sich alles befindet , etwas abgeschnitten durch den Rand des Containers, in dem sich alles befindet , etwas abgeschnitten ist. Dieser hier, wie Sie sehen können, schneidet einen Teil davon ab. Wählen wir also diese Container aus. Und unter Höhe, Mindesthöhe, wählen wir die Höhe des Ansichtsfensters. Aktualisiere das. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. In Ordnung, das ändert nichts daran. Wir können also einfach 100% sagen. Lass uns das versuchen. Das ist der Versuch, es zu 100% auf dem Bildschirm zu machen. Lassen Sie uns damit einfach die Marge oben reduzieren. Aber ganz unten haben wir den Karren tatsächlich losgeworden. Lassen Sie uns vielleicht 80% der Viewporthöhe ausprobieren. Sehen Sie sich eine Vorschau der Änderungen an. Ich denke, das ist viel besser, aber wir können es viel besser machen. Versuchen wir es mit 70 Prozent. Aktualisiere das. Sehen wir uns eine Vorschau der Änderungen an. Sehen Sie sich eine Vorschau der Änderungen an. Da haben wir es. Wenn wir das jetzt auswählen, könnten wir die obere Marge tatsächlich auf vielleicht 50 reduzieren. Aktualisiere das. Es geht nur darum, mit diesen Zahlen herumzuspielen bis sie Ihrer Meinung nach gut aussehen? Ja. Also weil wir es wollen, weil ich wollte, dass es sichtbar ist, wenn du auf der Landingpage bist. Das war's also. Also im Grunde ist das, wie man diesen Strip erstellt. in der nächsten Lektion Lassen Sie uns in der nächsten Lektion fortfahren und diesen Abschnitt genau hier erstellen. Und wenn ich diese Seite aktualisiere, lass mich sie einfach aktualisieren. Sie werden diese Animationen sehen. Dieser Typ springt zusammen mit den Texten rein, wird sehen, wie das alles geht. Wir sehen uns also in der nächsten Lektion. 13. Körperabschnitt 1 – Teil 2: Wir sind zurück. Jetzt ist es an der Zeit zu sehen, wie man diesen Kerl hier zusammen mit diesem Textblock erstellt. Eine Sache, die Sie bemerken werden, ist, dass der Hintergrund nicht bewegt. Während wir scrollen, bleiben diese Wellen an einer Stelle fixiert. Wie erreichen wir dieses Ergebnis? Lass uns das zuerst machen, bevor wir anfangen, diesen Kerl zu erstellen. Wenn wir also wieder hier reingehen, werden Sie beim Scrollen feststellen, dass sich unsere Wellen mit dem Container bewegen. Wählen Sie also den Container aus, der diese Wellen als Hintergrund hat. Und was den Stil angeht, wir haben Attachment und es ist auf Standard gesetzt. Wir können es an einem Ort reparieren. Und wenn wir jetzt scrollen, ist es an dieser Stelle behoben. Aktualisiere das. Sehen wir uns eine Vorschau der Änderungen an. Wenn wir jetzt nach oben scrollen, haben wir unter diesen nicht genug Inhalt, um zu scrollen. Dies ist der letzte Inhalt, den wir hier haben. Fügen wir also einen Abschnitt hinzu. Also gehe ich hier runter und klicke auf das Pluszeichen. Und lassen Sie uns noch einmal hinzufügen, ich nur einen Container ohne Container hinzufügen möchte. Also einfach so. Und jetzt fügen wir den ersten Container hinzu, der das Bild enthalten soll. Lassen Sie mich dort einfach einen Blindtext hinzufügen. Und jetzt fügen wir noch einen Container hinzu. Also ziehe ich es per Drag & Drop aus dem Container, den wir gerade erstellt haben. Jetzt haben wir also zwei Container, aber ich möchte, dass dieser Container, der den Text enthält, hinter dem Bildcontainer steht. Lassen Sie mich diesen Bildcontainer einfach so vor den Textcontainer ziehen diesen Bildcontainer einfach so vor . Jetzt, wo wir diese Stapel haben, gehen wir zu dem Container , der sie enthält. Dieser äußere Behälter. Und lass uns die Richtung von links nach rechts ändern , so. Also fügen wir hier ein Bildelement hinzu. Nun, das ist aktiv. Ich hatte dieses Bild mit diesem Typen hochgeladen, also wähle ich es einfach aus. Da haben wir es. Und hier wollen wir sagen, werde schneller stärker. Also schnappe ich mir das einfach und wähle das unter dem Titel des Inhalts aus. Füge es da ein. Und beachten Sie, dass, wenn wir Überschriften hinzufügen, diese schwarz in Montserrat sind, das ist sehr stark und fett, und das ist, was wir als unsere globale Schriftart für die Überschriften festgelegt haben . Also solange es noch ausgewählt ist, sagen wir Stil, Schriftfarbe, Weiß, etwas größer. Das ist ein Texteditor, Dummy-Text, also sage ich einfach, füge einen Texteditor hinzu, standardmäßig Lorem Ipsum. Solange es noch aktiv ist, gehen wir zum Stil der Textfarbe über. Ändere es auf Weiß. Einfach so. Und wir haben diese Listen genau hier. Gehen Sie also zurück, wählen Sie die Elementliste aus und es ist eine Symbolliste. Also ziehe ich die Icon-Liste darunter. Und wenn ich auf das erste Element klicke, kann ich es nach Belieben ändern. Was ist das? Schweres Heben. Also schweres Heben, Ausdauertraining , Bodybuilding, Bodybuilding-Techniken. Und Sie können die Änderungen auch hier statt hier vornehmen. Der geleaste Artikel Nummer drei, aufgeführt zwei Nummer drei, kann also einfach diesen Text auswählen. Ausdauertraining. Und natürlich werden Sie jetzt feststellen, dass wir die Symbole hier ändern können. Also, wenn ich das auswähle, geben wir check ein. Weil ich das Kästchen ankreuzen wollte, ist das okay. Einfügen, Kontrollkästchen, reduzieren Sie das, erweitern Sie das, gehen Sie in das Symbol. Prüfen. Einfügen. Und schließlich schweres Heben. Prüfen. Du kannst damit anfangen. Und da haben wir es. Jetzt lass uns gehen und es tun. Und Sie können hier, wie Sie können, weitere Artikel hinzufügen, wenn Sie möchten. Also hier unten haben wir einen Artikel hinzugefügt, vielleicht Yogastunden. Es heißt auch Scheck. Einfügen und jetzt haben wir Yogastunden. Das Ändern der Farben würde nun in das Style-Icon gehen. Lass es uns auf dieses Grün ändern. Ich denke, sie sind weiß oder grün. Also diese auswählen, diese Container auswählen, innerhalb des Stils gehen, Farbe auswählen, kopieren. Wählen Sie den Listenstil aus. Ikone. Farbe. Beim Schweben. Die Farbe sollte weiß sein. Einfach so. Lassen Sie uns jetzt auch etwas mit den Texten machen. Im normalen Zustand. Wir wollen, dass es weiß ist. Und beim Schweben wollen wir, dass es grün ist. Einfach so. Aktualisieren. Und jetzt genau wie in der Helden-Sektion, wollen wir natürlich, genau wie in der Helden-Sektion, alles vertikal ausbalancieren, sodass wir hier unten den gleichen Abstand haben wie hier oben. Diese Texte scheinen ganz oben zu stehen und wir wollen sie irgendwo in der Mitte hier haben. Also wählen wir den Container aus, der diese beiden Container enthält. Gehe zu Objekten, richte sie aus und richte sie einfach so vertikal in der Mitte aus. Und jetzt werden Sie natürlich feststellen, dass dieses Bild größer ist und sich fast am Rand befindet. Und das bedeutet, dass der Container selbst die volle Breite hat. Lassen Sie uns diesen Container also einfach so in voller Breite für die Breite auswählen. Und jetzt fügen wir seinen Hintergrund hinzu. Also rein, klassisch, ich glaube, ich hatte diese Hintergründe schon hochgeladen. Es ist dieser Hintergrund hier. Neonhintergrund links. Ich hatte es bereits hochgeladen. Bringen Sie also die Insight-Mediathek mit. Hier ist es. Wählen Sie aus. Und jetzt geht es los. Aktualisieren Sie, sehen Sie sich die Änderungen in der Vorschau an. Scrollen Sie nach unten. Da haben wir es. Und beachte, dass sich das Muster wiederholt und das wollen wir nicht. Das passiert standardmäßig. Also wiederholen Sie die Standardeinstellungen, nein. Keine Wiederholung. Aktualisiere das. Sehen Sie sich eine Vorschau der Änderungen an. Scrollen Sie nach unten. Und jetzt wiederholt es sich nicht. Da haben wir es. Warte, und mir ist gerade aufgefallen, dass wir den Video-Editor irgendwie verloren haben. Ich weiß nicht, was damit passiert ist. Es ist also natürlich sehr einfach, es noch einmal hinzuzufügen. Also gib mir einfach einen Moment. Video. Er ist Kinder. Genau da. Ich werde nicht einmal daran arbeiten, weil du bereits weißt, was zu tun ist. Lassen Sie mich das einfach aktualisieren. Lassen Sie uns dann eine Vorschau der Änderungen anzeigen. Da haben wir es. Also nach unten scrollen. Jetzt ist dieser Container zu nah am Stream. Wir wollen, dass sie getrennt werden. Wählen wir also den Container selbst aus. Fortgeschritten. Unterbrich diese Verbindung. Geben wir ihm 150. Oberer Rand. Das verteilt es also komplett. Und ich habe das Gefühl, dass hier oben zu viel Platz ist. Ich denke, wir müssen diese Elemente ein wenig nach oben verschieben . Wählen Sie also diesen Container aus, der alles enthält, was fortgeschritten ist, Rand, oben Lassen Sie uns diesen Abstand so reduzieren, vielleicht minus 85, je nach Ihren Präferenzen. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Da haben wir es. Ich denke, das ist jetzt sehr gut positioniert. Also nach unten scrollen. Lassen Sie uns nun diesen Hintergrund korrigieren, bevor wir ihn als Wrap bezeichnen. Die Auswahl dieses Anhangs im Containerstil wurde also behoben. Einfach so, Update. Sehen Sie sich eine Vorschau der Änderungen an. Scrollen Sie nach unten. Da haben wir es. ist es natürlich sehr einfach hinzuzufügen. Wir haben vergessen, den Button hinzuzufügen. Und die Schaltfläche hat ein Symbol, also haben wir vergessen, dieses Symbol hinzuzufügen. Wenn wir also diese Schaltfläche unter dem Inhaltssymbol auswählen, können wir aus der Symbolbibliothek auswählen. Ich will diesen Pfeil einfügen. Und wir können es hinterherlegen. Also kann ich mich danach positionieren, einfach so. Und sie sagen, komm heute zu uns, sieh dir den Unterricht an. Während dies und der Inhaltstext des Textes ausgewählt sind, schließen Sie sich uns noch heute an. Und das sollte Kurse oder Klassen heißen. Lass uns das machen. Jetzt. Lass uns das duplizieren. Also dupliziere ich einfach das Ziehen der Schaltfläche. Jetzt lasse ich es genau dort fallen. Und natürlich werden Sie feststellen, dass wir hier oben zu viel Abstand haben . Also wähle ich diesen Text mit erweitertem Rand unten aus. Reduzieren wir es bis zu diesem Punkt und wählen Sie dann Liste, Liste, Erweitert, unterbrechen Sie den unteren Rand aus. Erhöhen wir das, um die Schaltfläche voneinander zu trennen. Aktualisiere das. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Da haben wir es. Dieser Abschnitt ist jetzt also abgeschlossen. Wie Sie sehen, bleiben die Prinzipien dieselben. Dieselben Dinge, die wir im Heldenbereich gemacht haben, oder dieselben Tipps und Tricks, die wir für die Erstellung dieser anderen Abschnitte verwenden. Lassen Sie uns jetzt natürlich weitermachen und nächsten Abschnitt hier erstellen Wir werden dieselben Prinzipien verwenden, aber das Bild wird auf dieser anderen Seite sein. Lass uns das in der nächsten Lektion machen. Wir sehen uns in Kürze. 14. Körperabschnitt 2 und 3: In Ordnung, also lasst uns wieder zur Sache kommen. Jetzt sind wir gerade mit der Erstellung dieses Teils fertig. Lassen Sie uns diesen Abschnitt hier erstellen. Also zurück zu unserem Redakteur. Lassen Sie uns also weitermachen und einen solchen Doppelcontainer hinzufügen. Und hier können wir tatsächlich einfach ziehen, wir können diesen Container hier einfach so duplizieren. Dann ziehe es hier an die Seite des anderen Containers da rein. Lass uns das loswerden. Und das können wir auch duplizieren. Und einfach so eine gemischte Tasche ziehen. Also lasst uns das loswerden. So macht Elemental es dir einfach. Sie können Elemente einfach duplizieren und wiederverwenden. Also die Auswahl des äußeren Containers ist jetzt natürlich fortgeschritten. Fügen wir aus Gründen der Einheitlichkeit einen oberen Rand von 150 hinzu. Und solange dies noch ausgewählt ist, schauen wir uns das Layout an und richten alles vertikal in der Mitte aus. Wählen Sie dieses Bild hier aus, damit wir es ersetzen können. Ich werde diese Dame gleich hier hochladen. Offen. Da haben wir es. Da ist also unser Mädchen. Hat sie einen Hintergrund? Natürlich tut sie das, aber das ist ein einfacherer Hintergrund. Gehen wir also hier rein und wählen Hintergrund im äußeren Containerstil, klassisch, und wählen wir die Upload-Dateien im Hintergrund aus. Das sind die BG-Elemente. Das ist der Hintergrund, den wir für diesen Abschnitt erstellt haben. Los geht's, wir wählen aus und jetzt haben wir diesen schönen Hintergrund da drüben. Natürlich können wir die Polsterung, den Abstand zwischen dem Rand hier und dem Inhalt oben und unten, erhöhen den Abstand zwischen dem Rand hier und . Wählen Sie also den äußeren Behälter aus. Gehen wir zur Polsterung, machen wir das kaputt. Machen wir oben 50 und unten 50. Jetzt haben wir also diesen schönen Abstand da drüben. Solange es noch ausgewählt ist. Gehe zurück ins Layout. Gehen wir nun in den Style-Anhang, behoben. Während wir jetzt scrollen, sieht es dort aus wie ein einziges Hintergrund-Update. Sehen wir uns eine Vorschau der Änderungen an. Da haben wir es. Also lasst uns anfangen zu scrollen. Einfach so. Und da haben wir es. Aber lassen Sie mich diese Texte natürlich leicht ändern und die Textgröße ist größer als die, die wir auf unseren haben. Wählen Sie das aus, gehen Sie in den Inhalt, fügen Sie das dort ein, ein Mann Lassen Sie uns den Text vergrößern, indem wir ihn stilistisch anpassen. Typografie. Ich denke, das ist die perfekte Größe für den perfekten Körper. Sie dann, solange dies noch ausgewählt ist, mit der rechten Maustaste auf Kopieren und wählen Sie diesen Rechtsklick-Einfügestil aus. Es hat also die gleiche Größe wie dieses. Wenn es vielleicht eine andere Farbe wäre, wäre dies auch diese Farbe. In Ordnung, also lass uns das aktualisieren. Und natürlich hätten wir diese jetzt in der nächsten Lektion erstellt. Aber anstatt bis zur nächsten Lektion zu warten, werden wir das einfach duplizieren. Lassen Sie uns den Container dort duplizieren, so. Jetzt müssen wir das unter den Container ziehen. Jetzt ist es da und es ist immer noch die Kopie ist da. Wählen Sie dieses Bild aus. Wir brauchen diese Handschuhe. Also werde ich hierher gehen. Ausgewählte Handschuhe. Wählen Sie aus. Da haben wir es. Weltklasse-Boxen. Kopiere das. Wählen Sie das aus. Dann hier beim Titel, Weltklasse-Boxen. Natürlich können Sie all diese Inhalte nach eigenem Ermessen ändern . Passen Sie es an Ihre spezifischen Bedürfnisse an. Wir schauen uns nur an, wie wir jedes einzelne Element auf der Landingpage anordnen können. Ordnung, jetzt haben wir diese Dienste, und daran werden wir in der nächsten Lektion arbeiten . zunächst Lassen Sie mich zunächst dieses Update sagen. Mal sehen, was wir im Ja haben, der Hintergrund hier ist immer noch derselbe wie der Hintergrund dazu. Einfach so. Sehen wir uns also eine Vorschau der Änderungen an. Scrollen Sie nach unten. Und da haben wir es. in der nächsten Lektion an, Sehen wir uns in der nächsten Lektion an, wie diese erstellt werden. Lassen Sie uns sehen, wie Sie diese Funktionen oder Dienste erstellen , bevor wir zu den Testimonials kommen. Also wir sehen uns in Kürze. 15. Services-Abschnitt: Hey, willkommen zurück. Jetzt ist es an der Zeit, diesen Bereich für Dienste oder Funktionen zu erstellen . Und dieser Teil ist etwas komplexer als die vorherigen Teile weil er Behälter in Containern, innerhalb von Containern beinhaltet . Also schauen wir uns an, wie das geht. Gehen wir also wieder rein erstellen wir zunächst den Container, der alles enthält. Es gibt also einen Behälter, der all diese Gegenstände enthält. Lassen Sie uns das also zunächst erstellen. Und ich möchte einfach mit einem leeren Behälter wie diesem beginnen . Gehen wir für Fortgeschrittene rein. Unterbrich diese Verbindung. Oberer Spielraum von 150, einfach so. Und lassen Sie uns das aktualisieren. Und während es aktualisiert wird, lassen Sie mich einfach weitermachen und diese Überschrift duplizieren , da wir dort eine Überschrift benötigen. Und auch diese kurze Beschreibung die unter der Überschrift steht. Und solange das noch ausgewählt ist, gehe ich in den Stil ein und richte es an der Mitte aus. Wenn dies deaktiviert ist, gehen Sie in das Content Alignment Center. Lassen Sie mich das zunächst in unseren Funktionen ändern, solange dies der gewählte Titel ist. Das wird so bleiben. Aktualisiere. Also zurück hier, das hier ist ein Container und das sind zwei Elemente. Und sie sind in dem äußeren Behälter angeordnet , der sie alle enthält. Und sie sind von oben nach unten angeordnet. Lassen Sie mich das kurz veranschaulichen. Lassen Sie mich nur leicht herauszoomen, damit wir alles bis dahin sehen können . Lassen Sie mich jetzt das Snipping Tool auswählen. Also jetzt, los geht's. Gehen wir also davon aus, dass dies ein Container ist. All dies ist ein Container. Und in diesem Container haben wir dieses Element. Und dieses Element. Und das hier ist auch ein Container. Das sind also drei Elemente, die von oben nach unten angeordnet sind . Also, wenn wir wieder hier rein gehen, sind sie arrangiert. Lassen Sie mich diesen äußeren Behälter auswählen. Dieser äußere Behälter ist dieser äußere Behälter, der schwarze Behälter hier. Und es hat drei Elemente, die Überschrift, die Beschreibung und einen Container darin. Und es ist von oben nach unten angeordnet, einfach so. In Ordnung? Das bedeutet, dass wir einen Container direkt unter diesen beiden Elementen haben müssen . Also fügen wir hier einen Container hinzu. Dieser Behälter ist also der, der diese anderen Behälter aufnehmen wird . In Ordnung? Wenn wir uns nun diese Überschrift und diese Beschreibung ansehen, sind dies zwei Elemente, die in einem Container von oben nach unten angeordnet sind, genau wie hier. Also eine Überschrift und ihre Beschreibung in einem Container von oben nach unten angeordnet ist. Und dann befindet sich dieser Container in diesem Bild einem anderen Container der von links nach rechts angeordnet ist. Und das hier ist eine Spalte, enthält das hier ist ein Container, das ist eine Spalte mit drei Containern wie diesem, von oben nach unten angeordnet sind. In Ordnung, das versuchen wir jetzt zu erreichen. Ich hoffe, du hast das verstanden. Ich hoffe, Sie haben diese Zeichnungen verstanden, obwohl sie wie Kritzeleien aussehen, zumindest haben Sie sie verfolgt und verstanden, wie die Behälter zueinander stehen. Also arbeiten wir jetzt daran. Beginnen wir nun damit, diesen Container hier zu erstellen, CrossFit und seine Beschreibung. Also lass uns hier reingehen und das duplizieren. Und dann duplizieren Sie das. Also lasst uns das jetzt zeichnen. In den Container und dieser direkt darunter. Sie befinden sich also beide in einem Behälter. Das ist dieser Behälter, der hier von oben nach unten angeordnet ist. Wenn wir also diesen Container auswählen, wird er einfach so von oben nach unten angeordnet. Lassen Sie uns nun diesen äußeren Container erstellen, der das Bild in diesem Container enthält. Das heißt, wir fügen einen Container hinzu. Fügen wir dort einen Container hinzu. In diesem Behälter. Lass uns die anderen Container fallen lassen. Einfach so. In diesem äußeren Behälter. Dieser äußere Behälter. Lass uns das Bild fallen lassen. Lassen Sie mich dort ein Bild hinzufügen. Jetzt haben wir diesen Container, der sich mit dem Text und seiner Beschreibung darin befindet. Und das zweite Element ist das Bild. Jetzt ist es an der Zeit, diesen Container auszuwählen. Und es muss einfach so von links nach rechts gehen . Jetzt haben wir diesen Container hier. Als Nächstes wollen wir diesen Container erstellen , der enthält, das ist wie eine Zeile mit drei Diensten, 123. Ziehen wir nun einen weiteren Container hierher, direkt unter den Text. Und ziehen wir diesen Container da rein. Jetzt. Das ist ein Service da drin. Lassen Sie uns den Service duplizieren. Lass es uns noch einmal duplizieren. Da haben wir es. Jetzt haben wir diese Spalte gerade erstellt. Aber denken Sie jetzt daran, dass wir auch zwei Spalten haben. Diese beiden Spalten befinden sich also in einem anderen Container. Und sie sind von links nach rechts angeordnet. Wir brauchen also einen weiteren Container und duplizieren diese Spalte. Also fügen wir jetzt einen weiteren Container hinzu. Und ziehen wir diesen Container da rein. Da haben wir es also. In diesem Container finden jetzt also drei Dienste statt. Es ist in diesem Container. Also lass es uns jetzt duplizieren. Aber natürlich ist dieser Container, der jetzt die beiden Spalten enthält, standardmäßig ist dieser Container, der jetzt die beiden Spalten enthält von oben nach unten angeordnet. Und wenn wir scrollen, haben wir die Spalte da oben mit drei Diensten. Und dann diese zweite duplizierte Spalte. Also, was wir tun wollen, ist diese oder diese Spalte auszuwählen. Ich verwende das Wort Spalte, weil das der vorherige Workflow in Element war . Wählen Sie hier also diesen äußeren Container aus, der diese beiden Spalten hat. Wählen Sie es aus. Lass es uns von links nach rechts ändern. Jetzt haben wir zwei Spalten. Das ist das. Jetzt, wo wir das haben, was brauchen wir noch? Ich denke, wir haben alles im Griff. Jetzt müssen nur noch die Inhalte erstellt werden, die hier benötigt werden. Dieses Bild auswählen. Was brauchen wir, dieses Mädchen? Gehen wir also rein und laden Dateien hoch. Dieses Mädchen. Offen. In Ordnung, also wähle das aus. Also haben wir dieses Bild. Lassen Sie uns zunächst die Größe der Überschrift reduzieren. Ich muss es drastisch reduzieren , bis es irgendwo da ist. Und wir wollen, dass es linksbündig ist. Also Inhalt linksbündig, so. Dann möchte ich diese Texte auswählen und meiste davon entfernen , weil das nur eine kurze Beschreibung ist. Und solange es noch ausgewählt ist, richten Sie es nach links aus. Jetzt wähle ich dieses Exemplar aus. Wählen Sie es aus. Rechtsklick, kopieren. Wählen Sie diesen Rechtsklick-Einfügestil aus. Wählen Sie diesen Rechtsklick-Einfügestil aus. Wählen Sie aus. Stil einfügen. Wählen Sie mit der rechten Maustaste Einfügen aus. Wählen Sie, klicken Sie mit der rechten Maustaste auf Stil einfügen. Wählen Sie das aus. Linksbündig ausrichten, wie in diesem Stil, Linie links. Natürlich wird dies jetzt durch Ihren spezifischen Inhalt ersetzt . Ich wollte das noch einmal reduzieren . Benutze das, benutze das, benutze das so. Aktualisiere. Und jetzt sind die Überschriften grün, und tatsächlich sind sie nicht einmal irgendwelche Fakten, die so fett sind. Also würde ich nicht auch gehen. 700. Ja, ich denke , das ist richtig. Kühnheit, Texte, Farbe. Geben wir ihm dieses Grün. Wählen Sie also diese Schaltfläche aus. Stil. Kopiere das. Geh hier rein. Unter der Überschrift Style. Ich hätte alles tun sollen, was ich brauchte, und es dann einfügen sollen. Klicken Sie also mit der rechten Maustaste auf Kopieren, Einfügen. Ich mache das für jede andere Überschrift hier. Füge den Stil so ein. Lassen Sie mich dieses Bild auswählen, das Cardio basiert. Und während das ausgewählt ist, gehe ich hier rein. Wählen Sie das Cardio-Bild aus. Wählen Sie aus. Fahren Sie fort und wählen Sie dies aus. Das ist CrossFit. Wählen Sie das CrossFit, Ausdauer, Gewichtsverlust. Und endlich Stärke. Also leg das da hin. Und lassen Sie mich einfach schnell diese Bilder. Elementary passt sie also automatisch an, damit Sie dieselbe Größe haben. Obwohl die Bilder in Wirklichkeit nicht die gleichen Abmessungen haben. Und zum Schluss fügen wir das Bild zur Gewichtsabnahme hinzu. Da haben wir's, also das meine ich. Wenn wir das also auswählen, hat Elemental, wie Sie sehen können, die Größe geändert. Wählen wir nun dieses Bild aus, gehen wir in den Stil und den Randradius ein. Geben wir 20, um abgerundete Ecken zu erhalten . Gib ihm abgerundete Ecken. Lassen Sie uns dasselbe für den Rest wiederholen. 20 hier drin, Stil, Stil. Es ist ein Laufstil. Ronnie. Endlich Stiltraining. Also aktualisiere das. Und denken Sie jetzt daran, was wäre mit der Ausrichtung von Texten, die innerhalb eines Containers nach oben hin zu liegen scheinen . Oder wir müssen den Container selbst auswählen, diesen Container, und alles einfach so mittig ausrichten . Lassen Sie uns das also für alle Dienste wiederholen. In der Mitte. Wählen Sie dieses Zentrum aus, wählen Sie dieses Zentrum aus. Wählen Sie dieses Zentrum und schließlich dieses Zentrum aus. Aktualisiere. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Also nach unten scrollen. Da haben wir es. Unsere Dienste sind jetzt abgeschlossen. Wenn Sie möchten, können Sie diese Container in voller Breite erstellen. Wählen Sie also den Container selbst aus. Lass uns sehen. Ja, wählen Sie diesen Container für die Breite aus. Aktualisiere. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Der Behälter , in dem sie aufbewahrt werden, sollte also auch nicht verpackt werden. Also wählen wir das aus. Wie Sie sehen können, ist es immer noch verpackt, also in voller Breite, aber lassen Sie uns vielleicht 70 Prozent draus machen. Sagen wir jetzt 80, 80% Und wählen wir den Container , der diese Container enthält. Das ist der äußere Behälter. Und richte alles einfach so in der Mitte aus. Aktualisiere. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. also nach unten scrollen, ist es ein bisschen mehr verteilt. Und so erstellen Sie diesen Feature-Bereich. In der nächsten Lektion, kurz bevor wir den Ordner erstellen, erstellen wir die Testimonials. Also wir sehen uns in Kürze. 16. Erfahrungsberichte: Willkommen zurück. Jetzt ist es an der Zeit, den Testimonial-Bereich zu erstellen, bevor wir mit der Erstellung der Fußzeile fortfahren. Also, ohne noch mehr Zeit zu verschwenden, lassen Sie uns gleich loslegen. Gehen wir also zurück zu Elementor, direkt unter unserem Servicebereich Klicken wir auf dieses Pluszeichen und wir möchten nur einen einfachen leeren oder leeren Container. Und dann fügen wir hier ein Testimonial hinzu. Jetzt haben wir das Standard-Testimonial-Element von Elementor und wir haben ein Element, Kit-Elemente. Also lasst uns die Elemente verwenden, eins behalten, weil es sehr, viel besser ist. Und wie immer geben wir oben einen Spielraum. Wählen Sie also den äußeren Container aus, Advanced, bewerten Sie diesen Link. Ein Fünftel. Netter Abstand da oben. Als Nächstes möchten wir das Testimonial selbst auswählen , das Testimonial-Element. Obwohl es ausgewählt ist, haben wir hier verschiedene Formate. Der, den ich mag, ist dies oder das. Also lass uns mit diesem weitermachen. Und los geht's. Gehen wir in die Einstellungen. Und wir können zwei Folien gleichzeitig zeigen. Lassen Sie mich also einfach zwei sagen. Jetzt müssen wir, kurz bevor wir etwas anderes tun, machen wir, lass uns stilistisch reingehen. Und für den Grenzradius geben wir 20 an. Einfach so. Also lasst uns weitermachen und die Hintergrundfarbe ändern. Unter Layout. Unter Layout haben wir den Hintergrundtyp Classic. Geben wir ihm vielleicht ein dunkles Grau, damit wir es vom schwarzen Hintergrund trennen. Einfach so. Klicken Sie hier auf eine beliebige Stelle , um das zu entfernen. Und dann lassen Sie uns das für eine Sekunde zusammenklappen, weil wir die Beschreibung ändern wollen . Bevor wir die Beschreibung ändern, gehen wir zum Inhalts-Testimonial. Testimonial eins. Ich möchte mir nur diese Testimonials hier holen. Das ist also Emily Chan. Okay, das kann ich mir nicht schnappen. Kann ich? Das kann ich nicht schleppen. Also muss ich einfach einige dieser Texte verwenden. Nehmen wir an, das ist Julia Roberts Bezeichnung, vielleicht Marketer. Lassen Sie uns nun das Testimonial dort einfügen. Ich dupliziere es noch einmal. Und jetzt haben wir dort eine beträchtliche Menge an Texten. Also zurück ins Innere gehen, Stil einklappen, die Beschreibung einklappen, Farbe zu Weiß ändern. Nun, da unser Testimonial zusammengebrochen ist, gehen wir zur Bewertung über. Du kannst es auf dieses Grün ändern. Lassen Sie mich also diesen Stil auswählen. Kopiere das. Wählen Sie die Testimonial-Elemente aus, reduzieren Sie das Layout, gehen Sie zu Bewertung, färben Sie es, ändern Sie es auf Grün, und jetzt haben wir eine schöne konsistente grüne, reduzierte Bewertung. Gehen wir zum Kunden. Zuallererst die Namensfarbe des Kunden. Wir können es genauso machen. Grün. Erweitern Sie die Anzahl der Kunden erneut. Gehen Sie also zu einem diskreten Kundenbezeichnungsvermarkter. Die Farbe sollte also weiß sein. So. Was sonst? Was ist hier unten? Kundenimage, wir müssen das Kundenimage nicht in Rechnung stellen. Ich finde, es sieht okay aus. Oder wir müssen es hinzufügen. Lassen Sie mich jetzt einfach den Kunden zusammenklappen. Gehen Sie in das Anführungszeichen und das Zitatsymbol. Sie können es auch so grün machen. Und dann vielleicht die Opazität danach irgendwo da reduzieren die Opazität danach irgendwo , damit es nicht schreit. Beim Schweben. Wir können es einfach weiß machen oder die Opazität reduzieren. Noch einmal, einfach so. Vielleicht so. Das können wir aktiv kopieren. Lass es auch dieselbe Farbe haben. Diese Aktivitäten sind hier zwar irrelevant, da Sie sie nicht anklicken und aktivieren können. Also weiter, es ist nur diese Farbe. Gehen wir zurück zu den Inhaltseinstellungen. Und jetzt können wir auch Loop aktivieren. bedeutet, dass es nicht von links nach rechts geht, sondern von links nach rechts. Es geht nur in einer Schleife in eine Richtung. Punkte anzeigen. Wir können die Punkte anzeigen, damit jemand weiß, welches Testimonial Sie gerade ansehen. Ja. Lass das einfach so. Dann lass uns reingehen. Testimonial. Testimonial eins, Julia Roberts, Kunden, Avatar. Lass uns gehen und Dateien hochladen. Das sind die drei Kunden. Ich lade die drei hoch. Wählen Sie aus. Das ist also Julia. Da haben wir es. Lassen Sie mich das zusammenfassen. Zweiter. Vielleicht Team Hooks. Vielleicht. Jim Mast. Lassen Sie uns einen Textblock kopieren. Kopiere das. Lass es uns da einfügen. Und dann ist er ein Bild. Das ist er. Lass mich das Team zusammenbrechen. Lass uns expandieren. Vielleicht. Spitzname. Ihre Flügel. Die Flügel rufen, Bezeichnung. Musiker, der Gesundheit und Fitness mag. Lassen Sie uns auch einige der Texte dort einfügen. Natürlich wählen wir ihr Bild aus. Lass uns das aktualisieren. Jetzt haben wir also drei Testimonials und mir ist gerade aufgefallen, dass wir vergessen haben, die Überschrift und ihre Beschreibung zu überspringen. Testimonials sind noch unentschlossen, das hatten unsere Kunden zu sagen. Wir können das also einfach duplizieren und nach unten ziehen. Wirf es da oben rein. Dieser Behälter. Geh hierher, um das zu duplizieren. Ziehen. Wirf es da rein. Also aktualisiere das. Und lassen Sie uns eine Vorschau der Änderungen anzeigen, während sie aktualisiert werden. Ändern wir das, um zwei Monome zu testen. Aktualisieren. Noch einmal. Sehen wir uns eine Vorschau an. Scrollen Sie nach unten. Da haben wir es. Unser Testimonial sieht jetzt also großartig aus. Wir sind fast fertig mit der Landingpage und die Ergebnisse haben mir bisher gefallen. Aber das Wichtigste ist nicht, die perfekte Website oder Landingpage zu die perfekte Website oder Landingpage zu haben. In diesem Moment müssen Sie den Arbeitsablauf erlernen. Ich bin mir ziemlich sicher, dass Sie es viel besser machen und mit der Zeit eine viel bessere Landingpage erstellen können. Nehmen Sie sich also Zeit und verbessern Sie diese Fähigkeiten. Und das ist nur die Spitze des Eisbergs. Es gibt noch viel mehr Dinge, viele weitere Tipps und Tricks , die Sie lernen können. Ordnung, so erstellen Sie nun den Abschnitt mit den Testimonials. In der nächsten Lektion. Lassen Sie uns fortfahren und den Ordner erstellen. Lesen Sie, bevor wir die Website oder Landingpage auf verschiedenen Gerätebildschirmen responsiv gestalten die Website oder Landingpage . Also wir sehen uns in Kürze. 17. Der Fußzeilenbereich: Willkommen zurück. Jetzt ist es an der Zeit, die Fußzeile zu erstellen. Also, ohne weitere Zeit zu verschwenden, springen wir gleich hier auf unsere Landingpage. Und natürlich werden wir den Ordner nicht genau wie die Napa- oder die Navigationssektion hier erstellen. Hier erstellen wir den Hauptteil der Seite für die Fußzeile und die Kopfzeile, wir erstellen sie separat. Jetzt muss ich nur noch von hier aus beenden und zum Dashboard weitergeleitet werden. Und wir können in das Elements-Kit, die Kopf- und Fußzeile gehen. Und wir können Add New sagen. Nennen wir es also Ordner, wählen Sie hier die Fußzeile aus. Das ist das Etikett, das wir auf der gesamten Seite haben wollten. Und wir wollen, dass es aktiv ist. Also sag Änderungen. Da haben wir es. Da es also nicht mit Elementor bearbeitet wurde, gibt es diese Optionen nicht. Klicken Sie auf Bearbeiten. Der bearbeitete Inhalt wird zum Frontend umgeleitet , wo wir ihn jetzt visuell erstellen können. Lass uns das machen. In Ordnung, beginnen wir jetzt mit einem leeren Behälter. Da haben wir es. Und jetzt wollen wir damit beginnen. Wir wollen hier mit diesem Container beginnen. Es gibt die lokale und die kurze Beschreibung und alles ist von oben nach unten angeordnet. Wir haben uns jetzt schon an diese Container gewöhnt. Ich hoffe. Also. Ziehen wir einen Container hinein. Und lassen Sie uns ein Bildelement und einen Texteditor direkt unter dem Bild hinzufügen . Einfach so. Es ist nur ein Container mit zwei Elementen. Wählen Sie die Bildelemente und lassen Sie uns das Logo auswählen. Einfach so. Wählen Sie die Beschreibung aus. Ich möchte das kopieren. Kopiere das. Und ich wähle das ganze Steuerelement Shift V , um es ohne Formatierung einzufügen. Und solange es noch ausgewählt ist, werde ich mich stilvoll umsehen. Die Farbe muss weiß sein. Aktualisiere das. Da haben wir es. Als Nächstes wollen wir diesen Teil erstellen. Und jetzt, genau wie wir es mit dem Snipping-Tool hier getan haben, möchte ich Ihnen zeigen, wie wir das angehen werden. Also noch einmal, das ist ein Container, der ein Bild hat. Und diese Texte. Dann haben wir hier einen Container, der zwei Elemente für Symbollisten enthält. Und sie sind von links nach rechts angeordnet. Und dann ist das hier ein Überschriftenelement. Zusammen mit diesem Container hier. Sie befinden sich in einem Behälter und sind von oben nach unten angeordnet. Also haben wir den Text und dann den Container genau hier. Ignoriere das. Genau hier haben wir dieses Symbol, diese sozialen Symbole. Und wir haben dieses Anmeldeformular. Dies sind zwei Elemente in diesem Behälter, die von oben nach unten angeordnet sind. Und dann sind sie alle von links nach rechts in einem Container angeordnet . Wir haben also bereits diesen Container erstellt , der diese beiden enthält. Und das ist dieser Container hier. Wir wollen also diesen äußeren Container erstellen , bevor wir die anderen beiden erstellen. Fügen wir also einen Container hinzu. Sie gehen hier rein. Ziehen Sie einen Container außerhalb dieses inneren Containers und ziehen Sie ihn nach oben . Nein, ich esse nicht draußen. In Ordnung. Lass es mich vorerst dort ablegen. In Ordnung, also, ja, es ist also außerhalb dieses Containers. Jetzt wollen wir diesen Container hineinziehen. Und lassen Sie es uns duplizieren. Eins. Zwei. Jetzt, wo wir drei Spalten haben, sind diese wie diese drei Spalten. Suchen wir uns den Behälter aus , der sie alle enthält. Und für die Richtung ändern wir sie auf drei Spalten. Was wir jetzt brauchen, ist, daran zu denken, dass das auch ein Container war. Also ziehen wir einen Container hierher. Lass es uns da reinwerfen. Wirf das weg. Lassen Sie mich ein Symbolfeld und eine Symbolliste hinzufügen . Und weil es ein Container ist, gestapelt, wenn ich ihn dupliziere. Aber wenn ich den Container auswähle, können wir zu den Anweisungen gehen und sie in zwei Spalten ändern , genau wie hier. Jetzt brauchen wir diesen Text. Dieser Text wird hierher kommen , weil Sie eine Überschrift auswählen. Lass es über diesen Behälter fallen. Lass uns dieses Bild loswerden. Aktualisiere das. Dann lassen Sie uns das hier loswerden. Und lass uns das loswerden. Plus-Zeichen. Sagen wir soziale Ikonen. Ich nehme die Elemente, soziale Symbole für Kinder. Und so sehen sie standardmäßig aus, man kann sie nicht sehen, weil der Hintergrund schwarz ist. Aber obwohl dies immer noch standardmäßig ausgewählt ist , haben wir Facebook, Twitter, LinkedIn, und Sie können so viele hinzufügen, wie Sie möchten, wenn Sie Pinterest, Instagram und all das möchten . also zunächst , noch bevor wir weitermachen Facebook öffnen, noch bevor wir weitermachen. Und lass uns zur Farbe gehen. Standardmäßig ist es so grau, aber wir möchten, dass es grün ist. Habe ich das Grün immer noch? Nein, tue ich nicht. Also lass es mich einfach von der anderen Seite holen. Kopiere das hier rein. Lass es uns einfügen. Und jetzt ist es grün. Und tatsächlich wollte ich, dass der Hintergrund grün ist, nicht das Symbol. Also füge es dort ein und sie sollten schwarz sein, einfach so. Wenn Sie den Mauszeiger bewegen, möchten wir, dass es sich um einen weißen Hintergrund handelt. Einfach so. Lassen Sie uns dasselbe für Twitter wiederholen. Farbe. Das ist die Schriftfarbe, Schwarz, Hintergrundfarbe. Füge es grün ein. Und wenn Sie den Mauszeiger bewegen, möchten wir, dass der Hintergrund weiß ist. Lassen Sie uns dasselbe für LinkedIn tun. Schriftfarbe, schwarz, Hintergrundfarbe grün. Beim Schweben. Wir wollen, dass es weiß ist. In Ordnung. Da haben wir es. Wir können sie auch alle nach rechts, links oder in der Mitte ausrichten . So. Wenn wir stilistisch vorgehen, können wir auch die Symbolgröße reduzieren oder erhöhen. Aktualisiere das. Ich wollte diesen Text auswählen. Und was steht da? Schnelle Links. Also kopiere ich das. Solange dies ausgewählt ist. Geh rein. Schnelle Links. Stil, weiße Typografie. Machen wir es einfach so auf 700 Schriftstärke. Beachten Sie nun, dass dies verteilt ist. Das heißt, das ist die volle Breite. Lassen Sie uns zunächst den Außenbehälter in voller Breite erstellen. Es ist jetzt in voller Breite. Aber jetzt haben wir auch den inneren Behälter, in dem sie alle aufbewahrt werden. Muss auch die volle Breite haben. Aber wir mussten zu 90% sein. Es geht also bis hierher. Stellen wir es in die Mitte und wählen den äußeren Behälter aus. Stellen wir einfach alles in den Mittelpunkt. Wählen Sie dieses Logo aus. Lassen Sie uns Einblicke in die Kachelbreite werfen. Lassen Sie es uns vorantreiben, vielleicht bis zu 30%. Und richten wir es nach links aus. So. Wählen wir die hier angezeigte Symbolliste aus. Kann das in Check, Check, Insert ändern. Eine über den Unterricht bei Item, sagen wir, Kontakt. Es hat auch die Icons geändert. Prüfen. Lass uns diese ändern, um das zu überprüfen. Endlich dieser zum Nachschauen. Einfügen. Im. Da haben wir es. Lassen Sie uns also, bevor wir es duplizieren, solange es noch ausgewählt ist, in das Stilsymbol gehen. Lass es uns auf dunkelgrün ändern. Habe ich das Grün immer noch? Nein. Lassen Sie mich es hier auswählen. Inhalt. Facebook kopiere das. Wählen Sie diese Stilikone aus. Muss es beim Schweben so grün sein, wir müssen es weiß sein. Dann muss die Farbe für den Text, die Typografie, weiß sein. Und beim Schweben muss die Farbe grün sein. Einfach so. Lassen Sie uns die Symbolliste duplizieren. Lösche das. nun Lassen Sie uns nun die Punkte Datenschutz, Richtlinie, Nutzungsbedingungen und möglicherweise Lizenzierung ändern Richtlinie, Nutzungsbedingungen . Lass uns das schließen. Aktualisiere. Sehen wir uns eine Vorschau der Änderungen an. Und das haben wir. Beachten Sie jetzt, dass wir hier etwas mehr Abstand zwischen diesen beiden haben . Und wir haben dieses Anmeldeformular, was sehr wichtig ist. Ich gehe wieder rein. Wählen Sie hier einen Container aus, der alles enthält. Dieser Container ist fortgeschritten. Lass uns diese Polsterung genau hier durchbrechen. Und für die Polsterung links ist das der Abstand zum Rand. Lass uns vielleicht 50 draus machen, oder lass uns ein Fünftel draus machen, 100, 100. Aktualisiere. Sehen wir uns die Änderungen einfach so an. Aber jetzt müssen wir dieses Anmeldeformular erstellen, und genau das wollen wir in der nächsten Lektion tun. Also wir sehen uns in Kürze. 18. Erstelle das Anmeldeformular: Hey, willkommen zurück. Jetzt haben wir den Ordner bereits erstellt, aber was fehlt, ist das Anmeldeformular hier, rechts hier auf der rechten Seite des Fotos. Also, wie machen wir das? Wir müssen ein Formular-Plugin installieren. Es gibt mehrere Formular-Plug-ins im WordPress-Plugins-Repository, aber ich liebe es, sie später zu erstellen. Also müssen wir es für etwa eine Minute installieren. Lass uns vorerst von hier weggehen. Aussteigen. Und der Grund, warum ich Formulator liebe, ist, dass Nominator sehr leistungsfähig ist und Sie ihn kostenlos verwenden können. Und einige der wichtigsten Funktionen , die es Ihnen kostenlos zur Verfügung stellt , werden tatsächlich in einem anderen Formular-Plugin bezahlt . Sie müssen also für diese Funktionen bezahlen , wenn Sie andere Formular-Plugins verwenden. Verwenden Sie den Formulator und Sie erhalten sie kostenlos. Gehen wir also in die Plugins und fügen Sie Neues hinzu. Und ich tippe einfach vier Minuten sind hier. Für Terminator. Der Terminator. Und hier sind wir. Es ist also von WP MU Deb. Also jetzt installiert. Im Moment ist es installiert. Also lass uns aktivieren. Und los geht's. Und es ist genau hier fast am Ende des Seitenmenüs. Gehen wir also zum Formulator. Sie können später für mich klicken oder direkt zu Formularen gehen, aber ich möchte, dass wir zum Formulator-Dashboard gehen. Also hier sind wir. Dies ist die Startseite des Plug-ins für vier Monitore in WordPress. Wie Sie sehen können, haben wir verschiedene Möglichkeiten. Wir können ein Formular oder eine Umfrage erstellen. Im Moment sind wir an einem Formular interessiert. Also erschaffe. Und wir haben hier Vorlagen, aus denen wir wählen können , die bereits vorgefertigt sind. Deshalb wollen wir eine Newsletter-Anmeldung. Lassen Sie uns also weitermachen und sagen, Newsletter-Anmeldung, fahren Sie fort. Melde dich an. Nennen wir es einfach „Sign Up“ oder „Richtig“. Jetzt ist es also erstellt. Und jetzt haben wir zwei Felder. Vorname, E-Mail und dann eine Schaltfläche zum Abonnieren. Und wenn Sie eine Vorschau sehen möchten, können Sie einfach Vorschau sagen. Wir haben also Vorname, E-Mail und abonnieren, Vorname, E-Mail, abonnieren. Und wir können diese Felder ziehen und neu anordnen. Zum Beispiel können wir die Angst platzieren, wir können sie in der kostenlosen Vorschau so nebeneinander stellen. Jetzt stehen sie Seite an Seite. Ich möchte also den Vornamen nicht angeben, also lösche ich ihn einfach. Und jetzt bleibt uns die E-Mail-Adresse. Einfach so. Mach das zu. Und jetzt wollen wir diesem Button diese grüne Farbe geben. Also lass mich einfach das Grün von dieser Seite holen. Noch einmal. Kopieren. Ich gehe wieder rein. Ich wollte einen Blick hinter die Kulissen werfen. Und das ist eine Vorschau der Änderungen, die Sie vornehmen. Also, wenn du in die Wohnung gehst, mag ich es flach ohne diese harte Grenze. Kann auch mutiges Material verwenden oder keins. Ich mag die Wohnung. Und Sie können auch die Farben anpassen, was wir tun wollen. Also klicke auf Kostüm. Dadurch wird jeder einzelne Teil eines vorhandenen Formulars sichtbar. Wie Sie unten sehen können, haben wir die Schaltfläche Absenden. Wenn ich darauf klicke, können wir die Farbe ändern, indem wir auf die Hintergrundfarbe klicken. Wählen Sie das aus, ich füge das Grün dort ein. Klicken Sie nach draußen. Dann für die Texte, lass es uns schwarz machen. Beim Schweben. Ich möchte, dass der Knopf weiß ist. Und was den Fokus angeht, ich möchte, dass es weiß ist. Sehen wir uns das in der Vorschau an. Beim Schweben. Ordnung, also weiter mit dem Mauszeiger, lassen Sie uns den Text weiß und schwarz machen. Unkonzentriert. Der Text sollte schwarz sein, wenn der Mauszeiger darüber schwebt, und es sollte auch eine schwarze Vorschau sein, die einfach so aussieht. Veröffentlichen. Und wenn wir wahrscheinlich ein Blatt ziehen, erhalten wir einen Kurzcode. Ein Kurzcode ist im Grunde nur ein winziger Code wie dieser, und ich habe ihn kopiert. Es ist ein winziger Code, den Sie an einer beliebigen Stelle auf Ihrer Website einfügen. Und dieses Formular wird angezeigt. Dieser winzige Code steht für ein Formular. Diese 243 ist die Nummer oder ist die ID des Formulars. Wenn Sie etwa zehn native Formulare haben, haben Sie vier verschiedene Seiten erstellt. Vielleicht hat die Kontaktseite ein eigenes Formular mit mehr Feldern. Es könnte eine andere Nummer haben. Jedes Formular hat eine eigene eindeutige Nummer, sodass jeder Kurzcode ein anderes Formular anzeigt. Also lass mich das kopieren. Die Tastenkombination wurde erfolgreich kopiert. Schließ das. Jetzt gehe ich zurück in unser Dashboard und möchte unsere Fußzeile öffnen. Also Fitness-Portal, lass uns ins Armaturenbrett gehen. Ich habe diese Seite immer noch geöffnet, aber ich öffne das Dashboard auf einem anderen Tab, damit wir die Elemente Kids, Header, Footer und Bearbeiten mit Elementor aufrufen können . Und jetzt wollen wir in diesem Container ein Kurzcodeelement, ein Kurzcodeelement, ablegen . Also lass es uns per Drag & Drop da reinziehen. Und das ist im Grunde nur ein Feld zur Eingabe unserer Shortcodes. Also fügen wir das dort ein. Und jetzt, wie Sie sehen können, erscheint das Formular jetzt in unserem Ordner. Wenn wir diese Shortcode-Elemente in einen anderen Teil ziehen, erscheint das Formular in diesem Teil. Also aktualisiere das. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Und da haben wir es. Dieses Bearbeitungsformular ist also nur ein Link zu unserem Editor. Wenn ich klicke, wird es zum Dashboard weitergeleitet , um es weiter zu bearbeiten. Aber wenn Sie es nicht bearbeiten, wenn Sie ein Besucher oder Kunde ihrer Website sind, werden Sie diese nicht sehen. Nur der Admin kann diese sehen, da er die Website aktiv bearbeitet. In Ordnung, also los geht's. Da ist unsere Fußzeile. Wenn wir nun in das Dashboard gehen, die Dashboard-Seiten, alle Seiten. Und schauen wir uns die Homepage an. Scrollen Sie nach unten. Da haben wir es. Unser Ordner ist jetzt fertig. Aber eine Sache, die ich tun möchte, ist den Abstand zwischen den Testimonials und der Fußzeile zu erhöhen zwischen den Testimonials und , da wir dort einen schönen Abstand benötigen. Während wir also hier auf der Seite sind, können wir mit Elementor zu Bearbeiten gehen. Wir können auf Header klicken, um den Header-Ordner zu bearbeiten und den Ordner zu bearbeiten. Oder klicken Sie einfach auf Bearbeiten mit Elementor, um den Seiteninhalt selbst zu bearbeiten. Jetzt bearbeiten wir die Seite. Scrollen wir ganz nach unten. Wählen Sie den erweiterten Testimonials-Container für den unteren Rand aus. Geben wir 100. Aktualisiere das. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie ganz nach unten. Wir haben noch nicht genug Abstand. Also, solange es noch ausgewählt ist, geben wir ihm eins. Aktualisiere das und lass uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Ja, jetzt haben wir die 150. Vielleicht können wir ihm 200 geben. Sagen wir 250. Aktualisiere das. Sehen wir uns eine Vorschau der Änderungen an. Scrollen Sie ganz nach unten. Ja, das ist also ein guter Abstand zwischen den beiden. Und beachten Sie, dass wir hier etwas mehr Abstand benötigen. Gehen Sie also zurück zu unserem Ordner und wählen Sie diese beiden aus. Wenn wir den Container auswählen, der diese beiden enthält, und hier rein gehen, haben wir begründeten Inhalt. Wir können den Inhalt zentrieren. Wir können das von Anfang an begründen, was wir ursprünglich hatten. Wir können sie bis zum Ende durchziehen. Wir können so Platz dazwischen haben. Wir können Platz um uns herum haben oder wir können sogar Platz haben. Ich denke also, dass der Weltraum gleichmäßig in Ordnung aussieht. Aber jetzt stimmt das nicht mit der Überschrift überein. Eine andere Sache, die wir tun können, ist, diese einfach von Anfang an zu starten und dieses Element selbst auszuwählen. Advanced. Gehen wir zum Rand, Rand links. Machen wir 20 draus, oder machen wir 50 draus. Bis zu diesem Punkt. Aktualisiere das. Sehen wir uns eine Vorschau der Änderungen an. Da haben wir es. Gehen wir nun zu unserer Seite und aktualisieren sie, ganz nach unten scrollen. Jetzt haben wir ein paar schöne Abstände. Wir haben auch unsere Anmeldung für und all das. Denken Sie daran, dass wir dieses Logo auch zu einem Link machen können. Gehen wir also zurück in unseren Editor wenn wir dieses Bild auswählen, können wir es in einen Link umwandeln, vielleicht in eine benutzerdefinierte URL. Und jetzt kannst du vielleicht deine website.com sagen , das ist die Homepage. Und wenn Sie möchten, dass dieser Link in einem neuen Tab geöffnet wird, klicken Sie auf dieses Zahnrad und wählen Sie In einem neuen Fenster öffnen. Sehen Sie sich eine Vorschau der Änderungen an. Wenn wir jetzt darauf klicken, wird es in einem neuen Tab geöffnet. Aber diese Website gibt es natürlich nicht. Deine website.com. Hier führt es uns zum Gastgeben. Dies sind Domainverkäufer. Im Grunde genommen erstellen Sie Ihre Landingpage so. Wir sind fast fertig. In den nächsten Lektionen werden wir diese Landingpage auf Smartphones und Tablets responsiv gestalten auf Smartphones und Tablets responsiv , da sie auf dem Desktop bereits fantastisch aussieht. Ich hoffe, dir hat der Unterricht gefallen. Wenn ja, ist dies ein guter Moment, um sich eine Minute Zeit zu nehmen und eine Bewertung abzugeben. Lass andere Schüler wissen, was du von der Klasse hältst. Wie haben Sie davon profitiert? Was magst du an der Klasse? Das wird sehr hilfreich sein? Lass uns jetzt wieder an die Arbeit gehen. Wir sehen uns in der nächsten Lektion. 19. Machen Sie den Navbar Sticky: Also wollen wir jetzt an der Navbar arbeiten. Wir wollen etwas verbessern. Und um genauer zu sein, wir wollen es oben klebrig machen. Sie werden sofort feststellen, dass die Navigationsleiste verschwindet, wenn wir anfangen zu scrollen. Und wenn Sie auf andere Seiten der Website zugreifen möchten, müssen wir zurück nach oben scrollen um auf das Menü zuzugreifen. Das ist nicht sehr benutzerfreundlich und unser Ziel ist es , die Website so benutzerfreundlich wie möglich zu gestalten. Gehen wir also in unser Dashboard. Und ich möchte in Plugins, Add New gehen, weil wir ein Plugin hinzufügen möchten, mit dem wir die Navigationsleiste oben anbringen können. Also geben wir hier Sticky ein. Ich hoffe, er bringt das mit. Oh ja. Es sind also Sticky Header-Effekte für Elementor. Genau wie Elements ist Heat, Sticky Header Effects für Elementor ein weiteres Plugin, das als Add-on für Elementor erstellt wurde. Also lass es uns jetzt installieren. Aktiviere. Und los geht's. Und es scheint, dass ich die Elemente aktualisieren muss, um Licht zu bekommen. Lass mich einfach auf Update klicken. Jetzt. Es ist immer gut, deine Plugins auf dem neuesten Stand zu halten. Ordnung, jetzt, wo wir Sticky-Header-Effekte installiert haben , kehren wir zur Seite zurück. Und jetzt möchte ich mit Elementor den Mauszeiger über Bearbeiten bewegen. Aber weil wir den Header bearbeiten wollen , klicke ich auf Header. Und hier sind wir. Lassen Sie mich also zunächst diesen Navigator schließen. Und jetzt, nun, dieser Container ist ausgewählt. Ich möchte zum Advanced Collapse-Layout wechseln und die aktivierten Sticky-Header-Effekte erweitern. Lassen Sie uns das aktualisieren. Lassen Sie uns die Änderungen überprüfen. In Ordnung, also was wir in der Vorschau sehen, ist die Navbar. Was wir jedoch sehen wollen, ist ein klebriger Effekt in Aktion. Lassen Sie mich also auf Home klicken, um zur Landingpage zu gelangen. Aber jetzt haben wir die Navbar schon klebrig gemacht. Also lasst uns anfangen zu scrollen. Und jetzt werden Sie feststellen, dass es auch beim Scrollen oben bleibt. Wir haben also immer noch Zugriff auf das Menü egal in welchem Teil der Website wir uns befinden. Aber es gibt ein kleines Problem. Beachten Sie, dass wir, wenn wir hier zu einem Text scrollen, z. B. zu diesen Texten, das Menü nicht lesen können da sich einige Texte im Hintergrund befinden. Was tun wir also, damit wir einen Hintergrund in der Navigationsleiste einführen können . also zurück in den Editor gehen, werden Sie feststellen, dass wir hier unten Einstellungen unter dem Sticky-Header-Effekt haben . Also nach unten scrollen. Hintergrundfarbe, wählen Sie aus, auf welche Farbe der Hintergrund nach dem Scrollen geändert werden soll. Also, ich schalte das und dann ändere ich das auf Schwarz. Lassen Sie uns das aktualisieren. Sehen wir uns eine Vorschau der Änderungen an. Gehen wir wie gewohnt zur Homepage, damit wir scrollen können. Wenn wir nun anfangen zu scrollen , werden Sie feststellen, dass der Hintergrund des Menüs schwarz ist. Und das ermöglicht es uns, den Menüinhalt immer noch zu lesen , unabhängig davon, was sich im Hintergrund befindet. Und so macht man die Navigationsleiste klebrig, damit der Benutzer auf das Menü zugreifen kann, egal in welchem Teil der Website er sich befindet. Und das gibt ihnen eine gute Benutzererfahrung. Es dreht sich alles um UI UX. In der nächsten Lektion fügen wir den verschiedenen Elementen auf der Seite einige Bewegungseffekte hinzu. Also wir sehen uns in Kürze. 20. Bewegungseffekte hinzufügen: Es ist jetzt an der Zeit, einige der Bewegungseffekte hinzuzufügen, die wir auf der Referenzwebsite gesehen haben. Lassen Sie mich also einfach zur Referenz-Website springen. Sie werden feststellen, dass verschiedene Elemente animiert sind und der Website im Grunde genommen einige coole Effekte verleihen und die Website einprägsamer machen. Einfach so. Also ein dramatischer Auftritt der verschiedenen Elemente, die wir haben. Schauen wir uns an, wie das geht. Also zurück zu unserem Editor, das ist die Seite, die wir erstellen. Ich gehe zu Mit Elementor bearbeiten und klicke darauf. So können wir mit der Bearbeitung der Elemente auf der Seite beginnen. Und hier sind wir. Die Seite ist jetzt also editierbar. Das erste, was wir tun müssen, ist den Container auszuwählen, der den TextContent zusammen mit den Schaltflächen enthält. Dieser Container hier gehört zum Advanced Collapse-Layout. Und wir haben Bewegungseffekte. Wir haben mehrere. Klicken Sie also auf dieses Drop-down-Menü. ZB auf der Referenzwebsite habe ich Bouncing übrig. Dazu. Natürlich kann ich Bouncing richtig gebrauchen. Geh, wähle es aus. Gehen Sie in das Layout Advanced Collapse , erweitern Sie Bewegungseffekte, Drop-down-Menü, Balancing und Rechte. Einfach so. Aktualisieren. Sehen wir uns eine Vorschau der Änderungen an. Und los geht's. Jetzt verwenden wir im Grunde einfach verschiedene Effekte die verschiedenen Elemente auf dieser Seite und Sie können so kreativ werden, wie Sie möchten. Also gehen wir wieder rein, mal sehen. Du kannst sie sogar animieren , wenn du willst, aber das überspringe ich einfach. Es liegt an dir. Lassen Sie mich den Container auswählen, der dieses Bild enthält. Ich sage Advanced Collapse Layout. Noch einmal Bewegungseffekte. Sagen wir einfach, ich zoome nach links oder rechts. Wählen wir diesen äußeren Container Advanced aus. Ich sehe nach rechts zoomen. Aktualisiere das. Sehen wir uns eine Vorschau der Änderungen an. Zuerst der Heldenbereich, der nach unten scrollt. Wie Sie gesehen haben, wurden sie nach links und rechts vergrößert , als wir sie eingestellt haben. Also mach im Grunde einfach weiter und mache den Rest der Bewegungseffekte. Füge die restlichen Bewegungseffekte hinzu. Jedes einzelne Element, das Sie hinzufügen, kann einen Bewegungseffekt haben. Also werde kreativ. Mal sehen, was du dir einfallen lassen kannst. Und bevor wir diese Lektion beenden, fiel mir nur ein, dass ich Ihnen nicht gezeigt habe wie Sie die Homepage einrichten. Und das ist sehr wichtig, weil Sie möchten, dass die Roots-Domain zwei Punkte auf Ihre Homepage zeigt, damit es nicht Ihre Root-Domain.com Slash Home ist. Es ist nur deine Root-Domain.com . Wenn es also fitness.com ist, verweist es auf diese Homepage. Es ist nicht fitness.com slash home fitness.com. Also, wie stellen wir das ein? Gehen Sie zurück in unser Dashboard? Ich gehe in Einstellungen, Lesen. Und hier haben wir Ihre Homepage-Displays, und dann haben wir Optionen. Wählen Sie also eine statische Seite und für die Homepage die Option Home > Änderungen speichern. Und wenn ich jetzt mit der rechten Maustaste darauf klicke und den Link in einem neuen Tab öffne, wenn wir zu dem gehen, stellen Sie fest, dass wir jetzt auf der Homepage sind und es ist die Root-Domain. Und so fügt man im Grunde die Bewegungseffekte hinzu und richtet die Homepage ein. In der nächsten Lektion sehen wir uns an, wie Sie die Landingpage auf Tablets und Mobiltelefonen responsiv gestalten können. Wir sehen uns in Kürze. 21. Responsiver Header: Im Moment möchten wir diese Website oder besser gesagt unsere Landingpage responsiv gestalten . Und wir wollen mit dem Header beginnen, anderen Worten, dem Napa. Mal sehen, wie man die Navbar responsiv macht. Lassen Sie mich also zunächst all diese Tabs schließen , die wir geöffnet hatten. Und jetzt haben wir eine Landingpage. Lassen Sie mich also den Mauszeiger darüber bewegen und dann auf die Kopfzeile klicken. Weil wir am Header arbeiten. Jetzt wollen wir es responsiv machen. Also werde ich weitermachen und auf diese Schaltfläche für den responsiven Modus klicken. Und das zeigt diese Einstellungen hier oben. Und was uns wirklich interessiert, diese drei Symbole hier, wie Sie sehen können, ist dies der Desktop. Die Landingpage sieht auf dem Desktop bereits gut aus. Arbeiten wir also an der Tablet-Version , indem wir von dort oben auf das I klicken. Und jetzt sind wir hier. Also wechseln wir sofort in den Tablet-Modus. Sie werden feststellen, dass die Speisekarte verschwunden ist und das liegt daran, dass sie auf ein Burger-Menü umgestellt wurde. Wenn ich mit dem Mauszeiger hier drüber gehe, erscheint ein Burger-Menü, das standardmäßig im inaktiven Zustand schwarz und beim Schweben blau ist. Also können wir es auf unser Grün ändern. Also, was ich tun möchte, ist das Menü selbst auszuwählen. Gehen Sie mit Stil ins Innere, weil wir das Design der Burger-Speisekarte ändern wollen. Lassen Sie uns die Menüverpackung zusammenklappen und den Hamburger-Stil öffnen. Und gehen wir zum Hintergrundtyp. Lass uns umziehen. Ich möchte hier die grüne Farbe einfügen. Einfach so. Ich werde hier irgendwo klicken, um das los zu werden. Und wir müssen nicht wirklich die gesamten Vogeleinstellungen ändern , denn wenn Sie ein Tablet verwenden, Sie Ihren Finger nicht über Ihr Tablet, um etwas anzuklicken, sondern Sie berühren es einfach. Die Schwebeeffekte werden also keine wirkliche Wirkung haben. Wenn wir dieses Menü nun erweitern, indem wir darauf klicken, wird das Seitenmenü angezeigt. Also müssen wir diesen Hintergrund ändern. Gehen wir also in den Menü-Wrapper, der das erste Element ist, Hintergrundtyp, und ändern wir das auf Schwarz. Jetzt ist es natürlich schwarz und erbt die Farben, die wir für den Desktop festgelegt haben. Und ich denke, ich werde es dabei belassen. Aber jetzt haben wir auch dieses Umschaltsymbol hier. Wir können die Farbe ändern, indem wir den Menü-Wrapper ausblenden. Ich gehe nach Hamburger-Art rein. Wenn ich mich nicht irre. Und hier unten haben wir den Schalter geschlossen. Wenn wir also nach unten scrollen, haben wir den Hintergrundtyp. Wählen Sie die Farbe hier und fügen Sie das Grün dort ein. Und jetzt hat es eine grüne Farbe. Und ich glaube, das gefällt mir. Nun, das Menü ist immer noch ausgewählt. Wir können auch zu den Einstellungen für den Inhalt und das mobile Menü gehen. Wir können hier ein Logo hinzufügen. Wählen Sie das aus, wählen Sie. Und jetzt, wenn wir dieses Symbol berühren, wird das Logo angezeigt, aber es sieht verzerrt aus. also von innen gehen, können wir das Logo des mobilen Menüs verwenden und zu 100% am Weep arbeiten und gegen k kämpfen. Wir können auch am Rand arbeiten. Lassen Sie uns das erweitern. Schieb es von links rein. Also Margin-Left aktualisiere das. Sehen wir uns nun eine Vorschau der Änderungen an. Jetzt können wir die Entwicklertools verwenden, die in jedem Browser enthalten sind, um verschiedene Geräte nachzuahmen. Wenn ich also auf meine Chrome-Steuertaste klicke , werden die Chrome DevTools aufgerufen. Und wenn Sie hier auf dieses Symbol für den responsiven Modus klicken, können wir zwischen verschiedenen Geräten wechseln. Im Moment ist das also das Pixel fünf. Wenn Sie auf das Drop-down-Menü klicken, haben wir hier verschiedene Geräte, da wir an der Tablet-Version arbeiten. Klicken wir auf iPad Air. Und so sieht es auf einem iPad Air aus. Gehen wir also wieder rein und wollen das Logo etwas größer machen . Und wir wollen mit Prozentsätzen dieser Container arbeiten Prozentsätzen dieser Container , die das Logo und das Menü enthalten, und das Logo selbst auswählen. Ändern wir diese Einheiten in Prozentsätze. Und wählen wir auch die Container aus, in denen sich das Menü befindet, und ändern wir das in Prozent. Und jetzt machen wir, dass es vielleicht 20% sind. Und ich denke, das ist ein gutes Größenupdate dort. Wenn wir uns die Änderungen ansehen, denke ich, dass das eine bessere Größe ist als zuvor. Gehen wir wieder rein, kommen wir zur mobilen Version. Sie jetzt darauf klicken, werden Sie feststellen, dass das Logo und das Menü gestapelt sind, aber wir wollen sie nebeneinander haben. Im Moment wird also nur mit den Prozentsätzen gespielt. Wir können dem Logo vielleicht 50% der Breite dieses äußeren Containers geben. Und gibt diesen anderen Containern natürlich 50 Prozent. Was ist mit 149 Prozent? Ich denke, vielleicht geben wir dem Logo 30%. Und das geben wir ihm 70%. Lassen Sie uns den Prozentsatz bis irgendwo dort reduzieren . Aktualisiere das. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Und wechseln wir hier zu jedem Handy, das wir wollen, vielleicht zum Pixel Five. So sieht es auf einem Pixel fünf aus. Schauen wir uns das iPhone Pro, iPhone 12s Pro an. So sieht es auf einem iPhone 12 aus. Das erweitern wir. So sieht es aus. Dies sind Einstellungssymbole. Das Logo ist auf einem echten Telefon sichtbar. Und im Grunde sind wir mit den Einstellungen für den Responsive-Modus für den Header fertig . In der nächsten Lektion sehen wir uns an, wie Sie den Hauptteil der Landingpage responsiv gestalten . Also wir sehen uns in Kürze. 22. Responsive Körperabschnitte: Moment haben wir gerade die Arbeit an der Reaktionsfähigkeit des Headers oder der Navigationsleiste abgeschlossen , und damit sind wir fertig. Als nächstes wollen wir an der Reaktionsfähigkeit des Körpers selbst arbeiten . Wenn ich also in das Menü gehe und auf Home klicke, damit wir das können, öffnen wir die Homepage. So sieht es derzeit aus, bevor wir etwas unternehmen. Wie Sie sehen können, haben wir auf der Seite nicht wirklich viel zu tun. Tatsache ist, dass es nur ein paar Minuten dauern wird. Lassen Sie mich also von den Einstellungen für den responsiven Modus wegschalten den Einstellungen für den responsiven Modus und die Entwicklungstools schließen. Gehen wir nun zu Bearbeiten mit Elementor. Jetzt bearbeiten wir die Seite einfach so. Lassen Sie mich also hier reingehen , wo wir den Header bearbeitet haben, und ihn einfach schließen. Also bleibt uns das übrig. Und dann klicken Sie wie immer hier oben auf das Symbol für den responsiven Modus. Und wechseln wir in den Tablet-Modus. So sieht es also auf dem Tablet aus. Beginnen wir mit der Auswahl des Containers, der den Textblock und das Bild enthält. Und ich denke, das ist es. Ich kann es nicht auswählen. Also gehe ich zu Control I, um den Navigator aufzurufen. Und jetzt ist dieser Container hier der oberste Container für die Heldensektion. Und darin befindet sich der Behälter, den wir suchen. Dieser Behälter. Und in diesem Container haben wir die beiden Container. Dieser enthält den Textblock und dieser enthält das Bild. Wählen Sie also diesen Container aus. Jetzt ist es ausgewählt. Gehen wir für Fortgeschrittene rein. Lassen Sie uns zunächst diese Marge aufschlüsseln , um sie zu senken. Und lassen Sie mich diese Texte auswählen. Und lassen Sie uns die Größe reduzieren, indem wir uns mit der Stiltypografie befassen. Ich denke, das ist eine gute Größe. Für die Knöpfe. Ich denke, wir können sie übereinander stapeln lassen. Also wähle ich den Container mit den Knöpfen aus. Dann wechsle ich für die Richtung zur vertikalen Spalte, so. Und dann lassen Sie uns sie am Anfang ausrichten. Zum Anfang. Einfach so. Aktualisieren. Jetzt haben wir, glaube ich, zu viel Rand oder zu viel Polsterung um diesen inneren Behälter herum. Also wähle es aus. Was sind die Einstellungen hier? Über den äußeren Behälter? Gewicht? Wir müssen das auswählen. Und im Layout. Machen wir es zu 100%, zu 100%, nicht zu den Zellen. Ich denke, das ist eine gute Größe. 90% Aktualisiere das. Und ich mag es so. Aber wenn Sie das Bild vergrößern möchten, können Sie sich natürlich auch dafür entscheiden, sie zu stapeln, anstatt sie nebeneinander zu haben. Sie können also diesen äußeren Container auswählen , der den Bildcontainer und den Textcontainer enthält. Und für die Richtung wechseln Sie zu dieser. Wählen Sie dann diesen Container aus. Wechseln Sie auf 100%, 100% so. Und für das Bild ändere das auch in Prozent, also 100%. Es geht also darum, wie kreativ Sie werden möchten , und verschiedene Personen haben unterschiedliche Einstellungen für ihre Landingpages. Ich finde, das sieht schon gut aus. Aber wenn Sie Änderungen daran vornehmen möchten, können Sie natürlich einfach den Texteditor selbst auswählen. Geh zum Stil. ZB möchte ich die Topographie und die Linienhöhe bearbeiten. Ich denke, sie sind zu nahe beieinander. So. Ich finde, das sieht schon gut aus, aber wir können die Größe dieser Überschrift reduzieren. Stil Typografie. Reduzieren wir es auf vielleicht 45. Und alles andere sieht gut aus. Ich gehe hier rein. Sie können diesen Typografie-Stil auch in der Textgröße 45 wählen , wie den anderen. Und weil es zu nah am Rand ist, ich, ich werde den äußeren Behälter auswählen. Fortschrittliche Polsterung. Für die Linke. Das ist das Richtige. Wir können ihm 20 geben. Und für die Linke 20. Das wird also alles vom Rand nach innen drücken. Ich finde das sieht auch gut aus. Sie können diesen Typografie-Stil auswählen. Größe 45 ist okay. Wir können auch an der Polsterung arbeiten wie wir es mit diesem anderen gemacht haben. Jetzt. Hier ist die Lösung sehr einfach. Gehen wir einfach in jeden Service-Container wie diesen Service und stapeln alles so von oben nach unten. Und dann wählen wir den Text hier aus. Zentral ausrichten, Beschreibung, Stil, Mittelpunkt ausrichten. Lassen Sie uns dasselbe für diese anderen Dienste wiederholen. Also hier ist eine Container-Richtung, oben nach unten, mittig, ausgerichtete Mitte. Wählen Sie die Servicerichtung aus. Fast fertig. Richtung von oben nach unten, Mitte, Stilmitte. Und schließlich Richtung von oben nach unten, Mitte, Mitte. Fantastisch. Und jetzt ist dieser Text auch zu nah an den Rändern. Gehen Sie also wieder hier rein und wählen Sie den Container aus, der alles enthält, was fortgeschritten ist. Und lass uns die Polsterung links und rechts ändern . Jetzt haben wir dort ein paar schöne Abstände. Nun, wir können diese Überschrift auch verkleinern . 245 für Einheitlichkeit. Zeugnisse, ebenfalls 45. Wählen Sie einen Behälter aus , der sie enthält. Fortgeschrittene Polsterung für alle linken, 20, rechts? Das sieht gut aus. Und im Grunde ist es das. Oh, wir können diese Kopfzeile für den Heldenbereich auswählen und sie auch in die Mitte setzen. Einfach so. Dann das Textstilzentrum. Und wir können auch die Schaltflächen und den Container auswählen und alles in die Mitte schieben, Elemente so an der Mitte ausrichten. Aktualisieren. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Also jetzt Control Shift. Das habe ich ihr dann erzählt. Wechseln wir zum iPad Air, und so sieht es auf einem iPad Air aus. Ich finde, alles sieht toll aus. Wenn wir auf ein Handy umsteigen. Gehen wir zum Mehr. Gehen wir zum iPhone 12. Ich finde es schon Ich finde es sieht schon gut aus , auch wenn wir es nicht angefasst haben. Und das überlasse ich Ihnen, damit Sie alle Änderungen oder Verbesserungen vornehmen können , die Sie für die mobile Version für notwendig halten. Aber ich finde, es sieht schon gut aus. Es hat die Einstellungen übernommen, die wir für das Tablet festgelegt haben. Wenn wir jetzt also zum Ordner scrollen, werden Sie natürlich feststellen, dass wir einige Fehlausrichtungen haben, und daran werden wir in der nächsten Lektion arbeiten. Also wir sehen uns in Kürze. 23. Responsive Fußzeile: Im Moment sind wir genau hier in der Mappe. Wir müssen nur ein paar Anpassungen vornehmen und wir sind mit einer Fußzeile fertig. Also, ohne Zeit zu verschwenden, lassen Sie uns dieses Symbol hier umschalten und die DevTools schließen . Und dann fahren Sie natürlich Maus über diese und klicken Sie auf Ordner, um das Essen selbst zu bearbeiten. Und hier haben wir den Hauptinhalt bearbeitet. Also schließen wir das, weil wir die Änderungen gespeichert haben. Nun, hier bearbeiten wir den Ordner. Klicken Sie erneut auf das Symbol für den responsiven Modus. Und wechseln wir zum Tablet. Auf Anhieb. So sieht es aus. Wenn wir diesen Container auswählen, der die Quicklinks enthält, und in den erweiterten Modus wechseln, werden Sie feststellen, dass wir diese 100 linken Abstände aus dem Desktop-Modus übernehmen . Einfach so. Gehen wir also zurück in das Tablet, lassen Sie uns dieses Greifen beenden. Dadurch wird alles zurückgesetzt und wir können die gewünschten Werte für die Tablet-Version festlegen. Aber wenn wir zum Desktop-Modus zurückkehren, es immer noch hundert. Gehen wir also zurück ins Tablet. Schauen wir uns an, was wir hier tun können. Wenn ich diesen Container auswähle, der die Links enthält, gehe ich in die Richtung und lasse alles von vorne beginnen. Wir hatten etwas Polsterung oder Rand drauf. also das erweiterte ausgewählt haben, ja, wir hatten einen linken Spielraum von 50. Wenn wir das entfernen, haben wir diese beiden Linkgruppen. Ich denke, jetzt sieht es viel besser aus. Eigentlich. Wenn ich das Logo selbst auswähle, gehe hinein, style, kann die Breite erhöhen bis zu dem Punkt Update. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Natürlich müssen wir Shift I steuern und das dann umschalten. So sieht es auf Mobiltelefonen aus. Aber was ist mit dem iPad Air? So sieht es auf dem iPad Air aus, ich finde, es sieht schon gut aus. Wechseln wir zum iPhone Pro. Ich finde, es sieht auch auf iPhone- oder Handybildschirmen fantastisch aus . es mich betrifft, müssen wir also Soweit es mich betrifft, müssen wir also keine wirklichen Änderungen vornehmen. Aber nur für den Fall, dass Sie Änderungen an der mobilen Version vornehmen möchten , müssen Sie nur auf dieses Symbol hier klicken. Und z. B. wenn Sie alles zentralisieren möchten. Wählen wir also dieses Bild aus. Inhalt, richten Sie ihn in der Mitte aus. Wählen Sie diesen Textstil aus und richten Sie ihn mittig aus. Wählen Sie diesen Container hier aus. Grundriss. Richten wir alles auf die Mitte aus. Dies ist auch ein weiterer Container. Richten Sie alles auf die Mitte aus. Wählen Sie diesen Container hier aus. Richten Sie alles in der Mitte aus. Und jetzt hast du eine andere Einstellung. Aber ich werde in diese Geschichte eingehen und zu dem zurückkehren, wo wir vor einem Moment waren. Ich glaube, es war genau da. Ich mag dieses Setting. Hier kannst du dir alle Bewegungen ansehen , die du seit Beginn der Bearbeitung gemacht hast. Inhalt auf der Seite oder in einem beliebigen Editor. Und wie Sie sehen können, ist dies die früheste, Bearbeitung hat begonnen und dies ist die letzte Änderung, die wir vorgenommen haben. Wir können in die Vergangenheit reisen und den Zustand wiederherstellen, wie es vor einem Moment aussah. Ich wollte das Update hören. Sehen wir uns eine Vorschau der Änderungen an. Und so sieht es aus. Sie können also natürlich noch viel mehr tun. Dies ist nur ein Arbeitsablauf , mit dem Sie beginnen können. Je mehr Sie Elementar verwenden, desto kreativer würden Sie werden, desto mehr werden Sie verschiedene Möglichkeiten entdecken , um dieselben Ergebnisse zu erzielen. Es liegt also an Ihnen, weiter zu üben und besser zu werden und zu verstehen , wie Sie alle Funktionen dieses großartigen Tools nutzen können. Also lasst uns von dieser Gegend weggehen. Ich übergehe das und schließe das. Zurück zu unserem Redakteur. Lassen Sie mich tatsächlich von hier weggehen, weil es uns jetzt gut geht. Oder lassen Sie uns eine Vorschau der Änderungen anzeigen und dann auf Home klicken. Nun, lass mich das einfach entfernen und zur Homepage Control Shift gehen . Ich schalte das um, damit wir es uns von oben nach unten ansehen können. Bevor wir scrollen, wird zunächst das Menü geöffnet. So sieht er aus. Flucht. Scrollen Sie nach unten. Und da haben wir es. Wechseln wir also in den Tablet-Modus, iPad Air. So sieht das Essen auf dem iPad aus. Scrollen Sie nach oben. Beenden Sie jetzt dort, um es sich von der Desktop-Version aus anzusehen. Im Grunde genommen ist das, wie man diese Landingpage erstellt, wie in der Klasse erwähnt. Meine Absicht war es, Ihnen zu zeigen, wie Sie die Container verwenden , um eine schöne Landingpage zu erstellen. Die Container sind die brandneue Art , Webseiten mit Elementor zu erstellen. Du kannst jederzeit den Arbeitsablauf für Abschnitte und Spalten verwenden, ich in all meinen vorherigen Elementarkursen unterrichtet habe. Du kannst ihn dir ansehen , indem du mein Profil besuchst. Bevor wir die Dinge zum Abschluss bringen, habe ich noch ein paar wichtige Tipps ich mit Ihnen teilen möchte. Und dann nennen wir es Wrap. Also wir sehen uns im Outro. 24. 24 abschließende Gedanken: Herzlichen Glückwunsch, Sie haben endlich das Ende des Kurses erreicht, was bedeutet, dass Sie die Erstellung Ihrer Landingpage abgeschlossen haben. Ich möchte mir nur einen Moment Zeit nehmen und mich bei Ihnen dafür bedanken, dass Sie an diesem Kurs zum Erstellen von Landingpages mit Elementor teilgenommen haben. Und ich hoffe aufrichtig, dass Sie den Inhalt hilfreich und informativ fanden und dass Sie wertvolle Fähigkeiten erworben haben, die Sie für Ihre eigenen Webentwicklungsprojekte anwenden können . Jetzt, wo Sie gelernt haben, wie Sie mit Elementor eine schöne Landingpage und im weiteren Sinne eine wunderschöne Website mit Elementor erstellen mit Elementor eine schöne Landingpage und im weiteren Sinne . Es ist wichtig, dass Sie sicherstellen, dass es SEO-freundlich ist. Es gibt verschiedene Dinge, die Sie tun müssen , um Ihre Landingpages und Websites für Suchmaschinen sichtbar zu machen Websites für Suchmaschinen sichtbar zu , denn so werden Sie entdeckt. Sie müssen zum Beispiel bemerkt haben, als wir Bilder von unserem Computer in die WordPress-Medienbibliothek hochgeladen haben, dass wir Textfüllungen hatten, die wir uns nicht die Mühe gemacht haben, sie auszufüllen. Diese Textfelder sind jedoch sehr wichtig für Ihre Suchmaschinenoptimierung. Sie müssen Details wie den Alt-Text angeben , um die Bilder leichter zugänglich zu machen und die Seite SEO-freundlicher zu gestalten. Ein anderes Beispiel ist, dass wir auf unserer Landingpage Überschriften verwendet haben, für sie jedoch keine Hierarchie festgelegt haben. Von eins bis H6. Es ist sehr wichtig, dass Sie verstehen, wie Sie Überschriften hierarchisch verwenden, um eine bessere Seitenstruktur zu erzielen, was Ihre Suchmaschinenoptimierung verbessert. Und dies ist nur die Spitze des Eisbergs, wenn es um die Aktionen und Schritte geht, die für die Sichtbarkeit in Suchmaschinen erforderlich sind. Wenn Sie mehr über WordPress-SEO erfahren möchten, habe ich in mehr über WordPress-SEO erfahren möchten, meinem Profil hier einen vollständigen schrittweisen Kurs für Sie zur Verfügung. Und ich empfehle Ihnen dringend, es unmittelbar nach diesem Kurs zu absolvieren , damit Sie verstehen, was Sie auf Ihren zukünftigen Websites tun müssen , um sie sichtbarer zu machen. Und abschließend, wenn Sie diesen Kurs nützlich finden würden, würde ich mich über Ihr Feedback sehr freuen. Bitte nehmen Sie sich eine Minute Zeit, um eine Bewertung über den Kurs zu hinterlassen , damit andere potenzielle Schüler wissen, was sie von mir erwarten können, und mir auch dabei zu helfen wissen, was sie von mir erwarten können, und mir , meinen zukünftigen Unterricht zu verbessern. Was hat dir an der Klasse gefallen? Wie sind die Lektionen? War der Lehrer engagiert? Um Ihre Bewertung abzugeben, klicken Sie einfach unter diesem Videoplayer auf den Tab Bewertung dauert weniger als eine Minute. Nochmals vielen Dank, dass Sie an dem Kurs teilgenommen haben, und ich hoffe, Sie bald in meinen anderen Unterrichtseinheiten zu sehen. Bis zum nächsten Mal. Hab einen guten Einteiler.