Ich habe einfach die Blog-Seite aufgebaut und jetzt
eine weitere sehr wichtige Seite erstellen lassen,
und das wird die Kontaktseite sein.
Jetzt möchten Sie im Idealfall natürlich auf Ihrer Kontaktseite
ein Kontaktformular haben,
vielleicht sogar eine Google-Map.
Wenn Sie einen physischen Standort haben.
Oder wir haben keinen physischen Standort,
aber wir fügen ein Kontaktformular hinzu.
Jetzt gibt es mehrere Plugins
zum Erstellen von Kontaktformularen.
Und tatsächlich, wenn Sie die kostenpflichtige Version von elemental verwenden
,
haben Sie das Formularelement.
Aber wir verwenden die kostenlose Version von elemental.
Also werden wir ein anderes Plugin installieren.
Und dieses Plugin heißt WP Forms Plugins.
Lassen Sie mich also WP-Formulare eintippen.
Und es ist der hier.
Okay, also lasst uns weiterinstallieren.
Und wir werden jetzt das Plugin aktivieren.
Alles klar, also klicken wir einfach
auf Erstellen Sie Ihr erstes Formular hier.
Das Gute an diesem speziellen Plugin ist, dass es
sich sehr gut in Elementar integriert.
Ich gebe hier einen Namen ein.
Das wird also das Kontaktformular sein.
Das wird der Name dieses Formulars sein.
Kontaktformular ist hier drin.
Sie haben unsere verschiedenen Vorlagen,
wählen den einfachen Kontaktformularfaktor.
Wir können uns die Demo hier ansehen.
Sie können sehen, dass dies die Demo ist genau hier.
Sehr, sehr einfach.
Sie haben die Felder Name, E-Mail und dann die Nachrichtenfelder.
Damit das unseren Zwecken entsprechen sollte,
klicke ich einfach auf Vorlage verwenden.
Das ist selbst, aber ich werde nur
ein paar Änderungen vornehmen, wie das
Plug-In funktioniert, da es genau hier ist,
Sie haben die Felder mit der kostenlosen Version für Sie verfügbar
,
es gibt eine kostenpflichtige Version wo Sie Zugriff auf
diese ausgefallenen Felder und
die Zahlungsfelder usw. haben, aber wir brauchen sie nicht.
Der Ingwer, den ich hier machen werde, wäre also
das Namensfeld zu bearbeiten.
Also klicke ich einfach hinein.
Und genau hier hast du das Format.
Ich bevorzuge das einfache Format, in dem Sie nur
eine einzige Zeile für den Namen haben.
Aber du hast mittlere, letzte und zuerst, letzte und so weiter gezwungen
.
Im Advanced können Sie die Feldgröße ändern
, um zwei kleine zu starten,
je nach Geschmack und was Sie bevorzugen.
Sie können Ihre CSS-Brille hier hineinlegen.
Du hast auch kluge Logik,
was mir leid tut.
Ich hab's vergessen.
Dies ist sowieso nur mit der kostenpflichtigen Version verfügbar,
für die Feldoptionen.
Das war's. Sie können also hier wieder reingehen und
zusätzliche Felder wie ein Dropdown-Kontrollkästchen hinzufügen.
Wenn du wolltest.
Unter Setup hier drin
tut es mir leid, unter Einstellungen,
ob hier, hier können Sie
Dinge wie den tatsächlichen Formularnamen selbst ändern.
Sie können den Text für die Schaltfläche ändern
und Anwendungen beeinflussen.
Hier können Sie
die Art von Benachrichtigungen einrichten, die Sie erhalten möchten
, wenn jemand
das Kontaktformular ausfüllt.
Wir möchten hier standardmäßig benachrichtigt werden,
die mit Ihrer WordPress-Website verknüpfte Admin-E-Mail
befindet sich hier,
Sie können jedoch Ihre eigenen benutzerdefinierten E-Mail-Elemente hinzufügen.
Zeig dir was, okay, genau hier,
wo du von Namen hast.
Standardmäßig wird es auf den Namen Ihrer Website festgelegt, aber es ist
viel sinnvoller, diese auf den tatsächlichen Namen der Person festzulegen
, die die Nachricht sendet.
Also klicke ich hier auf Smarttags anzeigen.
Wählen Sie einfach das Namensfeld
oder Ihren FirstName, LastName, je nachdem,
welches Gefühl Sie für den Namen haben.
Und dann auch für per E-Mail.
Wir wählen einfach das E-Mail-Feld aus.
Und ich werde weitermachen und einfach sparen.
Sie haben die Konformationen auch hier drin wie okay, was passiert,
wenn sie das Kontaktformular ausgefüllt haben?
Bekommen sie eine Nachricht? Wenn ja,
können Sie die Nachricht hier bearbeiten.
Sie können sie auf einer bestimmten Seite zeigen und es wird
eine besondere Schönheit von geschaffenen allen sein.
Sie können sie einfach an eine externe URL umleiten
, wenn Sie gehen möchten.
Wir werden nichts davon machen.
Lassen Sie uns jetzt einfach weitermachen, um noch einmal zu
sparen, schließen Sie dies.
Jetzt gehen wir zur Kontaktseite.
Lassen Sie uns die Seite zuerst aus dem WordPress-Backend bearbeiten
.
Dann klicke ich von hier aus
auf Edit with Elementor, damit wir jetzt die Elementor-Schnittstelle verwenden und das anschauen können
.
In Ordnung, ups, ich hab vergessen, eine dünne zu machen.
Ich entschuldige mich.
Wir müssen die WP-Formulare aktivieren
, die Add-On für die wesentlichen Elemente Plugins sind.
Also lasst uns das schnell machen.
Ich gehe hier zu wichtigen Atomen.
Gehen wir zu Elementen.
Und dann haben Sie hier unten die Formular-Styling-Elemente.
Sie werden WP Forms sehen.
Lasst uns weitermachen und jetzt das aktivieren.
Sie können sehen, dass Sie Zugriff auf andere Arten von Formen haben
, wie fließende Formen,
Gravity Forms, was eigentlich sehr, sehr gute Ninja Forms ist
und so weiter.
Wie auch immer, lasst uns unsere Einstellungen speichern.
Und ich werde das schließen.
Aktualisieren wir diese Seite noch einmal.
Okay, also die Sache mit WE-Formularen
ist, dass Sie selbst mit der kostenlosen Version von elemental
Zugriff auf das Element haben.
Sobald Sie das Plugin installiert und aktiviert haben,
können Sie es direkt hier im Basic sehen,
Sie haben WP-Formulare von Elementar.
Ich klicke hier hinein.
Und ich zeige Ihnen den Unterschied zwischen diesem
und dem von wichtigen Add-Ons bereitgestellten.
Gehen wir zurück und scrollen den ganzen Weg hier runter.
Fügen wir das für
wichtige Add-Ons in einen anderen Abschnitt hinzu.
Jetzt wirst du den Hauptunterschied sehen, okay?
Dies ist das für die wesentlichen Atome.
Ich wähle den Kontakt für die
Sterblichkeitsrate. Es heißt „Formular auswählen“.
Lasst uns das wählen. Jetzt genau hier.
Vergleiche diesen mit dem hier oben.
Gehen wir mit dem für Elemente von First.
Wählen wir auch das Kontaktformular aus.
Die Sache ist, dass Sie nur
Zugriff auf die Art von Formular haben, das Sie wählen können.
Die Anzeigeoptionen sind gut.
Sie möchten den Namen des Formulars, die Beschreibung und dann den erweiterten Text aufnehmen
.
Es ist nichts mehr dran.
Für diejenigen mit wichtigen Add-Ons haben Sie jedoch
Zugriff auf viel mehr.
Sie können die Beschreibungsbeschriftungen anzeigen, bitte halten Sie sie fest.
Sie haben sogar unsere Fehlermeldungen.
Sie möchten Fehlermeldungen anzeigen
oder möchten Sie sie ausblenden?
Wenn zum Beispiel jemand
das Namensfeld nicht ausgefüllt hat und dann die
Taste „Senden“ drücken, möchten Sie
die Fehlermeldung anzeigen oder nicht.
Sie haben Zugriff auf viele Styling-Optionen.
Sie können eine Hintergrundfarbe des Formulars hinzufügen.
Sie können das Formular an Ihren Breitenrändern ausrichten.
Sie haben alle möglichen Styling-Optionen für
die Titel- und Beschreibungsbeschriftungen und so weiter.
Während dieser Zeit erhalten
Sie sie nicht mit demjenigen mit dem
Element, das von der kostenlosen Version von elemental bereitgestellt wird
.
Deshalb verwende ich lieber
das von essentiellen Atomen bereitgestellte.
Also werde ich weitermachen und diese von Elemental schließen.
Lasst uns das machen.
Sehr, sehr einfach.
Wir werden hier keine großen Änderungen vornehmen, außer dass
wir einfach den Titel des Telefonbuchs ausblenden.
Jeder weiß, dass es sich um ein Kontaktformular handelt,
also müssen Sie hier nichts ändern.
Eine Sache, die wir jedoch tun werden, ist,
den Seitentitel auszublenden.
Und dann fügen wir unsere eigene Überschrift hinzu.
In Ordnung, und wir werden einfach dieses hier als H1 wählen
, um Typografie zu Stil zu gehen
, die primär ist.
Und wir werden einfach kältesten Swan unsere Kontaktiere uns.
Das war's.
Wir fügen den Abschnittslink-Werten etwas Polsterung hinzu.
Wir werden mit 50 oben und dann 50 unten gehen.
Denken Sie tatsächlich darüber nach.
Das Contact Us ist eigentlich ein sehr, sehr großes Buch.
Es ist okay, richten wir das einfach in die Mitte aus.
Und wir fügen einfach ein Muster für
das eigentliche Formular selbst hinzu.
Ich klicke auf das Formularelement.
Lass uns zu Advanced gehen.
Und wir fügen auch etwas Polsterung hinzu.
Gib ihm einfach etwas Abstand zwischen
dem tatsächlichen Titel und dem Formular selbst.
Also mach weiter und aktualisiere es.
Das gehe ich jetzt weiter und schaue mir die Seite an.
Und das war's für die Kontaktseite.
Jetzt kannst du das wieder ein bisschen spannender machen.
Sie können mit vielleicht zwei Spalten im Gegensatz zu Abschnitt gehen
.
der ersten Spalte können Sie ein Bild von jemandem hinzufügen,
der vielleicht anruft oder
jemand eine E-Mail sendet, solche Sachen.
Es gibt also verschiedene Möglichkeiten, die Kontaktseite zu ändern
und sie aufregender zu gestalten
, wenn Sie möchten.
Aber das ist sehr, sehr einfach,
sehr einfach und entspricht unseren Zwecken.
Also danke fürs Zuschauen und
wir sehen uns in der nächsten Klasse.