Erstellen Sie einen WordPress mit Elementor (kostenlose Plugins)

1. EINFÜHRUNG: Und willkommen zurück zu einer anderen großartigen Klasse mit mir, Ken Visa. Es ist immer ein Vergnügen, dass Sie heute hier mit einer brandneuen großartigen Klasse nur für Sie kommen. Ich unterrichte seit 1,5 Jahren hier auf Skillshare Elementar . Und heute kommt es zu einer ganz besonderen Klasse für jeden, der einen E-Commerce-Shop oder einen Online-Shop mit WordPress aufbauen möchte . Ich habe mehrere Klassen, die den Schülern beibringen , wie man elementar verwendet erstellen Sie Webseiten und voll funktionierende Websites von Grund auf neu. Dieser Kurs ist ein bisschen anders, denn anders als in den anderen Klassen, in denen ich Ihnen beibringe, Webseiten und Websites von Grund auf neu zu gestalten. Ich zeige Ihnen, wie Sie mit vorgefertigten Vorlagen Zeit sparen können. Das stimmt. Du hast mich gehört. Schöne vorgefertigte Vorlagen , die bereits von sehr qualifizierten Designern entworfen wurden . Und alles, was Sie tun müssen, ist den Platzhalterinhalt durch Ihren eigenen Inhalt zu ersetzen . So sparen Sie Zeit, wenn Sie Ihre Website nicht von Grund auf neu erstellen möchten. Wenn Sie physische Produkte erstellen, bauen oder herstellen und ein physisches Geschäft haben, ist es jetzt an der Zeit, Ihr Geschäft in den Online-Bereich zu verlegen , wo Sie mehr Kunden erreichen können. So können Sie Ihren Laden betreiben während Sie ihn gleichzeitig online betreiben und an Leute verkaufen, die gerne online Sachen kaufen. Dieser Kurs zeigt dir also, wie das geht. Und ich freue mich sehr, es dir zu bringen. Das ist also die Website, die heute entwerfen wird. Und wenn wir den Kurs beenden, haben Sie einen voll funktionsfähigen E-Commerce-Shop, der mit WooCommerce gebaut wurde. Wenn du so aufgeregt bist wie ich, lass uns anfangen. 2. Astra Theme installieren: Hier sind wir auf dem Dashboard. Wie Sie sehen können, ist dies eine brandneue Installation von WordPress, WordPress 5.9, um das erste, was wir tun müssen, um das Astra-Theme einfach zu installieren. Gehen wir also zu Erscheinungsthemen. Natürlich haben wir die Standardteams, die mit jeder neuen Installation von WordPress geliefert werden, aber wir sind nicht an Liste drei interessiert, wenn wir neue hinzufügen möchten, wird zum WordPress-Theme weitergeleitet Repository. Und genau hier haben wir viele Themes von Drittanbietern , die Sie sofort installieren und verwenden können. Aber derjenige, an dem wir uns wie erwähnt interessieren, ist Astra. Also klicke ich auf Installieren. Okay, jetzt wo es installiert ist, aktivieren wir es. Jetzt ist das neue Theme aktiviert. Es ist das aktive Thema auf unserer Website. Und du wirst feststellen, dass wir hier oben dieses Pop-up haben. Wir haben diese Benachrichtigung hier , die Danke für die Installation von Astra-Urkunde besagt. Wissen Sie, Aster enthält Tausende von einsatzbereiten gestarteten Vorlagen. Und in dieser Klasse werden wir dieses Plug-In installieren , das als Starter Templates-Plugin bezeichnet wird, da wir verschiedene Arten von Vorlagen untersuchen werden , die verfügbar sind, um unsere Arbeit zu erleichtern. Wenn Sie die Art von Person sind, die lernen möchte, Websites oder Webseiten mit Elementor von Grund auf neu zu erstellen , aus einem leeren Blatt. Du kannst jeden meiner anderen Elementarklassen direkt hier auf Skillshare ansehen. Ich habe eine ganze Reihe von ihnen Ihnen zeigen, wie Sie eine Landingpage von Grund auf neu erstellen , indem Sie Element für Element hinzufügen , bis Sie eine ganzseitige Seite haben. Aber in diesem Fall oder für diese Klasse, die wir verwenden, werden wir uns ansehen, wie wir unsere Arbeit mit kostenlosen vorgefertigten Vorlagen erleichtern können. Sie sind großartig und du wirst sehen , warum wir jetzt unser Astra Theme installiert haben. In der nächsten Lektion erfahren Sie, wie Sie dieses Plugin installieren und wie Sie mit der Verwendung der Vorlagen beginnen. Wir sehen uns in Kürze. 3. Installiere das Starter Templates Plugin: Wir sind zurück. Jetzt. Astra ist das aktive Thema und wir möchten mit Installation von gestarteten Vorlagen beginnen, um die Startervorlage verwenden zu können. Also klicken wir auf Erste Schritte und wird zu einem Setup-Assistenten weitergeleitet , der uns hilft, alles so einzurichten, wie wir es schreiben wollten. Sie können sich also einen Moment Zeit nehmen und sich dieses Video ansehen , um von diesem Kerl vom The Astor-Team zu hören . Aber ich klicke jetzt auf Deine Website erstellen , damit wir sofort loslegen können. Wie Sie sehen können, haben wir drei verschiedene Arten von Bauherren, drei verschiedene Drag-and-Drop-Builder hier. Aber der, an dem wir interessiert sind, ist elementar. Also entscheide ich mich für Elementor. Durch Klicken auf Elementor werden die Vorlagen angezeigt , die wir mit Elementor bearbeiten können. Wie Sie sehen können, sind sie hier in verschiedene Kategorien eingeteilt , je nachdem , was Sie erstellen möchten. Aber natürlich interessieren wir uns einen E-Commerce-Shop oder einen E-Commerce-Shop. Also klicke ich hier auf eine dieser Kategorien. Zum Beispiel wird Sportgeschäft mit verschiedenen Arten von E-Commerce-Geschäften präsentiert . Sportbekleidungsgeschäft Markengeschäft, Recyclingschuhgeschäft. Eine ganze Reihe von Vorlagen, die wir verwenden können. Aber in dem Beispiel, das ich Ihnen bei der Einführung der Klasse gezeigt habe, verwende ich diese Vorlage genau hier, den Kosmetikladen. Also klicke ich darauf, um es auszuwählen. Der nächste Schritt, den wir hier machen müssen, ist Hinzufügen eines Logos für unsere Website. Wählen Sie ein Logo für Ihre Website aus. Sie können es später jederzeit aktualisieren und ich zeige Ihnen später, wie Sie das Logo aktualisieren können. Also lasst uns weitermachen und klicken Sie hier auf Datei hochladen. Lasst uns Dateien hochladen. Also wähle ich mein Logo von meinem Computer aus. Wie Sie sehen können, habe ich eine Reihe von Logos erscheinen, Mein Name. Natürlich verwenden Sie Ihr eigenes Firmenlogo. Ich klicke darauf und sage „Öffnen“. Ich sage Select. Und wie Sie sehen können, erscheint das Logo bereits hier. Die Farben stimmen nicht wirklich mit dem Hintergrund überein. Und das ist sehr bewusst, denn ich wollte Ihnen in einer bevorstehenden Lektion zeigen, wie dieses Logo in ein anderes Logo ändern können, das dem Hintergrund entspricht. Lassen wir das also dort liegen und sagen Continue. Hier können wir die Farben auswählen, die das Team im Allgemeinen haben soll. Oder, und natürlich können wir sie später jederzeit aktualisieren. Standardmäßig sind dies die gewählten Farben. Ich lasse sie standardmäßig, weil wir sie, wie ich bereits erwähnt habe, später ändern können und wir werden sehen, wie das geht. Und unsere Standardschrift ist das Monitoring. Ich lasse es dabei und sage Continue. Grundsätzlich ist dies ein Anmeldeforum des Sternenteams, in dem Sie scheinbar keine Newsletter über das Neueste erhalten können, das mit dem Astra-Thema passiert. Aus dem Astra-Thema. Also mache ich weiter und fülle meinen Namen auf. Also Ken, meine E-Mail, ich bin ein Experte, aber natürlich wirst du dich vielleicht als Anfänger oder so etwas anmelden . Ich sage Experte, weil ich ein Experte bin , der eine Website für mich selbst erstellt. Ich möchte das nicht überprüfen , da ich mich schon irgendwann für den Newsletter angemeldet habe. Wenn Sie unsensible Daten mit dem Astra-Theme teilen möchten , können Sie dies überprüfen lassen, aber Sie müssen den Demo-Inhalt importieren , den Sie in der Vorlage selbst gesehen haben. Also lass diese anderen. Chatten Sie. Ich sage „senden“ und baue meine Website. Es dauert ein paar Minuten, um zu bauen. Herzlichen Glückwunsch, die Vorlage ist jetzt installiert und angepasst werden , dass sie genau so aussieht, wie Sie es wollten. Du kannst diesen Kerl beobachten und dir anhören, was er zu sagen hat. Als Nächstes müssen wir auf Ihre Website anzeigen klicken und Sie werden zu einer neuen Registerkarte weitergeleitet, auf Sie Ihre WordPress-Website sehen können. Da haben wir es. So sieht die Website aus. Natürlich werden wir uns anschauen, wie wir es anpassen können. Um diesen Ort zu verlassen, klicken Sie oben rechts oben auf diese Schaltfläche Zum Dashboard beenden oben rechts oben auf diese Schaltfläche Zum Dashboard . Klicken Sie das an. Jetzt sind wir hier im Dashboard. Die Leute bitten uns, ihnen eine Bewertung zu geben, aber ich habe sie bereits bewertet, also entferne ich das einfach. Sprung zu dem Tab, auf dem wir die Website geöffnet hatten. Hier sind wir. Lass mich einfach scrollen und dir zeigen, was wir haben. So sieht die Vorlage aus. Wir werden sehen, wie Sie alles anpassen können, um Ihre eigenen Inhalte hinzuzufügen und es zu Ihrer eigenen Website zu machen. Mit anderen Worten, wir werden sehen, wie Sie die Website nach Ihren Wünschen personalisieren können. Öffne die scharfe Seite. sind wir. Die anderen Seiten funktionieren alle einwandfrei. In der nächsten Lektion sehen wir uns an , wie Sie die Website so anpassen können, dass sie genau so funktioniert, wie Sie es möchten. 4. WooCommerce installieren: Willkommen zurück. Jetzt, da wir unser WordPress-Team haben, wird uns mitgeteilt und wir haben bereits die Vorlage ausgewählt , mit der wir arbeiten möchten. Es ist an der Zeit, Zahlungsmittel für unsere Website zu installieren. Jeder einzelne E-Commerce-Shop, der mit WordPress erstellt wurde, verwendet ein Plugin, um Zahlungen auf der Website zu akzeptieren. Und es gibt mehrere Zahlungsanmeldungen auf der WooCommerce-Plattform. Und einer der besten der Welt ist WooCommerce. Du musst davon gehört haben. Lassen Sie uns also WooCommerce auf einer Website installieren und Zahlungen integrieren , damit Kunden Zahlungen auf unserer Website und Nebenprodukten tätigen können. Wenn ich in das Dashboard gehe, gehe ich zu Plugins. Wir haben WooCommerce bereits installiert. Es ist eines der Plugins , das installiert wurde, während wir die Vorlage nicht installiert haben, und es ist bereits aktiv. Wenn wir also auf WooCommerce klicken, wird dies zu diesem Setup-Assistenten weitergeleitet, wo wir jetzt unseren WooCommerce mit der Website verbinden können. Lassen Sie uns also unsere Adresse und all diese Details eingeben . Ich deaktiviere das Häkchen, weil ich diese Informationen nicht erhalten möchte . Fahren Sie fort und wählen Sie Ihr Land aus. Ich meine Kenia. Nairobi. Nairobi County in Kenia. Also sage ich weiter und sage Continue. Nein danke. Und natürlich, in welcher Branche ist das Geschäft tätig? Gesundheit und Schönheit. Fortsetzen? Ja, ich verkaufe physische Produkte. Ich sage weiter. Wie viele Produkte verkaufen sich zuverlässig? Vielleicht 11.100. Und ich verkaufe momentan woanders? Nein. Ich richte kein Geschäft für unsere Kunden ein, also sage ich Continue. Hier haben wir zusätzliche kostenlose Erweiterungen , die Sie optional installieren können. Ich möchte keines davon auswählen, also deaktiviere ich sie einfach und sage „Weiter“. Wir haben dieses Astra Theme bereits installiert, daher klicke ich mit meinem aktiven Thema auf Weiter. Dies sind die Themen, die mit WooCommerce geliefert werden. Sie werden von WooCommerce zur Verfügung gestellt, aber ich wollte mit dem Astra-Theme fortfahren. So wird das Kontinuum auf die WooCommerce-Homepage in unserem Dashboard weitergeleitet , wie Sie hier links sehen können. Und natürlich ist hier ein kurzer Tooltipp, um uns ein bisschen mehr darüber zu erzählen , was wir von WooCommerce erwarten können. Ich klicke einfach auf Weiter oder schließe es einfach. Lasst uns fortfahren und Zahlungen einrichten. Zusätzliche Zahlungsgateways. Wir benötigen PayPal-Zahlungen , damit Kunden mit PayPal-Zellen-Setup bezahlen können . Im Moment installieren wir das PayPal-Zahlungs-Plugin , dass Personen Zahlungserweiterung sind. Und es wird nicht diskutiert. Als Nächstes konfigurieren wir das PayPal-Zahlungskonto. Lasst uns einrichten. Okay, wie Sie sehen können, befinden wir uns unter WooCommerce in den Einstellungen. Dort wurden wir weitergeleitet. Wir waren hier, jetzt wurden wir an diesen Ort gebracht. Und natürlich haben wir PayPal-Zahlungen bereits aktiviert und können jetzt alle gängigen Kredit- und Debitkarten auf der Stärke des PayPal-Netzwerks sicher akzeptieren . Das nächste, was wir tun müssen, ist PayPal zu aktivieren. Mit anderen Worten, wir müssen dieses PayPal-Plugin mit unserem PayPal-Konto verbinden . Sie benötigen also ein PayPal-Konto, mit dem Sie sich verbinden damit das Geld auf dieses PayPal-Konto gesendet wird. Und dort kannst du dein Geld wachsen lassen. Also muss ich mich einloggen. Ich gebe mein Passwort ein. Erlauben Sie PayPal, Ihr Konto mit WooCommerce zu verbinden. Entwickler. Stimme zu und verbinde dich. Danke, dass du dich angemeldet hast. Sie haben jetzt ein Konto und haben erfolgreich mit WooCommerce-Entwicklern integriert PayPal erfolgreich mit WooCommerce-Entwicklern integriert. Mit anderen Worten, Leute können Zahlungen in unserem E-Commerce-Shop leisten und das Geld wird auf Papier geschickt , von dem wir es abheben können. Gehen wir also zurück zu WooCommerce-Entwicklern. Das ist in unserem Dashboard. Wie Sie sehen können, konnten diese Aktionen alle diese Informationen aus Papier abrufen. Früher bin ich in Papier gegangen und diese Ausweise und Schlüssel in Papier gebracht und habe sie hier eingeklebt. Aber wie Sie sehen können, haben sie den Prozess verbessert. Es sind nur ein paar Klicks und die Informationen werden hier automatisch angezeigt. Nachdem das erledigt ist, wir weiter und sagen Änderungen speichern. Nehmen wir nun an, aktiviere das PayPal-Gateway. Und natürlich gibt es hier einige andere Einstellungen , die Sie bearbeiten können, aber ich werde sie nicht ändern. Gehen wir also zurück in die Registerkarte „Allgemein“. Genau hier können wir unsere Adresspositionen und Lieferdetails festlegen . Verkauf von Standorten. Verkaufen Sie also an alle Länder Versandorte? Wohin versenden Sie zu solchen Details? Und was ist Ihre Währung im Moment, es zeigt Kenia-Schilling, weil ich Kenia meine. Und wenn Sie hier etwas ändern, können Sie, wenn Sie Steuern und Berechnungen aktivieren möchten, dies tun und dann auf Änderungen speichern klicken. Aber natürlich habe ich nichts geändert, also werde ich das nicht aktualisieren. Und Sie können sich weitere Tutorials ansehen, wie Sie WooCommerce auf jeder WordPress-Website einrichten können. Es gibt unzählige Tutorials auf YouTube, die Ihnen genau zeigen, wie das geht. Wenn wir das jetzt tun würden, würde dies diese Klasse zu lang machen , und das wollen wir nicht tun, denn wie Sie sehen können, haben wir hier viele andere Einstellungen einzurichten. Lasst uns weitermachen und auf Zahlungen klicken. Wie Sie sehen können, haben wir eine Liste verschiedener Möglichkeiten, wie wir Geld akzeptieren können. Und da wir die PayPal-Erweiterung abgeschlossen haben, ist sie jetzt aktiviert, was bedeutet, dass Sie sie richtig eingerichtet haben. Also mach weiter und vergewissere dich, dass es aktiviert ist. Und wenn wir Änderungen daran vornehmen möchten, können Sie jederzeit auf Verwalten klicken. Sie werden zu dieser Seite weitergeleitet , die wir uns bereits angesehen haben. Jetzt, da wir WooCommerce eingerichtet haben, ist es an der Zeit Erscheinungsbild der Websites mit den verschiedenen benutzerdefinierten und dem Elementor-Seitenersteller anzupassen mit den verschiedenen benutzerdefinierten . 5. Anpassen der Kopfzeile: Richtig, jetzt ist es an der Zeit, unsere Zielseite und den Rest der Seiten anzupassen . Beginnen wir zunächst mit der Navbar gleich hier. Das erste, was wir tun möchten, ist dieses Logo zu ändern , da dies, wie Sie gerade sehen können, nicht sichtbar ist. Also klicke ich auf Anpassen. Dies ist einer der Bereiche, in denen wir die Zielseite anpassen können . Also lasst uns weitermachen und den Header bearbeiten. Dies ist die Kopfzeile, in der sich das Logo und die Navbar befinden. Um das zu tun, gehen wir in den Header-Builder oder wir können direkt auf ein Element klicken, wenn dieses Symbol angezeigt wird. Aber ich gehe in Header-Builder ein. Sie werden feststellen, dass wir diese Darstellung des Designs hier unten haben. Also das Site-Titel-Logo, hier ist ein Logo. Das Hauptmenü, hier ist es. Und das Warenkorbsymbol oder die Kartenfunktionalität, die genau hier ist. Sie werden also feststellen, dass dieses Bild hinter der Navigationsleiste und dem lokalen Bild ganz nach oben läuft . Das bedeutet, dass dieser Header transparent ist. Wenn es eine Hintergrundfarbe hätte, würden wir nicht sehen, dass dieses Bild ganz nach oben geht. Sie werden also genau hier feststellen, dass wir transparente Header-Option angepasst haben. Und wenn wir diesen Hinweis hier lesen, wird der Header auf dieser Seite aus diesem transparenten Header gesetzt . Denn wenn ich einfach auf eine andere Seite springen könnte, werden Sie feststellen, dass die Kopfzeile hier ein dunkles Logo hat, weil sie einen weißen Hintergrund hat. Dies ist kein transparenter Hintergrund. Einige Teile der Website müssen also teilweise auf der Zielseite oder auf jeder Seite, auf der das Bild ganz nach oben läuft, ein dunkles Logo haben teilweise auf der Zielseite oder auf jeder Seite, auf der das . Es hat einen transparenten Header. Und das bedeutet, dass wir ein helles lokales Leben haben müssen , wie das weiße Logo. In diesem Fall. Genau hier können wir das Bild auf dieser Seite bearbeiten, das Logo auf diesen weißen Hintergrundseiten. Und wenn wir das Logo auf dem transparenten Hintergrund bearbeiten wollten , müssen wir auf diese Option klicken. Also werden wir in Kürze darauf zurückkommen. Zuerst möchte ich mit einer benutzerdefinierten transparenten Header-Option hineingehen . Hier können wir also auswählen, auf welchen Bildschirmen diese Einstellungen wirken sollen. So können wir gleichzeitig Desktop, Handy oder Desktop und Handy wählen. Wie Sie sehen können, haben wir zwei Optionen des Logos. Logo und ein Logo geschrieben. Und mal sehen, was passiert, wenn wir das Netzhautlogo ändern. Ich habe irgendwo ein weißes Logo. Wählen Sie Bild aus. Jetzt werden Sie feststellen , dass das Logo immer noch das dunkle Logo ist, das wir hatten. Und das sagt uns im Grunde, dass das Logo, das genau hier auf unserer Website angezeigt auf unserer Website das normale lokale ist , in dem ein Logo geschrieben wird, genau das gleiche Logo wie das normale Logo aber es ist doppelt so groß wie das normale Logo. Wenn dies also ein, ein 100 mal 100 Pixel ist, sollte dies 200 mal 200 Pixel betragen, und es ist normalerweise doppelt so groß wie das normale Logo, da es die Option ist, die auf High-End-Geräten wie wie die MacBook Pros und iPhones. So hat WordPress es eingerichtet. Um dies in Weiß zu ändern, müssen wir das normale Logo auch in Weiß ändern. Darauf klicke ich. Aber denken Sie daran, dass wir gesagt haben, dass das Retina-Logo doppelt so groß wie das normale Logo sein sollte , aber zur Veranschaulichung verwende ich das gleiche Logo. Da haben wir es. Wir können die Breite des Logos anpassen , indem wir diese Leiste genau hier ziehen. Lass es mich etwas größer machen. 384. Und ich sage „Veröffentlichen“. Jetzt sieht es viel besser aus. Gehen wir in die Design-Registerkarte und sehen, was wir ändern können. So können wir hier den Hintergrund in diesem Bereich ändern. Indem Sie darauf klicken. Wie Sie sehen können, ist es jetzt nicht mehr transparent, aber wir möchten es so transparent lassen. Lassen Sie uns das also nicht ändern . Jetzt möchte ich in diesen Bereich gehen und diese Seite neu laden, aktualisieren. Sie werden feststellen, dass das Logo immer noch als dunkles Logo erhalten bleibt , da das einzige Logo, das wir geändert haben das Logo in der transparenten Kopfzeile war. Wenn wir also hier auf Site-Titel und Logo klicken. Sie werden feststellen, dass das Logo hier immer noch dieses Logo ist. Wir haben unser normales Logo, aber wir haben unser Retina-Logo nicht geändert. Wenn also jemand unsere Website auf einem Mac Pro oder einem iPhone ansieht , wird er dieses Kosmetik-Logo sehen. Wir müssen diese also auf die doppelte Größe des normalen Logos ändern , das wir verwendet haben. Aber zur Veranschaulichung verwende ich immer noch das gleiche Logo. Da haben wir es. Lassen Sie mich also auf Veröffentlichen klicken und ich wollte Ihnen sehr schnell etwas zeigen. Wenn wir zu dieser Seite wechseln können, lassen Sie mich das aktualisieren. Unser Logo funktioniert. In Ordnung, so ändert man das Website-Logo von der Standardeinstellung auf ein neues personalisiertes Logo. Natürlich können wir hier das Warenkorbsymbol bearbeiten. Wenn wir auf Auto klicken, können wir ins Design gehen. Wir können auch entscheiden, ob Sie die Warenkorbsumme anzeigen möchten . Jetzt wird der Warenkorb insgesamt angezeigt. Sie können auch den Kartentitel anzeigen. Einfach so. Wir können auch das Hauptmenü bearbeiten, welches unser Menü ist. Wir können hier klicken, um das Menü zu konfigurieren. Wenn Sie darauf klicken, können wir auswählen , welches Menü wir anzeigen möchten. Derzeit haben wir drei verschiedene Menüs. Aber wir wollten das Hauptmenü anzeigen. Natürlich. Lass mich sehen, wie dieses andere Menü aussieht. Das ist ein Kontaktmenü, ein Schnelllink-Menü. Gehen wir also zurück zum Hauptmenü. Jetzt, da wir mit unseren Änderungen zufrieden sind, werde ich weitermachen und weiterhin veröffentlicht werden. Lassen Sie mich den Customizer schließen, damit wir sehen können wir unseren neuen Zielseiten-Header sehen können. So sieht es aus. Ich glaube, es gefällt mir, wie es aussieht. Das nächste, was wir tun möchten, ist, den Rest der Seite mit Elementor zu bearbeiten , da wir zwei Möglichkeiten haben, diese Seite zu bearbeiten. Verwenden des Customizers und Verwendung von Elementor da verschiedene Teile der Landingpage entweder mit den Astra-Theme-Einstellungen oder dem Elementor-Builder erstellt wurden entweder mit den Astra-Theme-Einstellungen oder dem Elementor-Builder erstellt . Also haben wir den Header innerhalb des Customizers bearbeitet , da er mit den PM-Einstellungen des Sternchens erstellt wurde . Die inneren Teile des Hauptteils der Webseite werden jedoch mit Elementor erstellt. In der nächsten Lektion werden wir also sehen, wie Sie die Elemente auf dieser Seite mit Elementor bearbeiten können. Wir sehen uns also in der nächsten Lektion. 6. Anpassen des Hero: Wir sind zurück. Es ist jetzt an der Zeit, diese Seite zu bearbeiten. Und natürlich werden, wie ich in der vorherigen Lektion erwähnt habe, verschiedene Teile der Seite mit verschiedenen Tools oder Einstellungen erstellt . Und wir haben gerade gesehen, wie man den Header mit dem Customizer bearbeitet den Header mit dem Customizer , weil das verwendet wurde, um den Header zu erstellen. Aber der Rest des Körpers hier wurde mit Elementor erstellt. Um es zu bearbeiten, müssen wir es also mit elementar bearbeiten. Also gehe ich hier hoch und klicke auf Bearbeiten mit Elementor. Okay, also hier sind wir. Ich werde diesen Navigator los. Und wir schauen uns zunächst den ersten Abschnitt hier an. Was ist, wenn wir das Hintergrundbild ändern wollen? Was wir tun müssen, ist den Abschnitt auszuwählen , der das Bild enthält, da dieses Bild als Hintergrund verwendet wird, können wir anstelle eines Bildes eine Farbe für den Hintergrund haben. Sobald Sie diesen Abschnitt ausgewählt haben, ändert sich dieser Bereich, um die Einstellungen dieses bestimmten Abschnitts aufzurufen . Sie können es im Wort-Edit-Bereich genau hier erkennen. also in den Stil gehen, werden Sie feststellen, dass wir hier unter der Registerkarte „Hintergrund“ haben. Wenn wir es erweitern, werden Sie im Hintergrund feststellen, dass wir das Bild und das Hintergrundbild haben. Ich hatte diese beiden Bilder bereits als andere mögliche Hintergründe hochgeladen . Mal sehen, ob wir damit arbeiten können. Ich wähle das aus und sage Medien einfügen. Sofort wechselt es zu diesem neuen Hintergrund , also müssen Sie natürlich ein schönes Bild für Ihren Hintergrund vorbereiten, nur für den Fall, dass Sie ein anderes Bild verwenden möchten . Und ich schlage vor, dass Sie es 1920 mal 1080 Pixel schaffen. Gehen wir also zurück und schauen uns die Größe 1920 um 1080 Pixel an. Mit anderen Worten, mach es HD. Stimmt's? Jetzt können wir den Hintergrund einklappen und mit dem Hintergrund herumspielen, wobei der Hintergrund die Dunkelheit des Overlays überlagert, das sich oben auf dem Bild befindet. Und lass mich dir zeigen, wie das aussieht. Lass mich dir die Intensität zeigen. Du kannst es dunkler oder heller machen. Wir können auch hier reingehen und die Farbe selbst ändern. Wenn Sie also etwas rötliche Farbe oder bläulich durchschauen möchten , können wir ihm anstelle von Schwarz immer das blaue Overlay geben. Das war's. Lassen Sie mich den Hintergrund zusammenbrechen. Und ich denke, das ist okay. Lassen Sie mich also updaten. Und dann lasst uns eine Vorschau der Seite anzeigen. So sieht die Seite gerade aus. Natürlich ist es nicht die am besten aussehende Seite, aber wie Sie sehen können, haben wir viel Flexibilität in dem, was wir tun können, um sie zu verbessern. Sie werden feststellen, dass das Bild an einem Ort bleibt, wenn wir mit dem Scrollen beginnen . Wenn Sie zusammen mit allem anderen in diesem Abschnitt scrollen möchten , müssen wir nur hier im Hintergrund hineingehen , im Hintergrund. Unter Anhang. Im Moment hatte er gesagt, dass wir es reparieren sollen, können wir es ändern, um zu scrollen. Wenn wir jetzt scrollen, geht es zusammen mit dem Rest des Abschnitts nach oben. Aktualisiere das. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Stimmt's? Als Nächstes möchten wir diese Schaltfläche bearbeiten , nur für den Fall, dass Sie die Farbe der Schaltfläche bearbeiten möchten . Wählen Sie die Schaltfläche selbst aus, und dies ändert sich in die Schaltfläche „Bearbeiten“. Und das sind die Einstellungen für den Button. Lass uns in den Stil gehen. Wir können die Hintergrundfarbe in jede gewünschte Farbe ändern, oder dies ist die Textfarbe. Lass es uns wieder in Weiß ändern. Wir möchten den Hintergrundtyp ändern. Wie Sie sehen können, hat sich der Hintergrund geändert. Sie können ihm beispielsweise eine rote Farbe geben. Lassen Sie uns beim Schweben etwas geben, wie lassen wir es bei Weißen auf schweben. Aktualisiere das. Was hat den Button noch bearbeitet? Es muss auf eine bestimmte Seite verweisen. Wir müssen ihm einen Link geben. Also fügen wir das unter dem Button-Tab hinzu. Der Link kann es so etwas wie Jetzt geben so etwas wie Jetzt , wenn jemand auf diese Schaltfläche klickt, wird es zu weitergeleitet, wie Sie hier unten sehen können, wenn ich den Mauszeiger darüber fahre, wird es genommen auf meine website.com dieselbe URL, die angezeigt wird. Wenn wir uns in einem neuen Tab öffnen wollten. Lassen Sie mich das aktualisieren und Ihnen sehr fummelige kleine Änderungen zeigen . Los geht's. Wenn wir also den Mauszeiger über den Button bewegen, werden Sie feststellen, dass die URL , die darauf hinweist, hier unten angezeigt wird. Wenn wir darauf klicken, öffnet es sich. Es öffnet den Link auf derselben Seite. Lass mich einfach zurückgehen. Was wäre, wenn wir stattdessen in einem neuen Tab öffnen wollten? Was wir können Wohlfühl-Button erleichtern, ist immer noch ausgewählt. Mx, der Link, den wir dieses Zahnrad haben, klicken Sie darauf und sagen Sie in neuem Fenster öffnen. Dann aktualisiere das. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Jedes Mal, wenn jemand auf diese Schaltfläche klickt, wird sie in einem neuen Tab geöffnet und diese Seite bleibt intakt, sodass Sie weiter auf der Ruhe-Seite surfen können. Also lasst uns das anklicken. Und jetzt haben wir einen neuen Tab geöffnet, unsere Seiten sind immer noch da. Natürlich können wir diesen Text auch hier oben bearbeiten, indem wir eine beliebige Stelle innerhalb dieses Elements auswählen. Lass uns in den Stil gehen. Lasst uns das zusammenbrechen. Erweitern Sie den Inhalt. Die Titelfarbe kann in jede gewünschte Farbe geändert werden . Sagen wir, du liest. Denken Sie natürlich daran, dass ich darauf bestehe, dass dies nicht die am besten aussehende Website ist, die zur Veranschaulichung dient. Nehmen wir an, wir wollen es so hellblau machen. Wir möchten die Farbe der Beschreibungsschrift ändern. Sie können es in jede gewünschte Farbe ändern. Lass es einfach bei gelb, weiß. Lasst uns das aktualisieren. Jedes Mal, wenn wir ein Element auf der Webseite ändern oder bearbeiten wollten , klicken Sie einfach hinein. Wenn wir dies also ändern oder bearbeiten wollten, klicken wir hinein. Und jetzt ist es das, was wir hier bearbeiten. Um das Erscheinungsbild selbst zu ändern, müssen wir in die Registerkarte „Stil“ gehen. Dort können wir die Textfarbe ändern. Vielleicht sagen wir, ein Gelb. Lassen Sie uns nun eine Vorschau der Änderungen anzeigen. So. Wir können immer die Höhe des Heldenabschnitts anpassen. Während es noch ausgewählt ist, können wir in das Layout gehen. Lassen Sie mich unter dem Layout zusammenklappen, dass wir diese Mindesthöhe haben. Und du wirst feststellen, dass der untere Balken hier auf und ab geht , während er diese bewegt. Wir können die Mindesthöhe einstellen. Ich stelle es gerne auf etwas wie 60 ein, damit es den ganzen Bildschirm füllt, auch wenn Sie einen hohen Bildschirm haben. Aber ich möchte es bei 60 belassen. Lassen Sie mich das aktualisieren. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Wenn ich scrolle. Beachten Sie, dass ein Teil des Hero-Abschnitts weit über unsere Bildschirmgröße hinausgeht . Und natürlich gibt es sehr viele Einstellungen, die Sie anpassen können um anzupassen, wie der Heldenbereich aussieht. Wir haben gerade ein paar berührt, aber Sie können mit all diesen anderen Einstellungen herumspielen , um den Heldenbereich zu personalisieren und genau so aussehen zu lassen, wie Sie es wollten. Es liegt also an dir zu verstehen, wie sich jede Einstellung auf den Heldenbereich auswirkt. Wie ich bereits erwähnt habe, können Sie, wenn Sie lernen möchten, wie in all diese Einstellungen eingehen können, Sie in all diese Einstellungen eingehen können, jeden meiner Kurse ansehen, in denen ich Ihnen zeige, wie Sie eine Landingpage, eine Webseite oder eine Website mit entwerfen Elementor von Grund auf von Grund auf von einem leeren Schiefer genau hier. Denken Sie daran, dass wir nur eine vorgefertigte Vorlage anpassen, um uns die Dinge zu erleichtern. Wir sind jetzt damit fertig, den Heldenbereich zu bearbeiten. Das nächste, was wir tun möchten, ist diesen inneren Körperbereich zu bearbeiten. Und genau das werden wir in der nächsten Lektion machen. Wir sehen uns in Kürze. 7. Anpassung des Körperbereichs: Wir sind zurück. Ich habe ein paar Änderungen an der Helden-Sektion vorgenommen. Ich habe diese Schriftfarbe in Weiß geändert. Und dies auch, und ändern Sie das Hintergrund-Overlay in Schwarz, nur um das allgemeine Erscheinungsbild des Heldenabschnitts zu verbessern. Aber natürlich glaube ich, dass Sie bereits herausgefunden haben, welche Farben Sie verwenden möchten, und Sie haben sie auf Ihren Heldenbereich angewendet. Das nächste, was wir tun wollen, ist, dass wir direkt in unseren Redakteur springen und uns diese ansehen. Wie Sie sehen können, haben wir zwei Produktreihen. Und wenn Sie auf das Produkt klicken, führt es Sie zur Produktbeschreibung oder zu dem spezifischen Produkt. Springen wir in unseren Elementor-Editor. Sie werden feststellen, dass hier kein Produkt angezeigt wird. Trotzdem. Auf der aktuellen Seite. Die Produkte tauchen auf. Was passiert. Wir verwenden etwas, das als Kurzcode bezeichnet wird. Wordpress verwendet Shortcodes, um Daten aus verschiedenen Teilen der Website abzurufen . Wenn ich also auf dieses Feld klicke, obwohl es leer ist, hat es tatsächlich Inhalt. Es zieht diesen Inhalt nur dynamisch aus dem WooCommerce, der in unserem Dashboard gespeichert ist. Da wir auf dieses bestimmte Element geklickt haben, wurde dieser Bereich geändert, um die Verknüpfung zu bearbeiten, da es sich um einen Kurzcode handelt. Wir bearbeiten jetzt den Kurzcode. Und hier drin heißt es: Gib deinen Kurzcode ein. So sieht der Kurzcode aus. So läuft es also. Sobald Sie Ihre Produkte mit WooCommerce im Back-End im Dashboard erstellt haben . Woocommerce bietet Ihnen die Möglichkeit, diese Produkte auf Ihrer Seite anzuzeigen. Wenn ich das entferne und einfach die Produkte lasse. Das ist ein kurzer Code. Deshalb werden die Produkte jetzt genau hier in unserem Editor angezeigt . Und wenn ich diese Vorschauänderungen aktualisiere, sind die Produkte natürlich auf jeden Fall da. Aber jetzt der Grund, warum wir es haben, haben wir diese zusätzlichen Details hier, denn WooCommerce bietet Dinge, die wir Attribute nennen. Dies sind nur Möglichkeiten, um genauer darüber zu sprechen, was Sie anzeigen möchten. Was wir also tun, ist im Grunde, wenn ich diese entferne, Elementor sage, dass er die Produkte, die wir mit WooCommerce erstellt haben, mit diesem kurzen Code anzeigen soll die Produkte, die wir mit WooCommerce erstellt haben . Das sagen wir. Und dann möchten wir sagen, dass wir acht Produkte zeigen, indem wir diese Attribute hinzufügen. Das ist also die Grenze mit einem Gleichheitszeichen. Dann die Anzahl der Produkte, die Sie zeigen möchten. Deshalb zeigen wir nur acht an. Und die Anzahl der Spalten beträgt vier. Deshalb haben wir vier Spalten, also lassen Sie mich dies in drei Spalten ändern , damit wir sehen können, was passiert. Jetzt werden drei Spalten angezeigt. Das bedeutet, dass wir hier unten eine zusätzliche Reihe mit zwei Produkten haben , da wir immer noch Produkte haben. Wenn wir jedoch sechs Produkte als Limit sparen , hätten wir zwei Reihen mit drei Spalten. Einfach so, weil wir genau sechs Produkte haben. Lassen Sie mich das aktualisieren. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Jetzt zeigen wir drei Spalten mit sechs Produkten. Wir können mit diesen Zahlen herumspielen, wie es uns gefällt. Wir können auch sagen, hey, wir können nur ein Produkt sagen und werden nur ein Produkt anzeigen. Keine Sorge, ich zeige Ihnen in einer späteren Lektion, wie Sie WooCommerce-Produkte im Back-End im Dashboard von Grund auf neu erstellen WooCommerce-Produkte im Back-End im Dashboard von Grund . Im Moment schauen wir uns nur an, wie wir sie anzeigen können. Sie lernen, wie Sie Ihre Produkte erstellen. Natürlich können Sie Ihr Geschäft mit diesen erfundenen Produkten hier nicht aufbauen . Ich hatte bereits weitergemacht und die offizielle WooCommerce-Dokumentation über Kurzcodes geöffnet . Also hier sind wir. Wie benutzt man Shortcodes. Sie können weitermachen und mehr darüber erfahren, wie Sie WooCommerce-Shortcodes verwenden können. Aber was ich Ihnen gerade zeigen wollte ist dieser Teil genau hier, der Kurzcode der Produkte. Der Kurzcode der Produkte ist einer unserer robustesten Shortcodes , in denen verschiedene andere Strings ersetzt werden können in früheren Versionen von Google Commerce verwendet wurden. Hier sind die Anzeigeattribute. Stunden darüber reden. Die Grenzwerte zeigen die Anzahl der anzuzeigenden Produkte an, und genau das haben wir genau hier. Limit sucht. Dann sehen wir uns die Spalten an, wobei die Anzahl der Spalten, die standardmäßig angezeigt werden sollen, ist vier. Im Moment zeigen wir drei Spalten. Und wie Sie sehen können, sind diese beiden nicht die einzigen Attribute, mit denen wir sehr genau auf die Produkte eingehen können sehr genau , die wir auf unserer Seite anzeigen möchten. Nehmen Sie sich also etwas Zeit und studieren Sie, wie Sie diese Attribute verwenden können. Wenn Sie mehr Kontrolle darüber haben möchten was auf Ihrer Seite angezeigt wird. Aber so geht es im Grunde genommen . Das ist der Kern davon. Das nächste ist natürlich, diese Texte zu bearbeiten, indem Sie diese Texte auswählen. Diese ändern sich automatisch in die Bearbeitungsüberschrift, da dies eine Überschrift ist. Und wir können ändern, was es sagt. Die besten Produkte der Stadt. Und wenn wir möchten, dass dies ein Link ist, können wir natürlich hier eine Link-URL hinzufügen. Also füge ich stattdessen einfach einen Platzhalter hinzu. Wenn Sie möchten, dass der Link in einer neuen Registerkarte geöffnet wird, klicken Sie einfach auf das Zahnrad und aktivieren Sie „In neuem Tab öffnen“. Und jetzt, wenn jemand darüber schwebt, ändert es sich zu diesem Link-Symbol. Wenn wir das Aussehen ändern wollen, gehen wir natürlich in den Stil ein und können die Änderungen hier vornehmen. Nehmen wir an, wir ändern es in so etwas, erreichen rosa, rötliche Farbe. Gleiches gilt für dieses Element. Indem Sie es auswählen. Wir können ändern, was im Titel und in der Beschreibung steht . Erstaunlich. Sie können das auch ändern. Das ist also der Titel und die Beschreibung. Und wir können auch einen Link hinzufügen. in den Stil gehen, können wir ändern, wie es aussieht. wir also dieses Bild reduzieren , weil sie kein Bild dafür haben Wenn wir ein Bild hinzufügen, es möchten wir das nicht tun, aber wir möchten es vielleicht ändern die Farbe gerade jetzt. Für den Titel. Kann es vielleicht in eine gräuliche Farbe anstelle von dunkelschwarz ändern. Ändere die Typografie wenn wir wollen. Also möchte ich diese vielleicht in REO ausgetauscht ändern , etwa zwei Monate austauschen. Jetzt geht es zurück nach Montserrat. Aktualisiere das. Scrollen Sie also nach unten. Lassen Sie uns zunächst die Änderungen speichern und in der Vorschau anzeigen. So sieht es aus. Das nächste, was wir uns wohlfühlen wollen, dieser Abschnitt. Scrollen wir nach unten. Der Abschnitt ist in zwei Spalten unterteilt. Diese Spalte mit dem Bild und dieser Spalte mit dem Textblock. Und ein kurzer Tipp, den ich dir vergessen habe, ist, wenn du den Mauszeiger über diese Bearbeitungssymbole hier an den Ecken oder Spalten bewegst. Oder sogar dieses Icon hier oben. soll einige zusätzliche Einstellungen aufrufen ohne irgendwohin zu klicken. Das kommt rein. sehr praktische Möglichkeit, dies zu erreichen, ist, in dieses Burger-Menü zu gehen, in Einstellungen und Benutzereinstellungen und Bearbeitungsgriffe zu überprüfen. Wenn wir nun den Mauszeiger darüber bewegen, wird dieser zusätzliche Einstellungsschalter angezeigt, der Ihnen hilft, Ihre Arbeit viel schneller zu erledigen. Wenn wir nun eine Spalte duplizieren möchten oder müssen klicken Sie auf diese Spalte, anstatt mit der rechten Maustaste zu klicken. Lassen Sie mich und gehen Sie hinein, duplizieren. Lass mich das einfach entfernen. Aktualisieren Sie, dass die Bearbeitung dieses Abschnitts immer noch dasselbe ist wie das, was wir mit diesen Textblöcken hier oben gemacht haben . Von der Helden-Sektion, die die Texte hinuntergeht, ist er immer noch das gleiche Element. Es ist eine Überschrift. Genau wie diese Überschrift. Wenn Sie replizieren möchten, was wir bereits getan haben, um uns Zeit zu sparen, können wir einfach mit der rechten Maustaste auf Kopieren klicken. Gehe zum selben Elementtyp , der immer noch eine Überschrift ist. Rechtsklicken und Stil einfügen. Und es wird alle Stile, die wir auf diese anderen ähnlichen Elemente angewendet haben, auf dieses neue, auf diese anderen ähnlichen Elemente kopieren diese anderen ähnlichen Elemente angewendet haben, auf dieses neue, . Weil das so ist. 8. Anpassen des CTA: Hier sind wir gerade dabei zu sehen, wie Sie ein Formular im Back-End mit WP-Formularen erstellen, jederzeit verschwendet wird, lassen Sie uns in das Dashboard springen. Und natürlich werden Sie feststellen, dass eine der Funktionen, die wir hier haben, WP-Formulare sind. Dies ist eines der Plugins, die während der Installation der vorgefertigten Vorlagen installiert wurden während der Installation der vorgefertigten Vorlagen installiert wurden . Wenn ich also auf WP-Formulare oder alle Formulare klicke, klicke ich einfach auf WP-Formulare. Standardmäßig haben wir diese beiden Formulare. Sie werden feststellen, dass wir hier eine kurze Code-Spalte haben und jedes Formular einen Kurzcode hat. Dies ist der Kurzcode , der dieses Formular darstellt. Wann immer der Kurzcode irgendwo im Frontend erscheint, sagt dieser kurze Code WordPress hey, display, das Anmeldeformular. Derselbe Fall gilt für dieses Formular hier. So können wir ein neues Formular hinzufügen, das durch den Vorgang des Hinzufügens eines neuen Formulars geführt wird. Aber ich habe ein einziges Problem mit diesem spezifischen Formular-Plugin. Das heißt, die meisten Funktionen, die Sie benötigen um von einem ausländischen Plug-In, unserem Premium, profitieren zu können , müssen Sie für das Plugin bezahlen , um diese Funktionen nutzen zu können, aber ich zeige Ihnen ein Option. Also lass uns von hier aus gehen und ich möchte dir zeigen, was genau ich meine. Bearbeiten wir also das Anmeldeformular. Derzeit ist dies die WP-Formulare ideate Gehen Sie ins Front-End und wählen Sie dies aus. Das ist genau diese Form. Es ist ein Anmeldeformular. Alles klar. Gehen wir zu Edit. Ich kann dir genau zeigen, was ich meine und dir dann eine Lösung geben. Dies ist die Form, die wir haben. Dies ist das Feld, das wir im Formular haben und geben Sie Ihre E-Mail-Adresse und dann den Abonnieren-Button ein. Genau das haben wir hier. Das Problem, über das ich gesprochen habe E. Wenn Sie zum Beispiel ins Marketing gehen möchten, haben wir nur die Möglichkeit, uns mit Marketing-Tools in diesem Bereich zu verbinden . Und um diese anderen zu verwenden, müssen wir in der kostenpflichtigen Version dieses Plugins sein um dieses Formular mit Mailchimp zu verbinden , damit sie bei der Anmeldung an unser MailChimp-Konto, MailChimp, gesendet werden Mailingliste. Wir müssen in der Pro-Version sein, um Zahlungen über unser Formular akzeptieren zu können, müssen wir auf eine kostenpflichtige Version upgraden. Das meinte ich mit den meisten Funktionen, die Sie haben möchten, um von einem Formular-Plug-in zu profitieren. Unsere Prämie hier. Es gibt ein sehr nettes kostenloses Plugin, das all diese Funktionen kostenlos angeboten hat. Was wir also tun müssen, ist in Plugins zu gehen, installierte Plugins entfernen WP-Formulare, die das aktivieren. Dann lösche ich es einfach. Okay, also lasst uns zu Neu hinzufügen gehen. Und jetzt im Plugins-Repository, suchen wir nach Forming Nature mehr als 200.000 aktive Installationen und wenn sie von einem sehr renommierten WordPress-Unternehmen namens WP und MU Dev entwickelt wird. Ich mochte diese Leute und ich empfehle gerne Produkte , die ich gerne benutzt habe. Ich habe keine Zugehörigkeit zu diesen Typen. Ich mag ihre Produkte einfach. Also lasst uns jetzt die Natur für mich installieren . Lass es uns aktivieren. In Ordnung, jetzt haben wir es als eines der Installierten Plugins und scrollen nach unten. Für mich sollte hier keiner ganz unten auf dieser Liste stehen. Also gehen wir rein. Ich habe später einfach für mich geklickt. Dies ist unser Dashboard. Lassen Sie mich diese Werbung hier schließen, weil wir nicht nach der Premium-Version suchen. Und natürlich wird hier eine Zusammenfassung all Ihrer Formen von Erwähnungen sein. Die ganze Anzahl der Einreichungen, die Personen in den Foren, die Sie auf Ihrer Seite haben, abgeschlossen haben, zieht Erwähnungen auf erhöhen Sie die Einreichungen, weil wir dies getan haben, da Sie mit diesem Plugin Formulare, Umfragen und Quizfragen erstellen können. Lassen Sie uns also ein Formular erstellen und wird mit dieser Liste vorgefertigter Vorlagen präsentiert. Was wir brauchen, ist eine Newsletter-Anmeldung. Lass uns weitermachen. Nennen wir ihm einen Namen. Anmeldeformular und klicken Sie auf Erstellen. Hier sind wir. Dies sind die Felder, die uns zur Verfügung stehen. Benennen Sie zuerst eine E-Mail-Adresse, und dann haben wir die Schaltfläche „ Abonnieren“, und wir haben die Einfügefelder. Wenn wir hier darauf klicken, können wir die Möglichkeit haben, weitere Felder hinzuzufügen. Und Sie werden feststellen, dass wir hier eine Stripe-Option und eine PayPal-Option haben. Grundsätzlich können wir unserem Forum kostenlos Zahlungen hinzufügen . Denken Sie daran, dass wir im anderen Plug-In die Premium-Mitgliedschaft haben mussten um die Zahlung auf unserem Formular nutzen zu können. Dies ist nur ein Beispiel dafür was mit diesem Plugin möglich ist. Aber ich werde hier kein Feld hinzufügen . Denn was wir tun, ist ein Anmeldeformular, keine Zahlung für ihn. Also möchte ich den Vornamen entfernen , weil das kein Feld ist, das wir brauchen. Wir brauchen nur eine E-Mail-Adresse. Also lösche das. Und jetzt sehen wir uns das Formular selbst an. So sieht es also aus. E-Mail-Adresse, Schaltfläche „Abonnieren“. Schließen wir das und veröffentlichen wir es. Jetzt, da das Formular fertig ist, erhalten wir den Kurzcode, um es anzuzeigen. Also lasst uns weitermachen und das kopieren. Es wurde erfolgreich kopiert. Eine andere Möglichkeit, diesen Kurzcode zu kopieren, besteht darin, zu gehen, lassen Sie mich schließen, um hier zum Namen des Formulars zu gehen . Klicken Sie auf dieses Zahnrad und kopieren Sie den Kurzcode. Und es wurde erfolgreich im Front-End kopiert. Heben Sie das hervor. Entfernen Sie die WP Forms-Shortcodes und fügen Sie das neue Formular ein Kurzcode ein. Sofort ändert sich dies in das neue Formular , das wir erstellt haben. Aktualisieren wir das und lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Da haben wir es. Nette, einfache Form, die mit einem schönen kraftvollen Schleppen erstellt wurde. Denken Sie daran, dass ich einige andere Funktionen erwähnt habe, für die Sie bezahlen müssen. In der anderen Form integriert sich das Plugin in Mailinglistendienste von Drittanbietern wie Mailchimp. Oder wenn Sie Ihre Marketingkampagnen über eine Mailingliste durchführen möchten , damit dieses Formular die Personen übermittelt , die Ihre Mailinglisten in einem Drittanbieterdienst einrichten , müssen Sie dafür bezahlen das. Aber mit dem Formulierer müssen Sie das nicht. Nachdem wir dieses Formular erstellt haben, , dass Sie diese Formulardaten an eine der verbundenen Apps von Drittanbietern senden und sich werden Sie feststellen, dass Sie diese Formulardaten an eine der verbundenen Apps von Drittanbietern senden und sich mit weiteren Apps verbinden können diese Formulardaten an eine der verbundenen Apps von Drittanbietern der verbundenen Apps von Drittanbietern die Integrationsseite. Im Moment sind wir also nicht mit Apps von Drittanbietern verbunden . Aber wenn wir auf die Integrationsseite klicken oder direkt zu diesem Integrationsbereich gehen direkt zu diesem Integrationsbereich , werden wir dort führen. Jetzt sind wir da. Formuliert lässt sich in Ihre bevorzugten Apps von Drittanbietern integrieren. Sie können die verfügbaren Apps hier über die API verbinden und sie aktivieren, um Daten im Integrationsschritt Ihrer Telefone zu sammeln . Schauen Sie sich also all diese Optionen an, die wir hier haben. Wir mussten bezahlen, um unser Formular mit MailChimp über das andere Plug-In verbinden zu können . Aber genau hier können Sie die API verbinden, und das ist alles kostenlos. Wir können uns mit HubSpot, Slack, Trello, aktiver Kampagne, Google Sheets verbinden . All dies wird uns kostenlos zur Verfügung gestellt. Wir können uns hier sogar kostenlos mit Zap verbinden . Darum liebe ich mich später. Ich verwende dieses Plug-In, um meine Formulare auf allen Websites zu erstellen , die ich erstelle, weil sie sagen, dass es nicht repariert werden muss, wenn es funktioniert. Für mich funktioniert das also. Ich muss nicht nach anderen ausländischen Plugins suchen, bei denen ich eine Premium-Mitgliedschaft habe, um auf die Dienste zuzugreifen, die für jede Form sehr wichtig sind. Das ist also nur meine Meinung. Zögern Sie nicht, für jedes Plug-In zu bezahlen , das Ihrer Meinung nach alles hat, was Sie brauchen. Aber wenn Sie nach etwas suchen , das kostenlos, aber mächtig ist, ist dies der richtige Weg. Wenn Sie mehr über das Formen erfahren möchten und wie vorteilhaft es für Sie sein wird, besonders als Anfänger. Machen Sie weiter und suchen Sie nach einem netten Tutorial auf YouTube. Ich empfehle Ihnen, zum WP MU Dev Channel, dem WPA MU Dev, den Entwicklern des Plugins zu gehen. Also empfehle ich dir, dorthin zu gehen und nach formulierten zu suchen. Vorerst. So erstellen Sie ein Formular und zeigen es im Abschnitt Call to Action auf Ihrer Landingpage an. In der nächsten Lektion sehen wir uns an, wie die Fußzeile bearbeitet wird. Wir sehen uns in Kürze. 9. Anpassen der Fußzeile: Willkommen zurück. Jetzt ist es an der Zeit, die Fußzeile anzupassen. Das Anpassen der Fußzeile erfolgt im Bereich Anpassen unserer Einstellungen, da die Fußzeile mit den Astra-Einstellungen und nicht mit Elementor Builder erstellt wird . Das ist der gleiche Fall mit dem Header. Denken Sie daran, dass wir den Bereich Anpassen verwendet haben, um unsere Kopfzeile anzupassen, da er mit den Sternchen-Einstellungen erstellt wurde. Gehen Sie nach innen anpassen, scrollen Sie bis zur Fußzeile nach unten. Sie werden feststellen, dass einer der Menüpunkte hier für den Builder bestimmt ist. Also lasst uns weitermachen und darauf klicken. Dadurch wird sofort eine Darstellung der Fußzeile angezeigt. Sie werden also feststellen, dass wir dieses Widget genau hier haben. Das ist dieses Widget, das Logo-Widget, das ist dieses hier. Und diese Quick-Links Widget, dann haben wir die sozialen Icons hier und dann den Copyright-Bereich. Nehmen wir an, dass Sie die Social-Media-Symbole nicht benötigen . Unten hier brauchst du sie nicht einmal auf deinem Foto. Du kannst einfach weitermachen und sie entfernen. Und jetzt haben wir noch zwei Spalten. Und wir wollen nur eine Spalte haben und diese in der Mitte haben. Wir können fortfahren und dieses Zahnrad anklicken. Wählen Sie dann eine Spalte aus. Klicken auf Copyright. Kann weitergehen und dort Ausrichtung auswählen, zentrieren, und das schiebt alles in die Mitte. Lasst uns das veröffentlichen. hat mir gefallen, wie es aussieht. Und während wir die Copyright-Texte noch bearbeitet haben, können wir das natürlich ändern , damit ich das ziehen kann. Sie können im Grunde alles eingeben Sie wollen , wenn Sie keinen Kurzcode verwenden möchten. Also wenn ich zum Beispiel katze, dass du einfach urheberrechtlich sagen kannst, versuche 25 zu brauchen. Das wird erscheinen. Oder wenn Sie die Kurzcodes verwenden möchten. Dies wird automatisch das Jahr für Sie ziehen , ohne dass Sie es unbedingt manuell ändern müssen. Und es zieht auch Ihren Site-Titel automatisch aus den Systemdateien. Falls Sie also Ihren Website-Namen im Dashboard ändern, ändert sich der Name der Website auf dem Foto automatisch, sodass Sie dies nicht manuell oder selbst tun müssen. Aber wenn es Ihnen nichts ausmacht, das selbst zu tun, können Sie immer hierher kommen und diese entfernen und einfach eingeben meine website.com eingeben. Und das ist nicht die Schreibweise der Website. Okay, das war's also. Und um hier ein Widget zu bearbeiten, müssen Sie nur noch auf das Widget selbst klicken und seine Einstellungen werden angezeigt. Willkommen dazu. Alles klar, bewacht. Wir können fortfahren und diese Details ändern. Und die Auswahlmenüoptionen hier ist dieses spezielle Menü, das Sie aus Ihrer Menüliste abrufen möchten . Gehen Sie also zurück in das Dashboard, Erscheinungsbildmenüs. Im Menübereich unseres Dashboards haben wir eine Liste von Menüs und Sie werden feststellen, dass wir Kontakt, Hauptmenü und ein Schnelllink-Menü haben . Das sind die drei Menüs, die wir derzeit haben. Und wir können ein neues Menü erstellen. Aber bevor wir das tun, , werden Sie feststellen, dass dies die gleichen Elemente enthält, Kontakt, Hauptmenü und Schnelllink. Dies hier ist das Quick-Link-Menü. Dies ist das Kontaktmenü. Und hier oben haben wir das Hauptmenü. Weil das die drei Menüs sind, die wir haben. Nehmen wir an, wir wollten hier ein anderes Menü anzeigen. Alles, was wir tun müssen, ist ein neues Menü zu erstellen. Nennen wir ihm einen Namen. Fußzeilenmenü. Machen wir es zu einem sekundären Menü. Machen wir es zu einem Fußzeilenmenü. Lassen Sie uns ein Menü erstellen. Jetzt haben wir es als Menü. Und was wir tun müssen, ist Menüelemente aus der Spalte auf der linken Seite hinzuzufügen . Hier können wir alle gewünschten Artikel zu dieser Spalte hinzufügen. Nehmen wir an, wir möchten einen Link zum Warenkorb, einen Link zu meinem Konto und einen Link zum Shop hinzufügen einen Link zu meinem Konto . Fügen wir sie dem Menü hinzu. Und jetzt haben wir diese drei Menüpunkte. Speichern wir das Menü. Das Fußzeilenmenü wurde in diesem Bereich aktualisiert. Lassen Sie uns zunächst die Änderungen veröffentlichen, die wir vorgenommen haben , bevor wir die Seite aktualisieren. Jetzt ist es veröffentlicht. Lassen Sie mich diese Seite aktualisieren. Scrollen wir nach unten. Gehe jetzt in den Footer Builder. Denken Sie daran, dass wir dieses Widget hier haben. darauf klicke Wenn ich darauf klicke und das Menü auswähle, haben wir jetzt das Fußzeilenmenü, da es eine der Optionen ist. Klicken Sie also auf Fußzeilenmenü. Jetzt ändert sich das zu den neuen Items, die wir gerade erstellt haben. Und natürlich können wir den Titel dieser beiden ändern, so etwas wie ein spezielles Menü. Das war's. Also veröffentlichte diese Überschreibung. Sie können das Gleiche mit diesem Menü machen. Wenn es um das Logo geht, können wir dort auf dieses Zahnrad klicken oder einfach auf diesen Artikel „Bearbeiten“ klicken, der hier erscheint. Kann weitermachen und ändern, dieses Bild ersetzen. Scrollen Sie nach unten , um nach dem Logo zu suchen. Fügen Sie zwei Widgets hinzu und das Logo ändert sich in das hinzugefügte Logo. Und wenn Sie möchten, dass dieses Logo irgendwohin führt, wenn jemand darauf klickt, können Sie hier jederzeit einen Link hinzufügen. Aber ich lege einfach einen Platzhalter an und veröffentliche ihn. So bearbeiten Sie die Fußzeile der Landing Page und im Wesentlichen die Fußzeile der gesamten Website. Jetzt denke ich, dass wir mit der Landing Page fertig sind. Das nächste, was ich Ihnen zeigen wollte, ist jetzt, dass wir gesehen haben, wie man die Produkte ausstellt. Wie erstellen wir ein Produkt mit WooCommerce im Backend. Mal sehen, wie das geht in der nächsten Lektion. 10. Erstelle ein neues Produkt mit dem WooCommerce: Willkommen zurück. Jetzt begann er mit dem WooCommerce-Plugin ein Produkt oder ein paar Produkte zu erstellen. Wir sind also hier im Dashboard, weil wir WooCommerce bereits installiert haben, während wir die vorgefertigte Vorlage installiert haben. Wir haben es hier. Unter WooCommerce haben wir Produkte. Dies ist Teil des WooCommerce-Plugins. Klicken wir auf Produkte. Dies sind also die Produkte, die wir derzeit haben. Dies sind natürlich die Platzhalter, die mit der vorgefertigten Vorlage geliefert wurden. Was wir tun wollen, ist ein neues Produkt hinzuzufügen. Klicken Sie also auf Neu hinzufügen. Und geben wir unserem Produkt einen Namen. Produkte, Produkt eins. Lassen Sie uns eine Beschreibung geben. Lassen Sie mich einfach sehr schnell eine Beschreibung von einem dieser Produkte, Lorem Ipsum, abrufen sehr schnell eine Beschreibung von einem . Beachten Sie also , dass die PayPal-Zahlungsoption hier angezeigt wird, da wir die PayPal WooCommerce-Integration bereits sortiert haben. Fügen wir diese Beschreibung dort ein. Diese Beschreibung hier unten zeigt sich hier unten. Dann müssen wir diese Beschreibung hier einfügen. Lassen Sie mich also einfach ein Wort und eine Zusammenfassung hinzufügen, damit wir sie unterscheiden können , wenn wir unser Produkt bereit haben. Bevor wir weitere Änderungen vornehmen, möchte ich das also sehr schnell veröffentlichen. Was wir als Nächstes tun wollten, ist ein Produktbild hinzuzufügen. Ich lade Dateien hoch und wähle Dateien aus. Gehe in meine Download-Seite. Ich hatte zwei Produkte heruntergeladen, die wir als Musterprodukte verwenden können. Also hier sind wir. Lassen Sie mich diesen Namen einfach für eine Sekunde ändern. Name1, Name2. Lassen Sie mich diese beiden Produkte hochladen. Richtig, jetzt, da wir dieses Bild ausgewählt haben, ich weiter und füge sie zur Galerie hinzu. Jetzt ist unser Produktbild eingestellt. Lass uns „Update“ sagen. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Warten Sie, wo ist unser Produktbild? Weg? Wir sagten die Produktgalerie, die das Produktbild einstellen soll. Diese Galerie ist also nur für den Fall, dass Sie unterschiedliche Bilder desselben Produkts haben. Vielleicht, wenn Sie aus verschiedenen Blickwinkeln Fotos von demselben Produkt gemacht haben und all diese verschiedenen Blickwinkel zeigen möchten . Sie können so viele Bilder hinzufügen, wie Sie möchten, die Galerie. Aber wir wollen das Produktbild einstellen, oder? Also gehe ich weiter und wähle das schnell aus. Da haben wir es. Lasst uns das also aktualisieren. Und dann lasst uns eine Vorschau der Änderungen anzeigen. Es gibt unsere Produkte. Denken Sie daran, dass diese Zusammenfassung hier unten hinzugefügt wird, kurze Beschreibung des Produkts, und dann wird die vollständige Beschreibung des Produkts hier direkt unter dem Produktnamen angezeigt. Das ist es, was hier unten erscheint. Sie haben also viel Platz gelassen, sodass Sie so viele Informationen hinzufügen können, wie Sie möchten, auch wenn es fünf Absätze bedeutet , die beschreiben, worum es bei dem Produkt geht. Weil wir eine Bildergalerie hinzugefügt haben und wir nur ein Bild in der Galerie haben. Es zeigt nur dieses eine Bild, aber nehmen wir zum Beispiel an. Dies ist auch eines der Bilder in der Galerie. Füge es der Galerie hinzu. Jetzt haben wir zwei Produktgaleriebilder. Aktualisiere das. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Stimmt's? Da sind wir also. Wir können gehen, wir können durch die Bilder scrollen, wie wir wollen. Und wir können uns auch eine isolierte Version des Bildes ansehen. Lassen Sie mich diesen Teil schließen. Und jetzt beachte, dass wir hier keine Preis- oder Zahlungsmöglichkeiten haben. Und das liegt daran, dass das das Nächste ist, was wir tun müssen. Gehe zurück in unser Dashboard. Zuallererst können wir unser Produkt nicht in der Kategorie nicht kategorisiert haben. Lassen Sie uns also eine Kategorie geben. Sagen wir zum Beispiel, isst eine Gesichtscreme. Geben wir ihm einen Preis an. Der reguläre Preis beträgt vielleicht 249, aber wir haben jetzt einen Sonderpreis ermäßigt. Sagen wir, er ist jetzt es ist 130. Natürlich ist es kein virtuelles Produkt und es ist nicht herunterladbar. Inventar. Natürlich ist das Produkt auf Lager. Versand. Sie können Ihre Gewichtsabmessungen festlegen. Verbundene Produkte. Für den Fall, dass wir andere Produkte haben , die wir hier anzeigen möchten, können wir diese hinzufügen. Lassen Sie mich zum Beispiel einfach auf die Shop-Seite gehen. Und wenn wir Produkte haben , die damit zusammenhängen, werden sie angezeigt, wenn dieses Produkt ausgestellt ist. So zum Beispiel Kakao-Körperöl und tägliche Feuchtigkeitscreme als Beispiel. Also gebe ich Kakao und tägliche App-Verkäufe ein. Kakao sucht also. Angenommen, wir wollen tägliche Feuchtigkeitscreme im Cross-Sale. Lassen Sie mich das einfach für eine Sekunde aufheben, damit wir sehen können , was tatsächlich im Frontend passiert. Okay, also lasst uns eine Vorschau der Änderungen anzeigen. Jetzt haben wir Preise. Mit einem Rabatt. Wir haben eine Option zum Einkaufswagen hinzufügen. Wir können auch die Menge dieser Produkte auswählen , die wir wollen. Nehmen wir an, wir wollen Einheiten oder diese Produkte. Jetzt gefällt Ihnen vielleicht auch das Kakao-Körperöl. Dies ist ein App-Verkauf oder verwandte Produkte, die nicht unbedingt mit diesen Produkten identisch sind. können wir verkaufen. Eine andere Sache, die wir tun müssen, ist das Entfernen. Wie Sie jetzt bemerken, haben wir in der Galerie dieses Bild wiederholt. Da es sich also bereits um ein Bild handelt, können wir es entfernen , damit es nicht wiederholt wird, da sich das Produktbild selbst in der Galerie befindet. Wenn ich das also aktualisiere, nachdem ich dieses wiederholte Bild hier entfernt habe, zeige die Änderungen in der Vorschau. Jetzt haben wir nur eine Instanz dieses Bildes und Sie können so viele andere Variationen hinzufügen , wie Sie möchten. Im Grunde geht es darum, ein Produkt zu erstellen. Dies markiert also das Ende der Lektion. Wir haben gelernt, ein Produkt mit WooCommerce zu erstellen. In den nächsten kommenden Lektionen werden wir im Grunde nur Elementor verwenden, um diese Seiten zu bearbeiten, da sie mit Elementor erstellt wurden. Wir sehen uns also in der nächsten Lektion. 11. 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! 12. Die Shop-Seite: Willkommen zurück. In dieser Lektion möchte ich über die Shop-Seite sprechen. Alle unsere Produkte werden hier für den Kunden angezeigt. Wir müssen also ein wenig über die Seite sprechen . Gerade jetzt. Wir betrachten die Standardsortierung, aber wir haben ein Dropdown-Menü mit einigen Optionen. Ausgehend von der Sortierung nach Beliebtheit. Wie oft wurde das Produkt von den beliebtesten bis am wenigsten beliebtesten gekauft. Die nächste ist also die Sortierung nach Durchschnittsbewertung. Natürlich wird das am höchsten bewertete Produkt an erster Stelle stehen. Dann haben wir nach den neuesten Produkten sortiert, und das sind die neuesten Produkte, die Sie hinzugefügt haben. Und wie Sie sehen können, sind die beiden Produkte, die wir gerade erstellt haben, zuerst vor dem Rest aufgetaucht. Und Sie werden feststellen, dass wir diese zuerst erstellt haben und dann war dies das letzte, das wir erstellt haben. Und deshalb zeigt es sich als letztes, als erstes Produkt. Wir haben nach Preis von hoch, von niedrig bis hoch und von hoch nach niedrig. Natürlich ist das selbsterklärend. Das dreht sich also alles um die Shop-Seite. Natürlich gibt es wirklich nicht viel mehr über die Seite zu sagen. Als Nächstes wollen wir uns diese drei Seiten ansehen . Und diese Seiten werden mit Elementor erstellt. Also müssen wir sie mit Elementor bearbeiten. Mal sehen, wie das geht in der nächsten Lektion. 13. Die Seite von Testimonials: Schauen wir uns jetzt diese Elementor-Seiten an. Natürlich sind wir hier. Das ist also die Testimonials-Seite. Sie werden also feststellen, dass wir jetzt die Möglichkeit haben, mit Elementor zu bearbeiten, weil wir es geöffnet haben. Scrollen wir zunächst nach unten nach unten, und so sieht es aus. Sie werden also feststellen, dass wir ein Anmeldeformular für Call-to-Action hatten , weil wir das andere Plug-In losgeworden sind. Es taucht jetzt nicht auf. Das bedeutet also, dass wir dies durch das von uns erstellte Formulierformular ersetzen müssen . Klicken wir auf Bearbeiten mit Elementor. Hier sind wir. Das ist natürlich wie Heldenbereich, den wir auf der Landing Page bearbeitet haben. Wenn Sie diesen Abschnitt auswählen, haben wir dieselben Einstellungen. Wir können die Höhe erhöhen und auf der Standardgröße belassen. Wir können dieses Testimonial auswählen. Dies ist eine Überschrift, also können wir natürlich einen Link hinzufügen , wenn wir woanders führen wollen, aber ich glaube nicht, dass wir möchten, dass er woanders führt weil wir bereits hier auf der Testimonials-Seite sind. Und natürlich können wir ändern, was es sagt. Willkommen. Wir können die Farbe ändern. Im Grunde alles, was wir auf der Helden-Sektion und auf der Landing Page gemacht haben, können wir genau hier tun. Denken Sie also daran, dass dies ein Testimonial ist und wir haben bereits gesehen , wie man ein Testimonial bearbeitet. Durch Auswahl dieser Option rufen wir die Testimonials-Einstellungen auf und können dem Testimonial einen Titel hinzufügen. Diese Person ist also in der Marketingabteilung. So schreibt man das nicht , aber kein Problem. Wir können einen Link hinzufügen. Wir können es in einem neuen Tab öffnen. Es heißt „In neuem Fenster öffnen“, aber das bedeutet tatsächlich, eine neue Registerkarte im selben Browser zu öffnen . Also mach dir darüber keine Sorgen. Und natürlich können wir, wenn wir im Insider-Stil gehen , jeden Aspekt der Testimonial-Elemente wie den Titel ändern . Wir können die Textfarbe vielleicht in etwas wie Nische, grünliche Farbe ändern . Wir spielen nur mit den Einstellungen herum. Wir versuchen nicht, diese Websites erstaunlich zu gestalten, aber natürlich zähle ich darauf, dass Sie Ihre Kreativität anwenden und Ihre Website so ansprechend wie möglich gestalten. Denken Sie daran, dass wir diese Hintergrundüberlagerung immer ändern können, indem wir den Abschnitt auswählen, der sich in die Hintergrundüberlagerung befindet, diesen in schwarze Farbe ändern können. Es gibt mehrere andere Einstellungen, mit denen Sie experimentieren können. Der Samen, das Beste, was du kriegen kannst. Und natürlich habe ich vergessen zu erwähnen, dass Sie den Hintergrund immer ändern können , wie wir es bei der Helden-Sektion getan haben. Ich habe kein Bild, das ich hier verwenden kann, aber natürlich kannst du immer haben, weißt du, du kannst immer jedes Bild verwenden, das wir haben. So jetzt. Sieht viel besser aus. Eigentlich. Aktualisiere das. Lassen Sie uns eine Vorschau der Änderungen anzeigen. So riecht diese Seite. Machen Sie weiter und jetzt, wo Sie bereits wissen, wie Sie mit dem Testimonials-Element herumspielen können. Wenn Sie die notwendigen Änderungen vornehmen können. Also all deine Testimonials. Dann müssen wir hier natürlich diesen Kurzcode auswählen. Jetzt wo es erscheint, lasst uns das löschen. Gehen wir zurück in unsere Formulierung der Formulare. Denken Sie daran, dass wir das Anmeldeformular erstellt haben. Klicken Sie also auf dieses Zahnrad und kopieren Sie die Verknüpfung. Die Verknüpfung wurde erfolgreich kopiert. Lasst uns wieder hier rein gehen. Und lasst es uns hier einfügen. Jetzt taucht es auf. Lasst uns das aktualisieren. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Jetzt erscheint unser Anmeldeformular, es ist sichtbar. Jetzt fragen Sie sich vielleicht, was wäre, wenn ich die Farbe dieses Buttons ändern möchte ? Das habe ich vergessen zu erwähnen, als wir das Formular selbst erstellt haben. Gehen Sie also zurück in unser Dashboard, Anmeldeformular, Lassen Sie uns bearbeiten. Während wir es in diesem Formular erstellen, verwenden wir nur die Registerkarte „Felder“. Unten gibt es mehrere andere Registerkarten. Und das sind die Registerkarten , die wir durchlaufen müssen , wenn wir bis zum Ende irgendeine Form erstellen. Und Sie werden feststellen, dass diese Felder, dann Aussehen, dann Verhalten dasselbe sind, dem wir hier folgen werden. Sobald wir also mit dem Erstellen des Formulars und dem Hinzufügen der Felder fertig sind , müssen Sie als Nächstes das Aussehen ändern. Wenn Sie also darauf klicken, befinden wir uns jetzt auf der Registerkarte Aussehen. Und hier können wir zum Beispiel sagen, dass wir wollen, dass es ohne Grenzen flach ist. Wenn wir zu Farben gehen, können wir ein Kostüm wählen, und das bietet mehr Optionen. Eine der Optionen hier ist die Schaltfläche „Senden“. Hier können wir die Farbe zum Beispiel auf eine Art von Lesen ändern . Aber natürlich können andere Farbe wählen, die Sie möchten. Das war darauf eingestellt. Lassen Sie es uns vor dem Speichern in einer Vorschau anzeigen. In Ordnung. Lasst uns das aktualisieren. Sie können auch die Hover-Effekte ändern. Auf der Schaltfläche „Senden“ und der Schaltfläche „ Farben senden“ bewegen Sie den Mauszeiger. Wir wollen, dass es vielleicht schwarz ist. Im Fokus. Wir wollen auch, dass es schwarz ist. Aktualisiere das. Sobald wir die Änderungen aktualisiert haben, können wir hier reingehen und diese Seite neu laden. Wenn wir jetzt schweben, ist es schwarz. So können Sie das Erscheinungsbild aller Ihrer Formulare in formulierter Form ändern . Das dreht sich alles um diese Testimonials-Seite. Und natürlich, wenn wir die About-Seite öffnen, ist es ziemlich dasselbe. Mit elementar können Sie dieselben Schritte wiederholen, die Sie jetzt verwendet haben, müssen Sie gelernt haben mit all diesen Elementen herumzuspielen. Wir haben bereits gesehen, wie man mit all diesen verschiedenen Elementen auf der Zielseite arbeitet . Gehen wir also in die Kontaktseite. Innerhalb der Kontaktseite sollen wir ein WP-Formularformular haben. Denken Sie daran, dass wir zwei Formulare hatten, bevor wir dieses Plugin gelöscht haben Und in erster Linie ein Kontaktformular. Jetzt, da wir dieses Plug-In nicht mehr haben, müssen wir in Terminator-Formulare kommen. Ich pink, das sollten wir in der nächsten Lektion machen. Also wir sehen uns in Kürze. 14. Kontaktseite: Willkommen zurück. Also hier sind wir innerhalb der Formulatorformulare im Forenbereich. Wir schauen uns die Liste der Formulare an, die wir inzwischen hinzugefügt haben, wir haben nur eines. Wenn Sie also zehn Formulare haben, die Sie mit dem Formulierer erstellt haben, werden Sie hier aufgelistet. Was wir tun möchten, ist ein neues Formular für unsere Kontaktseite zu erstellen . Lass uns dorthin gehen. Lass mich das einfach schließen. Wenn die Kontaktseite und wir möchten ein Formular erstellen , um diese WP-Formularbreite zu ersetzen. Also lasst uns weitermachen und klicken Sie auf Erstellen. Und jetzt möchten wir dieses Mal ein Kontaktformular erstellen. Wählen Sie das aus und fahren Sie fort. Kontaktformular, sagen wir Create. Standardmäßig ist es bereits mit den Feldern ausgefüllt, die wir benötigen. Im Moment glaube ich nicht, dass wir eine Telefonnummer benötigen, aber wenn du das tust, kannst du sie immer dort lassen. Also entferne ich das. Löschen. Denken Sie daran, wenn Sie ein Feld löschen und Ihre Meinung ändern, können Sie es jederzeit aus dem eingefügten Feld einfügen. Lass mich das schließen. Also hier sind wir. Sie haben die Feld-Telefonnummer gestartet. Hier ist die Telefonnummer. Sie können es immer wieder hinzufügen, einfügen. Standardmäßig werden die Einstellungen für das Telefon angezeigt, ein Feld, das wir gerade hinzugefügt haben. Was ich schließe das. Und hier ist ein Telefon, das Sie ziehen und dort platzieren können , wo es war. Sie können sie auch nebeneinander haben. Wenn diese blaue Linie genau dort auf der rechten Seite erscheint oder irgendwo, wo Sie schweben. Sie können jedes Feld an beliebiger Stelle platzieren. Wenn Sie dies nicht verwenden möchten, können Sie diese Option auch in bestimmten Feldern verwenden. Unkraut das Gleiche, aber ich möchte die Telefonnummer loswerden , wie ich es bereits getan hatte. Jetzt haben wir die E-Mail-Adresse, Vornamen, also wechseln wir sie so. Und dann der Textbereich des Nachrichtenfeldes. Lassen Sie uns eine Vorschau anzeigen, bevor wir es veröffentlichen. So sieht es aus. Wenn wir sie übereinander gestapelt haben. Lassen Sie uns das in der Vorschau sehen. So sieht es aus. Jetzt wo es uns gefällt, wie es aussieht, veröffentlichen wir es. Jetzt ist es veröffentlicht. Wählen wir den Kurzcode des Formulators aus, erfolgreich kopiert wurde. Es wird diese Kontaktseite sagen und mit Elementor bearbeiten, weil wir noch nicht darauf geklickt haben. Bearbeiten Sie mit Elementor. Richtig, also lasst uns nach unten scrollen. Dieser Punkt. Löschen wir diesen Kurzcode dort und fügen meine neue Verknüpfung ein, die wir gerade erstellt haben. Hier sind wir ein sehr gut aussehendes Anmeldeformular. Aktualisieren wir die Änderungen und sehen Sie eine Vorschau der Seite an. Scrollen Sie nach unten. So sieht unser Kontaktformular aus. Geh wieder hier rein. Lassen Sie mich das schließen und wir können zur Registerkarte „Darstellung“ gehen. Mach es flach. Sie können die Farbe des Sende-Buttons in das Rot ändern . Beim Schweben. Machen wir es schwarz, unkonzentriert. Lass es uns auch schwarz machen. Lasst uns das aktualisieren. Lassen Sie uns die Änderungen noch einmal in der Vorschau anzeigen. Scrollen Sie nach unten. Da sind wir los. Hier haben wir auch eine Map und wir können hinein- und verkleinern. Nur für den Fall, dass wir einen physischen Standort haben , an den wir Menschen verweisen möchten. Und der Weg dazu ist, dass wir hier nach unten scrollen , indem wir diese Elemente auswählen , die die Map enthalten. Wählen wir dieses Element aus. Klicken Sie einfach hier und bearbeiten Sie Google Maps. Jetzt müssen Sie nur noch einen Standort angeben, indem Sie eine schnelle Google-Suche nach Ihrem Ort durchführen. Dann können Sie die Standardzoomstufe festlegen. Und diese anderen Teile sind einfach und einfach für Sie zu bearbeiten. Ich fahre fort und klicke auf Aktualisieren. Dies ist ein Social-Media-Element. Wenn wir darauf klicken, um es zu bearbeiten, ist es ziemlich einfach. Sie können alles entfernen , was Sie nicht möchten. Sie können in die Registerkarte „Stil“ gehen, um die Farben zu bearbeiten. Wenn du willst, dass sie es tun. Es ist irgendwie Orange. Da haben wir es. Kann auch wählen, ob sie ihre offiziellen Farben haben. Also wenn es Facebook, Instagram und Twitter sind. Aber wir gehen mit Kostüm. Sehen Sie, was Sie mit all diesen Einstellungen machen können. Sie können auch die Schwebefarbe ändern. Wenn Sie also gerade schweben, ist es schwarz, sekundäre Farbe. Mal sehen was ist mit Rot? Das ist eine Hintergrundfarbe. Klicken wir also auf diese beiden klar. Dann lasst uns diese beiden ändern, vielleicht ein Rot. Und jetzt ändert das einzige Symbol die zu lesende Farbe. Schreib, aktualisiere das. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Unsere Kontaktseite. Jetzt fertig. Jeder Teil unserer Website ist jetzt vollständig und nach unseren Wünschen angepasst. Kurs. Nehmen Sie sich etwas Zeit, um alles in Ihrer Macht stehende zu tun, um Ihre Website zu personalisieren, bis Sie damit zufrieden sind, wie sie aussieht. 15. Letzte Gedanken: Dies markiert das Ende unseres Kurses. Ich hoffe wirklich, dass Sie etwas darüber gelernt haben, wie Websites mit WordPress erstellen und genauer gesagt haben, wie Sie einen E-Commerce-Shop aufbauen oder mit WordPress einkaufen können. Das nächste, was ich Ihnen empfehlen würde, zu lernen ist SEO, Suchmaschinenoptimierung. Und so machen Sie Ihre Website im Grunde für Suchmaschinen sichtbar und für Ihre beabsichtigten Benutzer sichtbar. Wenn Leute zu Suchmaschinen wie Google gehen , um nach den Produkten zu suchen, die Sie verkaufen. Sie würden sich freuen, dass Ihre Website zu den ersten Ergebnissen auf den Ergebnisseiten gehört . Wie werden Sie also für die Suchmaschine sichtbar , damit sie Ihre Website anzeigen, wenn Personen nach den Produkten suchen, die Sie verkaufen. Ich habe bereits einen Kurs zur Suchmaschinenoptimierung veröffentlicht , speziell für WordPress verwendet, wie Sie Ihre WordPress-Website optimieren , um sie für Suchmaschinen sichtbarer zu machen. Mach weiter und öffne mein Profil auf Skillshare. Eine der Klassen dort ist WordPress SEO vereinfacht. Beobachten Sie, dass es nur 16 Minuten lang und lernen Sie, wie Sie Ihre Website sichtbar machen können. Erfahren Sie, wie Sie Ihre Website für Suchmaschinen optimieren können. Ansonsten war es mir eine Freude, Ihnen beizubringen, wie Sie mit WordPress einen E-Commerce-Shop aufbauen. Und ich hoffe, Sie in Zukunft in der nächsten Klasse zu sehen. Mein Name ist Ken Visa. Wir sehen uns im nächsten Stück.