1 00:00:00,000 --> 00:00:01,260 Ich möchte nur noch ein paar Minuten damit verbringen 2 00:00:01,260 --> 00:00:02,550 Sie durch 3 00:00:02,550 --> 00:00:05,820 die allgemeinen Konzepte von Abschnitten, 4 00:00:05,820 --> 00:00:09,810 Spalten sowie Elementen, Mustern und Rändern zu führen. 5 00:00:09,810 --> 00:00:11,520 Wie ich es dir zuvor gezeigt habe. 6 00:00:11,520 --> 00:00:12,870 Wenn Sie ein Element hinzufügen möchten, 7 00:00:12,870 --> 00:00:14,310 können Sie einfach von der linken Seite ziehen 8 00:00:14,310 --> 00:00:15,780 und 9 00:00:15,780 --> 00:00:17,540 es dann einfach in die Folie fallen. 10 00:00:17,535 --> 00:00:19,895 Jetzt ist das Ding automatisch, wenn 11 00:00:19,890 --> 00:00:22,220 Sie Elemente mit Elementor hinzufügen, 12 00:00:22,215 --> 00:00:24,335 ein Abschnitt und eine Wirtschaft 13 00:00:24,330 --> 00:00:27,420 für dieses bestimmte Element erstellt. 14 00:00:27,420 --> 00:00:30,530 Wir haben gerade die Texteditor-Elemente eingeworfen. 15 00:00:30,525 --> 00:00:32,675 Und jetzt würden Sie feststellen, 16 00:00:32,670 --> 00:00:34,950 wir diese blaue Linie hier haben. 17 00:00:34,950 --> 00:00:38,230 Dies wird dieser Abschnitt sein, der die Spalte 18 00:00:38,230 --> 00:00:42,830 enthält, in der die Textbearbeitung enthalten ist. Alles. 19 00:00:42,830 --> 00:00:44,080 Beachten Sie genau hier, dass Sie 20 00:00:44,075 --> 00:00:45,475 diesen braunen Knopf genau hier haben. 21 00:00:45,470 --> 00:00:46,580 Und wenn ich den Mauszeiger darüber fahre, 22 00:00:46,580 --> 00:00:48,350 heißt es „Spalte bearbeiten“. 23 00:00:48,350 --> 00:00:51,080 Jetzt ist dies das eigentliche Element selbst, 24 00:00:51,080 --> 00:00:52,690 das eigentliche Textbearbeitungswerkzeug. 25 00:00:52,685 --> 00:00:54,565 Wieder einmal, so wie Elementarwandern 26 00:00:54,560 --> 00:00:56,570 da ist, haben Sie ein Element, 27 00:00:56,570 --> 00:00:58,970 egal ob Bild, Video oder Button. 28 00:00:58,970 --> 00:01:01,550 Und dann wird eine Spalte gehalten, 29 00:01:01,550 --> 00:01:03,580 die dieses Element enthält. 30 00:01:03,575 --> 00:01:05,785 Sowohl in der Spalte als auch in den Elementen befinden sich 31 00:01:05,780 --> 00:01:08,390 in einem Abschnitt. 32 00:01:08,390 --> 00:01:11,390 Es ist irgendwie wie eine hierarchische Strukturabschnittsspalte 33 00:01:11,390 --> 00:01:13,400 und dann das eigentliche Element. 34 00:01:13,400 --> 00:01:14,950 Nun, genau wie beim Bearbeiten, 35 00:01:14,945 --> 00:01:16,675 das Element, in dem Sie Zugriff auf den Inhaltsstil haben 36 00:01:16,670 --> 00:01:18,730 , erweitert. 37 00:01:18,725 --> 00:01:22,835 Sie können auch die Spalte bearbeiten, die dieses Element enthält. 38 00:01:22,835 --> 00:01:24,445 Sie können sehen, dass ich unten auf der Seite geschoben 39 00:01:24,440 --> 00:01:26,450 bin, es heißt „Spalte bearbeiten“. 40 00:01:26,450 --> 00:01:27,920 Du klickst da rein. 41 00:01:27,920 --> 00:01:29,240 Und dann haben Sie Zugriff auf 42 00:01:29,240 --> 00:01:31,010 Layoutstil und Advanced. 43 00:01:31,010 --> 00:01:33,290 Mit dem Layout können Sie Dinge tun, wie z. B. 44 00:01:33,290 --> 00:01:36,340 die Länge der Spalte reduzieren. 45 00:01:36,335 --> 00:01:38,125 Sie können die Ausrichtung ändern. 46 00:01:38,120 --> 00:01:40,280 Sie können ein HTML-Tag-Fluide hinzufügen. 47 00:01:40,280 --> 00:01:43,070 Sie können die Spalte stylen und wir möchten 48 00:01:43,070 --> 00:01:46,190 einen schwarzen Hintergrund wie in einem roten Hintergrund hinzufügen. 49 00:01:46,190 --> 00:01:48,340 Und du willst ein Bild hinzufügen, solche Dinge. 50 00:01:48,335 --> 00:01:51,215 Damit viele Dinge du alles mit der Kolumne machen kannst. 51 00:01:51,215 --> 00:01:54,185 Wenn Sie jetzt mit der rechten Maustaste auf die Schaltfläche Spalte bearbeiten klicken, 52 00:01:54,185 --> 00:01:56,275 können Sie Dinge wie das Hinzufügen einer neuen Spalte und einer duplizierten Spalte tun 53 00:01:56,270 --> 00:01:57,730 . 54 00:01:57,725 --> 00:02:00,535 Sie könnten den Stil sogar kopieren und einfügen. 55 00:02:00,530 --> 00:02:02,840 Vielleicht haben Sie einen schwarzen Hintergrund hinzugefügt, 56 00:02:02,840 --> 00:02:04,220 Sie ändern den Schriftstil des 57 00:02:04,220 --> 00:02:06,770 Textes und möchten diesen Stil wiederverwenden, 58 00:02:06,770 --> 00:02:08,810 kopieren Sie einfach den Stil und dann können Sie 59 00:02:08,810 --> 00:02:11,180 seinen Stil anderswo durchbohren. 60 00:02:11,180 --> 00:02:13,670 Das Gleiche gilt auch für diesen Abschnitt hier drin. 61 00:02:13,670 --> 00:02:15,910 Wenn ich hier oben auf den Button „ Abschnitt bearbeiten“ klicke. 62 00:02:15,905 --> 00:02:19,285 Jetzt sehen Sie, dass ich Zugriff auf den Layoutstil erweitert habe. 63 00:02:19,280 --> 00:02:22,190 Wie beim Layout kann ich dies auf volle Breite ändern. 64 00:02:22,190 --> 00:02:24,290 Ich kann vielleicht die Größe oder die Länge der Breite nackt ändern 65 00:02:24,290 --> 00:02:26,510 , sehr, 66 00:02:26,510 --> 00:02:28,580 sehr breite Verfügbarkeit jetzt werde ich, 67 00:02:28,580 --> 00:02:31,270 ich kann auch die Höhe ändern, wenn ich wollte. 68 00:02:31,265 --> 00:02:32,765 Ich kann eine Menge Dinge machen. 69 00:02:32,765 --> 00:02:34,195 Das Gleiche gilt für seinen Stil. 70 00:02:34,190 --> 00:02:38,080 Auch hier kann ich eine Hintergrundfarbe hinzufügen. Wenn ich wollte. 71 00:02:38,080 --> 00:02:40,210 Ich kann mehrere Dinge tun, wie Bewegungseffekte hinzufügen 72 00:02:40,210 --> 00:02:42,790 und so weiter. 73 00:02:42,790 --> 00:02:44,140 genau wie bei der Spaltenumgebung 74 00:02:44,140 --> 00:02:46,740 Klicken Sie genau wie bei der Spaltenumgebung auf die Schaltfläche „Abschnitt bearbeiten“. 75 00:02:46,735 --> 00:02:48,475 Sie können sitzen und Dinge wie 76 00:02:48,475 --> 00:02:50,725 Abschnitt bearbeiten und ich kann duplizieren. 77 00:02:50,724 --> 00:02:53,294 Ich kann sogar als Vorlage speichern, über die wir sprechen 78 00:02:53,290 --> 00:02:56,470 werden , wenn wir Elementor Pro verwenden. 79 00:02:56,470 --> 00:02:59,950 Lassen Sie mich jetzt schnell mit Ihnen über das Konzept der Ränder und Muster sprechen 80 00:02:59,950 --> 00:03:02,040 , denn 81 00:03:02,035 --> 00:03:04,005 dies wird sehr, sehr, sehr wichtig sein. 82 00:03:04,000 --> 00:03:05,800 Jetzt habe ich hier einen Abschnitt, der 83 00:03:05,800 --> 00:03:07,860 diesen Texteditor schreibt. 84 00:03:07,855 --> 00:03:10,005 Was ich tun werde, ist, dass ich ein Bild in einen anderen Abschnitt einfüge 85 00:03:10,000 --> 00:03:13,390 . 86 00:03:13,390 --> 00:03:17,100 Lambdas wählen schnell ein Bild aus, mit dem Sie gehen möchten. 87 00:03:17,095 --> 00:03:19,085 Lass mich in meine Mediathek gehen. 88 00:03:19,080 --> 00:03:21,960 Lassen Sie mich dieses Bild genau hier wählen. 89 00:03:22,210 --> 00:03:24,830 Jetzt sieh dir das an. 90 00:03:24,830 --> 00:03:30,520 Lassen Sie mich dem Abschnitt hier eine Hintergrundfarbe hinzufügen. 91 00:03:30,515 --> 00:03:33,025 Keine Sorge, ich zeige dir das alles ein bisschen später. 92 00:03:33,020 --> 00:03:35,660 Alles klar. Was genau sind Margen? 93 00:03:35,660 --> 00:03:39,370 Ränder werden verwendet, um Abstand zwischen Abschnitten hinzuzufügen. 94 00:03:39,365 --> 00:03:40,705 Im Moment haben wir einen Abschnitt 95 00:03:40,700 --> 00:03:42,050 diesen Texteditor mit 96 00:03:42,050 --> 00:03:43,520 rotem Hintergrund enthält, hätte 97 00:03:43,520 --> 00:03:46,120 hier einen weiteren Abschnitt, der das Bild enthält. 98 00:03:46,115 --> 00:03:49,655 Wenn ich zwischen diesen beiden viel Platz schaffen wollte, 99 00:03:49,655 --> 00:03:51,355 könnte ich hier tatsächlich ein Element verwenden 100 00:03:51,350 --> 00:03:53,960 , das als Spacer-Element bezeichnet wird. 101 00:03:53,960 --> 00:03:56,330 Sie können den konjugierten Abstandhalter sagen und ihn dann zwischen diesen beiden Abschnitten fallen lassen 102 00:03:56,330 --> 00:03:59,230 . 103 00:03:59,225 --> 00:04:01,585 Eine andere Möglichkeit, dies zu tun, wäre jedoch 104 00:04:01,580 --> 00:04:04,100 , zu einem dieser Abschnitte zu gehen. 105 00:04:04,099 --> 00:04:06,549 Ich gehe zum ersten Abschnitt hier drin. 106 00:04:06,545 --> 00:04:10,865 Ich gehe zu Advanced und eine Vielzahl von gehobenen Margen. 107 00:04:10,865 --> 00:04:13,495 Beachten Sie nun, dass Sie standardmäßig 108 00:04:13,490 --> 00:04:15,560 Ränder und Muster zu allen vier Seiten eines Abschnitts links, rechts, oben und unten, rechts hinzufügen können 109 00:04:15,560 --> 00:04:19,040 allen vier Seiten eines Abschnitts links, rechts, 110 00:04:19,040 --> 00:04:21,380 . 111 00:04:21,380 --> 00:04:25,450 Wenn ich nun entweder oben oder unten einen Rand hinzufügen wollte, können Sie sehen, 112 00:04:25,445 --> 00:04:27,565 dass sie angekettet sind, 113 00:04:27,560 --> 00:04:29,570 was bedeutet, dass alles, was Sie oben hinzufügen 114 00:04:29,570 --> 00:04:31,690 , auch unten hinzugefügt wird. 115 00:04:31,685 --> 00:04:34,375 Wenn Sie Werte für eine bestimmte Seite hinzufügen möchten 116 00:04:34,370 --> 00:04:37,070 , möchten Sie bei 0 beginnen. 117 00:04:37,070 --> 00:04:39,310 Zuallererst Zero. 118 00:04:39,305 --> 00:04:41,215 Du kommst hier rein und dann kannst du 119 00:04:41,210 --> 00:04:43,160 sehen, dass du die Verknüpfung der Werte aufheben kannst. 120 00:04:43,160 --> 00:04:46,190 Im Moment können Sie also einfach hinzufügen, denn oben sind rechte 121 00:04:46,190 --> 00:04:47,690 und linke Ränder für elementar 122 00:04:47,690 --> 00:04:49,250 standardmäßig auf auto eingestellt, 123 00:04:49,250 --> 00:04:51,040 Sie können dort keinen genialen erstellen. 124 00:04:51,035 --> 00:04:53,605 Beachten Sie jedoch, dass, wenn ich anfange 125 00:04:53,600 --> 00:04:56,620 Ränder am unteren Rand des ersten Abschnitts hinzuzufügen, beachten Sie, dass es sich um 126 00:04:56,615 --> 00:04:58,645 einen Abschnitt handelt, der 127 00:04:58,640 --> 00:05:01,490 das Bild enthält, nicht nach unten geschoben wird. 128 00:05:01,490 --> 00:05:03,320 liegt daran, dass ich zwischen diesem ersten Abschnitt und diesem zweiten Abschnitt Raum schaffe 129 00:05:03,320 --> 00:05:08,200 . 130 00:05:08,195 --> 00:05:11,425 Wenn ich wollte, könnte ich auch 131 00:05:11,420 --> 00:05:14,620 den Rückwärtsgang für den zweiten Abschnitt machen. 132 00:05:14,615 --> 00:05:16,915 Ich kann zum zweiten Abschnitt hier in der Nähe gehen, 133 00:05:16,910 --> 00:05:19,480 gehe zu Advanced. Unlink entwickelt sich. 134 00:05:19,475 --> 00:05:22,255 Und jetzt kann ich anstelle eines vorgestellten unten 135 00:05:22,250 --> 00:05:24,320 oben hinzufügen. 136 00:05:24,320 --> 00:05:27,410 Jetzt können Sie sehen, dass wir diesen Abschnitt drücken und das Bild vom ersten Abschnitt aus nach unten halten 137 00:05:27,410 --> 00:05:29,020 das Bild vom ersten Abschnitt aus nach unten 138 00:05:29,015 --> 00:05:31,315 , der besagt, welche Ränder nützlich sind. 139 00:05:31,310 --> 00:05:34,130 Sie sind nützlich, um Abstände zwischen Abschnitten zu erstellen. 140 00:05:34,130 --> 00:05:36,860 Eines von Mustern, weil sie Muster haben. 141 00:05:36,860 --> 00:05:39,950 Muster werden verwendet, um Abstand zwischen 142 00:05:39,950 --> 00:05:43,940 einem Element und seinem Rand oder seiner Spalte zu schaffen. 143 00:05:43,940 --> 00:05:47,290 Als Beispiel verwende ich den Texteditor hier. 144 00:05:47,285 --> 00:05:49,255 Alles klar, also gehe ich da rein. 145 00:05:49,250 --> 00:05:51,520 Ich gehe nach Advanced. 146 00:05:51,515 --> 00:05:53,465 Und jetzt können Sie sehen, 147 00:05:53,465 --> 00:05:55,905 dass ich das Muster zur Verfügung habe. 148 00:05:55,909 --> 00:05:57,789 Ich werde die Verknüpfung der Werte aufheben. 149 00:05:57,785 --> 00:06:01,225 Und wenn ich jetzt gleich hier mit dem Hinzufügen von Padding beginne, 150 00:06:01,220 --> 00:06:03,260 können Sie sehen, dass ich hier oben Platz zwischen dem Texteditor und seinem eigenen Abschnitt erstelle 151 00:06:03,260 --> 00:06:05,800 dem Texteditor und 152 00:06:05,795 --> 00:06:08,245 . 153 00:06:08,240 --> 00:06:09,680 Ich kann nach unten gehen, 154 00:06:09,680 --> 00:06:11,300 genau das Gleiche machen. 155 00:06:11,300 --> 00:06:12,770 Sie können also jetzt sehen, dass ich im Grunde 156 00:06:12,770 --> 00:06:14,090 Raum für meine Texte schaffe, 157 00:06:14,090 --> 00:06:16,660 ein Tool innerhalb eines eigenen Abschnitts. 158 00:06:16,655 --> 00:06:19,375 Dafür werden Muster verwendet. 159 00:06:19,370 --> 00:06:22,370 Sie verwenden, um Platz für 160 00:06:22,370 --> 00:06:26,180 Elemente innerhalb einer eigenen Spalte oder ihres Abschnitts zu schaffen. 161 00:06:26,180 --> 00:06:28,400 Das ist im Grunde das, was Muster nützlich sind. 162 00:06:28,400 --> 00:06:29,750 Das ist also der Unterschied zwischen Rändern sind Muster. 163 00:06:29,750 --> 00:06:32,540 Ränder werden verwendet, um Abstand zwischen Abschnitten zu schaffen. 164 00:06:32,540 --> 00:06:36,100 Muster werden verwendet, um Abstand zwischen einem Abschnitt 165 00:06:36,095 --> 00:06:39,985 und dem darin enthaltenen Element zu schaffen. 166 00:06:39,980 --> 00:06:42,650 Hoffentlich haben Sie jetzt 167 00:06:42,650 --> 00:06:46,930 ein gutes Verständnis dafür, wie hoch unsere Ränder und Polsterungen sind. 168 00:06:46,925 --> 00:06:48,155 Noch ein schneller Thin, 169 00:06:48,155 --> 00:06:49,885 Sie können Abschnitte auch durch einfaches Klicken und Ziehen neu anordnen 170 00:06:49,880 --> 00:06:52,760 . 171 00:06:52,760 --> 00:06:56,210 Wenn ich den Abschnitt mit dem Rand verschieben wollte, 172 00:06:56,210 --> 00:06:57,940 halte ich das Bild auch nach oben. 173 00:06:57,935 --> 00:07:01,045 Ich klicke einfach auf die Schaltfläche „Abschnitt bearbeiten“ und halte sie gedrückt. 174 00:07:01,040 --> 00:07:03,140 Jetzt kannst du sehen, dass es mir erlaubt, mich zu bewegen. 175 00:07:03,140 --> 00:07:04,970 Ich kann es dir ganz nach oben bewegen. 176 00:07:04,970 --> 00:07:07,660 Warten Sie, bis der blaue Strich oder die BlueLine angezeigt wird, 177 00:07:07,655 --> 00:07:10,765 und lassen Sie dann einfach ein Intro des Bildlichttages los. 178 00:07:10,760 --> 00:07:12,200 Sie haben diese Option hier 179 00:07:12,200 --> 00:07:13,580 mit elementwise, was es Ihnen ermöglicht, 180 00:07:13,580 --> 00:07:16,130 unsere Abschnitte neu anzuordnen. 181 00:07:16,130 --> 00:07:18,890 Sie könnten auch Spalten neu anordnen 182 00:07:18,890 --> 00:07:21,740 und ich dupliziere diese Spalte einfach hier drin. 183 00:07:21,740 --> 00:07:22,940 Lassen Sie mich dieses Bild schnell ändern 184 00:07:22,940 --> 00:07:24,260 , nur um Ihnen eine sehr, sehr schnelle Demonstration zu geben 185 00:07:24,260 --> 00:07:27,590 , lassen Sie mich dieses Bild wählen. 186 00:07:27,590 --> 00:07:29,090 Also kann ich einfach 187 00:07:29,090 --> 00:07:31,360 anklicken, wo Sie die Schaltfläche Spalte bearbeiten haben. 188 00:07:31,355 --> 00:07:32,765 Und dann arrangieren wir es. 189 00:07:32,764 --> 00:07:35,364 Sie können sehen, wo Sie sehen, wo Sie sehen können. 190 00:07:35,360 --> 00:07:37,370 Diese Option steht Ihnen also 191 00:07:37,370 --> 00:07:39,980 auch mit elementar zur Verfügung. 192 00:07:39,980 --> 00:07:41,330 Sie sich also keine Sorgen, wenn wir anfangen, mit Elementen zu 193 00:07:41,330 --> 00:07:42,650 gehen oder Sie beginnen, 194 00:07:42,650 --> 00:07:44,570 es beginnt, viel mehr Funktionen und Funktionalitäten von Elementen zu entdecken 195 00:07:44,570 --> 00:07:46,640 . 196 00:07:46,640 --> 00:07:47,540 Und danke fürs Zuschauen. 197 00:07:47,540 --> 00:07:50,040 Wir sehen uns in der nächsten Klasse.