So erstellst du professionelle Websites ohne zu programmieren

1. Wie du professionelle Websites von Witohut Coding erstellst.: Ich habe versucht zu lernen, wie man Websites baut. Oder vielleicht sind Sie ein Designer, der Ihren Kunden Web-Tiefen-Services anbieten möchte. Nun, weißt du, Design ist eine Sache, aber dann wird es zu einer echten Live-Website zu machen. Nun, das ist eine ganz andere Sache. Und für viele mag das wie eine Art von b Hexerei erscheinen. Und viele geben einfach auf und schnell. Aber zum Glück muss das nicht der Fall sein. Denn in diesem Kurs lernen Sie, wie Sie Websites von Grund auf neu erstellen , ohne dass Sie etwas programmieren müssen. Und dafür werden wir Sauerstoff-Builder verwenden, dem Sie eine Kontrolle jeden Aspekt Ihrer Website erstellen können. Und auf dem Weg lernen Sie, wie Sie Kopfzeilen, reaktionsschnelle Menüs, klebrige Kopfzeilen und Overlay-Header erstellen . Wie man einen Helden Abschnitte innerhalb der vollen Breite Schieberegler in den Hintergrund zu bauen. Und wie animierte Symbole hinzufügen, Kontaktforen hinzufügen, Zeugnisse, Blogs und Blog-Beiträge, etc. Aber im Grunde erfahren Sie alles, was es zu wissen ist, um eine Website mit Sauerstoff-Builder zu erstellen. Ich finde es gerade die beste Lösung, um professionelle Websites zu erstellen, besonders wenn Sie aus einem Design-Hintergrund kommen. Also, wenn Sie wirklich daran interessiert sind, zu lernen, wie man Websites entwickelt, die Zukunft Beweis warten, nur in diesem Kurs anmelden jetzt. Und ich hoffe wirklich, Sie drinnen zu sehen. 2. Einführung: Also sagen Sie mir, haben Sie versucht, zu lernen, wie man Websites entwickelt? Oder vielleicht sind Sie Designer möchten Web-Dev-Dienste für Ihre Kunden anbieten. Wissen Sie, Design ist eine Sache, aber dieses Design in eine echte Website zu verwandeln. Nun, das ist eine völlig andere Geschichte und eine komplexere Geschichte, muss ich sagen. Und für viele mag das wie eine Hexerei aussehen. Wenn sie daran denken, Websites zu entwickeln, werden sie eingeschüchtert und oft verlassen sie einfach. Aber zum Glück, es muss wirklich nicht der Fall sein, denn heutzutage ist das Erstellen von benutzerdefinierten professionellen Websites wirklich einfacher als zuvor. Also sind die Partituren gerade so? Nun, lassen Sie mich Ihnen zuerst sagen, was dieser Kurs nicht ist. Nun, definitiv ist es kein anderes Wort, Pressekorps. Wenn Sie ein total Wordpress Noob sind, rate ich Ihnen, zuerst die Grundlagen zu lernen und dann zurück zu diesem Kurs. War Powers wird eine Umgebung sein, in der wir arbeiten werden, aber wir werden uns überhaupt nicht darauf konzentrieren. Und Sie werden lernen, wie man jede Art von Website mit etwas namens Sauerstoff-Builder zu bauen. Jetzt ist Sauerstoff und Builder ein Website-Builder, was bedeutet, dass es Ihnen erlaubt, zu entwerfen, zu entwickeln und zu steuern im Grunde jeden Aspekt einer Website, Ihre Kopfzeilen, Fußzeilen , Menüs, Blogs, Siedler, Vorlagen für 04 Seiten, und so noch viel mehr. Und das Besondere daran ist, dass es Ihnen die totale Kontrolle über ihren Entwicklungsteil gibt. Es ist, es ist wirklich schwer, sich vorzustellen und zu entwerfen, die nicht mit Sauerstoff entwickelt werden konnten. Und die überwiegende Mehrheit der Designs kann in Websites umgewandelt werden, ohne den Code zu berühren. Ich meine, Sie können die bereitgestellten Tools verwenden und nicht eine einzige Codezeile schreiben. Aber natürlich, wenn Sie etwas komplexeres benötigen, können Sie zusätzlichen Code hinzufügen, weil Sauerstoff Ihnen völlige Freiheit gibt. Und lassen Sie mich klarstellen. Diskurs ist keineswegs ein Verkaufsgespräch für das Plugin. Jetzt haben unsere Ansichten und getestet viele andere Builder Devi Element oder Visual Composer of Vada Thema Ultimatum verwendet . Aber sie haben nie wirklich das geliefert, was ich erwartet habe. Und wirklich, ich weiß, es ist ein Klischee, aber wenn ich einmal Sauerstoff gefunden habe, habe ich nie zurückgeschaut. Aber natürlich hat es seine Fehler. Ich meine, anfangs mag es einschüchternd erscheinen. Und meine Designer, ich mag einige seiner Usability-Lösungen nicht. Aber nach ein paar Minuten, vor allem, wenn Sie im Grunde mit jedem Design-Tool vertraut sind, Werbung und beginnen, Sinn zu machen. Und natürlich bin ich hier, um Sie zu führen. Also fürchten Sie sich nicht, wenn wir Sauerstoff installiert haben, werden wir anfangen, eine Website zu entwickeln. Und auf dem Weg, werden Sie verschiedene Tools und Aspekte des Plugins lernen. So werden wir Kopfzeilen einschließlich klebrige Kopfzeilen, Fußzeilen und Menüs erstellen, werden Schieberegler hinzufügen, einschließlich einer vollen Breite Hintergrundschieber wie die, die Sie können, wissen Sie, wie die, die Sie hier sehen können. So fügen wir Galerien, Icons, Videos und Portfolios hinzu. Und natürlich werden wir alles schön verantwortungsvoll machen. Und um den Kurs zu beenden, werden wir ein fertiges Design greifen und es mit Sauerstoff neu erstellen. Und wir werden von der Kopfzeile durch die Hauptabschnitte mit Bildern, Symbolen, Übergängen bis hin zu einer erweiterten Fußzeile gehen. Und übrigens, dies wird eine Live-Website sein. Sie werden in der Lage sein, einfach online zu suchen und Sie werden in der Lage sein, zu sehen, wie es funktioniert, sobald es entwickelt wurde. Also wirklich, wenn Sie nach einem Kurs gesucht haben, um Ihnen beizubringen, wie Sie professionelle benutzerdefinierte Websites zu entwickeln. Und das würde es direkt auf den Punkt bringen. Ich denke, die Forschung ist vorbei. Also lasst uns einfach direkt in unser erstes Video springen. 3. 2.1Was ist Oxygen: Also, um unsere Website zu bauen, werden wir den Sauerstoff-Builder benutzen. In der Vergangenheit haben andere Bauherren wie Devi oder elementar versucht, aber sie waren immer Mason einige, einige Features, vor allem in Bezug auf die Blockschaffung. Nun, vielleicht hat sich in diesen Tagen etwas geändert. Aber als Sauerstoff 3 oder 3.1 herauskam, ich wirklich, weißt du, ich war süchtig. Ich beschloss, es zu bekommen. Ich beschloss, es zu kaufen, weil ich wirklich das Potenzial gesehen habe. Das Potential. Und ich werde endlich etwas finden, das mir erlauben würde, die Seiten zu bauen. Das wäre nicht so, wie ich es wirklich gerne hätte. Also, wenn Sie auf die sauerstoff-builder.com Website gehen, werden Sie natürlich in der Lage sein, einige Verkaufsinformationen über Sauerstoff zu lesen. Sie können sich die Produkt-Tour ansehen oder die Tutorials ansehen. Sie, Sie werden vielleicht in der Lage sein, Sauerstoff zu vergleichen oder mit dem, mit der Konkurrenz wie elementare Biber, Baumeister oder Devi und Baumeister. Aber was ich gerne wissen möchte, wie, richten Sie Ihre Aufmerksamkeit ist, dass Sauerstoff nicht nur ein Page Builder ist, sondern es ist auch ein, ein Site-Builder. Nun, die meisten dieser Bauherren, definitiv DV oder elementar, sie verwenden Themen, so dass Sie immer ein Thema haben müssen. Sie können ein kostenloses Thema haben, aber Sie müssen immer eines haben. Oxygen verwendet keine Themen, so dass Sie sich keine Gedanken darüber machen müssen. Und für Sie als aufstrebender Webentwickler und Grafikdesigner, der mehr Dienstleistungen für Ihre Kunden bieten möchte, bieten Sie einen Web-Entwickler-Dienstleistungen für Ihre Kunden. Ich denke, dass eines der wichtigsten Dinge wäre, dass, wenn man Sauerstoff bekommt, das genau wie Dv ist. Dv, Sie können einfach eine Lizenz oder ein Byte einmal kaufen und Sie haben die Updates für immer, lebenslange Updates. Und Sie haben Ihre Lizenz ist gültig für unbegrenzte Anzahl von Websites, so dass Sie nicht die Lizenzen für jede und jede Website, die Sie erstellt werden, neu kaufen müssen. Also ist es im Grunde immer noch hoffentlich für immer einmaligen Kauf für das Leben eine Art Deal. Dies ist also nur ein kurzes Video, um Ihre Füße nass zu bekommen, nur um Ihnen zu zeigen, welches Werkzeug wir in diesem Kurs verwenden werden. Und in den nächsten Videos werden wir einen Blick darauf werfen, wie man Sauerstoff herunterladen kann, aber auch, wie man Sauerstoff ausprobiert. Wenn Sie zuerst nur überprüfen wollen, ob es wirklich etwas für Sie ist. Und Sie werden in der Lage sein, dank der, auf diese Art von wie eine Demo-Funktion von Sauerstoff, Sie werden in der Lage sein, genau das zu tun, was ich in Bezug auf den Aufbau unserer Website. 4. 2.2man es nicht - probiere es: Sauerstoff ist also im Grunde ein Plug-in. Und wenn Sie mit den Grundlagen von Wordpress vertraut sind, was eine Art Voraussetzung für diesen Kurs ist. Wie ich bereits erwähnt habe, funktioniert Sauerstoff wie ein Plugin. Also, sobald Sie es bekommen und wie man es herunterladen sollte, werden Sie in der Lage sein, es wie ein normales Plugin hochzuladen. Und Sie können Ihren Lizenzschlüssel eingeben und kostenlose Updates für diese bestimmte Website erhalten . Und wir sind dabei, das zu tun. Wir sind dabei, das Plugin hochzuladen. Wenn Sie jedoch nicht überzeugt sind, wenn Sie es nicht kaufen wollen, können Sie einfach auf der Hand gehen. Sie können einfach nach unten scrollen, um diese gut Fußzeile. Und Sie werden diese Option genau hier sehen, die sagt, versuchen Sie Sauerstoff. Also lasst uns darauf klicken. Und hier drin können Sie tatsächlich eine Demo eingeben, eine Sandbox-Umgebung, in der Sie Sauerstoff verwenden können , genau wie Sie es verwenden würden, wenn Sie sich entscheiden, zu beißen, wenn Sie sich entscheiden, es herunterzuladen. Und hier können Sie die leere Installation wählen, was ich denke, es wäre das Beste weil wir wirklich wollen, um unser Schild von Grund auf bauen. Und wir wollen wirklich alle lernen, na ja, die meisten Dinge, die mit Sauerstoff kommen, definitiv alle Dinge, die es Ihnen erlauben, es unabhängig zu benutzen. Aber natürlich könnten Sie auch die vorgefertigte Beispiel-Website wählen, die einige Elemente aus der Bibliothek laden würde, die mit Sauerstoff geliefert wird. Aber ich werde leere Installation wählen. Und nach ein paar Augenblicken schreiben wir das WordPress-Dashboard. Und hier können Sie sehen, dass wir bereits Sauerstoff installiert haben und wir in der Lage sind, es zu verwenden, genau wie Sie Sauerstoff verwenden würden, wenn Sie es gekauft haben, wenn Sie es herunterladen und in Ihre Plugins-Bibliothek auf Ihrer Seite hochladen, natürlich haben wir auf unserer Standard-WordPress-Dashboard. Wir können Seiten hinzufügen, wissen Sie, ändern Sie das Aussehen und ändern Sie das Handbuch, all diese Dinge. Also, wenn Sie nicht davon überzeugt sind, dass Sie wollen, dass Sie Sauerstoff kaufen wollen, können Sie immer einfach versuchen Oxygen von ihrer Website. Aber ich bin schon überzeugt. Also werde ich meine eigene Installation verwenden. Ich werde meine eigene Version oder Lizenz des Plugins verwenden. Und ich schätze, wir können einfach anfangen, unsere Website zu bauen. Warum nicht? 5. 2.3-Aufladen: So wie Sie sehen können, habe ich eine frische von 20-20 WordPress-Installation. Und wenn Sie sich meine Adressleiste ansehen, werden Sie localhost sehen. Und das liegt daran, dass ich Wordpress lokal betreibe. Ich habe mich gerade dafür entschieden, es so zu tun, denn wenn ich es auf einen Live-Server setzen sollte, bin ich, dass wir einige Verbindungsverlust, vielleicht etwas Bargeld und Probleme erleben könnten . Und ich wollte es wirklich vermeiden. Ich wollte die Dinge so klein wie möglich machen, so schnell wie möglich. Aus diesem Grund müssen Sie natürlich nicht warten, bis der Server reagiert. Und dann müssen wir nur warten, bis mein Computer reagiert, sonst sollte alles viel schneller und einfacher für mich bearbeitet werden. Aber wie auch immer, wenn Sie Ihre Wordpress nur Live-Server installiert haben, würden Sie natürlich Ihren Domain-Namen hier haben. Und was wir tun müssen, ist, dass wir uns einloggen müssen. Also werde ich nur Schrägstrich eingeben und dann nur WP Dash Admin. Und hier werde ich nur meine Anmeldedaten verwenden. So im Moment können wir tatsächlich das Plugin hochladen. Also werde ich zu Plug-Ins gehen, ich werde eins hinzufügen. Ich werde es hochladen. Ich werde es nur finden müssen. Sauerstoff 3.5. Und ich werde auf Jetzt installieren klicken. Sobald es installiert ist, werden sie aktiviert. Ich betreibe eine Multi-Site, so dass Sie sehen, ein Netzwerk aktivieren Sie die Schaltfläche, Schaltfläche auf Ihren Servern. Es wird nur aktiviert werden. Und dann können Sie tatsächlich anfangen, Sauerstoff zu verwenden. 6. 2.4-Sauerstoff: Also, sobald unser Plugin, sobald Sauerstoff hochgeladen ist, lassen Sie uns unseren Lizenzgeber eingeben. Behalten Sie. Nun, wenn Sie sich entschieden haben, es zu kaufen, natürlich erhalten Sie es in einer E-Mail von ihnen, Sauerstoff-Builder-Team. Und wenn Sie nur versuchen Sauerstoff auf ihrem Server, natürlich müssen Sie nicht, Sie müssen nicht die Lizenz eingeben, so können Sie einfach überspringen dieses Video. Also, was ich tun werde, ist, dass ich zu Sauerstoff gehe und dann zwei Einstellungen. Hier drin. Ich werde eine Lizenz wählen. Und hier drinnen werden wir unseren Lizenzschlüssel eingeben. Das kommt wieder in einer E-Mail, sobald Sie den Sauerstoff-Builder kaufen, und dann können Sie einfach drücken senden und Sie gehen, hoffentlich sollten Sie den Text hier gültig sehen. Und jetzt bedeutet es, dass Sauerstoff für das Leben aktualisiert wird. Du wirst alle Updates bekommen. In Ihrem WordPress-Dashboard. Sie können Ihr Plug-in im Grunde wie jedes andere Plug-in aktualisieren , das Sie es aus dem Standard-WordPress-Repository erhalten können. Also, sobald Sauerstoff Sauerstoff installiert ist, sobald es einmal ist es Lizenz wurde und es ist hier in setzen, können wir vielleicht auf ein bisschen mehr von einem im Grunde Wordpress verwandten dünnen bewegen, nicht nur Sauerstoff bezogen dünn. Wir werden unsere Seiten zu unserer Website hinzufügen. Also, so haben wir, also haben wir etwas auf unserer Seite. Also gehen wir weiter zu dem. 7. 3.1die Seiten hinzufügen: Also fügen wir Sauerstoff hinzu, wir haben den Führerschein. Jetzt lasst uns ein paar Seiten holen. Wenn wir direkt hier zu unserem Seitenmenü gehen, fangen wir an. Vielleicht, nun, lasst uns zuerst sehen, welche Seiten wir bereits haben. Nun, wir haben keine bezahlt direkt hier, aber wenn Sie eine neue WordPress-Installation haben und Sie wahrscheinlich eine Datenschutzrichtlinie oder eine Beispielseite haben. Und was ich tun werde, ist, dass ich nur die Seiten hinzufügen werde, die wir in unserem Fall verwenden. Also, für den Titel, werde ich mit dem ersten nach Hause gehen. Dies wird natürlich unsere Homepage sein. Dann füge ich noch einen hinzu. Da wir Designer sind, die ihre Webentwicklung und Dienstleistungen anbieten möchten, werden wir sie nutzen. Nun, wir werden ein Portfolio brauchen. Also lassen Sie uns diese Seite veröffentlichen. Lassen Sie uns hinzufügen, sagen wir, dass wir eine Menge Dinge zu sagen haben, viele interessante Dinge über unsere Arbeit zu sagen. Also werden wir es sein, wir werden einen Blog auf unserer Website hinzufügen. Und lassen Sie sagen, dass wir eine Menge Dinge über uns zu sagen haben. Also lassen Sie uns über eingeben, und natürlich müssen wir eine Kontaktseite hinzufügen. Also lasst uns das machen. Gehen wir zu Kontakt und lassen Sie uns diese Seite veröffentlichen. Nun, bevor wir fortfahren, um tatsächlich erstellen oder unverändern unser Haus, die Seite, lassen Sie uns zu den Einstellungen gehen, und dann gehen Sie zu Permalink. Und stellen wir sicher, dass wir Post Name hier ausgewählt haben. Und gerade jetzt, wenn wir versuchen, unsere Seite zu besuchen, müssen wir einfach den Namen der Seiten eingeben und wir werden es sein, wir werden gut zu gehen. Und das ist, das ist auch für SEO-Zwecke die beste Vorgehensweise. Also werde ich nur die Änderungen speichern. Und wenn wir zu Leseoptionen gehen, können wir diese Ihre Homepage zeigt Option verwenden, um tatsächlich eine bestimmte Website anzuzeigen, so gut Seite, so könnten wir Ihre neuesten Beiträge verwenden, wenn wir nur einen Blog hatten. Aber wir werden eine eher wie eine weiterentwickelte Seite haben. Also werde ich eine statische Seite wählen und meine Homepage wird zu Hause sein und Beiträge werden auf meiner Blog-Seite gesetzt werden. Also werde ich das einfach retten. Jetzt in hier, Ich habe beschlossen, mit entmutigen Suchmaschinen von Index in dieser Website zu gehen , weil es eine lokale Installation ist und gut im Grunde wird es nicht das Ranking meiner Pepsin sitzt nur auf meinem Computer beeinflussen. Aber wenn Sie Ihre eigene Seite, Ihre Live-Website, erstellen, möchten Sie dies vielleicht überprüfen, weil Suchmaschinen vielleicht Ihren Fortschritt indizieren könnten, wissen Sie , wenn Sie die Website erstellen. Und wenn Sie die Suchmaschinen davon abhalten wollen, sollten Sie dies überprüfen. Aber natürlich, wenn Sie ein SEO-Plugin verwenden, wenn die Designer fertig sind, sollte diese Option deaktiviert werden. 8. 3.2-Schaffen hinzufügen: Also, was sind Vorlagen in Sauerstoff oder, oder, oder Vorlagen im Allgemeinen? Vorlagen werden im Grunde genau wie Stücke von Design und Inhalt sein, die im Grunde auf die Arbeit gleich aussehen. Im Allgemeinen auf der, jeder, jeder Seite, die Sie erstellen. , ob es sich um eine dynamische inhaltsbasierte Seite handelt, wie eine Blogseite oder eine statische Seite. Sobald Sie diese Vorlage eingefügt haben, wird das auf jeder Seite gleich aussehen. Das gebräuchlichste Szenario für eine Vorlage wäre, Ihre Kopfzeile als Vorlage und Ihre Fußzeile als Vorlage hinzuzufügen . Weil ein Header normalerweise Ihr Logo, den Namen IhresUnternehmens oder Ihrer Dienste oder Ihren Namen hosten den Namen Ihres wird. Und das Menü auf vielleicht einige Kontaktinformationen oder Social Media Icons. Und in der Fußzeile müssten Sie natürlich auch einige weitere Informationen hinzufügen. Vielleicht würden Sie einige hinzufügen, einige Links, kann ein anderes Menü sein. Und Yen im Grunde müssten Sie eine Vorlage für eine Kopfzeile und eine Fußzeile erstellen. Wenn wir also zu Sauerstoff und dann Vorlagen gehen, können Sie sehen, dass ich hier keine Vorlagen habe. Also werde ich eine neue Vorlage hinzufügen, und ich werde es meine Hauptvorlagen nennen. Ich werde nur in der Haupt tippen. Wenn Sie einen Blick auf diese Optionen direkt hier, Sie können sehen, dass wir in der Regel können wir einfach hinzufügen, erben das Design von anderen Vorlagen. Aber da dies unser Haupt ist, ist dies unsere erste Vorlage. Es gibt nichts, von einer anderen Vorlage zu erben. Hier drin. Wir können Sauerstoff sagen, zu welchem Teil unserer Website in dieser Vorlage gehören soll. Also, wenn Sie nur eine Vorlage für, für einen einzelnen, einzigartigen Inhaltstyp, wie einen Beitrag oder eine Seite, oder für eine Archivseite für eine bestimmte Kategorie oder für einen bestimmten Autor erstellt haben. Du könntest, du könntest es hier hinzufügen. Aber wir erstellen eine Vorlage für eine Kopfzeile und eine Fußzeile. Und in der Regel möchten wir die gleiche Art von Kopf- und Fußzeile auch hinzufügen, und zu allen unseren Seiten. Also lassen Sie es uns einfach halten. Lasst es uns vorerst so lassen. Nehmen wir an, dass wir die gleiche Art von Fußzeile und Kopfzeile zu allen unseren Seiten hinzufügen möchten. Also in diesem anderen Abschnitt werden wir nur diese Option fangen alle auswählen. Und dann werde ich einfach auf die Veröffentlichung klicken. Von nun an wird diese Vorlage sein, wird alle Seiten mitteilen, welche Kopf- und Fußzeilen , die bestimmte Seite gerendert werden soll. Sobald diese Vorlage fertig ist, können wir, können wir mit Sauerstoff bearbeiten und tatsächlich beginnen, diese Vorlage innerhalb von Sauerstoff zu bearbeiten. 9. 3.3Oxygen-Benutzeroberfläche: Bevor wir anfangen, unsere Vorlage zu bearbeiten oder etwas zu einer Website hinzuzufügen, ist es eine gute Idee zu wissen, was wir zuerst suchen, besonders wenn Sie noch nie Sauerstoff gesehen haben. Lassen Sie uns einen kurzen Blick auf die Sauerstoff-Schnittstelle werfen. Und eigentlich könnte es zunächst ein bisschen beängstigend aussehen, denn hier gibt es im Grunde nichts. Wir haben nur eine leere Leinwand, einige Optionen, einige Knöpfe hier oben, einige Knöpfe hier auf der linken Seite, und das war's im Grunde. Jedoch, in nur wenigen Sekunden werden Sie sehen, dass Sauerstoff Schnittstellen, Ich denke, ziemlich ähnlich wie eine Menge von Designer-Programme wie Photoshop, Illustrator, Designer, oder was auch immer Sie für Ihr Design-Tool verwenden. Also, hier in Sauerstoff, haben wir Werkzeuge auf der linken Seite. Wenn wir einfach auf diese Schaltfläche klicken, werden Sie sehen, dass wir eine Menge, viele verschiedene, verschiedene Tools haben , die wir auf unserer Website hinzufügen können. Also haben wir die Grundlagen wie einige Container, Textlinks, und wir konnten Bilder, Videos und andere Thins hinzufügen . Wir haben ein paar Helfer, Bursts, das heißt Helfer. Aber wirklich sind sie nur einige, wie die häufigsten Dinge oder Module, die Sie im Webdesign verwenden könnten. Und so ist es wie ein Galerie-Beitrag , dass wir Easy Posts Modul für unseren Blog verwenden werden. Wir haben den Header Builder, den wir verwenden werden, um unsere Header, soziale Symbole, Testimonial, Schieberegler, alle, all diese, all diese Dinge zu erstellen soziale Symbole, Testimonial, Schieberegler, . Wir haben einige Wordpress, Wordpress, Wordpress verwandte tatsächlich Module wie ein Menü Pro-Menü, Kurzwahlnummern, Commons und alle von denen. Und all diese Dinger. Wir haben ein paar dynamische Daten. Das sind also die Dinge, die aus unserer Datenbank herausgezogen werden, aber das ist für ein späteres Video. Wir kriegen ein paar Widgets. Also, wenn wir Widgets für innen verwenden, wo wir zuerst verwenden können, können wir sie von hier ziehen. Und wir haben auch wie Bibliothek-Designer-Sets, die mit kommen , mit, mit Sauerstoff. Und wir haben einige wiederverwendbare Teile, aber wir haben noch nichts erstellt. Also habe ich keine maßgeschneiderten, von uns angefertigten Teile und Teile, die zu unserem Design hinzugefügt werden könnten. Also im Grunde hier auf der linken Seite, werden Sie alle Ihre Werkzeuge sehen. Und hier, die oberste Suche und Feld, die wir einfach eingeben könnten, vielleicht wie einige, wie ein Bild. Da gehen wir, wir haben unser Image-Modul. Oder wir könnten etwas leichter oder SL eingeben, und wir haben unseren Schieberegler und et cetera. So können wir einfach die weniger Buchstaben eingeben, die ersten Buchstaben eines beliebigen Moduls Namen. Und dass ein Modul aus diesem Panel herausgefiltert wird. Genau hier. Hier rechts, oben rechts, haben wir ein paar Tasten hier, und wir haben diesen großen blauen Speichern-Button, den wir brauchen, Nun, wir müssen, es ist eine gute Idee, oft darauf zu klicken. Und wir haben ein paar, ein paar andere Knöpfe. Also lasst uns zuerst auf die Struktur klicken. Button und wie Sie sehen können, haben wir unsere Struktur und in nur wenigen Sekunden wird es aussehen wie im Grunde, im Grunde wie Ebenen in Photoshop, Illustrator oder Designer. So werden alle unsere Elemente, die wir hier auf unsere Leinwand gesetzt werden, hier in dieser Struktur vertreten sein. Keine Schmerzen. Wir haben das Geschichtsfenster, aber wir haben noch nichts getan, also sind die Geschichten leer. Und wir haben die Optionen Verwalten, die es uns ermöglichen, auf eine andere, andere Einstellungen oder globale Einstellungen zu erhalten . Wenn wir zum Beispiel versuchen, einige Einstellungen zu ändern, könnten wir vielleicht einige Einstellungen ändern, mit denen wir unsere Seite einstellen könnten. Wir könnten mit globalen Einstellungen für Animationen herumspielen. Und, aber auch, wenn wir nur voran gehen und wählen Sie eine globale Stile, werden wir mit diesen in nur einer Sekunde spielen. Wir sind in der Lage, werden wir in der Lage, unsere globalen Farben hinzuzufügen , die immer vorhanden sein werden, wenn wir die Farben verwenden wollen. Es wird sein, wenn wir auf wie ein Farbwähler klicken, unsere globalen Farben werden da sein. Und natürlich haben wir auch gerne Schriftarten. So konnten wir unsere Standard-Display-Schriftart wählen, Anzeige vor Pferden, eine Schriftart für unsere, für unsere Überschriften. Und wir haben auch Schriftarten für unseren Text. Sie können auch Geld direkt hier hinzufügen, wenn Sie möchten. Und wir könnten unsere Überschriften ändern, damit wir global die Größe und die Farben für jede unserer Überschriften von einer bis sechs Jahren festlegen können. Und wir könnten auch den Körpertext ändern, die Schriftgröße, Gewicht, die Farbe unseres Brunnens, diesen Textkörper. Also all diese Dinge, die, die Sie gerne global setzen möchten. Sagen wir mal, Sie wollen nur Ihre Überschriften so einstellen, dass sie, ich weiß nicht, in Bree Serif Schriftart geschrieben sind. Und Sie wollen, dass sie immer gelesen werden. könntest du einfach hier einstellen. Und dann, wenn Sie eine Überschrift von unserem hinzufügen, wie dieser Kerl hier aus unserem Werkzeugfeld, dann müssten Sie sich nicht um die Farben und die Größe und das Gewicht und die Zeilenhöhe kümmern . Du kannst alles hier einstellen, oder? Also haben wir kurz darüber gesprochen und die Sauerstoff-Schnittstelle, natürlich werden wir tauchen, tauchen viel tiefer ein, sobald wir anfangen, unsere Elemente auf unserer Website hinzuzufügen. Aber eigentlich, lasst uns vielleicht mit diesen globalen Einstellungen herumspielen. Lassen Sie uns tatsächlich ein paar Globals, Farbe, globale Farben. Und lassen Sie uns einige Schriftarten zu unserer hinzufügen, auf unserer Website. Und dafür müssen wir nur einen kurzen Blick auf einige andere Websites werfen , die normalerweise mein Designer-Szenario verwenden. Und ich möchte einfach keinen Schritt überspringen, wenn ich dieses Design erstelle. natürlich daran, dass Design selbst hier nicht das Wichtigste ist. Das Wichtigste ist, dass die EU lernt, oder wieder, in all den Fähigkeiten, die Sie benötigen, um Ihre eigenen Entwürfe neu zu erstellen . Also lassen Sie uns tatsächlich zu einer Website übergehen, die ich benutze, um einige Farben und einige Fans zu holen. 10. 3.4Globale Farben und Schriftarten: Beginnen wir also vielleicht mit dem Hinzufügen von Farbsets auf unserer Website. Also werde ich wählen, Ich werde auf eine Website namens Coolers dot co gehen. Und Sie wahrscheinlich gut, Sie haben wahrscheinlich diese Website gesehen oder davon gehört, zumindest. Es ist nur eine großartige Website, um verschiedene Farb- und Farbschemata zu finden. Also lasst uns den Generator starten. Und hier drin, wie Sie sehen können, haben wir ein paar Farbfelder. Standardmäßig haben wir 12345 Farbfelder erhalten. Aber wenn Sie möchten, können Sie einfach auf diese klicken, fügen Sie Farben plus Symbol hinzu, um nur ein weiteres Farbfeld hinzuzufügen. Und natürlich könnten wir es entfernen, wenn du es wolltest. Und wir könnten das Gleiche mit anderen mit anderen Farben machen. Was ich normalerweise mache, was ich normalerweise damit anfange, ist, dass ich versuche, sie in Farbe für meinen Text und Farbe für den Texthintergrund zu finden. Und ich gehe normalerweise nicht gerne mit Leckie Plain Black und Flugzeug. Warum? Weil ich denke, sie sind zu übertrieben die HIPPA, zu langweilig. Aber natürlich liegt das ganz bei Ihnen, wenn Sie mit schlichtem Schwarz und reinem Weiß gehen wollen. Wie auch immer, ich benutze nur gerne eine sehr, sehr hellgraue Farbe. Und ich weiß, dass der Hex-Code dafür F8, F8, F8 ist. Wir könnten auch mit etwas noch leichterem gehen, das wäre F9. F9, F9, F9. Da gehen wir. Und sobald ich mit der Farbe zufrieden bin, werde ich sie einfach sperren. Und dann werde ich nur versuchen, einen schönen Hintergrund zu finden, wie, äh, die dunkelste Farbe. Ich werde, Ich mag von der hellsten und dunkelsten gehen und dann können wir versuchen, etwas anderes zu finden. Also für diesen Kerl werde ich vielleicht versuchen, einen schönen Schatten davon zu finden, vielleicht diese ultra dunkelbraune Farbe, die in Ordnung aussieht, und ich werde es einfach sperren. Und dann, wenn wir einfach versuchen, gut zu kommen, wenn wir den Generator einfach einige andere Farben für uns einfallen lassen, könnten wir einfach die Leertaste drücken, um nur einige Farben zu finden , die wir verwenden könnten Ende diese Farben für unsere Links sein könnten. Sie könnten für unsere Schaltflächen oder Hover-Zustände sein, all diese, all diese Dinge. Aber der wichtigste Teil hier ist, nur zuerst zu versuchen , mit Ihrem Farbschema zu kommen, wenn Sie Ihre Website entwerfen. Und dann, um all diese, all diese Farben, all diese Farbfelder zu verwenden , lassen Sie uns vielleicht noch eins hinzufügen. All diese Farbfelder zu Sauerstoff. Und das ist im Grunde, was ich möchte, dass Sie von diesem Video lernen. Also haben wir diese F8, FATF, F9, F neun von neun. Ich werde nur diese Farbe kopieren. Und ich werde zu Sauerstoff gehen. Und ich werde einen Farbsatz hinzufügen. Und ich werde es vielleicht wie Standardfarben nennen. Da gehen wir. Und ich bin, ich werde nur zu Edit gehen. Und jetzt innerhalb dieses Satzes, diese Standard-Farben Farbset, Ich werde nur eine Farbe hinzufügen. Und nennen wir es vielleicht hellgrau sein. Und ich werde diesen Hex, Hex-Wert einfach so einfügen . Also haben wir unsere, unser Licht, hellgrau und dann gehen wir voran und. Schnappen Sie sich diesen Hex-Code auch. Und das wird unser Dunkelbraun sein. Dunkelbraun Da gehen wir. Ich werde es hineinkleben. Und da gehen wir, wir haben unser hellgrau und unser dunkelbraun. Und natürlich würden Sie in Ihrem Fall verschiedene, verschiedene Farben hinzufügen. Lassen Sie uns vielleicht einfach, genau wie die Praxis, lassen Sie uns vielleicht etwas hinzufügen, vielleicht lasst uns dieses hellere braune Y naught greifen. Dies könnte eine gute Farbe für unsere Tasten sein. Also werde ich mich einfach vermischen, es heißt mittelbraun. Da gehen wir. Und ein weiterer Hashtag und fügen Sie die Farbe hinzu. Also werde ich es nicht retten. Dies wäre also unsere Standardfarben Farbpalette. Für jetzt, lassen Sie es uns einfach halten und so behalten. Wie gesagt, ist, es geht nicht wirklich um den Design-Teil. Ich will es nicht wirklich hübsch machen. Ich will es nur praktisch machen. Ich will nur, dass du die Fähigkeiten erlernst. Ich möchte nur, dass Sie lernen, wie man mit Sauerstoff umgeht, um Ihre eigenen Entwürfe zu kreieren. Natürlich wird ein Design auf dem Weg zu schaffen. Aber für jetzt, lasst uns einfach lernen, dass Standard. Wie man einige Standardwerte hier in Sauerstoff einrichtet. Das sind also unsere Farben. Und was ist mit den Schriftarten? Also, wenn es um Schriftarten geht, würde ich gerne zum Schriftpaar gehen. Fond übergeordneter. Da gehen wir von Eltern dot co. Und hier haben wir eine schöne, ziemlich umfangreiche Reihe von verschiedenen, von verschiedenen wir werden Schriftpaare. Und wir könnten mit wie Sans Serif und Sans Serif Schriftarten gehen oder Serif wäre unser Display gefunden unsere Rubrik Telefon und Serif. In diesem Fall wäre Alexandria unsere Textschriftart. Wir könnten mit Sensor von San-Seriif, Display und San-Seriif wie dieser gehen , oder Display und Serif. Und wir könnten, wissen Sie, einfach die Kategorie wählen, die wir wollen. Also alle diese Telefone sind Google-Schriftarten oder sie sind kostenlos und sie kommen mit Sauerstoff als auch. Also lasst uns versuchen, etwas Nettes zu finden. Ich weiß, dass ich für unsere Logo-Schriftart namens Bree Serif verwenden werde. Mal sehen, ob wir es finden können. Da gehen wir. Wir haben Bree, Serif und Laura hier. Mal sehen, ob es in einem anderen Paar kommt. Bree Serif und Offenheit endet. Und ich denke, ich werde mit diesem Paar gehen, weil es nur ein schöner Kontrast zwischen einer Art funky Überschrift und einem wirklich lesbaren Text ist. So könnten wir mit dieser Schriftart Paris gehen, aber wir könnten auch auf eine Website Code Seite namens Font Font Joy gehen. Da gehen wir. Und hier könnten wir mit diesem kontrastierenden Schieberegler spielen , Kontrast Schieberegler. Wir könnten also sagen, dass wir mehr Kontrast zwischen unseren Überschriften und unserem Text haben möchten . Oder wir möchten einen sehr, sehr niedrigen Kontrast haben. Und Sie können sehen, dass wir den Schriftnamen hier auf der linken Seite und den Schriftnamen für unsere Unterüberschrift hier auch auf der linken Seite haben. Und unsere Texte und gut, der Name unserer Körpertext-Schriftart ist auch hier richtig. Wenn Sie also ein sehr kontrastreiches Schriftpaar verwenden wollen, könnten wir genau das tun. Also hätten wir ein Enrico Letta und auch Possen Labor für unsere, für unseren Körpertext. Aber das ist nur ein weiteres einfaches und sehr interessantes Werkzeug, um einige schön aussehende Schriftpaare zu finden. Also werde ich mit Bree Serif und Open Sans gehen. Also werde ich zu Sauerstoff gehen. Meine Schriftart wird Bree Serif sein. Und ich werde es als Open Science belassen und ich werde es einfach retten. Also jetzt, wenn ich eine Überschrift hinzufüge oder ich werde etwas Text hinzufügen. Und Sauerstoff geht davon aus, dass ich diese Bree Serif-Schriftart für meine Überschrift verwenden möchte, einen offenen Satz für meinen Körpertext, aber auch für Menüs und beendete Links. Also haben wir die Farben, Standardfarben, wir haben die Schriftarten. Wir könnten auch zu unseren Rubriken übergehen, wenn wir wollten. Also lassen Sie uns sagen, dass wir vielleicht diese Überschrift behalten möchten, eine als 36 Pixel. Aber lassen Sie uns vielleicht hinzufügen, nun, lasst uns eine Farbe ändern. Also werde ich nur auf diese Farbe klicken. Und Sie können hier unten sehen, haben wir unsere Standardfarben angezeigt. So könnte es einfach dieses dunkelbraun als unsere Farbe hinzufügen. Und dann einfach „Speichern“ drücken. Wir könnten dasselbe für die Rubrik zwei tun, dunkelbraun. Und jetzt, wenn wir diese Überschrift eins oder Überschrift zu Überschrift 3 hinzufügen , wenn wir, wenn wir nur diese Farbe hinzufügen, wissen wir, dass das genau die Farbe ist, die wir für diese Überschrift verwenden werden. Und natürlich könnten wir auch die Schriftgröße ändern, wenn wir wollten. Aber lassen Sie es uns jetzt einfach halten. Lassen Sie uns einfach die Farben hinzufügen. Wir könnten sie immer ändern. Der Überschriftenwert einer bestimmten Instanz einer Überschrift sobald sie auf unsere, auf unsere Kannibalen gelegt wurde. Ok. Also haben wir die Farben, wir haben die Mittel, wir haben ein paar Überschriften. Wir könnten die Schriftgröße vielleicht auf 15 verkleinern. Und vielleicht lasst uns die Farbe zu unserem dunkelbraunen ändern. Da gehen wir. Lassen Sie uns die Zeilenhöhe für jetzt, wie es ist. Wir können es später ändern und ich werde es einfach retten. Also haben wir unsere Standardwerte eingerichtet. Wir müssen, wir lernen, wie man die Sauerstoff-Schnittstelle im Grunde benutzt. So können wir jetzt tatsächlich beginnen, unsere Vorlage hinzuzufügen. Und werden wir mit dem Hinzufügen beginnen, natürlich, einen Abschnitt. Und wir werden lernen, welche Abschnitte sind, was Spalten und Entwickler in nachfolgenden Videos sind. Und wir werden damit beginnen, unser Logo oben links auf unserer Website hinzuzufügen. Webseite. Also fangen wir an, das als nächstes zu tun. 11. 3.5-Aufbauen: Um damit zu beginnen, unsere Logos und Menüs und soziale Symbole und all diese Dinge hinzuzufügen, müssen wir zuerst darüber nachdenken, wo wir das hineinbringen werden. Wir brauchen eine Art Behälter hier in einem Sauerstoff. Und eigentlich in jeder Art von Waffenentwicklungsprojekt, ist es eine gute Idee, zuerst eine Art Container zu haben, um alle Ihre kleineren Teile, alle Ihre kleineren Elemente zu behalten . Nun, normalerweise in Sauerstoff, würden wir mit einem Abschnitt beginnen und dann könnten wir ein div oder Spalten hinzufügen. Und wir werden in wenigen Augenblicken darüber reden. Eines der, eines der kommenden Videos. Aber wir bauen jetzt einen Header, unsere Vorlage mit einem Header. Also in Sauerstoff, Sie bekommen einen Hadoop-Builder. Das ist eine besondere Art von Abschnittsmodul-Element. Also, wenn wir nur in Header und dann Hatteras Builder eingeben, können Sie sehen, dass es tatsächlich zu unserer Website hinzugefügt wurde. Wenn wir zu unserer Struktur gehen, können Sie sehen, dass wir unseren Header Builder haben. Dies ist unser Hauptabschnitt. Und dann haben wir unsere Kopfzeile mit drei Elementen. Also haben wir unser linkes Element, zentrales Element und schreiben Elemente. Also links, Mitte und rechts. Und in der Regel in einem typischen Webdesign-Szenario, würden wir unser Logo in den linken Teil unserer Kopfzeile setzen. Und dafür könnten wir den linken Teil hier in unserer Kopfzeile verwenden. Also lassen Sie uns tatsächlich ein Logo von erstellt ist so etwas wie, na ja, ein sehr, sehr einfaches, einfaches Logo für unsere Website. Ich nenne das Wow-Design, weil y nichts, Ich habe gerade dieses einfache Symbol von flachen Ikone genommen. Und wie Sie sehen können, habe ich zwei verschiedene Versionen davon, dieses Logo. Der eine ist unser dunkles, dunkelbraun und der eine ist unser Licht, Licht, Groß. In diesem Fall könnten wir unser Logo auf zwei verschiedene Arten hinzufügen. Die einfachste, der einfachste ist nur, diesen Kerl in ein einfaches Bild zu verwandeln und es dann als unser Logo hochzuladen, was wir jetzt tun werden. Und Sie würden es normalerweise so tun, wenn Ihr Typ etwas etwas Besonderes ist, etwas Funky, etwas maßgeschneidertes, etwas, das nicht leicht mit nur einfachen, einfachen Text abrufbar ist . Also werde ich diese Typen einfach schnappen. Und ich werde Alt plus Control plus Shift plus S drücken, um diese Elemente zu exportieren. Wie Sie sehen können, verwende ich Affinity Designer, aber wenn Sie Photoshop oder Illustrator verwenden, können Sie Ihren Text und dieses Symbol grundsätzlich in ein Bild verwandeln. Also werde ich das PNG wählen, weil ich den Hintergrund nicht brauche. Und ich werde nur die Auswahl ohne Hintergrund verwenden. Und die Größe ist in Ordnung. Ich werde nur Export treffen. Und ich werde es vielleicht Logo eins nennen. Und ich werde „Save“ treffen. Und jetzt gehe ich zurück zu meinem Entwurf. Und ich möchte hier im linken Teil meines Header-Builders ein Bild hinzufügen. Also wieder, ich werde hinzufügen und ich werde ein Bild zu finden. Da gehen wir. Und ich muss nur mein Bild in meiner Mediathek finden. Also werde ich einfach zum Stöbern gehen. Und jetzt muss ich nur dieses Bild finden. Sobald ich mein Bild gefunden habe, doppelklicken Sie einfach darauf und wählen Sie einfach Bild auswählen. Und wie Sie sehen können, wurde dieses Bild direkt in meinen Pfeil links gesetzt. Das ist also mein Logo. Und, weißt du, wenn du willst, und es, ich denke, es wäre eine gute Idee. Wir könnten vielleicht mit diesem Bild herumspielen. Ich meine, wir könnten es zum Beispiel kleiner machen. Also lassen Sie mich einfach die Höhe auf etwas wie 45 Pixel ändern, oder vielleicht sogar zuletzt, so etwas wie 32 Pixel oder vielleicht sogar 26 Pixel. Wir könnten runter und runter und runter gehen, so viel wir wollen, wie wir wollen. Dies ist also eine Möglichkeit, das Logo auf unserer Website hinzuzufügen. Natürlich müssen wir immer noch mit etwas Platz um all diese Elemente herum spielen. Aber im Moment lernen wir nur, wie man ein Element auf unserer Website hinzufügt. Und tatsächlich, wenn wir nur gearbeitet haben und speichern, und wenn wir unsere, unsere Websites, naja, Adresse, dann werde ich es einfach kopieren. Und da ich auf einem Firefox bin, werde ich nur die Steuerung plus Shift plus P-Tastaturkürzel verwenden , um den Inkognito-Modus zu betreten. Aber wenn Sie in Chrome sind, würden Sie verwenden, Sie könnten Steuerung plus Shift plus n verwenden, um in den Inkognito-Modus zu gelangen. Also gehe ich einfach zu dieser Tablet-Adresse in. Und Sie können sehen, dass wir tatsächlich bereits beginnen, unsere Website zu bauen. Lassen Sie uns überprüfen, ob das auch auf Chrome funktioniert. Da gehen wir. Wir haben unsere Website im Grunde beginnen und anfangen, wirklich zu funktionieren. War es so einfach? Aber wie gesagt, ist dies nur eine der Möglichkeiten, ein Logo wie dieses hinzuzufügen. Was wir jedoch tun könnten, ist, dass wir vielleicht das gerade unsere, an unserem Bild wie dieses Stück unseres Designs hinzufügen könnten . Also werde ich es mir einfach schnappen. Und wieder werde ich die Verschiebung als PNG-Auswahl ohne Hintergrund steuern. Exportieren. Der Export wird, wie Sie sehen können, bereits ausgenutzt und zuvor exportiert. Also werde ich es einfach anmelden nennen, um diesen Kerl zu retten. Gehen Sie zurück zu Firefox und fügen Sie erneut ein Bild hinzu. Und ich werde diesen Kerl finden müssen. Also, wenn ich es gefunden habe, werde ich es nur lesen, wählen Sie ein Bild aus. Wir werden auf „Speichern“ klicken. Wie immer, manchmal müssen wir nur noch die Seite aktualisieren und wir haben unser Logo hier gesetzt, wieder in unserer linken, linken Reihe. Wenn Sie möchten, könnten Sie dieses Bild einfach in einen anderen Teil unseres, na ja, diesen Header-Builder ziehen , wenn Sie möchten , aber, wissen Sie, es ist nur eine Sache, die Sie tun könnten, aber wir werden es sagen rückwärts und gehört. Und ich werde dieses Logo gerade jetzt entfernen. Also, um das zu tun werde ich einfach über dieses Bild hier, diese Ebene. Und ich werde nur dieses x Komponente entfernen Symbol drücken. Da gehen wir. Also haben wir unser Bild bekommen und lassen Sie es vielleicht kleiner machen, aber wir haben nicht den Text, also wie man den Text für unser Logo hinzufügt? Wenn wieder, wieder, werde ich nur hinzufügen drücken. Nun, lasst uns den Text finden. Da gehen wir. Und ich werde einfach eintippen, WOW, entwerfen ihr Ego. Aber da dies nur ein einfacher Text ist und wir ihn auf offenen Sinn setzen, wie Sie sehen können, ist unsere Schrift nicht die Schriftart, die, die zu schlagen, sollte Bree Serif sein. Wir könnten es hier ändern. Wir könnten einfach voran gehen und die Serif anzeigen lassen, oder wir könnten mich einfach entfernen lassen. Oder wir könnten eine Überschrift hinzufügen. Also geben Sie einfach die Überschrift ein. Und wie Sie sehen können, haben wir bereits die Schriftart, die wir brauchen. Aber da es gesetzt ist, ist dieses Tag auf eins gesetzt. Und in unseren globalen, globalen Werten setzen wir es auf, glaube ich, 36 Pixel. Es ist viel zu groß, aber wir könnten es noch kleiner machen, wie 24. Natürlich geben wir den Text während des Entwurfs ein. Und da gehen wir. Wir könnten vielleicht ein paar Dinge ändern. Vielleicht lassen Sie mich einfach eine Stadt machen, vielleicht nur ein bisschen kleiner, 36, denn das sollte gut sein. Und wir könnten immer noch auf die Registerkarte Erweitert gehen, dann Topographie. Und hier könnten wir vielleicht den Zeilenabstand erhöhen, den Buchstabenabstand zu Main mu eins, um es so aussehen zu lassen. Ich denke, es sieht in Ordnung aus. Wenn Sie nun den Abstand zwischen ihnen, diesen Elementen, vergrößern oder verkleinern möchten , könnten Sie in diesem Fall Ihren Text oder Ihr Bild greifen. Und wieder, gehen Sie zu fortgeschritten, diesmal zu Größe und Abstand. Und hier drinkönnte man natürlich könnte man natürlich n ihre Höhe oder minimale Höhe oder Breite ändern. Aber Sie könnten auch mit etwas spielen, das Padding und Marge genannt wird. Aber lassen Sie uns im nächsten Video über diese beiden sprechen. 12. 3.6-Füllung und Aufschluss zum Logo: Also lassen Sie uns jetzt schnell über zwei Ideen sprechen, zwei Elemente in einer Web-Entwicklung und sind extrem wichtig, aber glücklicherweise extrem leicht zu verstehen. Und sie sind extrem wichtig, weil Sie sie ziemlich viel verwenden werden. Und diese Elemente sind Polsterung und Rand. Und der Unterschied zwischen ihnen ist, dass sie im Grunde Raum um ein Objekt anzeigen, aber Padding fügt wie ein innerer Raum innerhalb eines Containers und der Rand Ed Außenraum hinzu. Aber in unserem Fall im Grunde jetzt könnten wir einen dieser Werte verwenden. Wenn wir also etwas Abstand zwischen unserem Vogel und dem Text hinzufügen möchten , könnten wir entweder Padding oder Marge verwenden. Wenn wir also nur zehn Pixel eingeben, können Sie sehen, dass wir diesen Container hier erweitern. Sie können diese Zeile sehen, diese violette Linie, das ist eine Markierung in unserem Container. Und wenn wir die Marge hatten, können Sie sehen, dass der Container gleich bleibt. Aber wir haben etwas Platz zwischen unserem Vogel und dem Text, genau wie wir es bei der Polsterung getan haben, aber der Behälter bleibt intakt. Nun, eine andere Sache, die wir in Bezug auf Marge und Padding tun könnten , ist, dass wir unserem Hauptcontainer, unserer Header-Zeile, etwas Padding hinzufügen könnten . Und Sie werden fast immer einige Polster- und Randoptionen unter der erweiterten Registerkarte finden. Und dann Größe und Abstand. Wir sind wieder in dieser Polsterung, Padding und Margin Optionen jetzt. Aber bevor wir damit beginnen, und bevor Sie wirklich beginnen, den Unterschied zwischen Padding und Marge zu verstehen, besonders wenn Sie zu Containern hinzugefügt werden. Lassen Sie mich einfach schnell den Hintergrund unseres Headers in etwas wirklich Willkürliches ändern , So etwas wie dieses. Wir werden es in nur einer Sekunde ändern. Also wieder, Größe und Abstand. Und wenn wir jetzt etwas Padding zu oben und unten hinzufügen, sagen wir 50 Pixel und dann 50 Pixel, zwei oben und unten. Sie können sehen, dass unser Container wächst. Jetzt haben wir eine Menge von dieser blassroten Farbe hier. Aber wenn wir den Rand hinzugefügt haben, obwohl die Werte gleich sind, können Sie sehen, dass wir den Container im Grunde intakt in Bezug auf seine sichtbare oder wahrnehmbare Größe halten . Aber wir fügen Rand am oberen und unteren Ende hinzu. Natürlich kann man im Moment nichts sehen, weil es weiß gegen breit ist. Aber wenn Sie einfach den Mauszeiger über diesen Raum hier bewegen, können Sie sehen, dass wir es sind, wir fügen tatsächlich einen gewissen Rand hinzu. Und übrigens, wenn Sie keinen Rand oder Padding wie hier manuell hinzufügen möchten, könnten Sie dies immer wie eine Kante eines Containers greifen. Ränder spielen um ihn herum, spielen damit herum. Und das gleiche für die Polsterung wie diese. Und dann, wie Sie sehen können, wurden diese Werte automatisch hier innerhalb unserer Padding und Margin Werte eingegeben . Nun, ich will nicht, dass diese Typen so aussehen. Ich möchte etwas Polsterung hinzufügen, aber nicht so viel. Gehen wir mit vielleicht 2525. Ich schätze, das sollte verteilt werden, oder? Vielleicht, vielleicht 18. Wenn wir vorher ein richtiges Design entwickelt hätten, hätten wir natürlich schon all diese Werte. Aber wie gesagt, es ist mehr über nur die Ebene um ein Lernen die Fähigkeiten, eine Website zu bauen, als nur tatsächlich direkt an unserem Design kleben und eine Anzeige dünn luca machen, die schönste möglich. Also haben wir unser Logo-Setup bekommen, wir haben etwas Spielraum und wir haben hier etwas Platz. Ich bin jedoch nicht gegangen, um diese Hintergrundfarbe zu entfernen. Und wir sind zurück mit unserem, unserem Design. Und wenn Sie überprüfen möchten, wie es aussieht, wenn wir nicht eingeloggt sind. Da gehen wir hin. Wir haben unser gut gestaltetes Logo und unser Logo hier oben links. Nun, das sieht alles aus, das sieht alles gut aus. Aber natürlich müssen wir uns immer noch an unser Design erinnern , wenn Benutzer von höchstwahrscheinlich kein mobiles Gerät darauf zugreifen. Heutzutage kommt der Großteil des Traffics und der Websites von mobilen Geräten, nicht von Desktops oder Laptops oder was auch immer. Darauf müssen wir also achten. Und ich denke, wir sollten schon von Anfang an verstehen, wie wir dieses Problem angehen können, von Anfang an, denn es ist extrem, extrem wichtig. Also ist es eigentlich anfangen, das im nächsten Video zu tun. 13. 3.7er Sorgen für die Reaktionsfähigkeit: Wie gesagt, unser Design sieht schön aus. Nun, bisher sieht unser Logo auf Desktop-Geräten gut aus, aber was ist mit kleineren Geräten? Also müssen wir uns um die ansprechende Seite der Dinge kümmern, die hier drin in Sauerstoff sind. Und es ist wirklich einfach. Wenn wir einen Blick auf diesen kleinen Schalter hier auf der linken Seite werfen, können Sie sehen, dass wir einige Icons haben. Und wenn wir nur auf eine dieser Optionen klicken, so lassen Sie uns mit Seitencontainer gehen, 1120 Pixel und darunter. Das ist, was unser Design wahrscheinlich, na ja , ich meine, die Größe unseres Logos wird wie ein meisten Laptops aussehen. Bisher sieht es in Ordnung aus. Gehen wir zu weniger als 992. Das könnte wie ein paar größere Tablet-Tablets sein. Das ist auch in Ordnung. Gehen wir zu weniger als 768. Jetzt, da wir hier ein Menü haben werden, könnten wir vielleicht ein paar Dinge darüber ändern. Vielleicht könnten wir zum Beispiel die Textgröße ändern. Also werde ich nur auswählen, das geht auf den Weg, dieser Kerl hier. Und für 768 möchte ich es vielleicht etwas kleiner machen, vielleicht auch dieses Bild. Also werde ich gerade diesen Schieberegler jetzt verwenden. Und ich werde diesen Kerl auf vielleicht 18 Pixel bringen. Und für diesen Kerl, vielleicht werde ich es auch in Pixeln sehen. Jetzt wird das viel zu klein sein. 2424 sollte in Ordnung sein. Da gehen wir. Also haben wir unsere Hmm, weißt du was, vielleicht lasst uns das auch ändern. Die Größe unserer Lücke hier. Vielleicht machen wir es etwas kleiner. Und wie Sie sehen können, wenn Sie zu Größe und Abstand gehen, könnten wir vielleicht wie fünf Pixel tun, nicht mehr. Also, wenn wir jetzt auf unsere alten Geräte gehen, so ist dies unser Logo. Dann Seite Container, dann weniger als 992, und dann 768. Jetzt wird es kleiner und lassen Sie uns weniger als vier AD gehen. Für 80 sieht es immer noch in Ordnung aus. Natürlich werden wir mit der reaktionsfähigen Seite der Dinge viel mehr in den kommenden Videos spielen . Wenn du willst, könntest du vielleicht, weil du so dein Design gestalten willst. Lassen Sie uns vielleicht auf die, unsere Kopfzeile gehen. Und sagen wir, vielleicht möchten wir die Farbe des Hintergrunds für unsere wie Kain ändern , vielleicht wie eine Smartphone-Ansicht. Warum nicht? Nur zum Spaß? Wenn wir also auf weniger als 480 sind, gehen wir jetzt zu Advance. Natürlich haben wir unsere Kopfzeile ausgewählt. Wir gehen in den Hintergrund, Hintergrundfarbe. Und lassen Sie uns schlüpfen vielleicht die Farbe des Hintergrunds zu diesem hellgrau oder vielleicht sogar etwas Sichtbares ändern . Also, nur damit Sie die Veränderung sehen können. Und wir werden es so lassen. Ich werde es retten. Also, wenn Sie jetzt auf unsere alten Geräte gehen oder große tut eine Desktop-Seite Container nichts passiert weniger als meine 92, nicht viel passiert. Weniger als 768. Das Logo und der Text ändern sich jetzt alles kleiner und weniger als vier AD. Und gehen wir zu unserem, unserem Design. Und das übrigens könnten wir, zum Beispiel, gerade jetzt, einfach anfangen, die Größe unseres View-Ports unseres Browsers zu ändern. Wie Sie sehen können, werden wir jetzt kleiner. Die sprang zu gut auf weniger als 768, glaube ich, es war. Und Landschaftsgleichmäßigkeit, kleiner, kleiner, kleiner. Und da gehen wir hin. Wir haben unser kleinstes Smartphone wird in der Header-Reihe auf den kleinsten Geräten haben wird so aussehen. Und wenn Sie diese Änderungen nicht behalten wollen, diese Änderungen wie diese, immer daran, sicherzustellen, dass Sie auf der richtigen Pause eins sind. Also weniger als vier AD in diesem Fall, ich werde es nur entfernen. Und lasst uns zu weniger als 768 gehen. Vielleicht werde ich es verlassen. Lassen Sie es so, und denken Sie immer daran, dass all diese Änderungen funktionieren. Nun, es gibt eine Hierarchie zwischen all diesen Typen, all diesen Typen. Wenn Sie also etwas für weniger als 992 festlegen, sagen wir, dass Sie diese Textfarbe ändern werden, gehen wir mit etwas gelblichem vielleicht oder einfach etwas Sichtbares. Da gehen wir. Also für weniger als 992 ist es so. Also für die höheren Werte, also für das übergeordnete Element, haben wir immer noch unser Original bekommen. Aber wenn wir nach unten gehen, wenn wir zum Kind gehen, ändert sich dieser Wert und dann gehen wir, wenn wir zu einem anderen Kind gehen, ändert sich dieser Wert, aber nur die Größe ändert sich, weil wir die Farbe nicht berührt haben, also bleibt die Farbe gleich. Wenn du es in so etwas ändern würdest. Dann gehen wir nach 1992. Wir wurden grün, dann 768, wir wurden braun. Wenn wir nichts darauf anwenden und die Farbe, Farbe nicht anwenden. Nun, jedes Attribut nimmt tatsächlich die Werte des übergeordneten Elements, das in unserem Fall der 992 Breakpoint ist. Aber natürlich brauchen wir die grüne Farbe nicht, also werde ich sie einfach loswerden. Ich schätze, wir könnten mit der Größe für unser Logo bleiben. Das sieht gut aus. Lassen Sie es uns so behalten. Also haben wir unser Logo, wir haben uns gut gemacht, wir haben uns um ein bisschen eine reaktionsfähige Seite der Dinge gekümmert. Ich denke, es ist höchste Zeit, dass wir unser Hauptmenü auf der rechten Seite hinzufügen. Also fangen wir an, das im nächsten Video zu tun. 14. 3.8-Einfügung: Also jetzt fangen wir an, unser Menü hinzuzufügen. Das ist eine Art, ich will sagen, verlängern oder komplexer Prozess, aber es gibt ein paar Schritte, um ein Menü auf jeder, jeder Website zu erstellen , nicht nur hier in einem Sauerstoff. Beginnen wir also mit dem Hinzufügen unserer Menüelemente. Also wieder, ich werde nur drücken und, und dann tippen Menü. Nun, wie Sie sehen können, gibt es zwei Module für unser Menü. Dieses Menü ist die, na ja, ich will nicht sagen, veraltet, aber es ist ein altes Menü-Modul. Und da, glaube ich, Drei-Punkt-Sauerstoff, 3.2 oder 3.3, haben wir das Pro-Menü. Also werde ich das tun, also werde ich unsere Speisekarte hier benutzen. Jetzt, wie Sie sehen können, wird es zu unserer ersten Zeile hinzugefügt, dieser Zeile, linken Teil, hier. Und ich wollte auf der rechten Seite sein, also werde ich es einfach nach rechts ziehen. Jetzt standardmäßig können Sie sehen, dass es einige einfache Dummy-Menü-Links zu unserem, zu unserem Menü hinzugefügt. Also werde ich zur Menüoption gehen. Und wie Sie sehen können, ist es im Grunde AMT, wir haben nichts hier. Das liegt daran, dass wir noch kein Menü erstellt haben. Also werde ich nur meine, meine Seite retten. Und ich gehe zurück zum Admin-Panel. Und von Zeit zu Zeit werden Sie diese Nachrichten direkt hier sehen , die Sie darüber informieren, dass einige, einige Caching, dass Sie einige globale Einstellungen ändern und Sie Ihre Sauerstoffeinstellungen neu einstellen müssen. Also lasst uns einfach hier klicken. Und dann sind Sie im Grunde dann, wie Sie sehen können, alles getan, universelles CSS Cash erfolgreich generiert. Das ist im Grunde, um die Erinnerung an Sauerstoff zu erfrischen. Lassen Sie uns also fortfahren, um dieses Menü tatsächlich zu erstellen. Ich gehe zum Darstellungsfenster und dann zu den Menüs. Und lassen Sie uns unser erstes Menü erstellen. Ich werde es Hauptmenü nennen. Da gehen wir. Und ich werde das Menü erstellen drücken. Und lassen Sie uns einfach alle unsere Elemente hinzufügen. Also haben wir Kontakt zu AN-Portfolio bekommen. Ich werde diese Typen vielleicht umbringen. Natürlich könnten wir auch einige Untermenüelemente hinzufügen, aber jetzt lassen Sie uns einfach behalten, halten Sie es einfach. Und ich werde Create treffen. Und dann können wir zurück zu unseren Seiten Startseite gehen. Und dann werde ich einfach die Bearbeitungsvorlage drücken. Und da gehen wir. Sie können sehen, dass unsere Speisekarte ist, ist hier auf der rechten Seite, die rechte Seite. Wie Sie sehen können, hat Sauerstoff unser einziges Menü hier hinzugefügt, wo es hingehen soll. Aber natürlich gibt es eine Menge, um die wir uns kümmern müssen. Genau hier. Auf der linken Seite können Sie verschiedene Registerkarten sehen, die das Aussehen und das Gefühl unserer, unseres Menüs steuern. Also zuerst gehen wir weiter und ändern einige Dinge über die Desktop-Erscheinung unseres Menüs. Wenn wir also, wenn wir auf sie und Desktop-Menü klicken, können Sie zwischen der vertikalen und horizontalen Ausrichtung Ihres Menüs wählen der vertikalen und horizontalen Ausrichtung , wenn das etwas ist, das Sie tun wollen, zum Beispiel, wenn Sie wollen wie eine Portfolio-Seite. Oder Portfolio-Website, Sie könnten vielleicht einfach ein vertikales Menü auf der Seite und wie ein großes Portfolio Stück auf der anderen Seite hinzufügen . Und genau hier wurden wir zu verschiedenen Zeiten anders. Und das wird tatsächlich das Aussehen und Gefühl verschiedener Aspekte unserer Speisekarte steuern. Wenn wir also zur Typografie gehen, müssen wir nicht mit der Schriftfamilie herumspielen, weil nein, unser d, wir haben bereits die Standardeinstellung für unsere Topographie für andere Elemente als Überschriften festgelegt. Also könnten wir vielleicht mit der Schriftgröße herumspielen, wenn wir wollen. Vielleicht gehen wir mit so etwas wie 14. Und wir könnten die Farbe ändern. Lassen Sie uns mit unserer Standardfarbe gehen. Und vielleicht, lassen Sie uns Chido. Mal sehen, wie es aussehen wird, wenn wir es auf die Großbuchstaben, Großbuchstaben, unsere Texttransformation setzen . Wir könnten auch Kleinbuchstaben verwenden, wenn wir wollten, aber ich gehe mit Großbuchstaben. Wir haben nicht zu viele Menüelemente. Also ich denke, wir könnten es vielleicht prominenter machen, es durch eine Änderung in der sichtbarer machen, indem wir den Text in Großbuchstaben verwandeln. Nun, wenn Sie möchten, können Sie auch die Schriftstärke ändern. Denken Sie daran, dass dies die Google-Schrift, Open Science, Open Science und diese Schriftart ist. Also werden wir verschiedene Schriftgewichte für diese bestimmte Schriftart und Winkel erhalten. Lassen Sie es uns, lassen Sie es als Standard belassen. Ich denke, wenn du mit 600 gehst, könnte das ein bisschen zu viel sein. Wenn es nicht wäre, wenn es nicht Großbuchstaben wäre, würde das vielleicht besser aussehen. Wie gesagt, Sie haben absolute Flexibilität, wenn es um die Veränderung in der Optik und Haptik dieser Elemente geht . Und es hängt im Wesentlichen von Ihrem künstlerischen Geschmack und Ihrem Design und den Erwartungen Ihrer Kunden ab, das aussehen wird. Aber weißt du, du bekommst alle, alle Veränderungen hier visuell, schön angelegt. Natürlich berühren sich alle diese Elemente. Sie sind viel zu nahe beieinander. Also gehen wir in den Raum in einer Linie und Grenze. Was ich also gerne tun möchte, ist, dass ich einen gewissen Spielraum zwischen diesen Elementen hinzufügen möchte. Also mal sehen, acht Pixel. Acht Pixel könnten in Ordnung sein. Wenn Sie nun hinzufügen würden, wenn Sie Ihren Elementen etwas Padding hinzufügen möchten, könnten Sie das natürlich tun. Und das wäre, das könnte nützlich sein, wenn Sie diesem Element einige Farben hinzufügen möchten , zum Hintergrund. Also lassen Sie uns sagen, dass wir etwas Autonomisches hinzufügen möchten. Wir mögen diese, diese Art von einer, diese Art von Farbe. Und dann gehen wir zu unseren Desktop-Handbüchern, Basis und Ausrichtung. Und lassen Sie uns vielleicht wie zehn Pixel hinzufügen. Und wie Sie hier sehen können, können Sie, es gibt eine, es gibt einen kleinen Apply All Button. Wenn wir darauf klicken, werden wir zum gleichen Wert auf alle unsere, alle unsere Elemente anwenden. Aber das ist nicht wirklich das, was ich tun will. Ich werde nur all diese, all diese Elemente löschen. Und natürlich will ich nicht wirklich, dass dieser Kerl so braun ist. Ich denke, das sieht aus, das sieht besser aus. Aber wir könnten immer einfach herumspielen. Mit der Topographie, vielleicht erhöhen die Größe, da wir es auf einen Kleinbuchstaben, vielleicht wie 15. Aber wie ich schon sagte, es wird ganz und gar an dir liegen. Und die letzte Registerkarte hier in diesem Desktop-Menü ist der Hover und der aktive Tab. All diese Elemente, all diese, all diese Werte werden Ihnen erlauben, das Aussehen Ihrer, Ihrer Menü-Links zu ändern , wenn sie Hubbard sind oder wenn sie aktiv sind. Also, wenn die spezifische Seite aktiv ist. Nehmen wir also an, wir möchten die Textfarbe auf einem Hover ändern. Sagen wir, wir möchten es auf unser Leben zu schaffen. Funky rote Farbe. Also, wenn wir den Mauszeiger über unseren Text bewegen, wird es sich ändern. Außerdem könnten wir die Hubbert-Hintergrundfarbe ändern. Wie Sie jetzt sehen können, ändern wir den Text und den Hintergrund. Und das ist, wo keine Polsterung wirklich, weißt du, gut mit diesen Veränderungen spielen würde, wir hätten hier mehr Atemraum. Wir hätten mehr Platz. So würde es definitiv besser aussehen. Aber wissen Sie, wir lernen die Möglichkeiten. Das ist also, was diese Hover-Hintergrundfarbe nicht tut. Du könntest auch eine Grenze haben. Wenn wir also den Mauszeiger über, wird unser Element einen Rahmen hinzufügen. Also lassen Sie mich das vielleicht einfach entfernen. Lassen Sie uns einfach einen Zwei-Pixel-Rand unten hinzufügen. Und wie Sie jetzt sehen können, haben wir bereits diesen unteren Rand, dieser untere Rand angewendet auf unsere, eines unserer Menüpunkte, weil wir gerade diese Seite in der Vorschau sehen. Also lassen Sie uns, wenn wir eine Vorschau darauf sehen, dass dieser Rahmen unter dem Über Link direkt hier erscheint. Das ist also etwas, das sie tun könnte. Natürlich können Sie auch die Option oberer Rand oberer Hover hinzufügen. Das ist es, was du tun willst. Ich glaube, ich werde es als eins belassen. Ich denke, ich mag diese Option. Und ich werde die schwebende Textfarbe loswerden. Ich will nur eine schöne, schöne Grenze unterstreichen. Immer wenn ich den Mauszeiger über, Mauszeiger über das Menü, Menü-Link Sie, wir könnten auch die aktive Textfarbe ändern. Also, wenn wir jetzt die Vorschau der über Seite, so ist dies unsere aktive Seite. Wir könnten diese Farbe in, ich weiß nicht, vielleicht so etwas ändern . Wenn diese Seite aktiv ist, ändert sich die Farbe des Menülinks. Und ich möchte diese Farbe nicht für die aktive Hintergrundfarbe gleich. Und wir könnten auch die Dauer des Übergangs ändern. Wenn wir also eine Farbe zu unserer Schwebetext-Klasse hinzufügen möchten, lassen Sie uns wieder mit dem Rot gehen, nur damit Sie alles besser sehen können. Und wenn wir die Übergangsdauer ändern, so sagen wir, ich weiß nicht 5,5 Sekunden. Wenn wir den Mauszeiger über dieses Element bewegen, können Sie sehen, dass es schön verblasst, wenn wir über den Link schweben und ausblenden, wenn wir so schweben. Also das ist etwas, das wir tun könnten. Ich werde es verlassen und ich werde einfach diesen Hover Border unten lassen. Das wird auch sein, wie Sie sehen können, es wird auch Übergang wie dieser sein, aber natürlich ist das ein Gewicht zu groß. Also sollte man sein, sollte gut sein. Das ist also unser Desktop-Menü. Wenn wir anfangen, in unserer Seite kleiner zu machen. Jetzt an diesem Punkt, es ist immer noch in Ordnung, aber nur, weil wir nicht zu viele Stücke hier haben, genau hier, nicht zu viele, nicht zu viele Menüelemente. Aber sobald wir anfangen, einige weitere Links hier hinzuzufügen, würde das, wissen Sie, es würde völlig unsere Speisekarte durcheinander bringen. Es würde nicht gut aussehen. Also eigentlich, lassen Sie uns vielleicht einige weitere Links zu unserem Portfolio hinzufügen. Nur, wissen Sie, nur um zu lernen, wie man diese hinzufügt und wie es aussehen würde, wenn sie hier drin sind. Und wir könnten auch einige Untermenüelemente hinzufügen, nur um alle Effekte zu sehen, die wir hinzufügen können. Wenn Sie sind, wenn Sie einige Untermenü-Elemente in Ihrem, in Ihrem Menü und was Sie mit ihnen hier in Sauerstoff tun können. 15. 3.9-Mein: Wenn Sie also jemals Untermenüelemente in Ihrem Menü haben, wie wir hier drin haben, können Sie ihr Aussehen hier nicht ändern. Wenn es natürlich ist, ein Desktop-Menü direkt hier in diesem Desktop-Dropdowns Tab. Also zuerst können wir Drop-Down-Option aktivieren. Wenn wir das tun, können wir diese Elemente genau hier sehen. Natürlich, wenn wir das Drop-down-Menü nicht aktivieren, ist das wirklich gut, das ist weg. Es ist immer noch da. Es ist immer noch in der Datenbank. Wir sehen es einfach nicht. Also das erste, was wir hier tun können, ist, dass wir den Animationstyp jetzt ändern können , dass er verblasst, verblassen wird. Vielleicht sehen wir mal, wie es aussieht, wenn wir, wenn wir aus diesem Gebäudemodus gehen, in den Inkognito-Modus gehen. Das ist also unsere, das ist die Animation, die wir haben, diese Fade-up-Animation. Lassen Sie mich einfach machen, machen Sie es kleiner, damit wir hier sehen können. Und wenn wir zu etwas gehen wie, ich weiß es nicht, gehen wir nach oben. Ich werde das retten. Und dann werde ich die Seite aktualisieren. Sie können sehen, dass wir ein weiteres Öl bei verschiedenen Animationen bekommen. Natürlich überlasse ich es dir. Wir könnten die Dauer dieser Animation erhöhen oder verringern. Also lasst uns vielleicht sehen, wie das aussieht, welche Wirkung es hat. Sie konnten sie nicht sehen, dass nein, im Moment dauert es viel, viel länger, um diese Elemente zu animieren. Aber natürlich würden wir nicht wollen, dass die Animation so lange dauert. Ich würde sagen, dass etwas zwischen 0,2 Sekunden und 0,4 ausreichen sollte. Wir wollen, dass alles unschuldig gefährlich passiert, Wir wollen nicht, dass unsere Benutzer warten, bis unsere Größe geladen wird. Das sollte also gut sein. Also, was wir jetzt tun können, ist, dass wir einen Kastenschatten zu unserem Menü hinzufügen könnten. Also würde diese ganze Speisekarte einen Schatten dahinter bekommen. Also werde ich voran gehen und eine Farbe wählen, eine Schattenfarbe. Und in der Regel sagt, sollten wir etwas Dunkles, aber auch, Ich werde die Transparenz immer so leicht verringern. Vielleicht machen Sie so etwas. Und jetzt könnten wir vielleicht mit den horizontalen Offset-Werten spielen, vertikaler Versatz, nur um unsere, unsere Box-Schatten zu bewegen. Und wir könnten austauschen, erhöhen und die Unschärfe und, und erhöhen oder verringern die Ausbreitung. Natürlich sind all diese Optionen für Sie, um mit zu spielen. Und sie funktionieren im Grunde genauso, wie sie in jedem Design und in diesem Design arbeiten. Also lassen Sie uns sehen, welche Wirkung es hat. Also, da gehen wir, wir haben unseren Schatten hinzugefügt. Natürlich sieht es schrecklich aus, aber tatsächlich kann man sehen, dass es einfach funktioniert. Und es liegt an Ihrer Fantasie, bis hin zu Ihrer App, Ihrem Design, um es ästhetisch ansprechend aussehen zu lassen. Und für Sie und natürlich für Ihren Kunden, wenn Sie das wirklich wollen, dass der Kastenschatten jetzt sieht es gut aus ein bisschen anders. Nun, ich brauche nicht wirklich diese Box Schatten Amoco in gerade gelöscht. Aber natürlich wollte ich Ihnen zeigen, wie diese Option aussieht, weil wir natürlich lernen möchten, wie man Sauerstoff benutzt, um unsere Webseiten aufzubauen. So können wir jetzt zum Dropdown-Symbol gehen. Und natürlich können wir das Drop-Down-Symbol anzeigen oder das müssen wir nicht zeigen. Das würde also nur wissen, dass das vom Benutzer übergeht , wenn es einige Untermenüs gibt, die wir anzeigen möchten, wir informieren den Benutzer nicht, dass sich tatsächlich etwas in diesem Link versteckt. Aber vielleicht ist dieses Symbol nicht das, was Sie möchten. Ich weiß, ich mag es nicht. Also könnten wir vielleicht etwas anderes finden. Als Standardeinstellung können wir aus und Font Awesome Schriftarten oder lineare Symbole wählen. Da gehst du. Vielleicht finden wir hier etwas. Wenn du sie kennst. Wenn Sie denNamen des Symbols kennen, Namen des Symbols kennen, können Sie ihn einfach eingeben. Lass mich sehen, wie dieser Typ aussehen wird. Ich denke, es sieht besser aus als dieses Symbol, aber vielleicht werde ich nur die Größe ändern, so etwas wie acht Pixel und vielleicht den Rand erhöhen, vielleicht nicht auf zehn, aber um fünf zu mögen, sollte das in Ordnung sein. Und wenn Sie möchten, können Sie auch das Symbol drehen. Vielleicht zwei, so etwas. Mal sehen, 120 oder 90. Wissen Sie, wenn jemand über dieses Symbol schwebt , würde er unser, unser Untermenü sehen. Es gibt also eine ganze Menge, eine ganze Reihe von Optionen, von denen Sie hier wählen können. Und ich denke, dass diese Erklärungen ziemlich klar sind. Sie können die offene Drehung ändern, Sie können sogar diesen Übergang dieser Rotation ändern. Aber wieder werde ich es Ihnen überlassen, bis zu Ihrem Design-Geschmack, eine App zu Ihrem Experimentieren, denn das ist wirklich der einzige Weg, um gut zu werden. So dass wir nach dem Drop-Down-Ico Dropdown-Farben bekommen. Also, wenn wir die Hintergrundfarbe auf vielleicht so etwas ändern. Wenn wir den Mauszeiger über, können Sie sehen, dass unser Hintergrund ist, ändert sich. Und wenn wir diese schwebende Hintergrundfarbe in so etwas wie dieses dunkelrote ändern, wenn wir schweben, lassen Sie mich vielleicht einfach speichern, das wäre einfacher, die Änderungen hier zu sehen. Wenn wir den Mauszeiger über, können Sie sehen, dass es tatsächlich ist, es ändert sich tatsächlich. Unsere Hintergründe ändern sich. Also lass mich diese Kerle loswerden. Natürlich könnten wir die Linkfarbe ändern, die Hover-Textfarbe, aber lassen Sie uns, ich überlasse es Ihnen, wenn Sie das ändern möchten. Und wir könnten auch die Kind-Links ändern oder wenn wir wie ein Untermenü hatten. Innerhalb eines Untermenüs würden wir all diese Jungs hier drinnen ändern wollen. Ok, also schätze ich, wir haben unser Desktop-Menü sortiert. Und wir jetzt denke ich, wir können jetzt gehen, um unsere Speisekarte reaktionsschnell zu machen. Also fangen wir an, das zu tun. Im nächsten Video. 16. 3.10Responsives Menü: Wie wir bereits wissen, sobald wir angefangen haben, Glück sagen, wie weniger als 768, sieht unsere Speisekarte schrecklich aus. Es bricht unsere Seite. Also, hier, wenn wir zu unserem primären Pro-Menü gehen, Pro-Menü-Elemente, können Sie diese Option direkt hier sehen, dass Mobile Menu unter denen mit Drehung offen umgeschaltet ist, Sie können sehen, dass wir können, dass wir unsere Breakpoints die genauso wie hier. Und auch immer und nie. Alle diese Optionen steuern, wann Ihr Menü als ansprechendes Menü angezeigt wird . Wenn wir also immer tun, wird unsere Speisekarte immer aussehen, da es sich um ein ansprechendes Menü handelt. Wenn wir das tun, nie, wird unsere Speisekarte nie als ansprechendes Menü aussehen. Aber wenn wir uns entscheiden, sagen wir weniger als 992. Wenn wir anfangen, eine Vorschau unserer Seite jetzt, wenn es auf 11120 Pixel und darunter gesetzt ist, sieht es immer noch in Ordnung. Aber wenn wir zu weniger als 992 gehen, können Sie sehen, dass sich unser Menü in ein, in ein mobiles Menü, in das Smartphone-Menü ändert in ein mobiles Menü, . Ich werde meine Website speichern, weil ich denke, dass ich es als weniger als 992 verlassen werde. Sieht in Ordnung aus. Was können wir also gegen unsere Speisekarte tun? Zunächst einmal, wenn wir darauf klicken, können Sie sehen, wie unser Menü aussehen wird, wenn wir es öffnen. Also, wenn Sie auf die mobile Menüoption gehen direkt hier, und Sie können sehen, dass wir Tonnen und jede Menge Optionen haben, um unser mobiles, mobiles Handbuch zu steuern. Also zuerst können wir überprüfen, wir können sehen, welche gut, was ich kann, Wir könnten als unsere Speisekarte verwenden. Also normalerweise würden wir so etwas wie eine einfache drei Bar verwenden. Mal sehen, ob wir es finden können. Vielleicht nicht so. Lasst uns Linien sehen. Während alles gut, vielleicht könnten wir das hier gebrauchen. Aber ich weiß, dass es eine andere, lassen Sie mich einfach tippen Menü, dass vielleicht, Das wird vielleicht besser sein. Also werde ich wählen und diese Bars direkt hier, und Sie können sehen, dass wir unsere ändern, unser Menü, Menü-Symbol wird im Grunde sofort. Und hier unten, können Sie wählen, um dies als Handhebel zu lassen, dieser Text als Menü. Wir könnten etwas anderes eingeben, wie offen oder wie ich. Wenn du es wolltest, wäre das nur der Text für unser Menü, aber normalerweise lasse ich es einfach leer. Also haben wir nur das einfache Menü suchen Länge ist, natürlich, wenn wir darauf klicken, können Sie sehen, dass wir unser Menü direkt hier haben. Wir könnten natürlich seine Größe ändern, sie größer machen, kleiner machen. Ich werde leben. Es wird nicht als 42 sein. Warum nicht? Wir könnten die Marge ändern, wir können die Farbe ändern. Also vielleicht werde ich ihm meine Standardfarbe geben. Ich weiß, dass es nicht zu viel Veränderung, aber ich halte und die Farben konsistent. Wir könnten die Symbol-Hover-Farbe ändern, wenn wir wollten. Also, wann immer jemand würde, gut im Grunde darauf tippen, dann würde sich diese Farbe ändern. Wir könnten die Polsterung ändern. Also, wenn du vielleicht sagen wolltest, lass mich diesen Kerl schwarz machen und dann kann ich färben. Lass es uns machen, lass es uns weiße oder cremefarbene Farbe machen. Sie können sehen, wie wir das Aussehen unserer Schaltfläche ändern können. Knopf komplett. Das wird einfach sein, na ja, es kann deine Design-Wahl sein, wenn du es so machen willst, und du könntest sie vielleicht einfach machen, dass Penn kleiner ist. Also, das könnte sie tun, wenn du es wolltest. Ich werde diese Typen vielleicht loswerden und zu unserem Original zurückkehren. Und ich brauche die Polsterfarbe nicht. Und ich denke, alle diese Werte sind ziemlich selbsterklärend, aber Sie müssen nur klicken und überprüfen und gleiten. Und es sind nur all diese Optionen, nur damit Sie sehen können welche Auswirkungen sie auf Ihr Menü-Symbol haben. Dies ist also das Menü-Symbol, aber es ist natürlich nur das Open-Symbol-Layout. Wenn Sie ändern möchten, wenn Sie einen Text hier wie diesen Menütext haben möchten, können Sie ändern, Sie können diesen Text über diese Topografie des Symbols öffnen steuern. Jetzt, wenn wir zu schließen, kann ich Layout. Das wird die UN sein, die Speisekarte hier. Das, ich meine, dieses Symbol hier. Wenn du es anders aussehen lassen wolltest, lass uns vielleicht versuchen, etwas zu finden, das zu unserem Open Icon passt, wie eine Axt oder so etwas, das zu unserem Symbol wie Baby passen würde, das wirkt, dass ein bisschen besser aussehen würde . Und wieder, Sie könnten wählen, um zu verlassen, dass die, dieses Symbol Texte so nah. Wenn du das tun wolltest. Vielleicht könnten wir die Position unserer Ikone ändern. Vielleicht bewegen Sie es von der linken Seite ganz nach rechts. Und eigentlich denke ich, das ist, ich denke, dass das etwas ist, das Sauerstoffteam vielleicht ändern könnte. Ich weiß nicht, warum sie, dieses Symbol ist immer standardmäßig auf der linken Seite gesetzt, wenn in der Regel Menschen Rechtshänder sind. Und ich denke, es ist nur eine bessere UX-Benutzerfreundlichkeit wenn dieses enge Symbol näher an der rechten Seite ist und wir nicht, wir müssten uns nicht ändern. Und all diese Elemente, all diese Werte, nur um das Symbol nach rechts zu verschieben. Und natürlich haben wir hier die gleichen Möglichkeiten wie mit unserem Open Icon-Layout. Okay, vielleicht nicht, vielleicht erhöhen wir dieses Symbol auf 42. Ich denke, dass das offene Eigen Layout auf offene Eigenzustände eingestellt wurde, wurde auf vollständig eingestellt, ich glaube, ich denke, wir könnten es immer als 42 überprüfen, also halten wir die Dinge konsistent. Lassen Sie uns zu unseren Menüstilen gehen. Und ich denke, das Wichtigste wäre hier , den Elementtext in der Mitte auszurichten. Natürlich, wenn Sie es nach links oder rechts ausgerichtet haben wollen , könnten Sie das tun. Aber ich normalerweise, wenn ich viele so aussah, halte ich es normalerweise zentriert. Also werde ich das einfach retten. Und wenn wir jetzt nur zu unserem Design gehen, können Sie das sehen und b, lassen Sie mich es einfach größer machen. Wenn wir es jetzt einfach kleiner machen. Da gehen wir. Wenn wir anfangen, unser Ansichtsfenster kleiner zu machen und den Haltepunkt 992 trifft, wird sich in einen einfachen Libanon verwandeln, das einfache, aber definitiv ein mobiles Menü. 17. 3.11Off-Leinwand: Eine weitere interessante Sache über das Mobile Menü Hier ist hier und Sauerstoff ist die Tatsache, dass Sie es aus Leinwand machen können. Wenn Sie einfach auf diese Option klicken, werden Sie in der Lage sein, irgendwie wie animieren Sie die Cam auf der Leinwand im Menü. Irgendwie kommt es aus dem Ansichtsfenster. Also lass mich dir zeigen, was ich meine. Also, wenn wir diesen Kerl einfach entfernen, also haben wir alle, alle Standardoptionen hier. Ich werde es retten. Und dann gehen wir zu unserer Speisekarte. Ich werde die Seite aktualisieren. Sie können sehen, dass es irgendwie wie von der rechten Seite eingeblendet wird. Sofort. Was wir tun könnten, ist, dass wir vielleicht die Größe unserer Leinwand vergrößern könnten. Wir könnten es vielleicht sogar schaffen, lass es uns vorerst kleiner machen. Machen wir es sechsundsechzig Prozent, nur damit wir sehen können, was passiert. Und ich werde es speichern und ich werde die Hintergrundfarbe ändern , nur damit Sie dieses Menü ein bisschen besser sehen können. Und so, wenn wir jetzt die Seite aktualisieren, wieder, können Sie sehen, dass dies unser ist, das ist unser Handbuch, das irgendwie wie Versagen von rechts ist. Wir können natürlich ein paar Dinge daran ändern. Mal sehen, ob wir es nach links ausrichten. Und mal sehen, wie das aussehen wird. Und Sie können sehen, dass es jetzt nach links ausgerichtet ist. Aber ich schätze, von rechts wäre es besser. Und wir könnten natürlich die Canvas-Animation ändern. Und es gibt eine ganze Reihe von Optionen zur Auswahl. Mal sehen, verkleinern und mal sehen, was es tun wird, was es tun wird. Ich werde die Seite aktualisieren. Und es wird so etwas aussehen. Es ist ziemlich schwer. Aber ich schätze, vielleicht, weißt du , das ist etwas, das du tun willst. Ich würde vielleicht die Dauer verringern, um es schneller zu machen. Also mal sehen, was es jetzt tut. So können Sie sehen, ich denke, es ist nicht die kleinste der Animationen, aber etwas zu bemerken, was Sie tun könnten. Also werde ich einfach etwas Einfaches wie Folie, Folie nach links machen. Warum nicht? Mal sehen, schieben Sie nach links. Und so. Und es sieht viel, viel besser, viel, viel glatter aus. Also natürlich, wenn wir die Größe unseres Ansichtsfensters verringern, da wir, da diese Breite auf Kochen gesetzt ist, auf Prozentsätze eingestellt sind, wissen Sie, es wird immer die, eine bestimmte Menge an Platz hier, gezeigt in Prozentsätze. Wenn wir es auf nur Pixel setzen würden. Da gehen wir. Und lasst uns die Seite aktualisieren. Jetzt wird es immer diesen Wert in Anspruch nehmen. Aber in Pixeln, die nicht aussehen, sieht nicht zu gut aus. Wenn wir jedoch vielleicht diese ganze Seite abdecken wollten, könnten wir den Wert für die Breite des Ansichtsfensters verwenden. Und wenn wir es auf 100 setzen, bedeutet das, dass die gesamte Ansicht, das gesamte Ansichtsfenster ausgeblendet wird. Also, wenn Sie einfach diesen Kerl speichern und dann die Seite aktualisieren und wir werden es erhöhen. Und Sie können sehen, dass gerade jetzt unsere Menüs alle unsere Ansichten von links nach rechts abdecken , weil dies ist, was diese Einheit VW Ansichtsfenster Breite nicht. Also werde ich es so lassen, wie diese Folie links 2,2 Sekunden. Sieht aus, das sieht gut aus. Also, jetzt, da wir zu unserem off Canvas Menü sortiert kamen, konnten wir immer noch mit mobilen Dropdowns spielen. Also lassen Sie uns unsere Speisekarte öffnen. Und wie Sie sehen können, haben wir unsere Menüs hier versteckt, aber sie sehen nicht so gut aus. Wir könnten vielleicht die Hintergrundfarbe auf das ändern, was wir wirklich wollen. Wir könnten vielleicht die Breite unseres Rahmens auf 1,1 Pixel ändern , so dass es unseren Desktop-Menürahmen entspricht. Und natürlich, wenn Sie wollten, aber mit der Farbe herumspielen würden Sie den Stil. Aber ich schätze, das sieht aus, das sieht gut aus. Wir haben unsere Mm-hm. Mobiles Menü. Menü. So ziemlich, ziemlich sortiert. Also, wenn wir diesen Kerl einfach speichern und diese Seite aktualisieren, und ich werde sie einfach größer machen. Wenn wir jetzt anfangen zu gehen, gehen Sie runter , gehen Sie runter. Du erhältst unser mobiles Menü. Wenn wir darauf klicken, erhalten Sie unsere Animation und wir haben unsere Dropdowns. So funktioniert alles, funktioniert reibungslos, funktioniert gut. Wenn Sie also mit Menüs hier in Sauerstoff arbeiten, wenn Sie nicht mit all diesen Optionen herumspielen möchten, könnten Sie eines ihrer Voreinstellungen verwenden, die mit dem kommen, mit dem Programm. Also schätze ich, wir könnten uns die nächsten kurz ansehen. 18. 3.12Menü-Voreinstellungen: Bevor ich mit der Verwendung von D's Menü-Presets beginne, werde ich mein eigenes Menü als meine eigene Voreinstellung speichern. Also werde ich es meine Speisekarte nennen. Ich weiß, es ist nicht kreativ, aber ich werde es nur als meine Speisekarte speichern. Und jetzt sitzt es genau hier in meiner, in meiner Liste mit anderen Menü-Presets. Also lassen Sie uns sagen, dass ich den Schieberegler verwenden möchte, um Veranstaltungsort zu schreiben. Und wie Sie sehen können, wird nicht nur der Gleiteffekt angewendet, sondern auch alle anderen Elemente. So ist zum Beispiel das Menü auf mobil eingestellt und wie immer, wenn wir darauf klicken, können Sie sehen, dass es nach links verschoben wird und wir alle, alle diese Elemente bekommen haben . Und wenn wir zu gehen, sagen wir, Desktop und Handy, Sie können sehen, dass wieder, das Menü ändert sich. Es sieht jetzt so aus. Und natürlich könnten wir, lassen Sie uns minimal als meinen Minimalismus sehen. Nun, das ist nicht zu minimale Teilungstage. Mal sehen, wie es aussieht. Wenn wir, wenn wir es hier Vorschau. Wenn wir darauf klicken, das ist, das ist unser, das ist unser Menü. Es sieht nicht so schlimm aus, aber natürlich könnten wir immer noch die Links ändern. Wir könnten die Schrift ändern, all diese Dinge. Aber wieder, wenn Sie eine der verwenden wollen, eine der Presets, die mit mir kommen, kommen mit Sauerstoff. könntest du definitiv tun. Aber ich denke, ich bleibe bei meinem, mit meiner Speisekarte und ich werde es speichern. Und ich denke nur, dass es ein bisschen besser aussieht. Und das ist eine Art Look, den ich für dieses Design halte, weil wir ein Design für unsere Dienstleistungen als Designer erstellen. Also denke ich, dass, wenn wir es einfach halten, das wird uns als Designer zeigen, die, wer bekam, wer Geschmack bekam. Lass es uns also so lassen. Aber natürlich sind wir noch nicht fertig. Wir sind noch nicht einmal mit unserem Header fertig. In der, in den nachfolgenden Videos, werden wir einen Blick auf klebrige Header werfen und auch Overlay-Header hinzufügen. Hier im Designer sind wir mit der Speisekarte fertig. Jetzt werden wir diesen Header mit dem beenden, mit dem klebrigen Header und dem Overlay-Header. 19. 3.13Innere Inhalte: Also jetzt werden wir uns um den klebrigen Header und auch um einen Overlay-Header kümmern. Damit diese Effekte jedoch überhaupt sichtbar sind, benötigen wir noch mehr Inhalte auf unserer Website. Und eigentlich ist es ein sehr wichtiger Schritt hier in Insider-Sauerstoff, denn ohne dieses innere Content-Modul wären wir in der Lage, nichts auf unserer Website hinzuzufügen, sobald unsere Vorlagen gelesen werden. Also, was ich tun werde, ist, dass ich zu den Sauerstoffvorlagen gehe und ich werde es meine Hauptvorlage mit hinzufügen, mit Sauerstoff. Okay, also bin ich in meiner Vorlage und ich werde fortfahren und auf diese Schaltfläche „Hinzufügen“ klicken. Und ich werde anfangen, Inhalte einzutippen. Und sobald ich dieses innere Content-Modul hier habe, werde ich nur darauf klicken. Und wie Sie sehen können, wird es zu meiner Struktur hinzugefügt und tatsächlich passiert nicht viel. Ich meine, wir könnten es stylen, wenn du es wolltest, aber das ist wirklich nicht der Sinn dieses Moduls. Grundsätzlich wird dieses Modul es uns ermöglichen, alles auf unserer Website ohne es zu zeigen. Ich, ich denke, es wäre möglich, aber wir werden nur unsere Vorlagen erstellen. Und jetzt, wenn Sie Bilder oder Text direkt hier hinzufügen möchten , wäre dieser Tag ein Teil der Vorlage. Und sie würden auf, auf jeder Seite, die ein Benutzer sehen würde, angezeigt werden. Also jedes Mal, wenn Sie wollen, wissen Sie, wie beenden Sie das Design Ihrer, Ihrer Vorlage, Ihrer Hauptvorlage. Denken Sie daran, das innere Inhaltsmodul bereit zu haben und auf Ihre nächsten Entwurfsschritte warten zu können. Denn ohne sie wären sie im Grunde unmöglich. Also, wenn das fertig ist, müssen wir es einfach retten. Dann gehe ich zurück zu meinem Admin-Panel. Denn gerade jetzt, wenn wir wollen, dass klebrige Header sehen und wenn wir sehen wollen, die , der Overlay-Header-Effekt, wir müssen einige Inhalte auf unserer Website haben, auf unserer Seite. Also werde ich auf die Seiten gehen und ich werde es mit Sauerstoff hinzufügen. Ich werde die Homepage mit Sauerstoff bearbeiten. Wie Sie jetzt sehen können, haben wir zu diesem Klick Hinzufügen, fügen Sie Elemente zu diesem Bereich. Und dieser Knopf sollte im Grunde mit diesem Knopf übereinstimmen. Aber da ich mich daran erinnern kann, ist dieses Stück Text ein bisschen anders als dieses Stück Text. Ich weiß, ist nur die Positionierung dieses Plus-Symbols, aber annullieren Sie es immer, wissen Sie, ich sehe es immer. Ich merke es immer. Aber wie auch immer, sobald wir diesen Kerl hier haben, haben wir diese SMS bekommen. Wir wissen, dass wir nun einige Elemente auf unserer Website hinzufügen müssen. Also, wenn wir gehen, um wie üblich hinzuzufügen , werde ich nur mit einem Abschnitt beginnen. Und in diesem Abschnitt wird unser Heldenbild veranstalten. Und ich gehe zum Fortgeschrittenen und dann Hintergrund und inhere im Hintergrundbild. Ich werde nur dieses Bild zu meinem Hintergrund hinzufügen. Und wie Sie sehen können, wurde es zu meinem ganzen Abschnitt hinzugefügt und es sagt, standardmäßig über die gesamte Seite schwenken, aber das ist nicht der Fall in Bezug auf die Größe, na ja, die Höhe unseres Abschnitts. Also, wenn du willst, kann ich einfach zu Größe und Abstand zurückkehren. Also, wenn Sie wollen, können Sie die Höhe genau hier einstellen. Und natürlich, wenn Sie es auf wie Pixel setzen, 500 Pixel, werden Sie das im Grunde sehen. Und wenn wir den Einheitenwert von Pixeln auf diese Zeit VH ändern, die Ansichtsfensterhöhe ist. Jetzt werden wir den Browser mitteilen, Sie wissen schon, unser Hintergrundbild über die gesamte Höhe unseres, unseres Containers und unabhängig vom Prinzip des Containers zu verbreiten . Wenn wir es also auf 100 setzen würden, wird dieses Design, dieses Bild wird dauern, 100 Ansichtsfensterhöheneinheiten aufnehmen. Ich weiß, dass wir immer noch so sehen können, dieses Stück hier unten. Aber das ist nur, weil wir diesen Header an der Spitze haben und wir werden, sobald wir das Overlay initialisiert haben, werden wir das beheben. Aber vorerst werde ich es einfach so lassen. Und wenn Sie auf unsere Hauptseite gehen, können Sie sehen, dass wir dieses Bild, Bild direkt hier bekommen haben. Also vielleicht lassen Sie uns noch etwas mehr Inhalte hinzufügen. Ich bin gut zu gehen und ich werde zum Strukturpanel gehen und vielleicht werde ich nur Abschnitt hinzufügen. Und wie Sie sehen können, wird es direkt unter unserem vorherigen Abschnitt hinzugefügt. Und ich werde auch nur, ich werde einen Dummy-Text hinzufügen, den ich von der Lorem ipsum Seite ausleihen werde. Ich gehe nur, ich werde es nur kopieren. Und dann werde ich es einfach einfügen. Und vielleicht lassen Sie mich diesen Text einfach duplizieren. Und ich denke, das sollte gut sein. Das sind vier. Jetzt ist das genug, genug Text, den wir nur lernen müssen wie man den klebrigen Header und den Overlay-Header benutzt. Also fangen wir an, das als Nächstes zu tun. 20. 3.14Sticky und overlay: Um einen klebrigen Header hinzuzufügen und unseren Header in ein Overlay-Hetero zu ändern, müssen wir es von unserer Template-Ebene aus tun . Also werde ich nur sicherstellen, dass ich das gerettet habe. Und wir werden nur auf meine Kopfzeile klicken und auf Öffnen und Bearbeiten Vorlage klicken. Ja, ja, jedenfalls öffnen. Und jetzt können wir unsere ändern, unsere Kopfzeile, wie Sie unsere Vorschau in Häusern sehen können. So können wir all diese Elemente sehen, die nur für unsere Homepage gesetzt würden. Und sobald unser Header Builder aktiv ist, können wir zu Sticky gehen und Sie können auf Enable Sticky Header klicken. Dies wird also tun, ist es uns erlauben, einen klebrigen Header zu erstellen , der jedes Mal sichtbar wäre, wenn ein Benutzer auf unserer Website scrollt. Also, wenn jemand nach unten scrollt, können wir immer noch dieses Menü zu unseren, unseren Benutzern zeigen. Also werde ich nur den Scroll-Abstand in einem 2-300 verlassen , denn wenn Benutzer in 300 Pixeln nach unten scrollen, können Sie sehen, dass wir unser Menü haben und auftauchen, aber wir werden dieses Layout in nur einer Sekunde reparieren. Also werde ich es so lassen. Ich werde den klebrigen Hintergrund in diese Farbe ändern. Wenn also ein Benutzer nach unten scrollt, nach unten scrollt, wird der Benutzer dies sehen, dieses Handbuch so. Und ich werde wählen, verblassen, kleben, das wird nur schön animiert. Wir könnten diese Fade in der Geschwindigkeit erhöhen. Da gehen wir. Das würde aussehen, viel schöner aussehen. Und ich werde diesen Kerl retten. Allerdings könnten wir vielleicht einige Dinge über unsere Speisekarte ändern, die klebrig sein wird. Ich meine, ich glaube nicht, dass sie wollen, dass es so aussieht. Zum Beispiel möchte ich, dass dieses Menü kleiner ist. Und vielleicht würde ich wollen, dass es immer reaktionsschnell ist. Also, dafür werde ich einfach zu meiner Kopfzeile gehen und ich werde es duplizieren. Also im Moment haben wir zwei identische Header-Zeilen. Aber was ich tun werde, ist, dass ich mein Bild auf der linken Seite schnappen werde und es kleiner machen werde. Ich werde 24 machen, vielleicht sogar weniger als das, wie 18. Und ich werde dasselbe mit der Überschrift machen. Ich werde es kleiner machen, wie vielleicht 16. Das sollte gut sein. Und lassen Sie mich einfach das Bild greifen und vielleicht verringern diesen Rand immer so leicht auf so etwas wie fünf Pixel. Und dann werde ich mir mein Pro-Handbuch holen. Und ich werde sagen, dass es gut geht, mobil zu sein. Immer so. Und vielleicht gehe ich zum mobilen Menü und öffne das Icon-Layout. Und ich werde es kleiner machen, wie 24. Vielleicht wird es gut gehen. Also, jetzt haben wir zwei Menüs. Vielleicht werde ich diese Polsterung auch in etwas wie 1010 ändern, oder vielleicht sogar weniger als das, wie 55, oder? Also werde ich das retten. Und wenn wir jetzt den ganzen Weg zurück zum primären gehen, können wir jetzt wählen, diese Zeile anzuzeigen, diese Kopfzeile nur als klebrige Kopfzeile. Also werde ich nur in klebrigen zeigen klicken. Und ich werde auf diese Zeile klicken und ich werde sagen, verstecken sich in klebrig. Und jetzt, wenn wir diesen Kerl retten, und ich werde meine Seite aktualisieren. Wenn ich jetzt mit dem Scrollen nach unten beginne, können Sie sehen, dass dieser Header erst angezeigt wird, wenn der Sticky ausgeblendet ist. Und wenn du runtergehst, haben wir unsere Speisekarte hier. Natürlich müssten wir einige Probleme hier beheben, aber das ist natürlich leicht zu beheben. können wir leicht beheben. Aber der Hauptpunkt hier ist, dass Sie die Art und Weise ändern können , wie sich dieser Header Stick hetero verhält. Und sobald Sie Ihre Seite nach unten scrollen, wenn wir nach oben gehen, kommt diese ältere Kopfzeile zurück. Und wenn wir runtergehen, haben wir unseren neuen klebrigen Header hier gezeigt. Das ist also dieser klebrige Header. Was ist mit dem Overlay-Header? Ich werde diesen klebrigen Header entfernen. Ich brauche es nicht. Lass mich das einfach speichern und ich werde meine Seite aktualisieren. Also habe ich meinen, meinen Kopf hier. Und was ich tun werde, ist, dass ich zum Struktur-Header-Builder gehe. Und ich werde voran gehen und Overlay wählen. Und ich werde sagen, dass ich immer den Header überlagern möchte, was mein machen wird, mein Bild nach oben gehen und meine, mein Header gehen wie über unsere Hauptabschnitte. Also, wenn ich es speichern und wenn ich die Seite aktualisieren, Sie können jetzt sehen, dass unsere, dass unsere Header alle über diese überlagert wurde, über diesen Abschnitt. Und dieses Bild ist eigentlich gerade jetzt, weil wir es auf 100 vh gesetzt haben, wie Sie sich erinnern können, es hat gerade jetzt den ganzen Raum genommen. Aber natürlich könnten einige, na ja, wir könnten vielleicht mit all diesen Farben herumspielen , die wir vielleicht nicht so aussehen lassen wollen. Was ich also tun würde, ist, dass wir wieder haben, zur Header-Zeile gehen und wir könnten sie duplizieren, diese Header-Zeile duplizieren. Und nein, ich will es nicht höher und klebrig machen. Das ist nicht das, was wir wollen. Was wir wollen, ist zum Beispiel, dass wir diesen Kerl verstecken wollen, wenn er in Overlay ist. Also dieser Top-Header, also würde ich sagen, Haydn Overlay. Aber dieser Boss, wir könnten vielleicht gerne ein paar Farben ändern. Also gehen wir zu, lassen Sie mich einfach meinen Kopf packen. Und ich würde die Textfarbe ändern. Natürlich müssten wir diese Farbe ändern, während dieses Bild auch. Aber wenn Sie es nicht ändern möchten, wenn Sie nicht einfach eine weiße Version dieses Logos hochladen möchten, könnten wir vielleicht einen kleinen Trick machen. Wir gehen zum fortgeschrittenen als-Effekt. Dann können Sie zu Filter gehen. Und von hier aus könnten wir uns ändern, wählen, invertieren und dann einfach 100% gehen. Und wir würden einfach invertieren die Farbe unserer, unserer lokalen. Jetzt funktioniert es in diesem Fall, gut, weil wir schwarz invertieren. Also von schwarz gehen wir zu weiß. Und wenn es gelesen wurde, könnte gut zu grün oder blau umkehren. Ich bin mir nicht wirklich sicher, aber in diesem Fall funktioniert dieser Effekt in, normalerweise wären wir besser dran, wenn wir nur dieses Bild in eine richtige leichtere Version unseres, unseres Logos ändern würden. Aber wie auch immer, wir können es vorerst so machen. Wir können auch zu unserem Pro-Menü gehen. Und wir könnten vielleicht ändern, ändern Sie die Farbe unserer, unserer Speisekarte. Damit wir die Farbe hier ändern können. Wir könnten die Farbe des Schiebereglers greifen. Und ich werde es einfach so lassen, wie es vorerst ist. Nur, um Ihnen zu zeigen, was dieser Overlay-Header tatsächlich in unserem Fall tut. Und wie Sie sehen können, sieht es ziemlich schön aus. Grundsätzlich haben wir einen richtigen Kontrast zwischen unserem Hintergrund und unserem Header. Also, ich denke, wir könnten es, wir könnten es so lassen. Natürlich müssten wir, ich denke, wir müssten an unserem Logo arbeiten, auf unserer Speisekarte genau hier, denn im Moment sieht es nicht so toll aus. Und weißt du was, ich schätze, ich werde mit dieser Art von Design gehen. Ich werde mit diesem Overlay eine Art Header gehen. Ich denke, wir könnten dieses Menü vielleicht reparieren, damit es richtig aussieht. Also könnten wir vielleicht mit dem Hintergrund herumspielen. Wir könnten mit den Links herumspielen, das Symbol, solide, beginnen, das als nächstes zu tun. 21. 3.15Aufmächteten: Also lasst uns unsere Speisekarte reparieren. Lass es uns schön aussehen. Also werde ich zu meinem weniger als 992 gehen. Und ich werde dieses Symbol hier ändern. Also werde ich zu meinem mobilen Menü gehen. Ich bin offen, ich kann Layout. Und ich werde die Farbe in meine hellere Farbe ändern. Und wenn wir darauf klicken, lassen Sie mich sehen, wie es aussieht. Wir haben den Hintergrund, dass wir ändern müssten und die Links, die wir ändern müssen. Aber um vielleicht mit dem Hintergrund zu beginnen. Also gehe ich zu Menüstilen und gehe zur Hintergrundfarbe. Und lasst es uns entfernen. Und weißt du was, vielleicht lasst uns etwas anderes versuchen. Ich werde mit dieser dunkleren braunen Farbe gehen, aber werde diese Transparenz auf einige Psalm zehn Lüge verringern. Das sollte also gut aussehen. Und jetzt müssen wir nicht mit unseren, mit unseren Links herumspielen , weil wir genug Kontrast haben. Aber wir müssen zu unserem Schließen Menü-Symbol gehen, so schließen Sie Icon-Layout. Und lass mich einfach die Farbe dafür finden. Also werde ich nur auf diese Option klicken und diese in weiß ändern. Und vielleicht werde ich versuchen, es zur Seite zu bringen. So wie deckt es diese und diese Option genau hier ab, diesen Teil hier. Also werde ich nur voran gehen und tun ich kann links positionieren und ich werde mit den Prozentsätzen gehen. Und lass uns 75 sehen, mal 85. Sehen wir uns 19 an. Vielleicht 90 wird es gut gehen. Lasst uns das retten. Und mal sehen, wie es eigentlich aussehen wird. Sobald es fertig ist. Ich schätze, es sieht gut aus. Ich schätze, wir könnten es so lassen. Oder unser gut, fast alle unsere Menüs funktionieren gut. Wir müssen uns immer noch um die mobilen Dropdowns kümmern. Gehen wir also zu unseren mobilen Dropdowns. Und ich werde diese Dropdown-Farbe entfernen. Mal sehen, wie es jetzt aussieht. Sieht viel besser aus. Lass uns diesen Kerl retten, erfrischen. Und wieder, und das ist unsere Speisekarte. Sieht schön aus, ich denke, es sieht in Ordnung aus. Also haben wir unsere, wir haben unser Header-Menü abgeschlossen. Wir haben auch unser Hauptbild für unseren Helden fertiggestellt. Allerdings werden wir mit unserem Helden ruhig ausgiebig in den kommenden Videos spielen . Und vergiss nicht, dass wir immer noch unseren klebrigen Header hier hatten. So sehen Sie vielleicht jemanden Pannen. Natürlich, wenn Sie den klebrigen Header behalten möchten, könnten Sie das tun. Du weißt schon, wie man das macht. Und ich auf jeden Fall ermutige dich, mit all diesen Optionen herumzuspielen, aber ich werde das vielleicht loswerden. Ich gehe einfach zu den klebrigen Optionen. Und ich werde den klebrigen Header deaktivieren. Und mal sehen, ob das funktioniert hat. Also werde ich nur die Seite aktualisieren und wie Sie sehen können, ist der klebrige Header weg. Wie ich schon sagte, jetzt können wir unseren Heldenbereich hier etwas interessanter machen. Wir können einige Überschriften, einige Texte, vielleicht einige Schaltflächen und vielleicht einen Schieberegler hinzufügen , aber wir werden darüber in den nächsten Videos sehen. 22. 4.10er Inhalt in einem Abschnitt: Okay, also lasst uns auf unsere Homepage gehen. Also werde ich auf Seiten gehen, alle Seiten, und ich wähle die Homepage und ich werde mit Sauerstoff bearbeiten. Das ist also unser Layout. Also haben wir unsere eigenen, wir haben unseren Overlay-Header. Wir haben unseren Abschnitt zwei, dem wir ein Hintergrundbild hinzugefügt haben, dieses hier. Aber auch, wie Sie sich erinnern können, setzen wir es auch auf 100 vh. Dieses Bild erstreckt sich also über die gesamte Höhe unseres Heldenabschnitts. Und natürlich haben wir hier ein paar Dummy-Inhalte , von denen ich denke, wir könnten es wirklich entfernen, aber lassen Sie es uns vorerst behalten. Der nächste Schritt hier wäre also, unser Heldenbild ein bisschen interessanter zu machen. Im Moment haben wir nur ein Bild. Und wir kommunizieren im Grunde nicht zu viele Dinge an unsere, an unsere Benutzer. Also was, was ich hier tun möchte, ist, dass ich vielleicht wie eine Überschrift hinzufügen möchte, ich möchte etwas Text hinzufügen. A kann ein Aufruf zur Aktion in einem Formular in Form einer Schaltfläche sein. Aber bevor wir das alles tun, und es gibt ein paar Dinge, die wir im Hinterkopf behalten müssen. Wenn wir jetzt nur hinzufügen, Sagen wir, dass Überschrift. Und dann möchten wir noch etwas Text hinzufügen. Da gehen wir. Und dann möchten wir einen Button hinzufügen. Da gehen wir. Sie können sehen, dass all diese Dinge in der oberen linken Ecke hinzugefügt werden. Natürlich gibt es hier ein bisschen eine Polsterung, da der Abschnitt standardmäßig auf Größe eingestellt ist und der Abstand auf 75 Pixel oben und unten und 20 Pixel links und rechts Polsterung eingestellt ist. Es gibt also ein paar Dinge, die ich gerne tun würde, um diesen Text in der Mitte erscheinen zu lassen, nicht nur horizontal, sondern auch vertikal. Aber ich möchte dieses Bild auch ein wenig ändern. Und ich meine, ich möchte sicherstellen, dass dieses Bild im Hintergrund, dass es auch zentriert ist. Und jetzt sieht es so aus, als wäre es zentriert, als wäre es in Ordnung. Aber wenn wir anfangen, dieses ganze Design reaktionsschnell zu machen, werden Sie sehen, dass wir sozusagen unsere Komposition verlieren werden. Nehmen wir es langsam, Schritt für Schritt. Lassen Sie uns zunächst einen Blick darauf werfen, wie man all diesen Inhalt macht, wie man diesen Inhalt in Bezug auf unseren Abschnitt zentriert. Und du denkst vielleicht, dass wir vielleicht gerne die Überschrift oder die Steuer oder den Boden nehmen müssen. Und dann vielleicht wie in Photoshop und Illustrator oder einem anderen Programm, trifft einfach eine Ausrichtungsoption direkt hier an der Spitze. Aber in Website-Building, bin ich, es wäre besonders hier in Sauerstoff. Es wäre eine bessere Idee, dem Abschnitt, diesem Abschnitt direkt hier mitzuteilen, wie der gesamte Inhalt gerendert werden kann. Und das wird tatsächlich in unsere Rubrik und in unsere, in unserem Helden- und Heldenbereich gesetzt. So kann übrigens sein, lasst uns einfach auf diese klicken, diesem Menü, auf diese Pfeile. Und lassen Sie uns unseren Abschnitt umbenennen. Rufen wir es uns an. Jetzt nennen wir es einen Heldenbereich. Da gehen wir. Ich werde mein Design retten. Also, was ich tun will, ist, dass ich sicherstellen will, dass diese Überschrift , dass dieser Text, und dass dieser Knopf genau in der Mitte gesetzt ist vertikal und horizontal. Also, wenn ich, wenn ich mein Heldenbereich hier ausgewählt habe, werde ich zu diesem horizontalen Element Ausrichtungsoptionen gehen. Und ich werde auf die Mitte klicken. Wie Sie sehen können, werden alle meine Elemente jetzt horizontal zentriert, aber sie sind nicht vertikal zentriert. Ich möchte, dass all diese Kerle genau in der Mitte unserer Sektion sind. Um das zu tun, gehe ich zum Tab Erweitert und gehe zu Layout. Übrigens, alle diese Elemente bleiben aussehen. Es sieht aus wie ein ziemlich gruseliges Zeug hier. Aber lassen Sie mich Ihnen sagen, dass im Grunde, was wir hier tun, ist dass wir Sauerstoff sagen, einige CSS-Regeln für uns zu schreiben. Und CSS steht natürlich für Cascading Style Sheets. Grundsätzlich sind diese Stile dafür verantwortlich, dass unsere Überschriften so aussehen, wie sie aussehen sollen. Sie sind für die Ausrichtung verantwortlich. All diese Dinger. Ich meine, wir müssen keinen Code schreiben. Wir können Sauerstoff einfach sagen, dass er diesen Code natürlich im Backend für uns schreibt, indem wir einfach auf bestimmte, bestimmte Optionen klicken. Wie Sie sehen können, haben wir unser Align-Items Center. Das haben wir im Grunde getan. Lassen Sie mich zum Primär gehen. Das haben wir im Grunde genommen hier gemacht. Und jetzt, was wir tun wollen, wieder, Layout ist, dass Sie alle diese Elemente in die Mitte setzen wollen. Also, um das zu tun, alles, was wir tun müssen, ist, einfach auf diese Rechtfertigung Inhalt Center Option klicken. Und im Grunde sind wir fertig. Wir stellen unsere Inhalte genau in die Mitte. Und wenn wir jetzt diesen Kerl retten und fangen an, einen Blick zu werfen. Und wir werden einen Blick auf unsere reaktionsfähigen Optionen werfen. Sie können sehen, dass alle diese Elemente immer genau in der Mitte bleiben. Natürlich, wie Sie jetzt sehen können, wird diese Steuer erhoben. Es wurde an der Mitte ausgerichtet und wir möchten , dass es ausgerichtet wird, während es nach links ausgerichtet wird. Aber wir wollten auf das Zentrum ausgerichtet sein und wir werden uns natürlich in nur einer Sekunde darum kümmern. Aber auch Sie können sehen, dass unser Hintergrundbild, Es ist irgendwie wie beschnitten worden. Als ob wir diesen Brennpunkt nicht genau in der Mitte sehen. Und das ist etwas, worum wir uns auch kümmern müssen. Aber fangen wir an, das im nächsten Video für jetzt zu tun, ich möchte nur, dass Sie verstehen, dass, wenn Sie sicherstellen wollen , dass Sie alle Inhalte genau in der Mitte ausgerichtet sind. Alles, was Sie tun müssen, ist, auf die Registerkarte Erweitert zu gehen und dann zu legen , und Sie alle Ausrichtungsoptionen bereit und warten auf Sie hier. Also nun gehen wir weiter, um sie auszurichten oder unser Bild zu zentrieren. 23. 4.20die Hintergrundbild: Wenn wir beginnen, unser Design f in der Vorschau zu sehen, als ob es auf einigen kleineren Geräten gerendert wurde. Sie werden in der Lage sein zu sehen, dass unser Hintergrundbild xm ist. Es ist irgendwie so, als würde man beschnitten. Wir sind nicht in der Lage, unseren Mittelpunkt zu sehen, in diesem Fall unseren Mittelpunkt. Nun, wir sind sofort in der Mitte. Wenn wir zu weniger als 480 gehen, können Sie sehen, dass diese Art von sieht irgendwie seltsam aus und Sie denken, dass dieser Laptop auf der Seite zugeschnitten wurde , und wir sind im Grunde nicht sicher, was wir sehen. Um diese Situation zu verhindern, gibt es eine schnelle kleine Lösung, einen schnellen kleinen Trick, mit dem Sie Ihren Fokus genau dort halten können , wo Sie es in Bezug auf die Anzeige Ihrer Hintergrundbilder haben möchten. Jetzt in unserem Fall wollen wir den Brennpunkt genau in der Mitte. Was wir also tun können, ist, dass wir zu gehen, wenn unsere Sektion ausgewählt ist. Sie können in den Hintergrund gehen. Und hier unten sehen Sie diese linken und oberen Optionen. Diese Jungs erlauben es Ihnen, Ihr Hintergrundbild in Bezug auf den linken Punkt und den oberen Punkt zu bewegen . Nun, wenn wir sagen würden, ich weiß nicht, mach so etwas wie 50%. Jetzt, an diesem Punkt, passiert nicht viel, weil wir eine Vorschau auf den großen Desktop. Aber wenn wir anfangen zu gehen, können Sie sehen, dass sich unser Bild gerade jetzt bewegt. Wenn Sie sich erinnern können, wann wir waren, als dies auf die 0 gesetzt wurde, ist dies, wie, das war unser, unser Hintergrundbild. Und gerade jetzt haben wir es verschoben, um zu entscheiden. Und wenn Sie es so behalten wollen, na ja, natürlich könnten Sie, aber das wäre keine gute Produktionstechnik, die einer guten Produktionspraxis entspricht. Was besser ist, ist, Ihre linken und oberen Werte immer auf 50% und nach links und 50% nach oben zu halten , da dies immer sicherstellen wird , dass Ihr Brennpunkt genau in der Mitte liegt. Natürlich, wenn Sie wollen, würde Ihren Fokus wie in der oberen rechten Ecke setzen wollen, könnten Sie mit diesen Optionen spielen als auch. Aber wenn wir jetzt anfangen, unser Design auf kleineren Geräten zu betrachten, können Sie sehen, dass unser Poco-Punkt, ein Brennpunkt namens B1, immer, immer in der Mitte ist. Dies ist also nur eine nette kleine Produktionstechnik für Sie, Sie verwenden können, wann immer Sie mit der Reaktionsfähigkeit Ihrer Hintergrundbilder und mit der Zentrierung Ihres Brennpunkts spielen möchten. 24. 4.3-Einstellung: Also, sobald wir den Hintergrund sortiert haben, nun, wie in 99%, werden wir ein wenig dünn machen, sobald wir unseren Inhalt hier sortiert haben. Also natürlich, was ich tun will, ist, dass ich die Farbe meiner Überschrift ändern möchte. Also werde ich nur diesen Kerl schnappen und einfach diese helle Farbe wählen. Und ich werde dasselbe für diesen Kerl tun. Und ich werde den Knopf verlassen, wie es vorerst ist. Was ich tun möchte, ist, dass ich hier vielleicht noch etwas Text hinzufügen möchte. Also gehen wir einfach zu Lorem, ipsum. Das geht zu etwas Lorem. Lasst uns einen Lorem Ipsum Text schnappen. Das sollte sein, ich schätze, wir können genau das packen. Und ich werde einfach hier doppelklicken und einfach Steuerelement V drücken, um diesen Kerl hier einzufügen. Wenn wir es uns ansehen, haben wir, nun , wir haben tatsächlich ein paar Probleme, nicht nur ein Problem. Zunächst einmal ist unser Text, nun, er ist viel zu groß, er ist viel zu breit. Außerdem könnten wir vielleicht mit dem Abstand zwischen all diesen Elementen herumspielen, wie zwischen den Überschriften im Text und dem unteren. Aber auch wir, ich glaube nicht, dass wir genug Kontrast zwischen unserem Text und unserem Hintergrund haben . Vielleicht wollen wir das letzte Problem jetzt ansprechen. Also bin ich immer noch hier auf meiner Sektion. Ich habe meinen Schnitt ausgewählt. Ich gehe zum Fortgeschrittenen und dann zum Hintergrund. Und hier unten haben wir diese Option, die Bildüberlagerungsfarbe sagt. Wenn wir unsere Farbe wählen, wir an, ich werde diesen Kerl hier schnappen. Sie können sehen, dass wir gerade jetzt eine Farbe über unser Hintergrundbild überlagern. Und das ist natürlich nicht ganz das, was wir wollen. Lass mich die Farbe nochmal schnappen. Was ich tun möchte, ist, dass ich die Transparenz hier so leicht auf den Sommer reduzieren möchte, nur um einige Kontraste zwischen MyText-Überschrift und natürlich dem unteren Ende, diesem Hintergrund hinzuzufügen. Also werde ich es als so lassen, dass ein Problem sortiert ist. Nun, das andere Problem ist, dass, wenn wir anfangen, in unserem Text, na ja, unser Ansichtsfenster kleiner zu machen , Sie sehen können, dass sich unser Steuersystem gut über fast die gesamte und die gesamte Seite erstreckt. Und das ist nicht genau das, was wir wollen. Also gehe ich zurück zu meinen alten Geräten. Ich gehe, ich gehe zurück zu diesem, nun, dieser Blick hier. Und was ich gerne tun würde, ist, dass ich all diese Typen kleiner machen möchte. Ich würde gerne, wissen Sie, wir könnten vielleicht einfach diesen Text packen und zu Advanced gehen. Und dann zu Größe und Abstand und vielleicht mit der Breite spielen. Nehmen wir an, Sie würden 50 Pixel oder 50% eingeben und diesen Kerl kleiner machen. Und wir könnten dasselbe für den Container unserer Überschrift tun. Aber lasst uns, lasst uns. Ein bisschen anders, und lasst uns tatsächlich eine weitere, denke ich, sehr wichtige Technik hier in Sauerstoff lernen . Lassen Sie uns all diese Elemente in einen bestimmten Container legen. Und dieser Container wird unser div sein. Also ist ein div im Grunde nur eine Art wie ein generischer Container, mit dem Sie andere Inhalte darin einfügen können. Und nun, wissen Sie, es hat keine ähnlichen Attribute, aber es erlaubt Ihnen, das Layout und die Größe von sehr, sehr einfach zu steuern. Und es ist ein, es ist ein sehr mächtiges, ein mächtiges Stück, naja, ein CSS oder HTML tatsächlich hier im Sauerstoff. Die Art und Weise, wie wir dies tun könnten, ist, dass wir einfach auf unsere Überschrift gehen könnten. Und wieder, verwenden Sie dieses kleine Menü direkt hier und wählen Sie einfach Wrap mit DIV. Was es tun wird, ist, dass es diesen spezifischen Teil des Inhalts, in diesem Fall die Überschrift. Und es wird es in dieses div stecken. Und was ich tun will, ist, dass ich diese Typen auch in unseren Container bringen will. Wie Sie sehen können, haben sich einige Dinge geändert, aber die Steuer funktioniert immer noch nicht richtig. Also gerade jetzt, wenn wir unser div haben, könnten wir zum horizontalen Elementausrichtungszentrum gehen den Inhalt in die Mitte stellen. Aber ich denke, dass wir auch zu unserem Text gehen sollten als zur fortgeschrittenen Topographie und den Text auch in der Mitte ausrichten sollten. Also, wenn wir jetzt zu unserem Seitencontainer gehen, können Sie sehen, dass alle diese Elemente schön an der Mitte ausgerichtet sind und Sie können zu weniger als 992 gehen. Die gleiche Situation passiert. Nun, an diesem Bruchpunkt, können Sie sehen, dass unsere Überschrift beginnt zu schauen, na ja, nicht das Beste, was wir vielleicht einige Dinge daran ändern könnten, aber ich denke, dass wir vielleicht die Größe ändern könnten, die Zeilenhöhe, aber auch die Ausrichtung. So wie Sie sehen können, wenn Sie, wenn Sie Ihre Reaktionsfähigkeit auf dem Weg überprüfen, wenn Sie nicht warten, bis Ihr gesamtes Design ist, fertig ist, wenn Sie nur die Reaktionsfähigkeit anpassen, während Sie gehen, das wird Ihnen nur ein viel Zeit, vertrau mir auf das. Also werde ich auf alle Geräte gehen. Schnappen Sie sich diese Überschrift wieder, gehen Sie zur fortgeschrittenen Topographie und richten Sie sie an der Mitte aus. Also, wenn wir jetzt zu weniger als 992 oder 68 gehen, können Sie sehen, dass unsere Überschrift schön ausgerichtet ist. Also, was ich auch tun werde, ist, dass ich vielleicht die Schriftgröße erhöhen werde. Mal sehen 48. Das sollte in Ordnung sein. Und vielleicht lasst uns hier etwas eingeben. Sagen wir, willkommen zu wow, Design. Der Ort Ihres nächsten Projekts. Sag es so. Ich werde diesen Dummy-Dummy-Text hinterlassen, wie er hier ist. Und jetzt, wenn wir anfangen, unsere Reaktionsfähigkeit zu ändern, können Sie sehen, dass wir eine, na ja, die Zeilenhöhe hier ist, ich denke, es ist ein bisschen zu groß. Also werde ich die Überschrift nochmal ergreifen. Und von der Registerkarte Erweitert Topographie, lassen Sie uns einchecken und Linienhöhe als eins oder kann 1.1 sein. Und ich gehe auf die Seite Container 1120. Ich denke, das sollte gut aussehen. Ich denke, es ist in Ordnung. Aber am Anfang, wie Sie sich erinnern, haben wir alle diese Jungs in ein bestimmtes div gesteckt und wir haben es irgendwie vergessen. Aber das ist nur, weil wir angefangen haben, mit diesen Elementen herumzuspielen. Ich habe es nicht aktin und vergessen. Also, wie diese ganze div, Situation uns helfen kann, wenn wir einen Blick auf andere kleinere und kleinere Breakpoints werfen, Sie können sehen, dass dieses div Nein zu meinen Basis-Hits auch ein bisschen ist, es ist ein bisschen zu breit, wenn wir zu unseren alten Geräten gehen. Und dann, wenn das div ausgewählt ist, wenn wir zu diesem gehen, gehen wir zu unserer primären Registerkarte. Und wir haben das hier mit Option. Ich werde die Einheiten von Pixeln ändern. Vielleicht gehen wir zu Prozentsätzen. Und lasst uns etwa 75% eingeben. Sie können sehen, dass alle, alle unsere Inhalte oder werden und anders als neu angepasst, um in dieses div passen. Also müssen wir nicht nur Überschrift und dann Tags greifen und dann Barton zu, um sie kleiner oder größer zu machen, können wir einfach das Aussehen unseres div manipulieren, nur dieses ein Stück Inhalt, um es zu machen, es kleiner zu machen, kleiner oder größer. Gleichzeitig alle diese Inhalte immer kleiner oder größer. Aber wenn wir gehen, um Seite Container 1120 zu mögen, schätze ich, es sieht immer noch aus. In Ordnung. Aber warum gehst du nicht zu weniger als 992? Ich schätze, wir könnten die Breite ein wenig ändern. Also statt, ich denke, es waren 75, lassen Sie uns tun wie 80% oder vielleicht sogar 90, 90% Prozent sollten besser aussehen. Und dann gehen wir zu weniger als 768. Es sind immer noch 90%. Und für 80 sollten 90% in Ordnung sein. Also, wenn wir nur diesen Kerl speichern, und ich werde zu meinem Inkognito-Modus gehen wieder ist ich werde nur drücken Kontrolle C, Kontrolle Shift plus P auf Firefox, Kontrolle plus Shift plus n auf Chrome. Und ich werde nur diese Adresse eingeben. Und wenn wir anfangen, erhöhen Sie diesen Kerl einfach. Also, was ich werde kleiner, kleiner, kleiner, kleiner. Sie können sehen, wie diese Steuer schön an unsere Bruchpunkte angepasst wird , bis wir den ganzen Weg hier runter gehen. Nun natürlich, wenn Sie die Größe Ihrer Überschriften ändern wollen, abhängig von Ihren Bruchpunkten, aber ich überlasse es Ihnen. Sie wissen bereits, wie Sie sich darauf einstellen können. Es gibt also noch ein paar weitere Probleme, die wir mit diesen Inhalten haben. Und das ist der Wille, die Polsterung oder der Rand zwischen all unseren Elementen. Und natürlich müssen wir uns um unseren Hintern kümmern. Also fangen wir an, das als nächstes zu tun. 25. 4.4-Rand zum Inhalt hinzufügen: Also, jetzt, da wir unser div Center haben, haben wir unser Buchhalterzentrum bekommen, wäre es eine gute Idee, einige Abstände zwischen all diesen Elementen hinzuzufügen. Also, was ich tun werde, ist, dass ich diesen Text packen werde und ich werde zu Advanced Größe und Abstand gehen. Und wir könnten einfach etwas Marge und einen oberen Rand und einen unteren Rand hinzufügen. Aber wir könnten auch einfach unseren oberen Rand unseres Textes greifen und einfach einige Abstände hier unten hinzufügen. Und wie Sie sehen können, haben wir diese Werte. Will rein, wir werden gleich hierher setzen. Und lassen Sie uns das vielleicht gleich 20 Pixel, 20 Pixel machen. Aber natürlich können wir nicht vergessen zu überprüfen, wie es auf unseren kleineren Seitencontainern aussehen wird. Das wird also unsere 1120 sein. Und mal sehen, 768. Ich schätze, es sieht immer noch gut aus, aber vielleicht lass uns 480 machen. Ich denke, vielleicht könnten wir einige weitere Polsterung hier unten für unsere Taste hinzufügen, so ist es leicht l, leicht zugänglich auf den kleinsten Geräten. So können Sie mit nur wenigen Klicks hier in Sauerstoff wirklich, wirklich steuern die Reaktionsfähigkeit Ihres, Ihres, Ihres, Ihres Designs. So sieht es aus, wenn es anders als der größte Desktop ist. Aber als wir anfingen, können Sie sehen, dass sich unser Knopf den ganzen Weg nach unten bewegen wird, hier unten. Und es gibt auch eine andere Möglichkeit, das Layout von Inhalten innerhalb eines div zu steuern. Und das würde, könnte gut in Ihren Entwürfen funktionieren. Also denke ich, es lohnt sich, sich anzuschauen. Also für den Moment werde ich nur diesen Text greifen und ich werde Margin-Werte loswerden. Und ich werde diesen 50-Pixel-Rand hier unten loswerden. Also, was ich tun werde, ist, dass ich das div schnappen werde. Und genau hier können Sie diese Option sehen, die Raum zwischen dem sagt, was es tut, ist es macht dies all diese Stücke von Inhalt gleichmäßig vertikal verteilt werden. Natürlich können wir im Moment nicht viel sehen, weil unser div seine Größe nicht geändert hat. Aber wenn Sie zu den fortgeschrittenen als eine Größe und Abstand gehen, und lassen Sie mich einfach die Höhe von Pixeln in Prozentsätze ändern. Ich werde etwa 75% eintippen. Sie können jetzt sehen, dass unsere Gruppe, aber alle diese Elemente sind wie, irgendwie an den oberen Teil unseres div geklebt und den unteren Teil eines div und dieser Text bleibt, bleibt in der Mitte. Wenn wir es um 50% oder sogar 40% machen, können Sie sehen, dass wir schön sogar Zweifel bekamen. Teile des Inhalts und die Zwischenräume zwischen diesen Elementen sind, sind die gleichen. Und natürlich müssten wir sicherstellen, dass dieses Design durch alle unsere, alle unsere Haltepunkte konsistent ist . Wie in diesem Fall möchten wir vielleicht das div ein bisschen größer machen, vielleicht 40%. Und wir müssten nur wissen, fortsetzen, diesen Ansatz in all diesen Haltepunkten, 992, könnte es etwa 45% gehen. Da gehen wir hin. Und dann 768, vielleicht 50%. Oder sogar eine 55 oder sogar 65. Dies ist also nur eine andere Möglichkeit, die Leerzeichen zwischen den Elementen Ihres Inhalts zu ändern , die innerhalb eines div-Elements platziert werden . Aber ich denke, dass ich nur mit den Rändern gehen werde, die ich meinem Text hinzugefügt habe. Und anstatt jetzt nur alle Änderungen vorzunehmen, stellen Sie sicher, dass wir alle diese Optionen von all diesen Haltepunkten entfernt haben. Ich werde nur das History Panel hier in Sauerstoff benutzen, aber fangen wir an, das als nächstes zu tun. 26. 4.5er Verlaufsbereich: Also hier auf der Seite Sauerstoff, haben wir endlich das Geschichtspanel, das genau hier ist. Und hier werden Sie alle Ihre, alle Schritte sehen, die Sie unternommen haben, um an diesen Ort zu gelangen. Und wenn Sie möchten, könnten Sie einfach auf diesen Rückgängig-und-Redo-Knopf klicken , um genau wie zurück in die Geschichte gehen oder vorwärts gehen. Oder du könntest einfach auf einen dieser Zustände klicken, um zu dem Ort zurückzukehren, wo er eigentlich sein möchte. Also geh ich einfach zurück. Sehen wir uns irgendwo hier an, oder vielleicht sogar den Sommer hier. Das sollte in Ordnung sein. Sie können sehen, dass wir 40 Pixel Rand zwischen diesem Element und diesem Element haben. Und natürlich, wenn ich es ändern würde, um 2525 zu sagen. Im Moment spiegelt sich diese Veränderung direkt hier unten wider. Das ist also unser letzter Schritt. Und natürlich könnten wir zurückgehen, zurückgehen, zurückgehen, wenn du es wolltest. Aber ich denke, ich werde es als 25 von 25 behalten. Also Geschichte Panel ist ein relativ neues für Sauerstoff und wir haben es zum Glück. Aber wenn es einmal hier ist, denke ich, ist eine gute Idee, sich damit vertraut zu machen. Und dann können Sie, wenn Sie Designfehler oder Entwicklungsfehler machen, können Sie einfach zurück in die Geschichte gehen. Sie können in die Geschichte zurückkehren bis in Ihren ursprünglichen Zustand. Das wäre so etwas, aber ich will nicht, dass ich nicht darauf zurückgehen will. Ich möchte zu diesem Teil hier vorwärts gehen. So können wir jetzt tatsächlich anfangen, unsere Taste zu ändern. Also lasst uns das als nächstes tun. 27. 4.6. Knöpfe anpassen: Kümmern wir uns jetzt um unseren Hintern. Also werde ich es auswählen. Und das erste, was ich tun werde, ist, ich werde einfach darauf doppelklicken, um den Text zu bearbeiten. Also lassen Sie mich einfach in unser Portfolio eintippen. Das wird unser Aufruf zum Handeln sein. Und sobald unsere Schaltfläche auf der linken Seite ausgewählt ist, können Sie sehen, dass es eine ganze Menge Dinge gibt, die wir ändern können. Also, lassen Sie uns zum Beispiel unsere URL setzen. Ich klicke einfach auf „Set“. Und das öffnet unsere Insert-Edit-Link-Option. Und was ich tun möchte, ist, dass ich den Benutzer möchte, der auf diesen Link klickt. Ich möchte, dass der Benutzer zu unserer Portfolio-Seite geht. Also werde ich Portfolio wählen und ich werde nur auf Link hinzufügen klicken. So können Sie jetzt sehen, dass dieser Link zu unseren Buttons hinzugefügt wird. Also, wenn jemand darauf klickt, wissen Sie , diese Person wird auf diese bestimmte Seite umgeleitet werden. So könnten wir den Schaltflächenstil von Volumenkörper zu Umriss ändern. Wenn wir es wollten. Natürlich könnten wir die Größe ändern. Also lass mich einfach diesen Kerl vielleicht machen, aber größer auf so etwas wie 18. Ich werde den Text ändern. Die Tastenfarbe kann zu dieser dunkleren oder vielleicht diese hellere braune und Knopf-Hover-Farbe sein. Wir könnten vielleicht das gleiche mittelbraun grep, aber lassen Sie uns vielleicht etwas dunkler machen, um so etwas zu machen. Also, wenn jemand über eine Stunde bewegt Taste , wird diese Person eine Art von Feedback zu sehen. Also lasst uns einfach diesen Kerl retten. Und ich werde meine, schnappen Sie sich diese Inkognito-Version meiner Website. Und wie Sie sehen können, wenn wir den Mauszeiger über unsere Schaltfläche bewegen und die Hintergrundfarbe ändert sich. Natürlich könnten wir auch die Textfarbe von einfach breit in unser sehr, sehr hellgrau ändern . Und wir könnten die Schriftgröße ändern, die vielleicht ein bisschen zu groß sein könnte, aber wenn du willst, kannst du das verrückt machen. Ich gehe zu etwas wie vielleicht 1818 sollte nicht in Ordnung sein. Wir könnten vielleicht auch mit dem Schriftgewicht herumspielen. Wie Sie sehen können, ist es hübsch, ziemlich unkompliziert. Was ich jedoch gerne tun möchte, ist, dass ich die Reaktionsfähigkeit überprüfen möchte, wie meine Schaltfläche wird, meine Schaltfläche aussehen wird, wie sie sich in Einsen verhalten wird und das Ansichtsfenster kleiner ist. So sieht es jetzt gut aus. 99, um noch 768 zu finden. Ich schätze, wir könnten es vielleicht etwas kleiner machen. 14 und die Textgröße vielleicht 16 mögen. Und dann gehen wir zu 418. Und ich schätze, das sollte gut sein. Also alles in allem, wie Sie sehen können, ziemlich unkomplizierter Prozess. Vergessen Sie nicht, den Link zu Ihrem Button einzugeben. Und Sie wissen, dass Sie den Stil in Volumenkörper oder Umriss ändern können, und dann können Sie die Farben ändern und die Farbe bewegen. Alle diese Optionen sind innerhalb, mit nur einem Klick, dass Sie leicht die Größe Ihrer Schaltfläche ändern können. Vielleicht mache ich diesen Kerl nur ein bisschen kleiner auf so etwas wie 16 und Textgröße auf so etwas wie 17. Und das sollte in Ordnung sein. Also gehen wir hin. Wir haben unsere Heldenabteilung erstellt. Aber diese Art von Helden-Sektionalismus, Nun, das ist es. Alles klar, aber das hat , es ist irgendwie langweilig. Ich schätze. Wir könnten immer nur die Anzeige, vielleicht wie ein etwas großer, riesiger Schieberegler, der sich über unseren Heldenbereich erstrecken würde. Und innerhalb dieses Schiebereglers könnten wir verschiedene Inhalte hinzufügen. Wir könnten zum Beispiel das Hintergrundbild ändern. Denn wie ich mich erinnere, haben wir wie das Webdesign, das Branding und die Print-Design-Unterseiten. So könnten wir sie in unseren Schieberegler aufnehmen. Und wir könnten einige Informationen und verschiedene Aufruf zu Aktionen hinzufügen, verschiedene Schaltflächen zu, zu diesen spezifischen Portfolios oder sind diese spezifischen Seiten. Aber wir werden das als Nächstes tun. 28. 4.7er Schieber hinzufügen: Bevor wir also anfangen, unsere Folien hinzuzufügen, muss ich einige, einige neue Bilder hier zu meiner Mediathek hinzufügen . Ich habe, ich habe einige Web-Design, Druck und Brandon Bilder vorbereitet . Ich öffne sie einfach und warte, bis sie hochgeladen sind. Also, jetzt haben wir diese Bilder. Natürlich könnten wir auch unser altes Heldenbild gebrauchen . Also werde ich auf meine Seiten gehen und es auf die Homepage mit Sauerstoff hinzufügen. Wieder. Wir werden diesen Abschnitt nicht mehr mit diesen Inhalten verwenden. Ich schätze, wir könnten sie retten. Vielleicht werde ich nur dieses div greifen und ich werde es hier beiseite legen. Ich werde es nur in diesen Abschnitt stecken, also ist es genau hier. Es wird auf uns warten, sobald wir anfangen, unsere Folien hinzuzufügen. Also, das ist nur ein, ich denke, eine gute Produktionstechniken, ein Graben, alles. Lass uns ein paar Dinge retten. Allerdings, was ich tun will, ist in Jetzt mein Held Abschnitt, Ich möchte dieses Hintergrundbild loswerden. Also, was ich tun werde, ist, dass ich in den Abschnitt Hintergrund gehen werde. Ich werde dieses Bild-Overlay loswerden, und ich werde dieses Hintergrundbild loswerden. Also, was wir jetzt tun müssen, ist, dass wir tatsächlich den Schieberegler hinzugefügt haben. Also werde ich einfach auf Hinzufügen drücken und ich werde mit der Eingabe in Schieberegler beginnen. Da gehen wir. Und ich werde nur darauf klicken. Wie Sie jetzt sehen können, haben wir hier nicht wirklich viel vor sich. In dieser Struktur Schmerz. Wenn wir den Schieberegler öffnen, haben wir nur drei Folien, die wir tatsächlich können, können Sie tatsächlich auf diese klicken und wie Sie sehen können, gibt es einige Animationen los. Wir haben ein paar nette kleine Punkte hier, Navigationspunkte. Und was ich jetzt tun werde, ist, dass ich denke, dass ich zwei Folien loswerden werde und ich werde einfach mit einem arbeiten, denn danach können wir einfach unseren ersten Flug duplizieren, weil wir im Grunde genommen die gleiche, gleiche Art von Inhalt in unserem, in unserer Folie. Also, nur um zu sehen, was hier passiert, werde ich nur ein Hintergrundbild zu meiner Folie hinzufügen. Also werde ich zu fortgeschrittenem Hintergrund, Hintergrundbild gehen. Und ich werde greifen, vielleicht fangen wir mit unserem Web-Design-Bild an. Das ist also dieser Typ hier, und ich werde ihn einfach auswählen. Also, jetzt haben wir unser Bild bekommen, fügen Sie zu unserem Schieberegler hinzu. Aber es gibt ein paar Dinge, die wir tun müssen. Also vielleicht, bevor wir tatsächlich anfangen, mit unserem Schieberegler herumzuspielen, mit den Einstellungen unseres Schiebereglers. Kümmern wir uns schnell um die Folie. So wie bei unserem Abschnitt Hintergrundbild, können wir die linken und oberen Punkte auf 50% setzen, stellen Sie einfach sicher, dass unser Brennpunkt genau in der Mitte ist. Dann können wir uns unser div holen. Das ist, denken Sie daran, dass dies das div war und ich werde es einfach hier in meine erste Folie setzen. So sitzt es schön in meinem, in meinem Schieberegler. Das ist also unsere erste Folie, dieser Typ hier mit unserem Div. Also, wenn wir jetzt nur unsere erste Folie packen, vielleicht, lassen Sie mich einfach umbenennen. Nennen wir es, denken wir es, nennen wir es einen Webdesigner. Da gehen wir. Und dann, wenn wir einfach auf dieses Menü klicken, Kontextmenü-Taste und einfach auf Duplicate klicken, haben wir eine andere Folie namens Web-Design natürlich, aber lasst uns es ändern, vielleicht ändern wir es zu Branding. Da gehen wir. Und dann lassen Sie uns diese Folie duplizieren. Aber dieser Typ, lassen Sie es uns umbenennen und nennen es Print Design. Da gehen wir. Natürlich haben alle diese Folien die gleichen Hintergrundbilder. Also werde ich zum Branding gehen. Und ich werde das Hintergrundbild zu meinem Gedanken ändern, dass yay Branding war. So Branding, ich glaube, es war dieser Kerl. Ich werde das Bild auswählen. Dann gehe ich zu meinem Druckdesign erweiterte Hintergrund-Browsing. Und ich denke, es wird dieser Kerl sein. Und da gehen wir. Wir haben verschiedene Folien für verschiedene Hintergründe für unsere Folien. Natürlich, wenn wir wollen, können wir immer noch einfach voran und wählen Sie eine Bildüberlagerungsfarbe, wenn wir wollten. Lassen Sie uns für unsere Folien vielleicht etwa 40% der Transparenz machen. Wir könnten das Gleiche für diesen Kerl tun. Natürlich, wenn wir es von der, von Anfang an, von Anfang an tun, wäre das viel einfacher. Wir hätten alle diese Typen schon so aufgestellt, wie sie sollten. Also 40, lass es uns so machen. Und das gleiche für Druckdesign, Hintergrund, Bild überlagern diese Farbe. Und bis 40, werde ich sparen. Im Moment haben wir unsere Folien so eingerichtet, dass sie richtig funktionieren. Wenn wir auf unsere Hauptseite gehen und ich werde nur das aktualisieren. Unser Schieberegler ist, nun, es funktioniert technisch. Es sieht nicht richtig aus. Es sieht nicht hübsch aus, aber es wird so aussehen. Es wird in nur wenigen Sekunden richtig aussehen. Dies ist nur das Gewicht, das Sie hinzufügen, ein Schieberegler hier in Sauerstoff, und so können Sie Folien hinzufügen. Und vergessen Sie nicht, dass Sie innerhalb von Folien im Grunde alles haben können, was Sie wollen. Es ist nur eine Frage des Hinzufügens eines bestimmten Inhalts, eines bestimmten Moduls innerhalb der, einer der Folien, genau hier, innerhalb des Schieberegler-Moduls in der Seite, der Schieberegler-Ebene. Also lassen Sie uns tatsächlich kümmern sich um den Schieberegler selbst im nächsten Video. 29. 4.8er Schreibenen volle Breite und Höhe: Wenn wir also auf unseren Schieberegler auf unserem Schiebereglermodul klicken, können Sie sehen, dass wir in erster Linie einige Styling- und Konfigurationsoptionen direkt hier in diesen beiden Registerkarten haben . So können wir für das Styling zwischen der horizontalen oder Fade-Animation wählen. Das wird also unsere Veränderung sein, wenn wir uns entscheiden, mit der Fade-Animation zu gehen. Aber ich denke, ich werde mit der horizontalen Animation gehen. Wir können die Geschwindigkeit unserer Folienanimation erhöhen oder verringern , die in Millisekunden dargestellt wird. Normalerweise denke ich, dass das schneller ist. Dieser Übergang, der Teig. Und dann können wir die Farbe unserer Punkte wählen. Diese Typen hier, ich werde diese Farbe in unsere hellgraue Farbe ändern. Und vielleicht werde ich die Transparenz etwas verringern, etwa 3%. Und wir könnten die Polsterung um unsere Dias entfernen. Wir könnten die Punkte unseren Schieberegler überlagern. Und wenn Sie möchten, können Sie sie auf die gleiche Höhe dehnen, wenn Sie einige verschiedene Größen von all Ihren Folien hatten. Das sind also die grundlegenden Dinge, die unseren Schieberegler steuern werden. Wenn wir zur Konfiguration gehen, können wir die Show Pfeile oder nicht Option wählen. Wir können wählen, ob Sie Punkte zeigen oder nicht. Und wir können die Autoplay-Funktion wählen, die den Schieberegler automatisch abspielt. Und Sie können hier die Verzögerung auswählen, was im Grunde bedeutet, wie lange eine Folie angezeigt wird. Und wir können wählen, um die unendliche Option zu setzen, die gerade geht, um unseren Schieberegler Schleife. Ich werde nur auf die Autoplay klicken, nur damit unsere Hüte nicht wehtun. Also haben wir ein paar grundlegende Hauswirtschaft gemacht. Wenn wir diesen Kerl gerade auffrischen, haben wir unsere Punkte hier. Nun, unsere Pfeile hier und unsere Punkte hier unten. Aber immer noch der Schieberegler ist nicht, wird nicht als volle Breite wie unser vorheriger Abschnitt oder Hintergrundbild dargestellt. Also, um das zu beheben, müssen wir mit einigen Schieberegler-Optionen spielen, die net verfügbar sind hier spielen. Aber sie sind direkt hier innerhalb der Größe und des Abstands erhältlich. Also zuerst, was ich tun werde, ist, dass ich den Schieberegler, Schieberegler Höhe 100 VH machen, um es wie Spannweite über meine ganze Website zu machen. Es kümmert sich also um einige Dinge, aber nicht um all die Dinge. Unser Schieberegler ist gefangen, wird immer noch gut, es ist nicht immer noch volle Höhe und eine volle Breite, weil unserem Abschnitt einige Standard-Optionen für den Rand und den Abstand zugewiesen hat. Wenn wir auf die Registerkarte Erweitert gehen, Größe und Abstand, können wir sehen, dass wir haben, dass wir 75 Pixel Polsterung, unten und 20 Pixel auf der rechten und auf der linken Seite haben . Wenn ich hier einfach 0 eingippe und dann auf Alle anwenden klicke, können Sie sehen, dass all das Padding verschwunden ist. Wir können diesen Kerl speichern und dann in unseren Inkognito-Modus gehen und die Seite aktualisieren. Und Sie können sehen, dass wir unseren Schieberegler in voller Breite, in voller Pracht und voller Höhe präsentiert haben. Natürlich funktioniert es gut. Wir können diese Typen einfach so bewegen. Wer auch immer, wenn wir uns unsere Hintergrundbilder genauer ansehen, können wir sehen, dass sie irgendwie wie im Hintergrund wiederholt werden. Und das ist definitiv das, was wir wollen. Und das können wir leicht beheben. Wenn wir zu unserer ersten Folie gehen, dann fortgeschritten als Hintergrund. Hier können Sie diese Option für die Hintergrundgröße sehen. Und wenn wir die Option abdecken, wird dies unser ganzes oder einen ganzen Boden abdecken. Lassen Sie uns dasselbe für unser Branding tun. So fortschrittlich durch Boden, Abdeckung, Druckdesign, fortgeschrittenen Hintergrund, und dann Abdeckung. Wenn wir jetzt nur unseren Schieberegler speichern und unsere Seite aktualisieren, können Sie sehen, dass wir keine wiederholten Hintergründe haben. Und natürlich bleibt nur noch, diese Reaktionsfähigkeit zu überprüfen. Also lass mich diesen Kerl einfach ein bisschen größer machen. Sieht gut aus. Wie Sie sehen können, wird unser Hintergrund bis zu unserem kleinsten, kleinsten Gerät angepasst. Also, da gehst du hin. So können Sie unseren Schieberegler einstellen. Und natürlich, was wir tun müssten, ist, dass Sie zum Branding gehen müssten. Wir könnten diesen Text vielleicht ändern, um unsere Branding Projekte zu sehen. Da gehen wir. Wir könnten mich vielleicht einfach einen Teil des Textes entfernen lassen, damit es so aussieht. Gleiches für das gedruckte Design der Marke konnten wir eintippen und unsere Druckdesigns ansehen. Und wieder, vielleicht einfach so einen Text loswerden. Natürlich könnten wir den Text unseres Portfolios ändern. Vielleicht könnten wir etwas eingeben, wie vielleicht Projekte ansehen. Da gehen wir. Dasselbe für diese Projekte in der unteren Ansicht. Projekte, da gehen wir. Und für unseren letzten Knopf hier unten könntest du dasselbe tun. Zeigen Sie Projekte an, die Ego sind. Natürlich liegt alles an dir. Ich möchte Ihnen nur zeigen, dass Sie im Grunde alles setzen können , was Sie wollen, und ändern Sie es angepasst. Wie auch immer, was Sie mögen Und hier in Designer, wenn Sie eine erstellen, Erstellen Sie Ihre, Ihre Schieberegler. Also, wenn wir jetzt wieder in unseren Inkognito-Modus zurückkehren, erfrischen Sie diesen Kerl. Sie können sehen, dass sich unser Button geändert hat und wir haben unsere VR-Branding-Projekte, unsere Print-Designs. Wissen Sie, alles wird sofort in unserem Browser gerendert. Also schätze ich, wir haben unsere Heldenabteilung fertig. Wir können nun fortfahren, um in all diesen Abschnitten zu bevölkern, oder mit einigen interessanten, interessanten Inhalten, werden wir in nur einer Sekunde lernen, wie Klassen hier in einem Sauerstoff zu verwenden. Aber zuerst werden wir einige, einige Symbole und einen Text hinzufügen , nur um wie unsere Dienste für die Benutzer zu zeigen. 30. 5.1First die Spalten hinzufügen: Jetzt können wir anfangen, unsere Dienstleistungen Abschnitt zu erstellen und wir haben bereits unseren Helden. So können wir jetzt einen Abschnitt starten, der unter unserem Heldenbereich platziert wird. Und wir haben bereits einen Abschnitt hier. Und ich denke, ich werde es verlassen, aber ich werde eines dieser Textstücke loswerden. Ich werde das hier verlassen und vielleicht, vielleicht lassen Sie uns alles von Grund auf neu erstellen. Also werde ich einen neuen Abschnitt hinzufügen. Da gehen wir hin. Ich werde es hier unter der Heldenabteilung aufstellen. Und vielleicht lassen Sie uns umbenennen und nennen es Dienste. Da gehen wir hin. Ich werde alles retten. Was wir also genau hier machen wollen, ist, dass wir hier unten eine Art Überschrift und vielleicht einen Text hinzufügen möchten. Und dann möchten wir, wissen Sie, wie diese kleinen Stücke von gut, wie kleine Symbole und einige Überschriften unter diesen Symbolen, einige Textstücke haben. Genau wie Sie auf vielen, vielen Designs sehen , weil wir gerne, wie, wissen Sie, die Dienstleistungen, die wir anbieten, aufzählen möchten. Also, was ich zuerst tun werde, ist vielleicht werde ich mir ein paar dieser Typen hier ausleihen. Also werde ich diesen Diff greifen, der diese Überschrift, Tags und Button hat. Also werde ich mir das einfach schnappen. Ich werde es duplizieren. Und dann werde ich es einfach in meinem Dienstleistungsteil hier unten verschieben. Das ist dieser Typ hier. Und natürlich müssen wir ein paar Dinge daran ändern. Also zuerst, ich werde die Überschrift greifen und ich werde die Farbe ändern, die gleiche für den Text. Also werde ich nur diese Standardfarben entfernen und wir brauchen keinen Knopf. Also werde ich das loswerden und es loswerden. Und ich werde diesen Breitenwert hier entfernen. Und vielleicht könnten wir den Text hier ändern. Geben wir in Discover ein. Unsere Umfrage sagt: „Da gehen wir. Das ist also unsere Überschrift, das sind unsere Texte. Ich werde dieses Stück Text nur für den Moment verlassen. Also, was wir jetzt tun müssen, ist, dass wir die Symbole hinzufügen müssen, die wir erwähnt haben. Und das wird eine großartige Gelegenheit für uns sein, etwas über den Unterricht zu lernen. Aber bevor wir damit fortfahren, lasst uns einfach unter diesem div Spalten hinzufügen. Wir brauchen drei Säulen. Also gehe ich voran und klicke auf Typ n Spalten hinzufügen. Da gehen wir hin. Und sobald Sie auf die Spalten klicken, können Sie sehen, dass Sie wie vordefiniert eine Spalte Stücke genau hier. Und was wir brauchen, ist, dass wir drei Säulen und die B-Seite brauchen. Also werden wir 33 mal 33 von 33 wählen. Also werde ich nur darauf klicken. Und da gehen wir hin. Sie können sehen, dass wir hier drei Stücke haben. Und im Grunde sind sie nur drei divs, die eins sind, um tatsächlich, wir könnten die Namen ändern wollen, damit wir es wie in etwas wie Spalte eins ändern können . Da gehen wir hin. Dann rufen wir diese Kolonne zu ihrem Ego an. Und dieser Typ wird unsere Spalte drei sein, nur damit du alles sehen kannst, du verstehst, alles. Sie müssen es nicht tun, wenn Sie wissen, was Sie hier tun, aber Sie können es definitiv tun. Also haben wir unsere Überschrift, wir haben ein paar Texte unten, wir haben unsere Kolumnen. Und jetzt werden wir unsere Symbole und Text in diese Zahlen setzen. Aber bevor wir weitermachen, lassen Sie uns vielleicht einfach etwas hinzufügen, vielleicht wie eine Marge hier. Also werde ich meine Säulen schnappen. Und ich werde diese Typen vielleicht ein bisschen runterlegen, vielleicht irgendwo hier. Das sollte in Ordnung sein. Jetzt werden wir tatsächlich anfangen, unsere Inhalte in unseren Spalten hinzuzufügen und mehr über Klassen zu erfahren. Also fangen wir an, das im nächsten Video zu tun. 31. 5.2Erstelle das erste Symbol: Also, was wir hier hinzufügen möchten, wäre ein, ein Symbol, dann einige glückliche kleine Überschrift und einige, und etwas Text. Also können wir das hier in Sauerstoff auf zwei verschiedene Arten tun. Also zuerst werden wir den ersten Weg lernen, und dann werden wir den zweiten Weg lernen, nur damit Sie verstehen, was tatsächlich hier passiert. Also zuerst werden wir nur ein Symbol als eine Überschrift und dann etwas Text hinzufügen. Und dann werden wir eine der vordefinierten Module hier in Sauerstoff verwenden , die Icon-Box genannt wird. Also, was ich tun möchte, ist, dass ich ein Symbol hinzufügen möchte. Also werde ich voran gehen und wählen und, und beginnen, Symbol einzutippen. Da gehen wir. Dann werde ich eine Überschrift hinzufügen. Da gehen wir. Und dann werde ich etwas Text hinzufügen. Da gehen wir. Also natürlich, lasst uns diesen Text ändern, um vielleicht zuerst den Effekt zu ändern, damit wir wissen, worin der Text geändert wird. Also werde ich nur dieses Symbol greifen. Und wie Sie auf der linken Seite sehen können, haben wir hier einige verschiedene Einstellungen für unser Icon. So können Sie den Umriss wählen, Solid Stil oder bekannten Stil. Dann können wir die Farbe ändern. Vielleicht lassen Sie uns es ändern Turm Amöbe, lassen Sie es zu dieser Farbe ändern, obwohl eine Standardfarbe, eine der Standardfarben. Und natürlich können wir den Raum oder die Symbolgröße ändern. Also vielleicht machen wir es so, wie 442 gut sein sollte. Und dann haben wir zwei Sets zur Auswahl. So Font Awesome und lineare, lineare Symbole. Also werde ich mit Font Awesome für dieses Beispiel gehen. Und wie Sie standardmäßig sehen können, kommt es mit diesem Daumen nach oben Symbol vor, vorgetippt direkt hier. Aber wenn wir nur den Text entfernen, können Sie sehen, dass wir alle unsere Symbole hier haben. Nehmen wir also an, dass wir so etwas wie Web-Design-Services anbieten. Mal sehen, ob wir hier etwas haben, das wie Webdesign oder vielleicht Design sein würde. Gehen wir vielleicht mit diesem Kerl, diesem Desktop hier. Eigentlich lasst uns das vielleicht etwas größer machen. Da gehen wir. Dann lasst uns unsere Überschrift packen und lasst uns ein Webdesign eingeben, das Rio. Vielleicht könnten Sie das Tag so ändern, dass es Überschrift drei mag und vielleicht die Schriftgröße ein wenig auf etwas wie, mal sehen, 26 oder vielleicht 32. Das sollte in Ordnung sein. Und lasst uns einfach etwas Text von unten ausleihen, von hier unten. Die Anforderung wird es kopieren und dann wieder einfügen. Da gehen wir. Wie Sie sehen können, haben wir unser Symbol, wir haben unseren Text Überschrift bekommen, und wir haben unseren, gut einfachen Text. Aber natürlich wollen wir sicherstellen, dass alle diese Typen auf das Zentrum ausgerichtet sind. Also mit meiner Spalte einmal, wo meine erste DEF ausgewählt wurde, werde ich aus dieser horizontalen Artikelausrichtung wählen. Ich werde das Zentrum wählen. Und genau so haben wir unsere, unsere Ikone zentriert, während unsere Icon-Box, sozusagen. Natürlich könnten wir vielleicht anfangen, die Farben zu ändern, einige Texte, all diese Dinge. Wir könnten vielleicht etwas Padding oder Marge zwischen all diesen Elementen hinzufügen. Aber trotzdem müssen wir noch etwas Text hinzufügen, während dieses Symbolfeld zu unserer Mitte und der rechten Spalte. Also, wenn wir das tun, wollen wir nicht wirklich ändern, wie jeder Aspekt getrennt. Wir möchten nur, wissen Sie, Lage sein, all diese Dinge gleichzeitig zu ändern . Denn im Grunde und all diese Elemente werden auch genau gleich sein, aber definitiv sehr, sehr, sehr ähnlich. Also, bevor wir alle diese Elemente klonen und sie zu unseren restlichen Spalten hinzufügen, könnten wir Klassen zu unseren Elementen hinzufügen. Aber fangen wir an, das zu tun und die Klassen im nächsten Video zu erklären. 32. 5.3Kurse und id's: Wenn Sie ein Element in Sauerstoff auswählen, sehen Sie hier in der oberen linken Ecke, dass ihm eine Standard-ID hinzugefügt wurde. Und ID ist wie eine, wie eine ID, wie ein Name, sehr, sehr spezifisch, sehr originell und einzigartig für einen Artikel. Sie können aber auch Klassen zu Ihren Elementen hinzufügen. Also lasst uns das machen. Also werde ich einfach hier klicken. Und ich werde eine Klasse hinzufügen. Ich werde es vielleicht wie Dienste nennen, Symbol. Und ich werde auf Klasse hinzufügen klicken. Jetzt haben wir eine Klasse zu unserem Artikel hinzugefügt und eine ID zu unserem Artikel hinzugefügt. Also, was ist der Unterschied? Nun, im Grunde erlauben sowohl die Klasse als auch eine ID Ihnen, h1-Element zu stylen. Eine ID ist jedoch für jedes Element eindeutig. Sie können nur die gleichen IDs auf Ihrer, auf Ihrer Seite haben. Und Sie können die gleiche Klasse mehrere Male zu verschiedenen Elementen hinzufügen. Es ist also eine gute Idee, Klassen verwenden zu müssen, wenn Sie mehrere Elemente auf die gleiche Weise stylen möchten. Und in unserem Fall, da wir dieselben Elemente zu verschiedenen Spalten hinzufügen werden , ist es eine gute Idee, Klassen zu Ihrem, zu diesen Teilen, zu diesem Symbol, der Überschrift und dem Text hinzuzufügen. Wenn Sie also einige Aspekte unserer Elemente ändern möchten, können wir das einfach tun, indem Sie die Klasse ändern. Und all diese Änderungen werden sichtbar sein, werden in allen Instanzen dieses Elements widergespiegelt , auf das dieselbe Klasse angewendet wurde. Also, was ich tun werde, ist, dass ich die, diese Web-Design-Überschrift greifen werde . Und ich werde eine weitere Klasse hinzufügen, und es wird die Rubrik der Dienste sein. Und dann werde ich mir das hier schnappen. Und ich werde Dienste eingeben und dann Text, und ich werde die Klasse hinzufügen. Also jetzt, da, nun, sobald diese Klassen hinzugefügt wurden, können wir jetzt einfach alle diese Elemente klonen. Also werde ich das Symbol greifen, ich werde es duplizieren. Und jetzt kann ich es in meine zweite Spalte verschieben. Da gehen wir hin. Sie können sehen, dass es zu dieser Spalte hinzugefügt wurde und es immer noch dieselbe Klasse hat , die für die Überschrift gilt. So duplizieren. Schnappen Sie sich die Überschrift, ich werde sie hierher bringen. Tun Sie das Gleiche für diesen Text. Und ich werde es hier runterschieben. Und dann werde ich das Gleiche für die rechte Spalte tun. Also nochmal, duplizieren. Dann gehe ich zu Spalte drei. Also haben Sie das Symbol, wir haben die Überschrift, und ich werde es verschieben und den Text duplizieren und es hier nach unten verschieben. Natürlich müssen wir immer noch unser div greifen und alles zentriert ausrichten. Da gehen wir hin. Aber jetzt, wenn wir auf eines dieser Elemente klicken, können Sie sehen, dass wir die gleiche Klasse auf zwei unsere Elemente angewendet haben. So können Sie jetzt das Symbol ändern. Also haben wir Web-Design kann jetzt machen wir so etwas wie Logo-Design. Mal sehen, ob wir ein paar nette haben oder vielleicht nennen wir es Marke in. Also werde ich diesen Kerl einfach hier schnappen. Und lasst uns eintippen und Branding. Und dann schnappen wir uns das. Und vielleicht lassen Sie uns sagen, dass wir SEO-Services anbieten. Mal sehen, ob wir ein paar SEO haben. Weißt du, ich kann, ich meine, vielleicht lass uns Bildbearbeitung machen oder so etwas. Lasst uns dieses hier greifen, geht es nicht wirklich darum, das richtige Symbol zu finden, sondern um das Lernen und wie man Klassen zu unserem Text hinzufügt. Okay, also haben wir alle unsere Elemente hier hinzugefügt. Jetzt können wir also anfangen, mit unseren Klassen herumzuspielen und dann tatsächlich den Unterschied zwischen einem ID-Tag und einer Klasse zu sehen. Also fangen wir an, das im nächsten Video zu tun. 33. 5.4Bearbeitungkurse: Okay, wir haben die Klassen zu all unseren Elementen hinzugefügt. Lassen Sie uns nun den Unterschied zwischen der Klasse und einem Tag verstehen. Wie Sie sehen können, sind wir jetzt in unserer Klasse hinzugefügt und wir haben im Grunde die gleichen Optionen wie zuvor. Wenn wir also anfangen, dies zu ändern, können Sie sehen, dass eigentlich nichts passiert. Wir ändern die Symbolgröße, aber die Größe bleibt gleich. Also, warum passiert das? Wenn wir zu unserer ID gehen, Sie können sehen, dass wir einige Werte auf unsere angewendet bekommen, auf unser Symbol. Und es ist im Grunde, da wir all diese Elemente geklont haben , ist dieser Wert hier und hier gleich. Und wir können keine Änderungen sehen, da IDs immer Vorrang vor unseren Klassen haben, weil IDs spezifischer sind, wie wir bereits erwähnt haben. Sie haben also immer Vorrang vor Selektoren, die weniger spezifisch sind, also allgemeiner. Und in diesem Fall sind Klassen wie allgemeiner als IDs, wer auch immer, wenn wir nur diese Symbolgröße ändern, wenn Sie einfach dasselbe für diesen Kerl entfernen und dasselbe für diesen Kerl, okay. Hier ist nichts. Und lassen Sie mich, lassen Sie mich einfach die Farbe entfernen. Und lassen Sie uns alle diese Elemente entfernen. Dasselbe hier. Ich gehe zum Ausweis, entferne die Farbe und die Größe. Also jetzt, wenn wir nur sicherstellen, dass wir immer diese Klasse zuerst auswählen müssen. Und jetzt, wenn wir anfangen, die Farben hinzuzufügen, so war es diese Farbe, Ich glaube, Sie können sehen, dass alle diese, unsere Symbole ändern sich und wir können die Größe ändern, wenn wir wollen, Ich glaube, war 48 vor. Aber natürlich könnten wir die Farbe ändern, wenn wir es wollten. - Ich weiß es nicht. Vielleicht könnte es mit dieser Farbe gehen, wenn Sie wollen. Das liegt im Grunde an dir. Und wir können das gleiche für unser Webdesign tun, na ja, für unsere Überschriften. Also hat er Dienste ausgewählt. Natürlich wissen wir alle, wir müssen uns daran erinnern, dass wir hier einige Werte angewendet haben. Also werde ich alle diese Schriftgrößenattribute entfernen. Wir gehen zu den IDs wählen dann die Klasse aus. Und ich glaube, es waren 32. Da gehen wir hin. Und wir können vielleicht ein paar Abstände machen. Lassen Sie uns also etwas oberer und unterer Rand hinzufügen. Und wie zehn Pixel und zehn Pixel am unteren Rand. Da gehen wir hin. Und wenn Sie möchten, können Sie etwas über den Text ändern. Also werde ich zuerst sicherstellen, dass ich nichts auf MyText angewendet habe. Scheint hier sauber zu sein. Also können wir dann einfach unsere Klasse packen, zu vielleicht Topographie gehen, alles in der Mitte ausrichten. Vielleicht hat die Farbe in eine unserer Standardfarben geändert. Und wenn Sie wollen, können wir unsere, die, die, die Schriftgröße ändern . Wir könnten, auch hier, wenn wir wollten, wir könnten eine der Google-Schrifteinstellungen wählen, eine der Google auf dem Google-Fonds, und wir können es hier wählen. Aber ich hoffe, dass Sie die Vorstellung bekommen, was Klassen gerade machen. Sie helfen uns dabei, die Elemente zu ändern, die ähnlich sind oder ähnlich sein sollen. Grundsätzlich müssen wir auf einmal nicht, wie bei den IDs, jede Instanz unseres Inhalts ändern. Aber wir können einfach nur einige Aspekte einer bestimmten Klasse ändern. Und ja, und diese Änderung wird auf alle angewendet, alle Instanzen, alle Instanzen, die diese spezifische Klasse haben, eine Klasse, die darauf angewendet wird. So können Sie diese Icon-Boxen mit Klassen erstellen. Aber in Sauerstoff können Sie diese Icon-Boxen auch mit Icon-Box-Modulen erstellen. Also fangen wir an, das als Nächstes zu tun. 34. 5.5das Modul: Also lassen Sie uns jetzt einige weitere Dienste hier unten hinzufügen. Also, was ich tun werde, ist, dass ich diese Spalten im Grunde div greifen werde, und ich werde es duplizieren. Und vielleicht gehen wir hier runter. Vielleicht ändern wir den Namen dieser Typen. Vielleicht lasst uns diesen Kerl ändern. Machen wir es zu einer Spalte für diesen Kerl, und nennen wir diesen Kerl Spalte fünf. Und nennen wir diese Spalte, Spalte sechs. Nur damit wir wissen, dass es einfacher für uns ist zu verstehen, was vor sich geht. Also, was ich tun werde, ist, dass ich all diese Elemente entfernen werde. Wir brauchen sie nicht. Verschieben, entfernen und entfernen. Dann das gleiche für die Spalte, Spalte fünf, entfernen Sie sie. Und dann in Spalte sechs, entfernen Sie sie. Also bekam er hier nur leere, leere Säulen. Also, was ich tun werde, ist, dass ich das Icon-Box-Modul zu unserer Spalte vier hinzufügen werde. Also klicke ich auf Hinzufügen und beginne mit der Eingabe. Ich komme und wir haben diese Symbolbox hier. Und wie Sie sehen können, wissen wir einen Klick. Wir haben all diese Elemente zu unserer, zu unserer Kolumne hinzugefügt. Wenn wir es öffnen, können Sie sehen, dass wir das Symbol hier haben. Wir haben auch diese Überschrift und wir haben einen Text. Und wenn wir nur unsere Symbolbox auswählen, können Sie sehen, dass wir einige, einige Elemente haben , die wir können, dass wir in Bezug auf all diese, all diese Elemente ändern können. Also, was ich tun werde, ist zuerst, ich werde eine Klasse zu all meinen, all meinen, na ja, diesem ganzen Icon-Box-Element hinzufügen all meinen, na ja, . Also, was ich tun werde, ist, dass ich es wie eine Ikone nennen werde. Vielleicht komme ich so eine Kolumne. Es ist eine gute Idee, eine Namenskonvention zu verwenden, die für Sie sinnvoll ist. Nicht zwangsläufig Sinn für mich, aber das macht Sinn für mich. Also gehen wir hin. Ich kann mich beruhigen. So können wir jetzt einfach mit all diesen Elementen herumspielen. Also, was ich tun werde, ist, dass ich zu Layout und Abstand gehen werde. Ich gehe zur Ausrichtung, richte alles in der Mitte aus. Wir können wählen, wo dieses Symbol positioniert werden soll. Also oben, links, rechts und unten. Aber ich würde das gerne neu erstellen. Sieh mal. Einige werden nach oben gehen, was der Standardwert ist. Und lasst uns diesen Eigenraum vorher verlassen, wie er ist. Und vielleicht kann ich Platz oben, ich glaube, es waren zehn Pixel. Also lassen Sie uns zehn Pixel mit einem Leerzeichen unter und, und hatte kein Leerzeichen unter und Überschrift Leerzeichen über, Textraum. Ich glaube, wir haben es verlassen. Ich glaube nicht, dass wir etwas mit dem Abstand unseres Textils getan haben. Lassen wir es so, wie es ist. Dann gehen wir vielleicht zur Typografie und zur Typografie, zur, zu unserer Überschrift. Ich glaube, es waren 32. Lass mich schnell sehen. Lasst uns die Klasse holen, ja, 32. Also werde ich diesen Kerl schnappen und ihn ändern, um Image-Branding zu bekommen. Alice tun SEO. Warum nicht? Rakete? Vielleicht ändern wir die Schriftart auf Schriftart. Awesome, nur damit wir alles konsequent in unserem Rezite bekommen. Und mal sehen, ob wir etwas haben. Vielleicht gehen wir weiter und schnappen uns diesen Kerl. Da gehen wir. Ich glaube, dass dieser Text war, Ich denke, es war 14 Pixel. Ja, es waren 14 Pixel. Also lasst uns unsere Icon-Box packen. Topographie, Text, Schriftgröße 14 und Farbe. Dieser Typ hier. Da gehen wir. Und natürlich müssen wir die Farbe unseres Symbols ändern. Also lassen Sie mich diese Farbe ausleihen. Ich denke, wir könnten diese Farbe vielleicht zu unserer Standardfarbe hinzufügen. Also, was wir tun können, können wir einfach auf diese speichern als globale Farbe Symbol klicken . Ich werde darauf klicken. Nennen wir es. Nennen wir es das hellblaue, aus Mangel an einem besseren Begriff. Und dann können wir einfach greifen oder Ikone und diesen Kerl hier aussuchen. Und da gehen wir. Wir haben unsere, im Grunde kann ich Box erstellt. Also, was wir jetzt tun können, ist, dass wir uns dieses Icon-Dollar schnappen können. Lass mich diesen Kerl schließen. Wir können es duplizieren und in unsere Spalte fünf verschieben. Dann dupliziere es noch einmal. Und wir können diesen Kerl in unsere Spalte sechs bringen. Also, was wir jetzt tun müssen, ist, dass wir nur die Symbole und den Text ändern müssen. Aber wir auch, ich denke, wir müssen die Größe dieses Symbols ändern. Es ist auf Standard gesetzt, diese Standardeinstellung 55. Aber wenn wir nur greifen, wenn wir nur unsere Symbolbox greifen, können Sie sehen, dass es leider keinen Standardwert für unser Symbol gibt. Wir können es nicht von, von der, von dieser Ebene aus kontrollieren . Sie müssten das Symbol selbst greifen und dann die Größe ändern. Aber ich schätze, wir könnten vielleicht versuchen, diesem Kerl unsere Klasse hinzuzufügen. Also denke ich, es waren Services. Ich aktuelle, das ist dieser Typ hier und die Größe wird sich ändern. Also wieder, Service-Icon, dieser Kerl hier, Dienste-Icon und das Symbol hinzugefügt. Also lasst uns jetzt schnell unsere Icons ändern. Lassen Sie mich einfach schnell ein beliebiges Symbol greifen, vielleicht so. Und so haben wir Webdesign Brandon Imager in SEO. Was könnte das sein? Alice hat gerade diese Web-Suche genannt. Da gehen wir. Und dann schnappen wir uns diesen Kerl und lassen Sie uns ein Symbol hier ändern. Natürlich, wenn Sie wollten, Sie beim Bauen, vor allem in diesem Fall, müssen Sie kein Symbol aus, aus Sauerstoff wählen. Sie können einfach Ihr eigenes Bild hochladen, Ihr eigenes Icon und es auch verwenden. Aber in diesem Fall in diesem Icon-Box-Szenario müssen Sie in diesem Icon-Box-Szenariodie, dieses, dieses Symbol verwenden. Natürlich können Sie auch hier ein Bild hinzufügen, aber dieses Icon-Box-Modul kommt mit einem Icon wie vorinstalliert. Lass es uns so sagen. Also nochmal, ich werde dieses Symbol greifen und ich werde mich ändern, ändern, um vielleicht dieses Buch zu mögen und lassen Sie uns einfach drucken. Druck, Design Da gehen wir. Und im Grunde haben wir unsere Dienstleistungen vorbereitet. Und natürlich, lassen Sie uns sagen, dass sie vielleicht nur die Farben dieser Elemente ändern möchte . Aber Sie wollen die Klasse nicht ändern. Sie müssen nur ein Symbol greifen, stellen Sie sicher, dass Sie sich auf der ID befinden, nicht auf der Klasse, denn wenn Sie die Farbe dieses Symbols ändern würden , würden Sie alle diese Symbole beeinflussen. Also lass mich einfach zu meiner vorherigen Farbe zurückkehren. Da gehen wir. Also, wenn wir jetzt einfach auf diesen Kerl klicken, und dann wählen wir dieses Fantasy-Symbol, diese ID. Und ich werde einfach diese Farbe schnappen. Sie können sehen, dass wir nur die Farbe ändern. Wir ändern die Farbe dieser bestimmten Instanz, nicht alle dieser Elemente, die Klassen auf sie angewendet haben. Die ID ist also immer spezifischer. Also, wenn Sie nur wissen wollen, dass die Klasse erhalten bleibt, aber um sein ein kleines bisschen davon zu ändern, müssen Sie nur diese ID, nicht die Klasse selbst anvisieren . Also will ich das nicht tun. Ich werde das einfach loswerden. Und da gehen wir. Wir haben unsere Dienstleistungen Abschnitt erstellt werden. Aber natürlich müssen wir uns noch um die Reaktionsfähigkeit kümmern. Lassen Sie uns sehen, wie es auf kleineren Geräten im nächsten Video aussehen wird. 35. 5.6-Stellen du die Dienstleistungen anspornender: Also haben wir unsere Sektion erstellt. Jetzt ist es an der Zeit, es reaktionsschnell zu machen. Also werde ich tun, ich werde zu diesem Kerl hier gehen, und ich werde Page Container 1120 und darunter wählen. Es sieht irgendwie in Ordnung aus, aber wir könnten vielleicht wie die Breite dieses Textes hier ändern. Also, was ich tun werde, ist, dass ich einfach zu fortgeschrittenen Größe und Abstand gehen werde. Und machen wir vielleicht 75%. Ich schätze, das wird besser aussehen. Vielleicht lassen Sie uns einfach voran gehen und etwas Platz hinzufügen und genau hier. Mal sehen, wie es auf allen Geräten aussehen wird. Sieht so aus. Dann auf 1120 und blasen es sieht so aus. Jetzt gehen wir zu weniger als 992. Es sieht in Ordnung aus, aber wir möchten vielleicht dieses div etwas breiter machen. Also werde ich zu Advanced Größe und Abstand gehen und zu 100% gehen. Wenn wir also zu allen Geräten gehen, sieht es wie dieser Seitencontainer aus. Während 1120, sieht es so aus, weniger als 992, sieht es so aus. Und jetzt müssen diese Jungs, ich denke, wir müssen diese Elemente ändern. Also, wenn wir zu 1120 gehen, sieht das immer noch gut aus. 99 T2. An diesem Haltepunkt können wir sehen, dass diese Texte vielleicht nicht nur ein bisschen zu breit sind. Was wir also tun könnten, ist, dass wir diese zum Beispiel kleiner machen könnten, wenn Sie diese Kerle vertikal so orientieren wollen. Aber wir könnten auch dieses vorherige horizontale Layout erzwingen. Also, wenn wir unsere Spalten auswählen, können Sie sehen, dass wir diese Stapelspalten vertikal Option genau hier ausgewählt haben. Und standardmäßig können Sie sehen, dass es weniger als 992 sagt. An dieser Stelle beginnen unsere Spalten vertikal zu stapeln. Aber wenn wir wählen, wenn Sie an diesem Haltepunkt wollen, wenn wir möchten, dass unsere Symbole an diesem Haltepunkt nebeneinander gesetzt werden, können wir weniger als 768 gehen. Und wie Sie sehen können, beginnen unsere Spalten so zu aussehen. Sie werden nebeneinander gestellt. Natürlich können wir auch sehen, dass wir hier einige Probleme haben, wie dieses Stück Text nicht richtig angelegt wurde. Also könnten wir diesen Kerl schnappen und zu unseren Diensten gehen und dann die Topografieeinstellung zu zentriert ändern. Aber da wir gerade an diesem Haltepunkt sind, wird diese Änderung nur auf diesen Haltepunkt und darunter angewendet werden. Und ich möchte, dass es auf alle meine, alle meine Breakpoints angewendet wird. Also werde ich einfach loswerden und das loswerden. Und ich werde auf alle Geräte gehen. Und jetzt gehe ich los, ich gehe zur Topographie und ins Zentrum. Also jetzt, wenn wir zu weniger als 992 gehen und Kerl ist schön dort, wo er sein soll. Und ich denke auch, wir könnten vielleicht die Zeilenhöhe ändern. Aber wieder, ich werde auf alle Geräte gehen. Und für die Zeilenhöhe geben wir einfach 1.1 ein. Und dann, wenn wir zu weniger als 992 gehen, sieht es aus, es sieht viel besser aus. Nun, was wir auch tun könnten, ist, dass wir vielleicht die Größe unserer Elemente dieser Überschriften ändern wollen . Also lassen Sie uns versuchen, die Schriftgröße wie 26 oder 28. Ich schätze, das sollte gut sein. Und wir könnten vielleicht auch das Gleiche für diese Kolumne hier unten tun. Also werde ich hier unten zu Säulen gehen. Und ich werde sie vertikal unter 768 stapeln. Also hat er all diese Typen so bekommen. Da wir diese Jungs als einfache, einfache Iconboxen Module hinzufügen , haben wir sie nicht von Grund auf neu erstellt, wie diese Jungs hier, sie sehen ein bisschen anders aus. Also, wenn Sie wollen, können Sie einfach diese Spalten hier greifen. Und ich werde nur, vielleicht werde ich all diese Elemente schließen und ich werde es duplizieren. Und jetzt können wir einfach nur ändern und diese Symbole. Das ist also das, ich denke, es war ein Signalsymbol. Da gehen wir und wir können es als CEO nennen. Dann haben wir die Websuche bekommen. Nun, geben wir eine Suche ein. Dann gehen wir und ich werde eine Web-Suche eingeben. Und dann haben wir gedrucktes Design bekommen. Ich denke, es wird ein Buch oder so etwas sein. Und es wird Print-Design sein. Und dann können wir diese Säulen hier unten loswerden. Natürlich ist es alles optional, es liegt alles an Ihnen. Ich wollte es einfach halten, und ich würde es nicht, weißt du, denn das geht schneller. Aber natürlich ist es eine gute Idee, all diese Lösungen selbst zu testen. Du würdest die Symbolbox benutzen wollen. Gehen Sie voran. Wenn Sie gehen möchten, möchten Sie es wissen, erstellen Sie einfach diese Icon-Boxen von Grund auf selbst. Weißt du, das ist einfach immer eine gute Sache, eine gute Sache zu lernen. Also haben wir unsere Elemente so aussehen lassen oder jetzt sehen , wie sie aussehen werden, wenn sie auf einem kleineren Gerät sind. Ich schätze, es sieht in Ordnung aus. Und auf einem viel, viel kleineren Gerät ist es immer noch, es sieht immer noch gut aus. Also werde ich auf alle Geräte gehen. Und dann können wir vielleicht unser, unser Design im Inkognito-Modus wie gewohnt sehen . Also Firefox-Steuerung plus Shift plus P, Chrome-Steuerung plus Shift plus n anderen Browsern, Ich bin mir nicht sicher. Also haben wir unser Design so bekommen. Ich werde es nur kleiner machen, vielleicht aber kleiner als das hier. Also, jetzt gehe ich einfach runter. Wir haben unsere Dienste direkt hier. Und wenn wir anfangen, kleiner und kleiner bis zu einem bestimmten Punkt zu gehen, werden Sie sehen, dass wir es sind, dass unser Design voll und vollständig reaktionsfähig ist. Also haben wir unsere Dienstleistungen geschaffen. Jetzt können wir weiter in einer Galerie hinzufügen, eine Galerie Ihrer Bilder, Bilder Ihrer Wahl und, oder die Bilder, die Ihr Kunde S2. Also gehen wir weiter zu dem. 36. 6.1Bildmaterial: Also bin ich hier auf der pixels.com Seite. Das ist meine Go-to-Seite für kostenlose, lizenzfreie Bilder. Und was ich machen will, ist, dass ich vielleicht acht bis zehn Fotos schnappen will. Also, was wir hier tun können, ist, dass wir vielleicht nach Design suchen. Und wir haben ein paar Bilder hier. Also lass mich diesen Kerl einfach hier schnappen. Und hier in der oberen Ecke möchte ich nicht wie die ursprüngliche riesige, riesige Datei wählen. Ich schätze, wir könnten mit der großen Größe gehen. Und dann können wir, was wir tun können, können wir einfach auf kostenlosen Download klicken und einfach das Bild speichern, und dann sind wir gut zu gehen. Also, was ich jetzt tun werde, ist, dass ich genau wie acht bis zehn Fotos und ich werde sie auf meinem Computer speichern. Also habe ich meine Bilder fertig gemacht. Ich habe ihnen einige generische Namen gegeben, nur damit wir wissen, was diese Bilder präsentieren sollen. Und es ist eine gute Idee, Ihre Bilder wie aussagekräftige Namen oder zumindest Namen zu geben , die für Sie sinnvoll sind. Und auch diese Namen werden, wird standardmäßig als unsere Überlagerungstexte verwendet werden und wenn wir in die Galerie hinzufügen. Also gehen wir zu unserer Galerie. Lassen Sie uns tatsächlich zu unserer Seite gehen und beginnen, unsere Galerie hinzuzufügen. Ich schätze, ich werde diesen Text loswerden. Ich brauche es nicht. Und vielleicht werde ich diesmal die Hintergrundfarbe meines Abschnitts ändern. Lass es uns ein bisschen herausstechen. Also habe ich meinen Abschnitt ausgewählt. Lassen Sie mich einfach diese Ebenen schließen und zum erweiterten Hintergrund nach Grundfarbe gehen. Und wir werden diese dunkle Farbe hier wählen. Auch das könnten wir vielleicht etwas Text hier oben hinzufügen. Also werde ich das packen, vielleicht dieses ganze div, und ich werde es duplizieren und es nach unten auf diese Seite verschieben. Was natürlich müssen wir ändern die Farbe, so dass diese hellere Farbe und diese hellere Farbe. Und lasst uns das ändern. Unser Portfolio, nennen wir es, nennen wir es so. Und vielleicht werde ich nur dieses Stück Text entfernen, nur um es ein bisschen anders aussehen zu lassen. Also haben wir unsere, vielleicht ändern wir den Namen unserer Sektion in Portfolio. Lass uns alles gut organisiert halten. Portfolio. Also haben wir unseren, unsere Überschrift, einen Text hier unten bekommen. Jetzt ist es an der Zeit, die Galerie hinzuzufügen. Was ich also tun werde, ist, dass ich meinen Abschnitt auswählen, klicken, hinzufügen und dann GAO GA eingeben werde . Und wir haben schon unsere, unsere Galerie. Was wir jetzt tun müssen, ist, dass wir ein paar Bilder hinzufügen müssen. Also, was ich tun werde, ist, dass ich auf diesen Kerl hier klicken werde, Medienbibliothek, und klicken Sie dann auf Durchsuchen. Und wie Sie sehen können, haben wir hier nicht zu viele Bilder. Also werde ich nur meine Bilder schnappen. Ich werde sie alle auswählen und sie einfach hier verschieben und warten, bis sie hochgeladen werden. Und sobald alle diese Jungs hochgeladen sind und sie alle ausgewählt sind, ist dies eine Standard- oder Pressegalerie. Übrigens können Sie sehen, dass jeder von ihnen dieses Titelattribut direkt hier hat, dass es aus dem Dateinamen abgeholt wurde. Also, was ich tun werde, ist, ich werde einfach auf Galerie erstellen und dann Galerie einfügen. Und wir können alle unsere Bilder sehen, die hier präsentiert werden. Also, wenn wir es jetzt einfach speichern und auf unsere Seite gehen, lassen Sie mich einfach die Seite aktualisieren und gehen Sie hier runter. Sie können sehen, dass wir unsere Galerie haben. Und wenn wir auf eines der ein paar Thumbnails klicken, können Sie sehen, dass wir hier einen wirklich schönen, sauberen, sauberen und Lightbox-Effekt haben. Da gehen wir. Aber natürlich könnten wir einige Aspekte unserer Galerie ändern. Also zuerst vielleicht, lassen Sie uns einfach etwas Platz hier unten hinzufügen. Oder vielleicht schnappen wir uns diesen Kerl, so. Und wenn wir auf unsere Galerie klicken, haben wir natürlich einige, einige Optionen zur Auswahl. Diese Bild-IDs werden einfach aus unserer WordPress-Bibliothek gezogen. Wenn Sie also die Positionierung dieser Bilder ändern möchten, können Sie hier mit den IDs spielen. Also könnten wir, du könntest dich einfach nicht ändern. Sagen wir, dieser Typ wird 61 sein und dieser Typ wird 60 sein. Und dann wird sich die Position dieser Bilder ändern. Und wenn Sie keine Optionen sehen, die genau hier sind, sagt das, dass sie standardmäßig nicht aktiviert sind. So haben wir standardmäßig den Link Bilder Option eingerichtet und Leuchtkasten hinzufügen. So können wir tatsächlich sehen, dass die in der Version der Bilder gezoomt. Wir könnten auch die Miniaturansichtsauflösung ändern. Das wird all diese Jungs ändern, all diese Miniaturen hier, natürlich, abhängig von der Größe Ihrer Bilder. Aber wir könnten auch auf die Layout-Option gehen. Und Sie können sehen, dass wir hier einige Optionen haben. Wir haben den Flex, der Standard ist, der versuchen wird, alles gleich zu machen. Aber wir könnten auch die Mauerwerk-Option wählen. Und wie Sie sehen können, fängt es an, anders zu aussehen. Und wir können wählen, wie viele Artikel pro Zeile wir möchten. Also konnten wir nicht mit zehn gehen. Also werden wir eine Galerie haben, die so aussieht. Aber ich werde vielleicht mit zwei gehen. Und Sie können sehen, dass es schöner aussieht. Ich habe 1010 Bilder hinzugefügt. Also, wenn wir zu zwei Zeilen kamen, haben wir fünf Bilder in einer Spalte in diesem Fall. Und wenn Sie mit zwei Bildern pro Zeile zu flexen gehen, können Sie sehen, dass es irgendwie wie, Sie wissen, versucht, alles schön und schön zu machen. Und selbst ich denke, ich werde vorerst mit dem Mauerwerk gehen. Und lassen Sie uns vielleicht, lassen Sie mich einfach die Bilder pro Zeile ändern, um es so aussehen zu lassen. Ich denke, wir könnten vielleicht ein anderes Bild hier hinzufügen, um es aussehen zu lassen, es cool aussehen zu lassen. Aber es ist nein, es ist nur zu verstehen, was passiert. Wir könnten den Raum um den Bildwert ändern. So könnten wir zum Beispiel 50 Pixel hinzufügen, die alle diese Bilder weiter voneinander entfernt verbreiten werden. Aber ich denke, 1010 Pixel sind endgültig. Nun, die nächste Option hier sind die Beschriftungen, die im Grunde wie ein Titel unseres Bildes sein werden, den Sie überlagern können, dass Sie Ihre Bilder überlagern können. Aber ich denke, das ist etwas, das wir im nächsten Video anfangen könnten. Für den Moment, lassen Sie es uns einfach halten. In diesem Video wollte ich Ihnen nur zeigen, wie Sie eine Galerie hinzufügen können und was sind die besten Praktiken beim Hinzufügen einer einfachen Galerie? Jetzt im nächsten Video werden wir anfangen, mit unserer Galerie ein bisschen mehr herumzuspielen. 37. 6.2Bildmaterial hinzufügen: Die nächste Option in unserem Galerie-Modul ist die Untertitel-Option. Aber natürlich könnten wir die Untertitel zeigen, wenn du es wolltest. Und es wird standardmäßig eingeschaltet sein. Hier sind jedoch keine Untertitel sichtbar. Und das liegt daran, dass wir keine hinzugefügt haben, haben die Untertitel nicht zu unseren Bildern hinzugefügt. Mal sehen, wie wir das tun können. Zuerst gehe ich zu, ich gehe zurück zu meinem Admin-Panel. Ich gehe zu den Medien und klicke auf einen MA und ein Bild. Und wie Sie hier auf der rechten Seite sehen können, haben wir diese Beschriftung und das Feld genau hier. Also, was ich tun werde, ist, dass ich mir diesen Titel schnappen werde. Ich werde kopiert, eingefügt und dann zu einem anderen Bild gehen. Und ich werde, ich werde es für all diese tun, all diese Bilder, die in unserer Galerie platziert sind. Ok, also haben alle meine Bilder die Untertitel bekommen. Also, jetzt können wir tatsächlich zurück zu unserem, nun, wir können zurück gehen, um in der Galerie in Sauerstoff zu bearbeiten. Also bin ich wieder in Sauerstoff. Und gerade jetzt, wenn wir einfach auf Show-Untertitel klicken, können Sie sehen, dass, wenn wir über unsere Bilder schweben, wir tatsächlich unsere Untertitel hier unten sehen können. Und das ist das Standardverhalten, weil wir so standardmäßig, wir haben zu den Show-Beschriftungen nur auf Hover ist auf yes gesetzt. Wenn wir es wissen, werden die Untertitel immer sichtbar sein. Wenn Sie möchten, können Sie die Beschriftungen möglicherweise an einem bestimmten Haltepunkt ausblenden . Also zum Beispiel, wenn du zu gehen willst, was? Wenn Sie diese Option ändern möchten, Untertitel ausblenden, sagen wir weniger als 992. Und dann, wenn Sie zu diesem eigentlichen Haltepunkt gehen, können Sie sehen, dass Untertitel, dass die Untertitel verschwunden sind. Ich gehe zurück und ich denke, ich werde sagen, dass ich nie wollte, dass ich die Untertitel nie verstecken will, aber ich will sie nur auf Hover zeigen. Also werde ich auf „Ja“ klicken. Wenn ich also den Mauszeiger über ein Bild führe , wird diese Beschriftung sichtbar sein. Wenn Sie möchten, können Sie auch die Farbe der Beschriftung ändern, um zu wissen, dass Sie die Farbe des Textes ändern können und Sie die Farbe des Hintergrunds ändern können. Wenn Sie also den Mauszeiger über, können Sie sehen, dass diese Änderungen vorgenommen werden, wirksam werden, vielleicht lasst uns die Transparenz dieses Kerls nur ein wenig ändern, um es aussehen zu lassen, vielleicht ist das ein bisschen, das ist ein bisschen niedrig So etwas wie 56. Das sollte in Ordnung sein. Also das letzte, was wir hier ändern können, ist, wenn wir den Kopf über die Hover-Option gehen, können wir die, die Bild Deckkraft wählen , Sie können es ändern. Nehmen wir also an, dass die Bilddeckkraft, wie die Standardbilddeckkraft, etwas niedriger sein wird, sagen wir vielleicht nicht 05, sondern wie 09. Und dann wird die Deckkraft des Schwebebildes eins sein. Also, jetzt, wenn wir auf einen klicken, können Sie sehen, dass es ein vielleicht lassen Sie mich einfach ändern, das Bild der Passage, etwas noch tiefer. Und Sie können sehen, dass wir diesen schönen Schwebeeffekt haben. Ich kann diese Übergangsdauer in etwas wie wirklich lange ändern. Und Sie können sehen, dass es 1 Sekunde dauert, um von dieser 06, 0,06 Bilddeckkraft auf eins zu 100 zu gehen , Opazität wie diese. Aber ich werde es auf 0 ändern, vielleicht 0 zu, und ich werde diesen Kerl von 06285 ändern. Und dann haben wir diesen schönen, schön aussehenden Effekt bekommen. Natürlich können wir immer Kette und wir können immer überprüfen, überprüfen Sie es auf unserem Inkognito-Modus. Wenn wir also über diesen Kerl schweben, können Sie sehen, dass sich unsere Beschriftung verändert. Wir haben, wir kamen zu diesem Opazitätsübergang, der auch vor sich geht. Was wir also auch tun könnten, ist, dass wir die Anzahl oder sogar das ganze Aussehen unserer Galerie ändern könnten , wenn wir einen anderen Bruchpunkt treffen. So können wir auch die Reaktionsfähigkeit unserer Galerie verändern. Denn wenn wir in unseren Inkognito-Modus gehen, können Sie sehen, dass sich unsere Galerie standardmäßig so ändern wird. Die Bilder werden also reaktionsschnell. Aber dieses Ganze, ich schätze, dieses ganze Layout, obwohl es nicht tut, sieht nicht zu gut aus, oder? Lassen Sie uns also auf die Reaktionsfähigkeit im nächsten Video achten. 38. 6.3Responsive Galerie: Wie ich bereits im vorherigen Video erwähnt habe, können wir unsere Galerie schön reaktionsschnell machen. Also, was soll ich damit meine? Also lassen Sie uns sagen, dass an diesem Haltepunkt, ich diese Bilder nicht in drei Spalten zu setzen. Ich will, dass sie gesetzt werden, sagen wir, in zwei Spalten werde ich auch Bilder ändern, die eingegraben sind. Zwei wie das. Dann gehen wir auf die Seite Container 1120. Ich schätze, es sieht immer noch aus. In Ordnung. Gehen wir zu weniger als 992. Also lassen Sie uns sagen, dass vielleicht dieser Haltepunkt, der 992 Bruchpunkt, ich möchte nur ein Bild pro Seil sehen. Aber wie Sie sehen können, haben wir hier ein bisschen ein Problem. Diese Miniaturansichten waren oder nicht da und wurden nicht über das gesamte Ansichtsfenster direkt hier verteilt. Und das liegt daran, dass wir unsere Thumbnails zu groß gesetzt haben. Aber wenn wir zu gehen, gehen wir zu allen Geräten. Ich werde die Galerie greifen und zur thermischen Auflösung gehen. Ich werde voll gehen. Ok, also haben wir uns um unsere Thumbnails gekümmert. Was ist nun mit der Reaktionsfähigkeit selbst? Wir haben die Bilder pro Zeile auf zwei gesetzt. Aber was, wenn Sie vielleicht nur eine Reihe haben möchten? Wenn wir gehen, um weniger als 992 zu sagen. Wie diese Bilder für meine Tage zu klein aussehen, möchte ich, dass sie über das gesamte Ansichtsfenster verteilt sind. Also, was ich tun werde, ist, dass ich einfach die minimale Bildbreite so einstellen werde, dass sie 450 sagt. Jetzt geht der Browser davon aus, dass Sie Ihr Bild auf mindestens 450 Pixel in der Breite einstellen möchten. Aber sobald wir anfangen, unsere Breakpoints zu ändern, können Sie sehen, dass es immer noch gut aussieht. Und dann gehen wir zu weniger als 992. Sie können sehen, dass, da wir wollen, dass unser Bild würde gesagt, sagte dem Browser, dass wir unser Bild mindestens für eine 150 Pixel breit sein wollen. Jetzt wird dieses Bild pro Zeilennummer außer Acht gelassen. Nun ist es, wissen Sie, das Bild ist über das gesamte Ansichtsfenster verteilt und das ist dasselbe, wie es auf unseren kleineren Geräten so angewendet wird. Also, wenn wir jetzt zu unserem Browser gehen, lassen Sie mich einfach aktualisieren. Und dann, wenn wir anfangen, kleiner und kleiner zu werden, können Sie sehen, dass, sobald wir den richtigen Haltepunkt getroffen haben, dass sich das Design und das Design verändert, das Design unserer, unserer Galerie verändert, aber Natürlich funktioniert alles so, wie es funktionieren soll. Wir haben unseren Lightbox-Effekt, und da geht's. Die Galerie funktioniert einwandfrei. Natürlich gibt es andere Möglichkeiten, Ihrem Design Galerien hinzuzufügen, und wir werden einen Blick darauf werfen, eine hinzuzufügen, sobald wir ein anderes Plug-in einfach für unsere Portfolios verwenden . Aber das wird in einem der kommenden Videos sein. Für jetzt, lassen Sie uns unsere, unsere Sektion, wie es ist. Wir können nun mit dem Hinzufügen eines weiteren Abschnitts fortfahren, was eher wie ein Abschnitt über mich oder über uns wäre. Und dieser Abschnitt wird zur gleichen Zeit, volle Breite, aber in zwei gleiche Teile geteilt. Also fangen wir an, das als Nächstes zu tun. 39. 7.1Schaffen eines vollständigen Breitenabschnittes: Okay, wir haben unseren Portfoliobereich. Also vielleicht machen wir jetzt etwas wie einen, nicht wie einen Abschnitt über uns, aber nicht nur den einfachen, wie ein Bild und einen Text, so etwas. Lassen Sie uns einen Abschnitt mit voller Breite machen, der in zwei gleiche Teile unterteilt wird. Und auf der einen Seite werden wir ein Video in voller Breite haben. Nein, nur um unsere Nutzer ein bisschen mehr zu engagieren. Und auf der rechten Seite werden wir etwas Text hinzufügen. Beginnen wir also mit dem Hinzufügen eines neuen Abschnitts. Also werde ich Add drücken und dann einfach einen Abschnitt eingeben. Und wir haben hier unten eine Resektion geschaffen. Aber wie Sie sehen können, sind es einige, es war nicht gewesen, es breitet sich nicht über unsere ganze, ganze Seite aus. Wir wollen diesen Abschnitt in voller Breite machen. Also, wenn mein Abschnitt ausgewählt ist, werde ich zu Erweiterte Größe und Abstand gehen. Und hier unten können Sie diesen Abschnitt Container mit Option sehen. Also, wenn wir es öffnen, können wir h mit voller Breite oder einem benutzerdefinierten wählen, wenn wir einen, einen Wert hier eingeben wollen , aber ich möchte volle Breite machen und es wird diesen Abschnitt so verbreiten. Also, wenn ich Spalten hinzufüge und ich werde 50 mal 50 Spalten hinzufügen, können Sie sehen, dass diese Spalten sich auch über unsere ganze Seite ausbreiten, aber gleichzeitig, dass sie nicht die Ränder unseres Abschnitts berühren. Und das ist, weil unsere Sektion, die wir, nebenbei bemerkt, ich denke, wir könnten es umbenennen. Also nennen wir es über uns. So über uns. Da gehen wir, weil unser Abschnitt etwas Polsterung darauf angewendet hat. Sie können sehen, dass, wenn wir den Mauszeiger über diesen Abschnitt bewegen, dies wie eine lila, lila Farbe, lila Halo erscheint. Wenn wir es einfach loswerden, können Sie sehen, dass unsere Sanktion momentan tatsächlich Bohnenöl ist. Es berührt alle Ränder. Und wenn wir zu Größe und Abstand gehen, können Sie sehen, dass wir 0 oben und unten haben. Und lassen Sie uns 0 auf der linken Seite und 0 auf der rechten Seite hinzufügen. Und wenn Sie jetzt nur unsere Spalten greifen, so ist dies unsere linke Spalte und das ist unsere rechte Spalte. Sie können das gleiche für vielleicht zuerst tun, lassen Sie uns das gleiche für die linke tun. Und das wird unser Video sein. Also werde ich diesen Kerl einfach umbenennen, und ich werde dieses Video und dieses div auf der rechten Seite anrufen. Ich werde es nur Klartext nennen. Da gehen wir hin. Also, jetzt werden wir tatsächlich das Video auf der linken Seite hinzufügen. Und wir sind auch, na ja, wir möchten es auch voll, volle Breite machen. Also fangen wir an, das im nächsten Video zu tun. 40. 7.2Das Video hinzufügen: Um ein Video hinzuzufügen, alles, was Sie tun müssen, ist natürlich, ich werde zuerst mein div, video div auswählen. Ich gehe weiter und klicke auf „Hinzufügen“. Und dann starten Sie einfach, fängt an, Video einzutippen und einfach darauf zu klicken. Und der Sauerstoff kommt mit einem wie ein Schnuller, Dummy-Video, machen mein Logo größer Creme. Aber was wichtiger ist, ist, dass wir immer noch einige Polsterungen um unser, um unser Video sehen können . Also, wenn ich mein div, mein video-div packe , gehe ich zu erweiterten Größe und Abstand. Und obwohl wir hier 0 sehen können, können Sie sehen, dass, wenn wir anfangen, tatsächliche Nullen hinzuzufügen , dieser Wert erneut auf unser div angewendet wird. Und jetzt wird unser Video so gestellt, wie es sollte. Natürlich müssen wir es nicht wissen. Nun, es wäre keine gute Idee, ein eigenes Video einzufügen. Also, wenn wir zu unserer primären Registerkarte gehen, lassen Sie mich einfach dieses Video direkt hier, diese Video-Ebene. Sie können sehen, dass wir diese YouTube- oder Vimeo-URL direkt hier haben. Also, wenn du nur dein YouTube-Video schnappst, kannst du einfach deinen Link hier einfügen und dieses Video wird hier in unserem div erscheinen. So habe ich als Beispiel eines meiner Videos kopiert, eine meiner Video-URLs von meinem YouTube-Kanal. Und ich werde das einfach einfügen. Und wie Sie sehen können, ist schön hier in unserem gesetzt, in unserem Def. Und natürlich, wenn du willst, könntest du wie dieses Video-Seitenverhältnis ändern, wenn du das willst. Aber ich werde mit dem Standard 16 von 16 x 16 mal neun Breitbildstandard gehen. Und natürlich, wenn Sie wie ein Iframe für aus einer anderen Quelle einbetten möchten, könnten Sie das hier tun. Du könntest einfach deinen Code hier unten einfügen. So können Sie, wie Sie das Video hinzufügen können. Natürlich ist es, es ist normalerweise spielbar. Da gehen wir. Und jetzt denke ich, was wir tun könnten, ist, dass wir vielleicht einen Text hier auf der rechten Seite hinzufügen könnten , nur um vielleicht unseren Benutzern ein paar Worte über uns zu erzählen . Also fangen wir an, das im nächsten Video zu tun. 41. 7.3Den Text hinzufügen und die Reaktionsfähigkeit korrigieren: Okay, also lassen Sie uns etwas Text in unser Text-div hinzufügen. Also, was ich tun werde, ist, dass ich nur eine Überschrift hinzufügen werde. Da gehen wir. Und dann werde ich nur einen Text wie diesen hinzufügen. Natürlich, vielleicht leihe ich mir etwas von diesem Lorem ipsum aus. Da gehen wir. Ich gehe hier runter und füge das einfach ein. Vielleicht ein paar Mal, vielleicht sogar noch mehr Omega. Kopieren wir einfach dieses ganze, diesen ganzen Absatz und fügen Sie es in und schwarz zweimal ein. Das sollte in Ordnung sein. Also, was ich jetzt gerne tun möchte, ist, dass ich diese Überschrift und diesen Text wie in den Mittelpunkt meines, meines div setzen möchte. Aber zuerst, lasst uns zuerst vielleicht wie über uns eintippen. Das sollte in Ordnung sein. Und ich werde die Farbe dieses Textes ändern. Also unsere Standardfarbe, die gleiche für diesen Kerl. Natürlich könnten wir hier einige Aspekte der Texte ändern. Vielleicht könnten wir etwas Padding oder Rand zwischen dem Hadean und dem Text hinzufügen. Aber das Wichtigste, was ich hier tun möchte ist, alle diese Elemente in die Mitte zu stellen, vertikal in der Mitte. Und ich schätze, ich möchte diesen Text etwas kürzer, aber schmaler machen. Also, was dieser div-Text ausgewählt hat, gehe ich einfach zur vertikalen Elementausrichtung Mitte, um meinen Text in die Mitte zu setzen. Und so weit wie dieser Text geht, dieser Typ hier, was ich tun werde, ist, dass ich einfach zu fortgeschrittenen Größe und Abstand gehen werde. Und ich möchte die Breite auf vielleicht 75% ändern. Das sollte auf der rechten Seite sein. Es gab nur noch ein paar Dinge, die wir in Bezug auf die Art und Weise ändern konnten , wie sich dieser ganze Abschnitt verhält. Nicht nur in Bezug auf die Reaktionsfähigkeit, sondern auch in Bezug auf seine, sieht es so aus. Also, was meine ich damit? Unsere Säulen sind auf 50% in der Breite eingestellt. Dieses Video auf der linken Seite soll 50% sein und diese Textspalte ist auf 50% gesetzt. Aber das können wir natürlich noch ändern. Zum Beispiel, wenn wir dieses Video größer haben wollten, könnten wir vielleicht etwas wie 67 machen. Und unser Text-Div wird neu berechnet. Seine Breite wird neu berechnet, um in etwa so aussehen zu können. Und natürlich, wenn wir wollen, dass der Text größer ist, können wir vielleicht 60. Und dieser Kerl wird auf 40% geschrumpft werden. Und das ist etwas, das sie tun könnte. Ich überlasse es dir, wenn du es so machen willst, könntest du es tun. Sie könnten natürlich vielleicht dieses Textdiv bekommen, und wir könnten vielleicht einfach zu Größe und Abstand gehen. Und wir könnten vielleicht gerne die Polsterung so leicht erhöhen, vielleicht sogar mehr als das. Um so etwas zu tun, wissen Sie, Sie haben totale, totale Flexibilität, völlige Freiheit in Bezug auf die Anpassung der Art und Weise, wie all diese Elemente aussehen. Wenn Sie also etwas mehr Padding hinzufügen möchten, können Sie das mit etwas mehr Rand tun. Sie können dies tun, den Text ändern, die Leerzeichen zwischen diesen Elementen ändern. Vielleicht so. Sie können es sehr, sehr leicht machen. Wenn wir anfangen zu schauen, beginnen Sie mit Blick auf diesen speziellen Abschnitt, unsere volle Breite Abschnitt. Wenn wir anfangen, die Reaktionsfähigkeit zu überprüfen, können Sie sehen, dass es nicht so toll aussieht. Ich meine, wir könnten vielleicht, wenn du einen Text hier entfernen wolltest , damit er mehr oder weniger so aussieht, aber es sieht immer noch nicht aus. Ok. Was ich denke, was ich hier gerne machen würde, ist dass ich diese Jungs vertikal stapeln möchte. Also werde ich mir meine Säulen hier schnappen. Und wie Sie sehen können, haben wir die Stapelspalten vertikal Option, und im Moment ist es auf weniger als 992 gesetzt. Wenn wir also zu weniger als 992 gehen, können Sie sehen, dass diese Spalten vertikal gestapelt werden und alles gut aussieht. Aber ich denke, dass dieser besondere Effekt wie voll mit riesigen ist, ein riesiger Abschnittseffekt ist gut auf wie wirklich, wirklich großen Desktop, Desktops. Also schätze ich, ich würde diese Jungs gerne vertikal machen, beginnend mit 1120 Haltepunkt. Also meine Spalte ausgewählt, ich werde diese Option von stat coms vertikal kleiner als 992 in Seitencontainer 1120 und darunter ändern . Und wenn Sie jetzt zu diesem Bruchpunkt gehen, können Sie sehen, dass sich unser Text ändert. Und in diesem Bruchpunkt, ich denke, wir könnten vielleicht die Breite unserer Textspalten ändern, so dass wir zu Erweiterte Größe und Abstand gehen und es einfach auf 100% setzen können , um es nur ein bisschen zu machen , wenn Sie wollen. Wie Sie sehen können, haben wir diese Bilder hier und wir haben diese, dieses Video hier. Aber was wäre, wenn wir die Reihenfolge dieser Spalten ändern wollten? Also nochmal, ich werde mir die Säulen schnappen. Und Sie können sehen, dass wir diese umgekehrte Spalte Order Option hier haben, und standardmäßig ist sie auf nie gesetzt. Aber wenn wir Seite Container 1120 und unten wählen, wird sich das ändern. Also werden wir diese Typen auf die B-Seite setzen lassen, wie die größten Desktops. Aber wenn wir auf Seite Container 1120 und darunter gehen, haben wir unseren Text bekommen. Das trennt unser Portfolio und unser Video hier sehr schön. So können Sie Abschnitte mit voller Breite erstellen und wie Sie diese Abschnitte hier in Sauerstoff teilen können . Ich denke, dass wir jetzt vielleicht wollen, um etwas wie wissen, unsere Dienstleistungen in Bezug auf die Preisgestaltung zu bewegen . So könnten wir so etwas wie Preis-Box unter unserer, unter unserer vollen Breite Abschnitt tun. 42. 8.1die erste Preisliste hinzufügen: davon, ob Sie Ihre Website für sich selbst erstellen, um Ihr Unternehmen zu bewerben, oder Sie eine Website für einen Kunden erstellen, möchten Sie vielleicht einen Preisabschnitt hinzufügen. Also lasst uns das jetzt machen. Ich werde wie gewohnt beginnen, indem ich einen Abschnitt hinzufüge. Kurs. Es ist nicht unbedingt notwendig, aber es ist eine gute Produktionstechnik. Nur Nein, hält die Dinge gut organisiert. Und ich werde meinen Abschnitt umbenennen und ich werde ihn aufsteigen nennen. Da gehen wir hin. Und ich werde hinzufügen, wählen Sie eine Überschrift und etwas Text. Und vielleicht leihe ich mir etwas von diesem Text aus und füge ihn dann einfach hier unten ein. Und ich denke, ich möchte die Topographie Textausrichtung Mitte ändern, das gleiche für meine Überschriften oder erweiterte Topographie-Zentrum. Und ich werde diesen Preisbereich greifen und ich möchte alles auf das Zentrum ausrichten. Also, jetzt, da wir zu unserer Überschrift gekommen sind, lassen Sie mich vielleicht einfach so etwas wie die Kasse eingeben. Unsere Preise sind Preise. Da gehen wir hin. So können wir jetzt vielleicht wie einige Spalten hinzufügen. Ich werde Spalten hinzufügen, und ich werde drei divs innerhalb dieser Spalten hinzufügen. Also hast du 123. Und diese Spalten werden unsere Preisboxen beherbergen. Also vielleicht lassen Sie uns einen gewissen Spielraum zwischen diesen Elementen hinzufügen. Ich werde meine Spalten, erweiterte Größe und Abstand zu greifen , und dann wie 5050 Pixel. Das sollte in Ordnung sein. Also, was ich tun möchte, ist, dass ich einfach hinzufügen möchte. Also meine erste Preisbox hier in meinem ersten, dem ersten div. Also, was ich tun werde, ist, dass ich zu Hinzufügen gehen und dann Preis-Posteingang eingeben werde. Und ich werde nur darauf klicken. Und wie Sie sehen können, kommt es mit einigen vorinstallierten, ich denke, man könnte sagen, dass der Text vorinstalliert ist. Und wenn Sie auf der linken Seite schauen, haben Sie alle Elemente, die jeden Aspekt unserer Preisbox steuern. Aber wenn wir insgesamt unsere öffnen, diese gut, diese erste div, diese erste Spalte, und dann der Preis Posteingang Schicht. Sie können sehen, wir haben das Bild und die Unterseite, die irgendwie unabhängig von der Preisbox sind , weil sie auf separaten Ebenen kommen und Sie können sie separat steuern. Aber das werden wir in nur einer Sekunde erreichen. Nehmen wir also an, wir möchten unsere Web-Design-Services anbieten. Also, was ich tun werde, ist, dass ich diesen Text in Web-Design ändern werde. Da gehen wir hin. Und ich schätze, wir können nach kleinen Unternehmen gehen. Und wenn Sie die Preise hier ändern wollen, können Sie das tun. Sie können einfach Ihren Preis hier eingeben. Aber wenn wir zu unserer Preisbox Panel gehen, dieses Tool-Panel, können Sie sehen, dass wir so steuern können, dieser Preis genau hier. Wir können hinzufügen, tatsächlich klicken Sie hinein. Wir können, wir müssen es hier ändern. Sagen wir, wir wollen es von 859 beginnen . Warum nicht? Und wir können die Dezimalzahl verlassen, wie IQ, wenn Sie wollen , können Sie das Währungssymbol ändern und wir können den Begriff ändern. Also werde ich, na ja, du kannst es gerne komplett loswerden. Aber lassen Sie uns wie etwas PR eine Website eingeben. Und vielleicht lasst uns das normalerweise drei in so etwas wie eins ändern, wie tausend. - Vielleicht. Das wird sich ansehen, das wird ein bisschen besser aussehen. Und natürlich, hier unten haben wir unsere Funktionen, die wir hier in etwas wie professionelles Design eingeben können . Dann vielleicht etwas wie Logo enthalten, wenn Sie das tun wollen. Und geben wir ein kostenloses Hosting für ein Jahr ein. Da gehen wir hin. Also haben wir unsere Preisbox so erstellt. Aber natürlich würden wir auf jeden Fall einige Aspekte darüber ändern wollen. Zum Beispiel könnten wir das ändern, wie die Größe unserer, unserer Überschrift, vielleicht von diesem Kerl hier. Also ich denke, es wäre eine gute Idee, vielleicht wie eine Klasse Tower Preisbox hinzuzufügen. Nur, wissen Sie, nur um sicherzustellen, dass, wenn wir einige, einige Aspekte des Ein-Preis-Posteingangs ändern, diese Änderung sich in allen Fällen unserer Preisgestaltung widerspiegeln wird. Natürlich, wenn es das ist, was Sie tun wollen, und nehmen wir an, dass Sie das tun wollen. Also fangen wir an, das im nächsten Video zu tun. 43. 8.2Den Kurs hinzufügen: Also, wenn meine Preisbox ausgewählt ist, werde ich hierher gehen und den Namen unserer Klasse eingeben. Und es wird steigen. Lass es uns einfach so behalten. Lassen Sie es uns einfach behalten, halten Sie es einfach. Also werde ich die Klasse hinzufügen. Jetzt haben wir unsere Preisbox ausgewählt. Wir haben unsere Preisklasse hier hinzugefügt. Also vielleicht lassen Sie uns jetzt unsere Preisbox duplizieren. Und lasst uns diesen Kerl hier runter in mein zweites Div bringen. Und lassen Sie uns diesen Kerl nochmal duplizieren. Und ich werde diesen Kerl in diese dritte Spalte bringen. Nehmen wir an, wir wollen Branding für kleine Unternehmen. Und lasst uns vielleicht SEO für kleine Unternehmen tun. Und natürlich können wir die Preise hier ändern, damit wir tun können, statt 859, lassen Sie uns etwas anderes machen. Lass uns wie, ich weiß nicht, bis 99 machen. Und lassen Sie uns pro Projekt eingeben. Da gehen wir. Sagen wir, ja, wir wollen ein professionelles Design haben, aber vielleicht lassen Sie uns den Professor ändern lassen Logo auch enthalten. Kostenlose Visitenkarte, vielleicht so etwas. Visitenkarte für die Visitenkarte. Und vielleicht statt kostenloses Hosting für ein Jahr, lassen Sie uns einige zehn wie zwei Revisionen machen. Da gehen wir. Und für die SEO, vielleicht lasst uns das normal ändern. Vielleicht machen wir es wie 599. Warum nicht? Und für die SCO, lassen Sie uns normalerweise vorausdenken, nicht ändern wir diesen Preis auf, ich weiß nicht, wie 459. Und lassen Sie es uns pro Website tun. Und lasst uns diese Jungs vielleicht ändern, um die erste Seite zu mögen. Garantiert. Vielleicht wie Google und Bing. Und für die dritte, was könnten wir hier für die SEO hinzufügen, helfen Sie mir hier draußen. Lassen Sie uns kostenlose Konsultationen machen. Das wird ein bisschen generisch sein, aber hey, lass es uns so behalten. Es ist nicht, es ist nicht der Hauptzweck dieses Videos, also okay. Wir haben alle unsere, alle unsere Preise inklusive hier. Also gehen wir zu unserer Preisbox. Sie sicher, dass unsere Preisklasse tatsächlich ausgewählt ist. Ich gehe zum Titel und zwei Typografie mit dem Titel Topographie. Und wenn Sie möchten, können Sie die Schriftfamilie direkt hier ändern. Wir könnten gehen, wir könnten mit unserem Haupt- und Schriftart genau hier gehen. Und natürlich könnten wir es vielleicht nur ein großes machen, nur ein bisschen kleiner zu so 38. Dann könnten wir das Gleiche mit dem Untertitel machen. Lassen Sie uns die Schriftart so behalten, wie sie ist. Aber lass es uns kleiner machen. Etwas wie 18. Da gehen wir. Das sollte in Ordnung sein, vielleicht gehen wir jetzt zurück und überprüfen Sie den Preis, die Topographie unseres Preises. Und wie Sie sehen können, haben wir viele, viele Aspekte hier. Also lassen Sie uns mit vier Stunden gehen, gehen Sie mit Menge Haupt, wir können diesen Text hier ändern. Gehen wir mit vielleicht nur ein bisschen größer, wie 58, schätze ich. Vielleicht ändern wir den Betrag Währung in etwas, aber kleiner zu etwas wie 22. Das tue ich. Ich bin nur so, dass Sie sehen, was, wissen, welche Möglichkeiten, welche Optionen Sie hier bekommen, wenn Sie diese tun, diese Preisboxen. Und wie Sie sehen können, können wir wirklich unsere Kurse hier nutzen, nutzen, weil wir alles in einem Rutsch ändern. Sie könnten auch die Features ändern, Topographie, wir können es kleiner oder größer machen, wenn Sie möchten. Das liegt total an dir. Und wir haben vielleicht einfach wie der Text auf unserer Unterseite geändert, um so etwas wie kontaktieren Sie uns. Kontaktieren Sie uns. Da gehen wir. Dasselbe hier. Und das gleiche hier. Sie könnten vielleicht auch eine Klasse zu unserer Schaltfläche hinzufügen. Jemand ist weg und tippen Sie einfach Preis bt, n. da gehen wir. Und jetzt, wenn wir anfangen, die Farbe unserer, unseres Knopfes zu ändern , sagen wir zu unserer braunen Farbe. Und natürlich müssen wir allen unseren Schaltflächen die gleiche Klasse hinzufügen. Preis btn, und der letzte, Preis btn. Dann, wenn Sie ändern möchten, wie die Taste Hover Farbe vielleicht diese dunklere Farbe. Nur, weißt du, nur um zu sehen, wie es aussieht. Sie können sehen, dass es tatsächlich ist, es wirkt sich tatsächlich auf alle unsere Tasten. Ein weiterer wichtiger Aspekt, den Sie zur Kenntnis nehmen müssen. Sie haben nicht nur einen Button hier in der Preisbox, sondern auch ein Bild. Wenn Sie möchten, können Sie in diesem Preisfeld ein Bild auf Ihrer Überschrift hinzufügen . Aber schauen wir uns das im nächsten Video an. 44. 8.3die Bilder zu pricing hinzufügen: Also in ihm, die Preisbox Ebene, das Bild auf der Unterseite. Also innerhalb der Preisbox-Layer haben wir auch diese Bildebene hinzugefügt. Wenn wir also nur unsere Ebene auswählen, können Sie sehen, dass wir diese wie eine Dummy-URL hier haben. Dass es ist, nun, das ist nur ein Dummy-Bild von diesem Platzhalter zu ziehen. Es ist eine Website. Und wenn wir zu unserer Preisbox und dann Grafik hier gehen, können Sie sehen, dass wir zu diesem gehören Bild-Optionen. Wenn wir also auf Ja klicken, wie sich hier etwas ändert. Aber da es sich um ein Dummy-Bild handelt, können wir es jetzt nicht sehen. Aber wenn wir es speichern und dann auf unsere Website gehen, gehen wir. Wir haben unser Bild mitgeliefert. Und natürlich, wenn wir das Bild in etwas ändern, etwas anderes, werde ich einfach schnell schnappen, vielleicht dieses Logo. Gehen Sie in ausgewählte, Speichern Sie es. Gehen Sie zurück zu unserer Website, aktualisieren Sie die Seite, und Sie können sehen, dass wir unser Bild enthalten haben. Also, das ist nur etwas, das du tun könntest, wenn du es so machen willst. Wenn Sie ein weiteres Bild hinzufügen möchten, können Sie das hier nicht in Ihren Preis- und Preisfeldern tun. Aber das ist nur eine Option. Ist es nicht, es ist nicht notwendig, wenn du es nicht willst, wenn du es nicht willst. Nur um sich zu erinnern, um jetzt dieses Bild von Ihren Preisfehlern auszuschließen , weil Sie hier nicht wirklich, wie Sie sehen können, können Sie dieses Bild nicht wirklich entfernen. Sie können die Schaltfläche entfernen. Aber wenn Sie das Bild entfernen möchten, müssen Sie zur Preisbox Grafik gehen und klicken Sie einfach auf Nein. Dann speichern und dann auf unsere Website gehen. Und da gehen wir, dass dieses Bild, das Bild weg ist. Sobald wir alle diese Jungs sortiert haben, könnten wir uns um die Reaktionsfähigkeit kümmern, aber vielleicht fügen Sie einfach etwas wie eine kleine Grenze zu unserer Preisbox hinzu. Von der Registerkarte „Erweitert“ gehe ich zu Grenzen. Ich werde unsere Farbe schnappen, vielleicht dieses dunkelbraune, aber ich werde diese Transparenz ändern. Und ich will die Breite machen. Ich bin einer. Und ich möchte, dass diese Grenze solide ist. Und das wird mir nur eine, du weißt schon, ein bisschen mehr Definition geben. Ich weiß, dass wir hier kein spezifisches, spezifisches Design verfolgen. Es geht mehr darum zu lernen, wie man all diese Tools benutzt, um eine eigene Website zu erstellen. Aber wissen Sie, ich denke nur, dass es unsere Preise und Boxen nur ein bisschen mehr gibt, ein bisschen mehr Definition. Und vielleicht könnten wir auch einfach unsere Rubrik greifen. Lassen Sie mich nur sehen, wo wir hier sind, die Preise, und vielleicht könnten wir wie einen sehr, sehr sanften Hintergrund hinzufügen , wie wenn sehr, sehr hellgraue Farbe, so etwas wie F9, F9, F9. Und wenn wir es speichern, gehen Sie zu unserer Hauptseite, aktualisieren Sie das. Wir haben so etwas wie eine nette, nette Definition hier unten. Natürlich ist es nur eine Option. Du musst es nicht tun, aber weißt du, du musst wissen, wie es geht. Nun, da wir unsere Preise erstellt haben, lassen Sie uns vielleicht einige Zeugnisse erstellen. Nehmen wir an, wir wollen prahlen, mit den Ergebnissen prahlen, die wir bekommen und was unsere Gewohnheitslinien über unsere Dienstleistungen zu sagen haben. 45. 8.4die Zeugnisse hinzufügen: Ich werde anfangen, meine Testimonials zu erstellen, genau wie jedes andere Mini-Projekt in diesem Design. Also gehe ich zu Hinzufügen und füge einen Abschnitt hinzu, den ich Testimonials nennen werde . Da gehen wir. Und jetzt können wir einfach anfangen, unsere Testimonials hinzuzufügen. Lassen Sie uns also entdecken, was ein Testimonial Modul hier tun kann. Also werde ich nur ein Testimonial Modul hinzufügen. Und wie Sie sehen können, haben wir hier einige Dummy-Inhalte. Nun, ein gutes Zeugnis, denke ich, ist immer mit einem Bild, weil wir unser Zeugnis so plausibel wie möglich machen wollen . So kann ich auf eine sehr interessante Seite gehen, die diese Person nicht exist.com genannt wird. Und das ist ein Projekt, ein KI-Projekt, das nur, wenn Sie die Seite aktualisieren, erzeugt ein zufälliges Foto von jedem, naja, einer Person, die nicht existiert. Und dann, aber in unserem Fall wird es sein, es wird sein, es wird eine große Quelle für Porträtfotos von Menschen sein, die nicht wirklich existieren. Und all diese Fotos wurden von künstlicher Intelligenz generiert, was ein bisschen beängstigend ist, aber es wird tun, es wird großartig in unserem, in unserem Szenario. Ich werde nur drei dieser Bilder kopieren und sie dann für unsere Zeugnisse verwenden. Richtig. Also habe ich meine Bilder erstellt, wird heruntergeladen. Ich gehe zu meiner Zeugenaussage. Ich werde sicherstellen, dass es ausgewählt ist, und ich gehe zu Bild und dann zu durchsuchen. Und ich werde auswählen, nun, vielleicht werde ich alle meine Dateien auswählen und sie hochladen. Das sind also all diese Bilder. Ich wähle sie einfach aus und öffne sie. Und ich werde mit diesem ersten Bild gehen. Ich wähle es einfach aus, speichere es. Und mal sehen, wie es im Frontend aussieht. Das ist also unser erstes Zeugnis. Lass mich einfach zurückgehen. Sobald ich meine Seite aktualisiert habe, kannst du sehen, dass dieser Typ hier ist. Also schätze ich, was wir wieder tun könnten, ist, dass wir vielleicht wie Cloner diesen Kerl Ende hinzufügen und dann vielleicht ein paar Dinge darüber ändern könnten. Aber zuerst, wie immer, werde ich nur eine Testimonial Klasse hinzufügen. Ich werde dieses Zeugnis testen. Da gehen wir. Das ist also unsere Klasse. Und ich werde es nur ein und dann zweimal duplizieren. Natürlich hängt alles davon ab, wie Sie wollen, wie Sie Ihre Testimonials vorlegen wollen, lassen Sie es uns einfach so halten, weil ich nur schnell einige Aspekte darüber ändern möchte . Also das wird, vielleicht werde ich mit diesem Bild und dann mit dem 30-Match gehen. So Augenbrauen. Und da gehen wir. Wir haben all unsere Zeugenaussage. Testimonials werden im Grunde bereit sein. Also jetzt, da wir die Klasse ausgewählt haben. Wir könnten vielleicht zum Layout gehen und mal sehen, was wir hier haben. Wir haben das horizontale Layout und das vertikale Layout. Wie Sie sehen können, wechselt es schnell, schnell von horizontal zu vertikal. Sie könnten natürlich den Inhalt ausrichten und wir könnten sogar kontrollieren, wie dieser ganze Abschnitt, wie diese Zeugnisse auf unseren mobilen, mobilen Geräten aussehen werden. Und natürlich haben wir die Typografie. Wenn Sie also die Schriftgröße des Testimonial selbst ändern möchten, könnten Sie das tun. Wir könnten die Schriftgröße des Autors ändern. Vielleicht machen wir es nur ein bisschen größer auf so etwas wie 20. Und auch die Autoreninfo. Wir könnten vielleicht etwas tun, so etwas wie das. Und natürlich denke ich, es ist eine gute Idee, vielleicht an einem gewissen Rand zwischen in diesen Elementen. Also werde ich voran gehen und wählen wie Rand, oben und unten, wie 25. Und es gibt einen sehr interessanten und sehr wichtigen Aspekt beim Erstellen von Elementen wie diesem. Ich meine, das ist nur ein Beispiel, aber Sie können diese Technik überall auf Ihrer Seite verwenden. Nun, diese Zeugnisse sehen so aus. Sie werden vertikal so gestellt. Aber sagen Sie, dass Sie sie behalten oder horizontal ausgerichtet machen möchten. Also, anstatt nur vielleicht zu greifen, fügen Sie einige Spalten hinzu und fügen Sie dann alle Zeugnisse in ihnen, was Sie natürlich tun könnten. Du könntest dir einfach deinen Testimonials Bereich holen. Und in diesem Abschnitt könnten Sie dieses untergeordnete Elementlayout auswählen. Und standardmäßig werden alle diese untergeordneten Elemente, also alle diese Testimonial Entwickler tatsächlich vertikal gestapelt. Aber wenn wir horizontal wählen, können Sie sehen, dass diese Jungs schön nebeneinander gestellt werden. Und natürlich, wenn wir nur ein Zeugnis schnappen, stellen Sie sicher, dass unser Glas ausgewählt ist, wir gehen zu Größe und Abstand, dass wir vielleicht nur schlagen alle nur um zu machen, nur um diese Jungs ein bisschen aussehen zu lassen, ein bisschen anders. Aber natürlich, wenn das zu viel für dich ist, könnten wir auf vielleicht acht gehen, für alle gelten. Du kannst damit herumspielen. Natürlich habe ich vergessen, vielleicht so hinzuzufügen, wie einige, einige Überschriften, aber das wird einfach super, super einfach, super schnell sein . Wir können diesen Kerl einfach auf dasselbe bringen, vielleicht nicht auf die Überschrift, sondern auf den Text. Also werde ich nur duplizieren, dass es hier unten geht. Aber wie Sie sehen können, da unsere Stock-Stack-Child-Elemente horizontal Option global eingestellt ist, meine ich global auf unserem, in unserem Abschnitt, können Sie sehen, dass alle diese Elemente wie horizontal gestapelt werden und dass ist nicht wirklich das, was wir wollen. Also in diesem Fall, was wir tun könnten, ist, dass wir einfach und überprüfen, um diesen Kerl zu machen, um diese Elemente so aussehen zu lassen. Vielleicht hole ich mir einfach meine Aussage. Und was ich tun werde, ist, dass ich einfach auf diese drei kleinen Balken klicke und schnelles div wählen werde . Da gehen wir hin und legen dann all diese Zeugnisse hinein. Und wieder, was wir tun könnten, ist, dass wir untergeordnete Elemente einfach horizontal stapeln könnten , um sie so zu halten. Und natürlich möchte ich alles auf das Zentrum ausrichten. Irgendein Holzmann Zeugnis ausgewählt. Ich werde meine erste Option wählen, untergeordnete Elemente vertikal stecken und nur horizontale Ausrichtung wählen, zentrieren. Und ich schätze, wir könnten hier unten etwas Platz hinzufügen. Und vielleicht, was diese Überschrift ist, was unsere Kunden sagen. Dann gehen wir und lassen unsere Zeugnisse erstellen. Das ist natürlich nur eine Möglichkeit, es zu schaffen. Aber was wäre, wenn wir vielleicht wie ein Schieberegler unserer Zeugnisse machen wollten, nur weil wir es so machen wollen. Wir könnten es natürlich tun. Und das ist eigentlich das, was wir im nächsten Video machen werden. 46. 8.5Zeugnisse in einen Slider: Sagen wir also, wir wollen unsere Zeugnisse etwas interessanter machen , sozusagen etwas interaktiver. Also lassen Sie uns unsere Zeugnisse auf einen Schieberegler setzen. Also, was ich tun werde, ist, dass ich einen Schieberegler hinzufügen werde. Da gehen wir. Und ich werde es irgendwo unter MyText setzen. Und vielleicht werde ich einige Abstände hinzufügen. Und lassen Sie uns wie 50 Pixel Rand. Das sollte in Ordnung sein. Und als wir diese Ebene aufsummierten, können Sie sehen, dass wir die Folie 123 bekommen haben und wir tatsächlich drei Zeugnisse haben, also ist das gut. Was wir also tun können, ist, dass wir einfach ein Zeugnis schnappen,es in diese Folienebene legen, dasselbe mit der zweitenmachen und dasselbe mit der dritten machen können es in diese Folienebene legen, dasselbe mit der zweiten . Und AF klicken wir einfach auf einen dieser Pfeile. Sie können sehen, dass wir unsere Zeugnisse schön gleiten. Wir werden dieses Div nicht mehr brauchen. Aber wir könnten vielleicht einige Aspekte unserer Folien ändern, unserer Testimonials, damit sie in unserer Folie gut aussehen. Also mit meiner Folie, würde mein Zeugnis ausgewählt und mein Zeugnis Klasse aktiv. Ich gehe zum Layout. Und ich werde das Layout in vertikal ändern. Und ich werde die Inhaltsausrichtung zu zentrieren ändern. Und jetzt, wenn wir einfach anfangen könnten, auf unseren Schieberegler zu klicken, können Sie sehen, dass es sich schön ändert. Natürlich haben wir alle noch Stil unserer, unser Zeugnis. Vielleicht werde ich diese Animationsgeschwindigkeit verringern. Ich werde, vielleicht hast du die Polsterung entfernt. Vielleicht lassen Sie uns keine Punkte überlagern, aber vielleicht lassen Sie uns einfach einige Konfigurationsaspekte ändern. Vielleicht lassen Sie uns die Punkte ganz verstecken. Lassen Sie uns es Auto-Play und unendlich machen. Und 3.000 Millisekunden, denke ich, das sollte gut sein. Mal sehen, wie es im Fondant aussieht. Ich werde nur diesen Kerl auffrischen. Und da gehen wir, wir bekommen unseren Schieberegler. Und es ist, es ist, es spielt automatisch, weil das ist, was wir gesagt haben, dass es getan hat, weil wir es tun. Und da gehen wir mit unserem Schieberegler, mit unseren Zeugnissen. Also im Grunde, Sie können jeden Inhalt, den Sie wollen, innerhalb von Stunden, in Ihrem Schieberegler hier, innen, Sauerstoff, oder? Also haben wir schon unsere Testimonials Sektion bekommen. Vielleicht lassen Sie uns jetzt anfangen, unsere Fußzeile zu erstellen, weil ich denke, es ist höchste Zeit. Wir haben weitergemacht, einige dynamischere Inhalte wie unser Portfolio zu erstellen, vielleicht unser Blog, wissen Sie, Dinge wie diese, eine einzige Blog-Vorlage. Wir haben noch ziemlich viel zu tun, aber ich möchte nur, dass Sie gründlich lernen, wie Sie dieses wirklich, wirklich tolle Stück Software verwenden, um Seiten zu erstellen, gut Websites für sich selbst und für Ihre Kunden. 47. 9.1er Fußzeilen: Jetzt ist eine Fußzeile definitiv ein Teil unserer Hauptvorlage. Also haben wir unsere Kopfzeile. Das heißt, es gibt einen Teil unserer Vorlagen, so dass der Header auf jeder Seite gleich bleibt. Aber das gleiche gilt für die Fußzeile. Also gehe ich zu meinem Admin und gehe zu Sauerstoffvorlagen. Und ich werde es die Pflege-Vorlage mit Sauerstoff hinzufügen. Also bin ich in meiner Vorlage und jetzt bin ich bereit, mit dem Erstellen unserer Fußzeile zu beginnen. Aber ich habe beschlossen, dass wir es dieses Mal vielleicht ein bisschen anders machen. Ich meine, anstatt einfach alles von Grund auf neu zu bauen, lasst uns ein weiteres Merkmal hier in Sauerstoff lernen. Fügen wir einfach S1 der vordefinierten Abschnitte hinzu, die mit Sauerstoff geliefert werden. Also, was ich tun werde, ist, dass ich zu gehen, und was ich tun werde, ist, dass ich, von meinem, von meinem, von meinem Tool-Panel, werde ich Bibliothek wählen. Und hier unten haben wir entworfene Sets. Und hier sieht man, dass wir eine ganze Menge vordefiniertes Design und Sets bekommen haben. Und wenn wir jemanden von ihnen wählen, gehen wir vielleicht mit dieser hohen Periode und lassen Sie uns sehen, was das ist. Hier drin. Wir haben Sanktionen und Elemente. Und hier drin haben wir Fußzeilen. Und lassen Sie uns sagen, dass ich mag vielleicht diesen großen Komplex für wie leichte große Fußzeile oder vielleicht nur einen einfachen Fourier haben. Lassen Sie uns mit diesem großen Komplex gehen für, mal sehen, wie es aussieht. Ich werde nur darauf klicken. Und wie Sie sehen können, dass als schön bevölkert mit unseren Menüs, mit unseren Schriften, mit etwas Text. Wir haben hier unten sogar einen Hintern. Wir haben dieses Bild bekommen, das wir vielleicht in unser Bild ändern könnten. Aber natürlich, naja, es wäre eine gute Idee, zu säen. Also werde ich zu fortgeschrittenen Affekten gehen und dann gehe ich zu Filter. Und ich werde Invert wählen, wie wir es vorher getan haben. Aber natürlich, wenn du es wolltest, könntest du einfach dein eigenes Bild hier unten hinzufügen. Das wäre also einer unserer Fuller. Natürlich könnten wir mit all diesen Designs Sets herumspielen. Wir könnten ein paar Kanäle wählen. Sehen wir uns eine Seite zwei an, was auch immer das bedeutet, lassen Sie uns einige Fußzeilen finden und nicht zu viele. Lass uns mit etwas anderem gehen. Vielleicht gehen wir mit dem ersten. Mal sehen, was es bietet. Wieder, Fußzeilen, es gibt eine ganze Menge von diesen hier. Ähm, also gehen wir vielleicht mit diesem Footer Logo zentriert. Die Tatsache, dass diese Fußzeile vorgestaltet ist , bedeutet nicht, dass wir nichts daran ändern können. Also mit diesem Fußzeilen-Logo-Center-Abschnitt ausgewählt, Ich werde zu fortgeschrittenem Background gehen und werde diese Farbe loswerden. Und ich werde eine unserer Farben hinzufügen. Da gehen wir. Und wir kamen zu diesen Symbolen, sozialen Symbolen hier unten. Und sie haben auch diese atomare Hippie-blaue Farbe hinzugefügt. Wenn du es so lassen willst, kannst du es so lassen. Ich werde sie ändern. Mach eine andere blaue Farbe wie diese. Warum nicht? Und wenn ich schwebe, werde ich vielleicht diese Farbe greifen, aber auf, aber auf schweben, will ich es nur ein bisschen dunkler machen. Genau so. Wenn wir also auf unser Symbol schweben, kann ich mich ändern. Und natürlich kann jedes dieser Icons zu unseren sozialen Netzwerken führen. Also haben wir diese Symbole hier. So standardmäßig, sie nur Gamow wie facebook.com, Instagram, Twitter. Wenn Sie möchten, wollten Sie Ihr LinkedIn-Profil hinzufügen, können Sie Ihr LinkedIn-Profil direkt hier hinzufügen. Ich werde nur das Pfund-Symbol kleben. Und wie Sie sehen können, dass das LinkedIn-Symbol gleich vollständig RSS und YouTube hinzugefügt wird. Dieses ganze Modul ist übrigens das soziale Icons Modul, das Sie ganz einfach von unserem gut Tools-Panel hinzufügen können. Dieser Typ hier, die sozialen Symbole. Und natürlich haben Sie verschiedene, unterschiedliche Elemente und verschiedene Styling-Optionen bereit und warten auf uns. Aber das ist nur, weißt du, ich denke, dass dies nur eine Möglichkeit ist, schnell einige Elemente hinzuzufügen. Natürlich gilt das Gleiche für den Header. Vielleicht werde ich nur einige dieser Symbole loswerden. Vielleicht dieser Kerl und dieser Kerl, den wir verlassen können, und diese Symbole, wie sie sind. Das gleiche gilt für, für Header. Also lassen Sie uns sagen, dass ich zu Hinzufügen und Header gehen werde. Und lassen Sie mich einen davon wählen, einen der Header. Lasst uns das mitmachen. 1. Mai sein, natürlich, es sollte nicht hier, definitiv nicht hier gesetzt werden. Also lasst uns loswerden, lasst uns es hier bewegen. Und wie Sie sehen können, haben wir unsere Fußzeile bekommen, wir haben unsere Kopfzeile aus unserem Designset in nur wenigen Sekunden hinzugefügt. Wenn Sie also nicht von vorne anfangen wollen, wenn Sie nur etwas vorkonstruiertes, vorinstalliert haben wollen , können Sie das hier im Sauerstoff definitiv tun. Aber natürlich will ich diesen Kerl nicht hier unten haben. Ich will, dass es genau hier steht. Ich werde dieses Bild wieder in unser Design, gut gestaltetes Genom ändern. Was vielleicht lassen Sie uns dieses Bild loswerden. Ich werde einfach zu meinen Grundlagen zurückkehren und werde nur Text finden. Und da gehen wir. Dieser Typ hier. Und ich werde dieses Bild loswerden. Und ich werde nur tippen, während Design laotische Design, Ich werde die Schriftfamilie zu Bree Serif ändern. Ändern Sie die Textfarbe. Dort gehen wir, und erhöhen die Schriftgröße auf so etwas. Aber wie Sie in unserem Panel direkt hier auf unserem Ebenen-Panel sehen können, dieser Link, dieser Text befindet sich in einem Link-Wrapper. Dieser Link-Wrapper ist also eine Möglichkeit, Links zu Ihrem, zu Ihren Elementen hinzuzufügen. Und so lassen Sie uns sagen, dass ich möchte, Ich möchte dieses Logo, dieser Text Link zu meiner Haupt-Site-Karte, na ja, Mime Titelseite. Also könnte ich einfach die URL hier auf meiner Titelseite eingeben. Und wenn jemand auf dieses Stück Text klickt, werden sie auf unsere, unsere Titelseite geleitet werden. Lassen Sie uns sehen, wie sich unsere Fußzeile verhält. Auf kleineren Geräten. Es sollte sich richtig verhalten. Lass uns weniger als 768 runtergehen. Übrigens, wenn Sie dieses Menü auch ändern möchten, könnten wir sagen, dass es wie reaktionsschnell wird, sobald wir erreichen, einen bestimmten Haltepunkt erreichen. Nehmen wir an, wenn wir weniger als 480 erreichen, wollten wir wie ein mobiles Menü sein. Also werde ich auf Handy reaktionsschnell gehen. Und ich werde Mobile Menu wählen, schalte unter weniger als 480. Und dieses Menü wird sich zu einem mobilen Menü auf den kleinsten Geräten, auf Smartphones drehen. Es wird also so aussehen. Auf den größeren Geräten und auf den kleinsten Geräten wird so aussehen. Wenn Sie möchten, können Sie Ihre eigene Fußzeile erstellen. Und wenn Sie nur einen Blick auf die Struktur hier werfen, können Sie es sehen. Es sind nur im Grunde Spalten, genau wie wir Spalten zuvor hinzugefügt haben. Und wir haben drei div. Unsere Fußzeile wird also in drei Spalten unterteilt. Und im Inneren haben wir im Grunde wie ein Menü, einige Textstücke, einige Links, soziale Symbole. Sie könnten weitere Textstücke hinzufügen. Das ist, nein, das wäre total, total an dir. Aber was dieser Fußzeile fehlt, ist ein kleines Copyright, Copyright-Informationen , die wir hier ablegen könnten, vielleicht unter den sozialen Symbolen. Also lasst uns das im nächsten Video machen. 48. 9.2-Info hinzufügen: Also fügen wir jetzt das Copyright-Symbol hier unten unter unseren sozialen Symbolen hinzu. Aber lassen Sie uns es nicht wie Klartext mit einigen Wörtern darin machen. Aber mal sehen, machen wir es, machen wir es dynamisch und machen wir es zu einem zukünftigen Beweis. Ich meine, es ist eine gute Idee, ein extrem, extrem winziges Code-Snippet hinzuzufügen , nur um sicherzustellen, dass die Daten, die das Urheberrechtsdatum immer ist, immer aktualisiert werden. Sie müssen also nicht nach einem Jahr, zwei oder drei Jahren wieder in dieses Design zurückgehen, um nur den Urheberrechtscode zu aktualisieren. Wie, wie können wir das hier in Sauerstoff machen? Zuallererst gehe ich nur zu Google PHP-Urheberrechtscode. Und ich werde zu diesem ersten Ergebnis von CSS-Tricks gehen. Warum habe ich nun nach dem PHP-Copyright-Code gesucht? Wenn Sie es dynamisch machen möchten, wenn Sie möchten, wenn Sie möchten, dass dieser Code die Daten aus unserer Datenbank abholt, von, aus unserem System. Lassen Sie es uns so sagen. Du musst es dynamisch machen. Und für den dynamischen Inhalt wird, müssen Sie mit PHP gehen. Also, was ich tun werde, ist, dass ich dieses kleine Snippet hier kopieren werde. Ich gehe zurück zu Sauerstoff. Und hier, in meiner letzten Spalte, werde ich nur hinzufügen, und ich werde einen Codeblock eingeben. Nun, Sie müssen kein Programmierer sein, Sie müssen kein Programmierer sein. Sie müssen im Grunde nichts über Codierung wissen, damit dies funktioniert. Aber du kannst sie nicht einfach schnappen. PHP- und HTML-Tab. Entfernen Sie alles, wir brauchen es nicht, und fügen Sie einfach den Code wieder ein. Jetzt hier drin, wenn Sie es als 2008 lassen wollen, können Sie, aber vielleicht werde ich es einfach auf 2018 ändern. Das ist unser Startdatum. Und ich werde einfach Code anwenden drücken. Ich werde den Redakteur zusammenbrechen und du kannst hier nichts sehen , weil wir ein paar Dinge ändern müssen und wie haben wir es stylen können? Also gehe ich zur Typografie und ändere die Farbe in meine Standardfarben. Und da gehen wir hin. Wir haben unser Copyright, Copyright Symbol unten, hier unten. Natürlich, wenn du willst, könntest du dich ändern. Vielleicht lassen Sie uns sagen, dass wir dieses Kopiersymbol haben und lassen Sie uns Design eintippen. Wenden wir den Code an. Und Sie können sehen, dass sich die Veränderungen augenblicklich hier unten widerspiegeln. Und wieder, wir könnten vielleicht einfach greifen unsere Topografie-Einstellungen kann die Schriftgröße auf etwas wie 12 geändert werden. Und vielleicht etwas Platz in irgendeinem Rand nach oben hinzufügen. Und vielleicht lasst uns die Farbe dieses Kerls hier ändern. Lassen Sie uns eigentlich, das ist dieses Atomic, wie Sie sehen können, das stammt von unserem, aus diesem Design-Set. Also lass es uns vielleicht ein bisschen dunkler machen. Also Topographie, unsere Farben. Es könnte eine dieser Farben sein, schätze ich. Ich denke, es sieht ziemlich gut aus, also jetzt, wenn wir diesen Kerl speichern und wir zu unserer Hauptvorlage gehen, können Sie sehen, dass wir unseren, unseren Copyright-Code hier unten haben . Und wie Sie sehen können, heißt es, nun, es ist 2020, also zeigt es das richtige Datum und wenn 21 kommt, ändert sich dieses Datum automatisch, weil wir m hinzugefügt haben . Wir wussten nicht, wie gerade die Zahlen geschrieben. Wir haben den Code hinzugefügt, ein sehr einfaches Snippet. Und, weißt du, du kannst diese Kerle wirklich vergessen. Sie können nur sicher sein, dass dieser Würfel ist, dieses Datum wird immer sein, es gibt keine up-to-date. Also gehen wir hin. Wir haben unsere einfache Fußzeile. Natürlich, wenn Sie es ändern möchten, können Sie es immer ändern. Sie können ein Designer-Set wählen, Sie können, Sie können mit dieser Fußzeile verrückt werden. Aber was ich jetzt konzentrieren möchte, ist ein weiterer Teil unserer Website. So könnten wir jetzt vielleicht anfangen, unseren Blog zu erstellen. Denn lassen Sie uns sagen, dass wir einige interessante Gedanken mit unseren teilen möchten, mit unseren Nutzern, mit unseren Besuchern, oder vielleicht Ihr Kunde wird ein Blogger sein. Es ist also eine gute Idee, ein zu erstellen, um zu lernen, wie man einen Blob mit Sauerstoff erstellt. 49. 10.1die Blog-Posts hinzufügen: In den nächsten Videos werden wir unsere Blog-Seite und eine einzelne Vorlage für Blogbeiträge erstellen. Und das wird eine großartige Übung für uns sein bevor wir anfangen, unser Portfolio zu erstellen, denn wir werden schließlich lernen, wie man dynamische Inhalte hier in Sauerstoff und WordPress verwendet. Aber bevor wir damit fortfahren, müssen wir einige Inhalte haben, einige Blockinhalte auf unserer Seite. Also höre ich das Plugins-Verzeichnis. Und was ich tun werde, ist, ich werde nur ein neues Plugin hinzufügen, das Faker Press genannt wird. Und dieses Plugin wird es uns einfach erlauben, einige Dummy-Inhalte zu unserer, auf unserer Seite hinzuzufügen. Also werde ich es einfach installieren und aktivieren. Und sobald es installiert ist, gehe ich zur gefälschten Presse. Dann gehe ich zu Einstellungen. Und sobald es installiert ist, gehe ich zur gefälschten Presse und dann gehe ich zu Posten. Und im Grunde das einzige, was ich hier tun werde, ist, dass ich einfach eintippen werde, ich werde nur diese eingeben, also also drei, also wird die Mindestzahl drei sein, maximal 12 von Beiträgen. Und ich werde nur auf Generieren klicken. Und wenn es fertig ist, werde ich zu Posten gehen. Und Sie können sehen, dass wir 12345 haben. Und natürlich unsere sechste. Wie der erste Blog-Beitrag, der standardmäßig mit WordPress kommt. Aber das Problem damit ist, dass, na ja, diese Beiträge, wenn wir sie gerade hinzugefügt und hinzugefügt haben, können Sie sehen, dass sie nicht mit einem vorgestellten Bild kommen. Es gibt kein Featured Bild, und es wäre eine gute Idee, ein nur so unser Blog-Beitrag zu haben, nur damit unsere Blog-Seite tatsächlich ein bisschen interessanter aussieht, denke ich. Sobald wir mit dem Hinzufügen beginnen, wenn Sie anfangen, mit unseren verschiedenen Designs unserer Blog-Seite zu spielen , ist es eine gute Idee, einige Bilder zu sehen, um tatsächlich zu sehen, wie diese Designs aussehen. Wie Sie hier sehen können, haben wir nur eine Kategorie, die als uncategorized bezeichnet wird. Aber was wir tun wollen, ist, dass wir einige Kategorien wie k hinzufügen möchten, Nehmen wir an, Design. Und ich werde nur vielleicht Webdesign, Webdesign und vielleicht Branding bearbeiten . Lassen Sie mich einfach klicken und Branding eingeben. Und vielleicht, ich weiß nicht, gehen wir mit, gehen wir mit Print-Design. Und ich werde eine neue Kategorie hinzufügen. Und ich werde es aktualisieren. Und natürlich, was wir jetzt tun müssen, ist, einfach voran zu gehen und greifen alle unsere Beiträge und fügen Sie einfach die Änderung all diese Kategorien und Anzeigen Featured Bilder. Also, um ein vorgestelltes Bild hinzuzufügen, oder wir müssen tun, ist, einfach zu unserem Beitrag zu gehen, bearbeiten Sie den Beitrag. Ich glaube, ich werde die Uncategorized bedrängen. Ich werde nur im Grunde jedes Bild wählen, das wir hier haben. Das sollte sein, das sollte in Ordnung sein. Sobald das erledigt ist, klicke ich einfach auf Aktualisieren. Und dann werde ich dasselbe für alle verbleibenden Beiträge tun. Ich werde nur verschiedene Kategorien zu meinem Beitrag hinzufügen, und ich werde diese vorgestellten Bilder hinzufügen, richtig? Also haben wir unsere Prahlerei, wir haben unsere Kategorien. Ich habe die Ivory hinzugefügt, die vorgestellten Bilder, und ich denke, wir sind bereit zu beginnen, unsere Blog-Seite zu erstellen. 50. 10.2-Baustelle: Okay, wir haben unsere Blog-Posts, also ist es jetzt an der Zeit, unsere Beiträge tatsächlich zu unserer Blog-Seite hinzuzufügen. Was wir also tun müssen, ist eigentlich, dass wir eine Vorlage für unsere Blog-Post-Index-Seite erstellen müssen. Also, was ich tun werde, ist, dass ich zu Sauerstoff und dann Vorlagen gehen werde. Und dann werde ich eine neue Vorlage hinzufügen. Ich füge das hinzu. Ich werde dies als Blog-Beiträge nennen. Da gehen wir. Und wir könnten das Design unserer, unserer Vorlage von unserer Männer Hauptvorlage erben , wenn Sie wollten. Aber wir könnten auch wissen, einfach immer alles von Grund auf neu zu erstellen. Nehmen wir also an, wir wollen nur das gleiche wie unser Overlay-Header auf unserer Titelseite haben, damit wir es so lassen können. Und auf unserer Blog-Beitrag-Seite könnten wir eine völlig andere Kopfzeile und eine völlig andere Fußzeile haben. Also lassen Sie uns diese Hauptvorlage nicht erben. Lassen Sie uns diesen Overlay-Effekt auf unserem Zuhause lassen, indem Sie nur so, wenn Sie, wenn Sie nur eine Vorschau dieses Design auf Ihren Computern, können Sie verschiedene Aspekte dieses Designs sehen. Also werde ich es einfach als keines belassen. Und dann werde ich zu anderen gehen und dann Blogposts Index wählen. Denn wenn Sie, wenn Sie diese Vorlage auf eine bestimmte anwenden möchten, bestimmte Seite, und wir müssen diese wählen. Wo findet diese Vorlage Anwendung? Und von dieser anderen Registerkarte, wir müssen Blog-Post, diesen Index wählen. Und dann werde ich nur auf Veröffentlichung drücken. Und wenn wir zu unserer Blog-Beitrag-Seite gehen, können Sie sehen, dass wir unseren Beitrag haben, aber sie sind überhaupt nicht gestylt worden. Das sieht nicht so schön aus, oder? Und natürlich können wir hier keinen Header sehen, weil wir unser Header-Design nicht von unserer Hauptvorlage übernommen haben. Und wir können unsere Fußzeile sehen. Wir werdenfür dieses Blockposter, Indexseite und für den einzigartigen Blogbeitrag ein völlig anderes Designerstellen für dieses Blockposter, Indexseite und für den einzigartigen Blogbeitrag ein völlig anderes Design . Denn lassen Sie uns sagen, dass Sie in, dass Sie einen Blog-Beitrag zu einem Blog erstellen müssen, ein Blog für Ihren Kunden. Und wir werden das ganz von Grund auf tun. Also für jetzt haben wir einige Dummy-Inhalte hinzugefügt. Wir haben eine Vorlage hinzugefügt, Blog-Post-Index-Vorlage. Und jetzt müssen wir diese Vorlage stylen. Also fangen wir an, das im nächsten Video zu tun. 51. 10.3Kopfzeilen und einen header auf unserer Blog-Seite: Okay, wir haben unsere Beiträge, wir haben unsere Vorlage. Aber wie Sie sehen können, ist unsere Vorlage leer. Wir haben hier nichts. Und das liegt daran, dass wir uns entschieden haben, nicht von unserer Hauptvorlage zu erben und zu dünn. Und wenn wir auf unsere Blog-Seite gehen, können Sie sehen, dass die Blogs, die Blog-Beiträge angezeigt werden. Aber wir sehen eigentlich nicht so gut aus, dass wir das nicht wollen. Wir haben nicht einmal eine Kopfzeile oder wir haben keine Fußzeile und nun, wir haben hier im Grunde keine Stile, also lasst uns das jetzt beheben. Also werde ich damit beginnen, eine Kopfzeile, eine Fußzeile und vielleicht einen Abschnitt mit der Überschrift und einigen Texten hinzuzufügen . Aber anstatt nur etwas von allem von Grund auf neu zu bauen, lassen Sie uns Stunden hinzufügen. Nun, einer der Designer-Sets, also werde ich zu Bibliotheks-Design-Sets hinzufügen gehen. Und ich denke, ich werde etwas ganz Einfaches mitnehmen. Also werde ich mit diesem Atomic Abschnitt gehen und dann werde ich endlich Header. Vielleicht werde ich mit Kopfzeilen einfach zentriert gehen. Das wird also unser Header sein. Und dann werde ich einen Fußhaufen hinzufügen, der vielleicht diese zentrierte Fußzeile so ist. Natürlich können wir unser Logo ändern. Also werde ich nur dieses Bild greifen, wie Sie hier sehen können. Ich gehe zu Durchsuchen, schnapp dir unser Logo und wähle das gleiche für diesen Kerl aus, stöbern. Und da gehen wir. Wir haben unsere, wir haben unsere Logos erstellt. Und dieses Menü, glaube ich, ist komplett die, na ja, es ist das gleiche. Aber dieser hier hat ein paar, einige Dropdowns. Aber ich denke, dass wir sie hübsch gestalten können, ziemlich ähnlich. Also werde ich dieses Menü greifen und ich werde nur die Farbe meines Textes in unsere Standardfarben ändern . Und ich werde die Speisekarte unten greifen. Und ich werde das Gleiche tun. Aber vielleicht werde ich einfach auch die Schriftgröße so leicht auf so etwas wie 12 ändern. Das sollte in Ordnung sein. Und vielleicht lassen Sie uns die Höhe dieses Logos auf 20 ändern. Und für eine Stunde soziale Symbole, lasst uns die Größe ändern, vielleicht wie 18 oder vielleicht zu Wendy. Und wieder, lassen Sie uns die Hintergrundfarbe zu vielleicht dieser dunkleren Farbe ändern. Da gehen wir. Und auf einem Hover, lasst uns die Farbe in unsere braune Farbe ändern. Wenn wir also den Mauszeiger über unsere Symbole bewegen, sehen sie in etwa so aus. Jetzt könnten Sie vielleicht einige Abstandsprobleme hier beheben. Wenn wir dieses Bild greifen, lassen Sie uns sehen, ob Sie tatsächlich einige Abstände hier haben. Sie haben 12 Pixel unten. Also lasst uns vielleicht wie sechs machen. Und schauen wir uns unsere Speisekarte an. Wenn wir hier ein paar Abstände haben. Auf, lasst uns es einfach so schnappen. Und lasst uns zu 0 gehen. Und weißt du was? Lass es uns so lassen. Lassen Sie es uns einfach halten. Es ist wirklich, es geht wirklich nicht darum, die besten Kopf- und Fußzeilen der Welt für dieses Design zu erstellen, wir wollen eine Blog-Seite hinzufügen. Also, jetzt schätze ich, könnten wir vielleicht einen Abschnitt hinzufügen. Und innerhalb dieses Abschnitts lassen Sie mich es einfach zwischen unsere Kopfzeile und unsere Fußzeile setzen. In diesem Abschnitt werde ich eine Überschrift hinzufügen. Ich werde etwas Text hinzufügen. Lassen Sie uns so etwas wie Willkommen in unserem Blog eingeben. Und hier drinnen werde ich nur dieses Stück Text kopieren und es dann noch einmal einfügen, weil das in Ordnung sein sollte. Und ich möchte alles in mir selbst Bereich zentrieren. Aber ich werde diese Überschrift auch ergreifen und sie an der Mitte ausrichten. Dasselbe hier, und die Linie, die der Kerl ins Zentrum bringt. Der nächste Schritt wäre also, einen weiteren Abschnitt hinzuzufügen. Also würde ich gehen und einen Abschnitt hinzufügen. Lass uns einfach alles gut organisiert halten. Und hier drin werden wir tatsächlich unsere, unsere Blog-Beiträge hinzufügen. Wir werden ein Modul hinzufügen, mit dem wir einen Blogbeitrag hinzufügen können. So ist unser wie der Hauptteil unserer Vorlage fertig. Wir haben es sehr schnell gemacht. Also jetzt können wir tatsächlich weitergehen, um unseren Blog-Beitrag zu füllen unsere, unsere Seite mit Blogs, mit Blockbooten. Denn wenn wir zu unserer gehen, unsere Blog-Seite und ich werde nur aktualisieren, dass. Sie können sehen, dass Sie tatsächlich beginnen, unsere, unsere Blog-Seite zu bauen. Also lassen Sie uns unsere Beiträge im nächsten Video hinzufügen. 52. 10.4-Blog-Posts hinzufügen: Hier in Sauerstoff gibt es ein Modul, das für die Anzeige Ihrer Blogbeiträge verantwortlich ist. Was wir also tun könnten, ist, dass wir ein Modul hinzufügen können, das einfache Beiträge genannt wird. Und wir gehen und wie Sie sehen können, sobald wir das tun, fügen wir unsere Blogposts auf unserer Seite hinzu. Und standardmäßig zeigt WordPress eine Sache, 1010 Beiträge. Deshalb sind wir alle hier gesehen. Natürlich können wir das ändern. Also, wenn wir gehen zu, wenn wir zurück zu unserem Admin-Panel und wir gehen zu Einstellungen Lesen. Also hier haben wir diese Blog-Seiten zeigen höchstens zehn Beiträge in diesem Fall. Also lasst uns das in ändern, sagen wir vorher. Und ich werde die Änderungen speichern. Und wenn wir dann auf unsere Seite gehen und die Seite aktualisieren, können Sie sehen, dass wir gerade vier Blogposts angezeigt werden. Und wir haben diese kleine Paginierung hier unten. Wie können wir also unser Blog-Posts-Modul innerhalb des Sauerstoffs gestalten? Nun, zuerst, natürlich werde ich gehen, ich gehe zu den Vorlagen und Blogposts. Ich werde es mit Sauerstoff bearbeiten. Und vielleicht werde ich diesen Abstand einfach loswerden , weil wir hier und innerhalb dieses Abschnitts einige Abstände haben. Also unser einfaches Beitragsmodul, wie Sie sehen können, hat es einige, einige verschiedene Änderungen. Es hat also einige Aspekte, die wir ändern können. Also zuerst haben wir diese Abfrageoption direkt hier, mit der Sie diese Abfragen ändern können. Also im Grunde, welche Beiträge aus unserer Datenbank gezogen werden. So kann es Standard sein, WordPress-Abfrage, es kann benutzerdefinierte sein, so dass Sie den Post-Typ wählen können. Und wenn wir ein paar benutzerdefinierte Postdocs hätten, glauben wir, dass wir keine haben, im Moment. Wir könnten etwas filtern. So könnten wir zum Beispiel einfach wie nur bestimmte, spezifische Kategorien hinzufügen. Wie vielleicht, sagen wir, entwerfen. Wenn wir das hinzufügen und das speichern, werden wir letztendlich unser Design widersetzen. Aber ich glaube, dass alle haben, alle unsere Beiträge haben diese Kategorie. Also lassen Sie uns uncategorized sehen. Und gehen wir zu unserer Blog-Beitrag-Seite. Und wie Sie sehen können, haben wir hier nichts , weil wir nur eine Kategorie als unsere Kategorie festlegen. Und ich glaube, dass wir keinen uncategorized Post haben. Also lassen Sie uns das Druckdesign überprüfen. Und ich werde die Seite aktualisieren. Und wir haben vier von ihnen haben die Print-Designer-Kategorie. Aber wenn Sie nur bestimmte Kategorien herausfiltern möchten, können Sie, das können Sie genau hier tun. Jetzt. Wir könnten auch die Reihenfolge ändern, aber absteigend oder aufsteigend und absteigend, oder wir könnten die Reihenfolge nach Datum, Gezeiten und et cetera ordnen. Wenn wir also gerade die Seite aktualisieren, werden unsere Beiträge gefiltert oder sortiert nach, dem, nach dem Titel. Lassen Sie uns einfach voran und wählen Sie die Standardabfrage. Aber in Bezug auf, in Bezug auf das Design, diese Verwendung Preset Options ist die wichtigste. So Grit Bildstandard ist das, was Sie gerade sehen. Aber wir könnten mit jedem anderen gehen, wenn hier voreingestellt ist. Also lassen Sie uns Körnung Bild mit animierten dunklen Farbverläufen machen. Also das ist unser, das ist der Blick jetzt. Wir könnten mit Bild mit Farbverlaufsüberlappung gehen, um es so aussehen zu lassen. Oder Bild mit gerissener Rechteck-Überlappung. Also im Grunde bekommen Sie eine Menge, eine Menge Styling, Styling-Optionen genau hier. Und übrigens, wenn Sie sich fragen, wie können Sie diesen Auszug hier ändern, wo gut, das ist nicht sauerstoffabhängig. Wir können, wir können das reparieren. Also vielleicht lass uns das wirklich machen. Lasst uns vielleicht ein paar kleinere Auszüge haben. Ich gehe zurück zum Admin. Wir gehen zu meinem Boss. Und wenn Sie einen Beitrag hier auf der rechten Seite bearbeiten, sehen Sie Ihren Auszug Panel. Also, wenn ich den größten Teil dieses Textes loswerde, werde ich nur vielleicht wie drei Textzeilen verlassen. Ich werde den Beitrag aktualisieren und ich werde das gleiche mit meinen anderen Beiträgen tun. Lassen Sie uns, lassen Sie es auf zwei Textzeilen halten. Und ich gehe auf meine Seite und Sauerstoff und dann Vorlagen. Ich werde die Blogbeiträge Vorlage mit bearbeiten, mit Sauerstoff. Und wie Sie sehen können, sind meine Auszüge, Auszüge jetzt viel, viel kleiner. Natürlich, wenn Sie einen anderen, einen anderen Kurs auswählen, bin ich immer noch auf den einfachen Beiträgen. Beiträge verwenden eine dif, andere Voreinstellung. Also vielleicht gehen wir mit, lassen Sie uns mit einer Liste mit Rechtecken gehen, überlappen, überlappen zentriert. Dies ist ein ziemlich beliebtes Blog, Blog-Design. Also lasst uns, lasst uns das behalten. Also, wenn dieser Typ diese Voreinstellung aktiviert hat, könnten wir zu Stilen gehen. Und wir könnten vielleicht einige Dinge an unserem Design unserer, unseres Blocks, beide real, nicht ändern , aber vielleicht lassen Sie uns das tun. Fangen wir an, das im nächsten Video zu tun. 53. 10.5-Stand der Blog-Posts: Jetzt, da wir unsere Beiträge haben, fangen wir an, sie zu stylen. Also gehe ich zu Styles und lass uns zum Titel gehen. Also lassen Sie uns sagen, dass ich gerne die Farbe meines, meines Titels ändern möchte. Und ich werde mit vielleicht mit meiner Standardfarbe gehen, diesem Kerl hier. Und lassen Sie uns sagen, dass ich die Schriftgröße ändern möchte. Aber wie Sie sehen können, wenn wir anfangen, das zu tun , dann passiert nichts wirklich. Nun, das liegt daran, dass einige dieser, einige dieser Styling-Optionen, obwohl sie hier sind, man kann den Effekt nicht wirklich sehen und mögen, weil die Sterne, die sind, die wie manuell codiert sind oder Vorrang vor dem, was wir hier tun können. Also standardmäßig, als Beispiel, wenn wir zu Vorlagen gehen, dann Template CSS. Jetzt gibt es eine Menge Code hier, sollte aber keine Angst davor haben. Wenn Sie gerade anfangen, die Namen all dieser Klassen zu lesen, können Sie sehen, dass sie im Grunde, ich meine, sie sind ziemlich logisch benannt. Also zum Beispiel, dieser Typ hier, OCC Post Titel, Sie können sehen, dass er diese Schriftgröße hat, 1,5 m Leerzeichen. Also könnten wir entweder die Größe hier ändern. Zum Beispiel, wenn wir zu like 2.5 gehen und dann Code anwenden drücken, können Sie sehen, dass es sich tatsächlich ändert. Sie könnten jedoch auch einfach diese Schriftgröße greifen. Löschen Sie es einfach. Wenn Sie möchten, wenden Sie den Code an. Und jetzt, wenn wir zu gehen, wenn wir zurück zu unseren Stilen und dann Titel und dann Schriftgröße, wenn wir jetzt einfach wie, ich weiß nicht, 66 eingeben , können Sie sehen, dass es tatsächlich jetzt keine Änderung in unserem Titel ist. Also will ich nicht, dass es so groß ist. Lasst uns mit 46 gehen. Dies sollte, wird sie wie 42 schreiben. Das sollte gut sein. Ich werde es retten. Also lass mich diesen Kerl kurz verstecken. Das wäre also unser Titel. Und natürlich können wir, Sie können es größer machen, Sie können es kleiner und kleiner machen. Das wird jetzt völlig überlassen. Aber was ist hier am wichtigsten ist, dass manchmal, wenn Sie die Änderung nicht sehen, wenn Sie wie die Anpassung einiger Aspekte Ihres Blog-Posts real sind, das ist wahrscheinlich, weil Sie, Sie, Sie werden mögen, überprüfen Sie den Code selbst, um diese spezifische, spezifische Änderung vorzunehmen. Als nächstes bekamen wir Metadaten. Und mal sehen, ob wir die Schriftgröße hier ändern können. Machen wir 36. Nicht wirklich. Aber können wir die Farbe ändern? Lasst uns es in Autonomie ändern. Dieser Typ hier. Nun, wir können diese Angelegenheit hier ändern. Dies Ihr Design, der Autor, Name des Autors. Vielleicht machen wir es so hellgrau. Vielleicht. Vielleicht gehen wir mit diesem Grauen. Und wieder können wir sehen, um die Größe zu ändern, wenn wir wollen, ich werde wieder gehen, Vorlagen, CSS. Und das ist dieser Typ hier. Ich werde das nur löschen, den Code anwenden. Und dann, wenn wir nur aktualisieren, dass, wenn wir zu unseren einfachen Beiträge Stile Mehta gehen, Wir können jetzt die Schriftgröße unserer ändern, unserer Meta-Metadaten. Aber natürlich will ich nicht, dass es so groß ist. 16 ist immer noch zu groß. Mal sehen, zehn. Oder 12. So, wie Sie sehen können, ist dies nein, es gibt nichts zu erschrecken, wenn Sie keine, irgendwelche Änderungen, wirksam werden sehen . Und Sie sollten nicht wirklich Angst vor dem Code haben, den Sie gerade gesehen haben. Alle diese Klassen sind wirklich logisch benannt. Und wissen Sie, es geht nur darum, etwas zu finden, das logisch klingt, das höchstwahrscheinlich für Veränderungen in einigen Aspekten verantwortlich ist, die Sie hier sehen. Lassen Sie uns jetzt sehen, was wir gegen den Inhalt tun können. Mal sehen, ob wir die Schriftgröße ändern können. Wir können die Schriftgröße hier ändern. Also lasst uns einfach wie 14 machen. Das sollte in Ordnung sein. Ich werde mit meiner Standardfarbe gehen. Und dann lassen Sie uns die Read More überprüfen. So, wie Sie sehen können, kann es ein Knopf sein oder es kann nur ein einfacher Link sein. Also lassen Sie uns die Textfarbe ändern, um vielleicht unsere braune Farbe. Warum nicht? Wir werden keine Box auf der Schriftgröße verwenden. Lass es uns ein bisschen größer machen. Und da gehen wir. Wir haben im Grunde das Design unseres Blogs geändert, Blog-Post real. Aber natürlich, wissen Sie, es könnte einige Änderungen geben, die Sie implementieren möchten, aber sie sind hier in den Stilen nicht verfügbar. Zum Beispiel, diese Daten tun Datum Schaltfläche direkt hier, oder vielleicht wie der Hintergrund. Und wenn Sie diese Optionen nicht direkt hier sehen können, müssen Sie nur zu dieser Vorlage gehen, CSS. Und zum Beispiel, lassen Sie uns sagen, dass Sie wie diese Schaltfläche hier ändern möchten. Und Sie können sehen, dass das hier dieser Typ ist. Ok, nehmen Sie an, Bilddatumsüberlagerung und das ist dieses Datum, das überlagert wird. Und Sie können sehen, dass wir haben, wir haben die Position, wir haben die oben und rechts und Schriftgröße Wert. Nehmen wir an, dass Sie die Schriftgröße ändern möchten. Lassen Sie uns so tun, dass Sie die Änderung weniger wie 26 Pixel sehen können. Und dann werde ich einfach Code anwenden drücken. Und dann können Sie sehen, dass sich unser Datum ändert und jetzt ist es viel, viel zu groß, aber, wissen Sie, es funktioniert. Also werde ich zu meinem vorherigen, vorherigen Wert zurückkehren. Lassen Sie uns so etwas wie 0,9 m Leerzeichen machen. Und ich werde den Code anwenden, um diese Daten so aussehen zu lassen. Sie können auch die Hintergrundfarbe ändern, wenn Sie möchten. Also werde ich mir diesen Kerl vielleicht ausgeliehen. Und ich werde nur etwas Einfaches wie lesen, vielleicht eintippen und den Code anwenden. Und Sie können sehen, dass es überprüft wurde und sich verändert hat. Oder wir könnten mich wie gelb kollidieren. Mal sehen. Und lassen Sie uns den Code anwenden. Und wie Sie sehen können, ändern sich diese Farben augenblicklich. Und die Namen dieser Farben sind im Grunde einfache SS-, SS-, SSS-Namen. Wenn Sie nur nach CSS-Farbnamen suchen, lassen Sie uns nach diesem suchen. Wir können in vielleicht wie W3-Schulen gehen. Und Sie können sehen, dass wir alle unsere Farben haben, die, wissen Sie, wenn Sie Xcode nicht lernen wollen, also wollen Sie nicht die Hex-Codes verwenden. Sie können diese Namen verwenden. Sagen wir, ich weiß nicht, lasst uns so gehen, wie du bist, anstatt hellgelb, Lasst uns tun, wie wir waren. Wenden Sie Code an und diese Farbe ändert sich. Ich werde zu meinem ursprünglichen Design zurückkehren, das ich zuvor kopiert habe. Und da gehen wir. Wenn Sie nun all diese Änderungen beibehalten möchten, Sie Ihre Voreinstellung speichern. Also lass uns das sehen. Nehmen wir an, ich möchte es ändern, da ich meine Blog-Voreinstellung nicht kenne und ich werde es speichern, weil jetzt, wenn wir versucht haben, nicht nur einige andere Presets zu verwenden, lassen Sie uns mit diesem gehen. Und dann werden wir dann wissen wir, dass wir entschieden haben, ja, ich denke, ich bevorzuge eins. Also gehen wir einfach zu MyBlock Preset. Und wie Sie sehen können, haben wir unsere, unser Blog, Blog-Preset richtig funktioniert. Und natürlich, wenn wir auf unsere Hauptseite gehen, aktualisieren Sie diesen Kerl. Sie können sehen, dass wir unsere Blog-Beiträge, Blog-Seite bereit haben. Aber was ist, wenn wir auf einen dieser Beiträge klicken, einen dieser Beiträge? Sie können sehen, dass, ja, wir haben den Inhalt, aber dieser Inhalt, es ist nicht richtig gestylt worden. Also, wie können wir das beheben? Nun, wir müssten einfach unsere einzelne Beitragsvorlage dafür erstellen. Und das ist es, was wir im nächsten Video anfangen werden. 54. 10.6-Zufügung: Okay, wir haben unsere Blog-Seite, erstellt, unsere Blog echte Pager erstellt. Aber was, wenn wir sehen wollen? Was ist, wenn Sie einen der Blog-Beiträge lesen möchten? Wenn wir also nur unsere Adresse schnappen, gehe ich wie gewohnt in unseren Inkognito-Modus. Und ich werde, und bloggen. Und ich werde auf eines dieser klicken. Sie können das sehen, nun, es ist nicht das, was Sie wollen. Das ist nicht das, was wir sehen wollen. Ich meine, dieser Inhalt dieses spezifischen Beitrags wird ausgegeben, aber er wurde nicht gestylt. Und deshalb müssen wir einen Blog, einen einzigen Blog erstellen , eine Vorlage veröffentlichen. Also, was ich tun werde, ist, dass ich zu Sauerstoffvorlagen gehen werde. Ich werde eine neue Vorlage hinzufügen und ich werde es Einzelpost nennen. Und ich werde Singular wählen. In der Welt tut diese Vorlage Anwendung. Und ich werde alle Beitragstypen auswählen und ich werde dies veröffentlichen. Und wenn wir mit Sauerstoff bearbeiten, werden wir in der Lage sein, unsere Vorlage zu stylen, aber wie Sie sehen können, ist es nur eine leere Seite. Wir haben nichts. Und ich möchte die gleiche Fußzeile und die gleiche Kopfzeile haben wie im Fall unserer Blogpost Vorlage. Also, wenn Sie diesen Entwurf nicht von Ihrer zuvor erstellten Vorlage erben möchten, aber Sie möchten einige Teile davon verwenden. Hier ist, was du tun könntest. Sie könnten zu Sauerstoff-Vorlagen gehen und dann haben wir diese Vorlage direkt hier, Blog-Posts. Und ich werde es mit Sauerstoff bearbeiten. Und hier drinnen werde ich zu meiner Struktur gehen. Und ich werde auf diesen Header klicken, weil ich ihn wiederverwenden möchte. Und wenn wir dieses Menü drücken, werde ich auf diese Option machen wiederverwendbare Option klicken. Und ich werde es Blas-Header nennen. Dann gehen wir. Und dann gehe ich zu meiner Fußzeile. Dieser Typ hier. Ich werde das tun. Ich werde auf machen wiederverwendbar klicken. Und ich werde es Blog-Fußzeile nennen und klicken Sie auf OK. Ich werde es retten, weil ich es gerne oft sagen. Und ich gehe zurück zu meinem Admin-Panel. Ich gehe voran und wähle Vorlagen aus. Und wie Sie sehen können, haben wir diese beiden wiederverwendbaren Teile hier, die wir auch mit Sauerstoff hinzufügen könnten, aber das ist nicht das, was wir tun wollen. Wir möchten unsere einzelnen Beitragsvorlagen bearbeiten. Ich werde Editieren mit Sauerstoff treffen. Und dieses Mal werde ich Add wählen. Und hier unten können Sie diesen Teil sehen. Und das sagt, wiederverwendbar. Wenn wir darauf klicken, haben wir unsere Blog-Fußzeile und unseren Blog-Header bekommen. Ich werde darauf klicken. Und ich werde Single wählen, da wir editierbar verwenden könnten, was unsere wiederverwendbaren Teile bearbeitbar machen würde , wenn Sie es ändern möchten, aber ich möchte es nicht ändern. Ich möchte es nur auf meine Seite setzen. Und dann werde ich dann ein weiteres hinzufügen, Block Fußzeile und Single. Und da gehen wir hin. Wir haben unseren wiederverwendbaren Pfosten. Diese wiederverwendbare Fußzeile, könnten wir vielleicht seinen Namen ändern, lassen Sie es einfach in Footer umbenennen. Das brauche ich nicht. Und für die Kopfzeile werde ich diesen Kerl auch umbenennen. Und ich werde es Header nennen. Und im Grunde haben wir unsere wiederverwendbaren Teile bekommen. Also haben wir, wir haben unsere Kopfzeile und unsere Fußzeile aus unserer vorherigen Vorlage ausgeliehen. Und das ist nur eine andere Möglichkeit, Teile anderer Vorlagen zu entleihen. Wenn Sie Ihre Vorlage nicht vollständig auf einer Vorlage basieren möchten, die Sie zuvor erstellt haben. Also haben wir unsere Kopfzeile, wir haben unsere Fußzeile. Jetzt ist es an der Zeit, die Blogbeiträge jetzt zwischen unserer Kopfzeile und unserer Fußzeile hinzuzufügen . Also gehen wir weiter zu dem. 55. 10.7-Hauptelemente hinzufügen: Also werde ich wie gewohnt beginnen, indem ich einen Abschnitt hinzufüge. Also werde ich nur in Abschnitt tippen und ich werde einen hier setzen. Jetzt denke ich, dass das Design, für das wir gehen, wird auf wie zwei Spalten auf der linken Seite basieren, wir werden unser vorgestelltes Bild sehen, unsere Überschrift, die Steuer auf die Metadaten und all die Dinge, die in der Regel für eine einzelne, einfache, einzelne Blogposts. Und auf der rechten Seite werden wir vielleicht wie einige Autoren-Bio hinzufügen, vielleicht wie die neuesten Beiträge oder Dinge wie das könnten einige Tags oder Kategorien sein. Das übliche Blog, Blog-Beiträge Zeug. Also in diesem Abschnitt werde ich Spalten hinzufügen. Und lass uns vielleicht mit gehen, lass mich an Omega denken. Beginnen wir mit nur zwei Spalten, wie 60-40. Aber vielleicht ändern wir die Größe vielleicht wie Arno, 65, 35-40 denken. Oder vielleicht sogar 67. Lasst es uns 67 behalten. Dieser Typ wird 333 sein. Also werde ich dieses div nennen. Lassen Sie mich diesen Kerl wie Blog-Post nennen. Und rechts rufe ich diesen Kerl Sidebar an. Das wird unsere Seitenleiste sein. Da gehen wir. Bevor wir also anfangen, hier etwas hinzuzufügen, müssen wir eine Sache verstehen. Der Inhalt, den wir hier hinzufügen werden, wird nicht wie kein Inhalt aus jedem einzelnen Blog-Beitrag sein. Damit es funktioniert, müssen wir die dynamischen Daten verwenden. Also im Grunde werden wir Sauerstoff sagen, nur eine bestimmte Bits von Informationen aus der Datenbank zu importieren und es dynamisch zu tun. Und je nachdem, welche Art oder Post wir posten, möchten wir eine Vorschau darauf anzeigen, dass bestimmte Inhalte aus der Datenbank gezogen werden. Also, was wir tun können, ist zuerst, natürlich, ich werde auf diese Ebene mit dem Blog-Post klicken. Und wir wollen wie, Hey, machen wir uns wie ein Bild. Und dann lasst uns einen Blogbeitrag Titel machen. Und dann lassen Sie uns einige Metadaten machen und dann Blog-Post-Inhalte. Also werde ich tun, was ich tun werde, ist, dass ich nach einem Bild suchen werde. Und wir könnten, natürlich, nein, wenn Sie es statisch machen wollten, wir könnten einfach ein Bild hinzufügen. Lassen Sie mich es einfach speichern und auffrischen, weil Sauerstoff mir manchmal nicht wirklich die Bilder zeigen will. Also könnten wir ein Bild wie dieses haben, aber wir wollen es dynamisch machen. Also, anstatt nur auf den Browser zu klicken und dann ein Bild hinzuzufügen, werde ich es einfach loswerden. Ich werde es loswerden. Und ich werde auf diese Schaltfläche „Daten“ klicken. Und hier können Sie sehen, dass wir diesen Beitrag vorgestellt Bild Option direkt hier. Und wenn wir darauf klicken, könnten wir einige spezifische, spezifische Werte für unsere Größe auswählen . Ich werde nur den Einsatz drücken. Ich werde das retten. Und lassen Sie uns eine Vorschau unserer Beiträge wählen, vielleicht diesen. Und da gehst du hin. Wir haben ein empfohlenes Bild. Wenn wir eine Vorschau auf einen anderen anzeigen , wird sich dieses Bild ändern. So haben wir unser vorgestelltes Bild. Nun lassen Sie uns einen Titel hinzufügen. Also werde ich eine Überschrift hinzufügen. Dann gehen wir und hier rein, und wir werden in Doppelklick auf diese Überschrift gehen. Und hier oben können Sie sehen, dass wir dieses Insert-Datenfeld bekommen haben. Also werde ich darauf klicken. Und das wird unser Post-Titel sein. Also werde ich darauf klicken. Und wir wollen es nicht verknüpfen, weil dies bereits in unserem Beitrag Titel ist, also wollen wir nicht zu einem anderen Beitrag verlinken, einige weg, Ich klicke auf Einfügen. Und wie Sie sehen können, wird dieser Titel aus unserer Datenbank gezogen. Und natürlich können wir es so vermitteln, wie Sie, wie wir es wollen. Lassen Sie uns eine Klasse hinzufügen. Also nennen wir es Post Titel. Da gehen wir. Und vielleicht erhöhen wir die Schriftgröße nur ein wenig. Etwas wie 42. Sollte in Ordnung sein. 42 gehen, um die Änderung des Tags von H1 zu H2 zu überprüfen. Und vielleicht lassen Sie uns zur Typografie gehen und spielen mit Zeilenhöhe sind in der Regel mit einem beginnen. Und dann lassen Sie uns 1.1 oder vielleicht sogar zwei auf der rechten Seite versuchen. Das sollte sein, das sollte in Ordnung sein. Und natürlich, sobald wir Preview und unsere, unsere Beiträge starten , können Sie sehen, dass sich dieser Titel ändert. Das vorgestellte Bild ändert sich. Alles sieht so aus, wie es sollte. Natürlich, Vielleicht könnten wir etwas Platz hinzufügen. Menschlicher Krankenwagen gehen mit, sagen wir mit zehn Pixeln Rand oder 20 Pixel Rand. Und vielleicht machen wir das Gleiche für oben und unten, denn jetzt, Adnan, unten, werden wir einige wie Meta-Metadaten hinzufügen, aber fangen wir an, das im nächsten Video zu tun. 56. 10.8Den Beitrag hinzufügen: Also werde ich schnappen, ich werde etwas schnappen, lass uns einfach voran gehen und einfach einfachen Text verwenden. Ich werde darauf klicken. Und wieder werde ich drinnen klicken. Und ich werde fortfahren und Daten einfügen wählen. Und lassen Sie uns vielleicht wählen, vielleicht Autorenname. Lass es uns so machen. Ich werde das einfügen. Und ich werde das retten. Das ist also unser Autor hier. Aber natürlich, was wir tun könnten, ist, dass wir vielleicht schreiben oder geschrieben von. Lassen Sie uns von gepostet tun. Und da gehen wir. Wenn wir das nur speichern, können Sie sehen, dass nur diese dynamischen Daten aus der Datenbank gezogen wurden , damit der Name meines Autors ist und wir können einfach alles zur Seite hinzufügen. Und natürlich könnten wir das auch stylen. Also vielleicht werde ich eine Klasse hinzufügen. Nennen wir es Post Meta. Meta. Da gehen wir. Und vielleicht lassen Sie uns ändern, die Schriftgröße ist so etwas wie 12. Und die Textfarbe, vielleicht lassen Sie uns mit etwas hellgrauer Farbe gehen. Da gehen wir. Und vielleicht könnten wir auch wie ein Date auf der Seite hinzufügen. Also werde ich nur, dass ich den Kerl duplizieren werde. Und wieder, klicken Sie hinein. Und vielleicht geben wir dieses Mal ein, dieses Mal geben wir etwas ein, wie es von Ihrem Design gepostet wird. Und dann gehen wir und dieses Mal statt dieses, anstatt dieses Sauerstoffdaten-Autors, wählen wir einen anderen, einen anderen dynamischen Datenwert. Also gehe ich zu Daten einfügen, und lass uns einfach Datum wählen und einfügen. Und wie Sie sehen können, werden diese Daten reflektiert. Hier reflektiert. Ich denke, ich habe eine Klammer für viele. Und da gehen wir. Wir haben uns am 20. September 2020 von einem rühmt. Aber natürlich, diese Jungs, ich denke, dass sie nebeneinander sein sollten. Was wir also tun könnten, ist, dass wir unseren ersten Text packen könnten. Das ist unser, unser Autorenname. Und ich werde auf dieses Menü klicken und ich werde es mit div umwickeln. Also, dann werde ich mein Date nehmen und es in dieses div stecken. Und das wird es uns ermöglichen, dieses div zu grep und die Positionierung der Informationsstücke zu steuern , die in diesem div platziert werden. Also, was ich tun werde, ist, dass ich stapeluntergeordnete Elemente horizontal von meinen Layout-untergeordneten Elementen auswählen werde . Wenn wir darauf klicken, können Sie sehen, dass dies und diese Jungs Sidebar Seite an Seite gehen. Und wieder werde ich zu meiner Klasse gehen und mit Seite1-Abstand gehen und vielleicht ein bisschen Randraum nach rechts hinzufügen. Und da gehen wir. Wir haben unsere Metadaten hier. Und jetzt ist das cool, dass wir hier neben unseren dynamischen Daten verschiedene Elemente hinzufügen können. Zum Beispiel, wenn wir unser div greifen und hinzufügen wählen, lassen Sie uns ein Symbol wählen. Da gehen wir. Und suchen wir ein Symbol. Vielleicht wird das einfach wie ein Mensch wie dieser Typ sein. Und lassen Sie uns es kleiner machen, wie 12 Pixel, kann 14 sein, vielleicht 16. Und lasst uns die Farbe ändern. Aber ich erinnere mich nicht wirklich an die Farbe, die atomargrau war. Also lasst uns unsere Ikone schnappen. Und für die Farbe, lasst uns mit der Zeit gehen. Glauben Sie, das war dieser Typ oder vielleicht dieser Kerl. Das ist, was zwei, großartig. Okay. Ich möchte nicht zu viel Zeit damit verbringen, diese Farbe zu wählen. Ja, ich glaube, diese atomare, atomare Traube. Und ich werde das bewegen. Ich komme den ganzen Weg nach vorne. Da gehen wir. Und dann werde ich heiraten, ich werde es einfach duplizieren. Und ich werde es hier runterbringen, also ist es genau hier. Und dann neben diesem September-Text. Und vielleicht werde ich diesen EINEN einfach loswerden. Text. Da gehen wir. Und ich werde dieses Symbol ändern. Versuchen wir, etwas wie einen Kalender zu finden. Mal sehen, ob wir das hier haben. Wir haben was, wir haben etwas Zeit. Vielleicht gehen wir mit diesem Uhr-Symbol. Da gehen wir. Und vielleicht werde ich mir einfach meinen Text schnappen. Ich will, ich will diese Klasse anvisieren. Und ich werde auch einige Abstände auf der linken Seite hinzufügen. Und wenn ich mein div jetzt schnappe, können Sie sehen, dass die, diese, diese Symbole und der Text, dass sie nicht richtig ausgerichtet wurden, ich möchte sie an den Absendern ausrichten. Also, wenn wir vertikale Ausrichtung Mitte wählen, können Sie sehen, dass diese Symbole direkt an Ort und Stelle erscheinen. So können wir, wir haben vollständige, vollständige Flexibilität, wenn es darum geht, unsere Vorlage und in diesem Fall unsere Metadaten-Box zu erstellen . Der nächste Schritt wäre also nur, wie ein tatsächlicher, tatsächlicher Inhalt hinzuzufügen. Also, was ich tun werde, ist, dass ich Text hinzufügen werde. Da gehen wir. Und wieder, ich werde nur doppelklicken, Daten einfügen und Inhalte posten. Und wir werden das retten. Und wie Sie sehen können, wird mein Inhalt direkt ausgegeben, direkt hier drin, in Sauerstoff. Aber natürlich ist es eine gute Idee, es dorthin zu bringen, wo es hingehen muss. Also werde ich es hier nicht sagen. Und wir könnten es vielleicht etwas stylen. Also wieder, ich werde eine Klasse Umfrage Inhalt erstellen. Und lassen Sie uns vielleicht etwas Polsterung zu diesem Kerl hinzufügen. Nicht zu viel, vielleicht wie 12 Pixel herum. Das sollte gut sein. Und natürlich, wenn Sie wollen, können Sie den Text hier drinnen ändern. Sie können es so gestalten, wie Sie wollen. Aber, weißt du, das ist, das wird völlig von dir überlassen sein. Was ich tun will, ist, dass ich diesen Kerl retten will, diese Vorlage. Und ich gehe auf meine Seite. Und wie Sie sehen können, ist meine Prahlerei schön, schön hier dargestellt. Und natürlich, wenn ich auf meine Blog-Seite gehe und auf einen dieser Jungs klicke, diese Vorlage wird, wird auf alle meine zugewiesen, alle meine Beiträge. Und ich muss mir keine Sorgen mehr machen, zumindest im Hinblick auf das Hinzufügen meiner dynamischen, dynamischen Daten. Also lassen Sie uns jetzt unsere dynamischen Daten üben. Kümmern wir uns um den Cyber. Lassen Sie uns einige Informationen über den Blog-Besitzer hinzufügen. Und lassen Sie uns einige Kategorien hinzufügen. Kann einige unähnliche neueste Beiträge sein. All diese Dinge, die wir mit dynamischen Daten hier in Sauerstoff tun können. 57. 10.9er Autor: Im Moment beginnen wir, unsere Sidebar zu erstellen und beginnen wir mit dem Hinzufügen eines Knotens wie eine Bio, Bio-Entzündung. Also werde ich ein Bild und einen Text neben hinzufügen. Also werde ich mir ein Bild Module schnappen. Ich werde das Bild bearbeiten. Da gehen wir hin. Und ich werde meine Mediathek durchsuchen. Lass mich, Mami, ich werde nur dieses Bild wählen. Ich wähle es aus. Und nochmal, ich werde es speichern und meine Seite aktualisieren. Und lassen Sie uns einen Text in der Vorschau sehen. Und dieses Bild ist viel zu groß. Mal sehen, vielleicht etwa 75 oder vielleicht 100. Das wäre in Ordnung. Und was ich tun will, ist, dass ich etwas Text auf der Seite hinzufügen möchte. Also werde ich den Text hinzufügen. Aber wie Sie sehen können, wurde es unter unser, unser Bild gestellt. Also lass mich einfach ein paar Lorem Ipsum schnappen. Da gehen wir hin. Lasst uns einfach etwas davon schnappen. Und ich werde diese M einfügen, das sollte genug sein. Vielleicht lassen Sie uns nur und ein Leerzeichen. Also, wie kann man dieses Stück Text tatsächlich nach rechts schweben lassen? Was ich tun würde, ist, dass ich dieses Bild greifen würde und ich es mit einem div umwickeln würde, diesen Text in dieses div einfügen würde. Und mit dem div-Silikat, wird diese Ebene ausgewählt, würde ich einfach stapeluntergeordnete Elemente horizontal auswählen. Und natürlich könnten wir vielleicht einige Inhalte hinzufügen, wie die, ich weiß nicht, hi, ich bin Jenny. Lasst uns gehen. Lass es uns so machen. Und wir könnten diesen Inhalt vielleicht ein wenig zur Seite bringen. Also würde dieses Textmodul ausgewählt, Ich werde zu Erweiterte Größe und Abstand gehen und ich werde einige Rand auf der linken Seite wie zehn Pixel hinzufügen. Das sollte in Ordnung sein. Jetzt noch eine andere, denke ich, wichtige Sache zu verstehen, wenn Sie Teile von Inhalten wie das erstellen , ist, dass, wenn Sie dann einige, einige Steuern wie in einem Textmodul sind , Sie immer noch einfach Stil manipulieren können, nur ein Stück dieses Textes, ohne irgendein anderes, irgendein anderes Modul hinzuzufügen. Also zum Beispiel, wenn ich dieses Hi habe, bin ich Jenny, ein Stück Text. Dieser Typ hier. Lassen Sie mich einfach das erste Hallo eingeben, bin ich. Jenny. Was wir tun könnten, ist, dass wir einfach dieses Stück Text auswählen und diese Span-Komponente auswählen könnten . Also gerade jetzt, wenn wir zu unserem Text gehen, können Sie sehen, dass wir eine andere Ebene namens span haben. Und was wir tun könnten, könnten wir einfach dieses einzelne Stück Text ändern, während wir in einem größeren Textmodul sind. So könnten wir tun, wir könnten die Textfarbe ändern, Sie könnten diesen Text ändern, Textgröße. Lass mich vielleicht zur Typografie gehen. Wir könnten vielleicht eine Zeilenhöhe wieder in Richtung 1.1 ändern. Und wir können es vielleicht in Großbuchstaben umwandeln, einfach so , was uns machen würde, die Schriftgröße nur ein bisschen kleiner auf so etwas wie 20. Das sollte in Ordnung sein. Und wir könnten das sogar packen, diesen Absatzraum hier entfernen. Aber wenn wir zu unserer Spanne gehen, können wir die Größe und den Abstand ergreifen und wir können diese Größe leicht manipulieren, diese Margenlücke zwischen diesen Textstücken. Also, wann immer Sie wollen und nur ein Stück Text in einem Text stylen, können Sie einfach dieses Stück Text auswählen und diese Span-Komponente direkt hier verwenden. Nun, da wir unsere Bio-Info-Setup haben, wollen wir vielleicht anfangen, einige weitere Komponenten hier unten hinzuzufügen. Vielleicht wie einige neueste Beiträge oder Kategorien, all diese Standard-Sidebar-Dinge. 58. 10.10Die 10.10Add hinzufügen: Also lasst uns anfangen, unsere Sidebar zu vervollständigen, kann zuerst mit einigen Social-Media-Symbolen sein. Wie wir wollen, dass die Nutzer unserem Blog-Autor auf Social-Media-Plattformen folgen. Aber ich denke, es wäre eine gute Idee, eine Art Überschrift vor unseren Symbolen zu haben , die es sagen könnte, wie folgt mir oder so etwas. Also lasst uns das machen. Also zuerst werde ich eine Überschrift hinzufügen und ich werde zu dem Tag wechseln, um vielleicht H3 zu mögen. Und ich werde etwas eingeben, wie kommt mir folgen. Da gehen wir. Aber ich denke, es könnte eine gute Idee sein, die Dinge gut organisiert zu halten. Ich meine, um die Dinge konsistent zu halten, vielleicht wie diese Spanne hier, könnte diese Überschrift die gleiche sein wie diese. Lasst uns mal sehen, wie wir das tun können. Ich denke, die beste Idee wäre, eine Klasse hinzuzufügen. Aber da wir bereits einige Optionen, einige Selektoren hier für diese Spanne und für diese ID hinzugefügt haben, müssten wir normalerweise alle diese Werte wie die Schriftgröße, Zeilenhöhe, die Farbe dieses Großbuchstaben, Einstellung, all diese Dinge, und fügen Sie sie dann einfach zu einer Klasse hinzu. Aber was wir auch tun könnten, ist, dass wir einfach alle Werte kopieren, die unserem zugewiesen sind, auf unsere ID in diesem Fall, und verschieben Sie sie über. Mal sehen, wie das funktionieren würde. Also lassen Sie uns sagen, dass wir diese Schriftart auf diese Anzeige Bree Serif Schriftart ändern möchten. Und lassen Sie uns vielleicht die Zeilenhöhe auf 1,1 setzen. So wie das. Vielleicht erhöhen wir den Abstand auf 1010 Pixel. Im Moment sind also alle unsere Werte einer ID zugeordnet. Lassen Sie uns also eine Klasse erstellen, die wie Sidebar Heading aufgerufen wird, so. Und natürlich, gerade jetzt, wenn wir in dieser Klasse sind, haben wir im Grunde keine Werte angewendet, die ihr zugewiesen sind. Also, was ich tun werde, ist, dass ich mir das schnappen werde. Ich werde dieses Panel hier öffnen und ich werde Kopierstile in einen anderen Selektor wählen. Also werde ich darauf klicken. Und dann werde ich auf dieses Symbol klicken direkt hier der Sidebar Überschrift, die Stile hier kopieren sagt. Und jetzt werden alle diese Werte in meine, in meine Klasse kopiert. Also, was wir jetzt tun könnten, ist, dass wir all diese Elemente hier loswerden könnten. So die Typografie, Typographiewerte zum Beispiel, oder der Rand. Was wir tun könnten, ist, dass wir einfach wieder dieses Panel öffnen und wählen Sie Öl alle Stile aus diesem Selektor löschen. Ja, ich möchte all diese Stile löschen, weil ich sie auf meine Klasse angewendet habe. Und wenn ich nur speichern und meine Seite aktualisieren, können Sie sehen, dass ich meine bekam, Ich habe meinen Stern, all diese Stile, dank meiner Klasse, angewendet. Vielleicht werde ich nur das Schriftgewicht zwei ändern , weil ich mir ziemlich sicher bin , dass dieses Schriftgewicht größer sein wird als dieses. Also jetzt, wenn wir nur diese Sidebar Überschrift Klasse zu unserer Sidebar hinzufügen, können Sie sehen, dass es schön hier reflektiert wurde. Ich denke, wir könnten vielleicht einige Abstände zwischen diesen beiden Elementen hinzufügen. Also werde ich diesen Kerl hier runterziehen. Und jetzt könnten wir die tatsächlichen Social-Media-Symbole unter unserer Überschrift hinzufügen . Was wir tun könnten, ist, dass wir nur ein einfaches Modul namens Social Icons hinzufügen könnten. Da gehen wir. Aber um ehrlich zu sein, ich bin nicht der größte Fan dieser Icons hier. Also werde ich nur dieses Modul löschen und ich Ihnen eine andere Art zeigen, Symbole hinzuzufügen , wie die sozialen Symbole hier. Also, was ich tun werde, ist, dass ich einfach ein Symbol wie dieses hinzufügen werde. Und lassen Sie mich einfach diesen Kerl entfernen , lasst uns Facebook eingeben. Das hier. Und ich denke, an dieser Stelle wäre es eine gute Idee, unseren Eigen eine Klasse hinzuzufügen. Also werde ich die Größe und die Farbe loswerden. Und jetzt können wir eine Klasse hinzufügen, nennen wir es als Seitensymbol. Und wir können die Größe ändern, mal sehen, 3-6 verteilten ankommenden Raum um Symbol. Lass uns zehn sehen. Lassen Sie uns vielleicht die Farbe ändern, um diese graue Farbe. Warum nicht? Nun, da wir all diese Attribute auf unsere Klasse angewendet haben, wenn wir dieses Symbol nur duplizieren, werden natürlich all diese Elemente diesem Symbol zugewiesen und alles, was wir tun müssen, ist, das Symbol zu ändern, sagen wir, Twitter. Vielleicht das hier. Und wie Sie sehen können, dass das Symbol jetzt ist, na ja, es hat alle die gleichen Werte wie unser vorheriges Symbol. Aber wir möchten grundsätzlich in der Lage sein, auf unser eigen zu klicken. Bevor ich das tue, bevor ich mein erstes Symbol klone, werde ich es mit einem Link umschließen. Was wir also tun können, wenn all dieses Symbol aktiv ist, gehe ich zu meinem ToolPak Tools Panel, und ich werde auf diesen Link Einstellungen klicken. Wenn wir darauf klicken, werden Sie diese Einfügen bearbeiten Link Option sehen. Und im Moment werde ich nur die Hashtags und das Symbol, ein Pfund-Symbol, eingeben , nur um es zu einem Linkplatzhalter zu machen. Und ich werde auf Link hinzufügen klicken. Und jetzt können Sie in meinem Ebenenbedienfeld sehen, dass ich diesen Link Wrapper mit einem Symbol habe, in dem ich darin sitzen kann. Lassen Sie mich einfach eine Vorschau wieder einen normalen, normalen Beitrag. Und jetzt können wir tatsächlich einen, diesen ganzen Link Wrapper duplizieren und wieder das Symbol ändern. Also lassen Sie es uns nennen. Geben wir Twitter ein, vielleicht dieses Symbol. Und natürlich müssen wir diese Typen nebeneinander stellen, aber wir wissen schon, wie es geht. Also werde ich nur diesen ersten Link Wrapper mit einem div umwickeln. Und legen Sie diesen zweiten Link Wrapper hinein und machen Sie alle diese untergeordneten Elemente horizontal stapeln. Also denke ich, das Letzte wäre, vielleicht die Symbolfarbe beim Hover zu ändern. Und lassen Sie uns sagen, dass wir die Hover-Farbe mit der Markenfarbe übereinstimmen möchten. Also, was ich tun würde, ist, dass ich ein Symbol greifen und sicherstellen würde, dass ich nicht auf der, auf der, auf der, auf der Klasse. Und ich würde die ID auswählen. Und jetzt würde ich hier auf diese Zustandsoption klicken , die mir erlauben wird, wie das zu imitieren, das Styling, wenn zum Beispiel mein Symbol hubbard ist. Also, wenn ich auf diese Hover-Option klicken, wenn wir jetzt ändern diese Farbe mehr wie eine Art und Weise Facebook-Kragen, was wäre ich denke, eine Art bläuliche Farbe. Vielleicht lasst uns so etwas machen. Das sollte richtig sein? Und jetzt, wenn ich zurück zu meinem ursprünglichen Zustand, wenn ich den Mauszeiger über dieses Symbol, können Sie sehen, dass es tatsächlich ändert sich in seiner, seiner Farbe. Und wir können dasselbe für unser Twitter-Symbol tun. Also wieder, ein ID-Zustand und dann schweben. Und für die Farbe Nicholas, nur diese blaue Farbe, ich schätze, es ist Twitter wie Twitter und ich verstehe, ich werde zum Original gehen. Und Sie können sehen, dass sich diese Farbe ändert. Vielleicht werde ich hinzufügen, Ich werde ein Symbol auswählen und die Klasse auswählen. Vielleicht werde ich so etwas wie einen Rand auf der rechten Seite wählen und zehn Pixel blinken, oder vielleicht fünf. Das sollte genug sein. Und im Grunde, alles, was wir jetzt tun müssen, ist, einfach unseren Link Wrapper zu duplizieren. Und vielleicht noch ein Mal. Duplizieren. Und lasst uns dieses Symbol ändern, um vielleicht Instagram zu mögen. Da gehen wir. Und das letzte Symbol, lasst uns es vielleicht auf YouTube ändern. Vielleicht diese Ikone. Und natürlich, weniger als vergessen, dass wir diesen Hover-Zustand kopiert haben. Also für die YouTube-Farbe, lassen Sie uns die Hover-Farbe ändern. Vielleicht diese rote Farbe, y naught, oder vielleicht diese rote Farbe. Und für das Instagram-Symbol, lassen Sie uns die Hover-Farbe von diesem Blau zu tatsächlich vielleicht diese, vielleicht diese rosa Farbe so ändern . Wenn ein Benutzer also über unsere Symbole schwebt, diese Anrufer, die mehr oder weniger real repräsentieren entsprechen diese Anrufer, die mehr oder weniger real repräsentieren, den Markenfarben all dieser sozialen Medien, der Social-Media-Plattformen. Und natürlich, wenn Sie wollen, können Sie mit der Größe all dieser Symbole herumspielen. Sie können kleiner sein. Allerdings kann die Marge größer sein, wie vielleicht 15. Das wird einfach total sein, total bis zu dir wer? Da wir eine Klasse zu unseren Icons hinzugefügt haben, können Sie einfach, wirklich einfach steuern. Und im Grunde alle, alle Aspekte unserer, unserer Artikel. Also, jetzt könnten wir vielleicht tatsächlich weitergehen, wie einige wissen neueste Beiträge hier unter dem Follow me und vielleicht ein Suchsymbol oben drauf hinzuzufügen . Also gehen wir weiter zu dem. 59. 10.11Die neuesten Beiträge hinzufügen: Lassen Sie uns jetzt vielleicht ein Suchformular hinzufügen, bevor wir unsere neuesten Beiträge hinzufügen. So ist das so einfach wie nur auf Hinzufügen und dann Suchformular, das wir gehen. Und wie Sie sehen können, haben wir einige grundlegende, grundlegende, wirklich grundlegende Optionen, die Sie für Ihr Suchfeld festlegen können. Ich werde die Senden-Schaltfläche von diesem ändern. Dieses sehr dunkel, dunkel, dunkelgrau, vielleicht etwas heller wie mein Grau. Vielleicht das hier oder vielleicht das hier. Und vielleicht lassen Sie uns einfach einige Abstände Lebensdauer autonom wie 25. Oder vielleicht ist das ein bisschen zu sehr wie 15 nach oben und unten. Jetzt könnten wir einfach unsere Überschrift duplizieren. Lasst uns diesen Typen duplizieren und ihn unter unsere Suchfirma legen. Und nennen wir es neuestes. Und ich werde diesen Kerl retten. Natürlich, wenn Sie wollten, könnten Sie vielleicht das Suchformular greifen und es hier runterbringen, oder vielleicht einfach diese Überschrift duplizieren und dann vielleicht dieses Suchformular nach oben verschieben und diese Suchseite aufrufen. Das wird völlig überlassen, ganz bei dir. Jetzt ist es also an der Zeit, diese neuesten Beiträge hinzuzufügen. Also, was ich tun werde, ist, dass ich mein einfaches Beitragsmodul hinzufügen werde. Und es wäre eine gute Idee, es unter meine Überschrift zu bewegen. Und wie Sie standardmäßig sehen können, sieht es mehr oder weniger so aus. Wenn wir diesen Kerl retten, sieht es im Grunde so aus. Also, was wir tun können, ist, dass wir unser einfaches Post-Modul greifen können. Und vielleicht gehen wir zuerst zu unserer Anfrage. Und anstelle der Standardoption, lassen Sie uns eine benutzerdefinierte Abfrage verwenden. Und was ich tun will, ist, dass ich die Reihenfolge ändern will. Ich möchte es nach Datum bestellen, und ich will es absteigen lassen. Meine neuesten Beiträge werden also als erste angezeigt. Und ich werde die Zählung in ändern, sagen wir vielleicht nur die Repos. Ich möchte nicht, dass mehr als drei Beiträge in meinem neuesten Beitragsmodul angezeigt werden. Also, wenn wir das speichern, können Sie sehen, dass wir tatsächlich drei Beiträge sind schön bestellt, aber sie betrachten schrecklich, schrecklich falsch. Also lasst uns das ändern. Ich werde wieder zu meinen einfachen Beiträgen gehen und ich werde zu meinen Presets gehen. Und lassen Sie uns eine Liste mit vielleicht wie ein Bild auf der linken Seite wählen. Und lassen Sie uns diesen Kerl retten. Und vielleicht lassen Sie uns auch den Titel ändern, psi font-size auf vielleicht 18, und ändern Sie die Farbe in meine dunklere Farbe wie diese. Und ich werde es einfach retten. Jetzt, wenn wir nur unsere Seite aktualisieren, haben wir unsere Angebote direkt hier, dass Sie sich daran erinnern müssen, dass, wenn Sie Ihre Voreinstellung hier unten ändern, diese Kundenanfrage verloren gehen könnte. Sie müssen also nur den gesamten Prozess wiederholen. Auch hier funktioniert es nicht so, wenn Sie nur die Stile ändern, aber wenn Sie die gesamte Voreinstellung ändern, könnte sich das ändern. Nun, was wir tun könnten, ist, dass wir Veränderungen mögen oder die Auszüge, wie Sie sehen können, wie dieser Auszug viel zu groß ist. Also werde ich das einfach ändern. Und wir werden zu meinen Posten gehen. Und zu meinem, zu meinem Posten. Ich werde es nur diesen Kerl hinzufügen und von meinem aus einem Auszug hören. Ich werde nur wählen, diese Kerle rausschneiden, löschen, ihnen wieder gegenüberstehen. Und wenn wir zurück zu unserer Seite gehen, können Sie sehen, dass entsorgt sieht viel, viel schöner. Aber ich denke, dass wir vielleicht einige dieser Elemente loswerden wollen. Zum Beispiel, ich glaube nicht, dass wir diesen Namen des Autors brauchen. Ich glaube nicht, dass wir diesen Read More Button brauchen. Also, wie könnten wir das tun? Vielleicht könnten wir sogar den Experten-Auszug ganz loswerden und dann einfach den Read More Button verlassen. Wir haben absolute Flexibilität, wenn es darum geht, diese Aspekte zu ändern. Aber wir müssen mögen, nicht wie codiert oder Zellen, aber entfernen Sie einfach einige Stücke, die sehr, sehr logisch sind und es gibt nichts, vor dem man Angst haben kann. Also fangen wir an, das im nächsten Video zu tun. 60. 10.12Die Struktur um die neuesten Posts anzupassen: Also, was wir tun müssen, ist, dass wir einfach unsere einfachen Beiträge greifen müssen. Und dass, wenn wir zu Vorlagen gehen, haben wir diese Template-PHP-Option. Wir haben bereits einen kurzen Blick auf die Vorlage CSS, und jetzt werfen wir einen Blick auf die Vorlage PHP. Jetzt hier drin haben wir einige im Grunde einige Codeausschnitte, die dies im Grunde sagen, na ja, dieser Beitrag dieses einfache Plakatmodul, um einige Informationen aus der Datenbank zu holen. Aber wie gesagt, wir brauchen einige dieser Elemente nicht wirklich. Wie, lassen Sie uns sagen, dass lassen Sie mich einfach einen Blick auf unsere, Lassen Sie uns sagen, dass wir diesen Autor nicht brauchen. Wie loswerden, dass. Lassen Sie uns einfach den Titel und den Read More Link. Also lasst uns den Autor loswerden und diesen Text hier loswerden. Also wollen wir in unserem Fall die Meta und diesen Auszug hier loswerden. Wenn wir also einen Blick auf diesen Code werfen, können wir sehen, dass wir hier einige ziemlich selbsterklärende Tags bekommen. Also haben wir diesen Titel bekommen, wir wollen den Titel nicht anfassen. Dann haben wir die Meta bekommen und wollen die Metta anfassen. Dann haben wir einen Autor in Bezug auf die Zeit, als wir den Auszug und Inhalt hier bekommen haben. Also brauchen wir nicht alle diese Elemente, aber wir brauchen die Startklasse von OK, nehmen wir an, rap, dies ist ein div, das alle diese Elemente umschließt. Also werde ich einfach voran gehen und dieses div entfernen, das mit oxy post meta beginnt. Und ich werde den ganzen Weg runter gehen, bis ich diesen Auszug und dieses schließende Div hier loswerde . Wenn ich diese Jungs einfach ausschneiden und den Code anwenden werde, können Sie sehen, dass alles, was wir haben, nur unser Titel und unsere Read More Button sind. Also, wenn ich diesen Kerl einfach retten und dann zurück zu unserer Seite gehen, können Sie sehen, dass wir und diese Art von einem, diese Art von einem Effekt wie diesem. Und ich denke, es sieht aus, sieht viel besser aus. Natürlich könnten wir immer noch gerne den Abstand zwischen diesen Elementen fixieren und vielleicht könnten wir einen gewissen Rand unter unserem, unserem Titel hinzufügen. Aber das ist, was wir tun müssen, dass in der Vorlage CSS. Also haben wir diesen Oxyposten hier. Also lasst uns diesen unteren Wert in etwas ändern, wie wir versuchen, 35 Pixel. Und ich werde nur den Code anwenden, speichern. Und lasst uns die Veränderungen sehen. Sie können sehen, dass es jetzt ist, na ja, diese Beiträge sind viel, viel näher beieinander. Also lassen Sie uns jetzt einfach einige Abstände zwischen dem Titel und dem Read More Link hinzufügen. Also lasst uns versuchen, unseren Titel zu finden. Es ist dieser Typ hier. Wenn Sie also nichts selbst codieren möchten, können Sie einfach dieses untere Symbol auswählen. Ich werde Control C drücken und dann gehen wir hier runter, drücken die Eingabetaste, will die Codezeile vor dieser schließenden Klammer hinzufügen. Und ich werde den Code anwenden und mal sehen, was er tut. Vielleicht ist das ein bisschen zu viel. Also, vielleicht lasst uns das etwas ändern. Ich weiß nicht, vielleicht wie zehn Pixel. Also lasst uns das machen. Lasst uns nur zehn Pixel machen. Legen Sie den Code an. Ich werde es speichern und die Seite aktualisieren. Das sieht viel, viel besser aus. Und natürlich, wenn wir darauf klicken, werden wir auf unsere gesetzt werden, wir werden in der Lage sein, unseren Beitrag zu sehen, weil alles funktioniert, wie es sollte, denn das ist unsere, das ist unsere einfache rühmt, einfach sowohl zu modulieren dass, das funktioniert mit unserer Single Post Vorlage. Nun, vielleicht, wenn ich es mir anschaue, bin ich Sache, dass wir vielleicht einige, einige Dinge über diese Überschriften machen könnten. Ich denke, dass sie etwas mehr Platz am Boden haben könnten. Aber wenn Sie Änderungen wie diese vornehmen, wie diese schweren Änderungen an Ihren Vorlagen, wie einfache Postvorlagen, wäre es eine gute Idee, Ihre Vorlage zu speichern. Nennen wir es Sidebar Hormon. Nennen wir es neueste Beiträge. Und lassen Sie uns diesen Kerl retten. Und oh, nur um sicherzustellen, dass, wenn wir etwas durcheinander bringen, wir immer noch dorthin gehen können, wo wir vorher waren. Also vielleicht lassen Sie uns einfach die Größe zwischen diesen Elementen erhöhen. Wie Sie sehen können, haben wir diesen Kurs genau hier. Also lassen Sie uns sehen, was wir in Bezug auf die untere Marge tun können. Lassen Sie uns sehen wie 25 Pixel. Das könnte ein bisschen besser sein, aber ich denke immer noch, dass es nicht genug ist. Also vielleicht lassen Sie uns einfach einige einfache, einfache Änderungen vornehmen. Lasst uns dieses Div schnappen und vielleicht Perrin, diesen Kerl runter, und vielleicht ist dieser Kerl ein bisschen zu irgendwo hier. Dasselbe für dieses Element. Vielleicht nur ein bisschen mehr. Lass mich einfach dieses div schnappen. Und wieder bei etwas mehr Abstand. Und jetzt sehen wir, wie es auf unserer Seite aussieht, wenn wir dies aktualisieren. Ich Bücher, ich denke, es sieht ein bisschen besser aus. Natürlich könnten wir den ganzen Tag mit dem Styling herumspielen, aber es ist, es ist wichtiger zu lernen, wie all diese Elemente funktionieren, weil es viel ist, es ist viel, es ist viel zu nehmen auf einmal. Sie müssen wirklich einfach klicken und überprüfen und viele Fehler machen, nur um wirklich zu lernen, wie alles wirklich funktioniert, wie alles wirklich funktioniert, und um Ihr eigenes Bestes für den Workflow zu finden. Aber hier drin Sauerstoff und Sie können wirklich, wissen Sie, wenn Sie absolute Flexibilität und Freiheit in ihnen sein wollen, in Bezug auf das Entwerfen und die Dinge funktionieren zu lassen, wie Sie möchten, dass sie funktionieren. Nun, das hast du genau hier. Also haben wir die neuesten Prahls bekommen. Vielleicht könnten wir nun einige Kategorien unten oder Tags hinzufügen, wissen Sie, Dinge wie Standard-Sidebar-Dinge. 61. 10.13die Kategorien Modul: In Ordnung, also haben wir unsere neuesten Beiträge hier. Nun, wie bereits erwähnt, lassen Sie uns diese Kategorie hinzufügen. Also, wenn wir zu unserem WordPress-Panel gehen und dann Widgets, jetzt in hier finden Sie diese Kategorien Modul. Aber wenn wir gehen, um zu sagen erweiterte und dann Topographie, und zum Beispiel, Sie wollen, um die Farbe zu ändern. Sie können sehen, dass nur die Aufzählungspunkte ihre Farbe ändern. Und dann tun diese Jungs nicht, weil sie Links sind und sie müssen geändert werden. Und anderswo. Ich meine, wenn wir zu unseren verwalteten Einstellungen gehen und dann, wenn wir zu globalen Stilen gehen, globale Stile. Und dann, wenn Sie zu Links gehen. Und dann alle hier drin, wenn wir anfangen, das zu ändern, nun, die Farbe dieser Links, werden sie sich hier ändern. Aber weißt du was? Es gibt einige Dinge, die Sie dagegen tun können. Zum Beispiel können Sie die Deklaration ändern, wenn Sie möchten, wenn Sie Ihren Text unterstreichen möchten, könnten wir die Linkfarbe beim Hover ändern, aber es wird schwierig sein, zum Beispiel diese Kategorien zu ändern. Wird Styling, denn es ist ein, es ist ein Wordpress-Widget. Für mich ist es zu viel Ärger. Ich möchte es einfacher machen und möchte das nutzen, was Sauerstoff bietet. Also für jetzt werde ich dieses Modul hier verlassen, aber nur, weil ich die Links brauche, die an diesen Links angehängt sind, werden die URLs, die an diese Links angehängt sind. Also, wenn ich einfach auf jeden einzelnen von ihnen klicke und dann zu den offenen Stempeln bewege. Sie können sehen, dass wir den Inhalt haben, aber wir haben nicht den Stil hier und wir werden das in nur einer Sekunde zu beheben, was wir von diesen Seiten brauchen, ist die URL. Wir werden es in nur einer Sekunde verwenden, wenn wir anfangen, unsere eigenen Kategorien Modul zu stylen. Aber für jetzt möchten wir eine Vorlage zu unserer Kategorie hinzufügen , damit sie wie unsere Blog-Beitrag-Seite aussehen. Also, um das zu tun, werde ich nur gehen und klicken Sie auf diese Tasche zu Arbeitern und Schaltfläche und wählen Sie dann Admin. Und hier werde ich eine andere Vorlage zu wählen, eine andere Vorlage zu bearbeiten. Und es wird unsere Blogposts Vorlage sein. Und wo gilt diese Vorlage in diesem Teil ? Ich wähle das Archiv und wähle Taxonomien aus, alle Kategorien. Wenn wir diese nicht haben, können Sie eine bestimmte Kategorie auswählen. Wenn Sie also eine andere Vorlage für eine bestimmte Kategorie auswählen möchten, können Sie dies tun. Aber in unserem Fall möchte ich nur mein Design konsistent halten. Ich möchte das gleiche, gleiche, gleiche Look in der Kategorie, gleiche aussehende Layout für alle meine Kategorien haben. Wenn wir also alle Kategorien auswählen und unsere Vorlage aktualisieren, können wir sie schließen. Und dann, wenn wir die Seite aktualisieren, können Sie sehen, dass unsere Vorlage unseren Kategorien zugewiesen wird. Und jetzt sieht es so aus, wie es sollte. Wie ich bereits sagte, werden wir diese URLs direkt hier verwenden , wenn wir anfangen, unser eigenes, unsere eigenen Kategorien, Kategorien Modul zu erstellen . Also lasst uns tatsächlich dazu übergehen. 62. 10.14Kategorien: Ich glaube nicht, dass wir dieses Modul mehr brauchen werden. Wir haben, wir werden unsere Links von diesen URLs genommen werden. Also von LOS Seiten. Also werde ich einfach dieses Modul entfernen. Also statt unseres Kategorie-Moduls, was ich tun werde, werde ich ein Textlink-Modul hinzufügen. Also werde ich nur Text eingeben und dann Textlink auswählen. Und das wird unser Sprint-Design sein. Ich glaube, das ist unser erster Link hier. Also, wenn ich jetzt nur diese URL kopiere, werde ich diese URL direkt hier einfügen. Und während ich gehe, werde ich nur eine Klasse hinzufügen. Es wird also Sidebar Kategorie sein. Da gehen wir. So jetzt können wir tatsächlich Stil unserer gedruckten Designer wird diese erste Kategorie. Aber wenn wir es einfach speichern und ich Ihnen zeigen lassen, dass es wirklich funktioniert. Wenn wir auf unseren Print Design Link klicken, können Sie sehen, dass wir auf unsere Seite mit all unserem Print Design weitergeleitet werden, eine Kategorie Blog-Posts. Das ist also, was wir für all diese Links tun müssen. Aber zuerst müssen wir es stylen. Sagen wir mal, ich gehe zuerst zu meiner Typografie und werde versuchen, die Farbe zu diesem Kerl zu ändern. Vielleicht, lasst uns unsere Verbindung kapitalisieren. Vielleicht lassen Sie uns zusammenfassen, fügen wir etwas Polsterung hinzu. Also gehe ich zu, gehe zu Größe und Abstand. Und für die Polsterung werde ich vielleicht acht Pixel hoch und runter gehen. Da gehen wir. Und vielleicht gehen wir wieder zu Größe und Abstand. Und lassen Sie uns die Breite auf 100% ändern. Denn was ich tun möchte, ist, dass ich hier unten eine schön aussehende Grenze hinzufügen möchte, die sich über die gesamte Seitenleiste erstrecken wird. Dafür gehe ich zu Borders und wähle die untere Grenze. Ich werde mit der dunkelgrauen Farbe gehen. Vielleicht ist dieser Typ hier, und ich will es ein Pixel und solide machen. Also, wenn Sie jetzt diese Seite aktualisieren, wird diese Seite speichern. Und lasst uns zu unserem Einzelposten gehen. Das ist also unsere erste, das ist unsere erste Kategorie. Und vielleicht lassen Sie uns auch einige machen, einige wie schwebende Effekte. Also werde ich gehen, um zu schweben und ich werde die Farbe in weiß, dunkleres Schwarz ändern. Da gehen wir. Ein Pixel und dann durchgehend. Und jetzt, wenn Sie zu unserem Einzelposten gehen, da gehen wir. Sie können sehen, dass, wenn wir den Mauszeiger über diese Grenze bewegen, es ist ein extrem subtiler Effekt, aber es ist da. Wenn wir also den Mauszeiger über die, diese Kategorie bewegen, ändert sich dieser Rahmen ein wenig. Also jetzt alles, was Sie wirklich tun müssen, ist, einfach unseren Textlink zu duplizieren , der in unseren Webdesigner gehen wird. Also werde ich diese Adresse kopieren, schnappen Sie sich dieses Stück dieser Kategorie. Ich werde diesen Link einfügen. Und ich werde Web-Design eintippen. Dann werde ich diesen Kerl noch einmal duplizieren. Und mit Branding werde ich diesen Kerl kopieren. Und ich werde das Branding eintippen. Und natürlich muss ich die URL hier ändern. Und der letzte Typ ist unser gut, Design, schlicht und einfach. Also wieder, fügen Sie den Link und ändern Sie die Steuer zu entwerfen und speichern Sie, dass ein Kerl. Und wenn Sie jetzt wieder zu unserer Single prahlen gehen, aktualisieren Sie die Seite. Wir haben alle unsere alle unsere Kategorien hier aufgelistet. Und natürlich, wenn wir auf einen klicken, können Sie sehen, dass alle diese Kategorien schön, schön funktionieren. Und natürlich können Sie diese Links so gestalten, wie Sie wollen. Es liegt ganz an dir. Zum Beispiel könnten wir vielleicht auch für den Hover-Effekt, wir könnten sie wie die Farbe unserer ändern, unserer Kategorien. Und wir könnten sie vielleicht auch ein wenig animieren, nur um etwas Bewegung auf unserer Seite zu zeigen. Und vor allem, damit Sie lernen können, wie einfach es ist einige schöne Übergänge auf Hafen hier in Sauerstoff hinzuzufügen. Also gehen wir weiter zu dem. 63. 10.15Übergänge hinzufügen: Das Hinzufügen von Übergängen hier in Sauerstoff ist, ist extrem, extrem einfach. Was ich zuerst tun muss, ist, dass ich sicherstellen werde, dass meine Klasse aktiv ist und dass ich meinen Hover-Status ausgewählt habe . Und dann, wenn wir zu fortgeschritten gehen, sagen wir, dass wir die Linkfarbe ändern möchten. Also lassen Sie uns sagen, dass ich auf einem Hover eine andere Farbe sehen möchte. Sagen wir, ich werde mit diesem mittelbraunen Schweben gehen. Und was ich tun will, ist, dass ich will, ich will nicht, dass es wie eine einfache und einfache Änderung der Typografie Farbe ist, ich möchte es glatter machen. Also, was ich tun werde, ist, dass ich zu Effekten gehen werde. Dann gehe ich in den Übergang. Und alles, was wir hier wirklich tun müssen, ist, die Übergangsdauer festzulegen. Wenn ich es auf 1 Sekunde einstellen werde, das extrem lang sein, aber Sie werden definitiv in der Lage sein, diese Änderung zu sehen. Also werde ich nur mein, mein Design retten. Ich gehe zu meinem Einzelposten. Und wenn Sie den Mauszeiger über unsere Links bewegen, können Sie sehen, dass sie sich sehr, sehr langsam ändern, diese Farbe. Und ich denke, dass es ein bisschen zu lang ist. Also werde ich zu etwas wie 0,3 Sekunden gehen. Und vielleicht nur um diesen ganzen Effekt ein bisschen deutlicher zu machen, wenn Sie wollen, gehen Sie vielleicht zur Typografie und lassen Sie uns sagen, dass wir beim Hover wollen, sagen wir, dass wir das Schriftgewicht ändern wollen. Also lasst uns mit etwa 600 vielleicht gehen. Und lassen Sie uns das speichern und meine Seite aktualisieren. Und Sie können sehen, dass gerade jetzt, dass Änderungen auch genommen, genommen f, Natürlich ist es nur eine Option. Das kannst du tun. Es geht mehr darum, die Technik zu erlernen, es geht mehr darum, die Werkzeuge zu lernen, wie man das macht. Und wie Sie hier in Sauerstoff in Übergängen sehen können, ist eine Prellung wirklich, wirklich, wirklich einfach am Ende wie im Allgemeinen, wie eine Faustregel beim Hinzufügen von Übergang ist, dass sie schnell zu halten, weil niemand warten will für lange Übergänge Laden und C und eine Art Feedback , so dass Übergänge am besten sind, wenn sie schnell sind und nicht schwer mögen. Wie in diesem Fall denke ich, dass, wenn wir nur die Farbe ändern, ohne das Schriftgewicht zu ändern, Das wäre noch besser. Also, was ich tun werde, ist eigentlich, dass ich diese Schriftgewichtsänderung entfernen werde. Ich werde mich ändern, ich werde die Farbe ändern lassen, um Spaß mit unseren Kategorien zu haben. Und im Grunde sind wir mit unserer Sidebar fertig. Ich meine, was wir tun könnten, ist, dass wir das Gleiche für unsere Tags hinzufügen können. Aber der Prozess wäre, wäre ähnlich, naja, wäre im Grunde der gleiche. Alles, was wir tun müssten, ist nur die Links, die richtigen Links hinzuzufügen und sie dann zu stylen. Und das ist es im Grunde. Also der letzte Schritt hier wäre zwei, ich denke, fügen Sie ein Kommentarfeld hier unten, wenn Sie für Kommentare zu Ihren Blogbeiträgen zulassen möchten . Aber das kannst du hier im Sauerstoff tun. Also lasst uns das als nächstes tun. 64. 10.16Kommentare hinzufügen: Wenn Sie Kommentare für Ihre, für Ihre Beiträge zulassen möchten , können Sie das hier im August tun, ist nicht ganz einfach. Also, was ich tun werde, ist, dass ich auf den rechten Säulen bin. Also dieser Typ hier, und ich werde anfangen zu tippen, vielleicht gehen wir zu unserem Hauptbaum. Ich werde anfangen, Kommentare einzugeben, damit wir einen Kommentar, Commons-Listen hinzufügen können. Also, wenn Sie zuerst die Kommentare zeigen möchten, und dann können wir ein Commons Formular hinzufügen. Also, wenn ich einfach auf Kommentarliste klicken und dann auf Kommentare Formular, Sie können sehen, dass diese Module zu unserem hinzugefügt werden, zu unserem Blog Post eine Vorlage. Allerdings können wir hier keine Liste sehen, keine, keine gemeinsame, weil dieses spezifische Bögen, ich glaube nicht, dass es einen Kommentar hat. Also lasst uns das schnell beheben. Ich gehe zu meinem, zu meinem Posten. Ich werde diese Posten finden. Ich glaube, das ist dieser Typ, also werde ich es sehen. Also das ist unsere, das ist unsere Seite. Wir werden etwas eingeben wie, ich weiß nicht, ob dies ein Kommentar ist und ich werde auf Kommentar schreiben klicken. Und da gehen wir hin. Wir haben nun unseren Kommentar zu meiner hinzugefügt, zu meiner Seite und zu meinem Beitrag. Also, das ist wirklich, wirklich einfach hier in Sauerstoff. Und natürlich haben wir auch hier einige Styling-Optionen. Lassen Sie mich einfach die Seite aktualisieren und lassen Sie uns eine Vorschau, die rühmen. Also gehen wir hin. Hier ist unser Ratschlag, hier ist unsere Antwort. Und natürlich, wenn wir, wenn wir nur zu unserem Beitrag gehen und lassen Sie mich einfach vielleicht greifen diesen Beitrag und öffnen Sie ihn in unserem Inkognito-Modus, damit Sie sehen können, wie es aussieht. Wenn der Benutzer nicht angemeldet ist. In hier werden Sie wie Ihren Namen, E-Mail und Website-Felder, die Sie ausfüllen müssen, um tatsächlich einen Kommentar zu schreiben. Gehen wir also zurück zu unserem Design. Da gehen wir hin. Soweit unsere Kommentarliste geht, haben wir einige Presets, nicht zu viele bekommen unsere Standard-Voreinstellung ist dieser Typ hier. Und wir können das ändern und es zu diesem grauen Highlight oder weißen Blöcken ändern. Und so weit wie dieses verlassen Antwort Kommentare Formular geht, können wir die Hintergrundfarbe der Schaltfläche ändern. Wir können die Rahmenfarbe ändern. Also vielleicht nur, um unser Design konsistent zu halten, lassen Sie uns das tun. Ich werde den Grenzradius nicht berühren, aber ich werde die Hintergrundfarbe unserer Schaltfläche ändern, um vielleicht braune Farbe, Textfarbe vielleicht zu unserer grauen Farbe. Da gehen wir hin. Mal sehen, wie es auf unserem Front-End aussehen wird. Lasst uns diese Seite aktualisieren. Und das ist unser Kommentarfeld und das ist unsere Antwort hinterlassen, das Modul hier drinnen, in Sauerstoff. Also alles in allem, hübsch, ziemlich einfach. Wenn Sie wie mehr Aspekte dieser Module ändern wollten, fürchte ich, Sie müssten sich in Codierung eingraben. Aber die Chancen sind auch, dass sie eine Verwendung ein Plug-in für wie soziale Kommentare verwenden möchte, vielleicht, dass jemand auf Facebook oder einer anderen Social-Media-Plattform anmelden müsste, um Kommentare zu Ihrem posten, auf Ihrem Blog-Posts. Und das ist natürlich vorausgesetzt, dass Sie hinzufügen möchten, dass Sie Kommentare zu Ihrem, auf Ihrem Blog-Beitrag zulassen möchten. Also werde ich es so lassen, wie es ist. Ich denke, das sieht in Ordnung aus. Also im Grunde haben wir unsere Blog-Beitrag Seite erstellt. So könnten wir jetzt vielleicht zu unseren Portfolio-Seiten übergehen. Sagen wir also, dass wir unsere Fähigkeiten zeigen wollen oder dass unser Kunde seine Projekte zeigen möchte. Also mal sehen, wie wir das hier in Sauerstoff machen können. 65. 11.1Wir brauchen zuerst einige Vorbereitungen: Also jetzt gehen wir weiter, um in unserem Portfolio zu erstellen. Aber sie haben beschlossen, dass wir es vielleicht auf eine Ebene bringen könnten. Ich meine, wir könnten unserem vorherigen Designer ein einfaches Portfolio wie eine Galerie hinzufügen. Aber ich dachte, Sie wissen schon, in Ihrer Designkarriere, Ihrer Entwicklungskarriere, möchten Sie vielleicht wie eine aufwändigere Portfolio-Website erstellen . Oder vielleicht möchten Sie eine Portfolio-Website für Ihre Kunden erstellen. Es ist also, nein, es ist wichtig, einige Layout-Techniken zu lernen , wenn Sie Portfolios und Portfolio-Seiten erstellen. Also dachte ich, dass wir ein völlig neues Design erstellen könnten, eine völlig neue und die neue Website, die im Grunde sein wird, wird, wird es uns ermöglichen, neue Layout-Techniken zu lernen. Also habe ich beschlossen, eine völlig neue Seite zu erstellen, die ich nur Portfolio genannt habe. Nun, neue Website. Und ich habe einige Seiten hinzugefügt, 1-2-3, nur vier Seiten. Und ich habe auch eine frische Sauerstoffinstallation mit, ohne Schablonen direkt hier. Also, was ich tun will, ist, dass ich gerne einen Abstieg kreieren würde. Vielleicht zeige ich dir, was ich wollte. Nehmen wir an, das ist unsere Titelseite. Und was ich haben möchte, ist, dass ich einen Header haben möchte, aber ein Header dort wird auf die Seite gestellt werden. Und hier drinnen möchte ich nur ein einfaches Logo haben. Also lassen Sie mich einfach ein Logo wie dieses erstellen. Dann würde ich gerne ein Menü hier unten haben und vielleicht einige, einige Copyright-Informationen hier unten, hier unten. Und alles könnte irgendwo hier oder oben ins Zentrum gebracht werden. Wir werden beides lernen, beide Techniken. Und dann, was ich tun will, lass mich einfach stark, lasst uns wie Landschaft tippen. Dann möchte ich einen Schieberegler erstellen. Und lass es mich einfach nach hinten legen. Ich möchte einen Schieberegler erstellen, aber ich möchte, dass dieser Schieberegler wie unter gelegt wird, vielleicht nicht 200 Taste, 2 Tausend. Ich möchte, dass dieser Schieberegler unter meinem PUT wird, unter meinem, tut dies gut Header wie Kopfzeilen Sidebar. Aber ich möchte, dass diese Sidebar ist, ich wollte transparent sein. Also werde ich mir nur dieses Rechteck schnappen. Wie er halbtransparent, so etwas wie das. Und ich möchte mehrere Bilder wie im Hintergrund haben, aber ich möchte diese Bilder und zu ändern, Ich wollte es wie ein einfacher, einfacher Schieberegler machen. Das wird also unser erster dünner sein, unser erster Auftrag. Und wenn wir das erstellen, was ich tun möchte, ist, dass ich eine Portfolio-Seite erstellen möchte. Ich möchte eine Portfolio-Vorlage erstellen, die einige Bilder und Text hosten würde, ein Titel, nur so dass wir zeigen, zeigen, tatsächlich unser, unser Portfolio für unsere Kunden. Also lassen Sie uns mit der Erstellung unserer ersten Vorlage beginnen, die sein wird, wird dies tatsächlich, tatsächlich die Titelseiten-Vorlage. Also fangen wir an, das als Nächstes zu tun. 66. 11.2Bildmaterial: Also bin ich hier in Sauerstoff und ich werde eine neue Vorlage hinzufügen, diese Vorlage Stadt. Es wird unsere Hauptvorlage sein. Also werde ich es so nennen. Und ich werde es auf alle meine Seiten anwenden. Lassen Sie es uns so sagen. Und ich werde Publish treffen. Dann werde ich bearbeiten, bearbeitet mit Sauerstoff. Und wir werden hier in unserer Vorlage mit meiner persönlichen Lieblings-Blanko-Leinwand schreiben. - Ich weiß es nicht. Ich mag es, Poseidon y zu blasen. Also was ich tun möchte, ist, dass ich wie eine Kopfzeile auf der linken Seite erstellen möchte, wie eine Kopfzeile und Seitenleiste und einige, einige Tack-Schweiß-Texte einen Schieberegler unter diesem Header. Also, was ich tun werde, ist, wie üblich, werde ich nur einen einfachen Abschnitt erstellen. Und dieser Abschnitt soll ein Abschnitt mit voller Breite sein. Also werde ich zu fortgeschrittenen Größe und Abstand gehen. Und hier unten habe ich den Abschnittscontainer mit Option, die ich auf volle Breite setzen werde. Und wie Sie sehen können, breitet sich unser Abschnitt jetzt auf unserer Seite aus. Und ich möchte nicht, dass dieser Abschnitt irgendeine Polsterung hat. Ich möchte, dass alle diese Werte auf 0 gesetzt werden. Ich werde das retten. Also, was ich jetzt brauche, ist, dass ich tatsächlich div muss. Also ein div, das auf der linken Seite sein wird, das unsere Header-Elemente hosten würde. Und dann ein, ein anderes div, das unsere Hintergrundbilder hostet. Also werde ich nur mein erstes div hinzufügen. Und vielleicht nennen wir es so etwas wie, lassen Sie es uns umbenennen. Nennen wir es eine Kopfzeile. Da gehen wir hin. Und dann werde ich ein weiteres div hinzufügen, und ich werde es nennen, nennen wir es Schieberegler. Da gehen wir hin. Das ist also unser Header und das ist unser Schieberegler. Aber wie Sie sehen können, werden sie übereinander gelegt. Und das liegt daran, dass unser Abschnitt standardmäßig untergeordnete Elemente vertikal stapelt. Also lasst uns sie horizontal stapeln. Und ich werde mir meinen Kopf schnappen. Und lassen Sie uns sagen, dass ich so etwas wie, mal sehen, 20% in der Breite sein wollte . Und dann werde ich den Schieberegler greifen. Und jetzt werde ich es nur auf 80% setzen, nur damit du sehen kannst, was wir hier tun. Also haben wir unsere erste DEF, unseren Header, und dann haben wir unseren Schieberegler, Schieberegler div. Wie ich bereits erwähnt habe, möchte ich dies, diesen Header, diese Header-Sidebar. Ich wollte wie halbtransparent sein. Also gehe ich zum Fortgeschrittenen. Ich gehe in den Hintergrund, schnappe mir die Hintergrundfarbe. Ich werde es schwarz machen, aber ich werde die Deckkraft immer so leicht auf vielleicht etwas wie, mal sehen, 66 gerade vorerst senken . Und jetzt, wenn ich wieder fortgeschrittene Größe und Abstand gehe und die Höhenoption ergriff, setze es auf 100 v h. Wie wir bereits wissen, breitet sich unser Header von oben nach unten aus. Und wenn wir das Gleiche für unseren Schieberegler tun, so werde ich zu fortgeschrittenen Hintergrund gehen. Ich werde vorerst mit Hintergrundfarbe gehen, nur damit du es sehen kannst. Und dann werde ich diese Größe und den Abstand auf die gleichen 100 vh packen. Sie können sehen, dass sich meine beiden Abschnitte von oben nach unten ausbreiten und ausbreiten. Und dieser Hauptabschnitt breitet sich von links nach rechts aus. Aber natürlich wollen wir, dass dieser Schieberegler unter unsere Kopfzeile geht, aber das ist etwas, das wir später tun werden. Für jetzt, lasst uns einfach anfangen, unsere, unsere Header mit einigen Informationen zu füllen . Also lassen Sie uns ein Logo hinzufügen, lassen Sie einige wie ein Menü hinzufügen. Und dann lassen Sie uns hier unten einige Fußzeileninformationen hinzufügen. Also fangen wir an, das als Nächstes zu tun. 67. 11.3-Kopfzeilen: Also zu unserer Kopfzeile, müssen wir ein Logo, ein Menü und dann einige Fußzeileninformationen hier unten hinzufügen . Also werde ich mit dem Logo beginnen. Also werde ich auf Hinzufügen klicken, und ich werde in Überschrift eingeben. Rufen wir das an. Ich versuche, wie ein Foto-Blog, Top-Fotografie-Portfolio zu machen. Also werde ich es einfach für Top Grow Fee nennen. Da gehen wir. Und vielleicht werde ich nur ein Symbol wie vielleicht hinzufügen, vielleicht nicht wie neben, aber oben auf dieser Überschrift. Also werde ich nur auf Hinzufügen klicken, und ich werde einfach in Symbol eingeben. Da gehen wir. Und natürlich I1, dieses Symbol oben zu sein. Da gehen wir. Also habe ich keine speziellen Farben dafür gesetzt, für diesen Blog, für dieses Portfolio oder eine Website. Also werde ich nur einige meiner, einige meiner Lieblingsfarben nehmen , wie ich mit F9 oder einem tödlichen Schicksal von acht für diesen einen gehen werde . Und ich schätze, wir können es hinzufügen. Ich werde es so nennen, wie es ist. Also F9, F9, F9. Und dann gehen wir und dann werde ich vielleicht zuerst greifen , lassen Sie uns die Größe auf etwas wie 32. Und dann lasst uns das ändern in, versuchen wir es mit der Kamera. Vielleicht ist diese Kamera Retro. Da gehen wir. Und für die Fotografie werde ich die Farbe ändern. Und ich werde versuchen, eine schöne, schön aussehende Schrift zu finden. Also, ich denke, wir könnten vielleicht zu Google Fonts gehen, um eine schöne Schriftart zu finden. Oder wir gehen einfach mit dem, was wir bereits wissen, wie Bree Serif, das wird gut aussehen. Und vielleicht werde ich nur versuchen, ein netteres Schriftgewicht zu finden. Vielleicht ist das ein bisschen zu groß. Das sollte sein, das sollte in Ordnung sein. Also natürlich, was ich gerne tun würde, ist, dass ich diese Jungs in die Mitte meines Kopfes stellen möchte. Und das ist super einfach. Ich werde nur meinen Header greifen und ich werde alle diese Elemente horizontal ausrichten. Und ich werde zu Advanced Größe und Abstand gehen. Und ich werde etwas Polsterung hinzufügen, wie vielleicht 50 Pixel von oben, können unten sein und vielleicht 25 auf der linken Seite und 25 auf der rechten Seite. Natürlich könnten wir, wenn wir wollten, auch mit der Größe unserer Überschrift herumspielen. Vielleicht machen Sie eine größere, kann es kleinere Knoten werden völlig bis zu Ihnen sein. Was ich tun möchte, ist, dass ich Ihnen zeigen möchte, ich möchte, dass Sie lernen, wie Sie mit den Layout-Optionen spielen , wenn Sie diese Standard-Websites erstellen. Weil wir bei einem mögen könnten, wie eine Kopfzeile oben, setzen Sie ein Logo auf der linken Seite, Menü auf der rechten Seite. Aber das ist ein bisschen langweilig. Und ich meine, wir wollen, dass wir etwas extra für unseren Fotografen tun wollen. Sobald wir das Logo bekommen haben, könnten wir es vielleicht sogar mit einem div umwickeln und es ein Logo nennen. Das ist, das wäre eine gute organisatorische Praxis. Aber ich werde jetzt nur ein Menü hinzufügen. Ich gehe weiter und wähle das Pro-Menü aus. Und wie Sie sehen können, ist dies mein einziges Menü, also wurde es sofort hinzugefügt. Und was ich tun will, ist, dass ich eine Menge Dinge daran tatsächlich ändern möchte. Jetzt diese Speisekarte. Also werde ich zum Desktop-Menü gehen. Und für die Orientierung möchte ich zur Vertikalen wechseln. Da gehen wir. Für die Typografie, ich denke, wir könnten mit etwas Einfaches wie vielleicht Lotto gehen. Lasst uns damit gehen. Ich möchte die Farbe ändern, aber vielleicht ändern wir sie diesmal in etwas wie ein bisschen gräulicher aussehen. Vielleicht, dass ich es zu meinem hinzufügen werde, zu meinen globalen Farben. Und ich werde es dunkelgrau nennen. Da gehen wir. Und lassen Sie mich einfach Großbuchstaben der Schriftart. Lasst uns die Buchstaben vielleicht nur ein bisschen verbreiten. Und lassen Sie uns die Schriftgröße auf etwas wie 22 erhöhen. Und dann gehe ich ins Weltraum in einer Linie und Grenze. Und ich möchte das Textcenter ausrichten. Da gehen wir. Vielleicht werde ich dieses Schriftgewicht nur ein wenig auf so etwas wie 20 oder vielleicht sogar 18. Da gehen wir. Und dann lassen Sie uns wieder gehen, um zu schweben und aktiv zu sein. Und ich würde gerne schweben, Jungs vielleicht, machen es noch dunkler. Vielleicht so. Und ich werde die Farbe hinzufügen und ich werde es ein Schwebegrau nennen. Da gehen wir. Also, wenn jemand über unsere Speisekarte schwebt, wird es sich drehen und wirklich, wirklich dunkel. Und natürlich müssen wir immer noch mit der Reaktionsfähigkeit herumspielen, aber das machen wir später. Wir kümmern uns um die Reaktionsfähigkeit für das Menü für diesen Header und alle unsere Header-Elemente. Moment fügen wir einfach die Elemente hinzu, die wir tatsächlich brauchen in unserem Header. Sobald wir das Logo bekommen haben, haben wir das Menü bekommen. Lassen Sie uns vielleicht die Fußzeileninformationen hinzufügen. Also werde ich mit sozialen Symbolen beginnen. Also werde ich nur tippen, tippen Sie das ein. Und ich werde hinzufügen, eine Menge von ihnen sind tatsächlich, lassen Sie uns alle von ihnen hinzufügen, alle diese Symbole. Und auf jeden Fall machen wir sie kleiner auf etwas wie 18 Pixel. Warum nicht? Und 1010 Pixel Raum rund um die, diese Symbole ist in Ordnung. Lassen Sie uns die Farben überprüfen. Lassen Sie uns mit unserer dunkelgrauen Farbe gehen. Da gehen wir. Und wenn Sie möchten, können Sie Markenfarben verwenden. Das ist etwas, das du tun könntest, aber ich werde mit unseren grauen Farben gehen. Und Sie können auch mit diesen Optionen wie Quadrat, Kreis und leer spielen. Ich glaube, ich werde mit Quadrat gehen. Ich denke, sie sahen in diesem Szenario am besten aus. Vielleicht werde ich die Größe vergrößern und den Abstand zwischen meinen Symbolen in etwas wie zwei verringern. Ich schätze, das sollte gut sein. Und schließlich, lassen Sie uns einfach schnell einige Textinformationen hinzufügen. Nehmen wir an, dass dies unsere sein wird, dies wird unsere wahrscheinliche Copyright-Informationen sein, so etwas. Wir wissen bereits, wie es geht. Also werde ich einfach einfach nur so etwas wie Arnold 20-20 Photolithographie-Portfolio eingeben , so etwas wie das. Und natürlich lassen Sie uns die Textfarbe ändern. Machen wir es deutlich kleiner, so etwas wie zehn Pixel. Und dann gehe ich zur fortgeschrittenen Typografie. Ich werde Texte in der Mitte ausrichten. So wäre jetzt ein guter Zeitpunkt, um zu beginnen, sich in alles gut auszurichten. Ich meine, wir könnten es so lassen, aber es sieht viel zu eng aus nach meinem Geschmack. Ich denke, dass wir etwas mehr Platz zwischen all diesen Elementen brauchen, aber wir brauchen auch eine schöne Ausrichtung in Bezug auf unseren Header. Lassen Sie uns also anfangen, mit den Ausrichtungsoptionen und dem Abstand zu spielen. Im nächsten Video. 68. 11.4Ausrichtung und Layout ändern: Daher denke ich, dass wir damit beginnen sollten, einige Abstände zwischen diesen Elementen hinzuzufügen, vor allem das Menü und das Logo und die Social Media Symbole. Also, was ich zuerst tun werde, ist, dass ich das Pro-Menü zu greifen, gehen Sie zu Erweiterte Größe und Abstand. Und ich werde etwas Rand hinzufügen, wie vielleicht 50 Pixel oben und unten. Und wenn du es so überlassen wolltest, wenn wir diese Art von Layout mögen, könnten wir es jetzt dabei belassen. Das sieht gut aus. Aber was, wenn wir vielleicht gerne verbreiten wollten alle diese Elemente sind was, wenn wir den ganzen Raum nutzen wollten, den wir hier haben? Was ist, wenn wir wollen, lassen Sie das Logo oben, greifen Sie das Menü und legen Sie es genau in die Mitte. Und dann schnappen Sie sich die Social-Media-Symbole und unseren Copyright-Text und legen Sie ihn genau unten. Dafür werde ich meinen Header packen. Ich werde sicherstellen, dass es tatsächlich ausgewählt wurde. Und ich werde diese Option wie diese vertikale Elementausrichtungsoption greifen, letzte Option als Leerzeichen zwischen ihnen. Nun, was hier passiert, ist, dass all diese Elemente versuchen, gleichmäßig und vertikal zu platzieren, um diesen gesamten verfügbaren Raum, den wir hier haben, zu füllen. Aber da diese Elemente getrennt sind, können Sie sehen, dass sie die gesamte Leertaste nehmen und dann die Leerzeichen zwischen ihnen bearbeiten sind gleich. Aber wir möchten diese Topographie Fotografie und die Last wird zusammen sein. Und diese Social-Media-Icons und die Copyright-Informationen, wir möchten, dass es zusammen sein. Wenn dies ein einfaches Bild wäre, würde es gut funktionieren. Aber in unserem Fall ist es nicht. Aber es ist eigentlich eine, es ist eine gute Sache, weil wir lernen können, wie man diese Probleme herausfordert. Also, was ich tun werde, ist, dass ich diese kommende Schicht packe und ich werde es mit div umwickeln. Und dann werde ich die Überschrift in dieses Div stecken. Und wie Sie sehen können, dass die Fotografie und die Überschrift und das Symbol jetzt in ein div eingewickelt werden. Und dieses div wurde tatsächlich auf unsere, unserer Überschrift gesetzt. Aber natürlich müssen wir nur alles an der Mitte ausrichten. Und dann tun wir dasselbe für unsere Social Media, Social-Media-Icons. Also werde ich sie live mit einwickeln. Auf dem Text sehen Sie eine vertikale Linie Mitte. Sie können sehen, dass gerade jetzt all diese Elemente schön zusammengesetzt werden und genau unten. Und lassen Sie uns sagen, dass Sie dieses Menü zusammen mit Logo oben setzen möchten, aber Sie würden die Social-Media-Symbole hier unten behalten möchten. Also, wie konnten wir das tun? Tun Sie das? Nun, der einfachste Weg wäre, einfach das Menü zu greifen und es in dieses div zu legen. Und es würde mit dieser Logo-Fotografie, dem Symbol, der Überschrift und einem umfassend div gehen dem Symbol, der Überschrift . Also, das ist etwas, das du tun könntest. Und natürlich, wenn Sie das Menü unten haben wollten, naja, Sie müssten es nur in dieses div einfügen. Also diese Option, zeigen Sie es Ihnen noch einmal. Diese Option Abstand zwischen Ermöglicht es Ihnen, alle Elemente vertikal so zu platzieren, dass sie passen, sodass sie den gesamten verfügbaren Platz ausfüllen. Aber ich will nicht, dass diese Speisekarte so ist. Ich wollte getrennt sein. Natürlich, wenn wir noch ein paar Seiten hier hätten, könnten wir sie hinzufügen und sie würden diesen ganzen Raum schön füllen. Aber in unserem Fall haben wir nur diese Elemente. Jetzt sieht es so aus. Nun, da wir wissen,, kümmerte sich um unsere Layout-Optionen, Ich denke, es ist höchste Zeit, dass kümmerte sich um unsere Layout-Optionen, wir anfangen, mit unserer Reaktionsfähigkeit herumzuspielen. Also fangen wir an, das im nächsten Video zu tun. 69. 11.5-Aufwand: Also, um die Reaktionsfähigkeit zu beheben, was ich tun werde, ist, dass ich zum FirstPage-Container gehe, diesem Kerl hier. Und wie Sie sehen können, an dieser Stelle schätze ich, dass das Menü in Ordnung aussieht, aber dieser Foto-Text ist viel zu groß, also werde ich es einfach kleiner machen, etwas wie 22. Und ich werde die Symbolgröße auf etwas wie vielleicht 24 oder vielleicht 22 ändern. Und was unsere Social-Media-Symbole angeht, könnten wir vielleicht für den Anfang, lasst uns das div packen und sicherstellen, dass wir unsere Gegenstände zentriert haben. Und dann werde ich einfach zweimal Social Media Icons gehen. Und ich werde diese Jungs wahrscheinlich nur ein bisschen kleiner machen , vielleicht so etwas wie 14 Pixel. Das sollte gut sein. Jetzt gehen wir zu unserem Seitencontainer. Aber davor, vielleicht lassen Sie uns einfach etwas mehr Platz wie hier auf der, auf der linken und auf der rechten Seite hinzufügen . Also werde ich mir nur meinen Kopf schnappen. Und an diesem Haltepunkt möchte ich, dass die Breite etwas größer ist. Mal sehen, wie 25. Oder kann sogar noch größer sein, um so etwas wie 2727 sollte in Ordnung sein. Dann gehe ich zu weniger als 992. Ich schätze, 27 wird es gut gehen. In Bezug auf die in Bezug auf die Größe. Und alle anderen Elemente sehen hübsch aus, ziemlich gut. Ich glaube, sie sehen gut aus. Vielleicht lassen Sie mich einfach auf alle Geräte gehen. Nun, ich mag den Abstand zwischen den Social Media Icons und diesem Text nicht wirklich. Also werde ich nur diesen unteren Text hier und diesen Haltepunkt greifen, ich werde wie vielleicht fünf Pixel Rand hinzufügen, denke ich verteilen. Ordnung? Also, wenn wir, wenn wir zu weniger als 992 gehen, sieht es immer noch gut aus. Aber vielleicht lassen Sie uns das mit vielleicht 33 ändern. Also gehen wir jetzt zu weniger als 768. Und ich denke, dass dieser Haltepunkt Dinge wird unser Layout nicht mehr gut funktionieren. Ich meine, selbst wenn wir ein Hintergrundbild haben, ist es immer noch nicht professionell nach meinem Geschmack aussehen wird. Was ich tun möchte, ist, dass ich gerne mit diesem Haltepunkt I1 beginnen möchte, das Layout vollständig ändern soll. Ich möchte, ich möchte wie einen Standard-Header an der Spitze haben. Und ich möchte wie ein haben, gut unsere Schieberegler horizontal gesetzt werden, aber mehr nach unten. Wie konnten wir das tun? Denken Sie daran, dass unser Abschnitt immer noch Lager Stapel untergeordneten Elemente Horror horizontal erbt , diese Funktion. Wenn wir diesen Haltepunkt hinzufügen, sagen Sie ihm, dass untergeordnete Elemente vertikal gestapelt werden sollen. Sie können sehen, dass gerade jetzt unser Header auf unseren bald zu-sein-Schieberegler gesetzt wird. Aber da dieser Kerl für seine Höhe, seine Vererbung, diesen Wert auf 100 vh eingestellt ist. Sie können sehen, dass es nicht den ganzen Raum zur Seite eingenommen hat. Also, was ich tun werde, ist, dass ich meine erste Kopfzeile packen und ich werde diese Höhe ändern. Also werde ich zu Größe und Abstand gehen. Und für die Höhe, lasst uns Oran versuchen. Da gehen wir. Und für die Breite, lassen Sie uns mit 100% gehen, um es so zu sagen. Und ich schätze, an diesem Haltepunkt könnten wir vielleicht einfach unser Menü greifen und vielleicht den Rand ändern. Ich glaube, es waren 25 oder 50 Pixel. Also gehen wir mit wie zehn, oben und unten. Ich denke, es sieht in Ordnung, vor allem, wenn wir packten sie pro Menü, wir gehen in sagen, es in ein mobiles Menü mit weniger als 768 verwandeln. Und dann könnten wir vielleicht gerne einige Aspekte darüber ändern. Also werde ich dieses Symbol loswerden. Ich möchte den Menütext nicht haben. Ich will die Gitter haben. Also lasst uns anfangen, Bars einzutippen. Da gehen wir. Und ich möchte diese Farbe zu meinem Schieberegler graue Farbe ändern. Da gehen wir. Und vorerst werde ich es so lassen, wie es ist. Wir könnten mit der Reaktionsfähigkeit herumspielen, mit dem, wie das Menü oder das Menü auf viel kleineren Geräten aussieht, aber wir wissen bereits, wie es geht. Und ich möchte mich nur mehr darauf konzentrieren, die Layout-Optionen direkt hier zu ändern. Also, wenn wir zu weniger als 480 gehen, sieht Menüs immer noch gut aus. Also, wenn Sie jetzt auf alle Geräte gehen, das ist unser, das ist unser Header. Das ist unser Header bei zweihundertneunundneunzig. Aber wenn wir dann zu weniger als 768 gehen, können Sie sehen, dass sich unser Layout vollständig ändert. Also auf kleineren Geräten wie Smartphones, Das ist, was wir sehen würden, oder? Also, das ist alles gut und gut. Aber wie wäre es, wie man, wie man diesen Schieberegler geht, tatsächlich unter meinen heterosexuellen gehen kann, denn jetzt ist es auf 80% eingestellt. Aber was, wenn wir es zu 100% in der Breite machen wollen? Sie können sehen, dass es nicht wirklich unter meinem Header geht. Und wenn ich nur in den Hintergrund gehe, um dir zu zeigen, was ich meine, werde ich das loswerden und ich werde nur ein Bild wählen. Sie können sehen, dass es genau hier gesetzt wurde, aber es wird nicht unter unserer Kopfzeile gehen und unsere Kopfzeile hat eine Hintergrundfarbe. Das stimmt, aber diese Farbe ist transparent. Selbst wenn ich das loswerde, können Sie sehen, dass wir diesen Kerl nicht haben, den bald werdenden Schieberegler unter unserem Header. Wie können wir also, wie können wir das ändern? werden wir in nur einer Sekunde ändern . Für jetzt, lassen Sie mich einfach zurück zu meiner ursprünglichen Farbe. Ich glaube, es war hier irgendwo jemand. Was ich jetzt tun möchte, ist, dass ich diesem Abschnitt tatsächlich einen Schieberegler hinzufügen möchte. Und ich will es unter meine Kopfzeile setzen. Also fangen wir an, das im nächsten Video zu tun. 70. 11.6er Schieber unter den Kopfsatz: Also haben wir unsere Vorlage fast fertig. Was wir jetzt tun wollen, ist, dass wir den Malloc, den Schieberegler unter unseren Header setzen möchten, aber nicht nur den Schieberegler. Da dies unsere Vorlage sein wird. Und wir möchten unseren Nutzern erlauben, ähnliche Projekte in unser Portfolio aufzunehmen. müssen wir auch nachdenken. Also, was ich tun werde, ist, ich werde zu diesem Abschnitt hinzufügen, ich werde es wie es ist, aber ich werde nur den inneren Inhalt zu diesem Abschnitt auf nur zwei hinzufügen , die sanktioniert oder ich will es nicht wie überall setzen. Ich werde nur diesen Abschnitt in diesen Schieberegler setzen, Schiebereglerelement , wie der Schieberegler Abschnitt. Und ich werde diesen Kerl nur retten. Und ich gehe zurück zum Admin. Ich werde meine Seiten greifen und ich werde auf meine Startseite Startseite gehen , dass ich es mit Sauerstoff hinzufügen werde und ich bin hier in meiner Seite. Also, was ich wirklich tun will, ist, dass ich jetzt an diesem Schieberegler enden will. Da gehen wir hin. Und lassen Sie einige, machen Sie einige einfache Konfiguration. Lassen Sie uns also ändern, lassen Sie uns die Animationsgeschwindigkeit um 350 verringern. Ich schätze, ich möchte die Perrin um die Dias entfernen. Ich ich werde nicht mit diesen Punkten, also brauche ich diese Punkte Overlay Schieberegler Option nicht. Ich will sie. Ich möchte, dass sich die Folien auf die gleiche Höhe dehnen. Und für die Konfiguration will ich keine Pfeile zeigen. Ich will die Punkte nicht zeigen. Ich will es dreitausend Autoplay machen. Lass es uns so lassen, und ich will es unendlich machen. Als nächstes muss ich nur diese beiden Schieberegler loswerden. Was ich tun muss, ist, dass ich hinzufügen muss, aber ich werde kein Bild zu meinem Schieberegler hinzufügen. Ich werde ein Hintergrundbild hinzufügen, weil ich mit der Positionierung der Bilder herumspielen möchte. Also, was diese Folie ausgewählt, Ich werde zum Hintergrundbild gehen und ich werde diese Option greifen. Und während dieses Bild, und ich werde das Bild auswählen, und jetzt für die Hintergrundgröße, werde ich es auf Abdeckung setzen. Ich will nicht, dass es sich wiederholt. Und ich möchte den Fokuspunkt genau in die Mitte setzen. Und wir wissen schon, wie das geht, ist, dass ich mit links 50% und Top 50% gehen werde. Da gehen wir hin. Und natürlich möchte ich, dass sich mein Schieberegler über die gesamte Höhe meiner Seite oder meines Ansichtsfensters erstreckt . Also werde ich mit dem Schieberegler zu Fortgeschritten gehen. Dann werde ich zu Größe und Abstand gehen und 100 für diese 100 vh für meine, für meinen Schieberegler eingeben . Was ich dann tun werde, ist, dass ich meine Folien zweimal duplizieren werde. Und lassen Sie uns das Hintergrundbild vielleicht zu diesem Kerl ändern. Und für den letzten Kerl, lasst uns den Hintergrund zu diesem Kerl ändern. Da gehen wir hin. Lassen Sie mich nur sehen, ob ich die Folien auf unendlich und doch unendlich setze. Also werde ich es einfach retten. Und lasst uns unsere sehen, lass uns unsere Seite sehen. Ich werde das auffrischen. Und da gehen wir hin. Wir haben unseren Schieberegler so funktioniert, wie er sollte. Und natürlich, wenn wir es kleiner machen. Wenn wir also runter und runter und runter gehen, funktioniert der Schieberegler und die Brewer-Breakpoints funktionieren ebenfalls. Also haben wir unsere Titelseite bekommen. Ich werde im Grunde im Grunde erstellt. Nun, da wir dieses Hauptlayout haben, um es zu erstellen, haben wir vielleicht ziemlich viele Schritte unternommen, aber alles in allem, wenn Sie es bekommen, werden Sie sehen, wie viel Flexibilität Sie mit Sauerstoff bekommen, wenn Sie diese schönen Layouts erstellen. Und jetzt, wo wir unsere Titelseite erstellt haben, lassen Sie mich vielleicht einfach die Autoplay ausschalten. Wir haben die Seite, Hauptseite erstellt. Nun ist es eine gute Idee, einige Portfolio-Seiten hinzuzufügen. Wir brauchen das wie eine einzelne Portfolioseite, weil wir wie einzelne Projekte für unser Portfolio hinzufügen möchten. Und natürlich wollen wir auch wie eine Haupt-Portfolio-Seite erstellen. Also werden wir das tun, wie ein visuelles Plugin, das ein visuelles Portfolio genannt wird. Es ist ein nettes kleines Plug-in, mit dem Sie einige wirklich schön aussehende, schön aussehende Portfolios erstellen können. Also fangen wir an, das als Nächstes zu tun. 71. 11.7-Plugin: Also in meinem Plugins-Verzeichnis, werde ich ein neues Plugin hinzufügen und werde nach visuellen Portfolio suchen, dieser Kerl genau hier. Und ich werde es installieren und dann werde ich es aktivieren. Die Art und Weise dieses Plug-In funktioniert, ist es Ihnen erlaubt, Portfolioelemente hinzuzufügen, die im Grunde einzelne Portfolioprojekte sind. Und auch ermöglicht es Ihnen, Layout hinzuzufügen, so dass die Steuerung der Art und Weise Ihres Portfolios. Portfolios, Grundsätzlich Portfolio-Galerien, Luke. Lassen Sie uns also ein schnelles kleines Portfolio erstellen, nur um zu sehen, wie dieses Plug-in funktioniert. Also, was ich tun werde, ist, dass ich ein neues Layout hinzufügen werde. Ich nenne es mein Portfolio. Und hier, wie Sie sehen können, können Sie wählen, welche Elemente in Ihr Portfolio aufgenommen werden sollen. Moment haben wir keine Beiträge, wir werden sie später hinzufügen, aber wir können Bilder hinzufügen. Also werde ich auf Bilder und Bilder klicken. Und ich werde nur all diese Bilder hinzufügen. Mal sehen, wie es aussehen wird. Jetzt funktioniert dieses Plug-in, seit vor kurzem , mit Arbeiterblöcken für gut oder für schlecht. Also hier auf diesem Blog-Element, können Sie sehen, dass wir einige Optionen haben, die wir können, dass wir hinzufügen können, dass wir in unser Portfolio ändern können. Zunächst einmal haben wir unsere Bildeinstellungen direkt hier bekommen. Also, wenn Sie wollen, können Sie diese Titel Ihren, Ihren Bildern überlassen. Wenn wir also den Mauszeiger über diese Bilder zeigen, können Sie sehen, dass wir und die Bildtitel haben, können wir sie auf Bildtitel setzen oder wir können es auf benutzerdefinierte setzen. Ich werde es dem Bildtitel überlassen. Wir könnten diese Beschreibungen löschen, wenn wir es wollten. Wir könnten sagen, dass, zum Beispiel, unsere Beschreibung wäre unsere Bildunterschrift, alt oder Beschreibung. Aber vor allem können wir das Layout unseres Portfolios ändern. Also werde ich auf diese Items Option klicken. Und standardmäßig haben wir diese Fliesen hier, aber wir könnten das Mauerwerk wählen, wenn Sie es wollten. Das Gitter gerechtfertigt oder Karussell. Und natürlich, jedes von diesen Layouts hat es, hat seine eigenen, hat seine eigenen wie sekundäre Optionen. Also lasst uns zu Fliesen gehen. Und wenn wir auf diese Option Kacheln bearbeiten klicken, können Sie sehen, dass wir verschiedene Kacheln haben, verschiedene Kacheln wie Layouts, die wir verwenden können. Also lasst uns vielleicht benutzen, vielleicht dieses hier, das sieht nett aus. Ich werde es so lassen. Wir können die Lücke zwischen unseren Bildern ändern. Ich werde vielleicht wie Gerber gehen. Da gehst du. Und dann, wenn wir auf Artikel Stil gehen, können wir die Art und Weise dieses Ganze ändern, wie dieser Effekt dieser Überlagerung mit der Farbe und dem Titel, wie es aussieht. Also mache ich und zeige den Titel an, aber ich möchte das Datum nicht haben. Und ich möchte das Overlay nur beim Hover anzeigen. So wird es etwa so aussehen. Jetzt können wir es natürlich ändern, um vielleicht wie klassisch. Und das wird mehr oder weniger so aussehen. Wir können es ändern, um zu fliegen, die das Overlay machen würde, überlagern wie fliegen aus einer Richtung des Mauszeigers und entstehen. Es würde es so aussehen lassen. Ich werde mit Fliege gehen. Sieht nett aus. Wir könnten auch die Hintergrundfarbe des Overlay-Hintergrunds ändern. Also lasst uns mit dieser schwarzen Farbe gehen, aber ich werde die Deckkraft reduzieren. Wenn wir also den Mauszeiger über unser Bild bewegen, sieht es so aus. Und wir könnten die Überlagerungstextfarbe ändern, wenn wir wollten. Anstelle von Weiß könnten wir vielleicht so etwas wie Hellgrau machen , vielleicht so. Vielleicht ein bisschen heller grau, so oder sogar heller als das. Da gehen wir. Und es gibt Elemente Klickaktion. Wir können es gerne komplett deaktivieren. Wir könnten die URL, die URL festlegen. Und das würde bedeuten, dass wir, wenn wir auf ein Bild klicken, zu einem Projektportfolio führen und wie eine einzelne Projektportfolio-Seite. Und dann können wir das Pop-up auswählen, das eigentlich nur um unsere Bilder in einem Pop-up-Fenster angezeigt werden zu lassen. Also werde ich dieses Pop-up für jetzt verlassen. Ich werde den Bildtitel und die Bildbeschreibung belassen. Das ist alles in Ordnung. Ich werde nur auf Update klicken. Was wir verwenden werden, ist dieser Layout-Kurzcode genau hier. Also werde ich das kopieren und dann gehe ich zu meiner Portfolio-Seite und ich werde es in meinen Bereich für ihr Portfolio einfügen. Aber lassen Sie uns das in ihrem nächsten Video machen. 72. 11.8-Portfolio hinzufügen: Also werde ich auf die Seiten gehen und ich werde die Portfolio-Seite greifen. Und ich werde es mit Sauerstoff bearbeiten. Und hier drinnen werde ich zur Struktur gehen. Und ich werde nur einen Abschnitt hinzufügen. Da gehen wir. Und in diesem Abschnitt, was wir wirklich tun könnten, ist, wie eine Überschrift hinzuzufügen. Und lasst uns eintippen, was es Portfolio ist. Wenn wir es richtig schreiben, wäre das vielleicht noch besser. Da gehen wir. Und dann werde ich nur einen Text hinzufügen. Genau so. Und lasst es uns lassen, lasst es uns vorerst so lassen. Das Wichtigste ist hier, das Portfolio selbst hinzuzufügen. Also haben wir die Überschrift, wir haben den Text. Jetzt fügen wir das Portfolio hinzu. Also werde ich auf Hinzufügen klicken und ich werde einfach den Kurzcode eingeben. Und ich werde die vollständige Verknüpfung einfügen, die wir gerade kopiert haben. Nur eine Sekunde, und ich werde das retten. Und in diesem Fall könnten Sie vielleicht ein kleines, kleines Problem stoßen, denn wenn wir nur unsere Seite aktualisieren, lassen Sie mich sie einfach aktualisieren. Ich gehe ins Portfolio. Sie können unsere besteuerten sehen, aber dieses Portfolio wird überhaupt nicht angezeigt. Und das passiert, weil unser kurzer Code muss, lassen Sie mich zu Größe und Abstand gehen. Es muss wie eine Breite Werte haben. Ich werde nur 100 Prozent eingeben. Da gehen wir. Sie können jetzt sehen, dass das, dies, dieses, dieses Shortcut-Modul ist nicht, es ist tatsächlich sichtbarer. Wenn wir diesen Kerl auffrischen. Sie können sehen, wie unser Portfolio funktioniert und ordnungsgemäß funktioniert. Und natürlich würde ich gerne gerne hier einige Abstände hinzufügen. Also lasst uns vielleicht wie 50 Pixel machen. Und ich werde hinzufügen, ich bin nicht 50, 50% Pixel. Ich werde es retten. Und dann lasst uns diesen Kerl auffrischen. Und jetzt ist unser Portfolio, funktioniert einwandfrei. Dies ist der Weg, um unser Portfolio hinzuzufügen. Und wenn Sie dieses Layout so belassen möchten, können Sie das tun. Aber wir könnten vielleicht eine schöne Summe in Schwarz hinzufügen, ein schönes Hintergrundbild und ein Overlay. Mal sehen, wie wir das tun können. Wir könnten unsere Resektion ergreifen. Und gerade jetzt, wie Sie sehen können, erstreckt sich es nicht über unsere ganze Seite. Was wir also tun könnten, ist, dass wir unsere erweiterten Optionen Größe und den Abstand greifen und es auf volle Breite setzen. Aber es wird unser, unser Portfolio und unser Kurzcode ganz nach links gehen. Also, was ich tun würde, ist, dass ich Spalten Modul hinzufügen würde. Und innerhalb dieses Säulenmoduls, vielleicht lasst uns etwas wie 50-50 machen. Und lassen Sie uns diese Überschrift in unsere rechte Spalte einfügen , den Text auch in unserer rechten Spalte. Wir legen es einfach in dieses div, Gleiche für den kurzen Code. Und jetzt lasst uns das einfach mit von gebogen ändern, diesem div. Also werde ich vielleicht 25 oder 22 gehen. Und dann werde ich meine Abschnittsgröße und -abstand greifen. Ich will keine Polsterung. Nun, ich denke, es könnte so aussehen. Lass es uns so lassen. Und für den Abschnitt werde ich auch in den Hintergrund gehen und ich werde ein Bild finden. Lassen Sie uns diesen crimp und wählen Sie ihn aus, damit es so aussehen wird. Aber wenn wir jetzt auf unsere, unsere Portfolio-Seite gehen , können Sie sehen, dass es nicht so toll aussieht. Es ist schön, dass dieses Portfolio wie auf der ganzen Seite aussieht. Aber wir müssen einige Dinge ändern, wenn wir diese Farbe ändern müssen. Und vielleicht könnten wir sie ändern, wie das Bild hinten. Und was ich damit meine, ist, wenn wir dieses Hintergrundbild bekommen haben, könnten wir diese Bild-Overlay-Farboption verwenden. Also werde ich mit Schwarz gehen, aber ich werde die Deckkraft in etwas ändern, das lügen, um es dunkler zu machen. Und ich werde schnell die Farbe hier ändern. Und dieser Typ hier. Und vielleicht lassen Sie uns tatsächlich eine Nummer hinzufügen. Bringen wir diesen Wert zurück. Also das 75 Pixel, wenn wir oben und unten sind. Und vergessen wir nicht, den Hintergrund und einen Satz unseren Hintergrund zu greifen, um zu decken. Keine Wiederholung. Und setzen wir es auf 50, 50% Prozent, genau wie wir es vorher getan haben. Jetzt, wenn wir speichern, dass und aktualisieren Sie die Seite oder Portfolio sieht viel, viel schöner. Und wir haben unser Hintergrundbild, und wir haben unser Portfolio mit dem statischen Header so bekommen. Und natürlich bewegt sich auch unser Hintergrund mit unserem Portfolio zusammen. So können Sie ein Portfolio hinzufügen, indem Sie dieses Plug-in hier in, innerhalb unserer, na ja, innerhalb unserer Seite, innerhalb von Sauerstoff. Natürlich ist das Design in diesem Fall viel weniger wichtig. Und was wir noch brauchen, um sich um seine kümmern, natürlich, das wird die Reaktionsfähigkeit, denn im Moment sieht es nicht so toll aus. Also im Grunde, was wir tun müssen, ist, die Spalten zu greifen. Und wir könnten die Spalten einfach vertikal stapeln, vielleicht bei weniger als 992. An diesem Haltepunkt. Lassen Sie uns vielleicht etwas Marge zu unserem ersten div hinzufügen, dieses div auf der linken Seite. Setzen wir es auf vielleicht 20%. Da gehen wir. Jetzt können wir sehen, wie es tatsächlich aussieht. Wie Sie sehen können, haben wir immer noch einige, Sie wissen schon, einige Reaktionsprobleme. Ich meine, wenn wir diesen Haltepunkt erreichen, sieht das Portfolio gut aus. Aber unsere, unsere Dibs nicht. Also lassen Sie uns das im nächsten Video beheben. 73. 11.9-Aufwand: Also wirklich, das einzige, was in Bezug auf Reaktionsfähigkeit, das wir hier beheben müssen , ist dieser Abschnitt, der unseren Header überlappt? Die Kopfzeile sieht gut aus. Das Portfolio passt sich an, aber diese Überschrift, und das sieht nicht so toll aus. Was wir also wirklich tun müssen, ist, wenn wir zu weniger als 768 gehen, hier ändert sich unser Layout. Muss etwas Marge hinzufügen oder vielleicht noch besser wäre es, Padding zu unserem Abschnitt hinzuzufügen weil ich einfach gehen Türme strukturieren diesen Abschnitt, denn wenn dieser Kerl diesen Haltepunkt trifft, wo unser Design diesen Haltepunkt trifft, Wir müssen etwas Polsterung hinzufügen, weil wir unser Hintergrundbild allein behalten wollen , nein, na ja, im Grunde inTact. Also lassen Sie mich zu Erweiterte Größe und Abstand gehen. Und ich werde diesen Kerl von Pixeln zu Prozentsätzen ändern. Und lasst uns versuchen und 40%. Das sollte in Ordnung sein. Lassen Sie mich einfach die Seite aktualisieren und vielleicht lassen Sie mich einfach diesen Kerl schnappen und die Seite aktualisieren. Sie können sehen, dass Sie gerade jetzt etwas Polsterplatz haben und wir haben etwas Platz hier. Aber wenn wir tiefer gehen, wenn Sie für 80 gehen, können Sie sehen, dass wir immer noch genau das hinzufügen müssen. Also werde ich es nur mit 55% versuchen. Und lassen Sie uns das speichern und die Seite aktualisieren. Und da gehen wir hin. Wir haben diese Reaktionsfähigkeit korrigiert. Wenn wir also unser Layout so präsentiert haben, sieht alles gut aus. Wenn wir diesen 7068 Haltepunkt treffen, ändert sich das ganze Layout. Und für 80 ändert sich das Layout auch hier. So können Sie ein Portfolio erstellen, ist sehr einfach Portfolio-Seite. Mit diesem Plug-in namens Visual Portfolio, alles, was Sie tun müssen, ist, einen kurzen Code hinzuzufügen und nie vergessen, es auf 100% in Bezug auf die Breite zu setzen. Wenn Sie 100% sein wollten, geben Sie ihm aber immer einige Breitenwerte an. Und wenn Sie eine wie eine Galerie erstellen möchten, wird. Da gehst du. Aber wenn Sie wollen, wie, machen Sie all diese Bilder auf tatsächlichen Portfolio-Seiten mit ein paar mehr Galerien oder Steuern oder Überschriften, all das Zeug. Nun, Sie müssen eine andere Vorlage hier in Sauerstoff erstellen. Und das ist eigentlich eine sehr nützliche Fähigkeit und eine sehr nützliche Sache. Und wir werden definitiv anfangen, es im nächsten Video zu lernen. 74. 11.10Die einzelne portfolio: Bevor wir also unsere einzelne Portfoliovorlage hinzufügen, empfiehlt es sich, einige Portfolioprojekte bereits erstellt zu haben. Um das zu tun, gehe ich zu unserem Plugin und gehe zu Portfolio-Artikeln. Und diese Portfolioelemente sind einfach benutzerdefinierte Post gewöhnt beide benutzerdefinierte Post-Typen. Und Sie würden sie wie Ihre regulären Beiträge hinzufügen , wenn Sie etwas als Blogger schreiben möchten. Also werde ich nur neue hinzufügen. Und ich werde diesen einen Portfolioartikel eins nennen oder im Portfolioprojekt eins und werde ihn speichern. Und vielleicht werde ich einfach ein paar Lorem Ipsum schnappen, wie immer. Wo haben wir diesen Lorem ipsum Generator? Und ich werde mir nur etwas davon schnappen. Und ich werde MLK Tempo als n vielleicht mit einem Leerzeichen wie diesem eingeben. Und ich gehe vielleicht auch zum Dokument und füge vielleicht etwas als unseren Auszug ein. Aber nicht so viel, aber so etwas. Das sollte gut sein. Und ich werde auch ein Featured Bild vielleicht für diesen Kerl setzen. Und ich werde das veröffentlichen. Und jetzt werde ich nur ein erstellen, vielleicht ein paar mehr, vielleicht drei weitere Projekte. Nein, im Grunde auf die gleiche Weise. Also werde ich das jetzt tun. Okay, wir haben drei Portfolio-Projektelemente mit vorgestellten Bildern und einigen Inhalten im Inneren. Also jetzt werden wir tatsächlich anfangen, unsere Vorlage zu erstellen. Ich gehe zu Sauerstoff und dann Vorlagen. Ich werde einen neuen hinzufügen. Ich nenne es die Port-Folio-Artikel. Ich möchte das Design von unserer Maintend-Vorlage erben. Ich möchte, ich möchte den gleichen Header-Effekt haben. Und dann gehe ich ins Singular. Und ich werde Portfolioartikel finden, die unseren visuellen Portfolioartikeln entsprechen. Ich werde das nur veröffentlichen und mit Sauerstoff editieren. Und im Moment müssen wir nur das gleiche Layout wie zuvor mit unserer Portfolioseite hinzufügen . In meinem inneren Inhalt mit dieser Struktur werde ich einen Abschnitt hinzufügen, der sich über die ganze Seite erstrecken wird. Weil ich meine, du musst es nicht tun. Wenn du es einfach so behalten willst, willst du nicht, dass du das nicht brauchst. Wie ein Overlay-Bild überlagern Sie eine Art Effekt. Sie können, wir können es einfach verlassen, lassen Sie diese Seite wie es ist. Das wird auch gut sein. Da ich also möchte, dass sich mein Hintergrundbild ändert, möchte ich, dass es mit unserem Portfolioartikel übereinstimmt. Ich werde auf die Größe und den Abstand gehen. Ich werde die volle Breite als meine als meine Größe wählen. Und ich will überhaupt keine Polsterung haben. Und jetzt möchte ich gerne in den Hintergrund gehen, die Option verfolgen und Hintergrundbild wählen. Aber anstelle der Browse-Funktion, möchte ich auf die Option Daten klicken und ich möchte Post Featured Bild wählen. Und dies wird, wird unser, unser vorgestelltes Bild aus unserer Datenbank ziehen . Und natürlich, wie Sie wie immer, möchte ich mit der Hintergrundgröße Abdeckung gehen. Keine Wiederholung. Und ich möchte es in die Mitte stellen, also 50% für oben und unten. Und wenn ich dann eine Farbe überlagern möchte, werde ich mit einfachem Schwarz gehen und ich werde die Deckkraft auf so etwas wie 77 fallen lassen. Ich schätze, das sollte in Ordnung sein. Und ich werde diese speichern, weil wir dieses Featured Bild als hinzugefügt, als unser Hintergrundbild. Jedes Mal, wenn wir unser Projekt ändern, können Sie sehen, dass sich dieses Bild ändert. Es wurde aus unserer Datendatenbank herausgezogen. Natürlich, vielleicht siehst du nicht, dass ich geschrieben habe. Lassen Sie mich einfach schnell zu Größe und Abstand gehen. Ich werde die Höhe auf 100 vh erhöhen. Das ist also unser Projekt, ein Projekt für et cetera. Also wird sich dieses Hintergrundbild ändern. Also werde ich das retten. Also, was wir jetzt tun könnten, was wir tun müssen, ist, dass wir die Spalten hinzufügen müssen, um unsere Inhalte zu hosten. Manche werden mit Säulen voran gehen. Wieder, 50-50. Die linke, ich gehe, ich werde es auf 25 setzen. So wird der rote auf 75 gesetzt. Dieser Typ hier. Also an dieser Stelle sind wir bereit, unsere Vorlage zu füllen einige, einige Daten aus unserer Datenbank gezogen. Also fangen wir an, das im nächsten Video zu tun. 75. 11.11Die dynamischen Portfoliodaten hinzufügen: Also in meiner rechten Spalte, dieses div, das wir tatsächlich umbenennen könnten, nennen wir es nadelartiges Portfolio. Portfolio-Inhalte. Da gehen wir. Also, was könnten wir hier hinzufügen? Nun, es wird alles von dem Portfolio abhängen, einzelne Portfolio-Layout, für das Sie sich entscheiden. Also zuerst, wir könnten wie einen Beitrag Titel hinzufügen. Also werde ich voran gehen und ich werde WordPress wählen. Und dann möchte ich dynamische Daten auswählen. Und ich werde voran gehen und Titel wählen. Dann gehen, Wir haben das Portfolio-Projekt für gehen, um die Farbe auf diese weiße Farbe oder die Folie Grau ändern, Vielleicht ist diese weiße, fast weiße Farbe. Da gehen wir. Und natürlich könnten wir all diese Aspekte immer ändern. Du könntest sie ändern, wie du es für richtig hältst. Und natürlich, wenn wir voran gehen und unser, unser Projekt ändern , können Sie sehen, dass sich der Titel dynamisch ändert. So unten, könnten wir vielleicht wie einen Inhalt von unserem, von unserem Projekt hinzufügen. Also, was ich tun werde, ist wieder, ich gehe zu Hinzufügen. Und dieses Mal werde ich mit dem Inhalt gehen. Und wie Sie sehen können, werden meine Inhalte aus der Datenbank gezogen. Und wieder werde ich die Textfarbe in diese hellere Farbe ändern. Aber was wir tun könnten, könnten wir vielleicht bei einigen wie eine Beschreibung unseres Projekts mögen, aber vielleicht möchten wir einige andere Informationen auf der rechten Seite hinzufügen. Also werde ich dieses div greifen und ich werde Text hinzufügen, ein weiteres Stück Text. Aber ich werde nur drinnen klicken, die Einfügedaten schnappen. Und ich werde nur einen Auszug treffen. Und wir werden das retten. Jetzt, wie Sie sehen können, haben wir unseren Auszug hier unten angezeigt. Sagen wir nun, dass ich diese beiden Textstücke nebeneinander stellen möchte. Also würde ich mein div greifen und ich würde sagen, dass diese Elemente horizontal so gestapelt werden sollen. Und wir könnten vielleicht einige Abstände zwischen ihnen hinzufügen. Also dieses erste div, dieser Kerl hier, lass uns hinzufügen wie, mal sehen, vielleicht wie 50 Pixel Rand. Und dann werde ich dieses Stück Text und Größe und Abstand greifen. Und ich werde wie 5050 Pixel von, von marginalem Raum hinzufügen. Jetzt sind diese Elemente natürlich wie inhaltlich verwandt. Dieses Portfolio-Projekt zwei hat nur diesen Inhalt, diesen Text und diesen Auszug. Also werde ich diesen Kerl retten. Ich gehe zurück zu meinem Admin. Und ich werde zu meinen Portfolioartikeln gehen. Und ich glaube, es war das Projekt zwei. Und jetzt wird jede Änderung, die wir hier vornehmen, sich in unserer Projektportfolio-Projektseite widerspiegeln. Wie ich schon sagte, unser Layout, diese Unzufriedenheit, ist dieser Inhalt verwandt. So. Wo auch immer wir hier hineinsetzen, wird in unserem Portfolio-Projekt gezeigt werden. Es muss also nicht nur besteuert werden. Zum Beispiel, wenn wir hier einige Bilder hinzufügen möchten, könnten wir, oder wir könnten sogar ein völlig neues Portfolio hinzufügen. Aber leider hier innerhalb Sauerstoffsensor, denken Sie daran, dass wir wie ein Breitenwert für hinzufügen mussten, für unsere Kurzwahlnummern. Und im Grunde werden diese Jungs nicht wirklich funktionieren, vielleicht, wenn ein Update kommt. Aber für den Moment, wenn Sie auf dieses visuelle Portfolio-Layout klicken und Ihr Layout auswählen, wie Sie sich erinnern können, haben wir es bereits für unsere Hauptportfolio-Seite erstellt. Das wird funktionieren. Wenn wir also nur dieses Layout hinzufügen, also wenn wir zu unserer Portfolio-Projektseite gehen, können Sie sehen, dass wir unseren Titel haben, wir haben unseren Inhalt, wir haben unsere Seitenleiste. Und nun, dieser Auszug, und wir haben unser Portfolio hier. Aber natürlich haben wir hier auch ein bisschen ein Problem. Dieser Abschnitt erstreckt sich nicht über die gesamte Höhe, wenn wir nach unten scrollen unser Bild und während unserer, unsere, unsere, unsere Portfolio-Seite. Also, wie können wir das beheben? Wenn wir zu gehen, wenn wir zu unserer, unsere Vorlage gehen und wir unseren Abschnitt greifen, können wir sehen, dass wir dieses 100 vh Set genau hier haben. Wenn wir es loswerden, Dieser Abschnitt wird sich an die Inhalte anpassen, die es hostet. Aber was wir tun wollen, ist, dass wir die minimale Höhe auf 100 vh setzen wollen. So wird es immer sein, Egal welche Inhalte Sie im Inneren haben, es wird sich immer über die gesamte Höhe erstrecken. Lassen Sie mich einfach diesen Kerl jetzt retten, aber er wird sich auch anpassen, wenn wir nach unten scrollen. Im Moment sieht es so aus. Wenn wir das speichern, aktualisieren Sie die Seite, dass die minimale Höhe auf 100 vh eingestellt ist. So sieht es jetzt so aus, aber die maximale Breite besteht nicht darin, falsch übereinstimmende Menge auf 100 vh zu setzen. So können wir jetzt nach unten scrollen und wir können unser Portfolio direkt hier sehen. Und natürlich, wie ich schon sagte, wird dieses Portfolio-Layout völlig Ihnen überlassen. Du kannst hier reinlegen, was immer du willst. Denken Sie daran, hinzuzufügen, wie die dynamischen Daten, den Titel und den Inhalt und die Ausübung. Wenn Sie so etwas wie eine Sidebar hier erstellen möchten, wenn Sie gerne die Arbeit, die erstellt wurde oder die Technologie, die erstellt wurde, zählen möchten. Wir werden verwenden, um dieses spezifische Projekt zu erstellen. Aber das Wichtigste ist, dass Sie immer sehen werden, Sie werden immer sehen, alle Ihre Inhalte würden dann Ihr spezifisches Portfolio-Projekt, egal welches Projekt Sie wählen, es sind alle dynamischen Daten und alles hängt davon ab, was Sie hier haben. Sie werden es immer hier sehen. Aber unsere Portfolio-Seite, wenn ich nur auf unsere Portfolio-Seite gehe, gehen wir zum Portfolio. So zeigt unsere Portfolio-Seite Bilder. Es zeigt nicht unsere Projekte. Und wie können wir das wirklich beheben? Also lassen Sie uns das im nächsten Video beheben. 76. 12.1die contact hinzufügen: In den nächsten Videos werden wir einen Blick auf das Hinzufügen einer Kontaktseite zu unserer Website werfen. Und wenn wir jetzt einen Blick auf unsere Kontaktseite werfen, können Sie sehen, dass wir nur eine Kopfzeile und eine einfache Fußzeile haben. Was wir also tun müssen, ist, dass wir einige Kontaktinformationen zwischen der Kopfzeile und der Fußzeile und auch ein Kontaktformular hinzufügen müssen . Natürlich müssen Sie kein Kontaktformular hinzufügen. Sie können nur einige Kontaktinformationen eingeben. Aber wenn Sie ein Kontaktformular haben wollen, werden wir lernen, wie es in den nächsten Videos zu tun. Das erste, was wir tun werden, ist, dass wir ein Plugin hinzufügen, eigentlich ein paar Plug-Ins. Die erste wird fließende Formen sein. Das ist dieser Typ hier. Ich werde es installieren und dann werde ich es, und dann werde ich es aktivieren. Und das nächste wird sein, ich denke, das beliebteste Kontaktformular dort ist das, was man Kontaktformular sieben nennt, man könnte davon gehört haben. Also werde ich danach suchen. Wir werden es installieren und dann werde ich es aktivieren. Warum habe ich beide Plug-Ins ausgewählt? Nun, es tut nur, um Ihnen zu zeigen, dass Sauerstoff und arbeitet mit jeder Art von Plug-in und dass Sie wählen können, was Sie wollen. Und eines dieser Plug-Ins, nämlich in den flüssigen Formen, ist, dass Sie nicht viel tun müssen, damit es funktioniert und angenehm aussieht. Und ich denke, das Erstellen eines Formulars ist einfacher als mit dem Kontaktformular. Aber das Kontaktformular ist wirklich einfach und es ist flexibel, wenn Sie wissen, wie es geht. Also möchte ich nur Ihre Fähigkeiten erweitern. Du bist ein erfahrenes Portfolio. Wenn Sie einfach mit einem einfachen wie einem Drag-and-Drop-Kontaktformular-Builder fortfahren möchten. Sie können es mit Sauerstoff tun. Und wenn Sie etwas mehr wollen wie machen Sie es selbst, eine Art Plug-in, können Sie es auch tun. Beginnen wir also mit den fließenden Formen. Das ist also dieser Typ hier. Wir haben bereits wie ein Kontaktformular Demo. Ich brauche es nicht. Ich werde es löschen und ich denke, wir sind bereit, unser erstes Formular hinzuzufügen. Aber bevor wir das tun, müssen wir einige wie ein paar Container haben, wie einen Raum, um unsere Formulare in sie zu legen. Wir werden also zuerst einen Abschnitt und einige Inhalte zu unserer Kontaktseite hinzufügen. Also fangen wir an, das im nächsten Video zu tun. 77. 12.2-Seite aufzubauen: Das erste, was ich tun werde, ist, dass ich meine Kontaktseite mit Sauerstoff bearbeiten werde. Und ich werde nur schnell meine wiederverwendbare Fußzeile und Kopfzeile hinzufügen. Und zwischen ihnen werde ich nur einen Abschnitt hinzufügen. Und ich werde es dort hinbringen, wo es hin muss. Und jetzt könnten wir vielleicht in einigen Spalten einige divs sein, aber lassen Sie es uns einfach halten. Lassen Sie uns einfach einige vorgefertigte Assets verwenden. Also werde ich auf Hinzufügen klicken. Ich werde voran gehen und Bibliotheks-Design-Sets wählen. Vielleicht sind diese atomaren Sanktionen und Elemente. Und lasst uns vielleicht einfach dieses erste Kontaktformular schnappen. Wie Sie sehen können. Wir können dies sogar loswerden, vielleicht in diesem Abschnitt, wie Sie sehen können, haben wir bereits wie eine sehr einfache Kontakt- und Kontaktabschnitt bereit und warten auf uns. Und hier unten können Sie sehen, dass wir dieses div bekommen haben und das Kontaktformular hier steht. Oxygen arbeitet mit beliebigen Formularen Plugin. Und das ist eigentlich ein Ort, an dem Sie Ihr Kontaktformular stellen können. Natürlich können Sie es überall hinstellen, wo Sie wollen. Aber da wir dieses Design greifen wollen und wir wollen es als unsere Referenz verwenden. Wir werden hier unser Kontaktformular stellen. Aber um das zu tun, lassen Sie mich zuerst das Symbol und den Text entfernen. Und das wird unser Kontaktformular sein. Wochenende kann sogar in diesen Kerl umbenannt werden, nur damit wir sehen können, was wir hier tun. Also kontaktiere, da gehen wir. Und in diesem div, diesem Kontakt-div, werden wir unser Kontaktformular setzen. Lassen Sie uns nun zuerst das erste Kontaktformular erstellen und es in dieses div einfügen. 78. 12.3-Zufügung des ersten Kontaktformulars: Also lassen Sie mich einfach zu unserem gehen, zu unserem Plugin. Also werde ich uns unsere fließenden Formen schnappen. Und ich werde ein neues Formular hinzufügen. Und wir könnten ein neues leeres Formular erstellen. Aber ich werde nur schnell dieses grundlegende Kontaktformular verwenden. Und ich werde auf Formular erstellen klicken. Und hier, wie Sie sehen können, haben wir unser Vorname Feld, Nachname, E-Mail-Adresse, Betreff und Ihre Nachricht. Und wenn wir den Mauszeiger über jedes einzelne dieser Elemente bewegen, können Sie sehen, dass wir einige Aspekte des Geistes ändern können, dass einige der Funktionen nur verfügbar sind, nur in den Pro-Versionen einiger Plug-Ins. Aber in der Regel für wie die grundlegende, grundlegende Kontaktform von Funktionalitäten, sollten sie ausreichen. Also jedenfalls, sobald Sie alle Ihre Anpassungen vorgenommen haben und nein, möchte ich Sie nicht mit dem langweilen, Sie wissen schon, Klicken und Ändern in jedem kleinen Aspekt davon. Ich ermutige Sie, alle verfügbaren Optionen zu ändern oder zu überprüfen , sobald Sie Ihr Go-to Kontaktformular Plugin auswählen. Aber im Moment lernen wir nur, wie man ein Kontaktformular auf unserer Seite hinzufügt. Also, sobald es fertig ist, werde ich wählen On Click on Save Formular. Und Sie können sehen, dass Sie hier oben diese fließende Form ID gleich zwei in diesem Fall haben. Und das ist eigentlich etwas, das die Verknüpfung genannt wird, was im Grunde ein Code ist, der es Arbeitern ermöglicht, eine bestimmte Operation auszuführen. In diesem Formular wird es uns ermöglichen, unser Kontaktformular anzuzeigen. Sobald wir es also in unsere Zwischenablage kopiert haben, können wir zum visuellen Sauerstoff-Editor zu unserer Seite gehen, genau hier in diesem div, können wir nicht einfach diese kompakte Formularverknüpfung einfügen können wir nicht einfach diese kompakte Formularverknüpfung einfügen. Das würde nicht funktionieren. Wir müssen zuerst einen speziellen Behälter für diese Abkürzung für Sauerstoff hinzufügen, um zu wissen, dass es eigentlich diese Abkürzung machen soll. Und dass dieses Modul, dieses Element glücklicherweise als einfacher Kurzcode bezeichnet wird. Und wenn wir diese Verknüpfung in diese vollständige Short-Cut-Box einfügen, können Sie sehen, dass unser kurzer Code hier schön gerendert wird. Also, wenn wir jetzt zu unserem Kontaktformular Gold-Kontaktseite gehen, werde ich auf Kontakt klicken. Sie können sehen, dass wir unser Kontaktformular bereit haben und auf uns warten. Und vergessen Sie nicht, dass wir immer eine Änderung wie diese Ausrichtung von Mitte nach links vornehmen können . Wir könnten auch mit dieser Polsterung hier dieses div herumspielen. Aber wenn Sie einige Aspekte über dieses Kontaktformular ändern möchten, müssen Sie es von diesem spezifischen Plug-Ins Schnittstelle tun, da dies nur unsere Verknüpfung und die Art und Weise, wie es hier innerhalb dieses Plugins eingerichtet wurde. So können Sie einen einfachen Kurzcode, einfaches Kontaktformular eingeben. Und nun gehen wir zu unserem nächsten Kontaktformular-Plugin, das Kontaktformular sieben genannt wird. Und dieses Plug-in ist vielleicht ein bisschen schwieriger, ich schätze, um damit zu beginnen. Aber es ist definitiv, auf jeden Fall wert lernen, denn es gibt Ihnen viele, viele Möglichkeiten. Gehen wir also weiter zu diesem Plug-In. 79. 12.4Kontaktformular hinzufügen: So heißt unser zweites Kontaktformular-Plugin Kontaktformular 7. Lassen Sie mich zunächst ein neues Kontaktformular erstellen. Also, aus dem Plug-in-Menü, werde ich nur auf Hinzufügen klicken. Und ich werde es mein Kontaktformular nennen. Und wie Sie sehen können, kommt es mit einigen vorinstallierten Codes und Sie wissen, wie vorinstallierte Felder, die Sie verwenden können. Aber wenn Sie etwas mehr hinzufügen möchten, können Sie aus dieser Menüleiste wählen, denke ich hier an der Spitze. Und im Grunde ist die Art und Weise, wie es funktioniert, genau wie jedes andere Kontaktformular, jedes andere kurze Codegenerierungs-Plugin. Also, wenn wir zu unseren Kontaktformularen gehen, können wir diese Kontaktformularverknüpfung greifen. Ich werde es kopieren. Gehen Sie wieder auf unsere Sauerstoff-Seite. Und jetzt anstelle dieser flüssigen Form Verknüpfungen, können wir einfügen und diesen Kontakt von sieben Kurzwahlnummern. Und wie Sie sehen können, haben wir unseren Kurzcode und unser Kontaktformular erstellt und eingefügt. Aber wie Sie sehen können, sieht es schrecklich aus und es sieht nicht so schrecklich aus, nur im Backend, wenn Sie zum Frontend gehen, es kommt völlig unstylt. Und das ist, denke ich, eine der größten Herausforderungen, ich denke, jeder Designer oder sogar Entwickler steht vor, wenn er mit diesem Kontaktformular arbeitet, es kommt völlig unstylt, weil es darauf abzielt, wirklich leicht und schnell zu sein. Es gibt also keinen Stil, der ihm zugewiesen wird. Und das ist etwas, das wir manuell tun müssen, und Sie könnten es mit einem Plug-in tun. Sie könnten ein anderes Plug-in greifen und einfach Vorlagen verwenden. Sie können sie für sich selbst entdecken. Aber was ich möchte, dass Sie verstehen und lernen, ist, wie Sie benutzerdefinierten Code hier in Sauerstoff hinzufügen können. Dies mag ein bisschen fortgeschrittener sein, aber es ist definitiv, definitiv wert. Und, äh, sobald Sie besser in der Entwicklung von Websites sind, werden Sie definitiv wollen, wollen, wenn nicht, den Code bearbeiten, zumindest nur einen Code, den Sie ihn online finden, und fügen Sie ihn dann einfach in die sauerstoff. Also lasst uns das eigentlich im nächsten Video machen. Mal sehen, wie wir einen flüssigen vorgerenderten Code anwenden können, den ich vorgerendert der hier in einem Kontaktformular geschrieben wurde, das Sie zu Ihrem Kontaktformular hinzufügen können, sieben Formulare. 80. 12.5-Kontaktformular: Also, wenn wir wissen wollen, wie Sie Ihr Kontaktformular sieben stylen, können wir zu Kontaktformular sieben gehen und wählen. Lassen Sie es uns so sagen. Und dann gehen wir zum offiziellen Kontaktformular sieben Seite. Sie können sehen, dass wir einige schöne Stücke von Informationen, die Sie einfach nur kopieren und einfügen können, so dass Sie Ihr Kontaktformular n. Nun, das ist sehr praktisch. Ich empfehle Ihnen, diese Seite griffbereit zu halten. Aber was ich definitiv noch mehr empfehlen würde, ist, diesen Code griffbereit zu halten. Dies ist der Code, den ich geschrieben habe, den Sie verwenden können. Auf jeden Fall, lass es mich vielleicht ein bisschen säubern. Und wir werden es auf unser Kontaktformular anwenden. Und Sie werden sehen, wie schnell wir das Aussehen unseres Kontaktformulars ändern werden und Sie werden sehen, was dieser Code tut. Also, was ich tun werde, ist, dass ich einfach alle diese CSS-Regeln kopieren werde. Wir gehen zurück zu Sauerstoff. Aus dem Bedienfeld „Verwalten“ und dann „Stylesheets“ werde ich auf „Stylesheet hinzufügen“ klicken. Und ich nenne es Kontakt, Kontaktformular. Und ich werde auf OK klicken. Und wie Sie sehen können, was wir bekommen, ist diese leere, leere Leinwand, ich denke, leeres Fenster, in dem wir tatsächlich unser benutzerdefiniertes, benutzerdefiniertes CSS hinzufügen können. Also, was wir wirklich tun müssen, ist, den Doppelpunkt einfach einzufügen. Und wie Sie sehen können, ändert sich dieses ganze, ganze Kontaktformular in einem Augenblick. Und wenn Sie sich diese Selektoren genau hier ansehen, können Sie sehen, dass sie sich nur auf unsere beziehen, auf unsere Eingabe. Keine Textfelder, E-Mail, Textbereich, das ist dieser Typ hier. Dieser Typ ist unser Submit-Button, dieser Typ hier. Und all dies, all diese CSS-Regeln sind ziemlich einfach, leicht zu verstehen. Alles, was wir hier tun, ist, dass wir die Breite 100% machen. Wir sagen, dass die Schriftfamilie rubato sein soll, die Schriftart, die ich gewählt habe. So grundlegend, im Grunde könnten Sie Ihre Google Fonts direkt hier verwenden. Und wir können vielleicht, denn wenn wir hier über diesen Kerl schweben, können Sie sehen, dass er seine Farbe ändert, sehr, sehr hellgrau sammelt. Aber ich möchte meine Standardfarbe greifen. Ich denke, es waren globale Stile. Ich gehe zu Farben und Standardfarben. Und das ist, das ist, das war diese braune Kopie. Ich gehe zurück zu meinem Kontaktformular Stylesheet und ich werde nur diesen Kontakt ersetzen. Hintergrundfarbe schwebte auf diese braune Farben-Energie-Gemeinschaft, wenn Sie den Mauszeiger über, dieser Kerl, ändert sich so. Also werde ich diesen Kerl retten. Und dann werde ich nur die Seite aktualisieren. Und Sie können sehen, wir haben unser Kontaktformular erstellt, und natürlich funktioniert es einwandfrei. Aber all diese Elemente müssen gepflegt werden, wie diese Anforderung Felder alle diese Nachrichten. Sie müssen von diesem Plug-in, einer Plug-in-Schnittstelle genau hier, betreut werden. Also haben wir unser Label hier. Wir kamen zu dieser E-Mail, wir haben Ihren Betreff. Und natürlich müssen wir sagen, an welche E-Mail dies alle Formular-Einsendungen gehen müssen. Sie haben den Nachrichtentext bekommen. Wirklich. Zuerst kann dieses Plugin aussehen, wie es ist ein bisschen schwierig zu lernen, aber wenn Sie es nur wie ein paar Minuten, ein paar Minuten, werden Sie sehen, dass es tatsächlich ziemlich einfach zu verstehen, was ist, was hier vor sich geht. Also gehen wir hin. So einfach ist es, hier ein Kontaktformular in einem Sauerstoff hinzuzufügen. Und wie ich bereits sagte, können Sie nicht einfach Ihre Kontaktformularseiten mit einigen einfachen Kontaktinformationen wie hier verlassen . Aber wenn Sie ein Kontaktformular hinzufügen möchten, müssen Sie ein Kontaktformular-Plugin hinzufügen. Es gibt kein eingebautes Modul in Sauerstoff wie es ein indivi, taub, aber ich denke, es gibt Ihnen mehr Flexibilität, unabhängig davon, welches Plugin Sie für Ihre Kontaktformulare verwenden möchten, Sie können es hier in Sauerstoff verwenden und es ist nur eine Angelegenheit , um eine Verknüpfung hinzuzufügen. Übrigens, können wir bearbeiten, wo immer Sie wollen? Wenn wir auf unsere Seite gehen, gehe ich einfach zu meiner Struktur. Ich werde nur diesen kurzen Code duplizieren. Und lassen Sie uns sagen, dass ich es auslöschen möchte. - Ich weiß es nicht. Sagen wir mal, vielleicht irgendwo hier. Sie können sehen, dass die Verknüpfung hier oben gerendert wurde. Also, egal wo Sie es hinstellen, Sie werden Ihr Kontaktformular sehen. Genau, wo Sie, wo Sie Ihre, Ihre kurze kohärente Seite dieser Struktur und diese Schichten. Also gehen wir hin. So können Sie hier im Sauerstoff ein Kontaktformular anlegen. Wie Sie sehen können, ist es so einfach wie nur das Hinzufügen eines einfachen Kurzcodes, eines einfachen Plug-ins, und Sie können loslegen. 81. 13.1Die Gestaltung für ein Rechtsanwaltsbüro: In den nächsten Videos werden wir tatsächlich lernen, wie man eine Website erstellt, natürlich in Sauerstoff. Und dieses Mal werden wir einem bestimmten Design folgen. Es, dieser hier würde es darum gehen, alles zu lernen, was es über Sauerstoff zu wissen gibt. Wir werden uns lieber darauf konzentrieren, die Standortbasis auf einer Basis auf einem Design zu erstellen. Und ich beschloss, nur eine Anwälte Website zu erstellen, die ungefähr auf diesem Design basieren wird. Und ich habe gerade beschlossen, dass es, es ist, es ist vielleicht nicht wie das beste Design der Welt, aber es, es hat einfach wie die meisten, die typischsten und Komponenten in einer Website wie dieser. Also haben wir hier einen und einen klebrigen Header. Und dieser Header ist, naja, nicht zu kompliziert, aber nicht zu einfach. Wir haben ein paar Informationen, Logo und eine Speisekarte. Dann haben wir einen Schieberegler. Werden sie flehen wie ein Sack-Bodenschieber mit etwas Text hier zu murren? Und dann haben wir einen Text bekommen, einige Bilder wie diese Bilder sind, sie sehen nicht so toll aus. Also werden wir diesen Abschnitt direkt hier austauschen. Vielleicht werden wir, wir werden einige Parallaxen-Effekte machen. Dann haben wir hier einige Icons mit einigen Übergangseffekten. werden wir auch tun. Aber vielleicht werden wir einen anderen Übergangseffekt machen. Dann haben wir einen Abschnitt mit, mit einigen Texten, wir haben einen Teambereich, und wir haben einen anderen Schieberegler mit einigen Zeugnissen, einen Blog, einen einfachen Blog, real, genau hier. Ein weiterer Abschnitt mit Hintergrundbild und überlagertem Text. Wir haben ein, wir haben hier ein Kontaktformular, wie einen Kontaktabschnitt und eine einfache Fußzeile. Alles in allem haben wir eine ganze Menge Elemente, die Sie in einer typischen Website verwenden und erstellen möchten. Also dachte ich, dass dies ein guter Bezugspunkt für uns wäre. Außerdem habe ich mein Design hier, also rufe ich einfach Pete an. Ich habe einen Screenshot dieser Website gemacht und das erlaubte mir, ein Designsystem wie ein sehr, sehr einfaches Design, ein System für unsere Website zu erstellen . Also haben wir die Farben bekommen, die wir in unserem Design verwenden werden. Wir haben die Schriftarten. Also für die Überschrift, so werden wir mit den purpurroten Text und Körper-Tags werden geöffnet Sinn. Und diese beiden Schriften sind Google Fonts, Schriften, Ich habe schnell ein einfaches Logo erstellt, das im Grunde ein Buchstabe L ist, um sie von der purpurroten Textschrift zu nehmen und vor einem runden Hintergrund zu setzen. Und ich habe gerade einige Symbole von flachen Symbol heruntergeladen und ich fügte hinzu, dass, die gleiche hellrote Farbe und zu diesen Elementen. Und ich habe auch einige, einige Bilder hinzugefügt , also sind das meine Icons. Ich habe auch einige Bilder für unseren Schieberegler, für unser Team und für einige Parallaxen- oder Hintergrundbildeffekte. Und ich werde all diese Bilder auf unsere Website hochladen. Also denke ich, wir sind bereit, bereit zu beginnen, unser Design zu erstellen. Und wir werden dieses Design auf einer völlig neuen WordPress-Installation erstellen. Und das ist ein echter Server, so dass Sie das Design später sehen können. Und das erste, was wir tun werden, ist, dass wir wie eine Homepage hinzufügen oder vielleicht einfach ein einfaches, einfaches Menü hinzufügen und dann anfangen, unsere Seite, unsere Seite, unsere Seite in Sauerstoff zu erstellen . 82. 13.2Die Menüeinträge hinzufügen: Also habe ich beschlossen, ein einfaches Menü für meine Website zu erstellen. Gehen wir also zu Erscheinungsbild und Menüs. Und hier drin, wie Sie sehen können, habe ich nur eine Seite. Das wird unsere Homepage sein, und das ist diese Seite hier. Und ich habe auch beschlossen, einige einfache Menüpunkte wie Praxisbereiche, Anwälte, Fallstudien, Bloggen und Kontakt hinzuzufügen . Und wie Sie sehen können, sind sie alle einfache, einfache Links. Sie verlinken nicht auf tatsächliche Seiten. Und wenn Sie es tun möchten, können Sie einfach zu benutzerdefinierten Links für die URL gehen, geben Sie einfach das Hash-Symbol ein. Und für diesen Link Texte, ich denke, wir könnten vielleicht etwas wie drei kostenlose Zitate eingeben, fügen Sie das zu unserem Menü. Und wie Sie sehen können, wird dieser benutzerdefinierte Link zu unserem Menü hinzugefügt. Aber ich möchte hier keinen kostenlosen Angebotslink haben, weil wir einen Button zu unserem, zu unserem Menü hinzufügen werden. Und so werde ich es einfach entfernen. Aber das ist die Art und Weise, wie Sie wie ein Dummy-Handbuch hier in WordPress erstellen würden . Fügen Sie also einfach benutzerdefinierte Links hinzu, wenn Sie die Seiten nicht hinzufügen möchten und Sie wären im Grunde gut zu gehen. Also, sobald wir, sobald wir das Menü, wir gehen Türme Einstellungen, Lesen, und lassen Sie uns sicherstellen, dass wir tatsächlich gesehen werden. Unsere statische Homepage ist unsere Hauptseite. Und wenn wir auf unsere Seite gehen, können Sie sehen, dass wir hier im Grunde nichts haben. Und das ist, weil wir zuerst eine Vorlage erstellen müssen, die unsere Hauptvorlage, Hauptvorlage für die Überschrift und für die Fußzeile. Das ist es, was ich als Nächstes tun werde, beginnend mit dem nächsten Video. 83. 13.3die Hauptvorlage 13: Also lassen Sie uns unsere Hauptvorlage hinzufügen und ich werde zu Sauerstoff und dann Vorlagen gehen. Und hier werde ich eine neue Vorlage hinzufügen, die ich Haupt nennen werde. Da gehen wir hin. Und wenn wir zu anderen gehen, und dann lassen Sie uns wählen fangen alle. Das bedeutet nur, dass diese Vorlage wird alle Seiten auf unserer, auf unserer Website zu rendern. Und ich werde einfach auf die Veröffentlichung gehen. Da gehen wir hin. Also, jetzt werde ich auf Bearbeiten mit Sauerstoff klicken. Und bevor wir anfangen, einige Dinge in unsere Vorlage zu setzen, bevor wir anfangen, die Kopfzeile und die Fußzeile und den inneren Inhalt hinzuzufügen, lassen Sie uns tatsächlich unsere Design-Elemente hinzufügen. Also lassen Sie uns die Farben hinzufügen. Legen wir die Schriftart fest. Also werde ich nur schnell greifen oder erste Farbe, dieser Kerl hier. Und dann gehe ich zurück zu Sauerstoff. Und gerade jetzt werde ich gehen, um Einstellungen zu verwalten. Dann gehe ich zu globalen Stilen, Farben. Und hier werde ich ein Farbset hinzufügen. Ich nenne es TM-Anwälte. Ich werde das Set hinzufügen und ich werde anfangen, andere Farben hinzufügen. Also wird unsere erste Farbe wie dunkelblau sein. Und ich werde es diesen Hashtag hinzufügen, diesen Hex-Code tatsächlich. Dann werde ich uns unsere rote Farbe holen. Also werde ich diese Farbe an der Farbe kopieren, ich werde es in dieser Farbe ein hellrot nennen. Dann werde ich das wie fast schwarze Farbe greifen, glaube ich, Farbe hinzufügen. Ich werde es nennen. Nennen wir es einfach. Nennen wir es Text. Dies wird unsere Textfarbe sein. Dann werde ich nur, Ich werde diese einfache weiße Farbe hinzufügen. Lass mich zurückgehen und färben. Ich nenne es nur Weiß. Und ich schätze, wir könnten es sogar von unserem Selektor nehmen, nicht von der Plakette. Ich will, dass es weiß ist. Wir gehen und dann lasst uns diese rosa Farbe schnappen. Da gehen wir hin. Geht zurück zu Sauerstoff und Farbe. Und wir werden es blink nennen. Und der Code an der Farbe. Und ich werde einfach alles retten. Also hat er 12345 Farben und ich denke, es ist ein guter Anfang. Wir können es so lassen. Aber jetzt möchte ich die Schriftarten hinzufügen. Also unsere Display-Schriftart ist, dass der purpurrote Text? Also, wenn Sie es hier nicht sehen können, geben Sie einfach purpurroten Text ein. Und da gehen wir hin. Und unsere Schrift für die Textschriftart wird geöffnet sein. - Sans. Da gehen wir hin. Und ich werde das nur retten. Also, jetzt haben wir unsere Farben, wir haben unsere Schriften. Also jetzt sind wir eigentlich bereit, einige Inhalte zu unserer Vorlage hinzuzufügen. Also fangen wir an, das als Nächstes zu tun. 84. 13.4Kopfzeilen: Unsere Pflegetemplate wird also im Grunde unseren Header, den inneren Inhalt und die Fußzeile hosten . Also werde ich einfach mit unserem Header beginnen. Also gehe ich weiter und klicke auf Hinzufügen und tippe den Header ein. Und ich möchte den Header-Builder auswählen. Und in diesem Header-Builder haben wir natürlich unsere Header-Zeile bekommen. Also unsere Kopfzeile, wenn wir einen Blick auf unsere Designsprachen werfen, gehen Sie nach oben, oben, den ganzen Weg hier hoch. Es hat einfach wie ein dunkler Hintergrund. Wir haben ein Logo auf der linken Seite. Wir müssen, wir müssen Menü und einige zusätzliche Informationen mit einigen Icons hier. Und so werden wir alle diese Komponenten hinzufügen, aber vielleicht werden wir das Layout ein wenig ändern. Ich bin kein großer Fan davon, wie dieses Layout genau hier angelegt wurde. Ich möchte sie und das Menü auf der rechten Seite und das Logo in die Mitte setzen. Aber ich denke, dass diese Typen hier oben bleiben können. Also, was ich tun werde, ist, dass ich zuerst eine Hintergrundfarbe zu meiner, zu meiner Speisekarte hinzufügen werde . Da gehen wir. Ich werde es retten. Und jetzt werde ich nur ein Logo hinzufügen. Also, dafür werde ich klicken und, und ich werde ein Bild eingeben. Und ich werde versuchen, es von meinem zu finden, Ich werde versuchen, es in meiner Mediathek zu finden. Das ist dieser Typ hier, und ich werde das einfach einfügen. Speichern Sie es und aktualisieren Sie die Seite. Also habe ich mein Logo hier, aber es ist, ich denke, es ist ein bisschen zu groß. Lassen Sie uns so etwas wie 50 Pixel versuchen. Ich schätze, das sollte auf der rechten Seite sein. Und ich würde gerne wissen, geben Sie einfach den Text Anwälte hier neben dem L-Logo. Also, was ich tun werde, ist, dass ich einfach auf Hinzufügen klicken werde. Und ich werde in der Überschrift tippen. Ich werde auf Hinzufügen klicken. Und ich werde die Textfarbe in diese weiße Farbe ändern. Oder vielleicht gehen wir mit der roten Farbe und lassen Sie uns Pin Anwälte eingeben. Da gehen wir. Und lassen Sie uns die Größe dieses Textes ändern. Und lass mich vielleicht etwas wie 32 sehen. Ich schätze, das sollte gut sein. Und wenn wir zur Typografie gehen, will ich sie kapitalisieren. Und vielleicht werde ich einfach wie das ein Pixel für den Buchstabenabstand eingeben. Das sollte in Ordnung sein. Und wenn wir zu unserer Struktur gehen, können Sie sehen, dass dies tatsächlich erfüllt dieses Bild und diese Überschrift werden in dieser Zeile, linken Teil Spalte gesetzt , denke ich. Aber wir können nicht wirklich auswählen, wir können nichts dagegen tun. Und ich möchte vielleicht einige Abstände zwischen diesen Elementen hinzufügen. Aber was ich auf jeden Fall gerne tun würde, ist sicherzustellen, dass diese Jungs schön vertikal in Bezug zueinander zentriert sind. Also, was ich tun werde, ist, dass ich einfach diese Bildebene greifen werde und ich werde auf Rapid div klicken. Setzen Sie, das hatte eine Einsicht, dass div. Und wenn das Diff ausgewählt wurde, werde ich sicherstellen, dass meine untergeordneten Elemente horizontal gestapelt werden. Dort gehen wir, und dass die vertikale Ausrichtung auf Mitte gesetzt ist. Dann kann ich einfach das Bild greifen und vielleicht etwas Platz in die signierte Ente hinzufügen. Lassen Sie uns zehn Pixel des Randes auswählen. Vielleicht weniger als das. Fünf sollten es sein. In Ordnung. Und vielleicht lassen Sie uns einfach einige, einige Abstände für unsere, für unsere Zeile hinzufügen . Also werde ich zu Erweiterte Größe und Abstand gehen. Und lassen Sie uns versuchen, wie vielleicht 25 Pixel Polsterung oben und unten. Oder vielleicht sogar mehr als, als, lasst uns sehen 35. Ich schätze, das können wir später ändern. So wie Sie in nur wenigen Klicks sehen können, haben wir unser Logo hinzugefügt. Vielleicht werde ich diesen Kerl nur ein bisschen kleiner machen auf so etwas wie 42, vielleicht sogar 36, oder vielleicht sogar vier. Gehen wir mit 40. Aber es gibt ein glückliches kleines Problem damit. Ich meine, ich möchte, dass die Leute auf dieses Logo klicken können , wenn sie auf unsere Titelseite zurückkehren wollen. Und wie Sie jetzt sehen können, kann ich auf eines dieser Elemente klicken. Also werde ich mein div schnappen. Und hier in der oberen linken Ecke, werde ich auf diese Link-Einstellungen Option klicken. Und das wird tatsächlich dieses ganze div in einen Link einbinden. Und im Moment werde ich nur, Ich werde nur diese Homepage auswählen und dann den Link hinzufügen. Also, jedes Mal, wenn jemand auf dieses div auf diesen Link klickt, Rapper, er waren wir , wird sie auf unsere Hauptseite geleitet. Also werde ich diesen Kerl retten. Und ich schätze, wir haben unser Logo komplett. Also lassen Sie uns jetzt vielleicht so zusätzliche Informationen hinzufügen, diese Jungs hier rechts. Und dann lassen Sie uns unser Menü hinzufügen. Also fangen wir an, das als nächstes zu tun. 85. 13.5-Menü hinzufügen: Also fangen wir mit diesen Jungs an, dann, den Symbolen und dem Text. Also, was ich tun werde, ist, dass ich ein Symbol hinzufügen werde. Da gehen wir hin. Aber ich möchte sicherstellen, dass dieses Symbol hier in der Reihe steht, richtig? Und natürlich werde ich den Kerl in der Farbe auf unsere rote Farbe ändern. Und ich werde es von den Daumen hoch in so etwas wie ein Telefon ändern. Ich glaube, es war ODER Telefon. Gehen wir mit dem hier. Und hier oben haben wir diese Symbolstil-Optionen, so dass wir mit Umriss gehen können, solide oder nicht. Ich werde mit soliden gehen. Und ich werde die Farbe des Symbols ändern kann unsere, diese unsere Haupt dunkle Farbe. Und ich werde die Hintergrundfarbe so in unsere rote Farbe ändern. Und natürlich, lassen Sie uns die Größe in etwas viel, viel Kleineres ändern. Irgendwas wie vielleicht sogar 12. Und lassen Sie uns den Raum um das Symbol auf etwas wie zehn ändern. Ich schätze, das sollte in Ordnung sein. Natürlich könnten wir mit diesen Werten herumspielen wie machen Sie den Raum um Symbol zu etwas wie fünf. Machen Sie das Symbol wie einige wie 16. Das wird völlig, völlig bis zu Ihnen haben völlige Freiheit, wenn es darum geht, diese Symbole zu erstellen oder diese Symbole hier in einem Sauerstoff anzupassen. Also, neben diesem kleinen Symbol, müssen wir den Text hinzufügen. Also werde ich nur auf Hinzufügen und dann Text klicken. Lassen Sie mich einfach auf diesen Kerl hier klicken. Und ich glaube, das war die Telefonnummer. Also lasst uns wie 180080555 machen. Warum nicht? Und lassen Sie uns die Textfarbe in unser Weiß ändern. Und lassen Sie uns vielleicht ihre Schriftgröße auf etwas wie zehn ändern. Oder 12. Ich schätze, 12 sollten sein, sollte in Ordnung sein. Und auch, lassen Sie uns vielleicht etwas Marge zu unserem Symbol hinzufügen. Gehen wir also zu Erweiterte Größe und Abstand. Und lassen Sie uns etwas hinzufügen wie mal sehen, fünf Pixel Rand. Ich schätze, das sollte in Ordnung sein. Wenn wir also jetzt einen weiteren Satz hinzufügen wollen, der aus einem Symbol und einem Text besteht, wenn wir diesen Kerl und diesen Kerl duplizieren würden, müssten wir immer noch wie die Positionierung dieser Elemente ändern. Also werde ich diesen Text schnappen und ihn hier aufstellen. Und vielleicht lassen Sie uns einige Abstände hinzufügen. Also wieder, erweiterte Größe und Abstand. Lasst uns so etwas wie Stan machen, zehn Pixel Rand. Ich schätze, das sollte gut sein. Lassen Sie uns dieses Symbol ändern, um Mail-Symbol zu mögen, so etwas. Vielleicht Umschlag. Das hier wäre besser. Und lasst uns diesen Text ändern. Lasst uns wie Kontakt bei Anwälten. Lawyers.com war es so zu tun. Vielleicht ohne Apostroph. Lasst uns einfach lawyers.com machen. Das sollte in Ordnung sein. Der nächste Schritt wäre also, einfach ein Menü unter diesen Elementen hinzuzufügen, also unter diesen Textteilen. Aber vorher möchte ich nur die Reaktionsfähigkeit überprüfen, weil es eine gute Idee ist, einfach die Reaktionsfähigkeit zu überprüfen, während Sie gehen, nur um einige böse Überraschungen zu vermeiden. Später, wenn Sie andere Elemente Ihres Designs zu Ihrer Website hinzugefügt haben. Bevor wir also anfangen, unser Menü hinzuzufügen, überprüfen wir die Reaktionsfähigkeit. Im nächsten Video. 86. 13.6-Aufnahmegerät: Lassen Sie uns nun überprüfen, wie sich unser Hetero auf kleineren Geräten verhalten würde. Also lassen Sie uns auf Seite Container 1120 und darunter gehen. Es sieht immer noch in Ordnung aus, 992. Das ist in Ordnung zu 768. Nun, all diese Elemente sehen nach meinem Geschmack etwas zu eng aus. Also, was ich tun werde, ist, dass ich einfach zu allen Geräten zurückgehe, werde den Header-Builder greifen, oder wir könnten die Header-Zeile greifen, wenn wir wollen. Und dann rechts hier können Sie den Stapel vertikal unter der Option sehen. Wenn wir also Stapel vertikal unter weniger als 768 wählen, wenn wir diesen Haltepunkt treffen, können Sie sehen, dass unsere Elemente beginnen viel, viel besser aussehen. Aber vielleicht schnappen Sie sich auch unser Logo. Das ist also dieser Link hier. Und vielleicht könnten wir so etwas mehr Abstände hinzufügen. Das sollte sein, das sollte in Ordnung sein. Also schätze ich, dass, wenn wir zu 488 gehen, immer noch in Ordnung aussieht. Also, jetzt könnten wir einfach einfach unser Menü wie pro manuelles Element zum Beispiel greifen und es einfach unter diese Elemente direkt hier setzen. Also diese Telefonnummer und E-Mail-Adresse genau hier. Also fangen wir an, das im nächsten Video zu tun. 87. 13.7-Elemente hinzufügen: Sie uns von unserem Tools-Panel LassenSie uns von unserem Tools-Panelein Menü hinzufügen. Und ich werde mit der Pro-Manie gehen. Und natürlich will ich es hier nicht sagen. Ich will es genau hier setzen. Aber wie Sie sehen können, sieht es nicht so gut aus. Ich meine, wir wollen, dass dieses Menü unter unseren Elementen oder unter diesen Symbolen und diesen Texten PUT wird. Also ich denke, was wir tun könnten, ist, dass wir diese Elemente einfach greifen und sie mit einem div umwickeln können, denn im Moment sind sie Beans Tech Insight und das gleiche div und sie werden horizontal nebeneinander gesetzt. Also, was ich tun werde, ist, dass ich zuerst dieses Symbol schnappen und schnell mit einem div, den Text hineinlegen werde . Dann in, schnappen Sie sich dieses Symbol und schnell mit einem div und legen Sie den Text hinein. Aber natürlich sollten diese Kerle nicht so aussehen. Also werde ich das div greifen und ich werde die untergeordneten Elemente horizontal stapeln und sie an der Mitte ausrichten. Dasselbe für diesen Kerl. Stapeln Sie sie horizontal und richten Sie sie in der Mitte aus. Aber natürlich löst das unser Problem nicht. Was wir also noch tun müssen, ist, dass wir einfach alle diese Elemente innerhalb 1 einschließen können, einschließlich des Pro-Menüs. Also, was ich tun werde, ist, dass ich ein weiteres div hinzufügen werde. Also werde ich nur wickeln, dieser Typ würde kein div hinzufügen, dieses div hineinlegen und dann das div hier hineinlegen. An diesem Punkt wollen wir also, dass diese Elemente horizontal nebeneinander gesetzt werden. Aber zur gleichen Zeit wollen wir, dass sie nach rechts und natürlich über unserer Speisekarte gestellt werden. Also mit diesem großen div ausgewählt, dieser Hauptcontainer ausgewählt, tatsächlich könnten Sie es vielleicht sogar Haupt nennen. So, nur damit wir sehen können, was hier vor sich geht. Dieser Kerl ausgewählt, ich werde nur um sicherzustellen, dass alle diese Elemente auf die rechte Seite gestellt werden. Da gehen wir. Und dann werde ich dieses div greifen, und ich werde es mit einem anderen div einwickeln und dieses div in dieses div legen. Es gibt also eine ganze Menge Divs hier. Aber wenn ich anfänge, ihre Namen zu ändern, sollten wir diesen Kerl umbenennen. Das wird also das sein, das wird unsere Kontaktinformationen sein. Da gehen wir. Im Moment hostet dieses div diese Telefonnummer und diese Kontaktinformationen. Und natürlich, innerhalb dieser Jungs, haben wir unsere Ikone und unseren Text. Da gehen wir. Und jedes dieser divs, also zeigen dieses und dieses unsere untergeordneten Elemente horizontal an. Aber wir wollen, dass diese Hauptkontaktinformationen, div diese Elemente auch horizontal anzeigt. Und im Moment zeigt das, dass div sie vertikal an. Also, wenn wir einfach auf Lager Cello Kind-Elemente horizontal klicken, können Sie sehen, dass im Moment haben wir den Effekt, den wir gesucht haben. Und an dieser Stelle könnten wir vielleicht einfach einige hinzufügen, wie einige Abstände. Mal sehen, vielleicht 25. Das könnte zu sehr sein. Dann sollte das in Ordnung sein. So können wir jetzt tatsächlich zu unserem Pro-Menü übergehen. Also werde ich es mir einfach schnappen. Ich werde nicht zu viel Zeit hier verbringen. Ich möchte es hier auf dem Desktop und auf und auf Smartphones gut aussehen lassen, denke ich. Also nehme ich das Desktop-Menü, die Option, Topographie, und ich werde die Farbe in Weiß ändern. Ich mache all diese Elemente in Großbuchstaben. Ich werde die Größe ändern, sagen wir 14. Vielleicht sogar 13. Das sollte gut sein. Lassen Sie mich einfach zurück zur Raumausrichtungsgrenze gehen. Und vielleicht füge ich links etwas Marge hinzu. Mal sehen, wie zehn. Ich schätze, zehn sollten in Ordnung sein, vielleicht lass uns sogar 15 gehen. Warum nicht? Und schließlich werde ich zur Typografie zurückkehren und wie ein Pixel Buchstabenabstand hinzufügen , nur um diese Elemente so aussehen zu lassen, lassen Sie uns vielleicht 14 sehen. Ja, gehen wir mit 1414 Pixeln. Ich werde das speichern und wir können tatsächlich auf unsere Titelseite gehen und diese Adresse aktualisieren. Und da gehen wir. So sieht unser, unser Header in diesem Moment aussieht, aber natürlich müssen wir uns noch um die Reaktionsfähigkeit unserer Menüelemente kümmern. Also gehe ich einfach zurück und ich bin mit meinem Pro-Menü, Menü ausgewählt. Ich gehe ein paar Mal zurück. Und ich möchte, dass dieses Menü tatsächlich mobil ist, wenn Sie im Menü sind, sobald wir den 768 Breakpoint erreicht haben. Wenn wir also zu 768 gehen, beginnt unser Menü zu einer Smartphone-Version zusammenzubrechen. Aber natürlich müssen wir einige Dinge ändern. Lassen Sie uns also das Layout des Symbols öffnen ändern. Ich will den Text nicht haben. Und ich denke, ich will nur die einfachen Bars wie diese haben. Und ich werde die Farbe in weiße Farbe ändern. Da gehen wir. Ich glaube nicht, dass ich hier eine Polsterung haben möchte, oder vielleicht nur wie fünf Pixel, aber nicht, nicht zu viel. Und natürlich, was wir wollen, ist, dass wir dieses Menü hier in die Mitte stellen wollen. Also werde ich diesen Hauptcontainer, dieses Hauptdiv, greifen, und ich werde auf dieses Stack-untergeordnete Elemente vertikal klicken, obwohl es standardmäßig festgelegt ist. Wenn wir darauf klicken, können wir alle diese Elemente wieder sehen. Und ich werde auf horizontale Artikelausrichtung Center klicken. Und unsere Speisekarte ist so schön zentriert. Aber natürlich, wenn wir darauf klicken, dieses Menü nicht so gut aus mit. Wir müssen es immer noch reparieren. Also werde ich zum mobilen Menü gehen. Ich gehe zuerst in den Hintergrund. Und ich denke, ich werde unseren dunklen Hintergrund so wählen. Lassen Sie mich sofort zurückgehen. Ich werde das Icon-Layout schließen. Und ich werde reingehen und diese Bars wechseln. Ich werde nur dieses Kreuz Icon verwenden. Ich will nicht, ich will nicht, ich brauche keine SMS. Ich werde die Farbe in weiße Farbe ändern. Da gehen wir. Also jetzt kümmern wir uns um unsere Topographie, das Layout unserer Topographie. Also gehen wir zurück. Gehen wir zu Menüstilen. Und ich möchte, dass die Elemente an der Mitte ausgerichtet sind. Also lasst uns diesen Kerl retten und unsere Seite aktualisieren. Und lassen Sie uns überprüfen, wie es auf den kleineren Geräten aussehen wird. Und da gehen wir mit diesem ist unser, das ist unser mobiles Menü. Noch mal, ich will es nicht zu schick machen. Ich würde es Ihnen überlassen, wenn Sie etwas Transparenz hinzufügen und vielleicht mit diesem Symbol oder einigen schwebenden Effekten herumspielen wollen. Es wird völlig an dir liegen. Ich wollte es einfach und einfach machen, nur um dieses Menü so funktionieren zu lassen , wie es sollte. Natürlich könnten wir vielleicht etwas hinzufügen, vielleicht etwas Spielraum. Eigentlich gehen wir zu Größe und Abstand. Natürlich habe ich mein Pro-Menü aktiv, und lassen Sie uns vielleicht etwas wie 12 Pixel Rand hinzufügen. Und da gehen wir. Wenn wir zu allen Geräten gehen, sieht so unser Menü-Header aus. Und sobald wir diesen 768 getroffen haben, wird unser Menü auf den kleineren Geräten wie Tablets und Smartphones aussehen . Und übrigens, wenn Sie zum Beispiel an diesem Haltepunkt vor 68 oder sogar 7068 wollen, wenn Sie möchten, wenn Sie möchten, dass diese Elemente vertikal gestapelt werden, oder Sie tun müssen, ist unser Kontaktinfo div zu greifen. Und wieder klicken Sie auf untergeordnete Elemente vertikal stapeln und dann so zentrieren. Und natürlich könnten wir vielleicht noch einige Abstände hinzufügen. Also werde ich nur diese Telefonnummer schnappen. Diese Telefonnummer div, und ich bin vielleicht lassen Sie uns einfach wie zehn Pixel versuchen. Und das sollte gut sein. Natürlich ist dies eine Option. Du musst es nicht tun. Aber Sie wissen, mit Sauerstoff erhalten Sie viel Flexibilität in Bezug auf die Gestaltung dieser Elemente. Ich denke, ich gehe dorthin zurück, wo es vorher war. Ich denke, das sieht etwas sauberer aus. Und ja, da gehen wir. Wir haben unsere Kopfzeile. Gut erschaffen. Aber eine Sache, die ich gerne tun würde, ist, dass ich wie einen klebrigen Header hinzufügen möchte. Wie Sie sehen können, haben wir einen klebrigen Header wie diesen auf unserem wie Referenzdesign. Also lasst uns eigentlich anfangen, uns um unsere und klebrige Kopfzeile im nächsten Video zu kümmern. 88. 13.8-Kopfzeilen: Also, jetzt lasst uns tatsächlich diese klebrige Header-Sache machen. Also haben wir diesen Header bekommen, das ist unser regulärer Header. Aber wir möchten es wie eine kleinere Version eines Headers hinzufügen , sobald der Benutzer auf unserer Seite nach unten scrollt. Also haben wir diese Kopfzeile, ich werde es duplizieren. Und sagen wir, dass für meinen, meinen Stock Keller, ich will diese Informationen nicht sehen, diese Informationen hier oben. Also werde ich sie einfach entfernen. Also werde ich Haupt eine Kontaktinfo und ich werde es nur entfernen. Da gehen wir. Ich habe gerade die Speisekarte bekommen. Und ich schätze, wir könnten es vielleicht sogar hier hochziehen. Und wir brauchen dieses div nicht. Und ich werde es kleiner machen. Also für die Desktop-manuelle Typografie, werde ich es wie zehn Pixel machen. Das sollte gut sein. Und für unser Logo, lassen Sie mich einfach das Logo schnappen. Lassen Sie uns das Bild kleiner machen, vielleicht 25. Und die Schrift, machen wir es 25. Oder vielleicht sogar weniger als das, mal sehen 18. Damit dieser klebrige Header-Effekt tatsächlich richtig funktioniert, müssen wir unseren Header-Builder greifen. Und hier für die Sticky-Option, lassen Sie uns aktivierte Sticky-Header wählen. Und ich denke, ich werde den Scroll-Abstand so belassen, wie er ist, aber ich möchte den klebrigen Header zum Einblenden verblassen. Und ich werde diese verblassende Animation ein bisschen schneller machen. 0,2 Sekunden. Da gehen wir. Und jetzt werde ich nur auswählen, dass dies eine Reihe hatte, die klebrig sein soll. Und vielleicht werde ich diesen Füllwert einfach auf zehn Pixel reduzieren . Und ich gehe zurück zum primären Tab, und ich möchte es nur klebrig zeigen. Da gehen wir. Und diese erste Kopfzeile, ich möchte es in klebrig verstecken. Also werde ich mein Menü speichern, wird meine Seite speichern. Und dann lassen Sie mich einfach die Seite aktualisieren. Und jetzt werden wir unseren klebrigen Header nicht sehen können , da wir hier keine Inhalte haben. Aber wenn wir nur einige hinzufügen, einige wie wirklich willkürliche Dinge, machen wir einfach einen Abschnitt. Lassen Sie uns etwas Text hinzufügen, wie ein Dummy-Text. Jetzt werde ich einfach eine Menge solcher Texte schnell kopieren. Und ich werde es retten. Und dann werde ich die Seite aktualisieren. Wir bekommen unsere Texte und dann beginnen wir mit dem Scrollen nach unten. Sie können sehen, dass unsere klebrige Header schön verblasst. Vielleicht, wenn wir die Animation etwas länger , dann wäre die Animation schöner. Aber ich denke, das funktioniert völlig, völlig in Ordnung. Also, natürlich werde ich diesen Abschnitt loswerden. Ich brauche diesen Text nicht. Aber was ich tun möchte, ist, dass ich nur das innere Content-Modul hinzufügen möchte, damit wir unsere Vorlage tatsächlich funktionieren können. Und wir werden uns um den Header kümmern, sobald wir alle anderen Elemente an Ort und Stelle haben. Also haben wir unseren Header bekommen, wir haben unseren inneren Inhalt und jetzt sind wir bereit, unsere Seite zu erstellen, beginnend mit dem Header. Nun würde der Held und Schieberegler. Also fangen wir an, das als nächstes zu tun. 89. 13.9er Schieber hinzufügen: Lassen Sie uns nun einen Blick darauf werfen, wie Sie den Schieberegler erstellen. Wir werden ein, nur ein paar Folien mit einigen Hintergrundbildern und etwas Text erstellen . Also, was ich tun werde, ist, dass ich auf meine Homepage gehe und sie bearbeiten möchte. Und ich möchte es mit Sauerstoff bearbeiten. Also okay, wir können damit beginnen, indem wir einen einfachen Abschnitt zu unserer Seite hinzufügen. Also werde ich den Abschnitt eintippen. Und ich möchte, dass sich dieser Abschnitt über die ganze Seite erstreckt. Also werde ich zu Erweiterte Größe und Abstand gehen. Und ich möchte den Sektionalcontainer mit auf volle Breite setzen. Und ich möchte die Polsterung loswerden. Also werde ich nur 0 eingeben und dann einfach auf Anwenden klicken. Alle. So haben wir jetzt keine Polsterung auf oben und unten, links und rechts angewendet. Also innerhalb dieses Abschnitts werden wir unseren, unseren Schieberegler einfügen. Also, das werde ich tun. Ich werde nur auf Hinzufügen klicken und tippen Sie in Slider. Und es gibt, dass es ein paar Dinge, die wir tun müssen, wenn wir unseren Schieberegler mit diesen Hintergrundbildern in voller Breite und Höhe erstellen. Für den Anfang werde ich nur zwei Dias loswerden. Ich will nur das hier haben, weil wir bis später duplizieren werden. Und wann sollte der Schieberegler ausgewählt werden? Ich gehe zum Styling und ich werde mit der verblassten Animation gehen. Die Geschwindigkeit ist in Ordnung. Wir können es dabei belassen. Und ich möchte die Polsterung um Folien entfernen. Und wenn wir zur Konfiguration gehen, will ich die Pfeile nicht zeigen. Ich will die Punkte nicht zeigen. Ich möchte, dass die Folien unendlich sind, aber letztendlich wollen wir das auf Autoplay setzen. Aber vorerst werde ich es einfach so lassen. Ich möchte nicht, dass das hier in diesem Vorschaufenster in einem Flugzeug ist. Das letzte, was hier zu tun ist, ist, zu Größe und Abstand zu gehen und die Höhe meines Schiebereglers auf etwas wie 90 vh zu setzen, was sich mehr oder weniger über gut gestreckt von oben nach unten des verbleibenden Teils meines Ansichtsfensters erstrecken würde . Natürlich könnten wir diesen Wert später einfach erhöhen oder verringern. Das hängt davon ab, wie groß Sie Ihren Header setzen werden, wie gesagt, dass er in Ihrem Fall sein wird. Also haben wir unseren Schieberegler Setup. Lassen Sie uns jetzt einfach schnell unsere erste Folie einrichten. Also werde ich es auswählen und ich werde zu Advanced gehen. Und ich werde in den Hintergrund gehen. Und ich werde nach einem Hintergrundbild suchen. Ich werde mit diesem hier gehen, Helden Schieberegler eins. Ich wähle es einfach aus. Also fügen wir es dem ersten Hintergrund hinzu. Aber wie Sie sehen können, sehen wir nicht wie das ganze Hintergrundbild. Und wir könnten zum Beispiel einfach die Größe der Folie vergrößern. Aber wir könnten auch einfach zu unserem Schieberegler gehen, zum Styling gehen, und dann wählen Sie einfach alle Folien strecken auf die gleiche Höhe. Und da gehen wir, können wir unser Bild sehen. Im Grunde genommen sind dies unsere vorläufigen Konfigurationsoptionen, die wir einstellen müssen, damit unser Schieberegler funktioniert. Lassen Sie uns auch einfach schnell zu unserer Folie gehen fortgeschritten und dann Hintergrund. Wir haben das Hintergrundbild eingerichtet, aber lassen Sie uns auch die Hintergrundgröße auf Abdeckung setzen. Und dann stellen wir sicher, dass der Fokuspunkt genau in der Mitte unseres Bildes gesetzt ist. Also gehe ich für den linken Werttyp in 50%, und ich werde dasselbe für die Spitze tun. Und wir haben unseren Fokus, Fokusbereiche , die auf die Mitte unseres Ansichtsfensters gesetzt sind. Also jetzt können wir tatsächlich mit unserem Hintergrundbild herumspielen, wenn Sie es so lassen wollen. Nun, das liegt an dir. Aber was ich tun will, ist, dass ich viel Kontrast zwischen unserem Hintergrundbild und dem Text haben möchte , der als nächstes kommen wird. Und ich möchte auch einige wie design-spezifische hinzufügen. Dana ist wie die Sache, die ich spezifisch für unser, unser Design, das nämlich einige sein wird, so etwas wie Overlain und vielleicht wie eine Farbe oder einfach nur mit den Blending Options unseres Hintergrundbildes herumspielen wird. Also fangen wir an, all das als Nächstes zu tun. 90. 13.10Führen: Beginnen wir also vielleicht mit dem Hinzufügen einer Farbe über dieses Bild. Also, in meinen Erweiterten und dann Hintergrundoptionen, werde ich die Überbild-Overlay-Farbe wählen. Und ich werde mit unserem geretteten blassroten gehen. Und ich werde die Transparenz verringern, während die Deckkraft tatsächlich etwas tut, das vielleicht 2.750 bis 75% mag. Und wenn Sie mit dieser Art von einem gehen wollen, wird ein Effekt mein Gast sein. Sie könnten das tun, aber es könnte auch mit unserem Hintergrund-Mischmodus herumspielen , aber auch mit unserem Hintergrund-Anhang , über den wir vielleicht ein bisschen später sprechen werden. Das erste, was ich tun möchte, ist, dass ich vielleicht hinzufügen möchte, einige, werden schließlich mehr Kontrast zwischen dem Hintergrundbild und dem Text hinzufügen , der in nur einer Sekunde kommen wird. Also von dieser Liste, was ich tun werde, ist, dass ich multiplizieren, was tatsächlich die dunkelsten Bereiche hier in meinem Bild verdunkeln wird. Und in diesem Fall könnten wir vielleicht dieses Bild vielleicht noch etwas dunkler machen und das erhöhen, die Transparenz zu vielleicht so etwas. Vielleicht machen wir diesen Kerl etwas dunkler. So etwas sollte das sein, das sollte in Ordnung sein. Ok. Lasst es uns so lassen. Also jetzt, wenn ich nur noch auf meinem Schieberegler Ebene, Folie Ebene, wenn ich hinzufügen werde, lassen Sie uns eine Überschrift hinzufügen. Da gehen wir. Und ich werde die Textfarbe in Weiß ändern. Sie können sehen, dass wir im Moment eine Menge haben, viel, wissen Sie, nur einen Kontrast zwischen unserem Hintergrundbild und unserem Text spielen. Und wir fügen es auch zu unserem Hauptdesign hinzu, der in Farbe Akzent zu unserem Hintergrundbild kaufen könnte. Also, was dieser Kerl ausgewählt hat, werde ich zu gut gehen. Ich werde zu meinen Optionen gehen. Und ich werde die Schriftgröße auf etwas wie vielleicht 66. Lasst uns vielleicht 66 machen. Dies sollte ausgerichtet sein. Und ich werde eintippen, dass ich im Original glaube, war, dass wir juristische Hilfe leisten und ich werde zur fortgeschrittenen Topographie gehen. Und hier drin, vielleicht erhöhen wir einfach den Buchstabenabstand auf eins. Das wird einige hinzufügen. Besitzen Sie unser Design. Und lasst uns zur Zeilenhöhe gehen. Ich werde es auf 1.1 setzen. Und ich schätze, das war's. Ich werde nur sicherstellen, dass mein Tag auf H2 gesetzt ist. Und im Moment werde ich diese Überschrift einfach duplizieren. Und vielleicht werde ich die Schriftgröße verringern, so etwas wie vielleicht 48 oder vielleicht sogar weniger. Denn wenn wir zur Typografie gehen, möchte ich es auf Großbuchstaben setzen und Zeilenabstand eins ist in Ordnung. Sagen wir, das wird wie, ich weiß nicht, Arbeit in Andrew Reese sein. Und vielleicht werde ich nur die Größe je so leicht zu verringern Freude 3-6 vielleicht, oder 38. Das sollte auf der rechten Seite sein. Und ich denke der letzte Schritt hier wäre, einfach einen Knopf hinzuzufügen. Also, das werde ich tun. Ich werde einen Knopf hinzufügen und ich werde etwas eingeben wie kommen mehr lernen, einfach und einfach. Erfahren Sie mehr. Und ich werde die Knopffarbe auf Weiß ändern. Warum nicht? Knopf schwebte zu unserem schlichten rosa. Ich möchte nur ein einfaches, einfaches Feedback. Und ich werde die Textfarbe in Schwarz ändern, oder vielleicht ist dies sehr wie dunkelblaue Farbe. Da gehen wir. Und was die Typografie angeht, werde ich zur fortgeschrittenen Typografie gehen. Ich möchte es auf Großbuchstaben setzen. Und vielleicht noch einmal, ich werde nur den Buchstabenabstand auf ein Pixel erhöhen. Da gehen wir, da gehen wir. Und vielleicht werde ich nur einige Abstände um diese Arbeitsverletzungen gehen. Wir gehen zu Erweiterte Größe und Abstand und fügen die Inseln wie 25 oben und unten hinzu. Das ist ein bisschen zu moduliert Trainer 1010 an der Unterseite. Und da gehen wir hin. Ich werde diesen Kerl nur retten. Und jetzt werde ich nur meine Seite im Inkognito-Modus sehen. Und da gehen wir hin. Das ist, das ist unsere Seite. Das ist unsere Seite hier. Und natürlich wäre das Letzte, was zu tun ist, nur diese Folie zu duplizieren und dann nur die Änderung dieses Textes. 91. 13.11Schlag: Also wirklich alles, was wir tun müssen, ist nur unsere Folie zu greifen und ich werde es einfach duplizieren. Und ich werde es zweimal duplizieren. Also für unsere zweite Folie, werde ich nur zu fortgeschrittenem Hintergrund gehen. Und ich werde diesen Helden Schieberegler zu JPEG-Bild zu greifen. Und für die dritte, und wir werden fast dasselbe tun. Ich werde für dieses Bild hier suchen, Helden Schieberegler oder drei Suchbild. Und lassen Sie mich das einfach ändern. Vielleicht fangen wir mit der zweiten Folie an. Geben wir einfach so ein, wie es Verkehrsunfälle sein mögen. Da gehen wir. Und für diesen, lasst uns so etwas wie persönliche Probleme eingeben. Und ich glaube, dass wir hier die Hintergrundbearbeitung haben. Das ist nicht das, was wir wollen. Auf jeden Fall. Das ist, dass dieses persönliche Problem verkauft wurde. Also lasst uns einfach diesen Kerl retten. Ich werde wieder auf den Schieberegler gehen. Und jetzt kann ich tatsächlich eingeben wird die Autoplay-Funktion aktivieren. Und jetzt, wenn wir auf unsere Website gehen, lassen Sie mich einfach diese Seite aktualisieren. Und dann gehen wir, unser, unser Schieberegler funktioniert, funktioniert gut. Natürlich, wenn wir es kleiner machen, können Sie sehen, dass es vollständig, vollständig reagiert. Alles sieht aus, sieht gut aus. Also gehen wir hin. Wir haben den Schieberegler. Ich denke, ich werde das Autoplay ausschalten, nur damit unsere Köpfe nicht wehtun. Und ich denke, wir können zu unserem Brunnen übergehen, einem weiteren Abschnitt, denke ich , der dieser Abschnitt genau hier sein wird. Wir haben einen Text in Spalten gesetzt. Wir haben einige wie eine riesige Information hier und wir haben ein paar Bilder hier unten. Aber zu meinen Tagen sind diese Bilder wie nur, wissen Sie, setzen sie einfach so, dass es einige Bilder gibt, sie dienen nicht wie ein, wie ein größerer Zweck. Es macht Design zu meinen Tagen zumindest. Also werden wir das ändern. Wir werden tatsächlich ein Bild hinzufügen und vielleicht werden wir einen Parallax-Effekt hinzufügen. Und vielleicht werden wir so etwas wie ein, ich weiß nicht, ein kostenloses Zitat Texte oder so etwas überlagern . Aber zuerst werden wir diese Art von Text direkt hier erstellen. Und dann die Steuer in diesen drei Spalten. Also fangen wir an, das als Nächstes zu tun. 92. 13.12Den Abschnitt hinzufügen: Lassen Sie uns nun anfangen, den folgenden Abschnitt mit einigen kleinen Informationen zu erstellen. Also, wie immer, werde ich mit einem Abschnitt beginnen, dieser hier. Und ich werde die Breite nicht ändern. Und ich denke, ich werde nicht einmal die Polsterung wechseln. Lasst es uns einfach so lassen, wie es ist. Und natürlich möchte ich, dass dieser Abschnitt nicht in diesem Abschnitt ist, also lass es mich einfach herausnehmen. Da gehen wir. Also in diesem Abschnitt werde ich nur eine Überschrift hinzufügen. Und ich möchte, ich denke, ich möchte, dass alle Elemente in diesem Abschnitt zentriert werden. Das werde ich also tun. Und ich denke, ich werde diese Überschrift ergreifen. Und lasst uns eintippen. Ich glaube, es war unsere Kanzlei. Lassen Sie mich nur den Text überprüfen, der wiederhergestellt wurde. Ok. Unsere Kanzlei. Erinnern Sie sich an Vert. Okay, also werde ich nur die Schriftgröße vergrößern. Und wieder werde ich zur Typografie gehen und den Buchstabenabstand erhöhen. Da gehen wir. Und wir könnten denken, folgen Sie diesem Design und ein bisschen genauer und machen es wie eine offene Assonanzschriftart statt unserer Überschrift. Aber ich würde denken, ich bin, ich denke, ich möchte es ein bisschen konsistenter halten, also werde ich es einfach so lassen, aber ich denke, wir können vielleicht gerne eine Unterüberschrift hier hinzufügen. Und wir können es mit Offenheit, Traurigkeit schreiben. Bevor wir das tun, lassen Sie mich einfach die Zeilenhöhe überprüfen. Ich werde es 1.1 machen, weil es im Grunde auf allen unseren Geräten, besonders kleineren Geräten, gut funktionieren wird . Und dann werde ich nur einen Text hinzufügen. Da gehen wir. Und hier drinnen werde ich einfach eintippen. Ich glaube, es geht Omega. Lassen Sie einfach tun plus alle als zwei über, nur damit Sie sehen können, nur damit wir sehen können, was wir im Begriff sind zu sehen. Also gebar eine Sekunde mit mir. Also lasst uns einfach über eintippen. Und dann tippe ich Plus ein. Und lasst uns das Dollar-Symbol eingeben, 100, k. lasst es uns so lassen. Also, was ich jetzt tun will, ist, naja, zuerst lasst mich einfach die Schriftgröße auf etwas wie vielleicht 32. Und was ich tun will, ist, dass ich diesen Kerl so behalten will. Die Welt ist über Text. Aber dieser Text, dies plus 100 k. Oder wir können 100 Tausend tun, wenn Sie wollen. Ich will es anders machen. Ich möchte es anders stylen. Die Art und Weise, wie wir das tun könnten, ist, ich werde nur das Stück Text auswählen, das ich will, dass ich es anders stylen möchte. Dieser Kerl hier und hier an der Spitze, ich werde nur auf diesen Rap mit spanischen Komponente der Tasten klicken. Ich werde nur darauf klicken. Und jetzt, wenn wir zu unserem Text gehen, dem Modul, können Sie sehen, dass wir im Inneren dieses kleine Spanen-Modul haben, das es uns im Grunde erlaubt, jetzt einfach dieses kleine Stück Text zu ändern. Wir können es jetzt größer machen. Wir können es kleiner machen und definitiv können wir die Farbe in so etwas ändern. Und wir könnten vielleicht einfach die Spannweite ergreifen und vielleicht das Schriftgewicht in etwas Größeres ändern , wie 600. Vielleicht. Das sollte in Ordnung sein. Und vielleicht werde ich das einfach über Text greifen und ich werde es nur ein bisschen kleiner auf so etwas wie 20 Pixel oder 22 machen . Aber wie Sie sehen können, wenn wir Änderungen an diesem Kerl vornehmen, nun, die Ausrichtung ist, na ja, es ist einfach nicht da. Was Sie also tun könnten, ist, dass Sie diesen Text einfach packen und wir könnten zu fortgeschritten als zum Layout gehen. Klicken Sie auf diese Display-Flex-Option, und wählen Sie dann einfach eine Position zentriert, um sicherzustellen, dass diese tatsächlich gut am Sensor ausgerichtet sind. Wie denke, das wäre ein bisschen überflüssig zu gut, wie dieses Stück Text über und dann plus hier. Vielleicht lassen Sie uns diesen Kerl einfach entfernen. Und statt zu überstehen, werde ich einfach mehr eingeben. Dann gehen wir los. Und vielleicht lasst mich anstelle dieses Raumes einfach diese Spannweite ergreifen. Und dann werde ich zu Größe und Abstand gehen. Und ich werde nur vielleicht wie ein kleiner kleiner Rand auf der linken Seite einfügen. Das wäre also gut, das wäre das. Und ich glaube, dass wir in unserem Original seit 1970 haben. Okay, also geben wir das ein. Also nochmal, ich werde nur Text hinzufügen. Da gehen wir. Und ich werde seit 1970 eintippen. Und lass es uns machen, vielleicht 600 machen. Und vielleicht machen wir es wie 18 Pixel. Vielleicht sogar, lass uns 700 sehen. Lassen Sie einen Unterschied machen. Das wird es. Und da gehen wir. Wir haben im Grunde diesen Darm den Abschnitt bekommen und erstellt. Das nächste, was wir tun müssten, ist, dass Sie diese drei kleinen Textstücke unter diesem Abschnitt hinzufügen müssten . Also fangen wir an, das als nächstes zu tun. 93. 13.13Text in Spalten hinzufügen: Also, wie üblich, werde ich nur einen Abschnitt hinzufügen. Und in diesem Abschnitt werde ich nur Spalten hinzufügen. Und ich werde voran gehen und diese drei von 33 mal 33 wählen. Also bekam er drei Spalten für unseren Text. Und um unsere Texte mit dem zu füllen, mit einigen Dummy-Inhalten. Ich werde wieder gehen, um es zu lernen. Ich werde nur nach Lorem Ipsum suchen. Und ich werde mir nur ein paar von diesem Text schnappen . Lass uns einfach ein paar Amulette einfach diesen ganzen Absatz korrumpieren. Warum nicht? Also wieder, in meinem Abschnitt, werde ich zu meinem ersten div gehen und ich werde einen Text wie diesen hinzufügen. Und ich werde das einfach eintippen. Dann gehen wir weiter, lassen Sie mich einfach, lassen Sie es einfach so lassen. Und vielleicht lassen Sie uns einfach wie klicken, drücken Sie die Eingabetaste hier. Nur, weißt du, nur um so etwas zu haben, so etwas. Und lasst uns so machen. Und ich schätze, wir könnten diese Steuer duplizieren. Lassen Sie uns nicht weniger, als es zu kompliziert machen. Aber vielleicht könnten wir einfach etwas von diesem Text entfernen. Nur damit wir nur, damit du etwas Abwechslung bekommst, lass mich das einfach löschen. Und lassen Sie mich einfach diesen Tippfehler löschen. Und nochmal, ich werde nur diesen Text greifen. Vielleicht werde ich es einfach duplizieren. Dann gehen wir und legen es dann einfach in das letzte Div hier. Und vielleicht werde ich dieses Mal nur diesen einen Absatz so verlassen. Aber wenn wir einen Blick werfen, lassen Sie mich es einfach retten. Wenn wir einen Blick auf unser Original werfen, können wir sehen, dass wir dies zuerst haben, anders als ein eingerückter, wie ein Gedankenstrich, dass dieser Buchstabe größer ist als der andere. Es sieht also so aus, als ob wir einen Absatz auf eine sehr, sehr ausgefallene Art und Weise beginnen. Also nochmal, was wir tun können, ist, dass ich mir das zuerst schnappen werde, lass mich einfach diesen ersten Brief schnappen. Wie Sie sehen können, ist es manchmal nicht so einfach. Und wieder, ich werde nur auf eine Spanne klicken. Und ich werde vielleicht das Schriftgewicht wie 700 ändern und die Größe dieses Typen auf etwas wie vielleicht 60 Pixel erhöhen. Dann werde ich vielleicht die Marge um sie erhöhen, um vielleicht zehn auf der Seite zu mögen. Und dann kann zehn unten sein. Und wenn ich gehe, gehe ich zur Typografie und ändere die Zeilenhöhe in eins. Und vielleicht lassen Sie uns diese Marge hier unten loswerden, also sieht unser Absatz ein bisschen besser aus. Aber wie Sie sehen können, haben wir hier ein bisschen ein Problem. Wir haben zu viel Platz hier oben. Also, um das zu beheben, werde ich diese Spannweite hier ergreifen. Und wieder werde ich zum erweiterten Layout gehen. Und hier drin werde ich nur Float links auswählen. Und da gehen wir. Die restlichen Texte hier werden auf der rechten Seite gesetzt, und dieser Typ schwebt nach links. Also, wenn ich gerade diesen Kerl gerettet und lassen Sie mich einfach meine nicht, dass lassen Sie mich einfach voran und aktualisieren Sie die Seite. Ich gehe runter. Sie können sehen, dass wir unseren Text direkt hier bekommen haben. Und unser Reichtum, dieses Stück Text hier. Und wenn wir es nur kleiner machen, können wir sehen, dass wir noch einige Dinge beheben müssen, aber unsere Absätze funktionieren gut. Wenn ich nur unseren Unglauben ergreife, war das dieser Kerl. Und ich werde zur fortgeschrittenen Typografie gehen. Ich gehe zur Textausrichtung in die Mitte. Mal sehen, ob das hilft. Lassen Sie mich es einfach auffrischen. Da gehen wir. Wir haben unser Lehrbuch im Zentrum. Vielleicht könnten wir diese Summe verringern, diese Lücke zwischen diesen Elementen. Also werde ich nur diesen Abschnitt greifen. Gehe zu Erweitert, ich werde zu Größe und Abstand gehen und vielleicht das loswerden, dieses Polster hier loswerden, indem ich nur 0 Pixel einfüge. Und wenn wir das einfach speichern, erneuern Sie meine Seite. Da gehen wir. Wir haben es. Wir haben es repariert. Jetzt wäre der nächste Schritt, wie ich bereits erwähnt habe, einfach ein Bild hier unten wie ein schönes teilen. Aber wir werden nicht nur, du weißt schon, betreten. Wir fügen nur zwei zufällige Bilder wie diese ein. Wir werden eine ganze Seite Abschnitt zu machen, Pool Breite Abschnitt mit ihnen parallax Hintergrundbild. Und vielleicht werden wir etwas Text über das Bild hinzufügen. Also fangen wir an, das als nächstes zu tun. 94. 13.14Den parallax hinzufügen: Also nochmal, was ich anfangen werde, ist, dass ich einen Abschnitt hinzufügen werde. Da gehen wir. Und dieser Abschnitt erstreckt sich über den linken Rand unseres Ansichtsfensters bis zum rechten Rand unseres Ansichtsfensters. Also für den Abschnittscontainer mit, werde ich voran gehen und volle Breite wählen. Und lassen Sie mich einfach ein Hintergrundbild hinzufügen. Und aus meinen Bildern, die ich hier habe, werde ich diejenige wählen, die ich Parallaxe genannt habe. Also werde ich das Bild auswählen. Und ich denke, vielleicht könnten wir eine Bildüberlagerungsfarbe hinzufügen. Also werde ich voran gehen und mein dunkelblaues Bild nehmen und einfach diesen SY verringern, Nun, die, die, die Deckkraft auf so etwas. Und ich werde etwas Text hinzufügen. Noch einmal, ich füge eine Überschrift hinzu. Also eine Überschrift wie diese. Und lassen Sie mich einfach schnell seine Farbe in Weiß ändern, damit Sie es sehen können. Also lasst uns einfach eintippen, eine kostenlose Beratung bekommen, so etwas. Und ich werde vielleicht die Schriftgröße erhöhen, etwas wie 55 und nur diese 56. Also 56, da gehen wir. Ich werde zur fortgeschrittenen Topographie gehen und wir werden die Textausrichtung machen, um den Buchstabenabstand auf eine Zeilenhöhe zu eins, 0.1 zu zentrieren. Da gehen wir. Und ich werde meine sexuelle greifen und sicherstellen , dass alles gut auf die Mitte ausgerichtet ist. Da gehen wir. Lassen Sie uns einfach einige einfache Texte darunter hinzufügen. Holen Sie sich eine kostenlose Beratung zum Text, und wir werden den Text von hier ausleihen. Also vielleicht werde ich diesen Kerl einfach duplizieren und ihn so unter meine Überschrift legen. Und ich werde es auch weiß machen. Und ich schätze, wir können es an der Mitte ausrichten. Und wir gehen und lassen mich vielleicht Kaninchen anrufen und es so aussehen lassen. Da gehen wir. Und wenn Sie möchten, können Sie hier unten mehr Text hinzufügen. Aber ich denke, dass ich auch einige Abstände zwischen meiner Überschrift und dem, na ja, diesem Stück Text und dem unteren Teil, das sein wird , dass ich unter dieses Stück Text setzen werde. Also nochmal, ich werde mit 1010 gehen. Und das letzte, was hier zu tun ist, um einfach einen Knopf hinzuzufügen. Da gehen wir. Und ich werde einfach so etwas eingeben wie, gut lernen Sie mehr wie das, genau wie wir es vorher getan haben. Und vielleicht werde ich nur die Knopffarbe auf diese rosa Farbe ändern. Und was die Tastengröße angeht, lassen Sie uns einfach versuchen 12. Und vielleicht lassen Sie uns auch die Textgröße auf 12 ändern. Und ich werde zur fortgeschrittenen Topographie gehen, Großbuchstaben Abstand, Zeilenhöhe 1.1. Das sollte in Ordnung sein. Und weißt du was? Vielleicht lassen Sie uns einfach etwas mehr Abstand zwischen dem, diesem Stück Text und, und diesem, dieser Schaltfläche hinzufügen. Und vielleicht lassen Sie uns den Knopf etwas größer machen. Lass es uns ein bisschen mutiger machen. Etwas wie 18. Und ich werde die Textgröße auf etwa 16 erhöhen. Das sollte richtig aufbauen? Und vielleicht werde ich einfach mehr Abstand, mehr Polsterung für meinen Abschnitt hinzufügen , weil ich nicht weiß, ich denke, wir könnten es. Es wird einfach einfacher für uns sein, den Parallax-Effekt zu sehen. Jetzt, wenn wir mehr, mehr Platz zwischen diesen Elementen hinzufügen wollten , also was würde mein Abschnitt auswählen? Ich werde zum fortgeschrittenen Hintergrund gehen. Und für diese Hintergrund-Attachment-Parallaxe, werde ich fixiert wählen. Und natürlich müssen wir immer noch die Hintergrundgröße auf Abdeckung einstellen. Wir wollen nicht, dass es wiederholt wird, und wir wollen sicherstellen, dass unser Fokus auf den Mittelpunkt gesetzt wird. Und wir gehen, ich werde es retten. Und lasst uns jetzt einfach auf unsere Hauptseite gehen. Ich werde es auffrischen. Und wenn wir jetzt scrollen, können Sie sehen, dass unser Hintergrundbild tatsächlich scrollen ist. Nun, es ist, es bleibt fixiert, aber alle anderen Inhalte bleiben gleich. Und wenn ich nur, nur, um ein bisschen besser zu sehen, was dieser Effekt tatsächlich für uns tut. Ich werde nur diesen Abschnitt duplizieren. Ich werde es hier runterbringen, wenn ich kann. Manchmal mit Sauerstoff braucht ein bisschen knifflig, um es richtig zu machen. Also haben wir diesen Teil hier. Und lass mich diesen Kerl noch mal auffrischen. Also, wenn wir es bewegen, können Sie sehen, dass wir tatsächlich sind, wissen Sie, wir haben etwas mehr, nun, der gesamte Inhalt bewegt sich und das Bett bleibt fest. Und vielleicht könnten wir uns noch etwas mehr Text schnappen. Und lassen Sie uns einfach, nur um den Abschnitt eines größeren zu machen, gehen, um etwas mehr Text eingeben, speichern Sie das wieder, und aktualisieren Sie meine Seite. Und jetzt können wir sehen, dass wir ein bisschen mehr von unserem Hintergrundbild im Hintergrundbild in der Rückseite sehen , ja, Hintergrundbild in der Rückseite. Aber das Wichtigste ist, dass es ein sehr einfacher Weg ist , diesen Parallax-Effekt zu erhalten, der auf allen Geräten funktioniert , egal wie groß oder klein er ist. Und doch gehen wir hin. So einfach ist es, hier einen Parallax-Hintergrundabschnitt in Sauerstoff zu bekommen. Und ich denke, dass es viel, viel ansprechender und interessanter aussieht als nur diese beiden Flugzeugbilder, die hier in unserem ursprünglichen Design sind. Also werde ich den Abschnitt nicht benutzen. Und umso mehr möchte ich einen weiteren Abschnitt hinzufügen, der dieser Übungsbereich sein wird. Also dieser Typ hier, zuerst müssen wir wie diesen legalen Hilfetext hinzufügen, dann diese Übungsbereiche Überschrift, und dann einige, einige Symbole und einen Knopf hier unten. Also lasst uns das als nächstes tun. 95. 13.15Den Abschnitt zu practice hinzufügen: In Ordnung, zwicken Sie die oder erhalten Sie eine kostenlose Konsultationsabschnitte. Also jetzt lassen Sie uns diese Übungsbereiche Abschnitte hinzufügen. Also werden wir mit einigen beginnen, mit etwas Text hier oben, und dann werden wir diese Symbole direkt hier unten hinzufügen, natürlich unten. Also lassen Sie uns einen neuen Abschnitt hinzufügen. Ich werde nur auf Abschnitt hinzufügen klicken. Da gehen wir. Und im Inneren werde ich mein Textmodul hinzufügen. Und dann werde ich ein Überschriftenmodul wie das hinzufügen. Also werde ich zuerst meinen Abschnitt auswählen und ich möchte sicherstellen, dass die horizontale Ausrichtung des Elements auf Mitte gesetzt ist. Weil, weißt du, wir wollen alles schön orientiert, schön zentriert halten. Und lasst uns hier eintippen. Ich glaube, es war juristische Hilfe so. Und lassen Sie uns die Textfarbe in eine rote Farbe ändern. Und Mindless Ändern Sie das Schriftgewicht auf etwas wie 700 oder vielleicht 600. Und dann gehen wir zur Typografie. Lasst uns diesen Kerl Großbuchstaben machen. Und vielleicht lassen Sie uns tatsächlich ein Gesetz hinzufügen, ein Pixel Abstand so. Und ich werde auch dieses Stück Text unterstreichen. Ich werde nur die Textdekoration so unterstreichen. Also haben wir unseren ersten Text bekommen. Lass uns tatsächlich 700 machen. Und vielleicht lassen Sie uns wie 1212 Pixel oder 13 Pixel machen. Also jetzt alles, was wir hier tun müssen, ist, nur PR-Praxisbereiche einzugeben, die wir gehen. Und ich glaube, unsere Größe war 56. Also geh ich voran und tippe 56 ein. Und lasst uns zur Typografie gehen. Ich werde es in der Mitte ausrichten und ein Pixel Buchstabenabstand so machen. Vielleicht lassen Sie uns auch die Zeilenhöhe auf 1.1 hinzufügen. Da gehen wir. Nun, wenn Sie wollen, könnten Sie vielleicht einige Abstände hier unten hinzufügen, um eine Ode zu erstellen, einige Leerzeichen hinzuzufügen, einige zu lassen, etwas Luft zwischen diesen beiden Elementen zu lassen. Aber das ist alles, das ist alles Geschmackssache in diesem Fall, denn was hier am wichtigsten ist, ist das Hinzufügen dieser Symbole direkt hier. Und wir müssen, wir müssen etwas nachdenken, bevor wir wirklich all diese Symbole hinzufügen, und wir müssen das tun. Wir müssen darüber nachdenken. Und nur um die besten, Best Practice, Best Know, besten Schritte zu finden, um das zu machen, die Spalten zu machen, diese Spalten zu machen oder diesen Abschnitt so einfach wie möglich und so schnell wie möglich zu machen. Also natürlich, was wir brauchen, ist, dass wir alle Spalten ordentlich sein werden. So haben wir vier Icons drin. Also werde ich tatsächlich eine Spalte oder Spalten hinzufügen, und ich werde 25 von 25-25 wählen. Also haben wir vier Divs. Wenn wir nur einen Blick darauf werfen, werfen Sie einen Blick hier, wir haben insgesamt vier divs in diesen Spalten. Vielleicht lassen Sie uns den Kerl einfach ein bisschen nach unten bewegen. Um den Prozess so schnell wie möglich zu machen, würde ich empfehlen, die Klassen in diesem Fall zu verwenden, aber nicht nur für ein Symbol oder wie eine Überschrift auf vielleicht einem Stück Text darunter, der nicht gewesen war, sondern auch für die ganzen Behälter. Denn was ich tun will, ist, dass ich diese Art von Effekt hier bekommen will. Wie, was die, was die Grenzen, aber ich will es ein bisschen anders machen. Also lass mich dir zeigen, was ich meine. Ich werde diesen Kerl vielleicht zuerst umbenennen, genau hier. Das sind also unsere ersten Spalten. Ich werde es nur als eins nennen. Und drinnen werde ich ein div hinzufügen. Also nur ein einfaches div. Also, jetzt haben wir ein div in diesem div. Was ich jetzt tun möchte, ist, dass ich diesem div eine Klasse hinzufügen werde. Also nennen wir es Icon, vielleicht wie Symbol, eine Spalte wie diese. Also, was ich mit diesem Kerl machen will, ist, dass ich sicherstellen will, dass er auf 100 Pixel gesetzt ist , 100% in der Breite. Also werde ich das einfach in 100% tippen. Und ich möchte sicherstellen, dass alle untergeordneten Elemente vertikal überwältigend sind, und ich werde sie horizontal zur Mitte und vertikal zur Mitte ausrichten. Also bin ich mir sicher, dass alle meine Elemente immer genau gut in der Mitte sein werden, sowohl horizontal als auch vertikal. Was ich auch tun möchte, ist, dass ich einen Rahmen um dieses div hinzufügen möchte. Also werde ich zu fortgeschrittenen Grenzen gehen, und ich werde schnappen, vielleicht lasst uns unsere rosa, blassrosa Farbe schnappen. Und ich möchte sicherstellen, dass die Breite auf eins festgelegt ist und dass sie auf solid gesetzt ist. Also weiß ich, dass es sehr, sehr Lichteffekt ist, aber ich hoffe, Sie können es sehen. Vielleicht greife ich einfach meine Seite und füge diese URL im Inkognito-Modus ein. Und natürlich wäre es eine gute Idee, zuerst meine Seite wie gewohnt zu speichern. Und jetzt werde ich das auffrischen. Und hier ist unser div. Ich weiß, es ist ein sehr, sehr leichter Effekt, aber es ist da. Also, was ich jetzt tun werde, ist, dass ich einen Staat zu unserer Klasse hinzufügen werde. Also haben wir unsere Klasse, diese Symbolspalte. Was ich jetzt tun möchte, ist, dass ich auf die Statusoption klicken möchte, und ich möchte voran gehen und Hover wählen. Und wenn ich schwebe, möchte ich, sich diese Grenze ändert. Also werde ich zu Advanced gehen. Dann gehe ich zu Borders. Und wir werden meine Farbe wählen, diesen Kerl hier. Und die Breite wird ein Pixel sein. Und das wird sein, nun, die Grenze wird solide sein. Also, wenn wir das speichern und lassen Sie mich einfach einfach schnell etwas wie ein bisschen Text hinzufügen , so dass Sie tatsächlich sehen können, dass Grenze. Ich werde es retten. Ich will nur, dass du den Effekt verstehst. Also haben wir unser, unser div hier. Und wenn Sie den Mauszeiger über, können Sie sehen, dass unsere Grenze erscheint, wenn wir den Mauszeiger über dieses div bewegen. Aber das will ich nicht, ich will nicht, dass diese Grenze so erscheint. Was ich tun will, ist, dass ich mein div auswählen werde. Ich werde sicherstellen, dass ich im Hover-Zustand bin. Und ich werde zum Fortgeschrittenen gehen. Dann werde ich zum Effektübergang gehen. Und ich werde nur einen leichten Übergang hinzufügen, Übergangsdauer auf 0,3 Sekunden. Wenn wir das speichern und aktualisieren. Sie können sehen, dass diese Grenze schön Übergang ist, ist es nicht so, als wäre er nicht wie ein sofortiger Sprung. Es gibt ein leichtes Fade in. Und ich mache das alles, weil ich möchte, dass all diese Änderungen und global auf meine Festplatte angewendet werden. Wenn ich dann nur die Kopie kopieren möchte, möchte ich, dass all diese all diese CSS-Elemente oder all diese Anpassungen hinzugefügt werden, um alle meine divs besitzen. Also, dass div erstellt wird. Was wir jetzt tun können, ist, dass wir tatsächlich beginnen, die gleichen Symbole im Inneren und den Text und die Überschrift hinzuzufügen . Also fangen wir an, das als nächstes zu tun. 96. 13.16Symbole hinzufügen: Wenn wir also einen Blick auf das Original werfen, können wir sehen, dass wir ein Auto haben. Wir haben ein paar Texte, wird eine Überschrift. Und das ist im Grunde, natürlich haben wir einige Animationen hier und wir können, na ja, wir könnten das tun, wenn du es wolltest. Also, was ich tun werde, ist zuerst, dass ich vielleicht alle Elemente hinzufügen werde, die ich brauche. Also innerhalb dieses div werde ich nur ein Bild hinzufügen. Da gehen wir. Und ich werde, vielleicht fangen Sie mit diesem Auto an und ich werde dieses Bild auswählen, es zu speichern. Und ich werde das auffrischen. Und da gehen wir. Wir haben unser Bild hier. Und ich denke, dass es mir gut geht, ich meine, wir könnten es kleiner machen oder nein, ein paar Dinge dagegen machen. Aber bevor wir das tun, werde ich nur eine Klasse hinzufügen, die es tau wie Symbol nennt. Ich weiß nicht, dass ich ein Bild machen kann. Lass es uns so machen. Ich werde eine Klasse hinzufügen und ich werde ihre Höhe auf vielleicht 35 ändern . Das ist viel zu klein. Aber 42 oder 55 oder 58, ich denke, 58 sollte gut sein. Wir können es später immer ändern. Was wir also tun könnten, ist, nun, unser div on hover hat eine sehr, sehr leichte Grenze. Aber du weißt, was zuerst vielleicht lasst uns einfach die Grenze um das ändern, dieses div hier. Machen wir es, machen wir es, das ist sehr, sehr hellgraue Farbe. Ich möchte, dass die Breite ein Pixel solide ist. Lass uns den Kerl retten. Und lasst uns die Seite aktualisieren. Mal sehen, wie es aussieht. Da gehen wir. Wir haben gerade einen sehr, sehr leichten Rand um unseren, um unser Auto herum. Also, was ich jetzt tun will, so könnten wir vielleicht versuchen, eine imitieren diesen Schwebeeffekt auch auf unserem Auto. So ändert es sich von einer grauen Farbe. Zwei, wie diese, unsere wichtigste und dominante rote Farbe. Also, was ich tun werde, ist, dass ich mein Auto schnappen werde. Ich werde sicherstellen, dass diese Icon-Bildklasse ausgewählt ist. Und ich werde zu fortgeschrittenen Affekten gehen. Und ich werde zu Filter gehen. Und aus dieser Liste werde ich Graustufen wählen. Und ich möchte 100% dieses Effekts anwenden. Also ist es, weißt du, also ist es im Grunde großartig. Wenn wir nun den Status Hover auswählen, möchte ich, dass dieser Filter so dass die Graustufen auf 0% gesetzt werden. Also, wenn wir den Kerl retten und unsere Seite aktualisieren , ist unser Auto ausgegraut. Aber wenn Sie den Mauszeiger über diese Jungs bewegen, können Sie sehen, dass unser Symbol ist, ändert sich auch. So könnte er mich auch dazu bringen, einen Übergang zu diesem Hover-Zustand hinzuzufügen. Also werde ich zum Übergang von Übergangseffekten gehen. Ich glaube, es waren 0,3 Sekunden. Da gehen wir. Und lasst uns die Seite aktualisieren. Wenn Sie den Mauszeiger darüber bewegen, können Sie die Preise schön sehen, schön übergehen. Alles, was wir jetzt tun müssen, ist, dass wir etwas Text hinzufügen müssen. Also werde ich eine Überschrift hinzufügen. Da gehen wir. Und wieder, ich werde eine Klasse hinzufügen, also werde ich es ICOM Überschrift nennen oder ICANN hatte Dicke, die wird, das wird in Ordnung sein. Also werde ich die Schriftgröße auf etwas wie vielleicht ändern, lasst uns versuchen 18. Da gehen wir. Wir gehen zur Typografie und setzen sie in den Mittelpunkt. Und die Zeilenhöhe bis 1.1. Buchstaben Leerzeichen eins. Und vielleicht lasst uns wie, ich weiß nicht, Autounfälle eintippen . Und vielleicht lassen Sie uns die Schriftgröße um 20 erhöhen , um uns vielleicht diesen Platz in einem Element loszuwerden. Ich glaube nicht, dass es ihm gefallen wird. Und dann lassen Sie uns vielleicht ein bisschen Rand wie zehn Pixel oben und dann unten hinzufügen. Denn im Moment möchte ich nur einen Text hinzufügen. Also werde ich nur Text hinzufügen. Und wieder werde ich es nennen, ich werde eine Klasse hinzufügen, also Icon, Text, Klasse hinzufügen. Und wieder werde ich zur Typografie gehen, die auf die Mitte ausgerichtet ist. Und vielleicht ändere ich einfach die Schriftgröße auf etwas wie 13. Ich schätze, das sollte in Ordnung sein. Das letzte, was hier zu tun ist, wäre, vielleicht wie einen tollen Abstand innerhalb unseres div hinzuzufügen . Also werde ich es auswählen, gehen Sie zu Erweitert und dann die Größe und den Abstand. Und ich werde Demi wie acht Pixel Polsterung oder vielleicht sogar zehn Pixel mögen. Und dann lassen Sie uns diesen Kerl retten. Ich gehe auf meine Seite, aktualisiere das. Und das ist unser, das ist unsere Ikone, die so aussieht. Natürlich, wenn wir wollten, könnten wir vielleicht noch mehr Platz hinzufügen. Vielleicht lassen Sie uns wie 20 Pixel machen. Vielleicht. Dies wird nur ein bisschen besser oder sogar wie 25 aussehen. Nein, es liegt ganz an dir. Sie können tun, was Sie wollen, mit der Polsterung tun , wenn Sie nicht wollen, wenn Sie es nicht brauchen, müssen Sie es nicht hineinlegen. Aber ich denke nur, dass es nur ein bisschen besser aussieht. Und wir haben hier einen flippigen kleinen Effekt. Auch, wenn Sie wollten, könnten Sie vielleicht auf einem Hubbard dieses div ein bisschen wie im Original wachsen. Alles, was wir wirklich tun müssen, ist sicherzustellen, dass wir unsere Klasse ausgewählt haben, dass wir auf unserer div-Schicht sind. Und dann von der staatlichen Option, werde ich Hover wählen. Und dann in unseren fortgeschrittenen Affekten, und wir werden gehen, um zu transformieren, gehen, um eine Transformation hinzuzufügen. Und aus diesem Drop-Down-Menü, und wir werden wählen Skala. Und der andere mag, wissen Sie, eine Zunahme des Maßstabs, um zu drastisch zu sein. Also werde ich einfach mit 1.2 live gehen, vielleicht für die Skala x 1.2 für y. und wir werden das speichern, meine Seite aktualisieren. Und dann können Sie sehen, dass es schön Ökologen wie, eher wie ein Wachsen in der Wirkung, wenn wir über unser div schweben. Sobald wir dieses div erstellt haben, hat es uns einige Zeit gedauert, aber wir haben all das getan, nur weil wir jetzt viel Zeit beim Hinzufügen und Event sparen können. Nun, vielleicht ändern, wenn Sie möchten, einige Aspekte über unsere, unsere Symbole. Mal sehen, wie wir tatsächlich von den Klassen profitieren können, die wir gerade hinzugefügt haben. Wie wir von all dem profitieren können, von den Schritten, die wir unternommen haben. Und im nächsten Video. 97. 13.17Verfügen die verbleibenden Symbole: Also wirklich alle Integer jetzt, um die verbleibenden Spalten mit unseren Symbolen zu füllen, besteht darin, dieses div einfach zu duplizieren. Und ich werde es in meine zweite Spalte verschieben. Wenn ich es hier reinlegen kann, werde ich ihn vielleicht umbenennen. Ich nenne es Nummer zwei. Dann werde ich diesen Kerl noch einmal duplizieren. Und ich werde es in unser drittes Div setzen. Da gehen wir. Und lassen Sie mich diesen Kerl umbenennen. Ich werde es drei nennen. Und dieser Typ, ich werde es duplizieren und es in mein div verschieben, das ich anrufen werde. Und ich werde anrufen. Da gehen wir. Also wirklich alles, was wir jetzt tun müssen, ist, einfach die, die Symbole zu ändern. Also werde ich diese Ikone schnappen und ich werde wählen, vielleicht wie dieses Haus. Warum nicht? Mann, ich werde es einfach nennen. Ich weiß es nicht. Eigentum kann Eigentumsrecht sein. Lassen Sie uns so kommentieren. Dann werde ich dieses Symbol greifen, und ich werde einfach dieses auswählen. Und nennen wir es Auto. Keine Vererbung darf y no sein. Und jetzt das letzte Symbol , wählen wir diesen Kerl hier, dieses Symbol, und ich werde es nennen, ich weiß nicht, Gesundheitsversorgung. Nur weil wir jetzt alle unsere Ikonen haben. Lass mich das einfach retten. Und ich werde nur die Seite aktualisieren. Und wie Sie sehen können, haben wir alle unsere Symbole und sie haben all diese schönen Animationen passiert. Aber sagen wir, wir wissen nicht, dass wir diese Elemente vielleicht noch mehr wachsen möchten . Oder vielleicht möchten wir den Übergang ändern, oder wir mögen die Grenze nicht und solche Dinge. Aber, weißt du, es würde uns viel Zeit brauchen, wenn du sie einfach jedes Bit, jedes einzelne Symbol ändern wolltest . Der Schritt für Schritt, alles, was wir wirklich tun können, ist, dass wir einfach eines unserer divs greifen können , das diese Klasse daran befestigt ist. Und ich werde zum Staat Hover gehen. Und sagen wir, ich will nicht, dass es so viel wächst. Also werde ich zu fortgeschrittenen Affekten transformieren gehen. Das ist unser Übergang, unsere Transformation. Also lassen Sie uns sagen, dass ich nur um 1.11.1 wachsen wollte. Wir werden es retten. Und dann, wenn wir die Seite aktualisieren, können Sie sehen, dass alle diese Jungs auf die gleiche, die gleiche Weise wachsen. Nehmen wir auch an, ich möchte sie vielleicht an der Grenze zwischen unserem Willen erhöhen, dieser Überschrift hier drinnen. Also wieder, ich werde sicherstellen, dass ich diese Klasse ausgewählt habe. Ich werde zu Erweiterte Größe und Abstand gehen und ich werde die Marge erhöhen, oberen Rand sammeln 16. Aber ich werde den unteren Rand auf so etwas wie acht reduzieren. Wie Sie sehen können, ändern sich alle diese Elemente. Also, selbst wenn Sie zu 0 gehen, können Sie sehen, dass wir alle Instanzen unserer, unserer Überschrift zur gleichen Zeit ändern . Also das ist nur, das ist nur der Weg, um intelligenter zu arbeiten, nicht härter. Und weißt du, wenn du nur dumm bist. Arbeiten Sie etwas härter, aber definitiv viel mehr, am Anfang viel klüger. Später wird alles viel einfacher für Sie sein. Und selbst jetzt werde ich nur diese Spalten duplizieren. Und wie Sie sehen können, haben wir unsere Icons und bereit und warten auf uns. Sie haben die gleichen Klassen, also verhalten sie sich genau auf die gleiche Weise. Und alles, was wir wirklich tun müssen, ist, das zu ändern, das Symbol zu ändern. Also werde ich dieses Herz schnappen, gebrochenes Herz, und ich werde mit ihnen gehen, Scheidung. Das Schlimmste. Da gehen wir. Dieser Kerl wird unsere Woche schon das Auto haben. Also lasst uns das machen. , Ich weiß nicht,Steuerrecht, Mamie, so etwas. Dieser Kerl, vielleicht werde ich den Hammer und die Ranch schnappen und nennen es Anrufanweisung. Da gehen wir. Und für den letzten Kerl wird es sein, denke ich, es wird dieser sein. Nennen wir es Gesellschaftsrecht. Gesellschaftsrecht. Da gehen wir. Und lassen Sie es uns retten. Natürlich, wenn Sie den Text hier unten ändern wollen, wenn Sie dies nicht als Textblock sehen wollen, könnten wir das natürlich sehr, sehr einfach machen. Und auch wir haben diese Klasse hinzugefügt, so dass wir können . Wenn wir uns entschieden haben, dass wir sie größer machen wollen, können wir es zu einem großen M machen. Wir werden nicht alle Instanzen der Klasse größer machen. Also werde ich zurück zu 13 gehen. Da gehen wir. Also werde ich diesen Kerl retten. Und ich werde meine Seite aktualisieren. Und wie Sie sehen können, haben wir alle unsere Jungs bereit, sich gut zu benehmen. Und ich denke, das sieht hübsch, ziemlich sauber aus und dass es für eine Anwälte Anwälte Website angemessen ist. Also das letzte, was hier zu tun ist, wäre es, einfach einen Knopf hinzuzufügen. Also, was ich tun werde, ist immer noch in diesem Abschnitt, ich werde nur schnell hinzufügen, einfach einen kleinen Knopf hier unten hinzufügen. Ich möchte, dass der Knopf gelesen wird. Da gehen wir. Ich nenne es einfach wie „Mehr erfahren“. Erfahren Sie mehr. Da gehen wir. Und wir gehen zur fortgeschrittenen Typografie. Ich werde Großbuchstaben machen. Und ich werde diesen Kerl retten. Auch. Vielleicht lasst uns, lasst uns das Verhalten unserer Schaltfläche ändern. Lassen Sie uns vielleicht Sache, lassen Sie uns sagen, dass wir vielleicht die Farbe ändern wollen, das Farbschema hier umkehren wollen, wenn wir den Mauszeiger über unseren Knopf bewegen. Also, wenn der Knopf ausgewählt ist, werde ich in den Hover-Zustand gehen. Und unsere Knopffarbe wird über weiße Farbe sein, oder wir können es sogar transparent machen. Dann gehen wir und ich werde die Textfarbe zu rot ändern. Da gehen wir. Und vielleicht werde ich nur eine einfache, einfache Grenze einführen. Also werde ich zu Effect weit fortgeschrittene Grenzen gehen. Und dann werde ich diese rote Farbe wählen. Ich will es sehr, sehr gut, sehr, sehr solide und sehr sanft machen. Also nur ein Pixel. Lasst uns diese Seite aktualisieren. Wenn wir also den Mauszeiger über unsere Schaltfläche bewegen, können Sie sehen, dass es dort ist, dass es sich ändert. Vielleicht könnten wir auch versuchen, einen Übergang einzuführen. Also werde ich zum Effektübergang gehen und einfach wie 0.3. wie üblich tun. Mal sehen, ob es irgendetwas verändert. Ich werde nur die Seite aktualisieren. Und wie Sie sehen können, haben wir einen kleinen netten Übergang, der hier stattfindet, wenn Sie über unseren, unseren Knopf schweben. Also gehen wir hin. Wir haben unsere Übungsbereiche komplett gemacht. Nun, fast müssen wir uns noch um die Reaktionsfähigkeit kümmern, oder zumindest müssen wir überprüfen, ob die Reaktionsfähigkeit richtig funktioniert. Also lasst uns das im nächsten Video machen. 98. 13.18 Überprüfen die Reaktionsfähigkeit: Der Abschnitt bereit, also lassen Sie uns jetzt die Reaktionsfähigkeit überprüfen. Also lassen Sie uns auf Seite Container 1120 gehen. Es sieht immer noch so aus, richtig. Gehen wir zu weniger als 992. Ich schätze, es sieht gut aus. Ich schätze, wir könnten es so lassen. Gehen wir zu 768. Es sieht immer noch gut aus. Und lasst uns zu unseren vier AT gehen, das sieht definitiv, definitiv das Beste aus. So zum Beispiel, vielleicht gibt es ein bisschen ein Problem damit, mit dieser Topographie. Hier. Gehen wir zu weniger als 768. Und weniger als 768, ich denke, es sieht gut aus. Gehen wir einfach zu 480. Und lasst uns diesen Kerl schnappen. Und ich werde die Topographie vorantreiben und die Zeilenhöhe überprüfen, wenn wir nur eine eintippen. Und das wird ein bisschen besser aussehen. Und vielleicht, wenn wir zu 7068 gehen, könnten wir diese machen, nun, diesen ganzen Teil hier. Also vielleicht sogar die ganzen Spalten ein bisschen kleiner oder vielleicht alle divs drinnen, nur ein bisschen kleiner. Da wir die Klassen hier hinzugefügt haben, können wir diesen Kerl einfach schnappen. Und wählen wir, wählen wir 85 in Bezug auf die Breite, fünfundachtzig Prozent, vielleicht sogar weniger als das. Lasst uns auf 75. Das sollte in Ordnung sein. Und jetzt denke ich, das sind Dibs sehen gut aus, aber nein, sie sind nicht richtig zentriert. Also, was ich tun werde, ist, dass ich Hilfe wie ein div schnappen werde , wie das erste div. Und dieser Kerl hat keine moralische, hat keine Klasse. Also lasst uns jetzt einfach schnell, lasst uns vielleicht einfach schnell eine Klasse hinzufügen. Also nennen wir es wie, ich weiß nicht, wie div 768, nur um zu wissen, dass es nur dafür ist, dass es nur für diese spezifischen Haltepunkte ist, die ich wie 768 machen werde. Und was ich tun werde, ist, dass ich Sauerstoff sagen werde, ja, ich will die untergeordneten Elemente vertikal stapeln und ich möchte, dass sie horizontal zur Mitte ausgerichtet sind. Und alles, was wir jetzt tun müssen, ist, die gleiche Klasse zu dem verbleibenden div hinzuzufügen. Also div 768, dieser Kerl, div 768, und dieser Kerl, das wird diese Nummer vier sein, das wird DIV 768 sein. Und wieder, Sünde geht für diese Elemente, es gibt diese divs. Also der erste, also das ist das div, 768, zweite 1. Geben wir 768. Wie Sie sehen können, wenn wir es getan haben, wenn wir am Anfang eine Klasse hinzugefügt haben. Sparen Sie definitiv viel Zeit, aber es ist, naja , wissen Sie, was Sie aus Ihren Fehlern lernen. Also, wenn wir jetzt zu weniger als vier gehen, nun, wie Sie sehen können,erben wir diese nun, wie Sie sehen können, Größe unseres div von den sieben oder 68, die wir gesetzt haben , ich glaube, wir setzen es auf fünfundsiebzig Prozent. Ich glaube, es waren 75. Also denke ich, dass alle diese Elemente auf 75 gesetzt wurden. Also, dieser Haltepunkt bei 480, wir könnten, wir können sie auf 100, 100 Prozent setzen. Da gehen wir. Und es sieht viel besser aus. Also, wenn wir jetzt einfach speichern und die Seite aktualisieren. Lassen Sie uns jetzt überprüfen, wie auf kleineren Geräten aussehen wird. Also gehen wir runter, runter, bis wir ein 992 getroffen haben. Das wird online so aussehen, 92, und dann gehen wir 768 und 418. Also gehen wir hin. Wir haben uns gut gemacht, wir haben uns um die Reaktionsfähigkeit gekümmert. Natürlich könnten wir mit all diesen Optionen den ganzen Tag herum spielen könnte diese Dibs noch kleiner machen, wenn wir wollten. Sagen wir also nicht. Lassen wir sie bei 775 liegen. Also lasst uns die Seite aktualisieren. Und wir hätten, wir würden es so aussehen lassen, im Grunde genauso wie zuvor. Also gehen wir hin. Wir haben, wir haben den Abschnitt erstellt, also haben wir uns um die Reaktionsfähigkeit gekümmert. Also der nächste Abschnitt wäre, dies hinzuzufügen, warum wählen Sie uns Abschnitt? Und ich denke, ich werde ein Bild in der Rückseite hinzufügen. Aber vielleicht könnten wir wie einen Hintergrund hinzufügen, wie ein Farbverlaufs-Hintergrund-Overlay. Wir können das auf jeden Fall tun. Warum nicht? Und ja, also fangen wir an, das im nächsten Video zu machen. 99. 13.19die Warum Abschnitt wählen: Also lassen Sie uns jetzt einen anderen Abschnitt erstellen. Nennen wir es das Warum wählen Sie Abschnitt. Also, wie üblich, werde ich nur einen anderen Abschnitt erstellen. Und ich schätze, wir könnten uns diese beiden wie Kopfzeilen ausleihen, dieses Stück Steuer und diesen Header. Also werde ich es einfach hier in meinem gut Ebenenbedienfeld finden. Ich werde es hier runterlegen. Und das Gleiche gilt für diese Überschrift. Ich werde es einfach duplizieren. Und ich werde diese Richtung hier runterziehen. Also haben wir unsere Sektion bekommen, wir haben unsere SMS hier. Und ich schätze, wir können diese Steuer ändern, damit wir sie als juristische Hilfe belassen, aber lassen Sie uns das tun. Lassen Sie uns diesen Fluss in den Grund ändern. Wählen Sie uns? Da gehen wir. Also, was ich hier tun will, ist, naja, eigentlich will ich drei Dinge tun. Also möchte ich ein Hintergrundbild hinzufügen, aber ich möchte auch den Farbverlauf überlagern. Und dann möchte ich hier unten einen Text hinzufügen. Und ich möchte es in Spalten setzen. Und dann möchte ich nur einige wie einige Zahlen hinzufügen, die zeigen, wissen Sie, unsere Erfahrung oder die Erfahrung unseres Unternehmens. Bevor wir das tun, lassen Sie mich einfach einen Text hinzufügen, damit wir hier etwas sehen können. Und ich werde nur einen Krankenwagen nehmen, diesmal ein paar Lorem Ipsum schnappen. Ich werde nur diesen Absatz greifen, ich werde ihn kopieren und einfach innen einfügen. Also, wie ich bereits sagte, ich werde nur meinen Abschnitt zu greifen, gehen Sie zu fortgeschrittenen Hintergrund und schnappen mich dieses Mal dieses, ich werde dieses eine, dieses feste Punkt-Punkt-Punkt-JPEG-Bild zu bekommen. Und ich werde es einfach auswählen und meine Seite speichern. Und ich schätze, wir könnten die Farben ändern. Also diese juristische Hilfe, lasst uns die Farbe in Weiß ändern. Dasselbe für unsere Überschrift. Lassen Sie uns die Farbe und die gleiche für diesen Text ändern. Und da gehen wir hin. An diesem Punkt können wir das sehen. Wir können nicht wirklich viel sehen. Ich meine, es gibt nicht genug Kontrast. Ich schätze, wir könnten vielleicht lange Zeit etwas Farbe über diesem Hintergrund überlagern. Und Booklets werden tatsächlich eine Farbe überlagern, aber lassen Sie uns es zu einem Farbverlauf machen. Also wieder, ich werde zum fortgeschrittenen Hintergrund gehen. Und hier unten haben wir diese Gradientenoption. Und hier im Inneren Sauerstoff können Sie so viele Farbstopps haben hat Grading Stopps, wie Sie möchten. Also, was ich tun werde, ist, dass ich vielleicht zu Farbstopps hinzufügen werde. Und ich werde nur meine Farbe schnappen. Und natürlich ist das nicht, das ist nicht der Abschnitt, den ich möchte, ich möchte wählen, dies ist dieser Abschnitt genau hier. Also wieder, erweiterte Hintergrundverlauf, fügen Sie zwei Farben. Und ich werde wieder mit dieser dunklen Farbe und dieser dunklen Farbe gehen. Und natürlich können wir im Moment nicht viel sehen. Aber sobald wir anfangen, die Deckkraft herunterzufallen, können Sie sehen, dass wir jetzt unser Farb-Overlay ein bisschen durchsichtig machen. Also lasst uns vielleicht etwas wie 0 machen, etwa 95%. Und so weit wie dieser Kerl geht, machen wir es vielleicht 75%. Da gehen wir. Und das Tolle an Farbverläufen hier im Auxin ist, dass wir, wie ich bereits erwähnt habe, Farbstopps hinzufügen können. Also zum Beispiel, wenn wir nur diesen Kerl schnappen und eine Farbe hinzufügen, stoppen und fügen Sie eine Farbe hinzu. Und dann können wir vielleicht dem hier zustimmen und es den ganzen Weg runterlegen. Sie können sehen, dass wir im Grunde nur, wissen Sie, etwas wie einen C direkt transparenten Farbverlauf tun. So geht es von dieser dunkleren Farbe, dieser dunkelblauen Farbe, zu grundsätzlich transparenter Farbe, und dann wieder zu unserer dunkleren und dunkleren Farbe. Das könnten wir tun, wenn du es wolltest, aber ich werde diesen Kerl vielleicht schnappen, unsere Farbe schnappen und die Deckkraft auf so etwas fallen lassen. Und das gleiche für diesen, aber immer so leicht. Also haben wir, weißt du, wie ein halbtransparenter Hintergrundverlauf. Und natürlich, wenn Sie möchten, können Sie den Typ von linear zu radial ändern. Es wollen Sie eine radiale zurück gehen zurück auf den Boden. Oder wir können eine lineare nach oben wählen und wir können den Winkel auf 90 ändern, wenn Sie wollen. Wenn Sie sich wie der Fluss unseres Gradienten ändern , ist das auch möglich. Aber ich werde es so lassen. Also, an dieser Stelle könnten wir vielleicht einfach ein paar Abstände hier unten hinzufügen. Und das nächste, was zu tun ist, wäre, diesen Text in Spalten zu setzen. Und es gibt eigentlich zwei Möglichkeiten, es zu tun. Wir könnten einfach nur Spalten greifen und zwei divs hinzufügen und diese Steuer in diese Leben setzen. Aber wir könnten auch eine CSS-Eigenschaft verwenden entlang wie Spalten oder Spaltenanzahl und ruhige Lücke genannt wird, um diesen Text in eine Spalte zu setzen , wenn Sie den Textfluss zwischen unseren Spalten simulieren möchten. Also lasst uns sehen, wie wir beide Dinge machen können. Und was sind die Herausforderungen und Unterschiede zwischen diesen beiden Ansätzen? Also fangen wir an, das als nächstes zu tun. 100. 13.20Text: Also, wenn wir unser Stück Text packen und dann, wenn wir gehen, um die Topographie voranzutreiben, können Sie sehen, dass wir keine Möglichkeit haben, unseren Text in Spalten zu setzen. Texanische Spalten sind ein bisschen, naja, es ist nicht so häufig verwendet, häufig verwendete CSS-Selektor. Vielleicht ist das der Grund, warum es schwierig ist, es in vielen verschiedenen Website-Buildern tatsächlich zu finden . Lassen Sie uns also sehen, wie wir diese Frage unsere Ergebnisse herausfordern können. Nun, vor allem, was wir tun könnten, ist, dass wir einfach Spalten hier hinzufügen könnten. Das wäre also der einfachste Weg, denke ich, zu Spalten und Spalten mit zwei divs im Inneren. Und dann, als wir gerade wissen, schnappen Sie sich unsere Tags, Megalithen dupliziert, wenn Sie es in unsere Divs setzen würden. Also eins. Und dann lassen Sie es uns einfach bewegen. Lass es uns einfach in das div geben. Sie können sehen, dass wir unseren Text in der Spalte fließen. Also denke ich, das wäre der einfachste Weg, es zu tun, oder der offensichtlichste, denke ich. Aber es gibt auch einen anderen Weg, dies zu tun. Also lassen Sie mich einfach ein paar Mal zurückgehen, bis wir vielleicht genau wie diesen Text haben und ich diese Zahlen loswerden werde. Was wir also tun könnten, ist, dass wir dem Browser einfach sagen können, dass er dieses Stück Text als Spalten anzeigt. Aber um das zu tun, müssen wir es ein wenig programmieren. Es wird nicht viel geben, es wird einfach und einfach sein. Und ich denke, es ist, wissen Sie, es ist nur eine gute Idee zu lernen, wie man diese Technik benutzt, weil alle, während fast alle anderen Dinge, die Sie können, können Sie von unseren Werkzeugen Schmerzen anpassen, aber diese spezifische dünne und alles ist hier nicht verfügbar. Also, was wir tun müssen, ist, dass wir zu fortgeschritten gehen, natürlich würde diese Schicht ausgewählt. Und wie Sie sehen können, dass dieser Kerl hier, der Custom CSS sagt, wenn wir darauf klicken, können Sie sehen, dass wir etwas Platz haben, um unser spezifisches CSS dafür einzugeben. Und zum Glück, dass CSS-Regeln für diesen Effekt ziemlich logisch sind, denke ich, selbsterklärend, alles, was ich eingeben muss, ist nur die Spaltenanzahl. Und lasst uns einfach eintippen, denn das ist, was wir wollen. Und dann schließen wir das einfach, diese Regel. Und wie Sie sehen können, müssen wir nur die Spaltenanzahl eingeben und dann, wie viele Spalten haben wollen. Wenn du fünf haben willst, lege ich es in fünf Spalten. Und das Beste daran ist, dass dieser Text zwischen diesen Spalten fließt. Wenn Sie nur diesen Text in separate Dibs setzen würden, müssten wir manuell nur keine Ausschneiden und Einfügen Männer dieses Stück, na ja, diese Stücke von Texten. Aber mit dieser Methode können wir einfach den Text zwischen diesen Spalten fließen lassen. Also möchte ich zwei Spalten haben. Und übrigens, wenn Sie die Lücke zwischen diesen beiden Spalten steuern möchten, können Sie einfach eine Spalte eingeben und dann eine Strichlücke einfügen. Und Sie können es so einstellen, dass, ich weiß nicht, 150 Pixel mögen. Lasst uns so gehen. Und Sie können sehen, dass diese Lücke ist, Nun, sie ist definitiv zu groß, aber so können Sie kontrollieren und das, diese Lücke. Also werde ich diesen Code anwenden. Ich werde den Editor zusammenbrechen, aber ich werde diese Regel kopieren. Und jetzt eine Herausforderung, weitere Herausforderung mit diesem, dieser Effekt ist, dass noch Sie werden, es ist einfach. Ich meine, in manchen denke ich, dass der Steuerfluss ein netter Effekt ist. Allerdings, wenn wir gehen, um zu sagen, weniger als 768, gerade jetzt, dass diese beiden Spalten, Ich weiß nicht. Ich denke nur, dass es seltsam aussieht. Ich denke, es wäre besser, wenn wir nur Minow hätten, wahrscheinlich einzelne, einzelne Spalte hier. Wie könnten wir also herausfordern, wie wir dieses Problem lösen können? Nun, immer noch in meinem erweiterten Custom CSS werde ich diese Regel wieder einfügen. Und wir werden die Spalte von zwei zu eins ändern. Und das war's. Wir sind, wir können im Grunde auf eine sehr, sehr einfache Weise, einfach ändern keine spezifischen CSS-Regeln für bestimmte Haltepunkte einfach, indem Sie sie hier in diesem benutzerdefinierten CSS und dem Panel innerhalb des Werkzeugs Spanien hinzufügen. Übrigens, wir könnten und mögen die, ich weiß nicht, wie ein Bett und einen Hintergrund. Wir werden vielleicht nur sehen, dass das nur ein großer Absatz ist. Also lassen Sie mich einfach, vielleicht weiß ich es nicht. Ich werde so tun, als ob dies ein Absatz ist. Also jetzt, wenn wir zu unseren allen Geräten gehen, können Sie sehen, dass dieser Absatz tatsächlich hier ist, aber der Text immer noch schön, schön fließend. Also haben wir, so können wir den Text in Spalten hier in Sauerstoff und im Grunde in jedem erstellen , in jedem Builder oder weil es nur ein einfacher als CSS-Stil ist, der geschrieben hat. Und was wir jetzt noch tun müssen, ist, wie nur greifen die ursprünglichen diese globalen Kunden jahrelange Erfahrung, Team-Experten, Auszeichnungen und ehrt diese Zahlen hier, nur um einige hinzuzufügen, und ich möchte nur einen Beweis dass wir sind, dass wir ein guter guter Anwalt sind, eine Anwaltskanzlei. Also ist es eigentlich, dass Sie beginnen, diese als nächstes hinzuzufügen. 101. 13.21AbschnittAbschluss: Also, um diese Informationen hinzuzufügen, werde ich Spalten hinzufügen. Und ich werde gut zu 25-25 von 25 zu 25 zu 25 zu 25 machen. Also möchte ich insgesamt vier Spalten haben. Und ich werde sie nur ein bisschen so nach unten bringen. Also haben wir vier Divs und ich denke, es wäre eine gute Idee, ihnen Klassen hinzuzufügen. Also werde ich eine Klasse hinzufügen, die ich wählen div nennen werde, genau so. Und ich werde es schnell zu allen meinen Diffs hinzufügen. Wählen Sie also div, dieses, um div zu schließen, dieses, wählen Sie div. Und was ich mit dieser Klasse machen möchte, ist, dass ich sicherstellen möchte, dass alle meine Elemente horizontal und vertikal zentriert wurden. Warum nicht? Und jetzt müssen wir nur diese Informationen hinzufügen. Also werde ich Text und dann noch einen Text hinzufügen. Also haben im Grunde nur 22 einfache Informationen, einfachen, einfachen Text. Und ich denke, wir könnten diesen beiden Klassen hinzufügen. Also werde ich es nennen, wie zu verlieren hatte für die Überschrift. Und dieser hier wird Text wählen. Wählen Sie, wählen Sie Text aus. Ich werde die Klasse hinzufügen. Also für diesen Kerl werde ich sicherstellen, dass das diese weiße Farbe hat, dass es definitiv größer ist. Vielleicht nicht so groß. Gehen wir auf 32. Und der erste waren globale Kunden. Also lasst uns zehn machen. Ok, da gehen wir. Und lasst uns die Schrift größer machen. Lass es uns dicker machen. Da gehen wir. Also kann es sogar noch größer sein, wie 82, das sollte in Ordnung sein. Und dann werde ich mir dieses untere Stück Text schnappen. Ich werde diese Farbe hinzufügen. Ich glaube, es gehörte dem Kunden. Da gehen wir. Ich möchte das Schriftgewicht ein bisschen dicker machen und ich denke, die Größe wird in Ordnung sein, aber gehen wir zur Typografie. Stellen Sie sicher, dass es auf text-align eingestellt ist, auf zentriert eingestellt ist. Ich werde es in Großbuchstaben schaffen. Da gehen wir. Und ich denke, dass es besser wäre, diesen Kerl zu greifen und ihn zu einem Megatext zu machen , der auch zentriert ist. Und vielleicht lasst uns die Zeilenhöhe auf etwas wie 1.1. ändern, also gehen wir. Vielleicht lassen Sie uns hier einfach etwas Platz hinzufügen. Vielleicht nicht so viel. Das sollte gut sein. Alles, was wir wirklich tun müssen, ist, diese beiden Elemente einfach zu duplizieren. Also werde ich das einfach schnell machen. Also werde ich diesen ersten Text duplizieren, ihn in dieses div einfügen, und dann werde ich dieses untere div duplizieren, es hier ablegen. Dann werde ich das Gleiche tun. Also duplizieren, hier reinlegen. Dann dupliziert dieser Typ und legt es hier hin. Und nochmal, duplizieren und legen Sie es hier hin. Und duplizieren Sie sie und legen Sie sie hier hin. Ich denke, wir könnten vielleicht beide Elemente in ein div einwickeln und dann einfach ein div klonen. Aber ich wollte einfach nicht wie div und die Dividende, Dividende, wenn ich nicht zu viel div Verschachtelung machen wollte. Also haben wir, okay, also jahrelange Erfahrung. Sagen wir also, dass wir ein Unternehmen sind. Nehmen wir an, wir haben nicht so viele, aber auf eine 124 Jahre Erfahrung, das ist eine Sache, die genug ist. Jahre X. Lass uns vielleicht, ich weiß nicht, innerhalb dieser Zeit, lass uns wie, ich weiß nicht, 15 Tausend gelöste Fälle wie diese machen . Ich weiß es nicht. Hüllen. Oder vielleicht lass uns so 34 Mitglieder machen. Und lass uns meine ich nicht weiß, 19 weltweite Partner, lass es uns sagen, lass es uns tun. Lasst uns das machen. Weltweit. Partner. Da gehen wir. Also lasst uns diesen Kerl retten. Also gehen wir jetzt auf unsere Seite. Ich werde das auffrischen und machen es kleiner. Mal sehen, wie es auf kleineren Geräten aussehen wird. Also lasst uns das ändern, das ändern. Sobald es diese Breakpoints trifft, können Sie sehen, dass alles hübsch aussieht, ziemlich schön. Okay, also haben wir diesen Abschnitt erstellt, ich denke, bei Old beginnt ziemlich nett, ruhig professionell aussehen. Der nächste Teil wäre also, einen Abschnitt wie die Teammitglieder hinzuzufügen. Und wir wissen im Original, dass dieses professionelle Team genau hier liegt. Aber da wir sagen, dass wir 34 Mitglieder haben, sagen wir, das sind unsere Teammitglieder. Lass uns etwas anderes machen. Lassen Sie uns diese Karten erstellen, wie diese Karten, schätze ich, Bonk, lassen Sie uns sie in einen Schieberegler setzen, damit wir tatsächlich links und rechts klicken können , nur wie ein Karussell unserer Teammitglieder sehen können. Also fangen wir an, das als nächstes zu tun. 102. 13.22Anfang des Team: Beginnen wir also mit dem Hinzufügen eines neuen Abschnitts. Also nochmal, ich werde mich nur schlagen und einfach den inneren Inhalt auswählen. Und dann werde ich einfach einen Abschnitt hinzufügen. Dies ermöglicht es uns, diesen Abschnitt genau hier hinzuzufügen, wo wir ihn haben wollen. Und ich denke, ich werde mir diese zwei Texte leihen, Mini-Überschrift und diese Hauptüberschrift. Wenn Sie also nicht das Kontextmenü hier verwenden möchten, möchten Sie nicht darauf klicken und dann Duplikat auswählen. Sie könnten einfach ein Stück eines Elements greifen, das Sie duplizieren möchten. Und Sie können hier zum Tool-Bereich gehen und Sie können einfach auf Duplikat-Komponente klicken. Dasselbe für diesen Kerl. Und alles, was ich tun werde, ist, dass ich diese Typen hier runterbringen werde. Das ist also diese Überschrift und dieses Stück Text. Also schätze ich hier, ich werde unser Team eintippen, vielleicht so etwas. Und hier, treffen Sie unsere Anwälte. Vielleicht lasst uns, lasst uns dieses Wort kapitalisieren. Und natürlich werde ich meinen Abschnitt packen und alles an der Mitte ausrichten. Und wenn wir könnten, wenn ich das richtig buchstabieren könnte, wäre das gut. Okay, jetzt alles, was Sie wirklich tun müssen, ist ein hinzuzufügen, na ja, ich möchte es wie einfache Karten mit einigen Bildern und Text machen. Ich möchte es zu einem Schieberegler machen. Also, weil wir 34 Mitglieder haben, können wir wohl sagen, dass wir 34 Anwälte haben. Lassen Sie uns also mehr als drei zeigen, aber lassen Sie uns diesen Abschnitt kompakt machen. Also, was ich tun werde, ist, dass ich einen Schieberegler hinzufügen werde. Und in diesem Schieberegler werden wir keine Bilder oder so etwas haben. Wir werden Spalten hinzufügen. Aber zuerst werde ich vielleicht von diesen beiden Folien bekommen. Und vielleicht gehe ich ins Styling. Und ich will die Animation horizontal machen, aber ich will die Animation schneller machen. Ich möchte die Polsterung um Folien entfernen und ich glaube nicht, dass ich die Punkte sehen will. Also werde ich die Show-Punkte entfernen, und ich habe die unendliche Option nicht aktiviert. Also im Grunde, das sind nur diese wenigen Dinge, die wir hier tun müssen. Jetzt, da wir unseren Schieberegler eingerichtet haben, haben wir unsere Folie. Was ich tun werde, ist, ich werde anfangen, divs zu dieser Folie hinzuzufügen. Also werde ich nur auf Hinzufügen klicken. Und ich werde div eingeben. Und ich werde auf diese klicken. Und ich möchte, dass dieses div wie 33 Pixel in der Breite auf 33% ist. Und ich möchte, dass dieses div auf 33% gesetzt wird, weil wir drei divs hintereinander haben werden. Also werde ich einfach dreiunddreißig, dreiunddreißig und dreißig gehen . Und wenn dieser Kerl hier hinzugefügt wird, wenn wir nur Tower Rutsche gehen und, oder wenn wir nur unser div duplizieren. Da gehen wir hin. Sie können sehen, dass wir sie vertikal hinzufügen, und das ist, das ist nicht, was wir wollen. Was wir wollen, ist, dass wir sie horizontal stapeln wollen. Also lassen Sie mich zu unserer ersten Folie gehen. Ich werde untergeordnete Elemente horizontal stapeln. Und da gehen wir hin. Alle unsere divs sind nebeneinander gesetzt. Aber jetzt werde ich diese beiden Divs entfernen, weil ich dieses Div duplizieren möchte, aber ich möchte es mit, mit all seinem Inhalt in nur einer Sekunde duplizieren . Dann wirst du nur noch tun müssen, dass wir einfach nichts ändern werden. Und ich ändere einige Aspekte unseres Lebens ohne immer wieder alle Elemente hinzuzufügen. Aber bevor ich das mache, lass mich einfach schnell eine Klasse zu unserem div hinzufügen. Ich nenne es vielleicht wie „Team“. Und ich werde eine Klasse hinzufügen, weil ich in der Lage sein möchte, diesen Container einfach zu manipulieren. Und letztendlich möchte ich in der Lage sein, alle Container für meine Teammitglieder zu manipulieren und auf einmal. Aber fangen wir an, eine Führung im nächsten Video zu machen. 103. 13.23Filme hinzufügen: Also ich denke, was ich zuerst tun möchte, ist vielleicht, dass ich einige Polsterung in meinen Diffs hinzufügen würde . Ich werde mit vielleicht so etwas wie 12 Pixeln überall gehen. Das sollte genug sein. Und natürlich möchte ich ein Bild hinzufügen. Also werde ich nur ein Bild hinzufügen, gehen, um zu durchsuchen. Und ich denke, das war mein erstes Team. Ich werde nur das Bild auswählen und es speichern. Und wieder, ich werde meine Seite aktualisieren müssen, um das Bild zu sehen. Da ist es also. Und unter dem Bild, was ich tun will, ist, dass ich etwas wie den Namen dieser Person hinzufügen möchte. Vielleicht fügen Sie seine Position, vielleicht einen Text, und vielleicht so etwas Social-Media-Konsum hinzu. Also innerhalb dieses ersten div, dass wir vielleicht sogar seinen Namen ändern möchten, wenn Sie möchten. Also werde ich es umbenennen in, ich weiß nicht, nur vielleicht Team eins, so. Ich werde nur einen einfachen Text hinzufügen. Da gehen wir. Und ich werde es vielleicht diesen Kerl nennen. Nennen wir ihn den CEO. Und lassen Sie uns vielleicht eine Klasse zu den Selektoren hinzufügen. Also nennen wir es Position, vielleicht Teamposition. So Team-Position. Da gehen wir. Und lasst uns es zu unserer Lektüre machen. Vielleicht. Machen wir den Text Typografie. Lass es uns in die Mitte stellen. Und vielleicht lassen Sie uns die Schriftart in etwas wie 500 oder 600 ändern, oder vielleicht sogar eine 700. Und vielleicht lassen Sie uns die Schriftgröße auf etwas wie 13 oder 14 ändern. Und vielleicht lassen Sie uns ein paar Leerzeichen hinzufügen. Also werde ich hinzufügen, wie vielleicht sehen wir wie zehn Pixel Rand nach oben und vielleicht etwas wie zehn unten. Und natürlich gehe ich einen Container zu meinem Team. Und innerhalb dieser Klasse möchte ich stapeln, ich möchte alles setzen, alles die Mitte stapeln. Also werde ich Schritt Kind Elemente vertikal wählen. Und ich werde diese horizontale Ausrichtung des Linienelements auf Mitte setzen. Der nächste Text wird also wie der Name unseres Teammitglieds sein. Also werde ich mich hinzufügen, ich werde eine Überschrift hinzufügen. Da gehen wir. Und ich werde es vernachlässigen, auf h4 zu gehen. Und wieder werde ich eine Klasse wie Team, Teamname hinzufügen. Da gehen wir. Und ich werde die Textfarbe in diese hier ändern. Und vielleicht geben wir dem Kerl einen Namen. Nennen wir ihn wie Michael Arnold Johnson oder so. Mein Vertrag etwas Verzögerung, der berühmte Athlet, Michael Johnson. Gehen wir zur Topographie. Vielleicht ändern wir die Schriftgröße in etwas wie 16 oder 20, oder 26 oder vielleicht sogar wie 28. können wir später immer ändern, weil ich vielleicht ein paar Buchstabenabstände einführen werde. Und das sollte sein, das sollte in Ordnung sein. Also lassen Sie uns jetzt etwas Text hinzufügen, nur einen einfachen Text. Da gehen wir. Und vielleicht leihe ich mir einfach etwas von diesem Text von hier aus und füge ihn hier ein. Und wieder werde ich eine Klasse hinzufügen, einige wie Team auf Beschreibung. Aber ich denke, dass dieser Text in Ordnung ist. Vielleicht ändern wir einfach die Schriftgröße. Nur so leicht. Etwas wie 14. Das sollte in Ordnung sein. Und das Letzte, was hier zu tun ist, wäre, die Social-Media-Icons zu bearbeiten. Also lasst uns versuchen und soziale Symbole. Facebook, Instagram, Twitter. Ja, okay, lass es uns so lassen, aber lasst uns die Symbole ändern. Lassen Sie uns vielleicht den Symbolstil ändern. Mal sehen, was es gut aussehen wird. Vielleicht quadratisch. Vielleicht ändern wir die Hintergrundfarbe in unser Rot. Und lassen Sie uns das Symbol Farbe zwei ändern, wie diese, blasse Farbe oder vielleicht sogar dieser Anwalt Swipe Farbe. Wir gehen, das sollte in Ordnung sein. Wenn Sie also mit dem Mauszeiger über dieses Symbol fahren, nehmen wir unser Rot, aber lassen Sie uns das etwas dunkler machen. Also, wenn wir den Mauszeiger über dieses Symbol ändert sich ein wenig. Und vielleicht lassen Sie uns die Größe der Artikel ändern. Lassen Sie uns sie deutlich kleiner machen. Vielleicht etwa 26. Und der Abstand zwischen den Symbolen, vielleicht wie sechs. Das sollte gut sein. Und ich werde oben etwas Marge hinzufügen, wie zehn, oder vielleicht sogar 26. Das sollte in Ordnung sein. Und natürlich, wie Sie sehen können, habe ich vergessen, eine Klasse zu meinem Symbol hinzuzufügen. Also werde ich mit wie gehen, Ich werde eine Klasse namens Team-Symbole hinzufügen. Da gehen wir. Ich werde meine ID direkt hier hinzufügen, und ich werde auf Kopieren von Stilen in einen anderen Selektor klicken, und ich werde sie einfach in mein Team-Symbol einfügen. Also, jetzt hat unser Team Icons Klasse alle, all diese Werte. Also, ich denke, jetzt könnten wir vielleicht einfach ein paar Abstände hier hinzufügen. Lassen Sie uns hinzufügen, lassen Sie es uns irgendwo hier setzen. Also jetzt, wenn wir greifen, unser Team gewonnen und wir dupliziert, es, kann sehen, dass gerade jetzt unser Schieberegler sieht, sieht viel schöner aus. Ich werde dieses Team nur eins zu zwei umbenennen. Ich werde nur dieses Bild zu diesem Bild ändern, zu diesem Bild. Rufen wir sie an. Sagen wir, dieser Kerl ist der CEO, also wird sie wie der Chief Financial Officer sein, vielleicht CFO. Warum nicht? Und rufen wir sie an. Ich weiß nicht, Jane und Jane Grey Knoten. Und jetzt schnappen wir uns auch Team und Länder duplizieren diesen Kerl. Und lasst uns, ich werde das umbenennen, dieses Team in, ich werde es T3 nennen. Und dieses Bild wird ID sein. Lasst uns dieses Bild schnappen. Und sie wird wie Chief Operations Officer sein. Warum nicht? Und lasst uns färben. Ich weiß es nicht. Nennen wir sie Margaret. Margaret hat gelesen. Warum nicht? Vielleicht lassen Sie uns hier unten noch etwas Text hinzufügen. Ich werde nur etwas von diesem Text greifen und einen anderen hinzufügen und etwas, einen Text wie diesen hinzufügen. Und das gleiche hier mit dem Absatz. Oder vielleicht weniger als das, der Absatz, lassen Sie es uns lassen. Lassen Sie es so. Da gehen wir. Und das gleiche hier. Oder vielleicht werde ich nur ein bisschen vorne dieses Stück Text angularjs bei einigen kopieren , bei etwas Abwechslung hier. Da gehen wir. Also haben wir unsere, unsere Teammitglieder. Lassen Sie mich einfach speichern und speichern. Also jetzt alles, was wir wirklich tun müssen, lassen Sie mich das schließen. Wie wir sehen können, haben wir drei divs in dieser Folie und im Menü. Wir können diese Folie umbenennen, nennen wir sie Folie eins. Und dann lass uns einfach, ich werde es schließen, damit du alles besser sehen kannst. Ich werde diese Folie duplizieren und ich werde sie umbenennen. Ich nenne es Folie zwei. Und in dieser Folie, werde ich einfach gehen, wieder, alle Bilder zu ändern. Also werde ich mir das hier schnappen. Lasst uns dieses Bild schnappen. Und dann werde ich ins Team gehen, ich werde dieses Bild in dieses Bild ändern. Und ich werde, ich werde mich nicht darum kümmern, die Namensänderung in der Position zu ändern. Ich bin mir ziemlich sicher, dass du mittlerweile schon weißt, wie es geht. Es geht nur darum, den Text zu ändern. Und da gehen wir. Ich möchte Ihnen nur zeigen, wie diese Schieberegler-Sache funktioniert. Also lassen Sie mich gerade jetzt eine Vorschau dieser Seite und Sie können sehen, dass wir unseren Schieberegler mit unseren verschiedenen, verschiedenen Bildern arbeiten. Da wir also gerade jetzt unsere Kurse haben und zu unseren Teammitgliedern hinzugefügt haben, können wir zum Beispiel alles eins in einem Rutsch ändern. Wir können diese Textgröße ändern. Sagen wir, ich will es 18 machen. Und vielleicht möchte ich die Leerlaufabstände ändern, diese Marge zum Beispiel so groß sein. Oder vielleicht möchte ich diese Schriftgröße größer machen. Ich will es wie 32 oder so machen. Und vielleicht möchte ich unten einige Abstände hinzufügen. Weißt du, wir haben den Unterricht. So können wir jetzt alles viel, viel glatter machen. Wir können unseren Prozess und viel, viel glatter machen. Also werde ich es retten. Werde ich zu viel Zeit verbringen und keine Veränderung in der Art und Weise, wie diese Jungs arbeiten. Also haben wir unseren Schieberegler bekommen und dass ich vergessen habe, auf Autoplay zu setzen, glaube ich. Also werde ich zur Konfiguration Autoplay gehen und diesen Kerl retten. Und ich werde meine Seite auffrischen. Und jetzt unsere, unser Schieberegler funktioniert wie vorgesehen. Ja, also gehen wir. Wir haben unsere, ich denke, es sieht hübsch aus, ziemlich nett und unsere, unsere Schieberegler. Also schätze ich, wir können jetzt zu unserem nächsten Abschnitt übergehen. 104. 13.24Ausschnitt: In den nächsten Videos werden wir unsere Testimonials Abschnitt erstellen. Und dafür werden wir wieder den Schieberegler verwenden, aber dieses Mal werden wir es mit dem Testimonial Modul füllen. Also, wie üblich, werde ich nur einen neuen Abschnitt erstellen. Lassen Sie mich nur meine Struktur sehen. Und wir werden einen Abschnitt hinzufügen. Das ist dieser Typ hier. Und dieser Abschnitt wird eine Hintergrundfarbe dieses blassrosa hier haben. Also werde ich einen Schieberegler hinzufügen. Da gehen wir. Und wie immer, ich denke, ich werde diese beiden Folien einfach loswerden. Ich werde das hier benutzen. Und natürlich könnten wir einige Konfigurationsoptionen und mit unserem Schieberegler machen. Je nachdem, was du dagegen tun willst. Und wir können, Sie können die Animation auf horizontale Fade-Geschwindigkeit eingestellt haben, all diese Dinge. Nun, was ich tun werde, ist, dass ich diese Farbe ändern werde. Ich denke, ich werde das Schwenken um Gedankenrutschen entfernen. Ich denke, ich werde alle Dias auf die gleiche Höhe strecken. Und natürlich später denke ich, ich werde die Autoplay-Option und das Unendliche verwenden, aber jetzt werde ich den Hub nicht benutzen, weil, weißt du, ich will nur nicht, dass unsere Folien einfach hin und her springen. Biologen, ich weiß. Ich will, ich will es vorerst einfach halten. Also wir dann unsere Rutsche. Ich füge ein Zeugnis hinzu. Testimonial. Da gehen wir. Und wir bekommen ein paar vorgefertigte Zeugniselemente hier drin. Also haben wir den Text bekommen, wir haben den Namen, und wir haben die, oh, ich schätze, die Firma, für die diese Person arbeitet. Also, was ich tun werde, ist, dass ich zuerst ein Bild zu meinem Zeugnis hinzufügen werde. Und ich denke, ich werde mit den gleichen Bildern gehen, wie wir es vorher getan haben. Also werde ich nur einen auswählen. Und wieder, Ich werde es speichern und aktualisieren Sie die Seite, so dass Sie sehen können , dass Bild tatsächlich zu meinem hinzugefügt, zu meinem Zeugnis. Und ich werde runter, runter, hier runter, damit wir unser Bild davon bekommen. Aber natürlich können wir einige Dinge daran ändern. Erstes Objektiv, wir können das Layout greifen. Ich möchte es gerade JETZT vertikal machen, genau wie es in unserer, in unserer Designreferenz ist. Und dann möchte ich den Inhalt an der Mitte ausrichten, gleich für die mobile, mobile Version. Alles in allem, ich schätze, wir könnten es einen Tag nennen. Aber es gibt nur noch ein paar Dinge, die ich gerne tun würde. Also zuerst, wenn wir zu unserem Bildfeld gehen, können wir natürlich die Bildgröße einstellen, aber vor allem können wir die Bildposition einstellen. Wir können es vor dem Inhalt schaffen, oder wir können es danach machen. Also schaffe ich es danach. Und ich denke, ich werde die Bildgröße auf etwas wie vielleicht 66. Das sollte sein, das sollte in Ordnung sein. Und wenn wir zu unserer Topographie gehen und dann Text, können wir zuerst ändern, dass diese große besteuert zu gut etwas anderes in unserem Fall, Sie können sehen, dass wir so haben, ich denke, ist einfach eine andere, wie eine Serifenschrift. Also, was ich tun werde, ist, dass ich diese Schrift in etwas ändern werde , etwas, etwas Serifisches. Ich werde mit Laura gehen. Dies ist nur eine nette serifenartige Google-Schrift. Dieser Typ hier. Und ich denke, ich werde, ich werde in schräg so gehen und vielleicht etwas kleiner machen, um so etwas wie vielleicht 18. Und ich werde das Schriftgewicht auf etwas wie 600 erhöhen, richtig verteilt? Wenn wir nun einen Blick auf unsere Designreferenz werfen, können wir diese Bits auch hier ändern. Also, was ich tun werde, ist, dass ich zu meiner, zu meiner Typografie zurückgehe , um zum Autorenbereich zu gehen. Und ich denke, ich werde diesen Kerl etwas kleiner machen, aber ich werde das Schriftgewicht erhöhen. Vielleicht sogar mehr als das, um so etwas wie 700. Und vielleicht hole ich mir das, diese Hauptschilder. Ich ändere die Schrift in so etwas wie 500. Und wieder werde ich zum Autor gehen. Und vielleicht mache ich es in Großbuchstaben und mache es etwas kleiner. Da gehen wir. Und natürlich könnten wir auch die Autoreninfo ändern. Und so ist das bisschen hier, aber ich denke, dass sie aussehen, sie sehen gut aus. Also, ich denke, wir könnten uns vielleicht etwas Text von hier ausleihen und einfügen. Hier. Da gehen wir. Und natürlich könnten wir diesen Text vielleicht ein wenig ändern. Ich denke, dass Topographien vielleicht noch zu groß sind, wie 18 Punkte ein bisschen zu viel sind. Lassen Sie uns 16 Punkte. Und im Grunde sind wir mit diesem Schieberegler fertig, wird diese Folie genau hier. Aber natürlich müssen wir noch einige Dinge darüber duplizieren und ändern. Ich meine, wir würden gerne noch ein paar Zeugnisse auf unserer Seite haben. Aber wenn wir uns das Original ansehen, können Sie sehen, dass wir noch so ein Anführungszeichen haben , denke ich, genau hier vor jedem einzelnen, jedem einzelnen Text hier. Wie konnten wir das erreichen? Nun, es ist eigentlich ziemlich einfach hier in Sauerstoff und wir müssen nur einen wie einen CSS-Zustand zu unserer Folie hinzufügen. Und es klingt vielleicht ein bisschen wie schwierig, aber es ist wirklich nicht. Fangen wir das im nächsten Video an. 105. 13.25Zustand: So wissen wir bereits, wie man mit dem Hover-Zustand arbeitet, aber auch hier drinnen, in Sauerstoff und in CSS kann man auch den Vorher- und Nachher-Zustand verwenden. Wenn wir also den Vorher-Zustand wählen, können Sie sehen, dass das erste, was wir hier eingeben können, der Inhaltsbereich ist. Nun, wir können einige Inhalte einfügen, weil nach und Hover-Zustände normalerweise erlauben, etwas hinzuzufügen, einige, wie einige Designelemente oder einige Inhalte vor oder nach einem bestimmten Element. In unserem Fall möchten wir also die einfache Option wie ein Anführungszeichen hinzufügen. Nun, wie sein Symbol, Anführungszeichen Symbol. Also, was ich tun werde, ist, wenn ich auf dieser Zeugenaussage bin, werde ich vorher in den Staat gehen. Und in diesem Inhalt, wenn ich einfach etwas eintippe, das ich vorher nicht weiß, können Sie sehen, dass dies tatsächlich jetzt vor meinem Zeugnis angezeigt wird. Aber ich möchte vorher nicht einfach eintippen. Ich werde nur vielleicht so dieses Anführungszeichen hinzufügen. Und jetzt gehe ich zur fortgeschrittenen Topographie und wir können die Schriftgröße ändern. Setzen wir uns wie 46. Sie können sehen, dass es sich hier tatsächlich ändert. Und wir können, wenn wir wollen, können wir diesen Text ändern. Nichts, was die Schriftfamilie zu sagen, wie unser Display purpurroten Text. Wir könnten das Schriftgewicht ändern, so etwas wie Mai 600 sein. Und wir könnten auch einfach zurückgehen. Wir können die Zeilenhöhe ändern, um u eins zu sagen. Wir können den Buchstabenabstand ändern, wenn Sie wollen, aber es würde nicht, es würde hier nicht wirklich funktionieren. Aber vor allem, was ich tun will, ist, dass ich in ihm in die Größe des Weltraums gehen will. Und genau hier in der Margin-Option, wenn wir natürlich wie 25 eintippen, können Sie sehen, dass sich alles ausbreitet. Aber wenn wir tun, wie negativ 25, Sie können sehen, dass unsere Marge reduziert wird und unser Text ist aber näher an unsere, an unser Anführungszeichen. Aber ich denke, ich werde mit wie vielleicht minus fünf gehen oder vielleicht sogar eine 0 für diese Angelegenheit bei der GIP sieht in Ordnung aus. Und vielleicht werde ich nur die Topographie auf so etwas wie 56 erhöhen. Das sollte sein, das sollte in Ordnung sein. Wie Sie sehen können, ist das Hinzufügen von Elementen zu Ihren Vorher-, Vorher- und Nachher-Zuständen tatsächlich wirklich, wirklich einfach und wir können es zu unseren Testimonials hinzufügen, was auch immer Testimonial Modul. Also jetzt, wie ich bereits erwähnt habe, lassen Sie mich es einfach schnell speichern. Wie ich bereits erwähnt habe, müssen wir nur unsere Folien duplizieren. Lassen Sie mich einfach wie zwei machen. Und dann müssen wir nur die Namen, den Text und die Bilder ändern . Aber fangen wir an, das als Nächstes zu tun. 106. 13.26Zeugnisse fertigstellen: Also zuerst werde ich zu meinem zweiten Zeugnis übergehen. Und hier drin, natürlich, werde ich dieses Bild vielleicht zu diesem hier ändern. Und diese Jungs, ich werde Jane Doe heißen, wird Jim heißen, tun Sie das. Und ich werde nur diesen Text von hier holen und ihn hineinkleben und diesen Kerl retten. Und dann werde ich zu diesem Zeugnis gehen. Und wieder, ändern Sie dieses Bild, vielleicht zu diesem Bild. Ich werde das hochladen. Und das wird so sein, als müsste Mary kennen, Mary Johnson. Da gehen wir. Vielleicht arbeitet sie nicht für Jarvis Web-Lösungen, aber für äußere keine super Reinigungslösungen oder so etwas. Super Cholin-Lösungen. Da gehen wir. Beheben Sie das einfach. Und ich werde das retten. Und werfen wir jetzt einen Blick auf unsere, auf unserer Seite. Also werde ich das kopieren und das in meinen Inkognito-Modus einfügen. Ich gehe den ganzen Weg hier runter. Und wie Sie sehen können, funktioniert unser Schieberegler richtig. Natürlich, wenn wir wollten, könnten wir jetzt meinen Schieberegler schnappen. Und ich möchte, dass diese Animationen schneller sind. Also werde ich so machen wie Arnold 350. Und für die Konfiguration werde ich die Autoplay hinzufügen, um das zu speichern. Und jetzt lassen Sie mich einfach die Seite aktualisieren. Und wie Sie sehen können, funktioniert alles gut. Alles funktioniert einwandfrei. Also denke ich, das letzte, was hier zu tun ist, wäre, nur die Reaktionsfähigkeit zu überprüfen. Ich gehe auf die Seite Container 1120, aber davor werde ich das Autoplay bedrängen. Also gehe ich auf die Seite Container 1120. Sieht in Ordnung aus. 992. Sieht gut aus. 768. Ich schaue immer noch auf der rechten Seite. Und 80. Das ist immer noch, das sieht immer noch gut aus. Aber wie Sie sehen können, nehmen diese Divs nicht den gesamten verfügbaren Speicherplatz ein. Also holen wir mir mein Team ein Div hier. Und ich werde dafür sorgen, dass ich auf diesem IDB bin. Wir haben die Größe zu unserer ID hinzugefügt und ich werde nur die Breite 100% machen. Da gehen wir. Ich werde dasselbe für dieses Team tun, um zu div. Und 100%. Da gehen wir. Und für diesen hier ist das, ich denke, das ist das Team drei. Wieder, das gleiche, ein 100 Prozent. Der Respekt jetzt sieht es viel besser aus und wir müssen das gleiche für unsere tun, für die Will diese Folien. Also zuerst werde ich den Schieberschlamm Kerl grep, dieser Kerl hier und es wird nicht, all diese Elemente können vertikal gestapelt werden. Ich werde dafür sorgen, dass sie zentriert sind. Und wieder, T1 zu 100 Prozent zu blockieren. Dieser Typ, der zweite mit 100 Prozent. Und der letzte und der letzte. Gehen wir zu 100 Prozent. Da gehen wir. Und ich schätze, wenn wir auf 480 gehen, dann schätze ich, dass es immer noch in Ordnung ist. Also gehen wir hin. Wir haben unsere Testimonials erstellt. Wir beheben einige Probleme bei der Reaktionsfähigkeit. Und wie Sie hier sehen können, in Bezug auf unsere Zeugnisse, vielleicht sehen diese Pfeile nicht so toll aus. Ich schätze, wir könnten sie loswerden. Damit wir diese Pfeile loswerden können. Wir haben, wir haben den Punkt. Also, wenn jemand wirklich wissen will, Durchsuchen Sie unsere Zeugnisse, sie könnten immer einfach auf diese klicken, all diese Kugeln. Also denke ich, es war dieser Schieberegler. Also werde ich zum Styling gehen. Lassen Sie mich einfach zur Konfiguration gehen. Ich will die Pfeile nicht zeigen. Also jetzt, wenn wir zu weniger als 768 gehen, gibt es keine Pfeile und es sieht einfach sauberer aus. Und wenn wir es auf Auto Play setzen, wird es automatisch abspielen. Also schätze ich, wir sind gut. Wir sind gut zu gehen. Also werde ich es einfach retten. Und unsere nächste Bestellung des Geschäfts wäre es, etwas wie ein, so etwas wie ein kurzer Blog hinzuzufügen , real wie wir hinzufügen können, wir werfen nur einen Blick auf das Original. Wir könnten genau wie diesen neuesten News-Teil hier hinzufügen. Aber wir werden anfangen, das im nächsten Video zu tun. 107. 13.27die Blog: In den nächsten Videos werden wir diesen Blogbeitrag Abschnitt erstellen. Und wir werden zuerst diese Steuerstücke ausleihen und dann gehen wir einfach hinzu. Nur Glück drei. Blog-Beitrag wird im Grunde, im Grunde Blogposts zu Auszügen. So wie Sie sehen können, Ich habe nur schnell hinzugefügt einige rühmt, nur um, nicht um Sie mit dem gleichen Prozess wieder zu langweilen. Also werde ich auf meine Seiten gehen und meine Titelseite mit Sauerstoff bearbeiten. Und wie immer werde ich mit der Erstellung eines weiteren Abschnitts beginnen , der hier runtergehen wird. Also zuerst werde ich mir diesen Text ausleihen, diesen unseren Team-Text. Ich werde es duplizieren und es hier in meinem Bereich ablegen. Und dann werde ich diese Überschrift duplizieren. Und ich werde es hier runterlegen. Also natürlich muss es unter diesen Text gehen, denn jetzt können Sie sehen, dass wir dieses unser Team bekommen und unsere Anwälte Texte treffen. Und so werde ich es einfach sein, lasst uns Nachrichten einschreiben. Und ich werde in wie aus unserem Blog tippen. Und ein Sohn, während ich hier bin, werde ich nur sicherstellen, dass dieses Stück Taxi in die Mitte gesetzt. Das ist alles in Ordnung. Ich werde zum Abschnitt gehen und ich werde so ins Zentrum gehen und schreiben. Also, was ich jetzt tun werde, ist, dass ich meine Beiträge hinzufügen werde. Also werde ich nur unser einfaches Beitragsmodul hinzufügen. Und da gehen wir, wir haben es genau hier. Wenn wir also einen Blick auf unsere Designreferenz werfen, müssen wir zuerst das vorgestellte Bild hinzufügen, dann einige Metadaten wie das Datum, die Kategorien, dann den Titel und dann einen Auszug. Also zuerst, innerhalb meines einfachen Pose-Moduls, kann ich wie dieses erste krit Bild Standard vorhanden wählen. Und ich werde zu Query gehen, und dann werde ich zum Brauch gehen. Und hier drinnen will ich das Konto ändern. Ich werde mit drei gehen, weil ich glaube, dass wir drei Posten hatten. Und ich werde es einfach retten. Und dann werde ich die Abfrageparameter anwenden. Und wie Sie sehen können, haben wir unseren Beitrag angezeigt. Aber natürlich gibt es nur ein paar Probleme. Also zuerst, ich werde diesen Abstand hier vielleicht erhöhen. Was wir tun wollen, ist, dass wir diese größeren und größeren Auszüge definitiv nicht erzählen wollen. Was wir also tun müssen, ist, dass wir diese ändern müssen, und dann müssen wir das Datum ändern. Es sollte genau hier sein wegen unseres Titels. Und dann müssen wir sie Kategorien hinzufügen und vielleicht den „Mehr lesen“ -Button loswerden. Also fangen wir an, all das als Nächstes zu tun. Zuerst werde ich zum Admin gehen und meine Beiträge aufräumen. Also, was ich tun werde, ist, dass ich diese Auszüge einfach reparieren werde . Ich will nicht, dass diese Taten Auszüge so lang sind. Also werde ich das einfach schnell beheben und dann können wir tatsächlich zu Styling und unseren Blogbeiträgen übergehen. 108. 13.28die Blog-Posts: Richtig, also lasst uns jetzt anfangen, unsere Blog-Posts zu stylen. Also zuerst, ich werde mein einfaches Prahl-Modul zu greifen. Und ich werde die benutzerdefinierte Zählung abfragen. Und ich möchte drei Beiträge zeigen. Also werde ich Abfrageparameter anwenden. Und wir haben unsere Posten hier. Also an dieser Stelle könnten wir anfangen, einige Dinge über unsere, über unsere Blog-Posts zu ändern . Aber, wissen Sie, es gibt einige Dinge, die wir werden, werden wir in der Lage sein, nur von unserer und ich bin dieses Tools Zahlungen Überschrift Spanien zu tun. Aber leider, um diese Art von Design neu zu erstellen, müssen wir definitiv in einen Code graben, aber es wird nicht schwierig sein, es wird nichts beängstigend sein. Also sollten Sie Angst URL haben. Also vorher, lassen Sie mich einfach ein paar Abstände hier hinzufügen. Und das erste, was ich tun will, ist vielleicht werde ich die Farbe unserer Titel ändern. Also werde ich zu meinem gehen, natürlich, zu den einfachen Beiträgen zu Styles Titel. Und lasst uns die Farbe ändern. Lassen Sie uns versuchen, dies könnte diese dunklere, naja, fast schwarze Farbe sein. Und vielleicht werde ich nur meine Vorlage speichern. Also werde ich dies als meine Beiträge voreingestellt speichern, und ich werde es speichern. Wenn wir also einen Blick auf das Original werfen, gibt es ein paar Dinge, die wir tun müssen. Zunächst einmal haben wir das Date hier ganz oben nicht, wie wir es in unserem Fall tun. Wir haben das Datum und die Kategorien genau hier. Wir haben nicht den „Mehr lesen“ -Button. Und wir haben hier einen Auszug. Und natürlich sind die Kategorien ein bisschen gestylt. Also fangen wir damit an, diesen Zustand hier loszuwerden. Und lassen Sie es uns nach der Titelanalyse sagen. Lassen Sie uns zur gleichen Zeit, einmal loswerden dieses Admin und keine Kommentare waren Links. Also, was ich tun werde, ist, dass ich zu Vorlagen gehen werde, und ich muss zu Templates gehen, PHP. Wenn wir also einen Blick auf unsere, unsere Struktur hier werfen, können wir sehen, dass wir das zuerst bekommen haben. Nun, das erste ist das Bild, aber dann haben wir dieses div, OK, vermeintliche Image-Datums-Overlay, und dann haben wir diese Datumsfunktion direkt hier. Alles, was wir wirklich tun müssen, ist, diesen Kerl zu schnappen. Ich schneide ihn ab. Und dann werde ich hier runtergehen, wo wir unseren Post-Matter-Autor sehen können, Meta-Artikel posten. Und dann müssen wir Meta-Kommentare posten, oder das sind alle, na ja, diese beiden, diese beiden Links. Also im Grunde, was ich tun werde, ist, dass ich all diese Elemente loswerden werde und ich werde einfach diese Datumsfunktion hier einfügen. Und wenn wir den Code anwenden, können wir sehen, dass unser Date gerade hier springt, direkt an Ort und Stelle springt. Und an diesem Punkt brauchen wir dieses div hier nicht. Lassen Sie uns den Code etwas sauberer halten. Ich werde das loswerden. Und zur gleichen Zeit, hier unten, können wir sehen, dieses Oxo mehr lesen. Und wir haben hier keinen Read More Button, also können wir ihn einfach loswerden. Also werde ich es einfach auswählen. Und dann lassen Sie mich es einfach auswählen. Und ich werde diesen Kerl einfach entfernen, den Code anwenden. Also bekommen wir den Titel und wir haben das, gut das Datum. Also, jetzt müssen wir die Kategorien hier hinzufügen, genau hier. Aber bevor wir das tun, werde ich einfach alles retten. Also gut, 90, alles, was wir wirklich brauchen, ist, dass wir die Kategorien außer hier brauchen. Also, um das zu tun, werde ich nur dieses Stück Inhalt ausleihen, dieses PHP d x verletzt. Ich werde es kopieren und ich werde es neben meinem Date einfügen. Und natürlich, wenn wir den Code anwenden, werden wir einen Auszug neben unserem Date hier haben. Alles, was wir tun müssen, ist dieses Stück Text zu ändern, den Auszug, um nicht gehen zu können, los. Natürlich ist das kein Sauerstoff dann ist eine WordPress-Sache. Und wenn wir nur den Code anwenden, haben wir unsere Kategorien zusammen mit den Links angezeigt. Aber natürlich sind sie nicht so gestylt, wie wir möchten, dass sie gestylt werden. Und das ist, weißt du, das ist die Sache, die wir sind, wir werden uns ändern. Aber Sie müssen sich daran erinnern, dass es wie Krieg allgemeine WordPress-Klassen , die dafür verantwortlich sind, dass diese Klassen aussehen, wie sie aussehen, aussehen, wie sie aussehen. Es ist also nicht sauerstoffabhängig. Also ich fürchte, wir sind nur ein wenig Code, um diesen Look zu machen. Wie wird unsere Kategorien im Original aussehen lassen? Aber ich denke, es wird eine große Übung für uns sein und übertragen. Die Regeln, die wir schreiben werden, werden wirklich, wirklich einfach sein. Also ja, das ist vielleicht aufhören zu reden. Und lassen Sie uns tatsächlich im Irrtum auf Stil kommen. Und unsere Kategorien. 109. 13.29Kategorien gestalten: Also, wie ich im vorherigen Video sagte, gibt es bestimmte Klassen oder eine Klasse, die für das Styling der Kategorien auf denen sind die WordPress-Klassen und Sauerstoff-Klassen verantwortlich sind. Und wenn wir diesen Deckel genau hier inspizieren, können Sie sehen, dass wir diese ungeordnete Liste Klasse Postkategorien bekommen. Und innerhalb dieser Klasse haben wir Listenelemente. Und innerhalb derer, die wir bekommen, haben wir Links. Und wir werden all diese drei Elemente verwenden um unsere Kategorien so aussehen zu lassen, wie sie sollten. Aber wir werden mit Postkategorien beginnen. Was ich also tun werde, ist, dass ich zu meinen Vorlagen zurückgehe, zu meinem Template-CSS . Und hier unten, ich werde nur in Periodenpostkategorien eingeben. Da gehen wir. Und dann einfach die Halterung öffnen und schließen. Was wir also wollen, ist, dass diese Kategorien nebeneinander stehen. Wir wollen, dass sie inline sind. Also werde ich mit dem Typ beginnen, es im Display flex. Dies ist also eine der Regeln, die wir normalerweise festlegen, wenn wir unsere Abschnitte oder Entwickler manipulieren wollen. Und dann werde ich Flex-Richtung sagen, Rho, werde den Code anwenden. Und wie Sie sehen können, sind unsere Elemente schön unter Öl nebeneinander gestapelt. Also möchte ich auch diese Aufzählungspunkte loswerden. Also werde ich zu meinem gehen, Wir werden Kategorien posten. Nun, Regel und ich werde in der Liste Stil eingeben. Ich möchte es auf „Keine“ setzen. Und wenn wir den Code anwenden, können Sie sehen, dass diese Aufzählungspunkte verschwunden sind. Also, was ich jetzt tun will, ist, dass ich die NGO Einzelstücke wie diese einzelnen Kategorien stylen möchte. Also werde ich das einfügen, und dieses Mal werde ich treffen, nun, ich werde LI eingeben, was ein Listenelement ist. Und ich werde die Klammer öffnen und schließen. Und was wir tun wollen, ich denke, wir wollen etwas Polsterung hinzufügen. Also werde ich die Polsterung eintippen. Mal sehen, als ob ich vielleicht nicht weiß, zehn Pixel. Und lassen Sie uns den Code anwenden. Da gehen wir. Dann eignet sich vielleicht wie eine Hintergrundfarbe, Hintergrundfarbe. Und ich denke, es wäre eine gute Idee, unsere Farben aus unseren globalen Farben zu leihen. Lasst uns das hier machen. Und ich werde das einfach einfügen. Und da gehen wir. Und ich werde auch Marge, Marge setzen, richtig? Vielleicht, ich weiß es nicht, wie fünf Pixel. Und dann werde ich den Code anwenden. So könnten wir vielleicht auch Text transformieren und unseren Text in Großbuchstaben machen. Und lassen Sie uns den Code anwenden. Dann gehen wir. Und natürlich, wie Sie sehen können, dass der Text hier in unseren Kategorien, es sieht nicht so gut aus. Ich meine, die Farbe stimmt nicht. Und selbst wenn wir nur Stift wie Arnold Farbe eingeben, weiß. Und wenn Sie dann den Code anwenden, können Sie sehen, dass sich nichts ändert. Und das liegt daran, dass wir das noch haben. Wenn wir in unseren Inkognito-Modus gehen, können Sie sehen, dass wir auch einen Link hier haben. Wir haben also einen Link innerhalb des Listenelements innerhalb einer ungeordneten Liste. Also werde ich p die verstreuten, gut posten Kategorien und einen Listeneintrag nennen . Und dann werde ich einfach einen Ankerlink hier hinzufügen. Und dann schätze ich, wir können diese Typen einfach kopieren oder einfügen. Lassen Sie mich diese Klammer schließen. Und dann können Sie einfach die Klammer öffnen und schließen, diesen Wert N einfügen und dann einfach den Code anwenden. Und wie Sie sehen können, unsere, na ja, es ändert sich, unsere, unsere Kategorien ändern. Aber ich denke, sie sollten nebeneinander gestellt werden, als der Oktober, das Datum, und dann auch diese Jungs hier. Um das zu tun, müssen wir zu unserer Oxypost Meta gehen und regieren. Denn wenn wir gehen, lass es mich einfach retten. Wenn wir zu unserer Vorlage PHP gehen, können Sie sehen, dass wir diese div Klasse OK haben, soll Mentor. Und darin haben wir dieses Datum und unsere Kategorie. Das ist also eigentlich eine Sauerstoffklasse. Also, wenn wir zu unserem Ochsen gehen, der Mete sein soll, ist das dieser Typ hier. Wir haben bereits sie diese Anzeige Flex und Flex Richtung auf eine Reihe gesetzt. Aber lassen Sie uns einfach ein Zeilenpunktcenter eingeben, und dann wenden wir den Code an. Wie Sie sehen können, sehen sie jetzt viel, viel besser aus. Ich denke, wir könnten auch einfach Text in Text umwandeln Großbuchstaben sein , weil ich denke, dass in unserem Ja, diese Jungs, wie Sie sehen können, sie sind auf, na ja, sie sind alle Großbuchstaben. Das werde ich also tun. Ich denke, wir können vielleicht sogar diesen Text Transformationswert von diesem Kerl ausleihen. Also werde ich das einfach einfügen und den Code anwenden. Und im Grunde sind unsere Kategorien erstellt und gehen einfach anwenden und speichern. Und dann gehe ich auf meine Hauptseite und ich werde die Seite aktualisieren. Und wie Sie sehen können, haben wir unsere Kategorien hier schön angezeigt. Vielleicht lasst uns sie einfach loswerden. Ich schätze, hier ist zu viel Perrin. Für unsere Kategorien. Ich schätze, wir können sie etwas kleiner machen. Wenn wir einen Blick auf unser Original nehmen, Sie können sehen, dass es viel, viel kleiner ist. Es gibt nicht zu viel Polsterung auf der Oberseite und viel mehr an den Seiten. Und die Schriftgröße ist auch kleiner. Also vielleicht zuerst lasst uns diese Schriftgröße genau hier greifen. Und lasst es uns versuchen. Versuchen wir vielleicht so etwas wie, ich weiß nicht, 12 Pixel. Mal sehen, was es tut. Vielleicht sieht es besser aus. Also haben wir die Schriftgröße korrigiert, aber vielleicht kümmern wir uns um das Purin. I. Es ist zu viel Perrin hier. Was wir also tun könnten, ist, dass wir vielleicht mehr Polsterung an den Seiten und weniger Wetten auf die Spitze hinzufügen könnten . Also mit diesen Regeln, können Sie, na ja, wir CSS-Regeln, Sie können eine Regel folgen, zumindest in Bezug auf Padding und Marge. Wir können, innerhalb einer Regel, eine Zeile Code, können wir mehrere Werte hinzufügen. Also, wenn wir es jetzt nur wie zehn und Pixel haben, und wenn wir zehn Pixel verlassen, bedeutet das, dass wir 1010 Pixel Padding und rundum haben. Aber wenn wir möchten, fügen Sie hinzu, sagen wir 20 Pixel und dann wenden Sie einfach den Code an. Wie Sie sehen können, fügen Sie zuerst die obere und untere Polsterung hinzu, und dann fügen Sie die linke und rechte Polsterung hinzu. Und wenn wir wie fünf Pixel und 50 Pixel gehen , wird er jetzt eine andere Werte für oben, rechts, unten und links hinzufügen . Also geht es im Uhrzeigersinn, oben, rechts, unten, links. Aber das will ich natürlich nicht tun. Ich möchte nur ein Oben und Unten hinzufügen. Also lassen Sie mich das einfach bewegen. Also oben und unten wird wie fünf Pixel sein und links und rechts wird wie zehn Pixel sein. Mal sehen, wie das aussieht. Ich schätze, es sieht aus, es sieht viel besser aus. Also ich denke, das letzte bisschen, das hier zu tun wäre, nur diesen Raum zwischen unseren Kategorien und dem Datum loszuwerden . Also gehen wir zu unserem, Lassen Sie uns zu unserem Code gehen. Und ich werde nur meine Postkategorien finden. Das ist dieser Typ hier, diese Linie. Und ich werde einfach Polsterung eingeben, Polsterung links. Und lassen Sie uns sehen wie zehn Pixel. Und ich werde den Code anwenden. Ich denke, zehn Pixel sollten gut sein. Mal sehen, die, das Original. Ich denke, das ist so etwas wie zehn Pixel. Also haben wir die wir die Kategorien korrigiert haben, wir haben sie, wir haben das Datum. Ich denke nicht, dass es wie ein einzelner Port für eine einzelne Post-Seite erstellt wird. haben wir schon vorher gemacht. Also möchte ich Sie einfach nicht mit Kriminellen langweilen, indem Sie einfach dynamische Daten zu Ihrer Vorlage hinzufügen. Was wir jedoch tun werden, ist, dass wir diese Arbeit hinzufügen werden. Ich denke, wir werden diesen Abschnitt überspringen, weil wir schon so etwas haben. Also werden wir zu diesem gehen, nun, dieser im Grunde Kontaktformular Abschnitt. Also gehen wir jetzt zu dem. 110. 13.30Anfang mit dem footer: Also fangen wir an, in unserer Fußzeile hinzuzufügen. Und wie immer werde ich mit dem Hinzufügen eines Abschnitts beginnen. Und es wird unsere dunkelblaue Hintergrundfarbe haben. Und in diesem Abschnitt werde ich Spalten hinzufügen. Und ich werde die 50-50-Division hier hinzufügen. Also in der Spalte auf der linken Seite werden wir unseren Text und einige Kontaktinformationen haben. Und auf der rechten Seite werden wir wie ein Dummy-Kontaktformular erstellen. Also im ersten div, diesem div auf der linken Seite, werde ich damit beginnen, nur einige Textelemente hinzuzufügen. Und ich denke, wir könnten nur drei Textelemente hinzufügen, weil wir haben werden, lassen Sie mich einfach zu unserem Design gehen. Wir werden diese Kontaktieren Sie uns. Und dann werden wir diese kostenlose Fallbewertung haben. Und dann werden wir diesen Text hier haben. Und natürlich hast du wahrscheinlich bemerkt, dass wir etwas anderes machen werden. Ich meine, wir haben uns entschieden, diesen Abschnitt zu überspringen , weil wir sowas schon vorher gemacht haben. Also lassen Sie uns wie eine große fett formatierte Fußzeile mit unseren Kontaktinformationen und diesen Spalten tun. Also richtig, genau hier, weil wir gerne unsere Blog-Posts und die von unserer Fußzeile trennen wollen. Also werde ich zurück und in Sauerstoff gehen, ich werde Testament in diesem Textmodul eingeben, ich werde Kontakt eingeben und ich schaffe es, lass es uns so weit schaffen. Lass es uns tun. Unsere weiße Farbe. Und vielleicht lassen Sie uns die Schriftgröße auf etwas wie zehn ändern. Auf. Dann gehen wir zur Typografie. Lassen Sie es uns unterstreichen. Lass uns vielleicht einen Großbuchstaben machen. Ich möchte jetzt, nur um dieses Design zu imitieren, die Größe genau hier. Und mal sehen, ob wir 600 mögen. Ich schätze, wir können es nur noch größer machen, ich denke, 12 wäre gut. Mal sehen, wie siebenhundert, siebenhundert wird besser sein. Also haben wir diesen Kontakt hier. Jetzt werde ich es nur duplizieren. Und ich werde die Schriftfamilie ändern. Ich werde mit unserem Display karminroten Text gehen. Ich werde die Schriftgröße auf etwa 56 erhöhen. Natürlich. Lassen Sie mich einfach hier runter gehen. Und lasst uns ändern. Lasst uns nicht wie diese Unterstreichung hier vor sich haben. Und lassen Sie uns hören, um es zu kapitalisieren. Und ich denke, dieses Schriftgewicht ist einfach ein bisschen zu groß. Gehen wir mit etwa 600. Und lasst uns eintippen. Mal sehen, kostenlose Fallbewertung. So wie der freie Fall E-Bewertung, da gehen wir. Und natürlich wäre das letzte Bit hier, dieses Stück Text hier hinzuzufügen . Also nochmal, ich werde nur etwas Text hinzufügen. Dieser Typ hier, und vielleicht leihe ich Saddam etwas Lorem Ipsum. Ich hole mir ein paar Lorem Ipsum. Also lassen Sie mich nur einen Lorem Ipsum Generator freuen. Lasst uns vielleicht diesen Teil greifen. Da gehen wir. Und ich werde diese M einfügen, natürlich muss es eine richtige Farbe haben. Und vielleicht lassen Sie uns die Schriftgröße auf etwas wie 14 ändern, denn das sollte in Ordnung sein. Das ist also alles hübsch, ziemlich einfach. Das meiste, denke ich, herausfordernde Teil wäre, dieses Stück hier hinzuzufügen. Aber ich glaube nicht, dass es wirklich schwierig für uns wird, oder? Alles, was wir wirklich tun müssen, ist ein div in diesem div hinzuzufügen, diese linke Spalte div. Also werde ich nur div eingeben und hier hinzugefügt. Und drinnen werde ich eine Ikone haben. Da gehen wir. Und lasst uns die farbigen Symbole auf vielleicht diese rote Farbe ändern. Ändern wir das Symbol selbst. Geben wir Maurer ein. Tritt auf. Da gehen wir. Und lass es uns kleiner machen. Etwas wie 36 sollte sein. In Ordnung. Und innen, in diesem div mit diesem Symbol, müssen wir hinzufügen, lassen Sie uns etwas Text hinzufügen. Und lasst uns eintippen, ich glaube, es war Adresse. Jetzt war es Büro. Ok. So Büro. Da gehen wir. Und lasst uns die Farbe in weiße Farbe ändern. Und lassen Sie uns die Schriftgröße ändern, um vielleicht 12 zu mögen. Und gehen wir zu Luke. Lass uns das Gewicht ändern. 2s wie 600. Gehen wir zur fortgeschrittenen Topographie. Großbuchstaben Und ist es unterstrichen? Nein, es ist nicht unterstrichen. Also natürlich würden wir das mögen, aber vielleicht fügen wir den Buchstabenabstand hinzu. Das sollte schön aussehen. Und lassen Sie uns auch hinzufügen und während die tatsächliche Adresse. Also nochmal, ich werde etwas Text hinzufügen. Da gehen wir. Ändern Sie erneut die Farbe, ändern Sie das Schriftgewicht auf etwas wie vielleicht 700. Und ich glaube, es waren 40 Park Avenue. Lass uns gehen, Brooklyn. Und warum? Und lassen Sie uns die Schriftgröße auf etwas wie vielleicht 32. Das sollte sein, das sollte gut sein. Also natürlich, was wir jetzt tun müssen, ist, dass wir diese Elemente wie nebeneinander gestapelt werden müssen , nicht so. Also innerhalb dieses div I1, diese Elemente horizontal angelegt werden, außer für diese beiden Textstücke. Also werde ich diesen Kerl mit einem div umwickeln und diesen Text einfügen, also def. Also haben wir zwei Textstücke bekommen. Und da gehen wir. Wir haben diese Typen im Grunde repariert. Aber natürlich könnten wir diesen Kerl vielleicht kleiner machen, sagt vielleicht so etwas wie 28. Und ich denke, der letzte Teil hier wäre, vielleicht etwas Abstand hinzuzufügen. So können Sie unser Symbol greifen, gehen Sie zu fortgeschritten, und kann bei etwa fünf Pixeln des Randes sein. Und wenn Sie möchten, können Sie diese umfassend div gewähren. Und Sie können sagen, dass Sie die Elemente vertikal an der Mittellinie ausrichten möchten, dass. Und schließlich, lassen Sie uns vielleicht nur einen solchen Spielraum hinzufügen. Und da gehen wir. In nur wenigen einfachen Schritten haben wir hinzugefügt. Nun, dieses Stück hier, ich werde nur dieses div klonen. Und ich werde nur einmal auf diese doppelte Komponente klicken und dann zweimal. Und wenn wir einen Blick auf das Original werfen, können wir sehen, dass wir dieses Telefon und dann E-Mail bekommen haben. Also werde ich dieses Symbol ändern. Ich werde anfangen, nach Telefon zu suchen. Das wird dieser Typ hier sein. Und natürlich müssen wir nur den Text ändern und dann einfach zufällige Telefonnummer wie diese hinzufügen. Und das letzte Symbol wäre unser E-Mail-Symbol. Sehen wir uns die E-Mail an. Nein, lass uns einen Umschlag sehen. Es funktioniert mit einem Umschlag. Geben wir also eine E-Mail ein und geben wir die E-Mail-Adresse ein. Also Kontakt und lawyers.com. Da gehen wir. Also jetzt alles, was wir brauchen, ist, um diese Google Google Karte hinzuzufügen. Und lassen Sie uns das wirklich versuchen. Diese Adresse, 40 Park Avenue, Brooklyn. Mal sehen, ob es eine echte Adresse ist. Und natürlich, die Anzeige, die Google Karte, müssen wir eine Karte Modul genau hier finden. Also haben wir dieses Google Maps-Modul. Also lasst uns die 40 Park Avenue eingeben. Es war Brooklyn, glaube ich. Oh, ja. Ich schätze, es ist eine echte Adresse. Also gehen wir hin. Und natürlich können wir die Dinge noch ein bisschen aufpeppen. Wir können das Aussehen unserer Karte ändern. Also lassen Sie uns hier einen Spielraum hinzufügen. Sie nun sicher, dass wir es auf volle Breite setzen. Da gehen wir. Und lassen Sie uns die Höhe auf etwas wie ändern, ich weiß nicht, für 150 Pixel oder vielleicht 350 Pixel. Ich denke, das sollte in Ordnung sein. Und in unserem, innerhalb unseres Moduls, können Sie sehen, dass wir diese Zoom-Optionen haben, so dass Sie verkleinern können. Wir können hineinzoomen, nur um das Aussehen unserer, unserer Karte zu ändern. Ich denke, das sollte sein, das sollte in Ordnung sein. Das letzte, was hier zu tun ist, wäre, ein Kontaktformular hinzuzufügen. Also lassen Sie mich einfach ein wenig hinauszoomen. Also dieses Kontaktformular hier, aber ich werde hier nicht ein echtes Kontaktformular hinzufügen. Ich möchte nur keinen Spam von dieser Seite haben. Ich habe gerade gesehen, dass wir bereits ein Kontaktformular hinzugefügt haben, bevor wir es gelernt haben. Wir lernen, wie man ein Kontaktformular hier in einem Sauerstoff benutzt. Also lassen Sie mich einfach schnell einige, einige einfache divs innerhalb dieses div hinzufügen . Also werde ich einfach wie ein div machen und ich werde 100% tun. Ich werde die Hintergrundfarbe machen und Tower rosa sein. Und ich werde auch tun, wie 50 Pixel Höhe. Und ich weiß, dass Sie hier viel sehen können, viel, viel von einer Veränderung in Bezug auf die Höhe. Aber vertrau mir, es passiert. Es ist nur eine Vermutung. Es ist nur die Verdünnung hier in Sauerstoff. Wenn wir nur diese Seite aktualisieren, können Sie sehen, dass wir unsere haben , na ja, sagen wir, dies ist unser Namensfeld. Vielleicht können Sie es tatsächlich ein bisschen größer machen. Also werde ich mit etwa 75 gehen. Und ich werde auch wie ein Stück Text hinzufügen. Und das wird nicht in diesem div sein. Oder wir könnten machen, vielleicht machen es in der div y naught sitzen. Lassen Sie uns einfach so etwas wie Ihren Namen eingeben. Da gehen wir. Und ich werde dieses div, horizontale Ausrichtung zum Zentrum machen . Oder vielleicht lassen Sie uns mit der linken Seite gehen, aber lassen Sie uns tatsächlich einige Abstände im Inneren hinzufügen. Ich werde wie zehn Pixel Polsterung ringsum hinzufügen. Und dann werde ich diese Höhe einfach auf etwa 50 fallen lassen. Ich werde das retten. Und mal sehen, wie es im Frontend aussieht. Lass mich einfach runtergehen. Das wird also unser Namensfeld sein. Vielleicht machen wir das High. Machen wir es nur ein bisschen größer, so etwas wie 16. Und dann müssten wir nur noch diesen Kerl klonen. Also lassen Sie uns sagen, dass dies unsere E-Mail sein würde. Lassen Sie uns Ihre E-Mail machen. Da gehen wir. Und lassen Sie uns vielleicht einige Abstände hinzufügen. Und 25 dann leiht duplizieren diesen Kerl. Wieder. Lass es uns unterwerfen, schätze ich. Und dann duplizieren wir diesen Kerl noch mal. Und nennen wir diese eine Nachricht. Und natürlich muss dieser Kerl viel größer sein. Also gehen wir zu Advanced. Ich werde zu Größe und Abstand gehen. Und ich werde es vielleicht wie Prozent tun. Und ich werde vielleicht mit 50% gehen. Und wenn wir zu unserer primären Registerkarte gehen, möchte ich diesen Leitfaden auf Mitte ausrichten. Ich wollte es so sagen. Und das letzte, was hier zu tun ist, wäre, einfach einen einfachen Submit-Button hinzuzufügen. Knopf Da gehen wir. Dies wäre unsere Schaltfläche, und ich würde es senden nennen. Dann gehen wir, lasst uns die Farbe in unser Rot ändern. Vielleicht ändern wir die Typografie. Also werde ich zur Typografie gehen. Ich will es Großbuchstaben machen. Vielleicht werde ich den Brief ein wenig ausräumen. Machen Sie die Schriftgröße nur größer, aber nicht so groß. Gehen wir mit 18. Und ich werde auch etwas Rand space-like an der Spitze hinzufügen. Und ich denke, vielleicht könnten wir den Knopf strecken, der sich von links nach rechts erstreckt. dieser Knopf ausgewählt ist, gehe ich auf die Größe und den Abstand. Und mal sehen, 100%. Da gehen wir. Ich werde es retten. Und vielleicht für unsere Polsterung werde ich mit wie, mal sehen, wie 15 oben und 15 Pixel unten. Lass uns den Kerl retten. Wenn du auf unsere Titelseite gehst und das aktualisierst, gehst du den ganzen Weg hier runter. Und wir und wir haben unsere NICHT eine echte Ich weiß, es ist kein echtes Kontaktformular, aber ich will wirklich nicht wie nein haben, Spam kommen von den Seiten werden nicht sein, Sie wissen schon, Hinzufügen eines echten Kontakts für meine, ich möchte nur diese Seite für Sie zum Leben behalten, damit Sie experimentieren können. So können Sie es tatsächlich sehen. Und Sie können sehen, wie es war, wie es gebaut wurde. Wenn wir zu unserem Original gehen, können wir sehen, dass wir im Grunde unseren, na ja, diesen Partner geschaffen haben . Vielleicht könnten wir sie dazu bringen, zu unseren Diffs zu gehen. Und sagen wir, dass dieser Kerl nur ein bisschen größer sein wird. Also lasst uns etwa 60 oder vielleicht 55 machen. Aber natürlich würde es wissen, dass es uns dazu bringen würde, hier etwas mehr zu reinigen. Also denke ich, es ist gut, dass wir diese Topografie einfach kaputt machen können. Und dafür nicht, und ich werde einfach wie 1.1 tun. Und wir gehen. Und dann lassen Sie uns einfach die Reaktionsfähigkeit überprüfen. Mal sehen, ob wir das geschrieben haben, richtig. Das sieht gut aus. Im Jahr 1992 sieht es immer noch in Ordnung aus. 768. Das sieht gut aus. Und vier AT, das sieht gut aus als gut. Also ja, wir haben unseren Kontakt. Nun, sagen wir, es ist ein Dummy-Kontaktformular erstellt. Wir haben diese Typen auch hier erschaffen. Also, jetzt müssen wir nur diese drei Spalten hinzufügen, oder? Genau hier. Also fangen wir an, sie als nächstes zu machen. 111. 13.31Fügende 1-Elemente: Also werde ich noch einen Abschnitt schnappen. Ich werde nur einen Abschnitt hinzufügen. Dieser Typ hier. Und natürlich muss es eine haben, haben eine richtige Hintergrundfarbe. Also warum werfen wir nicht einen Blick auf das Original. Wir bekommen im Grunde dieser Abschnitt wird zuerst in zwei geteilt, gut in drei Spalten, aber auch zwei Zeilen. Also schätze ich, dass wir letztendlich, letztendlich in einem anderen Abschnitt. Aber jetzt konzentrieren wir uns auf diese drei Spalten genau hier. Also, was ich tun werde, ist, dass ich Spalten hinzufügen werde. Da gehen wir. Und ich werde mit diesem Kerl gehen. Und wenn wir einen Blick auf das Original werfen, haben wir diese Titel Über uns Kontakt und schnelle Links bekommen. Und dann haben wir ein paar Informationen drinnen. Also fangen wir mit über uns an. Also in unserem ersten div werde ich nur ein Stück Text hinzufügen. Und ich werde eintippen und binden. Da gehen wir. Wir werden die Textfarbe ändern. Und ich denke, ich werde das ändern, nun, diese Schriftfamilie in unsere Display-Schriftart. Und ich werde das Schriftgewicht auf etwas wie 600 ändern und die Schriftgröße auf, sagen wir, 22. Das sollte gut sein. Und ich bin mir nicht sicher, ob die Texte hier zentriert waren. Ja, der Text ist zentriert. Also werde ich mein div schnappen und ich werde sicherstellen, dass alles schön auf die Mitte ausgerichtet ist. Und dann werde ich nur noch ein Stück Text hinzufügen. Also dieser Typ hier, und ich werde mir diesen Text ausleihen und ihn hier einfügen. Und natürlich, wenn wir zur Typografie gehen, müssen wir ihn schaffen, wir haben eine Ausrichtung zur Mitte und ändern die Farbe. Da gehen wir. Vielleicht lassen Sie uns die Schriftgröße auf etwa 12 verringern. Vielleicht. Das ist vielleicht machen wir es 13. Und da gehen wir. Also, jetzt denke ich, wir könnten diese Elemente einfach duplizieren. Und wenn wir uns das Original ansehen, kamen wir zu diesem Kontakt und diesen Informationen. Also werde ich mir meine Überschrift schnappen und ich werde sie duplizieren. Und ich werde es in diesem div verschieben. Und ich werde es nennen, glaube ich, es war Kontakt. Also lasst uns Kontakt machen. Und wir werden sicherstellen, dass alles auf die Mitte ausgerichtet ist. Dann werde ich mir diesen Absatz ausleihen und ihn hierher schieben. Und das wird unser Dickes sein. Es wird unsere Adresse sein. Dieser Typ hier. Also schätze ich, ich werde es als unsere Adresse so belassen. Oder vielleicht okay, lass uns eine richtige Adresse machen. Es wird diese 4040 Park Avenue sein, Brooklyn, New York. Da gehen wir. Und dann drücke ich einfach die Eingabetaste und mache so etwas wie das Telefon 180459845. Und ich glaube, wir haben zwei Anschriften. Oh, wir haben auch eine E-Mail hier. Also lasst uns das machen. Also, das ist und warum so werde ich einfach in New York eine glückliche Postleitzahl eingeben , denke ich. Und dann lass uns die USA machen. Da gehen wir. Und auch hier unten, werde ich einen Kontakt auf lawyers.com hinzufügen. Und lassen Sie mich einfach die Räume hier reparieren. Und das letzte Bit hier wäre, nur meinen Text zu duplizieren, nun, diese Überschrift und zur Seite zu gehen. Und ich glaube, das war es, es sind schnelle Links. Okay, also nennen wir es so. Also lasst uns es schnelle Links machen. Und dann lasst uns das div Center alles packen. Und für die schnellen Links könnten wir nur einfache Textlinks hinzufügen, wenn Sie möchten, wenn Sie es für 100 machen wollten, um sie anders als unser Menü zu machen. Also, ich denke, wir könnten das vielleicht tun. Aber ich werde sie mit einem div umwickeln. Also zuerst werde ich ein div erstellen. Und innerhalb des div werde ich einen Textlink hinzufügen. Dieser Typ hier. Und lasst uns das ändern. Mal sehen, was wir in der haben, im Original nach Hause über, Ich denke, das ist nur unsere Speisekarte. Also werde ich zuerst mit nach Hause gehen. Also mit meinem ersten Link ausgewählt, Vielleicht werde ich eine Klasse hinzufügen. Ich werde es TM Fußzeilenlinks nennen. Da gehen wir. Und mal sehen, was wir daran ändern können. Vielleicht können wir die Textfarbe ändern. Lass uns das ändern. Ändern wir die Schriftart, Schriftgröße in etwas wie vielleicht 13. Und lasst uns zur Typografie gehen und Objektiv Großbuchstaben machen. Da gehen wir. Und wenn wir zu unserer primären Registerkarte gehen, können Sie auch die Hover-Farbe festlegen. Vielleicht lassen Sie uns unsere aufrechte Farbe machen. Warum nicht? Wenn Sie also den Mauszeiger über, werden wir diesen Effekt haben. Also, wenn dieser Kerl bearbeitet wird, vielleicht wollen wir eigentlich vorher, bevor ich das klone, werde ich wie ein bisschen Abstand und wie fünf Pixel hinzufügen. Und dann können wir diesen Kerl tatsächlich einmal, zweimal, vielleicht dreimal. Und ich werde den Text in Übungsbereiche ändern. So Übungsbereiche, als wir Torr schön geregelt den Blog. Und dann machen wir Kontakt, Betrüger, Takt. Und natürlich in meinem div werde ich sicherstellen, dass alles auch zentriert ist genau wie wir es im Original haben. Aber diese, diese Links sind nicht, naja, sie sind nicht in Großbuchstaben zu verärgern. Also, vielleicht lasst uns das ändern. Ich werde in meine Klasse gehen, Erweiterte Topographie und den Großbuchstaben loswerden. Aber vielleicht lasst uns sie kapitalisieren. Da gehen wir. Und Voila, wir haben unsere drei Tabs hier. Das letzte, was zu tun ist, wäre, unsere Symbole und einige normale wie diese Copyright-Informationen hier unten hinzuzufügen . Aber da wir Spalten hier erstellt haben, möchte ich diese Spalten nicht verwenden, um diese tiefen Elemente hinzuzufügen. Also in diesem Abschnitt werde ich einfach gehen und soziale Symbole wählen. Und ich werde diesen Abschnitt packen und ich möchte natürlich alles an der Mitte und diesen Symbolen ausrichten. Also alle, vor allem, sie müssen kleiner sein, fehlte etwas wie 18. Lassen Sie uns den Symbolstil ändern. Mal sehen, Quadrat. Vielleicht gehen wir mit leer. Und ich werde die Farbe auf mein superleichtes, blassrosa ändern. Da gehen wir. Und schauen wir uns das Original an. Wir haben hier eine kleine Lücke. Also werde ich diese Kerle runterbringen, wenn ich sie einfach schnappen kann, wird es vielleicht einfacher sein, einfach etwas Spielraum zu den Tabletten hinzuzufügen, wie 25%. Das wird viel zu viel sein. So wie zehn oder 66 sollte genug sein. Und vielleicht denken wir, dass diese Lipide ein bisschen größer sind, das Original. Also lassen Sie uns diese Symbole tatsächlich ein bisschen größer machen. Also lassen Sie uns 20 oder sogar 22 wählen. Und weißt du, ich mag dieses Facebook-Symbol hier nicht wirklich. So könnten wir entweder das Facebook-Symbol loswerden, Nun, der Facebook-Link von hier aus und einfach durch das LinkedIn-Symbol ersetzen. Da gehen wir. Es sieht ein bisschen besser aus. Also haben wir die sozialen Symbole. Fügen wir nun die urheberrechtlich geschützten Informationen unten hinzu. Also, was ich tun werde, ist, dass ich zuerst ein Symbol hinzufügen werde. Und innerhalb des Font Awesome Set haben wir eine Copyright-Information eigen, also werde ich nur anfangen, in Kopie zu tippen. Und das ist dieser Typ hier. Und lasst uns die Größe auf etwas wie vielleicht 12. Und natürlich lasst uns die Farbe zu unserem blassrosa ändern. Da gehen wir. Jetzt können wir etwas Text hinzufügen und wir könnten wie, ich weiß nicht, 2018 bis 2020 lawyers.com eintippen . Ich kann nicht wirklich sehen, was ich schreibe und ich muss wirklich die Textfarbe ändern. Da gehen wir. Ich glaube, ich glaube, es sieht gut aus. Und wir werden diese Größe auch auf 12 ändern. Also natürlich, das Kopier-Symbol, um die Schritte zu beenden, müssen nebeneinander gehen. Und das ist ganz einfach. Wir müssen diese Jungs mit dem div umwickeln. Da gehen wir. Und dann stellen Sie sicher, dass unsere untergeordneten Elemente horizontal angezeigt werden. Lassen Sie uns sie in der Mitte ausrichten. Und wenn Sie möchten, fügen Sie einige Abstände rechts neben dem Symbol hinzu. Und da gehen wir. Und vielleicht könnten wir hier etwas Marge hinzufügen, denn wir könnten hier etwas Platz hinzufügen, um es mehr oder weniger so aussehen zu lassen. Und wenn Sie es wissen, speichern Sie es. Und mal sehen, wie es aussieht. Es sieht hübscher aus, richtig, nach meinem Geschmack. Aber ich denke, was wir vielleicht tun könnten, ist, dass wir vielleicht einen Hauch von Trennung zwischen den Kontaktinformationselementen und diesem unteren Teil unserer Fußzeile hinzufügen könnten . Also werde ich meinen Abschnitt schnappen und wir können einfach unsere Farbe schnappen und es nur einen Hauch dunkler machen, einfach so. Und dann rette diesen Kerl. Also gehen wir zu unserer Hauptseite. Und da gehen wir, Sie können sehen, dass es wirklich ziemlich aussieht, ganz in Ordnung. Also gehen wir hin. Wir haben unsere Seite erstellt. 112. 13.32Summary: Okay, also gehen wir. Wir haben unsere Seite erstellt. Also zuerst haben wir den Header zusammen mit unserem Overlay weniger klebrige Header hinzugefügt. Wir haben diesen Hintergrundschieberegler hinzugefügt. Dann bekamen wir diesen Abschnitt mit den, einigen lustigen kleinen Textelementen. Dann haben wir diesen schönen Abschnitt mit einigen Parallaxen-Festbett-Boden-Effekt bekommen. Dann haben wir diese Symbole mit einer Schaltfläche erstellt. Da gehen wir. Dann haben wir diesen Text in Spalten hinzugefügt. Denken Sie daran, wie wir die Spaltenanzahl hinzugefügt haben, eine CSS-Regel. Dann fügen wir unsere Anwälte hinzu, denen wir eigentlich gesagt haben, ein Schieberegler zu sein. Und natürlich, wenn Sie sie sehen möchten, wenn Sie sie automatisch wiedergeben möchten, müssen Sie nur den Schieberegler auf die automatische Wiedergabe einstellen. Und dann haben wir natürlich den Schieberegler mit unseren Testimonials bekommen. Wir haben den Blog erstellt, und dann haben wir unsere Fußzeile mit einigen Kontaktinformationen, Google Map und diese Links und diese Spalten direkt hier hinzugefügt . Wie ich schon sagte, dieser Entwurf wird, du weißt schon, live sein. Sie können es überall und jederzeit sehen. Also gehen wir hin. Ich hoffe, Sie mochten und kreieren dieses Design. Ich hoffe, du hast es zusammen mit mir erschaffen. Und ich hoffe, dass Sie schnell die Freiheit und die Kraft verstehen, die Sauerstoff-Builder Ihnen gibt. Und dass Sie Ihr Kompetenzportfolio aufbauen, erweitern und Ihre eigenen Websites und natürlich Websites für Ihre Kunden einfach erstellen können. So wie immer, haben Sie ein schönes Design.