Einen produktionsfähigen Online-Shop mit Elementor und WooCommerce erstellen

1. Einführung: Und willkommen zurück zu einem weiteren großartigen Wordpress- und Elementarkurs mit mir, Ken Dieser ist etwas Besonderes , weil ich Ihnen zeigen werde, wie Sie mit WordPress, Elementor WooCommerce und anderen kostenlosen Tools oder anderen kostenlosen Plugins Ihre eigene produktionsreife E-Commerce-Website erstellen Ihre eigene produktionsreife mit WordPress, Elementor WooCommerce und anderen kostenlosen Tools oder anderen kostenlosen Plugins Ihre eigene produktionsreife E-Commerce-Website Elementor WooCommerce und anderen kostenlosen Tools oder anderen kostenlosen Also keine kostenpflichtigen Plugins, keine Codierung erforderlich. Und wenn Sie mich zum ersten Mal sehen, wie ich bereits erwähnt habe, heiße ich Ken und ich bin Grafikdesigner und Webdesigner mit mehr als zehn Jahren Erfahrung mit verschiedenen Designtools, einschließlich WordPress. Jetzt versuche ich mich auch als Dozent für Webdesign und Webentwicklung auf Skillshare und meinem YouTube-Kanal In den letzten fünf Jahren habe ich Tausenden von Studenten wie Ihnen beigebracht, habe ich Tausenden von Studenten wie Ihnen beigebracht wie man mit WordPress und seinem beliebtesten Drag-and-Drop-Builder Elementor fantastische Websites erstellt mit WordPress und seinem beliebtesten Drag-and-Drop-Builder Elementor fantastische Websites seinem beliebtesten Drag-and-Drop-Builder Elementor ist ein fantastischer Drag-and-Drop-Website-Builder, mit dem Sie ohne Programmierkenntnisse jede Art von Website erstellen können, die Sie sich vorstellen können Und in diesem Kurs werde ich Ihnen zeigen, wie Sie mit Elementor einen fantastischen Online-Shop aufbauen können, auf den Sie stolz sein können, einen Online-Shop Sie Ihren Freunden präsentieren können Und wenn du einen Online-Shop haben möchtest, kannst du ihn sofort nach dem Kurs eröffnen Aber für wen ist dieser Kurs gedacht? Dieser Kurs richtet sich an WordPress-Anfänger , die schnell einen Online-Shop aufbauen und gleichzeitig lernen möchten einen Online-Shop aufbauen und gleichzeitig , wie man die verschiedenen kostenlosen Tools und Plugins verwendet, die im Wordpress-Ökosystem verfügbar sind. Sie sind nur ein Bastler, der Ihre Reise mit WordPress beginnt , oder ein Unternehmer oder ein aufstrebender Webdesigner , der lernen möchte, wie man Wordpress verwendet , um in Zukunft jede Art von Websites zu erstellen jede Art von Websites Dieser Kurs bietet die perfekte Grundlage, die Sie benötigen, um ein WordPress-Experte zu werden Und wie Sie sehen können, handelt es sich einen praktischen, projektbasierten Kurs. Am Ende werden Sie also eine Wordpress-Website haben, die Sie sofort starten und Einnahmen generieren können . Und das klingt dem Kurs, nach dem Sie gesucht haben? Wenn ja, wofür verschwenden wir Zeit? Schauen wir uns die Website an , die Sie im Laufe des Kurses erstellen werden Laufe des Kurses erstellen Lassen Sie uns das in der nächsten Lektion machen. Wir sehen uns kurz. 2. Kursprojekt: Schauen wir uns jetzt das Klassenprojekt an, die Website, die Sie im Laufe des Kurses erstellen werden. Also hier sind wir auf dieser fiktiven Landingpage. Wie Sie sehen können, haben wir diesen mehrfarbigen Text. Wir werden sehen, wie man das mit benutzerdefiniertem CSS macht. Wie Sie sehen können, haben wir diesen schönen Heldenbereich mit dem Textblock und dem Heldenbild und dem schönen Hintergrundbild. Wenn wir nach unten scrollen, haben wir dieses Symbol, das animiert werden muss. Wenn ich diese Seite neu lade, lass mich sie einfach neu laden. Einfach so. Wenn wir nach unten scrollen, haben wir diesen Abschnitt mit den Sonderangeboten Nach unten scrollen. Wir werden in Kürze zu den Produkten zurückkehren, um sie uns anzusehen. Aber hier haben wir einen schönen Abschnitt mit Handlungsaufforderungen. Sie können hier jede Art von Bild einfügen, Funktionen oder wichtigsten Punkte und dann eine Schaltfläche zum Aufrufen von Aktionen. Dann haben wir diesen anderen Call-to-Action-Button. Ich verwende einfach überall Dummy-Text. Das ist keine echte Website. Dies ist die Website, die ich bei der Aufzeichnung des Kurses erstellt habe. Sie schauen sich also an, was Sie am Ende haben werden. Hier ist ein schönes, einfaches Foto mit Lorem Ipsum-Text und einigen Links zu den verschiedenen Seiten und einem Anmeldeformular für die Mailingliste Und genau hier können wir kommen und ein Produkt auswählen, zum Beispiel diese GPU Lass mich das einfach öffnen . Da haben wir's. Also, das ist jetzt die einzige Produktseite, und wir können alle Details darüber lesen. Dies sind die wichtigsten Punkte, Hauptmerkmale dieser GPU und die detailliertere Beschreibung des Produkts finden Sie hier. Dann haben wir hier unten ein verwandtes Produkt. Und andere verwandte Produkte. Wir werden sehen, wie das alles geht. hierher zurückkehren, können Sie sofort mit PayPal bezahlen, oder wenn Sie weiter sofort mit PayPal bezahlen, einkaufen möchten, können Sie weiter einkaufen, bevor Sie mit Papier bezahlen Aber nehmen wir an, wir sind bereit zu zahlen, sagen wir, zur Karte hinzufügen, und jetzt wurde unser Produkt zur Karte hinzugefügt Lassen Sie mich die Karte ansehen. Es enthält mehrere Produkte, die ich hinzugefügt habe , um die Website zu testen. Nehmen wir jetzt an, Sie sind bereit zu zahlen, oder Sie können bestimmte Produkte entfernen, die Sie nicht kaufen möchten. Und das wurde entfernt und Sie können es rückgängig machen. Dann können wir zur Kasse gehen. Genau hier muss der Kunde seine Daten eingeben, einschließlich Versand und allem, und hier ist eine Zusammenfassung, wie viel er zahlen soll , etwa 3,8 Millionen. Sie haben die Möglichkeit , über Paypal zu bezahlen. Sie können mit Debit- oder Kreditkarten bezahlen. Sie können mit Apple Pay oder Google Pay bezahlen. Und bevor sie Zahlungen leisten können, müssen sie den Allgemeinen Geschäftsbedingungen zustimmen. Es gibt auch einen weiteren Scheck, den ich versuche zu bezahlen, wenn ich versuche, die Zahlung abzuschließen . Ich erhalte hier diese Benachrichtigungen, um mich daran zu erinnern, dass ich all diese Daten eingeben muss , bevor ich die Zahlung vornehmen kann. Auf diese Weise können Sie überprüfen, ob die Person die Informationen angegeben hat, die Sie von ihr benötigen. Und jetzt können wir zur Shop-Seite gehen. Ich hatte es geöffnet. Los geht's. Sie können einfach auf die Shop-Seite klicken. Und jetzt sind hier alle Produkte aufgelistet. Und wenn ich vielleicht nach GPU suche, haben wir diese Ajax-Suche , die nach dem Produkt sucht, ohne die Seite zu aktualisieren Wir können auch die Eingabetaste drücken, um zur Suchergebnisseite mit allen GPUs zu gelangen , und wir können die gewünschte GPU auswählen Wie Sie sehen können, handelt es sich eine vollständige Website, die bereit ist, Zahlungen anzunehmen Der Kunde kann tatsächlich auf dieser Website bezahlen , da wir bereits mit PayPal verbunden sind. Wenn ich jetzt auf dieser Website bezahle, wird das Geld auf mein PayPal-Konto überwiesen. Das ist also das Projekt an dem du während des gesamten Kurses arbeiten wirst, und wenn wir fertig sind, wirst du eine Website haben, die bereit ist, online zu gehen. Ich hoffe, das hat Sie begeistert , denn ich freue mich sehr, Ihnen zu zeigen, wie man es erstellt. also, ohne weitere Zeit zu verschwenden, Lassen Sie uns also, ohne weitere Zeit zu verschwenden, etwas über wbPressHsting lernen, denn jede Website benötigt Aber was ist ein Webhost? 3. WordPress-Webhosting: Damit Sie nun eine Webpress-Website erstellen können, die Sie starten können, benötigen Sie Webhosting und einen Domainnamen Aber Sie fragen sich vielleicht, was Webhosting und was ein Domainname ist? Um Ihnen dabei zu helfen, habe ich eine kurze Erklärung vorbereitet. Also los geht's. 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 Peek, sagen wir freepek.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 Adresse oder diese URL zugegriffen Als er also die Anfrage sendete , wurde diese Anfrage von dem Server empfangen , der die kostenlose Peak-Website speichert, und die kostenlose Peak-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. Die andere Sache, die Sie benötigen, ist ein Domainname. Freepik.com ist ein Domainname, und dieser spezifische Domainname ist einzigartig Also kann niemand sonst dasselbe freepik.com haben. Auf die gleiche Weise 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 auf wordpress.org. Dies ist die offizielle Website von Wordpress. Hier können Sie Wordpress herunterladen. Wenn Sie Ihre Website offline entwickeln möchten, können Sie WordPress 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, Blue Host. Dreamhost und wordpress.com Dies bedeutet jedoch nicht, dass dies die einzigen Webhosts sind , die Sie für Ihre Wordpress-Website verwenden können Es gibt andere Webhosts , die genauso gut, wenn nicht sogar besser sind als diese drei. Das sind also nur Wordpress-Empfehlungen. Sie werden hier jedoch anhand dieser Lektüre herausfinden , dass es Hunderttausende von Webhostern gibt, denen die überwiegende Mehrheit die Mindestvoraussetzungen von Wordpress erfüllt. Wordpress hat beschlossen, Ihnen die Arbeit zu erleichtern , und hat beschlossen, Ihnen die drei besten Empfehlungen zu geben . Jetzt persönlich habe ich Bluehost benutzt und vor langer Zeit, als ich anfing, Wordpress zu verwenden, habe ich WordPress.com ausprobiert, und Sie sollten WordPress.com nicht mit wordpress.org verwechseln WordPress.org ist die Plattform, die von der Wordpress Foundation betrieben wird, denn denken Sie daran, dass der Wordpress Foundation betrieben wird, denn Wordpress Open Source ist und WordPress.org existiert, um Ihnen den WordPress-Download und alles, was Sie über Wordpress wissen WordPress-Download müssen Aber jetzt, wenn es um Hosting geht, gibt es einen speziellen Dienst gibt es einen speziellen Dienst namens wordpress.com. Lass mich ihn einfach öffnen. Dies ist eine Plattform , die Ihnen Tools und Hosting zum Erstellen Ihrer Website bietet . Es sind wie Wochen. Wenn Sie Wochen gesehen haben, wissen Sie, dass Sie beim Erstellen einer Website auf Weeks nicht darüber nachdenken müssen, wo Sie das Hosting bekommen sollen , weil sie die Website für Sie hosten. Sie geben dir lediglich die Tools, mit denen du sofort mit dem Aufbau deiner Website beginnen kannst. Natürlich hat es seine Grenzen, genauso wie Wix seine Grenzen hat , wenn Sie es mit der Installation von Wordpress selbst auf einem Server vergleichen Installation von Wordpress selbst auf einem Server Wenn Sie WordPress irgendwo auf einem Server installieren, haben Sie mehr Kontrolle, um viel mehr Dinge zu tun, über die Sie keine Kontrolle haben , wenn Sie einen gehosteten Dienst wie wordpress.com verwenden einen gehosteten Dienst wie wordpress.com Aber natürlich ist es ein netter Ort, du ausprobieren kannst, wenn du willst. Jetzt, auf persönlicher Ebene, verwende ich NameCip 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 Und da hast du es. Nachdem Sie nun verstanden haben , was ein Webhost ist, was er tut und warum Sie ihn benötigen, schnappen Sie sich Webhosting und den Domainnamen, denn das benötigen Sie, bevor Sie mit dem nächsten Schritt fortfahren können, in dem wir Web Press über das C-Panel installieren werden. Wir sehen uns in Kürze. 4. WordPress installieren: Nachdem Sie Ihr Webhosting und den Domainnamen gekauft haben , ist es an der Zeit, WordPress zu installieren. Und um WordPress zu installieren, müssen Sie sich bei Ihrem C-Panel anmelden . Und der schnellste Weg, sich in Ihr C-Panel einzuloggen , ist Ihr Webhost-Konto. Wie Sie sehen können, bin ich hier auf dem Name-Chip-Login-Konto. Also mache ich einfach weiter und gebe meine Daten ein und melde mich dann an. Aus Sicherheitsgründen werde ich nach einem Sicherheitscode gefragt. Ich verwende eine Authenticator-App. Ja. Lass uns gehen. Da haben wir's. Also gehe ich jetzt direkt zur Hosting-Liste. Und ich werde mein Webhosting hier finden. Wie Sie sehen können, habe ich zum C-Panel gewechselt, das mich zum C-Panel weiterleitet. Und wenn Sie sich für einen Shared-Hosting-Dienst wie mich entscheiden , sieht Ihr C-Panel ungefähr so aus. Es ist vielleicht nicht identisch, aber die meisten Dinge hier werden auf Ihrem C-Panel sein. Und was wir suchen, ist der Bereich zum Installieren von Softacul-Apps . Wie Sie sehen können, haben wir darunter Wpress und Also gehe ich zu Worpress. Und wenn ich jetzt hier nach unten scrolle, finde ich alle Installationen von Wordpress, die ich habe Wie Sie sehen können, ist die einzige Installation, die ich derzeit habe , unsere Referenzwebsite. Wie Sie sehen können, ist das Mr. Moneybags.net, und das war's. So können wir eine neue Instanz von Wordpress installieren , um eine neue Website zu erstellen Also sage ich jetzt installieren, und Sie werden mit diesem Formular konfrontiert, das Sie ausfüllen und dann WordPress installieren müssen. Lassen Sie uns also beginnen indem wir hier unser Protokoll auswählen. Ich verwende gerne HDTPSW Punkt. Vielleicht nehme ich den VFX-Pod. Und wenn ich nach draußen klicke, wird geprüft, ob ich ein SSL-Zertifikat für diesen Domainnamen habe ein SSL-Zertifikat für diesen Domainnamen Wie Sie sehen können, ist alles gut. Wenn Sie kein SSL-Zertifikat haben, wird Ihnen ein Fehler angezeigt. Ich werde Ihnen sagen, dass kein SSL-Zertifikat gefunden wurde, und SSL-Zertifikate sind heutzutage normalerweise kostenlos. Bitten Sie also Ihren Webhost, Ihnen Ihr kostenloses SSL-Zertifikat zur Verfügung zu stellen. Dann lautet die URL der Website www.vfxpod.com Wenn Sie hier einen Namen hinzufügen, Ihre Homepage, wird diese Homepage einen zusätzlichen Ordner haben, wird diese Homepage einen zusätzlichen Ordner haben Und das willst du nicht. Sie möchten nur, dass Ihre Homepage Ihr Basis-Domainname ist. Also füge hier nichts hinzu. Als Nächstes geben wir unserer Website einen Namen. Ich gebe ihm den Namen Online-Shop. Kaufe alles bei uns. Ja, lass mich einfach damit weitermachen. Und dies sind die Anmeldeinformationen, mit denen Sie sich auf Ihrer Wordpress-Website anmelden, falls Sie Ihr Logo verwenden Ihrer Wordpress-Website anmelden, falls Sie und sich nicht über das C-Panel anmelden möchten. Als Nächstes haben wir einige Plugins, die Sie mit Ihrer WordPress-Website vorinstallieren können. Sie müssen diese jedoch nicht installieren, da es bessere Alternativen gibt , die Sie im WordPress-Plugin-Verzeichnis installieren können . Lassen wir diese also weg. Wir können zu den erweiterten Optionen gehen und hier entscheiden, eine Sicherungskopie unserer Website zu erstellen. Aber normalerweise behalte ich das nicht, weil ich es nie benutze. Ich verwende ein Plugin in WordPress, um meine Backups zu erstellen und die Backups herunterzuladen oder sie jede Woche automatisch an mein Google Drive zu senden . Also zeige ich dir, wie das geht. Mach dir keine Sorgen. In Ordnung. Hier können Sie entscheiden, ob Sie möchten, dass Ihr Wordpress automatisch aktualisiert wird, wenn es eine neue Version von WordPress gibt , oder ob Sie nur auf Nebenversionen aktualisieren möchten Ich werde das einfach auf der Standardeinstellung belassen. Stellen Sie also sicher, dass Sie diese Anmeldeinformationen irgendwo aufbewahren. Also öffne ich einfach meinen Textnotizblock. Ich kann das kopieren und dort ablegen, dann das Passwort, Enter, genau dort kopieren Du kennst deine Admin-E-Mail bereits, also kannst du sie dort eintragen. Sobald wir das getan haben, können wir sagen, installiere WordPress. Verlasse diese Seite nicht, bis sie fertig ist . Und da haben wir es. Herzlichen Glückwunsch. Du hast WordPress gerade zum ersten Mal installiert, falls das dein erstes Mal ist. Und jetzt haben wir hier zwei URLs. Das ist deine Homepage. Wenn ich also mit der rechten Maustaste klicke und es in einem neuen Tab öffne, wie Sie sehen können, ist hier der Domainname, Ihrer ist natürlich der Domainname, den Sie gekauft haben. Und jetzt haben wir Folgendes. Dies ist nur das grundlegende WordPress-Theme. Und wenn ich hierher zurückkehre, haben wir auch eine Admin-URL. Dadurch gelangen wir zum Admin-Bereich unserer Website. Also klicke ich darauf, wie Sie sehen können, es heißt Dashboard, Online-Shop. Der Name unserer Website, des Online-Shops. Und hier sind wir. Also haben wir gerade Wordpress installiert. Herzlichen Glückwunsch. Dies ist ein großer Schritt für Sie, wenn Sie Wordpress zum ersten Mal verwenden. In der nächsten Lektion wollen wir uns nun ansehen, wie man ein WordPress-Theme installiert. Wir sehen uns in Kürze. 5. Installiere ein Design: Nachdem wir WordPress installiert haben, ist es an der Zeit, ein Wordpress-Theme zu installieren. Lassen Sie uns weitermachen und mein Lieblingsthema aller Zeiten installieren, und es heißt Astra. Ich gehe also zu den Erscheinungsthemen und Sie werden feststellen, dass 2025 das aktive Thema 2025 ist. Letztes Jahr war das aktive Theme, wann immer du WordPress installiert hast, 2024 , und im Vorjahr natürlich 2023. Jetzt sage ich Neu hinzufügen, weil Sie diese Standard-WordPress-Themes nicht verwenden möchten. Und jetzt, wie Sie sehen können, haben wir dieses Thema namens Astra. Also werde ich Astro installieren und es aktivieren. Da haben wir's. Wie Sie hier sehen können, sagen sie uns, dass wir mit ihren Startvorlagen beginnen können , aber ich werde das einfach abweisen Jetzt ist es das aktive Thema. Ich werde das Thema 2023 auswählen und es löschen. Wählen Sie das Thema 2024 aus und löschen Sie es ebenfalls. Und jetzt lasse ich 2025 installiert, aber nicht das aktive Theme. Dies wird das Backup-Theme sein, falls dieses Theme aus irgendeinem Grund kaputt geht. Unsere Website wird weiterhin strukturiert sein, da sie ein Fallback-Thema haben wird Es ist daher immer ratsam, ein Fallback-Theme zu ein Fallback-Theme Jetzt ist Astra das aktive Thema, und jetzt können wir mit dem Aufbau unserer Website beginnen Da wir jedoch einen Elementor verwenden werden, um eine Website zu erstellen, wollen wir uns in der nächsten Lektion ansehen, wie ein Elementor installiert wird. Wir sehen uns in Kürze 6. Installiere das Elementor-Plugin: Jetzt ist es an der Zeit, dass du dein erstes WordPress-Plugin installierst Lass uns weitermachen und Element installieren. Also gehe ich zu Plugins. Lassen Sie mich einfach auf Plugins klicken, um zu den bereits installierten Plugins zu gelangen , da Wordpress immer mit diesen beiden vorinstallierten Plugins geliefert wird . Also wähle ich einfach beide aus indem ich dieses oberste Kästchen Klicken Sie darauf und sagen Sie dann Löschen, Anwenden, Enter. Diese benötigen wir nicht, also kann ich einfach „Neu hinzufügen“ sagen. Und jetzt gehen wir zum Wordpress-Plug-in-Verzeichnis. Nun, das wird nur aus dem eigentlichen Wordpress-Plug-in-Verzeichnis abgerufen. Wenn ich einen Link schreibe und den Link in einem neuen Tab öffne. Wie Sie sehen können, gehen wir zu wordpress.org und wir werden auf die Plugins-Seite weitergeleitet Wir haben auch die Themenseite, Musterseitenblöcke und all das Hier listet Wordpress mehr als 59.000 kostenlose Plugins auf, die Sie installieren können jetzt wieder hier reingehen, ruft Wordpress all diese Plugins und bringt sie hierher, damit Sie sie mit einem Klick installieren können, anstatt hierher zu sie mit einem Klick installieren können, anstatt gehen und Wenn ich also darauf klicke, muss ich, wie du sehen kannst , von hier herunterladen und wieder hierher gehen und es hochladen Stattdessen kann ich es einfach direkt installieren. Also lass uns nach Elementor suchen. Elementor Homepage-Baukasten . Los geht's Mehr als 10 Millionen aktive Installationen von Elementor, also sage ich jetzt installieren Und wie ich meinen Schülern immer wieder sage, gibt es, wie Sie sehen können, viele andere Elementor-bezogene Plugins, die von Drittanbietern entwickelt wurden , die nicht mit Elementor Elementor-bezogene Plugins, die von Drittanbietern entwickelt wurden arbeiten oder nicht bei Elementor arbeiten Dies sind Drittanbieter, die Plug-ins entwickeln , die der kostenlosen Version von Elementor weitere Funktionen hinzufügen der kostenlosen Version von Elementor weitere Funktionen Sie ermöglichen es Ihnen, mehr Funktionen und mehr Elemente zu erhalten, die Sie kostenlos auf Ihrer Website verwenden können Also lass mich sagen aktivieren. Und natürlich werden wir sehen, wie man einige von ihnen benutzt. Ich sage aktivieren. Und jetzt ist Elementor aktiviert. Vor einiger Zeit gab es einen Assistenten, immer dann auftauchte, wenn Sie einen Elementor zum ersten Mal installieren Ich weiß nicht, warum es nicht auftaucht. Nur für den Fall, dass es auftaucht, gehen Sie einfach durch diesen Zauberer. Nun, da Sie Elementor installiert haben, haben wir, wie Sie sehen können, diese Vorlagen und einen Lamenter Diese waren nicht da, bevor wir einen Lamenter installiert haben , da es sich um Elementor-Menüelemente handelt Sie ermöglichen es Ihnen, in einem Lamenter Einstellungen vorzunehmen und alles zu optimieren, was Sie möchten , damit es Aber ich ändere diese Einstellungen nie. Ich mache einfach weiter damit, meine Websites zu erstellen. Jetzt, wo wir Elementor installiert haben, ist es als das einzige installierte Plugin aufgeführt , denn denken Sie daran, dass wir die anderen beiden gelöscht haben Wir werden hier weitere Plugins installieren , während wir unsere Website erstellen, und so installiert man ein WordPress-Plugin in der nächsten Lektion Lassen Sie uns in der nächsten Lektion einen Blick auf die Elementor-Benutzeroberfläche werfen, da ich Sie über die Navigation im Elementar-Editor auf dem Laufenden halten möchte Navigation im Elementar-Editor auf dem Laufenden halten Also werde ich dich in Kürze sehen. 7. Benutzeroberfläche von Elementor: Es ist Zeit, sich die Elementor-Benutzeroberfläche anzusehen. Und um das zu tun, navigieren wir zu den Seiten. Dies sind alle unsere Webseiten. Wie Sie sehen können, waren bei der Installation von Worps zwei Beispielseiten enthalten ein Entwurf, eine Datenschutzrichtlinie und eine Beispielseite Wir können diese Seite verwenden, um uns den Element-Editor anzusehen. Also sage ich bearbeiten. Und mach dir keine Sorgen. Im Moment schauen wir uns nur den Editor an. Mach dir keine Gedanken darüber, wie man eine Webseite erstellt und all das. Ich zeige dir, wie das geht. Ich schließe das einfach ab. Was ist das? Lassen Sie uns auch das und das schließen. Ed, hier sind wir. Also das ist ein bisschen anders als das, was wir in meinem vorherigen Kurs hatten, in meiner vorherigen Klasse. Es ist immer noch dieselbe Benutzeroberfläche. In der vorherigen Klasse hatten wir diesen Assistenten hier nicht, aussieht , als würde er eine Liste der Dinge erledigen, die wir sehr schnell erledigen können, aber das werden wir nicht tun, weil wir all diese Dinge manuell erledigen werden. Lassen Sie mich das schließen. Also gut, das ist eine Checkliste Sie können von hier aus darauf zugreifen. Ich hab's. Das Erste, was Ihnen auffallen wird, ist diese Struktur. Zuvor wurde es Navigator genannt. Jetzt heißt es Struktur und gibt Ihnen nur einen Überblick über die Struktur der Seite. Wenn wir hier also viele Inhalte haben und wir Seite nur aus der Vogelperspektive betrachten wollen, hilft uns das, alles zu sehen , was auf der Seite existiert. Und es ist auch gut , uns zu helfen, sehr schnell zu bestimmten Teilen der Seite zu gelangen. Wenn ich zum Beispiel mit der rechten Maustaste darauf klicke und es ein paar Mal dupliziere, dupliziert es, wie Sie sehen können, es wird auch hier in der Struktur in Echtzeit dupliziert . Klicken Sie mit der rechten Maustaste auf Duplizieren Und jetzt kann ich das erweitern. Okay, lassen Sie uns den ersten erweitern, um zu zeigen, was drin ist. Also haben wir den Behälter , der rosafarbene Behälter ist. Wir haben den Texteditor , der ein anderes Element ist. Wenn ich jetzt den Container auswähle, ändert sich dieser zu Container bearbeiten. Wenn ich Texteditor auswähle, ändert sich dies in Texteditor bearbeiten. Mit anderen Worten, egal welches Element Sie hier auf der Seite aktiv ausgewählt haben, seine Einstellungen werden hier angezeigt und Sie können all diese Einstellungen anpassen Wenn ich also diesen dritten auswähle, meiner Meinung nach, wie Sie in der Struktur sehen können, haben wir meiner Meinung nach, wie Sie in der Struktur sehen können, den dritten Container ausgewählt Derselbe Fall gilt für alles, was sich im Texteditor befindet. Es wählt den Texteditor aus, und hier können wir die Einstellungen des spezifischen Elements anpassen , das gerade hier ausgewählt ist Jetzt haben Sie für fast jeden Editor, mit Ausnahme einiger Ausnahmen, mit Ausnahme einiger Ausnahmen, immer diese drei Tabs Es gibt die Registerkarte „Inhalt“, die Registerkarte „Stil“ und die Registerkarte „Erweitert“. Jedes Element. Wenn ich also anstelle eines Texteditor-Elements einen Container auswähle , hat er, wie Sie sehen können, auch drei Tabs. Aber jetzt ist hier der Layout-Tab statt der Inhalts-Tab. Hier auf der Registerkarte „Inhalt“ fügen wir den Inhalt hinzu, den wir hinzufügen möchten. Welche Art von Inhalt erwartet ein Texteditor beispielsweise ? Es ist Text. Hier können wir also jeden beliebigen Text hinzufügen. Wir wollen genau. Und während wir tippen, passiert das hier in Echtzeit, wie Sie sehen können. Wenn ich nun ein anderes Element hinzufügen möchte, keinen Texteditor, muss ich nur auf diese Schaltfläche für das Anzeigenelement klicken diese Schaltfläche für das Anzeigenelement und kann verschiedene Arten von Elementen hinzufügen. Lassen Sie mich jetzt all diese löschen. Lassen Sie mich einfach schreiben, klicken und löschen oder einfach mit der Maus über eines davon fahren und das löschen Jetzt bleibt uns nur noch dieser eine. Lassen Sie mich das Texteditor-Element auswählen und auch das löschen . Ich klicke mit der rechten Maustaste darauf und lösche es. Jetzt haben wir nur noch den Container. Wenn Sie dem Container etwas hinzufügen möchten, können wir auf dieses Plus oder dieses Element hinzufügen klicken. Also lass mich einfach darauf klicken. Es wird alle Elemente enthüllen, die uns zur Verfügung stehen. Wenn ich nun all diese Panels zusammenklappe und das Layout einfach zusammenlege, werden Sie feststellen, dass es sich um Panels handelt , die verschiedene Arten von Elementen enthalten , die wir hier per Drag-and-Drop einfügen können , um unsere Website zu gestalten. Einige davon sind jedoch in der Pro-Version von Elementor enthalten, sodass wir sie nicht verwenden können Wenn es nicht brauchbar ist, hat es dieses kleine Schloss oben rechts Wenn es nutzbar ist, wenn es kostenlos ist, wird es das nicht haben. Also haben wir den Texteditor schon gesehen. Wenn ich jetzt den Grundtext zusammenfalle, können wir uns das Layout ansehen. Wie Sie sehen können, haben wir Container und Grid. Ich bevorzuge es, mit Containern zu arbeiten, und Sie werden sehen, warum. Wir werden während des gesamten Unterrichts Container verwenden. Wenn ich also einen Container hier in dieses Feld ziehe und dort ablege, wird er direkt unter den ersten Container verschoben. Und wenn ich Strg I drücke, kann ich die Struktur aufrufen, um die aktuelle Struktur zu sehen. Wenn ich das ausdehne, enthält es nichts , weil wir nichts hineingelegt haben. Also lass mich das löschen. Wir können mit diesem alleine arbeiten, weil er auch leer ist. Da wir nun mit Containern arbeiten werden , sich keine Sorgen. Ich werde erklären, wie Container funktionieren, aber lassen Sie mich das zusammenfassen. Lassen Sie uns nun sehen, wie Sie ein weiteres Element hinzufügen können. Sie haben den Texteditor bereits gesehen. Wenn ich ihn dort einfüge, kannst du deinen Text hier hinzufügen. Wenn Sie die Farbe oder das Erscheinungsbild des Stils ändern möchten, gehen Sie jetzt zum Stil. Zum Beispiel wollen wir es nicht auf der linken Seite haben. Wir wollen es in der Mitte haben. Also wähle ich die Ausrichtung in der Mitte aus, und jetzt ist sie an der Mitte ausgerichtet. Dies sind grundlegende Anforderungen an einen Texteditor , die jeder Texteditor haben sollte. Wenn wir zum Vorverkauf gehen , können wir auch die Farbe ändern. Im Moment ist es also grau. Wir können es auf Rot ändern. Wenn wir also weitermachen , erhalten wir dort Einstellungen wie Rand und Layouteinstellungen. Wenn ich also das Layout zusammenblende, haben wir viele Gruppen von Einstellungen. Beim Layout erhalten wir Ränder und Abstände und richten das Element selbst sowie die Reihenfolge und Größe All diese Dinge, wir werden sehen, wie man sie benutzt. Gehen wir zurück, um ein weiteres Element hinzuzufügen, fügen wir ein Bildelement hinzu. Welche Art von Inhalt erwartet ein Bildelement von einem Bild? Unter dem Tab „Inhalt“ erwarten wir also ein Bild anstelle von Text. Wählen Sie also das Bildelement und die Änderungen aus, um das Bild zu bearbeiten. Jetzt können wir ein Bild aus unserer Bibliothek auswählen. Wir können in die Medienbibliothek gehen wenn wir bereits Bilder hochgeladen haben, oder wenn wir keine haben, können wir Bilder hochladen und Dateien von unserem Computer auswählen. Also werde ich als Beispiel darauf doppelklicken . Und jetzt sind wir da. Es ist also schon vorausgewählt, ich sage auswählen. Und jetzt erscheint das Bild hier. Und wir können es weiter stylen. Wir können ihm eine maximale Breite von vielleicht 100% geben. Wir können ihm eine Höhe von 100% statt 500 Pixeln geben. Wir können die Breite manuell erhöhen. Jetzt, wo wir die maximale Breite festgelegt haben, steigt sie auf 100% und wir werden sehen, wie das geht. Also kurze Zusammenfassung. Wenn ich nun all diese anderen zusammenfasse, haben wir, wie Sie sehen können, auch diese allgemeine Registerkarte, die allgemeine Elemente enthält, die wir hinzufügen können, z. B. ein Testimonial Und wenn wir all diese Elemente hinzufügen, denken Sie daran Weil wir sie innerhalb dieses Containers hinzufügen, befinden sie sich alle unter dem Container in der Struktur, wenn ich ihn zusammenfalle Aber wenn ich jetzt einen weiteren Container hinzufüge, lasse ich ihn durch Hinzufügen einfach zusammenklappen. Um hier einen weiteren Container hinzuzufügen, können wir zu PAS und Layout gehen und hierher zurückkehren. Dann können wir Flexbox wählen. Und ich liebe es, Flexbox-Strukturen zu verwenden. Wir werden also keine Raster verwenden, wir werden mit Flexbox arbeiten Und das sind nur vorgefertigte Strukturen, mit denen Sie schnell Abschnitt mit zwei Spalten oder einen einspaltigen Abschnitt, einen Abschnitt mit vier Abschnitten und so weiter einrichten oder einen einspaltigen Abschnitt, einen Abschnitt können. Derzeit haben wir hier also diese Art von Struktur oder ist diese Art von Struktur Wenn ich diese Doppelstruktur auswähle, haben wir hier, wie Sie sehen können, zwei Abteilungen. Wenn ich diese auswähle, ist diese Seite, wie Sie sehen, länger. Es sind also nur vorgefertigte Strukturen , die uns helfen, unsere Website schnell zu erstellen Wenn ich also hier einen Container hinzufügen möchte, kann ich ihn einfach per Drag & Drop hineinziehen, und jetzt ist es ein Container in einem anderen Container Und ich kann ein Element hinzufügen, sagen wir, Link in Bio Minimalist, und los geht's. Das ist also ein ganzes Element, das wir bearbeiten und ändern können. So fügt man also im Grunde Elemente hinzu. Als Nächstes möchte ich, dass wir uns ansehen was sind diese Einstellungen? Wenn wir also zum Dashboard zurückkehren möchten, können wir zu Wordpress wechseln, aber hier gibt es noch andere Einstellungen , die sehr wichtig sind. Du erinnerst dich, als ich den Container duplizieren wollte , musste ich einfach hier klicken lassen. Ich musste mit der rechten Maustaste klicken und duplizieren. Das sind zwei Schritte , um eine Sache zu tun. Wenn ich diesen Container duplizieren möchte, muss ich mit der rechten Maustaste darauf klicken und ihn duplizieren Er wird dann hier unten angezeigt. Lass mich das einfach löschen. Wenn ich löschen möchte, muss ich mit der rechten Maustaste klicken und löschen. Aber wenn ich hierher komme, kann ich Benutzereinstellungen sagen, Schnellbearbeitungsoptionen anzeigen. Das heißt, wenn ich jetzt mit der Maus über eines dieser Elemente fahre, habe ich schnelle Abkürzungen zu einigen der häufigsten Dinge, die Sie mit einem Element tun möchten, z. B. duplizieren Wenn ich also hierher komme und darauf klicke, wird es automatisch dupliziert Wenn ich hierher komme und das noch einmal mache, ist das nur ein Klick, um eine Vervielfältigung zu machen Die Bearbeitungsgriffe oder Bearbeitungsoptionen sind sehr wichtig. Stellen Sie sicher, dass Sie sie aktiviert haben. diesen anderen können Sie sich auch die Geschichte der Dinge ansehen, die Sie getan haben, und Sie können in der Zeit zurückreisen. Sie können zu einem Zeitpunkt zurückkehren, an dem die Website auf eine bestimmte Weise aussah. Nehmen wir zum Beispiel an, Sie haben Fehler gemacht und möchten entfernen , um einige der Dinge rückgängig zu machen, die Sie getan haben. Sie können zurückgehen und sagen, zu dem Zeitpunkt, zu dem wir das Bild hinzugefügt haben, und so sah das Bildelement aus , als wir es hinzugefügt haben. Wir können auch zum Anfang zurückkehren und genau das hatten wir. Und wir können auch zu der begonnenen Bearbeitung zurückkehren, und genau das hatten wir, als wir anfingen. So können Sie schnell zu einem beliebigen Punkt in Ihrer Bearbeitungssitzung springen . Aber sobald du Elementor schließt und zurückkommst, wirst du das nicht mehr finden Das ist nur für diese Bearbeitungssitzung. Schauen wir uns das als Nächstes an. Dies sind Seiteneinstellungen, die wir im WordPress-Admin-Dashboard festlegen werden , daher werden wir sie hier nicht festlegen. Wenn wir eine Vorschau unserer Seite anzeigen möchten , müssen wir sie zunächst veröffentlichen. Und wir können hier klicken , um eine Vorschau der Änderungen anzuzeigen. Und so sieht die Seite aus, und so ist unser Inhalt. Wenn wir hier also Änderungen vornehmen, lassen Sie uns sagen, wir duplizieren dieses richtige Duplikat. Jetzt müssen wir. Wenn ich es veröffentliche, werden Sie feststellen, dass es automatisch geladen und neu geladen Und jetzt haben wir diese beiden Sätze. Wir können das auch als Vorlage speichern, was auch immer wir auf der Seite haben. Wir können es als Vorlage speichern und ihr einen Namen geben. Also werden wir uns im Laufe der Zeit ansehen , wie wir all diese Dinge tun können. Ich denke, im Moment wissen Sie alles, was Sie über die Benutzeroberfläche wissen müssen. Wenn wir damit beginnen, die Website so zu bearbeiten die Website so zu auf verschiedenen Geräten wie einem Tablet reagiert, können wir das mit diesen Tools tun. Moment sind dies also die Einstellungen, die Sie Im Moment sind dies also die Einstellungen, die Sie verstehen müssen , um die elementare Benutzeroberfläche verwenden und beim Erstellen Ihrer Seite navigieren zu können in der nächsten Lektion Lassen Sie uns in der nächsten Lektion nun unsere Homepage erstellen und beginnen mit der Nervenleiste. Wir sehen uns in Kürze. 8. Installiere das ElementsKit-Plugin: Jetzt haben Sie also einen groben Überblick über die elementare Benutzeroberfläche Es ist Zeit, mit dem eigentlichen Aufbau der Homepage zu beginnen und wir beginnen mit der Nervenleiste Also möchte ich zum WordPress-Admin-Bereich zurückkehren. Ich möchte das auch schließen. Und tatsächlich werde ich das trennen. Ich werde es als eigenes Fenster belassen. Lassen Sie mich jetzt einfach hierher wechseln. Und lass mich gehen. Lass mich einfach gehen, denn das ist keine Seite, die wir behalten werden. Ich wähle sogar alle aus, verschiebe sie in den Papierkorb und bewerbe mich. Jetzt haben wir also keine Webseiten mehr. Damit wir Ano erstellen können, müssen wir ein anderes elementares Plugin namens Elements Kit Light verwenden namens Elements Kit Light Also lasst uns weitermachen und es installieren. Plugins, füge neue hinzu. Und wenn ich Elementor eintippe, sind wir hier. Es hat mehr als 1 Million Installationen von Xpeed Studio. Elements Kit Elementor, Add-Ons und Vorlagen. Installieren, aktivieren und jetzt haben wir Elements Kit Light. Sobald wir es installiert haben, wird es auch hier angezeigt. Und was wir tun müssen, ist zur Kopf- und Fußzeile zu gehen. Und jetzt müssen wir diesen Setup-Assistenten durchlaufen. Sie uns also zunächst Lassen Sie uns also zunächst hier Advanced wählen. Und wenn Sie hier „Erweitert“ wählen, bedeutet das nur, dass uns mehr Elemente im Frontend zur Verfügung stehen , während wir unsere Seiten bearbeiten. Wenn du dir zum Beispiel diese Widgets hier ansiehst, denke ich, dass sie aktiviert werden, sobald wir auf Erweitert klicken. Wie Sie sehen können, wird es uns jetzt automatisch im Frontend zur Verfügung stehen. Erinnern Sie sich an den Editor, wir haben Elemente von links auf die Seite gezogen Elemente von links auf die Seite Diese Elemente werden uns zur Verfügung stehen. Als wir „Erweitert“ ausgewählt haben, wurden mehrere dieser Elemente, die ursprünglich nicht überprüft wurden, überprüft. Und jetzt fahren wir mit dem nächsten Schritt fort. Hier können Sie ihnen Ihre E-Mail-Adresse geben , damit sie Ihnen Angebote und Rabatte und all das zusenden können . Aber ich werde einfach auf Weiter klicken. Im nächsten Schritt können Sie unsensible Diagnosedaten teilen. Also klicke ich auf Nächster Schritt. Als Nächstes speichern Sie die Änderungen. Und da haben wir's. Jetzt können wir zu Header und Potter gehen. Und hier werden wir unseren Header, AKA, unsere Navbar, erstellen unseren Header, AKA, unsere Navbar, Also werden wir das in der nächsten Lektion tun . Wir sehen uns in Kürze. 9. Container verstehen: Jetzt sind wir bereit, mit dem Erstellen des Headers zu beginnen. Und denken Sie daran, wir sind zu Elements Kit Header und Footer gegangen. Ich sage einfach Neues hinzufügen und dann Header. Ja, der Typ ist Header. Wenn wir das Foto erstellen, kommen wir auch hierher und sagen Foto, aber im Moment ist es der Header, und wir möchten, dass er auf der gesamten Website angezeigt wird. Wenn du Bedingungen haben möchtest , auf welcher Seite es angezeigt werden soll, musst du die Pro-Version verwenden, aber das ist genug für mich. Dann wollen wir, dass es aktiv ist. Jetzt können wir einfach die Änderungen speichern und dann zurückkommen und Inhalt bearbeiten sagen, oder wir können einfach Inhalt bearbeiten sagen und direkt zum Frontend gehen, um ihn zu bearbeiten. Aber ich möchte das zuerst sagen. Um dir zu zeigen, dass es hier aufgeführt wird. Und wenn ich jetzt Bearbeiten sage, erhalten wir dasselbe Popup und ich kann sagen, dass der Inhalt der Bearbeitung an das Frontend weitergeleitet wird, wo wir jetzt unseren Header erstellen können. Und hier sind wir. Also dachte ich, bevor wir anfangen , den Header zu erstellen, sollte ich erklären, wie Container funktionieren. Dann werden wir in der nächsten Lektion sehen, wie der Header erstellt wird. Also ganz schnell, ich möchte hier ganz von vorne anfangen , ohne Container. Also haben wir eine leere Tafel. Wenn ich das jetzt auswähle, haben wir Flexbox, und ich möchte mit dieser Richtungsspalte beginnen Und mit Richtung meinen wir, wie Sie unter Layout sehen können, haben wir hier eine Richtung. Der Container kann ein horizontales oder ein vertikales Layout oder ein Zeilenlayout oder ein umgekehrtes Spaltenlayout haben. Das bedeutet, dass unabhängig vom Inhalt, der sich hier befindet, Inhalt, den wir im Container haben, in der Richtung angeordnet wird , die wir hier ausgewählt haben. Wenn ich zum Beispiel jetzt, wo wir den Container hier haben, eine Überschrift hinzufüge und hinzufüge, wie Sie sehen können, befindet sich die Überschrift innerhalb des Containers. Wenn ich noch einmal hier reingehe und, sagen wir, eine Schaltfläche hinzufüge , gehe ich wieder rein und füge hinzu, sagen wir zum Beispiel jetzt, lass uns mit diesen beiden weitermachen. Wenn ich den Container auswähle, in dem wir die Richtung des Inhalts festlegen sollen , ist derzeit jedes Element vertikal angeordnet. Wenn wir also ein weiteres Element wie ein Bild hinzufügen, wird es direkt unter dem untersten Element in der Gruppe platziert. Wenn ich wieder reingehe, ist das eine vertikale Richtung. Aber wenn ich möchte, dass die Dinge von links nach rechts laufen , wähle ich das aus. Und jetzt, wie Sie sehen können, haben wir die Überschrift, die Schaltfläche und das Bild. Und das ist sehr mächtig, weil es uns ermöglicht, dieses Ziel zu erreichen, wie Sie sehen können. Stellen Sie sich vor, wir haben hier zwei Spalten, eins, zwei. Das sind zwei Spalten, eine Spalte für ein Bild und eine Spalte für den Textblock. Dieser Container hier, der den Textblock enthält, ist also tatsächlich vertikal. Aber der Container, der den Textblock und das Bild enthält, ist horizontal. Ich hoffe, du verstehst diesen Punkt. Gehen wir jetzt zurück zu unserem Beispiel hier. Was wir in diesem Container haben, sind nur Elemente. Das sind keine Container. Das sind Elemente. Dies ist ein Text- und Überschriftenelement. Dies ist ein Button-Element, und dies ist ein Bildelement. Wenn wir ein komplexes Containersystem wie dieses haben wollen, müssen wir Container innerhalb von Containern verwenden. Lassen Sie uns also alles hier entfernen. Ich wähle das einfach aus und lösche das Löschen. Jetzt bleibt uns wieder ein Container übrig. Wenn ich hier zu Plus gehe, kann ich dort einen Container hinzufügen. Wie Sie sehen können, ist es ein Container in einem Container. Mit diesem Container können wir auch die Richtung festlegen. Aber bevor wir zur Richtung kommen, können wir sagen, lassen Sie uns einen weiteren Container hineinlegen denn wenn wir annehmen, dieser Container hier, ist der Container, der hier alles enthält. Er sollte in zwei Teile aufgeteilt werden, sodass wir zwei weitere Container hinzufügen können, einen. Wenn wir das jetzt duplizieren, gehen wir einfach zurück zu den Benutzereinstellungen und sagen „Schnellbearbeitungsoptionen anzeigen“. Wenn ich das nun in einem Container dupliziere , lass mich das zusammenklappen. Wir haben zwei Container in diesem Container, der sich in diesem Container befindet. Aber diese beiden Behälter sind übereinander gestapelt, wie Sie sehen können, eins, zwei, aber wir wollen, dass sie nebeneinander liegen, eins, zwei Also wählen wir einen Container , der diese beiden enthält, also diesen, oder wir können hier hingehen und diesen auswählen und die Richtung hier ändern, sagen wir eins, zwei, sodass es horizontal ist Denken Sie daran, dieser Container befindet sich in diesem Container. Jetzt können wir das zu 100% breit machen. In Ordnung, lassen wir uns nicht überholen. Wie Sie sehen können, können wir in diesen Containern jetzt eine Überschrift hinzufügen Zum Beispiel können Sie zu dieser Überschrift zurückkehren und einen Editor hinzufügen und hier wieder reingehen und eine Schaltfläche hinzufügen , wenn diese rosafarbene Linie erscheint. Dann können wir hier ein Bildelement hinzufügen. Und wenn ich jetzt veröffentliche und eine Vorschau ansehe, haben wir ein Container-Layout nebeneinander. Das war also nur eine kurze Einführung in Container , damit Sie sehen können, wie nützlich sie für das Layout Ihrer Seiten sind. Es bietet Ihnen viel Flexibilität, um sehr komplexe Designs zu erstellen. Also ich denke, wir werden diese Lektion hier beenden. Wir wollen es nicht zu lang machen. In der nächsten Lektion wollen wir nun damit beginnen, diese Container tatsächlich zu nutzen. Wir sehen uns also in Kürze. 10. Logo hinzufügen: Jetzt, wo Sie Container verstanden haben, ist es an der Zeit, unseren Header zu erstellen. Und das erste, was wir tun möchten, ist unser Website-Logo hinzuzufügen. Also lass mich das einfach schließen und wieder rein gehen. Denken Sie daran, wir haben unseren Header bearbeitet, und deshalb steht hier oben Header. Also möchte ich einfach weitermachen und alles löschen, damit wir von vorne anfangen können. Jetzt möchte ich hier zu unserer Beispiel-Website navigieren, damit wir uns die Struktur ansehen können, die wir erreichen möchten. Wir haben hier ein Logo, wir haben die Suchleiste, wir haben die Menüelemente und wir haben eine Kartenschaltfläche. Aber wir werden mit einem Richtungscontainer beginnen. Gehen wir also wieder rein, wählen wir Flexbox und dann das aus Also, das ist kein Container. Dies soll uns nur zeigen, wo der Inhalt in diesem Container enthalten sein wird. Hier wird es keinen Inhalt geben. Aber wir müssen einen Container hinzufügen. Also gehe ich hier rein und sage Container und füge es genau dort hinzu. Nun, wie Sie auf unserer Referenz-Website sehen können, haben wir hier rechts und links diese Lücke, was bedeutet, dass es einen Container gibt der nur den Inhalt der Nu-Bar enthält, und er ist nicht zu 100% breit. Und das meine ich. Derzeit haben wir also diesen Außenbehälter , der alles fasst. Ich möchte, dass wir es zu 100% breit machen. Nicht 1.000 kommen rein. Jetzt ist er also 100% breit, der äußere rosafarbene Behälter. Und weil wir die Breite des inneren Containers noch nicht festgelegt haben , er auch den gesamten verfügbaren Platz in dem Container ein , in dem er sich befindet Wir können also den inneren Behälter auswählen und sagen, wir möchten, dass er nur 80% des äußeren Containers einnimmt Aber jetzt beachte, dass es nach links ausgerichtet ist. Also können wir herkommen. Wir können den äußeren Behälter auswählen. Derzeit ist der innere Behälter ausgewählt. Also wähle ich den äußeren Behälter aus, und das ist eine weitere coole Sache an der Struktur. Sie können damit etwas auswählen, wenn Sie es auf der Seite nicht auswählen können. Jetzt habe ich den äußeren Behälter ausgewählt, und jetzt, wo er ausgewählt ist, kann ich hierher kommen, um die Elemente in der Mitte auszurichten. Wenn ich darauf klicke, sieh dir das an, sieh dir den inneren Behälter an. Wenn ich Mitte auswähle, haben wir alles , was in diesem äußeren Behälter enthalten ist, in der Mitte ausgerichtet . Lass uns das veröffentlichen. Und jetzt wir zu unserem Referenzbild zurück. Denken Sie daran, wir sagten, wir haben eine Spalte für das Logo. Wir haben eine für die Suchleiste, und wir können diese vorerst getrennt machen. Lassen Sie uns also drei Container in diesem Container erstellen. Also sage ich hinzufügen. Dann ziehe ich einen Container hinein. Und um es uns einfach zu machen, muss ich nicht zurückgehen und einen weiteren Container kopieren. Ich kann das einfach zweimal duplizieren, eins, zwei, und jetzt sind sie übereinander gestapelt Also wählen wir den aus , der sie alle enthält. Wenn es für Sie schwierig ist, es auszuwählen, verwenden Sie einfach die Struktur. Und jetzt wollen wir all das horizontal anordnen . Also gehe ich in diese Richtung, und jetzt haben wir drei Container. Lassen Sie mich das veröffentlichen. Es versteht sich von selbst, dass wir hier ein Bildelement einfügen, also ziehe ich ein Bildelement und wähle das Bild aus, das ich verwenden möchte. Wir hatten nur ein Bild hochgeladen, also werde ich Dateien hochladen und Dateien auswählen. Und wie immer bei all meinen Kursen werde ich diesen Assets-Ordner bereitstellen, der alle Bilder enthält, die Sie als Beispielprodukte verwenden können , um in diesem Kurs weiterzumachen. Ich habe sie so vorbereitet, dass sie in KB sehr leicht sind, sie sind nicht einmal MB groß Und das ist eine weitere Sache, die Sie beachten müssen. Halte deine Bilder so hell wie möglich, damit deine Website zuerst geladen werden kann. Wie Sie sehen können, haben wir hier ein Logo, das ich als Muster für Sie vorbereitet habe. Ich doppelklicke auf das Logo. Und denken Sie daran, ich habe gesagt, dass Sie den Assets-Ordner unter diesem Video finden werden . Suchen Sie einfach nach dem Link unter dem Videoplayer. Jetzt ist es schon geladen. Ich sage auswählen. Und da haben wir's. Unser Logo wird hinzugefügt. Beachten Sie nun, dass das Logo hier klein ist, sodass wir es ziehen können. Wir können mit der Maus darüber fahren und wenn doppelseitige Pfeil erscheint, können wir ihn ziehen oder wir können die gewünschte Größe manuell eingeben Also möchte ich das manuell eingeben. Ich wähle den Behälter aus , der das Logo enthält, und mache ihn auf 20% seiner Breite. Dieser Container, der die drei enthält, wird zu 20% vom Logo eingenommen. Vielleicht können 30% durch die Menüelemente, die Nervenleiste und die Schaltfläche und dann die Suchleiste belegt die Nervenleiste und die Schaltfläche und dann werden. Vielleicht können wir das auf 40% schaffen. Lassen wir es jetzt bei 30 stehen. Das kann also 50 belegen. Ich wähle das aus und sage 50, also sind es 50, 30, 20, um 100% aus diesem Container zu machen. Und denken Sie daran, dass dieser Container 80% des äußersten Containers So fügen Sie also Ihr Logo hinzu. In der nächsten Lektion sehen wir uns an, wie Sie Ihr Nervenmenü hinzufügen. Dieses Navigationsmenü. Also werde ich dich in Kürze sehen. 11. Füge ein Navigationsmenü hinzu: Jetzt ist es an der Zeit, das Nervenmenü hinzuzufügen. Also, wie machen wir das? Gehen wir zurück zu unserem Arbeitsbereich. Da haben wir's. Lassen Sie mich das einfach veröffentlichen, bevor wir weitermachen, und lassen Sie uns eine Vorschau der Änderungen anzeigen. Das ist es also, was wir gerade haben. Denken Sie also daran, dass wir das Elements Kit installiert haben. Wenn ich also herkomme und Nerve eintippe, werden Sie feststellen, dass wir das Elements-Kit-Nerven-Menü haben, und wir haben auch das Nerve-Menü. Dies ist mit Element of Pro verfügbar. Aber eine Sache mit elementaren Add-Ons wie Elements Kit ist, dass sie uns diese zusätzlichen kostenlosen Elemente geben , für deren Zugriff wir sonst hätten bezahlen müssen Also ziehe ich das Elements-Kit-Nerve-Menü und lege es dort ab Und wenn wir es jetzt löschen, ist es immer noch das aktive Element. Deshalb heißt es dort „ Elemente bearbeiten Kit Nerve“ -Menü , weil das das Element ist. Und jetzt ist die erste Option hier das Auswahlmenü. Wir müssen also ein Menü auswählen, das angezeigt werden soll , da dies im Wesentlichen ein Menü ist. Und um ein Menü anzuzeigen, müssen wir es zuerst in Wordpress, Admin-Bereich, erstellen. Bevor wir also weit gehen, lassen Sie mich sagen, veröffentlichen. Ich komme hierher und möchte zu Wordpress zurückkehren, aber anstatt diesen Editor zu verlassen, möchte ich einen Link schreiben und Link in neuem Tab öffnen, und dann nehme ich diesen neuen Tab und gehe zum Admin-Bereich. Das ist immer noch intakt. Gehen wir also zurück zum Admin-Bereich, sagen wir, Erscheinungsmenüs. Also hier sind wir. Wir können unser Menü unten erstellen. Lassen Sie mich diese Benachrichtigung einfach schließen. Wie Sie sehen können, können wir Menüelemente hinzufügen, und Menüelemente können Seiten sein. Es können Beiträge wie ein Blogbeitrag sein, wie Artikel. Es können benutzerdefinierte Links sein. Wir können einfach Direktlinks, Produktkategorien oder Kategorien anderer Arten von Inhalten verwenden. Wir möchten jedoch Seiten als Menüelemente haben, was bedeutet, dass wir einige Seiten erstellen müssen. Also gehe ich zu Seiten, anstatt diesen Bereich zu schließen, gehe ich einfach zu Seiten, verlinke mit der rechten Maustaste auf „ Neu hinzufügen“ und „Link in neuem Tab öffnen “. Los geht's. Jetzt können wir dieser Seite einen Namen geben. Sagen wir Kontakt. Wie Sie sehen können, ist das die Seite, die wir hier haben. Wir versuchen hier nicht, viele Seiten zu erstellen. Dies soll Ihnen zeigen , wie Sie einen Online-Shop aufbauen. Sobald Sie gelernt haben, wie die Homepage oder diese einzelne Kontaktseite erstellen, können Sie eine Aus-Seite, eine Seite mit Datenschutzrichtlinien Nutzungsbedingungen erstellen. Sie können all diese Arten von Seiten erstellen. Lassen Sie uns jetzt diese Kontaktseite erstellen. Wir versuchen vorerst nicht, hier irgendwelche Einstellungen zu ändern. Wir wollen es nur veröffentlichen. Also werde ich weitermachen und das veröffentlichen. Und jetzt, wo wir wieder reingehen, denken Sie daran, dass wir diesen Ort nie verlassen haben. Wenn ich diese Seite aktualisiere oder neu lade, haben wir die Kontaktseite hier, aber sie ist nicht mehr aktuell Wir können sie nicht benutzen. Das liegt daran, dass wir ein Menü erstellen müssen. Geben wir ihm einen Namen. Lass mich ihm einfach den Namen mein Menü geben. Und dann machen wir es zum Hauptmenü und erstellen ein Menü. Schau dir diesen Bereich an. Jetzt ist es aktiv, weil wir ein Menü haben , zu dem wir Artikel hinzufügen können. Kontakt, zum Menü hinzufügen. Es wurde dem Menü hinzugefügt. Menü speichern. Da haben wir's. Lassen Sie mich das jetzt einfach schließen , weil wir damit fertig sind. Wenn ich hierher zurückkehre, denke ich daran, dass wir das geöffnet hatten und wir es veröffentlicht hatten. Wenn ich die Seite neu lade, wenn ich das Nervenelement erneut auswähle, die Elemente auf das Nervenmenü und komme hierher, denke daran, dass wir ein Menü namens Mein Menü erstellt haben Mein Menü. Jetzt haben wir es ausgewählt, wie Sie sehen können, es zeigt die Menüelemente, die es hat, und das ist nur eine Seite. Also horizontale Menüposition, sagen wir, schreiben, um die Seite zu wechseln. Lass mich das schließen. Jetzt ist es auf der rechten Seite positioniert. Veröffentlichen. Sehen wir uns eine Vorschau der Änderungen an. Da haben wir's. Also hier ist unsere Kontaktseite. Wenn wir wieder rein gehen, können wir mehr Seiten erstellen. Lass mich wieder rein gehen. Lass uns einfach ein paar weitere Seiten erstellen. Bewegen Sie den Mauszeiger darüber und klicken Sie dann mit der rechten Maustaste auf Neu hinzufügen. Anstatt den Mauszeiger zu bewegen und mit der rechten Maustaste zu klicken, können Sie auch einfach den Mauszeiger bewegen und die mittlere Maustaste drücken Es wird in einem neuen Tab geöffnet. Lassen Sie uns also zwei Seiten erstellen. Lass mich das einfach Zuhause nennen. Veröffentlichen, veröffentlichen, veröffentlichen. Und nennen wir das Ganze „ Veröffentlichen, Veröffentlichen“. Schließ das und das. Und jetzt laden wir diese Seite neu. Und lassen Sie uns das Home and About To-Menü hinzufügen. Lassen Sie mich sie mit nach Hause nehmen und dort ablegen nur um sicherzugehen, dass wir sie richtig anordnen, das Menü speichern. Und jetzt, zurück zum Anfang, muss ich nur noch einmal auf Vorschau der Änderungen klicken. Diese Seite wird mit den neuen Änderungen neu geladen. Wir können auch einfach mit der rechten Maustaste klicken und diese Seite neu laden, damit wir die neuen Menüelemente auch in unserem Editor sehen können die neuen Menüelemente auch in unserem Editor sehen . Also los geht's Das nächste, was ich tun möchte, wenn wir hier fertig sind, ist die Farben zu ändern Lass uns mit diesen Ladenfarben gehen. Nun, Sie werden hier oben feststellen, dass ich dieses Tool habe, diese Chrome-Erweiterung namens RGB Color Picker Ich kann das auswählen. Du kannst es installieren. Es ist kostenlos. Dann kann ich sagen, wähle Farbe. Und wenn ich mit der Maus darüber fahre, kann ich eine Farbe für ein Pixel auswählen. Und los geht's Ich wähle den Teppich aus, wähle dieses Nervenmenü. Und weil es das aktive Element ist, gehe ich zu Stil, Menü-Wrapper zusammenklappen, Menüelement, weil es sich dabei um Menüelemente handelt Wie Sie unter Menüelementstil und Elementtextfarbe sehen können, ist es derzeit schwarz, und wenn Sie den Mauszeiger darüber bewegen, ist es grau. Deshalb wird es grau, wenn wir den Mauszeiger Bewegen Sie den Mauszeiger, wir möchten, dass es diese Farbe hat. Wenn ich jetzt mit der Maus darüber fahre, hat es dieselbe Markenfarbe wie unser Markenlogo Und wenn die Seite aktiv ist, sollte sie auch diese Farbe Wenn ich veröffentliche, sehe ich mir die Änderungen in der Vorschau an. Wenn ich jetzt mit der Maus über eines dieser Menüelemente fahre, ändern sie ihre Farbe Und wenn es sich bei der aktiven Seite um die Info-Seite handelt und ich, wie Sie sehen, „Über uns“ auswähle ist dies die A-Seite, und sie ist aktiv, also orange So erstellt man also das Nervenmenü. In der nächsten Lektion wollen wir uns ansehen, wie Sie ein Favicon hinzufügen, da wir derzeit, wie Sie sehen können, nur diesen generischen Platzhalter für Symbole haben diesen generischen Platzhalter für Symbole Wenn Sie sich das Favicon für Namenschips ansehen, haben sie Also, wie fügen wir das hinzu? Mal sehen, wie das geht. In der nächsten Lektion. Wir sehen uns in Kürze. 12. Füge ein Favicon hinzu: Jetzt ist es an der Zeit, unserer Website ein Fabricon hinzuzufügen. Es gibt zwei Möglichkeiten , zu dem Ort zu gelangen, an dem Sie den Fabcon aufstellen können Eine Möglichkeit besteht darin, zum Erscheinungsbild zu wechseln, anzupassen und wir werden zum Frontend-Editor des Themas weitergeleitet , nämlich Astra Hier legen Sie die Astra-Einstellungen fest. Eine andere Möglichkeit, hierher zu gelangen, ist wenn ich schon im Frontend bin, ich kann einfach zum Anpassen gehen. Also werden wir an denselben Ort gebracht. Wenn ich das jetzt abschließe, gehe ich zurück zu hier, weil wir das schon hatten, und wir gehen zur Seitenidentität und wählen das Site-Symbol aus. Es gibt also verschiedene Möglichkeiten , an denselben Ort zu gelangen. Also gehe ich zum Assets-Ordner, und ich hatte bereits ein Favicon für dich erstellt Und ich denke, ich hätte das Gegenteil dieser Farbe machen sollen, weil dieses Blau dunkel ist Es hätte weiß und die Linie blau sein sollen. Aber kein Problem. Lass uns damit weitermachen. Da haben wir's. Wählen Sie also Und jetzt, wie Sie sehen können, haben wir es als Seitensymbol festgelegt. Lassen Sie mich jetzt sehen, ob ich ein anderes auswählen kann , weil mir das nicht gefällt Lassen Sie mich sehen, ob ich etwas finde. Lassen Sie mich diesen Schuh vorerst einfach als unseren Stoff verwenden Aber das Wichtigste ist, dass Sie verstehen, wie Sie das Favicon hinzufügen Also wähle ich diesen Schuh als Favicon aus, weil er heller ist , und sage „Auswählen“. Jetzt schau dir das an Jetzt, wie Sie sehen können, ist es hell genug Veröffentlichung gesehen zu werden. Wenn Sie sich jetzt im Elementar-Editor befinden, Seite aktualisieren Fabricon nicht sichtbar, auch wenn Sie die , da Sie sich im Bearbeitungsmodus Wenn Sie jedoch eine Vorschau anzeigen, befinden Sie sich nicht im Bearbeitungsmodus. Das Fabricon wird angezeigt, da es sich um eine tatsächliche Vorschauseite handelt So richten Sie also ein Fabricon für Ihre WordPress-Website der nächsten Lektion wollen wir sehen, wie WordPress mitteilen können, welche Seite unsere Homepage ist, denn wenn Leute auf dieses Logo klicken , dieses Logo, soll uns das zu dieser Homepage führen, der Basis-Homepage. Ich habe sogar vergessen, das zu tun Wenn es ausgewählt ist, gehe ich zu Link und sage benutzerdefinierte URL und füge unsere Basis-URL ein. Das wird yourBSRL, deine website.com sein und sagen, dass Publish this Ich werde einfach dorthin gehen. Und jetzt, wenn ich mit der Maus darüber fahre, kannst du sehen, dass es anklickbar ist Wenn ich darauf klicke, sollte es uns nach Hause bringen. Dies ist die Seite, die derzeit als Startseite eingerichtet ist, aber das ist nicht unsere Homepage. Dies ist ein Raster von Blogbeiträgen oder Artikeln, die hier aufgelistet worden wären. Wie richten wir also die Homepage ein? Sehen wir uns das in der nächsten Lektion an. 13. Startseite einstellen: Jetzt ist es an der Zeit, unsere Homepage als Startseite festzulegen , denn wenn ich jetzt zur Startseite gehe, denke daran, dass dies eine Seite ist, die wir erstellt haben. Wenn Sie sich die URL ansehen, wird es unser Domain.com-Slash HOME sein , denn das ist eine Seite, die wir Denken Sie daran, Seiten. Wir haben eine Homepage, aber wir möchten, dass die Einstellungen so sind, dass wenn der Benutzer auf diese Seite geht, sie nichts mit diesem Schrägstrich haben sollte . Wie stellen wir das also Wenn ich wieder reingehe, gehe ich zu Einstellungen und lese. Und jetzt zeigt Ihre Homepage eine statische Seite an, und die statische Seite ist Home. Änderungen speichern. Und jetzt, zurück zur Titelseite, und wenn ich jetzt Home auswähle, wie Sie jetzt sehen können, wenn jemand vifxpd.com irgendwo als Link findet und darauf klickt, wird er speziell auf diese Seite weitergeleitet, nämlich vifxpt.com ordmain.com , die Jetzt, ab der nächsten Lektion, werden wir natürlich damit beginnen, wir Und denken Sie daran, wir hatten einen Heldenbereich, wir werden mit dem Heldenbereich beginnen. So erstellt man also eine bestimmte Seite, die Homepage, weil wir jede dieser Seiten als Startseite festlegen können . Und eine weitere Sache, die wir jetzt tun müssen, während wir an der Website arbeiten , ist, Suchmaschinen davon abzuhalten , diese Website zu indexieren Das bedeutet einfach, dass Suchmaschinen wie Google und Bing ihre Spider nicht zum Crawlen und Indexieren dieser Website aussenden zum Crawlen und Indexieren , weil sie sich im Aufbau befindet, weil Suchmaschinen normalerweise kleine Codefragmente über das Internet senden , um nach neuen Websites zu suchen , um die Website in ihrer Datenbank zu indizieren und zu organisieren und sie in den Suchergebnissen anzeigen zu können. Wir sind jedoch noch nicht bereit, dass Google und Ben wissen, dass unsere Website existiert , da sich dies derzeit auf unsere Suchmaschinenoptimierung auswirken wird. Deshalb möchten wir Suchmaschinen davon abhalten , unsere Website zu indexieren Das sagt Google-Spidern und automatisierten Google-Robotern: Hey, schauen Sie sich diese Website vorerst nicht einmal an Schauen Sie sich diese Website vorerst nicht einmal an. Speichern Sie keine ihrer Seiten, um sie anderen zu zeigen , wenn sie nach etwas Ähnlichem suchen wie wir. Verlassen Sie diese Website vorerst einfach. Sobald wir mit dem Aufbau der Website fertig sind, werden wir das überprüfen. Speichern Sie also die Änderungen. Fantastisch. Jetzt, wo wir unsere Homepage eingerichtet haben, ist es an der Zeit, mit dem Aufbau zu beginnen. Und natürlich werden wir mit dem Heldenbereich beginnen. Das ist unsere Homepage. Wenn ich zu unserer Beispiel- oder Referenzwebsite wechsle, ist dies der Heldenbereich. Schauen wir uns also an, wie man so etwas erstellt. Wir sehen uns in Kürze. 14. Hero-Textblock: Jetzt ist es an der Zeit, den Heldenbereich zu erstellen , und wir beginnen mit dem Textblock. Wenn wir jetzt zurück zu unserer Website wechseln , können wir einfach auf Mit Elementor bearbeiten klicken Was wir tun können, ist zur Seite bearbeiten zu gehen, da es sich derzeit nicht um eine Elementor-Seite Es ist nur eine Wordpress Astra-Seite. Wir können auf Mit Elementor bearbeiten klicken, und das macht es jetzt zu einer Elementor-Seite Aber bevor wir das tun, können wir herkommen. Wir müssen hierher kommen und die Vorlage auf Element mit voller Breite ändern . Wir möchten, dass es sich um eine Seite mit voller Breite denn beachten Sie das jetzt, dies sind Worpes-Einstellungen Wir müssen uns auch die Astra-Einstellungen ansehen. Denken Sie daran, unser Thema ist Astra. Also hier, beim Container-Layout, nehme ich die volle Breite. Ändern Sie nichts davon, da sie nur gelten wenn das Layout entweder auf schmal oder normal, schmal oder normal eingestellt ist , wir aber die volle Breite ausgewählt haben. Ignoriere das also. Erweitere das. Wir wollen keine Seitenleiste, also keine Seitenleiste Ignorieren Sie dies, da es nur gilt, wenn das Layout auf normal eingestellt ist. Wir haben keine Seitenleiste ausgewählt Elemente deaktivieren. diese Weise können wir einige der Elemente deaktivieren, die wir gesehen haben , als diese Seite noch eine WordPress-Astra-Seite war, keine elementare Seite Lassen Sie mich Ihnen ein Beispiel zeigen bevor wir daraus eine elementare Seite machen Ich lasse das einfach dort und gehe zurück zu den Seiten. Wenn ich Ansicht auswähle, können wir verlinken und Link in neuem Tab öffnen. Jetzt haben wir dieses A und diese Astra-Fußzeile. wieder rein gehen, können wir die Kopfzeile deaktivieren, die das ist und die Fußzeile, was das ist Lassen Sie uns auch den Bannerbereich entfernen. Dann speichern. Das sind nun die Einstellungen für die Homepage. Wenn ich diese Seite bearbeite, möchte ich dir nur zeigen, was wir gerade gemacht haben wieder rein gegangen sind und Elemente deaktiviert haben. Wenn wir den Header deaktivieren und ihn speichern und die Seite ansehen, wird sie nicht warten. Was passiert hier? Header deaktivieren, Bannerbereich deaktivieren. Lass uns das auch machen. Lass uns sehen. Oh, wir müssen es zuerst zu einem Element mit voller Breite machen, es zuerst zu einem Element mit voller Breite machen, aber bevor wir es ändern, schauen wir uns eine Vorschau an. Ordnung, ja. Also wird es wirksam. Wir haben den Bannerbereich, den Header, deaktiviert. Und jetzt, wie Sie sehen können, haben wir immer noch die Fußzeile. Wenn wir hierher kommen und sagen, die Fußzeile deaktivieren und diese speichern und noch einmal eine Vorschau der Änderungen Jetzt ist alles weg, bereit, in eine elementare Seite umgewandelt zu werden, aber es ist noch keine elementare Seite weil wir sie nicht mit elementar bearbeitet haben, aber das ist die At-Seite Schließt alle Instanzen der Seite „Über uns “. Nun, wenn ich wieder reingehe, hoffe ich, dass du verstehst, was wir damit gemacht haben. Jetzt, wo es gespeichert ist, können wir es in eine elementare Seite umwandeln. Und hier sind wir. Denken Sie also daran, dass wir den Header oder die Nervenleiste in einem separaten Editor in einem anderen Teil mit Elements Kit Light erstellt einem separaten Editor in haben. Jetzt ist es also nicht editierbar. Wir können es hier nicht bearbeiten. Aber wir können eine Flexbox hinzufügen , damit wir mit der Erstellung des Heldenbereichs beginnen können Das ist sowieso alles, was wir brauchen. Lassen Sie mich also diesen Richtungscontainer hinzufügen. Und wie immer möchte ich einen weiteren Container darin hinzufügen. Und denk dran, was wir mit dem Header gemacht haben. Ich möchte, dass dies eine Breite von 100% hat. Also mit dem Prozentsatz 100 und jetzt sind es 100%, und der innere Behälter sollte 80% des äußeren Containers einnehmen Er befindet sich auf der linken Seite, also gehen wir zurück zum äußeren Behälter und richten alles, was sich darin befindet, in der Mitte bedeutet, dass unser Inhalt auch in der Breite den gleichen Platz wie die Kopfzeile einnimmt . Lass uns das veröffentlichen. Und wie üblich fügen wir jetzt auch einen weiteren Container hinzu. Und duplizieren Sie es. Jetzt haben wir zwei. Jetzt wählen wir den äußeren und ändern die Richtung, und jetzt haben wir einen doppelspaltigen Heldenbereich. Hier können wir unser Bild, unser Heldenbild, hinzufügen und mit der Auswahl fortfahren. Oh, warte, ja, wir können weitermachen und das Heldenbild auswählen. Das sollte eine separate Lektion sein. Also lass mich das rückgängig machen. Lass mich einfach herkommen und den Textblock hinzufügen. Also eine Überschrift, lass uns hier wieder reingehen, einen Texteditor hinzufügen , ihn direkt darunter ablegen und hier runter gehen und eine Schaltfläche hinzufügen. Veröffentlichen Sie das. Lassen Sie uns eine Vorschau der Änderungen anzeigen , und genau das haben wir. Als erstes müssen wir also den Text auswählen. Und natürlich werden Sie hier Ihren eigenen Text eingeben, aber ich werde kopieren, was ich hier habe. Also drei kostenlose D-Modelle. Verstanden. Solange das ausgewählt ist, füge ich es hier ein. Fügen Sie hier keinen Text direkt ein. Es ist zwar möglich, aber es wird mit allen Vorformatierungen geliefert , die es von dem Ort hatte, an dem Sie es kopiert haben Möglicherweise möchten Sie also nicht die Vorformatierung verwenden, die Stelle hatte , an der Sie es kopiert Also mach das. Lösch das. Sie möchten es also hier einfügen, damit Sie nach Belieben ein neues Styling anwenden können. Also werde ich das dabei belassen. Ich wähle das aus. Ich bin gerade zu JAGPT gegangen und habe ChagPT gebeten, mir einen Text auszudenken Das war eine andere Website. Deshalb siehst du, dass es digitale Dateien hat. Ich habe eine digitale Download-Website erstellt. Aber wir arbeiten an einer physischen Produktwebsite. Ich wähle diesen Text aus, doppelklicke darauf und füge ihn dort ein. Jetzt wird es nicht angezeigt, denn wenn ich es auswähle, werden Sie jetzt sehen, wie die Änderung wirksam wird. Ich weiß nicht, was der Fehler ist, aber wenn ich es veröffentliche, aktualisiere, kann ich das auswählen, zu Stil, Bearbeitungsstil, Typografie wechseln wir können es in Montserrat ändern, was Und wir können das Gewicht auf 900 Schwarz ändern , was Dann können wir die Größe auch nach unseren Wünschen erhöhen, vielleicht bis zu dieser Stelle Und ich möchte, dass das so etwas wie „Von tollen Produkten zu erschwinglichen Preisen“ liest tollen Produkten zu erschwinglichen Preisen Oder einfach tolle Produkte zu erschwinglichen Preisen und zurück zum Stil. Typografie, wir können die Zeilenhöhe reduzieren. Vielleicht können wir bis zu dieser Stelle nach draußen klicken, Textfarbe wählen und sie so schwarz machen Sie können dies auch auswählen und den Stil wie bei der Typografie ändern Lass es uns auch Montserrat machen. Montserrat. Wenn ich auf diese Schaltfläche klicke, kann ich den Text ändern, alle Produkte, alle Produkte Und wir können die Hintergrundfarbe ändern, aber ich möchte die Markenfarben verwenden. Also gehe ich hier zu meinem Farbwähler und wähle Farbe, wähle die blauen Pixel aus, kopiere, wähle das aus, gehe zu Stil, Schaltfläche, Hintergrundtyp Farbe. Und ich füge das da und jetzt nimmt es die Farbe unserer Marke an. Sehr nett. Ich mag es, wenn meine Knöpfe links und rechts mehr Polsterung haben, also breche ich diese Polsterung auf , gebe ihr eine linke Polsterung von 50, eine rechte Polsterung von 50. rechte Polsterung Sagen wir hier 15. Und hier 15. Und ich gebe ihm auch gerne einen Randradius , der rund ist, also 50. Oder wir können es einfach bei vielleicht zehn belassen. Zehn ist okay, und ich werde eine Vorschau davon sehen. Da haben wir's. Wir können diese Farbe auch herstellen. Ich wähle dieses Blau aus, kopiere, Strg C, während das ausgewählt ist, wähle es aus, gehe zu Stil, Textfarbe einfügen. Ja, machen wir es so blau. Jetzt fragst du dich vielleicht, wie ich das Rot gemacht habe? Ich habe benutzt, was wir CSS nennen. Ich wollte dir später zeigen, wie das geht. Wir werden einen Abschnitt über CSS und benutzerdefiniertes CSS haben, aber wir können ihn gleich hier hinzufügen , damit wir etwas haben, das gut aussieht. Tolle Produkte zu oder zu erschwinglichen Preisen. Erschwinglich. Wenn Sie das Wort erschwinglich in einer anderen Farbe verwenden möchten , können wir ein HTML-Element namens span verwenden . Also nehme ich diese beiden Klammern und tippe dann span in Kleinbuchstaben Span. Und am Ende werde ich eine weitere Spanne haben. Aber dieses Mal vor dem Wort Span muss es einen Schrägstrich und dann Span haben Das sagt Elementor und Wordpress: Hey, ich möchte etwas mit diesem speziellen Text machen Es ist wie ein Selektor. Es ist, als würdest du auswählen, es ist als würdest du dieses bestimmte Wort auswählen und Wordpress sagen, ich etwas mit dem Text machen möchte dass ich etwas mit dem Text machen möchte, den ich ausgewählt habe Wenn wir also zur ersten Spanklammer gehen und sagen, dass Stil gleich ist, können wir doppelte Anführungszeichen verwenden Dann ist der Aspekt des Textes, den wir ändern wollen, die Farbe. Wir können neben der Farbe auch andere Dinge ändern, aber wir möchten die Farbe vorerst ändern. Also gebe ich ihm eine Kolumne. In einem Leerzeichen wähle ich dann diese Farbe aus. Ich gehe zu meiner Farbe und lasse mich zur kopierten Farbe wechseln. Und wenn ich nach der Spalte hierher komme, füge ich sie dort ein, jetzt nimmt sie diese Farbe an. Also sagen wir Wordpress und Element: Hey, ich möchte etwas mit diesem Text machen , der vom Span-Element umgeben ist , so einfach ist das. Und was wollen wir tun? Wir wollen eine bestimmte Farbe festlegen. Also legen wir es fest, indem wir ihm einen Stil geben , der der Farbe entspricht , die wir dort veröffentlichen möchten. Das ist also vorerst alles über den Textblock. Wir könnten später wiederkommen, um es zu verfeinern. Wir werden auf verschiedene Teile zurückkommen, um es zu verfeinern, aber genau das haben wir. Sehen wir uns eine Vorschau der Änderungen an, und ich liebe es. Da haben wir's. in der nächsten Lektion sehen, Lassen Sie uns in der nächsten Lektion sehen, wie man mit diesen Tasten arbeitet , denn wie Sie sehen können, habe ich zwei Schaltflächen. Wir sehen uns in Kürze. 15. Hero-Buttons: Jetzt ist es also an der Zeit, unserem Heldenbereich zwei Buttons hinzuzufügen. Also, wie habe ich das erreicht? Wie Sie bereits erraten können, ist dies ein Container, der die beiden enthält, und es ist ein Container in horizontaler Richtung. Gehen wir also zurück zu unserer Arbeit, im Moment haben wir nur ein einziges Button-Element. Wenn ich also hierher gehe, Container, den Container da reinlege, kann ich diesen auswählen und ihn dort ablegen. Und jetzt kann ich es duplizieren den Container auswählen , der sie enthält. Und dann zur Horizontalen wechseln. Wenn das ausgewählt ist, ja, wenn das ausgewählt ist, kann ich zu Stil, Farbe gehen und dann gehen wir zum Farbwähler hier, um Farbe auszuwählen F 15 a 24, füge es dort ein. Da haben wir's. Veröffentlichen. Jetzt gibt es noch viel mehr Dinge, die Sie mit einer Schaltfläche tun können. Wenn wir zum Beispiel auf Hover sagen, können wir es animieren Also Hover-Animation, wir können sagen, ich liebe Bob. Bob. Dadurch scheint es einfach in der Luft zu schweben. Dieser hat keine. Also wenn ich das auswähle, gehe ich zu Hover-Effekten, ich kann es auch Bob daraus machen Veröffentlichen. Das ist also alles für den Moment. Wenn Sie mit Tasten arbeiten, können Sie mit all diesen anderen Einstellungen herumspielen, die einfach sind, Sie können mit all diesen anderen Einstellungen herumspielen und sehen, was sie bewirken. Lassen Sie mich das einfach veröffentlichen und eine Vorschau der Änderungen anzeigen, und los geht's. In der nächsten Lektion wollen wir uns ansehen, wie das Heldenbild hinzugefügt wird. Wir sehen uns in Kürze. 16. Hero-Image: Jetzt ist es also an der Zeit, das Bild der Helden-Sektion hinzuzufügen. Gehen wir zurück zu unserem Editor. Und wie wir es zuvor getan hatten, ziehen wir das Bild jetzt hinein. Und lass uns unser Bild vom Computer auswählen. Also gehe ich zu Dateien hochladen und wir gehen zu unserem Ordner, und das ist das Bild aus der Helden-Sektion, das ich ausgewählt habe. Wählen Sie aus. Und da haben wir's. Wenn ich die Änderungen veröffentliche und eine Vorschau vorschaue , werden Sie etwas feststellen. Wenn ich also zu unserer Referenz-Website wechsle, werden Sie feststellen, dass diese korrekt vertikal ausgerichtet sind , sodass sich dieser Block irgendwo in der Mitte der Höhe befindet. Aber auf unserer Website scheint das ganz oben zu stehen. Um es also in der Mitte auszurichten, gehen wir hier rein und wählen den Container aus, der den Textblock enthält. Sie möchten den Container auswählen, der den Textblock enthält. Und hier unten, begründen Sie den Inhalt, sagen wir, vertikal zentrieren. Veröffentlichen Sie das. Und jetzt wird das neu geladen Und jetzt haben wir das. Aber jetzt fragst du dich vielleicht, was ist mit diesem Hintergrund? Weil das nette Note verleiht Helden-Sektion eine nette Note verleiht, damit sie nicht zu schlicht aussieht. Im Moment ist es zu schlicht. Also die Leute mögen es einfach so, also kannst du es so lassen. Aber ich werde dir das Hintergrundbild der Helden-Sektion zur Verfügung stellen . So fügen Sie also das Bild der Heldenabteilung hinzu. Ich dachte, wir hätten dort noch ein paar Dinge zu bearbeiten. Deshalb wollte ich, dass es eine eigenständige Lektion ist, aber ich denke nicht, dass wir vorerst irgendwelche Änderungen vornehmen müssen. in der nächsten Lektion sehen, Lassen Sie uns in der nächsten Lektion sehen, wie Sie dieses Hintergrundbild hinzufügen . Wir sehen uns in Kürze. 17. Hero-Hintergrundbild: Lassen Sie uns nun sehen, wie Sie dieses Hintergrundbild für den Heldenbereich hinzufügen . also zurück zu unserem Editor wechsle, komme ich hierher und wähle den gesamten Container aus, der den Heldenbereich enthält. das auswählen, wenn Sie es auswählen können, gehen Sie zu Steuerung I und wählen Sie den äußersten Container Als Nächstes gehen wir zu Stil, Hintergrund und wählen Classic aus . Hier können wir das gewünschte Bild auswählen, Dateien hochladen und auswählen Lass uns in unseren Ordner gehen. Ich hatte dieses Bild hier vorbereitet. Wenn ich mit der rechten Maustaste darauf klicke und es öffne, wird es in einem neuen Tab in meinem anderen Fenster geöffnet. Wie Sie sehen können, ist es gefiedert. Ich habe eine Online-Software verwendet, um es zu verbessern, nur um sicherzugehen, dass es keine harten Kanten hat Wenn ich also darauf doppelklicke und „Auswählen“ sage, wie Sie sehen, wurde es hinzugefügt, aber es gibt ein Problem. Sie können den unteren Teil nicht sehen. Lassen Sie uns also zunächst dieses Plugin schließen, da es sich um ein kostenpflichtiges Plug-In handelt, das Elementor von Ihnen kaufen möchte Schließe die Auflösung voll und positioniere sie in der Mitte, einfach so Nehmen wir an, wir möchten, dass der Anhang repariert wird, sodass er beim Scrollen genau dort statisch bleibt. Also behoben. Wiederhole, keine Wiederholung. Wir wollen nicht, dass es sich wiederholt. Und was die Displaygröße angeht, wollen wir es als Cover haben. Veröffentlichen Sie das. Und jetzt, wenn wir eine Vorschau der Änderungen sehen, los geht's. Jetzt werden Sie feststellen, dass wir hier diesen Raum haben und er nicht so gut aussieht. Also werden wir daran arbeiten, mach dir keine Sorgen, aber das Wichtigste war, dass du weißt, wie man das hinzufügt. Wählen Sie diesen Hauptcontainer aus, gehen Sie zu Erweitert erhöhen Sie die untere Polsterung auf vielleicht 20, vielleicht 50. Und dann hier veröffentlichen 50 das. Und jetzt, wenn wir eine Vorschau der Änderungen sehen, ja, jetzt nimmt es langsam Gestalt an. Im Grunde genommen ist das so, wie man das Hintergrundbild hinzufügt. Und nur für den Fall, dass du dich fragst, wie ich diese Bilder bearbeiten kann. Und tatsächlich hatte ich mir das geholt, was ich früher bearbeitet habe. Hier habe ich das Logo erstellt und ich verwende nur Freepiek Auf FreePK kannst du hier E-Commerce-Logo sagen, und unter Filtern kannst du „Online editierbar“ sagen und das mit dem Online-Editor öffnen das Und wenn du zum Beispiel das auswählst, kannst du „Bearbeiten Es öffnet sich der kostenlose Peek-Editor, und Sie können ihn in Ihren Shop ändern Dann haben Sie ein Logo, das Sie exportieren können. Sie können es als PNG ohne Hintergrund exportieren. Aber ich habe in einem umfassenden Kurs, den ich vor einiger Zeit veröffentlicht habe, behandelt, wie man Bilder mit kostenlosen Online-Tools bearbeitet in einem umfassenden Kurs, den ich vor einiger Zeit veröffentlicht habe, behandelt, wie man Bilder mit kostenlosen Online-Tools umfassenden Kurs, den ich vor einiger Zeit veröffentlicht habe . Du kannst es dir ansehen. Es ist ein sehr schöner, umfassender Kurs, bei dem Sie kein Geld ausgeben müssen, um Ihre Bilder zu bearbeiten. In der nächsten Lektion wollen wir nun mit dem Körperteil beginnen . Wir sehen uns in Kürze. 18. Kopf optimieren: Jetzt ist es also an der Zeit, mit der Arbeit am Körperteil zu beginnen . Lass mich einfach hergehen. Wir wollen mit der Arbeit am Körperteil beginnen, und wir wollen mit diesem Symbol beginnen. Aber bevor wir das tun, müssen wir meiner Meinung nach den oberen Bereich hier sortieren, weil er vorerst hässlich aussieht. Wir können also diese Kopfzeile bearbeiten, indem wir den Mauszeiger darüber bewegen und „Kopfzeile“ sagen Dadurch gelangen wir zum Header-Editor des Elements Kit, in dem wir ihn erstellt haben Ich habe diese Homepage also immer noch intakt, aber jetzt haben wir den Header hier geändert, damit wir ihn sehr schnell bearbeiten können. Und hier sind wir. Also das erste , was ich tun möchte, ist, die gesamte Polsterung an fast allen Behältern hier zu beschädigen gesamte Polsterung an fast allen Behältern hier Also wähle ich hier diesen großen Container aus und gehe zu Advanced Ich werde dort die Polsterung aufbrechen, und wie Sie sehen können, hat sich alles leicht bewegt Das liegt daran, dass jedes Mal, wenn Sie ein Element oder einen Container hinzufügen , eine vordefinierte Polsterung vorhanden Deshalb wollen wir das einfach entfernen , um den Platz zu reduzieren, den es einnimmt. Lass mich das schließen Als Nächstes wähle ich den Behälter aus , der das Logo enthält. Aber wie Sie sehen können, das Standard-Padding jetzt dieselbe Höhe wie der Ausgangscontainer, sodass ich ihn nicht alleine auswählen kann Also kontrolliere I und erweitere das jetzt. Ich will diesen Container hier haben. Ordnung. Also werde ich auch die Polsterung daran kaputt machen Ich möchte das Gleiche in dieser Sache tun. Und das. Als Nächstes möchte ich den Text „Erweitert“ auswählen und den Rand durchbrechen, und den Rand durchbrechen damit ich einzelne Zellen bearbeiten kann. Und ich möchte den unteren Rand auf vielleicht 35 reduzieren, minus 35 und den oberen Rand um den gleichen Betrag, minus 35. Da haben wir's. Im Moment möchte ich das entfernen. Lass uns das entfernen. Ich werde dir zeigen, warum , denn dort werden wir die Suchleiste haben, und wir werden die Suchleiste einige Lektionen später hinzufügen . Also werde ich das auswählen, weil es 20% der Breite ausmachte, das kann 80% einnehmen und so bis zum Ende verschoben werden. Und jetzt, wo der Container noch ausgewählt ist, müssen wir die Objekte darin so in der Mitte anordnen . Und ich glaube, wir haben etwas Besseres. Sehen wir uns eine Vorschau der Änderungen an. Und wenn ich jetzt auf die Homepage gehe, ist dort zumindest nicht mehr viel Platz. Jetzt haben wir tatsächlich vergessen, die Schaltfläche am Ende hier hinzuzufügen, also gehe ich einfach zur Plus-Schaltfläche. Ich kann eine Schaltfläche hinzufügen, indem sie ziehe und sie überall gestalte, oder ich kann hier hingehen und vielleicht diese auswählen, sie auswählen, mit Recht kopieren, hier Wählen Sie das Nervenelement aus und fügen Sie es ein. Es wird unter dem Nervengegenstand eingefügt. Dann wähle ich den Behälter aus, in dem sie sich befinden , und ändere die Richtung auf diese Weise. Und jetzt haben die Elemente , weil wir die Richtung geändert haben, wir können die Ausrichtung hier nicht ändern, wir können die Ausrichtung ändern um die Elemente in der Mitte zu platzieren. Aber hier wollen wir sie an das Ende stellen , um sie bis zum Ende zu rechtfertigen. Das kann der Schnitt sein. Und wir können das Symbol in eine Karte ändern. Sie können hier jede Karte auswählen, die Sie möchten. Vielleicht das, einfügen. Nein. Lass mich das ändern. Vielleicht bevorzuge ich das. Einfügen, veröffentlichen. Wenn wir uns nun eine Vorschau der Änderungen ansehen, sind wir fertig. Also, wenn ich jetzt Online-Shop sage, los geht's. Ich denke, es ist ein viel besser aussehender Header als zuvor. Ich denke, wir sollten diese Lektion nicht zu lang machen. In dieser Lektion sollten wir anfangen , am Körperteil zu arbeiten, aber das mussten wir tun. Also lass es uns hier beenden. Und in der nächsten Lektion beginnen wir damit, diesen Abschnitt mit den Symbolen hinzuzufügen . Wir sehen uns in Kürze. 19. Symbolbereich: Lassen Sie uns also weitermachen und dieses Symbol hinzufügen. Also, wenn ich wieder rein gehe, möchte ich zunächst Shift R kontrollieren Das ist schwer erfrischend. Ja, also hier sind wir. Ich wollte nur, dass die Änderungen, die wir am Kopf vorgenommen haben, auch hier im Homepage-Editor wirksam werden. Jetzt, wo wir damit fertig sind, werde ich es einfach schließen und die Vorschau schließen. Dies ist auch ein weiterer Chefredakteur. Mach das zu, ein bisschen aufzuräumen. Lass mich Otacul schließen. In Ordnung Also lass uns weitermachen und sagen, dass wir auch einen Richtungsabschnitt hinzufügen wollen. Plus. Dann nehme ich Inside Basic, wir haben Icon. Also werde ich das Symbol einfach dort ablegen. Ich wähle drinnen , um das Symbol auszuwählen, vielleicht einen Pfeil, der nach unten zeigt. Ja, vielleicht das. Fügen Sie etwas Ähnliches ein. Stil. Lass uns die Farbe ändern. Kann es schwarz machen. Mach es in jeder gewünschten Farbe. Wir können die Größe erhöhen. Wir können es drehen, aber ich möchte es nicht drehen. Lass mich 25, 25, 25 draus machen. Das ist ein schönes Schwarz, das ich mag. Auf Hover können wir es in dieser Farbe machen. Also wähle ich das aus, gehe zu Stil, Strg C kopieren, wähle es aus, wenn der Mauszeiger darüber bewegt wird oder vielleicht vor dem Hover, wir können es in dieser Farbe Und wenn Sie mit der Maus darüber fahren, kann es 25, 25, 25, schwarz oder vielleicht Veröffentlichen Sie das und wenn wir es in der Vorschau ansehen, los geht's. Aber lass es uns ein bisschen nach unten oder nach oben drücken. Ja, lass es uns ein bisschen nach oben drücken. Also gehe ich zur Marge und reduziere die obere Marge, vielleicht auf 30. Und dann möchte ich das Layout reduzieren und die Bewegungseffekte erweitern , damit es animiert wird, wenn es reinkommt, springt hoch, springt rein, veröffentlicht , in Einfach so. Das ist eine nette Art, die Aufmerksamkeit von jemandem zu erregen und ihm zu zeigen: Hey, fang an zu scrollen Drücken wir es ein wenig runter, also erweitern wir das Layout. Lassen Sie uns das vielleicht auf minus 20 setzen. Veröffentlichen. Lass uns das sehen. Oder lassen Sie es uns vielleicht sogar von dort wegschieben. Also lass uns einfach 30 draus machen. Platziere es außerhalb der Heldenabteilung. Ja, also lass es uns da hinstellen. Und so fügen Sie Ihr Symbol zu Ihrer Arbeit hinzu. In der nächsten Lektion sehen wir uns an, wie Sie dieses Problem beheben können. Ja, lassen Sie uns sehen, wie dieser Abschnitt hinzugefügt wird, da wir diese vorgestellten Produkte nach der Installation von Woo Comer hinzufügen werden, also können wir das jetzt nicht tun Schauen wir uns also in der nächsten Lektion an, wie das geht. Geh nirgendwohin. 20. CTA-Abschnitt: Schauen wir uns also an, wie man diesen CTA-Abschnitt erstellt. CtA bedeutet Aufruf zum Handeln. Sie haben einen schönen Header, eine Beschreibung, einige wichtige Punkte und einen Aufruf zum Handeln Und jetzt gehen wir zurück zu unserem Editor, zurück hierher. Also legen wir es hier hin, also sage ich hinzufügen. Und warum verwenden wir nicht eine der großartigsten Funktionen von Elementor, anstatt es neu warum verwenden wir nicht eine der großartigsten Funktionen von zu Es ermöglicht dir, dich nicht zu wiederholen, sodass du einen Abschnitt duplizieren kannst, indem du darauf klickst Und jetzt möchte ich es natürlich direkt unter diesem Symbolbereich platzieren , sodass ich es einfach ziehen und darunter platzieren kann. Genau, einfach so. Und jetzt möchte ich ändern, zuerst den Container selbst auswählen, den Container selbst auswählen zum Stil wechseln und das Hintergrundbild entfernen. Als Nächstes ziehe ich diesen Container bis zum Ende. Wenn Sie das nicht können, wie Sie sehen, funktioniert es jetzt nicht wirklich. Du kannst mich einfach kontrollieren. Lass mich das und das und das zusammenklappen. Das ist der Container, über den wir sprechen, wie Sie sehen können. Wenn Sie hier rein gehen, haben wir zwei Container. Ich kann das ziehen und da drunter legen. Jetzt haben wir es hinter dem Bild platziert , damit sie sich abwechseln. Wählen Sie jetzt hier das aus, um es durch einen Sneaker zu ersetzen. Lassen Sie uns es also durch ein anderes Produkt ersetzen. Nehmen wir an, das Fahrrad ist offen. Jetzt sollten Sie dort kreative Bilder platzieren, wenn es sich um eine echte Website handelt , die Sie als E-Commerce-Shop erstellen, einfach so. Und jetzt können wir, solange das Bild noch ausgewählt ist, zum Stil übergehen. Lass uns sehen. Können wir den Grenzradius 20 so ändern? Lassen Sie mich diesen Abschnitt ändern. Entdecken Sie unsere Premium-Sneaker. Erkunden Sie also unser Premium-Angebot. Wir haben erschwingliche Bikes, also werde ich das auf Superbikes umstellen und am Ende die Preise streichen. Ich kann die Größe der Typografie reduzieren vielleicht bis zu dieser Stelle veröffentlichen Also hier sind wir. Ich möchte nur einen der Knöpfe loswerden. Und nennen wir das Shop Bikes. Das ist ein Aufruf zum Handeln. Jetzt können wir hier auch eine Icon-Liste hinzufügen. Also sage ich Plus-Symbol. Liste der Symbole. Lass es uns direkt unter dieser Beschreibung ablegen. Und wie Sie sehen können, handelt es sich um eine Icon-Liste. Und ich werde das auf Punkt Nummer eins ändern, Premium-Qualität, das schnellste Fahrrad aller Zeiten oder Fahrräder zu erschwinglichen Preisen. Also los geht's. Wir haben die Liste. Wie Sie sehen können, ist die Schrift anders, und das liegt daran, dass es nicht Montserrat ist Also gehe ich zu Text, Typografie und ändere das Montserrat. Da haben wir's. Jetzt werden Sie feststellen, dass die Schaltflächen nicht gut zum Rest des Textes ausgerichtet sind, und das liegt daran, dass, wie ich bereits erwähnt habe, jeder Container rundum über ein Standard-Padding verfügt Wenn ich also den Container auswähle, gehe ich zu Advance und unterbreche, dass es jetzt kein Standard-Padding gibt und es sieht gut aus Wählen Sie diese Option, um den unteren Rand zu verkleinern. Brechen Sie das auf, um die unterste Zelle zu bearbeiten, und wählen Sie diese, um den unteren Rand zu vergrößern. , können wir jetzt diese Option ausgewählt ist, können wir jetzt auch wieder hierher zurückkehren, das Symbol verwenden und die Farbe auf Ich möchte diese Farbe auswählen ändern. Drücken Sie C, gehen Sie zurück und wählen Sie es aus. Symbol füge es dort ein. Und wenn ich mit der Maus darüber fahre, möchte ich, dass es so blau ist. Also wähle diesen Stil. Dieses blaue Symbol, kopiere, wähle dieses Stilsymbol, bewege den Mauszeiger. Einfügen. Wenn wir also mit der Maus drüber fahren, ändert es seine Farbe auf diese Weise Sehen wir uns eine Vorschau der Änderungen an. Und hier sind wir. Mir gefällt es. So fügt man diesen Abschnitt hinzu Natürlich kannst du mit der Zeilenhöhe herumspielen , wie du siehst, sie berühren sich fast, aber ich mag es, wenn die Linien ziemlich nah beieinander liegen. Ich mag die Linienhöhe. In Ordnung, das ist eine gute Größe. Ja. Lassen Sie uns in der nächsten Lektion sehen, wie Sie diesen festen Hintergrundbereich direkt darunter erstellen diesen festen Hintergrundbereich . Wir sehen uns in Kürze. 21. Fixer Hintergrundbereich: Jetzt ist es an der Zeit, diesen festen Hintergrundbereich zu erstellen. Schauen wir uns also an, wie das ziemlich schnell geht. Sollte sehr einfach sein. Also zurück zu unserem Editor, hier sind wir. Ich werde das einfach direkt darunter duplizieren und diesen Container loswerden. Jetzt bleibt uns nur noch ein Container übrig. Ich wähle das aus und lösche es , weil wir es nicht benötigen. Wie Sie sehen können, haben wir hier nur eine Überschrift, eine Beschreibung und einen Aufruf zum Handeln. Wählen Sie also zuerst diesen aus, gehen Sie zum Stil, platzieren Sie in der Mitte, richten Sie ihn an der Mitte aus, diesen Stil, richten Sie ihn an der Mitte aus, Schaltfläche Shop Bike. In der Mitte. In Ordnung, lassen Sie uns den Container selbst auswählen und ihn begründen. Vermeiden Sie es, Container unnötig zu verwenden. Also können wir diese Schaltfläche einfach ziehen und genau dort in der Mitte platzieren und den Container entfernen Du brauchst keinen Container, um das dort abzulegen. Aber wenn wir diesen Container auswählen , der alles enthält, können wir zu Stil und Hintergrund wechseln. Jetzt wählen wir hier ein Bild aus. Welches werden wir auswählen? Nehmen wir an, diese Leute verkaufen Werkzeuge, Fahrräder, Autos, Spielzeug, 3-D-druckbares Zeug. Jetzt haben wir den Hintergrund als Bild festgelegt, aber wir möchten auch die Hintergrundfarbe auf Schwarz setzen . Warte. Nein, wir sollten das Hintergrund-Overlay einstellen. Hintergrundtyp, wählen Sie das aus, wählen Sie Farbe und geben Sie ihr Schwarz, pechschwarz Aber jetzt wollen wir die Intensität dieser Überlagerung erhöhen , sie dunkler machen Wir wollen auch zum Hintergrund zurückkehren. Machen Sie es in der Mitte fest. Keine Wiederholung. Stellen Sie sicher, dass es repariert ist. Deshalb können wir scrollen und es genau dort lassen, wo es ist. Ich möchte das auf Weiß ändern. Und achten Sie darauf, ob wir es in weiße Textfarbe ändern. Die Orange bleibt immer noch erhalten, weil sie durch diesen Span-Code hier festgelegt wird. Ich werde auch diese Schaltfläche auswählen. Tatsächlich möchte ich diese orange Farbe verwenden , also wähle ich dieses Steuerelement C, wähle dieses und füge das ein. Wenn ich mit der Maus darüber fahre, möchte ich, dass es weiß und der Text schwarz ist. Normal, der Text sollte einfach so weiß sein. Und ich möchte auch die Polsterung dieses Außenbehälters erhöhen die Polsterung dieses Außenbehälters Fortgeschritten, zerbrich das für die Unterseite, geben wir 50 und für die oberen 50. Wählen Sie den Text aus, geben Sie ihm auch eine weiße Farbe und veröffentlichen Sie ihn . Da dieser Abstand zu klein ist, wähle ich den Container mit dem oberen Rand aus, vielleicht 100 oder 150. Oh, das sind 1.500. Ok, also veröffentliche das. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Dann sind wir da. So fügt man also den festen Hintergrundbereich hinzu. In der nächsten Lektion sehen wir uns an, wie Sie die Fußzeile erstellen. Wir werden uns etwas später ansehen, wie das erstellt wird. Oh nein, in der nächsten Lektion wollen wir uns ansehen, wie dieser Abschnitt erstellt wird. Also wir sehen uns in Kürze. 22. Fußzeile erstellen: Warum machen wir also nicht weiter und erstellen die Fußzeile. also, ohne Zeit zu verschwenden, Lassen Sie uns also, ohne Zeit zu verschwenden, gleich hier zu unserem Editor wechseln Und denken Sie wie immer daran, genauso wie wir die Kopfzeile getrennt vom Hauptteil erstellen , werden wir auch die Fußzeile getrennt vom Hauptteil erstellen Gehen wir also wieder rein. Tatsächlich sind wir vorerst mit der Homepage fertig. Also gehe ich einfach zu WordPress. Stellen Sie sicher, dass es veröffentlicht ist. Sie haben alle Ihre Änderungen veröffentlicht und lassen Sie uns das Ganze beenden. Und jetzt wissen Sie, wie es läuft. Wir gehen zu Elements Kit, Header Footer. Neue Vorlage hinzufügen, Fußzeile, Fußzeile hier auswählen. Und lass uns direkt zu Inhalt bearbeiten gehen. Es wird automatisch hier im Admin-Dashboard gespeichert . In Ordnung, also hier sind wir. Also gehe ich zu Flexbox, wähle das aus und füge einen weiteren Container Ich will mit 100%. Und dafür wollen wir, dass es 80% sind. Für diesen äußeren können wir ihn nun auf die Mitte ausrichten. Hier können wir einen Container hinzufügen. Duplizieren Sie es dreimal, wählen Sie dieses aus, ändern Sie hier die Richtung, und jetzt haben wir einen Ort, an dem wir unser Logobild platzieren können, das Logo in der Medienbibliothek auswählen und das auswählen Wir können direkt darunter einen Texteditor hinzufügen. Stil. Nun, eine Sache, die ich vergessen habe zu erwähnen, ist, wie man globale Schriftarten so einstellt, dass man beim Hinzufügen eines Texteditors nicht ständig Telefone bearbeiten muss . Und das tun Sie, indem Sie zu den Seiteneinstellungen und den globalen Schriftarten gehen. Hauptschrift, lass uns diese Monsterratte machen. Klicken Sie auf Outside Secondary Montserrat. Sie können die gewünschte Schriftart wählen. Klicken Sie auf eine Stelle außerhalb des Textes. Montserrat. Wählen Sie „Außen“ und „Akzent“, genau das Gleiche Speichern Sie die Änderungen zurück im Editor. Wie Sie sehen, heißt es jetzt automatisch Montserrat, und das haben wir nicht geändert Und wenn ich einen neuen Texteditor hinzufüge, wird er als Montserrat angezeigt Das ist es also. Als Nächstes möchten wir hier eine Überschrift hinzufügen. Lassen Sie uns hier eine Überschrift einfügen und sie auf drei Seiten verteilen. Sagen wir nützliche Links. Und direkt darunter können wir einen Container hinzufügen. Darin sind zwei Elemente enthalten. Liste der Symbole. Lassen Sie uns dort eine Symbolliste ablegen und sie duplizieren, und wir wählen den Container aus, wir können ihn zu einer doppelten Spalte machen. Und wir können diese beiden auch voneinander trennen. Wir können Platz zwischen ihnen schaffen. Das heißt, das Ganze bis zum Ende verschieben, den Raum dazwischen oder sagen wir Raum um den Raum herum. Aber ich mag es nicht, dass das falsch ausgerichtet ist. Also so ein Abstand dazwischen. Jetzt werden Sie feststellen, dass dies weit über dem Logo angeordnet ist. Wir können den Container selbst auswählen und zu Advanced Padding Top wechseln, sagen wir 30. Sagen wir 40. Wählen Sie diesen Stil, Typografie Machen wir 900 oder vielleicht 800 draus. Lass uns draußen klicken. Ich möchte die Farbe auf 25 , 25, 25 ändern. 25, 25, 25 oder vielleicht dieses Blau. Ich mag das Schwarz momentan nicht. Also wähle Farbe, wähle das, los geht's. Nun, wie Sie sehen können, haben wir diese beiden hier, veröffentlichen. Wenn ich zum Speichern hierher zurückkehre, möchte ich kommen und sagen, mit Elementor bearbeiten, weil ich das Styling kopieren möchte , das wir zuvor in die Liste der anderen Symbole gesetzt haben Wenn ich nach unten scrolle und diese rechte Leak-Kopie auswähle, kann ich hierher kommen und diesen richtigen Leak-Paste-Stil auswählen, Right Leak, Paste-Stil auswählen Und jetzt müssen wir nur noch ändern, was in den einzelnen Artikeln steht. Vielleicht zu Hause, weil das Links sind. Wir können diesen Shop unter anrufen , wir können diese vielleicht Datenschutzrichtlinie auswählen. Nutzungsbedingungen. Und vielleicht Cookie-Richtlinie. Vielleicht Cookie-Richtlinie. Ja, einfach so. Veröffentlichen. Jetzt werden Sie hier feststellen, dass diese beiden zu nahe beieinander liegen. Tatsächlich möchte ich das etwas breiter machen. Also lege ich das hin oder lassen wir es vielleicht dabei. Aber dafür, weil es das ist, das das Anmeldeformular enthalten wird, sollten wir es zu 50% oder vielleicht zu 40% machen Machen wir 30% daraus. Und machen wir aus diesen 30% 100. Wir können dies auswählen und den Abstand zwischen den drei Containern vergrößern , sodass die Lücken 30 veröffentlicht werden. Ich möchte diesen Container auswählen und zu „Erweitert“ gehen , Rand links. Lassen Sie uns den Rand auf der linken Seite so vergrößern. Hier drin können wir sagen, kommen Sie heute zu uns. Dann können wir hier eine kurze Beschreibung haben. Oh, warte. Wo ist der , der heute zu uns kommt? Ich möchte das duplizieren, es dort ablegen und sagen, Schließ dich uns heute an. Hier werden wir also einen E-Mail-Schimpansen platzieren. Vorerst werden wir das als Platzhalter verwenden, die männliche Schimpansenform Einfach so können wir es stylen. Für die besten Rabatte, Angebote und die neuesten Nachrichten von uns oder einfach nur für Angebote und Angebote. Wenn ich jetzt das Formular auswähle, können wir zum Styling gehen und die Farben ändern. Wir können ihm jede Farbe geben, die wir wollen. Also lass mich dieses Blau auswählen. Kopieren, Strg C, geh zurück, füge ein. Was ist das? Nun, das ist Typografie Wir wollen den Button. Typ des Hintergrunds. Ja, füge das ein. Nun, das ist blau, oder wir können es so orange machen, es in der gewünschten Farbe machen, sagen wir veröffentlichen Wir können auch Social Media, Icons sagen. Lass uns die Social-Media-Symbole dort ablegen und sie vielleicht auf dieser Seite anordnen, veröffentlichen. Und ich mag es nicht, dass diese beiden falsch ausgerichtet sind. Also wähle ich diese Rechtsklick-Kopie aus, damit wir das Styling kopieren können Wir haben den Stil hier angewendet, klicken Sie mit der rechten Maustaste auf Einfügen. Also jetzt, in Ordnung, es wurde auch die Breite von 30% kopiert. Wir wollten 40, aber jetzt hat es diesen oberen Rand wie diesen Veröffentlichen. Sehen wir uns eine Vorschau der Änderungen an. Mir gefällt es, aber dieser Abstand ist zu groß. Gehen wir zurück und wählen das aus. Marge nach unten reduzieren. Veröffentlichen Sie, zeigen Sie eine Vorschau der Änderungen an. Da haben wir's. Also, das ist noch kein Link. Wählen Sie es aus und verknüpfen Sie die benutzerdefinierte URL. Lass uns unsere Homepage kopieren. Und veröffentlichen. Sehen Sie sich eine Vorschau der Änderungen an. Und jetzt, wenn du das auswählst oder darauf klickst und ganz nach unten scrollst, haben wir unseren Ordner. Nun, eine Sache müssen wir hier hinzufügen. Wenn wir das auswählen, gehen wir zu Advanced Margin Top. Geben wir 100 oder 150. Veröffentlichen, das wird neu geladen. Geh nach Hause Scrollen wir nach unten. Jetzt haben wir einen schönen gleichmäßigen Abstand. So erstellen Sie ein Foto von Grund auf neu, ohne Vorlagen zu verwenden. Das war überstürzt, aber zumindest verstehst du das Konzept, denn es ist dasselbe wie das Erstellen des Headers oder des Heldenbereichs Sie müssen nur wissen, wie man mit Containern arbeitet. Und jetzt, wo wir mit einem Foto fertig sind, uns in der nächsten Lektion ansehen, wie Sie die gesamte Seite responsiv gestalten können. Mit anderen Worten, lassen Sie uns dafür sorgen, dass es auf anderen Geräten als dem PC schön aussieht anderen Geräten als dem , denn im Moment sieht es auf dem Desktop gut aus. Über Tablets? Was ist mit Smartphones? Also, wenn jemand auf seinem Smartphone surft. Mal sehen, wie das geht. 23. Reaktionsfreudige Kopfzeile: Lassen Sie uns also sehen , wie Sie diese Seite auf verschiedenen Geräten responsiv machen können. Aber lassen Sie uns zunächst sehen, wie es standardmäßig auf verschiedenen Geräten aussieht. Drücken Sie also Control Shift I auf Ihrer Tastatur. Warte, Strg Shift E auf deiner Tastatur. Dadurch wird die Konsole aufgerufen. Und jetzt haben wir hier verschiedene Tools, mit denen wir einfach an dieser Website arbeiten können . Sie werden feststellen, dass wir hier diese Tgal-Gerätesymbolleiste haben. Lass uns darauf klicken. Dadurch werden einige Simulatoren für verschiedene Geräte angezeigt Wie Sie diesem Drop-down-Menü entnehmen können, haben wir unterschiedliche Gerätegrößen Wenn ich also iPhone 14 Max sage , sieht die Website auf einem iPhone 14 standardmäßig so aus. Scrollen wir ganz nach unten. Es sieht nicht so schlecht aus, kann aber verbessert werden. Mal sehen, wie es auf einem Tablet aussieht. Sagen wir iPad Pro. So sieht es auf einem iPad aus. Ich finde, es sieht auf einem iPad gut aus, aber der Header sieht nicht so gut aus. Warum fangen wir also nicht mit dem Header an? Also schließe ich das, bewege den Mauszeiger darüber und dann den Header, damit wir ihn bearbeiten können. Und hier sind wir Also das Erste, was ich gerne mache, ist in den Tablet-Modus zu wechseln. Lassen Sie mich das zunächst zu 100% ganz deutlich sagen. Control I, ich will den , der alles enthält. Also 90%, keine Pixel, Prozent. Ungefähr 98% Ja, das gefällt mir. 98% sind richtig. Lassen Sie uns jetzt den Logo-Container auswählen und ihn auf 20% setzen. Und dieser andere 80%. Keine Pixel. Lass uns das veröffentlichen. Und jetzt werden Sie feststellen, dass die Änderungen, die wir vorgenommen haben, oder die Einstellungen, die wir im Desktop-Modus vorgenommen haben, hier immer noch gültig sind, und das ist der Grund, warum dies immer noch etwas Abstand zum Desktop-Modus hat . Also, wenn ich es auswähle, in Ordnung. Ich möchte nur das Elements Kit-Element auswählen . Schließ das. Geh hier hin. Wie Sie sehen können, hat es die Randeinstellungen, die wir im Desktop-Modus festgelegt haben. Wir wollen das kaputt machen , das veröffentlichen. Lassen Sie uns die Änderungen überprüfen. Jetzt Strg Shift I, um in den Tablet-Modus zu wechseln, und mir gefällt, wie es aussieht. Es sieht schon gut aus, und jetzt werdet ihr hier, wenn wir auf das Burger-Menü klicken, feststellen, dass wir hier ein Logo brauchen. Gehen wir wieder rein. Klicken Sie darauf. Wie Sie sehen können, können wir zum Inhalt, zu den Einstellungen für das mobile Menü und zum Logo für das mobile Menü gehen . Fügen wir wie gewohnt unser Logo hinzu. Und jetzt wird das Logo im mobilen Menü angezeigt , aber es ist zu breit. Ich möchte, dass es etwas schmal ist. Solange es noch ausgewählt ist, gehe ich zum Stil über. Mobiles Menü. Moment, ja, Menü-Wrapper mit, sagen wir mal Prozent, und ich will ihn irgendwo haben, kurz bevor das To-Go-Symbol zusammenbricht, Veröffentlichen Sie das. Wenn ich das schließe und wir in den mobilen Modus wechseln. So sieht es also im mobilen Modus aus. Nun, ich glaube nicht, dass es so gut aussieht. Es sieht zu kompliziert aus, zu viele Dinge in der Kopfzeile Also, was ich manchmal gerne mache, nicht immer, wenn ich etwas Besonderes wie diese Schaltfläche habe, ich mag es, ein separates mobiles Menü oder einen mobilen Header zu erstellen also wieder hierher zurückkehre, kann ich das duplizieren. Und jetzt wird das nur auf Tablet und Desktop angezeigt, aber wir werden auch eine separate Version für Handys haben. Wir machen das, indem wir den Container auswählen , der den gesamten Header enthält, wechseln zu „Erweitert“, „ Layout reduzieren“ und „Responsive“. Wir wollen das auf Tablet und Desktop verstecken. Es wird nur auf dem Handy angezeigt. Das heißt, es ist der einzige Header , der auf dem Handy angezeigt wird. Und wenn ich zu diesem anderen gehe, wollen wir ihn auf dem Handy verstecken weil er auf Desktop und Tablet angezeigt werden sollte. Gehen wir also in das erweiterte Collape-Layout, responsiv, verstecken Sie es auf Mobilgeräten und veröffentlichen Sie das. Wenn ich jetzt auf Mobilgeräte umsteige, werden Sie feststellen, dass dies wie folgt abgestuft und dass es aktiv wird. Jetzt ist die Einstufung abgeschlossen. Das ist der aktive. Und jetzt möchte ich diesen Knopf einfach loswerden, weil er mir dort nicht gefällt. Und ich möchte diesem Button-Container 50% der Breite geben und diesem anderen 50%, sodass sie nebeneinander liegen. Wenn Sie das auswählen, stellen Sie sicher, dass es der Logo-Container ist. Geben wir ihm so 50%. Wählen wir diesen anderen aus. Geben wir ihm 50% Wie Sie sehen können, müssen wir es aufgrund der Polsterung und des Randes an den Außenbehältern des Randes an den Außenbehältern schmaler machen Lassen Sie mich einfach auf vielleicht 44% runtergehen. Eigentlich 40%. Und jetzt wähle ich den Container , der diese beiden Container enthält, und lass uns den Abstand dazwischen sehen. Ja, damit wir alles auseinanderschieben und Platz dazwischen schaffen können. Veröffentlichen Sie das. Und jetzt wurde das neu geladen Wie Sie sehen können, ist dies jetzt der mobile Header. Aber ich meine, das ist der Tablet-Header. Und wenn wir zum Handy wechseln, vielleicht zum iPhone oder Samsung Galaxy S 20, Ultra, verwenden wir, wie Sie sehen, den anderen Header. Ich liebe das. Ich denke, wir müssen dafür sorgen, die Breite des Außenbehälters um vielleicht 60% reduziert wird. Stellen wir es auf 98% ein. Veröffentlichen, weil ich dieses Burger-Symbol ein wenig nach innen schieben möchte dieses Burger-Symbol ein wenig nach innen schieben Ja, einfach so. Machen wir 96% draus. Einfach so. Das liebe ich. Jetzt, wenn ich auf das Burger-Symbol klicke. Okay, das Logo ist hier oben versteckt , weil im mobilen Menü diese ToGo-Schaltfläche nach unten reduziert ist. Also lasst uns das korrigieren. Das ist hier genauso, wenn ich darauf klicke , wie du sehen kannst Auf Mobilgeräten wollen wir also, dass die Breite breiter ist, einfach so. Veröffentlichen Sie das und lassen Sie uns hierher kommen. Ich werde nachladen Wenn wir jetzt darauf klicken, ja, jetzt sieht es gut aus. Nun, das ist das Wordpress-Editor-Menü. Es ist derselbe Header des Mannes hier mit all diesen Einstellungen. Also mach dir darüber keine Sorgen. Da ist der To-Go-Button und das Logo ist dahinter Im Grunde genommen ist das so, dass der Header auf verschiedenen Geräten ansprechbar In der nächsten Lektion sehen wir uns an, wie Sie den Rest der Seite responsiv machen können. Gehen Sie nicht zu weit. Schnappen Sie sich sogar ein Glas Wasser und kommen Sie zurück. 24. Reaktionsfreudige Aktualisierung der Kopfzeile: Wir haben einen responsiven Header. Es ist Zeit, den Rest der Seite responsiv zu machen. Aber bevor wir das tun, erinnere ich mich nur daran, dass wir nicht besprochen wie man dieses Menü, dieses mobile Menü, bearbeitet. Wie Sie sehen können, sind die Hover-Effekte zunächst alle gut, aber was ist, wenn Sie die Farbe dieser ToGo-Schaltfläche ändern möchten die Farbe dieser ToGo-Schaltfläche Und was ist, wenn Sie die Farbe dieses Burger-Menüs ändern möchten die Farbe dieses Burger-Menüs ändern Wählen Sie also das Menüelement aus. Also heißt es „Elemente bearbeiten Kit Nerve Menu“. Lassen Sie uns stilvoll zum Hamburger-Menü gehen. Farbe des Hamburger-Symbols. Das sind diese Linien, die sich in der Schaltfläche befinden. Im Moment haben sie diese Farbe. Wenn wir mit der Maus darüber fahren, wollen wir, dass sie weiß werden. Also beim Schweben, Farbe des Hamburger-Symbols. Weiß. Also beim Schweben, jetzt ist es weiß Wenn Sie den Hintergrund ändern möchten, ändern Sie ihn hier Nehmen wir zum Beispiel an, ich möchte es in dieser Farbe, in dieser orangen Farbe, machen. Lassen Sie mich diese Farbe wählen. Wählen Sie eine Farbe. Lassen Sie uns dort ein orangefarbenes Pixel wählen. Wähle das aus. Wenn wir jetzt zu Hintergrund und Farbe gehen, fügen wir das dort ein. Wenn ich mit der Maus drüber fahre, ist es jetzt diese Farbe. Und es scheint einen blauen Rand zu haben. Hat es also eine Grenze? Keine. Ja, einfach so. Aber andererseits lässt du deinen Finger nicht auf deinem Handy schweben Das ergibt also keinen Sinn. Aber wie dem auch sei, so verwaltest du deine Farben. Als Nächstes, wenn ich jetzt darauf klicke , hat es seine Farbe zu Blau geändert. Gibt es einen aktiven Status? Lass mich das veröffentlichen und sehen, was auftaucht. eine Vorschau der Änderungen an. In Ordnung. Also, wenn du darauf klickst, ja, jetzt sieht es gut aus. Wenn es aktiv ist, ist es orange. Also, das ist das Burger-Menü. Aber wenn wir darauf klicken, wird es das Togo-Symbol genannt. Es gibt also das Hamburger Togo und es gibt ein geschlossenes ToGo . Das ist es, worüber wir sprechen Farbe des Hamburger-Symbols. Unter normalen Umständen können wir es bei dieser Farbe belassen Aber bei Hover gibt es bei Mobiltelefonen natürlich keinen Hover-Status , aber ich möchte einfach zu diesem Orange wechseln In Ordnung, das ist der Oh, ja. Entschuldigung, das ist das Symbol. Wir haben auch den Hintergrund. Füge das ein. In Ordnung. Und dann für den Grenztyp keine. Einfach so. Veröffentlichen Sie das. Und jetzt möchte ich auch diese Seite aktualisieren oder neu laden damit alles, was wir getan haben, auch in unserem Editor sichtbar ist, nicht nur das Endprodukt hier. Jetzt wird es wirksam, und das wollte ich Ihnen vorerst zeigen Jetzt können wir zum Ausstieg übergehen. Tatsächlich kann ich das einfach schließen und dann dort und da wieder aussteigen. Und wenn ich hierher komme, klicken Sie einfach darauf, damit wir mit der Bearbeitung der Seite selbst beginnen können . Los geht's. Jetzt sind wir zur Seite selbst gewechselt, Control Shift I Nun, Sie stellen fest, dass wir diese Updates im Tablet- und Desktop-Menü nicht vorgenommen haben , aber zumindest wissen Sie, wie man die Menüfarben, die Burger-Menüfarben, bearbeitet . Also das ist eine Aufgabe. Mach weiter und mach das Gleiche hier. Ich wollte nur, dass du verstehst, wie das geht. 25. Reaktionsfreudige Seite: Gehen wir jetzt zunächst zur Homepage. In Ordnung. Also lass uns jetzt mit Elementor bearbeiten. Da haben wir's. Wechseln Sie also in den Tablet-Modus. Lassen Sie uns dies auch im Tablet-Modus auswählen und sehr explizit sein. Im Moment hat es die Desktop-Einstellung von 100%, aber ich mag es, meine Werte sehr explizit anzugeben. Hier wird auch die Standardeinstellung verwendet. Also lass mich das zu 96% machen. Ja, ich liebe diese Veröffentlichung. Aber ich habe gerade daran gedacht, dass ich sie nicht gerne nebeneinander lege , wenn es auf dem Tablet ist. Ich mag es, jedes davon zu 100% zu machen und sie in einen Stapelmodus umzuschalten. Jetzt, wo das eine Breite von 96% hat, kann ich es auch zu 100% in der Breite machen. Und das zu 100%. Und wenn ich jetzt zu diesem äußeren Behälter gehe und die Richtung ändere, sind das 100%, und das sind 100%. Jetzt muss ich nur noch das auswählen, zum Stil gehen, das an der Mitte ausrichten, hier hin, stylen, es an der Mitte ausrichten, diesen Container auswählen, alles so an der Mitte ausrichten. Veröffentlichen. Jetzt können wir das rückgängig machen oder es so belassen. Manche Leute bevorzugen das Bild vor dem Text. Der Weg, das Bild vor den Text zu stellen, besteht also darin, es einfach umzukehren. Jetzt geht es abwärts. Alles im Container geht abwärts. Wir können sagen, nein, lassen Sie uns die Reihenfolge einfach so umkehren. Aber wie gesagt, ich möchte, dass es so ist. Und ich kann die Größe dieser Überschriftentypografie reduzieren , sie vielleicht auf diese Größe reduzieren, veröffentlichen Dann scrolle ich nach unten. Mir gefällt, wo das ist, aber wir können es vielleicht auch auf 96% schaffen Lassen Sie mich die Größe dieser Überschrift reduzieren. Und die Zeilenhöhe bis zu diesem Punkt. Sie können das auch tun. Wenn Sie möchten, dass die Bilder, wenn Sie möchten, dass jeder dieser Container 100% belegt, können Sie das tun. Ich werde etwas anderes machen. Ich wähle das aus und drehe es um, lege es da hin. Ich werde es genau dort lassen, wo es ist, aber ich kann es verkleinern, einfach so, veröffentlichen. Lass uns eine Vorschau der Änderungen anzeigen. Jetzt Shift I, ControlShift I und lasst uns zu diesen Geräten wechseln. Schauen wir es uns auf dem iPad Pro an. So sieht es also auf dem iPad Pro aus, wenn man nach unten scrollt. Ja, ich finde es sieht gut aus. Jetzt ist es an der Zeit, am responsiven Potter zu arbeiten. Also im Grunde weiß ich, dass wir keinen perfekten Job gemacht haben. Es gibt noch Verbesserungspotenzial, aber das ist natürlich nur, um Ihnen zu zeigen, wie es geht. Es liegt an dir, es fantastisch aussehen zu lassen. Aber selbst wenn das der Fall ist, lassen Sie mich das etwas größer machen. Mir gefällt nicht, wie es aussieht. Wähle das aus. Typografie. Lassen Sie uns die Größe bis vielleicht zu diesem Punkt erhöhen bis vielleicht zu diesem Punkt Und wenn wir zu unserem Tablet wechseln, wird es meiner Meinung nach viel besser aussehen. Aber jetzt erhöhen wir die Zeilenhöhe. Ordnung, also lass uns das veröffentlichen und eine Vorschau der Änderungen Ich finde, jetzt sieht es fantastisch aus. Wir sehen uns also im nächsten Fenster, während wir an einer responsiven Fußzeile arbeiten. Wir sehen uns in Kürze 26. Reaktionsfreudige Fußzeile: A Jetzt ist es an der Zeit, an der Fußzeile zu arbeiten. Machen wir es responsiv. Ich gehe wieder her. Jetzt werden Sie feststellen wir nicht daran gearbeitet haben, dies auf Mobilgeräten responsiv zu machen, und das liegt daran, dass Sie dieselben Prinzipien verwenden werden , die wir auf dem Tablet verwendet haben. Für diese Überschrift müssen wir zum Beispiel hier reingehen und sie verkleinern . Ich finde das nett. So wie es aussieht, ist es schon nett. Wir können das nehmen und es an der Mitte und dem Stil ausrichten. Machen Sie dasselbe für diesen. Oder wir können es wissen, weil wir diese Liste links ausrichten wollen diese Liste links ausrichten wollen Lassen wir einfach alles links ausrichten. Eine Sache, die ich hier tun kann, ist den Container auszuwählen , der das erweiterte Textfeld enthält. Und lassen Sie uns diesen Link nicht unterbrechen. Fügen wir einfach eine Polsterung von 20 auf allen Seiten hinzu. Wir fügen nur etwas Platz hinzu, etwas Platz an den Seiten Sie können also dasselbe dafür tun, wählen Sie das aus. Advanced 20 rundum gleichmäßig. Also mach einfach weiter und beende das, denn jetzt wollen wir zum Foto gehen. Ich werde das veröffentlichen. Oder lass mich das einfach sehr schnell machen. Lassen Sie mich diesen Teil einfach schnell vorspulen, 20, und los geht's. Veröffentlichen. In Ordnung, ich wechsle zu dem Telefon. Es sieht toll aus. Wechseln wir jetzt zur Fußzeile. In der Tat, lassen Sie uns jetzt einfach zu dieser Vorschau wechseln. Gehe zur Startseite. Fußzeile bearbeiten Tatsächlich hätten wir hier dasselbe tun können, indem wir das hier verlassen, das schließen und hierher gehen, Fußzeile. Aber mach dir trotzdem keine Sorgen Also lasst uns all diese anderen schließen. die Fußzeile auswählen und in den Tablet-Modus wechseln, lassen Sie uns natürlich ausdrücklich sagen, dass dies zu 100% ist Der gleiche Fall gilt hier. 96%, und das werde ich zulassen. Sollte ich diese Polsterung zulassen, Standardfüllung, weil ich das Gefühl habe , dass hier zu viel Platz ist Sehen wir es uns einfach im Frontend an, anstatt zu raten. Drücken Sie Shift I und lassen Sie uns in den Tablet-Modus wechseln . iPad Pro. Und jetzt möchte ich, dass wir auf die Homepage gehen, damit wir die Ausrichtung sehen können. Das ist es, wovon ich spreche. Dieser Bereich ist nicht so groß wie der Fotobereich, also müssen wir die Polsterung entfernen Das ist es, was mehr Inhalt hat. Wir können es breiter machen. Also Breite 40, sagen wir 50, ungefähr 50. Was ist mit 60? Oder was wir tun können, ist das, was wir zuvor getan haben. Wir können das zu 100% in der Breite machen. 100% Control I, um die Struktur zu verbessern. Wählen wir den Container aus, der diese drei Container enthält, gehen wir wieder rein und ich möchte, dass die Richtung so nach unten Wir können das Logo auswählen und die Breite festlegen, vielleicht bis zu diesem Punkt, diesen Stil wählen und an der Mitte ausrichten Lassen Sie uns dafür sorgen, dass es 100% belegt . Sie erinnern sich daran, dass wir auf dem Desktop einen gewissen Rand gesetzt haben, also lassen Sie uns das unterbrechen. Und denken Sie daran, das ist der Tablet-Modus. Welche Änderungen wir hier vornehmen, wirken sich also nur auf den Tablet-Modus aus, nicht auf den Desktop. Und dann lass uns das sagen. Wir können das in die Mitte stellen. Das kannst du zu 50% machen. Wählen Sie dies aus und richten Sie alles so zur Mitte aus. Wir können den oberen Rand, die obere Polsterung, Null entfernen . Wählen Sie das aus Wählen wir diese richtige Leak-Kopie aus. Wählen Sie den richtigen Leak-Paste-Stil. Einfach so. Wähle das aus. Hat es einen unteren Rand? Nein, was ist damit? Ich glaube, haben wir dafür eine Lücke für den Hauptcontainer geschaffen , in dem sie sich befinden? Ja, ich denke, wir haben 30 gesetzt, sagen wir zehn oder Null, weil ich dort nicht zu viel Abstand haben möchte. Aber dafür können wir es etwas nach unten verschieben, fortgeschritten, Marge unter den Top 30 veröffentlichen. Da haben wir's. Wie Sie sehen, ist das Wichtigste , was Sie lernen müssen, wie Sie diese Tools verwenden, um das Layout zu erstellen, das Sie sich vorstellen. Und Sie können sich inspirieren lassen, indem Sie nach Online-Shop-Vorlagen oder Website-Vorlagen suchen nach Online-Shop-Vorlagen oder Website-Vorlagen und einfach ein Design kopieren, das Ihnen gefällt Solange Sie wissen, wie man die Tools benutzt, können Sie jede Art von Website erstellen. Also werde ich das schließen. Nein, anstatt es zu schließen, zu kontrollieren, schauen wir es uns jetzt an. Strg Shift E. Wenn wir nach unten gehen , sieht unser Foto so aus. Ich bin damit zufrieden. Machen Sie weiter und spielen Sie weiter mit den Einstellungen herum , um zu sehen, was Sie sich einfallen lassen können. Ich kann diesen Text einfach kopieren. Lass uns zum Inhalt gehen. Verstanden ja, vielleicht können wir so etwas haben , weil mir nicht gefällt, wie diese Zeile aussieht. Drücken Sie Shift Eye. Ja, so etwas in der Art. So macht man die Fußzeile responsiv. Wir sind fast fertig mit den elementaren Seiten , denn wenn wir mit Woo-Kameras arbeiten, werden wir Elementor nicht verwenden Aber in der nächsten Lektion wollen wir uns ansehen, wie man mit Wordpress-Formularen arbeitet , während wir die Kontaktseite erstellen Denken Sie daran, dass wir eine Kontaktseite haben, falls ich zu unserer Referenzwebsite wechseln kann . Ja, das ist also unsere Kontaktseite. Wenn Sie eine WordPress-Website haben möchten, müssen Sie wissen, wie man Wordpress-Formulare verwendet, damit Leute mit Ihnen in Kontakt treten oder sich in Ihre Mailingliste eintragen können. Wenn sie hier ihre Daten eingeben und eine Nachricht senden, sollten sie in Ihren Posteingang kommen. Also, wie machst du das? Lassen Sie uns ab der nächsten Lektion sehen, wie das geht. 27. So aktualisierst du die Fußzeile: Mir ist genau hier eine Diskrepanz aufgefallen. Wenn ich nach unten scrolle und auf der Homepage bin, sieht die Fußzeile fantastisch Wenn ich auf die A-Seite gehe, die wir zufällig erstellt haben, gibt es hier jetzt ein Problem. Ich weiß also nicht, was genau passiert, aber lassen Sie uns sehen, ob wir das Problem beheben können. Gehen wir also zur Fußzeile. Nun, eine Sache, die wir tun können, ist diesen Inkognito-Modus zu öffnen , nur um zu sehen, wie er aussieht Drücke Shift N und ich gebe vfxpod.com ein. Füge es dort ein und scrolle nach unten, wenn ich zur Kontaktseite wechsle Ich denke, dieses Element hat einige Probleme, weil ich nicht weiß, warum es so passiert Warum wird es auf der Homepage so angezeigt, funktioniert aber auf diesen anderen Seiten nicht Also mal sehen, Liste Ja, wir können die Seitenliste verwenden. Tatsächlich hätten wir das schon vor langer Zeit verwenden sollen , da es sich um Links zu bestimmten Webseiten handelt. Lassen Sie mich das einfach dort ablegen. Artikel hinzufügen. Nennen wir das Zuhause. Wir können jetzt nach der Startseite suchen, indem wir sie dort eingeben. Und da haben wir es. Wir können auch einen weiteren Artikel hinzufügen. Nennen wir es Shop. Aber was den Shop angeht, müssen wir zuerst Woocomers installieren Schauen wir uns also jede andere Seite an, über die wir uns befinden, und kontaktieren sie. Also ungefähr und hier ungefähr. Wenn eine Seite nicht existiert, wird sie nicht angezeigt, wenn Sie hier einen Namen eingeben. Sagen wir also Produkte und geben hier Produkte ein, es wird nicht angezeigt, weil wir es wird nicht angezeigt, weil wir noch keine Produktseite haben. Aber da Sie eine Kontaktseite haben, können wir diesen Kontakt dort platzieren. Ändern wir das also in Kontakt. Und jetzt heißt es Kontakt. Jetzt entfernen wir das und ziehen es da rein. Dann lass uns das entfernen. Es funktioniert einfach nicht. Zuhause. Ich werde das nur duplizieren, aber für Sie werden Sie die Seiten verwenden, die Sie benötigen. Jetzt werde ich auch diesen Container auswählen. Gleichmäßiger Raum. Schauen wir uns einfach an, was wir hier haben. Ordnung, wir können einfach den Abstand zwischen den beiden vergrößern , anstatt sie zu weit voneinander entfernt zu platzieren. Also sagen wir 40 oder 60, 60. Ja. Ich mag es so. Und jetzt werden Sie feststellen, dass die Farbe Blau ist, und das liegt daran, dass dies die globale Farbpalette von Astra, dem Thema, ist . Wir müssen also in den benutzerdefinierten Bereich gehen, um diese Farbe zu ändern. Also sage ich veröffentlichen. Wir müssen das auf andere Seiten ändern, die Sie haben. Vielleicht Datenschutzrichtlinie. Welche Seiten haben wir übrigens? Wenn ich nur schnell zu den Seiten zurückkehren könnte. Wir haben nur drei. Lass uns noch ein paar Seiten hinzufügen. Eins, zwei, drei, Datenschutz veröffentlichen. Ich werde hier sagen: Nutzungsbedingungen, Veröffentlichung und Cookies. Veröffentlichen. Sie können so viele Seiten hinzufügen, wie Sie möchten. Aber lassen Sie mich jetzt alle schließen. Auffrischen. Jetzt haben wir all diese Seiten. Gehen wir also wieder rein und wählen das aus, können wir das Datenschutz nennen und hier Datenschutz eingeben. Datenschutz. Wählen Sie diese Nutzungsbedingungen aus. Bedingungen. Und schließlich Kekse. Keks. Da haben wir's. Perfekt. Veröffentlichen. Und jetzt, da es kleiner ist, denke ich, können wir es breiter machen. wir das auswählen, machen wir es vielleicht zu 40% und reduzieren auf 20%, um es zu veröffentlichen. Vorschau. Und ich denke, es sieht besser aus. Nun, wie ich bereits erwähnt habe, müssen wir zur Anpassung übergehen , da dies Links sind . Astra legt automatische Farben für alle Links gibt ihnen eine globale Farbe, da, wie ich bereits erwähnt habe, ein Thema das Erscheinungsbild Ihrer Website bestimmt das Erscheinungsbild Ihrer Website alle Standardeinstellungen vorgibt. Es liegt an dir, sie zu ändern. Also hier sind wir. Wenn wir zu globalen Farben und Tinten übergehen, können wir dies auf unsere Markenfarben ändern oder wir können vielleicht diese Farbe auswählen. Da haben wir es, aber es ändert sich nicht. Ich weiß nicht warum. Äh, lass uns die Akzentfarbe ändern. Nun, das ist ein limitierender Faktor , denn was ist, wenn ich schweben will Wenn ich mit der Maus über einen von ihnen fahre, wollte ich, dass er seine Farbe ändert, aber ich kann Aber das ist keine große Sache. Solange es sich um eine Hand handelt, weiß jemand, dass er klicken kann. Jetzt, wenn wir das schließen, los geht's. Also gehen wir nach Hause und testen es auf den anderen Seiten. Also so sieht es dort aus. Über die Seite. So sieht es aus. Kontaktseite. Fantastisch. Sieht gut aus. Also, wie ich bereits erwähnt habe, in der nächsten Lektion, ab der nächsten Lektion, wir in der nächsten Lektion, ab der nächsten Lektion, mit dem Aufbau unseres Wocomers-Ladens Wir werden Produkte entwickeln. Dann werden wir die Produktseite erstellen. Wir werden eine Verbindung zu PayPal herstellen und es den Leuten ermöglichen, Zahlungen auf Ihrer Website zu tätigen Zahlungen auf Ihrer Website zu tätigen damit Sie ihnen die Waren liefern können. wir fertig sind, wird diese Website bereit sein, Geld zu erhalten. Mal sehen, wie das geht. Nächste Lektion. 28. Ein Kontaktformular erstellen: Eh, willkommen zurück. Jetzt ist es an der Zeit Sie lernen, mit Wordpress-Formularen zu arbeiten. Lassen Sie mich jetzt zur Referenz-Website wechseln. Wie Sie hier auf der Kontaktseite sehen können, haben wir ein Formular, in dem der Benutzer seinen Namen, seine E-Mail-Adresse und seine Nachricht eingeben muss dem der Benutzer seinen Namen, seine E-Mail-Adresse und seine Nachricht eingeben . Wenn sie eine Frage haben oder uns Feedback geben möchten, können sie dies über dieses Formular tun. Wie erstellt man also ein Wordpress-Formular? Das ist die größte Frage. Dazu benötigen wir ein Formular-Plugin. Lass uns zurück zu unserer Website wechseln. Hier sind wir, ich bin im Armaturenbrett. Also gehe ich zu Plug-ins, Neues hinzufügen. Wenn ich jetzt ein Formular eintippe, werden Sie feststellen, dass uns mehrere Foam-Plugins zur Verfügung stehen. Aber das, was wir wollen, heißt Forminator Forms von WPMU Für mich ist das das beste Foam-Plugin aller Zeiten. Es bietet dir mehrere kostenlose Funktionen , für die du sonst bezahlen müsstest, wenn du andere Foam-Plugins verwendest. Ordnung, also lass uns weitermachen und es installieren, und ich werde weitermachen und es aktivieren. Und sofort werden Sie sehen, dass es hier auftaucht. Wenn ich also einfach klicke , gelangen wir zum Plug-in-Dashboard, dem Dashboard von Forminator Und wie Sie hier sehen können, können wir weitermachen und einen Foam oder eine Umfrage erstellen Wenn Sie auf Ihrer Website Umfragen durchführen möchten, können Sie kostenlos die Meinungen der Nutzer sammeln Also mache ich weiter und erstelle und uns werden diese Vorlagen präsentiert, mit denen wir beginnen können Aber ich möchte, dass wir ein leeres Formular verwenden , damit wir es von Grund auf neu erstellen können. Nehmen wir an, das ist die Kontaktseite. Also kontaktiere. Kontaktformular. Lass mich einfach das Kontaktformular kontaktieren, erstellen. Und hier sind wir. Jetzt sollen wir hier unsere Felder eingeben, und das können wir tun, indem wir auf Felder einfügen klicken. Dies sind die verschiedenen Arten von Feldern, die wir zu unserem Formular hinzufügen können. Also sage ich, ich möchte ein Namensfeld. Ich möchte auch ein E-Mail-Feld und ein Textbereichsfeld. Wenn ich wieder hierher wechsle, ist dies ein Namensfeld, eine E-Mail und ein Textbereichsfeld. Feld einfügen. Und wie Sie jetzt sehen können, haben wir eins, zwei, drei, und das ist der Button. Das wird automatisch hinzugefügt. Sie müssen lediglich ändern, was es tut oder sagt. Bevor wir also etwas anderes tun, möchte ich, dass Sie auf Vorschau klicken. So sieht unser Formular derzeit aus. Mal sehen, ob wir es leicht aktualisieren können. Also werde ich es zuerst veröffentlichen . Und sobald wir es veröffentlichen, erhalten wir diesen Shortcode. Das müssen wir in das Frontend auf unserer Kontaktseite einfügen , um die Familie anzuzeigen. Lassen Sie mich das schließen. Wenn ich zu Seiten gehe und zwinkere, Link in neuem Tab öffnen und hier zum Tab gehe, haben wir die Kontaktseite Also sage ich bearbeiten Es ist noch keine elementare Seite. also zunächst daran, dass wir zur Vorlage gehen und sie auf Elementor mit voller Breite ändern Gehen wir auch zu den Astra-Einstellungen. Geben wir ihm eine volle Breite, reduzieren das, erweitern die Seitenleiste, keine Seitenleiste, reduzieren sie und lassen Sie uns diese Felder deaktivieren Speichern Sie das. Und jetzt können wir mit Elementor weiterbearbeiten. Und los geht's Es ist also eine leere Seite, aber wir haben unsere Fußzeile und Kopfzeile 29. Die Kontaktseite erstellen: Wenn Sie also wieder hierher wechseln, haben wir die Kontaktgeber. Lass mich das einfach kopieren jetzt hier natürlich Lassen Sie mich jetzt hier natürlich das Plus hinzufügen. Lassen Sie uns die Überschrift dort platzieren. Lass mich das da einfügen. Lassen Sie mich auch diese Textkopie holen. Außerdem nein. Gehen wir hier zum Plus-Texteditor. Und lassen Sie uns das da reinlegen. Sie sind also beide in diesem Container, aber wir haben keinen Container , der sie aufnehmen sollte. Also habe ich das vergessen. Also lass uns einen Container hinzufügen. Er ist innerhalb des äußeren Containers, also können wir ihn ziehen und dort ablegen und das da drin. Wählen Sie das jetzt wie gewohnt aus. Machen wir es zu 100% aus dem Bildschirm. Dann nehmen wir das und machen es zu 80%. Dann geh zurück und richte es auf die Mitte aus. Warte, genau da. Okay, also wählen Sie „An der Mitte ausrichten “, „Stil“, „ Ausrichten Wenn wir das auswählen, kehren wir zur Stil-Typografie zurück. Machen wir 900 draus. Ich mag es sehr riesig. Also erhöhe die Größe vielleicht bis zu 0,50. Und natürlich die Farben. Geben wir ihm dieses Blau. Du kannst ihm jede Farbe geben, die du willst. Also wähle Farbe. Wählen Sie eines dieser kopierten Pixel aus, wählen Sie dieses aus. Geh hier rein, füge dort ein. Jetzt kann ich auch diese Farbe wählen. Geh zurück zu diesem Kontakt. Wir können diese Spanne hinzufügen. Spanne, Spanne. Ich gehe wieder rein. Stil entspricht Farbe, fügen Sie diese Farbe dort ein. Veröffentlichen Also lass mich jetzt dieses Exemplar holen. Inhalt, fügen Sie ihn dort ein und wählen Sie ihn aus, um diese Details hinzuzufügen. Veröffentlichen. Da haben wir's. Nun, wie Sie sehen können, ist das nicht so breit wie das, was wir hier haben. Also können wir das auswählen und die Polsterung an den Seiten erhöhen, vielleicht die Polsterung links, 50, die Polsterung rechts, 50 oder vielleicht 150, und hier 15250, 250 oder sagen wir Spielen Sie einfach mit den Werten herum, bis Sie zufrieden sind. Das sind 2.500. Das tut mir leid. Veröffentlichen. 30. Das Kontaktformular anzeigen: Denken Sie also daran, wir sind hier in Forminator. Wir haben gerade unser Formular erstellt, und als wir das Formular erstellt haben, wurde uns ein Kurzcode gegeben, aber das Pop-up Um auf den Shortcode zuzugreifen, gehen Sie einfach hierher und kopieren Sie den Shortcode. Ja. Also, wenn wir wieder rein gehen, können wir einen neuen Abschnitt auswählen und hinzufügen. Oder wir können das duplizieren, einfach das duplizieren. Und lass uns alles hier löschen. Lassen Sie uns die Polsterung entfernen, die wir angewendet haben, oder lassen wir sie einfach dort weil wir wollen, dass sie diese Polsterung hat Aber um den Kurzcode einzufügen, müssen wir nach dem Shortcode-Element suchen Also Shortcode, leg ihn dort ab. Dann fügen wir den Kurzcode ein, den wir gerade von hier kopiert haben. Fügen Sie es hier ein und das Formular wird hier angezeigt. Veröffentlichen Sie also die Vorschau. Und da haben wir es. Nun, wie ich schon sagte, brauchen wir tatsächlich mehr Polsterung an den Seiten Also müssen wir das auf vielleicht 300 oder 400 erhöhen. Nehmen wir an, 300 mal 300 veröffentlichen. Nun, wenn wir uns das ansehen, okay, mir gefällt diese Breite. Also, unsere Kontaktseite nimmt langsam Gestalt an Wenn wir scrollen, ist hier unser Foto. Was ist falsch daran? Auffrischen. In Ordnung, wir werden wieder daran arbeiten. Mach dir keine Sorgen 31. Das Kontaktformular gestalten: Jetzt müssen wir das ein wenig stylen , denn wie Sie hier sehen können, habe ich einige dicke graue Ränder. Das nimmt die gesamte Breite ein. Wie erreichen wir das also? Gehen wir wieder rein und gehen zurück zum Formulator, den Formulator-Einstellungen Nachdem unsere Felder hinzugefügt wurden, gehen wir zum Erscheinungsbild, indem auf dieses oder hier unten klicken Also Aussehen, wir können uns dafür entscheiden. Das habe ich für die Referenz-Website ausgewählt, aber lassen Sie mich vorerst damit fortfahren. Und wir wollen die Farben ändern. Lassen Sie uns benutzerdefinierte Farben verwenden. , dass wir für die Schaltfläche „Senden“ Ich möchte, dass wir für die Schaltfläche „Senden“ diese Farbe verwenden. Also gehen wir wieder rein und wählen das aus, wir wollen diesen Farbcode nehmen und wieder hier rein gehen. Hintergrundfarbe, das und Oh, warte, wir fügen es hier und die Textfarbe sollte weiß sein. Also, wenn wir es in der Vorschau ansehen , dann haben wir das. Denken Sie jetzt daran, dass wir das Erscheinungsbild ohne Rahmen ausgewählt haben . Also müssen wir den Eingabe- und Textbereichsfeldern eine Hintergrundfarbe geben . Die Hintergrundfarbe kann ihm also ein sehr schwaches Grau verleihen, vielleicht bis zu diesem Punkt, wenn ich es mir in der Vorschau ansehe. Ja, du kannst es sehen Ich weiß nicht, ob du es sehen kannst, aber du kannst es dunkler machen, wenn du willst, oder solche mit Rand verwenden oder hier einfach eine Rahmenfarbe wählen Sagen wir diese Farbe, Vorschau. Ich weiß nicht, warum es nicht auftaucht. Lass uns eine dunkle oder eine andere Farbe wählen, nur um eine Vorschau davon zu sehen. Okay, wir können keine Rahmenfarbe festlegen, da wir diese ohne den Rand ausgewählt haben . Also lass uns das auswählen Wenn wir jetzt hierher zurückkehren und eine Vorschau davon ansehen, richtig. Ja, jetzt wird die Farbe wirksam, aber wir wollen, dass die Farbe ein schwaches Grau Sie können hier also manuell F 9f9f9 eingeben. Sehen wir uns eine Vorschau der Änderungen an. Das gefällt mir. Auf Ha sollte die Randfarbe einfach so bleiben. Wenn es fokussiert ist, kann die Randfarbe jetzt dieses dunklere Grau sein. Das meine ich. Lass es mich dir zeigen. Auf Ha ändert sich nichts, aber wenn es aktiv ist, hat es diese Randfarbe. Aktualisiere das. Und wenn wir jetzt zum Kontakteditor gehen, das Shortcode-Element auswählen und anwenden, werden wir die Änderungen anwenden, die wir im Backend vorgenommen haben. Da haben wir's. Wie Sie sehen können, sind die Farben wirksam geworden, und jetzt können wir eine Vorschau anzeigen, um die Vorschau zu aktualisieren. Da haben wir's. Mir gefällt, was wir haben, aber diese Ecken sind zu scharf. Ich liebe es, wenn meine Ecken so leicht abgerundet aussehen. Also lass uns wieder hier rein gehen. Und bevor wir zu weit gehen, möchte ich zurück auf die Felder. Hier können wir diese Platzhaltertexte ändern , all diese Also hier, Herr Moneybags kann sich hier auf die E-Mail bewerben und mir auf ihrer.com sagen, kann sich hier auf die E-Mail bewerben und mir auf ihrer.com sagen, Text bewerben. Fangen Sie an zu tippen. Bewerben Sie sich. Update, Vorschau. Da haben wir's. Der Platzhalter wurde also aktualisiert Und wenn Sie die Farbe ändern möchten, können Sie zum Erscheinungsbild wechseln und zum Farben -, Eingabe- und Textbereich zurückkehren Lass uns sehen. Platzhalter. Es gibt also Farbe und es gibt die Textfarbe Platzhalter ist also dieser Text, aber die Textfarbe ist, wenn Sie mit der Eingabe beginnen Das sind also zwei verschiedene Arten von Text. Sie können hier also die Farbe einstellen. Sie können sagen, dass der Platzhalter so schwach grau sein sollte. Mal sehen, wie es aussieht. So wie das. Oder du kannst es dunkler machen. Vielleicht so. Dann kannst du für die Textfarbe etwas Dunkles oder vielleicht das einstellen. Vorschau. Wenn ich anfange zu tippen, ist es sehr gut sichtbar. Aktualisiere das. Und jetzt, um diese anderen Änderungen vorzunehmen, sodass eine abgerundete Ecke hinzugefügt wird und diese Schaltfläche die gesamte Breite einnimmt, diese Schaltfläche die gesamte Breite einnimmt, müssen wir benutzerdefiniertes CSS verwenden 32. Benutzerdefiniertes CSS für Forminator: Gehen wir also wieder rein und scrollen wir nach unten, wir werden ein Feld für benutzerdefiniertes CSS haben, das aktivieren, und jetzt haben wir ein Feld, in das wir Code eingeben können Und der Formulierer hat vorausgedacht und uns sogar einige Selektoren zur Verfügung gestellt, die wir vielleicht verwenden möchten, um zum Beispiel den Textbereich zu beeinflussen Wir können Und was auch immer wir in diese beiden Klammern setzen, gilt für das Textbereichselement Ich möchte also einen Grenzradius von fünf Pixeln sagen. Wenn ich mir das in der Vorschau ansehe, werden Sie jetzt feststellen, dass der Textbereich diese abgerundete Ecke hat, aber die Eingaben, das sind Eingabefelder. Dies ist ein Textbereichsfeld. Machen wir also dasselbe auch für die Eingabefelder. Also setze die Maus-Autos da hin und gib die Eingabetaste ein, dann gib ein. Treten Sie ein. Wir können das kopieren und dort einfügen. Vorschau. Und jetzt ist es auch abgerundet. Ich meine, im Moment denke ich, dass es zu verblasst ist, weil wir zumindest die Ränder oder den Platzhaltertext besser hätten sichtbar machen sollen zumindest die Ränder oder den Platzhaltertext besser Lassen Sie mich das einfach aktualisieren, bevor wir weitermachen und hier zu den Farben zurückkehren Ich denke, die Randfarbe kann dunkler sein, so dunkel. Ich denke, jetzt sieht es viel besser aus. Kann es leicht ohnmächtig machen. Vorschau. Ja. Ordnung. Nun, Sie werden feststellen, dass wir keinen Selektor für den Button haben, aber all die Jahre, in denen ich den Formatierer für den Button benutzt habe Formatierer für den Mit der Schaltfläche „Absenden“ folgt der Formulierer immer seiner Konvention: „Eingeben“, „ Formatierer“, „Senden“ Formatierer Also kopiere ich das einfach und füge es dort ein. Treten Sie ein. Lassen Sie uns zunächst eine Vorschau der Änderungen dort anzeigen. Und jetzt, wie Sie sehen, ist es auch abgerundet. Aber jetzt können wir Breite 100% sagen, warte. Mit 100% Vorschau. Da haben wir's. Sieht jetzt viel besser aus. Aktualisiere. Es wurde aktualisiert, gespeichert. Gehen Sie wieder rein, wählen Sie das Kurzcode-Element aus und wenden Sie es an. Und jetzt, wenn wir eine Vorschau der Änderungen sehen, sind wir fertig. Unser Formular sieht jetzt fantastisch aus. 33. Reaktionsfreudige Kontaktseite: Ordnung. Also, warum machen wir nicht weiter und sorgen dafür, dass es sehr schnell reagiert. Gehen wir also zurück zu dieser Seite und lassen Sie uns diese Seite responsiv machen. In den Tablet-Modus wechseln. Wie Sie sehen können, wird die Polsterung, die wir im Desktop-Modus hatten, immer noch angewendet also diese Option für Fortgeschrittene auswählen, wollen wir diese Pause machen Lass das einfach genau so stehen, wie es ist. Wählt das auch aus. Lass uns das kaputtmachen. Und da haben wir's. Nichts mehr veröffentlichen. Also wenn wir uns das ansehen, dann Control Shift I , so sieht es auf einem iPad Pro aus. Wenn wir zu einem solchen Mobilgerät wechseln, können wir an der Seite etwas Polsterung hinzufügen. Wenn wir also zum Handy wechseln, dieses auswählen, können wir sagen, das kaputt machen Dann links, 20 rechts, 20. Der gleiche Fall gilt dafür. Mach das 2020 kaputt. Lass uns das auswählen. Wir können die Schrift verkleinern, um eine Zeile daraus zu machen, veröffentlichen. Los geht's. Jetzt sieht es auf einem Handy fantastisch aus. Ja. erstellen Sie ein Wordpress-Formular mit Forminator Wie ich bereits erwähnt habe, ist Formator eines meiner Lieblings-WordPress-Plug-ins Und wenn es um die Erstellung von Formularen geht, ist Formuator zweifellos mein bevorzugtes Formular-Plug-In In der nächsten Lektion beginnen wir mit der Einrichtung unseres WooCommers-Shops, denn jetzt haben wir die Homepage und die Kontaktseite Wir wollen jetzt den Shop einrichten. Wie machen wir das? Sehen wir uns nächsten Lektion an, wie das geht. 34. WooCommerce einrichten: Jetzt ist es an der Zeit, Woo Comers auf unserer Website einzurichten. Gehen wir also zu den Plugins und fügen Sie WooComers vom Typ New Noll Und hier ist es mit mehr als 8 Millionen aktiven Installationen, also werde ich NL installieren Und lassen Sie uns weitermachen und es aktivieren. Es öffnet sich also ein Einrichtungsassistent, den wir Schritt für Schritt durchgehen werden. Also hier sind wir. Wenn du anonyme Daten teilen möchtest, kannst du dies aktiviert lassen, um ihnen zu helfen, ihr Plugin zu verbessern. Du kannst diese geführte Einrichtung überspringen und sie selbst im Dashboard durchführen oder mit diesem Einrichtungsassistenten fortfahren. Lassen Sie uns nun diese geführte Einrichtung überspringen. Land, in das Sie reisen , wo sich Ihr Unternehmen befindet? Wählen Sie also Ihr Land aus. Ich bin in Kenia, also gebe ich Kenia ein. Moment, kann ich zurückgehen? Okay, wir brauchen diese geführte Einrichtung nicht, weil ich in Kenia bin, geh in meinen Laden Der Grund, warum ich die Anleitung zur Einrichtung übersprungen habe, ist, Ihnen zu helfen, zu verstehen, wie Sie WooComas im Dashboard einrichten WooComas im Dashboard einrichten Hier kannst du das Setup fortsetzen. Wir hätten dieselben Schritte durchlaufen. Die erste Option hier besteht also darin, unseren Shop individuell anzupassen. Wenn ich also darauf klicke, werden wir zu einer Seite weitergeleitet. Du musst das nicht tun, weil ich dir nur etwas zeigen möchte. Wir werden diesen Customizer etwas später verwenden , um unsere Checkout-Seiten, unsere Warenkorbseite und all das zu erstellen unsere Warenkorbseite und all das Ich wollte dir nur zeigen, was der erste Schritt beinhaltet. Und Sie haben die Möglichkeit, Vorlagen auszuwählen, die vom Wocomer-Team vorgefertigt wurden , oder Ihr eigenes Thema zu entwerfen Und genau das werden wir später tun. Gehen wir also zurück, wie Sie sehen können, besteht der zweite Schritt darin, ein Produkt zu entwickeln, und genau das werden wir in der nächsten Lektion tun . Wir sehen uns in Kürze. 35. Ein WooCommerce-Produkt erstellen: Jetzt ist es an der Zeit, unser erstes Wocomers-Produkt zu entwickeln. Wie Sie sehen können, ist das hier der zweite Schritt. Jetzt kann ich darauf klicken und zu der Stelle weitergeleitet werden, an der wir ein neues Produkt erstellen werden, aber ich möchte, dass wir es genauso machen wie Sie die anderen Produkte erstellen werden , weil dies Teil des Assistenten ist und wir dem Assistenten nicht folgen möchten. Ich möchte Ihnen zeigen, wie Sie ein Produkt erstellen, wenn dieser Assistent nicht mehr verfügbar ist. Also Produkte, lass uns zu allen Produkten gehen. Zuallererst, um zu sehen, was wir hier haben. Und jetzt haben wir kein Produkt. Sagen wir also, erstellen Sie ein Produkt. Geben wir ihm einen Namen. Du kannst diese Tour machen, wenn du willst, aber ich nehme dich natürlich praktisch mit auf eine Tour, also musst du das nicht tun. Jetzt möchte ich hier zu unserer Referenz-Website wechseln und den Shop gehen und eines der Produkte hier öffnen. Sagen wir diese Schlagbohrmaschine. Und ich möchte, dass wir so etwas kreieren. Wie Sie sehen können, brauchen wir als Erstes einen Namen. Also geben wir ihr einfach diesen Namen für die Schlagbohrmaschine. Also kopiere ich das einfach. Natürlich tippst du für dich den Namen ein, das echte Produkt, das du verkaufen möchtest. Und jetzt, diese kurze Beschreibung hier, ich mache sie gerne zu einer Aufzählung der wichtigsten Merkmale dieses Produkts, Stichpunkte und sonst nichts. Das nennen wir Kurzbeschreibung. Und dann ist das die lange Beschreibung. Jetzt möchte ich die lange Beschreibung kopieren, was für Sie etwas ist, das Sie eingeben werden, aber ich kopiere das nur, um Zeit zu sparen. Also zu Recht kopieren. Wenn Sie hier zur Produktbeschreibung zurückkehren , platzieren Sie dort die lange Beschreibung. Und wenn wir jetzt hier nach unten scrollen, haben wir die Kurzbeschreibung des Produkts. Dort haben wir diese kurze Beschreibung eingefügt. Ich kopiere das und füge es hier ein. Jetzt haben wir alle gängigen Textbearbeitungswerkzeuge , die Sie möglicherweise benötigen. Wenn Sie das also selbst eingeben, sollten Sie dieses Listenelement mit Aufzählungszeichen verwenden Sie müssen also nur das neue Feature eingeben, Enter und all Stellen Sie einfach sicher, dass Sie das aktivieren. In Ordnung, also mach das. Wir können jetzt auch die Produktdaten bereitstellen. Dies ist ein einfaches Produkt. Es kann sich auch um ein gruppiertes Produkt handeln. Es kann ein Affiliate-Produkt und all das sein. Es ist ein Produkt auf unserer Website, das wir verkaufen. Es ist kein virtuelles Produkt. Es ist kein digitaler Download. Wenn es herunterladbar wäre, würdest du Virtuell und herunterladbar auswählen. Virtuell bedeutet vielleicht ein Online-Kurs. Herunterladbar ist natürlich eine Datei, die die Leute nach dem Bezahlen herunterladen können. Sie können auch die Währung festlegen. Wir werden sehen, wie man die Währung ändert. Im Moment sind es Kenia-Schillinge, weil ich meinen Standort als Kenia ausgewählt habe Aber du kannst das in jede Währung ändern. Ich werde sagen, was ist das? Eine Bohrmaschine. Ja, vielleicht 6.000 Schilling Mit Rabatt 5.500 Schilling. Lassen Sie mich sehen, was wir jetzt noch brauchen , denn ich möchte, dass wir bestimmte Dinge in einer anderen Lektion behandeln in einer anderen Lektion Wir können auch festlegen viel Lagerbestand für dieses Produkt verfügbar ist. Jedes Mal, wenn ein Kunde das Produkt kauft und es sich um ein physisches Produkt handelt, wissen Sie, dass Ihr Lagerbestand jetzt um eins sinkt. In Ihrem Geschäft So behält die Website den Überblick für Sie. Sie können den einzeln verkauften Serienstarter ändern. einige dieser Dinge können Sie mehr erfahren , wenn Sie mehr über Wocomers erfahren Was uns im Moment interessiert, ist die Entwicklung des Produkts und das Verständnis des Workflows zur Herstellung und zum Verkauf von Produkten Sie können mehr über WooComers erfahren, indem Sie sich Tutorials ansehen. Gehen wir jetzt zum Versand. Ich werde den Versand überspringen, weil wir den Versand derzeit nicht übernehmen werden. Gehen wir zu den verlinkten Produkten. Das werden wir uns ansehen. Mach dir keine Sorgen. Erweiterte Attribute. Lass uns das alles überspringen. Als Nächstes möchten wir ein Produktbild hinzufügen. Also wähle ich hier das Produktbild aus. Und es ist die Schlagbohrmaschine. Gehen wir also zum Assets-Ordner. Das ist das Produkt Drill, Open Set. Und jetzt veröffentlichen wir es vorerst. So können wir eine Vorschau der Änderungen anzeigen. Und jetzt herzlichen Glückwunsch. Sie haben Ihr erstes Produkt kreiert. Wenn Sie es sich jetzt ansehen, ist es nicht kategorisiert. Es ist eine Schlagbohrmaschine. Hier ist ein Brotkrumen. Es ist nur ein Pfad, der zeigt, wo genau auf Ihrer Website sich das befindet Dann haben wir unsere kurze Beschreibung, dann die lange Beschreibung. Und wenn Kunden Bewertungen hinterlassen haben, können Sie sie hier sehen. Kunden können hier Bewertungen sehen. Wie Sie sehen können, handelt es sich um eine einfache Produktseite. Wenn ich darauf umsteige, werden Sie feststellen, dass wir auch Kategorietools und Tags haben und die Marke hier Inko ist Und wir haben das, was dir auch gefallen könnte, und das ist eine andere Übung Aber wenn jemand nach dieser Bohrmaschine sucht, könnte sie daran interessiert sein. Und wir haben auch ein verwandtes Produkt, einen Satz Schraubenschlüssel, was darauf zurückzuführen ist, dass sie alle unter dieselbe Werkzeugkategorie fallen unter dieselbe Werkzeugkategorie Wie machen wir das? Sehen wir uns das in der nächsten Lektion an. Sehen Sie sich in Kürze an. 36. Produkttaxonomien: Jetzt ist es an der Zeit zu lernen, wie man diese Kategorien und Tags sowie die Marke hinzufügt diese Kategorien und Tags sowie die Und diese werden in der Wordpress-Welt Taxonomien genannt. Taxonomien helfen Ihnen lediglich dabei, Ihre Inhalte zu organisieren , da Ihre Produkte möglicherweise in verschiedene Kategorien fallen Und innerhalb dieser Kategorien kann es Unterkategorien von Produkten geben Auf diese Weise können Kunden viel schneller finden , wonach sie suchen . Also, wie machen wir das? Lass uns auf unsere Website wechseln. Und ich weiß natürlich, dass wir bei unseren Produkten keinen Papierknopf haben , und das werden wir in der nächsten Lektion tun, wenn wir das Zahlungssystem hinzufügen. Gehen wir also zurück zum Editor, wie Sie hier unten sehen können, haben wir unser Produkt momentan in der Kategorie Unkategorisiert. Dies ist die Standardkategorie in WordPress, und du kannst diese Kategorie niemals löschen, denn wenn du andere Kategorien löschst und Produkte diesen Kategorien zugewiesen wurden, du sie aber standardmäßig gelöscht hast, werden diese Produkte jetzt in der Kategorie Nicht kategorisiert platziert. Sie können die Kategorie „ Nicht kategorisiert“ also nicht löschen. Jetzt, während Sie ein Produkt erstellen, können Sie es schnell einer anderen Kategorie zuordnen , indem Sie auf Hinzufügen klicken Das fällt also unter die Kategorie Tools. Sagen wir also Tools und Enter. Lassen Sie uns jetzt das Häkchen bei „ kategorisiert“ entfernen und das aktualisieren. Sehen wir uns eine Vorschau der Änderungen an. Und jetzt, wie Sie sehen können, ist die Kategorie Werkzeuge. Wenn wir wieder reingehen, können wir es auch kennzeichnen. Also, das ist eine Übung. Unter Werkzeuge können wir also eine Unterkategorie namens Bohrer haben. Tags sind einfach Beschriftungen, um Unterkategorien innerhalb einer Kategorie anzuzeigen Also sagen wir, ja, Bohrmaschinen. Und Sie können einem Produkt mehrere Tags hinzufügen, denn es handelt sich nicht nur um eine Bohrmaschine, sondern auch um eine Schlagbohrmaschine Es gibt eine Schlagbohrmaschine und es gibt eine Schlagbohrmaschine, aber das sind alles Bohrmaschinen Man kann also auch Schlagbohrmaschinen sagen. Also wenn ich hierher gehe, um die Änderungen zu aktualisieren und eine Vorschau anzuzeigen Wie Sie sehen können, hat unser Produkt nun Tags, die als Bohrer und Schlagbohrmaschinen bezeichnet Wenn es sich nicht um eine Schlagbohrmaschine handelt, weisen wir ihr weder das Etikett noch das Etikett für Schlagbohrmaschinen zu. Ich hoffe, du verstehst das Nun, es ist nicht nur eine Bohrmaschine, sondern auch eine Bohrmaschine, die von einer bestimmten Marke hergestellt wird. Vielleicht sucht ein Kunde nach einer bestimmten Marke. Wir haben diese Option auch hier. Woo Comer hatte die Nase vorn und sagte: Lasst uns den Leuten alles bieten, was sie brauchen, um ihren Online-Shop robust und leistungsstark zu machen ihren Online-Shop robust und leistungsstark Lassen Sie uns also eine neue Marke hinzufügen. Sagen wir Milwaukee und Enter. Und jetzt werde ich das aktualisieren und die Änderungen überprüfen Da haben wir's. Die Marke ist also Meal Work. Ich liebe das. Gehen wir jetzt wieder rein und schauen uns die linke Seite des Menüs an, wie Sie sehen können, haben wir Kategorien, Tags und Marken. Sie können also im Voraus weitere Tags, Kategorien und Marken erstellen , noch bevor Sie Ihre Produkte erstellen. Schauen wir uns also an, wie das geht, denn das ist sehr hilfreich, die Möglichkeit, Ihre Marken und all diese anderen Taxonomien im Voraus zu erstellen Ihre Marken und all diese anderen Taxonomien Also werde ich erstellen, ich gehe zu Kategorien, weil wir das aktualisiert haben . Schließ das. Wie Sie sehen können, gibt es zwei Kategorien, nämlich die Originalkategorie und die Kategorie „ Tools“, die wir erstellt haben. Denken Sie daran, dass ich Ihnen gesagt habe, dass Sie das nicht löschen können. Wie Sie sehen können, gibt es eine Option zum Löschen, wenn ich mit der Maus darüber fahre, aber hier gibt es diese Option nicht Lassen Sie uns nun weitere Kategorien erstellen. Sagen wir Motorräder. Sagen wir Computer, alles, was mit Computern und Fahrzeugen zu tun Ich denke, das ist genug. Genau wie wir es hier getan haben, können wir auch zu Marken gehen und ein paar Marken hinzufügen. Wir werden, sagen wir, das Milwaukee First-Tool verkaufen sagen wir, das Milwaukee First-Tool Was sonst? Insgesamt. Dies sind verschiedene Marken und Video, da Sie auch GPUs verkaufen werden Sagen wir Intel. Wir verkaufen keine GPUs von Intel allein, NVDA allein, AMD. Geld verdienen, wir verkaufen auch Kleidung, Designerkleidung. Wir haben also all diese Marken. Wir können auch Tags hinzufügen, aber ich füge gerne Tags hinzu, wenn ich tatsächlich aktiv an einem bestimmten Produkt arbeite, weil ich dann darüber nachdenken kann, welches Tag ich dem Produkt geben möchte. Aber natürlich kannst du hier alle Tags eingeben , die dir einfallen. Wenn ich also noch einmal ein neues Produkt hinzufüge, kann ich mich einfach hier umschalten lassen. Und ja, lassen Sie uns diesen Schraubenschlüssel kreieren. Und los geht's. Also Premium-Schraubenschlüsselsatz Verstanden. Für Sie geben Sie den Namen Ihres Produkts ein. Ich habe gerade denselben Text verwendet. habe es überall eingefügt , weil es nur ein Platzhalter für dich ist. Lassen Sie uns auch die wichtigsten Funktionen betrachten. Fügen Sie sie hier als Zusammenfassung ein. Geben wir ihm einen Preis. Das ist ein Premium-Set, also gebe ich ihm vielleicht 3.500 Schilling Es wird für 2.900 Schilling angeboten. Und wenn wir uns jetzt unsere Kategorien hier unten ansehen, werden Sie feststellen, dass alle von uns erstellten Kategorien uns erstellten Das ist ein Schraubenschlüsselsatz. Wir können es unter Werkzeuge platzieren. Für die Produktetiketten. Nun, das meinte ich, als ich sagte, dass ich gerne Tags platziere, wenn ich ein Produkt bearbeite. Das sind Schraubenschlüssel. Gib das ein Nehmen wir für die Marke an, sie wurde von Milwaukee hergestellt. Lassen Sie uns ein Produktbild einrichten. Gehen wir zu unserem System und holen das Produktbild des Premium-Sets. Da haben wir's. Lass es uns veröffentlichen. Sobald du das speicherst, wird es diesen Permalink haben Wir werden später über Primer-Links sprechen , da dies für SEO sehr wichtig ist Aber das wird die URL sein, die die Leute hier oben in der Adressleiste sehen und veröffentlichen werden . Lassen Sie uns die Änderungen überprüfen. Und hier sind wir. Und die Leute können darauf klicken, um es in seiner vollen Pracht zu sehen. Und wie Sie sehen können, Kategorie Werkzeuge, Schlagschrauber, Marke Milwaukee Und wenn wir hier runter gehen, wird automatisch jedes Produkt in dieser Kategorie hier aufgeführt, aber wir haben ein Limit von nur vier verwandten Wenn wir drei weitere Produkte auf den Tools hätten, wären sie einfach so hier. Lass es mich dir hier zeigen. Hier haben wir zwei verwandte Produkte auf der Referenzwebsite. Wie Sie sehen, ist dies ein sehr robustes System, um Ihre Produkte zu verkaufen und es den Leuten zu ermöglichen, sehr schnell zu finden , wonach sie suchen, ein wunderschöner Online-Shop. Ich denke, das ist der Punkt, an den wir uns vorerst wenden werden, denn als Nächstes möchte ich uns ansehen, wie Sie Ihren WooCommerce-Shop mit Papier verbinden können, damit Sie Zahlungen akzeptieren können Wir sagten, bis wir diesen Kurs abgeschlossen haben, müssen Sie in der Lage sein, Ihre Produkte im wirklichen Leben zu verkaufen Dies ist keine Demo-Website. Dies ist ein echter E-Commerce-Shop. Wir sehen uns in Kürze. 37. WooCommerce PayPal-Integration: Ich heiße Sie herzlich willkommen zurück. Jetzt ist es an der Zeit, unserer WordPress-Website ein Zahlungssystem hinzuzufügen . Mit anderen Worten, es ist an der Zeit, Papier in Woo Comers zu integrieren Aber bevor wir dorthin gehen, werden Sie hier auf meiner Referenz-Website feststellen, lassen Sie mich einfach hier wechseln. Wenn ich gehe, lass mich in den Laden gehen und diesen Spielzeugtraktor hier aufmachen. In Ordnung, ich dachte, das hätte mich wieder hierher zurückkehren lassen. Nicht das. Gehen wir zu diesem Original. Ordnung, ich wollte Ihnen zeigen, wie Sie das loswerden können, nur für den Fall dass Sie ein digitales Produkt verkaufen Sie können das loswerden , weil Sie nicht zwei Kopien eines digitalen Produkts verkaufen können zwei Kopien eines digitalen Produkts Das ergibt also keinen Sinn. Also lass mich wieder hierher wechseln. Wir haben hier dasselbe. Damit wir auf das Produkt selbst zurückkommen können. Hier haben wir das Premium-Mietpaket bearbeitet, und wir können sagen, dass es einzeln verkauft wird. Mit anderen Worten, beschränken Sie Ihre Einkäufe auf einen Artikel pro Bestellung. Aktualisieren Sie das, sehen Sie sich die Änderungen in der Vorschau an. Und jetzt haben Sie nur noch Anzeige zu Karte, sonst nichts. Denn wenn es sich um ein digitales Produkt handelt, vielleicht um ein herunterladbares Produkt, können Sie es entfernen. Aber es geht nicht darum, digitale Produkte zu verkaufen. So richtet man im Allgemeinen einen Wocomers-Shop ein. Also noch eine Sache, meine Referenz-Website hat diese abgerundeten Ecken, die das Bild fantastisch aussehen lassen, die Produkte hier und sogar im Shop, die Produkte haben diese abgerundeten Ecken die es fantastisch aussehen lassen Aber auf der Website, die wir gerade haben, sind sie sehr scharf. Ich werde dir zeigen, wie du das ändern kannst. Woo-Commers in Paper zu integrieren, müssen wir nun Um Woo-Commers in Paper zu integrieren, müssen wir nun ein von WooCommers erstelltes Plugin zur Integration mit Paper hinzufügen WooCommers erstelltes Plugin zur Integration Neues hinzufügen. Plug-ins fügen neue hinzu. Ich werde WooCommers noch einmal eingeben, Enter. Und hier sind die Plug-in-Zahlungen von WokersPayPal . Installiere das jetzt Und lass es uns aktivieren. Also hier sind es, WokmersPapal-Einstellungen. Lass uns zu den Einstellungen gehen. Und jetzt haben wir hier diese Option, um die Paypal-Zahlung zu aktivieren. Also klicke darauf. Wir verkaufen physische Waren. Wenn Sie virtuelle Güter verkaufen, überprüfen Sie dies. Physische Güter, fahren Sie fort. Mit zusätzlicher Anwendung erhältlich. Ja, lass uns hierher gehen. Wählen Sie diese Option aus, da wir damit Debit- und Kreditkarten auf unserer Website akzeptieren können. Stellen Sie dann eine Verbindung zu Papal her. Dadurch wird ein Fenster geöffnet , in dem Sie sich in Ihr PayPal-Konto einloggen können Wie Sie sehen können, habe ich hier einen Payal-Tab, der bereits geöffnet war, aber lassen Sie mich einfach anmelden Geben Sie Ihre E-Mail-Adresse ein und sagen Sie Weiter. Dann logge dich ein. Ich möchte aus Sicherheitsgründen meinen Sicherheitscode eingeben. Ich verwende eine Authenticator-App. Bleib sicher. Mal sehen, ob es eine Verbindung herstellen wird. Wenn dein Paypal in Ordnung ist, bist du bereit. Sie sind mit Woocmers verknüpft und bereit, Zahlungen auf Ihrer Website entgegenzunehmen Kehren Sie zu WooCommers zurück. Also jetzt herzlichen Glückwunsch. Jetzt ist Ihr WooComers mit Ihrem Paypal-Konto verbunden , und jedes Mal, wenn jemand etwas in Ihrem Shop kauft, wird das Geld direkt auf Ihr Paypal-Konto überwiesen Gehen wir also zu den Zahlungsmethoden. Und schau es dir einfach an. Sie können dies also auch aktivieren, wenn Sie Kredit- und Debitkarten akzeptieren möchten. Aber bevor wir das tun, gehen wir zurück und laden diese Seite neu und schauen, ob wir jetzt hier sind, mit PayPal bezahlen Und wenn jemand klickt, öffnet sich das In Ordnung, etwas ist schief gelaufen. Ich denke, das liegt daran, dass es versucht, sich in mein eigenes Payal-Konto einzuloggen, was nicht möglich ist Aber wenn wir wieder hier reingehen, können wir Kredit - und Debitkartenzahlungen aktivieren und Abschluss speichern. Gehen wir wieder rein, wenn ich die Seite aktualisiere, wenn wir sagen, Zur Karte hinzufügen, Okay, es wurde der Karte bereits hinzugefügt, als wir auf Mit Papier bezahlen geklickt haben Also kein Problem, denn die Zahlung kann nicht abgeschlossen werden, ohne das Produkt zuerst zur Karte hinzuzufügen Wenn wir uns jetzt die Karte ansehen, wie Sie sehen können, ist unser Produkt hier aufgeführt, und wir haben die Möglichkeit, mit dem Auschecken fortzufahren. Wenn jemand mehr von diesem Produkt kaufen möchte, haben wir begrenzt, wie viele dieser Personen es kaufen können. Gehen wir zurück zu Lass uns einfach zurückgehen. Da wir noch keine Shop-Seite eingerichtet haben, müssen wir manuell nach verschiedenen Produkten suchen. Ich möchte das der Karte hinzufügen. Und genau das sollte passieren , wenn Sie Ihrer Karte noch kein Produkt hinzugefügt haben. Es wurde zu Ihrer Karte hinzugefügt. Wenn wir nun zu Karte anzeigen gehen, können Sie, wie Sie sehen, zwei hinzufügen, da es hier keine Obergrenze gibt, wie viele Karten Sie kaufen können da es hier keine Obergrenze gibt, wie viele Karten Sie kaufen können. Diese Summe wird mit zwei multipliziert, wenn wir die Karte auf 11.000 aktualisieren Da haben wir's. Und wenn wir jetzt zur Kasse gehen, sollte der Kunde diese Daten eingeben. Die roten Angaben sind verpflichtend, einschließlich ihres Versandorts. Und wir haben ihnen auch diese Optionen zur Verfügung gestellt. Sie können Debit- oder Kreditkarten verwenden. Wenn sie dies auswählen, ändert sich die Schaltfläche in diese. Und wenn sie versuchen zu zahlen, erhalten sie zunächst die Benachrichtigung, dass sie diese Daten eingeben müssen. Ich denke also, wir haben fast alles abgedeckt , was ich von uns erwarten wollte. Nun, wenn wir hierher gehen, als wir das ausgewählt haben, wurde diese Schaltfläche angezeigt. Aber wenn wir hierher kommen, können wir eine Beschreibung für das hinzufügen , was wir wollen, wenn die Leute dieses Feld auswählen. Also lass uns sehen. Sie können auch Ihre Debit- oder Kreditkarten verwenden. Klicken Sie auf die Schaltfläche unten. Speichern Sie die Änderungen. Speichern Sie das. Und jetzt, wenn wir hierher gehen und die Seite aktualisieren, schauen wir mal, was wir bekommen. Hier sind wir. Sie können auch Ihre Debit- oder Kreditkarte verwenden. Klicken Sie auf die Schaltfläche unten. Genau. Ich denke , so richten Sie Ihre Zahlungen im Grunde ein. Natürlich gibt es hier noch viele weitere Optionen , was Sie tun müssen. Lass uns sehen. WooComers-Einstellungen. Lass uns zu den Einstellungen gehen. Okay, wenn wir unter Allgemein gehen , möchte ich nicht, dass wir uns zu sehr mit diesem Teil befassen weil es hier so viele Einstellungen gibt , dass diese Lektion zu lang werden würde Aber solange du deine Wcmer mit Papier verbunden hast ausstellst und du Produkte zu deinem Einkaufswagen hinzufügen kannst und die Leute in den Einkaufswagen gehen und bezahlen können , ist das alles, was du brauchst, um Anschließend können Sie sich weitere Tutorials ansehen , in denen Sie erfahren , was all diese Einstellungen bewirken Aber schauen wir mal, ob wir etwas anderes zum Ändern finden können , wie zum Beispiel die Währung. Denken Sie daran, wir wollten die Währung ändern, ich sage USD. 38. WooCommerce-Einstellungen: Ordnung, Sie können festlegen, wo die Kommas und Punkte gesetzt werden Sie können Ihre Coupon-Rabatte festlegen. Sie können Steuersätze und Berechnungen aktivieren. Sie können Standorte aktivieren, an denen Sie verkaufen oder an die Sie nicht versenden werden. Sie können all diese Dinge einstellen , die meiner Meinung nach ziemlich offensichtlich sind. Lassen Sie mich die Änderungen speichern. Wir eilen einfach durch. Wir sind gerade dabei. Gehen wir zu den Produkten. Ich denke, hier haben wir noch ein paar wichtige Dinge zu besprechen. Wir haben ein paar Dinge, die wir uns hier ansehen können. Nach erfolgreichem Hinzufügen zur Kartenseite weiterleiten. Das heißt, jedes Mal, wenn jemand klickt, gehen wir zurück zu Ich weiß, dass die Shop-Seite den Schrägstrich SHOP haben sollte Wenn ich das eingebe. Ja, wir werden sehen, wie wir diesen Laden zur Speisekarte hinzufügen können. Aber wenn ich ein Produkt zur Karte hinzufüge, denken Sie daran, dass es bereits zur Karte hinzugefügt wurde, sodass ich es nicht hinzufügen kann. Ich erhalte eine Fehlermeldung. So wie das. Aber wenn Sie der Karte ein Produkt hinzufügen, möchten Sie der Karte vielleicht weitere Produkte hinzufügen. Sie möchten nicht zur Warenkorbseite weitergeleitet werden , sobald Sie der Karte nur ein Produkt zur Kartenseite hinzufügen . Also aktiviere das nicht. Äh, lass uns sehen. Was sonst? Sie können Ihre Gewichtseinheiten festlegen und Produktbewertungen aktivieren? Ja. Bewertungen können nur von verifizierten Besitzern hinterlassen werden. Ich möchte, dass nur Personen, die mein Produkt gekauft und verwendet haben , Bewertungen hinterlassen. Und zeige bei jeder Bewertung, die ein Kunde abgibt, das Etikett „Verifizierter Besitzer “ an und zeige, dass es sich um einen verifizierten Besitzer handelt, also um jemanden, der das Produkt gekauft hat. Aktivieren Sie die Sternebewertung. Sternebewertungen sollten erforderlich und nicht optional sein. Bevor jemand eine Bewertung abgeben kann, muss er eine Sternebewertung abgeben. Ich denke, das sind sehr gute wichtige Einstellungen. Hier, als wir WooComers installiert haben, wurde automatisch eine Seite namens Shop Shop erstellt Und so wusste ich, dass es läuft. Die Shop-Seite heißt Shop. Stellen Sie also sicher, dass das hier ausgewählt ist. Gehen wir zu Wenn Sie herunterladbare Produkte verkaufen, sollten Sie sich an diese Stelle wenden. Inventar. Lass uns das sehen. Eine weitere Sache, die wir hier beachten sollten, ist, wir zu den allgemeinen Schaltflächen „Ajax hinzufügen“ in Archiven zurückkehren Schaltflächen „Ajax hinzufügen“ in Archiven Wenn wir „Ajax aktivieren“ sagen, „ Ajax zur Karte hinzufügen“, meinen wir, dass beim Hinzufügen zur Karte nicht die gesamte Seite aktualisiert Einfach zur Karte hinzufügen und die Person weiter einkaufen lassen. Wenn ich also auf „In den Einkaufswagen“ klicke, bekommen wir nur ein kleines Messenger-Häkchen : „Zum Einkaufswagen hinzufügen“. Es wurde hinzugefügt. Das meinen wir mit der Aktivierung der Ajax-Schaltflächen zum Hinzufügen zum Einkaufswagen. Wenn ich das deaktiviere, speichere die Änderungen und gehe zurück zum Shop Gehen wir zur Warenkorbseite , zu der ich den Link hier nicht hinzugefügt habe. Gehen wir zum Einkaufswagen. Lass mich das jetzt aus dem Einkaufswagen nehmen. Und jetzt gehen wir zurück zur Shop-Seite. Ich glaube, es war der Schraubenschlüssel. Wenn wir etwas in den Warenkorb legen, wird die gesamte Shop-Seite neu geladen Das haben wir also vermieden. Also, da haben wir's. Spar dir das. Versandzahlungen, wir waren interne Zahlungen. Was ist in Advanced enthalten? Sie können festlegen, welche E-Mails Kunden automatisch erhalten, wenn sie ein Produkt kaufen. Sie können sie bearbeiten. Aber wie ich bereits erwähnt habe, möchten wir diese Lektion nicht zu lang machen. Jetzt haben Sie eine solide Grundlage Erstellung eines WooComers-Produkts und das Hinzufügen aller Taxonomien und Beschreibungen, die sich auf Produkte beziehen, sowie Produkte beziehen Integration von Eine letzte Sache, die wir uns ansehen sollten, ist Inside Wie ich bereits erwähnt habe, können Sie, wenn Sie sich ein Produkt ansehen, zum Beispiel diese Reihe, auch wenn Sie sich ein Produkt ansehen, zum Beispiel diese Reihe, diese Reihe Das sind Produkte, die dieselbe Taxonomie haben. Sie können bestimmte Produkte aber auch selbst empfehlen. Das machst du manuell, wenn du ein Produkt bearbeitest, also könntest du hierher kommen und verlinkte Produkte sagen und nach einem Produkt suchen. Sagen wir, welche Produkte haben wir hier? Jetzt verwende ich die Produkte, die wir entwickelt haben , weil es ein Beispiel ist, Impact, und fange an, Schlagbohrmaschine einzugeben. Vielleicht möchten Sie also Upselling betreiben. Vielleicht handelt es sich also um einen teureren GPU-Typ, sodass Sie ihn weiterverkaufen können, wenn sich jemand die Produktseite dieser günstigeren Also aktualisiere das. Und wenn wir nun Vorschau der Änderungen ansehen und nach unten scrollen, davon aus, dass es sich hier um einen teureren Typ desselben Produkts handelt , weil Sie Upselling betreiben. Ich hoffe, Sie verstehen diese Damit möchte ich Ihnen gratulieren. Sie haben jetzt ein Geschäft, das Zahlungen akzeptieren kann. Sie können jetzt mit dem Verkauf Ihrer Produkte beginnen. In der nächsten Lektion sehen wir uns an, wie Sie auf der Shop-Seite arbeiten. Ja, lass uns über die Shop-Seite sprechen. Ja, wir sehen uns in Kürze. 39. Shop-Seite: Ich möchte, dass wir über die Shop-Seite sprechen. Wenn ich also zum Shop wechseln kann, sind wir hier. Eine Sache, die Ihnen auffallen wird, ist, wenn ich nach unten scrolle, wir haben diesen Fuß genau hier. Also können wir damit beginnen , ihn zu entfernen. Aber bevor wir das tun, lassen Sie uns all diese anderen Dinge schließen . Ich möchte auch PayPal schließen. Gehen wir also zurück zum Dashboard. Lass mich das auch schließen. Gehen wir zurück zum Dashboard und gehen wir zu den Seiten. Und wie ich bereits erwähnt habe, bei der Installation von Woo Comers automatisch einige Seiten generiert, automatisch einige Seiten generiert die für uns relevant sind, wie die Kartenseite, die Checkout-Seite, meine Kontoseite, die Shop-Seite Gehen wir also zur Shop-Seite und bearbeiten sie. Wenn wir nun hier zu den Astro-Einstellungen gehen, Elemente deaktivieren, deaktivieren wir sie und sagen Speichern Wenn wir uns die Seite jetzt ansehen, hätten wir sie uns ansehen sollen. Da haben wir's. Die Astra-Fußzeile ist weg, weil wir unsere eigene Fußzeile haben. Jetzt habe ich das Gefühl, dass ich hier noch ein paar Produkte hinzufügen sollte , weil ich möchte, dass diese Seite etwas länger wird Also werde ich diesen Teil vielleicht schneller vorspulen , wenn ich ein paar weitere Produkte erstelle Ich schlage vor, dass Sie dasselbe tun, dann bin ich in Kürze wieder da. Also leite ich diesen Teil schnell weiter. Also, ich habe gerade die Erstellung dieser zusätzlichen Produkte abgeschlossen, also lassen Sie mich sie jetzt einfach schließen. Und wenn ich jetzt die Shop-Seite aktualisiere, haben wir jetzt mehrere Produkte. Jetzt können wir zum Anpassen übergehen. Und jetzt kommen wir zu den Front-End-Astra-Einstellungen. Wie bereits erwähnt, gelangen Sie zu den Astro-Einstellungen, wenn Sie auf Anpassen klicken Astro-Einstellungen, wenn Sie auf Und Astro ist intelligent genug, um automatisch zu den Einstellungen der jeweiligen Seite zu wechseln , die Sie gerade ansehen Da Sie sich gerade auf der Shop-Seite befinden, zu der Stelle weitergeleitet, an der wir das Shop-Layout bearbeiten können Wir können also zu diesem Design wechseln. Und jetzt sieht es etwas anders aus. Es ist kein so großer Unterschied. Ordnung. Sie können auch einschränken, wie viele Produkte Sie pro Seite haben möchten. Jetzt haben wir also acht. Wenn wir 13 Produkte hätten, würden wir automatisch das bekommen, was wir Paginierung nennen Lassen Sie mich es Ihnen auf dieser Originalseite hier zeigen. Wenn wir zur Shop-Seite wechseln, weil ich mehr als 12 Produkte auf meiner Seite habe, können wir zu Seite zwei übergehen. Und sehen Sie sich dort mehr Produkte an. So viele Seiten wie Wo Camers benötigt, um Ihre Produkte zu zeigen. So können Sie einschränken, wie viele Produkte Sie pro Seite zeigen. Was müssen wir uns noch ansehen? Produkte anzeigen, Kategorien anzeigen, anzeigen Dies sind Einstellungen, mit denen Sie später herumspielen können. Solange Sie einen Shop haben , der Ihre Produkte ausstellt, ist das alles, was Sie vorerst benötigen. Was ist sonst noch das Seitenleisten-Layout? Nein, unsere Seite hat keine Seitenleiste, daher ist das für uns nicht relevant Titelbereich der Produkte. Ich weiß nicht, was das ist, und ich denke, das ist eine Aufgabe, an der Sie selbst arbeiten können. Lass es uns einfach einschalten , um zu sehen, was es bringt. Ich denke, es fügt das hinzu. Ich sehe nicht welche anderen Änderungen es hinzufügt. Ich mag es so. Jetzt werden Sie feststellen, dass wir hier auch die Farben ändern können. Lassen Sie mich also zunächst auf Veröffentlichen klicken, um alle von uns vorgenommenen Änderungen zu speichern , und dann zurückgehen. Wir können auch auf die einzelne Produktseite gehen, um sie zu bearbeiten , wenn wir dorthin wechseln und vielleicht dieses Produkt öffnen. Und Sie werden einige dieser Einstellungen hier bemerken. Dieses Container-Layout und das Seitenleisten-Layout im Container-Stil sind dieselben Einstellungen, die wir hier festgelegt haben Gehen wir also zu den Produkten über, öffnen wir dieses Spielzeugtaxi Dieselben Einstellungen sind hier unten, Container-Layout, aber ich berühre das nicht, weil ich liebe wie die Seite aussieht, ohne sie zu berühren. Schauen wir uns also hier an, was ich auf meinen Produkten habe. Ich habe mir etwas Zeit genommen, um wirklich herauszufinden , wie es aussehen sollte. Das haben wir also. Das ist benutzerdefiniertes CSS. Ich werde dir zeigen, wie das geht, aber in einer späteren Lektion. Wenn wir also zu unserer Shop-Seite zurückkehren, können wir dorthin zurückkehren, ohne den Editor zu verlassen? Nein, also personalisieren. Ich denke, wir haben auf der Shop-Seite alles behandelt, was ich von uns erwarten sollte. Bis auf eine Sache. Ich erinnere mich an die Farben. Gehen wir also zurück zu den globalen Farben. Hier können Sie die allgemeinen Farben Ihrer Seiten ändern , also der Seiten, die Sie nicht mit Element bearbeitet haben. Dies ist keine elementare Seite. Schauen wir uns zum Beispiel an, welcher Akzent sich ändert, welche Links es gibt . Das ändert sich nicht. Was ist mit dem Akzent? In Ordnung, also los geht's. Nun wollen wir diese Farbe verwenden. Also wähle ich den Farbwähler, wähle Farbe und schnappe mir dort ein Pixel, kopiere Lass es uns dort einfügen. Jetzt wird es die Farbe unserer Website haben. Lass uns die Links ändern. Lass uns das Weiß geben. Okay, das ist so einschränkend. Aus diesem Grund benötigen wir benutzerdefiniertes CSS, denn wie Sie sehen können, kann ich diese Schaltflächen jetzt nirgends mehr sehen, um die Farbe dieses Schaltflächentextes zu ändern Warte. Willst du mir sagen, dass ich die Farben der Knöpfe nicht ändern kann? Gehen wir zurück. In Ordnung, hier sind wir also die Knöpfe Können wir die Farbe des Textes ändern? Ja. Wir wollen, dass es so weiß ist. In Ordnung, wir können die Hintergrundfarbe einstellen. Können wir die Hintergrundfarbe von hier aus ändern? Oh, stimmt. Also diese anderen waren die allgemeinen Farben, aber jetzt sind wir sehr genau , welches Element wir setzen werden. An der anderen Stelle haben wir die allgemeine Themenfarbe festgelegt . Aber hier sind wir sehr spezifisch, was das Element angeht, den Button. Randfarbe, wir müssen nicht mit der Rahmenfarbe herumspielen. Aber jetzt möchte ich, dass wir dieselbe Farbe verwenden, die ich hier ausgewählt habe , nur um die Markenkonsistenz aufrechtzuerhalten. Hintergrundfarbe. Fügen Sie es dort ein. Auf Hova kannst du ihm diese blaue Farbe geben. Also wähle Farbe. Blaues Pixel. Also sollte die Hintergrundfarbe auf Hover so blau sein, so. Einheitlichkeit der Marke In Ordnung, lass mich das schließen. Und jetzt denke ich, dass wir mit der Shop-Seite fertig sind. Eine Sache noch, bevor wir gehen. Fügen wir es auch der Kopfzeile hinzu. Das vergessen wir immer wieder Also, wenn ich zu diesem Ort gehe, fahre Maus drüber und tippe Tatsächlich müssen wir nicht einmal dorthin gehen. Also lass mich einfach damit aufhören und zurückgehen. Aber gehen wir hier zu den Erscheinungsmenüs, weil wir es als Menüelement hinzufügen müssen. Einkaufen, zum Menü hinzufügen. Und jetzt ziehen wir es gleich nach etwa oder ich lasse meine Info-Seiten normalerweise am Fuß stehen, nicht die Überschriften Aber wie dem auch sei, lassen wir es einfach dabei. Manche Leute ziehen es vor, an der Spitze zu bleiben. Wenn wir also hierher zurückkehren und den Link mit der rechten Maustaste neu laden, haben wir jetzt die Shop-Seite, und weil es die aktive Seite ist, hat sie diese Farbe Und tatsächlich finde ich, dass diese Farben mit einer Markenfarbe übereinstimmen sollten mit einer Markenfarbe übereinstimmen sollten Nun, das ist eine sehr einfache Website. Sie haben alle Zeit der Welt , um es genau so aussehen zu lassen, wie Sie es möchten. Menüpunkt. Gehen wir zur Textfarbe des Artikels. Wählen Sie eine Farbe aus. Ich will dieses Blau. Kopiere das, füge es dort ein, veröffentliche es. Sehen Sie sich eine Vorschau der Änderungen an. Jetzt sieht es so aus. Gehen wir zur Shop-Seite. Und etwas, das ich vergessen habe , ist, die Homepage zu entfernen. Entfernen und speichern. Komm her, lade die Seite neu Und inzwischen ist es ziemlich offensichtlich, wenn du auf die Homepage gehen willst, du klickst einfach auf das Logo Wenn wir also auf das Logo klicken, werden wir auf die Homepage weitergeleitet. Nachdem wir unsere Produkte erstellt haben, denken Sie daran, dass ich in einer früheren Lektion erwähnt habe , dass wir vorgestellte Produkte zu unserer Startseite hinzufügen würden vorgestellte Produkte zu unserer Startseite , damit die Leute das vorgestellte Produkt schnell sehen können. Wie machen wir das also? Sehen wir uns das in der nächsten Lektion an. Sehen Sie sich kurz an. 40. Startseite Empfohlene Produkte: Wie bereits in einer früheren Lektion erwähnt, möchten wir sehen, wie Sie diesen Abschnitt mit den empfohlenen Produkten zu unserer Landingpage hinzufügen können. also hier zu unserem Editor wechseln, sollen wir ihn direkt unter diesem Pfeil hinzufügen. Also werde ich mit Elementor bearbeiten, damit wir die Seite bearbeiten können. Und los geht's Also ich möchte das nur duplizieren also haben wir jetzt einen zusätzlichen Container direkt darunter. Lösche das. Und lassen Sie uns einen Behälter für die vorgestellten Produkte hinzufügen. Wie üblich machen wir das zu 100% rein und machen wir den inneren Behälter 80% des Platzes. Dann gehen wir zurück zum äußeren und legen ihn in die Mitte. Wenn Sie nun ein Raster mit Produkten von Wu Comers anzeigen möchten, wenn wir hier auf Plus klicken und sagen, Wu, werden Sie feststellen, dass es sich nicht um kostenlose Elemente handelt Wir können sie nicht einfach hierher ziehen und platzieren . Aber das ist kein Problem. Wenn wir zu einer Seite wechseln, die ich im Voraus geöffnet habe, stellt uns Woo Camers Kurzcodes zur Verfügung, mit unsere Produkte auf unterschiedliche Weise anzeigen und den Warenkorb, die Checkout-Seite und all diese Dinge Denken Sie daran, als wir die Kontaktseite anzeigen wollten Wenn ich hier zur Kontaktseite wechsle, haben wir den Shortcode verwendet, den uns forminator zur Verfügung gestellt hat, um das von uns erstellte Formular im Backend anzuzeigen das von uns erstellte Formular im Backend Ich kann hier dasselbe mit Produkten von Woo Comers machen. Also hier, sagen wir Produktkategorie. Ich suche nach ausgewählten Produkten. Ich kann keine vorgestellten Produkte sehen. Sagen wir einfach Produkte. zurück gehe, wähle ich das aus und sage Shortcode, damit wir ein Shortcode-Element hinzufügen und es dort ablegen können. Dann füge ich das dort ein. Und hier sind wir. Jetzt haben wir zu viele Produkte angezeigt. Also kann ich hier einen Raum erstellen und sagen, Limit ist, sagen wir, vier Und jetzt wird nur noch ein Limit von vier Produkten angezeigt . Veröffentlichen Sie das. Das Problem mit diesem Element ist , dass es uns keine Möglichkeit bietet, diese Elemente zu bearbeiten, es sei denn, ich habe hier etwas übersehen. Es bietet keine Möglichkeit , diese Produkte zu bearbeiten. Mal sehen, was ich auf meiner Referenzwebsite habe. So sieht das auf meiner Referenzwebsite aus, aber so sieht das auf unserer Website aus. Lassen Sie mich zunächst den Container hier auswählen und etwas Platz schaffen, unterer Rand von 100 veröffentlichen und jetzt, wenn wir eine Vorschau der Änderungen anzeigen, nach unten scrollen, los geht's In Ordnung. Also jetzt wollte ich nicht dass die Knöpfe so breit aussehen Und ja, das war es, was ich wollte. Aber ich denke, wir können das schaffen. Ich glaube, ich habe 60% auf der anderen Website verwendet. Um sicherzugehen, dass es hier nicht zu viel Platz einnimmt. Ja, so etwas, etwas Kompakteres. Und mir gefällt dieser Hover-Effekt hier nicht, also müssen wir ihn hier ändern Gehen wir zu den globalen Schaltflächen. Die Textfarbe auf Hover sollte ebenfalls weiß sein. Das heißt, wenn ich den Mauszeiger bewege, bleibt es weiß. Veröffentlichen Sie diese Änderungen Und lass uns diesen Ort verlassen. Und jetzt, da haben wir's. Lassen Sie uns hier etwas Platz schaffen. Mir gefällt der obere Rand nicht. Also die obere Marge von, sagen wir, 100 werden veröffentlicht. Und jetzt sehen wir uns eine Vorschau der Änderungen an. Da haben wir's. Oh, wir müssen da eine Überschrift hinzufügen. Also, wenn ich das dupliziere, ziehe es dorthin. Komm her und dupliziere das, zieh es dorthin. Und ja, lass uns das löschen. Und ich möchte es stylen und in die Mitte stellen. Nimm dieses Zentrum und wähle seinen Inhalt aus. Lassen Sie mich die vorgestellten Produkte sagen . Ich denke, es gibt einen Kurzcode für vorgestellte Produkte. Ich weiß nicht, warum Kurzcodes für Produktkategorien verwendet werden. Ich weiß nicht, warum ich dafür keinen einzigen Kurzcode finden kann. Mal sehen, ob es ihn tatsächlich gibt. Lassen Sie mich einfach hervorgehobener Unterstrich sagen. Ausgewählte Underscore-Produkte. Nein, WooComers bietet das nicht, aber du kannst eine Kategorie namens Ausgewählte Produkte erstellen Und zeige diese Kategorie. Also Produktkategorie. In Ordnung. Endlich habe ich es geknackt. Ich werde endlich in der Lage sein, die Produktkategorie zu erstellen, die ich will Sie verwenden also den Produktunterstrich Kategorie, geben dann die Kategorienummer an und geben dann an, wie viele Produkte Sie anzeigen möchten Wenn Sie also wieder rein gehen, müssen Sie nur zu Kategorien gehen und eine bestimmte Kategorie öffnen Im Moment habe ich zum Beispiel Tools geöffnet, also Tools, sagen wir, bearbeiten, und wenn Sie das gesagt haben, schauen Sie sich Ihre Adressleiste an und schauen die Kategorie- und Tag-ID an, die für mich nur für die Kategorie Tools 18 ist. Gehen wir also wieder rein, also Kategorie 18 und beschränke sie dann auf vier. Aber denken Sie daran, dass wir nur zwei Tools haben, die wir erstellt haben. Ich glaube nicht, dass ich die anderen Produkte dem anderen Bohrer in der Kategorie Werkzeuge zugeordnet habe. Ich habe nicht einmal eine weitere Bohrmaschine. Wir haben also nur zwei Bohrmaschinen. Aber wenn ich das zum Beispiel schnell bearbeite und die Kategorie auf Tools ändere Tools ebenfalls und aktualisiere das. Dann ändere auch diese futuristische E-Bike-Kategorie in Werkzeuge, aktualisiere das Jetzt haben wir vier Produkte in der Kategorie Werkzeuge. Wenn ich hier wieder reingehe und dies anwende , um alle Änderungen zu übernehmen, die wir im Backend vorgenommen haben, müssten wir jetzt vier Produkte in dieser Kategorie haben. Selbst wenn wir zehn hätten, weil wir bereits festgelegt haben, dass wir ein Limit von vier wollen, werden wir hier nur vier sehen. Veröffentlichen. Jetzt gab es einige intensive Problemlösungen zumindest habe ich gelernt, wie meine eigenen Kurzcodes für Produktkategorien erstellen kann. Ich freue mich sehr, dass ich diese Herausforderung hatte, und Sie haben auch gesehen, wie ich Probleme in Echtzeit behoben habe. Also jetzt, los geht's. Ich liebe das, Mann. Ich fühle das. Diese Produkte sind zu teuer, aber kein Problem. Legen Sie die richtigen Preise fest. Als Nächstes möchte ich Ihnen noch einen kurzen Tipp geben Gehen Sie in den Laden und öffnen Sie Nein, lassen Sie uns kein Produkt öffnen. Okay, öffnen wir es einfach und fügen es der Karte hinzu. Ich glaube, wir hatten es bereits hinzugefügt. Da haben wir's. Gehen wir also zur Karte. Also wollte ich dir natürlich zeigen, dass du diese Seite natürlich auch bearbeiten kannst , indem du zum Customizer gehst, du wirst automatisch zum Customizer weitergeleitet Ordnung, Sie können also den Text der Kartenschaltfläche ändern, sagen, zum Warenkorb hinzufügen oder so, dann Cross-Sales aktivieren Da habe ich nicht mitgespielt. Sie können auch gehen, wenn wir zur Kasse gehen Jetzt können Sie auch einige Felder entfernen, die Sie hier nicht benötigen, also gehen Sie zur Kasse. Der Firmenname ist optional. Adresszeile zwei kann ausgeblendet werden. Die zweite Adresszeile muss nicht angezeigt werden. Sie können den Firmennamen auch ausblenden. Wenn Sie nicht sehen möchten, ob Sie nicht möchten, dass der Kunde den Firmennamen anzeigt, ist möglicherweise das Feld Telefon erforderlich. Es kann optional oder versteckt sein. Markieren Sie die erforderlichen Felder mit einem Sternchen. Da hast du's. Sie können auf Ihre Seite mit den Datenschutzrichtlinien verlinken. Ich wähle das aus. Sie können auf Ihre Nutzungsbedingungen verlinken. diese Weise können die Kunden Ihre Allgemeinen Geschäftsbedingungen hier lesen und akzeptieren , bevor sie bei Ihrem Unternehmen einkaufen. So nah dran. Und da haben wir's. Also ich denke, das ist genug. Vorerst haben wir zumindest unsere Homepage mit der gewünschten Kategorie aktualisiert. Denken Sie jetzt daran: Wenn Sie eine andere Kategorie mit dem Namen „ Ausgewählte Produkte“ möchten , gehen Sie zu den Kategorien und sagen „Ausgewählte Produkte“. Geben Sie ein. Und jetzt sind wir hier, und Sie müssen diese Kategorie verschiedenen Produkten zuweisen diese Kategorie verschiedenen Produkten denen Sie die vorgestellten Produkte machen möchten. Und wenn wir diese vorgestellten Produkte jetzt bearbeiten, wie Sie sehen können, lautet ihre ID natürlich wenn wir diese vorgestellten Produkte jetzt bearbeiten, Nummer 45. Wenn Sie also hier zum Frontend gehen, wird die Kategorie hier Kategorie 45 sein. Ich hoffe, du verstehst jetzt , wie man mit den Shortcodes herumspielt. Vorerst sehen wir uns also in der nächsten Lektion, wenn wir darüber sprechen werden , diese Suchleiste oben hinzuzufügen, weil wir wollen, dass die Leute nach GPUs oder so etwas suchen können GPUs oder so etwas suchen Wie Sie sehen können, haben wir diese automatische Ajax-Suche Und wenn ich die Eingabetaste drücke, können wir uns Suchergebnisse ansehen , die nur über GPU verfügen Also, wie machen wir das? Sehen wir uns in der nächsten Lektion an, wie das hinzugefügt wird. 41. WooCommerce-Produktsuche: Jetzt wollen wir an dieser Suchleiste arbeiten. Lassen Sie mich zurück zu unserem Editor oder zu unserer Website wechseln und nur eine Vorschau anzeigen und zum Frontend wechseln. Um eine Suchleiste hinzuzufügen, müssen wir ein sehr nettes Plugin namens Ivory Search verwenden. Gehen wir also zu Plug-ins, Neues hinzufügen. Und hier werde ich nach Elfenbein suchen. Und hier sind wir bei der Suche nach Vinod Dalvivory. Also installiere das und lass es uns aktivieren. Lass uns das überspringen. Und hier sind wir, Ivor Research Lass uns zu den Einstellungen gehen. Und standardmäßig haben wir mehrere Suchformulare. Und das, was wir wollen, ist das Ajax-Suchformular für Wocmers. Wie Sie sich bereits vorstellen können, haben wir bereits diesen Kurzcode wir ihn im Frontend anzeigen können Also kopiere ich das Steuerelement C. Lassen Sie mich schließen. Warte, wir sind genau da, wo wir sein wollen. Öffnen Sie also den Header-Editor. Also lass mich das schließen. Natürlich gehst du einfach hier drüber und dann Kopfzeile, also lass mich das trotzdem schließen. Was ist das? Schließ das. Und jetzt sind wir hier. Denken Sie daran, dass wir ursprünglich drei Spalten hatten. Ich meine, wir hatten drei Container, aber ich habe einen gelöscht und erwähnt, dass wir später zurückkommen und ihn hinzufügen würden. Also werde ich das duplizieren. Also, jetzt haben wir drei, und ich werde alles von hier löschen. Dann füge ich einen Kurzcode hinzu. Und dann gib den Shortcode genau dort ein, da du den Shortcode, den wir uns gerade geliehen haben, hier sehen kannst Solange dies noch ausgewählt ist, gehe ich zur erweiterten Breite Geben wir ihm eine benutzerdefinierte Breite von vielleicht 80% und veröffentlichen diese und sehen uns eine Vorschau der Änderungen an. So sieht es im Moment also aus. Und ich mag es übrigens, aber wir haben nicht explizit gesagt, welche Breite sie einnehmen sollen. Machen wir es also vielleicht zu 40%. Das sind 20, wenn ich mich nicht irre, 40 plus 20, 60, also sollten das 40% sein. Lassen Sie uns das veröffentlichen und sehen, was wir hier geändert haben. In Ordnung, kein Unterschied. Mal sehen, ob wir diese 30% veröffentlichen können und schauen, was wir haben. Ordnung. Kontrolliere das Auge, um den Behälter auszuwählen, der sie enthält, diesen Behälter, und wir wollen sicherstellen, dass sie gleichmäßig verteilt sind , einfach so Veröffentlichen Sie den Abstand zwischen den einzelnen Containern. Und jetzt denke ich, dass es richtig positioniert ist. Ich liebe es, wo es ist. Also auf die Homepage gehen, da haben wir es. Also, jetzt können wir nach einem Produkt suchen. Nehmen wir an, wir haben Premium-Schraubenschlüssel. Suchen wir also einfach nach einem Schraubenschlüssel. Es führt automatisch eine Suche durch und zeigt es uns an. Das meinen wir mit Ajax. Denken Sie daran, ich habe Ihnen gesagt, das zu tun, was Sie erwarten, ohne die Seite neu zu laden Es führt also die Suche durch, ohne diese Seite neu zu laden , damit wir sehen können , ob es das ist, wonach wir suchen In Ordnung, lassen Sie mich nach GPU, GPU suchen. Ja, wenn es mehrere Produkte mit dem Namen gibt oder die den Namen haben, nach dem Sie suchen, wird die Suchergebnisseite angezeigt Wenn es jedoch nur ein Produkt gibt, das den Namen hat, nach dem Sie suchen, wird dieses Produkt nur direkt angezeigt. Es wird auf die einzelne Produktseite weitergeleitet. Wenn ich also nach einem Traktor suche, weil wir keinen anderen Traktor auf der Website haben , werden wir einfach zum einzigen Produkt mit dem Namen Tractor weitergeleitet. Da wir jedoch mehr als eine GPU haben, wird uns, wenn ich nach GPU suche, wenn ich nach GPU suche, die Suchergebnisseite angezeigt sodass wir die spezifische GPU auswählen können, die wir auswählen möchten. Im Grunde genommen können Sie auf diese Weise Ihrer WooComers-Website eine robustere und leistungsfähigere Suchfunktion hinzufügen eine robustere und leistungsfähigere Suchfunktion , damit Kunden alles finden können, was sie suchen Lass uns sehen. Mir gefällt diese Suche wirklich Was haben wir noch hinzugefügt? Ein Fahrrad. Ich mag diesen Ajax Ich sehe, das gibt dir alle Beschreibungen, und du kannst im Voraus entscheiden, ob das das ist, was du willst Das ist also eine sehr gute Sache. Da wir nur ein Fahrrad haben, werden wir auf die einzige Seite weitergeleitet, auf der das Fahrrad steht. Und denkt daran, dass wir die Kategorien geändert haben. Also ja, ich denke das ist ein großartiger Ort , um diese Lektion zu beenden. In der nächsten Lektion wollen wir uns nun ansehen, wie Sie mithilfe benutzerdefiniertem CSS rundum die Produktbilder mit abgerundeten Ecken versehen können. Und denken Sie daran, wenn wir zu unserer Referenzwebsite zurückkehren, hat diese Suchleiste einige abgerundete Ecken und das Symbol hier sieht viel besser aus. Ich denke, wir können das verbessern. Manche Leute mögen es mit scharfen Ecken wie diesen, du kannst es dabei belassen. Aber schauen wir uns in der nächsten Lektion an , wie das geht. 42. Thumbnail für einzelne Produkte Abgerundete Ecken: Lassen Sie uns nun sehen, wie Sie mithilfe benutzerdefiniertem CSS das Design der verschiedenen Elemente ändern können , die wir mit den Plugins, mit denen wir sie erstellt haben, nicht bearbeiten Woo Commerce bietet uns keine Möglichkeit, unsere eigenen Produktbilder zu bearbeiten und ihnen abgerundete Ecken zu geben. Die Ivory-Suche gibt uns dazu nicht die Möglichkeit. Oh, warte. Wenn ich zu Design gehe , gibt es uns dann übrigens diese Option? Entwerfen. Wenn ich Suchformular-Customizer sage, wird der Customizer geöffnet, wie Sie sehen können. Dies sind die drei Optionen, die wir haben Das ist der Loader, wie Sie hier gesehen haben , wenn er automatisch nach etwas sucht Wie Sie sehen können, gibt es keinen Ort, an dem Sie einstellen können, wie abgerundet die Ecken sind. Sie können ändern, was hier steht, und nach Produkten suchen. Ja, suche nach Produkten. Und lassen Sie uns hier einen zusätzlichen Punkt hinzufügen, um daraus eine Ellipse zu machen. Und Sie können sich auch dafür entscheiden, dieses Symbol zu entfernen , wenn Sie möchten, was ich sehr cool finde Aber bevor wir das tun, wollte ich Ihnen nur zeigen , wie ich dieses Ziel mit benutzerdefiniertem CSS erreicht habe. Also lass uns das jetzt veröffentlichen. Und jetzt, wenn ich zum Frontend gehe, weiß ich, dass wir schon hier sind, und wenn ich bis zu diesem Punkt zurückgehe, sind wir schon hier. Aber denken Sie daran, dass Sie, um dorthin zu gelangen, einfach auf Anpassen klicken müssen. Und es wird dieselbe Stelle öffnen denn was wir wollen, ist dieses zusätzliche CSS. Hier können wir zusätzliches CSS hinzufügen. Geh zurück und zurück, zusätzliches CSS. Wir können hier CSS hinzufügen, genauso wie wir das Kontaktformular hinzugefügt haben . Wenn ich zur Bearbeitung gehe, haben wir beim Erscheinungsbild zu benutzerdefiniertem CSS gewechselt und benutzerdefiniertes CSS hinzugefügt, CSS gewechselt und benutzerdefiniertes CSS um zu beeinflussen wie das Formular im Frontend aussieht. Also können wir hier dasselbe für alles andere tun. Um dieses Bild auszuwählen, müssen wir nun Strg Shift I verwenden um die Konsole zu öffnen, und ich möchte das Responsive Design verlassen . Und wenn ich diesen Inspektor auswähle, kann ich den Mauszeiger über verschiedene HTML-Elemente bewegen, einschließlich des Bilds Und wenn ich es auswähle, wird es uns die Bildauswahl zur Verfügung stellen Dies ist die Bildauswahl, und wir können testen, welche Auswirkungen unser CSS-Code darauf haben wird , indem wir ihn hier zu seinem CSS hinzufügen Also wenn ich einen Grenzradius von fünf Pixeln sage. Jetzt hat es fünf Pixel. Was ist mit 20? Weil ich das will. So wird es aussehen. Also muss ich nur diesen Selektor kopieren. Rechter Link kopieren. Dies hat keine Auswirkungen auf Ihre Website. Das ist nur zum Testen , während Sie arbeiten. Wenn Sie diese Seite jedoch ohne die Konsole neu laden, werden die Änderungen, die Sie hier vorgenommen haben, nicht wirksam Wenn ich jetzt hier reingehe und diesen Selektor einfüge und unsere Klammern hinzufüge, kann ich den Randradius sagen Lassen Sie mich jetzt einfach diesen Randradius entfernen, den wir zum Testen verwendet haben, damit Sie den tatsächlichen Code sehen können , der wirksam wird, 20 Pixel . Nun, da haben wir's. Beenden Sie mit einem Semiklon und veröffentlichen Sie das. Nun, wenn ich die Konsole schließe und einfach mit der rechten Maustaste auf diesen Link klicken und diesen Link in einem neuen Tab öffnen und diesen öffnen lasse Maustaste auf diesen Link klicken und diesen Link in einem neuen Tab öffnen und diesen öffnen Jetzt sind wir zur Shop-Seite gegangen, aber wenn ich hier ein Produkt öffne, habe ich diese abgerundeten Ecken. Wir haben es für dieses spezielle Fahrradprodukt festgelegt, aber es gilt für jedes Produkt. In Ordnung, als Nächstes möchte ich, dass wir uns die Shop-Seite ansehen Das ist sehr lustig, weil ich in dieser Lektion wollte, dass wir uns ansehen, wie man die Suchleiste mit abgerundeten Ecken versehen kann, aber am Ende haben wir das gemacht, was ich für die nächste Lektion geplant hatte Lassen Sie uns jetzt beides machen. 43. Abgerundete Ecken der Suchleiste: Also zurück zu unserem Editor, Strg Shift I, um die Konsole zu öffnen. Wir können dasselbe tun diesen Inspektor auswählen und die Suchleiste auswählen. Da haben wir es. Hier ist der Selektor Wenn ich dorthin gehe und Randradius sage , tippen Sie auf 20 Pixel Wie Sie sehen können, hat es sich in Echtzeit geändert. Ich kann dasselbe auch für das Symbol tun, den grünen Bereich auswählen. Und jetzt ist das das Symbol, wie Sie sehen können, ich wähle den gesamten Selektor so aus, mit der rechten Maustaste Kopieren, lassen Sie uns ihn dort einfügen, und ich habe vergessen, dasselbe dafür zu tun Aber wie dem auch sei, kein Problem. Grenzradius. Lass mich das kopieren und dort einfügen. Wie Sie sehen können, wird es wirksam, aber wir haben hier nicht dasselbe getan. Also wähle das aus und gehe wieder rein. Hier sind wir. Das ist es. Kopieren. Lass uns das entfernen , weil es uns nicht hilft. Jetzt ist es wieder normal. Aber jetzt, wenn ich hier hingehe und die Klammern einfüge, Randradius von 20, los geht's. Jetzt hat es also diese abgerundete Ecke. Aber jetzt können wir diesem Symbol einen linken Rand, einen Doppelpunkt und einen linken Rand hinzufügen . Wir möchten einen Rand hinzufügen, um ihn ein wenig zur Seite zu schieben. Sagen wir also zehn PE-Zellen. Wie Sie sehen können, haben wir es um zehn Pixel verschoben. Semikolon. Können wir diesen Rand um fünf px nach rechts verschieben ? Alles klar, es hat keine Wirkung, aber kein Problem. Lass uns das schließen und veröffentlichen. Und wenn ich das jetzt schließe, muss ich es nicht schließen, aber wenn ich das jetzt neu lade, also jetzt sieht es so Lassen Sie uns zum Schluss die Shop-Seite machen. 44. Shop-Seiten-Thumbnail Abgerundete Ecken: Gehen Sie also wieder rein und wählen Sie den Shop aus , da wir die Änderungen bereits veröffentlicht haben Jetzt Strg Shift I. Lassen Sie uns jetzt auch den Inspektor und dann dieses Bild auswählen. Wie Sie sehen können, ist dies der Selektor. Mit Recht kopieren Lass es uns dort einfügen. Klammern, geschweifte Klammern. Kopiert das. Platzieren wir das da rein. Jetzt haben sie diese schöne abgerundete Ecke. Veröffentlichen Sie also diese Änderungen. Schließen wir diesen Inspektor. Und jetzt, wenn ich hierher gehe und die Seite aktualisiere, alles klar. Harte Aktualisierung. Ich drücke nur RD, aber jetzt Strg Shift R. Okay, ich weiß nicht, was passiert Lass mich einfach auf die Homepage gehen. Scrollen Sie nach unten. Warum hat das nicht gewirkt? Ich denke, wir brauchen ein Caching-Plugin, aber noch einmal Control Shift R. Gehe zur Shop-Seite. Es könnte sein, dass ich ein Caching-Plug-In installiere, und ich hatte vor, Ihnen in der nächsten Lektion zu zeigen, wie man ein Caching-Plugin verwendet in der nächsten Lektion zu zeigen, wie man ein Caching-Plugin Aber was ist, wenn ich jetzt ein neues Plug-In hinzufüge? In Ordnung. Lass uns wieder reingehen. Strg Shift E. Aktualisiere direkt hier auf dieser Seite, um zu sehen, ob die Änderungen wirksam geworden sind. Wenn sie auf dieser Seite wirksam werden, bedeutet das, dass wir wahrscheinlich ein Caching-Problem haben Mit anderen Worten, der Browser hat bereits gespeichert, dass der Browser eine Kopie jeder Seite speichert , sodass jemand, der zu dieser Seite navigiert, schnell bedient werden kann ohne die Seite vom Server neu laden zu müssen Und so wird uns die Seite mit diesen scharfen Ecken angezeigt, obwohl wir Änderungen an dieser Seite vorgenommen haben Das ist also die Seite , die sich auf dem Server befindet, aber das ist die Seite, die durch Cookies in unserem Browser gespeichert wird. Und das ist der Grund, warum wir das immer wieder sehen, auch wenn wir es aktualisieren. Drücken Sie unsere Control-Shift R auf Hard Refresh. Versuchen wir es jetzt mit einem Caching-Plug-In. Also gehe ich hier zum Light Speed Cache und installiere ihn Und lass es uns aktivieren. In Ordnung, jetzt fahren Sie mit der Maus darüber und löschen Sie alles. In Ordnung, also haben wir alles gelöscht. Also, wenn ich einen Link schreibe und Link im neuen Tab öffne und zur Homepage gehe, schauen wir mal, was wir haben Genau. Jetzt sind die Änderungen wirksam geworden, weil wir den lokalen Cache , der im Browser gespeichert wurde, entfernt haben. Wenn wir also auf die Shop-Seite gehen, hat jetzt alles diese schöne abgerundete Ecke. Ich liebe diese Übung zur Fehlerbehebung, weil Sie bei der Arbeit an Ihren Websites auf viele Probleme und Probleme stoßen werden. Sie müssen in der Lage sein, Fehler zu beheben und herauszufinden, wo das Problem liegt. Deshalb freue ich mich, dass du sehen konntest, wie ich damit zu kämpfen hatte. Und das ist das Ende der Erstellung Ihrer Website. Jetzt haben Sie eine voll funktionsfähige WordPress-Website E-Commerce-Shop und können Ihre Produkte an jeden auf der ganzen Welt verkaufen. Aber natürlich gibt es noch viele weitere Dinge, die Sie immer wieder lernen werden , wenn Sie Ihre Website erstellen und robuster machen. In den nächsten Lektionen, bei denen es sich um Bonuslektionen handelt, werden Sie nun denen es sich um Bonuslektionen handelt, werden einige der wichtigsten Dinge lernen , um Ihre Website viel besser, leistungsfähiger und zuverlässiger zu machen Ihre Website viel besser, . Wir sprechen über Sicherheit. Wir sprechen von Perm Link. Wir sprechen also über eines der Dinge, die ich in den Bonuslektionen behandeln sollte, ist Caching Sie haben gerade etwas über Caching gelernt. in den Bonuslektionen Lassen Sie uns Sie in den Bonuslektionen mit noch mehr Tipps und Tricks ausstatten , um Sie zu einem WordPress-Guru zu machen Wir sehen uns in Kürze. 45. Website-Caching: Schauen wir uns nun weitere Tipps und Tricks an , um Sie zu einem Wordpress-Guru zu machen Aber das sind natürlich nur grundlegende Tipps und Tricks. Sie müssen sich noch eingehender mit Wordpress befassen, um zu verstehen, wie Sie die verschiedenen verfügbaren Plugins verwenden. Denken Sie daran, dass wir mehr als 59.000 kostenlose Plugins im WordPress-Plugin-Verzeichnis von Wordpress Das heißt, ich lerne auch heute noch neue Dinge über Wordpress und du solltest das auch Aber jetzt ist einer der Tipps, wie ich bereits erwähnt habe, das Cachen Und jetzt, wenn wir zum Dashboard zurückkehren, lassen Sie mich all diese anderen Teile schließen Gehen wir also zu Neu hinzufügen. Und ich gebe Cache, Enter ein. Wie Sie sehen können, haben wir mehrere Caching-Plugins. Viele von ihnen sind sehr beliebt. Und wie Sie sehen können, ist Lichtgeschwindigkeit eine davon, und wir haben sie bereits hinzugefügt. Sie können also jeden dieser anderen hinzufügen, wenn Sie möchten. WP Optimize ist auch sehr großartig, aber wir müssen uns für eines entscheiden. Wir müssen nicht zwei davon haben. Und jedes Mal, wenn Sie Änderungen an Ihrer Website vornehmen, kommen Sie einfach und sagen Sie alles löschen Das ist alles, was ich immer mache, wenn ich an meiner Wbress-Website arbeite Ich gehe nicht rein, um all diese anderen Einstellungen zu ändern, aber du kannst auf YouTube nach einem Tutorial suchen, wie all diese anderen Einstellungen optimal nutzen kannst, um deine Website noch weiter zu optimieren Aber wie ich bereits erwähnt habe, verhalten sich die Dinge nicht so, wie sie sich verhalten sollten, wenn Sie Änderungen vornehmen und im Frontend Dinge nicht so, wie sie sich verhalten sollten Sie können alles löschen, und die Änderungen werden höchstwahrscheinlich wirksam, wenn sie durch die lokal gespeicherte Version der Seite verursacht wurden , die sich schlecht benimmt Dadurch werden der gesamte in Ihrem Browser gespeicherte Cache und alle in Ihrem Browser gespeicherten Seiten gelöscht und die Seite mit den neuen Änderungen vom Server neu geladen Das ist Nummer eins. Ich möchte diese Lektion hier beenden, weil ich möchte, dass wir in der nächsten Lektion über Perma-Links sprechen Wir sehen uns in Kürze. 46. Permalinks: Lass uns über Perma-Links sprechen. Ich möchte gehen und vielleicht dieses Produkt öffnen. In Ordnung, da steht also Produkt Schlagbohrmaschine. Aber jetzt gelten Permalinks hauptsächlich für Wordpress-Beiträge. Artikelartikel sind eine Art von Beitrag in Wordpress. Lassen Sie mich also wieder hier reingehen und einen neuen Beitrag erstellen. Vielleicht, sagen wir, ja, neuen Beitrag hinzufügen. Und wie ich bereits erwähnt habe, ist ein Beispiel für einen Beitrag ein Artikel, ein Nachrichtenartikel oder ein Blogbeitrag Also wie kauft man online ein. Vielleicht ist dies ein Blogbeitrag Sie für Ihre Besucher schreiben. Also werde ich das veröffentlichen. Da haben wir's. Wenn ich mir also den Beitrag ansehe, wenn Sie sich diesen 200503 2029 ansehen , wie man online einkauft, ist das die URL für diesen speziellen Lass mich einfach hier zurück ins Dashboard gehen und zu den Einstellungen gehen Permalink Es gibt verschiedene Möglichkeiten, die URL dessen, was Sie sich ansehen, anzuzeigen Wie Sie sehen können, haben wir hier ein Impact-Produkt. Wir haben unsere Domäne, das Produkt Schlagbohrmaschine. Das ist sehr SEO-freundlich. Wenn Google- oder Bing-Spider das Internet nach neuen Inhalten durchsuchen, schauen sie sich auch an, wie die URL für die verschiedenen Produkte, verschiedene Seiten und jeden einzelnen Teil Ihrer WordPress-Website, der einen Link enthält, strukturiert verschiedene Seiten und jeden einzelnen Teil Ihrer WordPress-Website, der einen Link enthält, Die Google-Bots schauen sich die Struktur der URL und geben bestimmten URLs aufgrund ihrer Struktur niedrigere Noten bestimmten URLs aufgrund ihrer Sie müssen also sehr vorsichtig sein wie Ihre URLs strukturiert sind Hier kommen Perma-Links ins Spiel Dies sind die verschiedenen Möglichkeiten, Ihre Beiträge zu strukturieren. Und wie Sie sehen können, haben wir derzeit dieses Datum und dann das Beispiel, und genau das haben wir hier. Die beste SEO-freundliche Art, Ihre URLs anzuzeigen, ist der Name des Beitrags. So einfach ist das. Änderungen speichern. In Ordnung, lassen Sie uns alles durchblättern Fantastisch. Wenn ich das jetzt ziehe und diese Seite neu lade, lade sie einfach neu Schauen wir uns die URL an. Okay, lass uns jetzt nach Hause gehen und posten Wie man online einkauft. Nehmen wir an, Sie sehen. Jetzt ist es also nur noch Ihr Domain-Slash , der Name des Blogposts Diese URL ist sehr SEO-freundlich und wird von Suchmaschinen besser bewertet , wenn sie Ihre Website indexieren Stellen Sie also sicher, dass Ihre Prima-Links auf den Namen des Beitrags eingestellt sind. Und dann speichern Sie die Änderungen. Ich denke, wir speichern die Änderungen bereits. Das sind natürlich nur Tipps und Tricks, die ich nur oberflächlich teile. Wenn Sie weitere Informationen wünschen, können Sie weiter über Prima-Links lesen Sie können über das Caching von Websites und alles andere, worüber ich sprechen werde, lesen und alles andere, worüber ich sprechen werde, Ich denke, das ist ein guter Ort, um das zu beenden. Lassen Sie uns als Nächstes über die Sicherheit Ihrer Wordpress-Website sprechen . Wir sehen uns in Kürze. 47. Website-Sicherheit: Lassen Sie uns einen Blick auf die WordPress-Sicherheit werfen. Gehen wir zu Plug-ins, Neues hinzufügen. Das liebe ich an Wordpress. Alles, was Sie zu Ihrer Wordpress-Website hinzufügen möchten Ihrer Wordpress-Website wurde bereits von jemandem als Plug-In erstellt. Sie müssen also niemandem zusätzliches Geld zahlen , um Ihrer Website Funktionen hinzuzufügen. Geben wir also Sicherheit ein. Wir haben mehrere Sicherheits-Plugins. Viele von ihnen sind sehr beliebt. Sie können jeden von ihnen wählen. Ich verwende wirklich einfache Sicherheitsfunktionen. Also werde ich das installieren, aber Sie können Wordfence Security Jet PAC verwenden, das zu Automatic gehört, der Firma, die Woo Coomers gegründet hat In Ordnung, lassen Sie uns weitermachen und es aktivieren. Willkommen bei Really Simple Security. SSL, ich habe überprüft, ob ich ein SSL-Zertifikat habe, und es wurde sehr gut erkannt. Sagen wir aktivieren. Was ist das? Ja, es wird eine Test-E-Mail gesendet, um zu bestätigen, dass die E-Mail auf meiner Website korrekt konfiguriert ist. Erlauben wir RSS, uns Benachrichtigungen zu senden , zu speichern und fortzufahren. Lassen Sie uns diese Mischung aus Schwachstellen-Scan und E-Mail-Anmeldung sofort sehen . Lassen wir es zu, dass es diese automatisch einrichtet. Wenn Sie die Cookie-Popups hinzufügen möchten, in denen Sie gefragt stimmen Sie den Cookie-Richtlinien dieser Website zu, bla, bla, bla ? dieser Website zu, bla, bla, bla Dies sind die Plugins, die Sie automatisch hinzufügen können. Sie werden von derselben Firma hergestellt. Sie können also sagen, installieren, aber ich werde sie nicht installieren, weil das für mich nur eine Dummy-Website ist Sie können mehr darüber erfahren. Sie haben Tutorials, wie das geht. Installiere. Und jetzt können wir fertig werden. Wir brauchen diese Profi-Funktionen nicht von ihnen. Wir brauchen sie vielleicht, aber wir haben vorerst nicht das Geld, um sie zu kaufen. SSL ist jetzt also aktiviert und wir haben eine Benachrichtigung über all die Dinge , die auf Ihrer Website getan werden müssen, um sie sicher zu machen. Sehen wir uns also an, dass 31 aktiviert ist. Das müssen Sie mit Ihrer HT-Zugriffsumleitung tun . Dies sind einige der Dinge, die Sie mithilfe von Chat GPT oder einem YouTube-Tutorial lernen können Chat GPT oder einem YouTube-Tutorial lernen Dies sind keine Dinge, auf die Sie näher eingehen werden. Ihre Website verwendet Elemental. Dies kann erfordern, dass einige dieser Dinge nicht dringend sind. Sie sind nicht sehr dringend. Wir haben Administratorrollen entdeckt, bei denen Anmeldenamen und Anzeigenamen identisch sind. Was wir also tun müssen, ist zu Benutzern oder Benutzern zu gehen. Lassen Sie mich den Link Openink in New Tab schreiben. Lass uns zu dem einzigen Benutzer gehen, der existiert, nämlich zu dir und du bist der Admin Und hier müssen Sie Ihren Spitznamen Mr. Moneybags angeben, und jetzt können Sie ihn verwenden, um Ihr Profil zu aktualisieren Sie sollten den Namen, der Ihnen zugewiesen wurde, nicht anzeigen den Namen, der Ihnen zugewiesen wurde, Der Benutzername, der Ihnen zugewiesen wurde, dieser Benutzername, Ihnen bei der Installation von WordPress zugewiesen hat. Zeige es nicht in der Öffentlichkeit an. Es kann verwendet werden, um sich in Ihren Admin-Bereich einzuloggen und Ihre Website zu zerstören oder Dinge zu stehlen. Lege also einen Spitznamen fest und verwende den Spitznamen als öffentlichen Namen in deinem Beitrag. Also, wenn wir zum Beispiel zu einem Ort gehen , wo ist der Beitrag, den wir erstellt haben? Wie Sie sehen können, hat der Beitrag derzeit meinen tatsächlichen Benutzernamen, den Admin-Benutzernamen. Aber jetzt, wenn ich das neu lade, heißt es jetzt von Mr. Moneybags Die Leute können den zufälligen Benutzernamen , den ich von WordPress bekommen habe, nicht erraten von WordPress bekommen habe Sie können also einige dieser anderen Dinge durchgehen. Ich werde keine Zeit damit verbringen, alles einzurichten , denn das dient nur dazu, Ihnen zu zeigen, Sie wirklich einfache Sicherheitslösungen für Ihre Sicherheit verwenden und lernen, wie man sie benutzt. Jede noch so kleine Warnung hier enthält weitere Informationen von der offiziellen Website des Plugins. Gehen Sie also all diese Dinge durch und sehen , wie Sie Ihre Website verbessern und sicherer machen können . Verwenden Sie Chat GPT, wenn Sie Dinge wie HTCs nicht verstehen und wissen, wie Sie das lösen können, In Ordnung. Ich denke, das ist ein netter Ort , um das zu beenden. In der nächsten Lektion. Lassen Sie uns sehen, wie Sie Ihre Website sichern , denn wenn gerade etwas mit Ihrer Website passiert und Sie Wordpress neu installieren müssen, verlieren Sie möglicherweise alles. Wenn Sie jedoch irgendwo in Google Drive oder auf Ihrem Computer ein Backup gespeichert haben , passiert alles, Sie haben ein Backup. Sehen wir uns in der nächsten Lektion an, wie das geht. Wir sehen uns in Kürze. 48. Deine Website sichern: Lassen Sie uns über die Sicherung Ihrer Website sprechen. Gehen wir also wie immer zu den Plugins. Neues hinzufügen. Lassen Sie uns also hier nach einem Backup suchen. Wie Sie sehen können, haben wir UdraftPlus und andere großartige Wordpress-Backup-Plugins Aber ich liebe Updraft Plus, weil es sehr einfach und unkompliziert ist Also lass es uns aktivieren. Und jetzt drücken wir hier alle Einstellungen auf Start. Ordnung. Also hier wirst du auf eine Tour durch das Plugin mitgenommen. Darauf klicken Sie, um ein Backup zu erstellen , aber lassen Sie uns mit dem nächsten Schritt fortfahren. Hier können Sie jederzeit auswählen, wie viele Dateien Sie behalten möchten. Hier können Sie auswählen , wohin Sie eine Kopie eines Backups Ihrer Website senden möchten . So können Sie eine Verbindung zu Ihrem Google Drive herstellen. Sie können diese anderen Dienste nutzen. Ich benutze das selten. Ich habe eine meiner Websites mit Google Drive verbunden und sie sendet automatisch eine Kopie einer Sicherungskopie meiner Website von dieser Website an Google Drive. Aber Sie müssen sich hier nicht mit all diesen Einstellungen herumschlagen. Das einzige, was Sie tun müssen, ist hierher zu kommen und auf Jetzt sichern zu klicken. Sonst nichts. Und dann, wie Sie sehen können, fügen Sie Ihre Datenbank hinzu, sie wird aufgenommen und Ihre Dateien eingeschlossen. Das sind Beiträge, Plugins, Produkte, alles. Und wenn Sie möchten, dass das Backup nur manuell gelöscht wird, können Sie darauf klicken. Das bedeutet, dass Sie das Backup selbst manuell löschen müssen. Lassen Sie uns jetzt ein Backup erstellen. Es könnte einen Moment dauern. Ed, hier sind wir. Unser Backup ist bereit. Wie Sie sehen können, sichern wir unsere Datenbank, Plugins , Themes, Uploads und andere Sie müssen also auf jeden einzelnen von ihnen, die Datenbank, klicken und sie auf Ihren Computer herunterladen. Es hat angefangen. Laden Sie Plugins herunter. Laden Sie alle Plug-ins herunter, die Sie installiert haben. Lass uns die Themes herunterladen, hochladen und andere. Gib ihnen einen Moment. Laden Sie jetzt Themen herunter. Da haben wir's. Laden Sie alle Uploads Mit anderen Worten, wenn Sie Bilder auf Ihre Website hochgeladen haben, z. B. Produktbilder und dann andere Und das heißt, wenn Sie diese Kopie des Backups wiederherstellen, wird Ihre Website genau so aussehen. Es wird genau so aussehen. Lassen Sie mich Ihnen nur zeigen, wie Sie das abschließen können. Also da sind wir. Ich öffne einfach das Flex Lab. Hier sind meine Dateien von diesem Backup bis hierher. Ich schneide sie aus, Control X, Rechtsklick auf Neuer Ordner, Onlineshop-Version, einen Punkt oh. Dann füge sie alle dort ein. Ich werde die dort speichern. Jetzt können Sie diesen Ordner nehmen und ihn irgendwo auf Ihrer externen Festplatte oder irgendwo auf Ihrer Festplatte ablegen Ihrer externen Festplatte oder irgendwo , wo sie sicher sind. Also, wenn wir zurück in den Online-Shop, in das Dashboard gehen und zu Updraft gehen, wenn wir diese Website wiederherstellen wollen, kann ich einfach das löschen, das löschen Jetzt haben wir es manuell gelöscht. Das ist okay. Lass uns das auffrischen. Wie ich bereits erwähnt habe, wenn Sie Ihre Website verlieren und jetzt eine brandneue Installation von Wordpress haben , können Sie jetzt Backup-Dateien hochladen, auswählen, genau dorthin gehen, wo Sie diese Dateien abgelegt haben, die Online-Shop-Version und dann öffnen und sie werden hier hochgeladen. Und sobald sie hochgeladen sind, haben sie die Möglichkeit, sie wiederherzustellen. Sie haben es vorhin gesehen bevor ich das Backup gelöscht habe, das hier existierte. Nach dem Hochladen wird es genauso aussehen wie das Backup, das wir gerade gelöscht haben. Wir werden also nicht warten, bis das Hochladen abgeschlossen ist. Sie wissen jetzt, wie Sie Ihre Website sichern und warum dies wichtig ist In der nächsten Lektion wollen wir sicherstellen, dass unsere E-Mails an Benutzer gesendet werden, wenn sie eine Aktion ausführen , und an uns, wenn etwas auf unserer Website passiert, Sicherheitswarnungen durch das RSS-Plug-in oder Formulareinsendungen, Formulareinsendungen von RSS-Plug-in oder Formulareinsendungen, Formulareinsendungen Formatoren, ATC Sehen wir uns in der nächsten Lektion an, wie das geht. Wir sehen uns in Kürze. 49. E-Mail-Zustellbarkeit: Lassen Sie uns nun über die E-Mail-Zustellbarkeit auf Ihrer Website sprechen E-Mail-Zustellbarkeit auf Ihrer Denn denken Sie daran , als wir zu RSS gingen, wo ist RSS-Sicherheit? Und hier sind wir. Lassen Sie uns also E-Mail-Validierung abschließen und Benachrichtigungen aktivieren , um sicherzustellen, dass Sie Sicherheitswarnungen erhalten. Sehen wir uns das an. E-Mail-Validierung, Benachrichtigungen hier, E-Mail-Validierung. Sie verwenden eine Funktion, bei E-Mail ein wesentlicher Bestandteil der Funktionalität ist. Bitte überprüfen Sie, ob Sie E-Mails auf Ihrem Server senden können. Sehen wir uns also an, alle Benachrichtigungen zu löschen. Nein. Wir möchten Benachrichtigungen erhalten und alle Daten beim Löschen des Plugins löschen. Lass uns nichts daran ändern, aber lass uns das schicken, um zu sehen, ob wir E-Mails versenden können. Ordnung, E-Mail-Bestätigung, E-Mail gesendet, bitte überprüfen Sie Ihre E-Mails. Gehen Sie jetzt zu Ihrem C-Panel. Wie Sie sehen können, hatte ich bereits mein C-Panel geöffnet und bis zu E-Mail-Konten gescrollt. Eine der E-Mails, die bei der Installation von Wordpress automatisch für Sie erstellt wurde , war standardmäßig admin at your website.com Die Website, auf der wir uns hier befinden, ist also VFXSpot. Also diese Check-E-Mail. Und hier sind wir. Also ich glaube, das wurde heute gesendet oder nicht? Bitte verifizieren Sie Ihre E-Mail-Adresse, um bestimmte Funktionen oder wirklich einfache Sicherheitsfunktionen nutzen zu können. Lassen Sie uns das zunächst überprüfen. Ich sehe hier keine Benachrichtigungen, was mir sagt, dass die E-Mail Ihre E-Mail bestätigt. In Ordnung. Also ich denke, das ist die E-Mail, die sie gesendet haben, als wir es installiert haben. Ich denke, es funktioniert einwandfrei, aber wir wollen das nicht hinterfragen. Also werden wir SMTP installieren, aber warten nur ein bisschen Dies sind Benachrichtigungen über Dinge, die wir erledigen müssen. Denken Sie daran, ich habe Ihnen gesagt , dass Sicherheit ein robustes Sicherheitssystem ist, und das sind Dinge, die Sie nacheinander durchgehen müssen , um zu sehen, wie Sie sie lösen können. Aber jetzt gehen wir wieder rein und sagen Plugins, füge neue hinzu. Wir möchten sichergehen, dass E-Mails gesendet werden. Also SMTP, das ist ein kostenloses Plugin. WP Mail SMTP von WPForms ist jetzt installiert. Unsere E-Mails wurden gesendet, um zu überprüfen, ob es funktioniert, aber ich möchte nur sichergehen, aber das ist nur zur Willkommen beim SMTP-Setup von WP Mail. Gehen wir einfach zurück zum Dashboard. Wir müssen den Einrichtungsassistenten nicht durchgehen , denn wir wollen hierher kommen. Diese sind einfach in Ordnung, wenn Sie sie auf der Standardeinstellung belassen. Online-Shop, das ist der Absendername. Wenn Leute Ihre E-Mail, Ihre Kunden, erhalten, wird sie aus dem Online-Shop oder dem Markennamen, den Sie Ihrer Website, dem Online-Shop, gegeben haben, gelesen Online-Shop oder dem Markennamen, den . Sie können es auch in Ihren Namen ändern. Ken. Macht aus dem Namen. Wenn andere Plugins einen anderen Namen gesetzt haben, können Sie die gesamte Website zwingen, diesen Absendernamen zu verwenden. Wir müssen das überprüfen, um sicherzustellen, dass auch zurückgeworfene Nachrichten nicht verloren gehen Und jetzt zum Mailer, wir werden SMTP verwenden, und wir werden Details von unserem Webhost verwenden Deshalb haben wir das geöffnet. Das ist die E-Mail, die wir verwenden, also werden wir sie verwalten. Und dabei können Sie auch Ihren Webhost bitten , Ihnen zu helfen. Lassen Sie uns jetzt hier ein Passwort generieren. also zunächst Lassen Sie mich also zunächst die Domain auswählen. In Ordnung, sie ist bereits ausgewählt. Generieren. Jetzt wähle ich dieses Passwort und kopiere es. Ich werde es irgendwo auf meinen Notizblock schreiben. Ich lege es irgendwo auf einen Notizblock, damit ich es mir von dort holen kann . Und das ist alles Aktualisieren Sie also die E-Mail-Einstellungen. Jetzt haben wir das gegeben. Welches haben wir benutzt? Es war VFXPod Also haben wir ihm ein Passwort gegeben, was sehr wichtig ist Geräte verbinden. Gehen wir zu Geräte verbinden. Wir benötigen diese Details. Wenn wir also wieder reingehen, wird der SMTP-Host der Domainname sein, den Sie verwendet haben Stellen wir es da hin. Wir werden SSL verwenden, weil wir ein SSL-Zertifikat haben. Das ist automatisch 465. Dann der SMTP-Benutzername hier, die E-Mail, die wir verwendet haben, und das Passwort ist das Passwort, das wir gerade auf unseren Notizblock geschrieben haben Also füge ich das dort ein. Und jetzt speichere ich einfach die Einstellungen. Ordnung. Lassen Sie uns nun sehen, ob es funktionieren wird, wenn unsere E-Mails tatsächlich funktionieren. Tools, ich glaube, unter Tools haben wir eine Testmail verschickt, ja. Lassen Sie mich also eine Testmail an unsere Admin-E-Mail schicken. Erfolg. Die Test-E-Mail wurde erfolgreich gesendet. Bitte überprüfen Sie Ihren Posteingang, um sicherzustellen, dass die E-Mail zugestellt wurde. Jetzt funktionieren unsere E-Mails. Aber es gibt eine Sache, die du beachten musst. Wir haben Formuator benutzt. Wenn wir also zum Formulator gehen, um uns unser Kontaktformular anzusehen, möchte ich Ihnen zeigen, wie Sie das E-Mail-Verhalten Ihrer Formulare bearbeiten Was passiert, wenn das Formular eingereicht wird? Gehen wir also zu E-Mail-Benachrichtigungen. 50. E-Mail-Benachrichtigungen für Formator: Die E-Mail-Benachrichtigungen, die wir haben. Nun, das ist die Einstellung für dieses spezielle Formular, dieses Kontaktformular. Wenn Sie ein anderes Formular und ein anderes Formular haben, müssen Sie in jedes der Formulare gehen , um diese Einstellungen festzulegen. Wenn wir also E-Mail-Benachrichtigungen öffnen, wenn der Benutzer das Formular absendet, gehen wir sehr schnell zum Frontend Kontakt, lass mich diese anderen schließen. , wenn der Benutzer seinen Namen und seine E-Mail-Adresse eingibt und etwas Was sollte passieren, wenn der Benutzer seinen Namen und seine E-Mail-Adresse eingibt und etwas eingibt und die Nachricht sendet? Diese E-Mail wird an den Administrator gesendet, weil er dieses Formular eingereicht hat, um es an Sie zu senden. Es ist also als Admin-E-Mail gekennzeichnet. Das ist nur ein Etikett für dich. Dies ist nur ein Etikett für das Dashboard, damit Sie wissen, um welche E-Mail es sich handelt, da die zweite E-Mail, die wir versenden an den Kunden geht. E-Mail-Adresse des Kunden. Betreff, wir können den Betreff auf Jetzt setzen, okay, lassen Sie mich das einfach schließen weil ich Sie vorerst nicht verwirren möchte Also, zurück hier, wir werden die E-Mail erstellen, die der Benutzer erhält, wenn er Ihnen dieses Formular sendet Aber jetzt arbeiten wir an dem, was Sie in Ihrem Posteingang sehen werden. Das wirst du sehen. Sie werden sehen, dass Sie ein neues Website-Formular eingereicht haben. Alle Felder, das ist nur ein Platzhalter für all diese drei Felder und die Details, die sie enthalten, die Werte, die vom Benutzer eingegeben wurden Sie können sich auch für etwas anderes entscheiden, vielleicht eingeben. Sie können sagen, wenn Sie Formulare einfügen sagen, Sie können sagen, Sie können ganz bestimmten Namen angeben, den Namen, den sie gemeinsam hatten. Sie können den Text sagen. Das ist ein Textbereich mit Details, was sie hier eingegeben haben. Und ihre IP-Adresse und all diese anderen Dinge, aber die brauchst du nicht alle Aber zusammenfassend sind all diese Felder all diese drei Felder und all die Daten, die sie hatten, gemeint Ordnung, danke. Werde das los. Diese Nachricht wurde von der URL der Website gesendet , bedeutet nur, dass der VF-Export angezeigt wird, und ich werde Ihnen genau zeigen, was ich meine Nun, wenn wir zum Betreff kommen, haben wir auch einige andere Platzhalter, wie Sie sehen können. Name bedeutet hier den Namen, den sie hier geteilt haben Wenn sie Kennedy, wie ich, in Ihre E-Mail aufnehmen, lautet dieser Betreff Einreichungs-ID des neuen Eingabeformulars, die ID dieses Formulars für den Formularnamen, den Namen, den Sie dem Formular gegeben haben, und wir haben ihm den Namen Kontaktformular gegeben , wie Sie hier sehen können Sie benötigen also für jedes Formular, das Sie erstellen, aussagekräftige Namen für jedes Formular, das Sie erstellen Wenn wir das Kontaktformular in unserer E-Mail für das Kontaktformular sehen, wissen wir, dass es von der Kontaktseite aus gesendet wurde Wenn wir ein anderes Formular auf einer anderen Seite haben und es einen anderen Namen hat, ist es dieses andere Formular. Sie können hier auch die Empfänger ändern. Sie können weitere Empfänger einfügen. Sie können Ihre eigene persönliche E-Mail-Adresse angeben, vielleicht Mäuse auf protonmil.com Sie erhalten auch eine Kopie derselben E-Mail als Benachrichtigung Für den Benutzer ist es jetzt so ziemlich dasselbe. Das wird der Kunde erhalten. Dies ist nur ein Etikett, damit Sie wissen, um welchen Zustand es sich handelt. Aber was sie jetzt sehen werden, ist das Thema. Das ist das Thema. Sie werden sehen, dass dies eine Kopie des Formulars ist, das Sie eingereicht haben. Und hier kannst du alles eingeben. Hier sind die Details, die Sie über das Kontaktformular auf unserer Website eingereicht haben. Ordnung. Geben Sie ein, ich kann einfach sagen, alle Formularfelder. Danke, dass Sie sich an uns gewandt haben. Wir werden uns bald mit Ihnen in Verbindung setzen , Empfänger. Also hier ist die Person, die empfangen werden soll die E-Mail, die sie in diesem Feld eingereicht hat, E-Mail-Adresse, E-Mail-Adresse. Also füge das Update hinzu. Lassen Sie mich jetzt diesen Ken Kyoko einreichen, lassen Sie mich diese E-Mail angeben und dann nur eine Test-E-Mail Nachricht senden. In Ordnung. Und Sie können jederzeit zu den benutzerdefinierten Farben in vier Mintor wechseln , um dies zu ändern Wenn wir jetzt zu unserer E-Mail hier zurückkehren und wenn ich sie aktualisiere, schauen wir mal, ob ich sie erhalte. Wir wurden ausgeloggt Gehen wir also rückwärts, und wenn ich E-Mail öffne, überprüfe ich die E-Mail. Zuallererst ist dies die Test-E-Mail, die wir mit SMTP gesendet haben Kongress, die E-Mail wurde erfolgreich gesendet, und wenn wir jetzt zu diesem Formular gehen, haben Sie ein neues Website-Formular eingereicht Gehen wir zurück zu unserer Website, und das sind alles Felder. Wenn wir wieder hier reingehen, haben Sie ein neues Formular für die Einreichung eines Formulars auf der Website, alle Felder. Es werden alle Felder abgerufen, die ausgefüllt wurden, und sie hier angezeigt. Diese Nachricht wurde von der URL der Website gesendet. URL der Website Lassen Sie mich überprüfen, ob ich dieselbe E-Mail in meinem Posteingang erhalten habe dieselbe E-Mail in meinem Posteingang Wie Sie sehen können, habe ich auch vom Online Store eine Kopie des Formulars erhalten, das Sie eingereicht haben. Und wenn ich hierher zurückkehre, schließe die Kunden-E-Mail, eine Kopie des Formulars, das Sie eingereicht haben. Wenn ich es öffne, finden Sie hier die Informationen Sie über das Formular auf unserer Website eingereicht haben. Hier sind die Details genau das, was wir gesagt haben, alle Felder. Weil wir gesagt haben, sende es an die E-Mail, die in das E-Mail-Adressfeld eingefügt wurde. So stellen Sie sicher, dass Ihre E-Mails an die Personen gesendet werden , die sie sehen müssen. Dies gilt auch für alle Ihre Wocomers-Transaktionen. Wenn Personen Zahlungen tätigen oder Transaktionen fehlschlagen, erhalten Sie all diese Benachrichtigungen Ich denke, das ist ein guter Ort, um dem ein Ende zu setzen. Lass mich sehen, wo wir uns gerade befinden. In Ordnung, ja Also sind wir jetzt mit der E-Mail-Zustellbarkeit fertig. Lassen Sie uns kurz über SEO sprechen. Wir sehen uns in Kürze. 51. Suchmaschinenoptimierung: Lassen Sie uns über Suchmaschinenoptimierung sprechen. Es gibt verschiedene Dinge, die wir tun müssen, um unsere Website für Suchmaschinen wie Google und Bing sichtbar zu machen unsere Website für Suchmaschinen wie Google und Bing sichtbar zu . Wenn Sie Ihre Website jetzt starten, ist sie für all diese Suchmaschinen unsichtbar. Lassen Sie mich diese anderen Bereiche einfach schließen. Lassen Sie mich das schließen. Aktualisiere das. Und einer der Gründe, warum wir für Suchmaschinen nicht sichtbar sein werden, ist etwas, das wir bewusst getan haben. Sie werden sich erinnern, dass wir vor ein paar Lektionen zu den Einstellungen und zum Lesen gegangen sind und Suchmaschinen davon abgehalten haben, unsere Website zu indexieren , weil sie sich im Aufbau befand Jetzt sind wir bereit, unsere Website zu starten. Lassen Sie uns also zunächst davon abraten Nein, wir sollten Suchmaschinen dazu ermutigen, diese Website zu indexieren Da haben wir's. Wie Sie sehen können, kommt unser Geschäft immer noch bald. Wenn wir also hierher gehen, können wir, sobald wir bereit sind, die Website zu starten, live gehen. Also lass uns einfach live gehen. Aber bevor wir live gehen, müssen Sie zunächst die gesamte Suchmaschinenoptimierung durchführen. Ich möchte dir nur zeigen , wie man live geht. Ich wollte nicht vergessen , dass der Laden bald noch kommt. Sobald Sie also den SEO-Teil erledigt haben, können Sie live gehen. Lassen Sie mich also die Änderungen speichern, vorausgesetzt, meine Website ist jetzt suchmaschinenoptimiert. Jetzt ist SEO ein eigenständiges Thema, und es sollte ein eigenständiger Kurs sein. Und das Gute ist, dass ich bereits einen Kurs über SEO veröffentlicht habe, WordPress-SEO für Anfänger. Ich habe es auf Skillshare veröffentlicht, wo ich auch andere tolle Wordpress- und Elementarkurse habe tolle Wordpress- und Elementarkurse Du kannst es dir jetzt ansehen. Es ist ein vollständiger schrittweiser Kurs zur Optimierung Ihrer Website, all den verschiedenen Teilen, die Sie sich ansehen und konfigurieren müssen , um sicherzustellen, dass Sie sich nicht auf Seite 500 der Google-Suchergebnisse verlieren. Ohne es zu sagen, werden wir nicht weiter über SEO sprechen. Schauen Sie sich diesen Kurs an oder gehen Sie einfach zu YouTube und suchen Sie nach weiteren SEO-Kursen oder -Tutorials. Ich habe ein paar abschließende Gedanken, die ich Ihnen in der nächsten Lektion mitteilen möchte, also lassen Sie uns das zusammenfassen. Wir sehen uns in Kürze. Geh nirgendwohin. 52. Schlussgedanken: Und das ist abgeschlossen. Herzlichen Glückwunsch. Sie haben jetzt eine voll funktionsfähige E-Commerce-Website mit Wordpress, Elementor, WooCommers und anderen WordPress-Tools sowie kostenlosen Tools erstellt wurde Elementor, WooCommers und anderen WordPress-Tools sowie kostenlosen Tools Ich hoffe, dieser Kurs hat Ihnen das Selbstvertrauen gegeben , Ihre eigene E-Commerce-Website im Jahr 2025 zu entwerfen, zu erstellen und zu starten Und wenn das nicht Ihr Ziel war, hoffe ich, dass der Kurs Ihnen das Selbstvertrauen gegeben hat, ein besserer Wordpress-Webdesigner zu werden. Was sind nun die nächsten Schritte? Nun, zunächst würde ich wirklich gerne sehen, was Sie gebaut haben. Gehen Sie zur Registerkarte Projekte und Ressourcen direkt unter diesem Videoplayer und klicken Sie auf die Schaltfläche Projekt einreichen. Sie können einen Screenshot Ihrer Landingpage, Ihrer Homepage, Ihrer Shop-Seite oder einer einzelnen Produktseite und ihn direkt hier auf Skillshare hochladen Lass es andere Schüler sehen, lass es deinen Lehrer sehen und lass uns gemeinsam deinen Erfolg feiern Und wie immer, wenn Sie diesen Kurs lieben und genießen und ihn als nützlich empfinden würden, würde es mir sehr viel bedeuten, wenn Sie sich weniger als eine Minute Zeit nehmen könnten , um eine Bewertung zu hinterlassen und mir mitzuteilen, wie es war. Helfen Sie anderen potenziellen Schülern wissen, ob dieser Kurs für sie geeignet ist . Hilf mir zu wissen, ob ich mit meinem Unterricht etwas bewirken oder ob ich etwas verbessern sollte. Sie werden buchstäblich weniger als eine Minute brauchen , um zum Tab „Rezensionen“ direkt unter diesem Videoplayer zu gehen Tab „Rezensionen“ direkt unter diesem Videoplayer und Ihre Bewertung dort abzugeben, und ich werde das wirklich zu schätzen wissen. Wenn Sie nun planen, Ihre Website zu starten, empfehle ich Ihnen dringend, sich mit SEO vertraut zu machen. Und wie ich bereits erwähnt habe, habe ich bereits einen ganzen Kurs über WordPressEO Schau dir also unbedingt mein Profil an. Gehen Sie runter und suchen Sie nach einer Klasse mit dem Namen WordPressEO Simplified for Beginner, und ich bin mir ziemlich sicher, dass Sie sie vor dem Start sehr hilfreich finden werden vor dem Start sehr hilfreich Mein Name ist immer Ken, und es ist mir eine Freude Ihnen beizubringen, wie man diese Website erstellt, und ich kann es kaum erwarten zu sehen, was Sie erstellen können Bis zum nächsten Mal, bleib kreativ. Bis bald.