Elementor für Anfänger: Entwerfen Sie eine Responsive Fitness-Trainer Landing Seite

1. EINFÜHRUNG: In dieser Klasse werde ich Ihnen zeigen, wie Sie elementweise mobile Responsive Design-Tools verwenden , um Webseiten zu erstellen, die korrekt auf allen Bildschirmgrößen Feed. Anschließend arbeiten Sie an einem realen Projekt, in dem Sie die erlernten Fähigkeiten anwenden , um eine moderne Landingpage zu erstellen, die sich richtig an Desktop-, Tablet- und Mobilbildschirme anpassen lässt . Mein Name ist Ken Besser und ich bin ein Online-Unternehmer, Web-Schöpfer und Tech-Enthusiasten. Ich führe ein paar Online-Unternehmen und baute sie alle mit Elementor ohne Codierung. Um ihnen beizutreten, profitieren Sie von dieser Klasse. Du brauchst keine Vorkenntnisse in Elementor. Alles, was Sie brauchen, ist ein starker Wunsch zu lernen, wie man mobile responsive Webseiten macht. Aber weil Elementor WordPress installiert, ist meine Annahme, dass Sie mit WordPress und Drag & Drop Builder vertraut sind. Als ich diese Klasse kreierte, waren die Menschen, die ich im Sinn hatte, das Gefühl als Webdesigner, Webdesign-Agentur Designer. Also, wenn Sie bei einer Web-Design-Agentur arbeiten, Online-Unternehmer, die die Dinge in ihre eigenen Hände nehmen und ansprechende Webseiten für ihre Websites entwerfen möchten , sogar Hobbyisten. Also, wenn Sie das als Hobby machen wollen, wird es immer noch etwas Großartiges für Sie sein. Grundsätzlich, wenn Sie daran interessiert sind, zu lernen, wie man moderne Mobile-First-Webseiten im Jahr 2021 und darüber hinaus entwirft. Diese Klasse wird eine großartige Leistung für Sie sein. Warum? Denn Sie werden in der Lage sein, diese Fähigkeiten in jedem zukünftigen Website-Projekt, das kommt in produzieren herausragende Webseiten , die nicht nur schön auf verschiedenen Bildschirmgrößen aussehen, sondern auch geben Benutzern eine reizvolle Benutzererfahrung. Während Sie in der Klasse lernen, wie Sie Responsive Webseiten in Elementor erstellen , indem Sie Ihre eigene Landing Page erstellen, können Sie dieselben Prinzipien über Ihre persönliche Website hinaus mit den Fähigkeiten anwenden , die Sie erworben haben , wenn Sie noch kein Webdesigner sind. 2. Schnelle Aktualisierung – Der neue Elementor: Willkommen zurück. Diese Lektion ist jetzt eine kurze Randnotiz oder eine schnelle Aktualisierung des Elementor-Installationsprozesses. Wenn Sie diese Klasse im Mai 2022 und darüber hinaus besuchen , werden Sie feststellen, dass die Elementor-Aktivierung jetzt über einen Setup-Assistenten verfügt werden Sie feststellen, dass die Elementor-Aktivierung jetzt über einen Setup-Assistenten verfügt, der aus mehreren Schritten besteht , die Sie ausführen müssen um die grundlegenden Teile von Ihre Website. Während ich diese Klasse vor einigen Monaten erstellt habe, hatte Elementor diesen Setup-Assistenten nicht. Also möchte ich nur, dass wir diesen Setup-Assistenten durchgehen. Aber alles andere, was Sie in diesem Kurs lernen , ändert sich nicht. Es ist immer noch derselbe Prozess. Die einzige Ergänzung ist der Setup-Assistent. Wie Sie jetzt sehen können, habe ich eine brandneue Installation von WordPress und wir sind bei Version 6. Und was ich tun möchte, ist zu Plugins, Add New. Also können wir Elementor hinzufügen und diesen Prozess durchlaufen. Ich suche jetzt nach Elementor install. Und jetzt, wenn ich auf Aktivieren klicke wird zu diesem Setup-Assistenten weitergeleitet. Und wir können es gemeinsam durchmachen. Also hier sind wir. Ich zoome einfach ein wenig heraus damit wir mehr Details sehen können. Okay, jetzt werden Sie feststellen , dass wir als erstes ein Konto erstellen, um das Beste aus Elementor herauszuholen. Dies sind also einige der Vorteile für die Anmeldung für ein Konto bei Elementor. Aber die Sache ist, dass Sie kein Konto bei Elementor haben müssen , um Elementor zu verwenden. Also gehe ich einfach weiter und überspringe diesen Teil. Der zweite Schritt besteht darin, das heilige Thema zu akzeptieren , das Elementor für uns gemacht hat. Dies wird von Elementor erstellt, aber wir verwenden das Astra-Theme, also gehen wir einfach weiter und überspringen. Astra ist ein mächtigeres Thema. Der dritte Schritt besteht darin, unserer Website einen Namen zu geben. Während Sie Ihr WordPress installiert haben. Sie haben der Website einen Namen gegeben. Das ist der Name, der hier auftauchen wird. Dies gibt uns jedoch die Möglichkeit, den Namen in einen anderen Namen zu ändern, den wir wollen. Meine Website, und klicken wir dann auf Weiter. Und wenn Sie ein Logo für Ihre Website haben und es jetzt im Voraus hinzufügen möchten. Sie können einfach die Medienbibliothek öffnen und aus der Medienbibliothek auswählen oder von Ihrem Computer hochgeladen werden. Aber das werden wir jetzt nicht machen. Also behalte ich einfach diesen Schritt. Und natürlich können wir das Logo später hinzufügen und ich zeige Ihnen, wie das geht. Klicken wir auf „Überspringen“. Und jetzt kommen wir zum allerletzten Schritt , in dem wir zwei Möglichkeiten haben. Wir können unsere Homepage von einer leeren Leinwand aus mit dem Elementor-Editor bearbeiten . Oder wir können aus Hunderten von Vorlagen blättern oder unsere eigenen Vorlagen importieren, wenn wir sie haben. Aber ich gehe weiter und überspringe. Das. Wird auf die Leinwand weitergeleitet, wo wir jetzt mit dem Erstellen einer Website beginnen können. Und los geht's. Im Grunde ist das alles, was ich dir zeigen wollte. Es ist ein neues Update. Es war vor ein paar Monaten nicht da. Jetzt ist es da. Aber alles andere in den kommenden Lektionen bleibt gleich. Der Prozess bleibt immer noch derselbe , um eine Landingpage zu erstellen. Ohne mehr Zeit zu verschwenden, lasst uns zur nächsten Lektion übergehen. Ich gehe zu diesem Burger-Menü und klicke auf Beenden to Dashboard. Lassen Sie uns von dieser Seite verlassen. Jetzt befinden wir uns im Dashboard und wir sind bereit, mit dem Erstellen der Website zu beginnen. 3. Die notwendigen Plugins installieren: Dies ist also die Kopfzeile der Zielseite zum Erstellen. Alles, was Sie jetzt auf dem Bildschirm sehen, wird Teil der Kopfzeile sein. Also diese Knöpfe hier, die Sex blockiert in dieser Nav-Bar genau hier. Und das sollte das erste sein, was wir jetzt erschaffen werden. So springen über das Backend von WordPress, dies ist eine brandneue Installation von WordPress, so dass ich nicht einmal ein Plug-In. Also werden wir voran gehen und zuerst die Plugins installieren. Wir müssen die Navigationsleiste erstellen. Also lassen Sie uns in die Plugins gehen und Neues hinzufügen. Und das allererste Plugin, das wir brauchen, ist Elementor. Also ist es der erste Gegenstand ist Stein. Nun, lassen Sie uns scrollen nach unten Während auf der gleichen Seite und suchen Sie nach Elementen, Keith Element oder Add-ons, iso jetzt, und lassen Sie uns auch Osten. Suchen Sie also einen Header-Effekt für elementor. In Ordnung, jetzt, wo sie installiert sind, gehen wir am wenigsten in die Installations-Plug-ins und aktivieren sie alle auf einmal. Klicken Sie also darauf, wählen Sie sie alle aus. in dieser Dropdown-Liste Wählen Siein dieser Dropdown-Listedie Option Aktivieren und Anwenden aus. Jetzt, da sie alle aktiviert sind, sind wir bereit, unsere Navigationsleiste zu erstellen. Und das erste, was wir tun wollen, ist, die Menüpunkte zu erstellen, diese fünf Menüpunkte hier, und das sind Webseiten. Also lassen Sie uns Webseiten erstellen. 4. Design der Nadelleiste: Also lassen Sie uns voran und erstellen Sie eine Seite. Nennen wir es zu Hause. Und rechts hier auf der rechten Seite, scrollen Sie nach unten und suchen Sie nach Seitenattribute, Vorlage. Setzen Sie das auf Elementor volle Breite. Und weil ich das Astra Theme verwende, werde ich dies auf das Inhaltslayout auf volle Breite setzen, gestreckt. Dann würde er das veröffentlichen, eine andere Seite erstellen. Neue Blogseite hinzufügen. Scrollen Sie nach unten, bezahlte Attribute auf Elementor volle Breite gesetzt. Für mich ist, dass das ist, was zu veröffentlichen. Geh zurück, erschaffe noch einen. Also lasst uns diese Kurse nennen. Scrollen Sie nach unten Seitenattribute, elementar, vierwöchige Strecke direkt dort, veröffentlichen. Aber mach dir keine Sorgen um diesen Abschnitt hier. Vielleicht hat das Thema, das Sie verwenden, nicht die Einstellungen, denn wie Sie jetzt sehen können, unsere Astra Einstellungen, Ich verwende das Thema Astra. Solange Sie also ein elementor-kompatibles Thema verwenden, haben Sie diese Attribute-Option und das ist, was wichtig ist. Es wird hier wieder aufgerufen, aber Sie können auch auf die Seitenattribute im Frontend zugreifen und ich werde Ihnen zeigen, wie. Also, das sind drei Seiten. Lassen Sie uns einen weiteren Kontakt erstellen. Geh runter. Datenattribute, Seitenvorlage für Weizen. Alles klar, jetzt haben wir vier Seiten. Also das nächste, was wir tun wollen, ist die tatsächliche Navigationsleiste zu erstellen , die auf der Seite angezeigt wird. Und wie schaffen wir, dass innerhalb Erscheinungsmenüs gehen wird. Und hier, Sie werden sehen, erstellen Sie Ihr erstes Menü unten. Und wir können weitermachen und ein Mega-Menü erstellen. Nennen wir es einfach Mega-Menü, und lassen Sie uns es das primäre Menü erstellen, Menü erstellen. Und weil es gerade diese Seiten hier erstellt hat, stehen sie für uns zur Verfügung, um sie zum Mega-Menü hinzuzufügen. Also lassen Sie uns voran und aktivieren Sie diese Kontrollkästchen und fügen Sie sie dem Menü hinzu. Rechts, so dass sie hinzugefügt wurden, Lassen Sie uns nach Hause ziehen, um das erste Element zu sein und Kontakte werden das letzte Element im Menü von links nach rechts sein. Gehen Sie weiter und speichern Sie das Menü. Ehrfürchtig. Also, jetzt haben wir ein Menü. Wordpress weiß, dass wir ein Menü haben und das Menü heißt Mega-Menü, und er wird diese vier Links enthalten. Dies sind vier Links zu diesen Seiten. Wie zeigen wir diese Speisekarte auf eine so ausgefallene Art und Weise an? Wir machen das mit Elementor, und hier ist, wie es geht. Also springen über zwei Elemente Schlüssel, denken Sie daran, dies ist einer der Plugin Sweep mit Elementor installiert. Beachten Sie, wenn Sie den Mauszeiger darüber bewegen, ist eine der Optionen hier die Kopfzeile. Klicken Sie also auf Header Footer, genau hier, weil wir noch keine erstellt haben. Wir können voran gehen und erstellen Sie eine, Add New, geben Sie ihm einen Namen. Und es kann mu für Konsistenz bedeuten. Natürlich ist es ein Header 1, es sichtbar auf der gesamten Website. Wenn Sie möchten, dass es auf bestimmten Seiten sichtbar ist, können Sie das immer tun, aber Sie müssen die Pro-Version der Elemente behalten. Und bei der Aktivierung wird es aktiv sein wollen. Das heißt, wenn wir die Seite veröffentlichen, wird dieses Menü sichtbares Licht BCE sein. Also, jetzt, da wir das Menü bereit haben, Lassen Sie uns voran und erstellen Sie es visuell so aussehen. Klicken Sie also auf Bearbeiten. Gehen Sie zum Bearbeiten von Inhalten. Hier sind wir. Wenn wir hier einfach zu dieser Seite springen können, werden Sie feststellen, dass der Napa zwei Spalten hat. Diese Spalte hier, die das Logo hat und diese, die das Menü hat. Was wir also tun müssen, ist ein doppelter Spaltenabschnitt hinzuzufügen. Aber wir können es immer entsprechend ändern. Wir wollen es lange auf dieser Seite haben und kürzer als diese Seite, denn wie Sie sehen können, ist das der Fall. Ziehen Sie also hier die Bildelemente dort hinein, damit wir das Logo hinzufügen können. Und ich hatte einige der Bilder hochgeladen, die wir verwenden werden. Ich werde sie in den Links zur Verfügung stellen, also achten Sie darauf, sie zu überprüfen. Also lassen Sie uns dieses Logo wählen. Medien einfügen. Das nächste, was wir tun wollen, ist eine Navigationsleiste hinzuzufügen. Also hier drin, geben Sie nav ein. Und Sie werden feststellen, dass wir zwei identische Nav-Menüs haben. Einer von ihnen hat ein Schlosssymbol und das andere ist wie. Dieser kommt mit Elementor Pro. Und weil es im mentalen Pro nicht vorhanden ist, können wir es nicht benutzen. Weniger. Verwenden Sie die IQ, IQ ein Elemente Keats. Und warum können wir die Speisekarte noch nicht sehen? Es liegt daran, dass wir ein Menuet ausgewählt haben, aber wir haben gerade eines erstellt. Denken Sie daran, es hieß Mega-Menü. So haben wir es jetzt sichtbar in der Grenze, aber es ist auf der linken Seite. Wir müssen es auf die rechte Seite schieben. Also lasst uns weitermachen und das tun. Aktualisieren Sie das. Und hier, klicken Sie auf das Zahnrad und stellen Sie sicher, dass das Seitenlayout hier, sagte er elementor Leinwand oder RI. Lassen Sie uns eine Vorschau anzeigen. Ich mag es, wie es aussieht. Das nächste, was wir tun möchten, ist, den Rest des Header-Abschnitts zu erstellen, und wir werden mit dem Hintergrund beginnen. 5. Gestalte den Kopfzeilenbereich: Fügen wir einen schwarzen Hintergrund wie diesen hinzu. Also springen hier rüber, Lassen Sie uns von wo aus wir die navbar Exit to Dashboard bearbeiten. Gehen wir Ost Side Seiten. Also der Punkt hier ist, dass wir den Header-Abschnitt erstellen möchten. Was wir erschaffen haben, war die Navigationsleiste. Wir hatten noch nicht damit begonnen, die Seite selbst zu erstellen. Also jetzt müssen wir den Pfad auswählen, der zur Landingpage wird, den, den wir mit all diesen Inhalten befüllen werden. Also lassen Sie uns einen von ihnen auswählen. Jeder von ihnen kann die Zielseite sein. Gehen wir mit der Homepage. Und da wir es bereits veröffentlicht haben, können Sie auf Bearbeiten mit Elementor klicken. Wählen wir also den doppelten Spaltenabschnitt aus. Und um die Hintergrundfarbe festzulegen, klicken Sie auf Abschnitt Bearbeiten. Gehen Sie zum Stil unter normal. Behandle die Kiste. Lassen Sie uns Ihnen diese sehr dunkle, bläuliche, schwärzliche Farbe geben. Aber Sie können ihm jede Farbe geben, die Sie wollen. So laut zu dir. Das gefällt mir. Klicken Sie irgendwo da draußen. Das nächste, was wir tun wollen, ist, diese Dame hier hinzuzufügen. Weil der Spalteninhalt dem Abschnitt seine Höhe gibt. Lassen Sie uns also darauf klicken, ziehen Sie ein Bildelement dort hinein. Und wählen wir das Bild aus. Und unsere Sektion fängt schon jetzt an, so etwas zu sehen. Das nächste, was wir tun wollen, ist, darauf zu klicken. Fügen Sie eine Überschrift hinzu. Denk genau hier, dass es Gesundheit sagt. Und so wählt man all das aus, wählt euch alle aus. Und so machen wir es größer. Gehen Sie zum Stil, ändern Sie die Farbe in Weiß. Klicken Sie auf Topographie. Pool es, ändern Sie es auf die gewünschte Größe. Geben wir ihm eine 115. Als nächstes möchte ich das duplizieren. den Mauszeiger hier und klicken Sie auf das Doppelsymbol genau dort in, nur für den Fall, dass Sie diese Pop-up nicht sehen. Wenn Sie den Mauszeiger über die Ecken bewegen. Kann in das Burger-Menü gehen, Benutzereinstellungen und stellen Sie sicher, dass die Bearbeitung Griffe. Er sagte: Ja. Also lasst uns das in Fitness ändern. Solange es noch ausgewählt ist. Gehen wir in die Typografie. Machen Sie das größer. Verringern Sie das Gewicht. Verringern Sie seine Größe ein wenig. Na gut, als nächstes kopiere ich die Türken. Klicken Sie hier auf dieses Symbol. Ziehen Sie einen Texteditor direkt dorthin. Klicken Sie in ihr Gesicht, den ganzen Text darin. Stil im Innenbereich. Ändern Sie die Textfarbe in Weiß, und aktualisieren Sie die Seite. Beachten Sie, dass wir eine Vorschau der Seite anzeigen. Und beachten Sie, dass beginnen, Gestalt anzunehmen, aber die oben rechts hier, dieses weiße. Warum ist es weiß? Wir wollen, dass es so aussieht. Wir wollen, dass der Hintergrund ganz nach oben läuft. Also, wie erreichen wir das? Also, wenn wir einfach zurück in das Dashboard springen könnten, gehen Sie in Elemente, halten Sie die Kopfzeile. Und lassen Sie uns die Mega-Menü IT-Inhalte bearbeiten. Also, jetzt bearbeiten wir diesen Navbar-Header. Also, was wir tun wollen, ist wählen Abschnitt bearbeiten. Wechseln Sie zu Erweiterte Sticky-Header-Effekte. Sagen Sie aktivieren. Blättern Sie nach unten. Legen Sie diese Zielentfernung auf eins fest. Das ist, wie viele Pixel soll der Benutzer scrollen, bevor die Navigationsleiste klebrig wird? Transparenter Header, der festgelegt ist, dass er besitzt und aktualisiert. also auf unsere Seite zurückspringen, auf der wir die Zielseite bearbeitet Wenn Sie dieses Steuerelement R oder Command R auf dem Mac aktualisieren, werden Sie feststellen, dass der Abschnitt jetzt ganz nach oben geht. Also lasst uns hier alles nach unten schieben, so dass nur der Napa und das Logo ganz oben stehen. Und wir tun das, indem wir die Polsterung in diesem Abschnitt diesem ganzen Abschnitt erhöhen. Daher kann ich es wegen der Navigationsleiste nicht auswählen. Ich rufe den Navigator auf, indem ich auf dem Mac auf Control I oder Befehl I klicke. Und ich kann mit der rechten Maustaste auf Abschnitt klicken und bearbeiten, zu Erweitert gehen, diese Werte löschen und dann den Padding erhöhen. Geben wir ihm eine Polsterung von 200. Ja. Lassen Sie uns eine untere Polsterung geben oder 50 aktualisieren, dass. Lassen Sie uns eine Vorschau der Seite anzeigen. Ich mag, was ich mittlerweile sehe, wie dieser Pinselstrich. Fügen wir diesen Pinselstrich hinzu. Also gehen Sie hier rein, bearbeiten Sie den Abschnittsstil. Wir haben die Farbe bereits hinzugefügt, wir wollen sie für den Hintergrund. Klicken Sie nun auf die Bildoption direkt dort und wählen Sie diesen Pinselstrich aus. Denken Sie daran, dass ich Ihnen das Bild bereits zur Verfügung gestellt habe. Sie können in den folgenden Links einchecken. Aktualisieren Sie das. Dann lassen Sie uns zuerst eine Vorschau anzeigen. Und Sie werden bemerken, dass sich das wiederholt, und es ist verlegt. Also unter dem Bild werden Sie feststellen, dass die Position ist, sagen wir oben rechts. Und sagen wir, keine Wiederholung. Nehmen wir an, blättern Sie nach dem Anhang. Und für die Größe, sagen wir kundenspezifisch, weil wir eine benutzerdefinierte Größe benötigen. Geben wir ihm eine Größe von 60. Aktualisieren Sie dort. Jetzt lassen Sie uns eine Vorschau anzeigen. Okay, es fängt an, Gestalt anzunehmen. Das nächste, was wir tun wollen, ist, an diesen Links zu arbeiten, so dass, wenn Sie den Mauszeiger über sie bewegen, sie die Farbe ändern. 6. Den Kopfbereich beenden: Denken Sie daran, dass wir auch die Navbar bearbeitet haben. Gehen Sie also auf die Seite, auf der Sie Ihren Napa Fall bearbeitet haben. Du weißt nicht, wo das ist. Gehen Sie einfach zu Elementen halten, lassen Sie mich das aktualisieren. Gehen Sie zu den Elementen, halten Sie die Kopfzeile, bearbeiten Sie dann und bearbeiten Sie dann den Inhalt. Also, hier drinnen wollen wir die Schriftfarbe auf Grün ändern. Also lasst uns hier reinkommen. Wählen Sie diese Navigationsleiste aus. Gehen Sie in Stil reduziert den Menü-Wrapper. Erweitern Sie den Stil der Menüelemente unter Normal. Ändern Sie das in das Grün. Für jetzt. Ich habe nicht das genaue Grün, aber versuche einfach, damit zu spielen. Mal sehen, ob es klappt. Also lassen Sie mich diesen Code kopieren, weil wir ihn wiederverwenden werden. Kontrolle C. Lassen Sie mich das aktualisieren. Dann. Gehen wir nun zurück zu der Seite, auf der wir die Seite gerade hier bearbeitet haben, und aktualisieren Sie die Seite. Alles klar, jetzt ist die Schrift grün. Also das nächste, was wir tun wollen, ist ändern, dass die Hover-Effekte weiß sind. Also wieder da rüber springen, so weiter schweben, das sagt das zu weiß. Und wenn es aktiv ist, muss es auch weiß sein. Oder schreiben Sie das Update. Sobald Sie das aktualisiert haben, können wir zu dieser Seite zurückkehren, auf der wir die Kopfzeile bearbeiten und diese Seite aktualisieren. Also jetzt sollte der aktive Menüpunkt weiß sein. Genau. Los geht's. Also lassen Sie uns eine Vorschau darauf. Ehrfürchtig. So ist die Landing Page fast fertig. Lassen Sie uns die Schaltflächen hinzufügen. Diese drei Knöpfe hier drin. Klicken Sie dort, geben Sie Ihre ein. Es bringt diesen Doppelknopf durch Elemente halten Licht. Es kommt nicht standardmäßig mit Elementor. Also ziehen wir es da rein. Und das erste, was wir tun wollen, ist, den Namensknopf hier zu ändern, die Schaltflächenbeschriftungen. Und wir tun das, indem wir zuerst den Doppelknopf zusammenklappen, den Knopf eins erweitern und diesen ändern, um uns oder jedem anderen anzuschließen, der ihn ändern möchte. Und hier fügen Sie Ihren Link hinzu , auf den Sie die Schaltfläche zeigen möchten. Und wenn Sie möchten, dass der Link in einer neuen Registerkarte geöffnet wird, können Sie immer darauf klicken und eine neue Registerkarte öffnen. Dann aktualisieren Sie jetzt. Also lasst uns die Taste zu Schaltfläche ändern. So sollte sagen, Erfahren Sie mehr. Richtig? Man merkt also, dass es zusammengebrochen ist und das Wort „Mehr“ verschwunden ist, weil es zu lang ist. Wir müssen die Knöpfe etwas breiter machen. So ausgeblendete Schaltfläche, so eine erweiterbare Schaltfläche. Und lasst uns die Breite genau dort vergrößern. Jetzt ist es da Punkt. Lasst uns das aktualisieren. Und Änderungen in der Vorschau. Alles klar, genial. Also gehen wir zurück. Als nächstes möchten wir die Tastenfarbe ändern, also sollte dies grün sein. Gehen wir rein, solange es noch ausgewählt ist, gehen wir rein. Stil verkleinerte Schaltfläche eins. Willst du den Knopf zuerst ändern. Unter normal werden Sie feststellen, dass hier Farbe vorhanden ist, und es gibt auch einen Hintergrundtyp. Wenn Sie diese Farbe ändern, ändern Sie die Farbe der Schriftart, den Text „Weitere Informationen“. Und wenn wir den Hintergrundtyp ändern , dann ändern wir die Hintergrundfarbe dieser Schaltfläche. Und wir werden es zum Bildschirm machen wollen. Also für jetzt habe ich diese Farbcodes nicht, also werde ich nur versuchen, einige wirklich nahe an das zu kommen. Ich denke, das ist fast wie das Grün aktualisiert. Dieser andere Knopf ist weiß in der Farbe. Gehen wir also zu Button 1. Ketten einen Rückgrat Typ hier zu weiß. Und jetzt werden Sie feststellen, dass die Schriftart nicht sichtbar ist, weil sie auch weiß ist. Also müssen wir seine Farbe ändern. Rechts unter Normal ist Farbe. Mal sehen, ist das diese dunkel. Lou, schwärzliche Säule so. Beachten Sie, dass die Schriftart auch Schwarz für Kontrast wählt. Also lassen Sie uns diese Schriftfarbe reduzierte Schaltfläche ändern 1, Schaltfläche Erweitern, um unter Farbe. Lass es uns in Schwarz ändern. Das gleiche Schwarz, das wir in Button 1 hatten. Lassen Sie uns also erweitern Taste 1. Zuerst. Klicken Sie auf diese Farbe, kopieren Sie sie. Reduzierte Schaltfläche 1, Schaltfläche Erweitern, um darauf zu klicken, und fügen Sie die Farbcodierung dort ein. Ordnung. So weiter. Diese Schriftart sollte jedoch schwarz werden, nicht beim Hover. Diese Taste sollte grün und die Schriftart schwarz oder fahren. Also auf Hover, Taste 1 über, schießen, drehen Sie die Farbe grün. Geh weiter und hol die grünen. Also werde ich das zusammenbrechen und zu Button gehen, um den Bildschirm zu erhalten. Halten Sie sich dort fest. Gehe zurück zu Knopf eins. Wechseln Sie zum Hover-Zustand von Schaltfläche 1, und ändern Sie die Farbe und den Hintergrundtyp. Es ist ein Grün. So ändert sich beim Hover die Farbe zu grün und die Funktion bleibt, ändert sich in Weiß. Ordnung, also muss dieser Knopf auf Weiß und die Schrift auf Schwarz auf Holober wechseln. Also lassen Sie uns an der grünen Schaltfläche arbeiten um auf Hover zu y. yup. Und die Schriftart muss sich ändern. So schwarz bis dunkel schwarz. Ich hätte reingehen können, es von der anderen Seite holen können. Okay. Lasst es uns von dieser Seite holen. Lasst uns die fehlende Kopie packen, die zusammengebrochen ist, das, erweitern. Und wir wollen den Knopf ändern. Farbe beim Schweben hier. Sh das schwarze. In Ordnung, lassen Sie uns das in einer Vorschau sehen. Und das haben wir bisher. Das nächste, was wir tun wollen, ist, den kleinen Videoknopf direkt dort hinzuzufügen. Und dieser größere Knopf ist wirklich cool. Es wird durch Elemente zur Verfügung gestellt halten Licht. Es ermöglicht Ihnen, vielleicht ein About Us Video oder etwas hinzuzufügen , um den Leuten schnell mitzuteilen, wer Sie sich innerhalb dieser Zielseite befinden. Und so passiert es. Du klickst also auf die Schaltfläche und ein Videofenster erscheint so. Wenn Sie eine Über uns Geschichte haben, könnte schnell Menschen über Sie erzählen. Gehen wir also weiter und fügen Sie diese Schaltfläche hinzu. Und wir fügen es hinzu, indem Sie auf das Tippvideo klicken. Und wir haben hier die Rahmenvideo-Optionen. Lasst uns diese tragen, die durch Elemente eingebracht wird. Halten Sie Licht, und lassen Sie es direkt unter die Tasten fallen. Standardmäßig ist es rosa in der Farbe. Also wollen wir es zuerst nach links ausrichten. Gehen wir also zu Stil und Ausrichtung links. Klicken Sie dann auf die Schaltfläche Stil. So können wir anfangen, die Farben zu bearbeiten. Wie Sie sehen, ist die Glühfarbe blau. Wir wollen es auf den Bildschirm drehen. Also hatte ich schon diese grüne Farbe kopiert, also lassen Sie mich sie dort einfügen. Und jetzt wirst du bemerken, dass es grün ist, wenn es glüht. Und direkt unter der Glühfarbe haben wir den Hintergrundtyp. Klicken Sie auf das in der Kette. Lassen Sie mich einmal nach unten scrollen, ändern Sie die Farbe dort auf das gleiche Grün. Also füge ich das Grün da rein. Und jetzt ist es grün. Also, wenn Sie das in der Vorschau sehen könnten. Die Veränderungen, das ist super genial. Wir müssen noch etwas Feinabstimmung machen, damit es so besser aussehen kann. Wie Sie sehen, gibt es einen Unterschied darin, wo sich diese Dame auf der Seite befindet , im Vergleich zu unserer Referenz. Also schieben wir sie ein wenig nach oben. Gehen Sie zurück zu dieser Seite hier, wählen Sie das Bild der Dame. Wechseln Sie zu Erweitert, und löschen Sie die Ränder und Padding. Lassen Sie uns einen gewissen Rand an der Spitze zu irgendwo dort überprüfen. Und aktualisiert. In Ordnung. Lassen Sie uns eine Vorschau anzeigen. Ja, wir haben sie ein bisschen hochgeschoben, aber wir müssen es mehr tun. Wir müssen diese Marge erhöhen. Mach dir keine Sorgen darüber, dass sie die Navigationsleiste hier berührt, wenn der Editor, wenn wir aktualisieren und auf die Vorschauseite gehen, die eigentliche, wenn wir Änderungen in der Vorschau sehen, bemerken, dass sie jetzt fast an der richtigen Stelle ist, aber wir brauchen , um diesen Pinselstrich ein wenig nach außen zu schieben, damit er auch vollständig sichtbar ist. Lass uns das machen. Lassen Sie uns die Größe des Pinselstrichs reduzieren. Also kann ich diesen Teil hier oben nicht auswählen, weil ich von der Navigationsleiste behindert bin. Aber ich kann Control I drücken, um den Navigator aufzurufen. Und wenn ich das zusammenbrechen kann, ist dieser Abschnitt dieser ganze Abschnitt genau hier. Also, wenn ich so bearbeitet habe, ein Bearbeitungsabschnitt, der den schwarzen Hintergrund im Pinselstrich hält. Lass uns zum Stil gehen. Und genau hier bei der Dimensionierung, lassen Sie es uns weiter auf vielleicht 55. Aktualisieren Sie dort. Und lassen Sie uns Änderungen in der Vorschau anzeigen. In Ordnung, also sind wir fast da. Als Nächstes wollen wir diese Ecken abrunden, wie auf unserer Referenzseite hier. Also gehen wir zurück hierher, wählt den Doppelknopf. Und lassen Sie uns gehen, während Sie immer noch im Stil sind. Setzen Sie unter Taste 1 den Radius auf 10, den Randradius auf 10, aktualisieren Sie dort. Scrollen Sie dann nach unten, während Sie noch unter Taste eins sind Der Link, die Polsterung. Gib mir die obere Polsterung von 10 und die untere Polsterung von 10. Der Bildlauf nach oben und reduzierte Taste 1, Erweitern Taste, um das gleiche zu tun, Randradius 10. Scrollen Sie nach unten zum Pad im Link-Tab. Obere Polsterung, untere Polsterung, zehn Daten. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Ehrfürchtig. So ist die Website Taney so gestalten, wie wir es wollten. Das war's also. Unser Kopfteil ist fertig. Das nächste, was wir tun wollen, ist, den Körperabschnitt zu erstellen, dann die Fußzeile. Wir haben keinen Körperabschnitt, auf den wir verweisen müssen, also machen wir es einfach Freestyle. Aber keine Sorge, wir haben die volle Kontrolle wird mit etwas Großartiges kommen. Das Hauptziel dieser 0s zu tun, das Verständnis der grundlegenden Konzepte hinter der Erstellung von Webseiten, die reaktionsschnell oder mobile Desktop und Tablet sind. Lassen Sie uns fortfahren, den Körperabschnitt zu erstellen. 7. Gestalte den Körperbereich: Wir werden also einen sehr einfachen Körperabschnitt erstellen, weil wir nur versuchen zu sehen, wie wir unsere mobile responsive Webseite machen können. Direkt unterhalb des Kopfabschnitts werde ich einen Teiler hinzufügen. zunächst Lassen Sie unszunächstdiese dreifache Spalte zur Struktur hinzufügen. Klicken wir dann auf das Pluszeichen in der Mitte. Und lassen Sie uns einen Teiler hinzufügen. Ich möchte sagen, lasst uns es zu Schrägstrichen machen. Ja, lass es uns dabei belassen. Ich möchte es wahrscheinlich auch grün machen. Ich glaube, ich habe immer noch das Grün. Du könntest klappen. Ja, also will ich es wieder grün machen. Gehen Sie zum Abschnitt Bearbeiten, die Verknüpfung dieser Werte und fügen Sie einen oberen Rand von 40. Als nächstes möchten wir einen doppelten Spaltenabschnitt hinzufügen. Fügen wir hier ein Bild hinzu. In diesem Bild könnte. Lassen Sie uns all diese Bilder hinzufügen. Wir werden diese Bilder verwenden und ich werde sie zur Verfügung stellen. So überprüfen Sie sie in den Link unten. Also im Grunde versuchen wir, eine sehr einfache Landing Page zu erstellen. Es geht darum zu lernen, wie man die Seite reaktionsschnell macht. Und sobald Sie alle diese Konzepte erfassen, werden Sie in der Lage sein, sehr erstaunliche WordPress-Seiten mit Elementor zu erstellen. Also zu Illustrationszwecken oder nur eine einfache Landing Page erstellen. Nehmen wir das Bild und fügen Sie es dort ein. Nehmen wir vielleicht, lassen Sie uns eine Überschrift hinzufügen, die 're und als Follow-up, weil dies eine Zielseite ist, vielleicht könnten diese etwas sein, um Sie zu überzeugen. Warum ich? Hier, sagen wir, dies ist ein Trainer, der versucht, uns zu überzeugen, sie als unsere Personal Trainer zu mieten, sind gut, dass diese Farbe 404040. Es könnte sein. Lasst uns die Größe hier vergrößern. Dann könnten wir einen Sub-Header direkt darunter oder über Ergebnisse hinzufügen darunter oder . Dann werden wir Ihnen wahrscheinlich die gleiche Farbe schon geben, 40. 40. Dann lassen Sie uns wahrscheinlich einen Texteditor direkt dort hinzufügen. Ja, wahrscheinlich so etwas. Lassen Sie uns die Größe eines erhöhen, alles darüber. Also als nächstes wollen wir die Farbe dieser Spalte hier ändern. Wir wollen ihm noch mehr Leben geben. Also klicken Sie auf diesen Spalten-Editor direkt dort, gehen Sites Kachel, Hintergrund unter normal. Ändern Sie das in, sagen wir vielleicht einige diese gleiche Farbe hier. Also lass mich hier reingehen. Abschnitt bearbeiten. Lassen Sie mich diese Farbe sehr schnell greifen. Ist schwarze Farbe. Kopieren Sie das. Ich möchte hierher kommen und das hier auswählen. Ich möchte sagen, fügen Sie diesen Code ein. Und ich möchte ändern, warum ich auf den Bildschirm. Also klicke ich darauf. Wählen Sie das Grün aus. Kopieren Sie es. Ich wähle das unter Stil aus. Ändern Sie diese Farbe in Grün. Lasst uns die weiß machen. Ich bin alles über Ergebnisse unter Stil. Lass es uns in Weiß umwandeln. Lassen Sie uns das auch in Weiß ändern. Vielleicht könnten Sie einen Knopf hinzufügen. Es geht, denken Sie daran, eine Landing Page dreht sich alles um Call to Action oder CTA. Eine andere Sache, die ich tun möchte, ist, diese Ecken ein wenig geerdet zu machen. Also, während es noch genau hier ausgewählt ist, gehen Sie unter Stil zum Rand, gehen Sie nach unten zum Randradius, Randradius. Machen wir es 20. Aktualisieren Sie sie. Und noch eine Sache, die wir tun wollen, nun, die Spalte ist immer noch ausgewählt. Klicken Sie auf Erweitert. Und lassen Sie uns die Polsterung hinzufügen, während diese Links zusammen sind. Also lasst uns das erhöhen. Und diese Art bringt alles in die Mitte , so dass sich kein Inhalt zu sehr zur Seite lehnt. wir also eine Daten und lassen Sie uns eine Vorschau darauf. Oder RI, genial. Also denke ich, ich werde das loswerden. Gefällt es nicht. Wir versuchen nur, kreativ zu werden. Und beachte, dass wir jetzt keinen Platz hier haben. Wir können einige Abstände hinzufügen, indem Sie auf dieses Pluszeichen klicken. Und hier können wir einen einzelnen Spaltenabschnitt hinzufügen. Klicken Sie dort auf das Pluszeichen, und fügen Sie Abstandshalter hinzu. Jetzt können Sie den Abstand erhöhen und verringern, wie Sie wollen. Lass es uns dabei belassen. Das nächste, was wir tun wollen, ist, dass wir zuerst aktualisieren, damit wir Änderungen gespeichert haben. Als nächstes wollen wir noch einen Abstandshalter hinzufügen. Also fügen wir dort einen Abstandshalter hinzu. Dann können wir eine weitere Doppelspalte hinzufügen. Und diese Spalte, lasst uns weitermachen und vielleicht eine Überschrift hinzufügen. Und diese Überschrift wird so etwas wie mein eBook finden. Geben Sie es. Geben wir ihm vielleicht 40, 40, 40. Das ist ein sehr dunkles Grau. Vielleicht erhöhen wir die Größe davon. Ich wünschte, wir hätten ein Buch. Jetzt hatten wir ein Buch PNG. Ich denke, das reicht. Lass es uns also dabei belassen. Lassen Sie uns Texteditor hinzufügen. Und diese Zunahme, dass Text jemand zu Big Data als ein Bild hier hinzufügen . Lassen Sie uns sicherstellen, dass diese Texte den ganzen Weg zu tragen. Also für das Bild und sehen, was wir arbeiten können. Lassen Sie uns das hinzufügen. Lasst uns damit arbeiten. Jede Vorschau ändert sich oder rechts. Gehen wir weiter und duplizieren das. Klicken Sie hier auf dieses Doppelsymbol. Um diesen Abschnitt zu duplizieren. Wir wollen es nur unter meinen Download ziehen, mein E-Book ist dupliziert diesen Abstandhalter genau hier. Und ziehen wir das hier, so dass wir diesen Abstand haben , und wir können dieses Bild nach vorne ändern. Eins. Problem mit dem hier. Aktualisieren Sie diese Seite. Wir beginnen zu scrollen. Sie werden feststellen, dass unser Kopf immer noch an der Spitze bleibt , obwohl wir scrollen und das ist, was wir mit einem klebrigen Header meinen. Wir haben bereits gesagt, dass es einen klebrigen Header hinzufügt. Denken Sie daran? Also lassen Sie uns diesen Abschnitt auch duplizieren. So wie das. Und ziehen wir es unter diesen Abschnitt. Und lassen Sie uns diesen Phasor hier duplizieren. Ziehen wir es nach unten, bis zu diesem Punkt, um diese beiden zu trennen. Lassen Sie uns noch ein weiteres duplizieren und es unterhalb dieses Abschnitts direkt dort platzieren. Dann erhöhen wir die Größe dieses Abstands, so dass unten eine Datenseite Platz ist. Lassen Sie uns Änderungen in der Vorschau anzeigen. Jetzt ist hier eine Webseite, die bereits wie eine eigentliche Webseite aussieht. Natürlich, wenn wir mehr Zeit haben, können wir daran arbeiten, um es viel schöner aussehen zu lassen. Und ich hoffe, das ist es, was du in deinem Projekt machst. Du gibst ihm Zeit, es ansprechend aussehen zu lassen. In Ordnung, also lasst uns dieses Bild hier ersetzen. Würde noch einen. Lass uns das vielleicht hinzufügen. Fügen Sie das ein. wir also neue Routine. Vielleicht haben die Jedi dir gegeben. Jetzt. Lassen Sie uns die ausgewählten Beats machen. Wir können Füße, dann aktualisieren Sie diese Seite. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Blättern Sie nach unten. Ich denke, vielleicht könnten wir die auf diese andere Seite stellen, Enbridge sie. Ziehen Sie diese Spalten so auf die rechte Seite, drehen Sie sie um. Es ist auch Flip diese beiden Spalten, wie sie nur für Abwechslung sind. Lassen Sie uns eine Vorschau der Änderungen in. Sie werden feststellen, dass, wenn es geladen wird, zuerst dieser Teil weiß ist, was er zu blau wird. Und das ist, weil nicht bekommen unsere navbars Hintergrund gleiche Farbe wie die, so müssen wir die navbar machen, die in Farbe ist. Ich werde das tun. Lassen Sie uns also voran und erstellen Sie die Fußzeile, bevor Sie die Gänge wechseln und uns jetzt darauf konzentrieren, die gesamte Seite reaktionsschnell zu machen. 8. Gestalte den Fußzeilenbereich: Lassen Sie uns die Fußzeile erstellen. Wir müssen das Element Kinder Licht Plugin verwenden, das wir verwenden, um die Navigationsleiste zu erstellen. Also lasst uns zum Backend unseres Dashboards springen. Beenden Sie sich also direkt dort, verlassen Sie sich zum Dashboard. Lassen Sie uns innerhalb der Elemente Key-Cursor über Elemente kid gehen, und gehen Sie zu Header Footer. Lassen Sie uns gehen, um neue hinzuzufügen. Geben wir ihm einen Namen. Mega, Mega-Ordner, Jahr. Ehrfürchtig. Und wir wollen, dass es ein Essen natürlich ändern, dass M1 muss aktiv und verfügbar auf der gesamten Website sein. Speichern Sie die Änderungen. Und jetzt können wir es auf die gleiche Weise bearbeiten, wie wir es mit einem Mega-Menü gemacht haben. Bearbeiten Sie Inhalte. Also das erste, was wir tun wollen, ist, geben Sie ihm den Hintergrund, der auf dem Kopf Abschnitt ist , weil wir wollen, um die Konsistenz unserer Website zu halten. also zurück zu der Seite wechseln, auf der wir den Header-Abschnitt bearbeitet haben, können wir den Abschnitt direkt dort bearbeiten. Dann komm her. Was uns interessiert, ist nur die Farbe, wir bearbeiten nichts. Also lasst uns gleich hier springen. Wir sind im Front-End. Wir wurden von Elementen an diesen Ort weitergeleitet. Behalten Sie. Das erste, was wir hier tun wollen, ist, einen Abschnitt zu erstellen. Wie immer. Gehen wir zu Schnittstil bearbeiten, und fügen Sie diese Farbe ein. Wir haben uns nur dort aufgespalten, also ist das unsere Hintergrundfarbe. Das nächste, was wir tun wollen, ist die Spalte zu duplizieren. In der Tat, Lassen Sie uns es dreifachen, so dass wir drei Spalten haben. Und wir können das Logo hier hinzufügen. Also lassen Sie uns dort ein Bild hinzufügen. Und lasst uns das eingefügte Logo greifen. Als Nächstes wollen wir etwas über Watson sagen, die Fußzeile. Klicken Sie also auf das Pluszeichen dort. Überschrift. Vertraut uns durch. Vertrauen Sie uns. Vertraut uns, feuchte Luft zu nehmen. Das ist ein Versprechen, oder? Legen wir es in die Mitte. Vertrauen Sie hier sollte das Kapital buchstabieren, dann lassen Sie uns seine Farbe in Weiß ändern. Ich gebe ihm das Grün. Würfel es so grün, genau hier. Auf dem ganzen Verb war grün. Also lasst uns hier rüber springen. Ich möchte es geben, diese grüne aktualisiert. Dann eine kurze Beschreibung, worum es auf der Website geht. Ziele hier unten. Klicken Sie also auf den Texteditor. Richtig? Also zuerst, lassen Sie es uns zentralisieren. Machen wir es weiß in der Farbe. Wir könnten wahrscheinlich Editierabschnitt sehen und die Polsterung oben und unten erhöhen. Also erweiterte Polsterung, löschen Sie diese auf der Unterseite. Geben wir ihm 60 und Top 50. Lassen Sie uns sehen, aktualisieren Sie das. Wir könnten wahrscheinlich auch die Navigationsleiste hinzufügen. Also lasst uns hierher gehen. Nav, nav Menü, IQ, essen. Dann wählen wir das Menü wird das Mega-Menü gehen, aktualisieren Sie das. Aber genau hier ist es schwarz. Warum ist es schwarz? Lassen Sie uns zuerst zentralisieren. Mitte. Und lassen Sie es so weiße Farbe behalten. Also hier drin ist es zusammengeklappter Menü-Wrapper. Menüpunkt könnte in der Farbe weiß sein. Und wenn Sie überbewerten, müssen wir es so grün sein. Ja. Und wenn wir handeln, wenn es aktiv ist, muss es auch das grüne Update sein, das. Das ist also ein einfacher Ordner. Lassen Sie uns eine Vorschau anzeigen. Mach dir keine Sorgen, dass du es oben und nicht unten siehst. Es liegt daran, dass wir eine Vorschau der Welt ansehen, die wir gerade erschaffen haben. So haben wir eine Vorschau gesehen. Genau hier. Was können wir hinzufügen? Lassen Sie uns vielleicht ein paar Links hinzufügen. Also lassen Sie uns eine Liste hinzufügen. Eine Liste. Und was wir wollen, sind die Symbollisten. Es gibt verschiedene Arten von schön wollen wir das Symbol am wenigsten. Lassen Sie es dort fallen. Wir haben vorab veröffentlichte Artikel, damit wir sie ändern können. Listenartikelnummer 1 könnte Privatsphäre, Privatsphäre sein. Die Seiten M Nummer zwei könnte Buchungen sein, und diese Nummer 32 wäre Mitgliedschaft aktualisieren, dass Kurs, können Sie Links zu jedem Text hinzufügen. Also, für diesen Artikel hier, Ihr Link geht hier. Denken Sie daran, dass Sie immer Link in neuer Registerkarte öffnen können. Lasst uns das zusammenbrechen. Dann lass uns in den Stil gehen. Hier ändern wir das visuelle Aussehen jedes Elements, das wir betrachten. Also für die Symbole wollen wir, dass sie grün sind. Ich habe immer noch diese grünen Rechte. Und für den Mietvertrag, für den Sex, wollten wir White sein. Wie wäre es, wenn ich konstruiere, will, dass sie auf der rechten Seite sind, auf der linken Seite. Gehen wir zur geringsten Ausrichtung. Wir wollen, dass die Ausrichtungen des Mietverhältnisses so auf der rechten Seite liegen. Aktualisiert. Dann lassen Sie uns eine Vorschau anzeigen. Super genial. Wenn wir nun auf die Seite zurückgehen, die wir erstellt haben, bekannt als unsere Landingpage, wird die Fußzeile jetzt dort verfügbar sein. Also lasst uns seine Geburtsumstellung umschalten. Es ist da. Also hier sind wir. Wenn ich diese Seite aktualisiere, Control R oder Command R auf Ihrem Mac. Und dann scrollen wir nach unten. Hier finden Sie die Fußzeile. Aber jetzt beachten Sie, dass es diesen Ordner standardmäßig auch hier gibt. Und dieses Foto kommt standardmäßig mit Astra, wir müssen diese loswerden. Also gehe ich hier rein. Jetzt, da wir die Fußzeile erstellt haben, kann ich Exit to Dashboard beenden, gehen Sie zu Seiten. Und auf der Seite jetzt eine Landingpage, Homepage, gehe ich zu Bearbeiten. Auf der rechten Seite hier. Ich werde alle Gewichte scrollen. Also die Astros-Einstellungen und ändern Sie zu deaktivierten Fußzeile. Also aktualisiere das. Das bedeutet, dass wir dieses Essen, das standardmäßig mit Asteroiden geliefert wird, losgeworden sind. Also, wenn wir das auffrischen, lassen Sie uns den ganzen Weg nach unten scrollen und sehen, ob wir das, äh, richtig losgeworden sind, also jetzt ist es nicht da. Also lassen Sie uns eine Vorschau auf diese Phage, unsere Landingpage, bis zum Ende. Jetzt, da wir diese Seite haben, ist es noch übrig, sie reaktionsschnell zu machen. Aber wie sieht es im Moment aus, bevor wir es reaktionsschnell machen? Schauen wir uns mal an. Beachten Sie also, dass, wenn wir diese Seite aktualisieren, die Navigationsleiste zuerst breit ist. Lass es mich einfach auffrischen. So werden Sie feststellen, dass dieser Teil ist y dreht sich dann zu diesen Farben. Und das liegt daran, dass unsere Navigationsleiste standardmäßig keine Hintergrundfarbe hat. Lassen Sie uns gehen und die Hintergrundfarbe so einstellen, dass sie Frieden ist. Also gehen wir da rein zu unserem Dashboard. Es ist in Elemente gehen, Kopfzeile halten. Lass uns in das Mega-Menü gehen. Und lassen Sie uns gehen, um Inhalte zu bearbeiten. Und ich möchte, dass wir hierher kommen. Seiten sind bereits geöffnet. Also bearbeiten wir die Kopfzeile für die Navigationsleiste. Gehen Sie also zu Schnittstil unter Normal bearbeiten. Lassen Sie uns die Hintergrundfarbe dort stützen. In Ordnung, also wenn wir zurück zum Pik gehen und erfrischend, dann sehen wir uns eine Vorschau an. Wenn dies schwer nachgeladen wird, beachten Sie, was jetzt passiert. Lassen Sie es uns nochmal auffrischen. Siehst du das? Also haben wir das in der Schriftrolle nach unten sortiert und schauen Sie sich unsere Zielseite an. Das sieht super genial aus. So ist unsere Beispiel-Landingpage jetzt fertig. Das nächste, was wir tun wollen, ist es reaktionsschnell oder mobile Tablet und Desktop. Aber bevor wir es reaktionsschnell machen, lassen Sie uns zuerst sehen, wie es im Moment auf dem Handy aussieht. Klicken Sie also hier unten auf dieses Symbol im Responsive-Modus. Schauen Sie sich die Größe des Logos auf dem Mobiltelefon an. Ist nirgendwo in der Nähe von Mobile Reaktionsfähigkeit. Also, was machen wir dagegen? Lasso machen wir als Nächstes? Wir sehen uns auf der anderen Seite. 9. Hilf mir Elementor zu 10.000 Kursteilnehmerinnen und Kursteilnehmerinnen: Hallo mein Freund. Zunächst möchte ich mich nur ganz herzlich dafür bedanken, dass Sie sich mir in diesem Kurs angeschlossen haben und von mir lernen möchten. Und ich möchte auch gratulieren so weit in die Klasse gekommen sind. Die Tatsache, dass Sie so weit in den Unterricht gekommen sind , bedeutet, dass Sie von der Klasse profitieren. Deshalb schätze ich dich sehr und hoffe, dass dir der Unterricht selbst Spaß macht. Davon abgesehen brauche ich deine Hilfe. Ich habe es mir zur Aufgabe gemacht, mindestens 10.000 Unternehmern wie Ihnen beizubringen , elementary zu verwenden , um ihre eigenen Websites oder Zielseiten zu erstellen , um ihre Produkte zu verkaufen. Und so können Sie helfen. Du siehst, wenn ein neuer Schüler einer Klasse auf Skillshare beitritt und diese Klasse dann mag und hinterlasse eine Bewertung. Es hilft anderen Schülern zu wissen, was sie von der Klasse erwarten können. Und wenn eine Klasse viele Bewertungen von Schülern erhält , sagt Skillshare: Hey, weißt du was? Dieser Kurs erhält viel Engagement und viele Kritiken von den Schülern. Es muss also hilfreich sein. Also muss es nützlich sein. Lassen Sie uns es also in der Bibliothek nach oben schieben , damit es für neue Schüler besser auffindbar ist. Der Skillshare-Algorithmus treibt diese Klasse nach oben und macht sie für neue Schüler sichtbarer und besser auffindbar . Weil es positive Bewertungen erhalten hat. Und da kommst du ins Spiel. Bitte begleiten Sie mich bei dieser Mission und helfen Sie mir mindestens 10.000 Schülern beizubringen, wie man Elementor benutzt, wie man schöne Landingpages erstellt, funktionierende Websites, indem man eine Rezension in dieser Klasse hinterließ und sie wissen zu lassen, was sie von diesem Kurs erwarten können. Du brauchst nur etwa zwei Minuten und du bist fertig. Ihre Bewertung wird jedoch dazu beitragen, dass neue Schüler Studieninteressierte wissen, was sie von der Klasse erwarten können. Unterricht entspricht Ihren Erwartungen. Hat es Ihre Erwartungen übertroffen? Wenn Sie Fragen haben, denken Sie daran, dass Sie diese jederzeit im Diskussionsbereich unter diesem Video ablegen können, damit ich Ihnen weiterhelfen kann. Ich antworte immer auf jede einzelne Frage oder jeden Kommentar, den die Schüler in einer meiner Klassen hinterlassen. Und nachdem das gesagt ist, möchte ich nur sagen, viel Spaß beim Unterricht und wir sehen uns in der nächsten Lektion. Frieden! 10. Machen der Seite völlig reaktionsstark: Beginnen wir also mit der Navbar. Dann gehen wir zum Kopfteil, dann zum Körper, dann zur Fußzeile, und wir sind fertig. Also wechseln Sie zu meinem Header. Hier sind wir in der Kopfzeile. Wenn wir es auf dem mobilen Bildschirm anzeigen, sieht es so aus. Direkt auf dem Tablet. Klicken Sie hier, um auf dem Tablet zu sehen. So sieht es auf einem Tablet aus oder mehr. Was ich gerne tun, ist eine separate Navigationsleiste zu erstellen, die nur sichtbar oder Handy und Tablet sein wird. Also, wie machen wir das? Zunächst einmal lassen Sie uns die Navbar duplizieren, die wir bereits haben. Jetzt, wo wir jetzt Summen haben, sehen sie bereits gut aus auf dem Desktop. Daher müssen wir sie nicht anpassen oder besser auf dem Desktop aussehen lassen. Also, weil dies auf dem Desktop bereits gut ist, möchte ich, dass Sie auf dem Desktop sichtbar bleiben, aber er hat nicht auf Handy und Tablet. So bearbeiten Abschnitt gehen Sie zu Erweitert responsive. Und wir wollen uns auf Tablet und Mobiltelefonen verstecken. Wenn Sie also diese Zielseite auf einem Mobiltelefon oder einem Tablet anzeigen, ist das dieses Menü nicht sichtbar. Es ist nur sichtbar, wenn Sie es auf dem Desktop anzeigen. Dann kommen wir zu diesem Abschnitt Bearbeiten. Gehen wir zurück zu fortgeschrittenen Responsive. Diesmal. Dies ist das Menü zu ändern und zu bearbeiten, so dass es auf Handy und Tablet gut aussieht. Wir wollen also nicht, dass es auf dem Desktop sichtbar ist. Wir möchten, dass es nur auf Tablet und Handy sichtbar ist, weil wir es auf Tablet und Handy gut aussehen lassen. Da es jetzt nicht auf dem Desktop sichtbar ist, ist es auf dem Desktop versteckt. So sieht es aus, verwandelt sich in Graustufen. Wenn wir auf Mobiltelefon umdrehen, beachten Sie, dass das obere Menü jetzt Graustufen ist, um zu sagen, dass es auf Mobiltelefon nicht aktiv ist. Dies ist, was Handybenutzer wir sehen werden. Das erste, was wir tun wollen, ist das Logo zu entfernen. Wir brauchen das Logo nicht. Wir brauchen nur diese Speisekarte. Aber es ist schwarz. Wir können es nicht sehen, ich wette, du kannst es jetzt nicht mal sehen. Also lasst uns zuerst seine Farbe ändern. Also wählen Sie das aus. Jetzt bearbeiten wir das Navigationsmenü. Also in Style, gehen Sie zum Hamburger-Stil. Und dann drehen Sie das auf die linke Seite, so. Also die vielen jetzt auf dieser Seite, aber wir müssen seine Farbe ändern. Scrollen Sie also nach unten und suchen Sie nach Hintergrundtyp. Unter Hamburger-Hintergrundtyp ändern wir es in weiß. Oder machen wir es vielleicht so grün. Also, lassen Sie uns das Grün da drin stützen. Jetzt ist es grün. Aber wenn wir schweben, wollen wir es weiß machen. Machen Sie sogar weiß auf Schweben, so. Sagen Sie Update. Schauen wir uns das auf einem Tablet an. So sieht es auf dem Tablet aus. Und schauen wir uns es auf dem Desktop an. Auf dem Desktop wird es ausgeblendet. Und dann erscheint das Desktop-Menü. Wenn wir zum Tablet wechseln, beachten Sie, dass das Logo verschwindet. Also jetzt haben wir das Burger-Menü und das mit dem Logo ist verschwunden, so dass es auf dem Tablet nicht sichtbar ist. Gleicher Fall gilt für Mobilgeräte. Das ist vorgestellten Desktop. Und dann lassen Sie uns eine Vorschau der Seite, an der wir gearbeitet haben, unsere Zielseite. Lasst uns das auffrischen. Und lassen Sie uns eine Vorschau auf Handy. Cif-Änderungen, die ich wirksam habe. Also jetzt haben wir ein Burger-Menü statt der anderen Ming, die das riesige Logo hier oben hatte. Also wird alles wirksam. Und wir können immer das Logo einstellen, das hier oben erscheint, indem wir zu mobilen Menüeinstellungen gehen, mobilen Menü-Logo. Und ich wähle unser Logo wie gewohnt aus, füge Medien ein. Also, wenn Sie es dieses Mal öffnen, hat es das kleine Logo genau dort. Ich glaube, wir sind alle bereit. Unsere Navigationsleiste ist jetzt fertig. Wechseln wir zu unserer Zielseite, um die Änderungen zu sehen, die wir gerade vorgenommen haben. Also wechseln Sie zurück über den Desktop-Modus, und lassen Sie uns das aktualisieren. Ich mag es. Also, richtig, wenn wir ein Mobiltelefon in der Vorschau sehen könnten, hier ist unsere Speisekarte. So jetzt unsere navbar reagiert auf Desktop und Mobile. So scheint es auf dem Tablet, wenn es auf der linken Seite benötigt wird. Also lasst uns zu diesem Ort wechseln. Wechseln Sie, um es hier zu sagen. Und hier. Lassen Sie uns die Seite ändern, in der es sich befindet. Lasst uns diese Seite wechseln. Und Burger-Menü-Stil als verschmutzte Bits dieser Seite aktualisieren. In der Tat, lassen Sie uns diese Spalten hier auf Handy und Desktop loswerden. Oh, das haben wir schon. Ja, also lasst uns das aktualisieren. Und ich vermisse, gehen Sie zurück auf unsere Seite und aktualisieren Sie sie. Steuern Sie R oder Control Command R auf dem Mac. Also, jetzt sehen wir es auf Tablet. Die super cool. Das nächste, was wir tun wollen, ist, mit jedem anderen Inhalt und dem Rest des Körpers zu arbeiten , um sicherzustellen, dass alles zusammenbricht und Füße auf jedem Gerät anschwellen. Beginnen wir also mit allem oder Handy. So werden Sie feststellen, dass Gesundheit geht den ganzen Weg über die Grenzen hinaus, Fitness als auch. Lassen Sie uns also die ganz oben ausgewählte Gesundheit anbieten. Und Sie werden feststellen, dass überall, wo Sie Änderungen an dieser bestimmten Eigenschaft in der mobilen Phase vornehmen können, das mobile Symbol neben dieser bestimmten Eigenschaft. Also, wenn wir in Stil gehen könnten, können wir diese Hilfe und Hayden ihre Hilfe Größe und und sie in die Mitte legen. Lasst uns das für Fitness tun. Fitness. Lass es uns auch in die Mitte legen. Wir könnten einen Teil dieser Polsterung reduzieren. Jetzt reduzieren wir die Marge. Die Spitze. Und unten. Wir könnten dasselbe für die Gesundheit tun. Reduzieren wir den oberen Rand und den unteren Rand, so dass er nah ist. Es verringert seine Größe ein wenig, so dass es fast die gleiche Größe wie Fitnessjahr. Jetzt reduzieren wir das siebte Update dort. Beachten Sie, dass hier hoch über den Punkt hinausgeht, wo F erreicht Lassen Sie uns also die Polsterung auf dieser Beschreibung hier erhöhen. Mit dieser Option ausgewählt. Gehen Sie zu erweiterten Abfragen der Paddy zu 10. Ich mag das, wo die Knöpfe sind, damit wir sie dort lassen können. Also, was wir wollen, ist, diesen Hintergrund zu wählen. Denken Sie daran, dass wir dies als Hintergrundbild hinzugefügt haben, dann haben wir dies als Backbone-Farbe hinzugefügt. Aber wir wollen, dass das hier auf ihren Füßen liegt, wie auf dem Desktop. Also, wie machen wir das? Auswahl Abschnitt bearbeiten kann Einblicke Kachel hier gehen, und wir können ein anderes Bild oder das gleiche Bild hinzufügen. In diesem Fall fügen wir ein gelbes Bild hinzu. Ich möchte diese beiden nur illustrieren. Sie werden in Position eingefügt. Wir wollen, dass es unten steht. Rechte. Also lasst uns die Größe vergrößern, Carson. Und dann fangen wir jetzt an, es manuell so zu erhöhen. Lassen Sie es uns reduzieren. Punkt der Daten. Gehen wir zurück nach oben, jetzt haben wir den ganzen Platz übrig. Wir können alles nach oben schieben und wir können das tun, indem wir Abschnitt bearbeiten, Abschnitt Bearbeiten Erweitert. Und dann lassen Sie uns alles dort abgrenzen. Und Sie werden feststellen, dass alles sich nach oben zurückgesetzt hat , so dass wir jetzt anfangen können, unser Patty hinzuzufügen. Also lasst uns die Polsterung oben rechts dort erhöhen. So wie das. Aktualisiert. Also in diesem Fall habe ich gerade dieses gelbe Hintergrundbild hinzugefügt, um Ihnen zu veranschaulichen, dass Sie verschiedene Bilder haben können, um auf verschiedenen Geräten zu zeigen. Wenn wir also in den Desktop-Modus wechseln, wird es zu grün wechseln. Wenn wir auf das Mobiltelefon wechseln, wird es gelb. Mal sehen, wie es auf dem Tablet aussieht. Wir können auch eine andere für die Tabletten haben, also kommen wir dazu. Zuerst haben wir es mit einem Mobiltelefon zu tun. Nun, eine andere Sache, die Sie bemerken werden, ist, dass dieses Burger-Menü hier nicht richtig auf diese Texte ausgerichtet ist. Wir müssen es ein wenig nach innen und nach unten drücken, um die Pik auszugleichen. Also, wie machen wir das? Wir gehen zurück auf das Menü selbst und wählen es irgendwo in diesem kleinen blauen Kasten, dass es nav Menü. Wechseln Sie zu Erweitert. Und dann die Verbindung, die Marge erhöht die linke um 20. Sagen wir jetzt 10. Sagen wir, ja, 10 ist okay. Und Top 10. Lasst uns das aktualisieren. Alles klar, Gehen wir zurück zu dieser Seite und aktualisieren sie. Also im Grunde wechseln wir zwischen verschiedenen Bearbeitungsseiten. Ich hoffe, das ist nicht zu verwirrend für dich, wenn du ein Anfänger bist. So ist unsere Burger-Speisekarte jetzt wenigstens ein bisschen zur Seite und sieht etwas ausgeglichener aus, nicht wahr? Lasst uns weitermachen. Lassen Sie uns nach unten rufen und sehen, ob es etwas gibt, das unsere Aufmerksamkeit braucht. Ich denke, das ist zu viel Abstand, also wählen Sie diesen Raum und entsprechend angepasst, wir brauchen nur ein bisschen mehr Platz wie dort. Scrollen Sie nach unten Sie werden feststellen, dass diese Spalte direkt hier die Kanten, die Ränder berührt , und wir wollen es nicht. Klicken Sie also auf das Erweiterte. Und dann Marge. Erhöhen wir die Marge auf vielleicht zehn. Ja. Lassen Sie uns den Abstand hier verringern. Welcher Abstandsgrad? Erstellen 24, Machen wir es 25. Das bedeutet, dass man Uniform bleibt, würde es 25 durchmachen. Wie wo die Meere. Gehen wir zurück und sehen. Klemmen Sie den Text dort ab. Und lasst uns zum Fortgeschrittenen gehen. Die Polsterung war 10. Also wollen wir das einheitliche Auffüllen für beschreibende Texte wie die beibehalten , so dass dies 10 sein wird. Also innerhalb dieses Typs 10, so dass es nicht zu nah an den Rändern ist. Also der Abstand hier, 25 für die Spalte, es hat die Ränder erhöht. Sollen wir das reduzieren? Ja, lassen Sie uns die Größe dieser Titel reduzieren. Das Labor, das sie nach Vk aussahen, holen Sie es jetzt. Es ist dort reduziert, hol es jetzt. So ist die Größe jetzt 44 Pixel, so dass ich den Stil kopieren kann. Also mit der rechten Maustaste. Kopieren Sie überall dort, wo es eine Überschrift wie diese gibt, ich kann den Stil einfügen, so dass ich ihn kopiert habe. Zu Recht. - Kaffee. Wenn ich hierher gehe, ist das ähnlich. Und mit der rechten Maustaste, ich kann den Stil einfügen, das bedeutet die Größe, die Farbe und alles. So fügt Stil fügt es die Größe auf die gleiche Größe wie die andere ein. Wir haben noch einen, der so aussieht. Nein. Nein, das tun wir nicht. Also gehen wir hin. Neue Routine hier, sieht zu groß aus. Lassen Sie es uns reduzieren. Und du Routine. Aktualisieren Sie das. Dann denken Sie hier daran, dass beschreibende Texte eine Polsterung von 10 haben können. Lasst uns das aktualisieren. Wir können diesen neuen Routinenstil auch kopieren, kopieren und hier einfügen. Stil einfügen Mal sehen, ob wir das weiter reduzieren könnten, denn es sieht dort ein bisschen rechts aus. Ja. Wir werden einfach rennen, um etwas zu haben, das optisch ansprechend ist. Alles ist in Sichtweite und es ist leicht zu lesen, während jemand diese konsumiert, wenn sie nach unten scrollen. Sie werden also feststellen, dass das Logo auf dem Ordner zu groß ist, daher müssen wir auch seine Größe reduzieren. Was wir also tun müssen, ist in die Fußzeile zu gehen. Das war also im Mega-Footer-Bereich. Also müssen wir wieder ins Armaturenbrett gehen. Elemente hält Kopfzeilen Fußzeile. Sie können einfach mit Elementor bearbeiten. Stimmt, also, so machen Sie die Fußzeile reaktionsschnell. Wir müssen auch drinnen und bearbeiten, und jetzt sind wir drinnen. Also lassen Sie uns es auf Handy sehen. Und so sieht es aus. Wenn wir also können, wenn wir auf die Zielseite selbst wechseln, sind wir hier. So sieht es aus. So sieht es auf der Zielseite aus. 11. Responsive Footer: Warum machen wir nicht dasselbe, was wir jetzt für den Header getan haben, und duplizieren den Ordner, so dass wir eine Fußzeile für die mobilen Geräte und eine andere für den Desktop haben. Das sieht also bereits auf dem Desktop gut aus. Lassen Sie uns Abschnitt bearbeiten, die fortgeschritten und reaktionsschnell. Wir wollen, dass es auf dem Desktop sichtbar ist, aber auf Tablet und Mobiltelefon verstecken, oder richtig? Dann duplizieren wir es. Und auf diesem zweiten wird man sagen, Abschnitt bearbeiten. Und dann in fortgeschrittener Responsive wollen wir, dass das zweite Foto auf dem Desktop versteckt wird. Wir wollen nicht, dass es auf dem Desktop sichtbar ist, weil wir es auf Tablet und Handy schön machen werden . Dies wird also für Tablet und Handy erstellt, und dies ist für den Desktop. Wenn wir also zu Handy und Tablet wechseln, wird der Desktop Graustufen, und jetzt können wir diesen bearbeiten. Lassen Sie uns das Handy-Logo loswerden. Das brauchen wir nicht. Brauche diese Säule nicht auch. Jetzt sind wir mit diesen nackten Knochen übrig. Lasst uns das Menü loswerden. Aber wir können das am wenigsten zentralisieren. Es ist eine Linie in der Mitte. Lasst uns das aktualisieren. Werfen wir einen Blick auf das Tablet. So sieht es auf dem Tablet aus. Es C sind auf dem Tablet. Wir können es ändern, um zu sagen, schauen, es ist gut, Layout, während Abschnitt bearbeiten, die aktive Layoutstruktur hat. Ich wollte diese Struktur haben, die aktualisiert wird. Also auf dem Handy, so sieht es aus. Und dann auf dem Desktop wird dies versteckt und das wird sichtbar. Also lasst uns zum Desktop wechseln. Und jetzt ist das Wärme und das ist, was vernünftig wäre, um Ihren Desktop zu verwenden. Wechseln wir also zu unserer Seite, unserer Zielseite, und aktualisieren Sie sie, um zu sehen, ob diese Änderungen in unserer Fußzeile wirksam geworden sind. Ich mag, was ich sehe, aber jetzt, wenn wir es im Responsive-Modus betrachten und den ganzen Weg nach unten scrollen. Jetzt sieht die Fußzeile gut aus. Reduzieren wir den Abstand auf 30. Aktualisieren Sie ihren oberen See, wie es sich herausstellt. Also lassen Sie uns es auf dem Tablet sehen. So wird es im Tablet-Modus aussehen. Wir müssen uns auch entsprechend anpassen. Lassen Sie uns also die Gesundheit und das Leben reduzieren . Lassen Sie uns auch die Fitness reduzieren. Ich habe das Gefühl, dass wir den Abstand hier reduzieren müssen. Also lassen Sie uns Abschnitt bearbeiten. Kann das auch von Control I herausziehen und dann diesen Abschnitt bearbeiten. Also dieser Abschnitt. Lassen Sie uns also die Polsterung und den Rand reduzieren. Lassen Sie uns die reduzieren. Sie werden das Gleiche bemerken, wie hier zu haben. Nachdem Sie die Polsterung abgegrenzt haben, ist alles auf die Standard-Polsterung gegangen, so dass wir alles von Grund auf neu einstellen können. Also lasst uns die Polsterung genau dort erhöhen. Und lassen Sie uns das erhöhen. Sprich es links. Machen wir es zehn. 10. Lassen Sie uns das hier ein 70, 19 Minuten Update machen. Das sieht viel besser aus, oder? Also hier ist unsere Speisekarte. Lass uns das schließen. Scrollt von meinem E-Book weg . Du solltest also bei meinem E-Book sein oder richtig? Also denken Sie daran, wir können diese beschreibenden Texte auffüllen direkt dort auf der linken Seite, indem wir versuchen, das loszuwerden. Eigentlich, 10, sagen wir fünf. Lassen Sie uns diese Säule ein wenig von der Kante wegschieben. Also tun wir das, indem wir es auswählen. Dann, wenn der Rand links ist, wird das um zehn erhöht. Also lassen Sie uns dieses Styling kopieren. Kopieren Sie das. Lassen Sie uns Stil direkt dort einfügen. Das sind also unsere Fotoprotokolle auf Tablets, also müssen wir diese reduzieren. Ich denke, ich möchte, dass es rechts ausgerichtet ist, anstatt links auszurichten. Also hier drinnen, gehen wir genau dorthin. Wir wollen, dass diese so ausgerichtet bleiben. Und dann wollen wir das genau dort erhöhen. Dies muss auch links ausgerichtet werden. Lassen Sie uns die Marge direkt dort erhöhen und erhöhen Sie die Größe. Typografie ist die Größe, das Richtige für mich. Lassen Sie mir das besser gefallen. Wechseln wir also zu unserer Zielseite und aktualisieren Sie sie. In Ordnung, lassen Sie uns eine Vorschau auf dem Tablet. Lassen Sie uns nach unten scrollen und sehen, wie unser Foto aussieht. Wählen Sie unsere Fußzeile sieht besser aus, aber jetzt müssen wir diese Liste ein wenig nach innen schieben , so dass der Abstand fast der gleiche ist wie die Seele. Wechseln Sie in die Mega-Fußzeile. Wählen Sie diese Spalte direkt hier aus. Oder wählen wir die Liste selbst aus. Ein riesiges. Der Link, dass ich auf der rechten Seite bin, Es ist n, sagen wir 20. Aktualisieren Sie das. Wenn wir also auf die Landing Page wechseln und sie erneut aktualisieren könnten. Scrollen wir nach unten und werfen einen Blick darauf. Aber wir wollen es auf Tablet sehen. Perfekt. Ich mag es so. Natürlich, wenn Sie mehr Zeit gegeben haben, ziemlich sicher, dass Sie sich etwas einfallen lassen können, das erstaunlich aussieht. Das ist Staub für uns, um die Konzepte hinter Responsive Design verstehen zu können. Was sind die Werkzeuge von Elementor? Und was ist die Flexibilität, die Sie als elementarer Benutzer haben , um responsive Designs zu erstellen. Also lassen Sie uns Abschnitt direkt hier bearbeiten. Und ich möchte das nach unten drücken, damit es unter ihren Beinen ist. So unter Stil. Lassen Sie uns das zusammenfassen, machen wir es das gelbe ist, na ja, ich weiß, das Gelb sieht seltsam auf diesem Grün aus. Aber das ist nur, um zu veranschaulichen, dass Sie verschiedene Bilder für die verschiedenen Bildschirmgrößen haben können . Denken Sie daran, auf dem Desktop, wir haben grün. Jetzt haben wir Gelb. Lasst uns erhöhen. Lassen Sie uns zunächst zu diesem Standard an die Position gehen und sagen unten, rechts. Dann lassen Sie uns die Größe Kunden direkt dort zu erhöhen. Und sagen wir, erhöht, so aktualisiert. Also, wenn Sie jetzt zum Desktop-Modus suchen, ist es grün. Auf Tablet, CLo oder Mobiltelefon. Es kann rot sein oder es kann das gleiche, gleiche Bild mittlerweile erstellt, um perfekt für Mobiltelefon zu sein. Denn denken Sie daran, ein Bild könnte auf mobiler Form großartig aussehen, aber nicht genial auf weniger Doc-Modus. Diese Fitness soll grün sein. Lass es uns so grün machen. Lass uns die Creme holen. Kopieren Sie das. Lassen Sie uns das in Grün ändern. Wenn Sie die Farbe in einem beliebigen Modus, Desktop, Tablet oder Mobiltelefon ändern , treten die Änderungen in den verschiedenen Größen auf. Eine andere Sache, die Sie wissen müssen, ist, dass bewegliche Elemente herum, wie die Bewegung von Gesundheit von vor Fitness zu nach Fitness wie diese. Während der mobile Modus oder Tablet-Modus bewegt sich das Gleiche überall auf allen anderen Modi. Das sind also globale Veränderungen, die du machst. Das Verschieben von Elementen ist global. Also da haben wir es Jungs. Eine voll funktionsfähige WordPress-Webseite baut mit Elementor und es ist voll reaktionsschnell oder mobil, Desktop und Tablet. Sie können dieselben Prinzipien und Konzepte verwenden, um jede Webseite zu erstellen , die Sie mit einer Webseite erstellen möchten, die Menschen gerne auf ihren verteidigen Geräten besuchen werden. 12. Letzte Gedanken: Ich hoffe, Sie fanden das hilfreich. Mein Name ist Ken best sum, ich bin wirklich neugierig zu sehen, was Sie sich einfallen werden. Lassen Sie uns sehen, die Landing Pages werden in der Lage sein, als eine Klasse zu erstellen und zu sehen, wie wir einander helfen können. Sonst rede ich nächstes Mal mit dir. Kommt weiter zurück, um zu sehen, ob ich eine neue Klasse habe und ich euch alle liebe. Frieden.