Elementor-Kurs für Einsteiger – Erfahrung sammeln durch den Entwurf von Lyft’s Landing-Page

1. Einführung: Willkommen zurück zu einer anderen fantastischen Elementar-Klasse mit mir kann versa. Es ist immer ein Vergnügen, Sie hier zu haben. Wenn Sie ein Anfänger sind, zeige ich Ihnen die verschiedenen Werkzeuge und Funktionen von Elementor und werde das nicht nur als Überblick betrachten, wir entwerfen reale Projekte, werden die Landingpages bestehender weltberühmter Marken. Und in dieser ersten Klasse wird mit Blatt beginnen. Wenn du kein Blatt besitzt. Leaf ist ein Unternehmen, das so ziemlich wie Uber oder Boot ist. Sie beschäftigen sich mit Rechten und Ride-Sharing und all dem. Sie haben eine App. Sie haben also diese sehr tolle Landing Page, die wir in einem kurzen Moment betrachten werden. Und dann werden wir diese Landing Pages in Elementor entwerfen. Wir werden uns die Unzulänglichkeiten von Elementor ansehen und auf Stärke schauen. Und bis wir fertig sind, werden Sie verstanden haben, wie Sie ständig die tolle Landingpage selbst finden können. Wenn Sie also das Gefühl haben, dass Sie lernen möchten, wie Sie bessere Landing Pages für Ihre Website oder Ihre Kunden erstellen können. Begleiten Sie mich in dieser Klasse und ich verspreche Ihnen, dass die nächsten zwei Stunden für Sie erfüllt werden, oder vor allem, wird für Ihre Zukunft von Vorteil sein. Also schlüpfen Sie mit mir zusammen. 2. Die Landingpage, die wir entwerfen: Also hier sind wir auf der leaf.com Landing Page. Das ist es, was heute versuchen wird, zu entwerfen. Wenn wir also einfach nach unten scrollen und sehen könnten, was wir für uns bereithalten. Los geht's. Wenn wir also entwerfen, wird dies versuchen zu verstehen, wie man die Werkzeuge und Funktionen von Elementor verwendet , um eine moderne funktionierende Landing Page zu erstellen , die Besucher in Kunden umwandeln kann. Also, ohne mehr Zeit zu verschwenden, lasst uns loslegen. 3. Schnelle Aktualisierung Der neue Elementor: Willkommen zurück. Diese Lektion ist nun eine kurze Randnotiz oder eine kurze Aktualisierung des Elementor-Installationsprozesses. Wenn Sie an diesem Kurs im Mai 2022 und darüber hinaus teilnehmen, 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 , der aus mehreren Schritten besteht, die Sie ausführen müssen, um die grundlegenden Teile von deine Webseite. Während ich diese Klasse vor einigen Monaten erstellt habe, hatte Elementor diesen Setup-Assistenten nicht. Also möchte ich nur, dass wir den Setup-Assistenten durchgehen. Aber alles andere, was du in diesem Kurs lernst , ä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. So können wir Elementor hinzufügen und diesen Prozess durchlaufen. Ich suche jetzt nach Elementor-Installation. Und jetzt, wenn ich auf Aktivieren klicke werde ich zu diesem Setup-Assistenten weitergeleitet. Und wir können es zusammen durchstehen. Also hier sind wir. Ich zoome nur ein bisschen heraus damit wir mehr Details sehen können. In Ordnung, jetzt werden Sie feststellen dass das erste, was Elemental von uns verlangt ist, ein Konto zu erstellen, um das Beste aus Elementor herauszuholen. Dies sind also einige der Vorteile, die sich aus der Anmeldung für ein Konto bei Elementor ergeben. Aber die Sache ist, dass du kein Konto bei Elementor haben musst , um Elementor nutzen zu können. Also überspringe ich diesen Teil einfach. Der zweite Schritt besteht darin, das heilige Thema, das Elementor für uns gemacht hat, zu akzeptieren und fortzusetzen . Dies wurde von Elementor erstellt, aber wir verwenden das Astra-Thema, also überspringen wir einfach. Astra ist ein mächtigeres Thema. Der dritte Schritt besteht darin, unserer Website einen Namen zu geben. Während du dein WordPress installiert hast. 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 möchten. Meine Website, und dann klicken wir 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 sie aus der Medienbibliothek auswählen oder von Ihrem Computer hochladen. Aber das werden wir jetzt nicht tun. Also behalte ich diesen Schritt einfach bei. 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 bei dem wir zwei Möglichkeiten haben. dem Elementor-Editor können wir unsere Homepage von einer leeren Leinwand aus bearbeiten Mit dem Elementor-Editor können wir unsere Homepage von einer leeren Leinwand aus bearbeiten. Oder wir können in Hunderten von Vorlagen stöbern oder unsere eigenen Vorlagen importieren, wenn wir sie haben. Aber ich mache weiter und überspringe. Das. Wird auf die Leinwand umgeleitet, wo wir jetzt mit dem Aufbau einer Website beginnen können. Und los geht's. Also im Grunde war 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 zum Erstellen einer Landingpage bleibt immer noch derselbe. Also, ohne weitere Zeit zu verschwenden, fahren wir mit der nächsten Lektion fort. Ich gehe zu diesem Burger-Menü und klicke auf Exit to Dashboard. Verlassen wir diese Seite. Jetzt befinden wir uns im Dashboard und können mit dem Aufbau der Website beginnen. 4. Installation der Plugins: Das erste, was wir tun müssen, ist die Plugins zu installieren, die wir verwenden werden. Also werden wir fortfahren und alle auf einmal installieren und aktivieren. Und während wir die Zielseite entwerfen, erhalten Sie zu verstehen, wo jedes Plugin verwendet wird. Gehen wir also zu Plugins, Add New, und lassen Sie uns nach Elementor suchen. Installieren wir es. Und während wir dabei sind, lassen Sie uns im Install Elementor Header und Footer Builder nach unten gehen. Wir müssen auch nach einem anderen Plugin namens Formulierer suchen. Diese anderen werden im Hintergrund installiert. Also lassen Sie uns nach Formulierer suchen. Dies wird es uns ermöglichen, diese winzige Form direkt hier zu schaffen. Also lasst es uns installieren. Und ich habe eine Forschungsbibliothekssuche. Und das wird es uns ermöglichen, eine Suchleiste oben und überall sonst zu erstellen , die eine Suchleiste benötigen. Sobald das erledigt ist, lassen Sie uns in installierte Plugins gehen und sie alle aktivieren. Bestätigen Sie einfach, dass Sie alle haben und wählen Sie, Aktivieren aus dem Dropdown-Menü, dann anwenden. Alles klar, also sind alle unsere Plugins jetzt installiert und aktiviert. 5. Das Thema installieren: Nur für den Fall, dass Sie das aktuell installierte Thema ändern möchten. Dies ist die Zeit, das zu tun. Und natürlich möchte ich nicht das Thema verwenden, das standardmäßig mit einer neuen WordPress-Installation kommt , die für meinen Fall 2021 ist. Es ist das aktuelle Thema. Ich möchte Neu hinzufügen, und ich werde nach Astro suchen. Dies ist eines meiner Lieblingsthemen, weil es ein Mehrzweck-Thema , das Sie für viele verschiedene Arten von Unternehmen verwenden können. Online-Shops, persönliche Blogs, Sie nennen es. Astro ist ein super awesome Thema, das ich Ihnen empfehlen, wenn Sie eine schöne Mehrzweck-Theme, die Sie für Ihre WordPress-Projekte verwenden können wollen. Also werde ich es installieren. Lass es uns aktivieren. Ehrfürchtig. Also, jetzt schließen wir das einfach ab. Im Moment ist unser aktives Thema Astro. 6. Die Navigation: Gehen wir nun zum allerersten, was und erstellen Sie die obere Navbar. Also gehen wir in Aussehen, Elementor, Kopf- und Fußzeilengenerator. Also lassen Sie uns voran und fügen Sie neue hinzu. Geben wir ihm einen Namen. Jetzt bar zum Beispiel. Und lassen Sie uns auf Veröffentlichen drücken. Also jetzt für den Typ der Vorlage, es ist ein Header. Wählen Sie also Kopfzeile, Anzeige auf der gesamten Website. Wer sollte es sehen? Alle. Personen, die Ihre Website besuchen. Und lasst uns das aktualisieren. Und genau hier auf der rechten Seite haben wir ein paar Einstellungen, die mit Astra kommen. Wählen Sie in der Seitenleiste keine Seitenleiste aus. Und in voller Breite gestreckt. Ich deaktiviere die primäre Kopfzeile, deaktiviere mobile Kopf- , Titel- und Fußzeile und drücke Update. Jetzt, da wir es im Backend eingerichtet haben, lassen Sie uns gehen und es visuell im Front-End mit Elementor gestalten. Klicken Sie also auf das wird zum Front-End weitergeleitet, wo wir jetzt anfangen können, dies zu bauen. Also hier sind wir. Wenn Sie neu bei Elementor sind, müssen Sie in Bezug auf Spalten denken. Und diese Navbar hat drei Spalten. Es gibt eine Spalte, die diese Navigationsleiste enthält, und eine andere Spalte enthält die Suchleiste, und eine andere enthält dieses Logo. Genau hier haben wir zwei Spalten, eine, die diesen Bereich und eine, die die Bilder enthält. Und du wirst sehen, oh, das, wenn wir runtergehen. Also die Sache hier ist, dass wir eine dreifache Spalte hinzufügen müssen. Wählen Sie eine Anzeige, die dreifacher Spalte Abschnitt. 7. Das Logo hinzufügen: Und an diesem Ende reduzieren wir diese Größe ein wenig und fügen wir ein Bildelement hinzu. Das ist, wohin das Logo gehen wird. So fügen Sie ein Logo hinzu. Und beachten Sie, dass, sobald Sie diese Option auswählen, wird diese Option Bild bearbeiten angezeigt. Wenn Sie diese Option auswählen, wird der Abschnitt bearbeitet. Was auch immer aktive Elemente, die Sie hier ausgewählt haben, ist derjenige, an dem Sie Änderungen vornehmen können. Wenn Sie also wissen möchten, was gerade ausgewählt ist, schauen Sie sich das an. Gehen Sie also voran und klicken Sie darauf und laden Sie ein Logo-Bild hoch. Und ich werde diesen Ordner hier zur Verfügung stellen. Ich habe einen Ordner vorbereitet, der alle Bilder enthält, die ich in dieser Klasse verwendet habe. Wenn Sie also folgen möchten, können Sie diesen ZIP-Ordner herunterladen, alle Bilder extrahieren und sie verwenden. Also hier ist unser Logo. Ich werde einfach voran gehen und in der Tat, ich werde alle diese Bilder hochladen, weil Sie sie brauchen werden. Aber ich gehe weiter und schnappe das Logo, weil es bereits geladen und dort eingefügt ist. 8. Eine Suchleiste hinzufügen: Das nächste, was wir tun müssen, ist, diese Suchleiste hier hinzuzufügen. Und die Art und Weise, es hinzuzufügen, weil wir die Elfenbein-Suchverzögerung verwenden, die wir gerade installiert haben. Was wir tun müssen, ist hier einen kurzen Code hinzuzufügen und ihn dort zu platzieren. Und wir werden gehen und uns den kurzen Code aus dem Plugin holen. Also müssen wir zum Backend gehen. Aber bevor wir das tun, lasst uns hier bewerben. Alles klar, und aktualisieren Sie dann die Seite. Also, an dieser Stelle, was ich tun will, ist eine neue Registerkarte zu öffnen und ich werde einfach schnell diesen Abschnitt direkt hier greifen. Gehen wir zum Armaturenbrett. Kopieren Sie das. Wechseln Sie zum Dashboard. Und ich möchte direkt in Elfenbein gehen, damit wir unsere Suchleiste erstellen können. Also lasst uns das behalten. Wenn wir nun wieder eine Bibliothekssuche öffnen, wählen wir diesen kurzen Code aus, kopieren ihn, wechseln Sie die andere Registerkarte, klicken Sie auf den kurzen Code-Halter, und fügen Sie hier den kurzen Code ein, dann wenden Sie ihn an. Sie bemerken, dass es bereits erscheint. Aber natürlich braucht es noch etwas zusätzliches Styling und wir kümmern uns darum, also mach dir keine Sorgen. Also wechseln Sie zurück zu den Einstellungen hier. Unser Ziel ist es im Moment, im Grunde zu versuchen, Stylet so ähnlich zu aussehen, aber es wird eine grundlegende Suchleiste sein. Wenn Sie lernen möchten, wie Sie mit Suchleisten in der Tiefe arbeiten, können Sie nach Videos und Tutorials in WordPress-Suchleisten suchen. Und wenn ich schnell auf die ursprüngliche Aufzüge Landing Page wechseln könnte, ist unser Ziel, diese Suchleiste zu imitieren, diese Gliederung hier auf unserer Seite. Hier werden Sie feststellen, dass wir verschiedene Spalten mit Einstellungen haben. Dies sind die Haupteinstellungen hier. Und wenn Sie alle ausgefüllten hier erweitern, wird es auf diesen Bereich erweitert. Im Moment ist es also die Suchkonfiguration, die wir hier sehen können. So können wir die Post-Typen konfigurieren, die wir wollen. Und der gleiche Fall gilt für den Rest all dieser Felder. Wenn wir also hier rüber wechseln könnten, haben wir diesen Code hier eingefügt, damit ich Ihnen zeigen kann, wie wir diesen Kurzcode verwenden werden. Aber lassen Sie mich das löschen und lassen Sie uns hier wieder rein und fügen Sie ein neues Suchformular hinzu. Dies war die Standardeinstellung für, aber wir möchten ein Formular erstellen, das wir auf unserer Seite verwenden werden. Also nennen wir es mein Suchformular. Lasst es uns retten. In Ordnung, also möchte ich nicht tiefer in die Ergebnisse eingehen, die das Suchformular zeigt und all das. Aber was mich interessiert, ist, dass es ähnlich aussieht. Unser Interessengebiet ist also vorerst die Registerkarte Design. Und Sie werden feststellen, dass wir dieses Suchformular Customizer haben. Klicken Sie einfach darauf, um die Anpassung Ihres Suchformulars zu aktivieren. Wenn wir klicken, wird es auf den WordPress-Customizer umgeleitet werden. Und los geht's. Also hier können wir Formularstil wählen. Momentan hat es diese Schaltflächen, aber wir brauchen diese nicht. So können wir wählen, dass und veröffentlichen oder Gewicht. Also im Moment wird das Formular nicht angezeigt, weil denken Sie daran, dass wir den Kurzcode entfernt haben und wir den Kurzcode des neuen Formulars, das wir gerade erstellt haben, greifen müssen. Also lassen Sie uns das schnell duplizieren. Und in dieser Registerkarte, Gehen wir zurück. Und lasst uns dieses Formular schnappen. Kopieren Sie das. Und lasst uns wieder hier reingehen. Hier rein und kleben Sie das da rein. Aktualisierungen. Sie werden also feststellen, dass es bereits die Form angenommen hat, die wir für diesen Customizer ausgewählt haben. Es nimmt also schon Gestalt an. Wenden wir das an. In Ordnung, also haben wir wenigstens etwas, mit dem wir arbeiten können. Für den Moment. Ich möchte, dass wir das Menü hinzufügen. Dann können wir die ganze Navigationsleiste auf einmal stylen. 9. Das nav: Lassen Sie uns ein Menü hinzufügen. Und die Möglichkeit, ein Menü hinzuzufügen, ist zunächst einmal, gehen wir zurück zum Dashboard. Und hier drin, was wir tun müssen, ist ein paar Seiten zu erstellen. Moment haben wir die Standard-Seiten, die mit einer neuen Installation von WordPress kommen, so werde ich sie alle löschen. Bewegen Sie sich in den Papierkorb. Wenden Sie das an. Und wechseln wir für einen Moment zur Blatt-Website. Und Sie werden feststellen, dass wir Fahrer, Schriftsteller, Geschäfts-Login haben , registrieren Sie sich fünf Elemente. Das ist also im Grunde das, was wir tun, wenn wir die Seiten erstellen, denn das sind Webseiten. Wenn Sie darauf klicken, werden Sie zu der Seite weitergeleitet, die Informationen über Autoren enthält, wenn Sie Schriftsteller sein möchten. Lassen Sie uns also etwa fünf Seiten erstellen. Also werde ich sagen „Neu hinzufügen“. Also Fahrer, also Fahrer. Und auf der rechten Seite hier, erinnere dich an die Astros-Einstellungen. In diesem Abschnitt hier wollen wir den Titel Mobile Header und deaktiviert primäre Kopfzeile und die Fußzeile deaktivieren . Und wir wollen sicherstellen, dass das voll ist, die gestreckt und keine Sidebar. Dann für die Vorlage unten Seite Attribute sagte, es ist Elementor volle Breite und Veröffentlichung. Also wiederholen wir den gleichen Prozess für alle anderen. Gehe zurück, füge neue hinzu. Jetzt schnell vorwärts, und erstellen Sie den Rest. Also tun Sie das Gleiche. Jetzt, da wir fünf Menüpunkte haben, ist das nächste, was wir tun müssen, das eigentliche Menü zu erstellen. Und wir tun das, indem wir in Erscheinung Menüs gehen. Und Sie werden genau hier feststellen, dass unten Menüs, wir haben Ihr erstes Menü unten erstellen, so können wir ein Menü und Kollegen, mein Top-Menü erstellen. Lassen Sie uns ein Menü erstellen oder mitfahren. Danach werden diese Elemente aktiv und das sind die Seiten, die wir gerade erstellt haben. Wählen Sie also alle aus und fügen Sie sie dem Menü hinzu. Diese Speisekarte, genial. Also lasst uns sie entsprechend neu anordnen. Also Driver Writer Business Login Anmeldung, Fahrer Autor, Business Login, registrieren, und lassen Sie uns es unser primäres Menü. Ich werde das retten. Jetzt sind wir eingestellt und wir sind bereit, zum Front-End zu gehen und fügen Sie dieses Menü, das alle diese Menüpunkte direkt hier enthält. Also klicken Sie dort, lassen Sie uns nach nav suchen. Und Sie werden feststellen, dass wir Verteidigungsnavigationsmenüs haben. Wir sind an diesem interessiert, der FB für Elementor Header Footer Builder hassen hat. Ziehen wir es dort hinein und Sie werden feststellen, dass die Menüelemente bereits angezeigt werden. Jetzt aktualisiere ich meine Zielseite, nachdem ich dieses Menüelement hier hinzugefügt habe. Deshalb sieht dieser Bereich ein bisschen anders aus. Wenn Sie also hier eine blaue Benachrichtigung sehen, dass Sie keine Menüs haben, aktualisieren Sie die Seite, damit dieses Menü direkt hier angezeigt wird. Und wenn Sie mehrere Menüs haben, die Sie hier erstellt haben, werden sie hier in diesem Dropdown-Menü angezeigt und Sie können es auswählen, und je nachdem, was Sie wählen, wird hier angezeigt. Also lassen Sie uns jetzt sagen, dass das Menü so aussehen soll. Wenn Sie den Mauszeiger über Elemente hier sehen Sie, dass sie violett werden. Also lasst uns das machen. Wenn Sie also ihr Menüelement auswählen, wird es hier aktiv, kann ich innerhalb von Stilen gehen. Unter dem Hauptmenü. Wir haben Topographie, und hier können wir die Schriftart und alles ändern. Und was wir jetzt tun wollen, ist, die Schwebefarbe in das Lila zu ändern , das wir gerade gesehen haben. Geben wir ihm einfach ein helles Violett. Ja, ich glaube, das gefällt mir. Ich kopiere das. Und lassen Sie uns auch sicherstellen, dass, wenn der Link aktiv ist und die gleiche lila Farbe hat. Lasst uns weitermachen und es aktualisieren. Und lassen Sie uns eine Vorschau auf die Änderungen. Jetzt weiß ich, dass Sie sich fragen, wie wäre es mit diesen vertikalen Linien hier und dieser horizontalen Linie hier, wo ist sie? Und das liegt daran, dass alles hier drin in diesem einzigen Element ist. 10. Der Abschnitt: Und wie ich bereits erwähnt habe, als wir mit dem Entwerfen der Navbar begonnen haben, fällt alles innerhalb dieser Seite in einen Abschnitt. Und jeder Abschnitt hat Spalten, mindestens eine Spalte. Wie Sie sehen können, hat dieser Bereich zwei Spalten. Die Website, die Bilder und die Website, die die Schaltflächen im Text enthält, und umgekehrt genau hier. Also springen Sie zu unserer Elementor Editor-Seite. Zuerst werde ich die Änderungen aktualisieren, die wir gerade vorgenommen haben, weil wir die Arbeit am Napa vorerst beendet haben. Wir werden immer noch einen letzten Schliff machen. Ich möchte es schließen, indem ich dort auf diese Schaltfläche klicke und zum Dashboard beenden klicke. Dann wollen wir auf Seiten gehen. Und wir wählen eine der Seiten aus, um unsere Zielseite zu sein. Also lasst uns mit der Business-Seite gehen. Also werde ich Edit sagen. Und weil wir hier alles für den Anfang eingerichtet haben, müssen wir mit Elementor bearbeiten denn im Moment bauen wir alles optisch auf. Sie werden also feststellen, dass wir die Navigationsleiste haben, aber dieses Mal ist es nicht bearbeitbar oder klickbar. Und weil wir nicht im Navigationsleisten-Editor sind, sind wir im Seiteneditor. Das erste, was wir tun wollen, ist, diese beiden Spalten zu erstellen. Und hier, auf dieser rechten Seite, müssen wir zwei Bilder haben. Also können wir sie einfach zusammenstapeln lassen. Um ein Bild darunter hinzuzufügen, gehe ich hier zu diesem Menü und füge ein Bild hinzu, ziehe es und lege es ab, wenn diese blaue Linie hier erscheint. Jetzt haben wir zwei Bilder zusammengestapelt, aber in Kürze werden wir sie so überlappen. Auf dieser anderen Seite wollen wir einige dieser Texte hinzufügen. Und ich werde diesen Text einfach direkt so kopieren, wie er ist. Denn das ist nur für pädagogische Zwecke. Du kannst nicht die Website von jemandem einfach so kopieren. Also geh ich weiter und schnappe mir das. Eine Steuer da, Kopie. Und hier werde ich auf das Pluszeichen klicken und eine Überschrift hinzufügen. Weil das eine Überschrift ist. Und eine bewährte Vorgehensweise beim Entwerfen von Landingpages oder Webseiten, stellen Sie sicher, dass Sie eine H1 pro Seite verwenden, da H1 das Hauptthema der Seite ist. Und sobald Sie eine H1 in Ihrer Zielseite oder Ihrer Webseite haben, kann alles andere Untertitel oder Untertitel sein, die jetzt in H2, H3, H4 fallen würde. Aber denken Sie daran, ein H1 pro Seite. Müssen Sie nicht. Lassen Sie uns die Farbe hier ändern. Also mit diesem ausgewählt, Ich klicke auf Stil und die Textfarbe. Ich ändere es in Farbe, die nah an dem ist, was wir wollen. Und natürlich sieht der Blick auf die Schriftart eher wie Montserrat aus. Natürlich können Sie jede Schriftart auswählen, die Sie wollen. Gehen wir weiter und sagen Montserrat. also unter Typografie auf diese Schaltfläche „Bearbeiten“ und geben Sie Monate ein. Und ich denke, ja, ich denke, das ist eine Schrift. Lassen Sie uns die Schriftgröße erhöhen. Ich glaube, wir haben es fast richtig. Moment schauen wir uns einfach an, was wir haben. Also werde ich Daten erhöhen und ich werde eine Vorschau der Änderungen. Awesome, Also jetzt fängt es an, Gestalt anzunehmen. Lassen Sie mich diesen Text kopieren. Und ich werde einen neuen Hashtag hinzufügen. Und dieses Mal wird es darüber hinaus sein. Und ich füge diese kleine Schrift hier ein. Und ich werde sehen, es ist eine kleinere Schriftarten. Also zuerst, es ist ein H2. Und wir wollen sicherstellen, dass es schwarz ist. Da steht, kopieren Sie diese schwarz. Wählen Sie das aus. Klicken Sie auf die Farbe unter Stil, kopieren Sie diese, und wählen Sie diese kleinere Schriftart hier aus. Klicken Sie auf die Farbe. Fügen Sie die Datei ein, die Sie gerade kopieren. Es gibt einen leichten Unterschied. Und dann müssen wir diese Schriftarten kleiner machen. Und ich glaube, es ist auch Montserrat. Ja. Also gehen wir weiter und sagen Monstera unter Text, Typografie, Montserrat. Und natürlich machen wir es so groß. Aktualisieren Sie das. 11. die hero hinzufügen: Als nächstes lassen Sie uns diese beiden Schaltflächen direkt hier erstellen, auf Laufwerk anwenden, sich anmelden, um zu fahren. Also, was wir tun müssen, ist, dass Sie wieder auf das Menü klicken. Dies ist der Menüklick, wenn Sie ein beliebiges Element hinzufügen möchten. Wir brauchen also einen doppelten Schnittpunkt und ein innerer Abschnitt befindet sich in einem anderen Abschnitt und Sie können mehrere Spalten darin hinzufügen. Also, weil wir hier zwei Tasten brauchen, brauchen wir nur zwei Spalten. Ich werde das und das löschen. Und jetzt, da wir diese beiden Spalten haben, ziehe ich eine Schaltfläche Elemente dort hinein. Und während es noch ausgewählt ist, ist es Zeit, es zu stylen. Also denke ich, es hat diese violette Farbe. Also, während es noch ausgewählt ist, gehen Sie zu Stil. Nun, bevor Sie zu Stil gehen, Lassen Sie uns zunächst die Texte ändern, die auf Laufwerk angewendet werden. Also unter Content-Schaltfläche angewendet, um zu trocknen. Jetzt können wir in die Style-Registerkarte gehen. Und unter der Topographie. Wir können zunächst den Typ in Montserrat ändern. Und wir müssen hinzufügen, beachten Sie, dass die Tasten hier, wie diese runde Ecke. Das ist also der Grenzradius. Und weil dies verknüpft ist, wird jede Zahl, die wir hier eingeben, auf diese anderen angewendet. Nehmen wir also an, 50 gibt ihm diesen abgerundeten Eckeffekt. Und dann für die Farbe, natürlich, müssen wir es lila in der Farbe machen. Vielen Dank. Es war mal sehen, ein leuchtend lila. In Ordnung, also sei ein bisschen dunkel. Bordüren-Ring Ja, grenzt an Blau. Klicken Sie hier an eine beliebige Stelle, um zu diesem Menü zu gelangen. Jetzt, da wir diesen Knopf hier haben, können wir ihn duplizieren. Ziehen Sie dann die Kopie in diese andere Spalte und bringen Sie sie näher zusammen. Jetzt müssen wir das anders gestalten. Keine Füllfarbe, nur ein Umriss. Also, mit diesem ausgewählt, gehen Sie in den Typ. Also für die Farbe, Lasst uns es in weiß ändern. Und Sie werden feststellen, dass es verschwunden ist. Aber das liegt daran, dass es keine Grenze hat. Und wenn wir einen festen Rahmen hinzufügen und ihm eine Breite von eins geben und gefärbt, dass Grenze fehlt. Die Schaltfläche ist jetzt sichtbar. Und lassen Sie uns die Textfarbe in Schwarz ändern. Aktualisieren Sie das. Diese Schaltfläche ändert sich also beim Hover zu gräulich. Um die gleichen Ergebnisse zu erzielen, müssen wir hier unter Tastenstil, Hintergrundtyp, unter Farbe kommen . Ändern Sie das in ein Grau. Hellgrau. Ja, ich denke, das ist gut. Aktualisieren. Und lassen Sie uns eine Vorschau der Änderungen. In Ordnung, also beachte, dass es hier oben einige Abstände gibt. Aber auf unserer Seite haben wir nicht den Abstand, also lasst uns daran arbeiten. Und das ist alles über die Marge. Also werden wir einen gewissen Rand am oberen Rand der Spalten hinzufügen. Klicken Sie also auf die Spalte und ausgewählt. Wechseln Sie zu Erweitert, heben Sie die Verknüpfung auf, und fügen Sie dann einen oberen Rand hinzu. Es ist einfach mit ihm herumspielen und sehen, welcher passt, welches man am besten aussieht. Lasst uns das aktualisieren. Lassen Sie uns die Änderungen überprüfen. So haben wir wenigstens etwas Marge an der Spitze. Das Bild scheint richtig, richtig positioniert zu sein. Als nächstes wollen wir die beiden Bilder hinzufügen und sie so überlappen. 12. Die Heldenbilder hinzufügen: Gehen wir hier rein. Klicken Sie auf das erste Bild, und dies ändert sich natürlich zu den Bildeinstellungen. Klicken Sie darauf. Und ich gehe in meine Mappe. Sie finden einen Helden Abschnitt Bilder Ordner finden. Also können wir einfach all diese Bilder packen und sie dort hineinwerfen. Ich gehe zurück und schnappe diese anderen, die wir nicht jedes Mal dorthin zurückkehren müssen. Also gehen wir zurück. Ich werde auch diese Schieberegler Bilder bekommen, sagen wir offen. Nun, da wir all diese Bilder haben, lasst uns das packen und Medien einfügen, aktualisieren oder reiten. Gehen wir zum zweiten Bild. Lasst uns das aussuchen. Aktualisieren Sie das. Und lassen Sie uns die Änderungen überprüfen. So haben wir alle Inhalte, die wir brauchen, auf der Helden-Sektion. 13. Button: Also lasst uns diese Knöpfe ein wenig näher zusammenbringen. Lassen Sie uns diese Lücke reduzieren. Aber zuerst möchte ich diese Spalte auswählen, zu Erweitert gehen und all diese Standard-Rand und Padding entfernen. Dasselbe Fall gilt für das. Wählen Sie diese Spalte „Erweitert“. Entfernen Sie alle diese Standardwerte. Dann ziehen Sie sie so näher zusammen. Sagen Sie dann Update. Ich mag, wo sie jetzt sind, aber jetzt müssen wir sie ein wenig nach unten drücken, weil diese Distanz zu klein ist. Also nehmen wir den gesamten Abschnitt Kreuzung erweitert, entfernen Sie diesen Link, und fügen Sie dann, vielleicht, sagen wir ein 40-Update. Diese Knöpfe scheinen einige schöne Polsterung zu haben, oben, unten und an den Seiten. Unser schien etwas kürzer in der Höhe zu sein. Also lassen Sie uns etwas Polsterung oben und unten hinzufügen. Ich wähle eine dieser Schaltflächen aus. Ich gehe zur Polsterung und sage Auszubildende. gleiche Fall gilt für diesen anderen. Klicken Sie auf Aktualisieren. In Ordnung? Okay, das nächste, was wir tun wollen, ist, dass sich diese beiden Bilder hier überlappen. 14. Die Heldenbilder gestalten: Also wähle ich das erste Bild aus. Gehen Sie zu Erweitert, und wir spielen mit dem Rand und der Polsterung herum. Also lasst uns diese Links entfernen. Und dann für den Rand, erhöhen Sie den Rand auf Wörter wie diese. In Ordnung, gehen wir zum zweiten Bild über. Fortgeschritten. Reduzieren wir den oberen Rand. Geben wir ihm eine negative 100, negative 150. Und dann reduzieren wir den linken Rand. Und lasst uns die rechte Marge erhöhen. Geben wir ihm vielleicht eine 90. Und lassen Sie uns das aktualisieren, wenn wir uns die Änderungen ansehen. Ehrfürchtig. Ich denke, obwohl wir in diesem Moment nicht perfekt sind, gehen wir irgendwohin. Wir haben es getan. Im Moment bin ich mit unserem Heldenbereich zufrieden. Bisher. Als nächstes möchten wir zum Körperbereich übergehen, der aus ein paar Abschnitten besteht, alle unterschiedliche Anzahl von Spalten und Zeilen aufweisen. So. 15. Der Abschnitt des Hauptkörpers: Also für den Körperabschnitt müssen wir wieder eine doppelte Säule haben. So können wir dies duplizieren, indem wir darauf klicken, weil es bereits zwei Spalten hat, oder wir können eine doppelte Spalte wieder erstellen. Also lassen Sie uns eine doppelte Spalte erstellen. Und Sie werden feststellen, dass es hier einen gewissen Rand gibt, der zwischen den beiden Abschnitten liegt. Also lasst uns das Gleiche machen. Lassen Sie uns einen Rand hinzufügen, den oberen Teil des Abschnitts. Klicken Sie mit der rechten Maustaste auf Abschnitt bearbeiten Dann geht es hierher. Bei weitem. Entfernen Sie die Verknüpfung am Rand. Und geben wir diesem eine Marge, oberer Rand von 50. Vielleicht sagen wir 80. 16. eine Bildmaske hinzufügen: Fügen wir hier ein Bild hinzu. Lass es da rein. Und natürlich lassen Sie uns ein Bild einbringen, vielleicht dieser Typ, Medien einfügen. Und jetzt müssen wir tun, während das Bild noch ausgewählt ist, gehen Sie zu Erweitert, scrollen Sie nach unten und Sie sehen Maske. Klicken Sie auf diese Maske und sagen Sie weiter. Und Sie werden mit diesen Einstellungen präsentiert. Im Moment ist es also auf Kreis gesetzt. Probieren wir die anderen aus. Blumen-Skizze. Wir haben diese Form nicht hier in dieser Liste, aber Sie können immer Ihre eigene informelle SVG hochladen oder Sie können ein Bild hochladen, das diese Form hat. SVG Dateien werden jedoch normalerweise als unsicher betrachtet. Ich glaube, ich werde vorerst mit Skizze arbeiten. Aktualisieren Sie das. Und wir können diesen Textblock mit diesen beiden Schaltflächen hinzufügen. Lassen Sie uns das kopieren und hier reinlegen. Ich klicke auf Plus, und das ist eine Überschrift. Ich werde das da reinkleben. Und denken Sie daran, dass wir etwas Ähnliches geschaffen haben Hier ist es. Also werde ich einfach darauf klicken, klicken Sie mit der rechten Maustaste, Kopieren. Klicken Sie mit der rechten Maustaste. Und ich werde nicht eingefügt, übertraf seinen Stil, so dass ich nicht versuchen muss, herauszufinden, was ich getan habe, um den anderen so aussehen zu lassen, wie es aussieht. Also gehen wir hin. Als nächstes wollen wir schnappen, ist das hier. Es ist natürlich ein Sub-Header. So können wir das duplizieren, den Mauszeiger über diese und klicken Sie darauf, klicken Sie hinein. Sie kommen hierher und fügen den Text dort ein. Und während es noch ausgewählt ist, gehen Sie in Stile, Typografie, das ist stoßen Sie auf die Größe. Ich glaube, ich mag es so. Und Daten nach oben. 17. body hinzufügen: Das nächste, was wir tun wollen, ist, einen Teil dieses Textes nochmal zu schnappen. Klicken Sie auf diese Schaltfläche, um ein Element hinzuzufügen. Und das Element, das wir diese Texte hinzufügen. Klicken Sie hier, markieren Sie alles, und fügen Sie es dort ein. Nun, wenn Sie bemerken, dass Sie dort eingefügt haben und der Text Styling sieht lustig aus wie in vielleicht ist die Schriftart groß. Stellen Sie sicher, dass Sie hier alles auswählen. Klicken Sie auf diesen Schalter und deaktivieren Sie die Formatierung , so dass Sie, falls die Steuer mit einer Vorformatierung geliefert wurde, diese Formatierung loswerden, damit Sie Ihre eigene Formatierung durchführen können. 18. Benutzerdefinierte feature: Also hier haben wir eine Liste und die Liste hat Symbole. Wie können wir das in Elementor erreichen? Jetzt gibt es verschiedene Möglichkeiten, dies hinzuzufügen, aber die Art und Weise, die in diesem Szenario funktioniert, besteht darin, einen Schnittpunkt hinzuzufügen. In diesem Schnittpunkt wird in zwei geteilt werden. Also haben wir einen inneren Abschnitt, der ein Symbol und eine Überschrift hat. Und dann unter der Überschrift haben wir den Text. Klicken Sie also auf das Pluszeichen-Symbol. Ziehen wir also ein Symbol dort hinein und klicken Sie dort. Wir können mit der Überschrift hier greifen oder wir können das einfach duplizieren und es in die zuverlässigen Einnahmen setzen. Kleben wir das da rein. Und jetzt für die Texte, können wir das einfach duplizieren und das Duplikat in das ziehen , was natürlich jetzt wir das ändern müssen. Also, während dies hervorgehoben ist, markieren Sie alles darin und fügen Sie es dort ein. Dieser Abstand ist zu groß, daher müssen wir ihn reduzieren, um dem zu entsprechen, was wir hier haben. Lassen Sie uns diesen Text erweitern, entfernen Sie diesen Link und diesen Link. dann für den oberen Rand Reduzieren wirdann für den oberen Randden oberen Rand bis zu diesem Punkt. Vielleicht kann weiter gehen, wenn du willst. Und das nächste, was wir tun wollen, ist die Größe dieser Schriftart zu reduzieren und während sie ausgewählt ist, gehen Sie zur Stil-Größe. Lass es uns bei 20 belassen. Und dann ziehen wir, dass alle Gewichte, die zeigen. Lassen Sie uns die Entfernung noch weiter reduzieren. Kann es so reduzieren. Also habe ich bemerkt, dass wir viel Spielraum unter den Texten haben. Also wähle ich den Text aus und verkleinere den unteren Rand bis zu diesem Punkt. Alles, was wir jetzt tun müssen, ist das zu duplizieren und es erneut zu duplizieren. Und wir haben eine Liste. So können wir fortfahren und alle diese anderen Listenelemente kopieren, die hier eingefügt werden. Lasst uns diesen Text hier schnappen. Klicken Sie auf diesen Text, fügen Sie ihn direkt dort hinzu. Dann geh, um bezahlt zu werden. Ich mache dasselbe, weißt du, den Bohrer. Kopieren Sie das, was es da reingelegt hat. Und ich liebe Tag die Änderungen, weil wir so viele Änderungen vorgenommen haben und sie gespeichert haben. Dann lassen Sie uns eine Vorschau auf das, was wir bisher haben. Also, wenn wir anfangen zu scrollen, denke ich, es fängt gerade an, Gestalt anzunehmen. Aber beachten Sie, dass die Entfernung hier sehr klein ist. Wir müssen die Breite des, des Abstands hier erhöhen , um dies zu entsprechen. Und zur gleichen Zeit müssen auch diese Symbole ändern, die zu klein sind, um ausgewählt zu werden, aber ich werde mein Bestes versuchen. Ich wähle das aus und gehe zu Inhalt, indem ich dort klicke. Und ich kann ein Symbol wählen. So zuverlässige Einnahmen, so das ist eine Banknoten. Also gebe ich einfach Geld ein. Ja, ich denke, wir können damit arbeiten. Oder das. Wir könnten ihm auch schwarze Farbe geben. Und dann, anstatt das Gleiche für den Rest zu tun, werde ich einfach kopieren, was wir hier haben. Und ich werde diese hervorheben. Ich füge den Stil ein und es ändert sich zu diesem über die ausgewählte Paste. Und ich ändere das in ein anderes Symbol. Wählen Sie ein beliebiges Symbol aus. Denn im Moment, was wir verstehen müssen, ist, wie man das Symbol hinzufügen und bearbeiten ist nicht wirklich das, was Symbol ist das. Lass uns das machen. Ein Auto, denn hier geht es um Autos und Weg. Aktualisieren Sie das. Und das nächste, woran wir jetzt arbeiten wollen, sind diese beiden Tasten. 19. Erweiterte Buttons und Links: Lassen Sie uns voran gehen und fügen Sie einen doppelten Abschnitt direkt darunter hinzu. Und hier können wir unsere Schaltflächen hinzufügen. Also lasst uns gehen und einen Knopf schnappen. Legen Sie es da rein. Ich wähle diese Schaltfläche aus. Kopieren, wählen Sie diese aus, fügen Sie den Stil ein , und ändern Sie die Farbe. Und dann werde ich das duplizieren. Jetzt lass mich das einfach duplizieren und es hierher ziehen. Deshalb ist dies ein Drag & Drop Builder. Jetzt, wo wir es hier haben, müssen wir stylen, es bringt mich in den Hintergrund und all das. Lassen Sie uns zunächst die Schriftfarbe in Schwarz ändern. Also Innenstil, während die Schaltfläche noch ausgewählt ist, wird zur nächsten Farbe gehen. Ändern Sie sich. Es ist dieser Mangel. Dann für den Hintergrund. Wir wollen den Hintergrund auswählen und weil er jetzt grün ist, wollen wir kommen und sagen, dass er transparent sein muss, völlig transparent, damit er so weiß ist. Also eine andere Sache, die wir jetzt tun wollen, ist, den Button Text zu ändern. Also, um zu fahren, wie Dr. Pay funktioniert. Lasst uns das anklicken. Beworben bei Dr. Lisa. Andere sagen, ist zufrieden. Wie trocken funktioniert. Jetzt werden Sie feststellen, dass sie nicht ausgerichtet sind. Lassen Sie mich das in Vorschauänderungen aktualisieren. Wenn ich nach unten scrolle, werden wir diese loswerden. Mach dir keine Sorgen. Es gibt zu viel Abstand zwischen den beiden Tasten und dieser scheint falsch ausgerichtet zu sein. Also, was wir tun müssen, ist zurück zu unserer Seite zu gehen, Recht BCE, und entfernen Sie den Standard-Rand und Padding und tun Sie das gleiche dafür. Entfernen Sie diese Standard-Polsterungen und all das. Also lasst uns diese beiden näher beieinander bringen und wir müssen das ein bisschen runterdrücken. Also lasst uns die Polsterung erhöhen, obere Polsterung so. Und lassen Sie uns voran und fügen Sie diesen Pfeil am Ende hinzu. Sie also zur Inhaltssymbolbibliothek, solange es noch ausgewählt GehenSie also zur Inhaltssymbolbibliothek, solange es noch ausgewähltist. Und lasst uns den Pfeil eingeben. Lasst uns das hier benutzen. Einfügen. Und sagen wir, wir wollen es danach. Also direkt unterhalb des Symbols. Lassen Sie uns nach einem Update eine Vorschau der Änderungen anzeigen. Lassen Sie uns diesen Knopf zuerst loswerden, bevor wir das Scrollen nach unten vergessen. Und lassen Sie uns diesen oberen Rand erhöhen, damit diese Tasten etwas mehr Platz und mehr Platz haben. Also lasst uns das anklicken. Wechseln Sie zu Erweitert, entfernen Sie diese und dann oberen Rand. Lassen Sie uns ein 35 Update geben. Und bevor ich es vergesse, erhöhen wir den Abstand zwischen diesem Bild und diesem Textblock. 20. section anpassen: Also klicke ich auf den Abschnitt und das Layout und gehe zu wo es Spalten Lücke sagt. Also denke ich, ich werde einfach breit wählen und das aktualisieren und sehen, wie es aussieht. Ich glaube, es gefällt mir bisher, aber wir könnten noch viel mehr tun. Wir könnten mehr tun. Sagen wir also breiter. Alles klar, so weit so gut. Oh, warte, sieh dir an, wie dieser Knopf aussieht. Denken wir, wir reduzieren den Abstand zu stark. Lassen Sie uns die Marge reduzieren, ich denke, es ist das linke Ohr, der linke Rand. Und aktualisieren Sie das. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Ich mag es bis jetzt. Als nächstes gehen wir zu diesem Zeugenabschnitt über. Und Sie werden feststellen, dass es mehr versteckte Zeugnisse auf der rechten Seite gibt. Und um sie zu sehen, müssen Sie klicken und scrollen. 21. Kundenberichte hinzufügen: Also, um diese Testimonials zu erstellen, müssen wir ein anderes Plugin installieren, und ich werde Ihnen etwas schnell hier zeigen. Also lasst uns voran gehen und Zeugnisse eingeben. Und Sie werden feststellen, dass wir hier Zeugnis geben müssen, aber das sind nicht die, mit denen wir arbeiten wollen. Also gehen wir zurück zum Dashboard und ich werde in Plug-Ins gehen und ein neues Plugin hinzufügen , das eine Option hat, die uns Ergebnisse liefert, die diesen ähnlich sind. Also gehen Sie zurück hierher, geben Sie Elemente, Elemente, Kinder ein. Lassen Sie uns Elemente, Kinderelemente oder Atome installieren. In Ordnung, also lasst es uns aktivieren. Ehrfürchtig. Jetzt, da es installiert ist, werde ich zu unserem Editor springen und ich werde diese Seite aktualisieren, damit wir hier auftauchen können. Klicken Sie also hier auf das Pluszeichen und geben Sie ein Testimonial ein. Und wir holen uns diese Zeugenaussage hier. Und beachten Sie, dass wir diese verschiedenen Optionen haben, wie wir sie anzeigen möchten. Und kann voran gehen und wählen Sie eine, Ich denke, ich werde wählen, vielleicht werde ich dieses eine wählen. Was wir derzeit haben, ist ein Zeugnis, das pro Folie gezeigt wird, und wir wollen, dass sie drei auf einmal sind. Lassen Sie uns also die Registerkarte Layout reduzieren und in das Zeugnis gehen. Und das erste, was wir tun wollen, ist, das zu duplizieren, so dass wir für Licht auf der linken Seite 1, 2, 3, 4 haben. Und dann lassen Sie uns die Registerkarte „Testimonial“ reduzieren und Einstellungen öffnen. Unter Einstellungen haben wir Folien zu zeigen, sagen wir drei, so dass es drei gleichzeitig auf dem Bildschirm angezeigt werden. Und lasst uns das aktualisieren. Lassen Sie uns eine Vorschau der Änderungen anzeigen. In Ordnung, lasst uns jetzt jedes Zeugnis mit etwas Inhalt befüllen. Und ich werde schnell voran gehen und diese Zeugnisse von hier schnappen. Also, wenn ich die Einstellungen zusammenbreche, werde ich in das Zeugnis gehen. Ich gehe vor Ort Zeugnis eins. Auch hier Name, Mary Mary Drivings Blatt seit 2019. Also Mary Mary fährt , seit es 17 läuft. Und fügen wir ihn das Zeugnis hier ein. Richtig? Es fängt schon an, Gestalt anzunehmen. Wie Sie sehen können. Lasst uns das zweite Zeugnis hier von Harold holen. Lasst uns Mary zusammenbrechen und das System auf eurem Werkzeug öffnen. Das ist Harold fährt mit uns seit 2009, 2018. Fügen wir das Zeugnis dort ein. Lasst uns das gepaarte schnappen. Fallen Sie Harold zusammen. Richtig? Du willst sagen, dass Alex 16 sagt. Lassen Sie uns das Zeugnis direkt dort einfügen. Und dann gehen wir weiter und holen uns das letzte Zeugnis hier. Kollabiert. Alex, erweitern Sie das. Sagen wir Anthony Driving seit 2020, seit 2020,strebt gute Sperling, richtig. In Ordnung, also kleben wir es gleich dort ein. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie den ganzen Weg nach unten. Und lassen Sie uns die Bilder hier hinzufügen. also irgendwo im Abschnitt hineinklicke, gehe ich zuerst direkt zu Anthony. Und lassen Sie uns in den Kunden-Avatar gehen. Und ich hatte diese Bilder schon hier hochgeladen. Denken Sie daran, dass ich einen ZIP-Ordner zur Verfügung gestellt habe, den Sie unten in der Beschreibung finden können. All diese Bilder sind da drin. Ich habe tatsächlich diese Person nicht exist.com verwendet, um diese sofort zu bekommen. Das sind also keine echten Menschen. Also wähle ich diesen Kerl aus. Medien einfügen, aktualisieren. Ich werde Anthony zusammenbrechen, zu Alex gehen. Client-Avatar wird nach unten aufgerufen. Hol diesen Kerl. Er sieht aus wie ein L, es ist Harold. Gehen wir weiter und schnappen uns Kunden-Avatar. Lasst uns das schnappen. Und schließlich, lassen Sie uns Marys Foto hinzufügen, dass aktualisiert. Ehrfürchtig. Aber jetzt haben diese Zeugnisse hier keinen Schlagschatten, aber unsere haben einen Schlagschatten, also müssen wir das loswerden. Und wir werden in Stil gehen und nach der Option suchen, um den Kastenschatten zu entfernen. Und in diesem Fall ist es unter Stil Layout Kastenschatten. Beachten Sie also, dass sich, als wir darauf geklickt haben, ein wenig verändert hat. Und was wir tun wollen, ist, die winzige Box dort anzuklicken und sie komplett transparent zu machen. Dann aktualisieren Sie das. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Richtig? Lassen Sie uns also nach unten scrollen und sehen Sie die Ergebnisse, die wir haben. Und Sie werden feststellen, dass wir hier zusätzliche Mitarbeiter haben, die nicht hier sind, wie diese Bewertungen Sterne und diese Anführungszeichen. Und das liegt daran, dass diese Jungs, die Lyft gemacht haben, nicht elementar verwendet haben, um diese Seite zu erstellen. Vielleicht haben diese Jungs hier eigentlich alles codiert, aber wir benutzen einen Drag & Drop Builder. Und der Drag & Drop Builder kommt standardmäßig mit bestimmten Elementen, aber wir können sie entfernen. Also lasst uns die Zitate loswerden. Aber wenn du sie dort pflegen willst, kannst du sie dort behalten. Wenn Sie sie entfernen möchten, gehen Sie fort und entfernen Sie sie. Also lassen Sie uns suchen, Ich werde nach oben scrollen ausgeblendetes Layout. Gehen Sie zurück zum Inhalt. Lassen Sie uns sehen, in der Testimonial ermöglichen Bewertung dies in der Lage, dass. Also, jetzt ist das weg. Und aktivieren Sie Anführungszeichen. Diese Abel das auch. Sie können weitergehen und mit den Einstellungen weiter spielen, um zu sehen, was Sie sonst noch mit den Testimonials tun können. Aber natürlich, wie Sie gesehen haben, gibt es hier viele Möglichkeiten. Also gehen Sie weiter und probieren Sie alle diese anderen Layouts und sehen Sie, was Sie mit Ihren Ergebnissen erreichen können. Der Punkt hier ist zu verstehen, wie man die elementaren Werkzeuge und Funktionen verwendet , um tolle Webseiten zu erstellen. Und natürlich ist es ziemlich leicht zu sehen, dass wir nicht in der Lage waren , diese Pfeile direkt hier zu erstellen. Mit dem man durch die Zeugnisse blättern kann. Und natürlich liegt es daran, dass sie verschiedene Technologien verwenden, um ihre Seite zu erstellen. Wir verwenden einen Drag-and-Drop-Builder, der seine eigenen Kräfte und Mängel hat. Unsere sieht also so aus. Und es sieht so aus. Also als nächstes, lasst uns an diesem bläulichen Abschnitt direkt hier arbeiten, bis hier, bevor wir dieses Formular erstellen. 22. Erweiterte Körperabschnitt: sich diesen Abschnitt hier ansehen, werden Sie feststellen, dass es ein blauer Abschnitt ist und er eine Mischung aus verschiedenen Spaltenabschnitten darin hat . Wie Sie sehen können, ist dies eine doppelte Spalte. Aber wenn Sie hierher kommen, ist dies eine einzelne Spalte, weil sie bis zum Ende läuft. Was wir also tun müssen, ist hierher zu kommen, einen einzelnen Spaltenabschnitt zu erstellen. Lassen Sie uns zuerst diese Hintergrundfarbe geben und ich hatte sie bereits ausgecheckt. Es ist, wenn Sie hineingehen, den Abschnitt bearbeiten, mit der rechten Maustaste darauf klicken und dort hineingehen, zu Stil, Hintergrund, Farbe wechseln. Die Farbe ist Hash, PB, VB, Ff oder Ride. Und darin müssen wir einen doppelten Spaltenüberschnitt hinzufügen. Also kommen Sie hier rein und sagen Sie, fügen Sie eine Kreuzung hinzu, die jetzt eine doppelte Spalte ist. Und darunter können wir eine einzelne Spalte hinzufügen. Lass uns weitermachen und das einfach löschen. Fügen Sie einen weiteren Schnittpunkt hinzu. Aber dieses Mal werden wir natürlich diese einzelne Spalte entfernen, aber wir werden dazu kommen. Worauf ich mich also konzentrieren soll, ist dieser Top-Teil für den Anfang. Also lassen Sie uns dieses Bild in dieser Spalte hinzufügen. Und dann wird hier drin etwas Text hinzufügen müssen. Also lasst uns das kopieren, direkt mit Lyft. Und wir können das einfach duplizieren, weil es uns ermöglicht, einheitliche Untertitel zu haben. Ich trage das und lasse es da rein. Das werde ich mir schnappen. Und ich werde auch hier nach unten scrollen. Wir duplizieren das und ziehen das da rein. Ziehen wir es hier runter. Lasst es uns einfach dort fallen lassen und das packen und darüber legen. Klicken Sie hierin. Und lassen Sie uns Text einfügen. Wir schnappen uns nur, sie kriegen es mir nur in die Hände. Und natürlich können Sie erraten, was wir als nächstes tun werden, ist grad, duplizieren diese und so elementar macht es Ihnen leicht zu arbeiten. Sie müssen nicht ständig neue Elemente hinzufügen. Sie können bereits die Elemente verwenden, die Sie bereits gestylt haben. Also lassen Sie uns den Text dort einfügen. Als nächstes erstellen wir diese Schaltfläche. Und das können wir tun, indem wir das duplizieren. Und dann ziehen wir es in diesen Bereich. Was sagt dieser Button? Sichern Sie sich in wenigen Minuten eine zuverlässige. Also lasst uns das ändern. Sex. Der Knopf. Während die Schaltfläche noch aktiv ist, lassen Sie uns in Stil gehen. Und deshalb die Farbe. Natürlich muss es breit sein. Aber der Grenztyp muss jetzt zu Solid wechseln und wir geben ihm einen. Und die Rahmenfarbe sollte schwarz oder weiß sein, oder Farbe ist es hier? Es ist so violett. Also lasst uns ihm eine violette Farbe geben. Diese leuchtend violette Farbe so. Und Sie werden feststellen, dass es einen Schlagschatten hat. Also lassen Sie uns hier einen Schlagschatten hinzufügen. Aber so Kastenschatten. Und dann lassen Sie uns die Deckkraft dieses Kastenschattens reduzieren, so dass Sie das Schreien erleichtern. Ich will es nur ein bisschen subtil machen. Dann gehen Sie auf die Schaltfläche rechts hier, Textfarbe, Lassen Sie uns ändern, um, Ich denke, es war schwarz. Dann lassen Sie es uns aktualisieren. Und ich merke, dass es dieses winzige Symbol hier hat. Also lassen Sie uns ein Symbol hinzufügen. Gehen wir zurück zum Inhalt. Solange es noch ausgewählt ist. Klicken Sie auf das kleine Symbol. Reife kann das richtige Auto finden, Auto. Lasst uns das packen, das einfügen. Als Nächstes. Dies sind zwei weitere Tasten, und sie sind so ziemlich wie dieser Knopf hier gestylt. Also lassen Sie uns das einfach duplizieren. Ziehen Sie es und legen Sie es direkt darunter ab. Lassen Sie uns es noch einmal duplizieren, weil es zwei Tasten gibt. Planen Sie Ihr Schreiben fortgeschritten. Wissen Sie, dass Sie Recht haben. Wissen Sie, dass Ihr Fahrer eine Maske trägt. Also mit dem aktiv die Masse. Und der zweite sagt, planen Sie Ihre Fahrt im Voraus. Lassen Sie uns das im Voraus anklicken. Lassen Sie uns den Zeitplan aktualisieren. Richtig, hat 1 r. Stellen Sie sicher, dass diese Symbole vor dem Text kommen. Also vorher, und für diesen auch vorher. Vorher. Lasst uns das aktualisieren. Als Nächstes. Lassen Sie uns ein Bild des Telefons hinzufügen. Klicken Sie auf das Bild. Also klicke ich darauf. Schnappen Sie sich das Telefon hier rein. Legen Sie nun Medien ein. Aktualisieren Sie das. Als Nächstes. Lassen Sie uns diese Schaltfläche erstellen. Also gehen wir einfach weiter und duplizieren das. Und setzen Sie es hier, ziehen Sie es und legen Sie es in das Update, das und sie sind, was sagt er? Hol eine Fahrt. Also sage ich unsere Fahrt. Richtig. Lassen Sie uns dieses Logo hinzufügen. Aber jetzt dieses Logo, obwohl es scheint, direkt unter dieser Schaltfläche zu sein, sie sind nicht zusammen, sie sind nicht in einer Gruppe. Und Sie werden bemerken, dass, wenn Sie dies auf mobilen Bildschirmen tun, denn lassen Sie uns Control Shift I für einen Moment drücken. Und wenn ich diesen Bildschirm schmaler mache und nach unten scrollen, werden Sie feststellen, dass das Bild vor diesem Logo steht und die Schaltfläche vor dem Bild steht. So erleichtert dieses Logo mit diesen Texten und sie kommen nach diesem Bild. Das bedeutet also, dass wir einen neuen Abschnitt direkt unter diesem doppelten Spaltenabschnitt hinzufügen sollen . Und denken Sie daran, dass wir einen Doppel-, einen weiteren Doppelspaltenabschnitt hinzugefügt hatten . können wir benutzen. Also lassen Sie uns hier ein Bild hinzufügen. Ich klicke darauf. Wir sollten das Logo hier haben. Gehen wir weiter und benutzen das. Legen Sie Medien ein, und legen Sie es auf die linke Seite. Als Nächstes. Lasst uns diesen Text hier schnappen. Kopieren Sie das. Und ich werde darauf klicken. Ziehen Sie einen Texteditor hier hinein. Klicken Sie dort und fügen Sie den Text dort ein. Und das sollte hier verbunden werden. Also schließe dich an. Und dann lassen Sie es uns aktualisieren. Als Nächstes. Werfen wir einen Blick darauf, wie das auf mobilen Bildschirmen aussieht. Nur für einen Moment. Wenn wir also zusammenbrechen, blättern Sie nach unten. Ja, also geht es direkt darunter, darunter. Das ist also ein neuer Abschnitt. Lassen Sie uns voran und erstellen Sie einen neuen Abschnitt. Also werde ich das duplizieren. Und jetzt sollten wir einen neuen Abschnitt haben. Also werde ich das ganze Logo loswerden. Was haben wir hier? Wir haben das, richtige Bissen könnten Bananen gehen. Und das bin ich, H2. Also klicke ich auf das Symbol direkt dort und ziehe eine Kopfzeile und füge das hier ein. Ändern wir die Farbe in Schwarz. Natürlich müssen Sie konsistent sein, wenn Sie diese Seiten erstellen. Ich setze nur Schwarz ein, aber wenn Sie Schwarz verwenden, stellen Sie sicher, dass Sie konsequent das gleiche Schwarz verwenden. Wenn Sie eine bestimmte Farbe ( lila) verwenden, stellen Sie sicher, dass Ihre Schaltfläche lila ist. Jede Taste, die violett ist und das gleiche Lila verwendet, unterscheidet nicht ein Violett. Lasst uns das aktualisieren. Und diese Schriftart scheint Roboto zu sein, die Standardschriftarten. Also lasst uns es für Konsistenz in Montserrat ändern. Darauf wollen wir bestehen. Montserrat. Ich meine, wir können ihm ein Gewicht von vielleicht 700 geben. Ja, die Dinge sind 100 Jahre her. Ok. Lasst uns das packen und lasst uns dort hineinklicken und diese durch diesen neuen Text ersetzen. Aber Sie werden feststellen, dass dieser Text etwas kleiner ist als dieser. Machen wir es also etwas kleiner als die anderen. Also Boden vielleicht. Ja, lass uns das aktualisieren. Dieser Satz scheint in einer Zeile zu sein. Also lasst uns das den ganzen Weg bis vielleicht irgendwo dort erweitern. Aktualisieren Sie das. Also jetzt gehe ich weiter und dupliziere dieses noch einmal, weil denken Sie daran, dass all diese Inhalte, die wir im Moment erstellen, auf dem blauen Abschnitt sind. Hier fügen wir unseren Bildschieberegler hinzu. Lassen Sie uns das entfernen. 23. 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! 24. Scrolling: Also jetzt haben wir diese einzelne Spalte in einem Abschnitt. Das nächste, was wir tun wollen, ist Typ-Logo, Kunden-Logo von IQ Kids. Ziehen wir es am Ende. Hier können wir alle Bilder, die wir für jede Folie wollen, hier hinzufügen. Also gehe ich in Titel 1 und klicke auf den Bildbereich. Dies sind die Bilder, die verwendet werden. Also klicke ich auf den ersten, den dort eingefügten. Klicken Sie auf die zweite. Lass es uns reinlegen. Und ich kann hier schnell vorwärts gehen, damit ich den Rest hinzufügen kann. Lasst uns sie aktualisieren. Und beachte, dass sie Kastenschatten haben und wir diese Kastenschatten nicht wollen, also müssen wir sie loswerden. So springen in Stil, Lassen Sie uns zu Logo gehen und Sie werden feststellen, dass wir diesen Grenzradius haben. Lassen Sie uns eine 10 geben oder schreiben Sie Update, dass. Lassen Sie uns den Kastenschatten entfernen. Wenn Sie also auf dieses Feld Schatten Option dort klicken, und dann auf die Opazitätsschaltfläche direkt dort, können wir die Sichtbarkeit des Box-Schattens reduzieren und das aktualisieren. Wie wir uns bewegen. Ich hoffe, Sie können einige der Stärken und Mängel eines Drag & Drop Builders wie Elementor sehen. Aber es gibt viele andere Werkzeuge, die Sie mit Elementor kombinieren können, um bessere Ergebnisse zu erzielen. Und denken Sie daran, dass wir die kostenlose Version von Elementor verwenden. Die kostenpflichtige Version verfügt über viele weitere Funktionen und Tools, die Ihnen helfen können, viel bessere Ergebnisse zu erzielen. Und wieder dreht sich alles um Ihre Kreativität. Lassen Sie uns diese Verfügbarkeitsregion erstellen. Also, das ist x, sieht so ziemlich aus. Also geh ich einfach weiter und dupliziere das falls du meine Anweisungen verpasst hast, wie man das anspricht. Diese beiden Optionen, wenn Sie den Mauszeiger zeigen, wie Sie das aktivieren. Sie gehen in dieses Programm eine neue Benutzereinstellungen und stellen Sie sicher, dass Bearbeitungsgriffe auf yes gesetzt ist. Lassen Sie uns das verlassen und ziehen Sie es hier runter. Jetzt natürlich werde ich es ersetzen, damit Sie gerade auf der anderen Seite Update kopiert haben. Als nächstes wollen wir diese einzelne Zeile in Zeile vier erstellen. 25. Ein Formular hinzufügen: Das nächste, was wir tun wollen, ist, dieses Formular zu erstellen. Und wie Sie sehen können, haben wir zwei Spalten. Eine Spalte, die den Text enthält, und diese Spalte, die das Formular enthält. Also zuerst, es ist nervös Seite, unser Armaturenbrett. Natürlich gibt es, wie ich bereits erwähnt habe, viele Formular-Plug-Ins, aber die, die wir verwenden werden, ist der Formulierer. Lassen Sie uns also nach unten scrollen und nach Formulierer suchen und rechts klicken. Also wirst du zu diesem Fenster hier gebracht. Und Sie werden diese Option hier sehen. Formular erstellen können Umfragen erstellen, aber natürlich ist diese Klasse nicht über Formularerstellung würde nur voran gehen und tun, was wir wollen. Und wir können hier jede Voreinstellung auswählen. Also werde ich einfach mit der Registrierung gehen oder wir können mit einem leeren beginnen. Lassen Sie uns wählen leer und weiter. Nennen wir es Registrierung. Und dann lassen Sie uns es erstellen oder reiten. Also, hier ist es. Wir können voran gehen und beginnen, Felder hinzuzufügen. Diese Felder. Also klicke ich auf Einfügen und du kannst ein beliebiges Feld hinzufügen, das du willst. Also lassen Sie uns zwei beliebige Felder auswählen, wie E-Mail und Telefon. Dann lassen Sie uns Felder einfügen. Und Sie werden feststellen, dass sie nach unten gestapelt sind. Aber was wir erreichen wollen, ist eine einzeilige Form. Gehen wir hierher zurück, ziehen wir das und legen es ab, sobald Sie die blaue Linie hier sehen. Legen Sie es dort ein, und drücken Sie dann auf Veröffentlichen. Wird mit diesem Kurzcode präsentiert werden. Klicken Sie einfach auf das kleine Symbol, um den Kurzcode zu kopieren. Du wirst diese winzige Nachricht bekommen. Gehen Sie hier zurück zu unserer Seite. Und jetzt, während wir diesen kurzen Code noch in unserer Zwischenablage kopiert haben , erstellen Sie zunächst einen doppelten Spaltenabschnitt. Und auf dieser Seite des Doppelspaltenabschnitts werde ich ein kurzes Codeelement hinzufügen. Also ziehen wir es am Ende hier hinein, wir können jetzt den kurzen Code einfügen, den wir gerade kopiert haben. Und bitte beachten Sie diese Nummer, da wir sie in Kürze verwenden werden , wenn Sie lernen, wie Sie ein benutzerdefiniertes CSS hinzufügen, werden wir das anwenden. Lasst uns nach unten zu diesem Abschnitt wachsen. Richtig? Beachten Sie, dass Sie können, denn jetzt können Sie nichts sehen, weil zuerst, geben wir ihm diesen blauen Hintergrund und fügen Sie diese Texte. Also greifen Sie diesen Abschnitt, Bearbeiten Sie Abschnittsstil gehen Sie hier. Und wir geben ihm diese Hintergrundfarbe. Danke, dass du irgendwo warst. Lass uns mit den Daten gehen. Also auf dieser Seite wollen wir diese Texte haben. Also werde ich mir das schnappen. Dann komme ich hierher und wähle Überschrift aus. Fügen Sie den Text dort ein. Und sagen wir diese Farbe zu Weiß. Text. Weiß. Natürlich, lassen Sie uns die Art sind Grafik Montserrat, es ist bereits Montserrat, also sind wir gut zu gehen. Also, wenn wir jetzt eine Vorschau der Änderungen, scrollen Sie nach unten und sehen, was wir haben. Das ist also, was wir derzeit haben, aber die Schaltfläche befindet sich unter den Eingabefeldern. Also, wie bringen wir es hierher? Jetzt erreicht es einen Punkt, wo, wenn Sie mit WordPress und WordPress-Plugins arbeiten, all diese Plug-ins sind nicht in der Lage, Ihnen helfen, bestimmte Erscheinungen zu erreichen , die Sie auf Ihrer Seite wollen. Das ruft also nach benutzerdefiniertem CSS auf. 26. Formgestaltung mit benutzerdefinierten CSS: Während wir noch auf dieser Vorschauseite sind, nicht die Bearbeitungsseite, wird nicht die Bearbeitungsseite,innerhalb anpassen gehen und wir werden einige benutzerdefinierte CSS hinzufügen. Wordpress bietet Ihnen mit diesem Abschnitt direkt hier. Wenn wir nach unten scrollen, finden Sie zusätzliche CSS. Unser Ziel ist es, diesen Knopf zur Seite zu bringen. Und unser Plugin hat das nicht standardmäßig. Also, wie machen wir das? Wir kommen hier in der zusätzlichen CSS und ich werde einfach Registerkarten schnell wechseln. Zuallererst hatte ich bereits einige Code-Snippet vorbereitet, die wir hinzufügen werden, so dass diese Code-Snippets im ZIP-Ordner in der folgenden Beschreibung sein werden. Achten Sie also darauf, sie zu greifen und sie hinzuzufügen, wird sehr einfach sein. Also schnappen Sie sich das erste, SO schnappen Sie sich das erste Code-Snippet, um es zu kopieren. Gehen wir in unsere Seite und fügen Sie sie dort ein. Und wenn Sie es einfügen, sehen Sie, was hier passiert. Jetzt hat sich das Styling geändert. Lassen Sie uns das zuerst veröffentlichen. Denken Sie daran, wir haben als Minister verwendet, um dieses Formular zu erstellen. Und wir haben einen kurzen Code benutzt. Lassen Sie mich darauf klicken. Wir haben diesen kurzen Code verwendet, den wir vom Formulierer zur Verfügung gestellt wurden. Und diese Form hat diese Nummer genau hier, die die Nummer des Formulars ist. Wenn ich in Clique-Formen zum Minister zurückgehen könnte. Sie werden feststellen, dass wir das Formular direkt hier haben, Anmeldeformular. Und wenn Sie diese COG mit hier klicken, haben wir kopieren Kurzcode. Das ist der gleiche Kurzcode, den wir hier haben, und es hat diese Nummer 350 bis jetzt. Unsere Seite hier ist falsch ausgerichtet, weil diese 570 die Nummer des anderen Formulars ist, das ich zum Erstellen dieser Code-Snippets verwende. Also müssen wir diese 570 durch die Nummer Ihres Formulars ersetzen, 352 in allem jetzt richtig ausgerichtet ist. Gehen wir weiter und veröffentlichen das. Gehen wir hierher zurück. Klicken Sie auf Überprüfen. Und jetzt ist das, was wir haben, aber wir wollten es bis zum Ende laufen. Also gehen zurück in unser Formular in beiden Form, Anmeldeformular, klicken Sie auf, Bearbeiten. So können wir das Erscheinungsbild dort ändern, weil, wie ich bereits erwähnt habe, dieses Formular nicht mit Elementor editierbar ist. Es kann mit dem Plug-In bearbeitet werden, das es erstellt hat, das formuliert ist. Also, jetzt, da wir das Anmeldeformular geöffnet haben, gehen Sie in Erscheinung und wir können Änderungen dort vornehmen. Was wir also tun wollen, ist zuerst zu den Farben zu gehen und dann unter benutzerdefinierten, werden wir all diese Optionen bekommen. Aber was uns interessiert, ist die Schaltfläche „Absenden“. Klicken Sie also darauf. Und lassen Sie uns die Hintergrundfarbe in Weiß ändern. Also klicke ich einfach auf das Weiß. Und dann auf Schweben, oder sieht es so aus, als hätte es das Grau? Also wollten wir jedoch eine graue Farbe haben und Sie können sie von hier auswählen. Und im Fokus wollen wir, dass es dieselbe tolle Farbe hat und das aktualisiert. Gehen wir also zurück auf diese Seite und sagen Übernehmen. Scrollen Sie nach unten. Richtig? Lassen Sie uns auf Vorschau klicken. Sehen Sie, was wir jetzt haben. Also das sind unsere Buttons bisher, wir müssen die Textfarbe in Schwarz ändern. Also, um das zu tun, gehen wir zurück in hier und unter der Hintergrundfarbe haben wir die Textfarbe. Geben wir ihm das Dunkelgrau, das nah an Schwarz ist. Und dieses Schwarz gilt jetzt für den Fokuszustand. wir sicher, dass es auf Hover und Standard angewendet wird , da es hier in allen Zuständen schwarz bleibt. Also kopiere ich den Code. Und dann komme ich zur Seite der Hover-Zustand, Klicken Sie darauf und eingefügt dort. Und ich komme in den Standardzustand, kopiere das und füge es dort ein. Aktualisieren Sie das Formular oder das Recht. Wenn wir also hierher zurückkommen und nach unten scrollen, klicken Sie darauf anwenden. Dann sagen wir einfach „Vorschau“. Scrollen Sie nach unten Und die Schaltfläche jetzt sollte diese Farbe haben, wenn wir jedoch, es ist grau und der Text bleibt schwarz. Jetzt ist es Zeit, ihnen diese abgerundete Ecke zu geben. Wie bei den anderen Knöpfen. Inside Formulierer. Scrollen Sie nach unten, finden Sie einen benutzerdefinierten CSS-Abschnitt, aktivieren Sie benutzerdefinierte CSS. Und hier können Sie weitere benutzerdefinierte CSS hinzufügen, um speziell Ihr Formular zu stylen. Hier haben wir bereits grundlegende Selektoren für die verschiedenen Teile. Wird nicht darüber sprechen, was Selektoren sind. Da denken Sie daran, es geht nicht um CSS, es geht darum zu verstehen, dass Sie diese Änderungen, diese Änderungen vornehmen können. Also gehen wir zurück zu unseren Code-Snippets und wählen diese beiden Code-Snippets aus und gehen hier zurück und fügen sie dort ein. Dann am Tag auf. Also, wenn wir das aktualisieren, dann sehen Sie es direkt hier. Mal sehen, wie die Formulare jetzt aussehen , haben sie diese abgerundete Ecke und die Schaltfläche hier ist unsichtbar, weil der Hintergrund weiß ist. Aber lassen Sie uns das schließen. Und lasst uns hier reingehen. Scrollen Sie nach unten, klicken Sie erneut auf das Formular und übernehmen Sie die Wenn wir also jetzt auf Vorschau klicken, scrollen Sie nach unten. Unsere Form hat jetzt diesen abgerundeten Eckknopf und die Ecken genau hier, der Randradius ist 5, sieht ein bisschen besser aus. 27. Double: Also springen über zu dieser Seite direkt hier, lassen Sie uns hinzufügen, dass, Lassen Sie uns diese Spalte hinzufügen. Und jetzt in dieser Spalte hier, was wir brauchen, ist Sicherheit zuerst, wie man wie ein Fremder auftaucht. Denken Sie daran, in elementar können Sie Sachen recyceln. Warum wählen wir diese nicht zuerst aus, duplizieren das. Und dann ziehen wir es hier runter. Lassen Sie es dort fallen. Lassen Sie uns diesen Text auch hier duplizieren. Und ziehen Sie es da runter. Und dann lasst uns greifen, was sein Weg ist. Wir haben immer noch diesen kleineren Text da. Also lassen Sie uns das duplizieren. Und ziehen wir es nach unten. Ziehen wir es an die Stelle. Also jetzt lasst uns zuerst diese Sicherheit holen. Legen Sie es da rein. Gehen wir weiter und schnappen uns das. Wie man, wie man wie ein bester Fremder auftaucht. Klicken Sie darauf, und fügen Sie diese dort ein. Also lasst uns das auch drinnen schnappen und es dort einfügen. Und wie Sie bereits erraten können, haben wir so etwas bereits früher erstellt, so dass wir es nicht neu erstellen müssen. Also lasst uns hierher gehen und es schnappen, von wo wir es entworfen haben, wo es hier ist. Also lassen Sie uns das duplizieren und es an unsere neue Stelle ziehen. Lass es uns da fallen. Und jetzt scheint die Marge hier zu viel zu sein. Lassen Sie uns also den Rand auf dem Tastenabschnitt reduzieren. Aber wenn wir es bei 15 belassen, sagen wir jetzt einfach fünf. Und jetzt sagen wir einfach 0. Dann aktualisieren Sie das. Scrollen nach unten oder rechts. Also lassen Sie uns das Bild hinzufügen, das hier sein soll. Klicken Sie auf das Bildelement. Lasst uns jetzt ein Bild schnappen. Bilder wie Grab. Lasst uns diese Dame schnappen. Lasst uns diesen Kerl nochmal schnappen. habe ihn ziemlich viel gesehen, aber wir haben nicht zu viele Bilder. Also aktualisiere das. Lassen Sie uns eine Vorschau oder RI. Aber jetzt müssen wir den Abstand ein wenig erhöhen. Also lasst uns diesen Abschnitt greifen, Abschnitt bearbeiten. Und dann, zuerst, entfernen Sie diesen Link auf der Polsterung und lassen Sie uns einige Top-Polsterung von vielleicht 20 hinzufügen. Und das scheint das Gegenteil von diesem zu sein. Jetzt kommt das Bild auf diese Seite und der Textblock geht auf die andere Seite. Was wir also tun müssen, ist das zu duplizieren und dann einfach diese Spalten gut zur Seite zu ziehen. Und da haben wir es. Und ich habe bemerkt, dass wir hier nicht genug Abstand haben. Also lasst uns den Abstand hier weiter machen. So Spalten Lücke, Mal sehen, breiter. Aktualisieren Sie das. Lassen Sie uns dasselbe für dieses Layout tun. Spalten breiter. Aber lasst uns zuerst dieses Bild ändern. Lassen Sie mich das für diesen Abschnitt verwenden. Also als nächstes, lasst uns an diesem Bereich arbeiten. Aber davor bemerkte ich, dass der Knopf hier, es gibt nur einen Knopf hier. Also lasst uns dieses zusätzliche entfernen. In der Tat, entfernen wir die Spalte und lassen Sie die Schaltfläche direkt dort. Und wir können ändern, was der Text sagt. Erfahren Sie mehr über Impfstoff-Achse. Klicken Sie auf die Schaltfläche selbst. Mehr zu Community-Richtlinien. Klicken Sie auf diese Richtlinien und denken Sie, dass der Song über die Sicherheit sagen würde. Erfahren Sie mehr über Sicherheit. Aktualisieren Sie das. Und lassen Sie uns eine Vorschau der Änderungen. Blättern Sie nach unten. Lasst uns hier etwas gegen diesen Knopf tun. Sieht ein bisschen gequetscht aus. Genau da. Aktualisieren Sie das. Also das nächste, was wir jetzt tun wollen, können wir in diesem unteren Bereich arbeiten. Und das ist ein einzelner Spaltenabschnitt mit voller Breite. 28. Einzelschnitt: Also lassen Sie uns einen Abschnitt mit voller Breite einzelne Spalte hinzufügen. Nun, zunächst einmal sehen Sie, dass dies Text ist, aber das ist ein Bild, weil es einige auswählbar ist. Also lassen Sie uns ein Bildelemente hinzufügen. Und dann lasst uns dort hineinklicken. Ich werde wählen, ich werde dieses Logo wählen, das ich für diesen Bereich erstellt hatte. Und wie Sie in der Größe sehen können, Es ist sehr klein, 123 Pixel von 54 Pixel. Und deshalb passt es genau dort gut. Wenn Sie ein großes Bild auswählen, füllen Sie diesen Bereich aus und Sie wollen das nicht. Stellen Sie also sicher, dass Ihr Bild die richtige Größe hat. Als nächstes lassen Sie uns diese erstellen. Wir helfen Ihnen, Ihre. Also gehe ich voran und greife diesen Text hier, dupliziere ihn und ziehe ihn in die Einfügen, die dort drin ist. Und dann lasst es uns in die Mitte legen. Und dann, um diese animierten Texte direkt hier hinzuzufügen, müssen wir ein weiteres Plugin installieren, das elementor mehr Funktionalität hinzufügt. Und das nennt man essentielle Add-Ons für elementare. 29. Einen self Text hinzufügen: Also gehen wir zurück in unsere Dashboard-Plugins. Mal sehen, ob wir es schon haben. Nein, das tun wir nicht. Also lassen Sie uns essentielle Add-ons für Elementor hinzufügen. Zeigen Sie. Dieselbe Show. Und es ist der Erste. Natürlich. Lassen Sie es uns installieren. In Ordnung, also lasst uns das aktivieren. Dies ist also ein Setup-Assistent. Gehen Sie einfach weiter und klicken Sie auf Weiter. Und was uns interessiert, ist der schicke Text, also wird er überprüft. Wir können weitergehen und auf Weiter klicken. Installieren Sie das nicht. Als Nächstes. Fertig stellen. Ehrfürchtig. Mit diesem jetzt installiert haben wir wesentliche Add-ons und wir können es hier in zugreifen. Also zuerst werde ich diese Seite vier aktualisieren, wir machen weiter. Dann werde ich die Seite aktualisieren, so dass wesentliche Add-Ons geladen werden. Alles klar, also scrollen wir nach unten. Und jetzt werde ich Text eingeben und Sie werden feststellen, dass wir verschiedene Textelemente haben, aber was wir brauchen, ist der ausgefallene Text. Also schnappen Sie sich das und lassen Sie es direkt unter das x genau dort fallen. Also hat dieses ausgefallene Textelement hier den Präfixtext und den Suffixtext. Lassen Sie uns also das Präfix und das Suffix entfernen. Jetzt sind wir mit diesem animierten Bereich in diesem ist eine Liste aller verschiedenen Wörter oder Sätze, die Sie animieren möchten. Also in unserem Fall hier haben wir Kunden, Ideen, Interviewte, Besucher. Lasst uns vorerst mit denen gehen. Somos Ideen in ihre Schüler, Patienten. Ich dupliziere sie im Grunde nur und füge das zusätzliche hinzu. Lassen Sie uns noch einen hinzufügen. Mitarbeiter, Unternehmen, Unternehmen und Mitarbeiter. Also lasst uns das aktualisieren. Und wir wollen nicht, dass es tippt nach unten verblassen will. Also lassen Sie uns zu ausgefallenen Text-Einstellungen gehen. Und jetzt gehen Sie in diesen Einstellungen hier zum Animationstyp, wählen Sie, was Sie wollen. Also in diesem Fall sagen wir „verblassen“. Und so fühlte er sich auf der Suche nach können wir die Verzögerungszeit ändern. Wie lange Sie möchten, dass es direkt dort bleibt, bevor es mit dem nächsten Wort oder Satz weitergeht. Dies scheint sich schnell und als knackige Art und Weise zu bewegen. Dies scheint diesen langsamen Übergang zu haben. Als nächstes lassen Sie uns das erstellen. Kopieren Sie das. Lassen Sie uns das einfach duplizieren. Ziehen Sie es dann direkt unter den Text. Dann füge ich es einfach da rein. Ich gehe zum Stil und richte es in der Mitte aus. Aktualisieren Sie das. Als nächstes müssen wir diese Schaltfläche hinzufügen. Du bist schon erraten. Wir müssen nur reinkommen und die hier schnappen. Aber wir greifen nicht den inneren Abschnitt, wir greifen den Knopf selbst. Duplizieren Sie das. Lassen Sie es hier rein. Und lasst es uns in die Mitte legen. Ist zu viel Marge genau hier unten. Also, während dieser Text ausgewählt ist, gehe ich zu Erweitert, breche das und das, und dann werde ich den unteren Rand reduzieren. Ich denke, das ist der richtige Ort. Und ich werde diesen schicken Text auswählen und dasselbe tun. Also lassen Sie uns das brechen und reduzieren wir den oberen Rand. Lassen Sie uns reduzieren, Lassen Sie uns die untere Marge als auch reduzieren. In diesem Jahr sieht der Knopf schön aus. Erfahren Sie mehr über Leaf Business. Es ist ausgewählt. Aktualisieren Sie das. Als Nächstes. Lassen Sie uns dieses Logo erstellen. Lassen Sie uns diesen Logo-Bereich erstellen. 30. Einen slider hinzufügen: Also gehen wir weiter und schnappen uns. Lassen Sie uns diesen Abschnitt gleich hier duplizieren. Und lasst uns alles entfernen. Löschen Sie alle diese anderen Elemente. Lassen Sie uns den Knopf entfernen. Und dann füge ich Log-Client-Logo-Drop innerhalb der hinzu. Denken Sie daran, dass wir bereits die Client-Logoelemente hier oben verwendet haben. Also klicke ich irgendwo hier drinnen. Und ich werde es kopieren. Und ich scrolle nach unten und klicke irgendwo hier drinnen. Und ich füge den Stil ein. Siehe, alle darauf angewendeten Stile werden nun auf die andere angewendet. Und alles, was wir tun müssen, ist jetzt die Bilder durch unsere Bilder zu ersetzen. Und die Summe wird diese Logos hier unten verwenden. Also werde ich das packen, das Grab Bild zwei zusammenbrechen. Grab Logo-Baum. Reduzieren Sie, dass das Bild zum Reduzieren erweitern, dass, erweitern Sie das. Bild 5. Reduzieren Sie, dass dupliziert. Doppelte Sechs. Duplizieren Sie das. Und natürlich müssen Sie den Namen ersetzen. Sie können ihm einen Namen geben. Aufstieg. Dann lassen Sie es uns noch einmal duplizieren und ein weiteres Logo hinzufügen. Und lasst es uns aktualisieren. Richtig, also lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen wir nach unten und sehen, was wir bisher haben. Und dann bemerken Sie, dass es Logos gibt. Die Logos scheinen kleiner zu sein, und wir müssen unsere etwas kleiner machen. Lassen Sie uns also lokale Einstellungen reduzieren. Lassen Sie uns zwei Folien gehen, um sie zu zeigen. Machen wir es vielleicht sechs. Machen wir es sieben. Ja. Also sieben macht sie ein wenig kleiner, weil der Platz begrenzt ist. Und lassen Sie uns eine Vorschau der Änderungen. In Ordnung, ich glaube, ich mag es so, aber lassen Sie uns die Marge reduzieren. Oberer Rand rechts hier. Es ist ein bisschen zu viel auf unserer Zielseite. Also klicke ich auf die Client-Logo-Elemente erweitert. Entfernen Sie das, und ich werde den oberen Rand reduzieren. Sagen wir bis zu diesem Punkt. Lassen Sie uns scrollen und sehen, was wir bisher haben. Unsere Website ist fast vollständig, wie Sie sehen können. Das einzige, was wir nicht entworfen haben, ist eine Fußzeile. Lass uns runtergehen und entwerfen. 31. Das footer: Also, was ich tun werde, also was ich in diesem Moment tun werde, ist, von dieser Seite zu verlassen , weil wir damit fertig sind. Wir gehen weiter und entwerfen die Mappe. In. Sobald wir mit unserem Ordner fertig sind, wird die ganze Seite öffnen und es auf verschiedenen Geräten und Bildschirmgrößen reagieren. Und ich werde darauf klicken. Um einen Ordner zu erstellen, verwenden wir das gleiche Werkzeug, das wir verwenden, um die Kopfzeile und damit den Elementor Kopf- und Fußzeilengenerator zu erstellen . Klicken Sie also darauf. Und wir klicken auf Neu, fügen Sie neue hinzu. Und genau hier geben wir ihm einen Namen, meine Mappe. Und natürlich ist es Fußzeile. Wir wollen, dass es auf der gesamten Website sichtbar ist. Und wir wollen, dass wir sicherstellen wollen, dass jeder Zugang dazu hat. Dann lassen Sie uns auf Veröffentlichen drücken. Und bevor wir mit Elementor bearbeiten, Lassen Sie uns sicherstellen, dass es vollständig Elementor ist, volle Breite, keine Seitenleiste, volle Breite gestreckt. Deaktivieren Sie diese drei und die Fußzeile da Sie den Standardwert, der mit Astra geliefert wird, nicht anzeigen möchten. Wir wollen unsere eigenen mit Elementor erstellen. Also aktualisieren Sie das zuerst. Tut mir leid. Und dann können wir mit Elementor bearbeiten wird auf das Frontend gebracht werden. Wie immer. Wir werden es visuell gestalten. Richtig? Also hier sind wir. Wer geht voran und lasst uns einen Blick darauf werfen, wie es aussieht. Das sind also unsere vier Säulen. Dies ist ein 40-Säulen-Abschnitt. Klicken Sie also auf das, und wählen Sie dann diese hier aus. Jetzt haben wir diese vier Spalten. Also das erste, was hier zu tun ist, klicken Sie auf diese Schaltfläche genau hier. Wir wollen diese Texte, diese Liste von Texten hinzufügen . Also hier tippen, Listen. Und wir haben verschiedene Listenelemente. Und woran wir interessiert sind, ist die Seitenliste nach Elementen kid. Also lassen Sie es dort hinein und wir können das erste Element hinzufügen, das ein Treiber wird. Einkommen-CDs helfen Sicherheitstreiber. Keine Notwendigkeit für einen Untertitel für jetzt. Dann können wir die Seite auswählen, zu der dieser Link führen wird. Denn wenn Sie auf diese Schaltfläche klicken, werden Sie zu einer Seite weitergeleitet. Jeder Link, auf den Sie klicken, gibt es eine Seite. Also lassen Sie uns einfach eine beliebige Seite auswählen oder mit einer Business-Seite gehen. Und das Element wird sofort aufgelistet, wählen Sie eine Seite. können wir duplizieren. Hilfe. Sie können das bearbeiten. Ich erfinde nur diese Worte. So geschäftlich. Dann duplizieren wir das. Lasst uns das ändern, um zu reiten. Der weniger komplizierte Zusammenbruch, dass. Lassen Sie uns das ändern. Und natürlich können wir die Liste so lange erstellen, wie Sie wollen, aber ich werde dort aufhören. Machen wir noch zwei Listen. Also werde ich das einfach duplizieren. Und ich ziehe es da rein. Ich werde es auch noch einmal duplizieren und es dort hineinziehen. Also zuerst, wenn ich das auswählen könnte, gehen Sie zu Stil Text. Sie können die Textfarbe in Schwarz ändern. Was sonst noch? Und dann können wir den Stil kopieren, einfügen, stylen. Fügen Sie den Stil erneut ein. Aktualisieren Sie das. Fügen wir nun diese Unterüberschriften direkt hier hinzu. Fahrer, Schriftsteller, Aufzug. Also klicke ich darauf. Ich bekomme eine Textüberschrift, H2. Wir müssen es etwas kleiner machen. Also gehen wir zur Typografie. Versuchen wir es 18. Ja, ich glaube, das gefällt mir, aber es muss schwarz sein. Und natürlich ändern wir uns. Der Text sagt Fahrer. Und ich kann das Medikament mit dort duplizieren. Das ist ein Reiter-Schriftsteller. Duplizieren Sie das, probiert es da draußen. Und das hier ist Lift. Lassen Sie uns also unsere Schaltflächen erstellen. Klicken Sie darauf, gehen Sie zu Button, legen Sie es dort ab. Lass uns hier wieder in Stil gehen. Ändern wir die Farbe in Weiß. Und dann geben wir ihm eine solide Grenze von einem. Und lassen Sie uns die Grenze der schwarzen Spalte überschreiben. Dann geben wir ihm einen Grenzradius von 50. So ist die Textfarbe momentan keine. Lass es uns in Schwarz ändern. Und was sagt der Knopf? Lyft Fahrer-App. Solange wir noch ausgewählt sind, scrollen wir nach oben. Aufzüge. Fahrer-App, Hallo. Und besitzen, aber es hat, dass grau, so Stil. Während es noch über ausgewählt ist, sollten sechs Farben schwarz bleiben. Und die Hintergrundfarbe sollte so grau sein. Ja. Also lassen Sie uns das jetzt einfach zweimal duplizieren. Und dann können wir ändern, was der Text sagt. Leaf Writer App, direkt im Web. Direkt im Web oder rechts. Also, bis jetzt mag ich, was wir haben, aber ich glaube, sie müssen ein bisschen näher sein und etwas Platz an den Seiten lassen. Was wir also tun müssen, ist, dem Abschnitt, der sie hält, etwas aufzufüllen. Und wir müssen zuerst diese Verbindung brechen. Dann die rechte, die linke Polsterung. Erhöhen wir die linke Polsterung auf vielleicht 50, vielleicht auf 100. Und die richtige Polsterung gleich. Eine 100. Dann lass uns das aktualisieren. Vorschau der Kette, Vorschau der Änderungen. Noch nicht, also machen wir es. Sagen wir also 200 mal 200. Dann aktualisieren wir es. Ich glaube, das gefällt mir. Also, jetzt, wo wir den Ordner bereit, Lassen Sie uns von hier, Beenden Sie das Dashboard. Und dann gehen wir zu Pages. Und das ist unsere Seite. Also lassen Sie uns mit der rechten Maustaste klicken und Link in neuer Registerkarte öffnen, damit wir es in der Vorschau anzeigen können. Nun, da der gesamte Inhalt der Seite hinzugefügt und angelegt wird, lassen Sie uns voran und machen den letzten Schliff bei allen Polsterungen und Margen und Ausrichtungen, die wir auf der Seite benötigen, dann machen Sie es vollständig reaktionsschnell, bevor wir fertig sind. 32. die Seite reaktionsfähig: Also, was ich tun werde, ist, die DevTools durch Drücken von Control Shift I aufzurufen Jeder Browser hat DevTools. Wenn Sie Chrome verwenden, können Sie weiterhin auf die DevTools zugreifen. Und dann werde ich dieses Responsive Design-Modus-Symbol direkt hier treffen. Und es wird diese verschiedenen Einstellungen für verschiedene Bildschirmgrößen bringen. Hier können Sie sehen, wir haben das Galaxy S9, das iPad, iPhone, und wir können durch die verschiedenen Geräte wechseln und sehen, wie die Webseite aussehen wird. So, wie Sie sehen können, das Menü zusammengebrochen. Die Suchleiste ist nach rechts verschoben, und unser Logo bleibt hier. Also haben wir immer noch die drei Elemente auf dem Tablet und auf dem iPhone. Die Elemente kommen näher zusammen, aber sie sind immer noch da. Und natürlich werden in jedem anderen Telefon die drei Gegenstände immer noch da sein. Also lassen Sie mich auf unsere Seite springen und lassen Sie uns die gleiche Kontrollverschiebung machen, I und C, den aktuellen Zustand. Also werde ich das Symbol hier treffen. Und mal sehen, was wir haben. Das ist also, was wir derzeit haben. Das ist, wie viele das Logo aussieht, es scheint, dass jedes Element oben auf dem vorherigen gestapelt ist. Wir haben hier einiges zu tun. Also gehe ich voran und traf das und schließe das dann. Und genau hier werde ich das treffen und das dann schließen. 33. Responsive Navbar: Kommen Sie zurück zu unserer Zielseite, Sie den Mauszeiger über Bearbeiten mit Elementor und klicken Sie auf Navigationsleiste. In Ordnung, also sind wir hier. Also, was ich tun will, ist dieses kleine Responsive-Modus-Symbol hier unten zu treffen. Es wird diese Bar hochbringen. Und wie Sie sehen, haben wir die verschiedenen Geräte hier, und Sie können das Handy wählen. Fangen wir damit an. Gehen wir in den Tablet-Modus. So sieht es aus. Ich denke, auf dem Desktop können wir damit arbeiten. Also, was ich tun möchte, ist eine andere Navigationsleiste für jedes Gerät zu erstellen, so dass wir es bequem anpassen können, ohne zu beeinflussen, wie es in anderen Bereichen aussieht. Also werde ich das duplizieren. Und das ist, was wir für das Tablet anpassen. Und ich werde es nochmal duplizieren. Und das haben wir für unsere Smartphones. Also in dieser Navigationsleiste, die nur auf dem Desktop sichtbar sein wird, werde ich darauf klicken, stellen Sie sicher, dass es die ist, die ich bearbeiten und L gehen in erweiterte. Scrollen Sie nach unten in finden Sie reaktionsschnell. Und was wir tun wollen, ist sich auf dem Tablet und dem mobilen Bildschirm zu verstecken und das zu aktualisieren. Das bedeutet, dass dieses Menü nicht wird, diese Navigationsleiste wird nicht auf mobilen Bildschirmen sichtbar sein. Und Sie können das an der Farbe erkennen, die es hat, wenn wir in einem anderen Modus sind. Wenn ich also klicke, um zum Tablet zu gehen, beachte, dass es jetzt Graustufen ist, hat sich die Farbe geändert. Ich meine, es ist nicht aktiv. Mit anderen Worten, im Moment ist es nicht sichtbar. Wenn Sie es auf dem Tablet sehen und wenn wir in den mobilen Bildschirm gehen und lassen Sie uns die Tablette napa auswählen, gehen Sie nach oben, scrollen Sie nach unten, reaktionsschnell. Und lassen Sie uns es auf Desktop und Handy verstecken. Aktualisieren Sie das. Und lassen Sie uns in die mobile Größe gehen. Und jetzt bemerken, dass beide diese Graustufen sind, so dass sie nicht aktiv oder mobilen Bildschirm sind. Und dann genau hier, Lassen Sie uns wählen, dass erweiterte und lassen Sie uns es auf Tablet und Desktop verstecken , so dass es nur auf Smartphones sichtbar ist. Jetzt, da wir das haben, möchte ich das ziehen und es an die Spitze legen, damit wir bequem damit arbeiten und sehen können , wie es aussieht, wenn es da oben ist. Was wir tun wollen, ist dieses Ergebnis zu erreichen. Bringen wir einfach die mobile Ansicht zurück. Und was wir erreichen wollen, sind diese drei Spalten, die wir derzeit haben sie übereinander gestapelt. Wählen Sie diese erste Spalte hier, die das Logo enthält. Wir wollen innerhalb des Layouts gehen. Und auf der Breite Punkt hat das Logo vielleicht 10 Prozent, sagen wir 20 Prozent, 30 Prozent. Ich klicke hier auf die Spalte, halte die Suchleiste gedrückt, und wir gehen hier rein, sagen wir 60 Prozent. Also 30 plus 60, das sind 90. Geben wir dem 10 Prozent die Säule dort als 10 Prozent, voila. Also haben wir sie in einer Reihe. Lassen Sie uns eine Vorschau der Änderungen sehen und sehen, wie es aussieht. Control Shift, I. Klicken Sie hier auf dieses Symbol. Wir müssen einen gewissen Rand hinzufügen und einige Ausrichtungen auf den Elementen machen. Also lass uns wieder hier reingehen. Und was wir tun wollen, ist, diese Spalte auszuwählen. Und gehen wir und brechen diese Verbindung und diese Verbindung. Und dann wollen wir irgendwo einen oberen Rand hinzufügen. Lassen Sie uns dasselbe für die Logo-Eddie-Spalte tun. Lasst uns das und das brechen. Dann lassen Sie uns das obere Randstück etwas bis irgendwo dort hinzufügen. Aktualisieren Sie das. Schauen wir uns an, wie es aussieht oder RI. Also jetzt sind sie richtig ausgerichtet, aber wir müssen immer noch etwas Rand oder Polsterung auf der linken und der rechten Seite des Bildschirms hinzufügen . Wenn Sie also dieses Element selbst auswählen oder zu Erweitert gehen, scheint es der Rand zu sein. Lassen Sie uns die Marge irgendwo dort verringern, negativ 20. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Lassen Sie uns auch dasselbe für das Logo tun. Wählen Sie das Logo selbst aus. Fortgeschritten. Lassen Sie uns versuchen, den Rand auf dieser Seite zu erhöhen und ihre Vorschau der Änderungen zu aktualisieren. Ich glaube, wir kommen irgendwo damit hin. Und natürlich können wir damit rumspielen, bis du zufrieden bist. Solange Sie wissen, wie Sie die Werkzeuge verwenden, können Sie mit diesen Zahlen und Werten herumspielen , bis Sie das perfekte Aussehen erhalten. Gehen wir nun zur Tablet-Größe über. Moment sind wir damit fertig. Und das ist unsere Tablette Napa. Und natürlich öffnen wir die iPad-Einstellung. Wir müssen das Menü drücken, um zu entscheiden. Wenn das Menü ausgewählt ist, klicken Sie im Navigationsmenü auf Layout. Gehen wir hier zur Ausrichtung, und legen wir es auf die rechte Seite. Dann, jetzt müssen wir diese 100 Prozent Breite teilen. Genau wollte ich. Wie Sie sehen können, ist diese Spalte lang, geht den ganzen Weg bis hierher, also sollte das etwa 55 Prozent betragen. Das sieht aus wie 45 Prozent. Wählen wir also die Logo-Spalte aus. Entschuldigen Sie, die 55 Prozent. Lassen Sie uns das Logo ganz nach links oder rechts drücken. Also wurde das Menü nach unten gedrückt, weil wir keine Werte für diese Spalten angegeben haben, so gut. Das kann 30 Prozent sein. Und lassen Sie uns das Menü 15 Prozent geben. Jetzt geben wir es vielleicht etwa 10 Prozent. Also lasst uns das 40 Prozent holen. Lassen Sie uns das 50% des Rechts geben. Also lassen Sie uns eine Vorschau der Änderungen in diesem Moment. Öffnen wir das iPad. Ich denke, wir können damit arbeiten. Aber natürlich können Sie immer weiter daran arbeiten bis Sie etwas bekommen, das Ihnen wirklich gefällt. Der Punkt hier ist zu lernen, wie man die Werkzeuge benutzt. Darauf bestehe ich. 34. Reaktionsbereich: Gehen wir zum nächsten Teil über, der der Heldenbereich ist. Wie Sie jetzt sehen können, haben wir auf dieser Seite zwei Bilder. Und auf der Seite haben wir den Text und die Knöpfe. Und wenn wir die Verschiebung I kontrollieren, bricht diese Überschrift Texte hier zusammen und kommt in die Mitte, ihre Mitte richtet die Tasten genau hier aus, unsere zentrale ausgerichtet. Jetzt haben wir nur ein Bild. Der andere ist verschwunden oder ist versteckt. Also lassen Sie uns diesen Heldenbereich ansprechen, weil wir damit fertig sind. Also lassen Sie uns dieses Fenster schließen. Gehen wir zurück zum Dashboard und lassen Sie uns in die Seiten gehen. Und unsere Titelseite ist Geschäft, so oft mit Elementor. Gehen wir also voran und klicken Sie auf das Symbol für den Responsive-Modus. Mal sehen, wie es auf dem Tablet aussieht. So wie wir es mit dem Menü genau hier getan haben, müssen wir diesen Spalten eine neue Breite für das Tablet bekommen. Und so was wollen wir mit diesem hier machen. Also, was wir tun wollen, ist auf diese Spalte direkt hier und in der Spalte klicken. Geben wir ihm 100 Prozent, die wir überschreiben. Genau so. Lasst uns das aktualisieren. Im Moment ist alles zentriert, also zentrieren wir unseren Text und unsere Schaltflächen. Also beginnend mit diesem, wählen Sie das und drücken Sie diese Ausrichtung, schreiben Sie die Auswahl dieses, tun Sie das gleiche. Und jetzt, da wir diese Schaltflächen hier haben, können wir sie nicht übereinander stapeln lassen, weil sie sich in verschiedenen Spalten befinden. Also, was wir tun werden, ist duplizieren Sie dies und wir können voran gehen und wählen Sie diese Top in einem Abschnitt, gehen Sie zu Erweitert responsive. Und dann sagen wir, hallo Don Tablette. Das wird also sichtbar sein, wenn wir hier sind. Aber wenn wir in den Tablet-Modus gehen, wird das sichtbar sein. Und was wir tun wollen, ist, das so darunter zu ziehen. Und jetzt können wir diese Kolumne loswerden. Klicken Sie hier auf diese Schaltfläche. Richten Sie es in der Mitte aus. Dasselbe Fall gilt für das. Aktualisieren Sie das, und ich möchte das bis zu diesem Punkt genau dort ziehen, aber wie Sie sehen können, ich es nicht direkt dorthin ziehen, also ziehe ich es einfach den ganzen Weg hierher. Und wenn ich es loslasse, wird es direkt darunter kommen. Finden Sie einfach einen Weg, um es direkt unter diese Texte fallen zu lassen, so dass Sie mit den komfortabler arbeiten und sehen, wie sie sich ausrichten. Also, jetzt gehen wir zurück und verstecken das auf dem Tablet. Aktualisieren Sie das. Und lassen Sie uns diese Schriftgröße reduzieren, weil sie ein wenig zu groß aussieht. Typografie. Ich denke, das ist ein wenig mutiger, also geben wir ihm ein Schriftgewicht von 700. Ich denke, es ist ein bisschen dunkler, so. Aktualisiert. Gehen wir also zu den Bildern, wählen Sie die Bildspalte und lassen Sie uns ihr eine Breite von 100 Prozent geben, genau wie wir es bei dieser Spalte genau hier getan haben. Also 100 Prozent und es nimmt bereits diese Form an, diese Form genau hier. Also, was ich tun werde, ist wählen Sie dieses Bild. Gehen Sie nun zu Advanced responsive Haydn Tablet. So wird gerade jetzt nur das auf dem Tablet sichtbar sein, genau wie hier. Also drücken wir Speichern und Vorschau Änderungen. So sieht es aus. Whoa, wir müssen diese beiden Knöpfe zuerst verstecken. Also lasst uns schnell wieder hierher gehen. Wählen Sie diese beiden Schaltflächen aus. Erweitert, reaktionsschnell, Hallo Don, Desktop und Smartphones. Aktualisieren Sie das. Und wenn wir zurück zu unserer Seite gehen, Ordnung, also haben wir unsere ursprünglichen Desktop-Tasten, aber wenn wir das Schafauge kontrollieren, haben wir jetzt diese zwei Tasten, die sich auf dem Tablet stapeln. Lassen Sie uns die Entfernung hier sehen. Wir müssen die Distanz hier etwas erhöhen. So gehen Sie zurück zu diesem Bild, Lassen Sie uns den inneren Abschnitt wählen. Wechseln Sie zu Erweitert. Und lasst uns den unteren Rand erhöhen. Zuallererst entfernen wir diesen Link. Es hat den oberen Rand bis zu irgendwo dort erhöht. Und der untere Rand bis irgendwo dort. Aktualisieren. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Richtig? So sieht unser Abstand hier ein bisschen besser aus. Also muss dieses Bild etwas korrigiert werden. Aber beachten Sie, dass wir nur dieses Bild jetzt haben, weil dieses andere auf dem Tablet versteckt ist. Was wir also tun müssen, ist, das ins Zentrum zu bringen. Also gehe ich voran und wähle diese Spalte aus. Und ich werde diese Links jetzt entfernen. Wählen Sie dann das Bild selbst aus, gehen Sie zu Erweitert. Sie verschieben auch diese Links. Dann bringen Sie die Polsterung zurück. Geben wir ihm eine Polsterung von 25. Und lassen Sie uns eine Vorschau der Änderungen oder rechts, denken, wie das, was wir bisher haben. Ich denke, wir müssen die Polsterung hier ein wenig weiter erhöhen, vielleicht ein 50, 70. Lassen Sie uns eine Vorschau der Änderungen anzeigen. In Ordnung, aber jetzt bemerken Sie, dass wir wegen der Polsterung das Bild hinzugefügt haben, dieser Abstand zu groß ist. Also lasst uns voran gehen und die Marge reduzieren. Die Tatsache am unteren Rand, lassen Sie uns den unteren Rand entfernen und das aktualisieren. Anzeigen einer Vorschau der Änderungen. Das ist eher so, aber wir können ein wenig weiter gehen und es auf 30 reduzieren. Vielleicht. Ich gehe voran und sehe die Änderungen erneut in der Vorschau. Das sieht gut aus. Nicht genau so, aber wir haben immer noch etwas, mit dem wir arbeiten können. Denken Sie daran, nehmen Sie sich Zeit, um daran zu arbeiten und es perfekt zu machen. Also bin ich vorerst mit unserem Heldenbereich zufrieden. Stempel, um zum Hauptteil zu gehen und es reaktionsschnell zu machen. 35. Reaktionsbereich: Also zurück zur Hauptseite, der eigentlichen Seite, denke, wir hatten es gut aussehend, aber denken Sie daran, dass wir Polsterung um dieses Bild hinzugefügt haben, keine Seiten, also haben wir hier eine Menge Polsterung. Reduzieren wir den oberen Rand in diesem Abschnitt. Also wähle ich diesen Abschnitt aus, gehe ich zu Erweitert Unlink, dass. Und Sie werden feststellen, dass es nach dem Entfernen der Standardränder gesprungen ist. Und jetzt können wir ihm die Marge geben, die wir wollen. Lasst uns einfach unsere Augen benutzen und sehen, wo wir sie haben wollen. Ich denke, wir müssen dir vielleicht 10 geben, marginal 10 oder richtig, also mag ich das bisher. Nächster Abschnitt, aber jetzt scheinen diese Symbole ein wenig gequetscht. Und so müssen wir einige Abstände zwischen dem Symbol und den Unterüberschriften hinzufügen , um dorthin zu gelangen und das zu tun. Also müssen wir diese vielleicht 10, 10% Prozent in diesen 90 Prozent bekommen . Lassen Sie uns dasselbe tun für diese 10 Prozent und für den flexiblen Zeitplan 90 Prozent. Und schließlich, dass 10, 90% das aktualisieren. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Alles klar, das sieht auch gut aus. Es ist viel besser, wenn man sich den Knopf hier anschaut. Es sieht fast aus wie ein Kreis. Mal sehen, wie das aussieht. Und sie scheinen diese Unterrubrik genau hier zentralisiert zu haben. Unseres ist nicht, ich glaube, ich mag unsere so. Wir müssen nicht genau das kopieren, was sie haben. Aber wenn du das erreichen wolltest, müssten wir das auswählen. Dann komm einfach her und sag, zentriere dich zurück. Im gleichen Fall damit. In Ordnung, also gehen wir zu diesem Knopf hier. Wie sieht das aus? Alles klar, sie sind übereinander gestapelt. Wir können das Gleiche tun, was wir für diese beiden Tasten hier gemacht haben. Oder wir lassen sie einfach Seite an Seite. Lassen Sie uns sehen, was wir damit erreichen können. Also lasst uns weitermachen und das auch duplizieren. So können wir einen auf dem Desktop verstecken. Lassen Sie uns das verstecken. Verbergen Sie es auf dem Desktop. Und jetzt lasst uns das tragen und es direkt darunter legen. Und lasst uns diese Kolumne hier loswerden. Aktualisieren Sie das. Dies wird also nur auf dem Tablet sichtbar sein, und dies wird auf dem Desktop sichtbar sein. Also lassen Sie es uns auf dem Tablet verstecken. Erweiterte Responsive. Hallo Don, Tablet. Aktualisieren Sie das. Und lassen Sie uns eine Vorschau der Änderungen. Da gehen wir. Sieht nett aus, genau so. Sie können mit dem Abstand zwischen den beiden herumspielen. Sie machen es schmaler oder breiter, oder? das so aus, wenn man zum Zeugenausweis weitergeht Wie siehtdas so aus, wenn man zum Zeugenausweis weitergeht? Also gerade jetzt zeigen sie nur eine und unsere spielt auch. Ich möchte dir eine Übung geben. Ich möchte, dass Sie diesen Abschnitt hier duplizieren und die Kopie desauf dem Tablet sichtbaren nur auf dem Tablet machen auf dem Tablet sichtbaren nur auf dem , um in jedem Moment nur ein Zeugnis zu zeigen. Und wenn Sie das getan haben, gehen wir jetzt zu diesem Bereich, erhöhen wir diese Marge hier. Wie Sie jetzt sehen können, ist es ein bisschen winzig. Also wähle ich diesen Abschnitt aus, gehe zu Erweitert, entferne diesen Link direkt dort und gebe ihm vielleicht eine 50. Ja, ich glaube, das gefällt mir. Machen wir das Gleiche für diesen blauen Abschnitt hier, oder wählen Sie den inneren Abschnitt hier aus. Gehen wir zu Fortgeschritten. Entfernen Sie diesen Link und geben Sie ihm einen 50 oberen Rand. Dann aktualisieren Sie das. Hier, Lassen Sie uns eine Vorschau der Änderungen oder richtig? So sieht es jetzt ein bisschen vorzeigbarer aus. Und wie Sie jetzt bemerken, war diese Spalte unter dieser Schaltfläche. Mittlerweile ist es auf diese andere Seite gesprungen. Und bei uns ist es nicht auf die andere Seite gesprungen. Und das liegt daran, wie wir es hinzugefügt haben. Denken Sie daran, wir hatten diesen Doppelspaltenabschnitt. Also, wie sollen wir das sagen? Auf dieser anderen Seite? Wir verwenden auch Duplizierung. Also lassen Sie uns das so duplizieren, wie wir es getan haben. Ziehen wir das da rein. Und jetzt wollen wir dies nur auf dem Tablet sichtbar machen. Also gehen wir zu Erweitert mit diesem ausgewählten responsive. High Don't Desktop und Smartphones aktualisieren, dass. Und wir wollen das auf Tablet und Smartphones verstecken. So weit fortgeschritten. Verstecken Sie sich auf Tablets und Smartphones. Ich denke, das sieht gut aus, aber lassen Sie uns eine Vorschau der Änderungen anzeigen. Ich glaube, ich mag, wie es aussieht. Aber wir können es in die Mitte legen, so. Ich wähle mich genau dort aus. Lassen Sie uns diese Spalte hier loswerden. Es spielt wirklich keine Rolle. Und wählen wir das aus. Es legte dies in die Mitte und das auch. Blättern Sie nach oben zum Stil. Als Nächstes. Hier sind unsere Zeugnisse, selbst scrollen, denken gleich, wo sie so weit sind, dann haben wir diese Verfügbarkeit von Fahrrädern. Denken Sie, wir können etwas Rand oder Polsterung hinzufügen und es ein wenig nach rechts schieben. Also lassen Sie uns diesen Text auswählen. Wechseln Sie zu Erweitert. Erhöhen wir einfach die Polsterung um 20. Aktualisieren Sie das. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Und beachten Sie, dass unsere Form hier zusammengebrochen ist, während das Formular hier noch inline ist. Und wieder, das liegt an der Methode, die wir verwendet haben, um das Formular hier mit für Minister hinzuzufügen, müssten wir hier ein benutzerdefiniertes CSS hinzufügen, um dies zu einem Inline-Formular auf Tablet zu machen. Aber das ist nicht unser Ziel. Unser Ziel ist es, die elementaren Werkzeuge zu verstehen. Für jetzt gehen wir einfach mit dem Zusammengestürzten so. Also lassen Sie uns das schließen. Als nächstes möchten wir zu diesem Abschnitt gehen. Mal sehen, was wir bisher haben. Ich klicke auf den Responsive-Modus. Scrollen Sie nach unten, richtig? Also ich denke, wir können diese Spalte hier machen scheint länger als diese Spalte zu sein und, und deshalb scheinen die Schaltflächen hier richtig ausgerichtet zu sein. Aber unsere scheinen ein wenig gequetscht zu sein. Lassen Sie uns diese Spalte ein wenig länger machen. Scrollen Sie nach unten. Ich wähle diese Spalte aus. Also lasst uns diesem eine 30 geben und diesem eine sieben geben. Okay, lass uns das aktualisieren. Richtig? Also lasst uns das Gleiche tun, genau hier. Erhöhen wir das auf vielleicht 60, 40. Aktualisieren Sie das. Wir sind fast fertig. Also mal sehen, was wir für diesen Abschnitt haben. Scrollen wir nach unten. Fast ähnlich. Aber jetzt bemerken, dass unsere Logos hier. Zunächst einmal können wir nur zwei Logos sehen und sie sind ein bisschen groß. Aber mal sehen, was wir dagegen tun können. Lassen Sie uns das Logo reduzieren und dann zu Einstellungen gehen. Und mal sehen, wo es Folien zu zeigen ist. Sagen wir vier. Ja, das gefällt mir. Lasst uns das aktualisieren. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie den ganzen Weg nach unten. Ja. 36. Responsive Abschnitt: Lassen Sie uns also die Fußzeile nach unten scrollen. Mal sehen, was wir auf unserer Seite haben. Unsere sieht also ein bisschen vermasselt aus. Wir müssen einige Verbesserungen vornehmen oder Knauer, also springen wir gleich hier rein. Und jetzt, da wir mit dem Inhalt der Hauptseite fertig sind, können wir fortfahren und diese schließen und zum Dashboard beenden. Dann klicke ich darauf. Lassen Sie uns in Aussehen gehen, Elementor Kopf- und Fußzeilengenerator. Und lassen Sie uns die Fußzeilenbearbeitung mit Elementor bearbeiten. In Ordnung, also lasst uns in den Responsive-Modus gehen. Lass uns in die Tablette gehen. Was wir also tun müssen, ist das zu duplizieren, wie wir es mit dem Header oder mit der Navigationsleiste getan haben. Und wir machen dies nur auf dem Tablet sichtbar. Responsive. Also wollen wir es auf dem Desktop verstecken. Und Smartphones. Aktualisieren Sie das, und wir möchten dies nur auf dem Desktop sichtbar machen. Also lasst uns das aktualisieren. Also kommen wir direkt hierher und wählen Sie den Abschnitt aus. Lassen Sie uns diese Links hier entfernen. Und dann lassen Sie uns die Polsterung miteinander verknüpfen und diesem etwas Polsterung geben. Geben wir ihm vielleicht eine 50. Lassen Sie uns also die erste Spalte hier auswählen. Wechseln Sie zu Layout. Geben wir ihm vielleicht 20, 20% oder 20 Prozent. Und lassen Sie uns das hier eine 30% ige Aufnahme geben. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Steuerung der Shift. Ich klicke auf dieses Responsive-Modus-Symbol, und das ist, was wir auf dem Tablet haben. Also denke ich, ich mag, wie es aussieht. Also werde ich das Dashboard verlassen und ich werde in Seiten gehen. Lassen Sie uns anzeigen, klicken Sie mit der rechten Maustaste auf Link in neuer Registerkarte öffnen, und lassen Sie uns die Seite jetzt anzeigen. Also gehe ich zu Control Shift. Ich werde in den Responsive-Modus wechseln. Und schauen wir uns es von oben nach unten auf einem iPad oder einem Tablet an. Mal sehen, wie es auf einem Galaxy S9 aussieht. Und so werden Sie feststellen, dass im Moment sieht es nicht schlecht, vorzeigbar oder mobilen Bildschirm. Und das liegt daran, dass ich absichtlich den mobilen ansprechenden Teil ausgelassen habe. Jetzt, da Sie gelernt haben, wie Sie die verschiedenen Elemente auf dem Tablet reagieren, werden Sie die gleichen genauen Prinzipien verwenden, um es auf dem mobilen Bildschirm reagieren zu lassen. 37. Schlussbemerkung: Also, das ist es, Leute, das markiert das Ende der Klasse. Ich hoffe, Sie haben genossen zuzusehen. Natürlich ist dies die erste in einer Reihe von Klassen, in denen ich Ihnen zeigen werde, wie Sie Elementor verwenden , indem Sie reale Landing Pages erstellen, die erfolgreich waren, Landing Pages weltberühmter Marken. In dieser Klasse haben wir angehoben. Nächste Klasse, werden wir auf eine andere berühmte Marke suchen und werden ihre Zielseite mit Elementor reproduzieren , bis das nächste Mal bin ich ein Junge, kann Bursa Stück.