Erstellen einer Online mit Elementor - Neue Elementor für Anfänger:innen

1. KURSEINFÜHRUNG: Das stimmt. Treten Sie mir jetzt bei. Mein Name ist Ken und ich benutze Elementor seit fünf Jahren. Ich habe Elementor im Jahr 2019 entdeckt , als ich eine Website für mein Online-Geschäft brauchte. Ich hatte eine Online-Geschäftsidee, wusste aber nicht, wie ich eine Website erstellen sollte. Und davor hatte ich noch nie eine Website erstellt. Aber als ich entdeckte , dass es einen kostenlosen Drag & Drop Builder namens Elementor gibt. Es war ein Game Changer für mich. Lange Geschichte kurz. Endlich habe ich die Website erstellt, indem grundlegende Online-Tutorials angeschaut habe. Und seitdem hat sich das, was als Notwendigkeit begann , Geld zu sparen, indem ich meine eigenen Websites erstellen konnte , für mich zu einer einkommensgenerierenden Fähigkeit geworden . Ich baue nicht mehr nur eine Website für mich selbst mit den Fähigkeiten, die ich erworben habe, sondern auch für andere Menschen. Bisher habe ich Dutzende von Websites für mehrere Kunden erstellt. Und ich mache dies als freiberuflicher Gig und nachdem meine Fähigkeiten mit jedem neuen Projekt im Laufe der Jahre verfeinert habe, habe ich heutzutage elementare Vorlagen auf einem digitalen Marktplatz namens Creative Market entworfen und verkauft elementare Vorlagen auf . Sie haben wahrscheinlich in dieser Klasse davon gehört. Ich möchte Ihnen helfen zu verstehen, wie Sie mit Elementor schöne Webseiten von Grund auf neu erstellen können. Elementor ist kostenlos und ich glaube, dass es viele Leute wie Sie gibt , die lernen möchten, wie man es wie ein Profi benutzt. Indem Sie also Elementor lernen, haben Sie jetzt eine Fähigkeit, die auf verschiedene Arten neues Einkommen erzielen kann . Sie können beispielsweise elementare Vorlagen, Online-Marktplätze wie Creative Market, Envato-Marktplatz entwerfen und verkaufen Online-Marktplätze wie Creative Market, oder sogar Ihre eigene Website erstellen, über die Sie verkaufen können Element von Vorlagen. Sie können Websites für Kunden entwerfen und für Ihre Arbeit bezahlt werden. Wenn du es liebst, solche Konzepte zu lehren, kannst du anfangen, elementar zu unterrichten. Genau wie ich kann passives Einkommen aus Ihren Online-Kursen erzielen. Und Sie können so viele neue Online-Unternehmen betreiben wie Sie möchten, ohne die Einschränkungen, die durch den Mangel an Geld auferlegt werden, um einen Webdesigner jedes Mal zu bezahlen , wenn Sie eine neue Idee für ein Online-Geschäft haben. Ich habe diesen Kurs für Anfänger entworfen. Wenn Sie also noch nie elementar benutzt haben, werden Sie die Lektionen in dieser Klasse sehr einfach zu befolgen und zu verstehen finden . Wir beginnen von Anfang an. So installiert man elementor. Bis zum Ende haben wir eine vollständige Webseite erstellt , die als Teil einer voll funktionsfähigen Website verwendet werden kann . Am Ende dieses Kurses haben Sie nicht nur eine voll funktionsfähige Webseite mit Elementor von Grund auf neu erstellt, Sie haben auch die Fähigkeiten erworben, die erforderlich sind, um die zukünftigen Webseiten zu erstellen und Landing Pages und sogar Websites in der Zukunft. Begleite mich jetzt in der Klasse und lass uns in Lektion eins treffen. 2. Erste Schritte: Also nochmal willkommen. Jetzt, wenn wir uns auf den Anfang vorbereiten, möchte ich nur, dass wir noch einmal einen schnellen Überblick über die Zielseite haben einmal einen schnellen Überblick über die Zielseite , um die verschiedenen Teile zu sehen, die wir erstellen werden , und dann werden wir loslegen. Ganz oben haben wir also den Header, das Logo und die Navigationsleiste hält. Dann haben wir den Heldenbereich, der normalerweise ein schönes Bild hat , das darstellt, worum es auf der Seite geht. Und wie Sie sehen können, haben wir diese Dame an einem Online-Kurs teilgenommen, und dann haben wir ein H1 , das zusammenfasst, worum es auf der Seite geht. Und jede Landingpage muss nur ein h ein Element haben. Wir haben H1 bis H6, die verschiedene Überschriftenstufen sind. Wie gesagt, muss jede Landingpage ein H1-Element haben, aber sie kann mehrere H2-Elemente, mehrere h3-Elemente, mehrere h4-Elemente und weiter haben . Und Sie werden sehen, dass wir mehrere H zwei Elemente haben werden , h drei Elemente. Wenn es sich bei dieser Landingpage um ein Buch handelt, dann ist der H1 oben der Buchtitel. Ein Buch kann nicht mehr als einen Titel haben, aber es kann mehrere Themen und Unterthemen in Kapiteln enthalten. Darum geht es also. Suchmaschinen wissen auch gerne, worum es bei einer Seite geht, und deshalb schauen sich Suchmaschinen die H1 auf jeder Zielseite an, um zu wissen, wie sie indiziert werden können. Lassen Sie mich die Seite aktualisieren weil ich sie erstellt habe, um sie beim Scrollen zu animieren, aber nur einmal, wenn Sie die Seite laden. Da ich die Seite bereits geladen habe, kann man die Animation sehen. Also werde ich die Seite aktualisieren. Und jetzt werden Sie sehen, dass dies gut und reibungslos verblasst. Die Helden-Sektion sieht einfach so filmisch aus. Und dann gleitet sich der Scale-Up-Bereich so hinein, was meiner Meinung nach ein cooler Effekt ist. Dann gleitet der Abschnitt sowohl darin ein, als auch er verblasst. Dann lassen wir diesen Zählerabschnitt von oben nach unten hineingleiten. Dies hat bereits animiert. Wie Sie sehen können, haben wir diese Animationen und sie verleihen dem Benutzer wirklich eine gute Stimmung in einer schönen Benutzererfahrung. Sie verlieben sich einfach in eine Website. Dann haben wir die Testimonials. Dies wird automatisch animiert. Wir müssen nichts tun. Es schleift diese Animation immer wieder auf die Testimonials, um die Aufmerksamkeit des Benutzers auf sich zu ziehen, damit er lesen kann , was die Testimonials sagen. Schließlich haben wir das Anmeldeformular, das von unten erscheint, um die Leute darüber zu informieren , dass sie sich anmelden können, um kostenlose Kurse zu erhalten. Dies ist ein netter Call-to-Action-Bereich. Und dann haben wir den Ordner. Das ist im Grunde die Website. Das heißt, das ist im Grunde die Zielseite, die wir erstellen. Und ohne mehr Zeit zu verschwenden, lasst uns damit beginnen , den Header zu erstellen. Wir sehen uns also in der nächsten Lektion. 3. Installiere Astra Theme: Willkommen zurück. Jetzt sind wir bereit, mit dem Erstellen der Seite zu beginnen. Und der erste Teil, den wir erstellen, ist der Header. Aber bevor wir das tun, installieren wir unser Theme und dann unsere Plugins. Wie Sie sehen können, ist dies eine brandneue Installation von WordPress. Wir sind bei Version 6. Möglicherweise verwenden Sie eine neuere Version, aber der Prozess, den wir gerade anwenden , wird weiterhin relevant sein. Wenn wir also in die Erscheinungsthemen eingehen, können wir Astro standardmäßig installieren , da wir uns im Jahr 2022 befinden. Das aktive Thema ist 2022. Letztes Jahr war es 2021 und im Jahr davor war es 2020. Aber wir wollen weitermachen und „Neu hinzufügen“ sagen. Und wir werden in das WordPress-Themes-Repository oder Themes-Verzeichnis weitergeleitet. Und es gibt buchstäblich Tausende von Themen, die wir hier verwenden können. Aber der, an dem wir interessiert sind, ist Astra. Also sollte es genau hier sein. Aber Sie können auch Astra eingeben, um sicher zu sein. Und beachte, dass es Astral gibt und Astra die beiden nicht verwirren. Astra hat das installiert. Okay, lass uns weitermachen und aktivieren. Und wir sind fertig. Wie Sie sehen können, ist das aktive Thema Astra. Wie Sie hier oben sehen können. Danke für die Installation von Astra. Und sie sagen uns nur, dass Astro Dutzende von gebrauchsfertigen Startervorlagen enthält. Und tatsächlich hatte ich bereits im Unterricht veröffentlicht, in dem ich Ihnen beibringe, wie Sie die Startervorlagen verwenden , um voll funktionsfähige Websites zu erstellen. Wenn du es noch nicht gesehen hast, öffne mein Profil. Du siehst es genau dort. Ich bringe Ihnen bei, wie Sie einen Kosmetikladen mit diesen gebrauchsfertigen Startervorlagen entwerfen einen Kosmetikladen mit . Aber ich mache weiter und schließe das. Und so installiert man im Grunde ein WordPress-Theme. Astra ist heute eines der beliebtesten WordPress-Themes und seit mehreren Jahren. Wenn Sie mehr erfahren möchten, empfehle ich Ihnen, mit Google Astra Theme Review fortzufahren. Nur damit Sie sehen können, warum es eines der beliebtesten und besten WordPress-Themes auf dem Markt ist. Nachdem wir unser Theme installiert und aktiviert haben, möchten wir als Nächstes unsere Plugins installieren und aktivieren. Lass uns das in der nächsten Lektion machen. Wir sehen uns in Kürze. 4. Elementor Plugin installieren: Und willkommen zurück. Jetzt, da wir Astra installiert haben, ist es an der Zeit, elementor zu installieren. Und die anderen beiden Plugins, die wir verwenden werden , um unseren Header zu erstellen. Und du wirst sehen, warum wir diese beiden Plugins brauchen. Geht direkt in Plugins. Ich kann auf Neu hinzufügen klicken, aber ich möchte, dass wir zuerst zur Liste aller Plugins gehen , die wir bereits installiert haben. Und hier sind wir. Was ich tun möchte, ist Add New zu sagen und wird in das Plugins-Repository oder das Plugins-Verzeichnis weitergeleitet . Und wir können weitermachen und nach Elementor suchen. Und es sollte das erste Ergebnis sein. Sobald Sie danach gesucht haben, ist es von Elementor.com und verfügt zum Zeitpunkt der Aufzeichnung über 5 Millionen aktive Installationen 5 Millionen aktive Installationen. Installiere es jetzt. während der Installation, Beachten Sie während der Installation, dass es hier andere Plug-Ins gibt, die den Namen Elementor enthalten. Dies sind im Grunde Plugins, die als Erweiterungen erstellt wurden oder Erweiterungen für das Elementor-Plug-In bereitstellen. Elementor bietet also spezifische Funktionen und Einstellungen und wo es Mängel aufweist. Diese Plugins fügen diese Funktionen zu Elementor hinzu und ich zeige Ihnen, wie sie das machen. Diese Plugins bieten auch kostenlose Funktionen, die möglicherweise nur in der Pro-Version oder Premium-Version von Elementor verfügbar sind . Bevor wir Elementor aktivieren, installieren wir Elemente kids, elementar Add-Ons, die eine der Erweiterungen sind, die wir benötigen damit Elementor unseren Header erstellen kann . Und wir wollen auch, dass unser Header klebrig ist. Also lasst uns gehen und klebrige Header-Effekte für Elementor installieren . Während es installiert wird. Lassen Sie mich einfach schnell auf diese Referenzseite springen , um Ihnen zu zeigen, was ich mit sticky meine. Wenn ich also anfange zu scrollen, beachte, dass der Header hier oben oben oben bleibt. Es scrollt nicht die obersten Wörter mit dem Rest des Heldenabschnitts und der Seite. Der Heldenbereich geht also nach oben und verschwindet, aber die Seite bleibt ganz oben. Das meinen wir also mit sticky Header. Die Tatsache, dass es oben bleibt und es dem Benutzer ermöglicht, unabhängig davon, in welchem Teil der Seite, seinem eigenen, navigieren zu können . Gehen Sie also zurück zu unserer Liste der Plug-Ins, jetzt ist es installiert. Alles, was wir tun müssen, ist sie zu aktivieren. Lasst uns Plugins installieren. Wir werden sie eins nach dem anderen aktivieren. Und fangen wir mit Elementor an, denn in letzter Zeit seit dem letzten Update des Plugins haben wir jetzt einen Setup-Assistenten , mit dem wir mehrere Schritte ausführen müssen , um die grundlegenden Teile einer Website einzurichten. Also hier sind wir. Dies ist der Setup-Assistent, den ich gerade erwähnt habe. Es hat mehrere Schritte hier. Der erste Schritt besteht darin, ein Konto bei der Elementar-Website zu erstellen der Elementar-Website um einige dieser Vorteile nutzen zu können. Wir müssen jedoch kein Konto erstellen, um das Plugin verwenden zu können. Also gehe ich einfach weiter und überspringe diesen Schritt. Der zweite Schritt besteht darin, das Hello Thema auszuwählen, um mit dem Hello Theme fortzufahren. Dies ist ein Thema , das vom Elementor-Team für die Zusammenarbeit mit Elementor erstellt wurde . Aber denken Sie daran, dass wir bereits Astra-Theme installiert haben, das leistungsfähiger und mehr Feature-Packs ist. Also werden wir weitermachen und überspringen. Hier haben wir die Möglichkeit, unserer Website einen Namen zu geben. Standardmäßig ist dies der Name, den Sie Ihrer Website bei der Installation von WordPress in Ihrem cPanel gegeben haben. Also lasse ich es einfach dabei und klicke auf Weiter. Dann haben wir hier die Möglichkeit, unser Logo hochzuladen. Aber das machen wir jetzt nicht. Wir laden das Logo hoch, während wir die Zielseite erstellen. Also klicke ich weiter und klicke auf „Überspringen“. Und schließlich haben wir hier zwei Möglichkeiten. Wir können eine leere Leinwand mit dem Elementor-Editor bearbeiten oder aus Hunderten von Vorlagen blättern oder unsere eigenen Elementarvorlagen importieren. Wir werden nicht direkt mit dem Erstellen der Webseite beginnen, wir müssen zum Dashboard gehen. Also klicke ich auf „Überspringen“. Okay, also scheint es, dass Elementor uns auf die Leinwand umgeleitet hat, die wir vermieden haben. Aber lasst uns weitermachen und auf dieses Burger-Menü klicken und zum Dashboard beenden. Denn denken Sie daran, dass wir den Rest der Plug-Ins immer noch nicht aktiviert haben. Ich klicke hier auf dieses Symbol damit wir das Dashboard verlassen können. Gehe zurück zu Plug-Ins. In der nächsten Lektion. Lass uns weitermachen und Elemente aktivieren, Wärme, Licht. Wir sehen uns in Kürze. 5. Füge ein Elementor Addon hinzu: Und willkommen zurück. Also haben wir Elementor bereits installiert und aktiviert. Jetzt sind wir dabei, Elemente Key Light zu aktivieren. Aber bevor wir das tun, möchte ich Ihnen nur zeigen, warum wir Elemente brauchen, Keith Licht und andere Erweiterungen von Elementor und wie sie funktionieren. also innerhalb der Seiten gehe, möchte ich nur mit der rechten Maustaste klicken und diesen Link in einem neuen Tab öffnen , damit wir diese Seite intakt lassen können und zu diesem neuen Tab gehen. Also kann ich dir zeigen, was wir meinen. Dies ist die Seite, die von Elementor automatisch generiert wurde , als wir den Assistenten fertiggestellt haben. Also klicke ich auf Bearbeiten mit Elementor. So können wir ins Front-End gehen und ansehen, was wir haben. Hier. Wir befinden uns auf der linken Seite von Elementor. Wir haben mehrere Panels , die Elementor-Tools enthalten. Und standardmäßig ist das Basis-Panel immer geöffnet. Dies sind die beliebtesten Elemente auf jeder Website. Jede Website oder Webseite benötigt immer eine Schaltfläche, benötigt immer eine Überschrift und ein Bild, Videos, Trennwände, Leerzeichen und all das. Wenn ich also diesen Basisbereich zusammenfalle und den Pro öffne, sind dies die Tools und Funktionen, die nur verfügbar sind, wenn wir die Pro-Version von Elementor gekauft haben. Wir können sie also nicht in unseren Workspace ziehen, aber wir können ein Bild hierher ziehen und dort ablegen. Ein Vorteil, wenn diese Erweiterungen wie Elemente kid light, Elemente Licht halten, ist dass einige der Funktionen , die nur in der Pro-Version von Elementor verfügbar sind der Pro-Version von , tatsächlich sind kostenlos, wenn Sie diese Erweiterung installieren, da es darum geht, den erweiterten Add-On-Score Elementor mit der Zeit zu bringen. Also haben wir Header gemacht und all diese Dinge. Also aktivieren wir Elemente Key Light. Und wir gehen ins Frontend und wir werden es hier aufgeführt finden. Und wir werden einen kurzen Blick auf die verschiedenen Tools werfen, die es mit sich bringt. Also klicke ich auf „Aktivieren“. Und jetzt ist es aktiv. Es ist hier auf der linken Seite aufgeführt. Und wenn wir auf Elemente klicken, Kinderlichter, klicken Sie einfach darauf. Es hat auch einen eigenen Setup-Assistenten der aus mehreren Schritten besteht. Und im Grunde legen diese drei Optionen hier fest, wie viele dieser verschiedenen Funktionen verfügbar sein werden oder Widgets. Wir nennen sie so. Wenn wir also eher fortgeschritten als Basic haben, haben wir mehr von diesen Jets. Also lasse ich es bei Fortgeschritten oder du kannst weitermachen und es einfach einfach einfach oder empfohlen lassen. Und dann gehen wir weiter und sagen den nächsten Schritt. Hier können Sie sich bei der Elements Kits Community anmelden der Elements Kits Community , um Nachrichten von ihnen zu erhalten. Lass uns weitermachen und auf Weiter klicken. Hier. Sie haben die Möglichkeit, weitere Tools zu installieren, die von den gleichen Elementen entwickelt wurden Kids Developer Team. Klicken Sie dann auf Weiter, wir werden diese jetzt installieren. Dann gehen Sie einfach weiter und klicken Sie auf den nächsten Schritt. Nächster Schritt, und jetzt sind wir bereit. Klicken Sie auf Änderungen speichern. Und jetzt haben wir Elemente installiert und aktiviert. Werden Sie Licht auf unserer Website. Und wenn das erledigt ist, lasst uns ins Frontend gehen. Und ich aktualisiere diese Seite. Es fragt uns, ob wir sagen wollen , dass sie sich ändern, da wir Änderungen nicht speichern möchten , da dies keine Seite ist , die Sie verwenden werden. Also lade ich einfach neu. Und wenn ich jetzt das grundlegende Panel Pro-Panel in all diesen anderen zusammenfalle , werden Sie jetzt feststellen, dass wir Elements Kit und Elements Kit Header-Ordner haben . Und wenn wir das erweitern, verfügt es über mehrere Tools, die unseren Websites einen Mehrwert verleihen sollen. Wenn ich also tippe, werden Sie feststellen, dass wir das Navi haben mit Elementor Pro geliefert wird und ein Navigationsgerät, das durch das Elements Kit Add-on eingebracht wird. Und das ist in der Pro-Version, also können wir es nicht auf die Seite ziehen, aber wir können dies ziehen und verwenden. Das ist also der Vorteil diese Add-Ons zu Elementor hinzuzufügen. Jetzt, da wir Elemente Kind haben, Licht aktiviert, gehen wir zurück zum Backend. Innerhalb von Plugins. Sie sind klebrige Header-Effekte für Elementor hat keinen Setup-Assistenten. Wenn ich also auf Aktivieren klicke, wird es einfach aktiviert und wir sind bereit, es zu verwenden. Jetzt, da das erledigt ist, ist das nächste, was Sie jetzt tun wollen unseren Header-Bereich zu erstellen. Also lasst uns das ab der nächsten Lektion machen. Wir sehen uns in Kürze. 6. Erstelle die Kopfzeile das Logo: Willkommen zurück. Ich habe einen Ordner vorbereitet der alle Assets enthält, die wir verwenden werden. Und ich habe IT-Assets entsprechend benannt. Sie finden diesen Assets-Ordner also in der Beschreibung unten und können ihn herunterladen , um alles hier zu finden. Und eines der Dinge, die Sie darin finden werden ist diese Farbpunkt-TXT-Datei. Dies enthält im Grunde die verschiedenen Farbcodes, die ich mir dieses Farbschema ausgedacht habe. Sie können diese Farbcodes verwenden oder Ihre eigenen verwenden. Also benutzen wir dieses Marineblau, Hellblau, Orange. Und natürlich kannst du jeden gewünschten Grauton verwenden. Ich wollte das nur erwähnen und erwähnte auch, dass Sie diesen Assets-Ordner in der folgenden Beschreibung finden. Wenn das aus dem Weg ist, gehen wir in unser Dashboard. Das erste, was wir tun müssen, ist zu bemerken , dass die Kopfzeile aus dem Logo und der Navigationsleiste besteht. Laden wir also ein Logo für unsere Website hoch. Also werde ich mit dem Mauszeiger über Elemente Kid fahren. Und eine der Optionen hier ist der Header-Ordner. Also klicke ich darauf. Hier. Sie bemerken, dass wir drei Panels haben, alle Kopf- und Fußzeile. Und das ist, dies wird eine Liste aller Kopf - und Fußzeilen sein, die Sie in diesem Abschnitt erstellt haben . Also sage ich „Neu hinzufügen“. Und wir können unserem Header einen Namen geben. Ich nenne es einfach Header. Und der Typ kann entweder eine Kopf- oder eine Fußzeile sein. In diesem Fall ist es ein Header und Bedingungen , dass wir möchten, dass er auf der gesamten Website verfügbar oder sichtbar ist . Und wir können weitermachen und sagen, dass wir es zunächst aktivieren, damit es tatsächlich sichtbar ist. Wenn wir es auslassen, wird es nirgends angezeigt. Nehmen wir an, aktiviere, speichere Änderungen. Und jetzt ist es aktiv, wie Sie in diesem Status sehen können. Klicken Sie auf Bearbeiten. Und in diesem Popup-Menü klicken Sie auf Inhalt bearbeiten wird zum Front-End weitergeleitet, wo wir jetzt mit Elementor mit dem Erstellen des Headers beginnen können. Hier sind wir. Jetzt sind wir bereit loszulegen. Natürlich. Beginnen wir mit dem Hinzufügen eines zweispaltigen Abschnitts. Und es ist ein zweispaltiger Abschnitt, da diese Spalte hier das Logo enthält. So können wir fortfahren und auf das Pluszeichen klicken und ein Bild hinzufügen. Während dieses Bild ausgewählt ist, werden Sie feststellen, dass in diesem Teil Bild bearbeiten steht. Wenn wir den Abschnitt auswählen, ändert sich dieser Teil zum Bearbeiten des Abschnitts. Welches Element Sie hier auf der Seite aktiv haben , ist das aktive Element genau hier. Und die Einstellungen und Konfigurationen, die Sie hier sehen, beziehen sich auf dieses Element. Wenn ich also das Bild auswähle, ändert sich das Bild, und wir können das Bild auswählen. Und da wir hier kein Logo haben, öffnen wir unseren Assets-Ordner. Und das ist das Logo. Ich wähle es aus und öffne es. Los geht's. Legen Sie dann Medien ein. Und da sind wir los. Sie fragen sich vielleicht, warum einige Teile nicht machbar sind , die, weil sie im Hintergrund weiß sind, weiß sind, aber wir werden diesen Hintergrund als blau haben, also wird es sichtbar sein. Also lasst uns weitermachen und diesen blauen Hintergrund einstellen. Und der Bug, der blaue Hintergrund ist im Ganzen, der gesamte Header. Es ist also der Abschnitt, der ausgewählt wird, dann gehe in Stil, Hintergrundtyp. Wir brechen das zusammen. Wir haben mehrere Panels. Wir brauchen den Hintergrund im Normalzustand. Klicken wir unter Farbe auf Klassisch. Wir können den Farbcode hier einfügen. Also gehe ich schnell zu diesem Dokument und wähle diese marineblaue Kopie aus. Dann komm her und füge es dort ein. Und jetzt ist es so blau. Ich aktualisiere Änderungen und schaue eine Vorschau an. Da haben wir es. Das nächste, was wir tun wollen, ist diese Navbar zu erstellen. Die Navigationsleiste besteht jedoch aus Menüpunkten. Und diese Menüpunkte haben wir vier davon sind eigentlich Webseiten. Das erste, was wir tun müssen, ist, für Webseiten oder eine beliebige Anzahl von Webseiten zu erstellen , die Sie benötigen. Dann können wir diese als Menüpunkte verwenden. Schauen wir uns also in der nächsten Lektion an , wie das geht. Wir sehen uns in Kürze. 7. Erstelle die Kopfzeile die Nav-Bar: Willkommen zurück. Jetzt haben wir unser Logo bereits hochgeladen. Es ist jetzt an der Zeit, unser Menü zu erstellen. Gehen wir also zurück und erstellen wir einen Platzhalter für dieses Menü. Und was wir tun müssen, ist auf dieses Pluszeichen zu klicken, um die Elemente aufzurufen , oder klicken Sie hier auf dieses Symbol, sie tun dasselbe. Wenn ich also darauf klicke, werden die Elemente angezeigt, damit wir an diesen Ort ziehen können. Also klicke ich hier auf die Suchleiste und tippe nav ein. Denken Sie daran, wir hatten bemerkt, dass wir zwei Nav-Elemente haben. Verwenden wir die Elemente kids Nav Menu und legen Sie es dort ab , wenn der blaue Indikator erscheint. In dem Moment, in dem wir das tun, stellen wir fest, dass wir kein Menü sehen. Da dies jedoch das aktive Element ist, heißt es, Elemente bearbeiten erhalten Nav Menu. Und eine der Optionen hier ist das Menü auswählen. Wenn wir auf dieses Dropdown-Menü klicken, sollten wir hier ein Menü haben , das wir auswählen und es wird hier angezeigt. Da wir jedoch noch kein Menü haben, müssen wir zum Backend im Dashboard gehen und ein WordPress-Menü erstellen. Lassen Sie mich das zuerst aktualisieren. Und wenn ich direkt hier zu diesem Tab wechsele, beende ich das Dashboard. Ich habe diese Seite immer noch intakt. Also habe ich gerade einen neuen Tab geöffnet und bin in das Dashboard gegangen , damit ich das Menü schnell erstellen kann. Sie können einfach von hier aus verlassen, wenn Sie möchten. Du kommst immer noch zurück. Jetzt wo wir im Dashboard sind, gehe ich rein. Das Aussehen zeigt den Mauszeiger über das Aussehen als Menüs. Und wenn wir hier landen, werden Sie feststellen, dass das erste was wir mit Leichtigkeit begrüßt werden, unten Ihr erstes Menü erstellen. Das liegt daran, dass sie noch kein Menü haben. Wir müssen einen erstellen. Lassen Sie mich diese Benachrichtigung schließen. Lassen Sie uns also unserer Speisekarte einen Namen geben. Ich nenne es Menü und wähle das Hauptmenü aus. Also erstellen wir dieses Menü, unser Hauptmenü. Wenn wir also mehr Menüs haben, können sie die sekundären Menüs von Canvas, Menü, ETC sein. Klicken Sie also auf Menü „Erstellen“. Und in dem Moment, in dem wir das tun, werden Sie feststellen, dass dieser Teil jetzt aktiv ist. Anfangs war es nicht aktiv. Und in diesem Teil hier steht Menüelemente aus der Spalte auf der linken Seite hinzufügen . Menüelemente können Beiträge der Seite, benutzerdefinierte Links oder Kategorien sein. Manchmal sind es noch mehr Gegenstände hier. Was wir also brauchen, ist ein paar Seiten zu erstellen hier aufgeführt werden und wir können sie in unser Menü aufnehmen. Beachten Sie jedoch vorerst, dass wir die Beispielseite haben, die normalerweise mit jeder neuen Installation von WordPress geliefert wird. Also klicke ich mit der rechten Maustaste auf Seiten und öffne diesen Link in einem neuen Tab. Und ich wechsle zu diesem neuen Tab , um eine Liste aller Seiten zu sehen, die wir hier haben. Diese beiden sind Entwürfe. Lassen Sie mich sie hervorheben und in den Müll bringen. Mit anderen Worten, lösche sie. In der Tat muss ich diese Beispielseite löschen. Wir brauchen es nicht. Geh in den Papierkorb. Und jetzt können wir vielleicht vier oder fünf Seiten hinzufügen. Also klicke ich auf Neues Zuhause hinzufügen. Und auf der rechten Seite haben wir hier die Einstellungen für WordPress und Elementor und haben hier nach Einstellungen gefragt. Also müssen wir diese beiden Arten von Einstellungen konfigurieren. Die erste unter den Einstellungen für WordPress und Elementor. Gehen wir unter Vorlage. Wählen wir Elementor, volle Breite. Und dann unter Astro-Einstellungen, unter Kostümlayout, Lass uns die volle Breite wählen, gestreckt. Und die Sidebar. Keine Sidebar. Weil Sie nicht möchten, dass eine Webseite irgendwelche Seitenleisten hat. Dann müssen wir die standardmäßige Awestruck Header - und Fußzeile deaktivieren , da wir unsere eigenen im Frontend erstellen. Wenn diese Einstellungen intakt sind, veröffentlichen wir die Seite. Gehen Sie dann zur Seitenliste. Und jetzt haben wir zu Hause, seine Ehre, die Seiten, die ich mehrmals wiederholen werde die und verschiedene Seiten erstellen. Und ich werde diesen Teil schnell vorantreiben, weil er nur ein Ruf dessen ist, was wir gerade getan haben. Ich schlage vor, dass du das Gleiche machst. Also füge neu hinzu. Ich rufe diese Kurse an. Und das ist die letzte Seite. Beenden Sie also die Liste der Seiten, die wir haben. Jetzt haben wir fünf Seiten, die als Menüpunkte verwendet werden können. also wieder hineingehen, Aussehen, Menüs unter Seiten, werden Sie feststellen, dass wir sie jetzt als Menüpunkte haben, also wähle ich sie alle aus. Oder Sie können eins nach dem anderen auswählen, was Sie wollen. Also wähle ich alle aus und füge sie zum Menü hinzu. Und jetzt haben wir sie unter dem Menü aufgeführt, das im Namensmenü steht. Und lasst uns sie neu anordnen, indem wir sie von oben nach unten ziehen. Lassen Sie uns den Kontakt als allerletzten Punkt setzen. Der Gegenstand, der hier oben steht, wird der links sein. Und der Punkt, der hier am Ende ist , wird der Punkt rechts in unserem Menü , von links nach rechts. Von links nach rechts. Und mit dieser Änderung speichern wir das Menü. Jetzt, mit diesen Änderungen, können wir zu der Seite wechseln, auf der wir unser Menü hier hatten. Denken Sie daran, dass wir diese Nav-Elemente hinzugefügt hatten, NAB das Menü der ausgewählten Elemente beibehalten , Navigationsmenü erhalten und wir sollten dieses Menü hier erscheinen lassen. Jetzt muss ich nur noch diese Seite aktualisieren und dieses Menü erscheint hier. Also drücke ich Control R oder Command R, wenn du auf einem Mac bist. Um die Seite zu aktualisieren. Und ich wähle dieses Element aus, überspringe das Navigationsgerät. Und wenn wir jetzt zum Menü „Auswählen“ gehen, erscheint das soeben erstellte Dropdown-Menü und die Elemente werden hier angezeigt. Da sind wir los. Aber jetzt sind sie auf der linken Seite. Wir müssen sie nach rechts drängen. Gehen wir also zur horizontalen Menüposition und wechseln nach rechts. Da sind wir los. Aber jetzt müssen wir die Farben ändern, um zu schreiben, da sie derzeit nicht sichtbar sind. Während dies noch ausgewählt ist, klicken Sie auf eine beliebige Stelle in diesem blauen Feld. Gehe in den Stil. Lassen Sie mich den Menü-Wrapper zusammenbrechen. Wir haben hier mehrere Einstellungen. Was wir brauchen, sind die Menüpunkte Stil, Hintergrundtyp, kein Hintergrundelement, Textfarbe, Weiß. Ziehen wir das den ganzen Weg dorthin. Und lassen Sie mich beim Schweben irgendwohin klicken, um das loszuwerden. Und beim Schweben muss die Farbe 1524 sein, was eine der Farben ist, die ich hier habe, eine 24. Und wenn Sie beim Schweben aktiv sind, werden Sie jetzt feststellen, dass es zu dieser Orange wird. Und wenn wir aktiv waren, mussten wir auch F 158 sein. Vierundzwanzig, aktiviere das. Und dann lasst uns eine Vorschau der Änderungen anzeigen. Da sind wir los. Wenn ich jetzt den Mauszeiger darüber fahre, ist es großartig. Und so erstellt man den Header. Lassen Sie uns als Nächstes sehen, wie Sie den Heldenbereich erstellen. Lass uns das in der nächsten Lektion machen. Wir sehen uns in Kürze. 8. 7 Erstellen Sie den Hero: Willkommen zurück. Wir sind gerade dabei, einen Heldenbereich zu erstellen. Eine, um mit dem Hinzufügen dieses Textblocks zu beginnen. Und dann fügen wir das Bild hinzu und wir werden mit diesen Partikeln fertig sein. ich also zu unserer Elementor-Seite übergehe, möchte ich diesen Teil verlassen weil wir mit der Bearbeitung der Kopfzeile fertig sind. Denken Sie daran, dass wir hier die Kopfzeile bearbeitet haben. Was wir also tun müssen, ist auf dieses Burger-Menü zu klicken und zum Dashboard zu gehen. Wir können eine Webseite erstellen oder eine der von uns erstellten Webseiten verwenden. Wie Sie sehen können, wurden wir in das Dashboard umgeleitet und befinden uns immer noch in den Header-Einstellungen. Gehen wir also innerhalb der Seiten. Und wir haben die Liste aller Seiten, die wir zuvor erstellt hatten. Also werden wir jede dieser Seiten verwenden und ich möchte die Homepage als unsere Landingpage verwenden , weil es Sinn macht. Also klicke ich auf Bearbeiten. Und da wir hier bereits alles eingerichtet hatten, müssen wir nur Edit with Elementor sagen und werden zum Frontend weitergeleitet , wo wir die Seite mit dem Rest der Seite füllen können Inhalt. Jetzt, wo wir die Seite selbst und nicht die Kopfzeile bearbeiten , können wir den Header von hier aus nicht bearbeiten. Wir können also auf dieses Logo klicken oder die Größe dieser Spalten hier oder die Farben von irgendetwas in der Kopfzeile bearbeiten. Wir bearbeiten den Inhalt , der sich unter der Kopfzeile befindet. Um hier zu unserer Referenz zu gelangen, benötigen wir eine doppelte Spalte, eine für das Bild und die andere für den Textblock. Fügen wir also einen Abschnitt mit zwei Spalten hinzu. auf dieser Seite natürlich Lassen Sie uns auf dieser Seite natürlich eine Überschrift hinzufügen. Lass es uns da reinwerfen. Also mache ich einfach weiter und tippe. Während dies ausgewählt ist, werden Sie feststellen, dass sich dies durch Bearbeiten der Überschrift geändert hat. Also tippe ich einfach Grundkurse für alle ein. einfach Grundkurse Und wir können in den Stil gehen, solange es noch aktive Stil-Typografie ist. Erhöhen wir die Größe und wir können die Schriftfamilie ändern während wir noch unter Typografie sind. Schriftfamilie. Ändern wir das in Montserrat oder eine beliebige Schriftart. Also Montserrat, klicken Sie jetzt irgendwo in diesem Bereich hier, um diese Box so loszuwerden. Und ändern wir diese Farbe in Weiß. Und jetzt kannst du es nicht sehen, weil der Hintergrund weiß ist. Damit wir zum nächsten Schritt gelangen, nämlich die Hintergrundfarbe des gesamten Abschnitts von links nach rechts zu ändern , müssen wir den Abschnitt selbst auswählen. Und jetzt werden Sie feststellen, dass es ein bisschen schwierig den Abschnitt in die Hand zu nehmen. Und was wir tun müssen, ist einfach durchzugehen, wenn du den Mauszeiger darüber bewegst und dann nach oben gehst , kannst du irgendwie diese Einstellungen bekommen. Und das ist eine Art Bug in Elementor. Mir ist aufgefallen, dass das ziemlich oft passiert. Oder du kannst zu dieser Kolumne gehen. Und da es dann mit diesem Teil in Kontakt steht, können Sie es auswählen. Aber wenn Sie direkt von hier aus versuchen, dorthin zu gelangen, können Sie das nicht. End Elements bietet uns tatsächlich auch ein Tool namens Navigator, mit dem wir die auswählen und navigieren können verschiedenen Abschnitte, die wir auf der Seite haben , auswählen und navigieren können. Wenn Sie also Strg I auf der Tastatur drücken , wird das Tool aufgerufen. Und das Tool gibt uns im Grunde genommen eine Vogelperspektive auf die Seite. Wie Sie sehen können, haben wir hier zwei Spalten. Und das sind diese beiden Säulen. Und sie befinden sich in der Sektion. Wenn ich diesen Abschnitt zusammenbreche, werden Sie feststellen, dass die Spalten jetzt verschwunden sind, weil sie sich innerhalb des Abschnitts befinden. Wenn Sie es erweitern, werden die beiden Spalten angezeigt, die sich darin befinden. Wir können also von hier aus einen Abschnitt auswählen indem wir auf den Abschnitt klicken. Und jetzt liest das Abschnitt. Das bedeutet, dass der gesamte Abschnitt ausgewählt ist. Das ist eine weitere Möglichkeit, dieses kleine Problem zu umgehen. das also schließen , können wir zum Stil gehen. Wenn ich den Hintergrund eingeklappt habe, werden Sie feststellen, dass wir hier mehrere Einstellungen haben. Wir brauchen vorerst nur den Hintergrund. Diesmal wollen wir nicht, dass der Hintergrund klassisch einfarbig ist. Wir wollen, dass es ein Farbverlauf ist, also klicke ich darauf. Und wir haben die erste Farbe. Und die zweite Farbe, für die obere Farbe oder die erste Farbe, wollen wir dieselbe Farbe, weil wir wollen, dass der Farbverlauf von oben nach unten verläuft. Wenn wir hier also dieselbe Farbe wie diese verwenden, wird es eine allmähliche Änderung geben, die nur zwischen diesem Blau und dieser zweiten Farbe hier auftritt . Also Farbe eins auswählen. Ich wechsle darauf um und sage Marineblau. Kopiere das, füge es hier ein. Lass uns weitermachen und diese zweite Farbe ändern. Das ist hellblau. Kopier das. Kleben Sie es da rein. Und jetzt ist es ein wunderschöner blauer Farbverlauf. Sehen wir uns also eine Vorschau der Änderungen an. Ja, da haben wir's. also wieder hier rein gehen, während dies noch ausgewählt ist, denken Sie daran, dass wir gesagt haben, dass wir ein H1 pro Seite benötigen. also derzeit noch ausgewählt sind, werden Sie, wenn Sie zu Inhalt gehen, feststellen, dass H2 dies in H1 ändern wird. Klicken wir darauf und fügen einen Texteditor hinzu, bei dem es sich im Wesentlichen um einen Absatz handelt. Also haben wir es dort hineingelegt, solange es noch ausgewählt ist. Jetzt heißt es jede Textfarbe im Texteditor-Stil Ändern Sie diese in Weiß. Und wir können weitermachen und die Topographie auswählen. Ändere die Familie. Montserrat. Wählen Sie das aus, gehen Sie in Stil, Typografie, Schriftart und Gewicht. Machen wir 900 draus, damit es schwer ist. Und jetzt brauchen wir einen gewissen Abstand zwischen dem Inhalt des Hero-Abschnitts und der Kopfzeile. Also machen wir das, indem wir zu dieser einzelnen Spalte gehen , da es sich um eine Doppelsäule handelt. Gehen wir zu dieser Kolumne. Erweiterte Marge. Lassen Sie uns diesen Link entfernen, damit wir einzelne Zellen bearbeiten können. Der obere Rand kann ihn also vergrößern, indem man ihn ansieht. Ich denke, das ist eine nette Entfernung. Lassen Sie uns das aktualisieren und eine Vorschau der Änderungen anzeigen. Also los geht's. Als Nächstes möchten wir das Bild hinzufügen. Gehen wir also zurück, klicken wir hier auf dieses Pluszeichen. Und ziehen wir ein Bildelement hinein. Das Bild ist noch aktiv. Wir können weitermachen und aus unserem Assets-Ordner hochladen. Das ist das Bild. Sie haben, all diese Bilder stehen Ihnen unter diesem Video zur Verfügung. Fügen wir Medien ein. Und los geht's. Aktualisiere das. Und bevor wir es uns im Front-End ansehen, wollen wir nun einige Abstände hinzufügen, etwas Abstand zwischen dem Rand des Abschnitts und dem Inhalt, in dem sich der Inhaltsbereich befindet. Wählen wir also den Abschnitt selbst aus. Gehen Sie in das erweiterte Padding, entfernen Sie diesen Link. Polsterung an der Unterseite Geben wir 50. Das vergrößert nun den Abstand zwischen dem Ort, an dem der Inhalt reicht, und der Grenze. Ganz oben. Wir können ihm vielleicht auch etwas Padding geben, vielleicht 30 das aktualisieren. Sehen wir uns eine Vorschau der Änderungen an. Okay, ich finde das großartig. Als Nächstes möchten wir jetzt unsere Buttons hinzufügen. Also lass uns weitermachen und das in der nächsten Lektion tun. 9. Hinzufügen von Texteffekten: Willkommen zurück. Wir sind gerade dabei, unsere Buttons direkt unten hinzuzufügen. Aber bevor wir das tun, fragen Sie sich vielleicht, wie wir diesen Schlagschatten hinter den Text aufgenommen haben. Wie Sie sehen können, haben wir einen Schatteneffekt hinter dem H1. Wie haben wir das gemacht? Gehen Sie hier zurück, wählen Sie den Stil H1 und gehen Sie in den Insider-Stil aus. Lass uns zu Text Shadow gehen. Und wenn wir darauf klicken, schauen Sie sich den Text an. Wenn ich das sofort anklicke, zeigt es etwas Schatten dahinter. Und wir können es genau hier nach unseren Wünschen anpassen , damit Sie die Unschärfe ein wenig erhöhen können . Ich mag es, wie es aussieht, aber mach weiter und spiele damit herum. aktualisiere ich. Lassen Sie uns eine Vorschau der Änderungen anzeigen. So hat mir der Schlagschatten bisher gefallen. Aber eine andere Sache, die Sie sich vielleicht fragen, ist, wie habe ich diese orangefarbene Farbe erreicht? Ich wollte, dass die Online-Kurse auffallen , denn das sollten wir wirklich für jeden hervorstechen , der auf dieser Seite landet. Also alles, was ich getan habe, war , diesen Text in eine Spanne zu wickeln. Für diejenigen unter Ihnen, die nicht wissen, wie man in HTML codiert, gibt es etwas, das als Span bezeichnet wird. Und du kannst mehr darüber lesen. Es ist sehr einfach zu bedienen, aber ich zeige dir einfach, wie ich es gemacht habe. Während dies noch ausgewählt ist, gehe ich in den Inhalt Elementor weniger als sign. Fan, so eng diese Spanne. Dann sollten die Wörter, für die Sie die Farbe ändern möchten , in die Werkzeughose eingewickelt werden und die zweite Spanne sollte den Schrägstrich direkt vor der Wortspanne haben . Und dann innerhalb der ersten Spanne, Typ, Stil, gleich Anführungszeichen. Und innerhalb der beiden Anführungszeichen können Sie fortfahren und Farbe eingeben. Ich benutze den Code. Wir haben bereits 1524 verwendet , nur um diese Konsistenz aufrechtzuerhalten. Da drin haben wir es, aktualisiere das. Wenn das für Sie zu kompliziert aussieht, müssen Sie sich keine Sorgen in Pink machen, Sie kennen Elementor nicht, Sie müssen diese benutzerdefinierten Einstellungen nicht wirklich verwenden. Ich zeige es Ihnen nur für den Fall, dass Sie zusätzliche Anpassungen wie diese vornehmen möchten . In der nächsten Lektion fügen wir die beiden Schaltflächen hinzu. Wir sehen uns in Kürze. 10. Hinzufügen und Anpassen von Schaltflächen: Wir sind jetzt wieder Zeit, um die beiden Buttons hinzuzufügen. Es gibt verschiedene Möglichkeiten, das gleiche Ergebnis wie dieses zu erzielen . Wir können hier zwei Schaltflächen hinzufügen, indem hier eine doppelte Spalte in einen Abschnitt einfügen und dann eine ziehen und dann so in Schaltflächen ziehen und sie anpassen, bis sie so aussehen. Oder wir können die Option Elements Kit Duo Button verwenden, die ich Ihnen zeigen werde. Lassen Sie mich also zuerst diese Seite aktualisieren, bevor wir weitermachen. Und dann möchte ich innerhalb des Dashboards ins Element-Kit gehen, auf Elemente-Kit, Widgets klicken. Und dann denken Sie daran, während wir Elements Kit eingerichtet haben, haben wir die grundlegende Option ausgewählt. Es gab auch die Option „Erweitert“ und „benutzerdefinierte“ Option. Da wir die Basisoption ausgewählt haben, einige der Widgets hier, bleiben wir nicht aktiviert oder wo sie aufgehört haben. Also müssen wir die Dual-Tasten-Option aktivieren. Also lasst uns danach suchen. Ja, hier ist es. Alle Schaltflächenoption, so weiter. Und dann speichern wir die Änderungen. Und jetzt wechseln Sie zurück zu unserem Front-End, wo wir unsere Bearbeitung durchführen. Wenn ich diese Seite aktualisiere, indem ich Control R. Alright klicke, dann lass uns jetzt Duo eingeben. Und jetzt ist es verfügbar. Ziehen Sie das hier rein und lassen Sie es da rein. Wir haben die beiden Knöpfe. Jetzt können wir sie anpassen. wir zunächst damit, ihre Breite zu verlängern. Und dann lasst uns die Lücke vergrößern. Vielleicht bis da oben. Und dann lassen Sie uns den Knopf eins erweitern. Lassen Sie uns eine Beschreibung wie Download-Kurse geben . Und dann können Sie den Link hier angeben , damit die Länge bestimmt, was passieren wird, wenn jemand darauf klickt . Entweder ist es ein Zweifel, es ist ein Download-Link oder es bringt sie zu einer Seite, oder es bringt sie zu auf der sie alles herunterladen können. Dann ist der Knopf eins zusammengebrochen. Gehen wir zu Button zu, lassen Sie uns den Text ändern, um mehr zu erfahren. Und Sie können einen Link angeben. Und wenn Sie möchten, können Sie ein Icon angeben. werden wir nicht tun. Lasst uns das aktualisieren. Jetzt. Während die Schaltflächen noch ausgewählt sind, gehen wir in den Stil. Jetzt können wir anfangen, sie zu stylen. Wenn ich das zusammenbringe, haben wir nur zwei Möglichkeiten. Button 1 kann beginnen, indem Sie die Hintergrundfarbe bearbeiten. Also hier haben wir die Textfarbe, und dann klicken wir hier auf den Hintergrundtyp , damit wir diese Änderung vornehmen können 24. Und das kann sein, welche Farbe haben wir hier benutzt? Ein Weiß. Lassen Sie uns den Knopf in Farbe weiß machen. Es wird also die Farbe des Hintergrunds gebündelt, weiß. Das bedeutet also, dass die Textur auf Marineblau wechseln muss . Klicken Sie also irgendwo hier drin. Um das loszuwerden, sollte die Farbe des Textes blau sein. Also gehe ich dazu und wähle diese marineblaue Kopie aus , die hier reingeht, Schaltfläche zum Ausmalen. Füge es da rein. Und jetzt ist es blau. Beim Schweben. Wollte blau bleiben. Füge das da rein. Und jetzt bleibt es immer noch blau. Für Knopf eins. Erweitern Sie das. Beim Schweben. Bleibt immer noch weiß. Lassen Sie uns als Nächstes die Ecken abrunden, damit sie nicht so scharf sind wie jetzt. Also für Knopf eins, Grenzradius, geben wir ihm eine Zehn. Und jetzt ist es an den Ecken abgerundet. Für den Button auch. Machen wir das Gleiche. Jetzt. Es hat Hausarrest. Reduzieren wir die Höhe nur ein wenig. Und das tun wir, indem wir bis zum Polstern nach unten gehen. Brechen Sie diese Verbindung auf. Und dann lasst uns unsere eigene Polsterung machen. Oben. Lass uns ein 15 geben. Das ist 15015. Und die unteren 15. Das gefällt mir. Aber hier können wir dir die 50 und hellen 50 geben. Das ist eher so. Machen wir das Gleiche für den ersten Knopf. Polsterung Entfernen Sie das Standard-Padding. Dann links, 50, rechts 50, Top 15, unten 15. Jetzt müssen wir die Breite erhöhen. Gehen wir also zurück zum Content-Button. würde uns gefallen. Dann lasst uns das aktualisieren. Vorschau der Änderungen. Okay, wegen der Textmenge hier sind die Schaltflächen darüber hinausgegangen. Wir können die Größe davon reduzieren oder dieses Wort ändern, um ein anderes Wort zu sein , das kürzer ist. Wie einfache College-Kurse für jedermann. Und wir fangen jetzt schon an, alles nach oben zu schieben , da wir das aktualisieren sollen. Vorschau der Änderungen. Mir gefällt schon, wo es ist. Das nächste, was wir tun wollen, ist, diese Animation hinzuzufügen. Wenn Sie den Mauszeiger darüber bewegen, wird es abgerundet, weil sich die Farben beim Mauszeiger nicht ändern. Wir brauchen eine Möglichkeit, dem Benutzer zu zeigen, dass über die spezifischen Elemente schwebt. Gehen wir also wieder hier rein, wählen wir das aus. Lasst uns die Lücke verringern. Und wenn wir dann beim Hover auf die Schaltfläche eins klicken, möchten wir den Randradius auf 50 ändern. Wenn wir jetzt den Mauszeiger darüber bewegen, ändert sich dieser kreisförmige Randradius. Aber weil es noch nichts dagegen gemacht hat, ändert sich das nicht. Gehen wir also zu Button, um zu schweben. Grenz-Radius. 51. Das letzte Ding, geben wir ihnen einen Boxschatten. Also knöpfen Sie eins. Unter normalen Umständen benötigen Sie einen Boxschatten. Beim Schweben. Wir brauchen den Box-Shadow, um sich mehr auszubreiten. Im Moment haben wir den Box-Schatten in der Standardgröße, Unschärfe Größe von zehn. Aber beim Schweben, geben wir ihm einen Boxschatten mit einer verschwommenen Größe von, mal sehen, jetzt ist er immer noch bei zehn. Wenn wir es also vielleicht 20 geben, scheint sich der Box-Shadow mehr auszubreiten und versuchen wir vielleicht 30. Das gefällt mir besser. Machen wir dasselbe für Button to Box-Shadow unter normalen Umständen, Box-Schatten, und jetzt haben wir einen Box-Schatten. Und beim Schweben möchte ich, dass der Box-Schatten eine Größe 30 hat. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Okay, wenn wir also den Mauszeiger darüber bewegen, hat mir gefallen, was wir uns ansehen. So fügen Sie den Inhalt im Heldenbereich hinzu. Lassen Sie uns als Nächstes sehen, wie der Heldenbereich so gestaltet wird, dass er wie ein Buch aussieht, wie es hier aussieht. Und wie man diese Partikel hinzufügt. Wir sehen uns in Kürze. 11. Benutzerdefinierte Border: Wir sind zurück. Es ist also an der Zeit, dieses Buch wie Grenzeffekte hier unten im Heldenbereich hinzuzufügen Grenzeffekte hier unten im . Und was wir tun müssen, ist den Abschnitt selbst auszuwählen. Also wähle ich das aus. Und wir gehen auf den Site-Style. Dann werden wir sofort zur Formteiler gehen. Wir möchten diese Form nicht ganz oben hinzufügen. Wir möchten es unten hinzufügen. Denn wenn wir es oben hinzufügen und sagen: Buch, hier sind wir. Buch, wir fügen es ganz oben hinzu. Das wollen wir nicht. Also geh zurück und sag keine. Willst du nach unten gehen und dann buchen. Und da haben wir es. Aber jetzt ist es zu hoch in der Sektion. Was wir also tun müssen, ist mit der Höhe herumzuspielen, sagen wir bis irgendwo dort. Ich mag es an diesem Punkt. Aber zögern Sie nicht, es so hoch zu machen, wie Sie möchten. Und können Sie hier auch mit all diesen anderen Effekten herumspielen . Weil es darum geht, wie kreativ man das bekommt. Ich lasse es bei BU. Und du kannst es auch invertieren, wenn du willst. Ich mag es so. Das nächste, was wir tun wollen, ist, zuerst eine Vorschau darauf zu werfen. Da sind wir los. Aber lassen Sie uns die Polsterung unten erhöhen , da wir die Grenze näher an den Inhalt gebracht haben , lassen Sie uns diese Polsterung weiter vorantreiben. Wenn ich also zurückgehe, während die Sitzung noch ausgewählt ist, fortgeschritten, habe ich eine 50er gemacht. Lasst uns nun die Polsterung unten oben irgendwo dort erhöhen . Lassen Sie mich in der Tat 120 machen weil ich möchte, dass dies die gesamte Landing Page füllt. Also lasst uns das 100 machen. Und lasst uns das aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Ich möchte, dass es wenn möglich ganz nach unten geht. So. Schieben wir den Textblock ein wenig nach oben. Lassen Sie das Bild dort, wo es ist. Ich wähle die Spalte aus, die den Textblock enthält. Gehe zu Fortgeschritten. Es handelt sich um die oberste Marge. So. Lasst uns das aktualisieren. Und das ist es , was wir wirklich ändern. Mir gefällt, wo es ist. Das nächste, was wir tun wollen, ist, diese Partikel hinzuzufügen. Und um das zu tun, müssen wir eine sehr großartige Elementor-Erweiterung namens Piraten-Net-Add-Ons für Elementor hinzufügen eine sehr großartige Elementor-Erweiterung . 12. Füge animierte Partikeleffekte hinzu: Also gehe in unser Dashboard, Plugins, füge neue hinzu. Ich tippe Botnet ein. Botnet, je nachdem, wie man Wörter ausspricht. Hier sind wir. Wir haben Pi alternative Formulare. Indem ich es Add-Ons für Elementor raubt. Das brauchen wir also, 30 Tausend aktive Installationen im Moment. Er hat gestohlen. Jetzt. Lasst es uns aktivieren. Und da haben wir es. Es hat also auch all diese Elemente kostenlos hinzugefügt, damit wir sie verwenden können. Diese anderen sind in der Pro-Version, aber wir haben bereits das, was wir brauchen, nämlich die Teilchen. Wenn wir also hier im Frontend zurückkehren, jedes Element, das wir auswählen, das mit dem WordNet bearbeitet werden kann zeigt jedes Element, das wir auswählen, das mit dem WordNet bearbeitet werden kann, hier die Netzeinstellungen an. Lassen Sie mich diese Seite aktualisieren, damit Sie sehen können, was ich meine, unsere Aktualisierung kontrollieren. Und jetzt, zuerst, wenn ich hier alles zusammenbringe, haben wir diese Power Net-Add-Ons für elementare oder bezahlbare oder parfaitfreie Widgets. Also steht es uns jetzt zur Verfügung, wenn ich diesen Abschnitt auswähle, diese Änderungen zum Bearbeiten des Abschnitts. Aber jetzt beachte, dass wir hier diese perfekte Option haben. Und wenn ich das auswähle, während dieser Abschnitt noch ausgewählt ist, können wir jetzt hierher kommen und Partikel sagen und das einschalten. Jetzt wirst du hier nichts sehen, aber du siehst auf der Vorschauseite. Bevor wir also etwas ändern, klicken Sie auf Aktualisieren und lassen Sie uns eine Vorschau anzeigen, damit Sie sehen können, was wir bereits haben. Also eine Vorschau ändert sich. Und genau das haben wir. Wenn wir diese Partikel also im Back-End bearbeiten, können wir sie sehen. Wir müssen zum Front-End wechseln, um sie zu sehen. Aber wir können damit beginnen, die Anzahl der Partikel zu reduzieren , denn wenn Sie zu viele Partikel verwenden, wird Ihre Webseite langsam geladen. Aber ich denke, ein 100 oder ein 150 ist eine gute Zahl. Also lasst uns 120 machen. Und lassen Sie uns diese Farbe vielleicht in ein Blau ändern. Wir werden es optimieren, bis wir das schöne Blau bekommen. Also benutze ich das Blau. Ich benutze das Blau und kopiere es. Ich kopiere das und füge es ein. Das ist also die Partikelfarbe. Jetzt ändern wir auch den Link. Partei ruft Farbe an. Das sind diese Bindungen, die die Partikel zusammenhalten. Sie werden auch gelesen, lassen Sie uns sie blau machen. Also kleben Sie das Blau da rein. Dann lasst uns das aktualisieren. Und lasst uns zuerst eine Vorschau der Änderungen anzeigen. Das ist eine schöne Farbe. Gerade jetzt. Dies sind Kreise. Wir können sie in Polygone oder Sterne, Kanten, Kreise, Bilder und alles, was Sie wollen, ändern Sie sie in Polygone. Und Sie können auch die Geschwindigkeit reduzieren. Lasst uns das jetzt um vier belassen. Und Sie können wählen, was passiert, wenn Sie den Mauszeiger über die Partikel bewegen. Wir können also sagen, dass Sie sie abstoßen, wenn Sie den Mauszeiger über sie bewegen. Und lasst uns das aktualisieren und den Effekt sehen. Vorschau. Lade immer noch. Wenn wir jetzt über sie schweben, haben wir sie abgewehrt. Und genau das haben wir gesagt. So fügen Sie diese beiden Effekte hinzu, die Buchgrenzeffekte und den Partikeleffekt. Als Nächstes möchten wir den nächsten Abschnitt erstellen, nämlich diesen animierten Abschnitt hier. Also machen wir das in der nächsten Lektion. Wir sehen uns in Kürze. 13. Bildbox Abschnitt Teil 1: Herzlichen Glückwunsch, du hast die Helden-Sektion beendet. Es ist jetzt an der Zeit, den Rest der Landing Page zu erstellen. Und was wir schaffen wollen, ist dieser nächste Teil hier. Und wie Sie sehen können, haben wir drei Spalten, aber das sind nur eine einzelne Spalte, aber sie werden alle in einem Abschnitt gehalten. Wie machen wir das? Wir fügen zunächst einen einzelnen Spaltenabschnitt hinzu. Also füge ich hier einen einzelnen Spaltenabschnitt hinzu. Lassen Sie uns zunächst einen oberen Rand in diesem Abschnitt hinzufügen , um ihn vom Heldenbereich zu trennen. Wenn wir es auswählen, gehen wir zu Erweitert. Wir verschieben diesen Link und dann die oberste Marge von vielleicht 50. Und jetzt gibt es diesen Raum zwischen ihnen. Jetzt müssen wir das zweite, was wir tun müssen, eine Überschrift hinzufügen. Also öffne ich das Basis-Panel und ziehe eine Überschrift dorthin. Ich kopiere einfach diese Texte. Erfahren Sie, wie Sie Ihre eigenen Websites erstellen. Natürlich müssen Sie Ihre eigenen Texte eingeben. Während dies noch ausgewählt ist. Markieren Sie das und fügen Sie es dort ein. Jetzt müssen wir es in die Mitte bringen. also unter Inhaltsausrichtung Schieben Sie es also unter Inhaltsausrichtung in die Mitte. Und wir können in die Farbe Style Texts gehen und sie so in ein dunkles Grau ändern. Beachten Sie jetzt, wenn wir zur Typografie gehen , ist es immer noch Roboto. Und das liegt daran, dass Roboto jedes Mal, wenn wir einen neuen Text hinzufügen, als globale Schriftart festgelegt wurde jedes Mal, wenn wir einen neuen Text hinzufügen, als globale Schriftart , standardmäßig Roboto. Wir müssen uns also jedes Mal ändern , wenn wir einen neuen Text hinzufügen, aber das können wir vermeiden. Lassen Sie mich das zuerst aktualisieren. Und wenn wir dann zu diesem Burger-Menü gehen und Site-Einstellungen auswählen, gehen Sie zu globalen Schriftarten. Wir können die globalen Schriftarten festlegen, die wir überall auf der Website anwenden möchten. Jedes Mal, wenn ein neuer Text zur Website hinzugefügt wird. Standardmäßig wird es auf diese Schriftarten eingestellt, sagten wir hier. Also die primären Schriften, Lasst uns es in Montserrat ändern. Lass uns zur Sekundarstufe gehen. Gehen wir zu Text und Akzent. Dann aktualisiere. Alles klar, also lass mich das schließen. Wenn wir dies auswählen und zur Typografie gehen. Lassen Sie uns das zunächst ändern, um die Route zu überwachen. Und wenn wir eine neue Text-Überschrift hinzufügen, wird die Ratte automatisch überwacht. Standardmäßig ist es also Montserrat. Lassen Sie mich das einfach löschen. Okay, lass mich es nicht löschen, weil wir es heute noch für diese Scale-Up brauchen. Lassen Sie mich das einfach kopieren, markieren Sie es und fügen Sie es dann dort ein. Änderungen, die heute skaliert werden müssen. Solange es noch ausgewählt ist, legen wir es in die Mitte. Lassen Sie uns in Stil, Typografie, Textfarbe gehen. Lassen Sie uns es in diese dunkelblaue Farbe ändern. Also wähle ich das aus und kopiere es hier rein. Füge das Blau da rein. Ich glaube, ich möchte das ein bisschen schwächer machen. Also Stil. Lasst uns das ein bisschen nach oben schieben. Klicken Sie irgendwo da draußen. Typographie. Lassen Sie uns das ein bisschen kleiner machen. Bis zu diesem Zeitpunkt vielleicht. Dann skaliere heute. Typografie, Schriftgewichte, Lass uns 800 machen und lass uns die Größe vergrößern. Lasst uns es irgendwo dort anstoßen und lasst es uns aktualisieren. Das nächste, was wir tun möchten, ist, diese Boxen hier hinzuzufügen , die diesen schönen Effekt haben, wenn Sie den Mauszeiger darüber bewegen. 14. Bildbox Abschnitt Teil 2: Grün zurück in unserem Redakteur. Während wir uns noch in diesem Abschnitt befinden, wählen wir aus , klicken Sie dort oben auf dieses Symbol. Ziehen wir an einer Kreuzung. Und lassen Sie es uns in diesen Abschnitt fallen. Die Funktion eines Schnittpunkts soll also in Spalten fallen gelassen werden. Es fügt also Spalten innerhalb von Spalten hinzu. Wie Sie sehen können, ist dies eine Spalte, eine einzelne Spalte, die zwei neue Spalten enthält. Und hier können wir hier einen Typ hinzufügen. Und wie Sie hier sehen können, haben wir eine Iconbox. Wir haben hier eine Bildbox von Elements Kids. Und wir haben eine Bildbox, die standardmäßig mit Elementor geliefert wird. Das, was wir brauchen, ist diese Bildbox nach Elements-Kit. Und es hat diesen Button und einige Texte Beschreibung, Titel und ein Bild. Also fügen wir zuerst ein schönes Bild hinzu. Also gehen wir in unseren Assets-Ordner. Und wir haben diese verschiedenen Bilder. Ich wähle sie alle aus, einschließlich dieses. Das haben wir bereits hochgeladen. Klicken Sie nun auf Öffnen, um alle hochzuladen. Während dieser Upload wählen wir einfach dieses aus und sagen Medien einfügen. Und da haben wir es. Nun lasst uns ändern, was die Überschrift sagt. Während dies noch ausgewählt ist, hat der Körper einen Titel. Also lasst uns das ändern, was heißt es? Landing Page Design oder was auch immer oder welche Kategorie von Klassen Sie haben. Vielleicht ist das in Ordnung, der Ring. Und dann eine kurze Beschreibung dieser Kategorie. Und dann können wir für den Button ändern, was er sagt. Erfahren Sie mehr oder fangen Sie an. Und es kann einen Link bereitstellen dem Personen , die darauf klicken einen bestimmten Ort weitergeleitet werden, der durch den Link angegeben ist. Und wir können der Schaltfläche auch ein Icon hinzufügen, aber das werden wir vorerst nicht hinzufügen. Das nächste, was wir tun möchten, ist das gesamte Bildfeld zu stylen. Beginnend mit dem Bild denke ich, dass es uns gut geht, aber jetzt haben wir den Körper, einen Titel. Gehen wir also hier zum Titel und wir können die Farbe des Titels in diese Farbe ändern. Wir können die Größe auch erhöhen, wenn wir wollen. Klicken Sie auf Topographie, lassen Sie uns die Größe nach unseren Wünschen erhöhen. Ich glaube, ich lasse es dabei. Mir hat gefallen, wie die Textbeschreibung aussieht, also werde ich das nicht anfassen. Reduziere das der Knopf. Ich möchte den Farbhintergrundtyp in ein schwaches Grau ändern . Das bedeutet, dass die Texte dunkel sein sollten. Also Topographie. Warte. Textfarbe sollte sein lass mich es so blau behalten, das dunkelblau. Ich hatte es immer noch in meiner Zwischenablage. Und beim Mauszeiger sollte der Text zu Weiß wechseln. Und der Hintergrund sollte sich auf eine 24 ändern. So. Und jetzt, da es gut genug aussieht, können wir das löschen. Und dann dupliziere dies ein- und zweimal. Aktualisiere das. Und lasst uns die Änderungen überprüfen. Okay, also lasst uns nach unten scrollen. Natürlich werden Sie jetzt feststellen, dass dies eine grundlegende Art ist , es zu präsentieren. Und tatsächlich mögen es manche Leute ohne den Schlagschatten und die abgerundeten Ecken , die wir dabei haben. Aber ich möchte dir zeigen, wie das geht. Sie wissen also, wie es geht, auch wenn Sie es nicht tun werden, auch wenn Sie es so verlassen werden . Wählen wir also die Spalte aus , die diese enthält. Und lasst uns zur Stilgrenze gehen. Geben wir ihm einen Grenzradius von 20 an. So können Sie jetzt den Grenzradius sehen. Und was wir tun müssen, ist Box Shadow zu sagen. Und jetzt siehst du , dass es diese abgerundete Ecke hat. Das nächste, was wir tun werden, ist zu Advanced zu gehen ihm eine Marge von zehn zu geben. Und das schiebt es jetzt vom Rest weg. Und jetzt, da wir damit zufrieden sind, müssen wir es tun, mit der rechten Maustaste zu klicken und zu kopieren. Klicken Sie dann mit der rechten Maustaste auf diese Spalte und fügen Sie diese Kachel auf den Einfügestil ein. Und das wird auch die gleichen Stile wie schlecht haben und dasselbe für diesen Einfügestil tun. Jetzt werden Sie feststellen, dass diese nach dem Hinzufügen des Randes Spalte nach dem Hinzufügen des Randes links nach innen geschoben wurde, aber wir möchten, dass sie bis zum n auf der linken Seite liegt. Und dieser soll bis zum Ende rechts sein. Aber dieser muss auf beiden Seiten nach innen geschoben werden. Dafür können wir diese Verbindung aufbrechen. Und dann links können wir sagen, wir wollen, dass es eine Marge von 0 hat, und jetzt beginnt es von Anfang an. Und für diesen Fall brechen Sie den Link auf der rechten Seite weiter. Wir wollen, dass es eine Marge von 0 hat. Beachten Sie hier, wenn wir das entfernen. Aber jetzt wird dies intakt bleiben, also wird es auf beiden Seiten nach innen geschoben. Und noch eine Sache, wählen wir diese Spalte aus, um diese Deckkraft dieses Schattens zu reduzieren. Gehe in Stil-Rahmen, Box-Schatten. Lass uns hier rein gehen. Und lassen Sie uns die Deckkraft reduzieren, um sie so weniger intensiv zu machen , damit sie einfach subtil ist. Und dann lasst uns die Unschärfegröße auf vielleicht 30s erhöhen, okay? Und jetzt, wo es besser aussieht, machen wir dasselbe für diese anderen beiden. Grenze hinauf zu irgendwo dort. Wählen Sie diesen Typ 30 aus. Und der dritte auch. Grenze 30. Beachten Sie jetzt, dass es so intensiv ist, wir die Deckkraft auf einen beliebigen Ort reduzieren müssen. Aktualisieren Sie das dann und lassen Sie uns eine Vorschau der Änderungen anzeigen. Stimmt's? Scrollen Sie jetzt nach unten, das haben wir. Das nächste, was wir erstellen möchten, ist dieser Abschnitt genau hier mit diesem Akkordeon. Schauen wir uns also an, wie man das in der nächsten Lektion erstellt. Also wir sehen uns in Kürze. 15. Accordion: Und willkommen zurück. Es ist jetzt an der Zeit, diesen Akkordeonabschnitt zu erstellen. Und das hier ist das Akkordeon. Beachten Sie also dass zu einem bestimmten Zeitpunkt nur ein Gegenstand geöffnet ist. Wenn Sie also hier auf ein anderes Element klicken, der vorherige geschlossen und der nächste öffnet sich. Mal sehen, wie wir das unserer Landing Page hinzufügen können. jetzt zu unserem Editor wechseln, müssen wir einen zweispaltigen Abschnitt hinzufügen. Wie Sie hier sehen können, haben wir eine Bildspalte und eine Textblockspalte. Gehen Sie also hier rein wählen Sie einen zweispaltigen Abschnitt aus. Dann lasst uns hier oben einen Spielraum geben. Und ich möchte ihm eine Marge von vielleicht 100 geben. Wenn Sie also diesen Abschnitt „Erweitert“ auswählen, brechen Sie diesen Link 100 auf. Und jetzt haben wir einen schönen Abstand zwischen den beiden Abschnitten. Hier möchte ich ein Bild hinzufügen. Und obwohl das noch ausgewählt ist, wählen wir ein Bild aus, das dort angezeigt werden soll. Wählen wir das aus und legen Sie Medien ein. Und hier müssen wir einige Texte hinzufügen, bevor wir das Akkordeon hinzufügen. Und eine Sache, an die ich mich gerade erinnert habe, ist, dass wir nicht angegeben haben , um welche Überschriften es sich handelt. Also ja, das ist ein H2. Lass es uns als H2 belassen. Dann sollten sie ein H3 sein, der zum Inhalt geht. Alter drei Jahre. Und wie Sie sehen können, haben wir verschiedene Überschriftenstufen. Sie können weitermachen und Google mehr darüber lesen, was das sind und wie Sie sie am besten oder besser einsetzen können Sie können meine SEO-Klasse direkt hier auf Skillshare ansehen und lernen, wie man mit den Überschriften auf arbeitet Ihre Landing Pages für eine bessere Suchmaschinenoptimierung. Sieh dir mein Profil für diesen Kurs an. Es ist nur 60 Minuten lang. Jetzt können wir hier neue Überschriften erstellen . So. Oder wie Sie hier bemerken, handelt es sich um dieselben Überschriften auf der gesamten Website wiederholt werden. Was wir also tun können, ist diese beiden im Grunde zu duplizieren. Ich dupliziere das und ziehe es. Und wenn Sie das Ende der Seite ziehen und erreicht haben und es nicht mehr scrollt. Während du immer noch die Maustaste gedrückt hältst. Scrollen Sie mit dem Mausrad und lassen Sie es dann fallen, wenn die blaue Anzeige erscheint. Lasst uns wieder hier rein gehen. Dupliziere das Alter von drei Jahren. Ziehen Sie es, während Sie es immer noch gedrückt halten. Scrollen Sie mit dem Mausrad und lassen Sie es dort runter fallen. Während dies noch ausgewählt ist, richten wir es nach links aus und tun dasselbe dafür. Als Nächstes wählen wir dieses Symbol aus und ziehen Sie ihn in einem Texteditor. Und standardmäßig hat es einen Platzhaltertext. Im Moment dupliziere ich diese Texte nur, weil ich davon ausgehe Sie Ihren eigenen Text eingeben, wenn Sie diese Zielseite für eine echte Website erstellen, was ich hoffe, dass Sie es sind. Jetzt denke ich, dass das genug für mich ist. Lasst uns das aktualisieren. Klicken wir nun auf dieses Symbol um anzuzeigen, dass die Elemente mehr wünschen. Und im Such-Widget tippe ich Akkordeon ein. Und Autofill wird die verschiedenen Arten von Akkordeons aufzeigen , die wir hier haben. Sie werden also feststellen, dass wir drei Akkordeons haben. Eine, die standardmäßig mit Elementor geliefert wird, einer, der durch den Partner-Login eingebracht wird. Dies ist ein Bild-Akkordeon und wir haben ein Element Key Akkordeon. Dies ist der, den wir brauchen. Ich ziehe es mit Drag & Drop dorthin, wenn der blaue Indikator erscheint. Und jetzt sind wir bereit , es zu bearbeiten. Während es noch ausgewählt ist, können wir reingehen. Die erste Option hier unter Inhalt ist Akkordeon. Und dies sind die drei, die bereits mit Text oder Inhalt vorbefüllt sind . Wenn Sie also auf dieses klicken, wird es erweitert. Klicken wir also auf diesen , um es zu erweitern. Und jetzt können Sie dort eingeben, was Sie wollen , und es wird sich in Echtzeit ändern . Und wenn Sie die Überschrift ändern möchten, ändern Sie natürlich den Titel hier oben. Okay, und es hat sich in Echtzeit geändert. Wie unterrichte ich im Titel dieses Akkordeons? Dann können wir das zusammenbrechen. Mach das Gleiche dafür. Wie alt ist die Freiheitsstatue? Und da haben wir es. Und wenn wir darauf klicken, schließt sich der andere automatisch selbst. Also können wir diesen Text auch ändern. Das ist also ziemlich einfach. Eine andere Sache, die Sie vielleicht wissen möchten , ist, wie füge ich entsprechend hinzu? Wenn wir das also zusammenbrechen, wie füge ich mehr hinzu? Klicken Sie hier einfach auf das Symbol „ Duplizieren“ Und Sie können beliebig oft duplizieren. Und sie werden alle hier erscheinen. Stellen Sie einfach sicher, dass Sie den gesamten Inhalt in jedem einzelnen von ihnen ändern . Das nächste, was wir tun wollen, ist, dass wir diese Icons vielleicht ändern möchten. Wenn es aktiv ist, wird ein Pfeil nach oben angezeigt und wenn es geschlossen ist, wird ein Dropdown-Pfeil angezeigt. Sie können diese Symbole also ändern, indem Sie dort klicken. Sie öffnen all diese Icons und Sie können wählen, was Sie möchten. Ich lasse sie bei der Standardeinstellung. Und jetzt lasst uns in diesen Stil eingehen. Wenn wir diesen Titel zusammenbrechen, haben wir natürlich vier verschiedene Optionen. Der Titel und die Beschreibung, dieser Text hier, der Rahmen und das Symbol. So können wir diese zum Beispiel ändern , lassen Sie es uns in ein Blau ändern. Und wenn es geöffnet ist, können wir es ändern damit dies jetzt geöffnet ist, diese Farbe Orange. Und wenn es geschlossen ist, ist es so blau. Du kannst es in jeder Farbe machen. Wenn wir also öffnen, wird das jetzt diese Farbe. Aktualisieren wir das und sehen wir uns die Änderungen an. Termine, sehen Sie eine Vorschau der Änderungen an. Und da sind wir los. also nach unten scrollen, sieht unser Akkordeon großartig aus und es funktioniert einwandfrei. Das nächste, was ich tun möchte, ist hier an diesem Schalter zu arbeiten. Mal sehen, wie das geht in der nächsten Lektion. Also wir sehen uns in Kürze. 16. Zählerabschnitt: Hey da, willkommen zurück. Jetzt, da wir den Akkordeonabschnitt erstellt haben, ist es an der Zeit, den Zählerabschnitt zu erstellen. Wenn ich hier auf unsere Referenzseite gehe, scrolle ich nach unten. Zuallererst habe ich die Seite neu geladen, damit Sie die Animationen sehen können. Denken Sie daran, dass wir diese Animationen vor Ende des Unterrichts machen werden. Also mach dir keine Sorgen, ich wollte dir nur zeigen, wie der Zähler reagiert und so macht es. erneut zu unserem Editor springen, fügen wir einen einzelnen Spaltenabschnitt hinzu. Und natürlich, wie immer, während es noch ausgewählt ist, gehen Sie nach fortgeschritten und wir müssen oben eine Marge hinzufügen. Also mach das kaputt und lass uns ein 100 geben. Und jetzt haben wir wieder diesen schönen Abstand. Das nächste, was wir tun wollen, ist ihm eine schöne Hintergrundfarbe zu geben . Und ich hatte diesem eine Orange gegeben. Und die Partikel dahinter waren eine dunkle Orange, oder man kann es braun nennen. Also lasst uns das machen. Während dies noch ausgewählt ist, gehen Sie zu Stilhintergrundfarbe. Wir verwenden den Klassiker 1524. Lasst uns das aktualisieren. Und jetzt, wenn die Hintergrundfarbe eingestellt ist, fügen wir die Partikel hinzu. Gehe zu PAF, Pfadteilchen. Schalten wir sie ein. Und lasst uns vielleicht etwas wie einhunderteinhundert wählen . Und hier. Ich tippe F 1524 aber dann ziehe ich das nach unten, um es so etwas dunkler zu machen ein, aber dann ziehe ich das nach unten, um es so etwas dunkler zu machen, nur damit sie etwas dunkler sind als die F 1524. Dann wähle ich dies aus, kopiere es und ändere dann auch die Farbe in dieselbe Farbe. Also füge es ein, und jetzt haben sie beide die gleiche Farbe. Wir können die Geschwindigkeit auch hier für die Geschwindigkeit der Partikel reduzieren . Ich mag es, dass es abstoßend ist. Aber Sie können hier jede andere Option auswählen, die Sie möchten. Und ich kann hier Polygon wählen. Und lasst uns das aktualisieren. Und bevor wir eine Vorschau der Änderungen anzeigen, fügen wir eine Kreuzung mit vier Spalten hinzu. Klicken Sie also auf dieses Symbol an ihrer Kreuzung heraus. Lass es uns da reinlegen. Vorerst. Natürlich werden standardmäßig zwei Spalten gelöscht. In dieser ersten Spalte. Lass uns einen Zähler hinzufügen. Also klicke das Plus dort und gib hier den Zähler ein. Ziehen Sie es hier rein und legen Sie es in der ersten Spalte dort ab. Das erste, was wir tun müssen, ist, die Zahlen zu ändern. Abhängig davon, wie viele, je nachdem, was das ist. Zum Beispiel, wenn Studierende eingeschrieben sind. Wenn Sie also vielleicht 1200 Schüler haben oder mehr als 1200 Schüler haben, aber innerhalb dieses Bereichs können Sie ein Plus, C-Gel, 100 plus hinzufügen . Und jetzt lasst uns weitermachen und die Farben dieser Statistiken ändern . Lassen Sie uns die Farbe auf Weiß für die Nummer und den Titel ändern . Es ändert es auch in Weiß. Und Sie werden feststellen, dass die Schriftarten standardmäßig Montserrat sind, weil wir Montserrat auf der globalen Schrift angewendet haben. Und jetzt, da wir mit diesem Zähler zufrieden sind, müssen wir ihn nur entfernen und dann duplizieren. Wir haben bereits etwas Ähnliches gemacht, und das ist das Gute an Elementor. Also los geht's. Wir haben vier Zähler und wir können jeden einzeln bearbeiten. Bevor wir das tun, wählen wir den Abschnitt selbst aus. Weil wir diese Grenze vom Inhalt trennen müssen , da der Inhalt zu nahe an der Grenze liegt. also den Hauptabschnitt auswählen und dann zum erweiterten Auffüllen wechseln , entfernen Sie diesen Link. Wir können die obere Polsterung auf etwa 50 erhöhen. Und auch für die unteren 50. Aktualisiere das. In. Lassen Sie uns nun eine Vorschau der Änderungen anzeigen. Scrollen wir nach unten. Da sind wir los. Sehr nett. Jetzt geht es bei jeder dieser Statistiken um etwas anderes. Das könnte also sein, was haben wir hier? Jahrelange Erfahrung, Abschlussrate des Kurses. Wir haben also auch Prozentsätze und all das. kannst du also schon erraten. Um einen Prozentsatz hinzuzufügen, müssen Sie ihn nur zum Suffix hinzufügen. Und man kann sagen, vielleicht 8080 Prozent. Rabatt, Rabatt, dann 100% Zufriedenheitsgarantie. Und das letzte, was auch immer du machen willst. Sagen wir also 700 wiederkehrende Schüler. Vielleicht haben ihnen deine Kurse so gut gefallen , dass sie zurückkamen. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen wir nach unten. Und so geht es. Großartig. Das nächste, was wir tun möchten, ist natürlich, diesen Abschnitt zu erstellen, der diesem Abschnitt ziemlich ähnlich ist. Schauen wir uns also in der nächsten Lektion an , wie das geht. 17. KURSPROJEKT: Am Ende des Kurses haben Sie die Möglichkeit, das Gelernte zu verstärken, indem Sie selbst eine Webseite von Grund auf neu erstellen. Und hier ist der Kontext des Projekts. Ein Besitzer eines Online-Bekleidungsgeschäfts, nennen wir ihn John. In Ihrer Nachbarschaft möchten Sie eine Zielseite für die neue Produktlinie erstellen . Sie haben also neue Kleidungsprodukte, die sie verkaufen möchten. Und sie möchten eine Zielseite für diese spezifische neue Produktlinie erstellen . Sie haben sich wegen Ihres großartigen Webdesign-Rufs in der Community an Sie gewandt . Jemand hat ihnen gesagt, dass du sehr gut darin bist, was du tust. Jetzt wird die Website, die sie betreiben, mit Elementor erstellt, sodass sie jemanden brauchen, der Elementor benutzt. Erstellen Sie also eine schöne Landingpage, die die Leute, die diese Zielseite besuchen, in Käufer umwandelt . John hat Ihnen alle Assets zur Verfügung gestellt, die Sie auf dieser Zielseite hinzufügen müssen. Und mit Vermögenswerten meine ich Bilder. Um dies zu erreichen, Sie zunächst den Projektassets-Ordner in der folgenden Beschreibung herunter und erstellen Sie diese Images, um eine Website zu erstellen. Denken Sie daran, einen klebrigen Header zu erstellen, damit Benutzer auf der Website navigieren können, während sie nach unten scrollen. Stellen Sie sicher, dass Sie einen aufmerksamkeitsstarken Heldenbereich haben , der eine schöne auffällige H1-Aussage hat, die zusammenfasst, worum es auf der Seite geht , und werden Sie so kreativ, wie Sie möchten, wenn es um die Körperbereich, den der Rest der Landingpage, abgesehen vom Heldenbereich und dem Fußzeilenbereich, mit den verschiedenen elementaren Elementen herumspielt, mit den verschiedenen elementaren Elementen herumspielt die wir in der Klasse nicht berührt haben , weil Sie es vielleicht bemerkt haben, wir haben uns nicht jedes einzelne Element angeschaut, das Element zu bieten hat, während wir die Seite erstellen. Denken Sie auch daran, einige Bewegungseffekte, die verschiedenen Elemente Ihrer Landingpage hinzuzufügen die verschiedenen Elemente Ihrer Landingpage und die Webseite ansprechend zu gestalten. Lassen Sie es auf verschiedenen Gerätegrößen gut aussehen. Sobald Sie mit Ihrer Zielseite fertig sind, machen Sie einen ganzseitigen Screenshot davon mit einer Browsererweiterung wie Go full page und laden Sie ihn in die Projektgalerie hoch. Ich werfe einen Blick auf alle deine Zielseiten-Screenshots und gebe Feedback. Und das gibt Ihnen auch eine gute Möglichkeit, das Gelernte zu präsentieren und Feedback von anderen Schülern zu erhalten. Sie zunächst Laden Sie zunächst den Punkt-Zip-Ordner für Projekt-Assets im Beschreibungsbereich unten herunter. Viel Spaß mit dem Projekt. 18. Ausgewählte Kurse: Jetzt ist es an der Zeit, den Abschnitt zu erstellen , der nach dem Zähler kommt, nämlich dieser Abschnitt, der die neuesten Kurse oder die vorgestellten Kurse enthält . Wenn wir also in unseren Editor , müssen wir als Nächstes einen Abschnitt hinzufügen. Da dieser Abschnitt jedoch so ist, ist dieser Abschnitt diesem so ähnlich Warum duplizieren Sie nicht diesen ganzen Abschnitt und passen Sie ihn dann für diesen bestimmten Teil an. Also werden wir den ganzen Abschnitt so duplizieren. Jetzt sind wir da. Ich ziehe das einfach. Und dann fange ich an, mit meinem Mausrad zu scrollen , während ich meine Maustaste gedrückt halte . Und wenn dieser blaue Indikator erscheint, lasse ich ihn einfach dort fallen. Jetzt hat es eine Marge von 50 an der Spitze , weil wir das gesagt haben. Für diesen Teil. Ich möchte dies auf 100 oder vielleicht auf 150 erhöhen. Wählen Sie also den Abschnitt aus und fügen Sie dort einen hinzu. Jetzt haben wir dort 150 Abstände. Dann ändern wir diese, um jetzt einen Kurs auszuwählen. Und jetzt müssen Sie nur noch zu dieser Bildbox kommen. Wählen wir also das und das Bild aus, Sie können es in jedes Bild ändern, das diesen bestimmten Kurs darstellt. Reduzieren Sie das für den Text, änderte den Titel in den Namen des Kurses. Zum Beispiel Einführung in die Mechanik. Und dann natürlich eine kurze Beschreibung. Und dann können sie sofort loslegen. Denken Sie daran, dies sind Kategorien der verschiedenen Kurse. Dies kann also eine Kategorie vier sein, Webdesign und Animation. Das sind also Kategorien hier oben. Aber wenn wir dann hierher kommen, handelt es sich um spezifische Kurse. Und da in diesem Abschnitt vorgestellte Kurse abgehalten werden, können Sie diese Kreuzung duplizieren, sodass Sie ungefähr sechs vorgestellte Kurse auf der Homepage haben. Lasst uns das aktualisieren. Lassen Sie uns dies in etwas wie Modellieren in Blender ändern . Die dritte kann JavaScript-Grundlagen sein . Lasst uns das aktualisieren. Und lasst uns die Änderungen überprüfen. Scrollen Sie also nach unten. Alles klar, also los geht's. Jetzt, da wir mit diesem Abschnitt fertig sind, schauen wir uns an, wie man diesen Lernabschnitt im Selbststudium erstellt . Wir sehen uns also in der nächsten Lektion. 19. Listenbereich: Willkommen zurück. Los geht's wieder. Sie werden feststellen, dass dieser Abschnitt, der Akkordeonbereich, diesem Lernabschnitt im Selbststudium ziemlich ähnlich aussieht . Nur dass wir hier kein Akkordeon haben, haben wir eine Liste. Und genau darauf werden wir uns den nächsten Minuten konzentrieren. Ansonsten ist alles andere gleich. also zu unserem Redakteur springen, Wenn wir also zu unserem Redakteur springen, müssen wir auch diesen Abschnitt duplizieren. Dann ziehe ich es. Sobald wir da sind, fange ich an, mit meinem mittleren Mausrad zu scrollen . Und wenn wir da sind, lass ich es einfach rein. Es enthält alle Einstellungen, einschließlich des Randes an der Spitze. Und jetzt müssen wir dies nur noch tun, dies mit dem Bild auf dieser Seite umzukehren. Dann entferne ich das Akkordeon. Und jetzt bleibt uns dieser nette Text übrig, den wir bearbeiten können. Wir können zwei Fuß in diesem Abschnitt aktualisieren. Also kopiere ich das. Wählen Sie das aus und fügen Sie es dort ein. Kopieren Sie das, wählen Sie das aus und fügen Sie es dort ein. Aktualisiere das. Und jetzt müssen wir zu diesem Symbol gehen. Klicken Sie auf dieses Symbol. Hier. Geben wir List ein. Und wir haben hier eine andere Liste. Wir brauchen nur das normale, nette, das standardmäßig mit Elementor geliefert wird. Lassen Sie es uns dort hineinlegen und es hat ein Symbol und etwas Text. Öffnen wir also den Listenpunkt eins und lassen Sie uns ändern , was dort steht. Also kopiere ich das einfach im Grunde da drin. Und da sind wir los. Ich wiederhole das Gleiche für die beiden. Jetzt werden Sie feststellen, dass es sich um verschiedene Icons handelt , damit wir sie immer ändern können. Dafür wähle ich immer noch ein Häkchen oder einen Jet aus. Also wähle ich das aus. Fügen Sie für den zweiten ein. Check auch nach. Und jetzt haben wir drei Zähne. Aktualisiere das. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen wir nach unten und sehen, was wir haben. Da sind wir los. Ein netter, wunderschöner Abschnitt. Einfach, da nicht viel Zeug. Also lasst uns weitermachen und einen schönen Button direkt unter dem Text hinzufügen . Wie Sie hier sehen können, haben wir einen Aufruf zum Handeln. Dies ist die Zeit, an der wir diesen Button hinzufügen , der sich im Basis-Panel befindet. Ziehen wir also einfach die Schaltfläche direkt unter den Text. Und obwohl es noch aktiv ist, können wir ändern, was es sagt. Also lerne mehr oder fange an. Jetzt ist es unser Aufruf zum Handeln. Es stimmt mit Stil überein. Und natürlich ist der Link da. Wohin auch immer Sie möchten , dass Leute weitergeleitet werden wenn sie auf den Button klicken, das ist hier. Und wenn Sie möchten, dass diese Schaltfläche einen neuen Tab öffnet, können Sie, anstatt Personen von dieser Seite weiterzuleiten, anstatt Personen von dieser Seite weiterzuleiten, immer auf dieses Zahnrad klicken und den Link in einem neuen Fenster öffnen. Dies öffnet einen neuen Tab. Jetzt gehst du in den Stil. Lassen Sie uns diese Polsterung entfernen. Und das unterbricht das Standard-Padding auf der Schaltfläche. Und dann können wir uns selbst setzen. Also links Lasst uns eine 50er geben. Und auf der rechten Seite das Gleiche. Dann oben und unten, 1515. Lass uns links und rechts eine 70 geben. Richtig. Und dann vergrößern wir den Abstand zwischen der Schaltfläche und dem Text in der Liste hier damit wir die Liste selbst auswählen können. Erweiterte Marge, erhöhen Sie dann die Marge unten. Drücken Sie die Taste nach unten, emittiert, reduzieren Sie den Rand oben. Reduzieren Sie diesen Abstand zwischen ihm und dem Textblock hier. Aktualisiere das. Und lassen Sie uns auch die Farbe dieses Buttons ändern. Wählen Sie also diesen Schaltflächenstil aus. Lassen Sie uns beim Schweben zur Farbe gehen und wollen so blau sein. Lassen Sie mich also diesen Textstil auswählen. Kopiere das. Wählen Sie diesen Button Style Button, Hover, Farbe. Lasst es uns da reinfügen. Wenn also jemand darüber schwebt, ändert sich das daran. Und wenn jemand darüber schwebt, können wir auch einstellen, wann es Zylinderschweben ist, die Animation, vielleicht so etwas wie Bob. Und das ist Glühbirne. Lassen Sie uns das aktualisieren und dann eine Vorschau der Änderungen anzeigen. Scrollen Sie also nach unten. Da sind wir los. Sieht genial aus. Also was kommt als Nächstes? Jetzt ist es an der Zeit, an der Testimonial-Abteilung zu arbeiten. Und wie Sie sehen können, hat es auch die Teilchen und einen gräulichen Hintergrund. Mal sehen, wie das geht in der nächsten Lektion. 20. Abschnitt von Testimonials: Willkommen zurück. Jetzt erstellen wir diesen Testimonials-Bereich. Ohne mehr Zeit zu verschwenden, gehen wir zu unserem Redakteur. Und wie Sie vielleicht schon vermutet haben, fügen wir einen einzelnen Spaltenabschnitt hinzu. Das erste, was natürlich ist, es auszuwählen. Und natürlich ist das erste, was zu Advanced Marge geht. Lassen Sie uns einen oberen Rand von 100 geben , um es vom vorherigen Abschnitt zu trennen. Und dann lasst uns damit beginnen, ihm diese Hintergrundfarbe zu geben. Also geh in Stil, Hintergrundtyp, Klassiker. Ich gehe her und dann gebe ich ihm etwas Grau , das fast weiß ist, nicht sehr dunkel. Das gefällt mir. Als Nächstes müssen wir das Pluszeichen hier auswählen. Und Sie werden feststellen, dass wir dieses H2 und H3 haben. Also können wir das einfach duplizieren. Dupliziere das, lass es da rein. Dupliziere das auch. Und lass es direkt unter das Alter von zwei Jahren fallen. Und dann schieben wir es natürlich in die Mitte. Wählen Sie das aus und schieben Sie es in die Mitte. Und jetzt können wir unsere Testimonials direkt unter ihnen hinzufügen. Wenn ich zu diesem Symbol gehe, tippe ich Testimonials ein, die Maulwurf testen. Und das, was wir brauchen, ist dieses Testimonial von IQ Kids Elements, Kinderlicht. Ich ziehe es direkt dort hin, wenn der blaue Indikator erscheint. Und standardmäßig ist dieses bereits ausgewählt. Aber das, was ich mag, ist dieser. Geh weiter und wähle das gewünschte aus. Und standardmäßig zeigt es nur ein Testimonial pro Folie. Und das liegt daran, dass in den Einstellungen die anzuzeigenden Folien auf eins eingestellt sind. Stellen wir es also auf drei Folien ein, um zu scrollen. Natürlich ist das ziemlich einfach. Das bedeutet, dass beim Scrollen nur eine Folie scrollen muss . Wenn Sie mehrere Referenzen haben, können Sie es auf zwei oder drei Referenzen pro Schriftrolle einstellen. Und mach weiter und spiele mit all diesen anderen Einstellungen nicht tief hinein. Wir möchten nur jedes Testimonial mit etwas Inhalt füllen . Schließen wir also die Einstellungen und gehen zum Testimonial. Für Testimonial Nummer eins können Sie dem Kunden einen Namen geben. Also Bezeichnung, Marketingmanager, Koma, vielleicht ist das Unternehmen Glasfenster-Websites Glasfenster-Websites oder so etwas. Was für ein Name gibt es? Und dann haben wir den Testimonial-Review. Also kopiere ich einfach dieses Testimonial hier. Okay, ich bin nicht aktiviert, okay, ich kann das nicht hervorheben, also kopiere ich einfach diesen Text. Kopiere das. Und lasst es uns hier einfügen. Reduzieren wir es ein bisschen. Ja, das gefällt mir. Dann lasst uns wieder zusammenbrechen. Gehe zum zweiten Testimonial. Timothy-Flammen. Sie hat ein Testimonial und fügen wir noch eins hinzu, also werde ich das duplizieren. Und jetzt haben wir zwei Timothy-Flammen. Ich ändere den zweiten. Das ist Update das. Und jetzt haben wir vier Testimonials. Der Grund, warum wir vier anstelle von drei Testimonials haben , ist, dass wir sie auch brauchen, um scrollen zu können. Es scrollt also, weil wir ein zusätzliches Testimonial zeigen müssen. Wenn Sie drei haben, wird es kein Scrollen geben. Als nächstes gehen wir ins Innere des Stils. Und wenn ich das Layout zusammenfalle, haben wir hier mehrere Einstellungen, an denen wir arbeiten können. Fangen wir also mit einer Bewertung an. Wir können die Farbe ändern, um zu unserem Farbschema zu passen. Dann können wir das auch reduzieren und das Zitatsymbol ändern. Im Moment ist es also so blau. macht mir nichts aus, wie es aussieht, also kein Problem damit. Also werde ich das nicht anfassen. Dann haben wir das Layout. Gehen wir zum Layout und zum Grenzradius, sagen wir, lassen Sie es uns bei 20 halten, damit es eine abgerundete Ecke hat. So. Das Layout wurde reduziert. Und ich glaube, es gefällt mir, wie es bisher aussieht. Das nächste, was wir tun wollen, ist, in das Inhalts-Testimonial zu gehen . Und für jedes Testimonial müssen wir ein Bild hinzufügen. Also habe ich den Bennett Daimler-Client-Avatar geöffnet. Und wir gehen in unseren Assets-Ordner. Ich hatte schon ein paar Bilder von den Jungs vorbereitet. Fangen wir also mit Bennett an. So. Lasst uns das zusammenbrechen. Es öffnet Timothy-Flammen. Lasst uns das schließen. Wir haben Barbara das zusammengebrochen und wir lassen Alexandra das aktualisieren. Lassen Sie uns also eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Da sind wir los. Unser Testimonial funktioniert, aber jetzt merke, dass wir hier oben keine Polsterung haben und natürlich hier unten. Und wir haben die Partikel auch nicht. Lasst uns das klären. Wählen Sie also den Abschnitt selbst aus. Denn zuerst beginne mit der Polsterung. Das mache ich kaputt. Und dann brauchen wir oben eine 50-Polsterung. Unten brauchen wir 50. Also heutzutage diese schönen Abstände wie dieser. Und dann lass uns ein paar Partikel hinzufügen. Also lass uns das einschalten. Und wir brauchen vielleicht sagen wir 90. Und dann wollen wir für die Partikelfarbe etwas Grau geben , das dunkler als der Hintergrund ist, damit es sichtbar ist. Und lasst uns das Grau kopieren. Kopiere das. Klicken Sie irgendwo dort hin. Kleben wir es hier rein. Reduziere die Geschwindigkeit auf vier, aber es liegt an dir. Dann lasst uns das aktualisieren. Über-Effekt. Aktualisieren Sie das und lassen Sie uns eine Vorschau der Änderungen anzeigen, die nach unten scrollen und sehen, was wir haben. Ja. Jetzt sieht es also viel besser aus. Wir können diese Partikel ein bisschen dunkler machen. Sie scheinen zu schreien. Wenn ich hier rein gehe, ziehe ich das ein wenig nach oben, um es ohnmächtig zu machen. Kopiere das. Füge es da rein. Aktualisieren Sie dort. Lassen Sie uns noch einmal eine Vorschau der Änderungen anzeigen. Scrollen Sie ganz nach unten nach unten. Jetzt sehen sie also viel besser aus. Sie sind nicht zu dunkel. Und so erstellt man den Testimonial-Bereich. Lassen Sie uns als Nächstes sehen, wie Sie den Call-to-Action-Abschnitt dem Anmeldeformular erstellen, bevor wir den Ordner erstellen. Wir sehen uns also in der nächsten Lektion. 21. Abschnitt für das Action: Wir sind fast fertig mit dem Inhalt der Landing Page. Wir haben jetzt nur den Call-to-Aktionsbereich , der ein Formular und die Fußzeile enthält. Lassen Sie uns also fortfahren und diesen Abschnitt erstellen. also zu unserem Editor springen, müssen wir natürlich einen zweispaltigen Abschnitt hinzufügen. Und lassen Sie uns eine Top-Marge von etwa 100100 und eine untere Marge von 100 auch geben. Und das liegt daran, dass wir, wie Sie hier sehen, sobald wir mit diesem Abschnitt fertig sind, einen Abstand zwischen dem Abschnitt und der Fußzeile benötigen . Und denken Sie daran, dass wir das Essen separat kreieren, genau wie wir es mit dem Header getan haben. Also mach ich weiter und aktualisiere das. Und genau hier können wir hinzufügen, dass wir das duplizieren können. Also ziehe ich das in diese Spalte. Und dann lassen Sie uns das einfach kopieren. Also klick das. Und dann füge ich den Text ein. Richten Sie es so nach links aus. Also hier drin, lasst uns einen kurzen Code hinzufügen. also auf dieses Plus klicken, wird dieser Bereich angezeigt und wir können Kurzcode eingeben. nur einen kurzen Filter eingeben, wird diese Option angezeigt und wir können sie dort ablegen. Was wir jetzt tun müssen, ist in unserem Dashboard zum Backend zu gehen und ein Formular zu erstellen. Und dann wird das Formular einen kurzen Code haben, einen winzigen Code, in den wir kommen können, fügen Sie hier ein. Und das Formular wird direkt hier in diesem Abschnitt angezeigt. Gehen wir also zurück in unser Dashboard. Gehen wir zu Plugins und Add New, da wir noch kein Formular-Plugin installiert haben, damit wir fortfahren und installieren können. Mein bevorzugtes Formular-Plugin heißt Formulator. Es hat einfach alles was ich brauche einfach zu bedienen. Also gebe ich weiter und tippe den Formulierer ein. Und es ist von WP MU Dev mit 300 Tausend aktiven Installationen in 948 Fünf-Sterne-Bewertungen. Also installiere ich es jetzt. Es ist ein sehr großartiges Plugin, das ich gerne verwende, da viele seiner kostenlosen Funktionen Prämien für die meisten anderen Formular-Plug-Ins sind . Es bietet also kostenlos Premium-Funktionen. Stimmt's? Also lasst uns weitermachen und aktivieren. Und da sind wir los. Es ist jetzt installiert. Und du findest es fast am Ende dieses Menüs hier. Also werde ich Wasser und Formen für Limiter formen. Klicken Sie für eine Minute oder so können wir im Dashboard auf die Zielseite gehen . Okay, so sieht es also aus. Wir haben die Möglichkeit, ein Formular zu erstellen, jede Art von Formular aus einer unserer vorgefertigten Vorlagen zu erstellen oder meins von Grund auf neu zu erstellen. Also erstelle ich und wir haben bereits Formulare erstellt. Und wir möchten ein Newsletter-Anmeldeformular erstellen. Also wähle ich das aus und fahre fort. Dann gebe ich ihm einen Namen, melde mich an und erstelle es. Und los geht's. Standardmäßig wird der Vornamen und die E-Mail-Adresse, dann die Schaltfläche „Abonnieren“ vorausgefüllt Vornamen und die E-Mail-Adresse, dann die , und wir können eine Vorschau anzeigen. Also der Vorname, E-Mail-Adresse und das Abonnieren. Ich schließe das und veröffentliche es. Jetzt haben wir diesen Kurzcode. Denken Sie daran, dass ich den Kurzcode erwähnt habe. Jetzt können wir dies kopieren, indem wir hier auf dieses Symbol klicken. Jetzt wurde die Verknüpfung erfolgreich kopiert. Oder wenn ich das schließe, kannst du zu diesem Zahnrad gehen und Kurzcode kopieren und wir erhalten immer noch die gleiche Nachricht. Und wenn dieser kurze Code kopiert wurde, können Sie hier zu unserer Seite zurückkehren und ihn hier einfügen. Wenn ich diese Aktualisierungsänderungen auf die Seite übernehme , klicken Sie auf Aktualisieren. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Und da sind wir los. Ein nettes Anmeldeformular, das einen Aufruf zum Handeln hat. Was wir also tun müssen, ist zunächst die Farbe dieser Schaltfläche so zu ändern die restlichen Schaltflächen hier auf der Website reimt . Verwandeln wir es also in Orange. Gehen wir zurück in unser Dashboard, in den Formulierer, gehen wir in das Erscheinungsbild dieses Formulars ein. Und lassen Sie uns diese Grenzen zunächst entfernen wählen Sie die flache Option. Es gibt andere Möglichkeiten hier, aber ich mag flach. Und dann lass uns zu Farben gehen und Kostüm auswählen. Wir möchten die Standardfarben nicht verwenden. Und für die Schaltfläche „Senden“ wählen Sie aus. Klicken Sie dort auf diesen Button. Und geben wir F 1524 ein. Und es dupliziert sich selbst. Ich weiß nicht warum f h n gleich. Jep. Und dann beim Schweben wollen wir, dass es vielleicht so dunkelblau ist. Also wollte ich diese Stilkopie wieder auswählen. Dann gehst du hier, im Grunde da drin. Wenn wir es jetzt in der Vorschau anzeigen , dann schließe das so. Und wenn es im Fokus ist dieselbe dunkelblaue Farbe haben möchte, habe ich normalerweise die gleiche Fokusfarbe oder aktive Farbe wie die Schwebefarbe. Okay, also lasst uns die Änderungen aktualisieren. Gehen wir zurück zu unserer Seite. Wählen Sie dieses Formular aus. Klicken Sie auf Anwenden. Alles klar, also lasst uns das Formular selbst nach unten scrollen. Klicken wir also auf die Vorschau der Änderungen. Scrollen Sie nach unten. Und da sind wir los. Beim Schweben isst das Dunkelblau. Eine andere Sache, die Sie vielleicht tun möchten, ist hier Felder hinzuzufügen oder zu entfernen. Das ist also kein vierminütiger Kurs. Es gibt viele Tutorials auf YouTube, wie Sie dieses spezielle Plugin zum Erstellen von Formularen verwenden können. jedoch wieder in Felder gehen Wenn Sie jedoch wieder in Felder gehen und den Vornamen der Person nicht auswählen möchten, können Sie diesen löschen. Und jetzt bleibt Ihnen nur noch das E-Mail-Adressfeld übrig. Lasst uns das aktualisieren. Und lass uns ins Frontend gehen. Wählen Sie das Formular aus und wenden Sie die Änderungen erneut an. Okay, also lasst uns eine Vorschau der Änderungen anzeigen. Scrollen Sie also nach unten. Und da sind wir los. Jetzt, da wir mit diesem Call-to-Aktionsabschnitt fertig sind, schauen wir uns an, wie der Ordner erstellt wird. Im nächsten Abschnitt sehen wir uns in Kürze. 22. Helfen Sie mir Elementor an 10.000 Kursteilnehmer:innen: 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! 23. Erstelle die Fußzeile: Es ist jetzt an der Zeit, die Fußzeile zu erstellen. Bevor wir fortfahren, fügen wir die Animationen den verschiedenen Elementen auf der Website hinzu und machen den Header auch klebrig. Lassen Sie uns also zuerst einen Ordner erstellen. Und natürlich, wie ich ein bisschen zuvor erwähnt habe, wird das Foto separat auf die gleiche Weise erstellen , wie wir den Kopf erstellt haben. Also klicke ich auf dieses Burger-Menü und Beenden Sie das Dashboard, da wir mit dem Inhalt des Textes fertig sind . Ich fahre wieder aus. Gehen wir jetzt zu Elementen. Behalten Sie die Kopf-, Fußzeile oder Fahrt bei. Lass uns einfach weitermachen und „Neu hinzufügen“ sagen. Hier drin. Ich gebe ihm einen Namensordner. Und dann ist der Typ ein Ordner. Sie sollten auf der gesamten Website verfügbar sein und sie sollte aktiv sein. Speichern wir also die Änderungen. Los geht's. Dann lasst uns bearbeiten. Inhalte bearbeiten werden an das Front-End weitergeleitet , wo wir sie jetzt entwerfen können. Also hier sind wir. Jetzt in dieser Lektion möchte ich Ihnen zeigen, wie Sie Element-Kit-Vorlagen verwenden. Während des gesamten Unterrichts haben Sie vielleicht bemerkt, dass ich dieses Symbol genau hier benutzt habe. Aber was machen diese anderen Icons? Dies ist das Standard-Elementor-Vorlagensymbol. Wenn Sie darauf klicken, werden Sie zu Vorlagen weitergeleitet , die von Elementor erstellt wurden. Und Sie können auch Zugriff auf Ihre eigenen Vorlagen haben, wenn Sie welche hochgeladen haben. Wir haben auch Blöcke, Blöcke, mit denen Sie die verschiedenen Teile Ihrer Website erstellen können. Und dieser hier ist vom Elements-Kit. Das ist also der, an dem wir interessiert sind. Und ich möchte Ihnen zeigen, wie Sie planen, wie Sie Zeit sparen können, indem verschiedene Vorlagen verwenden, die von einigen dieser Plugins bereitgestellt werden. Wie Sie sehen können, habe ich es geöffnet und bin direkt zu Abschnitten gegangen. Und hier haben wir Fußzeilenvorlagen, Kopfabschnitte. Wir haben Call-to-Action-Abschnitte, Bild-Akkordeon für Schönheitsshops. Viele Vorlagen, die Sie kostenlos auf Ihre Seite importieren können . Das ist also diejenige, die ich importieren möchte, also klicke ich einfach auf Einfügen. Und da sind wir los. Ein schönes schönes Foto bereits für uns erstellt wurde. Ich möchte das hineinziehen, lass es mich sehen. Ich möchte diese hineinziehen. Das möchte ich loswerden. Also bleiben wir damit übrig. Und wenn ich den Abschnitt selbst auswähle und nach fortgeschritten gehe, wirst du feststellen, dass wir 400 Top-Marge haben. Also möchte ich das loswerden, denn wenn wir das bei 400 verlassen, wenn es an diesem Punkt kommt, nach diesem Aufruf zum Handeln, bevor wir weiter dorthin kommen, haben wir einen lächerlich riesigen Platz was wir nicht brauchen, weil wir bereits eine untere Marge von 100 hinzugefügt diesem Aufruf zum Handeln bereits eine untere Marge von 100 hinzugefügt haben. Jetzt, da das eingestellt ist, lassen Sie uns dieses Logo durch unser eigenes ersetzen. Also wähle ich das aus. Und als Sie die Vorlage importiert haben , wurden einige Standardplatzhalterbilder wie diese hinzugefügt. Seien Sie also nicht ratlos und fragen Sie sich, welche VCs. Also möchte ich mein Logo auswählen und Medien einfügen, und los geht's. Sehr nett. Sie können diesen Text auch auf das aktualisieren , was Sie sagen wollten. Und wir können weitermachen und es stylen. Also Topographie, ändere sie in Montserrat. Das ist bereits Montserrat und das sind nützliche Links. Sie können sie in das ändern, was sie sagen sollen. Das nächste, was ich tun möchte, ist die Farbe dieses Essens zu ändern , diesen Hintergrund. also den Abschnitt selbst auswähle, tippe ich auf diesen Ort und kopiere das Marineblau. Und ich gehe hier rein. Während dies immer noch ein ausgewählter Stilhintergrund ist, fügen Sie diesen dort ein und aktualisieren Sie ihn. Ich habe auch das Gefühl, dass ich das direkt dorthin ziehen sollte. Um es auszugleichen. Aktualisiere das. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Okay, jetzt wirst du feststellen, dass es sich um ein Abonnement handelt. Jetzt abonnieren Sie sich heute, rufen Sie zum Handeln auf. Das heißt also, dass wir hier ein Formular brauchen. Und wir können tatsächlich einfach das gleiche Formular verwenden, das wir erstellt hatten. Also kopiere ich diesen Kurzcode. Und dann gehen wir wieder hier rein, fügen wir einen kurzen Code hinzu. Lassen Sie es direkt darunter fallen und fügen wir es dann dort ein. Aktualisiert. Lassen Sie uns die Änderungen überprüfen oder fahren Sie so. Jetzt, da dies größer geworden ist als das, denke ich, dass wir schlechte soziale Ikonen nehmen sollten. Ich ziehe sie da rein. Und ich werde hier den oberen Rand dieses Textes erhöhen , um ihm oben etwas Platz zum Atmen zu geben. Dann lasst uns eine Vorschau der Änderungen anzeigen. Und da sind wir los. So erstellen Sie also einen Ordner. Sie können mit allem anderen herumspielen, mit all dem Wissen, das Sie bisher gewonnen haben, wird dies keine allzu schwierige Aufgabe sein. Fakt, das ist eine Herausforderung für dich. Erfahren Sie, wie Sie es weiter anpassen können. Jetzt möchten wir sehen, wie die Seite vollständig zusammen mit dem Foto aussieht. Also möchte ich in die Dashboard-Seiten gehen. Und dann möchte ich auf Home ansehen klicken. So können wir es uns von oben nach unten ansehen von oben nach unten scrollen. Dort gehen wir den ganzen Weg zur Fußzeile. Das nächste, was wir jetzt machen wollen , ist , dass der Header nicht klebrig ist und diese verschiedenen Elemente nicht animiert sind. Wir müssen unseren Elementen einige Bewegungseffekte hinzufügen. Machen wir das in der nächsten Lektion. Bevor wir fortfahren und die gesamte Landing Page auf verschiedenen Geräten ansprechen. Also wir sehen uns in Kürze. 24. Sticky: Und willkommen zurück. In dieser Lektion möchten wir den Header klebrig machen. Wenn ich also anfange zu scrollen, werden Sie feststellen, dass er gerade zusammen mit dem Rest des Inhalts verschwindet, was wir tun wollen, ist sicherzustellen, dass er nicht verschwindet. Wie machen wir das? Gehen wir in das Dashboard und wir müssen die Kopfzeile im Element-Kit, Kopfzeile, bearbeiten . Also lasst uns das öffnen. Jetzt haben wir die Fußzeile und die Kopfzeile. Gehen wir natürlich mit Elementor in die Kopfzeile bearbeiten, und ich klicke mit der rechten Maustaste auf den Link in einem neuen Tab öffnen , damit wir ihn auf einer neuen Registerkarte bearbeiten können. Ich wechsle zu diesem Tab. Und hier sind wir. Natürlich ist der Header jetzt editierbar. Und denken Sie daran, dass eines der Plugins, die wir installiert haben , Tiki Header-Effekte waren. Wenn ich einfach schnell zum Dashboard springen könnte und in Plugins gehe. Wir haben Sticky-Header-Effekte für Elementor installiert , während wir Elementor installiert haben. Dies ist also die Zeit , dieses Plug-In zu verwenden. Und alles, was wir tun müssen, ist die Kopfzeile auszuwählen und in den erweiterten Bereich zu gehen und die Option Sticky Header-Effekte direkt unter erweitert zu finden . Lassen Sie uns diese Möglichkeit also erweitern. Und jetzt ist der Header schon klebrig. Es ist nur so, dass wir diese Seite nicht scrollen können , um sie in Aktion zu sehen, aber das werden wir in Kürze sehen. Also speichere ich das zuerst, bevor ich irgendwelche Änderungen vornehme . Und jetzt, da es gespeichert ist, möchte ich in das Dashboard gehen und in die Seiten gehen. Dies ist unsere Landing Page. Klicken Sie also mit der rechten Maustaste auf Link in einem neuen Tab öffnen, damit wir die Seite in einem neuen Tab betrachten und scrollen können die Seite in einem neuen Tab betrachten und , um zu sehen, ob die Kopfzeile jetzt klebrig ist. Okay, also lasst uns jetzt scrollen. Und da sind wir los. Der Header ist jetzt klebrig, aber jetzt wirst du feststellen, dass er ein bisschen groß ist. Mit anderen Worten, es nimmt viel Platz ein, während wir scrollen, und wir brauchen diesen ganzen Platz nicht wirklich. Wie können wir das lösen? Gehst du wieder in unseren Redakteur? Nun, das ist immer noch ausgewählt und wir befinden uns immer noch in klebrigen Header-Effekten. Rufen wir nach unten an und suchen nach Shrink-Header. Also aktiviere das. Und machen wir es 50 Prozent. Und lassen Sie uns auch das Logo verkleinern. Machen wir es auch 50 Prozent. Das bedeutet also, dass das Logo 50 Prozent betragen wird , die ursprüngliche Größe. Und die Kopfhöhe wird ebenfalls 50 Prozent so groß sein wie das Original. Lasst uns das also aktualisieren. Und lass uns auf unsere Seite gehen und lass es mich neu laden. Rechtsklick also neu laden. Also gut, also lass es uns jetzt sehen. In Aktion. Ich fange an zu scrollen. Gewicht. Wir müssen die Marge für den Header reduzieren. Also lasst uns wieder hier rein gehen. Wählen wir das Menü selbst aus. Klicken Sie auf eine beliebige Stelle in dieses blaue Element. Das ist also erweitert ausgewählt. Es geht innerhalb der Marge. Reduzieren wir den unteren Rand auf vielleicht 20 und die obere Marge auf negativ 20. Das ist auch die Logogröße zu reduzieren. Ich schaue es einfach an, vielleicht irgendwo da. Dann lasst uns das aktualisieren. Okay, also lasst uns wieder in diese Seite gehen und die Seite erneut laden. Scrollen Sie jetzt. Ja, das ist also eine schöne Höhe. Und es sieht aus, ich denke es sieht wunderschön aus. So macht man den Kopf klebrig. In der nächsten Lektion sehen wir uns an, wie der Header reagiert. Denn wenn wir jetzt Strg Umschalttaste drücken, um in die Entwicklertools zu gehen Control Shift I, klicken Sie dann auf dieses Umschaltsymbol für den Responsive-Modus und klicken Sie auf dieses Dropdown-Menü, um ein Gerät wie das Pixel fünf, Sie werden feststellen, dass der Header gerade nicht reagiert. Mit anderen Worten, es sieht auf mobilen Geräten, auf Smartphones nicht gut aus . In der nächsten Lektion sehen wir uns an, wie dieser Header auf Smartphones gut aussieht. Wir sehen uns in Kürze. 25. Reaktionsfreudige Kopfzeile: Willkommen zurück. Zeit, diesen Header auf Smartphones besser aussehen zu lassen. Wenn ich also zu unserem Editor zurückkehre, klicke ich hier auf dieses Symbol für den Reaktionsmodus , um diese reaktionsschnellen Einstellungen anzuzeigen. Und du wirst sehen, dass wir den Tablet-Modus und den Smartphone-Modus haben. Also werden wir in diese beiden gehen , damit es auf diesen Geräten gut aussieht. Auf dem Desktop sieht es schon gut aus , wo wir gerade sind. Gehen wir also in den Tablet-Modus. Und so sieht es auf Tablets aus. Denken Sie daran, dass wir zwei Spalten haben. Wenn ich auf Tablet wechseln kann, Desktop-Modus. Denken Sie daran , dass wir diese Spalte haben, die das Logo enthält, und wir haben diese Spalte , die das Menü enthält. Als wir also auf Tablet gewechselt haben, haben wir immer noch die beiden Spalten, aber jetzt sind sie übereinander gestapelt . Und das wollen wir nicht. Wir wollen, dass sie Seite an Seite stehen. Das Menü auf der rechten Seite und das Logo auf der linken Seite. Wenn wir zurück in den Desktop-Modus wechseln, dieser ganze Abschnitt, ist dieser ganze Abschnitt, der Header-Abschnitt 100%, und diese beiden Spalten sind in Prozentsätze aufgeteilt. Vielleicht sind das 90 Prozent und das sind 10%. Wenn wir also wieder in Tablets gehen, wählen wir die Spalte aus , die das Logo enthält. Natürlich liegt es jetzt bei 100%. Wenn wir hier reingehen und etwas wie 50 Prozent eingeben und zuerst die Eingabetaste drücken, achten Sie darauf , dass nichts passiert. Und das liegt daran, dass es einen kleinen Fehler in Elementor gibt , bei dem wir dies zuerst ein wenig erweitern müssen dies zuerst ein wenig erweitern unsere Änderungen im Tablet-Modus wirksam werden. Sie haben bemerkt, dass die Änderungen wirksam geworden sind, wenn ich dies ein wenig nach links ziehe . Wenn Sie also zum ersten Mal in den Tablet-Modus wechseln, stellen Sie sicher, dass Sie zuerst diese oder diese andere Seite auswählen und die Wörter ein wenig herausziehen. Auf diese Weise werden die Änderungen, die wir im Tablet-Modus vornehmen , für uns sichtbar sein, wenn wir daran arbeiten. Das zweite, was wir tun müssen, ist die Spalte auszuwählen, die das Menü enthält. Und machen wir es auch 50 Prozent. Nun, das treibt es auf die rechte Seite, denn das 50 Prozent und das 50 Prozent, um 100 Prozent auszumachen . Während wir noch da sind, wähle ich das Menü selbst aus, indem ich diese Elemente auswähle. Und diese Änderungen, um Elemente zu bearbeiten, erhalten Nav Menu. Und ich möchte innerhalb des Randes gehen und die Standardeinstellungen unterbrechen. Und das bringt diese Schlechten in den Fokus. Und was wir tun wollen, ist es ein wenig nach unten zu schieben , indem wir die Top-Marge erhöhen. Erhöhen wir auch den richtigen Spielraum, um ihn ein bisschen so nach innen zu schieben . Jetzt wirst du feststellen, dass es dunkel ist , weil es auf einem dunklen Hintergrund ist. Also gehe ich mit Stil hinein. Lassen Sie mich den Menü-Wrapper zusammenklappen und wir haben den Hamburger-Stil. Also werde ich das erweitern. Und hier drinnen haben wir verschiedene Teile zu bearbeiten. Im ersten Teil möchten wir den Hintergrundtyp bearbeiten. Darauf klicke ich. Und dann geben wir ihm eine Farbe. Das ist die Farbe, die wir wollen. Ich glaube, es gefällt mir. Aktualisiere das. Und wenn Sie möchten, können Sie diese Logospalte auch weiter reduzieren . Also können wir das auswählen und vielleicht 20% machen. Und machen wir das zu 80 Prozent. Denn wenn das 20 Prozent sind, muss dies 80 Prozent betragen, um 100% zu erzielen. Also wähle das aus, und jetzt ist es wieder bis zum Ende. Lasst uns das aktualisieren. Und dann, da das erledigt ist, denke ich, wie das Menü im Tablet-Modus aussieht. wir nun die Änderungen gespeichert haben, wechseln wir die Seite, auf der wir diese Ansicht hatten. Ich lade diese Seite neu, also kontrolliere R. Und dann wechsle ich in den Tablet-Modus. Also vielleicht iPad Air. Und so sieht das Menü auf einem Tablet aus. Ich denke, es sieht gut aus, aber beachte, dass wir hier einen großen Spielraum haben, aber genau hier berührt das Logo fast den Rand. Lasst uns die Marge auf dieser Seite erhöhen. Wenn wir diese Spalte auswählen, gehen wir in den erweiterten Rand. Lassen Sie uns den linken Rand bis zu diesem Zeitpunkt erhöhen. Vielleicht 12. Aktualisiere das. Lassen Sie uns auch das oberste Randstück erhöhen. Lasst uns das aktualisieren. Geh in diesen Ort, kontrolliere R zum Aktualisieren. Und jetzt haben wir einen schönen Abstand. Sie gehen hier wieder rein. Es ist an der Zeit, es auf Smartphones anzusprechen das mobile Symbol auszuwählen. Und wie Sie sehen können, müssen wir dasselbe tun , was wir gerade auf den Tablets gemacht haben. Wir müssen diese beiden Spalten 100% belegen , indem wir ihnen unterschiedliche Prozentsätze geben. Wählen Sie also die Logospalte aus, Gehen wir in das Layout. Lassen Sie es uns vielleicht 50 Prozent behalten. Und wählen wir die Menüspalte aus. Lassen Sie uns auch 50 Prozent geben . Und jetzt sind die beiden Menüs richtig ausgerichtet. Und weil wir sie im Tablet-Modus eingerichtet hatten, sehen sie bereits bis zu einem gewissen Grad gut aus. Jetzt müssen wir nur noch einige zusätzliche Anpassungen am Seitenmenü vornehmen , das angezeigt wird, wenn Sie auf Ihrem Mobilgerät darauf klicken. Lassen Sie mich darauf klicken, damit Sie sehen können, was wir meinen. Wenn wir das anklicken. Wir verraten dieses Menü hier. Jetzt haben wir bereits einige Grundeinstellungen. haben wir zuerst Wenn ich also den Menü-Wrapper zusammenfalle, das Logo des mobilen Menüs. Dieser Leerraum hier oben ist also für ein Logo für dieses Smartphone-Menü. also wieder in den Inhalt gehen, werden Sie feststellen, dass wir hier einen Abschnitt über die Einstellungen des mobilen Menüs haben . So öffnen wir, dass wir ein mobiles Menü-Logo haben, wenn ich sage Bild wählen, können Sie ein Logo für dieses Menü hinzufügen. Und ich hatte dieses Logo bereits hochgeladen. Mach weiter und lade deine hoch. Und ich klicke auf Medien einfügen. Und wenn wir darauf klicken, jetzt das Logo dort angezeigt. Wenn ich das schließe, unterscheidet sich dieses Logo von diesem Logo, denn beachten Sie, dass diesem Logo, denn beachten Sie, dies weißer Text hat und Kurse steht. Und wenn ich das öffne , heißt das Vorlagen. Es ist also ein völlig anderes Logo als das wir für das Hauptlogo hochgeladen haben. Behalte das also im Hinterkopf. Das nächste, was wir tun wollen, ist, den Rand um dieses Logo zu bearbeiten , da wir hier einige schöne Abstände haben, aber genau hier berührt es fast die Kante. Also gehen wir in Stil, mobiles Menü, Logo, Rand. Lassen Sie uns diese Standardmarge brechen. Und auf der linken Seite erhöhen wir die Marge. So. Ich glaube, die Position hat mir schon gefallen. Ich gehe nicht zu weit. Aber spielen Sie mit diesen Einstellungen herum , um zu sehen, wie kreativ Sie mit Ihren werden können. Das nächste Problem, das wir bearbeiten möchten, ist diese Schaltfläche zum Schließen. Und das machen wir, indem wir in Hamburger-Stil-Öffnung gehen, dass wir den Hamburger umschalten. Wenn ich das schließe , ist das dieser. Der Hamburger-Toggle ist dieser. Und wenn wir das Menü öffnen, das Seitenmenü und nach unten scrollen, haben wir auch den geschlossenen Toggle. Das ist das hier. So können wir den Hintergrundtyp bearbeiten , wenn er sich im Normalzustand befindet. Und wir können ihm eine Farbe geben, diese Farbe. Und beim Mauszeiger können wir ihm auch eine Farbe geben, aber wenn Sie ein Mobiltelefon verwenden, fahren Sie nicht mit dem Finger über Symbole. Man fasst sie im Grunde einfach an. Ich glaube also nicht, dass das irgendeinen Sinn ergibt. Also lasse ich es einfach so, wie es ist. Lasst uns das aktualisieren. Bei einem Schwebeweg sehen diese Farben gut aus, aber wenn du sie ändern willst, kannst du immer kommen, lass mich schließen. Das. Kann immer zu Menüpunkten kommen, Untermenüpunkt. Alle diese Einstellungen befinden sich in diesen drei Panels. Also sieh sie dir an und sieh dir wie kreativ du damit werden kannst. Mit all diesen Änderungen gespeichert. Gehen wir genau hier auf unsere Seite. Und wenn wir diese Seite aktualisieren, steuern Sie R und wechseln Sie zu einem beliebigen Smartphone-Gerät wie dem Pixel Fünf oder vielleicht das iPhone 12s sind viele, sieht großartig aus. Und wenn wir die Sidebar öffnen , sieht sie so aus. Wechseln wir zu Pixel fünf und sehen, wie es aussieht. Lass mich das schließen. So sieht es auf Pixel fünf aus. Wechseln wir zu, lass mich Samsung Galaxy sehen. Und so sieht es auf Samsung Galaxy aus. Und so reagiert der Header auf Tablets und Smartphones. In der nächsten Lektion sehen wir uns an , wie der Rest des Inhalts auf diesen Geräten reagiert. Bevor wir den Kurs abschließen, sehen wir uns in Kürze. 26. Reaktionsfähige Körperpartie: Willkommen zurück. Es ist jetzt an der Zeit, den Rest des Inhalts auf Tablets und Smartphones anzusprechen. Wenn wir also wieder in unser Dashboard gehen, bevor wir in das Dashboard gehen, denken Sie daran, dass wir hier die Kopfzeile bearbeitet haben. Jetzt sind wir mit diesem Teil fertig. Wir können fortfahren und das Dashboard verlassen. Ich habe das Dashboard bereits hier geöffnet. Ich gehe einfach weiter und schließe diese Seite, weil wir sie nicht mehr benutzen. Schließen Sie nun diese Seite, da sie hierher zurückkommt, um zu sehen, wie reaktionsschnell die Seite aussieht. Also mache ich weiter und schließe das. Ich hatte ein paar Seiten geöffnet. Geh wieder hier rein. Was wir tun wollen, ist diese Seite mit Elementor zu bearbeiten , da wir den Inhalt des Hauptteils ansprechen. Und ich wechsle zu diesem Tab. Und hier sind wir. Das erste, was wir tun müssen, ist, auf diesen Responsive-Modus zu klicken. Ich kann diese drei Modi aufdecken. Dann wechseln wir in den Tablet-Modus. Hier sind wir. Denken Sie daran, dass ich erwähnt habe, dass beim ersten Wechsel den Tablet-Modus der Tablet-Modus sich ändert, eingestellt ist und nicht sichtbar ist. Wenn wir das also greifen und leicht ziehen, die Änderungen, die wir bereits vorgenommen hatten, sichtbar sein. Das ist ein kleiner Bug, den ich in Elementor bemerkt habe. Es ist keine so große Sache, denn so wird Ihre Website auf Tablets aussehen und nicht so, wie sie es vor einem Moment getan hat. Und jetzt, da wir diese haben, müssen wir als Erstes diese Spalten zu einer Breite von 100 Prozent machen. Vielleicht möchten Sie sie bei 5050 Prozent belassen, aber ich wähle diesen einfach gerne aus, der unter Layout innerhalb der Spaltenbreite liegt und es zu 100% macht. Und dann wähle das aus, den Text selbst. Und schieben wir es in die Mitte. Jetzt möchten Sie möglicherweise die Größe ändern Ihren Vorlieben abhängt. Wenn wir also in die Stil-Typografie gehen, können Sie die Größe so ändern. Und jetzt ist dieser Raum zu groß, also können wir in den Abschnitt selbst gehen. Dann fortgeschritten. Lasst uns diese Polsterung so brechen. Und das sieht schon gut aus. Vielleicht möchten Sie diese Polsterung oben erhöhen, aber ich lasse es so. Dann wählen wir diesen Text aus. Gehen Sie in den Stil, richten Sie ihn an der Mitte aus. Dann wählen wir diese Schaltflächen aus. Jetzt wirst du feststellen, dass es nicht funktioniert, wenn ich sie an der Mitte ausrichte . Eine Möglichkeit, sich fortzubewegen , besteht darin, die Marge auf der linken Seite zu erhöhen. Während sie noch ausgewählt sind, gehen Sie innerhalb der erweiterten Marge. Und dann lassen Sie uns die Marge am linken Atom erhöhen, vielleicht 50, sagen wir 120. Ich glaube, jetzt sind sie im Zentrum. Also aktualisiere ich das. Es geht darum, kreativ zu werden. Manchmal können Sie auf Ziegelmauern stoßen und Sie müssen kreativ werden und Wege finden, um Ihre Herausforderungen zu meistern. Wählen wir also das Bild aus. Beachten Sie, dass es immer noch 50 Prozent breit ist. Wählen wir also die Spalte aus und geben Sie ihr 100 Prozent. Und jetzt liegt es bei 100 Prozent. Und eine großartige Sache an elementar ist , dass Sie die Reihenfolge dieser Spalten abhängig vom Gerät, auf dem der Benutzer sie ansieht, bedingt umkehren können. Im Moment ist es zuerst der Textblock, dann das Bild, aber wir können es umkehren , wenn jemand es auf dem Tablet ansieht. Wenn ich den Abschnitt selbst auswähle und in Advanced responsive gehe, können wir Spalten auf dem Tablet oder auf Mobilgeräten umkehren. Lass es uns auf Tablets machen. Wenn ich das auswähle. Jetzt sind sie rückgängig gemacht. Es ist zuerst das Bild, dann der Textblock Sekunde. Und wenn wir in den Desktop-Modus zurückkehren, befinden sie sich immer noch in ihrer ursprünglichen Reihenfolge. So sind sie jetzt bedingt auf den Rückwärtsgang eingestellt , je nachdem, ob das Gerät auf das Tablet wechselt, Sie haben immer noch diesen Fehler. Aber wenn wir das ein wenig erweitern, sehen wir uns jetzt das Endergebnis an. Das ist also, dass ich Update sagen werde, bevor wir Änderungen an unserem Scrollen nach unten verlieren , weil wir mit der Hero-Sektion fertig sind. Ich denke, in diesem Abschnitt sieht alles gut aus. Abgesehen davon, dass diese Spalten zu nahe am Rand liegen. Also wähle ich die ganze Spalte aus, die sie enthält. Geh hinein fortgeschritten. Brechen Sie diese Polsterung auf und wir möchten ihm eine linke und rechte Polsterung von 20 geben. Also schauen Sie links und rechts einfach nach rechts, einen 20. Jetzt haben wir dort einen schönen Abstand. Gehen wir fort und wählen diese Spalte aus. Wiederholen wir, was wir gerade gemacht haben. Ich mag es bei 100% für den Textblock und das zu 100 Prozent. Wählen Sie diese Spalte also 100% aus, wählen Sie diesen Text richten Sie ihn an der Mitte aus. Das auch hier. Bitte schreibe auch eine SMS. Gehende Seiten, Kachel, Linienzentrum. Das ist das Akkordeon. Wir können es ausrichten. Lassen Sie mich das einfach zusammenbrechen. Ich denke, es sieht gut aus wie es ist. Nur dass wir diese Spalte noch einmal auswählen und rechts und links eine schöne Polsterung geben müssen noch einmal auswählen und rechts und links eine schöne Polsterung geben . Also lasst uns das brechen. Der Standard ist 20. Jetzt haben wir rundum ein paar schöne Polsterungen. Lassen Sie uns das eine 100% ige Breite geben, oder? Einfach so. Dann haben wir den Zähler. Natürlich sehen diese Ziffern jetzt zu groß aus, also wähle ich den ersten Zähler aus. Gehen Sie in die Typografie im Stil, vielleicht eine 40. Was ich also tun kann, ist kopieren. Dann füge Stil ein. Das wird einfach die Größe einfügen, die wir haben. Stil einfügen. Mir gefällt es wirklich nicht, wie diese Texte zur nächsten Zeile springen. Ich wünschte, es wäre vielleicht Zufriedenheit, einfach nur Zufriedenheit. Und dafür gehen wir in Inhalte oder einfach nur Studenten ein. Und jetzt sind sie alle in einer Zeile. Aber die Sache ist, sobald Sie einige Texte von ihnen entfernt haben, selbst im Tablet-Modus, sogar im Desktop-Modus, werden Sie sie immer noch entfernt haben. Dies sind einige der Änderungen, die auf alle Modi wirksam werden. Behalte das also im Hinterkopf. Gehen Sie zurück in den Tablet-Modus. Lassen Sie es uns ein wenig erweitern. Okay, also lasst uns mit dem nächsten Abschnitt fortfahren. Inzwischen weißt du schon , was wir tun müssen. Die Auswahl der Spalte stimmt überein Erweitert, links, 2020. Und jetzt haben wir einen schönen Abstand. Ansonsten sieht alles andere schon gut aus. Genau hier natürlich ein 100%. Basiert auch auf 100%. Stellen wir auch sicher, dass wir links und rechts eine schöne Polsterung geben . 2020. Und das können wir auch nett zentrieren. Stil ausrichten, zentrieren. Wir können diese nicht ausrichten, aber ich denke, sie suchen schon. Gut. Starte jetzt den Knopf selbst, wir können ihn so in die Mitte schieben. Lassen Sie uns das Update aktualisieren, bevor wir Änderungen verlieren. Scrollen wir weiter. Die Testimonials. Sieh gut aus. Lassen Sie uns das 100% geben. Wählen wir die Texte aus und richten sie an der Mitte aus. Wählen Sie hier die Spalte aus, 100 Prozent. Während es noch ausgewählt ist, fortgeschritten 2020. Und ich denke, es sieht jetzt gut aus. Lasst uns das also aktualisieren. Jetzt. Der verbleibende Teil ist der Ordner. Und um das Foto ansprechend zu machen, machen wir dasselbe, was wir mit der Kopfzeile gemacht haben. Also gehen wir in Elemente kid light, Header-Ordner und bearbeiten die Elementor-Fußzeile im Frontend. Versuchen Sie, es auf den Toolgeräten zu reagieren. An dieser Stelle möchte ich Ihnen das als Herausforderung überlassen, Prozess verfolgen und das Foto antworten lassen C. Wechseln Sie also zu unserer Seite im Responsive Mode, Schauen wir uns diese Geräte an. Versuchen wir, ein neues Gerät nachzuahmen. Bevor wir das tun, kontrollieren wir R, um die Seite zu aktualisieren , damit die Änderungen wirksam werden. Jetzt werden Sie feststellen , dass mit Ausnahme der Schaltflächen alles richtig ausgerichtet ist . Scrollen wir nach unten. Wie wir jeden anderen Teil überprüfen. Mit Ausnahme dieser beiden Knöpfe sieht alles super toll aus. Mal sehen, was wir mit ihnen tun sollen. Gehen wir also wieder hier rein , wechseln wir zunächst zur mobilen Ansicht. Wählen Sie die beiden Schaltflächen aus. Dann lasst uns die Marge brechen. Oder ein Mobiltelefon. Wenn wir hineingehen, sieht der Tablet-Modus immer noch gut aus. Und immobiler Modus, sie sehen auch gut aus. Lasst uns das also aktualisieren. Alles, was Sie tun mussten, war die Schaltflächen auszuwählen und den Rand zu unterbrechen. Kommen Sie jetzt wieder hierher, steuern Sie R, um die Seite zu aktualisieren. Genial, also gefällt mir, wie es aussieht. Jetzt sieht unsere Seite auf Tablets und Smartphones sowie auf Desktops viel vorzeigbarer aus. Lassen Sie uns diese verschiedenen Elemente animieren , so dass die verschiedenen Elemente animiert erscheinen, wenn jemand die Webseite zum ersten Mal besucht die verschiedenen Elemente animiert erscheinen, wenn jemand die Webseite zum ersten Mal und scrollt . Nur um die Benutzererfahrung zu verbessern. Mal sehen, wie das geht. In der nächsten Lektion. Wir sehen uns in Kürze. 27. Füge Bewegungseffekte hinzu: Hallo da, Willkommen zurück. Unsere Landing Page reagiert jetzt vollständig auf den verschiedenen Geräten. Eine weitere Sache, die wir tun müssen, ist, unseren Elementen auf der Seite einige Bewegungseffekte hinzuzufügen unseren Elementen auf der Seite einige Bewegungseffekte , die die Seite interaktiver machen und die allgemeine Benutzererfahrung verbessern. Gehen Sie also zurück in einen Desktop-Modus, während wir noch hier auf der Bearbeitungsseite sind. Lassen Sie uns diesen Teil zuerst animieren. Wählen Sie also diese Spalte aus. Gehen wir in erweiterte Bewegungseffekte ein. Und jetzt ist dies der Standardwert, also gibt es keinen Bewegungseffekt. Wenn wir auf das Dropdown-Menü klicken, haben wir verschiedene Arten von Bewegungseffekten. Wir verblassen, also ist das Verblassen. Wir haben gezoomen. Wir haben Grenzen. Für diese Helden-Sektion. Ich mag das Fade-In-Effekt und wir können die Geschwindigkeit oder Dauer hier ändern. Ich mag es also langsam zu sein, so. Und ich wiederhole das Gleiche für diese Kolumne. Geh rein. Erweiterte Bewegungseffekte, verblassen, und dann mache ich es langsam. Okay, also lasst uns das aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Beachten Sie also, wie es langsam einblendet, einfach so, zurück in unseren Editor. Jetzt können wir das für jedes einzelne Element auf dieser Landingpage tun. Gehen wir zurück zu dieser Seite wählen Sie hier diese Spalte aus, die die erste Kategorie enthält. Gehe in erweiterte Bewegungseffekte. Dieses Mal will ich rutschen oder hüpfen, rutschen, oder? Kein Rutschen nach links. So. Und dafür wollte ich in Wright rutschen. Erweiterte Bewegungseffekte. Schieben Sie richtig? Und für den mittleren kann es nach unten gleiten. Bewegungseffekte. Oder vielleicht kannst du einfach langsam verblassen. Lasst uns auch wieder darauf eingehen. Bewegungseffekte. Langsam. Ich mag es langsam reinzukommen. gleiche Fall gilt für dieses langsam gleitende Gleiten. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen sehen, die langsam so verblassen. Und die gleiten langsam so. Lasst uns damit fortfahren. Aber denken Sie natürlich daran, dass es um Ihre Kreativität geht. Wir haben so viele Möglichkeiten hier drin. Und so bestimmen die verschiedenen Bewegungseffekte , die Sie auswählen wie großartig Ihre Seite für neue Benutzer geladen wird. Gehen Sie also zum dritten weiter. Wählen Sie dies aus. Erweiterte Bewegungseffekte. Vielleicht zoomen. Nein, das verblasst. Gehe zum Zoomen. Dieser ist weit fortgeschrittene Bewegungseffekte. Zoomen, aktualisieren. Und so füge ich einige Bewegungseffekte für den Rest der Elemente auf dieser Seite hinzu. Aber ich werde diesen Teil schnell weiterleiten, weil ich den gleichen Prozess immer und immer wieder ganz nach unten wiederhole . Also schlage ich vor, dass du weitermachst und kreativ bist. Mal sehen, was dir einfallen lässt. Als nächstes möchte ich das auswählen. Also bin ich gerade fertig und ich habe die Änderungen gespeichert. Okay, also lasst uns einfach nach unten scrollen und sehen, was ich mir ausgedacht habe. Oh, richtig. Da sind wir los. So fügen Sie Ihrer Zielseite Bewegungseffekte hinzu. Wie ich bereits erwähnt habe, werde so kreativ wie möglich und sieh, womit du am Ende enden wirst. Und das markiert das Ende unseres Kurses. Ich hoffe, es hat dir genauso gut gefallen, wie mir gefallen hat, es für dich zusammenzustellen. Und wenn Sie Fragen haben, wenden Sie sich an mich. Bevor du gehst. Ich habe ein paar abschließende Gedanken und teile sie in der nächsten und letzten Lektion. Wir sehen uns in Kürze. 28. 25 Outro: Herzlichen Glückwunsch zum Abschluss des Kurses. Die Tatsache, dass Sie so weit gekommen sind, ist ein klarer Hinweis darauf, dass Sie ein Finisher sind. Viele Leute können an einem Online-Kurs teilnehmen, aber nur sehr wenige Menschen können bis zum Ende durchschauen. Sie haben jetzt nicht nur eine voll funktionsfähige Webseite, sondern auch eine wertvolle Fähigkeit, mit der Sie auf viele verschiedene Arten Einkommen generieren können . Es geht darum, wie kreativ Sie es bekommen können, da Sie verstehen, wie Sie eine Webseite von Grund auf neu zusammenstellen. Es ist Zeit für Sie zu lernen, wie Sie sie SEO-freundlich gestalten können. Seo bedeutet, dass Suchmaschinenoptimierung, eine Webseite oder eine Website, die nicht für Suchmaschinen optimiert wurde , für die Suchmaschinen unsichtbar ist, was bedeutet, dass sie nicht in Suchergebnissen angezeigt wird, wenn Benutzer suchen nach Inhalten, die auf der Webseite lernen werden, wie sie für Suchmaschinen sichtbar werden können. Schauen Sie sich einen 60-minütigen Kurs an, den ich speziell veröffentlicht habe , um Ihnen beizubringen, wie das geht. Öffnen Sie mein Profil und melden Sie sich für diesen Kurs an und lernen Sie, wie Sie Ihre Webseiten und Websites von Suchmaschinen auffindbar machen können. Und schauen Sie sich auch andere Kurse an, in denen ich Ihnen beibringe , wie Sie eine voll funktionsfähige Website erstellen können, nicht nur eine Zielseite. Wenn Ihnen der Kurs gefällt, denken Sie bitte daran, ihn im folgenden Abschnitt positiv zu bewerten. Das ist sehr hilfreich. Es dauert nur etwa zwei Minuten und Ihre Überprüfung wird dazu beitragen, diesen Kurs für andere Schüler sichtbarer zu machen diesen Kurs für andere Schüler sichtbarer zu , die möglicherweise nach solchen Informationen suchen. Und wie immer heiße ich Ken Visa. Es ist immer ein Vergnügen, dich hier zu haben und wir sehen uns im nächsten Klassenstück.