Webflow für Fortgeschrittene und CMS | Greg Rog | Skillshare
Drawer
Suchen

Playback Speed


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

Webflow für Fortgeschrittene und CMS

teacher avatar Greg Rog, Always learning

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.

      Course Introduction

      2:45

    • 2.

      Skillshare assignment

      1:41

    • 3.

      Styleguide Setup

      9:45

    • 4.

      Typography

      9:56

    • 5.

      Working with Color

      10:32

    • 6.

      Components

      13:32

    • 7.

      Project Overview

      6:19

    • 8.

      First Collection

      8:57

    • 9.

      Collection Setup

      18:08

    • 10.

      Blog's Menu

      6:32

    • 11.

      Menu Collections

      8:43

    • 12.

      Featured Article

      13:17

    • 13.

      Recent Articles

      8:17

    • 14.

      Cards Styles

      10:02

    • 15.

      Main Page Sections

      9:13

    • 16.

      Main Page Sections part 2

      7:54

    • 17.

      All Posts Page

      7:49

    • 18.

      Categories Page

      3:49

    • 19.

      Blog Post Page

      11:09

    • 20.

      Post Page Aside

      6:52

    • 21.

      Search Setup

      10:44

    • 22.

      Advanced Search

      12:36

    • 23.

      Custom Domain

      8:51

    • 24.

      Empty States

      5:31

    • 25.

      Website Editor

      8:59

    • 26.

      SEO Tips part 1

      10:34

    • 27.

      SEO Tips part 2

      7:40

    • 28.

      Site Metadata

      7:22

    • 29.

      Using Integrations

      9:57

    • 30.

      See you soon

      0:45

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

765

Students

1

Projects

Über diesen Kurs

Webflow ist ein tolles Tool zum Entwerfen und Aufbauen von Websites auf dem Webshop. Dies macht dies, indem du Designer:innen sowohl statisch als auch dynamische und static, Websites aufbauen lässt, ohne Code zu schreiben. Webflow verändert die Art, wie wir Websites entwerfen und Websites erstellen, indem wir uns so erlauben, dass wir schnell arbeiten können, während wir noch den Branchenstandards befolgen. Wir glauben daran, dass es den Titel „die nächste WordPress“ verdient, denn wie viel besser es ist als andere Design-Tools, die es gibt. In diesem Kurs lernst du, wie du Webflow verwendest, um deine eigene Website mit CMS zu entwerfen und weitere to zu erlernen!

Hier lernst du im Kurs:

  • Fortgeschrittene Webflow
  • CMS, Sammlungen und Arbeit mit Editor
  • Vollständiges Bloggin in Webflow
  • Arbeiten mit Stilleitfaden
  • Suchmaschine, basierend auf Elastischer Suche
  • Hosting auf Webflow, Domains, SEO

CMS in Webflow

Mit dem CMS hast du die Möglichkeit, eine Datenbank und eine entsprechende Struktur in Webflow über den intuitiven Editor zu definieren. In diesem Kurs erfährst du, wie das CMS funktioniert, indem du Sammlungen erstund dynamische Daten auf Webflow how sowie in collections wie auch in collections anwende. Wir definieren jede Kollektion, damit wir leicht auf ihn zugreifen und Elemente später hinzufügen können, sowohl von Designer als auch Editor.

Dynamisches Blog und Suche

Im zweiten Teil unseres Webflow erstellen wir einen Blog mit dynamischen Inhalten und integrieren ihn dann in eine bestehende course, die wir im ersten Kurs vorbereitet haben. Du lernst alles, was du über die CMS-Funktionen wissen musst, und wie du die erweiterteren Funktionen nutzen kannst. Dieser Kurs bietet dir verschiedene Unterricht, die dir ermöglichen werden, die Funktionalität deiner Website verbessern und die Geschäftslogik einfügen und ohne die lessons verwenden zu müssen. Wir erstellen eine index-based Suchmaschine, mit dem das beste offene System zum Suchen und Rückkehren von Ergebnissen ist.

Editor und CMS

Advanced Editor Funktionen in Webflow ermöglicht dem Benutzer die Seite direkt in einem Browser zu bearbeiten. Dies ist ein fertiges CMS, das sehr intuitiv ist und sowohl einfache Änderungen in der Kopie von den Kopier- und Bildern auf deiner Seite, als auch die Verwaltung und das Staging von staging So richten wir uns an und richte neue Blog-Beiträge, Autorinnen und Kategorien ein!

Integrationen und SEO

Wir werden auch eine Reihe nützlicher Integrationen erstellen, die auf no-code basieren. Jetzt kannst du jetzt erweiterte Funktionen erstellen, die du vorher für Backend reserviert hast, und du kannst es ohne eine einzige Codezeile. Außerdem erkläre ich die besten Praktiken im Kontext deiner I'll

Meet Your Teacher

Teacher Profile Image

Greg Rog

Always learning

Teacher
Level: Intermediate

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. Einführung in den Kurs: Zum Webflow Fortgeschrittenenkurs. Dieser Kurs führt Sie in die Welt der dynamischen Seiten ein, die mit Hilfe von Webflow erstellt wurden, sowie seine fortschrittlicheren Funktionen. Sie haben wahrscheinlich bereits den grundlegenden Web-Vollkurs vorhersagen können. Das hier ist seine Fortsetzung. Wir werden die Möglichkeiten der zuvor erstellten Websites erweitern , um mit dynamischen Inhalten aus CMS-Modul zu arbeiten. Diesmal lernen Sie, wie Sie komplexe Websites wie Blöcke und Produktseiten und Websites erstellen , die von Ihrem Kunden direkt im Browser bearbeitet werden können. Im Kurs werden wir uns einige wichtige fortgeschrittene Aspekte der Arbeit in Webflow ansehen. Derzeit enthält unser Projekt nur eine Seite, aber wir erstellen einen Styleguide, um neue Seiten unserer Website schnell zu generieren. Später können Sie diese Idee durchlaufen, um noch fortschrittlichere Designsysteme zu erstellen. Zweitens konzentrieren wir uns auf das CMS. Workflow ermöglicht es Ihnen, komplexe Datenstrukturen zu erstellen, die als Datenbank ausgeführt werden. Zuerst werden wir die Strukturen für den Blog definieren. Workflow generiert automatisch eine Reihe von Seiten für uns, denen die Verwendung von dynamischen Daten auf ein paar Klicks hinausgeht. Anschließend bereiten wir die gesamten Websites auf eine solche Modelldatenstruktur vor, erstellen Sie ein komplettes Blogging-System. Schließlich werde ich Ihnen zeigen, wie Sie CMS verwenden, um den Inhalt der Website von der Browserebene zu verwalten , die Ihr Kunde verwenden kann , und fügen Sie dynamische Inhalte hinzu, die neue Einträge hinzufügen. Wir können alles ohne Codierung tun. Darüber hinaus habe ich eine Reihe von Lektionen gefunden denen Sie Geschäftslogik zu Ihrer Website hinzufügen können, aber ohne die Notwendigkeit, mehrere Sprachen zu verwenden, wird eine Suchmaschine basierend auf elastischer Suche, die beste offene System für die Indizierung und die Rückgabe von Ergebnissen. Und wir werden auch eine Reihe von nützlichen Integration erstellen basiert auf einem No-Code-Lösungen wie Zapier oder Integument. Heutzutage können Sie erweiterte Funktionen erstellen zuvor für Back-End- und Front-End-Entwickler reserviert wurden. Und Sie können es ohne eine einzige Codezeile tun. Wer wird also von diesem Kurs profitieren? Vor allem diejenigen von Ihnen, die bereits ein wenig Webflow kennen, wenn Sie Layer erstellen können, aber Sie CMS und dynamische Daten sowie ein bisschen systematischer Ansatz zum Erstellen von Websites in Webflow verwenden möchten , denke ich, das Kurs ist für Sie. Dieses Material erfordert ein Basisfundament von Webflow. Daher empfehle ich Ihnen, zuerst an meinem Webflow-Basiskurs teilzunehmen Dieser Kurs ist eine großartige Möglichkeit, Ihre Website, NDP Ihres Produkts zu erstellen oder Ihren Kunden dynamische Phagen und CMS in Kombination mit No-Code-Tools anzubieten , , dass alle Ihre Webflow-Projekte auf die nächste Ebene bringen. Lasst uns in die ersten Lektionen eintauchen. 2. Skillshare: Nochmals vielen Dank, dass Sie meinen Skillshare Kurs absolviert haben. Dies ist die zweite Klasse auf Skillshare, die ich auf Webflow habe. Der erste ist ziemlich einfach. Wenn Ihnen jedoch keine Grundkenntnisse fehlen, empfehle ich Ihnen dringend, sich den Webflow-Grundkurs anzusehen und dann mit diesem Material fortzufahren. Es ist sehr wichtig, dass du im Kurs mit mir zusammenarbeitest. Und ich habe zwei Vorschläge, um Ihr eigenes Kursprojekt zu erstellen. Der erste folgt gerade. Alles, was Sie tun müssen, ist nur die Videos anzusehen und dann die Aktionen zu wiederholen, die Sie im Video sehen. In Webflow denke ich, dass es Ihnen ein ziemlich solides Verständnis dafür geben wird wie Sie eine Website wie diese mit CMS und Style Guide und vielen, vielen weiteren erweiterten Funktionen erstellen können. Dies ist eine gute Möglichkeit, Ihre Fähigkeiten zu üben. Außerdem gebe ich Ihnen einige der Ressourcen, die Sie verwenden können, und ich verknüpfe sie einfach im Kommentar zu dieser Lektion. Dies ermöglicht es Ihnen, eine schöne Website zu erstellen, die dynamisch ist. Und ich schlage vor, Sie haben als Kursauftrag eingereicht. Allerdings, wenn Sie wollen, oder Fähigkeiten auf die nächste Ebene, Ich ermutige Sie, zu versuchen und erstellen Ihr eigenes Projekt mit den gleichen Fähigkeiten, die Sie hier lernen. Zum Beispiel, wenn Sie einen Styleguide erstellen und dann mit CMS arbeiten und auch einige Integrationen aufgeben, vielleicht mit Zapier oder Integra Ahmad eine Aufgabe wie diese haben, kann ein praktisches Projekt für einen Freund von Ihnen oder vielleicht für jemanden sein aus Ihrer Familie, würde wirklich nehmen die Fähigkeiten auf die nächste Ebene. Und ich ermutige und empfehle Ihnen nachdrücklich, dies zu tun. Und natürlich, bitte nur als Kursauftrag eingereicht. Ich würde mich wirklich freuen zu sehen, was Sie mit Webflow gemacht haben. Vielen Dank, und wir sehen uns in der nächsten Lektion. 3. Styleguide Setup: Hallo Jungs und willkommen zur nächsten Lektion, dass dies der Anfang unserer Styleguide Lektionen ist. Ich werde Ihnen zeigen, wie Sie einen Styleguide erstellen, damit wir Elemente und Komponenten auf verschiedenen Seiten unserer Website problemlos wiederverwenden können. Und das ist super nützlich, vor allem, wenn Sie eine mehrseitige Website erstellen oder Sie einen bestimmten Markenführer und Markenbuch haben, und Sie möchten konsistent mit den Komponenten, Farben, Typografie bleiben , so dass wir eine separate Seite mit dem Styleguide. Und von dieser Seite aus können wir Komponenten definieren, die wir später auf verschiedenen Seiten unserer Website verwenden können . Und dies kann auch ein Ausgangspunkt für gesamte Designsystem sein, das Sie für Ihre Projekte erstellen können. Dies kann ein Designsystem für eine Marke und die verschiedenen Projekte sein, die Sie für diese Marke erstellen werden. Zum Beispiel verschiedene Landing Pages. Aber auch Sie können sich ein Framework vorstellen, mit dem Sie in Webflow arbeiten können, mit dem Sie problemlos Projekte erstellen und einige gemeinsame Strukturen und Komponenten wiederverwenden können. Dies ist etwas, das ich aus dem Rahmen dieses Kurses lassen werde , weil dies ein bisschen fortgeschrittener Thema ist, Schaffung eines Designsystems. Aber nur damit du es weißt, ich habe einen eigenen Gestaltungsrahmen. Es nennt sich System Flow Dot Co. Und ich benutze es mit jeder neuen Website, die ich erstelle. Und später können Sie den Systemflusspunktcode auschecken, um die Beispiele und kostenlose Tutorials zu sehen, wie ich es mache. Moment haben wir den Styleguide, und das ist die einfache Seite, die ich im vorherigen Kurs erstellt habe. Jetzt enthält es nur eine Komponente. Dies ist SAP viele Block und wir haben es erstellt, so dass wir es im Sub-Geld wiederverwenden können. Aber das ist ein toller Start für unseren Styleguide. So Stil, der seine separate Seite haben sollte. Und auf dieser Seite werden wir Komponenten organisieren, aber nicht nur Komponenten, weil wir auch einige Design-Token erstellen möchten, die Sie später verwenden können. Und diese Design-Token könnten Typografie sein. Also alle Kopfzeilen und Navigation, sowie Farben und die anderen Elemente, die wir auf verschiedenen Seiten verwenden werden. Genau deshalb möchte ich diese Style-Guide-Seite ein wenig besser organisieren , damit ich eine Navigationskomponente habe. Lassen Sie mich die Navigationsleiste hinzufügen. Und diese Navigationskomponente enthält die Informationen in den Links, die durch diese Seite blättern. Und lassen Sie mich verschiedene Abschnitte wie Typografie und Farben und Komponenten zuordnen. Für den Moment werde ich hier ein Bild hinzufügen und das Logo ändern. Und dann lass mich zu diesem ganzen Container gehen. Ich werde einen weiteren div-Look dafür hinzufügen und die Markenelemente hineinlegen , so dass ich die Markenelemente und genug Geld innerhalb des Blocks haben kann . Und dies ist eine gängige Praxis, die ich mit navbar verwende, weil ich jetzt dieses Debug in Menü umbenennen und Displayflex verwenden kann um es sowohl vertikal als auch horizontal zu zentrieren. Jetzt lassen Sie uns die Elemente neu organisieren, so dass ich Logo auf der linken Seite habe. Und für komplexere Designsysteme und Styleguides möchten Sie möglicherweise nicht das horizontale Menü, sondern das vertikale Menü verwenden. Das ist die linke oder rechte Seite Ihrer Style-Guide-Seite. Aber für den Moment werde ich nur dieses horizontale Menü verwenden und auch die Elementpositionierung für dieBasisklasse ändern die Elementpositionierung für die , die behoben wird, so dass, wenn ich die Seite scrolle, das Menü an Ort und Stelle bleibt und es oben auf meiner Website fixiert ist. Und dann werde ich einen weiteren Abschnitt erstellen, nur einen Titelabschnitt für meinen Styleguide, so dass er ordentlich organisiert ist. Denken Sie daran, dass Sie von Zeit zu Zeit versetzt erneut besuchen werden, sowie wahrscheinlich Ihren Kunden oder vielleicht das Design-Team, das auch den von Ihnen erstellten Styleguide oder Designsystem verwendet. Also ist es auch immer wirklich schön. Organisieren Sie es in einer Art von Struktur und fügen Sie einige zusätzliche Beschriftungen und Abschnitte Container hinzu, so dass es gut organisiert ist. Sie können durch diese Kachelführung navigieren, vor allem, wenn es sich in etwas Größeres entwickelt, wie Design-System, wäre dies ein Lebensretter. Also, was ich jetzt mache, habe ich den Hauptabschnitt erstellt und dann im Inneren habe ich Container. In diesem werde ich einen weiteren technischen D-Block erstellen, und das wäre ein Style-Guide-Held. Und in diesem div schauen Sie eine andere Struktur mit einer Klasse Texten. Ich werde nur Text-Wrapper verwenden. Und hier werde ich eine Überschrift und auch einen Absatz verwenden, damit ich nur eine Beschreibung dessen haben kann , was sich in diesem Styleguide befindet. Lassen Sie mich hier einen gewissen Spielraum nutzen. Und dieser Stil Guide Held würde weißen Hintergrund sowie etwas Schatten haben. Ich werde es in einer Sekunde hinzufügen. Lassen Sie uns auch den Randradius und einige Polsterung innerhalb dieses Containers hinzufügen , um die Überschrift und die Beschreibung sauber zu positionieren. Das ist 44,5 Pixel-Rand. Nun wählen wir den Container aus und ändern seine Größe, so dass die Breite des Elements etwas größer ist. Lassen Sie mich 12 AT haben, für die maximale Breite dieses Containers. Und ich möchte positionieren, um Positionselemente innerhalb des Textwrapper zu zentrieren. Also lassen Sie uns den Text Wrapper auswählen und für den Abstand von Texten Berichterstatter, dieses kleine Symbol auf der rechten Seite, mit dem Sie die Elemente innerhalb eines div-Tags zentrieren können. Lassen Sie uns also darauf klicken, so dass wir automatische Ränder nach links und rechts haben. Und jetzt, wenn wir die Breite auf ändern, sagen wir, dass 50 Prozent sie zentriert haben. Lassen Sie uns das Textcenter ausrichten und ändern Sie den Namen in Styleguide sowie die Beschreibung, um das Ziel unseres Styleguides zu setzen. Aber das ist eine typische Struktur, die ich hier verwenden würde, und das ist ziemlich vielseitig. Sie können es kopieren und einfügen, wo immer Sie wollen, und Sie haben Elemente gut positioniert. Nun lassen Sie uns etwas Schatten hinzufügen. Das wird 20 Distanz und 30 Blair sein. Aber lasst uns die Farbe ändern, so dass sie vielleicht fünf oder 6% undurchsichtig ist. Und jetzt sieht es ziemlich gut aus. Das ist der Anfang unseres Styleguides und der Struktur, die wir mit Styleguide Held Abschnitt haben. Das wird ziemlich einzigartig sein, aber wir werden solche Strukturen haben, damit wir sie überall kopieren und einfügen können. Ich werde nur die Klasse für den Moment entfernen. Die Basisstruktur wäre Style Guide Abschnitt. Und denken Sie daran, nicht viele Stile auf diesen Tiger Abschnitt selbst anzuwenden, sondern auf seine Container und tiefe Blicke innen, so dass wir leicht kopieren können , um den Namen der Klassen, die wir für diesen Abschnitt Namen haben, ändern. Und jetzt lassen Sie uns den Text-Wrapper im Inneren erstellen. Ich werde hier rüber bewegen und es h, h2 machen. Das wird eine Beschreibung des ersten Abschnitts für unseren Styleguide sein. So werden wir zum Beispiel wahrscheinlich mit Typografie oder Farben beginnen. Und wir werden den Namen dieses Abschnitts hier haben. Also lassen Sie es uns in Typografie umbenennen und haben auch eine Beschreibung. Typografie kann also helfen, klare Hierarchien zu erstellen und Informationen zu organisieren und Benutzer zu leiten. Also haben wir ein bisschen zusätzliche Informationen an der Spitze. Und auch im Menü können wir beginnen, diese speziellen Abschnitte zuzuordnen, so dass wir sie mit einer Zugabe verknüpfen können. Wählen wir den Styleguide Abschnitt aus, drücken Sie D auf der Tastatur, um zu den Abschnitteinstellungen zu gehen. Und als ID werde ich Typografie verwenden. Und jetzt lassen Sie uns sicherstellen, dass ich aus dem Menü auch auf Typografie Abschnitt verlinkt. Gehen wir zu den Einstellungen und wählen Sie den Abschnitt, zu dem wir scrollen möchten, wenn der Benutzer auf diesen Menüpunkt klickt. Der zweite Abschnitt kann über Farbe sein. Und die dritte, ich werde es in Komponenten umbenennen. Außerdem können Sie viel mehr Abschnitte erstellen. Wie gesagt, wenn sich das entwickelt, könnten Sie bereit sein, es einfach auf die linke Seite zu bewegen, aber jetzt ist es in Ordnung, oben zu bleiben. Ich werde Abschnitte verwenden, und das ist so ziemlich es für das einfachste Ziel, das ich vier für diese Seite erstellen werde. Jetzt im Container werde ich auch ein weiteres Element erstellen, und das wäre Unterabschnitt, könnten Sie sagen. Also, das wird eine Überschrift H3 sein, lassen Sie mich ihm einen Namen Styleguide geben. Das wird zum Beispiel h freeze Tag sein. Und wir werden es in diesen Container bringen, damit er hier drin bleibt. Und lassen Sie uns auch das Styling ein wenig ändern. Wir müssen die Schriftarteigenschaften ändern. Ich werde DM Sans benutzen. Verwenden wir hier 400 Normal und ändern Sie die Größe auf 16 Pixel. Aber ich werde dafür eine ziemlich große Zeilenhöhe schaffen. Es wird eine Zeile sein, aber ich brauche diese größere Box, damit ich etwas Dekoration für jetzt anwenden kann Lasst uns zuerst kapitalisieren. Und auch möchte ich Buchstabenabstände von zwei Pixeln erstellen. Und jetzt benutze ich diese größere Box, um eine Grenze, Grenze unten anzubringen. Also setze ich es auf einen Pixelrand unten und festen Rahmen mit dieser mitternachtsblauen Farbe. Sie gilt nun für die Unterposition. Also habe ich eine Art wie Unterabschnitt hier. Und für Typografie, zum Beispiel, kann ich es für Überschriften verwenden. X-Unterabschnitt wäre für den Textkörper. Nächster für Untertitel. Ich denke, du verstehst den Punkt. So ist es jetzt einfach, diese Stilführungsabschnitte zu verwenden, um einfach auf C und Befehl V zu kommen, kopieren und einfügen und mehrere verschiedene Abschnitte dieses Ziels zu erstellen. Wir machen es in der nächsten Lektion. Wir sehen uns dort. 4. Typografie: Hallo Jungs, willkommen zur nächsten Lektion und lasst uns zuerst Überschriften erstellen. Und ich habe versucht, es aufregend klingen zu lassen, aber es ist eigentlich nicht. Lassen Sie uns die erste Überschrift erstellen, kopieren und fügen Sie sie ein paar Mal ein. Ich werde sechs verschiedene Überschriften erstellen. Sie können nur frei erstellen und, oder vier oder fünf, was auch immer Sie im Design haben. Ändern wir nun die Überschriftenarten auf bis zum Alter von fünf Jahren. Und auch werde ich noch einmal kopieren und einfügen und diese spezielle Überschrift erstellen. Ich werde H6 nicht verwenden, aber stattdessen lassen Sie mich ein spezielles H2 erstellen, das ich Abschnittsüberschrift nennen werde. Und das wird wie eine zusätzliche a h2-Überschrift mit einer zusätzlichen Klasse sein, die ich während meines Layouts verwenden werde. Nun lassen Sie uns diesen Zeitpunkt für die Überschriften ändern. Um dies zu tun, wählen wir den ersten aus und gehen wir zum Selektor und wählen HTML-Tag-Selektor. Das wäre alles H1 Überschrift. Wir wollen also, dass alle H1-Überschriften so gut wie gleich aussehen. Und was wir hier ändern möchten, sind Typographie-Einstellungen. So haben wir Sarah Display und 400 normale 5461, denn entsprechend Größe und Zeilenhöhe wollen wir auch den Rand unten auf 10 Pixel setzen und vielleicht auch den Rand oben ändern. Nun gehen wir zu den H2-Überschrifteneinstellungen und wir müssen das gleiche hier tun. Also berate ich mich im Grunde mit dem Layout. Ich habe die XD-Datei auf meinem zweiten Display geöffnet und ich überprüfe nur, ob diese Werte korrekt sind. Was ich hier ändern muss, ist in Topografieeinstellungen, dass ich die Schriftart auf die m Serifen-Anzeige geändert habe. Und lassen Sie uns auch für Hunderte Normalgewicht gelten und ändern Sie die Größe auf 38 und Zeilenhöhe, das wird 44. Auf diese Weise werden wir eine Musterplate-Vorlage für alle H2-Überschriften erstellen. Und ich werde es tun, weil ich diese Bande kostenlos ändern habe, weil fünf habe und die spezielle Überschrift habe, die ich erstellt habe. Nun ist ein anderer Ansatz für Überschriften möglicherweise nicht die H1, H2, H3 und diese HTML-Tags zu verwenden . Stattdessen können Sie nur einige Klassen anwenden, zum Beispiel Überschrift 1-Klasse, Überschrift auf Klasse, freie Klasse. Und dann ist es nicht notwendigerweise abhängig von dem Tag, das Sie auswählen, damit Sie verschiedene Stile anwenden können. Dies ist nur ein weiterer Ansatz, um einen Styleguide mit Überschriften zu erstellen. Sie können diese alle H4-Überschriften zum Beispiel verwenden. Oder Sie können einfach eine zusätzliche Klasse erstellen. Und dank diesemgibt Ihnen dies ein wenig mehr Flexibilität in Bezug auf SEO, gibt Ihnen dies ein wenig mehr Flexibilität in Bezug auf weil Sie dann nur die H4-Klasse anwenden, aber darunter können Sie es in H5 und H6, H1 ändern , wenn Sie wollten, dass dies für Suchmaschinen und für Google. Aber das ist nur eine Nebennotiz, da ich diese Werte ändere , weil dies im Grunde das gleiche ist. Ich überprüfe nur das Layout. Welche Werte habe ich für Abstände und Typografie? Ich ändere nichts anderes in Bezug auf CSS. Also ändere ich keine Positionen und Größen. Weißt du, ich manipuliere nur mit Abständen und Typografie, und ich habe versucht, konsequent zu bleiben. Damit haben sich CSS-Eigenschaften nur für den Text geändert. Nun wird dieser spezielle Abschnitt Überschrift die Antwort auf dieses Spiel für eine 100 normal und dann 46 und 56. Ich werde es bei einigen Gelegenheiten verwenden, es ist ein wenig anders als die H1 und H2, die ich habe. Und ich denke, jetzt habe ich alle Überschriften, die ich brauche, zumindest die, die ich in der Designdatei hatte. So kann ich eine weitere H freie Styleguide Überschrift auswählen, kopieren und einfügen und sie in Absätze ändern. Also werden wir einen Stil für Absatz verwenden, manchmal für verschiedene Projekte. Ich benutze verschiedene Stile. Und ich habe, in der Regel habe ich eine drei so groß, klein und mittel. Und ich kann dann die Versionen des Absatzes manipulieren. Aber in diesem Fall haben wir ziemlich einfaches Layout und ich werde nur einen Absatzstil verwenden. Lassen Sie mich den Rand anpassen. Ich werde es auf 18 Pixel Rand unten setzen und auch das Gewicht der Schriftart auf 500s Medium ändern. Und die restlichen Eigenschaften, die ich verlassen werde, wie sie sind weil sie richtig für das gesamte Dokument festgelegt sind. Im vorherigen Kurs habe ich gerade Body-Element ausgewählt und für beide das alte Seitentag habe ich einen Stift mit dem kaufmännischen Und-Zeichen und der richtigen Größe und Höhe erstellt, wie ich in meinem Absatz habe. Deshalb ist es jetzt in Ordnung. Ich habe ein wenig dieses H Free Style Guide Rand unten optimiert, so dass es besser aussieht. Jetzt kann ich es kopieren und einfügen, um Untertitel zu haben. Und ich werde verschiedene Versionen von Untertiteln haben. Ich habe sie bereits in meinem Dokument, damit ich durch Selektoren blättern und nach Untertiteln suchen kann. Also habe ich Untertitel für Autor und Header. Beginnen wir mit der einfachen Beschriftung, die ich habe. Und Sie können diese Typen von Grund auf neu erstellen. Oder wenn Sie bereits einige Untertitel erstellt haben, Bindungen im Layout, wie wir es im vorherigen Kurs getan haben. Ich werde nur diese Klassen verwenden und diese Beschriftung tatsächlich umbenennen, so dass sie die gleichen wie der Name der Klassen sind. So haben wir erfasst und Beschriftung Schnabel und auch Bildunterschrift Autor. Das ist ein bisschen anders. Lassen Sie uns die Beschriftung 40 Autor und 40 Header als auch auswählen. Also werden wir alle Untertitel hier drin haben. Entweder können Sie Elemente auf der Style-Guide-Seite sammeln oder Sie können sie von Grund auf neu erstellen und einige Stile anwenden. Nun lassen Sie uns einen anderen Styleguide Header haben und geben Sie ihm einen Namen von Reach Texten. Also das letzte Element, das wir in der Styleguide haben werden erreicht. Nächstes Element, das wir so ziemlich anders gestalten können als alle anderen Elemente. Seite erreicht x ist super wichtig für uns, weil dies die Struktur für den Inhalt des Artikels ist. So werden wir Textelemente erreicht haben, x Hunde in allen Blog-Artikeln erreicht. Was für das Rich-Text-Element ziemlich einzigartig ist, ist, dass Sie die Return drücken können und Sie dieses kleine Plus-Symbol haben. Und das gleiche gilt für den Editor für Leute, die gerade Artikel für Ihren Blog lesen. Und dann können Sie einige Elemente einbetten, ein wenigstens ambit, ein Video oder ein Bild erstellen . Lassen Sie uns auf das Bild und ein Bild im Rich-Text-Element klicken, wie Sie sehen können, hat es einige zusätzliche Optionen. So können wir die Position des Bildes ändern. Wir können einige weitere Einstellungen optimieren. Zum Beispiel. Verschieben Sie es nach links vom Text oder nach rechts. Oder wir können sogar noch weiter gehen, um einige grundlegende Größe und Link-Einstellungen zu erkunden. Wir können die Größe des Bildes überprüfen, benötigen wahrscheinlich eine gewisse Komprimierung, zum Beispiel mit Bild Opt-In zuerst, dann ist die Position hier. Und abgesehen von dieser Standardposition, die wir hatten, haben wir auch diese Größe. Zum Beispiel können wir Custom Size verwenden und auf 30 Prozent der Breite des Originalbildes einstellen . Und wir können auch die Werte von Prozent in Pixel ändern. Wir können auch den Link hinzufügen und alles ist vom Editor verfügbar. Also für Leute, die einfach Elemente zu Ihrer CMS-Sammlung hinzufügen. So ziemlich cool, aber auch alle Klassen hier, alle Rich-Text-Klassen stehen für Sie zur Verfügung, um zu optimieren und zu ändern. Und Sie können sogar diese verschachtelte Struktur von Klassen erstellen. So können Sie beispielsweise nur die Absätze formatieren, die sich innerhalb des Rich-Text-Elements befinden. Auf diese Weise kann der Inhalt Ihrer Artikel in Bezug auf das Styling völlig unterschiedlich sein, obwohl er dieselben Elemente wie Absätze wie die gesamte Seite enthält. So haben Sie hier eine andere Beschriftung, Sie haben verschiedene Kopfzeilen, verschiedene Absätze. Und für das gesamte Reach-Textelement können Sie ihm einen Klassennamen von geben, sagen wir Block-Artikel. Und das ist wie eine separate Struktur innerhalb unserer definierten Struktur von HTML. Dies ist also wie ein anderes Dokument, das in einem Dokument verschachtelt ist. Wenn Sie zum Beispiel H2-Überschriften hier haben und wir diese Kacheln bereits festgelegt haben, würden diese Bindungen für H2-Überschriften vererbt werden, okay? Aber hier ist die Option, diesen H2-Überschriften-Selektor innerhalb des Blockartikels zu verschachteln. Also, wenn Sie diese Funktion verwenden, haben Sie alle H2-Überschriften Stil anders, wenn sie sich innerhalb des Blockartikels befinden. So können wir unterschiedliche Schriftgröße haben. Wenn wir sie beispielsweise in 36 ändern, sehen Sie, dass sich die Überschriften im Hauptdokument nicht geändert haben. Obwohl wir diese alle H2-Überschriften bearbeiten. Aber jetzt ändern wir dies nur, wenn dies im Rich-Text-Element verschachtelt ist. Das Gleiche können wir auch für Absätze tun. Das ist wie Absätze. Und dann, wenn diese innerhalb des Block-Artikel erreicht Texte verschachtelt sind, können wir das Styling für Absätze genauso ändern wie für Zahlen, für Beschriftungen, für Bilder. Und lassen Sie uns alle Figurbeschriftungen auswählen, wenn sie in Blockartikel verschachtelt sind. Das hat die Farbe leicht verändert. Vielleicht lassen Sie uns auch die Schriftgröße und das Schriftgewicht ändern. Und das alles ist unabhängig von der Dokumentstruktur, die wir haben. Und diese Art von macht Sinn, weil Artikel selbst eine Art andere Einheit ist als unser Dokument. So möchten wir vielleicht zum Beispiel stylen , oder alle Bilder anders. Nehmen wir an, wir möchten nur einen Rahmenradius für die Bilder hinzufügen , die sich in unseren Blog-Artikeln befinden. Also innerhalb des Rich-Text-Elements und alle anderen Bilder, obwohl wir HTML-Tag verwenden, bleiben intakt und wir können sie anders für unsere Benutzeroberfläche, für die Website-UI. Das ist es also für die Typografie. Wir sehen uns in der nächsten Lektion. 5. Arbeiten mit Farbe: Hallo und herzlich willkommen zur nächsten Lektion. Und in diesem, lassen Sie uns über Farben sprechen. Also hier haben wir den NovalLink to color Abschnitt in unserem Styleguide. Dies könnte eine vereinfachte Version des Styleguides sein, ein Anfang eines Entwurfssystems. Und ich kann mir nicht vorstellen, dass es Farben fehlt. Also lassen Sie uns jetzt einen anderen Stil erstellen, den Titel und Styleguide, H frei, so dass wir die Typografie in Farbe ändern und Farben für Text für Typografie, sowie für Hintergrund, wie Sie wissen,und CSS erstellen sowie für Hintergrund, wie Sie wissen, können. Wir haben separate Eigenschaften für die obigen Hintergrundfarben und Textfarben. Und dies ist ein Ansatz, wie Sie diese Farben ändern und sie in Webflow definieren können, die Sie leicht verwenden und die Klassen wiederverwenden können, die später erstellt werden. Also hier haben wir Aktionen und für Hintergrund- und Textfarbe habe ich separate Abschnitte erstellt. Die Sache ist, eine separate Klassen sowohl für Hintergrundfarben als auch für Textfarben zu erstellen . Und in dieser Hintergrundfarbklasse definieren wir auch Textfarbe, die dem Hintergrund entspricht. Dies ist der Ansatz, den ich normalerweise für einfache Styleguides verwende und für kompliziertere, ich gehe normalerweise mit separaten Klassen für alle verschiedenen Farben, wo ich separate Hintergründe und separate Textfarben habe. So oder so, was ich jetzt tun werde, ist, einen Farbblock zu erstellen. Und das ist nur für Stylingzwecke, für den Styleguide selbst, so dass unsere Farbe hier schön aussieht und leicht in diesem Fliesenführer gefunden werden kann. Außerdem möchte ich den Abschnitt erstellen, der sowohl den Namen der Farbe, die Farbe selbst, die entsprechende Textfarbe enthält . So Kontrastfarbe für den Text sowie den Hexadezimalwert. Also jetzt erschaffe ich nur diesen Platzhalter für Farbe. Ich habe ihm den Namen des Farbblocks gegeben, das ist die Klasse. Und es hat einen gewissen Grenzradius und eine Grenze. Und ich werde zwei Lehrbücher auf der linken und rechten Seite hinzufügen. Ich habe es zu Flexbox gemacht, so dass ich diese leicht mit irgendeiner Art Polsterung auf der linken Seite verteilen kann, ich werde den Namen der Farbe hinzufügen. Und auf der rechten Seite wird es den Hex-Wert der Farbe geben. Wenn also jemand diesen Styleguide veröffentlicht und einfach im Web surft, kann er einfach kopiert werden, sowohl mit dem Hex als auch mit dem Namen. Das ist also der Farbblock. Wie ich bereits sagte, im Moment, was wir tun wollen, ist separate Klassen zu erstellen, die wir auf alles anwenden können, was sein sollte, sollte ich diese Farbe im Hintergrund haben. Also werden wir eine andere Klasse erstellen, und das wäre, zum Beispiel, Marke eine Farbe oder Marke eine Hintergrundfarbe, bg. Aber wenn wir so erstellt haben, wird es eine Combo-Klasse für den Farbblock sein. Es bedeutet, dass wir für jedes bestimmte Element, das wir diese Klasse anwenden möchten, zuerst die Farbblockklasse festlegen müssen, da es die Marke 1 BG innerhalb dieses Farbblocks als Kombinationsklasse verschachtelt wäre. Das ist also etwas, das wir nicht wirklich wollen. Ich werde diese Klasse löschen. Ich werde Marke 1 BG ohne diese erste Klasse schaffen. Und jetzt kann ich die Farben ändern. Also werde ich die Hintergrundfarbe ändern. Auf meine Mitternachtsblaue Farbe. Das ist Marke eine Farbe für mich. Und auch möchte ich die Textfarbe in eine entsprechende Farbe ändern, die für die Elemente angewendet wird , diese Hintergrundfarbe der Marke 1 haben, so dass ich kontrastierende Textfarbe habe. Das ist wirklich nicht unbedingt, Sie können einfach die Textfarbe überspringen und sie separat als separate definieren, aber ich vereinfachen hier nur. Und jetzt, was ich tue, ist, dass ich diese Klasse zuerst löschen werde, diese Farbblockklasse anwenden werde, die ich für Border-Radius und solche Sachen erstellt habe. Und dann kann ich dies als globale Combo-Klasse anwenden, so dass ich Marke 1 BG darüber hinaus verwenden kann. Dies ist keine Combo-Klasse für Farbbuch mehr, also kann ich es auf alles anwenden, was ich will, und ich kann es oben anwenden. So werde ich die Dinge im Styleguide in Bezug auf Farbe strukturieren. Und das gleiche werde ich auch für Text tun. Also werde ich Marke 1 Text als Name der Klasse für meine Marke eine Farbe verwenden. Jetzt kann ich die Farbe zu Mitternachtsblau ändern, um meine Marke eine Farbe. Und für die Namenskonvention ist diese wirklich ziemlich einfach. Wenn Sie etwas raffinierteres oder etwas systematischeres erstellen möchten, möchten Sie wahrscheinlich mit beginnen, zum Beispiel C oder Farbe als T oder Text und dann geben Sie ihm einen Namen, zum Beispiel, verwenden Sie Marke 14 Farben. Aber wir erstellen wirklich einfache Styleguide. Ich denke, das ist für den Moment okay. Und Sie werden nur Ihren eigenen Stil in Bezug auf die Benennung der Klassen und der Konvention, die Sie hier verwenden werden, entwickeln . Das ist also ziemlich einfach, denke ich, in Bezug auf Farbe, wenn Sie Styleguide erstellen, gehe ich normalerweise mit zwei separaten Sätzen von Farben, einer für Hintergrund und 14 Texte. Und ich erstelle separate Klassen, so dass ich diese Klassen überall für Hintergrund und Text verwenden kann . Nun, für diese Klasse, wenn Sie Marken für BG erstellen möchten, müssen Sie zuerst die Klasse löschen dann Marke zu BGN erstellen. Jetzt werde ich eine andere Farbe aus dem Layout verwenden, das ich habe. Fügen Sie es in den Hintergrund ein. Dies ist hellblaue Farbe. Eigentlich können Sie es nicht wirklich sehen, weil es die gleiche Farbe wie der Hintergrund dieser Zielseite hat. Aber das ist unsere Marken zu färben, Bronze zum Hintergrund. Und jetzt muss ich nur die entsprechende Textfarbe für dieses bestimmte Element erstellen . Ich werde nur Mitternachtsblau auswählen und ich werde dies in nur einer Sekunde für diese Uhr umbenennen. Aber jetzt habe ich diese Struktur für Marke BG. Ich habe sowohl die Textfarbe als auch die Hintergrundfarbe. Dies ist also ein Ansatz für einen anderen. Sie können die Hintergrundfarbe einfach separat auf die separate Klasse und Testnote zwei separate Klasse anwenden . Nun, was ich tun werde, ist diese Struktur zu verwenden, um mehr Kilohertz zu schaffen. Also zuerst werde ich diese Klasse löschen, Farbblock erstellen und Marke auf BG anwenden. Und dann werde ich das einfach über kopieren und mehr Farbvariationen, Farbkombinationen für meine Farben erstellen . Das wird Marke 3 4 Hintergründe oder Marke 3 BG sein. Und wieder müsste ich hier sowohl die Hintergrundfarbe als auch die Textfarbe verwenden. Und ich möchte auch die Farbfelder erwähnen. Also jetzt, lassen Sie mich den Hex-Wert für die dritte Farbe einfügen. Und das ist diese hellgrüne Farbe. Und es ist in diesen Pushes gerade noch nicht vorhanden. Also muss ich es hinzufügen, weil ich möchte, dass alle meine Farben in diesen Gewässern vorhanden sind, so dass ich entweder später eine Klasse verwenden und sie als Hintergrundklasse oder eine Textfarbklasse anwenden kann. Oder ich kann es einfach aus den Mustern auswählen. Also geben wir ihm einen richtigen Namen. Es wird Großname sein, Großbuchstabe Marke 3. Und übrigens, lassen Sie uns unsere anderen Farben umbenennen. Dieses Mitternachtsblau sollte unsere Marke sein, 1, und die hellblaue Farbe sollte Marke sein. Damit wir Farben auf die Farbfelder abgebildet haben , sowie wir sie in separaten Klassen haben. Dies ist die vielseitigste Lösung, da ich entweder Farbfelder verwenden kann oder ich Klassen verwenden kann. Und sobald ich die Farbe in diesem Farbfeld geändert habe, so dass ich diese Uhr hinzugefügt habe, wird sie automatisch auf der gesamten Website ändern , weil die gesamte Website diese Uhr verwendet, aber darüber hinaus ist diese Klasse auch mit dem Farbfeld, so dass sich die Farbe entsprechend ändert. Jetzt kann ich mehr Text-Klassen erstellen. So zum Beispiel Marken, um Steuer oder Marke freien Text. Und ich kann diese Farbe leicht von Mustern anwenden. Ich muss die Hex-Werte nicht kopieren und einfügen. Ich will auf diese Weise einen Fehler machen. Also immer einfacher, Ihre Farben zuerst zu Mustern hinzuzufügen und dann vielleicht darüber hinaus die entsprechenden Klassen zu erstellen. Außerdem habe ich den Hex-Wert, der auf die rechte Seite kopiert wird. Wenn ich also den Styleguide veröffentliche, können Sie den Hex-Wert einfach kopieren. Lassen Sie mich die Dinge beschleunigen, dank der Magie des Videos, ich muss nicht wirklich Ihre Zeit verschwenden, bis ich einfach kopieren und einfügen und die gleichen Operationen für die anderen Farben. Also hier haben wir sieben verschiedene Farben. Es ist wirklich eine Menge. Normalerweise verwende ich also Primär- und Sekundärfarbe, also zwei Farben, vielleicht eine weitere, aber ich habe eine Palette von Farben hinzugefügt, die Sie sehen können wie es mit entsprechenden Hex-Werten aussieht. Ich habe diese Farben auch zu meinen Farbfeldern in Webflow hinzugefügt. Und auch darüber hinaus habe ich eine Fehlerwarnung und akzeptiere Zustandsfarben. In der Benutzerbenachrichtigung kann ich diese Farbwarnung, BG, BG, verwenden. Und dann haben wir diese Text-Klassen. Wir haben Farbe akzeptieren SMS und Fehler. So kann ich konsistent bleiben und diese Farben zu verschiedenen Zuständen meiner Anwendung hinzufügen, verschiedene Benachrichtigungen für den Benutzer. Und das ist die Grundfarbpalette, die Sie in Ihrem Projekt verwenden werden. Und je nachdem, ob Sie eine zusätzliche Palette für dunkle Farben und weiße und schwarze Farben erstellen möchten. Sie können es hier tun. Oder Sie können einfach Ihre graue Farbskala in Mustern anstelle dieser Zeit verwenden, die Also in der Regel habe ich dem Styleguide hinzugefügt und ich am Ende mit fünf zwischen 510 Farben, von sehr hellen Farben bis sehr dunkle Farbe reichen. Es könnte schwarz oder weiß sein und ein paar Königinnen. Oder es könnte einfach sein, du weißt schon, helle Farbe und dunkle Farbe und wenige zwischendurch. Im Moment füge ich diese In-Betweens sowie meine weißen und schwarzen Farben nur zu den Farbfeldern hinzu. Und manchmal mache ich es so. Manchmal erstelle ich separate Klassen, wenn ich sie ausführlich auf meiner Website verwenden und sie auch zu Styleguide hinzufügen möchte. Also das ist es hier haben wir verschiedene Farben, die wir anwenden können. Lasst uns das zurücksetzen. Und ich denke, dass unsere Farbstruktur jetzt fertig ist. Wir haben alles in Mustern sowie zumindest die Hauptfarben gesetzt. Wir haben sie in separaten Klassen gesetzt. Wir haben diese dunkle, sehr dunkle schwarze Farbe und sehr weiße, hellweiße Farbe. Und benutze es für unsere UI, vielleicht einige Hintergründe der Elemente, weil dies nur das Musterfeld ist. Und im Grunde das ist, das ist, ich wollte Ihnen zeigen. Farben sind reduktionistisch, bereit in der Styleguide? Und lassen Sie uns mit der nächsten Lektion fortfahren. Danke. 6. Komponenten: Ordnung, es sieht so aus, als hätte ich in der vorherigen Lektion einen kleinen Fehler gemacht. Also habe ich diesen gestaffelten Abschnitt, in dem wir sowohl Farb- als auch Text-Typografie haben. Also muss ich dieses Element loswerden, den Container ändern, das gesamte Personal am Abschnitt erstellen und kopieren und unnötige Elemente wegwerfen , so dass ich zwei Elemente habe. Und hier ist der Farbbereich. Hier haben wir die Typografie Sektion. Und okay, das ist, was wir brauchen, denn für diesen Abschnitt müssen wir ihm einen Namen geben. Es wird keine Topographie sein, sondern Farbe hier. Und jetzt lassen Sie uns dies mit dem spezifischen Abschnitt verknüpfen. Wir müssen es mit Farbe verknüpfen. Und ich denke, dass wir fast bereit sind, einen neuen Abschnitt zu erstellen. Lassen Sie uns also eine Kopie davon erstellen. Löschen Sie alle Elemente aus diesem Container, die wir jetzt wirklich brauchen wollen. Und lassen Sie uns einen weiteren Abschnitt erstellen , der vier Komponenten sein wird. Also gehen wir zum Abschnitt Standard und für IB, gehen Sie es in Komponenten zu ändern. Und lassen Sie uns schnell verknüpft es in einem Link es im Menü. Dies wird zwei Komponenten verknüpfen. Hier haben wir es. Okay, dann ändern wir die Namen. Wir haben diese Überschrift 2, die Komponenten im Inneren platziert und wir werden einige Informationen darüber haben, was die Komponenten auf unseren Seiten tun. Dies sind also einige Grundelemente, Bausteine für unsere Website, zum Beispiel Schaltflächen. Lassen Sie uns also den ersten Abschnitt erstellen, vier Schaltflächen. Und wenn wir auf unsere Homepage gehen, lassen Sie uns erkunden, was wir hier haben. Wir haben ein paar Knöpfe drin, wir haben einige Strukturen. Und wenn wir das Element auswählen, können Sie tatsächlich sehen, dass dies eine Komponente im Webflow ist. Und es gibt jedoch einige Gründe für die Verwendung von Komponenten im Web. Und manchmal sind Sie vielleicht bereit, keine Komponenten zu verwenden, aber immer noch etwas in den Styleguide zu setzen, sondern einfach die Klasse zu verwenden. Für Komponenten haben Sie also alle diese Überschreibungsfelder , die Sie aktivieren können, damit Benutzer beispielsweise in der Editoransicht ändern können. Außerdem können Sie Überschreibungen für die Instanzen von Master-Komponenten vornehmen. Das ist also ziemlich leistungsfähiges Konzept und ich habe es im Grundkurs ausführlich erklärt. Auf der anderen Seite können Sie sich Komponenten als etwas vorstellen, das wiederverwendbar ist. Und das müssen nicht unbedingt Symbolslash-Komponenten in Webflow sein. Denn wenn Sie sich diese Featureblock-Klasse ansehen, ist es universell genug, um Informationen über den Hintergrund und all die Dinge zu tragen , die es Ihnen ermöglichen, diese Art von Box zu erstellen, diese Art von Karte. So können Sie dieses Element einfach nur basierend auf der Klasse wiederverwenden. Es liegt also wirklich an Ihnen, Komponenten zu erstellen oder einfach nur mit Klassen zu arbeiten. Letztendlich, wenn Sie einige Änderungen an Komponenten vornehmen möchten, außerhalb des Bereichs der von Ihnen erstellten Überschreibungen liegen. Sie trennen einfach die Verknüpfung der Komponente und dann übernehmen Sie Änderungen auf die Klassen. Und dennoch, wenn es sich um CSS-Änderungen handelt, wird es auf der gesamten Website angewendet werden. Also, was ich sage, ist, dass Sie nicht wirklich in Bezug auf Webflow denken müssen, dass alles hier eine Komponente ist, weil Sie leicht Klassen verwenden können. Und denken Sie daran, dass sich Klassen, die in der gesamten Struktur des Dokuments verwendet werden, entsprechend oder auf jeder Ihrer Seiten ändern. Denken Sie daran, dass Sie die Komponente immer über eine Klasse hinzufügen können. Dann haben Sie die Potenz der Komponenten, so dass Sie Überschreibungen erstellen können , und Sie können die anderen Komponenten in dieser Komponente verschachteln. Und Sie können auch diese Komponenten Menü verwenden, um die Komponenten einfügen. Wenn Sie also zu zwei Komponenten gehen, hat es ein separates Symbol im Menü jetzt in Webflow. Wenn Sie jedoch zu Komponenten gehen, können Sie einfach auf die Komponente klicken und es wird automatisch in Ihr Layout eingefügt. Wenn Sie jedoch Elemente kopieren und einfügen möchten, die nur auf Klassen basieren, müssen Sie dieses Element finden, z. B. diese Schaltfläche, und dann müssen Sie C mit dem Befehl kopieren, es dann auf der Seite stützen, die Sie verwenden möchten, für Beispiel hier. Es gibt also viele verschiedene Vorteile der Verwendung von Komponenten. Aber es gibt einen Nachteil, wenn Sie es abgesehen von den Überschreibungen bearbeiten möchten, müssen Sie es zuerst aufheben. Aber das ist, ich denke, der einzige Nachteil und Sie können leicht damit gehen. Also hier haben wir verschiedene Schaltflächen und jetzt werde ich einen anderen Abschnitt erstellen. Und dann dieser Abschnitt, Lassen Sie uns vielleicht diese Funktion verwenden und Blöcke und kopieren und fügen Sie alle Blöcke, die wir auf der Homepage haben. Ich denke, das können auch wiederverwendbare Elemente sein. Bevor ich diese Elemente kopiere und einfüge, Gehen wir zum Feature-Block und lassen Sie uns einen Diblock im Inneren erstellen so dass diese ordentlich organisiert werden können, wie Farben. Lassen Sie uns einen Klassenkomponenten-Wrapper geben. Und dieser Komponenten-Wrapper wird bald einige Polsterungen oder Markierungen erhalten. Aber jetzt können wir alle Feature-Blöcke kopieren und einfügen, die wir auf unserer Homepage oder nur ein Feature-Blog haben , weil es ziemlich ähnlich ist, aber ich werde nur kopieren und einfügen Sie alle von ihnen. Und damit wir diesen Komponenten-Wrapper haben, können wir jetzt einfach die Größe verteilen und die Ränder sind Polsterungen zwischen diesen Elementen, tut Feature-Blöcke, und wir können diese Komponente verwenden, beziehen sich auf alle unsere Komponenten als auch. Also hier können wir einige Marge auf diese Klasse anwenden, aber auch wir können die Struktur für unsere Schaltflächen erstellen, die ziemlich gleich ist. Lassen Sie uns also einen Blick hier werfen und die Klassenkomponente verwenden. Und dann lassen Sie uns einen Knopf hineinlegen. Oder ich kopiere und füge einfach ein. Wir können einfach den Designer verwenden, um den Boden zu greifen. Ich werde dieses löschen und es in seinen eigenen Komponenten-Wrapper legen. Diese Struktur ist jetzt besser lesbar und wenn wir den Styleguide veröffentlichen, wird es einfacher sein, durch diese Elemente zu navigieren. Und wir können es auch mit Text tun, wenn Sie wollen. Farben, ziemlich schön. So wie der Anfang unseres Styleguides, er wird letztlich in der Größe wachsen, aber für jetzt, kopieren und fügen Sie einen anderen Abschnitt. Lassen Sie uns diejenige erstellen, die FAQ-Elemente enthält. Und das ist eine andere Sache, die wir von unserer Homepage wiederverwenden können. Ich denke, dass FAQ-Elemente ein guter Kandidat sind, um zum Style Guide zu gehen , weil diese mit einigen coolen Animationen sind und sie einige Texte enthüllen. Vielleicht werden wir diese Struktur auf einigen anderen Seiten verwenden. Also lassen Sie uns dieses Element kopieren und in den Styleguide einfügen. Und in der Zwischenzeit ist es erwähnenswert, dass ich in diesem Komponentenabschnitt versucht habe, atomares Design zu verwenden. Ich habe versucht, Atome und Moleküle zu kopieren und zu kleben. Ich verwende hier nicht die gesamte Struktur wie Layouts, weil das für Komponenten zu viel ist. Also, wenn wir zurück auf die Homepage und wir haben Strukturen, die wie Fußzeile oder Menü sind. Wir wollen unbedingt kopieren und fügen Sie das gesamte Menü in Komponenten, wird einen separaten Abschnitt erstellen. Aber aus diesem Menü können wir natürlich einige Teile erstellen, einige Bits und Stücke, einige Atome und Moleküle, wie brach unten oder Navigation Links, so dass wir sie in unserem Komponentenbereich haben. Hier habe ich das Symbol, das Untermenü-Blog, das ich im vorherigen Kurs erstellt habe. Und ich denke, es ist ein großartiger Kandidat, es in diesen Komponentenabschnitt zu setzen. Dies ist ein Molekül, das als Sub-viele Elemente arbeitet. Also lassen Sie uns ein weiteres H3 für diesen vielen Block erstellen. Und lassen Sie uns die Sonne viele Block hier von Symbolen einfügen , die ich einfach doppelklicken und, und verwenden Sie es dort. Also, was ich damit meine, als ich versuchte, das gesamte Layout oder Abschnitte von Komponenten zu teilen , die ich verwenden kann, um diese Abschnitte zu erstellen. Sie können verschiedene Bits und Stücke als Komponenten verwenden, insbesondere geformte Elemente und all die anderen Dinge, die Sie als Atome oder Moleküle auf Ihrer Website verwenden. Aber ich werde sie jetzt nicht hinzufügen. Ich werde ein anderes Abschnittselement an diesen erstellen. Ich nannte sie Abschnitte, aber das sind Layouts eigentlich die Strukturen, die viele verschiedene Atome oder Moleküle miteinander verbunden enthalten und sie erstellen die gesamte Menünavigation, vielleicht Fußzeile oder ein Heldenelement auf unserer Seite. Und es wurde auch gearbeitet, um in unserem Styleguide einen separaten Platz für diese Schemata für diese Layouts zu erstellen . Wir haben diesen Layout-Abschnitt hier in Webflow. Dies sind vordefinierte Layouts. Und wie Sie sehen können, enthält dies einige Bilder und Karten und vielleicht Titel. So einige Atome und Moleküle zusammengebracht, um einen Abschnitt zu bilden. So können wir diese Abschnitte zur Hand haben. Wir können Komponenten aus den Abschnitten erstellen und diese dann für unsere Zwecke wiederverwenden. Vor allem, wenn Sie etwas erstellen, das ein bisschen aufwendiger Styleguide ist. Also eine Art Designsystem. Diese Abschnitte sind wirklich, wirklich wichtig, weil Sie wahrscheinlich dieses Designsystem für verschiedene Apps und Websites verwenden , die Sie erstellen werden. Und dann können Sie die Abschnitte von einem Projekt zum anderen wiederverwenden. Lassen Sie mich den Header-Abschnitt verwenden, den wir hier haben, und platzieren Sie ihn dort. Also, so Header-Abschnitt ist ein netter Kandidat, dorthin zu gehen. Lassen Sie uns auch einen anderen Abschnitt erstellen. Duplizieren Sie einfach die, die wir hatten und haben diesen Kopf- und Fußzeilenabschnitt hier. Also sollten die großen Blockelemente wie navbar und footer dorthin gehen. Und das ist besonders hilfreich, wenn Sie dies als eine Komponente betrachten und dann vielleicht eine andere Komponente in Kopf- und Fußzeile verschachteln. Und jetzt ist Webflow in der Lage, das zu tun. So können Sie Logo-Komponente in Kopf- und Fußzeile verschachteln. Und dann, wenn Sie das Logo für die gesamte Website ändern möchten, wenn Sie Änderungen Branding anwenden und Sie müssen es ersetzen. Und diese verschachtelten Komponenten können Ihnen wirklich helfen , dies im gesamten Bereich aller Elemente, die die Logoelemente enthalten, zu erreichen. Lassen Sie uns nun die Fußzeile kopieren und in unseren Styleguide einfügen. Und manchmal erhalten Sie die Informationen, dass Abschnittelemente nicht ineinander verschachtelt werden können. Lassen Sie uns auf Körperelement und jetzt Befehl V klicken, um die Fußzeile einfügen. Jetzt haben wir sowohl Kopf- als auch Fußzeile, sowohl Navigationselement als auch Fußzeile in unseren Abschnitten. Und das ist wirklich nützlich, um sie im Styleguide zu haben, sowie einige andere Layouts, die Sie verwenden könnten. So ist der Beginn unserer Styleguide bereit und stylet, Es ist etwas, das mit Ihrem Projekt entwickeln sollte, mit Ihren Websites. Es könnte schließlich Designsystem werden. Aber es sei denn, Sie haben bereits ein Designsystem, das Sie es auf Webflow übertragen möchten. Sie sollten nicht wirklich viel Zeit damit verbringen, an verschiedene Typografieoptionen und Farben zu denken , die Sie später hinzufügen könnten, es ist am besten, einige Layouts bereits zu haben und dann Elemente zu Styleguide auf dem Sprung hinzuzufügen. Wie Sie sehen können, kann jemand eine Vorschau aller Interaktionen und Animationen in der Styleguide Seite, er kann kopieren und einfügen Hex-Werte von Farben, in der Vorschau, dass Topographie. Dies ist also ein großartiger Ort, um das Styling Ihrer Website zu überprüfen, aber auch dies ist die einzige Quelle der Wahrheit für alle Elemente auf der Seite. Wenn Sie also die Typografie ändern möchten, genügt es, zum Styleguide zu gehen, Überschriften zu ändern, und sie werden sich auf der gesamten Seite ändern. Dasselbe gilt für Komponenten. Sie können Komponenten von dort bearbeiten, und sie werden entsprechend auf der gesamten Seite aktualisiert. Leider gilt dies nur für ein Projekt. Wenn Sie also mehrere Seiten oder Landingpages basierend auf dem Styleguide erstellen möchten, müssen Sie dieses Projekt einfach immer und immer wieder duplizieren, dann löschen Sie die Seiten, die Sie nicht verwenden, einen Steve den Styleguide, oder einfach Erstellen Sie ein Projekt mit Styleguide als Basis und duplizieren Sie es. Und dann können Sie von dort anfangen und einige andere Seiten erstellen. Dies ist nicht wirklich praktisch, wenn Sie die Typografie über alle Projekte oder vielleicht Logo ändern möchten , weil Sie zu jedem einzelnen gehen müssten. Aber hoffentlich wird Webflow irgendwann mit einer Lösung kommen , die es uns ermöglicht, dieses Designsystem mit dem gesamten Projekt zu verbinden. Also behalte das im Auge. Und in Bezug auf den Style Guide Abschnitt, denke ich, dass es so ziemlich ist. Auch eine Option, die erwähnenswert ist, als die Fähigkeit, dieses Projekt zu teilen. Sie können Mitarbeiter einladen. Also, wenn Sie mit Ihren Teamkollegen an einem Styleguide oder einem Designsystem arbeiten, Es ist wirklich nützlich, denn wenn Sie einen Teamplan für Webflow haben, können Sie sie einladen und Sie können ganz arbeiten. Und Sie haben auch die Möglichkeit, das Projekt mit schreibgeschütztem Link zu teilen , so dass jemand eine Vorschau aller Ebenen und Dinge, die Sie im Dokument haben, anzeigen kann . Es genügt, diesen Link, der erstellt wurde, einfach zu kopieren und an jeden zu senden. Sie möchten in der Lage sein, es im Designer zu überprüfen, aber nicht bearbeiten zu können. Dies ist so ziemlich es für die Erstellung der Styleguide Struktur. Und das ist nur ein Ansatz. Es ist ziemlich einfach, wenn Sie einige anspruchsvollere und erweiterte Beteiligung an den Styleguide und Design-Systemen sehen möchten. Bitte checkout system flow.com. Dort finden Sie Tutorials sowie fertige Framework für Webflow, die Sie verwenden können , um ein Designsystem zu erstellen und zu arbeiten, das wirklich, wirklich umfangreich ist. Für jetzt erinnern Sie sich an diese Sharing-Optionen und wir sind für die nächsten Lektionen eingestellt, weil wir gerade unseren ersten Styleguide erstellt haben. Vielen Dank für die Aufmerksamkeit und wir sehen uns in der nächsten Lektion. 7. Projektübersicht: Hallo Jungs und willkommen zur ersten Lektion dieses Kurses. Ich bin super aufgeregt, dich hier zu haben. Und das ist der Fortgeschrittenenkurs über Webflow, was bedeutet, dass wir uns nicht so viel mit Layout und Styling beschäftigen werden. Ich werde Ihnen einige erweiterte Funktionen von Webflow zeigen sowie die Struktur für unsere Website erstellen, zum Beispiel mit CMS, sowie einen einfachen Styleguide erstellen. Und was Sie gerade betrachten, ist eine Website, die wir im Grundkurs erstellt haben. Wenn Sie also eine Landing Page, eine Website wie diese erstellen möchten, gehen Sie weiter und überprüfen Sie den Basics Kurs und dann erfahren Sie alles über die HTML-Struktur und das Layout. Was wir in diesem Kurs tun werden, könnte es eine Art Fortsetzung sein und wir werden CMS verwenden, um eine Blogging-Struktur für diese Website zu erstellen, um diese Website zu erweitern und einen Block darüber hinaus zu erstellen. Für jetzt haben wir hier eine einfache Struktur. Dies ist eine einseitige Website mit nur einfachen Kopfzeilen und einigen Abschnitten, die wir erstellt haben. Und das erste, was ich Ihnen in der folgenden Lektion zeigen werde ist, wie man einen Styleguide erstellt, der uns im Grunde ein bisschen einfacher in Webflow arbeiten und alle anderen Seiten in kürzester Zeit erstellen lässt. Ich meine, die Elemente, die wir bereits erstellt haben, wiederverwenden. Lassen Sie mich also auch schnell zu der Struktur wechseln, die ich für die folgenden Seiten vorbereitet habe , die wir als einfaches Modell eines Blogs erstellen werden, den wir erstellen werden. Ich habe mich nicht auf den Fotos gefühlt, weil wir ein CMS benutzen um alle Bank-Elemente hier zu spüren und die Fotos zu laden. Dies ist ein Layout, das ich in Adobe XD erstellt habe. Sie finden diese Datei in den Quelldateien für diesen Kurs. Was wir hier haben, ist die einfache Homepage für den Blog. Sie werden sehen, dass wir Logo und einfaches Menü an der Spitze mit einigen Kategorien, die wir erstellen werden. Und dann haben wir diesen Heldenbereich mit vorgestellten Artikel. Und alle Daten, die angezeigt werden, stammen aus dem CMS. Also haben wir dieses Feature-Tag und auch wir haben den Header, den Namen des Artikels, den Auszug, sowie auf diesen Artikel und auf der rechten Seite verlinkt. Wir haben auch ein Foto, das wir dynamisch aus dem CMS laden werden. Im Folgenden werden einige Abschnitte erstellt, die auch unsere Daten aus CMS enthalten werden. Und das würde aktuelle Artikel anzeigen. Und dann haben wir auch Software. Also im Grunde alle stammen aus unseren Kategorien und wir werden nur die neuesten Artikel innerhalb der Kategorie anzeigen. Auch haben wir ein getaggtes, wie für einige der Elemente vorgestellten. Und Sie können sehen, dass dies eine sehr einfache Struktur ist , wo wir im Grunde einige Daten von CMS haben. So ist ein Bild 40 für den Artikel sowie der Titel hier der Auszug. Und auch wir haben die Informationen über den Autor sowie die Kategorie, zu der dieser Beitrag gehört. Diese Kategorie wird auch in Form der Rechnung angezeigt, die kleine Blase oben auf der Miniaturansicht. Und das ist es im Grunde für die Homepage. Es ist super einfach, aber es wird uns alle verschiedenen Konzepte aus dem CMS verwenden lassen. Dann haben wir eine andere Seite, das ist die Kategorieseite. Und es ist super cool ist, dass Webflow tatsächlich generiert diese Kategorieseiten für uns automatisch und füllt sie mit den Daten aus dieser Kategorie. Also alle Beiträge, die in der Kategorie sind, werden wir auch diese kleine Featured Flag auf den Beitrag hinzufügen, so dass wir sie neu bestellen können. Und schließlich bietet die Seite Punkt einzelne Post in unserem Blog mit dem Datum, dem Autor, sowie Kategorie und dem Titel. Hier haben wir den beobachteten und den Inhalt des Beitrags auf der rechten Seite, wir haben auch einige einfache Newsletter-Anmeldeformular sowie Social Media Share. Das ist also alles ziemlich einfach, aber ich denke, es ist eine ziemlich saubere Struktur, die uns CMS in Webflow sowie einige andere Dinge erkunden lässt. Also im Grunde hier werden wir in der Lage sein, leicht verschiedene Beiträge anzuzeigen, die in der gleichen Kategorie sind wie die, die wir gelesen haben, so dass, wenn jemand fertig zu lesen, er zu einem anderen Material und einem anderen Artikel gehen kann, der sein könnte Interessant. Aber ja, das sind freie Seiten, die erkunden, erstellen von Grund auf neu und Sie CMS, um es mit den Daten zu tanken, sowie erstellen Sie die Editor-Seite für diejenigen, die den Inhalt zu unserem Blog hinzufügen , so dass diese Person leicht neue Beiträge hinzufügen direkt aus dem Browser. Und ich werde Ihnen auch den Redakteur zeigen. Was wir in Webflow tun werden, ist, dass wir mit diesem bestehenden Projekt beginnen, das wir haben, aber es ist super einfach. Auch hier empfehle ich Ihnen, den Grundkurs zu überprüfen , wenn Sie sehen möchten, wie ich dieses Projekt gemacht habe. Aber was in diesem Projekt wichtig ist, ist, dass es eine Style-Guide-Seite gibt , die wir zu erstellen begonnen haben. Also hier haben wir eine einfache SAP viele Blog, die wir erstellt haben. Und ich habe es getan, nur um Ihnen zu zeigen, wie man Komponenten erstellt. Aber jetzt werden wir an dieser Style-Guide-Seite arbeiten, weil es, unsere Website wird mehr und mehr Seiten haben. Es ist so viel einfacher, eine Art strukturiertes mit Komponenten zu organisieren, so dass Sie die bereits erstellten Elemente wiederverwenden können und sie auf der gesamten Seite konsistent bleiben, sowie es ist super einfach, sie einfach zu verwenden Drag & Drop auf den anderen Seiten, in diesem Fall die Blog-Seiten, die wir erstellen werden. Das ist also die Struktur, von der wir anfangen werden. Außerdem finden Sie den Link zu dieser Struktur zu Ihrer, in Ihren Quelldateien für diesen Kurs. So können Sie damit beginnen, dieses Projekt zu duplizieren. Und wir werden den Styleguide in Angriff nehmen und eine Art Styleguide erstellen. Oder vielleicht der Beginn eines Entwurfssystems in der nächsten Lektion. Und dann werden wir eine Struktur für die Datenbank erstellen, die CMS-Struktur, die unseren Kerl mit den Daten anheizt, sowie später werden wir einige Integrationen untersuchen, vielleicht einige keine Code-Tools und Zapier, ich werde zeigen Ihnen, wie Sie diese Website erweitern und einige zusätzliche Funktionalität auf der Oberseite des Web für diese erweiterten Funktionen hinzufügen. Ich hoffe, dass Sie sich darüber freuen, was in der nächsten Lektion passieren wird. Also kommen wir direkt zu ihm. Ich sehe dich in der nächsten. 8. Erste Kollektion: Willkommen zu dieser nächsten Lektion. Und in diesem werden wir eine Sammlung Setup für unser CMS in Webflow erstellen. Dies ist super wichtig und das wird die Datenstruktur für unseren Blog und die Beziehungen zwischen den Elementen im Block definieren . Betrachten Sie es also als eine Datenbank, denn dies ist in der Tat eine Datenbank, die auf diesen Servern ausgeführt wird. Und diese Datenbank wird verschiedene Arten von Daten enthalten und wir können die Verbindungen zwischen den Elementen erstellen, die erstellt werden. So zum Beispiel, gehen, um Kategorien zu erstellen und dann Blog-Posts und Autoren und wir erhalten den Link sie zusammen. Wenn Sie mit einer Art von Datenbank arbeiten, ob das MySQL oder SQL-Datenbank war, oder sogar mit einfachen Tabellenkalkulationen in Excel oder Google Sheets oder vielleicht Air-Tabelle. Dies wird eine ähnliche Struktur sein. Also, was wir tun werden, ist die erste Karriere, unsere erste CMS-Kollektion zu erstellen. Und hier haben Sie einige Sammlungsvorlagen. So können Sie beispielsweise aus Kategorien und Projekten und Kunden auswählen. Aber stattdessen, lassen Sie mich einfach die Sammlung von Grund auf neu erstellen. Was wir also hier definieren müssen, ist der Sammlungsname. Das ist ziemlich wichtig, weil es uns mitteilt, welche Art von Daten in der Sammlung enthalten sind. Aber auch wird es automatisch die URLs für unsere Webseite mit dem Namen dieser bestimmten Sammlung erstellen . Ich werde Ihnen zeigen, wie es funktioniert, wenn Sie mit Kategorienamen beginnen. Also, was wir hier tun werden, ist Kategorien zu erstellen. Und ich benutze Plural absichtlich, weil das alle unsere Kategorien wären. Und die Singular-Version wird von Webflow automatisch erstellt, Sie können diese bearbeiten, wenn etwas schief geht und es nicht grammatisch korrekt ist. Aber der Plural ist Kategorien, und das Singular ist Kategorie. Und wir werden auf diese Weise über diese Sammlung sprechen. Also werden wir alle Kategorien in der Sammlung haben und der einzelne Eintrag wäre Kategorie. Jetzt wird die Sammlungs-URL automatisch generiert und dies ist der Name des Ordners, in dem Ihre Kategorieseiten auf dem Server gespeichert werden. Wenn Sie also einen Blick auf die URL-Struktur werfen, hier haben Sie den Namen der Kategorien und dann wird eine Kategorieseite, die automatisch von Webflow erstellt wird. Sie können diesen Namen ändern. Sie können die Sammlungs-URL unabhängig vom Namen Ihrer Sammlung ändern. Zum Beispiel, wenn Sie es als mein website.com Schrägstrich Blog haben möchten. Aber wir bleiben nur bei Kategorien. Ich denke, es ist in Ordnung. So haben wir alle Sammlungsseiten automatisch unter Kategorien generiert und dann Kategorieseitenkategorien für Blöcke sind ziemlich üblich. Wir wollen als verschiedene Abschnitte für unseren Blog erstellen. Verschiedene Themen, die zum Beispiel Technologie- oder Marketing- oder Blockchain-Artikel enthalten würden . Und dann werden wir eine weitere CMS-Sammlung mit aktuellen Blog-Posts erstellen. Und wir verknüpfen diese Kategorien mit Blog-Posts. Aber ich werde dir später zeigen, wie es geht. Wenn Sie jedoch eine neue CMS-Auflistung definiert haben, müssen Sie auch die Sammlungsfelder definieren. Diese beiden Felder, grundlegende Informationen werden standardmäßig von Webflow hinzugefügt. Also das ist Name und Schlacke. Diese sind erforderlich. Sie können ein kleines Sternchen neben dem Namen sitzen. Und wie Sie sehen können, dass Slack hier erforderlich ist , um eine eindeutige URL zu erstellen, die zu Ihrer Kategorie führt. Zum Beispiel, Kategorie Schrägstrich Marketing zeigt alle Beiträge aus dem Marketing. Also lassen Sie uns diese grundlegenden Informationen zuerst bearbeiten, ich werde auf dieses kleine Symbol auf der rechten Seite klicken und wir können hier den Labelnamen und auch einige Hilfetexte erstellen. Und das hier. Erscheinen Sie für unsere Mitarbeiter und die CMS-Kollektionen. Aber auch können wir erstellen und benutzerdefinierte Felder zu dieser Kategorie hinzufügen. Stellen Sie sich also vor, eine Tabellenkalkulation zu haben und in der Zeile haben wir diese Sammlung mit dem Namen, aber dann können wir verschiedene Spalten mit verschiedenen Feldern haben, zum Beispiel Text und Bilder und Videos. Was wir haben, ist die Möglichkeit, einige benutzerdefinierte Felder zur Kategorie hinzuzufügen. Zum Beispiel möchten wir diese Kategorie haben, um ein Bild oder eine bestimmte Farbe oder vielleicht einen Link zu haben . Wir können es tun. Wir können den Typ des benutzerdefinierten Feldes definieren, das erstellt wird. Und in diesem speziellen Fall möchte ich ein weiteres einfaches Textfeld erstellen weil ich eine Beschreibung zu unserer Kategorie hinzufügen möchte. Dies ist also kein Pflichtfeld. Ich werde dieses Kontrollkästchen leer lassen und ich werde ihm ein Etikett geben, einen Namen für diese Kategorie, die Beschreibung sein würde. Und Sie können einzelne Zeile oder mehrzeilig auswählen, wenn das ein langer Text sein soll, können Sie ihn als mehrzeilig festlegen. Und dann im Editor wäre das Textfeld ein bisschen größer. Und Sie können auch diese maximale und minimale Zeichenanzahl haben, und das war's. Also habe ich ein anderes benutzerdefiniertes Feld erstellt. Sie können bis zu 30 Felder für jede Sammlung erstellen. Und dann haben Sie diese zusätzlichen Grundfelder mit Namen und Pufferzeit. Außerdem haben Sie drei Felder, die automatisch von Webflow generiert werden. Es wird Datum, Datum, Bearbeitung und Veröffentlichung begrüßt , und diese werden automatisch hinzugefügt. Sie können die Sammlung löschen. Um die Sammlung zu löschen, müssen Sie zunächst sicherstellen, dass keine Instanzen dieser Sammlung auf dem Designer vorhanden sind, aber wir werden das später untersuchen. Zur Zeit haben wir unsere einfache CMS-Kollektion mit drei Feldern. Ich werde es erschaffen. Und Webflow ermöglicht es Ihnen, einige Dummy-Daten zu generieren, aber wir wollen es vorerst nicht tun. Also erstellen wir einfach selbst eine neue Kategorieleiste. Und geben wir ihm einen Namen. Die erste Kategorie für unser Buch wäre Blockchain. Lass es uns da reinkleben. Und diese Verzögerung wird automatisch generiert , wenn Großbuchstaben in Kleinbuchstaben geändert werden. Und auch, wenn Sie einige Sonderzeichen hinzufügen, zum Beispiel Leertaste. Wenn Sie dort in den Namen drücken, werden Sie sehen, dass Webflow es in einen Bindestrich ändert. Und das liegt daran, dass es die URL für diese bestimmte Kategorie und die Kategorieseite basierend auf der Schlacke erstellt diese bestimmte Kategorie und , die Sie unabhängig voneinander ändern können. Jetzt zahlen wir etwas im Beschreibungsfeld und lassen Sie es uns erstellen. Aber bevor Sie dies tun, können Sie auf diesen kleinen Pfeil klicken und diesen als Entwurf speichern , damit Sie verschiedene Kategorien erstellen können Wenn Sie ihn aber noch nicht auf Ihrer Website veröffentlichen möchten, können Sie Entwürfe erstellen. Aber selbst wenn Sie jetzt erstellt haben, es nicht automatisch veröffentlicht. So sind die Änderungen auf Ihrer Herausgeber-Website sichtbar. Stattdessen hat es diesen speziellen Nebel, es ist ein besonderer Status. Und jetzt ist es eine Orange. Es steht, dass es für veröffentlicht inszeniert wird. Was bedeutet das? Nun, wenn Sie Ihre Website entweder in der Webflow-Sub-Domain oder in Ihrer eigenen Domain veröffentlichen, werden diese Änderungen und CMS-Sammlungen alle zusammen veröffentlicht. Sie können sie also als Entwürfe belassen, wenn Sie sie nicht veröffentlichen möchten, oder Sie können sie für die Veröffentlichung bereitstellen. Außerdem haben Sie wichtige Schaltflächen exportiert. Das sind wirklich praktisch, wenn Sie viele Einträge erstellen möchten. Beispielsweise können Sie jetzt die CSV-Datei exportieren, so dass Sie die Struktur sehen können. Dann können Sie einige andere Einträge anlegen und anschließend die Datei speichern und importieren. Sie müssen also nicht damit zu tun, ob diese UI. Sie können auch Dateien migrieren, Daten von anderen Systemen, wie Shopify oder einige andere Blogbeiträge von WordPress migrieren oder was Sie haben. Wenn Sie also zu gehen, wenn Sie die erste Spalte in Excel auswählen, gehen Sie zu Daten und dann gehen Sie, um Text in Spalten zu konvertieren. Sie können es als Trennzeichen festlegen. Das Trennzeichen ist ein Komma. Also lassen Sie es jetzt beenden und Sie können sehen, dass wir alle Daten in verschiedenen Spalten haben. So ist es einfach, hier weitere Kategorien hinzuzufügen und sie dann als CSV-Datei zu speichern. Und dann wieder zum Web-Flow gehen und wir können das ganz importieren. Aber für unseren spezifischen Zweck brauchen wir es nicht wirklich zu tun, weil wir nur ein paar Kollektionen zu erstellen haben. Also lassen Sie uns eine andere Kategorien erstellen sind ein paar Kategorien von Sammlungen. Diese werden alle in die gleiche CMS-Kollektion gehen. Und hier ist der zweite, mobil. Lass uns weitermachen und es schaffen. Übrigens, wenn Sie einen Fehler gemacht haben, gehen Sie einfach zur Auswahl. Sie können auswählen, was Sie erstellt haben. Und jetzt können Sie es löschen oder Sie können seinen Status in Entwurf ändern , so dass es nicht zur Veröffentlichung bereitgestellt wird. Es wird nicht veröffentlicht werden, es sei denn, Sie haben gerade angegeben und Herausgeber-Website. Jetzt dieses Glaubensbekenntnis, eine weitere Kategorie, und das ist Marketing. Ich werde nur die gleiche Beschreibung für jetzt kopieren und einfügen. Also haben wir hier etwas. Und die letzte, die letzte Kategorie wird für unseren Block erstellen, wird Software mit Artikeln über Softwareentwicklung wahrscheinlich sein. Lassen Sie uns es erstellen, und so sieht es aus. Nun, was wir in der nächsten Lektion erstellen möchten ist die andere Struktur abgesehen von der Kategorie. Also lasst uns sie jetzt ganz schließen. Und ich sehe dich in der nächsten Lektion. 9. Einrichtung der Kollektion: Hallo Jungs und willkommen zu dieser nächsten Lektion. In diesem hier möchte ich Ihnen zeigen, wie Sie alle Kollektionen für unser CMS und Webflow erstellen . Wir werden also Artikelsammlung und die Autoren und all die verschiedenen erstellen , die uns helfen, dynamische Daten auf unserer Webseite zu strukturieren. Wenn Sie jedoch nur den Videos folgen, denke ich, dass Sie es vielleicht ein bisschen schwierig finden zu verstehen, warum genau ich solche Namenskonventionen und Eigenschaften ausgedacht habe und warum erstelle ich diese Strukturen? Ich denke, wenn Sie nur folgen, könnte etwas schwierig sein, aber wenn Sie versuchen, mit sich selbst zu tun und im Grunde wickeln Sie Ihren Kopf um die Idee, einen Blog und seine Struktur zu erstellen. Ich denke, das wird ziemlich offensichtlich sein. Nun, zunächst einmal versucht, den Ausgangspunkt auf das kleinste Stück dynamischer Daten zu setzen. Aber Sie wollen, zum Beispiel, auf diesem Blog-Post haben wir alle verschiedenen Daten hier und alles muss dynamisch sein. So ist der Titel sowie der Inhalt des Blogbeitrags so dynamisch. Dann haben wir dieses Bild sowie einige statische Inhalte auf der rechten Seite. Also von hier aus werden wir darüber nachdenken, welche Elemente unseren Artikel definieren sollten , der abgebildet werden sollte und Titel und Autor, und auch den Inhalt und vielleicht einige Tags. Und wir haben auch etwas, das hier genannt wird. Also sagt uns dieses TikTok auf der linken Seite des Bildes nur, dass wir auch einige der Blog-Posts zumindest enthalten wollen. Und dies ist ein großartiges Beispiel dafür, wie wir denken können , diese Struktur zu schaffen. Also, wenn Sie dieses kleine vorgestellte Element nehmen und wir werden auch Tags hier haben. So zum Beispiel, hier haben wir Design und Entwicklung und Typografie, und wir haben auch verschiedene Kategorien. Wir müssen also überlegen, wie man es in CMS erstellt, damit es wirklich Sinn macht. Also Funktion ist im Grunde ja, nein. Das gehört also zum Artikel. Das ist wahr, falsche Aussage. Und das könnte ein einfaches Feld sein, das wir einfach in dem Artikel wechseln, um zu sagen, dass es vorkommt. Später können wir entscheiden, dass dieser Artikel, der vorgestellt wird, wird zum Beispiel, auf der Hauptseite präsentiert. Dann haben wir Tags, und dann müssen wir auch entscheiden, ob wir Tags in unseren Artikeln, Blog-Beiträgen erstellen möchten , oder wir möchten eine separate Sammlung für Tags wie Design-Typografie, Its und so weiter erstellen. Und das ist eine wichtige Entscheidung in Bezug auf CMS, weil wir es entweder in verschiedene Sammlungen aufteilen oder wir nur eine Sammlung erstellen und wir werden diese Steuer hinzufügen, zum Beispiel, in einem Textfeld und vielleicht trennen Sie sie mit einem Semikolon oder Koma oder was auch immer. Aber in diesem Fall, für die Steuer, zumindest denke ich, es wäre am besten, eine separate Struktur für die Steuer zu haben, vor allem, dass ich verschiedene Farben für jeden von ihnen erstellen möchte. Also möchte ich Design Tab, nehmen wir an, haben blaue Farbe und dann wird die Entwicklung grüne Farbe haben. Es bedeutet also, dass ich daran denken muss, zwei verschiedene Eigenschaften zu verwenden. Also zwei verschiedene Felder, eines für tatsächlichen Inhaltstext und das zweite für die Farbe. In diesem speziellen Fall wäre es besser, eine separate Sammlung mit Tags zu erstellen. Und dann wird jeder Stapel den Namen und die Farbe haben, so dass ich mich nicht an alle Farbe-Hex-Werte für jeden Beitrag erinnern muss, den ich erstelle. Ich verknüpfe dieses spezifische Sammlungsstück einfach mit der zweiten Sammlung, der Sammlung des Artikels. Was Webflow uns also ermöglicht, ist, wenn Sie verschiedene Sammlungen erstellen, die Sie vielleicht denken, sagen wir Excel -Tabellen. So haben wir verschiedene Tabellenkalkulationen für Artikel und für Tags und für Autoren. Und dann kannst du sie miteinander verknüpfen. Es ist irgendwie, wenn Sie Airtable verwenden, können Sie verschiedene Blätter miteinander und verschiedene Datensätze verknüpfen. Und das ist eine ähnliche Idee. Sie können die Steuer zwei Artikel verknüpfen. Und dann, während Sie einen bestimmten Artikel erstellen, verlinken Sie einfach auf das spezifische Tag oder die Steuer mit speziellen Feldern, sie werden Referenz- oder Multi-Referenzfeld in Webflow, CMS genannt. Also werden wir es in einem zweiten erforschen. Ich zeige Ihnen, wie Sie die Struktur für unseren Blogkörper definieren. Und das ist wirklich wichtiges Konzept, das Sie ausführen, bevor Sie tatsächlich beginnen, Ihre Website mit Webflow zu entwickeln, was Sie tun, ist, dass Sie einfach Ihr Layout scrollen und verschiedene Verbindungen sowie die Struktur des CMS denken. Also denken Sie zuerst, was statisch sein sollte und was dynamisch sein sollte. Zum Beispiel die Menüpunkte, Software-Marketing, mobile und Blockchain. Sie können ein statisches Menü erstellen, rechts, wie folgt. Aber wenn Sie es im CMS als Kategorien haben, können Sie diese Kategorien mit Blogbeiträgen verknüpfen und dann können Sie diese Elemente automatisch im Menü anzeigen , so dass, wenn Sie etwas ändern oder vielleicht eine andere Kategorie hinzufügen es wird automatisch aktualisiert. Und dann fangen Sie auch an, über die Beziehungen zwischen verschiedenen Sammlungen nachzudenken. Also zum Beispiel, für Autoren, sollte ich eine separate Sammlung erstellen, wenn es nur einen Autor hier gibt und es nur einen Namen dieses Autors gibt. Vielleicht sollte es das Element sein, das Feld in den Artikelsammlungen. Aber wenn ich zukunftssicher denke, sollten wir eine Sammlung mit Autoren erstellen , damit wir ein Foto oder eine Biografie hinzufügen können. Und dann wollen unsere Kunden erstellen, sagen wir eine separate Seite mit im Freien. Wir werden dies mit dieser speziellen Sammlung tun können. Und selbst wenn es Ihnen schwer fällt, den Kopf um das Sammlungspersonal zu wickeln und all diese Daten denken, denke ich, es geht nur darum einige Sammlungen zu erstellen, weil Sie sie später immer optimieren können. Gehen wir also weiter und öffnen Sie unser CMS in Webflow und erstellen Sie eine weitere Sammlung. Wir haben 14 Kategorien. Und jetzt lassen Sie uns Sammlung mit Tags erstellen. Ich denke, dass die Steuer eine separate Sammlung haben sollte , weil sie separate Farben und Namen haben. Also der neue Name der Sammlung wäre Steuer im Plural, und wir haben auch die Singular Version. Und in der URL, ich denke, ich werde mit Tag bleiben. Singular. Die Steuer ist irgendwie seltsam. Wir werden diese Steuerzahler ist eine einzelne Tag-Seite und das wird automatisch mit Webflow generiert. Ich werde Ihnen zeigen, wie diese Seiten in einer Sekunde funktionieren, aber Sie brauchen nur die Sammlungs-URL, um zu besteuern oder, oder benennen Sie sie um und den grundlegenden Info-Namen und die Pufferzeit, wir werden es verlassen, aber wir werden eine weitere hinzufügen benutzerdefinierten Feld und das wird Farbe sein. Abgesehen vom Namen, werden wir auch diese benutzerdefinierte Farbe auf jedes Tag anwenden, das wir erstellen werden. Zum Beispiel Topographie-Tag oder vielleicht Designer. Was auch immer wir als Tag erstellen wollen. Und das wird Tuck-Farbe sein, und ich brauche dieses Feld, um erforderlich zu sein. Speichern wir dieses Feld. Das war's für unsere erste, zweite Kollektion. Lassen Sie uns diese Sammlung erstellen. Und wieder, wir können dies mit Daten initiieren. Ich werde es für jetzt überspringen und nur einige einfache Tags erstellen , die ich bereits eine Zwischenablage zusammen mit ihren Farben habe. Also haben wir Entwicklung. Und dann lassen Sie uns eine andere erstellen, die entworfen wird. Und wenn Sie benutzerdefinierte Felder mit bestimmten Datentypen erstellen, wie Farbe hier können Sie auf dieses kleine Symbol klicken, Drop-Symbol, und dann können Sie die Farbe auswählen. In diesem Fall habe ich die Farbe aus meinem Design. Und für den letzten, den ich erstellen werde, geben wir ihm einen Namen, Topographie und Typografie Vortrag. Lassen Sie uns vielleicht die Farbe aus diesem Farbwähler auswählen und diese Art von orange-roter Farbe auswählen, speichern, und das ist es für meine zweite Struktur. Also haben wir jetzt Kategorien und auch wir haben Steuern. Lassen Sie uns eine weitere CMS Sammlung erstellen. Und dieses Mal werden wir Autoren erstellen und diesen vordefinierten Datensatz von Webflow verwenden . Wenn Sie auf Autoren klicken, sehen Sie, dass der Sammlungsname korrekt ist. Dann haben wir die Sammlung URL und die spezifischen Seiten, die generiert werden, haben dieses Präfix Autor. Und auch haben wir, abgesehen von grundlegenden Informationen, einige benutzerdefinierte Felder wie Bio und Zusammenfassung und Bild und E-Mail. Natürlich können wir jedes dieser Felder auswählen und wir können es von einzeiligen zu mehrzeiligen ändern und wir können so ändern, dass die Felder standardmäßig erforderlich sind, alle von ihnen sind optional. Wir haben auch einige Twitter-Profil-Link und Facebook-Profiling. Sie können es ändern, Sie können diejenigen löschen, die Sie nicht wirklich brauchen, aber ich bleibe nur bei den automatisch generierten. Und auf der rechten Seite haben Sie auch die Editor-Vorschau, die Ihnen einen Eindruck davon gibt, wie diese Felder sind. Lassen Sie uns diese Sammlung erstellen. Lassen Sie uns diese Sammlung mit Daten initiieren, damit ich nicht nach Lorem Ipsum suchen und dort einfügen muss. Ich werde fünf Elemente am Anfang hinzufügen. Und Webflow kümmert sich darum, verschiedene Namen für meine Autorisierung zu generieren, sowie deren Bios- und Biozusammenfassungen. Und wir haben auch ein Bild und Bild bei diesem ziemlich smart und Webflow, weil Sie dieses Bild mit einer Person tatsächlich für andere haben. Das könnte nur ein Zufall sein, aber hier ist es. Und auch eine E-Mail-Adresse, offensichtlich einige imaginäre Datenprofil-Links und für Facebook und Twitter. Aber hier sind sie. Und wir können diese Daten jetzt verwenden, um zu entwerfen und zu präsentieren, was wir erstellt haben. Eine weitere Sammlung, die ich erstellen werde, dieser Blog-Post, das ist die wichtigste. Sie können die fertige Struktur verwenden, aber ich werde sie einfach von Grund auf neu erstellen. Das könnten Blogbeiträge oder Artikel sein. Sie können es benennen, wie Sie wollen. Ich denke, dass diese Sammlungs-URL irgendwie seltsam ist. Blog-Posts, vielleicht lasst uns hier Artikel haben oder einfach nur Blog verlassen und das ist in Ordnung. Werfen wir nun einen Blick auf die benutzerdefinierten Felder. Dies ist der wichtigste Teil. Wir werden viele verschiedene benutzerdefinierte Felder für die Artikel definieren. Aber lassen Sie uns zuerst mit dem Layout beraten. Dies ist die Quelle der Inspiration für das, was wir hier tatsächlich nutzen werden. Und wir haben dieses Bild, das ist ein Rechteck und wir werden ein weiteres, auch ein anderes Format, Bildformate für Instagram hinzufügen . Übrigens können wir dieses Multi-Bildfeld haben und Multi-Bildfeld ist in der Lage bis zu 25 Bilder in einem einzigen Feld der Sammlung zu akzeptieren , so dass Sie es später in einer Lightbox verwenden können. Zum Beispiel, wenn Sie ein Produkt Bilder für Ihre E-Commerce-Website haben, aber wir werden nur Bild verwenden. Dies wäre ein einzelnes Bild, aber wir werden zwei Felder wie dieses erstellen. Der erste wäre ein Rechteck. Also mit Seitenverhältnis, Eins-zu-Eins-Bild eins zu eins. Und dann zweiter, das wäre derjenige, der in XD angezeigt wird, Das ist 16 mal neun. Und Sie können auch Hilfetext hinzufügen. So zum Beispiel, wenn Sie es vorziehen, Sagen wir 1600 mal 900. Dies wird auch im Editor vorherigen Schulden angezeigt. Jeder, der Ihre Website verwaltet, weiß, was die bevorzugte Auflösung der Bilder ist. Und auch werde ich dieses Feld als erforderlich markieren, da dies das Bild in den Thumbnails sowie im Post verwendet wird. Speichern wir dieses Feld. Und das nächste Feld wäre ein Auszug. So Auszug ist an verschiedenen Orten. So zum Beispiel, in unserem Artikel ist es dieses Stück ganz oben. Wir haben es auch unten sind die Miniaturen. Und wenn dies angezeigt wird, haben wir auch freie Zeilen der Auszüge, die auf der Homepage sichtbar sind. Lassen Sie uns also ein weiteres einfaches Textfeld erstellen, aber stellen Sie sicher, dass es sich um mehrere Zeilen handelt. Und wir brauchen drei Zeilen dieses Textes. Es ist also am besten, sich mit dem Layout zu beraten, wie lang genau dieser Text sein sollte, um in dieses freie Linienmodell zu passen. Also werde ich es zwischen hunderteinhundertsechzig Zeichen haben. Und dies ist auch für das Label erforderlich , das wir Auszug verwenden und lassen Sie uns dieses Feld speichern. Nun das wichtigste Feld für den Artikel, das wäre der Inhalt der Artikel. Und wir werden keine einfachen Texte mit mehrzeiligen verwenden , da wir hier nur einen einfachen Text haben. Allerdings können wir in den Blogbeiträgen auch einige Videos hinzufügen und vielleicht möchten wir einige Bilder hinzufügen. diesem Grund werden wir Rich Text verwenden. Und das ist das Feld, das es uns ermöglicht, die Struktur mit Kopfzeilen und Absätzen und Bildern und eingebetteten Inhalten zu haben . Und auch für Leute, die unsere Inhalte im Editor verwalten. Sie werden nette WordPress wie Editor für diese Rich-Text-Felder haben. Übrigens können Sie eine minimale Zeichenanzahl haben, aber ich werde es einfach leer lassen, aber dieses Feld ist offensichtlich erforderlich. Wir benötigen einige Inhalte für einen Börsengang, Blogbeiträge und den Artikel. Und das ist die Grundstruktur. Zumindest sind dies die meisten Dinge, die wir hier sehen werden. Aber auch wir haben einige Artikel, die als gekennzeichnet sein könnte. Dies ist ein einfaches Feld, das wir hier verwenden werden. Und wir werden Schalter verwenden, Schalter, einfach, wahr-falsch. Und lassen Sie uns einen Namen von vorgestellten geben. Speichern Sie dieses Feld. Und werfen wir einen Blick in den Editor. Also würde jemand in der Lage sein, Feature den Beitrag standardmäßig zu verwenden, der auf Nein gesetzt wäre. Aber ich kann die Flagge der Beiträge gesetzt werden. Und dann, abhängig davon, kann ich sagen, auf der Homepage angezeigt, okay, und das wäre es für die statischen Daten für jeden Artikel. Nun möchten wir die Daten verwenden, die wir bereits in verschiedenen CMS Sammlungen wie Autorisieren und Tags und Kategorien erstellt haben. Da jeder Artikel, jeder Blog-Beitrag müsste seinen Autor und einige Steuern und die Kategorie, zu der er gehört. Also werden wir ein anderes Feld erstellen, und wir werden Referenz- und Multi-Layer-Referenzfeldfelder verwenden , um dies zu erreichen, der Unterschied zwischen den beiden ist, dass Referenzfeldverknüpfung zu einem Datensatz, zum Beispiel Ein Autoren- und Multi-Referenzfeld kann mehrere Datensätze aus diesen verschiedenen Sammlungen in Bezug auf Kategorien verknüpfen . Also lasst uns zuerst Kategorien haben, werden wir einzelne Referenzfeld verwenden. Das ist einfach, weil wir wollen, dass jeder Blog-Beitrag nur zu einer Kategorie gehören. Und wenn Sie es anders haben wollen, wenn Sie Blogposts in verschiedenen Kategorien platzieren wollen oder vielleicht eine Kategorie für neue Artikel und Feature-Artikel erstellen möchten. Sie könnten dies tun und dann Multi-Referenzfeld erstellen und es verknüpfen. Es ist nur eine geschäftliche Entscheidung für Autoren. Ich werde auch ein einzelnes Referenzfeld verwenden, da es in meinem Fall ein Autor für einen Blogbeitrag sein wird. Aber wieder, wenn Sie Beiträge haben, die mehrere Autoren haben, können Sie einfach ein Multi-Referenzfeld hier erstellen. Und für die Steuer ist die Frage die gleiche. Also müssen wir uns selbst beantworten, ob wir nur ein Tag für einen Artikel verwenden möchten, oder wir werden Multi-Referenzfeld verwenden und dann verschiedene Tags mit mindestens einem Tag verknüpfen, aber vielleicht mehrere Steuern zu einem Artikel. Und für mich wäre das offensichtlich, Multi-Referenzfeld hier zu verwenden. Aber nur um des Lernens willen werde ich bei einer einzigen Referenzdatei bleiben. Und das ist einfach, weil Webflow für jetzt zumindest einige Probleme mit der Anzeige dynamischer Daten aus Multi-Referenzfeldern innerhalb der statischen Seiten. Um das zu erklären, muss ich Ihnen diese statischen Seiten hier zeigen. Und wir haben auch, dass CMS Sammlungsseiten. Diese werden automatisch generiert, diese violetten Seiten, rosa Seiten, sie werden automatisch generiert und sie enthalten alle Daten aus unserer Sammlung. Leicht zugänglich in der Benutzeroberfläche, im Design. Aber für die statischen Seiten müssen eine spezielle Struktur verwenden , um auf diese Daten zugreifen zu können. Und leider sind die Daten aus Multi-Referenzfeld, zumindest für jetzt, zumindest für jetzt,nur für CMS Sammlungsseiten verfügbar, also nur für die lila Seiten. Aber was ich auch weiß, ist Webflow arbeitet aktiv daran, dies auf statischen Seiten zu aktivieren. Also, was ich Ihnen empfehlen, in diesem Kurs zu tun, ist einfach folgen. Und wenn Sie diese Website zusammen mit mir erstellen, verwenden Sie jetzt einfach ein einziges Referenzfeld wie ich. Aber wenn Sie den Kurs beenden, überprüfen Sie, ob Webflow bereits eine Lösung entwickelt hat um diese Multireferenzfelder in den statischen Seiten zu verwenden. Und wenn sie versucht haben, es zu ändern, so dass wir Multi-Referenz für Steuer und Das wäre, so lassen Sie uns diese Sammlung erstellen. Und das ist auch toll, weil wir unsere Kollektion mit einigen Dummy-Artikeln initiieren können. Ich möchte 10 Blogbeiträge hinzufügen, damit wir leicht mit einigen Beispieldaten wie Bildern und Blockinhalten arbeiten können. Und Webflow macht einen tollen Job und füllt die Namen der Blog-Posts. Sogar. Denken Sie daran, dass wir diese vorgefertigte Blogbeiträge Sammlung nicht verwendet haben. Wir haben gerade unsere eigene Blogbeiträge Sammlung erstellt, aber irgendwie gelungen, es mit einigen richtigen Daten, einige schöne Bilder zu füllen, und auch mit grundlegenden Informationen haben wir anstelle von Namen der Natur wie wir zuvor, zuvor generiert hatte, wir haben Namen für einige nette Artikel wie 20 Mythen über Webdesign. Das ist ziemlich cool. Und hier haben wir diese Struktur bereit mit Content-Feld. Wir haben diese Fahne vorgestellt. Wir können es ein- oder ausschalten. Und für den Autor und Tag der Kategorie können Sie sehen, dass es sich um Dropdowns handelt. Und das ist einfach, weil wir nur die Elemente verwenden können, die bereits in diesen spezifischen CMS-Sammlungen definiert sind. in Autoren Tags und Kategorien Wenn Sie diese Elementein Autoren Tags und Kategorienverwalten möchten, können Sie die Sammlung auswählen, die Sie verwalten möchten, und dann können Sie einige neue Aufgaben hinzufügen. Sie können, Sie können es löschen. Und wenn Sie nicht in der Lage sind, die gesamte Sammlung zu löschen, müssen Sie die Verbindungen sehen, die sie hat. So haben wir bereits die Verbindung zwischen dieser Kategorie und unseren Blogbeiträgen hergestellt. Um zu löschen, muss die Steuererhebung zuerst die Verbindung zwischen Blogbeiträgen und Steuern löschen. Andernfalls lässt Webflow uns das nicht tun. Okay, das ist es also. Wir haben unsere Sammlungen definiert und können nun unsere Website veröffentlichen , da alle Änderungen an den Sammlungen veröffentlicht werden, die jetzt veröffentlicht werden, aber auf Ihren Websites veröffentlicht werden. Wenn Sie also Befehl Return drücken, ist dies die Verknüpfung für die Veröffentlichung. Sie können ihre Website veröffentlichen und jetzt sind die Sammlungselemente live. Das ist es für jetzt und ich sehe Sie in der nächsten Lektion. 10. Blogs Menü: Hey, es ist schön, dich in der nächsten Lektion zu sehen. Und los geht's. Wir beginnen mit der Erstellung unserer Blockstruktur und Seiten für den Block, wir haben den Styleguide bereit, so dass wir jetzt eine neue Seite erstellen können, und das wäre unsere Blog-Homepage. Geben wir ihm einen Namen, Logo. Das ist genug. Lassen Sie uns das schaffen. Und wir haben immer diese XD-Datei, die irgendwie Referenzdesign für unseren Blog ist. Wir können die Datei auschecken und hier können Sie die Basisstruktur für die Homepage sehen. Wir haben die Speisekarte oben. Dann gibt es einen vorgestellten Poston, einige aktuelle Artikel aus verschiedenen Kategorien, die wir definiert haben, und das CMS, wie Sie sehen können, es ist wirklich einfach und es ist nur ein Mock-up. Also werde ich nicht versuchen, Pixel perfekt mit den Größen der Elemente übereinzustimmen. Diese Art von Dingen, die Sie im Grundkurs überprüfen können. Aber hier lohnt es sich, die Struktur und das CMS zu erstellen, und ich möchte Ihnen das alles erklären. Also, was ich jetzt tun werde, ist auf die Style-Guide-Seite zu gehen und einige Elemente von dort auszuleihen. Die erste, die wir als dieses feste Element mit Navigation verwenden werden. Also lassen Sie uns das kopieren und in den Blog einfügen. Wenn es eine Komponente wäre, könnten wir auch das Komponentenmenü verwenden, aber hier kopiere ich nur und füge ein. Und das erste Element, das wird nicht eine Homepage sein, sondern alle Beiträge. So werden alle Blog-Beiträge hier angezeigt. Und für die Homepage wird dieses Saftblock-Logo haben. Eigentlich ist dieses Logo ein wenig anders als das Standardlogo, das wir haben. Und ich habe es in der XD-Datei als Status für diese Komponente. Wählen wir nun dieses Blocklogo aus und exportieren Sie es. Nun gehen wir zu Webflow und ich kann das Logo auswählen, doppelklicken Sie auf das Logo, um es zu ersetzen und durch das zu ersetzen, das ich aus Adobe XD exportiert habe. Und wie Sie sehen können, ist es die richtige Größe, 114 mal 24 Pixel. Allerdings ist es nicht wirklich so scharf, Es ist nicht so knackig. Und das liegt vor allem an den Besonderheiten meines Displays. Ich benutze Retina-Display und es skaliert den Inhalt zweimal. Also die Größe ist die gleiche, weil ich in einer Skala entschieden habe, aber das Logo ist nicht so scharf, nachdem ich exportiere. Und Webflow hat eine Möglichkeit, damit umzugehen. Und das benutzt diese Bilder als hochgradig BI. Was Sie also tatsächlich tun können, ist zu Adobe XD zurückzukehren und sicherzustellen, dass Sie dieses Asset haben , das ursprünglich in der 1 x Skala war, in x exportiert und dann müssten Sie es ersetzen und es als ein hohes DPI-Bild verwenden. Was ich in XD tun muss, ist auf Web gewechselt, da dies zwei Bilder exportiert. Ich habe erklärt, dass ich dieses Bild in einer X-Skala entworfen habe. Und dann möchte ich es sowohl in ein X als auch in zwei x exportieren, indem ich diese Webversion auswähle. Wenn ich also als Juden block-Logo exportiert habe, werden Sie sehen, dass, wenn ich jetzt diese Bilder importieren möchte, ich tatsächlich zwei Bilder anstelle eines habe. Dies ist nur Block Logo auf zwei x und die einfache Version, so dass die beiden Eier Version ist doppelt so groß. Es sind sechs Kilobyte. Und darunter hat es die doppelte Anzahl von Pixeln, aber auf meinem Netzhautdisplay sieht es einfach besser aus. Es ändert nicht die Größe. Also, was ich tun muss, ist, dies einfach in das X-Skale-Bild zu importieren und dann in Webflow zu erklären, dass ich dieses Bild als HTTP-API verwenden möchte. Wie Sie sehen können, ist es doppelt so groß wie 228 mal 48 Pixel. Es ist doppelt so groß wie in Kilobyte. Aber es wird besser aussehen, wenn ich die Eigenschaft auf hohe DPI ändere. Das ist also, was Sie in Bezug auf PNG- und JPEG-Bilder tun werden, diese sind zufällig Bitmap. Aber in den meisten Fällen ist dies möglich. Sie profitieren von Bildern im SVG-Format, was eigentlich am besten für Web und seinen Vektor ist, so dass Sie dieses Bild nicht verwenden müssen ist hoch DPI und es ist genug, um es einfach aus Adobe XD oder Sketch oder Figma in diese richtigen SVG-Formate. Dies ist für Fotos offensichtlich nicht möglich, aber für alle anderen Elemente, UI-Elemente, können Sie diesen Saft-Logoblock in SVG exportieren. Und jetzt, wenn Sie dieses Asset hochladen und ersetzen, werden Sie sehen, dass die SVG-Version nur ein Kilobyte ist und es tatsächlich im Browser skalieren kann, ohne Qualität zu verlieren. Daher ist es immer am besten, SVG-Bilder zu verwenden. Es ist kleiner. Es LOS wirklich schnell und Sie müssen nicht eine hohe DPI-Option verwenden. Also das ist es für Bilder. Es gibt noch ein paar Optionen. Denken Sie also daran, das ALT-Tag zu allen Bildern hinzuzufügen. Sie können dies später auch im Bedienfeld „Elemente“ hinzufügen. Und das ist ziemlich netter Trick. Und auch in den neuesten Versionen von Webflow haben Sie Bilder so eingestellt, dass sie faul geladen werden. Und das ist wirklich cool, weil es auch Ihre Website beschleunigen wird. Nun, was ich tun möchte, ist ein weiteres Element für unser Menü zu erstellen. Aber zuerst, lassen Sie uns dieses mit unserer Blog-Seite verknüpfen. Und das wird die Homepage sein, die ich in XD mit allen vorgestellten Beiträgen und ein paar Beiträgen aus jeder Kategorie entworfen habe. Und dieser alte Impulslink wird nur auf die andere Seite verlinken, die ich jetzt erstellen werde, lassen Sie uns eine neue Seite mit dem Namen Block alle Beiträge erstellen. Und dieser besondere NovaLink wird zu dieser Block alte Beiträge Seite gehen , wo ich die Liste aller Beiträge auf unserem Block erstellen werde. Also gehen wir zurück zum Blog. Stellen Sie sicher, dass alle Beiträge korrekt mit der Buchseite und für die anderen Seiten verknüpft sind. Für Farbkomponenten muss ich sie in richtige Abschnitte wie Blockkette und Marketing umbenennen. Aber ich muss nicht wirklich statische Namen dort verwenden , weil alles, was ich hier anzeigen muss, wie im CMS, das sind Kategorien, die ich erstellt und NCAM S deklariert habe und ich diese Kategorien verwenden möchte und zeigen ihre Namen dynamisch an, und ich möchte, dass die Links zu diesen Kategorien automatisch ausgefüllt werden , so dass sie auf die entsprechende Seite mit Artikeln aus dieser Kategorie navigieren . Und das kann mit einem CMS erreicht werden. Ich werde dir später zeigen, wie man es macht. Wenn Sie den Namen der Kategorie aktualisieren oder vielleicht eine neue Kategorie hinzufügen, wird diese automatisch aktualisiert. Wir sehen uns in der nächsten Lektion. 11. Menu: Hallo, da. Schön, Sie in der nächsten Lektion zu sehen. Und dieses Mal werden wir Kategorien mit unserer Speisekarte verknüpfen. Daher möchte ich, dass alle Namen unserer Kategorie CMS Sammlung im Menü angezeigt werden, sowie auf die entsprechenden Seiten verlinkt werden. Wenn Sie diesen Inhalt dynamisch über CMS verknüpfen und auf Ihrer Seite anzeigen, sollten Sie später in der Lage sein, Änderungen an Kategorien im CMS vorzunehmen. Und diese Änderungen werden über dieses spezielle Menü auf all Ihren Seiten widergespiegelt. Lassen Sie uns nun fast alle Navigationslinks löschen. Ich werde eine verlassen und reisen und Ihnen zeigen, wie Sie dynamische Inhalte von unserer CMS eigenen statischen Seite erstellen. Um dies zu tun, müssen Sie zum CMS-Abschnitt der ungeraden Elemente gehen. Also drücken wir ein auf der Tastatur und dann NCAM, da Sie diese Sammlung am wenigsten haben, müssen Sie zuerst Sammlung am wenigsten verwenden. Und innerhalb dieser Sammlung können Sie zumindest Daten von CMS beziehen. Also lassen Sie uns doppelklicken, um es hier einzufügen. Und hier haben Sie diese Sammlung am wenigsten Wrapper. Wenn Sie also statische Seiten verwenden, um ein Sammlungselement anzuzeigen, müssen Sie die entsprechende Sammlung beziehen. Also, aus welcher Sammlung möchten Sie Daten beziehen? Ich möchte aus Kategorien beziehen. Und aus Kategorien, wir werden nur laden, dass Daten automatisch geladen werden. So können Sie sehen, dass und diese vier Elemente sind mit einigen Daten aus der Sammlung vorgeladen. Und einfach, weil wir vier Artikel für diese Kollektion deklariert haben, haben wir vier Artikel. Wenn Sie einen Blick auf die Struktur werfen, haben wir Sammlungsbedürfnisse und dann Sammlungsartikel, das ist das Wichtigste. Und wenn wir etwas ändern wollen, jedes Styling oder Aussehen dieser Elemente oder setzen Sie einige Elemente in wird es für Sammlung Element tun. Sammlungselement ist eine Art Vorlage, und diese Vorlage wird mit der Anzahl der Prüfelemente multipliziert. Und damit wir dort vier Kategorien haben. Es ist viermal dupliziert. Nun, wenn wir diese NovalLink nehmen und einfach kopieren und fügen Sie es in Sammlungselemente, wird dieses NovaLink mit all seinem Styling als Element der Sammlung Elemente haben. Also in dieser Sammelelementvorlage, was wir jetzt tun können, ist, dass wir es mit jedem Feld, das wir aus der Sammlung angezeigt werden wollen, beziehen können . Wenn Sie einen Blick auf diese rechte Seite nehmen, werden Sie feststellen, dass gerade jetzt, was wir als nur einen Link zu einer statischen Seite haben, die wir Block 0 Beiträge erstellt haben. Und es ist einfach da, weil wir den NovalLink kopiert haben und zuvor diesen NovalLink mit Block 0 verknüpfen. Posten Sie die Seite, die wir erstellt haben, und wir möchten alle Artikel auf dieser Seite auflisten. Also lassen Sie mich einen Blick auf die Seiten werfen. Hier haben Sie dieses Buch oh, Beiträge, die wir erstellt haben. Und das ist ziemlich wichtig, weil es sich innerhalb der statischen Seitenkategorie befindet. Aber neben den statischen Seiten, haben wir auch Utility-Seiten, E-Commerce-Seiten, und was für jetzt am wichtigsten ist, CMS Sammlungsseiten. Diese Seiten werden automatisch generiert, wenn Sie die Sammlung erstellen. Und zum Beispiel haben wir diese Kategorien Vorlage und diese Seite wird automatisch generiert. Warum? Warum haben wir Kategorien CMS Sammlung erstellt, diese Seite, und es ist in lila Farbe markiert. Ist verfügbar, um alle Daten aus der Catergories-Vorlage anzuzeigen ohne zusätzliche Container zu erstellen, wie wir es auf statischen Seiten getan haben. Also auf statischen Seiten mussten wir diese Sammlung am wenigsten Wrapper und Audit aus einem anderen Menü erstellen. Aber auf CMS-Seiten können wir einfach Daten aus dieser Sammlung verwenden. Wenn Sie nun einen Blick auf die Linkeinstellungen werfen, sehen Sie auch einige lila Felder. Und es bedeutet, dass diese violetten Felder mit der Sammlung verknüpft sind und einige dynamische Daten aus der Sammlung für die URL bezogen werden können. Wenn wir wählen wird URL aus Kategorien, wir können verknüpfen, was auch immer URL-Feld, das in unserer Sammlung ist. Also, wenn wir definiert haben, zum Beispiel, für mobile ein benutzerdefiniertes Feld mit URL, dann können wir diese URL dynamisch verknüpfen, indem wir diese verwenden, holen Sie uns aus Kategorien. Aber wir haben momentan keine Links, also gibt es keine von ihnen. Wie können wir genau auf die Kategorieseite verlinkt, so dass wir alle Beiträge in, sagen wir, mobile und Software-Kategorie anzeigen können . Nun, um dies zu tun, müssen wir auf diese dynamischen CMS-Seiten verlinken , die beim Erstellen der Sammlung automatisch generiert wurden. Und das ist auch in lila markiert hier haben wir statische Seiten und auch dynamische Seiten. Das sind unsere CMS Collection-Seiten. Und von hier aus können wir auf die aktuelle Kategorie verlinken. Es bedeutet, dass für alle Sammlungselemente, Ich habe die entsprechende nx für mobile und für Software, et cetera. Es wird mich auf die entsprechende Seite bringen, die für diese Sammlung generiert wurde , und ich werde in der Lage sein, alle Beiträge von, sagen wir mobile oder Software anzuzeigen . Außerdem muss ich dies auswählen, Texte aus Kategorien erhalten, damit ich tolle Etiketten habe. Lassen Sie mich den Namen auswählen. Und jetzt, wie Sie sehen können, habe ich alle Namen der Kategorien als Etiketten für unsere nav Links. So haben wir Software-Marketing, Mobile und Blockchain. Und darüber hinaus haben wir 0 Beiträge, was ein einfacher NovaLink ist, der zu unserer statischen Seite führt. Aber alle Elemente hier, alle Links in diesem Sammlungselement Element werden auf die entsprechende aktuelle Kategorieseite von CMS generiert verlinken . Es wird sich also auch entsprechend ändern, wenn wir weitere Änderungen an unserer CMS-Struktur vornehmen. Und wie Sie sehen können, diese Kategorie-Vorlage, dies ist genau die Vorlage, die angezeigt wird, wenn wir auf den Link klicken. Und dies wird diese aktuelle Kategorieseite sein, die wir später im Webflow stylen und entsprechende Container erstellen, Beiträge anzeigen usw. Okay, für die Sammlungsliste Wrapper-Einstellungen können wir verschiedene Layouts auswählen. So haben wir verschiedene Spalteneinstellungen, und wir können auch das Tag ändern. Lassen Sie mich einfach an diesen Layout-Stil halten, wo dies erweitert wird. Und Dan, lassen Sie mich das Layout in Flexbox ändern. Was ich tun möchte, ist zuerst die Sammlungsliste auszuwählen und ich werde hier das Layout in Flexbox ändern. Jetzt sind die Elemente nebeneinander. Und für das gesamte Nav-Menü, lassen Sie mich zur Flexbox wechseln, um diese Elemente zu zentrieren. Jetzt sieht es ziemlich gut aus. Wir müssen überprüfen, wie es in den mobilen Versionen aussieht, obwohl und die Tablet-Version, müssen wir einige Anpassungen vornehmen. Wählen wir den gesamten Container aus. Wir können das Layout ändern, um auch hier zu biegen und es auch auf der rechten Seite zu rechtfertigen. Das sieht ziemlich cool aus, ich denke für Mobile, lassen Sie mich nur eine Vorschau, wie es funktionieren würde und erweitern Sie dieses Menü in der Vorschau. Also ja, es sieht ziemlich gut aus mit der Notwendigkeit, zu stehlen, etwas Ausrichtung anzupassen. Aber auch für das Tablet könnten wir einfach versuchen, das gesamte Menü anzuzeigen. Wir haben nur fünf Elemente im Menü, also denke ich, dass sie horizontal passen. Lassen Sie mich also die Navigationsleiste und dann ihre Einstellungen auswählen. Ich kann entscheiden, dass dieses mobile Menü nur von der Telefonansicht und unten angezeigt wird. Also in Tablet haben wir noch fünf Artikel und das Logo. Und ich denke, wir sind alle gut, weil dies die engste Auflösung ist und im Telefon, werden wir informiert Version haben wird dieses verkleinerte Menü haben. Wir müssen immer noch anpassen, positionieren, etwas Ausrichtung. sind Dinge, die ich dir im Grundkurs gesagt habe. Also empfehle ich Ihnen, den Grundkurs zu überprüfen und einige Anpassungen in diesem Kurs vorzunehmen, ich ziehe es vor, keine Zeit auf dem Layout zu verbringen, aber lassen Sie mich einfach schnell einige Anpassungen hier in dieser Kachel erstellen, ich öffne dieses Menü und jetzt lassen Sie uns nur einige Abstände sowie wir wollen die Positionierung für diese gesamte Sammlung ändern, zumindest so dass die Richtung für Flexbox vertikal ist und lassen Sie uns es an der Mitte sowie diese nav Link ausrichten, können wir Richten Sie den Text an der Mitte aus. Und wir sind alle gut. Ich denke, dass das nur grundlegende Einstellungen sind, aber jetzt sieht es so viel besser aus. Und Sie können von dort beginnen und Sie können einige Anpassungen am Layout vornehmen. Also denke ich, dass unsere Speisekarte in Bezug auf den dynamischen Inhalt bereit ist. Und Sie haben gelernt, wie Sie Sammlung am wenigsten Wrapper auf statischen Seiten verwenden. Denken Sie also daran, wenn Sie dynamische Daten auf statischen Seiten in Webflow verwenden möchten, müssten Sie die Sammlung am wenigsten Rapper aus dem Menü Hinzufügen verwenden. Und dann können Sie alle Daten aus CMS Sammlung bestellen. Aber für die CMS-Sammlungsseiten, die automatisch generiert werden, können Sie dynamische Daten aus dieser Sammlung verwenden , ohne die Notwendigkeit, Sammlung zu verwenden, am wenigsten Gummi. Das war's vorerst. Wir sehen uns in der nächsten Lektion. 12. Featured Artikel: Hallo und herzlich willkommen zur nächsten Lektion. In diesem werden wir an den dynamischen Inhalten auf der Homepage arbeiten. Fügen wir zuerst einen Abschnitt hinzu. Dieser Abschnitt sollte sich außerhalb der festen Navigationsleiste befinden. Und in diesem Abschnitt werde ich einen weiteren Container sowie ein anderes technisches Div hinzufügen , das die Informationen über die zukünftigen Beiträge enthält. Das ist also ziemlich einzigartig. Ich werde ihm einen Namen Buch alten Titel geben. Dies ist also eine ziemlich einzigartige Klasse, die wir nur für dieses Element auf unserer Seite verwenden werden und für den gesamten Abschnitt im Design hat es einen um 118 Pixel Rand von oben. Jetzt im Blockhelden-Titel, was wir möchten, ist der Inhalt des Blog-Beitrags, der angezeigt wird. Lassen Sie uns nun diesen Block Held mit dem Titel Klasse löschen. Ich werde das in einer Sekunde erneut anwenden. Aber zuerst werde ich mehr generische Klassenkarte groß erstellen. Und ich tue dies, weil ich möchte, dass dieses Auto Klasse sein soll, um einige Eigenschaften zu haben, die ich in meinem Styleguide verwenden kann und spezifisch für viele verschiedene Karten, die ich auf meiner Seite habe. Also änderte ich die Hintergrundfarbe sowohl in Weiß als auch im Randradius auf 12 Pixel. Und jetzt ändere ich die Boxschattenwerte. Wenden wir Deckkraft Alpha 2, 6 Prozent an. Und nun lasst uns diesen Kartenschnabel loswerden, so dass wir zuerst diesen Block Helden mit dem Titel Klasse erneut anwenden können. Für jetzt hat es keine Eigenschaften, aber Obendrein wird einfach Karte groß hinzufügen, die wir als universelle Kosten für diese Spielkarten erstellt haben und große Klasse abwerfen ist angemessen für uns, um es einfach in der Styleguide zu verwenden. Wenn wir also etwas haben, das wir später so wiederverwenden können, können wir direkt zu Styleguides gehen und diese Elemente hinzufügen. In diesem Ziel brauchen wir einen weiteren Abschnitt für einige generische Elemente, einige leere Abschnitte. Und wir werden es verwenden, um verschiedene Zustände und Höhen zu erstellen. Lassen Sie mich beschleunigen diesen Prozess ist nichts Neues, aber jetzt habe ich diesen Bausteinabschnitt mit Kartenschatten und Erhebungen knapp über unseren Abschnitten. Und ich habe diese Karte große Einsicht. Jetzt kann ich wieder auf unsere Buchseite zurückkehren. Und das wird im Styleguide bleiben, damit ich es in Zukunft wiederverwenden kann. Jetzt ist dieser Abschnitt aus dem Layout ziemlich einzigartig für die gesamte Seite, für den gesamten Block. Also werden wir diese Funktion zu Tiktok oben haben, und dann werden wir Titel und Auszug haben. Und auf der rechten Seite haben wir ein Bild. Also zuerst muss ich diese Sammlung am wenigsten verwenden, ist dies ziemlich wichtig, denn wenn Sie vergessen, zuerst eine Sammlungsliste zu erstellen und sie mit der entsprechenden Sammlung zu verknüpfen. In diesem Fall sind dies Blogbeiträge. Daniel muss das gesamte Bauteil wiederholen. Also lassen Sie mich zu den Einstellungen dieser Sammlung am wenigsten richtig gehen. Es wird bereits mit Blogposts als Quelle verwendet, aber jetzt können wir auch einige Filter und Sortierreihenfolge verwenden, um Elemente richtig anzuzeigen. Sie werden später alle Optionen erforschen. Aber jetzt lassen Sie uns einen Blick auf Limit Items Option, die es uns ermöglichen , nur eine bestimmte Anzahl von Elementen aus dieser Sammlung zurückgegeben anzuzeigen. In diesem speziellen Fall möchte ich nur ein Element, einen Blogbeiträge anzeigen. Und ich werde bei einem anfangen. Falls ich, ich weiß nicht, 10 oder 100 habe , kann ich eine andere Nummer auswählen, aber auch darüber hinaus kann ich die Sortierreihenfolge auswählen, die nur basierend auf dem Veröffentlichungsdatum sortiert wird. Also dies veröffentlicht auf als Eigenschaft, die automatisch auf alle CMS-Elemente von Webflow angewendet wird, kann ich es von neuestem zum ältesten sortieren und speichern. Damit wird der neueste Blogbeitrag in diesem Sammlungslistenelement angezeigt. Aber wenn ich möchte, dass diese Elemente nur angezeigt werden, kann ich jetzt zu Filtern gehen und ich kann das entsprechende Feld auswählen. In diesem Fall werde ich vorgestellten verwenden. Und nur wenn vorgestellt ist, werde ich diese neuesten Beiträge anzeigen. Also habe ich alles benutzt. Ich verwende Limit-Elemente, um nur ein Element anzuzeigen. Und darüber hinaus haben wir die Sortierreihenfolge angewendet, so dass nur die neuesten Beiträge angezeigt werden. Und auch dieser Beitrag muss vorgestellt werden. Es muss also diese Funktion wechseln, auf Ohm umschalten. Jetzt sind diese allgemeinen Einstellungen und Filter auf Sammlung am wenigsten Wrapper gesetzt. Aber jetzt können wir zum Sammlungselement wechseln und wir können das Sammlungselement neu gestalten sowie alle Daten aus dem Sammlungslistenelement verwenden , das mit den Filtern zurückgegeben wird, die wir angewendet haben. So haben wir bereits die Daten über diese sehr aktuelle Beiträge, die vorgestellt wird. Jetzt können wir Lync Block verwenden und in den Verknüpfungseinstellungen sehen Sie, dass wir eine Verknüpfung zu dieser bestimmten Seite, die aktuelle Blogbeiträge ist. Und der Strom ist einfach derjenige, der von unseren Filtern zurückgegeben wird. Lassen Sie mich also das Display auf Flex ändern. Und dieses Linkbuch wird einfach der Container für alle anderen Elemente sein , die es mit dem Artikel verlinken wird. Jetzt innen, Lassen Sie uns einen weiteren d-Block erstellen, und dies wird die linke Seite Struktur halten. Ich werde ihm einen Namen geben, sagen wir Buch Held. Und das würde sowohl die Beschreibung als auch den Titel und die Kategorie enthalten. Und auf der rechten Seite wird das Bild haben. Also, jetzt in diesem Block, Held wird ein Lehrbuch setzen. Dies ist eine einfache Beschriftung, die wir als die Überschrift verwenden werden, und das ist H1 und auch ein Absatz, in dem der Auszug für den Beitrag angezeigt wird. Jetzt, da wir es später haben, verknüpfen wir die entsprechenden Daten. Wir brauchen auch dieses Lesen jetzt, Link und das gesamte Element ist verknüpft, so dass wir nur dieses Lehrbuch haben. Und hier drinnen werden wir die Nachricht „Jetzt lesen“ setzen. Lassen Sie uns auch einen Blick auf dieses Timing anderer Elemente werfen. Lassen Sie uns zuerst oder ersetzen Sie den Text im Lehrbuch, so dass es Textfunktion hat. Dann haben wir Überschrift eins, die in Bezug auf das Styling für einen Absatz korrekt ist, das ist wirklich ein besonderer Absatz auf unserer Seite. Also werde ich eine andere Klasse nur für diesen Absatz erstellen. Ich möchte es im Styleguide verwenden, weil es nur eine Instanz solcher Texte auf dem Block ist. Also das ist blockieren Sie Ihren Auszug, und lassen Sie uns die Marge 12 und 24 für dieses Element Asper unser Design haben. Sowie Schriftgewicht wären 400 Normale DM Sounds. Und die Schriftfarbe ist sehr spezifische Farbe. Wir haben es noch nicht im Styleguide, aber dies ist wieder nur eine Instanz dieses Elements. Also werden wir es einfach so haben. Wir können es später als Muster oder vielleicht die Farbe verwenden , die nahe genug aus dem Styleguide zu dieser spezifischen grauen Farbe ist. Moment lassen wir es so, wie es ist und konzentrieren wir uns auf die Funktion Tiktok oben auf der Überschrift. Dies sollte neu gestaltet werden und wir haben bereits eine Untertitelklasse, die wir hier verwenden können. Also lassen Sie uns es auswählen und dies wird uns alle Schrifteigenschaften geben. Und darüber hinaus werde ich ein universelles Glas für alle Elemente wie diese erstellen , weil dieses kleine Feature Sache und dann Design als oder Kategorien und all diese kleinen Rechnungen sind wirklich ähnlich. Lassen Sie uns also eine andere Klasse auf Korruption erstellen. Und das wäre blockiert. Ok, und wir müssen sein Layout in Inline-Block ändern , so dass wir einige Padding und Ränder hinzufügen können. Was ich tun möchte, ist acht Pixel-Polsterung von der linken und rechten Seite hinzuzufügen. Und ich drücke und halte Option auf Mac, um vier Pixel-Polsterung von oben und unten und Aspirin hinzuzufügen , dass Design und für den Grenzradius werden vier Pixel dort verwenden, sowie die Hintergrundfarbe ändern. Und das ist auch eine sehr spezifische Farbe, die ich noch nicht habe. Und der Styleguide, also kann ich es einfach so mit dem Hex-Wert für jetzt. Also haben wir diesen Fliesenverlauf, ich denke, das ist es für die linke Seite unserer Sammlungslisten. Also haben wir Blockhelden, der fast fertig ist. Jetzt können wir den Text aus unserer Sammlung beziehen. Lassen Sie uns diesen GetText aus Blogbeiträgen auswählen. Und hier haben wir Sammlung Kategorie verknüpft. Wir verwenden keine Daten aus Kategorien, aber Sie können sehen, dass diese Daten vorhanden sind. Wir werden diesen einfachen Namen und Auszug aus dem Blogbeitrag selbst verwenden. Also für die Einstellungen dieses Blockhelden-Auszug auch, werden wir dynamische Daten aus unserer Sammlung verwenden. Und hier haben wir den Titel und den Auszug bereit. Lassen Sie uns etwas Polsterung hinzufügen. Ich werde Shift halten, so dass ich 38 Pixel Polsterung im gesamten Block Held hinzufügen kann . Und ein Element ist jetzt fertig. Jetzt müssen wir ein anderes Element erstellen. Dies ist bereits Flexbox. Wenn wir also einen weiteren d-Block innerhalb des Lean-Blocks hinzufügen, wird dies Hero Loci Hero Image Wrapper sein. Es wird automatisch auf der rechten Seite platziert und wir haben unsere Photonenseite. Drücken wir also ein und fügen Sie hier ein Bild hinzu. Und dann werden wir dieses Bild auch von Blogbeiträgen bekommen. Wir haben das Bildfeld darin, also wählen wir dieses Feld aus. Wir haben zwei Bilder, ein Quadrat und dieses 16 mal 9 Auflösung Bild. Wir werden diese auswählen und wir brauchen eine andere Klasse für dieses Bild. Lassen Sie uns Block Held Bild und ändern einige Eigenschaften, vor allem die Höhe. Wir werden 100% Höhe verwenden und müssen die Füße so eingestellt werden, dass sie abdecken. Also, wenn wir es für Feld haben, lasst uns, lassen Sie mich zu 100% wechseln. Du wirst sehen, wie es aussieht. Nicht wirklich gut, aber wenn wir zur Deckung wechseln, ist es jetzt wirklich besser. Aber auch wir müssen die Breite definieren. Und die Breite wird eine spezifisch definieren. Laut unserem Design sind dies 650 Pixel. Lassen Sie uns es also so setzen, aber auch wir müssen diese gesamte Struktur breiter machen. Und wir haben einfach zu viel Platz auf der linken und rechten Seite des Layouts in diesem Abschnitt. Also lassen Sie uns jetzt zu diesem Abschnitt wechseln und definieren seinen Namen kann Abschnitt Buch Held sein. Das ist in Ordnung. Und jetzt lassen Sie uns den Rand auf 120 Pixel von oben und auch 120 von unten setzen. Und für den Container innerhalb dieses Elements werden wir das Maximum setzen. Wir machen 1282 Pixel wie wir haben, und das Design muss dasselbe für den Menü-Container tun. Lassen Sie uns also einen Container auswählen, um seinen Namen so zu ändern, dass er sinnvoller ist. Dies ist Blockmenü-Container. Und auch, lassen Sie uns die maximale Wartezeit auf 12 802 Pixel setzen. Das war's. Jetzt sieht es so viel besser aus, aber 40 hat die falsche Breite, obwohl wir es explizit auf 650 gesagt haben, etwas überschreibt diese Breite. Und wenn wir einen Blick auf den Link-Block werfen, wird er durch Fakten darauf gesetzt. Und das ist, warum es Kinder wie Block Euro und Block Held Bild hat diese Flex Kind Eigenschaften. Und wenn Sie einen Blick auf die Dimensionierung werfen, können wir sie so einstellen, dass sie bei Bedarf verkleinert wird, und wir können sie auch erweitern. So wachsen, wenn möglich, sowie nicht schrumpfen oder wachsen. Also diese Eigenschaft nicht schrumpfen oder wachsen ist die richtige Eigenschaft, um auf unser Blockheldenbild gesetzt zu werden. Es hat die richtige Größe, aber wir müssen es so einstellen, dass es nur in dieser Größe angezeigt wird. Und für unseren Blockheld können wir es so lassen, wie es ist, oder wir können sogar seine Größe ändern, so dass es wächst, wenn möglich. Das ist es also. Wir haben, dieses Element ist bereit und wir haben alle Daten aus dem CMS bezogen. Wir haben noch einige kleinere Verbesserungen, wie die abgerundeten Ecken für das Foto. Wählen wir das Blockheldenbild aus, und teilen wir die Werte für den Radius. Stellen Sie 12 Spitzen des Radius in die obere rechte Ecke und unten rechts ein. Und das sieht ziemlich gut aus wie in unserem Design, aber wir haben immer noch diese Tablet- und Mobilversionen zu optimieren. Und ich werde nicht wirklich viel Zeit dort verbringen, weil ich das Gefühl habe , dass Sie es bereits von ortho Grundkurs kennen. Wenn Sie dies nicht tun, empfehle ich Ihnen wirklich, den Kurs zu überprüfen, aber lassen Sie mich nur ein paar schnelle Verbesserungen erstellen , so dass es auf verschiedenen Geräten ziemlich genau aussieht. Jetzt für einen Buchhelden fühle ich, dass diese Polsterung auf Tablets kleiner sein kann. wir also die Umschalttaste gedrückt, um die Polsterung zu ändern. Und auch für die Speisekarte, denke ich, dass es so viel besser wäre, wenn wir das Menü zentrieren. Das ist also alles Flexbox, wir können es einfach in der Mitte rechtfertigen. Und jetzt wird es auch in den Haltepunkten hier zentriert sein. Lassen Sie mich also diesen Verknüpfungsblock auswählen und die Richtung in vertikal ändern, sowie die Position ändern. Lassen Sie uns das Bild und den Titel umkehren , so dass wir das Bild auswählen und seine Eigenschaften ändern können. Lassen Sie uns die Breite auf 650 zurücksetzen. Und dann lassen Sie uns auch die Eigenschaften für die abgerundeten Ecken ändern, so dass wir diesen oberen und oberen linken, oberen rechten Eckenradius auf 12 gesetzt haben. Und nach einigen schnellen Korrekturen denke ich, dass wir das ziemlich genau für alle Geräte und alle Auflösungen und die wichtigsten dynamischen Daten haben. Also sehe ich dich in der nächsten Lektion. 13. Aktuelle Artikel: In dieser Lektion konzentrieren wir uns auf die Struktur der letzten Artikel. Und diese Struktur wird in allen Kategorien kopiert. Also haben wir die letzten Artikel aus dem Software-Marketing und allen anderen Kategorien. Und oben werden wir nur alle Kategorien und alle letzten Beiträge aufgelistet haben. Also lassen Sie uns diesen Abschnitt aussehen Held, wie es ist. Dies ist super spezifisch und dies ist nur eine Instanz. Wählen wir stattdessen den Körper aus und erstellen Sie einen weiteren Abschnitt, der den Container für dieses spezifische Element enthält, das für alle wiederverwendbar sein könnte, für alle anderen Abschnitte. Also werde ich ihm einfach einen Namensbuch Kategorie Abschnitt geben. Lassen Sie uns nun einige grundlegende Eigenschaften für den Abstand festlegen. Wir werden Marge benutzen. Lassen Sie uns den Rand auf 100 Pixel oben setzen. Und jetzt in diesem Buch Kategorie Abschnitt wird Container haben. im Container wie gewohnt Ändern wirim Container wie gewohntdie maximale Breite dieses Containers auf 1282 Pixel. Und dieser Container dafür wird Block-Content-Container sein. Und wir werden es auch in allen anderen Abschnitten verwenden. Wir lassen die Anzeige flexibel sein, stellen sie auf vertikal und richten sie aus und richten sie auf Mitte und Mitte aus. Jetzt von den Symbolen, werden wir diesen Header-Abschnitt haben, den wir verwenden können. Und im Header-Abschnitt haben wir einige Überschreibungen, die wir für den Text sowie Überschrift und Beschreibung vornehmen können. Also die erste überschreiben wie aus dem Blog, dann haben wir diesen Text und zur Beschreibung werden wir es einfach ganz löschen. Und jetzt ist dieser Beschreibungstext als Container sichtbar, aber nur im Designer. Es wird nicht wirklich machbar sein. Die veröffentlichte Seite. Also, jetzt drücke ich ein, Ich füge die Sammlung am wenigsten Wrapper hinzu und es wird bald auf alle unsere Blog-Posts verlinkt werden. Aber jetzt lassen Sie uns die Sammlung am wenigsten auswählen. Also dieser mittlere Behälter, und lasst es uns neu gestalten. Also werde ich die Klasse Blogkarten am wenigsten hinzufügen und seinen dSpace hinzufügen, so dass wir vereinbart haben, dass wir Flexbox leicht verwenden können. Aber zu diesem Zweck denke ich, dass Gitter auch wirklich großartig ist, so dass wir leicht die Lücke zwischen den Elementen ändern können. Lassen Sie uns also auf 24 setzen, wie in unserem Layout in XD. Und wir brauchen auch eine weitere Spalte. Wir brauchen drei Spalten und nur eine Reihe. Ok, jetzt haben wir die Struktur 40 Elemente. Schließen wir diesen Gruß. Auch für die Verteilung werden wir diese Einstellungen Standard belassen und lassen Sie uns auf dieses Element doppelklicken, um es mit seiner Quelle zu verbinden. Das werden Blog-Beiträge sein. Jetzt müssen wir nur noch die Anzahl der Blogbeiträge begrenzen. Also für die Buchkarten, die Einstellungen haben wir die Quelle gesetzt, um Blog-Beiträge. Was wir tun müssen, ist, die Gegenstände zu begrenzen, und wir brauchen nur drei Artikel hier drin. Außerdem, led, erstellen Sie die Sortierreihenfolge, so dass dies nur die neuesten Artikel sind. Also werden wir die veröffentlichten auf setzen und die Artikel so einstellen, dass wir bestellen, neueste bis älteste Reihenfolge. Lassen Sie uns nun die Einstellungen für griechische untergeordnete Elemente festlegen. So nach unten auf die Ausrichtung eingestellt ist, um zu dehnen. Und wir haben den Inhalt, der sich von links nach rechts erstreckt. Und in diesem Sammlungselement müssen wir auch die Elemente hinzufügen, die dynamische Daten anzeigen. Wieder werden wir zuerst Link-Block hinzufügen und ihn dynamisch mit dem aktuellen Blog-Beitrag verknüpfen. Dies wird der Blog-Beitrag sein, der von diesem Filter zurückgegeben wird, den wir erstellt haben. Und es wird automatisch verknüpfen. So wird der ganze Warenkorb zu diesem Beitrag führen. Jetzt lasst uns eine Klasse dafür haben. Das ist also Blockkarte und auch Block Card Collection Element als übergeordnetes Element. Nun lassen Sie uns den Inhalt hinzufügen. Der Block, Karten-Link-Block, und wir werden ein paar Informationen haben und verwerfen. Lassen Sie uns zuerst den Blog erstellen, und dies wird alle unsere Tags enthalten. Lassen Sie uns also einen Namen Tags, Wrapper und InDesign geben. Wir haben hier ein oder zwei Steuern. Also werden wir ein Lehrbuch erstellen und es dann duplizieren. So wird der erste Elemente vorgestellt werden, also Informationen über vorgestellte Beiträge. Und die zweite wäre die Information über die Kategorie. Jetzt ein weiterer Debug, der das Bild enthält. Also das ist Cards Bild Container. Und im Inneren fügen wir ein Bildelement hinzu. Und wir werden es in einer Sekunde mit unseren Blogbeiträgen verknüpfen. Aber zuerst konzentrieren wir uns auf das Styling. Dies ist ein Kartenbild, also lassen Sie uns diese Klasse anwenden. Ein weiterer d-block enthält die Informationen über den Titel und den Auszug. Und normalerweise, bevor ich irgendwelche dynamischen Inhalte hinzufüge, beginne ich mit dem Styling. Also lasst uns Kommentar drehen. Dieser Klassenname Kartentext. In diesem Zusammenhang werden auch zwei weitere technische Urlaubblöcke haben. Die erste wird unseren Titel halten. Also komm auf, um zurückzukehren. Geben Sie ihm einen Klassennamen, Kartentitel. Und auch wir werden einen weiteren d-Block haben und das wäre Kartenfuß, Befehl return oder geben Sie die Namenskarte Fußzeile ein. Die Struktur der Karte ist also ein bisschen komplex, aber sobald wir es haben, wird es nur eine Kartenstruktur erstellen und dann wird es automatisch dupliziert, so dass wir Überschriften überall haben. Die sind frei. Kostenlose Überschriften werden auch Absätze haben und wir werden sie ein wenig später neu formatieren. Also haben wir hier einen Auszug gemacht. Und für die Kartenfußzeile werden wir auch ein Lehrbuch hinzufügen. Und das ermöglicht es uns, nur drei Informationen über den Autor sowie den Link zu unseren Beiträgen zu haben . Also zuerst geben wir ihm eine Namenskarte, Autor, der zweite Text doc-Befehl zurück. Dies ist ein Warenkorb-Trennzeichen, nur ein einfaches grafisches Element, das ein wenig später hinzugefügt wird. Und auch Kartenkategorie, die wir ganz unten haben werden. Also hier ist es, die gesamte Struktur einer Karte. Jetzt brauchen wir alles, was wir hier als einige dynamische Daten. Beginnen wir also von unserer Überschrift drei, und das ist der Titel des Artikels. Also holen Sie sich Texte von Blog-Posts und wir brauchen den Namen. Okay, das ist also super-einfach. Jetzt der Auszug und hier Tage der Auszug und auch wir haben einen Outdoor-Sammlung Link zu den Blog-Posts. Wenn Sie also zu den Einstellungen dieses Lehrbuchs gehen, können Sie es mit dem Namen des Autors verknüpfen. Und dann werde ich Just in und dann den Namen der Kategorie setzen. So können wir in dieser Kategorie auch den Namen der Kategorie auswählen, da wieder Kategorien mit unserer Blog-Post-Sammlung verknüpft sind. Deshalb können wir die Informationen von hier bekommen. Auch hier werden wir 16 mal neun Bilder verwenden und diese werden direkt aus dieser Sammlung verlinkt. Und wir müssen das Feature-Element, Feature-Elemente verknüpfen. Also lassen Sie uns den Namen ändern, so gut wie dies wird nur aus dem Tag-Namen genommen werden. Das ist also so konzipiert. Die zweite ist die Entwicklung und die dritte, Typografie. Diese Aufgaben sind auch mit unserem Blogbeitrag verknüpft. Jetzt lasst uns neu gestaltetes Element. Es hat beschriftet und block-Tag-Klasse und gilt für beide Lehrbücher. Also zuerst Beschriftung und dann Befehl Rückkehr noch einmal oder diskrete Daten und wählen Sie Block-Tag. Dasselbe gilt für den anderen Tiktok, der das einfängt. Und als nächstes werden wir Block-Tag als Combo-Klasse auswählen. Aber hier, was wir tun möchten, ist, die Farbe dieser Kategorie dynamisch zu beziehen. Und nur damit Sie sich erinnern, wir haben diese Farben für jedes Tag definiert und in den dynamischen Stileinstellungen für diese Beschriftung können wir diese Hintergrundfarbe von erhalten. Und das ist die taktische oder ist mit unseren Blog-Posts verlinkt. Also ist es hier verfügbar. Jetzt, wie Sie sehen können, Design-Entwicklung und Typografie. Sie haben Hintergrundfarben, die aus der Farbe stammen, die wir im CMS und in der Zielsammlung angegeben haben . Nun möchte ich entscheiden, ob es sich um eine Bildunterschrift handelt, die angezeigt werden soll oder nicht. Gehen wir also zu diesen Blockeinstellungen. Und dann können wir in bedingter Sichtbarkeit die Bedingung hinzufügen. Wir wollen also überprüfen, ob das Featured Flag auf besitzen gesetzt ist und nur unter dieser Bedingung das Featured Element vorhanden ist. So haben wir jetzt die Struktur für unsere Karten sowie eine dynamische Datenquelle aus dem CMS. In der nächsten Lektion führen wir diese Wahl durch. Wir sehen uns dort. 14. Kartenstile: Hallo, Willkommen bei der nächsten Lektion. Und in diesem hier möchte ich Ihnen zeigen, wie Sie Elemente in unserer Blockkarte stylen. Nun, das ist Lektion vom Styling. Also, wenn Sie das Styling bereits aus dem vorherigen Kurs kennen, oder Sie fühlen sich einfach Meister im Styling, müssen Sie sich diese Lektion nicht wirklich ansehen, aber ich zeige Ihnen gerne einige Tipps und Tricks in Bezug auf das Styling dieser Blockkarte. Dies ist das wichtigste Element in unserem Blog weil diese Karten auf vielen verschiedenen Seiten vorhanden sein werden. Also lasst uns versuchen, es zu tun, oder? Also haben wir hier einen Block Cart drin. Und für die Eigenschaften dieses Elements möchte ich die Anzeige zuerst auf Flex setzen damit wir Elemente innerhalb dieses Wrappers ausrichten können. Lassen Sie uns die Richtung in vertikal ändern, so dass Elemente übereinander stapeln und dann haben wir die Ausrichtung auf Strecken gesetzt. Ich werde gerechtfertigt lassen, wie es ist, aber gehen wir zu Größe und Position. Nun, was wir tun wollen, ist der erste Tag des Überflusses der Elemente. Ich werde den Überlauf auf versteckt setzen , falls irgendetwas außerhalb der Begrenzungsbox dieser Blockkarte liegt. Und das ist ziemlich wichtig. Ich werde die Position auf relativ setzen. Und das liegt vor allem daran, dass ich unsere Tags positionieren möchte, die hier im Inneren dieser Blockkarte vorkommen und designen. Und ich werde sie veraltet positionieren. Gehen wir nun zu einigen Einstellungen für den Hintergrund und ändern Sie die Hintergrundfarbe in Weiß. Dies ist unsere Marke 06 Farbe. Und auch werde ich einen Grenzradius von 12 Pixeln haben. Und für den Kastenschatten möchte ich einen subtilen Schatten hinzufügen und ihn für 180 Winkel belassen. Die Entfernung wäre 15. Und dann werde ich 30 Pixel Bär oder 35 vielleicht anwenden. Aber ich werde die Deckkraft der schwarzen Farbe senken. Gehen wir also zu Alpha hier und setzen Sie es auf fünf oder 7%. Und ja, das ist der Schatten, den ich gerne unter meinen Karten haben würde. Lassen Sie uns nun sicherstellen, dass wir gröberer auf Zeiger in diesem gesamten Blockkartenelement gesetzt haben. Wenn der Benutzer den Mauszeiger über dieses Element bewegt, weiß er, dass dies ein Link ist. Und lasst uns zum Steuerpacker gehen. Daher möchten wir diese Tags innerhalb des Protokollteile-Elements positionieren , das bereits relativ positioniert ist. Also alles, was wir ändern müssen, ist die Position des Steuerpackers zu absoluten. Also, jetzt haben wir diese Elemente ausgerichtet und Steuerpacker ist innerhalb des Blockkartenelements positioniert, das relativ ist. Jetzt für den Steuergummi werde ich den Abstand von oben und links einstellen, aber lass uns zuerst oben links ausrichten und dann den Abstand ändern. Ich werde 16 und Px eingeben. Also werde ich es von Prozentsätzen zu Pixeln ändern. Dies wird 16 Pixel oben und 16 Pixel linksbündig sein. Also werde ich auch diesen Z-Index setzen nur um sicherzustellen, dass Sie diese Tags immer sehen können. Und ich muss eine der Beschriftungen auswählen und auch einen winzigen Rand festlegen, zum Beispiel vier Pixel, damit ich die Elemente voneinander verteilen kann. Jetzt wird das interessant sein. Wählen wir das Kartenbild aus und lassen Sie uns Kartenbild erstellen, das vollständig über das Element verteilt ist , das Elemente enthält. So haben wir Weizen und Höhe auf 100% eingestellt. Und dann die fünfte Eigenschaft werde ich gehen und ich werde es zu decken. Nun der wichtigste Teil, was wir tun möchten, ist, die Position dieses Elements von statisch zu absolut zu ändern. Dies wird absolut positioniert sein. Die volle Größe der übergeordneten Elemente. Also ändere ich es zu voll, so dass es über alle Grenzen verteilt ist. Und eigene Karten, Bild-Container, die das direkte Elternteil dieser Karte Bild ist. Ich werde die Positionierung so einstellen, dass sie relativ ist. Um sicherzustellen, dass dieser Kostenbildcontainer die richtige Breite hat, ändere ich seine Breite in 100% seines übergeordneten Elements. Und jetzt, dank dieser Magie, können Sie die Polsterung auf diesem Kartenbildcontainer ändern, und dann wird es den Teil des Bildes enthüllen, den Sie zeigen möchten. Nun, wenn Sie Hunderte Pixelhöhe dieses Bildes haben möchten, können Sie einfach Padding auf 200 setzen oder Sie können es in, sagen wir, 54% ändern, um relative Werte zu haben, die Ihnen eine bessere Reaktionsfähigkeit dieses Elements geben. Und diese Struktur des aktuellen Elements ist wirklich cool in Bezug auf die Carter reagiert über alle Haltepunkte und Dinge wie das. Also denke ich, dass dies hilfreich sein könnte. Und jetzt für die anderen Elemente, für unsere Kartentexte, haben wir Titel innen und Überschrift und Absatz. Lassen Sie uns das Layout ändern, um wieder zu biegen und die Richtung auf vertikal zu wechseln. Für die Ausrichtung werden Sie es so lassen, wie es ist. Aber um zu Recht den Raum zu verlassen, werden wir Raum zwischen setzen, so dass wir es schön über die Elemente im Inneren verteilen können . Und dann möchte ich diesen Absatz innerhalb ändern. Lassen Sie mich zuerst den Hintergrund ändern, ich muss die Hintergrundfarbe auf Weiß setzen oder eine meiner vordefinierten Farben auswählen. Aber was jetzt wichtiger ist, werde ich die Eigenschaften dieses Absatzes so einstellen, dass ich ein wenig mehr Abstand zwischen der Überschrift und dem Absatz haben kann. Lassen Sie uns Command Return drücken und eine separate Klasse für diesen Absatz erstellen. Dies ist eine Art wie ein spezieller Absatz für uns. Lassen Sie uns also eine Karte Auszug Klasse erstellen, die wir einen Rand anwenden können, oberen Rand von acht Pixeln zu. Und lassen Sie uns auch einige andere Eigenschaften wie Topografieeigenschaften ändern. Wir haben diese Farbe auf eine unserer übergeordneten Farben gesetzt und wir wollen es in eine graue Farbe ändern. Und wir können natürlich, wissen Sie, einen Hexadezimalwert eingeben. Aber was wir auch tun können, ist unsere vordefinierten Farbfelder zu verwenden. Und es ist immer besser, nur die Farben zu verwenden, die wir im System haben. So zum Beispiel diese dunkelgraue Farbe, anstatt eine neue zu erstellen. Oder wenn Sie ein neues erstellen, denken Sie daran, es in unserem Styleguide zu behalten , damit wir konsequent in unserem Design verwendet werden können. Jetzt kümmern wir uns um Kartenmappe. Wir haben Kartenautor, Separator und Kategorie. Alle von ihnen haben separate Klassen. Und was ich gerne mache, ist die Inline-Block-Eigenschaft vier zu setzen, alle, weil ich sie in einer Zeile behalten möchte, und Inline-Block wird mir helfen, das zu erreichen. Alles, was ich tun muss, ist für diese Karte Separator, ich werde den Rand auf der linken und rechten Seite setzen. Also lassen Sie uns drücken und halten Option auf Mac und 6,5 Pixel oder vier Pixel Rand. Und hier muss ich einige Eigenschaften ändern , die die Textgröße auf 10 ändern und dann auf 13 ausblenden. Wir werden die gleichen Eigenschaften für Warenkorb-Separator und Kartenautor in Bezug auf Topographie haben. Also werden wir es in ein silbernes Musterfeld umwandeln. Und jetzt, wenn ich es mir anschaue, denke ich, dass es etwas dunkler sein sollte, damit wir mehr Kontrast zwischen haben. Der Hintergrund und der Autor und die für diese Kategorie, wir werden die Größe ändern, aber wir werden die Farbe als S belassen, weil dies der Link zu der Kategorie sein wird. Von diesem Link könnte jemand einfach auf den Link klicken und zur Kategorie gehen. Und dieser Link könnte sein, wie überschreiben Sie den Link, den wir als Blockkarte haben. Jetzt habe ich den Rand etwas geändert, so dass sie kleiner sind und ich denke, dass unsere Karten fast fertig sind. Nun, wir müssen sicherstellen, dass dieser Buchwagen-Sammlung Artikel hat das Layout auf Flex gesetzt. Und dann für die Ausrichtung der Elemente möchten wir die Ausrichtung ändern, um zu dehnen. Und dank dessen werden wir die Karten haben, die von oben nach unten des Block-Kartensammlungsgegenstandes verteilt werden . Und die Höhe des Hintergrunds ist gleich. Wir haben vier Zeilen hier, wir haben drei Zeilen dort. Und alles sieht gut aus. Wir werden die Position des anderen in einer Sekunde fixieren. Aber was ich tun möchte, ist nur eine Vorschau dieser Elemente auf mobilen Ansichten auf dem Tablet. Und wir können bereits sehen, dass dies ein bisschen zu voll ist, vor allem in der kleineren Tablettengröße. Was wir also gerne tun möchten, ist wahrscheinlich auf dem Tablet, ändern Sie das Layout, dass wir nur eine Karte in Folge haben. Aber zuerst bemerkte ich, dass wir diese Arthur und hier und Abschnitt haben und nicht richtig an der Unterseite dieses Elements ausgerichtet. Und das liegt wahrscheinlich an diesem Kartentext-Container, der sich nicht auf die gesamte Höhe des übergeordneten Elements ausbreitet. Dies ist also ziemlich einfach zu beheben, weil das übergeordnete Element, so dass diese Blockkarte das Layout auf Fakten in Richtung horizontal gesetzt hat. Dank dessen können wir die Größe jedes Kindes so einstellen, dass es wächst. Aber ich werde es in der Desktop-Ansicht tun, so dass ich diese Eigenschaft an alle Haltepunkte geerbt habe. Lassen Sie uns die Flex-Größe dieses Elements ändern, um den Kartentext zu wachsen. Und jetzt können Sie sehen, dass alles in Ordnung ist. Wir haben den Autor und auch Kategorie am unteren Rand des Warenkorbs angezeigt. Nun lassen Sie uns Block Carts am wenigsten auswählen, was vereinbart ist. Ich werde zwei Spalten löschen. Ich werde nur eine Spalte von Tablet zu Handy, horizontal und Hochformat lassen. Und wir wollen eine Art Marge oder Polsterung anwenden. Jetzt können wir dies eine Marge anwenden, um Karten am wenigsten zu blockieren, aber ich denke, es wäre besser, dies einfach auf den gesamten Content-Container anzuwenden. Und dieser Content-Container wird in unserem Design wiederholt werden und von Tablet unten werden wir nur eine Polsterung dieses Containers auf 12 Pixel setzen. So dass wir auf mobilen Geräten ein wenig Polsterung auf der linken und rechten Seite haben. Also ich denke, wir sind damit fertig, aber wir können jetzt leicht den Warenkorb Bild Container Padding ändern. Also, Papa, auf verschiedenen Geräten haben wir unterschiedliche Größe des Fotos. Und dank diesem kleinen Trick, den wir mit der Polsterung gemacht haben, können Sie sehen, dass es super einfach ist, die Größe dieses Fotos zu ändern. Und zum Beispiel, auf dieser mobilen Ansicht, wenn es zu klein ist, können wir einfach größere Polsterung anwenden und hier haben wir es. Dies ist also eine Möglichkeit, Bulletproof Blogkarten in Webflow zu erstellen. Wahrscheinlich gibt es eine Million andere Möglichkeiten, wie Sie sich dem nähern können, aber ich denke, das sind ziemlich gute Lösungen, also ermutige ich Sie, es auszuprobieren und ich sehe Sie in der nächsten Lektion. 15. Main: Hallo an alle, Willkommen zur nächsten Lektion. In diesem, möchte ich Abschnitte für alle Elemente Buch Kategorie Abschnitte erstellen , die wir in der Kategorie haben. So Software-Marketing, Mobilfunk und Doktrin. Ich möchte eine kostenlose Beiträge jeder Kategorie anzeigen. Und dann, was ich jetzt mache, ist das Hinzufügen eines div. Und innerhalb dieses div füge ich diese Schaltfläche groß hinzu, so dass ich zu allen Artikeln aus dieser bestimmten Kategorie verlinken kann . Oder in diesem Fall haben wir aktuelle Artikel. Ich möchte einfach auf alle Artikel in meinem Blog verlinken. Also habe ich diesen zusätzlichen Knopf. Ich werde diesem d-block einen Klassennamen eines CTA-Button Wrapper geben und vielleicht einige Eigenschaften wie Marge hinzufügen oder vielleicht haben Sie etwas Padding innerhalb dieses CTA-Button Wrapper. Und für die Einstellungen des Buttons, was ich möchte, ist es wie der Buttonwood, den ich gerne tun würde, die Texte zu ändern, um anzuzeigen, in diesem Fall alle Artikel. Und als Link-Typ werde ich die Seite auswählen, die wir benötigen, um eine bestimmte Seite zu verknüpfen. In diesem speziellen Fall müssen wir alle Beiträge blockieren auswählen. Und das wird nur alle Beiträge aus dem letzten Artikelabschnitt anzeigen. Aber für alle anderen Abschnitte, wie Kategorien, Software-Marketing und Mobile, werde ich auf die spezifische Kategorie verlinken. Also, was ich tun kann, wenn ich dieses Boilerplate dieses letzten Artikels Abschnitt habe, kann ich es einfach ein paar Mal kopieren und einfügen. Wir haben Software-Marketing, mobile und Blockchain. So können wir es einfach viermal einfügen und fünf Abschnitte erstellen. für den ersten Abschnitt zuerst Lassen Sie unsfür den ersten Abschnitt zuerstan die Einstellungen für diesen Abschnitt denken, und wir haben diesen Titel an der Spitze. Dies ist Header-Abschnitt, und dies ist ein Symbol. Also, wenn ich in das Symbol gehe und es so ändere , dass es dynamisch zu einem meiner Abschnitte von CS verknüpft. Es wird in allen Instanzen gleich sein. Also muss ich zuerst mit der rechten Maustaste klicken und ich muss dieses Symbol, das Symbol, aufheben. Drücken Sie also Befehlstaste, Umschalttaste ein oder einfach nur unverknüpft wie so. Jetzt kann ich die Eigenschaften bearbeiten, ohne sich Sorgen zu machen , dass sie sich überall in jedem Symbol ändern. Ich kann offensichtlich das Styling ändern und die Header-Abschnittsklasse wird durch alle Header-Abschnitte konsistent bleiben. Die Tatsache, dass ich das Symbol tatsächlich zerstört habe, ist nicht so relevant, weil wir immer noch die gleichen Klassen für alle Überschriften haben und sie diese Eigenschaften erben werden. Also, was wir hier haben wollen, ist wahrscheinlich Blockchain, richtig? Und wie können wir erstellen, wie wir diese Kategorie zu verknüpfen, diesen Header-Abschnitt. Nun, das ist ziemlich kompliziert, weil wir eine Sammlung am wenigsten Robert Wright erstellen können. Und dann logisch wäre es, mit Geschichten zu verknüpfen. Für diese Kategorien wissen wir jedoch nicht wirklich, welche wir hier auswählen können, wir wissen nicht wirklich, welche Beiträge unten angezeigt werden. Wir können natürlich die Artikel auf eins beschränken, so dass wir nur eine Kategorie haben. Und was wir tun können, ist wahrscheinlich filtern diese Kategorie so, dass sie die genaue Kategorie zeigt, die wir sehen wollen. Der erste Weg, dies zu tun, ist vielleicht die Sortierreihenfolge so zu ändern , dass es nur erstellt oder aktualisiert wird oder so. Lasst uns das Neueste zum Ältesten haben. Und jetzt haben wir Software hier, und das ist einfach, weil Software die neueste Kategorie in CMS ist. Wenn wir zu CMS-Kategorien gehen, sehen Sie, dass Software an der Spitze ist, und das ist nur, warum es so angezeigt wird. Das ist also nicht wirklich der beste Weg, um dies anzugehen, denn es ist immer noch nicht Link zu den Blog-Post-Artikeln, die wir haben. Und das zweite Sammlungselement. Und übrigens, diese Überschrift in dieser Sammlung am wenigsten Wrapper mit Blogbeiträgen zu setzen , ist nicht wirklich gute Idee, weil wir filtern müssten. Wir haben drei Beiträge, so dass es nur drei Titel angezeigt werden. Dann müssten wir noch zwei loswerden. Manchmal ist es einfach besser, separate Sammlungen zu erstellen, aber wir müssen einen Weg finden, diese Sammlungen miteinander zu verknüpfen. Okay, aber davor wir einen Blick auf den Sammlungslisten-Wrapper unserer Blockkartenlisten. Und für das Sammlungselement, Lassen Sie uns den Filter so einstellen, dass wir wirklich Filter angewendet haben, so dass wir wirklich Blog-Beiträge aus einer der Kategorien haben. Also werden wir das nach Kategorie füllen. Und wir sind Kategorie gleich Software, sagen wir, oder wir können aus diesem Drop-down-Menü jede andere Kategorie auswählen, die wir haben, zum Beispiel, Marketing mobile oder Blockkette. Lasst uns das retten. Und jetzt haben wir hier Blockchain-Artikel. Wenn wir mehr Artikel und Doktrin haben bis zu drei Elemente. Und das ist kugelsicher. Das ist wirklich großartig, denn wenn zum Beispiel jemand den Namen der Kategorie in Blockchain-Artikel oder Seminar ändert , wird es immer noch dynamisch sein und es wird funktionieren. Jetzt müssen wir einen Weg finden, diese Blockchain mit unserem Sammlungsartikel mit dem Titel zu verknüpfen . Und wir könnten es potenziell mit den Filtern machen. Wenn wir hier einen Filter hinzufügen, können wir natürlich die Kategorie mit dem Namen auswählen, der gleich ist. Und wir können eingeben, wir können einfach den Namen der Kategorie eingeben. Also haben wir hier Blockchain und funktionieren offensichtlich. Nun, wenn wir den Titel in diese Kategorie verschieben und wir können einfach die Sortierreihenfolge löschen. Und ja, wir können, wir müssen die Elemente nicht einschränken, weil wir nur ein Element gefiltert haben , wenn wir diese Überschrift in diese Sammlung verschieben und dann auswählen, Holen Sie sich die Texte aus Kategorien und wir brauchen den Kategorienamen hier haben wir Blockchain. Problem ist, dass dies nicht so sehr kugelsichere Lösung ist, weil das, was wir tun mussten, wie wir explizit gesagt hatten, dass wir die Blockkette als Namen dieser Kategorie wollen. Und was ist, wenn jemand den Namen von Blockchain in Blockchain-Artikel ändert? Wie hier erwähnt, muss der Name gleich sein. Es muss nicht so sein oder so etwas. Es muss gleich sein, was wir hier reingebracht haben. Das ist also wirklich nicht so toll, weil wir es explizit in das Eingabefeld setzen müssen. Was wir anstelle dieses Eingabefeldes gerne haben möchten, möchten wir am wenigsten haben. Denn wenn wir das wenigste haben, erhält Webflow automatisch die richtigen Daten. Und das ist das Mindeste, was wir in der Blog-Post-Sammlung hatten. Also ich denke, dass Sie wahrscheinlich bereits wissen, dass die Lösung für dieses Problem sein könnte. Statt dessen könnte es ein bisschen konterintuitiv sein. Wir wollen Kategorie anzeigen, aber wir wollen Kategorie-Sammlung verwenden, aber stattdessen werden wir die gleiche, die gleiche Sammlung, die wir für die Blockkarten verwendet haben, zumindest weil das, was wir hier haben, ist die Linkkategorie zu diesem Beitrag, die wir aus der Liste auswählen können. Und die Auswahl aus der Liste, wieder, als eine gute Möglichkeit, dies zu erreichen, weil dies bleibt kugelsicher. Und wenn wir oder unsere Kunden etwas im CMS ändern, können wir es ändern. Jetzt. Die Kategorien sind jetzt gesperrt, sodass die Quelle gesperrt ist. Wir können nicht wirklich sagen, dass wir Blogbeiträge hier wollen und warum es gesperrt ist. Nun, Sie müssen verstehen, dass, wenn ein Feld innerhalb dieser Sammlung am wenigsten Wrapper mit einem der Felder in CMS verbunden ist. Dies wird unsere Quelle aussehen und wir können es nicht ändern. Mit anderen Worten, wenn Sie eine lila Verbindungen hier innerhalb dieser Struktur sehen, müssen Sie nur die Elemente aufheben. Also, jetzt habe ich diese GetText aus Kategorien nicht verknüpft. Und wenn ich zu meiner Sammlung am wenigsten Wrapper zurückgehe, kann ich jetzt die Kategorien ändern. Es gibt kein Sperrsymbol mehr hier, also kann ich es in Blogbeiträge ändern. Und dies wird offensichtlich so viele Elemente anzeigen, wie ich Blogbeiträge in meinem CMS habe. Aber das ist kein Problem, weil ich das offensichtlich mit einem Punkt begrenzen kann. Lassen Sie uns ein Element zeigen und beginnen wir bei einem. Und jetzt, dank dieser Verbindung, die ich innerhalb von Blog-Posts habe, dass ich die Kategorien Link zu Blog-Posts habe. Ich kann Kategoriereferenz auswählen, und jetzt kann ich auf die Blockchain-Kategorie verweisen. Und das ist kugelsicher. Jetzt werde ich den Namen haben, den ich verknüpfen kann. Lassen Sie uns den Titel auswählen und Texte aus Blogbeiträgen erhalten. Und hier haben wir die verknüpften Felder. Gehen wir zu Kategorie und lassen Sie uns Kategorienamen verknüpfen. Dies wird immer den gleichen Kategorienamen wie unten für unsere Beiträge angezeigt. Das ist also die beste Lösung. Und die zweite Lösung, der zweite Weg, den Sie denken könnten, dass Sie nur das H1-Element innerhalb dieses Sammlungslisten-Wrapper für Block Cart am wenigsten setzen . Aber wieder, manchmal ist es lästig. Manchmal möchten Sie separate Sammlungen in einem haben, sagen wir Abschnitt. Und Sie möchten diese Verbindungen mit verschiedenen Elementen verknüpfen, jedoch mit einer CMS-Kategorie oder einem CMS-Listenelement verbunden sind. Also hier haben wir es, jetzt ist es fertig. Lassen Sie uns vielleicht diese Lektion aufgeteilt, so dass wir in der nächsten fortfahren und ändern Sie unsere Schaltfläche und auch dupliziert und erstellen Sie eine weitere Kategorien. Wir sehen uns im nächsten Teil. 16. Main Teil Teil Teil: Hallo, Willkommen bei der nächsten Lektion. Wir beginnen genau dort, wo wir im vorherigen aufgehört haben. Und jetzt ist unsere Herausforderung, diesen Button zu haben, um alle Beiträge aus der Kategorie zu verlinken , die wir oben haben. Also oben haben wir Blockchain für jetzt, wir werden es in einer Sekunde in Software ändern, aber wir haben Kategorie und wir wollen es verknüpfen. Und vielleicht wollen wir auch einfach den Namen ändern, so dass wir hier Blockchain-Artikel sehen können. Und Sie wissen, dass, wenn Sie etwas in Webflow, einige Texte, auswählen, Sie offensichtlich eine Spanne erstellen können, um dies in eine Spanne zu wickeln. Jetzt mit einer Spanne können wir eine Sammlung erstellen. Verwenden Sie also die Sammlung und injizieren Sie den Namen der Kategorie hier , so dass wir Blockchain-Artikel oder Ansichten nach Artikeln anzeigen. Also haben wir dieses Textfeld innerhalb der Schaltfläche und CTA-Button Wrapper. In diesem Wrapper, Lassen Sie uns hier positionieren und drücken Sie eine Sammlung mindestens zu erstellen. Dann wollen wir natürlich die Sammlungsliste innerhalb der Stadt setzen, aber auf Wrapper und das Sammlungslistenelement hier drin, werden wir diese Schaltfläche umfassen. Lassen Sie uns zuerst doppelklicken und verbinden Sie dies erneut, wie wir in der vorherigen Lektion erklärt haben, wir wollen diese beiden Kategorien nicht wirklich verbinden. Stattdessen möchten wir eine Verbindung zu Blogbeiträgen herstellen, so dass wir immer diesen Link haben und er mit Kategorien verknüpft ist, damit wir den Namen anzeigen können , der die Elemente zu einem benennt. Und dann filtern wir das so, dass wir den Kategorienamen hier haben, wieder, wie wir es für den Titel getan haben. Wir haben die Auswahl mit Blockchain, also ist es kugelsicher, großartig. Und das Problem wäre, dass es unmöglich ist , diese Sammlung dynamische Daten in Spanne zu verwenden. Aber lassen Sie uns zuerst das untere Ende Sammlungselement setzen. Wenn Sie den Mauszeiger nicht auf und sich selbst positionieren können, wenn es rot ist, ist es manchmal am besten, das Element zu kopieren und einzufügen, anstatt es zu versuchen , es einfach zu verschieben. Also werde ich nur die Schaltfläche kopieren und dann auf das Sammlungselement selbst klicken und es mit Befehl V einfügen Jetzt ist es drin und Sie können den alten löschen. Also lassen Sie es uns auswählen und löschen. Normalerweise mache ich es, wenn ich mich und den Navigator nicht wirklich positionieren kann . Und jetzt haben wir diese Textspanne und theoretisch ist es in der Sammlung und dem Sammlungsstück. Es sollte die Quelle der Daten haben, die wir in CMS haben, aber es ist einfach nicht, also, oh, hat es vorerst nicht. Vielleicht wird es in Ihrer Version von Webflow, einigen neuen Releases, behoben. Aber im Moment kann ich mich nicht wirklich nur auf eine Spanne bewerben. Stattdessen könnte ich dies offensichtlich auf das große Element des Knopfes anwenden und den Text aus dem Namen des Blogbeitrags und dem Sammlungsnamen erhalten. Und hier haben wir Blockchain, aber es ist nicht wirklich intuitiv. Es sollte sagen, Alle Blockchain-Artikel anzeigen oder Blockchain-Artikel anstelle von nur Blockchain anzeigen. Was ich also tun kann, ist einfach die Struktur dieser Schaltfläche in einem Linkblock neu zu erstellen. Lassen Sie uns also einen Link-Block auswählen und erstellen. Und lassen Sie uns den Boden mit den richtigen Elementen neu erstellen. Also richtige Lehrbücher, die wir erstellen werden, haben ein Lehrbuch, in dem wir sagen werden. Eine Ansicht und dann haben wir die dynamischen Daten aus der Sammlung kommen. Und dann haben wir noch ein Lehrbuch. Also das ist, sagen wir hier, gehen wir zum Styling und setzen Sie den Inline-Block, bevor wir einen anderen einfügen, weil wir kopieren und einfügen wollen und wir wollen es in einer Zeile haben, so dass es am besten ist, es zuerst anzuwenden. Und es wird Sammlungsname geben, also XXX für ab und zu wird es Blockchain-Artikel anzeigen. Und jetzt muss ich diesen Link haben. Ja, lassen Sie uns das mit Blog-Posts verbinden. Und dann verbinden wir dies mit dem Kategorienamen. Das sollte die Blockkette richtig anzeigen. Außerdem muss ich einen Tippfehler korrigieren und ich muss einige Klassen anwenden, wahrscheinlich hier haben wir den Link-Block ohne die Klasse, wir müssen wahrscheinlich die Buttonklasse verwenden. Also lassen Sie uns Taste große Klasse verwenden, und dies wird automatisch eine schöne Schaltfläche für uns erstellen. Und für das Textfeld. Lassen Sie uns die Lehrbuchklasse loswerden. Und stattdessen werde ich nur Schaltflächen-Text-Klasse mit weißer Farbe und einigen Eigenschaften erstellen . Nehmen wir an, zeigen Sie Inline-Block an, und lassen Sie uns weiße Farbe für diesen Text verwenden. Was Sie tun können, ist einfach die alten Klassen aus den anderen Lehrbüchern zu löschen, die neuen zu entfernen und anzuwenden. Also Button Text. Und auch für das letzte Lehrbuch. Für diese mittleren Blockketten-Texte müsste ich sie auswählen und eine Combo-Klasse anwenden, damit wir etwas Padding oder Marge um sie herum anwenden können. Also lassen Sie uns sagen, dies wäre Kategorie, aber auf der nächsten Kategorie. Und jetzt lassen Sie uns einige vielleicht vier oder fünf Pixel-Padding von jeder Seite anwenden. Also werde ich die Option drücken und halten und ihm ein Fünf-Pixel-Polsterung geben. Okay, jetzt haben wir die Schaltflächen-Umstrukturierung neu erstellt. Wir können das alte löschen und wir haben, was wir wollten. So ist die Blockkette nun dynamisch mit dem Kategorienamen verknüpft. Und wir haben diesen Block Kategorie Abschnitt als Vorlage. Wir können tatsächlich für alle anderen, für alle anderen Abschnitte auf unserer Seite verwenden. Lassen Sie mich auch eine Combo-Klasse hier erstellen, Blockabschnitt. Und lassen Sie uns hier etwas Polsterung hinzufügen, etwas Rand nach unten. Jetzt sieht es besser aus. Wir müssen diese eine Vorlage erstellen. Wir können die alten loswerden, damit wir sie jetzt wiederverwenden und kopieren und einfügen können. Und alles, was wir in diesen Abschnitten jetzt tun müssen, ist, die Verbindung zur richtigen Kategorie auf jedem drei der Elemente zu ändern . So haben wir Button Titel und auch den Inhalt. Und wir müssen es ändern, so dass das erste Sammlungselement verknüpft ist nicht Kette wahrscheinlich blockieren, aber die erste Kategorie von RSS-Software, speichern Sie es. Dann müssen wir zur zweiten Kollektion gehen, am wenigsten Gummi und diese auch mit Software verknüpfen. Und auch für die Schaltfläche, denken Sie daran, dass wir den Schaltflächentext ändern müssen. Diese Ansicht Blockchain-Artikel in diesem Sammlungslisten-Wrapper. Lassen Sie uns Software auswählen und dies wird automatisch den Namen der Software auf unsere Schaltfläche anwenden. Also müssen wir diese Schritte jetzt für jede Kategorie wiederholen. Aber das Konzept, das ich hier erstellt habe, ist wichtiger als das Klicken jetzt, das Konzept ist, dass wir theoretisch getrennte Sammlungslisten für die Schaltfläche und Titel und Karten haben , aber sie sind untrennbar miteinander verbunden. Und wenn wir etwas ändern, zum Beispiel den Namen der Kategorie oder wir reorganisieren die Beiträge. Das alles wird dynamisch sein und zusammenarbeiten. Es wird nicht brechen. Und das ist das Wichtigste. Wenn Sie CMS und Editor-Option aktiviert haben, kann jemand einfach den Namen der Kategorien ändern, ändern ihren Namen, Namen der Blogbeiträge, und sie neu organisieren. Und dies wird immer dazu führen, dass Sie alle Verbindungen in Ihrer, auf Ihrer Seite reparieren müssen. Es ist also besser, im Voraus und diskrete Struktur zu denken , die diese Änderungen ermöglichen und sich dynamisch anpassen wird. Jetzt haben wir alle Kategorien verknüpft, wir haben alles an Ort und Stelle. Lassen Sie uns auch das Symbol verwenden. Ich werde es einfach anziehen, auf meine Körperelemente. Ich werde dieses Fußzeilensymbol ganz unten auf der Seite verwenden. Und ich denke, dass die Struktur für die Homepage jetzt fertig ist. Wir können diese Struktur in einer Vorschau anzeigen. Wir haben den Feature-Artikel. Alle Daten sind dynamisch. Wir haben das Menü, das Dynamic 2 ist. Alles, was wir tun müssen, ist diese Blog-Beitrag-Seite zu erstellen. Wir haben dies bereits richtig verlinkt und wir haben einige CMS-Elemente mit Blogbeiträgen, aber wir müssen das Design erstellen. Machen wir es in der nächsten Lektion. 17. Seite für alle Posts: Hallo, Willkommen bei der nächsten Lektion. Ich bin wirklich glücklich, dass Sie hier sind, vor allem, weil wir jetzt alles an Ort und Stelle haben, haben wir unseren Styleguide und wir wissen bereits, wie man mit Sammlungsartikeln arbeitet. Es wird super einfach sein, neue Seiten zu erstellen und unseren Blog zu organisieren. Jetzt haben wir diese Speisekarte. Lassen Sie uns den Namen von fest zu blockieren Menü ändern und wir können ein Symbol daraus erstellen. Also, bevor wir eine neue Seite erstellen, denken Sie daran, Symbole zu erstellen, um neue Symbole hinzuzufügen, können Sie es aus dem Symbolmenü hinzufügen und Sie können auch mit der rechten Maustaste auf das Element klicken, um ein neues Symbol zu erstellen, Sie müssen nur sicherstellen, dass Sie klicken Klicken Sie im Blockmenü selbst rechten Maustaste und dann Creed-Symbol, machen Sie ein Menü-Symbol. Und auf diese Weise haben wir diese Komponente. Und diese Komponente wird auf allen unseren Unterseiten gleich sein. Nun lassen Sie uns auch Abschnitt Block Held kopieren und gehen, um alle Beiträge zu blockieren, um diese Seite zu erstellen. Zuerst werde ich zu Symbolen gehen und unsere Blockmenü verwenden, die wir gerade erstellt haben, und fügen Sie dann Abschnitt Look Held. Von hier aus brauchen wir nicht diese Sammlung netter Wrapper. Lassen Sie uns es löschen, aber ich werde diesen Abschnitt Block und Container verwenden und buchen Sie Ihren Titel. Und innerhalb dieses Selektors werde ich nur das einfügen, was ich in meinem Styleguide habe. Gehen wir wieder zu Symbolen und verwenden Sie ein Symbol des Kopfzeilenabschnitts. Dies ist ziemlich perfekt, weil es das Layout auf Flexbox gesetzt hat und wir die richtige Begründung haben. Das passt also genau hinein. Und jetzt gehen wir zu seinen Eigenschaften. Sie können sehen, dass wir alle Überschreibungen haben, die wir ändern können, um o Artikel hier für die Beschriftungstexte zu setzen, wir werden Blog- und Beschreibungstext verwenden. Ich werde es einfach so lassen, wie es vorerst ist. Nun für diesen Blockhelden-Titel, was wir tun wollen, ist eine weitere Combo-Klasse hinzuzufügen. Lassen Sie uns also die Klasse erstellen, die nicht wirklich alle anderen Instanzen dieses Elements zerstört, wenn wir etwas ändern. Also kopiere ich immer nur Elemente und füge sie über die verschiedenen Unterseiten ein. Aber zusätzlich zu den vorhandenen Klassen, wenn ich etwas wie das Padding hier ändern möchte, ich nur eine andere Klasse hinzu. Wenn ich es einfach so lasse, wie es ist, wird es dieses Element automatisch auch auf der Homepage ändern. Und das will ich nicht wirklich. Also lasst uns eine Stapelung von 80 Pixeln haben. Und hier haben wir es. Jetzt verwenden wir drei Elemente und wir können noch mehr Elemente wiederverwenden, einschließlich dieses gesamten Block-Content-Container-Abschnitt mit Sammlung am wenigsten Gummi. Jedes Mal, wenn ich etwas sehe, das auf meiner gesamten Website wiederverwendet werden kann. Was ich tue, ist zu versuchen, es in den Styleguide zu setzen. Irgendwo. In meinen Styleguides kann ich separate Seiten für alle Komponenten haben, aber in unserer Struktur ist ziemlich unkompliziert. Wir müssen nicht wirklich separate Seiten haben, also lassen Sie es uns vielleicht in diesen Container stecken, während wir Karten haben. Und jetzt habe ich dieses wiederverwendbare Element. Ich kann ihm einen Namen von Blockkarren Wrapper geben und später auch ein Symbol daraus erstellen, damit ich es wiederverwenden kann. Aber vorerst genügt es, in meinem Styleguide zu bleiben. Nun, was ich tun kann, ist zurück auf die Homepage zu gehen und gesamten Block-Content-Container kopiert, den ich werde, oder vielleicht ganzen Abschnitt, der es auch auf dieser Blog-Post-Seite positioniert und hier einfügen wird . Gehen wir zu dieser Seite und lassen Sie uns auf das Körperelement klicken, um es auszuwählen. Nun Befehl V, um den gesamten Abschnitt einzufügen. Es ist immer am besten, aus dem body-Element einfügen , da es keine Konflikte in Containern hat. Jetzt wie der Titel und die Unterseite, und hier haben wir die Sammlung am wenigsten Wrapper. Alles, was wir tatsächlich in der Sammlung dieser Gummi-Einstellung ändern müssen, ist nicht, die Elemente zu begrenzen, weil wir alle unsere Blog-Artikel hier anzeigen wollen. Also habe ich nur Limit Items deaktiviert. Und hier haben wir es, es ist fertig. Der Block 0 Post-Seiten fast fertig. Was ich tun muss, ist eine weitere Klasse oben auf diesem Blockkategorie Abschnitt hinzuzufügen. Auch hier möchte ich den Abschnitt, den ich auf der Homepage hatte, nicht ändern , so dass ich Combo-Klasse verwende, um es zu tun. Jetzt haben wir Margarines sowohl für Abschnitt B, Held, Held und Kategorie Sektion. Also zuerst müssen wir Abschnitt Buch Held, wählen Sie diese und fügen Sie eine weitere Combo-Klasse, so dass wir dieser Rand unten loswerden können. Und lasst uns hier Block oder Beiträge haben. Und das wird das Smart Grid los. Wir können es ganz loswerden und, und reduzieren Sie es auf 0 Pixel. Und dann aus dem Kategoriebereich, schauen Sie Kategorie Abschnitt, können wir diese Marge ändern. Auch hier haben wir separate Combo-Klasse dafür, so dass wir nichts auf unserer Homepage ändern werden. Und jetzt haben wir das Morgan Asper, das Design. Was wollen wir hier sonst noch tun? Nun, Sie können auf dieser Sammlung am wenigsten Gummi erstellen. Sie können auch Paginierung erstellen bedeutet, dass, wenn Sie zu den Einstellungen gehen, können Sie diese kleine Paginate Elemente Option aktivieren und dann können Sie entscheiden, wie viele Elemente aus der Sammlung Sie pro Seite anzeigen möchten, wir haben fünf Elemente hier. Sie können zwei Seiten anzeigen, die generiert wurden, weil wir 10 Beiträge haben, so haben wir zwei Seiten und Sie können zwischen Seiten wechseln. Und wie Sie auch sehen können, haben wir ganz unten, die vorherigen und nächsten Schaltflächen, die von Webflow angezeigt werden, können wir neun Elemente haben, so dass wir drei Zeilen haben. Sieht ziemlich gut aus. Und auch wenn Sie auf diese Schaltfläche „Weiter“ klicken, gehen Sie zur zweiten Seite. Wir haben nur ein Element hier jetzt, können natürlich die nächsten und vorherigen Buttons stylen. Wenn Sie diese Schaltfläche auswählen, können Sie auch die Seitenzahl anzeigen. Dadurch wird die Anzahl der Seiten unten auf der Schaltfläche angezeigt. Also hier haben wir 2, zweite Seite von zwei, und hier haben Sie FirstPage von zwei. Und wenn Sie auf die entsprechende Seite gehen und diese Schaltfläche auswählen, können Sie sie wie gewünscht gestalten. Für uns haben wir bereits Button große Klasse und auch skizzieren Klasse , die wir insgesamt verwenden können, um die Schaltfläche nach unserem Styleguide zu erstellen. Und das gleiche, was wir mit der vorherigen Schaltfläche tun wollen, aber um es ausgewählt zu haben, Lassen Sie uns vielleicht auf die zweite Seite gehen und sehen, was wir tun. Wieder, wenden Sie diese Klasse unteren Schnabel und dann Kombinationsklasse der Kontur. Und hier haben wir unsere Schaltflächenstile für diese Seitenanzahl. Ich denke, dass ich das nicht wirklich brauche, also werde ich es einfach deaktivieren, aber Sie können es stylen, wie Sie wollen. Und für das gesamte Paginierungselement, das Sie aus dem Navigator auswählen können. Nun, lassen Sie uns die Klasse für dieses Element Buch Tasche Nation setzen. Und lassen Sie uns auch Rand an die Spitze dieses Elements anwenden. Sagen wir, 26 Pixel. Nun lassen Sie uns eine Vorschau unserer Paginierung vorherige und nächste Seite, es funktioniert. Also ist alles fertig. Wir sind fast bereit. Übrigens, wenn Sie eine Art andere Paginierung mit Zahlen verwenden möchten, so etwas. Nun, es ist nicht wirklich möglich in Webflow im Moment, aber die Paginierung, die wir mit nur ein paar Klicks haben, denke ich, das ist ziemlich okay. Lassen Sie uns auch sicherstellen, dass die Sortierreihenfolge für diese bestimmte Block-Oboenseite korrekt ist. Und es liegt daran, dass es vom neuesten zum ältesten ist, basierend auf dem Veröffentlichungsdatum. Also, das ist okay. Ich musste es nicht wirklich ändern. Eine weitere Sache, die ich zu diesem Buch hinzufügen kann, oh, Beiträge Seite ist meine Fußzeile. Und Sie können es tun, indem Sie das Körperelement auswählen und in Symbole gehen. Oder Sie können einfach Befehl E drücken und dann nach Fußzeile suchen. Dies ist wirklich praktische Möglichkeit, Elemente Befehl E zu finden, und dann finden Sie alles in Webflow. Wie Sie sehen können, habe ich jetzt alle Beiträge ausgewählt, weil ich auf dieser Seite bin. Und wenn ich es ändern möchte, ist das eine Komponente. Es bedeutet, dass, wenn ich Änderungen an HTML vornehme, das wird auf der gesamten Seite verfügbar sein. Wenn ich es also auf 0 Artikel ändere und zu unserer Blog-Seite zurückgehe, wirst du sehen, dass es hier auch alle Artikel gibt. Also sind wir so ziemlich bereit mit dieser Seite. Und wie Sie sehen können, ist die Wiederverwendung von Elementen und Techniken, die wir gelernt haben, wirklich effizient. Wir sehen uns in der nächsten Lektion. 18. Kategorien: Hallo und herzlich willkommen zur nächsten Lektion. Jetzt werden wir mit dynamischen CMS-Seiten arbeiten. Gehen wir also zu CMS Sammlungsseiten. Und hier haben wir Kategorien Vorlage, diese Seite ist lila und das sind spezielle Seiten von CMS generiert. ihnen können Sie eine Vorschau der einzelnen Elemente anzeigen. Zum Beispiel, gerade jetzt sehen wir Blockkette und Elemente in der Vorschau. Und auch diese Seiten haben einige mehr Superkräfte. Ich werde sie dir später zeigen. Im Moment lassen Sie uns eine grundlegende Struktur für diese Kategorien Vorlage erstellen indem Sie unser Menü sowie unsere Fußzeile hinzufügen und dazwischen, Ich werde nur etwas aus Block oder Beiträgen ausleihen. Dieser Header ist ziemlich cool. Also lassen Sie uns Abschnitt Block Held auswählen, und lassen Sie es auf unserer Kategorie-Vorlage zwischen dem Blockmenü und der Fußzeile einfügen. Jetzt gehen wir zurück, um alle Beiträge zu blockieren, damit wir sie noch mehr kopieren können. Jetzt, wie Sie sehen können, sind wir ein bisschen faul. Wir wollen nicht wirklich neue Elemente erstellen. Stattdessen kopieren und einfügen wir nur. Aber das ist wirklich gut, weil wir alles mit den gleichen Klassen und den gleichen Komponenten an Ort und Stelle haben. Wenn wir es auf einer Seite ändern, wird es automatisch auf allen anderen Seiten geändert. Und wir werden diesen Sekundenblock Held in einer Sekunde machen. Aber zuerst stellen wir sicher, dass wir Blockkategorie Abschnitt mit dem richtigen Abschnitt verknüpft haben . Lassen Sie uns die Sammlung am wenigsten Wrapper auswählen. Und hier müssen wir filtern. Und diese violetten Seiten, die automatisch generierten CMS-Seiten, haben diesen großen Vorteil, dass sie grundsätzlich mit dem aktuellen Element in CMS verknüpfen können . Also in diesem Fall haben wir Kategorien verknüpft, so dass wir auf die aktuelle Kategorie verlinken können. Dies ist ziemlich einzigartig auf diesen violetten Seiten. Und dank dessen können wir durch das Menü auf Software-Marketing und Mobile klicken. Und es wird automatisch die Post ihre Artikel aus aktuellen Kategorie erhalten. Das ist also ziemlich cool. Wir werden es zu aktuellen Kategorie überlassen und speichern Sie es. Und alles, was wir jetzt ändern müssen, ist der alte Artikel Abschnitt hier. Wir müssen zu diesem alten Artikel Header und ersetzen Sie es durch die aktuelle Kategorie. Aber was wir tun können, ist das Element aus leihen, ich denke, die Blog-Seite, die wir hier erstellt haben, haben wir diesen Abschnitt Titel und das sind Sammlungen und sie verlinken auf das entsprechende Element. So können wir die gesamte Sammlung am wenigsten von hier ausleihen. Aber übrigens können wir Sammlungen verwenden und ich tue das, um Ihnen zu zeigen , dass wir auch Sammlungen auf Kategorien Seite verwenden können. Aber wenn Sie auf Kategorie zahlen auf dieser violetten Seite sind, brauchen Sie nicht wirklich Sammlung. Sie können einfach die Kopfzeile auswählen und die Datenkategorien sofort verwenden. Es gibt also im Grunde zwei Möglichkeiten, dies zu tun. Wählen Sie einfach die Kopfzeile oder und verwenden Sie die Daten aus dem Sammlungskategorienamen. Oder Sie können die Sammlung verwenden und dann können Sie sie verknüpfen, in diesem Fall zwei Ströme Kategorie und haben es als Blockchain angezeigt. Zwei Wege. Ich wollte Ihnen das nur zeigen, und ich möchte nur, dass Sie wissen, dass Sie diese Sammlung nicht einmal benötigen, damit dies funktioniert Sie müssen die Verknüpfung der Instanz des Symbols aufheben, die Kopfzeile auswählen und sie in den Eigenschaften ändern. Andersherum besteht darin, die Sammlung zu verwenden. Und Sie können Sammlungen auch auf diesen violetten Seiten verwenden. Also da hast du es. Es gibt einige besondere Dinge über die lila Seiten, die wir gerade erforscht haben. Alle Kategorien funktionieren und zeigen korrekte Namen sowie Artikel, die mit dieser Kategorie verbunden sind , mit Paginierung. Also sind wir fast bereit. Was wir tun können, ist auch die separaten Seiten für Autoren und Tags zu erstellen. Aber das wäre derselbe Prozess, wie wir uns selbst wiederholen. Also schätze ich, dass du es alleine schaffst. Und was wir als Blogbeiträge Vorlage konzentrieren, die die Seite mit dem tatsächlichen Inhalt unserer Artikel ist. Konzentrieren wir uns also in der nächsten Lektion darauf. 19. Blog-Seite: Hallo, Willkommen zur nächsten Lektion, und hier sind wir in XD. Dies ist das Mockup für unsere Blog-Beiträge Einzelseite. Ganz oben haben wir ein Bild als der Inhalt. Dann ganz unten haben wir einige verlinkte Artikel wahrscheinlich aus der gleichen Kategorie. Es gibt auch einen Titel und die Informationen darüber wann dieser Beitrag von wer erstellt wurde und auf der rechten Seite, wir haben nur einen statischen Abschnitt mit Newsletter und den Abschnitt, der es uns ermöglicht, auf sozialen Medien zu teilen. Also ohne weiteres, lasst uns anfangen und lasst uns unsere Blog-Posts Template-Seite erstellen. Das ist die violette Seite. Es bedeutet, dass wir hier zwischen den Blockelementen wechseln können. Hier haben wir das erste Buch Artikel, aber wir können einfach zu jedem Artikel gehen, den wir haben. Denken Sie daran, dass es sich um Artikel handelte, die automatisch von Webflow und unserem CMS generiert wurden. Also müssen wir nicht einmal einige Dummy-Daten erstellen. Wir können zwischen ihnen wechseln. Lassen Sie uns die grundlegende Struktur dieser Seite erstellen. Also werden wir eine Komponente hinzufügen, die unser Header ist, auch ein ESSEC, wir werden eine Fußzeile hinzufügen, aber zwischen ich brauche diesen Abschnitt wurde 0. Also kopiere ich nur diesen Abschnitt und ich werde ihn in meinem Blogbeitrag Vorlage einfügen. Übrigens, ich habe Ihnen bereits in der vorherigen Lektion gesagt , dass wir nicht wirklich Sammlungselemente auf violetten Seiten verwenden müssen. Zum Beispiel, wenn wir haben, sagen wir Überschrift, können wir Text aus Blog-Posts für dieses Element erhalten , ohne diese Sammlung Elemente haben zu müssen. So konnten wir es auch in der vorherigen Lektion tun. Aber ich wollte dir eine Sammlung zeigen. Aber auf den violetten Seiten können wir die Daten aus der Sammlung direkt verwenden , ohne diese Sammlung am wenigsten Rapper zu haben, was ich hier verlassen werde, ist nur die Struktur mit Block Hero Bild und vier Loci gedreht. Ich werde eine weitere Kombinationsklasse hinzufügen, damit ich nichts auf meiner Buchseite ändern kann. Und das wird Blogbeiträge sein. Und nun lassen Sie uns die Eigenschaften dieser ändern, um die Höhe von 80 Pixel Asper-Design zu haben. Und für das Blockhelden-Bild möchte ich auch eine Combo-Klasse hinzufügen. Lassen Sie uns Blog Post-Klasse erstellen. Und lassen Sie uns dieses Bild über den gesamten Container verteilen. Also lassen Sie uns eine Breite von 100% haben. Und auch müssen wir den Randradius so ändern, dass wir 12 Pixel Radius an jeder Ecke haben. Wie wir das kopiert haben, ist dieses Bild bereits mit dem Artikel verknüpft. Also, wenn wir den Artikel ändern, können wir eine Vorschau anderes Bild. Wir haben verschiedene Fotos für jeden Artikel. Nun lassen Sie uns ein weiteres Element hinzufügen, das wir Abschnitt erstellen werden. Und drinnen brauchen wir einen Behälter. Dieser Abschnitt wird Abschnitt für unseren Artikel sein. Und ich möchte es in zwei Spalten aufteilen und das von Grund auf neu erstellen. Wir wissen von den Wiederverwendungselementen, weil es ziemlich einzigartig ist. Ich werde es einen Namen geben, Blogbeiträge Abschnitt. Und für den Container selbst, Lassen Sie uns Blogbeiträge Inhalt für diesen Container erstellen, Ich möchte auch die maximale Breite auf 1080 setzen, weil ich möchte, dass es etwas sein soll. Kleiner als die gesamte Seite. Ich möchte, dass der Inhalt lesbar ist. Ich werde es in zwei Spalten aufteilen, aber trotzdem möchte ich, sagen wir, 70 oder 90 Anmeldungen pro Zeile haben , so dass es am bequemsten zu lesen ist. Außerdem füge ich 20 Pixel Polsterung auf jeder Seite für diesen Blog-Postcontainer hinzu, das ist ziemlich cool, weil in Tablet und Handy diese Polsterung auch auf 20 gesetzt wird . Und das wird jetzt reagieren, in dem, was wir entweder als Spalten verwenden können, oder wir können einfachen d-block mit Flexbox verwenden oder wir können Grid verwenden. Und ich denke, dass Raster das Beste ist, das vielseitigste, das wir nicht hören können. Also lassen Sie uns mit einer Zeile und zwei Spalten übereinstimmen. Jetzt können wir auf diese Begrüßung zugreifen, die diese Änderungen anwenden, benennen Sie die Klasse in Blog-Post Abschnitt. Lassen Sie uns es ändern, um Blog-Post Gier. Und jetzt lassen Sie uns diese großartigen wieder bearbeiten und die Brüche ändern, die Größe der Spalten ändern, weil ich möchte, dass diese erste Spalte sein soll, sagen wir 1,75 oder zwei Brüche, und letzteres ist ein Bruchteil, so dass wir diese seitliche Seitenleiste, die schmaler als der tatsächliche Inhalt ist. Und innerhalb des Rasters werden wir zu den Blöcken hinzufügen. Der erste wird für unseren Blogbeitrag Inhalt sein. Benennen wir die Klasse um. Und der zweite, lassen Sie uns diesen d-Block erstellen. Das wird für Gelb sein. Lassen Sie uns es in den Blog-Posts, grüßen, und das wird für unsere beiseite, beiseite Abschnitt und Newsletter sowie Sharing-Optionen sein. Also haben wir jetzt die richtige Struktur, Abschnitt Container, grüßen und dann Inhalt div. Dies ist die Struktur, die ich meistens für die meiste Zeit verwende ich für diese Art von Aufgaben. Und jetzt möchte ich diesen Titel und die Beschriftung sowie Informationen über das Datum und den Autor neu erstellen . Wir haben also nichts, was wir wiederverwenden können. Also lassen Sie uns einen weiteren d-Block erstellen, der Blog-Post Titelblock sein wird. Innerhalb dieses Schriftfelds brauche ich die Struktur der Beschriftung. Also werde ich hier Lehrbuch benutzen. Drücken Sie dann erneut ein, um ein anderes Element hinzuzufügen, das unser Header wäre. Und wieder können Sie die Suche in Webflow verwenden, um Elemente hinzuzufügen. Sie müssen sie nicht wirklich aus dem Menü auswählen. Sie können Befehlstaste E drücken und dann Absatz oder Überschrift eingeben, und Sie werden es haben. Hier haben wir von jemandem, nach Autor und dann auf dem bestimmten Datum, zum Beispiel Gen 5. Was ich jetzt gerne tun möchte, muss ich mich ändern. Ich muss diese Daten dynamisch haben. Und wie ich Ihnen bereits sagte, Dies kann nicht getan werden, zumindest in meiner Version von Webflow mit einer Spanne. Es wäre also der einfachste Weg, dies mit span zu wickeln und dann zu den Einstellungen zu gehen und dann eine Verbindung zu den entsprechenden Daten von CMS herzustellen. Aber es ist nicht möglich. Also muss ich das löschen und ich muss drei Elemente erstellen, genau wie wir es getan haben, genau wie wir es für die Schaltfläche getan haben. Wir müssen mehrere Textblöcke erstellen. Der erste wird die Informationen dazu enthalten. Geben wir ihm eine Namensbeschriftung, Blog, Post. Und der erste wird die Informationen über den Autor haben. Lassen Sie uns dies in Inline-Block ändern. Dann haben wir die Informationen über das Datum. Lassen Sie uns also sicherstellen, dass wir die Eigenschaft richtig eingestellt haben , bevor wir das mehrmals kopieren und einfügen. Wann dunkelgrau dafür verwendet werden soll. Und jetzt können wir das noch zwei oder drei Mal kopieren und einfügen , weil wir BY und dann den Namen des Autors brauchen. Außerdem müssen wir es mit Text aufteilen. Dann haben wir das richtige Date. Ok. Also ja, das ist ziemlich unbequem, dass wir es so machen müssen. Aber als Schriftsteller brauchen wir einen gewissen Spielraum auf der rechten Seite. Vier oder fünf Pixel reichen normalerweise für ein Leerzeichen aus. Und jetzt ist unsere Überschriftenstruktur bereit. Wir haben nur wenige Lehrbücher. Wählen wir den ersten aus. Dies ist eine Beschriftung, also lassen Sie uns Befehlstaste drücken und unsere vorhandene Klassenbeschriftung aus dem Styleguide verwenden. Und ich denke, der Blogbeitrag Titelblock ist fertig. Schauen wir uns an, schauen Sie Post-Inhalt und fügen Sie ein weiteres Element hinzu, das Absatz wäre. Und dieser Absatz ist ein besonderer. Also lassen Sie uns eine Klasse dafür erstellen, Blogposts Auszug. Und lassen Sie uns Rand nach unten und nach oben erstellen. Wir werden 32 Pixel Rand hinzufügen. Außerdem müssen wir einige Texteigenschaften entsprechend unserem Design ändern. Also lassen Sie uns die Schriftart, das Gewicht und die Größe ändern. Verwenden wir 22. Und für die Zeilenhöhe werden wir 32 Pixel verwenden. Und das ist nach unserem Design. Lassen Sie uns nun wieder auf den Blogbeitrag Inhalt positionieren und ein Rich-Text-Element hinzufügen. Wir haben Text in unserer CMS-Datenbank erreicht. So wird der Typ des Feldes, das wir für den Artikelinhalt verwenden, erreicht Text. Jetzt können wir diesen erreichten x-Block verwenden, um die gesamte Artikelstruktur zu formatieren. Und das ist ziemlich cool, weil erreicht x Blog tatsächlich separate Stile hat und wir es in unserem Styleguide stylen können, und wir haben bereits so Blog-Artikel als eine Klasse für unsere Rich-Text-Element, das auf Blog-Posts verwendet werden sollte -Vorlage. Lassen Sie uns diesen Rich-Text-Block auswählen und ihm eine Klasse von Blog-Artikel geben und tut es. Also haben wir es jetzt kopiert und Zeiten sind die gleichen wie in unserem Styleguide. Und jetzt ist unsere Struktur fast fertig. Oh, wir müssen tun, ist eine weitere Komponente hinzufügen, die unsere Fußzeile sein wird und auch eine Struktur für die Website-Aktionen erstellen. Bevor wir das tun, lassen Sie uns vielleicht die Elemente auswählen, auf die wir dynamische Daten anwenden möchten. Auch hier haben wir diese violette Seite, so dass wir nicht wirklich Sammlungen brauchen um sie mit den Daten aus der Blog-Post Sammlung zu verknüpfen, können wir den Text aus Blog-Post hier bekommen. Und das wäre unsere Beschriftung. Also müssen wir einfach durch den Kategorienamen scrollen. Und als Beschriftung werden wir den Kategorienamen für die eigentliche Überschrift verwenden. Wir verwenden den Namen der Beiträge. Und hier haben wir auch einige dynamische Daten, dank der Verbindungen, die wir in unserem CMS gemacht haben, haben wir draußen und alles andere, was mit der Blogpost Sammlung verknüpft ist. Und so können wir diese Daten von CMS für das Datum erhalten , an dem wir zwei Termine hier automatisch von CMS hinzugefügt haben, aktualisiert und auch veröffentlicht auf. In diesem speziellen Fall wollen wir natürlich veröffentlicht auf und auch Webflow verwenden. Lassen Sie uns dieses Datum hier formatieren wir Juni 2006, aber wir können ändern, wie diese Daten formatiert und auf unserem Block angezeigt werden. Es gibt wenige verschiedene Formate, aus denen wir auswählen können. Wie Sie sehen können, viele von ihnen tatsächlich, können wir das gesamte Datum anzeigen. Wir können nur Monat oder Tag gebrauchen, und ja, wir können mit diesem Date tun, was wir wollen. Das ist ziemlich vielseitig. Lassen Sie es Bein als S, und jetzt lassen Sie uns die Kopie von CMS für unseren Blogbeitrag Auszug bekommen. Ich werde es mit dem Auszug verknüpfen. Und für den Blockartikel müssen wir den gesamten Artikel mit dem Feld verknüpfen, das wir haben. Und das ist zufrieden. Sie können sehen, dass dies Textelement erreicht wird. So ist der Typ dieser Eigenschaft im CMS auch Rich-Text und das wird uns erlauben nur die Daten aus diesem Feld mit unserem Blogbeitrag Inhalt zu verknüpfen. Okay, hier haben wir dynamische Daten auf der linken Seite unserer Blog-Post Seite. Wenn wir die Beiträge ändern, jetzt, Sie können sehen, dass wir unterschiedliche Titel, verschiedene Abschnitt und Autor und so weiter. Also funktioniert alles richtig. Und so können wir auf den violetten Seiten einfach verschiedene Artikel von CMS auswählen und wir sehen alles. Jetzt in der nächsten Lektion, alles, was wir auf dieser Seite tun müssen, ist Website-Aktionen erstellt , die Newsletter und Freigabeoptionen sein werden. Wir sehen uns später. 20. Postseite: Hey, schön, dich in der nächsten Lektion zu sehen. Und wenn du denkst, dass du zwischendurch eine Lektion verpasst, Nein, das ist nicht der Fall. Ich habe gerade diesen Newsletter Gummi und Social Wrapper nur zwischen den Lektionen erstellt , weil es super einfache Struktur ist, die Sie bereits aus dem Grundkurs kennen. Also dachte ich, es wäre besser, Ihre Zeit zu nutzen , um nicht nur Container und Ausrichtungen zu erstellen, sondern Ihnen etwas wirklich Wichtiges und etwas Spannenderes zu zeigen. Und das ist die Newsletter-Gummi-Struktur. Wir haben Absatz- und Formularblock. Innerhalb dieses Formulars haben wir nur eine E-Mail. Was ich getan habe, ist, dass ich das gerade aus der Fußzeile kopiert und die Größe leicht geändert habe. Dann haben wir Social Wrapper mit Absatz und D-Block mit drei Social-Media-Symbolen. Das sind Links und beim Hover haben sie diesen anderen Zustand, der nur die Farbe des Symbols ändert. Das war's. Super einfache Struktur und wir können fortfahren, können wir diese Struktur auf unserer Website fixiert machen. Gehen wir also zur Positionseigenschaft und wir können sie entweder fixiert oder klebrig ändern. Wir haben fixiert für unser Navigationsmenü verwendet, um es einfach ganz oben auf unserer Website anzudocken. Aber der Unterschied zwischen fixen und klebrigen ist, dass klebrig funktioniert und nur dieses Element an Ort und Stelle setzen, abhängig von der Benutzer-Auktion, abhängig von der Scroll-Position unserer Website. Also, wenn wir einen Blick auf dieses sehr obere Pixel des Browsers und Topsy Pixel der Sehaktionen werfen. Wir können einfach eine Abhängigkeit voneinander machen, indem wir diese Eigenschaft ändern, um 0 sagen zu lassen. Dies wird es ganz oben im Browser bleiben. Unser oberstes Pixel dieser Website-Aktionen erreicht das oberste Element des Browsers. Jetzt 40 Ausrichtung werde ich start verwenden falls dies Gier ist, damit dies richtig funktioniert. Und jetzt habe ich diesen Wert auf 0 gesetzt. Also, wenn diese Themen Offsite-Aktion erreicht die 0 Pixel des Browsers. So der obere Teil des Browsers, wird es an dieser Position bleiben. Was wir tun wollen, ist dies ein wenig versetzen, so dass wir den Platz für unser Navigationsmenü sowie einige, ein wenig Polsterung unten haben. Also lasst uns 100 haben. Und das versetzt den Startpunkt der Verführungselemente auf 100 Pixel von oben. Also, wenn wir 100 von oben erreichen, wird es wie S. So ist es noch besser, Vorschau , dass mit unserem Vorschau-Befehl Shift P. Und hier haben Sie es. Also jetzt ist es schön an der rechten Seite angedockt. Und das ist im Grunde alles, was wir tun müssen, um dieses Element an diesem Ort zu halten. In der Zwischenzeit habe ich bemerkt, dass ich in meinem Design auch dieses TOC-Element auf dem Foto habe. So kann ich das TOC-Element mit dieser Sammlung ausleihen. Vermutlich. Lassen Sie es uns kopieren und in unsere Blogbeitrag Vorlage einfügen. Lasst uns diesen Steuerpacker hier haben. Dies ist auf absolute Position 16, 16 Pixel eingestellt. Jetzt ist es am Körper positioniert. Aber wenn wir ändern Block Held Position betitelt, so dass es ein Verwandter ist, jetzt wird es die relative Macht. Und für diesen Steuerpacker, und alles sieht wirklich gut aus. Also in diesen Tags im Inneren zeigen wir das Tag sowie Featured Element an, je nachdem, ob dieser Beitrag in unserem CMS gekennzeichnet ist. Erinnern wir uns, lassen Sie uns zu seinen Einstellungen gehen. Und hier haben wir die Bedingung, wenn die Funktion eingeschaltet ist, wird diese Funktion angezeigt. Mal sehen, ob es funktioniert. Gehen wir zu unseren Blogbeiträgen. Sammlung und das ist wählen Sie diese sehr beide. Dies sind 15 beste Blöcke zu folgen. Und lassen Sie uns zu Sweep Funktion ändern, schalten Sie ein, Speichern Sie es. Jetzt müssen wir nicht wirklich veröffentlichen, um das in unserem Designer zu sehen. Und das Feature wird jetzt angezeigt, damit alles korrekt funktioniert. Aber wenn Sie das auf Ihrer Arbeitsseite sehen möchten, müssen Sie dies veröffentlichen und dann können Sie eine Vorschau anzeigen. Okay, jetzt ist die andere Sache, die ich gerne tun würde, ganz am Ende des Beitrags, ich möchte die Liste von post.html anzeigen, die gut lesenswert ist. Also gehe ich auf die Blog-Seite und kopiere diese gesamte Blockkategorie und füge sie in unsere Blogpostvorlage ein. Wählen wir also das Körperelement aus, fügen Sie es ganz unten ein. Und lassen Sie uns diesen Abschnitt sehen. Dieser Abschnitt basiert auf der Sammlung, zumindest Elementen und ich muss nicht unbedingt Sammlung am wenigsten auf den violetten Seiten verwenden , aber ich kann. Warum also nicht? Also, jetzt muss ich diese Überschrift ändern. Ich will nicht, dass es dynamisch ist. Also lassen Sie uns diesen GetText aus dem Blog-Beitrag deaktivieren. Und sagen wir, dass es weiterhin drei Punkte lesen und den Boden löschen wird. Ich brauche den Knopf nicht. Lassen Sie uns diesen Abschnitt über der Fußzeile neu positionieren. Und jetzt muss ich nur sicherstellen, dass ich den richtigen Beitrag hier angezeigt habe. Wenn ich die Sammlung am wenigsten Einstellungen überprüfen, werden Sie sehen, dass es die Beiträge aus Kategorien, Software, was ich tun muss, und ich kann das nicht tun, wenn ich auf der violetten Seite bin, ist es, diese Kategorie der aktuellen Blog Beiträge. So wird es automatisch intelligent wissen, dass ich auf dieser Software in der Software oder Blockchain oder Marketing-Kategorie bin. Und wenn ich es ändere, sagen wir zu diesem Beitrag, wir haben hier die Beiträge von Software. Wenn ich es in die andere ändere, ist das eine gleichgültige Kategorie. Jetzt können wir die Beiträge aus dem Marketing sehen. Das ist also ziemlich cool. Natürlich können Sie festlegen, wie viele Elemente Sie hier anzeigen möchten , und Sie können die Sortierreihenfolge bestimmen, die ab dem Veröffentlichungsdatum die neueste bis älteste ist. Lassen Sie uns also unsere Website veröffentlichen und lassen Sie uns eine Vorschau im Browser anzeigen. Nachdem Sie veröffentlicht haben, können Sie auf die Homepage gehen und Sie können sehen, dass wir diesen vorgestellten Beitrag haben, der neueste mit der Flagge gekennzeichnet, die dynamisch angezeigt wird. Wir haben auch alle aktuellen Artikel und Artikel aus verschiedenen Kategorien hier. Dann unten haben wir Artikel, aktuelle Artikel nur aus bestimmten Kategorien. Und wir haben auch Links und Schaltflächen, die auf die richtige Seite verlinken , die es uns ermöglichen, entweder alle Artikel in unserem Blog oder die Artikel aus einer bestimmten Kategorie in diese Kategorie anzuzeigen , die es uns ermöglichen, entweder alle Artikel in unserem Blog oder , können Sie auch von der -Menü. Und schließlich, wenn Sie den genauen Beitrag, den genauen Artikel in der Vorschau anzeigen möchten , klicken Sie einfach auf diesen Artikel und wieder, alle Daten hier sind dynamisch. Sie haben den Beitrag Inhalt und Foto-Informationen über andere Beiträge, die lesenswert sind. Und ich denke, die Basisstruktur unserer Website ist jetzt fertig. Und Sie wissen, alles über CMS Sammlungen und CMS Seiten. 21. Sucheinrichtung: Hallo, Willkommen zur nächsten Lektion und lasst uns auf unsere navbar zugreifen. Das ist also eine Bloke Menükomponente. Im Inneren haben wir Menü-Bereich mit Marke und Navigationsmenü. Und in diesem Abschnitt möchte ich eine bestimmte Komponente aus dem anderen Menü hinzufügen. Dies ist Suchkomponenten, also lassen Sie uns auf Suchen klicken. Fügen wir es hier hinzu, und jetzt können wir es neu gestalten und wir können Sucheinstellungen bearbeiten. Dies ist also eine Welle, die es uns ermöglicht, nach den CMS-Elementen zu suchen und sie auf der separaten Suchergebnisseite anzuzeigen. Ich werde Ihnen zeigen, wie Sie sowohl die Suchkomponente als auch diese Suchergebnisseite anpassen können. Nun, was wir als Position der Elemente tun wollen, so haben wir diese Welle und innen gibt es einen Eingang und Tasten. Für die Entladung können wir die Anzeige anzeigen, stellen Sie die Anzeige auf Flex und dann ausrichten und an der Mitte und Mitte ausrichten. Hier haben wir eine zusätzliche Polsterung, die wir zurücksetzen können. Es genügt, auf das Element zu klicken, um es auf diese Zahl zurückzusetzen, oder wählen Sie einfach 0 in hier. Und für den Suchknopf möchten wir auch das Padding zurücksetzen oder etwas geändert haben, so dass wir sieben oder sechs Pixel Padding haben. Dies ist also inline mit dem Sucheingabefeld. Jetzt für die gesamte Komponente, ich denke, wir haben hier auch einige zusätzliche Polsterung. Lasst uns zurücksetzen. Es sagt, wählen Sie 0. Und jetzt können wir es etwas neu gestalten, so dass wir ein schönes Styling für dieses Element haben, sowohl für seinen statischen Zustand als auch für den Hover-Zustand. Was ich tun möchte, ist, den Rahmenstil auf solide zu setzen. Und ich möchte den festen Rahmen an den unteren Rand der Sucheingabe setzen. Wählen wir diese vielleicht dunkelgrau, dunkelgrau und Farbe aus. Okay, auch das gleiche Styling für die Grenze, die ich gerne für den Suchknopf haben würde. Oh, okay. Ich muss den Stil auf solide setzen, oder? Und für den Suchknopf werde ich dasselbe tun. Und lassen Sie uns die Farbe auf transparent ändern, diese Hintergrundfarbe. Und lassen Sie uns den Rand unten auf ausschließlich und diese dunkelgraue Farbe setzen, okay, und später werde ich die Deckkraft dieses Elements basierend auf dem Benutzer ändern , der auf dem Suchelement schwebt. Aber was ich jetzt gerne tun würde, ist, den Suchknopf in ein Symbol zu ändern. Ich gehe zu Projekteinstellungen für meine Workflow-Website und gehe zu Schriftarten. Ich muss Schriftarten installieren. Ich habe bereits aus dem vorherigen Kurs installiert, so dass Sie den Grundkurs und wie Sie benutzerdefinierte Schriftarten installieren können. Was ich getan habe, ist, dass ich diese Font Awesome installiert habe indem ich auf den Upload-Button klicke und einfach die TDF-Schriften installiert habe. Ich habe FAA für 100 Marken für hundertneunhundert. Jetzt kann ich verwenden, so dass ich Symbole von Font verwenden kann. Awesome, Lassen Sie mich nach einem Suchsymbol suchen und kopieren Sie nun diese Symbole Glyphe in die Zwischenablage. Also lassen Sie uns Unicode-Glyphe kopieren. Klicken Sie darauf. Und jetzt habe ich dieses Symbol bereit, auf meiner Website oder meiner Seite verwendet werden. Lassen Sie uns voran und greifen Sie auf das Suchelement zu. Noch einmal muss ich alles löschen, was da drin ist, und diese Glyphe einfügen. Ok? Aber jetzt muss ich auch die Typografie ändern, so dass die Schriftart hier FA ist, SO IT Nacht Hunderte. Und offensichtlich muss ich die Schriftfarbe in eine dunkelgraue Farbe ändern. Lassen Sie uns noch einmal darauf klicken und hier haben Sie das Symbol. Jetzt können wir anpassen, passen Sie die Größe, die Schriftgröße, um die Größe des Zyklus zu ändern. Und so wenden Sie benutzerdefinierte Schriftart fantastische Symbole auf die Elemente an , die Sie jetzt als Schaltflächen verwenden können, zum Beispiel im Suchmenü. Als nächstes werden wir diese Kachel so anpassen, dass wir den Abstand korrekt haben. Lassen Sie es uns neben dem Logo positionieren. Dies ist vielleicht nicht der beste Weg, um es zu positionieren. Und auch müssten Sie die Tablet- und Mobilversionen überprüfen. Aber ich werde dich damit verlassen. Dies ist nicht das Wichtigste, aber was wir tun werden, ist dies im Hover-Zustand für Sucheingabe und Schaltfläche zu erstellen. Und was wir tun werden, ist für die gesamte Suchkomponente, wir werden die Deckkraft in diesem statischen Zustand auf etwa 40 Prozent senken. Und während wir auf diesem Element schweben, werden wir es in eine positive 100 ändern. Wenn Sie nun Befehlshalt P drücken oder auf das Symbol klicken, um eine Vorschau anzuzeigen, können Sie den Mauszeiger über dieses Element bewegen. Und hier haben Sie schöne Wirkung. Wenn dieser Effekt animiert werden soll, können Sie auch den Übergangseffekt erstellen oder eine eigene benutzerdefinierte Animation in Webflow erstellen. Dies ist etwas, das wir bereits im Grundkurs diskutiert haben o hier in den Einstellungen haben Sie die Schaltfläche, um zur Suchergebnisseite zu gehen. Und alternativ können Sie auf die Seiten und in Utility-Seiten klicken. Jetzt haben Sie Suchergebnisse Seite, die Sie stylen können und Sie können es an Ihre Bedürfnisse anpassen. Hier haben Sie den Container, es gibt eine Überschrift mit Suchergebnissen. Es ist statisch. Und was ich tun möchte, ist eine neue Klasse für diesen Suchergebniscontainer zu erstellen. Und nur leicht versetzen Sie es von oben auf der Seite mit dem Morgan. Und hier haben Sie auch Sucheingaben wie Buttons der gleichen Struktur wie wir eine, eine Suchkomponente hatten. Was ich gerne tun möchte, ist, dass ich benutzerdefinierte Klassen für diese Suche verwenden möchte, um automatisch den Klassennamen zu generieren. Das ist okay. Jetzt lassen Sie uns das von Grund auf neu erstellen. Ich möchte nicht die gleichen Stile kopieren, die ich in der Navigationsleiste habe. Stattdessen möchte ich ein bisschen anders aussehende Sucheingabe und Suchschaltfläche erstellen , damit wir sie horizontal über die gesamte Suchergebnisseite verteilen können . Und vielleicht lassen Sie uns auch etwas Styling anwenden, können einige abgerundete Ecken für dieses Element sein. Und in der Sekunde werden wir zu den Suchergebnissen gehen und ich werde erklären, wie es genau funktioniert. Aber jetzt lassen Sie uns 12 Pixel-Rand oben und unten links von dieser Eingabe und auch oben rechts und unten rechts auf die Suchschaltfläche anwenden . Nun, für die Suchergebnisse, haben wir etwas, das Suchergebnisse Wrapper genannt wird. Und das ist eine Art Besonderes, so können wir es so nennen, spezielle Sammlung von Elementen, die alle Suchergebnisse Elemente anzeigen. Dies ist der Sammlungsliste sehr ähnlich. Wie Sie sehen können, haben wir ein Element, und wenn wir dieses ein Element neu gestaltet wird fliehen und Lehrbuch und Absatz. Dies wird automatisch durch alle Elemente geerbt. Und da dies so etwas wie eine Sammlung im Suchindex ist, es Ihnen einige Daten aus dieser Sammlung, wie Seiten-URL und Suchtitel und Suchauszug. Und wir werden alle diese Felder in einer Sekunde hinzufügen und verwenden. Aber Sie können es einfach als behandeln. Energiesammlungen, so etwas wie eine Sammlung. Und denken Sie daran, dass alle Daten hier sind und es ist ziemlich ähnlich der Sammlung am wenigsten, die wir mit Stil verwenden. So ziemlich unkompliziert, oder? Wir haben verlinkt, Lehrbuch und Absatz hier. Der Link ist jetzt der Titel dieses Elements, aber Sie können zum Beispiel Bild verwenden, um ein Bild zu den Suchergebnissen hinzuzufügen. Und jetzt, wenn Sie zu den Einstellungen gehen, können Sie Bild aus unserem Suchindex, Index übergeordnete Sammlung, und wählen Sie dann das Suchbild aus der OG-Steuer für diese bestimmte Seite. Also, warum wir die Sammlung, Beispiel-Sammlung Elemente zu den Blog-Posts hinzugefügt haben , es automatisch, die Bilder als auch. Und diese Bilder werden in Webflow als OG-Bilder in den Seiteneinstellungen verwendet. Also jetzt einfügen, sammelt es automatisch diese Bilder von OG und es zeigt sie als Suchbild. Ziemlich klug, richtig? Ok. Was wir hier tun können, ist eine richtige Struktur für all diese Elemente zu schaffen. Erstellen Sie zum Beispiel einen großen Link-Block. Und innerhalb dieses lingualen Blocks werden wir einige technische Diff-Container hinzufügen , so dass der erste die 40 enthält, und der letztere den Textblock mit Titel und vielleicht eine Beschreibung enthält. Lassen Sie uns eine Klasse Suchergebnisse erstellen, und hier haben wir Suchergebnisse Bilder und auch Suchergebnisse Texte. Ok? Jetzt können wir Elemente jetzt verschieben und in den richtigen Abschnitten positionieren. Aber dieser Link kann nicht wirklich innerhalb der Suchergebnisse verschoben werden. Text tut, weil wir einen Link haben und wir können Link nicht ineinander in Webflow verschachteln. Also lasst uns diesen Link löschen. Wir werden das später für das Lehrbuch hinzufügen. Mal sehen, wir haben diese Seiten-URL, die im Grunde aus der Sammlung genommen wird. Wir brauchen diese URL nicht wirklich, also werde ich sie löschen. Und ich werde nur diesen Absatz verwenden. Der Absatz nimmt die Texte von etwas, das Snippet genannt wird. Dies ist Klartext und es wird automatisch auch von der Seite generiert, die wir zwei verknüpfen, wir haben bezahlt URL, Seite, Suchbeschreibung, Suchtitel, und auch ein Snippet. Also, wo können wir auf diese Details zugreifen? Wie können wir sie anpassen? Das werde ich Ihnen in der nächsten Lektion im Detail zeigen. Aber lassen Sie uns einen Blick auf die Eigenschaften dieser Seite, Nehmen wir an, diese lokale Post Seite. Jeder Stapel hat also die allgemeinen Eigenschaften und SEO-Einstellungen. Aber was Sie interessiert sind, sind Site-Sucheinstellungen, und das sind die Einstellungen, die wir dort verwenden können. So haben wir solche Titel, Tänzer Beschreibung und Suchbild. Wie Sie sehen können, sind diese die gleichen wie SEO, Titel-Tag, Beschreibung-Tag und Graph-Bild-URL. Es bedeutet, dass es automatisch sammeln die Daten von der vorherigen Registerkarte, diese SEO-Einstellungen. Und hier haben wir Block 0 Beiträge zum Beispiel bei einer Meta-Beschreibung. Und hier bekommt es die Daten für die Suche, für die Anzeige in der Suchergebnisseite. Also müssten wir diese Meta-Beschreibung verwenden und hier erstellt. Oder wir können diese Checkbox einfach deaktivieren und unsere eigenen Beschreibungen für Suchergebnisse erstellen. Ergebnisse spezifisch. Okay, lassen Sie uns zuerst die Struktur erstellen. Lassen Sie uns also zurück zu den Suchergebnissen und einer Überschrift, die Überschrift wäre. Und ich möchte Titel anzeigen. Also der Name der Suchergebnisse hier, lassen Sie mich den Text aus den Suchergebnissen erhalten und den Suchtitel anzeigen. Und das ist es fast für die Struktur. Aber ich möchte dies zu einem Link machen, dieses gesamte Ergebnis zu einem Link zu unserer Suchseite machen, von unserem Suchabzeichen bis zur Blogbeitragseite. Also werde ich die GET-URL von der Seiten-URL für diesen ganzen Container, diesen Suchergebnis-Link-Container, festlegen . Wenn jemand darauf klickt, wird er zu diesem Posten gehen. Das war's vorerst. Lassen Sie uns in der nächsten Lektion fortfahren. 22. Erweiterte Suche: Okay, willkommen zur nächsten Lektion. Wir beginnen einfach genau dort, wo wir in der vorherigen Lektion aufgehört haben, wir haben diesen Suchergebnislink. Und jetzt lassen Sie uns den Cursor auf Zeiger setzen, so dass UX weise, dies ist intuitiver, dass Sie auf das Suchergebnis klicken können. Ändern Sie auch die Anzeige in Flex. Ich lasse alle Einstellungen so, wie sie sind, aber wir müssen uns um die Fotos kümmern. Wie Sie sehen können, sind die Größen der Fotos unterschiedlich und das ist in Ordnung, aber wir müssen nur sicherstellen, dass ihre Anzeige richtig. Verwenden wir also das Suchergebnisbild als neue Klasse für diese Bilder und ändern Sie die maximale Breite auf, sagen wir, 200 Pixel. Und lassen Sie uns auch einen Rahmenradius von acht Pixeln und einen kleinen Rand von etwa 18 oder 20 Pixeln anwenden . Und für das Ergebnis, Elemente wollen auch ein neues Klassen-Suchergebniselement erstellen und diese Elemente verteilen 25 Pixel-Rand, und das wäre in Ordnung, diese Weise unsere Suchseite ist fast bereit in Bezug auf Styling, ich denke, es erfordert auf die gerade geringfügige Anpassungen. Lassen Sie uns zum Beispiel einen Rand am oberen und unteren Rand des Suchelements und auf dem Körperelement hinzufügen , Gehen wir zu Komponenten und lassen Sie uns unsere Komponenten einfügen. Wir müssen weiter haben, und wir müssen auch Navigation haben. Also das Block-Menü ganz oben, auch diese Seite. Und das erzeugt ein leichtes Problem für uns , denn was wir hier Ende im Blog haben, ist auch eine weitere Suche. Lassen Sie mich einfach den Rand etwas verschieben und dieses Suchfeld angesprochen , da wir jetzt zwei Suchfelder auf einer Seite haben. Und das nicht, was wir erwarten, können wir nicht wirklich aus dem Blog-Menü gelöscht weil dies ein Symbol ist und ich möchte es ein Symbol zu halten. Deshalb möchte ich dies in der Vorschau überprüfen, mit der rechten Maustaste klicken und überprüfen und sehen, welche Art von Klasse das ist. Dies ist Überspannung W für W Strich Form. Lassen Sie uns also den Namen dieser Klasse kopieren, die ich gefunden habe, und Entwicklertools. Und ich werde nur die Anzeige keines dieser Klasse einstellen, okay? Dies wird also dieses Element verbergen, aber nur auf dieser Suchergebnisseite. Also gehen wir zu den Suchergebnisseiten Einstellungen und wir werden einige benutzerdefinierte Code in diesem benutzerdefinierten Code-Element hinzufügen. Wir werden es retten. Und Sie können übrigens benutzerdefinierten Code innerhalb des head-Tags hinzufügen. Und du kannst es auch für mich tun, kurz vor dem Körper-Tag. In diesem Fall möchten wir dem head-Tag Stile hinzufügen. Also hier haben wir Stil, Typ, und hier haben wir Text Schrägstrich, CSS und Einsicht eingegeben. Wir können einige Eigenschaften für unser CSS in Webflow überschreiben. Also müssen wir diese Klasse adressieren, also suchen und dann W4-Formular, und wir wollen es verstecken. Lassen Sie uns also die display-Eigenschaft auf taub setzen und speichern Sie sie. Dies wird im Designer nicht sichtbar sein, da wir diese Änderungen veröffentlichen müssen , um die Vorschau zu sehen, wie sie aussieht. Also lassen Sie uns veröffentlichen. Übrigens gibt es eine Möglichkeit, diese Änderungen an CSS zu sehen, einfache CSS-Änderungen im Designer direkt. Und das ist dank HTML Ambit. Sie können also alternativ HTML-Einbettung verwenden und dann denselben Code verwenden, der im Designer sichtbar wäre. Im Moment können wir das sehen, nachdem wir unsere Seite veröffentlicht haben. Und wieder, das ist wirklich cool, weil wir. Müssen Sie jetzt in Boxen suchen. Dennoch haben wir diese Komponente in Takt, die oben auf der Suchergebnisseite ist. Und zum Beispiel, wenn wir den Kategorienamen oder so etwas ändern, wird er automatisch in unseren Suchergebnissen, Ergebnisseite geändert und auch hier propagiert. Okay, In den Ergebnissen sehen wir keine Bilder, aber das ist aufgrund der Tatsache, dass unsere Suche nur eine Beispielsuche ist, bis wir dies mit Webflow, CMS veröffentlichen, die Suche verwendet einen elastischen Suchmechanismus, der ein Back-End ist Mechanismus, der gehostet werden muss, bevor wir das Ergebnis in der Vorschau anzeigen. Auf Ihrer statisch veröffentlichten Seite sehen Sie also das Ergebnis der Suche nicht wirklich. Sie können nur die Beispielergebnisse sehen, so dass Sie dieses Element formatieren können. Wenn Sie nun zu den Suchergebnis-Wrapper und seinen Einstellungen gehen, können Sie sehen, dass Sie die Ergebnisse wie viele Ergebnisse haben, die wir zeigen. Dann Snippets Länge können Sie den Text des Snippets abschneiden. Je nach Layout, das Sie erstellt haben, möchten Sie vielleicht 180 Zeichen oder vielleicht weniger oder mehr anzeigen. Dies wird erneut über alle Suchergebnis-Links verbreitet. Außerdem haben Sie die Möglichkeit, Suchbegriffe in einem Snippet hervorzuheben. Es bedeutet, dass, wenn Sie eine Phrase verwenden und es innerhalb der SNP auf der gleichen Phrase befindet sich im Snippet oder im Titel. Dieser Wert wird auf fett gesetzt. Eigentlich, das wird, das wird diese Phrase ausblenden. Wenn Sie also möchten, markieren Sie es in blau oder vielleicht gelb, Sie können einfach das Standardstyling für fett formatierte Elemente in Webflow ändern. Und dann wenden Sie diesen Stil an, um genau den Satz zu machen, den jemand sucht. Und das ist ziemlich nützlich. Ok? Was wollen wir sonst noch tun? Was können wir sonst in diesem Suchergebnis tun, Gummi? Nun, es gibt einige erweiterte Einstellungen, die Sie verwenden können, um Elemente aus der Indizierung innerhalb der Suche einzuschließen oder auszuschließen. Offensichtlich möchten Sie manchmal nicht wirklich alle Elemente auf Ihrer Seite indizieren. Und Sie möchten ganze Seiten oder nur einen Teil der Seiten davon ausschließen , indiziert und als Ergebnis einer Suchabfrage angezeigt zu werden. Also zum Beispiel, wenn Sie zu unserem Blog gehen oder alle Beiträge blockieren und Sie entscheiden, dass Sie nicht möchten, dass diese Blockierung alle Beiträge Seite in den Suchergebnissen angezeigt wird. Was Sie tun, ist signierte Einstellungen einfügen. Aktivieren Sie einfach dieses Kontrollkästchen, um diesen Patch von den Suchergebnissen auszuschließen. Auf diese Weise. Wenn ich irgendetwas, das in diesem Buch enthalten ist, als Postseite bezeichnet wird, tippe, wird es nicht in den Ergebnissen angezeigt. Eine andere Möglichkeit, wie Sie diese Elemente adressieren können, z. B. für Utility-Seiten, möchten Sie auch sicherstellen, dass diese nicht in der Suche enthalten sind. Also lassen Sie uns diese Seite von solchen Website-Suchergebnissen ausschließen. Übrigens denke ich, dass Webflow es standardmäßig tut, aber was Sie hauptsächlich einschließen möchten, ist Blog, Post-Seite. So Blogposts Vorlage. In diesem Fall müssen Sie sicherstellen, dass Sie dies in den Suchergebnissen enthalten haben denn hauptsächlich möchten wir unseren Nutzern ermöglichen, nach bestimmten Blogbeiträgen zu suchen. Und hier haben Sie diese Beschreibungen, die im Grunde die gleichen wie SEO, Titel dunkel und Beschreibung dunkel sind. Aber du kannst sie anders machen. Und was hier interessant ist, ist, wenn Sie es vom SEO-Titel-Tag trennen, können Sie Felder verwenden, Sie können benutzerdefinierte Felder verwenden. Und wenn Sie auf das Feld klicken, kann dieser Suchtitel mit den Daten angereichert werden , die Sie in der Beschreibung im CMS haben. So. Aus diesem Blogbeiträge Vorlagen haben Sie alle verschiedenen Dinge wie akzeptieren und Namen des Blogbeitrags Namen des Artikels verbunden . Und Sie können eine Struktur erstellen, z. B. Namensraum, Bindestrich und dann zum Beispiel Kategoriename. Und dies wird dann als Titel der Suchergebnisse angezeigt. Das ist also ziemlich cool. Und oft möchten Sie diese Einstellungen ändern und einfach den richtigen Namen festlegen, so dass dies für Ihre Benutzer intuitiver ist. Lass mich weitermachen und es retten. Und ich erwähnte auch, dass abgesehen von dem Ausschließen ganzer Seiten aus Ihren Suchergebnissen, was Sie manchmal tun möchten einige Teile der Seite oder Abschnitte der Seite auszuschließen. Also zum Beispiel, wenn Sie nav Menü nehmen, die wir oben auf jeder Seite haben, das wird nutzlos sein, um Ergebnisse aus dem nav Menü zu indizieren. Denn wenn jemand dann suchen würde, sagen wir nach Software oder Marketing oder Mobile, dann ist dieser Header auf jeder einzelnen Seite. So wird jede einzelne Seite als Suchergebnis zurückgegeben. Also wollen wir es nicht wirklich, aber Webflow ist eigentlich schlau genug, um die Indizierung dieser Art von Komponenten zu deaktivieren. Also alle Komponenten, die wir in Einstellungen erhalten, die Blog ausschließen, verwalten Sie Inhalte aus dieser Suche Geld. Dadurch sind Sie sicher, da diese Komponenten auf jeder Seite multipliziert werden, keinen Einfluss auf die Suchergebnisse haben. Und mit den Suchergebnissen und Einstellungen können Sie tatsächlich von der Indizierung alles, was Sie auf Ihrer Seite mögen, ausschließen. Also gesamte Sammlung Liste Wrapper oder Header Abschnitt. Wenn Sie nicht möchten, dass diese Kopfzeile in Suchmechanismen enthalten ist, genügt es, einfach zu Einstellungen zu gehen und dies auszuschließen. So könnten wir auf unserer Homepage zum Beispiel entscheiden, dass wir nicht wirklich wollen diese Header-Abschnitte in die Welle aufgenommen werden. Und das ist eine Komponente, daher wird sie automatisch ausgeschlossen. Aber für alle anderen Überschriften, wir müssen nur oder Heather Abschnitte, wir müssen nur diejenigen aus den Suchergebnissen der Website ausschließen. Wenn wir an unseren Block denken und was wir von diesem Block wollen , um in der lokalen Website indiziert werden, Website-Suchergebnisse. Ich denke, dass wir die Blog-Beitrag-Seiten nur indizieren sollten , so dass, wenn der Benutzer nach etwas sucht, er nur die Artikel aus unserem Block bekommt. Es bedeutet, dass wir in der Regel alles andere außer unserer Blogbeiträge Vorlage in CMS ausschließen wollen . Also lassen Sie uns diese Änderungen auf der Homepage speichern. Und natürlich wollen wir Styleguide ausschließen. Wir wollen komplette Blog-Seite und Blog-Beiträge ausschließen. Lasst uns diese Seite sicher. Und auf diese Weise haben wir nur diese Blogbeitrag Vorlage, die in der Suche enthalten ist und alle Artikel zurückgibt, die der Benutzer sucht. Und übrigens, wenn Sie die ganze Seite ausschließen, können Sie sehen, dass Suchindexeinstellungen für einzelne Elemente ausgegraut sind. Das liegt daran, dass die ganze Seite ausgeschlossen wurde. Sie können also keine Elemente, die sich auf dieser Seite befinden, wirklich ausschließen oder einschließen. Also ja, das macht Sinn. Okay, es gibt noch einen Tipp, den ich für Sie in Bezug auf Suchergebnisse und die Anzeige einiger benutzerdefinierter Daten in den Suchergebnissen habe. Wenn Sie beispielsweise hier ein Lehrbuch hinzufügen möchten, das den Namen der Kategorie vier Blogbeiträge anzeigt, die angezeigt werden. Wie macht man es? Nun, das ist nicht so unkompliziert, denn was wir hier tun können, ist, Texte aus unserem Suchindex zu holen. Und wenn Sie das auswählen, haben Sie alle Felder aus dieser Suchindex-Pseudosammlung zur Verfügung. In der Pseudosammlung haben wir jedoch nicht wirklich den Namen der Kategorie. Ok? Was wir stattdessen tun können, ist das Element zu verwenden, das wir nicht verwenden, wir haben vorher nicht verwendet. So verwenden wir zum Beispiel diese Beschreibung hier nicht. So können wir Suchbeschreibung verwenden und lassen Sie es wie es jetzt ist, aber gehen Sie zu Sucheinstellungen für die Blogbeiträge Vorlage. Und innerhalb solcher Einstellungen können wir einfach die Suchbeschreibung so einstellen, dass unser Kategoriename angezeigt wird. Also lassen Sie uns das gleiche wie SEO deaktivieren und dann das Feld hinzufügen. Und weil dieser Blogbeitrag Vorlage mit der Kategorie verknüpft ist und das CMS in der Beschreibung angezeigt werden kann, der Kategoriename. Also alles, was wir jetzt tun müssen, ist nur diese Website zu veröffentlichen und eine Vorschau darauf. Aber vorher müssen wir nur etwas Styling anwenden. Also gehen wir vielleicht zum Blog. Und hier haben wir diese Elemente, die wir kopieren können. Und es gibt eine Steuerstile. Vielleicht erinnern wir uns einfach an die Namen der Klassen und wenden die Klassen auf dieses Lehrbuch an. Also Lasst uns zuerst Untertitel und dann Command Return noch einmal verwenden, und das wäre dunkel blockiert. Lassen Sie uns auch die Positionierung dieses Elements auf absolut ändern. Und das ist Position zwei, das erste relative Element, das zufällig Suchergebnisse sind. Welcher Wrapper, denke ich, so ist das in Ordnung. Jetzt in der Position müssen wir nur einen Offset auswählen. Aber zuerst, lasst uns eine zusätzliche Klasse haben, damit wir die vorherige nicht durcheinander bringen und wir sie wieder einstellen können oder wir können den Positionsoffset einstellen. Setzen wir den Rand auf, sagen wir sechs Pixel. Und jetzt haben wir es. Wir haben also ziemlich ausgefeilte Suchergebnisse. Und Sie wissen aber alles über die Suche im Web. Also vielen Dank für Ihre Aufmerksamkeit und wir sehen uns in der nächsten Lektion. 23. Benutzerdefinierte Domain: Hallo, Willkommen bei der nächsten Lektion und dieser, lassen Sie uns erkunden, wie Sie eine benutzerdefinierte Domain zu der Website hinzufügen können, die Sie in Webflow erstellen, ist ziemlich einfach, aber dies erfordert einen Hosting-Plan von Webflow. Also, was ich damit meine, Sie müssten einen Hosting-Plan in Webflow-Einstellungen kaufen , um unter Ihrer benutzerdefinierten Domain zu veröffentlichen, was Sie tun können, ist hier klicken, auf den kleinen Link und x zum Veröffentlichungselement klicken und dann Sie werden zu Einstellungen und Hosting-Tab weitergeleitet. Hier haben Sie verschiedene Anlagen für die Website und die Website mit CMS und E-Commerce. Wir verwenden keinen E-Commerce, Also konzentrieren wir uns nicht auf diese Pflanzen, wenn Sie E-Commerce in Ihrer Website Webflow aktivieren, dann wäre dieser Plan Standard für uns, die CMS-Anleihe ist Standard und wir müssen es im Grunde verwenden, weil wir kann nicht wirklich grundlegenden Plan verwenden. Es gibt keine CMS-Unterstützung. Und wenn wir CMS haben, müssen wir nur CMS Bombe verwenden. Das ist ein bisschen teurer. Hier haben wir CMS-API-Zugriff, und wir haben die Website-Suche. Wir haben drei Content-Editoren, und wir haben keine Optionen. Zum Beispiel, kein Formulardatei-Upload, aber wir brauchen das nicht wirklich für unsere Website. So geht es gut, Aktivieren von CMS in Webflow zwingt Sie, ein Web-Hosting in einer Weise zu verwenden , dass es ziemlich schwierig ist, die Elemente zu exportieren, obwohl Sie es mit CSV tun können und dann müssen Sie Ihre eigenen erstellen Welle, Dinge wie diese. Für den Businessplan. Wie Sie sehen können, haben Sie mehr monatliche Besuche und mehr statische. Kennen Sie die gleiche Menge an statischen Seiten, aber mehr Formular-Einsendungen und begrenzt tatsächlich, und auch bis zu 110 Tausend CMS-Elemente. Denken Sie daran, dass Sie jährlich oder monatlich zahlen können, jährlich, Sie sparen nur zwei Monate Arbeit aus dem Hosting. Und die maximale Anzahl von CMS-Artikeln in jedem Werk in Webflow beträgt 10 Tausend. Also musst du das im Hinterkopf behalten. Okay, jetzt habe ich gerade das Hosting hinzugefügt. Ich hatte meine Kreditkarte bereits mit meinem Workflow-Konto verbunden, also sind es nur zwei Klicks, um neues Hosting zu kaufen. Jetzt können Sie hier Ihre Mobiltelefonnummer einrichten. Und das ist ziemlich wichtig, weil Webflow Ihnen dann eine SMS sendet, wenn zum Beispiel Ihr Plan nicht verlängert wird, was bedeutet, dass Ihre Karte abgelaufen ist oder Sie haben keine Schriftarten auf Ihrer Karte oder, Sie wissen, Bankfehler. Also lohnt es sich, einfach die Telefonnummer hier zu setzen, denn dann erhalten Sie die SMS. Offensichtlich werden Sie auch E-Mails bekommen. So können Sie einfach nein sagen oder einfach nur dieses Fenster schließen. Und was Sie hier haben, ist die Möglichkeit, Ihre benutzerdefinierte Domain festzulegen. Und das ist ziemlich einfach. Was Sie jedoch tun müssen, ist, die DNS-Einstellungen bei Ihrem Provider zu ändern. Aber Webflow wird Sie durch das führen. Und ich werde Ihnen zeigen, wie ich es für meinen Provider mache. Was ich tun werde, ist eine vorhandene Domain hinzuzufügen. Ich kaufe keine neue Domain, die der Workflow über Google anbietet. Ich füge nur eine vorhandene Domain hinzu. In meinem Fall ist dies eine Subdomain, daher erfordert Webflow nur, dass ich einen DNS-Eintrag ändern muss , der CNAME-Datensatz ist. Falls Sie eine neue Routendomäne verwenden, werden Sie auch dazu aufgefordert. Erstellen Sie einen weiteren Datensatz und einen Datensatz innerhalb Ihres Anbieters. Und das wäre der Datensatz, der auf Webflow-Server mit der IP verweist. Und in diesem Fall kopieren Sie einfach den Namen dieses Datensatzes und das Volume. Und über Ihren Hosting-Provider gehen Sie zu den Domäneneinstellungen, wählen Sie den Typ des Datensatzes aus. In meinem Fall ist das CNAME, und dann habe ich den kanonischen Namen hier reingesteckt. Einige Anbieter müssen den Punkt hinter dem kanonischen Namen setzen. Für diesen Proxy fühlt sich SSL ruhig an. Manche machen es einfach auf eigene Faust, also musst du es nur ausprobieren. Und dann haben Sie den Gastgeber und den Gastgeber. Sie können den Hostnamen von hier kopieren und einfach darauf klicken und hier einfügen. Und da hast du es. Du akzeptierst es einfach. Und nach einer Sekunde können Sie den Status dieser Weiterleitung überprüfen. Denken Sie daran, dass es manchmal bis zu 24 Stunden dauern kann, aber in der Regel ist es nur ein paar Minuten. Denken Sie jedoch daran, es nicht alle zwei Minuten zu überprüfen , da es auf Ihrer Anbieterseite zwischengespeichert werden kann. Nachdem Sie es überprüft haben, haben Sie normalerweise das verbundene Zeichen und das ist okay. Wenn Sie irgendwelche Probleme haben, warten Sie einfach. Oder Sie können auch zur DNS-Checker WHO-Website gehen. Und dann können Sie überprüfen, wie Ihr DNS über verschiedene Nameserver auf der ganzenWelt verteilt über verschiedene Nameserver auf der ganzen wird, und vielleicht gibt Ihnen dies eine Art von Hinweis. Aber dieser Prozess ist ziemlich nahtlos. Sie können ganz einfach Domains hinzufügen. Und das bedeutet, dass die Domain, die ich in meinem Fall Subdomain hinzugefügt habe, jetzt für mich verfügbar ist, um einen Standard zu machen. Und ich möchte einen Standard machen. Sie müssen also auf diese kleine Startseite Make Default Button klicken , damit diese Domain die Wurzel ist. Dies wird automatisch dazu führen, dass Webflow die Indizierung der Webflow-Subdomain-Site nicht zulässt. Stattdessen wird dies in Google indiziert. Außerdem können Sie eine kostenlose 01 Weiterleitungen verwenden. Das sind also die Weiterleitungen, die Sie von Ihrer alten Website auf die neue Website verwenden möchten, wenn Sie den alten Pfad überhaupt loswerden möchten. Aber Sie wissen, dass dieser alte Puff noch irgendwo ist, könnte immer noch irgendwo im Internet sein. Zum Beispiel veröffentlicht jemand den Link zu dieser alten Website und Sie möchten nicht, dass Menschen verloren gehen. Sie können einfach die alte URL umleiten und einen neuen Pfad erstellen. Und ganz unten haben Sie erweiterte Veröffentlichungsoptionen, und diese ermöglichen es Ihnen, einige Einstellungen zu überprüfen. Aktivieren Sie z. B. SSL. Das ist ziemlich entscheidend. Webflow gibt Ihnen ein kostenloses SSL für jede Ihrer Seiten. Dies ist wirklich wichtig, damit Sie dies überprüft haben. Und in einigen speziellen Fällen möchten Sie vielleicht mit Ihrem DNS-Anbieter zu konsultieren, mit Ihrer Domain, registrieren Sie sich mit den richtigen Einstellungen für das SSL. Und hier ist der Link, um das zu überprüfen, aber normalerweise funktioniert es einfach aus der Box. Dann haben Sie die Möglichkeit, HTML und CSS und JS zu ändern. Und das sind Optionen, die Sie verwenden könnten oder nicht. Diese Optionen finden Sie auch im Veröffentlichungsmenü im Designer. Und wenn Sie jetzt im Menü Veröffentlichen zum Designer gehen, werden Sie sehen, dass Sie diese zweite Domain jetzt haben, die Sie unter veröffentlichen können. Also das, in meinem Fall, die Sub-Domain. Wenn Sie es auswählen, können Sie einfach veröffentlichen, um die Auswahl und Domäne aufzuheben. Denken Sie daran, dass Sie weiterhin die Möglichkeit haben, in Ihrer Webflow-Subdomain zu veröffentlichen. Und das ist ziemlich cool, weil Sie den Arbeitsentwurf Ihrer Website hier veröffentlichen können. Und dann, wenn Sie bereit sind oder die Genehmigung von Ihrem Kunden erhalten, dann können Sie auf Ihrer offiziellen Website veröffentlichen, auf der offiziellen Domain. Und in den erweiterten Optionen finden Sie alle Optionen, die ich erwähnt habe. So können Sie zum Beispiel auch CSS minimieren , so dass die Website etwas kleiner ist und schneller tiefer ist. Und übrigens, wenn Sie Webflow-Server verwenden, haben Sie automatisch CDNs aktiviert. Dies ist eine großartige Infrastruktur für Ihre Nutzer auf der ganzen Welt, die versuchen, auf Ihre Website zuzugreifen. Sie erhalten die Website nur von dem Server, der ihrem Standort am nächsten ist. So sind CDNs wirklich, wirklich großartig und es kann auch viel Verkehr bewältigen. Zum Beispiel, wenn Sie, wenn Sie Tickets oder so etwas verkaufen, und viele Leute gleichzeitig besuchen Ihre Website. Sie werden automatisch gehobenen Wert. Sie müssen nicht bezahlen, und das wird den Verkehr bewältigen. Diese Option für sichere Frame-Header ist für die Einbettung Ihrer Website als iframe gedacht. Und standardmäßig ist es für Geschäfte aktiviert. Ich glaube nicht, dass es für den Moment wirklich wichtig ist, also lassen Sie es einfach deaktiviert. Und jetzt, wenn Sie veröffentlichen, veröffentlichen Sie gleichzeitig in beiden Domänen. Außerdem erhalte ich die Meldung, dass der Suchindex aktualisiert werden muss. Dies ist, wenn Sie zum ersten Mal veröffentlichen, und Sie müssen bis zu fünf Minuten warten, damit die Suchergebnisse ordnungsgemäß funktionieren. Denken Sie daran, dass Sie jederzeit, wie ich Ihnen in einem der vorherigen Lektionen gezeigt habe, zu Einstellungen hier gehen und zu Suchen gehen können. Und Sie können manuell indizieren. Wenn Sie jetzt auf Index klicken, können Sie eine Indizierung pro Tag durchführen. Und auch wenn Sie möchten, dann wird Webflow automatisch planen und indizieren Ihre Suche alle drei Tage. So funktioniert es und ich schätze nicht. Jetzt, da unsere Website auf beiden Domains veröffentlicht wird, sind wir ziemlich sicher zu gehen und unsere Website an alle unsere Benutzer und Redakteure zu verteilen , damit Änderungen vornehmen können. Das ist es also für die benutzerdefinierte Domäne und Optionen. Danke fürs Zuhören und sehen uns in der nächsten Lektion. 24. Leere Staaten: Hallo, Willkommen bei der nächsten Lektion. Sobald wir die echten Suchergebnisse haben, können Sie sehen, dass ein Bild fehlt. Wir haben dieses Bild aus dem Suchbild, und wenn wir es deaktivieren, können Sie die Vorlage für das Bild sehen, aber wir haben nicht wirklich diese Bilder in unserem Suchindex geladen. Was wir also tun müssen, ist, dass wir überprüfen müssen, woher diese Bilder kommen. Und aus diesem besonderen Grund müssen wir die Vorlage für Blogbeiträge öffnen. Dies ist also die Seite, die uns mit den Bilddaten anregen sollte. Und innerhalb der Sucheinstellungen, wir haben ein solches Bild wählen Bild für ein solches Ergebnis, wir haben das gleiche wie Open Graph-Bild-URL. Aber wenn wir zu Open Graph-Einstellungen gehen, haben wir hier nicht wirklich ein Bild verlinkt. Was wir also tun müssen, ist, dass wir das Bild aus dieser Sammlung verknüpfen müssen, entweder hier oder deaktivieren Sie dies. Und wir müssen das Bild verknüpfen, das wir in der Sammlung haben, um als OG-Bild oder Website-Sucheinstellung Bild verknüpft werden . Und nur dann werden wir die richtigen Bilder in unseren Suchergebnissen angezeigt. Nun, das reicht nicht. Wir müssen es speichern, und wir müssen auch unseren Suchindex neu aufbauen. Nun, es sollte erscheinen, aber wir können es nicht sehen. Wir müssen zu einer globalen Einstellungen gehen und dann in der Suche wird jetzt auf den Index gehen. Und das wird das machen, wir werden gezwungen, in einem gut genährten Index wieder aufzubauen. Geplante Indizes sind alle freien Tage, so gut für alle drei Tage wird durch Ihre Beiträge gehen und alles indizieren. Wenn Sie es jedoch manuell machen möchten, können Sie es einfach in Webflow wie folgt erzwingen. Und jetzt haben wir diese Bilder beginnen hier zu erscheinen. Auch das zweite, was ich gerne zeigen möchte, wie in diesem Suchergebnis-Wrapper, können wir in den zweiten Zustand gehen. Also haben wir diesen Standardzustand drin, aber auch der zweite Zustand ist keine Ergebnisse. Wenn dies also keine Ergebnisse liefert, erhalten wir dieses Datum, das nicht so attraktiv ist. Wir können auf Styling wenig arbeiten und für Suchergebnisse, Es ist besonders nützlich, weil Benutzer oft werden wir die Ergebnisse bekommen, Ich denke, so müssen wir nur kümmern, dass. Ich werde die drei Bilder importieren, die ich habe. Und jetzt können wir dieses erste Bild verwenden, um im leeren Zustand unserer Suchergebnisseite anzuzeigen. Lassen Sie uns die Anzeige dieser Elemente so einstellen, dass die Richtung vertikal biegt, und positionieren Sie sie in der Mitte vertikal und horizontal. Lassen Sie uns auch etwas Padding oder Marge anwenden, so dass wir es zentriert haben, mit einigen schönen Leerzeichen um dieses Element. Und hier haben wir nicht viel Ergebnis in den Suchergebnissen, ist jedoch nicht der einzige Ort, die Suchergebnisse, wenn wir leere Elemente erhalten können, leere Zustände. Die anderen Elemente wären für Sammlung CMS Sammlungselemente, die aus irgendeinem Grund leer sind. Zum Beispiel, wenn wir etwas aus der mobilen Kategorie anzeigen möchten, aber es gibt keine Beiträge in der mobilen Kategorie. Also im Grunde für alle die Sammlung am wenigsten Gummis, die Sie jetzt auswählen können, wenn Sie zu den Einstellungen gehen, können Sie in den leeren Zustand der UI gehen. Und im Moment sieht das ein bisschen Müll aus. Was wir also tun wollen, ist, diesen leeren Zustand anzugehen. Übrigens können Sie in navigiert sehen, dass wir auf alle Elemente dieses leeren Zustandes zugreifen können und wir sie neu gestalten können. Also lassen Sie uns die Anzeige auf Flex setzen und wir werden es später ausrichten. Lassen Sie uns nun die Ränder mit Option ändern. Ich werde den Rand sowohl für oben als auch unten anpassen. Und lasst uns auch die Hintergrundfarbe loswerden. Hier haben wir dieses Lehrbuch. Wir können hier ein Bild hinzufügen und eines der Bilder auswählen, die ich hochgeladen habe, vielleicht dieses. Und gehen wir zurück zu den Einstellungen oder machen Sie die Ausrichtungseinstellungen dieses leeren Zustands. Zweitens muss dies auf vertikal eingestellt werden und Mitte und Mitte ausrichten und ausrichten. Dann haben wir diese leeren Zustände zur Klasse, die wir vielleicht in einen leeren Zustand Wagen ändern möchten. Und es wäre klug, dies einfach als leeren Zustand für buchstäblich alles zu verwenden , was wir einen leeren Zustand hinzufügen möchten, nicht nur diese Sammlung, aber es gibt ein Problem mit diesem Bild würde einfach kopieren und Fügen Sie dieses Bild immer und immer wieder ein. Also, was wir tun können, wie für die leeren Zustandskarten, wenn wir das Bild jetzt loswerden, können wir dies als CSS-Hintergrund anwenden, und dann können wir nur diese leere Zustandskarte Klasse verwenden , um diese Einstellungen, dieses Bild. Also lassen Sie mich den Hintergrund zu diesem Bild ändern , das wir für den leeren Zustand haben kann nicht Glas. Und lassen Sie es so einstellen, dass es Position zu Mitte abdeckt. Und dann keine Fliesen, ich denke, dass es jetzt fertig sein sollte. Okay, jetzt lasst uns einfach die Marge etwas anwenden. Und lassen Sie uns auch die Polsterung ändern, weil dies uns das Lehrbuch, das keine Elemente gefunden hat, ganz nach oben verschieben lässt. Und ich schätze, das war's. Jetzt können wir den Namen dieser Klasse kopieren und sie buchstäblich überall verwenden, wo wir wollen. In diesem leeren Zustand wenden wir einfach die leere Zustandskartenklasse an und dort haben Sie sie. Okay, auf diese Weise haben wir diesen benutzerdefinierten, aber wiederverwendbaren leeren Zustand für Elemente gemacht , die nicht innerhalb des CMS gefunden werden, zum Beispiel. Und ich glaube, das war's. Also hoffe ich, dass es Ihr Leben ein bisschen einfacher macht, wiederverwendbare Elemente wie diese zu haben. Und das ist auch bei, über die leeren Zustände und Suche. Vielen Dank. Wir sehen uns in der nächsten Lektion. 25. Website-Editor: In Webflow gibt es eine schöne Möglichkeit, mit der Ihre Mitarbeiter Ihre Seite bearbeiten können. Und das kann Ihr Kunde sein, das kann Ihr Kollege sein. Sie können buchstäblich alles auf der Seite bearbeiten, einschließlich der Sammlungen und deren Elemente. Sie haben diese kleine Schaltfläche Seite bearbeiten, wenn Sie diese Seite als angemeldeter Benutzer eingeben. Sie müssen also das Webflow-Konto haben, und dann müssen Sie Berechtigungen haben, um diese Seite zu bearbeiten, um diese kleine Schaltfläche zu sehen. Also, jetzt bin ich in Designer eingesperrt, und das ist, warum ich, von ihrem Zugriff auf den Editor direkt. So kann ich das im Browser bearbeiten oder ich kann zu den Projekteinstellungen gehen und die Einstellungen für zusätzliche Editoren anpassen. Wenn Sie auf die Registerkarte Editor gehen, werden Sie sehen, dass wir Mitarbeiter hier und auch einige Branding Optionen, die für Ihre Editoren angezeigt werden und Sie können ein Upload Ihr Logo hier ändern. Aber was am wichtigsten ist, ist, dass wir Mitarbeiter haben und vorerst nur ich, aber ich kann bis zu drei Mitarbeiter auf jeder Seite hinzufügen, auf jeder Seite. Und ich kann einfach ihre Email-Adressen eingeben. Wenn sie noch nicht über das vollständige Konto verfügen, müssen sie das Konto erstellen. Aber sobald sie es tun und sie haben die Einladung zu diesem, Bearbeiten, diese Seite, werden sie in der Lage sein, zum Browser und direkt im Browser zu gehen. nach der URL Ihrer Website Setzen Sienach der URL Ihrer Websiteein Fragezeichen und bearbeiten Sie es dann und schalten Sie es dann automatisch in den Editor-Modus. Sie können ganz unten sehen, dass wir dieses Webflow-Logo haben und alle Elemente auf unserer Seite verhalten sich tatsächlich ein bisschen anders. Denn jetzt können wir auf statische und dynamische Elemente der Seite zugreifen und sie im laufenden Betrieb ändern. Es bedeutet, dass Sie buchstäblich alles ändern können, indem Sie auf diese Schaltfläche „Bearbeiten“ klicken. Und wenn Sie den Namen der Beiträge in der Sammlung ändern möchten, können Sie dies so tun. Wenn Sie die statischen Elemente ändern möchten, können Sie dies auch auf die gleiche Weise tun . Aber wenn Sie etwas zu den vorhandenen CMS Sammlung Elemente hinzufügen, Was ist wirklich cool ist, dass Sie buchstäblich ändern können es in der CMS Sammlung. Wenn Sie beispielsweise das Bild von dort aus ersetzen, wird es im gesamten TMS geändert. Und das funktioniert für alle statischen und dynamischen Inhalte. Sie können also den Mauszeiger über die Elemente bewegen und sie dann ändern und ersetzen. Zum Beispiel, jetzt, wenn ich auf die einzelne Beitrag-Seite gehe, was ich tun kann, ist auf die Schaltfläche Bearbeiten neben dem reichen Lehrbuch klicken, das ich habe. Und da dies ein reichhaltiges Lehrbuch ist, lässt es mich zum Beispiel die Elemente auswählen und die Überschriften ändern. Sie können den Text fett formatieren oder sogar neue Elemente einfügen. Wenn Sie die Eingabetaste drücken, können Sie Text hinzufügen. Sie können keine Ambits oder Anführungszeichen oder irgendetwas darin enthalten, weil dies ein Reach Textelement ist. Wenn Sie nun Änderungen vornehmen, haben Sie unten die Informationen, dass freie unveröffentlichte Änderungen vorhanden sind. Sie haben die Editor-Änderungen, die ich jetzt veröffentlichen muss , damit sie live auf der Website sind. Also, bevor ich veröffentliche, bin ich nur im Bearbeitungsmodus und ich erstelle nur einen Entwurf. Ich kann zur Live-Seite zurückkehren und meine Bearbeitungen sind nicht mehr sichtbar. Und das liegt daran, dass ich sie noch nicht veröffentlicht habe. Aber wenn ich zurück zur Bearbeitung gehe, werden Sie sehen, dass ich immer noch diese Änderungen habe, QT für die Veröffentlichung und ich kann sie veröffentlichen. Jedesmal, wenn ich will. Wenn ich jetzt klicke und freie Änderungen veröffentliche, wirkt sich dies nicht nur auf den statischen Teil der Website aus, sondern ich habe auch Kategorie-Software bearbeitet und dies gilt für mein CMS. Außerdem gibt es viel intuitivere Möglichkeit, mit CMS zu arbeiten, als einfach auf die Elemente zu klicken und durch alle Beiträge zu scrollen und sie zu veröffentlichen und zu gewellten, es erneut zu veröffentlichen. Sie können die Seiten in diesem unteren Menü bearbeiten. Hier können Sie zu Projekteinstellungen und Dashboard und Designer gehen, aber Sie können auch auf Seiten klicken. Und hier können Sie alle Seiten sehen, die verfügbar sind und von hier aus zugänglich sind. Sie können die Seiteneinstellungen von dort aus ändern. Also zum Beispiel, wenn Sie OG-Tags oder Suchindexeinstellungen oder so etwas bearbeiten möchten oder wollen . Er kann es innerhalb dieser Einstellungen in C tun, dass alle SEO-Einstellungen und die anderen, die ziemlich wichtig sind, hier zugänglich sind. Sie müssen also niemandem die Berechtigung geben Designer zu verwenden und sich mit der Website zu verwirren. Er kann direkt hier rein gehen und einfach die Meta-Beschreibung und Titel-Tag verwenden und alles entsprechend ändern. Leider können Sie die verschiedenen Berechtigungen für Editoren nicht wirklich festlegen, aber was sie tun können, ist, anstatt das zu speichern, was vor der Veröffentlichung nicht sichtbar ist. Sie haben diese unveröffentlichte Änderung, damit jemand sie speichern kann und dann Sie können es überwachen. Sie können es auch als Entwurf speichern. Dies ist also die erste, erste Version davon, so dass es nicht einmal zu diesen unveröffentlichten Änderungen geht. So kann jemand daran arbeiten und es als Entwurf speichern , wenn er bereit ist, es als unveröffentlicht zu setzen. Er geht zu ihm, wird es retten. Und dann können Sie einfach überprüfen, ob alles in Ordnung ist und klicken Sie auf Veröffentlichen, um dies auf Life-Website zu veröffentlichen. Dasselbe geschieht für Sammlungen. Sie können hier eine Vorschau aller Sammlungen anzeigen, und Sie haben einen anderen Status ist für alle Sammlungselemente. Zum Beispiel, hier habe ich einige Etappenänderungen. Es bedeutet, dass, wenn ich diese Änderung veröffentlichen klicke, Go Live. Aber es gibt andere Staat sagt, dass ich erstellen kann. Ich kann natürlich alle Artikel von dort hinzufügen und es ist viel intuitiver, als sie im Browser zu bearbeiten. Ich kann ein neues Sammlungselement hinzufügen. In diesem Fall kann ich auf Hinzufügen neuer Blogbeiträge klicken. Und wir haben alle Felder, die im CMS hier definiert sind, können Sie sehen, dass alle von ihnen obligatorisch sind. Sie können sich entscheiden und Designer in CMS, Sie haben den Rich-Text-Inhalt hier, so können Sie Bilder oder Einbettungen oder Videos hinzufügen. Sie müssen das Kategorie-Tag auswählen und für die Blog-Beiträge anbieten. Und wenn Sie eine erstellen, müssen Sie sie nicht wirklich für Änderungen bereitstellen, indem Sie die Schaltfläche Erstellen drücken. Nun, Sie können stattdessen tun, ist Sie können diesen Beitrag planen oder Sie können ihn als Entwurf speichern. Wenn Sie diesen als Entwurf speichern auf Veröffentlichen klicken, wird dieser nicht veröffentlicht, da es sich um einen Entwurf handelt. Sie können zum Entwurf zurückkehren, und Sie können ihn mehrmals speichern und er wird nicht bereitgestellt, um mit Ihnen veröffentlicht zu werden, stattdessen können Sie diese vier veröffentlichen, oder Sie können sofort veröffentlichen. Und dann wird es live gehen, ohne auch nur auf Publish Button zu denken. Oder Sie können für Publish inszenieren. Und wenn Sie es inszenieren, dann muss jemand auf die Schaltfläche Veröffentlichen klicken , damit dieser Beitrag auf Ihrer Website angezeigt wird. Die andere Option, die Sie als Zeitplan haben. Und Sie können den bestimmten Zeitpunkt und das Datum auswählen, an dem Ihre Beiträge veröffentlicht werden, und wenn dieses Datum kommt, wird es automatisch auf der Live-Website veröffentlicht. Jetzt werde ich es absagen. Und wie Sie sehen können, können Sie alle Sammlungen auf Ihrer Seite bearbeiten. Darüber hinaus haben Sie auch Formularübermittlungsdaten. Also, wenn Sie irgendeine Form haben, wie wir unser Newsletter-Formular haben, wenn jemand fühlt sich in der Form, dass die Daten hier gehen. Von dort aus können Sie es als CSV exportieren oder einfach nur eine Vorschau der Daten anzeigen. Offensichtlich ist dies nicht der beste Weg, um beispielsweise Ihre Formularübermittlungen zu verwalten . Aber eine der anderen Lektionen werde ich Ihnen zeigen, wie Sie dies mit Zapier oder Integral Matt für das Konto persönliche Informationen dort verbinden Sie haben auch Hilfe und Unterstützung und Sie können ohne Veröffentlichung Änderungen schauen oder Sie können zum Designer gehen, aber das ist nur für diejenigen verfügbar, die die Autoren der Seite sind. Sie müssen also dieses Projekt in Ihrem Webflow-Dashboard haben, um zum Designer gehen zu können. Und von Designer können Sie auch von hier aus veröffentlichen. Wenn Sie über den Designer veröffentlichen, werden die Änderungen, die von den Editoren bereitgestellt werden, ebenfalls veröffentlicht. Ich habe Ihnen gesagt, dass es keine Möglichkeit gibt, den Zugriff für Designer auf bestimmte Teile und Elemente zu beschränken . Aber vom Designer, was Sie tun können, wie Sie zu den Einstellungen eines beliebigen Elements gehen können und Sie haben dies. Mitwirkende können dieses Element bearbeiten. Wenn Sie dieses kleine Kontrollkästchen deaktivieren, wird dies zum Beispiel diese Überschrift 1 für eine Änderung im Editor nicht verfügbar machen . Daher können Editoren keine Änderungen an dieser Überschrift vornehmen, Sie können auch größere Teile Ihrer Website, ganze Abschnitte oder vielleicht ganzen Körper von der Bearbeitung ausschließen, wenn Sie verhindern möchten, dass Personen etwas auf dieser bestimmte Seite. So können Sie den Zugriff einschränken. Und abgesehen davon, denken Sie daran, dass Sie diese verschiedenen Status haben. Beispiel: Staging oder Entwürfe, die Sie im gesamten Team verwenden können , um die Inhalte auf Ihrer Seite zu verwalten. Okay, ich glaube, das war's für den Redakteur. Danke, dass du diese Lektion gesehen hast und wir sehen uns in der nächsten. 26. SEO-Tipps Teil 1: Hallo, Willkommen bei der nächsten Lektion. Lassen Sie uns ein wenig über SEO reden. So, wie Sie Ihre Website besser in Bezug auf Barrierefreiheit und auch für Crawler machen , so dass sie gut indiziert ist, in der Google-Suchmaschine. Das erste, was ist die Struktur Ihrer Seite. Dies ist ziemlich offensichtlich, aber Sie sollten gegebenenfalls Abschnitte verwenden. Und auch wenn Sie zum Beispiel Abschnitt in den Einstellungen auswählen, können Sie geeignete HTML-Tags wie Artikel oder so etwas auswählen. Wenn Sie einen aussagekräftigen Text verwenden, sollten Sie Überschriften oder Absätze verwenden, da dies Google mitteilt , dass dieser Text wichtiger ist als die anderen Texte. Zum Beispiel ist Überschrift eins wichtiger als H2, und vor allem sollten Sie div-Blöcke für nichts anderes als Stylingzwecke verwenden. Große Hunde sind also eher technische Elemente. Und wenn Sie etwas erstellen möchten, das die Bedeutung für den Browser haben soll, Sie besser am Ende mit Artikeln oder Leasing, oder Überschriften oder Absätze, oder Sie können am Ende mit, sagen wir Abschnitt. Aber dann können Sie in den Einstellungen dies ändern, sagen wir beiseite oder Artikel. Nun, was Sie tun können, um besser zu machen, Google besser verstehen Ihre Website als auch, ist nicht zu viele Elemente in den Navigator-Bereich zu verschachteln. Stellen Sie also sicher, dass Ihre Struktur sauber ist und Sie nicht viele verschachtelte Elemente haben. Eine weitere große Tiefe für Barrierefreiheit und Suchmaschinenoptimierung geht auch auf Bildeinstellungen. Und hier haben Sie die alte Steuer. Im Grunde sollten alle Bilder entweder den alten Stack haben, alles in der neuesten Version von Webflow, es gibt eine Option zu erklären, dass dies nur ein dekoratives Bild ist und keinen alten Angriff benötigt. Ein weiterer Tipp, den ich Ihnen geben kann, ist, den alten Text festzulegen , nachdem Sie eine Website im Bedienfeld „Assets“ erstellt Sie können mit der rechten Maustaste auf das Element auf dem Bild im Bedienfeld „Elemente“ klicken. Und dann können Sie das ALT-Tag zu allen Bildern und fast auf einmal hinzufügen. So ist es ziemlich bequeme Möglichkeit, alte Steuern zu erstellen. Aber wie auch immer, Sie sollten kümmern sich um die alte Steuer und vor allem für die Bilder, die auf Ihrer Seite beschreibend sind. Und übrigens, in den neuesten Versionen eines Webflows, wenn Sie Ihre Seite veröffentlichen, haben Sie auch den Status der Barrierefreiheit Ihrer Website sowie einige Dinge, die Sie auf der Seite verbessern können. Und wenn Sie keine alten Stapel haben, wird es Sie auffordern, dass Sie sollten, sollten Sie sich darum kümmern. Wenn Sie also veröffentlichen, können Sie einfach überprüfen, welche Bilder fehlen. Die alte Steuer. Eine weitere Sache ist das Löschen der Bilder aus Webflow. Was Sie tun können, ist, Sie können zu Assets gehen und Sie können nur buchstäblich jedes Bild löschen und dann ihre Website erneut veröffentlichen. Und dann werden alle Bilder, die auf Ihrer Leinwand im Designer verwendet werden, wieder in den Assets verfügbar sein , weil manchmal gibt es viele verschiedene Bilder in den Assets, die Sie buchstäblich nicht auf Ihrer Website verwenden. Dies ist nicht schädlich für Ihre Position auf, in Google, aber dann schmerzhaft, um alle alten Steuern zu erstellen. Und auf diese Weise können Sie sie einfach löschen, die Seite erneut veröffentlichen und sie werden wieder angezeigt, aber nur die Bilder, die auf Ihrer Website veröffentlicht werden. Okay, als nächstes haben wir die Einstellungen für einzelne Seiten sowie globale Einstellungen für Ihre Website. Wenn Sie auf Seiten gehen und Sie überprüfen Sie die Einstellungen für einzelne statische Seiten haben wir hier, und auch Dienstprogramm und den Handel. Jede Seite wie diese hat einige Einstellungen. Im Allgemeinen Teil der Einstellungen haben Sie den Namen des Patienten und dies ist nur für Web für Zwecke, es ist nirgendwo in Ihren Suchergebnissen erscheinen. Aber hier haben Sie sehr wichtige SEO-Einstellungen. Diese sind für jede Seite, die Sie erstellen, getrennt. Und selbst Sie haben diese Suchergebnisvorschau, die Ihnen einen Überblick darüber gibt, wie dies aussehen wird und in den Google-Suchergebnissen. Nun, was haben Sie oben als Titel-Tag? Dies ist wahrscheinlich eines der wichtigsten Dinge in Bezug auf SEO. Und Sie sollten auf jeden Fall Steuern für alle Ihre Seiten betitelt haben. Im Titel sollten Sie eine saubere und kurze Beschreibung Ihrer spezifischen Seite haben. Und Webflow empfiehlt, dass es ungefähr 55 Zeichen oder weniger ist. Und das ist einfach, weil es in einer Zeile angezeigt wird. Und wenn das mehr ist, wird es abgeschnitten. Und was ich tun werde, ist dieses ASCII-Punkt-Symbol zu kopieren und einzufügen und es einfach in den Titel zu setzen. Und in den Suchergebnissen können Sie sehen, dass dies ein bisschen attraktiver ist, kann von anderen Ergebnissen abweichen. Also ich denke, das ist ein netter Trick, um dieses Ergebnis attraktiver zu machen sowie Kamel Fall zu verwenden. Und wenn Sie einige der offensichtlich mit Ihrer Website verbundenen Schlüsselwörter verwenden können, verwenden Sie sie einfach am Anfang des Titels oder irgendwo nahe am Anfang des Titels, denn dies ist wahrscheinlich eines der, einer von die wichtigsten Dinge in Bezug auf dieses Schlüsselwort, das in den Serben aufgenommen wird. Also Suchergebnisse. Und das wird Ihre Website näher an die Top-Ergebnisse bringen. Wenn es ein Schlüsselwort gibt, das in dem Titel, nach dem jemand sucht, für die Meta-Beschreibung, Google sagt, dass es in Bezug auf Keywords nicht wirklich nützlich ist. Es scannt es nicht nach Schlüsselwörtern, nach denen der Benutzer sucht. Aber Meta-Beschreibung ist super wichtig, weil sie direkt unter deiner URL und dem Titel in den Serben angezeigt wird . Also machen Sie es besser interessant. Es ist immer besser, die Meta-Beschreibung kurz zu halten. Ungefähr 150 Wissenschaften, okay? Und was ich dort habe, ist zum Beispiel, Ich habe diesen Kamelfall und auch n Sinus. Und ganz am Ende habe ich mich mit Fragezeichen interessiert. Und diese Art von vielleicht macht dies ein bisschen interessanter für einen Benutzer zu klicken , so dass wir nette CTA am Ende der Meta-Beschreibung haben. Also habe ich versucht, den CTA zu haben, zum Beispiel, überprüfen oder vielleicht interessiert oder jemand wie diesen. Und wahrscheinlich bekommt dies ein wenig mehr CPRs in den Google-Suchergebnissen. Bitte geben Sie noch einmal Ihre Meta-Beschreibung ein, es ist etwas, das für diese Seite relevant ist. Und ich, für die Open Graph-Einstellungen, gibt es ziemlich wichtig, aber nicht wirklich für Google so viel wie für soziale Medien und die anderen Dienste. Das werde ich später erklären. Einstellungen für die Websitesuche daran, dass dies nicht bedeutet, dass Sie diese Seite von Google ausschließen. Es verbindet sich nur mit Ihrer internen Suche, die wir in einer der vorherigen Lektionen erstellt haben. Dies ist also nicht mit SEO in Zusammenhang und Sie können es ausgeschlossen halten , während es immer noch in den Suchergebnissen in Google angezeigt wird. Und dann haben Sie benutzerdefinierten Code , der in Bezug auf SEO ziemlich wichtig ist, besonders wenn Sie einige Websites von den Suchergebnissen ausschließen möchten. Im Head Stack können Sie jedoch auch viele verschiedene Meta-Tags verwenden, die Sie erstellen können. Mit Schlüsselwörtern können Sie beispielsweise Meta-Schlüsselwörter verwenden und dort einige Schlüsselwörter einfügen. Während Google offen ist, dies nicht wirklich in Betracht zu ziehen, während die Erstellung von Suchmaschinen-Rankings. Ich schätze, das ist ziemlich wichtig. Und wenn Sie Zeit haben, können Sie dies einfach zu Ihren Websites hinzufügen, denn für einige Anwendungen, einige Suchmaschinen, könnte es in Betracht gezogen werden. Dies ist also eines der Meta-Tags, die Sie auf Ihrer Website verwenden können, aber es gibt tatsächlich viele verschiedene Meta-Tags, die Sie auf der W3C-Website überprüfen können. Und hier haben Sie alle verschiedenen Metadaten wie Arthur und Viewport und Beschreibung und Schlüsselwörter und solche Sachen. Also, im Falle von einigen von ihnen, Webflow kümmert sich um sie seit Jahren wie Beschreibung, Sie haben ein separates Feld. Aber wenn Sie weitere nasse Angriffe hinzufügen möchten, können relevant für Ihre Website sein. Sie können dies tun, vor allem, Sie können Roboter-Metadaten hinzufügen, und steuern Sie die Sichtbarkeit Ihrer Seiten über diesen Metatag. Und ich empfehle Ihnen dringend, diese Seite in Google-Suchartikeln zu betrachten. Und es gibt viele Informationen über Roboter-Metadaten. Normalerweise verwenden Sie diesen Metatag einfach, um dies eine bestimmte Seite oder ganze Webseiten aus dem Index auszuschließen. In diesem Fall verwenden Sie Metallnamen-Roboter und Inhalts-No-Index. Dann kann es durch ein Komma gefolgt werden und Sie können folgen oder nofollow hinzufügen, zum Beispiel für Roboter, um die Gebäude auf dieser Website sichtbar zu folgen und Croll, einige andere Websites, auf die diese Website verlinken. Aber wenn Sie keinen Index setzen, ist dies ein Vorschlag für den Roboter, dass er diese bestimmte Seite niemals indizieren sollte. Und der Ort, wo Sie diese Metonym Robots Inhalt no-index setzen ist entweder auf den einzelnen Seiten Ihrer wie wir für unsere Homepage oder Blog-Seite haben. Oder Sie setzen es einfach global in Ihre Einstellungen auf alle Seiten Ihrer Website und dann wird nichts indexiert. Nun, zu entscheiden, was indiziert wird und was nicht, ist ziemlich wichtig in Bezug auf SEO. Zum Beispiel, für unseren Blog, ich weiß nicht, ob wir notwendigerweise alle Seiten indizieren müssen. Insbesondere können wir technische Seiten von der Indizierung wie 40 für und Style Guide und die anderen ausschließen . Aber wir nicht wirklich wahrscheinlich halb zu indizieren, blockieren alle Beiträge, weil die gleichen Elemente, die gleichen Artikel sind auf der Blog-Seite und auf Kategorieseiten. Und übrigens, wenn Sie überprüfen möchten, ob diese Seite bestimmte Seite indiziert wird, können Sie Google-Website oder -Seite einfügen. Und dann können Sie überprüfen, welche Art von Links werden Index von, sagen wir Kälte, dass wie Domäne. Und dann können Sie sehen, ob dieser Methianin-Roboter Inhalt no-index wirklich gut funktioniert. Dies ist nur ein Vorschlag für die Roboter. In den meisten Fällen sollte es jedoch wirklich gut funktionieren. Und wieder, dies ist nur für die spezifische Homepage. Wir schließen die spezifische Homepage für Serben aus. Wenn Sie jedoch die gesamte Website von der Indizierung ausschließen möchten, können Sie die Einstellungen dieser Seite in Webflow aufrufen. Und hier haben Sie ein benutzerdefiniertes Code-Tag. Da. Sie können den Code einfügen, der für alle Seiten ist, aber ich werde Ihnen das in der nächsten Lektion zeigen. 27. SEO-Tipps Teil 2: Hallo dort und willkommen zur nächsten Lektion. Dies ist der zweite Teil unserer SEO-Tipps in Webflow. Jetzt bin ich in meinen Projekt-Einstellungen für Juden und blockieren Website. Und was ich tun kann, ist Ihnen diese benutzerdefinierte Code-Tab zu zeigen, über die ich früher gesprochen habe. Hier haben Sie den Headcode und dieser Code wird auf jeder Seite Ihrer Website enthalten sein. Es bedeutet, dass, wenn Sie hinzufügen möchten, sagen wir Meta-Schlüsselwörter hier, oder vielleicht möchten Sie einfach von der Indizierung aller Seiten loswerden und Metallroboter keinen Index erstellen. Sie können es einfach zum Headcode hinzufügen und es wird auf alle Ihre Seiten verteilt. Jetzt können Sie auch auf den SEO-Tab gehen, der die wichtigste globale Registerkarte für Ihre Einstellungen ist, abgesehen von der Einstellung für einzelne Seiten, über die ich in der vorherigen Lektion berichtet habe. Und es lohnt sich auch, das Hosting, das Sie haben, und die Einstellung der Domain zu überprüfen. Stellen Sie einfach sicher, dass Sie es auf Standard gesetzt haben, dass Ihre Hauptdomäne hier auf Standard gesetzt ist , da Sie hier möglicherweise verschiedene Domänen haben. Und dies verhindert, dass Google alle Domains indiziert, die Sie haben. Und wenn Sie dies übrigens als Standard sagten , wird die Webflow-Domain automatisch umgeleitet. Ich meine, es wird keine Webflow-Domain in den Suchergebnissen enthalten. Daher deaktiviert Webflow automatisch die Indizierung der Webflow-Subdomain, auf der Sie Ihre Website haben. Und stattdessen wird es immer diese Domain Ihrer wichtigsten für Google verwenden. Auf diese Weise werden Sie den duplizierten Inhalt und die Strafe von Google für diesen duplizierten Inhalt loswerden . Und übrigens, in SEO, ist die erste Einstellung für die Indizierung. Und wenn Sie es auf yes setzen, wird die Indizierung dieser Webflow-Subdomäne deaktiviert und dies sollte jederzeit festgelegt werden , wenn Sie Ihre eigene Domain verbunden haben und als Standard festgelegt haben. Als nächstes haben wir Roboter Abschnitt, und dieser Abschnitt wird wieder verteilt und enthalten für alle Ihre Sub, Unterseiten. Also für die gesamte Website. Also, welche Regeln Sie für Roboter hier festlegen, werden global auf Ihre Website angewendet. Roboter dot txt ist ziemlich wichtig. Aber im Gegenteil, was die Leute denken, zumindest einige von ihnen, wird dies Google nicht daran hindern, Ihre Seiten zu indizieren. Stattdessen wird dies verhindern, dass Ihre Websites, insbesondere die Verwaltung von technischen Websites und solche Dinge, von Anfragen von Benutzeragenten, von Robotern, die versucht haben, den Inhalt herunterzuladen und kennenzulernen, bombardiert werden. Dies ist also die Richtlinie für Roboter, zum Beispiel, nicht zu berücksichtigen, diese Website nicht zu nehmen und Anfragen zu senden. Und Sie können auch die Artikel auf Google hinzufügen oder einfach auf den Link im Webflow-Panel klicken , um Roboter zu besuchen nimmt that.org und dann lesen Sie mehr über Robots Datei und wie zu erstellen. Eine andere Direktive in dieser Datei. Dann gibt es noch eine Sache, über die ich in einer der vorherigen Lektionen spreche, aber ich möchte erwähnen, dass Sie auch in Bezug auf SEO 301 Weiterleitungen haben und Sie normalerweise diese Weiterleitungen verwenden möchten damit Ihre Benutzer nicht eine 404 Seiten. Also zum Beispiel, wenn Sie eine Seite entfernen, möchten Sie manchmal den Link dieser Seite erhalten, legen Sie es hier als einen alten Pfad und leiten Sie es zu einem anderen Pfad kann neueren Artikel oder neueren Abschnitt über die gleiche Sache auf Ihrer Website sein. Dadurch wird verhindert, dass Links außerhalb Ihrer Website liegen, was zu 404 Seiten führt. Und auf diese Weise wird es Benutzern und Robotern helfen, ihren Weg auf Ihrer Seite zu finden. Okay, als nächstes haben wir diese SEO-Einstellungen wieder. Und ganz unten auf dieser Seite haben Sie Sitemap und auch Google-Website-Überprüfung zu sehr wichtigen Einstellungen für die Sitemap. Ich empfehle Ihnen, vor allem, wenn Sie nicht wissen, wie Sie Ihre eigene Sitemap erstellen. Nur um diese vordefinierte verwenden, diese Standardeinstellungen, die automatisch eine Sitemap für Sie generieren. Stattdessen, wenn Sie Ihre eigenen verwenden möchten, können Sie es einfach so lassen, wie es war. Aber wenn Sie dies automatisch von Webflow generierte verwenden möchten, schalten Sie es einfach auf yes. Und dann wird Webflow eine Textdatei erstellen, eine XML-Datei tatsächlich für Sie. Und du wirst in der Lage sein, es an Google oder Google zu senden , beide werden es automatisch holen, von selbst. Jetzt kann die Sitemap XML-Datei angepasst werden und Sie können sie anpassen, wenn Sie wissen, was Sie tun. Aber für die meiste Zeit werde ich es einfach automatisch von Webflow generiert halten. Jetzt ist Google Search Console ein weiterer Ort, an dem Sie sich registrieren möchten und Sie Ihre Website auch verbinden möchten. So erstellen Sie eine neue Eigenschaft in der Google Search Console. Und dann können Sie Domain auf unserem URL-Präfix verwenden. Was Sie hier verwenden werden, ist URL-Präfix. Und verwenden Sie einfach die Adresse der Website, die Sie in Webflow haben. Also in diesem Fall meine eigene Sub-Domain. Jetzt gehen wir weiter und fahren fort. Und jetzt überprüft es diese Eigenschaft, um zu überprüfen, dass Sie mehrere Möglichkeiten verwenden können, aber was Sie tun möchten, ist zum HTML-Tag zu gehen. Und hier können Sie die gesamte Zeile kopieren, die in 0.1 ist. Lassen Sie uns auf Kopieren klicken. Gehen wir nun zu Webflow und fügen Sie es ein. Du brauchst nicht alles von hier. Sie brauchen nur, was dazwischen liegt, Zitate im Inhalt. Also hier ist es, die Site-Verifizierungs-ID, und lassen Sie uns diese Änderungen speichern. Jetzt sind Sie bereit, zurück zur Google-Suchkonsole zu gehen und zu überprüfen, ob diese Website funktioniert. Aber zuerst, sehr wichtiger Schritt, müssen Sie es in den ausgewählten Domänen veröffentlichen. Sie müssen also zuerst Ihre Website mit diesen Änderungen veröffentlichen damit Google die Änderungen erkennen kann. Gehen Sie nun zurück zur Google-Suchkonsole und klicken Sie auf Verifizieren. Sobald es fertig und veröffentlicht ist, sollte es Ihre Website überprüfen und alles ist in Ordnung. Also, jetzt können Sie einfach auf die Immobilie gehen. Öffnen Sie also Ihre Website und Sie können einige wichtige Metriken Ihrer Website überprüfen. Diese Daten werden also bereits gesammelt. Und dann irgendwann haben Sie einige Performance-Überprüfung und Inspektion und all die Dinge, die Sie finden könnten, dass wirklich interessant in Bezug auf SEO und nur machen Ihre Website ein wenig freundlicher für die Roboter. Außerdem möchten Sie diese Sitemap hochladen, den Workflow , der für Sie im Sitemap-Abschnitt generiert wurde. Wenn Sie also zur Index-Sitemap wechseln, können Sie eine neue Sitemap hinzufügen und die Sitemap validieren, die von Webflow erstellt wurde. Sie setzen einfach Sitemap dot xml hier ein und verwenden eingereicht. Und wenn Sie das WebEx-Bedienfeld nicht eingecheckt haben, haben Sie die Informationen, dass Sitemap übermittelt wurde. Wenn Sie die Änderungen speichern, nachdem Sie in die USA gewechselt haben, sehen Sie, dass dies erfolgreich übermittelt wurde. Außerdem können Sie den Status und die erkannten URLs sehen , die den Index von fünf URLs in Ihrer Sitemap darstellen. Das sind die wichtigsten, aber nicht alle SEO-Einstellungen. Weitere Informationen finden Sie in dieser Google Search Console. Und natürlich können Sie viel über SEO von einigen externen Ressourcen lernen , die ich empfehle. Vielen Dank für das Zuhören und Einstimmen für diese Lektion. Wir sehen uns im nächsten. 28. Metadata: Hallo Jungs und willkommen zur nächsten Lektion. Ich möchte etwas zu den SEO-Tipps hinzufügen. Und hier geht es um das Open Graph-Protokoll und das Schema. Also im Grunde ist dies der Weg, um unsere Website besser zu erklären, nicht unbedingt für Roboter, sondern für soziale Medien. Das Open Graph-Protokoll wurde ursprünglich auf Facebook gestartet, aber jetzt haben Sie viele verschiedene Software, die dieses spezifische Open Graph-Protokoll verwenden. Und was tun Sie damit, ist, dass Sie diese Metadaten verwenden und Sie haben eine Meta-Eigenschaft. Und dann gehen Sie mit OG, Titel, Typ, URL und Bild. Und Sie definieren die Elemente, die von, sagen wir Social Media erkannt werden . Wenn Sie das Bild festlegen, wird das Bild angezeigt, wenn Sie diesen Link auf Facebook oder LinkedIn teilen . Und das ist das Bild von der OG-Steuer. Sie können natürlich all dies in Ihren benutzerdefinierten Code einfügen. Sie können dies in Ihre Projekteinstellungen einfügen die Änderungen auf anderen Unterseiten in diesem benutzerdefinierten Codeabschnitt global sichtbar sind. Aber im Designer, wenn Sie zu Einstellungen einzelner Seiten gehen, Webflow auch einige der wichtigsten offenen Diagrammeinstellungen für Sie hier zur Verfügung. So haben Sie den Titel und die Beschreibung und das Bild. Das sind kostenlose, wichtigste Einstellungen für Sie, um Elemente in sozialen Medien zu teilen und damit dies korrekt angezeigt wird. Also zum Beispiel, wenn ich zu Facebook gehe und ich einen neuen Beitrag und dann füge ich einen Website-Link hinzu und entsorgt zu meinem Web, die Website, wird es automatisch etwas generieren. Und das ist eine Beschreibung. Ich habe kein OG-Bild. Deshalb wird hier das Bild nicht angezeigt. Und es nimmt auch den Titel aus meinem Titel, aus dem Titel meiner Seite. Aber aus vielen Gründen möchten Sie dies möglicherweise getrennt halten und Sie möchten es deaktivieren, genauso wie SEO-Titel-Tag. Sie können dieses Ereignis sehen, dass ich dies nicht markiert hatte, es hat dies automatisch aus dem Titel geholt und das ist Facebook-Funktion, denke ich. Aber Sie können auch die Meta-Beschreibung nehmen und dann wird sie aus Ihrer Meta-Beschreibung abgerufen. Also SEO Meta Beschreibung als auch. Also ist es besser, das zu überprüfen als nicht, aber es ist auch besser, verschiedene Beschreibungen und Titel für soziale Medien zu erstellen. Und offensichtlich gibt es ein Bild, das Sie hier haben sollten. Das ist das Seitenverhältnis von 1,91 zu einem, das Sie verwenden sollten. Und Webflow versucht, sicherzustellen, dass Ihre Bilder mindestens 1200 Pixel x 630 in dieser Open Graph-Bild-URL hier sind , können Sie einen absoluten Pfad zu Ihrem Bild setzen. Sie können keines der Bilder in Ihrer Bibliothek verwenden. Und Sie müssen nur ein spezielles Bild erstellen, das eine offene Graph-Bild-URL sein wird. Was Sie tun können, ist es für alle Seiten separat in den Open Graph-Einstellungen festzulegen. Oder wenn Sie es nur einmal festlegen möchten, können Sie dieses OG-Tag als benutzerdefinierten Code in Ihren globalen Seiteneinstellungen für Webflow hinzufügen. Jetzt habe ich dieses Bild als mein OG-Bild hochgeladen. Und anstatt sicherzustellen, dass es auf Facebook funktioniert, indem Sie den Beitrag noch einmal hinzufügen. Ich empfehle Ihnen, zu einem speziellen Service zu gehen, mit dem Sie die OG-Metadaten testen können. Weil Facebook und andere soziale Medien verwendet, um nur einige Daten über den Link, den Sie bereitgestellt haben, Bargeld und dies möglicherweise nicht sichtbar. Stattdessen gehen Sie einfach zu Facebook-Entwicklern. Und hier ist Sharing Debugger, das Tool, mit dem Sie den Link zu Ihrer Website setzen und klicken Sie auf Debug, um eine Vorschau anzuzeigen, wie es in sozialen Medien aussehen sollte. So sollte es auf Facebook angezeigt werden. Das Bild ist jetzt da. Abgesehen vom Bild gibt es einige OG-Felder, die automatisch vom Web ausgefüllt wurden. Zum Beispiel, diese aktualisierte Zeit, aber einige von ihnen mit uns gefüllt wie Beschreibung und Bild und Titel und alles ist da. Sie können auch auf einige Fehler überprüfen. Ganz oben auf dieser Seite haben Sie eine Warnung, die behoben werden sollte. Und hier sind einige erforderliche Eigenschaften, die URL fehlen. Nun, alle sozialen Medien kümmern sich darum und greifen einfach die URL, die Sie wollen. Und Facebook-App-ID. Auch hier ist es nicht notwendig, es sei denn, Sie verwenden eine Facebook-App, die Sie mit dieser Website verbinden möchten. Aber so oder so, dies ist eine gute Möglichkeit , einige zusätzliche Informationen für soziale Medien bereitzustellen, insbesondere Bilder, die korrekt angezeigt werden und erhöhen einige Traffic von Social Media zu Ihrer Website. Und noch eine Sache, die ich in dieser Lektion erklären möchte, ist schema.org. Ein weiterer Satz von Metadaten, die Sie separat für Ihre Seiten oder für die gesamte Website verwenden können. Und das ist nur ein Schema, das Sie zum Beispiel Produkte verwenden. Und das, lassen Sie uns Google und andere Software besser verstehen, was auf Ihrer Website ist. Zum Beispiel können Sie Farbe oder Modell zu Ihren Produkten oder einigen Angeboten hinzufügen, vielleicht Bewertungen oder Sterne, Sterne, Sterne, Sterne, so etwas. Und oft können Sie solche Ergebnisse auf Google sehen, wenn Sie nach etwas suchen. Zum Beispiel können Sie in den Serben Bewertungen oder Sterne oder etwas anderes sehen. Und das ist die Informationen aus dem Schema, das Google füllt. Und für einige Ergebnisse, für einige Webseiten, entscheidet es, diese Informationen anzuzeigen. Sie garantiert nicht unbedingt, dass diese Informationen in den Diensten vorhanden sind. Aber es gibt eine große Chance, wenn Sie die Dinge richtig halten, wenn Sie diese Schemaorganisations-Metadaten hinzufügen, dass sie irgendwann in den Google-Suchergebnissen aufgenommen werden und wie Sie diese Schema-Organisationseigenschaften verwenden. Klicken wir auf „Erste Schritte“. Und hier haben Sie eine andere Attribute, die Sie in Webflow zu den Elementen verwenden können. Anstatt dies in den Abschnitt Benutzerdefinierter Code Ihrer Seite zu setzen, wählen Sie einfach ein Element aus, dem Sie dieses benutzerdefinierte Attribut hinzufügen möchten. Und Sie müssen nur zu seinen Einstellungen gehen. Und hier haben Sie das Attribut, den Abschnitt mit benutzerdefinierten Attributen, den Sie für Schemaattribute verwenden. Wenn Sie also wollen, sagen wir die Klarheit, dass dieser Teil der Website ein Film ist. Was Sie tun werden, ist im Namen, Sie werden diesen Schemaelementtyp verwenden. Sie deklarieren also Elementtyp als Name dieses Attributs. Und als Wert haben Sie diesen Link zum richtigen Abschnitt der Schemaorganisation. Dies ist also eine Möglichkeit, diese erklärte eigene Schemaorganisations-Website zu tun. Und auf diese Weise, wenn Sie Produkte haben und sie besser für die Suche verfügbar machen möchten. Ich denke, dies ist eine gute Möglichkeit, diese Meta-Daten und Informationen auf Ihrer Website hinzuzufügen. Offensichtlich wird es wertvoller für andere Soft-Software machen, nicht nur für Suchindizierungsroboter, sondern auch für Barrierefreiheitszwecke und solche Dinge. Denken Sie also daran, einige Orte, an denen Sie diesen Code für einzelne Seiten und global für alle Ihre Website hinzufügen könnten . Okay, das war's vorerst. Danke fürs Zuhören und sehen uns in der nächsten Lektion. 29. Verwendung von Integrationen: Hey, schön, dich in dieser Lektion zu sehen. Dies ist eine Bonusstunde, wenn ich Ihnen Integrationen Tab erklären möchte. Und das ist ziemlich mächtig, weil Sie Webflow mit einigen externen Diensten verbinden können. Polar, zum Beispiel, ich habe eine Google Analytics, aber leider für Google Analytics-Version für Sie müssen nur noch das Code-Snippet aus Analytics in benutzerdefiniertem Code hinzufügen, Webflow unterstützt es aus irgendeinem Grund noch nicht, aber Sie haben einige andere Dienste, die Sie nahtlos in Webflow integrieren können, wie Google Optimize, mit denen Sie AB-Tests ausführen können. So erstellen Sie einfach eine Container-ID auf Google Optimize. Und dann können Sie innerhalb von Google Optimize URLs in zwei verschiedene Seiten eingeben, die Sie in Webflow erstellt haben. Und dann wird es automatisch diese Version der Website ändern. Zeigen Sie also die eine oder andere Seite für einige andere Benutzer an und wir lassen Sie leicht entscheiden, welche Version besser ist. Für die Google Maps-Integration müssen Sie nur den Google Maps JavaScript API-Schlüssel erhalten. Und dann geben Sie den API-Schlüssel an. Und hier, und dies lässt Sie einfach Google Maps innerhalb der Web obwohl Website anzeigen. Und offensichtlich können Sie eine einfache Einbettung erstellen und es erfordert keinen Google Maps API-Schlüssel, um hier vorhanden zu sein. Also gehen Sie einfach zu Google Maps und klicken Sie auf den Teil des Mobbed und kopieren Sie dann den Einbettungscode und fügen Sie den iframe, iframe in HTML, benutzerdefiniertes HTML in Webflow ein. Aber wenn Sie Google Maps ausführlicher auf Ihrer Website verwenden möchten und sagen wir , Erstellen Sie eine Suche innerhalb Ihrer Website, die Ergebnisse auf Google Maps zurückgeben wird. Dann müssen Sie das API-Schlüsselregister als Google Developer verwenden und dann diese Google Maps API generieren und hier einfügen. Und dann haben Sie auch Facebook-Pixel, was wirklich, wirklich nützlich ist, wenn Sie Kampagnen auf Facebook ausführen. Dadurch können Sie Ihre Website mit Facebook verbinden, zumindest für jetzt, denn wie wir alle wissen, Cookies verschwinden langsam und werden nicht unterstützt, unterstützt. Die meisten modernen Browser, einige irgendwie blockiert. Aber für jetzt haben wir noch diese Facebook-Pixel oder Front-End-Integration, die Sie einfach mit Ihrer Pixel-ID hinzufügen können, die hier eingefügt wird. So erstellen Sie in Ihrem Anzeigenmanager auf Facebook eine neue Datenquelle. Sie erstellen ein neues Pixel und fügen dann die Pixel-ID hier ein. Und der Wohlstandsfluss kümmert sich um alles andere. In Bezug auf diese Implementierung können Sie auf diese Weise beispielsweise dynamisch Anzeigen für Personen erstellen, die Ihre Seite im Webflow besucht haben, und viele andere Dinge, einschließlich Statistiken und alle Daten, die Sie in der Vorschau anzeigen können im Facebook-Dashboard, okay? Jetzt können Sie die Cookie-Zustimmung verzögern bedeutet, dass Sie die DSGVO-Regeln einhalten. Wenn Sie dies auf yes umstellen, wird das Pixel ohne die Zustimmung nicht geladen. Der Standardwert ist also, dass das Pixel geladen wird, ob Ihr Benutzer Cookie-Richtlinien akzeptiert oder nicht. Wenn Sie das ändern, sind Sie mit der DSGVO konformer, da es nur geladen wird , wenn Benutzer Ihre Cookie-Richtlinie akzeptieren, dann haben Sie API-Zugriff, was sehr interessant ist, weil Webflow Zugriff auf die leichtgewichtige API-Referenz von IT Und es gibt einige Elemente, auf die Sie einfach zugreifen können, ohne zur Webfluss-Benutzeroberfläche zu gehen, so dass Sie nicht zum Designer gehen müssen, um die Sammlungsliste oder Sammlungselemente zurückzugeben und Sie können es mit API tun. Es gibt viele Daten, die Sie von Webflow erhalten können, ohne Webflow zu durchlaufen. Und Sie können alle Sammlungsdaten abrufen. So können Sie zum Beispiel Ihre Sammlungen am wenigsten und eine bestimmte Sammlung nach ID erhalten. Und das alles erfordert ein wenig Wissen über JSON und HTTP-Protokoll und API. Aber wenn man das kennenlernt, ist es ziemlich unkompliziert. Es gibt jedoch einen intelligenteren Weg und zugänglicheren Weg, den Sie verwenden können, um zu übersetzen, einige Daten aus Webflow zu einem beliebigen Dienst mit einer API zu übertragen. Und ich möchte Ihnen zeigen, dass die Verwendung von Web-Hooks, wie Sie sehen können, Web-Hooks Teil der API-Referenz für Webflow sind, aber sie sind auch mit dem Panel ganz unten auf dieser Seite zugänglich , haben Sie Web-Hooks und Sie können Webhooks von hier aus. Web-Hooks sind im Grunde einige Informationen, die den Workflow automatisch an den Dienst erkennen , den Sie verwenden möchten, und dann übergeben Sie diese Daten, die Sie vom Web-Hook erhalten. Es könnte Einreichung gebildet werden, oder es könnte die Informationen über Ihre Website veröffentlicht werden oder einige neue Bestellungen aus E-Commerce sein. Sie fügen einfach einen Web-Hook hinzu und wählen den Triggertyp aus. Welche Art von Daten möchte ich von Webflow über meine spezifische Workflow-URL erhalten? Ich werde Ihnen zeigen, wie Sie diese Webhook-URL in einer Sekunde erstellen. Angenommen, Sie möchten Formularübermittlungen erhalten und die Webhook-URL ist die Adresse, die der Workflow zum Senden dieser Informationen verwendet. Also jedes Mal, wenn jemand fühlt sich in der Form, werden Sie alle Formulardaten zu diesem Web Huike gesendet erhalten. Nun, wie erstellen Sie jetzt eine Webhook-URL? Nun, der einfachste Weg ist, uns in Zapier zu erfinden. So erstellen Sie ein Konto auf Zapier und suchen Sie dann nach, können Sie für Webflow freies Modul suchen. Und Sie können Webflow-Modul verwenden, um dies zu tun. Oder Sie können diesen Webhook von Zapier verwenden. Dies ist die Premium-Version. Also, wenn Sie ein kostenloses Konto haben, suchen Sie einfach nach Webflow und Sie werden in der Lage sein, es zu tun. Für diesen Webhook. Du wirst Haken fangen müssen. Sie werden also auf eine neue Daten warten, die an diese Adresse kommen und die Kundenadress-URL, die Sie kopieren möchten, ist genau dort. Kopieren Sie das also und übergeben Sie dies an Webflow. So werden alle Formulardaten sofort neben diesem Formular Einreichung Haken, die Sie generiert haben. Okay, jetzt gehen wir auf unsere Website, aber sehr wichtig, bevor Sie dies tun, müssen Sie Ihre Website erneut veröffentlichen. Speichern Sie also die Änderungen und veröffentlichen Sie die Website erneut. Und dann können Sie jedes der Formulare Ihrer Website verwenden, um, sagen wir, Daten zu abonnieren oder zu senden. Jetzt haben wir die Informationen, die die Einreichung empfangen wurde. Dies ist etwas, das Sie offensichtlich als Status des Formulars in Webflow anpassen können. Aber das Wichtigste ist, dass dieses Formular die Vorlage durchlief. Und in Webflow können Sie dort vor ein paar Sekunden nach eingereichten Formularen suchen, ich habe einige Daten mit dieser E-Mail bekommen. Das ist auch E-Mail. Ok. Aber in Zapier, was ich kann. Überprüfen Sie für ist nur die Fortsetzung. Und jetzt habe ich diese Anfrage ein, die empfangen wurde. Wir fanden eine Anfrage, etwas wurde gesendet und ich habe diese E-Mail Formular zwei, und die Daten enthalten M82 Tests an Codern, die Haus. Also habe ich es verstanden. Wenn Sie möchten, dass die Namen beschreibender sind, können Sie zu diesem Formular gehen. Und in den Formularprotokolleigenschaften können Sie den Formularnamen überprüfen, damit Sie es machen können, dass ich Newsletter oder so etwas weiß. So ist es besser, besser für Ihre Bedürfnisse geeignet. Wenn Sie nun dieses Datenbeispiel sehen, das mit Ihren Anfragen gesendet wurde, können Sie ganz einfach fortfahren. Und wenn Sie das HUC bereit haben, können Sie die Aktion erstellen. Was wollen Sie also mit diesen Daten passieren? Wenn Sie beispielsweise möchten, dass dies als neuer Abonnent an MailChimp gesendet wird, können Sie einfach Ihr Mailchimp-Konto hier verbinden. Und ich habe mein Konto verbunden. Wenn ich Fortfahren auswähle, kann ich sie dann an eine meiner Zielgruppen senden. Ich habe nur eine Zielgruppe und dann Abonnenten E-Mail ist etwas , das ich von den Daten erhalten muss, die ich von diesem Haken zwischenspeichere. Also im Grunde gibt es diese E-Mail für, lassen Sie uns alle Optionen sehen. Und ich habe diese E-Mail, an die Tests bei Kälte als ein, wie was ich tun möchte, ist diese E-Mail zu tun Mailchimp übergeben. Sie können alle Felder setzen, die ich auf meinem Chip am wenigsten habe. Aber das muss ich nicht tun. Lassen Sie uns diesen Test überspringen und so erstellen Sie eine Automatisierung, mit der Sie Benutzer einfach über Webflow auf Ihr Mailchimp-Konto abonnieren können. Und es ist super einfach auf Zapier. Sie können auch überprüfen integrale Matte. Es ist eine weitere großartige App, mit der Sie es tun können. Und Sie können auch mehrstufige Zap erstellen, so dass Sie hinzufügen können, um es zu verwalten und dann senden Sie die Daten an Google Sheets oder anderswo. Für die ausgelösten Typen, die Sie verwenden können. Wie Sie hier sehen können, unsere Formulare, Einsendungen und zitieren veröffentlicht, aber auch gibt es einige Ereignisse versandt, wenn Sie erstellen wenn jemand eine neue Bestellung erstellt oder die Bestellung für Ihren E-Commerce-Store ändern. Und dies erfordert, dass Sie ein E-Commerce-Projekt in Webflow erstellen. Also hoffe ich, dass Sie mehr über diese API-Referenz erfahren und wie Sie Daten aus Webflow erhalten und vielleicht einige Daten an Webflow senden können. Es gab einen einzigen Hinweis in dieser Lektion, den Sie jetzt erkunden können. Dies wird les dot wie genannt, wo ich einige Tutorials zu API und HTTP-Protokoll habe. Und das wird Ihnen helfen, mit Automatisierungen zu beginnen. Außerdem gibt es eine Menge Ressourcen auf Zapier und integrale, integrale verrückt, die ich ausgiebig für Web für Zwecke verwendet habe. Also denke ich, dass dies ein großartiger nächster Schritt ist, um in dem, was Sie tun, noch weiter fortgeschritten zu sein. Aber das ist alles, was ich dir sagen wollte. Und in diesem Kurs ist es im Grunde. Ich hoffe also, dass Sie während dieses Kurses viel gelernt haben und dass Sie dieses Wissen nutzen und es auf Ihr Web für Projekte anwenden ermutigen Sie dringend, Ihr eigenes Projekt zu erstellen, oder vielleicht noch einmal mit den Schritten mit diesem Kurs und erstellen Sie einen Blog, Website mit CMS, wie ich es tat. Danke fürs Anschauen und wir sehen uns in den nächsten Kursen. 30. Wir sehen uns bald: Vielen Dank für Ihre Aufmerksamkeit in diesem Kurs. Ich hoffe, dass es Ihnen den Kopf für neue Möglichkeiten und Funktionen von Webflow geöffnet hat. Sie können jetzt dynamische Inhalte in Webflow mit CMS und vielem mehr erstellen und verwalten. Hoffentlich haben Sie es geschafft, die Schritte aus diesem Kurs zu folgen, um unser Blogging-System neu zu erstellen, oder Sie haben gerade eine andere Seite von Ihnen erstellt. Außerdem hoffe ich, dass es nicht das Ende Ihrer Reise ist, denn derzeit in Webflow, können Sie erweiterte E-Commerce-Websites mit dynamischer Produktdatenbank, Arbeitskarte und Zahlungsabwicklung erstellen . All dies und vieles mehr finden Sie in meinen anderen Wohlfahrtskursen. In der Zwischenzeit, vielen Dank für die Zeit zusammen verbracht, und ich hoffe, es war voller wertvolles Wissen wird Ihre Arbeit profitieren. Wir sehen uns in den nächsten Kursen.