1 00:00:00,000 --> 00:00:02,910 Ich habe einfach die Blog-Seite aufgebaut und jetzt 2 00:00:02,910 --> 00:00:05,400 eine weitere sehr wichtige Seite erstellen lassen, 3 00:00:05,400 --> 00:00:08,300 und das wird die Kontaktseite sein. 4 00:00:08,295 --> 00:00:10,565 Jetzt möchten Sie im Idealfall natürlich auf Ihrer Kontaktseite 5 00:00:10,560 --> 00:00:13,300 ein Kontaktformular haben, 6 00:00:13,304 --> 00:00:15,224 vielleicht sogar eine Google-Map. 7 00:00:15,225 --> 00:00:17,645 Wenn Sie einen physischen Standort haben. 8 00:00:17,640 --> 00:00:19,140 Oder wir haben keinen physischen Standort, 9 00:00:19,140 --> 00:00:21,510 aber wir fügen ein Kontaktformular hinzu. 10 00:00:21,510 --> 00:00:24,810 Jetzt gibt es mehrere Plugins 11 00:00:24,810 --> 00:00:26,820 zum Erstellen von Kontaktformularen. 12 00:00:26,820 --> 00:00:28,440 Und tatsächlich, wenn Sie die kostenpflichtige Version von elemental verwenden 13 00:00:28,440 --> 00:00:30,360 , 14 00:00:30,360 --> 00:00:33,360 haben Sie das Formularelement. 15 00:00:33,355 --> 00:00:35,575 Aber wir verwenden die kostenlose Version von elemental. 16 00:00:35,570 --> 00:00:38,140 Also werden wir ein anderes Plugin installieren. 17 00:00:38,135 --> 00:00:42,985 Und dieses Plugin heißt WP Forms Plugins. 18 00:00:42,980 --> 00:00:45,820 Lassen Sie mich also WP-Formulare eintippen. 19 00:00:45,815 --> 00:00:47,735 Und es ist der hier. 20 00:00:47,735 --> 00:00:50,035 Okay, also lasst uns weiterinstallieren. 21 00:00:50,030 --> 00:00:54,510 Und wir werden jetzt das Plugin aktivieren. 22 00:00:54,610 --> 00:00:58,520 Alles klar, also klicken wir einfach 23 00:00:58,520 --> 00:01:02,200 auf Erstellen Sie Ihr erstes Formular hier. 24 00:01:02,195 --> 00:01:05,095 Das Gute an diesem speziellen Plugin ist, dass es 25 00:01:05,090 --> 00:01:07,970 sich sehr gut in Elementar integriert. 26 00:01:07,969 --> 00:01:10,999 Ich gebe hier einen Namen ein. 27 00:01:11,000 --> 00:01:13,460 Das wird also das Kontaktformular sein. 28 00:01:13,460 --> 00:01:15,460 Das wird der Name dieses Formulars sein. 29 00:01:15,455 --> 00:01:19,295 Kontaktformular ist hier drin. 30 00:01:19,295 --> 00:01:21,785 Sie haben unsere verschiedenen Vorlagen, 31 00:01:21,784 --> 00:01:24,324 wählen den einfachen Kontaktformularfaktor. 32 00:01:24,320 --> 00:01:26,300 Wir können uns die Demo hier ansehen. 33 00:01:26,300 --> 00:01:27,940 Sie können sehen, dass dies die Demo ist genau hier. 34 00:01:27,935 --> 00:01:28,795 Sehr, sehr einfach. 35 00:01:28,790 --> 00:01:31,690 Sie haben die Felder Name, E-Mail und dann die Nachrichtenfelder. 36 00:01:31,685 --> 00:01:34,625 Damit das unseren Zwecken entsprechen sollte, 37 00:01:34,625 --> 00:01:37,865 klicke ich einfach auf Vorlage verwenden. 38 00:01:38,110 --> 00:01:40,280 Das ist selbst, aber ich werde nur 39 00:01:40,280 --> 00:01:43,010 ein paar Änderungen vornehmen, wie das 40 00:01:43,010 --> 00:01:44,420 Plug-In funktioniert, da es genau hier ist, 41 00:01:44,420 --> 00:01:46,010 Sie haben die Felder mit der kostenlosen Version für Sie verfügbar 42 00:01:46,010 --> 00:01:47,600 , 43 00:01:47,600 --> 00:01:50,150 es gibt eine kostenpflichtige Version wo Sie Zugriff auf 44 00:01:50,150 --> 00:01:51,800 diese ausgefallenen Felder und 45 00:01:51,800 --> 00:01:54,040 die Zahlungsfelder usw. haben, aber wir brauchen sie nicht. 46 00:01:54,035 --> 00:01:56,125 Der Ingwer, den ich hier machen werde, wäre also 47 00:01:56,120 --> 00:01:57,970 das Namensfeld zu bearbeiten. 48 00:01:57,965 --> 00:02:01,145 Also klicke ich einfach hinein. 49 00:02:01,145 --> 00:02:04,435 Und genau hier hast du das Format. 50 00:02:04,430 --> 00:02:06,560 Ich bevorzuge das einfache Format, in dem Sie nur 51 00:02:06,560 --> 00:02:09,190 eine einzige Zeile für den Namen haben. 52 00:02:09,185 --> 00:02:11,605 Aber du hast mittlere, letzte und zuerst, letzte und so weiter gezwungen 53 00:02:11,600 --> 00:02:14,290 . 54 00:02:14,285 --> 00:02:16,135 Im Advanced können Sie die Feldgröße ändern 55 00:02:16,130 --> 00:02:19,450 , um zwei kleine zu starten, 56 00:02:19,445 --> 00:02:22,465 je nach Geschmack und was Sie bevorzugen. 57 00:02:22,460 --> 00:02:24,710 Sie können Ihre CSS-Brille hier hineinlegen. 58 00:02:24,710 --> 00:02:26,030 Du hast auch kluge Logik, 59 00:02:26,030 --> 00:02:27,260 was mir leid tut. 60 00:02:27,260 --> 00:02:28,010 Ich hab's vergessen. 61 00:02:28,010 --> 00:02:31,790 Dies ist sowieso nur mit der kostenpflichtigen Version verfügbar, 62 00:02:31,790 --> 00:02:33,640 für die Feldoptionen. 63 00:02:33,635 --> 00:02:35,545 Das war's. Sie können also hier wieder reingehen und 64 00:02:35,540 --> 00:02:38,930 zusätzliche Felder wie ein Dropdown-Kontrollkästchen hinzufügen. 65 00:02:38,930 --> 00:02:41,110 Wenn du wolltest. 66 00:02:41,105 --> 00:02:43,625 Unter Setup hier drin 67 00:02:43,625 --> 00:02:45,215 tut es mir leid, unter Einstellungen, 68 00:02:45,215 --> 00:02:47,365 ob hier, hier können Sie 69 00:02:47,360 --> 00:02:49,510 Dinge wie den tatsächlichen Formularnamen selbst ändern. 70 00:02:49,505 --> 00:02:50,875 Sie können den Text für die Schaltfläche ändern 71 00:02:50,870 --> 00:02:53,770 und Anwendungen beeinflussen. 72 00:02:53,765 --> 00:02:55,675 Hier können Sie 73 00:02:55,670 --> 00:02:57,620 die Art von Benachrichtigungen einrichten, die Sie erhalten möchten 74 00:02:57,620 --> 00:03:00,520 , wenn jemand 75 00:03:00,515 --> 00:03:02,725 das Kontaktformular ausfüllt. 76 00:03:02,720 --> 00:03:05,330 Wir möchten hier standardmäßig benachrichtigt werden, 77 00:03:05,330 --> 00:03:06,980 die mit Ihrer WordPress-Website verknüpfte Admin-E-Mail 78 00:03:06,980 --> 00:03:08,600 befindet sich hier, 79 00:03:08,600 --> 00:03:11,510 Sie können jedoch Ihre eigenen benutzerdefinierten E-Mail-Elemente hinzufügen. 80 00:03:11,510 --> 00:03:13,480 Zeig dir was, okay, genau hier, 81 00:03:13,475 --> 00:03:15,485 wo du von Namen hast. 82 00:03:15,485 --> 00:03:19,025 Standardmäßig wird es auf den Namen Ihrer Website festgelegt, aber es ist 83 00:03:19,025 --> 00:03:22,075 viel sinnvoller, diese auf den tatsächlichen Namen der Person festzulegen 84 00:03:22,070 --> 00:03:26,210 , die die Nachricht sendet. 85 00:03:26,210 --> 00:03:28,510 Also klicke ich hier auf Smarttags anzeigen. 86 00:03:28,505 --> 00:03:30,905 Wählen Sie einfach das Namensfeld 87 00:03:30,905 --> 00:03:32,305 oder Ihren FirstName, LastName, je nachdem, 88 00:03:32,300 --> 00:03:34,810 welches Gefühl Sie für den Namen haben. 89 00:03:34,805 --> 00:03:37,555 Und dann auch für per E-Mail. 90 00:03:37,550 --> 00:03:40,300 Wir wählen einfach das E-Mail-Feld aus. 91 00:03:40,295 --> 00:03:45,235 Und ich werde weitermachen und einfach sparen. 92 00:03:45,230 --> 00:03:48,260 Sie haben die Konformationen auch hier drin wie okay, was passiert, 93 00:03:48,260 --> 00:03:51,280 wenn sie das Kontaktformular ausgefüllt haben? 94 00:03:51,275 --> 00:03:52,865 Bekommen sie eine Nachricht? Wenn ja, 95 00:03:52,865 --> 00:03:54,565 können Sie die Nachricht hier bearbeiten. 96 00:03:54,560 --> 00:03:56,900 Sie können sie auf einer bestimmten Seite zeigen und es wird 97 00:03:56,900 --> 00:03:59,770 eine besondere Schönheit von geschaffenen allen sein. 98 00:03:59,765 --> 00:04:01,315 Sie können sie einfach an eine externe URL umleiten 99 00:04:01,310 --> 00:04:04,340 , wenn Sie gehen möchten. 100 00:04:04,340 --> 00:04:05,570 Wir werden nichts davon machen. 101 00:04:05,570 --> 00:04:06,860 Lassen Sie uns jetzt einfach weitermachen, um noch einmal zu 102 00:04:06,860 --> 00:04:09,530 sparen, schließen Sie dies. 103 00:04:09,530 --> 00:04:14,890 Jetzt gehen wir zur Kontaktseite. 104 00:04:14,885 --> 00:04:17,155 Lassen Sie uns die Seite zuerst aus dem WordPress-Backend bearbeiten 105 00:04:17,150 --> 00:04:20,400 . 106 00:04:20,410 --> 00:04:23,480 Dann klicke ich von hier aus 107 00:04:23,480 --> 00:04:25,810 auf Edit with Elementor, damit wir jetzt die Elementor-Schnittstelle verwenden und das anschauen können 108 00:04:25,805 --> 00:04:31,565 . 109 00:04:31,565 --> 00:04:35,605 In Ordnung, ups, ich hab vergessen, eine dünne zu machen. 110 00:04:35,600 --> 00:04:36,680 Ich entschuldige mich. 111 00:04:36,680 --> 00:04:38,680 Wir müssen die WP-Formulare aktivieren 112 00:04:38,675 --> 00:04:43,675 , die Add-On für die wesentlichen Elemente Plugins sind. 113 00:04:43,670 --> 00:04:44,840 Also lasst uns das schnell machen. 114 00:04:44,840 --> 00:04:47,580 Ich gehe hier zu wichtigen Atomen. 115 00:04:48,070 --> 00:04:50,470 Gehen wir zu Elementen. 116 00:04:50,465 --> 00:04:55,465 Und dann haben Sie hier unten die Formular-Styling-Elemente. 117 00:04:55,460 --> 00:04:57,110 Sie werden WP Forms sehen. 118 00:04:57,110 --> 00:04:59,510 Lasst uns weitermachen und jetzt das aktivieren. 119 00:04:59,510 --> 00:05:01,040 Sie können sehen, dass Sie Zugriff auf andere Arten von Formen haben 120 00:05:01,040 --> 00:05:02,930 , wie fließende Formen, 121 00:05:02,930 --> 00:05:04,250 Gravity Forms, was eigentlich sehr, sehr gute Ninja Forms ist 122 00:05:04,250 --> 00:05:05,570 und so weiter. 123 00:05:05,570 --> 00:05:09,650 Wie auch immer, lasst uns unsere Einstellungen speichern. 124 00:05:09,650 --> 00:05:12,440 Und ich werde das schließen. 125 00:05:12,440 --> 00:05:15,180 Aktualisieren wir diese Seite noch einmal. 126 00:05:15,670 --> 00:05:18,410 Okay, also die Sache mit WE-Formularen 127 00:05:18,410 --> 00:05:20,570 ist, dass Sie selbst mit der kostenlosen Version von elemental 128 00:05:20,570 --> 00:05:23,420 Zugriff auf das Element haben. 129 00:05:23,420 --> 00:05:26,120 Sobald Sie das Plugin installiert und aktiviert haben, 130 00:05:26,120 --> 00:05:28,400 können Sie es direkt hier im Basic sehen, 131 00:05:28,400 --> 00:05:31,330 Sie haben WP-Formulare von Elementar. 132 00:05:31,325 --> 00:05:34,345 Ich klicke hier hinein. 133 00:05:34,340 --> 00:05:36,950 Und ich zeige Ihnen den Unterschied zwischen diesem 134 00:05:36,950 --> 00:05:39,440 und dem von wichtigen Add-Ons bereitgestellten. 135 00:05:39,440 --> 00:05:42,430 Gehen wir zurück und scrollen den ganzen Weg hier runter. 136 00:05:42,425 --> 00:05:44,845 Fügen wir das für 137 00:05:44,840 --> 00:05:48,580 wichtige Add-Ons in einen anderen Abschnitt hinzu. 138 00:05:48,575 --> 00:05:51,685 Jetzt wirst du den Hauptunterschied sehen, okay? 139 00:05:51,680 --> 00:05:53,770 Dies ist das für die wesentlichen Atome. 140 00:05:53,765 --> 00:05:55,435 Ich wähle den Kontakt für die 141 00:05:55,430 --> 00:05:57,250 Sterblichkeitsrate. Es heißt „Formular auswählen“. 142 00:05:57,245 --> 00:06:00,235 Lasst uns das wählen. Jetzt genau hier. 143 00:06:00,230 --> 00:06:02,750 Vergleiche diesen mit dem hier oben. 144 00:06:02,750 --> 00:06:04,820 Gehen wir mit dem für Elemente von First. 145 00:06:04,820 --> 00:06:06,880 Wählen wir auch das Kontaktformular aus. 146 00:06:06,875 --> 00:06:09,895 Die Sache ist, dass Sie nur 147 00:06:09,890 --> 00:06:13,190 Zugriff auf die Art von Formular haben, das Sie wählen können. 148 00:06:13,190 --> 00:06:14,660 Die Anzeigeoptionen sind gut. 149 00:06:14,660 --> 00:06:15,800 Sie möchten den Namen des Formulars, die Beschreibung und dann den erweiterten Text aufnehmen 150 00:06:15,800 --> 00:06:18,150 . 151 00:06:18,154 --> 00:06:20,344 Es ist nichts mehr dran. 152 00:06:20,345 --> 00:06:24,145 Für diejenigen mit wichtigen Add-Ons haben Sie jedoch 153 00:06:24,140 --> 00:06:27,050 Zugriff auf viel mehr. 154 00:06:27,050 --> 00:06:30,460 Sie können die Beschreibungsbeschriftungen anzeigen, bitte halten Sie sie fest. 155 00:06:30,455 --> 00:06:32,455 Sie haben sogar unsere Fehlermeldungen. 156 00:06:32,450 --> 00:06:33,560 Sie möchten Fehlermeldungen anzeigen 157 00:06:33,560 --> 00:06:34,790 oder möchten Sie sie ausblenden? 158 00:06:34,790 --> 00:06:36,140 Wenn zum Beispiel jemand 159 00:06:36,140 --> 00:06:37,640 das Namensfeld nicht ausgefüllt hat und dann die 160 00:06:37,640 --> 00:06:39,020 Taste „Senden“ drücken, möchten Sie 161 00:06:39,020 --> 00:06:40,940 die Fehlermeldung anzeigen oder nicht. 162 00:06:40,940 --> 00:06:44,570 Sie haben Zugriff auf viele Styling-Optionen. 163 00:06:44,570 --> 00:06:46,580 Sie können eine Hintergrundfarbe des Formulars hinzufügen. 164 00:06:46,580 --> 00:06:49,610 Sie können das Formular an Ihren Breitenrändern ausrichten. 165 00:06:49,610 --> 00:06:51,860 Sie haben alle möglichen Styling-Optionen für 166 00:06:51,860 --> 00:06:54,190 die Titel- und Beschreibungsbeschriftungen und so weiter. 167 00:06:54,185 --> 00:06:55,435 Während dieser Zeit erhalten 168 00:06:55,430 --> 00:06:58,000 Sie sie nicht mit demjenigen mit dem 169 00:06:57,995 --> 00:06:59,515 Element, das von der kostenlosen Version von elemental bereitgestellt wird 170 00:06:59,510 --> 00:07:01,070 . 171 00:07:01,070 --> 00:07:02,150 Deshalb verwende ich lieber 172 00:07:02,150 --> 00:07:05,030 das von essentiellen Atomen bereitgestellte. 173 00:07:05,030 --> 00:07:08,210 Also werde ich weitermachen und diese von Elemental schließen. 174 00:07:08,209 --> 00:07:10,059 Lasst uns das machen. 175 00:07:10,055 --> 00:07:11,995 Sehr, sehr einfach. 176 00:07:11,990 --> 00:07:15,740 Wir werden hier keine großen Änderungen vornehmen, außer dass 177 00:07:15,740 --> 00:07:19,870 wir einfach den Titel des Telefonbuchs ausblenden. 178 00:07:19,865 --> 00:07:21,445 Jeder weiß, dass es sich um ein Kontaktformular handelt, 179 00:07:21,440 --> 00:07:24,460 also müssen Sie hier nichts ändern. 180 00:07:24,455 --> 00:07:25,945 Eine Sache, die wir jedoch tun werden, ist, 181 00:07:25,940 --> 00:07:28,580 den Seitentitel auszublenden. 182 00:07:28,580 --> 00:07:31,270 Und dann fügen wir unsere eigene Überschrift hinzu. 183 00:07:31,265 --> 00:07:33,175 In Ordnung, und wir werden einfach dieses hier als H1 wählen 184 00:07:33,170 --> 00:07:34,700 , um Typografie zu Stil zu gehen 185 00:07:34,700 --> 00:07:38,650 , die primär ist. 186 00:07:38,645 --> 00:07:44,165 Und wir werden einfach kältesten Swan unsere Kontaktiere uns. 187 00:07:44,165 --> 00:07:45,715 Das war's. 188 00:07:45,710 --> 00:07:51,480 Wir fügen den Abschnittslink-Werten etwas Polsterung hinzu. 189 00:07:51,484 --> 00:07:57,514 Wir werden mit 50 oben und dann 50 unten gehen. 190 00:07:57,514 --> 00:08:00,024 Denken Sie tatsächlich darüber nach. 191 00:08:00,020 --> 00:08:03,100 Das Contact Us ist eigentlich ein sehr, sehr großes Buch. 192 00:08:03,095 --> 00:08:05,815 Es ist okay, richten wir das einfach in die Mitte aus. 193 00:08:05,810 --> 00:08:07,960 Und wir fügen einfach ein Muster für 194 00:08:07,955 --> 00:08:10,055 das eigentliche Formular selbst hinzu. 195 00:08:10,055 --> 00:08:11,585 Ich klicke auf das Formularelement. 196 00:08:11,585 --> 00:08:12,895 Lass uns zu Advanced gehen. 197 00:08:12,890 --> 00:08:15,400 Und wir fügen auch etwas Polsterung hinzu. 198 00:08:15,395 --> 00:08:17,305 Gib ihm einfach etwas Abstand zwischen 199 00:08:17,300 --> 00:08:20,540 dem tatsächlichen Titel und dem Formular selbst. 200 00:08:20,540 --> 00:08:23,360 Also mach weiter und aktualisiere es. 201 00:08:23,360 --> 00:08:27,650 Das gehe ich jetzt weiter und schaue mir die Seite an. 202 00:08:27,650 --> 00:08:32,280 Und das war's für die Kontaktseite. 203 00:08:32,275 --> 00:08:35,725 Jetzt kannst du das wieder ein bisschen spannender machen. 204 00:08:35,720 --> 00:08:37,610 Sie können mit vielleicht zwei Spalten im Gegensatz zu Abschnitt gehen 205 00:08:37,610 --> 00:08:39,380 . 206 00:08:39,380 --> 00:08:41,620 der ersten Spalte können Sie ein Bild von jemandem hinzufügen, 207 00:08:41,615 --> 00:08:43,705 der vielleicht anruft oder 208 00:08:43,700 --> 00:08:46,190 jemand eine E-Mail sendet, solche Sachen. 209 00:08:46,190 --> 00:08:48,020 Es gibt also verschiedene Möglichkeiten, die Kontaktseite zu ändern 210 00:08:48,020 --> 00:08:49,670 und sie aufregender zu gestalten 211 00:08:49,670 --> 00:08:51,740 , wenn Sie möchten. 212 00:08:51,740 --> 00:08:53,960 Aber das ist sehr, sehr einfach, 213 00:08:53,959 --> 00:08:57,649 sehr einfach und entspricht unseren Zwecken. 214 00:08:57,650 --> 00:08:59,150 Also danke fürs Zuschauen und 215 00:08:59,150 --> 00:09:01,410 wir sehen uns in der nächsten Klasse.