Erstellen Sie eine digitale Downloads Website mit Elementor

1. Einführung: Willkommen zurück zu einer anderen genialen Klasse bei mir, kann Besser. Es ist mir immer ein Vergnügen , dich hier zu haben. Wenn du meine Brille gesehen hast, dann bringe ich Leuten gerne bei, wie man fantastische Zielseiten mit Elementor und WordPress entwirft . Jetzt werde ich Ihnen in diesem Kurs beibringen, wie Sie eine Website für digitale Downloads entwerfen , auf der Sie Ihre digitalen Produkte verkaufen können. Mit digitalen Produkten meine ich Dinge wie Logo-Vorlagen, Ihre Musik, wenn Sie Instrumentals verkaufen, wenn Sie Musikproduzent sind oder wenn Sie UI-Vorlagen mit Figma und Sketch entwerfen und in der Lage sein möchten verkaufe sie auf deiner eigenen Website. Wenn Sie jemals einen Marktplatz wie Graphic River, Free Peak oder Creative Market besucht haben, dann wissen Sie, eine Art Geschäft mit digitalen Downloads. Ich spreche von einer Plattform , auf der ein Besucher Ihre Bibliothek digitaler Produkte in Ihrem digitalen Shop erkunden kann Ihre Bibliothek digitaler Produkte in Ihrem digitalen Shop erkunden . Wählen Sie ein digitales Produkt aus, um weitere Details anzuzeigen, und laden Sie dieses digitale Produkt herunter. Das ist die Art von Geschäft, von dem ich spreche. Wenn Sie in der Kreativbranche tätig sind und Ihre Arbeit die Erstellung digitaler Inhalte beinhaltet. Zum Beispiel Schriftarten, Grafikdesignvorlagen wie Flyer und Logo-Vorlagen, UI UX-Vorlage wie Figma - oder Skizzenvorlagen. In diesem Kurs lernen Sie, wie Sie eine Plattform einrichten , auf die Sie diese Vorlagen verkaufen können. Im Gegensatz zu meinen anderen Elementarklassen in denen ich mich hauptsächlich darauf konzentriert habe, Elementor zum Erstellen einer einzelnen Landingpage zu verwenden Elementor zum Erstellen einer einzelnen Landingpage ohne auf Details zur Funktionsweise einer Website einzugehen. In dieser Klasse erstellen wir eine vollwertige Website mit mehreren Seiten, die funktioniert und das Potenzial hat, auch während Sie schlafen, neues passives Einkommen zu erzielen. Das ist, wenn Sie bereit sind , sich dazu zu verpflichten. Wenn Sie also davon geträumt haben, eine Online-Plattform zu besitzen , auf der Leute digitale Produkte herunterladen können , wo Sie die Vorlagen hochladen können, um sie zu erstellen. Dann ist dies das System, das wir lernen werden. Also hoffe ich, dass du genauso aufgeregt bist wie ich. Ich möchte dir zeigen, was wir bauen werden und dann haben wir nicht angefangen, also folge mir. Und da haben wir es. Jetzt, da wir einen Überblick über die Website für digitale Downloads hatten , werden wir aufbauen. Und weil dieser Kurs darauf ausgelegt ist , Menschen auf allen Erfahrungsstufen in WordPress, einschließlich Anfängern, aufzunehmen allen Erfahrungsstufen . Wir werden uns zunächst ansehen, was ein CMS ist , ohne mehr Zeit zu verschwenden. Lasst uns anfangen. 2. Was ist ein CMS: Ein Content-Management-System oder ein CMS ist eine Anwendung, mit der Sie digitale Inhalte erstellen, veröffentlichen und ändern können. Mit einem CMS können Sie in wenigen Minuten eine voll funktionsfähige Website erstellen in wenigen Minuten eine voll funktionsfähige Website und sofort mit dem Verkauf von Produkten und Dienstleistungen an Online-Kunden beginnen . Um ein CMS zu verwenden, müssen Sie nicht wissen, wie man kodiert, da die Anwendung Ihnen Tools zur Verfügung stellt, mit denen Sie Ihre Inhalte visuell manipulieren können. Wenn Sie wissen, wie man Symbole auf einem Computerbildschirm zeigt und darauf klickt, können Sie ein CMS verwenden. Jeder kann ein CMS benutzen. Dann werfen wir einen Blick auf einige der Beispiele für das beliebteste CMS, das CMS hat. Aber wie funktioniert ein CMS? Um zu verstehen, wie ein CMS funktioniert, müssen wir es als zwei Teile betrachten, die zusammenarbeiten, um dem Benutzer ein entzückendes Erlebnis zu bieten. Und diese beiden Teile umfassen eine Content-Management-Anwendung oder eine CMA, die im Grunde die Frontend- oder Front-Face-grafische Benutzeroberfläche ist Front-Face-grafische Benutzeroberfläche , mit der Sie während der Erstellung interagieren und bearbeite deinen Website-Inhalt. Dies wird durch ein Dashboard dargestellt , das Ihnen mehrere Tools und Dienstprogramme zur Verfügung stellt, mit denen Sie verschiedene Dinge für Ihre Inhalte auswählen und ausführen können . Der andere Teil ist die Content-Lieferanwendung oder die C, D, a. Dies ist die Backend-Seite des CMS, die für die Lieferung der Inhalte verantwortlich ist, die Sie mit einem CMA erstellt haben, auf Ihre Website besucher. Um zu veranschaulichen, wie diese beiden Komponenten zusammenhängen. Stellen wir uns für einen Moment ein CMS als Restaurant vor. Wenn ein CMS ein Restaurant ist, ist das CMA wie die Küche. Er stellt die Küche zur Verfügung , wo sie benötigt wird, um das Essen zuzubereiten, dem die Kunden serviert werden. Das heißt, in einem CMS ist die CMA der Teil, der Ihnen die Tools zum Erstellen eines veröffentlichten digitalen Inhalts bietet, der Besuchern zur Verfügung gestellt wird, wie Blogbeiträge, Produkte wird auf Ihrer Website angezeigt , wenn Sie sie erstellen. Es ist die CMA, die Ihnen die Tools zum Erstellen dieser Teile bietet. Auf der anderen Seite ist der CDA noch am Beispiel des Restaurants wie der Kellner in einem Restaurant, der Essensbestellungen erhält, in die Küche geht, um das Essen zu holen und es den Kunden zu servieren. also auf unsere Website zurückgehen, heißt das, dass der CDA der Teil des CMS ist , der die Seiten bedient, die von Ihren Website-Besuchern angefordert wurden. Wenn sie also nach der Homepage anfragen, klicken sie auf eine Schaltfläche, die zu einem anderen Teil der Website weitergeleitet werden soll . Es ist der CDA, der für die Bereitstellung der von ihnen angeforderten Seite verantwortlich ist . Es gibt zwei Möglichkeiten , ein CMS zu verwenden, und dies hängt davon ab, wie das CMS installiert wird. Sie können ein CMS entweder als lokales CMS oder als Cloud-basiertes CMS verwenden. Wenn Sie das CMS auf einem Server herunterladen und installieren , der von einem Webhost oder auf einem Server bereitgestellt wurde einem Webhost oder auf einem Server , den Sie lokal auf Ihrem Computer erstellt haben. Das CMS soll eine lokale Installation sein. Weil es auf einem Server installiert ist , über den Sie die Kontrolle haben. Sie können direkte Änderungen am Kern der Anwendung vornehmen, um Ihre spezifischen Anforderungen an das Website-Projekt zu erfüllen. Sie können beispielsweise auf den Quellcode von WordPress zugreifen und ihn bearbeiten den Quellcode von WordPress , um anzupassen, wie Sie Ihre Website erstellen. Was Cloud-basiert angeht, bietet Ihnen CMS's, ein Verkäufer des CMS-Service, ein Verkäufer des CMS-Service, eine Cloud-gehostete Umgebung der Sie Ihre Website erstellen und verwalten können. Denken Sie zum Beispiel an Wochen. Sie bieten Ihnen eine Umgebung der Sie eine Website erstellen können, aber sie verwalten die Plattform für die wichtigsten Wochen , die Ihre Website mit Strom versorgt. Bei dieser Art der Installation haben Sie nicht die Freiheit, das CMS selbst zu bearbeiten . Der Kern. Sie können beispielsweise eine Website nach Wochen erstellen, aber Sie können den Kern der Wochenplattform nicht selbst bearbeiten , da nur das Entwicklerteam für interne Wochen Zugriff auf den Quellcode hat. Sie und andere Benutzer können die auf der WIX-Plattform bereitgestellten Tools verwenden , um Websites zu erstellen. Aber das Team der Woche kümmert sich für Sie um die Rücken- und Rückseitenfunktionalitäten. Zu den beliebten Beispielen für lokale CMSs gehören Drupal, Joomla und WordPress, wordpress.org. Einige häufige Beispiele für Cloud-basierte CMS-Installationen sind Wochen, Shopify und die WordPress.com-Plattform. Während jedes CMS bis zu einem gewissen Grad einzigartig ist, teilen fast alle CMS bestimmte wichtige Funktionen. Schauen wir uns ein paar von ihnen an. Nummer 1, ein CMS bietet Ihnen die Tools, um verschiedene Arten digitaler Inhalte zu veröffentlichen. Viele Leute entscheiden sich für die Verwendung eines CMS da sie damit Inhalte mit wenigen Klicks zusammenstellen und sie als Blogbeiträge oder Produkte in Echtzeit veröffentlichen Blogbeiträge oder Produkte in können, ohne programmieren zu müssen. Nummer 2. Ein CMS bietet Ihnen Möglichkeiten, Ihre veröffentlichten Inhalte zu überarbeiten. Als Websitebesitzer möchten Sie immer einige Inhalte bearbeiten oder aktualisieren , die Sie bereits veröffentlicht haben. Ein zuverlässiges CMS sollte es Ihnen ermöglichen, Änderungen nach Belieben und diese Änderungen zu verfolgen , damit Sie zu früheren Versionen Ihrer Arbeit zurückkehren können früheren Versionen Ihrer Arbeit falls Sie Fehler machen während du gerade bearbeitest. Ein CMS bietet eine einfache Möglichkeit, Inhalte zu indizieren, zu suchen und abzurufen. Dies bedeutet einfach, dass ein CMS es Ihnen oder Ihren Benutzern ermöglichen sollte , einfach durch Suche auf Inhalte auf Ihrer Website zuzugreifen , indem es eine Möglichkeit Inhalte nach vordefinierten Kategorien oder Gruppierungen zu gruppieren. Zum Beispiel Flier-Vorlagen, Zeitschriftenvorlagen. Wenn ein Benutzer Zeitschriftenvorlagen eingibt, sollte er in der Lage sein, eine Liste oder eine Galerie mit zeitschriftenbezogenen Ergebnissen direkt auf dem Bildschirm zu erhalten . Das meinen wir damit, Inhalte zu indizieren, zu suchen und abzurufen. Jetzt, da Sie verstehen, was ein Content-Management-System ist, werfen wir einen Blick auf das berühmteste und beliebteste Content-Management-System der Welt , WordPress. Lasst uns das in der nächsten Lektion machen. 3. Wordpress: Der erste Schritt beim Einrichten einer Online-WordPress-Entwicklungsumgebung besteht darin, zuverlässiges Webhosting zu erhalten. Ein Webhost speichert Ihre Website grundsätzlich auf einem Computer, der 24, 7, 365 Tage im Jahr mit dem Internet verbunden ist . Dadurch wird sichergestellt, dass Ihre Webseiten Besuchern zur Verfügung stehen , wenn sie sie beim Surfen auf Ihrer Website anfordern . Wählen wir also eine gute Website für Ihr Unternehmen aus. Nachdem ich seit Jahren WordPress-Websites entwirfe, bin ich auf ziemlich viele Webhosts und einige der entscheidenden Faktoren gestoßen ziemlich viele Webhosts und einige der , die ich bei der Suche nach einem guten Webhost berücksichtigen gelernt habe beinhalten, gibt es Hosting-Dienste waren pressefreundlich , weil es Webhosts gibt, die WordPress-spezifische Dienste anbieten. Welche Sicherheitstechnologien verwenden sie , um Ihre Website zu schützen? Bieten sie einen zuverlässigen technischen Support von 24, 7? Werden sie schnelle Ladegeschwindigkeiten für Ihre Website bieten? Dies sind einige der wenigen, wie Sie bei der Suche nach einem Webhost berücksichtigen müssen. Und unter Berücksichtigung dieser Faktoren gehören zu einigen der beliebtesten WordPress-Webhosts , die für ihre durchweg exzellenten WordPress-freundlichen Dienste bekannt sind ihre durchweg exzellenten WordPress-freundlichen Dienste für ihre durchweg exzellenten WordPress-freundlichen Dienste bekannt sind, TMD-Hosting, Site Ground , Traumwirt, Bluehost. Diese Unternehmen bieten WordPress-spezifische Dienste im Rahmen ihres Produktangebots an. Und dies sind nur vier der berühmtesten WordPress-freundlichen Webhost auf dem Markt. Sie können gute Webhosts für Ihr Geschäft mit digitalen Downloads in Ihrem eigenen Land erhalten. Aber nur für den Fall, dass Sie sich die Zeit und den Schmerz sparen möchten , überall Google für die besten Webhosting-Dienste , die die vier, die ich bereits erwähnt habe, ist das TMD-Hosting-Site Dream Host und Bluehost, der sehr beliebt unter WordPress-Anwendungen und Sie könnten erwägen, sie zu verwenden. Das war's also für das Webhosting und den Domainnamen. Es ist jetzt an der Zeit, eine Online-WordPress-Entwicklungsumgebung einzurichten . Also lasst uns gleich eintauchen. 4. Demo – So richtest du eine -: Willkommen zu dieser Lektion. In der letzten Lektion haben wir über die beiden verschiedenen WordPress-Umgebungen gesprochen, die wir einrichten können, um mit dem Erstellen von Websites zu beginnen. In dieser Lektion richten wir eine Online-WordPress-Umgebung ein. Und wir haben uns auch einige Faktoren angesehen, die Sie berücksichtigen müssen , wenn Sie nach einem Webhost suchen. In diesem Kurs gehe ich davon aus, dass Sie bereits entschieden haben , welchen Webhost wir für die Zwecke meiner Demos verwenden Ich verwende diese Webhosts. Also melde ich mich an, um Zugriff auf mein cPanel zu haben. Melden Sie sich also bei Ihrem Webhost an, um Zugriff auf Ihr cPanel zu erhalten. In meinem Webhosts-Dashboard habe ich diese cPanel-Login-Option. Suchen Sie nach der cPanel-Anmeldeoption wo immer sie sich in Ihrem Dashboard befindet. In meinem cPanel scrolle ich also ganz nach unten und suche nach subscapularis-Apps, dem Installationsprogramm, ich klicke auf Wordpress. Und weil Sie auf WordPress geklickt haben, werden Sie direkt zur WordPress-Zielseite innerhalb von Kalkül weitergeleitet. Und weil ich bereits zwei Installationen von WordPress auf Weizen habe, muss ich eine Live-Website finden. Ich habe eine Liste der aktuellen Installationen hier. Wenn ich eine weitere Kopie von WordPress installiere, wird es hier unter diesen beiden aufgeführt. Dies wird also die Liste aller Ihrer WordPress-Installationen sein. Das nächste, was wir jetzt tun müssen, ist die Systole. Jetzt. Jetzt werden wir auf diese Seite eingehen, auf der wir alle Details zu unserer neuen Website ausfüllen können . Für das Protokoll klicke ich also auf das Dropdown-Menü und wähle HTTPS aus. Stellen Sie sicher, dass es https, www dot ist, damit es Ihre Domain www dot ist. Lassen Sie das Verzeichnis hier leer und dies ist die Version von WordPress, die wir installieren möchten. Es ist also 5.8.1. Geben Sie also eine Website und einen Namen und lassen Sie uns eine Beschreibung geben. In Ordnung, also können Sie hier die Admin-Details angeben. Dies sind Ihre WordPress-Anmeldeinformationen. Wann immer Sie sich bei Ihrem WordPress anmelden möchten, um auf das WordPress-Dashboard zuzugreifen. Dies sind die Details, die Sie verwenden werden. Stellen Sie also sicher, dass es sich um ein sicheres Passwort handelt. Ich verstecke das und setze mein Passwort ein. Also würde ich vorschlagen, dass Sie die Standards-E-Mail im Eingabefeld hier belassen . Als nächstes sind diese nicht obligatorisch. Ja, und das war's. Wir sind fertig. Geben Sie hier die E-Mail ein, an die Soft Tackle uns eine Benachrichtigung senden soll , wenn Ihre Website erstellt wird. Sobald diese Website erstellt wurde, diese E-Mail gesendet, sobald diese WordPress-Installation abgeschlossen ist wird die Benachrichtigung an diese E-Mail gesendet, sobald diese WordPress-Installation abgeschlossen ist. Also lege ich einfach meine E-Mail ein und sage „install“. Sag das nicht. Wir sollten drei bis vier Minuten sagen. Alles in Ordnung. Und jetzt herzlichen Glückwunsch, die Software wurde erfolgreich installiert. Und dies ist der direkte Link zur Hauptseite, zur Hauptseite der Domain. Also lass mich einfach anklicken und sehen, wo wir haben. Das ist im Moment also unsere Website. Und das ist der Link zu unserem Dashboard. Es ist dieselbe Domäne, aber mit einem WP-Bindestrich Admin. Das ist also der Link zum Dashboard. Wenn ich darauf klicke, wirst du zum Dashboard weitergeleitet. Und Wallah, da haben wir es. Wir haben eine Online-Umgebung eingerichtet, die wir sind gepresst, und jetzt ist unsere Website live. Wenn wir zu Recht den Link in einem neuen Tab öffnen und zu diesem Tab gehen, haben wir das. Jetzt wollen wir als Nächstes sehen wie man ein WordPress-Theme installiert. Was ist ein WordPress-Theme? Wir sehen uns in Kürze. 5. Demo – So richtest du eine lokale WordPress-Umgebung ein: In diesem Tutorial zeige ich Ihnen, wie Sie eine lokale Installation von WordPress einrichten eine lokale Installation von , und wir verwenden XAMPP. Aber zuallererst, was ist XAMPP? Know zap ist eine völlig kostenlose Open-Source-Entwicklungsumgebung , die es WordPress-Benutzern ermöglicht , Websites lokal auf ihren Computern zu erstellen und zu hosten lokal auf ihren Computern ohne dass eine Internetverbindung erforderlich ist. Das bedeutet, dass wir weiterhin mit Websites interagieren können , die Sie erstellt haben ohne dass eine Internetverbindung erforderlich ist. In vollem Umfang. Xampp steht für das X steht für plattformübergreifend Apache, MySQL oder MySQL, PHP-Kaiser. Laut WordPress ist ein lokaler Host im Kontext eines Netzwerks ein bestimmter Computer, lokaler Host im Kontext eines Netzwerks ein an dem Sie gerade arbeiten. Wenn Sie also gerade in einem Büro sind, der Computer, den Sie verwenden, lokalen Host Israel. Wenn Sie von zu Hause aus arbeiten, ist Ihr Computer zu Hause Ihr lokaler Gastgeber. Wenn Sie einen Lieblingscomputer haben, ist es ein Cyber-Café, dieser Computer kann auch Ihr lokaler Gastgeber sein. Sie können XAMPP auf jedem dieser Computer haben WordPress dort installieren und von dort Erstellen von Websites beginnen. Schauen wir uns also an, wie Sie einen lokalen Host mit XAMPP einrichten. Also hier sind wir auf der offiziellen XAMPP-Download-Seite. Und die URL lautet www dot Apache friends.org slash index.html. Und Sie werden feststellen, dass wir verschiedene Versionen von XAMPP creative für verschiedene Betriebssysteme haben. Da ich Windows verwende, klicke ich auf XAMPP für Windows. Der Download sollte automatisch starten, aber ich werde ihn nicht herunterladen da ich das bereits heruntergeladen habe, wie Sie hier auf meinem Desktop sehen können , ich habe es bereits. Als Nächstes möchten wir zur WordPress-Download-Seite gehen, die WordPress.org Slash-Download ist. Scrollen Sie nach unten und klicken Sie auf diese Schaltfläche direkt hier, um die neueste Version von Wordpress herunterzuladen. Und ich habe schon eine Kopie davon. Ich habe es bereits heruntergeladen und extrahiert. Es ist auf meinem Desktop, wie Sie genau hier sehen können. Laden Sie also dieses WordPress herunter und extrahieren Sie es an einen Ort, von dem Sie es abrufen können. Jetzt, da Sie diese beiden haben, beginnen wir mit der Installation von XAMPP. Darauf doppelklicke ich also. Und du bekommst diese Warnmeldung. Fahren Sie fort und sagen Sie ja, fahren Sie mit der Installation fort. Folgen Sie dann den Anweisungen. Es sollte ziemlich einfach sein. Nicht kompliziertes Ziel der Weg zum Ende und installierte XAMPP in seiner Standardeinstellung. Sehen Sie das Recht, Entschuldigung, ich habe bereits eine Kopie davon in meinem System, also werde ich es nicht installieren. Sobald Sie XAMPP installiert haben und in Ihr Bedienfeld gehen und sich die Liste aller Programme ansehen, die Sie Ihrem Computer installiert haben, sollten Sie das Bitnami WordPress-Modul finden genau dort und XAMPP im Ordner. Lass mich weitermachen und das schließen. Und in Ihrem C-Laufwerk oder Haupttrockner finden Sie einen Ordner namens SAM , der Ihnen mitteilen sollte , dass Sie XAMPP erfolgreich auf Ihrem Computer installiert haben . Und bevor wir zum WordPress-Ordner übergehen, stellen wir sicher, dass unser Server jetzt läuft. Also öffne ich XAMPP aus dem Startmenü. Ich bringe es gleich hier in den Fokus. Und du wirst feststellen, dass es hier viele Knöpfe hat. Aber wir interessieren uns nur für zwei Knöpfe. Apache, MySQL. Klicken Sie also bei beiden auf Start und Sie werden feststellen, dass sich der Status geändert hat. Jetzt läuft MySQL und Apache läuft. Mysql ist die Datenbank und Apache ist ein Server. Also mach ich weiter und minimiere das. Und lasst uns mit dem nächsten Schritt fortfahren. Das nächste, was wir tun möchten, ist den WordPress-Ordner auszuwählen, den Sie gerade extrahiert haben. Und wir könnten es einfach für eine Sekunde öffnen. Sie werden feststellen, dass es hier viele Webseiten in einer Reihe anderer Ordner mit mehr Dateien gibt, mit denen Sie Ihre Seiten auf Ihrer lokalen Website navigieren können. Jetzt, wo wir bestätigt haben, dass alles was Sie brauchen, da drin ist. Kopiere es. Und dann öffnen wir den Windows Explorer und gehen in C, öffnen den Zoom-Ordner, den wir gerade angeschaut und suchen nach diesem Ordner, HT-Dokumenten. Hier werden alle Ihre WordPress-Websites installiert. Hier haben Sie alle Ihre lokal installierten WordPress-Websites. Also wenn wir es hier einfügen. Ich denke, ich hatte bereits eine Kopie davon eingefügt, also habe ich hier bereits eine Kopie davon, aber im Grunde füge diesen WordPress-Ordner einfach in diesen HT-Dokumenten-Ordner ein, der sich im Prüfungsordner innerhalb des C-Laufwerks. Und wenn Sie es dort eingefügt haben, benennen Sie es in den Namen Ihrer Website um. Also mein Web lass es mich einfach meine Web-Override nennen. Jetzt, da wir XAMPP in unserem System installiert haben und es läuft, wie Sie an diesem Status sehen können, genau hier. Und wir haben bereits eine Kopie von WordPress heruntergeladen und daraus eine Website erstellt und sie im XAMPP-Ordner als mein Web bezeichnet. Jetzt können wir auf das Dashboard der WordPress-Website zugreifen, das Dashboard dieser Websites. Gehen wir also zum lokalen Gastgeber. Mein Web, der Name Ihrer Website oder der Name, den Sie Ihrem Ordner gegeben haben , und wird auf diese Seite weitergeleitet, wo wir mit der Installation von WordPress beginnen. Bevor wir also weiter gehen, öffne einen neuen Tab und gehe zu localhost, PHP, meinem Admin. Und der Grund, warum wir hier reingehen, ist unsere Website noch keine Datenbank hat. Also erstellen wir eine Datenbank. Dann gehen wir zurück zu dieser Seite und installieren weiterhin alles andere. Also in PHP, meinem Admin, mach weiter und treffe das auf eine Basis. Und geben wir ihm einen Namen. Also, wenn ich das B oder so etwas erzielt habe, gib ihm einfach einen Namen, spielt keine Rolle. Das war also meine Web-DB und Sie werden sie hier aufgelistet finden. Hier ist es mein Web-Unterstrich DB. Jetzt können wir zu dieser Seite zurückkehren und klicken, Lass uns den Datenbanknamen suchen, ihm den neuen Namen geben, wir haben ihn gerade benannt. Es ist also mein Web-Unterstrich DB. Für den Benutzernamen geben wir ihm Routen an. Und für das Passwort lassen Sie es leer. Klicken Sie dann auf Absenden. Alles klar, Sparky, du hast diesen Teil der Installation überstanden . Lassen Sie uns also als nächstes die Installation ausführen. Genau hier stellen wir einfach grundlegende Informationen zu unserer WordPress-Website zur Verfügung und legen die Anmeldeinformationen für die Protokollierung fest. Die Website ist also mein Web. Und dann lass uns einfach mit Admin für den Benutzernamen gehen. Benutze ein nettes sicheres Passwort. Aber im Moment gehe ich zur Veranschaulichung einfach höflich. Dann bestätige ich die Verwendung eines schwachen Passworts. Meine E-Mail, P bei k.com. Und ich heize installiertes WordPress. Lass es uns einen Moment geben. Also los geht's. Erfolg WordPress wurde installiert. Danke und viel Spaß. Loggen wir uns mit den gerade erstellten Anmeldeinformationen ein, admin. Unser Passwort war, dass ich einfach verraten habe, dass dies mein Pass war, wenn ich mich richtig erinnere, was war mein Passwort für Licht oder richtig. Da haben wir es also. Zusammenfassend oder kurz zusammengefasst : Wenn Sie eine neue Website lokal auf Ihrem Computer erstellen möchten , müssen Sie diesen Ordner nur kopieren, ihn hier einfügen und ihm einen Namen geben. Eine andere Website, kopiere diesen Ordner, lege ihn hier ein, gib ihm einen anderen Namen und so weiter und so weiter. Stellen Sie sicher, dass es sich um den ursprünglichen Ordner handelt, den Sie heruntergeladen und extrahiert haben. So können Sie hier 50, 7000 Websites haben. Und wenn Sie in das Dashboard gehen möchten, stellen Sie zunächst sicher, dass Ihr XAMPP, Ihr XAMPP, das einfach in den Fokus rücken kann. Ihr Apache und MySQL laufen beide. Solange diese beiden ausgeführt werden, sollten Sie in der Lage sein, Ihren Browser so zu öffnen und direkt zu Ihrem lokalen Host, localhost und dem Namen Ihrer Website zu wechseln. Und so geht es, Leute. Ich hoffe, Sie fanden diese hilfreich. Wenn dir dieses Video gefallen hat, gib mir bitte einen Daumen hoch. Wir geben immer die Motivation, weiterzumachen. 6. Was ist ein WordPress-Thema.: Ein WordPress-Theme ist eine Sammlung von Dateien , die bestimmen, wie WordPress-Website aussehen und sich verhalten wird , wenn Benutzer damit interagieren. Diese Dateien können also PHP -, HTML- und CSS-Code, Bilder, Plugin-Vorlagen und Webseitenvorlagen enthalten -, HTML- und CSS-Code, Bilder, . Indem Sie Änderungen an dieser Dateisammlung vornehmen, können Sie das Aussehen und das Design Ihrer WordPress-Website ändern , damit sie genau so aussieht und funktioniert, wie Sie es möchten. beispielsweise einige Ihrer Themen und Erscheinungseinstellungen optimieren , können Sie ändern, wie Artikel in Ihrem Blog angezeigt werden, wie Ihre Produkte in Ihrem E-Commerce-Shop erscheinen wie Ihre Menüs wird auf der gesamten Website präsentiert und wie Links oder sich verhalten, wenn Sie darauf klicken. Jedes Mal, wenn Sie WordPress installieren, wird es mit dem Standard-WordPress-Theme vorinstalliert, normalerweise nach dem Jahr benannt ist, in dem gleich gestartet wird. Zum Beispiel das WordPress 2020-Thema oder der Schmerz in WordPress 2021. Sie können jederzeit zu einem neuen Thema wechseln, wenn Sie möchten. Und wir werden sehen, wie das in dieser Klasse geht. Es gibt drei Arten von WordPress-Themes, wenn es darum geht, wie viel es kostet, sie zu bekommen. Es gibt kostenlose Themen. Das bedeutet, dass sie kostenlos vollständig genutzt werden können. Sie müssen kein Geld bezahlen, um sie zu benutzen. Es gibt Freemium-Themes, was bedeutet, dass sie kostenlos sind, aber zusätzliche Premium-Funktionen haben, auf die Sie bezahlen müssen, um Zugriff zu haben. Und dann haben wir Premium-Themes, die Ihnen nur zur Verfügung stehen, wenn Sie sie kaufen, Sie können sie nur verwenden. Wenn du sie gekauft hast. Als WordPress-Benutzer können Sie leicht jede Seele finden, Tausende von kostenlosen Themen, die im WordPress-Theme-Repository oder Theme-Verzeichnis aufgeführt sind . Wenn Sie Premium-Themen wünschen, können Sie diese auf einem digitalen Marktplatz wie Creative Market kaufen oder einen Entwickler bezahlen, um eines für Sie zu erstellen. Wie können Sie feststellen, ob ein WordPress-Theme gut für Ihr Projekt ist? Nun, obwohl es wirklich keine einheitliche Antwort auf diese Frage gibt, sollte jedes gut gestaltete WordPress-Theme im Allgemeinen einige gemeinsame Eigenschaften eines guten Themas aufweisen. Mit anderen Worten, das Thema sollte auf allen Bildschirmgrößen vorzeigbar und großartig aussehen . Es sollte in allen gängigen Browsern ein einheitliches Aussehen haben . Das bedeutet, dass Sie gut mit Chrome, Firefox, Safari, Internet Explorer und diesen anderen arbeiten sollten . Es sollte aktiv gewartet und regelmäßig aktualisiert werden. Es sollte live sein und daher schnell zu laden sein. Das heißt, wenn es gut geschrieben ist, sollte es einen sauberen, gut geschriebenen Code haben. Sie sollten eine umfangreiche und gut geschriebene Dokumentation online zur Verfügung haben. Sie sollten von einer zuverlässigen Kundenbetreuung und -unterstützung für alle Benutzer unterstützt werden. Es sollte SEO-freundlich sein. Die beiden WordPress-Themes, die ich in praktisch allen meinen Webdesign-Projekten verwende , sind. Nummer eins, Astra. Astra ist ein sehr beliebtes kostenloses und vielseitiges WordPress-Theme , das Ihnen jede Menge schöner vorgefertigter Vorlagen bietet , die mit jeder der beliebten Drag & Drop-Seiten vollständig editierbar sind mit jeder der beliebten Drag & Drop-Seiten vollständig editierbar Bauherren, wie Elementor, Beaver Builder, DV und so weiter. Die in der kostenlosen Version angebotenen Funktionen reichen für die meisten Website-Projekte aus, an denen Sie möglicherweise arbeiten möchten. In der Tat werden wir Astro für unser Geschäftsprojekt für digitale Downloads verwenden . Das andere Thema, das ich gerne in vielen meiner Projekte verwende , ist dV. Dv ist heute nicht nur eines der beliebtesten WordPress-Themes auf dem Markt, sondern verfügt auch über einen erstaunlichen visuellen Seitenersteller , mit dem Sie alle Aspekte des Teams und Designs bearbeiten des Teams und Designs jede Art von Website, die Sie möchten, ohne Programmierkenntnisse. Egal, ob Sie mit dem Entwerfen von Grund auf oder von einer vorgefertigten Vorlage beginnen möchten , dv bietet Ihnen die Möglichkeit, dies reibungslos zu tun. Wie ich bereits erwähnt habe, enthält jede neue WordPress-Installation ein Standardthema, um das Erscheinungsbild Ihrer Website zu steuern . Wordpress gibt Ihnen die Freiheit, zu einem anderen Thema zu wechseln , indem Sie einfach ein neues über die WordPress-Erscheinungsfunktion im Dashboard installieren ein neues über . Lassen Sie uns also unser Theme in der nächsten Lektion installieren und aktivieren . 7. Demo – So installierst du ein WordPress-Thema: Also willkommen zurück. In der letzten Lektion haben wir uns angeschaut, was ein WordPress-Theme erleichtert. In dieser Lektion wechseln wir also vom Standard-WordPress-Theme , um Astro genannt zu werden . uns also immer in einer weiteren Zeit Lassen Sie uns also immer in einer weiteren Zeit direkt zu den Erscheinungsthemen gehen. Und wie ich in der letzten Lektion erwähnt habe, jede brandneue Installation von WordPress ein Standardthema. Und das Thema ist normalerweise nach dem Jahr benannt , in dem es veröffentlicht wird. Im Moment sind wir also im Jahr 2021. Das aktive Team bei jeder Neuinstallation von WordPress ist 2021. Und wir haben diese anderen beiden, 2019 und 2020. Wir möchten „Neu hinzufügen“ sagen. Und das Thema, das wir für diese Klasse und den PMI für die meisten Projekte empfehlen möchten , ist Astra. Für den Fall, dass Sie Astra hier nicht sehen können, können Sie Astra in diese Suchleiste eingeben, Astra. Lass mich einfach richtig tippen. Astra. Und da ist es. Und wir können weitermachen und es installieren oder fahren. Jetzt wo es installiert ist, lassen Sie uns aktivieren. Und jetzt ist Astra unser aktives Thema. Und so installiert man ein WordPress-Theme. Und ich möchte mir nur einen Moment Zeit nehmen und auf Themendetails klicken , damit wir sehen können, warum Astra ein großartiges Team ist und warum ich es jedem empfehle , der eine Website auf WordPress erstellen möchte. Wenn Sie diese Beschreibung hier durchlesen, werden Sie sehen, warum Astra heute eines der besten WordPress-Themes auf dem Markt ist der besten WordPress-Themes und es für Sie kostenlos ist, heute zu installieren und zu verwenden. Das Gute ist, dass es ein vielseitiges WordPress-Thema handelt, da Sie es für Ihre Blogbeiträge, persönliche Portfolios, Geschäftswebsites und sogar WooCommerce-Storefronts verwenden können persönliche Portfolios, . Aber auf jeden Fall gibt es viele andere tolle WordPress-Themes. Auf jeden Fall solltest du sie dir ansehen. Ich zeige dir nur, was ich benutzt habe und weil es für mich funktioniert hat, sollte ich mehr Leuten davon erzählen. also wieder hineingehen, nachdem wir unser Theme installiert und aktiviert haben, Sie sich jetzt ansehen, was ein WordPress-Plugin ist, weil wir Elementor und andere Plug-Ins verwenden, um eine Website zu erstellen, die erweitert werden Die Leistungsfähigkeit von WordPress, während wir unser Geschäft mit digitalen Downloads aufbauen, gehe ich davon aus, dass nicht jeder, der an dieser Klasse teilnimmt , gedrängt hat. Also müssen wir von was ist ein Plugin? Mal sehen wir uns das in der nächsten Lektion an. Wir sehen uns in Kürze. 8. Was ist ein WordPress-Plugin: Zum Zeitpunkt der Aufzeichnung dieser Lektion stehen Ihnen mehr als 58.000 WordPress-Plugins zur Verfügung, die Sie auf Ihrer Website verwenden können. Aber was ist ein Plugin? Ein Pluging ist eine Anwendung oder Software von Drittanbietern , die in Ihrem WordPress CMS installiert werden kann , um Ihrer WordPress-Website neue Funktionen hinzuzufügen. Es ist wie eine kleine Software, die entwickelt wurde, um eine Verbindung zu einer größeren Software um der größeren Software Funktionen hinzuzufügen, die in diesem Fall e WordPress ist. Mit Plugins können Sie Ihrem Geschäft mit digitalen Downloads erstaunliche Funktionen hinzufügen Ihrem Geschäft mit digitalen Downloads , um Ihre Kunden besser zu bedienen. Die Tatsache, dass wir gedrückt werden, ist Open Source und seine Architektur ermöglicht Integration mit Software von Drittanbietern, ist der Hauptgrund, warum Plugins bei WordPress-Benutzern so beliebt sind . Jetzt, da Sie wissen, was ein Plugin ist, schauen wir uns an, wie Sie ein Plug-In installieren und aktivieren , indem Sie Elementor installieren und aktivieren. Das machen wir in der nächsten Lektion. Wir sehen uns in Kürze. 9. Schnelles Update Der neue Elementor: Willkommen zurück. Diese Lektion ist nun eine kurze Randnotiz oder eine kurze Aktualisierung des Elementor-Installationsprozesses. Wenn Sie an diesem Kurs im Mai 2022 und darüber hinaus teilnehmen, werden Sie feststellen, dass die Elementor-Aktivierung jetzt über einen Setup-Assistenten verfügt , der aus mehreren Schritten besteht, die Sie ausführen müssen , der aus mehreren Schritten besteht, die Sie ausführen müssen, um die grundlegenden Teile von deine Webseite. Während ich diese Klasse vor einigen Monaten erstellt habe, hatte Elementor diesen Setup-Assistenten nicht. Also möchte ich nur, dass wir den Setup-Assistenten durchgehen. Aber alles andere, was du in diesem Kurs lernst , ändert sich nicht. Es ist immer noch derselbe Prozess. Die einzige Ergänzung ist der Setup-Assistent. Wie Sie jetzt sehen können, habe ich eine brandneue Installation von WordPress und wir sind bei Version 6. Und was ich tun möchte, ist zu Plugins, Add New. So können wir Elementor hinzufügen und diesen Prozess durchlaufen. Ich suche jetzt nach Elementor-Installation. Und jetzt, wenn ich auf Aktivieren klicke werde ich zu diesem Setup-Assistenten weitergeleitet. Und wir können es zusammen durchstehen. Also hier sind wir. Ich zoome nur ein bisschen heraus damit wir mehr Details sehen können. In Ordnung, jetzt werden Sie feststellen dass das erste, was Elemental von uns verlangt ist, ein Konto zu erstellen, um das Beste aus Elementor herauszuholen. Dies sind also einige der Vorteile, die sich aus der Anmeldung für ein Konto bei Elementor ergeben. Aber die Sache ist, dass du kein Konto bei Elementor haben musst , um Elementor nutzen zu können. Also überspringe ich diesen Teil einfach. Der zweite Schritt besteht darin, das heilige Thema, das Elementor für uns gemacht hat, zu akzeptieren und fortzusetzen . Dies wurde von Elementor erstellt, aber wir verwenden das Astra-Thema, also überspringen wir einfach. Astra ist ein mächtigeres Thema. Der dritte Schritt besteht darin, unserer Website einen Namen zu geben. Während du dein WordPress installiert hast. Sie haben der Website einen Namen gegeben. Das ist der Name, der hier auftauchen wird. Dies gibt uns jedoch die Möglichkeit, den Namen in einen anderen Namen zu ändern, den wir möchten. Meine Website, und dann klicken wir auf Weiter. Und wenn Sie ein Logo für Ihre Website haben und es jetzt im Voraus hinzufügen möchten. Sie können einfach die Medienbibliothek öffnen und sie aus der Medienbibliothek auswählen oder von Ihrem Computer hochladen. Aber das werden wir jetzt nicht tun. Also behalte ich diesen Schritt einfach bei. Und natürlich können wir das Logo später hinzufügen und ich zeige Ihnen, wie das geht. Klicken wir auf „Überspringen“. Und jetzt kommen wir zum allerletzten Schritt bei dem wir zwei Möglichkeiten haben. dem Elementor-Editor können wir unsere Homepage von einer leeren Leinwand aus bearbeiten Mit dem Elementor-Editor können wir unsere Homepage von einer leeren Leinwand aus bearbeiten. Oder wir können in Hunderten von Vorlagen stöbern oder unsere eigenen Vorlagen importieren, wenn wir sie haben. Aber ich mache weiter und überspringe. Das. Wird auf die Leinwand umgeleitet, wo wir jetzt mit dem Aufbau einer Website beginnen können. Und los geht's. Also im Grunde war das alles, was ich dir zeigen wollte. Es ist ein neues Update. Es war vor ein paar Monaten nicht da. Jetzt ist es da. Aber alles andere in den kommenden Lektionen bleibt gleich. Der Prozess zum Erstellen einer Landingpage bleibt immer noch derselbe. Also, ohne weitere Zeit zu verschwenden, fahren wir mit der nächsten Lektion fort. Ich gehe zu diesem Burger-Menü und klicke auf Exit to Dashboard. Verlassen wir diese Seite. Jetzt befinden wir uns im Dashboard und können mit dem Aufbau der Website beginnen. 10. Demo – So installierst du ein WordPress-Plugin: Willkommen zurück. In der letzten Lektion haben wir gesehen, was für ein Plugging-Iz ist. Jetzt schauen wir uns an, wie man ein WordPress-Plugin installiert und aktiviert. Da wir also Elementor als Seitenersteller verwenden werden, installieren wir Elementor. Also gehe ich weiter und klicke auf Plug-In für Anfänger wird zu den geringsten Plugins weitergeleitet , die wir derzeit haben. Und da dies eine brandneue Installation von WordPress ist , muss ich hier Standard-Plugins verwenden, indem ich sie auswähle. Sie dann in diesem Dropdown-Menü Löschen aus und wenden Sie sich an. Alles klar, also sind wir sie losgeworden. Und ich möchte diese astrale Benachrichtigung auch hier loswerden . Also lasst uns das schließen und jetzt haben wir eine saubere Weste. Klicken wir auf Neu hinzufügen, damit wir zum WordPress-Plugins-Repository gehen können . Und hier drin möchte ich nach Elementor suchen. Elementor. In Ordnung, also sollte es das erste Ergebnis sein, genau hier, und es ist von elementary.com. Und Sie werden feststellen , dass es hier viele andere Plug-Ins , die den Namen Elementor enthalten. Und dies sind Plugins, die von Plugin-Entwicklern von Drittanbietern entwickelt wurden , da Elementor selbst ein Open-Source-Projekt ist. Das bedeutet, dass Sie die Leistungsfähigkeit des Plugins genauso erweitern können , wie Elementar erstellt wurde, um die Leistungsfähigkeit von WordPress zu erweitern , da WordPress Open Source ist. Also haben diese Leute hier Plug-Ins, Widgets und Elemente erstellt, die elementor hinzugefügt werden können und Ihren Designprozess Reacher machen. Also klicke ich weiter und klicke auf Jetzt installieren. Überschreiben, dann aktiviere ich. Und jetzt ist es aktiv. Und so installiert und aktiviert man ein WordPress-Plugging. in der nächsten Lektion Lassen Sie uns in der nächsten Lektion einen schnellen Überblick über den elementaren Arbeitsbereich haben , damit Sie sich mit den Tools und Funktionen vertraut machen können , mit denen Sie arbeiten, damit Sie sich beim Erstellen wohl fühlen das Geschäft mit digitalen Downloads. Wir sehen uns in Kürze. 11. Übersicht über den Elementor: Willkommen zurück und willkommen zu dieser Lektion. In der letzten Lektion haben wir gesehen, wie man ein WordPress-Plugin installiert und aktiviert. Wir haben Elementor installiert und weil wir elemental verwenden werden, um Webseiten zu erstellen, lassen Sie uns einen schnellen Überblick über den elementaren Arbeitsbereich haben , damit wir uns damit vertraut machen können. wir also noch mehr Zeit verbringen, gehen wir in die Seiten und fügen neue hinzu. Aber bevor wir mu hinzufügen, sagen wir einfach Seiten. Klicken Sie also auf Seiten. Und da es sich um eine Neuinstallation von WordPress handelt, haben wir diese beiden Standardseiten. Ich möchte sie löschen, also wähle ich beide aus. in diesem Dropdown-Menü Wechseln Sie in diesem Dropdown-Menü in den Papierkorb und wenden Sie es dann an. Lassen Sie uns nun eine brandneue Seite erstellen, damit wir uns in einem Mentor öffnen und eine Runde machen können. Geben wir unserer Seite einen Namen. Nennen wir es die Homepage. Nach Hause. Und ganz rechts auf dem Bildschirm werden Sie feststellen, dass wir diese Einstellungen genau hier haben . Unter Einstellungen. Wechseln Sie zur Vorlage und wählen Sie Elementor volle Breite aus. Kommen Sie und geben Sie ihm einen Namen. Lassen Sie uns das also veröffentlichen. Gehen wir hinein mit Elementor bearbeiten. Hier befinden wir uns also im vorderen Ende der Seite, die wir gerade erstellt haben. Und das ist der elementare Arbeitsbereich. Wann immer Sie eine Webseite oder einen Header erstellen. So wird der elementare Arbeitsbereich aussehen. Genau hier. Dies ist unsere Seite und zieht Elemente und Tools von der linken Seite auf unsere Seite und alle Änderungen, die wir hier vornehmen, wir können sehen, dass sie in Echtzeit wirksam werden und können klicken Sie auf Änderungen vorschauen und sehen Sie die Webseite ohne diese Einstellungen ohne diese Blöcke an. Also werden wir das sehen können. Jetzt beginnend von oben rechts, haben wir dieses Burger-Menü. Wenn Sie darauf klicken, haben wir einige allgemeine Einstellungen für die Webseite auf der Website, werden aber vorerst nicht tief darauf eingehen. Wisse nur, dass wir ein paar Einstellungen haben. Und bevor wir genau hier zu diesem Symbol kommen, in diesem mittleren Bereich werden wir in diesem mittleren Bereich die verschiedenen Elemente auf den Bereich ziehen und ablegen, um die Webseite zu erstellen. Also, wenn ich dieses grundlegende Panel genau dort zusammenklappen dieses grundlegende Panel genau und dann das Pro-Panel zusammenklappen könnte. Lasst uns alle Panels zusammenbrechen. Elementar stellt diese Panels und in den Panels verschachtelt sind die verschiedenen Elemente, die wir ziehen können , um unsere Webseiten zu erstellen. Wenn ich zum Beispiel dieses Bildelement ziehe und dort hineinlege, haben wir jetzt ein Bildelement und Sie werden feststellen , dass sich dieser Bereich geändert hat, weil das aktive Element, das derzeit ausgewählt ist Die Seite hier ist das Bild und deshalb heißt es Bild bearbeiten hier oben. Dies sind die Einstellungen, die wir ändern können, um das Aussehen des Bildes zu ändern. Und es gibt mehr Panels , um die Einstellungen für das Bild zu ändern. Lassen Sie mich das also löschen. Ziehen wir etwas anderes hier rein, wie den Texteditor. Und jetzt genau hier sind es die Texteditor-Einstellungen, und hier oben steht der Texteditor. Welches Element hier aktiv ausgewählt wird , ist das, das genau hier auftaucht. Und Sie können die verschiedenen Einstellungen für das Element konfigurieren . Und da wir nun ein aktives Element und seine Einstellungen haben , die hier angezeigt werden, was wäre, wenn wir der Seite weitere Elemente hinzufügen wollten? Wir können die Elemente nicht sehen. Alles, was wir tun müssen, ist hier oben auf dieses kleine Symbol zu klicken und das wird die Elemente wieder aufdecken. So kollabiert, dass wir jetzt gesehen haben, dass das grundlegende Panel kostenlose Elemente enthält, die die meisten Websites benötigen. Schaltflächen, Text, Bilder, Videos, Teiler. Lasst uns das zusammenbrechen. Wenn wir in das Pro-Panel gehen, werden Sie feststellen, dass wir Pro-Elemente haben. Wir können diese Elemente verwenden, es sei denn, wir haben elemental Pro. Wenn wir also versuchen, die Elemente dort hineinzuziehen, verhindert uns dieses Pop-up und sagt Wir brauchen die Pro-Version. Lassen Sie mich das also schließen und das Pro-Panel zusammenklappen, das allgemeine Panel erweitern. Wir haben hier mehr kostenlose Sachen, Wir haben hier mehr kostenlose Sachen damit wir ein Testimonial dort hinein ziehen und ablegen können. Lassen Sie mich das einfach schließen, dann ist dies im Grunde genommen der Teil des Elementars mit dem wir die meiste Zeit interagieren werden, weil wir Elemente ziehen und dann ihre Einstellungen ändern. Dann das Nächste hier in der Fußzeile, wir haben den Update-Button. Während wir Änderungen an der Website vornehmen. Beispiel: Lassen Sie mich einen Knopf dorthin ziehen. Wenn Sie die bisher vorgenommenen Änderungen speichern möchten , müssen wir auf Aktualisieren klicken. Und jetzt wurden unsere Einstellungen gespeichert. Wenn wir diesen Bereich verlassen, wenn wir zurückkommen, können wir immer noch von dort fortfahren, wo wir erreicht haben um die Änderungen ohne diesen Einstellungsblock zu sehen. Fahren Sie fort und klicken Sie auf Änderungen vorschauen. Und es öffnet die Seite, die wir erstellen, und wir können sehen, wie es aussieht. Wir haben auch das Responsive-Modus-Symbol genau hier. Wenn es an der Zeit ist, die Webseite für verschiedene Bildschirmgrößen anzusprechen, können wir auf diesen Responsive-Modus klicken. Es wird diesen Balken hier oben aufrufen, der Haltepunkte hat. Und genau hier haben wir die Gerätegrößen, wir haben das Tablet und den mobilen Bildschirm. Und in der Klasse können Sie dieses Symbol und die Einstellungen für den Responsive-Modus verwenden dieses Symbol und die Einstellungen für den Responsive-Modus , um sicherzustellen, dass unsere Website auf allen Bildschirmgrößen großartig aussieht. Lass mich von dort aussteigen. Ich klicke darauf, um die Leiste loszuwerden. Als nächstes haben wir das Geschichtssymbol genau hier. Wenn wir darauf klicken, sehen wir jeden einzelnen Schritt, den wir gemacht haben, seit wir mit der Bearbeitung der Seite begonnen haben, und wir können zu einem bestimmten Zeitpunkt zurückkehren. Sie zum Beispiel zu dem Zeitpunkt zurück , an dem wir das Bild hinzugefügt haben. Wenn Sie also darauf klicken, dass alles andere, was nach dem Hinzufügen des Bildes entstanden ist, jetzt rückgängig gemacht wird. Dies ist also eine großartige Funktion in dem Sinne, dass Sie, wenn Sie Änderungen vorgenommen haben und Ihnen nicht gefallen, wie die Dinge aussehen, zu den Einstellungen zurückkehren können, die Sie vor einem Moment hatten und besser aussahen. Dann haben wir den Navigator hier. Wenn Sie also darauf klicken, wird diese Art von Gliederung angezeigt und Sie können Ihre Website aus der Vogelperspektive sehen. Wenn wir also viele Elemente haben, ganz nach unten, und Sie wollen eine Vorstellung davon haben, wo Sie sind, aus der Vogelperspektive , wo Sie sind. Dieser Navigator wird uns helfen. Also lasst uns das einfach ein paar Mal duplizieren . Dupliziere das. Klicken Sie mit der rechten Maustaste darauf, dass es Jetzt haben wir drei Abschnitte und wenn wir sie erweitern, hat jeder Abschnitt eine Spalte, diese Spalte, die ein Bild enthält. Und auf diese Weise können wir schnell zu verschiedenen Abschnitten springen schnell zu verschiedenen Abschnitten diese spezifischen Abschnitte bearbeiten. Hier haben wir mehr Einstellungen zu dieser speziellen Webseite. Und wir werden sehen, wie man all diese Einstellungen benutzt. Wenn ich also von hier aussteigen könnte, lass mich diese löschen. Lass mich das löschen. Und das ist nur ein kurzer Überblick über Elementor. Natürlich werden wir verstehen, wie wir die verschiedenen Tools und Panels hier verwenden können, während wir unsere Seiten erstellen . Also. Das war nur dazu gedacht, Sie mit dem Arbeitsbereich vertraut zu machen, mit dem Sie mit mehr Zeit interagieren werden . Es ist jetzt an der Zeit, mit dem Aufbau ihrer Zielseite für digitale Downloads zu beginnen . Wir sehen uns in der nächsten Lektion. 12. Erstellen der Web-Seiten: Willkommen zurück. In den vorherigen Lektionen haben wir uns beide CMS angeschaut, was wir in der Funktionsweise von WordPress sind. Mit diesem ziemlich soliden Verständnis dieser Konzepte ist es an der Zeit, uns die Hände schmutzig zu machen. Sam, um mit dem Aufbau unserer Website zu beginnen. Ohne mehr Zeit zu verschwenden, gehen wir in die Seiten. Und da es sich um eine brandneue Installation von WordPress handelt, habe ich noch keine Webseiten erstellt, also füge ich neue hinzu. Das wird also unsere Homepage sein. Also klicke ich auf „Veröffentlichen“ oder fahre in Jetzt ist es veröffentlicht. Wir können die Seite anzeigen, aber ich möchte nur am wenigsten in unsere Seiten zurückkehren und den Rest der Seiten erstellen, dann können wir sie beim Erstellen ansehen. Wenn ich dorthin zurückgehe, sage ich Add New, damit wir noch ein paar weitere erstellen können. Ich nenne das einfach einen Download. Hier zeigen wir alle unsere digitalen Produkte an und sie werden veröffentlicht. Ich wiederhole es noch zwei Mal für die Blog-Seite und die Kontaktseite, ich füge neu hinzu. Und das ist die veröffentlichte Blog-Seite, die veröffentlicht wurde. Und schließlich erstellen wir die Kontaktseite und veröffentlichen diese Überschreibung. Also lasst uns wieder hier rein gehen. Und jetzt haben wir vier Webseiten, die bereit sind, mit Inhalten gefüllt zu werden. Lassen Sie uns weitermachen und unser Navigationsmenü erstellen. Und wir verwenden diese Webseiten als Menüpunkte. Menüpunkte wie diese. Lassen Sie uns also ein brandneues WordPress-Menü erstellen. In der nächsten Lektion sehen wir uns in Kürze. 13. Gestalte ein a: Willkommen zurück. In der vorherigen Lektion haben wir unsere Websites und Webseiten erstellt. Jetzt ist es an der Zeit, unser Website-Navigationsmenü zu erstellen. Das Menü, das oben stehen wird, so. Und so werden wir unsere Webseiten als Menüpunkte verwenden. Also gehen Sie in das Erscheinungsbild Menüs. Das erste, was Sie bemerken werden, ist, dass diese unten Ihr erstes Menü erstellen lassen, da wir noch kein Menü haben. So können wir unserer Speisekarte einen Namen geben. Und machen wir es zu unserem Hauptmenü. Dann klicke ich auf „Menü erstellen“ oder fahre. Also ist unsere Speisekarte jetzt erstellt. Und wie Sie hier sehen können, können wir Menüelemente aus der linken Spalte hinzufügen. Diese Kolumne hier. Und wenn ich diesen Seitenbereich ausblende, werden Sie feststellen, dass wir auch Beiträge, benutzerdefinierte Links und Kategorien haben . Dies sind also alles verschiedene Arten von Inhalten, die Sie als Menüpunkte in Ihrem Menü verwenden können. Aber wir möchten unsere Webseiten als Menüpunkte verwenden, die von uns erstellten Webseiten. Also wähle ich sie alle aus. Und dann füge ich zum Menü hinzu. Und jetzt wurden sie zu unserer Speisekarte hinzugefügt. Lassen Sie mich dieses Home-Element einfach ziehen, um die ersten Downloads zu sein , und dann Blog-Kontakt der letzte Punkt in unserem Navigationsmenü. Ich speichere das Menü. Und jetzt wird unser Menü gespeichert und aktualisiert. Das nächste, was wir tun wollen, jetzt, da wir unser Navigationsmenü haben ist es im Frontend auf der eigentlichen Website so gestaltet , dass die Leute es genau so sehen und damit interagieren können. Also lasst uns das in der nächsten Lektion machen. Wir sehen uns in Kürze. 14. Gestalte die navbar mit Elementor: Willkommen zu dieser Lektion. Um die Navbar zu entwerfen, müssen wir ein anderes Plugin installieren , das eine Erweiterung von Elementor ist. Und es heißt Header Footer Builder-Plug-In für Elementor. Also lass uns reingehen. Plugins, Neues hinzufügen. Gehen wir also fort und geben Sie Header Footer Builder ein. Und hier haben wir es. Installieren wir also Elementor Header- oder Footer-Builder mit Brainstormforce. Ja, also lasst uns weitermachen und es aktivieren. Und jetzt ist es aktiv. Um darauf zuzugreifen und es zu benutzen, gehen wir unter Aussehen. Und Sie werden feststellen, dass es jetzt einer der Menüpunkte hier ist. Klicken wir also auf Elementor, Kopf- und Fußzeilengenerator. Und sobald wir unsere Kopf- und Fußzeilen erstellt haben, wird es hier aufgeführt, aber im Moment haben wir keine. Sagen wir also „Neu hinzufügen“. Und ich möchte das überspringen. Alles klar, also geben wir unserer Navbar einen Namen. Also jetzt Bar, das wäre ein netter Name. Und unter Art der Vorlage sagen wir, es ist ein Header. Und sagen wir, zeige auf der gesamten Website an. Und nur für den Fall, dass Sie Leute unter sich haben, sind Sie der Anzeigengemein und Sie haben auch Leute, die auf der Website arbeiten. Sie können ihnen verschiedene Rollen geben. Sie können entscheiden, wer diese Navbar bearbeiten kann und wer nicht bearbeiten kann. Sagen wir also, dass alle erlaubt sind. Und dann ganz rechts hier unter Vorlage, Wählen wir Elementor volle Breite aus, da wir möchten, dass die Navigationsleiste ganz von links nach rechts auf dem Bildschirm läuft . Und unter Astro-Einstellungen Sidebar. Wählen wir keine Seitenleiste aus, da wir keine Seitenleisten wollen. Für das Inhaltslayout. Sagen wir in voller Breite, Schrägstrich gestreckt. Und lassen Sie uns die primäre Kopfzeile, die mobile Kopfzeile, den Titel und die Fußzeile deaktivieren , da wir die standardmäßigen Astra-Kopf- und Fußzeilen nicht verwenden möchten . Wir wollen unsere eigenen bauen, was wir gerade versuchen. Sagen wir mit diesen Einstellungen, sagen wir Veröffentlichen. Und dann sagen wir „Edit with Elementor“. So können wir jetzt zum Frontend gehen und beginnen, die Navbar visuell zu bauen. Also hier sind wir im Frontend. Wir möchten die Navigationsleiste optisch gestalten. Also klicke ich auf den Plus-Button und wähle hier einen dreispaltigen Abschnitt aus. Die dreifache Spalte hier wird so sein , dass wir in dieser Spalte das Logo haben. Lassen Sie mich also einfach ein Bildelement hinzufügen, auf das Pluszeichen klicken und dann ein Bildelement dorthin ziehen. Und ich klicke hier rein, damit wir das Logo-Bild auswählen können. Und da ich noch keine Bilder hochgeladen habe, müssen wir hineingehen, Dateien hochladen und Dateien auswählen. Also bereite ich diesen Ordner namens Project Assets und du findest ihn in der folgenden Beschreibung. Es hat alles, was wir für dieses Projekt benötigen , einschließlich des Logos. Also hier haben wir Logos. Lassen Sie mich einfach ziehen, schnappen Sie sich die beiden Logos. Einer ist so, als wäre einer dunkel weil wir eine für die Fußzeile brauchen, aber für die Kopfflächen, was wir verwenden. Wählen Sie es also aus, legen Sie Medien ein. Und jetzt sieht das Logo großartig aus. Also lass mich das einfach ziehen, um die Größe ein wenig zu vergrößern. Und es sieht gut aus. Als Nächstes gehe ich hier zu dieser Spalte und klicke auf das Pluszeichen. Und hier drin tippe ich nav. Und wir haben diese Nav-Optionen hier. Derjenige, an dem wir interessiert sind, ist die HF Leiter der Lebensmittel- oder Baumeister Nav Bar. Lassen Sie mich es also in diese Spalte ziehen. Und in dem Moment, in dem Sie es dort ablegen, die vier Menüpunkte, die wir zuvor erstellt haben , also die neu erstellten Webseiten, hier oben angezeigt. Ich möchte sehr schnell etwas zeigen. Lassen Sie mich also einfach darauf klicken und das Dashboard beenden. Und Sie werden sich erinnern, dass wir Erscheinungsbild-Menüs durchgegangen sind. Und wir haben dieses Menü erstellt und diese vier Menüpunkte zum Menü hinzugefügt diese vier Menüpunkte zum und es zu unserem Hauptmenü gemacht. Gehen Sie jetzt wieder in den Elementar-Header-Fußzeilengenerator und klicken Sie in unserer Navigationsleiste auf Mit Elementor bearbeiten. Das ist das gleiche Menü , das wir hier sehen. Also lass mich das einfach auswählen. Denken Sie daran, dass wir das Menü anrufen, und das haben wir hier. Also lasst uns den Napa in der nächsten Lektion stylen, wir sehen uns in Kürze. 15. Stil der Elementor: Jetzt ist es an der Zeit, unsere Navbar und speziell dieses Menü zu stylen . Denn wenn wir zum Beispiel den Mauszeiger über die Menüpunkte bewegen, werden Sie feststellen, dass es Grün gibt, aber unser Thema ist gelb und schwarz, also müssen wir etwas dagegen unternehmen. also das Menü auswähle, um es hier aktiv zu machen, gehe ich in den Stil. Und wenn ich dieses Hauptmenü für eine Sekunde reduzieren könnte, beachten Sie, dass wir drei Hauptpunkte haben, drei Hauptmenüs. Und wenn wir das Hauptmenü erweitern, können wir die Typografie auswählen. Lassen Sie mich einfach nach oben scrollen und lassen Sie uns die Schriftart zu Montserrat ändern. Ich mag Montserrat. Geben Sie ein. Und ich denke, es sieht besser aus. Ich klicke irgendwo außerhalb des Tellerrandes, um es los zu werden. Irgendwo da. Und beim Schweben werden Sie feststellen, dass die Farbe hier grün ist, die Textfarbe grün ist. Wir wollen das in dieses Gelb ändern. Also lass mich einfach sehen, ob ich hier ein schönes Gelb schnappen kann. Da haben wir es. Also müssen wir handeln. Es muss auch diese gelbe Farbe haben. Also wähle ich dieses Gelb aus und kopiere es. Dann geh aktiv hinein und füge es dort ein. Jetzt ist es also gelb beim Schweben. Und wenn es aktiv ist, ist es auch gelb. Lassen Sie mich das also aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Da haben wir es also. Klicken wir also auf „Home“. Und jetzt, da es aktiv ist, wie Sie sehen können, ist es gelb. So erstellen Sie also die Navigationsleiste. Etwas später, wenn wir die Suchfunktion für die Website erstellen , fügen wir die Suchleiste gleich hier hinzu, aber machen Sie sich darüber vorerst keine Sorgen. Als Nächstes möchten wir den Ordner so gestalten , dass Tau nach Tau den Hauptinhalt der Webseite erstellen kann . Also gehe ich hier rein, lass mich diese Navigationsleiste aktualisieren, damit wir die Änderungen sagen können. Lassen Sie uns also in der nächsten Lektion einen Ordner erstellen, wir sehen uns in Kürze. Gerade 16. Gestalte die Footer: Willkommen zurück. Also lasst uns weitermachen. Wir haben bereits die Navbar-Stempel erstellt um den Ordner zu erstellen, um das Foto zu erstellen, wird genau das Gleiche tun , was wir mit der Navigationsleiste gemacht haben. Jetzt, da wir unsere Navbar gespeichert haben, klicke ich auf dieses Burger-Menü und auf Beenden zum Dashboard. Und ich gehe und erschiene Elementor Header und setze noch einmal einen Builder. Und natürlich sehen Sie unsere Navigationsleiste jetzt hier aufgelistet. Also sage ich „Neues hinzufügen“. Diesmal handelt es sich um einen Ordnertyp von Vorlagenkurs für die Anzeige auf der gesamten Website. Wir können es alle Rollen bearbeiten. Jeder, jede Person in irgendeiner Reihe. Die Vorlage ist Elementor in voller Breite, hier keine Seitenleiste. Inhaltslayout für Weizen gestreckt. Dann deaktivieren wir diese Standardeinstellungen. Bitte, die Abschnitte der Umfrage hier. Und dann sagen wir mit Elementor bearbeiten oder reiten. Und jetzt, da wir den Ordner bearbeiten, ist die Navbar jetzt natürlich nicht editierbar da sie angezeigt wird, weil sie Teil der Webseite ist. Aber wir sind nicht in dem Bereich, in dem wir die Napa bearbeiten, also können wir diese nicht auswählen und anfangen, sie herumzuziehen, das können Sie einfach nicht tun. Nur der Ordner ist jetzt editierbar. Und so klicke ich hier auf das Pluszeichen und füge hinzu, sagen wir, füge das vorerst hinzu. Und ich ziehe diese zu schlechten Punkte irgendwo nach oben. Klicken Sie auf dieses Pluszeichen und fügen wir hier unser Logo hinzu. Darauf klicke ich. Und dieses Mal möchte ich diese Lichter auswählen, Logo, Medien einlegen. Und natürlich kann man jetzt die erste Hälfte des Logos nicht sehen , weil es breit ist. Deshalb möchten wir diesem Ordner eine Hintergrundfarbe geben. Klicken Sie also genau hier auf den mittleren Abschnitt. Und gehe zu Stil Hintergrund, Hintergrundtyp. Klicken Sie hier auf dieses Feld und geben Sie ihm eine dunkle Farbe. Vielleicht irgendwo dort eine Farbe, die Dunkelgrau passt. Das ist kein reines Schwarz. Natürlich können Sie ihm jede gewünschte Farbe geben. Jetzt, da wir das haben, lassen Sie uns diesem Logo oben und unten etwas Platz geben . Während dies noch ausgewählt ist, ich einfach mit der rechten Maustaste und bearbeite den Abschnitt erneut. Ich gehe zu Advanced und gehe zum Padding, entferne diese Verknüpfung und gebe ihm eine obere Polsterung von 50 und eine untere Polsterung oder 50 000, oder? Jetzt haben wir oben und unten etwas schönes Zimmer . Lassen Sie uns als Nächstes etwas Text hinzufügen , einen beschreibenden Text. Also ziehe ich diese Bettwäsche da rein. Und sagen wir so etwas wie kostenlose Downloads für, Ordnung, Und während wir noch hier sind, gehen wir zum Stil der Textfarbe. Ziehen wir das den ganzen Weg dorthin. Klicken Sie auf eine beliebige Stelle außerhalb dieses Kastens, um es loszuwerden , und klicken Sie auf Topographie, damit wir die Schriftfamilie so in Montserrat ändern können . Und ich möchte die Typografie ändern. Gewicht ändert das Schriftgewicht auf etwa achthundert. Achthundert. Sieht gut aus. Und gehen wir zurück zum Inhalt. Und lass es uns so in die Mitte legen . Ankommen. Als Nächstes. Klicken wir hier auf dieses winzige Symbol , um die Elemente aufzurufen. Und ziehen wir einen Texteditor dort hinein. Und während es noch aktiv ist, gehen wir in den Stil ändern Sie diese Farbe in Weiß. Und lass es uns so in die Mitte legen. Denken Sie jetzt daran, vielleicht fügen wir hier ein paar Social-Media-Symbole hinzu. Also lasst uns hinzufügen, klicken Sie darauf. Und dann gib hier drin Social Media ein. Ziehen wir das da rein. Großartig. Aber jetzt gibt es zwei große, reduzieren wir die Größe, solange sie noch ausgewählt ist. Gehen wir zur Stilgröße. Ich glaube, ich mag diesen Punkt genau dort und ich will, ich möchte ihn nach links schieben. Gehen wir also zum Inhalt und schieben ihn so nach links. Aktualisiere das. Und auf der rechten Seite fügen wir vielleicht eine Liste von Links hinzu. Also gehe ich hier rein und klicke darauf, um die Elemente wieder aufzurufen. Und hier drin tippe ich am wenigsten. Ja, sagen wir, ich kann eine Liste auflisten und ziehen wir die Icon-Liste dort hinein. Und standardmäßig hat es drei Gegenstände. Beginnen wir also mit dem ersten Artikel hier und benennen Sie es um, dass es sich eine Kategorie digitaler Produkte wie Logos handelt. Stimmt's? Nummer zwei, sagen wir etwas Lüge. Zeitschriften. Nehmen wir an, wir verkaufen auch Elementor-Vorlagen und können hier weiterhin weitere Elemente hinzufügen, da wir bitte etwas wie Farbverläufe sagen. Aktualisiere das. Und jetzt gehen wir hier rein und stylet. Lasst uns die Texte unter Stil zuerst buchstabieren. Sagen wir jetzt diese Farbe zu Weiß. Lasst uns das für eine Sekunde zusammenbrechen. Gehe ins Symbol und ändere die Farbe in gelb. Wir haben es noch in meiner Zwischenablage kopiert. Sie können aber einfach manuell auswählen. Aber Sie können einfach manuell anpassen. Da haben wir es also. Es ist gelb im Normalzustand, aber beim Schweben wollen wir, dass es weiß ist. So weiter wechselt es jedoch zu einem weißen Kragen. Sagen wir auf Hoover, die Texte, die du so gelb änderst. Also auf dem Mauszeiger wechselt es zu diesem Gelb. Großartig. Während es noch ausgewählt ist, richten wir es so nach rechts aus. Und lasst uns das bis zum Ende ziehen. Und lasst uns das aktualisieren. Vorschau der Änderungen. Perfekt. Dies ist eine sehr einfache Fußzeile. Natürlich können wir es viel besser machen, und das liegt wirklich an dir. Der Hauptpunkt hier ist zu verstehen, wie man das System zusammenstellt, aber alles verfeinert und aber alles verfeinert und alles super aussieht. In deiner Kreativität liegt alles an dir. Aber natürlich können wir das ein wenig verbessern. Ich möchte dies vorantreiben, weil ich sehe diese Texte diesem Logo zu nahe zu kommen scheinen. Ich möchte das zuerst weiter nach links ziehen , so nach rechts. Und zieh das ein bisschen raus. Aber ich möchte diese Spalte hier gezielt auswählen. Wenn wir den erweiterten Rand erreichen, entfernen wir diese Marge. Und für den linken Rand erhöhen wir es auf etwas wie werfen, lass uns das versuchen. Update, diese Vorschau ändert sich. Ja, ich denke, es sieht gerade viel besser aus, zentralisiert und alles scheint richtig positioniert zu sein. So erstellen Sie unseren Ordner und unsere Napa, als Nächstes möchten wir unsere Hauptinhalte erstellen, wie auf diesen Seiten. Und wir wollen mit der Helden-Sektion beginnen. Der Heldenabschnitt E, der Bereich, den Sie sehen, sobald Sie eine Zielseite wie diese öffnen, er hat etwas Text und Bild, hat unsere Suchleiste nicht im Heldenbereich. Lassen Sie uns also in der nächsten Lektion den Heldenbereich erstellen , wir sehen uns in Kürze. 17. Gestalte den the: Nun, willkommen zurück. Jetzt, da wir unsere Navigationsleiste und Fußzeile bereit haben, ist es an der Zeit, den Hauptinhalt der Webseiten zu erstellen , und wir beginnen mit der Homepage. Also gehe ich nicht wieder zu diesem Burger-Menü und Beende das Dashboard. Und lasst uns in die Seiten gehen. Und jetzt, wie wir bereits erwähnt haben, wollen wir mit der Homepage beginnen, also editieren. Alles klar, also springe rüber auf die rechte Seite, hier unter Einstellungen, gehe zur Vorlage. Und wählen wir Elementor volle Breite aus. Und dann klicken wir auf das Astra-Symbol hier , um einige Astro-Einstellungen zu ändern. Und genau wie wir es mit der Navigationsleiste und der Fußzeile gemacht haben, wollen wir keine Seitenleiste sagen. Inhaltslayout Elementor, volle Breite, Inhaltslayout für die Breite gestreckt. Und wir möchten nicht die Standardeinstellungen, primären Header und all diese anderen Elemente verwenden , die mit Astra geliefert werden. Wir wollen unser eigenes mit Elementor erschaffen. Deswegen deaktivieren wir all diese. Und sagen wir Update. Und jetzt, da es aktualisiert wurde, wir weiter und klicken Sie auf Bearbeiten mit Elementor, da wir es visuell an der Grenze gestalten werden . Perfekt. Jetzt werden Sie feststellen, dass wir Platz zwischen Napa und Ordner haben. Und wir können damit beginnen, die Seite mit den verschiedenen Arten von Elementen zu füllen , die wir wollen. Und wenn wir gerade zu einer dieser Referenz-Websites wechseln , beginnen wir mit der Helden-Sektion, die mich einfach für eine Sekunde auf die Homepage von Creative Market gehen lässt. Sie werden also hier auf Creative Market feststellen, dass sie diesen schönen Text haben , der zusammenfasst, worum es bei der ganzen Seite und im gesamten Geschäft geht. Und sie haben ein Bild als Beispiel für einen Teil des Inhalts, den Sie auf der Website finden können. Lassen Sie uns diese Helden-Sektion also sehr schnell erstellen. Und es sieht ziemlich genauso aus wie die grafische Fluss-Leihseite Hero-Bereich. also wieder auf unsere Projektseite gehe, sage ich „Neu hinzufügen“. Und natürlich brauchen wir zwei Spalten. In dieser Spalte. Lasst uns weitermachen und hinzufügen. Klicken wir genau dort auf das Plus-Symbol und ziehen eine Textüberschrift dort hinein. Sagen wir so etwas wie unbegrenzte Downloads. So. Gehen wir in den Stil und ändern die Farbe genau dort auf etwas wie 40. 40. 40. Jep. Und obwohl es noch ausgewählt ist, lassen Sie uns die Schriftfamilie in Montserrat umstellen. Und ich möchte ihm ein Schriftgewicht von 800 geben. Und ich möchte vergrößern, lasst uns die Größe, die Schriftgröße bis zu diesem Zeitpunkt erhöhen . Klicken wir als Nächstes auf dieses Symbol, um die Elemente aufzurufen und einen Texteditor dort hinein zu ziehen. Und natürlich können Sie diese Texte so anpassen , dass sie lesen, was Sie sagen möchten. Also richtig, also lasst mich den letzten Satz einfach dort entfernen. Aktualisiere das. Lass uns weitermachen und einen Button hinzufügen. Also ziehe ich einen Knopf direkt unter diesen Text. Und hier drin klicke ich auf diesen Plus-Button, um ein Bildelement hinzuzufügen. hier hineinklicken, suchen einem schönen Bild, das Sie als Bild unseres Heldenabschnitts haben können. Also denke ich, dass wir mit so etwas mitmachen können. Öffne diese Einlegemedien. Und es fängt schon an, Gestalt anzunehmen. Aber genau wie bei der Napa, lassen Sie uns natürlich diese grüne Farbe ändern, lassen Sie uns natürlich diese grüne Farbe ändern unserem Website-Thema zu passen. Wählen Sie also diesen Schaltflächenstil aus. Ich gehe unter dem Knopf zur Farbe. Farbe. Und lass uns das 404040 geben. Und besitze Hoover, wer wollte das sein? Gelb? Ich habe es immer noch in meiner Zwischenablage. Also weiter, wie auch immer es gelb ist, normaler Zustand, es ist schwarz. Aber jetzt wollen wir ändern, was die Texte sagen. Während es noch aktiv ist, gehen wir in den Inhalt und wählen hier den Textbereich und sagen Explode-Downloads. Jap. Und wir können direkt davor ein Icon hinzufügen. Also war ich immer noch unter Content-Button. Wählen wir die Icon-Bibliothek aus. Und sagen wir: Ja, so etwas. Ich glaube, das gefällt mir. Füge das ein. Und jetzt haben wir dieses schöne Icon direkt vor dem Text. Und mir ist aufgefallen, dass wir den Text nicht in Montserrat geändert haben, also wähle ich den Button erneut aus. Gehen Sie in Stil, Typografie, Schriftfamilie, Montserrat für Einheitlichkeit. Einfach so. Und möchte auch die Polsterung ein wenig erhöhen. Während wir also noch unter Stil sind, scrolle ich nach unten und gehe zum Padding. Entferne diesen Link, und dadurch wird die Schaltfläche für eine Sekunde zerstört. Aber was wir tun wollen, ist ihm eine Polsterung von 45 auf der linken Seite zu geben. Das ist für 50 Jahre. 45. Und auf der rechten Seite 45. Für die Spitze. Geben wir ihm eine 20. Und der Boden auch. Richtig, jetzt haben wir rundum ein paar schöne Polsterungen , die sagen, dass das aktualisiert wird. Und lasst uns die Änderungen wieder aufbauen. Wir brauchen hier etwas Abstand über der Überschrift. Gehen wir also hier hinein und wählen Sie die Spalte selbst aus. Und unter Advanced geben wir dir die obere Polsterung. Entfernen wir den Link auf der Polsterung. Lassen Sie uns eine Top-Polsterung von 16 geben. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Großartig. Wählen wir also das Bild aus und lassen Sie uns ein paar abgerundete Ecken geben , damit es diese scharfen Kanten nicht so hat. Während es ausgewählt ist, gehe ich zum Stil des Grenzradius. Lassen Sie uns etwas wie 20 geben. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Ja, es sieht viel besser aus. Also denke ich, jetzt ist die Helden-Sektion fertig. Denken Sie daran, dass das Ziel hier nicht darin besteht , im Moment keine sehr schöne Website erstellen. Wir versuchen zu verstehen, wie man das System selbst erstellt, das es einem Kunden ermöglicht , auf die Website zu kommen erforsche die Produkte, die wir haben. Klicken Sie auf ein Produkt, öffnen Sie die Beschreibung der einzelnen Produktseite , in der alle Informationen zu diesem bestimmten Produkt enthalten und sie kaufen oder herunterladen können. Das wollen wir wirklich verstehen. Lassen Sie uns also die Produkte erstellen , die unter dem Hero-Bereich angezeigt werden. Und das machen wir in der nächsten Lektion. Also wir sehen uns in Kürze. 18. Gestalte deine Produktkategorien: Willkommen zurück. Unsere Helden-Sektion ist jetzt fertig. Verlassen Sie uns das Dashboard. Klicken Sie auf das Burger-Menü Beenden Sie das Dashboard. Und stellen wir sicher, dass wir das komplett verlassen haben , in Ordnung. Jetzt, da wir uns im Dashboard befinden, möchten wir verstehen, wie wir mit unseren Produkten arbeiten werden , während wir Fortschritte machen. Aber im Moment gehe ich davon aus, dass Sie verschiedene Arten von digitalen Produkten verkaufen werden. Wenn Sie beispielsweise Grafikdesigner sind , möchten Sie möglicherweise Logos, Fliervorlagen, Postervorlagen und Unternehmensprofilvorlage verkaufen Fliervorlagen, . Möglicherweise verkaufen Sie Webdesign-Elemente und Grafikdesign-Elemente. Dies sind also verschiedene Möglichkeiten, die verschiedenen digitalen Produkte zu kategorisieren , die Sie möglicherweise verkaufen. Wie macht man das? Denn wenn wir zum Beispiel einfach schnell in Creative Market springen könnten , kategorisieren sie ihre Produkte in Canva-Vorlagen, Produktmodelle, Instagram-Vorlagen kategorisieren sie ihre Produkte in Canva-Vorlagen, Produktmodelle, in all diesen Kategorien. Gehen wir also zurück zu unserer Seite hier, gehen wir in Beiträge ein. Ich klicke auf Beiträge. Wir erstellen unsere digitalen Produkte als Posts. Und wenn wir Fortschritte machen, werden Sie verstehen dass Sie mit WordPress verschiedene Arten von Inhalten auf verschiedene Arten von Inhalten erstellen können. Auf eine der Arten, Inhalte für Ihre Website zu erstellen , besteht darin, sie als Beitrag zu erstellen. So kann Ihr digitales Produkt als Post erstellt werden. Wenn Sie Artikel veröffentlichen, veröffentlichen Sie sie als WordPress-Posts. Sie können einen Podcast erstellen und Podcasts-Episoden als WordPress-Posts veröffentlichen. Im Moment möchten wir unsere digitalen Produkte als WordPress-Posts veröffentlichen . Und Sie werden verstehen, warum das sehr mächtig ist, denn das ermöglicht es uns den Beitrag im Front-End mit Elementor zu öffnen und ihn optisch auf eine schöne Art und Weise zu gestalten erstelle eine nette Einzelseite, das Skript zeigte eine schöne digitale Produktanzeige und all das. Bevor wir also hier digitale Produkte erstellen, möchten wir die Kategorien erstellen. Klicken Sie also auf Kategorien. Und natürlich erstelle ich meine eigenen Kategorien. Jetzt gibt es standardmäßig immer eine nicht kategorisierte Kategorie. Jeder Inhalt, der keine Kategorie hat gehört in die Kategorie nicht kategorisiert. Sie können diese Kategorie nicht löschen. Lasst uns also unsere eigenen kreieren. Also fange ich mit Logos an. Klicken Sie auf Zeitschriften eintragen. Ich sage Elementor. Nehmen wir an, dies sind die drei Produktkategorien , die ich auf dieser Website verkaufen möchte. Aber natürlich haben Sie Ihre eigenen Kategorien. Jetzt, da wir unsere Kategorien definiert haben und weitere hinzufügen können, sind wir bereit, mit der Entwicklung unserer digitalen Produkte zu beginnen. Lassen Sie uns also unsere ersten digitalen Produkte erstellen. In der nächsten Lektion sehen wir uns in Kürze. 19. Gestalte eine einzelne Produktbeschreibungsseite: Willkommen zurück. Es ist jetzt an der Zeit, Ihr allererstes digitales Produkt zu erstellen. Und wie ich in der letzten Lektion erwähnt habe, werden wir Ihre digitalen Produkte als WordPress-Posts erstellen . Um also Ihre allerersten digitalen Produkte zu erstellen, während wir noch unter Posts stehen, sagen wir „Neu hinzufügen“ oder „Richtig“, geben wir ihm einen Namen. So etwas wie ich möchte ein Produkt erstellen, das in die Kategorie Elementor geht. Denken Sie daran, dass eine der Kategorien, die wir erstellt haben, Elementor war. Also habe ich einige elementare Vorlagen , die ich bereits im Voraus vorbereitet habe. Und ich möchte zunächst Produkte für diese Kategorie erstellen . Sagen wir also Bodybuilder, Vorlagen. Vorlage. Und natürlich gehe ich wie immer zunächst in die Astro-Einstellungen und setze diese auf keine Seitenleiste. Inhaltslayout, volle Breite gestreckt, deaktivieren Sie dann diese fünf Elemente direkt dort und dann die Fußzeile. Und dann gehen wir in die Einstellungen ein, in denen Verfahren unter Vorlage die Standardwerte, Vorlagen in Elementor volle Breite ändern und dort veröffentlicht werden. Lasst uns das veröffentlichen. Und unsere Schreibweise hier ist falsch, also lassen Sie mich das einfach korrigieren. Und mit diesen Einstellungen, Lasst uns weitermachen und es im Frontend mit Elementor-Override gestalten . Also hier sind wir. Wir werden es genau hier entwerfen. Und nur um Ihnen das Äquivalent zu zeigen, was wir auf einer anderen Plattform entwerfen. Gehen wir zum Creative Market. Und lasst uns eines der Produkte öffnen. Ich klicke auf dieses Font-Bundle, um es zu öffnen. Und jetzt ist dies die einzelne Produktseite , die wir entwerfen. Wir entwerfen eine Seite allen Details zu dem bestimmten Produkt , auf das Sie geklickt haben. In der Regel finden Sie auf den meisten Websites ein Bild des Produkts selbst. Und auf der rechten Seite finden Sie normalerweise, dass Sie die Zahlungsschaltfläche und eine kurze Beschreibung dessen haben , um welche Art von Produkt es sich handelt. Und unten wahrscheinlich Beispiele dafür, was ist, wenn sie in Graphic River gehen. Öffnen wir eines der Produkte hier. Lass uns reingehen. Lassen Sie mich dieses Produkt öffnen. Das Gleiche, ein grafischer Fluss. Wir haben dieses Bild. Dann haben wir die Schaltfläche In den Einkaufswagen und die Schaltfläche Jetzt kaufen, eine kurze Beschreibung des Produkts M unten hier. Jetzt haben wir alle Beschreibungen und Links zu wichtigen Links zu diesen Produkten. Was wir also versuchen, ist das Gleiche zu erreichen. Wenn ich einfach damit beginnen könnte, eine Doppelspalte zu erstellen. Fügen wir hier ein Bildelement hinzu. Und klicken wir hier rein , um ein Bild auszuwählen. Und da wir hier kein Produktbild haben, laden wir die Produkte aus dem Ordner hoch. Denken Sie daran, dass ich erwähnt habe, dass Sie diesen Projekt-Assets-Ordner in der folgenden Beschreibung finden können . Lade es herunter. All diese Bilder findest du da drin. Und die Bilder, die ich gerade brauche, sind 12. Laden wir einfach alle Bilder , da wir sie in Zukunft verwenden werden. So. Es hat auch dieses Bild gefallen. Legen Sie Medien ein. Und so sieht es aus. Lassen Sie mich also einfach die Größe ein wenig erhöhen. Und auf dieser Seite klicke ich hier auf das Pluszeichen und ziehe. Schreiben wir zuerst die Überschrift. Und für die Überschrift geben wir dem Produkt den Namen, den wir es im Backend gegeben haben, nämlich Bodybuilder-Vorlage oder RI. Und lass uns das zu einem machen. Aktualisiere das. Also lass mich einfach darauf klicken. Sie werden feststellen, dass wir einen ganzen Weg haben, um Suche zu hassen , und dies sind Überschriften, Überschriftenstufen. Eine ist die größte Überschrift in HTML, während HCX die kleinste und am wenigsten wichtige in der Hierarchie ist , eine Faustregel ist es, auf jeder einzelnen Webseite ein H1 zu haben . Und dieser muss das Schlüsselwort für diese bestimmte Webseite haben , um in Suchmaschinen wie Google und Bing zu rangieren . Da es sich um eine Produktseite handelt, benötigen wir diese Bodybuilder-Vorlage, die Suchmaschinen mitteilt, dass es auf dieser Webseite darum geht. Und obwohl dies noch ausgewählt ist, gehe ich in den Stil, um die Farbe zu ändern. Ich gebe ihm die 40, 40, 40. Gehen wir und wechseln die Schriftfamilie zu Montserrat. Und geben wir ihm ein Schriftgewicht von 800. Ich möchte diese Spalte hier auswählen, nur damit wir oben etwas Polsterung hinzufügen und diese Bodybuilder-Vorlagenanleihen nach unten schieben können. Während die Spalte noch ausgewählt ist, gehe ich nach oben. Entfernen Sie diesen Link direkt dort und geben Sie ihm einen oberen Rand der oberen Polsterung von 50. In Ordnung, das ist also ein schöner Abstand da oben. Und jetzt klicke darauf und ziehen wir eine kurze Beschreibung hier direkt unter diesen Text. Und klicke auf das Icon hier , um die Elemente aufzurufen. Und ziehen wir einen Knopf direkt unten. Im Moment ist dies ein Platzhalter-Button, der diese Schaltfläche durch den eigentlichen Download- oder Kauf-Button ersetzt . Also lassen wir es vorerst einfach dort liegen. Dies wird also irgendwann in zukünftigen Lektionen verschwinden. Lassen Sie uns diesen Text zum Herunterladen ändern. Gib ihm ein Kapital D, aktualisiere das. Beachten Sie nun, dass das Bild und der Text zu nahe beieinander liegen, daher benötigen wir etwas Abstand zwischen diesen beiden Spalten und wählen den Abschnitt aus, der die beiden Spalten enthält. Wir wollen unter Layout, Spalten Lücke sagen , sagen wir breit, sagen wir weiter. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen oder super schreiben, es fängt jetzt an, Gestalt anzunehmen. Lassen Sie uns dieses Grün ändern, um den Rest der Website zu reimen. Wählen Sie also den Button genau dort aus. Lass uns in den Stil gehen. Geben wir ihm diese gelbe Farbe. Aktualisieren Sie das jetzt aus Gründen der Konsistenz, immer, wenn Sie hier Gelb verwenden, stellen Sie sicher, dass es das gleiche Gelb ist. Also habe ich den Code einfach irgendwo kopiert , wo du den gelben Ort platzieren möchtest, benutze denselben Code. So sieht es im Moment beim Schweben aus. Wir wollen, dass es schwarz ist. Also lasst uns in die Schwebefarbe gehen. So würden wir aussehen. Während wir noch hier sind. Gehen wir zum Padding und brechen das auf. Dann lassen Sie uns eine linke Polsterung von 45 geben. 45. Und das sind wieder 450. 45. Denk vielleicht lass uns das 15 geben. 15. Der Likey, den sie jetzt sind. Und wählen wir das Bild aus. Ich mag es, abgerundete Ecken zu haben. Also wähle ich das Bild aus, Stil zusammen und gehe den Randradius nach unten und gebe ihm einen Randradius von 20. Ja, das gefällt mir leicht. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Oder richtig, es fängt an, Gestalt anzunehmen. Wenn Ihr Unternehmen beispielsweise E-Books oder Kurse verkauft, ist dies natürlich das Bild Ihrer Kurse. Du musst es überzeugend und schön machen. Als Nächstes wollen wir hier eine Beschreibung hinzufügen . Lassen Sie uns also eine erstellen, lassen Sie es uns erneut zu einer doppelten Spalte machen, und lassen Sie uns diesen Abschnitt selbst auswählen, gehen Sie zu Erweitert, brechen Sie diesen Randlink hier auf. Und lassen Sie uns eine Top-Marge von 50 geben damit wir es von diesem anderen Abschnitt trennen können. Also geben wir ihm eine 50. Und jetzt gibt es diesen Raum zwischen ihnen. Klicken wir hier drin auf das Pluszeichen und ziehen es dort hinein. Und das möchte ich auswählen, und das möchte ich ändern. Vorlagen, dieses Schon. Das ist also die Beschreibung. Lassen Sie uns diese Farbe natürlich in die Farbe ändern, die wir aus Gründen der Konsistenz mögen, klicken Sie irgendwo dort draußen, um das loszuwerden. Und dann geh in die Topographie, font-family, ändere sie in Monterrey aus. Und geben wir ihm vielleicht diese Größe an. Ziehen wir das bis wahrscheinlich zu diesem Punkt und Sie werden in Kürze sehen warum. Wenn ich das nochmal auswähle, möchte ich ihm ein Schriftgewicht von 800 geben. Und dann direkt darunter. Lass uns weitermachen. Klicken wir darauf, um Elemente aufzurufen , und fügen wir hier eine Beschreibung hinzu. Ich kopiere das alles einfach und dupliziere es genau dort. Genau als Beispiel für Ihre Beschreibung Ihres Produkts, aber es muss detailliert sein. Lassen Sie mich das einfach aktualisieren. Das ist es, was Sie hier zur Verfügung stellen. Alles klar, das nächste, was wir tun wollen ist diesen Button zu kopieren. Kopiere das. Klicken Sie irgendwo in diesem Texteditor und fügen Sie sie ein. Lassen Sie uns das aktualisieren und eine Vorschau der Änderungen anzeigen. Scrollen wir nach unten. Das haben wir also, aber genau hier gibt es keinen Platz zwischen diesen Elementen. Vergrößern wir also diesen Abstand unten. Das ist also dieser Abschnitt. Ich wähle den Abschnitt aus, gehe zum unteren Rand und gebe ihm vielleicht etwa 90. Jetzt haben wir den Abstand von 90 Pixel am unteren Rand dieses Abschnitts erhöht , kurz bevor er auf einen Ordner trifft. Lassen Sie uns also eine Vorschau der Änderungen anzeigen. Alles klar, jetzt haben wir diese nette Lücke genau dort. Aber wir sind noch nicht fertig. Wir müssen dort noch ein paar Artikel hinzufügen. Wenn wir wahrscheinlich verwandte Artikel wie verwandte Produkte und ein paar Produktbeschreibungen hinzufügen müssen wie verwandte Produkte und . also wieder reingehe, möchte ich hier reinkommen und auf das Plus klicken, um hier anzumelden. Ich tippe Liste ein. Ziehen Sie diese Symbolliste dort hinein. Und um den Abstand zwischen diesen beiden Spalten hier zu erhöhen , wähle ich den Abschnitt selbst aus. Gehe zu Layout. Spalten Lücke breiter. Ich brauche sie sehr breit. Und jetzt stellen wir die Produktbeschreibung in Kürze zur Verfügung, zum Beispiel Dinge wie die Dateigröße, sagen wir etwas wie 2,52,5 MB JSON-Formate oder RI. Mal sehen, welche anderen Dinge wir wollen. Etwas wie? Lassen Sie uns das duplizieren, fügen wir eine weitere Beschreibung hinzu. Das könnte also eine Version sein oder etwas derartiges schreiben. Und natürlich sagen wir, dass diese Schaltflächen mit einer Website übereinstimmen. Und ich mag diese gelbe Farbe nicht. Es ist 2 cremig. Wir wollen den Button schwarz, aber gelbe eigene Schweben. Also lass uns sie umschalten. Ich möchte das Gelb kopieren, das hier im Hover-Status hineingeht , es dort einfügen und dann wieder normal gehen und das so ändern. Das ist viel besser. Lass uns das gelb lassen, und lass uns das schwarz lassen. Also wähle das wieder aus. Lass uns weitermachen und Stil sagen. Für das Icon. Lasst uns das in das Gelb ändern. Wir haben gerade kopiert. So eingefügt. Lass mich dir eine Schwebefarbe geben. Alles klar. Gehen wir zu den Texten. Gib ihm auch diesen Hover-Effekt. Jetzt mach es für Konsistenz das gleiche Gelb. Dann lasst uns die Änderungen überprüfen. Das einzelne Produkt hier nimmt Gestalt an. Wir haben ein Bild. Der Kunde kann die kurze Beschreibung dessen lesen, was Sie ihm mitteilen möchten, genau hier und kaufen. Denken Sie daran, dass wir gesagt haben , dass wir diesen Button durch die Schaltfläche „Kauf“ oder „ Jetzt kaufen“ ersetzen oder in den Warenkorb legen werden. Wenn es sich um kostenlose Produkte handelt, haben wir hier einen Download-Button. Und natürlich kann der Kunde hier weitere Details über das Produkt selbst lesen und sich einen schnellen Überblick hier einen schnellen Überblick über die wichtigen Daten zu diesem Produkt verschaffen. Und sie können es herunterladen oder noch einmal. Daher möchten wir es dem Kunden so einfach wie möglich machen , zu kaufen. Deshalb haben wir diese Knöpfe überall. Wir möchten nicht, dass sie ganz nach oben scrollen müssen , um nach dem Download-Button zu suchen. Wenn sie also zu einem bestimmten Punkt gescrollt werden, an dem sie den Download-Button nicht sehen können, benötigen Sie eine weitere Download-Schaltfläche oder per Schaltfläche. Und wir haben den Ordner. Sobald wir weitere Produkte erstellt haben, werden verwandte Produkte direkt unter diesem Download-Button haben. werden wir jetzt nicht haben. Aber so erstellt man die einzelne Produktseite. Jetzt müssen wir nur noch mehr Produkte wie diese erstellen, um Produkte auf einer Website anzuzeigen . Ich möchte also mehr digitale Produkte wie diese erstellen. Sagen wir, wie das in der nächsten Lektion geht. 20. Erstellen einer Create: Willkommen zurück. In der letzten Lektion haben wir gesehen, wie man diese einzelne Produktbeschreibungsseite entwirft . Jetzt müssen wir nur noch mehr Produkte wie diese erstellen, um Produkte auf einer Website anzuzeigen . Deshalb möchte ich im Back-End weitere digitale Produkte wie diese kreieren . also wieder hierher gehe, sage ich das Burger-Menü Exit to Dashboard. Und unser Vermächtnis komplett von hier aus. Also baut unser Körper eine Vorlage, ist fertig. Jetzt müssen wir hier nur noch viele weitere Produkte erstellen. Es wird gleich hier aufgeführt, und wir können sie im Frontend anzeigen . Lass mich einfach anklicken. Wird sie hier unter dem Heldenbereich auflisten können . Wenn ich also wieder hierher gehe, werde ich Add New sagen und den gleichen Vorgang wiederholen , den ich für die Bodybuilder-Vorlage gemacht habe. Also sage ich „Neu hinzufügen“. Und ich nenne diese Produkte so etwas wie Kellnervorlage. Ich gehe in Einstellungen, Vorlage, Elementor, volle Breite und gehe in die Astro-Einstellungen. Wieder einmal keine Sidebar. Volle Breite gestreckt. Diese, Abel , all das bis zum Titel. Und Footer veröffentlichte das dann. Ein jetzt, das veröffentlicht wird, lasst uns weitermachen und es im Front-End mit Elementor gestalten . Alles in Ordnung, also hier sind wir. Wenn ich einfach einen neuen Tab öffnen und in das Dashboard gehen könnte , möchte ich Ihnen sehr schnell etwas zeigen. Lass uns nach innen gehen. Und jetzt haben wir zwei Produkte. Natürlich. Hier versuchen wir die Kellnervorlage zu entwerfen, oder? Aber das haben wir bereits geschaffen. Wenn wir also mit Elementor aufmachen, sage ich Edit with Elementor. Und hier haben wir das einzige Produkt, das wir bereits erstellt haben. Uns gefällt, wie es aussieht. Und dieses neue Produkt wird genauso aussehen wie dieses andere Produkt, nur dass die Details unterschiedlich sind, das Bild anders sein wird, aber das Layout bleibt gleich. Wir sollten also wirklich keine Zeit damit verschwenden , das, was wir bereits gebaut haben, wieder aufzubauen. Gibt es eine Möglichkeit, das, was wir bereits erstellt haben, einfach wiederzuverwenden? Genau hier auf einer anderen Seite. Ja, das ist sehr möglich. Und genau das werden wir tun. Aber bevor wir das tun, schärfen wir diese Seite ein wenig. Lassen Sie uns dieses Tempo hier reduzieren , indem Sie diesen Abschnitt auswählen. Geh hinein fortgeschritten. Denken Sie daran, dass wir eine gewisse Top-Marge hinzugefügt hatten. Wir wollen das auf so etwas wie Swanee reduzieren . Und lassen Sie uns das aktualisieren und eine Vorschau der Änderungen anzeigen. Nun, das ist eher so, aber ich möchte den Abstand hier oben vergrößern , weil er zu nahe an der Spitze zu sein scheint. Also wähle ich diesen Abschnitt erweitert aus, entferne diesen Link und gebe ihm vielleicht einen oberen Rand von 30. Irgendwo da. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Mir gefällt, wo es sich jetzt befindet. Es gibt also sogar einen Abstand zwischen diesem Teil und diesem Teil, sodass er gleichmäßig verteilt aussieht. Ein viel vorzeigbarer. Jetzt, da wir mit der Vorlage selbst zufrieden sind, gehen wir zurück in diese Seite, auf der sie sich befindet. Und während wir jetzt hier drin sind, klicke auf dieses Pfeilsymbol hier, um zu speichern. Und klicken Sie auf Als Vorlage speichern. Geben wir ihm einen Namen wie eine einzelne Produktseite. Sie dann auf, Enter oder klicken Sie auf Speichern. Jetzt haben wir es hier. Es ist für uns verfügbar, um sie auf jeder anderen Seite zu verwenden, die wir möchten. Lassen Sie mich jetzt den Raum schließen, denn wir sind bereits mit dieser Bodybuilder-Vorlage fertig. Das wollten wir nur sagen. Ich schließe es. Ich schließe diese Vorschauseite. Schließ das. Lassen Sie mich all diese anderen Seiten schließen. Und jetzt bleibt uns diese Seite wir die zweite Vorlage erstellen, bei der es sich um die gewichtete Vorlage handelt. Also wenn ich die Seite einfach aktualisieren kann, indem ich auf Control R klicke , um die Seite zu aktualisieren. Jetzt klicke ich mit einer Seitenaktualisierung auf dieses winzige Symbol , um eine Vorlage hinzuzufügen. Und dieses Fenster wird auftauchen. Ich öffne meine Vorlagen und jetzt wirst du feststellen, dass die einzelne Produktseite, die wir gerade gespeichert haben, jetzt verfügbar ist. Also klick, Einfügen und sag Ja. Alles in Ordnung. Jetzt haben wir unsere zweiten digitalen Produkte mit der Vorlage ausgefüllt , die wir bearbeiten können. Und wir können dieselbe Vorlage überall wiederverwenden , wenn wir mehr digitale Produkte erstellen. Lassen Sie mich das also aktualisieren. Und lassen Sie mich das in einen gleichberechtigten Kellner ändern. Also Kellner-Vorlage. Ändern Sie dies also auch in eine gewichtete Vorlage. Aktualisiere das. Und ich klicke auf das Bild selbst. Wählen Sie das Bild aus. Wählen wir dieses zweite Bild , um dieses bestimmte Produkt darzustellen. Dies ist also eine elementare Vorlage für eine solche Website. Lasst uns das aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Und da haben wir es. Unser zweites digitales Produkt ist fertig. Gehen Sie also zurück in unseren Editor, da wir jetzt mit dieser bestimmten Seite zufrieden sind, gehen wir zu diesem Burger-Menü Beenden Sie das Dashboard. Verlassen Sie jetzt komplett von hier aus. Und jetzt haben wir diese beiden Vorlagen. Jetzt wiederhole ich das Gleiche für ein paar weitere Produkte, etwa sechs oder sieben von ihnen. Wir haben also eine beträchtliche Anzahl von Produkten, mit denen wir arbeiten können. Und da dies die gleiche sich wiederholende Arbeit ist, werde ich diesen Abschnitt einfach weiterleiten und hoffe, dass Sie sich auch etwas Zeit nehmen, um mehr digitale Produkte mit der soeben gespeicherten Vorlage zu erstellen . Wir sehen uns also, nachdem ich alle digitalen Produkte erstellt habe . Also hier sind wir. Ich werde gerade sechs Produkte die gleiche Weise kreiert, wie wir die ersten Produkte entwickelt haben. Jetzt, da wir diese sechs digitalen Produkte haben, gehen wir ins Frontend und schauen, was wir haben. Also gehe ich in die Seiten. Und wir möchten sehen , wie unsere Homepage aussieht, denn in den nächsten Lektionen werden wir sehen, wie wir diese Produkte wahrscheinlich anzeigen können. also schnell zu Creative Market zu wechseln, wollten wir diese Produkte auf diese Weise präsentieren. Wie machen wir das? Mal sehen, wie das geht in der nächsten Lektion, wir sehen uns in Kürze. 21. Anzeigen der digitalen Produkte in einer Kategorie: Willkommen zurück. In der letzten Lektion haben wir unsere digitalen Produkte erstellt. In dieser Lektion möchten wir sehen, wie wir sie im Frontend anzeigen im Frontend können, damit Kunden sie erkunden können . Wie machen wir das? Wie zeigen wir unsere Produkte so vorzeigbar an? Lass uns weitermachen und das machen. Gehen wir also wieder in unser Dashboard gehen wir hier rein. Sehen wir uns zunächst die Seite an. Also klicke ich mit der rechten Maustaste und öffne den Link in einem neuen Tab, damit wir sehen können, was wir gerade haben. So sieht die Seite aus. Wir haben nichts, nachdem der Heldenbereich der Ordner ist. Und wir wollen so etwas oder so etwas. Was wir auf Free Pig haben oder was wir auf dem Envato Marktplatz haben. also wieder reingehen, wollen wir kommen und Edit with Elementor sagen. Denn denken Sie daran, dass wir diese Seite mit Elementor erstellt haben. Also können wir hierher kommen und Edit with Elementor sagen. Und das öffnet den Elementor-Editor. Alles in Ordnung, also hier sind wir. Jetzt können wir anfangen, Inhalte direkt unter dem Heldenbereich hinzuzufügen . wir also zunächst einen Abschnitt mit voller Breite hinzu , eine einzelne Spalte. Und lass uns oben etwas Spielraum hinzufügen , um dich vom Heldenbereich zu trennen. Wenn ich das klicke, gehe ich weiter hinein. Entferne diesen Link und gib ihm einen oberen Rand von 50 oder rechts. Jetzt haben wir diesen schönen Platz und einen kurzen Tipp, an den ich mich gerade erinnert habe, wenn Sie den Mauszeiger über diese Spalte oder diesen Abschnitt oder ein anderes Element , das Sie hier bearbeiten können. Es muss ein schnelles Pop-up mit einigen schnellen Verknüpfungen angezeigt werden. Und das tun Sie, indem Sie in dieses Burger-Menü gehen, Benutzereinstellungen. Handles bearbeiten. Ändere das auf ja und sag Update. Und ich zeige dir, was das bedeutet. Wenn Sie den Mauszeiger über diese Spalte bewegen, diese anderen Optionen angezeigt , mit denen Sie schnell Maßnahmen ergreifen können. Wenn ich diese zum Beispiel duplizieren möchte , muss ich nur dort klicken. Und jetzt haben wir zwei Spalten. Ich möchte diesen Abschnitt duplizieren. Alles was ich tun muss, ist darauf zu klicken, und da haben wir es. Also, während wir hier drin sind, lass mich diese Spalte löschen, weil wir nur eine brauchen. Ich klicke auf das Pluszeichen dort an. Und hier drin suche ich nach Gier. Und wir haben keine Post-Gier und wir möchten unsere Produkte als Gier darstellen. Wenn man sich das anschaut, sieht das wie eine Gier aus. also wieder hier reingehen, brauchen wir ein Plugin, das die Leistungsfähigkeit von Elementor erweitert. Denken Sie daran, ich habe bereits erwähnt, dass wir Plugins haben, die die Leistungsfähigkeit von Elementor erweitern. Ein anderes Plugin, das das tut, ist ein wesentliches Add-Ons für Elementor, es gibt uns die Möglichkeit, eine Gier hinzuzufügen. Gehen wir also zurück in unser Dashboard. Plugins, füge neu hinzu. Und hier möchte ich wichtige Add-Ons für Elementor eingeben . Jeder sollte der Erste sein. Also installiere ich jetzt. Lass uns weitermachen und es aktivieren. Wählen wir Erweitert aus und wählen Sie Weiter aus. Im Grunde genommen ist das, wenn Sie Basic auswählen, werden weniger dieser Funktionen aktiviert. Wenn Sie jedoch Erweitert auswählen, haben Sie mehr Funktionen, die wir möchten, aktiviert, eine davon ist Gier, die Rasteroption. Also wollen wir die erweiterte Option hier, sagen wir als Nächstes, und das meinte ich. also für basic entschieden hätten, hätten Sie nur sehr wenige davon ausgewählt. Inzwischen, da wir Advanced ausgewählt hatten, haben wir weitere dieser Funktionen überprüft und eine davon ist Post Greet, wonach wir gesucht haben. Also sage ich als Nächstes, als nächstes, Dani hat all diese anderen Dinge gestohlen. Dann fertig. Jetzt, da wir wichtige Add-Ons für Elementar installiert haben , gehen wir zum Frontend. Und zuerst lasst mich diese Seite aktualisieren. Und dann klicke ich auf Control R, um die Seite zu aktualisieren , damit wir Zugriff auf wichtige Add-Ons für Elementor haben können . Und jetzt, da wichtige Add-Ons für Elementar installiert sind, lassen Sie mich das und all diese anderen Panels hier zusammenklappen . Und jetzt werden Sie feststellen, dass wichtige Add-Ons eines der Panels hier sind. Also tippe ich Gier ein. Und dieses Mal wird es Post aufrufen, wir würden Post-Farbverläufe hier in die einzelne Spalte ziehen. Und der momentane Fall lässt es fallen. Wir zeigen die Produkte, die wir gerade erstellt haben. Lasst uns das aktualisieren. Und jetzt wollen wir als Nächstes an diesem Display arbeiten. Wie lassen wir es so vorzeigbar aussehen? Gehen wir also wieder hier rein, wählen wir diese Gier aus. Und obwohl dies ausgewählt ist und hier das aktive Element ist, können wir jetzt damit beginnen, Änderungen an der Anzeige Luke vorzunehmen. Lassen Sie uns diese Abfrage zunächst reduzieren. Und Sie werden feststellen, dass wir hier drei Panels haben. Im ersten Panel geht es also darum , woher die Daten stammen. Denken Sie also daran, dass wir standardmäßig Kategorien hatten. Es zeigt die Produkte an, die in der Kategorie nicht kategorisiert sind . Wenn wir also wieder reingehen und uns die Beitragskategorien ansehen. Denken Sie daran, dass wir diese drei Kategorien erstellt haben und dann die Kategorie nicht kategorisiert hatten. Und wenn wir in alle Beiträge gehen, denken Sie daran, während wir diese Produkte erstellt haben, wir haben ihnen keine Produktkategorie gegeben, sodass sie alle automatisch fair in die Kategorie nicht kategorisiert werden. Wenn wir jetzt zum Frontend gehen , werden sie deshalb standardmäßig hier angezeigt. Was wir also tun müssen, ist, dass es sich um elementare Produkte handelt und wir eine Elementor-Kategorie haben, in alle Beiträge zurückgehen kann. Und jetzt können wir die Kategorie für jedes Produkt festlegen. Ich zeige Ihnen zwei Methoden und wie Sie die Kategorie festlegen. Die erste Methode ist also in die Bearbeitung eines der Produkte. Und hier auf der rechten Seite unter Einstellungen, direkt unter Vorlage. Denken Sie daran, dass wir die Vorlage zu Elementor in voller Breite gesagt haben, einige Panels unter Vorlage erleichtern Kategorien. Wenn Sie darauf klicken, werden alle verfügbaren Kategorien angezeigt. Deaktivieren Sie das Uncategorized und setzen Sie es auf Elementor da es sich um eine elementare Vorlage handelt. Aktualisiere das. Und jetzt lass uns von hier aussteigen. Und jetzt werden Sie feststellen, dass es in die Elementor-Kategorie geändert wurde. Die zweite Methode besteht darin , dies direkt hier mit der Schnellbearbeitungsmethode zu tun. Schnelles Bearbeiten. Wenn Sie darauf klicken, werden alle Optionen angezeigt , die Sie bearbeiten können. Dann wird eine von ihnen die Kategorien sein. Deaktivieren Sie das also und aktivieren Sie Elementor und aktualisieren Sie es. Und lasst uns das für den Rest wiederholen. Also bearbeite ich einfach den Elementor und überprüfe das. Aktualisiere das. Und jetzt sind sie alle in der Elementor-Kategorie. Nun gehe ich zurück zu unserer Seite, werde ich zuerst aktualisieren und dann die Seite aktualisieren, indem ich auf Control R klicke. Also jetzt mit einer Seitenaktualisierung, wählen wir das Raster wählen wir das Raster erneut aus, indem wir auf klicken irgendwo darin. Und jetzt tippen wir in Kategorien Elementor ein. Und jetzt wird es das Elementar genau dort zur Sprache bringen. Jetzt sind wir uns sehr sicher, dass all dies elementare Vorlagen sind. Es sind keine Vorlagen in einer anderen Kategorie. Das nächste, was wir tun wollen ist, in die Layouteinstellungen zu gehen. Und wir brauchen nicht all diese Details. Lassen Sie uns das also ändern. Zuallererst aktualisiere ich diese Seite oder richtig. Und ich möchte das Datum, den Namen des Autors, keinen Avatar anzeigen . Damit werden all diese Dinge unter der Schaltfläche „Mehr lesen“ los . Ich möchte die Schaltfläche „Mehr lesen“ anzeigen, musste aber Vorlage anzeigen sagen. Und ich möchte den Auszug auch nicht zeigen. Diese Details sind verfügbar, wenn sie auf diese klicken. Öffnen Sie die Einzelseite, die einzelne Produktseite, die wir zuvor erstellt haben. Lasst uns diese Seite aktualisieren. Und jetzt müssen wir ein Bild für jedes einzelne Produkt haben , das wir erstellt haben. Wie bekommen wir die Bilder hier? Gehen wir zurück zu unserer Produktliste. Es sei denn, gehe in jedes Produkt und setze ein vorgestelltes Bild. So zum Beispiel Vorlage für Lebensgesundheit. Zunächst einmal möchte ich sehen, welches Produkt dieses Produkt war. Also sehe ich das in einem neuen Tab an. Und es ist diese oder diese Lady. Also gehen wir hinein und bearbeiten diese Seite. Und unter Einstellungen scrolle ich ganz nach unten zum vorgestellten Bild und klicke auf Vorgestelltes Bild festlegen. Und, äh, also glaube ich, dass diese Lady diese war, Bild von diesem hier Set Featured Image. Und da haben wir es. Aktualisiere das. Lass uns zurückgehen. Lasst uns mit der rechten Maustaste klicken und sehen, welches Produkt dieser Typ war. Also möchte ich das einfach bearbeiten. Unter Einstellungen. Scrollen wir bis zum Featured Image. Klicke das an. Und es war dieser Typ genau hier. Ich wiederhole dasselbe für den Rest der Produkte setze das vorgestellte Bild ein. Lassen Sie mich diesen Abschnitt also schnell vorantreiben. Und jetzt habe ich gerade das vorgestellte Bild für all diese Produkte eingestellt . Gehen wir zum Frontend und aktualisieren Sie diese Seite nur für den Fall Sie Ihre Änderungen nicht gespeichert haben, aktualisieren klicken Sie dann auf Control R. Alles richtig, also hier sind wir. Die Dinge sehen jetzt am Tag besser aus. Gehen wir fort und wählen das Raster aus. Und wenn sie ausgewählt ist, lassen Sie uns die Abfrage ausblenden und die Layouteinstellungen erweitern. Wir brauchen drei Spalten. Ich bevorzuge drei Spalten. Und lasst uns zur Abfrage zurückkehren und sagen, dass wir vorerst sechs Produkte pro Seite benötigen. Wir werden das in Kürze ändern, aber sagen wir sechs Produkte pro ausgestellter Seite. Jetzt haben wir ein Raster von sechs Produkten. Und jetzt lassen Sie uns die Abfrage erneut reduzieren und die Layouteinstellungen erweitern. Jetzt haben wir drei Spalten, sechs Produkte. Lasst uns diese in h3 ändern. Die Titel-Tags werden Hates drei sein, denn was wir tun wollen, ist ein H2 hinzuzufügen. Davor. aktualisiere ich zuerst. Und klicken wir darauf und ziehen eine Titelüberschrift dorthin. Lass es uns in die Mitte legen. Und lassen Sie mich es einfach elementare Vorlagen nennen , denn dies ist eine Kategorie von Vorlagen, MAR-Elementen von Vorlagen. Natürlich stylen wir das. Ich wechsle die Schriftfamilie in Montserrat. Ich reduziere die Größe ein wenig und erhöhe den Schriftweg auf 800. Aktualisiere das. Und jetzt sehen wir uns die Änderungen im Bundesstaat an. Scrollen wir nach unten und sehen, was wir haben. Zumindest sieht es viel besser aus als das, was wir hatten. Und natürlich werden wir es viel vorzeigbarer aussehen lassen , wenn wir Fortschritte machen. Wir fangen gerade erst an. also wieder hineingehen, während dies noch ausgewählt ist, wollen wir in den Stil gehen. Und jetzt lass mich den Post-Gier-Stil für einen Moment zusammenbrechen , damit du alle Panels sehen kannst, die wir haben. Also haben wir den Thumbnail-Stil. Dieses Bild, Meta-Stil, bedeutet also die Elemente, die wir erhitzen, die wir hier sind. Metaposition, Kalotyp, Epigraphie und Abstand. Beginnen wir mit dem Stil „ Mehr lesen“. Dieses Jahr. Wir wollen es in Weiß ändern. Aber jetzt muss der Hintergrund 40, 40, 40 sein . Wie immer. Und dann lasst uns das entfernen. Lassen Sie uns eine linke Polsterung von 20 geben, rechte Polsterung von 20, 10. Und dann geben wir ihm einen Grenzradius von fünf. Lassen Sie uns das zu einem leckeren Update machen. Aber jetzt reduzieren wir das auf fünf. Polsterung oben und unten. Oder fahre ein Lohn das. Lassen Sie uns den Stil der Schaltfläche „Mehr lesen“ reduzieren und den Miniaturansichtsstil öffnen. Geben wir ihm einen Grenzradius von 20 an. So. Für den Post GREP-Stil. Lassen Sie uns auch einen Randradius von 20 geben , denn im Moment sehen Sie, dass es immer noch außerhalb des Bildes liegt, das eine abgerundete Ecke hat. Also lasst uns das auch einen Tony geben. Und das ist jetzt versteckt. Aktualisiere das. Als nächstes lasst uns das zusammenbrechen und lasst uns in die Topographie und den Abstand gehen. Und richten wir den Text an der Mitte aus. Lasst uns diesen Link entfernen. Und für den unteren Rand erhöhen wir ihn ein wenig, damit wir es ausräumen können, vielleicht 10. Lassen Sie uns den Farb- und Typografieabstand reduzieren und in den Stil „Mehr lesen“ zurückkehren den Stil „Mehr lesen“ damit wir ihn in die Mitte schieben können. Lassen Sie uns also die Verbindung am Rand aufbrechen und lassen Sie uns den linken Rand bis zur Mitte erhöhen. Beurteilen Sie mit Ihrem Auge , wo sich der Mittelpunkt befindet. Denk, das ist ein netter Ort. Aktualisiere das. Und dann lasst uns eine Vorschau der Änderungen anzeigen. Alles in Ordnung, Jetzt sind unsere Produkte richtig ausgestellt, aber wir müssen etwas gegen den Button unternehmen. Schieben Sie es nach rechts. Also wo ist es? Lassen Sie uns das im Blick auf die Änderungen aktualisieren. Alles klar, wir sind fast da, also lasst uns es viel mehr erhöhen. Sagen wir eine 100. Also genau hier, nun, wir sind auf der Bearbeitungsseite. Es sieht falsch ausgerichtet aus, aber auf der eigentlichen Seite, lass uns eine Vorschau anzeigen. Jetzt ist es fast wahrscheinlich eine Linie. Ich denke, das ist vorerst fast zufriedenstellend, aber lasst uns weitermachen und ihm vielleicht eine 110 geben. Bei meinen Versuchen, es in die Mitte zu legen, habe ich weitergemacht und ihm eine Marge von 100 auf der rechten Seite und einer 100 auf der linken Seite gegeben . Aber jetzt sehen wir uns die Änderungen an. Und ich sehe, dass wir etwas gegen die Polsterung auf dieser Seite unternehmen müssen . Also lasst uns wieder hier rein gehen. Wir könnten die Marge auf der rechten Seite verringern. Lasst uns nun die Marge rechts ein wenig erhöhen. Vielleicht eins oder fünf. Aktualisiere das. Und lassen Sie uns eine Vorschau der Änderungen oder Fahrten anzeigen. Und jetzt denke ich, dass es in der Mitte ist. Ich weiß nicht, welche Werte hier für dich funktionieren werden, aber das sind die Werte , die für mich funktionieren. Probieren Sie also verschiedene Werte aus, bis Sie es richtig gemacht haben. Alles in Ordnung, also da haben wir es. Denken Sie daran, dass es bei DC vorerst nicht darum geht , eine sehr schöne Website zu erstellen. Hier geht es darum, Ihnen zu zeigen, wie Sie das System selbst erstellen. Ich bin mir ziemlich sicher, dass jeder, der gerade an diesem Kurs teilnimmt eine unterschiedlich aussehende Website entwickeln wird, aber das zugrunde liegende System wird dasselbe sein. Das System, mit dem Sie Produkte auf diese Weise anzeigen können, aber Sie verkaufen Ihre Produkte anders, Ihre Seite und die Farben, die Sie verwenden werden. All das wird anders sein. Unser Ziel ist es also zu lernen, wie man ein System richtig erstellt , das dem Kunden eine nette Customer Journey bietet. Sie kommen auf Ihre Website, erkunden Ihre Produkte und wenn sie zum Beispiel auf das Produkt klicken, wenn ich darauf klicke, Mal sehen Wo wird auf diese Seite weitergeleitet. Wir haben diese Seite früher erstellt und können jetzt Details zu diesem Produkt lesen. Und wenn uns das Produkt gefällt, können wir es herunterladen. Das ist also die Art von System, auf das wir konzentrieren und wir werden versuchen zu bauen. So zeigen Sie die Produkte auf Ihrer Webseite an. Als Nächstes möchten wir sehen, wie Sie eine weitere Kategorie hinzufügen , wie wir das Element der Vorlagenkategorie hinzugefügt haben. Machen wir das in der nächsten Lektion. Wir sehen uns in Kürze. 22. Anzeigen einer zusätzlichen Product: Willkommen zurück. In der vorherigen Lektion haben wir die Kategorie Elementare Vorlagen angezeigt. Jetzt wollen wir eine weitere Kategorie hinzufügen und ich habe die Kategorie Zeitschriften ausgewählt. Bevor wir also erstellt haben, wählen wir dies aus. Ich möchte dies leicht ändern. Ich möchte nur vier Spalten anzeigen, also können wir eine Zeile haben. Während dies ausgewählt ist, gehen wir in die Layouteinstellungen ein, sagen wir für. Sagen wir zunächst einmal Show für Produkte. Jetzt werden also nur vier Produkte gezeigt. Und lassen Sie uns den Abfragewinkel in den Layouteinstellungen reduzieren , z. B. vier Spalten, in denen alle in einer Zeile angezeigt werden. Lassen Sie mich das einfach aktualisieren. Lassen Sie sich nicht von einer Uhr täuschen, die genau hier sieht. Wenn wir eine Vorschau der Änderungen im Frontend anzeigen, wird es eine Zeile sein. Alles klar, also da haben wir es, nur eine Reihe von vier Spalten. Jetzt möchten wir eine weitere Zeile einer anderen Kategorie hinzufügen. Um den Spot zu korrigieren, aktualisieren wir die Seite. Und da haben wir es. Eine coole Sache an Elementor ist, wie ich etwas früher gezeigt habe, wie ich etwas früher gezeigt habe, dass Sie Elemente duplizieren können, damit wir diese Zeile so duplizieren können. Und jetzt haben wir zwei Reihen. Wenn ich das also aktualisiere und eine Vorschau der Änderungen anschaue, haben wir jetzt zwei Zeilen. Wir müssen also nur die Details zu diesem speziellen Bereich ändern . Lassen Sie uns das also in Zeitschriftenvorlagen ändern. Und jetzt müssen wir nur noch die Quelle dieser Daten ändern. Wir ändern also die Kategorie , aus der die Daten abgerufen werden. Schließen wir also Elementor, weil es sich nicht um elementare Vorlagen handelt , und wählen wir ein Magazin aus. Wenn Sie also das Magazin tippen , werden Zeitschriften angezeigt. Und natürlich, weil wir noch keine Zeitschriften haben, werden keine Beiträge gefunden, denn denken Sie daran, dass wir diese digitalen Produkte unter der elementaren Vorlage erstellt haben . Wenn wir also wieder in das Dashboard gehen, müssen wir unter Beiträge gehen und neue hinzufügen. So können wir ein paar Zeitschriftenvorlagen als digitale Produkte erstellen als digitale Produkte und diese dann im Frontend anzeigen. Beginnen wir zum Beispiel mit, gehen wir rein, bevor wir ihm einen Namen geben, gehen wir in dieses vorgestellte Bild ein. Und schauen wir uns einige der Zeitschriftenvorlagen an, die wir haben. Ich möchte ein paar Vorlagen von Zeitschriften hochladen , die ich zuvor erstellt hatte. Also importiere ich all diese Bilder und du findest sie in der Beschreibung unten im Ordner. Wie der Rest geladen wird. Lasst uns weitermachen und uns das auswählen. Ich stelle das als vorgestelltes Bild ein. Und ich sehe, der Name ist Body Mass. Stellen Sie also das vorgestellte Bild ein. Ich nenne das Body Mass. Körpermass-Vorlage. Nennen wir es Magazine. Und natürlich jetzt unter Einstellungen, Sagen wir Standardwerte, Vorlage, Elementor volle Breite. Scrollen wir nach unten und kategorisieren es als Zeitschriften. Und hier oben in den Astra-Einstellungen. Lass uns das in keine Seitenleiste ändern. Stretch in voller Breite. Lasst uns das schaffen. Und jetzt können wir los. Lasst uns das veröffentlichen. Also lass uns jetzt ins Frontend gehen. Okay, und jetzt sind wir im Vorderteil der Magazinprodukte. Was wir also tun müssen, ist die Vorlage zu verwenden, die wir zuvor für die Elementarvorlagen verwendet haben . Gehen wir also hinein und fügen Sie Vorlage hinzu. Gehen wir zu meinen Vorlagen und fügen dies ein. Ordnung, also da haben wir es. Natürlich müssen wir zuerst das Bild auswählen und in das aktuelle Produktbild ändern. Und das ist es. Lasst uns also Medien einfügen und das ist unser Produktbild. Machen wir es bis zu diesem Zeitpunkt etwas kleiner. Und lasst uns den Namen ändern. Ich glaube, es war das Body Mass Magazine. Wahrscheinlich das. Ich wähle das aus und ersetze es dann. Und da haben wir es. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Okay, so sieht es also aus. Natürlich kannst du diese viel schöner aussehen lassen viel schöner als jetzt. Also mach weiter und mach dir so viel angenehmer anzusehen. Wenn ich hier wieder reingehe, klicke ich auf das Burger-Menü und schließe das Dashboard. Verlasse jetzt komplett von dort. Und jetzt ist das Body Mass Magazine eines der digitalen Produkte. Also wiederhole ich das für vielleicht ein paar weitere Produkte, genauso wie wir es mit den Elementen gemacht haben, Vorlagen sind. Also füge ich Mu hinzu. Bevor ich ihm einen Namen gebe, gehe ich in Einstellungen und ändere dann die Vorlage in Element 0 4 ohne nein, das ist keine Elementarvorlage, es ist ein Magazin. Und lasst uns weitermachen und ein Bild dafür auswählen. Lassen Sie uns den Code des Pantheon-Magazins wählen, das vorgestellte Bild einstellen. Das ist also Betrug. Code-Pantheon-Magazin. Und dann vergessen Sie nicht, in diesen Astro-Einstellungen keine Seitenleiste zu sagen. Für die Breite streckten diese Abel diese fünf. Und dann der Ordner und veröffentlichen Sie ihn dann. Und dann könnten wir ins Frontend gehen. Ordnung, also lasst uns tun, was wir gerade mit den anderen Produkten gemacht haben. Coincide Vorlage hinzufügen, Vorlage hinzufügen, meine Vorlagen, fügen Sie diese Vorlage ein. Und da haben wir es. Wählen Sie also das Bild aus. Machen wir weiter und legen unser vorgestelltes Bild fest. Begleiter. Legen Sie Medien ein. Denke, es war bis zu diesem Punkt. Aktualisieren Sie das, warum schieben wir es nicht einfach den ganzen Weg dorthin und lassen Sie diese ein wenig fallen. Also mache ich das größer. Wählen Sie diese Spalte gleich hier aus. Gehen Sie trotz dieser 150 zu Fortgeschrittenen, als wären sie bis zu diesem Punkt und sagen wir Update. Lassen Sie uns eine Vorschau der Änderungen überschreiben. Aber jetzt müssen wir diesen Namen aus dem Bodybuilder-Code Pantheon Magazin ändern Bodybuilder-Code . Dann lasst uns das aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Alles in Ordnung, also gibt es unsere digitalen Produkte Unsere Zeitschriftenvorlage sieht dem Rest ziemlich ähnlich aus. Und jetzt gehen wir wieder rein. Und weil wir unsere Änderungen gespeichert haben, beenden Sie das Dashboard. Und das mache ich noch ein paar Mal und erstelle noch ein paar digitale Produkte. Aber um diese nicht zu eintönig zu machen, werde ich diesen Abschnitt einfach weiter vorantreiben. Wir sehen uns also, nachdem wir die Produkte erstellt haben. Jetzt bin ich gerade mit der Erstellung dieser digitalen Produkte dieses Magazins fertig . Wir haben fünf von ihnen. Also möchte ich zum Frontend wechseln und sehen, was wir haben oder wie sie im Moment aussehen. Gehen Sie also hier zu unserer Homepage und aktualisieren die Seite, indem Sie auf Control R klicken. Scrollen wir also nach unten. Und hier haben wir unsere neue Kategorie Magazin-Vorlage. Aber wie Sie sehen können, sehen die Knöpfe natürlich ein bisschen komisch aus. Also lasst uns zurückgehen und sie richtig ausrichten. Also bearbeite mit Elementor hier oben. Scrollen wir also nach unten. Fangen wir damit an. Wählen Sie das aus, gehen wir in Stil, Lesen Sie mehr Schaltflächenstil. Und lassen Sie uns die Marge auf der linken Seite auf vielleicht 50 reduzieren. Lasst uns das aktualisieren. Machen wir das Gleiche für diesen Abschnitt. Wählen Sie das aus, gehen Sie in den Stil. Lesen Sie mehr Button-Stil. Lassen Sie uns das eine 50 geben oder aktualisieren Sie das. Und lasst uns eine Vorschau der Änderungen anzeigen. Stimmt's? Schieben wir es also leicht nach rechts. Also vielleicht 60, 65 oder 70. Sagen wir jetzt 60. Wählen wir das aus. Geht Site-Stil. Schaltfläche „Mehr lesen“ 16. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Richtig, also sehen sie im Moment großartig aus. Also haben wir von oben die Nav-Bar. Dann haben wir unsere Helden-Sektion. Dann sind hier unsere Produkte in verschiedenen Kategorien. Und wir haben unsere Fußzeile. Aber lassen Sie uns den Abstand hier unterhalb dieses Abschnitts erhöhen . Wählen Sie also den Abschnitt aus, der sich in erweitert befindet. Und lassen Sie uns eine untere Marge von 90 wie den anderen geben. Jetzt haben wir einen Abstand von 90 Pixel zwischen diesem Abschnitt genau hier und der Fußzeile. Also aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Scrollen Sie also nach unten. Großartig. Jetzt haben wir diesen schönen Abstand da unten, aber wir sind noch nicht fertig mit dieser Seite. In einer späteren Lektion fügen wir irgendwo hier auf dieser Seite ein Anmeldeformular hinzu irgendwo hier auf dieser Seite ein Anmeldeformular , damit wir Benutzer-E-Mails erfassen können , um mit ihnen in Kontakt zu bleiben, sie über neue Uploads und solche informieren zu können Arten von Sachen. So erstellen und zeigen Sie die verschiedenen Produkte als Produktkategorien auf der Zielseite an. Ich glaube, wir sind damit vorerst fertig. Als Nächstes möchten wir die Download-Seite erstellen. Also lass mich nach außen scrollen. Wir möchten diese Download-Seite erstellen und dort werden jetzt alle Produkte angezeigt. Erstellen wir also die Download-Seite in der nächsten Lektion. Wir sehen uns in Kürze. 23. Stellen du die Elementor als Seite vor: Willkommen zurück. Jetzt haben wir bereits unsere Landing Page oder unsere Homepage erstellt . Aber wenn Sie sich die URL in der Adressleiste hier ansehen, werden Sie feststellen, dass sie diese Erweiterung Home hat. Und nur für den Fall, dass ich vergessen habe, es zu erwähnen, habe ich meinen Domainnamen verwendet, um diese Demo-Website zu erstellen. Aber du wirst feststellen, dass wir auf der Homepage sind. Aber es hat diese Endungen nach der Domain. Was wir also wollen, ist, diese Häuser nicht zu haben, damit es Staub ist www dot your website.com oder welche Erweiterung, aber ohne Schrägstrich irgendetwas. Also nur um dir genau zu zeigen, was ich meine, wenn ich einfach auf der Zielseite auf free pic.com springen könnte , ist die URL kostenlos PQ.com, es ist nicht kostenlos pic.com Slash Home. Wie legen wir das in WordPress fest? Denn was passiert ist, wenn wir keine Homepage standardmäßig festlegen, lassen Sie mich zum Beispiel dieses Zuhause entfernen und dann Enter drücken. Es wird auf eine seltsame Seite weitergeleitet, die die standardmäßige WordPress-ähnliche Seite enthält. Das sieht nicht gut aus. Wir möchten, dass Menschen auf die Seite weitergeleitet werden , die wir mit Elementor entworfen haben. Wie machen wir das? Springen wir also in unser Dashboard, gehen wir in die Einstellungen und klicken Sie auf Lesen. Eine der Optionen hier sind Ihre Homepage-Displays. Und standardmäßig wird es auf Ihre neuesten Beiträge eingestellt. Ändern Sie das also in eine statische Seite. Und aus diesem Dropdown-Menü erhalten wir eine Liste aller Seiten, die wir erstellt haben, und wir können die Homepage als unsere Homepage festlegen. Nun, mit dem gesagt und den gespeicherten Einstellungen, gehen wir zurück zum Front-End. Wählen Sie das einfach aus und drücken wir nun Enter. Dort haben wir es. Wenn Leute jetzt unsere Basis-URL eingeben, wird es zu der Homepage weitergeleitet, die wir mit Elementor entworfen haben. So stellen Sie es also ein. In der nächsten Lektion möchte ich Ihnen zeigen, wie Sie die Parameterlinks festlegen und was sind primäre Links. Lasst es uns herausfinden. 24. Hilf mir Elementor zu 10.000 Kursteilnehmerinnen und Kursteilnehmerinnen: Hallo mein Freund. Zunächst möchte ich mich nur ganz herzlich dafür bedanken, dass Sie sich mir in diesem Kurs angeschlossen haben und von mir lernen möchten. Und ich möchte auch gratulieren so weit in die Klasse gekommen sind. Die Tatsache, dass Sie so weit in den Unterricht gekommen sind , bedeutet, dass Sie von der Klasse profitieren. Deshalb schätze ich dich sehr und hoffe, dass dir der Unterricht selbst Spaß macht. Davon abgesehen brauche ich deine Hilfe. Ich habe es mir zur Aufgabe gemacht, mindestens 10.000 Unternehmern wie Ihnen beizubringen , elementary zu verwenden , um ihre eigenen Websites oder Zielseiten zu erstellen , um ihre Produkte zu verkaufen. Und so können Sie helfen. Du siehst, wenn ein neuer Schüler einer Klasse auf Skillshare beitritt und diese Klasse dann mag und hinterlasse eine Bewertung. Es hilft anderen Schülern zu wissen, was sie von der Klasse erwarten können. Und wenn eine Klasse viele Bewertungen von Schülern erhält , sagt Skillshare: Hey, weißt du was? Dieser Kurs erhält viel Engagement und viele Kritiken von den Schülern. Es muss also hilfreich sein. Also muss es nützlich sein. Lassen Sie uns es also in der Bibliothek nach oben schieben , damit es für neue Schüler besser auffindbar ist. Der Skillshare-Algorithmus treibt diese Klasse nach oben und macht sie für neue Schüler sichtbarer und besser auffindbar . Weil es positive Bewertungen erhalten hat. Und da kommst du ins Spiel. Bitte begleiten Sie mich bei dieser Mission und helfen Sie mir mindestens 10.000 Schülern beizubringen, wie man Elementor benutzt, wie man schöne Landingpages erstellt, funktionierende Websites, indem man eine Rezension in dieser Klasse hinterließ und sie wissen zu lassen, was sie von diesem Kurs erwarten können. Du brauchst nur etwa zwei Minuten und du bist fertig. Ihre Bewertung wird jedoch dazu beitragen, dass neue Schüler Studieninteressierte wissen, was sie von der Klasse erwarten können. Unterricht entspricht Ihren Erwartungen. Hat es Ihre Erwartungen übertroffen? Wenn Sie Fragen haben, denken Sie daran, dass Sie diese jederzeit im Diskussionsbereich unter diesem Video ablegen können, damit ich Ihnen weiterhelfen kann. Ich antworte immer auf jede einzelne Frage oder jeden Kommentar, den die Schüler in einer meiner Klassen hinterlassen. Und nachdem das gesagt ist, möchte ich nur sagen, viel Spaß beim Unterricht und wir sehen uns in der nächsten Lektion. Frieden! 25. Gestalte die Download-Seite: Willkommen zurück. In der letzten Lektion haben wir gesehen, wie wir unsere Produkte wie diese auf unserer Homepage in Kategorien erstellen und anzeigen können. In dieser Lektion möchten wir also sehen, wie unsere Produkte auf der Download-Seite anzeigen können. Und die Download-Seite ist die Seite, auf der alle verschiedenen Arten von Produkten angezeigt werden , die wir haben. Sie können sich diese also als Bibliothek vorstellen. Die Landing Page hier gibt ihren Besuchern eine Vorschau auf das, was sie erwarten sollten. Und wenn sie auf die Download-Seite klicken, sollten Sie alle unsere Produkte finden. Klicken wir also auf Download und sehen, wie die Seite im Moment aussieht. So sieht unsere Seite also aus. Dies ist eine Standard-WordPress-Vorlage. Was wir also tun müssen, ist diese Webseite mit Elementor zu bearbeiten . Also müssen wir es visuell mit Elementor erstellen. Also haben wir hier eine Verknüpfung, Seite bearbeiten, wir können darauf klicken. Die Dashboard-Seiten, Downloads und dann Bearbeiten. Und hier sind wir. Das erste, was wir tun müssen, ist, in die Astro-Einstellungen zu gehen, damit es bereits aktiv ist. Und unter der Seitenleiste sagen wir kein Seitenleisten-Inhaltslayout für die Breite. Lasst uns diese Abel, diese fünf und dann der sechste hier. Und aktualisiere das. Stellen wir auch sicher, dass in den Einstellungen unsere Vorlage auch auf Elementor volle Breite Platte eingestellt ist . Und jetzt, da unsere Seite aktualisiert wurde, lassen Sie uns mit Elementor bearbeiten. Und hier haben wir es. Was wir auf dieser Seite tun wollen, wird die Produkte als filterbare Galerie angezeigt. Und ich zeige dir, wie das geht. Was wir also tun müssen, ist einen einzelnen Spaltenabschnitt mit voller Breite auszuwählen . So. Wählen wir den Abschnitt aus. Und drinnen fortgeschritten. Entferne diesen Link dort oben und lass uns einen Top-Marge von 50 geben. Oder richtig. Klicken Sie auf das Pluszeichen dort ein. Ziehen wir eine Überschrift hinein. Und lassen Sie uns dies in etwas wie Explorer-Downloads ändern in etwas wie Explorer-Downloads solange es noch ausgewählt ist. Gehe in den Stil. Ändern wir die Farbe als gleichzeitige Topographie, ändern Sie die Schriftfamilie in Montserrat. Klicke da draußen , um das loszuwerden. Und während wir noch Insights sind, ich Epigraphie, lasst uns das Schriftgewicht auf 800 ändern. Und lassen Sie uns die Größe dieser Schriftart auf diesen Punkt erhöhen . Irgendwo draußen. Klicke irgendwo draußen, geh in Inhalt und lass es uns in die Mitte legen. Dann genau unten. Wählen Sie das aus. Klicken wir auf dieses winzige Symbol und ziehen wir einige Texte direkt unter die Überschrift. Und das könnte so etwas wie richtig sein. Und dann lass uns in den Stil gehen und ihn in die Mitte schieben. Und jetzt haben wir eine nette kurze Beschreibung dessen was wir gerade hier abgeben werden. Das nächste, was wir jetzt tun wollen, ist, unsere filterbare Galerie unter dieser Überschrift hinzuzufügen , diesen Text. Also lasst uns weitermachen und auf dieses winzige Symbol hier klicken , um die Elemente aufzurufen. Und ich möchte filterbare Galerie filtern. Es ist eines der Elemente, die von wesentlichen Add-Ons für Elementor eingebracht werden. Ziehen wir es also und lassen Sie es unten fallen , wenn diese blaue Linie erscheint. Und da haben wir es. Das sind natürlich Platzhalter. Jetzt liegt es an uns, diese zu bearbeiten und in Produkte umzuwandeln. Lasst uns das zuerst aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. So wird unsere Seite also aussehen . Wenn jemand klickt. Zoom-Symbol genau hier. Es soll das Bild hervorheben, damit sie ein wenig Sicht auf das Produkt haben und durch alle verschiedenen Produkte scrollen können . Lasst uns dem entkommen. Und wenn sie hier auf dieses Linksymbol klicken, wird es zum einseitigen Produkt dieser speziellen Produkte weitergeleitet . Also lasst uns sehen, wie das geht. Und bevor wir die Produkte selbst hinzugefügt haben, fügen wir hier etwas Spielraum hinzu um einen schönen Abstand zwischen den beiden Elementen zu haben. Also lass uns hier rein gehen. Wählen Sie einen Abschnitt aus, der all diese Inhalte enthält. Und jetzt möchten wir etwas Marge darunter hinzufügen , solange er noch ausgewählt ist. Erweiterter Rand unten. Lass uns einen 90-Tag geben. Ist das 90 Pixel Abstand zwischen diesem Abschnitt und der Fußzeile. Aktualisieren wir das und sehen wir eine Vorschau der Änderungen an. Alles klar, also gefällt mir, wie es aussieht. Gehen wir zurück und bearbeiten die Produkte. hier wieder reingehe, wähle ich hier irgendwo aus. Und jetzt ist das aktive Eliminieren filterbare Galerie. Lassen Sie mich also zuerst die Einstellungen reduzieren. Und Sie werden feststellen, dass wir ungefähr vier Panels haben. Beginnen wir also mit den Einstellungen. Innerhalb der Einstellungen. Dies bestimmt, wie viele Artikel Sie zeigen möchten. Derzeit ist es also auf sechs eingestellt. Wir können es auf 12 setzen , sagen wir zum Beispiel 12. Wir können es auf 12 einstellen, aber natürlich müssen wir 12 Produkte erstellen , um sie zeigen zu können. Derzeit haben sie sechs Platzhalter, um zu sehen , wie man all diese Produkte erstellt. Lassen Sie uns als Nächstes die Einstellungen reduzieren und in filterbare Steuerelemente gehen. Jetzt sind die filterbaren Steuerelemente unsere Kategorien. Denken Sie also daran, dass wir ein Logo, eine Logo-Kategorie, Elementarkategorie und eine Zeitschriftenkategorie hatten. Sie gehen also hier hoch und sie sind unsere Kontrollen, um zu bestimmen, was im Blick ist und was im Moment sichtbar ist. wir unter filterbaren Steuerelementen hier zum Galerieelement. Klicken Sie darauf und ändern wir das Galerieelement in elementor. Okay, also klicken wir darauf, um es auszublenden und duplizieren wir es. Jetzt haben wir zwei filterbare Steuerelemente. Klicken wir darauf und geben ihm ein anderes Kategorielogo. Lasst uns das zusammenbrechen. Und jetzt wirst du feststellen, dass wir hier zwei Kategorien haben. Fügen wir noch eine Zeitschrift hinzu und lassen Sie uns eine Vorschau der Änderungen anzeigen. Richtig, also da haben wir es. Wie ich bereits erwähnt habe, werden die Produkte, die sich wenn Sie auf einen dieser Artikel klicken in dieser Kategorie befinden, , genau hier sichtbar, und die anderen werden ausgeblendet. Wenn wir also auf Elementor klicken, werden nur Produkte angezeigt, die sich in der Elementarkategorie befinden, wenn Sie auf das Logo klicken. Der gleiche Fall gilt, wenn wir auf alle klicken, dann sind alle Produkte in allen Kategorien sichtbar. Lassen Sie uns jetzt die Produkte erstellen. Also werde ich die filterbaren Steuerelemente reduzieren und Galerieelemente erweitern. Das sind unsere Produkte und raus. Und wie Sie sehen können, haben wir sechs Platzhalter , die wir jetzt mit unseren eigenen Inhalten bearbeiten können . Der erste Punkt hier, Sie werden feststellen, dass wir den Kontrollnamen haben. Sie müssen fragen, welches filterbare Steuerelement dieses Element steuert. Und so sind unsere Steuerelemente diese Kategorien, die wir gerade hier erstellt haben. In den filterbaren Steuerelementen. Dies sind unsere Kontrollen. Lassen Sie mich also diesen, sagen wir elementaren Zusammenbruch, diese Galerieelemente zusammenbrechen. Das erste Element wird eine elementare Vorlagen sein. Also klicke ich darauf. Es wird von Elementor-Steuerung gesteuert. Und es heißt Bodybuilder-Vorlage. Erinnerst du dich daran? Und ich scrolle nach unten und du wirst sehen, wo wir das Bild ändern können. Also klick da rein. Und ich glaube, das war das Bild. Wähle das Bild aus und füge Medien ein. Und da haben wir es. Es gibt unser Produkt. Also wiederhole ich das Gleiche für alle Produkte. Ich werde diese Bodybuilder-Vorlage zusammenklappen und das zweite Produkt erweitern, das auch eine elementare Vorlage ist. Es ist also Kontrolle Elementor. Es heißt, ich erfinde einfach einen Namen, damit wir Zeit sagen können. Wir hatten übrigens eine Kellnervorlage, eine Kellnervorlage. Und Sie können diese kurze Beschreibung ändern , die genau hier angezeigt wird. Scrollen wir hier nach unten und ändern diese Miniaturansicht. Also lasst uns dieses Bild gleich hier geben. Legen Sie Medien ein. Und es gibt unser zweites Produkt. Gehen wir zu den dritten Produkten. Ich scrolle nach oben und erinnere mich daran. Damit dieser Link funktioniert, fügen Sie hier den Link hinzu, also laden Sie oder so etwas herunter. Und wenn jetzt jemand auf diesen Link klickt , wird er zu dieser URL weitergeleitet. Und wenn Sie möchten, dass dieser Link auf einer anderen Registerkarte geöffnet wird, klicken Sie hier auf dieses Zahnradrad und sagen Sie ein neues Fenster öffnen. Lasst uns das aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Da haben wir es also. Wenn jemand auf diesen Link klickt, beachte die URL, die wir vor einem Moment hinzugefügt haben. Es öffnet sich in einem neuen Tab. Eine Seite ist immer noch intakt. Und das liegt daran, dass wir sagen, neues Fenster öffnen. Wenn wir das Häkchen deaktivieren und dies aktualisieren und eine Vorschau der Änderungen anzeigen. Wenn wir darauf klicken, wird es auf derselben Seite geladen und wir verlieren alles, woran wir gearbeitet haben. Gehen wir also zurück und lassen Sie uns ein drittes Produkt erstellen. Ich scrolle nach oben und kollabiere das zweite Produkt. Erweitern Sie das PRD-Produkt. Immer noch ein elementares Produkt. Also scrolle ich nach unten und ändere die Miniaturansicht. Wählen wir das also aus. Alles klar, Awesome. Jetzt erstelle ich hier drei weitere Produkte und füge danach noch ein paar weitere hinzu. Und da dies die gleiche sich wiederholende Arbeit ist wir hier bereits geleistet haben, werde ich diesen Abschnitt weiter vorantreiben. Nehmen Sie sich einen Moment Zeit und erstellen Sie all diese anderen Produkte. Und lasst uns treffen, nachdem wir damit fertig sind. Also lass uns gehen. Und so sind wir hier. Ich bin zurück. Ich habe gerade ein paar weitere Produkte erstellt. Wie Sie sehen können, haben wir Magazine und Logos hinzugefügt, sodass wir einige Artikel in diesen Kategorien haben können. Also habe ich dasselbe wiederholt, was wir für diese beiden Produkte getan haben. Ich bin einfach reingegangen. Zum Beispiel dieses Logo, einfaches Logo. Ich habe die Logos des Steuerelements aufgrund filterbarer Steuerelemente zugewiesen . Eines der Steuerelemente gibt es Logos, also sollten es Logos sein. Der Name in den filterbaren Steuerelementen sollte mit dem Namen übereinstimmen, den Sie dem Steuerelement hier geben. Unter dem einfachen Logo ist der Steuerungsname also Logos. Und ich gab ihm einen Namen, eine Beschreibung und wählte ein Bild dafür aus. Wenn ich einen Link hätte, würde ich ihn hier hinzufügen. Also habe ich genau die gleiche Methode für all diese verschiedenen Produkte hier gemacht. Und das siehst du hier. Aktualisieren wir das und sehen wir eine Vorschau der Änderungen an. Alles klar, also hier sind wir auf der Seite. Lassen Sie mich nach unten scrollen, damit wir sehen können, was wir haben. Und die Seite sieht wunderschön aus. Mir gefällt, wie es aussieht , weil der Benutzer auf die Seite kommen und einen Überblick über die verschiedenen Produkte haben kann, die wir haben. Und sie können sie nach Kategorien sehen. Wenn sie also nur elementare Vorlagen sehen möchten, können sie darauf klicken und die Produkte werden nach dieser Kategorie gefiltert. Wenn sie also nur Logos sehen möchten, sehen sie nur die Logo-Produkte, in denen Sie Magazine haben. Ich habe diese Kategorie hier nicht geändert. Dies ist, dies ist ein Element, eine Vorlage. Aber du kriegst den Bohrer. Dann eine andere Sache, die wir wieder in alle eingehen wollen, sehen wir alle Produkte aus allen Kategorien, die wir hier gesagt haben. Und natürlich wieder hier rein, kollabieren und filterbare Steuerelemente erweitern. Denken Sie daran, dass wir diese Kategorien immer hier oben duplizieren und neue hinzufügen und hinzufügen können diese Kategorien immer hier oben . Sagen wir also Steigungen. Und lasst uns das aktualisieren. Jetzt könnten wir die filterbaren Steuerelemente ausblenden, in Galerieelemente gehen eines der Produkte hier duplizieren. Und jetzt benutze Farbverläufe als eines der Steuerelemente dort. Und wenn jemand auf Farbverläufe klickt, werden nur Produkte aus der Kategorie Farbverläufe angezeigt. Und Sie können diese Produkte ziehen und sie genau so anordnen, wie Sie es auf Ihrer Seite möchten damit Sie sich nicht daran halten müssen, wie sie hier angeordnet sind. Und wenn wir sie neu anordnen, wird die Änderung in Echtzeit wirksam. Wenn wir dies also hier auf den dritten Platz verschieben wollen, können Sie einfach hierher kommen und das erste Logo auf den dritten Slot ziehen. Und da ist es. Lasst uns das also aktualisieren. Und lasst uns die Änderungen noch einmal überprüfen. Jetzt haben wir die Produkte hier und sie werden sehr richtig angezeigt. Wie verknüpfen wir sie mit den einzelnen Produktbeschreibungsseiten wir für sie erstellt haben? Zum Beispiel hatten wir eine Kellnervorlage. Wenn wir also auf diesen Link klicken, sollten wir zur Vorlagenbeschreibungsseite weitergeleitet werden . Wie sind wir dorthin gekommen und von welcher Seite spreche ich? Lassen Sie mich also zuerst die Beiträge öffnen. Und rufen wir nach unten zur Kellnervorlage an. Ich klicke mit der rechten Maustaste auf Anzeigen und öffne den Link in neuem Tab Und lass uns zu diesem Tab gehen. Dies ist also, wo uns diese Verbindung führen soll. Was wir also brauchen, ist dies mit dieser Vorlage verknüpft. Was wir also tun müssen, ist diesen Link so zu kopieren. Geh hier auf diese Seite. Und da dies unsere Vorlage ist, die Vorlage, mit der wir verknüpfen möchten, ist es die gewichtete Vorlage. Lass uns danach suchen. Das ist es. Erweitern wir es also und scrollen Sie nach unten. Direkt unter dem Bild , wo wir diesen Link hatten. Entferne das und füge unseren Link dort ein. Nehmen wir an, öffne in einem neuen Fenster und aktualisiere das. Wenn wir also eine Vorschau der Änderungen anzeigen, scrollen wir nach unten, um eine Vorlage zu warten und auf den Link zu klicken. Jetzt öffnet es sich in einem neuen Tab. Und es wird uns zu der Seite führen, die mehr Details zur gewichteten Vorlage enthält. Ich hoffe also, dass Sie jetzt anfangen, die Punkte zu verbinden und zu sehen, wie sich die Customer Journey entwickelt. Also gehen wir zur Homepage und scrollen nach unten. Wir können Produkte in verschiedenen Kategorien sehen , oder? Und wenn wir auf die Download-Seite gehen, können wir weitere Produkte und die verschiedenen Produktkategorien anzeigen , die auf dieser Seite verfügbar sind, auf dieser Website verfügbar sind. Und wir können ein Produkt auswählen, um mehr zu sehen. Lesen Sie mehr über das Produkt und wenn es uns gefällt, können wir es abschließen. Also lade herunter. Das ist also die Customer Journey und so erstellt man diese spezielle filterbare Galerie. Wählen Sie diese filterbare Galerie erneut aus. Und lasst uns nach unten scrollen, lassen Sie uns nach außen wachsen und in den Inhalt gehen. Lasst uns die Galerie reduzieren und in die Einstellungen gehen. Und wie ich bereits erwähnt habe, können wir bestimmen, wie viele Produkte wir zu einem bestimmten Zeitpunkt anzeigen möchten. Im Moment sagten wir sie zu 12. Deshalb können wir jetzt 12 Produkte sehen. So können wir zum Beispiel ein Produkt sagen. Wenn Sie also einen Scroll nach unten sagen, nur Hilfe sichtbar. Sagen wir sechs. Und jetzt sind nur sechs Produkte sichtbar. Wie sieht man den Rest der Produkte? Lassen Sie uns die Einstellungen reduzieren und gehen Sie nach unten zur Schaltfläche Mehr laden. Klicken wir auf die Schaltfläche „Mehr laden“ und ändern wir sie auf „Ja“. Jetzt haben wir noch viel mehr Button hier unten unter der Galerie. Lasst uns das aktualisieren. Und wir können festlegen, wie viele Bilder wir jedes Mal anzeigen möchten , wenn wir auf Mehr laden klicken. Jedes Mal, wenn wir auf Mehr laden klicken , werden sechs weitere geladen. Und wir können die Nummer zwei ändern, vielleicht eine 0, 10, und es werden zehn weitere Vorlagen geladen. Wir können den Text auch selbst ändern, um mehr zu sehen. Und lasst uns das aktualisieren. Und wenn es keine Bilder mehr gibt und jemand auf den Button klickt und es gibt keine Bilder mehr. Dies ist die Botschaft, die sie alle bekommen. Und wir können auch die Größe des Buttons ändern. Wir haben so viel Kontrolle darüber. Wir können auch in den Stil gehen, allgemeine Styling reduzieren, zur Schaltfläche Mehr laden gehen , nach unten scrollen. Und hier können wir seine Farbe ändern. Zum Beispiel können wir ihm diese gelbe Farbe geben , wenn wir wollen. Aber ich habe es lieber als diese Farbe. Und beim Schweben kann er diese gelbe Farbe so haben. Dann können wir auch den Abstand zwischen ihm und den Bildern hier vergrößern den Abstand zwischen ihm und den Bildern , indem wir diesen ziehen, bis wir zufrieden sind. Mir gefällt, wo es sich jetzt befindet. Aktualisieren wir das und sehen wir eine Vorschau der Änderungen an. Alles klar, also lasst uns nach unten scrollen , während wir unsere Produkte sehen. Und hier ist unser Load More Button. Denken Sie daran, dass die letzte Einstellung, von der wir gesagt haben, darin bestand , dass nur sechs Produkte in einer bestimmten Stadt gezeigt werden. Aber wenn wir auf Mehr anzeigen klicken, wie Sie sehen können, werden es sechs weitere geladen. Wenn wir mehr anzeigen sagen, wird es noch eins geladen. Jetzt ist es nicht mehr sichtbar, da keine Produkte mehr angezeigt werden können. Und so erstellen Sie die Download-Seite, indem Sie eine filterbare Galerie zum Essen hinzufügen. Und in der Filter Blur Gallery können wir verschiedene Produktkategorien hinzufügen. Und Benutzer können die verschiedenen Produkte entsprechend den Kategorien anzeigen , die Sie ihnen zugewiesen haben. Und sie können ein Produkt auswählen und sein Bild anzeigen oder zu diesem Produkt gehen und weitere Details anzeigen bevor sie entscheiden, ob sie es kaufen möchten. Also einfach so. In der nächsten Lektion erfahren Sie, wie Sie die Kontaktseite erstellen. Um genauer zu sein, möchten wir sehen, wie Sie ein WordPress-Formular erstellen , damit Benutzer uns eine E-Mail mit Fragen oder Kommentaren zu unseren Diensten senden können . Wie erhalten und erfassen wir Benutzere-E-Mails und Nachrichten auf unserer Website? Mal sehen, wie das geht in der nächsten Lektion. Wir sehen uns in Kürze. 26. Gestalte die Kontakt-Seite: Willkommen zurück. In der letzten Lektion haben wir die Download-Seite entworfen und gesehen, wie man diese filterbare Galerie erstellt. Jetzt möchten wir sehen, wie man die Kontaktseite erstellt. Lassen Sie mich es einfach öffnen, um zu sehen, was wir haben. Wie immer haben wir die normale WordPress-Vorlage. Wir möchten also sehen, wie Sie ein Formular erstellen , das Benutzer fühlen können, und eine E-Mail mit Feedback oder einer Frage oder einem Kommentar zu unseren Diensten an uns senden. Beginnen Sie mit der Gestaltung dieser Kontaktseite. Wir können in das Dashboard gehen und unter Seiten auf Bearbeiten klicken. Oder wir können einfach diese Verknüpfung verwenden und klicken Sie auf Seite bearbeiten. Und wir gehen direkt zur Bearbeitungsseite hier. wir wie üblich unter Einstellungen Gehen wir wie üblich unter Einstellungen zur Vorlage und ändern wir diese in Elementor volle Breite. Und lasst uns in die Astros-Einstellungen gehen. Sidebar, keine Seitenleiste. Inhaltslayout, volle Breite gestreckt. Deaktivieren wir all diese dort draußen und dann den Ordner. Und lasst uns das aktualisieren. Jetzt, da es aktualisiert wurde, lasst uns mit Elementor bearbeiten. Und hier haben wir es. Normalerweise haben Sie auf einer Kontaktseite Ihre Telefonnummer, haben Sie auf einer Kontaktseite Ihre Telefonnummer, Social-Media-Symbole und ein Formular mit verschiedenen Feldern wie E-Mail und deren Nachricht. Wie machen wir das? Lasst uns weitermachen und uns einen zweispaltigen Abschnitt schnappen. Und wie immer geben wir ihm eine Top-Marge von 50. Also lasst uns diesen Link entfernen. Halten wir uns von 50 fern, damit wir hier oben etwas Abstand haben. Und dann wollen wir hier drin einen kurzen Code hinzufügen. Wählen wir dieses Symbol dort oben aus, um die Elemente freizulegen und Kurzcode einzugeben. Alles klar, also ziehen wir den Kurzcode da rein. Und in dem Moment, in dem wir es veröffentlichen, beachten Sie jetzt, dass wir Ihren Code eingegeben haben. Wir müssen also einen Code von unserem Back-End, unserem Dashboard, abrufen. Und dieser Code wird unsere Form sein. Lasst uns also weitermachen und den kurzen Code im Backend holen. Aber wir haben keinen Kurzcode. Warum? Weil sie nicht einmal das Formular selbst haben. Wir haben kein Formular erstellt. Beginnen wir also damit, ein Formular zu erstellen. Aber wir können noch kein Formular erstellen. Warum haben wir das Plugin nicht? Beginnen wir also damit das Plugin zu installieren, das unser Formular erstellt. Gehen wir also zu Plugins, Add New. Jetzt gibt es viele Formular-Plug-Ins auf dem Markt, aber das, das ich wirklich liebe, heißt Formulator. Ich weiß nicht einmal, ob sie ein Affiliate-Programm haben. Ich vermarkte sie nicht. Ich liebe es einfach, über Produkte zu sprechen, die dort für mich verwendet werden, sind kostenlos und sehr leistungsstark. Also lasst uns weitermachen und den Formulierer eingeben. Und es ist der erste von WPA AMU dev. Also installiere es jetzt oder fahre. Lass uns aktivieren. Perfekt. Und jetzt ist es eines unserer Installierten Plugins. Um darauf zuzugreifen, scrollen wir in diesem linken Menü ganz nach unten. Und es sollte irgendwo ganz unten sein. Bewegen Sie den Mauszeiger über, klicken Sie einfach auf den Und das ist die Landing Page, zu der wir weitergeleitet haben. Also schließe ich einfach, dass diese Nachrichten hier oben sind. Und hier erhalten Sie im Grunde eine Zusammenfassung aller Formen von Missionen, Missionen, Missionsquiz , Missionsquiz , weil Sie Formulare, Umfragen und Quizfragen und vieles mehr erstellen können . Also werde ich nicht tiefer in den Formulierer eingehen und was er tun kann. Lass uns weitermachen und ein Formular erstellen. Und das Formular, das wir wollen, können wir mit einem leeren Blatt beginnen und das Formular erstellen. Unsere, es ist unser Selbst oder wir können vorgefertigte Vorlagen verwenden. Wir haben also ein Anmelde-, Login- und Anmeldeformular für Kontakt-Newsletter . Wir benötigen ein Kontaktformular. Klicken wir also darauf und sagen Weiter. Und geben wir ihm einen Namen. Kontaktformular. Sagen wir Create. Und da haben wir es. Also hier ist unsere Form. Hier ist der Name, den wir ihm gegeben haben, Kontaktformular und wir können ihn jederzeit von hier aus ändern. So können wir es ändern, um uns zu kontaktieren. Und wenn wir hier auf dieses Zahnradsymbol klicken, werden Sie feststellen, dass der erste Punkt hier den Kurzcode kopieren ist. Und das ist ein kurzer Code, der kopiert wird , um es ins Frontend zu bringen, aber wir werden dazu kommen. Lassen Sie uns untersuchen, was wir auf unserem Formular haben. Also hier ist das Formular. Das Formular selbst hat den Vornamen, E-Mail, die Telefonnummer und die Nachricht. Und wenn ich das in der Vorschau ansehe, sieht das Formular genau so aus. Der Vorname, die E-Mail-Adresse, Telefonnummer, die Nachricht und dann die Nachricht senden. Also FirstName, E-Mail-Telefonnummer-Nachricht und dann Nachricht senden Button. Und wir können diese neu anordnen. Wir können es einfach greifen und ziehen und direkt neben der blauen Linie auf der rechten Seite dort fallen lassen, lassen Sie sie dort fallen, und jetzt sind sie in einer Zeile. Also lasst uns eine Vorschau anzeigen. Und jetzt sehen sie so aus. Und wir können zum Beispiel eine Leseüberfüllung bekommen, wenn Sie die Telefonnummer nicht möchten, können wir dieses Feld einfach löschen. Und jetzt haben wir den Vornamen und die E-Mail-Adresse. Lassen Sie uns das in der Vorschau sehen. Und das haben wir. Lassen Sie uns also unser Formular veröffentlichen. Und jetzt, weil es veröffentlicht wurde, bekommen wir als erstes dieses Popup mit unserem Kurzcode. Kopieren wir also den Kurzcode und wir erhalten diese Nachricht. Dieser Kurzcode mit dieser Nummer 392 ist derselbe Kurzcode, auf den wir zugreifen können, indem wir hier auf diesen Code klicken und auf Kurzcode kopieren klicken, ist derselbe Kurzcode. Wenn wir nun das Frontend gewechselt in dem wir unseren Kontakt bearbeiten, denken Sie daran, dass wir dieses Kurzcode-Element hier fallen gelassen haben und uns dieses Feld vorgestellt wurde. Jetzt können wir diesen Kurzcode dort einfügen und uns dann bewerben. Alles klar, also lasst uns weitermachen und auf Aktualisieren klicken. Und lasst uns eine Vorschau der Änderungen anzeigen. Perfekt, so sieht unsere Form im Moment aus. Fügen wir direkt darunter etwas Spielraum hinzu. Wählen Sie also diesen Abschnitt aus, gehen Sie in Erweitert, geben wir ihm unten eine 90. Und jetzt haben wir diesen Platz hier unten. Lassen Sie uns das aktualisieren und eine Vorschau der Änderungen anzeigen. Ja, das sieht okay aus. Jetzt müssen wir diese Farbe natürlich so ändern, dass dem Thema der Website entspricht. Also lasst uns fortfahren und die Hintergrundfarbe der Schaltfläche bearbeiten . Aber jetzt können wir hier drinnen nicht schlecht bearbeiten und einen Mentor, weil das Formular nicht mit Elementor erstellt wurde. Denken Sie daran, was wir gerade getan haben ist, den Kurzcode hier einzufügen. Wir haben es in vier Minuten erstellt. Was wir also tun müssen, ist unter Felder zu gehen , erscheinen, Es gibt Aussehen. Klicken Sie also auf das Aussehen. Und hier können wir bearbeiten, wie das Formular läuft. Zuallererst kann der Designstil hier von den Standardwerten geändert werden, was wir hier haben. Zwei flach, keine Grenzen. Also werde diese scharfen Grenzen los. Und das ist der, den ich mag, also werde ich das aktualisieren. Je nach Geschmack gibt es aber auch noch ein paar mehr. also unter Farben nach unten scrollen, können wir hier die Farben verschiedener Elemente in unserem Formular ändern , einschließlich der Schaltfläche. Also lasst uns unter Farben hierher zurückkehren. Lassen Sie uns Benutzerdefiniert wählen, und das zeigt weitere Optionen. Und das sind die verschiedenen Elemente, aus denen die Formulare bestehen, mit denen wir formuliert werden. Der letzte Punkt hier in der Liste ist die Schaltfläche „Senden“. Und wie Sie sehen können, ist die Farbe derzeit blau. Also lasst uns das anklicken. Und hier lassen Sie uns das auf 40, 40, 40 ändern. Und beim Schweben wollen wir ihm das Gelb geben. Also lass mich das einfach ziehen und versuche es gelb zu geben. Ja, ich glaube, das gefällt mir. Ich kopiere einfach dieses Gelb. Und innen fokussiert dort hinein. Denn im Fokus wollen wir, dass es immer noch so gelb ist. Drücken Sie Enter. Also weiter ist es gelb und nicht fokussiert, wenn es aktiv ist, es ist gelb. Und lasst uns das aktualisieren. Und nachdem es aktualisiert wurde, gehen wir in unsere Elementor-Seite, wählen das Kurzcode-Element aus und wenden Sie es an. So können wir diese neuen Farbänderungen anwenden. Und dann lasst uns eine Vorschau der Änderungen anzeigen. Ordnung, also gefällt mir, was ich sehe. Jetzt im Hover ist der Button im Normalzustand gelb, er reimt sich auf den Rest der Website. Lassen Sie uns hier eine Nachricht hinzufügen , nur um mit den Besuchern zu sprechen. Also lasst uns das hineinziehen und sagen. Also. Wenn man hineingeht, geht es in Stil, Farbe, in Typografie. Lasst uns weitermachen und das in Montserrat umwandeln. Und lassen Sie uns das Schriftgewicht auf 800 ändern. Und ich mag es groß. Also lasst es uns hier so groß machen. Und dann klicken wir auf dieses Symbol, um die Elemente anzuzeigen. Und ziehen wir etwas Text da rein. Alles klar, also etwas derartiges. Vergrößern wir nun den Abstand zwischen diesen beiden. Wählen Sie also diesen Abschnitt aus und gehen in Layoutspalten breiter. Und unten können wir eine Telefonnummer hinzufügen, können wir eine Telefonnummer hinzufügen damit wir diese einfach duplizieren können. Also wähle ich das einfach aus. Und dann ziehen wir es unter diesen Text. Und obwohl es noch ausgewählt ist, gehen wir hier hinein und reduzieren die Größe. Geben wir ihm diese gelbe Farbe. Aber denken Sie daran, verwenden Sie den gleichen Gelbton oder alle Farben, die Sie verwenden. Verwenden Sie denselben Farbcode. Ziehen Sie nicht einfach die Gelbtöne so herum. Es ist gut sicherzustellen, dass Sie bestimmte Markenfarben für Ihre Marke oder Recht verwenden bestimmte Markenfarben für , also aktualisieren Sie das. Vielleicht könnten wir eine E-Mail hinzufügen. Also klicke ich darauf, ziehe vielleicht noch einen Text hier hin. Und das könnte die E-Mail-Adresse sein. Aktualisiere das. Und jetzt sehen wir uns die Änderungen an. Und das ist unsere Kontaktseite. Lass mich einfach nach unten scrollen. Verringern wir den Abstand zwischen diesen beiden. Verkleinern wir also den Abstand genau hier. hier wieder reingehe, wähle ich den Text hier aus und entferne diesen Rand hier. Und für den unteren Rand, fangen wir an, es manuell so zu reduzieren , bis wir zufrieden sind. Also aktualisiere das. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Das sieht also viel besser aus. Eine nette Kontaktseite. Und natürlich ist es überflüssig, hier Social-Media-Symbole hinzuzufügen hier Social-Media-Symbole da wir sie bereits in der Fußzeile haben. Die Seite „Kontakt“ enthält also alle Details, die ein Kunde benötigt, um mit uns in Kontakt zu treten. So entwirft man die Kontaktseite. In der nächsten Lektion wollte ich über die Blogseite sprechen. Also lasst uns das in Kürze machen. 27. Übung: Gestalte die Blogseite: Hallo, und willkommen zurück zu einer weiteren fantastischen Lektion. In der letzten Lektion haben wir diese Seite „Kontakt“ erstellt. Jetzt ist es an der Zeit, über diese Blog-Seite zu sprechen. Wie zeigen wir unseren Blogbeitrag an? Und jetzt hat unser Blog wie immer jetzt die Standard-WordPress-Vorlage. Also müssen wir es mit Elementor entwerfen. Aber wie gestalten wir es? Sie haben vielleicht bemerkt, dass ich von den Downloads zur Kontaktseite gegangen bin und die Blogseite übersprungen habe. Das war also beabsichtigt. Ich wollte Ihnen an dieser Stelle die Möglichkeit geben , etwas selbst zu tun, um diese Blogseite zu gestalten. Weißt du noch, wie wir unsere digitalen Produkte entwickelt haben? Diese digitalen Produkte, wir gingen in unsere Beiträge und sagen „Neu hinzufügen“. Und hier geben wir ein Produkt und einen Namen und legen alle Konfigurationen auf der rechten Seite fest, dann bearbeiten wir es im Front-End mit Elementor. So haben wir unsere digitalen Produkte entwickelt. Und denken Sie daran, dass wir gesagt haben, dass Erstellen eines digitalen Produkts das gleiche ist wie das Erstellen eines Blogbeitrags oder das Erstellen eines Podcasts. Und all diese verschiedenen Arten von Inhalten werden als WordPress-Posts erstellt. Also füge neu hinzu. Und denken Sie daran, dass wir auch Kategorien für die verschiedenen Produkte erstellt haben. Wenn wir also Artikel als Blogbeiträge, Artikel als WordPress-Posts hinzufügen Artikel als WordPress-Posts , müssen wir ihnen auch Kategorien geben. Wenn wir also einen Artikel über künstliche Intelligenz schreiben, können wir eine Kategorie über künstliche Intelligenz haben. Das ist also die Methode, um den Blogbeitrag zu erstellen. Jetzt, um sie im Frontend anzuzeigen. Denken Sie daran, wie wir diese Produkte hier auf dieser Seite angezeigt haben . Wir haben diese Gier erstellt und dann einige Elemente wie Metadaten, den Autor und den Auszug deaktivieren . Sie müssen sicherstellen, dass Informationen, die wir aus dem Raster dieser Produkte deaktiviert haben, sichtbar sind im Blogbeitrag aktiviert sind. Das ist also eine schnelle Herausforderung, die Sie annehmen müssen. Ich weiß, dass es jetzt ein bisschen kompliziert klingt, aber inzwischen glaube ich, dass Sie mehr Selbstvertrauen gewonnen haben , nachdem Sie all diese Lektionen gesehen haben. Und Sie können immer zu der Lektion zurückkehren , in der wir dieses Raster erstellt haben , und sehen, wie das geht, weil es dieselbe Methode ist. Ich hoffe, Ihnen gefällt diese Herausforderung. Lass mich wissen, was du darüber denkst. Wenn Sie Probleme oder Probleme haben, lassen Sie mich wissen, was Sie in der Diskussion denken. Lasst uns die Diskussion am Laufen halten. So erstellen Sie also eine Blog-Seite. Und sobald Sie mit der Blog-Seite fertig sind, ist es an der Zeit, darüber zu sprechen, wie Sie einen tatsächlichen Download-Button integrieren einen tatsächlichen Download-Button können , der tatsächlich ein Produkt herunterladen kann. Mal sehen, dass wir uns in den kommenden Lektionen in Kürze sehen werden. 28. das the erkunden: Und willkommen zurück. Ich hoffe, Sie haben sich etwas Zeit genommen , um die Blog-Seite zu erstellen. Und vor allem hoffe ich, dass Ihnen die Herausforderung gefallen hat. Wir haben gesehen, wie man die Kontaktseite und all diese anderen Seiten erstellt . Im Moment wollen wir also am Zahlungssystem arbeiten. Wir möchten diesem Produkt eine Zahlungsschaltfläche hinzufügen, aber dazu müssen wir ein Drittanbieter-Plugin namens Easy Digital Downloads installieren . Lasst uns also in unser Dashboard gehen. Und lass uns direkt in Plugins gehen, mu hinzufügen. Und hier drin suche ich nach einfachen digitalen Downloads. Sie sollten das erste Produkt sein, indem einfach digitale Downloads mit über 50000 Installationen verwenden. Ich installiere jetzt. Lassen Sie uns aktivieren. Alles klar, jetzt ist es aktiviert. Und um darauf zuzugreifen, gehen wir in Downloads ein. Und natürlich haben wir noch keine digitalen Produkte erstellt, was wir tun werden. Aber bevor wir das machen, möchte ich in die Einstellungen gehen. Wie Sie sehen können, haben wir viele verschiedene Optionen, einschließlich Add new. Wir können Kategorien für die verschiedenen Produkte erstellen , um dies zu tun. Tags, Zahlungshistorie, Kunden, Rabattcodes. Wir können Berichte einsehen. Ich möchte, dass wir in die Einstellungen gehen, um einen Überblick über die verschiedenen Konfigurationen zu erhalten. Also hier sind wir. Wie Sie sehen können, hat das Plugin in dem Moment, in dem wir einfach zu installierende Downloads installiert haben, auch einige Standardseiten generiert , die es Kunden ermöglichen, Zahlungen zu tätigen, und das ist die Checkout-Seite, diese Kaufbestätigungsseite. Transaktion ist fehlgeschlagen, wenn ein Kunde zu zahlen versucht und die Zahlung fehlgeschlagen Diese Seite und die Kaufhistorie werden angezeigt. Und natürlich all diese anderen Einstellungen. Wir haben Währungseinstellungen. Und Sie können fortfahren und die Art der Währung auswählen , in der Sie Zahlungen akzeptieren möchten. Dann haben wir verschiedene Arten von Zahlungen, Stripe, PayPal, Amazon und all diese anderen. Wir haben sogar Testzahlungen. Du kannst deine Tests machen, bevor es live geht. Unter Zahlungen haben wir verschiedene Einstellungen, die mit der Registerkarte verschachtelt sind. E-Mails. Wir haben verschiedene E-Mail-Vorlagen und können die Kaufbelege, neue Verkaufsbenachrichtigungen bearbeiten , all dies sind verschiedene Arten von E-Mails, die wir einrichten können, aber dies ist ein ganzer Kurs für sich allein. Wir können in diesem Kurs unmöglich alles über die Verwaltung Ihrer digitalen Produkte abdecken . Und wir können auch einige der Stile der Elemente im Frontend ändern , wie den Standardschaltflächenstil. Wir können es von Button zu Nur-Text ändern und Sie sehen den Button im Frontend. Wir können die Tastenfarbe ändern, wenn Sie möchten. Und natürlich sind hier viele weitere Einstellungen verschachtelt. Aber wie ich bereits erwähnt habe, werden wir natürlich nicht auf all diese eingehen. Jetzt, da wir einige grundlegende Informationen zu digitalen Download-Produkten haben , in der nächsten Lektion an, sehen wir uns in der nächsten Lektion an, wie Sie das Plugin verwenden, um diese Produkte zu verwalten, die wir als WordPress-Posts erstellt haben. Also lasst uns das in der nächsten Lektion machen. Wir sehen uns in Kürze. 29. Verbinde das the mit PayPal: Einfache digitale Downloads haben es sehr einfach gemacht , sich mit Ihrem PayPal-Konto zu verbinden. Wenn wir also einfach in den PayPal-Tab direkt hier ablegen könnten , müssen wir nur auf diesen Button klicken , der bequem hier platziert ist. Also klicke ich weiter und klicke darauf. Und dieses Pop-up wird hier erscheinen und versuchen, uns mit Papier zu verbinden. Sie benötigen also auf jeden Fall ein PayPal-Konto. Und wenn Sie kein PayPal-Konto haben, erstellen Sie hier ein neues Konto. Also importiere ich einfach die E-Mail , die ich für mein PayPal verwendet habe. Und dann heize als Nächstes. M weil ich schon habe ich bin Account. Wie Sie sehen können, heißt es in der Nachricht, dass ich zur Anmeldeseite weitergeleitet wurde. Also melde ich mich einfach bei meinem PayPal-Konto an. Und die beiden Konten werden integriert. Also lasst uns weitermachen und zustimmen und verbinden ihn. Das war's. Jetzt haben wir PayPal erfolgreich mit einfachen digitalen Downloads integriert . Und hier sind wir. Voila. Jetzt ist unser Plugin für digitale Downloads bereit, Zahlungen auf der Website zu akzeptieren. 30. Digitale Produkte mit Products: Willkommen zurück. Jetzt, da wir einen Überblick über das Plugin für einfache digitale Downloads hatten , lassen Sie uns damit unsere digitalen Produkte verwalten. also in Downloads gehe, klicke ich auf Neu hinzufügen. Und wie immer müssen wir diesem Download einen Namen geben. Und der Name sollte der Name des Produkts sein , das es in der Liste der Produkte darstellen soll , für die wir erstellt haben, könnte einfach mit der rechten Maustaste auf alle Beiträge klicken und diesen Link in einem neuen Tab öffnen , damit wir es können sieh es dir an. Lass es mich einfach aufmachen. Diese Produkte haben Namen, zum Beispiel die Bodybuilder-Vorlage. Was ich also tun muss, ist die Bodybuilder-Vorlage zu kopieren. Und dann lasst uns wieder in unsere Produkte eingehen. Und fügen wir den Namen dort ein. Denn jetzt erstellen wir einen Download-Button für diese Produkte. Gehen Sie also wieder hier rein, also müssen wir für die Beschreibung also müssen wir für die Beschreibung hier hineingehen und uns mit der rechten Maustaste darauf klicken und den Link in neuen Registerkarten öffnen , oder wir können uns das Frontend ansehen. Und jetzt muss diese Beschreibung von dieser einzelnen Produktbeschreibungsseite entnommen werden . Also gehen wir davon aus, dass Sie hier eine Beschreibung Ihres Produkts haben würden. Das ist die gleiche Beschreibung. Wir würden die Kopie erreichen und es hier hineinlegen. Also füge es da rein. Und das wird für Suchmaschinen sehr hilfreich sein denn Während dies das ist , was Kunden auf Ihrer Seite sehen, wird in den Suchmaschinenergebnissen diese Beschreibung in der einfacher digitaler Download-Button, den Sie erstellen. Dieser Text ist also dieser Text genau hier. Scrollen Sie also nach unten. Natürlich können wir jetzt hier den Preis festlegen. Ich lasse es bei 0, weil dies ein kostenloser Download ist. Und unten haben wir noch ein paar Einstellungen hier, wir können den Namen dieser Download-Datei festlegen . Geben wir es also einfach denselben Namen an, weil ich davon ausgehen würde , dass Sie Ihre Vorlage gleich gemacht haben. So bodybuilder-Vorlage, MM, die URL des Produkts, wenn der Kunde bezahlt, dies ist die URL, die er erhält, um auf das Produkt zuzugreifen. Also zeige ich dir, wie man diesen Link erstellt. Aber um diese anderen Bereiche hier zu erkunden, wie Sie auf der rechten Seite sehen können, haben wir einen Bereich für Kategorien. Wir können von hier aus eine neue Kategorie hinzufügen oder hier klicken. Und denken Sie daran, wie wir Kategorien für unsere Beiträge erstellt haben. Wir müssen also dieselbe Kategorie erstellen. Als wir also in die Registerkarte „Beiträge“ innerhalb der Kategorien gingen, hatten wir Elementor, Logos und Zeitschriften. Wir brauchen also dieselben Kategorien. Anstatt diese Seite zu verlassen und hier reinzugehen, erstellen wir die Kategorien. Nun, wir sind immer noch hier drin. Neues hinzufügen. Geben wir ihm einen Namen Elementor. Und lasst uns Enter drücken und das überprüfen. Lasst uns noch eins erstellen. Drücken Sie Enter und überprüfen Sie Logo-Magazine, in die er eintreten würde Da es sich um eine Elementarvorlage handelt, deaktivieren wir das Häkchen und überprüfen Sie die Elementor-Kategorie. Dann lass es uns veröffentlichen oder reiten. Jetzt ist unser Button veröffentlicht. Was wir also tun müssen, ist nach unten zu scrollen. Und auf der rechten Seite hier unten, In den Einkaufswagen Tage einen Kurzcode kaufen. Kopieren Sie diesen Link in das Feld. Und lasst uns unsere Produkte hier unter Posts eingehen. Also alle Beiträge. Und lasst uns den ganzen Weg nach unten wachsen, die Bodybuilder-Vorlage und bearbeiten Sie mit Elementor. Also klicke ich einfach mit der rechten Maustaste und öffne den Link in einem neuen Tab. Und hier sind wir. Denken Sie also daran, dass ich in früheren Lektionen erwähnt habe, dass sich dieser Button mit der Zeit ändern würde, um ihn zu ersetzen. Also wähle ich es aus und lösche es. Hier drin gebe ich einen kurzen Code ein. Kurzer Code. Ziehen Sie ein kurzes Code-Element direkt dort an diese Stelle. Und erinnere dich an diesen kurzen Code, den wir gerade von hier kopiert haben. Geh wieder rein und füge es da rein. Und jetzt haben wir unseren Kauf-Button. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen oder fahren. Da haben wir es also. Also können wir das Gleiche für diesen Teil tun. Löschen Sie das, und ich kann das einfach duplizieren, ziehen und ablegen. Das Update, das Lass uns sein, ändert sich wirklich. Und da haben wir es. Wenn ich also auf „Kaufen“ klicke, wird das Produkt in einen Warenkorb gelegt. Und jetzt können wir uns anschauen. Wenn ich also auf „Kasse“ klicke wird es zur Checkout-Seite weitergeleitet. Und unser Produkt ist dort mit einem Preis aufgeführt und der Gesamtbetrag muss bezahlt werden. Und direkt unten gab es drei Eingabefelder, in denen wir uns in unseren Details fühlen sollten. Also verwende ich hier einfach ein paar gefälschte Details. Und klicken Sie auf Kostenloser Download und der Kauf wird bestätigt. Jetzt sind hier die Details unseres Produkts und wir können auf die Produkte klicken, um es herunterzuladen. Aber wenn ich darauf klicke, schau dir an, was passiert. Würde in die Pik nehmen, tut mir leid, diese Datei konnte nicht heruntergeladen werden. Also was ist das Problem? Weil wir WordPress nicht gesagt haben , wo wir dieses Produkt bekommen sollen. Denken Sie daran, dass wir dieses Feld hatten, in dem wir die URL zum Produktbad eingeben sollten . Der Grund. Sehen wir uns also an, wie Sie den Produktlink in der nächsten Lektion hinzufügen können, wir sehen uns in Kürze. Okay. 31. Einen direkten Download-Link zu einem digitalen Produkt hinzufügen: Und willkommen zurück. Es ist also an der Zeit, den Link hinzuzufügen, Kunden die Produkte herunterladen können. Um dies zu tun, benötigen wir ein Dropbox-Konto. Und der Grund ist, dass Sie Ihre digitalen Produkte nicht auf Ihrem WordPress-Server speichern möchten Ihre digitalen Produkte nicht auf Ihrem WordPress-Server speichern , da dies Ihre Website wirklich verlangsamt. Unter normalen Umständen fügen Sie diese zur Bibliothek hinzu, wenn Sie Ihrer Website Bilder hinzufügen. Wir würden sie gleich hier hinzufügen, und das können wir tun. Das Problem ist jedoch, dass Ihre Website verlangsamt wird , da Sie jetzt anfangen, herunterladbare Dateien hinzuzufügen, die wahrscheinlich größer als Bilder sind , zu Ihrer Website. Und WordPress muss all diese Materialien laden. Das ist der Grund, warum wir eine Speicherplattform eines Drittanbieters benötigen, von der wir nur den Link auswählen müssen. Und ich bevorzuge Dropbox. Also habe ich hier mein Dropbox-Konto bereits eröffnet. Und ich bin in einem Ordner, in dem ich einige elementare Vorlagen habe. Und der Weg, um den Link zu erhalten, besteht darin , zuerst Ihre Produkte zu zippen. Wenn es sich beispielsweise um eine Logovorlage in jedem Zeilenformat handelt, z. B. im Adobe Illustrator-Format oder im Photoshop-Format. Oder wenn es sich um eine elementare Vorlage im JSON-Format handelt, stellen Sie sicher, dass Sie dieses Produkt haben, und zippen Sie es dann. Welche digitalen Produkte Sie auch verkaufen, Sie müssen es zippen lassen. Sobald es gezippt ist, ziehe ich dieses Produkt einfach in meinen Dropbox-Ordner. Nehmen wir an, dies ist ein Ordner, den Sie für diese Art von Produkten zugewiesen haben , und um Mentorvorlagen. Also lass ich es da rein. Gib es einen Moment zum Hochladen. Und jetzt ist es hochgeladen. Nehmen wir zum Beispiel an, dies ist das Produkt, das ich auf diese Seite stellen möchte. Also kopiere ich den Link. Und jetzt wird der Link kopiert, wie Sie in dieser Nachricht hier sehen können. Gehe hier zurück, digital und lass uns diese digitalen Produkte bearbeiten. Und ich scrolle nach unten bis dahin, wo wir den Link brauchen. Ich füge den Link dort ein. Und dann lasst uns den ganzen Weg zum Anfang des Links gehen. Ersetzen Sie das WWW zum Download durch DL. Und ersetzen Sie das nach Dropbox durch Benutzerinhalte. Jetzt ist es D2L Dropbox, user contents.com und dann Ihr Produkt, das diesen Link in einen direkten Download-Link ohne DL und Benutzerinhalte umwandelt einen direkten Download-Link . Der Standardlink öffnet dieses Produkt im Grunde nur in Dropbox. Aber was wir brauchen ist, wenn jemand auf den Link klickt, möchten Sie nur ein Popup, in dem er gefragt ob er das Produkt herunterladen möchte. Wenn unser Link bereit ist, lasst uns fortfahren und auf Aktualisieren klicken. Alles klar, denken Sie daran, dass wir diesen Produktlink hier verwenden . Lassen Sie mich es einfach kopieren, um sicherzustellen , dass wir den richtigen verwenden. Das sind Bodybuilder-Vorlagen. Also lasst uns hier reingehen und Edit with Elementor sagen. Und lass uns zu diesem Tab wechseln. In Ordnung, also hier ist unser Button. Ich will nur sichergehen, dass es derselbe Knopf ist. Also füge das da rein. Ja, immer noch der gleiche Knopf. Lasst uns das aktualisieren. Klicken wir hier unten auf Aktualisieren. Dann lasst uns eine Vorschau der Änderungen anzeigen. Also dieses Mal, wenn Sie auf Freier Kauf in den Warenkorb gelegt klicken , also zur Kasse gehen. Lassen Sie uns nachsehen, ob wir unser Produkt herunterladen können. In Ordnung, lasst uns die Standardanmeldeinformationen hier verwenden. Und hier sind unsere Produktdetails. Klicken wir also auf den Link. Und jetzt bietet es uns diese Option hier. Also kann ich „Datei speichern“ sagen. Die Datei beginnt hier oben herunterzuladen. Und wir können weitermachen und es öffnen. So fügen Sie den Link hinzu. Alles, was Sie tun müssen, ist im Grunde Ihre Produkte hinzuzufügen und sicherzustellen, dass sie mit einem Reißverschluss versehen sind. Fügen Sie Ihre Produkte zu Dropbox hinzu, gehen Sie dann zu Ihrem spezifischen Produkt und kopieren Sie den Link. Sobald Sie den Link kopiert haben, gehen Sie in Ihr Produkt, fügen Sie ihn ein und ersetzen Sie dann den WWW zum Herunterladen durch df. Dann nach Dropbox, Benutzerinhalt, Benutzerinhalt. Und jetzt ist Link fertig. Dann schnapp dir den Kurzcode und lege ihn hier im Front-End auf deiner Seite ab. Und jetzt ist dein Button fertig. Damit fügen Sie Ihren Produkten den Kauf-Button hinzu. Und das markiert das Ende dieser Lektion. Ich hoffe, es hat dir gefallen. Wir sehen uns in der nächsten Lektion. 32. Eine Anmeldeformular für die Seite hinzufügen: Willkommen zu dieser Lektion. Wir sind fast mit einer Website fertig, aber es gibt noch ein paar Dinge, die wir tun müssen, um die Benutzererfahrung auf unserer Website zu verbessern. Und eines dieser Wesen ist, dass wir ein Anmeldeformular hinzufügen müssen , um Benutzer-E-Mails zu erfassen , damit wir mit ihnen in Kontakt bleiben können. Denken Sie daran , dass ich erwähnt habe, dass wir hier auf der Homepage oder der Landingpage ein Anmeldeformular hinzufügen würden hier auf der Homepage oder der Landingpage ein Anmeldeformular . Also lass uns jetzt weitermachen und das machen. Wie gewohnt klicke ich auf Bearbeiten mit Elementor, damit wir den Bearbeitungsmodus beantworten können. Und hier scrollen wir nach unten. Also möchte ich dieses Formular zwischen diese beiden Vorlagenkategorien setzen. Das ist also irgendwo hier. Ich klicke auf Plus. Also können wir es hier hinzufügen. Und ich klicke auf Plus und füge diesen Abschnitt mit voller Breite hinzu. Und trennen wir es von diesem Abschnitt hier oben. Lassen Sie uns also das auswählen, wenn Sie in „Erweitert“ gehen , entfernen Sie diesen Link und geben wir ihm oben einen Rand von 50 an. Da haben wir es also. Während die Sitzung noch ausgewählt ist, gehen wir in den Stil und geben wir ihr ein Hintergrundbild. Also Hintergrundbild, wählen Sie dieses Pinselsymbol aus. Und hier drin geben wir ihm diesmal keine Hintergrundfarbe, wir geben ihm nur ein Bild. Also wähle ich hier ein Bild aus. Natürlich müssen Sie nach einem schönen Bild suchen , das die verkauften Produkte darstellt. Ich glaube, ich benutze das. Legen Sie Medien ein. Stimmt's? Während wir noch hier sind. für die Position, sagen wir Mitte, Anhänge zentrieren, scrollen, wiederholen, sagen wir keine Wiederholung. Und für die Größe sagen wir Cover. Versuchen wir es mit dem Kunden. Gehen wir einfach mit 100 Prozent, damit es den ganzen Abschnitt von links nach rechts ausfüllt. Und jetzt müssen wir hier natürlich etwas Inhalt hinzufügen , um seine Höhe zu erhöhen. Die Höhe dieses Abschnitts wird durch den Inhalt im Inneren bestimmt. Lassen Sie uns zuerst diese Spalte duplizieren. Jetzt haben wir zwei Spalten, und ich ziehe das ein wenig und ändere die Größe. Und hier möchte ich einen kurzen Code hinzufügen. Also ziehe ich den Kurzcode da rein. Und jetzt müssen wir uns natürlich einen kurzen Code aus dem Backend holen. Denken Sie daran, wie wir den Kontakt auf der Kontaktseite erstellt , wie wir den Kontakt auf der Kontaktseite Wir verwenden den Formulierer, um ein anderes Formular zu erstellen, das diese Seite aufgenommen wird. Gehen wir also zurück ins Back-End und erstellen ein Formular mit Formeln. Sie zuvor jedoch auf Aktualisieren. Richtig, also lasst uns das vorerst in einer Vorschau anzeigen. Scrollen Sie nach unten. Hier wird unser Formular sein. Gehen wir also ins Dashboard und scrollen Sie nach unten. Öffnen Sie den UP-Koordinator. Und wie Sie erwarten würden, haben wir bereits ein Formular, unser Kontaktformular. Jetzt wollen wir ein neues erstellen. Also gehe ich weiter und klicke auf Erstellen. In diesem möchte ich ein Newsletter-Anmeldeformular. Also klicke ich darauf und sage „Weiter“. Nennen wir es, melden Sie sich an. Erschaffe das. Und standardmäßig ist es bereits mit zwei Feldern gefüllt, Vorname und E-Mail-Adresse, dann mit der Schaltfläche „Abonnieren“. Lassen Sie uns also eine Vorschau anzeigen , bevor wir es veröffentlichen. In Ordnung, damit die Benutzer ihren Vornamen und ihre E-Mail-Adresse eingeben und dann unsere Mailingliste abonnieren können Vornamen und ihre E-Mail-Adresse eingeben und . Und wir können ihnen alle Informationen per E-Mail senden , die wir für sie als wichtig erachten. Da wir also mit unserem Formular zufrieden sind , veröffentlichen wir es. Alles klar, ich kopiere den Kurzcode. Und lass uns ins Frontend gehen. Und hier drinnen. Während dies ausgewählt ist, fügen wir es dort ein. Richtig, also fängt es schon an zu erscheinen. Lassen Sie uns auf Aktualisieren und Privilegienänderungen klicken. Es geht also nur darum zu sehen, was wir verbessern müssen. Scrollen Sie also nach unten , so sieht es aus. Aber jetzt, da der Hintergrund ein wenig ist, konnte BZ die Form nicht vom Hintergrund unterscheiden. Also lasst uns etwas dagegen unternehmen. also hier hineinspringe, wähle ich diesen Abschnitt aus und gehe in den gestalteten Hintergrund hinein, gehe in das Hintergrund-Overlay. Weil wir ein Overlay hinzufügen wollen. Klicken Sie auf diesen Hintergrundtyp. Geben wir ihm eine Farbe, vielleicht schwarz. Und das wäre im Hintergrund einfach dunkel , damit das Formular sichtbarer ist. Wir können auch die Deckkraft erhöhen, vielleicht bis zu diesem Zeitpunkt. Lassen Sie uns das aktualisieren und eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Stimmt's? Jetzt ist das Formular diesmal sichtbarer. Fügen wir auf der linken Seite etwas beschreibenden Text hinzu. Also wähle ich das aus, um eine Textüberschrift hinzuzufügen. Vielleicht können wir hier sagen, dass kostenlose Vorlagen direkt in Ihren Posteingang sinnvoll sind. Natürlich ändern wir dort die Farbe, geben Sie ihr vorerst ein Weiß. Und dann lassen Sie uns die Schriftfamilie zu Montserrat wechseln. Und ich möchte ihm ein Schriftgewicht von 800 geben und die Größe ein wenig erhöhen. Vielleicht bis zu diesem Zeitpunkt. Ich klicke erneut auf dieses Symbol , um die Elemente freizulegen und ziehe dort etwas Text hinein, einen beschreibenden Text. Und hier können wir den Benutzern sagen, was sie haben welche Maßnahmen sie ergreifen müssen um diese kostenlosen Vorlagen zu erhalten. Also, alles klar, also ergibt das Sinn. Das ist verlockend genug , denn denken Sie daran, was wir schaffen, ist ein Aufruf zum Handeln. Als CTA möchten wir, dass Kunden oder potenzielle Kunden Maßnahmen ergreifen. Und die Aktion erleichtert das Senden ihrer E-Mail an uns, aber sie können uns ihre E-Mail nicht geben wenn wir nichts Wertvolles haben, um ihnen zu geben. Ich denke also, dass dies eine gute Möglichkeit ist, Benutzer-E-Mails zu erfassen. Jetzt fügen wir hier oben etwas Spielraum hinzu, genau wie wir unten einen schönen Abstand haben. Wenn ich den Abschnitt auswähle, gehe ich in die erweiterte Polsterung. Lass uns vielleicht eine 50er geben. Lassen Sie uns die Änderungen aktualisieren und eine Vorschau anzeigen. Aber bevor wir Änderungen berechtigen, lassen Sie mich das einfach auswählen, gehen Sie in den Stil und lassen Sie uns die Farbe in Weiß ändern. Und dann aktualisiere das. In Ordnung, lasst uns eine Vorschau der Änderungen anzeigen. Großartig. Ich mag einen Aufruf zum Handeln, aber natürlich müssen wir hier etwas gegen diese blaue Farbe unternehmen. Also lasst uns etwas dagegen unternehmen. Springen ins Armaturenbrett. Geh ins Aussehen. Wie immer. Lassen Sie uns zunächst das flache Design wählen. Und dann gehen wir in Farben, Benutzerdefiniert, scrollen Sie nach unten zum Button. Und geben wir ihm diese gelbe Farbe. Denken Sie daran, dass Sie den gleichen konsistenten Gelbton verwenden müssen. Aber im Moment ziehe ich diese einfach, um ein schönes Gelb zu finden, mit dem wir vorerst arbeiten können. Also denke ich, dass das zufriedenstellend ist. Beim Schweben. Wir wollen, dass es weiß ist. Und im Fokus. Vielleicht auch weiß. Vorerst. Weil es weiß ist, kann es x keine Frauen sein. Lass es uns beim Schweben fehlen. Said sollte schwarz sein, da der Hintergrund der Schaltfläche weiß ist. Lasst uns das also aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. So sieht es jetzt aus. Mit diesen Änderungen gehen wir zum Frontend. Wählen wir das Formular selbst aus und klicken auf Anwenden. Oder reite da rein wir haben es. Lassen Sie uns also eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten oder rechts. Also denke ich, dass das vorzeigbar aussieht. Wir können damit arbeiten. Natürlich kannst du es viel besser machen. Definitiv. Noch zwei Dinge. Ich möchte, unsere Änderung, diese Schriftfarbe genau hier machen , wie Sie sehen können, sie sieht ein bisschen grau aus. Es ist nicht das scharfe Weiß. Die Etikettenfarben müssen also weiß sein. Wir werden sehen, wie das geht. Und ich möchte diese Polsterung auch oben mit der Polsterung unten ausgleichen diese Polsterung auch oben mit der , wie Sie sehen können, diese kleinen Abstände hier und oben hier oben. Wir müssen also sicherstellen, dass dies richtig ausgerichtet ist. Wenn ich hier wieder reingehe, wähle ich einen Abschnitt aus und lass uns eine untere Polsterung von vielleicht geben, lass uns 10 ausprobieren und lass uns 15 versuchen. Das sollte also den Abstand unten vergrößern. Aktualisiere das. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Wie sieht es jetzt viel besser aus. Lassen Sie uns also etwas gegen diese Labels unternehmen, die in unseren Formulierer-Editor zurückgehen , die in unseren Formulierer-Editor zurückgehen . Lassen Sie uns die Grundlagen des Feldes erweitern. Und unter den Fill-Grundlagen haben wir das Label. Wählen Sie also dort das Etikett und geben Sie ihm vielleicht die gelbe Farbe. Ich muss das nach oben schieben. Und dann lasst uns das noch suchen. Ich glaube, ich gehe damit hin. Und ich kopiere diesen Code nur für den Fall, dass ich ihn erneut verwenden muss, aktualisiere ihn. Wir können das Sternchen rosa lassen. Dies ist das Sternchen. Sieht rot aus. Ich kann nicht wirklich sagen , dass es rosa ist. Und jetzt, weil wir diese Änderungen haben, gehen wir in unsere Sicht, unseren Elementor-Arbeitsbereich. Wählen wir das Formular aus und wenden Änderungen an, da wir sie hier bereits aktualisiert haben. Scrollen Sie nach unten. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Alles klar, also sieht unser Handy jetzt viel besser aus. Also, mit dieser Zeit , um zur nächsten wichtigen Sache überzugehen , die wir tun müssen, bevor wir unsere Website beenden. Und das bedeutet, dass die Website auf verschiedenen Geräten, verschiedenen Bildschirmgrößen, reagiert . Mal sehen, wie man die Website auf Smartphones und Tablets vorzeigbar aussehen lässt, da sie auf dem Desktop bereits gut aussieht. Das machen wir in der nächsten Lektion. Wir sehen uns in Kürze. 33. Die Navbar: Willkommen zurück. Wir sind jetzt fast fertig mit unserer Website für digitale Downloads. Jetzt möchten wir die Webseiten auf verschiedenen Gerätegrößen reagieren lassen. Und was wir tun wollen, ist von oben zu beginnen , nach unten zu gehen, jedes einzelne Element ansprechend zu machen und auf den verschiedenen Gerätegrößen gut auszusehen . Und wir verwenden diese Homepage als Beispiel. Und dann verwenden Sie dieselben Prinzipien und Fähigkeiten, um den Rest der Seiten anzusprechen. Also ohne Western mehr Zeit, fangen wir mit der Navigationsleiste an und machen sie reaktionsschnell. Also gehe ich hier rein und fahre mit dem Mauszeiger darüber, klicke ich auf nav, damit wir in den Navigationsmodus wechseln oder hier reinfahren können . Jetzt haben wir unsere editierbare Navigationsleiste. Was wir tun wollen, ist hier unten auf dieses Symbol für den Responsive-Modus zu klicken , und das zeigt diese reaktionsschnelle Leiste an. Was wir tun wollen, ist in die mobile, mobile Ansicht zu springen. Und so wird das Menü aussehen. Normalerweise wollen wir unser Logo auf der einen Seite und unser Burgermenü auf der anderen Seite haben unser Logo auf der einen Seite . Also jetzt, weil sich diese beiden Elemente innerhalb desselben Abschnitts befinden, was dieser blaue Abschnitt ist. Im Moment nimmt das Logo auf mobilen Bildschirmen 100% der Breite ein. Wir wollen, dass es vielleicht die Hälfte der Woche belegt, und dieses Burgermenü wird die andere Hälfte einnehmen. Was wir also tun, ist diese Spalte auszuwählen. Es hält das Logo und unter Layouts, Spaltenbreite, Geben wir es 50 Prozent. Und jetzt, wie Sie dem Umriss entnehmen können, belegt er 50% der Breite des Abschnitts. Und du wirst feststellen, dass ich diese zusätzliche Spalte hier in der Mitte habe. Wir sollten hier eine Suchleiste haben, aber wir werden in der nächsten Lektion über die Suchleiste und die Suchfunktion sprechen . Also im Moment möchte ich nur v loswerden . Jetzt haben wir zwei Spalten, nur um sicher zu sein, lass mich zurück in den Desktop-Modus gehen. Und das sind die beiden Spalten, die übrig sind. Ziehen Sie das zuerst , um die Größe eines Logos zu ändern und das Menü auszuwählen. Ich gehe ins Layout und schiebe es auf die rechte Seite. So wie das. Da wir die zusätzliche Spalte, die sich hier dazwischen befand, losgeworden die zusätzliche Spalte, die sich hier dazwischen befand, mussten wir diese Anpassungen vornehmen. Jetzt gehen wir zurück auf die mobile Ansicht der Ostseite, haben wir diese beiden Spalten. Das sind bereits 50 Prozent. Wählen wir das aus. Und unter Layout-Spaltenbreite geben wir es auch 50 Prozent an. Alles klar, jetzt sind sie beide auf der gleichen Linie. Aber was wir tun wollen, ist dieses Menü auszuwählen und unter Layout nach unten zu scrollen und nach Responsive zu suchen. Und schieben wir es auf die rechte Seite. Jetzt ist es ganz rechts auf dem Bildschirm. Lassen Sie uns das aktualisieren und lassen Sie uns eine Vorschau der Änderungen anzeigen. Oder richtig. Jetzt haben wir also nichts anderes, was wir hier sehen können, weil wir es sind Im Moment sehen wir uns das Menü in der Vorschau an, um zu sehen, wie es auf mobilen Bildschirmen aussieht, drücken wir Control Shift I auf der Tastatur. Steuere die Umschalttaste I, um die DevTools aufzurufen. Und jetzt, da wir die DevTools aufgerufen haben , klicken wir hier oben auf dieses Symbol für den Responsive-Modus , das in den Responsive-Modus wechselt. Und jetzt, wie Sie hier oben sehen können, haben wir verschiedene Möglichkeiten, tatsächliche Geräte nachzuahmen. In diesem Dropdown-Menü haben wir beispielsweise verschiedene Arten von Telefonen. Galaxy, iPhone 11, 12, all diese Arten von Geräten. So sieht die Website auf Galaxy S 20, Linux, gerade aus. Und wenn wir auf das Dropdown-Menü klicken, sieht das Dropdown-Menü so aus. Natürlich können Sie viel mehr tun, um dieses Menü zu verbessern, aber ich lasse es einfach so. Ich glaube, ich bin zufrieden damit, wie es aussieht. Also klicke ich darauf, um den Responsive-Modus zu beenden, und klicke dann darauf, um die DevTools zu schließen. Gehen wir zurück und schauen wir uns an, wie es auf dem Tablet aussieht. So sieht die Website auf dem Tablet aus. Und ich glaube, es gefällt mir auch. Also und auf dem Desktop sieht es so aus. Gehen Sie also zurück in unser Dashboard, da wir jetzt mit unserer responsiven Navbar zufrieden sind. Gehen wir in die Seiten, alle Seiten. So können wir eine Vorschau der Navbar auf einer aktuellen Webseite anzeigen. Sehen wir uns also die Homepage an. Ich klicke mit der rechten Maustaste auf Anzeigen und öffne den Link in neuem Tab Wechseln wir diese Registerkarte und drücken nun die Umschalttaste I damit wir die DevTools öffnen und responsiven Entwurfsmodus wechseln können. Und jetzt sieht unsere Speisekarte mit unseren Inhalten so aus. Ich glaube, ich mag, wie die Speisekarte aussieht und wie die Navbar Lukes ist. also in der nächsten Lektion Lassen Sie uns also in der nächsten Lektion den Rest der Seite ansprechen, da sie, wie Sie sehen können, hier nicht ganz reaktionsschnell aussieht. Du musst etwas daran arbeiten. Lassen Sie uns also sehen, wie Sie den tatsächlichen Seiteninhalt ansprechen können. In der nächsten Lektion sehen wir uns in Kürze. 34. Die Homepage reaktionsstark machen: Willkommen zurück. In der letzten Lektion haben wir die Navbar auf verschiedene Gerätegrößen reagiert. Diesmal möchten wir den Hauptinhalt auf der Webseite auch auf verschiedenen Geräten ansprechen lassen. Lassen Sie mich also einfach diesen reaktionsschnellen Entwurfsmodus beenden , indem ich darauf klicke. Und dann lass mich die DevTools schließen. Dann lasst uns gehen und mit Elementor bearbeiten oder fahren. Also hier sind wir. Wie üblich. Klicken wir zunächst auf das Symbol für den Responsive-Modus. Und jetzt verrät es diese Bar. Fangen wir mit einem mobilen Bildschirm an. Also klick das rein. Hier sind wir. Also wähle ich zunächst die Spalte , die den Textblock enthält. Lassen Sie mich also einfach zurück in den Desktop-Modus gehen. Diese Spalte, die diesen Textblock enthält, ist die gleiche Spalte hier. ich es auswähle, möchte ich fortgeschritten hineingehen. Lassen Sie uns eine Polsterung von 20 geben. Das bringt also einen gleichmäßigen Abstand rund um den Inhalt von den Rändern. Und natürlich müssen wir die Größe dieser Schriftart reduzieren, hier die Schriftart auswählen, unbegrenzte Downloads, in die Topographie gehen, diese greifen und mit dem Ziehen beginnen. Ich glaube, ich mag es in dieser Größe. Ich gehe zurück in den Inhalt und gehe zur Ausrichtung, richte ihn so in der Mitte aus. Aktualisiere das. Klicken wir natürlich auf den Button. Und während es noch ausgewählt ist, gehen Sie zu Ausrichtung und richten Sie seinen Mittelpunkt aus. Aktualisiere das. Werfen wir einen Blick darauf, wie die Helden-Sektion aussieht. Vorschau der Änderungen. wird die Seite im Desktop-Modus geöffnet. Steuern Sie Shift I, um Webtools zu öffnen und in den Entwurfsmodus zu wechseln. Also denke ich, dass mir die Helden-Sektion gerade gefällt , sieht viel besser aus. Wir können die Polsterung des Bildes auf dem Bild des Heldenabschnitts erhöhen . Gehen Sie also wieder hier rein, wählen wir die Spalte aus , die das Bild enthält. Gehe in die erweiterte Polsterung, ohne diese Verbindung zu brechen. Und jetzt haben wir diesen schönen Abstand vom Rand. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Überschreiben. Da haben wir es also. Aber jetzt sollte dies auch auf die Mitte ausgerichtet sein. Also wähle ich das aus. Gehe in den Stil. Richten Sie es so an der Mitte aus. Lassen Sie uns als Nächstes zu den Vorlagen übergehen und sehen, wie sie aussehen. Aktualisieren Sie dies zunächst und sehen Sie die Änderungen in der Vorschau an. Scrollen wir nach unten. Wir müssen einige Anpassungen an der Schaltfläche vornehmen. Lasst uns etwas dagegen unternehmen. Alles klar, und dann die Fußzeile. Wenn ich hier zurückgehe, möchte ich zunächst den Abschnitt auswählen, der diese Vorlagen erweitert enthält. Lassen Sie uns auch so die Polsterung von 20 geben. Scrollen wir also nach unten und sehen, was die andere Kategorie installiert hat. Oder RI. Lassen Sie uns also eine Vorschau der Änderungen anzeigen. Okay, also lasst uns etwas gegen diese Knöpfe unternehmen. Also zurück, nun, die elementaren Vorlagen, Gier ist immer noch ausgewählt. Ich gehe mit Stil hinein. Lesen Sie mehr Button-Style. Und ich möchte diese Polsterung brechen. Und lassen Sie uns die Einstellungen für die mobile Ansicht konfigurieren. Also hier wollen wir vielleicht sagen, vielleicht sagen wir links 20 und die rechte 20, Top Fünf und die unteren Fünf. Und lasst uns das aktualisieren. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie also nach unten. Also müssen wir es nur ein bisschen nach rechts schieben. Also lasst uns in den Rand gehen. Lasst uns also, lasst uns vielleicht einen linken Rand von 70 geben. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Es scheint, als würde der Wert von 70 Pixeln ihn aus dem Warenkorb schieben. Also müssen wir offensichtlich etwas gegen den richtigen Spielraum unternehmen. Lass uns versuchen, ihm etwas wie 90 zu geben. 90. Und lassen Sie uns auch den linken Rand zu einer 90 machen. Und lasst uns sie aktualisieren. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Wir sind jetzt fast da und schauen uns die Position der Schaltfläche in Bezug auf den Text hier oben an, die Schaltfläche befindet sich in der Mitte, aber wir müssen die Auffüllung des Textes selbst erhöhen. Also lasst uns hier rein gehen. Mal sehen, ob wir die Polsterung auf der linken Seite erhöhen können , vielleicht 25. Lassen Sie uns das aktualisieren und eine Vorschau der Änderungen anzeigen. Und denken Sie daran, das ist nur das Nachahmen von Geräten. Am Ende müssen Sie die Website auf einem tatsächlichen Gerät testen . Wenn Sie also ein Smartphone haben, können Sie die Website auf Ihrem Smartphone öffnen und sehen, wie sie aussieht. Weil das der beste Weg ist, es zu testen. Aber davon abgesehen, denke ich vorerst, dass ich damit zufrieden bin. Gehen Sie vorbei, gehen Sie einfach zurück zu diesem Ort und sehen Sie, mit welchen Werten Sie enden werden. In Ordnung, jetzt sind die elementaren Vorlagenschaltflächen richtig ausgerichtet. Für die Magazinvorlagen müssen wir also nicht herausfinden, wie wir versuchen, die Schaltfläche erneut zu positionieren. Alles, was wir tun müssen, ist das Styling auf das Element der Vorlagen zu kopieren , weil alles an diesen beiden Rastern ist beim Styling gleich. Also lasst uns wieder hier rein gehen. also an eine beliebige Stelle innerhalb dieses Rasters klicke , die die elementaren Vorlagen enthält, kopiere ich. Dann scrolle ich nach unten und wähle dieses Raster aus, in dem die Magazinvorlagen irgendwo ausgewählt werden, mit der rechten Maustaste klicken und Stil einfügen. Wie Sie sehen können, wurden die Knöpfe in die Mitte gedrückt. Und ich möchte die Spalte auswählen, in der sie enthalten sind. Und denken Sie daran, dass diese andere Kolumne hier eine Polsterung von 20 hatte. Deshalb scheinen diese hier den Abstand zu haben. Also gehe ich hier rein, wähle diese Spalte aus, die in Erweitert geht, gib ihr einen Abstand von 20 oder rechts. Lasst uns diese Überschreibung aktualisieren. Wie Sie sehen können, müssen wir noch einiges an diesen Schaltflächen arbeiten. Also überlasse ich dir das, nimm dir etwas Zeit und positioniere alles richtig. Aber im Grunde ist es so, wie man alles richtig auf den Hauptinhalt positioniert . Das nächste, was wir reaktionsschnell machen wollen, ist, Ordnung, lasst uns etwas gegen die Polsterung unternehmen. Lass uns hier rein gehen. Ich scrolle nach oben. Wählen Sie diese Spalte aus , die gehalten wird. Wählen wir nun den Abschnitt selbst aus. Gehen Sie hinein und lassen Sie uns alles eine Polsterung von 20 behalten . Jetzt hat der gesamte Inhalt einen Abstand von 20 um ihn herum vom Rand. Das gefällt mir. Lasst uns das also aktualisieren. Und das nächste, was wir tun werden, ist die Fußzeile. also in der nächsten Lektion Lassen Sie uns also in der nächsten Lektion das Essen zubereiten oder reagieren, während wir auf den Abschluss dieses Kurses zugehen . Also wir sehen uns in Kürze. 35. Die Footer Making machen: Willkommen zurück. In den letzten beiden Lektionen haben wir die Navbar ansprechend gemacht und der Hauptkörperinhalt jetzt reagiert, damit das Essen reagiert, ohne Zeit zu verschwenden. Gehen wir in den Elementor-Ordner. Also hier sind wir. Lassen Sie uns gehen und klicken Sie auf den Responsive-Modus. Und fangen wir mit mobilen Bildschirmen an. Das Logo scheint in Ordnung zu sein, aber was wir tun wollen, ist den Abschnitt selbst auszuwählen. Und wie Sie sehen können, bin ich hier von der Navbar behindert damit ich den Abschnitt auswählen kann. Alles was ich tun muss, ist Control I zu drücken , um den Navigator aufzurufen. Und jetzt kann ich den Abschnitt selbst auswählen. Also zuerst möchte ich hineingehen und ihm rundum die Polsterung von 20 geben. So. Und ich mag das Logo in der Mitte so. Lasst uns weitermachen und die sozialen Icons auch in die Mitte legen . Reduzieren wir die Größe dieses Titels. Also gehst du in den Stil. Es kann also in einer Zeile so sein. Und schließlich, lasst uns fortfahren und wählen Sie die Quick Links aus. Und in den Stil gehen. Lasst uns sie so in die Mitte legen und aktualisieren. So sieht das Foto aus. Wenn ich also wieder in unsere Seiten gehe, möchte ich unsere Homepage öffnen , damit wir sie von oben nach unten ansehen und sie jetzt im Responsive-Modus sehen können . Klicken Sie also mit der rechten Maustaste auf Ansicht, öffnen Sie den Link in neuer Registerkarte Und lass uns zu diesem Tab gehen. Alles in Ordnung, also drücke ich Control I, damit wir in die DevTools und dann zum Responsive-Modus wechseln können . Also klickst du darauf. Scrollen Sie also nach unten. In, So sieht unsere Webseite auf Smartphones aus. Nehmen Sie sich Zeit, um es aufzupeppen und stellen Sie sicher, dass es super großartig aussieht. Wie sieht es auf anderen Geräten wie dem iPad aus? So sieht es auf dem iPad aus. Lassen Sie uns hier etwas gegen die Kanten unternehmen. Wie Sie sehen können, brauchen wir etwas Polsterung an den Rändern, aber ansonsten scheint alles andere auf dem Ziel zu liegen. Da wir also bereits die Fußzeile bearbeiten, wechsle ich in den Fußzeilenbereich und klicke auf das Tablet. Und so sieht es auf dem Tablet aus. Lass mich die schließen. Wählen Sie also den Abschnitt selbst erneut aus. Also muss ich noch einmal den Navigator aufrufen einen Abschnitt im Tablet-Modus auswählen. Wir wollen ihm auch rundum eine Polsterung von 20 geben. In Ordnung, wie Sie jetzt sehen können , haben wir rundum diesen Abstand , der großartig aussieht. Und jetzt wechsle ich zu diesem Tab und schließe das. Beenden wir den Responsive-Modus und schließen ihn. Dann lasst uns mit Elementor bearbeiten. Wechseln wir also in den Responsive-Modus und gehen wir direkt in den Tablet-Modus. Also kann ich diesen Abschnitt noch einmal nicht auswählen. Also kontrolliere I. Und jetzt wähle ich den Heldenbereich aus, weil es der oberste Abschnitt ist, gehe ich hinein und eine Polsterung von 20 rundum. Lassen Sie uns das in C. Also ja, ich denke, es sieht gerade gut aus, aber wir müssen die Größe dieses Titels hier reduzieren. Wenn ich das auswähle, gehe ich in die Topographie ein und reduziere diese Größe so. Dann wählen wir diesen Abschnitt weiter aus. Lasst uns noch 20 geben. So. Machen wir das Gleiche für diesen Abschnitt, fortgeschritten. Gleiche gilt für diesen Abschnitt endlich. Und lasst uns dort updaten. Sehen Sie sich die Änderungen an. In Ordnung, so sieht es im Desktop-Modus aus. Drücken Sie Control Shift I , um die DevTools aufzurufen, wechseln Sie in den Responsive-Modus. Und jetzt sehen wir es uns auf einem iPad an. Derzeit ist es also auf iPad eingestellt. Fangen wir an zu scrollen. Und es sieht auch auf dem Tablet fantastisch aus. Aber jetzt müssen Sie hier natürlich etwas gegen diese Schaltflächen unternehmen und sehen, ob wir sie richtig ausrichten können. Natürlich würde ich davon ausgehen, dass Sie die gleichen Fähigkeiten nutzen werden , die Sie verwendet haben, um die Zielseite anzusprechen und die andere Seite auch ansprechend zu machen. Da wir die Navbar jedoch bereits reagiert haben, müssen Sie dies nicht auf jeder Seite tun , da sie bereits auf jeder Seite reagiert. Was also noch übrig ist, ist der Hauptinhalt auf all diesen anderen Seiten. Bisher haben Sie ein voll funktionsfähiges Geschäft mit digitalen Downloads. Jetzt können Sie Ihre Vorlagen für digitale Produkte hochladen Ihre Vorlagen für digitale Produkte und den Leuten davon erzählen. Leute können auf Ihre Website kommen, diese Produkte und diese Vorlagen erkunden und diejenigen herunterladen, die sie verwenden möchten. Zum Abschluss in der nächsten und letzten Lektion möchte ich über die Suchfunktionalität sprechen, möchte ich über die Suchfunktionalität sprechen da wir das immer noch nicht berührt haben. Und es ist wichtig, es auf jeder Website zu haben , die Produkte enthält, nach denen die Leute suchen könnten. Also lasst uns das in der nächsten Lektion machen. Wir sehen uns in Kürze.