Figma zu Webflow für Anfänger: Portfolio-Website von Grund auf erstellen

1. Einführung: Wollten Sie schon einmal eine moderne Website entwickeln , ohne Code zu kennen? Dann ist dieser Kurs für dich. Hallo, mein Name ist Tim See, Webflow-Entwickler bei Victor Flow Agency , einem professionellen Partner von Webflow. Ich werde hier meine Erfahrungen darüber teilen , wie wir Websites erstellen Ich werde Sie über den praktischen Prozess der Erstellung von Websites informieren , der praktischen Prozess der Erstellung von Websites aus der Workflow-Entwicklung von Figma Design stammt. Workflow ist ein leistungsstarkes Tool, mit dem wir Websites visuell ohne Code erstellen konnten. Das gilt für jeden, der Websites erstellen möchte. Auch wenn Sie ein Anfänger oder ein Designer sind oder vielleicht ein Vollzeit-Webdesigner für Sie werden möchten , Webflow ist die Antwort. Dieser Kurs ist komplett von Grund auf neu. Jeder einzelne Schritt beim Aufbau einer Website wird vollständig angezeigt. Wir werden die Flow-Elemente, das Styling und vieles mehr durchgehen . Hier habe ich das Kommentarfeld-Modell in jeder Lektion erklärt . besser zu verstehen, wie wir darauf aufbauen, ein Anfänger zu sein, erhalten Sie einen leicht zu lernenden Prozess. Ich habe das CMS zum Erstellen der Seite mit der Auflistung von Blogbeiträgen und einen einzigen Blogpost-Pitch erklärt Seite mit der Auflistung von Blogbeiträgen und einen einzigen Blogpost-Pitch Als Overflow-Entwickler und Illustrator dachte ich an die Entwicklung einer Portfolio-Website, die alle notwendige Elemente die für die Zeichnung benötigt werden. Aufgemerkt. Sobald wir den Entwicklungsprozess abgeschlossen haben, werden wir unsere Website erstellen, die auf den Desktop reagiert. Tablett. Mobil ist auch, wir werden mit Tipps und Tricks nachschauen, um das Webflow-Projekt perfekt abzuschließen. Wie bessere SEO-Einstellungen und Leistungsverbesserungen, um grüne Ergebnisse auf dem Google Chrome-Leuchtturm zu erzielen. Schließlich können Sie das, was wir erstellen, kostenlos klonen und an Ihre Bedürfnisse anpassen. In diesem Kurs erhalten Sie die Ressourcen für die Figma-Datei und die Website für das klonale Portfolio. Du nimmst an diesem Kurs teil, einem der einzigartigen kostenlosen Icons oder Figma und Webflow. Also, wenn Sie bereit sind, ein No-Code-Aleppo zu werden und eine eigenständige Website zu erstellen. Lass uns anfangen. 2. Figma Design Wir werden umwandeln: In dieser Lektion werden wir das Figma-Design analysieren das Figma-Design es in Overflow umwandeln. Das kannst du mit meinem Design im Ergebnisbereich bekommen. Und du kannst diese Datei in dein Figma importieren. Lass uns mit der Lektion beginnen. Das ist also unser Figma-Design für die Website-Vorlage unseres Künstlers. Auf der linken Seite sehen wir die Reihe von Ebenen, die wir verwendet haben. Kommen wir nun zum Design. Zuerst haben wir einen Header. In der Kopfzeile befindet sich ein Logo und die entsprechenden Eigenschaften können in Ordnung sein. Ein anderes Design, das sich auf der linken Seite befindet, wir haben dieses Logo als Bild verwendet. Wir können den Dateityp im Export festlegen. Es kann PNG, JPEG, SVG und PDF sein. also den Dateityp beim Export auswählen, wird diese spezielle Datei in unsere lokale Datei exportiert und kann im Overflow verwendet werden. Jetzt können wir unter der Vorschau die Vorschau dieses Bildes sehen. Als nächstes gibt es ein Menü. Das Menü ist im Textformat. Wenn wir auf der linken Seite zur Inspektion gehen, können wir die Eigenschaften des Menütextes sehen. In den Eigenschaften finden wir die Breite und Höhe, die verwendete Topographie , also Fremdgewichtsstil, Linienhöhe. Sogar wir können die CSS-Eigenschaften sehen. In der Kopfzeile. Wir haben eine Anmeldeschaltfläche , um das Kästchen anzukreuzen. Wir haben einen Text verwendet. Indem Sie auf die Anmeldung klicken. Auch hier können wir die Texteigenschaften finden. Als Nächstes haben wir eine Kontaktnummer zusammen mit dem Symbol und einer Telefonnummer. In der Kopfzeile haben wir ein Logo, Meno , ein Suchtformat, und eine Registrierung sowie eine Kontaktnummer mit dem Symbol und einer Telefonnummer. Der Header ist also vorbei. Als nächstes haben wir ein Banner, das ist der Heldenbereich. Innerhalb des Banners haben wir zwei Teile. Eine ist für den Inhalt und die zweite dient zum Halten des Bildes, das durch den Inhalt kommt. Aber wir haben Untertitel, tote Dose, ein Mail-Symbol und eine E-Mail-ID. Und lass uns die Schaltfläche überprüfen. Kommen wir zum zweiten Teil, haben wir ein Image-Add-On. Es gibt einen Hintergrund für den Inhalt und ein Bild. Jetzt haben wir das Banner gesehen. Schauen wir uns als Nächstes den Service an. In den Diensten haben wir einen Titel und einen Untertitel. Dieses Design wird in allen Abschnitten des Workflows verwendet . also auf jedes Ding klicken, können wir die entsprechenden Eigenschaften finden. Im Inspektor. Unter der Überschrift haben wir diese Artikel, Boxen, jede der Boxen, ein MOD-Erwachsener. Im Workflow werden wir sehen, wie man diese Art von Design herunterlädt. Einer der Dienste hat einen Hintergrundschatten. Sogar wir werden in unserer Sonde sehen, wie das geht. Kommen wir nun zum individuellen Service, oben haben wir ein Symbol und wie immer einen Titel und darunter befindet sich eine Beschreibung dazu. Und unten befindet sich eine Schaltfläche „Mehr erfahren“. Das gleiche Design wie für die anderen beiden. Also Visa. Hinter diesen drei Leistungspunkten verbirgt sich ein Hintergrundbild. Wir haben die Dienste analysiert. Lassen Sie uns als Nächstes mit dem Projekt fortfahren. Hier haben wir einen Titel und einen Untertitel verwendet , die ganz oben stehen. Das gleiche Design wie bei den Diensten. Das ist eine Box, die den gesamten Titel und den Inhalt enthält. Mit der Hintergrundspalte. Unter der Überschrift. Wir verwenden vier Teile mit jeweils einem separaten Block. In jedem Block haben wir einen Titel, eine Beschreibung und ein Bild. Zusammen mit dem Hintergrund. Das gleiche Muster wird für die anderen drei Blöcke befolgt. Das ist dieselbe Lücke, die wir in jedem der Blöcke machen. Als nächstes folgt der Workshop. Der Workshop besteht aus zwei Teilen. Einer ist weiterer Inhalt und ein anderer ist für das Bild. Kommen wir zum ersten Teil, das ist der inhaltliche Teil. Wir haben, wie in den beiden vorherigen Ebenen, einen Titel und einen Untertitel wie in den beiden vorherigen Ebenen, sowie eine Beschreibung dazu. Und darunter haben wir einen QR-Code, für den der QR-Code verwendet wird, um den Betrag durch die Besucher zu bezahlen. In der Nähe des QR-Codes befindet sich ein Symbol zusammen mit der Beschreibung der Verwendung dieses QR-Codes. Und unter dem Alles haben wir einen Button. Für mein Buch. Und im zweiten Teil haben wir Bilder zusammen mit dem Hintergrund. Im nächsten geht es um mich. Dieses über mich hat links das andere Bild und darunter befinden sich die Social-Media-Symbole. Daneben. Eine kleine Beschreibung über den Autor dazu in meinem Arbeitslink. Und auf der Liste gibt es ein Video zusammen mit der Play-Taste. Als nächstes haben wir die OT-Lizenzschicht. In dieser seltsamen Lizenzschicht haben wir zwei Spalten, das sind die beiden Teile. Die erste Spalte soll das Bild enthalten. Die zweite Spalte ist für den Inhalt. In der zweiten Spalte gibt es eine Tab-Option für Lizenzierung von Kunstwerken und eine Provision , wenn Sie auf diesen ersten Schritt klicken Der zugehörige Inhalt wird angezeigt, wenn Sie auf die zweite Hälfte klicken. das heißt, das Verhalten im Zusammenhang mit der Kommission wird angezeigt. Wir werden sehen, wie wir dafür sorgen können, dass ausreichend Blut fließt. Zurück zum Design für beide Tabs Das Inhaltsdesign ist dasselbe, aber nur der Inhalt ändert sich. Für den Inhalt der Tabs. Es hat oben einen Titel und eine Beschreibung dazu. Und darunter gibt es zwei Teile. Eine besteht darin, einen Prozentsatz zu halten. Und im zweiten Teil haben wir als kleine Beschreibung die OT-Lizenzschicht gesehen. Als nächstes folgt eine Testimonial-Ebene. Diese Testimonial-Ebene hat zwei Spalten. Eine ist für den Titel und die Untertitel, und die zweite Spalte ist für die Testimonials. der Testimonials wird dasselbe Design Für jedes der Testimonials wird dasselbe Design verwendet. Sehen wir uns das individuelle Design dieses Testimonials an. Oben haben wir das Anführungszeichen und einen Befehl verwendet , den die Besucher oder den Verlust gegeben haben. Daneben haben wir das Bild des Besuchers mit dem Namen und dem Rücktritt. Und in der letzten Ecke haben wir eine Bewertung des Besuchers. Das gleiche Design wird für andere verwendet, ein Blatt mit Änderungen in der Hintergrundfarbe. Und es gibt ein Hintergrundbild. Dieses Zeugnis von vorhin. Schauen wir uns nun die Preisebene an. Dieser Preis verwendet die Box zusammen mit der darin enthaltenen Hintergrundfarbe. Das ist der Titel und der Untertitel, oder der Hund, wie wir ihn in den vorherigen Ebenen verwendet haben. Darunter befinden sich zwei Spalten. Einer ist kostenlos und einer ist für die Sonde. Um zur ersten Spalte zu kommen, in der die Überschrift gespeichert wird, haben wir den Block an einem Ende verwendet. In einem anderen n. Das ist die Erwähnung der Reichen. Unter diesem Titel haben wir eine Reihe von Listen zur Freizügigkeit, zusammen mit der Überschrift oben, an einer Ecke, in eine andere Ecke, befindet sich ein Emoji und darunter das ist eine Liste der kostenlosen Version. Am Ende haben wir eine Schaltfläche, um auf die kostenlose Version zuzugreifen. In dieser Liste haben wir einige der Wälder hervorgehoben. Das gleiche Design wird in der zweiten Spalte mit den Änderungen der Preisgestaltung verfolgt . Die Preisgestaltung einer Ebene hat das Hintergrundbild zwei, wir haben es über der Preisebene gesehen. Schauen wir uns den Blog an. Der Blog hat diesen Titel und den Untertitel oben und unter dem Titelbereich, das sind vier Byte. Für jedes der Teile wird dasselbe Design verwendet. Sagen wir das Design der einzelnen Teile darin. Wir haben die beiden Blöcke benutzt. Die erste besteht darin, das Bild zu speichern, und die zweite ist für den Inhalt, der zum Inhalt kommt . Dies ist eine Überschrift oben, unter der Überschrift, das ist ein Veröffentlichungsdatum und der Name des Autors sowie ein Blog zusätzlich, zusammen mit dem Link zum Lesemodus. Das gleiche Design wie folgt für drei. Nach dem Block haben wir häufig gestellte Fragen. Es verwendet das Feld mit dem Hintergrundbild und hat auch die beiden Spalten. Die erste besteht darin, den Titel und den Untertitel davon zu halten . Und in der zweiten gibt es eine Reihe von Dropdownlisten. Hier haben wir ein USDA-Fragenmodal zusammen mit dem Pfeilsymbol. Wenn Sie diese Dropdownliste erweitern, sollte der Pfeil nach oben zeigen und auch der Inhalt zu dieser Frage sollte kleiner als die Größe der Frage sein, zusammen mit den Farbänderungen der nächste ist abonniert. Es hat zwei Blöcke, den Einheitsblock für den Titel und den Untertitel oben. Die zweite ist für die Eingabe, um die E-Mail-Adresse zusammen mit der Schaltfläche auf der rechten Seite abzurufen. Die ganze Sache mit dieser Eingabe und einem Button hat die Hintergrundfarbe. Die nächste Sache ist Kontakt. Und der Kontakt, das ist zweispaltig, die eine Liste für den Inhalt und die zweite Spalte für die Eingabefelder, die in die erste Spalte kommen. Und der Hund, das ist ein Untertitel und der Titel, zusammen mit unnötigen Abständen auf allen ersten Seiten gehörten zum Titel und zum Untertitel. Wir haben keine Hauptdaten, zusammen mit der E-Mail, dem Ausweis, dem Telefon sowie der Telefonnummer und auch dieser Adresse, die in der zweiten Spalte steht. Das ist unnötiger Abstand auf allen Fruchtstandorten. Außerdem enthält es die Eingabefelder Name, E-Mail, Firma, Telefon und Nachricht sowie die Schaltfläche „Nachricht senden“ unten. Jetzt sind wir zum letzten Teil gekommen, das ist Essen, um es als Foto zu erkennen, das ist eine Linie oben drauf. Jetzt haben wir darin eine Überschrift oben, darunter. Wir haben ein Logo. Unter diesen beiden finden Sie eine Reihe von Links zu sozialen Medien , nämlich für Facebook, Instagram, Twitter und YouTube. Jeder der Social-Media-Links ist mit einem entsprechenden Logo versehen. Und welche Art von Social Media hat zusammen mit dem Link dasselbe Design wie folgt für die anderen drei in jedem der Social-Media-Links , das ist nicht angemessen. Ja. Außerdem gibt es eine Hintergrundfarbe für die Box, die all Ihre Social-Media-Links enthält. Unten ist das ein Menü-Link oder links. Und in der rechten Ecke haben wir einen Copyright-Text. Das ist also das Design des Figma , das wir in einen Workflow umwandeln werden. Um dieses Design in einem Webflow zu entwickeln, müssen wir die Grundlagen des Webflows kennen. In der nächsten Lektion werden wir uns also mit den Grundlagen des Webflows befassen, die notwendig sind. Wir sehen uns in der nächsten Lektion. 3. Webflow-Grundlagen: Webflow ist ein CMOS, das ist ein Content-Management-System. Es ist ein System, das die Verwaltung von Inhalten ermöglicht. Aber es ist nicht nur das, es ist auch wegen des Designers eines der besten. Und auf diese Weise können wir das HTML und CSS auf der Seite visuell manipulieren. In diesem Kurs werden wir viel mit dem Designer zusammenarbeiten. Bisher können wir die Benutzeroberfläche in vier Abschnitte unterteilen. Diese vier Abschnitte sind die linke Werkzeugleiste, die Leinwand, die Bedienfelder auf der rechten Seite und eine obere Werkzeugleiste. Fangen wir nun mit der linken Werkzeugleiste an. Wenn sie den Workflow öffnen, finden wir die linke Werkzeugleiste auf der linken Seite. die linke Werkzeugleiste können wir also auf die meisten wichtigen Abschnitte zugreifen. Wir haben hier oben ein Menü, über das wir zum Dashboard , zu den Projekteinstellungen oder zum Editor wechseln können . Dann haben wir das Hinzufügen-Panel, dem wir Elemente und Komponenten zu unserer Seite hinzufügen können . Zuerst haben wir das Layout, die Abschnitte, die Containerklasse in Spalten. Wenn wir Hilfe benötigen, klicken Sie einfach auf das Fragezeichen, das sich hier befindet. Also bekommen wir eine kleine Beschreibung über. Als nächstes haben wir hier ein Basic. Wir haben den Hund, die Liste, den Artikel, den Link, den Blog und den Button. Als nächstes kommt der Typ Rafi. Hier haben wir Überschrift, Absatz, Text, Link, Textblock, Blog, guten und Rich-Text. Als nächstes haben wir hier ein CMS, wir haben eine Sammlungsliste. Das werden wir später sehen. Als nächstes kommen die Medien. Hier haben wir ein Bild, WIR MACHEN ein YouTube und alle Animationen. Als nächstes haben wir Formulare. Hier. Wir haben von Blob, Labor, Eingabe, Datei, Upload, Textbereich, Checkbox, Optionsfeld, Auswahl, Wiederaufnahme, Formularschaltfläche. Dies sind alle Hauptelemente. Deshalb für die Eingabeaufforderungen. Und wir haben auch eine Kompetenz Zeta-Komponenten oder wir haben ein neues Hintergrundvideo fertiggestellt. Ich bin Bud Light, Box-Nummer, Suche, Slider, Taps, Maps, Facebook und Twitter. Das sind also alle Dinge, die im Elemente-Bedienfeld verfügbar sind. Als nächstes haben wir ein Layout. Im Layout können wir jedes der vorgefertigten Layouts verwenden , die mit Webflow geliefert werden. also mit der Maus über die vorgefertigten Layouts fahren, konnten wir eine kleine Beschreibung dieser Layouts sehen. Wenn wir diese Ticking-Now-Leiste ausführen, können wir den Sticky jetzt verwenden. Wenn wir den Heldenbereich benötigen, ist das der Inhalt der Bildüberschrift, des Hauptteils und einer markanten Call-to-Action-Schaltfläche selbst. Wir können dieses fatale Privileg nutzen. Füge hinzu. Wir haben hier Overlay-Code-Sektion, Hauptinhalt, Feature-Bereich, Galeriebereich , Handlungsaufruf, Abonnement-Formular, Kontaktformular im Essen oder im Werbebanner, oder wir haben ihn mit den Elementen gesehen und die Layouts. Dann haben wir Zugriff auf die Symbole. Hier konnten wir die, eine kleine Beschreibung aller Symbole, sehen . Mit den Symbolen können Sie Inhalte in Ihrem Design wiederverwenden. Sie fügen ein Symbol hinzu, klicken Sie mit der rechten Maustaste auf ein Element auf der Leinwand und wählen Symbol erstellen aus. Außerdem gibt es eine Richtlinie zum Erstellen einer Verknüpfung ohne Verknüpfung. Benutze einfach Control Shift Eight. Also hier haben wir eine Beschreibung der Symbole und der Gesundheit der Symbole. Um ein neues Symbol zu erstellen, klicken Sie einfach auf diesen Plus-Button. Und wenn das Symbol erstellt wurde, können wir uns hier eine Liste aller vorhandenen Symbole ansehen. Als nächstes haben wir Navigator. Dies ermöglicht es uns, den Inhalt einer Webseite zu durchsuchen. Also hier haben wir den Text im linken Bereich und wählen alle Seiten aus. also dieses Tag für alle Seiten auswählen und das Design auf dieser Registerkarte festlegen , wird das gesamte Projekt überlagert. Die nächste Seite. Wenn Sie auf dieses Symbol klicken, haben wir Zugriff auf alle Seiten in einem Word-Dokument und können problemlos zwischen ihnen wechseln. Also hier haben wir statische Seiten drinnen, wir haben Zuhause. Als nächstes kommen die darin enthaltenen Utility-Seiten. Wir haben ein Passwort für not for error. Und die dritte, als CMS-Sammlungsseiten. Alle Seiten der CMOs-Sammlungen werden angezeigt. Hier. Wir haben eine E-Commerce-Seite. Wenn wir neue Seiten erstellen möchten, klicken Sie einfach auf dieses Symbol. auf diese Neue Seite erstellen klicken, erhalten wir neue Einstellungen. Mit ihrer Hilfe. Wir können die Details zu unseren Seiten angeben und den neuen Strand erstellen. Und dann haben wir Zugriff auf über CMS-Sammlungen. Um eine neue Sammlung zu erstellen, klicken Sie einfach auf dieses Symbol. Oben haben wir eine Sammlung von Vorlagen. Von hier aus können wir also wählen welche Art von Sammlung wir benötigen. Also hier haben wir Blogbeiträge, Autoren, Kategorien, Projekte, Kunden , Teammitglieder, Gewinner, Menüpunkte, Songs, Shows, Rezepte. Dies sind alle Vorlagen, die hier verfügbar sind. Als Nächstes haben wir eine Sammlungseinstellung. Hier können wir die Sammlung benennen. Und als nächstes haben wir die Sammlungs-URL. Nächstes Jahr haben wir eine Sammlung , die von den vorhandenen Feldern abweicht, oder wir können die neuen Felder hinzufügen. In den benutzerdefinierten Feldern. Wir können wählen, um welche Art von Feld es sich handelt. Hier haben wir blinde Tage, Rich Takes Image, Multi Image. Wir trennen, verknüpfen, E-Mail, Telefon, Nummer, Datum oder Uhrzeit, wechseln, färben, die Optionsdatei, obwohl wir die Möglichkeit haben, die Sammlung zu löschen. Als nächstes haben wir eine E-Commerce-Sammlung. Wenn wir unsere Website in ein Geschäft verwandeln, kann diese Option verwendet werden. Als Nächstes haben wir Zugriff auf die Vermögenswerte. Um eine Datei zu den Assets hinzuzufügen, können wir die Dateien einfach hier ablegen. Um die Dateien zu den Assets hinzuzufügen, können wir das Cloud-Upload-Symbol in diesem Asset-Panel verwenden. Und schließlich haben wir Zugriff auf die Einstellungen. Hier haben wir Such- und Backups. Das ist alles, was wir in der Lage waren, unser Projekt zu sichern. Und dann können wir ein neues Backup erstellen indem wir auf diese neue Backup-Option klicken. In der linken Werkzeugleiste unten haben wir Audits. Dieses Prüfungsgremium befasst sich mit häufig auftretenden Fragen im Zusammenhang mit Barrierefreiheit. So können wir Namen verhaften, bevor wir mit unserer Website live gehen. Einige der häufigsten Probleme sind fehlende Alt-Tags, unscheinbar, der Linkinhalt, zu niedrige Script-Überschrift. Wir schauen uns das Audit an, uns schnell gut. Mit Hilfe dieser Schnellkorrektur können wir also Elemente zur Leinwand hinzufügen. Unter der Kurzanleitung Sie Video-Tutorials. Wenn wir diesbezüglich Zweifel haben, können wir auf die Tutorials zugreifen, indem verwenden, also ich klicke auf diese Woche redaktionelle Seite abrufen. Und schließlich haben wir dabei geholfen. Wir haben Tastenkombinationen. Davon. Wir sind in der Lage, die zahlreichen Tastenkombinationen zu finden , um unseren Arbeitsaufwand zu reduzieren. Dazu haben wir eine CSS-Vorschau und eine Erhöhung , Komplettlösung. Wir haben also alles in der linken Werkzeugleiste abgeschlossen. Als nächstes werde ich mich mit der Leinwand befassen. Dies ist der größte Abschnitt in der Benutzeroberfläche. Es ist genau hier. Wir können eine Vorschau unseres Projekts sehen. Um mehr Details zu erhalten, lassen Sie mich mit dem Hauptteil mit Hilfe des Hinzufügen-Panels auswählen. Ich füge einen Abschnitt zum Hinzufügen dieses Abschnitts zur Leinwand hinzu. Oder wir könnten sehen, dass der Abschnitt erstellt wurde. nun zu dieser Abschnittsauswahl Lassen Sie mich nun zu dieser Abschnittsauswahl einen Container hinzufügen, sodass der Container in diesem Abschnitt erstellt wird. Jetzt wurde dieser Container im Canvas in diesem Abschnitt erstellt. Jetzt gehe ich zu den Panels auf der rechten Seite über. Anstatt unser Angebot als rechte Seitenleiste anzubieten, können wir es auch als Inspektor bezeichnen, weil wir einatmen, oder wir können die verschiedenen Eigenschaften des ausgewählten Elements überprüfen . Hier haben wir den Abschnitt ausgewählt. Alle zugehörigen Eigenschaften werden hier angezeigt. Was die Mitarbeiter angeht, wir haben ein Steuerelement für das Layout des Elements. Darunter. Wir haben die Radiusverschiebung. Als nächstes haben wir ein Abstandswochenende und geben ihnen Sauerstoffwerte als unseren und auch den Füllwert des jeweiligen Elements. Als Nächstes haben wir die Kontrolle über die Größe. Darin, Wochenende, äh, gib den Breitenwert, den Höhenwert an. Stellen Sie auch an einem Wochenende die Mindestbreite, Mindesthöhe, die maximale Breite und die maximale Höhe ein. Der Überlauf. Wir haben die Möglichkeit, das Scrollen auszublenden, und wenn wir die Option haben, anzupassen, haben wir als Nächstes, äh, wir haben eine Position, an der ein DDA und die Position des Elements auf der Seite berücksichtigt. Anstelle von Position haben wir statische, relative, absolute, feste und klebrige Positionen. Und wir haben auch die Option für Float und Clear. Kommen wir zum nächsten, das ist typografisch. Hier können wir die Schriftart der einzelnen Texte festlegen. Und wir können das Gewicht dazu sagen, eine Größe, Höhe, Farbe. Wir können also sagen, wie es ausgerichtet ist. Und es hat auch ein stärkeres Styling für den Text. Und kommen wir zu den weiteren Typoptionen. Es hat Buchstabenabstand, Text, beabsichtigte Spalten und ein Wochenende. Wählen Sie die Option in der Großbuchstaben. Und es hat auch eine tolle Option. Sogar an einem Wochenende gab es Textschatten. Als nächstes haben wir Hintergründe. Um das Hintergrundbild einzustellen, verwenden Sie die Plus-Option im Bild und im Farbverlauf. Wählen Sie hier ein Wochenende aus welche Art von Hintergrund wir hinzufügen müssen. Und wir können auch die Hintergrundgröße festlegen , die das benutzerdefinierte Cover ist und sogar eine Wochenendposition des Hintergrundbildes enthält sogar eine Wochenendposition , oder wir können die Hintergrundbildkacheln festlegen. Das Hintergrundbild kann fest oder nicht fixiert sein. Was den Typ des Hintergrunds angeht, können wir den Typ als linearen und radialen Verlauf festlegen . Schließlich haben wir unseren DBA und einen anderen Hintergrund, oder wir haben Farben. Und es gibt auch einen Ausschnitt mit dem Auktionshintergrund über Schlaghandschuh-Hintergrund zum Canton Club-Hintergrund zum Text. Als nächstes haben wir Grenzen. Wir können die Grenze so einrichten, dass sie um die Ecke ist. Dafür haben wir die Option Radius. Indem Sie den Pixelwert angeben. Die abgerundete Ecke kann erstellt werden , wenn wir die Grenze an einer bestimmten Site sagen können. Es gibt auch diese Kacheln für die Grenzen. Die Dicke der Ränder kann dadurch angegeben werden wobei die Farbe den Rändern gegeben werden kann. Nach dem Krieg haben wir Ethik. Ethik ist, dass wir verschiedene Modi haben . Sogar an einem Wochenende, stellen Sie die Opazität ein. Sogar ein Wochenende und ich habe diese Kachel für den Entwurf gesagt. Wir können der Box hier Schatten geben, oder wir haben die beiden Typen, die es für außen und innen gibt . Sogar an einem Wochenende stelle ich den Winkel des Box-Shadows ein und mache ihn rückgängig. Wir haben Entfernung, Blair, Größe und Farbe. Als nächstes haben wir die Pflicht und verändern uns wirklich. Dies wird verwendet, um das Aussehen und die Positionen eines Elements zu manipulieren , ohne die umgebenden Elemente zu beeinflussen. Um das 3D-Erscheinungsbild zu erzielen, haben wir die Möglichkeit, zu verschieben, zu skalieren, zu drehen und zu skalieren. Der nächste sind Übergänge. Dieser Übergang trug dazu bei, eine reibungslose Animation zwischen verschiedenen Zuständen eines Elements zu erzeugen eine reibungslose Animation zwischen . Wir können die Art des Übergangs festlegen , der für ein Element benötigt wird. Hier sind alle Arten der Übergänge. Wir haben gemeinsame Übergänge. Übergang im Hintergrund. Als nächstes folgen die Größenübergänge, Ränder, Topographie, Koeffizient, Rand, Polsterung und Biegung. Und wir haben auch fortgeschrittene Übergänge. Eine Dauer und eine Lockerung können angepasst werden, um einen einzigartigen Übergang zu schaffen. Als nächstes haben wir die volle Dosis. Die volle Dosis gibt uns eine Ranke, über der wir Wirkungen haben, die auf jedes Element zutreffen können. Die Optionen des Filters sind, das ist ein schonender Filter und wir haben Farbanpassungen und Farbeffekte. Schließlich haben wir das, weil wir unseren Gazastreifen mit dieser Option individuell gestalten können . Jetzt haben wir also einige zusätzliche Optionen. dann auf das Einstellungssymbol klicken, können wir IDs für verschiedene Elemente festlegen. Und wir haben auch benutzerdefinierte Attribute. Als nächstes von hier. Wir haben auch Zugriff auf diesen Kindermanager. Und das zeigt uns alle Klassen, die im Projekt verwendet werden. Und dann ist dies endlich das Panel für Interaktionen. Hier können wir Animationen in Webflow erstellen. In dieser Anweisung haben wir zwei Auslöser. Einer ist Element Trigger. Innerhalb des Elementauslösers haben wir Mausklick, Maus, Mausbewegung. Unsere Elemente, scrolle beim Hineinscrollen in die Ansicht. Und schließlich wechseln wir zur oberen Werkzeugleiste, die Sie hier oben finden. Oben haben wir das Symbol zum Exportieren unseres HTML-, CSS- oder JavaScript-Codes. Dann haben wir die Möglichkeit , unser Projekt mit anderen zu teilen. Am Ende haben wir Publish. also die Domain auswählen, können wir auf der ausgewählten Domain veröffentlichen. Und wir haben auch erweiterte Optionen. Wir haben die Optionen zum Rückgängigmachen und Wiederherstellen. Und wir haben Kontrollen für die Antwortseite des Webdesigns. Wir können zwischen verschiedenen Breakpoints wechseln, indem auf jeden einzelnen klicken, um eine Vorschau unserer Website in verschiedenen Bildschirmgrößen anzuzeigen. Und mit dieser Option können wir auch größere Breakpoints als die Basisgebotspunkte hinzufügen . In dieser Lektion lernen wir, dass Webflow ein CMS ist. Okay, jetzt, da wir alle Informationen zu den Grundlagen haben , in der nächsten Lektion sehen, werden wir in der nächsten Lektion sehen, wie wir unsere Website einrichten. 4. Kursprojekt: Um mit Webflow vertraut zu sein, posten Sie Unique, um die Website zu klonen. Ersetze Bilder, passe Farben und Inhalte an. Sie erstellen Ihre eigene Portfolio-Website, was sehr einfach ist. Sobald Sie sich damit vertraut gemacht haben, suchen Sie die Figma-Datei im Ressourcenbereich, der in Ihr Figma-Konto importiert wurde , und beginnen Sie mit der Erstellung der Website, wie wir es in diesem Kurs tun. Sie können das Design auch nach Ihren Wünschen ändern. Nachdem Sie all dies abgeschlossen haben, stellen Sie sicher, dass Sie Ihre Projekte einreichen, damit ich Ihre Projektarbeit analysieren kann. 5. Erste Schritte: In dieser Lektion werden wir eine Website einrichten, die für unser Projekt benötigt wird. Mal sehen, wie das geht. Beim Öffnen des Workflows erhalten wir diesen Bildschirm. Klicken Sie einfach auf das neue Projekt. Jetzt bekommen wir einen Bildschirm wie diesen. Um ein neues Projekt zu erstellen. Wählen Sie die jetzt ausgewählte Option für die leere Seite geben Sie ihr nun den Namen der Site, da ich bereits ein Projekt erstellt habe. Also schließe ich es. Jetzt kannst du das Projekt, das ich erstellt habe, in diesem Grün sehen. Jetzt öffne ich das Website-Projekt dieses Künstlers und es führt uns zum Designer. Jetzt bekommen wir die leere Leinwand. Jetzt importieren wir die Schriften und es wartet auf Sie unser Projekt, um das zu tun. Wenn Sie das Hamburger-Symbol hier auswählen, können wir die Projekteinstellungen von hier aus finden. Wählen Sie Schriften aus. Jetzt wähle ich die Schrift Poppins aus und warte auf diese knallenden Schriften oder 300, regulär 500600700800. Und jetzt füge ich diesen Punkt hinzu. Jetzt füge ich wieder ein Telefon mit einem Namen hinzu. Und jetzt fügen wir diese Schriftart hinzu. Jetzt veröffentliche ich es in der ausgewählten Domain. Gehen wir nun zurück zum Designer. Jetzt haben wir den Bildschirm. Ich gehe zum Navigator und wähle den Körper aus. Der Körper wird also unter dem Selektor ausgewählt. Ich wähle das HTML-Tag, den Body, All Pages und eine andere Typografie. Ich wähle die Schriftart als Poppins und die Größe zwischen den Pixeln. Ich gebe die Farbe im Hexadezimalwert an. Und lass die Höhe 1,4 Bindestrich sein. Dieses typografische Design wurde auf den Hauptteil angewendet, Registerkarte „ Alle Seiten“. Also jetzt veröffentliche ich es auf der ausgewählten Domain. In dieser Lektion haben wir erklärt, wie man eine Website erstellt, und außerdem haben wir eine Schriftart hinzugefügt, die erforderlich ist. In der nächsten Lektion beginnen wir also mit der Header-Navigation. Wir sehen uns in der nächsten Lektion. 6. Header-Abschnitt – Teil 1: In dieser Lektion werden wir uns dem Header-Bereich unserer Website befassen. Jetzt müssen wir etwas über die Planung des Box-Modells wissen. Die Boxmodellplanung dient dazu, die Struktur des Headers zu verstehen und auch, wie sie mit Logos umgehen die für die Struktur dieses Headers verwendet werden. Jetzt haben wir den gesamten Header-Bereich. Und darin werden es zwei Abschnitte sein. Das ist ein linker Bereich für ein Logo und Minow. Und der richtige Abschnitt für die Taste und die Telefonnummer. Dies ist die Wüste, die wir für unsere Website implementieren werden. Lass uns weitermachen. Bevor Sie mit dem Unterricht beginnen. Sehen wir uns ein gemeinsames Buddha-Box-Modell an, das für alle Bereiche im Inneren des Körpers angewendet wird . Wir müssen einen Abschnitt hinzufügen und den entsprechenden Klassennamen für diesen Abschnitt angeben. Als nächstes folgt der Abstand für diesen Abschnitt. Das heißt, wir müssen den oberen und unteren Füllwert dafür angeben. Nachdem wir darin einen Abschnitt erstellt haben, müssen wir einen Container hinzufügen und der Klassenname sollte für diesen Container angegeben werden. Jetzt können wir das Element innerhalb des Containers hinzufügen , das für den erforderlichen Abschnitt geeignet ist . Prüfen Sie, ob das Board im Navigator ausgewählt ist. Jetzt füge ich diesen Abschnitt hinzu. Jetzt gebe ich den Klassennamen als Header an. Schnapp dir. Dieser Klassenname sollte verständlich sein. Sei dir dessen immer bewusst. Jetzt füge ich unter dem Header-Wrap einen Container hinzu. Sie haben die maximale Breite als 15, 20 Pixel. Dieser spezielle Größenwert wird also in der Containerklasse gespeichert. Wann immer ich also die Containerklasse verwende, gilt diese Größe für dieses Element. Im Inneren des Containers. Ich werde ein Logo und ein Minimum hinzufügen. Um das zu tun, gehe ich unter die Komponente und hinein, das ist ein Ellbogen. Wählen Sie dies jetzt aus, aber wenn Sie das jetzt gekaufte auswählen, werden die Standardmenüs innerhalb des Containers hinzugefügt. Im Navigator konnten wir den Container darin sehen, das ist eine Navigationsleiste. Und wieder darin befindet sich ein Container , in dem sich die Mitte der Marke und die Menütaste befinden. Während das Markenlogo, der Zweck der Menüschaltfläche darin besteht, die Website auf dem Handy anzuzeigen, wird sie auf dem Handy als Hamburger-Symbol angezeigt . Ich wähle den Container aus , der weniger als eine Stunde ist. Auf der anderen Seite wähle ich die vorhandene Containerklasse. Größe, die im Container angewendet wird, wird also auf den Navbar-Container angewendet. Zuerst werde ich ein Logo hinzufügen. Also wähle ich die Marke. Also muss ich darin ein Bild hinzufügen, das für ein Logo bestimmt ist. Anstatt immer wieder zum Element hinzufügen zu gehen, verwende ich die Tastenkombination für die Schnellkorrektur , die gesteuert wird plus E für Windows und Command plus E für Mac OS. Sie werden also das Schöne bekommen, was immer auftaucht. Jetzt können Sie nach einem Bild suchen. Nachdem Sie das Bild ausgewählt haben, wird ein Pop-up angezeigt , in dem Sie das benötigte Bild auswählen können, nämlich für das Logo. Ich habe das Logo für meinen Header-Bereich platziert. Sie könnten also das Bild unter der Marke im Navigator unter dem Container sehen Navigator unter dem Container um einen gesamten Header-Bereich zu erstellen. Ich füge einen Diblock hinzu, indem ich das Quick Final verwende. Ich ziehe die Entwicklung nach oben. Und ich nenne die Klasse als Header in voller Breite. Unter der Kopfzeile in voller Breite haben wir zwei Abschnitte, nämlich einen Kopflippenabschnitt und einen rechten Kopfzeilenabschnitt. Also erstelle ich ein entwickeltes, mit einer Schnellkorrektur. Und ich gebe den Klassennamen als Header im linken Abschnitt. Im Header-Bereich haben wir ein Logo und ein Minimum. Im Kopflippenbereich ziehe ich das Logo jetzt amino, einen Amino-Button. Wir brauchen einen Header, rechte Sektion. also den Header in voller Breite auswähle, erstelle ich mit einem QuickFind einen Diblock. Der Header-Abschnitt wird also das untergeordnete Element des Headers in voller Breite sein. Erstellen Sie den Klassennamen als Header im rechten Abschnitt. Jetzt machen wir die Ausrichtung für den Griff in voller Breite, indem wir auf der rechten Seite den Header in voller Breite auswählen auf der rechten Seite den Header in voller Breite , unter der Ebene, die Sie als Flocken anzeigen und die Ausrichtung auf in die Mitte stellen und ausrichten , sodass der Raum gleichmäßig von Anfang bis Ende verteilt wird. Nun zu den Minnows, wir müssen die Typografie festlegen. Ich wähle die Schrift als Poppins und das Gewicht als 500, mittlere Größe S, 18 Pixel. Nun zur Farbe Ich gebe den Farbwert aus dem Figma-Design für diese Farbe an und erstelle ein Farbfeld. Wenn ich ein Swatch erstelle. So kann diese bestimmte Farbe verwendet werden, wann immer ich sie brauche. All diese typografischen Werte werden unter der Navlink-Klasse gespeichert. Wenn ich also diese Nav-Link-Klasse für die anderen vorhandenen Menüs verwende , werden diese Werte auf diese Menüs angewendet. Tun. Wir konnten also anhand des Figma-Designs deutlich sehen , wie die Klasse verwendet wird. Wir haben insgesamt 5 Minuten Zeit. Also dupliziere ich die zwei zusätzlichen Minuten. Jetzt benenne ich die Menüs in Projekte und Preise um. Ich muss den Abstand für eine Frau angeben, die das Nav-Link-Glas unter dem Abstand auswählt, ich gebe ihnen einen linken Abstand von 30 Pixeln. Für die richtige Polsterung gebe ich die 30 Pixel an. Jetzt benötigen wir den Abstand für das gesamte Menü. Also wähle ich das Nomenmenü unter dem Abstand aus und gebe den Füllwert als 60 Pixel an. Für die gesamte Navigationsleiste. Standardmäßig ist die Hintergrundfarbe großartig. Im Figma-Design ist die Hintergrundfarbe jedoch weiß. Also müssen wir die Hintergrundfarbe für das Netzwerk ändern . Ich wähle den Nachbarn aus. Ich gehe im Farbbereich unter die Topographie und wähle die Transplantation aus. Die Farbe hat sich also im Roman geändert. Das ist kein ausreichender Abstand oben und unten im Roman, ich gebe diesen Abstand für das Netzwerk an. Unter dem Abstand konnten wir also die Panik für die obere und untere Polsterung sehen, ich gebe den Wert mit 40 Pixeln an. In der nächsten Lektion werden wir einen modalen Header-Abschnitt sehen , der aus einer Anmeldeschaltfläche und einer Telefonnummer besteht. Wir sehen uns in der nächsten Lektion. 7. Header-Abschnitt – Teil 2: Jetzt werden wir uns mit dem rechten Kopfbereich befassen. Zuvor haben wir mit dem Header-Bereich gesehen , der ein Logo und Aminos zerstören kann. Jetzt haben wir im rechten Bereich eine Anmeldeschaltfläche und Kontaktdaten. Wir werden den Entwickler verwenden oder die Anmeldeschaltfläche von den Kontaktdaten trennen. Auch hier werden wir in den Kontaktdaten einen Abschnitt mit zwei Abschnitten haben, nämlich für das Gall-Symbol und einen weiteren für die Telefonnummer. Der Navigator, ich wähle den Header-Bereich mit Hilfe von Quick Fine aus, ich suche nach der Schaltfläche. Die Schaltfläche wird im Header-Bereich hinzugefügt. Ich benenne diesen Button in Signup um. Jetzt muss ich die Topographie für die Anmeldeschaltfläche angeben. Ich lege die Schriftart auf Poppins fest, Gewicht auf 500, mittlere Größe mit 18 Pixeln. Und ich gebe die Zeilenhöhe als 1,3 Bindestrich an. Der Bindestrich wird verwendet, um die Einheiten Asper im Figma-Design auszuschließen die Einheiten Asper im Figma-Design Ich gebe den Farbwert in der Typografie an. Nun für den Hintergrund dieser Schaltfläche, unter dem Hintergrund, wähle ich jetzt die weiße Farbe für die Ränder und gehe unter den Randbereich auf dieser Registerkarte Ich wähle diesen Volumenkörper mit einem Pixel die Farbe ist dem großen Madison entnommen , da es eine schwarze Farbe gibt. Als nächstes der Radius, das ist die abgerundete Ecke der Schaltfläche. Ich gebe den Wert als 12 Pixel an, um den Abstand für die Schaltfläche und den Füllwert anzugeben. Für die Oberseite und die Unterseite sind es 15 Pixel. Und für die linke und rechte Polsterung beträgt der Wert 20 Pixel. Jetzt gehe ich zum ausgewählten Abschnitt, um den Klassennamen und die Button-Klasse auszuwählen. Jetzt benenne ich die Aufwärtstaste um. Wenn ich den Klassennamen dieser Schaltfläche nicht geändert habe, wird der Stil, den ich angegeben habe auch für andere Schaltflächen beeinflusst. Deshalb benenne ich die Klasse um. Jetzt konnten wir die Header-Schaltfläche und den Header-Abschnitt sehen . Jetzt müssen wir Kontaktdaten hinzufügen , über die Anmeldung entscheiden, indem wir mit Hilfe von QuickFind einen Header-Abschnitt auswählen und den Block hinzufügen. Und ich gebe der Klasse den Namen S Head the Contact. Im Kopf dieser Kontaktperson. Wir haben die beiden Abschnitte für das Telefonsymbol und einen weiteren für die Telefonnummer. Ich füge eine hinzu, die mit Hilfe von QuickFind entwickelt wurde. Nachdem Sie das Symbol „Geben Sie den Klassennamen als Kontakt angeben“ hinzugefügt haben, brechen Sie den Zeiger um. Unter der Theke kann ich einpacken. Wir werden das Telefonsymbol hinzufügen. Also suche ich nach dem Bild. Das Pop-up erscheint daraus. Ich wähle das Bild aus und platziere dann das Telefonsymbol in der Wüste. Wir haben das Telefonsymbol hinzugefügt. Die Größe ist also sehr klein, also müssen wir die Größe ändern. Unter der Größe gebe ich also 50 Pixel für die Breite und 50 Pixel für die Höhe an. Nun zur Hintergrundfarbe für dieses Telefonsymbol gebe ich den Farbwert aus dem Figma-Design an. Jetzt müssen wir dieses Symbol in die Mitte bringen. Also gehe ich zur Ebene unter Display. Ich entscheide mich für Flux und richte mich nach der Mitte aus und begründe es. Die Ikone kommt also in die Mitte. Als nächstes, um den Rand zu kacheln, gehe ich an einen anderen Rand und gebe den Wert als 15 Pixel an. Wir haben das Symbol hinzugefügt, aber wir benötigen eine Telefonnummer, um hinzugefügt zu werden. Wie wir wissen, ist das Telefonsymbol ein weiterer Kontakt. Mit Hilfe von QuickFind. Ich füge dem Link Text hinzu. In der Link-Sitzung. Wählen Sie das Telefonsymbol. Benennen Sie es jetzt mit einer Telefonnummer um. Wählen Sie nun keine aus dieser Kachel für diesen Textlink aus. Nun zum Klassennamen für diese Textkachelung und Umbenennung, sie hat Header-Telefon, Nick. Niemand bewegt sich zur Topographie, ich stelle die Schrift auf Poppins und die Stärke SY, mittlere Größe mit 18 Pixeln, die Zeilenhöhe auf 1,3 Bindestrich und die Farbwerte aus dem Figma-Design. Hier sollte sich die Telefonnummer neben dem Telefonsymbol befinden. Im Header-Kontakt-Web. Wir haben das Telefonsymbol und auch Ihre Telefonnummer. Also wähle ich den Header Contact Rep und gehe zu Leo im Display. Ich wähle S Flex und richte es auf die Mitte aus. Der Abstand auf der Telefonleitung in der Kopfzeile ist nicht ausreichend. Also wähle ich das Header-Fondling aus und für das Padding gebe ich den Wert als 20 Pixel an und auch der rechte Headerbereich ist nicht gemäß dem Design ausgerichtet. Ich wähle den rechten Abschnitt in der Kopfzeile aus. Ein weiteres Layout im Display, ich wähle Flex und richte es in der Mitte aus. Wir benötigen den Abstand zwischen dem Button und den Kontaktdaten. Also wähle ich die Kopfzeilen-Kontaktwrappe aus. Also unter dem Abstand gebe ich den linken Abstand auf 30 Pixel. Jetzt wähle ich das veröffentlichte Projekt aus. Wenn Sie die veröffentlichte Domain auswählen, um eine Domain auszuwählen, können Sie sich ein Design auf unserer Website ansehen. Wenn Sie also Ihr Design auf einer Website sehen möchten, klicken Sie einfach auf die Schaltfläche Veröffentlichen und bewegen Sie sich mit der Maus über jedes Menü. Sonst ist nichts passiert. Und auch das ist kein ausreichender Abstand oben. Also gehe ich zurück. Alle Elemente sind in dem Roman enthalten. Also wähle ich die Navigationsleiste unter dem Abstandsbereich aus. Lässt den Abstand für die obere und untere Hälfte 40 Pixel betragen. Lass es uns veröffentlichen. Jetzt können wir den ausreichenden Abstand für unser Level sehen . Jetzt müssen wir den Übergangseffekt in den Menüs erzielen. Jetzt wähle ich diese jetzt verknüpfte Klasse aus. Also, welche Änderungen nehme ich an diesem Kurs vor? Es wird sich auf die Elemente auswirken , die alle diese Klasse verwenden. Jetzt muss ich tun, welcher Übergang stattfinden soll. Im Normalzustand ist das also nicht der Fall. Ich gehe zum Übergang über. Ich wähle den Typ als Schriftfarbe aus. Jetzt, zurück, ändere ich den Zustand auf „Übertreiben“. Auf Hosted sollte sich die Farbe ändern. Also unter der Typografie ändere ich die Farbe. Und ich habe dem Figma-Design den Farbwert gegeben. Jetzt erstelle ich das Farbfeld als Sekundärfarbe. Lass den Staat, wir Nan nochmal. Jetzt erhalten alle Menüs diese Eigenschaften da alle Menüs dieses Nav-Link-Glas verwenden. Jetzt müssen wir der Telefonverbindung den Übergangseffekt verleihen . Also wähle ich das aus. Also während des Übergangs wähle ich, dass die Flut unter der Topographie verfärbt ist. Nachdem ich den Status „Nicht-Staat“ abgeschlossen habe, gehe ich in den Hover-Status über. also auf unsere Primärfarbe wechseln , während ich den Mauszeiger bewege Lassen Sie die Farbe also auf unsere Primärfarbe wechseln , während ich den Mauszeiger bewege, und wählen Sie dann den Nicht-Status aus. Jetzt veröffentliche ich es. Mal sehen, wie unser Übergang funktioniert. Während Sie den Mauszeiger über die Menüs bewegen. Ruft sehr perfekt auf. Sogar die Telefonverbindung funktioniert perfekt. Wir haben jedoch keinen Übergangseffekt für unsere Anmeldeschaltfläche vorgenommen. Also lass uns das auch machen. Jetzt wähle ich die Header-Schaltfläche im Nicht-Bundesstaat. Lassen Sie uns den Übergang für die Anmeldeschaltfläche durchführen, wir werden den Baumübergang insgesamt durchführen. Lass es uns eins nach dem anderen sehen. Ich gehe zum Übergang. Ich wähle den Typ als Schriftfarbe. Und wieder gehe ich zum Übergang und wähle den Typ als Hintergrundfarbe. Der letzte Übergang ist Aquarell. Dies sind alle Anstrengungen für den Übergang. Wir gehen auf der Anmeldeschaltfläche zu einem Spiel. Jetzt müssen wir angeben, welcher Effekt auftreten soll, wenn Sie den Mauszeiger über die Schaltfläche bewegen. Also wähle ich den Schwebezustand unter der Topographie, ich wähle die Farbe Weiß. Wir geben ihm einen dreifachen Übergangseffekt. Also für den zweiten Übergang, das ist der Hintergrund, wähle ich die Hintergrundfarbe als Schwarz. Und der dritte Übergang ist die Randfarbe. Also wähle ich die Randfarbe als Sekundärfarbe. Schon wieder. Lass es uns veröffentlichen, um zu sehen, wie es funktioniert. Jetzt konnten wir sehen, wie reibungslos der Übergang für die Minnows verläuft für die Minnows und der Anmelde-Button unter Streicheln funktioniert alles super. In der nächsten Lektion werden wir uns mit dem Heldenbereich befassen , der aus zwei Spalten besteht. Die erste Spalte ist für den Inhalt und die zweite Spalte für das Bild. Aber in der nächsten Lektion werden wir den Inhalt des ersten Codons entwickeln. Mal sehen, wie wir das machen werden. 8. Banner – Teil 1: In dieser Lektion werden wir uns dem Heldenbereich befassen, sich im Header-Bereich befindet. Auch für diesen Heldenbereich werden wir den Box-Modellplan verwenden. Nun zum Plan Wir werden einen kompletten Heldenbereich darin haben. Wir werden einen linken Abschnitt von Abschnitt I und einen Fahrabschnitt haben . Im linken Abschnitt werden wir für jeden Inhalt einen Div-Block haben . Das ist für den Untertitel, den Titel, die E-Mail, die ID und die Schaltfläche „Folgen“. Im rechten Abschnitt werden wir ein Bild haben. Das ist also die Planung, die wir ausführen werden. Lassen Sie uns also mit der Entwicklung fortfahren. Bevor Sie mit dem Unterricht beginnen. Schauen wir uns das gemeinsame Box-Modell an, das für alle Abschnitte innerhalb des Körpers angewendet wird . Wir müssen einen Abschnitt hinzufügen und den entsprechenden Klassennamen für diesen Abschnitt angeben. Als nächstes folgt der Abstand für diesen Abschnitt. Das heißt, wir müssen den oberen und unteren Füllwert dafür angeben. Nachdem wir darin einen Abschnitt erstellt haben, müssen wir einen Container hinzufügen und der Klassenname sollte für diesen Container angegeben werden. Jetzt können wir das Element innerhalb des Containers hinzufügen, das für den erforderlichen Abschnitt geeignet ist. Klicken Sie nun auf den Körper darunter. Wir werden einen Abschnitt hinzufügen, indem wir die Schnelltaste verwenden. Ich gebe der Klasse den Namen als Heldenrep-Abteilung. Im Bereich Hero Rep füge ich einen Container hinzu. Also für diesen Container, Einstufung einer Klasse als Container, die bereits existiert. Also verwende ich die vorhandene Klasse unter dem Container. Ich werde einen Div-Blob hinzufügen. Jetzt gebe ich der Klasse den Namen Alia als Heldeninhalt. In diesem Block wird der gesamte Heldeninhalt gespeichert. Nun, sagen wir den Inhalt des Heldenbereichs, werde ich ein Raster hinzufügen, das als zwei Abschnitte für Inhalt und Bild fungiert. Standardmäßig besteht das Raster aus zwei Spalten und zwei Zeilen. Jetzt lösche ich eine Zeile aus dem Bearbeitungsraster, das sich im Layout befindet. Jetzt haben wir also nur zwei Spalten mit einer Zeile. erste Spalte ist der Bereich für den Inhalt und die zweite Spalte ist der Bereich für das Bild. Jetzt benenne ich die Klasse in Hero Area Grid um. Nun, wieder, unter dem Bearbeitungsraster, passe ich die Größe der ersten Spalte in jeder Spalte Wir müssen einen Div-Look hinzufügen. Es wird also der Ort sein, an dem das Inhaltsbild aufbewahrt wird. Nun zu den Blöcken sind ADA im Heldenbereichsraster. Jetzt gebe ich den Klassennamen für den ersten Abschnitt, der als Hero Lifts entwickelt wurde. Für den zweiten Block als Helden-Sektion. Jetzt werde ich den Inhalt für den Hero-Live-Bereich geben . Also wähle ich den Hero-Live-Bereich darunter aus. Ich suche nach einer Überschrift, die für den Titel sein wird. Ich habe den Überschriftstyp als Hedge One gewählt , Asper im Figma-Design, ich habe den Titel dafür bekommen. Sehen wir uns die Topographie für den Titel an, für das Telefon wähle ich Poppins und für die Höhe als extra fett 800 und die Größe als 70 Pixel. Ich passe die Zeilenhöhe bis ich die erforderliche Höhe erreicht habe. Jetzt benenne ich die Klasse in den Titel Hero Area um. Jetzt wähle ich die typografische Farbe als Sekundärfarbe. Im linken Bereich muss ich einen Untertitel hinzufügen. Also füge ich eine weitere Überschrift hinzu, den Überschriftstyp B, H2. Ich gebe diesen Untertitelinhalt als beide im Figma-Design an. Lassen Sie uns nun den Typ des Diagramms V4 dem Untertitel zuweisen. Ich wähle den Schrifttyp als Ebbe und das Gewicht als 400, normale Größe als 40 Pixel und die Höhe als 1,3 Bindestriche. Ich habe die Art der Grafikfarbe als Primärfarbe geändert . Ich muss den Untertitel zum Titel behalten, also ziehe ich ihn über den Titel des Heldenbereichs. Jetzt muss ich den Klassennamen ändern. Lass den Klassennamen Held sein, Bereichsuntertitel. Für den Untertitel Unter mehr Textoptionen in der Typografie wähle ich Kleinbuchstaben für den Buchstabenabstand. Ich gebe uns 0,0 bis m. Lassen Sie uns den Abstand für den Titel anpassen. Also gebe ich den Rand als Null an, damit er näher am Untertitel liegt. Im linken Bereich haben wir einen Untertitel zum Titel fertiggestellt. Als Nächstes müssen wir eine E-Mail-ID hinzufügen. Also füge ich im linken Bereich des Helden einen weiteren Diblock hinzu. Dafür gebe ich den Klassennamen so, wie Hero May Wrap, dieser Diblock bedeckt das Boot-Mail-Symbol, und ich bin eine Dame, um den Platz für das Mail-Symbol zu halten, ich muss eine weitere Entwicklung hinzufügen. Unter der männlichen Heldenhülle. Ich füge noch einen Diblock hinzu. Dafür. Ich gebe dem Klassennamen so, wie er das Mail-Icon-Diagramm geschrieben hat. Jetzt fügen wir das Symbol unter dem Hero Mail-Icon hinzu Ich füge hier ein Bild hinzu. Wir können das Mail-Symbol einschließen. Lassen Sie uns die Größe für dieses Symbol anpassen. Ich gebe die Breite als 50 Pixel und die Höhe als 50 Pixel an. Lass uns das Alignment dafür machen. also unter dem Layout den Wählen Sie also unter dem Layout den Display-Flex aus und richten Sie ihn dann Mitte aus und richten Sie ihn aus. Lass die Hintergrundfarbe dafür die weiße Farbe sein. Und für die Ränder Lass uns Gilda 15 Pixel als Radius verwenden. Jetzt müssen wir eine E-Mail-ID hinzufügen. Also wähle ich Hero Mail, das sowohl das Symbol enthält als auch ich bin eine Dame. Also unter Hero Main Wrap suche ich nach einem Textlink. Der nächste Link wird erstellt. Und danach füge ich Beleuchtung hinzu. Lassen Sie uns der E-Mail-ID die Topographie zuweisen. Ich gebe das Telefon als Poppins an, Gewicht 500, Medium und Größe wie 18 Pixel, die Zeilenhöhe als 1,3 Bindestriche. Ich wähle die Farbe für diesen Ralphie-Typ als Sekundärfarbe. Ich entscheide mich für keins beim Styling. Eine weitere Typografie, um den Hyperlink zu vermeiden. Jetzt benenne ich dieses Linkglas in Hero May Link Wir müssen diese erstellte ID neben dem Hauptsymbol mitbringen. Also wähle ich das gesamte Hero Male Wrap aus. Also wähle ich unter dem Layout Flex im Display und richte es in der Mitte aus. Wir benötigen den Abstand für die Mail-ID. Also wähle ich den Hero-Hauptlink aus. Ich passe den linken Abstand um zehn Pixel an. Es wird also der notwendige Abstand zwischen dem Symbol und der Hauptdarstellerin hergestellt, um im linken Bereich eine Schaltfläche hinzuzufügen Ich wähle den Helden-Live-Bereich aus. Also darunter suche ich nach dem Button. Die Schaltfläche wurde hinzugefügt. Lassen Sie uns nun die Typografie für diese Schaltfläche zuweisen, die Schriftart als Poppins, warte, ist Phi Handle Medium und die Größe ist 18 Pixel. Wählen wir die Farbe als Weiß. Wir müssen die Hintergrundfarbe für den Button angeben. Ich wähle die Hintergrundfarbe als Sekundärfarbe. Nun für den Abstand für die Schaltfläche gebe ich den Füllwert für die obere und untere Hälfte als 15 Pixel an. Für links und rechts als 40 Pixel. Ich habe vergessen, den Wert für die Zeilenhöhe anzugeben. Jetzt gebe ich den Wert als 1,3 Bindestrich an. Als nächstes gebe ich den Randwert an, das sind 20 Pixel. Wir müssen den Wasserfarben etwas Gutes tun. Also wähle ich die Randfarbe als Sekundärfarbe. Die Polsterung für den Button scheint nicht in Ordnung zu sein. Also werde ich den Füllwert ändern. Lassen Sie den oberen Füllwert 25 Pixel betragen. Das Gleiche gilt für die untere und für die linke Polsterung auf der rechten Polsterung. Und dass der Wert für den linken und rechten Abstand 60 Pixel beträgt. Und geben wir den Buchstabenabstand unter der Typografie für diesen Button als 0,0 EM an. Lassen Sie uns diese Schaltfläche nun umbenennen. Der E-Mail-Inhalt und die Schaltflächen scheinen sehr nahe beieinander zu sein, also müssen wir eine Lücke zwischen diesen beiden schaffen. Um das zu tun, muss ich einen Randbereich für den männlichen Vertreter schaffen. Ich wähle den Hero Male Wrap und gebe den Randwert für den unteren Rand als 20 Pixel an. Dieser Abstand scheint nicht in Ordnung zu sein. Also nochmal, ich ändere den Wert auf 40 Pixel. Jetzt ändere ich den oberen Randwert auf 40 Pixel. Jetzt scheint der Abstand zwischen diesen beiden sehr gut zu sein. In der nächsten Lektion werden wir uns mit dem rechten Abschnitt befassen , der aus einem Bild besteht, und außerdem werden wir ein Hintergrundbild für den gesamten Abschnitt hinzufügen. Hinzu kommt, dass wir einen Übergangseffekt für die Schaltfläche hinzufügen werden. Mal sehen, wie wir das machen werden. 9. Banner – Teil 2: Wir haben einen Buddha im linken Abschnitt gesehen. Jetzt werden wir uns mit dem richtigen Abschnitt befassen. Im rechten Bereich fügen wir ein Bild hinzu, das ein anamorphes Madison ist . Lass uns anfangen, es zu verdoppeln. Ich habe einen Helden ausgewählt, rechte Sektion im Hintergrund. Ich wähle Inhalt und Größe. Und lass die Kachel auch keins sein. Jetzt wähle ich das Bild für diesen Hintergrund aus. Lass unsere Position im Mittelpunkt stehen. Wie wir im Design gesehen haben, müssen wir ein weiteres Bild hinzufügen. Also wähle ich ein Bild unter dem rechten Heldenbereich aus. Wenn ich das Bild direkt verwende, das im Figma-Design verwendet wird, wird die Größe hoch sein. Um die Größe zu komprimieren. Ich verwende tiny png.com. Daraus erhalte ich das komprimierte Bild. Jetzt können Sie also sehen, dass die Größe reduziert wurde. Wenn ich die Option Bild in Hetchy DPI aktiviere , kann dieses klare Bild auf dem Retina-Display angezeigt werden. Ebenfalls. Wir müssen die Hintergrundfarbe für diesen Heldenbereich hinzufügen. Also wähle ich das Hero Area Grid. Jetzt im Hintergrund. Farbwert habe ich dem Figma-Design gegeben. In das Design haben wir die abgerundete Ecke aufgenommen. Also gehe ich weiter zur Grenze. Ich gebe dem Radius S 40 Pixel. Der Platz für die Polsterung oben in diesem Heldengebietsraster reicht nicht aus. Also gebe ich den Füllwert oben als 40 Pixel an. Wir müssen diesen Inhalt an der Mitte ausrichten. Also entscheide ich mich für Aligned at the Center. Das ist kein Füllabstand für den Inhalt des Hero-Live-Bereichs. Also wähle ich den linken Heldenbereich. Für den linken Füllwert gebe ich uns also 140 Pixel. Das ist ein bisschen mehr Abstand zwischen dem Titel und dem E-Mail-Inhalt. Also wähle ich den Hero Male Wrap und gebe den Randwert als 20 Pixel an. Lassen Sie uns eine Vorschau der Website anzeigen. In der Vorschau konnte ich das als Problem mit dem Folienabstand für den Titel und den Untertitel sehen . Lassen Sie uns das also wieder zur Entwicklung korrigieren. Jetzt wähle ich den Titel des Hero-Gebiets aus. Lassen Sie mich das Produkt für die Zeilenhöhe ändern, ich gebe uns 1.2 Bindestrich. Lassen Sie mich nun den Abstand für den Untertitel auf den oberen Randwert ändern . Lass den Wert Null sein. Jetzt müssen wir der E-Mail-ID den Übergangseffekt hinzufügen. Also wähle ich Hero May Link aus. Jetzt, im Nichtstaat, gehe ich zum Übergang über. Ich wähle den Typ für den Typ, den ich als Schriftfarbe wähle. Während ich den Mauszeiger bewege, sollte sich die Schriftfarbe ändern. Nachdem ich das beendet habe. Jetzt wähle ich den ganzen Staat. Bei der Ernte j sollte sich die Farbe ändern. Ich gehe zur Topographie im Farbbereich. Ich wähle die Grundfarbe S. Wir haben das Mailing beendet. Als nächstes ist der Button. Lass es uns am Ende machen. Unter dem Übergang in den Typ, den ich die Hintergrundfarbe auswähle, geben wir den Tumorübergang für diesen Button an. Also nochmal, ich werde für den Typ, den ich für die Randfarbe wähle , den Übergang machen. Wieder im Übergang für die damalige Zeit, wähle ich die Schriftfarbe. Jetzt ändere ich den Staat als HOH. Jetzt wähle ich unter der Typografie die Farbe als Sekundärfarbe. Nun zum Hintergrund, ich wähle die Farbe als Weiß. Lassen Sie uns eine Vorschau davon anzeigen. In der Vorschau funktioniert der gesamte Ring sehr gut für den Link und auch für den Button. Ich habe den Übergang für die Grenze hinzugefügt, aber das ist für die Grenze nicht erforderlich. Behalte es einfach. Lassen Sie uns nun den Abstand oben in diesem Heldenbereich hinzufügen. Lassen Sie mich dafür den oberen Füllwert als 30 Pixel angeben, damit Sie den Abstand oben sehen können. Okay, lass mich das jetzt in der Vorschau ansehen. In dieser Vorschau kann ich also den Abstand zwischen dem Header-Bereich und auch dem Heldenbereich sehen . Lassen Sie mich den Füllwert unten als 40 Pixel für diesen Heldenabschnitt zwei angeben. In der nächsten Lektion werden wir uns dem Abschnitt Sowjets befassen , der oben aus Titeln und unten aus drei Serviceartikeln besteht . 10. Service – Teil 1: In dieser Lektion werden wir uns dem Servicebereich für eine Website befassen. Bevor wir fortfahren, schauen wir uns die Planung für den Servicebereich an. Zunächst werden wir zwei Abschnitte als Hauptabschnitte haben . Der oberste Abschnitt ist für den Titel und den Untertitel. Der zweite Abschnitt bezieht sich auf den Bereich, in dem die Dienstleistungen angeboten werden, die wir auf ihrer Website anbieten werden. Im zweiten Abschnitt werden wir drei Dienste haben, wohingegen dieses Inhaltsmodell bei drei Blöcken einander ähnlich sein wird. In der ersten Entwicklung werden wir ein Feld für das Symbol und darunter bei item haben. Und noch einmal eine Beschreibung darunter, eine Beschreibung dieser Dienste. Und wieder darunter ein Button, um mehr zu erfahren. Es ist ein Ort für andere Div-Blöcke. Das ist also die Planung, die wir auf unserer Website umsetzen werden. Lass uns weitermachen, um es zu erstellen. Bevor Sie mit dem Unterricht beginnen. Schauen wir uns das gemeinsame Box-Modell an, das für alle Abschnitte innerhalb des Körpers angewendet wird . Wir müssen einen Abschnitt hinzufügen und wir müssen den entsprechenden Klassennamen für diesen Abschnitt angeben. Als nächstes folgt der Abstand für diesen Abschnitt. Das heißt, wir müssen den oberen und unteren Füllwert dafür angeben. Nachdem wir den Abschnitt darin benotet haben, müssen wir einen Container hinzufügen. Der Klassenname sollte für diesen Container angegeben werden. Jetzt können wir das Element in den Behälter hinzufügen, das für den notwendigen Abschnitt unter dem Körper geeignet ist . Lassen Sie uns mithilfe einer Schnellsuche einen Abschnitt erstellen. Jetzt gebe ich den Klassennamen als Wheezes Section, den oberen und unteren Füllwert für den Abschnitt 100 Pixel. Indem wir nun den Abschnitt Services auswählen, erstellen wir im Abschnitt Services einen Container Abschnitt Services , um die Klasse für diesen Container anzugeben Wählen wir den vorhandenen Klassencontainer aus. Im Inneren des Containers. Lassen Sie uns einen Div-Block für die Aufbewahrung der Titel erstellen. Geben wir den Klassennamen für diesen Diblock als Abschnitt mit dem Titel wrap an. Unter dem Abschnitt mit dem Titel Brad suche ich nach einer Überschrift. Lassen Sie uns es also mit dem Überschriftstyp Hedge Three erstellen. Jetzt benenne ich diese Überschrift in Dienste um. Unter der Typografie suche ich also nach einem niedrigen Schwanz und lasse die Breite 400 normal sein. Kommen wir nun zur Größe: Ändern wir sie auf 40 Pixel für die Höhe auf 1,3 Bindestrich. Ich wähle die Schriftfarbe als Primärfarbe und geben wir den Buchstabenabstand dafür mit 0,02 EM an. Jetzt muss ich den Klassennamen für diese Überschrift ändern , da dies die anderen Überschriften nicht beeinflussen sollte . Also benenne ich diese Überschrift um Klassenname S Abschnittsuntertitel. Als nächstes müssen wir den Titel geben. Also wähle ich diesen Abschnittstitel aus. Also darunter suche ich nach einer anderen Überschrift. Jetzt wähle ich den Überschriftentyp als H2. Jetzt gebe ich den Titelnamen wie im Design an. Also suche ich unter der Typografie nach den Poppins für die Schriftart, Typ. Als nächstes wähle ich für das Gewicht 800 extra fett. Jetzt gebe ich die Größe als 50 Pixel und eine Höhe als Ein-Punkt-Bindestrich mit zwei Bindestrichen an. Nun zu der Farbe für diesen Titel, ich suche nach der Schriftfarbe. Ich gebe ihm als Sekundärfarbe, wie wir bereits besprochen haben, wir müssen den Klassennamen für diese Überschrift ändern. Ich gebe den Klassennamen als Abschnittstitel an. Wir haben den Titelteil beendet. Und als Nächstes müssen wir uns auf den Inhalt der Dienste und andere Container konzentrieren . Auch hier erstelle ich einen Diblock , der unter dem Titel stehen wird. Jetzt gebe ich den Klassennamen für diesen Diblock als Content-Wrap. Es wird also alle Dienstinhalte in diesem Div-Blog enthalten . Jetzt haben wir den Raum für die Durchführung der Gottesdienste geschaffen. Also werde ich ein Raster erstellen , das unter dem Serviceinhalt verpackt ist. Standardmäßig besteht es aus zwei Spalten und zwei Zeilen. Hier benötigen wir drei Spalten , weil wir die drei Dienste verwenden. Also lösche ich eine Zeile und füge eine weitere Spalte hinzu. Jetzt ändern wir den Klassennamen für dieses Grid, da dies keine Auswirkungen auf die anderen Raster hat. Also ändere ich jetzt den Klassennamen als. Also sagt er Grid. Wir haben in jeder Spalte ein größeres Raster. Wir müssen einen Blog hinzufügen, um den Inhalt zu speichern. Und eine Sache, die wir verstehen müssen ist, dass die für die Dienste entworfenen Inhalte einander ähnlich sind. Also werde ich mich auf den ersten Serviceartikel konzentrieren. Wenn wir eindeutig festgelegt haben, dass der erste Serviceartikel ist, kann er für die anderen beiden zweimal dupliziert werden. Also Visa. Also suche ich unter dem Service Grid nach einem Diblock. Jetzt benenne ich diesen Diblock S um. Also mit dem Element unter dem Service-Item erstelle ich ein Div , das das Symbol enthält. Jetzt gebe ich den Klassennamen für diesen Diblock S Icon Grad. Das hält das Symbol also effektiv. Jetzt haben wir den Platz geschaffen, um das Symbol zu halten. Jetzt suche ich nach einem Bild. Jetzt habe ich ein Bild für das Icon ausgewählt. Lassen Sie die Breite und Höhe für dieses Eigen ein Pixel betragen. Für die korrekte Ausrichtung des Symbols wähle ich den Fluss im Display aus und richte ihn in der Mitte und richte ihn an der Mitte aus. Wie beim Design müssen wir die Hintergrundfarbe für das Symbol angeben. Also wähle ich das Bild und den Farbverlauf im Hintergrund aus. Und ich wähle das Cover als Größe aus und positioniere es in der Mitte. Jetzt wähle ich das Bild aus dem Asset aus. Wir müssen ihm eine abgerundete Ecke für dieses Symbol geben, ich gehe unter die Grenzen. Jetzt. Ich gebe den Radius mit 30 Pixeln an. Wir haben den Icon-Teil abgeschlossen. Als Nächstes müssen wir einen Titel dafür hinzufügen. Also wähle ich den Serviceartikel darunter aus. Ich suche nach einer Überschrift. Jetzt gebe ich den Titel dafür. Gehen wir für diese Überschrift zum Typ Roffey über. Lass das Telefon Poppins für das Gewicht tragen. Ich wähle 500 Medium. Geben wir die Größe als 30 Pixel und die Höhe als 1,3 Bindestrich an. Für die Schriftfarbe wähle ich die Sekundärfarbe aus dem Farbfeld. Lassen Sie uns die Überschrift wie angegeben umbenennen. Da der Titel nicht richtig ausgerichtet ist. Also muss ich es in unserer Mitte ausrichten , dass ich den Serviceartikel unter der Typografie auswähle. Ich richte es auf die Mitte aus. Wir haben eine Ikone geschaffen. Als nächstes folgt eine Beschreibung unter dem Service-Item, ich suche nach einem Absatz. Jetzt wähle ich das alte Absatz-HTML-Tag für dieses Absatzelement. Gehen wir zur Typografie für dieses untere Diagramm über, eine andere Art von Grafik V, ich wähle die Schriftart als Poppins für das Gewicht von 400 normal und lasse die Größe zwischen den Pixeln. Jetzt wähle ich die Farbe für diese Schrift. Also wie im Design gebe ich die Farbe im Hexadezimalwert an. Jetzt kreiere ich als Gouache , um es immer wieder verwenden zu können. Jetzt gebe ich den Höhenwert als 1,3 Bindestrich an. Sehen wir es uns nun in einem Vorschaumodus an. Wir haben dafür keinen Button hinzugefügt, also lasst uns ihn hinzufügen. Klicken Sie auf den Serviceartikel. Also darunter suche ich nach dem Button. Jetzt gehe ich zur Typografie für diesen Button über, ich wähle die Schriftart als Poppins und die Gewichtung als Datei-Griff Medium aus. Und ich gebe die Größe als 18 Pixel und die Höhe als 1,1 Bindestrich für die Schriftfarbe für diesen Button Ich wähle die Sekundärfarbe aus diesem Keil. Gehen wir zum Hintergrund für diese Schaltfläche über. Ich wähle die Farbe als Grants-Splint. Für die abgerundeten Ecken gehe ich zu den Rändern. Ich gebe den Radiuswert S 15 Pixel. Lassen Sie den Stil für den Bordeaux eine durchgehende Linie sein. Und für die Farbe wähle ich die zweite große Farbe. Lassen Sie mich zunächst den Padding-Wert als gültiges Pixel angeben. Es scheint also nicht so gut zu sein. Also jetzt gebe ich den, einen weiteren Wert, der 15 Pixel ist. Nun für das linke und rechte Padding gebe ich den Wert S Duan De Pixel an. Ich möchte die Höhe der Schrift ändern. Also unter der Dipolgrafik, innerhalb der Höhe, ändere ich den Wert als 1,3 Bindestrich. Also ich finde es jetzt gut. Das Schlechte für Links und Rechts scheint nicht in Ordnung zu sein. Also nochmal, ich wähle den Füllwert für links und rechts aus. Ich gebe den Wert mit 30 Pixeln an. Jetzt benenne ich dieses Glas in einen transparenten Knopf um. Jetzt sollte sich das Symbol im Serviceelement in der Mitte befinden . Also wähle ich dieses Bild aus. Jetzt wähle ich unter dem Abstand die Schaltfläche für das mittlere Element aus. Wenn Sie diese Schaltfläche auswählen, werden der linke und rechte Rand auf Auto gesetzt. Um diesen ausreichenden Abstand auf dem gesamten Lehrplanelement zu erhalten , gebe ich den Füllwert für die obere und untere Hälfte auf 55 Pixel an. Für den linken und rechten Abstand gebe ich den Wert als 50 Pixel an. Jetzt haben wir also den ausreichenden Abstand für den gesamten Serviceartikel. Ich muss den Rand für den Serviceartikel wie im Design angeben. Also unter dem Rand gebe ich dem Design ein einheitliches Design für die Farbe. Ich verwende den Hexadezimalwert wie im Design. Um die abgerundete Ecke zu erhalten, gebe ich den Radius als 40 Pixel an. Für den ausreichenden Abstand zwischen Titel und Inhalt. Ich wähle den Service Content Wrap , wenn ich den Service Content Rep Ich muss den Füllwert angeben. Also gebe ich den Füllwert für den oberen Rand 60 Pixel an, um den Abstand zwischen dem Symbol und dem Titel zu erhalten den Abstand zwischen dem Symbol und dem Titel Ich ändere den Randwert für das Symbol. Also wähle ich immer diesen Icon-Wrap aus. Ich gebe den Randwert an, das ist ein Wert für den unteren Rand 30 Pixeln für den Abstand zwischen Titel und Absatz. Ich wähle ihren Diensttitel. Jetzt ändere ich den Margenwert. Das ist der Wert für den unteren Rand von 15 Pixeln. Wir haben also einen kleinen Abstand zwischen dem Titel und einem Absatz. Jetzt muss ich die den Absatz etwas anpassen Telefonhöhe für den Absatz etwas anpassen. Also wähle ich den Absatz davor aus. Lassen Sie mich das Tag für diesen Absatz als gesamten Absatz auswählen . Jetzt, unter der Höhe, ich den Phi Bindestrich als Ein-Punkt-Bindestrich ein. Nun zum Abstand zwischen dem Absatz und der Schaltfläche und zur Auswahl der Schaltfläche. Jetzt erstelle ich eine weitere Klasse, die Service Button ist. Das Styling, das wir durchgemacht haben, wird also in beiden Klassen gespeichert. Das ist ein Transplantationsknopf und das ist immer ein Knopf. Jetzt gebe ich den Wert für den oberen Rand als 20 Pixel an. Dieser Wert wird also in einer transparenten Schaltfläche und auch in einer Servicetaste gespeichert . Immer wenn ich die Service-Button-Klasse für die, eine andere Schaltfläche verwende , wird dieses Design darauf angewendet. Sehen wir es uns jetzt im Vorschaumodus an, ich veröffentliche es. Jetzt kann ich es mir ansehen. Also jetzt ist alles in Ordnung. Jetzt dupliziere ich zweimal für die anderen beiden Dienste. Beim Duplizieren wird das Objekt Sowjets also in die entsprechenden Spalten im Raster platziert. Wir benötigen die Lücke zwischen den, jeder Spalte unter dem Bearbeitungsraster. Ich gebe den Wert 30 Pixel für diese Lücke an. Jetzt konnten wir also sehen, dass zwischen den einzelnen Spalten Abstände erforderlich sind. In der nächsten Lektion werden wir das notwendige Styling vornehmen , das für die Serviceartikel des Servicebereichs erforderlich ist . Wir sehen uns in der nächsten Lektion. 11. Service – Teil 2: Jetzt machen wir das Styling , das für unseren Servicebereich erforderlich ist. Gemäß dem Design haben wir die Titel und den Untertitel fertiggestellt, aber auch die Grundstruktur des Serviceartikels aber auch fertiggestellt. Jetzt müssen wir das Styling von Asper InDesign machen. Lassen Sie uns weitermachen, um es zu entwickeln. Wir haben den ersten Serviceartikel fertiggestellt. Als nächstes müssen wir uns auf den zweiten Serviceartikel konzentrieren. Im zweiten Listenpunkt muss ich also die Hintergrundfarbe auf dem Symbol ändern. Also wähle ich dieses spezielle Symbol aus. Und ich gehe in den Hintergrund. Jetzt muss ich das Hintergrundbild auswählen. Also wähle ich das Hintergrundbild. Jetzt könnten Sie durch Ändern des Hintergrundbilds sehen, dass sich dies auch auf die anderen beiden Serviceelemente auswirkt. Lass es mich noch einmal machen. Auch hier wähle ich das Hintergrundbild. Jetzt konnten Sie auch sehen, dass es sich auf die anderen beiden Serviceartikel auswirkt. Der Hauptgrund dafür ist auch, dass wir für alle drei Serviceelemente denselben Klassennamen verwenden . Das gesamte Styling, das wir gemacht haben, ist in diesem Wickelglas mit Servicesymbolen gespeichert. Die Elemente, die alle das Servicesymbol verwenden, wickeln Glas ein, das Design wird auf diese Elemente angewendet. Das ist also der Grund dafür. Um dies zu vermeiden, müssen wir zusammen mit diesem Service-Icon Wrap Glass einen anderen Klassennamen angeben. Beide Designs werden also auf dieses spezielle Element anwendbar sein . Warum wir die beiden Klassen verwenden, ist das bestehende Styling und auch das neue Styling wird auf dieses Element anwendbar sein. Zusammen mit dem Service-Icon-Wrap erstelle ich also ein Klassenelement zwei. Jetzt gehe ich in den Hintergrund. Jetzt wähle ich das Hintergrundbild aus. Sie konnten sehen, dass sich das Hintergrundbild in diesem zweiten Serviceartikel geändert hat. Jetzt müssen wir das Symbolbild ändern. Ich verwende das Replace-Image. Jetzt habe ich das Bild ersetzt. Wir haben keine Klasse für dieses spezielle Bild erstellt, sodass sich dies nicht auf die anderen Symbole auswirkt. Jetzt gehe ich zum dritten Serviceelement mit dem vorhandenen Servicesymbol Wrap Glass Ich erstelle eine weitere Klasse mit einem Namen, Serviceelement drei. Jetzt unter dem Hintergrundbild, das ich auswähle , und ein weiteres Hintergrundbild. Lassen Sie uns nun das Symbolbild ersetzen. Das Bild wurde ersetzt. Lassen Sie uns das Ganze in einen Vorschaumodus versetzen, indem wir Veröffentlichen verwenden , damit wir sehen können, wie es angezeigt wird. Ich habe bereits geerntet wie wir es in den vorherigen Lektionen getan haben. Jetzt müssen wir die Position der Serviceteile wie im Design neu anordnen . Also wähle ich den zweiten Serviceartikel mit der vorhandenen Serviceartikelklasse aus. Ich erstelle eine weitere Klasse mit einem zweiten Element des Namensdienstes. Jetzt muss ich die Position dieses zweiten Serviceartikels ändern . Also gehe ich zu der Position über, die ich als verwandt auswähle. Wenn wir die relative Positionierung verwenden, kann dieses bestimmte Element die anderen Elemente überlappen , ohne seine Position zu beeinflussen. Im Design. Wir haben gesehen alle Serviceartikel ein bisschen miteinander sprechen. Also benutze ich den Pusher S bezogen. Standardmäßig erfolgt die Positionierung in R2. Um das Element miteinander zu überlappen, verwende ich den Wert oben als -100. Lassen Sie mich dasselbe Verfahren für den dritten Punkt durchführen. Jetzt wähle ich den dritten Serviceartikel mit der vorhandenen Serviceartikelklasse aus. Ich erstelle eine weitere Klasse mit einem Namen. Also haben wir uns auch dafür eingesetzt. Ich ändere die Position in Bezug auf den dritten Serviceartikel, der etwas oben ist als den dritten Serviceartikel, der etwas oben ist der zweite Artikel, also gebe ich den Wert oben als -200 an. Lassen Sie mich es veröffentlichen , um die Vorschau zu sehen. Es ist in Ordnung. Jetzt müssen wir den Hintergrund für diesen gesamten Serviceartikel hinzufügen . Also wähle ich den gelesenen Inhalt aus , also den Inhalt der Woche , der diese drei Elemente enthält. Jetzt gehe ich zum Hintergrund und wähle jetzt das Bild aus. Ich habe das Bild aus dem Asset ausgewählt. Jetzt wähle ich die Position in der Mitte aus. Lassen Sie mich die Größe so angeben, wie sie enthalten ist. Es wird also in diesem Diblock enthalten sein. Jetzt konnten wir sehen, der gesamte Hintergrund des jeweiligen Serviceelements transparent ist, also müssen wir eine Hintergrundfarbe für die Serviceelemente erstellen . Jetzt wähle ich den ersten Serviceartikel aus und gehe in den Hintergrund über. Jetzt wähle ich die Farbe da sich die Hintergrundfarbe auf die anderen Serviceartikel auswirkt da sie dieselbe Serviceartikelklasse verwenden. Lassen Sie uns es veröffentlichen, um es als Vorschau zu sehen. Jetzt ist es herausgekommen, während wir im Design sind. Sie jedoch mit der Maus über den Serviceartikel fahren, das keinen Sinn. Wir müssen also den Serviceartikeln einen Teil des Übergangseffekts verleihen . Lass es uns machen. Jetzt. Ich wähle den Serviceartikel aus. Jetzt werde ich diesen Staat als Howard wählen. Jetzt müssen wir im Schwebezustand diese Kacheln vergeben. Also während ich mit der Maus darüber fahre, werde ich den Schatteneffekt dahinter erzeugen. Also gehe ich zu den Effekten. Bei den Effekten wähle ich die Boxschatten. Im Box-Shadow passe ich den Winkel dafür und ich passe den Unschärfeeffekt auf sechs Pixel an. Jetzt muss ich die Opazität der Farbe anpassen. Ich gehe zur Farbe und passe die Opazität dafür an. Wir haben die Übergangseffekte beim Schweben erzielt. Vorher müssen wir jedoch auswählen welcher Übergang stattfindet. Aber um das festzustellen, müssen wir den Übergang einrichten, aber er funktioniert nicht weil wir uns immer noch im Schwebezustand befinden. Jetzt müssen wir den Status auf keinen ändern. Jetzt gehe ich zum Übergang und muss seinen Typ auswählen. Das ist der Box Shadow. Jetzt passe ich die Dauer , die für diesen Übergang erforderlich ist. Und unter Lockerung passe ich mich entsprechend an. Lass es uns veröffentlichen, um es in einer Vorschau zu sehen. Hurerei in Irland. Es funktioniert perfekt. Ich habe die Titel dieses Service Items 2.3 bereits umbenannt . Wir haben den Servicebereich also erfolgreich abgeschlossen. In der nächsten Lektion werden wir uns mit dem Galeriebereich befassen. Wir werden den Titel an der Spitze entwickeln. Und eines der Galerieelemente, das sich innerhalb des Rasters befindet. Wir sehen uns in der nächsten Lektion. 12. Gallery – Teil 1: In dieser Lektion werden wir uns dem Galeriebereich befassen , der sich im Servicebereich befindet. Im Galeriebereich werden wir die neuesten Arbeiten haben, die wir gemacht haben. Sehen wir uns die Designplanung für diesen Galeriebereich an. Zuerst werden wir einen Abschnitt haben, der den gesamten Galeriebereich enthält. Darin. Wir werden drei Boxen haben. Der erste Diblock besteht darin, den Titel für diesen Galeriebereich zu tragen. Die nächsten beiden werden die neuesten Arbeiten enthalten , die wir gemacht haben. Wir werden das Grid-Modell für diese neuesten Arbeiten verwenden. Das erste, wir werden ein großartiges Modell mit den beiden Säulen haben . Das Gleiche gilt für die zweite, innerhalb der, jeder Spalte, wir werden verwenden, dass sie blockiert haben. In jedem Div. Wir werden das Bild und den Inhalt dafür verwenden. Dies ist das Design, das wir implementieren werden. Fangen wir an, es zu entwickeln. Vorher. Hören Sie, sehen wir uns das übliche Box-Modell an, das für alle Abschnitte innerhalb des Körpers angewendet wird . Wir müssen einen Abschnitt hinzufügen und wir müssen den entsprechenden Klassennamen für diesen Abschnitt angeben. Als nächstes folgt der Abstand für diesen Abschnitt. Das heißt, wir müssen den oberen und unteren Füllwert dafür angeben. Nachdem wir darin einen Abschnitt erstellt haben, müssen wir einen Container hinzufügen und der Klassenname sollte für diesen Container angegeben werden. Jetzt können wir das Element innerhalb des Containers hinzufügen, das für den erforderlichen Abschnitt geeignet ist. Zuerst werden wir unter dem Körper einen Abschnitt erstellen. Geben wir ihm einen Klassennamen für diesen Abschnitt als Galeriebereich. nun unter dem Abstand Lassen Sie mich nun unter dem Abstand den Füllwert für die obere und untere Hälfte als 100 Pixel angeben. In diesem Abschnitt erstellen wir nun einen Container. Den Container gebe ich dem Klassennamen als vorhandenen Klassencontainer. Wir werden den Titelbeitrag für diesen Galeriebereich entwickeln . Hier. Ich werde den Titelteil aus dem Servicebereich verwenden. Also gehe ich zum Servicebereich und wähle den Abschnitt mit dem Titel Wrap aus. Und ich dupliziere es. Und ich ziehe den Abschnitt mit dem Titel Wrap in diesen Galeriebereich. Das soll sich im Container befinden, wir müssen den, einen anderen Klassennamen zusammen mit dem Abschnitt mit dem Titel Rub Glass erstellen einen anderen Klassennamen zusammen . Ich erstelle eine Klasse mit dem Namen Center. Jetzt gehe ich zu einem typografischen Bereich über. Jetzt richte ich mich zur Mitte aus. Der Inhalt wird also in den Mittelpunkt rücken. Jetzt benenne ich die Titel und Untertitel um. Hasbro in unserem Design. Wir müssen das Styling nicht in der Topographie vornehmen, da wir bereits die vorhandene Klasse verwenden, die sich in diesem OB-Abschnitt befindet. Jetzt benotiere ich unter dem Container und diblockiere. Es enthält den Galerieinhalt. Jetzt gebe ich den Klassennamen als Galerie-Inhaltsumfang an. Jetzt habe ich den Füllwert für diesen Galerie-Inhaltsumfang angepasst . Jetzt werde ich innerhalb des Galerieinhalts ein Raster erstellen. Das Netz war größer. Lassen Sie mich eine Zeile löschen. Jetzt werden wir also zwei Spalten haben. Lassen Sie uns also die Größe dieses Rasters an das Design anpassen . Wir müssen den Klassennamen für dieses Grid umbenennen. Lassen Sie mich diesen Klassennamen in Gallery First Grid umbenennen , da wir die beiden Raster verwenden werden . Also nenne ich dieses Raster als erstes Grid der Galerie. In der ersten Spalte müssen wir nun einen Div-Blog erstellen. Und ich gebe den Klassennamen als Galerieelement in der Entwicklung, wir werden den Inhalt dafür angeben. Indem ich jetzt das Galerieelement auswähle, suche ich nach einer Überschrift und erstelle sie. Jetzt gebe ich den Überschriftstyp Hedge Three an. Und jetzt benenne ich diese Überschrift in digitale Zeichnung um. Jetzt ist es an der Zeit, die Typografie zu ändern. Ich gehe zur Topographie unter dem Formular. Ich wähle als Marionetten und wähle das Gewicht als 700, fett. Stellen Sie die Größe auf 30 Pixel und die Höhe auf 1,3 Bindestrich ein. Wir müssen die Farbe für die Schrift ändern. Also wähle ich die Farbe als Sekundärfarbe aus dem Farbfeld aus. Ich gehe zur Option Mall Type. Unter dem Buchstabenabstand gebe ich den Wert 0,02 EM an. Dafür müssen wir den Klassennamen ändern. Also benenne ich diese Klasse in den Galerietitel um. Wir haben den Titel gegeben, und wir müssen ihm einen Titel geben. Also wähle ich das Galerieelement darunter aus. Ich erschaffe und übernehme die Überschrift. Lassen Sie diese Überschrift B, h4 eingeben. Jetzt benenne ich Inhalt dieser Überschrift in Branding-Illustration um. Gehen wir zur Topographie über. Stellen Sie die Schrift auf Poppins und warten Sie auf S 600, halbfett. Stellen Sie die Größe auf 20 Pixel und die Höhe auf 1,3 Bindestrich ein. Nun zur Schriftfarbe, ich wähle die Sekundärfarbe aus dem Farbfeld. Lassen Sie mich den Buchstabenabstand dafür mit 0,01 EM angeben. Wir müssen die Hintergrundfarbe für dieses Galerieelement mit einer Auswahl von Galerieobjekten angeben. Und in den Hintergrund gehen. Und ich wähle das Bild und den Farbverlauf aus. In diesem Fall wähle ich als Cover eine andere Größe. Als Nächstes positioniere ich dieses Bild in der Mitte. Jetzt wähle ich das Bild aus dem Asset aus. Jetzt müssen wir die Größe dieses Galerieelements anpassen. Also gehe ich unter den Abstand. Geben wir einen Füllwert an. Oben auf 90 Pixel. Links gebe ich den Wert als 60 Pixel an. Und auf der Leinwand können wir sehen, dass wir eine viel größere Größe benötigen. Auch hier ändere ich den unteren Füllwert, mache 90 Pixel und mache es zu einer abgerundeten Ecke. Ich gehe zu den Rändern und gebe den Radius auf 40 Pixel. Trotzdem benötigen wir eine größere Größe für den Galerieartikel. Also gebe ich den Höhenwert an. Um das zu tun, nehme ich eine andere Größe in der Mindesthöhe, ich gebe den Wert als letzte zwei Pixel an. Zurück zu diesem Galerieelement, das ist mehr Abstand oben in diesem Galerietitel. Wir müssen es durch die Auswahl eines Galerieobjekts selbst reduzieren . Ich unterrichte einen Füllwert oben auf 60 Pixel. Aber auch hier habe ich das Gefühl, dass ich den Wert ändern muss, da er etwas mehr Abstand benötigt. Also ändere ich den Wert auf 70 Pixel, um den gleichen Wert für oben und unten zu haben, ich ändere den unteren Wert auf 70 Pixel. Im Hintergrundbild können wir den Kopfteil sehen. Also gehe ich in den Hintergrund. Und mit der Auswahl des ausgewählten Bildes wähle ich die Position oben in der Mitte aus. Jetzt werde ich mir eine Vorschau anzeigen lassen. Wie im Vorschaumodus. Es sieht gut aus. In der nächsten Lektion werden wir an den nächsten beiden Galerieelementen im Galeriebereich arbeiten . Mal sehen, in der nächsten Lektion. 14. Gallery – Teil 3: Ich habe fast alles im Galeriebereich abgeschlossen , zusammen mit dem Titel und den Galerieobjekten 123, nur der letzte Teil ist übrig. Lassen Sie uns die Entwicklung auch dafür abschließen. Jetzt gehe ich zum ersten Raster der Galerie. Ich wähle das erste Galerieelement und dupliziere es. Jetzt ziehe ich das Galerieelement in das zweite Raster und mache die zweite Spalte. Jetzt haben wir das Galerieelement, zweites Raster. Wir müssen zusammen mit der vorhandenen Klasse eine neue Klasse für dieses Galerieelement erstellen . Jetzt gebe ich den Klassennamen als Galerie für das Hintergrundbild für das vierte Galerieelement an, das geändert werden sollte. Also gehe ich zum Hintergrund und wähle das Bild aus dem Asset wie im Design aus. Jetzt müssen wir uns auf den Inhalt dieses Galerieeintrags konzentrieren . Also erstelle ich einen Diblock unter dem Galerieelement. Ich gebe den Klassennamen als Galerietitel an. Jetzt ziehe ich den Galerietitel und den Titel der Galeriekategorie an die Ausrichtung des Galerietitels. Jetzt mit ausgewähltem Galerietitel oder Zeile. Ich gehe zum Layout und wähle Flux im Display und richte die Ausrichtung zur Mitte aus. Rechtfertigen. Ich wähle den Abstand , zwischen dem die Elemente von Kante zu Kante verteilt werden. Wie wir sehen konnten, ist der Titel der Kategorie nicht korrekt ausgerichtet. Also wähle ich den Titel der Galeriekategorie. Wir müssen den Abstand oben im Titel der Kategorie angeben. Also zusammen mit der Galerie-Kategorie mit dem Titel Klasse und Erstellen einer weiteren Klasse mit einem Namenspunktfeld. Und ich passe den obersten Füllwert dafür an. Und lassen Sie uns mit den 15 Pixeln abschließen der richtige Abstand für das Galerieelement vier nicht ausreicht. Und ich gebe 60 Pixeln den richtigen Füllwert und benenne auch den Inhalt im Design um . Auch hier ist die Ausrichtung nicht korrekt für das Branding, also wähle ich es aus. Und ich passe den oberen Füllwert erneut auf 20 Pixel an. Um den gleichmäßigen Abstand zu erhalten, wähle ich den Galerietitel aus , richte ihn aus und gebe dem unteren Abstand zehn Pixel an. Lass es uns veröffentlichen, um es als Premium zu sehen. Oder hier könnten wir feststellen, dass wir die Hintergrundfarbe für diesen Galeriebereich nicht angegeben haben . Also wähle ich den Galeriebereich und gehe zum Hintergrund. Jetzt gebe ich den Hexadezimalwert wie im Design an. Jetzt veröffentliche ich es. Wir konnten feststellen, dass der Abstand oben keine Vision ist. Also gehe ich zurück, um den Abstand zwischen dem Servicebereich und dem Galeriebereich zu ermitteln. Ich wähle den Servicebereich aus und gebe den unteren Füllwert auf 140 Pixel. Jetzt haben wir den Galeriebereich abgeschlossen , wie im Design. In der nächsten Lektion werden wir uns dem Workshop-Abschnitt befassen. Es besteht aus zwei Spalten. Wir werden den Inhalt der ersten Spalte in der nächsten Lektion entwickeln . Wir sehen uns in der nächsten Lektion. 15. Workshop – Teil 1: In dieser Lektion werden wir uns dem Workshop-Abschnitt befassen. Schauen wir uns nun die Planung an. Zuerst erstellen wir einen Abschnitt und dann wird das Raster mit den beiden Spalten erstellt. Jede Spalte enthält die Div-Blöcke. Die Inhalte für diesen Workshop-Abschnitt befinden sich im D-Block der ersten Spalte. In der zweiten Spalte platzieren wir das Bild, das jetzt zur ersten Spalte zurückkehrt Es besteht aus dem Untertitel und einem Titel, und darunter befindet sich ein Absatz. Wir erstellen den Do-Block unter dem Absatz, der den QR-Code und das Symbolbild sowie den QR-Code-Inhalt enthält . Und schließlich werden wir eine Belastung haben, wenn wir unseren Workshop-Zeitplan buchen müssen. Nun wieder die klare Vorstellung vom Design. Also lasst uns anfangen, es zu entwickeln. Bevor Sie mit dem Unterricht beginnen. Schauen wir uns das gemeinsame Box-Modell an, das für alle Abschnitte innerhalb des Körpers angewendet wird . Wir müssen einen Abschnitt hinzufügen und wir müssen den entsprechenden Klassennamen für diesen Abschnitt angeben. Als nächstes folgt der Abstand für diesen Abschnitt. Das heißt, wir müssen den oberen und unteren Füllwert dafür angeben. Nachdem wir darin einen Abschnitt erstellt haben, müssen wir einen Container hinzufügen. Der Klassenname sollte für diesen Container angegeben werden. Jetzt können wir das Element innerhalb des Containers hinzufügen, das für den erforderlichen Abschnitt geeignet ist. Jetzt müssen wir im Körper und beim Erstellen eines Abschnitts den Klassennamen für diesen Abschnitt angeben. Also gebe ich den Klassennamen als Workshop-Abschnitt an. Lassen Sie uns den Füllwert für diesen Abschnitt auf 100 Pixel oben und 100 Pixel unten anpassen . Hier werden wir den Abschnitt mit dem Titel Vertreter aus dem Servicebereich für unseren Workshop-Bereich verwenden . Weil ein Boot mit dem Titel grob das gleiche Design hat. Bevor wir das tun, erstellen wir einen Container unter dem Workshop-Bereich. Wählen wir dazu den vorhandenen Klassencontainer aus. Ich wähle den Abschnitt mit dem Titel Wrap aus dem Bereich Chirurgie aus. Und jetzt dupliziere ich es. Ziehen wir den Abschnitt mit der doppelten ID mit dem Titel Wrap in den Workshop-Abschnitt, der sich unter dem Container befindet. Jetzt müssen wir den Titelinhalt wie in unserem Design umbenennen . Jetzt erstelle ich den Absatz unter dem duplizierten Abschnitt mit dem Titel Wrapper. Wir haben die grundlegenden Dinge für den Titel und einen Absatz getan . Und wir wissen bereits, dass das Design ein Gittermodell hat. Also erstelle ich ein Raster unter dem Container. Jetzt. Ich lösche eine Zeile. Jetzt passe ich die Größe der ersten Spalte auf 0,9 an. Wir wissen bereits, dass wir das Grid umbenennen müssen. Also benenne ich das Grid in Workshop-Grid um. Innerhalb des Rasters haben wir zwei Spalten. In jeder Spalte müssen wir ein Div-Log erstellen. Also erstelle ich einen Diblock unter dem Workshop-Raster. Jetzt gebe ich den Klassennamen für diesen Diblock als Workshop-Inhaltsumfang an. In diesem Bereich finden Sie den gesamten Inhalt dieses Workshop-Abschnitts. Wir wissen, dass der Inhalt in der ersten Spalte des Rasters stehen sollte. Also ziehe ich diesen Abschnitt mit dem Titel Grab in den Workshop-Inhaltsbereich. Jetzt erstelle ich einen Diblock unter dem Workshop-Inhaltsverzeichnis , das sich in der ersten Spalte befindet , um den QR-Code-Inhalt zu speichern. Jetzt gebe ich den Klassennamen dafür als Klarkleiderständer. Wir haben den QR-Code-Wrap benotet. Also müssen wir das QR-Code-Bild hinzufügen. Unter QR-Code-Wrap erstelle ich ein Bild, in das ich bereits einen QR-Code eingefügt habe. Sie können das weiter unten sehen, wir haben den QR-Code in den QR-Code eines Repräsentanten eingefügt. Und außerdem müssen wir ein anderes Bild hinzufügen. Also erstelle ich einen Diblock und gebe dem Klassennamen als Zitat Author Rap. Da es sich um einen Wrap handelt, müssen wir ein Bild hinzufügen. Also suche ich nach einem Bild und ich habe es erstellt. Wählen wir also das Bild aus dem Asset aus. Das Bild wurde hier platziert, wir müssen das Bild als abgerundetes Bild erstellen. Also gehe ich unter die Grenzen. Jetzt muss ich einen Pixelwert für den Radius als hundert angeben. Jetzt können Sie auf der Leinwand sehen , dass sie abgerundet wurde. Abstand auf dem gesamten Bild ist vollständig belegt da wir den Abstand auf dem gesamten Bild angeben müssen. Anstatt das Bild auszuwählen, wähle ich den Code oder den Vertreter aus, um die Breite und Höhe unter der Größe anzugeben. Jetzt gebe ich den Wert für die Breite als 60 Pixel und die Höhe als 60 Pixel an. Wie wir sehen konnten, ist es nicht vollständig ausgerichtet. Also gehe ich zur Ebene und wähle die Flexbox aus und lasse sie zur Mitte ausrichten und zur Mitte ausrichten. Jetzt wurde es richtig ausgerichtet. Wir müssen das Design wie in unserem Design über dem Bild vornehmen. Also unter den Rändern wähle ich den Stil als gestrichelt. Ich gebe die Farbe als Endeavor Figma Design an. Ich gebe den Wert in Hexadezimal an. Und ich passe den Breitenwert auf zwei Pixel an. Um abgerundet zu werden, ein gestrichelter Kreis. Ich gebe den Radius als 100% an. Wir haben den QR-Code und ein Autorenbild fertiggestellt. Als Nächstes müssen wir den Inhalt des Scancodes hinzufügen. Also füge ich innerhalb des QR-Code-Wraps einen Absatz hinzu. Jetzt. Ich habe den Inhalt wie im Design angegeben. Als nächstes ändere ich für die Typografie den Schrifttyp in Poppins und das Gewicht 500, mittlere Größe wie 16 Pixel. Jetzt müssen wir den Klassennamen umbenennen. Also gebe ich den Namen als Scan-Goat-Inhalt an. Jetzt habe ich die Schriftfarbe in die Sekundärfarbe geändert, um die Farbe des Namens zu ändern und den Namen auszuwählen. Und sie haben die Option als Rap mit Span geändert. Also gebe ich jetzt unter der Schriftfarbe den Hexadezimalwert an, wie in unserem Design. Jetzt benenne ich den Klassennamen für schlechte Texte um ***, Scan oder den Namen. In der Topographie unter der Option Mehr gebe ich uns nun Großbuchstaben. Nun zur Ausrichtung dieses gesamten Inhalts , also des QR-Code-Inhalts und der Auswahl des QR-Code-Wraps. Unter dem Layout wähle ich eine Biegung im Display aus und richte sie in der Mitte aus. Und jetzt schreie ich nach Platz dazwischen in der Rechtfertigung, aber es ist nicht wie erwartet. Also wähle ich Start, damit die Artikel linksbündig angeordnet sind. Der Abstand zwischen QR-Code und Bild reicht nicht aus. Ich wähle Code oder Rap. Jetzt passe ich unter dem Abstand den Randwert der linken Seite auf 15 Pixel an. Für den Abstand im Codeinhalt wähle ich den Inhalt des Scancodes aus. Unter dem Abstand passe ich Wert für den linken Rand auf 15 Pixel an. Auch hier haben wir die Hintergrundfarbe für dieses QR-Code-Diagramm. Also wähle ich deinen Code aus, nimm den Hintergrund. Lassen Sie uns die Farbe wählen, wie in unserem Figma-Design, um den Abstand innerhalb eines QR-Code-Wraps Ich gebe den Füllwert oder weniger als 15 Pixel an. Dafür brauchen wir eine abgerundete Ecke. Also unter den Rändern gebe ich den Wert 20 Pixel für den Radius an. Das Autorenbild und der Codeinhalt sind nicht richtig aufeinander abgestimmt. Also wähle ich diesen Inhalt der Dose aus und gebe den Mörtelmodellierungswert auf Null, um richtig ausgerichtet zu werden. Wir konnten feststellen, dass es in die Mitte kommt. Laut Entwurf ist dieser Bereich nicht vollständig belegt. Um das festzustellen, wähle ich den Inhalt des Workshops darin erstelle einen Div-Block. Jetzt platziere ich den QR-Code , der in diesen Diblock eingewickelt ist. Wir müssen den Klassennamen für diesen Diblock angeben. Also wähle ich den Diblock aus und gebe ihm einen Klassennamen als QR-Code-Bereich. Jetzt wähle ich unter dem Layout den Inline-Block aus dem Display aus. Die Breite und Höhe werden durch den Inhalt im Inneren bestimmt. Jetzt konnten wir also sehen, dass wir die Struktur wie in unserem Design erhalten, um den Abstand oder die rechte Seite des QR-Code-Wraps zu erhalten. Ich gebe den Füllwert unter dem Abstand als 40 Pixel an. Lass uns das in der Vorschau überprüfen. Im vorherigen Film konnten wir sehen, dass alles perfekt ist. Nur der Knopf erinnert daran. Lass es uns entwickeln. Wir werden die Schaltfläche in der ersten Spalte hinzufügen. Also wähle ich den darin verpackten Workshop-Inhalt aus. Ich benote einen Todesstoß und gebe den Klassennamen dafür als Q Button Wrap, um die Taste gedrückt zu halten. Das in dem Drop, ich erstelle einen Button. Jetzt müssen wir den Klassennamen für diesen Button angeben. Also wähle ich im Selektor den Klassennamen als Schaltfläche, da er bereits existiert. Wenn Sie also auf die Schaltfläche für den vorhandenen Klassennamen klicken, wird das zuvor vorgenommene Styling auf diese Schaltfläche angewendet. Sie könnten die Änderungen, die in dieser Leinwand vorgenommen wurden, feststellen . Jetzt benenne ich diesen Buttonnamen um, um meine Zeit zu buchen. Moment haben wir also die grundlegenden Dinge erledigt , die für den Workshop-Inhaltsrep benötigt werden. In der nächsten Lektion werden wir uns also mit der Erweiterung dieses in der Entwicklung befindlichen Inhaltspakets befassen, die in der zweiten Spalte, zwei, vorgenommen werden sollte . 16. Workshop – Teil 2: Wir haben die notwendigen Dinge, die in diesem Workshop-Inhalt benötigt werden, fast abgeschlossen die notwendigen Dinge, die . Das ist der Untertitel, die Beschreibung, der Cure Good-Inhalt und der Button. Der eine Tag erinnert an die Verbesserungen , die im Styling vorgenommen werden müssen. Und wir müssen uns auch auf die zweite Spalte dieses Rasters konzentrieren . Fangen wir an, es zu entwickeln. Wir müssen den gleichen Abstand für den Titel, den Untertitel und die Beschreibung angeben. Also wähle ich diesen Abschnittstitel und gebe den Randwert auf zehn Pixel. Da wir dieses Titeldiagramm aus diesem OB-Abschnitt kopiert haben. Die Änderungen, die hier vorgenommen wurden, werden in diesem zweiten Serviceabschnitt betroffen sein . Jetzt haben wir den Tidalteil abgeschlossen. Als Nächstes wähle ich diesen Absatz aus und gebe dem Klassennamen S Abschnitt mit dem Titel Inhalt. Jetzt benötigen wir einen Abstand oben in diesem Inhaltsbereich. Also wähle ich das aus und gebe den Füllwert oder den oberen Wert als zehn Pixel an. Und jetzt für den Abstand innerhalb des QR-Code-Bereichs gehe ich zum Abstand und gebe dann den oberen Füllwert als 25 und den unteren Füllwert als 40 Pixel an. Jetzt erhalten wir den benötigten Abstand oder weniger. Lass es uns veröffentlichen, um es im Vorschaumodus zu sehen. Im Vorschaumodus konnten wir sehen, dass jeder Abstand wie im Design korrekt ausgerichtet ist. Lassen Sie uns nun in der zweiten Spalte weitermachen. Im Workshop-Raster erstelle ich einen Entwickler. Und jetzt gebe ich den Klassennamen für diesen Diblock als Workshop-Image-Rap, da wir den Abstand für dieses Bild erstellt haben. Also müssen wir ein Bild erstellen und das Bildelement ist größer. Jetzt klicke ich auf Bild auswählen und wähle das Bild aus dem Asset aus. Wir müssen die Hintergrundfarbe für dieses Bild angeben. Also wähle ich das Workshop-Bild aus, einen Rap und gehe zum Hintergrund. Und ich wähle das Bild und den Farbverlauf darin aus. Ich wähle das Cover für die Größe aus und positioniere es in der Mitte. Wählen wir nun das Bild aus dem Asset aus. Im Design haben wir die abgerundeten Ecken. Also gehe ich zu den Rändern und gebe den Radiuswert als 20 Pixel an. Wir müssen es ausrichten. Also klicke ich unter der Typografie auf Center Align. Man konnte also sehen, dass es mittig ausgerichtet ist. Jetzt wähle ich das Workshop-Raster aus, wie wir im Design gesehen haben. Die zweite Spalte ist größer als die erste Spalte, und auch zwischen diesen beiden Spalten besteht kein ausreichender Abstand . Also wähle ich dieses Raster und gehe zum Bearbeitungsraster. also die erste Spalte auswähle, gebe ich die Größe als 0,7 an. Und lassen Sie mich auch den Abstandswert zwischen diesen beiden Spalten als 60 Pixel angeben. Der Workshop-Inhalt , also der Inhalt in der ersten Spalte, steht ganz oben. Also brauchen wir Omega für denselben Hund. also die mittlere Ausrichtung unter der Ebene auswählen, können Sie sehen, dass der Inhalt in der Mitte steht. Lass es uns veröffentlichen, um zu sehen, wie es funktioniert. Wir konnten also sehen, dass alles perfekt entwickelt ist. In der nächsten Lektion werden wir diesen Abschnitt entwickeln, von dem wir sagen würden, dass er über den Autor handelt. 17. Über mich Abschnitt – Teil 1: In dieser Lektion sehen wir uns einen Abschnitt über mich an. In diesem Abschnitt über den Autor können Sie den Autor anderer und die sozialen Links von ihnen da draußen sowie einige Details über den anderen sehen anderer und die sozialen Links von ihnen da draußen . Und Sie können auch die Werke des Autors sehen. ist also der Zweck, zu dem wir diesen Abschnitt über mich machen werden. Kommen wir also zur Planung des Box-Modells Wir werden dafür einen Abschnitt erstellen. Und darin wird es ein Diblock sein. Und wenn wir das Raster verwenden, haben wir drei Spalten. der ersten Spalte sind das Oktett und die Links zu den sozialen Medien vorhanden. In der zweiten Spalte werden wir eine kurze Beschreibung des Autors haben und es wird auch einen Link geben, um die Werke des Autors zu sehen. Und in der dritten Spalte werden wir ein Video haben. Das ist also die Planung, die wir umsetzen werden. Fangen wir an, es zu entwickeln. Bevor Sie mit dem Unterricht beginnen. Schauen wir uns das gemeinsame Box-Modell an, das für alle Abschnitte innerhalb des Körpers angewendet wird . Wir müssen einen Abschnitt hinzufügen und den entsprechenden Klassennamen für diesen Abschnitt angeben. Als nächstes folgt der Abstand für diesen Abschnitt. Das heißt, wir müssen den oberen und unteren Füllwert dafür angeben. Nachdem wir darin einen Abschnitt erstellt haben, müssen wir einen Container hinzufügen. Der Klassenname sollte für diesen Container angegeben werden. Jetzt können wir das Element innerhalb des Containers hinzufügen , das für den benötigten Abschnitt geeignet ist , wobei ein Körper ausgewählt wird. Jetzt werde ich einen Abschnitt erstellen , nachdem ich diesen Abschnitt benotet Der Klassenname dafür lautet C, mein Arbeitsbereich. Der Füllwert für diesen Abschnitt beträgt oben hundert Pixel und unten 100 Pixel. Wir haben eine Sektion erstellt. Dann werden wir unter acht einen Container erstellen. Jetzt wird der Klassenname für diesen Container der vorhandene Klassencontainer sein. Unter dem Container werde ich einen Diblock erstellen, sodass der Diblock den gesamten Inhalt enthält, den wir entwickeln werden. Geben wir ihm einen Klassennamen für diesen Diblock, siehe meinen Workwrap. Wir haben den Raum für diesen Inhalt geschaffen. Jetzt erstellen wir ein Raster. Im Design haben wir bereits gesehen, dass es sich um drei Spalten handelt. Also lösche ich eine Zeile und füge eine neue Spalte hinzu. Wir müssen den Klassennamen für dieses Grid umbenennen. Ich benenne den Klassennamen in mein Arbeitsraster um. Lassen Sie uns jetzt den Inhalt der schlechtesten Kolumne dafür unter dem My World-Raster erstellen. Ich erstelle der schlechtesten Kolumne dafür unter dem My World-Raster den Blog. Lassen Sie das Klassendatum für diesen Diblock der Autoren-Intro-Vertreter sein. Der Einführungsinhalt der ATO wird also in den Autoren-Intro-Vertreter verpackt. Wir haben den Platz für die gesamte laufende Bestellung geschaffen . Wie wir sehen können, gibt es einen Platz für das Bild des Autors. Also müssen wir eine separate Entwicklung erstellen , die dieses Bild festhält. Also unter dem Autoren-Intro eintönig und ein Div erstellen. Und ich gebe der Klasse den Namen als Autor eines anderen Wraps darin, das Bild wird platziert. Wir müssen das Bild platzieren. Also wähle ich den Autor von anderen darin verpackten Bildern aus, ich suche nach einem Bild. Jetzt wähle ich mit Hilfe von „Bild auswählen “ ein Bild aus dem Asset aus, sodass das Bild erfolgreich platziert wurde. Jetzt müssen wir die richtige Größe für den äußeren Wrapper des Autors angeben , der das Bild enthält. Also wähle ich den Autor von Other Wrap und gebe die Breite als 253 Pixel und die Höhe als 253 Pixel an. Es wird also in Esquire-Größe sein. Wir müssen die Hintergrundfarbe wie in unserem Design angeben. Also gehe ich zum Hintergrund, ich gebe den Hexadezimalwert als Zahl an. Figma Design Der Hintergrund des Bildes, das der Autor ist, der Rap sollte in einem Kreis sein. Also unter der Grenze gebe ich den Wert als 100 Prozent im Radius an. Damit der Kreis geschaffen wurde. Um die Ausrichtung für das Bild korrekt vorzunehmen. Ich wähle Flex auf dem Display aus. Ich richte es auf die Mitte und ich begründe es mit der Mitte. Im Canvas konnten wir jedoch feststellen, dass sich das Bild überlappt. Das ist so gut. Also müssen wir das anpassen. Aber um das festzustellen, gehe ich zur Größe unter dem Überlauf über. Ich wähle Hayden. Jetzt können Sie auf der Leinwand sehen, dass die Überlappung ausgeblendet ist, dass das Bild leicht ein Vogel ist. Um es unter diese Ebene zu bringen, wähle ich die aus und richte sie nach unten aus. Wir haben das andere Bild fertiggestellt. Und als nächstes darunter befindet sich eine Social Media League. Um das zu erstellen, wähle ich den Autor-Intro-Wrap darunter aus, ich erstelle einen Div-Block. Dadurch wird der Raum geschaffen , um alle Social-Media-Links zu speichern. Geben wir der Klasse einen Namen als Autor, Sozialvertreter. Wir müssen die Links erstellen. Mit Hilfe von QuickFind suche ich also nach dem Link. Nachdem der Linkblock erstellt wurde, müssen wir hinzufügen, welche Art von Social-Media-Bild in den Linkblock aufgenommen werden soll. Also mit Hilfe von Quick Fine. Ich suche nach einem Bild. Jetzt verwende ich unter dem Asset das Facebook-Logo. Wir müssen die Abstände überall auf diesem Facebook-Logo erstellen . Unter dem Abstand gebe ich den Füllwert auf zehn Pixel oder weniger. Ich habe das Gefühl , dass der Abstand links und rechts nicht genug ist. Also gebe ich den Wert als 15 Pixel an. Lassen Sie uns nun den Klassennamen für diesen Link in Author Social Link umbenennen . Das gleiche Design gilt für die anderen beiden Social-Media-Links. Also dupliziere ich diesen sozialen Link des Autors zweimal. Jetzt ersetze ich das Bild durch ***** und das dritte Bild durch Instagram. Damit der Inhalt der ersten Spalte in der Mitte steht. Ich begründe diesen Inhalt so, dass er zentriert ist. Auch wenn wir das Ganze so gestalten dass der Inhalt in der Mitte ausgerichtet ist. Die Social-Media-Links sind jedoch nicht zentriert ausgerichtet. Also wähle ich Auto Social Rap, das alle Social-Media-Links enthält. Jetzt wähle ich unter der Topographie, unter der Elaine , S Center. Jetzt konnten Sie im Canvas sehen , dass alle Social-Media-Links mittig ausgerichtet sind. Der Abstand zwischen dem Autorenbild und dem Link zu den sozialen Medien reicht nicht aus. also den Autor Social Breath auswähle, gebe ich den Füllwert an, das ist der höchste Füllwert von 20 Pixeln. Wir haben den Inhalt der ersten Spalte abgeschlossen. Lass uns in die zweite Spalte springen. Um das im My World-Raster zu tun, erstelle ich einen neuen Blob. Geben wir ihm einen Klassennamen für diesen Diblock als Autoren-Biowrap. Das Gleiche gilt für den Inhalt in der Autorenbiografie. Der Mitarbeiter ist derselbe wie im vorherigen Abschnitt. Ich gehe zum Workshop-Bereich und wähle den Abschnitt mit dem Titel Rep. aus. Jetzt dupliziere ich den Abschnitt mit dem Titel Wrap und ziehe ihn in den Wrap der Autorenbiografie. Derselbe Inhalt wird hier dupliziert. Jetzt müssen wir den Inhalt entsprechend unserem Design angeben. Abgesehen von diesen Verdichtungen müssen wir einen Link mit einer Auswahl von Abschnitten mit dem Titel rep hinzufügen . Ich erstelle einen Link. Ich benenne diesen Link in Semi-Work um. Wenn wir also auf diesen Link klicken, können wir die Werke des Autors sehen. Wir haben diesen Link als neu erstellt, daher müssen wir die Typografie dafür ändern. Lassen Sie uns diesen Link nun in Arbeitslink umbenennen. Jetzt müssen wir einen Diblock erstellen , der diesen Link enthält. In der Verpackung der Autorenbiografie. Ich erstelle einen neuen Block. Lassen Sie uns den Link Diblock, The Work, ziehen. Platzieren Sie nun diesen Arbeitslink in diesem Block. Jetzt müssen wir ihm einen Klassennamen für diesen Div-Hund geben. Geben wir den Namen als Walk Linked Wrap. Also Wanli, als wir einige Elemente innerhalb des Diblocks platziert haben, konnten wir den Abstand erstellen. Das heißt, der unnötige Abstand, den wir brauchten. Um nun den Abstand zwischen dem Absatz und dem Link mit Wool Cling Wrap zu einem Selektor zu machen Absatz und dem Link , gebe ich den Füllwert für den Absatz bis oben auf 20 Pixel. Wir haben also den Inhalt der beiden Spalten abgeschlossen. Sehen wir es uns in einem Vorschaumodus an. Also klicke ich auf Veröffentlicht. Sie den Mauszeiger über den Link bewegen, erfolgt jedoch kein Übergang. Also müssen wir den Übergang zu dieser Verbindung vornehmen. Gehen wir zurück. Jetzt wählen wir die Spielwelt aus. Bitte beachten Sie, dass wir nicht die World Cling Wrap auswählen, sondern nur auf den Link klicken. Im Nichtstaat ist jetzt standardmäßig der Staat drin. Jetzt gehe ich zum Übergang unter dem Typ über, den ich auswähle, s, Formularfarbe. Lassen Sie uns den Staat in WHO ändern. Wie wir ausgewählt haben, handelt es sich bei dem Übergang um eine Schriftfarbe. Also eine andere Typbiografie, ich gebe die Schriftfarbe Primärfarbe aus dem Farbfeld. Lassen Sie uns nun schauen, ob es funktioniert. In der Vorschau konnten wir jetzt sehen, dass der Link einwandfrei funktioniert. Wir haben den Inhalt der beiden Spalten vervollständigt. In der nächsten Lektion werden wir uns mit dem Inhalt der dritten Spalte befassen. Lass uns weitermachen. 18. Über mich Abschnitt – Teil 2: Bisher haben wir den Inhalt der ersten Spalte und der zweiten Spalte des Rasters fertiggestellt . In dieser Lektion werden wir uns nun mit der dritten Spalte befassen , also dem Videoinhalt. Und wir werden auch sehen, wie man die dritte Spalte gestaltet. Außerdem haben wir dem gesamten Abschnitt keine Hintergrundfarbe gegeben dem gesamten Abschnitt keine Hintergrundfarbe und ihn auch nicht gestylt. Das ist also alles , was wir in dieser Lektion sehen werden. Lassen Sie uns näher darauf eingehen , bevor wir uns auf die dritte Spalte konzentrieren Lassen Sie uns den Div-Block unter dem Raster Meine Arbeit erstellen. Nun zum Klassennamen für dieses Div-Protokoll, ich gebe uns einen Arbeitsvideo-Rap. Wir müssen den Link für das Video erstellen. Videorap von Under the Work. Ich erstelle einen Link-Blog. Wo leitet uns der Linkblock zum Video weiter. Fangen wir mit dem Dummy-Link an. Jetzt müssen wir innerhalb des Linkblocks ein Bild hinzufügen. Also wählen wir Image. Ich wähle ein Bild aus dem Asset aus. Wir müssen die passende Größe für dieses Bild angeben. Also wähle ich diesen Link-Blog aus. Also eine andere Größe, ich gebe die Breite als 75 Pixel und die Höhe als 75 Pixel an. Lassen Sie uns es jetzt so einstellen, dass es vom Display aus flexibel ist. Richten Sie dieses Bild in der Mitte aus und richten Sie es am Zentimeterpunkt aus. Im Design haben wir ein Hintergrundbild für diesen Linkblock gesehen . Also gehe ich in den Hintergrund und wähle einen Schreibtisch der in einem Kreis sein sollte. Unter dem breiteren gebe ich den Radiuswert also jeweils 100% an. Ich habe den Klassennamen für diesen Linkblock nicht umbenannt. Also benenne ich diesen Linkblock in Video-Link-Block um. Jetzt müssen wir ihm ein Hintergrundbild geben. Also wähle ich das Arbeitsvideo aus, Rap. Mit diesem Selektor gehe ich zum Hintergrund, zu einem anderen Bild und einem Farbverlauf. Ich wähle die Größe S für das Cover aus, indem ich auf Bild auswählen Ich wähle ein Bild aus dem Asset aus. Und lassen Sie uns dieses Bild in der Mitte positionieren. Wir müssen einen Dialog erstellen, um diesen Videolink-Block darin einzufügen . Jetzt müssen wir den Klassennamen für diese Entwicklung angeben. Also gebe ich dem Klassennamen S Video. Ich verpacke, dass dieser entwickelte Zweck nur dazu dient, diesen Videolink auszurichten. Jetzt, wo die Auswahl des Videos ausgerichtet ist, schnappen Sie es sich. Eine weitere Schicht. Ich wähle den Flex aus dem Display aus und richte ihn in der Mitte und richte ihn in der Mitte aus. Damit das verlinkte Video in die Mitte kommt, gebe ich den Füllwert für dieses videoausgerichtete Bild an. Geben wir den Füllwert oben 120 Pixel und unten 120 Pixel an. Jetzt müssen wir das Bild zu einer abgerundeten Ecke machen. Also wähle ich den Videowrap unter dem Rand aus. Ich gebe den Wert 40 Pixel für den Radius. Wir haben die Hintergrundfarbe nicht für diesen gesamten Inhalt verwendet . Also entscheide ich mich für dieses EMA-Workgrab. ich das auswähle, gehe ich zum Hintergrund unter der Farbe, ich gebe den Hexadezimalwert an. Jetzt gebe ich den Füllwert oben auf 140 Pixel unten, auf 140 Pixel links und rechts, ich gebe den Wert als hundert Pixel Abstand an und links und rechts scheinen ein bisschen groß. Also ändere ich den Wert auf 80 Pixel. Auch hier hat der Hintergrund die abgerundete Ecke. Bei der Auswahl von „Zeige meinen Arbeitsumfang gehe ich zu den Rändern und gebe den Radius als 40 Pixel an. Der Inhalt in der ersten Spalte scheint also der zweiten Spalte so näher zu sein. Also wähle ich die erste Spalte aus, das ist der Autor in Grow Wrap. Und ich werde mich rechtfertigen und mich für links entscheiden. Der gesamte Inhalt der drei Spalten hat den gleichen Abstand, aber im Design gefällt das nicht. Also lass uns diesen Inhalt neu gestalten. Jetzt wähle ich das gesamte Netz aus, das ist mein Weltnetz darunter. Ich wähle „Raster bearbeiten“. Unter dem Bearbeitungsraster. Lassen Sie uns die Größe der ersten Spalte ändern. Jetzt ändere ich die Größe der zweiten Spalte. Jetzt haben wir die Anpassung wie in unserem Figma-Design vorgenommen. Lassen Sie uns das veröffentlichen, um es in einem Vorschaumodus zu sehen. Im Vorschaumodus konnten wir alle Links zu sozialen Medien sehen. Macht nichts von dem Übergang. Und auch der Videolink macht keinen Übergang. Wir müssen also den Übergang zu all dem ermöglichen. Gehen wir zurück mit einer Auswahl von Videolink-Blöcken. Auch im Nicht-Bundesstaat gehe ich zum Übergang über und wähle den Typ für die Hintergrundfarbe aus. Lassen Sie uns nun den Status so ändern wie wir den Übergang zur Hintergrundfarbe vorgenommen haben. Also unter dem Hintergrund und in der Farbe wähle ich als Sekundärfarbe aus dem Farbfeld. Sehen wir es uns im Vorschaumodus an. Um zu sehen, wie der Übergang funktioniert. Das gleiche Verfahren gilt für die Links zu sozialen Medien. Folgen Sie den gleichen Schritten für die Links zu den sozialen Medien, für den Übergangseffekt. In der nächsten Lektion werden wir uns mit zwei Fingertipps mit dem Tab Lizenzierung befassen. Und wir werden auch sehen , wie man die Tabs funktionsfähig macht. Sehen wir uns in der nächsten Lektion an. 19. Tabulatur Lizenzierung – Teil 1: In dieser Lektion werden wir den Lizenzbereich für unsere Website entwickeln . Schauen wir uns vorher die Planung an. Wie wir in den vorherigen Lektionen gesehen haben. Wir werden einen Abschnitt verwenden und darin wird sich ein Container befinden. Auch hier werden wir im Container einen Do-Block verwenden, um den gesamten Inhalt zu speichern. Und innerhalb dieses Divs werden wir das griechische Modell verwenden, das aus den beiden Spalten besteht, wobei die erste Spalte kleiner als die zweite Spalte sein wird. der ersten Spalte platzieren wir ein Bild. Und in der zweiten Spalte werden wir den Lizenzinhalt haben. Und oben haben wir den Tab mit zwei Tabs. Eine ist für die Lizenzierung von Kunstwerken und eine andere für die Kommission. Und unter den Tabs finden Sie den Lizenzinhalt mit einem Titel. Und ein Teil des Abschnitts. Und unter dem Absatz werden wir die beiden Teile haben. Das ist eine für die Alpha-Pose und h. Und die zweite ist der Inhalt über dieses Alpha. Das ist also die Planung, die wir entwickeln werden. Lassen Sie uns weitermachen, um es zu entwickeln. Bevor Sie mit dem Unterricht beginnen. Schauen wir uns das gemeinsame Box-Modell an, das für alle Abschnitte innerhalb des Körpers angewendet wird . Wir müssen einen Abschnitt hinzufügen und wir müssen den entsprechenden Klassennamen für diesen Abschnitt angeben. Als nächstes folgt der Abstand für diesen Abschnitt. Das heißt, wir müssen den oberen und unteren Füllwert dafür angeben. Nachdem wir den Abschnitt darin benotet haben, müssen wir einen Container hinzufügen und der Klassenname sollte für diesen Container angegeben werden. Jetzt können wir das Element innerhalb des Containers hinzufügen, das für den erforderlichen Abschnitt geeignet ist. nun mit der Auswahl des Körpers Lassen Sie uns nun mit der Auswahl des Körpers einen Abschnitt erstellen. Ich gebe den Klassennamen für diesen Abschnitt als Tab-Abschnitt „Lizenzierung“ an. Im Abschnitt erstellen wir jetzt Kondyle. Wie wir es in den vorherigen Lektionen getan haben, werde ich diesem erneut den vorhandenen Klassencontainer geben . Wir haben für diesen Abschnitt keinen Füllwert angegeben. Also wähle ich den Abschnitt Lizenzierung aus und gebe den Wert für den oberen Abstand und den unteren Abstand als 100 Pixel an. nun unter dem Container Lassen Sie uns nun unter dem Container einen Diblock erstellen. Geben wir den Klassennamen für diesen Diblock als Vertreter des Lizenzierungstabs an, aber der gesamte Inhalt seiner Lizenzierung wird in diesem Lizenzierungs-Tab zusammengefasst. Lassen Sie uns ein Raster unter der Lizenzierung erstellen, da wir im Design gesehen haben, wie wir bereits wissen, dass es nur die zwei Spalten und eine Zeile enthält. Also lösche ich eine Zeile. Und auch die erste Spalte ist kleiner als die zweite Spalte. Also passe ich jetzt die Größe der ersten Spalte an. Da wir den Klassennamen für dieses Grid umbenennen müssen , da dies das andere Grid nicht beeinflussen sollte, was wir in den vorherigen Lektionen getan haben. Lassen Sie uns dieses Grid S-Lizenzierungsraster umbenennen. Wir haben das Raster erstellt, aber innerhalb jeder Spalte müssen wir den Diblock hinzufügen, der den Inhalt enthält. Lassen Sie uns also ein Div erstellen und unter dem Lizenzierungsraster schauen, wo der D-Block wir platzieren werden, sagen wir in der ersten Spalte. Geben wir ihm einen Klassennamen für diesen Def-Block als Image-Wrap für die Lizenzierung. Nun in diesem Wrap, suche mit einer Schnellsuche nach einem Bild. Und lassen Sie uns das Bild aus dem Asset auswählen. Lassen Sie uns erneut ein Div erstellen , um das Bild in diese Entwicklung einzufügen. Jetzt ziehe ich den Diblock über das Bild und platziere das Bild in diesem Block. Geben wir den Namen als Lizenzbild an, da das Bild eine abgerundete Ecke hat. also das Bild auswähle, gehe ich zum Rand und gebe den Radiuswert 40 Pixel an. Jetzt benenne ich den Klassennamen für dieses Bild in ein Lizenzbild um. Aber die Klasse gibt es schon. Jetzt ändere ich den Namen für dieses Bild. Geben wir es also als lizenzierendes Randbild an. Wir haben die erste Spalte beendet, jetzt müssen wir uns auf die zweite Spalte konzentrieren. Also wähle ich das darin enthaltene Lizenzierungsraster aus. Wir müssen ein Duplikat erstellen. Geben wir der Klasse den Namen eines lizenzierten Inhaltsvertreters. haben wir im Design gesehen. Oben hat es zwei Tabs. Also fügen wir einen Tab hinzu, indem wir die Schnelltaste verwenden, ich suche nach einem Tab. Jetzt wurde eine Registerkarte mit drei Tabs erstellt, aber im Design haben wir nur die beiden Tabs. Also müssen wir den Tab hinzufügen löschen. Gehen Sie nun zum Navigator, klicken Sie einfach auf die Tabs. Wir werden zwei Dinge haben. Das ist das Tab-Menü und tippe auf Inhalt. Das Tab-Menü ist für das Menü, das wir anbieten werden. Dieser Inhalt ist für wenn Sie auf den ersten Schritt klicken, der zugehörige Inhalt wird darunter angezeigt. Wir klicken auf den zweiten Tab. Der zugehörige Inhalt wird darunter angezeigt. Wenn wir das Tab-Menü erweitern, haben wir zwei Links, die das Einrichten eines Links und das Ausprobieren tun. diesen Dabbling erweitern, werden wir wieder den Textblock haben. Das heißt, diesen Tab umzubenennen. Jetzt werde ich den verlinkten Tab stylen. Also wähle ich das Dabbling und gehe zum Typ Roffey über. Ich wähle die Schrift als Poppins, Gewicht 500, mittlere Größe mit 18 Pixeln und Höhe, Breite 1,3 Bindestrich. Lassen Sie uns die Schriftfarbe ändern. Lassen Sie uns den Klassennamen für dieses Dabbling umbenennen , S, Dabbling. Jetzt müssen wir die Hintergrundfarbe für diesen Tab ändern. Also gehe ich unter den Hintergrund, ich wähle die Farbe Weiß. Lassen Sie uns den oberen und unteren Füllwert für diesen Abstand auf 20 Pixel anpassen . Für den linken und rechten Füllwert sind es echte 40 Pixel. Lassen Sie uns die abgerundete Ecke für diesen Tab erstellen. Also nehme ich einen anderen Rand und gebe den Radiuswert S, 20 Pixel. Und lassen Sie uns den Stil für diesen Rand als durchgängig angeben und dann die Randfarbe im Hexadezimalwert angeben, wir haben die Registerkarte fertiggestellt. Also, lass uns mit dem ersten Tap fortfahren. Der Klassenname für den ersten Schritt ist die Verdoppelung, das ist die vorhandene Klasse. Also das Styling, das wir beim Dabbling mit Klassennamen gemacht haben , wird auf diesen Tab angewendet, auch im Selektor. Sie könnten sehen, dass es sich um eine neue aktuelle Klasse handelt. Der Grund für diese aktuelle Klasse ist, dass wir den Tab verwenden. Also wird einer der Tabs aktiv sein. Inzwischen ist die Taverne also aktiv. Standardmäßig ist die aktuelle Klasse also grün. Wir könnten also verstehen, dass wir in diesem aktiven Tab arbeiten. Kurz gesagt, wenn Sie diese aktuelle Klasse sehen, können Sie verstehen , dass bestimmter Tab der aktive Tab ist. Wir müssen also festlegen, wie die Daten aussehen sollen , wenn sie aktiv sind. Mit ausgewählten Dabbling- und aktuellen Kursen. Ich gehe zur Topographie und wähle die Schriftfarbe aus. Ich wähle die Schriftfarbe Weiß. Lassen Sie uns nun die Hintergrundfarbe für diesen Schritt ändern. Also gehe ich zum Hintergrund und gebe der Sekundärspule die Farbe vom Farbfeld aus , damit wir sehen können, wenn sie aktiv ist , dass die Farbe so aussieht. Wir benötigen den Abstand zwischen diesen beiden Tags. Mit der Auswahl von Tap Do gebe ich den Wert für den rechten Rand auf 20 Pixel. Der Wert, den wir angegeben haben, wird in der Dabbling-Klasse, dem Tab One, gespeichert , wobei auch diese Dabbling-Klasse verwendet wird. Der Wert wird also auch auf diesen ersten Tab angewendet. Es schafft also einen Raum. Der Margenwert wird auf diese Registerkarte angewendet. Und das ist auch der Grund, warum es einen Raum zwischen Taiwan und dem Wasserhahn schafft. Lassen Sie uns dieses Tab-Menü umbenennen. Für den Tab One gebe ich uns eine Kunstlizenz für das Tattoo. Ich gebe uns eine Provision Benotung des Tabs, dass der Tab-Inhalt automatisch unter dem Tab-Abschnitt in den Tab-Inhalt erstellt dem Tab-Abschnitt in den Tab-Inhalt wird. Wir haben diesen Tipp und für die entsprechenden Tabs. Also lass es mich dir zeigen. Jetzt klicke ich auf den Tab und den ersten Tab auf der rechten Seite, ich werde hier Dinge sagen. Sie können sehen , dass es sich um ein Optionsfeld handelt , also um einen aktiven Tab. Wenn ich auf diesen ersten Tab klicke, wird Tab eins mit dem entsprechenden Tab aktiviert, und das ist der Tab-Inhalt. Wenn ich auf den Tab als aktiven Tab klicke, werden die ersten beiden aktiviert und die entsprechende Tab-Schaltfläche wird aktiviert. So werden wir den Inhalt dieses Tabs entwickeln. In der nächsten Lektion werden wir uns Inhalt der Lizenzierung befassen, und zwar mit Schulden. Lass uns weitermachen. 20. Tabulatur Lizenzierung – Teil 2: Im Abschnitt Lizenzierung haben wir die erste Spalte und auch den Tab-Bereich sowie den Übergang abgeschlossen und auch den Tab-Bereich . Jetzt werden wir uns mit dem, dem Inhalt für diesen speziellen Tab befassen. Das heißt, wenn ich auf diesen Link zur Lizenzierung von Kunstwerken klicke , wird der Inhalt darunter angezeigt. Wenn ich auf das Provisionssymbol klicke, wird der jeweilige Inhalt darunter angezeigt. Mal sehen, wie wir das machen werden. Lass uns weitermachen. Wir werden den Inhalt dieses Tabs im Navigator entwickeln , den Sie unter dem Tab-Inhalt sehen können unter dem Tab-Inhalt sehen Wir müssen auf Pan tippen. Das ist für den Tab One. Der Inhalt des Tabs ist so nah beieinander, dass wir einen Abstand zwischen ihnen erstellen müssen. Also wähle ich den Tab-Inhalt aus. Ich gehe unter den Abstand und gebe den Wert für den oberen Rand als 20 Pixel an. Nun, die Auswahl von Tap Pan , also für Tab eins, werde ich als abgerundete Ecke vornehmen. Ich gehe zu den Grenzen. Ich setze den Radiuswert auf 40 Pixel. Du den Abstand für diesen tauben Mann, ich gehe zum Abstand über und gebe dann den oberen und unteren Wert an. Das sind für den Abstand S 90 Pixel und für links und rechts 70 Pixel. Lassen Sie uns die Randfarbe dafür ändern. Also gehe ich an einen anderen Rand und gebe die Farbe in einem Hexadezimalwert an. Lassen Sie uns nun damit beginnen, den Inhalt darin zu erstellen. Unter dem Wasserhahn Band. Für die oberste suche ich nach der Überschrift. Darin. Die Überschrift wird erstellt und wir ändern den Überschriftentyp-2 , H2 und eine Umbenennung des Überschrifteninhalts, wobei die Typografie dafür aufgeführt wird. Unter der Typografie lege ich den Schrifttyp also als Marionetten fest. Warte, S 800, extra fett und 50 Pixel groß. Und mit der Höhe von 1,3 Bindestrich. Wir müssen die Schriftfarbe ändern. Tun Sie dies unter der Farbe, ich wähle eine Sekundärfarbe aus. Jetzt wähle ich die Option „Mehr Typ“ unter der Großbuchstaben. Ich wähle die zweite Option. Lassen Sie uns nun den Klassennamen der Überschrift in diesen Inhaltstitel umbenennen . Jetzt müssen wir eine Beschreibung dazu hinzufügen. Also suche ich unter dem Wasserhahn nach einem Absatz. Der Absatz wird erstellt. Jetzt müssen wir unter dem Absatz Angebote in R hinzufügen, um einen Block zu erstellen, der sich unter dem Absatz befindet Ich wähle das obere Band aus. Also suche ich jetzt nach Diblock. Der Do-Block wird also erstellt. Lassen Sie uns also den Klassennamen für diesen Diblock ändern , wenn Alpha geht und h bar AB. Der Angebotsprozentsatz und der damit verbundene Inhalt werden also in dieser Ratte gespeichert. Stattdessen, die prozentuale RAB-Werte anbieten, müssen wir Blöcke erstellen. Das ist der Prozentsatz für den Inhalt, der damit in Zusammenhang steht. Lassen Sie uns zunächst den ersten Div-Hund erstellen. Es wird im Rahmen des Angebotes Prozent H Rap sein. Geben wir den Klassennamen für diesen Diblock als Offer-Wrap an. Darin können wir nun den Prozentwert angeben, um dies festzustellen. Lassen Sie uns unter dieser Angebotsübersicht nach einer Überschrift suchen. Jetzt ist die Überschrift größer. Lassen Sie uns den Überschriftstyp in H3 ändern. Jetzt ändere ich den Inhalt dieser Überschrift auf 80 Prozent h. Lassen Sie uns die Typografie dafür ändern. Also gehe ich unter die Topographie und die Schriftart auf Poppins und das Gewicht genauso wie unsere Hundertbolzen und die Größen 50 Pixel und den Hybrid-Bindestrich von 1.3. Lassen Sie uns nun die Schriftfarbe in die Primärfarbe ändern. Im Farbbereich müssen wir den Klassennamen für diese Überschrift ändern. Also gebe ich den Umnamen und ändere das so, dass es den h-Wert ausgibt. benötigen wir keinen der Für diesen Prozentwert benötigen wir keinen der Margenwerte. Also setze ich den Margenwert auf Null. Wir müssen diesen Prozentwert so einstellen, dass in der Box ist. Wie wir bereits wissen , liegt der persönliche Wert darin, dass sie andocken werden. Das ist die Angebotsverpackung, sodass wir die Größe festlegen können , um diese Box zu erhalten. Dafür wähle ich den Offer Wrap aus und gebe diesen Größenwert als 170 Pixel für die Breite und 150 Pixel für die Höhe an. Jetzt wähle ich den Flux im Display aus und richte ihn dann in der Mitte aus und richte ihn in der Mitte aus, sodass wir sehen können , dass der Prozentwert in der Mitte liegt. Jetzt sollte die Hintergrundfarbe geändert werden. Dafür gehe ich zum Hintergrund und lege die Farbe wie in unserem Design im Hexadezimalwert fest. Um sie als abgerundete Ecke zu machen, gehe ich an einen anderen Rand und gebe den Wert für den Radius an wie 30 Pixel. Wir haben den Angebotsmitarbeiter beendet. Jetzt müssen wir in diesem prozentualen Umfang des Angebots den Inhalt hinzufügen, der sich darauf bezieht. Lassen Sie uns einen Div-Blog erstellen , damit der Block erstellt wird. Geben wir ihm dafür einen Klassennamen als Offer Content Grabber. Wir haben die Verpackung darin gemacht. Wir müssen den Inhalt dafür mit einer Auswahl von Angebotsinhalten erstellen von Angebotsinhalten erstellen . Ich wähle eine Überschrift aus. Geben wir Hedge Three den Überschriftentyp und ändern wir den Titelinhalt , also den Inhalt der Überschrift. Nun zur Topographie dieses Titels: Ich wähle die Schriftart als Poppins und das Gewicht als 500 Medium. Geben wir die Größe als 25 Pixel und die Höhe als 1,2 Bindestrich an. Jetzt müssen wir die Schriftfarbe in eine andere Farbe ändern. Ich wähle eine Sekundärfarbe. Wir haben den Klassennamen für diese Überschrift nicht geändert. Also wähle ich die Überschrift und benenne den Klassennamen für die Überschrift in Angebotsuntertitel um. Wir haben den Untertitel hinzugefügt und unter acht müssen wir dafür eine Beschreibung hinzufügen. Deshalb wähle ich Offer Content Wrap, das alle Inhalte enthält. Darin. Wir müssen einen Absatz erstellen. Jetzt haben wir den Absatz für den Inhalt erstellt. Der Inhalt ist nicht wie in unserem Design ausgerichtet, daher müssen wir die richtige Ausrichtung vornehmen. Dafür. Ich wähle alle vier Posen und jeden Atemzug aus, wenn ich dieses Angebot auswähle, prozentualer Wrap. Unter dem Layout wähle ich Flex aus und richte es auf den Absender aus. prozentuale Anteil beider Angebote im Angebotsinhalt liegt nahe beieinander. Wir müssen den Abstand zwischen diesen beiden herstellen. Ich werde den Abstand bei der Vorbereitung des Angebotsinhalts festlegen. Für das linke Padding gebe ich den Wert S, 40 Pixel. Jetzt haben wir also dafür gesorgt , dass der Abstand für diese Phasierung des Tab-Inhaltstitels nicht gut ist. Also wähle ich den Titel des Tab-Inhalts unter dem Abstand gebe den Randwert für den oberen und unteren Rand auf Null. Da der Abstand zwischen Absatz und Angebotsprozentsatz überhaupt nicht ausreicht. Also wähle ich den Angebotsprozentsatz RAB und gebe 20 Pixeln den oberen Füllwert. Jetzt haben wir also den Abstand dafür, damit der Angebotsuntertitel ganz oben steht. Ich gebe den Wert für die oberste Marge auf Null. Jetzt setze ich den unteren Margenwert auf Null. Ich habe das Gefühl, dass Untertitel und Beschreibung so nahe beieinander liegen. Also gebe ich den Wert für den unteren Rand auf fünf Pixel. Um einen kleinen Abstand zu bekommen, machen wir sie. Lassen Sie uns es veröffentlichen, um es in einem peruanischen Modus zu sehen. Im Vorschaumodus ist also alles für den Lizenzbereich in Ordnung. Wir haben den Inhalt für den ersten Schritt erstellt, das ist die Lizenzierung von Kunstwerken. Jetzt müssen wir zum zweiten Tab übergehen . Wir haben das gleiche Design für den zweiten Tab. Tun Sie dies unter dem Tab-Inhalt, ich wähle das Tab-Band für das obere Band darin aus. Wir könnten sehen, welche Dinge wir entwickelt haben. Zuerst dupliziere ich den Titel des Tab-Inhalts. Und ich ziehe das in die Wasserhahnpfanne, das ist für Tab. Und dann lassen Sie uns den Absatz duplizieren. Und lass uns das auf den Tab ziehen, um dieses Angebot anzuhängen prozentualer Rub. Und wieder, duplizieren Sie das und ziehen Sie es in den Wasserhahn. Und für den Tab zu jedem Inhalt des Tabs wird einer auf den Tab dupliziert Jetzt werde ich Dinge unter der Tap-Einstellung sagen. Ich wähle Tab zu , also den aktiven Tab. Der Inhalt des ersten Schritts ist ein Lead, der im zweiten Schritt dupliziert wurde, aber nicht das Styling. Um das Design des einen Inhalts auf den Tap to Content anzuwenden , müssen wir denselben Klassennamen angeben. Aber im Navigator konnten wir sehen, dass es zwei verschiedene Themen hat. Also wähle ich den Tap Pan für den oberen und benenne den Klassennamen um, um auf Zurück zu tippen. Jetzt wähle ich den Tap Pan für den Tab2 aus und gebe den Klassennamen als bestehende Klasse an, das heißt Tap Pan. also die vorhandene Klasse angeben, können Sie sehen, dass das gesamte Styling den Tab auf den Inhalt angewendet wurde. Jetzt ändere ich den Titel dieses Inhalts und dann ändere ich den Prozentwert. Lassen Sie uns es nun veröffentlichen, um es in einem Vorschaumodus zu sehen. Lassen Sie uns nun sehen, ob der Tab ordnungsgemäß funktioniert oder nicht. Also klicke ich auf den E-Schritt, der Inhalt des Tabs ändert sich entsprechend. Erstens, müssen wir einen Teil des Abstands für diesen Lizenzabschnitt ändern ? Jetzt wähle ich den Titel des Tab-Inhalts und gebe dem unteren Rand zehn Pixel, um den Abstand zwischen der ersten Spalte und der zweiten Spalte zu ermitteln. Ich gehe zum Lizenzierungsraster , um das gesamte Grid auszuwählen. Jetzt passe ich unter dem ADA-Raster den Abstand auf 35 Pixel an. Nun, mit der Auswahl des Lizenzierungsrasters selbst, wollen wir es an der Mitte ausrichten. Lass es uns veröffentlichen, um zu sehen, wie es funktioniert. Im Vorschaumodus konnten wir sehen, dass alles aus dem Lizenzbereich Dan Asper in unserem Design ist. In der nächsten Lektion werden wir uns dem Testimonial-Abschnitt befassen , der aus zwei Spalten besteht. Die erste Spalte ist für die Titel und die zweite Spalte dient zur Anzeige aller Kommentare der Besucher. Sehen wir uns in der nächsten Lektion an , wie man sich einwählt. 21. Testimonials Abschnitt – Teil 1: In dieser Lektion werden wir uns mit dem Abschnitt Testimonials befassen. Sehen wir uns nun die Planung dieses Testimonial-Abschnitts an. Zuerst werden wir den Bewertungsbereich bewerten und darin wird sich ein Container befinden. Und auch hier werden wir ein Grid-Modell verwenden. Dieses Raster wird aus zwei Spalten bestehen. Die erste Spalte wird einen Titel für den Befehl haben. In der zweiten Spalte werden wir den Inhalt des Testimonials so oft haben des Testimonials so oft wie wir für alles benötigt haben. Das gilt sogar für den Untertitel und einen Titel. Wir werden einen separaten Diblock verwenden, der für den Inhalt des Bildes und für den Absatz verwendet wird. Auch hier werden wir einen separaten Diblock verwenden , damit alles sehr gut organisiert werden kann. Jetzt haben wir eine Vorstellung von der Planung. Fangen wir an, es zu entwickeln. Jetzt werde ich unter dem Körper einen Abschnitt erstellen. Und geben wir den Klassennamen für diesen Abschnitt als Testimonial-Abschnitt an. Unter dem Abstand gebe ich den Füllwert für die obere und die untere Hälfte als 100 Pixel an. Wir wissen bereits, dass wir einen Container hinzufügen werden. In einem anderen Abschnitt gebe ich den Klassennamen für diesen Container als vorhandenen Klassennamen-Container mit einer Auswahl an Containern. Lassen Sie uns ein Grid hinzufügen. Android. Wie wir bereits wissen, benötigen wir nur die beiden Spalten, also lösche ich eine Zeile und lassen Sie uns den Abstand zwischen diesen beiden Spalten auf 60 Pixel anpassen . Lass den Klassennamen für dieses tolle große Testimonial-Grid angeben. Wir haben ein Grid erstellt. Konzentrieren wir uns also auf die erste Spalte, um zu beginnen, die erste Spalte zu verdoppeln. Jetzt muss ich den Do-Block hinzufügen. Jetzt lautet der Klassenname für dieses Div Testimonial Title Wrap. haben wir im Design gesehen. Die erste Spalte wird den Titel haben, das Design des Titelinhalts. Es ist dasselbe wie im vorherigen Abschnitt. Also gehe ich zum Workshop-Bereich und wähle den Abschnitt mit dem Titel Wrap und dupliziere diesen Teil. Jetzt ziehen wir es in den Testimonial-Titel-Rap, da es der Titel für unseren Testimonial-Bereich sein wird. Da wir diesen Titel wie in unserem Design mit einer Auswahl dieses Abschnittstitels umbenennen müssen , gehe ich unter die Typografie, ich wähle mehr Textoptionen unter der Großbuchstaben. Ich wähle die zweite Option. Lassen Sie uns nun einen Zeilenumbruch machen, wie in unserem Design. Jetzt haben wir die erste Spalte dieses Rasters fertiggestellt. Gehen wir zur zweiten Spalte über. Dafür wähle ich das Testimonial-Raster darunter aus. Ich suche nach einem Do-Block. Jetzt gebe ich den Klassennamen für diesen Diblock als Testimonial-Content-Wrap an. Der Inhalt dieses Testimonial-Abschnitts wird wie ein Befehl sein. Und darunter befindet sich ein Bild, ein Name des Autors und des Reiseziels sowie die Bewertung. Lassen Sie uns nun oben ein Anführungszeichen erstellen. Und darunter wird es einen Befehl geben. Lass uns anfangen, es zu schaffen. Jetzt erstelle ich unter dem Inhalt des Testimonials einen Blog. Geben wir ihm einen Klassennamen für dieses Diblock S-Testimonial-Objekt. Jetzt fügen wir darin ein Bild hinzu. Wählen Sie das Bild aus dem Asset aus. Wir müssen den Befehl hinzufügen. Also füge ich unter dem Testimonial-Beitrag einen Absatz hinzu. Jetzt unter der Typografie. Ich mache diese Fliesen, mach es, Alec. Jetzt gebe ich die Schriftfarbe für diesen Inhalt im Hexadezimalwert als innovatives Design an. Ich verwende den Klassennamen für diesen Absatz als Testimonial-Inhalt. Jetzt passe ich die Höhe dieses Inhalts auf 1,6 Bindestrich an, um ein Außenbild und den Namen des Autors hinzuzufügen. Ich erstelle ein Div, das sich unter dem Testimonial-Artikel befindet. Ich gebe den Klassennamen für diesen Diblock als Testimonial-Client RAB. Wir haben den Umschlag gemacht, der das Bild, den Namen des Autors und die Bewertung enthält . Damit das Bild hinzugefügt werden kann, müssen wir jedoch ein Duplo erstellen, um das Bild zu platzieren. Lassen Sie uns einen Do-Block unter dem Kundenreferenten erstellen. In diesem Zeugnis und diesem Kunden werden wir also ein Bild hinzufügen. Lassen Sie uns nach einem Bild suchen, Sie zu einem Teil des technischen Falls hinzufügen möchten. Der nächste Teil ist nicht aufgenommen. Also am Ende dieses Inhalts, aber ich habe diesen ausgewählten Bildteil erneut aufgenommen, weil ich diesen Clip in der Mitte hinzugefügt habe, können Sie sehen, wie sich die Inhaltskacheln ändern. Also ignoriere es bitte. Konzentrieren Sie sich nur auf die Auswahl des Bildes. Also wähle ich jetzt das Bild von der Säure. Damit das Bild abgerundet wird. Ich gehe zu den Rändern und gebe dem Radius den Wert 200. Der Klassenname für dieses Bild als Client-Avatar. Das ist also der Teil, den wir verpasst haben. Kehren wir zur Normalität für die Fortsetzung der Entwicklung zurück . Im Testimonial Glycine müssen wir den Inhalt des Kunden hinzufügen. Wir haben das Kundenbild und die Kundendetails. Für die Kundendetails habe ich also einen Blog erstellt und den Do-Block als darin verpackte Kundendetails benannt , um den Namen des Kunden anzugeben, den ich verwende, Überschrift. Die Überschrift wurde in den Namen des Autors umbenannt , um die Typografie zu ändern. Wählen Sie die Schrift als Poppins, das Gewicht als mehrere hundert Schalen. Und die Größe wird 20 Pixel betragen und die Höhe soll 1,2 Bindestrich betragen. Ich wähle die Schriftfarbe Sekundärfarbe aus dem Farbfeld aus. Jetzt gebe ich den Klassennamen für diese Überschrift an, da Klein die Kündigung dieses Blinds angeben muss Ich füge eine Überschrift unter der Rampe mit Kundendetails hinzu. Lassen Sie die Überschrift B H Phi eingeben. Jetzt gebe ich die Bezeichnung Absage. Um das Design für diese Überschrift zu gestalten, verwende ich eine andere Typografie. Ich ändere die Schriftart auf Poppins viel zu 600 halbfett und die Größe auf 18 Pixel mit einem Bindestrich von 1,2 Höhe. Um die Schriftfarbe dafür anzugeben, gebe ich den Hexadezimalwert aus unserem Figma-Design an, das Gewicht für diese Überschrift scheint sehr fett zu sein. Also muss ich das Gewicht ändern. Lassen Sie uns das Gewicht auf mittel ändern. Jetzt benenne ich den Klassennamen für diese Überschrift in Client-Job um. Damit der Kundenname näher am Bild ist. Ich wähle den Kundennamen aus und gebe den Margenwert oben auf Null und unten auf Null. Der Name des Kunden und die Bezeichnung des Haftungsausschlusses sollen näher sein. Also wähle ich diesen Kundenjob aus, der untere Randwert wird auf Null und der obere Randwert auf fünf Pixel angepasst. In der kommenden Lektion werden wir den Rest des Designs entwickeln. Lass uns weitermachen. 22. Testimonials Abschnitt – Teil 2: Wir haben die Entwicklung der ersten Spalte abgeschlossen. Und auch in der zweiten Spalte haben wir grundlegende Inhalte gemacht, die nicht erforderlich sind. In dieser Lektion werden wir uns mit den meisten Stylings befassen, die im Inhalt der zweiten Spalte vorgenommen werden müssen . Fangen wir an, es zu entwickeln. Wir haben einen Rückgang bei jedem Kundennamen und bei der Benennung. Dann müssen wir die Bewertung des Kunden hinzufügen. Also füge ich unter der Zeile mit den Testimonials einen Do-Block hinzu. Jetzt gebe ich den Klassennamen für den Diblock als Klein-Rating Wrap. Jetzt füge ich ein Bild von der Säure hinzu. Jetzt füge ich in der Übersicht der Kundenbewertung eine Überschrift hinzu. Lassen Sie den Überschriftstyp B gleich sechs absichern. Ich ändere den Inhalt der Überschrift in den Bewertungswert. Um die Typografie für diesen Bewertungswert zu ändern, gehe ich unter die Typografie wähle als Schriftart Poppins, Gewicht mit Phi Handle Medium und die Größe mit 18 Pixeln, dann ist die Höhe 1.2 Wert der Bindestrichbewertung, um ihrem Herzbild nahe zu kommen, passe ich den Randwert an. Ich ändere den oberen Wert am unteren Wert auf Null. Lassen Sie uns den Klassennamen für diese Überschrift als Bewertungswert ändern . Damit der Bewertungswert neben dem Herzbild angezeigt wird, wähle ich die Anzeige der Kundenbewertung. Ich wähle den Sauerstoff als Flocken , um den Abstand zwischen dem Bild und dem Wert zu erhalten. Bei der Auswahl des Bewertungswerts gebe ich den Abstand zehn Pixel oder links an, damit die Details des Kunden in einer einzigen Zeile stehen. Ich wähle den Testimonial-Plan. Dann wählen wir Flex im Display. Richten wir es an der Mitte aus. Und unter der Begründung wähle ich die Option, dass der Abstand zwischen den Artikeln gleichmäßig verteilt wird , damit das Kundenbild und der Kundenname und das Ziel näher beieinander liegen andernfalls werde ich einen Diblock erstellen und dieses Kline-Bild und die Kundendetails in die Div-Blöcke einfügen, damit ich die Anpassung gemäß unserem Design vornehmen kann . Jetzt wähle ich einen Testimonial-Kunden darunter aus, ich erstelle einen Diblock. Jetzt ziehe ich den Diblock oben. Jetzt platziere ich den Client-Image-Rap und Klein-Detail-Wrap in diesem Div-Blog. Jetzt gebe ich den Klassennamen für diesen Diblock als Klein-Detail an. Mit ausgewählten Kundendetails. Ich verwende Flex für das Display unter dem Layout und richte es auf dieselbe Dosis aus. Um den Abstand zwischen dem Bild und dem Detail zu ermitteln, müssen wir den Füllwert für den Abstand links neben dem Client-Detailumbruch angeben. Mit der Auswahl von Klein Detail Wrap für den linken Füllwert gebe ich uns also Klein Detail Wrap für den linken Füllwert Duan De Pixel. Der gesamte Abstand zwischen den Testimonial-Elementen reicht nicht aus. Bei der Auswahl des Testimonial-Artikels gebe ich den Füllwert von 70 Pixel auf allen Seiten an, um die Hintergrundfarbe für diesen Testimonial-Artikel Ich gehe zum Hintergrund und gebe der Hexadezimalwert in der Farbe, der mein Design betrifft. Um die abgerundete Ecke zu erhalten, gehe ich unter die Ränder und gebe den Radiuswert 40 Pixel an. Der Abstand für den Inhalt des Testimonials oben und unten. Ich gehe unter den Abstand und passe den Füllwert an den oberen 30 Pixeln an. Für den unteren Füllwert beträgt der Wert 30 Pixel. Aber wir brauchen mehr Abstand an der Spitze. Also nochmal, ich ändere den Füllwert auf 40 Pixel, um den Inhalt größer zu machen Ich gehe unter die Topographie und ändere die Größe auf 28 Pixel, die Höhe beträgt 1,4 Bindestrich. Nehmen wir an, ob alles gut funktioniert oder nicht. Um das zu tun, werde ich es veröffentlichen , damit alles gut aussieht. Wir werden direkt darunter weitere Kommentare hinzufügen. Wir müssen also den richtigen Abstand zwischen dem Anfang und einer Auswahl von Testimonial-Artikeln angeben. Ich gebe den Wert für den unteren Rand auf 60 Pixel. In der nächsten Lektion werden wir uns mit den weiteren Befehlen außer dem ersten befassen. Außerdem werden wir das Styling für jeden der Befehle zusammen mit dem Badezimmerdesign vornehmen. Lass uns darauf eingehen. 23. Testimonials Abschnitt – Teil 3: Ab sofort haben wir den Titel und den Untertitel des Testimonial-Abschnitts in der ersten Spalte fertiggestellt des Testimonial-Abschnitts in und haben mit dem Befehlsdesign im zweiten Codon weiterentwickelt. Außerdem werden wir das Befehlsdesign weiterentwickeln, da im ersten Befehl der Verlust zu sehen ist. Das wird ein Hintergrundbild sein. Mal sehen, wie das geht. Wie wir bereits wissen, folgt das gleiche Design für die kommenden Artikel. Also wähle ich den Testimonial-Artikel aus und dupliziere ihn zweimal. Jetzt habe ich den zweiten Testimonial-Artikel zusammen mit der vorhandenen Testimonial-Artikelklasse ausgewählt zusammen mit der vorhandenen Testimonial-Artikelklasse Ich füge eine weitere Klasse mit dem Namen item hinzu , um zwischen dem ersten und zweiten zu unterscheiden . Ich muss ändere die Hintergrundfarbe. Also gehe ich zu einem anderen Hintergrund. Ich ändere die Farbe. Die Farbe des Inhalts sollte mit der Hintergrundfarbe übereinstimmen . Ich habe den Inhalt des Testimonials zusammen mit dem vorhandenen Klassennamen für Testimonial-Inhalte ausgewählt zusammen mit dem vorhandenen Klassennamen für Testimonial-Inhalte Ich erstelle einen weiteren Klassennamen, vom Client zum Inhalt. Jetzt ändere ich die Farbe dieses Inhalts. Wie bei unserem Figma-Design muss das Bild für den zweiten Testimonial-Artikel geändert werden. Also wähle ich dieses Client-Image und ersetze das Bild. Und um dann die Bezeichnung dieser Kline zu ändern, wähle ich diesen Claim Job zusammen mit dieser bestehenden Klasse aus. Lassen Sie uns eine neue Klasse mit dem Namen client to job erstellen. Ich ändere die Farbe genauso wie die Inhaltsfarbe. Als nächstes habe ich den Kundennamen geändert in jetzt die Bezeichnung dieses Kunden ändern auch das Design. Schauen wir uns nun den Testimonial-Artikel an. Zusammen mit dem vorhandenen Testimonial-Element für den Klassennamen füge ich eine neue Klasse hinzu. Punkt drei. Lassen Sie uns die Hintergrundfarbe für dieses dritte Testimonial ändern . Punkt zwei. Wie wir bereits wissen, sollte der Inhalt dieses Testimonials gemäß dem Hintergrundbild geändert werden. Also wähle ich den Inhalt des Testimonials aus und erstelle einen neuen Klassennamen zusammen mit dem vorhandenen als Klein Three-Inhalt. Jetzt unter der Topographie reicht eine einheitliche Farbe im Hexadezimalwert aus. Madison. Jetzt wähle ich den Kletterjob zusammen mit dem vorhandenen aus. Ich erstelle eine weitere Klasse mit dem Namen Klein Three Job. Jetzt gebe ich die Farbe genauso wie die Inhaltsfarbe. Jetzt muss ich das Bild ersetzen, also wähle ich den Client mh aus. Ich ersetze es durch das Design. Lassen Sie uns den Namen dieser Zeile und auch die Bezeichnung dieses Kunden ändern . Lass uns das veröffentlichen , um zu sehen, wie es aussieht. nun durch das Fenster scrollen , in dem der Titelbereich verschwindet, müssen wir den Titelbereich so einstellen, dass er im Fenster klebt. Gehen wir zurück, um diesen zu entwickeln. Um den Titelbereich auszuwählen. Ich gehe unter den Testimonial-Titel Rep und wähle den Abschnitt mit dem Titel Rub zusammen mit dem vorhandenen Klassennamen-Abschnitt mit dem Titel Wrap aus. Ich füge eine neue Klasse mit dem Namen Sticky Title hinzu. Jetzt gehe ich unter Umweltverschmutzung statt statisch, ich entscheide mich für klebrig. Also beim Scrollen der Website diesen Titel, aber wir bleiben beim Fenster. Und jetzt ändere ich den Wert für alle drei Seiten auf Null. Jetzt gehe ich zur Ebene und wähle den Inline-Block aus dem Display aus. Die Höhe und Breite werden also an den Inhalt angepasst. jetzt scrollen, können wir sehen, dass dieser Kommentarbereich auf der Leinwand bleibt. Lassen Sie uns es veröffentlichen, um zu überprüfen, ob es funktioniert oder nicht. Im Vorschaumodus konnten wir sehen, dass dies funktioniert, da wir der Meinung sind , dass der obere Abstand für diesen Titel nicht ausreicht, so wie er aussah. Es ist so nah an der Suchleiste. Also müssen wir den Platz an der Spitze schaffen. Jetzt wähle ich den Titelumschlag des Testimonials aus. Jetzt gebe ich unter dem Abstand den Wert für den oberen Rand an, mach 20 Pixel. Lassen Sie uns den kleinen Abstand für diesen Inhalt festlegen. Und ich gebe den Randwert an, das ist ein Wert für den oberen Rand bis 20 Pixel damit der Titelabschnitt mit angemessenem Abstand am Fenster bleibt . Oben wähle ich den Abschnitt mit dem Titel Wrap aus. Ich gehe in die Position. Jetzt für den obersten Positionswert gebe ich uns 40 Pixel. Lass uns das veröffentlichen , um zu sehen, wie es aussieht. Während ich das scrolle, konnten wir sehen, dass diese Titlepipe dem entsprechenden Abstand oben am Fenster haftet mit dem entsprechenden Abstand oben am Fenster haftet. Wir haben alles Notwendige für den Testimonial-Bereich getan . Fügen wir dafür einen Hintergrund hinzu und geben die Größe für das Cover an. Und lassen Sie uns den Zusammenhalt in den Mittelpunkt stellen. Wir benötigen keine Kachel, also wähle ich keine aus. Lassen Sie uns nun das Hintergrundbild dafür wählen. Also haben wir das Hintergrundbild hinzugefügt. Lass es uns veröffentlichen, um es im Vorschaumodus zu sehen. Im vorherigen Modus konnten wir das Hintergrundbild und die Befehle der Clients sowie die Haftnotiz und Exedra sehen das Hintergrundbild und die Befehle der Clients sowie die , es sieht alles gut aus. Wir haben den Testimonial-Abschnitt also erfolgreich abgeschlossen. In der nächsten Lektion werden wir uns mit dem Preisbereich dieser Website befassen. Schauen wir uns das an. 24. Pricing – Teil 1: In dieser Lektion werden wir uns den Abschnitt mit der Preisgestaltung ansehen. Jetzt konnten wir im Design sehen, dass wir oben einen Titel haben, das ist der Untertitel und ein Titel. Und direkt unter dem Titel werden wir ein Rastermodell verwenden, das aus zwei Spalten besteht da die Bootsdesigns einander ähnlich sind. Lassen Sie mich also die erste Spalte selbst erklären. In diesem Preisbereich haben wir die kostenlose Version und die Pro-Version sowie die Preise. In der ersten Spalte, in der oberen linken Ecke, haben wir den Titel. Das Gleiche gilt für die Pro-Version zwei. Und direkt unter diesem Titel werden wir einen weiteren Diblock mit den Titeln und der Liste der Elemente und einer Schaltfläche haben . Wie wir sehen konnten, überschneidet sich diese Liste von Item do Blog mit ihrem übergeordneten Diblock. In dieser Lektion und in den kommenden Lektionen werden wir sehen, wie wir dieses Design entwickeln werden . Fangen wir an, es zu entwickeln. Bevor Sie mit dem Unterricht beginnen. Schauen wir uns das gemeinsame Box-Modell an, das für alle Abschnitte innerhalb des Körpers angewendet wird . Wir müssen einen Abschnitt hinzufügen und den entsprechenden Klassennamen für diesen Abschnitt angeben. Als nächstes folgt der Abstand für diesen Abschnitt. Das heißt, wir müssen den oberen und unteren Füllwert dafür angeben. Nachdem wir den Abschnitt darin benotet haben, müssen wir einen Container hinzufügen und der Klassenname sollte für diesen Container angegeben werden. Jetzt können wir das Element innerhalb des Containers hinzufügen, das für den erforderlichen Abschnitt geeignet ist. Jetzt benote ich den Abschnitt unter dem Text und gebe den Klassennamen als Preisbereich an. Und was den Abstand angeht, ich gebe den Füllwert oben und unten als 100 Pixel an. Und jetzt im Abschnitt zur Auswahl der Preise, wir werden einen Container hinzufügen. Geben wir ihm den vorhandenen Klassencontainer. Im Design haben wir gesehen , dass es sich um einen Titel oben handelt, wie im Galeriebereich einen Titel haben, der unserem Design ähnelt. Also wähle ich im Navigator den Abschnitt Rep. aus. Jetzt dupliziere ich es und ziehe es unter den Preisbereich, sich ebenfalls unter dem Container befindet. Das gesamte Design wird in den Preisbereich übernommen. Eine Sache des Leiters, die wir tun müssen , ist , den Titel und den Untertitel zu ändern. Jetzt werden wir im Container einen Diblock erstellen. Schreiben Sie, es hält das Raster. Nach dem Erstellen eines Diblocks. Geben wir den Klassennamen dafür. Unter dem Mitarbeiter für die Preisgestaltung fügen wir ein Raster hinzu. Wir brauchen nur die beiden Spalten. Ich lösche eine Zeile. Lassen Sie uns die Klasse für dieses Raster in Preisraster umbenennen. Zunächst werden wir die erste Spalte entwickeln. Im Rahmen des Preisrasters erstellen wir also einen neuen Block. Lassen Sie den Klassennamen ein Preiselement sein. In der Preisliste werden wir einen Titel und eine Liste von Artikeln und Schaltflächen hinzufügen . Deshalb haben wir den Abstand dafür mit dem Namen des Preisartikels erstellt . Unter der Preisangabe erstellen wir also einen Diblock. Und angesichts des Klassennamens als Preistitel. Wir haben viel Platz, um den Titel zu halten, den Preis. Jetzt müssen wir einen Titel unter dem Preisbildner hinzufügen, und ein weiterer D-Block wird erstellt. Dann gebe ich den Klassennamen als Preistitel an. Um den Titel unter dem Preistitel anzugeben, fügen wir eine Überschrift hinzu. Geben wir den Überschriftentyp als H2 an. Jetzt ändere ich diese Überschrift wie in unserem Design. Jetzt müssen wir die Preise angeben. Also unter dem Preistitel, ich benote und andere Diblock, gebe ich den Klassennamen als Preisangabe an. Nun, mit der Auswahl von Price Wrap darunter, erstellen wir eine Überschrift. Jetzt habe ich den Überschriftstyp als Heckenart gewählt. Ich habe den Preiswert angegeben, den unser Design hat Lassen Sie uns diese Inschrift für diese Preisgestaltung ändern. Sehen wir uns den Klassennamen der Überschrift als Preis an. Noch eine Flut. Wir haben einen Absatz erstellt, tut mir leid, dass ich das nicht angezeigt habe. Jetzt werde ich diese Absatzklasse in Preisdauer umbenennen . Jetzt klicke ich auf diese Überschrift. Jetzt werden wir den Klassennamen dafür ändern. Lass es so sein, wie der Preis datiert ist, damit der Titel in der linken Ecke und der Preis in der rechten Ecke steht. Lassen Sie uns es mit dem Preis von Tidal Rep verkaufen. Wählen wir nun unter dem Layout Flex aus dem Display aus. Jetzt wähle ich Leerzeichen zwischen im Gerechtfertigten, im Canvas-Bereich. Wir können sehen, dass es richtig ausgerichtet ist. Jetzt komme ich zum Preis Tidal, um den Preistitel und den Absatz direkt darunter so zu gestalten Preistitel und den Absatz , dass sie nahe beieinander liegen. Ich gehe unter den Abstand und gebe den Wert für den unteren Rand als Null an. Jetzt haben wir den Preistitel fertiggestellt. Direkt darunter müssen wir eine Liste mit der Auswahl des aufstrebenden Gegenstands hinzufügen . Lass uns einen Diblock erstellen. Jetzt gebe ich den Klassennamen als Preisliste an, und darin müssen wir den Titel des Angebots hinzufügen. Dafür müssen wir also einen weiteren Diblock erstellen. Das wird als Abschluss der Auswahl der Preisliste sein, wir werden einen Diblock erstellen. Lassen Sie uns nun den Klassennamen als Vertreter des Listing-Titels ändern . Um dem Titel Inhalt zu geben, müssen wir die Überschrift hinzufügen. Jetzt wähle ich den Überschriftstyp für Hedge Three. Jetzt habe ich dieser Liste einen Titel gegeben, und dann werde ich zur Topographie springen. Wir müssen den Klassennamen für diese Überschrift ändern. Lassen Sie den Klassennamen, den wir auflisten, Titel. Im Titel des Inserats haben wir den Inhalt. Und auch eines der Emojis. Ich entscheide mich für einen Trensenwickel von Listing. In diesem RAB fügen wir also das Bild hinzu, also die Auswahl davon, ich suche nach einem Bild. Ich füge ein Elementbild hinzu. Ich habe das Bild aus der Acid-Säure ausgewählt , damit der Titel des Angebots in einer Reihe angeordnet ist. Ich wähle Rep für den Listingstitel und im Display Flex aus. Jetzt wähle ich die Mittelausrichtung und dann den Abstand zwischen anderen Richtigen. Wir wissen, dass innerhalb des Inseratstitels ein Randabstand eingepackt sein muss. Also wähle ich den Titel der Liste aus. Ich gebe diesen oberen und unteren Randwert einem Null-Pixel. Im Design haben wir eine Zeile unter dem Titel des Angebots. Bei der Auswahl des entzückenden Tidalwickels gehe ich also unter die Grenzen und wähle den Rand unten. Lass dieses Kind solide sein. Und ich gebe den Hexadezimalwert in der Farbe aus dem Figma-Design an. Weil die Zeile so nah am Titel des Inserats ist. Bei der Auswahl des Listing-Titels gebe ich den unteren Abstandswert auf 15 Pixel und auch den Randwert , also den Wert für den unteren Rand , auf 15 Pixel. Die verbleibende Entwicklung wird in der nächsten Lektion fortgesetzt. 25. Pricing – Teil 2: In dieser Lektion behandeln wir die weitere Entwicklung in der ersten Spalte eines Arbeitstages. Ab sofort haben wir oben einen Titel für diese Preisgestaltung erstellt , und direkt darunter haben wir ein Raster mit zwei Spalten erstellt. Wie in der ersten Spalte haben wir einen Do-Block erstellt, der den Inhalt der ersten Spalte enthält. Und auch an der Spitze haben wir uns mit der steigenden Flut weiterentwickelt. Und auch darunter haben wir zusammen mit dem MOG den Listing-Titel entwickelt. In dieser Lektion fügen wir eine Liste der Artikel hinzu, die für diesen Preisabschnitt benötigt werden , sowie eine Schaltfläche dazu. Lassen Sie uns mit der Entwicklung dieser fortfahren. Jetzt müssen wir ein Inserat hinzufügen. Um das zu erstellen, müssen wir also einen Diblock hinzufügen, der die Listenelemente enthält. Also unter der Preisliste erstelle ich ein Div und gebe den Klassennamen dafür als Preisliste an. Bei der Auswahl der Preisliste suche ich nach einer Liste. Die Liste wird also darunter hinzugefügt. Jetzt können Sie auf der Leinwand sehen, dass das Listenelement mit den Einstellungen für die Popup-Liste hinzugefügt wurde. Standardmäßig ist der Typ als Bestellung ausgewählt. Wir brauchen keine Kugeln. Also wähle ich den Stil S, keine Kugeln. Jetzt fügen wir die Liste der Elemente zu dieser Liste hinzu. Jetzt wähle ich die erste Liste aus, und jetzt gebe ich den Inhalt des Listenelements wie im Design an. Die Typografie für dieses Listenelement sollte geändert werden. Um das Häkchen in der linken Ecke dieses Listeneintrags zu setzen. Ich gehe unter den Hintergrund. Ich wähle Bild und Farbverlauf. Lass die Kachel keins sein. Wählen wir die Größe aus, die enthalten werden soll. Jetzt habe ich das Bild aus dem Asset ausgewählt , das stigmatisiert ist. Ich gehe Und an der Position und ich wähle die mittlere linke Ecke, du bekommst den Abstand zwischen dem Häkchen und dem Listenelement. Ich gehe unter den Abstand. Ich gebe den Wert 40 Pixel im linken Abstand an, um die Schriftfarbe für dieses Listenelement zu ändern Ich verwende eine andere Art von Grafik V. Jetzt gebe ich die Farbe im Hexadezimalwert an Ermitteln Sie den Randabstand für dieses Element mit einer Auswahl des ersten Listenelements Ich gebe den Wert für den oberen Rand auf zehn Pixel. Am unteren Wert bis zu zehn Pixel. Im Navigator konnten wir standardmäßig sehen, dass die beiden Listenelemente hinzugefügt wurden. Aber den ersten Listenpunkt haben wir bereits entworfen. Also lösche ich den vorhandenen Eintrag auf der To-Do-Liste. Jetzt dupliziere ich das für den Preis. Jetzt gehe ich in den Hintergrund. Jetzt wähle ich hier die benutzerdefinierte Größe, die mehr Abstand zwischen dem Häkchen und dem Inhalt des Listenelements ist . Also muss ich den Füllwert bei der Auswahl ändern . Ich gehe zum Abstand und gebe den Wert auf 20 Pixel. Aber es ist so nah beieinander. Lass den Wert ein D-Pixel sein. Jetzt wähle ich das erste Wort des zweiten Listenelements aus und ändere dann den IT-S-Bereich. Ich gehe auf die Typografie ein. Ich wähle das Gewicht als 700, kräftige Farbe als Primärfarbe. Ich ändere den Klassennamen für diese Textauflösung in die Preishervorhebung. Jetzt gehe ich zum Navigator. Schon wieder. Ich dupliziere diesen Listenartikel für den Preis. Im Canvas habe ich mich geändert. Oder der Inhalt dieses Listenelements. Wenn wir das Styling auf das Element aus der Liste konzentrieren , wird dieses Styling auf die anderen Listenelemente angewendet. Lassen Sie uns den Abstandswert für dieses Listenelement ändern. Also wähle ich den ersten Listenpunkt aus. Jetzt gehe ich unter den Abstand. Ich gebe den Randwert als 30 Pixel an. Ich wähle den zweiten Listenpunkt. Jetzt mache ich den Randwert, der ungefähr einem Randwert bis 30 Pixel entspricht. Diese Werte werden also für die anderen Listenelemente angewendet. Tun. Jetzt gehe ich zum Punkt der Fehlerliste. Ich wähle die Plus-Neun-Illustration. Ich ändere es als Text in span. Jetzt gebe ich den Klassennamen für diesen Text Japan, da die Preise hervorgehoben sind. Wir haben den Listenpunkt und die Mini-Sache fertiggestellt. Wir müssen einen Button hinzufügen. Bevor wir eine Schaltfläche hinzufügen, müssen wir einen Block hinzufügen, sich unter dem Mitarbeiter der Preisliste befindet. Jetzt gebe ich den Klassennamen für diesen Diblock S Pricing Button Wrap. Also wähle ich diese Preisschaltfläche aus. Jetzt suche ich nach einem Button. Dieses Element wird also darunter erstellt. Jetzt gebe ich den Klassennamen für diesen Button als Markenmarken-Button, der die bestehende Klassenschaltfläche ist. Design der Transplantationstasten wird also auf diesen Button angewendet. Jetzt füge ich zusammen mit der vorhandenen Klasse eine Schaltfläche zur Transplantation eine weitere Schaltfläche für die Preisgestaltung hinzu. Im Design haben wir gesehen, dass dieser Button in voller Breite belegt ist. Ich nehme eine andere Größe. Ich gebe die Breite auf 100%. Damit der Inhalt dieser Schaltfläche in der Mitte steht. Ich gehe unter die Topographie und richte sie auf die Mitte aus. Jetzt habe ich den Inhalt dieser Schaltfläche auf S geändert. Sie ist kostenlos. Lassen Sie uns nun die Farbe dieses Randes ändern. Also gehe ich unter die Grenzen und ändere die Farben mit dem Hexadezimalwert. In der nächsten Lektion werden wir uns der weiteren Entwicklung und dem Design befassen, das für den Preisbereich erforderlich ist. Lass uns weitermachen. 26. Pricing – Teil 3: In dieser Lektion werden wir diesen Abschnitt mit der Preisgestaltung abschließen, diesen Abschnitt mit der Preisgestaltung den Inhalt der ersten Spalte und den Inhalt der zweiten Spalte gestalten. Und wir werden auch sehen, wie man die Liste der Elemente so gestaltet, dass sie sich überschneiden. Fangen wir an, dies zu entwickeln. In dem Design, das wir bereits gesehen haben, gibt es eine Hintergrundfarbe für den Preisartikel. Also wähle ich im Navigator die Preisposition, den Block aus und gehe zum Hintergrund. Jetzt habe ich den Farbwert in Hexadezimal im Canvas angegeben , wir konnten sehen, dass der gesamte Inhalt linksbündig ausgerichtet ist. Wir müssen den Abstand an allen Seiten einhalten. Also mache ich noch einen Abstand. Jetzt gebe ich den Wert oder den Hund der Bindung als leer an, aber es scheint nicht so gut zu sein. Also ändere ich auf 60 Pixel und lasse den unteren Wert 60 Pixel sein. Jetzt gebe ich dem linken Padding-Wert 70 Pixel. Es schien ein Ort für das richtige Verbot zu sein. Tun. Um die abgerundeten Ecken zu machen, gehe ich als Nächstes an einen anderen Rand. Jetzt gebe ich den Radiuswert auf 40 Pixel. Jetzt müssen wir die Farbe für diese Preisliste angeben. Also wähle ich diese Preisliste aus, schnapp mir einen anderen Hintergrund. Ich wähle die Farbe als weißes Licht. Verwenden Sie erneut den Radiuswert als 40 Pixel und andere Ordnungen. Wie wir deutlich sehen konnten, ist der Abstand nicht angemessen. Also gehe ich zum Abstand. Jetzt gebe ich den Wert für die obere und untere Polsterung als xy-Pixel an. Und für links und rechts 50 Pixel. Um den Abstand zwischen dem Preistitel und der Preisliste zu ermitteln. Ich wähle den Rest der Preisliste aus. Wenn ich den Randwert oben angebe, können wir den Abstand anpassen. Also gebe ich den Wert für den oberen Rand als 40 Pixel an. Jetzt wähle ich diese Schaltfläche, um den Abstand zwischen den Listenelementen und der Schaltfläche zu vergrößern. Lassen Sie uns den Füllwert für diesen Button-Wrap auf 40 Pixel oben angeben. Lass es uns veröffentlichen, um zu sehen, wie es aussieht. Wir konnten feststellen, dass der Abstand für diesen Preisartikel und der Titelinhalt nicht ausreicht. Ich mache den Navigator, ich wähle die Preisübersicht aus. Das ist die ganze Sache. Geben wir den Füllwert oben auf 60 Pixel. In der Preisposition. Ich finde, das ist oben etwas mehr Platz. Bei der Auswahl des Preisartikels gebe ich den Füllwert oben auf 40 Pixel. Auch hier werde ich den Margenwert für den Preislistenumbruch anpassen . Jetzt habe ich den Wert oben als 50 Pixel angegeben. Kommen wir noch einmal zu dem Margenwert für das Listenelement. Jetzt gebe ich den Wert oder den oberen Rand als 35 Pixel und den Wert für den unteren Rand als den Wert an, wenn ich pixele. Wir haben die notwendigen Entwicklungen durchgeführt, die für den Preisbereich in der ersten Spalte erforderlich sind. Das gleiche Design ist ein Folgeentwurf für die zweite Spalte. Also werde ich diesen Preisartikel einmal duplizieren. Dieser duplizierte Artikel wird also automatisch in dieser zweiten Spalte platziert , um die Lücke zwischen der ersten Spalte und der zweiten Spalte zu vergrößern, indem das Preisraster ausgewählt wird. nun unter dem Bearbeitungsraster Geben wir nun unter dem Bearbeitungsraster den Wert für den Abstand auf 50 Pixel. Jetzt muss ich diesen Inhalt in der zweiten Spalte ändern, wie in unserem Design. Wenn ich zur Preisliste komme, haben wir zwei weitere Listenelemente. Also im Navigator mit der Auswahl des Listenelements dupliziere ich es zweimal. Und wir müssen auch das Emoji in der zweiten Spalte ändern , wie im Design. Also wähle ich das Bild aus. Jetzt werde ich das Bild aus dem Asset ersetzen. Lass uns das veröffentlichen , um zu sehen, wie es aussieht. Wir haben alles Notwendige getan , was für den Preisbereich erforderlich ist. Als nächstes müssen wir das Styling nach unserem Design machen . Wie beim Design haben wir gesehen, dass das Listenelement sein übergeordnetes Element überlappt. Wenn jedoch der gesamte Teil des Diblocks statisch ist, dieses Design nicht in ihn implementiert werden. Der Blog der Eltern sollte also miteinander verknüpft sein. Also wähle ich den Preisbereich aus und seine Position so fest, dass er sich auf das unmittelbar übergeordnete Element dieser Preisliste bezieht auf das unmittelbar übergeordnete Element , den Preisartikel. Also müssen wir die Position als relevant festlegen. Gehen wir nun zum Ende der Preisliste über. Stellen wir nun seine Position S absolut ein. Im Canvas konnten wir diese Preisliste sehen. Rap ist frei von Anpassungen seiner Position und es wird auch ein li innerhalb dieses Preisartikels sein. Der Hauptgrund, die Position auf absolut und relativ zu ändern die Position auf absolut und relativ zu besteht darin, dass die Position der anderen Elemente oder deren Eigenschaften dadurch nicht beeinträchtigt wird . Da wir die Position frei an unsere Bedürfnisse anpassen können. Und auch dieser Preisartikel hat je nach Inhalt, der darin enthalten ist, Platz beansprucht. Um die Größe entsprechend unserem Design zu erreichen, gehe ich unter die Größe und setze die Mindesthöhe auf 600. Jetzt können Sie sehen , wie es seine Größe anpasst , ohne die Position des Angebotsartikels zu beeinflussen . Damit die Preisliste unter der Position in die Mitte gerückt wird, werde ich mich von Otto anpassen. Jetzt setze ich die linke Umweltverschmutzung auf jeweils 8% und die rechte Position auf 8% H. Entsprechend dem Wert, den es an die Mitte angepasst hat, die Höhe dieser Preispositionen scheint die Höhe dieser Preispositionen etwas klein zu sein. Unter der Größe gebe ich ihnen eine Mindesthöhe von 700 Pixeln. Um diese Preisliste im Hintergrund hervorzuheben , müssen wir den Schatten, also den Box-Shadow, darauf setzen . Also gehe ich unter den Box-Shadow da wir einen Box-Shadow außerhalb dieser Liste benötigen. Standardmäßig heißt es also nach draußen, wir passen nur den Winkel des Schattens an. Und der verschwommene Effekt, den ich in einer anderen Farbe benötige. Ich passe die Opazität an , bis ich nicht zufrieden bin. Also nochmal, ich klicke auf die Boxschatten und passe den Unschärfewinkel an. Delight fühlt sich zufrieden an. Jetzt werde ich es veröffentlichen, um es in einem Vorschaumodus zu sehen. Also haben wir alles gemacht, wie in unserem Design. Für den Button haben wir die bestehende Klasse verwendet. Das Design, das wir dieser Klasse gegeben haben, wird hier also vererbt. Tun. Aus diesem Grund können Sie den Übergangseffekt dieser Schaltfläche sehen . Endlich haben wir den Abschnitt mit den Preisen abgeschlossen und in der nächsten Lektion werden wir uns täglich mit dem Blog-Bereich befassen. Wir sehen uns in der nächsten Lektion. 27. Blog – Teil 1: In dieser Lektion werden wir den Blog-Bereich entwickeln. Brauche es nur für unsere Website. Schauen wir uns die Planung an. Zuerst werden wir einen Abschnitt und dann einen Container unter den Medikamenten erstellen , die alle in der Stadt sind. Zuerst werden wir den Titel haben, der aus einem Div besteht. Und darin werden das ein Titel und ein Untertitel sein. Und wieder, direkt unter dem Titel, werden wir ein Div darin haben. Wir werden die Sammlungsliste verwenden. Das heißt, wir werden das CMS verwenden. Das Design, das wir für den einen Artikel vornehmen werden, wirkt sich auf die anderen Artikel aus. Außerdem werden wir es nicht separat bearbeiten. Wir werden nur den Inhalt vom CMS bekommen, das ist ein Content-Management-System. Alle Blog-bezogenen Daten werden also aus den CMOS extrahiert. Deshalb verwenden wir die Sammlungsliste. Kommen wir also zurück zum Design. Sie konnten in jedem Artikel sehen, es hat ein Bild in der linken Ecke. Und in der rechten Ecke haben wir einen Titel des Blogs. Und darunter gibt es ein Datum , an dem diese Blogs veröffentlicht werden, obwohl dies ein Auszug aus diesem Block ist. Und wieder brauchen wir es. Das wird ein Lesemobil sein, um zum Blog weiterzuleiten. Das gleiche Design, ein Platz für die restlichen Sammlungsgegenstände. Jetzt bekommen Sie einige Ideen, wie wir uns entwickeln werden. Mal sehen, wie wir das erfinden werden. Bevor Sie mit dem Unterricht beginnen. Schauen wir uns das gemeinsame Box-Modell an, das für alle Abschnitte innerhalb des Körpers angewendet wird . Wir müssen einen Abschnitt hinzufügen und wir müssen den entsprechenden Klassennamen für diesen Abschnitt angeben. Als nächstes folgt der Abstand für diesen Abschnitt. Das heißt, wir müssen den oberen und unteren Füllwert dafür angeben. Nachdem wir darin einen Abschnitt erstellt haben, müssen wir einen Container hinzufügen und der Klassenname sollte für diesen Container angegeben werden. Jetzt können wir das Element innerhalb des Containers hinzufügen, das für den erforderlichen Abschnitt geeignet ist. Zuerst erstellen wir unter dem Körper einen Abschnitt. Geben wir ihm einen Klassennamen für diesen Abschnitt S Blogabschnitt. Erstellen Sie nun den Container unter acht und wählen Sie den vorhandenen Klassennamen dafür aus. Wir müssen den Titel für diesen Blog-Bereich hinzufügen. Wir haben die Titel auch in den vorherigen Abschnitten erstellt Ich bin zum Servicebereich gegangen und habe ihn dupliziert, den Abschnitt mit dem Titel Wrap. Und sie haben den Abschnitt mit dem Titel Wrap unter den Container im Blog-Bereich gezogen . Jetzt könntest du also den Inhalt dieses Titels als unser Knie ändern . Wir haben uns zunächst keinen Abstand für den Abschnitt gegeben. Jetzt wähle ich diesen Blog-Bereich aus. Ich gebe den Füllwert als 100 an. Oben und unten. Ich wähle den Container darunter aus. Wir werden einen Diblock erstellen. Lassen Sie uns den Klassennamen dafür geben , Block S, Blog Content Wrap. Sobald wir in diesem Block Content Wrap sind, fügen wir eine Sammlungsliste hinzu. Ich wähle das CMS, das ist ein Content-Management-System. Hier wähle ich die neue Kollektion aus, die sich in der oberen rechten Ecke befindet. Jetzt können Sie im Fenster die Sammlungsvorlagen, Sammlungseinstellungen und Sammlungsfelder sehen . Standardmäßig haben wir die Vorlagen hier. Wir werden einen Block erstellen. Also wähle ich als Blogbeitrag aus. Wenn Sie auf den Blogbeitrag klicken, die entsprechenden Felder werden die entsprechenden Felder automatisch erstellt. Direkt unter den Sammlungsfeldern. Sie können im Namen der Sammlung sehen, der Blogbeitrag größer ist und in der Sammlungs-URL, der Beitrag erstellt wurde. Standardmäßig haben wir die Basisinformationen als Namen und haben darunter geschlafen. Oder es wird benutzerdefinierte Felder geben, in denen wir unsere Felder anpassen können. Ich benötige diese Spielfilme nicht, also wähle ich die Sessions aus und lösche sie. Außerdem benötige ich diese Farbfelder nicht, also wähle ich die Einstellungen aus und lösche sie. Neben den vorhandenen Feldern benötige ich noch ein Feld. Bei der Auswahl des Hinzufügen-Felds. Wir konnten die vielen Feldtypen sehen. Hier. Ich muss den Namen des Autors hinzufügen. Um die Autorennamen zu speichern, wähle ich Klartext. Jetzt können Sie das Etikett sehen. Dieses Label wird als Feldname verwendet. Geben wir den Labelnamen jedoch seltsam an. Wir brauchen den Hilfetext. Das ist eine Beschreibung der Verwendung dieses Hilfetextes. Das heißt, dieses hilfreiche x wird unter dem Etikett angezeigt , um den Mitarbeitern zu helfen, sich im Detail zu informieren. Dieser Hilfetext dient , zu erfahren, was der Zweck dieses Labels ist. Jetzt gebe ich den Hilfetext ein und gebe den Autor dieses Beitrags ein. Als Nächstes gibt es daraus einen Textfeldtyp. Wir können wählen, ob es sich um eine einzelne oder eine mehrzeilige Linie handelt. Speichern wir dieses Feld. Nach dem Auto. Ich benötige das Datums- und Uhrzeitfeld, um die veröffentlichten Daten des Blocks zu speichern. also auf Feld hinzufügen klicke, wähle ich den Feldtyp als Datum und Uhrzeit aus. Geben wir den Labelnamen als Veröffentlichungsdatum an. im Hilfetext, den ich schreibe Wählen Sie im Hilfetext, den ich schreibe, die veröffentlichten Daten des Beitrags aus. Speichern wir dieses Feld. Jetzt haben wir alle notwendigen Felder erstellt , die für unsere Sammlung benötigt werden. Alle Daten zu diesem Blogbeitrag werden in den entsprechenden Feldern gespeichert. Klicken wir nun auf die Sammlung erstellen. Also wird die Blogpost-Sammlung erstellt. Jetzt wollen wir auswählen, wie viele Musterartikel wir benötigen. Derzeit wähle ich fünf Artikel aus. Nachdem Sie dies ausgewählt haben, werden die Phi-Beispielelemente des Blogposts erstellt. Nun, das sind alle Phi-Beispielartikel des Blogposts. Wie beim Design benötigen wir nur die vier Artikel. Wir benötigen keinen der Artikel. Also wähle ich den letzten Artikel aus und lösche ihn. Lassen Sie uns jetzt die Bearbeitung des gesamten Beitrags vornehmen. Jetzt wähle ich die erste Pose aus. Hier kannst du die Basisinformationen sehen: Name und Schlaf. Im benutzerdefinierten Feld. Wir haben alle Felder , die wir zuvor erstellt haben. Standardmäßig haben wir jedem Feld einen Dummy-Inhalt. Wir müssen all diese Dinge entsprechend unserem Inhalt ändern . Lassen Sie uns mit den grundlegenden Informationen unter dem Namen weitermachen. Ich gebe es an, wie Sie Ihre zeichnerischen Fähigkeiten entwickeln können. In diesem Labor. Ich gebe wie im Namensfeld an. Jetzt erhalten wir die Warnmeldung, da durch eine Änderung der URL externe Links zu diesem Artikel direkt in der Platte beschädigt werden . Wir sollten keine kaputten Links haben. Dafür. Zu jeder Wortendung müssen wir einen Bindestrich hinzufügen. Fügen wir also einen Bindestrich zwischen den beiden Wörtern hinzu. Kommen wir nun zu den benutzerdefinierten Feldern Lassen Sie uns den Beitragstext zu unserem Inhalt bringen. Gleiche gilt für die Zusammenfassung des Beitrags. Als nächstes gehe ich zum Autor. Geben wir den Autorennamen dieses Blogposts an. Lass uns das speichern. All diese Daten werden also in den jeweiligen Feldern gespeichert. Bei den verbleibenden drei Punkten müssen wir dasselbe tun . Jetzt haben wir alle Daten für die Speicherung in ihren jeweiligen Feldern und anderen Blogbeiträgen eingerichtet. Beim Zugriff auf diese Sammlung von Blogbeiträgen können die Daten vom MIT erneut in unserem Canvas versucht werden. Mal sehen, wie wir das in der nächsten Lektion machen werden. 28. Blog – Teil 2: Bisher haben wir den Titelbereich erstellt, der für unsere Blogbeiträge benötigt wird. Und wir haben auch etwas über das CMS gesehen, das ist ein Content-Management-System, wohingegen es wie eine Datenbank ist, die die Felder mit den Daten enthält die die Felder mit den Daten , die für unseren Blogbeitrag benötigt werden. Wir werden die Inkassobedingungen verwenden. Also, ein Blatt aus dieser Sammlung, werden wir alle Blogbeiträge erneut versuchen, Daten daraus auf unserem Canvas. wir uns in dieser Lektion an, Sehen wir uns in dieser Lektion an, wie wir alle Daten aus der Sammlung von Blogbeiträgen auf unseren Canvas abrufen werden. Wie wir unser Blogpost-Raster gestalten werden. nun mit der Auswahl der Blog-Inhalte Lassen Sie uns nun mit der Auswahl der Blog-Inhalte eine Sammlungsliste erstellen. Jetzt wird der Pop angezeigt. Hier. Wir müssen die Quelle wählen. Wir haben eine Sammlung von Blogbeiträgen erstellt. Die Quelle für die Sammlungsliste stammt also aus dem Blogbeitrag. Jetzt müssen wir die Ebene auswählen, die für uns entsprechend dem Design benötigt wird . Wir haben die beiden Spalten, also wähle ich die Ebene mit zwei Spalten aus. Die Sammlungsliste wird auf der Leinwand erstellt. Hier können wir also die Daten, die für unsere Blogbeiträge benötigt werden, erneut versuchen . Im Navigator wähle ich Blog-Inhalte aus. Darin wird es einen Wrapper für Sammlungslisten geben. Wieder drin, diese Erinnerungsliste. Und wieder darin befindet sich ein Sammlungsstück, da es sich um jedes einzelne Objekt handelt. Jetzt füge ich in diesem Sammlungselement einen Div-Block hinzu , da wir die Sammlung verwenden. Wenn Sie einige Änderungen an einem Artikel vornehmen, wirkt sich dies auch auf alle anderen Artikel aus. Also habe ich diesem Sammlungsartikel Diblock hinzugefügt. Die Protokolle werden also alle für alle anderen Sammlungselemente erstellt . Lassen Sie uns diesen Diblock-Klassennamen als Blog Image Rep ändern . Jetzt fügen wir ein Bild hinzu. Wenn ich diesem Blog-Bild-Wrapper automatisch ein Bild hinzufüge , werden die Bilder auf allen anderen drei Sammlungsartikeln erstellt. Wenn ich die Option „Bild aus der Sammlung von Blogbeiträgen abrufen“ verwende , werden die Bilder, die alle in dieser Sammlung gespeichert erneut versucht und auf ihrem jeweiligen unmittelbaren Element angezeigt. Da wir die Blogpost-Sammlung daraus ausgewählt haben, müssen wir das Feld auswählen. Da es sich um ein Bild in dem Feld handelt, das wir für das Bild verwendet haben , handelt es sich um ein Hauptbild und ein Miniaturbild. Hallo, wir benötigen ein Vorschaubild. Also wähle ich das Vorschaubild des Felds aus. Die Bilder werden in einer Reihenfolge unter den Miniaturbildfeldern gespeichert . Wenn Sie darauf zugreifen, werden alle Miniaturbilder in Drive gelesen und in ihrem jeweiligen Sammlungselement gespeichert. Wir haben das Bild hinzugefügt. Als Nächstes müssen wir einen Bereich für den Blockinhalt erstellen . Jetzt wähle ich den Sammlungsartikel aus. Innerhalb des Sammlungsgegenstands werde ich einen Diblock erstellen. Geben wir den Klassennamen für diesen Diblock S-Blog-Inhaltsbereich. Wir müssen den Titel für den Blogbeitrag hinzufügen. Unter dem Blog-Inhaltsbereich füge ich eine Überschrift hinzu und lassen Sie uns den Überschriftstyp als H2 wählen. Da wir die Sammlungsliste verwenden, müssen wir den Feldnamen aus der Sammlung auswählen. Jetzt wähle ich unter der Option GetText aus dem Blogbeitrag den Feldnamen und den Namen, sodass die Überschrift der Blogbeiträge abgerufen und hier platziert wird. Als Nächstes müssen wir Namen des Autors und die veröffentlichten Daten des Beitrags angeben. Also erstelle ich unter dem Blog-Inhaltsbereich wieder einen neuen Block, der das Veröffentlichungsdatum und den Autorennamen enthält. Geben wir ihm einen Klassennamen für diesen Diblock S-Blog, Metal Wrap. Mit der Auswahl des Blocks Metal Wrap fügen wir einen Textblock hinzu, aktivieren den GetText aus Blogbeiträgen und wählen den Feldnamen und das Veröffentlichungsdatum aus. Also der Herausgeber, das Datum der Beiträge wird hier angezeigt. Neben dem Veröffentlichungsdatum benötigen wir einen Autor des Beitrags. Also nochmal, unter dem Blog-Meta-Wrap füge ich einen Textblock hinzu. Jetzt wählen wir das Feld als Auto. Der Name des Autors und das Veröffentlichungsdatum werden also allen anderen Sammlungsartikeln hinzugefügt. Jetzt füge ich unter dem Blog-Inhaltsbereich einen Absatz hinzu. Lassen Sie uns das Feld nun als Zusammenfassung des Beitrags verwenden. Als Zusammenfassung wird der Beitrag auf allen anderen Sammlungsartikeln angezeigt. Da wir nur die Zusammenfassung des Beitrags hinzugefügt haben. Um mehr über den Beitrag zu erfahren, müssen wir einen Link zum Weiterlesen hinzufügen. Unter dem Blog-Inhaltsbereich. Ich füge einen Textlink hinzu. Jetzt wähle ich im Pop-up die Sammlungsseite aus. Und dann wähle ich unter der Dropdownliste der Seite den aktuellen Blogbeitrag aus. Wenn wir also auf diesen Link klicken, die Inhalte zu werden die Inhalte zu diesem aktuellen Blogbeitrag angezeigt. Lassen Sie uns den Textlink in den Lesemodus ändern. Jetzt fügen wir den gesamten Blogartikel zu einem bestimmten Diblock hinzu. Also unter dem Sammlungsartikel erstelle und diblockiere ich. Und ich ziehe den Diblock auf EPO, den Blog-Image-, Rap - und Blog-Inhaltsbereich. Platzieren wir nun das Blogbild, Rap und den Blog-Inhaltsbereich in diesem neu erstellten Div-Block Geben wir den Klassennamen für dieses Diblock S-Blog-Element. In diesem Blogartikel werden wir ein Bild und den Inhalt haben, wie wir auf der Leinwand sehen konnten. In jedem der Sammlungsgegenstände. Die Bilder befinden sich oben und die Titel, das Datum, der Autor und die Zusammenfassung des Beitrags oder darunter. Aber wir brauchen das Bild links und alle Titel und der Inhalt müssen rechts sein. Um festzustellen, dass ich einen Blogartikel auswähle. Eine weitere Ebene, ich wähle den Flex aus und richte ihn in der Mitte aus. Lassen Sie uns nun den Typ der Biographie des Blog-Inhalts ändern. Jetzt wähle ich die Überschrift des ersten Inhaltselements und wähle unter der Typografie die Schriftart als Poppins. Als nächstes wird das Gewicht 500 Medium sein und die Höhe beträgt 1,2 Bindestriche. Wählen wir nun die Schriftfarbe als Sekundärfarbe aus dem Farbfeld aus, da wir den Klassennamen für diese Überschrift angeben müssen. Bei der Auswahl dieser Überschrift gebe ich also den Klassennamen als Blogtitel an. Als nächstes wähle ich die Blockmetallverpackung aus , in die es zwei Lehrbücher gibt. Jetzt wähle ich den ersten Textblock da er das Veröffentlichungsdatum dieses Blogs enthält. Lassen Sie uns die Topographie der Schrift beibringen , die ich als Poppins wähle und das Gewicht wird 500 m betragen , da die Größe für dieses Datum nicht groß sein sollte. Also gebe ich die Größe als 16 Pixel und die Höhe als 1,2 Bindestrich als Datum an und das Auto wird in einer subtilen Farbe angezeigt. Lässt die Schriftfarbe Inhaltsfarbe sein. Aus diesem Farbfeld müssen wir den Klassennamen für diesen Textblock angeben. Also benenne ich diese Klasse in log metal value um. Das Design für diesen Autorentextblock dasselbe wie für den Herausgeber, der Datumstextblock, da wir den Klassennamen für diesen S-Blog-Metta-Wert gegeben haben . Also geben wir jetzt denselben Klassennamen für diesen Textblock. Jetzt wird das gesamte Styling , das wir in dieser Klasse gemacht haben , auf diesen Autorennamen angewendet. Außerdem müssen wir das Datum und den Namen des Autors so einstellen, dass sie nebeneinander stehen. Also wähle ich das Blog Metal Wrap aus. Ich wähle Flex im Display und richte es in der Mitte aus. Wir müssen die Trennung zwischen dem Datum und dem Namen des Autors vornehmen . Also im Blog Mehta erstelle ich einen weiteren Textblock. Und ich verwende eine Linie als Trennzeichen zwischen diesen beiden. Jetzt gebe ich den Klassennamen für diesen Textblock als Blockmetalltrenner. Um die Topographie zu ändern, verwende ich eine andere Typografie um einen Raum für den Separator zu erstellen. Ich gehe zum Abstand und gebe dann den Füllwert von links und rechts als zehn Pixel an. Wir brauchen einen kleinen Abstand zwischen den Blog-Inhalten auf der Blog-Metallfolie. Bei der Auswahl von Blog Metal Wrap gebe ich dem unteren Füllwert S, zehn Pixel. Auch hier müssen wir die Trennung zwischen diesem Blog-Inhaltsbereich Metal Wrap and Roll vornehmen . Bei der Auswahl von Blog Metal Wrap gehe ich also unter die Ränder und wähle den Rand unten. Ich ändere die Farbe für diesen Separator. Kommen wir nun zum Blog-Inhaltsbereich, dem Absatz, und passen Sie die Höhe unter der Topographie an, die ihn mit 1,3 Bindestrich abschließt. Als nächstes wähle ich den Link. nun unter der Typografie Geben wir nun unter der Typografie die Schrift als Poppins an und warten mit 500 Medium und der Größe mit 18 Pixeln. Geben wir die Farbe als Sekundärfarbe aus dem Farbfeld und die Höhe, Breite, 1.2 Bindestrich an, da wir hier den Link verwenden, da er nicht so gut zu sehen scheint. Also in dem Stil, den ich wähle, keiner. Lassen Sie uns die Klasse für diesen Link als Blog ändern, mehr lesen Sie weiter Link. Während wir schweben, müssen wir den Übergang vollziehen. Im Nicht-Staat selbst gehe ich also zum Übergang und wähle den Übergangstyp als Schriftfarbe. Jetzt ändern wir den Status auf Haul. Wir müssen die Schriftfarbe ändern. Also mache ich eine andere Typografie und wähle die Schriftfarbe als Primärfarbe aus diesem Farbfeld. Lassen Sie uns nun noch einmal den Staat ohne wählen. Jetzt haben wir den Übergangseffekt für diesen Link erzielt. Wir haben den Beispielbildtitel des Blogs hinzugefügt, tatsächlich Auto- und Beispielinhalte sowie eine rote Modellierung In der kommenden Lektion werden wir den gesamten Blogbereich fertigstellen. Mal sehen, wie wir das in der nächsten Lektion machen werden. 29. Blog – Teil 3: Dies ist der letzte Teil für diesen Blogbereich. Ab sofort haben wir das für diesen Block benötigte Beispielbild fertiggestellt das für diesen Block benötigte Beispielbild und den Titel oder den Namen und das Datum als kleinen Inhalt hinzugefügt . Und ich werde alles, was wir in der vorherigen Lektion gemacht haben, im Design verlinken . Und wir werden die Anpassung an den Abstand vornehmen , der für dieses Blockdesign erforderlich ist. Mal sehen, wie wir das alles machen werden. In dieser Lektion werden wir die Hintergrundfarbe für jeden dieser Blogartikel ändern . Sehen wir uns in dieser Lektion an, wie wir das alles machen werden. Jetzt werden wir das Hintergrundbild dieses Blogartikels ändern . Also unter dem Sammlungsartikel mit einer Auswahl von Blog-Artikeln gehe ich unter die Hintergründe. Lassen Sie uns die Farbe in unserem Design von transparent auf die Farbe ändern . Um die abgerundete Ecke an allen vier Seiten unter den Rändern zu machen , gebe ich den Radiuswert 32 Pixel an. Der Inhalt und das Bild dieses Blogartikels sind so nah an seinen Seiten. Also müssen wir den Abstand auf allen vier Seiten einhalten. Jetzt gehe ich unter den Abstand. Geben wir ihm für alle Websites einen Füllwert von 40 Pixeln. Um nun den Abstand zwischen dem Bild und dem Inhalt anzugeben, müssen wir den entsprechenden Inhaltsbereich auswählen. Also wähle ich den Blog-Inhaltsbereich. Für den linken Füllwert. Ich gebe 40 Pixel an, um den Abstand für diese veröffentlichten Daten zu erhalten, nicht den Namen. Ich entscheide mich. Metallfolie blockieren. Ich gebe den Füllwert für die oberen 210 Pixel und den unteren Füllwert als 20 Pixel an. Und wieder gebe ich Wert für den unteren Rand auf 20 Pixel. Jetzt haben wir also den beträchtlichen Abstand zwischen dem Inhalt und dem Datum. Wir haben den Klassennamen für diesen Absatz nicht geändert. Lassen Sie uns es also umbenennen S Block zusätzliches Produkt, beträchtlicher Abstand zwischen dem Absatz und dem Link. Geben wir den Füllwert für die Unterseite als zehn Pixel an. Jetzt müssen wir die unmittelbare Wirkung des Blocks in ihrem Design ändern . Hier verwende ich die winzige Seite png.com , um das Bild in komprimierter Größe zu erhalten. Lass uns das Bild hochladen , das wir jetzt haben. Jetzt habe ich das gesamte Bild ausgewählt, das für das Hauptbild und ein Vorschaubild bestimmt ist. Das Bild mit der größten Größe ist aufgrund seiner kleinsten Größe erheblich verkleinert. Jetzt lade ich jedes Bild herunter , um die Bilder des Blocks zu ändern. Jetzt gehe ich zur CMS-Sammlung unter dem Blogbeitrag, ich wähle den ersten Block aus. Darunter. Wir konnten das Hauptbild und das Vorschaubild sehen. Unter dem Vorschaubild lösche ich es. Lassen Sie uns das Bild löschen , das wir heruntergeladen haben. Jetzt. Das Gleiche, was ich im Hauptbild machen werde. Ich lösche das vorhandene Bild, da ich es durch ein großes Bild wie das Miniaturbild ersetze . Jetzt befolge ich dieselben Schritte , die ich im ersten Blogbeitrag durchgeführt habe. Zu den verbleibenden drei Blogbeiträgen. Im Canvas konnten wir sehen, dass das gesamte Bild der Blogbeiträge geändert wurde. Erfolgreich, wenn Sie bereit sind die abgerundete Ecke auf jedem Bild zu machen. Ich wähle das Bild unter dem Rand aus. Ich gebe den Wert als 25 Pixel an. Wir haben den Klassennamen für dieses Bild nicht gesehen. Also gebe ich den Klassennamen als Blog-Listing-Bild an. Jeder der Blogartikel berührt sich und ist auch so nah beieinander. Um den Abstand zwischen ihnen herzustellen. Ich wähle einen Sammlungsartikel, der eine andere Sammlungsliste ist. Gehen wir unter den Abstand. Nun zum Füllwert Ich gebe links und rechts 15 Pixel an . Und geben wir den unteren Füllwert als 30 Pixel an. Jetzt ändere ich den Klassennamen des Sammlungselements Blog-Sammlungselement, um den Abstand für den Inhaltsbereich oben zu erhalten. Blog-Inhalte auswählen, Rap, da alles drin ist. Der Abstand wird also alle anderen Dinge darin gelten. Gehen wir zum Abstand. Ich gebe den Füllwert oder den oberen Wert als 60 Pixel an, damit das Bild die hundertprozentige Breite der Größe verwendet . Ich wähle das Blog-Image-Rap aus, aber es hält das Bild unter der Größe. Ich gebe den Wert als 100 Prozent unter der Breite an. Und lassen Sie uns die Bildbreite des Blog-Listings noch einmal auf 100 Prozent erhöhen. Lass uns das veröffentlichen, um es im Premium-Modus zu sehen. Wir haben den Blockabschnitt wie in unserem Design entwickelt . Sogar der Übergang des Lesemodus funktioniert einwandfrei. Endlich haben wir den Blockabschnitt erfolgreich abgeschlossen. In der nächsten Lektion werden wir uns dem FAQ-Bereich und der Drop-down-Liste befassen. In der Dropdownliste wird die Animation ausgeführt. Mal sehen, wie wir das machen werden. 30. FAQ-Abschnitt – Teil 1: In dieser Lektion werden wir uns dem FAQ-Bereich befassen. Schauen wir uns vorher an, wie das Box-Modell spielt. Wie üblich erstellen wir einen Abschnitt und dann einen Container. Und darin werden wir ein Rastermodell verwenden, das nur zwei Spalten anzeigen kann. Im D-Block der ersten Spalte werden wir einen To-Do-Blog verwenden, um eine Überschrift und eine Unterüberschrift zu speichern . Wenn wir zum D-Block der zweiten Spalte kommen , verwenden wir eine Drop-down-Liste. Wir werden die Animation behandeln , die für die Dropdownliste benötigt wird. Wenn Sie auf den Pfeil klicken, sollte er sich drehen, während der Inhalt darin geöffnet wird. Und es sollte auch zurückdrehen und diese Liste schließen. Und in der kommenden Lektion des FAQ-Bereichs werden wir uns mit der Animation befassen, die für diese Drop-down-Liste erforderlich ist. In dieser Lektion behandeln wir nur die grundlegende Struktur, die für die Dropdownliste benötigt wird. Lass mehr. Bevor wir mit der Lektion beginnen, wollen wir uns das gemeinsame Box-Modell ansehen, das für alle Abschnitte innerhalb des Körpers angewendet wird . Wir müssen einen Abschnitt hinzufügen und wir müssen den entsprechenden Klassennamen für diesen Abschnitt angeben. Als nächstes folgt der Abstand für diesen Abschnitt. Das heißt, wir müssen den oberen und unteren Füllwert dafür angeben. Nachdem wir darin einen Abschnitt erstellt haben, müssen wir einen Container hinzufügen und der Klassenname sollte für diesen Container angegeben werden. Jetzt können wir das Element innerhalb des Containers hinzufügen, das für den erforderlichen Abschnitt geeignet ist, mit einer Auswahl des Hauptteils und dem Erstellen eines Abschnitts. Ändern wir es in den FAQ-Bereich. In diesem FAQ-Bereich erstelle ich jetzt einen Container. Verwenden wir den vorhandenen Klassennamen-Container. Jetzt, mit der Auswahl dieses Containers, erstelle ich einen Do-Block, Klassenname erzeugt Tilde Log S FAQ-Inhalt gelesen. Dies enthält also den gesamten Inhalt und den benötigten weiteren FAQ-Bereich Wie wir bereits besprochen haben, werden wir ein Raster unter dem FAQ-Inhaltsumfang erstellen. Im Bearbeitungsraster lösche ich den Pfeil. Jetzt benenne ich es in FAQ-Raster um. Wir brauchen den Rasterabstand. Also wähle ich den FAQ-Bereich aus und gebe den Füllwert oben und unten 200 Pixel an. Zurück zum FAQ-Raster haben wir gesehen, dass die vierte Spalte kleiner ist als die zweite Spalte. Also passe ich die Spaltengröße auf 0,5 an. Jetzt müssen wir für jede Spalte einen Dialog erstellen. Also die Auswahl von FAQ-Raster und Gradient. Da haben wir's. Es geht also automatisch in die vierte Spalte. Jetzt unterrichte ich den Klassennamen für diesen Diblock als Vertreter des FAQ-Abschnitts, ebenso wie er aussieht, um die Titel zu halten. Jetzt habe ich den Abschnitt mit dem Titel rep aus dem Blockbereich kopiert , da hier das gleiche Styling folgt. Jetzt erstelle ich einen weiteren Inhaltsbereich für Diblock-Produkte , der eine Drop-down-Liste enthalten soll. Jetzt gebe ich den Klassennamen dafür als FAQ-Inhaltsbereich an. Ich prahle mit dem Titel des FAQ-Abschnitts. Um der zweite Dev-Blog zu sein, ziehe ich ihn noch einmal unter die Titel der FAQ-Abschnitte. In der zweiten Spalte haben wir den FAQ-Inhaltsbereich des Blocks benotet. Im Stahlblock fügen wir eine Dropdown-Liste hinzu. Bei der Auswahl des FAQ-Inhaltsbereichs suche ich also nach Grabbed , sodass das Drop-down-Menü darin erstellt wurde. Niemand erweitert dies als Dropdown. Standardmäßig haben wir alles, was für die Dropdownliste benötigt wird. Wir haben eine Drop-down-DOE und eine Drop-down-Liste. Jetzt gehe ich zurück zum Grub Down, um den vollen Abstand dieses übergeordneten Elements einzunehmen. Und wenn ich unter die Größe gehe, gebe ich die Breite auf 100% an, sodass sie die volle Breite einnimmt. Lassen Sie uns nun den Klassennamen, ein Produkt, dieses Drop-down-Menü als Akkordeon-Objekt ändern . Jetzt wähle ich den Drop-down-Hund aus. Wir wollen den Inhalt in der Dropdownliste haben und der Hund wird es tun, um das Feld auszufüllen. Und diesen eingegebenen Bereich anklickbar machen. Wir müssen die Anzeigeeinstellung auf Flexbox ändern. Lassen Sie uns diesen Drop-down-Hund umbenennen, um Akkordeon doppelt zu machen. Eines sollten Sie beim Erstellen beachten: Wir bereiten unser Drop-down-Menü so vor, dass es zusammenbricht. Wir möchten, dass unsere Interaktion hinter dem Schalter zusammenbricht , um die Antwort zu verbergen. Da wir das brauchen, fügen wir hier eine Höhe hinzu , die wir später verwenden werden, um diese Antwort zu verbergen. Also gebe ich hier als Pixel an. Jetzt richte ich den Inhalt auf die Mitte aus. Da wir diesen Schalter bereits kennen, bleiben wir bei unseren Fragen. Stellen wir also eine Frage und sagen wir, ich muss die Typografie für diese Frage ändern. Ich ändere die Schrift in Poppins. Warten Sie auf 500 mittlere Größe mit 30 Pixeln und einem Bindestrich in Höhe, Breite 1.2. Ich ändere die Farbe in die Sekundärfarbe. Lassen Sie uns nun die Klasse für diesen Textblock ändern. Sie eine Akkordeon-Frage. Als nächstes willkommen in der Drop-down-Liste. Wir können den Inhalt im Drop-down-Menü nicht sehen. Also wähle ich das Akkordeon-Objekt und gehe zu den Einstellungen und wähle unter Domain anzeigen. Also der Standardinhalt dieser Dropdownliste raus. Aber das wollen wir natürlich nicht. Dies geschieht jedoch , weil die Standardeinstellung für die Dropdownliste auf absolute Position gesetzt ist. Dies ist ideal, wenn Sie eine Navigationsleiste verwenden, z. B. wenn Sie ein Drop-down-Menü erstellen. Aber das brauchen wir nicht. Deshalb wollen wir, dass unsere Antwort Platz beansprucht und nicht aus dem Dokumentenfluss entfernt wird. Also werden wir hier ein paar Änderungen an unserer Position vornehmen . Ändern wir es auf statisch. Und zweitens müssen wir sicherstellen , dass die Anzeigeeinstellung gesperrt ist. Lassen Sie uns nun die Hintergrundfarbe auf Weiß ändern. Das Ego, das Akkordeon-Objekt. Stellen wir das auf Overflow hidden ein. Und das ist hier ein wichtiger Punkt, da wir Inhalte verstecken wollen , die außerhalb dieses Bereichs verbreitet werden. Also, wir haben all die unnötigen Dinge gemacht, die für den FAQ-Bereich und für die Drop-down-Liste benötigt werden. In der nächsten Lektion behandeln wir die Animation, die für die Dropdownliste erstellt werden muss . 31. FAQ-Abschnitt – Teil 2: In der vorherigen Lektion haben wir die Grundeinstellungen, weder für den FAQ-Bereich, das Drop-down-Menü vorgenommen. In dieser Lektion werden wir uns mit der Animation befassen. Für die Dropdownliste muss etwas getan werden. Das heißt, den Pfeil beim Öffnen des Inhalts zu drehen und den Pfeil beim Schließen wieder zurück zu drehen. Außerdem werden wir den Inhalt zu einer zufälligen Liste hinzufügen. Mal sehen, wie wir das machen werden. Wir werden mit einem Verstoß etwas zum Laufen bringen . Der Schlüssel hier ist der entsprechende Artikel. Stellen Sie sicher, dass das Akkordeon-Objekt im Navigator einen Selektor damit es korrekt zu unserem Interaktionspanel weitergeleitet wird. Da wir ein Element verwenden und es ausgeraubt haben, können wir ein Triggerspezifisches Do it, Dropdown, das hier geöffnet wird, auswählen . Wir werden zwei verschiedene Dinge tun, Menü oder Kurven, und das entsprechende Objekt erwartet das Menü, das unserem Ende am nächsten kommt. Lassen Sie uns die erste Animation erstellen, wenn ein Menü geöffnet wird. Und ich werde es S According Open nennen. Und wie wir wissen, wollen wir diese Strenge beleben. Und genau das wollen wir sicherstellen, dass es derzeit im Navigator ausgewählt ist. Das ist das Akkordeon-Objekt. Also werden wir reingehen und eine Aktion hinzufügen, um die Größe festzulegen. Da werden wir runter gehen und die hohe Sorgfalt auf 80 Pixel setzen. Das bedeutet, dass wir den Inhalt in der gleichen Größe wie im Umschalter reduzieren. Wir wissen bereits, dass die Doppelgröße 80 Pixel beträgt. Und da wir den Überlauf ausgeblendet haben, wird die Antwort zunächst nicht angezeigt. Und deshalb haben wir es auf Overflow Hidden gesetzt. Lassen Sie uns zunächst diesen Tipp als Anfangszustand festlegen , sodass er zunächst geschlossen ist. Um unser Akkordeon nun wirklich individuell zu gestalten, drehen wir das Dropdown-Symbol, den Pfeil hier, wenn es geöffnet ist. Jetzt, wo das Symbol ausgewählt ist, gebe ich den Namen als entsprechendes Symbol an. Jetzt wähle ich wieder das Akkordeon-Objekt aus. Ich gehe zur Interaktion. Wenn Sie zum Menü kommen, öffnet sich. Und jetzt stellen Sie sicher, dass wir das entsprechende Symbol ausgewählt haben. Und lassen Sie uns mit dieser ersten Aktion eine Rotation hinzufügen. Und wir werden die anfängliche Z-Achsenrotation festlegen. Wir werden es von hier aus auf Null Grad drehen. Hier wird es beginnen. Die Änderungen, die wir vorgenommen haben, sollten sich auf die Klasse auswirken. Stellen Sie also sicher, dass wir die Klasse und den Effekt ausgewählt haben und wählen Sie auch die Option im Glas als Wanli-Kinder in dieser Klasse. Das heißt, wir möchten, dass es das Symbol dreht, nur vier Symbole, die sich darin befinden. Jetzt drüben im Navigator lasse ich das entsprechende Objekt auswählen. Und lassen Sie uns eine Aktion als Größenanimation hinzufügen. Das heißt, die Akkordeongröße in der Höhe zu öffnen , wie es automatisch ist. Der Grund für die Angabe von ATO ist das Element Expand, äh, basierend auf dem Inhalt darin. Gehen wir nun zurück zum Kollapseffekt. nun unter der Aminogruppe versus Lassen Sie uns nun unter der Aminogruppe versus die Aktion ausführen und eine Animation starten. Jetzt gebe ich den Namen als Akkordeonhandschuhe an und wähle die Aktionsseiten aus. Also nun gebe ich gemäß Element als Selektor die Höhe als AD-Pixel an. Es wird also die Höhe der Größe des entsprechenden, entsprechenden Symbols ausgewählt. Ich lasse die Rotation auswählen. Schon wieder. Ich gebe den Z-Achsenwert auf Null. Also haben wir das entsprechende offen und entsprechend eng gemacht. Und jetzt komme ich zur Drop-down-Liste Ich füge einen Absatz hinzu, der den Inhalt der Drop-down-Liste enthält. Lassen Sie uns nun alle Links zu den Dropdownlisten löschen. Um den Absatz anzuzeigen. Ich wähle den entsprechenden Artikel aus und die Einstellung, die ich wähle den Inhalt der Dropdownliste anzeigen , wird hier angezeigt. Jetzt ändere ich den Inhalt dieses Abschnitts. Jetzt habe ich das Akkordeon-Doppel ausgewählt. Um den Abstand auf der linken Seite zu reduzieren, ändere ich den Füllwert oder den linken Wert auf Null. Ich kopiere dieselbe Dropdownliste zweimal. Lassen Sie uns nun eine Vorschau davon anzeigen. Beim Erweitern des H aus der Dropdownliste. Das ist eine Diskrepanz und der Abstand. Also müssen wir es korrigieren. Zurück zu einem Fehler, den wir gemacht haben, ist, dass wir einen Discman voneinander getrennt haben, während wir beim Öffnen im geschlossenen Zustand den Abstand angeben müssen und ihn verworfen haben. Also nochmal, im Akkordeon-Element mit einer Auswahl von Akkordeon-Schalter, und lassen Sie uns den Füllwert auf Null ändern. Also auch in einem geschlossenen Zustand wurde der Abstand und dieser Mann verstanden. Und jetzt lassen Sie uns eine Vorschau davon anzeigen. Jetzt funktioniert es perfekt. In dieser Lektion haben wir also die erforderliche Animation fertiggestellt, die ich für die Dropdownliste benötigt habe. In der nächsten Lektion werden wir alles erledigen, was ich für den FAQ-Bereich benötigt habe. 32. FAQ-Abschnitt – Teil 3: Diese Lektion wird der letzte Teil des FAQ-Abschnitts sein. Wir haben eine unnötige Struktur für den FAQ-Bereich und auch die Animation für die Dropdownliste benötigt. In dieser Lektion werden wir alles vervollständigen, was für den FAQ-Bereich erforderlich ist. Das ist das Hintergrundbild davon. Und ein Teil der Anpassungen, die daran erforderlich waren. Mal sehen, wie wir das machen werden. Wir müssen die Gleichung dieser Dropdownlisten ändern. Also ändere ich die Fragen. Und wir brauchen auch noch einen passenden Artikel. Also nochmal, ich dupliziere es oder wir haben oben und unten keinen Rasterabstand . Bei der Auswahl des FAQ-Inhaltsumschlags gebe ich den Füllwert oben und unten 200 Pixel an. Und für links und rechts gebe ich es als AD-Pixel an. Jetzt brauchen wir nur noch, um ihm ein Hintergrundbild zu geben. Bei der Auswahl der FAQ-Inhalte gehe ich also zu den Hintergründen und ändere die Farbe an unsere Anforderungen. Sehen wir uns den Randradius vor dem Pixel an. Jetzt stelle ich mir Gradient vor. Lassen Sie uns ein Hintergrundbild in den Optionen hinzufügen. Wählen Sie die Farbe aus der Größe aus und stellen Sie die Position so ein, dass sie sich in der Mitte befindet. Jetzt wähle ich das gewünschte Bild aus. Jetzt können wir in dem Absatz sehen , dass es sich um eine Hintergrundfarbe handelt, wir müssen sie ändern. Selbst bei der Auswahl des Abschnitts konnten wir sehen, dass die Hintergrundfarbe transparent ist, also muss es etwas anderes sein. Also wähle ich im Navigator die Dropdownliste aus. Darin. Wir können sehen, dass der Hintergrund etwas Farbe hat. Und jetzt mache ich es transparent. Lassen Sie uns jetzt eine Vorschau anzeigen. In der Vorschau können wir die Dropdownliste einfach mit einer Tinte erweitern und reduzieren. Und wir müssen auch den Pfeil unten ändern. Mit der Auswahl des Aufnahmesymbols und anderer Topografien ändere ich also Aufnahmesymbols und anderer Topografien die Farbe an unsere Umgebung. Jetzt. Nochmals, ich schaue mir eine Vorschau an. Um zu sehen, ob es geändert wurde. Wir müssen diese geringfügige Anpassung zwischen den beiden Spalten vornehmen . Also ändere ich im FAQ-Raster unter dem Bearbeitungsraster die Spaltengröße auf 0,6. Und geben wir dem Spaltenabstand 60. Im Vorschaumodus können wir also den Abstand zwischen den beiden Spalten sehen. Wir haben also den gesamten FAQ-Bereich abgeschlossen, aber in der nächsten Lektion werden wir uns mit dem Newsletter-Bereich befassen. Schauen wir uns das an. 33. Newsletter Abschnitt: In dieser Lektion erfahren Sie, wie Sie ein Abonnement erstellen, von dem aus wir die E-Mail-ID angeben, um den Newsletter zu abonnieren, damit wir den Newsletter an unsere Startseite senden können. Kommen wir nun zur Planung, ganz oben werden wir einen Titel und einen Untertitel mit dem Namen Newsletter haben und unseren Newsletter abonnieren. Und viele haben es getan. Wir verwenden das Anmeldeformular, das ein Eingabeformular enthält, um die E-Mail-ID zu erhalten. Und auf der rechten Seite haben wir eine Schaltfläche zum Abonnieren. Jedes Ding wird diesen aufrechten Diblock verwenden. Lassen Sie uns in die Lektion zur Entwicklung dieses Designs eintauchen. Bevor wir mit der Lektion beginnen, wollen wir uns das gemeinsame Box-Modell ansehen, das für alle Abschnitte innerhalb des Körpers angewendet wird . Wir müssen einen Abschnitt hinzufügen und wir müssen den entsprechenden Klassennamen für diesen Abschnitt angeben. Als nächstes folgt der Abstand für diesen Abschnitt. Das heißt, wir müssen den oberen und unteren Füllwert dafür angeben. Nachdem wir darin einen Abschnitt erstellt haben, müssen wir einen Container hinzufügen und der Klassenname sollte für diesen Container angegeben werden. Jetzt können wir das Element innerhalb des Containers hinzufügen, das für den erforderlichen Abschnitt geeignet ist. Eine andere Person mit einer schnellen Geldstrafe, ich suche nach einem Abonnementformular. Beim Erweitern des Abonnementformulars konnten wir einen Container sehen, konnten wir einen Container sehen in dem er als zentrierter Container benannt wurde. Wie bei dem Design, das wir gesehen haben, gibt es einen Titel und einen Untertitel. Wir werden den Titelabschnittsstil verwenden , den wir bereits im vorherigen Abschnitt gemacht haben. Da ich diesen Abschnittstitel aus dem Preisbereich kopiere und ihn im Abonnementformular verwende. Also wird auch hier derselbe Stil verwendet. Lassen Sie uns nun den Titel und einen Untertitel für das Anmeldeformular ändern . Wir haben diesen Titelabschnitt abgeschlossen, um zum Abonnementformular zu gelangen, wo er einen mittleren Container enthält. Ich entscheide mich dafür, dass wir beim Erweitern dieses mittleren Containers die Elemente sehen können , die im Abonnementformular verwendet werden. Darin haben wir eine Überschrift, aber gemäß unserem Design hat mit keine der Überschriften. Also lösche ich es. Als Nächstes. Standardmäßig gibt es einen Absatz. Auch hier benötigen wir keinen Absatz wie im Design. Also lösche ich das wieder in den Flakes des Abonnementformulars. Es gibt einen anderen, der mit dem Namen Subscribe Form Input Wrapper entwickelt wurde , bei dem dieser Wrapper die E-Mail und das Eingabefeld enthalten soll . Und wenn Sie dies erweitern, gibt es eine Feldbezeichnung und eine Formulareingabe für ein Abonnementformular. Wie beim Design haben wir nichts von dem Etikett. Also datiere ich dieses Feldlabel. Jetzt haben wir nur das Eingabetextfeld und eine Schaltfläche. Jetzt wähle ich die Schaltfläche Senden um den Klassennamen für diese Schaltfläche anzugeben Ich wähle die Schaltfläche für den vorhandenen Klassennamen. Auf der Leinwand. Wir konnten sehen, dass das in dieser Tastenklasse gespeicherte Styling an diese Schaltfläche vererbt wird. Als Nächstes müssen wir uns auf die Formulareingabe konzentrieren. Bei der Auswahl der Formulareingabe gehe ich also an eine andere Grenze im Design, wir haben eine Zeile in der unteren Zelle. Ich wähle den Rand unten aus. Ich gebe die Farbe an, wie bei unserem Design, wir brauchen nur eine Linie am unteren Rand, aber keine anderen drei. Also wähle ich drei weitere Flaschen. Ich wähle den Stil statt keins. Um den Abstand bei der Auswahl des Abonnement-Formulars zu gewinnen , geben Sie ein. Ich nehme einen weiteren Abstand und gebe den Wert für den rechten Rand als 20 Pixel an, um die volle Breite zu erhalten. Für diese Formulareingabe müssen wir den Wrapper auswählen , also den Subscribe Form Input Wrapper. Und eine andere Größe gebe ich der Breite 200 Personen. Die Breite wird also für hundert Personen belegt sein. Wir haben die Größenanpassung an die Breite vorgenommen. Jetzt wähle ich die Eingabe für das Abonnement-Formular aus. Und ich gehe zu dieser Einstellung für das Eingabefeld. Und wir konnten ein Textfeld mit dem Namen Platzhalter sehen . Was sind die? Stöbern Sie auf unserer Website. Wir müssen angeben, was der Zweck dieses Textfeldes ist . Um das zu tun, verwenden wir diesen Platzhalter. In diesem Platzhalter tippe ich als Geben Sie Ihre E-Mail-Adresse ein. Auf der Leinwand. Dieser Inhalt, den wir in der Einstellung eingegeben haben , wird hier repliziert. Und jetzt brauchen wir nur noch die Art des Diagramms oder diesen Platzhaltertext anzugeben. Ich wähle dieses Mal kursiv. Wir haben diese Kachelung für den Platzhaltertext vorgenommen. Also müssen wir den Staat festlegen. Jetzt gehe ich zum Selektor und wähle den Bundesstaat aus, in den ich den Platzhalter setzen soll. Der Zweck der Auswahl dieses Platzhalters besteht darin, dass wir die Platzhalter-Häkchen getrennt vom Typ zum Text gestalten können die Platzhalter-Häkchen . Der Titeltext erbt das typografische Design des Standardstatus. Jetzt haben wir den Status des Platzhalters ausgewählt, da wir für diesen Platzhalter bereits den Typ des Diagramms G erstellt haben . Kommen wir nun zum neunten. Hast du den Abstand zwischen dem Titel und einem Formular bekommen? Ich wähle denselben Toncontainer und gebe den Füllwert oben auf 20 Pixel, da dieses Formularprotokoll viel Platz beansprucht. Also muss ich die Breite dieses Formularprotokolls auf 600 Pixel anpassen . Die Breite ist also erheblich reduziert. Wir müssen die Hintergrundfarbe festlegen, wobei die Farbauswahl , die ich gebe , einen Hexadezimalwert hat. Und um die abgerundete Ecke zu erstellen, gebe ich den Radiuswert unter den Rändern als 20 Pixel an. Dass Textfelder und Schaltflächen so nah an seinem H liegen, wir überall den Abstand angeben müssen , zitiert die Auswahl der Formel. Ich gebe den Füllwert oben und unten als 30 Pixel und einen Wert für das Padding links und rechts als 40 Pixel an. Die Farbe dieses Textfeldes ist als Designer nicht geeignet. Also wähle ich diese Eingabe für das Abonnementformular aus. Ich nehme einen anderen Hintergrund und wähle die Farbe, die transparent sein soll. Lassen Sie uns nun die Höhe dieser Formulareingabe auf die Höhe der Schaltfläche unter der Größe anpassen. Geben wir ihm einen Höhenwert als Pixel. Um den Abstand wieder zu gewinnen, machen wir den Titelbereich und das Formular. Ich wähle den mittleren Container und für den Füllwert oben ändere ich den Wert S, 25 Pixel. Lassen Sie uns diese Formularrechtsklasse in Formularblock abonnieren umbenennen. Jetzt werde ich es in einem Vorschaumodus in der Suite veröffentlichen. Im Vorschaumodus konnte ich sehen, dass wir uns weiterentwickelt haben, wie in unserem Design und alles funktioniert sehr perfekt. Wir haben das Anmeldeformular entwickelt , um sich anzumelden und den Newsletter zu erhalten. In der nächsten Lektion werden wir sehen, wie Sie dieses Kontaktformular erstellen. 34. Contact – Teil 1: In dieser Lektion werden wir uns mit dem Abschnitt „Kontaktformular“ befassen. Bevor wir darauf eingehen, schauen wir uns die Planung dafür an. Das wird ein Raster mit den beiden Spalten sein. In der vierten Spalte haben wir einen Titel und einen Untertitel, die die Verwendung dieses Abschnitts angeben. Und unter diesem Titel werden wir eine Reihe von Kontaktdaten mit mir für eine Adresse haben . Und wenn wir zur zweiten Spalte kommen, haben wir eine Reihe von Eingabefeldern mit Name, E-Mail und Firma für MSH. Und mit all diesen Details können wir den Künstler kontaktieren. Jetzt haben wir eine Vorstellung vom Abschnitt mit dem Kontaktformular. Mal sehen, wie wir dieses Design entwickeln werden. Lass uns weitermachen. Bevor Sie mit dem Unterricht beginnen. Schauen wir uns das gemeinsame Box-Modell an, das für alle Abschnitte innerhalb des Körpers angewendet wird . Wir müssen einen Abschnitt hinzufügen und den entsprechenden Klassennamen für diesen Abschnitt angeben. Als nächstes folgt der Abstand für diesen Abschnitt. Das heißt, wir müssen den oberen und unteren Füllwert dafür angeben. Nachdem wir darin einen Abschnitt erstellt haben, müssen wir einen Container hinzufügen und der Klassenname sollte für diesen Container angegeben werden. Jetzt können wir das Element innerhalb des Containers hinzufügen , das für den erforderlichen Abschnitt geeignet ist . Zuerst erstelle ich einen Abschnitt. Geben wir ihm einen Klassennamen für den Abschnitt als Abschnitt für das Kontaktformular. Und innerhalb des Abschnitts erstellen wir einen Container. Ich gebe den Klassennamen für diesen Behälter als Behälter selbst, als das vorhandene Glas. Jetzt erstellen wir im Container einen Blog. Geben wir den Klassennamen für diesen Diblock S an, Ansprechpartner für das Kontaktformular. Wie beim Design haben wir ein Gittermodell. In diesem Mitarbeiter erstellen wir also ein Raster. Und ich widme einen Teil der Straße. Ich gebe den Wert für den Abstand als 50 Pixel an. Im Design haben wir bereits gesehen die erste Spalte kleiner ist als die zweite Spalte. Also muss ich das Raster mit der Auswahl von Raster bearbeiten und die Spalte anpassen. Jetzt müssen wir die Klasse für dieses Grid umbenennen. Geben wir ihm einen Klassennamen als Kontaktformularraster. Mit der Auswahl des Kontakttelefonrasters füge ich ein Div hinzu, das in der ersten Spalte erstellt wird. Geben wir ihm einen Klassennamen für diesen Mitarbeiter mit den Details des diblock S Contact Formulars. Jetzt erstelle ich ein weiteres Div, das in der zweiten Spalte erstellt wird. Geben wir ihm einen Klassennamen für dieses Diblock S-Kontaktformular, rep. Denn dieses Div soll ein Formular mit den eingegebenen Passungen erstellen. Wir haben den Abstand für den Abschnitt nicht angepasst. Also wähle ich den Abschnitt mit dem Kontaktformular aus und gebe den Füllwert oben und unten, s 100 in der ersten Spalte. Zuerst haben wir den Titeltopf mit einem Untertitel und dem Titel, da wir einen Abschnitt mit vielen Titeln erstellt haben. Also hier lassen Sie uns den Titel aus dem Anmeldeformular kopieren. Und ich dupliziere n und ziehe diesen Abschnittstitel in den Detailumbruch des Kontaktformulars. Dieser Titelbereich ist hier größer. Wir konnten im Selektor sehen dass wir eine Unterklasse namens Center verwendet haben. Denn in der vorherigen Sache, das ist ein Abonnementformular, haben wir eine Verwendung dieses Titels in die Mitte gestellt. Wir haben einen anderen Klassennamen verwendet, Center. Aber hier bezeichnen wir das. Lassen Sie uns diese Mittelklasse löschen. Dieser Titelinhalt wird also nach links eingerückt. Nehmen wir nun den Inhalt von zwei Untertypen und den Titel, wie in unserem Design. Wir helfen bei der Fertigstellung des Titels und müssen dann die Kontaktdaten angeben. Also mit der Auswahl des Kontakts aus der Detailratte und der Erstellung eines Divs, der größer sein wird. Und beim Titel. Geben wir ihm einen Klassennamen für den Stahlblock als Kontaktdetailelement. Wir haben den Abstand zur Speicherung der Kontaktdaten festgelegt. Und in diesem Kontaktelementdetail erstellen wir eine Überschrift. Wählen wir den Überschriftstyp S, H drei. Ich ändere den Inhalt der Überschrift auf Mai. Und jetzt müssen wir die Typografie für diese Überschrift ändern . Jetzt ändere ich den Klassennamen für diese Überschrift als detaillierten Titel. Wir haben eine Überschrift erstellt und dann benötigen wir nur noch einen Link, der zur E-Mail-ID-Zelle in einem Kontaktdetailelement führt der zur E-Mail-ID-Zelle in und einen Link erstellt. Lassen Sie uns also den Textlink zur Hauptdarstellerin ändern. Um zur Typografie für diesen Link zu kommen, wähle ich die Schriftart als Poppins, Gewicht mit 400 normal und eine Größe mit dem Pixel, dass die Schriftfarbe dafür die Inhaltsfarbe aus dem Farbfeld ist. Und die Höhe wird 1,2 Bindestrich sein. Oder wir brauchen diesen Hyperlink nicht. Also gehe ich zu diesem Chat und wähle den keinen aus. Da wir den Link verwendet haben, können wir ihn einfach so belassen. Wir müssen den Übergang für diesen Link vorsehen. Unter Effekte wähle ich den Übergang und ich möchte auch auswählen, um welche Art von Übergang es sich handeln soll. Ich habe die Schriftfarbe Typ S gewählt. Wir müssen der Schriftfarbe einen Übergang zu diesem Mai-Link geben . Jetzt muss ich in der Branche den Bundesstaat auswählen , der der gesamte Staat ist. Während wir den Mauszeiger bewegen, müssen wir also die Schriftfarbe ändern. Jetzt mache ich eine andere Typografie und wähle die Farbe für die Primärfarbe dieser Uhr aus. Während ich den Mauszeiger über den Link bewege, ändert sich die Farbe. Lassen Sie uns nun in diesem Gen nach keins suchen. Jetzt muss ich den Klassennamen für diesen Link ändern. Der Klassenname ist ein Kontaktlink. Wir müssen den Abstand am unteren Rand dieses Kontaktartikels angeben, um den erforderlichen Abstand für die nächsten Kontaktdaten zu erhalten . Also wähle ich das Element mit den Kontaktdetails aus und gebe den Füllwert unten an , S, 20 Pixel. Das gleiche Design wird für den kommenden Kontakt mit ihm wegen der Auswahl dieses Verhaltens verfolgt , entweder der Artikel selbst, ich dupliziere ihn. Lassen Sie uns diese Überschrift so ändern, dass sie die mit der Telefonnummer verknüpften Texte bildet. Jetzt dupliziere ich dieses Kontaktdetailelement und ändere die Überschrift in Adresse. Hier verwenden wir die Adresse sodass wir den Textlink nicht benötigen. Also lösche ich das. Unter diesem Kontaktdetailpunkt erstellen wir einen Textblock. Der nächste Block ist hier größer und ich gebe den Adressinhalt wie in ihrem Design an. Jetzt müssen wir die Typografie für diesen Textblock ändern. Jetzt ändere ich den Klassennamen des Textblocks, S, Adresse, Detail. Wir haben die Kontaktdaten , die in der ersten Spalte erforderlich sind, fertiggestellt . In der nächsten Lektion werden wir uns in der zweiten Spalte mit der Erstellung von Kontaktformularen befassen. Mal sehen, wie wir das machen werden. 35. Contact – Teil 2: Wir haben die Kontaktdaten in der ersten Spalte des Rasters fertiggestellt . In der zweiten Spalte erstellen wir ein Kontaktformular, Felder zusammen mit dem Namen, der E-Mail-Adresse, der Firma, der Telefonnachricht und der Schaltfläche. In dieser Lektion werden wir sehen, wie dieses Kontaktformular wie in unserem Design entwickelt wird. Lassen Sie uns näher darauf eingehen. Wir haben diese Kontaktformularfelder bereits mit der Auswahl von acht Feldern erstellt . Ich suche nach einem Formularblock. Jetzt wird dieses Formularprotokoll in diesem Kontaktformular erstellt . Felder werden standardmäßig in diese Formularverzögerung eingeschlossen Wir haben die Vorlage mit Name, E-Mail-Adresse zusammen mit der Schaltfläche zum Senden. Oder wenn wir dieses Kontaktformular erweitern, könnten wir diesen Formularblock finden. Auch bei der Erweiterung konnten wir ein Formular für den Block, eine Erfolgsmeldung und eine Fehlermeldung finden . Dies ist die Standardvorlage für diesen Formularblock. Jetzt komme ich zu dem Formular und erweitere es hier. Wir könnten eine Feldbezeichnung und ein Textfeld finden. Und zusammen mit dem Absenden-Button haben wir jetzt gesehen, was all die Dinge hier im Formular sind. Ich werde einen Diblock erstellen in dem sich das Textfeld befindet. Jetzt ziehe ich den Diblock oben. Jetzt platziere ich die Feldbezeichnung und das Textfeld in diesem neu erstellten Blog. Geben wir ihm einen Klassennamen für diesen Div Log S Formular-Eingabe-Wrapper. Jetzt erweitere ich diesen Formulareingaben-Wrapper. Hier. Ich wähle dieses Textfeld. Geben wir ihm einen Klassennamen für dieses Textfeld als Eingabefeld im Design, wir haben das Label nicht. Also lösche ich diese Feldbezeichnung. Das gleiche Design wird für alle anderen Textfüllungen verwendet. Also dupliziere ich den Formulareingaben-Wrapper, bis ich ihn brauche. Die Änderungen, die wir in diesem Eingabefeld vornehmen, wirken sich also diesem Eingabefeld vornehmen, wirken sich auf alle anderen Eingabefelder aus. Jetzt wähle ich den ersten Formulareingabe-Wrapper und ich wähle dieses Eingabefeld aus. Jetzt gehe ich unter die Grenzen. Wir brauchen ein Endergebnis. Also wähle ich das Endergebnis und ich wähle den Stil als solide. Ich gebe die Farbe wie in unserem Design an. Auf der Leinwand könnten Sie also sehen, dass das Styling auf alle anderen Eingabefelder angewendet wird. Eigentlich brauchen wir keine Box. Also müssen wir alle anderen Ränder außer dem unteren auswählen. Ich muss den Stil wählen und keinen. Also wähle ich zuerst den richtigen Rand und wähle den Stil ohne. Das Gleiche gilt für andere Modelle. Jetzt wird die unterste Zeile auf der Leinwand erstellt. Jetzt müssen wir ihm einen Platzhalter für diese Eingabefelder geben. Mit der Auswahl des Eingabewillens gehe ich zu den Einstellungen unter den Textfeld-Einstellungen, ich gebe dem Platzhalter einen Namen. Lassen Sie uns die Typografie für diesen Platzhalter herausarbeiten. Unter der Typografie wähle ich die Schriftart als Poppins-Leder, warte vor Normalität und Größe mit 20 Pixeln und der Höhe ist 1.2 Bindestrich. Lassen Sie uns nun die Schriftfarbe für diese S-Inhaltsfarbe aus diesem Keil angeben. Das gleiche Verfahren wird für alle anderen Textfelder angewendet. Ich muss dafür sorgen, dass alle Platzhalter-Takes nach links zeigen. Im Abstand gebe ich also den Wert des linken Abstands auf Null. Der Abstand zwischen diesen Textfüllungen reicht nicht aus. Also wähle ich den gesamten Formulareingabeumbruch und gebe den Randwert unten als 40 Pixel an. Jetzt wähle ich die Schaltfläche „Senden“. Jetzt gebe ich in der Auswahl den Klassennamen für die Schaltfläche zum Senden als vorhandene Klassenschaltfläche an. Das Styling, das in dieser Klassennamen-Schaltfläche gespeichert ist , wird an die Submit-Schaltfläche vererbt. Im Design haben wir offline nicht die volle Breite für jeden Text, der fehlschlägt. Also müssen wir es auf die Hälfte kürzen. Also wähle ich diese Formulareingabe zusammen mit der vorhandenen Klasse aus. Ich erstelle eine neue Klasse mit dem Namen Halfwidth. Jetzt gebe ich unter der Größe den Wert für die Breite als 50 Prozent an. Die Linie wird auf 50 Prozent kürzer. Jetzt wähle ich den zweiten Formulareingabe-Wrapper aus und verwende dafür den vorhandenen Klassennamen damit das Styling auf dieses Formulareingabe-Grep angewendet wird. Das gleiche Verfahren wird für dieses Unternehmen und ein Telefon angewendet. Wir benötigen eine volle Linienbreite für diese Nachricht, also ändere ich sie nicht. Wir müssen dieses Eingabefeld so einrichten, dass es sich nebeneinander unter dem Formular befindet und einen Diblock erstellen. Ich ziehe den Diblock oben. Jetzt gebe ich den Klassennamen dafür als Umbruch der Eingabefelder an. Jetzt ziehe ich den ersten Eingabe-Wrapper in diesen Eingabefeld-Rep. konnten wir die Änderungen wie gewünscht vornehmen. Jetzt wird die Auswahl der Eingabefelder unter dem Layout zusammengefasst. Ich wähle Flex unter dem Display. Das gleiche Verfahren wird für die beiden anderen Textfelder angewendet . Nun unter das Formular und erstelle einen Hund, Hund und ziehe ihn unter die Eingabefelder rep. Jetzt gebe ich im Selektor den Klassennamen für diesen Diblock als die vorhandenen Klasseneingabefelder rep an. Ziehen wir nun die nächsten beiden Felder , also Firma und Telefon, hinein. Wir müssen den Abstand auf der linken Seite für alle Eingabefelder festlegen. Ich wähle diesen Formulareingabe-Wrapper unter dem Abstand aus. Ich gebe den Randwert für die linke Seite als 40 Pixel an. Die Änderungen, die wir hier vorgenommen haben, werden sich also auch auf alle anderen Bereiche auswirken. Jetzt ist die Schaltfläche nicht richtig ausgerichtet, daher wähle ich die Schaltfläche Senden. Wenn ich eine der Änderungen an dieser Schaltflächenklasse vornehme, wirkt sich dies auf die anderen Schaltflächen aus. Also benote ich und noch einen Klassennamen, Formularschaltfläche. Jetzt gebe ich den Wert für den linken Rand für diesen Button als 40 Pixel an. Jetzt ist es richtig ausgerichtet. Wir werden viele Worte für diese Botschaft haben. Dieses spezielle Lehrbuch reicht also nicht aus. Unter diesem Formulareingabe-Wrapper erstelle ich also einen Elementtextbereich. Jetzt gebe ich den Platzhaltertext als Nachricht. Wir haben den Textbereich erstellt, damit er diese Nachricht nicht benötigt , wenn ich sie lösche. Geben wir ihm nun einen Klassennamen für diesen Textbereich als vorhandenes Eingabefeld für den Klassennamen. Das Styling wird also auf diesen Textbereich angewendet. Da wir für diesen Nachrichtenbereich etwas mehr Höhe benötigen, erstelle ich einen weiteren Klassennamen zusammen mit dem Eingabefeld als Textbereich. Lassen Sie mich den Höhenwert als 110 Pixel angeben. Aber ich brauche etwas mehr Höhe, also ändere ich den Wert 240 Pixel. Wir haben es jetzt getan. Aber bei der gesamten Eingabefüllung ist der Platzhaltertext so nah an der Zeile. Dazu müssen wir einen Abstand zwischen der Zeile und dem Platzhaltertext festlegen. Also wähle ich dieses Eingabefeld aus, ich gebe den Füllwert oder das untere S 15 Pixel, aber ich benötige etwas mehr Abstand. Also nochmal, ich ändere den Wert auf 20 Pixel. In dieser Lektion haben wir also das Kontaktformular zusammen mit unnötigem Styling für alle Felder ausgefüllt. In der nächsten Lektion erfahren Sie, wie Sie eine Hintergrundfarbe für dieses Kontaktformulardetail und ein Kontaktformularfeld sowie die Ausrichtung für diese beiden erstellen eine Hintergrundfarbe für dieses Kontaktformulardetail und ein Kontaktformularfeld sowie , wie im Design. Und zum Schluss werden wir uns mit der Erfolgsmeldung befassen, einer Fehlermeldung für dieses Formular einer Fehlermeldung für dieses Formular. Lassen Sie uns näher darauf eingehen. 36. Contact – Teil 3: In den letzten beiden Lektionen haben wir die Kontaktformulardetails und die Felder für ein Kontaktformular ausgefüllt. In dieser Lektion werden wir die gesamte Entwicklung wie in unserem Design abschließen, zusammen mit der Hintergrundfarbe und -ausrichtung, Fehlermeldung und einer Erfolgsmeldung. Mal sehen, wie wir das machen werden. Die Kontaktformulardetails und die Felder des Kontaktformulars sind nicht zentriert ausgerichtet. Also wähle ich dieses Kontaktformularraster, eine weitere Ebene, ich wähle die Mittellinie aus. Wir müssen die Hintergrundfarbe für dieses Kontaktformular-Detail angeben. Also gehe ich unter den Hintergrund und wähle die Farbe als Intervall-Figma-Design. Um die abgerundeten Ecken zu erstellen, gebe ich den Wert 40 Pixel für den Radius unter den Rändern an. Mit der Auswahl dieses Kontaktformulars gehe ich also auf einen anderen Hintergrund und gebe dieselbe Farbe an wie im Kontaktformular D. Und geben wir ihm einen Radiuswert 40 Pixel unter den Rändern Alle Eingabefelder haben eine Hintergrundfarbe in Weiß, aber wir müssen die Farbe wie im Hintergrund machen. Bei der Auswahl dieses Eingabefeldes gehe ich also unter den Hintergrund, unter der Farbe wähle ich S-Transplantation. Also jetzt wird das Eingabefeld, die Hintergrundfarbe, transplantiert. Und es nimmt auch die Farbe vom Hintergrund auf. Der Abstand für diesen Kontaktformular-Detail reicht bei der Auswahl der Schulden nicht aus. Ich nehme einen weiteren Abstand und gebe den Füllwert für den Desktop als 90 Pixel an. Das Gleiche gilt für den Boden. Ich gebe den Füllwert für links und rechts als 80 Pixel an. Geben wir dieselben Füllwerte für das Kontaktformularfeld an. Dennoch ist der Abstand für die Kontaktformularfelder rap nicht derselbe wie für den Detailumbruch des Kontaktformulars. Ich wähle das Raster aus, das ist das Kontakt-Formular-Raster. Eine weitere Schicht, bei der ich mich für Stretch entscheide, ist ausgerichtet. Wir konnten in den Details des Kontaktformulars sehen der Abstand eingepackt ist und der obere Teil mehr ist. Also ändere ich den oberen Füllwert auf 70 Pixel. Um den Abstand zwischen den einzelnen Eingabefeldern zu ermitteln, wähle ich den Formulareingabe-Wrapper wenn ich die Änderungen an dieser Klasse vornehme. Dieser Wert wird an alle anderen Eingabefelder vererbt. Jetzt, bei der Auswahl des Formulareingabewrappers, gebe ich den Randwert unten als 60 Pixel in jedem der Kontaktdetailelemente an, der Abstand sieht besser aus. Bei der Auswahl dieses Kontaktdetailelements mache ich den unteren Füllwert auf zehn Pixel verringere den Abstand zu allen anderen Detailelementen. Lass uns das veröffentlichen , um zu sehen, wie es funktioniert. Der Übergang für den Absenden-Button funktioniert einwandfrei, und der Übergang für den Stecker und das Telefon funktioniert auch im Grid. Gehen wir jetzt zurück. Unter dem Formularblock. Wir haben ein weiteres Div-Protokoll mit dem Namen Success Message. Nach erfolgreichem Absenden des Formulars benötigen wir eine Erfolgsmeldung. Und lass das Design tun. Ich habe die Erfolgsmeldung, das Protokoll, ausgewählt. Jetzt gehe ich abwärts und unter den Formularblock sitzend. Jetzt muss ich den Staat zum Erfolg führen. Jetzt komme ich zurück zu dieser Kachelung mit seiner Wahl. Lassen Sie mich die Typografie für diesen Inhalt ändern. Ich wähle das Telefon als Poppins. Die Farbe mit einer Sekundärfarbe aus dem Farbfeld. Sei die Größe zwischen den Pixeln. Um nun die Hintergrundfarbe zu ändern, mache ich einen anderen Hintergrund und wähle die Farbe als Grundfarbe für diese Uhr aus. Das Schwarz nicht, scheint gut zu sein. Also ändere ich die Schriftfarbe auf Weiß. Wir haben die Erfolgsmeldung beendet. Gehen wir zur Fehlermeldung im Navigator über. Ich wähle die Fehlermeldung aus. Und unter dem Setting setze ich die Bühne auf Fehler. Wenn also beim Absenden des Formulars ein Fehler auftritt, erhalten wir die Fehlermeldung. Lassen Sie uns diese Kachelung für diese Fehlermeldung durchführen. Geben wir nun den Schrifttyp für diesen Inhalt als Poppins und eine Größe mit 20 Pixeln an. Um den gesamten Abstand für diese Fehlermeldung zu erhalten, gebe ich den Füllwert oben und unten mit 20 Pixeln an. Und für den linken Füllwert gebe ich 20 Pixel an, um den Abstand zwischen der Senden-Schaltfläche und der Fehlermeldung zu ermitteln. Ich muss ihm einen Randwert geben. Geben wir ihm also oben einen Randwert von 20 Pixeln. Jetzt gebe ich die Schriftfarbe für diese Fehlermeldung der Sekundärfarbe aus dem Farbfeld. Um die korrekte Ausrichtung für diese Fehlermeldung vorzunehmen, wie in der Schaltfläche Senden und in den Eingabefeldern. Bei einer Auswahl von Fehlermeldungen gebe ich den Randwert auf der linken Seite als 40 Pixel an. Wir haben die Ausrichtung jetzt abgeschlossen, aber für das Eingabefeld geben wir den Typ dieser Eingabeanpassung nicht an. Also lass uns das auch machen. Für die Namenseingabe haben wir den Typ als Flugzeug. Lass uns zur E-Mail springen. Ich gebe den Typ per E-Mail. Und auch in der Formulareinstellung gebe ich den Namen für die Ausgabe in den Textfeldeinstellungen an. Auch hier gebe ich den Namen als E-Mail an. Jetzt zum Scheitern des Unternehmens. Geben wir dem Typ S-Ebene, den Namen für die Formulareinstellungen und den pulsierenden Text. Ich gebe es als Gesellschaft. Nun zum Telefon, Phil, ich gebe den Namen als Telefon in der Formulareinstellung und auch die Textfeld-Einstellungen an. Und geben wir dem Typ S ein Telefon. Jetzt wähle ich das Nachrichtenfeld aus und gebe den Namen in der Formulareinstellung S message ein. Wir haben den Textbereich verwendet. Also hier haben wir nichts von diesem Typ. Jetzt werde ich das veröffentlichen. Also haben wir jetzt alles wie in unserem Design entwickelt und es sieht auch toll aus. In der nächsten Lektion werden wir uns dem Fußzeilenbereich befassen. 37. Footer Abschnitt – Teil 1: In dieser Lektion werden wir uns mit einer körpereigenen Lebensmitteldissektion befassen. Sehen wir uns vorher die Überschrift „ Planung“ an, einen Autorennamen, der in der Mitte stehen wird. Wir brauchen es. Wir werden eine Blockade schaffen, um alle sozialen Medien zu verwalten. Für jedes der sozialen Medien werden wir einen eigenen Diblock erstellen. Wieder drin. Das ist ein Diblock to Hold-Logo. Und noch eine Entwicklung für den Namen der sozialen Medien und den Link dazu. Das gleiche Verfahren wird für die übrigen verwendet. So werden wir es machen. Mal sehen, wie wir das entwickeln werden. Bevor Sie mit dem Unterricht beginnen. Schauen wir uns das gemeinsame Box-Modell an, das für alle Abschnitte innerhalb des Körpers angewendet wird . Wir müssen einen Abschnitt hinzufügen und wir müssen den entsprechenden Klassennamen für diesen Abschnitt angeben. Als nächstes folgt der Abstand für diesen Abschnitt. Das heißt, wir müssen den oberen und unteren Füllwert dafür angeben. Nachdem wir darin einen Abschnitt erstellt haben, müssen wir einen Container hinzufügen und der Klassenname sollte für diesen Container angegeben werden. Jetzt können wir das Element innerhalb des Containers hinzufügen, das für den erforderlichen Abschnitt geeignet ist. Jetzt müssen wir unter dem Körper mit Hilfe der Schnellabteilung für die Weinklasse mit Hilfe der Schnellabteilung für die Weinklasse den Klassennamen für diesen Abschnitt angeben. Lassen Sie es als Abschnitt zur Lebensmitteldosis geben. Jetzt müssen wir einen Container erstellen. Jetzt weise ich den vorhandenen Klassencontainer zu. Dieser Behälter. In diesem Container erstelle ich jetzt den Blog. Sei der Klassenname für den Stahlblock B Photo Grab. Um das als Foto zu wissen, müssen wir oben eine Linie hinzufügen. Also bei der Auswahl von Essen oder Rap gehe ich zu den Rändern und wähle den oberen Rand aus, und ich wähle diese Kachel als Vollbild, dann gebe ich die Farbe in einem Hexadezimalwert an, wie in unserem Figma-Design. Wir haben den Abstand für diesen Abschnitt nicht angegeben. Also wähle ich diesen Fotobereich und gebe den Füllwert oben und unten auf 100 Pixel an , damit wir den Abstand oben und unten sehen können . Kommen wir nun zurück zum Ordner Grab und fügen wir die Überschrift hinzu. Lassen Sie die Überschrift B, H2 eingeben. Wir müssen diese Überschrift zum Mittelpunkt machen. Unter der Typografie wähle ich also die Mittelausrichtung. Ich ändere den Inhalt dieser Überschrift, um in Verbindung zu bleiben, um die Topographie zu ändern. Ich mache eine andere Typografie. Ich wähle die Schriftart als Poppins. Gewicht mit 500, mittlere Größe mit 30 Pixeln und Höhe mit Breite, 1,5 Bindestrich. Wir müssen die Schriftfarbe ändern. Also nehme ich eine andere Farbe, die ich als Sekundärfarbe wähle. Lassen Sie uns alle Buchstaben groß schreiben. Wir müssen den Klassennamen für diese Überschrift umbenennen, sodass der Klassenname Photo Connect-Titel ist. Wir brauchen diese Überschrift. Wir müssen den Namen des Autors hinzufügen. Also erstelle ich ein Bild. Indem Sie auf Bild wählen klicken. Ich wähle den Autorennamen aus dem Asset aus , um es in den Mittelpunkt zu stellen. Ich entscheide mich für Center Align und eine andere Art von Graphen. Wir haben den Überschriftenabschnitt zusammen mit der Bestellung ausgefüllt . Und dann müssen wir alle Social-Media-Artikel erstellen . Direkt darunter. Wir erstellen einen Fußzeilenumbruch für diese Überschrift. Unter diesem Container erstellen wir ein Div-Gesetz mit dem Namen photo social rep. Schon wieder drin. Wir erstellen ein weiteres soziales Element in der Diblock-Fußzeile. Für jedes soziale Objekt müssen wir einen Diblock erstellen. Also erstellen wir unter den Lebensmitteln oder sozialen Artikeln einen Diblock mit dem Namen Soziale Artikel. In jedem sozialen Element befindet sich ein Symbol, das aus einem Logo und einem Namen für soziale Elemente besteht. Und zusammen mit diesem Link. Lassen Sie uns zunächst einen Div-Look erstellen , der das Symbol und andere soziale Elemente enthält. Ich habe den Klassennamen für diesen oder den Blog als soziales Symbol angegeben . Wickeln. In diesem Icon-Grab. Ich erstelle ein Bild. Jetzt wähle ich das Bild aus der Säure, das ist ein Facebook-Symbol. Jetzt müssen wir die Größe festlegen um uns auf dieses Logo zu beschränken. Also wähle ich dieses soziale Symbol und gehe unter die Größe. Ich gebe die Breite 60 Pixel und die Höhe mit 60 Pixeln an. Um dem Hintergrund Farbe zu geben. Ich gebe die Farbe und Hexadezimal wie im Figma-Design an, wir müssen es so machen, dass es rund ist. Unter den Rändern gebe ich den Radiuswert also 100 Pixel an. Wir müssen dieses Logo in der Mitte platzieren. Ich wähle einen Flex als Display unter dem Layout und richte ihn in der Mitte aus und richte ihn in der Mitte aus. Wir haben den Social Icon Wrap fertiggestellt. Nun müssen wir innerhalb des sozialen Elements dem sozialen Objekt einen Namen mit einer Auswahl von sozialen Objekten geben einer Auswahl von sozialen Objekten und einen weiteren Diblock erstellen. Geben wir ihm einen Klassennamen für diesen Diblock S Social Text Wrap in diesem Rep, lassen Sie uns eine Überschrift erstellen, die für den Social-Media-Namen ist , und lassen Sie den Überschriftstyp B drei haben. Jetzt habe ich den Inhalt der Überschrift auf Facebook geändert. Jetzt wähle ich unter der Typografie die Schriftart als Poppins. Gewicht 500, mittlere Größe mit 18-Pixel-Schrift, Farbe mit Sekundärfarbe aus dem Farbfeld und Höhe, Breite 1,3 Bindestrich. Wir haben den Namen der sozialen Medien hinzugefügt. Jetzt müssen wir einen Link hinzufügen. Unter dem Social Text Wrap. Ich füge einen Textlink hinzu. Jetzt. Ich ändere diesen Textlink. Ich komme zur Typografie für diesen Textlink. Geben wir den Schrifttyp als Poppins, die Gewichtung als Datei-Handle Medium, Seiten mit 16 Pixeln und die Höhe mit einem Bindestrich an. Geben wir ihm eine Farbe in einem Hexadezimalwert als Intervall-Figma-Design, wir benötigen keinen Hyperlink. Also wähle ich den Stil auf keinen, auf Radio-Abstand oben in diesen Social-Media-Texten, ich wähle diese Überschrift. Ich gebe den Randwert auf Null Pixel, was ganz oben ist. Und jetzt müssen wir den Klassennamen der Überschrift in Sozialtitel umbenennen . Auch hier werde ich den Abstand reduzieren, den unteren. Bei der Auswahl des sozialen Titels unter dem Abstand gebe ich den Wert Null am unteren Rand Wir müssen das Logo und den sozialen Titel erstellen, das heißt, sie müssen nebeneinander stehen. Wir wissen bereits, dass sich diese beiden Elemente innerhalb des sozialen Elements befinden. Also wähle ich das soziale Element aus, blogge und ich entscheide mich für eine Flexbox. Ich richte es in der Mitte aus, um einen Abstand zwischen dem Symbol und dem Text zu schaffen . Ich wähle den Social Text Grab aus. Ich gebe den Padding-Wert, der sich links befindet, mit 20 Pixeln an , um einen Folienabstand zwischen Facebook und dem Link zu erzeugen . Ich wähle den sozialen Titel. Ich mache den Randwert unten als Phi-Pixel. Es scheint, dass der Abstand zwischen dem sozialen Symbol und einem sozialen Text größer ist. Also wähle ich diesen sozialen Textumbruch und gebe den Füllwert , der links liegt, auf 15 Pixel. Aber ich denke, der Abstand zwischen diesen Facebook und Unlink scheint größer zu sein. Also. Auch hier ändere ich den Margenwert auf Null. Schon wieder. Das gleiche Design wird für die Erinnerung an soziale Gegenstände verwendet. Mit der Auswahl eines sozialen Artikels dupliziere ich ihn. Alle sozialen Gegenstände so zu gestalten, dass sie nebeneinander liegen, bei der Auswahl von Lebensmitteln oder sozialen Gegenständen, wo sie alle sozialen Gegenstände enthalten. Jetzt wähle ich den Flex unter dem Layout. Ich richte es auf die Mitte aus. Wir müssen den Abstand zwischen den einzelnen sozialen Elementen schaffen . Also wähle ich das soziale Element aus und gebe den Randwert auf der rechten Seite auf 60 Pixel an. Wir brauchen soziale Gegenstände. Und wieder dupliziere ich es. Bis jetzt haben wir das Essen fertiggestellt, das den Namen des Autors auf allen anderen Social-Media-Artikeln trägt. In der nächsten Lektion werden wir, , einen ganzen Fußzeilenabschnitt ausfüllen wie beim Webdesign, einen ganzen Fußzeilenabschnitt ausfüllen. 38. Footer Abschnitt – Teil 2: In dieser Lektion werden wir das Essen oder das Schlechte, wie in unserem Design, fertigstellen . Das heißt, indem Sie die sozialen Elemente und die Symbole und auch die Links ändern . Also lass uns das beenden. Zuerst habe ich die sozialen Fotoartikel ausgewählt. Da es die volle Breite eingenommen hat, muss ich es mit der Auswahl des Food-Associate-Artikels korrigieren. Unter der Größe gebe ich den Breitenwert S eintausendhundert Pixel an. Und um es in die Mitte zu schaffen, unter dem Abstand, wähle ich Mitte und begründe es auch in der Mitte. Jetzt müssen wir die Hintergrundfarbe für die sozialen Elemente festlegen . Also gebe ich unter den Hintergründen den Farbwert in Hexadezimal an. Wir müssen alle vier Ecken runder machen. Also unter den Rändern gebe ich den Radiuswert S, 20 Pixel. Geben wir nun den Abstand oben und unten bei den Lebensmitteln oder sozialen Gegenständen an. Also gehe ich unter den Abstand und gebe den Füllwert oben auf 40 Pixel an. Auch hier gebe ich den Füllwert am unteren Rand S an, 40 Pixel. Wir haben die grundlegenden Einstellungen vorgenommen, die für den Photo Social Rep erforderlich sind. Jetzt müssen wir die Icon-Texte und Links für jedes der sozialen Elemente ändern . den zweiten sozialen Aspekt angeht, werde ich ihn als Drogenvertreter ändern. Dafür muss ich den Hintergrund und ein Symbol, einen Text und auch einen Link ändern . Also wähle ich zuerst den Social Icon Wrap aus. Dieser Social Icon Rap wurde für alle sozialen Artikel verwendet. Wenn ich also eine der Änderungen vornehme, wirkt sich das auf die anderen aus. Zusammen mit dem Social Icon Rap Kurs werde ich also ein Instagram mit beiden Gläsern erstellen. Jetzt können wir ihm eine Hintergrundfarbe geben. Jetzt gehe ich in den Hintergrund und gebe die Farbe an, die für Instagram geeignet ist. Wir haben die Hintergrundfarbe für Instagram gemacht. Jetzt müssen wir das darin enthaltene Symbol ändern. Also wähle ich dieses Bild , das sich unter dem sozialen Symbol befindet, und ich werde das Bild ersetzen , das Instagram ist. Lassen Sie uns nun den sozialen Titel als Instagram ändern. Jetzt wähle ich den Link für jedes der sozialen Elemente. Wir brauchen einen separaten Link. Lassen Sie uns vorher den Klassennamen in sozial ändern. Zusammen mit der bestehenden sozial verbundenen Klasse. Ich werde eine weitere Klasse hinzufügen, da wir für jedes soziale Element einen separaten Link verwenden werden. Lass uns eine neue Klasse namens B Instagram nennen. Jetzt ändere ich die Farbe , die für Instagram geeignet ist. Jetzt gehe ich zum dritten sozialen Element über, das für Twitter ist. Jetzt müssen wir die Farbe für das Social Icon Wrap ändern. Also füge ich zusammen mit der vorhandenen Klasse eine Unterklasse mit dem Namen twiddle hinzu. Jetzt ändere ich die Hintergrundfarbe, die für dieses Fenster geeignet ist. Lassen Sie uns nun das Symbolbild für Twitter ändern. Ändern wir den sozialen Titel für dieses S in Edo. Jetzt habe ich das Social Link Add-on zum Social Link ausgewählt . Ich füge eine weitere Klasse hinzu, Witwe, und ich ändere deren Farbe. Jetzt habe ich den vollständigen sozialen Artikel ausgewählt , der für das U du ist. Jetzt die Auswahl von Social Icon Wrap, ich füge eine neue Klasse zusammen mit der vorhandenen Klasse hinzu. Und im Hintergrund ändere ich die Farbe. Lassen Sie uns nun das vorhandene Bild ersetzen. Machst du Bilder? Jetzt ändere ich den Text des sozialen Titels auf YouTube. Jetzt wähle ich den sozialen Link aus. Zusammen mit dem vorhandenen sozialen Link füge ich einen YouTube-Kurs hinzu. Eine andere Farbe und eine Änderung der Farbe, die für das Jahr geeignet ist. Müssen wir den Abstand und den unteren Rand dieses Inhalts erstellen, entweder die Auswahl des Fußzeileninhalts ich gebe dem unteren Füllwert zehn Pixel. Wir benötigen den Abstand zwischen diesem Fußzeilenumbruch und sozialen Elementen in der Fußzeile. Also werde ich den Randwert oben auf 40 Pixel ändern . Wir haben also den beträchtlichen Abstand zwischen diesen beiden. Jetzt habe ich das Gefühl, dass es in diesen Fotowiederholungen viel Abstand gibt. Also nochmal, ich setze das zurück. Jetzt habe ich den Fußzeilenbereich ausgewählt. Lassen Sie uns nun den oberen Wert dieses Polsterwerts ein wenig ableiten . Also bringe ich den Pixelwert 60 Pixeln bei. Jetzt veröffentliche ich es , um zu sehen, wie es aussieht. Dieser Ordnerpfad sieht toll aus. Wir haben den gesamten Fuß nach oben abgeschlossen, aber in der nächsten Lektion werden wir uns dem Copyright-Bereich befassen. Gehen wir zur nächsten Lektion über. 39. Footer Abschnitt – Teil 3: In dieser Lektion werden wir uns dem Copyright-Bereich befassen. Schauen wir uns die Planung für diesen Copyright-Bereich an. Jetzt verwenden wir einen Abschnitt, der aus zwei Blöcken auf beiden Seiten besteht, und dann blockieren sie auf der linken Seite. Für Heimprojekte wird es einen Link zu Preisen und Kontakt geben. Und innerhalb der Div-Arbeit auf der rechten Seite wird das urheberrechtlich geschützter Inhalt sein. So werden wir das machen. Mal sehen, wie wir das entwickeln werden. Jetzt fügen wir einen Diblock und einen anderen Container hinzu. Geben wir den Klassennamen für diesen Do-Block als Copyright-Abschnitt an. Im Copyright-Bereich werden wir einen weiteren Diblock für die Menüs hinzufügen. Lass uns den D-Block erstellen. Und ich gebe den Klassennamen als Copyright-Menü-Wrapper. Wir benötigen einen weiteren Diblock für den urheberrechtlich geschützten Inhalt. Also nochmal, unter dem Copyright-Bereich und erstelle einen Diblock, und ich gebe den Klassennamen dafür, der als Copyright-Content-Wrap entwickelt wurde . Zurück zum Copyright-Menü-Wrapper Wir müssen die Links hinzufügen. Der Link wird im Copyright-Menü-Rep erstellt . Lassen Sie uns die Typografie für diesen Textlink ändern. Wir benötigen keinen Hyperlink, also wähle ich keinen für den Stil. Geben wir ihm einen Klassennamen für diesen Textlink als Food Domino Link. Absolut, wir haben Kampf x lnx. Also dupliziere ich diesen Ordnermenü-Link viermal. Wir müssen den Abstand zwischen diesen Textlinks hinzufügen. Also wähle ich diese Fußdominolinie aus und gebe dann den modernen Wert auf der rechten Seite 40 Pixel an. Lassen Sie uns jeden Textlink als Startseite ändern. Projekte zu Preisen und Kontakt. Vorerst haben wir das Copyright Minnow abgeschlossen. Lassen Sie uns auf den urheberrechtlich geschützten Inhalt in diesem Copyright-Inhaltsumfang eingehen. Ich füge einen Absatz hinzu. Lassen Sie uns den Inhalt des Abschnitts als urheberrechtlich geschützten Inhalt in unserem Design ändern . Jetzt müssen wir das Copyright-Menü und den Copyright-Inhalt in einer Zeile abgleichen . Also wähle ich die N-Dissektion aus, das ist der Copyright-Bereich. Wählen wir nun einen Flux in der Anzeige unter dem Layout. Ich richte aus und mache dasselbe, damit sich die Menüs in der linken Ecke und der urheberrechtlich geschützte Inhalt in der rechten Ecke befindet. Ich wähle den Platz zwischen einem anderen gerechtfertigt. Wir haben den Klassennamen für diesen Absatz nicht geändert. Also wähle ich diesen Absatz aus und gebe dann den Klassennamen als Copyright an. Copyright-Texte sind nicht perfekt zentriert ausgerichtet wie im Menü. Also gehe ich unter den Abstand und ändere den modernen Wert unten auf Null. Jetzt sind sowohl die Menüs als auch der Copyright-Text zentriert ausgerichtet , um den Abstand zwischen dem Social-Media-Mitarbeiter in der Fußzeile und einem Copyright-Bereich zu vergrößern. Und ich wähle jetzt den Copyright-Bereich und gebe den Randwert die obersten 240 Pixel an. Der mit Fuß versehene Teil wird sich am Ende der Oberseite befinden. So viel Abstand brauchen wir am Ende also nicht. Also wähle ich diesen Fußzeilenbereich aus und gebe den Füllwert oder die unteren 40 Pixel an. Lass uns das veröffentlichen , um zu sehen, wie es aussieht. Der Abstand und der obere Rand des Unternehmensbereichs reichen nicht aus. Also mit der Auswahl des Unternehmensbereichs und der Angabe des Randwerts oben auf 90 Pixel. Jetzt haben wir den Fotobereich mit einem Ordnertitel ohne Namen, Essen oder Social Rap und einem Copyright-Bereich abgeschlossen den Fotobereich mit einem Ordnertitel ohne Namen, . In der nächsten Lektion werden wir uns der Abstandsanpassung befassen, die für jeden dieser Abschnitte erforderlich ist . 40. Spacing: In dieser Lektion werden wir eine Feinabstimmung der Abstände in jedem Abschnitt als Intervall-Figma-Design vornehmen der Abstände in jedem . Sehen wir uns in dieser Lektion an, wie wir die Abstandsanpassung vornehmen werden. Zuerst habe ich diesen Abschnitt ausgewählt, den Füllwert für oben und unten für diesen Abschnitt, ich habe ihn mit 100 oben und 140 unten angegeben. Jetzt habe ich das Gefühl, dass ich ihm oben und unten einen kleinen Abstand für den oberen Polsterwert geben muss . Ich ändere ihn auf 110. Jetzt komme ich zum Abstand vom Boden. Auch hier brauche ich mehr Abstand. Also ändere ich den unteren Füllwert von 140 Pixel auf 160 Pixel. Ich habe den Servicebereich abgeschlossen. Jetzt wähle ich den Galeriebereich. Nochmals für den höchsten Füllwert. Ich ändere es auf 110. Jetzt komme ich zum Ende dieses Abschnitts. Wir konnten sichtbar feststellen, dass der Abstand nicht ausreicht. Es sieht so aus, als wäre es so kurz vor dem Ende dieses Abschnitts. Jetzt ändere ich den unteren Füllwert dafür. Lassen Sie den Wert 140 Pixel betragen. Oben scheint es in Ordnung zu sein. Aber für den Boden denke ich, dass mehr Abstand erforderlich ist. Also ändere ich den Wert auf 160 Pixel. Jetzt komme ich zum Workshop-Bereich , um ihnen mehr Abstand zu geben. Oben, im Workshop-Bereich, gehe ich zum Schlagwert und ändere den Wert als ein Pixel oben. Jetzt komme ich nach unten, da ich das Gefühl habe, dass ich den Abstand reduzieren muss. Also ändere ich den Wert auf 80 Pixel. Auch hier habe ich das Gefühl, dass ich den Abstand reduzieren muss . Also ändere ich den Wert auf 60 Pixel. Wir haben den Workshop-Abschnitt abgeschlossen. Jetzt gehe ich zum Abschnitt Lizenzierung über. In diesem Abschnitt habe ich das Gefühl, dass ich den Abstand oben reduzieren muss . Also ändere ich den Wert auf 80 Pixel. Der Abstand für den unteren Bereich dieses Tabs „Lizenzierung“ scheint in Ordnung zu sein. Also gehe ich so. Und jetzt komme ich zum Testimonial-Bereich. Der Abstand und die Wanne wirken etwas hoch. Also ändere ich den Wert auf zwei Pixel. Nun kommt eine Prüfung zum Preisbereich Lassen Sie uns den Abstand oben vergrößern. Also gebe ich dafür einen Füllwert von 110 Pixel an. Um ganz unten zu sein, wir brauchen so viel Abstand, also lasse ich es so, wie es ist. Danach wähle ich diesen Blogbereich aus, um den Abstand oben zu vergrößern. Auch hier gebe ich den Füllwert 210 Pixel am unteren Rand dieses Blogabschnitts an, der das nicht benötigt viel Abstand. Also reduziere ich den Abstand auf zwei Pixel, der sich unten befindet. Jetzt komme ich zum FAQ-Bereich. Lassen Sie mich den Füllwert oben auf 80 Pixel ändern. Im Vergleich zum Figma-Design benötigen wir nicht so viel Abstand am unteren Rand. Also ändere ich den Füllwert unten auf 20 Pixel. Aber auch hier habe ich das Gefühl, dass ich keinen Abstand und keinen Boden benötige, also ändere ich den Wert auf Null. Kommen wir nun zum Abonnementformular Lassen Sie mich den Füllwert oben auf 120 Pixel erhöhen . Und um den Abstand am unteren Rand zu verringern, ändere ich den Wert auf 60 Pixel. Aber auch hier habe ich das Gefühl, dass ich den Abstand reduzieren muss, also ändere ich den Wert auf 40 Pixel. Als Nächstes wähle ich den Abschnitt mit dem Kontaktformular aus. Der Abstand oben dafür scheint in Ordnung zu sein. Also gehe ich der Sache auf den Grund. Jetzt ändere ich den Wert 210 Pixel. Aber auch hier habe ich das Gefühl, dass ich den Abstand vergrößern muss . Also ändere ich den Wert 220 Pixel. Als Nächstes wähle ich diesen Fotobereich aus. Hier. Ich habe das Gefühl, dass ich den Füllwert erhöhen muss. Also ändere ich den Wert auf 80 Pixel, aber ich denke, die 70 Pixel scheinen in Ordnung zu sein. Also ändere ich es. Lass es uns veröffentlichen, um zu sehen, wie es aussieht. Lassen Sie uns alle Abstände von zu Hause aus analysieren. Der Bereich Services sieht genauso gut aus wie der Galeriebereich, Workshop-Bereich, Lizenzierung, Tab, Testimonial-Bereich, Preisbereich, Blog-Bereich. Alles scheint in Ordnung zu sein wie in unserem Design. 41. Single Post Page – Teil 1: Wir haben die Blog-Liste in unserem Bereich Blog-Geschichten erstellt. In dieser Lektion erstellen wir einen einzigen Blogbeitrag, wenn Sie auf diese individuelle Blogliste klicken. Mal sehen, wie wir das als Blogpost-Seite verdoppeln werden. Wir werden eine Blogpost-Seite erstellen. Also wähle ich das Seitenfenster darunter aus. Sie könnten in der Lage sein, eine statische Seite, eine CMS-Sammlungsseite zu finden , Sie löschen die Seite und das Spracheinkommen. Wir werden eine CMS-Sammlungsseite verwenden. Hier drin. Wir haben bereits Vorlagen für Blogbeiträge zusammengestellt. Also wähle ich diese Vorlage für einen Blogbeitrag aus. Wir verwenden die Sammlungsseiten, weil wir den Inhalt des Blogs aus dieser EMS-Sammlung übernehmen werden. Jetzt wurde die Seite erstellt. Im Navigator. Sie könnten den gesamten Abschnitt sehen, den wir bisher erstellt haben. In diesem Navigator verwenden wir den Header-Bereich und die Lebensmittelsektion. Wie wir bereits wussten , werden wir eine einzige Blogpostseite erstellen. Auf der Blogpostseite müssen wir einen Header-Bereich und den Hauptinhalt des Blogs sowie einen Fußzeilenbereich hinzufügen . Der Header-Bereich, den wir hier verwenden werden, stammt aus unserem Double-up-the-Projekt, da wir den Header-Abschnitt kopieren und auf der Seite platzieren könnten . Wenn wir jedoch Änderungen in der Grube vornehmen, hat dies keinen Einfluss auf den Hauptinhalt. Und auch wenn wir Änderungen am Hauptinhalt vornehmen, dies keinen Einfluss auf den pH-Wert. Also, was wir jetzt tun werden, wir müssen das Symbol verwenden. Das Symbol wird verwendet, um beliebige Elemente und ihre untergeordneten Elemente in eine wiederverwendbare Komponente umzuwandeln beliebige Elemente und ihre untergeordneten Elemente . Symbol kann also überall in unserem Projekt verwendet werden. Das heißt, die einzelnen Elemente mit dem gesamten Styling können überall im Projekt verwendet werden. Also lasst uns ein größeres Symbol haben. Jetzt. Das Element, das benötigt wird, ist ausgewählt. Nun, das ist der Header-Vertreter. Wählen Sie nun die Symbole aus. Ich gebe den Namen des Entensymbols als Kopfbereich. Jetzt sagen wir das Kopfzeilensymbol oder wir haben die Header-Wrap-Elemente. Nun, äh, wir brauchen einen Fotobereich auf unserer Blogpostseite. Also wähle ich den Elementfußzeilenbereich mit der Elementauswahl aus. Ich werde ein Symbol mit einem Namen in der Fußzeile zusammenbauen und erstellen . Jetzt gehe ich zurück zur Instanz auf der Seite unter der CMS-Sammlungsseite. Ich wähle die Vorlage für Blogbeiträge aus. Auf der Seite, die wir erstellt haben, wie im Canvas im Navigator gezeigt, konnte man also wie im Canvas im Navigator gezeigt, einen Liter-Körper sehen. Wie bereits erwähnt, werden wir diese Seite mit dem Kopfbereich und dem Hauptinhalt sowie einem Fußzeilenbereich weiterentwickeln . Zunächst werden wir einen Header-Bereich haben. Also gehe ich zum Symbol und wähle den Header-Bereich aus. Auf dieser Seite wird der Header-Bereich erstellt. Wir brauchen diesen Header-Abschnitt. Lassen Sie uns ein Abschnittselement erstellen. Geben wir den Klassennamen für diesen Abschnitt als Abschnitt mit Blogdetails an. Lassen Sie uns darin einen Behälter erstellen und den vorhandenen Glasbehälter verwenden. Lassen Sie uns unter dem Container ein Duplikat erstellen und benennen, das die Log-S-Blockdetails umschließen. Wir müssen ein Bild unter diesem Blockdetail-Rap erstellen. Wie wir bereits wissen, haben wir die CMS-Sammlungsseite verwendet. In der Bildeinstellung könnten Sie also das Kontrollkästchen mit einem Namen sehen und ein Bild aus der Sammlung von Blogbeiträgen abrufen. Wählen Sie das einfach aus und fügen Sie es hinzu. Sie könnten ein ausgewähltes Feld finden. Wählen Sie im Auswahlfeld ein Hauptbild aus, sodass das Bild erneut versucht wird es aus dem Blogbeitrag der Sammlung zu verwenden. Machen Sie es mittig ausgerichtet. Wir haben das Hauptbild hinzugefügt. Wir brauchen es, wir müssen den Titel dieses Blogposts hinzufügen. Also im Blockdetail, Brad, suche ich nach einer Überschrift. Jetzt können keine Texte aus dem Blogbeitrag darunter abgerufen Wählen Sie das Feld S-Name aus. Der Titel des Blogposts wird hier aus unserer Sammlung von Blogbeiträgen angezeigt. Lassen Sie uns die Schrift als Poppins ändern. Und hat eine Größe von 40 Pixeln. Wir müssen den Klassennamen für diese Überschrift angeben. Also unterrichte ich den Klassennamen für diese Überschrift, Blog-Detailüberschrift. Jetzt brauchen wir diese Überschrift dieses Blogposts. Wir müssen das Datum und den Autor dieses Blogposts hinzufügen. Also dafür, noch einen Blog-Detail-Wrap, füge ich einen anderen Blog hinzu um das Datum und den Autorennamen zu speichern. Geben wir ihm einen Klassennamen für dieses Diblock S Block Detail Metal unter dem Blog Needle-Meta. Lassen Sie uns einen Textblock hinzufügen. Aktiviere das Abrufen von Texten aus dem Blogbeitrag. Unter dem Auswahlfeld. Ich wähle das Feld Veröffentlichungsdatum aus. Jetzt wurden die Daten unter dem Titel des Blogposts hinzugefügt. Geben wir die Schrift als Poppins, Gewicht 500, mittlere Größe als 18 Pixel an und verstecken sie mit einem Bindestrich von 1,2. Und ich wähle die Schriftfarbe als Inhaltsfarbe aus dem Farbfeld. Wir müssen den Klassennamen für diesen nächsten Block als Blogdetail ändern . Hat. Wir müssen den anderen Namen für diesen Blogbeitrag hinzufügen , ein weiteres Blogdetail, Mehta, ich füge einen weiteren Textblock hinzu , der das Abrufen von Text aus Blogbeiträgen ermöglicht. Jetzt wähle ich das Feld aus, weil es seltsam ist, dass der Name des Autors aus der Sammlung abgerufen wurde. Jetzt ändere ich die Schrift als Poppins. Warten Sie auf fünfhundert, mittlere Größe wie 18 Pixel und Höhe, Breite 1.2 Bindestrich. Lassen Sie uns die Farbe in die Inhaltsfarbe ändern. Wir müssen das Veröffentlichungsdatum und einen Autor so benennen, dass sie nebeneinander stehen. Also wähle ich das gesamte Blog-Detail aus, Mehta. Und ich wähle den Flux im Display. Um diese beiden in den Mittelpunkt zu stellen, begründe ich es in der Mitte. Ich benenne den Klassennamen in die Reihenfolge der Blog-Details um. Um den Abstand zwischen dem Veröffentlichungsdatum und dem Namen des Autors zu erstellen . Ich wähle das Blog-Detaildatum aus und gebe den Füllwert für links und rechts als zehn Pixel an. Lassen Sie uns denselben Wert für den Blog-Detail-Autor zwei anwenden . Jetzt gehe ich zurück zum Abschnitt mit den Blogdetails. Und wir müssen den Abstand und den Boden angeben. Also gebe ich den Füllwert unten mit 100 Pixeln an. Da wir den Header-Bereich und das Hauptbild nach Titel, Veröffentlichungsdatum und Autorennamen benotet den Header-Bereich und das Hauptbild nach Titel, haben. Jetzt müssen wir nur noch den gesamten Inhalt des Blocks und den detaillierten Block hinzufügen den wir am Block hinzufügen werden. Das soll den Inhalt dieses Blogposts enthalten. Geben wir ihm einen Klassennamen für diesen Diblock S-Block-Detailinhalt. Ich füge ein Element Rich Text hinzu. Aktiviere jetzt das Abrufen von Texten aus Blogbeiträgen. Und ich wähle den Hauptteil der Feldpost aus. Der gesamte Inhalt , den wir in der Sammlung gespeichert haben, wird also der Sammlung gespeichert haben, wird erneut versucht und auf der Leinwand angezeigt. Jetzt müssen wir den entsprechenden Abstand für den Inhalt dieses Beitrags erstellen . Also wähle ich diesen Blog-Detailinhalt aus und gebe dem Füllwert S 60 Pixel. Es hat viele Abstände auf der Oberseite. Also nochmal, ich ändere den Wert auf 40 Pixel. Ich habe das Gefühl, dass ich den Abstand für die Überschrift hinzufügen muss . Also wähle ich die Blog-Detailüberschrift aus und gebe den Füllwert S an, 20 Pixel oben, zehn Pixel unten. Wir haben den Blockinhalt abgeschlossen. Jetzt müssen wir den Fußzeilenbereich hinzufügen. Also wähle ich den Körper aus. Ich gehe zurück zu den Symbolen und wähle den Lebensmittelbereich aus. Also jetzt wird das Essen in diesem Bereich unten hinzugefügt. Lass es uns veröffentlichen, um zu sehen, wie es aussieht. Ich lade die Seite neu. Der Kopf, dieser Bereich, der Hauptinhalt und der Fußzeilenbereich, alles ist perfekt platziert. In der nächsten Lektion werden wir unseren Blog-Bereich fertigstellen. 42. Single Post Page – Teil 2: In dieser Lektion werden wir den gesamten Blockabschnitt fertigstellen. Also, sagen wir im Blockbereich, wir haben die Blogliste, wenn wir auf das Bild klicken, die Überschrift, sie sollte uns zu dem einzelnen Blogbeitrag weiterleiten. Also gehe ich zum Navigator. Und unter dem Blog-Bereich wähle ich das Blogbild Breath aus. Und ich erstelle Linkblockelemente, da wir sie auf den einzelnen Blogbeitrag umleiten müssen. Also benote ich diesen Linkblock und platziere das Bild innerhalb des Linkblocks. Wenn wir das Bild also innerhalb des Link-Blogs platzieren, wo auch immer wir auf das Bild klicken , werden wir zu dem einzelnen Blogbeitrag weitergeleitet. Mit der Auswahl von Link-Blog gehe ich unter die Einstellungen. In den Link-Einstellungen wähle ich eine Seite aus, da beim Klicken auf das Bild und die Überschrift zur Seite mit dem Blogbeitrag weitergeleitet werden sollte. Ich wähle die Seite und ein anderer wählt eine Sammlungsseite aus. Ich wähle einen aktuellen Blogbeitrag aus. Von der Sammlungsseite der aktuellen Blogbeiträge. Der entsprechende Blogbeitrag , also ein einzelner Blogbeitrag, wird angezeigt. Wir haben einen Link-Blog zu dem Bild erstellt. Jetzt brauchen wir uns nur noch für die Überschrift unter dem Blog-Inhaltsbereich zu setzen . Ich füge einen Link-Blog hinzu. Lassen Sie uns den Linkblock über den Blog-Titel ziehen und den Blog-Titel in diesem Link-Blog platzieren. Wo immer wir also auf den Titel klicken , sollte er zu dem einzelnen Blogbeitrag weitergeleitet werden. Jetzt mit der Auswahl des verknüpften Blocks müssen wir zur Einstellung gehen. Unter der Link-Einstellung wähle ich die Seite aus, unter der Sammlungsseite wähle ich den aktuellen Blogbeitrag aus. Jetzt müssen wir das Design der Überschrift ändern , die sich in einem Link-Blog befindet. Jetzt mit der Auswahl des Link-Blogs gehe ich in die Topographie und wähle keine für den Stil, um den Hyperlink zu vermeiden , und für die Schriftfarbe wähle ich die Sekundärfarbe von dieser Keil. Lassen Sie uns die Klasse für den Linkblock in Blocks Single Link umbenennen . Wir müssen den Übergang für die Überschrift des Blocks festlegen . Ich gehe also eine andere Ethik ein und wähle den Übergang, da ein Übergang für die Schriftfarbe stattfinden sollte. Also wähle ich die Schriftfarbe. Jetzt müssen wir diesen Zustand ändern. Ich wähle den Staat als Hobo aus. Wie ich bereits eingestellt habe, sollte sich die Schriftfarbe im Schwebezustand ändern. Ich verwende eine andere Art von Grafik und wähle die Farbe als Grundfarbe. Lass uns das veröffentlichen , um zu sehen, wie es funktioniert. Lass es uns neu laden. Ich bewege den Mauszeiger über dem Titel. Der Übergang funktioniert perfekt. Jetzt habe ich darauf geklickt. Wenn Sie also darauf klicken, gelangen wir zu einer anderen Seite. Auf der neuen Seite konnten wir den einzelnen Blogbeitrag sehen. Nehmen wir ein Szenario. Im Sammlungsbereich. Wenn es sich um ein Vorschaubild handelt, ist das Veröffentlichungsdatum, der Autor nicht verfügbar. Fehlt also der Wert im Feld, wird das gesamte Design der Blockliste beeinträchtigt. Um das zu vermeiden, müssen wir die bedingte Sichtbarkeit festlegen. Mal sehen, wie man das macht. Jetzt wähle ich den Blog Metal Value aus. Jetzt gehe ich unter die Kulisse. Darunter können Sie die bedingte Sichtbarkeit darunter sehen . Lassen Sie uns eine Bedingung hinzufügen. Im Pop-up. Sie können sehen, dass das Element sichtbar ist. Ein Urlaub, wenn die Bedingung, die wir anwenden werden , erfüllt ist. Zuerst muss ich das Feld wählen. Hier. Es ist ein Veröffentlichungsdatum. Also wähle ich das Feld als Veröffentlichungsdatum aus und lege dann die Bedingung fest, dass S gesetzt ist, damit das Element sichtbar ist. Ein Lee hat einen Datensatz innerhalb des Feldes veröffentlicht. Machen wir es noch einmal für den Autorennamen. Auch dafür entscheide ich mich für Blog Middle Value. Und ich gehe unter die bedingte Sichtbarkeit und füge die Bedingung hinzu. Jetzt muss ich das Feld wählen. Also wähle ich das Feld als Auto und ich wähle die Bedingung, dass S gesetzt ist. Das Element ist also sichtbar, wenn Lee, wenn die Reihenfolge innerhalb des Feldes festgelegt ist. Machen wir dasselbe für den Separator. Das ist Blog-Metaseparator. Ich wähle das Feld als ADA und stelle die Bedingung ein, dass S gesetzt ist. Jetzt wähle ich den Block außer dass wir auch die Bedingung dafür hinzufügen. Wählen wir das Feld als Zusammenfassung des Beitrags aus und lassen die Bedingung b gesetzt werden. Dieses Element ist nur sichtbar wenn die Zusammenfassung des Beitrags innerhalb des Felds gesetzt ist. Lassen Sie uns erneut die bedingte Sichtbarkeit für dieses Blockbild vornehmen. Dafür wähle ich Blog Image Wrap, damit der Feldname ein Miniaturbild sein kann. Und die Bedingung b ist gesetzt. Bisher haben wir in der Lektion einen Link-Blog zum Vorschaubild und zum Titel des Blogs erstellt. Außerdem haben wir die bedingte Sichtbarkeit für das Veröffentlichungsdatum oder den Blog mit Ausnahme des Block-Thumbnail-Bilds festgelegt. In der nächsten Lektion werden wir uns ansehen, wie Sie Klicken auf die Menülinks reibungslos scrollen können. 43. One Page Menu – Smooth Scroll: In dieser Lektion werden wir sehen, wie Sie Klicken auf die Menülinks reibungslos scrollen können. Das heißt, wir werden den Abschnitt jedem von ihnen und den Entscheidungen zuweisen . Mal sehen, wie wir das machen werden. Zu Beginn der Entwicklung. Wir haben mit der darin enthaltenen Header-Navigation begonnen. Wir haben das Now-Vo verwendet, das aus Navlinks besteht. also auf diesen Link klicken, sollte er zum zugewiesenen Abschnitt weitergeleitet werden. Lassen Sie uns zunächst am Home-Now-Link arbeiten. Ich klicke auf diesen Home-Link. Es sollte uns zu dieser Halo-Sektion führen. Mal sehen, wie man diesen Heldenbereich nun dieser Startseite zuweist , verlinkt. Zuerst müssen wir diesem Element in R eine ID zuweisen , um die ID festzulegen Ich gehe unter die Einstellung und gebe den ID-Namen als Home an. Jetzt haben wir den ID-Namen für dieses Element zugewiesen. Gehen wir nun zur Startseite, um weitere Link-Einstellungen zu nivellieren. Ich gebe die URL als Hash-Home an. Wir haben die URL zu diesem Home-Now-Link angegeben. Wenn Sie diesen Home-Link ankreuzen, wird in der URL nach dem Objekt gesucht , das wir als HOH angegeben haben. Es wird also nach einem Element suchen, das diese ID hat, und es führt uns zu diesem Element. Wir haben den Home-Link fertiggestellt. Lassen Sie uns näher zu den Projekten springen , wenn Sie auf diesen Link Projekt jetzt klicken. Es sollte zum Galeriebereich springen. Also wähle ich diesen Galeriebereich aus und weise die ID für dieses Element als Projekte zu. Gehen wir nun zurück zum Nav-Link des Projekts. Jetzt müssen wir unter der Link-Einstellung die URL angeben, müssen wir unter der Link-Einstellung die URL angeben da wir die ID als Projekte erstellt haben. Also gebe ich diesen Namen in der URL als Hash-Projekte an. Wenn Sie auf diese Projekte klicken , gelangen wir zum Galeriebereich. Lass es uns veröffentlichen, um zu sehen, wie es funktioniert. Lass uns auf das Projekt klicken. Marilyn, es führt uns in die Galerieabteilung, kommen jetzt nach Hause. Es hat die Farbe Blau, aber wir müssen diese Farbe ändern. Immer beim Laden der Website. Es wird auf einer Homepage sein. Dieser Home-Link wird unten also immer schwarz angezeigt. Also müssen wir die Farbe auf Schwarz ändern. Also wähle ich den Link Home. Lass uns das Styling dafür machen. Unter der Typografie wähle ich also die Sekundärfarbe für den Versand. Wir haben die ersten beiden Links, Home und Projects, fertiggestellt. Schauen wir uns den About Link an. also auf diesen Link klicken , sollten wir zu meinem Arbeitsbereich gelangen. Geben wir diesem Element also den ID-Namen. Jetzt gehe ich zu einer anderen Einstellung und gebe die IDS ungefähr so, wie wir den ID-Namen für dieses Element angegeben haben. Jetzt komme ich zurück zum Thema Naphthalin. In dieser Link-Einstellung müssen wir nun die URL so angeben, wie wir den ID-Namen angegeben haben, wie etwa, dieser Name sollte hier angegeben werden. Jetzt gebe ich den URLs einen Hash von ungefähr. Lassen Sie uns nun zum Link Preise jetzt springen. Also klicke ich auf diesen Link, er sollte uns zum Preisbereich führen. Also wähle ich dieses Element aus und gebe dann dem ID-Namen S einen Preis. Geben wir ihm nun eine URL zu diesem Link zur Preisgestaltung. Ich gebe den URLs Hash-Preise. Jetzt gehe ich zum Kontakt-Now-Link und gebe die URL als Hash-Kontakt an. Wenn Sie auf diesen Kontakt klicken , sollten wir zum Abschnitt mit dem Kontaktformular gelangen, in dem Sie dieses Element auswählen. Ich gebe die ID als Kontakt an. Lass es uns veröffentlichen, um zu sehen, wie die Links funktionieren. Jetzt lade ich diese Seite , wenn ich auf das Projekt klicke. Es führt uns zum Galeriebereich über das Ankreuzen dieses Ebert. Sie auf die Preisgestaltung klicken, gelangen wir zum CMA-Arbeitsbereich . Lehnen Sie sich jetzt an, um uns zum Preisbereich zu bringen. Jetzt müssen wir uns auf die Links konzentrieren , die sich im Fotobereich befinden. Wie wir wissen, sind das alle Links. Das gleiche Verfahren wird für diesen Link angewendet. Habe ich diesen Home-Link ausgewählt? Und ich werde noch einen Link setzen und den URLs Hash nach Hause geben , genauso wie ich es für die Projekte in Bezug auf Preise und Kontakt mache . Jetzt klicke ich auf den Home-Link, sich in der Fußzeile befindet. Es bringt uns nach Hause. Ich klicke auf den Link. Es führt uns zum entsprechenden Abschnitt. Also die, alle Linker funktionieren super. Jetzt gehe ich zum Blog-Bereich über. In jedem Block haben wir einen Kopfzeilenbereich und einen Fußzeilenbereich. Mal sehen, ob die Links in diesem Block funktionieren oder nicht. Jetzt befinden wir uns in dem separaten Blob. Konzentrieren Sie sich auf die URL-Adresse. Jetzt. Jetzt klicke ich auf die Projektlinks, aber es funktioniert nicht. Denn in der URL-Adresse könnten Sie feststellen, dass es sich nicht um einen Schrägstrich zwischen dem Blognamen und der Element-ID handelt. Also müssen wir die Änderungen an der URL und dann an den sitzenden Nav-Links vornehmen. Jetzt gehe ich zurück zur Leinwand. Jetzt wähle ich dieses Projekt aus und verbinde jetzt weitere Nivellierungseinstellungen. Ich gebe die URL als Slash-Ash-Projekte an. Wir müssen also für jeden Nav-Link einen Schrägstrich am Frame in der URL hinzufügen . Lass uns überprüfen, ob es funktioniert oder nicht. Ich lade die Seite neu und klicke auf diesen Blog. Jetzt klicke ich auf diese Projekte, da wir jetzt zum Galeriebereich gelangen. Jetzt klicke ich auf das About, es bringt uns perfekt zum notwendigen Abschnitt, wie er in der URL-Adresse sehen konnte. Es ist völlig in Ordnung. In der nächsten Lektion speichern wir unser Dateisymbol und ein Webclip-Symbol. 44. Site Fav und WebClip Icons: In dieser Lektion erfahren Sie, wie Sie das Fab-Symbol, ein Symbol für eine Website, einrichten . Bevor wir mit der Lektion beginnen, schauen wir uns an, was das Fairway Gone und das Webclip-Symbol ist. Und ein Stoff als kleines Symbol, das als Branding für unsere Website dient. Sein Hauptzweck besteht darin, Besuchern zu helfen, unsere Seite leichter zu finden , wenn sie mehrere Tabs geöffnet haben. In Webflow werden wir 32 mal 32 Pixel für dieses Fairway Gone verwenden . Sehen wir uns nun das Webclip-Symbol an. Flip ähnelt einem App-Symbol. Aber anstatt eine Anwendung zu starten, führt ein Web Grip einen Benutzer direkt zu Ihrer Website. Wir werden ein Bild von 56 x 256 Pixeln verwenden , um ein Flip-Symbol einzurichten. Ich benötige eine Datei mit der Erweiterung P, die ich von Cloud convert.com verwende. Um die JPEG-Datei zu konvertieren. Zuerst muss ich das Notwendige auswählen. Ich habe die JPEG-Datei mit dem Namen, sie schmeckt nach Webclip. Also wähle ich das aus, da es sich um eine JPEG-Datei handelt. Ich muss diese Datei in eine Webseite konvertieren. Bevor ich das konvertiere, muss ich die Breite und Höhe für dieses Bild festlegen. Also unter den Einstellungen und geben Sie Breite und Höhe 256 an, da dies die Auflösung ist , die für unser Webglobus-Symbol benötigt wird. Jetzt wird unsere JPEG-Datei in eine Webseitendatei umgewandelt. Lass uns das herunterladen. Ich speichere diese Datei am seltsamsten als Webclip-Bindestrich. Gehen wir zurück zu unserem Projekt. Klicken Sie auf das Projekt, das sich unter der allgemeinen Einstellung Möglicherweise sehen Sie die Symbole. Lass uns zuerst das Fab Icon hochladen. Das Dateisymbol sollte eine Auflösung von 32 Pixeln mal 32 Pixel haben, da ich diese Datei mit dieser Auflösung bereits habe. Also wähle ich diese Datei in der Beschreibung aus. Sie können sehen, dass in der Beschreibung aus. Sie können sehen, die PNG- oder JPEG-Datei für das Fab-Symbol ausreicht. Jetzt ist das Fairway-Icon hochgeladen. Lassen Sie uns nun das Webclip-Symbol hochladen. Für dieses Webclip-Symbol müssen wir die Webseitendatei hochladen , da wir die Datei bereits konvertiert haben. Wählen wir diese Datei aus. Wir haben den Both Fairway Con Anna Webclip hochgeladen. Lass uns das veröffentlichen, um zu sehen ob der Fairway Kahn hochgeladen wird. Ich lade die Seite neu. Also ja, wir könnten das tolle Symbol hier sehen. In der nächsten Lektion werden wir sehen, wie wir unsere Website auf Tablets, Mobiltelefone und Desktops reagieren können. 45. Responsive Grundlagen: In dieser Lektion werden wir sehen, wie wir dafür sorgen können, dass unsere Website auf Desktop-, Tablet-, Mobilgeräte im Querformat und mobile Eingaben reagiert Mobilgeräte im Querformat und . Hier oben auf der Leinwand können Sie die Darstellungsfenster sehen. Das sind die Breakpoints. Der Desktop mit einem Stern ist ein Basis-Breakpoint. Bis jetzt haben wir die Entwicklung an diesem Basis-Breakpoint abgeschlossen . Alle Elemente , die wir in diesem Basis-Breakpoint verwendet haben, werden also diesem Basis-Breakpoint verwendet haben, werden an Lloyd-Breakpoints weitergegeben. Wir müssen dieses Element also nicht immer wieder neu erstellen. Denn es sind die niedrigsten Breakpoints. Eines Tages müssen wir alle Elemente an ihre Breakpoints anpassen . E1, ein Wochenende, und mache die höchsten Breakpoints als den Basis-Breakpoint. Um den höchsten Breakpoint zu erstellen, klicken Sie auf die drei Punkte in der Marionette. Wir konnten den größten Bruchpunkt mit einem Wert von diesen in AD-Pixeln, Tausend für 40 Pixel und tausend 920 Pixel sehen den größten Bruchpunkt mit einem Wert von diesen in AD-Pixeln, . Hier wähle ich diese und 920 Pixel. Jetzt erhalten wir die Popup-Nachricht. Zu erstellen. Die Breakpoints sind es nicht. Klicken Sie also auf Create , damit der höchste Breakpoint erstellt wird. Jetzt konnten wir den Unterschied zwischen der Ansicht mit dem höchsten Haltepunkt und der Basis-Breakpoint-Ansicht erkennen . Dieser höchste Breakpoint wird verwendet, wenn wir einen größten Desktop als den Basis-Breakpoint haben. Jetzt kehre ich zum Basis-Breakpoint zurück und klicke auf das Headerbereichs-Raster. Im Layout konnte man die beiden Farben sehen. Das ist eins mit Orange und das andere mit Blau. Die orange Farbe gibt an, dass der ausgewählte Elementstil von einem Tag oder einer Basisklasse übernommen wurde. Wenn der Stilindikator blau ist, bedeutet dies, dass dieser Elementstil aus der aktuellen Klasse stammt. Das heißt, wenn wir Änderungen an diesem Element vornehmen, wird die Anzeige blau. Lassen Sie mich im Detail erklären , welches andere Beispiel. Jetzt habe ich den Servicebereich ausgewählt. Unter dem Abstand können Sie die blaue Anzeige sehen. Das heißt, wir haben die Änderungen in dieser Abschnittsklasse und auch in diesem Basis-Breakpoint vorgenommen. Jetzt gehe ich zum höchsten Breakpoint, den wir jetzt im Umfragebereich dieses höchsten Breakpoints erstellt haben jetzt im Umfragebereich dieses höchsten Breakpoints erstellt dieses höchsten Breakpoints Unter dem Abstand konnten wir sehen, dass der Farbindikator orange ist. Da dieser Wert nun vom Basis-Breakpoint vererbt wird, der Wert blau, wenn wir die Änderungen hier vornehmen wird der Wert blau, wenn wir die Änderungen hier vornehmen. Nur wenn wir die Änderungen am Basis-Breakpoint vornehmen, wirkt sich dies sowohl auf den höchsten auch auf den niedrigsten Breakpoint aus. Wenn Sie jedoch Änderungen am höchsten Breakpoint vornehmen, dies keine Auswirkungen auf den Basis-Breakpoint. Seien Sie also immer vorsichtig dabei. Bisher haben wir ungefähr den Basis-Breakpoint und den niedrigsten Breakpoint gesehen , und wir haben auch den höchsten Breakpoint erstellt. In der nächsten Lektion werden wir sehen, wie unsere Website auf das Tablet reagiert. 46. Tablet View Responsive – Teil 1: In dieser Lektion erfahren Sie, wie Sie unsere Website auf das Tablet reagieren können. Das heißt, wir werden unsere gesamte Website basierend auf der Tablet-Ansicht gestalten. Mal sehen, wie wir das machen werden. Zuerst überprüfe ich alle Elemente, die wir am höchsten Breakpoint entwickelt haben . Also alles, was wir erstellt haben, ist perfekt aufeinander abgestimmt und jetzt wollen wir zum Basis-Breakpoint übergehen. Schon wieder. Deaktivieren Sie im Basis-Breakpoint alle Elemente. Gehen wir nun zur Tablet-Ansicht über. In dieser Tablet-Ansicht ist also nicht das gesamte Element richtig ausgerichtet, da die Werte, die wir im Basis-Breakpoint erstellt haben , an das Tablet vererbt werden. Also müssen wir die Werte an das Tablet anpassen. Behalte immer eine Sache im Kopf. Wenn Sie Änderungen am Tablet vornehmen, wirkt sich dies auf die mobile Landschaft und den mobilen Port aus, oder? Aber es wird auch keinen Einfluss auf den Basis-Breakpoint haben. Wenn Sie Änderungen am Handy vornehmen, dies keine Auswirkungen auf das Tablet und den Basis-Breakpoint. Also behalte diese Dinge im Kopf. Lassen Sie uns mit dieser Kachelung und der Tablet-Ansicht beginnen. Im Header-Bereich wähle ich den Container aus, der sich unter dem Header rep befindet. Hier konnten wir sehen, der Inhalt so nah am Rand dieser Tablet-Ansicht liegt. Zuerst ändere ich die maximale Breite dieses Containers 100 Prozent , sodass er 100 Prozent einer Breite einnimmt. Jetzt gehe ich zum Abstand davon und gebe den Füllwert links als 30 Pixel an. Jetzt können Sie auf der Leinwand sehen, dass auch die anderen Elemente betroffen sind, da wir im gesamten Abschnitt den Container mit demselben Klassennamen verwenden , Container. Wenn wir also Änderungen an diesem Container vornehmen, wirkt sich das auch auf alle anderen Elemente , die alle den Klassennamen-Container verwenden. Okay, zurück zum Styling, jetzt müssen wir den Abstand und das richtige angeben. Also gebe ich den Füllwert oder das Rechte als 30 Pixel an. Wir haben geholfen, den Abstand zu schaffen. Jetzt wähle ich unter der Navigationsleiste einen Container aus. Wir brauchen nicht so viel Abstand auf jedem n. Jetzt muss ich den Wert ändern. Beachten Sie jedoch, dass wir auch hier den vorhandenen Klassennamen-Container verwenden. Wenn Sie eine der Änderungen hier vornehmen, wirkt sich dies auf die anderen Elemente aus, die alle diesen ClassName-Container verwenden. Um das zu vermeiden, erstelle ich einen anderen Klassennamen als Header-Mindestabstand. Ändern wir nun den Füllwert links auf Null und rechts auf Null. Jetzt hat es keine Auswirkungen auf die anderen Elemente, die die Container-Klasse verwenden. Wir haben den Header-Bereich fertiggestellt. Jetzt gehe ich zum Hero Wrap-Bereich über. Im Heldenbereich habe ich das Heldenbereichsraster gewählt. Also hier, wenn wir die Spalten verwenden, scheinen die Elemente darin so klein zu sein. Um das zu vermeiden, muss ich eine der Spalten löschen. Der Inhalt wird also wie eins nach dem anderen aussehen. Dazu gehe ich unter das Bearbeitungsraster und lösche eine der Spalten. Lassen Sie uns nun die Spaltengröße auf eins anpassen , sodass sie die gesamte Bildschirmbreite einnimmt. Jetzt wähle ich den Hero-Live-Bereich aus. Nun, Sie konnten sehen, dass das auf der linken Seite eine Menge Abstand ist. Unter dem Abstand gebe ich also den Füllwert oder den linken Wert als Null an. Damit der Inhalt in den Mittelpunkt gerückt wird, begründe ich ihn gegenüber der Mitte. Und außerdem brauchen wir nicht so viel Größe für den Hero-Gebietstitel. Mit einer Auswahl von Hero-Gebietstiteln ändere ich die Größe auf 50 Pixel, aber es sieht so klein aus. Also nochmal, ich ändere den Wert auf 55 Pixel. Der Inhalt der Heldensektion und des Bildes sehen so nah beieinander aus. Wir müssen einen Abstand zwischen diesen beiden schaffen. Also wähle ich diesen Hero Lift-Bereich aus. Für den Abstand gebe ich den Randwert unten also 40 Pixel an. Jetzt habe ich das Gefühl, dass sich der Inhalt des Heldenabschnitts mit einem gewissen Abstand auf der linken Seite befindet. Mit der Auswahl des Helden im linken Bereich. Ich entscheide mich für die Linke in der Aussage. Und dann gehe ich zum Abstand und gebe den Füllwert auf der linken Seite 40 Pixel an. Wir haben also den Header-Bereich und den Helden-Rep-Bereich fertiggestellt . Gehen wir zum Abschnitt B über. Im Bereich Dienste müssen wir die Anpassungen für den Inhalt der Sowjets vornehmen. Lassen Sie uns hier den Inhalt des Service-Grid S erstellen , wobei die ersten beiden Inhalte nebeneinander und der letzte Inhalt unter den ersten beiden Inhalten liegt. Dafür wähle ich das immer als Raster. Ich gehe unter das Bearbeitungsraster. Wie gesagt, wir brauchen eine Führungskraft, um weiterhin an der Spitze zu stehen. Also lösche ich eine der Spalten. Die dritte Spalte wird unter die ersten beiden Inhalte fallen. Jetzt konnten wir sehen, dass der zweite Inhalt weniger App ist als der erste Inhalt. Wir müssen eine korrekte Ausrichtung auf den ersten und zweiten Inhalt vornehmen. Ich wähle den zweiten und gehe unter die Position da wir den Wert dafür als -100 oder den oberen Wert erhalten. Lassen Sie mich den Wert auf Null ändern. Nun zurück zum dritten Inhalt, ich gehe zur Position und ändere den Positionswert wieder auf Null. Also haben wir das Dienstleistungsnetz ordentlich weggelassen. Jetzt springe ich zum Abschnittstitel. Hier. Ich werde die Größe dieses Titels ändern. Seien wir 45 Pixel, springen wir zum Untertitel des Abschnitts, das ist ein Dienst, ich ändere die Größe auf 30 Pixel. Jetzt haben wir die Gestaltung des Bereichs Services abgeschlossen. Lassen Sie uns nun zum Galeriebereich springen. Im Galeriebereich konnten wir den Inhalt, der sich innerhalb des Rasters befindet, nicht anzeigen. Also lass uns die, jeden ihrer Inhalte eins unter den anderen vier machen , für die ich zuerst die Galerie auswähle, gerade. Jetzt wähle ich das Bearbeitungsraster aus und lösche eine der Spalten, damit der Inhalt seine volle Breite annimmt Lassen Sie mich die Spaltengröße auf einen Schlag anpassen. Wir haben das erste Raster fertiggestellt. Wählen wir nun das zweite Grid der Galerie aus. Mit einer Auswahl von „Raster bearbeiten“. Ich lösche eine der Spalten. Jetzt gehe ich zurück zum Bereich Dienste. Oben in diesem Abschnitt konnten wir sehen, dass es eine Menge Abstände gibt. Den Abstand, ich ändere den Füllwert oder den oberen Wert auf 80 Pixel, den unteren auf hundert Pixel. Jetzt gehe ich zurück zum Galeriebereich. Selbst hier haben wir oben viel Abstand. Lassen Sie mich also den Füllwert für den Hund auf 80 Pixel und für den unteren auf 100 Pixel ändern . Gehen wir nun zum Workshop-Bereich. Oben gibt es viele Abstände, also ändere ich jetzt den Abstand um 200 Pixel , um den Inhalt zu erstellen, und eins unter dem anderen, ich wähle dieses Workshop-Raster und lösche eines von die Kolumne. Und lassen Sie uns die Größe der Spalte auf eins für ändern, um den Abstand zwischen dem Workshop-Inhalt und dem Workshop-Bild zu schaffen . Ich wähle diesen Workshop Image Wrap aus. Ich gehe unter den Abstand und gebe den Randwert oben als 40 Pixel an. Wir haben den Workshop-Abschnitt abgeschlossen. Gehen wir zur CMI-Arbeit über , das ist der Modus Mean. Ich habe auch hier den CMA Work Wrap ausgewählt. Ich werde jeden Inhalt so einstellen, dass er unter zwei liegt. Und dafür wähle ich dann sein Raster aus. Ich gehe zum Bearbeitungsraster, da es drei Spalten hat. Also lösche ich zwei Spalten , um die volle Breite zu erhalten. Ich passe die Größe der Spalte auf eins an. Dieser Abschnitt hat oben und unten viele Abstände. Also wähle ich einen CMA-Zeilenumbruch aus und ändere den Füllwert für die oberen und unteren 200 Pixel. Jetzt müssen wir einen kleinen Abstand zwischen den Autoren schaffen , um eine Autorenbiografie zu zeichnen. Dafür wähle ich einen anderen Bio-Vertreter aus. Und ich gehe zum Abstand. Ich gebe den Randwert auf 20 Pixel oben und 40 Pixel unten. Um den Abstand zu reduzieren. Und am Ende dieses Abschnitts wähle ich aus, siehe meinen Arbeitsbereich, das ist die Enddissektion. Ich gehe zum Abstand und lasse mich den Füllwert unten auf 60 Pixel ändern . Lassen Sie uns erneut den Füllwert oben auf 80 Pixel ändern . Wir haben diesen Abschnitt abgeschlossen. Gehen wir zum Abschnitt Lizenzierung über. Auch im Abschnitt Lizenzierung haben wir das Grid-Modell verwendet. Auch hier. Wir werden die einzelnen Inhalte so gestalten , dass sie einander untergeordnet sind. Dafür gehe ich mit einer Auswahl von Lizenzierungsrastern in das Bearbeitungsraster und lösche ein aus der Spalte. Und geben wir den Spaltenwert eins, um den Abstand zwischen dem Bild und dem Inhalt zu erzeugen . Ich wähle den Inhaltsblock für die Lizenzierung und gebe den Randwert oben dafür als 60 Pixel an . Wir konnten sehen, dass wir den Abstand für den Tab-Inhalt bearbeiten müssen. Dafür. Ich wähle den Tab falsch aus und gehe zum Abstand. Lassen Sie uns einen Füllwert dafür anpassen. Oben gebe ich ihm 70 Pixel an. Für die unteren beiden gebe ich den Wert 70 Pixel an. So konnten wir jetzt überall sehen, dass der Abstand gerade ist. Aber ich habe das Gefühl, dass der Abstand links und rechts verringert werden sollte. Also gebe ich den Füllwert für links und rechts jeweils 50 Pixel an. Jetzt wähle ich den Titel des Tab-Inhalts. Ich werde die Größe verkleinern , um den Größenwert zu reduzieren. Lassen Sie mich den Größenwert als 40 Pixel angeben. Jetzt wähle ich den Absatz aus. Und in der Auswahl wähle ich alle Absätze aus und ändere den Größenwert auf 18 Pixel. Wir haben den Abschnitt mit dem Tab „ Lizenzierung“ abgeschlossen. Jetzt gehe ich zum Testimonial-Bereich über. In diesem zweiten Abschnitt verwenden wir das Grid-Modell. Dabei müssen wir dafür sorgen, dass jeder Inhalt einem Gegenmittel entspricht. Dafür wähle ich das Testimonial-Raster mit der Auswahl des Rasters bearbeiten und lösche eine der Spalten, da sie viele Abstände und den oberen Rand hat. Also wähle ich den Testimonial-Bereich aus. Ich ändere den Füllwert oben auf 60 Pixel. Wie im Testimonial-Artikel gibt es viele Abstände. Mit der Auswahl des Referenzartikels. Ich ändere den Füllwert auf der linken Seite, 250 Pixel. Und für das Recht dazu gebe ich den Wert mit 50 Pixeln an. Auch hier ändere ich den Füllwert für die oberen und unteren 250 Pixel, sodass der Inhalt im Testimonial-Element gleichmäßig verteilt ist. Der Inhalt des Testimonials scheint gebacken zu sein. Mit einer Auswahl an Testimonial-Inhalten. Ich ändere die Topografiegröße auf 25 Pixel. nun die Änderungen am ersten Empfehlungselement rückgängig machen, wird es an andere Empfehlungsartikel vererbt. Um den Abstand und die Unterseite für diesen Testimonial-Abschnitt zu reduzieren, wähle ich nun die Unterseite für diesen Testimonial-Abschnitt zu reduzieren, wähle diesen Testimonial-Abschnitt aus. Ich ändere den unteren Wert für das Padding auf 80. Lassen Sie uns nun zum Preisbereich springen. Wie im Preisbereich oben ist der Abstand größer. Also nehme ich den Füllwert oben als 80-Pixel-Preisabschnitt. Wir haben ein Grid-Modell verwendet. Also wähle ich dieses Preisraster. Unter dem Bearbeitungsraster. Ich lösche eine aus der Spalte. Da wir den Umfang der Preisliste anpassen müssen. Also wähle ich diesen Preislistenwechsel aus und ändere die Position von absolut zu relativ. Der Inhalt der Preisliste wurde verstanden. Jetzt konnten wir sehen, dass es viel Abstand gibt und dass sie gelebt haben. Also nochmal, in der Position ändere ich den Wert links auf 0%. Das Gleiche mache ich, oder? Jetzt müssen wir die Größe des Preistitels anpassen. Ich ändere die Größe auf 45 Pixel. Lassen Sie uns erneut die Größe für den Preis auf 60 Pixel ändern. Um den Abstand zwischen diesen Preispositionen zu erstellen. Ich wähle den Preissatz aus. Ich gehe zum Bearbeitungsraster. Und ich gebe den Wert für den Zeilenabstand auf 50 Pixel. Im Preisbereich gibt es unten viel Abstand. Im Abschnitt „ Preisauswahl ändere ich den Füllwert unten auf 140 Pixel. Wir haben den Abschnitt mit der Preisgestaltung abgeschlossen. In der nächsten Lektion werden wir den verbleibenden Abschnitt abschließen. Wir brauchen es nur für den Tablet-Brepoint. 47. Tablet View Responsive – Teil 2: In dieser Lektion werden wir das gesamte für den Tablet-Breakpoint benötigte Styling im Blockbereich fertigstellen für den Tablet-Breakpoint benötigte Styling im Blockbereich Lassen Sie uns das Styling für den Blogeintrag vornehmen. Wie hier haben wir die Datenerfassungsliste verwendet. Wenn Sie also die Änderungen an einem der Blogeinträge vornehmen, wirkt sich dies automatisch auf die anderen Elemente , sodass Sie nicht einzeln untergeordnet werden müssen. Also wähle ich jetzt diesen Blogartikel aus. Jetzt mache ich das Styling dafür. Standardmäßig ist die Richtung dieses Layouts horizontal. Lass es uns vertikal machen. Jetzt wähle ich den Blog-Inhaltsbereich da mehr Platz vorhanden ist, oder den linken. Jetzt gebe ich unter dem Abstand den Null-Pixelwert für das linke Padding an. Hier konnten wir feststellen, dass einer der Blogeinträge nach unten gedrückt ist. Wir müssen also dafür sorgen, dass der ältere Blogartikel ordnungsgemäß mit dem ausgewählten Blog-Titel übereinstimmt. Ich werde die Größe reduzieren, da sie viel größer aussieht. Lassen Sie uns die Größe auf 28 Pixel ändern. Wir konnten im Canvas sehen alle Blogartikel aufeinander abgestimmt sind. Jetzt müssen wir das Styling für das Veröffentlichungsdatum und den Bestellnamen vornehmen. Also wähle ich die Blockmetallfolie aus. Und lass mich dir die Richtung des Layouts auf vertikal männlich geben , die nach links ausgerichtet, ausgerichtet wie hier, wir brauchen kein Trennzeichen. Also stelle ich den Blog-Metallseparator ein und wähle keinen unter dem Display , damit alle Elemente ausgeblendet werden. Um den Abstand zwischen dem Veröffentlichungsdatum und dem Namen des Autors zu ermitteln, wähle ich diesen Blog-Metallwert aus. Ich mache den Füllwert unten, S, N Pixel. Lassen Sie uns nun den Abstand zwischen der Blog-Metallfolie und dem Blog-Extra reduzieren . Also wähle ich diese Blog-Metallfolie aus. Und ich werde den Randwert unten auf zehn Pixel ändern . Und lassen Sie mich den Füllwert auf dem unteren Pixel ändern. Lassen Sie uns nun den Abstand am unteren Rand des Blockabschnitts ableiten . Um das zu tun, reduziere ich den unteren Füllwert auf 40 Pixel. Wir haben den Blockabschnitt abgeschlossen. Gehen wir zum FAQ-Bereich über. Im FAQ-Bereich haben wir das Grid-Modell verwendet. Innerhalb des Rasters haben wir einen Abschnittstitel und einen Inhaltsbereich. Wir müssen den Inhaltsbereich so gestalten sich am Ende des Titels befindet. Dafür wähle ich ein FAQ-Raster und lösche eine der Spalten. Und lassen Sie uns die Größe auf eins ändern. Das ist insgesamt ein großer Abstand in diesem FAQ-Abschnitt. Also muss ich den Abstand reduzieren. Bei der Auswahl des FAQ-Inhaltsumschlags reduziere ich also den Wert des linken Abstands auf 40 Pixel. Falte das rechte Bild auf 40 Pixel auf. Und lassen Sie uns den Füllwert oben und unten ändern , 260 Pixel. Lassen Sie uns nun die Größe dieser Artikel entsprechend ändern. Aber die Auswahl der Akkordeon-Frage, ich verwende die Größe schon auf 28 Pixel. Wir haben den gleichen Klassennamen für die übrigen Elemente verwendet. Es ist also automatisch, ich vergesse alle anderen Gegenstände. Wir haben den FAQ-Bereich abgeschlossen. Gehen wir zum Abonnementformular über. In der Untergrafik davon gibt es oben viel Abstand. Also werde ich den Polsterwert oder das Drehmoment des JHU AT-Pixels reduzieren . Der Inhalt des Abonnementformulars scheint gut zu sein, also lasse ich es so, wie er ist. Gehen wir zum Abschnitt mit dem Kontaktformular , um den Abstand oben zu verringern. Lassen Sie mich den Füllwert auf den oberen 280 Pixeln ändern , damit der Inhalt innerhalb des Rasters einspaltig ist. Ich wähle das Kontaktformularraster unter dem Bearbeitungsraster Ich lösche eine der Spalten. Und lassen Sie uns die Größe auf eins ändern , um die volle Breite einzunehmen. Jetzt wähle ich das Kontaktformular D Delbruck aus, um den Abstand oben und unten zu reduzieren. Lassen Sie mich den Füllwert und die oberen 250 Pixel ändern. Und für den unteren Wert als 70 Pixel. Jetzt müssen wir die Größe für Post, Telefon und Adresse reduzieren . Also wähle ich das Detail Tidal und verwende eine andere Typografie. Lassen Sie uns die Größe auf 28 Pixel ändern. Lassen Sie uns nun das Styling für den Mitarbeiter der Kontaktformularfelder Mit der Auswahl der Kontaktformularfelder werde ich den Abstand innerhalb des Mitarbeiters anpassen oder verringern . Jetzt ändere ich den Padding-Wert oder den linken Wert auf 40 Pixel. Jetzt ändere ich den Füllwert oben und unten auf 60 Pixel. Da zwischen dem Kontaktformularbereich und dem Fußzeilenbereich ein großer Abstand besteht. bei der Auswahl des Kontakts aus dem Abschnitt Lassen Sie mich bei der Auswahl des Kontakts aus dem Abschnitt den Füllwert unten auf 80 Pixel ändern . zwischen dem Kontaktformular, einem Detail und einem Kontaktformular aus. Der Abstand ist geringer. Mit einer Auswahl an Kontaktformularrastern. Ich gehe zum Bearbeitungsraster und ändere den Zeilenabstand auf 30 Pixel. Für den Spaltenabstand wechsle ich auf 16 Pixel. Sehen wir uns nun den Fußzeilenbereich an. In der Fußzeile haben wir Obst oder soziale Artikel. Denn einige der sozialen Gegenstände überschreiten bei der Auswahl von Lebensmitteln oder sozialen Gegenständen die Grenzen. Ich gehe unter die Größe und gebe die Breite auf 100% an. Damit die Inhalte innerhalb der sozialen Medien die gesamte Breite des Tablet-Punkts einnehmen. Jetzt werden wir alle sozialen Elemente in einer vertikalen Reihenfolge ordnen. Dafür ändere ich bei der Auswahl des lebensmittelbezogenen Artikels die Richtung in eine Vertikale. Jetzt müssen wir den Abstand zwischen den einzelnen sozialen Elementen schaffen . Also wähle ich den Diblock mit dem Namen Social Item aus. Unter dem Abstand gebe ich den Wert für den unteren Rand als 20 Pixel an. Im Fußzeilenbereich sich der Copyright-Bereich. Wählen wir also diesen Copyright-Bereich aus, da sich der Inhalt innerhalb des Copyright-Bereichs in einer horizontalen Position befindet. Jetzt müssen wir es vertikal machen. Bei der Auswahl des Copyright-Bereichs ändere ich also die Richtung zwei vertikal, ändere ich also die Richtung zwei um den Abstand zwischen dem Menü-Wrapper und dem Inhalt zu schaffen . Ich wähle den Copyright-Menü-Wrapper aus. Ich gehe unter den Abstand. Ich gebe den Wert für den Hauptrand auf 20 Pixel. Ganz oben bei der Lebensmittelbeschränkung gibt es viel Platz. Also gebe ich den Polsterwert oder das Drehmoment auf 50 Pixel. Nehmen wir an, ob jeder Abschnitt richtig ausgerichtet ist. Lassen Sie uns jetzt das Styling für die mittlere Taste darin vornehmen, aber für die Menütaste werde ich die Ränder erstellen. Also gehe ich unter die Grenzen. Wenn Sie diese Kachel auswählen, machen Sie eine durchgezogene Linie. Und lassen Sie uns die Randfarbe von diesem Farbfeld in die Primärfarbe ändern . Lassen Sie uns nun den Abstand zwischen dem Namen und der Menüschaltfläche erstellen . Lassen Sie mich unter dem Abstand den Randwert oder den linken bis 20 Pixel angeben. Jetzt wähle ich die Menüschaltflächeneinstellung, um die älteren Menüs innerhalb der Menüschaltfläche anzuzeigen Lassen Sie mich die Anzeige unter dem Menü aktivieren. Also werden alle Menüelemente auf der Leinwand angezeigt. Jetzt müssen wir die Hintergrundfarbe für dieses Now-Amino ändern . Also mit der Auswahl von jetzt Minow, und ich wähle die Farbe Weiß. Das ist ein großer Abstand auf der linken Seite für den Nennwert. Also ändere ich den Füllwert oder den linken Wert auf Null. Jetzt müssen wir die Hintergrundfarbe für die Menüschaltfläche im geöffneten Zustand ändern die Hintergrundfarbe für die . Jetzt gehe ich unter die Hintergründe und ändere die Farbe vom Farbfeld in die Primärfarbe. Jetzt müssen wir den Inhalt innerhalb der Menüschaltfläche mit einer minimalen Auswahl verstecken den Inhalt innerhalb der Menüschaltfläche mit einer minimalen Auswahl . Dann gehe ich unter die Einstellung und aktiviere die Option Ausblenden. In dieser Lektion haben wir also jedes Styling abgeschlossen , das für den Breakpoint des Tablets erforderlich ist. In der nächsten Lektion werden wir das Styling für den Breakpoint in der Telefonlandschaft vornehmen. 48. Mobile Landschaftsansicht: In dieser Lektion werden wir eine Website erstellen, die auf das Mobiltelefon reagiert, das sich im Querformat befindet. Lass uns das machen. Zuerst. Lassen Sie uns das Styling im Header-Bereich vornehmen. Im Kopfbereich werden wir die Marke und die Schaltfläche auf der linken Seite, die Menütaste und die Telefonnummer auf der rechten Seite erstellen. Mal sehen, wie wir diesen Teil machen werden. Zuerst wähle ich aus, dann nach außen. Und oben gibt es viel Abstand. Also erhöhe ich den Füllwert oben auf 20 Pixel. Und wieder ändere ich den Füllwert unten auf 20 Pixel. Wir müssen den Abstand zwischen der brandneuen Menütaste und der Taste und der Telefonnummer festlegen. Also wähle ich den linken Headerbereich aus. Ich gebe den Randwert unten auf zehn Pixel, um die Marke oder die linke Seite und die Menüschaltfläche zu machen . Auf der rechten Seite wähle ich den Header in voller Breite. Ich gehe auf eine andere Ebene. Ich wähle die Streckausrichtung, sodass die Artikel über die gesamte Breite des Containers gestreckt werden . Jetzt müssen wir die Anmeldeschaltfläche links und die Telefonnummer rechts platzieren. Also wähle ich den Header-Bereich aus und gehe zum Layout und wähle den Abstand zwischen den Unterseiten , um sicherzustellen, dass die Elemente darin gleichmäßig von Kante zu Kante verteilt sind. Jetzt haben wir das Styling für den Header-Teil übernommen. Konzentrieren wir uns nun auf den Hero Wrap-Bereich. Hier müssen wir die Größe des Titels und des Untertitels reduzieren . Also wähle ich den Titel Hero Area. Ich passe die Größe bei Lost an. Ich schließe mit 40 Pixeln ab. Wählen wir den Untertitel für den Heldenbereich und reduzieren wir die Größe auf 30 Pixel. Ich komme zum Button. Es hat überall viel Platz. Also wähle ich die Schaltfläche und gehe zum Abstand. Ich ändere den Füllwert oben und unten auf 20 Pixel. Für links und rechts ändere ich den Wert auf 40 Pixel. Jetzt bekommen wir den gewünschten Stil. Der Abschnitt mit den Heldenvertretern ist abgeschlossen. Lassen Sie uns zu diesem OB-Abschnitt springen, hier sollte die Titelgröße wiederverwendet werden. Also wähle ich den Abschnittstitel aus und passe die Größe an, bis wir die gewünschte Größe erhalten. Jetzt wähle ich den Untertitel des Abschnitts und passe die Größe an. Im mobilen Landscape Breakpoint werden wir das Serviceelement so gestalten, dass es eins nach dem anderen aussieht , sodass ich unter Bearbeiten das Raster der Sowjets auswähle. Ich lösche eine der Spalten und gebe den Zeilenabstand auf 30 Pixel, sodass wir das gemacht haben, jedes Serviceelement, das geliebt werden soll, eins nach dem anderen, hat innerhalb des Serviceartikels viel Abstand oder weniger . Ändern wir also den Padding-Wert oder den Lift auf 40 Pixel. Und das Gleiche galt für das Recht. Geben wir für die obere und untere Hälfte den gleichen Füllwert wie 40 Pixel an. Um den Abstand zwischen dem Symbol und dem Diensttitel zu verringern . Ich wähle den Umbruch des Service-Icons und gebe ihnen den Audion-Wert unten auf 20 Pixel . Wenn ich den Audion-Wert unten auf 20 Pixel zum Diensttitel komme, wurde der Randwert unten auf zehn Pixel geändert. Und lassen Sie uns auch die Größe anpassen. Lassen Sie uns das Styling für den Absatz im Selektor vornehmen. Ich wähle die alten Absatz-Tags. Ich ändere die Größe auf 17 Pixel. Jetzt machen wir das Styling für den Galeriebereich. Darin befindet sich ein Galerieobjekt. Im Galerieelement überlappt der Titel das Bild und ist auch nicht sichtbar. Also hier werden wir das Hintergrundbild entfernen und das Styling für den Inhalt vornehmen , der sich darin befindet. Hier habe ich das Galerieelement in der Auswahl ausgewählt, wir konnten sehen, dass es zwei Klassen als Galerieobjekt und Galerie zu gibt. Wenn wir eine der Änderungen vornehmen, wird sie für ein Liter-Sekunden-Galerieobjekt angewendet. Jetzt gehe ich unter die Hintergründe im Bild und den Farbverlauf. Ich entscheide mich für Ausblenden. Anstelle der Transplantationsfarbe. Ich gebe die Farbe in Hexadezimal an. Jetzt habe ich die Galerie mit dem Titel Wrapper ausgewählt. Im Inneren gibt es viel Abstand auf der Unterseite. Also unter dem Abstand setze ich den unteren Füllwert auf 40 Pixel. Jetzt haben wir also einen beträchtlichen Abstand. Jetzt müssen wir die Höhe dieses Galerieelements reduzieren . Unter dieser Größe. Ich gebe ihnen eine Mindesthöhe 400 Pixeln, um den Gesamtabstand innerhalb des Galerieelements zu reduzieren. Sehen wir uns die Füllwerte an. Oben werde ich 50 Links nehme ich den Asphalt. Und unten ändere ich es auf 50 Pixel. Aber auch hier gibt es viel Abstand. Also werde ich jetzt den Mindesthöhenwert ändern. Wir werden das gleiche Design für das andere Galerieelement erstellen . Hier wähle ich das dritte Galerieelement aus und gebe den Wert für die Mindesthöhe an, also 300 Pixel. Jetzt verstecken wir das Hintergrundbild. Also wähle ich unter den Hintergründen und unter dem Bild und dem Farbverlauf die Höhe für das Hintergrundbild und geben wir ihm eine Hintergrundfarbe. Jetzt wähle ich das vierte Galerieelement aus. Dafür verstecke ich das Hintergrundbild. Lassen Sie uns erneut Wert für die Mindesthöhe auf 300 Pixel festlegen. Geben wir ihm eine Hintergrundfarbe dafür. Der Inhalt des Fotogalerieelements befindet sich in horizontaler Position. Wir müssen es so vertikal machen. Also wähle ich die Galerie Tidal Align aus und gehe unter das Layout. Ich ändere die Richtung auf vertikal. Richten wir es nach links aus. Wir haben das Styling für die drei Galerieartikel abgeschlossen. Gehen wir zum ersten Galerieelement über. Hier verstecken wir das Hintergrundbild. Und wir setzen die Mindesthöhe auf 300 Pixel. Und geben wir ihm auch eine Hintergrundfarbe dafür. Lassen Sie uns nun den Gesamtabstand im ersten Galerieelement anpassen . Abstand, ich ändere den oberen Füllwert auf 50 Pixel. Gleiche gilt für den Boden. Für die linke Seite ändere ich es auf 40 Pixel. Jetzt haben wir den Galeriebereich abgeschlossen. Gehen wir zum Workshop-Bereich über. Im Workshop-Bereich ist das der Abstand oben. Lassen Sie mich also den Füllwert oben auf AD-Pixel reduzieren . Der Inhalt im Workshop-Abschnitt scheint in Ordnung zu sein. Lassen Sie uns zum CMA-Arbeitsbereich übergehen. Das ist der Abschnitt Über mich. In diesem Abschnitt werde ich den Abstand oben reduzieren. Lassen Sie uns den Füllwert auf den oberen 280 Pixeln ändern. Und wieder werde ich den Abstand reduzieren und das Mortem reduzieren, um den Abstand auf der linken Seite zu verringern. Lassen Sie mich den Wert auf 60 ändern. Jetzt gehe ich zum Abschnitt Lizenzierung über. Darin. Ich wähle die Tippbiegung des Tab-Inhalts. Und lassen Sie uns den gesamten Polsterwert für die Turbine reduzieren . Hier müssen wir die Größe des Tab-Inhaltstitels reduzieren. Lassen Sie mich den Wert der Größe auf 35 Pixel angeben. Jetzt habe ich allerdings für Person-Day-Wrap ausgewählt, diese Rap-Richtung ist horizontal. Aber hier müssen wir den Inhalt vertikal gestalten. Unter dem Layout wähle ich also die Richtung S statt ethisch, und lassen Sie uns sie nach links ausrichten. Jetzt müssen wir den Inhalt des Angebots so ziehen, dass er nach links gezogen wird. Sagen wir also, der Füllwert links auf Null, um den Abstand zwischen dem Angebotswert und dem Angebotsinhalt zu ändern Ich gebe den Margenwert oben an. Mache 20 Pixel für diesen Angebotsinhaltsrep. Jetzt bin ich zum Testimonial-Bereich übergegangen. Lassen Sie uns den oberen Füllwert auf 40 Pixel reduzieren. Kommen wir nun zum Testimonial-Beitrag . Für die mobile Landschaftsansicht bezeichnen wir dieses große Testimonial-Objekt. Also müssen wir den Abstand überall reduzieren. Dafür reduziere ich den Füllwert auf der linken Seite um 230 Pixel. Ich gebe den Abstand oder weniger auf 30 Pixel an. Was den Inhalt des Testimonials angeht, müssen wir den Abstand und den Zeh reduzieren. Und dafür müssen wir auch die Schriftgröße reduzieren. Also unter der Typografie gebe ich der Pixelgröße einen Wert . Da es sich um die mobile Ansicht handelt, müssen wir dieses Testimonial so gestalten dass es sich in einer senkrechten Leiter befindet. Also mache ich die Richtung vertikal und richte mich nach links aus. Außerdem benötigen wir einen Abstand zwischen dem Kundendetailumschlag und einem Warteschleifen für den Kunden. Also mit der Auswahl des Clients, der Rap schreibt und den Padding-Wert oben auf zehn Pixel angibt. Kommen wir nun zurück zum Inhalt des Testimonials Wir müssen den Abstand am Modell reduzieren. Also gebe ich den Füllwert und den unteren Wert auf zehn Pixel. Sie könnten feststellen, dass zwischen den Testimonials ein großer Abstand besteht. Also ändere ich den Wasserrandwert, mache 40 Pixel. Wir müssen nicht jedes einzelne Testimonial-Objekt erreichen da wir für jedes einzelne Zeugnis denselben Klassennamen verwendet haben . Wir haben den Abschnitt mit den Testimonials abgeschlossen. Jetzt gehe ich zum Preisbereich über. Im Preisbereich wähle ich die Preisliste und muss sie verkleinern . Also gebe ich den Wert als 30 Pixel an. Das Gleiche gilt für den Preis. Ich ändere die Größe auf 40 Pixel. Als nächstes kommen wir zu dem Preiselement , das den gesamten Loop-Block Wir müssen den Abstand links und rechts reduzieren. Ich mache den Füllwert links und rechts auf 50 Pixel. Das Gleiche müssen wir oben und unten tun. Also ändere ich den Füllwert oben und unten auf 30 Pixel, wir müssen den Abstand reduzieren. Also gebe ich den Wert als 50 Pixel an. Kommen wir nun zur Preisliste RAB Ändern wir den Margenwert oder den D2, 20 Pixel. Jetzt werde ich den Füllwert reduzieren, Oliver, für den Vertreter der Preisliste. Die Umrandung der Preisschaltflächen befindet sich weit unten, daher müssen wir den Abstand oben reduzieren. Also bringe ich dem Hund den Polsterwert 20 Pixel bei. Für jedes der Listenelemente reduziere ich die Größe immer noch um 18 Pixel. Sehen wir uns den Randwert für dieses Listenelement von oben nach unten auf 20 Pixel an. Wir haben die Änderungen für den Preisartikel vorgenommen. Es wird automatisch an die nächste Preisposition vererbt die nächste Preisposition , da es denselben Klassennamen verwendet. Jetzt gehe ich zum Blog-Bereich über. Ein weiterer Blogbereich, ich habe den Blog-Titel ausgewählt. Die Größe dieses Blogtitels scheint etwas klein zu sein, daher neige ich dazu, seine Größe auf 30 Pixel zu erhöhen. Lass uns den Abstand vergrößern, wir machen den Blog Metal Wrap und den Blog extra. Bei der Auswahl des Blogs Mehta gebe ich also den modernen Wert unten auf 20 Pixel. Die Änderungen, die wir vorgenommen haben, werden automatisch an die anderen Blogartikel übernommen. Jetzt bin ich hier zum FAQ-Bereich gekommen. Ich werde den Füllwert oben für den Abschnitt 240 Pixel reduzieren den Füllwert oben für den Abschnitt und komme zum FAQ-Inhalt RAB Lassen Sie uns den Füllwert ändern. Hier habe ich den gleichen Wert oder Level festgelegt. Und am Anfang scheint der Abschnitt mit dem Titel Größe in Ordnung zu sein. Lass uns zum Akkordeon-Double springen. Wir müssen den Umfang dieser Frage reduzieren , die darin enthalten ist. Also habe ich eine entsprechende Frage ausgewählt. Ich gehe auf die Topographie ein und reduziere die Größe auf 20 Pixel Das wirkt sich automatisch auf die anderen Fragen aus. Haben wir die Änderungen am FAQ-Bereich vorgenommen? Jetzt bin ich zum Anmeldeformular gekommen. Die Form ist so nah am Rand. Wir müssen das entsprechende Styling für dieses Formular vornehmen. Zuerst erstelle ich einen Abstand zwischen dem Anmeldeformular , einem FAQ-Bereich. Also gebe ich den Randwert oben auf 40 Pixel. Jetzt habe ich das Abonnementformular Flakes ausgewählt. Wir müssen den Inhalt, der sich in einem Abonnement von Flex befindet, so gestalten , dass er im Artikel ist . Bei der Auswahl von Formular-Flakes zum Abonnieren wähle ich also die Richtung, die vertikal verläuft , und richten wir sie nach links aus, um einen Abstand zwischen dem Eingabefeld und einer Abonnement-Schaltfläche zu schaffen und Auswahl des Eingabe-Wrappers für tiefgestellte Formulare. Und ich gebe den Randwert unten auf 20 Pixel. Die Unterseite dieses Eingabefeldes befindet sich so nah am Rand. Wir müssen die Änderungen vornehmen. Um das mit einer Auswahl von Formularblöcken zum Abonnieren zu tun , gehe ich zu der Größe darunter. Ich ändere die Breite auf 100%, wenn ich sie auf 100% mache Der Inhalt darin wird innerhalb der Breite von 100% liegen. Dieser Abschnitt ist L Word. Gehen wir zum Abschnitt Kontaktformular über. Dafür ändere ich den Füllwert oder den Hund auf 40 Pixel. Und jetzt habe ich das Kontaktformular-Detail ausgewählt. Rob, ich ändere den Füllwert, 60 Pixel für links und rechts. Und für das Gespräch ändere ich den Wert auf 40 Pixel. Wir müssen die Größe der E-Mail-Telefonadresse reduzieren. Also habe ich den detaillierten Titel ausgewählt und ändere die Größe unter der Typografie auf 25 Pixel. Jetzt müssen wir die Größe der E-Mail, der ID, der Telefonnummer und der Adresse ändern . Dies ist alles, was wir für diesen Detailtitel benötigen. Also habe ich den Kontakt-Link ausgewählt und mache eine andere Typografie und ändere den Wert, um ihn in Pixeln zu unterstützen. Wir müssen dafür sorgen, dass alle Eingabefelder in vertikaler Reihenfolge angeordnet sind. Ich habe den Eingabefeldumbruch ausgewählt und wähle die vertikale Richtung. Alle Eingabefelder werden also in vertikaler Richtung angezeigt. Um den Abstand zu reduzieren. Auf der linken Seite habe ich den Formulareingabe-Wrapper ausgewählt und setze den Randwert links auf Null. Wir müssen dasselbe für den Formulareingaben-Wrapper tun , also für die Nachricht. Also setze ich die stärkere Abwertung auf der linken Seite auf Null. Schon wieder. Nochmals, machen Sie diesen Admin-Button auf der linken Seite. Also ändere ich den Margenwert auf der linken Seite auf Null. Jetzt haben wir unsere Website so gestaltet dass sie auf die mobile Landschaft reagiert. In der nächsten Lektion werden wir das im Handycode glänzen, richtig. 49. Mobile Porträtansicht Responsive: In dieser Lektion werden wir uns Design für den mobilen Port befassen, oder? Bruchpunkt. Zuerst beginne ich mit dem Header-Bereich , also dem Header-Wrapper-Integer. Ich muss die Anmeldeschaltfläche und die Telefonnummer angeben, um in den Artikeln enthalten zu sein. Also wähle ich den Header-Bereich und ich wähle die vertikale Richtung. Geben wir den Abstand für die Kopfzeilenschaltfläche an, für die obere und die untere. Mit einer Auswahl der Header-Schaltfläche setze ich den modernen Wert oben auf zehn Pixel. Auch hier gebe ich den Wert als zehn Pixel für die Unterseite an. Im Kopfbereich konnten wir feststellen, dass es sich um einen Abstand handelt , der links und rechts etwas mehr Abstand hat. Wir müssen die Auswahl des Containers unter dem Header-Wrap etwas reduzieren Auswahl des Containers unter dem Header-Wrap Ich ändere den Füllwert für links und rechts. Der Wert übertraf 20 Pixel. Wir haben dieselbe Containerklasse in allen folgenden Containern verwendet , die sich in diesem Abschnitt befinden. Wenn wir also eine der Änderungen an dieser speziellen Klasse vornehmen, wird dies automatisch eine Schuld gegenüber allen anderen Containern sein . Jetzt habe ich die Kopfzeilen-Kontaktwrappe ausgewählt, damit sich dieser Header-Kontaktwrap in der Mitte befindet, sodass der Füllwert links auf Null gesetzt wird. Wir haben den Header-Abschnitt abgeschlossen. Jetzt komme ich zur Helden-Rep-Sektion. Darin haben wir Hero Male Grab. Das Malat ist so nah am Rand. Also müssen wir das Symbol und die E-Mail-ID so gestalten , dass sie im Artikel enthalten sind. Ich habe dieses Hero Main Wrap ausgewählt. Ich mache die Richtung senkrecht unter dem Geschichteten. Um es richtig auszurichten, richte ich es nach links aus, um einen leichten Abstand zu erhalten. Machen Sie das Mail-Symbol bei einer E-Mail-ID mit einer Auswahl von Hero May Link. Ich gebe den Füllwert oben auf fünf Pixel und gehe zum Titel des Heldenbereichs Lass uns die Größe auf 35 Pixel reduzieren. Wir haben den Abschnitt mit den Heldenvertretungen abgeschlossen. Jetzt bin ich zum Servicebereich gekommen. Darin. Ich habe den Abschnittstitel ausgewählt und ändere die Größe auf 30 Pixel. Ich verkleinere die Untertitelung des Abschnitts. Jetzt bin ich zu dem Artikel der Sowjets übergegangen, der überall auf dem Serviceartikel viel Platz bietet. Unter dem Abstand reduziere ich die Größe der Bindung oder senke den Wert Beta D-Pixel. Das gesamte Serviceelement im Bereich Dienste scheint in Ordnung zu sein. Gehen wir zum Galeriebereich über. Im Galeriebereich habe ich das erste Galerieelement darin ausgewählt, oder wir haben es ungenutzt gesammelt. Lassen Sie uns die Größe reduzieren. Gleichzeitig wird die Größe des Titels der Galeriekategorie reduziert . Jetzt konnten wir sehen, dass der Inhalt des Galerieelements nicht richtig ausgerichtet ist. Lassen Sie uns also den Padding-Wert links neben dem Pixel für das rechte Padding gleich machen. Und es gibt auch viel Abstand und den Boden. Also werde ich die Größe reduzieren, indem ich ihnen einen Mindestwert für die Höhe gebe. Lassen Sie den Wert 250 Pixel betragen. Jetzt habe ich das zweite Galerieelement in diesem Tool ausgewählt das zweite Galerieelement in , um es richtig auszurichten Ich ändere den Füllwert und den linken zum Pixel. Lassen Sie uns die Höhe des Galerieelements reduzieren, indem wir ihnen eine Mindesthöhe von 250 Pixeln und anderen Websites geben. Wie zuvor müssen wir die Größe des Galerietitels und des Galerie-Textblocks ändern . Und wir müssen den Abstand am Ende dieses Abschnitts reduzieren . Also habe ich die gesamte Titelzeile der Galerie ausgewählt und ändere ihren Wert auf 20 Pixel, was sich unten befindet. Lassen Sie uns den Vorgang für das Galerieelement mit einer Mindesthöhe von 50 Pixel wiederholen. Wir haben den Galeriebereich abgeschlossen. Jetzt bin ich zum Workshop-Bereich übergegangen. Darin habe ich den QR-Code-Lauf ausgewählt. Wir müssen den Inhalt machen , der in diesem Rap steckt. Wissen wir, welche Diakone, also die vertikale Richtung gewählt haben, eine weitere Ebene, und richten wir sie nach links aus. Wir müssen den Abstand für das Ziel oder die Wiederholung angeben. Bei der Auswahl des Codes oder des Mitarbeiters gebe ich den Randwert oben und unten auf zehn Pixel an. Jetzt bin ich zur Szene übergegangen, zu meinem Arbeitsbereich. Darin könnten wir den Inhalt erkennen und so nah am h ist er nicht zentriert. Dafür habe ich die CMA ausgewählt. Was für Grab, dass der Pixelwert links 20 Pixel beträgt. Und jetzt noch einmal, geben wir den Wert oder das Recht auf 20 Pixel. Nun bin ich bei dem Video angelangt, schnapp es mir, sehe aus als wäre es zu stark gestreckt. Also ändere ich den Füllwert oben und unten, 200 Pixel. Jetzt habe ich das Gefühl , dass ich die Änderungen am Autor oder am Rap mit der Auswahl vornehmen muss . Ich nehme eine andere Größe und gebe die Breite und Höhe an. Und lass den Wert jeweils 200 Pixel betragen. Aber ich habe das Gefühl, dass ich den Wert für Breite und Höhe ändern muss . Also ändere ich den Wert auf jeweils 220 Pixel. Jetzt bin ich zum Vertreter der Autorenbiografie übergegangen. Da ich das Gefühl habe, dass ich den Abstand oben reduzieren muss. Ändern wir also den Margenwert oben auf Null. Jetzt gehe ich zum Abschnitt Lizenzierung über. Darin. Lassen Sie uns die Größe für den Titel des Tab-Inhalts reduzieren. Jetzt konnten wir sehen , dass das Design an unsere Bedürfnisse angepasst wurde. Außerdem gibt es mehr Abstände für links und rechts innerhalb eines Tab-Fensters. Also habe ich den Tab Ben ausgewählt und ändere den Füllwert links und rechts auf 20 Pixel. Jetzt ändere ich die Größe für den Angebotsuntertitel, da er kleiner sein sollte als der Titel des Tab-Inhalts. Es gibt keinen Abstand zwischen Kunstlizenz und Provision. Das ist ein Wasserhahn. Also müssen wir den Abstand machen. Also wähle ich das Dabbling und gebe den Randwert der obersten zehn Pixel an, damit der Raum entsteht. Jetzt ändere ich wieder die Titelgröße des Tab-Inhalts. Nachdem der Abschnitt „ Lizenzierung“ abgeschlossen ist, gehe ich zum Abschnitt mit Kundenreferenzen über. Jetzt habe ich den Testimonial-Bereich ausgewählt. Lassen Sie uns den Abstand oben reduzieren. Also ändere ich den Füllwert oben auf 20 Pixel. Jetzt werde ich die Größe für den Abschnittstitel reduzieren. Jetzt sieht es gut aus. Jetzt gehe ich blind zu dem über, ob ich den Inhalt innerhalb dieser Zeilendetails zu keinem Artikel machen muss. Also wähle ich eine Vertikale in der Richtung, ein anderes Layout. Um links zu sein, richte ich es auf den Aufzug aus. Kommen wir zum Kundendetail Rap, da es nicht direkt auf das Bild und die Lesung ankommt. Mit der Auswahl von Klein Detail Wrap ändere ich also den Füllwert. Lassen Sie uns nun die Größe des Testimonial-Inhalts reduzieren. Und ich ändere auch den Füllwert oben. Jetzt habe ich das Gefühl, dass ich die Größe des Kundennamens und des Kundenauftrags ändern muss . Also ändere ich die Größe. Im Preisbereich. Ich muss den Titel für die Preisgestaltung so einstellen, dass er kein Artikel ist. Ich wähle eine Vertikale für den Datenbereich. Und auch der Preisartikel scheint sich mit dem Rand zu überschneiden, also müssen wir ihn richtig aufeinander abstimmen. Ich ändere den rechten und linken Abstand, während du 20 Pixel machst. Danach wähle ich den Vertreter der Preisliste aus, da das Oliver innerhalb des Preislisten-Wrappers viel Abstand einnimmt. Also müssen wir den Füllwert ändern und den Wert zwischen zwei Pixeln links und rechts belassen. Jetzt habe ich das Gefühl, dass der Inhalt des Listing-Titels jetzt ein Aufkleber ist. Das heißt, das MOG sollte unter dem Titel stehen. Und ich wähle die Vertikale für die Richtung. Dann richten wir es nach links aus. Und lassen Sie uns den Abstand zwischen diesen beiden erstellen. Also gebe ich unten den Margenwert für den Listentitel an. Lassen Sie uns nun die Größe des Listenelements reduzieren. Hinzu kommt, dass wir die Größe der Schaltfläche reduzieren müssen. Nach Abschluss dieses Preisabschnitts gehe ich zum Blog-Bereich über. Anstelle des Blockbereichs habe ich den Blogartikel ausgewählt. In diesem Blogartikel müssen wir die unnötigen Abstände überall reduzieren. Also ändere ich den Wert des Peiles auf 20 Pixel. Für überall. Danach wähle ich den Blog-Titel aus und gebe die Höhe als 1,2 Bindestrich und die Größe auf 28 Pixel an. Gehen wir nun zum FAQ-Bereich über. Im FAQ-Bereich überlappt der gesamte Inhalt den Rand. Also wähle ich zuerst den FAQ-Inhaltsumfang aus. Und ich verwende bereits einen Füllwert auf der linken Seite bis zehn Pixel. Irgendwie ist der Inhalt drin. Jetzt ändere ich den rechten Füllwert auf zehn Pixel oben und unten auf 20 Pixel. Ich habe die Akkordeon-Frage bereits durch eine Auswahl der entsprechenden Frage selbst reduziert Akkordeon-Frage bereits durch . Ich entscheide mich für eine andere Variante. Mit der Auswahl von Breaking. Ich entscheide mich für normal. Auch hier ändere ich die Größe auf 16 Pixel. Jetzt müssen wir die Größe anpassen , die sich in der Dropdown-Liste befindet. Der Inhalt der Dropdownliste wird sich im Garden Double befinden. Also wähle ich die Akkordeon-Türklingel und gehe zu der Einstellung. Darunter könnten wir die Drop-down-Einstellung finden. Und ich entscheide mich für die Show. Jetzt mit der Auswahl des Abschnitts ändere ich die Größe auf 14 Pixel. Jetzt gehe ich zurück zum Setting. Ich wähle die Option Ausblenden. Das Anmeldeformular scheint in Ordnung zu sein, also überspringe ich es und gehe zum Vertrag aus Abschnitt acht über. Lassen Sie uns den Abstand verringern, Lassen Sie uns den Abstand verringern einen Detailumbruch für das Kontaktformular auswählen. Ich bin bereit, den Füllwert auf 20 Pixel zu verwenden. Lassen Sie uns die Größe des männlichen Telefons und der Adresse ändern. Bei der Auswahl eines ausführlichen Titels gebe ich der Größe S also 22 Pixel. Jetzt wähle ich den Kontaktbereich aus , der für den E-Mail-Bereich und die Telefonnummer gilt . Und ich gebe der Größe S 16 Pixel mit einer Auswahl an Kontaktformularfeldern. Lassen Sie uns den Abstand reduzieren, indem wir den Wert für das Polster von allen Seiten ändern . Außerdem müssen wir die Größe der Eingabefelder reduzieren. Also ändere ich den Größenwert auf 18 Pixel. Und was den Abstand zwischen den einzelnen Eingaben angeht, wähle ich den Formulareingaben-Wrapper. Und ich ändere den Randwert unten auf 40 Pixel. Applaus. Wir kommen in den Fußzeilenbereich. Darin. Ich wähle den Copyright-Bereich. Die Copyright-Minen überschneiden sich an den Rändern. Also wähle ich das Firmenmenü Wrap in, sagen wir den Copyright-Menüumschlag, und wähle den Food Domino Link. Und ich wähle S-Block und ein anderes Display. Also wird alles in einem Block sein. Und bei der Auswahl des gesamten Copyright-Menüumbruchs wähle ich die Mitte in der ausgerichteten Unterseite der Typografie. Um den Abstand zwischen den einzelnen Menü-Links zu erstellen , gebe ich den Füllwert die obersten 210 Pixel an. Auf der Unterseite machen Sie zehn Pixel. Jetzt wähle ich die Copyright-Texte und wähle die Mitte der ausgerichteten und anderen typografischen um den Abstand zwischen dem Copyright-Bereich und dem sozialen Element in der Fußzeile zu verringern . Mit einer Auswahl von Copyright-Abschnitten reduziere ich den Randwert oben auf 20 Pixel. Und jetzt reduzieren wir die Größe des Fußzeileninhalts Tidal auf 26 Pixel. Beim Aufnehmen des Fotobereichs stellen wir fest, dass die Größe der Adressdetails reduziert werden sollte. Also ändere ich die Größe auf 17 Pixel. Und wir müssen auch den Abstand auf der Unterseite reduzieren. Also habe ich einen Detailumbruch für das Kontaktformular ausgewählt und gebe den unteren Füllwert auf 40 Pixel. zum Blog-Bereich kommen, müssen wir die Zeilenhöhe reduzieren. Also wähle ich den Blog-Titel aus und gebe den Höhenwert einem Bindestrich von 1,1. Und ich ändere die Größe mit 26 Pixeln. Wenn wir zum Testimonial-Bereich zurückkehren, ist unten viel Platz. Also habe ich diesen Abschnitt ausgewählt und dann den unteren Füllwert auf 60 Pixel geändert. Ich scrolle zurück, um zu überprüfen , ob alles gut aussieht oder nicht. In dieser Lektion haben wir also alles gemacht, was für den Handycode benötigt wird, oder? In der nächsten Lektion werden wir das komplette Styling einer Nadel für den mobilen Anschluss fertigstellen Styling , oder? Und wir werden auch das Styling für die einzelne Blogpost-Seite machen. In jedem der Breakpoints. 50. Responsive Finalize & Single Post Responsive: In dieser Lektion werden wir das alte, unnötige Design vervollständigen , das für die mobilen Portrait-Breakpoints erforderlich war. Außerdem werden wir das Design vervollständigen, das für die einzelne Blogpost-Seite erforderlich ist. In jedem der Breakpoints. Mal sehen, wie wir das machen werden. Auch hier fange ich mit dem ersten in diesem Heldengebietsraster an. Ich denke, wir müssen den Grenzradius reduzieren. Also gehe ich unter die Grenzen und bin bereit, den Radiuswert auf 20 Pixel zu verwenden. Lassen Sie uns dasselbe für das Serviceelement tun , damit es für weitere Erinnerungen an diese Elemente angewendet wird weitere Erinnerungen an diese Elemente Ändern wir den Radiuswert für das Galerieelement 123.4. Im Workshop-Bereich scheint es in Ordnung zu sein. Lass uns weitermachen. Jetzt habe ich diese E-Mail oder dieses Diagramm ausgewählt und ändere den Radiuswert. Ich habe den Video Aligned Rap ausgewählt, aber im Stein-Manager gibt es keinen Radiuswert. Wir haben den Radiuswert in einer anderen Entwicklung angegeben. Dieses Ding ist in der Zeile mit dem Arbeitsvideo. Hier haben wir den Radiuswert angegeben, also lassen Sie uns ihn ändern. Als Nächstes habe ich das Bild des Lizenzmodells ausgewählt. Hier haben wir den Radiuswert angegeben. Also lass es uns im Tap ändern und ich ändere den Radiuswert. Selbst für den Angebots-Rap muss ich den Radiuswert auf 20 Pixel ändern. Jetzt wechsle ich zum Testimonial-Artikel. Als Nächstes habe ich im Abschnitt Preise die Preiselemente ausgewählt und ändere den Radiuswert auf Pixel. Er wird sogar, wir werden den Radiuswert für den Mitarbeiter der Preisliste ändern , oder? Es sollte dem Radius der Preisartikel ähneln , der für den Blogartikel gilt. Lassen Sie uns den Radiuswert hier ändern. Sogar für den FAQ-Inhalt. Und als nächstes folgt ein Detailpaket für das Kontaktformular. Und schließlich haben wir für das Wrapping der Kontaktformular-Felder das Styling im rechten Breakpoint des mobilen Ports abgeschlossen . Jetzt bin ich auf die Sammlungsseite gekommen. Es gibt eine Seite für den einzelnen Blogbeitrag. Wir haben den Basis-Breakpoint bereits entworfen. Gehen wir zum Tablet-Breakpoint über. Hier müssen wir die Größe für die Blog-Nedel-Überschrift reduzieren . Hier ändere ich den Größenwert auf 35 Pixel. Jetzt bin ich beim letzten Breakpoint angelangt, das ist das mobile Produkt, oder? Bruchpunkt. Denn bei allen anderen Breakpoints scheint das Styling in Ordnung zu sein. Also bin ich zum letzten Punkt gekommen. Jetzt habe ich die Blog-Detailüberschrift ausgewählt , weil wir sie verkleinern müssen. Also ändere ich die Größe auf 30 Pixel. Jetzt habe ich das Blockdetail Meta ausgewählt, weil es sowohl das Veröffentlichungsdatum als auch unser Tonic enthält. Ich muss das in einer Vertikalen machen. Also bin ich in die Richtung gegangen und wähle die Vertikale. Lassen Sie uns also die Abstände zwischen diesen beiden rasten. Also wähle ich den Autor der Blogdetails und gebe den Füllwert bei D2 an. Dann braucht Pixel, wie im Blog, eine Überschrift. Ich habe das Gefühl, dass es eine höhere Zeilenhöhe gibt. Also bringe ich die Höhe auf 1.2 Bindestrich bei. Lassen Sie uns den Abstand oben für das Broglie Dell Rack festlegen. Also gebe ich den Padding-Wert des Docks auf 40 Pixel. Das ist mehr Abstand unten für den Abschnitt mit den Blogdetails. Also ändere ich den Wert auf 60 Pixel. In allen Breakpoints scheint die einzelne Blogpost-Seite also in Ordnung zu sein. In der nächsten Lektion werden wir also unsere Website fertigstellen, werden wir also unsere Website fertigstellen indem wir den Klassennamen korrigieren. Ergebnisse des Workflow-Audits. Die Website ist EL und zeigt die Leistung der Website. Und schließlich machen wir das Kontaktformular funktionsfähig. Lassen Sie uns in den kommenden Lektionen alles darüber erfahren. 51. Class korrigieren und Aufräumen: In dieser Lektion werden wir den Klassennamen krümmen und auch den ungenutzten Klassennamen bereinigen. Lassen Sie uns in die Lektion eintauchen. Auf Ihrer rechten Seite konnten Sie die drei Tropfen ähnliche Struktur sehen. Das ist weniger Kindermanager. Darin. Wir konnten eine Reihe von Klassen sehen , die wir bisher erstellt haben. Jetzt scrolle ich durch alle Klassen, um zu überprüfen, ob wir mit dem ersten Buchstaben in Katzen korrekt erstellt haben . Also habe ich den Block Section Grab darin gefunden. Wir müssen in Lücken ein W machen. Jetzt klicke ich auf das Schlüsselsymbol, das diesem Klassennamen entspricht. Hier könnten wir es umbenennen. Jetzt ändere ich das W2-Großbuchstabe W , damit wir sehen können, dass der Klassenname aktualisiert wurde. Lassen Sie uns die verbleibenden Klassen überprüfen, ob alles in Ordnung ist. Jetzt werde ich die Bereinigungsoption durchführen, um die ungenutzten Klassen oder das Styling zu bereinigen. Hier habe ich denjenigen gefunden, der dieses spezielle Kind hatte oder das keinem Seitenelement zugeordnet war. Also werde ich das entfernen. Als Nächstes wähle ich die Interaktion aus. Hier haben wir unser Element, Rico und ein Gebäck. Jetzt klicke ich auf den Cleanup, um die unbenutzten Elemente zu löschen und das Gebäck ist fertig. Aber hier haben wir keinen der ungenutzten Trigger und Animationen. Wir haben Garreta, den Klassennamen, und wir haben auch das ungenutzte Detail gelöscht. Sehen wir uns in der nächsten Lektion Ergebnisse der Workflow-Audits an. 52. Ergebnisse für Webflow Audit: In dieser Lektion werden wir uns den Audit-Ergebnissen im Webflow befassen. Wir können Probleme mit der Barrierefreiheit im Audit-Panel finden und beheben . In der unteren linken Ecke befindet sich das Audit-Panel mit der quadratischen Form. darauf klicken, konnten wir die Reihe der Auditergebnisse finden. Dieser Prüfplan wird die häufigsten Probleme im Zusammenhang mit Barrierefreiheit berücksichtigen, damit wir sie lösen können , bevor wir unsere Website in Betrieb nehmen. Hier haben wir einen kritischen und einen moderaten Fehler. Die kritischen Fehler oder das Auditpanel, das rote Quadrat, die moderaten Fehler oder das Auditpanel mit dem gelben Dreieck. Jetzt werde ich mir die Auditergebnisse unserer Website ansehen. Bei diesen Prüfungen haben wir 29 kritische Fehler , also beim roten Quadrat und bei den Dreiecken bis mittelschwere Fehler. zum ersten kommen, erhalten wir die Auditergebnisse mit fehlendem Alt-Text, sodass wir das korrigieren müssen. Vorher wollen wir wissen, was Alt-Text ist. Wir haben vielleicht das Szenario, Menschen, Blinde Sehbehinderte oder sehbehinderte Menschen . Wir verwenden die Screenreader-Option, um die Funktion unserer Bildinhalte auf der Website zu erfahren. Screenreader geben den Text- und Bildinhalt als Sprache für diese Personen wieder. Fehlender Alt-Text bedeutet, dass wir das Bild ohne beschreibenden Alt-Text eingefügt haben. Wenn ein Bild wichtige Informationen enthält, die sonst nirgendwo auf der Seite verfügbar sind , eine Person, die das Bild nicht sehen kann verpasst eine Person, die das Bild nicht sehen kann, die Informationen , denen wir die Alt-Texte geben müssen jedes der Bilder, die wir auf dieser Seite erstellt haben. Jetzt habe ich die fehlenden Alt-Texte ausgewählt , die sich an den 24 Stellen befinden. Wenn wir auf den Pfeil klicken, gelangen wir zu der Stelle, an der wir die Änderungen vornehmen müssen. Im Heldenbereich haben wir den Alt-Text für dieses Bild nicht angegeben. Also klicke ich auf dieses Bild und wähle die benutzerdefinierte Beschreibung unter dem Alt-Text aus. Und ich gebe dem Alt-Text S Hero Area Frauen. Auch hier gehe ich zurück zum Audit-Panel und wähle den nächsten kritischen Fehler aus. Wir haben den Alt-Text für dieses Mail-Symbol nicht erstellt. Also wähle ich den Alt-Text als benutzerdefinierte Beschreibung und gebe den Alt-Text als Hero-Mail-Symbol an. Als nächstes habe ich den ausgewählt, ein weiterer Fehler. Es hat uns zu diesem OB-Abschnitt geführt. Ich habe nicht für jedes Dienstsymbol eine Gilda, die alles braucht. Also habe ich das erste Symbol ausgewählt und gebe das S der Arktis Mit dem Symbol mache ich also dasselbe Verfahren für die anderen beiden Bilder. Lassen Sie uns den gleichen Vorgang für den gesamten fehlenden Alt-Text durchführen. Endlich haben wir alle kritischen Fehler behoben. Gehen wir zu den moderaten Fehlern über. Das heißt, mit dem gelben Dreiecksymbol. Dieser Modellfehler zeigt den Fehler beim Überspringen einer Überschriftenebene. Mal sehen, was die übersprungene Überschriftenebene ist. Drei Überschriftenebenen bedeuten unsere Überschriftenelemente , also H1, H2, H3 usw. Verwenden Sie nicht die richtige Überschriftenhierarchie. Welches ist die wichtigste Überschrift. Zwei Heads würden unter dem H1 landen. Also weiter. Die Überschriftenhierarchie bricht also. Wenn wir eine Überschriftenebene übersprungen haben, die wir korrigieren müssen, wurde eine Überschriftenebene übersprungen. Jetzt habe ich den Fehler ausgewählt. Es bringt uns zum Servicebereich. In diesem Abschnitt mit Untertiteln müssen wir das Überschrift-Tag ändern. In der Popup-Nachricht. Es zeigt, welcher Fehler gut war , lassen Sie uns ihn vorlesen. Die vorherige Überschriftenebene ist H1, also ist der nächste Experte oder Level H2. Es erwartet also, dass wir die Überschrift Ebene zwei, H2, ändern. Außerdem haben wir die Möglichkeit, diesen Fehler zu beheben. Wir können die unnötige Option wählen , die für uns angemessen ist. Jetzt habe ich diese Oase ausgewählt und gehe zu den Einstellungen und ändere den Überschriftstyp auf Hedge-Tool. Jetzt wähle ich die nächste Ära aus. Es führt uns zum Bereich Testimonials. Darin wird der Name des Kunden angezeigt. Hier. Es weist uns an, die Überschrift Ebene zwei, Hecke drei zu ändern . Also werde ich den Überschriftentyp des Verlaufs ändern. Jetzt haben wir einen weiteren Pfeil im Client-Job. Es weist uns an, die Überschrift Ebene zwei, h4, zu ändern. Wir haben einen weiteren Fehler im Ratingwert und erwarten, dass wir die Überschrift Level 2 Hedge Phi ändern werden. Lassen Sie uns also die Überschrift Level Two Hedge Phi ändern. Jetzt haben wir alle Fehler behoben, sodass wir die Meldung „Farm mit bekannten Problemen“ erhalten. In der nächsten Lektion werden wir uns mit den SEO-Einstellungen einer Website befassen. 53. SEO Website-Einstellungen: In dieser Lektion werden wir das Titel-Tag und die Meta-Beschreibung erstellen, die für die SEO-Suchmaschinenoptimierung unerlässlich sind. Schauen wir uns an, wie das geht. Titel-Tags und Meta-Beschreibung für diese Website. Um zu unserem Projekt hier zu kommen, wir haben kein Titel-Tag. Wir müssen ein Titel-Tag hinzufügen. Unsere Titel-Tags und Meta-Beschreibung oder werden in Suchmaschinenergebnissen angezeigt. Der Anbieter von Title-Tags und Beschreibungen zeigt eine Vorschau unseres Seiteninhalts an, den wir benötigen, um ihm ein Titel-Tag hinzuzufügen. Mal sehen, wie man der Website ein Titel-Tag hinzufügt. Um das hinzuzufügen, gehe ich auf die Seite, sage Dinge und gehe zu den SEO-Einstellungen über. Darin könnten wir einen Titel finden , dessen Meta-Beschreibung im Titel-Tag enthalten ist. Ich gebe ihm einen Titel. Ich habe es als Künstler, Webflow, HTML, Website-Vorlage angegeben . Wir müssen ihnen auch eine Meta-Beschreibung geben. Die überzeugende Kopie der Meta-Beschreibung kann dazu beitragen, mehr Klicks zu erzielen. Ich habe ihnen eine Meta-Beschreibung gegeben. Lassen Sie uns die Fehler ausschneiden und sagen, wir brauchen. Jetzt werde ich es veröffentlichen, um zu sehen, wie es funktioniert. Jetzt lade ich diese Seite, damit wir jetzt die Titelschuld sehen können. Jetzt, in der Seitensitzung, wähle ich die Vorlage für den Blogbeitrag weil wir dadurch zu einer anderen Seite weitergeleitet werden. Da es sich um eine separate Seite handelt, müssen wir überprüfen, ob sie Titel-Tags und eine Meta-Beschreibung enthält. Hier können wir also sehen , dass das kein Titel-Tag ist. Ich werde diese Blog-Überschrift als Titel-Tag verwenden. Deshalb habe ich die Vorlage für Blogbeiträge ausgewählt , die sich unter der SEO-Einstellung befindet. Ich gehe zum Titel-Tag. Auf der rechten Seite. Wir können feststellen, dass das in das Feld „Feld hinzufügen“ passt, für das ich Namen wähle, weil der Feldname angegeben Dadurch wird die Blog-Überschrift aus dem Sammlungs-Add-On zum Feld abgerufen . Ich füge eine Webflow-HTML-Website-Vorlage hinzu. Ich speichere es. Lass uns das veröffentlichen. Ich lade diese Seite neu. Jetzt kann ich die Titelschuld sehen. In dieser Lektion haben wir also das Titel-Tag und die Meta-Beschreibung für diese Website angegeben . In der nächsten Lektion werden wir sehen, wie die Leistung der von uns erstellten Website ist . 54. Website-Performance: Sehen wir uns in dieser Lektion die Leistung unserer Website an. Zuerst müssen wir CSS minimieren. Dadurch wird die Dateigröße reduziert, ohne Ausführung der CSS-Datei in der Zeile zu ändern. Durch das Entfernen unnötiger Daten aus dem CSS-Code hilft diese Ammonifizierung dem Browser, die Dateien schneller herunterzuladen und zu verarbeiten und die Seitenleistung zu erhöhen. Mal sehen, wie man das CSS modifiziert. Ich poste. Ich wähle die Option darunter aus. Ich wähle hier die erweiterte Option. Ich aktiviere Minify CSS. Lassen Sie uns das jetzt veröffentlichen. Jetzt lade ich die Seite. Scrollen wir weiter, wie alles wert ist. Also scheint alles gut zu sein. Sogar wir konnten die Seite reibungslos scrollen. Um nun die Leistung der Seite im Browser zu sehen , habe ich unsere Website geladen. Mit der rechten Maustaste. Wir lassen die Option prüfen. Wir werden eine Menge Optionen darin haben. Ich wähle einen Leuchtturm. Klicken wir nun auf den Bericht erstellen. In dem Bericht werden wir das Ergebnis haben. Wir erhalten die Punktzahl für die Aufführung zusammen mit den Details dazu. Die Details und das Ergebnis für die Barrierefreiheit. Das Gleiche gilt für die Best Practices und SEO. In der nächsten Lektion werden wir uns mit dem des Kontaktformulars und der Bereitstellung einer Benachrichtigung über das Absenden des Kontaktformulars befassen. Und wir werden auch Grenzformen von Missionsdaten sehen. 55. Kontaktformular – Richtige E-Mails erhalten: In dieser Lektion werden wir uns mit dem Absenden des Kontaktformulars befassen und erfahren , wie Sie die E-Mail einrichten, um eine Benachrichtigung beim Absenden des Kontaktformulars zu erhalten . Um damit zu beginnen, gehe ich zu den Projekteinstellungen. Lassen Sie uns nun zum Formularschritt übergehen. Und dies gibt uns alle Optionen in Bezug auf den Umgang mit den Daten, die mit den Daten, die sich aus einer erfolgreichen Einreichung ergeben. Jetzt werden die Charakterdaten standardmäßig per E-Mail gesendet. Die Option beginnt mit einem Firmennamen. Die E-Mail wurde gesendet. Welcher Firmenname soll angezeigt werden? Als nächstes haben wir die E-Mail-Adresse oder E-Mail-Adressen. Sie möchten, dass die Beiträge gleich , weil Sie mehr E-Mail-Adressen hinzufügen. Verwenden Sie einfach ein Komma am Ende der E-Mail-Adresse und fügen Sie eine andere E-Mail-Adresse hinzu. Als nächstes die Betreffzeile für diese E-Mail, die Wiederholung, um diese Rechnung mit der verwendeten E-Mail-Adresse zu adressieren. Wenn Sie eine Form von Patienten-E-Mail erhalten und auf Wiederholen klicken, können Sie den Namen und die E-Mail-Variablen rechts neben dieses Felds kopieren und einfügen. Ich antworte dann an die Adresse. Dadurch wird sichergestellt, dass Antworten auf diese E-Mail direkt an die E-Mail-Adresse gesendet werden , die auf dem Telefon erfasst wurde. Und schließlich haben wir die E-Mail-Vorlage. Sie können dies unverändert lassen, oder Sie können Ihre eigene Bewegung mit einer der Variablen auf der rechten Seite schreiben und hier sogar benutzerdefiniertes HTML einfügen. Jetzt senden wir das Kontaktformular ab und schauen wir uns an, wie es funktioniert. Also im Namen gebe ich es als Webflow an. Und geben wir die E-Mail-ID als gmail.com an. Für das Unternehmen. Ich gebe uns Arbeitsablauf. Ich gebe der Telefonnummer einige Nummern und gebe einige der Nachrichten hier weiter. Lass es uns einreichen. Jetzt erhalte ich die Erfolgsmeldung. Wenn das Formular also eingereicht wird, werden diese Einreichungsdaten unten aufgeführt. Und andere Formen von Bilddaten. Jetzt haben wir gesehen, was passiert, wenn ein Benutzer das Formular absendet, warum die Daten gespeichert werden und wie er Benachrichtigungen per E-Mail erhalten kann. Also haben wir alles fertiggestellt, was für die Website-Vorlage unseres Künstlers benötigt wird . Da wir mit der Vorlage entwickelt haben, müssen wir wissen, wie wir die Inhaltsfarbe ändern und einige der erforderlichen Bearbeitungen vornehmen können. Sehen wir es uns in der nächsten Lektion an. 56. Deine Website basierend auf Deinen Bedürfnissen anpassen: Wir haben die Vorlage für die Website des Künstlers fertiggestellt. Die Benutzer, die unsere Vorlage verwenden, möchten möglicherweise die Farbe dieses Inhalts ändern, und sie werden auch ihren Inhalt ändern, sodass wir überprüfen müssen , ob diese ordnungsgemäß funktionieren oder nicht. Lassen Sie uns überprüfen, ob sich dieser Inhalt und die Farbe ändern. Also werde ich jetzt nach dem Inhalt suchen , der die orange Farbe hat. Wir haben dies verwendet, die Primärfarbe für die Navigationslinks und für den Untertitel im Heldenbereich für die Dienste, für die Galerie. Befehle zum Prozentwert, Preise und einige Formulierungen im Listenelement für den Blog - und Support-Newsletter und kontaktieren Sie mich. Also, das sind alle, äh, mit den Primärfarben. Jetzt gehe ich zu einer anderen Art von Diagramm, G. Ich wähle die Farbe. Wir haben die Farbmuster-Primärfarbe verwendet. Jetzt ändere ich die Farbe , sodass ich die Farbe für die Primärfarbe geändert habe. Jetzt konnten wir also feststellen, dass sich die Farbe geändert hat. Um den Inhalt zu bearbeiten, den wir haben. Und mit unserer anderen Option , nämlich Edit Auto, könnten wir in der Projekteinstellung auf diesen Editor zugreifen . Lassen Sie uns in diesem Editor darum bitten, einen Anzeigeninhalt in einer einfachen Oberfläche zu aktualisieren ist ideal für Kunden oder Teamkollegen, die nicht die Komplexität des Designers benötigen. Das wird also hauptsächlich verwendet, um den Inhalt hinzuzufügen oder zu aktualisieren. Jetzt sind wir im Editor. Ich möchte den erlaubten Untertitel ändern. Meine Leidenschaft als Zeichnen ist meine Leidenschaft. Sogar ich ändere den Titel auf digitale Kunst, mach mehr Farbverlauf. Nehmen wir an, wenn wir das Bild ändern können, doppelklicke ich darauf. Ich wähle ein anderes Bild aus, damit das Bild aktualisiert wurde. Jetzt werde ich es veröffentlichen. Wir haben hier definitiv ein Ziel erreicht. Um eine Spore in einem neuen Tab anzukreuzen, lade ich unsere Webseiten-Vorlage, damit wir sehen können, welche Änderungen wir vorgenommen haben. Wenn wir weitere Bearbeitungen vornehmen möchten, klicken Sie einfach auf diese Seite bearbeiten. 57. Fazit, danke dir!: Herzlichen Glückwunsch zum erfolgreichen Abschluss des Kurses. Es war eine lange Reise für uns beide. Jetzt können Sie tolle Websites erstellen. Ich hoffe, dir hat dieser Kurs gefallen und ich würde mich freuen. Wenn du eine Bewertung zu diesem Kurs hinterlassen könntest. Wenn Sie Fragen haben, vergessen Sie nicht, mich im Diskussionsbereich zu fragen. Ich habe Gründe für die Illustration und das Grafikdesign. Wenn du interessiert bist, kannst du das machen. Es wurde nicht als dein Ausbilder genutzt. Und ich wünsche dir alles Gute. Danke.