Lerne Elementor und WordPress durch das Design einer Landing-Seite

1. Kurs-Einführung: Willkommen zurück zu einem weiteren tollen Grundkurs bei mir kann Besser, weißt du, wie immer, meine Aufgabe ist es, dir zu zeigen, wie man schöne Landingpages entwirft. Und sie alle verfügen über eine ganz besondere Klasse namens Design, eine Podcast-Zielseite mit Elementor. Wenn Sie also einen Podcast haben oder einen Podcast starten möchten und wissen möchten, wie Sie dafür schöne Landingpages entwerfen. Dieser Kurs ist für dich. Auch wenn Sie keinen Podcast starten möchten oder keinen Podcast besitzen, aber dennoch lernen möchten, wie man schöne Landingpages mit Elementor entwirft. Dieser Kurs ist für dich. Jetzt gibt es keine Voraussetzungen für diese Klasse. Wenn du also noch nie Elementor benutzt hast, ist das okay. Ich zeige Ihnen alles, was Sie als Anfänger wissen müssen , und wenn Sie sich daran gewöhnen, Elementor zu verwenden, lernen Sie, wie Sie die restlichen Tools verwenden können. Moment konzentrieren wir uns darauf, Ihnen zu helfen, zu verstehen, dass die wichtigsten Tools und Funktionen in Elementor einige der Themen sind, die wir in dieser Klasse behandeln werden darunter das Hinzufügen und Stylen von Titeln, Absätzen, Schaltflächen, Bildern und andere Spezialeffekte über Ihre Landing Pages. So erstellen Sie Anmeldeformulare zum Sammeln von Benutzerdaten. So erstellen Sie klebrige Menüs, dass das Hauptmenü beim Scrollen oben auf der Seite bleibt. Lasten werden auf reaktionsschnelles Design achten. Wir arbeiten daran, eine Landingpage auf Smartphones, Tablets und Desktops fantastisch aussehen zu lassen. Schauen Sie sich an, wie Sie elementare Funktionen mit erstaunlichen Plugins von Drittanbietern erweitern können. Einige der Funktionen, die in elementar selbst fehlen, können Elementor mithilfe von Plugins von Drittanbietern erweitern. Wenn Sie also bereit und aufgeregt sind, zu lernen , wie man schöne Landingpages mit Elementor entwirft. Ich freue mich sehr, dir das ohne Western mehr Zeit zeigen zu können. Lasst uns gleich reinspringen. Richtig. 2. Übersicht der landing: Wenn wir uns also auf den Einstieg vorbereiten, denke ich, dass es für uns entscheidend wäre, einen kurzen Blick auf die Ergebnisse zu werfen, die wir erwarten sollten. Also habe ich heute bereits die Landing Page oder das Design geöffnet. Und hier ist es, wir haben eine gut aussehende Nav-Bar hier drüben. Ziemlich einfach. Das Logo auf der linken Seite und das Menü auf der rechten Seite. Und dieses Menü hier hat einen Button, und ich zeige Ihnen, wie Sie diesen Button zu Ihrer Navigationsleiste hinzufügen , falls Sie möchten, dass sie auffallen soll. Ich zeig dir, wie das geht. Dann werden wir sehen, wie man diese wellenförmigen Pinsellinien erstellt, Spezialeffekte gab es Landing Page. Als nächstes haben wir die Helden-Sektion. Ziemlich einfach. Zwei Spalten. Die Spalte mit dem Heldenbild und der Spalte einem Textblock und diesen Partnerlogos genau hier. Als nächstes haben wir eine weitere doppelte Spalte, hat ein Bildelement und diesen Textblock mit einem Button genau hier. Und wir werden sehen, wie das geht. Dann haben wir hier den Episodenbereich. Dies sind im Grunde Post und ich zeige Ihnen, wie Sie die Episoden als Post erstellen können. Und wenn jemand klickt, hören Sie zu, jetzt wird er auf die Seite weitergeleitet, die diese Episode enthält. Und dort werden sie einen Spieler finden. Und sie können direkt hier klicken und weitere Episoden laden. Es wird auf die Seite weitergeleitet, die alle anderen Episoden oder mehr Episoden enthält. Dann haben wir einen weiteren zweispaltigen Abschnitt mit einem Bildbereich und einem Textblock auf der rechten Seite. Dann haben wir diesen Abschnitt genau hier, der ein Datenerfassungsformular enthält. Einige der Hauptelemente, die Sie benötigen, um Ihre Landing Page hinzuzufügen, um sie effektiver zu gestalten, gehören Dinge wie Formulare. Formulare sind wichtig, da sie Ihnen helfen, Kundendaten oder Benutzerdaten und deren Daten zu erfassen , die für Sie wichtig sind, da Sie damit verstehen können, wie Ihre Website funktioniert, und können mit dem Personen, die ihre E-Mails an Sie eingereicht haben. Und wir haben eine sehr einfache Fußzeile mit einem Logo, die Navigationsleiste hier in der Mitte, einen Copyright-Text. Dann haben wir diese Social-Media-Symbole. Das ist im Grunde das, was wir bauen. Das Wichtigste hier zu verstehen ist wie Sie diese kostenlosen Tools von Elementor und anderen elementaren Plugins verwenden können, um eine schöne moderne Landingpage für Ihren Podcast zu erstellen. Und mit diesen Fähigkeiten können Sie auch mehr Websites, mehr Zielseiten für jeden anderen Zweck gestalten , nicht nur unbedingt Podcasts. Lass uns gehen und anfangen zu entwerfen. Und natürlich fangen wir mit der Navigationsleiste an, diesem Abschnitt genau hier. Lasst uns also zum Dashboard springen und wir sehen uns in der nächsten Lektion. 3. Schnelles Update - 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. Installieren von notwendigen Plug-ins: Willkommen zurück. Also hier sind wir im WordPress-Dashboard. Jetzt ist dies eine brandneue Installation von WordPress, die ich speziell für diesen Kurs vorbereitet habe. Also habe ich momentan keine Plugins installiert. Wenn ich also einfach auf Plugins klicken könnte, werden Sie feststellen, dass wir keine Plugins installiert haben. Das erste, was wir tun müssen, um die Navigationsleiste zu erstellen, um einige der Plug-Ins zu installieren, werden wir Plugins verwenden, um ein paar der Dinge hier zu erstellen. Das ist eine gute Sache an WordPress. Es ermöglicht Ihnen, seine Funktionen und Funktionen zu erweitern indem Sie Plugins installieren, die viel mehr können als WordPress. Wordpress selbst verfügt bereits über Tools, um all diese Dinge zu erstellen. Plug-Ins erleichtern jedoch das Erstellen von Landingpages wesentlich , da sie spezifische Tools bereitstellen, die einfach zu bedienen sind. Das erste, was wir tun müssen, ist Elementor zu installieren , und alle anderen Plug-Ins werden beim Erstellen einer Seite verwendet. Gehen wir also zurück zum Dashboard und zu Plugins, ich sage „Neu hinzufügen“, oder du kannst auch auf Plugins klicken, Neu hinzufügen. Also gehe ich zu „Neu hinzufügen“. Und in der Suchleiste suche ich nach Elementor. Da haben wir es. Ich installiere Elementor Website-Builder von Elementor.com. Und ich scrolle nach unten und suche Elementor Kopf- und Fußzeilen-Builder und klicke auf Installieren. Nun, dies ist ein Plugin, das erstellt wurde. Erweitern Sie also die Funktionen und Funktionalitäten von Elementor. Und Sie werden feststellen, dass viele andere Plug-Ins hier, wenn Sie nach Elementor suchen, den Namen für Element oder etwas Elementor teilen. Das bedeutet also, dass es sich um Plugins handelt, die erstellt wurden, um die Funktionalität zu erweitern , die mit dem Elementor Website-Builder geliefert wird. Bevor wir diesen Elementor- und Elementor-Header-Footer-Builder aktivieren, benötigen wir auch ein weiteres Plugin, das als Sticky-Header-Effekte bezeichnet wird, für Elementor. Also installiere das auch. Das sind also die drei Plugins, die verwendet werden, um unsere Elementor-Navigationsleiste zu erstellen. Jetzt, da sie installiert sind, gehen wir in die Liste der Installationsplugins und aktivieren sie alle zusammen. Also sind wir hier drin, indem wir auf installierte Plugins klicken. Ich wähle sie alle aus. Und ich gehe in dieses Dropdown-Menü und wähle Aktivieren und dann bewerben. Jetzt haben wir die drei Plugins installiert. Wir sind jetzt bereit, unsere Navbar zu bauen. Also lasst uns das in der nächsten Lektion machen. 5. Das Astra installieren: Und willkommen zurück. Das nächste, was wir jetzt tun wollen, da wir Plugins installiert haben, ist die Installation eines Themes. Im Moment müssen wir also in die Erscheinungsthemen eingehen. Und da es sich um eine brandneue Installation von WordPress , ist das Theme 2021 standardmäßig aktiv. Dann haben wir die Themen 2019 im Jahr 2020, die optional sind und Sie können jedes von ihnen aktivieren. Aber ich möchte ein Theme von Drittanbietern namens Astra hinzufügen. Astra ist eines der mächtigsten kostenlosen Themen auf dem Markt. Und es ist ein Mehrzweckthema, Sie jede Art von Website erstellen können, die Sie sich vorstellen können. Angenommen, Sie möchten eine Zahnarzt-Website erstellen, eine Schulwebsite erstellen und eine Website für einen Anwalt erstellen. Astro hilft Ihnen dabei, da es voll mit Funktionen und Tools ausgestattet ist , mit denen Sie Websites einwandfrei erstellen können. Geben wir also hier Astra in die Suchleiste ein. Und es ist ein erstes Ergebnis, das genau hier herauskommt. Sagen wir also installieren. Alles klar, also lasst es uns jetzt aktivieren. Und jetzt können Sie sehen, dass es im Moment das aktive Thema ist. Jetzt, da wir das Theme installiert haben und unsere Plugins bereit sind, lassen Sie uns einen schnellen Überblick über den Arbeitsbereich, den Elementor-Workspace, haben , während Sie sich beim Entwerfen Ihrer Website ansehen. Und das machen wir in der nächsten Lektion. 6. Übersicht des elementor: Willkommen zurück. Lasst uns weitermachen. Wir haben also bereits unser Theme und einige der Plug-Ins, die verwendet werden, sind bereits installiert. Lassen Sie uns also einen schnellen Überblick über den Arbeitsbereich haben, während wir die Navigationsleiste erstellen. In der Erscheinung gehe ich also zum Elementor Kopf- und Fußzeilen-Builder. Und natürlich, weil es sich um eine brandneue Installation des Kopf- und Fußzeilen-Builders handelt. Wir haben hier keine Kopf- oder Fußzeilen aufgeführt, aber sobald wir mit der Erstellung unserer eigenen beginnen, werden sie hier aufgeführt. Sagen wir also „Neu hinzufügen“. Und geben wir ihm einen Namen, Nav Bar. Und Sie werden feststellen, dass wir all diese Optionen genau hier haben. Auf der rechten Seite haben wir diese Vorlageneinstellung unter Beitragsattribute. Ändern Sie es also in Elementor volle Breite. Und dann eine Astro-Einstellungen. Dies sind die Einstellungen, die mit dem Thema geliefert werden. Wir möchten die Sidebar so einstellen, dass sie die Sidebar kennt, da wir keine Sidebar, keine Sidebars haben wollen. Und wir möchten, dass das Inhaltslayout mit voller Breite gestreckt wird. Dann möchten wir einige dieser Abschnitte deaktivieren. Wir wollen nicht den standardmäßigen primären Header, der mit Astra geliefert wird. Wir wollen auch nicht, dass der mobile Header mit Astra geliefert wird. Wir wollen weder den Titel noch die Fußzeile. Lassen Sie uns das also vorerst veröffentlichen. In Ordnung, Jetzt werden Sie feststellen, dass wir diesen Typ, die Art der Vorlage hier haben Typ, die Art der Vorlage hier und ein Dropdown-Menü hat. Wählen Sie also die Kopfzeile im Dropdown-Menü aus, damit weitere Optionen angezeigt werden. Auf der gesamten Website anzeigen, wenn Sie möchten, dass sie in bestimmten Teilen der Website oder der gesamten Website oder sogar auf einer einzigen Seite angezeigt werden soll bestimmten Teilen der Website oder der gesamten Website oder sogar auf einer einzigen Seite angezeigt , haben wir alle Optionen, die mit diesem Plugin geliefert werden. Man ist also auf der gesamten Website und auf den Benutzerrollen sichtbar. Wer kann es also verwenden, wer kann Zugriff auf die Navigationsleiste haben und wer kann es bearbeiten, nur für den Fall dass andere Personen an Ihrer Website arbeiten und Sie der Hauptadministrator von Wordpress sind. Sie können zulassen, dass Sie festlegen, wer diese Kopf- und Fußzeile bearbeiten kann. Wählen Sie also Alles aus. Und lassen Sie es uns für die Canvas-Vorlage verfügbar machen. Und Canvas ist eine der Optionen unter Beitragsattributen. Denken Sie daran, dass wir diese beiden Elementor in voller Breite gesagt haben. Wir haben auch Elementor Canvas. Und wenn Sie sich daran gewöhnen, elementar zu verwenden, werden Sie verstehen, welche Vorlagen es sich handelt. Aber im Moment wissen Sie nur, dass wir, wenn wir diese Ergebnisse auf unserer Seite erhalten möchten, mit Elementor in voller Breite arbeiten müssen, und das ist so ziemlich die Vorlage, die ich für fast jede einzelne Webseite verwende, die ich erstellt habe. nun mit diesen Optionen Lassen Sie uns nun mit diesen Optionen auf Aktualisieren klicken. Und jetzt sind wir bereit, mit Elementor zu bearbeiten. Was wir gerade gemacht haben, war zu erstellen, wenn ich einfach wieder zum Aussehen zurückkehren könnte, Elementor, Kopf- und Fußzeilengenerator. Was wir gerade erstellt haben, ist, dass die Navigationsleiste hier auch einen Ordner erstellt, aber das machen wir später. Im Moment haben wir den Napa. Und wenn wir auf Bearbeiten klicken, geht es hier wieder hinein, wo wir können, wo wir alle Einstellungen konfigurieren können. Aber um es visuell zu erstellen, um so auszusehen, im Front-End, muss jetzt mit Elementor bearbeitet werden, wird zum Frontend weitergeleitet , von wo aus wir jetzt mit der Montage des Ganzen beginnen können. Und jetzt gibt uns das eine großartige Gelegenheit, einen Überblick über den Elementor-Arbeitsbereich zu haben. Also hier sind wir im Elementor Workspace. Hier werden wir unsere gesamte Bearbeitung im Frontend durchführen. Im Grunde ziehen wir jedes Element, das wir benötigen, aus diesen Panels genau hier. Lassen Sie mich das und das und das und alle einfach zusammenbrechen . Alle diese Farben hier enthalten also Elemente und diese Elemente können hier gezogen und abgelegt werden, je nachdem, was Sie hinzufügen möchten. Wenn wir zum Beispiel hinzufügen möchten, wählen wir zum Beispiel diese dreifache Spalte aus, Sie sehen, dass sie generiert wurde. Wenn wir also etwas hinzufügen wollten, klicken wir auf das Plus. Und diese Elemente werden hier erscheinen und wir können alles hineinziehen, was wir wollen. Wenn wir hier etwas hinzufügen möchten, klicken wir auf das Plus und ziehen ein Bildelement dort hinein. Und während das Bild noch ausgewählt ist, können wir hier drin Sachen bearbeiten. Wir können dieses Bild hinzufügen. Legen Sie Medien ein. Wir können die Spalten ziehen und die Größe ändern. Grundsätzlich arbeiten wir in Elementor mit Spalten. Der blaue Bereich hier, der drei Spalten hat, wird als Abschnitt bezeichnet. Und der Abschnitt ist eine dreifache Säule. Und es gibt verschiedene Arten von Abschnitten genau hier. Und du kannst auch deine eigenen erstellen. Wenn wir zum Beispiel einen einzelnen Spaltenabschnitt erstellen , der einmal eine Spalte hier hat, können wir diese Spalte so duplizieren. Nur für den Fall, dass Sie den Mauszeiger über Elemente bewegen, sehen Sie dieses Einblendmenü nicht so. Gehen Sie in diese Einstellungen und gehen Sie in Benutzereinstellungen und stellen Sie sicher, dass die Bearbeitungsgriffe auf Ja eingestellt sind. Lass mich zurückgehen. Im Grunde ziehen Sie also nur Elemente in Spalten. Und wenn das Objekt, das Sie gerade gezogen haben, aktiv ist, können Sie Änderungen daran vornehmen, da Sie beachten, dass es sich bei Auswahl der Option „Divider bearbeiten“ befindet, da es sich um Trennelemente handelt, wenn Sie auf den Text klicken. Beachten Sie, dass es sich ändert zu Überschrift bearbeiten. Wenn wir auf das Bild klicken, wird es geändert, um das Bild zu bearbeiten, um uns mitzuteilen , dass dies das aktuelle Element ist, das wir gerade bearbeiten. Und so können wir jede Art von Änderungen vornehmen, die wir wollen. Konfiguriere dieses Bild so, dass es größer ist, um undurchsichtig zu sein, füge Schlagschatten hinzu und wir werden sehen, wie das alles geht. Ich wollte Ihnen nur einen schnellen Überblick darüber geben was Sie in Ihrem elementaren Arbeitsbereich erwarten sollten. Also du, also gewöhnst du dich daran, während wir weitermachen. Denken Sie daran, wenn Sie diese anderen Bereiche direkt hier oder diese Panels öffnen, werden Sie feststellen, dass wir das Pro-Panel haben, das Elemente enthält, auf die Sie nur zugreifen können, wenn Sie ein Elementor Pro-Mitglied sind. Wenn Sie den Elementor Pro haben, verwenden wir gerade die kostenlose Version von Elementor. Aber denken Sie daran, dass wir auch Tool-Plugins für Elementor installiert haben. Das war Elementor Kopf- und Fußzeilen-Builder. Und klebrige Header-Effekte, es ist irgendwo hier drin. Aber wenn wir ein Plugin installieren, das zur Erweiterung von Elementor erstellt wurde, wird es hier aufgeführt und es enthält eigene Elemente, um die Leistungsfähigkeit von Elementor zu erweitern. Daran solltest du dich also erinnern. Also will ich dich nicht zu Tode langweilen. Lasst uns gleich reingehen und sofort anfangen, diese Website zu erstellen. Lassen Sie mich jetzt einfach alles loswerden. Lasst uns diese Seite aktualisieren. Und ich habe vergessen, dir zu sagen, was wir hier unten haben. Wir haben also, dass wir hier unsere Fortschritte aktualisieren werden. Wenn wir eine Vorschau der Änderungen anzeigen möchten, klicken wir hier und ich zeige Ihnen, wann wir das tun. Dann klicken wir hier, wenn wir bereit sind, die Seite anzusprechen, wenn wir sie so gestalten möchten, dass sie auf Mobilgeräten und Tablets reagiert. Dann ist das Nächste hier die Geschichte. Wenn wir also darauf klicken, sehen Sie eine Liste aller Bewegungen, die wir gemacht haben, seit wir mit der Bearbeitung der Seite begonnen haben. Und wenn wir zum Beispiel auf diesen Zeitpunkt klicken. Wie Sie sehen können, sieht dieses Symbol aus wie eine Uhr, die sich gegen den Uhrzeigersinn bewegt. Es zeigt, dass dies wie zurückspulen und in die Vergangenheit zurückgehen. Wenn wir also darauf klicken, gelangen wir zurück in den Zustand, in dem sich die Seite in diesem Moment befand. Wenn wir also zurück zu Abschnitt hinzugefügt werden, haben wir diesen Zeitpunkt einen Abschnitt hinzugefügt. Das ist also die Geschichte. Dann haben wir hier den Navigator, nur für den Fall, dass Sie so viel Zeug hier auf Ihrer Seite haben so viel Zeug hier auf , dass Sie nicht einmal wissen, wo Sie sind, wenn Sie Sachen bearbeiten. Sie können auf diesen Navigator klicken und Sie können nun eine Aufschlüsselung von allem, was Sie auf Ihrer Seite haben, als Gliederung sehen . Und genau hier haben wir mehr Änderungen, mehr Einstellungen, die wir im Laufe des Fortschritts erfahren werden. Und genau hier oben, nur für den Fall, dass du etwas hinzufügen willst, ein Element von hier und vielleicht bist du da drin. Sagen wir zum Beispiel, lassen Sie mich hier einfach schnell etwas hinzufügen. Titel dort. Und jetzt, weil das aktiv ist, bearbeiten Sie den Seitentitel, wenn wir hier etwas hinzufügen möchten, müssen wir nicht unbedingt immer darauf klicken und können einfach direkt auf dieses Symbol klicken. Und Ido enthüllt die Farben, all die Schmerzen. Wenn Sie es zum Beispiel nicht sind, können Sie die Farben sehen und etwas hinzufügen. Klicken Sie darauf und es werden die Schmerzen aufgedeckt und Sie können das Element auswählen, das Sie ziehen möchten. Alles klar, also reicht das vorerst über den Arbeitsbereich. Der Rest wird es kennenlernen, wenn wir mit unserer Westernzeit Fortschritte machen. Lasst uns direkt hineinspringen und beginnen, den Header visuell zu gestalten. In der nächsten Lektion. 7. Das Firmen-Logo hinzufügen: Willkommen zu dieser Lektion. Jetzt, da wir einen Überblick über den elementaren Arbeitsbereich hatten, ist es an der Zeit, mit dem Hinzufügen dieser Elemente zu beginnen. Das erste, was wir tun wollen, ist das Firmenlogo hinzuzufügen. Wenn wir also wieder in die Navigationsleiste gehen, müssen wir eine Doppelspalte auswählen. Und dieser zweispaltige Abschnitt ist so geteilt. Natürlich wird es in der Lage sein, die Größe zu ändern, wenn wir Fortschritte machen, um ihm die richtige Größe zu geben. Und ich schlage vor, dass Sie das Gleiche machen, was auf dieser Seite hinzugefügt wird, ist dieses Navigationsmenü. Und auf der linken Seite wird das Logo hinzugefügt. Und das Logo ist ein Bildelement. Klicken Sie also genau dort auf das Pluszeichen. unter dem Basis-Panel Lassen Sie mich unter dem Basis-Panel das unter dem Basis-Panel zusammenklappen, das die Grundelemente jeder Website enthält. Wählen wir das Bildelement aus und lassen Sie es dort hinein. Ohne irgendwo anders zu klicken. Das aktive Element, das bearbeitet werden soll, ist jetzt das Bild. zu bestätigen, klicken Sie einfach darauf und dies wird hier angezeigt. Wählen wir also ein Bild aus, klicken Sie dort hinein. Wir haben vorerst keine Elemente, also lass mich eine Datei hochladen. Und ich habe diesen Ordner bereits für dich vorbereitet. Es heißt Podcasts Landing Page Class, und ich werde in der folgenden Beschreibung angeben, um es herunterzuladen. Es enthält alle Elemente, die wir auf der Website verwendet haben. In diesem Ordner haben wir Projektressourcen und wir haben alle Bilder einschließlich der Logos. Also doppelklicke ich darauf und importiere die Logos oder die RI. Und so werden Sie feststellen, dass wir zwei große Logos und zwei kleine Logos haben. Wir verwenden die kleinen Logos für das Website-Branding. Und ich habe diese beiden hinzugefügt, nur für den Fall, dass Sie das Logo woanders hinzufügen und kreativ werden müssen. Also gehe ich mit diesem, der die Besetzung in Weiß hat. Also wähle ich das aus. Legen Sie dann Medien ein. Und Sie werden feststellen, dass der weiße Teil nicht sichtbar ist , da der Hintergrund selbst weiß ist. Was wir also tun wollen, ist, den Hintergrund in dieses Blau zu ändern. Also lasst uns da reingehen. Und wir wählen diesen ganzen Abschnitt aus, den blauen Abschnitt mit den beiden Spalten. Und nur um sicherzustellen, dass Sie dies bearbeiten, sollte es hier oben Abschnitt bearbeiten sagen. Und so gehen wir in den Stil, gehen wir in den Stil. Unter Hintergrund. Klicken Sie hier auf das erste Pinselsymbol und klicken Sie direkt hier neben Farbe. Und lasst uns das Blau geben. Und anstatt diese Farbcodes zu erraten, hatte ich diese blaue Farbe bereits erstellt und genug gesagt. In dieser Datei projektieren Assets. Ich stelle diesen README-Projekthandbuch im Podcast-Landingpage-Klassenordner zur Verfügung , über den ich gerade gesprochen habe. Also lass mich das aufmachen. Und wie Sie sehen können, haben wir hier verschiedene Farben, das schöne Blau, Hellgrün und Dunkelgrau. Aber natürlich können Sie Ihre eigenen Farben verwenden. Also kopiere ich dieses nette Blau. Kopiere das. Lassen Sie mich das minimieren, schließen Sie diesen Ordner. Und hier drin Hintergrund, normale Farbe. Ich füge es da rein. Und jetzt haben wir diesen Hintergrund und das Logo ist sichtbar. Lasst uns das aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Da haben wir es also. Unser Logo sieht alles gut aus. Als Nächstes möchten wir das Navigationsmenü hinzufügen. Also lasst uns das in der nächsten Lektion machen. 8. Das nav: Willkommen zurück. Lassen Sie uns jetzt die Zeit fortsetzen, um das Navigationsmenü hier hinzuzufügen. Und wie Sie sehen können, haben wir vier Menüpunkte, Landingpage Home Über uns Kontakt. Und das sind im Wesentlichen Webseiten. Wenn Sie hier auf ein Element klicken, sollte es Sie zur Seite führen. So führt Sie zum Beispiel über uns zu einer Über uns Seite. Das erste, was wir tun müssen, ist, diese vier Seiten zu erstellen. Gehen wir zurück in den elementaren Arbeitsbereich, klicken wir auf dieses Plus, melden Sie sich hier in der Nähe dieses Pluszeichens an. Und hier drin tippe nav, nav. Und denken Sie daran, dass eines der Plugins, die wir installiert haben, Header Footer Builder für Elementor war. Eines der Elemente des Navigationsmenüs hier ist das Navigationsmenü mit diesem HF an der Ecke. Das ist also diejenige, die wir brauchen. Lass es uns ziehen und fallen lassen. Und sobald wir das gemacht haben, erscheint das Menü noch nicht. Warum muss es erscheinen? Weil es keine Menüs auf Ihrer Website gibt und klar steht, dass es auf unserer Website keine Menüs gibt. Also müssen wir ein WordPress-Menü erstellen, das wir dieses Element verwenden werden, dieses Navigationsmenüelement zum Anzeigen. Wir werden es gleich hier zeigen. Und wie wir das machen, lassen Sie mich zuerst das aktualisieren. Lasst uns das aktualisieren. Also springe ich in das Dashboard, ohne diesen Workspace jetzt zu schließen. Also hier drinnen müssen wir in die Erscheinungsmenüs gehen. So wird auf diese Seite weitergeleitet. Und hier können wir Menüs für unsere Website erstellen, wir sind Pressemenüs und Sie werden feststellen, dass Sie unter Menüs Ihr erstes Menü unten erstellen. Und dann können wir auf der Speisekarte einen Namen geben. Also vielleicht so etwas wie ein neues Menü. Und machen wir es zu unserem Hauptmenü. Also lasst es uns erstellen. Jetzt wurde das Menü erstellt, aber wir haben keine Elemente. Hier sehen Sie Menüelemente aus der Spalte auf der linken Seite hinzufügen. Und die Spalte links rechts hier enthält viele Elemente und einer der Menüpunkte hier kann eine Webseite sein, kann Webseiten sein, und wir können Webseiten hinzufügen, was gerade der Fall ist. Aber die Menüpunkte können auch Beiträge sein. Zum Beispiel können Sie Blogbeiträge, einen Blogbeitrag und einen weiteren Blogbeitrag und dann einen weiteren Blogbeitrag haben. Das ist auch möglich. Sie können auch Ihre eigenen benutzerdefinierten Links erstellen. Sie können also genau hier einen Link erstellen, hey, HTTP, WW-Punkt etwas, und dann möchten Sie den Linktext vielleicht den Rechner sagen und dann diesen Taschenrechnerelement hier hinzufügen, damit jemand darauf klickt, weitergeleitet wird diese URL. Sie können auch Kategorien als Menüpunkte haben. Was wir also tun wollen, ist die vier Webseiten zu erstellen, zu denen das Navigationsmenü führen soll. Also lasst uns in die Seiten gehen. Und offensichtlich habe ich keine Seite, weil dies eine Neuinstallation von WordPress ist. Also sage ich „Neu hinzufügen“. Und ich mache weiter und schließe das. Und wir haben diesen Arbeitsbereich hier. Dies ist der Backend-Editor, der mit WordPress geliefert wird und Gutenberg heißt. Und das ist das Äquivalent zu Elementor, was wir hier haben, wir haben einen Editor, den wir im Front-End-Standard-Editor verwenden können heißt Gutenberg und es funktioniert im Back-End genau hier. Aber was wir tun wollen, ist dieser Seite einfach einen Namen zu geben und mit Elementor zu bearbeiten. Also geben wir ihm einen Namen. Und dann rechts hier, bevor wir auf Veröffentlichen klicken, gehen wir zur Vorlage und setzen es auf Elementor volle Breite. Und genau hier unter Seitenattribute, Astra-Einstellungen, sagen wir keine Seitenleiste und kein Inhaltslayout, volle Breite gestreckt. Dann lassen Sie uns diese drei wie gewohnt deaktivieren, deaktivieren Sie auch die Fußzeile. Dann veröffentliche. Jetzt, da es veröffentlicht wurde, gehen wir am wenigsten zu den Seiten zurück. Und jetzt ist es hier aufgeführt. Ich möchte drei weitere Seiten erstellen, damit wir vier Seiten haben. Also werde ich diesen Teil schnell weiterleiten und weitere Seiten erstellen. Dann fahren wir von dort aus fort. Alles klar, jetzt sind wir zurück. Wir haben vier Seiten erstellt. Ich hoffe, du hast das Gleiche gemacht. Sie können so viele Seiten erstellen, wie Sie möchten, solange sie direkt hier füttern können. Nachdem wir unsere Seiten bereit haben, können wir sie als Menüpunkte verwenden. Gehen wir also in die Menüs für das Erscheinungsbild. Und jetzt werden Sie feststellen, dass wir unter Seiten die vier Seiten haben, die wir gerade erstellt haben. Und dieser Teil des neuen Menüs, das wir erstellt haben sagt uns, dass wir Elemente aus der linken Spalte hinzufügen können. Also lasst uns alle von ihnen überprüfen. Und dann füge ein Menü hinzu. Schau was passiert oder fahre. Sie wurden also alle direkt hierher gebracht und wir können sie als Menüpunkte verwenden, genauso wie sie von oben nach unten gestapelt sind. Es wird von links nach rechts in derselben Reihenfolge angezeigt. Also Angebot generieren wird der erste Punkt hier sein. Also ziehe ich nach Hause, um der erste Gegenstand zu sein, der es direkt hierher bringt. Ziehen Sie nach Hause, um das erste Element auf der linken Seite zu sein, dann der Blog und dann der Shop. Und dann sage ich Save Menu. Im Moment kann unser WordPress-Menü mit der Kopfzeilenfußzeile angezeigt werden. Erstellen Sie mit Elementor ein Plug-In, das wir im Frontend platziert haben. also zur Vorderseite dieser Seite im Elementararbeitsbereich gehe und unsere Änderungen gespeichert habe, klicke ich auf Control R, um die Seite zu aktualisieren. Und jetzt werden Sie feststellen, dass das Menü jetzt angezeigt wird. Also gehe ich weiter und wähle es aus. Klicken Sie auf eine beliebige Stelle innerhalb der blauen Linie innerhalb des blauen Rahmens. Und Sie werden feststellen, dass sich die Nachricht, die hier war, geändert hat , weil wir jetzt ein Menüende haben. Dies ist das Menü, das wir erstellt haben, das neue Menü. Neues Menü und die Elemente, die wir diese Webseiten erstellt haben, die wir als Menüelemente zum neuen Menü hinzugefügt haben , werden jetzt hier im Frontend angezeigt. Jetzt wollen wir, dass dieses Menü auf der rechten Seite steht. Während es also noch im Menü Inhalt ausgewählt ist, werden Sie feststellen, dass wir das letzte Menü haben. Lassen Sie uns zuerst das als Knopf setzen. Angebot generieren ändert sich in eine solche Schaltfläche. Dann lasst uns das Layout öffnen. Unter Ausrichtung. Lass uns nach rechts gehen. Und wir möchten, dass das Menü weiß ist. Also hat zuerst dieses Layout zusammengebrochen und in den Stil eingegangen. Dann haben wir unter dem Hauptmenü viele Möglichkeiten und wenn ich das Hauptmenü zusammenbringe, haben wir vier Farben. Lassen Sie mich also zuerst das Hauptmenü öffnen. Also können wir genau hier hingehen, wo es heißt Pornografie. Ich klicke auf Topographie und lass es uns in Montserrat ändern. Lass mich einfach direkt dort scrollen. Also habe ich auf Typografie geklickt, Familie. Und dann gib hier in das Feld Monate herum ein. So eine Schriftart, die großartig aussieht, aber Sie können jede beliebige Schriftart auswählen. Klicken Sie irgendwo außerhalb dieses Kastens. Dann übernehme Textfarbe. Klicken wir genau dort auf diese Farbe und ändern wir sie in Weiß. Und Sie werden feststellen, dass es sich in Echtzeit zu breit ändert. Lasst uns das aktualisieren. Jetzt wollen wir mit diesem Grünton arbeiten, der sich auf das Logo reimt. Lass mich das ein bisschen ziehen. Also springe ich dorthin, wo wir unsere Farben hatten, und wähle dieses hellgrün aus. Kopiere das und springe dann zurück zu dem Ort, von dem wir arbeiten. Und unter Topographie haben wir die Textfarbe in Weiß oder Normalzustand geändert. Aber beim Schweben hat es derzeit diesen Grünton, aber wir wollen den Grünton. Also auf dem Hover möchte ich darauf klicken und das schöne Grün genau dort einfügen. Nein, lass mich das wählen. Kopiere das und füge es dort ein. Füge es da rein. Und wenn wir den Mauszeiger darüber bewegen, da es diesen Grünton hat, ändern wir diese Knöpfe von Grün. also irgendwo außerhalb dieses Feldes klicke, um es loszuwerden reduziere ich das Hauptmenü und öffne den Button. Und unter Hintergrundtyp klicke ich auf das Pinselsymbol. Es wird dieses aktuelle Grün enthüllen. Darauf klicke ich. Und dann werde ich das los und füge das Grün, aus dem wir kopiert haben, aus dem Textdokument ein. Und jetzt hat es diesen Grünton, aber jetzt ist der eigene Text verschwindet, also wollten wir weiß bleiben. Wenn Sie also nach draußen klicken, um die Textfarbe beim Mauszeiger anzuzeigen, möchten wir, dass die Textfarbe weiß bleibt. Also beim Schweben bleibt es weiß oder wir können es in dieses Blau ändern. Lasst uns das zuerst aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Oder RI. Unsere Navbar nimmt also Gestalt an. Mir gefällt, was ich sehe, aber natürlich müssen wir noch etwas mehr arbeiten, um diese Marge genau hier auszugleichen. Aber das machen wir, keine Sorge. also tun müssen, Was wir also tun müssen, ist, dass der Text die Farbe ändert. Während das gesamte Element immer noch ausgewählt wird, indem ich irgendwo innerhalb des blauen Rahmens klicke, gehe ich zu diesem Textdokument und kopiere das schöne Blau. Kopiere das. Und dann hier drin möchte ich gehen, während wir noch das Navigationsmenü bearbeiten. Texte über Hover sollten sich zu diesem Lou ändern. Wenn wir jetzt den Mauszeiger darüber bewegen, ändert es sich in das Blau. Lassen Sie uns also die Änderungen überprüfen. Oder RI, großartig, das gefällt mir. Da haben wir es also. Das nächste, was wir tun wollen, ist hier an diesem Pinselstrich zu arbeiten , bevor wir zur Helden-Sektion übergehen. Und das machen wir. Nun, wir machen den Heldenbereich, weil dieser Pinsel tatsächlich Teil dieses Abschnitts ist nicht Teil der Navigationsleiste ist. Also sind wir fertig mit der Nav-Bar. Wir sehen uns, während wir in der nächsten Lektion an der Helden-Sektion arbeiten. Wir sehen uns in Kürze. 9. Das Heldenbild hinzufügen: Willkommen zurück zu einer anderen Lektion. Wir sind jetzt bereit, eine Helden-Sektion zu bauen. Jetzt, da unsere Navbar fertig ist, ist es jetzt an der Zeit, die Helden-Sektion zu bauen. Und dieser Heldenbereich ist in zwei Spalten unterteilt. Die Spalte mit dem Bild und der Spalte dem Heldentext und diesen Symbolen genau hier. Das erste, was wir tun wollen, ist das Heldenbild hinzuzufügen. Also lasst uns weitermachen und das machen. Also hier drin möchte ich diese Seite schließen, weil wir diesen Workspace nicht mehr verwenden. Denk dran, wir haben die Nav-Bar gebaut. Jetzt, da wir mit der Bearbeitung der Navbar fertig sind, können wir zunächst sicherstellen, wir unsere Änderungen speichern. Wenn Sie also grün sind, klicken Sie auf Aktualisieren. Und dann ja, lass uns das Dashboard verlassen. So können wir jetzt die Landing Page selbst erstellen. Also hier sind wir im Back-End werden in die Seiten gehen weil unsere Landing Page definitiv eine Seite ist. Und wir können eine dieser Seiten als Zielseite auswählen. Und standardmäßig wollte ich einfach nur die Homepage sein. Klicken wir also unter Home auf Bearbeiten. Und natürlich wird genau hier genommen, denn wir gehen davon aus , dass Sie es direkt hier im Back-End mit Gutenberg bearbeiten möchten. Aber wir möchten auf Mit Elementor bearbeiten klicken, damit wir es visuell erstellen können. Alles in Ordnung, also hier sind wir. Jetzt. Wenn Sie den Bereich öffnen, werden Sie zunächst feststellen, dass diese Navigationsleiste jetzt nicht editierbar ist. Dies ist nicht der Arbeitsbereich zum Bearbeiten der Navigationsleiste. Um dies zu tun, müssten wir unter Appearance Elementor, Kopf- und Fußzeile wieder in das Dashboard gehen . Und dann klickten wir unter der Navbar auf Bearbeiten und/oder bearbeiten mit Elementor. Und wir würden ins Frontend gehen und es bearbeiten können. Aber im Moment schließe ich das. Und jetzt bearbeiten wir hier die Landing Page selbst, den Hauptinhalt der Landingpage abgesehen von Kopf- und Fußzeile. Also lasst uns weitermachen und hinzufügen, lasst uns unser Heldenbild hinzufügen. Also klicke ich darauf, um eine Doppelspalte hinzuzufügen. Weil man schon sagen kann, dass es sich um eine Doppelspalte handelt. Ich ziehe die Kante nur ein wenig, weil das Bild nicht so groß ist wie der TextContent. Und hier drin füge ich einfach so ein Bildelement hinzu. Dann klicke ich da rein. Und weil ich dieses Bild hier nicht habe, müssen wir reingehen. Lassen Sie mich diese Bilder aus unserem Ordner hochladen. Denken Sie daran, dass ich erwähnt habe, dass Sie es bekommen können , Sie können es aus der folgenden Beschreibung herunterladen. Also gehe ich in das Model-Bild und lade dieses hoch. Bestimmte Medien. Und da haben wir es. Als Nächstes möchten wir die hebräischen Texte zusammen mit diesen Icons gleich hier hinzufügen. Also lasst uns das in der nächsten Lektion machen. 10. Den hero hinzufügen: Jetzt ist es an der Zeit, diesen Helden-Textblock hinzuzufügen. Eine Sache, die ich erwähnen muss, ist, dass es wichtig ist, dass Sie einen H1 auf Ihrer Zielseite oder auf einer beliebigen Seite haben . den Fall, dass Sie nichts über HTML-Überschriften wissen. Html hat sechs Überschriftenstufen. Der größte ist H1 und der kleinste ist H6. H1 ist das Wichtigste und es sagt Browsern und Suchmaschinen in einem kurzen Satz, worum es auf Ihrer Webseite geht. Behalte das also im Hinterkopf. Sie können nicht mehr als ein H1 auf Ihrer Seite haben, aber Sie können mehrere H2, H3, H4, H5 und H6 haben. Und lasst uns weitermachen und in den Arbeitsbereich springen. Und dann müssen wir zuerst auf dieses Pluszeichen klicken, um diese Elemente aufzurufen und dann die Textüberschrift genau dorthin zu ziehen. Und du wirst feststellen, dass du deine Überschriftentexte hier hinzufügst und wir können das genau hier machen. Also denke ich, es heißt: Willkommen bei den Podcasts. Podcasts, oder? So und mach es zu einem solchen Satz. Und jetzt, während es noch ausgewählt ist, gehen wir in Stil Textfarbe ein und ändern wir es auf 40, 40, 40. Das ist also ein dunkelgrau, nicht schwarz, es ist ein dunkelgrau. Und sagen wir, lasst uns irgendwo klicken, klicken wir irgendwo außerhalb des Tellerrandes, um es loszuwerden. Lasst uns das aktualisieren. Und während es aktualisiert wird, gehen wir in die Topographie ein. Und lasst uns die Familie um zwei Monate wechseln. Schnappen wir uns diesen Größenknopf genau hier und ziehen ihn, um die Größe zu vergrößern. Lassen wir es uns vorerst irgendwo dort liegen. Natürlich werden wir es optimieren, bis wir die Ergebnisse haben, nach denen wir suchen. Ich wollte nur tief gehen, damit du die Dinge verstehst, die wir tun. Also klicke irgendwo da draußen. Und das nächste, was wir tun wollen, ist diese Beschreibung genau hier zu erstellen. Also kopiere ich das. Und ich klicke hier auf dieses kleine Icon, um diese Elemente aufzurufen. Und dann ziehe ich diesen Texteditor. Und wenn diese blaue Linie unter dem h one Element erscheint, lasse ich sie dort fallen. Während es noch aktiv ist, wähle ich alle diese gelöschten Texte aus und füge das ein, was wir gerade von hier kopiert haben. Dann aktualisiere das. Bevor wir weiter gehen, habe ich mich nur daran erinnert, dass, wenn wir den H1 genau hier auswählen, es tatsächlich nicht als H1 unter dem Inhalt festgelegt hat, während dies unter der Registerkarte Inhalt ausgewählt wird, hier unten sollte HTML ändere es auf hey, eins. Und wie Sie aus dem Dropdown-Menü sehen können, haben wir H eins, um zu hassen, sucht dann diese anderen Elemente. Aber wir wollen, dass es eins ist. Und lasst uns das aktualisieren. In Ordnung, also lasst uns eine Vorschau der Änderungen anzeigen. Das haben wir im Moment. Das erste, was Sie bemerken werden, ist, dass wir diese Gegenstände nach unten schieben müssen. Also lasst uns das machen. Erhöhen wir die Marge an der Spitze. Und wir tun das, indem wir den gesamten Abschnitt auswählen, diesen ganzen Abschnitt, direkt hier, mit der rechten Maustaste klicken und den Abschnitt bearbeiten. Und jetzt ist es das aktive Element hier. Lass uns fortgeschritten hineingehen. Und lassen Sie uns diesen Link entfernen und ihm einen oberen Rand von 100 geben. Lasst uns 80 Jahre machen und lasst uns das aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Oder richtig, das haben wir also. Das nächste, was wir tun wollen, ist diesen Pinselstrich hier hinzuzufügen. Also lasst uns reingehen. Lassen Sie mich diese Vorschau schließen und gehen wir in unseren Arbeitsbereich. Und ich klicke auf den Abschnitt selbst. Um den Rand oben zu erhöhen, machen wir das in den Spalten selbst. Gehen wir in diese Spalte, wählen Sie das aus, und jetzt ist es aktives Element, das wir bearbeiten. Und lasst uns fortgeschritten hineingehen, diesen Link brechen. Und dann geben wir ihm für die oberste Marge etwas wie 70. Das sind jetzt auch 770 für das Modell. Lasst uns weitermachen und auf seine Kolumne klicken. Und dann lasst uns fortgeschritten hineingehen. Brechen Sie diese Verbindung auf. Lasst uns die Spalte 50 behalten. Ja, 50, Top-Marge. Lasst uns ihr eigenes Recht aktualisieren, also lasst uns die Änderungen überprüfen. Genial, das haben wir im Moment. 11. hero hinzufügen: Das nächste, was wir tun wollen, ist diese Pinselstriche hier hinzuzufügen. Also möchten wir diesen Pinseleffekt hinzufügen. Und das machen wir hier oben im Abschnitt. Wie Sie sehen können, schneidet sich dieser Abschnitt gerade mit der oberen Navigationsleiste. Und so können wir diesen Pinselstrich hier hinzufügen. Wählen wir also den Abschnitt selbst aus, indem wir dort auf diesen Bereich klicken oder mit der rechten Maustaste klicken und den Abschnitt bearbeiten. Und dann lasst uns in Stil geformte Trennwand gehen. Und dann möchten wir sagen, dass wir für den oberen Formteiler in diesem Dropdown-Menü Wellen pinseln möchten, Sie können jede gewünschte Option auswählen. Aber in diesem Fall wollen wir mit Wellen gehen, putzen, und dann wollen wir ihm eine Höhe geben. Und jetzt kannst du es nicht sehen, weil es standardmäßig keine Farbe hat. Was wir also tun wollen, ist dieses blaue, diese blaue Farbe hier zu kopieren . Also werde ich Tab, also diese Seite hier, Sie haben diese bereits in der Beschreibung unten. Ich kopiere das nette Blau. Dann geh ich wieder rein. Und während unser sexuell ausgewählter und wir sind Einblicke Kachelformteiler in den oberen Bereich gehen und die Farbe in das Blau ändern. Jetzt nimmt es jetzt schon Gestalt an. Versuchen wir, ihm vielleicht eine Höhe von 60 zu geben. Und lasst uns das aktualisieren. Und lassen Sie uns eine Vorschau von Änderungen anzeigen oder fahren. Also gefällt mir, wie geht's uns? Aber jetzt beachte, dass diese Kurve jetzt die Marge hier reduziert hat. Wir müssen die Marge in dieser Spalte erhöhen. Wählen wir diese Spalte aus, wenn wir den Mauszeiger darüber bewegen. Lass uns fortgeschritten hineingehen. Lasst es uns erhöhen, lasst uns unser Auge irgendwo dort benutzen. Für mich sind es 110. Aktualisiere das. Jetzt. Jetzt fragen Sie sich vielleicht, warten Sie noch einmal, diese Podcasts, Podcasts auf unserer Referenzseite sind etwas dicker als willkommen bei der. Also was passiert genau dort? Jetzt gibt es zwei Methoden, mit denen wir diese Ergebnisse genau hier erzielen können. Wenn wir also wieder in unseren Workspace gehen, ist die erste Methode, die wir verwenden können, das löschen, also werde ich das hervorheben. Dann. Lassen Sie mich das hervorheben und steuern Sie dann X, um es zu schneiden. Und jetzt, da wir das noch haben, können wir das duplizieren. Und während dies ausgewählt ist, können wir diesen Text dort einfügen. Und dann können wir jeden einzelnen von ihnen einzeln bearbeiten. Also kann ich kommen und sagen, damit ich das etwas kleiner machen kann, vielleicht etwa 44. Und dann wählen Sie diese beliebige Typografie im Seitenstil aus. Ich kann ihm ein Gewicht von 800 geben. Und jetzt ist es dicker als dieser andere. Ich kann diesem ein Gewicht von geben, während es noch unter Stil-Typografie ausgewählt wird, geben Sie ihm ein Gewicht von 300. So aktualisieren Sie dann Änderungen. Da haben wir es also. Wenn wir also eine Vorschau der Änderungen auf der Seite selbst anzeigen , haben wir das. Und es sieht ungefähr ähnlich aus. Aber jetzt gibt es hier einen Sumpf. Während wir das getrennt haben , haben wir die beiden getrennt. Jetzt. Wir haben jetzt zwei H 1s und wir wollen nicht, dass sie 20 sind. Welches ist auf dieser Landing Page, wir brauchen nur ein H1. Wir können sie also nicht beide als H 1s haben. So schwach, was wir tun können, ist dies auszuwählen und diese unter Inhalt in H2 zu ändern. Sagen wir das und sehen Sie eine Vorschau der Änderungen an. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Und wir haben etwas, das dem nahe kommt, was wir auf der letzten Seite haben. Aber wie Sie feststellen werden, ist unsere Beschreibung hier natürlich etwas länger als unsere Referenz. Und das liegt daran, dass wir zuerst diese Kolumne etwas schmaler machen müssen. Lasst uns das also schnappen und das wahrscheinlich bis zu diesem Punkt hochziehen. Das bedeutet also, dass wir die Größe des Podcasts bis zu diesem Zeitpunkt reduzieren müssen. Aktualisieren Sie das dann und sehen Sie sich die Änderungen an. Alles klar, genial. Hier wird unser Feature-Sektion hin und wir möchten diese Icons hier hinzufügen. Sehen wir uns also in unserer nächsten Lektion an, wie das geht. 12. Einfügen von den Helden: Alles klar, jetzt ist es an der Zeit, diese Funktionen für den Abschnitt zu erstellen. Wenn wir also zu unserem Workspace hier zurückkehren, möchten wir als erstes diese Funktionen hinzufügen. Also mache ich weiter und schnapp mir das, kopiere das. Dann komme ich hier rein und klicke auf das Symbol, ziehe eine Überschrift. Wenn die blaue Linie dort erscheint, lassen Sie sie dort fallen. Und jetzt, da es hier das aktive Element ist, kann ich das Featured in Texten genau dort einfügen. Und im Moment ist es ein bisschen groß, also lasst uns zuerst seine Farbe auf 40, 40, 40 ändern. Und dann ändern wir es in Roboto. Es ist ein Monster. Ok. Und lassen Sie uns seine Größe auf vielleicht etwa 18 reduzieren. Font-Gewicht 700. Und lasst uns das aktualisieren. Oder richtig, als Nächstes wollen wir diese Icons hier erstellen. Und diese Symbole befinden sich in Spalten. Dies ist also eine Kreuzung und eine weitere Kreuzung mit Spalten darin. Das erste, was wir tun wollen, ist hier reinzugehen und eine Kreuzung auszuwählen. Und das ist im Grunde ein Abschnitt, der in einem anderen Abschnitt oder in einer Spalte abgelegt werden kann . Ich kann also diesen ganzen Abschnitt nicht in einen anderen Abschnitt legen, aber ich kann eine Kreuzung tragen und ihn in eine Spalte oder einen anderen Abschnitt fallen lassen. Wir erinnern uns also daran, dass wir Spalten duplizieren können, also werde ich dies auch duplizieren. Jetzt haben wir drei Spalten. Und wie Sie sehen können, nimmt es bereits Gestalt an. N hast du es genau hier erraten. Wir werden Bildelemente hinzufügen. Was ich tun möchte, ist einfach eines der Elemente zu stylen und dann können wir sie einfach duplizieren und in den restlichen Spalten hinzufügen. also für dieses Bild Lassen Sie uns also für dieses Bild die Dateien öffnen. Wählen Sie Dateien aus. Und ich möchte innerhalb des Podcast-Partners, Podcast-Partnerlogos, navigieren. Und ich wähle sie alle aus, weil wir sie alle benutzen wollen. Jetzt, da dies bereits geladen ist, lassen Sie mich das auswählen und Medien einlegen. Das ist der erste. Klicken Sie also mit der rechten Maustaste auf Spalte bearbeiten und gehen Sie dann in Erweitert wissen Lassen Sie uns zuerst in den Stil gehen, und gehen wir zu Border. nächste Boxschatten befindet sich auf dem Symbol „Bearbeiten“, also klicke darauf. Und in dem Moment, in dem Sie das tun, werden Sie feststellen, dass der Box-Schatten erscheint und wir können damit beginnen, ihn zu stylen. Das einzige, was ich vorerst tun möchte, ist, die Deckkraft zu reduzieren, so dass der Boxschatten bis zu diesem Grad weniger sichtbar ist, vielleicht eine 22. Und dann klicke ich irgendwo drin, wo man ein bisschen mehr verschwommen ist und dann ein bisschen mehr ausbreitet. Sagen wir bis zu diesem Punkt. Ich möchte auch reduzieren, reduzieren wir diese Deckkraft ein wenig. Und damit klicken wir über diese Box hinaus und lassen Sie uns den Grenzradius so etwas wie 10 machen. Und lasst uns das aktualisieren. Das gibt ihm eine abgerundete Ecke wie diese. Also mal sehen, was wir haben. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Das haben wir im Moment, Sie werden feststellen, dass dieses Logo sehr winzig zu sein scheint. Mal sehen, was wir dagegen tun können. Klicken, solange die Spalte noch aktiv ist. Nur um es zu bestätigen, möchte ich hierher kommen und diesen Link brechen. Nun, das heißt, setzt die gesamte Polsterung um das Logo zurück. Und lass es uns vorerst so lassen, ich mag die Größe. Was wir als nächstes tun wollen, ist das Bild selbst auszuwählen und den Mauszeiger über das Bild zu bewegen. Nicht das ist die Spalte, und dann ist dies das Bild. Das möchte ich duplizieren. Und noch einmal duplizieren Sie dort, lassen Sie es dort hinein, ziehen Sie es und lassen Sie es dort hinein. Und dann wähle ich diese Spalte gleich hier aus und klicke mit der rechten Maustaste auf Kopieren. Und ich sage mit der rechten Maustaste. Stil einfügen. Und jetzt erben diese dies in diesem Moment, diese Spalte erhält auch das Styling der ersten Spalte. Und ich mache dasselbe für diese Rechtsklick-Einfüge-Stil. Jetzt haben die drei Spalten das gleiche Styling, aber beachten Sie, dass sich die Seiten immer noch berühren. Wir wollen die Marge erhöhen. Während dies noch ausgewählt ist, Spalte bearbeiten erweitert, lassen Sie uns den Link brechen. Und dann geben wir für den linken Rand eine Fünf. Und für den richtigen Rand noch fünf. In Ordnung, also klicken wir mit der rechten Maustaste auf Kopieren und fügen wir diesen neuen Stil ein, fügen Sie den Stil ein. Machen wir das Gleiche hier. Stil einfügen und jetzt haben wir genug Abstand um sie herum. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen oder richtig. Das nächste, was wir tun wollen, ist hier hineinzuklicken, und das wird das Bild selbst auswählen, nicht die Spalte. Und während das Bild ausgewählt ist, wählen wir eine zweite Logo-Busroute. Machen wir das Gleiche hier. Wählen wir das dritte Logo aus, Google Play. Und dann, da wir diese drei haben, lassen Sie uns diesen Abschnitt so duplizieren. Und lasst uns das Gleiche hier wiederholen. Apple-Podcasts. Wählen wir ein Ford-Logo, dann das fünfte Logo und dann das allerletzte Logo oder rechts. Aber jetzt beachte, dass sie sich oben und unten berühren. Wir müssen also die oberste Marge in diesem Abschnitt erhöhen. Was wir also tun müssen, ist den Schnittpunkt selbst auszuwählen, zu Erweitert zu gehen und diesen Link direkt dort zu entfernen. Und dann lassen Sie uns für den oberen Rand unser Auge nutzen, um entsprechend zu positionieren. Ich glaube, das ist der richtige Ort. Lasst uns das aktualisieren. Aber jetzt denke ich, dass dieser Schlagbox-Schatten ein bisschen dunkel ist. Also möchte ich hier eine der Spalten auswählen. Und im Stil gehe ich in die Grenze. Box-Schatten. Klicken Sie also auf diese MNR, um diese Deckkraft irgendwo weiter zu reduzieren, vielleicht 11. Und dann kopiere ich den Stil und kopiere den Stil. Klicken Sie mit der rechten Maustaste auf Stil einfügen, und wiederholen Sie dies für alle von ihnen. Stil einfügen, Stil einfügen. Und schließlich fügen Sie Stil ein. Lassen Sie uns das aktualisieren und eine Vorschau auf Änderungen oder Varietäten anzeigen. Ich mag es, dass die Ergebnisse so weit kommen. Ich denke, du würdest tatsächlich besser leben als regional. Großartig. Jetzt werden Sie feststellen, dass wenn wir den Mauszeiger über diese Symbole hier bewegen, tatsächlich Links gibt, die zu einer anderen Website führen, wenn Sie darauf klicken. Also müssen wir diese Links herstellen. Wie wir das machen, ist das Bild selbst auszuwählen und eine der Optionen und der Inhalt hier wird ein Link sein. Sie können benutzerdefinierte URL sagen und jede beliebige URL eingeben, zu der Sie Personen führen möchten. Wenn diese zum Beispiel Apple Podcasts sind, so Apple Podcasts sind, etwas wie www dot apple podcasts.com, Slash hören. Und wenn Sie möchten, dass der Link in einer neuen Registerkarte geöffnet wird, wenn jemand darauf klickt, können Sie auf dieses Zahnrad klicken und sagen, ein neues Fenster öffnen und das aktualisieren. Und lasst uns die Änderungen überprüfen oder fahren. Und wenn jemand darauf klickt, da ich weiß, dass ich den Mauszeiger darüber bewege, ist es ein Link und wenn jemand klickt, wurde er zu einer neuen Seite weitergeleitet und unsere Seiten sind noch intakt. Also lass mich die Seite schließen. Also lasst uns weitermachen und das Gleiche für den Rest der Bilder wiederholen. Also klicke ich da drin auf das Bild. Dann füge ich vorerst einfach ein Hash-Zeichen hinzu. Fahren Sie fort und fügen Sie die gewünschten Links hinzu. Für Ihren Fall, weil es Ihnen gehört, ist eine echte Website. Lasst uns weitermachen und sagen „In neuem Fenster öffnen“. So. Denken Sie daran, in einem neuen Tab zu öffnen. Und schließlich Spotify oder richtig. Lassen Sie uns also eine Vorschau der Änderungen anzeigen. Und jetzt, wenn wir den Mauszeiger über einen von ihnen bewegen, ist das ein Link. Und wenn Sie darauf klicken, gelangen Sie zu einer ganz neuen Seite. Jetzt, da wir mit der Helden-Sektion fertig sind, gehen wir zum Hauptbereich der Landingpage, der von hier aus der vorgestellten Episode beginnt. Also die Liste der Episoden zur Episodengalerie, ganz unten rechts vor der Fußzeile. Also lasst uns fortfahren und diese vorgestellte Episode in der nächsten Lektion erstellen. 13. Der Adding Nachricht, Abschnitt: Willkommen zurück zu einer anderen Lektion. Im Moment möchten wir diesen Abschnitt mit den vorgestellten Episoden erstellen. Und eine Sache, die ich an Elementor mag, ist die Tatsache, dass Sie Elemente wiederverwenden konnten. Sie werden feststellen, dass wir eine Ähnlichkeit zwischen diesem Textblock und diesem Textblock haben. Im Inneren unseres Arbeitsbereichs können wir also eine doppelte Spalte erstellen. Und diese doppelte Spalte enthält diesen Textblock mit einem Button und diesem Bild. Fügen wir also zuerst ein Bildelement hinzu. Ich klicke dort auf das Pluszeichen und lasse dort ein Bild fallen. Beachten Sie jedoch, dass wir hier oben keinen Spielraum haben. Wenn der Abschnitt ausgewählt ist, gehe ich nach fortgeschritten. Brechen Sie diese Verbindung auf. Und dann gib es für den oberen Rand vielleicht 90. Lass uns ein 100 geben. Stimmt's? Das ist also die Position. Und was wir dann tun können, ist, diese Elemente genau hier zu duplizieren. Also dupliziere ich das einfach und ziehe es hinein und lasse es fallen, wenn die blaue Linie erscheint. Ich wiederhole es für diese andere Überschrift. Lassen Sie es genau dort fallen und duplizieren Sie es dann und lassen Sie es direkt unter den H1 fallen. Aber jetzt auf unserer Referenzseite ist dies kein H1. Wir können nicht mehr als eine Seite eins haben. Also lasst uns hinzufügen, lasst uns das ändern. wir sicher, dass es sich nicht um eine handelt. Machen wir es zu einem HA2 und reduzieren wir seine Größe. Und reduzieren wir auch das Schriftgewicht, das Schriftgewicht auf etwa 700. Und jetzt lasst uns ketten, schnappen wir uns das. Lasst uns das zuerst schnappen. kopiere ich einfach. alles muss nicht erneut eingegeben werden. Ich klicke da rein und dann füge ich hier ein, was wir gerade kopiert haben. Kopiere das. Und dann wähle ich das aus. Und innerhalb des Inhalts zeichne ich den anderen Wortlaut genau dort ein. Sie werden also feststellen, dass es zu viel Platz benötigt hat. Zuallererst ist das Bild auf dieser Seite etwas klein, also passen wir es entsprechend an. Dann reduzieren wir die Größe dieses H2 bis irgendwo dort. Sie werden feststellen, dass sich der Abstand hier fast berührt. Also wähle ich den Bearbeitungsbereich aus. Und dann gehe ich im Layout unter Columns Lücke zu, ich wähle breit aus. Und das erhöht den Abstand zwischen den beiden Spalten ein wenig. Lasst uns das also aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Alles in Ordnung, mir gefällt, was wir bisher bekommen. also wieder hier reingehe, wähle ich das Bild aus. Und lass uns hier reingehen. Und lasst uns das Bild des Modells hochladen, das wir gerade dort haben. Diese Podcaster-Bild zu genial, also fügen Sie Medien ein. Und da haben wir es, aber es ist ein bisschen groß, also reduzieren wir die Größe so. Und dann sagen wir Update. Lassen Sie uns eine Vorschau der Änderungen anzeigen. In Ordnung, also lasst uns jetzt weitermachen und diesen Button hinzufügen. Also gehe ich hier rein. Und ich wähle die Schaltflächenelemente aus und lasse sie direkt unten fallen. Und standardmäßig hat es dieses grüne, das unsere Navigationsleiste irgendwann hatte. Also müssen wir das Grün durch diesen Bildschirm ersetzen. Also kreuze eine Kreuzung, nimm das. Also schnapp ich mir das Grün. Kopieren Sie das und gehen Sie hier zurück, wählen Sie die Schaltfläche an einer beliebigen Stelle innerhalb dieses blauen Rahmens aus. Und obwohl es noch ausgewählt ist, gehe ich zur Stilfarbe. Und dann füge ich das hier ein, füge es dort ein und klicke jetzt irgendwo drin. Jetzt ist das Grün der Schatten, den wir wollen. Aber wir wollen, dass es diese blaue Schrift hat und beim Mauszeiger jeder weiß sein wird. Also wollen wir diese blaue Farbe im normalen Zustand haben und beim Schweben wollte ich weiß sein. Also lasst uns das machen. Zuallererst, was heißt es? Hör dir diese Episode an. Lassen Sie uns also, solange es noch ausgewählt ist, zum Inhalt gehen. Gehen wir zu Icon, Icon-Bibliothek. Lass uns so etwas wie Kopfhörer machen, vielleicht so etwas. Einfügen. Und jetzt haben wir ein Icon und wir können es vor oder nach dem Text stellen und die Texte ändern, während wir noch unter Inhalt sind. Gehen wir zum Text und sagen, dann lasst uns das aktualisieren. Und natürlich können wir angeben, wohin die Schaltfläche Benutzer umleiten soll, damit wir unsere URL direkt hier eingeben können, https, www.dot_com. Und wenn Sie möchten, dass es in einer neuen Registerkarte geöffnet wird, wenn jemand auf die Schaltfläche klickt, klicken Sie auf das COG-Rad und wählen Sie natürlich das neue Fenster aus. Probieren Sie es aus und sehen Sie, was es macht. Aber jetzt, dann nochmal, merkt man, wie dies eine richtige Polsterung an den Seiten hat. Also lasst uns weitermachen und diesem Button eine schöne Polsterung hinzufügen. Lassen Sie uns zunächst diese Schriftfarbe ändern. Lass mich gleich hier klicken und mir das Blau holen. kopiere ich. Und während es immer noch unter der Schaltfläche Stil ausgewählt ist, gehe ich zur Textfarbe. Kein Normalzustand sollte so blau sein. Und eigenes Zuhause über der Textfarbe muss weiß sein. Dann lasst uns das aktualisieren. Und während es aktualisiert wird, möchte ich auch, dass wir diese Polsterung hinzufügen. Scrollen wir also nach unten und suchen nach Polsterung. Hier ist es. Also breche ich diesen Link und das wird den Knopf komplett verzerren. Aber was wir tun wollen, ist zuerst, für rechts und links, geben wir ihm eine 50-Polsterung. 50, 50 m für oben und unten Lass uns ein 20, 20, 20 und 20 geben. Jetzt hat es eine richtige Polsterung und es sieht viel vorzeigbarer aus. Denke, wir können diese auch machen, hasse es, dasselbe Blau wie diese zu benutzen. Also lasst uns weitermachen und uns das blaue Exemplar schnappen. Wählen wir das aus. Während es noch ausgewählt ist, gehe ich in die Sexfarbe und gebe ihr das Blau. Gleicher Fall für diese oder Fahrt. Mir gefällt es. Lassen Sie uns also eine Vorschau der Änderungen anzeigen. Und lasst uns nach unten scrollen und sehen, was wir haben. Großartig. Als Nächstes wollen wir diese Episodengalerie hier erstellen, und das werden wir in der nächsten Lektion tun. Also wir sehen uns in Kürze. 14. Den Podcast-Folgen: Willkommen zurück. Ich hoffe, du hast dir ein Glas Wasser gepackt. Jetzt ist es an der Zeit, wieder ins Geschäft zu gehen. Im Grunde erstellen wir jetzt genau hier diese Episodengalerie. Beginnen wir also damit, diese Überschrift zu erstellen. Dann werden wir uns damit befassen, die Galerie selbst zu erstellen. Wenn wir also direkt in den Arbeitsbereich springen könnten, erstellen wir einen einzelnen Spaltenabschnitt. Der erste hier. Und jetzt können wir hier drin diese Galerie fallen lassen. Aber vorher erstellen wir diese Überschrift. Also kopiere ich das einfach. Und dann dupliziere ich das einfach und lege es dort im einspaltigen Abschnitt ab. Dann wähle ich das aus. Und obwohl es noch ausgewählt ist, füge ich den Text ein, den ich gerade von hier kopiert habe. Dieser Text. Alles klar, also das nächste, was wir tun wollen, ist es in die Mitte zu bringen . Richten Sie es in der Mitte aus. Und lasst uns diesen blauen Hintergrund geben. Ich möchte ihm dieses blaue Pad geben. Nun, also schnappen wir uns das Blau von dieser Schrift hier. Nun, diese Schriftart ist ausgewählt. Ich klicke darauf und kopiere das Blau. Dann gehe ich in diesen Abschnitt, Abschnitt bearbeiten, Stil für den Hintergrundtyp der Einfügung , den Farbcode genau hier. Und jetzt hat es dieses Blau. Jetzt diese Schriftart, diese Überschrift ist blau. Also lasst es uns auf den Bildschirm ändern. Also kopiere ich das, ich wähle diesen Button aus. Und dann werde ich, weil es jetzt unter Style hervorgehoben ist, kopiere ich diese grün. Oder wenn Sie dieses Dokument immer noch geöffnet haben, ist es der Bildschirm. Ich wähle diese Überschrift aus. Und obwohl es immer noch unter Style-Textfarbe ausgewählt ist, füge ich das Grün dort ein. Und jetzt hat es dieses Grün. Klicken Sie hier irgendwo drin, um das loszuwerden. Dann aktualisiere ich die Änderungen. Als Nächstes wollen wir diesen Pinseleffekt genau hier hinzufügen, genauso wie wir es für den oberen Bereich getan haben. So können Sie es hier oberhalb dieses Abschnitts hinzufügen, denn wie Sie sehen können, haben wir gerade eine gerade Linie. Wir können nicht hinzufügen, dass pinsel1 oben in diesem Abschnitt hier, diesem vorgestellten Episodenabschnitt, hinzugefügt wird . Gehen wir also in den Abschnitt selbst, bearbeiten Sie den Abschnitt und dann unter stilförmiger Trennwand unten, denn jetzt wollen wir, dass die Kuration genau hier unten ist. Wählen wir Wellen Pinsel, und jetzt ist die Farbe unsichtbar. Also kopiere ich das. Nettes Blau. Und während es noch ausgewählt ist. Und während wir noch hier sind, fügen Sie ihn unter geformter Trennwand unter Stil, Farbe ein. Und das ist zu groß. Reduzieren wir also die Höhe auf etwas wie 60. Ich will es mit 60 Uhr. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Es sieht großartig aus, aber jetzt berührt dieser Typ den Pinselstrich. Also lass uns gehen und etwas Polsterung unter diesem Kerl hinzufügen. Also wählen wir das Bild von diesem Kerl aus. Und im fortgeschrittenen Bereich werden wir die Verbindung gleich dort brechen. Und dann drücken wir es für die untere Polsterung nach unten, bis wir mit der Entfernung zufrieden sind. Für mich denke ich, dass das ein netter Ort ist. Eigentlich sind das ein 100. Sie können also einfach eine 100 für die untere Polsterung eingeben. Aktualisieren Sie das und lassen Sie uns dann eine Vorschau der Änderungen anzeigen. Alles klar. Das ist super genial. Wir können dort nicht darüber hinausgehen, weil wir unten nichts haben. Unten hier. Lasst uns jetzt die Galerie hinzufügen. Jetzt ist die Art, diese Galerie hinzuzufügen, einfach. Diese Galerieelemente hier, unsere Beiträge, es sind WordPress-Posts. Sie können einen Blogbeitrag erstellen. Du kannst eine Episode erstellen ist ein Beitrag. Sie können im Gegensatz dazu ein Produkt erstellen. Sie können verschiedene Arten von Inhalten als Beiträge erstellen. Und lasst uns fortfahren und ein paar Posts erstellen, vielleicht etwa sechs erstellen, damit wir sie hier anzeigen können. Die Art und Weise, wie wir das tun, besteht darin, in das Dashboard zu gehen. Lass uns in die Beiträge gehen. Denken Sie daran, dass dies eine Neuinstallation von WordPress ist, also habe ich keinen Beitrag. Also muss ich diese sechs Beiträge hinzufügen. 15. Die Folgen mit WordPress: Also lasst uns weitermachen und ein paar Beiträge hinzufügen. Ich sage „Neu hinzufügen“. Und wie heißt der erste hier? Folge 6, Networking für Podcasting. Also kopiere das. Sie sitzen genau da. dann für die Vorlage Lassen Sie es uns dann für die Vorlage auf Elementor Sidebar mit voller Breite setzen und auf keine Seitenleiste setzen. Vollbreite strecken Sie sich genau dort unter Content-Layout. Dann deaktivieren wir diese vier Elemente und veröffentlichen sie. Oder richtig, also haben wir das. Um mit diesem Auszug genau hier zu sehen, müssen wir auch die Eier irgendwo haben. Das Ziel dieser Klasse ist es nun nicht, Ihnen zu zeigen, wie Sie die einzelnen Episoden entwerfen. Wenn wir hier klicken, muss die Seite, auf die Sie weitergeleitet werden, gut gestaltet sein , und das ist der Raum, den wir erstellen. Um es zu erstellen, würden wir natürlich mit Elementor in edit gehen. Und dann werden wir dort natürlich etwas wie eine Doppelspalte hinzufügen. Und auf dieser Seite hätten wir vielleicht ein Bild. Dann hätten wir vielleicht einen Header. Lass mich einen Header hinzufügen. Und der Header wäre dieser besondere, bestimmte Header. Also füge ich das da rein. Und vielleicht wäre dieser Auszug der Inhalt der Episode. Kurze Beschreibung der Episode. Lassen Sie uns oben etwas Spielraum hinzufügen. Ich möchte dir das nur schnell zeigen, damit du die Beziehung zwischen den beiden AD genau dort siehst . Nehmen wir an, lassen Sie uns das machen, auch wenn es zur Veranschaulichung dient, lassen Sie es uns ein bisschen vorzeigbarer machen. Sagen wir also, dass die Episode, und dann haben wir, Lasst uns das in Montserrat ändern. Und dann lasst uns das aktualisieren. Dann lasst uns eine Vorschau der Änderungen anzeigen. Jetzt ist dies eine einzelne Episode, die wir erstellen, nur damit wir, wenn wir darauf klicken, zu einer Seite weitergeleitet werden, die etwas vorzeigbarer ist. Wir werden nicht auf eine leere Seite weitergeleitet. Aber so würde eine Episode vielleicht aussehen wenn jemand sich ansieht, um sie anzuhören. Also lasst uns dieses Bild ändern. Lass uns hierher gehen und wöchentlich ein Bild hochladen. Vielleicht ist diese Lady genau da. Sie sieht aus wie ein Podcaster. Lasst uns Medien einlegen. Und lasst uns das aktualisieren. Dann Vorschau der Änderungen. Vielleicht könnte ich mir vielleicht sogar ausgeliehen, was unsere Schaltfläche hier einfach mit der rechten Maustaste auf Kopieren klicken, weil wir dieselbe Website bearbeiten Wir können Elemente von einer Seite auf eine andere Seite kopieren, damit sie reinkommen können, fügen Sie diesen Button genau hier ein. Einfach so. Dann lasst uns das aktualisieren. Mir gefällt auch der Abstand hier nicht, also lassen Sie mich den Abschnitt selbst auswählen. Und unter Layout, Spaltenlücke, lassen Sie es mich auf breiter erhöhen. Dann lasst uns sagen, aktualisiere das. In Ordnung, und dann sehen wir uns die Änderungen an. Das ist also ein Beispiel dafür, wie vielleicht eine Podcast-Episode aussehen würde. Was wir also tun wollen, ist wieder in unser Dashboard zu gehen. Verlassen Sie uns das Dashboard. Und lasst uns zur Liste aller Episoden gehen, die wir haben. Jetzt werden Sie feststellen, dass wir 1 haben, weil wir gerade eine erstellt haben, aber wir brauchen noch fünf weitere. Gehen wir also in das Dashboard und erstellen die restlichen fünf. Also füge ich neu hinzu. Lassen Sie uns das kopieren. Und natürlich mache ich das manuell, aber es gibt Plugins, die dir helfen können. Sie können Ihnen helfen, Beiträge oder Seiten oder Elemente in WordPress mit einem Klick zu duplizieren. Also lass mich das einfach da rein einfügen. Das ist Episode 5. Sagen wir unter den Vorlagen Elementor in voller Breite, keine Seitenleiste, Stretch in voller Breite. Und dann deaktiviere ich diese vier Elemente veröffentliche sie dann. Lass uns weitermachen und den Rest erschaffen. Und ich werde diesen Abschnitt schnell weiterleiten und dir erlauben, die restlichen vier zu erstellen. Also lasst uns danach reden. Also hier sind wir. Lassen Sie mich einfach diese Seite aktualisieren, in der es geschafft hat, die sechs Episoden zu erstellen. Jetzt, da wir alle Episoden haben, die wir brauchen, brauchen wir eine Möglichkeit, sie wie vereinbart darzustellen, wie diese Gier. Dafür brauchen wir also ein Drittanbieter-Plugin. Ein Plugin, das die Leistungsfähigkeit von Elementor erweitert. 16. Mit EA Plug-ins das S-R-: Denken Sie daran, dass wir gesehen haben, dass wir viele elementare Plugins in den Plugins-Repositories haben. also in Plugins Mittag hinzu. Ich suche nach wichtigen Add-Ons. Es sollte das erste Ergebnis sein, wesentliche Add-Ons für Elementor. Okay, lass uns das aktivieren. Also los geht's. Jetzt steht es in der Liste aller unserer installierten Plugins. Also gehen wir in die Einstellungen und gehen wir in Elemente ein. Standardmäßig gibt es einige Elemente, die nicht überprüft werden, die wir benötigen. Das Element, das wir derzeit brauchen, ist Post-Gier. Weil wir ein Raster wie dieses anzeigen wollen. Also mit Post Greed, jetzt Chet, lasst uns nach unten scrollen und Einstellungen speichern. All dies sind Funktionen und Elemente, die Sie Ihrem Elementor hinzufügen können. Und einige von ihnen sind sehr cool. Und die meisten von ihnen sind kostenlos, während andere eine Prämie sind, die Sie bezahlen müssen, um darauf zugreifen zu können. Gehen wir nun zurück zu der Seite, auf der wir die Zielseite bearbeiten. Und lasst uns die Seite aktualisieren, bevor wir sie aktualisieren. Steuern wir nun R oder Command R. Aktualisieren Sie die Seite, damit wir das gerade installierte Plug-In laden können. Alles klar, also kommen wir auf die linke Seite, lasst uns das Panel zusammenbrechen. Und dieses Panel. Lassen Sie uns alle Panels reduzieren, um zu sehen, ob es geladen wurde. Und jetzt los geht's. Wesentliche Add-Ons für Elementor und all dies sind alle die Elemente, die wir im Back-End gesehen haben. Jetzt suchen wir nach Post-Gier. Und das ist es, wonach wir mit diesem Label EA für wichtige Add-Ons suchen. Scrollen Sie also hier unten nach unten. Ziehen wir dieses wichtige Add-on-Pausen-Gier und lassen Sie es direkt unter die Texte fallen. Und du wirst feststellen, dass wir jetzt vier Episoden zeigen. Also werden wir es so bearbeiten, dass es so aussieht. Das nächste, was wir tun wollen, ist zuerst diesen Pinseleffekt hier unten hinzuzufügen. Was wir also tun wollen, ist einen weiteren Abschnitt mit voller Breite wie diesen hinzuzufügen. Und für diesen Abschnitt mit voller Breite wählen wir den Abschnitt aus. Gehen Sie in Stil geformte Trennwand, oben. Denn jetzt ist es oben in diesem Abschnitt, nicht unten. Wellen-Pinsel. Und lassen Sie uns eine Höhe von 16 geben. Aber jetzt müssen wir ihm diesen blauen Hintergrund geben. Wählen wir also den Abschnitt aus, da er bereits diesen blauen Hintergrund im Stil hat. Klicken wir da rein und kopieren wir das. Klicken Sie dann auf den Abschnitt. Stellen Sie sicher, dass hier oben Abschnitt bearbeiten steht. Formteiler, M für die Farbe der Formteiler. Lasst es uns hier einfügen. Großartig. Alles in Ordnung. Lassen Sie uns nun eine Vorschau der Änderungen anzeigen, nur um zu sehen, was wir haben. Bisher. Hier ist unser oberster Teil. Scrollen wir nach unten. Also lasst uns diese Gier verkaufen. Also wähle die Gier aus. Lassen Sie uns zunächst entscheiden, woher wir unsere Episoden haben möchten. Und wir können die Episoden nach Autor bekommen. Wir können Episoden nach Kategorien abrufen. Wir können die Autoren nach Tags, Formaten oder entscheiden, was Sie von dem, was wir hier anzeigen, ausschließen möchten. Und Sie sehen, dass wir viele Möglichkeiten haben, aber diese liegen außerhalb des Rahmens dieser Lektion. Sie können mehr über Kategorien oder die End-Tags erfahren, indem Sie das googeln. Während dies ausgewählt ist und wir diese Optionen hier haben, sagen wir zuerst, dass wir es bekommen wollen, schauen wir uns an, woher wir unsere Beiträge bekommen. Schauen wir uns die Post-Kategorien an. Unter Beitragskategorien haben wir also nur eine Kategorie. Standardmäßig. Wir können diese Kategorie nicht löschen. Es wird standardmäßig mit WordPress geliefert, so dass jeder Beitrag oder jede Seite, die nicht kategorisiert ist automatisch unter den nicht kategorisierten Abschnitt fällt, nicht kategorisiert. Im Moment wollen wir sagen, dass wir alle Episoden von uncategorized wollen. Also tippe ich nach kategorisiert. Also wähle ich aus und kategorisiert. Und weil wir keines von diesen kategorisiert haben, fallen sie automatisch unter Uncategorized. Das heißt also, dass wir alle sechs von ihnen zeigen. Sie können beliebig viele Kategorien hinzufügen. Hier kannst du also weitere Kategorien hinzufügen. Produktivität, drücken Sie Enter. Und jetzt haben wir zwei Kategorien. Wenn ich das also zuerst speichere und dann hier tippe, gib bitte drei oder mehr Zeichen ein. So stolz. Zeigt bereits Produktivität an und es werden auch Beiträge aus dieser Kategorie angezeigt. Dann wollen wir hier wieder Beiträge pro Seite sagen. Wir wollen sechs Beiträge zeigen. Und nun beachte, dass wir vier Spalten und zwei Zeilen haben. Wir wollen zwei Spalten und drei Zeilen. Das kommt also unter die Layouteinstellung. Lassen Sie uns also die Abfrage reduzieren und öffnen wir Layouteinstellungen. Unter Spalte. Wählen wir zwei aus. Und dann lasst uns das aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Und da haben wir es. Lasst uns dieses Seitensteuerelement aktualisieren. Aktualisieren wir die Seite, um die Änderungen an diesen zu reflektieren. Großartig, also hier sind wir. Das nächste, was wir tun wollen, ist, dieses Bild hier loszuwerden, das Autorenbild, das wollen wir nicht sehen. Wenn Sie also eine beliebige Stelle in diesem Raster auswählen, können wir hierher gehen und eine reduzierte Abfrage sagen, dann Layouteinstellungen erweitern und dann nach unten scrollen. Und jetzt haben wir diese Checkboxen genau hier. Wir können also sagen, dass wir nicht zeigen wollen, dass wir vielleicht nicht zeigen wollen, dass die Eier es sind. Und das ist der Auszug. Wir könnten also auch sagen, dass wir den Namen des Autors nicht anzeigen möchten, oder wir möchten den Autorenavatar nicht zeigen. Das ist dieses Bild. Lasst uns das aktualisieren. Sorry Leute, mein Internet ist ein bisschen langsam. Deshalb scheinen sie gerade verblasst zu sein. Ich muss die Seite aktualisieren, um die Änderungen widerzuspiegeln. Alles klar, einfach so. Jetzt haben wir den Avatar losgeworden, das Bild des Autors. Wir können auch über die Position dieser Metadaten dieser Metadaten entscheiden. Sagen wir zum Beispiel den Eintrag Header. Einfach so. Genau das haben wir hier. Und dann werden Sie jetzt feststellen, dass wir hier zugehört haben, dass dies im Grunde genommen das sind mehr lesen. Also werden wir weitermachen und stylen, die mehr lesen. Lasst uns das vorerst aktualisieren. Und lasst uns in den Stil gehen, um den Knopf in der Gier zu stylen. Gehen wir also in den Stil, scrollen Sie nach unten und finden Sie Stil der Schaltfläche „Mehr lesen“. Lasst uns das erweitern. Und was wir tun wollen, ist ihm eine Hintergrundfarbe zu geben. Im Moment ist es also auf nichts eingestellt. Wir wollen es so blau geben. Das ist also definitiv das Blau. Also wähle ich einen dieser Abschnitte mit blauem Hintergrund aus und greife diesen blauen Klick irgendwo darin. Und sonst wähle ich irgendwo innerhalb des Rasters aus, um sicherzustellen, dass wir in den Postgres-Stil gehen. Und lasst uns zum Stil „Mehr lesen“ gehen. Und wieder zurück zum Hintergrundtyp. Lass es uns so blau ändern. Jetzt hat es dieses Blau. Aber jetzt müssen wir etwas Polsterung hinzufügen , damit der Text die Ränder des Hintergrunds nicht berührt. zuerst Lassen Sie uns zuerst diesen Link veröffentlichen. Dann mal rechts, versuchen wir es mit 20. Und für die Linke versuchen wir es 20 Jahre. Nun, alles klar, für oben und unten, geben wir es 55. Dann lassen Sie uns für den Rand, den Abstand zwischen der Schaltfläche und den anderen Elementen um ihn herum, den Abstand zwischen der Schaltfläche und den anderen Elementen um ihn herum, den Abstand hier erhöhen. Also Top-Marge. Geben wir ihm eine 20. Und lasst uns das aktualisieren. Jetzt, da wir, lassen Sie uns den Auszug nicht deaktivieren. Lass mich also wieder in den Inhalt gehen. Innerhalb von Layouteinstellungen. Wir zeigen Auszug. Und jetzt wirst du feststellen, dass wir keinen Auszug haben und wir können diese Insider-Pose hinzufügen. Gehen wir in alle Beiträge ein. Und wenn wir in einen der Beiträge gehen und zum Beispiel Edit sagen. Um den Auszug hinzuzufügen, müssten wir in Elementor gehen und von dort aus erstellen. Aber im Moment benutzen wir das Back-End. Also kopiere ich das. Und ich gehe hier rein und füge im Grunde das hier ein. Dann aktualisiere ich das. Und wenn wir jetzt in diesen Workspace kommen und das aktualisieren. Bevor ich es aktualisiere, möchte ich diese Seite aktualisieren Control R, um die Änderungen widerzuspiegeln , die wir hier im Back-End vorgenommen haben, um sie im in Elementor widerzuspiegeln. Wenn wir nach unten scrollen, werden Sie feststellen, dass wir jetzt einen Auszug haben, aber es zeigt nur ein paar Worte. also irgendwo drin im Raster auswählen , können wir kommen, lassen Sie uns die Abfrage reduzieren und Layouteinstellungen erweitern. Und hier drin können wir entscheiden, wie viele Auszüge wir brauchen. Zeigen Sie also Auszug und dann Auszug Wörter, sagen wir 30 Wörter. Und jetzt zeigt es mehr Wörter. Also werde ich, ich wiederhole das Gleiche für den Rest der Episode. Sie haben also alle Auszüge. Lasst uns das also aktualisieren. Während es aktualisiert wird, gehe ich von dort zum Backend-Ausgang. Also jetzt ist das nächste. Lasst uns das öffnen. Lassen Sie mich das in einem neuen Tab öffnen und fügen Sie es einfach dort ein. Also gehe ich hier rein und stelle sicher, dass das kopiert wird. Und dann hier drin, Episode 2, füge ich das dort ein und aktualisiere Episode drei. Fügen Sie das dort ein und eine Datenfolge, um das einzufügen und diese Episode 5 zu aktualisieren. Fügen Sie das dort ein und aktualisieren Sie das Richtige. Lassen Sie mich nun diese Seite, unseren Workspace, aktualisieren und sehen, ob sich die Änderung hier widerspiegelt. Und während wir das tun, lass mich diese zusätzlichen Tabs schließen. Alles klar, also schauen wir uns an, was wir haben. Das haben wir also. Es fängt bereits an, die Form unserer Referenzseite anzunehmen. Lassen Sie uns also eine Vorschau der Änderungen nach Hause anzeigen. Es sieht also schon gut aus. Aber natürlich können wir noch viel mehr tun. Zuallererst merkt man, dass dies einige abgerundete Ecken hat und einen Boxschatten hat, der die Episode vom blauen Hintergrund abhebt sie wirklich zum Platzen bringt. Lass uns weitermachen und das machen. Während wir auswählen, während dies ausgewählt ist, klicken Sie auf eine beliebige Stelle, die sich seitlich befindet. Gehen wir in Stil, Post Raster-Stil. Gehen wir in den Grenzradius und geben es gut, der Link ist immer noch aktiv. Lassen Sie uns vielleicht einen 10-jährigen Anwalt genug geben und es nimmt bereits Gestalt an. Als Nächstes wollen wir dem Knopf auch eine abgerundete Ecke geben. So wie das. Lasst uns also diese Post-Gier zusammenbrechen und zum Stil der Schaltfläche „Mehr lesen“ gehen. Für den Grenzradius, während die Verbindung noch aktiv ist, geben wir ihm eine Fünf. Und jetzt hat es diese abgerundete Ecke. Lasst uns das aktualisieren. Lass uns weitermachen und zusammenbrechen. Lesen Sie mehr Button-Stil. Und gehen wir zurück zum Post-Raster-Stil. Geben wir ihm diesen Box-Schatten, indem wir auf das Symbol „Bearbeiten“ klicken. Und du wirst bemerken, dass es jetzt schon auftaucht. Aber ich möchte diese Deckkraft auf einen Ort reduzieren. Irgendwo da, damit es nicht so offensichtlich ist. Es ist genau dort, aber es ist nicht so offensichtlich. Lasst uns also weitermachen und eine Vorschau öffnen. Mal sehen, was wir haben. Da haben wir es also. Das haben wir bisher. Nun scheint diese Episode etwas größer zu sein, denn dies ist die erste, wenn Sie sich erinnern, dies ist eine erste Episode, die wir erstellt haben und wir haben sie mit Elementor erstellt. Wenn wir also auf Mehr lesen klicken, wird der gesamte Text von hier, angefangen von Episode 6, bis hierher gebracht. Wenn wir zurückgehen, werden Sie feststellen, dass es all diesen Sex hier hat, während diese anderen davon ausgehen, wie kann ich wachsen? Deshalb scheint es ein bisschen größer zu sein, aber das sollte dich nicht beunruhigen. Das nächste, was wir tun wollen, ist diesen Button hier hinzuzufügen. Und um das zu tun, denken Sie daran, ein Elementor, wir können immer Sachen recyceln. Also lasst uns das kopieren und dieses Ende kopieren. Nun, dieser Gierige wurde immer noch ausgewählt. Wenn Sie etwas einfügen möchten, wählen Sie immer das Element aus, unter dem Sie das Element einfügen möchten, das Sie beschleunigen möchten. Da wir also die Schaltfläche unter die Note einfügen möchten, müssen wir das Raster auswählen und direkt dort einfügen. Die Schaltfläche wird also unter das Elementar gehen, mit der rechten Maustaste geklickt und einfügen. Klicken wir also auf den Button genau hier und zentrieren wir ihn dann. Und lasst uns fortgeschritten hineingehen, solange wir noch ausgewählt sind. Und lassen Sie uns eine Top-Marge geben. Lassen Sie uns diesen Link entfernen und ihm einen oberen Rand oder 50 geben. In einem unteren Rand von vielleicht 50 oder rechts. Lasst uns das also aktualisieren. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Und lasst uns anfangen zu scrollen, um zu sehen, was wir bisher haben. Wir brauchen hier oben etwas Spielraum. Aber mir gefällt, was wir derzeit haben. Es sieht schon toll aus. Es ist fast ähnlich wie wir hier haben. Angesichts der Mod Sum können wir uns etwas Besseres einfallen lassen. Lassen Sie uns diesen Rand also ganz oben hinzufügen. Wählen wir also diesen Abschnitt aus. Und gehen wir in die Registerkarte „Erweitert“. Und lass uns das loslassen. Und dann lassen Sie uns eine Top-Polsterung von vielleicht 50 geben. So. Dann sagen wir „Aufnahme“. Lassen Sie uns die Änderungen überprüfen. Ich mag es. Oder richtig? Das nächste, was wir tun wollen, ist diesen Abschnitt genau hier zu erstellen, was sehr einfach sein sollte, da wir nur die Textblöcke recyceln , die wir bereits im Button im Bild haben. Also lasst uns das in der nächsten Lektion machen. 17. Den Abschnitt über die Seite: Willkommen zurück zu einer weiteren Lektion bei mir kann Besser. Wir beenden diesen Episoden-Knotenabschnitt. Als Nächstes möchten wir diese Abschnitte über Alex erstellen. Und das sollte ziemlich einfach sein, da wir die Elemente duplizieren werden , die wir bereits auf unserer Webseite haben. Um das zu tun, erstelle ich zunächst hier eine Doppelspalte. Doppelspaltiger Abschnitt wie dieser. Und Sie werden feststellen, dass wir oben und unten einen Rand haben. Lassen Sie uns diese Marge also im Voraus geben. Wählen Sie also den zweispaltigen Abschnitt aus und gehen Sie in „Erweitert“, entfernen wir diesen Link. Und lassen Sie uns eine Top-Marge von 100 und einen unteren Rand über 100 geben. Okay, also jeder Inhalt, den wir hinzufügen, wird diesen Raum oben und unten haben. Was wir als Nächstes tun müssen, ist auf das Plus zu klicken und Bild auszuwählen. Ich möchte dieses Bild von Alex da reinlegen. Füge das ein. Natürlich hätten Sie die schönen Bilder von sich selbst oder, oder wenn Sie die Landingpage für einen Kunden erstellen, raten Sie ihm, Ihnen schöne Bilder zur Verfügung zu stellen. Lassen Sie uns weitermachen und diese Überschrift duplizieren. Und ziehen wir es da hinein. Ziehen wir es dort hinein. Und sagen wir über unsere nächste Kopie, die das auswählt, fügen Sie diese dort ein. Lassen Sie uns das auch duplizieren. Ziehen Sie es, ziehen Sie es nach unten, lassen Sie es dort hinein. Jetzt kopiere das. Geh hier rein. Während dies ausgewählt ist, wähle ich all das aus, lösche es und füge es dort ein. Und was haben wir dann als Nächstes? Ein Knopf, der Berührung bekommt. Also gehen wir hier rein. kopiere ich. Und ich klicke mit der rechten Maustaste in diese Elemente, diese Textelemente und füge ein, damit die Schaltfläche darunter geht. Dann ändern wir diese, solange dies ausgewählt ist. Steig ein, nimm Kontakt auf. Und dann ändern wir das Symbol vielleicht in ein Telefon und fügen es ein. Und sagen wir wollten, bevor wir ein solches Update bekommen haben. Lassen Sie uns die Änderungen überprüfen. Scrollen wir nach unten. Ich mag es bisher. Erhöhen wir also den Rand in dieser Spalte, damit der Text etwas tiefer wird als gerade. Wählen Sie diese Spalte klicken Sie mit der rechten Maustaste auf Spalte bearbeiten, erweitert. Brechen Sie diese Verbindung auf. Und lassen Sie uns eine Top-Marge von 50 geben. Und lasst uns ihm 150 geben. Sagen wir jetzt eine 100. Und lassen Sie uns die Größe von Alex vergrößern. Und sagen wir, aktualisiere das. Lasst uns wirklich Veränderungen machen. Super genial. Mir gefällt, was wir bisher haben. Das nächste, was wir schaffen wollen, ist dieser Call to Action Bereich genau hier. Und das ist ein sehr wichtiger Teil auf jeder Landing Page. Es gibt Elemente, die eine Landing Page haben müssen, damit es eine effektive Zielseite in einer von ihnen ist, um Kunden- oder Benutzerdaten zu sammeln. Wir brauchen auch auffällige Knöpfe. Und Sie werden feststellen, dass wir Schaltflächen benutzt haben, die sehr auffällig und leicht zu erkennen sind, da eine Zielseite dazu bestimmt ist, Menschen zu handeln. Deshalb müssen wir einen Aufruf zum Handeln haben. Dies ist ein Aufruf zum Handeln. Hör dir diese Episode an. Lassen Sie uns also dieses Formular in der nächsten Lektion erstellen. Wir sehen uns in Kürze. 18. Das notwendige form: Willkommen zurück zu einer weiteren genialen Lektion bei mir kann Besser. Im Moment haben wir einen Punkt erreicht, an dem wir all diese Abschnitte erstellt haben. Und wir haben nur noch zwei Abschnitte vor uns. Wir haben diesen Call-to Action Abschnitt, der ein Formular enthält, und wir haben den Fußzeilenbereich. Also lasst uns jetzt dieses Formular erstellen. Und um das Formular zu erstellen, wird ein großartiges Drittanbieter-Plugin namens Formulator verwendet . Lasst uns also zum Backend gehen und für Minister installieren, damit wir dieses Forum erstellen können. Im Dashboard gehe ich also in Plugins, Add New. Also hier drin gebe ich den Formulierer ein. Und diese von WPA AMU dev, installiere es. Jetzt. Lasst uns inaktiviert werden. Und jetzt haben wir vier Minuten unter Installierte Plugins aufgeführt. Sie finden es also fast unten im linken Menü, genau hier. Also bewege den Mauszeiger über den Außenminister und gehe in Formulare. Wenn Sie jetzt mehr darüber erfahren möchten, wie Sie WordPress-Formulare für Ihre Website erstellen, suchen Sie einfach nach, wie Sie Formulare in WordPress auf YouTube erstellen. Und Sie werden eine Menge Tutorial finden, das Ihnen zeigt, wie das geht. Aber im Moment verwenden wir für Monitor, was mein bevorzugtes Formular-Plugin ist. Lassen Sie uns also fortfahren und ein Formular mit dem Formulierer erstellen. In der nächsten Lektion sehen wir uns in Kürze. 19. Erstelle ein Formular mit Forminator: Also sage ich Create. Jetzt möchten wir zu unserem Zweck Personen für unseren Newsletter anmelden damit sie von Zeit zu Zeit unsere E-Mails erhalten können. Sagen wir also, Newsletter-Anmeldung und Fortfahren. Geben wir ihm also ein Namensanmeldeformular und lassen Sie es uns erstellen. Das Ziel hier ist es also, ein Formular mit dem Formulierer zu erstellen, und dann zeigen wir es im vorderen Ende dieser Seite mit einem kurzen Code an und wir werden sehen, wie das geht. Jetzt, da das Formular erstellt wurde, wie Sie am Anmeldeformular für den Namen sehen können. Und wir haben die Felder, die standardmäßig verfügbar sind, weil es sich um eine Vorlage handelte, die wir ausgewählt haben. Es hat den Vornamen, E-Mail und den Abonnieren-Button. Und wenn wir es in der Vorschau anzeigen, sieht es so aus. Vorname, E-Mail abonnieren, Vorname, E-Mail abonnieren. Und wenn ich auf FirstName klicke, wird es erweitert und zeigt die Platzhalterdetails an, die wir gerade gesehen haben FirstName und all dies, aber in dieser Klasse geht es nicht darum, wie Formulare erstellt werden. Wissen Sie also einfach, dass Sie dieses Formular bearbeiten können, um die gewünschten Details zu erhalten. Sie können diesen Platzhalter ändern, um zu wissen, wo.com das anwendet. Und wenn wir eine Vorschau darauf anzeigen, der Platzhalter jetzt für die E-Mail-Eingabe Kim bei Nowhere.com. Und wir können diese Details ändern und weitere Felder hinzufügen. Aber ich werde dieses Formular so veröffentlichen, wie es ist. Und wenn ich es veröffentliche, werden Sie feststellen, dass wir dieses Pop-up haben, das diese Option „Kopieren“ darstellt. Wir können diesen Kurzcode kopieren. Kopieren wir also den Kurzcode und Sie erhalten diese Nachricht. Der Kurzcode wurde erfolgreich kopiert. Und wenn wir in unseren Arbeitsbereich gehen und direkt unter diesem About Abschnitt, öffnen wir uns. Lassen Sie uns einen neuen Abschnitt erstellen und es sollte eine doppelte Spalte sein. Lass mich dieses Fenster schließen. Was wir also brauchen, ist eine Doppelsäule. Und innerhalb dieser doppelten Spalte möchten wir in der rechten Spalte einen kurzen Code hinzufügen. Kurzer Code. Ziehen Sie es also per Drag & Drop dort hinein und bevor Sie auf etwas anderes klicken, während dies ausgewählt ist. Jetzt können wir diesen Kurzcode hier einfügen. Ich spreche von diesem Kurzcode, den wir gerade aus dem Formulierer kopiert haben. Fügen Sie es dort ein und klicken Sie auf Anwenden. Dann sagen wir, dass Änderungen aktualisiert und in der Vorschau angezeigt werden. Scrollen wir also nach unten und sehen, was wir derzeit haben. So sieht er gerade im Moment aus. Wir müssen etwas Styling machen. Vor allem aber müssen wir diesen Hintergrund haben. Wir fangen mit diesem Top-Pinsel gleich hier an. Um dies zu tun, müssen wir diesen Abschnitt auswählen, der die Details über ALEKS enthält. Wählen Sie den Abschnitt selbst aus. Und lassen Sie uns den unteren Rand entfernen, damit sie beide miteinander verbunden sind. Und dann gehen wir in diesem Bearbeitungsabschnitt zu stilförmiger Trennwand und dann nach unten. Lassen Sie uns den Wellenpinsel auswählen und lassen Sie mich das Grün hier einreißen und schnappen. Kopiere das. Lasst uns wieder hier rein gehen. Und während wir noch unter Abschnitt bearbeiten, Stil, geformte Trennwand, unten sind, ändern wir die Farbe dort in das Grün. Füge es dort ein. Das ist der Stop-Pinsel genau hier. Es sind also zwei, trennen Sie es von diesem Bild genau hier. Lassen Sie uns weiter und fügen Sie diesem Bild etwas Polsterung hinzu. Wählen Sie also das Bild selbst aus. Fortgeschritten. Lassen Sie uns diese Polsterung loslassen und dann unten auffüllen. Lasst es uns anstoßen, bis wir zufrieden sind. Ich gebe ihm eine 100. Lass uns dir 110 geben. Jetzt gib dir 120. Und dann gehen wir zurück in den Style-Shape-Teiler. Lass mich jetzt wählen, lass uns reingehen. Bearbeiten Sie Abschnitt, geformte Trennwand, unten. Ich möchte ihm eine Höhe von 60 geben. Jahr. So. Kopieren wir den Bildschirm noch einmal. Wählen wir diesen Abschnitt aus, Abschnittsstil und Hintergrund bearbeiten und lassen Sie uns das Grün geben. Aktualisieren Sie die Farbe. Und dann lasst uns gleich hier einen weiteren Abschnitt erstellen. Wir können einen weiteren Abschnitt erstellen, um diesen unteren Pinsel zu erstellen. Oder wir können diese einfach duplizieren. Denken Sie daran, lassen Sie uns das duplizieren. Und ziehen wir es da runter. Dann lasst uns, während es noch ausgewählt ist, gehen wir zu stilförmigen Trennwänden. Ich habe das Grün immer noch ausgewählt, also füge ich es hier ein. Und dann aktualisiere das. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Überschreiben. Das ist super genial. Also lasst uns jetzt zur Seite springen und uns diesen Text schnappen. Kopiere das. Lasst uns hier reingehen. Und hier können wir diese Überschrift hinzufügen. Und ich füge den Text ein und füge den Text genau dort ein. Jetzt schnapp dir diese Beschreibung genau hier, kopiere das. Ich hole mir den Texteditor. Und hier wähle ich alles aus, lösche es und füge dann ein, was ich von der anderen Seite kopiert habe. Aktualisiere das. Und jetzt werden Sie feststellen, dass die Farbe der Schrift hier blau ist. Also lass mich einfach das Blau von der Verkäuferseite schnappen. Kopiere das. Und lass uns hier reingehen. Während dies noch ausgewählt ist, gehe ich zum Stylen der Textfarbe und füge diese dort ein. Nun, geh und wähle diesen Stil Sexfarbe aus, füge sie dort ein. Und das möchte ich in Montserrat ändern. Während es noch Topographie ausgewählt ist, Montserrat. Und dann möchte ich ihm nur ein Schriftgewicht von 800 geben. Vergrößern wir auch die Größe dieser Schriftarten, die größer und auffälliger sein wollten. Und lassen Sie uns diese auch in Montserrat-Typografie umwandeln. Lass uns die Größe 16 machen. Aktualisiere das. Dann lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten und sehen Sie, was wir da unten haben. Super genial. Mir gefällt, was wir bisher haben. Also lasst uns jetzt die Marge hier erhöhen. Machen Sie es also ein bisschen vorzeigbarer. Und das tun wir, indem wir diesen Abschnitt auswählen. Lass uns im Riesenbereich reingehen. Kann die Polsterung, die obere Polsterung erhöhen und Ihre Zufriedenheit sehen. Ich denke, das ist eine schöne Größe. Lass uns 45 machen und das aktualisieren. Dann lasst uns eine Vorschau der Änderungen anzeigen. Super genial. Vergrößern wir also den Abstand zwischen diesen beiden Spalten. Denn wie Sie hier sehen können, gibt es einige schöne Abstände zwischen ihnen. Also wähle ich diesen Abschnitt aus, der die beiden Spalten enthält, und gehe in das Layout. Spalten Lücke. Sagen wir weiter. Und dann lasst uns das kleine bisschen in die Mitte ziehen und das aktualisieren. Dann lasst uns eine Vorschau der Änderungen anzeigen. Das gefällt mir. Sieht bisher großartig aus. Ich mag die Grenzen um die Eingabefelder nicht. Sie sehen fehl am Platz aus. Ich möchte, dass es flach ist. Und mit Flach meine ich keine Grenzen, nur einfacher, schlichter Hintergrund. Gehen wir also zurück in unseren Außenminister und nehmen diese Änderungen genau dort vor, weil wir diese Form nicht mit Elementor erstellt haben. Wir haben entweder im Back-End genau hier im Formulator erstellt. 20. Entwerfen des Forminator: Daher nehmen wir die Änderungen an der Erscheinung vor, indem in die Registerkarte „Darstellung von Formulatorformularen“ gehen. Klicken wir also in das Erscheinungsbild unseres Formulars. Und sobald Sie auf das Erscheinungsbild klicken, haben wir hier verschiedene Optionen, mit denen wir herumspielen und beeinflussen können , wie sich das Formular schleift. So werden Sie beispielsweise feststellen, dass wenn wir hier flach klicken, diese Anzeige die Ränder entfernt. Wenn wir auf Fett klicken , werden sehr fette Rahmen, Material und keine hinzugefügt. Also möchte ich mit Flat gehen und das dann aktualisieren. Wenn wir also eine Vorschau der Änderungen anzeigen, bemerken Sie jetzt, unsere Eingabefelder keine Grenzen haben. Und das ist gut. Das nächste, was wir tun möchten, ist die Farben unserer Schriftarten zu bearbeiten. Also wie hier ist unsere Schrift weiß. Vielleicht möchten wir ihm eine dunklere Farbe wie diese Farbe geben. Was wir also tun wollen, ist, in Farben direkt unter dem Designstil zu gehen. Zweiter Abschnitt, Farben, Custom. Und dann haben wir die verschiedenen Eingabeformularfelder. Wir haben alle Felder, die Sie möglicherweise in Ihrem Formular haben, können hier bearbeitet werden. Was uns vorerst interessiert sind, sind die Field Basics. Und in den Grundlagen des Feldes haben wir Dinge wie das Etikett, den Vornamen und die E-Mail-Adressetiketten. Sie können die Farben hier darin bearbeiten. Wir können also sagen, wir wollen, dass es so blau ist. Kopiere das hier eingefügte Blau. Geben Sie ein. Klicken wir also auf Aktualisieren. Und wenn Sie eine Vorschau anzeigen, haben die Beschriftungen jetzt das Blau. Also lasst uns weitermachen und sehen, was wir sonst noch ändern können. Gehen wir hier in unsere Elementor-Seite und wählen das Kurzcode-Element aus, das unser Formular enthält. Und klicken Sie auf Anwenden oder rechts. Dann klicken wir auf Vorschauänderungen, damit wir es uns ansehen können. Scrollen wir nach unten und sehen, was wir bisher haben. Das ist also bisher unser Formenanteil in einer anderen Form. Und jetzt werden Sie feststellen, dass dieses Formular, unsere Referenzseite, abgerundete Ecken hat und der Button selbst abgerundete Ecken hat. Aber unsere haben das nicht. Lasst es uns öffnen. Unsere hat sehr scharfe Kurven. Wie erreichen wir diese abgerundeten Ecken? Also vier Minuten oder bietet uns eine Möglichkeit, zusätzliches CSS hinzuzufügen und CSS hinzuzufügen, bedeutet Cascading Stylesheets. So wurde jede Webseite, die Sie im Internet ansehen , von CSS gestaltet und erhalten dieses Erscheinungsbild. Wir können also ein zusätzliches CSS hinzufügen, indem wir das überprüfen. Und sie haben uns hier bereits einige grundlegende Selektoren zur Verfügung gestellt. Falls Sie CSS nicht kennen, müssen Sie hier wirklich nichts verstehen , weil Sie das später lernen können. Dies soll uns nur helfen , etwas zu erreichen , das das Formulier-Plug-In nicht sofort bereitstellt. Das tun sie nicht, sie haben hier viele Optionen, um sie zu bearbeiten, indem wir auf Sachen klicken, aber wir können nicht irgendwo klicken und diese Ecken abgerundet machen. Wir müssen etwas Code verwenden. Und das ist eines der guten Dinge an WordPress. Sie können über das hinausgehen, was Ihnen ein Pluging gibt, und Ihren eigenen Code hinzufügen. Und Plug-Ins bieten Ihnen sogar einen Ort, an dem Sie Ihren Code einwerfen können, und er wird mit ihrem Code kombiniert und Ihnen beide zur Verfügung stellen, denen Sie wirklich suchen. In unserem Fall möchte ich jetzt unsere Eingabefelder auswählen. Und wir haben hier einen Selektor namens Input. Wenn ich also darauf klicke, werden alle Eingaben ausgewählt, alle diese Eingabefelder. Und welche Regel ich auch in diesen beiden geschweiften Klammern gebe , gilt für das Eingabefeld. Im Moment möchte ich ihm einen Randradius geben, der etwas abgerundet ist. Also Grenzradius 50 Pixel. Wenn ich es jetzt in der Vorschau anzeigen würde, werden Sie feststellen, dass unsere Eingabefelder eine abgerundete Ecke haben, da wir sie hier mit unserer Auswahleingabe ausgewählt haben und ihr eine Regel gegeben haben, die darauf gelten soll. Lassen Sie uns das also aktualisieren, um zu sehen, was wir im Frontend haben. Aktualisiere das. Dann lass uns ins Frontend gehen. Scrollen Sie nach unten, wählen Sie das Formular und wenden Sie diese Überschreibung an. Also lasst uns weitermachen und klicken Sie auf Änderungen vorschauen. Und die Ecken sind jetzt abgerundet, aber unser Knopf ist immer noch nicht abgerundet. Im Moment haben wir derzeit keinen Selektor für die Schaltfläche „Senden“ in diesem Plug-In, es gibt eine andere Möglichkeit, diesen Selektor zu finden, und zwar durch die Verwendung der Entwicklungstools. Aber ich möchte das nicht tiefer machen. Im Moment können wir den Knopf einfach so lassen. Wir können den Button so lassen, weil ich hier nicht in die DevTools einsteigen und darüber sprechen möchte hier nicht in die DevTools einsteigen , wie Sie den gesuchten Selektor finden können, da dies den Rahmen dieser Lektion überschreitet. Lass uns den Knopf einfach so lassen. Ich mag es bisher. Aber ich möchte das ein bisschen näher zusammenziehen, nur um seine Höhe zu erhöhen. Mal sehen, was passiert, wenn wir die Seite aktualisieren. Scrollen wir nach unten. Ja. Nein, kehren wir zum Original zurück. Vergrößern wir die Größe dieser Überschrift, damit sie auffälliger wird. Und lasst uns das aktualisieren. Dann lasst uns eine Vorschau der Änderungen anzeigen. Oder reite. Ich mag es bisher. Jetzt sind wir mit diesem Call-to-Action Abschnitt fertig. Sie können Benutzerdaten sammeln. Sie können Personen für Ihre Mailingliste anmelden und mit ihnen in Kontakt bleiben und Dinge für sie vermarkten. Als Nächstes möchten wir tun, wenn Sie die Desktop-Version der Landing Page fertigstellen, ist die Fußzeile. Also erstellen wir die Fußzeile in der nächsten Lektion. Und danach machen wir die gesamte Website auf Mobilgeräten, Desktops und Tablets ansprechend. Erstellen wir also die Fußzeile in der nächsten Lektion. Wir sehen uns in Kürze. 21. Den Fußträger aufbauen: Wir sind jetzt fast fertig mit der Desktop-Version dieser Landingpage. Der einzige verbleibende Teil ist, dass das Essen ist, also lasst uns in das Dashboard springen und die Fußzeile erstellen. Ich gehe ins Aussehen, Elementor, Kopf- und Fußzeilengenerator. Und du erinnerst dich, dass wir eine Nav-Bar erstellt haben. Diesmal erstellen wir also einen Ordner. Klicken Sie also auf Neu hinzufügen. Und wir können weitermachen und ihm einen Namen geben. Also Fußzeile. Wie üblich sollten die Vorlagen Elementor in voller Breite sein, keine Seitenleiste für die Breitendehnung für das Inhaltslayout, deaktivieren Sie die deaktivierte Fußzeile mit dem Titel Mobile Header, primäre Kopfzeile. Und lasst uns das veröffentlichen. Als Nächstes möchten wir festlegen, dass die Art der Vorlage eine Fußzeile sein sollte, sollte auf der gesamten Website verfügbar sein und von jedem bearbeitet werden können. Und lasst uns weitermachen und es schaffen. Ich aktiviere diese einfach gerne, weil ich manchmal den Canvas anstelle der gestreckten Option mit voller Breite verwenden möchte . Und lasst uns das aktualisieren. Dann lasst uns mit Elementor bearbeiten. Ordnung, also hier sind wir. Wir arbeiten an der Fußzeile. Und Sie werden feststellen, dass das, was wir haben, vier Grundelemente sind. Ein Logo, das ein Bildelement ist, ein Menüelement, das bereits erstellt wurde. Dann haben wir ein Absatzelement und diese Icons genau hier. Lassen Sie uns fortfahren und einen dreispaltigen Abschnitt erstellen. Also hier sind wir. Ich wähle diese dreifache Spalte aus. Und in der Mitte hier machen wir weiter und fügen ein Navi hinzu. Denken Sie daran, dass wir ein Navi von HF, Header Footer Builder, Nav Menu, hatten. Jetzt geht es standardmäßig nach links. Was ich also erleichtern wollte, gehe zu Layout und Ausrichtung. Setze es, setze es in die Mitte. Hier drin. Fügen wir ein Bildelement hinzu. Lasst uns weitermachen und uns das schnappen. Eines der Logos, die wir für den Ordner erstellt haben. Ich glaube, es sollte diese sein, die kleine Version. Legen Sie Medien ein. Und lasst uns fortfahren und hier Social-Media-Symbole einfügen. Lass uns das da reinlegen. Und lass es uns ein bisschen erweitern. Während das Styling noch ausgewählt ist, reduzieren wir die Größe ein wenig. Und richten wir sie nach rechts aus. Lassen Sie uns das aktualisieren und eine Vorschau der Änderungen anzeigen. Das ist also das Essen, das sieht so aus. Wir müssen diese nach unten schieben, wie ich bereits erwähnt habe. Also gut, sie sind immer noch erweiterte Polsterung ausgewählt. Oben. Schieben wir es irgendwo hin. Dann aktualisiere das. Jetzt möchten wir als Nächstes auf dieses Symbol klicken, damit wir einen Texteditor hinzufügen und diesen Text dort ablegen können . Dann richten wir es unter Stil, während dies noch aktiv ist, an der Mitte aus. Lassen Sie uns den Copyright-Text direkt dort kopieren. Kopiere das. Und obwohl dies noch ausgewählt ist, gehen wir zum Inhalt, wählen Sie all das aus und löschen Sie es und fügen Sie es dort ein. Aktualisieren. Gehen Sie in Stil dieser Topographie, und lassen Sie uns diese Größe 12 machen. Wählen wir nun das Navigationsmenü aus. Und lasst uns ins Innere gehen. Unter Hauptmenü-Typografie. Lasst uns die Typografie in Montserrat umstellen und diese aktualisieren. Jetzt beim Hover ist dies das Grün, das standardmäßig von Elementor stammt. Das ist nicht das Grün, das wir wollen. Also tippe ich einfach auf dieses Dokument und kopiere das Grün. Und gehe zurück zum Menü. Wähle es aus. Und dann schweben Typografie im Innenstil. Ich ändere diese Farbe in die Farbe, die wir gerade kopiert haben. Und jetzt hat es dieses nette grüne Update, mit dem wir eine Vorschau auf die Fußzeile oder den Freitag sehen. Jetzt, da der Ordner fertig ist, glaube ich nicht, dass ich weitere Änderungen an diesen Symbolen vornehmen möchte. Ich denke, sie sehen großartig aus, aber du kannst mit ihnen herumspielen, indem du sie auswählst. Und hier drinnen nehmen Sie alle gewünschten Änderungen unter Social Icons bearbeiten vor. Was ich tun möchte, ist Exit to Dashboard. Weil ich alle meine Änderungen gespeichert habe. Dann gehe ich in die Seiten. N. Homepage war natürlich eine ist unsere Landing Page. Also möchte ich es mir ansehen. Lasst uns also die Registerkarten auf diese Seite ändern. Also hier sind wir, von oben nach unten, Lasst uns nach unten scrollen. Unsere 40 sehen also großartig aus, aber wir brauchen einen gewissen Spielraum zwischen den beiden. So können wir diesem Pinselabschnitt einen unteren Rand hinzufügen oder dem Ordner einen oberen Rand hinzufügen. Um das zu bearbeiten, gehe ich alle Seiten zurück in die Liste und sage Edit with Elementor, aber ich möchte mit der rechten Maustaste darauf klicken und den Link in einer neuen Registerkarte öffnen und zu dieser Registerkarte wechseln. So können wir die Änderungen von dort aus vornehmen. Scrollen wir also ganz nach unten. Und was wir bemerken werden, ist, dass wir hier unten etwas Spielraum brauchen. Aber die Marge brauchen wir 0s auf diesem unteren Pinsel. Wählen wir also diesen Bearbeitungsabschnitt aus. Gehen wir zu Advanced und veröffentlichen dann diese Verknüpfung. Fügen wir den unteren Rand auf 50 hinzu. Sagen wir jetzt eine 100. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Scrollen Sie ganz nach unten. Jetzt haben wir hier zwischen den beiden einen schönen Spielraum. Super genial. Jetzt habe ich mich nur daran erinnert, dass wir etwas gegen die Navigationsleiste unternehmen sollten , damit sie beim Scrollen nie verschwindet, immer oben bleibt. Also lasst uns das in der nächsten Lektion machen. Also wir sehen uns in Kürze. 22. Die Navbar klebrig machen: Willkommen zurück. Es ist jetzt an der Zeit, den Header klebrig zu machen. Lasst uns anfangen. Springen wir also direkt ins Armaturenbrett. Gehen wir hinein erscheint Kopfzeilenfußzeile, Builder. Und lasst uns die Navigationsleiste mit Elementor bearbeiten. Also klicke ich mit der rechten Maustaste und bearbeite die Navigationsleiste mit Elementor und wechsle zu dieser Registerkarte. Also hier sind wir im Navbar-Workspace. Und was wir tun wollen, ist, den Abschnitt bearbeiten zu lassen und weiter hinein zu gehen. Und erinnere dich an eines der Plugins, die wir im Backend installiert haben, lass mich einfach zum Backend wechseln und in Plugins gehen, installierte Plugins. Eines der Plugins waren Sticky-Header-Effekte für Elementor. Also hier drinnen, obwohl dies noch ausgewählt ist und der Abschnitt „Erweitert bearbeiten“ lautet, werden Sie feststellen, dass wir hier Sticky-Header-Effekte haben. Erweitern Sie das. Sie haben diese Option, um es zu aktivieren, und das bietet hier unten weitere Optionen. Was wir also tun wollen, ist zunächst die Skoll-Distanz in eins zu ändern. Das ist die Menge an Scrollen, die Sie vor dem Kopf haben oder klebrig werden möchten. Was ich hier tun muss, ist die Scroll-Distanz auf eins geändert. Und dann mal sehen, was haben wir sonst noch hier? Transparenter Header. Nein, wir wollen nicht, dass es transparent wird. Also wollen wir die blaue Farbe beibehalten, auch wenn sie klebrig ist. Was ich machen will, ist das einzuschalten, einzuschalten. Und für die Farbe möchte ich hier eine Tabulatortaste setzen und diese blaue Farbe auswählen. Kopieren Sie diesen Tab erneut hierher und fügen Sie ihn dort ein. Und aktualisiere das. Ich möchte die Kopfzeile oder das Logo beim Scrollen nicht verkleinern. Ich möchte nur, dass sie gleich groß bleiben. Also lasst uns eine Vorschau sehen, was wir haben. Aber natürlich werden wir die Klebrigkeit nicht sehen können weil wir die Navigationsleiste selbst in der Vorschau sehen. Also bräuchten wir eine Seite, die scrollbar ist. Sehen wir uns das auf einer neuen Registerkarte an, die scrollbar ist. So können wir diesen Tiki-Effekt sehen. Jetzt lasst uns anfangen zu scrollen und zu bemerken, was mit dem Header passiert. Es bleibt also klebrig. Egal wie sehr wir es scrollen, es ist immer für den Benutzer sichtbar und er kann schnell auf der Website navigieren. Das ist also das, das markiert das Ende dieses Desktop-Abschnitts. Das nächste, was wir jetzt erleichtern möchten, macht die gesamte Landing Page auf Desktop, Handy und Tablets ansprechend. Wir sehen uns in Kürze. 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. Übersicht für das Design: Also sind wir jetzt fast fertig mit unserer Seite. Wir haben es bereits für den Desktop entworfen und es sieht auf dem Desktop großartig aus. Wie sieht es auf Tablets und Mobilgeräten aus? Um zu sehen, wie er auf anderen Geräten aussieht, haben wir zwei Möglichkeiten. Wir werden es benutzen. Es baut in elementarem Device Viewer, responsive Design-Feature auf. Und ich zeige dir, wie das geht. Oder wir können auch die DevTools des Browsers verwenden. Und das möchte ich dir schnell zeigen, bevor wir in Elementor springen. Während wir also noch auf ihrer Zielseite sind, möchte ich Control Shift drücken. I. Das bringt die DevTools auf. Jeder Browser hat diese DevTools. Und nur für den Fall, dass Sie hier unten sind, sich darüber keine Sorgen. Sie können jederzeit ändern, wo sich ihre Tools befinden, indem Sie hier auf dieses Menü klicken und hier eine Option auswählen. Wenn ich das also wähle, geht es nach unten. Ich lasse es vorerst einfach da liegen. Lasst uns es jetzt auf die rechte Seite legen. Und um zu sehen, wie die Landing Page auf verschiedenen Gerätegrößen aussehen wird, können wir in den Responsive-Modus wechseln. Schalten Sie die Gerätesymbolleiste um. Du solltest dieses Icon sehen. Wenn du darauf klickst. Wir haben jetzt all diese Optionen, die uns helfen, verschiedene Gerätegrößen nachzuahmen. Wenn wir also auf dieses Dropdown-Menü klicken, das reagiert, haben wir einen reaktionsschnellen und reaktionsschnellen Modus, der bedeutet, dass wir den Bildschirm manuell ziehen können , um seine Größe zu vergrößern. Und Sie werden sehen, wie sich die Dimensionen hier in Echtzeit ändern. Wir haben auch Voreinstellungen verschiedener Geräte. Klicken wir auf Galaxy S five, um zu sehen, wie die Landing Page auf diesem Gerät aussehen wird. Lasst uns weiter auf ein iPad klicken und sehen, wie es auf einem iPad aussehen wird. Und wir können den Zoom genau hier erhöhen, um ihn näher zu bringen. So sieht es auf einem iPad aus. Wie wär's mit einem iPhone X? So sollte es wie ein iPhone X aussehen. Und Sie werden feststellen, dass wir dieses Burger-Menü genau hier haben. Und wenn wir darauf klicken, hat es diese Optionen, die Navigationsleiste. Aber wir müssen etwas dagegen unternehmen, weil es nicht gut aussieht. Derzeit. Scrollen Sie ganz nach unten und sehen Sie, wie die Fußzeile aussieht. So sieht das Foto also aus. Wir müssen auch etwas dagegen unternehmen. Grundsätzlich denke ich, dass die Website bereits in guter Verfassung ist, nur ein paar Tricks, und wir werden sie auf mobilen Geräten gut aussehen lassen. Lasst uns ein 100 Prozent dort haben. Um nun den Responsive Design-Modus zu verlassen, klicken Sie hier erneut auf dasselbe Symbol und die Todeszahlen und schließen Sie dann die Entwickler-Tools. Und dann wollen wir jetzt in den Bearbeitungsmodus oder Workspace von Elementor gelangen. Während wir also noch auf dieser Seite sind, gehe ich hier hoch und wenn ich klicke, öffnet sich dieser Workspace. Und wenn wir den Mauszeiger hierher bewegen und stattdessen auf die Navigationsleiste klicken, öffnen wir den Arbeitsbereich zur Bearbeitung der Navigationsleiste. gleiche Fall gilt für die Fußzeile. Wenn wir klicken, wird dies an den Ort gebracht, an dem wir mit der Bearbeitung der Fußzeile beginnen. Fangen wir also mit der Navigationsleiste an. Also wir sehen uns in Kürze. 25. Responsive mobile navbar: Willkommen zurück im Responsive Design Teil dieser Klasse. Um nun mit der Verwendung von Elementaren zu beginnen, die in responsiven Designfunktionen und Tools integriert sind, müssen Sie in den Bearbeitungsmodus springen. Und so werde ich den Mauszeiger hier drüben bewegen. Und wenn ich auf Bearbeiten mit Elementor klicke, wird direkt zur Bearbeitung der Seite selbst, des Hauptinhalts, des Heldenabschnitts und des Hauptinhalts weitergeleitet. Aber wenn wir den Mauszeiger hierher bewegen und stattdessen auf die Navbar klicken , wird es zu dem Ort geführt, an dem wir das bearbeiten werden. Jetzt Bar, Only. gleiche Fall gilt für die Fußzeile. Das erste, was wir tun wollen, ist die Navigationsleiste zu bearbeiten, weil wir damit beginnen möchten die Navbar ansprechend oder richtig zu machen. Also hier sind wir. Wir sind in der Lage, die Navbar zu bearbeiten und sie als passiv zu gestalten. Um loszulegen, möchten wir zuerst hier runter gehen und auf dieses Symbol für den Responsive-Modus klicken , um den Responsive-Modus zu aktivieren. Und ein neuer Hinweis, dass es hier oben eine Pop-up-Leiste mit all diesen Optionen gibt. Und wie Sie sehen können, haben wir ein Tablet, Tablet-Größe und eine mobile Größe. Zunächst möchten wir uns ansehen, wie die Navigationsleiste auf mobilen Bildschirmen aussieht. In einer Clique sieht das also so aus. Es sieht nicht ganz vorzeigbar aus. Das erste, was wir tun wollen, ist das Logo nach links und dieses Menü nach rechts zu schieben. Eine Sache, die Sie beachten müssen, ist, dass dies zwei Spalten sind, die in diesem Abschnitt untergebracht sind. Lassen Sie uns den Desktop-Modus für eine Sekunde ändern. Denken Sie also daran, dass dies hier ein zweispaltiger Abschnitt ist. Es hat eine Spalte, zwei Spalten. Und so belegt es 100 Prozent des Bildschirms. Diese beiden Spalten sind also im Wesentlichen in Prozentsätze dieser 100% unterteilt. Dies könnte also 20 Prozent betragen, die 80 Prozent betragen könnten. Wenn Sie also auf ein mobiles Gerät wechseln um dieses Logo nach links und das Menü nach rechts zu bringen, müssen wir diese 100-prozentige Breite durch zwei teilen, also 50, 50% Prozent. Ich klicke hier auf diese Spalte. Die Spalte, die das Logo enthält. Und unter Layouts, Spaltenbreite, gebe ich 50 Prozent ein. Gerade 50 so. Und jetzt belegt es 50%. Du kannst es an der Grenze genau hier erkennen. Also wähle ich auch die Menüspalte aus. Und ich mache dasselbe unter Layout, Spaltenbreite 50 Prozent, und jetzt befinden sich die beiden in derselben Zeile. Als Nächstes wollen wir dieses Menü sichtbar machen. Im Moment ist es schwarz. Standardmäßig ist es nicht leicht zu sehen. In der nächsten Lektion fügen wir dem mobilen Menü etwas Styling hinzu. Wir sehen uns in Kürze. 26. Das mobile Menü: Und willkommen zurück. Es ist an der Zeit, die mobile Menüschleife vorzeigbarer zu gestalten. Also lasst uns anfangen. Also wähle ich das Menü selbst aus. Und jetzt gehe ich unter Inhalt und gehe ins Layout. Und unter reaktionsschneller Ausrichtung. Schieben wir es so nach rechts. Und jetzt machen wir es weiß und farbig. Gehen wir also in den Stil und lassen Sie uns die Einstellungen des Hauptmenüs reduzieren. Wir müssen in den Menüauslöser gehen und das Symbol schließen. Wir können den Hintergrund einstellen. Stellen wir es vorerst auf Weiß, damit es sichtbar ist. Und aktualisiere das. Und wenn wir auf das Menü selbst klicken, merken Sie, was genau hier passiert. Die Schriftart ist also standardmäßig weiß und bei Hover ist grün. Was wir also zuerst machen wollen, ist, ihm einen Hintergrund zu geben. Lassen Sie uns diesen grünen Hintergrund geben. Und ich möchte nur zu dem Ort gehen, an dem wir dieses Grün haben. Ich kopiere das und gehe hier zurück und reduziere den Hauptauslöser und schließe das Symbol. Weil wir an diesem Dropdown-Menü interessiert sind. Gehe in das Dropdown-Menü. Und für die Hintergrundfarbe möchte ich sie ändern. Ich möchte den Code einfügen, den wir gerade von der anderen Seite kopiert haben. Jetzt ist es also grün. Und wie Sie gerade sehen können, ist es beim Schweben, weil es grün wird, unsichtbar. Also müssen wir den Hover-Status der Textfarbe auf ändern, geben wir ihm diese Farbe. 40, 40, 40. In unserem eigenen Schwebeweg ändert es sich zu schlechte Farbe. Aber jetzt versteckt es das Logo. Also müssen wir das gesamte Dropdown-Menü nach unten schieben. Während wir noch im Dropdown-Menü stehen. Scrollen wir nach unten und suchen nach der obersten Distanz. Und lassen Sie uns das einfach manuell erhöhen. Schieb es runter. Und ich mag es, wo es gerade ist. Lasst uns das aktualisieren. Und für den Teiler sagen wir keines. Also, um diese Zeilen loszuwerden. Und jetzt keine Grenze, aktualisiere das. Also lasst uns eine Vorschau dort sehen. Wenn wir Control Shift I drücken , um die DevTools anzuzeigen, und klicken Sie dann genau hier auf dieses Symbol, das wir gerade gesehen haben. So sieht es gerade auf Tablets aus. So sieht es also auf einem iPad aus. Wir kommen in Kürze zur Tablet-Größe, aber wechseln wir zu einer Telefonansicht und so sieht es am Telefon aus. Ich denke, ich mag es, wo wir hinkommen, aber wir können diese weiße Linie loswerden, indem wir sie ein wenig hochschieben. Also lasst uns hierher zurückkehren, Top-Distanz und reduzieren Sie sie vielleicht auf 25. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Also lasst uns das anklicken. Ja, also gefällt mir diese Position. Beachten Sie jedoch, dass das Logo viel mehr eingerückt ist als viel mehr als die Navigationsgegenstände. Positionieren wir also das Logo richtig oder mobile Bildschirme. In der nächsten Lektion sehen wir uns in Kürze. 27. Positionierung des mobilen Logos: Willkommen zurück. Es ist jetzt an der Zeit, dieses Logo auf mobilen Bildschirmen richtig zu positionieren. Also lasst uns anfangen. Lasst uns wieder hier rein gehen. Wählen Sie das Logo aus. Und während die Logo-Säule. Und während die Logospalte ausgewählt ist, lassen Sie uns die Spalte bearbeiten, gehen Sie in „Erweitert“ und lassen Sie uns diesen Link und das auch entfernen. Und um es jetzt nach links zu schieben, müssen wir nur noch den Rand auf der linken Seite reduzieren, so bis zu diesem Punkt. Und lassen Sie uns die Marge oben erhöhen, damit wir oben etwas Platz schaffen können. Lassen Sie uns etwas wie 20 geben. Und jetzt werden Sie feststellen, dass das Logo fast den unteren Rand des Abschnitts berührt. Lassen Sie uns also genau hier etwas gegen diese Polsterung unternehmen. Das erste, was wir tun müssen, ist das gesamte Dropdown-Menü nach unten zu drücken. Und lasst uns das zuerst tun, um sicherzustellen, dass wir das sind, wir haben das Burger-Menü ausgewählt und eine beliebige Stelle innerhalb dieses blauen Rahmens auswählen. Und jetzt ist dies der Artikel, den wir gerade hier bearbeiten. Als Nächstes gehen wir in den Stil, scrollen Sie nach unten und suchen Sie nach einem Dropdown-Menü. Und dann lasst uns in die oberste Distanz gehen und sie erhöhen. Oder richtig. Als Nächstes wählen wir diesen oberen Abschnitt aus, der das Logo und das Menü enthält. Ich hatte diesen Link bereits hier entfernt. Lassen Sie mich das auch entfernen. Vergrößern wir die untere Polsterung. Ein bisschen so. Und lasst uns updaten. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Kontrolliere ich, um die DevTools zu öffnen. Und so sieht es aus. Also lasst uns, lasst uns den Burger umschalten, um zu sehen, was wir haben. Und jetzt sieht es großartig aus. Aber jetzt muss dieses Menü selbst, das Menüsymbol, wie das Logo richtig ausgerichtet sein. Also lasst uns zurückgehen und das machen. Solange es noch ausgewählt ist. Gehen Sie hier rein und brechen Sie diese Links auch auf. Und lassen Sie uns die richtige Marge ein wenig auf bis zu 10 erhöhen. Und auch die oberste Marge. Lasst es uns bis zu diesem Punkt erhöhen. Benutze einfach dein Auge, um zu sehen, ob du es richtig positionieren kannst. Dann lassen Sie uns das aktualisieren und eine Vorschau der Änderungen anzeigen. Stimmt's? Jetzt müssen wir das Dropdown-Menü ein wenig nach oben drücken, um diesen Leerraum loszuwerden. Während es noch ausgewählt ist, gehe ich in den Stil. Das Hauptmenü wurde reduziert, das Menü das Dropdown-Menü geöffnet. Und für die oberste Distanz reduzieren wir sie bis zu diesem Punkt. Aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Großartig. Jetzt sind wir mit dem Responsive Menu fertig. Es funktioniert einwandfrei. Das nächste, was wir tun wollen, ist an einer reaktionsschnellen Helden-Sektion und dem Rest des Körpers zu arbeiten. Also lasst uns das in der nächsten Lektion machen. 28. Responsive hero: Lasst uns von dort fortfahren, wo wir aufgehört haben. Wir haben bereits ein reaktionsschnelles Menü für mobile Geräte. Und hier ist es. Als Nächstes wollen wir den Rest der Seite ansprechen, und wir beginnen mit dem Heldenbereich. das zu tun, springen wir in das Dashboard und gehen in die Seiten. Und dann bearbeiten wir unsere Landing Page mit Elementor. Ich öffne das in einem neuen Tab und wechsle zu diesem Tab. Hier sind wir. Also möchten wir auf jeden Fall für den Anfang in den Responsive-Modus springen. Wechseln wir also zum Handy. Wenn man es sich nur anschaut, sieht man schon ein Ungleichgewicht. Der Rand hier sind winzige Brunnen, Rand hier ist B. Und diese Pinselstriche scheinen etwas steil zu sein, also müssen wir sie ein wenig abflachen. Aber wenn wir nach unten scrollen, haben wir das derzeit. Scrollen Sie nach unten. Ich glaube nicht, dass wir viel Arbeit haben, weil sich der gesamte Inhalt anscheinend richtig ausgerichtet zu haben scheint , wenn wir in den Responsive-Modus wechseln, aber wir müssen einige der Elemente ein wenig wie diesen Button optimieren, nur damit sie richtig ausgerichtet ist. Also lasst uns gleich hier ganz oben zurückgehen. Und das erste, was wir tun wollen, ist diesen Pinselstrich abzuflachen. Wählen wir also den Abschnitt aus, der ihn enthält. Und lasst uns in Stil geformte Trennwand gehen. Und reduzieren wir die Höhe auf vielleicht 30 Prozent. Das ist die Hälfte dessen, was wir derzeit haben. Ja, also gefällt mir das. Das war's. Lassen Sie uns zu dieser Kolumne übergehen und etwas gegen diesen Rand unternehmen. Das erste, was ich tun möchte, ist die Spalte auszuwählen, die alle diese Textblöcke und Symbole enthält. Und wir wollen mit der rechten Maustaste klicken und die Spalte bearbeiten. Und während wir noch da sind, gehen wir weiter hinein. Und lassen Sie uns diesen Link entfernen, den Standardabstand und den Rand. Und das wird alles zurücksetzen, damit wir unsere eigenen Ränder und Polsterungen hinzufügen können. Und jetzt wollte ich sie jetzt noch einmal miteinander verbinden. Also mache ich das. Und lassen Sie uns ihnen eine Polsterung von 15 oder rechts geben. Also von allen Seiten, von oben, rechts, unten und links. In dieser Spalte werden alle Texte eine Auffüllung von 15 haben. Stimmt's? Das war's also. Wählen wir das aus. Willkommen bei. Und richten wir es an der Mitte aus. Und ich denke, wir müssen die Größe ein wenig reduzieren, weil es sich auf mobilen Bildschirmen befindet, nur damit es in einer Zeile ist. Machen wir das Gleiche für Podcasts. Podcast. Richten wir es an der Mitte aus und reduzieren Sie die Größe ein wenig. Sie können es ein bisschen aufklappen. Nur weil dies unser H1 ist und es eine Zusammenfassung unserer Zielseiteninhalte ist. Und dann machen wir das Gleiche für den Absatz genau hier. Geh hinein, solange es noch ausgewählt ist. Gehen wir in den Stil und richten ihn an der Mitte aus. Und lasst uns das aktualisieren. Als Nächstes. Wählen Sie das Featured on aus. mir nichts aus, es dort zu haben, aber lasst uns diese Spalte loswerden und sie an der Mitte ausrichten, die vorzeigbarer aussieht. Lassen Sie uns eine Vorschau der bisherigen Änderungen anzeigen. Drücken wir Control Shift I oder Command Shift I auf dem Mac. Es sieht schon großartig aus. Lassen Sie uns also etwas gegen diese vorgestellten Icons unternehmen. Denken Sie daran, dass wir diesen einzelnen Spalten den linken und rechten Rand hinzugefügt haben, aber keinen oberen oder unteren Rand hinzugefügt haben. Wir haben den oberen und unteren Rand des Abschnitts hinzugefügt, der ihn enthält. Deshalb gibt es diesen kontinuierlichen Raum bis zum Ende. Für die einzelnen Spalten haben wir jedoch keine oberen oder unteren Ränder hinzugefügt. Und deshalb haben sie, wenn wir zur mobilen Ansicht wechseln, keinen Spielraum. Wählen wir hier also den ersten aus und gehen Sie weiter. Und für den Spielraum breche ich das zuerst. Und dann steige ich die Top-Marge um vielleicht bis zu fünf. Sagen wir fünf. Und dann kopiere ich das Styling. Und wenn ich das gleiche Styling in die zweite Spalte einfüge, hat es einen oberen Rand von fünf. Und der gleiche Fall gilt für den Rest. Also wähle ich aus, dass jede Spalte erweitert wird. Machen wir das zu einer 10. Das ist eher so. Machen wir das auch zu einer 10. Die oberste zählt nicht wirklich, weil darüber kein Objekt vorhanden ist. Aber lassen Sie uns dieses Styling kopieren und fügen das Styling in diese anderen ein. Lassen Sie uns nun den oberen Rand dieser Seite entfernen. Denn wie Sie sehen können, ist es in diesem neuen Abschnitt eine Kreuzung, die diese drei und eine andere Kreuzung hält, die diese drei hält. Die Abschnitte selbst haben also ihre eigene Marge. Und diese Margen sind nicht gleich den Margen, die wir für die Spalte haben. Wir müssen sie also ein wenig behandeln, damit sie konsistent aussehen. Lasst uns das also ein bisschen reduzieren. Lass uns eine Zehn geben. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Großartig. Unsere Icons sehen gut aus. Lassen Sie uns zum Abschnitt „Featured Episode“ übergehen und ihn reaktionsschnell machen. Lass uns das in der nächsten Lektion machen. Wir sehen uns in Kürze. 29. Responsiver main: Also willkommen zurück. Lassen Sie uns weiterhin unseren Hauptinhaltsbereich auf Mobilgeräten ansprechen. Das nächste, was wir hier tun möchten, ist die Auswahl dieser Unterüberschrift. Und lasst uns seine Größe reduzieren. Natürlich steht es Ihnen frei, ihm jede gewünschte Größe zu geben. Serrano hat es in einer einzigen Zeile. Und stellen wir sicher, dass es an der Mitte ausgerichtet ist. im Inhaltscenter Lassen Sie uns im Inhaltscenter das Gleiche dafür tun. Und ich möchte die Größe nur ein bisschen so reduzieren. Wählen wir diese Schriftart aus, auch diese Beschreibung. Lass uns in Stil gehen, ausrichten, zentrieren. Wählen Sie die Schaltfläche aus, richten Sie die Mitte aus und aktualisieren Sie diese. Und lasst uns die Änderungen überprüfen. Okay, also lasst uns weiter scrollen. Mir gefällt die Position und Größe des Bildes. Lassen Sie uns etwas gegen diesen Pinselstrich unternehmen. Also wähle ich diesen Abschnitt aus, der diesen Pinselstrich enthält. Erinnerst du dich, ob ich in den Desktop-Modus wechseln könnte? Dieser Pinselstrich hier befindet sich in diesem Abschnitt, nicht im blauen Abschnitt. Also lasst uns wieder reingehen dort wieder hineinscrollen. Wählen Sie diesen Abschnitt aus. Und während es noch ausgewählt ist, gehen wir in den stilförmigen Trennwand, unten. Und lasst uns das bei 30 behalten. Aktualisiere das. Ich denke, es sieht gut aus. Was diesen Abschnitt angeht, denke ich genauso, wo alles positioniert ist. Aber eine Sache, die wir tun können, ist diese Spalte auszuwählen, um die Seite erweitert zu werden. Und lasst uns eine Polsterung von 15 geben. Alles klar, also haben wir diese Karten ein bisschen nach innen geschoben. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Super genial. Ich mag es schon, dass diese Bilder positioniert sind, aber lasst uns etwas gegen diesen Pinselstrich tun. Also lasst uns wieder hier rein gehen. Wählen Sie diesen Abschnitt aus. Gehen wir in den Stylesheet-Teiler. Und das ist oben, denn dies ist ein kleiner Abschnitt, den wir hinzugefügt haben, um die Pinselstriche hinzuzufügen. Lassen Sie uns ein 30-Update geben, das Lassen Sie uns weiter scrollen, um zu sehen, was noch verbessert werden muss oder richtig Wählen Sie also diese Spalte , die die Textbeschreibung erweitert enthält. Entferne diesen Link genau dort. Und entferne diese Links genau dort. Und jetzt können wir das auswählen, geben Sie ihm eine 15. 15. So sieht es aus. Reduzieren wir diesen Rand direkt unter dem Bild. Wählen Sie also das Bild erweitert. Lassen Sie uns den Rand entfernen, entfernen Sie genau dort. Und für den unteren Rand, Lasst uns unser Auge benutzen und es bis zur richtigen Stelle reduzieren. Denk ich gehe mit der 75. Und lasst uns etwas über Alex wählen. Richten Sie die Mitte aus. Wählen Sie diesen Text aus. Richten Sie die Mitte aus. Wählen Sie die Schaltfläche aus. Richten Sie die Mitte aus. Richtig. Das nächste, was wir tun müssen, ist, diesen grünen Abschnitt nach unten zu schieben und von diesem Textblock zu trennen. Wählen wir also den Button aus. Und lasst uns fortgeschritten hineingehen. Brechen Sie den Link genau hier und erhöhen Sie die untere Polsterung. Also lass uns sehen. Lasst uns unser Auge bis zu diesem Punkt benutzen. Und jetzt wollen wir etwas gegen diesen Pinselstrich tun , wie im vorherigen Pinselstrich genau hier. Sehen wir uns an, wo es sich befindet, indem Sie zu unserer Desktop-Ansicht wechseln. Und Sie werden feststellen, dass es sich in diesem Abschnitt befindet, der das Bild und den Textblock enthält. Um den Pinselstrich zu bearbeiten, müssen wir diesen Editierabschnitt auswählen. Ein Wechsel zur mobilen Ansicht. Immer noch ausgewählt. Stil, geformte Trennwand. Unten 30. Ja, jetzt sieht es viel besser aus. Wählen wir diese Schriftart aus. Leg es in die Mitte. Die gleiche Schriftart hier. Schieb das in die Mitte. Wie wo sich das Formular befindet. Aber natürlich kannst du mit der Positionierung herumspielen, bis du zufrieden bist. Und lasst uns auch etwas dagegen unternehmen. Wählen Sie das aus, gehen Sie in Stil geformten Trennwand 30. Lassen Sie uns das aktualisieren und eine Vorschau der Änderungen anzeigen. Hab Recht. Wir sind also fast fertig mit dem mobilen Responsive Design. Der einzige Teil, der noch übrig ist, ist die Fußzeile. Also lasst uns das Essen ansprechen lassen. In der nächsten Lektion, bevor wir enden. Wir sehen uns in Kürze. 30. Responsives mobiles footer: Also lasst uns weitermachen. Wir möchten die Fußzeile ansprechen lassen. Im Moment haben wir unser Logo hier. Dann haben wir unser Navigationsmenü, das sich beim Anklicken so öffnet. Und wir haben diese Urheberrechtsinformationen und unsere Social-Media-Symbole scheinen falsch ausgerichtet zu sein. Springen wir in unser Armaturenbrett. Gehen wir in die Darstellung des Kopfzeilenfußzeilen-Builders. Und lasst uns unser Foto mit Elementor bearbeiten, Link in einem neuen Tab öffnen und zu diesem Tab wechseln. Super genial. Jetzt ist die Fußzeile editierbar. Wechseln wir in den Responsive-Modus. Und klicken wir auf das Handy-Symbol. Also hier haben wir es. Also denke ich jetzt, lasst uns die Icons auswählen und in der Mitte ausrichten. Aktualisiere das. Und mal sehen, was wir haben. Kontrolliere das Schafauge, um die DevTools aufzurufen und zur Geräteansicht zu wechseln. Und so sieht unsere Fußzeile aus. Ich mag es schon, wie es aussieht, aber Sie können immer genau das Gleiche tun, was wir getan haben, wenn Sie möchten, dass sich Ihr Logo in der Fußzeile auf der linken Seite befindet und das Menü auf der rechten Seite sie einfach in Prozentsätze der, eine Breite von 100 Prozent. Gehen wir also zurück, wechseln wir zur Desktop-Ansicht. Wie ich bereits erwähnt habe, hat der Abschnitt, der all diese Elemente eine Breite von 100 Prozent und sie sind im Grunde in Prozentsätze von 100% aufgeteilt. Also hier, in der Fußzeile, wenn wir dieses Logo nach links und das Menü nach rechts bringen wollen, oder wir müssen das auswählen. Denken Sie daran, dass wir drei Spalten haben, im Gegensatz zu der Navigationsleiste, die zwei Spalten hatte. Diesmal teilen wir die 100% in drei verschiedene Prozentsätze auf. Also lasst uns das anklicken. Wir können die Logospalte auswählen, die gerade ganz nach links verläuft. Jede Spalte wird standardmäßig von links nach rechts auf Mobilgeräten ausgeführt. Was wir also tun müssen, ist die erste Spalte auszuwählen und ihr vielleicht 20 Prozent oder 55% zu geben . Und lassen Sie uns das Menü 45 Prozent geben. Alles klar, damit diese beiden genau dort ausgerichtet sind. Aber denken Sie daran, dass wir einen dritten Gegenstand hatten. Lassen Sie es uns standardmäßig bei 100 Prozent belassen, damit es ganz unten ist. Das ist eine andere Art, das zu tun. Aber ich bevorzuge das, was wir ein bisschen früher hatten. Ich wollte Ihnen nur zeigen, wie Sie den Fuß auf die gleiche Weise strukturieren können, wie wir das Navigationsmenü mit Prozentsätzen strukturiert haben. Aktualisiere das. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Im Moment sieht alles überall verstreut aus. Und das Ziel war es, Ihnen zu zeigen, dass Sie Dinge in den verschiedenen Spalten bewegen und die Größe ändern können. Ich bevorzuge Elemente in der Fußzeile, die übereinander gestapelt sind, wie wir sie anfangs hatten. Gehen wir also zurück zu dem, was wir ursprünglich hatten. Also gebe ich das 100 Prozent. Ich gebe das Menü auch mit einer Breite von 100 Prozent. Und natürlich sind die sozialen Icons ein 100-prozentiges Update und lassen Sie uns eine Vorschau der Änderungen anzeigen. Ja, das haben wir also. Wenn Sie also darauf klicken, wird das Dropdown-Menü angezeigt, aber das Dropdown-Menü ist nicht gestaltet. Was können wir dagegen tun? So können wir es genauso stylen, wie wir die obere Navigationsleiste gestylt hatten. Gehen Sie also wieder hier rein und erweitern Sie es. Und lasst uns ins Innere gehen. Das ist nicht das Hauptmenü. Wir möchten das Dropdown-Menü für die Hintergrundfarbe. Lass mich das Grün sehr schnell schnappen. Kopiere das. Geh wieder hier rein. Lasst uns das da drin stellen. Und für die Textfarbe wollen wir, dass sie weiß ist und der eigene Schwebeweg ist. Wir wollen, dass es so blau ist. Das Blau. Und wenn es aktiv ist, wollen wir auch, dass es so blau ist. Lasst uns diese Zeilen loswerden. Scrollen Sie also den ganzen Weg nach unten, noch im Dropdown-Menü. Scrollen Sie nach unten zu Trennwand, Randstil, keiner. Und klicken wir auf Aktualisieren. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Oder Freitag gefällt mir, was wir haben. Jetzt reagiert unsere Seite voll und ganz. Wir haben eine reaktionsschnelle Navbar, reaktionsschnellen Körper und eine reaktionsschnelle Fußzeile. Werfen wir gerade einen kurzen Blick auf die Seite. Also lasst uns in die Seiten gehen. Und ich klicke mit der rechten Maustaste auf Ansicht, öffne den Link in einem neuen Tab und lass uns zu diesem Tab wechseln. Dies ist also das Endergebnis, das wir für die Desktop-Ansicht haben. Und wenn ich auf Control Shift I oder Command Shift I klicke , sehen wir uns an, wie es auf mobilen Bildschirmen aussieht. Werde etwas dagegen unternehmen, mach dir keine Sorgen. Das haben wir also. Also lasst uns dieses Leerzeichen hier oben loswerden. In der nächsten Lektion sehen wir uns in Kürze. 31. Anpassen von Adjusting navbar: Lasst uns etwas dagegen unternehmen. Lassen Sie mich also einfach von den DevTools verlassen, schließen Sie das. Und dann fahre ich mit der Maus darüber und klicke auf die Navigationsleiste, damit wir sie bearbeiten können. Also hier drin wollen wir in den Responsive-Modus wechseln, es sei denn, es handelt sich um eine mobile Ansicht. Was wir also tun wollen, ist, den gesamten Abschnitt nach oben zu schieben , indem wir diese oberste Marge hier reduzieren. Also lasst uns fortfahren und den gesamten Abschnitt auswählen und „Bearbeiten“ sagen. Lasst uns fortfahren und diese Links gleich hier entfernen. Und dann lassen Sie uns für den oberen Rand zunächst die obere Polsterung auf etwa 40 erhöhen. Und lassen Sie uns die oberste Marge um den gleichen Betrag reduzieren, aber in die entgegengesetzte Richtung. Das ist also ein negativer 40. Und was das tut, ist, dass es diesen blauen Abschnitt, den wir gerade hinzugefügt haben, nach oben schiebt. Reduzieren wir es also auf, sagen wir negativ negativ 40. Und jetzt den zusätzlichen blauen Bereich, den wir bekommen haben, wenn wir die Polsterung erhöhen, lassen Sie mich einfach den Rand entfernen. Dieser extra blaue Bereich wurde hier nach oben geschoben und wird diesen Bereich abdecken. Also lasst uns diese negativen 40 zurückgeben. Und lasst uns das aktualisieren. Ich denke, wir sollten auch die untere Polsterung hier auf etwas wie 15 erhöhen. Ups, die Verbindung ist verloren. Lassen Sie mich das einfach aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Kontrolliere Shift I, damit wir es auf Mobilgeräten ansehen und anfangen zu scrollen. Auf keinen Fall können wir dies scrollen, da wir nur die Navigationsleiste bearbeiten. Wir müssen in die eigentliche Landingpage gehen. Lass mich dahin wechseln. Lass mich das auffrischen. Zumindest haben wir diese Leerstelle dort nicht. Und nur damit wir hier oben nicht zu viel Platz haben, können wir die höchste Marge dieser Elemente reduzieren. Wählen Sie also die einzelnen Spalten aus und gehen Sie für den oberen Rand nach oben nach innen, sagen wir etwas wie 10. Wir haben den Spielraum für die Logospalte nicht festgelegt. Wir haben es direkt auf dem Logo-Element gesagt. Sagen wir also 0. Aktualisiere das. Und lasst uns unsere Zielseite betreten und diese Seite aktualisieren und sehen, was wir haben. Richtig. Also haben wir den ganzen Abstand reduziert, der oben lag. Ich denke im Moment haben wir eine Landing Page, die funktioniert und super großartig aussieht. Wenn Sie mehr Zeit haben, müssen Sie natürlich mehr üben und mit allen Tools und Funktionen von Elementor herumspielen . Ich hoffe, dass Sie bisher verstanden haben, wie Sie einige der von Elementor bereitgestellten Tools und Funktionen verwenden können, um eine Weltklasse-Zielseite zu erstellen. Lass mich das einfach abschalten. Lassen Sie uns jetzt eine Vorschau der gesamten Seite mit allen Änderungen anzeigen, die wir vorgenommen haben, oder rechts, also lasst uns anfangen, ganz nach unten zu scrollen. Und wechseln wir zur mobilen Ansicht. Fangen wir an zu scrollen. Und unsere Landing Page funktioniert einwandfrei und wir können verschiedene Geräte durchwechseln und sehen, wie sie aussehen wird. So wird es also auf einem iPhone X, auf einem Galaxy S5 und so weiter aussehen . Jetzt fragen Sie sich vielleicht, Hey, können wir kein Responsive Design auf dem Tablet gemacht haben? Wenn ich also auf den Responsive-Modus klicke, haben wir immer noch den Tablet-Modus. Und das haben wir nicht gemacht. Ich habe das absichtlich verlassen, damit Sie vor Ende des Unterrichts etwas Übung machen können. Versuchen Sie also, diese Seite auf dem Tablet mit den gleichen Prinzipien zu reagieren , die wir verwendet haben, um sie auf Mobilgeräten zu reagieren. Denken Sie daran, was wir getan haben, um diese beiden Elemente nebeneinander auf die Navigationsleiste zu stellen, Sie dasselbe, was Sie für das Tablet tun werden. Und wie Sie gerade sehen können, haben wir das, aber es braucht etwas Berührung. Dies ist also eine gute Möglichkeit für Sie, ansprechendes Design zu trainieren. Sie verstehen bereits, wie es auf Mobilgeräten geht. Gleiche, die genauen Grundsätze gelten hier auf dem Tablet. Also mach das und lass uns sehen, womit du am Ende enden wirst. Und das markiert das Ende unseres Kurses. Ich hoffe, du hattest genauso viel Spaß daran, es anzuschauen und mitzuverfolgen wie ich es erstellt hatte. Und ich hoffe vor allem, Sie gelernt haben, eine schöne Landing Page für einen Podcast zu erstellen. Mein Name ist Ken Visa. Es ist mir immer ein Vergnügen, Ihnen beizubringen, wie man schöne Webseiten erstellt. Ich arbeite bereits an der nächsten Klasse, die Sie hoffentlich hilfreich finden werden. Und ich hoffe, wir sehen uns bald bis zum nächsten Mal. Vorsicht, bleib cool, Stück.