Abschnitte, Spalten, Ränder & Auffüllungen ERKLÄRT - Elementor WordPress für Seitenlayout | Rino De Boer | Skillshare
Suchen

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Abschnitte, Spalten, Ränder & Auffüllungen ERKLÄRT - Elementor WordPress für Seitenlayout

teacher avatar Rino De Boer, Designer & Content creator

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Abschnitte, Säulen, Rand und Polsterungen ERKLÄRT

      0:41

    • 2.

      Säulen und Abschnitte

      2:23

    • 3.

      Innere Abschnitte

      4:10

    • 4.

      Marge und Polsterung

      2:12

    • 5.

      Beispiele praktizieren

      7:57

    • 6.

      Andere Dinge, die du wissen musst, die du wissen musst

      6:20

    • 7.

      Wann man anwendet, was man ankommt

      5:40

    • 8.

      Vielen Dank

      0:48

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

812

Teilnehmer:innen

2

Projekte

Über diesen Kurs

In diesem Kurs erkläre ich im Detail, wie du Abschnitte, innere Abschnitte, Spalten, Rand und Polsterung verwenden kannst, um ein Seitenlayout in Elementor zu erstellen. Dies ist eine Elementor-Kurs für Anfänger:: Wenn du also neu bei Elementor bist, dann könnte dieses Video für dich interessant sein.

Wir beginnen mit Spalten und Abschnitten, wie baut du eine Seite richtig auf? Dann erkläre ich alles über Ränder und paddings, ist der Abstand zwischen den Elementen ausgelegt?

Danach werden wir dir einige Beispiele anschauen, um dir zu zeigen, wie bestimmte Seiten aufgebaut sind. Außerdem zeige ich dir, wann du Margin verwendest und wann du Polsterungen verwendest, und warum.

Dieses Erklärvideo ist perfekt für alle, die mit dem Aufbau von Websites in Elementor beginnen wollen.

Erhalte Elementor über http://livingwithpixels.com/elementor

Triff deine:n Kursleiter:in

Teacher Profile Image

Rino De Boer

Designer & Content creator

Kursleiter:in

Hi, I'm Rino and I've been in design for over more than 10 years now. I started with design as a hobby, but I quickly realised that this was more than a hobby for me. So that's why I went to design school and studied: Communication and Multimedia Design at the University of Applied Sciences in Rotterdam (The Netherlands).

I was so passionate about it that I started my first YouTube channel (in Dutch) about design. I grew this channel to about 30.000 subscribers and after that I created my first English channel where I already have more than 150.000 subscribers. In total I've generated over 10 million total views on YouTube alone.

Because of this YouTube channel I was approached by big influencers and brands, and I got the opportunity to start my own company and work for b... Vollständiges Profil ansehen

Level: Beginner

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Abschnitte und Säulen, Randstreifen und Polsterung: Die verwirrendste Sache, als ich mit Elementen begann oder den Unterschied zwischen Spalten, Schnitten, Schnittpunkten, Batting und Rand zu verstehen war . Ich war sehr verwirrt, weil es eine Menge Dinge gibt, die Sie wissen müssen bevor Sie in der Lage sind, erstaunliche Designs wie diese Beispiele zu erstellen, wie Sie hier sehen können. Jetzt nach mehr als zwei Jahren Arbeit in Element oder ich wollte ein Video für alle machen , die noch Fragen zu Abschnitten, Spalten, Padding und Rändern haben. In diesem Video werde ich die Theorie erklären, wie es funktioniert und wie Sie komplexere und cool-aussehende Designs erstellen können. Ich habe wirklich hart an diesem Video gearbeitet, also hoffe ich, dass es dir gefallen wird und lass uns jetzt loslegen. 2. Säulen und Abschnitte: Lassen Sie uns zuerst über den Unterschied zwischen Spalten und Abschnitten sprechen. Ich habe den Abschnitt mit einem blauen Umriss hier dargestellt und es gibt immer ein S darin. Und Sie können diese beiden Rechtecke sehen, was bedeutet, dass Abschnitte übereinander platziert werden können, wie Sie in diesem Beispiel hier sehen können. So sind Abschnitte wie die großen Blogs, die die Länge einer Seite aufbauen. Also, wenn Sie einen Blick auf meine Portfolio-Website, zum Beispiel, die wieder c ist ein großer Abschnitt hier drüben. Dies könnte ein Abschnitt sein, Festplatte könnte ein Abschnitt sein, dies könnte ein Abschnitt sein. Dies sind also die wichtigsten Blogs, die eine Seite aufbauen. Jetzt sind Spalten immer innerhalb von Abschnitten, und ich habe sie hier mit der lila gepunkteten Linie und einem c innerhalb davon illustriert. Und hier habe ich die Rechtecke auf der Website platziert, weil Spalten nur horizontal gestapelt werden können. Und alle Inhalte, die Sie auf Ihrer Website platzieren, befinden sich immer innerhalb einer Spalte. Sie können keinen Inhalt innerhalb eines Abschnitts platzieren. Du brauchst immer eine Spalte, um etwas darin zu stecken. Also jede Hexe, ziehen Sie aus Elementen oder Sie werden das in eine Spalte einfügen , die Teil eines Abschnitts oder einer Kreuzung ist, aber mehr dazu später. Was Sie in diesem Beispiel auch sehen können, ist, dass die Spalte nicht so weiß ist wie der Abschnitt. Dieser Abschnitt hier ist Vollbildmodus und die Spalte ist nicht. Dies ist wichtig, weil jeder einen anderen Bildschirm hat. Also, wenn der Bildschirm größer wird als dieser Abschnitt wird nach oben gestreckt und die Spalten bleiben gleich standardmäßig Element oder Hauptspalten oder 1140 Pixel breit. Und die Abschnitte sind so weiß, wie der Bildschirm bekommt. Und diese 1140 Pixel sind natürlich auf einem Desktop. Also lassen Sie mich Ihnen hier ein Beispiel zeigen. Dies ist eine der Client-Websites, die ich entworfen habe. Und wie Sie hier sehen können, hält. Unser Board ist 14 Hunderte breit, aber der Hauptinhalt, wie alle Elemente, wie Sie aus dem Menü zu allen Bildern sehen können, sind alle Einsicht in dieses Hauptraster. Und dieser Haupt Great ist 1140 Pixel breit. Und das macht diese Zuweisung perfekt für Elemente oder so. Sie haben einige Elemente auf der Website, die breiter sind als das. Für Beispiel-Header-Bilder wie Overhear, aber für Bilder und Hintergrundfarben ist es nicht wirklich wichtig, ob es ein bisschen größer oder ein großer, kleiner wird , aber der Inhalt muss auf acht Platz bleiben. Deshalb haben alle Spalten eine feste Breite. 3. innere Abschnitte: Okay, also gehen wir zurück zu den Säulen. Wie ich bereits sagte, können die Säulen horizontal gestapelt werden , so dass sie nebeneinander liegen. Nehmen wir an, dass Sie zwei Zeilen von Spalten erstellen möchten, etwa so. Das ist nicht möglich. Warum nicht? Nun, weil Spalten nur nebeneinander und nicht übereinander sein können. Deshalb müssen Sie, wenn Sie ein Design wie dieses erstellen möchten, so etwas tun. Sie müssen also die anderen Spalten innerhalb eines anderen Abschnitts platzieren. Und dann, wenn Sie den Abstand zwischen all diesen Elementen verringern , können Sie sie nahe beieinander machen. Aber das ist nicht immer das, was Sie wollen. Denn dies ist beispielsweise ein Hauptabschnitt, der einen Titel, einen Text und einige Bilder enthält. Diese Art von Design ist wahrscheinlich etwas, das Sie auf verschiedenen Seiten verwenden werden. Sie möchten also in der Lage sein, diesen ganzen Teil mit einem Klick zu kopieren. Wenn Sie also diese Option verwenden, haben Sie zwei Abschnitte oder sogar einen Baum, wenn Sie den Titel auch in einem anderen Abschnitt einfügen, was für das Kopieren und Einfügen auf andere Seiten nicht sehr praktisch ist. Da kommen also Kreuzungen ins Spiel. Gehen wir also zurück zu einem leeren Abschnitt mit einer Spalte darin. Was Sie tun müssen, ist dann einen Schnittpunkt einfügen. Dann gibt es in diesem Schnittpunkt zwei weitere Spalten, da standardmäßig, wenn Sie einen Schnittpunkt ziehen, automatisch zwei Spalten enthält. Also lass mich dir zeigen, was ich meine. Wenn Sie einen normalen Abschnitt erstellen, So ein Hauptabschnitt, Sie erhalten nur eine Hauptspalte, diese Spalte. Und das ist ein Abschnitt. Wenn Sie einen Schnittpunkt wie diesen innerhalb dieser Spalte ziehen, erhalten Sie immer zwei Spalten innerhalb dieses Schnittpunkts. Das ist also, was Sie hier sehen können. Und mit diesem Design können Sie Spalten in einem Hauptabschnitt übereinander stapeln. Zum Beispiel, wenn Sie dieses Design erstellen wollten, dann sieht die Struktur hinter den Kulissen in Elementen oder ein bisschen so aus. Sie haben also einen Schnittpunkt innerhalb davon gezogen. Sie haben eine dieser inneren Spalten dupliziert. Dann haben Sie drei Spalten innerhalb dieses Schnittpunkts. Und dann, weil Abschnitte und Schnittpunkte übereinander dupliziert werden können, machen Sie einfach ein Duplikat. Und jetzt haben Sie zwei Schnittpunkte mit beiden drei Spalten. Und auf diese Weise haben Sie eine sechste Klasse innerhalb eines großen Abschnitts, die Sie auf eine andere Seite kopieren können. Oder zum Beispiel, groß diesen ganzen Abschnitt nach oben und ziehen Sie ihn dann ein paar Positionen auf der Seite nach oben. Und die Schönheit an Säulen ist, dass Sie sie anpassen können. Wenn Sie zum Beispiel ein Design wünschen, das ein bisschen so aussieht , können Sie das tun. Sie löschen einfach eine dieser Spalten und ändern die Breite der Spalte. Also lassen Sie uns hier ein echtes Beispiel sehen. Also hier haben wir eine Kreuzung innerhalb eines Hauptabschnitts. Wenn eine Spalte, können Sie einfach diese Rechtsklick duplizieren und dann duplizieren. Wenn Sie diese dann duplizieren, haben Sie diese beiden inneren Spalten. Wenn Er dann die Führung eine Spalte, wieder, dass Sie jetzt sehen können, werden sie Mitte, aber Sie können so ziehen und setzen Sie es bei 33.3. Und auf diese Weise, Sie haben etwas, das ein bisschen mehr benutzerdefinierte aussieht. Ich habe das auf meiner eigenen Website benutzt. Wie Sie sehen können, ist dies Teil meiner About Seite. Und wenn Sie darauf klicken, können Sie sehen, dass dies die Hauptspalte ist, dann gibt es eine Kreuzung mit zwei Spalten, und hier sind drei Spalten, aber ich habe gerade eine Spalte leer gelassen. Und das lässt es so aussehen. Sehr nett. Jetzt wissen Sie also, dass Sie Abschnitte übereinander und Spalten nebeneinander stapeln können . Das bedeutet aber auch, dass Sie die Hauptspalte duplizieren können, wie Sie hier sehen können. Also, wenn Sie das tun, dann haben Sie zwei Spalten mit beiden Schnittpunkten in ihnen. Damit können Sie etwas schaffen, das viel mehr Möglichkeiten hat. Ich habe das zum Beispiel mit dieser Website gemacht, die eine Zeitschriftenwebsite ist, wie Sie hier sehen können. Hier ist mein Hauptabschnitt. Dann gibt es diese Spalte hier drüben und diese Spalte hier drüben. Und in dieser Spalte gibt es auch eine weitere Kreuzung, wie Sie hier sehen können. Auf diese Weise können Sie ein viel komplexeres Design erstellen als nur die normalen Grundlayouts. 4. Rand und Polsterung: Okay, jetzt haben wir diesen ersten Teil abgedeckt. Lassen Sie uns nun über Ränder und Polsterungen sprechen. Denn wenn Sie Ränder Einbettungen verstehen, können Sie das Design so anpassen, dass es wirklich kreativ aussieht, um Überlappungseffekte und Dinge zu schaffen , die einfach viel cooler aussehen. Also lasst uns anfangen. Wie ich bereits sagte, ist der Inhalt immer innerhalb einer Spalte und Sie haben immer Platz innerhalb eines Elements und außerhalb eines Elements. Wie zum Beispiel, wenn Sie einen schönen Mantel haben, gibt es auch eine spezielle Polsterung auf der Innenseite. So kannst du dich daran erinnern, oder? Das Padding ist also die Einsicht, der Rand ist das Äußere, also ist das alles außerhalb eines bestimmten Elements. So hat eine Säule auch ein Außen und ein Innen. Und der Einblick Raum ist die Watte und die Außenseite ist der Rand. Und das gilt auch für die Dissektion, die Einsicht Watte und Außenrand. Und das ist auch für die anderen Elemente dasselbe. Wenn Sie also 30 Pixel Rand unten auf die oberen Elemente anwenden, und insgesamt werden 60 Pixel zwischen der Schaltfläche und dem darüber liegenden Element liegen. Jetzt wird es Spaß machen. Lassen Sie uns zu einigen realistischen Beispielen gehen. So können Sie das einfache Design hier sehen, Titel, Tags, Button, einen Hintergrund und ein Bild. Nehmen wir an, wir wollen ein Design erstellen, das so aussieht, wo Sie diese coolen überlappenden Effekte haben. Lassen Sie uns zuerst einen Blick darauf werfen, was hier bereits passiert. Die linke Spalte hier mit den darin enthaltenen Texten hat eine Polsterung von 30 Pixeln auf allen Seiten. Deshalb gibt es genug Platz um die Elemente. Also lasst uns zuerst das Bild ein wenig nach unten legen. Also, wie Sie das tun, ist, indem Sie Rand oben hinzufügen, weil das Bild nach unten schiebt. Wenn Sie dann das Bild nach links drücken möchten, müssen Sie den Rand links anwenden, aber dann ein Minus eins. Hier sind es minus 150 Pixel und sie ziehen das Bild nach links. Und dann haben wir ein Problem mit unserem Text, wie Sie sehen können. Was Sie dann tun müssen, ist, mehr Polsterung auf der Innenseite der linken Spalte hinzuzufügen , wo sich der Text befindet. Das bedeutet also, dass die rechte Auffüllung dieser linken Spalte mehr ist als die obere, linke und untere. Und dann bekommst du ein Design wie dieses. 5. Üben: Beginnen wir also zuerst mit einem einfachen Design. Ich habe versucht, ein paar Entwürfe nachzubilden, die Sie vielleicht im Video gesehen haben. Wie Sie wissen, ob Ihr Design in Element oder auf VR gepresst gebaut werden kann, wie Sie hier sehen können, habe ich es geschafft, dieses einfache Design zu erstellen. Lassen Sie mich Ihnen zeigen, wie das gemacht wird. Oder vor allem, Sie können sehen, dass es hier einen Hauptabschnitt gibt. Das ist ein Abschnitt. Dann gibt es hier im Hintergrund eine Hauptspalte, und dann gibt es einen Schnittpunkt nur für diese beiden Textebenen. Dann gibt es eine weitere Kreuzung, die D drei Spalte enthält. Und dann für diese Bilder haben diese Bilder einen bereits angewendeten Schatten, den ich in Adobe XD erstellt habe, aber ohne Styling würde es so aussehen. Also, was ich jetzt tun muss, ist, dass ich ein paar Dinge in der Marge ändern muss , weil wir die Außenseite dieses Gerichts ändern wollen. Um dies zu ändern, können Sie einfach auf das Minus links klicken und dann sehen, was passiert. Und wie Sie jetzt sehen können, dieses Bild nach links gerichtet. Also werde ich das auf 60 setzen. Jetzt wollen wir es nach oben verschieben, damit wir nicht oben verwenden, oder wir werden Minusstopp verwenden. Auf diese Weise bewegt es sich nach oben. Versuchen wir zum Beispiel minus 80. Das ist schon ein bisschen besser. Lasst uns das versuchen. Versuchen wir es mit 140. Dies überlappt bereits jetzt die Spalte. Und dann muss ich nur ein wenig nach unten tun kann minus 70 sein. Und ja, wie Sie sehen können, sieht das schon Zucht Eis fließt Effekt übrigens, wenn Sie wissen wollen, das ist Teil der Hover-Effekte, die Sie hier finden können. Es heißt Bob. Das ist also ziemlich cool. Gehen wir auf die nächste. Okay, das ist also etwas komplizierter. Also, was habe ich hier gemacht? Wieder haben wir den Hauptabschnitt hier drüben. Wir beginnen immer mit dem Hauptabschnitt. Dann beginnen wir immer mit einer Hauptsäule, die hier drüben ist. Und was passiert dann hier drüben? Es gibt eine Kreuzung. Also habe ich gerade einen Schnittpunkt innerhalb der Hauptspalte gezogen, und dieser Schnittpunkt hat zwei Spalten, 12 in der rechten Spalte, es gibt ein Bild in der linken Spalte, es gibt ein Bild, einen Gezeitentext, zwei Schaltflächen und eine Hintergrundfarbe. Standardmäßig hat eine Spalte keine Hintergrundfarbe. So können Sie hier die Hintergrundfarbe einstellen, wie Sie sehen können. Das habe ich auch für die Hintergrundspalte getan, wie Sie sehen können. Und auf diese Weise haben wir drei Schichten übereinander. Und was ich auch getan habe, um dies zu erstellen, ist, diesem Schnittpunkt eine Breite zu schenken , weil es standardmäßig volle Breite innerhalb des Hauptcontainers sein wird. Das sind also 1140 Pixel. Aber das wollen wir nicht, weil wir etwas wollen, das manchmal etwas dünner ist. Dort habe ich die Inhaltsbreite verwendet. So können Sie dem gesamten Inhalt innerhalb eines Abschnitts eine Breite geben. Sie können das auch übrigens für Ihren Hauptbereich tun , wenn Sie möchten. Aber das ist bereits bei Box eingestellt. Und wie ich bereits sagte, Box ist immer 1140. Jetzt gibt es noch eine Sache, die ich Ihnen in diesem Design zeigen möchte , und das ist, dass es zwei Tasten nebeneinander gibt. Und dies geschieht nicht mit einem anderen Schnittpunkt, da Sie nur einen Schnittpunkt innerhalb eines Hauptabschnitts platzieren können , aber Sie können keinen Schnittpunkt innerhalb eines Schnittpunkts wiedergeben. Also wirst du so tief gehen. Wenn Sie einen solchen Schnittpunkt ziehen, wie Sie sehen können, wird es versuchen, ihn unter diesen Hauptschnittpunkt zu legen. Aber nicht innerhalb dieser Kreuzung, das ist nicht möglich. Also, was ich hier getan habe, ist ein kleiner Trick. Also habe ich gerade einen Button importiert und bin gegangen, um voranzukommen und dann zu positionieren. Und dann bei der Positionierung ist dies normalerweise standardmäßig. Sie können es in Inline setzen. Und dann, wenn Sie diesen Knopf auch auf Inline setzen, Dann können die Elemente nebeneinander platziert werden. Und dann ist das einzige, was ich getan habe, ein wenig Polsterung hier oder Rand hinzuzufügen , um ein wenig Platz zwischen diesen beiden Tasten zu schaffen. Und ich habe einen coolen Hover-Effekt angewendet. So wie Sie sehen können, nicht sehr kompliziert zu erstellen, aber es sieht wirklich cool aus. Gehen wir nun auf den nächsten, der am interessantesten ist. Also habe ich dieses Design neu erstellt, weil wir im vorherigen Video einen Blick darauf geworfen haben und das sieht wirklich kreativ aus. Also, was ich getan habe, ist von Photoshop selbst in diesem Bild hier ist ein Beweis, um dieses ganze Design neu zu erstellen. Also, wie ist dieser Aufbau? Auch hier ist es eigentlich nicht so kompliziert, also ist es nur ein Hauptabschnitt. Dann gibt es eine Hauptspalte, wie Sie hier sehen können, die alles enthält. Das einzige, was es nicht enthält, ist dieses Hintergrundbild hier drüben, aber das ist nur ein Hintergrundbild des Hauptabschnitts. Also, was ich getan habe, wenn Sie in Stele Hintergrund gehen, Ich habe ein Hintergrundbild eingerichtet, das diese visuelle Ecke hat , als wenn Sie die Position unten links setzen, dann wird die Kamera immer von hier aus beginnen. Und dann habe ich das als Abdeckung gesetzt, so dass es immer auf den Bildschirm dehnt, so dass der Bildschirm größer oder kleiner wird, wird es anpassen. Und es ist, wo Sie einen coolen Hintergrund haben, der ein wenig mit dem Design stört. Also dann im Inneren von hier gibt es zwei Kreuzungen. Dies ist der erste, und es enthält nur diesen Text und dieses Bild. Das ist nur ein Bild, das ich hochgeladen habe, oder? Weil ich das in Photoshop erstellt habe. Also ein Bild und Text und es gibt nur ein wenig Polsterung, Top-Polsterung auf der Innenseite dieser Spalte, wie Sie hier sehen können, AD. Und es gibt eine Menge Wetten auf der rechten Seite, um sicherzustellen , dass dieser Text innerhalb dieser Spalte bricht. Dann gibt es die zweite in unserem Abschnitt, die diese ist. Und dieser hat eine Menge negativer Marge , so dass er den Schnittpunkt überlappen kann, den Sie hier sehen können. Also, wenn Sie diese Marge löschen, ist es, wie es tatsächlich ist. Layout mit zwei Spalten in einem Schnittpunkt, drei Spalten Layout in einem Schnittpunkt. Und dann habe ich gerade diese Initiation LA behandelt, Hey, bewegen Sie sich minus 180 Pixel hoch. Und dann habe ich den Z-Index auf zwei gesetzt. Und ein Z-Index ist ähnlich wie Ebenen in einem Photoshop oder Adobe ksi oder einem kreativen Werkzeug. Also, desto mehr oben ist es, also ist die mit der höchsten Zahl oben auf allem. Also hier habe ich nur zwei Schichten, also habe ich diese zwei gemacht und dann ist das eine, aber du hättest das nicht auf eins setzen müssen. Es automatisch, ich denke, es ist eine oder 0 standardmäßig, also das ist es. Und hier in dieser Spalte gibt es nur einen Hintergrund. Wieder, wie Sie sehen können, ein einfacher Hintergrund und Wetten auf die Einsicht 50 auf allen Seiten, so dass es schafft Raum auf der Innenseite hier drüben. Dann die Social-Media-Icons, die erstellt werden , die vertikal sind oder nur eine Symbolliste ohne Texte darin. Normalerweise gibt es hier drüben Steuern. Ich habe gerade gelöscht, dass Text nur eine Liste ist und dann habe ich es nach rechts ausgerichtet, wie Sie sehen können, und legen Sie es in dieser Spalte. Und dann ist das einzige, was ich getan habe, was ich Ihnen noch nicht gezeigt habe, was ich Ihnen noch nicht gezeigt habe,ich setze TIF vertikale Ausrichtung auf den Boden, weil Sie Padding und Marge für alles verwenden können, wenn Sie möchten. Aber das ist keine Best Practice, denn wenn Sie nur etwas an der Unterseite setzen wollen, dann müssen Sie mit all diesen Pixeln erraten ist kein sehr schöner Workflow. Also, was Sie dann tun können, ist einfach die vertikale Ausrichtung an der Unterseite zu setzen und dann werden alle Elemente von unten beginnen. Und dann können Sie ein wenig Verbot hinzufügen, wenn Sie wollen, aber das macht Ihr Leben viel einfacher. Also, dass AC vertikale Ausrichtungsoption, okay, jetzt wissen Sie die Grundlagen, die wichtigsten Dinge, Sie verstehen den Unterschied und Sie können wahrscheinlich erstellen einige mehr benutzerdefinierte Designs jetzt. Aber es gibt immer noch ein paar Dinge, die Sie wissen müssen , damit Sie nicht auf unnötige Probleme stoßen. 6. Andere Dinge, die du wissen brauchst: Das erste, was ich zeigen wollte, ist, dass sich Spaltenbreiten ändern können , wenn Sie eine neue Spalte erstellen, und manchmal ist das nicht das, was Sie wollen. Wenn ich zum Beispiel die Breite dieser Spalte ändere, ändert sich die Größe dieser Logos und Sie möchten Ihr Design konsistent halten. Wenn du mit etwas Dan fertig bist, willst du es so behalten. In diesem Beispiel ist diese Spalte 19,3% und dann ist sie perfekt für das Logo. Wenn ich also eine neue Spalte wie diese erstelle, in einer neuen Spalte, dann können Sie sehen, dass sich plötzlich alles ändert. Das ist nicht das, was ich will. Dann können Sie zurück zu Ihrer Spalte gehen und die Breite hier wieder auf Ihre 19.3 einstellen. Und auf diese Weise wirst du das gleiche Design behalten, wie du willst. Natürlich können Sie auch einfach Ihre Maus so verwenden und sie ändern. Aber es ist eine Funktion, die Sie sehr oft verwenden. Auch, zum Beispiel, mit diesem D3 Spalten hier drüben sind alle dreiunddreißig Punkt drei. Also gibt es hier auch einen kleinen Trick, der Struktur genannt wird. Wenn Sie die Zahlen nicht eingeben möchten, finden Sie hier ein paar grundlegende Layout und wählen Sie aus. Es ist also das dreispaltige Layout dieses erste. Dann hat es automatisch das mit, wie ich bereits sagte, können Sie Spalten und Hintergrund geben, wie ich hier drüben getan habe. Ich habe das mit einer Farbe gemacht, aber Sie können ihm auch ein Hintergrundbild geben. Zum Beispiel, was für ein Design wie dieses, können Sie der ganzen Spalte ein Hintergrundbild geben und dann können Sie immer noch Elemente darauf platzieren, weil es keine sehr gute Übung ist, einfach ein Bild zu verwenden und dann Texte über hier und eine Anzeige negativen Rand auf den Text, um es oben auf Ihrem Bild zu machen. Sie können aber auch ein Bild als Hintergrund einrichten. Und dann wird jedes Element, das Sie in dieser Spalte setzen, automatisch oben sein. So funktioniert das auch. Wenn Sie die Hintergründe-Funktion hier verwenden können, ist das besser, als negative Ränder zu verwenden, um Dinge übereinander zu machen. Okay, jetzt ist eine Sache, die ich an Element nicht wirklich mag oder, und das ist, wenn Sie ein Design wie dieses mit einem Drei-Spalten-Layout haben, wollen Sie 20 Pixel zwischen all diesen Abschnitten. Wie kannst du das machen? Ich habe noch keine Lösung gefunden. Das offensichtlichste, was ich sehe, ist, dass die meisten Leute einfach jeder Spalte einen Sweeney Pixel geben, oder? Zum Beispiel, oder Wohltätigkeitsorganisation oder was immer Sie wollen. Aber das Problem dabei ist, dass es hier etwas Platz gibt, was bedeutet, dass Ihre Website nicht perfekt auf das Raster ausgerichtet ist. Und das kann Ihr Design weniger professionell aussehen lassen, weil es nicht sehr gut ausgerichtet ist. Und eine andere Lösung, die ich sehe, ist, einfach Polsterung auf der linken Seite hier drüben hinzuzufügen, so. Lassen Sie es auf der linken Seite legen und löschen Sie dann einfach die Polsterung auf diesem mittleren. Aber dann ist das Problem, dass dieser Block größer ist als die anderen beiden, so dass das auch nicht funktioniert. Also, was ich immer mache, ist, dass ich ein bisschen Mathematik mache. Nehmen wir an, dass Sie 20 Pixel zwischen diesen Spalten wollen. Was ich dann mache, ist, dass ich einfach zum Rand gehe und zum Beispiel, ich mache 14 hier drüben und sieben hier drüben, auch sieben hier drüben, und dann 14 hier drüben, weil sieben plus sieben. 14. Das bedeutet, dass dieser Block 14 Pixel weniger breit ist, aber das gilt auch für diesen Block und diesen Block. Und auf diese Weise ist es perfekt auf das Gitter ausgerichtet. Und es gibt 20 Pixel, eigentlich 21 dazwischen, also ist es nicht perfekt. Sie können hier auch 66 booten, wenn Sie das wollen, aber dann ist diese Box, es ist zwei Pixel weniger breit, also ist es auch nicht perfekt. Also habe ich nicht wirklich eine Lösung dafür. Leider, wenn Sie 30 Pixel in der Breite wollen, dann ist es einfach. Du hast gerade 20 hergesteckt, Sen. Sen und verschwitzt. Jetzt ist das perfekt. Auch wenn Sie eine bessere Lösung als diese haben, lassen Sie es mich wissen, weil ich mir nicht sicher bin, aber das ist die beste Lösung, die ich für dieses Problem finden könnte. Und wenn das immer noch ein bisschen zu viel für Sie ist und Sie nicht wirklich Vertrauen fühlen, dann können Sie den Navigator verwenden. Also, wenn Sie mit der rechten Maustaste irgendwo innerhalb von Elementen oder Sie können den Navigator hier und hier zu bekommen, können Sie alles sehen. So können Sie die Hierarchie sehen. Dies ist der Hauptabschnitt, dies ist die Spalte, und dann wird es auch ausgewählt. Auf diese Weise können Sie fast nie verlieren, wo Sie sind, weil Sie einfach die Hierarchie hier sehen können und Sie sogar jeden Abschnitt und Namen angeben können, wenn Sie möchten. So ist dieser Abschnitt zum Beispiel eine Geschichte, so dass Sie einfach auf den Namen doppelklicken können, Sie in Geschichte eingeben, und Sie können darauf klicken und dann wirklich leicht durch die Website navigieren. Und Sie können sogar die Position jedes Abschnitts ziehen und ändern. Hier drüben. Es macht Ihr Leben wirklich ein wenig schöner, was Sie auch tun können, was wirklich cool ist Höhenelemente auf Handy. Also jetzt haben wir nur über Desktop gesprochen, aber sagen wir auf Mobilgeräten, ich möchte diese beiden Bilder nicht zeigen, weil ich nicht weiß , welches ich wählen soll und ich sie einfach verstecken möchte. Also, was Sie tun können, ist, dass Sie in den mobilen Modus gehen können. Sie können auf Ihren Hauptbereich klicken. Ich habe es bereits getan, wie Sie sehen können, weil es grau wird. Sie können zu Advanced gehen, Sie können zu reaktionsschnell gehen, und Sie können auf Höhe auf Handy klicken. Und das wird diese ganze Sache einfach auf dem Handy verstecken. Sie können das auch auf dem Tablet tun, wenn Sie möchten. So Papa ist auch ziemlich cool, aber man kann auch tun, was ziemlich cool ist, ist gewechselt Positionen. Also zum Beispiel, wenn ich zuerst die Bilder auf Handy und dann den Text zeigen möchte, was etwas ist, das Sie wollen. Viele Male auf Handy, Sie können zu dem gleichen Fenster hier gehen und dann auf Flüsse Spalten klicken. Also, wenn es zwei Spalten innerhalb dieser Kreuzung gibt, was für diese Website gilt, werfen Sie einen Blick hier in dieser Kreuzung zwei Spalte, oder? Gehen Sie zum Handy. Stellen Sie sicher, dass Sie das anziehen. Ja. Und dann wird es zuerst die Bilder und dann den Text zeigen. Und dann können Sie sehen, dass Sie hier ein wenig Polsterung hinzufügen müssen, um zu leben, um ihm ein wenig Platz zu geben, aber das sind Details. Und dann ist das letzte, was für reaktionsfähige Modi, die ich Ihnen zeigen möchte, dass Sie die Einstellungen auf Mobilgeräten zurücksetzen können , wenn Sie möchten, ohne den Desktop zu beeinflussen. So habe ich zum Beispiel 60% der Polsterung auf der rechten Seite hier drüben, was all diese Texte auf der linken Seite setzt. Dann, wenn ich zum Handy gehe, würde es normalerweise so aussehen. Jetzt kann ich das einfach aufheben und die Polsterung für Handy anpassen. Ohne das wird es die Polsterung auf Desktops beeinflussen oder Daten ist auch ziemlich nett. 7. Wann du verwendest, was: Okay, jetzt gehen wir zum letzten Teil dieses Videos, das so genannt wird, wann man was benutzt? Weil Polsterung und Marge immer noch ähnlich sind, oder? Was Sie also tun möchten, ist, die Grundlagen zu verstehen und dann Ihre eigene Variation darüber hinzuzufügen. Was Sie also wissen müssen, ist, dass Elemente oder nicht wirklich für Designer gebaut wurden. Es ist eher für die Hälfte Designer wollten nicht viel Zeit mit den Details verbringen. So haben sie versucht, uns zu helfen, aber sie haben eine Menge von Bettwäsche und Styling bereits eingefügten Elementen angewendet. Zum Beispiel hat jede Spalte bereits standardmäßig ein wenig Polsterung, was eigentlich sehr frustrierend ist. Und weil, wie Sie in diesem Entwurf sehen können, habe ich hier nicht eine Biegung geändert. Wenn Sie also einen Schnittpunkt ziehen, fügen Sie einige Elemente ein. Zum Beispiel, Angriffe hier drüben, so etwas. Sie können sehen, dass zwischen hier und hier ein wenig Platz ist. Und das liegt daran, dass innerhalb jeder Spalte bereits ein angewendetes Padding vorhanden ist. Wenn Sie also vorwärts gehen, müssen Sie die Verknüpfung des Polsters aufheben, um es tatsächlich auf die Größe zu verschieben. Wie Sie hier in diesem Design sehen können, hat diese Hauptspalte bereits die Polsterung, das Standardfanning, und ich muss es immer aufheben, um sicherzustellen, dass es tatsächlich auf dem 1140 Raster ist. Also die ganze Breite der Website. Also, wenn Sie das nicht tun und riskieren, dass Sie Teil sind , sind nicht auf das Logo innerhalb Ihrer Kopfzeile ausgerichtet, sondern auch innerhalb Ihrer Kopfzeile. Stellen Sie sicher, dass Sie das tun. Ansonsten gibt es immer diesen kleinen Platz auf der linken Seite, der alles ein bisschen schmaler macht. Wenn Sie also Ihre Designs pixelgenau machen möchten, sicher, dass Sie die Watte innerhalb der Hauptspalten löschen und sie auf 0 setzen. Wenn es auch vorschlägt, ist, wenn Sie einen neuen Abschnitt machen, ist, dass Sie immer anwenden 60 Pixel oben und unten und 0 auf links und rechts. Lassen Sie uns also einen neuen Abschnitt erstellen. Ich werde hier einen einfachen Abschnitt erstellen und ihm einfach immer ein wenig Polsterung oben und unten hier drüben geben , so dass Sie immer einige Leerzeichen haben, mit denen Sie arbeiten können. Und das ist schön, in zu arbeiten. Sonst ist alles eng. Aber auch in einem guten Design gibt es immer einige Leerzeichen in jedem Abschnitt. Dies ist auch das gleiche für Tablet und Handy, aber dann müssen Sie auch Wetten auf der linken und auf der rechten Seite anwenden, weil sonst gibt es keine Wetten auf der linken und der rechten Seite und alle Elemente werden an den Seiten ausgerichtet sein der Bildschirm, der nicht sehr professionell aussieht. Also, was Sie tun wollen, ist, dass Sie mindestens 15 Pixel anwenden wollen, würde ich sagen, links und rechts, und auch 60 oben und unten. Und wieder in der Spalte 0 Pixel Einbettung ist das gleiche auf Tablet. Auf Tablette fast immer wählen 20, aber ich würde sagen, 15 ist das Minimum. Lassen Sie uns jetzt realistisch machen, was das tun wird, wenn Sie einen Blick auf meine Website werfen und Sie tatsächlich den Navigator öffnen, damit wir sehen, was wir tun. Wir sind hier in diesem Hauptabschnitt, richtig? Wenn wir zum Fortgeschrittenen gehen, können Sie die Verteidigung über Ihre linke und rechte sehen. Wenn ich das lösche, sieht es so aus, als ob das nicht sehr professionell aussieht. Sie möchten also ein wenig Platz auf Mobilgeräten und Tablets und nicht auf dem Desktop geben. Denn auf dem Desktop gibt es bereits genug Leerzeichen, da die meisten Bildschirme breiter als 1140 Pixel sind. Deswegen mache ich das. Also jetzt, wie man mit der Bettwäsche Einsicht die Abschnitte umgeht und was mit allen Elementen zu tun ist. Also lassen Sie uns dieses Beispiel wählen. Es gibt ein echtes Projekt, das ich getan habe. Hier können Sie sehen, es gibt einen Untertitel, einen Haupttitel. Es gibt einige Elemente, die ein dreispaltiges Layout ist und es gibt eine Schaltfläche. Und das ist alles ein großer Hauptabschnitt. Also, was ich tun würde, vor allem, wenn ich oben und unten wette. Normalerweise würde ich sagen, mindestens 16, aber für dieses Design, Ich habe 90 ausgewählt. Aber weil ich ein wenig mehr Leerzeichen haben wollte, wollte ich, dass es sich luxuriös anfühlt. Also, wenn Sie das tun, dann müssen Sie nicht den Rand oben auf die Tour Stacks auf der Oberseite anwenden und auch Sie müssen nicht auf den Knopf verwirren. Und das ist schön, weil Sie immer die Buttons und den Text an vielen anderen Orten verwenden werden. Mein Rat ist also, immer zu versuchen, den unteren Rand zu Knöpfen und zwei Texten hinzuzufügen und dies nur für Elemente zu verwenden, die diesen Platz tatsächlich benötigen. In diesem Beispiel, was Sie tun möchten, stellen Sie sicher, dass ein Rand im Bildraster vorhanden ist. Sie legen also einen Rand in das Raster auf einem dreispaltigen Layout, da dieses dreispaltige Layout immer ein wenig Leerzeichen benötigt, aber das ist nicht immer der Fall für den Titel. Der Titel benötigt nicht immer 50 Pixel an der Unterseite. Setzen Sie also die 50 Pixel im März nicht unten auf den Text, sondern setzen Sie sie auf das dreispaltige Layout, da das immer Leerzeichen benötigt. Es sind die gleichen vier Tasten. Natürlich brauchen Sie ein wenig weißen Raum für einen Knopf, aber Elemente oder bereits angewendet hat, sind viele Betten an vielen Orten bereit. Also, wenn Sie einen Titel ziehen, es hat bereits Wetten. Du musst dir also keine Sorgen darüber machen. Lassen Sie mich Ihnen zeigen, was ich meine. Wie Sie hier sehen können, habe ich nichts auf den Titel oder die Schaltfläche angewendet, aber es gibt schon ein wenig Platz, so dass Sie sich nicht wirklich darum kümmern müssen. Versuchen Sie einfach, es auf Text und Schaltflächen zu vermeiden und setzen Sie die großen Ränder auf Dinge, die Sie nicht so oft verwenden, weil es Texte, die Sie so oft verwenden werden. Sie möchten das einfach kopieren und einfügen. Sie möchten sich nicht mit dem Rand und dem Auffüllen beschäftigen , die Sie auf einer anderen Seite angewendet haben. Wenn Sie diese Methode verwenden, werden Sie es viel einfacher für sich selbst machen. 8. Vielen Dank: Ich hoffe also, dass diese Klasse Ihnen jetzt etwas Vertrauen in Element gibt oder das Ihnen erlaubt, kreativere Designs mit Elementen zu schaffen. Oder jetzt habe ich viele Pläne, mehr Klassen zu erstellen, die Ihnen zeigen, wie Sie tatsächliche Designs mit Element oder erstellen. Aber für jetzt haben wir die Haupttheorie behandelt, die Ihnen eine Hauptgrundlage geben wird , um zu verstehen, wie das alles funktioniert. Also hoffe ich, dass du auch froh bist, dass du diesen Kurs gesehen hast. Ich habe wirklich hart an diesem Glas gearbeitet und es hat mir wirklich gefallen. Wenn du also mehr Klassen von mir sehen willst, dann kannst du auf mein Profil klicken. Ich habe viele andere Klassen, die Ihnen helfen, Ihr eigenes Web-Design-Geschäft zu wachsen oder zu gründen. Also danke, dass Sie zugesehen haben. Und wenn Sie Fragen haben, dann können Sie sie in den Diskussionen unten lassen. Danke.