Einen WordPress-Blog mit Elementor aufbauen

1. Kurs-Einführung: Im heutigen, sich schnell verändernden digitalen Zeitalter ist eine starke Online-Präsenz nicht mehr optional, sondern unverzichtbar Denn ein gut gestalteter, benutzerfreundlicher Blog kann ein leistungsstarkes Instrument sein , um mit Zielgruppen auf dem Weltmarkt in Kontakt zu treten. Hallo, mein Name ist Ken und ich habe den Leuten in den letzten 5,5 Jahren beigebracht, wie man Wpress-Websites erstellt letzten 5,5 Jahren beigebracht, wie man Wpress-Websites Und in diesem Kurs werde ich dir zeigen, wie du mit Wpress und Elementor deinen eigenen schönen und professionellen Blog erstellen Elementor deinen eigenen schönen und professionellen Blog mit Wpress Wir werden es von Grund auf neu machen. Und wenn wir fertig sind, werden Sie einen startbereiten Blog haben , zu dem Sie Leute von Ihren Social-Media-Konten oder Social-Media-Profilen aus weiterleiten zu dem Sie Leute von Ihren Social-Media-Konten oder Social-Media-Profilen aus oder Social-Media-Profilen Sie können damit beginnen, Blogbeiträge in Ihrem Blog zu schreiben und zu veröffentlichen und diese Links auf Ihren Social-Media-Konten zu teilen , um Leute auf Ihren Blog zu locken Und während des gesamten Kurses werde ich Ihnen alles Wesentliche zeigen, das Sie benötigen, um den Wordpress Elementor-Workflow zu verstehen Sie werden verstehen, wie man verschiedene von Elementor angebotene Elemente verwendet , und Sie werden den Grund kennen, warum wir sie verwenden Nur um dir einen schnellen Überblick über einige der Konzepte zu geben , die wir lernen werden, wird in diesem Kurs behandelt, wird in diesem Kurs behandelt wie du Wordpress von Grund auf neu einrichtest Das heißt, wir beginnen mit dem Kauf von Wpress-Hosting und der Installation von Wpress, sobald Sie das Hosting gekauft haben, damit Sie es nutzen können Wie installiert man Wpress-Themes und -Plug-ins und arbeitet damit. Wir werden sehen, wie man Webseiten und Blogbeiträge erstellt. Ich zeige dir, wie du Artikel erstellst und sie in deinem Blog veröffentlichst. Ich zeige Ihnen, wie Sie diese Artikel oder Blogbeiträge kategorisieren , damit Sie Ihr Blog richtig organisieren können Ich zeige Ihnen, wie Sie mit dem Drag & Drop-Builder von Elementors wunderschöne funktionale Layouts erstellen mit dem Drag & Drop-Builder von Elementors wunderschöne funktionale Layouts , damit Sie eine schöne Website haben Sie werden verstehen, wie Sie Ihre Blogs, Typografie, Farben, Bilder und all die anderen Elemente, die wir in der Klasse verwenden werden, anpassen Farben, Bilder und all die anderen Elemente, die wir in der Klasse verwenden werden Und das ist nur eine Spitze des Eisbergs der Konzepte, die wir behandeln werden Und wenn wir diesen Kurs abgeschlossen haben, werden Sie über die Fähigkeiten verfügen, jede andere Art von Website mit Wordpress, Elementor und anderen Plug-ins zu erstellen jede andere Art von Website mit Wordpress, Elementor und anderen Plug-ins Wie Sie also sehen können, wird dies ein sehr praktischer Kurs sein Es wird Ihnen die Erfahrung geben, die Sie benötigen, um in kürzester Zeit vom Anfänger zum selbstbewussten Webdesigner zu werden. Und wenn Sie sich fragen, ob dieser Kurs gut zu Ihnen passt, richtet dieser Kurs an Unternehmer, die lernen möchten, wie man eine Website für ihr Unternehmen erstellt Unternehmer, die lernen möchten, wie man . Wenn Sie also eine Geschäftsperson sind, die Ihr Fachwissen in Artikeln oder Blogbeiträgen auf Ihrer eigenen Plattform und nicht auf einer Plattform eines Drittanbieters teilen möchte Artikeln oder Blogbeiträgen auf Ihrer eigenen Plattform und nicht auf einer Plattform , werden Sie sehen, wie Sie einen Blog erstellen , mit dem Sie dies tun können. Dieser Kurs richtet sich auch an alle, die lernen möchten, wie man Websites und Blogbeiträge mit We Press erstellt alle, die lernen möchten, wie man Websites und Blogbeiträge mit und damit Geld verdienen kann. Wenn Sie möchten, dass die Leute Sie dafür bezahlen, Websites oder Blogbeiträge für sie zu erstellen und damit Ihren Lebensunterhalt zu verdienen, Ihnen dieser Kurs die Grundlagen und vieles mehr Du kannst dich also darauf vorbereiten, das zu tun. Also, wenn das nach einer Fähigkeit klingt, wärst du daran interessiert, es zu lernen. Wenn Sie lernen möchten, wie Sie Blogs und Websites für sich selbst oder für Kunden erstellen können. Ich ermutige Sie, sich mir jetzt anzuschließen, und ich verspreche Ihnen, wenn wir fertig sind, werden Sie keine verdammte Website haben, sondern einen echten Blog, der bereit ist, Besuchern oder Kunden zu dienen Ohne Zeit zu verschwenden, möchte ich Ihnen das Projekt zeigen, an dem wir arbeiten werden In der nächsten Lektion nehme ich Sie also mit auf einen Rundgang durch den Blog, den wir gerade erstellen Wir sehen uns in Kürze. 2. Kursprojekt: Ich. Und daran erinnere ich dich immer in jeder einzelnen Klasse. Der beste Weg, Webdesign oder andere technische Fähigkeiten zu erlernen Webdesign oder andere technische Fähigkeiten besteht darin, an einem realen Projekt oder im Grunde nur an einem Projekt zu arbeiten . Und hier ist das Projekt, an dem wir arbeiten werden. Dies ist der Blog, den wir erstellen werden, und ich wollte Sie auf einen kurzen Rundgang durch den gesamten Blog mitnehmen . Zuallererst ist dies die Landing Page oder die Homepage. Wie Sie sehen können, haben wir diese Heldenseite mit etwas Kopfzeilentext und einer Beschreibung. Dann sind das die Blogbeiträge. Wenn Sie auf einen Blog klicken, werden Sie weitergeleitet, um diesen Blog zu lesen. Aber das werden wir in Kürze sehen. Wie Sie hier auf der linken Seite sehen können, haben wir ein Profil oder die Biografie des Autors. Das ist deine Biografie, wenn du derjenige bist, der den Blog betreibt. Genau hier haben wir aktuelle Artikel, und Sie können auf einen von ihnen klicken, um sie zu lesen. Hier unten auf dem Foto haben wir drei Spalten. Wir haben einige schnelle Links. Wir haben ein Anmeldeformular für den Fall, dass sich der Leser in Ihre Mailingliste eintragen möchte, und wir haben hier eine kurze Beschreibung. Sehr einfach, aber das Wichtigste Sie aus diesem Kurs mitnehmen ist, wie Sie mit Wpress und Elementor all diese verschiedenen Abschnitte erstellen Weiter zur Artikelseite. Hier haben wir uns auf alle Blogbeiträge geeinigt, Hier haben wir uns auf alle Blogbeiträge geeinigt die Sie veröffentlicht haben, und wie Sie sehen können, sind sie sehr gut angeordnet und haben gleichmäßige Abstände, unabhängig von der Höhe der einzelnen Elemente hier, da Sie sehen können, dass dies größer ist Das Bild darunter wird also etwas nach unten gedrückt, um diesen Abstand beizubehalten Und wenn Sie einen Blogbeitrag öffnen, um ihn zu lesen, zum Beispiel diesen, so sieht der Blogbeitrag aus. Wir haben immer noch die Liste der neuesten Artikel, und Sie haben die volle Kontrolle darüber, was Sie hier anzeigen möchten. Im Moment zeigen wir also aktuelle Artikel an. Aber mithilfe von Wpress-Kategorien können Sie definieren, welche Kategorie Sie hier anzeigen möchten, und ich zeige Ihnen, wie das geht Ich habe erwähnt, dass wir lernen werden, wie Sie Ihre Blogbeiträge kategorisieren können Wir werden also sehen, wie das geht. Jetzt kann der Benutzer kommen und lesen. Wie Sie sehen können, handelt es sich um die Kategorie Produktivität, und das Datum, an dem sie veröffentlicht wurde, war der 7. März 2024. Sie können weitermachen und die Zusammenfassung des Artikels lesen . Hier haben Sie eine kurze Biographie der Person , die diesen speziellen Blogbeitrag veröffentlicht hat. Dann haben wir die Fußzeile. Wenn Sie Videos haben, können Sie diese auf dieser Seite veröffentlichen. Da haben wir's. Und wenn wir eines der Videos hier abspielen, brauchst du nur einen Link zu deinem Video auf YouTube. Sie wechseln zur Kontaktseite. Sehr einfache Kontaktseite mit einem schönen, schönen Kontaktformular. Wir werden sehen, wie man ein nettes Formular-Plugin in Cold Forminator verwendet , um diese Kontaktseite zu erstellen Und wir haben auch diese Seitenleiste mit aktuellen Artikeln. Jetzt werden Sie feststellen, dass wir immer noch diese Seitenleiste haben, und das liegt daran, dass es immer gut ist, Handlungsaufforderungen auf Ihrer Website zu haben . Sie möchten Kunden oder Besucher so lange wie möglich auf Ihrer Website oder Ihrem Blog halten so lange wie möglich auf Ihrer Website oder Ihrem Blog Und indem Sie ihnen Links zum Klicken geben, die sie zu einem anderen Teil Ihrer Website weiterleiten, behalten Sie sie länger auf Ihrer Website, und das ist gut für Ihre Suchmaschinenoptimierung. Wenn sie nun auf diese beliebte Schaltfläche klicken, wird ihnen diese Seitenleiste außerhalb der Leinwand mit mehr Inhalt angezeigt, und Sie haben die volle Kontrolle darüber was Sie auf dieser Seitenleiste anzeigen möchten Wie ich bereits erwähnt habe, wird die wichtigste Erkenntnis aus diesem Kurs die Denkweise eines Webdesigners, eines Wpress-Webdesigners, zu haben die wichtigste Erkenntnis aus diesem Kurs darin bestehen, die Denkweise eines Webdesigners, eines Wpress-Webdesigners, zu haben. Mein Ziel mit diesem Kurs ist es also, Ihnen zu zeigen, wie Sie eine Kombination verschiedener Tools innerhalb des Wpress-Ökosystems verwenden verschiedener Tools innerhalb des Wpress-Ökosystems um einen Blog oder eine Website zusammenzustellen Und dieses Blog-Beispiel wird ein gutes Projekt für uns sein , um zu verstehen, wie all diese verschiedenen Tools funktionieren Elementor steht im Mittelpunkt , weil Elementor uns dieses Layout ermöglicht All diese Layouts, die wir auf den verschiedenen Seiten gesehen haben , werden Elementor sein Das ist also im Grunde nur ein kurzer Überblick darüber , woran wir arbeiten werden Das ist das Klassenprojekt. In der nächsten Lektion wollen wir sehen, wo und wie Sie WordPress-Hosting und einen Domainnamen kaufen können. Also werde ich dich in Kürze sehen. 3. WordPress-Hosting und Domainnamen kaufen: A, willkommen zurück. Jetzt habe ich kürzlich ein vollständiges Tutorial zum Kauf von wPress-Webhosting veröffentlicht , wenn Sie eine einfache Website erstellen möchten Nun, das Tutorial war für einen anderen Grundkurs. Da der Prozess für den Kauf von WPressHsting jedoch derselbe bleibt, habe ich beschlossen, ihn in diesen Kurs aufzunehmen nur für den Fall, dass Sie nicht wissen, wie man WPress-Hosting kauft Ohne weitere Zeit zu verschwenden, finden Sie hier den Vorgang zum Kauf WPressHsting Sie nun die Website gesehen haben, die wir in diesem Kurs erstellen werden, ist es an der 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 pk, sagen wir, free pick.com Der Browser hat eine Anfrage für diese bestimmte Seite gesendet , und auf diese bestimmte Seite kann über diese Adresse oder diese URL zugegriffen werden über diese Adresse oder diese URL zugegriffen Als die Anfrage gesendet wurde, wurde diese Anfrage also von dem Server empfangen , der die Website für die kostenlose Auswahl speichert, und die Freepk-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 eine Antwort mit der von Ihnen angeforderten Seite 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, free pick.com ist ein Domainname, und dieser spezielle Domainname ist einzigartig für free peek, sodass niemand anderes dasselbe kostenlose peek.com haben kann Genauso kann niemand sonst deine Telefonnummer haben. 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 bei Wordpress oder. Dies ist die offizielle Website von WordPress. Hier können Sie Wpress herunterladen, wenn Sie Ihre Website offline entwickeln möchten Sie können Wpress in Ihrem System installieren und ohne Internet arbeiten und Ihre Website erstellen Aber was uns interessiert, ist die Hosting-Seite. WordPress hat eine Liste empfohlener Webhosts. Und ich empfehle Ihnen, sich einen Moment Zeit zu nehmen und diese Seite zu lesen. Wie Sie sehen können, gibt es drei empfohlene Webhosts: Bluehost, Dream Host und WordPress.com Dies bedeutet jedoch nicht, dass dies die einzigen Webhosts sind , die Sie für Ihre Wpress-Website verwenden können Es gibt andere Webhosts , die genauso gut, wenn nicht sogar besser sind als diese drei Dies sind also nur Presseempfehlungen, aber Sie werden hier beim Lesen herausfinden , dass es Hunderttausende von Webhostern gibt, von denen die überwiegende Mehrheit Mindestanforderungen der Presse erfüllt. Wpress hat beschlossen, Ihnen die Arbeit zu erleichtern und hat beschlossen, Ihnen die drei besten Empfehlungen zu geben die drei besten Empfehlungen Jetzt persönlich habe ich Blue Host verwendet, und vor langer Zeit, als ich anfing, Wpress zu verwenden, habe ich wpress.com ausprobiert, und Sie sollten wpress.com nicht mit wpress.org verwechseln WordPress.org ist die Plattform , die von der WpressFoundation betrieben wird, denn denken Sie daran, dass Wpress Open Source ist und wpress.org existiert, um Ihnen Remember mit dem W Press-Download und allem, was Sie über wPress wissen müssen, zur Verfügung zu stellen . . Aber jetzt, wenn es um Hosting geht, gibt es einen speziellen Dienst namens wpress.com gibt . 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 hat Wochen seine Grenzen, wenn Sie es mit der Installation von Wpress selbst auf einem Server vergleichen Wenn Sie Wpress irgendwo auf einem Server installieren, haben Sie mehr Kontrolle, um viele weitere Dinge zu tun, über die Sie keine Kontrolle haben , wenn Sie einen gehosteten Dienst wie wpress.com verwenden einen gehosteten Dienst wie Aber natürlich ist es ein netter Ort, Sie ausprobieren können, wenn Jetzt, auf persönlicher Ebene, verwende ich Name Chip, 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 Tip 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 zehn Ideen für verschiedene Websites habe, habe ich zehn Ideen. Vielleicht möchte ich einen 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 darü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 sozialen Medien, die nur mit den vier Websites verknüpft sind, auf diese Website zu schicken , Leute über Links in 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 Sie können jetzt entscheiden diese Website anscheinend durchsetzt Lassen Sie mich also separat einen speziellen Webhosting-Plan dafür besorgen , und dann können Sie einfach zum dedizierten 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 diesem Domainnamen, vi com. Und jetzt, in diesem Kurs, werden wir unsere Website erstellen, und ich werde einen anderen Domainnamen verwenden, nämlich Wordpress com und er wird auch unter diesem Plan stehen. Also werde ich diese beiden Websites, Demo-Websites, unter demselben Hosting haben. 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, weil Sie es vielleicht nützlich finden könnten 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. In Ordnung, charity today.com ist die Premium-Domain. Es sind 1.700$. Aber wir haben auch andere günstigere Domains, Wohltätigkeitsorganisationen bis hin zu täglichen Zwecken Es liegt an Ihnen, kreativ zu werden und einen Domainnamen zu kaufen , mit dem Sie leben können , mit einem 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. Meine Firma today.com. Und wie Sie sehen können Ja. Also spiel einfach damit herum, und wenn du bereit bist, kannst du es in den Warenkorb legen. Aber denken Sie daran, wenn wir zum Shared Hosting zurückkehren 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 . Natürlich werde ich in der Beschreibung unter diesem Videoplayer einen Link hinterlassen , über den Sie der Webhosts kaufen können, über die wir gesprochen haben, einschließlich Name-Chip. Und einige davon könnten Affiliate-Links sein. Wenn Sie mich und meine Arbeit unterstützen möchten , können Sie mich am besten unterstützen, indem Sie auf meine Affiliate-Links klicken, da Sie den Service trotzdem zu Sie auf meine Affiliate-Links klicken, da Sie dem Preis kaufen , der auf ihrer Website angegeben ist. Wenn Sie jedoch die von mir bereitgestellten Links verwenden, erhalte ich eine kleine Provision für Ihren Kauf. Das hilft mir, die Rechnungen zu bezahlen und die Motivation zu wecken, weiterhin neue Kurse zu erstellen. Vor diesem Hintergrund dreht sich alles um Webhosting und darum , wie man einen Domainnamen bekommt. In der nächsten Lektion sehen wir uns an, wie Sie WordPress installieren, sobald Sie nach dem Kauf des Hostings Zugriff auf Ihr C-Panel haben. Wir sehen uns also in der nächsten Lektion. 4. Installiere WordPress: Nachdem Sie sich einen Domainnamen und ein Hosting gekauft haben , ist es an der Zeit, auf das C-Panel zuzugreifen , damit wir WordPress installieren können. Also lass uns weitermachen und das tun. Jetzt haben verschiedene Webhosts unterschiedliche Möglichkeiten, auf das C-Panel zuzugreifen. So werde ich es mit dem Namenschip machen. Das Wichtigste ist jedoch Sie auf das C-Panel zugreifen, da wir über das C-Panel WordPress installieren können. Also lass mich einfach einloggen. Dann gehe ich direkt zur Hosting-Liste. Dort sind alle meine Hosting-Pakete aufgeführt. Ich gehe zum C-Panel. Wie ich bereits erwähnt habe, bieten Ihnen Ihre Webhosts möglicherweise eine andere Möglichkeit, auf das C-Panel zuzugreifen. Hier befinden wir uns also im C-Panel, und was wir wollen, ist der Bereich Softaul App Installer, weil er uns verschiedene CMS und Dienste bietet , die wir vielleicht verwenden möchten, und wir möchten WordPress verwenden Lassen Sie mich also unter Soft App Installer auf WordPress klicken. Und denken Sie daran, ich habe erwähnt, dass dieser Plan, der Seo Plus-Plan von Name-Chip, es Ihnen ermöglicht, mehrere Websites unter diesem einzigen Hosting-Plan zu haben. Also genau hier haben wir Install Now. Ich klicke auf Jetzt installieren und wir werden zum Formular für den wPress-Installer weitergeleitet Wir müssen nur diese Felder ausfüllen . Und als Erstes müssen Sie das Protokoll oder das Präfix auswählen. Und ich mag es, wenn meine Website mit WWW beginnt , dann mein Domainname. Aber andererseits werden Sie feststellen, dass wir HTTP und HTTPS haben. Wenn Ihre Website, wenn Ihr Domainname über ein SSL-Zertifikat verfügt, sollten Sie HTTPS verwenden Wenn Sie nach draußen klicken, wird eine schnelle Überprüfung Wenn Sie kein erforderliches Zertifikat haben, erhalten Sie hier eine Warnung, dass Sie kein erforderliches Zertifikat haben und nur HTTP verwenden können. Es ist jedoch wichtig, dass Sie über ein SSL-Zertifikat für Ihre Website verfügen . Im Jahr 2024 ist das ein Muss. Das nächste natürlich hier, denn vifxpo.com hat bereits die Ich werde wpress com benutzen. Und genau hier können wir einen Ordner hinzufügen, in dem wir unsere WordPress-Website speichern Aber dann bedeutet das, dass unsere Homepage mit dem Schrägstrich in diesem Ordner angezeigt wird Schrägstrich in diesem Ordner Wenn Sie jedoch möchten, dass die Startseite Ihrer Website www.domainname.com lautet, fügen Sie hier keinen Ordner hinzu keinen Also werde ich es so lassen. Dann können Sie hier die Version von Wpress auswählen , die Sie verwenden möchten Ich möchte die neueste Version verwenden. Meine Website wird also www press slash anything sein. Zweitens können wir unserer Website einen Namen geben. Wenn wir CNN cnn.com öffnen. Wie Sie sehen können, steht der Name, den sie ihrer Homepage gegeben haben , für Eilmeldungen, neueste Nachrichten und all Das ist also der Name, der auf Ihren Tabs erscheinen wird. Zum Beispiel Kens Blog, Leben durch Blogbeiträge oder Artikel verändert. Dann finden Sie in diesem Abschnitt die Anmeldedaten für Ihr Arbeitspresse-Dashboard. Nur für den Fall, dass Sie sich nicht über das C-Panel in Ihr Wpress-Dashboard einloggen möchten, sollten Sie sich mit Ihrem Domainnamen WP anmelden Sie können diese Anmeldeinformationen verwenden. Also lasse ich meins einfach auf der Standardeinstellung. Diese E-Mail wurde automatisch für Sie generiert , als Sie Zugriff auf das C-Panel erhielten, als Sie Ihr Hosting gekauft haben und Zugriff auf Ihr C-Panel erhalten haben. Dies sind Plugins, die Sie zusammen mit Wordpress installieren können. Sie werden im Paket mit Wordpress geliefert, aber abhängig von Ihrem Host haben Sie diese Liste möglicherweise nicht, aber Sie müssen keine davon installieren , da es im WordPress-Plug-in-Verzeichnis viele Optionen gibt im WordPress-Plug-in-Verzeichnis viele Optionen und sie wahrscheinlich bessere Arbeit leisten können als diese. Wenn Sie also als Nächstes automatische Backups erstellen möchten, können Sie hier reinkommen und den Backup-Speicherort auf dem Standardspeicherort belassen Backup-Speicherort auf dem Standardspeicherort Wählen Sie aus, ob Sie vielleicht einmal am Tag, einmal pro Woche, einmal im Monat ein Backup erstellen möchten. Lass mich einmal pro Woche wählen. Dann Rotation. Das ist die Anzahl der Sicherungskopien von Backups, die Sie zu einem bestimmten Zeitpunkt haben. Und hier können Sie Ihre Gmail-E-Mail-Adresse eingeben, um eine Benachrichtigung zu erhalten, sobald Work Press installiert wurde. Aber das müssen Sie nicht tun. Lass mich einfach auf Installieren klicken. Und es heißt, es dauert 3 Minuten, aber tatsächlich dauert es weniger als eine Minute. Und da haben wir's. Jetzt ist das dein Domainname. Dies ist die URL zu Ihrer Startseite und dies ist die URL zu Ihrem Dashboard. Da wir uns jetzt hier im C-Panel befinden, können wir einfach darauf klicken und werden direkt zu unserem Dashboard weitergeleitet. Also lass mich einfach darauf klicken. Und wie Sie sehen können, ist hier das Dashboard. Und wie ich bereits erwähnt habe, wie Sie hier sehen können, haben wir Kens Blog. Dies ist der Name, den wir unserem Blog oder unserer Website gegeben haben. Wenn ich jetzt auf Kens Blog klicke , gelangen wir zur Standardeinstellung auf der Seite, die wir natürlich ändern werden. Und wie Sie sehen können, ist hier der Name der Website. Dies sollte Ihren Namen oder den Namen, den Sie Ihrer Website gegeben haben, und den Slogan oder Slogan, den Sie unter dem Namen angegeben haben, lauten den Namen, den Sie Ihrer Website gegeben haben, und . Dies ist jetzt das Standarddesign. Wir werden sehen, wie man das WordPress-Theme im Laufe der Zeit ändert , aber so installiert man WordPress, und jetzt sind wir bereit, mit dem nächsten Schritt fortzufahren aber so installiert man WordPress, , der Installation von Elementor Also ich sehe dich in einer Minute. 5. Installiere Elementor: Jetzt, wo wir Press installiert haben, ist es an der Zeit, Elementor zu installieren, da wir natürlich die War Press-Website mit Element erstellen die War Press-Website mit Gehen wir also ins Innere der Plugins. Und zuallererst klicke ich einfach auf Plugins, um zur Liste der vorinstallierten Plugins zu gelangen . Und das sind die Plug-ins, die immer mit War Press geliefert werden. Also wähle ich einfach die beiden aus, wähle Löschen in diesem Drop-down-Menü und übernehme die Anwendung Okay. In Ordnung. Also jetzt haben wir keine Plug-ins. Lass mich einfach die Seite aktualisieren. Derzeit sind keine Plug-ins verfügbar. Wenn ich also auf Neues Plug-In hinzufügen klicke, werde ich in das We Press-Plug-in-Verzeichnis weitergeleitet. Und hier haben wir mehr als 50.000 kostenlose Plug-ins, die Sie installieren und verwenden können. Also lasst uns natürlich nach Elementor suchen. Und hier sind wir. Elementor ist hier also die erste Option. Also werde ich weitermachen und auf Jetzt installieren klicken. Und jetzt ist es installiert. Das Einzige, was noch übrig ist, ist es zu aktivieren. Aber bevor wir es aktivieren, werden Sie feststellen, dass wir hier noch andere Elementor-bezogene Add-Ons oder Plug-ins haben Elementor-bezogene Add-Ons oder Plug-ins Und dies sind Produkte, die von Plugin-Entwicklern von Drittanbietern entwickelt wurden Plugin-Entwicklern von Drittanbietern , die nicht mit Element, dem Team von Elementor, verbunden sind dem Team von Elementor Dies sind unabhängige Entwickler, die zusätzliche Add-Ons erstellt haben, zusätzliche Elemente , die wir mit der kostenlosen Version von Elementor kostenlos verwenden können mit der kostenlosen Version von Elementor kostenlos Jetzt hat Elementor eine Pro-Version , für die Sie bezahlen müssen, und eine kostenlose Und die kostenlose Version enthält bereits mehrere Elemente , die wir sehen werden Die kostenlosen Elemente, die mit Elementor geliefert werden, reichen jedoch nicht aus, um damit eine schöne Arbeitspresse-Website zu erstellen Sie können mit ihnen eine einfache Website erstellen , aber keine sehr schöne Website Aber jetzt bieten uns diese zusätzlichen Elemente, die wir von diesen elementaren Add-Ons erhalten diesen elementaren Add-Ons , mehr Optionen , und natürlich werden wir eine ganze Reihe davon verwenden, sodass Sie genau verstehen , wovon ich spreche Aber lassen Sie mich vorerst einfach weitermachen und auf Aktivieren klicken. Und jetzt werde ich zu diesem Elementar-Setup-Assistenten weitergeleitet , um einige Konfigurationen vorzunehmen Der erste Schritt besteht also darin, ein Konto bei Elementor zu erstellen , um auf all diese Vorteile zugreifen zu Sie benötigen jedoch kein elementares Konto, um Elementor verwenden zu können Also kann ich weitermachen und diesen Teil überspringen. Als Nächstes können Sie hier auswählen , welches Thema Sie verwenden möchten. Sie können wählen, ob Sie sich für das Hallo-Thema entscheiden möchten. Dies ist das We Press-Theme, das vom Elementa-Team speziell für die Zusammenarbeit mit Elementor erstellt das vom Elementa-Team speziell für die Zusammenarbeit mit Elementor Aber wir werden dieses Hallo-Thema nicht verwenden , da wir das Astro-Thema verwenden werden, das auch ein weiteres fantastisches We-Press-Theme ist Es wurde von Profis erstellt und funktioniert perfekt mit Elementor Also werde ich einfach weitermachen und diesen Teil überspringen. Und hier können wir einen Namen für unseren Blog oder unsere Website wählen. Dies ist der Name, den Sie Ihrer Website gegeben haben. Nun, das ist die Codesprache für einen Apostroph. Denken Sie also daran, dass dies der Name ist, den wir meiner Website gegeben haben. Aber lassen Sie mich es einfach im Blog nennen. Ich klicke auf Weiter. Aber wenn Sie mit dem Namen zufrieden sind, den Sie ihm bei der Installation von Were Press gegeben haben, müssen Sie ihn nicht ändern. ändere ihn nur, weil ich nicht möchte , dass dieser Apostroph diesen Namen beeinflusst Also habe ich es hier geändert. Ich klicke auf Weiter. Hier können Sie Ihr Website-Logo hochladen. Aber das werden wir tun, wenn wir die Website erstellen. Wir müssen es hier also nicht hinzufügen, also überspringen. Und schließlich, Schritt fünf, bearbeiten Sie eine leere Leinwand mit dem Elemental Editor oder wählen Sie eine professionell gestaltete Vorlage oder importieren Sie eine Vorlage, die Sie bereits erstellt haben Aber wir werden nichts davon tun. Aber wenn wir hier auf Überspringen oder Schließen oder auf eine dieser Schaltflächen klicken , generiert Elemento eine Elementarseite nur um uns den Elementar-Editor zu zeigen Also drücke ich einfach auf Überspringen. Und jetzt hat Elementor eine Beispiel-Webseite generiert, die wir löschen werden, aber sie wurde nur generiert, um zum Builder weiterzuleiten , damit wir sie uns von Anfang an ansehen können Jetzt haben wir hier die Leistungsfähigkeit von Elementor AI freigeschaltet. Wir leben im Zeitalter der KI, das ist also leicht zu erwarten Sie können weitermachen und all diese Informationen lesen. Um Elementar AI jedoch auf Ihrer Website zu verwenden , um Ihren Text zu bearbeiten und Bilder zu generieren, während Sie ihn erstellen, müssen Sie ein Elementor-Konto erstellen Denken Sie daran, dass der erste Schritt im Wizard darin bestand, ein Konto zu erstellen Das Erstellen eines Kontos ist kostenlos, sodass Sie sich keine Sorgen machen müssen. Du kannst weitermachen und das tun. Ich klicke auf Weiter. Und jetzt ist das die Seite. Es ist als Elementor Nummer acht gekennzeichnet. Aber wie gesagt, wir werden diese Seite löschen. Aber bevor wir es löschen, werden wir es verwenden, um einen Überblick über den Elementor-Arbeitsbereich zu haben , sodass Sie sich mit allen Teilen des Editors vertraut machen können Also werden wir das in der nächsten Lektion tun. Aber bevor wir das tun, lassen Sie mich einfach auf Veröffentlichen klicken. Jetzt ist es veröffentlicht und ich möchte, dass wir zum WordPress-Dashboard zurückkehren. Wenn wir also zum ersten Mal darauf klicken, beenden, erhalten wir diese Option. Wählen Sie jedes Mal, wenn Sie auf die Exit-Taste klicken , wohin Sie Sie werden dies nur einmal einstellen und jedes Mal, wenn Sie darauf klicken, werden Sie zu dem Teil Ihrer Website weitergeleitet , den Sie ausgewählt haben Also wähle ich das Dashboard. Und bewirb dich. Jedes Mal, wenn ich darauf klicke, werde ich immer zum Dashboard weitergeleitet. Lassen Sie mich einfach auf Verlassen klicken , da wir nicht versuchen, dort Änderungen zu speichern. Jetzt sind wir hier im Dashboard. Und wie ich bereits erwähnt habe, in der nächsten Lektion werden wir uns in der nächsten Lektion einen kurzen Überblick verschaffen, einen kurzen Rundgang durch den Elementor-Arbeitsbereich Also werde ich dich in Kürze sehen. 6. Elementor Workspace-Tour: Jetzt ist es an der Zeit, sich einen schnellen Überblick über den Elementor-Arbeitsbereich Denken Sie also daran, wir hatten eine vorgenerierte Seite. Also gehe ich einfach zu Seiten. Und als wir Elementor installiert haben, es natürlich Elementor Nummer acht generiert Aber als wir WordPress installiert haben, waren diese beiden vorgenerierten Seiten dabei Ich werde diese beiden auswählen. In diesem Drop-down-Menü gehe ich in den Papierkorb und bewerbe mich dann. Jetzt bleibt uns also nur noch diese Seite übrig . Um mit Elementor zu bearbeiten, kann ich jetzt auf Mit Elementor bearbeiten klicken oder auf Bearbeiten gehen Und hier haben wir die Bearbeitung mit Elementor. Es ist immer noch dasselbe. Also lass mich darauf klicken. Und hier sind wir. Also das hier auf der linken Seite ist der Werkzeugkasten. Ich nenne es die Toolbox. Und wenn ich die Kontrolltaste drücke, haben wir den Navigator. Dieser Navigator ist wie eine Karte oder eine Vogelperspektive der Seite, die wir hier haben. Also als kurzes Beispiel, weil wir uns das ansehen werden, aber lassen Sie uns über den Navigator sprechen. Wenn ich darauf klicke, um ein Raster hinzuzufügen, und vielleicht fügen wir das hinzu. Jetzt haben wir ein Raster. Wenn ich dieses Raster dupliziere, indem ich es auswähle und mit der rechten Maustaste dupliziere, haben wir jetzt zwei Raster Und jetzt ist dieses Raster leer, wenn wir es erweitern wenn wir es erweitern, weil wir nichts hineingelegt haben Wenn ich zu diesem Symbol hier oben gehe, um die Elemente aufzudecken, und diese Überschrift hineinziehe, wirst du jetzt feststellen, dass wir dort eine Überschrift haben. Wenn ich hier auf das Plus klicke und ein Bildelement hinzufüge, haben wir jetzt ein Bildelement. Wenn ich dieses Raster auswähle, werden Sie feststellen, dass dieses Raster ebenfalls ausgewählt ist. Lassen Sie mich es auswählen. Jetzt ist es ausgewählt, und wie Sie sehen können, ist es jetzt ausgewählt. Und das ändert sich, um das Raster zu bearbeiten. Das sind also die Einstellungen des Rasters. Wenn ich dieses Bild so auswähle, wechselt es zu Bild bearbeiten. Das sind also die Einstellungen für das Bild. Wenn ich diesen Text auswähle, ändert sich dies in Überschrift bearbeiten, da es sich um ein Überschriftenelement handelt. Wenn ich das auswähle, wird es zu „Raster bearbeiten“ geändert , weil es sich um ein Raster handelt, das wir daraus dupliziert haben, und es ist genau hier hervorgehoben Das ist also eine Vogelperspektive oder eine Karte, wo wir uns befinden. Stellen Sie sich also vor, Sie haben mehrere Elemente, 20 Elemente, die ganz nach unten aufgereiht sind, und Sie möchten schnell eines davon auswählen. Aus irgendeinem Grund können Sie es hier nicht auswählen. Sie können hier reinkommen und es auswählen, und jetzt wird es in Ihrem Arbeitsbereich ausgewählt. Gehen wir nun wieder rein, wie ich bereits erwähnt habe, und wann immer wir ein Element hinzufügen wollen, klicken wir einfach auf dieses Symbol hier, es zeigt die Elemente, und ich kann vielleicht ein Videoelement dorthin ziehen. Und das ist der Grund, warum es Element genannt wird. Es gibt uns Elemente , die wir zu unserer Website hinzufügen können. Und wann immer wir ein Element hier oben auswählen und es per Drag & Drop in eine beliebige Spalte hier oder in einen Abschnitt ziehen, dem Moment, in dem wir es ablegen, das aktive Element. Und die Änderungen an diesem Element, um Ihnen mitzuteilen , dass Sie jetzt Änderungen an diesem bestimmten Element vornehmen. Zuvor, in meinem letzten Kurs, hatten wir ein etwas anderes System. Jetzt stelle ich fest, dass wir dieses Rasterelement haben. Es war in den vorherigen Kursen, die ich veröffentlicht habe, nicht verfügbar, also muss es neu sein Lassen Sie mich diese in den vorherigen Klassen schließen , in denen ich Container verwendet habe, und genau das werden wir verwenden. Wir können Elemente einfach von hier ziehen und sie auch in den Containern ablegen. Wir gehen wieder rein. Lass mich das einfach schließen. Wenn ich all diese zusammenfalle, enthalten diese Panels die verschiedenen Elemente , die Elemental uns zur Verfügung stellt Wie Sie sehen können, haben wir jetzt die Elemente der Pro-Version. diese kann nur zugegriffen werden, wenn Sie für Elemental Pro bezahlt haben Aber in den grundlegenden und allgemeinen Wpress-Panels haben wir kostenlose Elemente Wenn ich also Wpress erweitere, haben wir Elemente, die wir hier per Drag-and-Drop einfügen können Und jetzt, wo ich es gelöscht habe, ändert sich das jetzt, um Seiten zu bearbeiten weil es sich um ein Seitenelement handelt Wenn ich das zusammenbreche und zu Allgemein übergehe. Wenn ich ein Bildfeld direkt darunter ablege , wenn diese rosafarbene Linie erscheint, wenn ich es dort ablege, ändert sich das Bild in Bildfeld bearbeiten , weil das ein Bildrahmelement ist. Und das sind Einstellungen für Bildbox-Elemente. Eine Sache, die Sie an jedem Element, das wir hier einfügen, feststellen werden , ist, dass es drei Tabs hat. Eine Inhaltsregisterkarte, eine Stil-Registerkarte und eine Registerkarte für Fortgeschrittene. Auf der Registerkarte „Inhalt“ werden wir also den Inhalt bereitstellen , der nach dem Element angezeigt werden soll. Wenn es sich zum Beispiel um ein Bild handelt, wenn es sich um ein Bildfeld handelt, benötigt es natürlich einen Inhalt vom Typ Bild. Also hier können wir das Bild bereitstellen. Lassen Sie mich als Beispiel einfach zu meinem Computer gehen und das auswählen. Wählen Sie dann. Das ist ein Inhalt, den wir hinzugefügt haben. Aber jetzt drinnen und natürlich kann Inhalt auch Text sein, und hier ist der Text. Hier ist der Titel, hier ist der Titel. Das ist also die Bereitstellung von Inhalten. Sobald wir den Inhalt bereitgestellt haben, können wir ihn gestalten, das heißt, wir können ihm Aussehen, Farbe und Größe geben , so wie wir es möchten. Wir können es in diesem Tab stylen. In den erweiterten Tabs haben wir Dinge wie Rand und Polsterung und reagieren dort, wo sie angezeigt werden sollen, wir haben Bewegungseffekte Das ist also die Registerkarte „Erweitert“, und fast alle Elemente, die wir der Seite hinzufügen haben diese Einstellungen für Inhalt, Stil und Erweitert Wenn ich jetzt zur Liste zurückkehre und „ Allgemein“ ausblende, wenn ich P erweitere, haben diese natürlich ausblende, wenn ich P erweitere, Sperren und wir können nicht darauf zugreifen. Aber denken Sie daran, als wir Elementor installiert haben und im Wpres-Plug-in-Verzeichnis nach Elementor gesucht haben, haben wir andere Addons gesehen, die andere Addons gesehen Dies sind Plug-ins von Drittanbietern, die erstellt wurden, um dieser Liste weitere elementare Addons hinzuzufügen Wann immer wir also eines dieser Plug-ins installieren, wird es hier aufgelistet und es bringt seine eigenen Elemente ein, und es bringt die wir auf unsere elementare Seite ziehen können unsere elementare Seite ziehen Und baue weiter. Und einige der Elemente , die wir mit diesen anderen Addons von Drittanbietern kostenlos erhalten , sind dieselben Elemente, die nur mit Elementor Pro verfügbar sind Mit anderen Worten, obwohl wir einige davon wie Loop-Karussell oder Formular nicht mit Elementor bekommen können , können wir sie bekommen, indem wir diese Elementor-bezogenen Addons von Drittanbietern installieren , und wir werden sie kostenlos verwenden können , und du wirst sehen, und du Das nächste, was wir uns ansehen wollen, ist hier unten, wir haben Wenn ich diese Seite aktualisiere, können Sie, sobald Sie Änderungen vorgenommen haben, auf Aktualisieren klicken und dann eine Vorschau der Änderungen anzeigen. Es wird ein neuer Tab geöffnet, und so sieht unsere Seite jetzt aus. Hier haben wir den responsiven Modus. Wenn wir die Seite erstellt haben und bereit sind, sie auf verschiedenen Gerätegrößen, Desktops, Tablets und Mobiltelefonen responsiv zu machen auf verschiedenen Gerätegrößen, Desktops, Tablets und Mobiltelefonen responsiv , können wir darauf klicken. Und jetzt werden wir diese drei Optionen haben. Wir können zur Tablet-Ansicht und zur mobilen Ansicht wechseln und Anpassungen an dieser bestimmten Bildschirmgröße vornehmen wirkt sich nur auf diese Bildschirmgröße aus. So können wir jede Bildschirmgröße so anpassen, dass unabhängig davon, wo Sie sich die Website ansehen die Website fantastisch aussieht. Jetzt, hier drin. Nun, lassen Sie mich einfach darauf klicken, um den responsiven Modus loszuwerden. Der dritte Punkt hier ist Geschichte. Und das ist wie eine Zeitkapsel. Es ermöglicht uns, zu einem bestimmten Zeitpunkt zurückzukehren. Das ist also eine Liste aller Schritte , die wir seit dem Öffnen dieser Seite gemacht haben. Denken Sie daran, dass wir mit der Bearbeitung begonnen haben. Wenn wir alle Änderungen, die wir nach dem Hinzufügen vorgenommen haben, und das hinzugefügte Symbol entfernen möchten, können wir auf Symbol hinzugefügt klicken. Denken Sie daran, dass wir dieses Symbol einmal hinzugefügt haben. Jede Änderung, die danach vorgenommen wurde , wird jetzt verworfen. Wenn Sie das wiederholen möchten, können wir vielleicht zu dem Zeitpunkt zurückkehren, zu dem wir den Container entfernt haben, vielleicht zu dem Zeitpunkt , an dem wir das Bildfeld hinzugefügt haben, oder wir können zu dem Zeitpunkt zurückkehren, an dem wir Zu diesem Zeitpunkt war die Seite leer. Das ist also wie eine Zeitkapsel und ermöglicht es Ihnen , bei Ihrem Projekt vor- und zurückzugehen Wenn Ihnen die sechs Änderungen, die Sie vorgenommen haben, nicht gefallen, können wir zu der Zeit zurückkehren, bevor Sie diese Änderungen vorgenommen Nun, das ist das Symbol, um den Navigator aufzurufen. Endlich können wir hier Änderungen an der Seite vornehmen. also wie den Namen der Seite Wir können ihn also wie den Namen der Seite ändern. Mein Beitrag. Wir können das Seitenlayout ändern, vielleicht auf elementare volle Breite. Und jetzt ist es in voller Breite von Rand zu Rand und vieles mehr. Wir werden sehen, wie wir all diese Dinge machen können, wenn wir weitermachen. Zum Schluss möchte ich, dass wir uns dieses Burger-Menü ansehen. Wir haben hier mehrere Einstellungen. Ich ändere diese Einstellungen hier nie wirklich , außer wenn ich in die Benutzereinstellungen gehe, und da ist dieses Ding, das wir Bearbeitungsgriffe nennen. Das ist ein sehr praktisches Tool, das man als normaler Grundbenutzer haben sollte. Lass mich dir nur zeigen, was ich meine. Wenn wir wieder reingehen und Basic sagen, lassen Sie mich einen Container hineinziehen und ihn dort ablegen. Jetzt haben wir einen Container, lassen Sie mich wieder hier reingehen und eine Überschrift ziehen. Wenn ich diese Überschrift nun duplizieren möchte, muss ich mit der rechten Maustaste darauf zeigen und auf Duplizieren klicken Das sind drei Dinge, die ich tun musste. Klicken Sie mit der rechten Maustaste auf Duplizieren. Aber wenn wir jetzt in dieses Menü gehen, Benutzereinstellungen auswählen und Bearbeitungsgriffe aktivieren diese Bearbeitungsgriffe aktiviert sind, muss ich nur mit der Maus darüber fahren und es duplizieren Bewegen Sie den Mauszeiger darüber, löschen Sie. Wenn ich hierher gehe, war das vorher nicht hier. Wenn ich zu den Benutzereinstellungen gehe und das deaktiviere, haben wir es nicht hier. Wenn ich also diesen Container duplizieren möchte, muss ich mit der rechten Maustaste auf Duplizieren klicken. Aber wenn wir die Bearbeitungsgriffe aktiviert haben. Jetzt haben wir hier dieses zusätzliche Symbol, und ich kann diese Abschnitte einfach schnell duplizieren. Das ist also die einzige Einstellung, mit der ich hier normalerweise herumspiele. der anderen werden wir uns im Laufe der Zeit die Seiteneinstellungen ansehen weil es einen Abschnitt gibt, in dem wir kurz darüber sprechen werden. Aber insgesamt ist das alles, was ich dir über den elementaren Arbeitsbereich zeigen wollte dir über den elementaren Arbeitsbereich zeigen Wir werden im Laufe der Entwicklung unseres Blogs noch viel mehr über den Workspace erfahren der Entwicklung unseres Blogs noch viel mehr über den Workspace also in der nächsten Lektion Lassen Sie uns also in der nächsten Lektion das Astra-Theme installieren. Also wir sehen uns in Kürze. 7. Ein Theme installieren: Nachdem wir nun einen kurzen Überblick über den elementaren Arbeitsbereich erhalten haben , ist es an der Zeit, das WordPress-Theme zu installieren , das wir verwenden werden Jetzt muss jede WordPress-Website ein Thema haben, da das Theme und der Builder das Erscheinungsbild der Website bestimmen Um also ein WordPress-Theme zu installieren, gehe ich in die Themes für das Erscheinungsbild ein. Und standardmäßig ist bei jeder Installation von WordPress immer ein Standarddesign bereits installiert, und es ist normalerweise das Thema dieses Jahres. Moment sind wir also im Jahr 2024, und das Thema ist 2024, und es ist das aktive Thema. Letztes Jahr war es 2023. Im Vorjahr war es 2022. das also zunächst Lassen Sie mich das also zunächst einfach löschen. Dann lösche ich auch 2023. Und jetzt bleibt uns 2024 übrig. Aber wir wollen Astra benutzen. Also werde ich sie hinzufügen. Dann gehe ich zu Astra und installiere es. Da haben wir's. Lassen Sie mich also auf Aktivieren klicken. Und hier sind wir. Astra ist jetzt also das aktive Thema auf unserer Website und 2024 ist das Ausweichthema Falls Astra also aus irgendeinem Grund kaputt geht, funktioniert es nicht mehr wie erwartet Die Website wird auf das Thema 2024 zurückgreifen. Es ist also immer eine gute Idee, ein Standard-Fallback-Theme auf Ihrer Website beizubehalten ein Standard-Fallback-Theme auf Ihrer Website Und so installiert man im Grunde ein Were Press-Theme. Lassen Sie uns in der nächsten Lektion mit dem eigentlichen Aufbau der Website beginnen . Wir sehen uns also in ein paar Minuten. Geh nicht zu weit. 8. Füge das Logo hinzu: A. Und willkommen zurück. Jetzt ist es also an der Zeit, die Navbar oder das, was wir den Header-Bereich nennen, zu erstellen die Navbar oder das, was wir den Header-Bereich nennen Lassen Sie mich einfach zur Referenz-Website wechseln. Das hier ist der Header der Website. Das erste, was wir tun werden, ist das Logo hinzuzufügen. Aber um den Header selbst zu erstellen, werden wir ein spezielles Plug-In verwenden, das ein Add-On zu Elementor ist und Elements Kit Elementor Add heißt Also lass uns hier reingehen. Gehen wir zu Plugins, fügen Sie neue hinzu. Und lass uns im Suchfeld nach Elementor suchen Und hier sind wir. Wo ist Elements Kit. Ja, genau hier. Also installiere es jetzt. Und lassen Sie uns weitermachen und es aktivieren. Da haben wir's. Jetzt ist es also installiert. Um nun eine Kopfzeile zu erstellen, fahren wir fort und bewegen den Mauszeiger über Elements Kit und wählen Header-Fußzeile Und jetzt müssen wir diesen Satz von Assistenten für Elements-Kits durchgehen , nur um sicherzustellen, dass einige dieser Widgets standardmäßig im Frontend in unserem Editor verfügbar sind , denn wenn wir mit den Grundeinstellungen arbeiten, einige der Widgets hier standardmäßig nicht aktiviert, sodass sie uns im Editor nicht zur Verfügung stehen Deshalb verwende ich gerne Advanced. Und wenn ich das einfach zurückschalte, glaube ich, dass eines davon eingeschaltet ist. Lassen Sie mich zurück zu Basic wechseln. Schau dir den Widget Builder an. Jetzt ist es aktiviert, ebenso wie viele andere, die in der Grundeinstellung ausgeschaltet waren . Der nächste Schritt. Nächster Schritt, weiter als Nächstes. Und schließlich ist das Elements Kit jetzt eingerichtet und bereit, damit wir es im Frontend verwenden können. Gehen wir also zur Kopf- und Fußzeile. Hier sollen wir nun eine Liste aller Kopf- und Fußzeilen sehen , die wir für unsere Website erstellt haben Lassen Sie uns diese Werbung einfach loswerden. Sagen wir jetzt, füge neue hinzu. Geben wir ihm einen Namen. Header und der Typ ist Header. Beim Erstellen des Poders wird die Fußzeile ausgewählt, und wir möchten, dass sie auf der gesamten Website verfügbar ist Diese anderen sind nur mit der Pro-Version des Plug-ins verfügbar der Pro-Version des Plug-ins Lassen Sie uns es jetzt aktivieren. Sie können Ihren Kopf und den gesamten Header-Bereich deaktivieren , wenn Sie vielleicht gerade Wartungsarbeiten an der Kopfzeile durchführen und nicht möchten , dass die Leute sie sehen können. Aber jetzt wollen wir, dass es aktiv ist. Jetzt können wir Änderungen speichern und sie werden hier aufgelistet, aber wir können auch direkt zum Bearbeiten von Inhalten gehen, und Elementor speichert sie automatisch Wir werden es beim nächsten Mal hier finden. Wenn Sie jetzt auf Inhalt bearbeiten klicken, gelangen Sie zum Frontend, wo wir jetzt mit der Erstellung des Headers beginnen können. Wenn ich hier alles zusammenfalle, all diese Panels, wie ich während der Elementar-Tour erwähnt habe, wird jedes Mal, wenn wir ein elementarbezogenes Addon hinzufügen, es hier aufgelistet Und hier sind wir also: Elements Kit und Elements Kit Header Footer Hier können wir also alle Elemente abrufen, die wir zum Erstellen dieses Header-Bereichs benötigen Erstellen dieses Header-Bereichs Eines der Elemente, die wir damit bekommen werden, und ich habe bereits erwähnt, dass wir in der Lage sein werden, Elemente zu bekommen, für die wir sonst bezahlen müssten, um sie in Elementor Pro zu verwenden, ist das Elements-Kit-Navigationsmenü, denn wenn wir hier eingeben, NV Sie werden sehen, dass wir ein NAV-Menü haben. Das bekommen wir mit Elementor Pro. Es steht uns also nicht mit einer kostenlosen Version von Elementor zur Verfügung , aber Elements Kit NAV ist Fangen wir jetzt mit dem Logo an. Also werde ich weitermachen und auf Plus klicken. Und denken Sie daran, wir haben bereits erwähnt, dass Elementor diese Rasteroption nicht hatte, aber jetzt hat sie sie Und das ist gut so, denn jedes Plug-In muss kontinuierlich aktualisiert und verbessert werden Und Elementor ist eines der am meisten aktualisierten und verbesserten Plug-ins auf dem Markt Deshalb ist es so beliebt. Jede neue Woche haben sie etwas Neues, etwas Tolles, das sie Elementor hinzufügen können Und so ist Grid das neueste Ding. In den vergangenen Monaten haben wir Flexbox verwendet Wenn ich also auf Flexbox klicke, haben wir diese Optionen Wenn Sie meinen vorherigen Kurs besucht haben, kennen Sie diese Containerstrukturen bereits Sie können also zurückgehen und Grid auswählen. Und jetzt haben wir diese neuen Strukturen , mit denen ich noch nicht herumgespielt habe. Ich werde mich wahrscheinlich in der nächsten Klasse , die ich veröffentlichen werde, mit den Grids befassen, aber in diesem Kurs werden wir nur die Flexbox-Strukturen verwenden Behalte das also im Hinterkopf. Und jetzt fangen wir an, denn unser Header besteht aus drei Abschnitten. Drei Spalten, eins, zwei, drei. Das sind drei Container. Lassen Sie uns mit dieser Struktur weitermachen. Also werde ich darauf klicken und jetzt haben wir diese drei Container. Lassen Sie uns im ersten Container weitermachen und auf das Pluszeichen klicken. Und hier suche ich einfach nach, lass mich diese Dinge zusammenklappen und Basic öffnen. Und jetzt machen wir weiter und wählen ein Bild aus und legen es dort ab. Das ist ein Bildelement. Und jetzt können wir weitermachen und unser Logo auswählen. Jetzt habe ich noch keine Bilder, da es sich um eine Neuinstallation handelt. Also kann ich Dateien auswählen. Und ich hatte diesen Ordner vorbereitet, der alle Bilder enthält , die ich auf der Referenzwebsite verwendet habe, und ich werde ihn unter diesem Videoplayer verfügbar machen . Schauen Sie also unter dem Tab Projekte und Ressourcen nach. Dort finden Sie den Download-Link. Wenn du meine Bilder verwenden möchtest, kannst du aber auch deine verwenden. Also wähle ich das Logo aus. Und los geht's, klicken Sie auf Auswählen, und jetzt haben wir unser Logo. Aktualisiere das. Lassen Sie uns eine Vorschau der Änderungen anzeigen, und so fügen Sie das Logo hinzu. also in der nächsten Lektion Lassen Sie uns also in der nächsten Lektion ein NV-Element hinzufügen. Dieses Element besteht aus Elementen. Wir sehen uns in Kürze. 9. Ein Nav-Element hinzufügen: A, willkommen zurück. Nachdem wir unser Website-Logo hinzugefügt haben, ist es an der Zeit, das NAV-Menü hinzuzufügen. also wieder rein, wir also wieder rein, gehen wir zu unserem Editor, und jetzt gebe ich hier natürlich NV ein und wir ziehen das Elements Kit NAV-Menüelement auf diese Stufe. Und wenn wir es dort ablegen, ist es jetzt das aktive Element. Die erste Option hier in den Einstellungen des Inhaltsmenüs ist also das Auswahlmenü. Wenn wir auf dieses Drop-down-Menü klicken, sollten wir eine Liste der Menüs sehen , die wir im Dashboard erstellt haben. Aber jetzt haben wir kein Menü, was bedeutet, dass wir es erstellen müssen. Also lasst uns das zunächst aktualisieren. Und ich möchte den Namenschip und den Softacular-Tab schließen . Also bleibt uns das übrig Und ich möchte auf dieses Burger-Menü klicken und dann zum Dashboard zurückkehren. Und hier sind wir. Lass mich diese Dinge einfach schließen. Sogar das. Jetzt wollen wir also ein Menü erstellen. Gehen wir also zum Darstellungsmenü. Und hier sind wir, wie Sie sehen können, unten Ihr erstes Menü erstellen. So können wir weitermachen und unserem Menü einen Namen geben — Menü. Oder sagen wir einfach Hauptmenü. Und jetzt werden Sie hier feststellen, dass Sie Ihrem Menü einen Namen geben und dann auf Menü erstellen klicken. Also werden wir auf Menü erstellen klicken. Aber bevor wir das tun, beachten Sie, dass wir gerade Menüelemente hinzufügen müssen und dieser Abschnitt abgestuft ist, und das liegt daran, dass wir das Menü erstellen müssen Lassen Sie mich also auf Hauptmenü klicken, um das Hauptmenü, unser Hauptmenü, zu erstellen, und dann Menü erstellen Und jetzt ist dieser Bereich aktiv, was bedeutet, dass wir jetzt Menüelemente zu unserem Menü hinzufügen können, wie das heißt, Menüelemente aus der linken Spalte, dieser Spalte, hinzufügen . Wenn ich das zusammenblende, kann ein Menüelement eine Webseite, ein Blogbeitrag, ein benutzerdefinierter Link, eine Kategorie, was auch immer Sie wollen, sein. Aber in diesem Fall werden wir Seiten verwenden, die Seiten, auf denen wir sie erstellt haben. Aber wir haben noch keine Seiten. Das bedeutet, dass wir eine Reihe von Seiten erstellen müssen , denn wenn wir zu unserer Referenzwebsite wechseln, handelt es sich um Webseiten. Wenn wir auf Artikel klicken, werden wir zur Artikelseite weitergeleitet. Lass mich einfach darauf klicken. Hier sind wir. Das ist also die Archivseite für Artikel. Im Grunde wollen wir also Webseiten erstellen. Jetzt, da wir unser Menü bereits erstellt und gespeichert haben , können wir sicher zu Seiten wechseln und den Mauszeiger über Seiten Klicken Sie mit der rechten Maustaste auf Neu hinzufügen. Auf Seiten mit neuem Tab öffnen klicken Sie mit der rechten Maustaste auf Link in neuem Tab öffnen. Seiten, ein neuer Stiftlink in einem neuen Tab. Jetzt haben wir also das Lass mich das schließen. Jetzt haben wir diese drei Seiten, die wir gerade erstellen werden. Lassen Sie uns die Artikel, Videos und Kontakte auf der Startseite erstellen. Ich werde es einfach veröffentlichen. Und das ist jetzt veröffentlicht. Lassen Sie uns also eine weitere erstellen, klicken Sie mit der rechten Maustaste auf Neu hinzufügen. Das ist optional. Wenn Sie keine Videos haben, die Sie teilen möchten. In Ordnung. Wenn wir wieder rein gehen und auf Seiten oder alle Seiten klicken, werden wir jetzt alle Seiten sehen, die wir erstellt haben. Denken Sie daran, dass bei der Installation von WordPress einige vorinstallierte Seiten mitgeliefert wurden, wie die Beispielseite und die Entwurfsseite für die Datenschutzrichtlinie. Dann ist dies die Elementseite , die bei der Installation von Element generiert wurde. Also werde ich das auswählen. Diese drei bearbeiten dieses Drop-down-Menü, verschieben es in den Papierkorb und wenden es dann an. Nun, das sind die vier Seiten, die wir erstellt haben. Jetzt können wir zum Darstellungsmenü zurückkehren, da wir unser Menü bereits erstellt Wir können diese Elemente nun zum Menü hinzufügen. Wählen Sie alle aus und fügen Sie sie dann zum Menü hinzu. Los geht's. Jetzt können wir sie durch Ziehen neu anordnen. Das Video kommt nach dem Kontakt. Nein. Kontakt ist der letzte Punkt. Speichern Sie dann das Menü. Jetzt können wir all diese schließen und zur Kopf- und Fußzeile des Elements Kit zurückkehren Hier ist unser Header. Wir können mit Elementor auf Bearbeiten klicken, aber ich möchte den Link in einem neuen Tab öffnen , damit wir das Dashboard intakt lassen können Wechseln wir also zum Header-Editor. Und hier sind wir. Hier haben wir aufgehört. Ich wähle das NAV-Element aus. Und jetzt in diesem Drop-down-Menü ist hier das Hauptmenü. Lassen Sie uns das auswählen, und jetzt werden die Menüelemente angezeigt Lass es uns so rechts ausrichten. Und so fügt man ein NV-Menü hinzu. Jetzt werden wir es stylen. Mach dir keine Sorgen. Wie Sie sehen können, hat unsere Referenz-Website einen schönen nV-Bereich, der gut ausgerichtet ist. Aber das sieht ein bisschen komisch aus. Wir werden uns darum kümmern. Aber so fügen Sie das n-Element zu unserer Website hinzu. In der nächsten Lektion fügen wir genau hier diese Schaltfläche , die diese Seitenleiste mit einigen zusätzlichen Inhalten an der Seite öffnet. Es wird das Off-Canvas-Element genannt. Wir sehen uns in Kürze. 10. Off-Canvas Button: Jetzt ist es an der Zeit, diese Schaltfläche genau hier hinzuzufügen , die diese Seitenleiste oder diese Seitenleiste außerhalb von Canvas aufruft diese Seitenleiste oder diese Seitenleiste außerhalb , die einige zusätzliche Artikel enthält Also zurück zu unserer Workstation. Hier sind wir, wir werden ein anderes Elementor-ähnliches Plug-In verwenden Gehen wir also wieder rein, Plugins fügen neue hinzu. Sagen wir Elementor Royal Elemental Adds und Templates. Also werde ich das jetzt installieren. Es hat 300.000 aktive Installationen, sehr beliebt. Und ich werde weitermachen und es aktivieren. Also lass uns das überspringen. Und jetzt sind wir hier. Das sind Vorlagen. Gehen wir also zum Frontend und aktualisieren diesen Editor. Und jetzt aktualisieren wir diese Seite. In Ordnung. Also alles zusammenbrechen, hier sind wir, Royal addiert und Royal fügt Prämienlöhne hinzu. Das sind Premium-Produkte Wir können sie nicht haben. Aber zumindest wollte ich dir zeigen, dass wir hier sind. Wir haben hier so viele kostenlose Elemente, die wir verwenden können, und eines davon ist das Off-Canvas. Um Ihre Arbeit zu beschleunigen, geben Sie einfach Canvas-Inhalte ein. Hier sind wir. Ich ziehe es hier hin und lege es dort ab. Und da haben wir's. Und jetzt, was sagt das? Beliebter Artikel. Solange es noch ausgewählt ist, ist es hier das aktive Element. Wir können ihm direkt unter dem Titel der Inhaltsschaltfläche einen anderen Namen geben. Sagen wir, vorgestellte Artikel. Ich aktualisiere das und wir können es nach rechts ausrichten. Also genau hier unten haben wir eine Linie, richtig, und jetzt wird sie bis zu diesem Ende verschoben. Da haben wir's. So fügt man die Off-Canvas hinzu. Wenn wir jetzt darauf klicken, wird natürlich nur eine leere Seitenleiste angezeigt, und wir werden sie mit dem gewünschten Inhalt füllen mit dem gewünschten Inhalt Aber das werden wir in einer späteren Lektion tun , wenn wir Artikel zum Anzeigen haben Aber Sie können alles anzeigen, was Sie wollen, nicht nur Artikel. Im Moment wollten wir nur diese Schaltfläche anzeigen, damit wir eine vollständige Kopfzeile haben können. In der nächsten Lektion wollen wir die Kopfzeile gestalten. Wir sehen uns also in Kürze. 11. Style den Header: Jetzt ist es an der Zeit, den Header-Bereich zu gestalten , denn im Moment sieht jedes Element ein bisschen anders aus. Wenn wir also einen Container, einen Abschnitt oder eine Spalte hinzufügen, Standardabstände und -ränder mitgeliefert jedes Element werden standardmäßig Innenabstände und Ränder angewendet , und das können wir anpassen Zuallererst, wenn wir das Element nach Element-Kit auswählen, wie Sie hier unten sehen können, hat es einen riesigen Rand und hier oben. Wenn wir also zu „Erweitert“ wechseln, nachdem wir diese Option ausgewählt haben, lassen wir das und das unterbrechen. Und jetzt reduzieren wir den unteren Rand bis zu diesem Punkt und reduzieren wir auch den oberen Rand bis zu diesem Punkt. Sagen wir vielleicht 4040, also so. Nun, eine Sache mit Containern ist, dass Sie die Elemente, die sich darin befinden, ausrichten können Wenn wir also diesen Container und das Layout auswählen , können wir Inhalt begründen und dem Inhalt eine Richtung geben. Ich zeige dir, wo diese zutreffen. Aber schauen wir uns erstmal den Inhalt rechtfertigen an. Wie Sie hier sehen können, haben wir dieses Symbol einer längeren oberen Linie um anzuzeigen, dass das Element oben ausgerichtet oder oben ausgerichtet ist. Bei diesem dritten Symbol befindet sich die längste Linie unten, um anzuzeigen , dass sich die Elemente in diesem Container, dem ausgewählten Container, unten befinden. Wenn ich das auswähle, wird alles im Inneren nach unten gedrückt, und wir haben diesen , der die Mitte zeigt. Wenn wir also darauf klicken, wird alles auf die Mitte der vertikalen Achse ausgerichtet. Also das ist es, was wir wollten. Lassen Sie uns das Gleiche dafür tun, wählen Sie den Container aus, der dieses Canvas-Element enthält. Gehen wir zur Rechtfertigung und richten es in der Mitte aus. Machen wir dasselbe mit dem Logo, richten Sie es in der Mitte aus, aber Sie werden keine Änderung feststellen, da es 100% der Höhe und Breite Also los geht's. Wenn ich sage, aktualisieren und eine Vorschau der Änderungen anzeigen. Jetzt ist alles richtig ausgerichtet. wir nun zum Heldenbereich und anderen Abschnitten übergehen , werden wir Anpassungen an diesem Header-Bereich vornehmen , denn denken Sie daran, dass auf unserer Referenz-Website, wenn wir mit dem Scrollen beginnen, er verkleinern muss Zuallererst, wie Sie bemerkt haben, schrumpft es und sollte auch oben klebrig bleiben Wir werden also in späteren Lektionen sehen, wie das geht. Im Moment wollten wir nur sicherstellen, dass alles richtig ausgerichtet ist. Das ist also alles für den Moment. Aber bevor wir gehen, werden Sie feststellen, dass wir hier keinen so großen Abstand haben wie auf unserer aktuellen Website. Lassen Sie uns das also entfernen. Also möchte ich diesen Container auswählen , der alles enthält, und ich möchte zu Advanced wechseln und das Standard-Padding entfernen, und jetzt wird alles zusammengeklappt. Denn wie gesagt, auf jedes Element, das Sie hinzufügen eine bestimmte Standardpolsterung und ein Standardrand angewendet Lassen Sie uns das also aktualisieren. Und lassen Sie uns die Änderungen überprüfen. Da haben wir's. Das wollten wir also. So fügt man den Header hinzu. Lassen Sie uns in der nächsten Lektion weitermachen und mit der Arbeit am Heldenbereich beginnen. Wenn wir also nach Hause gehen, ist das hier der Heldenbereich. Mal sehen, wie man diesen Teil erstellt. Also werde ich dich in Kürze sehen. Geh nicht weit. 12. Die WP-Startseite festlegen: Es ist jetzt an der Zeit, an der Startseite zu arbeiten, und wir werden gleich hier mit diesem Heldenbereich beginnen. Es hat einige nette Muster im Hintergrund und dann etwas Kopfzeilentext und eine kurze Beschreibung. Jetzt, wo wir noch hier auf der Referenzwebsite sind, wir auf die Startseite weitergeleitet , wenn wir auf Action-Blog oder das Logo unserer Website klicken . Und das ist unsere Homepage-Domain, Ihre Website. Jedes Mal, wenn Nutzer Ihre Domain.com aufrufen, sollten sie zu der von Ihnen ausgewählten Homepage weitergeleitet werden Aber wenn wir jetzt zu unserer Website zurückkehren, haben wir keine eigene Homepage eingerichtet Es gibt eine Standard-Homepage, die von WordPress bei der Installation festgelegt wurde . Lass es mich dir zeigen. Wenn ich also zu unserem Editor zurückkehre und dieses Logo auswähle, können wir daraus einen Link machen. Also wähle ich eine benutzerdefinierte URL und wir können unsere Homepage-URL eingeben. Also wird es Wordpress evthing.com sein. Und in deinem Fall wird es eine website.com sein. Aktualisieren Sie das und lassen Sie uns eine Vorschau der Änderungen anzeigen. Wenn wir jetzt mit der Maus darüber fahren, stellen Sie fest, dass sich unsere Hand ändert , sodass angezeigt wird, dass Sie darauf klicken können Und wenn wir darauf klicken, werden wir zur Standard-Startseite von Hello World weitergeleitet, die von W Press bei der Installation generiert wurde Aber das wollen wir nicht. Wir arbeiten an einer anderen Homepage , die wir mit Elementor erstellen werden, also müssen wir sie einrichten Gehen wir zurück zu unserem Dashboard und gehen wir zu den Seiten Denken Sie daran, dass wir unsere eigene Homepage erstellt Dies ist die Homepage, die wir als eigentliche Startseite festlegen möchten , auf die dieser Domainname verweist. Also gehen wir zurück, um es einzustellen, gehen wir zu den Einstellungen und lesen: Lass uns das entfernen. Und wenn Sie Einstellungen lesen, zeigt Ihre Startseite eine statische Seite an, und wir können sie hier auswählen, Startseite. Verkauf ändert sich. Nun, wenn ich wieder reingehe und diese Seite aktualisiere, und dann lass uns eine Vorschau der Änderungen sehen. Wenn ich hier auf das Logo klicke, werde ich auf die Startseite weitergeleitet, die wir erstellt haben. Dies ist die vorherige Homepage, und wir verwenden sie nicht mehr. Jetzt, wo wir unser eigenes Homepage-Set haben, können wir es jetzt mit Elementor erstellen , und genau das werden wir in den nächsten Lektionen tun in den nächsten Lektionen Also werde ich dich in Kürze sehen. Geh nicht zu weit. 13. Grundlegende Astra Seiteneinstellungen: A, willkommen zurück. Nachdem wir unsere Startseite eingerichtet haben und unser Domainname jetzt auf die Seite verweist , die wir mit Elementor erstellen Es ist Zeit, es zu bearbeiten und es tatsächlich mit Elementor zu erstellen Aber bevor wir das tun, müssen wir ein paar Konfigurationen im Backend vornehmen und das werden Astra-Einstellungen sein , da das Thema Astra ist und einige Wpress-Einstellungen Um also zum Backend-Editor zu gelangen, können wir zur Bearbeitungsseite gehen Klicke darauf. Und jetzt sind wir hier. Oder während wir uns im Dashboard befinden, können wir zu den veröffentlichten Seiten gehen. Sie können auf Veröffentlichen klicken oder einfach auf Seiten klicken , um die veröffentlichten Seiten zu sehen Hier ist die Startseite, klicken Sie auf Bearbeiten. Und wir sind am selben Ort. Also lass mich einfach zurück klicken und jetzt haben wir es hier mit diesem zu tun. Bevor wir weitermachen, wechseln wir zu diesem Header-Editor. Jetzt sind wir vorerst mit dem Header fertig, also brauchen wir diesen Editor nicht, weil wir hier nicht die Startseite erstellen werden. Dies war nur der Editor nur für den Header. Also kann ich einfach das und das schließen. Also jetzt bleibt uns das übrig. Denken Sie also daran, wir haben Astra installiert, weil es unser Theme ist. Es hat ein paar Konfigurationen , die wir einstellen müssen. also hier reingehen, werden Sie sehen, dass wir dieses Symbol haben. Wenn ich das unter dem Container auswähle, müssen wir die volle Breite auswählen. Das bedeutet, dass unsere Website oder Webseite von Rand zu Rand verläuft, wie Sie auf dem Hintergrundmuster sehen können. Lass das zusammenbrechen. Lass uns zur Seitenleiste gehen. Wir wollen nicht , dass es Seitenleisten gibt , weil wir unsere eigene Seitenleiste bauen werden. Wir werden nicht die Standardeinstellung für Seitenleisten verwenden. Also keine Seitenleiste lässt das zusammenbrechen. Und mach dir hier keine Gedanken über diese Einstellungen. Der Container-Stil gilt nur, wenn das Layout entweder auf Normal oder Schmal, Schmal oder Normal eingestellt ist , wir aber die volle Breite ausgewählt haben. Damit müssen wir uns also nicht anlegen. Der gleiche Fall gilt für die Seitenleiste. Da wir keine Seitenleiste ausgewählt haben, müssen wir uns darüber keine Gedanken machen. Lass das zusammenbrechen. Dann müssen wir diese drei Elemente deaktivieren. Bevor wir sie deaktivieren, lassen Sie mich das einfach aktualisieren. Und lassen Sie uns die Seite mit der rechten Maustaste anzeigen und den Link in einem neuen Tab öffnen. Nachdem wir die Seite nun in voller Breite unter Container und voller Breite angezeigt haben , beachten Sie, dass der Starttitel jetzt an den Rand verschoben wurde. Eine weitere Sache, die Sie hier bemerken werden, ist, dass wir dieses ASTRAg wieder hier drin haben , dass wir dieses ASTRAg wieder hier drin Wir müssen all diese deaktivieren, weil wir unsere eigenen Header und all diese anderen Teile erstellen unsere eigenen Header und all diese anderen Also wenn ich dieses Update deaktiviere, gehe ich wieder rein und aktualisiere die Seite Jetzt ist der Fuß weg. Das ist der Header. Lass uns weitermachen und das deaktivieren. Aktualisiere das. Geh wieder rein, erfrischen Sie sich. Oh, warte. Das ist der Bannerbereich. Lassen Sie mich das Update deaktivieren. Aktualisiere das. Da haben wir's. Jetzt haben wir also eine leere Leinwand , auf der wir beim Erstellen unserer Seite arbeiten können. Gehen wir wieder rein und schauen, was wir noch einstellen müssen. Ich denke, wir haben alles abgedeckt, aber wir müssen hier noch eine weitere Einstellung festlegen, und das ist die Vorlage. Aber das ist eine WordPress-Einstellung, keine Astra-Einstellung, aber sie ist entscheidend. Also Vorlage, wir müssen das Element in voller Breite verwenden. Aktualisieren Sie, dass diese Option bei der Installation von Elementor verfügbar Wenn Sie Elementor nicht installiert haben, steht Ihnen diese Vorlagenoption nicht zur Verfügung. Da haben wir's. Gehen Sie jetzt wieder rein, drücken Sie R, um die Seite zu aktualisieren, und jetzt haben wir alle Grundkonfigurationen des Theme-Sets. Jetzt sind wir bereit, es mit Elementor zu erstellen, und wir werden dasselbe tun wenn wir an all diesen anderen Seiten arbeiten In der nächsten Lektion wollen wir uns ansehen, wie man diesen Heldenbereich erstellt Wir sehen uns in Kürze. 14. Startseite Heldenbereich: Jetzt ist es also an der Zeit, mit der Arbeit an der Heldenabteilung zu beginnen. Also zurück zu unserer Workstation. Lass mich das einfach schließen. Und während wir noch hier im Backend-Editor der Startseite sind, klicke ich auf Mit Elementor bearbeiten. Und hier sind wir Das ist der Herausgeber. Und natürlich können wir den Header jetzt nicht bearbeiten, weil dies nicht der Editor ist , mit dem wir den Header erstellt haben. Wir haben den Header separat erstellt. Also genau hier bauen wir die Seite. Also klicke ich darauf , um eine Flexbox hinzuzufügen und wir fahren mit dieser Strukturrichtung nach unten fort. Also wähle ich das aus, weil, wie Sie hier sehen können, alles nach unten geht. Wir haben ein Symbol, darunter haben wir die Kopfzeile und darunter haben wir das. Also wähle ich das aus. Jetzt hier drinnen klicke ich auf das Pluszeichen. Dann gebe ich Symbol ein, ziehe dieses Symbolelement hierher, und wenn wir es ablegen, ist es immer noch das aktive Element hier. Wir können es ändern. Ich wollte lesen tippen. Vielleicht können Sie so etwas auswählen, aber ich möchte, dass Text Artikel repräsentiert. Also wähle ich das aus. Einfügen und los geht's. Als Nächstes wählen wir eine Überschrift aus. Um also Elemente zurückzuholen, denken Sie daran, wir sagen, dass Sie diese auswählen können, und jetzt klicke ich auf eine Überschrift. Ich gehe auch noch einmal zurück und wähle einen Texteditor, auch bekannt als Absatz. Da haben wir's. Zuallererst wähle ich das, gehe zum Stil, Allige zum Mittelpunkt Wählen Sie dies aus, gehen Sie zu Stil A und richten Sie es an der Mitte aus Kehren wir nun zu diesem Inhalt zurück und möchten ihn in einen H-Wert ändern, da jede Seite ein H-One-Element haben muss. Ein H-Eins-Element ist gut für SEO, weil ein H-Eins-Element auf jeder einzelnen Seite den Suchmaschinen mitteilt , worum es auf dieser Seite geht. Es ist wie eine Zusammenfassung der gesamten Seite. Worum geht es auf dieser Seite? Wenn Sie also mehrere Webseiten haben, jede Seite ihre eigene H-one-Überschrift hat, in der angegeben ist, worum es auf jeder Seite geht, können die Suchmaschinen eine klare Vorstellung davon haben, worum es auf Ihrer Website geht, und Ihre Website in den Suchergebnissen empfehlen. Mit anderen Worten, ein H auf jeder Seite zu haben, ist gut für die Suchmaschinenoptimierung Ihrer Website. Solange das ausgewählt ist, gehe ich hierher und wähle diese Kopie aus. Gehe in dieses Feld und füge es hier ein. Ich werde es hier nicht einfügen, denn wenn ich es hier einfüge, wird es mit allen Vorformungen geliefert, die es hatte Wenn ich es also hier einfüge, wie Sie sehen können, hat es seine Vorformung und das mache ich Es ist also immer eine gute Idee , deine Sachen hier einzufügen. Aber wenn du es bearbeiten möchtest, kannst du es anklicken und es in das Element selbst eingeben. Gehen Sie also zurück zum Stil und richten Sie ihn in der Mitte aus. Ich möchte diesen Text auswählen. Karpfen. Wählen Sie den Inhalt dieses Textelements Wählen Sie all diese Löschvorgänge aus. Dann Control Shift V, nicht Control V. Control Shift V, wir fügen es ohne jegliche Vorformität Gehen wir nun zurück zu diesem Thema und gehen wir zur Textfarbe über. Denken Sie daran, dass wir diesen Ordner hatten. Ich habe dir gesagt, dass du unten diesen Videoplayer auf der Registerkarte Projekte und Ressourcen findest . Ich werde es öffnen. Und dort finden Sie diese Farbcodes, die ich für die ursprüngliche Website verwendet habe. Ich nehme dieses marineblaue Exemplar. Und denken Sie daran, dass ich das für diese Farbe ausgewählt habe zu Stil, Überschrift und Textfarbe gegangen bin. Ich füge das hier ein und jetzt ist es diese Farbe. Jetzt möchte ich auch diese Typografie-Schrift in Mont Monat ändern diese Typografie-Schrift , aber ich möchte die Stärke auf 900 erhöhen, was schwarz ist, und ich möchte auch die Größe erhöhen, bis sie vielleicht irgendwo da Aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Und da haben wir's. Aber jetzt müssen wir hier oben natürlich etwas Luft zum Atmen schaffen. Lassen Sie mich also den Behälter auswählen , der alles enthält. Und jetzt wollen wir zu Fortgeschritten übergehen und es oben und unten etwas aufpolstern Denken Sie daran, dass es eine Standardpolsterung hat. Wenn ich das kaputt mache, wird die Polsterung an den Seiten und oben entfernt Aber was wir tun wollen, ist nach oben zu gehen und 50 oder sagen wir 100 zu sagen Und für die Unterseite kein Problem. können wir einfach lassen. Lassen Sie mich sogar bis zu acht sagen. Während dies noch ausgewählt ist, möchte ich, dass wir dieses Hintergrundmuster hinzufügen. Solange es ausgewählt ist, gehe ich zum Stil des Hintergrundtyps über. Ich wähle diesen Klassiker aus. Es werden weitere Einstellungen angezeigt. Und hier können wir ein Bild hinzufügen. Also werde ich Dateien hochladen und Dateien hier auswählen. Ich habe vergessen, das hier reinzustellen. Also lass mich einfach zu Assets gehen, FreeP Wo habe ich das hingestellt Also hier sind wir. Ich habe es gefunden. Geh zurück zu Vermögen, Endgültiges Vermögen, füge es dort ein und jetzt ist es der Hintergrund der Helden-Sektion. Also doppelklicke ich darauf, wähle es aus und jetzt wird es angezeigt. Lassen Sie mich das jetzt schließen. Wir wollen zur Position gehen. Ich möchte, dass es so in der Mitte ist. Ich möchte gehen, um es zu wiederholen, keine Wiederholung zu sagen. Und was die Displaygröße angeht, versuchen wir es mit Cover. Das Cover sieht gut aus. Was ist mit Contain? Nein, es sollte Tarnung sein. Aktualisiere das. Und lassen Sie mich die Polsterung an der Unterseite nur geringfügig erhöhen an der Unterseite nur geringfügig Nehmen wir an, 50 davon, aktualisieren Sie die Änderungen und schauen Sie sich eine Vorschau an. Da haben wir's. Also ist unsere Heldenabteilung jetzt fertig. Es sieht toll aus. gefällt es mir besser als die Referenz-Website. Ja, es sieht toll aus. So fügt man den Heldenbereich hinzu. In der nächsten Lektion beginnen wir nun mit der Arbeit an dieser Seitenleiste, der Autoren-Seitenleiste Wir sehen uns in Kürze. 15. Startseite Sidebar - Über mich: Jetzt ist es an der Zeit, diese Seitenleiste zu erstellen. Also zurück zu unserem Editor, hier sind wir. Gehen wir wieder rein. Jetzt werden Sie feststellen, dass wir zwei Container haben , die diese beiden Inhaltssätze enthalten. Der erste Container ist also dieser und das ist der andere Container. Es ist also ein doppelspaltiger Container. Lass mich dir zeigen, wie du hier reingehst, lass uns Flexbox auswählen. Diese Struktur wie diese. Nun, diese Seite kann vielleicht, sagen wir, 40% ausmachen. Stellen Sie sicher, dass dies in Prozent angegeben ist, nicht in diesen anderen Einheiten, 40%, und das sollte 60% ausmachen, um 100% zu erhalten. Einfach so. Also jetzt, hier drin, können wir weitermachen und einen Container hinzufügen. Das ist also ein Container in einem anderen Container, aber dieser Container ist leer. Hier werden wir dieses Post-Grid platzieren. also wieder reingehen, können wir dem Container zunächst eine Hintergrundspalte in dieser Farbe geben. Und diese Farbe ist hier, Hintergrundkopie der Seitenleiste, weil das die Seitenleiste ist. Solange das noch ausgewählt ist, wechselt der innere Container zu Stil, Hintergrundfarbe. Lassen Sie uns das da drin haben, und jetzt hat es die Farbe geändert. Lassen Sie uns auch den Rand der Seitenleiste auswählen. Kopieren Sie das, denn wie Sie sehen können, hat es eine Randfarbe. Wenn ich hier wieder reingehe, gehe ich zu den Standardrahmentypen für den Rahmen, einfarbig, und jetzt wird die Rahmenfarbe angezeigt Also werde ich das dort einfügen. Wenn wir die Änderungen aktualisieren und überprüfen, ist der Rand natürlich zu dick. Lassen Sie uns also weitermachen und sagen, wir müssten eins sein. Aktualisiere das und lass uns eine Vorschau der Änderungen anzeigen, einfach so. Aber du kannst es so dick machen, wie du willst. Eine andere Sache ist, dass es diese scharfen Ecken hat. Wir wollen sie glatt machen, genau wie hier. Gehen wir also zurück zu unserem Editor, Border Radius, und geben wir ihm 20. Aktualisieren Sie das und lassen Sie uns eine Vorschau der Änderungen anzeigen. Da haben wir's. Nun, wenn wir hier einfach eine Überschrift hinzufügen. Lass es mich da reinwerfen. Lassen Sie uns auch einige Texte hinzufügen. Lass mich einfach diesen Text holen. Kopieren. Wählen Sie die Texte aus, klicken Sie mit der rechten Maustaste auf Einfügen, aktualisiert. eine Vorschau der Änderungen an. Es hat diese abgerundete Ecke. Aber als Nächstes wollen wir die Referenzwebsite gehen. Lassen Sie mich zunächst diesen Text kopieren. Wähle das aus. Lösche das, dann Strg Shift V, füge es dort ein. Aber jetzt zum Stil, ich möchte, dass er nach links ausgerichtet ist. Lassen Sie uns auch hier noch einmal über mich sprechen. Lass mich das kopieren. Wähle das dann hier bei mir aus. Was haben wir sonst noch? Wir haben dieses Bild des Autors sowie seinen Namen und Titel. Im Folgenden möchten wir also einen Container hinzufügen. Also werde ich hier einen Container abstellen. Und denken Sie daran, eine Sache Containern ist, dass sie andere Behälter enthalten können, ist in diesem, was darin ist. Also hier drin können wir zwei weitere Container haben. Eins für das Bild und noch eins für den Text, den Namen. Okay. Ich lasse es direkt darunter fallen. Jetzt haben wir also diese beiden Behälter darin. Wenn ich nun den äußeren Behälter auswähle , der diese beiden neuen enthält, diesen Container, und wir gehen zur Layoutrichtung über. Denken Sie daran, dass ich erwähnt habe , dass wir darüber sprechen werden. Wir haben bereits gesehen , was Justice tut. Richtung bedeutet, dass Sie von oben nach unten von links nach rechts, links nach rechts oder horizontal wechseln können . Das heißt, jetzt sind sie Seite an Seite. Wir können sie auch auf Vertikal umstellen. Das ist abwärts. Was wir wollen, ist Seite an Seite. Einfach so. Jetzt können wir das hier hineinziehen, um es kleiner zu machen, wir können ein Bild einfügen, einfach so. hier zunächst diesen Text auswählen, Lassen Sie mich hier zunächst diesen Text auswählen, um ihn zu gestalten. Lassen Sie mich diese marineblaue Farbe wählen. Kopieren Sie diesen Stil, und färben Sie ihn ein. Dann möchte ich auch zur Typografie gehen und sagen, mit 900, aber es muss Montserrat sein Einfach so. Aber jetzt machen wir es vielleicht in dieser Größe. Lass uns sehen. Ja, es ist nicht so groß. Vielleicht Größe 20. Jetzt werden Sie feststellen, dass alles zu nah am Rand ist . Aktualisiere das. eine Vorschau der Änderungen an. Alles ist zu nah am Rand. Was wir tun wollen, ist diesen Container auszuwählen , der sie enthält, jetzt die Seitenleiste, erweiterte Polsterung Lassen Sie uns diesen Link nicht unterbrechen. Also, was auch immer wir in eine Zelle eingeben, wird auf den Rest angewendet, und wir geben ihr einen Abstand von 3030 Aktualisiere das. muss das belegen. Gehen wir zum äußersten Container, in dem sich der Container an der Seitenleiste befindet, und machen wir ihn zu 30% Das heißt, sie sollten bei 70% liegen. Aktualisiere das. Und jetzt sieht es eher aus wie eine Seitenleiste, einfach so. Lassen Sie uns jetzt weitermachen und hier ein Bild hinzufügen. Auswahl des Bildelements. Ich wähle das aus und gehe zu AplodFiles. Wählen Sie Bilder aus. Jetzt muss ich zu So habe ich mein Bild gefunden gehen. Da haben wir's. Wählen Sie aus, und das ist jetzt mein Bild. Lass mich das einfach duplizieren. Nun, Sie werden gleich hier feststellen, ich nicht die Bearbeitungsmöglichkeiten habe , die ich in der Workspace-Tour erwähnt habe. Ich möchte sie aktivieren. Gehen Sie hier rein, Benutzereinstellungen, aktivieren Sie die Bearbeitungsgriffe. Wählen Sie das aus. Jetzt kann ich das duplizieren, es per Drag-and-Drop hineinziehen und das wird mein Name. Kopiere das. Fügen Sie das da ein, dann Produktivitätsexperte. Das ist dein Titel. Ich möchte das duplizieren und dort einfügen, aber ich möchte es sehr klein machen, also Typografie Jetzt werden Sie feststellen, dass der Abstand zwischen diesen beiden zu groß ist Wenn ich das auswähle und dann zu den Lücken und dem Layout übergehe, diesen Standardabstand von 20 entfernen. Dieser Container , der die beiden Layoutlücken darunter enthält, rechtfertigt können wir diesen Standardabstand von 20 entfernen. Dieser Container, der die beiden Layoutlücken darunter enthält, rechtfertigt. Also lass uns vielleicht fünf oder vielleicht Null draus machen. Also haben wir nicht all diese Lücken. Das ist zwar ausgewählt, ich möchte es auch kleiner machen. Also einfach so, wähle das aus. Wählen Sie nun den Container aus, der sie enthält, diesen Container, und wir wollen alles in der Mitte vertikal so ausrichten. Also wähle das aus. Gehen wir zu weit und reduzieren wir den unteren Rand. Also bringen wir sie näher zusammen. Aktualisiere das. Ich möchte den Behälter auswählen , in dem sie sich befinden. Ich möchte zu „ Erweitert“ wechseln und diese Polsterung entfernen , um das Bild näher an diese unsichtbare Linie zu bringen das Bild näher an diese unsichtbare Linie zu Lassen Sie mich jetzt diesen Container „Erweitert“ auswählen. Gehen wir zum linken Rand. Lassen Sie uns es bis zu diesem Punkt reduzieren. Aktualisieren Sie das. Lassen Sie uns die Änderungen überprüfen. Da haben wir's. Ich glaube, wir haben die Seitenleiste erstellt, aber lassen Sie uns diese Schrift machen. Lassen Sie uns die Schrift leicht bearbeiten. Also gehe ich wieder rein, wähle diese Schrift aus, gehe zu Stil, Typografie und ändere das in Montserrat Lassen Sie mich das auch auswählen. Ändere es auf Montserrat. Treten Sie ein. Aber jetzt werden Sie auf der Referenz-Website feststellen, dass es dunkler und marineblau ist. Lassen Sie mich also dieses marineblaue Exemplar auswählen. Geh wieder rein. Solange das ausgewählt ist, gehe ich zur Textfarbe und füge es ein, aber ich möchte hier reingehen und es auf 600 setzen, halbfett. Aktualisiere das. Ich mache das Gleiche dafür, wähle das aus. Jetzt kann ich die gleichen Schritte wiederholen oder diesen Text mit der rechten Maustaste auf Kopieren auswählen . Wählen Sie den Stil aus und klicken Sie mit der rechten Maustaste auf Einfügen. Im Grunde genommen ist das so , um die Seitenleiste zu erstellen. In der nächsten Lektion sehen wir uns an, wie Sie die letzten Beiträge erstellen. Seitenleiste. Weil wir diese aktuellen Artikel hinzufügen müssen und es ein paar technische Dinge gibt, die wir uns ansehen müssen Also werde ich dich in Kürze sehen. 16. Startseite Sidebar – Letzte Beiträge: Jetzt ist es an der Zeit, an der Seitenleiste für aktuelle Artikel zu arbeiten. Als ich wieder rein kam, habe ich vergessen, diesen Text auszuwählen und zum erweiterten Rand zu wechseln, den unteren Rand so zu entfernen oder zu verkleinern Nur damit wir hier diesen kleineren Raum haben. Lassen Sie uns es bis zu diesem Punkt leicht erhöhen und das aktualisieren. eine Vorschau der Änderungen an. Jetzt ist es ein gleichmäßiger Abstand im Vergleich zum oberen Teil. Da haben wir's. Was ich tun muss, ist das direkt unten zu duplizieren, einfach so, weil wir das erstellen wollen. Ich wähle diese aktuellen Artikel aus und kopiere sie. Wählen Sie das hier aus, fügen Sie das ein und ich entferne das. Jetzt sind wir damit beschäftigt. Lass mich das auch einfach entfernen. Aktualisiere das. Und jetzt denken Sie daran, dass wir über die elementaren Add-Ons gesprochen haben. Denken Sie daran, wir haben das Elements-Kit hinzugefügt. Wir werden ein Elements-Kit-Element verwenden , um diese neuesten Beiträge hinzuzufügen. Also gehe ich wieder rein und suche nach einer Liste. Ich gebe einfach Liste ein und dann sind wir hier. Liste posten. Also ziehe ich das per Drag & Drop direkt unter die letzten Artikel. Lassen Sie mich es unter die letzten Artikel stellen. In Ordnung, lass es mich einfach oben stehen lassen. Es ist ein bisschen schwierig, es da reinzuwerfen. Dann ziehe ich das und lege es einfach so darüber. Jetzt, wo dies ausgewählt ist, gehe ich zur Auswahl von Beiträgen über. Beitrag der Kategorie. Und jetzt können wir die verschiedenen Kategorien von Beiträgen auswählen , die wir hier anzeigen möchten. Jetzt haben wir noch keine Beiträge, noch keine Artikel. Also werden wir das so lassen , weil wir das im nächsten Abschnitt tun werden. Aber im Moment haben wir es zumindest hinzugefügt, wir werden in Kürze etwas dagegen tun. Im Grunde haben wir jetzt den Platz für den letzten Beitrag in der Seitenleiste vorbereitet . Lassen Sie uns in der nächsten Lektion weitermachen und unseren ersten Blogbeitrag, auch bekannt als Artikel, verfassen. Wir sehen uns in Kürze. 17. Einen Beitrag erstellen: Jetzt ist es an der Zeit, unseren ersten Beitrag zu erstellen. Und wenn wir zurück zu unserer Referenzwebsite wechseln, ist dies natürlich zu unserer Referenzwebsite wechseln, ein einziger Beitrag. Dies ist ein weiterer Beitrag, und dies ist ein weiterer Beitrag. Also lass mich sehen. Lass mich das öffnen. Wenn wir das öffnen, um es zu lesen, los geht's. Also so sieht es aus. Es hat dieses vorgestellte Bild. Dann haben wir hier Seitenleisten , die wir uns von der anderen Seite geliehen haben Wir werden das loswerden. Wir haben den Titel. Wir haben das Datum, an dem es veröffentlicht wurde, und die Kategorie, in die es fällt. Dann haben wir seinen Inhalt. Unten haben wir den Namen des Autors und unser Essen. Schauen wir uns also an, wie man diesen einzelnen Beitrag erstellt. Das nennen wir also ein vorgestelltes Bild, und wir werden gleich sehen, wie man es einstellt. Gehen wir also wieder rein, gehen wir zurück zu unserem Dashboard. Und genauso wie wir unsere Seiten erstellen konnten, können wir dasselbe auch für unseren Beitrag tun. Aber bevor wir einen Beitrag erstellen, schauen wir uns alle Beiträge an, die wir haben, indem wir darauf klicken. Wir haben den Hello World-Beitrag. Also lass mich das einfach wegwerfen. Wir brauchen es nicht. Sagen wir jetzt, füge neue hinzu. So wie wir eine Seite erstellt haben, können wir einen Beitrag erstellen. Also gebe ich ihm den Vornamen. Lassen Sie mich diesen Namen leihen, die Macht der Priorisierung. Da haben wir's Wir müssen die Standardvorlage auf Element oder volle Breite setzen. Dann müssen wir auch in die Astra-Einstellungen gehen, um volle Seitenleiste und keine Seitenleiste einzustellen. Und für die Elemente hier müssen wir sie alle deaktivieren. Veröffentlichen Sie das und los geht's. Jetzt ist es also veröffentlicht. Aber bevor wir diesen Bereich verlassen, müssen wir zu den W-Taste-Einstellungen zurückkehren und ein ausgewähltes Bild festlegen. Denken Sie daran, dass dies unser Beitragsbild ist Wenn wir es nicht festlegen, wird für Ihre Beiträge kein Bild auf der Seite angezeigt. Dieses Bild wird nicht angezeigt. Stellen Sie also das ausgewählte Bild ein. Lass mich sehen, welches Bild ich verwenden soll. Wach auf. Also gehe ich hier zu unserem Ordner. Wach auf und sage „ Beitragsbild einstellen“. Da haben wir's. Nun zurück zu unserer Referenz-Website. Dieser Text hier ist das, was wir einen Auszug nennen Wenn Sie Autor sind oder geschrieben haben, wissen Sie, was ein Auszug ist, und wir müssen ihn zur Verfügung stellen, wenn wir wollen, dass er genau hier an dieser Stelle angezeigt wird Lassen Sie mich das sogar einfach kopieren. Geh wieder rein, direkt unter dem vorgestellten Bild. Lass uns weitermachen und unseren Auszug einfügen. Aktualisiere das. Da haben wir's. So erstellen Sie einen Beitrag oder Artikel auf We Press und fügen ein ausgewähltes Bild zusammen mit einem Auszug In der nächsten Lektion sehen wir uns an, wie das auf der Startseite angezeigt wird. Wir sehen uns also in Kürze. 18. Den Beitrag anzeigen – Teil 1: Jetzt ist es also an der Zeit, unseren Blogbeitrag auf der Startseite anzuzeigen . Und wenn wir hier wechseln, wollen wir es natürlich so anzeigen. Also werden wir das mit einem anderen großartigen Elementor-bezogenen Plugin namens Premium Ads for Elementor Lassen Sie uns also zurück zu unserer Arbeitspresse wechseln. Geh zurück zum Armaturenbrett. Gehen wir nach Hause. Gehen wir zu den Plugins und fügen sie neue hinzu. Und hier werde ich nach Elementor suchen. Hier gehen wir. Also wollen wir Premium-Add-Ons für Elementor hinzufügen Also jetzt installieren, jetzt aktivieren, es ist aktiviert. Gehen wir also zurück zum Frontend Wenn ich dieses Gewicht aktualisiere, lassen Sie uns das aktualisieren, bevor wir es aktualisieren. Und jetzt aktualisieren wir die Seite. Und jetzt, wenn ich diese Paneele zusammenbreche, sind wir hier. Wir haben Premium-Add-Ons. Und was wir wollen, gebe ich einfach Blog ein. Und was wir wollen, ist dieser Blog von PA Premium Addons. Also ziehe ich das per Drag & Drop in diesen Bereich. Und jetzt haben wir natürlich nur noch einen einzigen Blogbeitrag in unserer Beitragsliste. Genau das, und deshalb wird nur das angezeigt. Aber je mehr wir mehr Blogbeiträge hinzufügen, desto mehr müssen wir hier anzeigen, und am Ende werden wir so etwas haben. Im Moment wollen wir es also so gestalten , dass neue Blogbeiträge automatisch dasselbe Design haben, wenn wir sie hinzufügen . also wieder reingehen, wollen wir als Erstes die Ausrichtung ändern , denn wie Sie sehen können, sollte sich der Text auf dieser Seite befinden, wie auf unserer Referenz-Website. Solange das noch ausgewählt ist, gehe ich zur klassischen ändere dann den Skin auf eine Seite. Okay. So wie das. Und natürlich wollen wir ihm eine Spalte geben , sodass es nur eine Spalte von links nach rechts ist. Aktualisiere das. Lass uns wieder hierher wechseln. Wie Sie sehen können, ist der Hintergrund weiß wie der Hintergrund unserer Website. Lassen Sie uns also diese graue Farbe entfernen. Lassen Sie mich das zusammenfassen. Lass uns zum Stil übergehen. Gehen wir zum Inhaltsfeld, zur Textfarbe. Zuallererst sollte die Textfarbe natürlich marineblau sein. Lass mich das einfach kopieren. Testen Sie die Farbe des Inhaltsfeldes, fügen Sie das ein und jetzt ist es genau dieses Marineblau. Wir sollten auch zur Typografie gehen und einfach so 600 draus machen Als Nächstes wollen wir den grauen Hintergrund loswerden grauen Hintergrund loswerden Während wir uns in der Inhaltsbox befinden, wechseln wir hier zur Hintergrundfarbe, machen sie weiß, und jetzt ist sie weiß. Aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Da haben wir's. Als Nächstes wollen wir diesen Text natürlich in Marineblau ändern. Also gehe ich zurück und kopiere das. Geh hier rein. Solange das ausgewählt ist, gehe ich zum Titel. Farbe Lassen Sie uns das Marineblau machen, wenn Sie mit der Maus darüber fahren, wir wollen, dass es diese rosa-rötliche Kopiert das. Bei Hover wollen wir, dass es diese rosa-rötliche Und es versteht sich von selbst, dass die Schrift Monerat sein muss Mont Center. Geben wir ihm etwas Dicke, 900. Wir wollen, dass es schwarz ist, und wir können es nur geringfügig vergrößern. Vielleicht ist das zu groß. Vielleicht diese Größe. Ja, ungefähr diese Größe. Und lassen Sie uns die vertikale Höhe oder den Zeilenabstand bis zu diesem Punkt reduzieren , das aktualisieren. Erhöhen Sie außerdem den Abstand am unteren Rand des Titels, genau hier, leicht, um ihn von den Metadaten abzuheben. In den Metadaten ist dies der Benutzername. Das wäre also dein Name, und ich zeige dir, wie du das ändern kannst. Dies ist das Datum, an dem der Beitrag veröffentlicht wurde und ob es Kommentare gibt. Lassen Sie uns also zunächst aktualisieren, dass ich in die Beiträge gehen möchte, um Ihnen zu zeigen, wo Sie diesen Namen ändern können. Gehen wir zu den Einstellungen. Nein, gehen wir tatsächlich zu Benutzern O Benutzern. Und das ist natürlich dein Benutzername. Dies ist derselbe Benutzername, den Sie bei der Installation von Wordpress in Spectaculars erhalten haben Installation von Wordpress in Spectaculars Wir können also „Bearbeiten“ sagen. Und wenn wir nach unten scrollen, haben wir hier den Vornamen. Sie können Ihren Vornamen und Nachnamen angeben, und hier ist der Name Spitzname. Sie können Ihren tatsächlichen Namen angeben. Und Bessa Also kannst du den Anzeigenamen öffentlich sagen so wie du willst, dass die Leute ihn sehen, und dein Profil aktualisieren Gehen wir wieder rein. Wenn ich die Steuerung R aktualisieren muss, los geht's. Jetzt steht der Name, den ich im Backend angegeben habe. das Bild noch einmal bearbeiten, solange dies noch ausgewählt Lassen Sie uns das Bild noch einmal bearbeiten, solange dies noch ausgewählt ist. Wenn wir also zurück zum Inhalt, allgemein und zum Hauptbild zurückkehren, können wir die Breite vergrößern , bis wir wollen. Vielleicht ist 35 gut für mich. Ich werde mich nicht mit der Höhe anlegen. In Ordnung. Also jetzt denke ich, dass das, was wir haben, gut genug ist. Wie Sie auf unserer Referenz-Website sehen können, haben wir natürlich auch diesen Artikel. erfahren Sie, wie Sie diese Schaltfläche hinzufügen können, wenn In der nächsten Lektion erfahren Sie, wie Sie diese Schaltfläche hinzufügen können, wenn wir weitere Anpassungen an der Darstellung unseres Beitrags vornehmen. Wir müssen also auch ein paar Änderungen daran vornehmen. Schauen wir uns also in der nächsten Lektion an, wie das geht. Wir sehen uns in Kürze. 19. Füge Elementor-Post-Inhalte hinzu: Bevor wir also mit der Gestaltung dieses Beitrags fortfahren, wollen wir den Inhalt des Beitrags im Frontend mit Elementor erstellen Inhalt des Beitrags im Frontend mit Elementor Geh wieder rein, wir wollen das jetzt bauen. Gehen wir also zurück zu unserem Editor in unserem Dashboard und gehen wir zu den Beiträgen. Und jetzt sind wir hier. Wir können zur Bearbeitung gehen, aber ich möchte mit der rechten Maustaste klicken und den Link in einem neuen Tab öffnen. Also lassen wir das Dashboard intakt und sagen wir jetzt, wir bearbeiten es mit Elementor. Und hier sind wir Also, ich mache weiter und klicke auf dieses Pluszeichen, dann auf Flexbox, und wir wollen einen doppelspaltigen Abschnitt oder einen zweispaltigen Container. Also werde ich darauf klicken. Und der Grund dafür ist, dass wir auch diese Seitenleiste und den Hauptartikel haben . Das sollten also 30% sein. Und sie sollten 70% sein. Aktualisiere das. Ordnung. Lassen Sie uns jetzt natürlich zunächst unser Bild hinzufügen. Lassen Sie uns dort ein Bild einfügen, und ich mache weiter und wähle dasselbe Bild aus, das wir als Beitragsbild verwendet haben. Und natürlich hat es scharfe Ecken. Lass uns weitermachen und den Stil wählen. Was den Grenzradius angeht, geben wir ihm 2020 an. Aktualisiere das. Ordnung. Da haben wir's. Lassen Sie mich diesen Titel einfach noch einmal darunter kopieren, während er sich noch in diesem Container befindet, der das Bild enthält. Wir wollen darauf klicken und die Titelüberschrift auswählen. Lege es in denselben Behälter. Doppelklicken Sie dort auf Einfügen. Natürlich möchte ich es zu einem H-One-Stil machen. Stellen Sie das in die Mitte. Lassen Sie uns diese Farbe natürlich gleich hier auswählen, Marineblau. Kopieren, Typografie einfügen. Lass es uns Mont machen. Treten Sie ein. Machen wir es auch einfach so auf 900 und reduzieren wir die Zeilenhöhe auf einen Wert. Aktualisiere das. Lass uns scrollen. Mir gefällt es. Lassen Sie uns als Nächstes den ersten Absatz erstellen. Also klicke ich darauf, füge einen Absatz hinzu, lege ihn in denselben Container und drücke hier die Umschalttaste V, um ihn ohne jegliche Formatierung einzufügen. Aktualisiere das. Nun, Sie werden hier feststellen, wir diese Produktivitätskategorie haben, und wir werden später über Kategorien sprechen, und wir haben auch das Datum. Kommen wir also zu unserem Editor und suchen wir nach Metadaten. Thema posten. Also werfe ich das einfach da rein. Und wie du siehst, sieht es schon so aus. Standardmäßig heißt es in unserem Beitrag, dass er in der Kategorie Nicht kategorisiert ist. Das liegt daran, dass wir keine Kategorien erstellt und keinen Beitrag in einer bestimmten Kategorie platziert haben . Wir haben nur einen Beitrag. Wir werden sehen, wie wir das ändern können. Aktualisiere das. Und wir können das Leerzeichen , solange es noch „Erweitert“ ausgewählt ist, das unterbrechen und den oberen und unteren Rand vergrößern. Eigentlich sollten wir ihn einfach auf 20 und oben erhöhen . Sehen wir uns die Änderungen an. Da haben wir's. Fügen wir diese Überschrift hinzu. Kopiere das hier rein. Lassen Sie mich das sogar duplizieren, das so duplizieren. Lass es direkt unter dem Absatz fallen. Natürlich wähle ich das aus. Machen wir es zunächst zu H zwei, weil wir versuchen, eine Hierarchie aufzubauen, und das ist es, was Suchmaschinen nach einer Hierarchie auf einer Webseite suchen , beginnend mit H, um die Seite zusammenzufassen, und dann für Haupttitel verwenden wir H zwei Für kleinere Titel verwenden wir H drei und so weiter und so weiter. Das ist zwar ausgewählt, aber das ist jetzt ein H-Two-Stil. Stellen wir es auf die linke Seite. Und da ich es kopiert habe, lass es mich so dort einfügen. Jetzt brauchen wir ein Bild. Also gilt der gleiche Fall dafür. Ich dupliziere das einfach und ziehe es. Lass es direkt unter dem Text fallen. Solange es ausgewählt ist, gehe ich hier rein und wähle ein Bild von hier aus. Sagen wir vielleicht dieses Bild. Doppelklicken Sie darauf. Wählen Sie aus und los geht's. Lassen Sie mich diesen Text einfach duplizieren. Wir gehen also davon aus, dass es sich um eine Geschichte handelt, die aus Bildern besteht. Das ist also das Hauptbild, und dann haben wir einen Titel, dann Punkt Nummer eins, ein Bild, um diesen Punkt zusammenzufassen Dann haben wir diese Texte. Wir können diese Texte auswählen, zu „Erweitert“ wechseln, den Bereich unterbrechen und dann den oberen Rand aktualisieren. Sehen wir uns die Änderungen an. Scrollen Sie nach unten und los geht's. Jetzt denke ich natürlich, dass wir hier zu wenig Platz haben Also wähle ich das Fortgeschrittene. Wählen Sie das aus, vergrößern Sie den oberen Rand. Einfach so. Nun, die restlichen Abschnitte zu erstellen , ist dieselbe Geschichte. Und jetzt können Sie den gleichen Vorgang wiederholen, um die restlichen Abschnitte bis zur Nummer drei zu erstellen , um die restlichen Abschnitte bis zur Nummer drei . Aber vielleicht muss Ihr Artikel nicht all diese Bilder haben. Vielleicht möchtest du, dass es Prosa ist, ohne den Text zu unterbrechen. So können wir dieses Bild entfernen. Und wähle diesen Text aus, reduziere den oberen Rand bis vielleicht dort. Jetzt können wir diesen Platz gleich darunter duplizieren. Dupliziere das, platziere es direkt darunter. Ändere das auf Nummer zwei. Kopieren Sie das, wählen Sie das aus, fügen Sie ein, dass Nummer zwei vielleicht sehr lang ist, also aktualisieren Sie das, überprüfen Sie die Änderungen und scrollen Sie nach unten Da haben wir's. Also werde ich einfach diesen Text auswählen und weitere Absätze hinzufügen. Eigentlich sollte ich es hier hinzufügen, nicht direkt dort. Füge es dort ein. Wenn du etwas tippst, kannst du es direkt dort eingeben, aber wenn es das Einfügen mit Strg Shift V ist, wiederhole ich dasselbe und dasselbe Jetzt können wir das duplizieren und es darunter platzieren Nennen wir es Fazit. Kopieren Sie das, solange es ausgewählt ist, und fügen Sie es dort ein. Dann lass uns das kopieren. Dupliziere das und platziere es dort. Wähle alles Gelöschte aus, Strg Shift v. Aktualisiere das. Dieser Spielraum ist zu groß. Schauen wir uns das mal an. Da haben wir's. Ich mag den Blogbeitrag. Er sieht schon gut aus. Aber jetzt platzieren wir es oben. Wie Sie hier sehen können, haben wir hier einige schöne Abstände. Wählen Sie den Behälter aus , der alles enthält. Fortgeschritten, mach das kaputt. Geben wir vielleicht 50. Aktualisieren Sie die Änderungen und sehen Sie sich eine Vorschau an. So wie das. Jetzt müssen wir hier natürlich die Seitenleiste hinzufügen wie wir es auf der Referenz-Website getan haben. Und das ist natürlich eine Liste aktueller Artikel, und wir haben sie nicht erstellt. Also werden wir das etwas später erstellen. Ein paar Lektionen von jetzt an. Aber in der nächsten Lektion fahren wir fort und setzen das Styling fort. Lass mich nach Hause gehen , das ist mein Zuhause. Lassen Sie uns weitermachen und das Gestalten fortsetzen, nachdem wir diese Seite erstellt haben. Wir sehen uns also in Kürze. 20. Den Beitrag Teil 2 anzeigen: Gehen wir jetzt zurück zu unserer Workstation. Ich denke, das ist der richtige Ort. Wenn wir wieder reingehen, jetzt, wo wir damit vorerst fertig sind, kommen jetzt, wo wir damit vorerst fertig sind, wir zurück, um die Seitenleiste hinzuzufügen. Also lass mich das schließen und jetzt sind wir hier. Dies ist der Ort, an dem wir die Homepage bearbeitet haben. Also wenn ich zum Lesen Strg R drücke. Los geht's. Also wollen wir jetzt auch diese Schaltfläche zum Lesen von Artikeln zeigen. Schauen wir uns also an, wie das geht. Solange dies noch ausgewählt ist, lassen Sie uns das reduzieren. Lassen Sie uns nun hier nach dieser Option suchen. Post-Optionen, Art des Auszugs, mehr lesen. Okay. Exakt. Also dort muss das Update eingestellt werden. Jetzt können wir diese Schaltfläche „Mehr lesen“ gestalten. Wenn wir also reingehen, haben wir natürlich, wie Sie hier sehen können, verschiedene Metadaten. Sie können wählen, ob Sie einige anzeigen und andere ausblenden möchten. So können wir zum Beispiel die Kommentare ausblenden, also verstecken Sie das. Dadurch werden die Metadaten der Kommentare nicht angezeigt. Gehen wir also stilvoll hinein. Und lass uns nach dem Button suchen. Geben wir ihm eine Hintergrundfarbe. Oh, das ist also die Textfarbe. Also wollen wir ihm eine Hintergrundfarbe geben. Die Textfarbe sollte weiß sein. Jetzt ist es natürlich verschwunden. Aber wenn wir eine Hintergrundfarbe hinzufügen, diese Marineblau, dann soll es diese rötlich-pinke Kopie sein Hintergrundfarbe, füge das ein und los geht's. Beim Hover wollen wir die Hintergrundfarbe in das Marineblau ändern, also die Hintergrundfarbe beim Hover Marineblau und beim Hover sollten sie rosa Jetzt haben wir natürlich keine Polsterung auf der Schaltfläche, aber hier können wir die Polsterung einstellen. Also mach das kaputt Auf der linken Seite können wir vielleicht 50 geben. Nein, vielleicht 40. Rechts 40 auf den oberen zehn auf den unteren zehn. Ich denke 15 ist okay. 15 15. Da haben wir's. Nun, der Abstand oben auf der Schaltfläche, ich finde, das ist eine nette Position. Sag das. Gehen wir zurück zum Inhalt Beitragsbilds und erhöhen die Breite etwas. Wir möchten, dass es eher quadratisch als rechteckig ist. Da haben wir's. Gehen wir auch zurück zum Stil, und wir haben Metadaten. Nein, gehen wir zu den Kategorien, weil wir das bearbeiten wollen, und wir können diese Polsterung einfach so entfernen Jetzt geben wir links 20 und rechts 20. Gehen wir jetzt zu Punkt eins. Ich wähle diesen Grenzradius aus. Geben wir zehn. Jetzt hat es also diese gebogene Ecke. Geben wir ihr sogar fünf, einfach so. Aktualisieren Sie das und lassen Sie uns die Änderungen überprüfen. Ich mag es. Also zurück zu unserer Referenz-Website, genau das haben wir. Tatsächlich hatte ich es auf unserer Referenz-Website entfernt, aber ich werde es dort auf dieser speziellen Website belassen , die wir gerade erstellen. So präsentieren Sie den Beitrag also im Grunde auf Ihrer Landing Page, auf Ihrer Homepage. Ich denke, jetzt sieht es präsentabel und professionell gestylt Jetzt, wo wir einen schönen Stil für unser Blog-Element haben, müssen wir nur noch mehr Blog-Beiträge erstellen, und sie werden hier im gleichen Stil angezeigt Sie werden denselben Stil erben , und das einzige, was sich unterscheidet, ist das vorgestellte Bild, der Titel, die Kategorie und all diese Details, aber der Stil bleibt derselbe Und wir werden in zukünftigen Lektionen sehen, wie das geht. Aber jetzt möchte ich diese Lektion hier beenden, weil wir erreicht haben, was wir wollten. Wir wollten den Blogbeitrag gestalten. In der nächsten Lektion machen wir diesen Header klebrig, machen wir diesen Header denn wenn wir mit dem Scrollen beginnen, verschwindet er und wir möchten, dass er klebrig bleibt wie hier, wie wir es auf unserer Referenzwebsite haben Lassen Sie uns das also in der nächsten Lektion tun. Sehen Sie in Kürze. 21. Sticky Header: Jetzt, wo wir unseren Blogbeitrag so gestaltet haben, wollen wir diesen Header klebrig machen, wie auf unserer Referenzwebsite. Also, wenn ich wieder reingehe, möchte ich sie zuerst schließen , weil wir mit ihnen fertig sind Und jetzt, wo wir wieder rein gehen, denken Sie daran, dass wir zur Header-Fußzeile von Elements Kit gegangen und eine Kopfzeile erstellt haben Hier werden wir also hingehen, um die Kopfzeile klebrig zu machen. Klicken Sie also mit der rechten Maustaste auf Link in neuem Tab öffnen , und wir gehen da rein. Aber lassen Sie mich zunächst das und das schließen. Also gehe ich gleich hier zu unserem Redakteur. Hier sind wir. Also, bevor wir weitermachen, möchte ich diesen Knopf so rosa machen, und wenn er darüber schwebt, soll er marineblau sein Wir versuchen, den Zusammenhalt der Marke aufrechtzuerhalten. Wir versuchen, diese Markenkonsistenz aufrechtzuerhalten . Also verwenden wir überall die gleichen Farben. Also richtig, kopiere die rosa-rötliche Farbe. Gehen Sie zurück, wählen Sie dieses Element, den Stil, die Hintergrundfarbe aus und fügen Sie es dort Stil, die Hintergrundfarbe aus und fügen Sie es Dann auf Hover. Ich kopiere das zu Recht. Beim Schweben. Wir wollen, dass die Hintergrundfarbe marineblau ist, einfach so Aktualisiere das. Jetzt wollen wir, dass dieser Header beim Scrollen klebrig bleibt. Und um das zu tun, werden wir einen weiteren hinzufügen , der sich auf Elementor bezieht Er heißt Sticky-Header-Effekte für Elementor Also, wenn ich wieder reingehe, fügen Plugins neue hinzu. Oh, lass uns einfach Elementor eingeben. Und hier sind wir. Sticky-Header-Effekte für Elementor mit 200.000 aktiven Installationen. Installiere das jetzt Lass uns aktivieren. Und hier sind wir. Also, wenn ich wieder rein gehe, werde ich diese Seite aktualisieren. Und das bedeutet, dass es jetzt hier aufgeführt ist. Also, wenn ich all diese zusammenfalle, wo sind Sticky-Header-Effekte? Oh, es wird nicht aufgeführt, ich wähle einfach diesen Container aus, gehe dann zum erweiterten Collape-Layout und jetzt haben wir Sticky-Header-Effekte. Also werde ich das aktivieren. Jetzt werden all diese Einstellungen angezeigt. Aber wir werden uns nicht mit allen anlegen. Wir möchten die Hintergrundfarbe auf Weiß ändern , wenn jemand anfängt zu scrollen Gehen wir wieder rein, sobald wir anfangen zu scrollen und es klebrig wird Es ändert seine Farbe sehr schwaches Grau , denn wenn es transparent ist, können wir den Text nicht sehen , wenn er über anderen Texten steht. Lassen Sie mich Ihnen zeigen, was ich meine Geben wir ihm jetzt also keine Hintergrundfarbe. Lassen Sie uns einfach die Klebrigkeit aktiviert haben. Lass uns nach Hause gehen. Wenn ich anfange zu scrollen, ändert sich die Farbe nicht zu Weiß oder einer anderen Farbe Und das bedeutet, dass wir diese Elemente nicht sehen können. Aber wenn wir jetzt die Hintergrundfarbe ändern, machen wir einfach ein sehr schwaches Grau daraus, das fast weiß ist Aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Gehen wir zur Startseite. Fangen Sie an zu scrollen. Ja, das ist ein schönes Grau, aber ich möchte trotzdem, dass es ein bisschen grauer F 7f7f7. Ich denke, das ist ein guter Ort. Ja, das ist ein gutes Grau. Ja, aber Sie werden feststellen, dass es nicht schrumpft, wenn wir anfangen zu scrollen Während es sich auf unserer Referenzwebsite befindet, scheint es Und genau das wollen wir. Also lass uns wieder hier rein gehen. Solange dies noch ausgewählt ist und solange wir uns noch unter Sticky-Header-Effekten befinden. Gehen wir zum Verkleinern der Kopfzeile. Wir können sagen, schrumpfen Sie es auf vielleicht 60%. Wir können das Logo auch verkleinern da es sich in einer verkleinerten Kopfzeile befindet Wir können es also auch vielleicht zu 60% machen. Aktualisiere das. Wir können es dort sehen. Also gehe ich zu diesem anderen Tab, wo wir zu Hause sind, und los geht's. Einfach so. Im Grunde ist das so, wie man den Header klebrig macht. Lassen Sie uns in der nächsten Lektion über globale Fonds sprechen. Wir sehen uns in Kürze. 22. Globale Schriftarten festlegen: Jetzt ist es an der Zeit, sehr schnell über globale Telefone zu sprechen sehr schnell über globale Telefone zu Und bevor wir zu Global Phonts übergehen, stelle ich fest, dass wir weder die Hover-Effekte noch die Farbe dieser Menüelemente geändert die Farbe dieser Gehen wir also wieder rein und wählen die Elemente aus und klicken Sie auf das N-Menüelement Gehe zum Stil. Reduzieren Sie den Menü-Wrapper und wechseln Sie zum Menüelement-Stil Jetzt die Textfarbe des Menüelements. Lass es uns marineblau machen. Verstehen Sie das. Wählen Sie das aus und fügen Sie es dort ein. Jetzt ist es das Marineblau, aber wenn ich mit der Maus darüber fahre, möchte ich, dass es diese rosarote Farbe hat Also wähle das aus, füge das ein. Sie jetzt mit dem Mauszeiger darüber fahren, ist es diese Farbe, und wenn sie aktiv ist, sollte sie auch diese rosafarbene Wenn es aktiv ist, meinen wir, wenn wir uns auf einer bestimmten Seite befinden. Wenn wir uns auf der Artikelseite befinden, sollte sie diese Farbe haben, um jemandem sehr schnell zu zeigen , dass wir uns auf der Artikelseite befinden. Sehen wir uns das in der Vorschau an. Wenn wir auf die Startseite gehen, sollten sie rosa bleiben. Wenn wir zur Kontaktseite gehen, sollte sie einfach so pink bleiben. Lassen Sie uns jetzt sehr schnell über globale Telefone sprechen. Sie haben bemerkt, dass wir, während wir hier alles gebaut haben, den Text immer wieder manuell ändern mussten. Wenn wir diesen Texteditor hinzugefügt haben, mussten wir diese spezielle Schriftart manuell ändern. Wir mussten hierher kommen und das auf Monert ändern. Das ist noch nicht einmal Monert. Und wenn wir mehr Artikel erstellen wollen, die hier angezeigt werden, wie diesen Wir werden die Telefone ständig manuell einrichten müssen. Wenn wir Monert verwenden wollen, müssen wir ständig von Roboto zu Montserrat Deshalb bräuchten wir eine Möglichkeit, es nur einmal einzustellen, und jedes Mal, wenn Sie danach Text hinzufügen, wird er automatisch als Mont Schauen wir uns also an, wie das geht. Wenn ich wieder reinkomme, möchte ich sagen, mit Elementor bearbeiten , weil wir diese Seite bearbeiten Jetzt sind wir mit dieser Überschrift fertig. Lassen Sie mich das schließen und wir laden den Home-Editor. Gehen wir hier zum Burger-Menü , zu Seiteneinstellungen, zu den globalen Fonds, dann können wir alle Fonds auf Montserrat setzen Also möchte ich das auswählen. Ändere das auf Montserrat. Monat. Klicken Sie hier irgendwo hin. Wählen Sie das Montserrat aus. Klicken Sie hier irgendwo hin. Lassen Sie uns dasselbe für alle tun. Oh, warte. Montserrat. Da haben wir's Lass mich das jetzt aktualisieren. Und gehen wir zurück zum Editor. Wenn ich das auswähle, lass mich das einfach auswählen und anwenden, um zu sehen, ob diese Änderungen auch gelten. Sie haben sich darauf nicht bezogen. Aber wenn ich einen neuen Texteditor hinzufüge. Wenn ich zum Beispiel einige Texte dort ablege, heißt es jetzt Montserrat, es ist kein Roboto mehr Wenn ich hier wieder reingehe und eine Überschrift hinzufüge, ist es Typografie im Monat-Stil Monst. Das ist Stil Typografie Monct Standardmäßig werden alle Texte von nun an Monert sein Und ich habe das getan, weil wir mehr Blogbeiträge verfassen werden, um diesen Raum zu füllen, und wir wollen diese Einstellungen nicht ständig ändern Aber jetzt sehe ich, dass sich das nicht auf Monert geändert hat , also werde ich es manuell ändern, denn sobald Sie es einmal geändert haben, alle Blogbeiträge, die darunter stehen erben alle Blogbeiträge, die darunter stehen, auch all diese Einstellungen, einschließlich der Schrifteinstellung wir uns also Stil, Inhaltsfeld, Schauen wir uns also Stil, Inhaltsfeld, Typografie und Familie an und wählen Montserrat Family steht für Schriftfamilie. Und ja, ich möchte, dass es 600 sind. Lassen Sie uns vielleicht den Zeilenabstand etwas erhöhen. Bis zu diesem Punkt. Aktualisiere das. Überprüfe die Änderungen. Da haben wir's. besteht die gesamte Website aus der Mont-Schrift. Hier dreht sich also alles um globale Schriften. der nächsten Lektion wollen wir sehen, wie Sie Links zu Ihrem Blogbeitrag hinzufügen , da Links gut für die Suchmaschinenoptimierung sind. Sehen wir uns in der nächsten Lektion an, wie das geht. Sehen Sie in Kürze. 23. Links zu deinem Beitrag hinzufügen: Es ist Zeit, Links für Ihren Blogbeitrag zu erstellen. Und ich möchte nur diesen Blogbeitrag öffnen. Also lies mehr. Und hier sind wir. Vielleicht möchten wir hier einen Text einem anderen Blogbeitrag verlinken, den Sie geschrieben haben, oder vielleicht mit Wikipedia. Vielleicht verlinkst du auf eine Definition eines Begriffs , über den du möchtest, dass die Leute mehr auf Wikipedia lesen. Wie fügen Sie also einen Link in Ihren Text ein? Also werde ich weitermachen und mit Elementor bearbeiten sagen . Und hier sind wir Um also einen Link hinzuzufügen, müssen wir zum Beispiel nur den Text auswählen, den wir auswählen möchten. Zum Beispiel, wenn Sie auf die Bedeutung von Burnout verlinken möchten auf die Bedeutung von Burnout verlinken Markiere das, dann öffnet sich dieses Menü. Sie können auf diesen Link klicken und dann einen Link angeben. Ich hole mir einen Link von Wikipedia und füge ihn hier ein. Beruflicher Burnout, drücken Sie dann die Eingabetaste. Also jetzt wird daraus ein Link. Also, wenn wir das aktualisieren und eine Vorschau der neuen Änderungen anzeigen. Wenn wir hier scrollen, sind wir hier Sie auf diesen Burnout klicken, wird beruflicher Burnout angezeigt Gehen wir zurück. Das Problem ist, dass es jetzt auf derselben Seite geöffnet wird und Sie möchten vielleicht, dass die Leute ohne Unterbrechung weiterlesen. Sie möchten also, dass es in einem neuen Tab geöffnet wird. Also gehe ich wieder rein. Solange dieser Textblock ausgewählt ist. Lass uns hier reingehen und nach dem Link suchen. Sollte irgendwo hier sein, hier sind wir. Burnout. Ich wähle das aus Dadurch wird diese Bearbeitungsoption angezeigt. Klicke darauf. Dann klicken Sie auf dieses Zahnrad Dadurch wird dieses Popup geöffnet. Sie können sagen, Link in neuem Tab öffnen. Aktualisiere das. Lassen Sie uns nun die Änderungen überprüfen. Hier sind wir. Wenn ich jetzt darauf klicke, öffnet es sich in einem neuen Tab. Unser Artikel ist noch intakt. Ein weiteres Problem, das Ihnen vielleicht aufgefallen ist, ist, dass dies nicht mit unseren Markenfarben übereinstimmt oder nicht mit unseren Markenfarben übereinstimmt. Wir möchten, dass diese Links vielleicht so rötlich rosa sind, und das sind die Farben, die von der festgelegt wurden Denken Sie daran, dass ich Ihnen gesagt habe, dass das Thema das Standard-Aussehen Ihrer Website bestimmt Das sind also Astra-Farben, und um diese zu ändern, können wir sie anpassen. Das öffnet sich, wir drücken auf Allgemeine Einstellungen. Hier sind wir. Und jetzt haben wir den Artikel natürlich immer noch hier zur Vorschau geöffnet. Wenn wir auf Global wechseln, können wir hier zu Farben gehen und diese Farben ändern. Zum Beispiel Links. Wenn ich hier reingehe und diese rötlich-rosafarbene Kopie auswähle, kann ich diese auswählen , nach unten scrollen und hier, wenn wir die Veröffentlichung einfügen, wählen wir auch diese aus Platzieren Sie das. Es ändert sich nicht. Warum? Lassen Sie mich das aktualisieren, damit es sofort wirksam wird. In Ordnung. Wir mussten das aktualisieren, um diese Änderung zu sehen. Tatsächlich möchte ich dies auch noch einmal auswählen und es fett aktualisieren. Sehen Sie sich das an. Einfach so auszubrennen. Mir ist gerade eingefallen, dass wir das mit Elementor manuell eingestellt Das wird also nicht von Astra festgelegt. Wenn wir wieder rein gehen, denken Sie daran, dass dies ein Elementpost-Meta war. Sie können zu Stilkategorien gehen. Gehen wir zu Färben, Einfügen und verwandeln das Ganze in rötliches Rosa Damit dies im Editor wirksam wird, können wir die Seite aktualisieren Und jetzt, los geht's. So fügen Sie Ihrem Blogbeitrag im Grunde Links hinzu, falls Sie auf andere Artikel auf Ihrer Website oder einer anderen Website eines Drittanbieters verlinken möchten andere Artikel auf Ihrer Website oder einer anderen Website eines Drittanbieters verlinken . In der nächsten Lektion erfahren Sie, wie Sie den Autorenbereich hinzufügen. Gehen wir also zurück zu unserer Referenzwebsite und sehen wir uns an, wie man das erstellt. Also, wir sehen uns in Kürze. 24. Autorenbereich: Jetzt ist es an der Zeit, diesen anderen Abschnitt zu erstellen. Das sollte sehr einfach sein, weil wir so etwas bereits erstellt haben. Also zurück zu unserer Workstation, wo ist sie? Hier sind wir. Um das zu erstellen, müssen wir diesen Abschnitt von der Startseite kopieren, und das können wir tun. Nun, das ist der Homepage-Editor. Also kann ich diese Rechtsklick-Kopie auswählen. Jetzt habe ich diesen Container kopiert. Zurück zu unserem Editor hier, lassen Sie mich das und Wikipedia einfach schließen. Wählen Sie diesen Container aus. Einfügen. Jetzt haben wir es in den Behälter geklebt Wählen Sie also diese Zeile aus oder gehen Sie einfach hier hoch und klicken Sie mit der rechten Maustaste auf Einfügen nach unten scrollen, befindet es sich jetzt immer noch in diesem Container, weil wir sie in diesem Container behalten möchten Nimm diesen Text und platziere ihn darunter. Was haben wir sonst noch hier? Wir haben nichts über mich. Also lass uns das entfernen. Wir können diesen Text ändern, ihn vielleicht etwas vergrößern. Und tatsächlich sollte das eine H-Drei sein. Das Training sollte ein Alter von vier Jahren haben, und das ist ein Alter von drei Jahren. Wir versuchen, diese Hierarchie aufrechtzuerhalten . Das ist ein Alter von zwei Jahren. Das sind kleinere Titel, und das ist noch untergeordneter. Hierarchie. Behalte das im Hinterkopf. Was haben wir sonst noch hier? Machen Sie diese etwas größere Typografie, vielleicht sollte sie 15, aber vielleicht 700 dick Lassen Sie uns vielleicht den oberen Rand leicht vergrößern und die Farbe des Textes ändern Habe ich das Rosa? Nein, habe ich nicht. Lass uns hier reingehen und diese Kopie auswählen , das dort einfügen, aktualisieren. Lassen Sie mich das zunächst auswählen und auf Null reduzieren. Oh, das ist top. Hey, lass mich das einfach zurückgeben. Für den Boden möchte ich das etwas reduzieren. Lassen Sie uns diesen Text auswählen und den unteren Rand vergrößern. In Ordnung. Lassen Sie uns das auf Null setzen. Ich wähle diesen Container mit erweitertem Rand oben aus, geben wir ihm diese Trennung. Aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Scrollen Sie nach unten. Fazit, dann haben wir den Autor. Fantastisch. Also ich liebe , was wir bisher haben. In der nächsten Lektion wollen wir diesen Artikel nun tatsächlich gestalten, da dies einer der neuesten Artikel ist. Aber das ist natürlich der einzige Artikel, den wir bisher hinzugefügt haben. Er wird hier angezeigt. Mal sehen, wie man es so stylt, dass es so aussieht. Wir sehen uns in einer Minute. 25. Style die Sidebar Neueste Beiträge: Jetzt ist es an der Zeit, diese Seitenleiste zu gestalten, die aus den letzten Beiträgen besteht Gehen wir also zurück zu unserem Editor, und hier sind wir. Das ist also eine Post-Liste. Geh hier rein, zufrieden. Gehen wir zu den Einstellungen. Nehmen wir an, das Symbol wird nicht angezeigt. Einfach so, aktualisiere. Dann können wir sagen, dass das Bild im Hintergrund angezeigt wird, nein. Ausgewähltes Bild anzeigen. Ja. Dadurch wird das abgebildete Bild an der Seite angezeigt. Lassen Sie uns jetzt auch die Telefongröße hier reduzieren. Also Text, Typografie. In Ordnung. Lass es uns einfach so manuell machen und die Höhe reduzieren. Lass es uns auch leicht erhöhen. Das Gewicht gibt ihm 600. Aber ich möchte ihm diese Farbe geben. Das Marineblau. Geh wieder rein, wähle hier, Textfarbe. Jetzt einfügen, es ist das Marineblau. Aber wenn es schwebt, sollte es diese rosa-rötliche Farbe haben. Kopiere das, füge das da ein, einfach so. Nun, linkes Auffüllen, reduzieren wir das. fünf, Geben wir dem ausgewählten Bild einen Randradius von um die abgerundete Ecke zu erhalten Gehen wir sogar noch einmal zur Typografie zurück . Vielleicht geben wir dem 800 700, das ist gut. Ja, das ist besser. Lassen Sie uns auch die Zeilenhöhe reduzieren. Aktualisieren Sie das bis zu diesem Zeitpunkt. Und lassen Sie uns jetzt die Änderungen überprüfen. Scrollen Sie nach unten. Da haben wir's Also, was ist das? Das müssen wir loswerden. Ich weiß nicht, was das ist. Listet den Zwischenraum zwischen den Inhalten auf. wir mehr Artikel haben, schauen wir uns die Liste Wenn wir mehr Artikel haben, schauen wir uns die Liste und die Abstände an und wie sie aufgelistet werden Zurück zum Inhalt hier. Einstellungen. Ich weiß nicht, was das ist, aber ich werde es herausfinden Lassen Sie mich einfach sehr schnell herausfinden , was das ist. Ordnung. Also wurde mir klar , dass das Problem ist. Der Grund, warum wir diesen Punkt hier hatten, war diese Einstellung hier, das Layout. Wie Sie sehen können, haben wir momentan eine Art von Kugeln, und das ist nicht das, was wir wollen Wir wollen das ohne Aufzählungszeichen denn wenn wir zu den Aufzählungszeichen zurückkehren und eine Vorschau der Änderungen anzeigen, haben wir, wie Sie sehen können, dort ein Aufzählungszeichen, aber wenn es auf dieses horizontale Layout eingestellt ist, schauen Sie sich das an Jetzt ist es weg. Also das ist es, was wir wollen. Also im Grunde ist das so, wie man die letzten Beiträge in der Seitenleiste gestaltet . In der nächsten Lektion sehen wir uns an, wie Sie diesen Scroll-Fortschrittsbalken hinzufügen. Wenn Sie also scrollen, haben wir diese obere Leiste, die Ihnen zeigt, wie weit Sie sind und wie viel Sie noch übrig haben, bis zum Ende des Blogbeitrags Ich denke, es verleiht Ihren Blogbeiträgen Leben und macht Ihre Blogbeiträge einzigartig Ich habe das auf einigen Websites gesehen und mich bis vor kurzem immer gefragt , wie das geht. Schauen wir uns also in der nächsten Lektion an , wie das geht. 26. Fortschrittsbalken hinzufügen: Jetzt ist es an der Zeit , diesen Fortschrittsbalken hinzuzufügen , so etwas. Also zurück in unseren Editor. Jetzt wollen wir das nur zu Blogbeiträgen hinzufügen. Gehen wir in unseren Blogbeitrag. Lesen Sie mehr. Lass mich diese schließen. Wir möchten es hier zusammenfassen, damit jemand unseren Blogbeitrag scrollt und liest, das sehen kann Aber bevor wir das tun, möchte ich, dass wir jetzt diese Seitenleiste hinzufügen Gehe zurück zum Blockbeitrag und füge ihn mit Elementor hinzu, denn mein Ziel ist es, diesen Blockbeitrag, den wir erstellt haben, als Vorlage zu speichern diesen Blockbeitrag, den wir erstellt haben, als , die wir wiederverwenden können, wenn wir den Rest der Blogbeiträge erstellen . Du wirst sehen, was ich meine Und ich möchte die Vorlage nicht ohne alles speichern , was einen Blockbeitrag ausmacht. Ich komme her, klicke mit der rechten Maustaste auf Kopieren. Komm rein, wähle diesen Link rechts aus und füge ihn ein. Es wird dort eingefügt Eigentlich wollte ich das nächste, Rechtsklick auf Kopieren, komm her. Wählen Sie jetzt wieder den Container aus , der sie enthält, klicken Sie mit der rechten Maustaste auf Einfügen , und genau das wollen wir. Also ich denke, ich werde das dabei belassen. Wenn wir weitere Artikel erstellen, werden sie hier in einer Liste angezeigt. Also mach dir darüber keine Sorgen. Aber vorerst möchte ich sagen. Lassen Sie mich das sogar auf fünf Beiträge beschränken. Also wähle ich das aus. Wenn es eigentlich schon auf fünf Beiträge beschränkt ist. Wir wollen hier nicht 50 Beiträge aufgelistet haben. Wir wollen nur fünf. Also klicke ich auf Update. Sehen wir uns die Änderungen an. Da haben wir's. nach unten scrolle, möchte ich etwas Abstand zwischen diesen beiden Spalten Also gehe ich zu dem Container , der die beiden Container Und jetzt zur Lücke, lassen Sie uns das so machen, aktualisieren. Überprüfe die Änderungen. Ja, wir brauchen diesen Abstand. Jetzt müssen Sie nur noch den Fortschrittsbalken hinzufügen. Also klicke ich darauf und gebe Fortschritt ein. Denken Sie daran, eines der Plugins, die wir hinzugefügt haben war Royal Elementor Add Ons. Tatsächlich möchte ich dir hier nur schnell etwas zeigen. Dies ist die offizielle Website von Royal Elementa Adoms. Und wenn Sie eines ihrer Elemente testen möchten, können Sie zu Royal element addos.com kommen und Also möchte ich zur Fortschrittsleiste gehen. Wenn ich also darauf klicke, scrolle nach unten, um den Fortschritt in Aktion zu sehen . Also los geht's. Ich habe vergessen, Ihnen diese Website zu zeigen und Ihnen zu sagen wie Sie sich einige Elemente einfach ansehen können , bevor Sie sie verwenden. Zum Beispiel die Flipbox, wir werden keine Flipbox verwenden, aber ich möchte es dir nur zeigen. So etwas in der Art. Ich gehe zurück nach Hause. Besuchen Sie also einfach diese Websites und sehen Sie sich die Elemente an, die sie Ihnen bieten. Hier ist die Website mit Premium-Add-Ons für Elementor. Denken Sie daran, dass wir ein weiteres Addon hinzugefügt haben. Und wenn Sie zu allen Widgets gehen, können Sie hier eine Liste all dieser Dinge sehen. Wir haben einen Blog benutzt. Lass uns sehen. Wenn wir nach unten scrollen, sind dies die verschiedenen Möglichkeiten, wie Sie Ihren Blogbeitrag präsentieren können Ihren Blogbeitrag präsentieren Und wenn wir hier unten zum allerletzten gehen, haben wir unseren so gemacht. Gehen wir wieder rein. So haben wir das gemacht. Ich wollte das nur veröffentlichen falls Sie sehen möchten, wie Sie feststellen können , ob ein Element, das Sie verwenden möchten, für Ihre Website geeignet ist. Sie können eine Vorschau auf der offiziellen Website des Erstellers sehen. Also lass mich das und das schließen. Wenn wir hierher kamen, hatten wir Fortschritt eingegeben und lesen jetzt Fortschrittsbalken Wir können es einfach hier ablegen. Es wird über dem Bild nicht sichtbar sein. Wir platzieren es gerade in diesem Blog-Post-Update. Lass es uns sogar direkt unter dem Bild ablegen. Tatsächlich ist dieser Titel dem Bild zu nahe. Lassen Sie mich das Oberteil für Fortgeschrittene auswählen. Lass es uns da hinstellen. Lassen Sie mich das jetzt einfach über dem Text-Update platzieren. Überprüfe die Änderungen. Das ist jetzt gut verteilt, und wenn wir mit dem Scrollen beginnen, funktioniert unser Fortschrittsbalken , weil wir ihn irgendwo auf der Seite abgelegt haben Wir können es an einer beliebigen Stelle auf der Seite ablegen, und das ist alles, was zählt Wenn wir wieder reingehen, können wir die Feldfarbe ändern. Ich möchte ihm diese rosafarbene Kopie geben. Wählen Sie dies aus, fügen Sie es in das Update ein und sehen Sie sich eine Vorschau der Änderungen an. Scrollen. Jetzt haben wir's. Unsere Markenfarbe funktioniert. So fügt man den Fortschrittsbalken beim Lesen hinzu. Lassen Sie uns in der nächsten Lektion über das Speichern von Vorlagen sprechen . Wir sehen uns in Kürze. 27. Blog-Vorlage speichern: Da wir nun mit dem Aussehen unseres Blogposts zufrieden sind, können wir ihn als Vorlage für unseren Blogbeitrag verwenden , sodass wir in Zukunft, wenn wir einen neuen Blogbeitrag erstellen möchten, ihn nicht noch einmal von vorne entwerfen müssen. Und das können wir tun, indem wir dort bearbeiten, wo wir ihn bearbeitet haben. Klicken Sie dann auf dieses Drop-down-Menü. Als Vorlage speichern. Sagen wir jetzt eine Vorlage für einen Blogbeitrag. Klicken Sie auf Speichern. Jetzt sind wir da, Vorlage für Blogbeiträge. Wenn wir also das nächste Mal einen Blogbeitrag erstellen wollen, können wir hierher kommen und diesen einfügen und wir können dann einfach den Text des neuen Blogposts ändern, aber die Struktur wird dieselbe sein. Und das werden wir ab der nächsten Lektion sehen , denn genau das tun wir. Wir erstellen weitere Blogbeiträge, um unsere Startseite mit den restlichen Blogbeiträgen zu füllen unsere Startseite mit den restlichen Blogbeiträgen zu Also wir sehen uns in einer Minute. 28. Erstelle weitere Blog-Beiträge: Jetzt haben wir unsere Vorlage für Blogbeiträge gespeichert. Es ist Zeit, damit den Rest unserer Blogbeiträge zu erstellen. Lassen Sie mich das einfach schließen. Und weil wir mit dieser Seite fertig sind, werde ich sie tatsächlich schließen. Schließe auch das, sogar das und das. Gehen wir jetzt zurück zu den Beiträgen. In der Liste der Beiträge haben wir nur einen Beitrag. Jetzt sage ich einfach, klicken Sie mit der rechten Maustaste auf Link in neuem Tab öffnen auf Neuen Beitrag hinzufügen. Jetzt können Sie schnell mit der rechten Maustaste klicken und einen neuen Tab öffnen , indem Sie einfach das Mausrad verwenden. Wenn Sie darauf klicken, wird ein neuer Tab geöffnet. Tun Sie das, öffnen Sie das in einem neuen Tab. Lass uns eins, zwei, drei, vier, fünf erstellen . Sagen wir sechs. Gehen wir wieder rein und geben ich dem einen Titel. Ich kopiere das einfach. Lass mich auf die Startseite gehen. Lass mich das kopieren, das kopieren. Ich füge es da ein. Standardseite. Standardvorlagenelement oder volle Breite. Lassen Sie uns ein ausgewähltes Bild festlegen. Geh wieder rein. Sagen wir, vielleicht dieser Welpe. Wählen Sie ein ausgewähltes Bild aus. Lass uns auch einen Auszug hinzufügen, also scrolle ich hier. Kopieren Sie das, fügen Sie es dort ein, und veröffentlichen Sie es. Das ist jetzt veröffentlicht. Aber denken Sie daran, dass wir nur die Grundkonfigurationen für vielleicht die Vorlage und das vorgestellte Bild und den Auszug festlegen die Grundkonfigurationen vielleicht die Vorlage und das vorgestellte Bild und den Auszug Wir haben die Astra-Einstellungen nicht festgelegt. Aber wenn wir den Blockpost im Frontend mit der Vorlage erstellen wollen den Blockpost im Frontend mit der , die wir gerade gespeichert haben, müssen wir diese auch festlegen. Es, lass mich sie einfach einstellen. Ich wollte sie zunächst schnell erstellen und dann später darauf zurückkommen, aber wir können das jetzt tun. Seitenleiste keine Seitenleiste. Lassen Sie uns diese drei deaktivieren. Aktualisiere das. Jetzt kann unsere Webseite mit Elementor bearbeitet werden. Tatsächlich ist es nicht unsere Webseite, sondern ein Blogbeitrag. Ich werde das schließen. Ich werde wieder hierher kommen. Nehmen wir diese eine Kopie und fügen sie dort ein. Lassen Sie mich das ausgewählte Bild sogar einstellen. Wählen Sie. Wählen Sie das aus. Nein, lassen Sie mich das ausgewählte Open-Set-Bild auswählen. Lass uns diese Seite mit den Eiern da drin nehmen. Veröffentlichen. Das ist es also. Lass mich das schließen. jetzt wieder reingehe und Wenn ich jetzt wieder reingehe und diese Seite aktualisiere, haben wir jetzt drei Blogbeiträge. Wenn wir mit der Maus darüber fahren, gibt es keine Möglichkeit, es mit Elementor zu bearbeiten Aber jetzt hier, das kann mit Elementor bearbeitet werden, weil wir es bereits mit Elementor erstellt haben, sodass wir es mit Element bearbeiten können Gehen wir nun zu dem, wir bereits mit Elementor in voller Breite und all diesen anderen Einstellungen konfiguriert haben , und können ihn mit Elementor bearbeiten Und natürlich ist es eine leere Seite. Aber jetzt, noch bevor wir weit gehen, sollten wir diesen Gedanken einfach bei der Sache behalten. Geh wieder rein. Wenn ich zurück nach Hause gehe und dann auf die Startseite gehe , indem ich darauf klicke, wird dies zur Startseite weitergeleitet. Wie Sie sehen können, haben wir bereits drei Blogbeiträge zu unserer Liste der kürzlich hinzugefügten Blogbeiträge hinzugefügt, und sie sind alle nicht kategorisiert. Und sieh dir die letzten Artikel an. Es taucht auch in den letzten Artikeln auf. Jetzt können wir ändern und festlegen , welcher Blogbeitrag in dieser Liste angezeigt wird. Es ist nicht starr oder fest, und wir sollten es nicht einfach so akzeptieren , wie es ist. Wir können genau bestimmen , welche Blogbeiträge diesen verschiedenen Bereichen angezeigt werden sollen, denn genau hier wollen wir die neuesten. Aber hier möchten wir vielleicht eine bestimmte Kategorie von Blogposts. Wir werden uns in Kürze mit Kategorien befassen. Gehen wir nun zurück und denken Sie daran, dass wir gerade dabei waren, unseren Blogbeitrag zu verfassen. Wir können zu Vorlagen gehen. Und in der Liste meiner Vorlagen haben wir eine Vorlage für Blogbeiträge. Ich kann sagen, einfügen, das anwenden. Und jetzt ist hier die Vorlage, die wir gespeichert haben. Ich muss also nur den Inhalt dieser Vorlage bearbeiten , um den Inhalt des neuen Blogposts zu erhalten, den ich posten möchte. Aber das werde ich natürlich nicht tun, weil es mein Ziel ist, Ihnen zu zeigen, wie man diese Dinge benutzt, aber ich werde dieses Bild ändern, um das Neue widerzuspiegeln. Ich glaube, es war dieser Welpe. Wählen Sie Update. Ich denke, wir sollten auch dieses Thema ändern. Ich war das Zeichen von Focus Copy. Ja, da stehen die Zeichen der Fokussierung. Ja, wenn ich das auswähle, kann ich herkommen und ihm diesen Titel geben, aktualisieren. Aber jetzt sollte es im Inhalt um diese neuen Blogbeiträge gehen. Bearbeiten Sie also alles bis zum Ende und aktualisieren Sie dann die Änderungen und sehen Sie sich eine Vorschau an. Da haben wir's. Wenn wir also diesen ursprünglichen Blogbeitrag öffnen, sind wir hier, und wenn wir diesen neuen öffnen, ist er einzigartig für diesen speziellen Blogbeitrag und er wird den Inhalt des neuen Blogposts enthalten. Jetzt ist das die Zeit, in der ich diesen Teil vorspulen werde, weil ich im Grunde denselben Vorgang für den Rest der Blogbeiträge wiederholen werde, und das wird zu lange dauern, also wird es sich um einen Zeitraffer handeln Und wenn ich fertig bin, können wir jetzt mit der nächsten Sitzung fortfahren Lassen Sie mich diesen Abschnitt also schnell vorspulen. Also, wenn ich wieder reingehe, werde ich noch einen Blogbeitrag erstellen. Und so sind wir hier. Ich habe den Rest des Blogposts, den ich benötige, fertig erstellt . Und wie Sie sehen können, müssen wir hier im Vergleich zu unserer Referenzwebsite einige Anpassungen vornehmen. Wir müssen etwas mehr Abstand hinzufügen. Vielleicht möchtest du das mit dieser Art von Abstand. Aber ich möchte dir zeigen, wie man diesen Abstand leicht hinzufügt . So macht man das. In der nächsten Lektion sehen wir uns an, wie Sie diesen Abstand hinzufügen und zur Artikelarchivseite übergehen. Auf dieser Seite werden all Ihre Blogbeiträge angezeigt. Also geh wieder rein, Artikel. Hier sind wir. Dies ist das Blogarchiv, eine Liste aller Artikel, die ich im Laufe der Zeit veröffentlicht habe, und die Leser können hier reinkommen und alles lesen, was Sie veröffentlicht haben. Machen wir das also in der nächsten Lektion. Wir sehen uns in Kürze. 29. Archivseite der Beiträge: Jetzt ist es an der Zeit, die Blog-Archivseite oder die Beitrags-Archivseite zu erstellen . Gehen wir also zurück zu unserem Editor, genau hier, gehen wir zum Dashboard und schließen es. Oder wir haben bereits eine Seite erstellt. Lass uns zu den Seiten gehen. Und es heißt Artikel. Also sage ich Edit. Lassen Sie mich tatsächlich den Link in einem neuen Tab mit der rechten Maustaste öffnen. Da haben wir's. Lassen Sie uns also die Grundkonfigurationen zusammenfassen. Gehen wir zu den Astra-Einstellungen, Elementor voll ohne Seitenleiste Lassen Sie uns diese auch deaktivieren. Da haben wir's. Gehen wir zur Bearbeitung mit Elementor Und hier sind wir. Und jetzt lass mich das mal ansehen. Das ist unsere Homepage. Ich möchte diesen Heldenbereich hier aufgreifen weil Sie auf unserer Referenz-Website feststellen werden, wir etwas Ähnliches wie den Heldenbereich auf der Startseite haben . Wir müssen das Rad nicht neu erfinden. Wir müssen nicht wiederholen oder wiederholen, was wir bereits getan haben. Bearbeiten Sie also mit Elementor auf der Startseite. Alles, was wir tun müssen, ist diesen Container auszuwählen , der den Heldenbereich enthält, und zwar richtig kopieren Geh wieder rein, rechts in dieses Kästchen, füge es ein. Dadurch wird es oben eingefügt. Das sagt Blog-Archiv. Kopieren Sie das, wählen Sie das aus, doppelklicken Sie hier, fügen Sie es ein. Eine Liste aller Artikel, die ich im Laufe der Zeit veröffentlicht habe. Die Auswahl wurde gelöscht. Lassen Sie uns das einfach dort einfügen. Drücken Sie Shift V, um so einzufügen. Richten Sie das Update in der Mitte aus. Und jetzt müssen wir die Flexbox hinzufügen, diese Struktur hier, ein einziger Container. Um unsere Blogbeiträge auf diese Weise anzuzeigen, werden wir ein zusätzliches Element-Add-On verwenden , das als Essential Addons for Element bezeichnet wird. Gehen wir also zurück zu unseren Dashboards und fügen sie hinzu. Unverzichtbare Addons für Elementor. Hier sind wir, oder wir hätten einfach Elementor eingeben können. Und hier sind wir wichtige Addons. Installiere es jetzt. Installiert, lassen Sie uns aktivieren. Und jetzt können wir diesen Einrichtungsassistenten durchgehen und als Nächstes „Erweitert“ wählen. Wir können Vorlagen aktivieren, aber ich brauche die Vorlagen nicht und überspringe sie auch nicht. Als Nächstes zähle ich mit oder nein, danke. Ich werde einfach nein danke sagen , weil dies keine permanente Website ist. Ordnung. Also jetzt sind wir aktiv. wieder reingehe, sage ich Refresh. In Ordnung. Wenn wir all das zusammenklappen, werden wir wichtige Erweiterungen sehen. Also werde ich Grid Post Grid von Essential Add Ons EA eingeben von Essential Add Ons EA Lassen Sie mich es also per Drag & Drop in den Container ziehen, und das ist es, wonach wir gesucht haben. Solange das ausgewählt ist, ändere ich das auf Zuallererst, sagen wir, wir wollen sechs Beiträge pro Seite. Aber für das Layout wollen wir drei Spalten haben, nicht vier, drei Spalten. Aktualisiere das. Und lass mich die Seite aktualisieren. Jetzt haben wir also drei Spalten. Lassen Sie mich diese Seite aktualisieren. Das spiegelt sich also im Editor wider. Das ist die Vorschau. Aber wir müssen natürlich noch viel mehr tun, damit es so aussieht. Gehen wir also hier rein, während dies noch ausgewählt ist, gehen wir zunächst zum Layout über. Wir wollen einige dieser Dinge deaktivieren. Geh runter, zeig kein Datum. Oder du kannst das Datum anzeigen. Sie müssen den Namen des Autors nicht anzeigen, es sei denn, Sie haben mehrere andere Autoren in Ihrem Blog. Zeig nicht den Avatar, das Bild. Ja, so. Gehen wir jetzt mit Stil rein, um sie zu stylen . Post-Grid-Stil. Geben wir ihm einen Grenzradius von 20, also bis ganz nach oben. Wenn wir nun zum Vorschaubild gehen und ihm auch eine 20 geben, ist alles abgerundet, aber wir wollen diese Ränder nicht Gehen wir also zurück zum Post-Grid-Stil, Randtyp. Jetzt ist es nein. Gehen wir zum Metastil über und zentralisieren sie so. Gehen wir zu Typografie und Abständen. Jetzt können wir den Titelstil und den Auszugsstil haben. Also den Titel, wir können ihn in die Mitte und den Auszug in die Gehen wir zum Lesen und Signieren auch zur Mitte Das ist der Knopf. Wir können zur Farbtypografie und zum Abstand zurückkehren und die Farbe des Titels ändern Lassen Sie mich dieses Marineblau auswählen. es hineinkleben und mit der Maus darüber fahren, wollen wir, dass es beim Schweben rötlich rosarot wird dass es beim Schweben rötlich rosarot Wir wollen auch zum Titel der Typografie gehen. Wir wollen ihm einfach so eine Dicke von 900 geben. Ich denke, diese Größe ist okay, aber wir können 25 machen, das ist okay, aber die Linienhöhe ist ein netter Punkt. Okay. Nun, Sie werden feststellen, dass der Auszug sehr wenig Text Gehen wir also zum Inhaltslayout. Lassen Sie uns für die auszugsweisen Wörter 20 daraus machen. Das würde bedeuten, dass im Auszug 20 Wörter angezeigt werden. Geh zurück ins Innere des Stils. Gehen wir zur Schaltfläche „Mehr lesen“. Die Textfarbe sollte weiß sein. Aber jetzt machen wir den Hintergrund rötlich. Gehen Sie also zurück lesen Sie mehr über den Hintergrundtyp Geben wir ihm diese Farbe. Lass uns diese Polsterung kaputt machen. Und für die Spitze geben wir 15. Geben wir ihr sogar zehn, für die Unterseite meine ich oben. Geben wir zehn. den oberen Rand Lassen Sie uns den oberen Rand nach unten drücken Ich denke, 30 ist okay. Geben wir ihm auch einen Grenzradius von fünf, sagen wir zehn. Aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Da haben wir's. Aber jetzt wollen wir etwas gegen dieses Datum unternehmen. Layout-Einstellungen. Ich glaube, ich werde dieses Datum loswerden, weil es das Layout zerstört. Also werde ich das einfach aktualisieren. Lassen Sie uns die Änderungen überprüfen. Aber du kannst es genau dort lassen , wenn du willst. Da haben wir's. Lassen Sie uns jetzt natürlich diesen Schlagschatten hinzufügen , damit jeder Blockbeitrag hervorsticht. Geh wieder rein, Stil, es ist der Boxschatten im Post-Grid-Stil, einfach so. Aber jetzt ist es zu dunkel. Wir können es leichter machen, vielleicht bis zu 20 irgendwo da. Lassen Sie uns es auch leicht verteilen. Verwischen Sie es Ich will es sogar schwächer machen , einfach so Aktualisiere. Lassen Sie uns die Änderungen überprüfen. Da haben wir's. Jetzt ist es standardmäßig auf Masonry eingestellt Das Layout ist auf Masonry eingestellt. Layout des Inhalts. Mauerwerk, und deshalb, wenn es kurz ist, wird das darunter liegende nach oben geschoben , um diesen gleichmäßigen Abstand beizubehalten Also, selbst wenn das bis zu diesem Punkt viel kürzer wäre, würde es nach oben geschoben werden, um immer noch den gleichen Abstand zu haben, und ich denke, das lässt es vorzeigbarer aussehen als vereinbart Also ich denke, wir haben es geschafft. Ich denke, wir haben es geschafft Alles, was Sie tun müssen, ist weitere Blogbeiträge hinzuzufügen, und sie werden zu dieser Liste hinzugefügt Und Sie können auch die Anzahl der Blogbeiträge begrenzen , die angezeigt werden. Derzeit habe ich fünf, aber diese Seite wird sechs anzeigen können. Wenn Sie 12 anzeigen möchten, können Sie hier 12 anzeigen, und es werden 12 davon angezeigt, wenn Sie 12 davon haben. Ich denke, an diesem Punkt können wir es als abgeschlossen bezeichnen. Das ist das Ende dieser Lektion. So erstellen Sie die Blog-Archivseite. in der nächsten Lektion jetzt Lassen Sie uns in der nächsten Lektion jetzt über Kategorien sprechen. Und mir wurde gerade klar, dass wir nichts gegen diesen Text unternommen haben. Das kann deine Hausaufgabe sein, aber wir können zur Farbe zurückkehren, zum Textauszug, zur Typografie, Montserrat Wir können es vergrößern, aber ich werde Aber ich möchte den oberen Rand leicht erhöhen. Um es vom Titel zu trennen. Da haben wir's. Einfach so. Lassen Sie uns in der nächsten Lektion über Beitragskategorien sprechen. Wir sehen uns in Kürze. 30. Beitrag-Kategorien: Jetzt ist es an der Zeit, über die Beitragskategorien zu sprechen. Sie werden also feststellen, dass wir hier alle Blogbeiträge anzeigen, die wir im Blog haben. Wenn wir auf die Startseite gehen, zeigen wir wahllos jeden einzelnen Blogbeitrag wir auf der Seite haben Möglicherweise möchten wir jedoch bestimmte Blogbeiträge in einem Abschnitt und verschiedene Blogbeiträge in einem anderen Abschnitt anzeigen einem Abschnitt und verschiedene Blogbeiträge in einem anderen Und hier bieten sich Kategorien an. Also zurück zu unserem Dashboard, ich möchte zu den Kategorien der Beiträge gehen. Lass mich das schließen. Nein, danke. Und lass mich das schließen. Und jetzt, wie Sie sehen können, haben wir nur eine Kategorie namens Unkategorisiert. Und das liegt daran, wir bei der Installation standardmäßig immer diese Standardkategorie verwenden. Es gibt nicht die Möglichkeit, es zu löschen. Jetzt können wir unsere eigenen Kategorien erstellen. Aber wenn wir jetzt zur Liste aller Beiträge zurückkehren, weil wir keine Kategorie hatten, wird jeder Beitrag, den wir erstellen automatisch in die Kategorie Nicht kategorisiert aufgenommen. Jetzt gibt es zwei Möglichkeiten, eine Blog-Kategorie zu erstellen. Wenn wir zum Beispiel hier reingehen, klicke ich mit der rechten Maustaste und öffne den Link in einem neuen Tab hier, und ich möchte diese anderen schließen. Nun, hier sind wir in diesem Beitrag. Gehen wir davon aus, dass wir den Beitrag jetzt erstellen. Wir können hierher kommen und das Kategorienfenster oder die Registerkarte öffnen. Wir können dies deaktivieren und jetzt können wir sagen, neue Kategorie hinzufügen und einen Namen eingeben Was ist das zum Beispiel? Priorisierung. Zeitmanagement Zeitmanagement, Home, T, drücken Sie die Eingabetaste. Dieser Blogbeitrag fällt nun in diese spezielle Kategorie Anrufzeitmanagement. Es kann auch in zwei Kategorien oder mehrere Kategorien fallen . Es kann auch um Produktivität gehen. Wenn ich mitmache, gehört es jetzt zu zwei Kategorien. Wenn ich das aktualisiere, ist es jetzt aktualisiert. Gehen wir zurück und aktualisieren diese Seite. Wie Sie jetzt sehen können, gehört es zu diesen beiden Kategorien. Wir können das Gleiche für diese tun. Eine weitere Sache, die Ihnen auffallen wird , ist, dass, sobald wir diese beiden Kategorien erstellt haben, wenn wir zu den Kategorien hier gehen, sie auch hier enthalten sind. Das ist also eine Möglichkeit, Kategorien zu erstellen, indem dies in einem Beitrag tun, wie Sie ihn erstellt haben. Eine andere Möglichkeit besteht darin, hierher zu kommen und weitere hinzuzufügen. Also zum Beispiel Gesundheit. Wenn ich reinkomme, kannst du die Schnecke zur Verfügung stellen. Wenn Sie jedoch die Eingabetaste drücken, verwendet wPress den Namen, den Sie der Kategorie gegeben haben, als Slug, und so sollte es auch Wenn ich die Eingabetaste drücke, hat Wpress eine neue Kategorie kalte Gesundheit erstellt, und wenn Sie Quick Edit sagen, ist der Slug Wenn wir hier zur Produktivität übergehen, die Schnecke Lassen Sie mich nun zwei weitere Kategorien erstellen. Sagen wir, aktuelle, vielleicht aktuelle Beiträge. Lehne das ab Stornieren Sie das. Vielleicht können wir auch eine weitere Kategorie mit dem Namen „ Featured“ erstellen. Geben Sie ein. Da haben wir's. Nun, wenn wir zu allen Posts gehen und vielleicht das hier öffnen. Lass mich einfach die Maus drücken , um es in einem neuen Tab zu öffnen. Hier sind wir. Wenn wir zu den Kategorien gehen, haben wir jetzt eine Liste all dieser Kategorien, die wir erstellt haben, und natürlich wurde sie kategorisiert aufgelistet. Aber jetzt können wir es in jede Kategorie einordnen. Sagen wir Gesundheit. Aktualisiere das. Gehen wir wieder rein. Lass uns das bearbeiten Gehen wir zu den Kategorien. Entferne das kategorisierte. Nehmen wir an, es handelt sich um einen aktuellen Beitrag, der auch der Produktivität dient und aktualisiert wird. Lass uns hier reingehen. Ich öffne das und das. Lass mich die anderen schließen. Also bleiben uns diese beiden übrig. Gehen wir zu den Kategorien. Entferne das. Ich sage besonders und aktuell. Und es geht auch um Produktivität. Aktualisiere das. Jetzt liegt es an Ihnen, kreative Kategorien zu erstellen. Lass uns hier reingehen, das entfernen. So kannst du dein Leben verändern. Wir können hier vielleicht eine hinzufügen, die Transformation genannt wird. Nein, das gefällt mir nicht. Wir haben es nicht richtig buchstabiert, aber ich belasse es einfach dabei. Und sagen wir, Gesundheit aktualisiert das. Da haben wir's. Also jetzt, wenn wir das schließen und diese Seite aktualisieren. Jeder Blogbeitrag gehört jetzt zu einer Kategorie. Manchmal gehören zwei Blogbeiträge derselben Kategorie an. Nun, hier ist der Grund, warum Kategorien gut sind. Wenn wir also zum Frontend gehen, klicke ich mit der Maus, um es in einem neuen Tab zu öffnen . Hier sind wir zu Hause. Schau dir jetzt die Kategorien an. Wenn ich nun mit Elementor bearbeiten sage, wurden hier keine Beiträge gefunden. Wenn ich also mit Elementor bearbeiten sage, der Grund, warum hier keine Beiträge gefunden wurden, darin, dass dieses Element die Blogbeiträge zur Anzeige aus der Kategorie „ Nicht kategorisiert Wenn ich darauf klicke und mir die Kategorien ansehe. Wenn wir das auswählen und darauf klicken wollen . Okay, vergessen wir das für eine Sekunde. Gehen wir jetzt zu diesem zurück. Wenn wir „Allgemein“ reduzieren, können wir zur Abfrage wechseln, und hier legen wir fest was angezeigt werden soll. Hier können wir zum Beispiel sagen, ja, wir werden Beiträge und Kategorienregeln anzeigen. Wir werden den Filter nach Kategorien abgleichen. Wir können sagen, welche Kategorien wir anzeigen möchten. Vielleicht möchten wir also Blogbeiträge anzeigen, die nur zur Kategorie Produktivität gehören . Jetzt werden alle Blogbeiträge angezeigt, die zu dieser Kategorie gehören . Wenn ein Blogbeitrag nicht die Kategorie Produktivität hat, wird er nicht angezeigt. Lassen Sie uns das schließen. Lass uns das entfernen und vielleicht Gesundheit wählen. Ich glaube, wir hatten ein oder zwei. Ja, wir haben zwei. Aber jetzt musst du jede Kategorie einzeln gestalten, was keinen Sinn ergibt. Dies sollte das Styling der Kategorien übernehmen , die wir bereits gestaltet Also werde ich das einfach loswerden. Wo war es? Kategorien von Beitragsoptionen sind wichtig. Zeig das nicht. Aktualisiere das. Aber wie Sie sehen, können wir jetzt die Kategorien verwenden, die wir anzeigen möchten, um bestimmte Arten von Blogbeiträgen anzuzeigen , die wir auf einer bestimmten Seite oder einem bestimmten Abschnitt haben möchten. Jetzt weiß ich immer noch nicht, warum sich das so schlecht benimmt Ich denke, es gibt ein Problem mit diesem Element, weil es genau das tun soll, was es hier getan hat In den Abfragen sollen wir in der Lage sein , bestimmte Kategorien auszuwählen. Also muss ich vor dem Ende dieses Kurses eine Lösung finden . Aber im Moment denke ich, dass wir die Lektion hier beenden und das aktualisieren werden. Wir können dasselbe für die Artikelarchivseite tun. Lass mich einfach hierher gehen und mit Elementor bearbeiten . Wenn wir das auswählen Nun, das ist ein anderes Element. Dies ist das Post-Grid von Essential Addons, und es bietet auch die Möglichkeit Ihre Abfragen in Kategorien zu unterteilen. Nehmen wir an, wir möchten nur Gesundheit anzeigen. Wähle das aus. Jetzt werden wir nur zwei Beiträge sehen, da wir nur zwei Blogbeiträge mit der Kategorie Gesundheit haben. Ich hoffe, Sie verstehen jetzt die Kategorien, damit Sie auf Ihrer Webseite alles anzeigen können, was Sie möchten. In der nächsten Lektion wollen wir uns also ansehen, wie Sie diese Off-Canvas-Funktion hinzufügen , um diese anzuzeigen. Und natürlich werden wir, wie Sie vielleicht schon vermutet haben, Kategorien verwenden Lassen Sie uns in Kürze sehen, wie das geht. 31. Off-Canvas Sidebar: Jetzt ist es also an der Zeit, einige Blogbeiträge auf unserem Off-Canvas-Wget anzuzeigen einige Blogbeiträge auf unserem Off-Canvas-Wget Also zurück zu unserem Editor hier. Ich werde diese Produktivität erhöhen. Jetzt haben wir also mehr. Lass uns das aktualisieren. Lassen Sie uns die Änderungen überprüfen, damit wir eigentlich auf diese Seite gelangen können eigentlich auf diese Seite gelangen , damit wir Header sagen können. Bearbeiten Sie den Header mit Elementor. Und hier sind wir Jetzt bearbeiten wir den Header. Wenn ich darauf klicke, sollen hier einige Blogbeiträge angezeigt werden. Um hier Inhalte anzuzeigen, sollten wir also eine Vorlage verwenden. Denken Sie daran, wie die Vorlage, die wir für die Blogbeiträge gespeichert haben. Wir können auch eine Vorlage erstellen , die wir hier anzeigen können. Wenn wir also in „Vorlage auswählen“ gehen, während diese ausgewählt ist, haben wir, wie Sie sehen können, nur eine Vorlage, und das ist die Vorlage für Blogbeiträge. Lassen Sie uns also weitermachen und eine Vorlage erstellen , die wir hier verwenden können. Ich gehe zurück nach Hause. Ich schließe hier einfach alles ab. Und ich werde einfach Beiträge herkommen. Ja, wir können einen neuen Beitrag erstellen. Also, wo wir schon mal hier sind, können wir das vielleicht Canvas-Inhalt nennen. Also gut. Also natürlich die Grundkonfigurationen hier in der Seitenleiste. Lass uns das veröffentlichen. Und dann gehen wir zum Frontend und bearbeiten es direkt dort oder erstellen es direkt dort. Und hier sind wir. Also brauchen wir nur eine Sache. Also, wenn ich darauf klicke, gehen wir zu Flexbox und wir brauchen nur eine Spalte wie diese Und wenn wir tatsächlich zurückkehren, möchte ich zu Seiten gehen und die Artikel kopieren, die ich mit Elementor bearbeitet Ich möchte das Beitragsraster der Artikel kopieren. Denken Sie daran, dass wir das noch offen haben. Also möchte ich dieses Post-Grid kopieren. Also möchte ich darauf klicken, mit der rechten Maustaste auf Kopieren klicken. Gehe zu diesem Off-Canvas-Inhalt. Lassen Sie mich das einfach löschen und gleich hier mit der rechten Maustaste auf Einfügen klicken. Jetzt, wo dies ausgewählt ist, möchte ich zunächst nur die Kategorie „Zuletzt verwendet“ auswählen. Kürzlich. Wir haben zwei Blogbeiträge. Und ich möchte auch Beiträge pro Seite erstellen , vielleicht sagen wir drei, und für das Layout nehmen wir an, wir wollen nur eine Spalte. Aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Scrollen Sie nach unten. Das haben wir also. Lassen Sie mich nun die Editoren aktualisieren, damit sie die Änderungen hier widerspiegeln, einfach so. Jetzt möchte ich rechten Maustaste auf „Als Vorlage speichern“ klicken und es „Of Canvas-Inhalt“ oder „Beiträge“ nennen . Speichern Sie das, und jetzt ist es hier. Lass uns das schließen. Lass uns wieder reingehen. Jetzt sind wir im Chefredakteur und hier sollen wir nach Vorlagen suchen. Wenn wir darauf klicken, haben wir jetzt auch Off-Canvas-Beiträge. Wenn wir das auswählen. Wenn wir jetzt darauf klicken, werden die Off-Canvas-Beiträge angezeigt. Also können wir natürlich mit diesen Einstellungen herumspielen. Wir werden nicht näher darauf eingehen, aber so fügt man die Off-Canvas-Seitenleiste hinzu Lassen Sie mich das aktualisieren und die Änderungen überprüfen. Wir klicken darauf. Da haben wir's. Also lass mich einfach auf die Startseite gehen. Das haben wir bisher vorgestellt. In Ordnung. Also im Grunde dreht sich alles um die Off-Canvas-Seitenleiste. Lassen Sie uns in der nächsten Lektion die Fußzeile erstellen, da wir, wie Sie gerade sehen können, nur so weit scrollen können Wir haben hier keine Fußzeile für all den Inhalt , der eigentlich in der Fußzeile stehen Schauen wir uns also in der nächsten Lektion an , wie das geht. Wir sehen uns in Kürze. 32. Die Fußzeile: Jetzt ist es an der Zeit, die Fußzeile zu erstellen. Wie Sie sehen können, haben wir jetzt auf unserer Referenz-Website eine schöne, einfache Fußzeile ich also zurück zu unserer Arbeitsstation gehe, lass mich das und all diese schließen, weil wir mit ihnen fertig sind Jetzt müssen wir wie gewohnt zur Header-Fußzeile von Element Skit wechseln Header-Fußzeile von Element Skit Denn denken Sie daran, hier haben wir den Header erstellt. Sagen wir also, füge neue hinzu. Fußzeile, und das sollte sich in Fußzeile ändern, gesamte Seite, das Bearbeiten von Inhalten ermöglichen Wir gehen direkt zum Frontend, um mit dem Aufbau zu beginnen. Und hier sind wir. So wie wir den Header erstellt haben, werden wir ein Foto erstellen. Ich werde darauf klicken. Dann Flexbox. Ich denke, das hat drei Spalten auf der Referenz-Website. Wo ist unsere Referenzwebsite. Ja, drei Spalten. Lass uns das wählen. Da haben wir's. Wähle das aus. ein Logo hinzuzufügen, löschen wir natürlich ein Bildelement. Klicken Sie darauf. Wählen Sie das Logo aus, wählen Sie das aus und los geht's. Als nächstes ein Absatz. Also lass uns hier reingehen, Texteditor. Lass es uns gleich da ablegen. Dann Control Shift V. Natürlich wollen wir ihm die Farbe Grau Marineblau geben. Verstanden. Kopiere es für die Farbe, Typografie, 600, einfach so Aktualisiere das. Das Maximum, das wir erstellen wollen, sind diese Links. Gehen wir und suchen uns die Links aus. Wir wollen Liste sagen. Und das ist eine Icon-Liste. Also ziehe ich die Symbolliste per Drag-and-Drop dorthin, wie Sie sehen können, und darüber befinden sich Quicklinks. Also Überschrift, Quicklinks. Sie sollten ein Alter von drei Jahren haben. Gehen wir zur Textfarbe. Ich glaube, das habe ich immer noch nicht. Kopieren. Ändere es so. Gehen wir zur Typografie. Lass uns einfach so 900 draus machen. Jetzt müssen wir dieses Anmeldeformular erstellen. Und das machen wir mit einem anderen Plug-In dem besten Plug-In für die Erstellung von WordPress-Formularen, und es heißt Forminator Ich liebe dieses Plug-In, und ich werde zurück zu unserem Dashboard wechseln Lassen Sie mich das zunächst aktualisieren. Bevor wir das tun, warum bringen wir die Sache nicht zu Ende. Gehen wir also zu mir über alle Artikel Datenschutz. Also wähle ich das aus. Sie können es hier bearbeiten. Über mich, Artikel Datenschutz. Sie können es auch hier bearbeiten. Artikel. Nutzungsbedingungen zum Datenschutz. Also werde ich diese Nutzungsbedingungen duplizieren. Ordnung. Wir haben die Änderungen nicht hierher gebracht, also über mich. Da haben wir es. In Ordnung. Also lass mich das hier einfach über mich schreiben. Da haben wir's. Und jetzt geben wir ihm natürlich einen Stil. Lass uns zur Ikone gehen. Wir wollen ihm diese rötliche Farbe geben. Kopiere das, füge es dort ein. Aber beim Schweben wollen wir, dass es dieses Marineblau ist. Auf Hover-Farbpasten. Einfach so. Dann zum Text, gehen wir zum Symbol. Lass uns zum Text gehen. Die Farbe sollte marineblau sein. Aber wenn man schwebt, sollte es so rötlich sein, einfach so Jetzt können wir diese Symbole ändern. Also zurück zum Inhalt über mich. Also vielleicht Benutzer. Artikel. Vielleicht Text. Datenschutz. Was sollen wir hier verwenden. Ich werde die Nutzungsbedingungen als Ziel verwenden. Buch, das ist ein riesiges Buch mit Nutzungsbedingungen. Datenschutz, vielleicht können wir einen Safe benutzen. In Ordnung, aktualisiere das, okay. Wie Sie sehen können, hat der Hintergrund natürlich die Farbe, die wir hier verwendet haben. Lassen Sie mich also einfach diesen Hintergrund für die Seitenleiste auswählen. Kopiere das, geh hier hin. Wählen Sie den Container, den Stil und Hintergrundtyp aus. Fügen Sie das dort ein. Lassen Sie uns auch die Rahmenfarbe wählen. Farbe des Randes. Solide. Geben wir ihm einen. Und geben wir der Rahmenfarbe Okay. Und beachten Sie auch, dass wir hier und hier unten Abstände haben. Solange diese Option noch ausgewählt ist, wechseln Sie zu Advanced Margin Top, AD oder Wait, angeblich Padding, acht und acht Aktualisiere das. Wir wollen auch einen schönen Abstand zwischen diesen Elementen haben . Solange dies noch ausgewählt ist, Layout , Lücken, sagen wir 30. Aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Da haben wir's. Also möchte ich das etwas nach unten drücken , weil es höher zu sein scheint. Also wähle ich den Behälter aus, in dem er sich befindet, und erhöhe die Polsterung oben Abstand vom Rand des Containers zum Inhalt. Aktualisiere das, schau dir die Änderungen an, so. Also, ich denke, wir werden hier für diese Lektion aufhören. Lassen Sie uns in der nächsten Lektion weitermachen und das Formator-Formular und die Social-Media-Symbole erstellen das Formator-Formular und die Social-Media-Symbole Wir sehen uns also in Kürze. 33. Anmeldeformular für eine Mailing-Liste: Und willkommen zurück. Jetzt ist es an der Zeit, das Anmeldeformular für die Mailingliste mit forminator zu erstellen Anmeldeformular für die Mailingliste mit forminator Gehen wir also zurück ins Dashboard. Ich möchte darauf klicken, um das Dashboard und das Frontend von Togo zu öffnen. Also los geht's Lass uns zu Plugins gehen und neue hinzufügen. Ich gebe Forminator so ein. Da haben wir's. Jetzt installieren. 500.000 aktive Installationen. Es ist sehr beliebt. Aktiviert. Da haben wir's. Also hier ist es, und ich ziehe das einfach nach links und gehe zu Forminator Wie Sie sehen können, haben wir hier jede Art von Formular oder Paul erstellt Unser Ziel ist es, ein Formular zu erstellen, also klicke ich auf Erstellen. Wir möchten einen Newsletter abonnieren, also klicke ich auf Weiter. Anmeldeformular, erstellen. Da haben wir's. Also hier sind wir. Wir haben zwei Felder: Vorname, E-Mail-Adresse und die Schaltfläche „ Abonnieren“. Wenn wir uns das in der Vorschau ansehen , haben wir genau das. Wenn ich das schließe, können wir sie so neu anordnen , also Seite an Seite Wenn wir eine Vorschau davon sehen. Wir können sie Seite an Seite haben. Du kannst den Inhalt auch ändern, indem du ihn anklickst und sagst „Vielleicht abschicken“. Aber jetzt ist es abonniert, weil es sich um eine Newsletter-Anmeldung Sie können jedes dieser Felder bearbeiten, indem Sie darauf klicken. Nun, wie Sie bemerkt haben, möchte ich den Vornamen nicht, also werde ich ihn löschen, löschen. Also bleiben uns die E-Mail und der Button. Einfach so. Schließ das und veröffentliche das. Ich wähle diese Kopie des Kurzcodes aus und gehe zum Frontend, wo wir unsere Fußzeile bearbeiten Ich klicke auf Plus und gib den Kurzcode ein. Und das ist ein Platzhalter für Kurzcodes. Wenn wir es also dort ablegen, wir hier ein Feld, um unseren Shortcode einzugeben. Also füge ich den Kurzcode ein. Ich habe gerade hier in diesen Bereich kopiert und jetzt wird unser Formular hier angezeigt. Also lass mich das einfach aktualisieren. Lassen Sie mich einfach auf Anwenden klicken, um die Änderungen widerzuspiegeln, die wir im Backend vorgenommen haben, und jetzt ist hier unser Formular. Natürlich müssen wir etwas daran arbeiten, es ansprechender zu gestalten. Gehen wir wieder rein. Oh, warte. Lass mich einfach zurück zum Armaturenbrett gehen. Schließ das, weil es das Armaturenbrett ist. Gehen wir zum Armaturenbrett. Gehen wir jetzt in Forminator zurück zu unserem Formular. Ich klicke auf Formulare. Wir haben zwei. Ich möchte das löschen. Das liegt daran, dass ich die Eingabetaste habe und dann beim Erstellen die Schaltfläche Erstellen gedrückt habe. Bearbeiten Sie es. Wir sind zurück bei unserem Redakteur. Der zweite Schritt hier ist das Aussehen. Ich klicke darauf und hier können wir verschiedene Voreinstellungen auswählen Wir werden dieses verwenden. Okay. Und für die Farben können wir Standardfarben, diese Farben oder benutzerdefinierte Farben verwenden . Lassen Sie uns benutzerdefiniert wählen. Schaltfläche „Senden“. Es sollte welche Farbe oder diese rötliche Farbe sein. Diese Farbe Also kopiere das. Standardfarbe einreichen. Fügen Sie das dort ein, und wenn wir es in der Vorschau anzeigen , ist es jetzt diese Farbe. Wie Sie sehen können, haben wir diese Teilränder jetzt nicht mehr. Wenn Sie mit der Maus darüber fahren, kopieren Sie das. Beim Schweben wollten wir das Marineblau haben und scharf sein. Füge es ein und aktualisiere es. Wenn wir nun zum Frontend gehen, es auswählen und anwenden, werden die Änderungen, die wir im Backend vorgenommen haben , einfach so im Frontend widergespiegelt. Aber jetzt werden Sie feststellen, es sehr schwierige Ecken gibt, wenn wir uns eine Vorschau der Änderungen ansehen. Wir können sie runder machen, wie hier. Und um das zu tun, müssen wir etwas CSS verwenden. Jetzt hat jedes Plug-In spezifische Einstellungen, die es Ihnen zur Verfügung stellt, aber nur für den Fall, dass Sie die Einstellungen, die Sie verwenden möchten, nicht sehen können . Vielleicht hat Ihnen das Plug-In diese Einstellungen nicht zur Verfügung gestellt. Dieses Plug-In bietet Ihnen normalerweise die Möglichkeit, Ihr eigenes CSS hinzuzufügen , um das Erscheinungsbild Ihrer Kreationen zu ändern. Erscheinungsbild von Forminator hat also dieses benutzerdefinierte CSS-Feld, in das wir ein paar Codezeilen in CSS hinzufügen können , um zu beeinflussen, wie das Also, hier unten können wir den Eingabeselektor verwenden. Das ist ein Eingabefeld. Wir können also den Eingabeselektor verwenden. Wenn wir darauf klicken, wird es automatisch ausgefüllt. Und hier können wir sagen, Grenzradius fünf Spitzenzellen, Grenzradius fünf Spitzenzellen, und wenn wir uns Jetzt sind es fünf Spitzenzellen. Wenn wir 50 Spitzenzellen sagen, wird das Ganze supergerundet. Gehen wir zurück zu 50. Wir können dasselbe für die Schaltfläche tun, aber das Problem ist, dass wir hier keinen Selektor für die Schaltfläche haben hier keinen Selektor für die Schaltfläche Lassen Sie mich das zunächst aktualisieren und dann gehen wir hier hin, wählen Sie das aus und bewerben Sie sich dann Wenn wir jetzt eine Vorschau der Änderungen ansehen, hat das natürlich abgerundete Ecken, aber das müssen wir für die Schaltfläche tun. Um also den Selektor für die Schaltfläche zu finden, klicken wir mit der rechten Maustaste auf dieses Element und gehen wir zur Inspektion Lassen Sie mich das erweitern. Wenn wir dieses Symbol genau hier auswählen, wir in den Modus zur vollständigen Elementauswahl und können ein bestimmtes Element auswählen. Wenn ich zum Beispiel diese Schaltfläche auswähle, kann ich mir jetzt die Option Lass mich das einfach ziehen ansehen. Jetzt kann ich mir den Namen dieses Elements ansehen, das ich mit diesem Symbol ausgewählt habe. Wie Sie sehen können, haben wir hier unten eine Punkt-Formulator-Schaltfläche zum Abschicken, und das ist der Selektor also wieder reingehe, füge ich die Schaltfläche „Absenden“, geschweiften Klammern, die Eingabetaste, den Bestellradius und ebenfalls fünf Pixel fünf Lassen Sie uns eine Vorschau davon sehen. Und jetzt hat es diese abgerundeten Ecken. Lassen Sie uns natürlich die Breite von links nach rechts auf 100% des verfügbaren Platzes erhöhen die Breite von links nach rechts auf 100% , also auf 100%, einfach so. Aktualisiere das. Wenn wir nun zum Frontend gehen und dies auswählen, dann anwenden und dann eine Vorschau der Änderungen anzeigen. Da haben wir's. Also lass mich das schließen und jetzt ist das ein wunderschöner Fooder Also ich denke, wir werden diese Lektion hier beenden. Lassen Sie uns in der nächsten Lektion diese sozialen Symbole unter dem Anmeldeformular hinzufügen . Wir sehen uns in Kürze. 34. Soziale Symbole hinzufügen: Es ist an der Zeit, die sozialen Symbole hinzuzufügen, diese sozialen Symbole, und ich hatte sie auf meiner Referenzwebsite nicht besonders gut gestaltet . Sie sind dem zu nahe. Aber wie dem auch sei, wir wechseln zu unserem Arbeitsplatz hier. Gehen wir zurück zu unserem Redakteur. Hier sind wir. Ich würde sagen, fortgeschritten, und gehen wir zur Marge und reduzieren diese untere Marge, weil sie einfach zu viel Platz beansprucht. Gehen wir jetzt rein und geben Social ein. Und wir wollen die Social Icons von Elements Kit verwenden. Also ziehe ich sie dorthin und lege sie dort ab, und los geht's. Fortgeschritten, ich möchte zur Marge wechseln und die obere Marge auf zehn erhöhen. Und lassen Sie uns die Änderungen überprüfen. Da haben wir's. Jetzt möchte ich nur die Symbole selbst im Inneren so ändern , dass sie beim Schweben weiß sind. Ich mag Schwarz nicht Also geh wieder rein, solange das noch ausgewählt ist, gehe zum Inhalt, Facebook auf Hover Die Farbe muss einfach weiß sein. Lass uns dasselbe für Twitter tun. Farbe beim Schweben, weiß. Und lass uns zu Link in Over White gehen. Jetzt können Sie natürlich Ihren Link hier angeben , um zur jeweiligen Social-Media-Plattform zu gelangen . Sie sollten Linkedin sein und Sie können wählen, ob Sie sie in einem neuen Tab öffnen möchten. Sie können auch weitere soziale Symbole hinzufügen, wenn Sie möchten, und dann hier nach ihnen suchen. Sagen wir vielleicht YouTube. Ich klicke auf YouTube Insert. Jetzt sind wir da. Wir können diesen Namen in YouTube ändern und ihn in Weiß ändern. Sehen wir uns die Änderungen an. Da haben wir's. Natürlich verwenden diese jetzt die offiziellen Markenfarben auf dem Hover, also machen wir dasselbe für YouTube Wenn Sie mit der Maus darüber fahren, muss die Hintergrundfarbe rot sein. Aktualisiere das, und jetzt ist es so rot. Lassen Sie uns die Änderungen überprüfen. Eine Sache, die Sie sich jetzt vielleicht fragen, ist, Sie diesen Link zum Bearbeitungsformular hier weiterhin sehen werden? Und die Antwort ist, dass Benutzer dies nicht sehen werden, weil sie nicht in Ihrem Dashboard angemeldet sind. Wenn Sie abgemeldet sind, wird Ihnen dieses Bearbeitungsformular nicht angezeigt. Sie werden es nur sehen, wenn Sie als Eigentümer der Herausgeber sind. Benutzer werden dies also nicht sehen können. So fügen Sie also die sozialen Symbole hinzu. Wir sind fast fertig, aber bevor wir die Website responsiv machen, wollen wir die Kontaktseite erstellen. Also, wenn ich hier klicke, um zur Kontaktseite zu gelangen. So sieht die Kontaktseite aus. Schauen wir uns also in der nächsten Lektion an, wie man sie erstellt . Wir sehen uns in Kürze. 35. Kontakt-Seite: I. Jetzt ist es an der Zeit, die Kontaktseite zu erstellen, und so sieht sie aus. Gehen wir also zurück zu dem, von wo aus wir arbeiten, gehen wir hier rein. Bevor wir zu diesem Ort gehen, machen wir das anklickbar. Ich wähle das aus Gehe zum Inhaltslink, zur benutzerdefinierten URL, und ich möchte, dass sie nach Hause zeigt. Also wähle ich meine Privatadresse aus und aktualisiere sie dann. Sehen wir uns eine Vorschau der Änderungen an. Und jetzt kann ich darauf klicken , um nach Hause zu gehen. Da haben wir's. Oh, warte. Eins noch. Wir müssen einen gewissen Abstand zwischen der Fußzeile und diesem Inhalt hinzufügen zwischen der Fußzeile und diesem Inhalt Also muss ich die Seite selbst bearbeiten, nicht das Essen, die Seite. Also sage ich mit Elementor bearbeiten. Da haben wir's. Und weil wir diesen Container haben der all diesen Inhalt enthält, wähle ich den Container selbst aus. Erweiterter Rand unten. Geben wir ihm 100. Aktualisiere das. Sehen wir uns jetzt eine Vorschau der Änderungen an. Scrollen Sie nach unten. Da haben wir's. Ein netter Abstand zwischen dem Inhalt und dem Ordner. Gehen wir jetzt zur Kontaktseite, und so sieht sie standardmäßig aus. Gehen wir zur Bearbeitungsseite, um einige Konfigurationen vorzunehmen. Lassen Sie uns die Standardvorlage in „Element mit voller Breite“ ändern . Gehen wir hier rein und sagen voll ohne Seitenleiste. Lasst uns diese drei Updates schließen. Lassen Sie uns jetzt mit Elementor bearbeiten. Ich werde das schließen und das auch. Das ist okay. Lass es uns dabei belassen. Das ist unser Kontakteditor. Schauen wir uns das an. In Ordnung. Lassen Sie uns eine solche Doppelspalte erstellen. Jetzt werden es 30% sein und das werden 70% sein. Ich klicke darauf und den Platzhalter für den Kurzcode. Weil wir hier ein mit Formulator erstelltes Formular ablegen möchten hier ein mit Formulator erstelltes Gehen wir zum Formulator und sagen wir Formulare. Erstellen. Wir haben bereits das Anmeldeformular. Jetzt ist es das Kontaktformular. Lassen Sie mich einfach diese Vorlage verwenden. Fahren Sie fort. Kontakt für Create. Da haben wir's. Es hat vier Felder. Ich benötige die Telefonnummer von niemandem, also lösche ich sie. Jetzt haben wir den Vornamen, die E-Mail und ihre Nachricht. Diese beiden sind Eingabefelder, und dies ist ein Bereich, ein mehrzeiliger Textbereich Dies ist ein einzeiliges Eingabefeld. Das, veröffentlichen. Lass uns den Shortcode kopieren. Und jetzt, wo wir dieses Kurzcode-Element haben, lassen Sie uns das Formular dort ablegen. Jetzt ist es Display, aktualisiere das. Lasst uns auch hier oben etwas Platz schaffen. Wählen Sie den Behälter aus , der das enthält. Mach das kaputt und lass uns vielleicht 50 geben. Sagen wir 60. Aktualisiere das. Als Nächstes müssen wir dieses Erscheinungsbild ändern. Wir wollen zu Aussehen gehen, flach, und dann gehen wir zu benutzerdefinierten Farben. Im Moment, wo es flach ist, hat es also keine harten Kanten. Aber was die Farben angeht, der Absenden-Button auch die Farben haben, die wir beim letzten Mal verwendet haben Kopieren Sie also standardmäßig diese rötliche Farbe und fügen Sie sie so ein . Wenn Sie mit der Maus darüber fahren, wollen wir, dass es dieses Marineblau ist Schweben kopieren, da liegen und das machen wir Aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Beim Schwebeflug. Das ist okay. Gehen wir nun zum Frontend, während dieses ausgewählt ist, bewerben wir uns. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Da haben wir's. Lassen Sie uns nun die Pot-Marge für diesen Container erhöhen. Also 100. Aktualisiere das. Sehen wir uns eine Vorschau der Änderungen an. Einfach so. Jetzt ist es gut in der Mitte ausgerichtet. Als Nächstes, warum machen wir sie nicht abgerundet? Das sind Eingabefelder, denken Sie daran, und das ist ein Textbereich. Wenn wir also wieder rein gehen und bis zu den benutzerdefinierten Einstellungen scrollen, haben wir eine Eingabefeldauswahl und eine Textbereichsauswahl für alle Eingabefelder Wir möchten also, dass der Randradius fünf Pixel beträgt, nicht 50. Und wenn wir uns das in der Vorschau ansehen, werden die beiden Eingabefelder abgerundet. Lassen Sie uns das nun für den Textbereich tun. Der Textbereich-Selektor. Fünf Spitzenzellen. Da haben wir's. Minator Button Submit ist Und ich erinnere mich, dass der Button Selector für Minator Button Submit ist. Ich weiß das, weil ich es so oft benutzt habe . Ich erinnere mich daran. Ich wollte dir nur zeigen, wie man es vom Frontend bekommt, als wir das Anmeldeformular erstellt haben. In den meisten Fällen wird es immer Formminator-Button bleiben, Lassen Sie uns dasselbe wiederholen. Fünf Spitzenzellen. Da haben wir's. In Ordnung. Also, für die Breite geben wir ihr natürlich 100%. Lassen Sie uns das überprüfen. Da haben wir's. Aktualisiere das. Lassen Sie uns dies auswählen und die Änderungen übernehmen. Lassen Sie uns dann die Änderungen am Frontend überprüfen und los geht's. Jetzt werden Sie natürlich feststellen, dass wir diese Seitenleiste haben. Aber wir hatten das kleine Problem , dass nicht von dort entfernt wurden , wo sie eigentlich hingehören. Mal sehen, was passieren wird. Wenn wir also auf einem neuen Tab mit dem mittleren Mausrad auf die Startseite gehen und diese öffnen, möchte ich mit Elementor oder Canvas-Inhalt bearbeiten Was ist das? Ich möchte hier scrollen. Warum haben wir das? Oh, ja. Nachdem wir das aktualisiert haben, können wir jetzt die Kategorien eingeben . Das ist großartig. Sagen wir jetzt Produktivität. Entferne diese Kategorie. Und lassen Sie uns die Produktivität direkt auf der Startseite anzeigen . Dann lassen Sie mich jetzt diese Rechtsklick-Kopie auswählen. Lass uns hier reingehen. Wählen Sie diese Option mit der rechten Maustaste auf Einfügen. Ordnung. Nun, lassen Sie mich das hier schließen und was sollen wir jetzt hier wählen? Kürzlich, sagen wir, vorgestellt. Im Bereich „Vorgestellt“ haben wir nur einen. Wir können das sicherstellen, indem wir hier Beiträge reingehen. Ich möchte, dass mehr dieser Beiträge in der Kategorie Ausgewählte Beiträge erscheinen, also bearbeite ich jeden einzelnen schnell. Schnelle Bearbeitung. Sie sollten auch in der Funktion enthalten sein, ebenfalls aktualisieren, schnelle Bearbeitung, Featured Update das. Endlich ein ziemliches Update. Okay. In Ordnung. Also jetzt, wenn wir das aktualisieren. Und lassen Sie mich das einfach auswählen und anwenden damit alle Änderungen vom Backend aus übernommen werden können . Da haben wir's. Jetzt haben wir also immer noch drei. Ordnung. Also, nach dem Limit sollten wir vier haben. Jetzt benimmt man sich schlecht. Das gleiche Verhalten habe ich mich vorhin schlecht benommen . In Ordnung Also ich glaube nicht, dass ich weiterhin darum kämpfen werde , eine Lösung dafür zu finden. Aber wahrscheinlich kann ich hier nach all den anderen Lektionen eine zusätzliche Lektion hinzufügen . Sobald ich meine Fehlerbehebung durchgeführt und eine Lösung dafür gefunden habe. Also mach dir keine Sorgen, zumindest weißt du, wie du so weit kommst. Lassen Sie uns also noch einmal eine Vorschau der Änderungen anzeigen. Jetzt brauchen wir hier etwas Abstand. Lassen Sie uns also den Abstand vergrößern und diesen Abstand 30 wählen. Lassen Sie uns das aktualisieren. Sehen Sie sich eine Vorschau der Änderungen an. Da haben wir's. Im Grunde war das alles, was ich in diesem Kurs für dich hatte. Wenn ich dafür eine Lösung finde, werde ich sie teilen. Wenn nicht, werde ich eine andere Möglichkeit finden diese aktuellen Artikel anzuzeigen. Also mach dir keine Sorgen. Du wirst es irgendwo in der Liste der Lektionen finden, ich glaube, am Ende, als Bonusstunde. Wir sehen uns also in der nächsten Lektion wo wir den responsiven Header erstellen werden. Gehen Sie also nicht zu weit. 36. Aktuelle Beiträge in der Sidebar anzeigen: Ich habe eine kurze Pause von der Aufzeichnung dieser Lektionen eingelegt, und als ich zurückkam, war mein Geist frisch und ich fand eine Lösung , wie ich diese letzten Artikel anzeigen Deshalb möchte ich Ihnen zeigen, wie das geht. Also gehen wir zurück zum Herausgeber, und ich habe geübt, und das ist es, was ich mir ausgedacht habe. Ich denke, es sieht viel besser als auf die Startseite zu gehen. Okay. Und sieh dir das Original an. Das ist das Original. Und wenn ich auf die Referenzwebsite gehe, haben wir das auf der Referenzwebsite. Es sieht auch immer noch gut aus. Es sieht toll aus, aber wir werden tatsächlich weniger arbeiten als ich, als ich das gemacht habe. Im Moment werden wir, während wir die neuen neuesten Beiträge erstellen, weniger Arbeit leisten, als wir es getan hätten. Also, das hier ist ein Blogbeitrag, Element für Element Kit. Also werde ich einfach eingeben Lass mich das einfach entfernen. Und hier gebe ich Blog ein. Da wir also Elements Kit installiert haben, gibt es dieses Blog-Beitrags-Element. Ziehen Sie es also per Drag & Drop direkt unter diese Überschrift. Und es wird mit all dem kommen. Das sieht gruselig aus. Sie fragen sich vielleicht, wie wir das bearbeiten werden. Aber mach dir keine Sorgen. also zunächst Lassen Sie uns also zunächst Inhalte anzeigen und nein sagen. Also zeigen wir diesen Auszug nicht. Zweitens wollen wir zum Stil übergehen. Lassen Sie uns den Wrapper zusammenklappen und zum Titel gehen und die Typografie, den Text des Titels, reduzieren den Text des Lassen Sie mich das einfach ziehen. Lass es mich vorerst einfach dabei belassen. Wir werden damit herumspielen. Aber wie Sie sehen können, passt es jetzt zumindest in einen kleineren Raum. Die andere Sache ist, wenn wir uns die Liste der Beiträge ansehen, die wir erstellt haben, denken Sie daran, dass wir diesen Off-Canvas-Inhalt erstellt haben, damit wir ihn direkt hier an der Seite zeigen können. Also haben wir ihn als Beitrag erstellt und er befindet sich derzeit in der Kategorie Nicht kategorisiert. Deshalb wird es hier angezeigt. Denn wenn wir das auswählen und zum Layout „ Inhalt reduzieren“ und dann zur Abfrage gehen. Sie sehen, dass Uncategorized in der Liste der anzuzeigenden Beiträge enthalten ist. Lassen Sie uns also Unkategorisiert entfernen. Schauen wir uns auch Featured an. Lassen Sie mich das sogar einfach entfernen , weil es kategorisiert ist. Es sollte so bleiben, wie es vorgestellt wird. Ordnung. Also gehen wir wieder rein, lassen Sie uns auch das Featured entfernen. Hier ist vorgestellt. Lass uns das entfernen. Und das bedeutet, dass der Off-Canvas-Beitrag hier nicht angezeigt wird, da wir keine ausgewählten Beiträge anzeigen. Als Nächstes wollen wir zu den Metadaten gehen. Mal sehen, ob wir hier etwas ändern können. Nein, Grundriss. Also wenn wir hier reingehen, werden wir hier ein paar Änderungen vornehmen. Lassen Sie uns also zunächst die Polsterung auf diesem Hintergrund, dieser Box, durchbrechen die Polsterung auf diesem Hintergrund, dieser Box, . Das ist die Verpackung Also die Polsterung des Containers. Lassen Sie uns den Rand der Behälter oben vergrößern , um sie voneinander abzugrenzen Also der Rand des Containers. Lassen Sie uns das durchbrechen und dann den oberen Rand vergrößern , um sie abzugrenzen. 15 ist okay. Dann erhöhen wir auch die obere Polsterung. Bis zu 15 und auch die untere Polsterung 15. Denn denken Sie daran, wir versuchen zu erreichen, wie Sie in meinem Beispiel gesehen haben, dass dies etwas verschoben wurde Lassen Sie mich den Wrapper verkleinern und das Beitragsbild erweitern. Lass uns nach links links gehen. Lassen Sie uns das reduzieren, um es ein bisschen nach links zu verschieben . Aber lassen Sie uns diesen Behälter auswählen, der sie enthält. Brechen Sie auch die Marge. Verkleinern Sie den Rand auf der rechten Seite leicht, weil wir diesen Abstand mit diesem Abstand zum Bild ausgleichen wollen , nicht mit dem weißen Hintergrund selbst. Ordnung. Also, solange es noch ausgewählt ist, gehen wir zurück ins Innere des Stils. Gehen wir zum Titel. Marge. Erhöhen wir die Marge oben. Geben wir zehn und reduzieren wir den Rand auf der linken Seite. Gehen wir zurück zu Rapper. Erhöhen wir die Polsterung auf der rechten Seite, um sie auf diese Seite zu schieben , um mehr Platz zu schaffen. Aber lassen Sie uns auch den Rapper zusammenklappen , um den Titel zu vergrößern Titel-Typografie. Ich klicke hier rein und benutze die AP-Taste auf meiner Tastatur, um den Wert schrittweise zu erhöhen Ich denke, das ist eine gute Größe. Dann erhöhe ich auch die Zeilenhöhe mit meinem Tastaturpfeil. Ich denke, das ist eine gute Größe. Nehmen wir an, 16 gehen jetzt zurück in den Wrapper, lassen Sie uns das tatsächlich reduzieren, es ist wieder da drin lassen Sie uns das tatsächlich reduzieren, , Titel, oberer Rand Lassen Sie uns das bis zu diesem Punkt reduzieren. Gehen wir also zurück zum Inhalt, wie Sie jetzt sehen können, zeige ich nur drei Artikel, aber wenn wir die Suchanfrage öffnen, haben wir die Anzahl der Beiträge. Wir können das vielleicht auf sechs erhöhen und dann werden sechs hier angezeigt. Natürlich sind einige Titel länger als die anderen, weshalb sie nicht so ausgewogen sind. Ich denke, es liegt an Ihnen, mit der Benennung Ihrer Artikel herumzuspielen , damit sie was die Wortlänge angeht, ungefähr gleich groß sind, sodass sie einheitlich aussehen, wie die ersten drei. Wenn wir also diese beiden entfernen, die über das Bild hinausragen, machen wir diese drei Und das sieht jetzt gut aus. Lassen Sie mich also Update sagen, und lassen Sie uns eine Vorschau der Änderungen anzeigen. Also los geht's. Ich finde das sieht toll aus. Und wenn Sie auf einen von ihnen klicken, wird der Artikel natürlich geöffnet, sodass Sie ihn lesen können da Sie die Schlacke hier sehen können Gehen wir also wieder rein. Ich glaube, das hatte Ja, wir hatten diesen Blogbeitrag bereits erstellt, und ich glaube, wir haben vergessen, unserer Vorlage einen schönen Rand hinzuzufügen . Und jedes Mal, wenn wir die Vorlage zu einem Blogbeitrag hinzufügen , um ihn zu erstellen, wird dieser Platz immer nicht genau hier sein. Lassen Sie uns das also sehr schnell bearbeiten, bevor wir das hier verlassen. Ordnung, also wähle ich diesen Container aus, der alles enthält. In ihm ist alles bis zu diesem Ort verstaut. Ich gehe zu Advanced-Margin Bottom 100. Aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Scrollen Sie ganz nach unten. Jetzt haben wir einen schönen Abstand. Und jetzt, da wir diesen aktualisierten Blogbeitrag haben, müssen wir die alte Vorlage loswerden und diese neue speichern. Solange dies ausgewählt ist, werde ich die Vorlage mit der rechten Maustaste speichern. Neue Vorlage für Blogbeiträge, Enter. Und lassen Sie uns die alte Vorlage für Blogbeiträge löschen. Lösche das. Wenn Sie es löschen, werden die Blogbeiträge, in denen es verwendet wird, nicht gelöscht . In Ordnung. Jetzt, wo ich wieder rein gehe, möchte ich auf die Startseite gehen. Und ich möchte dies durch die neue Seitenleiste für aktuelle Artikel ersetzen , die wir erstellt haben. Also bearbeite mit Element. Scrollen wir bis hierher und dann entferne ich das. Geh wieder rein. Klicken Sie auf diesen Container, klicken Sie mit der rechten Maustaste auf Kopieren. Geh wieder rein. Wählen Sie diesen Container aus und klicken Sie mit der rechten Maustaste auf Einfügen. Also ist es dort eingefügt. Jetzt können wir das auswählen und sagen, vielleicht wollen wir eine interne Abfrage machen, wir wollen nur die Produktivität anzeigen Also werde ich die anderen loswerden. Und jetzt bleiben uns nur noch Beiträge zur Produktivität übrig. Ich kann das Produktivitätsartikel nennen. Wählen Sie Stil, Typografie, Abwärtspfeiltaste auf der Tastatur, um die Größe zu reduzieren, aktualisieren Lassen Sie uns die Änderungen überprüfen. Scrollen Sie nach unten. Das gefällt mir Das sieht also toll aus. In der nächsten Lektion möchte ich, dass wir weitermachen. Wenn wir auf unsere Referenzwebsite gehen, haben wir natürlich, wie Sie sehen können, dieses Anmeldeformular. Wir hatten bereits ein anderes Anmeldeformular hier unten, aber wir haben noch eines hier. Ich möchte Ihnen in der nächsten Lektion zeigen, wie Sie das erstellen können. Gehen Sie also nicht zu weit. Wir sehen uns in Kürze. 37. Abschnitt zur Registrierung auf der Startseite: Jetzt ist es an der Zeit, dieses Formular oder diesen Abschnitt zur Anmeldung für meine Mailingliste zu erstellen . Also zurück zu unserem Arbeitsbereich, hier sind wir. Während wir noch an der Startseite arbeiten. Es ist sehr einfach, diesen Abschnitt hinzuzufügen. Zuallererst wähle ich diese Rechtsklick-Kopie aus. Wählen Sie diesen Container hier aus und klicken Sie mit der rechten Maustaste auf Einfügen. Jetzt haben wir ihn dort eingefügt, und lassen Sie uns das loswerden Jetzt nehme ich natürlich nur einen Shortcode. Und wirf es da rein. Und denken Sie daran, wir haben bereits ein Anmeldeformular erstellt. Wir müssen uns also nur den Kurzcode vom Backend holen. Also gehen wir wieder rein, Forminator-Formulare. Und wir haben ein Anmeldeformular. Wir müssen es nicht öffnen. Wir müssen nicht zur Bearbeitung gehen. Wir können auf dieses Zahnrad klicken, den Kurzcode kopieren und wieder hier reingehen Fügen Sie den Kurzcode dort und da ist unser Formular Jetzt müssen wir es nur noch so stylen, dass es so aussieht. Lassen Sie mich zunächst diese Kopie nehmen, diese auswählen, hier doppelklicken und einfügen. Holen Sie sich die neuesten Artikel, kopieren Sie das. Ich möchte mir einen Texteditor schnappen und ihn dort ablegen. In Ordnung. Ich doppelklicke da rein und drücke dann Shift V , um den Text dort einzufügen. Wählen Sie aus. Solange dies noch ausgewählt ist, gehe ich zu „Erweitert“ und unterbreche dort den Link. Dann Rand unten. Reduzieren wir es bis zu diesem Punkt. Wählen Sie diese Option, vergrößern Sie die Größe der Typografie. Bis zu dieser Stelle. Lass es mich auf vielleicht 40 reduzieren. Aktualisiere das. Ich möchte meine Farbe hier holen, Marineblau. Nein, es sollte übrigens weiß sein. Ja, dieser Text sollte weiß sein. Lassen Sie uns also zunächst den Hintergrund marineblau machen. Wählen Sie also diese Farbpaste im Containerstil aus. Wählen Sie die Texte aus, Weiße wählen diese Texte aus. Weiß, aktualisieren. Tatsächlich müssen wir hier oben etwas Abstand hinzufügen, solange es noch ausgewählt ist, zu „Erweitert“ gehen, das entfernen, damit wir einzelne Zellen bearbeiten können, oberer Rand, vielleicht bis zu dieser Stelle, und übrigens, wir haben vergessen, auch den Abstand zwischen diesen beiden zu vergrößern . Also wähle ich den Container aus , der die beiden Container enthält, und gehe zum Layout. Sagen wir 30. Jetzt haben wir dort einen schönen Abstand. Ich muss die Größe bis zu dieser Stelle reduzieren. Solange das noch ausgewählt ist. Lassen Sie uns natürlich zunächst die Änderungen speichern und eine Vorschau anzeigen. unten scrollen. Ich mag es Aber ich möchte es sehen, während ich ausgeloggt bin. Lass mich das kopieren. Drücken Sie dann Shift, um ein Inkognito-Fenster zu öffnen. Dann füge ich die URL dort ein, um sie als Gast anzusehen. Scrollen Sie nach unten. Ja, also wir haben hier zu viel Platz. Lassen Sie uns weitermachen und das reduzieren, indem wir dieses untere Margenniveau es auf vielleicht 15, minus 15, reduzieren. Lass mich hierher gehen und mich auffrischen. Jetzt haben wir hier und hier oben ein ausgewogenes Platzangebot. An den Seiten können wir also auch die Polsterung erhöhen. Sagen wir, links und rechts brauchen wir. T. Aktualisiere das. Sehen wir uns eine Vorschau der Änderungen an. Genau. Da haben wir's. So fügen Sie den Anmeldebereich zu unserer Homepage hinzu. Benutzer können dies tun, während Benutzer nach unten scrollen und die Artikel, die sie sich ansehen, bereits mit „Gefällt Sie erhalten dieses Formular und werden aufgefordert, sich zu registrieren In diesem Moment ist es sehr einfach, sie dazu zu bringen, sich anzumelden, weil sie den Vorteil einer Registrierung sehen können Als Nächstes möchte ich die Farbe dieser E-Mail-Adresse ändern. Aber wenn wir das tun, machen wir es weiß, weil wir dasselbe Anmeldeformular verwenden, es wird auch hier weiß sein weil es dasselbe Anmeldeformular ist. Wenn wir die Farbe des Labels hier, E-Mail-Adresse, weiß machen des Labels hier, E-Mail-Adresse, weiß und es dunkelgrau lassen wollen, dann müssen wir ein weiteres Anmeldeformular erstellen , das so aussieht. Gehen wir also wieder rein. Anmeldeformular, Zahnrad. Wir können die Kopie des Anmeldeformulars duplizieren. Also möchte ich das bearbeiten. Lassen Sie uns dies in ein Anmeldeformular auf der Seite ändern. Aktualisiere das. Gehen wir zu Aussehen, Farben, Feldgrundlagen und Bezeichnung. Wir möchten, dass das Etikett weiß ist. Wenn wir das in der Vorschau sehen, ist das Etikett jetzt weiß Deshalb können wir es nicht sehen, weil der Hintergrund hier weiß ist. Update. Gehen wir jetzt wieder rein und wählen das Formular aus, dann klicken wir auf Anwenden. Die Änderungen werden sich nun auf dieses spezielle Formular auswirken. Scrollen Sie nach unten, lassen Sie mich aktualisieren. Was passiert? Kontrolliere Kunst. Ich weiß nicht, warum es nicht ist Oh, warte. Wir verwenden immer noch den gleichen Shortcode. Aber hier hat das einen anderen Shortcode. Lassen Sie mich diesen Kurzcode kopieren. Geh wieder rein und füge den neuen Kurzcode ein. Wie Sie sehen können, wurde er von 3809 auf 4809 geändert. Also jetzt ist das weiß. Aktualisiere das, schau dir die Änderungen an. Jetzt ist es weiß und hier unten ist es immer noch grau, weil es sich um zwei verschiedene Anmeldeformulare handelt , die identisch aussehen. Ich hoffe, du verstehst den Unterschied. So fügen Sie im Grunde das Abonnement - oder Anmeldeformular für die Startseite hinzu. Lassen Sie uns in der nächsten Lektion den responsiven Header erstellen. Lassen Sie uns diesen Header auf verschiedenen Gerätegrößen responsiv machen . Auf Desktop-Bildschirmen sieht er bereits gut aus. Lassen Sie uns jetzt dafür sorgen, dass es auf Tablets und Mobiltelefonen gut aussieht. Also werde ich dich in Kürze sehen. 38. Responsive Header: Es ist Zeit, die Website responsiv zu machen und wir beginnen mit dem Header. wir also mit Bevor wir also mit der Arbeit an der Reaktionsfähigkeit beginnen, schauen wir uns an, wie sie auf verschiedenen Geräten aussieht Also Strg Shift, um die Entwicklungstools aufzurufen, also Strg Shift auf meiner Tastatur Lass uns weitermachen und auf diesen responsiven Schalter klicken Wenn ich darauf klicke, können wir zwischen normaler Ansicht und Gerätesimulationen wechseln normaler Ansicht und Gerätesimulationen Und hier oben in diesem Drop-down-Menü können wir verschiedene Gerätetypen simulieren Wir können es uns von einem iPhone 14 max aus ansehen. So sieht es aus. Schauen wir es uns auf einem iPad mini an. So sieht es aus. Also hier sieht der Header auf einem iPad mini nicht sehr gut aus. Gehen wir in der Tat zum Inkognito-Fenster. Wo ist mein Inkognito-Fenster? Hier ist es Ich möchte, dass wir ausgeloggt werden, denn wenn Sie angemeldet sind, haben wir diese gut gedrückte Leiste, die uns daran hindert zu sehen, woran wir gerade arbeiten Also, ich gehe zum Inkognito-Fenster, Control-Shift, so sieht es Gehen wir also zurück zum iPhone 12. So sieht es aus. Fangen wir also mit dem Header an. Schließ das zusammen mit dem, weil wir damit fertig sind, all das. Um mit dem Elements-Kit-Header zu beginnen, gehen wir zu Elements-Kits Ich klicke hier auf Mit Elementor bearbeiten klicke mit der rechten Maustaste auf Link in neuem Tab öffnen Und hier sind wir. Wenn ich es auswähle, können wir in den Reaktionsmodus wechseln Klicken Sie also auf das Symbol, die verschiedenen Modi anzuzeigen. Auf dem Desktop sieht es schon gut aus, also wechseln wir zu Tablets. Nun, so sieht es auf dem Tablet in unserem Editor aus. Also können wir den Knopf genau dort lassen. Aber jetzt möchte ich, dass wir diesen Menüpunkt auswählen. Okay. Lass mich draußen auswählen. Es ist etwas schwierig, es auszuwählen, also drücke ich die Strg-Taste, um den Navigator aufzurufen. Okay. Und ja, es ist tatsächlich ausgewählt. Ich möchte zu Advanced wechseln und dann diese Einstellungen entfernen, die wir für den Desktop festgelegt haben. Wie Sie sehen, sind sie abgestuft, aber wenn wir zum Desktop wechseln, sind sie jetzt aktiv, weil wir den Desktop bearbeiten Wenn wir zum Tablet wechseln, werden sie abgestuft, um uns mitzuteilen, dass dies nicht die Einstellungen für das Tablet sind . Ich mache das kaputt Das ist wie das Zurücksetzen, und ich finde, das sieht gut aus . Aktualisiere das Und jetzt gehen wir zu diesem Inkognito-Fenster und aktualisieren es. Lass uns zum iPad Mini wechseln, und so sieht es Aber das sieht auf einem iPad mini komisch aus. Also lass mich das schließen. Und so sieht das Menü auf einem iPad Mini aus. Ich gehe wieder rein. Lass uns weitermachen und unser Logo hier hinzufügen. Gehen Sie also zum Inhalt, Einstellungen für das mobile Menü und zum Logo für das mobile Menü. Lassen Sie uns das Logo auswählen und dort einfügen, aktualisieren. Wenn wir jetzt das Menü öffnen, sieht es gut aus. Aber wir können einen Rand auf der linken Seite hinzufügen, also Stil, Menü-Wrapper zusammenklappen, Logo des mobilen Menüs, Rand, das unterbrechen Lass es uns noch einmal öffnen. Rand rechts links. Drücken wir es ein bisschen nach innen. Aktualisiere das Wir können auch die Breite erhöhen , um sie zu vergrößern, das aktualisieren. Ich glaube, ich mag es bis jetzt. Wechseln wir zur mobilen Ansicht. Und so sieht es auf dem Handy aus. Im Moment macht dieser Container mit dem Logo 25% aus, während wir hier sind Aber wenn wir zur mobilen Ansicht wechseln, nimmt er von links nach rechts 100% Wir wollten einen Anteil von 25 bis 50% erreichen. Also wählst du den Schalter hier auf Prozent und dann auf 50%. Und dieser mobile Container sollte auch 50% ausmachen. Einfach so. Dann können wir den Knopf genau dort lassen. Aktualisieren. Lassen Sie uns hier keine Vorschau der Änderungen anzeigen. Lass uns hier wechseln. Inkognito-Fenster aktualisieren Lass uns zum iPhone 12 wechseln. Mach dir darüber keine Sorgen. Das liegt am Text und Inhalt. Deshalb wird alles nach links geschoben. Aber wie Sie sehen können, sind sie gut strukturiert. In Ordnung, jetzt sieht das viel besser aus. Kann es schließen. Wenn ich das Menü öffne , sind die Menüs so. Lassen Sie uns das mobile Menü vergrößern . Lass uns das öffnen. zum mobilen Menü-Logo Mit Update zum mobilen Menü-Logo gehen? Vorschau? Nein. bin ich gewöhnt. Also erfrischen Sie sich. Lass es uns jetzt öffnen. Das Logo ist gut. Jetzt ist alles nach links geschoben, weil wie Sie sehen können, das H hier zu breit ist. Die Linie sollte also bis irgendwo hier sein. sollte alles perfekt passen Ohne diesen weißen Raum sollte alles perfekt passen. Also gehen wir wieder rein und bestätigen, dass alles andere in Ordnung aussieht, bevor wir es hinter uns lassen. Ich denke, wir haben jetzt auf allen Geräten einen gut aussehenden Header. Ja, auf allen Geräten sieht der Header gut aus. So können Sie den Header auf verschiedenen Gerätegrößen ansprechend machen . In der nächsten Lektion sehen wir uns an, wie Sie dasselbe für die Startseite und ihren gesamten Inhalt tun die Startseite und ihren gesamten Inhalt bevor wir zum Ordner übergehen. Wir sehen uns also in Kürze. 39. Responsive Seiten: Jetzt ist es also an der Zeit, die Landingpage responsiv zu machen. Also weil wir mit dem Header fertig sind. Ich werde einfach auf „Änderungen in der Vorschau“ klicken , damit ich auf diese Home-Schaltfläche klicken kann. Dann schließe den Editor. Dann können wir jetzt diese Seite selbst mit Elementor bearbeiten . Und hier sind wir Also lass mich den Navigator schließen. Und jetzt klicken wir auf den Reaktionsmodus und wechseln zum Tablet. So sieht es auf dem Tablet aus. Scrollen wir einfach ganz nach unten. Ordnung. Fangen wir also mit diesem Abschnitt mit den besten Helden an und wählen ihn aus. Ich gehe zu Fortgeschritten. Dann wollen wir diese obere und untere Polsterung beibehalten. Wenn ich das kaputt mache, müssen wir wieder 50 und 80 eingeben Sagen wir mal 60 hier oben auf Tablets. Aber an den Seiten wollen wir ihr vielleicht 30 geben und dieser anderen Seite 30. Wähle das aus und lass es uns in die Mitte legen. Einfach so. Wählen wir diesen Container aus, der alles andere enthält. Geben wir ihm auch eine Polsterung von 20 an den Seiten, links. Und 20 auf der rechten Seite, einfach so. Wenn wir das auswählen , während wir auf dem Desktop sind, ist es auf dem Tablet in diesem Format, es wechselt zum Rasterstil, und das wollen wir nicht. Wir möchten weiterhin das ursprüngliche Layout beibehalten. Also, wenn wir hier reingehen, wollen wir eine Spalte. Und wir sollten vor Ort sein. Warum nimmt Int Effektkarten? Ich denke, weil wir nicht genug Breite haben , wie wir es auf dem Desktop tun. Ich meine, das ist sehr breit. Und genau hier haben wir nicht genug Abstand, um ein Bild und all diese Inhalte auf der linken Seite zu haben. Ich glaube nicht, dass wir im Desktop-Modus dasselbe Layout anwenden können, bei dem wir ein Bild und den Text auf der rechten Seite haben . Also ich denke, wir müssen es so optimieren, wie es aussieht. Also genau hier haben wir es vor Ort eingestellt, und ich denke, ich bin damit zufrieden. Das einzige, was ich tun möchte, ist das ein bisschen zu trennen. Also Stil. Gehen wir zum Inhalt. Gehen wir nun zurück zu den Inhalts- und Anzeigeoptionen, dem Zeilenabstand. Lassen Sie uns das erhöhen. Das sind 20, sagen wir 30, um jeden Beitrag vom vorherigen zu trennen. Ich glaube, das gefällt mir. Anstatt eine Vorschau zu zeigen, sollten wir zunächst die Lücke zwischen den beiden Spalten verringern die Lücke zwischen den beiden Spalten Wenn Sie dies auswählen, gehen Sie zum Layout. Der Abstand sollte hier zehn sein. Tatsächlich keine Lücke, Null. Lass es einfach so. Ich glaube sogar, dass wir dafür sorgen können, dass es 40% des Platzes einnimmt. Wenn ich auf diese 40% klicke. Sagen wir mal, 50% und diese andere Seite wird ebenfalls 50% ausmachen, einfach so. Und das können wir dabei belassen. Wahrscheinlich können wir dort die Größe der Kachel anpassen , Typografie Nein, wir können es bei dieser Größe belassen, aber die Zeilenhöhe reduzieren Aktualisiere das. Gehen wir jetzt zurück zu unserem Inkognito-Fenster des Simulators Ich werde diese Seite aktualisieren. Und dann lassen Sie uns eine Vorschau auf einem iPad mini anzeigen. Lass es uns auf einem iPad Pro überprüfen. So sieht es auf einem iPad Pro aus. Surface Pro, iPad Air. Wenn wir es uns im Inkognito-Fenster ansehen oder wenn wir uns gerade vom Editor abgemeldet haben, können wir anscheinend Inkognito-Fenster ansehen oder wenn wir uns gerade vom Editor abgemeldet haben, das Layout nebeneinander beibehalten, aber ich denke, das andere Layout ist viel sinnvoller als dieses schmale Bild Zumindest können wir jetzt verstehen, warum es keine gute Idee ist, Text und Bild nebeneinander zu haben Nun, das ist ausgewählt. Lass uns zum Inhalt gehen. Sagen wir Karten Und was ist mit Klassik? In Ordnung, lassen Sie uns das aktualisieren. Und lass uns wieder reingehen und es auffrischen. Da haben wir's. So sieht es also aus. Ich denke, es sieht viel besser aus als das, was wir zuvor hatten . Ja, es sieht gut aus. Als Nächstes wollen wir sehen, wie man es auf dem Handy anspricht. Also wähle ich diesen Textstil Typografie. Lassen Sie uns auch die Zeilenhöhe auf diese Stelle reduzieren. Ich denke, alles andere sieht in diesem Heldenbereich gut aus, wir können das reduzieren, ich denke, lassen wir es dabei. Scrollen Sie nach unten. Hier sind die Blogbeiträge. Das Abonnement kommt davor, und deshalb wollten wir es in diesem Container auf der linken Seite belassen , weil dieser Container zusammenbricht und hinter diesem Container her ist. Also zurück zur mobilen Ansicht. Was wir jetzt tun wollen, ist diesen Bereich zu vergrößern, diesen Container auszuwählen, zu „Erweitert“ zu wechseln, dort den Rand zu durchbrechen und den oberen Rand bis zu dieser Stelle vielleicht zu vergrößern. Jetzt ist es ausgewogen. Scrollen Sie nach unten Wir müssen etwas dagegen tun, also wähle ich diesen also wähle ich Wir brechen das ab und erhöhen die untere Polsterung. Solange wir noch unter Verschluss sind. Gehen wir zum Titel. Lassen Sie uns die Standardeinstellungen wir festgelegt hatten, einfach so ändern. Lasst uns alles in die Mitte stellen. Gehen wir zurück zur Verpackung und erhöhen die Polsterung links und rechts Sagen wir also fünf. Nein, das sind 50. Sagen wir zehn und auf der rechten Seite zehn, das schiebt alles um zehn und zehn nach innen dann für das vorgestellte Bild Lassen Sie uns dann für das vorgestellte Bild diesen Rand reduzieren Entferne diesen Rand, den wir festgelegt hatten. Und lassen Sie uns einen unteren Rand festlegen , um den Text nach unten zu verschieben. Verkleinern wir den oberen Rand, um das Bild nach oben und aus dem weißen Hintergrund herauszuholen. Gehen wir nun zurück in den Wrapper und verkleinern den unteren Rand auf dem weißen Hintergrund Sagen wir 20. Ich finde , das sieht viel besser aus. Wählen Sie diese Überschrift aus, formatieren Sie sie, zentralisieren Sie die Texte, erweitert, Rand unten Lassen Sie uns die Dinge nach unten verschieben. Lassen Sie uns auch zur Typografie übergehen, die Größe nur geringfügig erhöhen, 20, aber die Zeilenhöhe reduzieren Okay. Aktualisiere das. Scrollen Sie nach unten. machen wir in der nächsten Lektion, wir werden an dem Ordner arbeiten Aber jetzt wechseln wir wieder hierher und aktualisieren den Simulator. Jetzt wechsle ich zum iPhone 14. So sieht es auf einem iPhone 14 aus. So wird der Blog auf einem iPhone gepostet. Das ist natürlich nur ein Beispiel dafür, wie diese Tools funktionieren. Wir werden im Moment keine perfekte Website haben. Es liegt an Ihnen, sich Zeit zu nehmen, um es aufzupeppen und all diese Einstellungen zu verwenden, um sicherzustellen, dass alles perfekt passt. Ich denke zum Beispiel, dass dieser Text etwas zu klein ist, sodass wir ihn leicht vergrößern können. Aber ich würde erwarten, dass Sie sich um diese Dinge kümmern. Wenn Sie das auswählen, zum Stil wechseln, den Zeilenumbruch reduzieren oder zur Titel-Typografie wechseln, erhöhen wir die Textgröße und auch die Zeilenhöhe Das ist zu viel. Sagen wir bis zu diesem Punkt, aktualisieren. Dies sind also einige der Dinge, die Sie benötigen würden, um sich Zeit zu nehmen und sich zu verbessern. Und um jeden anderen Teil haben wir vielleicht vergessen, uns zu kümmern. Das ist nur eine Anleitung, wie Sie diese Dinge tun können, um Ihnen bei der Denkweise zu helfen, wie Sie eine gute Website erstellen können Da haben wir es also. Jetzt können Sie weitermachen und etwas gegen diesen Teil unternehmen. Lassen Sie mich damit einfach fertig werden. Das auswählen. Lassen Sie uns dafür sorgen, dass es vielleicht 40% einnimmt und das vielleicht 60%. Ich weiß nicht, warum es nicht steigt, sondern hier hinten zusammenbrechen soll, hier hinten zusammenbrechen soll weil wir genug Platz haben. Lass uns einfach dafür sorgen, dass es zu 100% belegt ist. Und das kann auch belegen, lass mich auf „Fortgeschritten“ gehen, diesen Rand entfernen und dann seine Breite vergrößern . Und aktualisiere das. Wie Sie sehen, werden diese stärker nach innen geschoben als der Text und die Überschrift Wenn Sie diese Option Erweitert auswählen, brechen Sie den linken Rand auf. Lassen Sie uns auch dafür dasselbe tun. Erweiterter Rand links. Aktualisiere das. Sehen wir uns nun diese Aktualisierung an. Da haben wir's. Also ich denke, das ist vorerst gut genug. Es liegt an dir, weiterzumachen und damit herumzuspielen. Lassen Sie uns auch die obere Marge reduzieren . Oh, warte, lass uns diesen Text auswählen, zu „Erweitert“ wechseln und den unteren Rand verkleinern, den unteren Rand verkleinern um das Bild zu vergrößern. Aktualisiere das. Aktualisiere das. In Ordnung. Also ich denke, das ist vorerst viel besser, aber Sie können ruhig weiter an allen Einstellungen herumbasteln , um bessere Ergebnisse zu erzielen also in der nächsten Lektion an, Schauen wir uns also in der nächsten Lektion an, wie man das Essen Also, wir sehen uns in Kürze. 40. Responsive Footer: Jetzt ist es also an der Zeit, die Fußzeile responsiv zu machen. Lassen Sie uns also mit Elementor bearbeiten und dann die Fußzeile bearbeiten In Ordnung, also los geht's. Lassen Sie uns jetzt in den responsiven Modus wechseln, und ich möchte in den Tablet-Modus wechseln , weil er auf dem Desktop bereits gut aussieht. Da haben wir's. Also möchte ich es an den Seiten etwas polstern Ja, also lass uns das machen. Während dieser Container selbst ausgewählt ist, gehen wir zu „Erweitert Wir wollen diese obere und untere Polsterung beibehalten, aber 20 an den Seiten hinzufügen Lassen Sie uns also die übrig gebliebenen 20, 20 aufteilen. Dann vielleicht über 50. Nein, sagen wir mal 40 und Top 40. Ordnung. Lass uns gehen. Auf einem Tablet sieht es also gut aus. Lass uns zum Handy wechseln. So sieht es auf einem Handy aus. Ich wähle diesen Text aus und gehe zum Stil. Leg es in die Mitte. Fügen wir oben etwas Rand hinzu, um ihn vom Logo zu trennen. T ist gut. Und lassen Sie uns diese auch in die Mitte legen . Können wir sie dort lassen? Ja, ich denke, wir sollten sie dort lassen , weil ich finde, dass sie gut aussehen. Aber lassen Sie uns diesen Container auswählen der die Quicklinks Advance enthält. Ich möchte die obere Polsterung weiter erhöhen. Nehmen Sie es sogar wieder auf Null und erhöhen Sie stattdessen den oberen Rand Einfach so, aktualisiere. Lassen Sie uns die Änderungen überprüfen. Sagen wir Control-Shift, und so sieht es auf einem Tablet aus. Ich möchte sie nicht in der Mitte platzieren, weil wir sehen wollen, wie sie aussehen werden, indem wir diesen der Mitte platzieren, weil wir sehen wollen, wie sie aussehen werden, Stil auswählen und sie in die Mitte stellen. Wie Sie sehen können, sind sie nicht richtig ausgerichtet. Wenn wir diese Quicklinks auswählen. Lass uns es zentralisieren, aktualisieren. Gehen wir hier rein und schauen uns die Änderungen an. Ich finde übrigens, es sieht toll aus. Also belasse ich es dabei. Sie können verwenden, Sie können zurück zum anderen Layout wechseln oder das so in der Mitte belassen. Also, wenn wir darauf klicken, um nach Hause zu gehen, oder schauen wir es uns auch auf einem Tablet an, dem iPad mini. Lass uns nach unten gehen. So sieht es auf einem Tablet aus. Lass uns hochgehen. So sieht das aus. So macht man die Website responsiv, die verschiedenen Bereiche responsiv auf den verschiedenen Geräten. Jetzt werden Sie feststellen, dass wir diese anderen Seiten nicht responsiv gemacht haben, und das ist natürlich eine Übung für Sie. In jedem Kurs, den ich veröffentliche, hinterlasse ich dir immer eine Übung. Mit den Prinzipien, die wir verwendet haben, um diese Homepage und die Kopfzeile und das Foto responsiv zu gestalten, können Sie auch diese anderen Bereiche responsiv gestalten, die Kontaktseite, die Artikel. Und schließlich haben wir auch die Videoseite, die ich Ihnen als Übung geben wollte. Es ist auch Teil der Übung. Wenn wir hier auf die Referenz-Website gehen, los geht's. Also zur Referenzwebsite, wie Sie es bereits gesehen haben. Wenn wir auf die Videoseite gehen, haben wir vier Beispielvideos. Und wenn Sie auf eines davon klicken, wird es angezeigt und es wird automatisch ein Video abgespielt Sie haben diese abgerundeten Ecken Und natürlich sieht dieser Heldenbereich der Artikel-Helden-Sektion ziemlich ähnlich Das heißt, du kannst das einfach kopieren. Aber für die Videos musst du ein Videoelement verwenden. Also lass uns wieder hier rein gehen. Wenn wir hierher gehen und nach Videos suchen, werden Sie verschiedene Videoelemente sehen. Es gibt dieses Video von Elements Kit, ein anderes von Element, die kostenlose Version von Elementor, dann haben wir diese Videobox Spielen Sie mit ihnen herum und finden heraus, mit welchem Sie ein solches Ergebnis erzielen Das ist eine Übung für dich. Nur für den Fall, dass du eine Videoseite für deinen Blog benötigst. Falls Sie es jedoch nicht benötigen, müssen Sie nicht an dieser Seite arbeiten. Jetzt haben wir die Website responsiv gemacht. Eine Sache, die Ihnen aufgefallen wenn wir zur Startseite zurückkehren, lassen Sie uns zu dem zurückkehren, von dem aus wir arbeiten. Ich möchte den Responsive-Modus umschalten und verlassen und diese Seite aktualisieren Jetzt werden Sie feststellen, dass wir hier unser Layout verloren haben , das das Bild links und den Beitragstext rechts hatte links und den Beitragstext rechts Das Bild und der Text liegen also nicht nebeneinander. Und ich habe festgestellt, dass dieses Element, mit dem wir dieses Raster erstellt haben, nicht über die Einstellungen für den responsiven Modus verfügt. Das heißt, wenn Sie es so einstellen, dass es so aussieht, wird es auf allen Gerätegrößen so aussehen. Wenn Sie es so einstellen, dass das Bild links und der Text rechts angezeigt wird, sehe ich auf allen Geräten so aus. Das ist also ein Manko dieses Elements. Ich könnte später eine zusätzliche Lektion hinzufügen, um Ihnen vielleicht zu zeigen , wie Sie ein anderes Element verwenden können, das diesen Mangel nicht hat, bei dem wir verschiedene Layouts für die Anzeige der Blogbeiträge auf verschiedenen Geräten festlegen können verschiedene Layouts für die Anzeige der Blogbeiträge auf verschiedenen Aber im Moment denke ich, dass das gut genug ist . Es ist akzeptabel. Denken Sie daran, dass unser Ziel in diesem Kurs darin bestand zu verstehen, wie Elementor und Wordpress zusammen und zusätzliche Plug-ins verwendet Wordpress zusammen und zusätzliche Plug-ins werden, um eine voll funktionsfähige Website zusammenzustellen Wir haben also unser Ziel erreicht. Wir haben gelernt , wie man diese Tools benutzt. Bevor du gehst, habe ich noch ein paar wichtige letzte Gedanken. Ich möchte es mit dir teilen. Also, wenn du so weit bei mir warst, wirst du wohl hören wollen, was ich zu sagen habe, also werde ich dich in Kürze sehen. 41. Letzte Gedanken und nächste Schritte: Und willkommen zurück. Deshalb möchte ich mir nur einen Moment Zeit nehmen, um mich bei Ihnen zu bedanken, dass Sie an diesem Kurs teilgenommen haben und von Anfang bis Ende bei mir geblieben sind. Es ist sehr einfach, eine Klasse oder einen Kurs zu beginnen, aber es ist ein anderes Spiel, den Kurs zu beenden. Viele Leute geben unterwegs auf oder sind beschäftigt und vergessen , ihren Kurs zu beenden. Aber du warst bis zum Ende bei mir. Deshalb möchte ich mich bei Ihnen dafür bedanken , dass Sie bis zum Ende bei mir geblieben sind. Ich glaube, ich habe während des Unterrichts in mehreren Lektionen erwähnt, dass Sie bestimmte Dinge tun müssen , um Ihre Suchmaschinenoptimierung, die Suchmaschinenoptimierung Ihrer Website und die Suchmaschinenoptimierung zu verbessern . Ihre Website bleibt für Suchmaschinen unsichtbar , es sei denn, Sie optimieren sie so, dass sie für sie sichtbar ist. Und es gibt Möglichkeiten, Ihre Website für Suchmaschinen wie Google und Bing sichtbarer zu machen . Aber es ist dein Glückstag, denn ich habe einen umfassenden SEO-Kurs, der dir zeigt , wie du deine WordPress-Website für Suchmaschinen optimieren kannst. Sie nun gelernt haben, wie man eine Website mit Wordpress und Elementor erstellt , der nächste logische Schritt darin, zu lernen, wie Sie diese Website für die Suchmaschinenoptimierung sichtbar machen die Suchmaschinenoptimierung sichtbar Suchmaschinenoptimierung Also schau dir diesen Kurs in meinem Profil an. Und ich bin mir ziemlich sicher, dass Sie ein oder zwei sehr wichtige Dinge lernen werden , die Sie für Ihre Website und Ihr Unternehmen tun können. Und bevor du gehst, möchte ich dich um einen schnellen Gefallen bitten. Wenn du dir weniger als eine Minute Zeit nehmen könntest und unter diesem Videoplayer zur Registerkarte „Testberichte“ gehen könntest, würde ich gerne dein Feedback dazu hören was du von diesem Kurs hältst. Ihr Feedback wird mir wirklich helfen zu verstehen welchen Einfluss ich auf meine Schüler habe. Und es hilft auch anderen Schülern zu wissen, ob dieser Kurs ihren Bedürfnissen entspricht, weil es potenzielle Studenten gibt, die nach einer Möglichkeit suchen, eine Website zu erstellen, und sie sind sich nicht sicher, ob dieser Kurs für sie geeignet ihren Bedürfnissen entspricht, weil es potenzielle Studenten gibt , die nach einer Möglichkeit suchen , eine Website zu erstellen, und sie sind sich nicht sicher, ob ist. Würden Sie ihnen empfehlen , an diesem Kurs teilzunehmen? Hat dir dieser Kurs gefallen? Falls ja, was hat dir an dem Kurs gefallen? Das dauert weniger als eine Minute. Gehen Sie einfach zur Bewertungsleiste unter diesem Videoplayer, und in weniger als einer Minute können Sie Ihr Feedback direkt dort hinterlassen, und wir freuen uns sehr darüber. Das ist also alles, was ich momentan für dich habe. Ich arbeite gerade am nächsten Kurs, den ich in ein oder zwei Wochen veröffentlichen werde. Vergiss also nicht, mir zu folgen, um benachrichtigt zu werden , sobald ich einen brandneuen Kurs veröffentliche. Aber bis zum nächsten Mal wünsche ich dir nur das Beste und ich möchte, dass du kreativ bleibst. Bis bald. Frieden.