Wie man eine Landing-Page mit Elementor in WordPress erstellt?

1. Was werden wir in diesem Kurs lernen?: Hallo Leute, Willkommen zu dieser Vorlesung. Falls du mich nicht kennst, mein Name ist Muhammad statt Geld und ich bin ein WordPress-Entwickler mit sieben Jahren Erfahrung. Ich wünsche mir auch eine Digitalagentur und bin stolz darauf, meinen Kunden auf der ganzen Welt zu dienen. In diesem kurzen Kurs lernen wir, wie wir eine einseitige Seite erstellen können. Wir werden Elementary Page Builder verwenden , um eine Landingpage zu erstellen. Jetzt könnten wir auch andere Dinge verwenden, aber der Zweck der Verwendung von Elementor ist, dass es sehr einfach und schnell ist, eine Landingpage mit Elementor zu erstellen. Mit dem schönen Drag & Drop-Seitenersteller können Sie ganz einfach Layouts erstellen, die Sie benötigen. Sie können die Spalten, Abschnittspositionen, Schriftgrößen und all das mit einfachen Klicks anpassen . Der Pitch, den wir erstellen werden, wird also ein anklickbares Logo und soziale Symbole enthalten. Das könnte uns eine Reihe von Symbolen in der Kopfzeile geben, eine einprägsame Art und Weise mit einem anklickbaren Aufruf zum Handeln. Wir werden auch andere Abschnitte entlang des Ziels erstellen. Am Ende werden wir einige nette Animationen hinzufügen , damit es schöner und attraktiver aussieht. Also jetzt hoffe ich, dich drinnen zu sehen. Lassen Sie uns näher darauf eingehen. 2. Wie du eine Website einrichten kannst?: Also herzlichen Glückwunsch, dass Sie an diesem Kurs teilgenommen haben. Wenn Sie dabei sind, müssen wir sehen, wie wir anfangen können. Also hier ist eine Frage an dich. Ja, diesen Teil können wir überspringen. Wenn nicht, müssen wir hier einige Konfigurationen vornehmen. Zunächst müssen wir eine Domain und ein Hosting einrichten. Und dafür müssen wir auf jeden Fall eine Domain kaufen und die verschiedenen Unternehmen hosten. Ich werde Ihnen empfehlen, eine Domain und ein Hosting zu kaufen, da Sie SiteGround, vielleicht Bluehost oder vielleicht Host Gator in Betracht ziehen können . Dies sind die wenigen Namen. Ich weiß, dass es gute gibt, aber Sie können auch andere Fragen wählen, jede andere Domain, so gut Sie möchten. Nachdem Sie die Domain und das Hosting konfiguriert haben, müssen Sie ein neues WordPress-CMS auf der neuen Website installieren , die wir kürzlich konfiguriert haben. Achten Sie darauf, den Benutzernamen und das Passwort zu speichern. Sie konfigurieren. Nun, wenn du sehen willst, ob du sehen möchtest, wie du WordPress auf oder vielleicht auch Domain und Hosting einrichten kannst . Sie können verschiedene Kurse von anderen Skillshare-Kursen sehen . Es kann dir helfen, die Domain einzurichten und ein neues WordPress-CMS zu hosten und zu installieren. Und wenn Sie mit all dem fertig sind, müssen wir tiefer eintauchen und mit dem Aufbau unserer Landingpage beginnen. 3. Das WordPress-Theme einrichten: Jetzt, da wir die neue WordPress-Installation haben, müssen wir die Themes und Plugins einrichten. Also werden wir zunächst das Thema dafür einrichten. Du musst zu WordPress gehen, wie wir es gerade installiert haben. Das ist also ein WordPress, wie wir es gerade installiert haben. Und jetzt müssen wir dafür zum Dashboard gehen. Wir schreiben WP admin nach der URL neu und gelangen zum Dashboard. Übrigens, wenn Sie nicht angemeldet sind, müssen Sie sich auf Ihrer Website anmelden, bevor Sie in dieses Dashboard eintauchen können. Für die Installation wechselt das Team also zum Erscheinungsbild und dann zu den Themen. Wordpress enthält einige Installationen, einige Standardthemen , die vorinstalliert sind. Und wenn Sie es sind, wenn Sie WordPress mit einem beliebigen Hosting oder vielleicht einigen Softwareinstallationsprogrammen installiert haben , haben Sie auch einige Standard-WordPress-Themes. In diesem Fall habe ich also dieses Szenario-Team und jetzt gibt es verschiedene Dinge , die wir Elementor verwenden können. Ich glaube, das beste Team, um Elementor zu verwenden , ist Hello Elementor , weil es verschiedene Gründe gibt. Hello Elementary Outcomes ist größtenteils leer. Das Theme ist größtenteils leer und wir können es nur mit Elementor verwenden. Also gehe ich zu Aussehen und dann zu Themen und füge dann hier ein neues hinzu, um ein Theme zu installieren. Und auf der rechten Seite gebe ich Hello Elementor ein. Und hier installiere ich diese Szene. Das Beste an diesem Team ist dass es sehr leicht ist, wie ich bereits erwähnt habe. So werden das Plug-in, das elementare Plug-In und dieses Team zu einer perfekten Kombination. Da Sie das Theme im nächsten Video installiert haben, werden wir sehen, wie wir das Elementor-Plug-In installieren und loslegen können . 4. WordPress-Plugins einrichten: Bisher haben wir die Domain und das Hosting konfiguriert. Wir haben frisches WordPress installiert, wir haben das Theme konfiguriert. Jetzt ist es an der Zeit, das Elementor-Plug-In zu installieren. Und wie ich bereits erwähnt habe, warum wir Elementor verwenden. Es gibt verschiedene Gründe, Elementor zu verwenden . Erstens verfügt es über einen sehr schönen UX-Editor, sodass wir die Spalten und das Layout und all das problemlos verwalten können . Und die zweite Sache ist, es so schnell und einfach ist, Landingpages mit Elementor zu erstellen , da es sehr einfache, verschiedene Add-Ons enthält , die sie verwenden können , wie Abschnitte, Überschriften. dem Drag-and-Drop-Builder können wir ganz einfach Farben, Text, Schriftarten, Ränder und all das ändern . Es gibt also verschiedene Gründe. Die Verwendung von Elementor bietet viele Vorteile. So können wir das Peer-Lending Visa problemlos responsiv gestalten, aber es sind einfach genug reaktionsschnelle Tools. nun fort und installieren Sie das Elementor-Plug-In auf einer Website. Dafür müssen wir erneut zum Dashboard gehen. Und hier ist das Armaturenbrett. Und jetzt müssen wir dieses Mal zu Plugins gehen und du klickst hier auf Neu hinzufügen. Und auf der rechten Seite suchen Sie nach Element zwei. Das erste Ergebnis, das hier angezeigt wird, ist gelöscht. Der Website Builder wird das installieren. Und lass dich dieses Plugin holen. Und dies war ein einfacher Schritt um das Elementor-Plug-In hier zu installieren. Ich glaube, wir benötigen die Plug-ins nicht , um die Ausleihseite zu erstellen. Also bleiben wir einfach bei diesem einen Plug-In, aber vielleicht später, wenn wir andere Plug-ins benötigen. Das ist der Grund, warum wir das Plugin verwenden und wie benutzt man ein Plugin, oder? Jetzt werden wir weitermachen und im nächsten Video mit dem Aufbau unserer Landingpage beginnen. 5. Was ist Elementor und wie man sie verwendet?: Bevor wir also wirklich anfangen , eine Running Page zu erstellen, müssen wir zuerst sehen, wie wir unsere Limiter verwenden, damit wir sehen können, dass der Tipp kaputt geht und all das. Das wird uns leicht machen. Machen Sie es uns einfach, unsere Lernseite zu erstellen. Also lass uns anfangen. Schon wieder. Ich muss zur großen Bohrung gehen. Also hier ist das Dashboard. Und da sie das Hello Elementor-Thema und das Elementar-Plug-In installiert haben . So sieht das Dashboard danach aus. Lassen Sie uns also unsere Seite erstellen, unsere erste Seite eigentlich mit Elementor, um zu sehen, wie es funktioniert. Im Moment erstelle ich diese Seite. Denn danach erstellen wir unsere eigentliche Landingpage. Dies ist eine Testseite, um zu sehen, wie Elementor funktioniert. Veröffentlichen wir es in Publish. Und jetzt schauen wir uns unsere Seite an. Und so sieht die Seite auf dem Standarddesign von Hello Elementor und der Anwendungsseite auf Elementor aus. Um das zu bearbeiten, müssen wir erneut zum Dashboard gehen. Dafür. Lass uns zu WP Admin gehen , weil ich die Seite schließe. Und auch hier gehe ich zu Seiten und klicke hier auf die Schaltfläche Bearbeiten. Und hier müsste ich auf „Mit Elementor bearbeiten“ klicken weil der aktuelle Builder, Sie gerade sehen, Gutenberg heißt. In diesem Fall verwenden wir Elementor Page Builder, also klicken wir auf Mit Elementor bearbeiten. Wir können also tatsächlich eine Drag-and-Drop-Seite öffnen, auf der Mitarbeiter aus der Umgebung rekrutiert werden. So funktioniert und sieht Elementor Page Builder aus. Auf der linken Seite findest du verschiedene Add-Ons, mit denen du deine Lernseite aufbauen kannst. Hier sind ein paar davon, B6 und dann PRO, Emitter, Pro, Sie können sie auch verwenden. Und auf der rechten Seite haben Sie eine klare Sicht auf Ihre Seite. Und hier können Sie klicken, die Spalten und die Spalten hier bearbeiten, die Spalten und die Spalten hier bearbeiten indem Sie auf das Plus-Symbol klicken. Und hier kannst du, auf der linken Seite, Unbekannte haben. Sie können die Add-Ons einfach von hier auf die rechte Seite ziehen , um sie zu verwenden. Wenn Sie z. B. eine Überschrift verwenden müssen, haben Sie diese Überschrift hier. Ziehen Sie es einfach auf die rechte Seite und schon geht's los. Du kannst das einfach bearbeiten, sagen wir mal, oder unsere erste Überschrift. Und das ist es nicht. Sie können die Typografie komplett ändern. Sie können die Farben, die Größe und all das ändern . Dazu müssen Sie einfach diesen Style-Tab erstellen. Und Sie haben alle Optionen , die Sie hinzufügen müssen. Wissen Sie, Sie stellen z. B. die Textfarbe ein, Sie können Ihr Textelement nach Belieben ändern . Und Epigraphie, Sie haben verschiedene Möglichkeiten. Sie können jede Schriftart auswählen, die Sie haben möchten. Lassen wir uns also diese Wellenform , die wir nirgends außer ihm sehen , für ein paar Websites verwenden. Und hier können wir auch die Größe anpassen. Und wir haben unterschiedliche Gewichte. Du kannst einfach bleiben. Die Gewichte im Formular werden unterschiedliche Gewichte haben. Es wird das verändern, du kannst die Kühnheit und Leichtigkeit dieses Spaßes und der Transformation sehen . Sie können diesen Text einfach Groß- oder Kleinbuchstaben oder Großbuchstaben schreiben und all das. Sie können den Stil auch einfach ändern. Nehmen wir an, wenn Sie kursiv gewählt haben, können Sie das verwenden, müssen schräg, normal und all das machen . Sie können es einfach von hier aus tun. Und dann haben wir das Scheitern der Deklaration. Wir können einfach eine zugrunde liegende Überlinie, eine durchgehende Linie oder vielleicht keine hinzufügen . Dann haben wir die Zeilenhöhe, also wenn wir, du weißt schon, die Texte auf zwei verschiedenen Zeilen haben, können wir die Zeilenschläge von hier aus anpassen. So wie das hier. Die nächste Option, die wir haben, ist der Buchstabenabstand. Wir können die Feuerzeuge hier einfach einstellen. Und jetzt haben wir den Wortabstand, also können wir ihn einfach verwenden, lassen Sie uns ihn zurück zu den einzelnen Zeilen verschieben , damit Sie ihn richtig sehen können. Sie können hier sehen, wie der Abstand funktioniert. Das heißt, der Abstand funktioniert zwischen Wörtern und das funktioniert im Grunde mit Buchstaben bei mir. Das sind also alle Optionen , die Sie benötigen. Sie haben auch mehr Optionen. Sind die Texte wahr? Sie können Ihren Texten etwas Wasser hinzufügen. Ändere auch die Farbe. Und wir haben den Textschatten. Dann haben wir den Mischmodus. Das kannst du hinzufügen nennen. Sobald wir wissen, was es tut, können Sie es verwenden, aber vielleicht können wir das überspringen. Industrie wusste, dass dies die Überschrift war. Und wenn Sie ein Bild verwenden möchten, können Sie zu den Add-Ons zurückkehren , indem Sie auf diese 9-Node-Symbole klicken. Und mal sehen, wir müssen hier ein Bild verwenden. Und ich werde, ich klicke auf Neu ein Demo-Bild, das ich in die Mediathek hochgeladen habe. Von hier aus können Sie also die Bildgrößen anpassen. Wir können Medium oder irgendeinen beliebigen Miniaturansichten erstellen. Und dann haben wir hier Ausrichtungen des Bildes, z. B. wenn Sie ein kleines Bild sind, müssen wir sie links ausrichten. Du kannst das Center jetzt machen. Und dann haben wir auch die Möglichkeit, Bildunterschriften hinzuzufügen. Mal sehen, ob wir dem Bild Bildunterschriften hinzufügen müssen. kannst du auch tun. Und wir haben die Möglichkeit, Links hinzuzufügen. Wenn Sie möchten, dass das Bild anklickbar ist, können Sie diese Links verwenden, um das Bild anklickbar zu machen , möglicherweise zu einem anderen Link oder einer internen Seite der Website. Und das ist es nicht. Sie können das Bild auch mit verschiedenen Optionen anpassen. Wir haben das Attribut hier, wenn wir z. B. eine angegebene Breite für das Bild benötigen , können wir das tun. Die nächste Breite, die Höhe. Sie können es nach Belieben anpassen. Und dann passte das Objekt, z. B. sehen Sie gerade, dass sich die Bilder dehnen, weil wir die Höhe angepasst haben. Wir wollen, dass sich das Bild nicht dehnt. Wir können es abdecken, eindämmen oder wir brauchen es, um es zu dehnen. Wir können wieder alles machen, oder? Also hier ist die Opazität des Bildes. CSS-Filter. Auch dies ist eine fortgeschrittene Sache, die wir vielleicht in einem späteren Kurs in Betracht ziehen können. Und dann gibt es mit dem Border Tribe Solid Double die verschiedenen Grenzen, mit denen man definitiv spielen kann. Und dann ist das ein Box-Shadow. Wenn du den Schatten auf der Rückseite dieses Videos haben willst , tut mir leid, Bild. kannst du auch tun. Also ja, das war ein Bild wie dieses. Sie können jedes gewünschte Element hinzufügen. Es gibt verschiedene Elemente wie Video-Schaltflächen, einen Abstandshalter, einen Teiler hier, Google Maps, Symbole und all das. Sehen wir uns hier auch an, wie das Video funktioniert. Und Sie können sehen, dass die Standardjahre bereits platziert wurden. Sie können einfach Ihren YouTube-Videolink hier einfügen, oder vielleicht einen Videolink , den Sie einbetten möchten , und das Video wird automatisch eingebettet. Sie werden sehen, wie einfach es ist, Elementor zu verwenden , um die Seiten zu erstellen. Und du wirst dir vielleicht vorstellen, wie wir mit NEIN helfen können , wie schnell und einfach wir unsere Lernseite mit Elementor erstellen können. Im nächsten Video werden wir also genau herausfinden, werden wir also genau herausfinden, wie wir damit spannende Landingpages erstellen können . Wir sehen uns im nächsten Video. 6. Eine neue SEITE erstellen: Jetzt müssen wir eine Seite für unsere Lernseite lesen , auf der wir die Abschnitte und all das aufbauen werden. Dafür gehen wir zu den Seiten hier und fügen eine neue Seite hinzu. Sie werden eine Landingpage für ein neues Modell, ein neues Automodell, erstellen. Also werden wir die Dinge entsprechend planen. Also dafür werde ich hier ABC schreiben. In Ordnung, also klicke auf Mit Elementor bearbeiten. Die Seite wird im Elementor-Editor geöffnet. Zuallererst werden Sie das Layout bereinigen, indem all diese zusätzlichen Dinge entfernen. Dazu gehen wir zu den Einstellungen unten rechts. Und wir werden zu den Einstellungen auf der linken unteren Seite gehen. Und wir wählen das Elementor Canvas-Seitenlayout. Sobald wir Elementor Canvas aktiviert haben, werden Sie feststellen, dass alle zusätzlichen Dinge entfernt wurden. 7. Den HEADER und FOOTER entwickeln: Also werden wir jetzt mit dem Aufbau unserer Landingpage beginnen. Zunächst fügen wir unsere Kopf- und Fußzeile hinzu. Anfänglich. Die Kopfzeile, die wir benötigen, ist eine zweispaltige Überschrift. Auf der linken Seite fügen wir ein Logo hinzu und auf der rechten Seite fügen wir einige soziale Symbole hinzu. Klicken Sie also auf dieses Plussymbol und fügen Sie ein zweispaltiges Layout hinzu. der ersten Spalte füge ich hier das Bildelement hinzu, damit ich das Logo hinzufügen kann. Ich habe einige Bilder ausgewählt, um sie auf dieser Landingpage zu verwenden. Also schnapp sie dir alle hier. Wählen Sie dieses Bild für das Logo aus. Wie Sie sehen, wirkt es sehr groß. Wir werden einige Anpassungen vornehmen. Hier. Du gehst. Dieses Mal. Wir gehen zum Tab Styles und du fügst etwas Höhe hinzu. Und wie Sie sehen können, dehnt sich das Bild aus. Wir wählen Object Fit als Cover aus. Wir fügen etwas maximale Breite hinzu und verringern die Höhe, die verschoben wurde. Und jetzt müssen wir dieses Bild auf der linken Seite ausrichten. Also kehren wir zum Inhalts-Tab zurück und wählen diese linke Ausrichtung aus. Von hier aus sehen Sie, dass das Logo nach links ausgerichtet wurde. Und auf der rechten Seite werden einige soziale Symbole hinzugefügt. Hier findest du das Element für die sozialen Icons. Schnapp dir dieses Element hier. Und standardmäßig werden diese drei Icons auch auf Instagram angezeigt. Damit Instagram auch hier hinzugefügt wird. Jetzt müssen wir auch das soziale Symbol auf der rechten Seite ausrichten. Dafür wählen wir das hier aus. Wir müssen das Logo und die sozialen Symbole vertikal zentriert ausrichten . Dazu gehen wir rein und wählen diesen Abschnitt von hier aus im Navigator aus. Und hier auf der linken Seite finden Sie Vertical. Option „Vertikale Ausrichtung“. Gehen Sie einfach rein und wählen Sie Mitte, und Sie werden sehen, dass der Header richtig ausgerichtet ist. Fügen wir dem Header einen hellen Hintergrund hinzu. Dazu müssen wir den Style-Tab auswählen. Und hier wählen wir einen hellen Hintergrund, weiß, sodass der Hintergrund auch hier gilt. Wie Sie sehen können, ist ein schöner Header fertig. Wir werden reingehen und hier eine einfache Fußzeile hinzufügen. Dafür. Dafür brauchen wir auch. Auch hier müssen Sie auf dieses Plus-Symbol klicken. Und zunächst brauchen wir, glaube ich, eine einspaltige Fußzeile. Also wähle hier diese eine Spalte aus. Und ich werde ein Bild ergänzen. Nochmals, um das Logo für den Fußzeilenbereich hinzuzufügen. Noch einmal dieses Logo und passe es mit dem Style-Tab an. Das Hoch nutzen. Ja, ich glaube, das ist gut. Und danach waren alle auf dem Weg hierher. Sagt Writers. Die Überschrift zentrieren Sie hier. Und wir wählen eine Schriftart für. Sie wählen eine Schriftart für alle Ausleihseiten aus. Also werde ich hier aufhören, die richtige Schriftart auszuwählen und die Farbe auf Schwarz zu ändern. Den Text in Großbuchstaben schreiben und verkleinern. Den Inhalt ändern , um 2022 zu sehen. Stimmt das? Jetzt füge ich hier die Copyright-Zeile hinzu. Durch Hinzufügen der Texteditor-Elemente. Hier schreibe ich die Copyright-Zeile, richtig, 2022. Alle Rechte vorbehalten. Später. Ich füge hier nur eine generische Linie hinzu und richte auch diese Mitte aus. Und die Schrift wieder in Poppins ändern. Stimmt das? Unsere Fußzeile ist also auch fertig. 8. Den Bereich HELDEN/BANNER gestalten: Jetzt, da wir unser Foto fertig haben, fangen Sie an, die mittleren Abschnitte für unsere Lernseite hinzuzufügen. Dazu füge ich eine weitere Sitzung hinzu, indem ich hier auf dieses Plus-Symbol klicke. Und da wir das Banner hier hinzufügen werden, wählen Sie ein einspaltiges Layout aus. Und wir werden dies verschieben, indem wir auf dieses Symbol klicken. Und wir werden es an die Spitze der Firma stellen , denn für Kredite wird der letzte Abschnitt der Website sein. Und jetzt geh rein und klicke auf diesen Abschnitt. Und auf der linken Seite sehen Sie die Optionen für die Erkennung. Und wir gehen rein und wählen den Style-Tab, um das Hintergrundbild besser hinzuzufügen. Und dafür gehe ich rein und wähle dieses klassische Symbol aus und lade hier ein Bild Ich wähle eines der Bilder aus, eines der wenigen Bilder , die zuvor hochgeladen wurden. Also werde ich diesen auswählen. Bestimmte Medien und wir werden sehen, dass das Bild hochgeladen wurde. Um einige Konfigurationen vorzunehmen. Ich werde die Größe dieses Bildes ändern, um es zu verdecken. Und wir stellen das so ein, dass die Position mittig, mittig ist. Und wir geben eine Mindesthöhe, diesem Abschnitt eine Mindesthöhe, indem wir auf diese Layout-Registerkarte klicken. Du siehst diesen Abschnitt mit der Körpergröße hier, wir wählen die Mindestgröße und wir fügen vielleicht die siebte Klasse hinzu, oder? Also haben wir hier einen schönen Abschnitt, einen schönen Hintergrund für unser Banner. Hier. Sie sehen, dass diese Kolumne hier erscheint. Wir brauchen eine Spalte auf der rechten Seite. Dazu gehen wir rein, wählen die Spalte aus und klicken auf Duplizieren. Es wird eine weitere Spalte generiert, die wir anpassen können. Menü näher an der Mitte liegt, werden Sie sehen, dass sich das Symbol ändert, der Mauszeiger wird geändert und wir können einem Klick darauf klicken und es um zwei Kanten nach rechts ziehen. Wählen Sie die rechte Spalte zu 40% aus. Jetzt werden wir hier anfangen, Elemente hinzuzufügen. Also würde ich reingehen und eine Überschrift auswählen. Und der Name der Überschrift wird „ Neues Auto auf den Markt gebracht“ sein , oder? Ändern Sie das Design dieser Überschrift. Ich hatte übrigens die Poppins-Schrift und die schwarze Farbe für die Überschriften ausgewählt die Poppins-Schrift und , oder? Also gehe ich rein und klicke auf die Topographie und wir ändern die Größe dieser Schrift. Wird vielleicht auch den Weg auf 900 erhöhen. Und wir ändern die Texttransformation in Großbuchstaben. Eine Größe klein. Und Sie sehen, ein netter Titel erscheint. Jetzt. Ich gehe rein und füge das Texteditor-Element hinzu, um hier ein paar Texte hinzuzufügen. Lassen Sie uns diesen Platzhaltertext vorerst verwenden. Weil du weißt, dass du es später ändern kannst. Ich werde es einfach für dich aufbauen. Also werde ich stylen und die Textfarbe ändern, um „Gefällt mir“ zu schreiben. Ähm, ich werde auch die Größe dieser Schrift auf vielleicht 18 ändern. Und jetzt füge ich einen Button hinzu. Es gibt einen Aufruf zum Handeln, oder? Also werde ich hier ein Button-Element hinzufügen und klicken. Erfahre mehr. Ändern Sie die Größe auf mittel. Und wenn Sie zum Style-Tab wechseln, wird sich die Typografie ein wenig ändern. Machen Sie es in Großbuchstaben. Ein bisschen mutig. Nicht dass sie hundert verdient hätten. Ja, es sieht gut aus. Und ich werde vielleicht den Grenzradius entfernen. Ich glaube, es zeigt einen kleinen Randradius. Also wenn n Null ist. Und jetzt können Sie sehen , dass ein netter Abschnitt entworfen wurde , um zu versuchen , das Hintergrundbild für diesen Abschnitt anzupassen Vielleicht versuchen wir es mit der Mitte links, oder Mitte rechts macht keinen Unterschied. Also mach es nicht in die Mitte, zentriere es wieder. Vielleicht werde ich die Schriftgröße verringern, diese Überschrift. Und das werden wir auch in der Spalte ändern. Weil es mit dem Auto in Berührung kommt, weißt du, sieht nicht gut aus. Es sieht jetzt gut aus. Also unsere Banner-Sektion ist auch hier fertig. 9. Den REST der SEITE LANDING gestalten: Wir werden reingehen und einen neuen Abschnitt hinzufügen. Klicken Sie erneut auf das Plus-Symbol. Und jetzt brauchen wir einen Abschnitt, es wird zwei Spalten geben. also das zweispaltige Layout hier nehmen , brechen wir wieder in den oberen Bereich ein. Und jetzt haben wir unsere Sektion hier. Ich werde auswählen, ich werde ein Bild auf der linken Seite dieser Spalte hinzufügen. Wählen Sie eine der wenigen Minuten aus, die ich zuvor hochgeladen habe. Lassen Sie uns diesen auswählen. Und jetzt haben wir unser Bild hier. Wir fügen eine neue Überschrift hinzu. Lass uns ungefähr tippen. Vielleicht belassen Sie es. Und wieder, formatieren Sie die Überschriften auf 700. Die Seite muss so sein, wie sie ist. Mach es in Großbuchstaben, oder? Benennen wir es in about PBC um. Stimmt das? Ich werde hier noch ein Element hinzufügen, den Texteditor, um einige Texte hinzuzufügen. Lass uns von hier weggehen. Und wir werden ein weiteres Element für die Schaltfläche hinzufügen. Lass uns vielleicht den Button duplizieren, den wir für das Banner verwenden. Dazu müssen Sie mit der rechten Maustaste auf die Schaltfläche klicken und Ende dieser Sitzung auf Duplizieren und unformatiert kopieren klicken. Jetzt müssen wir den Inhalt dieses Abschnitts vertikal ausrichten. Dazu klicken wir auf die Spalteneinstellungen, indem hier auf diese sechs Symbole klicken, Fixture Eigen hier. Und wir werden es in die Mitte schaffen, wie wir es mit dem Header gemacht haben. Jetzt kannst du sehen, dass es gut aussieht. Wir werden eine Polsterung hinzufügen. Wir werden oben und unten in diesem Abschnitt etwas Polsterung hinzufügen . Auch dafür gehen wir zum Tab Style. Und zwei, tut mir leid, Edwin Step. Und wir fügen hier etwas Polsterung hinzu, vielleicht 50. Lassen Sie uns die Verknüpfung aufheben, da je nach linker Seite auch die rechte und linke Seite des Gemäldes hinzugefügt wird. Vielleicht erhöhen Sie es von oben auf 70 und von unten, rechts. Jetzt können Sie sehen, dass ein netter Abschnitt entworfen wurde. Ich werde diesen Abschnitt einfach duplizieren, weil wir manchmal zusätzliche Entsprechungen haben , die wir auf der Landingpage anzeigen können. Also diesen Abschnitt hier duplizieren und umkehren. Jetzt befindet sich das Bild auf der rechten Seite und die Beschreibung auf der rechten Seite. Lass uns das Bild ändern. Ich benutze diesen, vielleicht diesen vorerst. Nennen wir es einfach Design. Und doch ist dieser Abschnitt auch hier. Und lassen Sie uns diesem Abschnitt etwas Hintergrundwissen hinzufügen diesem Abschnitt etwas Hintergrundwissen , um ihn ein bisschen vom Tuckman zu unterscheiden. Dafür gehe ich zu diesem Typedef. Ich denke, tut mir leid, wenn nicht das Bild aber zum Ausmalen, damit es einen hellen Hintergrund bekommt. Vielleicht. Das sieht gut aus. Und jetzt da wir die beiden Abschnitte für die Informationen haben, lassen Sie uns einen weiteren Abschnitt erstellen in dem wir einige Merkmale für das Auto oder vielleicht jedes Produkt hinzufügen werden , das jemand hinzufügen wird. Also nochmal, fügen Sie einen weiteren Abschnitt hinzu, und hier im einspaltigen Abschnitt, ziehen Sie ihn in die Fußzeile und fügen Sie hier eine Überschrift hinzu. Lass uns tippen. Geben wir Vorteile ein. In Ordnung. die Texte zentralisieren, die Sie die Texte zentralisieren, die in diesen Text aufgenommen werden, wird der Stil-Tab geöffnet, diese Farbe. Und dieses Mal klicke ich von hier aus auf dieses Symbol und wähle die Akzentfarbe aus. Wir ändern die Textfarbe in Weiß. Wir werden etwas Polsterung hinzufügen. Wieder auf LinkedIn, das kommt von oben. Von unten. Und darunter werde ich einen weiteren Abschnitt hinzufügen. Und wir werden diese Farbe duplizieren, damit sie twittert und der Tweet-Globus erscheint. Und hier füge ich hinzu, indem ich auf dieses Symbol klicke, füge ich hier eine Überschrift hinzu, Manuskript eine. Und der dritte. Lassen Sie uns das Design noch einmal ändern und die Sechs weiß machen. Typografie muss in Großbuchstaben geschrieben werden. Schriftgrößen sollten hier etwas klein sein. Und die Schriftstärke muss sicher sein, oder? Ein weiteres Element für den Texteditor hinzufügen. Und dieses Mal ändere auch die Textfarbe in Weiß. Und wird großartig. Das duplizieren. Duplizieren Sie es und ziehen Sie es auf die rechte Seite. Gleiche gilt für diese Geneinheiten , von denen Nummer zwei, Nummer drei profitiert. Und wir haben hier eine Sitzung. Lassen Sie uns am Anfang dieser drei Spalten etwas Polsterung hinzufügen. Auch hier kannst du die Stummschaltung aufheben, denn Einstellung hängt von rechts ab, auch das. Aus Baltimore mit der Anzeige. Also jetzt ist auch diese Sitzung fertig. Gehen Sie rein und duplizieren Sie diesen Abschnitt erneut. Um den letzten Informationsblock hinzuzufügen. Hier werde ich vielleicht Informationen zu hydratisierten Anrufen schreiben . Unten wird es angezeigt, weil es sich um eine Platzhalterinformation handelt, oder? Nach der Verabreichung fiel mir auf, dass die Fußzeile auch mit dem oberen Bereich übereinstimmt. Wir ändern also die Hintergrundfarbe der Fußzeile und passen sie an die Hintergrundfarbe der Kopfzeile an. Also werden wir reingehen und sehen, was Macron ist. F9, F9, F9. Und hier werde ich auch die Farbe dieses Fotos ändern , um etwas Polsterung hinzuzufügen. Verknüpfung aufheben, ist es fast fertig. Schauen wir uns nun an, wie unsere neue Seite aussieht. Ich habe diesen Patienten geöffnet, Anita, und lass uns sehen, wie er aussieht. Wir haben eine schöne Landingpage fertiggestellt. Und dann haben wir besprochen , dass der gesamte Inhalt dieser Seite einfach hinzugefügt werden kann. Dafür kannst du einfach wieder zum Editor gehen. Und während Sie die Seite erstellen, können Sie sie einfach anklicken, sie zu einem beliebigen Inhaltsblog hinzufügen, und Sie können alles auf dieser Seite bearbeiten , ohne Programmierkenntnisse zu haben. Du bist bei Ben. Ja. Machen wir es mutig. Icon hier und klicken Sie auf Aktualisieren. Und jetzt aktualisiere ich diese Seite erneut, um zu sehen, wie sie aussieht. Und ja, das wurde zu ihm gemacht. So erstellt man also EINE Seite. Und im nächsten Video besprechen wir, wie du ein paar coole und nette Landinvasion von Studenten hinzufügen kannst . 10. ANIMATIONEN auf der ANGELEITETEN SEITE: Hallo, in diesem Video werden wir sehen, wie wir dieser Website, der Landingpage, einige coole und nette Animationen hinzufügen können dieser Website, der Landingpage, einige coole und nette Animationen . Dafür gehen wir also wieder zum Elementor. Hier haben wir unseren Editor geöffnet. Mal sehen, wir müssen dem, dem Header, eine Animation hinzufügen . Dazu gehen wir zur Spalte, indem wir hier auf dieses Spaltensymbol klicken. Und auf der Registerkarte „Erweitert“ haben Sie hier einen Tab für Bewegungseffekte, mit denen Sie Ihr Leben auswählen und füllen können. Vielleicht, weil ich hier einfache Animationen hinzufügen werde. Und wir machen vier. Rechte Seite. Hier sehen Sie, dass das Klicken auf das Spaltensymbol etwas schwierig ist , da es sich hinter den drei Optionen versteckt. Also hat Elementor den Navigator für uns erstellt. Lass uns den Navigator öffnen. Und hier haben wir einen einfachen Algorithmus, mit dem wir damit Spalten hinzufügen können. Die erste Sitzung war also diese. Lassen Sie uns die zweite Spalte dieses Abschnitts lesen und wir öffnen die Einstellungen, damit wir das noch einmal tun können, und die Bewegungseffekte. Und wir werden Freiheit hinzufügen, oder? Gleiche machen wir mit diesem Abschnitt hier, indem wir auf das Spaltensymbol klicken, erweiterte Effekte und Bewegungseffekte. Und dann füge ich hier vielleicht Fade In hinzu. In Anbetracht dessen, dass das so sein wird, machen Sie das bis zum Ende weiter. Sie können auch einige andere Animationen entsprechend Ihren Blitzen hinzufügen , aber gleich herum. Aber ich mag die einfachen Animationen hier. Also füge ich diese zu Land hinzu und gehe. Und wieder, richtig. Das Gleiche gilt für dieses Phenyl, links und rechts. Und hier füge ich vielleicht eine andere Animation hinzu. Nehmen wir an, dies sind dreispaltige Abschnitte. Ich füge hinzu, passe vielleicht rein. Ja, es sieht gut aus. Einblenden. Auf Friedhöfen. Wir sind links und rechts. Und zuletzt die Fußzeile. Lass uns vielleicht Fade In und besser hinzufügen. Es gibt viele, viele Animationen. Lass uns ein paar andere ausprobieren. Sie können diese vielleicht ausprobieren und versuchen, Ihre Projekte im folgenden Abschnitt hochzuladen. Ich freue mich, sie zu sehen. Und andere Leute, die auch auf Ihre Projekte reagieren. Es wird sein, es wird eine tolle Sache sein, es zu üben. Probiere verschiedene Animationen aus und finde heraus, wie du weißt, welche dir gefällt. Ich bleibe hier bei meiner Misserfolg-Animation. Ordnung, also aktualisiere ich diesen pH-Wert, nachdem ich alle Animationen hier hinzugefügt habe. Und wir werden reingehen und unsere Website erneut testen. Und Sie werden sehen, wie die Animation hier beginnt. Mit diesen einfachen Animationen. Die Seite sieht etwas netter und cooler aus. Und es wird anfangen , die Kunden anzulocken und all das. Es gibt also viele verschiedene Vorteile von Animationen. Du kannst es ausprobieren, du kannst es ausprobieren und sehen, wie es für dich funktioniert. 11. Was du jetzt machst?: Da wir unsere Website oder Landingpage fertiggestellt haben. Jetzt bist du dran Lass uns ein paar tolle Landing Pages erstellen und vielleicht Screenshots eines Projekts auf der Registerkarte Projekte unten posten . Und ich freue mich, sie zu sehen, und wir geben gerne entsprechendes Feedback. Sie können also damit beginnen, auf Ihre WordPress-Website zu warten, vielleicht auf einem lokalen Host oder vielleicht, wenn Sie einen Live-Server haben, können Sie eine Sitzwebsite oder vielleicht eine temporäre Subdomain erstellen . kannst du machen. Die Haare. Du kannst das dort tun und das WordPress-Team installieren. Das Team, das für dieses Pferd verwendet wurde, war Hello Elementor. Das Plug-In, das wir verwendet haben, war Elementor. So kannst du das Theme und das Plugin installieren und anfangen, die Ausleihseite zu twittern. Wie du weißt. Du kannst auch versuchen, einige Farben zu ändern , die Bilder zu ändern, Animationen zu verketten und zu versuchen, etwas anderes zu bauen, richtig, um zu üben, dass sich Dinge bewegen. Also danke, dass du dir diesen Kurs angesehen hast. Ich freue mich auf die Projekte, die Sie posten werden. Sie stellen auch sicher, dass Sie meinem Skillshare-Profil folgen meinem Skillshare-Profil detailliertere Videos zu posten, Wordpress. Vergessen Sie also nicht, dem Skillshare-Profil zu folgen. Du erhältst alle Updates, über die ich in diesem Profil berichtet habe. Ich danke dir. Passt auf euch auf. Tschüss.