Ein Leitfaden für Elementor: Entwirf deine erste Landing-Page

1. Einführung: In der sich schnell entwickelnden Welt von heute bestand eine der bedeutendsten Veränderungen darin wo und wie wir einkaufen und unsere Zeit verbringen. Da die weltweite Verbreitung des Internets den letzten zehn Jahren sprunghaft angestiegen ist, widmen immer mehr Menschen einen erheblichen Teil ihres Lebens dem Dies bietet Ihnen eine große Chance, Ihre Geschäftsreichweite zu erweitern und neue Kunden zu gewinnen, die zuvor für Sie unerreichbar waren . Wenn Ihr Unternehmen beispielsweise über eine Website verfügt, können Sie Ihre Produkte an Menschen aus der ganzen Welt verkaufen . Sie müssen im Rahmen Ihrer Bestellungen nicht an Personen verkaufen. Oder wenn Sie über Webdesign-Kenntnisse verfügen, können Sie Ihren Lebensunterhalt damit verdienen, Websites für andere Unternehmen zu erstellen oder Website-Vorlagen zu erstellen und diese online zu verkaufen. Aber die Frage ist, wie erstellt man eine Website? Benötigen Sie Programmier - oder Programmierkenntnisse? Nun, um eine Website zu entwickeln, haben Sie zwei Möglichkeiten. Sie können entweder einen Webdesigner dafür bezahlen, dies für Sie zu tun , oder Sie können lernen , es selbst zu erstellen. In diesem Kurs möchte ich Ihnen zeigen, wie Sie mit Elementor selbst Websites erstellen mit Elementor selbst Websites Und am Ende des Kurses werden Sie einen soliden Workflow für die Erstellung von Websites haben , ohne eine einzige Codezeile schreiben zu Moment mal, was ist Elementor? Elementor ist ein fantastischer Drag-and-Drop-Seitenersteller für W Press Es ist leistungsstark, intuitiv und ermöglicht Ihnen, Ihre Websites visuell zu gestalten und anzupassen Sie ziehen einfach wie ein Grafikdesigner verschiedene Seitenelemente per Drag & Drop wie ein Grafikdesigner verschiedene Seitenelemente , um Ihre Layouts zu erstellen. Ich gehe davon aus, dass du Elementor noch nie benutzt hast, also bist du ein absoluter Anfänger Wenn du das bist, ist dieser Kurs für dich. Als erfolgreicher Unternehmer haben Sie wahrscheinlich Geschäftsideen, haben Sie wahrscheinlich Geschäftsideen die Sie von Zeit zu Zeit eine Website benötigen, aber Sie haben nicht das Geld, um jedes Mal, wenn Sie einen Prototyp einer Website erstellen möchten, einen Webdesigner zu bezahlen jedes Mal, wenn Sie einen Prototyp einer Website erstellen möchten, einen Webdesigner zu Dieser Kurs würde es Ihnen ermöglichen, Ihre Website-Ideen in Live-Websites Wir fangen bei Null erstellen gemeinsam eine reale Landingpage , während wir die am häufigsten verwendeten Elementor-Tools beherrschen die am häufigsten verwendeten Elementor-Tools Wir werden zunächst lernen, wie man Wrepress sowohl online als auch offline installiert Wrepress sowohl online als auch offline Wir werden sehen, wie Elementor und andere Plugins sowohl lokal als auch online installiert andere Plugins sowohl lokal als auch online Wir werden sehen, wie man ein WordPress-Theme sowohl online als auch offline installiert ein WordPress-Theme sowohl online als auch offline Und dann machen wir uns mit der Benutzeroberfläche von Element vertraut mit der Benutzeroberfläche von Element Mit anderen Worten, ich nehme Sie mit auf eine Tour durch den Elementa-Editor, damit Sie sich mit den Tools, Funktionen und Einstellungen vertraut machen können , die Sie kennen müssen Sobald Sie sich einen kurzen Überblick über den Elementa-Editor gemacht haben, erstellen wir Ihre Landingpage, angefangen von der Navigationsleiste oben bis zur Fußzeile unten Wir werden uns auch damit befassen, wie Sie Ihre Seite responsiv gestalten können, damit sie auf allen Geräten gut aussieht Falls Sie mich zum ersten Mal sehen, mein Name ist Ken, und ich verwende seit sechs Jahren einen L Lamentor, um Websites für meine Kunden und mich zu erstellen , und ich teile diese Leidenschaft mit Studenten hier auf Und ich hoffe, wir sehen uns in diesem Kurs. Und jetzt bin ich bereit anzufangen. Ich hoffe du bist es auch. in der nächsten Lektion Schauen wir uns in der nächsten Lektion eine Demo der Landing Page an, die Sie im Laufe des Kurses erstellen werden. Lass uns anfangen. 2. Kursprojekt: A, willkommen zurück. Wie Sie vielleicht bereits wissen, ist der beste Weg, eine technische Fähigkeit zu erlernen , die Arbeit an einem praktischen Projekt. Und jetzt, in diesem Kurs, werden wir an einer Landingpage arbeiten und lernen, wie man elementare Tools benutzt Also hier ist eine Landingpage, und ich möchte, dass wir sie uns kurz von oben nach unten ansehen sie uns kurz von oben nach unten Hier beginnt also unser Header mit einem Logo, einem Menü. Und ein kurzer Call-to-Action-Button hier oben. Als Nächstes haben wir diese Helden-Sektion. Dieser Bereich wird Heldenbereich genannt. Er besteht aus einem Textblock mit Schaltflächen zum Aufrufen von Aktionen und dem Heldenbild. Als Nächstes haben wir diesen Ankerknopf genau hier. Wenn wir darauf klicken, gelangen wir zum nächsten Abschnitt hier auf der Seite Und Sie werden feststellen, dass dieser Abschnitt einen schönen animierten Partikelhintergrund hat schönen animierten Partikelhintergrund Es ist ein Partikelsystem, und wir werden sehen, wie man das erzeugt. Wir haben auch Überschriften unterschiedlichen Farben, zweifarbige Überschriften Wir werden sehen, wie man die Farbe für ein bestimmtes Wort in einem Satz oder in einem Textblock festlegt ein bestimmtes Wort in einem Satz oder in einem Textblock wir weitermachen, haben wir hier etwas Ähnliches, aber die Implementierung unterscheidet sich von der Implementierung. Dieses Bild wird als Bildelement hinzugefügt, während dieses als Abschnittshintergrund hinzugefügt wird, und wir werden sehen, wie das alles geht. Kommen wir zum Futter. Hier haben wir eine Fußzeile, die wie dieser andere Abschnitt hier aussieht Sie werden feststellen, dass es sich auch eine sehr einfache Fußzeile mit einem Logo, einer Beschreibung hier , Symbollisten hier und Schaltflächen zum Aufrufen Sehr einfach, nicht kompliziert. Ich wollte ein Projekt, das für Sie einfach zu erledigen ist , weil Sie ein Anfänger sind, aber Ihnen auch die Möglichkeit bietet, mit den am häufigsten verwendeten elementaren Tools zu interagieren Und wenn wir diese Landingpage erstellen, werden wir mit diesen Tools interagieren können, und wenn wir fertig sind, werden Sie das Selbstvertrauen haben, selbst mit der Arbeit an einer neuen Landing Page zu beginnen Das ist also das Projekt, an dem wir während des gesamten Kurses arbeiten werden. Ich hoffe, du freust dich genauso wie ich. Wenn du bist. Warum fahren wir nicht mit der nächsten Lektion fort, in der wir uns der Installation von W Press befassen werden. Wir sehen uns in Kürze. 3. WordPress-Offline-Installation: A, willkommen zurück. Nun, da Sie die Landingpage von Going to be building gesehen haben, ist es an der Zeit, Wpress zu installieren Nun gibt es zwei Möglichkeiten oder zwei Orte, wie Sie W press installieren können Das ist online und offline. In dieser Lektion werden wir uns auf eine Offline-Installation konzentrieren, und in der nächsten Lektion werden wir uns auf die Online-Installation konzentrieren. Ein anderer Name, der häufig für eine Offline-Installation von Wpress verwendet wird, ist lokale Installation , weil sie lokal auf Ihrem Computer ist Sie benötigen keine Internetverbindung, um weiter an Ihrer Wpress-Website zu arbeiten und von Seite zu Seite zu navigieren Und um W Press lokal auf unserem Computer einzurichten, müssen wir zwei Dinge herunterladen Erstens müssen wir Shap herunterladen. Nummer zwei, wir müssen W Press herunterladen. Also lass uns weitermachen und Shamp jetzt herunterladen. Also füge ich einen neuen Tab hinzu und gebe Sham ein Ich mache einfach weiter und klicke auf Herunterladen und wir werden auf diese Seite weitergeleitet, Apache Friends.org Slash-Download Sie werden direkt hierher weitergeleitet und wir können die neueste Version herunterladen, und wir können die neueste Version herunterladen mit der wir auf unserem Computer arbeiten Wie Sie sehen können, haben wir 8.2 0.12. Dies ist die neueste Version , da dies 8.0 ist. Ich denke, ich werde das machen, aber du kannst alles davon nehmen , wenn du willst. Und es sollte automatisch starten. Warum fängt es nicht an? Lass mich einfach hier klicken. Ordnung. Ich akzeptiere nicht. Ich weiß nicht, warum es nicht heruntergeladen wird, aber lass mich einfach darauf klicken. Und los geht's. Und jetzt wird es heruntergeladen. Und wir sind fertig. Jetzt ist Shap heruntergeladen. Lassen Sie mich einfach auf Im Ordner anzeigen klicken und dieses Fenster hierher ziehen Hier ist es. Ich doppelklicke es einfach, um es zu installieren. Machen Sie sich jetzt keine Gedanken über diese Warnung hier. Fahren Sie einfach fort und klicken Sie auf Okay, und hier ist unser Setuiz Also klicke ich auf Weiter. Klicken Sie auf Weiter und installieren Sie es in C Sham. Also klicke ich einfach auf Weiter. Also lass uns einfach weitermachen und es in privaten Netzwerken zulassen, und wir können weitermachen und das C-Panel sofort starten. Also mach den Chat zu Ende. Und es ist in dem anderen Fenster geöffnet. Also hier ist es. Und wie Sie sehen können, stellt uns Shamp verschiedene Tools und Funktionen Was wir jetzt in diesem Moment tun müssen, nachdem wir Shamp installiert haben, ist den Apache-Server zu starten , da Ihre Workpas-Website auf einem Server laufen muss Der Server ermöglicht es Ihnen , von einer Seite zur anderen zu navigieren, um von einem Teil des Dashboards zum anderen zu Dann lassen Sie uns auch die SQL-Datenbank aktivieren. Willst du das zulassen? Ja. Also werde ich einfach weitermachen und das zulassen. Wie Sie sehen können, läuft Apache jetzt und mein SQL-Status hat sich geändert, und es läuft. Und jetzt müssen wir als Nächstes eine Datenbank erstellen, denn wenn wir unsere Wpress-Website einrichten, werden wir nach dem Namen unserer Datenbank gefragt Also müssen wir es vorher fertig haben. Also werde ich weitermachen und auf meinen SQL-Admin klicken. Ich klicke einfach auf Admin. Jetzt ist es in dem anderen Fenster geöffnet. Ich ziehe es einfach hierher und platziere es und ich sollte zu dem anderen Fenster wechseln. Aber hier ist, was Sie haben sollten, nachdem auf meinen SQL-Administrator geklickt haben. Gehen wir hier und unter Datenbanken rein. Lassen Sie uns eine Datenbank erstellen. Lass es mich einfach meine Underscore-DB nennen. Es ist nicht wirklich wichtig. Du kannst einfach meine Datenbank sagen. Das ist okay. Lassen Sie alles andere intakt und klicken Sie auf Erstellen. Jetzt haben wir diese neue Datenbank „Meine“ hier aufgeführt. Also werde ich einfach weitermachen und das schließen. Und jetzt, wo wir eine Datenbank haben, müssen wir als nächsten Schritt daran denken, dass ich gesagt habe, dass wir zwei Dinge herunterladen müssen. Die erste, die wir heruntergeladen haben, war Shap. Das zweite, was wir herunterladen müssen, ist Wordpress. Also gehe ich zu WordPress.org. Und hier sind wir. Ich klicke einfach auf Get WordPress und lade Wordpress 6.61 herunter, und jetzt wird es heruntergeladen Wir sind fertig. Lassen Sie mich jetzt einfach den Ordner öffnen. Hier sind wir. Ich klicke mit der rechten Maustaste und gehe hier zu WR Et. Da haben wir's. Jetzt haben wir es hier extrahiert. In dem Moment, in dem wir den Ordner öffnen , müssen wir diesen Inhalt direkt haben. Dieser Inhalt sollte sich nicht in einem anderen Ordner befinden. Dieser Inhalt sollte nicht auf diese Weise extrahiert werden. Klicken Sie nicht mit der rechten Maustaste und extrahieren Sie in diesen Ordner. Denn wenn Sie darauf doppelklicken, sich jetzt der Wordpress-Ordner darin , der den Inhalt enthält. Wir wollen diesen Ordner selbst, nicht den Ordner, der extrahiert wurde . Behalte das im Hinterkopf. Ich kopiere einfach dieses Wordpress klicke auf Control C. Jetzt gehe ich in C. Lass mich einfach in diesen PC gehen, auf mein C-Laufwerk doppelklicken, und wir werden diesen Shapordner finden Denken Sie daran, dass wir es hier installiert haben. Doppelklicken Sie darauf und gehen Sie zu HT Docs. Nun, hier drin, hier fügen wir unseren Arbeitsordner ein, Control V, um ihn einzufügen, und hier ist er Jetzt können wir ihm den Namen unserer Website geben , denn im Grunde ist das jetzt eine Website Nennen wir es vielleicht Online-Shop. Das ist also der Name unserer Website. Jedes Mal, wenn wir lokal eine neue Wpress-Website erstellen möchten, müssen wir nur hierher kommen und ein anderes Wordpress einfügen , das von wpress.org heruntergeladen wurde, hierher kommen und Da haben wir's. Wir können diese Website zwei nennen. Das ist Website zwei. Wenn wir uns jetzt an diesen Namen erinnern, Online Shop. Kopiert das. Wenn wir hierher gehen und Local Host Online Shop eingeben. Los geht's. Dadurch wird das Wordpress-Setup gestartet. Der Grund, warum das bisher funktioniert hat ist, dass diese beiden laufen. Denken Sie daran, wenn Sie das gerade nicht auf Ihrem Bildschirm haben, liegt das daran, dass Sie wahrscheinlich keines davon ausführen. Also, wenn ich wieder reingehe, meine Sprache ist Englisch. Willkommen bei Wordpress. Lass uns weitermachen und loslegen. Gehen wir. Name der Datenbank. Denken Sie daran, dass wir ihm einen Namen gegeben haben. Wenn ich einfach einen neuen Tab öffne und diesen öffne oder ihn vielleicht schließe und diesen öffne, gehe zu Admin. Denken Sie daran, wir hatten meine Datenbank. Ich werde herkommen und diesen Namen benutzen. Meine Datenbank. Der Benutzername ist root und lassen Sie das Passwort leer. Lassen Sie alles andere intakt. Ich klicke auf Absenden. Und da haben wir's. In Ordnung, Sparky, du hast es überstanden. Führen Sie die Installation aus. geben wir unserer Presse-Website einen Namen, einen Titel. Denken Sie daran, es war ein Online-Shop. Dies sind die Anmeldeinformationen, mit denen wir uns in unser WordPress-Dashboard einloggen, damit wir den Inhalt aktualisieren können. Also verwende ich einfach meinen Benutzernamen. Ich werde dieses Passwort verwenden. Ich werde hier eine E-Mail bereitstellen und ich werde solche Engines davon abhalten, und ich werde solche Engines davon abhalten diese Seite zu indexieren, und lassen Sie uns weitermachen und WordPress installieren Merken Sie sich also Ihre Zugangsdaten, meinen Benutzernamen. Kopieren Sie das und legen Sie es irgendwo ab Lassen Sie mich hier einfach t x t eingeben, um einen Notizblock zu öffnen und das Passwort für eine Sekunde dort einzugeben. Dann geh. Lassen Sie mich hier auch meinen Benutzernamen angeben. Lass uns weitermachen und ps installieren. Und erfolgreich, wir haben unsere Arbeitspresse jetzt lokal installiert. Wenn ich also „Einloggen“ sage, kann ich hierher kommen und meinen Benutzernamen sagen und das Passwort lautet wie folgt. Kopiere das, füge es dort ein und melde dich an. Ich kann das in meinem Passwort-Manager speichern und hier sind wir. Jetzt haben wir W Press lokal installiert. Wir benötigen keine Internetverbindung um weiter an unserem Projekt zu arbeiten. Herzlichen Glückwunsch. Sie haben jetzt eine lokale Wpress-Installation In der nächsten Lektion wollen wir uns ansehen, wie man WPSs online installiert oder einrichtet Dafür benötigen Sie eine Internetverbindung, aber das sehen wir uns in der nächsten Lektion Wir sehen uns also in Kürze. 4. Webhosting und einen Domainnamen kaufen: Jetzt, wo Sie gelernt haben, Wordpress lokal zu installieren, fragen Sie sich vielleicht, wie ich dasselbe mache, aber online? Denn letztendlich muss Ihre Website live gehen. Sie muss irgendwo online existieren. Wenn Sie einen meiner letzten Grundkurse besucht haben, müssen Sie auf die Lektion gestoßen sein, in der wir uns damit befasst haben , wie man einen Domainnamen kauft, wo man Hosting kauft und wie man es kauft, wie man Wordpress einrichtet, nachdem man Hosting und einen Domainnamen gekauft Wir haben das alles behandelt. Und weil ich denke, dass wir den gesamten Prozess sehr gut erklärt haben , leihe ich mir diese Lektion und Slotty Teen hier , damit Sie diesen Prozess durchgehen Also, los geht's. Es ist Zeit, darüber zu sprechen, wie und wo Sie Ihr Webhosting und einen Domainnamen erhalten können. Jetzt wird jede Website, die Sie besuchen, irgendwo online auf einem Server gespeichert online auf einem Server , der immer für das Internet verfügbar ist. Aus diesem Grund können Sie auf eine Website zugreifen , die sich in den Niederlanden, den USA oder Mexiko befindet, da sie auf einem Server gespeichert ist , der immer mit dem Internet verbunden ist. Das heißt, jedes Mal, wenn Sie auf einen Link klicken , der Sie zu einer bestimmten Website führt, zum Beispiel Free Peck, sagen wir, freepik.com Der Browser hat eine Anfrage für diese bestimmte Seite gesendet , und auf diese spezielle Seite kann über diese Adresse oder diese URL zugegriffen werden Adresse oder diese URL zugegriffen Als die Anfrage gesendet wurde, wurde diese Anfrage also von dem Server empfangen , der die Free Pick-Website speichert, und die Free Pick-Website besteht aus vielen Webseiten. Da diese Webseite jedoch durch diesen spezifischen Domainnamen repräsentiert wird , gibt dieser Server eine Antwort mit der von Ihnen angeforderten Seite zurück . Dieser Server ist also das, was Ihnen ein Webhost zur Verfügung stellt. Ihr Webhost stellt Ihnen Speicherplatz für Ihre Website zur Verfügung und stellt sicher, dass Ihre Website für jeden verfügbar ist , der sie besuchen möchte. Nun, die andere Sache, die Sie benötigen, ist ein Domainname, freepik.com ist ein Domainname, und dieser spezielle Domainname ist einzigartig für Free Peek, sodass niemand anderes dasselbe kostenlose peak.com haben kann, genauso wie niemand sonst Ihre Telefonnummer haben kann Ihre Telefonnummer ist einzigartig und wird verwendet, um nur Sie zu erreichen, sonst niemanden Ihre Website muss also einen eindeutigen Domainnamen haben, und die Leute werden diesen Domainnamen verwenden , um auf Ihre Website zuzugreifen. Also, jetzt gehe ich wieder rein, ich bin auf wpress.org. Dies ist die offizielle Website von WordPress. Hier können Sie Wire Press herunterladen. Wenn Sie Ihre Website offline entwickeln möchten, können Sie Wire Press in Ihrem System installieren und ohne Internet arbeiten und Ihre Website erstellen. Aber was uns interessiert, ist die Hosting-Seite. Wire Press hat eine Liste empfohlener Webhosts, und ich empfehle Ihnen, sich einen Moment Zeit zu nehmen und diese Seite zu lesen. Sie können sehen, dass sie drei empfohlene Webhosts haben Bluehost, Dream Host und WordPress.com Dies bedeutet jedoch nicht, dass dies die einzigen Webhosts sind , die Sie für Ihre Wordpress-Website verwenden können Es gibt andere Webhosts , die genauso gut, wenn nicht sogar besser sind als diese drei. Dies sind also nur WordPress-Empfehlungen, aber Sie werden hier beim Lesen herausfinden , dass es Hunderttausende von Webhosts gibt, von denen die überwiegende Mehrheit die WordPress-Mindestanforderungen erfüllt W Press hat beschlossen, Ihnen die Arbeit zu erleichtern und hat beschlossen, Ihnen die drei besten Empfehlungen zu geben die drei besten Empfehlungen Jetzt habe ich persönlich Blue Host benutzt. Und vor langer Zeit, als ich anfing, Wpress zu benutzen, habe ich wpress.com ausprobiert, und Sie sollten workpress.com nicht mit workpress.org verwechseln Wpress.org ist die Plattform, die von der Work Press Foundation betrieben wird, denn denken Sie daran, dass Wpress Open Source ist . . Und wpress.org bietet Ihnen Remember mit dem W Press-Download und allem, was Sie über W Press wissen müssen Aber jetzt, wenn es um Hosting geht, gibt es einen speziellen Dienst namens wpress.com. Lass mich ihn einfach öffnen Dies ist eine Plattform , die Ihnen Tools und Hosting zum Erstellen Ihrer Website bietet . Es sind wie Wochen. Wenn Sie Wochen gesehen haben, wissen Sie, dass Sie, wenn Sie eine Website auf Wochen aufbauen, nicht darüber nachdenken müssen, wo Sie das Hosting bekommen sollen , weil sie die Website für Sie hosten. Sie geben Ihnen lediglich die Tools, mit denen Sie sofort mit dem Aufbau Ihrer Website beginnen können. Aber natürlich hat es seine Grenzen, genauso wie Weeks seine Grenzen hat, wenn Sie es mit der Installation von Wordpress selbst auf einem Server vergleichen. Wenn Sie W Press irgendwo auf einem Server installieren, haben Sie mehr Kontrolle, um viel mehr Dinge zu tun, über die Sie keine Kontrolle haben , wenn Sie einen gehosteten Dienst wie wordpress.com verwenden . Aber natürlich ist es ein netter Ort, du ausprobieren kannst, wenn du willst. Jetzt, auf persönlicher Ebene, verwende ich Namenschip. Vor allem, wenn ich nur mit einigen Ideen experimentiere, bevor ich mich dazu entscheide, ein spezielles Webhosting für diese spezielle Idee zu kaufen spezielles Webhosting für diese spezielle Idee Name Chip bietet hier also mehrere Dienste an. Eines davon ist dieses verwaltete WordPress-Hosting und die Migration zu Wordpress. Aber ein anderer Service heißt Shared Hosting. Wenn ich das öffne, haben wir hier diesen Stela Stela Plus-Plan, und ich werde dir sagen, warum ich ihn gerne verwende Nummer eins, sieh dir diese unbegrenzten Websites an. Das heißt, wenn ich etwa zehn Ideen für verschiedene Websites habe, habe ich zehn Ideen. Vielleicht werde ich keinen E-Commerce-Shop eröffnen . Ich werde kein Kosmetikgeschäft eröffnen. Ich werde keinen persönlichen Blog eröffnen. Vielleicht werde ich keine soziale Gemeinschaft eröffnen . Vielleicht möchte ich ein Forum einrichten. Das sind fünf verschiedene Ideen. Ich kann all diese Websites im Rahmen dieses Plans hosten , ohne für jede Website ein separates Hosting kaufen zu müssen. Ich kann im Rahmen dieses Plans eine unbegrenzte Anzahl von Websites hosten lassen, und ich kann diese Gebühr nur pro Monat zahlen. Natürlich gibt es in diesem ersten Jahr einen Rabatt, aber im zweiten Jahr zahlen Sie 68,88€ pro Jahr Aber denk mal drüber nach. Wenn Sie drei oder vier Ideen für verschiedene Websites haben und herausfinden möchten, welche davon funktioniert, bevor Sie voll und ganz darauf festlegen, einen speziellen Webhosting-Plan dafür zu erwerben. Sie können die Website im Rahmen dieses Plans erstellen. Erstellen Sie die vier Websites. Es wird live im Internet sein. Sie können damit beginnen , Leute über Links in den sozialen Medien, die nur mit den vier Websites verknüpft sind, auf diese Website zu schicken , Leute über Links in den sozialen Medien, die nur mit den vier Websites verknüpft sind, auf diese Website . Und wenn sich eine der Websites wirklich durchsetzt und viel Traffic anzieht, können Sie jetzt entscheiden ob sich diese Website durchsetzt Lassen Sie mich also separat einen speziellen Webhosting-Plan dafür besorgen separat einen speziellen Webhosting-Plan dafür Und dann können Sie es einfach auf das dedizierte Hosting migrieren , denn jetzt ist es eine Idee , die auf den Weg gebracht wurde. Der Rest kann als experimentelle Websites bleiben, aber sie sind immer noch live online. Aber das Gute ist, dass Sie für einen Hosting-Plan bezahlen. Sie zahlen nicht unterschiedliche Hosting-Pakete für die verschiedenen Websites. Und aufgrund dieser Vorteile kann ich natürlich eine solche Website erstellen. Das ist die Website, die ich dir gerade gezeigt habe. Lass mich einfach zum Frontend gehen. Dies ist die Referenz-Website, die ich während der Vorbereitung dieses Kurses erstellt habe, und ich habe sie natürlich erstellt, damit wir während der Arbeit an dem Kurs eine Website haben können . Vor diesem Hintergrund ist dies eine der Websites, die ich Rahmen dieses Plans gehostet habe. Und es ist unter dieser Domain für. In diesem Kurs werden wir nun unsere Website erstellen, und ich werde einen anderen Domainnamen verwenden, nämlich wordpress everything.com, und er wird auch unter diesem Also werde ich diese beiden Websites, Demo-Websites, unter demselben Hosting Deshalb benutze ich das. Aber jetzt habe ich mir zu viel Zeit genommen, darüber zu sprechen. Ich versuche nicht, dich davon zu überzeugen, das zu bekommen. erkläre nur die Gründe dafür, was ich verwende und wie ich arbeite, denn vielleicht finden Sie es nützlich, aber denken Sie daran, Sie können jederzeit hierher gehen und diese anderen Webhosts ausprobieren Sie sind auch gut. Geh und probiere sie aus, wähle die, die du willst. Und wenn du das getan hast, lass uns wieder hier rein gehen. Wie Sie hier sehen können, haben wir Domains. Name Chip ist einer der besten Domainnamen-Verkäufer der Welt. Sie haben die Werbung überall auf YouTube und auf verschiedenen Websites gesehen auf YouTube und auf verschiedenen Websites Sie können nach Ihrer Website suchen. Sagen wir Charity Today.com. Lass uns sehen, wie viel das ist. Ordnung. Charity today.com ist die Premium-Domain Es sind 1.700$. Aber wir haben auch andere günstigere Domains, Charity Today Dot Es liegt an Ihnen, kreativ zu werden und einen Domainnamen zu kaufen, mit dem Sie leben können, einen Domainnamen, der Sinn macht. Natürlich möchten Sie den Namen Ihrer Wohltätigkeitsorganisationen oder Ihres Startups verwenden . Wenn Sie nach Mitteln für Technologieprojekte und nicht für wohltätige Zwecke suchen , können Sie auch einfach den Namen Ihres Unternehmens verwenden. Mein Unternehmen today.com. Und wie du siehst, y. Also spiel einfach damit herum und wenn du bereit bist, kannst du es zur Karte hinzufügen Aber denken Sie daran, wenn wir zum Shared Hosting zurückkehren Sie diesen Plan kaufen, erhalten Sie einen kostenlosen Domainnamen. Das bedeutet, dass Sie die Möglichkeit haben , im ersten Jahr einen kostenlosen Domainnamen zu erhalten , ohne das Geld ausgeben zu müssen , das wir uns gerade angesehen haben. Sie müssen für das erste Jahr keinen Domainnamen kaufen , aber natürlich müssen Sie den Domainnamen ab dem zweiten Jahr bezahlen . 5. WordPress-Online-Installation: Nachdem Sie W Press-Webhosting und einen Domainnamen gekauft haben , können Sie WPs online installieren da wir Zugriff auf das sogenannte C-Panel haben Es ist das C-Panel, das uns die Umgebung bietet, die über alle Tools und Funktionen verfügt, die wir benötigen, um eine Wpress-Website online zu installieren Lassen Sie uns also weitermachen und das jetzt tun. Also hier bin ich auf meiner Name-Chip-Anmeldeseite und werde mich einfach sofort anmelden. Also klicke ich auf Anmelden. Namenschip, wir wollen das verifizieren. In Ordnung, also muss ich das verifizieren. Also lass mich ganz schnell meine E-Mails ansehen. Und da haben wir's. Und jetzt sind wir dabei. Wenn Sie also Name-Chip-Webhosting gekauft haben , um auf die C Panel Go to Hosting-Liste zuzugreifen , finden Sie dort alle Ihre Webhosting-Angebote. Und denk dran, ich habe Stela Plus gekauft. Also lass uns weitermachen und auf Gehe zu C Panel klicken. Und wir werden zum C-Panel weitergeleitet. Und hier sind wir. Unabhängig davon, für welchen Webhost Sie sich entschieden haben, sollte Ihr C-Panel nun in etwa so aussehen. Vielleicht fehlen einige der Einstellungen, oder Sie haben mehr Einstellungen als ich, aber die meisten Einstellungen hier sind identisch. Eines der wichtigsten Tools, die Sie dort finden , heißt Sftaculs Und Softaculs ermöglicht es uns , verschiedene Arten von CMS zu installieren W Press ist ein Beispiel für ein CMS Sie können also direkt hier auf W press oder auf den Installer für Spectaculs Apps klicken Also mache ich einfach weiter und klicke auf W Press. Und jetzt werden wir zu der Seite weitergeleitet, auf der wir alle von uns installierten Wpress-Websites verwalten oder neue installieren können der wir alle von uns installierten Wpress-Websites verwalten oder neue installieren Wenn ich nach unten scrolle, werden Sie feststellen, dass wir bereits eine W Press-Website installiert haben bereits eine W Press-Website installiert Und denken Sie daran: Da wir Stella Plus verwenden, können wir unter Stella Plus eine unbegrenzte Anzahl von Websites installieren . So können wir eine brandneue Instanz von Wordpress installieren. Ich werde weitermachen und auf Jetzt installieren klicken Wir werden dann auf diese Seite weitergeleitet, auf der wir alle Details für unsere Website bereitstellen. Beginnen Sie mit einem Protokoll. Ich verwende gerne HTTPS. Stellen Sie sicher, dass am Ende das S für Sicherheit steht, www website.com, aber Sie können auch HTTPS website.com verwenden Nun, wenn Sie kein SSL-Zertifikat haben, werden Sie kein HTTPS haben, Sie werden nur HTTP haben, aber das wird aber das Stellen Sie sicher, dass Sie ein SSL-Zertifikat haben. Wenn ich das jetzt auswähle und nach draußen klicke, wird kurz überprüft, ob ich ein SSL-Zertifikat installiert habe, und wenn ja, ist es okay. Wenn ich das nicht tue, wird mir mitgeteilt, dass ich HTPS nicht wählen kann. Als Nächstes wähle ich die Domain aus, unter der ich diese Instanz von Word Press installieren werde Weil meine Referenzwebsite in Worpress Everything.com ist Ich werde fX pod.com wählen, nichts . Füge hier nichts hinzu. Andernfalls muss Ihre Homepage WWW sein, Ihr Domain-Namen-Schrägstrich, was auch immer Sie hier eingeben Das wird deine Homepage sein. Normalerweise möchtest du nur, dass deine Homepage wbsite.com ist. Also füge hier nichts hinzu. Dann gebe ich einen Namen für unsere Website an. Also Online-Shop. Kaufe alles bei uns. Das ist eine Beschreibung unserer Website. Und dies sind die Anmeldeinformationen, mit denen Sie sich in Ihr Wpress-Dashboard einloggen Wenn Sie nicht über das C-Panel auf Ihr Dashboard zugreifen möchten , können Sie einfach auf die Anmeldeseite Ihrer Wpress-Website gehen und sich in Ihr Dashboard einloggen Stellen Sie also sicher, dass Sie ein sicheres Passwort und einen starken Benutzernamen haben und einen starken Benutzernamen Ich werde das einfach auf der Standardeinstellung belassen . Und hier sind einige Plugins, die mit W Press vorinstalliert sind. Wenn du sie überprüfst, werde ich einfach das und das entfernen. Also ich habe keine davon hier. Sie können sich auch für Backups für Ihre Website entscheiden. Belassen Sie es auf der Standardeinstellung. Sie können wählen, ob Sie Ihre Website einmal pro Woche oder einmal im Monat sichern möchten, was auch immer Sie möchten. Also wähle ich einfach einmal pro Woche. Rotation vielleicht zwei. Es gibt immer zwei Kopien von Backups, von denen eine älter ist als die andere, zu einem bestimmten Zeitpunkt. Sie können hier auch eine E-Mail angeben , an die eine Benachrichtigung gesendet wird , sobald die Installation abgeschlossen ist. Ich muss das nicht tun, also klicke ich einfach auf Installieren. Und verlasse diese Seite nicht bis der Fortschrittsbalken 100% erreicht hat. Und da haben wir es. ist Wordpress installiert und bereit. Hier ist eine URL zu unserer Homepage und hier ist eine URL zu unserem Dashboard. Gehen wir zur Startseite. Und das ist das Standarddesign , das mit Wordpress geliefert wird, und so sieht unsere Website aus. Hier ist unser Domainname. Gehen wir wieder rein und gehen wir zum Dashboard. Sie auf Link in neuem Tab, und hier befinden wir uns im Dashboard unserer WordPress-Websites Wir haben W press also erfolgreich auf einem von unserem Webhost bereitgestellten Online-Server installiert einem von unserem Webhost bereitgestellten Online-Server Und wenn unsere Wpress-Website fertig ist, wollen wir uns ansehen, wie man ein Wpress-Plug-In offline installiert . Wir sehen uns in Kürze 6. Installieren eines Plug-Ins Offline: Nachdem wir Wor Press sowohl lokal als auch online installiert haben , ist es an der Zeit, sich einen schnellen Überblick über Elementor zu verschaffen Für diese Lektion werden wir nun die lokale Installation verwenden, und das liegt daran, dass ich Ihnen auch zeigen möchte, wie Sie Plug-ins lokal installieren Nun, da wir diese lokale Installation von Word Press haben, ist es an der Zeit, Element zu installieren Also gehe ich zu Plugins und füge neue hinzu. Los geht's. Und weil ich mit dem Internet verbunden bin, diese Plug-ins, die sich im WordPress-Verzeichnis befinden werden diese Plug-ins, die sich im WordPress-Verzeichnis befinden, hier aufgelistet. Aber wie ich bereits erwähnt habe, liegt das daran, dass ich online bin. Wenn Sie offline sind, können Sie nicht auf Jetzt installieren klicken. Ich glaube sogar nicht, dass Sie hier irgendwelche Plugins sehen können , weil Sie kein Internet haben. Sie müssen also hierher kommen, um ein Plug-In hochzuladen, und dann müssen Sie eine Datei auswählen. Das bedeutet, dass es sich bei der ausgewählten Datei um eine Datei handelt, die Sie zuvor heruntergeladen haben, als Sie mit dem Internet verbunden waren. Laden wir also die Datei herunter, die wir hier hochladen werden. Laden wir Elementor herunter. Elemento einstecken. Sobald wir auf Elemento-Plug-in geklickt haben, gehen Sie nicht zur Elemento-Website, wpress.org Slash-Plug-ins Hier können Sie es herunterladen. Ich werde darauf klicken. Wir werden zu wpress.org weitergeleitet Denken Sie noch einmal daran, dass wir Wpress von hier heruntergeladen haben. Aber jetzt sind wir dieses Mal unter Extend. Warten wir einfach, bis der Ladevorgang abgeschlossen ist. Im Moment befinden wir uns unter Extend Plug-ins. Element „Plug-ins“. Also hier drin, ich werde einfach auf Herunterladen klicken. Sie können hier über Lamenta lesen, wenn Sie möchten. Wir laden es herunter und jetzt ist es hier. jetzt wieder reingehe, sage ich „Datei wählen“, und ich meine Seitendownloads, wie Sie hier sehen können, ist Lamenta 3.232, dann Klicken Sie dann auf Jetzt installieren. Dann aktiviere das Plugin. Jetzt werden wir durch diesen Einrichtungsassistenten geführt. Du musst kein Konto erstellen, um Elementor verwenden zu können, also überspringe ich es einfach Sie können mit dem Hello-Thema fortfahren, das von Elementor oder dem Elementor-Team erstellt und verwaltet wird, oder Sie können Ihr eigenes bevorzugtes Theme verwenden Wir werden ein Theme namens Astra verwenden, also werden wir diesen Teil überspringen Jetzt brauchen wir diese Profi-Funktionen nicht, weil wir Elementor kostenlos verwenden, also überspringe das Und jetzt können wir eine leere Leinwand bearbeiten oder eine professionell gestaltete Vorlage oder eine Vorlage auswählen professionell gestaltete Vorlage oder eine Vorlage , die wir bereits erstellt Aber unabhängig davon, welche Option wir hier wählen, einschließlich Skip, generiert Elemento automatisch Elementor-Beispielseite, eine Seite, die mit Elementor bearbeitet werden kann Lassen Sie mich also auf Überspringen klicken. Und jetzt hat Elementa diese Seite automatisch generiert, weil sie uns zum Editor führen muss , damit wir uns einen schnellen Überblick darüber verschaffen können , worum es bei Elemento geht Hier erzählen sie uns also von KI-Funktionen, auf die wir zugreifen können , wenn wir wollen, aber das bedeutet, dass Sie ein Elemento-Konto benötigen . Also überspringe das Und jetzt ist hier die Beispielseite und sie heißt Elementor Nummer acht. Und lassen Sie mich es einfach sehr schnell veröffentlichen. Da haben wir's. Wir haben es veröffentlicht. Bevor wir einen kurzen Blick auf diesen Editor werfen, müssen wir nur darauf klicken und zu WordPress zurückkehren, wenn wir zum Dashboard zurückkehren möchten . Sobald wir zu W wechseln, wird Press zum Gutenberg-Editor für die Seite weitergeleitet Gutenberg-Editor für die Seite Hier nehmen Sie einige grundlegende Konfigurationen der Seite im Backend Wir werden sehen, wie das alles geht. Wenn Sie nun zu den WordPress-Einstellungen zurückkehren, sehen Sie, dass dies die Seite ist, die automatisch von Elementor generiert wurde automatisch von Elementor generiert Dies sind jedoch zwei zusätzliche Seiten, die mit der Neuinstallation von W Press geliefert wurden Wir brauchen diese beiden vorerst nicht. Wählen Sie sie aus und verschieben Sie sie dann in den Papierkorb und übernehmen Sie sie. Jetzt haben wir also diesen Elementor Nummer acht. Jetzt kann ich auf Bearbeiten mit Elementor klicken. Und wir werden zurück zur Grundlagenseite weitergeleitet Grundlagenseite der der Editor jetzt für uns zum Anschauen bereit ist Ich denke also, dass wir diese Lektion vorerst hier beenden werden. Zumindest wollte ich, dass wir sehen, wie man sich in eine Offline-Installation von W Press einklinkt. Das ist ein guter Ort, um anzuhalten. In der nächsten Lektion wollen wir uns einen Überblick darüber verschaffen, was all diese Teile bedeuten. Was sind das alles? Was sind all diese Einstellungen , wenn Sie Ihre Website erstellen? Sehen wir uns das in der nächsten Lektion an. 7. Elementor-Editor-Tour: Jetzt ist es an der Zeit, einen kurzen Blick auf den Editor zu werfen. Lass mich das einfach schließen. , haben wir auf Anhieb Wie Sie hier sehen können, haben wir auf Anhieb etwas, das Struktur genannt wird. Nun, das ist der neue Name. In früheren Versionen von Elementor wurde dies Navigator genannt, weil es ein Widget ist, das uns die gesamte Seite und alle Elemente, die wir auf der Seite haben, aus der Vogelperspektive zeigt ist, das uns die gesamte Seite und alle Elemente, die wir auf der Seite haben, aus der Vogelperspektive alle Elemente, die wir auf der Seite haben, aus der und wir schnell zu verschiedenen Teilen der Seite wechseln können Es zeigt uns auch die Struktur. Lass es mich dir ganz schnell zeigen. Solange wir noch hier sind, wenn ich zum Beispiel einen Container hinzufüge. Ziehen Sie einen Container dorthin und legen Sie ihn dort ab. auf dieses Pluszeichen klicke, ziehe ich ein Bildelement in den Container ziehe ich ein Bildelement und lasse mich vielleicht etwas anderes hinzufügen. Lassen Sie mich direkt unter diesem Container einen weiteren Container hinzufügen . Jetzt haben wir das. Lass mich da ein Video reinstellen. Dies ist nur ein Beispiel Lassen Sie uns auch einen weiteren Container direkt darunter hinzufügen Lassen Sie mich weitermachen und eine Überschrift hinzufügen. Wie Sie sehen können, zeigt uns unsere Struktur hier die Struktur der Seite, daher der Name. Der Namensnavigator war aber auch sehr relevant da Sie zu jedem Teil der Webseite navigieren können. Wenn ich also das und das zusammenfalle, wie Sie sehen können, haben wir einen Container. Ich bewege den Mauszeiger über diesen Container, wie Sie sehen können, es ist der Container, der all diese anderen Container umfasst Wenn ich das jetzt erweitere, haben wir ein Bild, und dieses Bild befindet sich also innerhalb des Aber dieser Container enthält auch diesen anderen Container , den wir später hinzugefügt haben. Denken Sie an diesen Behälter, er befindet sich in diesem äußeren Behälter. Deshalb verstecken wir, wenn wir das zusammenklappen, alles, was sich darin befindet. Aber jetzt gibt es in diesem Container ein Videoelement, das wir hinzugefügt haben. Wenn wir das erweitern, haben wir das Video und darin haben wir auch einen weiteren Container, den wir hinzugefügt haben, und jetzt enthält dieser Container diese Überschrift. Es ist wie eine Hierarchie oder, wie der Name schon sagt, Struktur. Das ist Nummer eins. Wie Sie bemerkt haben, füge ich hier auf der linken Seite Elemente hinzu, indem ich auf dieses Pluszeichen klicke. Wenn ich noch etwas hinzufügen möchte, klicke ich auf dieses Plus, und ich kann von hier aus jedes beliebige Element hinzufügen. Hier oben haben wir zusätzliche Einstellungen. Wenn ich die Seite veröffentlichen möchte, klicke ich einfach auf Veröffentlichen. Ich kann auch auf dieses Dropdownmenü klicken, um diese aktuelle Seite als Vorlage zu speichern , die ich später wiederverwenden kann. Wenn ich eine Vorschau der von mir erstellten Inhalte anzeigen möchte, möchte ich eine Vorschau dieser Seite anzeigen. Ich kann auf dieses Symbol klicken, aber zuerst veröffentlichen wir es und klicken dann auf Änderungen in der Vorschau anzeigen. Es öffnet sich ein neuer Tab, und dort sehen wir unsere Seite so, wie sie jetzt aussieht. Hier drin haben wir ein paar andere zusätzliche Dinge, die ich nicht benutze. Dann haben wir hier Responsive Design oder Responsive-Modus, Icons. Sobald Sie darauf klicken, wechselt es in den Tablet-Modus und Sie können Ihre Webseite so optimieren , dass sie auf Tablets gut aussieht. Sie können auch auf diesen mobilen Bildschirm klicken um ihn auf die mobile Bildschirmgröße umzustellen, und wir können jedes einzelne Element so anpassen , dass es auf Mobilgeräten gut aussieht. Wenn wir uns in einem bestimmten Modus befinden, z. B. im mobilen Portraitmodus, die Änderungen, die wir an den Elementen vornehmen gelten die Änderungen, die wir an den Elementen vornehmen, nicht für Tablets oder Desktops. Sie gelten nur für den mobilen Modus. Und wir werden sehen, wie das geht, wenn wir gegen Ende des Kurses unser Landingpage-Klassenprojekt optimieren unser Landingpage-Klassenprojekt . Wir werden also lernen, wie man diese responsiven Tools verwendet. Die andere Sache, die Sie wissen müssen, ist, ob ich diese Panels hier zusammenklappen würde. Alle diese Panels enthalten Elemente, die wir in unseren Arbeitsbereich auf unsere Seite ziehen können . Wenn wir öffnen, lass mich das in Ordnung bringen, lass mich das schließen. Wenn wir zum Layout übergehen, haben wir zwei Hauptelemente, Container und Grid. Ich benutze den Container gerne. Dies kann all diese anderen verschiedenen Arten von Elementen enthalten , die wir hier finden. Der Container enthält im Grunde andere Elemente Ihrer Webseite. Wenn wir zu Basic wechseln und es erweitern, das Layout reduzieren, haben wir in Basic die am häufigsten verwendeten Elemente wie Überschriften, und Sie können es hier bearbeiten oder indem Sie direkt hier reingehen und es direkt in Ihrer Arbeit bearbeiten. Was haben wir sonst noch? Wenn wir hinzufügen sagen, haben wir auch einen Absatz , der von Elementor als Texteditor bezeichnet wird Da haben wir's. Du kannst diesen Text ändern. Und jedes Mal, wenn Sie Ihrem Arbeitsbereich ein Element hinzufügen , hier in Ihrem Editor. Mit anderen Worten, jedes Mal, wenn Sie ein Element per Drag-and-Drop auf Ihre Seite ziehen. Sobald Sie es ablegen und es immer noch das aktive Element ist, wird es von einem solchen Umriss umgeben sein, und die Einstellungen hier beziehen sich auf dieses spezifische Element. Wie Sie sehen, heißt es im Moment „Schaltfläche bearbeiten“, weil ich die Schaltfläche gerade gelöscht habe . Inhalt ist der Inhalt des Elements. Zum Beispiel der Textinhalt, erfahren Sie mehr. Das ist ein Inhalt. Jetzt besteht das Styling darin, das Erscheinungsbild des Elements zu ändern. Dies dient dazu, dem Element Inhalt hinzuzufügen. Wenn es sich um ein Bildelement handelt, das Hinzufügen von Inhalten, z. B. das Hinzufügen eines Bilds. Wenn es sich um eine Schaltfläche handelt, wird Inhalt hinzugefügt , z. B. das T des Elements. Dann haben wir den Stil, der das Aussehen des Elements verändert. Wir können die Farbe und den Button ändern. Normale Farbe. Wir können sagen, dass es schwarz sein sollte und wenn der Hover aktiviert ist. Das ist normal beim Schweben. Wir wollen, dass es, sagen wir, rot ist. Beim Schweben ist es rot und im Normalmodus ist es schwarz. Das Gleiche können wir auch für die Texte tun. Auf Normal ist das die Standardfarbe, die weiß ist, und wenn wir mit der Maus darüber fahren, können wir sagen, wir wollen, dass die Textfarbe, sagen wir, hellblau sein soll Also einfach so. Das nächste Ding lässt das zusammenbrechen. jetzt sehen können, steht im Pro-Panel Wie Sie jetzt sehen können, steht im Pro-Panel Upgrade und Sie werden feststellen, dass jedes Element ein kleines Schlosssymbol hat . Das heißt, wenn Sie darauf klicken, können Sie es nicht in Ihre Arbeit ziehen , weil Sie ein Upgrade durchführen müssen. Alles andere hier ähnelt also den anderen beiden, die wir uns angesehen haben. Jetzt gibt es noch eine weitere Einstellung, von der ich gerne sicherstelle, dass sie aktiviert ist. Wenn Sie hier auf Benutzereinstellungen klicken, gibt es diese Einstellung namens Schnellbearbeitungsoptionen anzeigen. Lass mich dir zeigen, was es macht. Wenn ich jetzt mit der Maus über diese Ecke fahre, wenn ich zum Beispiel diesen Text duplizieren möchte, muss ich hierher gehen, muss ich hierher gehen rechten Maustaste klicken und dann duplizieren Gehen Sie hierher, klicken Sie mit der rechten Maustaste auf Duplizieren. Das sind zwei Schritte , die ich unternehmen muss, um ein Element zu duplizieren. Aber wenn ich zum Beispiel Benutzereinstellungen und Schnellbearbeitungsoptionen aktiviert hatte , wenn ich den Mauszeiger darüber bewege, haben wir jetzt, wie Sie sehen können, hier schnelle Aktionen. Das ist zum Beispiel ein Duplikat. Also muss ich nur mit der Maus darüber fahren und duplizieren. Diese Schnellaktionssymbole hier helfen Ihnen also wirklich dabei, Ihre Arbeit viel schneller zu erledigen Ich denke, im Moment hatten wir einen schönen Überblick über den Editor. Was auch immer noch übrig ist, können wir lernen, wenn wir unsere Landingpage erstellen. Aber das war nur eine Möglichkeit, dir die verschiedenen Teile von Elementor vorzustellen dir die verschiedenen Teile von Elementor nun in der nächsten Lektion Lassen Sie uns nun in der nächsten Lektion mit dem Erstellen der Kopfzeile beginnen Die Kopfzeile besteht aus dieser Schaltfläche, dem Menü und dem Logo Schauen wir uns also in der nächsten Lektion an, wie das erstellt wird. Wir sehen uns in Kürze. 8. Installiere ein WordPress-Theme: Da, willkommen zurück. Jetzt ist es an der Zeit, mit der Arbeit an der Landingpage zu beginnen, und der erste Platz ist der Header. Wir müssen das erstellen. Aber bevor wir das tun, müssen wir zunächst ein WordPress-Theme installieren , da das WordPress-Theme bestimmt , wie Ihre Website oder Webseiten aussehen werden. Wenn ich also in ein Wordpress gehe, lass mich sehen. Also, jetzt sind wir mit dem elementaren Editor fertig. Also ich gehe einfach zu ist nicht veröffentlicht, also lass mich einfach auf Veröffentlichen klicken und dann zu Wordpress zurückkehren. Das ist Element acht, komplett beenden. Hier sollten Sie sich jetzt befinden, denn wir werden sofort ein Wordpress-Theme installieren . Nun, das ist die Offline-Version unserer Website. Ich werde Ihnen zeigen, wie Sie ein Wordpress-Theme offline installieren, und dann werden wir online wechseln , weil wir von da an mit der Online-Version fortfahren werden. Jetzt sind wir also offline. Wie Sie sehen können, lokaler Host. Also Erscheinungsbilder, und das sind natürlich die Standardthemen, die je nach Jahr bei jeder Neuinstallation von Work Press mitgeliefert jeder Neuinstallation von werden. Da wir uns im Jahr 2024 befinden, heißt das aktive Theme standardmäßig 2024. Letztes Jahr war es 2023, und im Jahr davor war es das. Im nächsten Jahr wird das Standardthema also offensichtlich 2025 sein. Da unser Thema hier jedoch nicht aufgeführt ist, können wir sagen, neues Thema hinzufügen. Und unser W Press wird das W Press-Themenverzeichnis öffnen . Wir werden einen ähnlichen Prozess wie beim Upload oder der Installation von Plug-ins verfolgen . Weil wir sagen, Theme hochladen, dann wähle ich eine Datei aus, die du bereits heruntergeladen hast, ein Theme, das du bereits gekauft und heruntergeladen hast. Ich hatte das Theme also nicht heruntergeladen. Ich gehe zurück zu workpres.org. Aber jetzt, dieses Mal, werde ich die Themen erweitern. Und hier suche ich nach Astra, aber normalerweise ist es unter den ersten drei. Hier ist es, aber du kannst auch nach Astra suchen, eingeben und schon ist es da. Ich wähle das aus und lade es dann herunter. Da haben wir's. Es wird heruntergeladen. Und jetzt wird Astra heruntergeladen. Wenn ich wieder reingehe, wähle ich Datei, gehe zum Herunterladen von Astra, öffne es und installiere es jetzt. Packen wir das Paket und dann machen wir weiter und aktivieren es. Und jetzt ist Astro das aktive Thema. So macht man es also offline. Jetzt werde ich zu meiner Online-Version der Website wechseln . Hier bin ich auf einem anderen Domainnamen vor. Und ab jetzt werden wir die Landingpage auf dieser Seite erstellen. Aber jetzt weißt du zumindest, wie man offline arbeitet. Wenn wir jetzt zu den Themen des Erscheinungsbilds gehen, ist es hier die gleiche Situation. Standardmäßig ist das Design 2024 aktiv, aber wir möchten Neues hinzufügen sagen. Aber dieses Mal können wir es direkt aus dem Wordpress-Themenverzeichnis installieren, anstatt laut zu sagen , weil Sie mit dem Internet verbunden sind können wir es direkt aus dem Wordpress-Themenverzeichnis installieren , weil Sie mit dem Ich sage dann Astra installieren. Und dann aktivieren. Los geht's. Ein so aktives Thema ist Astra. Lassen Sie mich das zusammen mit dem schließen. Und jetzt haben Sie ein aktives Thema und können mit dem Aufbau der Landingpage beginnen. nun in der nächsten Lektion sehen, Lassen Sie uns nun in der nächsten Lektion sehen, wie Sie mit der Kopfzeile beginnen können. Wir sehen uns also in Kürze. 9. Installieren von ElementsKit: Fangen wir also mit dem Header an. Aber bevor wir das tun, möchte ich all diese Tabs schließen . Einfach so. Also bleibt uns das als Referenz-Landingpage übrig. Wir werden zurückkommen, um uns den Bereich anzusehen , den wir gerade erstellen, nur um uns ein Bild davon zu machen, was wir gerade bauen. Um den Header zu erstellen, müssen wir nun ein Plug-In eines Drittanbieters verwenden. Gehen wir also in unseren Arbeitsbereich. Ich möchte zu Plug-ins gehen. Neues hinzufügen. Lassen Sie mich zunächst einfach auf Plug-ins klicken, damit wir sehen können , welche installiert sind. Acis Met und Hello Dolly kommen mit überall zur Installation . Also wähle ich die beiden aus, lösche sie dann und bewerbe mich. Okay. Und anscheinend installiere ich auch Loginizer, während ich Work Press Inside Spectacular Also werde ich es einfach auch löschen. Im Moment haben wir keine Plugins installiert. Ich sage „Neu hinzufügen und gebe Elementor Denn denk dran, ich habe dir gezeigt, wie man Elementor offline installiert Jetzt benutzen wir die Online-Website und ich muss Elementor hier installieren Ich sage jetzt installieren. Und es ist installiert. Bevor ich auf Aktivieren klicke, schau dir einfach diese anderen Elementor-bezogenen Add-Ons Wie Sie sehen können, wurde Elementor von elementor.com erstellt, aber diese anderen wurden von Drittanbietern entwickelt Das, das wir verwenden werden , um unseren Header zu erstellen, ist das Elements Kit von Ich sage einfach jetzt installieren. Da haben wir's. Lassen Sie mich jetzt einfach zuerst Elementa aktivieren Ich denke, wir werden durchgehen , dass wir diesen Einrichtungsassistenten nicht ausführen müssen, aber Sie werden möglicherweise aufgefordert, ihn durchzugehen Also los geht's. Ich werde auch Lamentski Light aktivieren. Da haben wir's. Wenn ich jetzt mit der Maus über Elements Kit Light werden Sie feststellen, dass wir eine Header-Fußzeile haben, fahre, werden Sie feststellen, dass wir eine Header-Fußzeile haben, und hier werden wir unsere Kopfzeile erstellen Aber lassen Sie mich vorher einfach auf Elements Kit klicken, damit wir den Einrichtungsassistenten durchgehen können, um es fertig zu machen Dies sind nun grundlegende Einstellungen, mit denen festgelegt wird, was automatisch voraktiviert wird, während wir an unserer Seite arbeiten. Dies sind beispielsweise die verschiedenen Widgets, die auf unserer Seite angezeigt werden, wenn wir sie bearbeiten. Ich klicke zum Beispiel mit der rechten Maustaste auf diesen Link in neuem Tab öffnen, öffne ihn und öffne diese Beispielseite, um ihn zu bearbeiten. Lass mich all diese schließen und mit Elementor bearbeiten. Lass mich das schließen. Also, wenn ich das zusammenfalle, wie Sie sehen können, als wir Elements Kit installiert haben, wurde es automatisch zu dieser Liste von Panels im Elementeditor hinzugefügt . Also Elements Kit und Elements Kit Kopf bis Fuß. Das sind also Elemente, die bereits voraktiviert sind , weil das Plug-In installiert wurde Aber wenn wir jetzt hierher kommen und sagen, wir wollen fortgeschritten sein, werden einige weitere Elemente hier aktiviert, und sie werden uns genau hier zugänglich sein. Wenn wir einfach Basic wählen, einige dieser Widgets ausgeschaltet und wir werden sie hier nicht sehen können, und wir werden sie hier nicht sehen können um sie für unsere Arbeit zu verwenden . Wenn ich zum Beispiel „Erweitert“ auswähle, sieh dir diese Widgets hier an. Los geht's, wie du sehen kannst, ist wi get Builder jetzt standardmäßig aktiviert. Nächster Schritt, weiter, weiter, weiter, Änderungen speichern. Und jetzt sind wir fertig. Also sind wir fertig mit dem Zauberer. Und ich denke, wir sind bereit, mit einem Header anzufangen. Wenn ich also auf Kopf- und Fußzeile klicke, wie Sie gerade sehen können, haben wir keine Kopf- oder Fußzeile Was wir also tun müssen, ist Neues hinzufügen zu sagen. Aber das werden wir in der nächsten Lektion tun. Wir sehen uns in Kürze. 10. Erstelle ein Header-Logo und eine Schaltfläche: Und wir sind bereit, einen neuen Header zu erstellen. Sagen wir also „Neu hinzufügen“, und jetzt geben wir ihm hier natürlich den Namen Header, und es ist ein Header. Wenn es an der Zeit ist, eine Fußzeile zu erstellen, werden wir auch hierher kommen und die Fußzeile auswählen Aber jetzt kommen wir zur Kopfzeile, und natürlich möchten wir, dass sie auf der gesamten Site sichtbar auf der gesamten Site sichtbar Wenn Sie möchten, dass es nur auf bestimmten Seiten oder Teilen verfügbar oder sichtbar ist, müssen Sie die Pro-Version des Pluggings Dann lass es uns auch aktivieren. Das heißt, lassen Sie uns es jetzt sichtbar machen. Wenn wir Wartungsarbeiten durchführen und nicht möchten, dass Benutzer es sehen, können wir es deaktivieren, aber wir werden es nicht gelöscht haben Jetzt, wo wir es im Grunde fertig haben, können wir sagen, Inhalt bearbeiten, und wir werden zum Frontend weitergeleitet , wo wir es jetzt visuell bearbeiten können Aber im Moment können wir die Änderungen einfach speichern. Selbst wenn wir auf Inhalt bearbeiten klicken, werden die Änderungen ebenfalls gespeichert. Keine Sorge. Ich möchte nur die Änderungen speichern damit Sie sie hier aufgelistet sehen können. Aber jetzt können wir auf Bearbeiten klicken und jetzt hierher zurückkehren und Inhalt bearbeiten sagen. Und jetzt werden wir zum Frontend weitergeleitet, wo wir jetzt anfangen können , visuell daran zu arbeiten. Hier sind wir. Denken Sie daran, was wir erstellen, ist dieser Abschnitt genau hier. Zuallererst ist er in eins, zwei, drei unterteilt. Gehen Sie in die Strukturen hinein und beginnen Sie mit einem Flexbox-Container oder einem vereinbarten Container Ich verwende gerne Flexbox-Container. Also klicke ich auf Flexbox, und hier werden wir verschiedene freie Strukturen sehen , die wir schnell verwenden können. Wie wir gesehen haben, haben wir also eine, zwei, drei Spalten. Diese drei sind okay. Das Menü wird in der Mitte erscheinen, das Logo hier. Tatsächlich können wir auf dieses Pluszeichen klicken und ein Bild hinzufügen. Lass es dort fallen und das wird unser Logo sein. Also lass mich weitermachen und das auswählen. D. Wir haben nichts in unserer Mediathek. Laden Sie also Dateien vom Gerät hoch und wählen Sie Dateien aus. Und ich hatte hier einen Ordner namens Assets vorbereitet , diesen Ordner. Es enthält alle Bilder, die ich auf der Referenzseite verwendet habe, nur für den Fall, dass Sie diesen Bildern folgen möchten. Sie finden also direkt unter diesem Videoplayer auf der Registerkarte Projekte und Ressourcen einen Ordner namens Assets unter diesem Videoplayer . Sie können ihn herunterladen , um ihm zu folgen. Also werde ich alle Bilder hochladen , weil wir sie irgendwann verwenden werden . Und los geht's. Was ich brauche, ist das Logo. Ich wähle das Logo aus und los geht's. Ordnung. Nun, ich habe mich gerade daran erinnert. Wie habe ich das vergessen? Wir müssen diesen Hintergrund dunkel haben? Lassen Sie mich hier nochmal reingehen und zuerst die Seite genau so veröffentlichen, wie sie ist. Gehen wir nun zu den Seiteneinstellungen. Hintergrund, und geben wir ihm einen dunklen Hintergrund, indem Hintergrundtyp und dann die Farbe auswählen. Ich möchte es hier in den blauen Bereich ziehen und es dann irgendwo hinziehen. Ich möchte nicht, dass es so rein schwarz ist. Ich möchte eine dunkelblaue Atmosphäre haben. Speichern Sie die Änderungen. Und jetzt wurden die Änderungen wieder im Editor aktualisiert. Also zurück zum Editor, und hier sind wir. Das nächste, was wir hinzufügen möchten, ist eine Schaltfläche. Ich klicke hier, um eine Schaltfläche hinzuzufügen, und los geht's. Natürlich ist es nach links ausgerichtet. Wir können es nach rechts ausrichten, indem wir zum Stil gehen. Richtige Position. Und wir können auch den Inhalt ändern. Denken Sie daran, dass es beim Inhalt nur um den Inhalt selbst geht. Also, was haben wir hier? Fangen Sie an. Fangen Sie an. Und denken Sie daran, beim Stil geht es vor allem darum, das Aussehen von etwas zu verändern. Jetzt möchte ich ein Grün haben , das ungefähr so aussieht. also wieder reingehe und die Schaltfläche noch ausgewählt ist, wähle ich die Schaltfläche „Unterstil“, normale Farbe Geben wir es. Lass mich das Grün ziehen. Ich möchte, dass es irgendwo dort diesen Grünton hat. Und ich möchte, dass dieser Text diesen dunkelblauen Hintergrund hat. Geh wieder rein und im Hintergrund, kopiere das Blau. Schließen Sie das, wählen Sie die Schaltfläche aus und wechseln Sie zur normalen Textfarbe. Du brauchst diese dunkle Farbe, ich kontrolliere einfach Vd, und wenn du mit der Maus darüber fährst, kann es weiß sein, einfach so Veröffentlichen Sie und lassen Sie uns die Änderungen überprüfen. Klicken Sie in dieses I. So sieht es derzeit aus. Wie Sie sehen können, scheint es sich hier um etwas Erhabeneres zu handeln. Es scheint falsch ausgerichtet zu sein, wieder hier rein zu gehen. Zuallererst möchte ich es kleiner machen, wähle diesen Button genau hier. Gehe zu „Erweitert“. Lass mich die Polsterung aufbrechen. Marge Lassen Sie mich auch den Behälter auswählen, in dem es sich befindet. Jeder Container verfügt über Standardränder und -abstände. Wenn Sie diesen Container auswählen, gehen Sie weiter entfernen ihn, wie Sie sehen können, wurde er in die Ecken des Containers verschoben Ich werde dasselbe für diesen Container tun. Fortgeschritten. Mach das kaputt. Wählen Sie diesen Container als fortgeschritten aus. Mach das kaputt. Veröffentlichen Sie, überprüfen Sie die Änderungen. In Ordnung. Also kommen wir jetzt wenigstens irgendwohin damit. Sie scheinen richtig ausgerichtet zu sein. Und was jetzt noch übrig ist, ist dieses Menü. Und das werden wir in der nächsten Lektion hinzufügen und dann alles im Laufe der Zeit ausgleichen. Aber im Moment denke ich, dass dies ein guter Ort ist , um diese Lektion zu beenden. Lassen Sie uns in der nächsten Lektion das Menü hinzufügen. Also werde ich dich sehen. 11. Hinzufügen eines Nav-Menüs: Nachdem wir nun bereits eine Schaltfläche und ein Logo hinzugefügt haben, ist es an der Zeit, unser Nav-Menü hinzuzufügen. Also zurück in unseren Arbeitsbereich, wo sind wir? Sei verwirrt, O hier sind wir. Also, jetzt gehe ich wieder rein und lasse mich das schleppen. Vielleicht lassen Sie uns bis zu diesem Zeitpunkt veröffentlichen und sehen, was wir haben. Ordnung. Das schiebt einfach alles zur Seite. jetzt hier auf dieses Pluszeichen klicke, werden die Elemente angezeigt, und ich kann NV eingeben. Sie werden feststellen, dass wir das Elements Kit NV-Menü und ein weiteres NV-Menü haben. Und das ist von Elemento Pro. Deshalb hat es dieses Schloss und wir können es nicht benutzen. Also das Ziehen von Elementen im NV-Menü. Und wenn Sie es dort ablegen, wird es hier zum aktiven Element. Und da es das aktive Element ist, können wir ein Menü auswählen, das hier angezeigt werden soll. Wenn ich hier wechsle, ist das ein Menü, das aus vier Menüpunkten besteht. Und diese vier Menüelemente sind Seiten. Es sind Webseiten. Sie können andere Arten von Inhalten sein, aber es können auch Webseiten sein. Wenn Sie wieder hierher zurückkehren, sollte dieses Drop-down-Menü eine Liste aller Menüs anzeigen, die wir erstellt haben, aber wir haben noch kein Menü erstellt Wir müssen zum War-Press-Backend gehen und ein Menü erstellen, das Menüelemente enthält, und dann finden wir es hier aufgelistet. Lass mich das veröffentlichen. Gehen Sie dann zurück zum Ausgang zu War Press, und hier sind wir. Dann gehe ich zur Ansicht , zum Menü. Und hier sind wir, erstellen Sie unten Ihr erstes Menü, damit wir dem Menü einen Namen geben können. Geben wir es, lassen Sie uns mit meinem Menü weitermachen. Beachten Sie hier, dass wir Menüelemente hinzugefügt haben. Dies sind Menüelemente. Menüelemente können also Webseiten sein, sie können Blogbeiträge oder Artikel sein. Dies können benutzerdefinierte Links sein , die Sie erstellt haben. Dies können Kategorien sein, und in anderen Fällen kann es sich je nach verwendetem Thema um andere Inhaltstypen handeln. Aber jetzt, da wir unserem Menü einen Namen gegeben haben und es zum Hauptmenü machen wollen, wenn wir „Menü erstellen“ sagen. Jetzt wird dieser Bereich aktiv. Es war verblasst, aber jetzt ist es aktiv. Und denken Sie daran, dass wir einige Seiten haben, die bei der Installation von W Press automatisch von W Press generiert wurden generiert bei der Installation von W Press automatisch von W Press Eine davon war eine Beispielseite. Wenn ich VO sage, haben wir eine Startseite und eine Beispielseite. Das bedeutet, dass wir jetzt ein paar Menüelemente erstellen müssen, und ich möchte diese Startseite hinzufügen. Ich möchte sagen, ja, lassen Sie uns diese beiden als Beispiel hinzufügen. Zum Menü hinzufügen. Und hier sind wir. Es ist das Hauptmenü, Speichermenü. Da haben wir's. Wenn ich jetzt zum Elements-Kit gehe, Kopf- und Fußzeile und Rechtsleck öffne ich den Link zu einem neuen Tab, damit wir das intakt lassen können Hier ist der neue Tab. Hier, sagen wir, bearbeiten Sie mit Elementor. Hier sind wir Denken Sie daran, wir haben dieses Nav-Menü des Nav-Elements-Kits. Wenn wir nun hier das Menü auswählen, haben wir das M-Menümenü, das wir erstellt haben, und es enthält diese beiden Elemente, Home und Beispielseite. Lass uns das veröffentlichen. Solange es noch ausgewählt ist, wollen wir es im Grunde formatieren, sodass wir sehen können, dass die Elemente Stil reduzieren, Menüumbruch, Menüelementstil Gehen wir zu „Keine Typografie“, sondern „Farbe des Elementtextes“ über. Im Moment ist es schwarz, wir wollen, dass es weiß ist. O hover, wir wollen, dass es so grün ist. Lassen Sie mich diesen Button-Stil wählen. Geh hier hin. Drücken Sie C , um diese Farbe zu kopieren. Wählen Sie diese Option, um zum Elements-Kit-Menü zu wechseln. Wenn Sie die Schaltfläche auswählen, ändert sie sich in eine Schaltfläche Wenn Sie diesen Bereich auswählen, wird sie zum Container und zum Bild. Also du aktives Element. Also mit diesem ausgewählten Stil, Menüelement-Stil. der Maus darüber fahren, möchten wir, dass es die grüne Farbe ist, die wir gerade kopiert haben Wenn Sie mit der Maus darüber fahren, ist es jetzt grün. Und wenn es aktiv ist, möchten wir auch, dass es die grüne Farbe hat. Also veröffentlichen Lassen Sie uns die Änderungen überprüfen. Da haben wir's. Jetzt müssen wir sie auf die rechte Seite schieben. Gehen Sie hierher, wählen Sie den Inhalt des Nervenmenüs, horizontale Menüposition. Wir wollen es auf der rechten Seite haben. Einfach so. Bevor wir zu weit gehen, veröffentlichen Sie die Vorschau. Nun, da haben wir's. Aber jetzt werden Sie feststellen, dass sie immer noch falsch ausgerichtet sind Dagegen müssen wir etwas unternehmen. Gehen Sie wieder rein, solange das Menü noch ausgewählt ist, gehen Sie zu „Erweitert“. Lassen Sie uns das und die Marge durchbrechen. Für den unteren Rand reduzieren wir ihn ganz auf sagen wir 40. Auch der obere Teil, minus 40. Ordnung. Wählen wir nun den Container aus, der das Menü enthält. Es ist ausgewählt. Jetzt werden Sie hier feststellen, wir das Layout haben, wir haben den Inhalt gerechtfertigt und wir können ihn vertikal in der Mitte begründen. Wir können bis zum Anfang rechtfertigen, dass das oben steht, wie Sie an der längeren Zeile oben oder unten oder an diesen anderen sehen können . Aber der, an dem wir interessiert sind, ist dieser. Wenn Sie darauf klicken, wird es vertikal in der Mitte ausgerichtet. Lassen Sie uns das auch auswählen. Dieser Container. Lass uns hier dasselbe tun. Und dieser auch. Veröffentlichen Sie und lassen Sie uns die Änderungen überprüfen. Jetzt scheint also alles richtig ausgerichtet zu sein. Aber Sie werden hier feststellen, dass es breit ist. Es erreicht fast den Rand, und wir werden sehen, wie wir das machen können, weil unseres zu nah dran ist. Aber vorerst werden wir es dabei belassen. Wir werden die Größe ändern, wenn wir mit dem Aufbau des Heldenbereichs beginnen also vorerst, Ich möchte also vorerst, dass wir diese Menüelemente ändern Gehe zurück zum Menü. Gehen wir zurück zu den Seiten, und das sind die beiden Seiten, die wir haben. Rliik, füge neuen Link in neuem Tab öffnen hinzu, Rliik, Link in neuem Tab öffnen Und jetzt haben wir diese beiden Seiten. Ich möchte das etwa benennen. Klicken Sie sehr schnell auf Veröffentlichen. Guten Kit Vorlagenbibliothek. Ich weiß nicht, was das ist, aber ich glaube nicht, dass es ein Problem ist. Schließ das. Ich nenne diesen Kontakt Publizieren, Veröffentlichen. Ordnung. Aktualisiere diese Seite und jetzt haben wir sie. Ich möchte diese beiden auswählen und in den Papierkorb verschieben. Gehen wir zu den Darstellungsmenüs. Jetzt werden Sie feststellen, dass die Beispielseite ungültig ist, weil wir sie gerade gelöscht haben. Also entferne das. Diese Homepage ist ein benutzerdefinierter Link. Ich werde ihn einfach entfernen. Es ist keine Seite. Es ist ein benutzerdefinierter Link. Gehen wir hier zu den Seiten und sagen „ Über Kontakt ansehen“. Zum Menü hinzufügen. Menü speichern. werde ich jetzt eine Seite hinzufügen. Ich sage „Hinzufügen Ich nenne das „ Homepage“, „Push“, „Veröffentlichen“. Ich gehe wieder rein und erfrischen mich. Wir haben auch eine Homepage, zum Menü hinzufügen. Lass es mich dorthin ziehen, Menü speichern. Jetzt haben wir diese drei Menüelemente. Geh wieder rein und erfrische dich. Jetzt haben wir diese drei Seiten. Ich wollte dir nur zeigen, wie du die Menüpunkte ändern kannst , wenn du willst. Sehen Sie sich das an. Da haben wir's. Also ich denke, das ist vorerst genug. In der nächsten Lektion wollen wir uns ansehen, wie man diesen Heldenbereich erstellt. Wir sehen uns also in Kürze. 12. Ein Favicon festlegen: Jetzt, wo wir unseren Header erstellt haben, ist es an der Zeit, den Heldenbereich zu erstellen, und das ist der Heldenbereich, du sehen kannst, wenn du auf der Seite landest , diesem oberen Bereich Aber jetzt, bevor wir zu weit gehen, möchte ich, dass wir uns etwas ansehen. Wenn Sie sich beispielsweise Name Chip oder Spectaculars ansehen, werden Sie feststellen, dass sie hier oben ein kleines Symbol haben , das Ihnen schnell sagt, um welche Website handelt , wenn Sie zu viele Tabs geöffnet haben Das wird also ein Favicon genannt. Manche Leute sprechen es als Lieblingssymbol aus, das ist eigentlich egal Hängt davon ab, wie du es gerne aussprichst. Aber jetzt ist das Wichtigste, wie wir es hinzufügen. Und um es hinzuzufügen, müssen wir nur auf Anpassen gehen, während wir noch einen Teil der Website bearbeiten, anpassen. Hier sind wir, und wir gehen zur Identität der Website, zum Seitensymbol und zum Laden. Tatsächlich habe ich übrigens kein Favicon. Ich werde einfach diese beiden benutzen. Ich habe keins. Wähle das aus. Lass mich das Zuschneidebild auswählen. Wie Sie hier oben sehen können, haben wir dieses kleine Symbol. Lass uns das veröffentlichen. Nun, das ist eine der Tabs, die wir für die Seite geöffnet haben. Wenn ich das aktualisiere, hat es das auch, wenn ich das aktualisiere. Wenn wir uns also im Elementor-Editor befinden, können wir das Favicon nicht sehen, oder wenn wir uns im Dashboard befinden, glaube ich Wenn ich das im Dashboard aktualisiere, können wir das sehen. Aber wenn wir die Seite in Elementor bearbeiten, können wir das Favicon sehen Also ja, so fügt man das Favicon im Grunde hinzu. In der nächsten Lektion wollen wir uns nun ansehen, wie dieser Block erstellt wird Wir sehen uns in Kürze. 13. Heldentext: Jetzt ist es Zeit, an der Helden-Sektion zu arbeiten. Fangen wir gleich hier mit diesem Header-Text an. Ich möchte zu diesem Bereich wechseln. Schließ das. Lassen Sie mich einfach alles andere schließen , was ich nicht brauche. Ich denke, ich werde all diese schließen. Jetzt sind wir immer noch in der Kopfzeile, wo wir diese bearbeitet haben. Aber ich denke, wir können diesen Bereich vorerst verlassen, also klicke ich auf das Symbol Exit to Wordpress. Jetzt haben wir nur noch das Dashboard. Ich gehe zurück zu den Seiten. Nun, das sind die drei Seiten, die wir derzeit haben. Wir können so viele haben, wie wir wollen, aber das sind die drei, die wir gerade haben. Und das wird unsere Homepage sein. Dies ist die Seite , die angezeigt werden sollte, wenn jemand unsere Domain.com eingibt Zum Beispiel Ihre Domain WW domain.com. Also kopiere ich das, öffne einen neuen Tab und gebe ihn hier ein, sollte uns auf die Startseite bringen Aber wir haben ein Problem. Es führt uns zum Hello World-Beitrag anstatt uns zur Startseite zu bringen. Also, wie regeln wir das? Wenn wir wieder rein gehen, gehen wir zu den Einstellungen lesen. Jetzt zeigt Ihre Homepage eine statische Seite an, nicht unsere neuesten Beiträge. Wir wollen nicht die neuesten Beiträge. Wir wollen eine statische Seite, und die Seite sollte die Startseite sein. Dies sind die drei Seiten, die wir derzeit haben. Lassen Sie uns die Startseite als Startseite festlegen. Speichern Sie die Änderungen. Da haben wir's. Wenn wir jetzt wieder hier reingehen und diese Seite aktualisieren , gelangen wir zur Homepage. Gehen wir jetzt wieder rein. Das ist die Homepage. Wenn ich Edit sage. Wie Sie sehen können, sind dies Seiten, die wir schnell erstellt haben, um sie als Menüelemente hinzuzufügen. Wir haben jedoch nicht die erforderlichen Grundkonfigurationen vorgenommen , um die Seite im Frontend mit Elementor zu erstellen Das machen wir also gerade. Gehen Sie also auf der Startseite zur Vorlage und ändern Sie diese Standardvorlage auf volle Breite, ändern Sie diese Standardvorlage auf da wir möchten, dass der Inhalt die gesamte Breite Geh wieder rein. Also Elementor-Vorlage in voller Breite Dies sind die Einstellungen für Wordpress und Elementor. Dann denk dran, wir haben auch Astra. Das ist das Thema, das wir verwenden. Wir müssen auch hier und da ein paar Konfigurationen einrichten . also unter den Astra-Einstellungen Lassen Sie uns also unter den Astra-Einstellungen die volle Breite angeben, und wir sollten uns darüber keine Gedanken machen, weil das nur gilt, weil der Container-Stil nur gilt, wenn das Layout entweder auf Normal oder Schmal eingestellt ist. Unserer ist auf volle Breite eingestellt, also keine Sorge. Container zusammenklappen, Seitenleiste erweitern. Wir möchten sagen, dass es keine Seitenleiste gibt. Wir brauchen keine Seitenleisten. Derselbe Fall gilt hier für diese Einstellungen. Ändere sie nicht. Lass das kollabieren. Dann müssen wir diese Bereiche deaktivieren. Wenn wir das derzeit öffnen, haben wir, wie Sie sehen können, hier eine Standardfußzeile von Astra Wir können sagen, deaktiviere die Fußzeile. Und speichern Sie das. Geh wieder rein und erfrischen Sie sich. Jetzt ist das Standard-Astrofoto weg weil wir mit Elementor unser eigenes erstellen Wir sollten auch diese anderen beiden deaktivieren. Spar dir das. Aktualisiere diese Seite. Da haben wir's. Dies sind die grundlegenden Einstellungen oder Konfigurationen, die Sie einrichten müssen, wenn Sie sich darauf vorbereiten, eine Seite mit Elementor zu erstellen Jetzt, wo wir es fertig haben, können wir es mit Elementor bearbeiten, damit wir es im Frontend erstellen können Hier sind wir. Nun, der Header kann hier nicht bearbeitet werden, da wir ihn hier nicht erstellt haben Denken Sie daran. Lassen Sie uns zunächst einen Blick auf die Anatomie dieses Heldenabschnitts Es hat diese Seite und diese Seite, die das Bild hat. Es ist also eine Flexbox mit einer solchen Doppelspalte. Hier können wir auf dieses Plus klicken und eine Überschrift hinzufügen, was im Wesentlichen die Überschriftentexte sein werden. Kopiere das. Solange es noch ausgewählt ist, gehe ich hier rein und füge es ein. Klicken wir auf dieses Pluszeichen, um einen Absatz- oder Texteditor hinzuzufügen. Lass es genau dort fallen. Jetzt möchte ich es auf Weiß ändern. Ausgewählter Text weiß, auch dieser ist, solange es die ausgewählten Einstellungen sind, weiß. Solange dies noch ausgewählt ist, möchte ich zum Inhalt zurückkehren und es auf H ändern. Wenn diese Option ausgewählt ist, gehe ich zur Stiltypografie und möchte die Stärke auf Schwarz ändern , sodass sie sehr dick ist, und ich möchte die Größe erhöhen Vielleicht bis zu diesem Punkt und die Zeilenhöhe reduzieren, vielleicht bis zu diesem Punkt, veröffentlichen Lassen Sie uns eine Vorschau davon sehen. Da haben wir's. Offensichtlich müssen wir es nach unten drücken. Wie Sie sehen können, ich diesen oberen Teil des Abschnitts nicht auswählen , da sich dort die Kopfzeile befindet. Ich drücke Control I, um die Struktur oder den Gator aufzurufen, und es sollte uns alles zeigen, was wir haben Hier ist der Container. Ich versuche zu wählen. Und darin befinden sich zwei Behälter, der mit dem Text und der, der das Bild enthält. Wenn ich das auswähle, ändert sich das zum Bearbeiten des Containers Ich gehe zum erweiterten Innenabstand, entferne den vorhandenen Abstand und dann den oberen Abstand. Wir können ihm vielleicht 50 oder den unteren Abstand 50 geben Sagen wir vielleicht 90 und Top 90. Veröffentlichen Sie das. Lass uns eine Vorschau davon sehen. Da haben wir's. Ich denke, wir werden die Knöpfe hinzufügen und sie dann in der kommenden Lektion gestalten. Lassen Sie uns jetzt also weitermachen und die Schaltflächen hinzufügen. Also wähle das aus. Der Button sollte unter Basic stehen. Lass es gleich da fallen. Weißt du was, lass uns in der nächsten Lektion an den Knöpfen arbeiten. Also lass uns genau dort aufhören. Wir sehen uns in Kürze. 14. Heldenschaltflächen: Hier haben wir aufgehört, und ich hatte noch nicht einmal zum Veröffentlichen geklickt Lassen Sie mich das einfach veröffentlichen . Das ist es. Jetzt haben wir diesen Button genau hier. Zuallererst, was sollte es sagen? Für IOS herunterladen. Wenn Sie dies im Inhalt auswählen, laden Sie es auf dem Betriebssystem herunter. Und wir haben hier noch eine, die auf Android heruntergeladen werden kann. Also werde ich den Mauszeiger darüber bewegen. 08. In dieser Online-Version hatte ich die Schnelloptionen für Benutzereinstellungen nicht aktiviert. Ordnung. Lassen Sie mich jetzt den Button duplizieren. Auf Android herunterladen. Lass mich einfach Android sagen. Veröffentlichen. Wenn wir zur Seite wechseln, werden wir feststellen, dass die Schaltflächen jetzt übereinander gestapelt sind, und das ist nicht das, was wir wollen Was wir wollen, ist Seite an Seite, was uns zu einem sehr wichtigen Thema bringt. Ich wollte, dass wir Container im Hinterkopf behalten Jetzt wird alles, was wir hier erstellen , in einem Container platziert. Und Container haben Eigenschaften , mit denen wir herumspielen können. Wenn ich hier zum Beispiel diesen äußersten Container auswähle wenn wir zum Layoutbereich und zum Container gehen, finden wir etwas, das als Richtung bezeichnet wird. Und denken Sie daran, dass wir ausgerichtete Inhalte verwendet haben , um verschiedene Elemente innerhalb des Containers auszurichten. Neben ausgerichtetem Inhalt haben wir auch eine Richtung, und diese bestimmt, in welche Richtungen Elemente innerhalb des Containers angeordnet sind. Wir können von oben nach unten, wir können von unten nach oben, von links nach rechts und von rechts nach links haben . also zu diesem Container hier gehen, ist es, wie Sie sehen können, ein einziger Container, der diesen Überschriftentext, diesen Text und diese beiden Schaltflächen enthält . Wenn wir den Container auswählen und die Richtung auf „Umgekehrt“ ändern, beginnt alles von unten nach oben Das Gegenteil ist eine Spalte. Umgekehrt, wenn wir sagen, dass alles von links nach rechts gehen soll, sind es die Überschrift, der Text und dann die Schaltflächen, und das Gegenteil sind die Schaltflächen, der Text und so weiter. Nun, zurück von oben nach unten, das heißt, wenn wir wollen, dass diese Schaltflächen nebeneinander liegen, müssen wir sie auch in einen Container legen und sie von links nach rechts anordnen. Fügen wir also direkt unter diesem Text einen Container hinzu. Ziehen Sie nun die Schaltfläche dorthin und legen Sie sie dort ab, ziehen Sie diese andere Schaltfläche und legen sie direkt unter diese andere in diesem Container ab. Jetzt sind sie beide in diesem Container. Und da es jetzt ausgewählt ist, können wir sagen, lassen Sie uns sie horizontal von links nach rechts anordnen. Wir können sie einfach so umkehren. Aber lassen wir sie so bleiben. Veröffentlichen. Lassen Sie uns die Änderungen überprüfen und los geht's. Nun werden Sie feststellen, dass diese Schaltfläche im Vergleich zu diesem Textblock leicht eingerückt zu sein scheint im Vergleich zu diesem Textblock leicht eingerückt zu Denken Sie also daran, dass ich erwähnt habe, dass jeder Container standardmäßig über Abstände und Ränder Wenn ich also diesen Container auswähle und zu „Erweitert“ gehe, kann ich die Standardabstände entfernen. Dadurch wird alles so verschoben, dass es die Ecken und Kanten des Containers berührt Wenn ich ihn veröffentliche und hier wechsle, wird er an den Rand des Containers verschoben Eine weitere Sache, die ich mir ansehen möchte, ist, dass wir, wenn ich die IOS-Schaltfläche auswähle, zum Stil übergehen können. Lassen Sie uns den Grenzradius auf 20 ändern , das ist zu viel. Was ist mit zehn? Ich denke, zehn ist okay. Wählen Sie diesen Stil, Randradius zehn. Jetzt können wir den Abstand erhöhen, da Sie feststellen werden, dass meine Tasten größer sind diese Option ausgewählt ist, gehe ich zur Polsterung über und unterbreche sie , wodurch alles entfernt wird Auf der linken Seite können wir vielleicht 50 geben, auf der rechten Seite 50, auf den oberen 20 und auf den unteren 20. Wie Sie sehen können, ist es ein größerer Button. Geben wir ihm sogar 4040. Lassen Sie mich das auswählen, mit der rechten Maustaste kopieren, das auswählen, mit der rechten Maustaste den Stil einfügen Jetzt hat es alle Stile übernommen, die wir darauf anwenden. Lass uns die Farbe ändern. Das ist grün. Ich muss dieses Grün verwenden, habe aber keinen Zugriff darauf, weil ich es nicht bearbeiten kann. Lassen Sie mich sehen, ob ich meinen Farbwähler verwenden kann . Lass mich das auswählen Solange das ausgewählt ist, gehe ich hier hin. Nein. Wo ist die Farbe? Farbe kopiert. Da haben wir's. Jetzt ist es dasselbe Grün. Für die Textfarbe möchte ich, dass sie diesen Hintergrund hat. Ich sollte auch Pi-Farbe wählen. Farbcode ausgewählt. Wählen Sie das aus. Oh, warte, lass uns wieder reingehen. Wir wollen, dass die Textfarbe so ist. der Maus darüber fahren, möchten wir, dass es weiß ist. Einfach so das auswählen, können wir die Hintergrundfarbe auf Weiß und die Textfarbe auf diese dunkle Farbe ändern die Hintergrundfarbe auf Weiß und die Textfarbe auf , die wir gerade ausgewählt haben. Lassen Sie uns eine Vorschau der Änderungen anzeigen, und jetzt sehen unsere Schaltflächen fantastisch aus. In der nächsten Lektion werden wir sehen, wie man dieses Heldenbild hinzufügt. Aber bevor wir das tun, beachten Sie, dass wir hier diesen Text haben und er grün ist. Also zurück hier, was wir tun können, ist, wenn das ausgewählt ist, wir können zum Inhalt gehen und diese Verwaltung mit einem Span-Tag verpacken . Also sage ich einfach offene Klammer, Spanne, geschlossene Klammer, offene Klammer, Schrägstrich, geschlossene Klammer Nun, da dieser Span das Wort verwalten umschließt, möchten wir Elementor mitteilen, anwenden wollen dass wir diese Stile auf diesen speziellen Text wir mit den Span-Tags hervorgehoben haben Stil entspricht also dem Öffnen und Schließen von Zitaten. Nehmen wir dann an, das Attribut, das wir bearbeiten möchten, ist Farbe, und wir möchten, dass die Farbe so grün Also ich glaube, ich hatte mich das einfach auswählen lassen. Steuere C, um das zu kopieren. Gehen Sie zurück, um dies auszuwählen, und gehen Sie wieder hinein, Farbe im Span-Stil, wir möchten, dass die Farbe diese Spalte ist, und schließen Sie dann mit einer halben Spalte. Einfach so. Also, wenn wir wollen, dass der Augenladen auch grün ist, brauchen wir nur noch einen Span-Tag zu nehmen. Ich kopiere das gesamte Eröffnungs-Tag bis kurz vor der Verwaltung, kopiere das, gehe zu Eyeshop, direkt vor mir, füge es dort ein. Und schließ es. Klammer öffnen, Schrägstrich, Klammer schließen. Vorschau veröffentlichen Da haben wir's. Nun, das ist im Grunde eine erweiterte Anpassung, und ich möchte Ihnen nur zeigen, dass Sie CSS - und HTML-Stile auf Ihre Elementa-Elemente anwenden können - und HTML-Stile auf Ihre Elementa-Elemente Sie müssen sich nicht nur auf das beschränken, was Elementor Also los geht's. Ich denke, wir sind jetzt bereit, das Heldenbild hinzuzufügen, und das werden wir in der nächsten Lektion tun. Wir sehen uns in Kürze. 15. Heldenbild: Jetzt ist es an der Zeit, unser Heldenbild hinzuzufügen und natürlich die Breite unserer Webseite anzupassen. Also gehe ich zurück zu unserem Editor, klicke auf Plus und füge ein Bildelement hinzu. Da haben wir's. Und hier klicke ich darauf und füge hinzu, ich glaube, das ist es. Füge das hinzu und veröffentliche es, überprüfe die Änderungen und los geht's. jetzt natürlich daran, dass wir die Breite anpassen müssen. Geh wieder rein Ich möchte den Container auswählen , der all die anderen enthält. Wie Sie sehen können, ist es das, was hier hervorgehoben ist. Wenn ich etwas in der Struktur auswähle, wird es auch auf der Seite ausgewählt. Wählen Sie hier den Container aus. Ich möchte ihm eine Breite von 100% geben. Ändern Sie die Pixel in Prozent und geben Sie ihnen 100%. Veröffentlichen Sie einfach so die Änderungen und sehen Sie sich eine Vorschau an. Jetzt gibt es ein Problem. Wir haben alles bis zum Äußersten getrieben und das wollen wir nicht. Also, wie regeln wir das? Ganz einfach, Container. Gehen wir also wieder rein und fügen wir einen Container hinzu. Bevor wir ihn hinzufügen, denken Sie daran, dass dies ein Container ist, der zwei Container hat. Dieser Container enthält eins und zwei. Nun wollen wir nur einen Container in diesem Container haben . Denken Sie daran, dass wir diesen Behälter zu 100% hergestellt haben. Wir wollen also einen weiteren Behälter darin haben, der 80% dieser 100% einnimmt, und dann alles hineinlegen Also können wir das duplizieren. Und jetzt haben wir drei Container. Wir können den gesamten Inhalt aus dem ersten Container entfernen, das und das entfernen. Und auch dieser Container. Jetzt ist es ein leerer Behälter. Wir können es da reinwerfen und auch das direkt darunter. Da haben wir's. Jetzt haben wir diese beiden Container in dem anderen Container, den wir gerade dupliziert haben nun den äußeren Behälter auswählen, können wir zunächst die Richtung von links nach rechts ändern die Richtung von links nach rechts Jetzt ist alles Seite an Seite. Aber denken Sie daran, wir wollen, dass es 80% des verfügbaren Platzes einnimmt, nämlich 80%. Aber jetzt ist es nach links ausgerichtet. Was wir tun müssen, ist den Behälter auszuwählen, der es enthält, der das enthält, was das ist. Gehen Sie hier hin, um den Inhalt zu begründen und ihn in den Mittelpunkt zu stellen, einfach so. Veröffentlichen Sie, zeigen Sie eine Vorschau der Änderungen an. Da haben wir's. Also machen wir jetzt genau dasselbe für das Menü oder für den Header. Sobald Sie eine Seite oder einen Teil Ihrer Webseite mit Elementor bearbeitet haben , können Sie jederzeit von hier oben auf den Editor zugreifen Da wir den Header also bereits mit Elementor erstellt haben, können wir ihn von hier aus bearbeiten Wir können von hier aus auf den Editor zugreifen. Also klicke ich auf Header. Los geht's. Jetzt wähle ich den Behälter aus , der alles enthält. Und denken Sie daran, das sind drei Behälter in diesem äußeren Behälter. Lassen Sie uns diesen Container also auf Prozent umstellen und dafür sorgen, dass er 100% des Bildschirms einnimmt, auf dem Sie ihn betrachten. Jetzt sind es also 100%. Aber jetzt wird alles zur Seite geschoben, veröffentlicht, in der Vorschau angezeigt. Aber was wir wollen, ist ein Container in diesem Container, der 80% einnimmt. Das auswählen Drücken wir zunächst Strg I, um die Struktur zu öffnen und sie, wie Sie sehen können, um eins, zwei, drei zu erweitern. Was wir tun können, ist, vielleicht diesen ersten zu duplizieren , den zu duplizieren. Lassen Sie uns nun den Inhalt aus diesem Container entfernen. Und jetzt legen wir diese anderen Dinge in diesen Container. Direkt darunter könnte es schwierig sein, aber lass uns einfach weitermachen. Drei. Nun, das sind drei Behälter in dem einzigen Behälter , der sich in dem 100% breiten Behälter befindet . Wir wollen, dass dieser Container 80% einnimmt. Aber jetzt wollen wir auch, dass die Container darin so von links nach rechts angeordnet sind. Und gleichzeitig wollen wir den äußeren Behälter auswählen und diesen inneren Behälter in die Mitte schieben. Es scheint, dass ich den Button in den Menücontainer gesteckt habe. Es sollte draußen sein. Lass es mich da hinstellen. Es mag schwierig sein, es zu platzieren, aber versuche es einfach weiter, bis du es hast. Veröffentlichen Sie, und lassen Sie uns eine Vorschau der Änderungen anzeigen. Jetzt berührt es fast die Kanten. Wenn wir jetzt auf die Startseite gehen, eingeben, los geht's. Mir gefällt es, aber das scheint nach innen gedrängt zu sein. Ich weiß nicht, was da drüben passiert. In Ordnung. Solange diese Option ausgewählt ist, sagen wir, anstatt alles in die Mitte zu stellen, anstatt alles in die Mitte zu stellen, sagen wir den Abstand dazwischen, sodass wir Leerzeichen zwischen den Elementen platzieren können, sie aber an den Rand verschieben können. Ich wähle ein Leerzeichen dazwischen und veröffentliche es. Schauen wir uns das jetzt an. Wenn ich auf die Startseite gehe, gehen wir hier wieder rein, wählen das Bild aus, geben ihm eine benutzerdefinierte Link-URL und geben ihm Ihre Domain.com Also kopiere das, platziere es dort, veröffentliche die Vorschau. Wenn wir jetzt auf das Symbol klicken, ist es das Logo, es bringt uns zur Startseite. Jetzt ist alles richtig ausgerichtet und nimmt jetzt einen größeren Raum ein Ich denke, das ist ein guter Ort, um diese Lektion zu beenden. in der nächsten Lektion Lassen Sie uns in der nächsten Lektion mit dem Rest der Seite beginnen. Wir sehen uns in ein paar Minuten. 16. Hinzufügen eines Körperabschnitts: Jetzt ist es an der Zeit, mit der Arbeit an diesem Körperabschnitt zu beginnen. Und zurück zu unserem Redakteur, mir ist gerade eine Sache aufgefallen, die wir vergessen haben zu tun. Sie werden auf unserer Referenz-Website hier feststellen, dass alles vertikal zueinander ausgerichtet zu sein scheint . So ist zum Beispiel dieser Textblock in Bezug darauf vertikal ausgerichtet. Also lass mich dir einfach zeigen, was ich meine. Ich gehe wieder rein und wähle den Container aus , der den Text enthält. Ich kann hier den Inhalt begründen und ihn senkrecht zur Mitte ausrichten. Ich gehe wieder rein in diesen Container. Ich kann dasselbe tun, aber das bewegt sich nicht, weil das Bild den ganzen Platz einnimmt Aber wenn ich das sage und eine Vorschau der Änderungen ansehe, werden Sie jetzt feststellen, dass dies nach unten verschoben wurde Ursprünglich war es hier oben und hier war viel Platz Lass uns das einfach sehr schnell rückgängig machen. Das war da oben. Das hat er veröffentlicht. Lassen Sie uns die Änderungen überprüfen. Dort war es. Aber jetzt haben wir es vertikal in die Mitte geschoben, nur um es proportional dazu auszurichten Nachdem das erledigt ist, möchten wir einen neuen Abschnitt hinzufügen, sodass wir immer noch auf der Startseite sind Und ich sage einfach Plus Flexbox, und ich nehme noch einmal diesen zweispaltigen Abschnitt. Und bevor wir zu weit gehen, möchte ich zuerst auswählen, solange dieser Bereich noch ausgewählt ist, zu „Erweitert“ gehen, am oberen Rand, ich möchte ihm 100 geben, damit wir ihn vom Heldenbereich abgrenzen können. Jetzt können wir hier ein Bild auswählen und es dort ablegen. Geh hier hin. Ich glaube, das ist es. Ja, das ist es. Das ist unser Favicon, und das ist das Bild, das wir verwenden wollen. Da haben wir's. In dem Moment, in dem wir das erste Bild hier ablegen. Elementor macht hier schnell Werbung. Optimieren Sie Ihr Bild, um die Leistung der Website mithilfe des Bildoptimierers zu verbessern Leistung der Website mithilfe des Bildoptimierers Ich mache einfach weiter und schließe das. Während das noch ausgewählt ist, wollen wir uns ansehen, was wir hier haben. Ordnung. Wir müssen nur diesen Text aufnehmen. Wir müssen diese Überschrift einfach so duplizieren. Dann ziehen Sie es hierher und legen Sie es dort ab. Ich werde diese Texte auch duplizieren. Ziehen Sie es dorthin und ich werde es duplizieren. Wie viele Schaltflächen haben wir hier? Nur einer. Ich dupliziere das und ziehe es dort hin und lege es dort ab. Jetzt, wo das ausgewählt ist, möchte ich hierher kommen und dieses Styling entfernen, da ich nicht sein werde, haben wir hier irgendein Styling? Oh ja. Laden Sie die App herunter, laden Sie die App aus Ihrem Store herunter. Also zwischen den Spannen, statt Ladengeschäft. Und denk dran, das sollte H zwei sein. In Ordnung. jetzt hier nach unten gehe, möchte ich diesen Container auswählen, zum Layout gehen und ihm eine Lücke von 40 geben , sodass zwischen dem Bild und dem Textblock eine Lücke entsteht. Und ich möchte auch eine Icon-Liste hinzufügen. Gehen wir also wieder rein, wie Sie sehen können, haben wir diese Liste genau hier, und genau das wollen wir hinzufügen. Geben Sie also Symbol ein und es ist die Icon-Liste. Lass mich das einfach noch einmal loswerden. Sie werden hier feststellen, dass wir eine große Lücke zwischen der Symbolliste und dem Absatz haben , und das liegt an diesem Standardrand. Also mit dem ausgewählten Text mit erweitertem Rand unten, einfach so. Wählen wir nun diese Symbolliste mit erweitertem Rand unten aus. Wir können es auf vielleicht 20 erhöhen. Ordnung. Wenn dies immer noch ausgewählt ist, gehe zum Stil, gehe zum Text. Die Textfarbe sollte weiß sein und wenn Sie den Mauszeiger darüber bewegen. Wir wollen, dass es so grün ist. Lassen Sie mich diesen Text und diesen Farbcode auswählen , einschließlich der Hash-Kopie. Wählen Sie hier die Texte aus. Wenn Sie den Mauszeiger über den Text O bewegen, möchten wir, dass er grün ist. Einfach so. Lass uns jetzt an dem Symbol arbeiten. Das Symbol sollte unter normalen Umständen grün sein. Wenn der Mauszeiger dann darüber bewegt wird, muss es weiß sein. Einfach so. Geh zurück zum Inhalt. Nun, wenn wir den ersten erweitern, können wir, was wir hier haben. Leistungsstarke Suche nach allen Funktionen. Leistungsstarke, filterbare Suchergebnisse. Von filterbaren Ergebnissen, Download-Berichten, regelmäßigen Hinzufügungen von Artikeln, Stammkunden und schließlich von sicheren und geschützten Sie können diesen Vorgang auch duplizieren oder Artikel hinzufügen. Das Duplikat ist sicher. Sagen wir sicher und geschützt, das können zwei Wörter sein. Wir können auch rein gehen, wenn wir es im Stil haben, wir können den kleinsten Abstand dazwischen wählen, um den Abstand zu vergrößern, wie bei diesem Inhalt. Wir können zu den leistungsstarken Funktionen zurückkehren und das Symbol nach Belieben ändern. Vielleicht sagen wir, diese Beilage, war das Häkchen. Ordnung. Überprüfe. Ich glaube, das ist die richtige Beilage. Überprüfe und überprüfe und zum Schluss. Veröffentlichen Sie, lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Da haben wir's. Aber jetzt, wo wir auf der Startseite sind, muss das nach unten gedrückt werden, weil wir das sehen können. Also, wenn wir wieder reingehen, können wir das für Fortgeschrittene nehmen. Die obere Marge kann 150 sein. Veröffentlichen, lassen Sie uns eine Vorschau der Änderungen anzeigen und los geht's. Im Grunde genommen ist das so , wie man diesen Abschnitt erstellt. Aber bevor wir weiter gehen, haben wir auch diesen animierten Partikelhintergrund, und ich denke, das können wir ab der nächsten Lektion tun. Wir sehen uns in Kürze. 17. Animierte Partikel: Wir sind also fast fertig mit diesem Abschnitt, aber wir müssen dieses animierte Partikelsystem hinzufügen. Gehen wir also einfach zurück zu unserem Editor. Wo ist es? Hier sind wir. Und wir müssen ein weiteres Elementor-bezogenes oder Elementor-basiertes Plug-In mit dem Namen Royal Add Ons for Elementor installieren Elementor-basiertes Plug-In mit dem Namen Royal Add Ons for Also geh wieder rein, Plug-ins, füge neue hinzu Lassen Sie uns jetzt weitermachen und Royal Elemental Add-Ons sagen. Ich denke, es sind Royal Elementor Addons von WP Royal Und es gibt verschiedene elementare Addons, die auch dieses Partikelsystem haben. Dies ist nicht der einzige Also lass uns das aktivieren. Lass uns weitermachen und überspringen Hier sind einige der Vorlagen und Funktionen , die mit diesem Plugin geliefert werden. Aber was wir jetzt suchen, ist, nach Hause zurückzukehren und diese Seite zu aktualisieren. Dieser Herausgeber. unten scrollen. Lassen Sie uns weitermachen und diesen Abschnitt auswählen Lassen Sie uns nun zunächst oben und unten etwas Abstand hinzufügen, um den Inhalt des Containers vom Rand des Containers zu trennen Containers vom Rand des Containers den Container die erweiterte Polsterung ausgewählt ist, sagen wir AD, das ist unten und oben AD ist okay Solange es noch ausgewählt ist, gehe ich zum Stil über. Und jetzt, wo wir königliche Element-Add-Ons haben, Undertyle, haben wir Zugriff auf Partikel Wir können jedem Behälter Partikel hinzufügen. Zum Beispiel können wir dies jetzt, da dies ausgewählt ist, hinzufügen. Also sage ich, aktiviere den Partikel-Hintergrund. Und wie Sie sehen können, werden sie bereits angezeigt, aber wir müssen die Farbe bearbeiten da sie momentan schwarz sind, wie Sie sehen können. Lassen Sie mich also zunächst sagen, veröffentlichen. Um dann die verschiedenen Eigenschaften der Partikel zu bearbeiten, können wir hier klicken. Los geht's. Das haben wir derzeit. Ich möchte zu den Partikeln selbst gehen, Farbe. Im Moment sind diese in den Einstellungen weiß. Lassen Sie mich sagen, laden Sie aktuelle Konfiguration im JSON-Format herunter. Diese aktuelle Konfiguration, damit wir sie uns ansehen können. Öffne es. Jetzt ist es auf einer anderen Seite geöffnet, also werde ich es einfach hier hochladen und alles auswählen. Steuerung A, kopieren. Schließ das. Geh zurück zur Startseite. Wählen Sie dieses Steuerelement A und löschen Sie das Steuerelement V, um das, was Sie gerade heruntergeladen haben, einzufügen. Jetzt werden Sie feststellen, dass es genau wie hier weiß ist, was bedeutet, dass wir jetzt wieder reingehen und einige Dinge ändern können einige Dinge ändern Ich wollte zum Beispiel, dass diese Farbe etwas dunkel ist, also gehe ich zu Blau über. Das ist die Partikelfarbe, und ich möchte, dass es etwas ist, das auf diesem Hintergrund sichtbar ist. Auf diesem dunklen Hintergrund. Also ich denke, diese Farbe ist okay. Steuerung C. Ich möchte zu den Linien gehen. Wo ist die Linie verknüpft? Treten Sie ein. In Ordnung. Also, das ist die Farbe, die ich gerade habe. Wenn ich sage, aktuelle Konfiguration herunterladen und öffnen, öffnen sie sich im Notizblock, Steuerung A, Kopie von, gehen zur Startseite bearbeiten und wählen hier Control A, Strg V aus, um das einzufügen, was ich gerade habe. Ich denke, das ist eine bessere Farbe. Aber auf unserer Referenz-Website ist das sogar ein hellerer Hintergrund. Solange dieser Container noch ausgewählt ist, wechseln Sie zum Stil, zum Hintergrundtyp „Farbe zum Blau. Ich möchte es leicht machen, sagen wir diese Farbe. Sie können einfach genau diesen Code eingeben wenn Ihnen gefällt, wie meiner aussieht. Veröffentlichen Sie und lassen Sie uns die Änderungen überprüfen. Scrollen Sie nach unten. Da haben wir's Wenn du denkst, sie sind zu dunkel, sie sind zu ausgeprägt, kannst du jederzeit hierher zurückkehren und mit der Opazität herumspielen Spielen Sie mit all diesen Einstellungen herum , um zu sehen, was Sie bekommen können Veröffentlichen Sie also und lassen Sie uns eine Vorschau dessen, was wir haben, anzeigen. Ich denke, das sieht schon professionell aus. Ich denke, hier werden wir diese Lektion beenden, aber in der nächsten Lektion wollen wir uns ansehen, wie dieser Ankerlink hinzugefügt wird. Wenn ich also darauf klicke, werden wir uns auf diesen Abschnitt konzentrieren. Lassen Sie mich Ihnen in der nächsten Lektion zeigen , wie das geht. Geh nirgendwohin. 18. Ankerelement: Unsere Landingpage nimmt jetzt Gestalt an. Jetzt ist es an der Zeit, dieses Ankerelement hinzuzufügen. Gehen wir zu unserem Editor. Ich glaube, das ist es. Hier sind wir. Ich gehe wieder her. Lass mich das schließen. Was ist das? Lass uns all diese anderen Tabs schließen. Und geh hier rein. Also möchte ich hier auf dieses Pluszeichen klicken, um das gewünschte Element oder den gewünschten Abschnitt hinzuzufügen, plus Flex, und ich werde diesen einspaltigen Container hinzufügen. Und hier werde ich ein Symbol hinzufügen. Also ziehe ich einfach ein Symbol hierher und lege es dort ab. Ich kann das Symbol so ändern, dass es vielleicht nach unten und nach unten zeigt. Sagen wir diesen. Weil ich den Leuten zeigen will, dass sie klicken, um runter zu gehen oder so. Ich möchte auch dieses grüne Copycontrol C wählen, weil wir versuchen, das als Markenidentität, Markenfarbe, 08 beizubehalten . diese Option ausgewählt ist, gehen wir zum Stil über, normales Grün beim Bewegen, es muss weiß sein, einfach so Wenn wir jetzt darauf klicken, wir zum Inhalt zurück Aber bevor wir zum Inhalt übergehen, sollten wir ihn etwas nach unten drücken? Wir werden sehen. Veröffentlichen Sie, sehen Sie sich eine Vorschau der Änderungen an. Ich denke, es ist in einer guten Position. Es ist gut ausgewogen im Raum. Gehen Sie jetzt wieder rein, solange dies noch ausgewählt ist, gehen Sie zurück zum Inhaltslink. In Ordnung. Klicken Sie hier auf das Pluszeichen und geben Sie Anker ein. wir auf den Link klicken, legen wir diesen Anker an eine beliebige Stelle Wenn wir auf den Link klicken, legen wir diesen Anker an eine beliebige Stelle, an die wir weitergeleitet werden möchten. Platzieren wir ihn zum Beispiel irgendwo hier. Warum kann ich es nicht irgendwo platzieren. Lass es mich zum Beispiel hier platzieren. Warum kann ich es hier nicht platzieren? Oh, ich glaube ich weiß warum. Diese Partikel liegen über unserem Inhalt und irgendwie beeinträchtigen sie unsere Fähigkeit , dort den Anker fallen zu lassen. Aber wie dem auch sei, wenn ich das dupliziere und wieder reingehe und Anker sage und versuche , es hier fallen zu lassen. Ja. Aus irgendeinem Grund, egal welcher Bereich diese Partikel enthält, lass mich die Partikel von hier aus ausschalten. Partikel deaktivieren das. Geh jetzt wieder rein, Anker. Ja. Diese Partikel hindern uns daran, das Ankerpunkt-Ankerelement per Drag-and-Drop das Ankerpunkt-Ankerelement in den Abschnitt zu ziehen, aber das ist okay Nun, wenn ich das hier fallen lasse und eine ID hinzufüge. Gehen Sie zum Beispiel hierher, lassen Sie mich einfach sagen, gehen Sie hierher. Das ist die ID dieses Ankerelements. Und jetzt, wenn wir zu einem Link gehen, zum Beispiel zu diesem Link, können wir Elementor sagen, dass er uns direkt zu der Stelle bringt, an der es ein Ankerelement mit dieser ID gibt an der es ein Ankerelement mit dieser ID Da das ein D von go here hat, lass mich das hier kopieren Wenn wir zu diesem Link zurückkehren, können wir die URL einfügen, dann Slash Hash sagen, dann die ID des Ankerpunkts, zu dem Sie dieser Link weiterleiten soll Veröffentlichen. Sehen wir uns hier eine Vorschau der Änderungen an. Wenn ich darauf klicke, gelangen wir direkt zu diesem Teil. Ich wollte dir das als Beispiel zeigen. Was wir nun wollen, ist, dass wir zu dem kommen, der sich direkt unter diesem Beispiel befindet. Lass mich das schließen. Ich möchte einen Ankerpunkt auswählen. Und ziehen Sie ihn per Drag & Drop direkt unter sich selbst, los geht's. Denken Sie daran, dass wir gerade den anderen Abschnitt gelöscht haben , der den anderen Ankerpunkt, das Ankerelement, hatte . Jedes Ankerelement muss eine eindeutige ID haben. Also verwende ich Go Here wieder , weil wir den anderen nicht mehr haben Aber wenn wir jetzt darauf klicken , denken Sie daran, dass es bereits diesen Link erhalten hat, also funktioniert es für dieses neue Ankerelement Also wenn ich sage, veröffentlichen und die Änderungen in der Vorschau ansehen. Wenn wir darauf klicken, gelangen wir zu dem Ankerelement, das sich hier befindet. Wenn Sie auf ein Ankerelement klicken, wird es ganz oben auf der Seite platziert , auf der Sie sich gerade befinden. Deshalb haben wir das jetzt hier, weil das Ankerelement des Ankerelements unsichtbar hier ist Wenn wir das also nach oben schieben wollen, müssen wir das Ankerelement weiter oben platzieren Oder wir müssen den Rand oben in diesem Abschnitt reduzieren. Wählen wir den Abschnitt aus. Fortgeschritten. Oberste Marge, sagen wir, 100 veröffentlichen. Sehen wir uns eine Vorschau der Änderungen an. Wenn ich darauf klicke, kommen wir weiter. Warum werden wir nicht, sagen wir, 50 los , um es dem unsichtbaren Anker näher zu bringen. Alles klar, wenn ich darauf klicke. Jetzt bringt es uns an diesen Punkt. Ich denke, das ist ein guter Ort, aber zumindest verstehst du jetzt, wie Ankerelemente funktionieren weil du vielleicht etwas Bestimmtes auf einer bestimmten Seite hast, die du mit Elementor erstellt hast, und du möchtest, dass jemand auf einen Link klickt und direkt zu diesem Teil der Seite weitergeleitet wird So macht man das mit Ankerelementen. Also ich denke, wir werden hier aufhören. In der nächsten Lektion. Mal sehen, wie man diesen anderen Abschnitt hinzufügt. Also werde ich dich gleich sehen. 19. Ein anderer Abschnitt: Wir sind mit diesem Abschnitt mit Partikelmustern fertig. Jetzt ist es an der Zeit, an diesem funktionsreichen Desktop-DBO-Bereich zu arbeiten diesem funktionsreichen Desktop-DBO-Bereich zurück zu unserem Editor gehe, muss ich nur diesen Container duplizieren , diesen Container duplizieren Denken Sie daran, dass es, solange es noch „Erweitert“ ausgewählt ist, denken Sie daran, dass wir den Rand oben in diesem Bereich reduziert haben. Ich möchte es sogar noch weiter reduzieren, sodass vielleicht sogar keine Vorschau veröffentlicht wird. Wenn ich darauf klicke, wird das in den Fokus gerückt. Aber ich möchte den anderen Teil, so wie er ursprünglich konzipiert und veröffentlicht wurde, herunterdrücken . Und jetzt, wenn ich eine Vorschau der Änderungen sehe, dann warte mal. Lassen Sie uns dieses vielleicht 30-fache Update veröffentlichen. Das gefällt mir. Wie dem auch sei, ich gehe hier runter solange das noch ausgewählt ist, möchte ich Partikel stylen und das löschen. Tatsächlich möchte ich auch den Hintergrund loswerden . Gehe in den Hintergrund. Wählen Sie das aus und klicken Sie auf Löschen. Dadurch werden die ursprünglichen Hintergrundeinstellungen wiederhergestellt, die es hatte, als wir es hinzugefügt haben Und wenn Sie einen Container hinzufügen, hat er keinen Hintergrund Also setzen wir es zurück. Jetzt möchte ich diesen Container ziehen und auf die linke Seite legen Jetzt ist es ein bisschen knifflig. Also lass mich sehen, ob ich das ziehen kann , du musst versuchen, es zu erzwingen. Also leg es wieder da hin. Weil mein Ziel genau dort ist. Also lass es dort fallen. Mein Ziel ist es, den Text umzukehren und ihn auf diese Seite und das Bild auf diese andere Seite zu legen. Welches Bild haben wir hier? Oh, mir fällt gerade ein, das ist im Hintergrund, nicht auf der rechten Seite. Also das muss weg und das muss besetzt werden, lassen wir es einfach bei 50%. Dann gehe ich hier rein und möchte den Hintergrund auswählen, und dieses Mal werden wir ein Bild hinzufügen. Wählen Sie diesen Laptop und lassen Sie uns ihn so in den Hintergrund stellen. Sagen wir, keine Wiederholung, Position, sagen wir rechts mittig oder mittig rechts, so. Wir können es bei dieser Größe belassen oder wir können sagen, Displaygröße, Titelblatt, nein, Contain Ich denke, enthalten ist okay. Veröffentlichen Sie, und lassen Sie uns die Änderungen überprüfen. Scrollen Sie nach unten. Da haben wir's Ich glaube, wir brauchen unten einen gewissen Spielraum. Denn denken Sie daran, wenn wir uns die Referenz ansehen , ist dies die Referenz. Wie Sie sehen können, haben wir einen schönen Rand sie von der Fußzeile trennt Gehen wir also wieder rein, solange diese Option noch ausgewählt ist, gehen wir zu „Erweitert“ über, und ich habe über Polsterung gesprochen, nicht Der untere Rand ist 100. Lassen Sie uns auch diese Funktion aktualisieren ( Desktop-Kopie), wählen Sie diese aus. Feature ch Desktop-Dashboard innerhalb des Bereichs. Desktop-Dashboard. Ich veröffentliche. eine Vorschau der Änderungen an. Es liegt an Ihnen, den Inhalt zu aktualisieren und Ihren eigenen zu verwenden. Scrollen Sie nach unten und los geht's. So fügen Sie Ihrer Landingpage im Grunde einen weiteren Abschnitt hinzu Und es geht darum, zu wiederholen was Sie getan haben, indem Sie Dinge duplizieren , ohne jedes Element neu erstellen und neu gestalten zu müssen . Also, ich denke, das ist ein guter Ort, um diese Lektion zu beenden. in der nächsten Lektion Gehen wir in der nächsten Lektion zum Foto über. Wir sehen uns in Kürze. 20. Fußzeilen-Logo: dass unsere Landingpage etwas ist stellt sich heraus, dass unsere Landingpage etwas ist, auf das wir stolz sein können, aber wir müssen noch das Foto erstellen Also ist es Zeit, daran zu arbeiten. Ich gehe zurück zu unserem Editor, also wo ist es hier? Denken Sie natürlich daran, wie wir unseren Header erstellt haben. Auf die gleiche Weise werden wir unsere Fußzeile erstellen. Geh wieder rein. genommen sind wir mit diesem Leerzeichen fertig, ich sage nur „ Exit to Wordpress“. Wir hätten hierher gehen können, aber wir sind auch mit dem anderen Teil fertig, also brauchen wir ihn nicht. Wir werden komplett aussteigen. Und jetzt gehen wir zu Elements Kit, Header Footer, und fügen wir neue hinzu Fußzeile. Fakt, lasst uns einfach konsistent bleiben Die gesamte Seite an und lass uns den Inhalt bearbeiten. Es wurde automatisch gespeichert und der Liste der Kopf - und Fußzeilen dort unten hinzugefügt der Liste der Kopf - und Fußzeilen dort unten Und hier sind wir wieder. Und denk dran, die Übung. Wenn wir darauf klicken und die Flexbox öffnen, können wir diesen vierspaltigen Abschnitt verwenden. Denken Sie daran. Unsere Referenz-Website hat diese vier Spalten, das ist also nett. Aber ich muss erwähnen, dass Sie, selbst wenn Sie zum Beispiel das hinzufügen , immer zu dem machen können, was Sie wollen. Wenn ich Plus sage und Container hinzufügen, kann ich diesen Container duplizieren, duplizieren, viermal und dann den Container auswählen , der sie enthält. Gehen Sie zur Layoutrichtung von links nach rechts, und es ist ein vierspaltiger Abschnitt. Gehen Sie hier rein, Flexbox, fügen sie hinzu, wie Sie sehen können, sind sie identisch. Lassen Sie uns nun ein Bild hinzufügen. Element. Wähle das aus. Gehe zum Logo, wähle. Da haben wir's. Wir können ihm auch eine benutzerdefinierte URL zur Homepage geben. Denn wenn jemand darauf drückt oder darauf klickt, möchten Sie, dass er auf die Startseite weitergeleitet wird. Als Nächstes fügen wir einige Texte hinzu. Ich füge einfach einen Texteditor hinzu. Da haben wir's. Da kannst du Stil sagen, weiß. Veröffentlichen. Wir können hier reinkommen und Icon-Liste sagen. Weil es sich im Wesentlichen um Symbollisten handelt. Schnelle Links. Ich gehe wieder rein und sage Überschrift, füge es dort ein und lass es uns in Quicklinks ändern. Sie können es ändern , sagen wir, grün oder sie sind weiß. Ich möchte, dass sie so grün sind. Geh wieder rein und hebe meine Augentropfen hoch, oder zwei. Kopiert das. Sie können dies installieren, wenn Sie alle Farben testen möchten , die sich derzeit in Ihrem Browser befinden. Es heißt RGB-Farbwähler. Sie können es als Erweiterung für Ihren Browser herunterladen. Wenn ich wieder reingehe, füge ich meine grüne Farbe ein. Ich möchte auch sicherstellen, dass die Typografie 600 ist, und bevor wir weit gehen, wählen wir die Symbolliste aus, damit wir sie gestalten können Gehen Sie wieder rein, ändern Sie das, Einfügen zu aktivieren, und reduzieren Sie das Ich möchte das Symbol nicht noch einmal ändern müssen, also werde ich es duplizieren. Jetzt hat es dasselbe Symbol. Wir müssen lediglich die Farbe des Symbols ändern. Nein. Gehen wir zur Stilikone, um diese grüne Farbe einzufärben, wenn Sie mit der Maus darüber fahren. Lass es uns schaffen Lassen Sie uns den Text beim Schweben platzieren. Machen wir es so grün. Lassen Sie uns für die Listen den Abstand etwas vergrößern. Jetzt können wir duplizieren, duplizieren und vielleicht noch einmal. Das kann unser Zuhause sein. H. Datenschutz im Blog. Bedingungen. Endlich kann das unser Shop sein. Da haben wir's. Als Nächstes möchte ich das duplizieren und es loswerden weil wir nicht wiederholen müssen, was wir gerade getan haben Ich möchte aber auch den Container auswählen, in dem sich der befindet, und solange er noch ausgewählt ist, gehe ich zum linken Rand nach vorne Drücken wir es an. Gehen wir sogar zurück zu Null und veröffentlichen wir zuerst eine Vorschau der Änderungen. Mir ist gerade etwas eingefallen. Da haben wir's. Also möchte ich hier zunächst Schaltflächen hinzufügen. Wie Sie feststellen, haben wir diese beiden Schaltflächen. Also gehe ich hier rein und lasse es mich hier hinzufügen, füge es mit Elementor Ich wähle hier Control C, G. Wähle hier, Strg V. Jetzt wurde es draußen eingefügt, also ziehe ich es einfach dorthin C, wähle diese rechte Paste aus. Jetzt geht es da unten. Veröffentlicht. Lassen Sie uns die Änderungen überprüfen und los geht's. Aber jetzt ist das Problem, wenn wir darauf klicken, um nach Hause zu gehen, denn denken Sie daran, dass wir ihm einen Link gegeben haben. Wenn wir nach Hause gegangen sind, wenn wir ganz nach unten scrollen. Sie werden feststellen, dass dies nach außen gedrückt wird , während es nach innen gedrückt wird Diese anderen sollten ebenfalls nach außen gedrückt werden. Lassen Sie uns zunächst den Feind selbst verdrängen. Wählen Sie den Behälter aus , der alles enthält. Lassen Sie uns das auf 100% Breite ändern . Jetzt haben wir einen Container, der alles enthält. Aber dieser Container wird 80% dieses äußeren Containers einnehmen , der 100% breit ist. Also können wir das einfach duplizieren, alles aus dem Inneren entfernen und dann die anderen per Drag & Drop hineinziehen. Ich möchte es direkt darunter platzieren. Ja. Nimm das, leg es direkt darunter und schließlich, leg es direkt darunter. nun diesen Container ausgewählt haben, die Richtung so angeordnet, dass sie von links nach rechts verläuft, aber jetzt wollen wir, dass er 80% einnimmt. Das sollte 100% sein, der äußere Wert ist 100%, und dieser innere Wert ist 80%, den äußeren muss der innere Teil in der Mitte sein. Wir sollten auch die Polsterung über und unter dem Fuß des Inhalts erhöhen über und unter dem Fuß des Inhalts Gehe zu „Erweitertes Padding“. Die obersten, sagen wir 100, die untersten 100 veröffentlichen. Jetzt werden Sie feststellen, dass diese Quicklinks über allem anderen stehen. Es scheint, dass ich weiß, dass es mit dieser Schaltfläche übereinstimmt. Diese Taste kann nach oben gedrückt werden, wobei das Bild selbst, der Rand und der obere Rand ausgewählt werden. Denken Sie daran, dass auch das Bild zu nah dran ist. Solange dieser Container ausgewählt ist, gehen wir zum linken Seitenabstand und verschieben ihn bis zur Veröffentlichung, überprüfen die Änderungen und ich denke, jetzt haben wir eine schöne Fußzeile Wenn wir nach Hause gehen und ganz nach unten scrollen, sind wir da Eine Sache, die noch übrig ist, ist, diese Texte an diese Stelle genau hier zu bringen . Also möchte ich auf die Startseite gehen. Wählen Sie den Container aus , der das enthält. Ich möchte, dass das 80% einnimmt, weil das sagen wir, 100%, 100% belegt Das sollte 80% der Veröffentlichungen beanspruchen. Jetzt glaube ich zu wissen, wo genau das Problem liegt. Ja. Moment, wir haben es noch nicht mal hochgeschoben, solange es noch ausgewählt ist, das Äußere, lass uns das Veröffentlichen von Inhalten rechtfertigen. Überprüfe die Änderungen und scrolle nach unten. Aber jetzt geht es bis zum Bild, also lasst uns das duplizieren. Jetzt lassen wir es einfach 40% einnehmen und diese andere Hälfte wird 40 bis 40% 40% ausmachen, und die beiden werden 80% ausmachen. Aber jetzt wird dieser leer sein, entferne das und das. Und das scrollt. Lassen Sie uns die Änderungen überprüfen. Schlendern Sie nach unten Da haben wir's. Jetzt ist es richtig darauf ausgerichtet, und es macht 40, 40% Also ja, ich denke, jetzt sind wir mit der Landing Page fertig, aber nur noch eine Sache, von der ich weiß, dass du dich fragst, wie wir sie auf jedem Gerät gut aussehen lassen Handy, Tablet, auf einem Desktop sieht es schon gut aus. Schauen wir uns also in der nächsten Lektion an, wie das geht. Wir sehen uns in Kürze. 21. Fertigstellen der Fußzeile: A, willkommen zurück. Wir sind also fast fertig mit unserer Landingpage, aber wir haben noch ein paar letzte Feinschliffe. Erstens: Lassen Sie uns die Farbe oder die Hintergrundfarbe der Foota so ändern , dass sie dem entspricht, was wir auf der Referenzwebsite haben Wo ist es? Ja, hier ist unsere Referenz-Website, und sie hat das gleiche Design wie dieser andere Bereich. Aber auf dem, an dem wir gerade arbeiten, hat er nicht diese Farbe. Also gehe ich zum Herausgeber. Ich möchte diesen Container auswählen, zum Stil gehen. Farbe. Kopiert das. Geh zurück zum Editor der Fußzeile. Wählen Sie die Hintergrundfarbe im Containerstil aus. Geben wir ihm diese Farbe. Particle Royals Royal fügt hinzu. Lassen Sie uns das aktivieren. Lassen Sie uns sogar wieder hier in diesem Editor reingehen. Partikel öffnen. Klicken Sie auf eine beliebige Stelle im Code, den JSON-Code, Control A copy. Gehen wir zurück zu unserem Editor. Wählen Sie im JS-Editor Control A, löschen, einfügen. Da haben wir's. Also, sagen wir einfach, bewerben Sie sich. Publizieren Ich gehe wieder rein, da ist unsere Fußzeile. Wenn ich jetzt hier draufklicke, um nach Hause zu gehen, los geht's. Also das ist unser Töpfer. Das ist das. Die andere Sache, die wir tun müssen, ist dafür zu sorgen, dass diese Seite auf Tablets und Smartphones gut aussieht. Lassen Sie uns in dieser Lektion daran arbeiten, dass sie auf Tablets gut aussieht. Fangen wir also mit der Seite an. Lassen Sie mich hier einfach alles schließen. Wir werden uns wieder an den Rest machen. Aber jetzt gehen wir nach rechts auf Lak Open Linking New Tab , um die Landingpage zu öffnen. Da haben wir's. Nun, hier drin, fangen wir mit der Kopfzeile an. Das ist der Header-Editor. Wechseln wir nun in den Tablet-Responsive-Modus, und so sieht es auf Tablets aus. Drücken Sie I, um die Struktur aufzurufen. Ich möchte den Behälter auswählen, der alles in diesem äußeren Behälter enthält. Dieser Behälter hier muss zu 100% sein. 100% des verfügbaren Speicherplatzes. Das müssen vielleicht 20% sein. Lass mich das auswählen. Der Button-Container muss einen Wert von 20% haben. Das Logo muss einen Wert von 20% haben. Der Menücontainer muss also zu 60% und nicht zu 60 Prozent aus P-Zellen bestehen. Veröffentlichen. Wie Sie sehen können, Menü befindet es sich hier, wenn ich den Mauszeiger über das Lass mich es einfach auswählen. Ich habe es ausgewählt, aber falls Sie es nicht auswählen können, gehen Sie in den Container , in dem es sich befindet, und wählen Sie dann Elements knave Solange es ausgewählt ist, wechseln Sie zu „Erweitert“ und brechen Sie all diese Standardeinstellungen wir in der Desktop-Version festgelegt hatten Denn wenn wir zurück zur Desktop-Version wechseln, schauen wir uns den Rand an, es wird wieder das sein, was es war. Im Tablet-Modus haben wir das zurückgesetzt. Aber für den Desktop bleibt es immer noch das, was wir ursprünglich hatten. Was auch immer wir für das Tablet eingestellt haben ist der Standard für das Handy. Ich möchte den Rand und die Polsterung für all diese Elemente im Tablet-Modus zurücksetzen und die Polsterung für all diese Elemente im Tablet-Modus Ich möchte dieses Menü nach unten drücken. Ich wähle das Menü selbst, den Rand, entferne den unteren Rand aus dem Menü, und jetzt geht's los. Veröffentlichen Sie, überprüfen Sie die Änderungen. Jetzt möchte ich Control Shift I drücken, um die Entwicklungstools in meinem Chrome-Browser aufzurufen . Dadurch kann ich mir Emulatoren für verschiedene Geräte ansehen Emulatoren für verschiedene Geräte Wenn ich auf dieses responsive Togo klicke, haben wir hier verschiedene Geräteemulatoren Für das iPad mini sehen wir zum Beispiel auf einem iPad mini, iPad er und iPad P so aus. Gehen wir einfach zum iPad Und ich kann O nicht sehen, hier ist das Menü. Ich glaube sogar, dass diese Lektion zu lang sein wird. Lassen Sie uns in der nächsten Lektion sehen, wie es von hier aus weitergeht. Wir sehen uns in Kürze. 22. Reaktionsschnelle Kopfzeile: Lassen Sie uns dort weitermachen , wo wir aufgehört haben. Wie Sie sehen können, befindet sich das Menü genau hier, das Menüsymbol, aber wir können es nicht sehen. Das erste, was wir tun möchten, ist die Farbe zu ändern. Solange es noch ausgewählt ist, gehe ich zum Stil über. Menü-Wrapper. Jetzt wollen wir zum Hamburger Stil gehen Für den Hamburger-Stil die Farbe des Hamburger-Symbols . Lass uns sehen. Wir wollen es weiß machen. Lass es uns grün machen. Lassen Sie mich diese Taste wählen. Kopiere das. Wählen Sie das Elements-Kit im Hamburger Stil Geh her und mach das grün. Das ist die Farbe des Symbols. Tatsächlich ändern wir das Falsche. Es ist nicht die Farbe des Hamburger-Symbols. Wir wollen, dass das so bleibt. Lass uns zur Normalität zurückkehren. Wir wollen, dass es diese dunkle Farbe hat. Gehen wir also zurück zum Farbwähler und ich möchte diese Farbe auswählen Nun, für diese Hamburger-Symbolfarbe sind das diese Linien Ich möchte, dass sie diese dunkle Hintergrundfarbe haben. Aber jetzt ist das hier. Für den Hintergrundtyp wollen wir dort die grüne Farbe haben. Wenn ich das auswähle, ist es genau das, wonach ich gesucht habe. Lassen Sie mich diese Schaltfläche auswählen. Farbkopie. Wählen Sie das Element als Stil aus. Im Hamburger-Stil. Okay. Gehen wir zum Hintergrundtyp, nicht zur Symbolfarbe, Hintergrundtyp, zu Grün und zum Hover Wenn Sie ein Tablet verwenden, bewegen Sie den Mauszeiger normalerweise nicht Aber vielleicht verwenden Sie einen Stift. Lassen Sie mich also nicht davon ausgehen. Typ Bground sollte beim Hover eine weiße Farbe haben, also so Nun, das ist das Burger-Symbol. Wenn wir darauf klicken und das Menü öffnen, haben wir auch diese Schaltfläche zum Schließen, und genau das haben wir hier unten. Kurz vor dem Start Lassen Sie uns sogar dieses Menü machen. Gehen wir wieder rein und machen wir das Menü mit diesem farbigen Menühintergrund. Geh wieder rein, ich will auf die Homepages. Startseite rechts öffnen „Neuer Tab“ zur Bearbeitung mit Elementor verlinken Jetzt gehe ich hier runter und möchte diesen Container auswählen Also wähle ich den Stil aus. Farbkopie. Lassen Sie uns hier und jetzt zu diesem Menü-Wrapper zurückkehren. Wir wollen ihm einen Hintergrundtyp dieser Farbe geben. Stil des Menüelements. Wir möchten ihm beim Schweben eine weiße Farbe geben. Wir wollen, dass es so grün ist, wenn diese Kopie auswählen. Auf das Menü klicken. Wir wollen das sehen können. Tatsächlich ist es bereits so eingestellt, dass es sich so verhält, aber das ist okay. Ich denke, es erbt von den Desktop-Einstellungen. Lassen wir es dabei. Lassen Sie uns das jetzt zu Hause aus ändern Nochmals, Burger-Menü. Hintergrundtyp „Geschlossen to go“. Lass es uns weiß machen. Art der Grenze, keiner. Sie sollten keinen Rand haben, und ich finde, das sieht gut aus. Lassen Sie uns jetzt auch ein mobiles Menü hinzufügen. Zurück zum Inhalt, zu den Einstellungen für das mobile Menü und zum Logo für das mobile Menü. Lassen Sie uns das auswählen, wählen Sie aus. Nein, wenn wir auf das Menü klicken , sieht es so aus. Jetzt können wir die Breite dieses Wrappers reduzieren, indem wir zur Breite des Menü-Wrappers wechseln Ich glaube, für Tablets sagen wir 30%. Nein, das ist zu klein, denn jetzt kollabiert es das Closed ToGo, einfach so Lass uns noch einmal zum Hamburger gehen. Gehen wir ins Schließfach. Lassen Sie uns die Marge knacken. Erweitern Sie das noch einmal. Und für den oberen Rand drücken Sie ihn nach unten. Einfach so. Gehen wir sogar zum Logo des mobilen Menüs. Was die Marge angeht, lassen Sie uns das durchbrechen. Rand links, nur leicht hineindrücken, und ich denke, wir sind jetzt fertig. Veröffentlichen Sie, und lassen Sie uns die Änderungen überprüfen. Es scheint, dass wir die Farbe des Menü-Wrappers wieder ändern müssen Farbe des Menü-Wrappers Lassen Sie mich die Farbe des Menü-Wrappers und dann das auswählen. Und ich möchte ihm hier diesen Hintergrund geben. Lass mich meinen Farbwähler benutzen , weil ich ihn bereits ausgewählt hatte Und füge es hier ein, wo ist die Farbe? Veröffentlichen. Lassen Sie uns die Änderungen überprüfen. Schalthebel I, alles klar. Jetzt haben wir zumindest einige Fortschritte gemacht. Aber jetzt schieben wir das auf die rechte Seite. Wenn wir das auswählen , diesen Container auswählen, der das Menü enthält, sollte alles in der Mitte angeordnet sein, aber genau hier sollten sie sich auf der rechten Seite befinden, veröffentlichen und los geht's. Jetzt müssen wir sie ein wenig nach innen drücken. Nehmen wir den Behälter , in dem sich die drei befinden. Dieser Container, und lassen Sie uns dafür sorgen, dass er 95% des Platzes einnimmt. Einfach so. Wir können es auch herunterdrücken. Gehen Sie weiter, durchbrechen Sie den Rand und geben Sie ihm einen oberen Rand von zehn, veröffentlichen Sie den Header. Da haben wir's. Fantastisch. Jetzt haben Sie auch die Möglichkeit , diese Schaltfläche nicht einzufügen. Sie müssen es nicht unbedingt hier haben. Die Möglichkeit, es auszublenden, ohne es aus der Desktop-Version zu löschen , da Sie es in der Desktop-Version weiterhin benötigen. Wenn Sie zurück zum Tablet wechseln. Wir können einfach sagen, dass wir einen separaten Header nur für Tablets erstellen . Wenn ich das auswähle, lass mich einfach den Container auswählen , der alles enthält, und ich werde ihn duplizieren. In Ordnung. Jetzt haben wir zwei Header, aber wir können sagen, dass einer nur auf Tablets sichtbar sein sollte und ein anderer nur auf dem Desktop sichtbar sein sollte Für den ersten können wir zum Beispiel sagen, solange er ausgewählt ist, gehen wir zu „Erweitert“, „Layout reduzieren“, „Responsive“, „Ausblenden wir uns auf Tablets und Telefonen“. Veröffentlichen. Wenn ich es für das zweite auswähle, können wir zu „Erweitert“ wechseln und „Responsive“ sagen, es auf dem Desktop auswähle. Nur auf dem Desktop bearbeiten, aber auf Tablets und Mobilgeräten anzeigen. Personen, die Tablets und Mobiltelefone verwenden, sehen nur dieses Menü, diese Kopfzeile. Leute, die den Desktop benutzen , werden das nur sehen. Wenn wir jedoch zum Tablet wechseln, stellen Sie fest, dass der obere Teil verblasst ist, was bedeutet, dass wir ihn in diesem Modus nicht bearbeiten können, aber dieser kann bearbeitet werden Wir können diesen Container jetzt loswerden, und jetzt müssen wir nur noch zwei Container veröffentlichen Lassen Sie uns die Änderungen überprüfen, und jetzt haben wir nur noch das Menü. Wenn wir in den Desktop-Modus wechseln, können wir den sehen , der die Taste hatte. Wenn wir in den Tablet-Modus wechseln, können wir nur den sehen, der die Taste nicht hatte. Denken Sie daran, dass wir gesagt haben, dass dies auf Tablets und Mobiltelefonen sichtbar sein sollte . Wenn wir auf ein Handy umsteigen, hat es auch nur was? Das ohne den anderen Knopf. Im Grunde genommen ist das so, dass die Seite auf Tablet-Bildschirmen responsiv wird. Ich habe eine Aufgabe für Sie, und die Aufgabe besteht darin, diese Seite auf Mobiltelefonen und Smartphones responsiv zu machen . Sie werden dieselben Prinzipien verwenden, die wir verwendet haben, um diese Seite responsiv zu gestalten. Aber in der nächsten Lektion werde ich Ihnen ein paar Tipps und Tricks geben , wie diese Aufgabe erledigen und am Ende eine ansprechende, responsive Seite erhalten. Wir sehen uns also in Kürze. 23. Reaktionsschneller Heldenabschnitt: Jetzt, wo wir einen auf den Bildschirm reagierenden Header auf Tablets haben . Es ist an der Zeit zu sehen, wie man ihn auf Smartphones ansprechend macht. Und jetzt möchte ich Ihnen ein paar Tipps geben, wie den Rest der Seite responsiv gestalten können. Beginnen wir mit der Reaktionsfähigkeit des Headers auf Mobiltelefonen Reaktionsfähigkeit des Headers auf Mobiltelefonen Wenn wir uns also auf Mobiltelefone beschränken, ist das natürlich nicht editierbar Das ist es, was wir bearbeiten, und wir haben zwei Container innerhalb dieses äußeren Containers, dann ist es sinnvoll, ihn vielleicht zu 50% zu machen , weil er derzeit 100% der Breite also den Container selbst auswählen, können wir sagen, dass wir vielleicht 40% belegen wollten Dieser andere Behälter, in dem sich das Burger-Menü befindet, sollte, sagen wir, ebenfalls 40% belegen. Wie Sie jetzt sehen können, haben wir 20% Platz dazwischen. Nehmen wir sogar an, sie sollten 46% einnehmen, und dieser andere sollte ebenfalls 46% einnehmen. Da haben wir's. Nun können wir den Container auswählen, der diese beiden Container enthält, und natürlich ist es dieser Container. Also ich denke, das ist es, und wir können sagen, dass wir 98% besetzen sollten. Sagen wir sogar neun bis fünf Prozent des verfügbaren Platzes. Lassen Sie uns die Änderungen überprüfen, und so sieht es auf Mobiltelefonen aus. iPhone Pro Max, iPad Mini, Surface Pro Samsung, also sieht es auf verschiedenen Mobilgeräten gut aus. Das ist jetzt der Header. Lassen Sie uns jetzt schnell den Gang wechseln und am Heldenbereich arbeiten, sodass Sie an den restlichen Abschnitten arbeiten müssen , denn inzwischen wissen Sie bereits, wie Sie verschiedene Elemente responsiv gestalten können, basierend auf dem, was wir mit der Kopfzeile gemacht haben. Aber ich möchte, dass wir sehr schnell an diesem Heldenbereich arbeiten. Also in den Tablet-Modus wechseln. Wie Sie sehen können, sieht der Heldenbereich im Tablet-Modus so aus, und ich möchte ihn haben. Ich möchte, dass dieses Bild vor dem Text steht. Also ich kann das auswählen, zu „Erweitert“ wechseln, „Layout“, und ich kann einfach so von oben nach unten sagen und es dann tatsächlich umkehren. Wir haben also diesen Container , der den Text enthält, und jetzt haben wir den Container , der das Bild enthält. Dieser Behälter kann tatsächlich 100% des Außenbehälters einnehmen. Dieser Behälter kann hier 95% einnehmen, nicht 95 Pi-Zellen, und dieser andere kann 95% einnehmen. Ex einfach so. Warum ist das 95. Jetzt, wo dieser ausgewählt ist, der äußere, können wir alles auf die Mitte ausrichten. Wir können einige dieser Texte reduzieren. Wir können den Abstand hier oben reduzieren, die Polsterung oben, vielleicht 50, unten 50. Kommen wir auch dazu und legen es in die Mitte, richten es mittig aus, so auch das Und dieser Behälter, der alle Knöpfe enthält. Lass uns alles in die Mitte stellen, einfach so. Veröffentlichen Sie und lassen Sie uns die Änderungen überprüfen. Da haben wir's. Drücken Sie Schicht I, um die responsiven Tools aufzurufen. Wechseln wir zum iPad mini. So sieht es auf einem iPad mini aus. Wenn wir scrollen, müssen Sie jetzt den Rest ausprobieren und bearbeiten, einschließlich der Fußzeile Vergiss nicht, den Fuß so zu optimieren , wie wir den Header optimiert haben In meinen vorherigen Kursen habe ich Ihnen Schritt für Schritt gezeigt, wie Sie jedes Teil responsiv gestalten können. Aber in diesem Kurs möchte ich dir eine Aufgabe geben, die du anhand der Informationen abschließen kannst , die auf den Tipps basieren, die ich gegeben habe, als wir an der Helden-Sektion und der Kopfzeile gearbeitet haben. Ich glaube, du kannst dich um den Rest kümmern, und ich bin sehr neugierig und gespannt , was du dir einfallen lassen wirst, speziell für diesen Teil. Sie können sich sogar dafür entscheiden, dieses Hintergrundbild zu entfernen. Auf Tablets, weil es momentan nicht gut aussieht, aber auf dem Desktop sieht es gut aus. Auf Desto kannst du es nicht loswerden. Wie werden Sie also damit umgehen, auf Tablets darum zu kümmern Das ist eine gute Aufgabe , um die Sie sich kümmern sollten, und ich weiß, dass Sie viel lernen werden , wenn versuchen, Probleme zu debuggen und zu beheben Und das scheint ein guter Ort zu sein, um den Kurs zu beenden. Aber bevor du gehst, habe ich noch ein paar letzte Gedanken. Ich möchte sie mit dir teilen, also sehe ich dich in der nächsten und letzten Lektion. 24. Schlussgedanken: Herzlichen Glückwunsch. Du hast es bis zum Ende geschafft, und ich möchte dir dafür danken, dass du bis jetzt bei mir geblieben bist. Vertrau mir. Ich weiß, dass der Abschluss eines Online-Kurses eine ziemliche Herausforderung sein kann , da wir alle einen vollen Terminkalender haben. Die Tatsache, dass Sie die letzte Lektion erreicht haben, bedeutet, dass Sie es ernst meinen, Elementor-Webdesign zu lernen Deshalb sollten Sie stolz auf sich sein , dass Sie den Kurs abgeschlossen haben Denken Sie daran, dass Sie jetzt über die Fähigkeiten verfügen, mit Elementor eine Landingpage von Grund auf neu zu erstellen Aber das ist erst der Anfang. Sie können diese neu gewonnenen Fähigkeiten nutzen, um eine vollständige Website für Ihr Unternehmen oder unsere Kunden zu erstellen eine vollständige Website für Ihr Unternehmen oder unsere Kunden Wenn Sie Ihre elementaren Fähigkeiten auf die nächste Stufe bringen und lernen möchten , wie man voll funktionsfähige Websites erstellt, nicht nur Landingpages, schauen Sie sich gerne mein Profil für umfassendere Kurse Und jetzt, wo du mit der Arbeit an deiner Landing Page fertig bist, vergiss nicht, einen Screenshot davon zu machen und ihn mit uns hier in der Community zu teilen Wir lieben es, unsere Projekte zu teilen, um Feedback von Mitschülern und unseren Lehrern zu erhalten. Und Sie können mit einer Browsererweiterung namens G Full Page einen Screenshot Ihrer gesamten Landingpage machen mit einer Browsererweiterung namens G Full Page einen Screenshot Ihrer gesamten Landingpage . Gehen Sie also einfach zu Ihrem Browser und suchen Sie nach der vollständigen G-Erweiterung. Wenn Sie also Firefox verwenden, ersetzen Sie Chrome durch Firefox. Ich werde darauf klicken. Dann mach weiter und installiere es. Wie Sie sehen können, ist meins installiert. Dann wechseln Sie jetzt zu Ihrer Landingpage, hier sind wir. Sie werden dieses Symbol hier oben haben, sagt G F-Seite Klicken Sie einfach darauf und es wird ein Screenshot der gesamten Landingpage erstellt. Laden Sie es als PNG herunter. Und jetzt kannst du zurück in die Klasse gehen. Dies ist eine frühere Klasse, die ich letzten Monat veröffentlicht habe. Und unter der Registerkarte Projekte und Ressourcen können Sie fortfahren und auf Projekt einreichen klicken. Wie Sie sehen können, konnten die Schüler Projekte hochladen, an denen sie in dieser Klasse gearbeitet haben. Klicken Sie also unter dem Tab Projekte und Ressourcen auf Projekt einreichen in dieser aktuellen Klasse unter dem Tab Projekte und Ressourcen auf Projekt einreichen und seien stolz darauf, der Community zu zeigen was Sie geschaffen haben. Noch eine Sache, bevor wir uns trennen, habe ich noch eine kleine Favoritin, die ich fragen möchte. Wenn Sie diesen Kurs hilfreich und unterhaltsam fanden, würden Sie sich bitte einen Moment Zeit nehmen , um eine Bewertung dafür zu schreiben? Ihr Feedback wird nur ein paar Sekunden in Anspruch nehmen, aber es könnte der entscheidende Faktor für die Lernreise einer anderen Person sein. Wenn die Schüler auf Ihre Bewertung stoßen, können sie dadurch feststellen, ob dieser Kurs für sie geeignet ist. Nehmen Sie sich also einen Moment Zeit, öffnen Sie den Bewertungs-Tab unter diesem Videoplayer und teilen Sie uns Ihre Meinung zu dem Kurs mit. Zum Abschluss möchte ich Ihnen alles Gute für Ihre elementare Reise wünschen . Lernen Sie weiter, kreieren Sie weiter und nutzen Sie diese kostenlosen Tools, um Ihrer Fantasie Leben einzuhauchen. Und ich kann es kaum erwarten zu sehen, was dir als Nächstes einfällt. Bis dahin bleib großartig und ich freue mich darauf, dich in der nächsten Klasse zu sehen . Viel Spaß beim Designen.