Benutzerdefiniertes Website-Design: Figma zu WordPress mit Elementor Pro

1. Willkommen beim Custom Website Design: Figma zu WordPress mit Elementor Pro Kurs: Hallo zusammen. Möchten Sie lernen, wie Sie das Infigma-Design in voll funktionsfähige FixPerfect-WordPress-Websites umwandeln Infigma-Design in voll funktionsfähige Wenn Sie jemals davon geträumt haben, den gesamten Webdesign-Prozess vom ersten Konzept bis zur Live-Site zu beherrschen den gesamten Webdesign-Prozess , sind Sie hier genau richtig. Diese Klasse heißt benutzerdefiniertes Website-Design, Figma WordPress mit Elementor Pro Ist der ultimative Leitfaden für die Erstellung professioneller, benutzerdefinierter Websites , die sich wirklich von anderen abheben. Wir werden nicht nur über Dinge sprechen. Wir tauchen tief in das praktische praktische Lernen ein. Sie werden zunächst die Grundlagen des UI UX-Designs beherrschen und verstehen, was die Website benutzerfreundlich und visuell ansprechend macht . Dann werden wir Figma verwenden, um Eine-Benutzeroberflächen von Grund auf neu zu entwerfen Ich werde Sie durch alles führen von grundlegenden Formen und automatischen Laps bis hin zu fortgeschrittenen Techniken wie Komponentenbibliotheken und Designsystemen Dann werden wir diese Designs nehmen und sie mithilfe des Worress- und Element-Ansatzes in echte Websites umwandeln mithilfe des Worress- und Element-Ansatzes in echte Websites Sie werden lernen, responsive Layouts zu erstellen, jedes Detail anzupassen und sogar Ihre Website im Hinblick auf Leistung und SEO zu optimieren Wenn ich ein bisschen über mich selbst erzähle, bin ich Gian Akalanga und ich bin der Gründer von UX Alchemy Meine Leidenschaft ist es also, mein Wissen und meine Erfahrung mit anderen zu teilen Wissen und meine Erfahrung Deshalb habe ich diesen Kurs ins Leben gerufen. In diesem Kurs werden wir also alles behandeln, vom Sammeln von Designinspirationen über nutzerzentriertes Designkonzept zum benutzerfreundlichen Website-Design mit Figma Anschließend behandeln wir die Einrichtung Ihres Hostings und Domain über die Installation von WordPress und Element of Pro bis hin zum Start auf Ihrer Live-Site. Sie werden lernen, es in Heldenbereichen zu erstellen, Seiten zu entwerfen und zu nutzen. Sogar eine Reihe erweiterter Funktionen wie Popups und Analysen. Egal, ob Sie ein absoluter Anfänger oder ein erfahrener Designer sind , der Ihre Fähigkeiten erweitern möchte, dieser Kurs ist darauf ausgelegt, Sie 0-0 zu bringen Sie werden das Selbstvertrauen und die Erfahrung gewinnen, um professionelle Websites zu erstellen , die Kunden beeindrucken und Ihr Profil verbessern. Am Ende werden Sie in der Lage sein, in Figma ein atemberaubendes UI-Design zu erstellen Erstellen Sie mit Elemento Pro eine leistungsstarke benutzerdefinierte WordPress-Website , beherrschen Sie responsives Design und Optimierung, implementieren Sie bewährte SEO-Praktiken und -Analysen und setzen Sie vor allem Ihre Designvision in Wenn Sie lernen möchten, wie gezielte benutzerdefinierte Websites nutzen können, ist dieser Kurs genau das Richtige für Sie Wir sehen uns in der Klasse. 2. Warum funktionieren generische Website-Vorlagen nicht: Lassen Sie uns zunächst darüber sprechen, warum es eine schlechte Idee ist, dieselbe alte Website-Vorlage zu verwenden . Sie haben wahrscheinlich eine Reihe von Websites gesehen , die sehr ähnlich aussehen. Sie sind wie Häuser mit Ausstechformen, alle haben dieselbe Form, nur unterschiedliche Farben. Diese generischen Websites sind ein großes Problem für Unternehmen. Stellen Sie sich einen überfüllten Markt vor, auf dem jeder dasselbe im selben Paket sagt. Wie heben Sie sich von der Masse ab? Das ist es, womit Unternehmen mit diesen generischen Websites konfrontiert sind. Diese Websites erzählen weder Geschichte eines Unternehmens noch machen sie zu etwas Besonderem. Sie sehen vielleicht hübsch aus, funktionieren aber nicht wirklich gut für Leute, die die Website nutzen. Außerdem helfen sie Unternehmen nicht dabei, neue Kunden zu gewinnen. Eine gute Website ist ein leistungsstarkes Instrument, um Menschen anzulocken. Bring sie dazu, Sachen zu kaufen. Es ist mehr als nur eine schicke Online-Broschüre. Es ist das Gesicht des Unternehmens. Wir müssen uns auf die Leute konzentrieren, die die Website nutzen. Sie suchen nach Antworten und Lösungen. Wir sollten eine Website entwerfen, die ihnen hilft, schnell das zu finden, was sie brauchen. Maßgeschneiderte Websites sind wie maßgeschneiderte Anzüge. Sie passen perfekt. Wir können dafür sorgen, dass sie gut aussehen, perfekt funktionieren und Unternehmen dabei helfen, mehr Geld zu verdienen. Denken Sie daran, dass jedes Unternehmen anders ist. Ihre Websites sollten dieselbe alte Website-Vorlage verwenden. Wird es nicht mehr schneiden. Wir müssen Websites erstellen, die etwas Besonderes sind und wirklich für Menschen funktionieren. Darüber werden wir der nächsten Lektion mehr erfahren. 3. Was ist UI/UX und wie können wir es anwenden? Website-Design: Lassen Sie uns etwas über etwas wirklich Wichtiges im kundenspezifischen Webdesign lernen wirklich Wichtiges im kundenspezifischen Webdesign UI und UX. Also, was ist UI? UI steht für Benutzerschnittstelle. Es ist wie das Gesicht der U-Website. Es ist alles, was ein Benutzer sieht und mit dem er interagiert. Dazu gehören Schaltflächen, Text , Bilder, Farben und deren Anordnung. Ein gutes UI ist leicht verständlich gebraucht. Also, was ist UX? UX steht für Benutzererfahrung. Es geht darum, wie sich ein Benutzer fühlt , wenn er Ihre Website nutzt. Es geht um den gesamten Weg von Suche nach Ihrer Website bis zur Erledigung einer Aufgabe. Eine gute UX macht die Nutzer zufrieden und zufrieden. UI und UX sind wie zwei Seiten derselben Medaille. Sie können eine schöne Website haben, aber wenn sie schwer zu bedienen ist, werden die Leute sie nicht mögen. Es hat eine gute Benutzeroberfläche und eine schlechte UX und Sie können eine Website haben , die einfach zu bedienen ist, aber wenn sie hässlich aussieht, Leute sie nicht benutzen wollen. Es ist wie gutes UX mit schlechter Benutzeroberfläche. Wie verwenden wir UI und UX , wenn wir Websites entwerfen? Die Erstellung einer erfolgreichen Website beginnt mit einem tiefen Verständnis der Nutzer. Wir müssen herausfinden , für wen wir konzipiert sind , welche spezifischen Bedürfnisse und Ziele sie haben. Indem wir das Design vereinfachen und sicherstellen, dass es leicht zu bedienen ist, können wir eine positive Benutzererfahrung schaffen Regelmäßige Tests mit echten Benutzern helfen uns dabei, Verbesserungspotenziale zu identifizieren und unser Design entsprechend zu verfeinern Letztlich sollte unser Fokus immer darauf liegen, die Bedürfnisse und Wünsche der Nutzer zu erfüllen und gleichzeitig eine visuell ansprechende Website zu erstellen. UI und UX sind sehr wichtig für die Erstellung erfolgreicher Websites. diese Konzepte verstehen und anwenden, können Sie Websites entwerfen , die die Leute gerne nutzen. 4. Was ist Figma-Design-Tool: Bevor wir uns mit benutzerzentrierten Designs und fortgeschrittenen UX-Prinzipien vertraut machen, sollten wir mit den Grundlagen beginnen Lassen Sie uns in das Design der Benutzeroberfläche von Websites eintauchen und gleichzeitig UX lernen. Zunächst müssen wir uns mit dem Design-Tool vertraut machen, also werden wir Figma verwenden FIGMA ist ein fantastisches Tool zur Gestaltung von Benutzeroberflächen, wir die Benutzeroberfläche von Websites entwerfen können , die wir gerne Wir beginnen mit den Grundlagen von Figma, wo wir lernen, wie man in der Benutzeroberfläche navigiert und einfache Designs erstellt Verlauf werden wir die fortschrittlicheren Funktionen wie die Erstellung interaktiver Prototypen, die Zusammenarbeit mit Teammitgliedern und die Verwendung von Komponenten untersuchen fortschrittlicheren Funktionen wie die Erstellung interaktiver Prototypen, , um unser Design konsistent zu halten Am Ende werden Sie ein solides Verständnis dafür haben, wie Figma verwenden können, um das Website-Design von Anfang bis Ende zu erstellen Website-Design von Anfang bis Ende zu 5. Vor- und Nachteile von Figma und Alternativen: FIGMA ist ein weit verbreitetes Tool zur Gestaltung von Benutzeroberflächen und bietet eine Reihe von Vor- und Nachteilen, die es wert sind, in Betracht gezogen Einer der größten Vorteile von FIGMA ist sein kollaborativer Charakter Da es cloudbasiert ist, können mehrere Teammitglieder gleichzeitig an demselben Projekt arbeiten Dadurch ist die Zusammenarbeit in Echtzeit reibungslos und effizient. FIGMA verfügt außerdem über eine intuitive Benutzeroberfläche , die für Anfänger leicht zu erlernen ist und dennoch leistungsstark genug für fortgeschrittene Benutzer Die Designkomponenten und wiederverwendbaren Stile tragen dazu bei dass Projekte organisiert und konsistent bleiben , was auf lange Sicht Zeit spart Darüber hinaus ist FICMA von jedem Gerät mit Internetverbindung aus zugänglich von jedem Gerät mit Internetverbindung aus So können Sie an Ihrem Design arbeiten, wo auch immer Sie sind , FIMA ist jedoch nicht ohne Nachteile Da es auf eine konsistente Internetverbindung angewiesen ist, kann es problematisch sein, wenn Sie in einem Bereich mit schlechter Konnektivität arbeiten FICMA bietet zwar einen kostenlosen Tarif an, einige seiner erweiterten Funktionen sind jedoch an ein kostenpflichtiges Abonnement gebunden, was für ähnliche Teams oder einzelne Designer eine Einschränkung darstellen kann ähnliche Teams oder einzelne Designer zwar Cloud-basierte Natur von Figma ist zwar eine Stärke, kann aber auch ein Nachteil sein, wenn Sie lieber arbeiten oder fliegen möchten oder mehr Kontrolle darüber benötigen, wo Ihre Dateien gespeichert werden Adobe XD ist jedoch eine Alternative zu FIGMA und bietet seine eigenen Stärken Für diese Lektionen werden wir FGMA als Leitfaden für unsere Lernreise verwenden Vor - und Nachteile verstehen, können Sie eine fundierte Entscheidung darüber treffen , welches Tool Ihren Bedürfnissen am besten entspricht Lassen Sie uns nun weitermachen und herausfinden, was FICMA für uns tun kann 6. Ein Figma-Konto erstellen: Hallo zusammen. Es ist Zeit , ein Figma-Konto zu erstellen Wenn Sie bereits ein Figma-Konto haben, können Sie diese Lektion überspringen Wenn du nicht einfach zu Google gehst oder auf den Link im Bereich Ressourcen klickst Wenn Sie zu Google gehen und nach Figma suchen, werden Sie diese Art von Ergebnis sehen Klicken Sie einfach auf das erste Ergebnis Jetzt bin ich auf der Figma-Landingpage. Wenn Sie bereits ein Konto haben, können Sie auf Anmelden klicken Wenn nicht, klicken Sie auf Schaltfläche „Kostenlos starten“ und klicken Sie hier auf Weiter mit Google, klicken Sie hier auf Weiter mit Google um sich mit Ihrem Gmail-Konto anzumelden. Okay. Jetzt klicke ich auf mein Gmail-Konto und dann auf. Weiter. Okay. Jetzt melde ich mich einfach an und wir müssen einige Details ausfüllen. Zuerst müssen wir hier unseren Namen hinzufügen, also füge ich meinen Namen hinzu klicke dann auf Weiter. Dann muss ich auswählen Welche Art von Arbeit machst du? Hier wähle ich das Design aus und klicke dann auf Weiter. Dann heißt es, beschreibt irgendeines davon deine Arbeit? Hier wähle ich die kostenlose Antwort und Sie wählen entsprechend Ihrer Position Dann klicke ich auf Weiter. Dann haben wir noch eine Frage wie, wem arbeiten Sie normalerweise zusammen? Hier wähle ich niemand nur mich aus und klicke auf Weiter, dann möchte ich niemanden einladen. Ich werde diesen Teil überspringen und hier etwas anderes auswählen, dann auf Weiter klicken und hier, haben Sie schon einmal ein IgM-Produkt verwendet, werde ich viele Male hinzufügen Wenn Sie mit WIC MA nicht vertraut sind, klicken Sie einfach auf Nein und dann auf Weiter Dann wähle ich dieses Starterpaket aus. In zukünftigen Lektionen werde ich die Vorteile eines kostenpflichtigen Abonnements von Figma erläutern die Vorteile eines kostenpflichtigen Abonnements von Figma Wir können jedoch all diese Lektionen mit dem kostenlosen Paket verfolgen diese Lektionen mit dem kostenlosen Paket Ich klicke auf Weiter und hier werde ich auf Eskepo klicken, jetzt ist hier das Figma-Dashboard Alle unsere Projekte werden hier geladen. als ersten Schritt Lassen Sie uns als ersten Schritt eine neue Figma-Datei erstellen. Dazu klicke ich auf diese neue Designdatei Okay, hier ist die Figma-Oberfläche. Zuallererst werde ich diese Figma-Datei umbenennen. Lassen Sie uns es als mein erstes Projekt umbenennen. Treten Sie ein. In der nächsten Lektion wollen wir uns mit all diesen Paneelen vertraut machen und versuchen, unseren ersten Rahmen oder unser erstes Design zu erstellen. S im nächsten 7. Was ist Figma UI3: Hallo alle zusammen. Figma hat ihren neuen UI-Baum vorgestellt Machen wir uns mit Figma UI Two und Figma UI Tree vertraut. als ersten Schritt Lassen Sie uns als ersten Schritt ein neues Design erstellen. Dazu klicke ich auf diese blaue Schaltfläche und dann auf Designdatei Okay. Hier ist die Vorschau von UI Two Editor. Wenn Sie diesen Editor sehen, haben Sie möglicherweise keinen Zugriff auf die dritte Benutzeroberfläche, da die dritte Benutzeroberfläche nur Personen gewährt wird , die auf ihrer Warteliste stehen. Wenn Sie auf die Schaltfläche „Hilfe und Ressourcen“ klicken, sehen Sie diesen Link, erfahren Sie mehr über UI Three und AIXs und hier finden Sie weitere Details Wenn Sie jedoch für UI 3 bewilligt haben, sieht die Benutzeroberfläche so aus Zuerst gehe ich zur Figma und lass uns eine neue Datei erstellen. Ich klicke hier einfach auf dieses neue Design. Ich werde so aussehen und in der nächsten Lektion werden wir die Elemente im Figma-Editor mit der zweiten Benutzeroberfläche durchgehen Figma-Editor mit der zweiten Benutzeroberfläche Wenn Sie diese Vorschau bereits haben und zur alten Vorschau der Benutzeroberfläche wechseln möchten, können Sie auf diese Hilfe und Ressourcen klicken und darauf klicken, um zur vorherigen Benutzeroberfläche zurückzukehren Und Sie können hier klicken und auf Neue Benutzeroberfläche verwenden klicken, um zur dritten Benutzeroberfläche zu wechseln. nächsten Lektionen müssen Sie zwei mit der Figma-Benutzeroberfläche abschließen. Danach werde ich Ihnen zeigen, wie Sie die dritte Benutzeroberfläche erhalten , auch wenn Sie nicht ausgewählt sind Wenn Sie also mit FIGMA nicht vertraut sind und über die UI-Vorschau verfügen, müssen Sie hier klicken und auf Zurück zur zweiten Benutzeroberfläche klicken, um die nächsten Lektionen abzuschließen 8. Figma UI2-Komplettlösung: vorherigen Lektion haben wir unser Figma-Konto erstellt. Jetzt bin ich im Figma-Dashboard, um zum Figma-Dashboard zu gelangen. Sie können figma.com verknüpfen und Jetzt bin ich im Figma-Dashboard, um zum Figma-Dashboard zu gelangen. Sie können figma.com verknüpfen Hier ist das erste Projekt, das wir in unserer letzten Lektion erstellt haben Machen wir uns mit dem Figma-Designtool vertraut und finden wir heraus welche Art von Elementen oder welche Funktionen wir in Figma verwenden können Dazu gehe ich zu unserem ersten Projekt und doppelklicke darauf Okay, jetzt bin ich bei unserem Figma-Projekt. Und in diesem Bereich nannten wir es Leinwand Hier ist der Bereich, in dem wir unsere Website gestalten, und in dieser oberen schwarzen Leiste finden wir Artikel oder Tools, die wir verwenden können. Hier haben wir Frames. Frames sind die Ebenen, die zur Gestaltung unserer Website verwendet wurden. Als ersten Schritt erstellen Sie einfach einen Rahmen, klicken Sie auf den Rahmen und klicken Sie auf unsere Leinwand und wir werden diese Art von Rahmen sehen und hier können wir unseren Rahmen umbenennen, indem wir darauf klicken oder auf den Frame-Namen doppelklicken und ihn wie meinen ersten Frame umbenennen. Dann können wir in unserer linken Seitenleiste viele unserer Ebenen sehen. Derzeit haben wir nur einen Rahmen und in unserer rechten Seitenleiste haben wir die Eigenschaften dieses Rahmens. Wenn wir beispielsweise die Größe dieses Rahmens ändern möchten, haben wir Breite und Höhe. Ändern wir also die Breite auf 1.400 und drücken die Eingabetaste Dann ändern wir die Höhe auf 700. Okay. Jetzt drücke ich Befehlstaste und das Mausrad , um den Rahmen zu vergrößern und zu verkleinern. Also hier ist der erste Frame. A, wir können auf dieser Leinwand beliebig viele Frames erstellen. Ich drücke Cramand und scrolle mit dem Mausrad nach oben, um unsere Leinwand zu verkleinern Dann klicke ich auch auf diesen Rahmen. Nachdem ich auf den Rahmen geklickt habe, sehe ich in unserer rechten Seitenleiste die Rahmenoption. Das sind also vordefinierte Frames. In diesem Fall werden wir beispielsweise ein Website-Design für den Desktop erstellen. Klicken wir auf diesen Desktop und hier haben wir kostenlose Standardgrößen für leider vorgefertigte Rahmengrößen für den Desktop Ich klicke auf diesen Desktop. Und hier haben wir den Rahmen in Desktop-Größe, die Breite beträgt 1.440 und die Höhe können wir an die Höhe der Website anpassen Lassen Sie uns das in meinen zweiten Frame umbenennen und die Eingabetaste drücken. Jetzt klicke ich auch auf den Rahmen und lassen Sie uns sehen, dass wir eine mobile Version der Website erstellen werden eine mobile Version der Website erstellen . Dazu klicke ich auf Telefon und hier haben wir Telefongrößen. Ich werde iPhone 40 und 50 Pro auswählen und hier ist die iPhone-Rahmengröße. Drücken wir unter Windows die Befehlstaste oder und scrollen wir ein bisschen nach oben zu Zumi So erstellen Sie Frames. Auch wenn wir auf den Rahmen in unserer rechten Seitenleiste klicken, haben wir die Optionen, die wir für unseren Rahmen verwenden können. Wenn wir beispielsweise die Feldfarbe ändern möchten, können wir auf diese Feldfarbe klicken und sie nach Belieben ändern. Okay, ich drücke zu Befehlssatz, um die Änderung rückgängig zu machen. Okay. Jetzt weißt du es mit Earl und dann haben wir das Shapes Tool. In diesem Formwerkzeug haben wir verschiedene Arten von Formen Klicken Sie auf das Formwerkzeug oder klicken Sie auf dieses kleine Down-Symbol und dann auf Red Wrangle Wenn wir dann zu diesem Rahmen kommen und darauf klicken, erstellen wir diese Art von Rechteckform In unserer Layoutoption oder im Ebenen-Trichter können wir den Rahmen sehen und innerhalb des Rahmens haben wir die rechteckige Form Vorerst werde ich diesen ersten Frame und den mobilen Frame entfernen und es wird einfacher zu verstehen sein Jetzt klicke ich auf dieses Rechteck und hier können wir die Feldfarbe ändern Lass es uns so ändern. Lass es uns grün machen. Okay. Jetzt kann ich die Größe ändern, wie ich will. Lass uns 150 mal 150 draus machen. Klicken Sie einfach auf das W und drücken Sie 150. Klicken Sie dann auf die Kappe , um zu den Höhenwerten zu gelangen. Lass uns 160 draus machen. Okay. Wenn wir jetzt zu Formen übergehen, können wir auch Linien wie diese erstellen. Wenn wir etwas kreieren wollen, lassen Sie uns eine Linie wie diese erstellen. Wenn wir eine exakt horizontale Linie erstellen wollen, drücken einfach die Shift-Taste und ihre Drehung oder ihr Winkel wird Null sein. Und hier können wir den Winkel auch so ändern. Okay. Jetzt können wir in Estroke die E-Strichfarbe ändern und den Strich vergrößern Dies ist ein Design-Tool und wir können mit diesem Tool jede Art von Design erstellen und ein fantastisches Website-Design erstellen Außerdem haben wir eine Pfeilellipse, wir können diese Ellipse so erstellen Lassen Sie uns die Füllfarbe ändern, um diese grüne Farbe zu ändern. Okay, markiere L von ihnen und dann können wir die Ausrichtung ändern. Wenn wir in diesem Fall auf Vertikale Mitte ausrichten klicken, wird L mittig ausgerichtet. Auch wenn wir auf dieses kleine Pfeilsymbol klicken und dann auf Horizontal verteilen klicken, ist vorerst nichts passiert, aber lassen Sie uns hier diesen Kreis bilden Dann drücken wir auf „Horizontal verteilen“. Komm schon, es funktioniert nicht. Lassen Sie uns zunächst einfach diese Linie entfernen und Alt drücken und rechten Maustaste klicken und so ziehen , um dieses Rangrechteck zu duplizieren Klicken Sie dann auf MTol, klicken Sie auf M-Tool und markieren Sie dies Klicken Sie dann auf Horizontalen I-Abstand verteilen und Earl wird gleichmäßig ausgerichtet Dann können wir Bilder erstellen oder wir können Bilder erstellen. Um Bilder hinzuzufügen, können wir auf dieses Symbol klicken , Formwerkzeuge und dann auf dieses Ortsbild klicken . Dann gehe ich zum eingestellten Ordner, klicke dann auf Öffnen und dann können wir auf unseren Rahmen wie folgt klicken, dann können wir die Größe dieses Rahmens ändern. Um es zu ändern, ohne das Bild zu beschädigen, wenn wir es einfach ändern, wird die Größe beschädigt oder es wird nicht richtig angezeigt. Um dies zu vermeiden, können wir die Umschalttaste drücken und es so anpassen. Okay, als nächstes haben wir das Stiftwerkzeug, das Stift und das Bleistiftwerkzeug. Mit dem Stiftwerkzeug können wir Formen wie diese erstellen und auf Fertig klicken. Dann haben wir T oder Text, klicken Sie auf den Text und klicken Sie so. Lass uns den Text als Hallo machen, also hallo Welt. Dann klicke ich auf den Rahmen und dann auf den Text. Dann haben wir Eigenschaften dieses Textes. Hier haben wir Google Fonts. Lassen Sie uns die Schrift mit vier Stiften erstellen. Die Schriftfamilie wird aus vier Pins bestehen und die Schriftgröße wird halbfett sein, und ich werde auch die Schriftgröße erhöhen Lass uns 60 Moderatoren einschmieren. Hier ist die Schrift und in der Feldfarbe können wir die Schriftfarbe ändern Außerdem gibt es eine Menge Eigenschaften, mit denen man spielen kann. Spielen wir erstmal damit herum, lassen Sie uns den Effekt zu diesem Text hinzufügen. Dazu klicke ich auf Effekt und dann auf Schlagschatten, und hier machen wir 20 X als Null und Y als Null. Dann erhöhen wir die Deckkraft auf 80% und wenn wir wollen, können wir die Hintergrundfarbe wie folgt ändern Es gibt viele Eigenschaften, mit denen man spielen kann. Auf diese Weise wird Text erstellt. Außerdem haben wir das Plug-In und die Komponentenbibliothek Figma, und in zukünftigen Lektionen werden wir sie alle lernen Wenn wir die Objekte auswählen , die Elemente auswählen, haben wir außerdem diese Art von Eigenschaften, mit denen wir Komponenten erstellen und Maschinenebenen und ähnliches auswählen In zukünftigen Lektionen werden wir zunächst alles darüber lernen. Ich werde diese Bleistiftgrafik entfernen und dann diese entfernen und die Bildgröße auf die volle Größe erhöhen. Außerdem haben wir zwei Rechtecke. Wählen Sie es aus und drücken Sie die Umschalttaste und wählen Sie das zweite Rechteck aus. Auf diese Weise können wir beide Rechtecke auswählen und dann auf Löschen drücken , um sie zu entfernen. Okay. Jetzt können wir diesen Frame oder das gesamte Projekt mit unseren Teammitgliedern teilen gesamte Projekt mit unseren Teammitgliedern Klicken Sie auf diesen Link zum Kopieren und jeder kann mit diesem Link auf dieses Figma-Projekt zugreifen Dann können wir das Original überprüfen, indem wir auf diese Schaltfläche klicken Lass uns darauf klicken und hier ist unsere Website. O hier ist unser Rahmen, der in der realen Ansicht aussehen wird. Außerdem gibt es viele Funktionen. Wenn wir beispielsweise den Rahmen oder das Bild auf der rechten Seite auswählen, haben wir einen Prototyp-Bereich. Dieser Prototyp-Bereich oder Prototyp-Tab dient dazu, die Interaktion zu unserer Website zu machen. Wenn wir beispielsweise auf eine Schaltfläche klicken, unsere Website oder unsere Webseite auf eine andere Seite leitet unsere Website oder unsere Webseite auf eine andere Seite weiter Diese Interaktion können wir mit dem Prototyp-Tab durchführen , und auf der linken Seite haben wir den Tab Assert im Assert-Tab. Wir können die vorgefertigten Designs bekommen. Wir können unser eigenes Design oder unsere eigenen Designelemente erstellen und diese über AssistTab verwenden Wir können auch mehr Seiten erstellen. aktuelle Seite ist Seite eins, machen wir es wie zu Hause und wenn wir auf dieses Plus-Symbol klicken, können wir eine neue Seite wie diese erstellen. Das sind die Grundlagen und wir haben mehr Tools zum Erkunden, mehr Funktionen zum Erkunden. Lass uns sie machen, während wir versuchen zu lernen, wie man die Benutzeroberfläche für unsere Website gestaltet. 9. Figma-Rasterlayout lernen: Hallo, alle zusammen. Die Ausrichtung ist im UX-Design von entscheidender Bedeutung , da sie ein Gefühl von Ordnung und Ausgewogenheit auf der Seite schafft . Wenn die Elemente richtig ausgerichtet sind, führen sie die Benutzer reibungslos durch den Inhalt, sodass er leichter zu lesen als zu verstehen ist. Eine gute Ausrichtung hilft den Benutzern, sich auf den wichtigen Teil des Designs zu konzentrieren , und trägt dazu bei, Verwirrung zu vermeiden, die zu einer insgesamt besseren Benutzererfahrung führt. Außerdem sieht die Website dadurch professioneller und ausgefeilter aus, was Vertrauen beim Publikum schafft. Sie können die nächsten Designs gerne sorgfältig analysieren. Bei all diesen Designs ist die Ausrichtung korrekt und die Ausrichtung falsch gestaltet. Überprüfen Sie einfach den Unterschied zwischen diesen beiden Versionen. Wenn wir benutzerdefinierte Designs erstellen, Ausrichten von Objekten etwas verwirrend und etwas knifflig. Aber in Figma haben wir ein Layoutraster. Schauen wir uns also an, wie wir das Layoutraster verwenden können , um unser Design auszurichten Ich bin im Figma-Dashboard klicke dann auf mein erstes Projekt Wir brauchen das nicht mehr, meinen zweiten Frame oder irgendeinen Frame. Ich lösche einfach die Leinwand und klicke dann auf den Rahmen. Lassen Sie uns einen Rahmen für die Desktop-Version erstellen. Klicken Sie hier auf den Rahmen, klicken Sie auf den Desktop und lassen Sie uns dann den Rahmen der Tablet-Version erstellen. Klicken Sie auf den Rahmen, erweitern Sie das Tablet und ich wähle die Tablet-Größe als iPad Pro 11 Zoll aus. Okay. Jetzt müssen wir eine mobile Version erstellen. Klicken Sie auf Telefon und wählen wir iPhone 14 und 15 Pro aus. Ordnung. Jetzt haben wir hier drei Pranes. Fügen wir dieser Desktop-Version zunächst ein Layoutraster hinzu. Wenn ich auf den Rahmen der Desktop-Version auf meiner rechten Seite klicke , kann ich die Eigenschaften dieses Rahmens sehen. Hier haben wir ein Layoutraster. Also klicke ich einfach auf dieses Plus-Symbol. Wenn ich auf dieses Plus-Symbol klicke, vergrößern wir das Design wie folgt. Okay. Okay. Wenn ich ein Layoutraster anwende oder diesem Rahmen hinzufüge, sieht es so aus. Jetzt klicke ich auf das Layoutraster, das wir hinzugefügt haben, um die Einstellung des Layoutrasters zu erhalten. Derzeit ist unser Rastertyp Raster, aber wir benötigen den Spaltentyp Layoutraster, weil wir unsere Elemente von links nach rechts ausrichten. Wenn wir es so horizontal ausrichten, müssen wir die richtige Ausrichtung auf der linken und rechten Seite erreichen , also Ausrichtung zwischen den Elementen. Hier müssen wir die Anzahl der Spalten hinzufügen. Ich werde die Anzahl der Spalten als Gebühr hinzufügen. Jetzt haben wir die Spalte für das Mautgitter, und ich werde die gleiche Farbe beibehalten. Dann wird der Text gestreckt und hier müssen wir einen Rand zwischen links und rechts hinzufügen. Rand bedeutet Abstand zwischen der linken Seite unseres Elements. Wenn wir beispielsweise Marginus 140 sagen, passt sich dieses Raster an , indem es uns einen Rand oder einen Abstand von links zum ersten Element und von rechts zum letzten Element gibt einen Abstand von links zum ersten Element und von rechts zum letzten Element Also hoffe ich, dass du es verstehst. Wenn wir jetzt Objekte hinzufügen, können wir sie korrekt hinzufügen, indem wir diese Spalte überprüfen. Dann müssen wir Dachrinne hinzufügen. In der Desktop-Version fügen wir Gutter als 20 hinzu. Wenn wir diese Dachrinne auf zehn ändern, wird der Raum dünn Fügen wir es tatsächlich als 15 hinzu, also so. Wenn wir nun Elemente wie dieses hinzufügen, fügen wir das Rechteck hinzu und duplizieren es, indem wir auf dem Mac die Befehlstaste drücken Wenn wir diese Elemente einfügen, können wir einfach die Rahmengröße erhöhen und die Ausrichtung wie folgt überprüfen. Wir können es perfekt so ausrichten. Auch wenn ich ein Objekt oder Element markiere oder auswähle , drücke ich und über einem anderen Element. Wir können den I-Abstand zwischen diesen beiden Elementen überprüfen. Derzeit 815 und lassen Sie uns diese beiden so hinzufügen. Perfekt. Dies ist der Vorteil der Verwendung des Rasterlayouts. Und wenn wir das Design ohne Rasterlayout überprüfen möchten, können wir auf den Rahmen klicken und auf dieses I-Symbol klicken und das Raster wird angezeigt. Okay. Lassen Sie uns nun dieser Tablet-Version ein Raster hinzufügen. Klicken Sie dazu auf den Rahmen in Tablet-Größe und dann auf GritayoutPlus Ich kann dann die Version in die Spalte ändern Dann verwende ich auf dem Tablet sieben als Spaltenanzahl. Dann wird die Marge 60 sein. Dann wird Gutter zehn Jahre alt. Lassen Sie uns die Anzahl der Spalten hinzufügen. Sechs ist besser. Dann können wir, genau wie auf dem Desktop, dieses Raster verwenden, um die Ausrichtung auf diese Weise zu überprüfen. Das ist der Bienenkuchen. Okay. Gehen wir jetzt zum Telefon. Lassen Sie uns auf Layoutraster klicken und hier klicken, dann den Rastertyp in Spalte ändern, und hier füge ich die Rasterzahlen-Synchronisierung hinzu, dann wird Gutter zehn sein, dann wird der Rand 20 sein Lassen Sie uns den Rand tatsächlich wie folgt als 12 hinzufügen. Jetzt können wir entsprechend diesem Raster so retrangle hinzufügen. Dies ist der Vorteil eines Rasterlayouts. Im nächsten Video werden wir über die Figma-Community sprechen. 10. Was ist Figma-Community: Hallo, alle zusammen. Wussten Sie, dass Figma eine Online-Community hat Die Figma-Online-Community ist eine leistungsstarke Ressource , die Ihnen helfen kann, zu lernen, wachsen und mit anderen Designern in Kontakt Es ist wie ein großer Online-Marktplatz. In der Figma-Community können Designer ihre Ideen und Ressourcen teilen Es ist ein Ort, an dem Sie kostenlose und gefälschte Designdateien, Plugins und sogar Tutorials finden können kostenlose und gefälschte Designdateien, Plugins und sogar Tutorials finden Plugins und sogar Tutorials In zukünftigen Lektionen werden wir speziell über Figma-Dateien sprechen in dieser Lektion Lassen Sie uns in dieser Lektion tief in die Figma-Community eintauchen und herausfinden , welche Art von Designmaterialien wir finden können Um das zu tun, gehe ich zur Figma Community. Ich gehe zu Google und suche nach Figma Community. Als erstes Ergebnis haben wir diese URL der Figma-Slash-Community-Website, dann klicke ich darauf und jetzt bin ich In dieser Figma-Community gibt es viel zu entdecken Die Figma-Designer wie Sie fügen der FIGMA-Community täglich Ressourcen hinzu Lassen Sie uns vorerst nach einigen Webdesigns suchen. Also werde ich einfach nach dem Moderator für Webdesign-Ideen suchen . Hier haben wir Webdesign-Ideen. Also hier drin habe ich Datei und Vorlage, Plug-ins, Widgets und Entwickler. Für dieses Ergebnis haben wir Dateien, Vorlagen und Plugins. Lassen Sie uns also die Datei und die Vorlagen aussortieren, und hier haben wir Idee, Webdesign, Holz. Also lass es uns überprüfen. Und hier haben wir E-Commerce-Theme-Dateien. Ich werde das auch öffnen, und hier haben wir eine Benutzeroberfläche, also ist es eine nette Benutzeroberfläche. Also klicken Sie einfach darauf und lassen Sie uns sehen, was wir hier finden können. Wir haben die Beschreibung. So wie wir das Design haben. Erhöhen wir es und wenn wir hier klicken, können wir die Seite wechseln. Wechseln wir zu Design, und hier haben wir das Design. Hier ist das Design der Nike-Website. Ich denke, es ist ein inspirierendes Design, also ist es ein sauberes Design. wir diese Elemente überprüfen, können wir Ideen entwerfen und gehen wir zum Idea-Webdesign über. Hier haben wir ein einfaches Webdesign und es ist nur ein Bild mit Text und lassen Sie uns zum nächsten übergehen. Hier haben wir eine E-Commerce-Vorlage oder ein E-Commerce-Thema. Schauen wir uns diese Web-App an. Hier haben wir ein Design für eine E-Commerce-Website. Angenommen, Sie erstellen eine E-Commerce-Marke oder eine E-Commerce-Website. Sie können einfach diese Designs überprüfen, sich vom Design inspirieren lassen oder einen Designteil aus dieser Figma-Datei abrufen Designteil aus dieser Figma-Datei Dazu müssen wir nur auf In Figma öffnen klicken und dann wird diese Datei in unserem Figma-Dashboard geöffnet. Auf Seiten gehen wir zu webvlpa, hier haben wir ein bearbeitbares Figma-Design Auf Seiten gehen wir zu webvlpa, hier haben wir Lassen Sie uns vorerst nur diese Elemente überprüfen und am Ende dieses Figma-Abschnitts werden Sie in der Lage sein, diese Art von Figma-Design, die Figma-Benutzeroberfläche, zu entwerfen diese Art Schauen wir uns das mobile Alpha an und hier haben wir die Machen Sie sich keine Sorgen, wenn Sie glauben , nicht zu wissen, wie man diese Designs erstellt. In wenigen Lektionen werden Sie in der Lage sein und lernen, wie man diese Art von Designs erstellt. Wenn wir jetzt Designs erstellen oder wenn wir unsere Website erstellen, müssen wir Symbole verwenden, wir müssen Symbole verwenden. Wenn wir nach Figma-Symbolen suchen und auf PrsiconoPres Enter klicken, können wir Symbolbibliotheken wie diese abrufen Als Beispiel haben wir ein Wettersymbol festgelegt und suchen wir nach einem Geschäftssymbol Hier haben wir Symbole für Geschäftsbereiche. Ich werde einfach darauf klicken und das ist eine Designdatei, und hier ist das Geschäftssymbol-Set. Also können wir einfach diese Symbole überprüfen, und wenn wir möchten, lassen Sie uns alle Vektorsymbole überprüfen. Okay, hier ist die Symbolbibliothek, und wenn Sie diese Art von Symbolen zu Ihren Projekten hinzufügen möchten , können Sie sie in Figma öffnen und diese Symbole abrufen Aber in Zukunft werde ich Ihnen zeigen, wie das geht. Außerdem habe ich ein Figma-Community-Profil. Lass es mich mit Okay teilen, hier ist mein Figma-Community-Profil Schauen wir uns dieses BNTSGameMP an und das ist ein App-UI-Modell, das ein App-UI-Modell Lass uns versuchen, es zu öffnen und dir anzusehen, wie mächtig die Figma ist. Ich klicke auf das Öffnen von Figma. Eigentlich ist dieses UIKit wirklich einfach und als ich dieses UIk erstellt habe, wusste ich nicht In der nächsten Lektion werden wir also die Figma-Community und andere Dinge, die wir bisher gelernt haben, nutzen , Helden-Sektionen erstellen und uns mit dem Design der Figma-Benutzeroberfläche befassen 11. Den ersten Heldenabschnitt mit Figma UI2 gestalten: Lassen Sie uns versuchen, unser erstes Webdesign zu erstellen. Überprüfen Sie also die URL oder Community-Datei in der Beschreibung oder im Ressourcenbereich Sie werden die URL sehen. Wenn Sie auf Verbinden klicken, gelangen Sie zu diesem Figma-Community-Profil Also werden wir diese beiden Heldenbereiche entwerfen. Das wird uns helfen, mehr über das Figma-Tool und die grundlegenden Dinge zu erfahren , während wir diese beiden Apfelweine oder diese beiden Helden erstellen Wir erfahren bereits etwas über die Figma-Community. Klicken Sie jetzt einfach auf die Schaltfläche In Figma öffnen , um die bearbeitbare Ansicht zu öffnen Okay. Hier haben wir Helden-Sektionen Lassen Sie uns zunächst versuchen, diesen zu erstellen. Ich werde herauszoomen und es so platzieren und vergrößern. Okay, nett, zuerst müssen wir diesen Rahmen erstellen. Wenn ich auf dieses Heldenbeispiel klicke, hier ist der Rahmen, lass uns versuchen, ihn zu erstellen. Ich gehe zu diesem Rahmensymbol und dann können wir den Gerätetyp auswählen. Dies ist ein Heldenbereich vom Typ Desktop. Ich klicke auf Desktop und wähle die Größe als Schreibtisch aus, alles klar, nett Jetzt werde ich das in 01 umbenennen. Okay. Jetzt ist die Höhe 1024. Lass uns die Höhe von diesem angeben. Es sind 700. Ändern wir diese Höhe auf 700. Schieben Sie den Rahmen und setzen Sie die Größe auf 700 Dann müssen wir die Layoutbreite hinzufügen , da wir ohne Layoutbreite unser Design nicht richtig ausrichten können. Um das zu tun, klicke ich auf Layoutraster und hier Dann ändere ich das Layoutraster in Spalten, und die Spaltenanzahl beträgt zwei L und der Rand 140. Die Dachrinne ist 20. Okay. Außerdem hat FICMA eine Funktion zum Speichern unserer Istis. Als Beispiel möchten wir dieses Spaltenraster-Layout speichern Wir können auf dieses Estes-Symbol klicken und hier haben wir Ich klicke einfach darauf und hier können wir den Namen hinzufügen Ich füge es zum Anruf-Grid klicke dann auf Creative Style. Wenn wir nun unserem nächsten Frame das Rasterlayout für die Mautspalte hinzufügen möchten , können wir dieses Mal einfach die Option Speichern auswählen. Klicken wir auf dieses Rasterlayout und erstellen wir ein neues Layout in Schreibtischgröße. Also, es ist ein Rahmen, Schreibtisch in Größe. Wenn ich dann zum Layout-Git gehe und auf dieses Symbol klicke, habe ich diesen Grit-Layoutstil wie diesen, ich kann ihn einfach hinzufügen Ordnung. Jetzt werde ich es entfernen. Als nächsten Schritt müssen wir dieses Hintergrundbild hinzufügen, um es zuerst hinzuzufügen Ich werde ein Rechteck erstellen und dieses Rechteck so gestalten , dass es unserer Rahmengröße entspricht. Klicken Sie nun auf dieses Rechteck- oder Formwerkzeug, und hier haben wir die Option Bild platzieren. Ich klicke einfach darauf und jetzt gehen wir zu unserem Bild. Es ist also auf einem Dokument. Hier ist das Bild. Ich klicke einfach darauf und du kannst diese Bildressourcendatei im Ressourcenbereich abrufen diese Bildressourcendatei im und ich klicke auf Öffnen. Jetzt klicke ich so. Okay, der erste Teil ist abgeschlossen. Jetzt müssen wir Farbe überlagern, um Überlagerungsfarbe hinzuzufügen, dieses Bild auswählen und hier haben wir Füllung, klicken Sie einfach auf dieses Plus-Symbol und schon haben wir eine Farbebene Hier klicke ich auf unsere Farbe als dunkel und hier haben wir die Transparenz Ich werde für Transparenz 80 sorgen. Okay, sieht gut aus, aber wir können es so machen , als ob 70 70 besser sind. Jetzt wird das Bild hinzugefügt, und jetzt müssen wir dieses Logo und den Abschnitt Mus hinzufügen , um das zu tun Lassen Sie uns zuerst einen Text erstellen. Klicken Sie auf diesen Text und klicken Sie hier. Dann werde ich diesen Text als Logo ändern. Lassen Sie uns die Eigenschaften wie Schriftgröße, Fontan, Dinge wie das dieses Logos herausfinden Schriftgröße, Fontan, Dinge wie das . Um das auf dem Mac zu tun, drücke ich die Befehlstaste und klicke auf diesen Logotext, wenn ich auf Befehl klicke Es hilft uns direkt, den gewünschten Artikel auszuwählen. In Windows sollte es Kontrolle sein. Okay. Jetzt, auf unserer linken Seite, haben wir die Details. Die Schrift ist Railway und die Schriftstärke ist Semivol und die Schriftgröße ist 35. Fügen wir also diese Details hinzu. Ich klicke auf unsere Schrift und ändere diese Schriftart in Rail Die Schriftbreite wird Semibol sein und die Schriftgröße ist 35. Nett. Ich werde dieses Design etwas vergrößern, damit wir das Design leichter überprüfen können. Jetzt verschiebe ich diesen Text hierher. Gehen wir dann zu unserem ursprünglichen Design und wählen den Text durch Drücken der Befehlstaste aus oder unter Windows sollte er gesteuert werden. Dann drücke ich Alt und überprüfe die Größe zwischen der oberen Leiste und der linken Seite. Die Größen sind nicht korrekt, aber in unserem ursprünglichen Design geben wir die Größe 14020 Okay, sieht gut aus. Jetzt müssen wir dieses Menü erstellen , um das zu tun Klicken Sie erneut auf diesen Text oder wir können diesen Text einfach duplizieren, indem wir auf Alle klicken. Drücken Sie alles und klicken Sie mit der Maus und ziehen Sie es so. Okay. Jetzt müssen wir die Textdetails finden. Klicken wir auf diesen Text und die Textfarbe ist weiß und die Textschrift ist offen Semibol 18 und die Zeilenhöhe ist 31. Fügen wir diese Informationen hinzu. Einfach auf unseren Text klicken und der Text ist geöffnet 18 halbfett und die Zeilenhöhe 31 31. Alles gut. Nun, ändern wir Text auf der Startseite und der Text ist auf der oberen Vermutung, um diesen oberen Gaswert zu erhalten. Ich klicke hier und ändere Groß- und Kleinschreibung wie hier. Ordnung. Sehen Sie, Sie lernen viel über das Figma-Tool, indem Sie dieses Design erstellen Jetzt drücke und dupliziere ich es so und lass es uns noch ein, zwei, drei, vier, fünf, drei Mal duplizieren noch ein, zwei, drei, vier, fünf, drei Mal 12, drei. In Ordnung. Lassen Sie uns jetzt diese Einstellungen ändern. Als Nächstes geht es um uns. Okay. Die nächste ist, wie es so funktioniert. Als Nächstes sind unsere Trainer dran. Okay. Jetzt ist der nächste Kontakt. Alles gut. Nun müssen wir diesen Kontakt in die rechte Ecke legen . Hier ist unser Rasterlayout, und jetzt müssen wir den Ort finden , an dem sich dieses Startmenüsymbol befinden soll. Demnach ist es hier und wir fügen es hier hinzu. Um das zu tun, ziehe ich es einfach so und lasse uns das ganze Menü so platzieren. Bevor wir die Ausrichtungen korrigieren, klicke ich auf dieses Zuhause und ändere es in diese rote Farbe Lassen Sie uns also den roten Farbcode herausfinden. Klicken Sie einfach auf dieses Haus und hier haben wir den roten Farbcode. Ich versuche einfach zu kopieren, indem ich Befehl C drücke, und dann kommen wir hierher, markieren das, B drücke Befehl A, um es zu markieren und gehe zur Feldfarbe und drücke Befehl V, um die rote Farbe wie folgt zu erreichen. Okay. Jetzt ist es an der Zeit , die Ausrichtung zu korrigieren. Dieser Text befindet sich in der Mitte dieser Leiste. Lassen Sie uns dieses Haus so einrichten, dass es in der Mitte dieser Bar liegt. Jetzt drücke ich die Umschalttaste und wähle fünf Menüpunkte wie diesen aus. Dann haben wir hier Werkzeuge für die Ausrichtung Klicken Sie auf „Vertikale Mitte ausrichten“ und hier können wir auf „Horizontale I-Phasen verteilen“ klicken . In Ordnung. Lassen Sie uns nun den Abstand oder die Abstände zwischen dem oberen und dem Menüpunkt verschieben, es sollten zwei T sein. Auch hier markieren Sie die markierten OselTel dieser Texte, markieren Sie die markierten OselTel dieser indem Sie at drücken Jetzt drücke ich Alt und klicke auf die obere Taste der Tastatur Okay. Jetzt kann ich das als Gruppe machen, um das als Gruppe zu machen, ich drücke den Befehl G und jetzt wird daraus eine Gruppe. Wenn wir wollen, können wir diese Gruppe in Man Items umbenennen . Und wenn wir die Gruppe erweitern, werden wir Menüelemente wie diesen haben, und dann wähle ich diese Gruppe und drücke die Umschalttaste und klicke auf das Logo, und dann klicke ich auf diese vertikale Mitte wie folgt. Und jetzt erstellen wir unser Menü und unser Logo. Jetzt ist es an der Zeit, diesen mittleren Text zu erstellen. Es ist wirklich einfach, fangen wir Schritt für Schritt an. Zuerst müssen wir dieses Live-Coaching für Leistungsträger hinzufügen dieses Live-Coaching für Leistungsträger Um es hinzuzufügen, drücke ich auf dieses T und klicke hier. Dann füge ich einen Text wie diesen hinzu und klicke auf eine beliebige Stelle auf der Leinwand, denn wenn wir keinen Text hinzufügen und auf eine beliebige Stelle auf der Leinwand klicken, verschwindet das Textfeld. Okay, jetzt gehe ich zu unserem ursprünglichen Design und klicke auf Befehl C zwei. Dann klicke ich auf diesen Text und drücke jetzt Befehl A und Befehl C zwei, kopiere diesen Text und komme hierher, drücke Befehl A und Befehl C zwei, kopiere den Text so. Andererseits werde ich das duplizieren, denn bevor wir das Design erstellen, lassen Sie uns Text erstellen , der einfach ist. Duplizieren drücke ich also auf alles und dupliziere es so, wie hier. Okay. Jetzt haben wir drei Abschnitte. A, lassen Sie uns das noch einmal für den Text für die Schaltfläche duplizieren . Jetzt haben wir also dieses Hauptelement, also markiere ich es einfach und passe Text an , tut mir leid, lassen wir es ohne Schriften ohne Schriftstil ablaufen, weil wir versuchen werden , Schrifttextilien auf unsere eigene Art hinzuzufügen Okay. Nett. Jetzt fügen wir den Fontistyle hinzu und korrigieren die Ausrichtung Schauen wir uns zunächst den Schriftstil Absatzes oder unserer ersten Unterüberschrift an, klicken auf die Untergliederung und schon haben wir Text, der geöffnet und zusammengefügt Text Klicken Sie jetzt hier, öffnet das Symbol. Ich bin schon da. Und jetzt schauen wir uns das Design der Überschrift an. Wähle die Überschrift aus, drücke ich die Befehlstaste und klicke so, dann ist es Railway Bolt, 60. Lassen Sie uns diese Eisenbahn fett formatieren, 69, und bei der Schrift wird Groß- und Kleinschreibung unterschieden. Okay. Jetzt ist es an der Zeit, dieses Schriftdesign zu erstellen, Befehlstaste zu drücken und den Text zu verschieben, dann den Text open sans regular 20 zu überprüfen, hier zu klicken und sans regular 20 zu öffnen, dann ist es wieder so, dass wir Titel Sens haben Ordnung. Bevor wir die Schaltfläche erstellen, korrigieren wir die Ausrichtung und machen sie besser, um die Ausrichtung zu korrigieren Lassen Sie uns die Ausrichtung zwischen diesen beiden Elementen überprüfen, sie ist 15 und wir haben Alignment Touch 15. Lass es uns so ausdrücken, dann drück und drück über das Obige, jetzt können wir es so einstellen. Da wir ein Problem haben, weil die Zeile Leerzeichen ist, nicht Zeile ist Leerzeichen, sollte die Zeilenhöhe mehr als 31 betragen. Die Zeilenhöhe ist automatisch. Lassen Sie uns die Zeilenhöhe auf Auto setzen. Klicken Sie einfach auf den Text und dann bei Automatisch präsentieren auf das Textfeld Zeilenhöhe. Okay. Jetzt sind es 15 und das hier ist auch 15 und ja, scheint gut zu sein Und jetzt drücke ich die Umschalttaste und wähle alle drei Elemente aus und klicke auf diese horizontale Ausrichtung und diese Textausrichtung, die als Mittelpunkt festgelegt Okay. Jetzt ist es perfekt zentriert, und jetzt müssen wir diesen Text so einstellen , dass er auf der rechten und linken Seite ausgerichtet ist. Eigentlich ist es schon ausgerichtet, und dann müssen wir es in die Mitte legen, um das zu tun. Wir können es einfach mit dieser roten Farbausrichtungsanleitung so anpassen , wir können es so in die Mitte legen. Okay. Ich denke, das ist nicht in der Ah, wird in der Mitte sein, nachdem wir diese Anfrage erstellt haben. Kostenlose Beratung, um sie zu erstellen Ich klicke einfach auf Neues Rechteck und dann so. Dann vergrößern wir das Rechteck wie folgt und fügen diesen Text in das Rechteck ein. Okay, jetzt ist unser Text hinten und das Rechteck ist oben. Um das Problem zu beheben, bevor wir es reparieren, ändern wir die Farbe des Rechtecks. Um die Farbe des Rechtecks zu ändern, können wir auf das Rechteck klicken und hier haben wir die Feldfarbe. Dann können wir auf dieses kleine Symbol klicken und auf diese ursprüngliche Designfarbe um die Farbe wie diese zu erhalten. In Ordnung. Jetzt werde ich unser linkes Seitenpanel überprüfen und hier haben wir Details zu unserem Design. Hier haben wir dieses Rechteck. Benennen wir es in Button BG um und jetzt ist hier der Text. Derzeit wird der Text nicht angezeigt, damit er angezeigt Wir können ihn einfach anklicken und ihn so erstellen. Okay. Jetzt müssen wir die Größen zwischen dem Hintergrund des Rechtecks oder der Schaltfläche und dem Text überprüfen. Bevor wir das tun, wollen wir die Größe des Rechtecks herausfinden. Es sind 418 und 60. Machen wir das auf 420 und 60. Okay. Jetzt werde ich dieses Design vergrößern, weil es leicht zu sehen ist, wenn ich das Design so vergrößere, dann drücke ich und passe das Design so an. Und wenn wir wollen, können wir auf diese Option in der Mitte des Textes klicken und es wird mittig ausgerichtet. Jetzt ist es jedoch perfekt ausgerichtet und jetzt wähle ich den Hintergrund aus und drücke die Umschalttaste und wähle diesen Text aus und drücke Command G, um ihn zu gruppieren. Wenn ich will, kann ich das dann in Button In Ordnung umbenennen. Was ich jetzt tun kann, ist diese Schaltfläche so zu platzieren und den Abstand zwischen der Schaltfläche und diesem Unterteil zu überprüfen . Markieren Sie nun diese Schaltflächengruppe und drücken Sie und über dieser Untereinheit und klicken Sie auf den Abwärtspfeil, um den Abstand zwischen dieser Schaltfläche und Unterbett zu 20 zu machen zwischen dieser Okay. Jetzt markiere ich Earl of the Section, den Button und Earl of the Items und klicke auf dieses Alignment Center und dann auf dieses Alignment Horizontal Center. Okay, jetzt ist es perfekt ausgerichtet, und jetzt kann ich Command G drücken, um es zu gruppieren Wenn ich dieses Design jetzt so ändere , ändere ich diese Gruppe so, kann ich den perfekten Mittelpunkt finden und los geht's. Wir haben das Design. Lassen Sie uns nun das Design erweitern. Es ist ziemlich ähnlich. Wenn wir die Farbe dieses Bildes etwas dunkler machen, sieht es vielleicht genauso aus wie dieses Design, aber ich mag es so. Lass uns diesen Heldenbereich machen. Und jetzt hier, klicken Sie auf dieses Symbol, um dieses Rasterlayout zu entfernen, und es wird so aussehen. Dann klicke ich auf diesen Heldenbereich und dann auf diesen Geschenk-Button und wir können unser Design in diesem Vorschaumodus sehen. Jetzt erstellen wir unser eigenes Design. Es ist also ein wunderschöner Slider, und ich hoffe, Sie folgen dem ersten Schritt mit mir. Wenn Sie Zweifel oder Probleme haben, lassen Sie es mich einfach wissen, und jetzt ist es an der Zeit, unser zweites Design zu erstellen. Das ist ein bisschen knifflig, aber wir können es schaffen. 12. 2. Heldenabschnitt mit Figma UI2 gestalten: Hallo, alle zusammen. Jetzt ist es an der Zeit, unsere zweite Helden-Sektion zu erstellen. Lass uns damit beginnen. Jetzt bin ich auf meinem Figma-Dashboard und hier ist unser zweiter Heldenbereich Als ersten Schritt klicke ich auf den Rahmen und auf der rechten Seite kann ich die DextFrame-Größe auswählen Ich wähle dieses Ziel von 1.440 mit Rahmen aus und setze es hier so ein und dann kann ich es so in Hero Two umbenennen, dann kann ich ein automatisches Layout hinzufügen Entschuldigung, füge das Rasterlayout hinzu. Um das zu tun, klicke ich auf diese Registerkarte und hier ist unser Layout, das wir als Rasterlayout bezeichnen können. Ich klicke einfach darauf. Nett. Nun, mal sehen, mal sehen, was wir tun müssen. Zuerst müssen wir einen Menübereich erstellen. Bevor wir den Menübereich erstellen, fügen wir das Hintergrundbild hinzu. Also muss ich zuerst die Größe dieses Hintergrunds ermitteln. Es hat also eine Breite von 1.440 Exel und eine Höhe von 700. Lassen Sie uns also ein Rechteck erstellen. Klicken Sie auf das Rechteck, klicken Sie auf die Leinwand, klicken Sie auf den Rahmen und lassen Sie uns ihn so auf diese Seite bringen. Okay, jetzt muss ich die Breite 1.440 hinzufügen und die Höhe wird 700 sein Nett. Jetzt müssen wir dieses Hintergrundbild hinzufügen. Also habe ich dieses Hintergrundbild bereits erstellt. Sie finden es im Bereich Ressourcen Nachdem Sie es heruntergeladen haben, müssen wir hier klicken und auf Bild platzieren klicken. Und hier haben wir das Hintergrundbild. Ich klicke einfach darauf und klicke auf Öffnen. Dann siehst du das Bild zum Anhängen mit dem Mauszeiger. Ich tippe einfach darauf oder klicke auf ein Rechteck wie dieses, alles klar, sieht gut aus. Jetzt müssen wir also die Farbe dieses Hintergrunds und die Opazität herausfinden Farbe dieses Hintergrunds und die Opazität Dazu klicke ich auf dieses Bild oder tippe zweimal darauf, und hier haben wir das Bild Wählen Sie einfach das Bild aus und hier können wir sehen, dass die weiße Farbe mit 90% der Deckkraft gefüllt ist oder die Sichtbarkeit bei 90% liegt Klicken Sie auf das Bild und klicken Sie auf dieses Plussymbol, und hier haben wir den Hintergrund Also ändern wir es auf 90 und klicken dann hier und setzen es so ein Okay. Nett. Jetzt erstellen wir einfach unseren Hintergrund. Dann müssen wir bei diesem Text zuerst zweimal auf diesen Text tippen und Befehl C drücken, zweimal auf diesen Text tippen um ihn zu kopieren. Und in Ihrem Fall könnte es Control C sein. Wenn Sie Windows verwenden, dann klicke ich auf diesen Text und dann hier. Dann drücke ich in Ihrem Fall Command V oder Control V. Auf diese Weise kann ich dann den Schrifttyp und die Schriftgröße herausfinden. Die Schrift ist also Georgia Regular und 45. Machen Sie sich keine Sorgen, wenn Sie die Schrift nicht kennen oder viel mehr über die Schrift wissen. In zukünftigen Lektionen werde ich dir alles zeigen, was du über Fontin, UX und UI wissen musst Klicken Sie hier und es scheint, dass wir diese Schriftart bereits ausgewählt haben. Lass uns nochmal sehen. Ja, es ist Georgia Regular 45. Und hier Georgia Regular 45. Okay. Dann müssen wir es so in diese Ecke stellen. Dann drücke und du wirst die Linien sehen. Lass uns 20 draus machen. Dann müssen wir diesen Menübereich erstellen. Es ist also Helvetica. Die Schriftart ist Helvetica und die reguläre 16. Also lass es uns erstellen. Es ist ganz einfach, klicken Sie auf den Text und lassen Sie uns diesen Textnamen in Home umbenennen. Klicken Sie dann auf den Text und wählen Sie die vertikale Schrift aus. Hier sehen Sie, dass die Größe normal ist und die Schriftgröße tatsächlich die Schriftbreite ist normal und die Schriftgröße beträgt 16. Okay. Dann müssen wir es vorerst einfach so machen und es duplizieren. Drücken Sie Alt und klicken Sie auf Maus, dann duplizieren Sie es. Also, wie oft wollen wir es duplizieren? Eins, zwei, drei, vier, fünf. Es ist fünfmal, also eins, zwei, drei, vier, fünf, nett. Jetzt werde ich die Schrift ändern. Ich kann hier zweimal tippen und Strg C zum Kopieren und Strg V zum Einfügen drücken . Und lass es uns noch einmal machen. Klicken Sie so. Okay. Jetzt haben wir wieder den Standort, fügen Sie ihn so ein. Wenn wir es einfügen, hat es sogar schon das Design, also werde ich es eintippen. Hier haben wir Blob, dann Con Tag Ni. Okay. Was wir jetzt tun können, ist die Größe dazwischen zu überprüfen. Um es zu überprüfen, klicken Sie einfach hier und drücken Sie alles wie folgt. Die Ibtwin-Größe ist 25. Also lass uns das anpassen. Zuerst werde ich sie alle so auswählen. Dann klicke hier und klicke auf „ gebunden“ und dann auf „Gefällt mir“. Okay. Ich klicke auch hier und hier rein, wir können die gebundene Seite auf 25 setzen, so wie hier. Das Tempo dazwischen ist 25. Jetzt müssen wir sie in Großbuchstaben schreiben. Wie ich es schon einmal gemacht habe, klicken Sie hier und falls wir auf die Großbuchstaben klicken können Jetzt müssen wir wieder alle auswählen und hier klicken und auf Tied klicken und dann 25 daraus machen. Okay. Nun, wenn wir das überprüfen, ist das Haus gewagt. Also lass es uns hier finden. Es ist mit diesem Mutigen. Machen wir das fett, klicken wir so und ändern dann den Regler fett. Okay. Jetzt kann ich all dies auswählen indem ich auf den Menüpunkt klicke oder auf den Text und den Text klicke, auf den Text klicke und gleichzeitig die Umschalttaste so drücke. Dann drücke ich Command G oder Control G. Gruppiere es. Okay, dann isoliere beide Abschnitte und mache es so. Okay. Konzentrieren wir uns darauf, diese Kontakte zu erstellen, aber es ist wirklich einfach. Lass es uns machen. Klicken Sie auf die Rechteckform und erstellen Sie ein Rechteck wie dieses. Okay. Dann fügen wir diese Ecke hinzu oder reduzieren die Ecken um 30. Nett. Jetzt kann ich einfach hier klicken und den Text duplizieren, indem ich so drücke, dann füge ich ihn so ein, aber wir müssen das über diesem Rechteck machen, um hohen Kick auf die Kontakte auf unserer linken Seitenebene aufgenommen werden, es dann so platzieren Okay. Lassen Sie uns jetzt prüfen, was wir tun können. Hier haben wir die Größe 176 und die Höhe 50. Außerdem ist die Farbe schwarz. Lassen Sie uns diese Änderungen vornehmen. Zuerst wird die Höhe 50 sein und die Farbe wird schwarz sein. Die Textfarbe ist der Grund. Wählen Sie dann beide Objekte aus und lassen Sie den Text wie folgt zentrieren. Mal sehen, was wir gemacht haben, sieht gut aus. Dann müssen wir den Text ändern. Eigentlich ist es schon so wie der Kontakt-Cus, wir haben hier bereits den Kontakt-Cus-Text. Eigentlich brauchen wir keine Kontaktsymbole, um uns zu kontaktieren, Menüelemente. Im ursprünglichen Heldenbereich werde ich diesen Kontakt-Cus also auf „Über uns“ ändern. Über Tsk. Mach nein, mach es Machen wir jetzt dasselbe hier. Lassen Sie uns diesen Kontakt über uns ändern. Okay. Jetzt sieht es gut aus. Jetzt müssen wir diese Schaltfläche zu einer Gruppenseite gruppieren , auf den Text klicken und auf den Hintergrund klicken , indem wir die Umschalttaste drücken. Drücken Sie dann Commando Control G, Command G auf Mac und Control G unter Windows. Mmm mm. Nett. Jetzt können wir all diese Takes in der aktuellen Schicht auswählen und in den Gruppen wie dieser auswählen und dann auf klicken. Eine vertikal zentrierte Linie. Dann klicken Sie hier auf Horizontal verteilen und drücken Sie Okay. Unser Menü ist fertig. Und wie ich bereits erwähnt habe, werden wir in zukünftigen Lektionen erweiterte Funktionen wie automatische Layouts und Komponenten verwenden wie automatische Layouts und Mit diesen automatischen Layouts und Komponenten können wir diese Art von Website auf einfache Weise erstellen Aber vorerst wird Ihnen diese Übung helfen, viel Wissen über die Funktionsweise von FIGMA zu erlangen Wissen über die Funktionsweise von FIGMA und Sie werden in der Lage sein, Erfahrungen mit Figma zu Erfahrungen mit Figma Okay. Jetzt müssen wir diesen Text erstellen. Es ist wirklich einfach. Also lass uns damit anfangen. müssen wir zunächst diesen Willkommensgruß in My Finance erstellen Dafür müssen wir zunächst diesen Willkommensgruß in My Finance erstellen. Ich drücke einfach T auf der Tastatur und lass uns Text wie diesen hinzufügen. Okay, es ist so, dann müssen wir herausfinden welche Schriftarten verwendet wurden, um diese Überschrift zu erstellen. Die Schrift ist also Georgia Five Regular. Fügen wir diese Details hinzu Georgia Regular. Das sollte 55 sein. Okay. Jetzt kopiere ich einfach diese BHs in Befehl C und füge sie so ein, und sie werden in Großbuchstaben geschrieben, um sie klein zu schreiben, klicken Sie hier und falls wir diese und sie werden in Großbuchstaben geschrieben, um sie klein zu schreiben, Titelschrift auswählen können Okay. Sieht nett aus. Jetzt werde ich es an unser Layout anpassen. Was müssen wir dann machen , um das zu erstellen. Wir sind hier, um beim Kopieren des Textes zu helfen, und er ist auf der Schriftart Tas Hell, Vertica, regulär 25. Lassen Sie uns einen Text erstellen und ihn so einfügen und er hat die Schriftart tas hell, Vertica, regular 25. Okay, also klicken wir einfach hier und setzen es vorerst so ein, dann müssen wir dieses Kontakt-und-Lern-Symbol erstellen Wir haben also bereits das Kontakt-Cast-Symbol erstellt, also kann ich es einfach duplizieren, auf alles klicken und es so duplizieren. Dann ändere ich dazu diese Höhe auf 60, klicke auf das Rechteck und ändere die Höhe auf 60. Dann mach dieses Zentrum. Außerdem denke ich, dass wir die Schriftgröße ändern müssen. Die Schriftgröße ist 21, Größe ist 20, machen Sie es zu einer Linienmitte wie dieser. Jetzt kann ich das wieder duplizieren und so hier platzieren. Dann mache sie in der Mitte der Linie und dieser Text wird mehr erfahren. Ändern Sie den Text, um mehr zu erfahren. Jetzt müssen wir diese Feldfarbe entfernen, um diese Feldfarbe zu entfernen Ich klicke einfach auf dieses Minussymbol, und jetzt füge ich den Etro hinzu, klicke auf Etro und die Strichfarbe ist schwarz Ich werde diese Textfarbe wie folgt in die Feldfarbe Schwarz ändern wie folgt in die Feldfarbe Schwarz Wir haben die Schaltfläche „Mehr erfahren“ nett gestaltet, aber wir müssen zuerst noch mehr Dinge anpassen Finden wir heraus, wie groß der Abstand zwischen dem Text und dem Rand der Schaltfläche ist 33 mal 33. Lass uns hier sein, wir haben 20 mal 20. Lassen Sie uns ein bisschen mehr wie diese 33 daraus machen. Und wir müssen drei weitere 0,1, zwei, drei erhöhen. Okay. Nett. Jetzt müssen wir darauf klicken und es als drinnen auswählen. Nett. Jetzt haben wir zwei Buttons und den Header-Bereich. Dann gruppiere ich diese beiden Tasten, indem nach ihnen drücke und dann Command G Dann muss ich den Abstand zwischen diesen beiden Abschnitten herausfinden . Es ist 20 mal 30, klicken wir hier und rufen das auf, indem wir die UP-Taste auf der Tastatur drücken, dann bringen wir es auf 30. Okay. Jetzt kann ich den gesamten Text auswählen und Command G drücken, um ihn zu gruppieren. Okay. Jetzt kann ich diesen auswählen und den Hintergrund auswählen. Klicken Sie darauf, richten Sie die vertikale Mitte aus und richten Sie sie vertikal mittig aus. Dann müssen wir dieses Bild hinzufügen. Um es hinzuzufügen, erstellen Sie einfach ein Rechteck wie dieses, platzieren Sie es dann so und stellen Sie es so ein, so. Dann klicken wir hier und klicken auf Bild platzieren und wählen das Bild aus. Dann klicken Sie hier, um es zu platzieren. Okay. Jetzt kann ich zweimal auf dieses Bild tippen und das Feld so ändern, dass es zugeschnitten werden soll. Und jetzt habe ich dieses Bild von hier, dieses Bild so platziert. Okay. Eigentlich denke ich, dass wir das Bild so vergrößern können, aber sie haben das gemacht, es so gemacht und ja, es passt perfekt. Jetzt müssen wir also diesen schwarzen Balken erstellen. Es ist einfach, ein Rechteck zu erstellen, klicken Sie einfach auf ein Rechteck und klicken Sie so, setzen Sie es so ein und Sie die Breite dem Rahmen erhöhen Sie dann die Größe. Lassen Sie uns eigentlich die Größe herausfinden. Ich 270, mache 270 so, ändere dann die Feldfarbe auf Schwarz und klicke auf den Heldenbereich und drücke Come in Mac und Control in Windows und Radio so. Nun, sieht gut aus, und was wir jetzt tun müssen , ist, diese Füllfarbe in diese Farbe zu ändern, diese Farbe kopieren und die Füllfarbe zu ändern. Das ist nett. Jetzt müssen wir diesen Text hinzufügen. Der Text ist Georgia 45 Regular, also klicken Sie einfach auf den Text oder klicken Sie einfach auf das T und drücken Sie hier, drücken Sie dann einige Takes, fügen Sie Text hinzu und schon ist es Georgia. Regulär 45, also in dieser Phase der Text so, dafür und lass uns in der zweiten Zeile so eingeben. Dann klicken Sie auf den Hintergrund, klicken Sie auf den Text, klicken Sie auf die vertikale Mitte der Linie. Okay. Jetzt müssen wir diese drei Abschnitte hinzufügen. Um sie hinzuzufügen, klicken Sie hier und überprüfen Sie die Schriftart, sie ist hell vertikal regulär, 65 duplizieren Sie das einfach und nehmen Sie diese beiden YE-Pläne und ändern Sie die Schriftart auf reguläre sechs wie folgt. Dann müssen wir das hinzufügen, es ist Albatica Regular 25. Wir können das einfach duplizieren und die Panzer hinzufügen. Okay, ich ändere schon auf 25. Klicken Sie dann auf diese beiden Elemente und dann auf Horizontale Mitte ausrichten. Sehen wir uns die Größe dazwischen oder den Rand zwischen diesen beiden an. 14. Lass uns 50 machen und dann beide drücken. Machen Sie es horizontal und klicken Sie auf Befehl G. Okay. Dupliziere jetzt dieses Foto. Jetzt müssen wir den Wert hier ändern, ps command c1v, das kopieren, kopieren und so kopieren Stellen Sie nun sicher, dass sie richtig ausgerichtet sind. Okay. Jetzt werde ich die Aufnahme hier platzieren, diesen Text hier. Lass uns auf Horizontalen Abstand verteilen klicken nachdem wir all diese drei Takes ausgewählt haben und dann, Entschuldigung, auf Vertikale Mitte ausrichten klicken. Also klicken Sie hier, klicken Sie auf Align Center. Drücken Sie dann Command G, um es hier zu gruppieren, und klicken Sie auf Vertikal zentriert ausrichten. Okay. Jetzt haben wir erfolgreich den zweiten Heldenbereich erstellt. Schauen wir uns den zweiten an, und hier ist das Design , das wir gerade erstellt haben. Wie ich bereits sagte, ist dies eine Möglichkeit, Figma effektiv zu lernen . Als nächstes haben Sie eine Übung Lass mich es mit dir teilen. Okay. Hier ist die dritte Helden-Sektion. Und Sie sollten diesen Abschnitt erstellen indem Sie das Wissen verwenden , das Sie gerade gelernt haben. Dies ist eine einfache Helden-Sektion, und wenn Sie diese beiden Helden-Sektionen erstellen, haben Sie einfach die Idee oder Sie haben einfach das Wissen, um dieses Design zu erstellen. Lass uns also mit der Arbeit beginnen. Außerdem werden wir in Zukunft das automatische Layout und die Komponenten verwenden. wird Ihre Webdesign-Reise also Mit dem automatischen Layout und den Komponenten wird Ihre Webdesign-Reise also ganz einfach. Erstellen Sie vorerst einfach diesen Heldenbereich. Und erfahre mehr über Figma. Während du diese Art von Heldenabschnitt erstellst, während du diese Übung erstellst, kannst du mit der Figma herumspielen und weitere coole Funktionen herausfinden Wir sehen uns in der nächsten Lektion. 13. 3. Heldenabschnitt mit Figma UI2 gestalten: Hast du es geschafft, dieses Design zu erstellen? Also lass es uns noch einmal entwerfen. Zuerst muss ich einen Rahmen erstellen. Klicken Sie auf den Rahmen, klicken Sie hier. Dann werde ich mit einem 14.4.700 wie diesem beginnen. Okay, wir haben den Frame, also ändern wir den Frame-Namen in Dann müssen wir das Rasterlayout oder das Layoutraster hinzufügen . Klicken Sie hier, und hier ist unser Rasterlayout, klicken Sie darauf. Jetzt müssen wir als ersten Schritt dieses Menü erstellen. Die Menügröße ist also 223. Ihre Höhe beträgt 223. Lassen Sie uns also ein Rechteck erstellen und es 14423 als Höhe festlegen Okay. Jetzt machen wir es so transparent bis auf Null. Okay. Jetzt müssen wir dafür dieses Logo erstellen Ich erstelle einfach ein weiteres Rechteck und lasse es so ausrichten. Dann müssen wir das Logo-Bild auswählen. Klicken Sie hier, klicken Sie auf Bild platzieren und hier haben wir das Logo. Dann klicken Sie so. Dann müssen wir dieses Feld auf Feldfrüchte umstellen. Okay. Dann mach es so und erhöhe es so. Okay. Vielleicht können wir es auch hier richtig ausrichten. Nett. Jetzt müssen wir dieses Menü erstellen. Es ist wirklich einfach. Klicken Sie auf T und erstellen Sie das Menü. Der erste Wein wird zu Hause sein. Jetzt müssen wir die Schrift finden. Klicken Sie darauf und die Schriftart ist Cabin Bolt 18. Sila hier ändere die Schrift in Kabine und dann Fett 18. In Ordnung. Eigentlich müssen wir die Sichtbarkeit des Rechtecks wieder auf Hundert ändern . Dann ändern wir die Feldfarbe auf Weiß. Ohne das können wir dieses Rechteck nicht ins Visier nehmen. Jetzt muss ich die Unterstreichung hinzufügen. Bevor wir die Unterstreichung hinzufügen, duplizieren wir das wie folgt: eins, zwei, drei Sicherlich brauchen wir es dreimal, und dann werden wir hier etwas über uns hinzufügen Lassen Sie uns dann über elektrische Dienstleistungen tippen. Oh nein, es sollte elektrisch sein. Elektroservice, dann kontaktieren Sie uns. Okay. Jetzt werde ich nur diese drei Menüelemente hervorheben und wir müssen sie in Großbuchstaben schreiben und die Schriftbreite wird normal sein. Markieren Sie alle drei, indem Sie die Umschalttaste drücken , und ändern Sie sie auf Normal Ändern Sie dann die Groß-/Kleinschreibung. Okay. müssen wir die Groß- und Kleinschreibung ändern und jetzt müssen wir diese Unterstreichung hinzufügen, um die Unterstreichung hinzuzufügen, wir können wählen, wir können hier klicken und wir können auf dieses Pluszeichen klicken Bevor wir die Unterstreichung hinzufügen, richten wir sie zuerst aus. Ich wähle all diese Elemente aus und lasse sie den horizontalen Abstand verteilen und dann die vertikale Mitte ausrichten Okay. Jetzt müssen wir die Farbe ändern. Die Farbe wird schwarz sein und hier wird die Farbe dunkelblau sein. Lass es uns ändern. Farbe zu dunkelblau. Okay. Jetzt müssen wir die Unterstreichung hinzufügen Um eine Unterstreichung hinzuzufügen, überprüfe ich nur, ob wir den Textstil haben, aber ich habe ihn nicht gefunden Lassen Sie uns also Unterstreichungen mit shaftOL hinzufügen. Also hier klicken wir online, und jetzt werde ich auf Shift klicken und Unterstreichungen wie folgt hinzufügen Ändern Sie dann die Unterstreichungsfarbe in diese dunkelblaue Farbe. Okay, okay, sieht gut aus. Jetzt muss ich diese Gruppe bilden. Wählen Sie diese beiden Objekte aus und drücken Sie Befehl G oder Strg G, um eine Gruppe zu erstellen. Dann müssen wir den Abstand zwischen 50 herausfinden. Lassen Sie uns diesen Raum hier in 50, 50 und 50 ändern . Okay, wählen Sie jetzt alle aus und drücken Sie Command G, um daraus eine Gruppe zu machen Wählen Sie dann das Logo aus und legen Sie die Menüelementgruppe fest. Klicken Sie dann auf diese vertikal ausgerichtete Mitte. In Ordnung. Jetzt müssen wir die Größe zwischen dem Logo und neuen Artikeln anpassen . Also hier, ich werde es 50, 40 bis 50, 50 machen , so. In Ordnung. Und diese Unterstreichung sollte größer sein. Sagen wir es wie sechs und ändern wir es auf zwei. Dann müssen wir jetzt diesen Anruf 24 Stunden hinzufügen , um gebührenfrei zu sein. Also lass es uns erstellen. Zuerst müssen wir einen Kreis erstellen, um einen Kreis zu erstellen, hier klicken und die Ellipse ziehen lassen, dann eine Ellipse wie diese erstellen Lassen Sie uns die Größe der Ellipse herausfinden. Es ist 86 mal 806-80-6806. Dann klicken Sie hier, um die Farbe dieses Lichts zu ändern. Dann werde ich das duplizieren, indem ich auf Raging It nach links Dann lassen Sie uns die Größe herausfinden, das ist 62 mal 62, machen daraus 6262 und ändern dann die Füllfarbe auf diese dunkle, diese Wählen Sie nun beide Objekte aus und richten Sie sie vertikal und horizontal mittig aus Okay. Dann müssen wir dieses Telefonsymbol hinzufügen. Um dieses Telefonsymbol hinzuzufügen, können wir das Fontosom-Symbol verwenden Wenn wir zu Fontsom gehen, ist Pontosom die Internet-Symbolbibliothek Wenn wir also auf diese Website klicken, Pontosom Also hier ist die Pontosom Icon Library, und wir können hier suchen, um das Icon Search Icon zu finden Und hier sind Telefonsymbole. Wir haben jedoch ein Figma-Plugin , das von Pontosm entworfen wurde. Um es hinzuzufügen, müssen wir auf das Plugin zugreifen Um darauf zuzugreifen, klicken Sie auf diese Ressourcen Hier können wir zu den Plugins gehen und hier können wir nach dem Namen des Plug-ins suchen. Ich suche Font Sum. Okay, hier sind die Pontosom-Symbole, klicken Sie auf Ausführen. Okay, jetzt haben wir das Pontosom-Icon-Widget oder ich kann Also hier müssen wir nach dem Namen des Symbols suchen, es ist Telefon, und hier ist das Telefonsymbol. Klicke darauf. Okay. Jetzt müssen wir es hier platzieren und dann die Farbe auf Y ändern . Okay. So wie das hier Ordnung, in Ordnung. Jetzt mach es mittig. Eigentlich liegt das außerhalb unseres Rahmens. Um das Problem zu beheben, müssen wir es also wie folgt an der Innenseite des Rahmens anbringen. Dann werde ich den ALT-Rahmen des Telefons entfernen . Jetzt haben wir das Symbol, das alle auswählt und sie alle zum Mittelpunkt macht. Okay. Was wir jetzt tun müssen, ist dieser Text. Lassen Sie uns die Texte herausfinden, Kabine Medium 16.5. Lassen Sie uns Panzer erstellen und den Text hinzufügen Lass es mich hinzufügen, indem ich hier koche und es so einfüge. Wenn wir es direkt einfügen, alle Eigenschaften dieses Textes werden alle Eigenschaften dieses Textes direkt in den Text übernommen. Aber jetzt fügen wir es so hinzu, weil wir wissen, wie man die Schrift auf Figma ändert . Finden wir heraus der Abstand 16 ist und wir haben diesen Teil, es ist Kabinenschraube 25. Lassen Sie uns zuerst diesen Text kopieren. Ich werde ihn einfach hier einfügen. Klicken Sie auf Kontext, klicken Sie hier. Dann füge ich hinzu, das dauert 1-110, eins. Ich habe es schon zugewiesen. Lass uns die Farbe herausfinden. Ich finde schon gut. Sag es jetzt so. Dann müssen wir dieses Blatt ausrichten und einen Abstand zwischen 2 und 2 schaffen , dann beide Objekte auswählen und die Befehlstaste oder die Strg-Taste G drücken, um sie zu gruppieren Dann müssen wir diese beiden gruppieren. Wählen Sie all diese drei Elemente aus und drücken Sie den Befehl G, markieren Sie dann diese beiden Objekte, diese beiden Gruppen, und klicken Sie so, dann werde ich es so platzieren. Okay, der Header-Teil ist fertig und sieht ähnlich aus. Jetzt müssen wir diese blaue Linie erstellen. Um es zu erstellen, klicke ich auf dieses Rechteck, das wir bereits erstellt haben, und klicke auf Strich. Die Felsfarbe wird diese dunkle Farbe sein. Dann ändere die Strichgröße auf „Gefällt mir “ und klicke hier und wir brauchen nur die Unterseite wie diese. Sollten wir auch die Größe ändern. In Ordnung, in Ordnung. Jetzt müssen wir dieses Bild hinzufügen. Das Hinzufügen des Bildes ist einfach. Zuerst klicke ich auf den Rahmen und drücke die Befehlstaste auf Mac und Alton Windows. Geh so Wenn wir den Befehl nicht verschieben, ändern wir die Positionen, wenn wir diese Ebene anpassen. Wenn Sie auf das Telefonsymbol klicken, wird es angepasst, wenn wir es anpassen. Aber wenn wir den Befehl übergeben , passt sich das so an. Ordnung, in Ordnung. So viel Platz brauchen wir nicht. Finden wir nun heraus, dass die Höhe 577 ist Lassen Sie uns ein weiteres Rechteck erstellen und daraus Zeichen 144 50 machen Entschuldigung, 1.440, dann 577 A und füge es hier ein. Okay. Wählen Sie dann erneut den Rahmen aus und passen Sie seine Größe wie folgt an. Dann können wir auf den Rahmen klicken. Klicken Sie auf das Rechteck und dann auf dieses Formwerkzeug und dann auf Conflasimage Gehe zu unserem Bild wähle so aus. Okay. Jetzt müssen wir nur noch diese Handlungsaufforderungen hinzufügen, diesen Aufruf zum Handeln als Unterüberschrift und als Schaltfläche Es ist ziemlich einfach, also lass es uns tun. Zuerst klicke ich auf einen Text und er wird zu 100% ausgeführt. Okay, jetzt wollen wir die Eigenschaften der Schrift herausfinden. Es ist Kabine Medium 24. Also ändern wir es auf Kabine Medium 24. Wenn wir also die Schriftart ändern, wählen wir tatsächlich die Schriftart aus oder wir müssen die Schriftart auswählen, ohne in den Bearbeitungsmodus zu wechseln. Wenn wir also den Text auswählen, können wir ihn ändern. 24 mittel, und die Farbe wird diese dunkelblaue Farbe sein. Okay. Jetzt müssen wir diesen Abschnitt hinzufügen. Um es hinzuzufügen, kopiere ich zuerst den Text und klicke auf dieses T und füge den Text so ein. Wie ich Ihnen bereits gesagt habe, wenn wir es einfügen, wird die Designeigenschaft damit einhergehen. Lassen Sie uns dann diese beiden Objekte miteinander verknüpfen und auf links ausrichten klicken. Finden Sie jetzt den Abstand dazwischen heraus, machen Sie ihn, und jetzt müssen wir diesen Button hinzufügen. Lassen Sie uns die Eigenschaften der Schaltflächen abrufen. Es ist 320 mal 80. Klicken Sie hier so, es wird 320 mal acht sein und Füllfarbe in diese dunkelblaue Farbe ändern, dann setzen Sie es so und klicken Sie auf Inhalt und fügen Sie Text wie Anfrage ab dem Wort dunkler hinzu, damit Figma eine coole Funktion hat Wenn wir hier mit der rechten Maustaste klicken und zu dieser Kopie als Kopieren und Einfügen unter gehen und Eigenschaften kopieren auswählen, dann klicken Sie hier und klicken Sie mit der rechten Maustaste auf Kopieren und Einfügen als und klicken Sie auf Phaseneigenschaften Was ist Block. Okay. Jetzt wird die Eigenschaft automatisch zu diesem Design hinzugefügt. Lassen Sie uns die Details herausfinden. Okay, zuerst müssen wir die Höhe ändern. Die Höhe ist acht, nicht die Höhe mit. Entschuldigung, ich habe drei bis 333. Okay. Wählen Sie nun das Rechteck und die Schaltfläche, tut mir leid, Text aus und richten Sie es vertikal und horizontal in der Mitte aus. Drücken Sie dann Command G, um es zu gruppieren und all diese Abschnitte zu markieren, und drücken Sie Befehl G, dann klicken Sie auf dieses Rechteck und machen Sie es mittig. Wir erstellen einfach das Design. Schauen wir uns den Vorschau-Präsentationsmodus im Präsentationsmodus an. Es sieht so aus. Ja, so kreieren wir das einfache Design. Wie ich bereits gesagt habe, werden wir in zukünftigen Lektionen praktischere und einfachere Methoden finden, und einfachere um diese Art von Design zu erstellen, und das ist dazu da, die Grundlagen zu erlernen Ich hoffe, ihr erfahrt etwas über Schriften, Panzer, Formwerkzeuge, das Nachzeichnen von Bildern und das Erstellen einfacher oder gut aussehender Helden Wir sehen uns in der nächsten Lektion. 14. Figma Auto-Layout lernen: Hallo, alle zusammen. Erfahren Sie mehr über das automatische Layout von Figma und wie Sie damit flexible und ansprechende Designs erstellen können sparen Sie Zeit und Mühe bei der Arbeit an Ihren Projekten Autoyout ist wie eine Magie in Figma. Es hilft Ihnen, Ihre Elemente zu organisieren und Ihre Designs flexibel zu gestalten Stellen Sie sich das als ein System vor, das alles in Ordnung hält und den Abstand für Sie anpasst Wenn Sie die Größe einer Schaltfläche, einer Karte oder sogar eines ganzen Abschnitts ändern, sorgt das automatische Layout dafür, dass alles darin auch die Größe Stellen Sie sich vor, Sie erstellen eine Navigationsleiste mit Schaltflächen. Ohne automatisches Layout müssen Sie jede Schaltfläche manuell anpassen, wenn Sie die Größe ändern. Aber mit dem automatischen Layout erledigt Figma das automatisch für Sie Es gibt nur wenige Gründe, warum das automatische Layout so wichtig ist. Erstens beschleunigt das automatische Layout Ihren Arbeitsablauf. Sie müssen nicht jedes Element von Hand anpassen. Wenn Sie möchten, dass Ihr Design auf verschiedenen Bildschirmgrößen funktioniert, sorgt das automatische Layout außerdem auf verschiedenen Bildschirmgrößen funktioniert, dafür, dass alles perfekt passt. Nicht nur das, es bietet Ihnen auch einen konsistenten Abstand, was für ein gutes Design von entscheidender Bedeutung ist. Grundsätzlich können Sie mit dem automatischen Layout mehr Zeit mit dem Entwerfen und weniger Zeit mit der Korrektur kleiner Details verbringen . Gehen wir zu unserem Figma-Design und beginnen wir mit dem Hinzufügen des automatischen Layouts Zuerst erstelle ich ein neues Projekt, indem blaue Schaltfläche „Neues erstellen“ und dann auf Designdateien klicke Dann werde ich das hier ändern in. Lass es uns wie Auto AO ändern. Dann klicke ich auf dieses Rahmensymbol und lass uns einen Rahmen in Desktop-Größe wie diesen erstellen. Als ersten Schritt fügen wir diesem Rahmen ein automatisches Layout hinzu. Und automatisches Layout. Wenn Sie in der rechten Seitenleiste nachsehen, wird die Option für das automatische Layout Nur Sie müssen auf dieses Plus-Symbol klicken. Oder wenn Sie die Tastenkombination verwenden möchten, ist die Tastenkombination für das automatische Layout Shift A. So können Sie Optionen für Autoayout I Autoay hinzufügen . Wir haben Funktionen, um zwischen Größen, horizontale Muster und vertikale Muster hinzuzufügen horizontale Muster und vertikale Muster und die Elemente nach Belieben auszurichten Es wird einfach sein, wenn wir einige Objekte erstellen Lassen Sie uns zunächst eine Schaltfläche erstellen. Hast du dich daran erinnert, als wir das letzte Mal eine Schaltfläche erstellt haben? Wir müssen Form und Text hinzufügen, aber beim automatischen Layout reicht der Text aus, um eine Schaltfläche zu erstellen. Klicken Sie auf den Text und klicken Sie hier dann Text hinzu oder fügen Sie den Namen der Schaltfläche hinzu, wenn Sie mich jetzt klicken. uns dann wie zuvor Lassen Sie uns dann wie zuvor die Schriftart ändern. Die Schriftart wird wie bei Offen hinzugefügt und die Größe wird halbfett sein. Dann fügen wir auf diese Weise die Schriftgröße 418 hinzu, und vielleicht werden wir normal sein . Ist gut Jetzt lass es uns halbbool machen. Okay, jetzt haben wir den Button-Text. Ich werde die Groß- und Kleinschreibung verwenden. Okay. Nun, das ist nur ein Text, und wir können diesem Text ein automatisches Layout hinzufügen. Sie müssen Shift A drücken. Wenn Sie Shift A drücken, können Sie ein automatisches Layout hinzufügen. Okay, hier sind die Optionen für das automatische Layout dieser Schaltfläche. Im zweiten Schritt werde ich diesen Rahmen in eine Schaltfläche umbenennen, damit er leichter zu verstehen ist. Dann füge ich eine Füllfarbe hinzu. Die Hintergrundfarbe. Wenn wir also die Hintergrundfarbe hinzufügen, können wir leicht erkennen, was passiert ist, als wir die automatischen Layout-Optionen in diesem Abschnitt geändert haben die automatischen Layout-Optionen in diesem Ihrer rechten Seitenleiste haben wir also das Feld gefüllt und ich klicke auf dieses Plus-Symbol Dann werde ich diese grüne Farbe ändern , weil Grün eine meiner Lieblingsfarben ist. Okay. Sieht gut aus. Sie können es in jede beliebige Farbe ändern, aber ich wähle Grün. Okay. Jetzt haben wir den Text mit Hintergrundfarbe. Und wenn wir auf dieses automatische Layout klicken, können wir den Text so sehen. Jetzt wähle ich die Schaltfläche aus und erinnerst du dich, dass ich dir von horizontaler Polsterung und vertikaler Polsterung erzählt habe dir von horizontaler Polsterung und vertikaler Polsterung erzählt Hier sind diese Optionen. Wir können sie einfach wie 15 hinzufügen und sehen, wenn ich das hinzufüge, erhalte ich den Abstand zwischen dem Text als 15 und lassen Sie uns 20 daraus machen Jetzt ist es klarer, 25, jetzt ist es klarer Dann haben wir vertikale Polsterung. Vertikaler Abstand bedeutet den Abstand zwischen dem Auf- und Abwärts dieses Textes Fügen wir vertikale Polsterung hinzu, fügen wir 25 hinzu. Okay. Jetzt sieht es eher aus wie ein Knopf. Machen wir das als Zwilling und 30. Okay. Jetzt ist es richtig gut. Wenn ich will, kann ich hinzufügen, ich kann die Ecken verkleinern, indem ich hier klicke und 39 hinzufüge. Erinnerst du dich, dass wir das in den letzten Lektionen gemacht haben und jetzt haben wir diese Art von Button und wenn wir diese Dinge anpassen, können wir dieses Design wirklich cool machen. Jetzt befindet sich dieser Button in der linken Ecke. Was ist, wenn wir wollen, dass es wie hier in der Mitte platziert wird. zu tun, klicken Sie auf den Rahmen, der Rahmen ist bereits automatisch formatiert. Wir müssen also nur auf Aline oben in der Mitte klicken und es wird zur oberen Mitte der Linie Wenn wir auf Align Center klicken, geht es zum mittleren Teil, und hier ist die Stärke des automatischen Layouts. Wenn wir das automatische Layout nicht verwendet haben, müssen wir diese Schaltfläche manuell anpassen. Beim automatischen Layout kümmert sich Figma jedoch um den Einstellungsteil Wir müssen ihn nur in diesem Bereich für das automatische Layout ändern Okay. Jetzt denke ich, wir müssen einen anderen Button erstellen. Lassen Sie uns diese Schaltfläche duplizieren. Ich werde auf den Button klicken und Command C drücken und Command V drücken. Der Button wird einfach hinzugefügt, dann überlege mal ob du die Größe des eingegebenen Stifts ändern musst. Es ist wirklich einfach. Sie müssen nur auf den Rahmen klicken und dann sehen Sie diese Art von Anpassungslinie, mit der Sie ihn ändern können. Also können wir es von hier aus so ändern. Okay. Jetzt machen wir diese Schaltfläche wie die Feldfarbe Null und fügen einen Strich hinzu. Um einen Strich hinzuzufügen, klicken Sie auf die Schaltfläche und Sie werden diesen Strich sehen Klicken Sie einfach so. Und jetzt ändern wir die Strichfarbe in diese grüne Farbe. Damit wir die Textfarbe ändern können, um die Textfarbe zu ändern, müssen wir den Text isolieren und ihn auf Grün umstellen Okay. Hier sieht es so aus, aber diese grüne Farbe ist zu hell, also müssen wir sie so auf dunkel ändern, die Füllfarbe auf Sorry ändern, nicht auf Füllfarbe. Ändern Sie die Textfarbe wie folgt in eine dunkle Farbe. Okay. Nun überlege, ob du den Text ändern willst, lass uns ändern, klick mich, um einen zu kaufen und einen gratis zu bekommen. Wenn wir die Textfarbe ändern, passt sich die Ausrichtung automatisch an. Schau mal, ob ich hier auf „Senden“ ändere, es wird sich entsprechend „Jetzt einreichen“ wie folgt ändern. Die Schaltfläche ändert sich je nach Text. Aber erinnerst du dich an das letzte Design, das wir erstellt haben? Gehen wir also zu diesem Design über. Ich klicke auf Zurück zu Dateien und hier haben wir das Design. Dann holen wir uns diesen Button. also auf diese Schaltfläche, wir also auf diese Schaltfläche, um auf mich zu klicken , um eine kostenlose zu erhalten. Wenn Sie jetzt den Schaltflächentext anpassen, wird der Hintergrund nicht angepasst. Wir müssen es manuell so anpassen. Deshalb sollten wir Autoayout verwenden. Gehen wir zurück und klicken auf den Abschnitt Autoayout. Dies ist nur eine Grundausstattung und wir haben viel mehr Elemente, viel mehr Funktionen, die wir mit dem automatischen Layout ausführen können Stellen Sie sich nun vor, Sie müssen in der zweiten Schaltfläche unter dieser Schaltfläche eine Schaltfläche erstellen . Derzeit ist das nicht möglich, denn wenn ich diese Schaltfläche dupliziere, gibt es nur eine horizontale Linie. Wenn wir die Schaltfläche unten hinzufügen möchten, lösche ich sie zuerst oder lösche Wenn wir eine neue Schaltfläche hinzufügen müssen, müssen wir zuerst auf diesen DestopFrame klicken und automatische Layout dieses Rahmens als vertikal hinzufügen, so wie Wenn ich es hinzufüge, werden die Take wie folgt vertikal ausgerichtet, aber ich möchte diese beiden horizontal sind und eine neue Zeile hinzufügen Um das zu tun, klicke ich auf diese beiden Elemente und drücke Shift A, und es entsteht ein anderer Frame. Hast du es gesehen? Ich drücke Command C, um es rückgängig zu machen. Zuerst klicke ich auf diese beiden Ebenen oder diese beiden Rahmen oder diese beiden Schaltflächen, dann drücke ich Shift A und es wird ein neues Layout oder ein neues Autoayout Jetzt kann ich auf dieses horizontale Layout klicken und es wird horizontal sein Nun, wenn ich eine neue Schaltfläche erstellen möchte. Lass uns unten einen neuen Button wie diesen erstellen und Hallo ich. Dann fügen wir das automatische Layout hinzu, indem wir Shift A drücken, und hier haben wir die Details, wir haben Optionen für das automatische Layout. Jetzt füge ich die Feldfarbe hinzu. Lassen Sie uns dieses Mal die Feldfarbe und das grüne Hellgrün wie folgt hinzufügen die Feldfarbe und das grüne Hellgrün wie folgt und die Textfarbe in Weiß ändern. Jetzt füge ich horizontales Paddin 20 hinzu und tut mir leid, vertikales Paddin 20 wie folgt Machen wir daraus 30. Nun sehen Sie, wir erstellen diese Schaltfläche unter diesem Set. Lassen Sie uns das in eine Schaltfläche wie diese umbenennen, dann können wir diese Textzeile anpassen oder wir können sie jetzt ändern diese Textzeile anpassen oder wir können sie jetzt und sie passt sich dem Text an. Okay. So erstellen Sie das automatische Layout. Mal sehen, ob Sie diese Schaltfläche als Schaltfläche in voller Größe verwenden möchten . Derzeit beträgt diese Desktop-Größe also 1.440. Also wenn wir diesen Button voll mit Button machen wollen. Wir müssen nur auf den Button klicken und schon wirst du es sehen. Im Frame siehst du, klicke auf diesen Button, und hier siehst du den Behälter hug, make it fill Dann lässt du es den Behälter füllen. Die Schaltfläche wird als Füllbehälter eingestellt. Außerdem werden Sie diese Art von Abstand sehen. Der Grund dafür ist, dass beim Klicken auf den Desktop-Rahmen horizontaler Abstand von zehn angezeigt wird Wenn wir es auf Null ändern, die Schaltfläche die volle Breite Also lass uns 140, 140 draus machen. Okay. Nun, diese Zwischengröße können Sie ändern, indem Sie den vertikalen Abstand ändern. Lass es uns wie 60 ändern. Also hier ist der Weg. Wenn Sie diese Schaltfläche nun oben platzieren möchten, können Sie auf eine Zeile oben in der Mitte oder auf eine Zeile links von einem Stummel wie diesem klicken oder auf eine Zeile links von einem Stummel wie diesem Das ist wirklich einfach. Vielleicht sind Sie immer noch verwirrt, aber in den nächsten Lektionen werden wir diese Banner mit automatischem Layout entwerfen und Sie werden das automatische Layout vollständig verstehen, wir sehen uns in der nächsten Lektion. 15. UI3 Beta für Figma aktivieren: Hallo zusammen, im Moment , in dem ich diese Lektion erstelle, neue Benutzeroberfläche von Figma UI nicht für alle Benutzer ist die neue Benutzeroberfläche von Figma UI nicht für alle Benutzer verfügbar, daher müssen wir auf die Warteliste gesetzt werden, da sie sich noch in der Betaphase befindet Nach der Beta werden wir, wie angekündigt, auf die Figma-Benutzeroberfläche drei zugreifen können Wenn Sie die drei Benutzeroberflächen jedoch nicht verfügbar haben, können wir die Google Chrome-Erweiterung verwenden um die drei Benutzeroberflächen zu überprüfen Lass es uns machen. Zuerst öffne ich einen neuen Tab und suche nach Figma, ich drei, schließe mich an Dann lasse ich das UI Three Beta oder Figma aktivieren. Ich klicke einfach drauf. Jetzt ist hier die Erweiterung oder das Plug-in, ich klicke bei Chrome darauf und klicke auf Erweiterung. Derzeit funktioniert diese Version in Webbrowsern, nicht im heruntergeladenen Figma-Tool. Verwenden Sie also Google Chrome, um diese Erweiterung auszuführen. Okay. Jetzt müssen wir zu unserem Figma-Konto gehen und ich repräsentiere Klicken wir nun auf Creative und dann auf Design-Datei. Von hier aus können wir Figma UI Three verwenden, um unsere Designs zu erstellen. In der nächsten Lektion werden wir einen kurzen Überblick geben und diese drei Funktionen der Benutzeroberfläche und die Benutzeroberfläche drei verwenden diese drei Funktionen der Benutzeroberfläche und die Benutzeroberfläche drei um unsere zukünftige Arbeit abzuschließen 16. Figma UI3-Komplettlösung: Hallo, alle zusammen. Lassen Sie uns die Benutzeroberfläche von Figma durchgehen die Benutzeroberfläche von Figma Jetzt bin ich auf dem Figma-Dashboard. Ich klicke auf diese neue Designdatei, um ein neues Design zu erstellen. Jetzt habe ich die UIT oder die alte Figma Editor-Benutzeroberfläche. Ich klicke auf dieses Hilfesymbol und hier klicke ich auf Neue Benutzeroberfläche in Beta Ink verwenden. Hier ist unsere Benutzeroberfläche Dies entspricht der zweiten Benutzeroberfläche oder der alten Benutzeroberfläche der Figma. Nur haben wir ein professionelleres Aussehen und haben bei einigen eine freundliche Änderung am Gesamteditor vorgenommen Zuerst werde ich einen Rahmen erstellen. Also hier haben wir das Werkzeug-Panel hier drin. Wir haben den Rahmen, also klicke ich auf den Rahmen und dann hier, dann erstelle ich einen Rahmen wie diesen, oder lassen Sie uns einen Rahmen mit Desktop-Größe erstellen. Ich klicke hier. Dann können wir auf unserer rechten Seite die Desktop-Größe auswählen. Ich werde diese Desktop-Version auswählen. Jetzt haben wir auf der linken Seite den Navigationsbereich. Hier können wir die Ebenen sehen und in *** können wir diese Asserts sehen Ich werde diesen Desktop 12 in Main umbenennen. Jetzt werde ich mit dem Formwerkzeug ein Rechteck erstellen Klicken Sie hier und erstellen Sie ein Rechteck wie dieses. Dann kann ich die Eigenschaft dieses Rechtecks sehen. Ändern wir diese Breite und Höhe auf 300 300 und ändern wir die Feldfarbe auf Rot. Es ist also dasselbe wie zuvor und wir können auch Lippen erstellen, die Ellipse verwenden und sie so erstellen Dann haben wir hier Text. Ich klicke darauf und dann wähle ich den Text aus und hier kann ich die Schrift ändern, um ihn Railway Size Will Be 30 Sync und Semi Board umzustellen. Ändere die Farbe auf diese Weise auf Rot. Ist 60 auf dieser Seite, können wir die Spieler sehen und wir können neue Seiten wie diese erstellen. Nach wie vor haben wir dieses Aktionspanel hier, wir finden Plugins und Widgets. In diesem Abschnitt finden Sie auch Funktionen, die wir mit Figma AI verwenden können . Lassen Sie uns in zukünftigen Lektionen mehr über Figma AI erfahren Lassen Sie uns diese Lektion mit der Änderung dieses Figma-Dateinamens abschließen mit der Änderung dieses Figma-Dateinamens Ich werde diesen Figma-Dateinamen in Webdesign ändern. Lektionen wie diese. Im nächsten Video werde ich sehen, wie Sie das automatische Figma-Layout mit der neuesten Version von UIT erstellen automatische Figma-Layout mit der neuesten Version von UIT 17. Figma Auto-Layout mit UI3 lernen: Hallo, alle zusammen. Lernen wir das automatische Layout von Figma mit der Benutzeroberfläche von Figma UI mit drei Editoren Sie kennen sich bereits mit dem automatischen Layout von Figma Lassen Sie uns loslegen Zuerst werde ich einen Rahmen erstellen. Also hier bin ich im Figma-Editor, also klicke ich hier, klicke auf das Rahmensymbol und wähle es als Desktop Hier ist unser Rahmen. Dann fügen wir diesem Rahmen ein automatisches Layout hinzu. Dazu kann ich mit der rechten Maustaste klicken und auf diesen Atayout-Menüpunkt klicken, oder ich kann hier oder auf der rechten Seite klicken, wir haben Layout im Layout Hier können wir die Autoayout-Funktion verwenden, also kann ich hier klicken oder ich kann einfach auf Shift A klicken. Ich klicke einfach hier und es Jetzt füge ich etwas Ellipse hinzu. Lass uns auf Ellips klicken und eine Elise erstellen. Dann setze ich die Breite der Ellipse auf 150 und die Höhe Dann ändere ich die Feldfarbe auf Rot und dann werde ich das dreimal duplizieren dreimal Lassen Sie uns diese Ellipsenfarbe auf Dann klicke hier und ändere diese Farbe wie folgt in Blau. Lassen Sie uns mit diesen Objekten herumspielen und mehr über das automatische Layout erfahren. Zunächst werde ich diesen Frame-Namen „Layouttest“ umbenennen. Okay. Dann wähle ich den Rahmen aus. Im Bereich Auto werden wir eine Option haben. Als ersten Schritt werde ich dafür den linken und rechten Rand auf 140 festlegen. Ich muss den linken und den rechten finden. Hier sind der linke und der rechte Rand. Derzeit sind es zehn. Wenn ich hier klicke, sehe ich einzelne Ränder. In diesem Fall handelt es sich um eine Polsterung, aber sie funktioniert auch als Rand Hier setze ich 140 und dann wieder 140 auf diese Seite Hier ist 140, hier ist 140. Jetzt möchte ich den Rand oben und unten hinzufügen , derzeit ist der obere Rand zehn. Hier können Sie sehen, dass es zehn, zehn sind, und wenn ich mit der Maus darüber fahre, werden zehn angezeigt, also möchte ich mehr Platz hinzufügen, also füge ich etwa 60 hinzu Um das zu tun, klicke ich hier und jetzt kann ich den Wert auf 60 ändern , wenn ich hier minimiere Ich kann nur bei 60 sein, dann habe ich 60 als oberen und unteren Rand, und hier sehen wir die horizontale Lücke zwischen Objekten Um es zu ändern, kann ich es überarbeiten und ändern, wie ich will. Stellen wir es auf 50 ein und auch von hier aus kann ich es ändern, wie ich will. Dann möchte ich diese Schaltfläche in der Mitte platzieren, um das zu tun . Ich klicke auf den Rahmen und hier kann ich auf An der Mitte ausrichten klicken. Die Ellipse geht in die Mitte und wenn ich auf die Mitte klicke, geht sie in die Mitte und es funktioniert so Derzeit befinden sich diese drei Ellipsen in der Horizontalen. Wenn ich es vertikal machen möchte, kann ich einfach auf dieses vertikale Layout klicken und es wird vertikal ausgerichtet Jetzt werde ich es wieder so horizontal anordnen. So können wir ein automatisches Layout im Frame hinzufügen und daran arbeiten. Es gibt mehr Optionen, mit denen man spielen kann. Wenn wir beispielsweise diese horizontale Lücke zwischen Objekten zur automatischen Einstellung hinzufügen, wird die Lücke automatisch gefüllt. Und wenn ich die Größe mit einer Höhe ändere, ändern wir sie etwa 1.000, dann passt sie sich an das Design 6 an, so wie hier. 18. Schaltflächen mit Auto-Layout entwerfen (bei Kleidung, nicht bei UI): Lassen Sie uns Schaltflächen mit automatischem Layout erstellen. Um das zu tun, entferne ich den ganzen Frame oder lass uns einen neuen Frame erstellen. Ich drücke die Befehlstaste und benutze das Mausrad, um die Anzahl der Scanner zu verkleinern . Dann klicke ich hier und klicke auf den Desktop Okay. Lassen Sie uns diesen Desktop auf die BTN-Ebene umstellen Und jetzt klicke ich hier und konvertiere es in ein automatisches Layout wie dieses Okay. Lassen Sie uns die Einstellung so beibehalten und jetzt drücke ich T und erstelle einen Schaltflächentext wie „Klick mich jetzt“. Ich kann die Schriftart ändern, wenn ich möchte. Ändern wir es so, als würden Roboto und Roboto sich zu 25 zusammenfügen. Machen wir es wie ein Medium. Lass uns die Schrift so ändern, dass sie wie Pop-In aussieht. Es sieht gut aus. Okay. Jetzt muss ich mit der rechten Maustaste klicken und auf AutoAyou klicken , um Shift A zu drücken. Ich klicke einfach darauf und es wird zu Autoayout hinzugefügt Dann werde ich hier klicken und es in TN One umbenennen. Okay. Jetzt gehe ich zu unserer rechten Seitenleiste und füge die Füllfarbe hinzu. Ich werde die Füllfarbe als hellblaue Farbe hinzufügen, lassen Sie uns sie etwas dunkler machen. dies nun erneut ab, klicken Sie auf diesen Text und ändern Sie die Füllfarbe wie folgt in Weiß. Wählen Sie erneut die Schaltfläche aus. Layout und von hier aus füge ich die linken und rechten Paddins 30 und die oberen und unteren Paddins 20 Dann ändere ich die Ecke oder verkleinere das Aussehen der Ecke, wir haben den Wert Null, ich mache 60 wie folgt daraus Okay. Was ich jetzt tun kann, ist, das in den Mittelpunkt zu stellen. Dazu müssen wir unseren Rahmen auswählen und wie zuvor müssen wir ihn so zentriert ausrichten, dass er wie folgt ausgerichtet wird. Okay. Jetzt werde ich das duplizieren, indem ich es so drücke und ziehe Okay. Jetzt werde ich einen zweiten Button erstellen. Lassen Sie uns diesen Text auf den zweiten ändern. Klicken Sie als Zweiter auf mich. Und jetzt ändern wir die Füllfarbe in diese blaue Farbe. Und jetzt klicke ich auf die Schaltfläche und lass uns die Schaltflächennamen zwei ändern und die Deckkraft wie folgt auf Null setzen Dann klicke ich auf Estro und hier, setze dann die Etro-Farbe auf diese blaue Farbe und ich ändere die Zeile mit zwei Okay. Jetzt haben wir zwei Knöpfe. Jetzt möchte ich dafür die Größe der Einladung ändern Ich kann einfach hier klicken und sie auf 20 ändern Aber wir haben ein Problem. Nehmen wir an, wir müssen eine weitere Schaltfläche erstellen , die sich unter diesen beiden Schaltflächen befinden sollte. Jetzt klicke ich auf diese Schaltfläche und drücke Befehl C oder Control C unter Windows und Befehl B und dann ist es in derselben Zeile. Wenn wir diesen Button auf der Linie machen wollen , können wir die Ebene versilbern und so klicken Wenn wir die Ebene als vertikale Ebene erstellen, wird jede Schaltfläche als vertikale Ebene festgelegt Um dies zu beheben, markiere ich diese beiden Schaltflächen, klicke auf diese Schaltfläche, drücke die Umschalttaste und klicke auf diese. Dann drücke ich Befehl G, um die zu gruppieren, und jetzt kann ich auf dieses vertikale Layout klicken, da diese Gruppe als anderes Layout funktioniert. Wenn wir in dieser Gruppe die Zwischengröße auf 15 ändern möchten, können wir das tun, indem wir auf die Gruppe klicken und von hier aus können wir sie wie 15 ändern. Oder wir können Shift A drücken und dieser Gruppe ein automatisches Layout hinzufügen. Von hier aus können wir es wie folgt ändern. Okay. Jetzt werde ich diesen Frame auf BTN-Set umstellen Jetzt möchte ich, dass diese Schaltfläche die folgenden dieser beiden Schaltflächen hinzufügt. Ich klicke einfach auf diesen Button und ziehe ihn an den unteren Rand dieses Schaltflächensatzes. Hier ändere ich die Feldfarbe, ändere ich die Feldfarbe sodass wir sie wie folgt auf Rot ändern können. Dann denke ich, dass ich diese Schaltfläche erstellen möchte, um das zu tun, ich werde hier hingehen und im W werde ich sie als Füllcontainer wie diesen einstellen. Dann werde ich das ändern. Klick mich an Ich bin voll mit BTN, so wie hier. Da wir diese Texte vorher ändern können, klicken Sie mich jetzt an, um zwei auf diese Weise zu teilen Das wird sich an das Design anpassen , da wir das automatische Layout hinzugefügt haben Wenn wir hier einen Rand hinzufügen möchten, können wir einfach den Hauptrahmen auswählen und von hier aus können wir einen Rand von 140 wie folgt hinzufügen. Das ist wirklich einfach und in der nächsten Lektion fangen wir an, den Heldenbereich zu entwerfen. 19. Den ersten Heldenabschnitt mit Auto-Layout erstellen: Hallo alle zusammen. Lassen Sie uns nun diese Heldenabschnitte mit automatischem Layout entwerfen. Wir sind bereits dabei , diese Nullbereiche ohne automatisches Layout zu erstellen . Jetzt ist es an der Zeit, das automatische Layout zu verwenden , um diesen Heldenbereich zu erstellen. Als ersten Schritt müssen wir einen Rahmen erstellen. Ich klicke hier und wähle dann die Rahmengröße als Desktop aus. Dann werde ich es so ausdrücken. Jetzt ändere ich diesen Desktop auf Hero One mit automatischem Layout. Okay. Jetzt müssen wir als ersten Schritt ein Rasterlayout hinzufügen. Um ein Rasterlayout hinzuzufügen, isolieren Sie den Rahmen und hier haben wir ein Rasterlayout Ich klicke hier und hier haben wir gespeichert, um das Grid aufzurufen, also füge ich es einfach hinzu Okay. Jetzt werde ich diesen Rahmen als automatisches Layout erstellen. Um das zu tun, wähle ich das Prime aus und drücke Shift A, dann wird es ein automatisches Layout und jetzt füge ich die notwendigen Details hinzu. Zuerst stelle ich eine Linie in der Mitte oben ein, dann füge ich den vertikalen Abstand oder die Polsterung auf 140 ein, dann füge ich tatsächlich den linken und rechten Rand hinzu, oder wir können es Padding nennen Dann füge ich Null als Rand des Lüfters oder als obere und untere Dann wähle ich als Zwischengröße 90 oder machen wir eins bis 20, hier haben wir ein horizontales Layout, aber wir brauchen ein aber wir brauchen vertikales Layout, weil wir die Website von oben nach unten erstellen Okay. Jetzt ist unser Layout fertig. Lassen Sie uns den Heldenbereich erstellen. Wir haben die Höhe des Heldenbereichs mit 700 angegeben. Lassen Sie uns einen Rahmen erstellen und auf einen Rahmen klicken und dann hier klicken. Dann setze ich die Breite auf 1.440 und die Höhe auf 700. Okay. Jetzt haben wir den Rahmen, ich drücke Shift A, um daraus ein automatisches Layout zu machen oder diesem Rahmen ein automatisches Layout hinzuzufügen. Wenn ich will, kann ich diesen Abschnitt dann in Hero umbenennen. Okay. Von hier aus müssen wir dieses Hintergrundbild hinzufügen. Dazu wähle ich diesen Heldenbereich und klicke auf ein Rechteck und dann hier. Dann setze ich das Rechteck wieder auf 1.440 Höhen auf 700, dann klicke ich auf das Dreieck mit 700, dann klicke ich auf das der Anzeige und dann hier, dann auf Bild mit dem Schrägstrich Video Dann wähle ich das Bild aus. Jetzt klicke ich hier , um das Bild hinzuzufügen. Jetzt wurde das Bild perfekt hinzugefügt. Wenn Sie das Design sehen, werden Sie diese Art von Abstand zwischen den Bildern sehen , um es zu entfernen Klicken Sie auf den Heldenbereich und setzen diese Details vorerst auf Null. Und lassen Sie uns das vorerst so belassen. Nochmals, und jetzt haben wir das Bild und als zweiten Schritt müssen wir diesen Overlay-Hintergrund hinzufügen Die Overlay-Farbe ist Schwarz und ihre Opazität beträgt 70. Lassen Sie uns diese Details hinzufügen. Klicken Sie auf das Bild, klicken Sie auf dieses Plus-Symbol und machen Sie es zu 70 und die Farbe ist schwarz. Okay. Jetzt müssen wir diesen Logo-Text hinzufügen, um ihn hinzuzufügen Ich werde auf TO-Text klicken und hier klicken, dann füge ich den Text hinzu, da ich den Text als Logo hinzufüge. Wenn ich den Text hinzufüge, werden Sie sehen, dass er hier erscheint. Der Grund dafür ist, dass wir uns derzeit im Hero-Frame befinden. Wenn ich auf diesen Rahmen klicke und er ein horizontales Layout hat. Lassen Sie uns ein vertikales Layout erstellen und dann erscheint der Heldentext hier. Lass es mich dir zeigen, indem ich die Farbe ändere. Lassen Sie uns es auswählen und die Feldfarbe wie folgt ändern. Aber dieses Bild sollte als Hintergrundbild funktionieren. Wenn wir diesem Design derzeit ein Objekt wie diesen hinzufügen , funktioniert dieses Bild nicht als Hintergrundbild. Um das zu sehen, können wir das Bild auswählen und an den Positionen auf der rechten Seite können wir auf „ Automatisches Layout ignorieren“ klicken, dann ignoriert dieses Bild das automatische Layout. Ich werde auf das Bild klicken und es so platzieren. Jetzt wird das Bild nicht mehr angezeigt, um das Problem zu beheben Ich werde das Bild oben im Heldenbereich platzieren. Dann kann ich es jetzt so einstellen, weil dieses Bild die Top-Layout-Funktionalität ignoriert. Jetzt können wir Änderungen an diesem Heldenbereich vornehmen , um das zu tun. Zuerst werde ich ihn entfernen und im Logo werde ich seine Farbe auf Weiß ändern und lass uns die Details herausfinden. Es ist Railway Semivol 35, klicke auf die Tanks und Railway Semi Wolthirty. Lass uns die Polsterung zwischen der Oberseite des Rahmens und dem Logo überprüfen die Polsterung zwischen der Oberseite des Rahmens und dem Logo Es ist 20. Also machen wir 20, um daraus 20 zu machen, isolieren den Heldenbereich und fügen die obere Polsterung als 20 hinzu, so wie hier Wenn ich dann hier schlitze, entfernen wir die untere Polsterung Im Heldenbereich werde ich die obere Polsterung wie folgt auf 20 einstellen die obere Polsterung wie folgt auf 20 Für diesen Heldenbereich haben wir dann ein Problem, weil der Heldenbereich es geändert hat Ich werde es mit einem Füllbehälter ausstatten und die Höhe wird auf diese Weise 700 sein. Jetzt ist es der zweite Schritt, wir müssen sie bei diesem Menüpunkt hinzufügen, ich drücke T und mag nach Hause. Dann klicke ich hier und klicke auf Kopieren Einfügen als und klicke auf Eigenschaften kopieren und komme hierher, wähle den Text und die Phaseneigenschaften aus. Jetzt haben wir das über uns, also werde ich dieses Zuhause duplizieren, indem ich Alt drücke. Dann klicke ich hier und klicke auf Immobilie kopieren Dann komme ich hierher und klicke auf erste Immobilie. Dann werde ich es für ein, zwei, eins, zwei, drei, vier Mal, eins, zwei, drei, vier Mal duplizieren . Jetzt werde ich diese Texte ändern. Dieser wird ungefähr so sein, wie er funktioniert. Dieser wird Trainer sein, dieser wird Ansprechpartner sein. Jetzt sollten wir diesen Text horizontal ausrichten lassen, derzeit ist er vertikal ausgerichtet. Um das zu tun, markiere ich all diese fünf Texte indem ich Shift und dann Shift A drücke. Wenn ich hier Shift A drücke, wird das dem neuen automatischen Layout hinzugefügt. Wir können diesen Namen für das automatische Layout als Menüelemente ändern. Es ist nicht notwendig. Dann können wir dieses automatische Layout ändern. Entwerfen Sie ein horizontales Layout. Lassen Sie uns nun die Größe zwischen den Zwischenräumen überprüfen. Die Zwischengröße ist 36. Machen wir es zu 36 dazwischen. Wählen Sie dazu das automatische Layout aus und ändern Sie es auf 36. So wie das. Als nächsten Schritt müssen wir diese beiden Abschnitte oder das Logo und den Menüelementabschnitt in dasselbe horizontale Layout einfügen Menüelementabschnitt in , um dies zu tun. Wählen Sie dazu erneut das automatische Layout oder den Menüelementsatz und das Logo aus, indem drücken und Shift A drücken, um ein automatisches Layout zu erstellen. Dann wiederum ändern wir das automatische Layout in ein horizontales Layout. Nun zur Ausrichtung, lassen Sie uns die Ausrichtung in der Mitte so einstellen, dass sie korrekt ausgerichtet ist, oder vielleicht wird eine Linie in der unteren Mitte angeordnet Jetzt müssen wir diesen Abstand einhalten , das Hinzufügen dieses Abstands ist wirklich einfach Wir müssen nur die Zwischengröße ändern. Wir können es manuell ändern, aber es gibt eine bessere Option. Das heißt, fügen Sie diese Größe dazwischen hinzu, bis sie so ist, und dann müssen wir das ändern, um den Behälter zu füllen. Jetzt ist es perfekt Line und von hier aus können wir das automatische Layout oder den Layoutnamen in ein Menü wie dieses ändern . Siehst du, es ist super sauber und super einfach. Wenn wir eines dieser Details ändern möchten, müssen wir es nur auf einmal ändern. Wenn wir beispielsweise einen größeren Abstand wie 50 wünschen, können wir einfach 50 drücken, aber in diesem Fall müssen wir einen nach dem anderen manuell anpassen. Also ja, Sie werden vielleicht verwirrt sein, was das automatische Layout angeht, aber das ist wirklich einfach und lassen Sie uns Schritt für Schritt vorgehen , damit Sie das automatische Layout vollständig verstehen . In der Helden-Sektion müssen wir dafür diese Texte erstellen. Ich drücke T und klicke hier, dann komme ich zu dieser Art von Text. Dann werde ich diesen Text direkt kopieren und so einfügen. Dann werde ich das duplizieren, auf den Text klicken und Befehl C oder Strg C drücken , um ihn zu kopieren und V, um ihn so einzufügen. Dann brauchen wir ihn tatsächlich viermal, dann werde ich den Text so ändern , dann werde ich den Text so ändern weil wir uns in dieser Lektion hauptsächlich auf das Autoayou konzentrieren In zukünftigen Lektionen werden wir uns eingehender Typografie und Farben befassen Sie uns nun als ersten Schritt Lassen Sie uns nun als ersten Schritt diese Schaltfläche erstellen Lassen Sie uns diese Schaltfläche erstellen und dann können wir einen Abstand hinzufügen und sie zentrieren, aber als ersten Schritt erstellen wir eine Schaltfläche. Wie zuvor können wir auf den Schaltflächentext klicken und dann Shift A drücken Dann wollen wir die Messung herausfinden. sind 16, 60 oben und unten und links und rechts 20, klicken Sie auf das automatische Layout. Lassen Sie uns den Namen wie folgt in BTN ändern. Von hier aus sind links und rechts 220 und oben und unten 16. Fügen wir nun diese Farbe zu dieser Schaltfläche hinzu. Klicken Sie dazu auf das Schnellsymbol in fill und klicken Sie hier, klicken Sie auf dieses Symbol und dann auf dieses, klicken Sie auf diese Farbe. Wir entwerfen ganz einfach den perfekten Button. Okay. Jetzt haben wir bei diesem Abstand, der Abstand dazwischen ist 15 und hier haben wir 20. Wählen wir die Elemente mit einem Abstand von 15 aus. Bevor ich das mache, wählen wir die Elemente und drücken Shift A und erstellen ein automatisches Layout Dann ändere ich dieses automatische Layout als CtA und jetzt müssen wir dieses automatische Layout in die Mitte stellen Ganz einfach, ich mache es als Linienmitte und dann müssen wir das in die Mitte stellen , um das zu tun Im CtA-Layout werde ich die Breite als Feldcontainer festlegen Dann müssen wir die Höhe ändern, um den Behälter so zu füllen, dass er so aussieht Jetzt wird es zentriert und wir müssen immer noch den Abstand hinzufügen, um den Abstand hinzuzufügen Ich wähle den CtA Lassen Sie uns die Größe dazwischen 20 setzen, aber hier ist die Einladungsgröße 15, um das Problem zu korrigieren, wählen Sie alle diese Elemente aus und drücken Sie Shift A, um die Einladungsgröße Okay, perfekt. Wir entwerfen nur den Heldenbereich mit automatischem Layout. in der nächsten Lektion Lassen Sie uns in der nächsten Lektion auch diesen entwerfen. Wenn wir wollen, können wir es einfach so platzieren und es uns in der Vorschau ansehen. Ich sehe so aus 20. 2. Heldenabschnitt mit Auto-Layout erstellen: Hallo, alle zusammen. Lassen Sie uns diesen zweiten Heldenbereich mit automatischem Layout erstellen. unserem ersten Schritt Klicken Sie in unserem ersten Schritt auf den Rahmen und wählen Sie die Rahmengröße als Desktop aus, setzen Sie ihn so ein und ändern Sie diesen Frame-Namen Hero Two mit automatischem Layout. uns jetzt, wie zuvor, Lassen Sie uns jetzt, wie zuvor, ein Layoutraster wie dieses hinzufügen. Okay, dann fügen wir diesem Rahmen ein automatisches Layout hinzu. Ich drücke Shift A. Jetzt mache ich den horizontalen Abstand zwischen Null und dem linken und rechten Rand wie eins für T, und der obere und untere Rand werden Null sein. Lassen Sie uns nun sehen, was wir zuerst tun müssen. Zuerst müssen wir diesen Hintergrund hinzufügen. Um das zu tun, werde ich hier klicken und hier klicken und auf Dreieck klicken, hier klicken. Dann müssen wir 1.440 Breite und 700 als Höhe sehen. Ich denke, 700 sind ok. Jetzt klicke ich hier und klicke auf Bild Video und dann auf das Bild. Dies ist das Bild, klicken Sie hier und jetzt müssen wir die Hintergrundfarbe Weiß hinzufügen und die Deckkraft beträgt 90. Klicken Sie hier, klicken Sie auf Füllen, ändern Sie dies auf Weiß und es wird 90 sein Jetzt sehen Sie, dass aufgrund dieses 140-Grad-Randes das Bild oder der Hintergrund hier ist. Wir müssen das Hintergrundbild auswählen. Klicken Sie auf dieses Igno Auto Layout-Symbol. Jetzt können wir es hinzufügen, nach Belieben anpassen, dann werde ich es in BG umbenennen Wie ich bereits sagte, ist es nicht notwendig, aber ich werde das tun. Dann klicke ich hier und erstelle einen Rahmen. Der Name des Frames wird Hero sein. Dann füge ich Autoayout hinzu, indem ich den Hero-Frame auswähle und Shift A drücke. Dann stelle ich die Breite als Füllcontainer Soweit ich mich erinnere, habe ich in früheren Lektionen die Parameter nicht erklärt Machen wir uns mit diesen Parametern vertraut. Zunächst haben wir die Breite festgelegt. Wenn wir eine feste Breite wählen und nach Belieben 200 hinzufügen können , wird das Objekt 200 sein. Lassen Sie uns das Objekt mit Füllfarbe und Rot versehen. Okay. Wir müssen dieses Hintergrundbild als erste Ebene des Rahmens verwenden. Ohne das werden wir den Rest des Rahmens nicht sehen. Hier ist das Objekt oder Frame, an dem wir gerade arbeiten. Wenn wir es auf 300 setzen, die feste Breite 300. Wenn wir es als Hug-Container einstellen, wird es so lange eine Schnur sein, bis ein anderes Objekt den Rahmen berührt Lassen Sie uns als Beispiel einen Text erstellen und lassen Sie uns diesen Text als Hello World und dann als Hello erstellen Jetzt ist die Breite 300 , weil sie behoben ist. Wenn wir jedoch den Herzinhalt auswählen, wird er von der Größe des Inhalts abhängig gemacht. als Beispiel ein Lassen Sie uns hier als Beispiel ein anderes Rechteck erstellen, sodass es nur dem Element in diesem Objekt oder in diesem Rahmen entspricht. Klicken Sie jetzt hier und Sie sehen möglicherweise diesen Abstand zwischen den Rahmen. Das liegt daran, dass wir die Abstände links, rechts und oben unten als zehn angegeben haben. Machen wir sie auf Null, damit Sie es klar verstehen Okay. Jetzt haben wir einen Füllbehälter. Wenn wir auf Container füllen klicken, wird das Objekt oder das Element um den gesamten freien Speicherplatz erweitert, den es hat. In diesem Fall fügen wir einen Gruppenrand als automatisches Layout für unsere Helden-Sektion Dieser Rahmen befindet sich in diesem Heldenbereich, er hat freien Platz dazwischen. Er wird erweitert, bis Rand auf der linken Seite in diesem Frame erreicht Das ist es. Geben Sie hier die Admin-Breite ein und fügen Sie die maximale Breite hinzu. Wenn wir hier auf Admin-Breite klicken, können wir die Mindestbreite hinzufügen. Wenn wir die Mindestbreite auf 200 und die Mindestbreite auf 700 setzen und jetzt denken, dass wir das so verkleinern Wenn wir es verkleinern, schrumpft das Element oder der Rahmen nicht, wenn die Mindestbreite von 700 Wenn wir eine maximale Breite von 700 haben, das Element eine maximale Breite Das Element wird nur eine Breite von 700 haben. Die sind also etwas fortgeschritten, aber du kannst dich daran erinnern. Im responsiven Design wird es nützlich sein. Das gilt jetzt für die Größe Zwei. Wir haben es als fix angegeben, wir können Fix mit einem Füllbehälter, einem Umarmungsbehälter und Mint x Höhe hinzufügen Umarmungsbehälter und Mint x Höhe Lass uns mit der Arbeit beginnen. Zuerst entferne ich diese unnötigen Objekte, dann entfernen wir die Füllfarbe und wählen den Heldenbereich und das Set mit einem Füllbehälter aus, und wir müssen dieses Maximum entfernen und so meinen. Dann wird die Höhe 700 sein. Okay. Wir müssen diese Rahmengröße auf 1.440 setzen Okay. Jetzt müssen wir hier dieses Logo und den Text hinzufügen. Ich drücke einfach Befehl C, um das zu kopieren, und Befehl V, um es einzufügen. Dann wähle ich einfach all diese Menüelemente aus und kopiere sie, weil wir nicht vornehmen müssen das Styling nicht vornehmen müssen und wir auch diese Schaltfläche haben. Auf Knopfdruck kopiere ich einfach den Text. Der Text ist weiß, also fangen wir mit der Schaltfläche an. Hier haben wir die Taste, isolieren Sie die Taste und drücken Shift A. Dann wollen wir die Taste mit dem Hi herausfinden, sie hat die Größe 16 mal 16 und 37 mal 37. Hier ist der Tastenrahmen. Benennen wir es in VTN um und füllen es dann mit schwarzer Farbe. Dann müssen wir hier 37 als linke und rechte Polsterung und 16 als obere und untere Abstände hinzufügen als linke und rechte Polsterung und 16 als obere und . Jetzt müssen wir die Ecke auf 60 reduzieren. Die Schaltfläche Jetzt müssen wir diese Menüelemente auswählen und von hier aus haben wir die Menüelemente Das dazwischen liegende Menüelement ist 25, kommen Sie so hierher und wählen Sie die Menüelemente aus und drücken Sie Shift A, um ein neues automatisches Layout zu erstellen oder es zu gruppieren und das automatische Layout hinzuzufügen. Dann müssen wir im automatischen Layout das horizontale Layout einstellen. Dann müssen wir dazwischen die Größe 25 hinzufügen Okay. Jetzt müssen wir alle drei Elemente auswählen und die Umschalttaste drücken, um eine Gruppe zu bilden und einen Rahmen hinzuzufügen. Dann müssen wir es horizontal anordnen. Jetzt wird es so aussehen. Jetzt können wir es umbenennen, wenn wir wollen. Lassen Sie uns das in Menü umbenennen und hier Menüelemente wie diesen. Klicken Sie dann auf das Menü-Layout und lassen Sie uns einen Füllcontainer daraus machen. Und dann müssen wir dieses Element zwischen Größe auf Auto setzen , Enter drücken, eigentlich müssen wir dieses Objekt auswählen und das Objekt zwischen Größe auf Auto setzen, so wie hier. Dann müssen wir es zentrieren , damit es zentriert wird. Wir müssen hier so klicken. Das Menü ist erstellt und jetzt haben wir hier den oberen Rand und fügen den oberen Pass 25 hinzu. Lass uns 25 draus machen. Wählen Sie dies aus und klicken Sie von hier aus hier, machen Sie es zu 25. Perfekt. Jetzt müssen wir dieses Willkommen zu meinem Finanzbereich hinzufügen Es wird in diesem Heldenbereich sein. Lassen Sie uns alle auf dem Foto hier kopieren. Ich kopiere einfach so von hier. Für diese Schaltflächen müssen wir ein anderes Layout erstellen . Ich kopiere einfach den Text und kopiere auch nur diesen Text. Fangen wir wieder mit den Schaltflächen an. Bevor ich das mache, lass uns den Knopf zwischen den Seiten herausfinden. Es ist 18, 18, 24, 24. Klicken Sie hier, um die Phase A auf automatisches Layout umzustellen . Das ist dann 24 und hier 18. Dann ist die Füllfarbe schwarz. Eigentlich müssen wir hinzufügen, die Füllfarbe schwarz ist und die Ecken so aussehen , dass sie 60 Dann müssen wir das Gleiche mit der Schaltfläche „Weitere Informationen“ tun. Res-Shift A. Dann fügen wir zuerst einen Strich hinzu, klicken Sie hier und die Konturgröße wird zwei sein. Ich glaube, es ist C, mal sehen. Ja, es ist einer. Also lass uns eins daraus machen. Okay. Dann hat es die gleiche Höhe in der Breite? Ja, nein, es hat eine erhöhte Breite von 33, 33, 33, 18, 80, 35, 30. Lassen Sie uns das als nicht dieses als 35, 18 machen. Und lassen Sie uns hier dasselbe tun. Klicken Sie auf die Schaltfläche Weitere Informationen und stellen Sie hier den Wert auf 35 18 reduzieren Sie dann den Wert als zum Sitzen. Markieren Sie dann die Tasten , markieren Sie sie und drücken Sie Shift A, um das Layout als horizontales Layout festzulegen. Ich hoffe, Sie verstehen diese Option , mit der ich arbeite, klar und deutlich. Wenn du es zuerst nicht verstehst, spiel einfach damit herum. Du musst es immer wieder versuchen, um zu lernen. Zuerst habe ich dasselbe gemacht. Wenn Sie Fragen haben, können Sie mich einfach im Nachrichtenbereich oder im Kommentarbereich fragen . Hier haben wir einen Abstand von 30, hier haben wir einen Abstand von 21. Sie sehen, wenn wir ein Design ohne automatisches Layout erstellen, können wir genaue Zahlen erhalten. Als Beispiel hier haben wir das untere Pad in 19 , das obere Pad in 18. Auch hier haben wir 21 als Zwischengröße, aber es sollte 20 sein. Mit dem automatischen Layout können wir hier ganz einfach auswählen und das automatische Layout auf zwei ändern. Deshalb wird das Erlernen der Oto-Ebene ein großer Vorteil sein. Wählen wir dann all diese Elemente aus und drücken Shift A, um eine Gruppe zu bilden. Ich werde diese Gruppe in ctA und t N s BTN eins, BTN, zwei umbenennen und t N s BTN eins, BTN, , also machen wir diese Zwischengröße jetzt auf Ist es 30? Nur hier 30, hier sind 20. Wählen Sie für diese 20 einfach nur diese beiden aus und wir wechseln dann zu. Okay. Jetzt müssen wir es in den Mittelpunkt stellen. Um dieses Zentrum zu bilden, gehe ich hier hin und stelle die Höhe als Füllbehälter so ein. Dann setze ich diese Ausrichtung auf „ Linksmittig ausrichten“. Okay, es ist zentriert, und jetzt müssen wir dieses Bild hinzufügen. Also dieses Bild auch von der Außenseite unseres Designs, also sollte es kein Outlet haben oder es sollte das Autoao ignorieren Also zuerst erstelle ich ein Rechteck wie dieses und lassen es uns mit 710 und als 610 600 machen Okay, dann kann ich es dazu bringen, Autoao zu ignorieren und es so oben zu platzieren Dann kann ich überall Trinkgeld geben, wie ich will. Lassen Sie uns vorerst ein Bild hinzufügen. Klicken Sie hier, klicken Sie auf Bildvideo und wählen Sie das Bild aus. Hier ist der. Klicke hier, füge es hinzu. Derzeit wird es nicht angezeigt, also müssen wir es so platzieren und dann darauf klicken und Feld ändern, um es so zuzuschneiden und auszurichten. Okay. Der erste Teil ist abgeschlossen. Eigentlich müssen wir dieses Bild einfügen, das. Okay. Jetzt sieht es gut aus. Eigentlich müssen wir das jetzt hinzufügen, was wir tun müssen, ist diesen Abschnitt hinzuzufügen. Es ist einfach, es hinzuzufügen, ich erstelle einen neuen Rahmen. Lassen Sie uns ein neues Rechteck wie dieses erstellen Es wird sich unter dem Heldenbereich befinden, nicht im Heldenbereich. Nun, das sollte so sein, lass es uns hier platzieren und lass uns den Heldenbereich darüber platzieren. Ich habe das Problem in unserem Hauptrahmen gefunden, wir müssen das Layout als horizontales Layout auf vertikales Layout einstellen . Okay. Jetzt ist es da. Jetzt werde ich es mit der Höhe ändern, da 1.440 bis 700 nicht 700 die Größe hier ist 270. Lassen Sie uns 270 testen. Okay. Und für diesen müssen wir dasselbe tun. Lass uns auf Ignotayo klicken und es so ausdrücken. Okay, dann ändern Sie die Feldfarbe auf diese, jetzt müssen wir die Primzahl wie folgt hinzufügen und lassen Sie uns diesen Frame-Namen so ändern dass ich denke , für Sakura C-Highlight hervorheben Wählen Sie es dann aus und drücken Sie Shift A, um ein automatisches Layout zu erstellen und den Container mit Strichfüllung festzulegen Und die Höhe wird auf diese Weise 270 bis 70 betragen. Okay. Jetzt müssen wir diese Informationen hinzufügen. Im Moment werde ich diesen kopieren und den Rahmen setzen und ihn in den Rahmen legen und wir müssen das über den Rahmen machen. Andernfalls werden wir die Rahmendetails nicht sehen. Dann werde ich zu diesem Rahmenlayout eine Linie links in der Mitte machen Okay, jetzt müssen wir diese drei Elemente erstellen, dieses auswählen und dieses auswählen und es so kopieren und einfügen. Kopiere es so. Dann wähle ich diese beiden Objekte aus und drücke Shift A, und dann checke die Eingangskönigengröße auf 15 ein, wähle dieses aus und setze die Eingangskönigengröße auf 50. Okay. Und mach es auch zum Mittelpunkt. Machen wir das Zentrum. Okay. Nun, lassen Sie uns dasselbe auch mit diesem machen. wie bei diesen beiden Objekten Drücken Sie wie bei diesen beiden Objekten Shift A und stellen Sie die Mitte 15 ein. Jetzt wähle ich diese beiden Objekte aus und drücke Shift A, um ein neues automatisches Layout zu erstellen und ein horizontales Layout wie dieses festzulegen. Jetzt wähle ich diesen markierten Rahmen aus und stelle das automatische Layout als horizontales Layout ein. Okay. Dann müssen wir diesen hinzufügen. Fügen wir es hinzu und wählen diese beiden Objekte aus, drücken Shift A und legen es dann als vertikales Layoutzentrum fest. Sehen wir uns nun die Zwischenseiten an. Die Zwischenseiten sind 57, markiere tatsächlich all diese Rahmen, ich kann das in tatsächlich all diese Rahmen, diesen Rahmen einfügen und diesen Rahmen auswählen und ihn auf 57 setzen, dann konvertiere ich diesen Text in automatisches Layout, indem ich Shift A drücke und auf den Hauptrahmen klicke und ihn als Füllcontainer festlege, und hier haben wir Auto als Zwischengröße. Es passt perfekt. Wenn du willst, kannst du es umbenennen, aber im Moment werde ich es nicht umbenennen, also hier ist es, hier ist unser zweiter Heldenbereich mit automatischem Layout. Das Design wird so aussehen. Jetzt sind Sie dran Sie müssen diesem Bereich mit drei Helden ein automatisches Layout hinzufügen, mit Figma herumspielen und versuchen, es zu tun Wir sehen uns in der nächsten Lektion. 21. 3. Heldenabschnitt mit Auto-Layout erstellen: Hallo, alle zusammen. Hast du es geschafft, einen guten Job zu machen? Wenn nicht, machen wir es hier und zuerst müssen wir einen Rahmen erstellen. Klicken Sie auf den Rahmen, legen Sie die Größen und den Desktop fest, setzen Sie ihn so ein, dann fügen wir ein Layoutraster hinzu. Klicken Sie dann auf dieses Anrufregister. Eigentlich brauchen wir das Layout nicht. Aber mit dem Layout lässt sich leicht erkennen, wohin das Objekt gehen wird. Dann müssen wir zuerst dieses Menü hinzufügen, um das zu tun Ich drücke Shift A, um diesem Frame ein automatisches Layout hinzuzufügen. Ich werde diesen Frame in 03 mit automatischem Layout umbenennen. Dann werde ich all diese Details entfernen und hier werde ich sie auf 140 setzen, unseren Rand links und rechts, dann werde ich das als vertikales Layout einstellen , das an dieser Stelle zur Mitte ausgerichtet ist. Jetzt müssen wir dieses Logo hinzufügen. Um es hinzuzufügen, müssen wir einen neuen Rahmen erstellen, auf dieses Rahmensymbol klicken und einen Rahmen erstellen. Diese Rahmengröße entspricht der Höhe 223. Lassen Sie uns mit diesem Füllbehälter die Höhe 223 erreichen. Okay. Jetzt haben wir ein Problem. Nein, wir können das Problem lösen. Das Problem ist, dass wir diese Linie haben, aber unser Rahmen wird nur bis hierher reichen. Die Linie wird also nicht bis zum Ende dieses Frames gehen, aber das wird nicht das Problem sein, weil wir sie zum Hintergrundbild hinzufügen können. Okay. Jetzt müssen wir dieses Logo hinzufügen. Um dieses Logo hinzuzufügen, werde ich ein Rechteck wie dieses erstellen. Eigentlich müssen wir diesem Rahmen ein automatisches Layout hinzufügen, den Rahmen verschieben und Shift A drücken, um ein automatisches Layout hinzuzufügen. Dann legen Sie von hier aus Eigenschaften fest und die Höhe sollte 223 Personen betragen. Okay. Dann müssen wir hier dieses Logo hinzufügen. Die Logogröße ist 192 als Breite und 92, und lassen Sie uns die Höhe als Füllung Fügen Sie das Logo nun wie folgt zu diesem Rechteck hinzu. Der Teil ist fertig und als zweiter Teil müssen wir zuerst dieses Herren-Artikelset hinzufügen. Ich werde zuerst das Home-Menü kopieren , dann über den Elektroservice und uns kontaktieren. Ich werde sie alle hierher kopieren. Dann müssen wir für dieses Zuhause diesen kleinen Pfeil hinzufügen. Ich werde es von hier kopieren. Dann wähle ich den Pfeil und den Starttext, den Starttext, dann den Pfeil drücke dann Shift A. Dann lege ich das Layout als vertikales Layout fest, und dazwischen wird die Größe Null sein. Mal sehen, was dazwischen liegt, es ist 66 das. Okay. Dann werde ich mit einer Umarmung C wie diesem fertig Dann muss ich es so nach vorne stellen. Dann wähle ich all diese Menüelemente aus und drücke Shift A, um das automatische Layout eines neuen Menüelements zu erstellen. Und sehen wir uns die Größe zehn an, es ist 50 dazwischen, Größe hat 50 wie diese. Okay. Jetzt müssen wir diesen US-Bereich erstellen. Es ist wirklich einfach. Zuerst brauchen wir den Zirkus. Wir werden diese beiden Kreise von hier kopieren und sie hier ablegen. Okay. Dann müssen wir, bevor wir das Bauernsymbol hinzufügen, diese beiden in der Mitte platzieren zu tun, drücke ich Shift A und füge das automatische Layout Aber mit dem automatischen Layout können wir das nicht tun, weil Elemente nicht zusammengeklappt werden oder Elemente das nicht vor einem anderen Element im automatischen Layout hinzufügen . Wir müssen auf dieses Igno Auto-Layout klicken. Ich wähle diese beiden Kreise und klicke auf Igno Dann kann ich es so zentrieren lassen. Dann müssen wir auf dieses Handysymbol klicken, ich werde es einfach von hier kopieren. Und wähle diesen Rahmen aus, lege ihn in den Rahmen innerhalb des Rahmens und ich werde dasselbe auch für ihn tun. Dann wähle ich alle drei Elemente aus und mache es so in die Mitte. Okay. Jetzt haben wir ein Problem. Dieser Rahmen funktioniert nicht so, wie wir es wollen, also werde ich ihn außerhalb des Rahmens platzieren und entfernen. Dann wähle ich alle drei Elemente aus und drücke Command G Gruppe E zu erreichen. Dann drücke ich Shift A, um dem Objekt ein automatisches Layout hinzuzufügen. Dann müssen wir auf dieses Bild klicken oder es in ein Menü wie dieses umbenennen und hier Menüelemente hier, Telefonsymbol, dann müssen wir diese beiden Elemente hinzufügen. Ich füge sie einfach so hinzu und wähle beide aus, drücke Shift A, füge dann ein vertikales Layout hinzu und fertig. Jetzt kann ich diese beiden Elemente auswählen und Shift A drücken, um la zu erstellen, um Otolaa zu diesem Abschnitt hinzuzufügen Zwischengröße ist Handtuch, also ändere ich es einfach Okay. Alles gut. Jetzt wähle ich diesen Rahmen aus und setze den Artikel in Zwischengröße auf Otto und er verteilt alles gleichmäßig. Okay. Jetzt müssen wir dieses Hintergrundbild hinzufügen. Es ist wirklich einfach. Klicken Sie einfach auf das Rechteck und stellen Sie dann die Breite 1.440 ein. Lassen Sie uns sehen, dass die Höhe 577 beträgt Fügen wir die Höhe als 577 hinzu. Okay. Jetzt müssen wir nur noch auf dieses Ignootoa klicken, das können Sie, und jetzt können wir das Bild hinzufügen Klicken Sie hier, Video, plattieren Sie das Bild so. Okay. Dann müssen wir diesen Strich hinzufügen. Kopieren wir also die Strichfarbe und klicken Sie hier. Klicken Sie auf PAs und Innenseiten, setzen Sie oben und zwei, dann wird das diese Farbe sein Okay. Jetzt müssen wir diesen Abschnitt erstellen. Lassen Sie uns ihn als ersten Schritt erstellen, lassen Sie uns einen Rahmen erstellen. Eigentlich brauchen wir den Rahmen hier nicht, aber ich werde diesen Teil zuerst kopieren und ihn so platzieren. Dieser Teil wie dieser Text der Schaltfläche wie dieser. Ich werde auf den Rahmen klicken und wir müssen diesen Text nach links platzieren. Klicken Sie so und es wird nach links gehen und hier haben wir ein Problem. Wir haben unten eine 100-prozentige Garantie , aber sie sollte oben sein. Ich wähle es aus und klicke hier und lege es nach oben. Dann haben wir diesen Button in der Mitte, ihn unten. Okay, jetzt werde ich auf Shift A klicken, um eine Schaltfläche zu erstellen. Die Button-Details werden also 25, 25, 30, 30 sein. Okay. Machen wir 30 für links und rechts, 25 für oben und unten, dann Füllfarbe. Fügen wir diese Füllfarbe hinzu. Okay, nett. Jetzt müssen wir das dazwischen überprüfen. Größe, um die Zwischengröße hinzuzufügen Ich wähle all diese Elemente aus und drücke Shift A, dann wird die Zwischengröße angezeigt. Okay. Eigentlich sollte das Null sein. Das ist die obere und untere Polsterung oder die vertikale Polsterung sollte zwei L betragen Jetzt müssen wir dieses Zentrum machen. Um dieses Zentrum zu erstellen, müssen wir das automatische Layout wie folgt darauf anwenden. Um dieses Zentrum zu erstellen, benötigen wir einen Rahmen, der die Größe dieses Hintergrundbilds hat , da dieses Hintergrundbild derzeit das automatische Layout ignoriert Also brauchen wir einen Rahmen, der das automatische Layout nicht ignoriert, also erstelle ich einen Rahmen und drücke A, dann ist diese Höhe 577, dann wird er so gefüllt Dann werde ich diesen Rahmen in einen neu erstellten Rahmen wie diesen Jetzt ist es in der Mitte. Jetzt kann ich das in CTA ATN umbenennen, so wie hier. Dann wähle ich diesen einen Satz aus, der so mittig nach links ausgerichtet Ein hier, elektrischer Container Okay. Okay. Jetzt ist es fabelhaft zentriert. Wir haben erfolgreich den dritten Heldenabschnitt zwei erstellt. Sehen wir uns den Vorschaumodus an. In zukünftigen Lektionen werden wir das automatische Layout verwenden , um komplexere Websites zu entwerfen. Wir haben nur drei Designs erstellt. Wenn du denkst, dass Autoayout so kompliziert ist, suche einfach nach einem beliebten Design bei Google und versuche, dieses Design auf Figma mithilfe von atoyout nachzuahmen und zu erstellen Auf diese Weise erfahren Sie mehr über Autoayout und wie Sie Autoayout effektiv einsetzen Wir sehen uns in der nächsten Lektion. 22. Einführung in das UI/UX-Designprinzip: Hallo zusammen. Bisher lernen wir die Grundlagen von Figma kennen und beginnen, uns mit dem Tool vertraut zu machen und einige Designs mit Figma-Funktionen zu erstellen Konzentrieren wir uns nun auf die YX-Designprinzipien. Wenn wir eine benutzerdefinierte Website erstellen, müssen wir eine Vorstellung von den UIUX-Prinzipien haben , denn wenn wir die UIUX-Prinzipien und das Konzept nicht auf unser Design anwenden UIUX-Prinzipien und das Konzept nicht auf , wird der Zweck des Designs oder der Zweck Zweck des Designs oder der Zweck der Website nicht erreicht In den nächsten Lektionen werden wir etwas über visuelle Hierarchie, Layout, Typografie und Farbtheorie lernen und müssen die UX-Prinzipien kennen, um benutzerdefinierte Websites zu entwerfen Wir sehen uns in der nächsten Lektion. 23. Visuelle Hierarchie: Hallo zusammen. Stellen Sie sich vor, Sie gehen in ein neues Zimmer. Sie müssen wissen, wo Sie zuerst suchen müssen und wie Sie sich zurechtfinden. Genau das macht die visuelle Hierarchie auf einer Website. Lassen Sie es uns also aufschlüsseln. Visuelle Hierarchie ist die Art und Weise, wie wir Dinge auf einer Website anordnen , um zu zeigen, was wichtiger ist. Manche Dinge müssen sofort ins Auge fallen , während andere später bemerkt werden können. Je besser die Hierarchie, desto einfacher ist es, das SI zu verwenden. unserem Design eine visuelle Hierarchie hinzufügen, müssen wir hauptsächlich drei Dinge berücksichtigen. Das erste ist die Größe, große Dinge erregen zuerst Aufmerksamkeit. Denken Sie an eine große Schlagzeile in einer Zeitung. Es sticht heraus. Das Gleiche gilt für Websites. Wichtige Überschriften oder Schaltflächen sollten größer sein als andere Dinge auf der Seite. Dann müssen wir Farbe und Kontrast berücksichtigen. Helle Farben fallen Ihnen ins Auge, dunkle oder matte Farben wenn Sie möchten, dass etwas wie ein Knopf hervorsticht, verwenden Sie eine Farbe, die auffällt Ein roter Knopf auf weißem Hintergrund wird zum Beispiel schnell auffallen Dann sollten wir über Abstand und Platzierung nachdenken. Wir müssen wichtigen Dingen Raum geben. Wenn wir mehr Platz um das Element herum hinzufügen, hebt es sich besser ab. Wenn die Dinge zu nahe beieinander liegen, kann es schwierig sein, sich zu konzentrieren. Die visuelle Hierarchie führt Ihren Benutzer durch Ihre Website. Indem Sie Größe, Farbe und Abstand anpassen, können Sie ihnen zeigen, was wichtig ist , ohne dass sie es merken. 24. Typografie lernen: Hallo zusammen. Typografie ist einfach die Art und Weise, wie wir eine Schriftart auf einer Website , damit sie gut und leicht lesbar aussieht Es spielt eine große Rolle bei der Schaffung einer großartigen Benutzererfahrung. Hier sind einige schnelle Dinge, die Sie über Typografie wissen müssen Schrift. Dies bezieht sich auf das Design der Schrift wie bei Area Times Nur Rome oder Roboto Eine Schrift ist eine Sammlung von Zeichen, Buchstaben, Zahlen und Symbolen, die dieselbe Schriftart und denselben E-Stil haben Dann haben wir die Schriftbreite. Dies bezieht sich auf die Dicke der Schrift, z. B. normale alte Schrift oder. Dann haben wir Fonttyle. Dazu gehören Variationen wie Kursiv, Oblique oder Condensed. Wählen Sie bei der Auswahl einer Schrift für Ihre Website immer zuerst die Lesbarkeit dieser Dinge aus Wählen Sie eine Schrift, die auf Bildschirmen leicht lesbar ist. Vermeiden Sie überlagernde dekorative oder komplexe Schriften. Konsistenz Halten Sie sich an eine begrenzte Anzahl von Schriftarten auf Ihrer gesamten Website, um einen einheitlichen Stil zu gewährleisten. Ich empfehle, nur zwei Arten von Schriftarten zu verwenden, eine für die Überschrift und eine für Absätze Dann sollten Sie über die Markenidentität nachdenken. Ihre Schrift sollte die Persönlichkeit und die Werte Ihrer Marke wiedergeben Persönlichkeit und die Werte Ihrer Marke Dann müssen wir über den Kontext nachdenken. Das bedeutet, dass der Inhalt und der Zweck Ihrer Website den geeigneten Typ beeinflussen Hier sind einige Tipps für eine gute Typografie Verwenden Sie unterschiedliche Schriftgrößen mit einem Stil, um eine klare visuelle Hierarchie zu erstellen, richtigen Abstand zwischen Buchstaben und Wörtern, um eine optimale Lesbarkeit zu gewährleisten Buchstaben und Wörtern, um eine optimale Lesbarkeit einen Kontrast zwischen Text und Hintergrund, um die Lesbarkeit zu verbessern Halten Sie die Textzeilen auf einer angemessenen Länge, um eine Überanstrengung der Augen zu vermeiden Wählen Sie dann Textfarben, die leicht zu lesen sind und den Hintergrund ergänzen. Typografie ist ein Schlüssel, damit Ihre Website leicht lesbar und visuell erscheint 25. Mehr über Schriftarten erfahren: Wenn es um Schriften geht, werden Sie oft von Serif und Cancerif hören Serifenschriften haben einen kleinen Strich am Ende ihrer Buchstaben. Denken Sie an Zeitneuronen oder Georgia. Sie eignen sich hervorragend, um ein traditionelles und formelles Gefühl zu erzeugen , und werden oft für lange Textpassagen wie in Büchern oder Blogs verwendet . Auf der anderen Seite hat Sanserifont diese zusätzlichen E-Troke-Antennen nicht. Helvatica und Robot sind diese zusätzlichen E-Troke-Antennen nicht. Helvatica und Robot Beispiele dafür. Diese Telefone sind mutig, modern und Sie funktionieren auch gut auf Mobilgeräten, da sie klar und leicht lesbar sind. Mal sehen, welche Art von Marke und welche Art von Design diese Sans- und Sanserif-Telefone verwenden werden. Denken Sie also immer an die Ablesbarkeit des Geschmacks. Hier. Hier. 26. Schriftarten mit Google-Schriftarten finden: Hallo zusammen. Jetzt wissen wir über Typografie Lassen Sie uns herausfinden, wo und wie Sie Typografie für Ihre Projekte finden Der beste Ort ist Google Phones. Sie können auf Google-Telefone zugreifen, indem Sie zu phons.google.com gehen und auf diese Seite gelangen Hier haben wir viele Schriftarten zur Auswahl. Wir können also einfach so nach unten scrollen und die besten Schriftarten finden , oder wir können diese Filter verwenden , um die Schriftarten herauszufiltern. Lass uns Schriften für Überschriften finden. Hier werde ich die Überschriftengröße auf 60 einstellen. Lass uns 60 testen. Hier können wir die tatsächliche Überschrift eingeben. Ich werde etwas wie Ihren Leitfaden für einen ausgewogenen, gesünderen Lebensstil hinzufügen , und dann werde ich diese Sprache überspringen. Hier haben wir die Typen Serif und Sensori, also werde ich nur sensorisch auswählen Jetzt haben wir die gefilterten Schriften, jetzt können wir sie durchsehen und die beste Schrift finden Hier haben wir die letztere Schrift, also werde ich sie anklicken und dann können wir mehr über diese Schrift herausfinden. Wenn wir diese Schrift also zu Absätzen hinzufügen, wird sie so aussehen, und unser Plan ist es, sie zur Kopfzeile hinzuzufügen. Also werde ich jetzt auf diese G-Schrifttaste klicken und sie wird zu diesem ausgewählten Schriftbereich hinzugefügt, und ich gehe wieder zu den Schriftarten. Jetzt muss ich eine Schrift für Absätze finden. Um das zu tun, werde ich diese Art von Absatz hier hinzufügen. Dann ändern wir die Größe auf etwa 20 und wählen das sensorische Telefon aus. Hier können wir die Schriftarten überprüfen , die für unser Projekt geeignet sind. Die Suche nach dieser Schriftart hängt immer davon ab welche Art von Website Sie entwerfen. In diesem Fall. Das ist eine Website für Fitnesstrainer, also wähle ich diesen Arbeitssinn aus und hier können wir die Details überprüfen. Wenn wir das hinzufügen, wird es so aussehen. Jetzt können wir auf dieses Gate-Telefon klicken. Nachdem ich hier geklickt habe, kann ich die Schriftarten finden , die ich ausgewählt habe. In Figma haben wir eine Google-Schriftbibliothek. Ich öffne unsere Figma-Datei und hier wählen wir einfach diese aus und ich klicke auf diese Schriftart und hier haben wir die Hier können wir Google-Schriftarten auswählen und jetzt können wir die Google-Schriftarten abrufen Wenn wir diese RL-Schriftarten auswählen, können wir E-Schriftarten finden. Dies ist der einfache Weg, Schriften für unsere Projekte zu finden. Ich gehe zu den Schriftarten und wenn Sie die SEI-Schriftarten überprüfen möchten, können wir hier klicken und wir werden die SE-Schriftart haben , die wir auf unserer Website verwenden können. In einigen Lektionen werden wir diese Google-Schrift-Website verwenden , um Schriftarten für unser Projekt auszuwählen. 27. Farbpsychologie verwenden: Farben spielen eine entscheidende Rolle im Webdesign und beeinflussen, wie Nutzer Ihre Website wahrnehmen und mit ihr interagieren. Was ist Farbpsychologie? Farbpsychologie untersucht, wie Farben unsere Emotionen, Modi und Verhaltensweisen beeinflussen. Verschiedene Farben rufen unterschiedliche Gefühle und Assoziationen Zum Beispiel wird Rot oft mit Energie, Mode und Begeisterung in Verbindung gebracht , während Blau für Vertrauen und Zuverlässigkeit steht Vertrauen und Zuverlässigkeit Aus diesem Grund verwenden Marken wie Coca Cola Rot und Marken wie Linked In und die meisten vertrauenswürdigen Banken Blau als Hauptfarben Ein Verständnis der Farbpsychologie kann Ihnen dabei helfen, Websites zu erstellen, die bei Ihrer Zielgruppe Anklang finden und die gewünschten Emotionen hervorrufen Hier sind einige Tipps. Wählen Sie Farben, die zur Persönlichkeit Ihrer Marke passen, und welche Emotionen möchten Sie bei Ihren Nutzern hervorrufen? Stellen Sie sicher, dass Ihr Text und Ihre Grafiken leicht lesbar und visuell ansprechend sind Experimentieren Sie mit verschiedenen Farbschemata , um herauszufinden, was am besten funktioniert. Farbtheorie und Farbpsychologie sind wesentliche Aspekte des Webdesigns. verstehen, wie Farben unsere Emotionen und Verhaltensweisen beeinflussen, können Sie eine Website erstellen, die nicht nur visuell ansprechend, sondern auch emotional fasziniert. Schauen Sie sich diesen Leitfaden zu Farbemotionen an. In diesem Leitfaden werden Sie viele beliebte Marken und ihre Markenfarben sehen . Außerdem werden Sie Details zu Emotionen, Stimmungen und Verhaltensweisen dieser Farben sehen. Laden Sie dieses Bild im Bereich Ressourcen herunter und studieren Sie es, wenn Sie eine Website erstellen , die keine Markenfarbe oder wenn Sie versuchen, ihre Marke neu zu gestalten Verwenden Sie diesen Leitfaden für emotionale und lassen Sie sich Farben einfallen, die Farben und lassen Sie sich Farben einfallen, die zu ihrer Marke passen . Wir sehen uns in der nächsten Lektion 28. Was sind 60-30-10-Regeln: In der Innenarchitektur haben wir ein Konzept namens 603010-Regel. Wir können diese 603010-Regel für unsere benutzerdefinierte Website anwenden. Diese Regel trägt dazu bei, dass Ihre Website ausgewogen und attraktiv aussieht Was ist die 603010-Regel? Die 603010-Regel unterteilt die Farben in Ihrem Design und sorgt so für Harmonie. So funktioniert es. 60% ist deine dominante Farbe. Es sollte den größten Teil Ihrer Website abdecken und die allgemeine Stimmung bestimmen. 30% ist deine Sekundärfarbe. Es unterstützt die dominante Farbe und verleiht zusätzliche Tiefe 10% ist Ihre Akzentfarbe. Verwenden Sie diese Schaltfläche für Hervorhebungen eine wichtige Funktion , um Aufmerksamkeit zu erregen. Lassen Sie uns herausfinden, wie man das benutzt. zunächst Ihre Farbpaletten aus, wählen Sie eine dominante Farbe für Ihre Marke, eine Sekundärfarbe, die gut dazu passt , und eine Akzentfarbe, die hervorsticht, verwenden Sie dann die dominante Farbe für den Hintergrund und den Hauptbereich Die Sekundärfarbe eignet sich gut für Seitenleisten und Überschriften. Reservieren Sie die Akzentfarbe für Schaltflächen und. diese Farbkombination, Halten Sie sich an diese Farbkombination, damit Ihre Website sauber und übersichtlich aussieht und vermeiden Sie ein chaotisches Erscheinungsbild Nachdem Sie die 603010-Regel angewendet haben, holen Sie sich Feedback von echten Benutzern und finden Sie heraus, wie sie von der Farbe und dem Design denken Nehmen Sie dann nach Bedarf Änderungen vor. Denken Sie auch daran, dass dies eine Regel ist, was bedeutet, dass wir Regeln brechen können. Wenn Sie der Meinung sind, dass die 603010-Regel für einige Bereiche Ihrer Website nicht geeignet ist, können Sie sie ändern Sehen wir uns ein Beispiel an, das diese 603010-Regel effektiv verwendet Sie sehen, die 603010-Regel ist ein großartiger Leitfaden für die Gestaltung eines Wenn Sie sie verwenden, fühlt sich Ihre Website ausgewogen und ansprechend an. 29. Was ist nutzerzentriertes Design: Hallo, alle zusammen. Lassen Sie uns über ein sehr wichtiges Konzept im Webdesign, benutzerzentriertes Design, sprechen und warum es für Websites von entscheidender Bedeutung ist. Benutzerzentriertes Design bedeutet , Websites zu erstellen, die sich auf die Bedürfnisse und Wünsche der Benutzer konzentrieren die Bedürfnisse und Wünsche der Benutzer anstatt nach dem zu entwerfen, was Ihrer Meinung nach gut aussieht. Sie entwerfen so, dass die Dinge für die Besucher der Website einfach und nützlich sind. Stellen wir uns das wie den Bau eines Ladens vor. Sie würden alles so arrangieren , dass Kunden leicht finden, wonach sie suchen. Wenn Dinge schwer zu finden und verwirrend sind, verlassen die Leute den Laden, ohne etwas zu kaufen. Die gleiche Idee gilt für Websites. Eine Website sollte ein Problem lösen oder ein Bedürfnis des Benutzers erfüllen. Wenn dies nicht der Fall ist, werden die Besucher schnell gehen. Hier sind einige Gründe, warum es so wichtig ist, sich auf den Benutzer zu konzentrieren. Wenn Sie die Navigation auf der Website vereinfachen, können Nutzer schnell finden, wonach sie suchen. Das bedeutet, dass mehr Leute auf Ihrer Website bleiben. Wenn Benutzer das Gefühl haben, dass die Website für sie gemacht ist , ist es wahrscheinlicher, dass sie länger bleiben und mehr erkunden. Wenn der Nutzer leicht das finden kann was er braucht, z. B. Produkte oder Informationen, es wahrscheinlicher, dass er Maßnahmen ergreift, ob es nun darum geht, etwas zu binden, sich anzumelden oder Sie zu kontaktieren. Sehen wir uns ein Beispiel an. Nehmen wir an, Sie entwerfen eine Website für ein lokales Lebensmittelgeschäft. Wenn die meisten Kunden kommen, um Reis, Gemüse und Epe zu kaufen , sollten Sie sicherstellen, dass diese auf der Startseite leicht zu finden sind Sie werden auch die übersichtliche Suchleiste hinzufügen und vielleicht sogar verwandte Produkte vorschlagen, um das Einkaufen zu vereinfachen Sehen wir uns ein anderes Beispiel an. Wenn Eltern eine Website nutzen, um sich über Schulnachrichten oder Prüfungsergebnisse zu informieren, sollten diese Links direkt auf der Startseite leicht zu finden sein und mit klaren Bezeichnungen versehen sein. Hier sind einige einfache Tipps, um sicherzustellen, dass Ihre Website den Nutzer in den Mittelpunkt stellt. Fragen Sie sich vor dem Entwerfen , wer die Website besucht. Was wollen sie tun? Erfahren Sie, wann Ihr Publikum entscheidend ist. So können Sie einige Nachforschungen über Ihre Konkurrenten anstellen und herausfinden, welche Art von Design und Taktik sie auf ihrer Website verwenden. Dann sollten sich Benutzer niemals verloren fühlen. Verwenden Sie klare Menübeschriftungen und Schaltflächen , mit denen sie sich leicht auf der Website bewegen können. Außerdem verwenden viele Benutzer auf der ganzen Welt ihr Telefon Stellen Sie sicher, dass Ihre Website auch auf Mobilgeräten gut funktioniert. Nicht nur das, verlassen Sie sich nicht nur auf Ihre eigene Meinung. Zeigen Sie die Website echten Benutzern und sehen Sie, wie sie damit interagieren. Ihr Feedback wird Ihnen helfen, das Design zu verbessern. Im Mittelpunkt einer erfolgreichen Website steht der Nutzer. Indem Sie sich auf das konzentrieren, was sie benötigen und sicherstellen, dass die Website einfach zu bedienen ist, erstellen Sie eine effektivere Website , auf die Besucher immer wieder zurückkehren. Denken Sie daran, dass es beim Design nicht nur darum geht, wie eine Website aussieht, sondern auch darum, wie sie für die Nutzer funktioniert. 30. Was ist KISS-Prinzip: Hallo, alle zusammen. Lass uns über das Kuss-Prinzip sprechen. Kiss steht für Keep it simple, stupid. Wenn wir Websites entwerfen, müssen wir sicherstellen, dass der Benutzer schnell und ohne Verwirrung findet , wonach er sucht. Wenn eine Website zu kompliziert ist, kann es sein, dass Besucher frustriert sind und sie verlassen Folgen Sie also dem Kiss-Prinzip stellen Sie sicher, dass unsere Website schnell geladen wird, einfach zu navigieren ist und klare Inhalte hat Also, wie bewirbt man sich im Webdesign. Lassen Sie uns das in ein paar Schritte unterteilen. Vereinfachen Sie zunächst das Layout. Überladen Sie Ihre Seiten nicht mit zu vielen Elementen. Ein sauberes, einfaches Layout erleichtert es Benutzern, sich auf das Wesentliche zu konzentrieren Verwenden Sie eine klare Navigation. Halte dein Menü und deinen Link einfach und unkompliziert. Habe nicht zu viele Kategorien. Ich bleibe bei den Grundlagen, damit sich die Benutzer nicht verirren. Verwenden Sie weniger Farben und Schriften. Ein einfaches Farbschema und ein bis zwei Schriften reichen für Profis in der Regel aus. Zu viele Farben oder Schriften können dazu führen, dass die Website unordentlich und schwer lesbar aussieht In den Lektionen zu Typografie und Farbpsychologie lernen wir die Vorteile von zwei Schriftarten und die 603010-Regel kennen, um die Harmonie der Farben auf unserer Website aufrechtzuerhalten Dann müssen Sie sich auf die wesentlichen Inhalte konzentrieren. Zeigen Sie zuerst das Wichtigste. einer Website für das Gesundheitswesen möchte der Patient beispielsweise wissen, ob er einen Termin vereinbaren oder einen Arzt aufsuchen soll . Sorgen Sie dafür, dass diese Informationen leicht auffindbar sind, und testen Sie sie dann mit echten Benutzern. Manchmal kann das, was wir für einfach halten , für andere immer noch verwirrend sein. Testen Sie Ihr Design immer mit echten Benutzern, um zu sehen, ob sie problemlos auf der Website navigieren und den Inhalt verstehen können. Denken Sie an die Startseite von Google. Google ist eine der einfachsten Websites, die es gibt. Nur ein Logo, eine Suchleiste und Schaltflächen. Dennoch ist es eine der effektivsten Websites, die jemals erstellt wurden. Warum? Weil es an das Kussprinzip gebunden ist. 31. Den Projektumfang kennenlernen: Hallo, alle zusammen. Lassen Sie uns über das Projekt ICO sprechen. Stellen Sie sich Project iCOV als eine Landkarte Ihrer Website-Reise vor. Es hilft Ihnen dabei, verloren zu gehen, Fehler zu machen oder zu lange zu dauern, bis Ihre Website fertig ist wichtig zu wissen, was benötigt wird , bevor Sie mit dem Entwerfen beginnen. Stellen Sie sich vor, Sie bauen ein Haus. Sie würden nicht anfangen, ohne zu wissen, wie viele Räume es braucht welches Material verwendet werden soll? Das Gleiche gilt für Webdesign. Project iCOPE hilft Ihnen dabei, die Bedürfnisse der Kunden zu verstehen Möchten sie eine einfache oder eine große Website, einen Zeitplan Wie lange hast du Zeit, um fertig zu werden? Dann das Budget, dann die wichtigsten Funktionen wie, wird es einen Blog, Online-Shop oder ein Buchungssystem geben? In der nächsten Lektion werden wir damit beginnen, unser Projekt ICO — unser erstes Web — zu definieren. Manchmal treten jedoch selbst beim Projekt Disco Herausforderungen auf. Wenn ein Kunde später mehr Lohn oder Funktionen wünscht, wird das nicht so laufen, wie du es dir vorstellst. Um solche Probleme zu vermeiden, müssen wir von Anfang an klare Erwartungen setzen. Teilen Sie ihnen den Zeit- und Kostenaufwand für das spätere Hinzufügen neuer Funktionen mit. Die Erstellung eines Vertrags ist der Weg, um diese Probleme zu lösen. 32. Was ist ein Mood-Board: Hallo, alle zusammen. Lassen Sie uns über Moodboards sprechen und darüber, warum sie so besonders sind, wenn es darum geht, Design und Inspiration zu finden und zu verstehen, was Wettbewerber tun. Was ist also ein Moodboard? Ein Moodboard ist wie eine digitale Collage, die den Stil und das Gefühl zeigt, das Sie sich Es ist eine großartige Möglichkeit, ein visuelles Brainstorming durchzuführen, visuelles Warum brauchen wir ein Moodboard? Bei Null anzufangen kann schwierig sein. Ein Moodboard hilft Ihnen dabei, Designinspirationen von anderen Websites und den Websites Ihrer Konkurrenten zu sammeln Designinspirationen von anderen Websites und den Websites Ihrer Konkurrenten zu Nicht nur das wie Banner, sondern auch Anzeigen, die sich auf Ihre Unternehmensmarke oder sogar auf ein anderes Design beziehen Ihre Unternehmensmarke oder und Ihre Kreativität anregen Es ist leicht, sich von neuen Trends ablenken zu lassen. Ein Moodboard hält Sie auf dem Laufenden, indem es Sie an Ihre ursprüngliche Vision erinnert. Sie sich vor dem Entwerfen an, was Ihre Konkurrenten Mit einem Moodboard können Sie ihr Design erstellen und vergleichen, sodass Sie etwas noch Besseres kreieren können. Lassen Sie uns also herausfinden, wie man ein Moodboard erstellt. Schauen Sie sich zunächst die Website in Ihrem Bereich an. Was magst du oder nicht? Dann hol dir Screenshots und speichere Bilder, die du inspirierst Wo finden Sie also Design-Inspiration? Erstellen Sie Moodboard. Sie können die Website Ihres Konkurrenten direkt überprüfen und nach Website-Designs auf Websites wie Dibble, Pinterest, Figma Community und BNS suchen auf Websites wie Dibble, Pinterest, Figma Community Kürze werden wir ein Moodboard und coole Designinspirationen für unsere erste Website erstellen ein Moodboard und coole Designinspirationen In Kürze werden wir ein Moodboard und coole Designinspirationen für unsere erste Website erstellen. 33. So erstellen Sie eine Farbpalette: Hallo, alle zusammen. Jetzt kennen wir Farbtheorie und Farbpsychologie. Lassen Sie uns unsere erste Farbpalette erstellen. Ich verwende diese coolers.co-Website , um die Farbpalette zu generieren Gehe zu dieser Website klicke dann auf Es ist der Generator, und ich werde diesen hier entfernen Gemäß der 603010-Regel benötigen wir nur drei Farben Ich werde zwei davon entfernen. Jetzt haben wir drei Farben. Nehmen wir unser Beispiel als Immobilien-Website. Jetzt bin ich auf dem Bild mit dem Color Emotion Guide, also werde ich diese Bild-URL im Ressourcenbereich hinzufügen. Hier für die Website von Real Estate wird das Hauptbild der Marke Vertrauen sein, wird das Hauptbild der Marke Vertrauen sein und wir können über die Klarheit nachdenken Gemäß diesem Farbbild können Sie eine der Farben als Blau und eine davon als diese orange Farbe auswählen der Farben als Blau und eine davon als diese orange Farbe Ich habe immer noch Zweifel, wir können zu Google gehen und so etwas wie realistisches Bannerdesign suchen so etwas wie realistisches Bannerdesign Dann gehe ich zu diesen Bildern auf den Bildern, wir können sehen, dass viele von ihnen die Farbe Blau haben und einige von ihnen einige Farben mit Dunkelblau und Orange Lassen Sie uns ein anderes Beispiel nehmen. Jetzt denke ich, dass wir Markenfarben oder Website-Farben für das Eiscreme-Geschäft brauchen . In diesem Fall können wir das Rot auswählen. Es ist aufregend und es wird perfekt sein. Da wir diese freundliche Farbe wählen können. Wenn wir hier hingehen und Firmenbanner für Eiscreme suchen haben wir hier ein paar Bilder und viele davon haben die Farbe Rot. Gehen wir nun zu unserem ersten Designbeispiel, das werden die Immobilien sein. Ich gehe zurück und wähle hier dieses Design aus, wähle hier dieses Design damit wir diese blaue Farbe dafür bekommen. Ich gehe zu coolers.co und füge es auf dieser Seite ein, dann klicke ich hier und ich setze auf diese Seite, dann minimiere das und jetzt haben wir unsere erste Farbe als Blau, um es auszuwählen, ich klicke hier und hier haben wir dieses Pipette-Werkzeug haben wir dieses Ich klicke einfach darauf und jetzt kann ich Das wird die blaue Farbe sein und hier müssen wir weiße Farben haben. Ich werde das als weiße Farbe einstellen. Dann klicke ich auf „Protokoll umschalten“, um diesen Eintrag zu protokollieren, sodass sich diese Farbe nicht ändert Dann werde ich auch diesen Eintrag protokollieren Dann müssen wir unsere dritte Farbe finden. Um unsere dritte Farbe zu finden, drücken wir die Umschalttaste auf der Tastatur Wir können diese Art von Änderungen an der Farbe sehen, aber in unserem Fall können wir die gelbe Farbe auswählen Wenn wir zu diesem Leitfaden für Farbemotionen gehen, können wir auch diese grüne Farbe auswählen, aber in diesem Fall wählen wir diese orange Farbe Hier wähle ich hier aus und wähle den Picker, wähle die orange Farbe Wenn ich will, kann ich die Farbe vorerst ändern, ich werde es so setzen Jetzt vergrößere ich dieses Fenster, hier wird unser Farbenbaum sein. Jetzt gibt es ein Problem. Wenn wir Farbe auswählen, müssen wir immer den Kontrast und die Lesbarkeit überprüfen den Kontrast und die Lesbarkeit Es gibt ein Tool, um diesen Kontrast zu überprüfen. Um das zu tun, gehe ich zu color.adob.com und dann kommst du Hier klicke ich auf Vs und dann haben wir dieses Barrierefreiheitstool mit Checkbox, also wähle ich es einfach aus und Hier können wir den Kontrast und die Lesbarkeit der Farben überprüfen den Kontrast und die Lesbarkeit der Farben Jetzt komme ich her und kopiere diesen Farbcode und lass ihn uns als Textfarbe Dann werde ich hier die Hintergrundfarbe auf Weiß B F ändern . Jetzt ist das Kontrastverhältnis in Ordnung, aber wenn wir diese Farbe verwenden, wird es ein Vatertest für 17 Fixel und Blofon sein Sie werden hier überprüfen, ob es fehlschlägt. Wenn wir ihn erhöhen, wird der Farbkontrast verbessert und der Test wird schneller. Jetzt müssen wir diese Farbe etwas dunkler ändern. Ich werde es so ausdrücken. Das. Der Grund dafür ist, dass wir, wenn diese Farben für unsere Website auswählen, wir diese Farben für unsere Website auswählen, dieser blauen Farbe einen Absatz hinzufügen müssen. Ich kopiere diesen Farbcode und komme hierher. Dann sehen sie, dass das Kontrastverhältnis in Ordnung ist und lassen Sie uns den Hintergrund ändern, damit er großartig aussieht. Überprüfe es auch als nächstes mit dieser orangen Farbe. Um das zu tun, setze ich diese Textfarbe auf diese und lass uns diese hinzufügen Lass uns diese Farbe als B-Farbe hinzufügen. Okay. Ich habe den Test auch bestanden, aber wenn das heller wird, wird es sein, es hat auch den Geschmack bestanden. Lassen Sie uns die Text - und Hintergrundfarbe ändern. Ich werde perfekt arbeiten und mal sehen, ob es mit der weißen Farbe funktioniert. Lass uns sehen. Wenn wir dies zur Textfarbe und zur Hintergrundfarbe als Weiß hinzufügen, bedeutet das, dass wir diese orange Farbe nur mit dunkelblauen Farben verwenden können. Wenn Sie die Farbpalette für Ihre Website auswählen , überprüfen Sie immer den Farbkontrast . Dies trägt dazu bei , die Lesbarkeit unserer Website zu verbessern Denken Sie auch daran, dass die Farben Schwarz und Weiß meistens die Farben Schwarz und Weiß zwei unserer Website-Farben sind, aber manchmal ist die schwarze Farbe etwas weniger dunkler den meisten Fällen werden diese beiden Farben jedoch die Farben sein, die wir als Hintergrund - und Testfarben verwenden. Dann müssen wir unsere Primärfarbe finden und können diese Primärfarbe entsprechend der Farbemotion auswählen . In diesem Fall wählen wir sie als Blau aus. 34. Benutzerdefinierte Webdesign-Schritte verstehen: Hallo, alle zusammen. Ich erstelle gerade einen Schritt zur Fertigstellung eines Webdesign-Projekts. Dies ist der wesentliche Schritt , den wir verwenden werden, um eine erfolgreiche Website für unsere Kunden zu erstellen Du kannst diese Liste verwenden und der ITF folgen , wenn du eine Website für echte Kunden entwirfst . Wir können diesen Schritt auch verwenden , um diesen Kurs abzuschließen Zuerst haben wir das Kundengespräch. Es dient dazu, die Ziele, Bedürfnisse und Erwartungen des Kunden zu verstehen . Dann erstellen Sie einen Vertrag. Darin werden Leistungen, Zeitpläne und Zahlungsbedingungen definiert Zeitpläne und Dann stimmt der Kunde dem Vertrag zu, wir beginnen Im ersten Schritt werden wir ein Moodboard erstellen und Designinspirationen und das Design der Wettbewerber sammeln Designinspirationen und das Design Auf diese Weise können wir überprüfen, wie unsere Konkurrenten ihre Website nutzen , um ihr Problem zu lösen und ihren Kunden zu helfen Das Erstellen von Moodboards ist wirklich wichtig, um Inspiration zu bekommen Wir kopieren also nicht nur Webdesigns, wir werden auch das Aussehen dieses Webdesigns überprüfen und eine bessere Version erstellen und eine einzigartige Website erstellen Dann müssen wir eine Sitemap erstellen. Die Sitemap dient dazu, zu verstehen, welche Art von Seiten unsere Website hat, und Struktur der Website zu verstehen und zu planen. Dann müssen wir Schriftarten für unsere Website auswählen. Bei der Auswahl von Schriften haben wir uns für eine Typografie entschieden, die zur Marke passt , und diese Schriften sollten lesbar und leicht zu verstehen sein lesbar und leicht zu verstehen Dann müssen wir Farben auswählen. Also müssen wir eine Farbpalette erstellen , die der Markenidentität entspricht. Also hast du dich an die 603010-Regel erinnert? Wir werden die 603010-Regel verwenden, um die Farbpalette zu erstellen. Dann müssen wir die Benutzeroberfläche erstellen. Es geht darum, die Benutzeroberfläche mit den Schaltflächen, dem Symbol und dem Layout zu gestalten . Also verwenden wir Figma, um diese Benutzeroberflächen zu entwerfen und indem wir ja erstellen, bevor wir die Website entwerfen, wird uns das helfen, ein klares Verständnis für die Website zu vermitteln , ein klares Verständnis für die Website unseren Kunden zu suchen Dann können wir ihre Rückmeldungen einholen und die notwendigen Änderungen vornehmen Dann haben wir Inhalte generiert. Es geht darum, Texte, Bilder und Medien für die Website zu schreiben und zu sammeln . Bei einem Kundengespräch können wir den Kunden um Inhalte bitten und ihm mitteilen, dass wir KI verwenden, um Inhalte zu generieren. Während wir also den Bereich der Website gestalten, können wir Inhalte generieren. Dann müssen wir eine Plattform wählen. In diesem Fall wählen wir also WordPress als unsere Plattform aus. Es geht darum, WordPress zu installieren und die erforderlichen Plugins zu installieren. Anschließend müssen wir die Website entwerfen. Es geht darum, die Website entsprechend dem UI-Design zu erstellen und zu installieren . Dann werden wir das Analysetool einrichten . Es geht darum, Tools wie Google Analytics, Google Recapture und Google Search Console zu installieren , um die Tracking-Leistung zu überprüfen Dann müssen wir Formulare einrichten, das heißt, wenn wir ein Kontaktformular, ein Anmeldeformular, ein Formular erstellen , müssen wir sicherstellen, dass es perfekt funktioniert Dann müssen wir die Sicherheit verbessern. Sicherheit verbessern bedeutet, das SSL-Zertifikat zu konfigurieren, Sicherheits-Plugins und Backup-Plugins zu installieren. Dann müssen wir die Geschwindigkeit der Website verbessern. Wir werden dafür Plugins verwenden. Danach können wir die Website laden und wenn Sie dann den Support anbieten , ist dies der letzte Schritt , den wir unternehmen müssen. Dies ist der ETF und die meisten dieser ETFs. Es ist besser, über die Aktualisierungen zu informieren Es ist immer besser, unsere Kunden über die Dinge zu informieren , die wir getan haben Zum Beispiel, wenn wir ein Moodboard erstellen und es mit unserem Kunden teilen können und wir ihn die Möglichkeit geben können, Abschnitte auszuwählen oder seine Meinung zu den Designs mitzuteilen. Während der Gestaltung der Website können wir mit dem Kunden sprechen und auch bei der Auswahl der Bilder einen Feed erhalten auch bei der Auswahl der Bilder einen Feed Wenn der Kunde diese Bilder nicht zur Verfügung stellt, können wir einige Bildlinks sammeln und sie mit dem Kunden teilen. Er wird das bessere Bild für die Website wählen. Ein gesundes Gespräch mit dem Kunden und das Einholen von Feedback von ihm helfen uns, unsere Websites zu vervollständigen , ohne dass viele Überarbeitungen erforderlich Lassen Sie uns mit dem Designprozess beginnen. 35. Einen Projektvorschlag und eine Anforderungs-Checkliste erstellen: Wenn Sie ein Webdesign-Projekt von einem Kunden erhalten, müssen Sie die Möglichkeit haben, klare Informationen über die Kundenanforderungen und eine kurze Vorstellung von der Website zu erhalten Kundenanforderungen und eine kurze Vorstellung , die Sie erstellen werden. Darüber hinaus sollten Sie klar definieren, was Sie Ihrem Kunden anbieten und wie viel es kosten wird und welchen Zeitrahmen das Projekt hat. Um diese beiden Aufgaben zu erfüllen, benötigen wir eine Fragebogenliste und einen Vertrag. Wenn Sie diese vollständige FEMA-Community-Datei mit benutzerdefinierten Webdesign-Ressourcen öffnen, wird der Abschnitt Project ICO In diesem Projekt Icope haben wir diese Tabelle, die als Webdesign-Anforderungen bezeichnet wird Wenn Sie Ihren Kunden per Videoanruf kontaktieren oder ihm einfach eine Textnachricht senden, können Sie diese Informationen anfordern und die Antwort der Kunden erhalten Auf diese Weise erhalten Sie alle Informationen, die Sie benötigen, um eine individuelle Website für Ihren Kunden zu entwerfen. Wenn Sie diese Checkliste für die Anforderungen an das Webdesign ausfüllen, verfügen Sie über alle Informationen, die Sie benötigen, um mit dem Projekt zu beginnen Auch diese Datei kann bearbeitet werden. Sie können diese Fragen Ihrem Kunden stellen oder Sie können diese Datei mit Ihrem Kunden teilen , indem Sie auf diese Schaltfläche zum Teilen klicken und dann die Option auswählen, die jeder bearbeiten kann Klicken Sie dann auf Speichern und dann auf Link kopieren Dann lassen Sie uns das in einem neuen Fenster öffnen . Jetzt kann der Kunde diese Datei bearbeiten , wenn er sich bei Figma anmeldet. Wenn Sie dies tun, können Sie auch eine neue Figma-Datei erstellen Gehen wir zu Figma und klicken wir auf Neue Design-Datei. Dann kannst du einfach hier klicken und Strg oder Befehl C drücken und es dann hier einfügen Auf diese Weise werden Sie das Projekt klar verstehen. Hier können Sie den Projektnamen wie Doktor John Cleaning wie folgt hinzufügen . Dann können Sie diese Datei mit Ihren Kunden teilen. Dann können Sie einfach hier klicken und diese Antwort bearbeiten , wenn er diese Fragen beantwortet. Nachdem Sie all diese Informationen erhalten haben, können Sie einen Projektvorschlag erstellen. Dies ist ein einfacher, aber effektiver Projektvorschlag , den Sie für Webdesign-Projekte verwenden können und dem Kunden ein klares Verständnis darüber vermitteln können, was Sie tun und wie viel es kosten wird und welche Art von Zahlungsmethode Sie akzeptieren, solche Dinge. Lesen Sie den Vorschlag und Sie müssen die Punkte in diesen Klammern entsprechend Ihrem Projekt ändern . Der einfachste Weg ist, die Befehlstaste oder die Strg-Taste F zu drücken . Suchen Sie dann nach dieser Klammer wie folgt. Dann können Sie die Stellen sehen , an denen sich Klammern befinden. die Zahlungsstruktur für die Projektdauer ändern den nächsten Lektionen können Sie nicht nur die Projektergebnisse und , oder Sie können all diese Informationen entsprechend Ihrem Projekt bearbeiten In den nächsten Lektionen können Sie nicht nur die Projektergebnisse und die Zahlungsstruktur für die Projektdauer ändern, oder Sie können all diese Informationen entsprechend Ihrem Projekt bearbeiten. Ich werde Ihnen auch zeigen, wie Sie sie für unser erstes Projekt bearbeiten Ich werde diesen schließen. Auch in dieser Checkliste für Webdesign-Anforderungen können Sie, wenn Sie weitere Spalten oder weitere Informationen hinzufügen müssen, einfach das Pro auswählen und Strg C oder Befehl C und Strg oder Befehl V drücken Befehl C und Strg oder Befehl , um es einzufügen Gehen Sie die Anforderungen an das Webdesign und den Projektvorschlag durch und den Projektvorschlag Auch wenn Sie der Meinung sind, dass diese Vorlagen für Webdesign-Anforderungen oder Projektvorschläge weitere Informationen oder Verbesserungen benötigen , können Sie mir einfach eine Direktnachricht senden oder sie empfehlen . Ich werde sie dann aktualisieren, falls es sich um eine notwendige Änderung 36. Projekt 01-Checkliste: Hallo zusammen. Dies ist unser Presseprojekt und wir werden alles, was wir hier lernen, anwenden alles, was wir hier lernen, und eine maßgeschneiderte Website von Grund auf neu entwerfen. Dieses Projekt ist fiktiv, was bedeutet, dass alle Details dieses Projekts nur zu Bildungszwecken dienen und die Inhalte, die wir für diese Website verwenden, fiktive Inhalte sind Als ersten Schritt müssen wir Informationen sammeln und diese Checkliste Anforderungen an das Webdesign ausfüllen Ich habe es schon gemacht und lass uns eins nach dem anderen durchgehen. Wenn Sie versuchen, diese Informationen bei echten Kunden für Ihr echtes Projekt zu sammeln , Sie immer deren Meinung einholen und verstehen, was sie benötigen. Dann gib dir Vorschläge. Das ist wirklich wichtig. Versuche nicht, Vorschläge zu machen oder dir Versionen davon zu geben. Hören Sie sich einfach ihre Anforderungen an und geben Sie dann Verbesserungsvorschläge. Auf diese Weise haben Sie eine hervorragende Kommunikation mit Ihrem Kunden und können die Informationen sammeln. Hier wird zunächst unsere Frage lauten, was ist der Name des Kunden? In diesem Fall lautet der Name des Kunden Doktor John Bennett und wie lautet Ihr Firmenname Der Firmenname ist JB Family Clinic, und wie lautet Ihre E-Mail-Adresse, JB Clinic Haben Sie eine Website? Falls ja, wie lautet die URL? Hier hat dieser Kunde keine bestehende Website, also habe ich ihn als NANA nicht verfügbar eingestellt Dann haben wir hier einen Abschnitt mit der Projektübersicht. Was ist der Zweck der Website? Der Zweck besteht darin, Gesundheitsinformationen bereitzustellen , Terminanfragen zu ermöglichen, Gesundheitsressourcen für Familien gemeinsam zu nutzen, Sichtbarkeit der Klinik zu erhöhen und Verbindungen zu den Gemeinden zu fördern. Dann haben wir, wer ist Ihre Zielgruppe? Die Zielgruppe sind einheimische Familien und Einzelpersonen, die zuverlässige Gesundheitsdienste suchen , und Eltern, die nach pädiatrischer Versorgung, psychischer Gesundheit und familiärem Wohlbefinden Dann haben wir, was das Hauptziel der Website ist. Die Hauptziele sind die Verbesserung der Online-Präsenz der Kunden, um neue Patienten zu gewinnen, verfügbaren Dienstleistungen und Spezialgebiete der Familien klar zu kommunizieren und Spezialgebiete der Familien dann Informationsmaterialien zu Themen der Familiengesundheit bereitzustellen . Dann fragen wir. Gibt es Websites, deren Aussehen Ihnen gefällt , und hier haben wir eine Website, auf der URR Ihren Kunden immer nach einer Website fragt, die seiner Idee ähnelt Dies ist der beste Weg, um ihre Anforderungen zu verstehen. Dann können Sie fragen, welchen Designstil Sie bevorzugen. Vielleicht versteht der Kunde diese Frage, sodass Sie diese Fragen überspringen können . Wenn er sich mit Websites auskennt, wird er sagen, welche Art von Website er möchte. In diesem Fall sollten Sie Websites sauber und modern gestalten und haben Sie dann Markenfarben oder Richtlinien? In diesem Fall wird es nicht verfügbar sein. In den meisten Fällen erstellen Sie jedoch Websites für bestehende Marken, was bedeutet, dass Sie die Farbrichtlinien befolgen und deren eigene Logos verwenden müssen. In einigen Fällen werden sie ihr Unternehmen umbenennen. In diesem Fall geben sie Ihnen keine Markenfarben oder andere Richtlinien Hast du dann ein Logo? Es ist nicht hier drin, wir haben Inhalte und Funktionen. Wir haben Fragen wie viele Seiten benötigt Ihre Website? In diesem Fall müssen Sie Ihre Nachforschungen anstellen, bevor Sie den Kunden kontaktieren. Schauen Sie sich einfach ähnliche Websites und machen Sie sich ein Bild von der Website. Dann finde heraus, welche Art von Seiten sie haben und was die wichtigsten Seiten sind und ähnliches. Aber wenn Sie keine Ideen haben, fragen Sie sie einfach nach ähnlichen Websites, die ihnen gefallen. Auf diese Weise können Sie sich ein Bild machen. Wenn sie in diesem Fall jedoch keine ähnlichen Websites oder Beispielwebsites haben , können Sie selbst recherchieren und Websites finden, die sich auf diese Nische beziehen , und herausfinden, was sie am wichtigsten machen Wir werden diese Websites nicht nachahmen Wir werden diese Designinspirationen sammeln und eine einzigartige Website erstellen Jetzt haben wir die Namen der Seiten. In diesem Fall haben wir den Home About Contact Blog unserer Anbieter. Dann kannst du fragen, ob du Earl-Inhalte zur Verfügung stellen wirst. In diesem Fall zeige ich Ihnen, wie Sie Inhalte mit KI erstellen. Jetzt werden KI-Tools wie AGPT Google Bad eine große Rolle spielen und uns helfen, großartige Inhalte für Websites zu erstellen Wenn Kunden also keine Inhalte bereitstellen, können wir Inhalte für die Website generieren In zukünftigen Lektionen werde ich Ihnen zeigen, wie Sie professionell und am besten mit KI chatten und die gewünschten Details generieren können. Okay. Dann haben wir: Benötigen Sie spezielle Funktionen, wenn sie E-Commerce-Funktionen wie Online-Ito benötigen E-Commerce-Funktionen wie Online-Ito oder wenn sie den Chat-Bot hinzufügen möchten, können Sie sich anhand dieser Fragen Klarheit verschaffen. Wenn sie jedoch einige Funktionen wünschen, denen Sie nicht wissen, von denen Sie nicht wissen, wie man sie erstellt, sagen Sie ihnen, ich werde darüber recherchieren und mich bei Ihnen melden. Dann kannst du als Beispiel über die Funktionen recherchieren , wenn sie ein Chat-Board wollen und du kannst darüber recherchieren und , dass du es tun kannst, oder wenn es mehr kostet, kannst du ihnen sagen, dass es kosten wird. Und so geht man mit dieser Art von Frage um. Und wir haben ein Verhör, brauchst du irgendwelche In diesem Fall benötigen Sie Terminanfragen und Kontaktformulare. Wir werden in diesem Projekt Formulare erstellen, und dann haben wir technische Details. Ich sage, haben Sie eine bevorzugte Plattform? In diesem Fall wird es drücken, aber wenn der Kunde mit einer anderen Plattform wie Webflow, PFI Weeks Studio oder einfach nur HTML vertraut anderen Plattform wie Webflow, PFI Weeks Studio oder einfach nur Sie können mit ihnen sprechen, und wenn Sie diese anderen Plattformen nicht kennen, können Sie ihnen Vorschläge machen, warum sie sich für Wordpress entscheiden sollten . Wenn sie nicht damit einverstanden sind, können Sie das Projekt trotzdem und lernen, während Sie die Website erstellen Dann haben wir Fragen wie, haben Sie einen Domainnamen und ein Hosting? In diesem Fall ist es das, aber manchmal wissen Kunden einfach nichts über Domainnamen und Hosting oder einige Kunden denken, dass wir auch Domainnamen und Hostings anbieten werden Sie müssen klar definieren, dass Sie diese Dinge nicht bereitstellen und dass sie sie bereitstellen müssen Wenn Sie jedoch Ihren eigenen Hosting-Server und Ihre eigene Domain als Abonnement anbieten , können Sie sie darüber informieren und im Vertrag können Sie dies deutlich angeben, damit sie verstehen, wie viel es kosten wird , und wenn sie damit einverstanden sind, können Sie Ihr eigenes Hosting bereitstellen. Wenn ich eine Website für meine Kunden erstelle, werde ich persönlich den Domainnamen und das Hosting fragen, um die Website zu erstellen. Dann haben wir die Projektfrist. Sie können einfach fragen, wann die Website gestartet werden soll. Die meisten Kunden werden innerhalb einer Woche, innerhalb von drei Tagen, innerhalb von zwei Wochen sagen , aber wir werden nicht in der Lage sein, innerhalb von drei Tagen eine benutzerdefinierte Website zu erstellen , da wir die qualitativ hochwertige Website bereitstellen werden , die ihnen hilft, ihre Marke online zum Leuchten zu bringen. Sie erklären ihnen den Zeitrahmen und geben mindestens drei bis vier Wochen als Projektabschluss an mindestens drei bis vier Wochen als und versuchen , dies innerhalb von zwei Wochen zu tun. Auf diese Weise werden Sie einen zufriedenen Kunden haben und dieser wird Ihnen bei seinen nächsten Website-Designs Ihren Service anvertrauen . Dann haben wir ein Budget, Sie können einfach Ihr Budget für dieses Projekt festlegen. Wenn Sie also mit einem einzelnen Kunden und nicht mit einem Unternehmen zusammenarbeiten, werden diese meistens als erste Frage stellen, als erste Frage stellen wie viel es kosten wird. Sie erhalten lediglich Informationen darüber, welche Art von Website, wie viele Seiten sie benötigen und welche Funktionen sie haben möchten. Und wenn Sie dann eine fünfseitige Website für 1.000$ erstellen, sagen Sie ihnen, dass Sie 1.200 benötigen, und dann werden sie versuchen, mit Ihnen zu verhandeln und wenn sie es für tausend aushandeln, können Sie das innerhalb Ihres Budgets tun In diesem Fall nur um 7:50 Uhr als fiktive Zahl. Aber wenn Sie eine Marke haben und Kunden zu Ihnen kommen, indem sie sich Ihr Video ansehen oder Ihre Inhalte überprüfen, können Sie von diesem Kunden mehr verlangen Okay. Jetzt haben wir die Details und in der nächsten Lektion werden wir einen Vertrag für diese Checkliste erstellen 37. KI für Webdesign verwenden: Hallo, alle zusammen. KI spielt eine große Rolle bei Webdesigns und anderen internetbezogenen Bereichen. Zu wissen, wie man KI einsetzt, ist also ein großer Pluspunkt und hilft uns, innerhalb weniger Minuten das beste Ergebnis zu erzielen. Vor KDG PD und Google Bart, das jetzt JaMinir heißt, nutzten wir Websites wie Lam ISM Text, um unserer Website Inhalte hinzuzufügen , die wir für den Kunden entwerfen , weil Kunden oft keine Inhalte für uns bereitstellen, sodass wir Dummy-Text hinzufügen müssen Aber nach 22 22 können wir KI-Tools wie HAG PT und Jamin verwenden , um Inhalte für das Projekt unserer Kunden zu generieren Nicht nur das, dieses Tool wird uns helfen, unseren Arbeitsaufwand zu reduzieren und Informationen zu erhalten , die wir nicht haben und nicht kennen Als Beispiel habe ich vor Kurzem ein Webdesign-Projekt von Aviation Company bekommen . Ich wusste nichts über Luftfahrtunternehmen und die Dinge , die ich der Website hinzufügen muss. Ich verwende einfach JAG PT, um den Inhalt der Website zu generieren, und Cran war sehr glücklich darüber und er hat nur ein paar Dinge entsprechend seiner Version geändert Lassen Sie uns etwas über JAG PT lernen, um das zu generieren, was wir wollen. Ich gehe einfach zu HGBT und hier können wir das Formular eingeben. Fügen Sie einfach Prompt Life hinzu, um Heroon-Inhalte für die Website im Gesundheitswesen zu generieren , damit wir keine bessere Leistung erzielen Also lass uns das versuchen. Okay, hier sind die DTs. Aber wenn wir die richtigen Details hinzufügen und das DDS hinzufügen, das wir bereits kennen, wird das Ergebnis besser sein Also lass uns einen neuen Chat ausprobieren und versuchen, ihn mit dem Abschlussball zu generieren Ich verwende also Vorversionen dieser Tools, und Vorversionen werden für unseren Job ausreichen. Also hier ist die einfache Eingabeaufforderung, die ich immer verwende. Also zuerst müssen wir diesem GPT eine Rolle zuweisen. Dann sollten wir sagen, was wir generieren wollen, und dann haben wir drei Möglichkeiten Wenn wir also diese Informationen hinzufügen, müssen wir alles hinzufügen, was wir wissen , und wir müssen alles hinzufügen, was wir wissen, um bessere Ergebnisse zu erzielen. Also lass es uns versuchen. Zunächst möchte ich sagen, dass Sie ein Webdesigner sind. Dann entwerfen Sie eine Website für die HealthCare-Klinik namens Clinical JB Family Clinic, und dann müssen wir die Aufgabe zuweisen Ich möchte, dass du Helden-Sektions-Takes mit gutem CTA erstellst . CTA ist ein Aufruf Und habt ihr daran gedacht, dass wir Helden-Sektionen auf FICMA Autoayout und Pigma erstellen FICMA Autoayout und Pigma also müssen wir dann sagen , was darin enthalten sein soll Konzentrieren Sie sich wie diese Website darauf, das Online-Personal der Klinik zu verbessern, um neue Versionen anzuziehen anzuziehen Wenn es also mehr Informationen gibt, können wir sie in Zukunft hinzufügen. Ich werde sie vorerst hinzufügen. Dies werden die Eingabeaufforderungen sein, also drücken wir die Eingabetaste und sehen uns den Unterschied an Okay, ich glaube, wir haben drei Optionen. Konzentrieren wir uns hier nur auf die erste, Gesundheit, unsere vorrangige Betreuung von Familien, ein Besuch nach dem anderen und das ist die Überschrift und wir haben eine tolle Unterüberschrift in der JB Family Wir kümmern uns umfassend um Ihre ganze Familie und dann haben wir auf Knopfdruck einen Termin gebucht Gehen wir zum einfachen Abschlussball , den wir bereits erstellt haben. Gesundheit ist unsere Priorität. Das war's, dann hat es nur kleine Sub-Peddin bereitgestellt und es hat das nicht personalisiert und es hat keine besseren Optionen angeboten, aber hier haben wir bessere und Also müssen wir immer die Rolle zuweisen, dann die Aufgaben zuweisen und nach drei Optionen fragen Auf diese Weise erhalten wir also diese Art von Ergebnis und können das bessere auswählen. Der Punkt ist also, wenn Sie denken, nur Text hinzuzufügen und Ergebnisse vom HGBTO Jami zu erhalten , das wird nicht funktionieren, Sie müssen es immer spezifizieren, und auf diese Weise erhalten Sie bessere und In zukünftigen Lektionen werden wir also viele Eingabeaufforderungen für GBT verwenden, und wir werden auch versuchen, Jamini zu verwenden. 38. Einen Projektvorschlag erstellen: Jetzt ist es an der Zeit, einen Vertrag für unser Projekt zu erstellen. Ich gehe zu unserem Community-Profil und hier haben wir einen Projektvorschlag. Ich kopiere und klicke einfach hier füge es dann so ein. Okay. Jetzt werde ich es hier hinstellen. In Ordnung. Jetzt müssen wir zuerst den Namen des Projekts hinzufügen. Name wird Firmenname sein. Dann müssen wir den Namen des Freelancers hinzufügen. Ich werde hier meinen Namen hinzufügen. Ich muss eine E-Mail hinzufügen. Ich werde einfach eine gefälschte E-Mail wie test at mail.com hinzufügen und hier müssen wir den Namen des Kunden und unsere Webdesign-Anfrage hinzufügen, wir lassen den Kundennamen kopieren und so einfügen Lassen Sie uns nun die Projektübersicht erstellen. Um diesen Teil zu erstellen, können wir uns die Hilfe des Chats G PT holen. Gehen wir zu GVT und klicken Sie auf Neuer Chat. Also hier ist unsere Aufforderung. Sie können diese Eingabeaufforderung im Ressourcenbereich überprüfen . Sie erhalten zwei weitere Eingabeaufforderungen Hier ist die Rolle also Webdesigner, und dann gehen wir zu den Anforderungen an die Hier erstellen Sie eine Website für B tenING und ich möchte, dass Sie Projektübersicht für die Vertrags-Website der JB Family Clinic erstellen Vertrags-Website der JB Family Clinic Dann fügen wir hier weitere Informationen hinzu. Hier können wir Informationen wie den Zweck der Website hinzufügen . Ich kopiere die Kundenantwort so und füge sie dann ein. Lassen Sie uns diesen Teil zuerst durchblättern, so wie diesen, dann hier rein. Was sind die Hauptziele? Lass uns diesen Teil kopieren und ihn hier so einfügen. Dann können wir Nummer fünf bekommen und das wird in Ordnung sein. Jetzt muss ich auch sagen, mach es nur 150 Wörter und lass uns die Eingabetaste drücken. Okay, hier ist die erste Option. Also scheint es nicht gut zu sein. Wir können also auf Nachricht bearbeiten klicken. Jetzt gehe ich hier und weiter, ich werde so tun, als ob ich möchte, dass Sie eine Projektübersicht für den Kontakt zur JB Family Clinic-Website erstellen eine Projektübersicht für den Kontakt zur JB Family Clinic-Website erstellen, die ich für Kunden hier einschicken möchte Fügen wir nur ein Fünftel von 100 Wörtern und wir sprechen über die notwendigen Details, die notwendigen Details, dann klicken Sie auf Zustimmung und lassen Sie uns sehen Die erste Option ist, dass die Website der JB Family Clinic auf fünf Seiten Gesundheitsinformationen bietet, Terminanfragen erleichtert und Ressourcen zur Familiengesundheit anbietet Die Website zielt darauf ab, die Sichtbarkeit der Klinik zu verbessern, neue Patienten anzuziehen und ihre Dienstleistungen und Spezialgebiete hervorzuheben wichtigsten Elementen gehören eine leicht zu bedienende Oberfläche und Bildungsinhalte, um Verbindungen zur Gemeinschaft zu fördern. Das wird perfekt sein. Ich werde es einfach kopieren und gehen wir hierher und lassen Sie uns dieses Projekt so ersetzen. Als Ergebnis liefern wir die Figma-Mockups und dann liefern wir voll funktionsfähige und responsive Website hier eine voll funktionsfähige und responsive Website, ich füge WordPress hinzu, weil wir diese Website auf WordPress erstellen werden diese Website auf WordPress erstellen werden Machen wir es in technischen Fragen zu einer WordPress-Website , wir müssen eTAF hinzufügen und diesen ersten Ich werde es entfernen. Und hier werden wir Google Analytics für und die Google Search Console einrichten , dann die Ladegeschwindigkeit und die Reaktionsfähigkeit auf Mobilgeräten optimieren, dann bekommen wir das Tag-Formular und hier das Terminanfrageformular, Terminanfrageformular, und hier werden wir die Websicherheit verbessern Sie können diese technische Integration also an Ihr Projekt anpassen Also hier ist der Hinweis, dass wir das tun werden. Sie können diese klar verstehen, indem Sie die Anforderungen an das Webdesign und dann die Anforderungen für die Projektinitiierung überprüfen das Webdesign und dann die Anforderungen . In diesem Fall haben wir bereits das Design der Website oder ähnliche Beispiele genannt , sodass wir nur den Zugriff auf die Wörter Webserver und Website protokollieren müssen . Website bedeutet WordPressbd lässt sich ändern wie Wordpressabard, Wenn Wordpress noch nicht installiert ist, können Sie diesen Teil entfernen Dann benötigen wir also keine Anforderungsdokumentation , da wir sie bereits haben. Ich werde den Punkt streichen, dass Sie dies an Ihre Anforderungen anpassen können . Hier haben wir den Abschnitt für den Kundendienst neue Funktionen und neue Seiten sind zusätzliche Gebühren und Diskussionen erforderlich. Ich werde jedoch die grundlegende Wartung der Website und kleinere Updates nach der Fertigstellung anbieten grundlegende Wartung der Website und . Wenn Sie also keine kostenlose Grundwartung der Website oder nach Updates anbieten, können Sie das BDS hier hinzufügen Dann haben wir den bemannten Zustand. Hier haben wir also die geschätzte Zeit für die Fertigstellung des Projekts. Machen wir es auf vier Wochen und dann auf den Rahmen und die Restrukturierung Wenn Sie also eine Website erstellen, zahlen Sie immer im Voraus. Normalerweise erhalte ich 50% der Vorauszahlung. Lassen Sie uns das hier ändern, wir haben 375 und nach erfolgreichem Start der Website werden es wir haben 375 und nach erfolgreichem Start der Website werden 375 sein, und die Projektsumme beträgt 750 Dann müssen wir die Zahlungsmethoden hinzufügen. In meinem Fall akzeptiere ich Zahlungsmethoden Paneer und Western Union Wenn Sie Payal haben, können Sie auch Payal hinzufügen, aber ich biete nur Zahlungsmethoden an, dann haben wir Stornierungsbedingungen Hier heißt es also, wenn das Projekt nach Beginn vom Freelancer storniert wird , wird dem Kunden das Geld vollständig zurückerstattet , und zwar auf dieselbe Weise, wie Bei einer Stornierung durch den Kunden Zahlung für die gesamte in das Projekt investierte Zeit fällig , unabhängig vom Verwendungszweck Der Projektvorschlag ist also ein seriöser Brief immer überprüfen sollten, bevor Sie ihn abschicken. also in diesem Fall Wenn ich also in diesem Fall das Projekt storniere, werde ich dem Kunden das Geld vollständig zurückerstatten und wenn Kunden ihr Projekt stornieren, werde ich die Vorauszahlung für die Kunden nicht Passen Sie diese Richtlinien an Ihr Arbeitsmuster und Ihre Kunden an, dann haben wir einen Bereich für Eigentumsrechte Nach vollständiger Bezahlung geht verbundene geistige Eigentumsrecht mit der Website verbundene geistige Eigentumsrecht auf den Kunden über. Dann haben wir diese Nachricht wie den Vorschlag, eine Beschreibung der erbrachten Dienstleistungen und der erwarteten Ergebnisse des Projekts Wenn Sie Patienten haben oder zusätzliche Informationen benötigen, mich gerne kontaktieren. Ich freue mich über die Gelegenheit, gemeinsam an Design und Entwicklung zu arbeiten , und hier müssen wir den Namen der Website hinzufügen. Hier ist der Name der Website, das Unternehmen. Fügen wir einen Website-Namen wie diesen hinzu und wenn wir möchten, können wir die Website hinzufügen. Sie können jeden dieser Punkte hinzufügen oder entfernen. Wenn Sie neue Bedingungen hinzufügen möchten, können Sie einfach die Eingabetaste drücken und Sie erhalten diese Art von Punkt. Und wenn Sie hier einen weiteren Artikel hinzufügen möchten, müssen Sie hier klicken und auf diese Eigenschaft klicken. Dann können Sie es einfach duplizieren, indem Sie Strg C oder Befehl C und dann den Steuerbefehl wie folgt drücken . diesem Projektvorschlag, der mit automatischem Layout entworfen wurde haben Sie bereits eine Vorstellung vom automatischen Layout, und Sie können ihn ganz einfach nach Belieben bearbeiten. Und nachdem Sie diesen Projektvorschlag fertiggestellt haben, können Sie auf den Vorschlag klicken und auf der rechten Seite nach unten scrollen. Wenn Sie nach unten scrollen, sehen Sie hier den Exportbereich Wählen Sie den Typ als PDF aus und klicken Sie auf die Schaltfläche Projektvorschlag exportieren. Dieser Projektvorschlag hat also eine Größe von A 4. Klicken Sie darauf, es wird so aussehen, und Sie können es einfach an Ihren Kunden senden und ihm mitteilen, ob er Änderungen benötigt. Und nachdem Ihr Kunde mit diesen Details einverstanden ist, können Sie mit der Arbeit beginnen. 39. Designinspirationen sammeln: Hallo, alle zusammen. Es ist Zeit , unser Moodboard zu erstellen Um unser Moodboard zu erstellen, müssen wir Designinspirationen finden und In diesem Projekt haben wir bereits Designinspirationen, die uns der Kunde Lassen Sie uns eins nach dem anderen von diesen UR öffnen Okay, jetzt müssen wir einen Screenshot dieser Website machen. Dazu können wir den Google Com-Erweiterungsaufruf und die GoFullPage-Erweiterung verwenden, zu Google gehen und nach der GoFuulPage-Erweiterung suchen Dann erhalten Sie Comm Webstollin, klicken Sie darauf, und hier sehen Sie „Zu Chrome hinzufügen“. Klicken Sie Ich habe es schon gemacht. Sie werden diese Art von Kamerasymbol im Chrome-Browser sehen Kamerasymbol im Chrome-Browser Rufen Sie die Webseite auf und klicken Sie darauf , um das vollständige Design der Website zu erfassen. Hier haben wir ein Problem. In diesem Screenshot haben wir keine Header-Teile, um die Header-Teile abzurufen. Versuchen wir es erneut. Der Header-Teil wird nicht angezeigt, aber es ist okay. Zuerst lade ich es als PNG herunter, ich klicke einfach hier und dann kann ich Shift Command 4 drücken und es einfach so markieren oder auswählen, dann einfach die Maus loslassen und schon wird der Screenshot angezeigt. Wenn Sie jedoch Windows verwenden, können Sie ein Tool namens InpinTOL verwenden Gehen Sie einfach zu Windows und suchen Sie inPintolo, jetzt gehen wir zur nächsten Klicken Sie auf diese Erweiterung, um die gesamte Seite zu öffnen, und das Design wird automatisch abgerufen Laden Sie es dann herunter und lassen Sie uns das für diese EAL-Websites tun Nun, das ist die Website der Konkurrenz, aber das reicht nicht aus um mehr Designinspirationen zu sammeln, es ist besser, sich ein gutes Bild von der Website zu machen. Es gibt Websites, auf denen wir Designinspirationen sammeln können. Einer von ihnen ist Dribble. Lass uns zu Dribble gehen. Und wenn du kein Dibble-Konto hast, kannst du auf Anmelden klicken und ich habe bereits ein Dribble-Konto, also werde ich mich anmelden Okay, ich habe mich in mein Drivel-Konto eingeloggt Dann kann ich hier nach der Familienklinik suchen, weil wir eine Website für die Familienklinik entwerfen werden Suchen Sie hier nach einer Familienklinik, Moderator. Wählen Sie dann hier die Kategorie Webdesign aus. Dann die Art der Designs, finde die besten Designs und öffne sie in neuem Fenster. Klicken und klicken Sie auf Link in Nutab öffnen und tun Sie es einfach. Wenn Sie keine Website sehen, die sich auf UNH bezieht, holen Sie sich einfach andere Designs, die sich auf Rf beziehen In diesem Fall kann ich eine Website für das allgemeine Gesundheitswesen, eine Website für Zahnmedizin und andere Websites wie diese finden Zahnmedizin und andere Websites wie diese Lass uns öffnen, okay. Jetzt werde ich hier verwandte Keywords bekommen. Also zuerst Krankenhaus, Zahnarzt, Arzt, Zahnarzt Ich klicke einfach auf Krankenhaus eins, und hier haben wir das Krankenhausdesign. Also können wir diesen Filter auch ändern , aber ich werde ihn als beliebt einstellen. Und hier werde ich diese Designs wieder öffnen. Hier ist eine zahnärztliche Website, und dann gehen wir zum Arzt und okay. Und dann werde ich wieder auf diese Klinik klicken. Jetzt werden wir uns um das Design der Klinik-Website kümmern. Okay, recherchieren Sie einfach und finden Sie das Design der Website. Bisher habe ich nur wenige Designs gefunden, also gibt es von hier nichts zu bekommen, also werde ich dieses überspringen und den Tab schließen. Dann lass uns hier nach unten scrollen. Und hier haben wir eine ganzseitige Version. Klicken Sie darauf und dann mit der rechten Maustaste, dann klicken Sie auf Bild speichern unter und speichern Sie es. All diese Designs werden Ihren Download-Ordner heruntergeladen. Und wenn Sie nach unten scrollen, werden Sie auch andere Designs dieses Designers sehen. Denken Sie also immer daran, dass wir uns diese Designs holen , um uns vom Design inspirieren zu lassen, nicht nur um sie zu kopieren und einzufügen. Suchen Sie also nicht einfach Design anderer Leute und versuchen Sie, es zu kopieren und sich ihnen zu stellen. Lassen Sie sich einfach vom Design inspirieren und erstellen Sie Ihre eigene Version. Und ich werde dir zeigen, wie es geht. Okay, lass uns nach unten scrollen. Hier haben wir eine vollständige Seitenvorschau, klicken Sie darauf und klicken Sie mit der rechten Maustaste. Wir können es einfach speichern. Dann haben wir hier auch diese und hier ist eine weitere Website. Wir können sparen. Okay, kopiere das, zwei , okay, das war's. Dann können wir Website-Designs von ihnen für uns finden. Also werde ich in Google nach Tmforus suchen und wir werden auf themforus.net gehen, ich klicke einfach darauf ich Okay, hier kann ich nach Familie Krinic suchen und auf Suchen klicken Okay. Jetzt können Sie Websites sehen, die eine gute Bewertung haben. Öffnen Sie sie einem neuen Fenster und lassen Sie uns einige davon so öffnen. Ja. Ja, suchen wir nach Klinik , um die Website der Klinik zu finden. Hier haben wir eine Zahnklinik, aber hier haben wir eine andere Klinik, auf die ich klicke. Diese Vorlagen werden also bereits von Benutzern verwendet, was bedeutet, dass diese Vorlagen nicht einzigartig sind, aber wir können Abschnitte und deren Gestaltung der Website finden. Verschaffen Sie sich einen Einblick in die Designs , die wir auf unserer Website verwenden sollten. Klicken Sie von hier aus einfach auf Live-Vorschau und hier erhalten Sie die Live-Vorschau der Website. Hier haben wir einige Demos. Klicken Sie jetzt mit der rechten Maustaste auf diese Demos und holen Sie sich diese Designs wie dieses Hier haben wir das Design. Jetzt können wir auf diese verdammte Seite klicken, sie anschließen und einen Screenshot des Designs machen anschließen und einen Screenshot des Designs Ich lade es herunter und hier haben wir das nächste Überqueren Sie einfach diesen Stay-Selector und scrollen Sie nach unten. Okay. Klicken Sie dann auf diese Chrome-Erweiterung , um das Design zu erhalten, und laden Sie es herunter. Wir haben diesen. Lassen wir es auch entwerfen. Und diesen haben wir auch. Scrollen wir nach unten und klicken Sie auf Herunterladen. Dann haben wir eine andere Website. Klicken Sie auf Live-Bewertung, und hier ist die Live-Bewertung. Klicken Sie einfach auf diese R-Schaltfläche, um das Design zu öffnen. Lass uns weitermachen Okay, jetzt werde ich all die Links entfernen, von denen ich bereits die Screenshots erhalten habe. Okay. Eine weitere Website, auf der wir Designinspiration finden können, ist Ban dot O Bans Ich werde Family Clinic suchen Von hier aus werden wir Websites sehen, die sich auf Familienkliniken beziehen Ich werde sie so öffnen Schauen wir uns diese Designs an. Dies ist kein Website-Design, und hier ist das Website-Design. Holen Sie sich den Screenshot von hier, klicken Sie einfach darauf und verwenden Sie dann Go Full Page , um den Screenshot zu erhalten. Lass uns das sehen. Diese Website ist nicht auf Englisch, aber wir können uns trotzdem beim Design inspirieren lassen. Lass uns das auch herunterladen. Doppelklicken Sie und vergrößern Sie es Klicken Sie dann auf GoFullPage und dann auf Bild herunterladen Wir haben die Website der Zahnklinik, also lassen Sie uns auch diesen Screenshot davon machen Okay. Jetzt können wir uns von Pinterest inspirieren lassen Gehen wir zu PinterSTT. Um Designs von Pinterest zu bekommen, musst du dich bei Pinterest einloggen, ich bin auf meinem Pinterest-Account ich bin Jetzt klicke ich auf diese Suchschaltfläche und suche hier nach der Family Clinic-Website Dann solltest du Pins in Pins ändern und hier haben wir Website-Designs Klicke auf diese Designs und ich werde einfach auf das Design klicken und es so in ein neues Fenster stellen, dann mit der rechten Maustaste klicken, auf Bilder speichern und speichern. Ich werde hier klicken. Es ist nicht gut. Öffne sie in einem neuen Fenster wie diesem. Es ist eine offene Designfamilie. In Pin Trust können Sie diese Bildersuche verwenden, um ähnliche Website-Designs zu erhalten. Lass es uns so suchen. Wenn Sie das tun, erhalten Sie ein ähnliches Website-Design, also werde ich einige davon so öffnen und sie dann in einem neuen Fenster öffnen. Okay. Jetzt werde ich sie herunterladen, indem ich mit der rechten Maustaste klicke und dann auf Bilder speichern klicke. Ordnung. Jetzt haben wir genug Designs, um ein Mode-Board zu erstellen. also in der nächsten Lektion Lassen Sie uns also in der nächsten Lektion das Mode-Board erstellen. 40. Eine Stimmungsbasis erstellen: Hallo zusammen, es ist Zeit, unser Moodboard zu erstellen. Ich werde die Leinwandgröße verringern, indem Strg-Taste drücke und das Mausrad verwende. Dann werde ich hier einen Rahmen erstellen. Klicken Sie einfach auf den Rahmen und klicken Sie so und lassen seine Größe so erhöhen , dass wir ihn tatsächlich von hier aus hinzufügen, damit wir mehr Platz haben. Dann werde ich es in Smooth Ball umbenennen. Mehrere Leerzeichen. Okay. Jetzt können wir die Füllfarbe ändern, also den Rahmen isolieren und die Feldfarbe so ändern , dass sie etwas dunkler wird Okay. Jetzt haben wir all diese Screenshots, also werde ich sie einfach alle hervorheben und so hinzufügen. Sie werden hochgeladen, also müssen wir warten, bis die ersten Bilder erfolgreich hochgeladen wurden Es ist auch besser, die Designmuster, die uns der Kunde zur Verfügung stellt, näher beieinander zu platzieren Designmuster, die uns der Kunde zur Verfügung stellt, näher beieinander Also hier sind die Designs, und lassen Sie uns dieses Moodboard-Design so machen Lassen Sie uns diese beiden Abschnitte tatsächlich so platzieren. Dann lassen Sie uns das Moodboard so vergrößern, und jetzt ist hier einer der eigentlichen Lets Two. Okay, hier ist eines der Designs, lassen Sie uns das Moodboard so platzieren Machen Sie die Designs nass. Lassen Sie uns die Moodboard-Größe verringern und sie hier hinzufügen. Okay, jetzt haben wir dieses erste Design, ich werde es einfach so platzieren und es wird okay sein, dann haben wir dieses Design, fügen es einfach hier ein, ich setze die Größe für Einladungen auf Wir können das automatische Layout verwenden, aber es ist einfach, es ohne automatisches Layout so zu gestalten, und hier haben wir einen Hintergrund Lassen Sie uns es entfernen, um es zu entfernen. Ich doppelklicke auf das Bild und sage hier „Zuschneiden“. Jetzt können wir es so zuschneiden. Jetzt geht's los. In Ordnung. Dann werde ich das hier hinstellen. In Ordnung. Soweit ich mich erinnere, gibt es 38 Ressourcen, lassen Sie uns eine Menge zusammenfassen. Okay. Also dieser hat den Hintergrund, klicken Sie darauf und ändern Sie ihn, um ihn so zuzuschneiden und abzulegen und ihn so zu öffnen und die Eingabetaste zu drücken, damit wir ihn hier einfügen können. Okay. Eigentlich ist es so. Okay. Und hier haben wir ein anderes Design. Sagen wir es so und erhöhen es ein bisschen. Machen wir es zwischen den Größen 15. Okay, wir haben mehr Designs. Fügen wir sie alle hinzu. Das ist ein anderes Design. Lass es uns hier hinstellen, leg das hier hin. Und bei diesem Design werden wir diesen schwarzen Balken weglassen , weil es ein Thema für uns ist. Nett, lass es uns hier hinstellen. Okay, wir lassen diesen Stift fallen. Jetzt machen wir das hier. Okay. Nun, lassen Sie uns das sagen. Okay, ich werde einige dieser Designs zu diesem Modusboard hinzufügen. Jetzt haben wir nicht mehr viel Abstand, also klicke ich auf den Moodboard-Frame und drücke die Befehlstaste, um das Moodboard zu vergrößern Wenn Sie Windows verwenden, sollten Sie die Strg-Taste drücken Okay? Was wir haben, lassen Sie uns den Hintergrund entfernen. Dieser ist qualitativ nicht gut, also werde ich ihn entfernen. Lass uns sie hinzufügen. Jetzt wähle ich einfach diese Screenshots aus und mag sie hier. Lass uns sie weiterhin zur Mondbox hinzufügen. Also hier ist das Webdesign , das vom Kunden ausgewählt wurde. Lassen Sie uns sie also näher zusammenbringen, damit wir uns ein Bild von dem Bereich machen können , den diese Website haben sollte. Hier haben wir also Anzeichen dafür, dass wir nur das vollständige Design ohne Heldenbereich bekommen haben. Lassen Sie uns den Heldenbereich hinzufügen , weil wir den Heldenbereich bereits mit dem Snipping-Tool bekommen haben Lass uns das Design herausfinden. Gehen wir zur Vernunft. Hier haben wir den Kopf auseinander, kopieren es, ziehen und seilen es so, dann stecken wir Zähne wie diese, dann setzen wir es so ein. Jetzt kann ich den Befehl G drücken, um es zu gruppieren. Okay, jetzt werde ich es so ausdrücken. East AT Okay, hier haben wir das Modus-Board und hier haben wir alle Designs, die wir gesammelt haben, also können wir es vergrößern und das Design so überprüfen. Jetzt können wir uns eine allgemeine Vorstellung davon machen , welche Art von Abschnitt wir benötigen, und wir können diese Abschnitte auswählen , indem wir den Stil dieses Designs überprüfen. Der einfache Weg besteht darin, zunächst die von Ihrem Kunden bereitgestellten Websites zu überprüfen . Dies sind die Websites der Konkurrenten Ihres Kunden. Der Bereich „Finden Sie die häufigsten Informationen“ auf diesen Websites. Zum Beispiel hat diese Website einen Heldenbereich, den Bereich „Wir sind“, warum wir unseren Standort wählen, warum wir unsere Standorte mit dem Kontaktformular und den Google-Bewertungen und einer Fußzeile Wenn wir dann diesen Bereich überprüfen, gibt es Herosection, unsere Dienste, Protokollbereich, und hier haben wir den Bewertungsbereich, unseren Anbieterbereich und den Servicebereich Aus einem Bereich. Jetzt können wir diesen Abschnitt aus diesen Designs auswählen Gehen Sie einfach das Design durch und finden Sie heraus, was der Nassbereich ist. Um das in Figma zu tun, haben wir eine Befehlsfunktion In der Werkzeugleiste können Sie diesen Befehlsbereich sehen, darauf klicken und in diesen Designs gefällt mir dieser Bereich als unsere Website, Heldenbereich, klicken Sie auf diesen Abschnitt und geben Sie den Namen als Heldenbereich Okay, aber ich verstehe nur die Struktur dieses Designs, was bedeutet, dass die Unterüberschrift, Hauptüberschrift und der Absatztext so aussehen werden . Diese Schaltfläche wird unten platziert Das einzige, was der Text unten links sein wird. Dann müssen wir einen Abschnitt finden. Um den Abschnitt „Über“ zu finden, schauen wir uns das Design an und ich werde diesen Teil als Abschnitt auswählen. Moderator: Wenn wir Kommentare hinzufügen, können wir all diese Kommentare hier sehen. Und jetzt müssen wir herausfinden, welchen Bereich unsere Konkurrenz-Website hat. Hier haben wir als Nächstes den Abschnitt „ Wählen Sie uns“, und wenn wir zum zweiten Design gehen, hat es nicht viel Zeug, es hat Dienste und wählt Anbieter aus. Lassen Sie uns den Bereich für Dienste auswählen. Ich werde diese Art von Abschnitt für Dienstleistungen auswählen. Anstatt diesen Pfeil hinzuzufügen, werde ich Symbole hinzufügen, die sich auf diese Dienste beziehen. Ich sage, wir müssen eine bessere und einzigartige Version erstellen, und jetzt müssen wir Ihren Anbieterbereich auswählen. Mal sehen, was gut für die sein wird . Ich werde diese Art von Abschnitt für unsere Anbieter erstellen. Lassen Sie uns unsere Anbieter nennen. Ende jetzt müssen wir einen Bereich für Testimonios oder Bewertungen finden Bereich für Testimonios oder Lassen Sie uns den Abschnitt mit den Bewertungen herausfinden. Lassen Sie uns diese Art von Abschnitt für Rezensionen erstellen. Was wir nun hinzufügen müssen, müssen wir einen Blockabschnitt hinzufügen. Also lasst uns einen Blockabschnitt finden. Das wird gut aussehen, also klicke ich einfach hier und lass uns das als Block machen. Wir erstellen das für die Homepage. Lassen Sie uns eigentlich nicht den neuesten Block auf der Homepage hinzufügen. Ich werde hier klicken und lassen Sie uns den Befehl entfernen, klicken Sie auf Löschen, um ihn zu löschen Okay. Jetzt haben wir fünf Abschnitte für die Homepage. Wählen wir eine Fußzeile aus. Finden wir heraus, dass mit der Fußzeile diese Art von Fußzeile erstellt wird. Klicken Sie hier, um eine Fußzeile zu erstellen, aber ich werde das Design ändern Ich verstehe nur die Struktur. Also, wir brauchen einen solchen Bereich, damit wir die Nummer eindeutig haben und wir eine Schaltfläche haben, um einen Termin zu vereinbaren. Lassen Sie uns also diese Art von Design herausfinden. Das ist besser. Lassen Sie uns diese Art von Kontaktformular auf der Homepage erstellen. Machen wir es so schnell wie zehn. Jetzt haben wir acht Abschnitte. Gehen wir dann zur Anforderungsliste und sehen uns an, dass diese Abschnitte uns helfen werden, unser Ziel zu erreichen. Unser primäres Ziel ist es, die Online-Präsenz der Klinik zu verbessern , um neue Patienten zu gewinnen. Um das zu erreichen, brauchen wir einen starken Aufruf zum Handeln, die Helden-Sektion. In diesem Heldenbereich müssen wir die CLS-Nummer erwähnen Hier werde ich die Schaltfläche „ Erste Schritte mit CLS“ durch „Anzahl der Kliniken“ ersetzen Schaltfläche „ Erste Schritte mit CLS“ durch „Anzahl der Kliniken Das hilft Benutzern, die Nummer schnell zu finden , wenn sie die Website besuchen Fügen wir es als Antwort an die Kontaktnummer zu Menu Pa hinzu. Im nächsten Schritt wird es darum gehen, die verfügbaren Dienstleistungen und Spezialitäten für Familien klar zu kommunizieren . Wir haben bereits den Abschnitt für Dienstleistungen in diesen Diensten. Wir werden die wichtigsten Dienste hinzufügen, damit die Besucher die verfügbaren Dienste leicht verstehen und sich ein Bild davon machen können. Wir sollten Bildungsressourcen zum Thema Familiengesundheit bereitstellen . Dazu müssen wir einen Blog-Bereich einrichten. Lassen Sie uns also einen Blog-Bereich erstellen nachdem wir die Homepage entworfen haben. Also ich denke, wir haben den Abschnitt. Also jetzt ist es an der Zeit, diese Informationen an den Kunden zu senden. Wenn Sie also dieses Moodboard mit dem Kunden teilen, klicken wir auf Präsentation, damit er all diese Designs überprüft und seine Idee zur Auswahl des diese Designs überprüft und besten Nachdem Sie das Modus-Board fertiggestellt haben, teilen Sie es mit Ihrem Kunden. Klicken Sie einfach auf „Teilen“ und legen Sie fest, Klicken Sie einfach auf „Teilen“ und legen dass jeder den Link ansehen und kopieren kann Erkläre ihm dann etwas über dieses Modus-Board und welchen Bereich du auswählst, damit er dieses Modus-Board überprüft und dich über seine Vorschläge informiert, und wenn ihm ein anderer Abschnitt gefällt, wird er sie auch auswählen. 41. Website-Struktur erstellen: Hallo, alle zusammen. Jetzt wählen wir aus diesem Moodboard den L-Bereich aus, den wir auf unserer Website benötigen Lassen Sie uns alle sammeln und eine einzige Website mit Anhängen erstellen eine einzige Website mit Anhängen Um das zuerst zu tun, klicke ich auf den Rahmen und erstelle einen Schreibtisch in Rahmengröße Dann lassen Sie uns den Rahmen so vergrößern und dann gebe ich Befehle. Bei den Befehlen haben wir acht Abschnitte. Klicken wir also auf den ersten Abschnitt, und hier ist der erste Abschnitt. Also werde ich auf dieses Motol klicken und hier diesen Screenshot auswählen und Befehl C drücken, um ihn zu kopieren, hier klicken und Befehl V drücken, um ihn einzufügen Und von hier aus brauchen wir nur noch diesen Heldenbereich. Also doppelklicke ich auf das Bild und wähle Zuschneiden. Dann werde ich es so zuschneiden, so und dann die Eingabetaste drücken. Dann sag es einfach so und vergrößere das Design. Okay, dann müssen wir den zweiten Abschnitt finden. Es geht darum, also hier ist der A-Abschnitt. Jetzt werde ich auf mTOL klicken und hierher kopieren. Dann komm her, füge es so ein, dann klicke ich auf das Bild und stelle es auf Zuschneiden ein und schneide dann nur diesen Abschnitt ab Gefällt mir das und drücke Enter. Okay. Dann lass es uns so auf diese Website stellen. Okay. Was wir dann tun werden, ist im dritten Abschnitt zu finden. Dieser dritte Abschnitt ist Dienstleistungen und hier ist der Abschnitt Dienstleistungen. Ich übergebe motol und wähle es aus, kopiere es, füge es hier ein, dann brauchen wir nur diesen Servicebereich Lass es uns zuschneiden und präsentieren. Dann fügen wir hier diesen Abschnitt hinzu. Dies und vergrößern Sie den Abschnitt durch Drücken, Umschalten und Erhöhen. Wenn wir die Umschalttaste drücken, können wir die Größe erhöhen, ohne die Höhe und Breite zu ändern. Dann müssen wir unseren Bereich für Anbieter finden. Also hier ist dieser Abschnitt. Jetzt werde ich diesen Abschnitt kopieren. Eigentlich haben wir den Screenshot schon kopiert, also klicke ich auf mTOL und hier ist der Screenshot Ich dupliziere es einfach, indem ich Befehl C und Befehl V es dann so auslege Jetzt muss ich die Desktop-Größe erhöhen, den Desktop auswählen und ihn so vergrößern. Dann doppelklicke ich darauf und wir brauchen unseren Anbieterbereich so und stellen ihn dann so ein. Schauen wir uns jetzt den fünften Abschnitt an. Ich rezensiere, hier haben wir Bewertungen, drücken Sie einfach auf Mtol und kopieren Sie diese, kommen Sie her. Platziere es hier. Dann haben wir diesen Bewertungsbereich, doppelt bearbeiten, settsrop und bekommen nur den Vorschaubereich wie diesen und hier Okay. Jetzt leg es hierher und drücke Shift und erhöhe es wie folgt. Okay, also lass uns den nächsten Abschnitt finden. Es ist Fußzeile. Hier ist die Fußzeile Hier ist die Fußzeile, die wir hinzufügen werden. Also kopiere das, komm her. Gib diesen so weiter. Okay. Tippen Sie dann zweimal, klicken Sie auf Zuschneiden und schneiden dieses Design wie folgt zu und drücken Sie die Eingabetaste. Dann legen wir es so unten an. Dann müssen wir hinzufügen, lassen Sie uns die Größe erhöhen. Wir müssen hinzufügen, lassen Sie uns den Textrahmen auswählen und ihn wie folgt vergrößern Dann müssen wir den letzten Abschnitt hinzufügen. Der letzte Abschnitt ist schwacher Kontakt, hier ist der Abschnitt mit schwachem Kontakt. Drücken wir also Motle und Salz auf den Abschnitt, drücken Sie den Befehl C und drücken Sie hier Schritt, drücken Sie die Befehlstaste, dann holen wir uns diesen Abschnitt, tippen zweimal darauf, lassen ihn für den Moment wie diesen grauen Mittelpunkt fallen, lassen Sie uns auch diesen Abschnitt vergrößern, so wie Okay, und formuliere es so. Okay. Lassen Sie uns jetzt dieses Design überprüfen. Lassen Sie uns diesen Frame-Namen in Struktur, Webseitenstruktur ändern . Klicken Sie jetzt darauf und klicken Sie auf dieses Geschenk und hier ist die Struktur unserer Website. Jetzt können wir unsere einzigartige Version mit dieser Website-Designstruktur gestalten. Ich mache das, weil wir bei der Erstellung dieser Art von Struktur keine Drahtgitter erstellen müssen. Wir können die High-Fidelity-Benutzeroberfläche direkt erstellen. High-Fidelity-UI bedeutet , dass die Benutzeroberfläche dem tatsächlichen Produkt ähnelt. Außerdem werden wir das nicht einfach so gestalten, wie es ist. Wir werden dieses Design entsprechend unserer Kreativität ändern und eine bessere Version erstellen. 42. Eine Website-Karte erstellen: Hallo, alle zusammen. Jetzt haben wir die Struktur unserer Website in unseren Schritten zur Fertigstellung eines Webdesign-Projektleitfadens. Als Nächstes müssen wir eine Sitemap erstellen . Lass uns eine erstellen. Ich gehe hierher und um eine Sitemap zu erstellen, brauchen wir einen Frame, klicken Sie auf den Frame und klicken Sie hier, dann erhöhen Sie die Rahmengröße wie folgt, dann ändere ich diesen Namen in Sitemap. Dann ist Sitemap die Struktur unserer Website. Wenn wir einige Sitemap-Beispiele sehen, sieht die Sitemap so aus. Zuerst haben wir die Startseite, dann haben wir den Rest der Seite. Danach haben wir den Untermenüpunkt. Für kleine Websites benötigen wir keine Sitemap, aber für komplexe große Websites ist es besser, eine Sitemap zu haben, damit wir die Struktur der Website verstehen können. Nicht nur, dass Sie selbst eine Sitemap für Ihre Website erstellen, sie kann auch geändert werden, wenn wir sie entwickeln und während des Designprozesses mehr Einblicke von den Kunden unserer Wettbewerber erhalten . Lassen Sie uns die Sitemap erstellen. Jetzt haben wir den Rahmen. Ich klicke einfach auf Text und erstelle einen Text namens Home. Dann werde ich die Größe erhöhen dann die Schriftgröße auf 42 ändern. Okay. Dann kann ich Shift A drücken, um das automatische Layout auf diesen Text anzuwenden. Denken Sie daran, dass wir das automatische Layout nur auf diesen Text anwenden, nicht auf den Rahmen, nur für den Text. Jetzt hier drinnen, lass es uns erhöhen. Fügen wir eine horizontale Polsterung hinzu, etwa 20, und die vertikale Polsterung beträgt zehn Dann werde ich Farbe füllen. Klicken Sie hier und lassen Sie uns eine Feldfarbe wie diese rote Farbe hinzufügen Dann klicke ich auf den Text und wir ändern die Textfarbe in Weiß. Okay. Jetzt haben wir eine Homepage, sie scheint kleiner zu sein, also ändern wir diesen Text auf 60. Lassen Sie uns nun wieder die Größe dieses Rahmens auf 2000 reduzieren, also auf 2000 und die Höhen 151500 Okay, lassen Sie uns es jetzt hier hinzufügen. Lassen Sie uns diese Höhe tatsächlich auf Tausend ändern , weil wir die größere Sitemap nicht benötigen. Jetzt haben wir hier ein Zuhause. fügen wir horizontale Paddins 30 hinzu. Viel besser Jetzt müssen wir andere Seiten erstellen. Diese Seiten werden wir überprüfen. Lassen Sie uns unsere Anforderungen überprüfen. Hier werden wir den Seitennamen haben. Bei diesen geht es darum, unseren Provider zu blockieren Kopieren wir sie alle und kommen hierher, dann duplizieren wir das, indem wir es so drücken und ziehen. Lass es uns ein paar Mal duplizieren. Dann ist hier der Text, den ich kopiere, also werde ich ihn hinzufügen und zuerst haben wir ungefähr, dann haben wir Kontakt, dann haben wir hier blockiert dann wird es uns leid tun unser Anbieter. Hier sind die Hauptseiten unserer Website. Die Startseite wird also die erste Seite sein und Über uns wird die zweite Seite sein, und Block wird die dritte, unser Anbieter wird der vierte und Kontakt wird die letzte Seite unserer Website sein Wählen Sie alle aus und lassen Sie uns sie in den Mittelpunkt stellen. Dann wähle ich alle aus, gehe zur Position und klicke auf „So gebunden“. Dann ändere ich die Feldfarbe so , dass sie dieser blauen Farbe entspricht. So können wir andere Homepage-Seiten leicht identifizieren. Okay. Jetzt können wir diesen Seiten Pfeile hinzufügen. Hier wähle ich den Pfeil aus, lasse ihn vergrößern, dann klicke und ziehe ihn wie folgt. Okay. In Pfeil können wir diesen Stil wie folgt hinzufügen, und jetzt sollten wir eine Linie haben, um eine Linie zu erstellen Klicken wir auf Linie und drücken wir die Umschalttaste, dann fügen wir LineTo hinzu, dann setzen wir den Pfeil so Okay. Lassen Sie uns die Größe des Pfeils verringern und diese beiden Pfeile auswählen und die Breite erhöhen. Wählen Sie die Pfeile aus und hier fügen wir 55 hinzu, was mit zwei Lo so sein soll. Jetzt werde ich sie so duplizieren. So, erhöhen wir das hier Jetzt fügen wir hinzu, lassen Sie uns diesen Pfeil duplizieren und diesen hinzufügen. Eigentlich brauchen wir diese Pfeilspitzen nicht. Ich werde es schaffen und hier ist es. Auf unserer Website benötigen wir also eine Unterseite zu unseren Anbietern. Also lassen Sie uns es duplizieren und fügen wir hinzu, dass andere Seiten-URLs das Profil anzeigen. Okay. Dann werde ich diese Schriftgröße auf etwa 30 reduzieren, und lassen Sie uns das so ausdrücken und lassen Sie uns diese Farbe so ändern , dass sie dieser Farbe entspricht. Okay. Und jetzt werde ich diesen Pfeil duplizieren und ihn so ausdrücken. Dann duplizieren Sie es erneut, ändern Sie die Position. Okay. Jetzt entferne ich die Pfeilspitze dieser Linie und nur wir brauchen diesen Pfeil hier. Okay. Und wenn Sie keine Ahnung haben, wie Sie die Sitemap für Ihre Website erstellen sollen, können Sie die Website Ihres Konkurrenten überprüfen und sich ein Bild machen. Für uns ist hier die Sitemap. Jetzt haben wir alle Seiten , die wir erstellen wollen. Außerdem benötigen wir in diesem Blockabschnitt einen einzigen Blockbeitrag. Ich werde das duplizieren und so formulieren. Dann werde ich es wie einen einzigen Block vier wie folgt hinzufügen. Sehen wir uns unsere Seitenübersicht an, klicken Sie auf den Seitenübersichtsrahmen und klicken Sie auf dieses aktuelle Symbol, und hier ist unsere Seitenübersicht warum sie nicht sicher ist, ob sie dort stehen sollte. Wir müssen diese Linie in den Rahmen einfügen. Okay. Jetzt sieht es perfekt aus. 43. Schriftarten für die Website auswählen: Hallo, alle zusammen. Jetzt ist es an der Zeit, Typografie für unsere Website auszuwählen Dafür gibt es hauptsächlich zwei Möglichkeiten. Die erste Methode besteht darin, Ihre Konkurrenten und Designinspirationen auf Moodboard zu überprüfen Designinspirationen auf Moodboard und herauszufinden, was am besten funktioniert Lass uns sehen. haben wir die Seri-Schrift für die Überschrift und die San-Seri-Schrift als Absatz Wir benötigen nur zwei Arten von Schriften, eine für die Überschrift und eine für den Absatz Lass uns andere Designs verwenden. Hier haben wir Sanseris Header und Paragraph und hier haben wir Sansorifont und auch hier haben wir Sanserifont und hier haben wir Ceri Font als Header. Wenn Sie sich unsere Konkurrenten ansehen, können Sie verstehen, welche Art von Typografie auf unserer Website funktioniert können Sie verstehen, welche Art Ceri Font als Header. Wenn Sie sich unsere Konkurrenten ansehen, können Sie verstehen, welche Art von Typografie auf unserer Website funktioniert. Aus diesem Grund bin ich zu dem Schluss gekommen, dass die Verwendung von Sanserifont die bessere Option für den Überschriftenabsatz ist . Ich werde zwei verschiedene San-Serif-Schriften für die Website verwenden. Die zweite Methode ist also, dass wir nach KI fragen und ihre Meinung einholen können KI fragen und ihre Meinung einholen Also lass uns das machen. Hier bin ich auf HatGPT, also klicke ich auf Newhat. Also füge ich einfach unsere Eingabeaufforderung hinzu, damit Sie diese Eingabeaufforderung im Abschnitt Ressourcen finden können , und hier werde ich das ändern, da Sie ein Webdesigner sind, eine Website für JB Family Clinic dann können wir hier die Aufgabe hinzufügen, sodass die Aufgabe lautet, ich möchte, dass Sie hier den Ersteller ändern, ich möchte, dass Sie Ty für die Grafik für die JB Family Clinic-Website wählen JB Dann muss ich weitere Informationen bereitstellen, also werde ich sie hier bereitstellen, hier sind weitere Informationen und dann fügen wir die Informationen hinzu. Wir können diese Informationsanforderungen erfüllen. Hier haben wir also den Zweck, also können wir den Zweck der Website, die Zielgruppe und das Hauptziel kopieren , um die beste Schriftart zu finden. Also wähle ich zuerst, ich wähle diese Frage und dann kopiere ich sie und füge sie so ein. Drücken Sie die Eingabetaste, um ein Leerzeichen zu erstellen. Dann kopiere das auch und füge es so ein. Also lass es uns hier machen. Das. Jetzt werde ich diesen entfernen, mir drei Auswahlmöglichkeiten geben und dann versuchen, die Ausgabe zu generieren. Hier haben wir die Informationen. Für die Website von JB Family Kenic sollte die Typografie den Wert von Vertrauen, Sorgfalt und Zugänglichkeit widerspiegeln und sollte die Typografie den Wert von Vertrauen, Sorgfalt und Zugänglichkeit widerspiegeln und gleichzeitig die Professionalität wahren. Dann haben wir Primärtypen wie SunSerifFamily und die Schriftnamen Poppins und Lato Lato oder Lato . Dann haben wir den Grund und hier, wo sollen wir ihn platzieren? Wir sollten es in die Schlagzeilen bringen, damit wir es in die Unterüberschrift setzen können Dann haben wir die sekundäre Textphase, als ob Familie, dann haben wir diese beiden Schriften, aber das Problem ist, wenn wir Serifenschriften zu einem Absatz hinzufügen , kann es zu Problemen mit der Lesbarkeit kommen, also ist es immer besser, diese Schriften zu überprüfen , bevor wir sie zur Website hinzufügen Wir haben auch Akzenttypen, aber wir benötigen nur zwei Arten von Schriften, eine für Überschriften und eine für Absätze Gehen wir zu Google Fonts und überprüfen wir diese beiden Schriftarten. Auch wenn diese Schriften nicht besonders gut für die Website sind, verstehen wir, dass die SanSerif-Schrift gut für Überschriften sein wird , und hier handelt es sich um eine Serif-Schriftfamilie, aber wenn wir hier nachschauen, sind wir der Meinung, jedes einzelne Projekt Sun-Serif-Schrift hat Gehen wir jetzt zu Google Fonts. Jetzt bin ich auf phones.google.com. Hier können wir die vorgeschlagenen Schriftarten überprüfen . Kopieren wir die vier Pins und dann können wir hier direkt nach der Schrift suchen. Hier ist die Schrift mit den vier Pins Hier können wir die Größe der Überschriften festlegen. Stellen wir es auf 55 ein und hier wird es aussehen und die normale Schriftart 55 wird auf unserer Website großartig aussehen. Lassen Sie uns die von GPT vorgeschlagene Absatzschrift herausfinden , also wird es diese sein, lassen Sie uns die Schrift kopieren und hierher kommen und nach der Schrift suchen und hier wird diese Schrift sein Scrollen wir nach unten, und so sieht es aus wenn wir es als Fixer für Absatz 16 hinzufügen Wie ich bereits sagte, müssen wir über die Lesbarkeit nachdenken Wenn wir normalerweise die Serifenschrift für Absätze verwenden, ist sie für einige Benutzer nicht einfach zu lesen Einige moderne Schriftarten eignen sich jedoch am besten für Absätze benötigen sogar die Si-Schriftart Okay. Laut diesem Modus-Board die Überschrift, die Unterüberschrift und sollten die Überschrift, die Unterüberschrift und der Absatz sensorische Schriften sein Lassen Sie uns Sanserifon herausfinden, gehen Sie einfach zu Google Fonts und verwenden Sie den Filter, indem Sie auf den Filter klicken Dann scrolle hier nach unten und hier stellen wir den Font-Test ein. Wenn du darauf klickst , sehen wir uns die Schriftarten Ich mag diese Schriften, also lassen Sie uns mit der rechten Maustaste klicken und sie im Nib-Fenster öffnen , die letzteren von HG PT vorgeschlagenen Schriftarten, also lassen Sie uns sie auch öffnen und einfach nach unten scrollen und die beste Schriftart für die Website herausfinden Wenn Sie jedoch bereits ein Logo und Markenrichtlinien haben, müssen Sie diese befolgen, Schriftarten verwenden, die Ihrer Logo-Schrift ähneln, und wenn Sie die A-Schrift nicht finden können, suchen Sie einfach nach einer ähnlichen Schrift Jetzt habe ich hier drei Schriftarten gefunden , die für Überschriften geeignet sind. Lassen Sie uns jetzt nur eine davon finden, um das zu tun. Hier kann ich sie auf 60 setzen und wir werden regulär verwenden und sie wird auf der Website so aussehen. Wenn wir zu gehen, setzen wir die Größe auf 60 und wir müssen diese normale Schrift verwenden, normal oder hell, die helle Größe ist zu dünn, normal ist gut. Ich werde so aussehen und wir haben Manro, Mnro-Schrift gefunden und lassen Sie uns die Größe auf 60 erhöhen und die normale Schrift wird so aussehen Von diesen drei Schriften werde ich diese letztere als Saer-Schrift verwenden, also klicke ich auf Schrift abrufen und sie wird dem Bucket hinzugefügt Jetzt müssen wir die Schrift für Absätze finden. Ich werde diese beiden Schriftarten entfernen und beim Durchsuchen von Schriftarten wählen wir die Sensoren aus. Scrollen wir nun nach unten und sehen uns einige Schriftarten an, die wir verwenden können. Ich werde dieses Telefon öffnen und auch dieses und dieses. Scrollen wir nach unten und hier wird es im Absatztext aussehen. Wenn ich also auf dieses Thema klicke und die meiste Zeit gehe, können wir sehen, wo wir diese Schrift verwenden können. Hier ist der öffentliche Sinn eine starke natürliche Schriftphase für Benutzeroberflächen, Text und Überschrift. Wir können es als Text verwenden, das heißt Absatz, und wenn wir dann hier hingehen, nicht hier, wenn wir zu dieser Schrift gehen, schauen wir mal, ob es im Absatz so aussieht. Schauen wir uns die Details hier wir haben Details und lesen wir es so, dass es für Anzeigezwecke entworfen wurde, aber lesbar genug ist , um es auch in der ismll-Größe zu verwenden Diesen können wir im Absatz verwenden. Lassen Sie es uns hier als Medium bezeichnen. Wenn wir Medium hinzufügen, wird es viel besser aussehen. Lassen Sie uns das überprüfen und es wird im Absatz so aussehen. Schauen wir uns das Telefon an. Sagen wir, Fi Tree ist eine saubere, aber freundliche geometrische sensorische Schrift für den Einsatz im Web und im mobilen Labor. Es ist Harded und Crees haben wir für Text verwendet. Es ist klar, ich sage, wir können es für Text verwenden. Es ist perfekt für Buttons und kurze Etiketten. In Großbuchstaben ist es perfekt für Buttons und kurze Beschriftungen, und ich werde diese passende Schriftart als unsere Absatzschriften verwenden, also klicke ich auf Schriftart abrufen, und jetzt haben wir diese beiden Schriftarten, und ich werde diese Arbeit entfernen, dann, wenn ich mich erinnere, verwenden wir diese vier, verwenden wir diese vier, unseren vorherigen Lektionen etwas über Google-Schriften gelernt. Ich klicke auf Premo und hier die Schriftarten, die wir verwenden werden Jetzt müssen wir diese Schriftarten in der Figma-Datei definieren In der nächsten Lektion machen wir das 44. Was ist ein Aufkleberbogen: Hallo, alle zusammen. Lassen Sie uns über etwas wirklich Praktisches und Wichtiges für Webdesigner sprechen. Es ist Itigai. Was genau ist ein Itigahi? Stell es dir so vor. Es ist eine Sammlung von Designelementen, die Sie bei der Erstellung einer Website wiederholt verwenden werden. Diese Elemente können Schaltflächen, Symbole, Logos, Farbpaletten und sogar Schriftarten Es ist wie ein Toolkit, das Sie vorbereiten, bevor Sie Ihre Website entwerfen Nicht nur vor dem Entwerfen fügen Sie dem Itiga-Sheet weitere Elemente hinzu , während Sie die Website gestalten Warum brauchen wir das Itiga-Blatt? Nun, wenn wir Websites entwerfen, möchten wir, dass alles einheitlich aussieht , sodass auf der gesamten Website alles zusammenpasst Fangen wir also an, ein Stilset zu erstellen. Jetzt gehe ich zu unserer Figma-Datei und klicke auf Conframe und erstelle einen Frame wie diesen Lass es uns so erhöhen. Dann werde ich den Text in ein Aufkleberblatt ändern. Okay. Ich Figma, wir haben Stile und Variablen, damit wir sie für die spätere Verwendung speichern können Wir können eine Farbpalette, eine Schriftart, Schaltflächen, ein Symbol oder ähnliches auf dem Itera-Blatt erstellen Symbol oder ähnliches auf dem und sie als Variable oder Azur speichern Lass uns damit beginnen. Zuerst wählen wir unsere Schriftarten aus, ich entferne unnötige Tabs und klicke dann auf dieses Kartensymbol in Google Fonts, und hier haben wir unsere Schriftarten. Also lass uns hier klicken und ich werde T drücken und lass uns einen Abschnitt oder Test namens Typografie erstellen, ihn dann markieren und die Größe auf 60 erhöhen Okay, 60 ist zu viel, also reduzieren wir es ein bisschen wie 42, richtig Jetzt werde ich diesen Text duplizieren und ihn als Header ändern und hier können wir die Header-Typografie auswählen, die wir wählen Wir wählen Lato als Typografie für die Überschrift. Lass uns das kopieren und herkommen. Dann stelle ich es hier auf Lato ein und wählen Größe auf 60, dann machen wir es normal Jetzt werde ich den Textheader 60 ändern, 60 ist die Größe und den Schrift-Tweet regularisieren Okay. Jetzt haben wir den Kopfzeilentext und ich werde ihn duplizieren. Fügen wir dazwischen die Größe 20 hinzu. A hier, lassen Sie uns dazwischen die Größe 30 hinzufügen, und hier werde ich Absätze hinzufügen. Doppelklicken Sie tatsächlich darauf und entfernen Sie es. Dies ist das richtige Wort, und der Absatztext wird angezeigt. Lassen Sie uns den Absatztext überprüfen. Es ist Fk Tree. Wählen wir PF-Baum aus. Okay, hier haben wir die und hier, sagen wir, die Größe ist 200, und die normale Größe wird gut aussehen. Nehmen wir eine Größe dazwischen wie eine Person. Okay. Jetzt haben wir die Absatzschrift und die Header-Schrift, und lassen Sie uns das duplizieren. Lassen Sie uns das zweimal duplizieren , und hier haben wir eine Unterüberschrift und hier eine Flasche Wenn wir wollen, können wir sogar den zweiten Schrifttitel hinzufügen, aber lassen Sie uns das so hinzufügen Dann werde ich für Sub Fdding die Schriftgröße auf 30 einstellen. Okay, und machen wir es mittelgroß. Es scheint zu groß, also machen wir 25 und normal wird gut sein. Dann ändern wir es auf 25 regulär. Jetzt müssen wir die Button-Größe hinzufügen. Absatz, wir müssen das auf 20 ändern. Dann wird die Tastengröße 20 normal sein und wir legen die Groß- und Kleinschreibung auf Großbuchstaben fest. Machen wir es mittelgroß. Lass uns 20 nehmen. Jetzt werde ich die Position so ändern. Das werden die Schriften sein, die wir verwenden. Wir können dies auch besser erstellen. Das heißt, ich werde diesen kopieren und ihn als Header umbenennen und seine Größe auf 30 ändern und das hinzufügen. Dann werde ich es hier ablegen. Sag es so, dann können wir hier den Schriftnamen ändern wie lato und wir können es hier machen, das hier duplizieren und es so subdin machen, dann ändern wir hier den Subwdingo-Schriftnamen Der Name der Schrift ist Week Tree. Jetzt müssen wir uns das besorgen und es wird Knopf, Knopf sein. Dann ändern wir es hier Petree und machen das Leerzeichen zu 30 30. Und dann lassen Sie uns diesen duplizieren. Es wird ein Absatz sein, und hier wird es Abbildung drei bis regulär sein. Okay. Jetzt ist es sehr klar. Wir fügen unserem Istigast einfach Typografie hinzu und dann können wir Typografievariablen oder Stilvariablen erstellen Typografievariablen oder Stilvariablen Wählen Sie dazu den Typ für die Soße aus und klicken Sie hier. Sie dann im Popup-Fenster im Textstil Klicken Sie dann im Popup-Fenster im Textstil auf dieses Plus-Symbol Ich werde es als Header festlegen und auf Creative Style klicken. Ich werde hier klicken. Lass uns das eine B einfacher machen. Klicken Sie hier und klicken Sie auf Textstil, klicken Sie auf dieses Plus-Symbol und fügen Sie es wie folgt hinzu. Machen wir das also für zweiten Schaltflächentext und klicken wir auf Konkreter Stil, und machen wir das für den zweiten Absatztext, wie Okay. Also lasst uns diese Styles zum Text hinzufügen, also werde ich einen Test wie Hello Everyone erstellen. Wie geht es dir? Also dieser Text ist momentan unvoreingenommen, also ich klicke auf den Text hier und tippe Graphiton Ich klicke auf Apply Itis und wenn ich den Header auswähle, wird er zum Header-Text Und wenn ich auf C subbedin klicke, wird es zu subbedin geändert. Wenn ich auf Con-Tasten klicke, wird daraus Button-Text. Vorteil ist, dass wir auf der gesamten Website viel Text wie diesen haben , wir haben viele Absätze und denken, dass wir die Größe des Textes auf der gesamten Website ändern müssen . Wir können einfach auf den Text klicken , den wir im Stylesheet erstellt haben In diesem Fall handelt es sich um Absatztext, und hier können wir klicken und dann auf dieses Symbol „Stil bearbeiten“ klicken Dann können wir hier die Größe ändern. Stellen wir es auf 16 ein und drücken die Eingabetaste. Wenn ich das also auf 16 ändere, jeder Moment oder jeder Absatzstil ändert sich jeder Moment oder jeder Absatzstil , den wir der Website hinzugefügt haben. Wenn wir es auf 50 ändern, wird es auf diese Weise auf 50 geändert. Das ist der Vorteil des Hinzufügens seiner Typen und der Erstellung eines Aufkleberbogens. Stellen wir es auf zwei ein. Jetzt haben wir die Typografie für unsere Website gefunden. Ich werde dieses Aufkleberblatt so verkleinern. In der nächsten Lektion werden wir Farben für unsere Website auswählen. 45. Eine Farbpalette erstellen: Hallo, alle zusammen. Lassen Sie uns Farben für unsere Klinik-Website auswählen. Es gibt zwei Möglichkeiten, Hauptfarben oder Primärfarben für unsere Website auszuwählen . Die erste Methode besteht darin, den Color Emotion Guide zu verwenden und die passende Farbe zu finden. Jetzt erstellen wir eine Website für eine Klinik. Wenn wir darüber nachdenken, ein Krankenhaus zu reinigen, welche Art von Emotion wird ausgelöst Hier haben wir eine ausgeglichene Natur, friedliches Wachstum, Gesundheit, Gesundheit bedeutet Ernährung und die grüne Farbe, die mit der Gesundheit von Lebensmitteln zusammenhängt . Aber dann haben wir Vertrauen in verlässliche Stärke. Wenn wir an den Arzt denken, sollten wir ihm vertrauen können, besonders wenn wir über Familie sprechen. Vertrauen und Zuverlässigkeit sind ein Muss, Vertrauen und Zuverlässigkeit sind ein damit wir die Grundfarbe Blau wählen können Es gibt einen anderen Weg. Das heißt, wir können unser Modeboard überprüfen. Wenn wir unser Modeboard überprüfen, sehen wir deutlich, dass überall blaue Farbe sichtbar ist. Dann haben wir weiße und schwarze Farben. Die erste Methode besteht darin, den Color Emotion Guide zu verwenden, und die zweite Methode besteht darin, unser Moodboard zu überprüfen und die Farbe auszuwählen. Jetzt wählen wir unsere Farbe als Blau und dann müssen wir die Farbpalette erstellen. Um die Farbpalette zu erstellen, gehe ich zu coolers.co und klicke hier auf Generator starten und wir verwenden die Regel 60, 3010 für unsere Farbverwendung Wir benötigen nur drei Farben als Hauptfarbe, also werde ich zwei davon entfernen Jetzt haben wir drei Farben. Wählen wir unsere Primärfarbe , diese Farbe wird die blaue Farbe sein. Ich werde diese blaue Farbe etwas heller machen , und dann müssen wir zwei weitere Farben auswählen. Eine Farbe wird natürlich weiß sein und die zweite Farbe wird dunkel sein. Wenn ich eine dunkle Farbe wähle, werde ich mich nicht für zu viel Dunkelheit entscheiden. Ich werde mich für ein bisschen weniger Dunkelheit entscheiden. Jetzt haben wir gerade drei Farben für unsere Website ausgewählt. Dennoch müssen wir eine Sache tun. Das heißt, die Lesbarkeit dieser Farben überprüfen. Ich werde hier klicken und den Farbcode kopieren Dann gehe ich zu colors.adobe.com und klicke hier auf Dann gehe ich von hier aus zum Barrierefreiheitstool und wähle hier die kopierte Farbe als Testfarbe Eigentlich müssen wir das als Hintergrund festlegen und dann das Weiß als Textfarbe auswählen. Kopieren wir es von hier und legen wir Weiß als Textfarbe fest. In diesem Fall ist es blass. Auf diesem blauen Hintergrund können wir kein Weiß verwenden. Lassen Sie uns überprüfen, ob diese schwarze Farbe und die weiße Farbe dafür geeignet Ich füge diese Hintergrundfarbe als schwarze Farbe und die Testfarbe als weiß hinzu und sie alle drei Tests und lassen Sie uns Text ändern und die Hintergrundfarbe ist immer noch erfolgreich, was bedeutet, dass wir zwei Farben finden. Lassen Sie uns also diese beiden Farben sperren, und jetzt müssen wir diese blaue Farbe ändern. Machen wir es also ein bisschen dunkler und kopieren wir diese Farbe. Dann komm her und lass es uns als Textfarbe verwenden. In einem kleinen Test schlägt es also immer noch fehl. Also lass uns die Farbe ändern, aber es ist immer noch fehlgeschlagen, also müssen wir es dunkler machen. Schauen wir uns an, wie es mit diesem Farbtyp funktioniert, und kopieren wir die Farbe , die jetzt vorhanden ist, nachdem sie bestanden hat, was bedeutet, dass wir erfolgreich die Primärfarbe ausgewählt haben. Wenn diese Farbe jedoch nicht die blaue Farbe ist, die Sie mögen, können wir die Farbe von hier aus ändern und sehen , welche Art von Farbe geeignet ist. Wenn wir also die Farbe ändern, wird das Verhältnis geändert. Wenn die Zahl also größer ist , werden wir besser zugänglich sein und die Benutzer können sich das genauer ansehen. Also werde ich diese Farbe als unsere Primärfarbe wählen und jetzt haben wir drei Farben. Wählen Sie diese Farbe aus, weil es eine helle Farbe ist und wir jetzt diese drei Farben haben Gehen wir zu unserem Itagia-Blatt. Hier ist unser Itiga-Blatt und lassen Sie uns neuen Text erstellen. Lassen Sie uns diesen duplizieren und die beiden Farben ändern. Fügen wir unsere Farbpalette hinzu. Um unsere Farbpalette hinzuzufügen, klicke ich einfach auf Rechteck und lass uns ein Rechteck wie dieses erstellen. Nehmen wir 150 mal 150 und wir haben nur drei Farben. Ich werde das dreimal duplizieren. Und jetzt lasst uns diese Farben kopieren. Von hier aus klicke ich hier, um dieses Blau zu kopieren, und klicke auf das erste Rechteck und ändere die Feldfarbe in diese blaue Farbe. Dann haben wir diese weiße Farbe, kopieren sie und fügen sie so ein. Wenn wir es einfügen, ist die Farbe nicht sichtbar , da unser Hintergrund weiß ist. Wenn wir also diesen Hintergrund in eine andere Farbe ändern können , ändern wir ihn in eine grüne Farbe oder wir können den Strich für diesen Würfel oder für dieses Rechteck hinzufügen . Fügen wir Estroke hinzu, wählen Sie das Rechteck aus und klicken Sie auf Ich habe gerade den schwarzen Astro hinzugefügt, dann wählen wir hier unsere dritte Farbe aus. Kopiere das Lass uns diese Farbe damit testen. Wenn wir es testen, schlägt es immer noch fehl, was bedeutet, dass wir diese blaue Farbe nicht auf schwarzem Hintergrund verwenden können . Wir müssen es nur auf weißem Hintergrund verwenden. Kopiere es, gehe hierher und klicke hier, dann füge es als nächste Farbe hinzu. Jetzt haben wir Farben. Jetzt können wir also Stil kreieren. Klicken Sie also hier und klicken Sie auf dieses Plus-Symbol Lassen Sie uns diesen Stil auf Schwarz setzen wir auf den weißen Stil und klicken Sie hier, klicken Sie auf dieses Plus-Symbol und legen Sie diese Farbe so fest und klicken Sie dann auf diese blaue Farbe. Klicken Sie hier, klicken Sie auf das Plus-Symbol und stellen es auf Blau ein und klicken Sie auf Createtyle Okay. Jetzt haben wir unsere Farben und Typografie In der nächsten Lektion erstellen wir ein Logo für unsere Website 46. Ein Markenlogo entwerfen: Hallo, alle zusammen. Lassen Sie uns ein Logo für unsere Website erstellen. Wir haben Typografie und Farben. Lassen Sie uns nun das Logo erstellen. Der Name unserer Website ist BG Family Clinic, also werde ich ihn einfach kopieren und hierher kommen und ihn einfach hier einfügen. Dann werde ich hier einen Text erstellen, ihn voreinstellen und Text erstellen Dann füge ich diesen Text ein, dann werde ich diesen Teil der Familienklinik entfernen Eigentlich kann ich diesen entfernen. Dann werde ich diese Typografie in Header ändern. Dann werde ich auf Detach Itile klicken. Wenn ich auf Detachtyle klicke, kann ich die Typografie kann ich Hier mache ich es extra fett und lass uns die Seiten wie folgt auf 78 erhöhen Dann werde ich die Füllfarbe auf diese blaue Farbe ändern , jetzt müssen wir den Rest des Logos entwerfen. Ich werde auf T klicken, hier klicken, diesen Text eingeben, damit wir ihn kopieren und hier haben wir den Teil der Familienklinik. Jetzt werde ich hier klicken und dann auf Chad klicken. Dann werde ich den E-Stil abnehmen und ihn dann so formulieren Fügen wir einen Abstand von 20 hinzu. Dann werde ich mehr von diesem JB-Teil vergrößern. Jetzt klicke ich auf diesen Text und lass uns auf die untere Zeile klicken Eigentlich ist es okay. Erhöhen wir nun erneut diese 20 und markieren beide und klicken Sie auf Vertikale Mitte ausrichten. Jetzt werde ich die Testfarbe dieser Familienklinik in Schwarz ändern. Okay. Jetzt markiere ich diese beiden Elemente und drücke Command G, um sie zu gruppieren. Und jetzt haben wir gerade ein einfaches Logo erstellt. Wir können noch viel mehr mit diesem Logo machen, aber das ist der einfache Weg, ein Logo zu erstellen . Lassen Sie uns eine weitere Version dieses Logos erstellen. Um das zu tun, drücke ich erneut T und füge JB wie folgt Klicken Sie dann hier, legen Sie ihn als Kopfzeilentext fest und klicken Sie auf den Link, um ihn zu trennen Dann erhöhen wir die Größe auf Fettdruck Und jetzt lassen Sie uns die Größen wie 88 erhöhen, okay. Dann können wir auf T klicken und den Rest des Textes hinzufügen und wir bekommen nur den Teil mit der Familienklinik und klicken hier auf die Überschrift, dann können wir es so formulieren. Dann können wir diesen Text beliebig vergrößern. Machen wir 102 daraus und fügen wir diesen Abstand bei sechs Dann können wir die Elemente auswählen und auf den horizontalen Zeileninhalt klicken. Dann können wir so etwas machen. Dann machen wir aus dieser Familie eine blaue Farbe. Dann wählen wir diesen B-Teil und machen ihn blau. Es sieht nicht gut aus. Wenn wir wollen, können wir diesen Blow-Teil einfach in der blauen Farbe machen . Es gibt viele Möglichkeiten, wie wir dieses Logo mit einigen Linien versehen können . Vorerst wird das gut für unsere Arbeit sein. Wir können so etwas auch machen. Dann erhöhen wir auf 50, 50 ist zu viel, 15, und lassen Sie uns diese Farbe so ändern , dass wir sie tatsächlich blau machen. Wir können auch so etwas machen, aber es ist 7,5 und dann klicken wir auf Pfeil und lassen uns einen Pfeil wie diesen erstellen. Es ist kein Pfeil, es ist eine Linie, klicken Sie auf die Linie und klicken Sie erneut so, dann fügen wir diese Linie hier ein und wir müssen die Größe als eins festlegen. Wir können so etwas auch machen. Dafür gibt es viele Dinge. Es gibt viele Dinge zu tun, aber der einfachste Weg besteht darin, diese Art von Logo zu erstellen. Ich werde all diese Informationen haben. Jetzt kann ich auf dieses Logo und dann auf Port klicken. Stellen Sie dann den Dateityp auf PNG ein, erhöhen Sie die Größe auf zwei x, klicken Sie dann auf Herunterladen und es wird so heruntergeladen. Ich werde seinen Namen in JB-Logo ändern. Lassen Sie uns dieses duplizieren und es als Logo verwenden. Jetzt erstellen wir einfach ein einfaches Logo für unsere Website. 47. Was ist Figma-Komponente: Hallo, alle zusammen. In FIGMA haben wir eine Funktion namens Komponenten Komponenten sind wiederverwendbare Objekte, die uns helfen können, einheitliches Design auf der gesamten Website zu erstellen und aufrechtzuerhalten, sodass wir alle Elemente oder Elemente auf der Figma-Canvas in eine Komponente umwandeln Lassen Sie uns also Teil dieses Logos sein. Dazu wähle ich einfach das Logo aus. Wenn ich das Logo auswähle, sehe ich auf der rechten Seite das Objekt, das wir ausgewählt haben, und hier haben wir ein kleines Symbol mit der Bezeichnung Komponente erstellen. Ich tippe einfach darauf. Als ich das getan habe, wurde dieses Logo zu einer Komponente. Wenn du es in eine Komponente verwandelst, färbt sich das Highlight des Artikels indigoblau Wenn ich hier klicke, wird es als angezeigt Lassen Sie mich das Design vergrößern. Wenn ich auf ein normales Element klicke, wird es blau hervorgehoben. Wenn ich jedoch auf eine Komponente klicke, wird sie als Indigos hervorgehoben Auch im Bereich der linken Seitenebene wird angezeigt, dass es sich um eine Komponente handelt Nun, wie man diese Komponente benutzt, um das zu demonstrieren, ich werde einfach einen Frame erstellen und lassen uns einen weiteren Frame erstellen. Jetzt denke ich, dass ich dieses Logo zu diesem Rahmen hinzufügen muss , um das zu tun Wir haben eine einfache Methode, es zu verwenden, wir können zu diesem AZA-Tab auf unserer linken Seite gehen. Ich klicke einfach darauf und wenn ich darauf klicke, sehe ich vielleicht Bibliotheken hier. Wenn ich will, kann ich einfach nach dem Logo der Bibliothek suchen. Und das Logo wird angezeigt, oder wenn ich auf lokale Asserts klicke, wird das Logo hier angezeigt. Jetzt muss ich nur noch darauf klicken und auf Sofort einfügen klicken Jetzt können wir hier bearbeiten. Instanz bedeutet eine Kopie dieser Hauptkomponente Wenn ich also Änderungen an dieser Komponente vornehme, wirkt sich dies auf die Instanz dieser Komponente aus. Lassen Sie uns diesen Frame so bearbeiten, dass er einfach hier anklickt, sofort einfügen und dann füge ich ihn einfach hinzu. Okay, um die Vorteile dieser Komponente zu demonstrieren, werde ich das so duplizieren und dann auf dieses abgetrennte Instant-Symbol klicken. Wenn ich darauf klicke, wird es einfach zu einem normalen Element. Wenn ich zur Datei gehe, ist es nur ein normales Element, und jetzt duplizieren wir dieses Objekt so und so. Jetzt denke ich, dass ich diese JB-Farbe auf Rot ändern muss. Wir haben also zwei Versionen. Eine ist ein Beispiel für diese Hauptkomponente, und hier ist ein doppeltes Element dieses Logos. Also lasst uns die Farbe ändern. Hier wähle ich den Text und lasse uns diese Farbe wie Rot ändern. Ich klicke hier auf Stil entfernen und ändere diese Farbe in Rot Wenn ich diese Farbe ändere, wirkt sich das auf die Instanz dieser Hauptkomponente Wenn ich das also eins gegen eins ändere, wird es sich so ändern. Aber wenn Sie dieses normale Logo duplizieren und Änderungen an diesem Eins-zu-Eins-Logo vornehmen, wird diese Ansicht besser. Okay. Wenn wir nun Änderungen an diesem Logo vornehmen, hat dies keine Auswirkungen auf unsere doppelten Logos. Sie sehen, das ist der Vorteil einer Komponente. Jetzt entferne ich einfach alle und klicke hier, lass uns die Änderungen entfernen und hier, lass uns die Farbe auf Blau setzen. Auf unserer Website werden wir 45 Seiten erstellen. In diesem Fall können wir also eine Instanz dieser Komponente erstellen. Da wir die Details dieses Augenblicks ändern können. Wenn ich hier zum Beispiel eins gegen eins ändere, keinen Einfluss auf die Hauptkomponente, aber wenn ich die Farbe ändere, wird es trotzdem die Farbe dieser Instanz ändern und wenn ich hier, zwei, ändere, hat das keinen Einfluss auf diese bearbeitete Instanz weil wir sie bearbeiten und versuchen, die Farbe zu ändern. Lassen Sie uns die Farbe auf Blau ändern. Die Farbe wird sich trotzdem ändern, ich werde den Text nicht ändern, da wir den Text dieser Instanz ändern. Dies ist der Vorteil der Verwendungskomponente. In Zukunft werden wir mehr Komponenten verwenden und Sie werden mehr über Komponenten erfahren, siehe in der nächsten Lektion. 48. Mehr über Komponenten mit Schaltflächen (bei Kleidung, nicht bei UI) erfahren: Okay. Versuchen wir nun, Komponenten mit Button zu erstellen. Um das zu tun, werde ich einen neuen Rahmen erstellen und ihn als Desktop-Rahmen festlegen. Okay. Jetzt werde ich hier einen Button erstellen. Um eine Schaltfläche zu erstellen, drücke ich auf T und lasse uns den Namen der Schaltfläche als Schaltfläche festlegen. Name oder wir können einfach Label sagen. Dann erhöhe ich die Größe auf etwa 20, und lass uns die Schrift auf Railway ändern und hier klicken, dann machen wir Großbuchstaben ändern dann Regular zu Semi Bool Okay, jetzt drücke ich Shift A, um ein Layout zu erstellen oder dieser Schaltfläche ein automatisches Layout hinzuzufügen , und ich stelle 30 als horizontalen Abstand und 20 als Jetzt ändere ich die Füllfarbe auf, lassen Sie uns sie in eine grüne Farbe ändern, wie hier mit dunklerem Wie diese Farbe, dann füge ich Ecken wie 30 hinzu, lassen Sie uns sechs daraus machen. Okay. Jetzt ändere ich diese Textfarbe, lassen Sie uns sie auf Y ändern. Jetzt müssen wir die Hintergrundfarbe etwas dunkler machen Hintergrundfarbe etwas dunkler Jetzt haben wir diesen Rahmen, also werde ich ihn als Schaltfläche umbenennen. Dann klicke ich auf diese Komponente erstellen und ändere diese Schaltfläche in eine Komponente Okay. Wie wir bereits gelernt haben, können wir diese Schaltfläche jetzt wiederholt an anderen Stellen hinzufügen. Lass es uns tun. Ich gehe zu Asserts und klicke auf die Earl-Komponente Hier haben wir die Schaltfläche, dann klicke ich auf Insert Instance Okay, hier haben wir die Schaltfläche, und hier werde ich diesen Text ändern, um mehr über mich zu erfahren. Okay. Wenn ich dann diese Textfarbe in Grau ändere, wird sie in Grau geändert. Wenn ich zum Beispiel solche Änderungen vornehme, ändert sich das auf unsere Instanz weil das unsere Hauptkomponente ist, und hier ist die Instanz dieser Komponente, was bedeutet, dass wir, wenn wir mehr Instanzen bewerten und erstellen, sie überall hinzufügen können, indem wir den Text ändern, klicken und wir können diese Art von Schaltfläche überall im Design hinzufügen. Außerdem können wir diese Instanz immer noch so duplizieren und die Änderungen, die wir vornehmen, auf die Hauptkomponente anwenden. In der Hauptkomponente können wir eine Variante erstellen. Variante bedeutet eine andere Version dieser Schaltfläche. Nennen wir diese Schaltfläche als Beispiel die primäre Schaltfläche. Diese ist eine primäre Taste und ich denke, wir brauchen eine sekundäre Taste. Und diese Tastenform ist dieselbe. Nur, dass es keine grüne Feldfarbe haben wird. Stattdessen wird es einen grünen Rand haben, und dieser Text wird auch grün sein. Dazu können wir unsere Hauptkomponente auswählen Wenn ich auf „Auswählen“ klicke, wird dieses kleine Plussymbol angezeigt, und es heißt Advarian. Wenn ich auf Con klicke, wird eine doppelte Version dieser Schaltfläche erstellt Dann wird das Design dieser Schaltfläche geändert. Lass uns einen Strich hinzufügen. Ich drücke einfach hier und lass uns einen Strich mit dieser Farbe hinzufügen und dann machen wir es auch. Jetzt werde ich diese Füllfarbe ändern oder diese Füllfarbe entfernen. Das, dann werde ich die Textfarbe dieser Schaltfläche ändern. Lassen Sie uns die Textfarbe auf die gleiche Farbe dieses Hintergrunds ändern und es ist wenig hell. Machen wir es dunkler und fügen wir diese Rahmenfarbe zu Okay hinzu, jetzt haben wir die primäre Schaltfläche und die sekundäre Schaltfläche. Also lasst uns sie umbenennen. Also klicke ich auf diese Schaltfläche, und hier werde ich sie als sekundäre sekundäre Schaltfläche bezeichnen. Okay. Wenn ich es ändere und die Mitteltaste drücke, wird die Sekundärtaste aufgerufen, und hier haben wir die Haupttaste. Ich habe die Standardtaste aufgerufen, wir können diese Standardtaste auf die Primärtaste ändern . Okay. In Ordnung. Jetzt haben wir zwei Versionen dieser Schaltfläche und wir können viele Versionen erstellen, wie wir wollen. Okay, lassen Sie uns vorerst diese Variante in unserem Frame verwenden. Um das zu tun, gehe ich zu Assets und hier zu unserem Button. Wenn ich klicke, sehen wir zwei, ich meine, es gibt zwei Varianten. Also drücke ich einfach darauf und von hier aus kann ich den gewünschten Tastentyp auswählen. Also werde ich auf sekundäre Schaltfläche klicken und dann auf Sofort einfügen klicken. Also hier ist es, und jetzt können wir diesen Namen ändern, an einem schönen Ort wie diesem. Und jetzt überlege, ob wir das zu einem Hauptknopf machen wollen. Gehen wir also davon aus, dass wir hier mehr erfahren müssen. Hier haben wir die Schaltfläche „Ich lernen“ und die Schaltfläche „Standort suchen“. Das ist die primäre Taste, und das ist die sekundäre Taste, und ich möchte sie zur primären Taste machen . Um das zu tun, klicke ich auf die Schaltfläche, und hier haben wir die erste Eigenschaft, ich klicke einfach so und klicke auf die primäre Schaltfläche. Es ändert sich einfach und ich erhalte alle Details dieser Komponente. Die primären Tastendaten. Wenn ich das dann zweitrangig machen möchte, kann ich einfach hier klicken und auf sekundäre Schaltfläche klicken, und wir können das mit jeder dieser Schaltflächen machen. Das ist der Vorteil, wenn man die Komponente kennt und weiß, wie man eine Variante hinzufügt. Lassen Sie uns auch eine weitere Variante erstellen. Ich drücke einfach Klasse und für diesen ändern wir die Details, lassen Sie uns zuerst das Feld entfernen und keinen Typrahmen erstellen, und lassen Sie uns diese Textfarbe in diese Farbe ändern. Dann fügen wir hier das Symbol hinzu. Fügen wir das Symbol hier hinzu. Um das zu tun, gehe ich zu Flossen und von hier aus holen wir uns das Symbol. Also werde ich das Symbol vom Plug In bekommen. Also suche ich einfach hier nach der Schriftart Osome, wir haben Fontosom-Symbole Ich klicke einfach darauf und von hier aus, lass uns das Symbol holen, lass uns das Symbol holen Ein Pfeil. Wählen wir diesen Pfeiltyp aus. Jetzt wähle ich einfach den Pfeil und drücke Command X und schneide ihn aus. Wenn Sie ein Windows-Benutzer sind, können Sie Strg X drücken und ich dann Befehl V. In Ihrem Fall ist es Strg V. Dann haben wir ein Design wie dieses. Ich klicke darauf und ich werde es so vergrößern. brauche diesen Pfeil nicht mehr, ALT-Kreis, lösche ihn einfach. Okay. Jetzt hier, ich werde auf dieses Logo klicken und das Logo in diese Farbe ändern. Okay. Jetzt klicke ich auf diese Variante und hier kann ich zwischen den Größen wechseln. Lass es uns so machen wie Okay. Jetzt kann ich das zu unserem Design hinzufügen. Bevor wir es hinzufügen, benennen wir diese Schaltfläche um, indem wir einfach auf die Schaltfläche klicken, auf die Schaltfläche klicken und sie in primäre sekundäre einfache Schaltfläche, einfache Schaltfläche ändern . Der Name ist nicht wichtig. Okay. Jetzt kann ich auch diesen Button hinzufügen. Wenn ich also zu AZAS gehe, hier und hier klicke, die Eigenschaft auf einfache Schaltfläche ändere und auf Instanz einfügen klicke, fügen wir hinzu, dass wir diese Schaltfläche wie folgt hinzufügen können Ich gehe zu Fs. Und jetzt fügen wir all diese Schaltflächen wie folgt in den Desktop-Rahmen ein. Okay. Jetzt hier, ich kann den Text ändern. Lassen Sie uns das ändern, um mit dem nächsten Schritt wie diesem fortzufahren. Wenn wir wollen, können wir jetzt einfach auf die Schaltfläche klicken und das Design so ändern. Siehst du, das ist wichtig, wenn man etwas über Komponenten weiß und eine Vorstellung von Varianten hat. Es wird uns helfen, die Konsistenz auf der gesamten Website aufrechtzuerhalten . 49. Inhalte für das Website-Design finden: Hallo, alle zusammen. Wenn der Kunde keine Text - oder Bildinhalte bereitstellt, müssen wir sie finden. Lassen Sie uns zunächst sehen, wie Sie Bildinhalte finden. Dazu können wir kostenlose Websites mit historischen Bildern wie pixadt com oder pixabay.com verwenden kostenlose Websites mit historischen Bildern wie pixadt com oder pixabay.com Diese Bilder sind lizenzfrei, was bedeutet, dass wir sie für unsere Produkte verwenden können In unserem Fall müssen wir Bilder finden, die sich auf die Familienklinik beziehen Ich werde einfach so etwas wie eine Familienklinik suchen, und hier sind die Bilder, die wir bekommen haben. Ich klicke auf diese Filter und stelle sie hier als horizontal ein. Dann können wir nur die horizontalen Bilder filtern. Ich werde einfach einige dieser Bilder auswählen, also öffne ich sie einfach in einem neuen Fenster. Lass uns dieses öffnen. Jetzt gehe ich auf pixabay.com und lass uns so etwas wie Doctor Presenter suchen Ich werde hier nur filtern , also suche und finde Bilder wie Ich habe bereits die Bilder ausgewählt, die wir Fertigstellung dieses Projekts benötigen wenn Sie echte Projekte entwerfen. Suchen Sie einfach nach Bildern, die sich auf Ihre Website-Nische beziehen. Lassen Sie uns nun sehen, wie man Inhalte generiert. Um Inhalte zu generieren, können wir GPT oder J Mini verwenden. Lass uns GPT verwenden. Ich kopiere einfach unsere und lass uns diese Eingabeaufforderung ausfüllen. Also hier sind Sie ein Webdesigner und werden die Website für die JB Family Clinic entwerfen Gehen wir also zu unseren Anforderungen an das Webdesign, kopieren wir diesen Namen, und dann möchte ich, dass Sie hierher kommen, wir müssen die Aufgabe hinzufügen Ich möchte, dass Sie Inhalte für jeden Bereich der Website generieren . Ich gebe dir den Namen des Abschnitts und du musst Inhalte generieren. Dann können wir hier im Abschnitt mit weiteren Informationen alle Details hinzufügen, die wir in der Tabelle mit den Webdesign-Anforderungen gesammelt haben . Fangen wir also von hier an, kopieren wir diesen und lassen Sie uns dem ins Auge sehen, dann gehen wir hier weiter und lassen es so hinter sich. Ein hier wie dieses, dann geh hier hin so. Das sind die Informationen , die wir zur Verfügung stellen können. Okay, dann geben wir mir drei Möglichkeiten. Wir müssen das ändern, weil wir es nicht an die Sektion geschickt haben , für die wir Inhalte haben wollen Also können wir Ihnen drei Optionen für jeden Abschnitt geben, wenn ich Ihnen den Abschnitt gebe und vorstelle, sagen wir, ich bin bereit, bei der Erstellung von Inhalten für jeden Bereich der Kenic-Website der BG Family zu helfen jeden Bereich der Kenic-Website der BG Family Okay, jetzt muss ich nur noch den Abschnitt hinzufügen, ich werde einen Abschnitt wie die Startseite hinzufügen hier haben wir den Heldenbereich Okay, wir haben Überschrift, Unterüberschrift und Aufruf zum Handeln. Wenn dieser Abschnitt dann nicht geeignet ist, können wir darüber berichten. Ich kann sagen, ich mag Option auch, aber Unterüberschrift und CTA bedeuten Aufruf zum Handeln Der Text auf der Schaltfläche ist zu lang. Kannst du es ihnen zeigen? Jetzt sage ich, es ist zu kurz. Dann kann ich sagen, dass es immer noch zu kurz ist. Und du kannst mir nur 150 Zeichen als Unterüberschrift geben. Hier haben wir die Unterüberschrift , die 150 Zeichen hat. Halten Sie die Konversation mit CGBD so aufrecht und generieren Sie Lesen Sie jedoch immer den von KI generierten Text, bevor Sie ihn zu Ihrer Website hinzufügen Okay. Jetzt werde ich Sie in echtem Webdesign sehen und Sie können all diese Schriftarten und Bilder aus dem Ressourcenbereich abrufen . 50. Design-Helden-Abschnitt: Hallo, alle zusammen. Es ist Zeit , unsere Website zu gestalten. Beginnen wir also mit der Erstellung des Rahmens. Ich werde hier einen Rahmen erstellen, also klicken Sie auf den Rahmen und dann hier, wählen wir den Rahmen in Desktop-Größe aus. Okay. Nun müssen wir laut unserer Sitemap zuerst die Startseite erstellen. Also werde ich es in Home umbenennen. Dann werde ich diese Webseitenstruktur hierher bringen, damit wir diese beiden Frames deutlich sehen können. Okay. Jetzt füge ich diesem Rahmen ein Layoutraster hinzu. Um das zu tun, klicke ich auf dieses Plus-Symbol und dann hier, ändere dann das Raster Spalte und die Spaltenanzahl wird 12 sein. Und dann behalten wir diese Farbe. Und hier müssen wir Marge hinzufügen. Fügen wir den Rand als 140 hinzu. Die Daten werden 20 sein. Okay. Lassen Sie uns nun die Deckkraft dieser Layoutraster wie folgt verringern die Deckkraft dieser Layoutraster wie folgt Wenn ich will, kann ich es jetzt speichern. Ich klicke einfach hier, wende den Stil an und ich klicke auf diesen kreativen Stil und lass uns daraus ein Anruf-Grid und eine Präsentation machen. Jetzt können wir diese Grid-Daten immer wieder verwenden. Als ersten Schritt müssen wir diesen Frame in ein AutoAyouTo konvertieren. Zu diesem Frame müssen wir ein automatisches Layout hinzufügen Dazu kann ich mit der rechten Maustaste klicken und hier auf OtoAyouto hinzufügen klicken. Ich kann auf den Rahmen klicken und Shift A drücken. Wenn ich Shift A drücke, wird das automatische Layout hinzugefügt. Dann müssen wir es hier als vertikales Layout festlegen, weil wir die Website von oben nach unten gestalten werden Website von oben nach unten gestalten Dann mache ich für diese vertikale Lücke zwischen Objekten eins zu 20, was bedeutet, dass wir einen Abstand zwischen zwei Abschnitten als 120 haben werden . Dann ist das horizontale Muster 140, was bedeutet, dass Inhalte nur innerhalb dieses Abschnitts verfügbar sind. Fügen wir den Rand für die Polsterung am oberen Ende als 20 hinzu. Okay. Jetzt ist es fertig. Zuerst werde ich dieses Design einfach vergrößern und dem Heldenbereich ein Hintergrundbild hinzufügen. Lass uns ein rotes Dreieck erstellen, ich drücke auf das rote Dreieck, klicke so, dann klicke ich auf dieses IgnooToAyout, weil wir ein Hintergrundbild hinzufügen werden Also mache ich jetzt WTs 1.440 und lass uns Höhen 800 machen. Okay. Lass uns das so formulieren. Jetzt füge ich das Bild hinzu, um das Bild hinzuzufügen. Ich klicke hier, klicke auf diesen kleinen Abwärtspfeil auf den geformten Zehen und klicke auf Bildvideo. Von hier aus wähle ich Bild 04 und klicke auf Öffnen. Und jetzt klicke ich auf das Rechteck und das Bild wird so hinzugefügt. Wenn ich will, kann ich jetzt den Zuschnitt einstellen und die Position anpassen. Also lass es uns so anpassen. Okay. Lassen Sie uns das jetzt im Vorschaumodus überprüfen, damit es so aussieht. Als nächsten Schritt müssen wir eine Overlay-Farbe hinzufügen Ohne das Hinzufügen einer Overlay-Farbe können wir keinen Text hinzufügen, können wir keinen Text hinzufügen da dies die Lesbarkeit der Startseite beeinträchtigt Um ein Overlay hinzuzufügen, können wir einfach auf diese Füllung und dann auf AddFll klicken . Hier können wir die Deckkraft Ich werde den Farbverlauf hinzufügen . Strahlend bedeutet, dass wir auf der einen Seite dunklere und auf der anderen Seite hellere Farben hinzufügen können. Also lass es uns tun. Also wird der Strahlungstyp linear sein. Wir können die Position so ändern. Für diesen werde ich also die helle Farbe oben und die dunkle Farbe unten einstellen . Also lass uns hier klicken. Also hier ist die Lichtfarbe. Stellen wir es auf 70 ein, und hier haben wir die dunkle Farbe. Also müssen wir die dunkle Farbe erhöhen. Oh, und von hier aus werde ich 100 machen. Dann können wir diese Farben anpassen. oben Lassen Sie uns oben hell sein, fügen wir etwa 25 hinzu und hier machen wir es etwa 80. Ja. Und wenn ich will, kann ich es so machen. Also lass uns noch ein bisschen mehr erhöhen. Okay. Jetzt wird es so aussehen. Also fügen wir einfach einen linearen Farbverlauf hinzu und wenn wir wollen, können wir diese Deckkraft auf runter ändern und es so heller machen Lass es uns wie bei machen. Klicken wir auf dieses I, um die Höhe unseres Layoutrasters zu erhöhen, und es wird so aussehen. Jetzt ist unser Hintergrund in Ordnung, als nächsten Schritt müssen wir den Inhalt hinzufügen. Also lass uns das in der nächsten Lektion machen. 51. Designmenü: Hallo, alle zusammen. Es ist Zeit, das Menü zu erstellen. Bevor ich das Menü erstelle, erstellen wir einen Rahmen für unseren gesamten Heldenbereich. Um das zu tun, klicke ich einfach auf Frame und dann hier. Okay. Dann setze ich die Breite als Füllcontainer und lass uns die Höhe auf 800 setzen weil 800 die Höhe dieses Hintergrunds ist. Jetzt ist dieser Rahmen größer als der Hintergrund. Um das Problem zu beheben, denken Sie daran, dass wir 20 hinzugefügt haben, wir 20 hinzugefügt haben den Rahmen auf unserem Home-Frame vertikal auszurichten? Also setzen wir es auf Null. Wenn ich es auf Null setze, passt dieser Rahmen einfach zum Hintergrund. Jetzt werde ich diesen Namen als Held ändern. Okay. Dann füge ich diesem Heldenrahmen ein automatisches Layout hinzu, wähle den Rahmen aus und drücke Shift A, und für das Layout ich das vertikale Layout fest und wähle als Position die Option „ Oben mittig ausrichten “ aus, damit wir das später ändern können. Dann entferne ich die horizontale Polsterung und setze sie auf Null. Dann klicken wir auf individuelles Fading. Ikone. Dann stellen wir es hier wie für den Boden ein, lassen Sie uns es auf Null setzen. Ordnung. Jetzt ist es an der Zeit , das Menü zu erstellen. Ich werde diese Art von Menü nicht erstellen. Ich werde ein anderes Menü erstellen. Also lass uns damit beginnen. das Menü zu erstellen, klicke ich zunächst auf Frame und dann hier. Dann lege ich mit einem Füllbehälter und lass uns auf Füllen klicken und Füllfarbe hinzufügen. Fügen wir Farbe als Weiß hinzu, aber sie wurde nicht angezeigt, weil wir dieses Bild so über dem Heldenbereich platzieren müssen. Okay, jetzt wird es angezeigt. Jetzt klicke ich auf den Rahmen und lass uns die Höhe auf 130 einstellen Okay, viel besser. Wir können diese Größen ändern , während sie entwerfen. Dann füge ich Ecke als 20 hinzu. Okay. Jetzt werden wir in diesem Frame unser Menü erstellen und es wird viel besser aussehen als dieses normale Menü, also lasst uns es erstellen. Zuerst klicke ich auf den Rahmen und drücke Shift A um ihn in ein automatisches Layout umzuwandeln oder dem Menü ein automatisches Layout hinzuzufügen. Dann tippe ich zweimal auf den Rahmen und ändere seinen Namen in Hauptmenü. Okay. Lassen Sie uns jetzt die Eigenschaften ändern. Wir benötigen ein horizontales Layout weil wir ein Menü von links nach rechts wie dieses Menü erstellen werden rechts wie dieses Menü sodass wir keine horizontale Polsterung benötigen, es auf Null setzen und wir keine vertikale Polsterung benötigen, um sie auf Null zu setzen Lassen Sie uns dann vorerst den horizontalen Abstand zwischen Objekten auf zehn belassen horizontalen Abstand zwischen Objekten Dann werde ich eine Linie links in der Mitte setzen. Dann fügen wir unser Logo hinzu. Haben Sie sich an die Lektion „ Komponenten“ erinnert ? Wir konvertieren dieses Logo in eine Komponente. können wir direkt auf dieses Logo zugreifen und eine Instanz davon erstellen Assert-Tab können wir direkt auf dieses Logo zugreifen und eine Instanz davon erstellen. Ich klicke auf ASEs und hier auf Local Asserts und hier auf unser Logo Ich klicke einfach darauf und klicke auf Insert Instant und dann werde ich es so platzieren Lass uns zu den Dateien gehen. Jetzt befindet sich diese Instanz oder dieses Logo außerhalb unseres Rahmens. Fügen wir es in dieses Hauptmenü ein, Fügen wir es in indem wir es wie Okay ziehen Jetzt ist es größer, also müssen wir ändern , um die Größe zu ändern Wir können das Aufkleberblatt überprüfen. Lassen Sie uns tatsächlich Command X oder Control X drücken , um es auszuschneiden, und lassen Sie es uns hier so platzieren. Dann ziehe ich es einfach hierher. Dann können wir die Größe dieses Textes verringern. Es ist 84, also lassen Sie uns es so verringern und vergrößern. Lass uns 40 55 und wir müssen diese Textgröße wie folgt ändern. Lass uns 42 draus machen. Was wir jetzt tun müssen, ist diese Zwischengröße zu ändern. Lassen Sie uns das wie sechs ändern und als Nächstes ändern wir das damit. Dann lass uns das ändern. Drücken wir Befehl oder Ctrl, ändern dann die Größe auf diese Weise und platzieren sie in der Mitte, wählen diese beiden Texte aus und machen wir sie zentriert und hier sind sie in der Mitte. Das Logo ist noch größer. Ich? Lassen Sie uns das Logo im aktuellen Modus überprüfen. Es ist immer noch ein bisschen größer, lassen Sie uns zuerst die Größe verringern, lassen Sie uns diesen Text auf etwa 50 erhöhen. Okay. Dann ändern wir das auf 35. Sagen wir es wie 36. Okay. Jetzt hier, klicken Sie auf die Mitte. Lass es uns auf Null ändern, so. Und dann klicke ich auf die Hauptkomponente und drücke Befehl. Wenn Sie Windows verwenden, drücken Sie die Strg-Taste und verringern Sie die Größe wie folgt. Okay. Jetzt wird die Nu klein. Der Grund dafür ist, dass sie automatisch auf Umarmung eingestellt ist, also ändere diese Seite einfach auf 120 Ich denke, wir fügen es als eins zu 20 hinzu. Mal sehen, 120 wären perfekt. Und jetzt werde ich dieses Logo wieder auf den Sternsitz setzen. Ich wähle es einfach aus und drücke Command X in Windows Control X, dann komm einfach her und füge es so ein und füge es so ein. Okay. Jetzt gehen wir wieder zum Menü und klicken auf den Menürahmen, und jetzt fügen wir horizontale Paddins Jetzt passt es perfekt. Lass es uns im Design sehen und es wird so aussehen. Wenn wir wollen, können wir das Logo vergrößern, aber das sieht besser aus. Jetzt müssen wir Menüelemente hinzufügen, um Menüelemente hinzuzufügen Wir können auf T klicken und so klicken. Dann füge ich einfach Text wie diesen hinzu und dann gehen wir zu unserer Sitemap. Es geht zuerst darum, den Text zu kopieren und hier zu klicken. Ich habe die Eigenschaften dieses Textes erhalten , während wir ihn kopieren. Also ist Ipress Control so eingestellt, dass die Änderung rückgängig gemacht wird und ich gebe einfach B Wood Und dann klicke ich auf diesen Text und hier, klicke auf Typografie und lass uns auf die Schaltflächen klicken Okay. Also, was ich tun werde, ist, das zu duplizieren, ein-, zwei-, drei-, dreimal. Also lass es uns duplizieren. Control C, Control V. Oh, komm schon, das gefällt uns. Dann fügen wir die anderen Texte hinzu. Wir haben Blöcke, also klicken Sie einfach hier und fügen Sie Block hinzu. Dann haben wir unsere Anbieter. Gehen wir also hierher und fügen unsere Anbieter hinzu. Mal sehen, ob der Text korrekt ist oder nicht, indem wir ihn zur URL-Leiste von Google Chrome Dann müssen wir Kontakt hinzufügen. Lass uns Kontakt hinzufügen. Okay. Inhalt. In Ordnung, nett. Jetzt müssen wir all diese Menüelemente auswählen und Shift A drücken, um einen AutoLayoutFrame zu erstellen Jetzt ist hier dieser Rahmen, also werde ich ihn in Menüelemente umbenennen und Okay. Gehen wir nun zur automatischen Layout-Einstellung des neuen Elements, also geben wir 20 zwischen den Seiten ein, und wir setzen all diese horizontalen Lücken und vertikalen Lücken Es scheint, dass es perfekt in der Mitte ausgerichtet ist. Okay. Also vergessen wir das Zuhause. Warum haben wir das Zuhause vergessen? Duplizieren wir „about“ und ändern wir es in Home. Okay. Jetzt ändere ich diese Home-Fill-Farbe in blaue Farbe. Okay, was wir jetzt hinzufügen müssen, sind Kontaktdaten der Klinik. Also möchte ich hier die Kontaktnummer hinzufügen. Also lassen Sie uns diese Details hinzufügen. Lassen Sie uns zunächst auf den Hauptmenürahmen klicken und im automatischen Layout zwischen Größen wie 60 hinzufügen. Okay. Jetzt wird es so aussehen. Dann überprüfe ich das Design von hier aus, aber wir können es besser machen. Also werden wir wahrscheinlich in der nächsten Lektion mehr Dinge tun. Bevor ich gehe, klicken wir auf diesen Home-Frame. Erinnern Sie sich daran, wann wir das Layoutraster das letzte Mal ausgeblendet haben? Klicken Sie auf dieses Einblendensymbol, um es wieder sichtbar zu machen. Okay. Jetzt wird es so aussehen. 52. Design-Call-Element: Hallo, alle zusammen. Jetzt ist es an der Zeit, hier eine Kontaktnummer für uns zu erstellen. Dazu müssen wir eine gefälschte Kontaktnummer generieren. Ich gehe zu GPT und füge Befehle wie „Eine gefälschte US-Kontaktnummer erstellen und „Geben Sie sie zum Hinzufügen“ auf der rechten Seite des Menüs Geben Sie also Klartext ein , um das Geschenk hinzuzufügen. Okay, das sieht gut aus, aber ich brauche keine verfügbare Zeit. Ich muss nur eine Anruftextnachricht hinzufügen. Ich werde einen Befehl hinzufügen, z. B. Ich brauche keine offene Kontaktnummer mit dem Typ CTA, nimmt CDM in Call to Mal sehen, es ist so, aber das gefällt mir immer noch nicht Ich werde sagen, dass ich uns nicht gerne rund um die Uhr anrufen und die Kontaktnummer unten hinzufügen würde, aber uns zwei, vier, sieben anzurufen , muss besser sein. Lass uns sehen. Okay, jederzeit erreichbar. Sagen wir, geben Sie mir drei Vorschläge. Keine Kurzversion. Okay, fügen wir das hinzu, rufen Sie uns rund um die Uhr an und fügen Sie dann die Nummer hinzu. Um das zu tun, gehe ich zum Home-Frame und hier ist der Ort , an dem wir es hinzufügen möchten. Also werde ich T drücken und hier klicken. Dann werde ich den Text hinzufügen. Lass es uns kopieren. Hier ist der erste Text. Ich füge es einfach ein und lass uns Command C und Command V dazu zwingen und dann diesen Text so übergeben Jetzt werde ich bei Style zuerst hier klicken und die Typografie ändern Lassen Sie uns die Subhding-Typografie einstellen. Dann lassen Sie uns das hier wie Subding-Typografie einstellen. Dann wähle ich immer diese beiden Elemente aus und drücke Shift A, um sie zum automatischen Layout hinzuzufügen Dann ändern wir die Position in ein vertikales Layout. Dann lassen Sie uns die sechs Seiten dazwischen legen. Okay. Also hier, ich möchte, dass diese Klasse etwas kleiner ist und diese Zahl größer sein sollte. Ich klicke auf Conc las 247 und lasse es uns auf die Schaltflächengröße ändern. Das ist besser. Dann werde ich hier klicken und den Stil dieser Typografie von der Zahl trennen, dann lassen wir sie fett formatieren Jetzt ist es viel besser. Jetzt brauche ich hier das Telefonsymbol. Lass uns das auch machen. Um es hinzuzufügen, benötigen wir ein Symbol. Holen wir uns das Symbol aus der Figma-Bibliothek. Hier drin haben wir Aktionen. Ich klicke einfach darauf und von hier aus klicke ich auf Plug-In und Widget. Und von hier aus können wir das Pontosom-Symbol bekommen. Ich suche einfach nach Fontsom Jetzt klicke ich einfach auf dieses Pontosom-Symbol und ich glaube, ich habe es bereits installiert, ich habe es bereits installiert Jetzt klicke ich einfach auf dieses Pontosom-Symbol und ich glaube, ich habe es bereits installiert, ich habe es bereits installiert. Also lasst uns das Symbol herausfinden und es hinzufügen. Holen wir uns den Icon-Code. Lass uns wie ein Telefon suchen. Okay. Wir haben eine Ikone. Ich klicke einfach auf dieses und es wird so hinzugefügt, dann wähle ich nur das Symbol und füge es so in unseren Rahmen ein. Okay. Dann wähle ich diese beiden Elemente aus und Shift A, um verschiedene Frames zu erstellen. Hier ist der erste Frame , den wir für den Zahlenbereich oder den Schriftbereich erstellt haben , und hier ist der zweite Frame. Im zweiten Rahmen oder im zweiten Noto-Layout haben wir Claus 247 und diese Kontaktnummer. Dann wähle ich den ersten Rahmen und ändere das Layout in ein horizontales Layout Dann werden wir diese Art von Ergebnis erhalten. Okay. Jetzt möchte ich einen blauen Hintergrund um dieses Symbol herum erstellen. Dazu wähle ich das Symbol aus und drücke Shift A und mache es zu Atayou, dann klicke ich auf Align Center Zuerst fügen wir das Outlayou hinzu, dann machen wir daraus eine Linienmitte. Dann klicke ich auf das Plus-Symbol in der Feldfarbe. Dann kann ich hier tatsächlich direkt auf diesen blauen Stil wie diesen klicken. Dann werde ich 20 hinzufügen, so wie hier. Jetzt hat es sich nicht entsprechend den Änderungen geändert, um das Problem zu beheben. Ich werde es ändern, um den Inhalt zu umarmen Jetzt machen wir es um zwei. Zwei kleine. Machen wir es 15 mal 15. Jetzt werde ich die Ecken auf 20 ändern. Es ist eigentlich immer noch klein, aber wir können es vielleicht reparieren Dann füge ich dieser automatischen Layoutebene einen Strich hinzu , um das zu tun. Jetzt klicke ich auf das automatische Layout, klicke auf dieses Plus, ich kann und hier wählen wir unsere Farbe als Blau aus. Dann klicke ich auf diesen abgetrennten Stil und wähle von hier aus die hellblaue Farbe Das wird funktionieren. Dann erhöhe ich die Größe auf etwa zehn und lass es uns nach draußen stellen, lassen wir es tatsächlich drinnen und wir werden das Design weiter ändern. Okay. Jetzt gehe ich in den Rahmen und wähle den Vektor aus. Dann werde ich diese Vektorgröße auf 41 mal 41 erhöhen. Es ist 41 mal 40. Es ist okay. Jetzt klicke ich auf den Vektor und ändere seine Füllfarbe in weiße Farbe. Jetzt ändern wir es auf 30 32 mal 32. So wie das hier. Wenn wir das 32 machen. So wie das hier. Jetzt ist es viel besser und ich hoffe, wir haben den E-Raum. Hier haben wir sechs als Abstand. Lassen Sie uns nun das Alignu korrigieren , denn das bezieht sich auf diesen Rahmen Um das Problem zu beheben, müssen wir nur auf dieses Hauptmenü klicken und diesen 62 Auto Presenter ändern diesen 62 Auto Presenter Jetzt passt er sich einfach an den vorhandenen Speicherplatz Okay. Jetzt haben wir ein vollständiges Menü wie dieses, sodass wir auf den Hauptmenürahmen klicken und nach links und rechts wechseln können, sodass wir sechs daraus machen können. Okay. Lass uns sehen. Es sind etwa zwei weniger. Machen wir 50 draus. Okay. Nun, hier ist unsere Speisekarte. Es sieht aus, als wären es zwei kompakte. Also lassen Sie uns das zuerst korrigieren, wir können die Größe dieser Schrift auf etwa 20 reduzieren, dann ändern wir diese Einstellung auf 15, 60, dann klicken wir auf den Menüpunkt und lassen Sie uns 60, dann klicken wir auf dazwischen Größe 30 machen. Lass uns sehen. Jetzt ist es viel besser und wir sehen uns in der nächsten Lektion. 53. Design-Heldenabschnitt CTA: Hallo, alle zusammen. Jetzt ist es an der Zeit, diesen Abschnitt zu erstellen. Lass uns damit beginnen. Zuerst gehe ich hierher und klicke auf Text und füge hier einfach Text hinzu, also fügen wir Text wie Hero-Text hinzu. Dann sollten wir diesen Text hinzufügen. Es ist bereits in der Heldenabteilung. Okay. Bevor wir das tun, benennen wir im Hauptmenübereich diese Frame-Details um. Dieser Rahmen wird uns anrufen und er wird das Anrufsymbol sein und diesem Rahmen wird eine Nummer hinzugefügt. Nett. Lassen Sie uns nun den Hero-Abschnittstext oder den CtA-Text erstellen Dazu drücke ich hier auf T- oder Clec-Text und klicke hier Dann lass uns einen Text wie Hero verwenden. Jetzt werde ich diesen Hauptmenübereich minimieren , weil wir bereit sind. Unterschreiben Sie das und jetzt wählen wir von hier aus den Text aus und gehen dann zu Typografie und sagen Sie Kopfzeile oder wählen Sie den Kopfzeilentext so Okay. Dann fügen wir den Header hinzu, der mit GPT generiert wurde Hier ist die Überschrift. Ich kopiere es einfach. Sie können also selbst Inhalte mit GPT generieren, oder Sie können dort den Ressourcenbereich überprüfen In dieser Textdatei sehen Sie eine Textdatei. Sie können den Inhalt abrufen, den wir auf dieser Website verwenden Lass es uns so hinzufügen. Lassen Sie uns jetzt die Unterüberschrift hinzufügen, ich werde auf T klicken. Ja, ich werde auf T klicken und dann auf „Gefällt mir“ klicken. Dann fügen wir Text wie diesen hinzu. Dann fügen wir diesen Text hinzu, kopieren ihn, fügen ihn so hinzu. In Ordnung. Gehen wir jetzt zur Typografie und ändern sie in Unterüberschrift. Okay, jetzt haben wir die Unterüberschrift und die Überschrift. Eigentlich können wir, wenn wir wollen, eine weitere Textzeile hinzufügen und den Text vom Typ Absatz hinzufügen, aber das ist für die CtA-Kabeljaureaktion. Cd-Aktion sollte also klar sein . Okay, was wir jetzt tun können, ist, den Button zu erstellen. Wir werden also mehr als eine Taste benötigen. Lassen Sie uns also eine Schaltfläche erstellen und sie zu einer Komponente machen. Um das zu tun, gehe ich zu unserem Stiger-Blatt und lass uns das duplizieren und nennen wir es Button Okay Jetzt drücke ich T und hier werde ich sagen, aber ja Able, dann wähle ich die Typografie als Schaltflächen aus. Okay. Jetzt verschiebe ich die Pfadtaste A, um dieser Schaltfläche ein automatisches Layout hinzuzufügen. Und dann füge ich von hier aus die Feldfarbe hinzu. Fügen wir die Feldfarbe als blaue Farbe hinzu. Und dann wählen wir den Text dieser Schaltfläche und ändern ihn in weiß oder ändern wir den Text, und in diesem Rahmen ändere ich den Eckenradius auf 20. Dann füge ich für den horizontalen Rand 20 hinzu, fügen wir 30 hinzu, ist größer Fügen wir 20 hinzu und oben und unten werden 15 sein. Hier ist der Button. Jetzt können wir direkt die Instanz dieser Schaltfläche abrufen. Um das zu tun, gehe ich zu ASSets und hier komme ich zu den Bibliotheken und klicke hier. Okay. Jetzt werde ich das in eine Komponente umwandeln. Bevor ich das mache, werde ich diesen Frame in VTN umbenennen. Dann klicke ich auf die Schaltfläche „Komponente erstellen“ und sie wird zu einer Komponente. Jetzt gehe ich zu unserem Design und hier werde ich auf Asserts klicken und hier haben wir die Schaltfläche, also klicke ich einfach darauf und dann auf Insert Instant Jetzt gehe ich zu den Dateien, sodass sich diese Schaltfläche außerhalb des Frames befindet Fügen wir es dem Heldenrahmen hinzu. Füge es einfach so hinzu. Lassen Sie uns nun dieses Etikett ändern , um einen Termin anzufordern. Ich werde den heutigen Teil nicht hinzufügen. Fügen wir es hinzu, als ob Sie einen Termin anfragen möchten. Also wenn ich es überprüfe, scheint es wirklich klein zu sein. Also lass es uns größer machen. Um es größer zu machen, kannst du hier klicken und auf den Text klicken. Im Text klicke ich auf diese ausgerichtete Mitte und dann hier, dann beträgt der horizontale Abstand 30 und der obere und untere Abstand 25. Ist es zu viel? Lass uns machen. Okay, lass uns sehen, wie es aussieht. Okay, viel besser. Klicken Sie hier und lassen Sie uns von hier aus Änderungen vornehmen, damit wir deutlich sehen können, was wir auf diese Weise tun können. Für diesen Heldenbereich sollten wir eine größere Schaltfläche haben, um ihn zu erstellen Ich klicke auf die Komponente und von hier aus klicke ich auf Variante. darauf klicken, können wir eine Variante unserer Standardkomponente erstellen , was bedeutet, dass sie alle Eigenschaften unserer Komponente hat, und wir können diese Eigenschaft nach Belieben ändern. Also ändern wir es so, dass links und rechts 35 sind und oben und unten 25 ja, das wird besser sein. Okay, dann klicke ich darauf. Jetzt klicke ich auf die Schaltfläche und von hier aus ändere ich ihren Namen in „Gefällt -Header-Schaltfläche und drücke dann auf Okay. Gehen wir nun zu unserer Schaltfläche und von hier aus können wir die Eigenschaft ändern. Es ist derzeit Standard. Wenn ich dann auf die Kopfzeile klicke, wechselt sie zu der Variante oder der Variante, die wir erstellt haben. Okay, ich wähle alle aus und drücke Shift A, um ein automatisches Layout hinzuzufügen Dann benenne ich es in CtA Okay, dann werde ich hier zwischen Japa 220 setzen und von hier aus, lassen Sie es uns so sagen, ich werde es so platzieren, ich werde es so platzieren Okay. Dann möchte ich , dass das am Ende dieses Heldenbereichs steht. Also lass uns versuchen, es zu tun. Also, hier ist derzeit die Helden-Sektion. Im Heldenbereich haben wir das Menü, aber dieser CtA befindet sich außerhalb dieses Heldenbereichs Wenn ich also den Heldenbereich schließe, wird der CtA nicht geschlossen, also müssen wir ihn so in den Heldenbereich einfügen Okay. Jetzt können wir auf den Heldenbereich klicken und dann auf eine Zeile oben links Von hier aus stelle ich das zwischen den Seiten ein, dann setze ich die Höhe des Heldenabschnitts auf 800. Danach füge ich den unteren Teil hinzu und füge 20 hinzu. Es scheint, dass 20 zu klein ist. Machen wir 60 draus. Okay. Jetzt ist es viel besser und wir sollten es auf 40 machen. Okay. Schauen wir uns nun das Aussehen dieses Designs an. Okay, hier ist unser Design. Um das besser zu machen, können wir eine größere Unterüberschrift hinzufügen Versuchen wir, eine größere hinzuzufügen. Wenn wir bei Option zwei diese Unterüberschrift wählen, ist sie sogar Option zwei diese Unterüberschrift wählen, besser Also lasst uns versuchen, es einfach so hinzuzufügen und dann, um es zu korrigieren, wähle ich den CtA aus und lass uns die CtA-Größe als Hug Container wählen, und hier, lass es uns als Fill auswählen, eigentlich müssen wir es immer noch so verkleinern Lass es uns so ausdrücken. Okay. Schauen wir uns jetzt das Design an. Es wird so aussehen. Lassen Sie uns den Eckenradius auf 15 ändern. Lass uns versuchen, das zu tun. Ich klicke einfach hier und lass es uns auf 20 ändern. Nein 20, 15. Machen wir es für diesen einen, zwei, und wir werden sehen, wie es sich nebenbei ausgewirkt hat. Es ist jetzt viel besser. Und ich klicke auf den Hintergrund und lass uns die Dunkelheit des Hintergrunds erhöhen. Ich klicke auf linear und hier erhöhe ich die Deckkraft wie Unreno, hier isoliere ich den Heldenbereich und unten machen wir es Okay. Schauen wir uns jetzt das Design an. Jetzt wird es so aussehen. Wir können so etwas machen, und es wird jetzt viel besser sein. 54. Design über Abschnitt: Hallo, alle zusammen. Jetzt ist es an der Zeit, die Zusammenfassung über uns zu entwerfen. Also lass uns das machen. Zuerst müssen wir den Inhalt generieren, also gehe ich zu GPT, und hier werde ich sagen, Generieren Sie eine Zusammenfassung über uns mit Überschrift, Überschrift und Absatz mit einem Absatz mit der Belastung Wir sind also bereit für diesen Befehl. Wenn wir jetzt diesen neuen Befehl geben, wird er den Abschnitt generieren. Lassen Sie uns weitere Informationen hinzufügen. Jetzt ist es an der Zeit, einen zusammenfassenden Abschnitt über uns mit Überschrift und Schaltfläche zu erstellen . Lass uns die Eingabetaste drücken und mal sehen, ich habe drei Optionen. Jetzt möchte ich sagen, ich möchte unserer Struktur zwei Schaltflächen hinzufügen, wir haben zwei Schaltflächen. Lass uns okay, lass uns diese drei Optionen lesen. Okay. Mir gefallen die Überschrift und der Absatz der ersten Option und die vier Schaltflächen. Ich werde eine Schaltfläche hinzufügen, um mehr zu erfahren , und die nächste Schaltfläche, wenn es um Meat Tower-Anbieter geht. Okay, lass uns das machen. Also hier ist die Textdatei, in der ich alle Informationen hinzufüge, die ich mit KI generiert habe, also werde ich dieser Überschrift und diesem Absatz eine Zusammenfassung hinzufügen , dann müssen wir Schaltflächen hinzufügen, um mehr zu erfahren Schaltfläche „ Weitere Informationen“ hinzufügen und die Turmanbieter kennenlernen Es sind die Schaltflächen „ Weitere Informationen“ und die zweite Option werden MO-Anbieter sein Lassen Sie uns nun mit dem Design beginnen. Jetzt bin ich bei unserer Figma-Datei Als ersten Schritt werde ich auf Frame klicken und hier klicken. Dann setze ich Fame mit dieser Füllung und füge dann Höhen hinzu Fügen wir es etwa 600 hinzu. Okay, jetzt haben wir den Abschnitt. Dann werde ich Shift A drücken, um das automatische Layout hinzuzufügen. Wir fügen diesem Frame einfach ein automatisches Layout hinzu und ich werde diesen Frame als Zusammenfassung umbenennen. Okay. Jetzt müssen wir als ersten Schritt ein Bild hinzufügen und lassen Sie uns dieses Bild hinzufügen. Um zuerst ein Bild hinzuzufügen, klicke ich auf Vertragsdreieck und dann hier. Okay, unsere Größe wurde geändert. Klicken wir auf einen Übersichtsrahmen , in dem wir bereits das automatische Layout hinzugefügt haben. Fügen wir diese Höhe also als 600 hinzu. Okay, jetzt sollten wir auch die horizontale Polsterung und auch die vertikale Polsterung entfernen Dann stelle ich hier den Artikel zwischen Größe 20 ein. Okay. Jetzt werde ich das Bild so vergrößern. Das. Mal sehen, wie viele Spalten wir haben? Eins, zwei, drei, vier, fünf, sechs. Okay. Und für diese Seite haben wir eins, zwei, drei, vier, fünf, sechs. Okay. Eigentlich werde ich diese Größe einfach auf reduzieren. Lassen Sie uns diese Breite auf 520 setzen. Okay. Jetzt fügen wir das Bild hinzu. Um das Bild hinzuzufügen, klicke ich hier und klicke auf das Imagevideo. Okay, von hier aus müssen wir ein Bild auswählen, also habe ich dieses IMG Null, drei Bild gelassen und Enter gedrückt. Dann klicke ich hier auf das Rechteck wie dieses. Okay. Jetzt füge ich Corner Radice als 20 hinzu, so wie hier Lass es uns auf dem Design sehen, damit es so aussieht und lass uns versuchen, ein anderes Bild hinzuzufügen Ich klicke auf dieses rote Dreieck und klicke hier, klicke auf Bildvideos und lass uns diese Art von Bild hinzufügen, und lass uns diese Art von Bild hinzufügen weil mir diese Bildfarbe nicht gefällt. Okay. Okay, es sieht so aus. Okay. Jetzt müssen wir diese Art von Informationen hinzufügen. Fügen wir sie hinzu, um sie hinzuzufügen. Dazu muss ich zwei Arten von Text erstellen. Lassen Sie uns diesen Text mit Chat-GBT generieren. Nehmen wir an, eine Aktion im Zusammenhang mit IC. Eins, jetzt muss ich zwei Texte hinzufügen, um sie um die Bilder herum hinzuzufügen, zum Beispiel 100% K, wir haben Experten wie diesen. Nehmen wir an, Sie geben mir drei Auswahlmöglichkeiten, wenn mein Englisch in Ordnung ist. Lassen Sie uns sehen, was es generiert. Es ist zu lang. Nehmen wir an, es ist zu lang. Okay. Mir gefällt diese erste Option, also werde ich sie kopieren und sie so in unser Dokument einfügen. Okay, habe gerade Text zu Bildern hinzugefügt. Okay. Gehen wir jetzt zu unserer Datei und lassen Sie uns diese Texte plus Ist erstellen und unser erster Text wird zu 100% chaotisch sein. Lassen Sie uns einen weiteren Text erstellen, und lassen Sie uns das so , um diese Informationen zu erhalten. Und jetzt erstelle ich einen weiteren Text wie diesen, dann werde ich es tun. Entschuldigung, lassen Sie uns einen anderen Text erstellen. Dann füge ich hier Text ein und 100 pro hier. Dann klicke ich auf diesen Text und füge ihn in der Typografie als Kopfzeile hinzu Dann werde ich das für diesen als Unterbedingo hinzufügen Für diesen vertrauenswürdigen Experten werde ich nun Untergliederung hinzufügen Mal sehen, dass diese Schrift funktioniert. Ja, es scheint, dass es funktionieren wird. Wir haben hier Platz. Ich singe einfach dieses Leerzeichen, und jetzt muss ich diese Texte wie diesen hinzufügen, um sie hinzuzufügen Ich wähle einfach zwei davon aus und drücke Shift A, um das automatische Layout hinzuzufügen. Dann klicke ich auf das vertikale Layout und stelle es als mittleres Layout ein. Dann werde ich für diesen Artikel einfach einen Wert zwischen sechs setzen, so wie diesen. Lass uns vielleicht auf Null sinken. Er Null wird perfekt sein. Es scheint, dass K zu klein ist, also schauen wir uns einen anderen Text von hier zu 100% an, lassen Sie uns diesen kopieren und versuchen, ihn zu formulieren Okay, er scheint besser zu sein als nur K. Ja, fügen wir ihn so Dann werde ich vielleicht versuchen, die Typografie so zu gestalten, dass die Taste zu schwach ist Lass es uns in einen Absatz ändern. Okay, der Absatz ist viel besser. Ja. Der Absatz ist okay. der Absatzgröße müssen wir jetzt Farbe und Hintergrundfarbe hinzufügen. Fügen wir diesem Rahmen eine Hintergrundfarbe hinzu , wählen den Rahmen und benennen ihn in 100% K, Tag oder so um. Lassen Sie uns das so angehen. Dann klicke ich auf Plus kann füllen, und hier füge ich Y hinzu. Dann reduziere ich die Ecken auf 20, und jetzt gehe ich zu X und klicke auf dieses Plus Jetzt füge ich Schlagschatten hinzu und klicke hier. Von hier aus setze ich X auf Null, Y auf Null und lass uns Transparenz auf 15 setzen , Unschärfe auf 15. Okay. Jetzt muss ich das horizontale Padin hinzufügen. Fügen wir das horizontale Padin als sechs hinzu, viel besser und das vertikale Padding Okay. Von hier aus stellen wir es auf zwei ein Okay, 12 ist besser. In Ordnung, wir erstellen nur einen Teil. Jetzt muss ich das Element auswählen, das ich erstellt habe , dann klicke ich auf dieses IgnooToAyout und jetzt kann ich es so platzieren Lass es uns hier platzieren. Lass es uns hier hinstellen. Wir müssen es außerhalb dieses Themas über die Zusammenfassung hinzufügen. Dazu wähle ich es aus und füge es Fügen wir es zuerst hier hinzu Okay. Jetzt muss ich es so runterholen. Okay. Jetzt haben wir diesen Abschnitt. Lass es uns so ausdrücken, lass es uns so sagen. Dann haben wir diesen vertrauenswürdigen Expertenteil und für diesen müssen wir ein Logo hinzufügen. Lassen Sie uns das Logo hinzufügen. Um das Logo hinzuzufügen, klicke ich hier und füge das San-Widget ein. Dann klicken Sie hier auf die Fontosm-Symbole, Suche ist nicht gut Wir haben eine Krankenschwester. Fügen wir diese Krankenschwester hinzu. Klicken Sie einfach hier. Platzieren wir es außerhalb dieses Rahmens, klicken Sie einfach darauf und fügen Sie es zu einer Zusammenfassung wie dieser hinzu. Dann wähle ich diese beiden Elemente aus und drücke Shift A. Jetzt füge ich einfach das automatische Layout auf acht hinzu. Dann klicke ich auf dieses vertikale Layout und setze es als Linie, Mitte, okay, dann brauchen wir hier nicht die beiden Telefon-ALT-Einstellungen und den Schwesternrahmen. Wir haben diese beiden Rahmen erhalten, als wir ein Symbol hinzugefügt haben, also entferne ich sie einfach. Jetzt muss ich diese Größe erhöhen. Lass es uns so erhöhen. Fügen wir es so hinzu, dass es besser sein wird. Dann fügen wir für diese Zwischengröße etwa sechs hinzu. Sehen wir uns jetzt diesen an. Bei diesem fügen wir 12 und sechs als Zwischengröße hinzu. Lass uns auf diesen Rahmen klicken und hier, lass uns das Two Trust First Tago-Element so umbenennen , dann komme ich hierher und ändere die Feldfarbe Sicherlich ist die Feldfarbe diese weiße Farbe. Dann gehe ich hierher und bei Effekt kann ich einen Effekt wie diesen hinzufügen Tatsächlich haben wir bereits einen Effekt zu diesem Tab mit 100% Pflege hinzugefügt , also können wir einfach darauf klicken und auf Effekt Ich drücke dann auf Stil anwenden und dann auf dieses Plus-Symbol Dann füge ich Perfect, 01 hinzu und drücke. Okay. Nun, hier kann ich auf diesen verrosteten Experten-Tag klicken und von hier aus werde ich darauf klicken und dann auf EFFXs wie diesen klicken Dann muss ich vertikale und horizontale Felder wie diese hinzufügen . Dann ändern wir diese Größe auf 20. Okay. Lassen Sie uns dieses horizontale Muster zu zwei hinzufügen und das vertikale Muster wird 220 sein. Okay, es ist viel besser. Und dann ändere ich die Farbe der Krankenschwester, damit wir sie zu Blau machen. Okay. Sieht gut aus. Jetzt habe ich hier geklickt und auf dieses Igno Auto-Layout geklickt. Danach muss ich es einfach so ausdrücken. Lass uns das hier machen. Okay. Also, lassen Sie uns das hier so platzieren und das hier in der Mitte zwischen der Größenlinie und hier fügen wir es wie 60, 50, 50 hinzu. Ordnung, in Ordnung. Nun schauen wir uns das Design an, es wird also so aussehen. Und wir versuchen immer, eine minimalistische Version zu erstellen, also versuche nicht, zu viel Zeug hinzuzufügen. Jetzt ist es an der Zeit, den Text zu erstellen. Also werde ich zuerst T drücken und diese Art von Text hinzufügen. Dann fügen wir den Text hinzu , von dem wir ihn hier kopieren. Es ist auf unserem Inhalt. Ich kopiere es einfach und komme her. füge ich es ein, dann ändere ich die Typografie in einen Header wie diesen Gehen wir also über diese Größe hinaus, um das Problem zu beheben. Ich klicke hier und stelle das so ein, dass ein Behälter wie diesen gefüllt wird. Okay. Was ich jetzt tun muss, ist diese Zwischengröße so zu vergrößern. Lass uns das auf etwa 90 erhöhen. Erhöhen wir etwa 90, nicht 690. Okay. Und jetzt müssen wir eine Zusammenfassung hinzufügen , dazu drücke ich T und erstelle Text wie diesen, dann muss ich diese beiden Abschnitte markieren und Shift A drücken. Und jetzt haben wir hier einen neuen Rahmen für das automatische Layout hinzugefügt, dann ändere ich dieses horizontale Layout in ein vertikales Layout, und darin werde ich diese Kopfzeile nach oben bringen und diese wird unten sein. Lassen Sie uns diesen Rahmen also auf 22 ändern, was die Zusammenfassung angeht. Okay. Dann werde ich hier die Zwischengröße auf 20 setzen und dieser Text wird ein Absatz sein. Jetzt klicken wir hier, klicken wir auf unsere Web-Content-Textdatei und ich kopiere diesen Absatz einfach so, dann fügen wir diesen Absatz ein und ich werde diesen Hug-Inhalt so ändern, dass diesen Hug-Inhalt füllt, nicht Inhalt füllt, Container füllt, dann wird er wie folgt hinzugefügt Mal sehen, im echten Design wird es so aussehen, und die ganze Zeit vergesse ich, die Füllfarbe zu ändern Also lass uns die Füllung ändern. Klicken Sie hier und klicken Sie auf dieses Schwarz, da es sich nicht um eine dunkelschwarze Farbe handelt. Das ist ein bisschen hell. Lassen Sie uns die Füllfarbe auf diese dunkle Farbe ändern , die in unserer Farbpalette ausgewählt ist. Okay. Und jetzt müssen wir das in der Mitte platzieren , damit wir die Zusammenfassung versiegeln und ihre Position so ändern können, dass sie links in der Mitte ist wie folgt. Jetzt müssen wir zwei Buttons hinzufügen. Außerdem scheint dieses Bild zu groß zu sein. Lassen Sie uns also seine Höhe verringern, wenn der Befehl Iface in Windows die Steuerung übernehmen sollte Dann ändere ich es einfach so, lass es uns wie 500 ändern, und dann doppelklicke ich auf das Bild und lass uns das Bild so einstellen Okay. Dann klicke ich hier und stelle das hier ein. Okay, jetzt ist es viel besser weil wir hier nicht viele Inhalte hinzufügen können, also wird es jetzt so aussehen. Und jetzt kommen wir her und fügen unsere beiden Schaltflächen hinzu. Um zwei Schaltflächen hinzuzufügen, können wir die Schaltflächen verwenden, die wir als Komponente erstellt haben. Also lasst uns das tun, um das zu tun. Hier gehe ich zu Assets und Asserts. Klicken Sie hier. Dann haben wir diese BTN, klicken darauf und die Eigenschaft ist Standard, weil die Header-Schaltfläche größer als die Standard-Schaltfläche ist Fügen wir die Devolve-Schaltfläche hinzu und klicken Sie auf Insert Instant. Dann gehen wir zur Datei, und jetzt müssen wir diese Schaltfläche in das Dokument über die Zusammenfassung einfügen . Nein, über den Übersichtstext Fügen wir es also so hinzu. Okay. Lassen Sie uns jetzt das Button-Label ändern. Klicken Sie hier und das Button-Label wird mehr darüber erfahren. Lass es uns so hinzufügen. Okay, jetzt wird es so aussehen, dann werden wir auch hier einen Button haben. Lass uns diesen Button erstellen. In diesem Fall ist es dieser. Um das zu tun, werde ich es als Variante dieser Hauptschaltfläche erstellen . Um das zu tun, werde ich hier zu unserer Hauptkomponente gehen. Du erinnerst dich an die letzten Lektionen, wir erstellen diesen Button. Lassen Sie uns also eine Variante erstellen. Um eine neue Variante zu erstellen, klicke ich auf die BTN-Komponente und dann auf dieses Plus-Symbol , um eine Variante hinzuzufügen Okay. Jetzt müssen wir hier diese Art von Schaltfläche erstellen. Es zu erstellen ist einfach, also lass es uns tun. Also hier entferne ich zuerst die Füllfarbe und dann klicke ich auf dieses Etikett und ändere die Füllfarbe in Blau. Dann wähle ich die Variante aus und lass uns diesen Variantennamen wie folgt in sekundäres BTN ändern diesen Variantennamen wie folgt in sekundäres BTN Ich denke, die Worte sind richtig. Lass uns sehen. Nun, die Worte sind falsch. Nochmals, lassen Sie uns das Wort so ändern, sekundär tn, jetzt klicke ich auf die Variante und hier ändere ich es links und rechts auf etwa 20 und lasse oben und unten 20 stehen. Dann muss ich das Symbol hinzufügen. Füge das Symbol hinzu, ich klicke hier und gehe zu Fonosm und von hier aus tippe ich wie ein Pfeil Okay, diese Pfeile sind nicht gut verkauft. Fügen wir also diesen Pfeiltyp hinzu, klicken wir darauf und lassen Sie uns herausfinden, wo wir ihn anpassen. Okay. Es passt sich hier an, ich drücke einfach Befehl X, um es zu kartieren, und dann klicke ich hier und füge Befehl V ein, um es so einzufügen. Okay, jetzt ist es in dieser Variante und dazwischen wird Größe sechs sein. Lass uns diese Farbe zu einer blauen Farbe ändern. Okay, lassen Sie uns die Größe etwas verringern. Okay. Es ist zu klein. Drücken wir. Lass es uns so belassen. Und jetzt, wenn wir wollen, können wir diese Bezeichnung mit etwas mehr ändern , weil die Breite des Symbols größer ist Also werde ich diesen Stil unverändert lassen oder den Stil entfernen und ihn dann in Fett ändern Fett wird okay sein. Ordnung. Jetzt haben wir so ein Labor. Dann komme ich her und jetzt muss ich nach*** in Asats gehen Ich klicke auf BTN und wähle von hier aus sekundäres BTN aus und Dann füge ich es in diesen Rahmen mit automatischem Layout ein. Der Name des Rahmens bezieht sich auf den Übersichtstext Hier ist unsere Wette auf unseren Button. Ich ziehe es einfach per Drag-and-Drop wie hier. Ich bin nicht gekommen. Versuchen wir es noch einmal. Ich habe hinzugefügt und jetzt werde ich die Position der Schaltfläche so ändern. Jetzt sehe ich diese beiden Schaltflächen und drücke Shift A, um einen neuen Rahmen zu erstellen Hier werde ich ihn als horizontales Layout festlegen. Okay, die Größe dazwischen wird 220 sein, und jetzt werde ich diesen Rahmen so ändern, wie BTN eingestellt Ich habe diesen Frame-Namen einfach in TNS umbenannt, und jetzt muss ich diesen Text ändern Der Text wird in unser Dokument aufgenommen. Der Text ist erfüllt. Anbieter kopieren es, kommen her und fügen es so ein. Okay. Sehen wir es uns jetzt im Design an. Es wird so aussehen. Das ist zu groß, also ändern wir die Größe. Ich gehe einfach zur Variante und lass uns das Gewicht reduzieren, es auswählen und halbieren. Mittel. Mal sehen, mal sehen, Medium wird gut funktionieren. Dann werde ich dieses Icon noch ein bisschen vergrößern. Es ist zu groß. Behalten wir es. Okay. Vielleicht sollten wir die beiden nicht mittelgroß bis halbgroß machen. Viel besser. In Ordnung. Jetzt haben wir gerade die A-Zusammenfassung erstellt. 55. Designservices Abschnitt Teil 1: Hallo, alle zusammen. Jetzt müssen wir den Servicebereich erstellen. Lass uns das machen. Zuerst werde ich hier und int gB angeben, dass es jetzt an der Zeit ist, Servicebereiche zu erstellen. Nennen Sie mir die wichtigsten Dienstleistungen, die eine Familienklinik anbietet, und stellen Sie sicher, dass es mehr als acht Dienste in diesen Lastern gibt. Ich möchte, dass Sie diesem Namen, der kleinen Beschreibung und der Kreditbeschreibung folgen und mir auch den Titel der Schlagzeilen für ServiceOnPress Enter geben Titel der Schlagzeilen für ServiceOnPress Okay, es generiert Mmm. Jetzt muss ich sagen, dass die kleine Beschreibung zu kurz ist. Lassen Sie uns aus der kleinen Beschreibung hinzufügen, dass sie zu kurz ist. Gib mir eine kleine Beschreibung , die bis zu 150 Zeichen hat. Lass uns das versuchen. Es ist besser. Hier haben wir die Details, das wird die Kreditbeschreibung sein, und ich werde all diese Details in die Datei aufnehmen, weil wir diese kleine Beschreibung verwenden können. Auf der Homepage und auf einer Seite können wir dieses Format verwenden. Auf diese Weise wird das also perfekt sein. Gehen wir also zu unserem Dokument und ich werde alle Informationen sammeln. Und hier müssen wir den Inhalt der Startseite wie folgt einstellen . Dann werde ich einen neuen Abschnitt hinzufügen. Dies wird der Servicebereich sein. Okay, um einen Abschnitt zu bearbeiten, fügen wir diese Details wie folgt hinzu Ich werde all diese Details wie folgt kopieren. Dann füge ich einen weiteren Abschnitt hinzu, der als Seiteninhalt bezeichnet wird einen weiteren Abschnitt hinzu, der als Seiteninhalt bezeichnet und füge den Inhalt hinzu, den er zuvor generiert Das ist der Inhalt, und ich werde ihn einfach für die spätere Verwendung kopieren. Okay. Jetzt haben wir hier eine Schlagzeile. Es hat uns eine Schlagzeile generiert. Lassen Sie uns sehen, dass es gut ist, etwas Gutes zu sagen geben? . Können Sie mir drei Versionen und drei Auswahlmöglichkeiten für den Titel der Überschrift Lassen Sie uns diesen hier sehen. Lass uns das als Überschrift nehmen und ich werde es hier platzieren. Okay. Eigentlich werde ich das in Google Doc einfügen. Jetzt fangen wir an zu entwerfen. Zuerst gehe ich zur Figma-Datei und hier, wie wir es zuvor getan haben, müssen wir einen Rahmen erstellen, und ich werde diesen Rahmen in unser s umbenennen . Dann ändere ich mit fill container, und hier, sagen wir, das ist 600 Okay. Was wir jetzt tun können, ist diese Art von Design zu erstellen. Dazu klicke ich zuerst auf Text und dieser Text wird zur Überschrift. Ich mache es wie eine Überschrift und dann werde ich das Text-Duplikat für ein paar duplizieren , also duplizieren wir es nur für zwei Mal. Eigentlich vergesse ich, diesem Dienste-Frame ein automatisches Layout hinzuzufügen , also machen wir das. Ich drücke Shift A und dann müssen wir die Höhe bei 600 ändern. Wir sind im Bereich Dienste und von hier aus werde ich das CO einstellen, werde ich das CO einstellen weil wir kein horizontales oder vertikales Padding benötigen Fügen wir sie als C hinzu und dann wähle ich diese beiden Elemente aus und drücke Shift A, um ein neues automatisches Layout zu erstellen, und ich mache daraus ein vertikales Layout, und hier ändere ich das in sng Vs wie hier. Okay. Dann werde ich es einfach ändern. Es braucht Typografie, um es zu ändern Ich klicke hier und lass es uns zu einem Subding machen, und dann klicke ich hier und lass uns daraus einen Absatz machen Okay. Dann werde ich die Feldfarbe ändern. Klicken Sie hier und ändern Sie diese Feldfarbe in Schwarz und ändern Sie diese Feldfarbe Okay. Jetzt legen wir den Artikel zwischen den Größen 20 fest, in Ordnung, in Ordnung. Es scheint zu groß zu sein. Es scheint, dass der Artikel zwischen den Größen zu groß ist, aber lassen Sie uns beim wirklichen Inhalt bleiben. Hier ist unser Titel, dann werden wir die Beschreibung so haben. Okay, dann werde ich diesen Text mit zwei Containern wie diesem versehen. Lassen Sie es uns vorerst so belassen und ich vergesse eine Sache. Kannst du sagen, was es ist? Es ist die Überschrift, also vergesse ich, eine Überschrift hinzuzufügen. Lass uns eine Überschrift hinzufügen. Isolieren Sie zunächst unser Service-Autoayout und lassen Sie es als vertikales Layout formatieren Dann drücken wir T und fügen einen Text wie diesen hinzu. Dann gehe ich zu unserem Dokument oder dem GPT. In unserem Dokument können wir uns die Schlagzeilen besorgen, indem wir es kopieren und dann sind wir mal ehrlich Okay. Dann ändern wir die Schwerkraft des Tippfehlers in Header und die Füllfarbe wird diese schwarze Farbe sein Okay. Jetzt wähle ich das automatische Layout dieses Dienstes aus und setze Align Top Center als Ausrichtung ein. Dann mache ich hier den Bereich auf 20, richtig. Und hier, lassen Sie uns versuchen, es in zwei Teilen hinzuzufügen , also möchte ich das jetzt in der Mitte hinzufügen, also werde ich diese Typografie-Ausrichtung als Mittelpunkt wie folgt festlegen diese Typografie-Ausrichtung als Mittelpunkt wie folgt Jetzt haben wir zuerst diesen Teil, lassen Sie uns ihn nach Belieben anpassen Ich wähle den einzelnen Service bei Layout aus und lass uns einen Effekt hinzufügen. Wir haben bereits einen Effekt, also wähle ich ihn einfach aus und füge dann diesem einzelnen Dienst Breite hinzu, um das zu erreichen Ich werde ihn wie folgt erhöhen Eigentlich werde ich so etwas hinzufügen, aber es ist nicht dauerhaft. Aber ich wähle wieder die einzelnen Dienste füge dann die linken und rechten Felder 20 und 20 wie folgt Wenn wir nun das Design überprüfen, sehen wir den Effekt nicht, also fügen wir die Feldfarbe Wenn ich eine Feldfarbe wie Weiß hinzufüge, können wir den Effekt deutlich erkennen. Dann werde ich dieses Eckradio 20 ändern. Okay, so weit, so gut. Was ich jetzt tun werde, ist ein Symbol wie in diesem hinzuzufügen . Lass uns das machen. Um das zu tun, gehe ich einfach hierher und suche nach Ikonen über die pädiatrische Versorgung Lass uns Fantosom öffnen. Klicken Sie hier, klicken Sie auf Fontosom falls Sie den Namen des Pontosom-Symbols nicht kennen. Sie können einfach bei Google nach Kinderautosom suchen, Sie können einfach bei Google nach Kinderautosom suchen jetzt können wir sehen, dass es ein Kindersymbol hat, also kopiere ich den Teil mit Kindern und komme Dann fügen wir es hinzu. Eigentlich wird es nicht angezeigt, aber wir haben ein Kind. Mal sehen, was wir tun können. Schauen wir uns die Ikone der Kindheit an. Nein, wir haben nur ein Kind. Holen wir uns dieses Kind. Und es ist in Ordnung, diese Art von Symbol hinzuzufügen. Figma-Layout, aber in Elemento können wir ein besseres Symbol haben und ich werde Ihnen zeigen, wie Sie ein besseres Symbol erhalten Hier ist unser Symbol. Ich wähle einfach nur den Vektor und tippe zweimal auf diesen einzelnen Dienst und setze das Symbol so ein und lass uns die unnötigen Frames entfernen. Und hier, lass uns das ein bisschen größer machen. Bevor ich das mache, werde ich diese beiden Abschnitte verschieben und Shift A drücken. Dann wird es einfach zu einem neuen automatischen Layout hinzugefügt. Lassen Sie uns das automatische Layout in Sex umbenennen und hier haben wir das Vektor- und Einzelservice-Autolayout und dann die Insel Einzeldienst-Autolayout und klicken dann auf horizontales Layout wie dieses Ordnung. Jetzt werde ich es wie zuvor zwischen die Größen zwei und drei legen. Dann klicke ich hier darauf und lasse uns diese Farbe in Blau ändern. Hast du dich an unsere 603010-Regel erinnert? Lassen Sie uns also für Segan sehen, wir haben tatsächlich die 603010-Regel angewendet In diesem Fall haben wir Weiß als 50 und Schwarz als 30 und diese blaue Aber ich habe dir schon gesagt, dass die 60-, 30-, Zehn-Regel nur eine Regel ist. Wir können sie also brechen und jedes Mal, wenn wir einen Abschnitt erstellen, müssen wir ihn brechen, und hier haben wir 60 als Schwarz und 30 als Weiß und zehn als diese blaue Farbe. Zurück zur Arbeit und hier klicken wir auf „Eigenschaften enthalten und machen daraus sechs. Dann drücke ich Shift A, um diesem Symbol ein automatisches Layout hinzuzufügen, und dann ändere ich den Namen des Symbols. Dann füge ich links und rechts als 20, 20 hinzu. Tatsächlich haben wir ein Problem mit der Größe des Symbols. Gehen wir also zurück und hier füge ich 60 als hinzu, 60 als feste Breite, und versuchen wir es hier. Ich werde 20 mal 20 auf diese Weise hinzufügen. Der Grund dafür ist, dass wir uns auf den Single Service Layer gefixt haben. Um das Problem zu beheben, erstelle ich ein neues automatisches Layout oder füge das automatische Layout zu diesem einzelnen Service ändere dann die Serviceartikel. Dann werde ich das ändern, um den Behälter zu füllen. Jetzt können wir die genaue Größe ermitteln Heute wird eins, zwei, drei, vier, fünf, die Höhe wie folgt eingestellt und hier füge ich diese Höhe als Füllbehälter hinzu, und lassen Sie uns dieses Symbol so zentrieren, und wir setzen einfach auf 120, ich denke, es wird besser sein. Okay. Und hier reduziere ich Ecken, mache es etwa 20, und dann füge ich einen Strich wie diesen hinzu. Dann ändern wir die Strichfarbe auf Blau und erhöhen den Wert für den Wert, sodass wir tatsächlich diese Art von Design machen können. Also lass uns das machen. Zuerst muss ich die Größe dazwischen finden, Größe ist 20. Lassen Sie uns hier den gleichen Designstil hinzufügen. Dazu füge ich Füllfarbe und blaue Farbe hinzu. Dann klicken Sie auf das Symbol und die Symbolfarbe wird weiß, und dann müssen wir Estroke hinzufügen , damit die Strichfarbe hellblau ist Lassen Sie uns die hellblaue Farbe von hier aus so nehmen. Okay. Okay. Nun wollen wir mal sehen, wie groß der Strich ist. Es ist hier sieben und hat die Größe sieben. Okay. Jetzt wird es so aussehen, aber wir können mehr Höhe hinzufügen, weniger 22. Es wurden zehn hinzugefügt, zehn sind besser, also erstellen wir jetzt nur noch einen einzigen Servicebereich und das wird auf dem Design so aussehen. Und hier haben wir ein Problem. Wir müssen dieses Problem beheben. In der nächsten Lektion werden wir sie beheben. 56. Designservices Abschnitt Teil 2: Hallo, alle zusammen. Also habe ich eine bessere Idee für dieses Symbol. Lass es uns machen. Zuerst wähle ich das Symbol aus und hier machen wir für dieses horizontale Muster 15 und für das vertikale Muster 15. Dann werde ich diese Füllfarbe entfernen. Dann kopiere ich diese Estroke-Farbe und füge sie der Füllfarbe Dann werde ich den Strich zu entfernen. Okay, jetzt wähle ich das Vektorsymbol und lass uns das Vektorsymbol in Blau ändern. Lassen Sie uns das Vektorsymbol blau lassen. Lassen Sie uns das Vektorsymbol in die blaue Farbe ändern. Ändere es so. Okay. Sehen wir uns dieses Design an. Es wird so aussehen und dieser Effekt ist auf der linken Seite nicht sichtbar, also lassen Sie uns das beheben. Um das Problem zu beheben, gehe ich zu unserem Home-Frame und wähle hier den Servicebereich aus. Dann klicke ich auf dieses IgnooToAyout. Danach werde ich hier 20 Fixel erhöhen. Derzeit ist die Breite 1.160, also werde ich sie 1180 oder 70 80 machen Eigentlich müssen wir 1.200 daraus machen weil wir die zusätzlichen 20 von beiden Seiten hinzufügen müssen Jetzt klicke ich einfach auf unseren Service-Frame und drücke auf Alle Jetzt kann ich sehen, wie groß er bis zum Rand des Home-Frames Reduzieren wir es auf diese Weise bis 1020 und auf dieser Seite wird es 1020 sein Dann können wir innerhalb dieser Stunde eine linke und rechte Polsterung oder eine horizontale Polsterung als 20 hinzufügen oder eine horizontale Polsterung Und wenn wir jetzt das Design überprüfen, wird es perfekt ausgerichtet und es wird weder vom Schatten noch vom FA beeinflusst Okay, für hier mache ich 60, weil es zu nah beieinander liegt, also ist es jetzt besser und jetzt haben wir noch eine Frage. Das heißt, wenn wir einen neuen Abschnitt hinzufügen, fügen wir einen neuen Abschnitt wie diesen hinzu, er wird innerhalb dieses Abschnitts hinzugefügt. Um das Problem zu beheben, erstelle ich einfach einen leeren Rahmen und stelle dann die Breite als gefüllten Container ein und die Höhe beträgt 600. Dann werde ich diesen Frame wie folgt in unsere Services BG umbenennen . Wenn wir dann einen neuen Abschnitt erstellen, befindet er sich unter diesem Rahmen. Das ist jetzt also unser erster Service oder einzelner Service, und das ist ein sich wiederholendes Objekt, was bedeutet, dass wir es in eine Komponente konvertieren und wiederverwenden können . Wenn wir hier nachschauen, haben wir wiederholt solche Elemente, was bedeutet, dass wir die Komponente davon erstellen und auf der Seite verwenden können . Lass uns das machen. klicke ich auf diesen einzelnen Dienst und dann auf diese Komponente zum Erstellen. Und jetzt schneide ich es einfach von hier aus und gehe zu unserem Aufkleberblatt lege es dann so in das Aufkleberblatt. Dann hole ich mir diesen Text und lass uns diesen Text als Element umbenennen. Okay. Und jetzt zu diesem Abschnitt, ich klicke einfach auf die Serviceartikel. Jetzt müssen wir dieses Element zu diesem Abschnitt hinzufügen , um das zu tun Ich gehe zu Assens und klicke hier, und hier haben wir einen einzigen Service Ich klicke einfach darauf und klicke auf Insert Instant wie folgt und jetzt gehen wir zur Datei und hier fügen wir es in diese Serviceartikel können wir so machen. Okay. Jetzt kann ich diesen Abschnitt mit dem Services-Element auswählen, dann zu Asserts gehen und dann hier klicken, darauf klicken und auf Instance einfügen klicken und es wird so eingefügt Dann werde ich es noch zweimal so machen. Okay. Jetzt gehe ich zu Pis in Pis, hier sind die Abschnitte Ich sehe sie alle und ziehe sie einfach hierher. Okay. Und bei den Serviceartikeln werde ich das Layout auf ein horizontales Layout ändern. Eigentlich werde ich vorerst zwei dieser Elemente entfernen, und dann wähle ich das automatische Layout der Serviceelemente aus und klicke auf dieses horizontale Layout, und es wird so aussehen Das scheint zu eng zu Stellen wir das zwischen Größe 20 ein und jetzt passt es perfekt. Okay. Jetzt kann ich diesen Serviceartikel so duplizieren. Okay, auch hier sehe ich diese beiden Layouts für Serviceartikel und drücke Shift A, um eine andere Gruppe zu erstellen Hier werde ich sie in Serviceartikel-Set umbenennen und hier ändere ich und hier ändere ich die Zwischengröße auf 20 wie folgt. Jetzt wird es so aussehen. Jetzt müssen wir den Inhalt ändern. Lass uns sie ändern. Ich öffne unser Dokument und werde sie schnell so ändern. Ich werde das so formulieren und lassen Sie uns das schnell ändern. Okay. Jetzt haben wir gerade vier unserer Kategorien erstellt, und mein Plan ist, dass das Logo-Bild hervorgehoben wird, wenn wir mit der Maus über diese Kategorie Logo-Bild hervorgehoben wird, wenn wir mit der Tatsächlich können wir dieses Logo-Bild ändern, um es besser zu machen. Wenn wir zum Beispiel die Füllfarbe entfernen und den Strich hinzufügen, ändern wir die Konturfarbe auf hier und auf Blau und erhöhen sie für neun ein bisschen. Mal sehen, wie es aussieht, als ob es nicht gut aussieht. Aber was ist, wenn wir zwei zusammensetzen? Jetzt sieht es viel besser und wir werden diesem Symbol ein Liniensymbol hinzufügen. Auf diese Weise wird es vorerst so viel besser sein als dieses Design Lassen Sie es uns so belassen. Und ja, ich wähle einfach das Komponentendesign aus und Sie können das Gleiche tun. Okay. Wenn wir wollen, können wir die Feldfarbe mit Hellblau hinzufügen, wirklich hellblau so und nicht so sichtbar, aber lassen wir es so. Dann müssen wir diese ändern. 57. Designservices Abschnitt Teil 3: Hallo, alle zusammen. Wir haben hier ein Problem. Wenn ich also versuche, dieses Symbol zu ändern, versuchen wir es. Ich gehe zu Aktionen und Plugins und Widget und dann zu Font TSM. Dann ändern wir das Gesundheitssymbol für Frauen, sodass ich nach Frauen suche Okay, klicken Sie darauf. Jetzt haben wir das Symbol. Hier ist das Symbol. Ich werde es ausschneiden und diesen Rahmen entfernen, dann hier klicken und versuchen, ihn einzufügen. Wenn ich versuche, es einzufügen, A, ist es außerhalb dieser Komponente immer vorbei. Wenn ich das also innerhalb der Komponente hinzufügen möchte , kann ich das tun. Haben Sie eine schnelle Lösung, aber nachdem wir diese Lösung gefunden haben, wird diese Instanz nicht mehr unsere Hauptkomponente sein, was bedeutet, dass, wenn wir das Design dieser Komponente ändern, dies keine Auswirkungen auf unsere Kategorie hier hat. Versuchen wir also, das zu tun. Ich klicke auf die Instanz und hier klicke ich auf weitere Aktionen, und hier werde ich auf Instanz trennen klicken Wenn ich auf Detach Instant klicke, funktioniert sie nicht mehr als Komponente Ich bin nur ein Rahmen, den wir zum Layout hinzufügen. Jetzt kann ich hier ein Symbol hinzufügen. Um das zu tun, kann ich einfach das Symbol von hier ausschneiden, dann hier klicken, es so einfügen und hier ist es. Versuchen wir also, dieses Symbol so hineinzufügen . Okay. Lassen Sie uns nun die Größe dieses Symbols überprüfen. Es ist 60. Jetzt werde ich dieses Symbol damit ändern. Lassen Sie uns auf diesen Einschränkungsvorschlag klicken. Und jetzt ändern wir die Seite auf 60. 60 ist zu groß. Sagen wir es so. Dann werde ich dieses Symbol so entfernen. Okay. Dann klicke ich auf dieses Symbol und ändere die Feldfarbe auf Blau. Jetzt ist diese Symbolgröße 120. Sehen wir uns die tatsächliche Icon-Größe an. Die Breite 120 und die Höhe sind 110, sehen wir uns die Höhe an, die Höhe sollte 110 sein, also so. Okay. Dann kann ich das erhöhen, wie ich will. Okay. Jetzt machen wir dasselbe für diesen. Lassen Sie uns versuchen, das Symbol wie Fregan zu finden . Wir haben diese Art von Symbol nicht, also lassen Sie uns hier dieses Krankenhaus-Icon hinzufügen Und wenn wir die Website mit Word als Element entwerfen, werden wir ein besseres Symbol hinzufügen Lassen Sie uns also hier auf die Instanz dieser Komponente klicken , hier klicken und auf „Abgetrennte Instanz“ klicken, dann hier klicken und sie kartieren, dann diesen Abschnitt auswählen und ihn hier einfügen. werde dieses Symbol entfernen Ich werde dieses Symbol entfernen und dann diesen Hintergrund auf die Höhe des Hintergrunds auf 1.110 einstellen , dann werde ich diese Größe auf 60 erhöhen Okay. Als Nächstes ändere ich die Feldfarbe auf Blau. Okay, jetzt haben wir dieses Familienmagazin. Lass uns das Familiensymbol in der Fontosm-Suche herausfinden, tut uns leid. Suchen wir nach Familie, Familie, lassen Sie uns Familie sehen Wir haben kein Familienfontosum-Symbol. Suchen wir nach einem anderen Symbol oder suchen wir etwas, das damit zusammenhängt, an diesem Schutzsymbol Ich klicke auf das Symbol, schneide es aus und lösche diesen Rahmen. Und hier wähle ich zuerst das Serviceelement aus und klicke auf Instanz trennen und dann hier klicken, dieses Symbol verschieben, dieses entfernen, dann müssen wir die Höhe auf 1.100 setzen Entschuldigung, 110. Dann lassen Sie uns diese Symbolgröße auf sechs erhöhen. Okay. Dann lass uns die Feldfarbe ändern Okay. Jetzt haben wir vier Kategorien, vier Dienste, aber wir haben acht Dienste Fügen wir also diese Art von Slide-in-Schaltfläche hinzu, was bedeutet, dass innerhalb von 5 Sekunden automatisch zu den nächsten Kategorien gewechselt wird . Machen wir das, oder wenn jemand auf diesen Punkt klickt, wird er zum nächsten Kategoriensatz weitergeleitet. Also klicken wir hier und klicken auf Ellips und nicht hier, dann gehe ich in unseren Service und füge dann Ellipse hinzu. Also jetzt sollte es so sein, lass es uns wie hier hinzufügen. Es sollte in diesem Servicebereich sein, aber außerhalb dieses Services-Artikelsatzes werde ich es hier platzieren. Und jetzt reduzieren wir die Größe auf etwa 20 und ändern die Farbe wie Blau. Es scheint, dass wir keinen Espace haben, also erhöhen wir den Espace auf etwa 700 dieses Servicebereichs. Fügen wir 700 hinzu und hier haben wir 60, aber wir können weniger als 60 hinzufügen, also wähle ich diesen Service Item-Set aus und Ellips drücke dann Shift A, um ein automatisches Layout hinzuzufügen, und dann kann ich es so machen, als ob 2020 nicht gut ist Lass uns 30 daraus machen. Okay. Jetzt werde ich drei weitere Ellipsen erstellen und sie alle auswählen und Shift A drücken und sie horizontal machen und der Abstand wird 20 sein Dann entferne ich diese Farbe und ich ändere sie in helle Farbe Zu dieser Farbe. Okay, und klicken Sie auf diesen, trennen Sie ihn bei dieser hellen Farbe wie dieser Okay. Jetzt schauen wir uns das Design an, damit es so aussieht. Also fügen wir das unseren Services BG hinzu, die Höhe ist 600, aber machen wir es so 700. Okay. Jetzt erstellen wir das über eine Zusammenfassung und unsere Services, dann müssen wir unseren Anbieterbereich erstellen. Lassen Sie uns ihn in der nächsten Lektion erstellen. 58. Inhalte für unseren Anbieter-Bereich generieren: Hallo, alle zusammen. Jetzt müssen wir unseren Anbieterbereich erstellen. In unserem Anbieter werden wir das Bild des Anbieters sowie den Namen, Rolle und eine kleine Beschreibung haben. Lass es uns erstellen. Zuerst müssen wir den Inhalt generieren. Ich gehe zu JGBT und hier werde ich sagen, jetzt ist es an der Zeit, unseren Anbieterbereich zu generieren Nennen Sie mir fünf Anbieter. Geben wir Ärzte mit Namen, Rolle und Kurzbeschreibung hinzu. Lassen Sie uns ein Darlehen und eine Kreditbeschreibung erstellen. Lassen Sie uns das hier so zusammenstellen, weil wir eine Kreditbeschreibung für Anbieter benötigen. Lassen Sie uns das präsentieren und schauen wir, was wir bekommen. Okay. Hier haben wir die Details. Ich werde sie einfach alle kopieren und gehen wir zu unserer Inhaltsdatei und schauen uns diesen Inhalt so an. Sie können diese Inhaltsdatei auf Notepad Wordpad öffnen diese Inhaltsdatei auf Notepad Wordpad Lassen Sie uns also diese Details hinzufügen. Außerdem werden Sie Bilder für jeden Arzt in unserer Bilddatei sehen . 59. Unseren Anbieter-Bereich gestalten: Hallo, alle zusammen. Lassen Sie uns diesen Bereich für unsere Anbieter gestalten. Okay, jetzt komme ich zum Design, und hier haben wir den Inhalt, aber wir haben keinen Titel. Lassen Sie uns also Titel zwei generieren. Können Sie mir den Titel für unseren Anbieterbereich geben? Gib mir drei Möglichkeiten. Ich denke, die Entscheidungen sind falsch. Wie dem auch sei, ich mag diesen, also werde ich ihn kopieren und zweiten auswählen. Ich werde das kopieren und seien wir hier ehrlich. Dann werde ich einen Titel wie diesen sagen. Gehen wir jetzt zum Figmfle und hier werde ich einen Rahmen erstellen und die Rahmengrößen mit dem Füllbehälter festlegen Hallo, 600. Wir müssen den Home-Frame vergrößern, auf den Home-Frame klicken und in Windows die Befehlstaste drücken, die Strg-Taste drücken und hier die Größe erhöhen. Dann drücke ich für diesen Abschnitt Shift A und ändere hier den Namen in Presenter unseres Anbieters. Okay. Lassen Sie uns nun das Layout als vertikales Layout hinzufügen und von oben in der Mitte beginnen. Okay. Nun, hier brauchen wir diese Zwischengrößen nicht und hier füge ich die Zwischengröße als 60 hinzu. Soweit ich mich erinnere, fügen wir hier die 60 hinzu. Lassen Sie uns nun den Text erstellen. Ich drücke auf T und lass uns diese Art von Text erstellen und lass uns hier gehen und diese Tanks kopieren und kommen zu diesem Text wie diesem, dann ändere ich die Typografie auf Header und klicke auf den Text und lass uns mit einem Füllcontainer beginnen Okay, dann wird die Ausrichtung mittig sein. Okay. Jetzt sieht es gut aus. Jetzt wurde die Höhe des Provider-Abschnitts geändert, also ändern wir die Höhe wieder auf 600 wie folgt. Okay. Jetzt müssen wir diesen Abschnitt erstellen. Um diesen Abschnitt zu erstellen, erstelle ich einfach ein Rechteck wie dieses. Dann legen wir dieses Rechteck auf diese Seite. Dann eins, zwei, drei, vier, dann vergrößern wir es für so und dann sagen wir, Höhe als auch diese Größe. Okay, dann müssen wir den Namen, die Rolle und eine kleine Beschreibung hinzufügen . Also lass uns sie hinzufügen. Also klicke ich zuerst auf T und lege das als Namen fest, dann drücke ich erneut auf Text und stelle das als Rolle ein, und drücke erneut T und füge eine kleine Beschreibung wie diese hinzu. Okay. Nun hier, klicken wir auf den Namen und ändern den Typ in subd und auch hier wird die kleine Beschreibung ein Absatz sein und die Rolle lautet: Lasst uns den Button-Text zum Rollen hinzufügen Okay. Jetzt wähle ich alle drei Elemente aus und lege sie unter das Rechteck. Dann wähle ich all diese Informationen aus und drücke Shift A und einen Frame und ändere diesen Namen in Provider. Dann werde ich das zwischen Größe und 20 so machen. Jetzt ist dieser Abschnitt klein, lassen Sie uns den Abschnitt so vergrößern und jetzt beim Anbieter, ich werde Roll als obersten Namen als mittlere und kleine Beschreibung angeben, da es auch den Anschein hat, dass die Größe dazwischen zu lang ist, also machen wir es so, als ob es besser ist. Jetzt müssen wir hier ein Bild hinzufügen. Fügen wir das Bild hinzu, klicken Sie hier und klicken Sie auf Imagevideo und hier sehen wir das Bild des Anbieters und fügen wir dieses Bild hinzu und klicken Sie hier so. Jetzt wähle ich den Anbieter-Rahmen und hier füge ich Weiß eine Füllfarbe hinzu Dann mache ich einen Effekt und füge diesen Effekt so hinzu. Dann werde ich die Ecken dieses Bildes ändern. Die obigen Zahlen werden zwei sein und dann zwei, dann wird die Unterseite zwei und zwei sein. Mal sehen, ob ich da oben eigentlich nicht in die richtigen Ecken gegangen ist , also müssen wir auf das Bild klicken und lassen uns die Ecken dieses Bildes verkleinern. Wir müssen nur die oberen Ecken so verkleinern. Okay. Von hier aus muss ich etwas Abstand hinzufügen, um Dispasing hinzuzufügen Ich werde einfach hier klicken und sechs hinzufügen Okay, aber wir müssen es nicht auf diesen ganzen Abschnitt anwenden Wir müssen es nur für diese drei Artikel anwenden. Lassen Sie uns diese drei Punkte hervorheben. Eigentlich müssen wir den Button hinzufügen. Fügen wir die Schaltfläche hinzu, um die Schaltfläche hinzuzufügen Ich gehe zu Assens und hier haben wir die BTN Sie werden diese sekundäre Schaltfläche sehen und auf Einfügen klicken Dann schneide ich es aus und komme zur Datei, und hier werde ich es einfach so einfügen Okay. Und an dieser Schaltfläche müssen wir einige Änderungen vornehmen, um diese Änderungen vorzunehmen Wir können eine weitere Instanz erstellen oder hier Änderungen hinzufügen. Auf einfache Weise können Sie eine andere Variante erstellen. Lassen Sie uns eine Variante erstellen. Ich werde das Aufkleberblatt so vergrößern und auf Variante klicken. Eigentlich können wir hier klicken und dann auf Variante klicken dann lassen Sie uns diese Polsterungen wie folgt entfernen Okay. Lassen Sie uns diese Variante nun wie folgt in Kartenlink umbenennen. Okay. Gehen wir jetzt hierher und klicken auf die Schaltfläche und ändern wir sie in Kartenlink. In Ordnung. Jetzt wähle ich all diese vier Elemente aus und drücke Shift A und lass uns die Beschreibung umbenennen. Geben Sie eine Biografie ein, dann werde ich mit einem Füllbehälter beginnen und hier füge ich einen horizontalen Rand wie folgt hinzu. Okay. Was ich jetzt tun muss, ist, dass wir unten Platz hinzufügen müssen. Um das zu tun, werde ich hier klicken und hier weiter, ich werde Leerzeichen hinzufügen 20 Okay. Wenn wir es jetzt überprüfen, wird es auf dem Design so aussehen. Wenn wir wollen, können wir das jetzt in eine Komponente umwandeln. Klicken wir also auf das Element und dann auf Komponente, um eine Komponente zu erstellen. Okay. Dann schneide ich diese Komponente aus und komme zu Style Heat und füge sie dem Element so hinzu. Ich muss dazu kommen, Heat zu stylen und es so einzufügen. Okay. Gehen wir zurück, und dann klicke ich in ASRS auf ASRs, wir haben die Komponente Ich klicke einfach darauf und dann auf Isa Instance. Okay. Was wir nun tun können, ist Dateien zu bearbeiten und sie in unseren Provider-Bereich zu stellen, also lassen wir es so gestalten. Okay. Was wir jetzt tun können, ist das zu duplizieren. Um es zu duplizieren, wähle ich den Anbieter aus und drücke Strg C und Steuerung V wie folgt Lassen Sie uns diese beiden Abschnitte markieren und Shift A drücken und dann ein horizontales Layout wie dieses erstellen. Und wieder werde ich diesen so duplizieren. Okay. Jetzt ändere ich diesen Frame-Namen in Prods und hier ändere ich die Zwischengröße auf 20. Okay. Lassen Sie uns nun die Details zu dieser Rolle hinzufügen Ich werde diese Rolle in die blaue Farbe ändern. Komm her und klicke hier, dann ändere die Feldfarbe wie folgt in Blau. Okay, ich werde auf die Artikel einwirken, und hier fügen wir die Details hinzu, und dann können wir den Rest der Informationen ändern. Also komme ich einfach her. Hier sind die ersten Details, kopiere sie. Ändere seinen Namen. Dann komm wieder her und kopiere die Kurzbeschreibung wie folgt und die Kurzbeschreibung so auf. Hier lege ich die Breite als Füllbehälter fest und stelle den Tippfehler auf align lab ein. Dann werde ich dieses Etikett umbenennen, um mehr zu erfahren Dann benenne es mehr oder weniger View Profile um und wir müssen die Rolle hinzufügen Fügen wir das hinzu. Fügen wir das Brötchen so hinzu. Und ich werde dieses Rollentelefon ändern in, lass es uns in Absatz ändern. Um es zu ändern, gehe ich hierher und der Rollentext wird ein Absatz sein. Auf diese Weise wird es nicht wie der Link aussehen. Wenn wir jetzt zum Design gehen, wird es so aussehen, und lassen Sie uns weitermachen und die Details hinzufügen. Von hier aus kopiere ich den Namen und füge den Namen hier ein, dann komm her und kopiere die Rolle. Dann füge die Rolle so hinzu, dann kommen wir zur Kurzbeschreibung. Und tatsächlich hier ändere ich es von hier aus. Lass es uns nicht so ändern. Lass es uns von hier aus ändern. Auf diese Weise können wir es für Artikel auf der Seite wirksam machen . Also lass es uns für diesen machen. Und dieser. Das ist der Vorteil eines solchen automatischen Layouts. Kein automatisches Layout. Das ist der Vorteil von Komponenten. Wenn ich sie ändere, wirkt sich das auf den Artikel aus. Dann werde ich hier sein, lass es uns in Profil ändern. Eigentlich können wir es von hier aus ändern. Dann ändern wir es, es ändert sich. Jep Und hier müssen wir das Bild ändern, klicken Sie hier, Doktor Michel, lassen Sie uns dieses Foto finden und hier ist er, klicken Sie so, dann mache ich weiter Okay, lassen Sie uns weitere Angaben zum Arzt hinzufügen. Hier sind die Details, und lassen Sie es uns so ausdrücken. Dann fügen wir die Rolle hinzu. Fügen wir eine kurze Beschreibung wie diese hinzu. Okay. Lass uns das Foto jetzt so ändern. Eigentlich ist es besser, das Bild des Arztes mit diesem Arzt dem Namen entsprechend zu ändern , aber lassen wir es so. Dann werden wir einige Probleme sehen, also lasst uns sie beheben. Das erste Problem ist, dass diese Abschnitte nicht identisch sein werden und wir haben fünf Ärzte hier, wir haben fünf Ärzte, aber wir haben nur Platz für drei Ärzte, also müssen wir hier einen Slider hinzufügen. Wir haben eine andere Höhe als die Boxen, um das Problem zu beheben Lassen Sie uns die Größe überprüfen, die wir hinzufügen möchten, sie sollte 615 sein Gehen wir zu unserer Komponente und machen wir ihr eine Höhe 615, dann können wir sie einfach so korrigieren Wenn wir jetzt zum Design gehen, wird es so aussehen, aber jetzt müssen wir diesen Schatten so hinzufügen , dass er links und rechts sichtbar Denken Sie daran, als wir es das letzte Mal repariert haben. Um das Problem zu beheben, wähle ich diesen Abschnitt aus, unseren Anbieterbereich, und dann klicke ich auf diesen Ignotoayo und dann muss ich 40 zu dieser Breite hinzufügen Lass uns 40 hinzufügen. Wenn ich 40 zu 1.160 addiere, werden es 1.200 sein Dann werde ich hier Padins 20 wie folgt hinzufügen. Dann muss ich es in die Mitte stellen. Okay. Jetzt wollen wir sehen, dass es perfekt sichtbar ist. A hier, wir haben ein anderes Problem. Dieses Ansichtsprofil ist keine Zeile Um das Problem zu beheben, suchen wir uns die längste kleine Beschreibung heraus. Ich glaube, das ist es. Lass uns herausfinden, wie lang es 96 ist. Lass uns 100 draus machen. Wir kommen nur her und klicken hier, dann machen wir die Höhe hundert. Jetzt schau, was passiert. Also lass uns diesen Text so erfinden. Ich wähle einfach den Text aus und füge dieses Align Top zur Typografie Sehen wir uns jetzt das Design an. Jetzt wird es perfekt ausgerichtet sein. Bisher haben wir keine Fragen, und jetzt müssen wir dafür drei Punkte wie diesen hinzufügen Ich werde einfach hier klicken und den Namen in Folienpunkte ändern und jetzt klicken wir auf Komponente erstellen. Und schneiden Sie es aus, gehen Sie hier auf das Element, das eigentlich in den Stilen auf dem Element steht, wir fügen es einfach hinzu. Und jetzt kommen wir hierher und gehen zu Asserts in Asserts. Klicken wir auf unseren Schieberegler, klicken wir auf Instanz einfügen und lassen Sie uns das in unseren Gor-Empfang einfügen In unserem Service wähle ich in unserem Service aus und füge es dann einfach so ein, und es sollte sich innerhalb dieses Rahmens befinden, es wird perfekt ausgerichtet sein Dann müssen wir es nicht von Grund auf neu erstellen. Wir können einfach zu ASEDs gehen und auf Slider Dot klicken und dann auf Insert Instance klicken und es ausschneiden, indem Command X oder Control X drücken und hierher kommen. Dann müssen wir es zu unserem Provider-Bereich hinzufügen. Jetzt muss ich diese beiden Abschnitte auswählen und Shift A drücken, dann werde ich sie in die Mitte stellen. Schauen wir uns den Abstand an. Ich denke, das sollte es sein. Es ist tatsächlich 30, also lass uns und lass uns hinzufügen, lass uns diesen auswählen und lass uns das Element in Bits als 30 hinzufügen. Okay. Jetzt müssen wir diesen Bereich für unsere Anbieter etwas erweitern, also lassen Sie uns ihn vergrößern. Nicht dieser, wählen Sie die Anbieter aus. Lassen Sie uns diesen Abschnitt wie folgt vergrößern. Und was ist damit passiert? Mm hmm. Wir müssen diesen Frame 31 nicht erhöhen. Wählen wir diesen Frame 21 aus. Machen wir es wie einen Container-Container für Anbieter. Okay. Dann stelle ich die Höhe als Umarmungsbehälter Und jetzt ist es perfekt hier. Hier werde ich dasselbe tun. Eigentlich muss ich das nur auf unseren Services-Container ändern . Okay. Jetzt muss ich nur noch unseren Provider-Bereich so ändern . Mal sehen, wie viel es tatsächlich ist, lassen Sie uns diese Größe auf 820 setzen oder wir können das einfach unseren Provider-Container auswählen und überprüfen groß der Abstand zwischen diesen beiden Abschnitten ist. Also dann werde ich seine Größe einfach auf 20 reduzieren und hier können wir das Gleiche tun. Es ist 54, lassen Sie uns es verringern und weitere 20 verringern. Perfekt. Und dann müssen wir die Größe des Dienstes ändern . BG hat sich geändert. SLeTo-Service BG, perfekt. Jetzt müssen wir auch unsere Anbieter BG hinzufügen , denn wenn wir jetzt eine Ellipse wie diese hinzufügen, wird sie hier angezeigt, weil wir automatische Layout dieses Anbieterbereichs ignorieren Lassen Sie uns auf Con Frame klicken und einen Frame erstellen . Dieser Frame wird ein Füllcontainer sein und die Höhe wird 823 sein Und die Höhe wird 823 sein. Und was ist passiert? Hier. Dann müssen wir diesen Anbieterbereich sedieren und ihn so ansprechen , dass er dem Anbieter BG entspricht, wo ist unser Anbieter Okay, hier ist unser Anbieter, weshalb wir es einfach wie unseren Anbieter G machen, und dann werde ich ihn hier so platzieren Okay. Schauen wir uns jetzt das Design an. Das Design wird so aussehen. Okay. Und in der nächsten Lektion werden wir diesen Vorschaubereich entwerfen. 60. Die Abschnittsanordnung ändern: Als Nächstes müssen wir diesen Bewertungsbereich erstellen. Aber wenn wir unsere Website überprüfen, haben wir hier ähnliche Muster. Hier haben wir Dienstleistungen, dann haben wir unsere Anbieter und beide Bereiche sind identisch und beide Bereiche haben Slider. Wenn wir jedoch diesen Bewertungsbereich hinzufügen, wird dieser Bewertungsbereich auch einen Schieberegler haben. Aus diesem Grund habe ich vor, Kontakt C nach diesem Bereich für unseren speziellen Anbieter einzurichten. Nach dem Kontaktbereich können wir den Abschnitt mit den Bewertungen hinzufügen und dann können wir diese Fußzeile hinzufügen Für diesen Kontaktbereich werde ich mich für diese Art von Design entscheiden da dadurch die Konsistenz unserer Website gewahrt bleibt Dann werden wir eine separate Seite für dieses Formular erstellen und die Schaltfläche , die diesen Feed enthält, an dieses Formular anpassen. Okay, lassen Sie uns in der nächsten Lektion mit der Gestaltung dieses Kontaktbereichs beginnen. 61. Design-Kontaktabschnitt: Hallo, alle zusammen. Lassen Sie uns den Kontaktbereich erstellen. Gehen wir also zu JAD GPT und sagen wir, wir benötigen einen Bereich für schnelle Kontakte mit Telefonnummer, Standort und Schaltfläche, um einen Termin anzufordern Können Sie diese Informationen generieren und sie umsetzbar machen? Mal sehen, gib mir drei Auswahlmöglichkeiten und eine Überschrift für den zweiten Abschnitt Okay, mir gefällt Option zwei, also lasst uns den Inhalt kopieren und Gestaltung des Abschnitts beginnen. Hier werde ich diese Details hinzufügen. Es ist ein Bereich für schnellen Kontakt. Okay, jetzt fangen wir mit dem Design an. Dazu gehe ich zu unserem Rahmen und wähle den Rahmen aus. Lassen Sie uns die Befehlstaste drücken und das Design wie folgt vergrößern. Okay. Dann werden wir in einem Abschnitt wie diesem zuerst das machen, auf Frame klicken, hier klicken. Dann mache ich mich daran, den Behälter zu füllen und sagen wir mal 600. Okay. Jetzt habe ich vor, ein Bild auf der rechten Seite und Text auf der linken Seite hinzuzufügen . Also lass uns das machen. Um das zu tun, drücke ich auf T und erstelle diese Art von Text, und bevor ich das mache, muss ich diesen Abschnitt in ein automatisches Layout umwandeln oder diesem Rahmen ein automatisches Layout hinzufügen, also drücke ich einfach Shift A und dann ändere ich diesen Frame-Namen WIC-Kontakt, dann stelle ich in dieser Rahmeneinstellung den linken und rechten Abstand oder das horizontale Fading und Null und die vertikale Fadina Null dann setzen wir es auf eine Zeile oben links und die Höhe wird 600 sein. Jetzt wähle ich hier den Text aus und klicke hier und wähle ihn als Header aus. Dann lass uns die Überschrift kopieren. Also hier ist die Überschrift, ich kopiere sie einfach und füge sie hier ein, dann müssen wir diesen Inhalt hinzufügen. Wir können diesen Inhalt als Icon-Box hinzufügen. Lass uns das tun, um es zu tun. Zuerst muss ich eine Icon-Box erstellen. Drücken wir die Taste und drücken wir T und fügen Text wie diesen hinzu. Lassen Sie uns diesen Abschnitt mit Schnellinhalten vorerst als vertikales Layout ändern . Und lass uns das so aufschreiben. Dann werde ich den Text in eine Unterzeile ändern. Okay. Nun, hier werde ich diese Funktionen hinzufügen, dann werde ich diesen Text duplizieren und lassen Sie uns diesen Text zu einem Absatz machen . Außerdem muss ich die Füllfarbe in diese schwarze Farbe ändern, und das müssen wir auch hier tun. Okay. Dann werde ich diesen Text ändern, um uns anzurufen , um sofortige Hilfe oder Informationen wie diese Dann werde ich diesen Abschnitt duplizieren und hier einfügen und jetzt füge ich die Telefonnummer hinzu. Ich denke, das ist die Telefonnummer, die oben hinzugefügt wurde. Mal sehen, es ist dasselbe. Ich drücke einfach die Befehlstaste auf einem Telefon, Mac und steuere eine Schriftart unter Windows und füge den Text zu diesem Suchfeld hinzu und hier findet er einen ähnlichen Inhalt und jetzt füge ich ihn hier hinzu, dann klicke ich einfach darauf, weil wir das nicht mehr benötigen. Dann werde ich aus diesem Kopf Überschrift machen, aber die Schriftgröße ändern wir später. Jetzt füge ich das Symbol hinzu, um das Symbol hinzuzufügen. Ich gehe hier hin und schließe das San Widget an und klicke auf das cFontSM-Symbol, und von hier aus gehen San Widget an und klicke auf das cFontSM-Symbol, wir zu einem Symbol wie der Presse hier und jetzt haben wir dieses Ich schneide es einfach aus und entferne diesen einen ALT-Frame und komme hierher Dann füge es einfach ein. Ich füge es einfach in diesen Auswahlinhalt ein und drücke Shift A, um Otolao hinzuzufügen Dann sehen wir uns die Größe dieser Symbole an. Es ist also 12110. Lass uns die gleiche Größe machen. Wählen Sie hier und legen wir einen Wert von 120 und eine Höhe von 110 fest. Okay. Dann machen wir es in die Mitte. Okay, vergrößern Sie dazu das Symbol, ich wähle das Symbol aus, klicke auf die Einschränkungsvorschläge klicke auf die Einschränkungsvorschläge und ändere es dann auf 60. Okay. Jetzt muss ich diesem Symbol einen Rahmen hinzufügen. Also lass uns das machen. Um das zu tun, kann ich sogar hierher gehen und die Grenze überprüfen. Hier ist der Rand, er hat also Größe zwei. Fügen wir hier also wiedergewählten Strich blau hinzu, Größe zwei, und hier ist die Ecke zwei Okay. Jetzt werde ich diese drei Abschnitte zusammenfassen. Wählen Sie sie aus und drücken Sie Shift A, und dann werde ich den Behälter mit D füllen. Eigentlich muss ich diesen auswählen und ihn mit Füllbehälter einstellen und sieht gut aus. Dann muss ich die Füllfarbe ändern. Lass es uns so auf Blau ändern. Dann wähle ich diese beiden Elemente aus und drücke Shift A, um Autoa hinzuzufügen . Dann ändere ich das automatische Layout in ein horizontales Layout Dann gehe ich hinein und wähle hier den Vektor aus und platziere das Cticon darüber und wähle den Rahmen aus und stelle dann die Rahmenausrichtung so ein, dass der Rahmen so links ausgerichtet Jetzt müssen wir die Schriftgröße verringern, weil sie zu groß erscheint. Verkleinern wir sie, um sie in der Typografie zu reduzieren, ich werde den Stil entfernen, dann lassen Sie uns hier Lassen Sie uns eigentlich die Originalgröße beibehalten. Okay. Außerdem müssen wir einen Standortbereich und eine Schaltfläche hinzufügen Standortbereich und eine Schaltfläche die Sie einen Termin anfragen können. Bevor ich das mache, werde ich hier ein Bild hinzufügen. Also lass uns das zuerst machen. Und bevor wir das tun, können wir diesem Abschnitt einen Namen hinzufügen. Dieser Abschnittsname wird also reachus sein, und hier haben wir ein Symbol und hier haben wir das Steuersymbol Okay, jetzt füge ich das Bild hinzu, um das Bild hinzuzufügen, ich werde auf Contract Wrangle klicken und Dann lasst uns herausfinden, dass diese Bildgröße 52500 ist. Machen wir es also 52050520 mit 500 s i, dann wird die Ecke Okay. Jetzt fügen wir das Bild hinzu. Um das Bild hinzuzufügen, wählen Sie das Rec Wrangle aus, klicken Sie hier und klicken Sie auf Bildvideo Bis hier wähle ich dieses Bild aus, klicke fünf Mal hier und wir können es einfach so hinzufügen Dann muss ich diesen Abschnitt auf der linken Seite und dieses Bild auf der rechten Seite platzieren der linken Seite und dieses Bild , um das zu tun Ich kann diese beiden Abschnitte einfach auswählen und Shift A drücken, und dann kann ich einfach diesen ganzen Schnellkontakt-Abschnitt auswählen diesen ganzen Schnellkontakt-Abschnitt und sein Layout in ein horizontales Layout ändern. Okay. Jetzt muss ich in diesem Abschnitt den Text auswählen und Text mit einem Füllbehälter erstellen, und jetzt sieht alles gut aus. Und für den Abstand werde ich einen Artikel zwischen den Größen hinzufügen. Nein, nein, das nicht. Ich werde diesen Artikel zwischen den Größen 20 wie folgt hinzufügen. Okay. Und hier ändern wir die Größe auf 20 wie folgt. Machen wir 60 zwischen der Größe dieser beiden Abschnitte. 60. Okay, jetzt viel besser. Jetzt werde ich diesen kurzen Inhaltsbereich verschieben, und wenn wir wollen, können wir die Ausrichtung links mittig so einstellen . Jetzt können wir die Arbeit fortsetzen. Als zweiten Abschnitt werde ich diesen Reichweitenbereich so duplizieren und hier können wir die Größe 20 dazwischen hinzufügen . Bevor wir das tun, fügen wir Inhalt für diesen Abschnitt hinzu. Dazu öffne ich die Datei. Von hier aus müssen wir den Standortbereich hinzufügen, Standort der Klinik kopieren und ihn hier ablegen. Kopieren Sie dann den tatsächlichen Standort. Dann werde ich diesen Ort so hinzufügen. Und für diesen Abschnitt benötigen wir diese Zahlen nicht. Ich werde es einfach entfernen. Und hier kopieren wir diesen Text und platzieren ihn unter der Position. Duplizieren Sie den Ortstext und wählen Sie ihn aus , platzieren Sie den Text und kopieren Sie ihn so. Dann versuchen wir hier einen Link hinzuzufügen. Link, ich muss zu ASSets in ASSets gehen, hier klicken und auf Tn klicken und der Link wird ein Kartenlink sein. Der Kartenlink wird in Ordnung sein. Klicken Sie auf Instanz einfügen und hier unsere Instanz und ich werde sie einfach ausschneiden und hier klicken, dann fügen Sie sie ein und schneiden Sie einfach den Text aus und fügen Sie diesen Text ein. Wir können den Text hier drinnen sehen, aber er ist zu lang. Dazu müssen wir eine Kurzversion dieses Links hinzufügen. Ich werde zu diesem GPT gehen Okay, hier haben wir die drei Optionen. Also bei den drei Optionen werde ich diese Find-Us-Esialsierung kopieren und sie hier einfach so hinzufügen Okay. Jetzt müssen wir das Symbol hier ändern, um das Symbol zu ändern. Ich werde hier klicken und auf Plugins und Widgets klicken und hier Fon TSM-Symbol klicken und hier Kartensymbol für die Suche nach Standort, Karte hier klicken und das Symbol zur Leinwand hinzufügen und das Symbol ausschneiden Ich brauche diesen Rahmen nicht, gehe dann in diesen Symbolbereich und füge das Symbol ein, entferne dieses Symbol Dann sehen wir uns die Größe des Symbols an, es ist 60. Stellen wir die Größe des Symbols auf sechs P ein und ändern Sie dann die Farbe auf Blau. So weit, so gut und jetzt müssen wir den Button hinzufügen. Sehen wir uns den Button-Text an, der Button-Text wird nach Terminanfrage sein, und um diesen Button-Text hinzuzufügen, werde ich diese Art von Design nicht verwenden. Ich werde einfach Text erstellen und diese Art von Text für den Moment hinzufügen und dann die Terminanfrage kopieren. Dann muss ich das innerhalb dieser Abschnitte hinzufügen , so wie: Okay, für diesen Frame 20 werde ich ihn umbenennen, um es inhaltlich detailliert darzustellen. Dann werde ich diesen einzigartigen Ort umbenennen. Okay. Dann werde ich die Panzer so duplizieren und sie erscheinen hier nicht , weil die Größe dieses Abschnitts 600 ist. Ich werde es einfach auf 700 ändern. Okay. Jetzt können wir tatsächlich diese beiden Elemente auswählen und Shift A drücken und die Größe dazwischen auf 220 ändern . Dann kann ich diese Takes in diesen Frame einfügen. Okay. Und lassen Sie uns diesen Frame-Namen in ein Kontaktfeld wie dieses umbenennen. Okay. Dann fangen wir an , diesen Abschnitt zu gestalten. Isolieren Sie diesen Text für die Terminanfrage und duplizieren Sie ihn Dann kommen Sie her und ich werde diesen Teil tatsächlich kopieren. Wir können es so von hier kopieren, dann kommen Sie her und fügen es so ein. Okay. Dann gehe ich zu ASEDs in Assets, klicke auf BTN und dann auf Lassen Sie uns BTN herausfinden, das ist gut Lassen Sie uns BTN als Standard festlegen und klicken Sie auf Instanz. Hier füge ich den Text hinzu, was der Text Schedules sein wird, dann werde ich diesen Text Dann schneide ich diese Schaltfläche aus und gehe zu Dateien in Dateien Ich werde das hervorheben und die Schaltfläche so platzieren Das sollte außerhalb dieses Schnellkontakt-Buches A stehen. Es sollte drinnen sein. Und dieser Button sollte sich auch darin befinden. Dann wähle ich drei Optionen wie diese und drücke Chief A, um einen Groove zu erzeugen. Und jetzt fügen wir Details hinzu. Für die Typografie wähle ich die Unterteilung zum Testen aus, ich wähle den Absatz aus und die Schaltfläche wird so aussehen Wenn wir wollen, können wir hier auch ein Symbol hinzufügen Wenn wir also ein Symbol hinzufügen, ist es perfekt. Lassen Sie uns also ein Symbol hinzufügen. Zuerst werde ich diesen Frame 20 umbenennen, um einen Termin zu vereinbaren, und lassen Sie uns das Symbol von Grund auf neu erstellen oder wir können es einfach von hier kopieren. Lass es uns von hier kopieren. Ich hoffe, du verstehst, wie man ein Symbol erstellt. Wenn nicht, gib mir einfach die Befehle , damit ich dir zeige, wie es geht. Das Layout für Terminanfragen ist jetzt vertikal, aber wir brauchen es horizontal. Um das zu tun, wähle ich zuerst diese drei Elemente aus und drücke Shift A, und hier ändere ich das als Stufen. Dann haben wir das Symbol. Also wähle ich diesen Anfragetermin und ändere ihn in ein horizontales Layout. Und dann müssen wir die Position des Symbols so ändern. Okay, dann wähle es aus und klicke links auf dieses Logo. Okay. Was wir nun tun müssen, ist, diesen Text als Füllinhalt zu erstellen hier klicken und auch das ändern , um Container zu füllen, und hier müssen wir diesen Umarm-Inhalt erstellen Nein, nein, umarme den Inhalt nicht. Es sollte ein Füllcontainer sein und dieses Textlayout sollte ein Füllcontainer wie folgt sein Hier haben wir zwei Abschnittsebenen, aber wenn es nur einen Abschnitt hat, wäre das großartig. Lassen Sie uns die andere Option ändern , die uns JGBT bietet. Lass uns diesen versuchen, kopieren, herkommen und diesen Text so ersetzen Okay. Jetzt ist es viel besser. Hier haben wir immer noch ein Problem. Ich salze den Text und lass uns das zwischen den Artikeln auf zehn ändern. Jetzt ist es viel besser. Jetzt müssen wir dieses Symbol ändern. Lass es uns ändern, gehe hierher, klicke auf Plugin und Widget und klicke auf das Antosm-Symbol Von hier aus kommen wir zu diesem Typ. Der Vektor wird von hier aus ausgeschnitten, dann wird dieses Symbol ausgewählt und eingefügt Klicken Sie hier, um es zu entfernen, und setzen Sie dann die Dosenhöhe auf sechs. Das Symbol ist tatsächlich 60 und klicken Sie auf Füllen und dann auf blaue Farbe. Jetzt scheint es zu nah beieinander zu liegen, also machen wir es als Zwilling, nicht als 20, 30. Von hier aus machen wir das zu 30, also von hier aus müssen wir diese Größe auf zehn ändern. Dann ändern wir diesen Terminplaner-Besuch, den ich eintippen kann , auf Kartenlink und jetzt ist es perfekt Jetzt müssen wir diesem Bild einige Details hinzufügen. 62. Design-Überprüfungsabschnitt: Hallo, alle zusammen. Lassen Sie uns nun diesen Vorschaubereich gestalten. Okay, lass uns zu unserem Design gehen. Von hier aus werde ich als ersten Schritt einen Rahmen erstellen und diesen mit dem Füllbehälter vergrößern und die Höhe auf 600 erhöhen. Dann drücke ich Shift A zwei bei automatischem Layout. Dann ändere ich hier diesen Namen in Review. Dann entferne ich die linken zehn rechten Ränder, horizontale Polsterung und die vertikalen Schmerzen Dann werde ich einen Text hinzufügen, einen Text wie diesen voreinstellen Dann lassen Sie uns diesen Text so in eine Kopfzeile umwandeln. Dann muss ich wieder diesen Bewertungsbereich auswählen und die Höhe auf 600 ändern. Okay. Jetzt werde ich diese Position so ändern, dass sie die obere Mitte so ausrichtet. Okay, gehen wir hierher und lassen Sie uns generieren. Nehmen wir an, ich möchte jetzt Inhalte für den Bewertungsbereich generieren. Geben Sie mir fünf Bewertungen mit dem Namen des Patienten. Geben Sie mir dann auch Titelüberschrift für den Moderator der Bewertungsabteilung. Hier brauche ich drei Vorschläge. Geben Sie mir drei Vorschläge für die Überschrift, jedenfalls nicht für die Überschrift, was unsere Patienten sagen, lassen Sie uns diesen kopieren Familien wie Ihre vertrauen uns. Und fügen wir es diesem Abschnitt hinzu. Lassen Sie uns einen Abschnitt mit Rezensionen erstellen. Fügen Sie dann den Titel hier ein. Machen wir es wie eine Zeilenüberschrift. Dann müssen wir hier die Bewertung hinzufügen. Kopiere sie alle und komm her. Seite sie so ab. Okay. Ich werde es sagen. Okay, jetzt gehen wir hier zum Design und fügen zuerst den Titel hinzu, dem Familien wie Sie vertrauen, fügen dann diesen hinzu. Okay, jetzt muss ich diesen Bewertungsbereich erstellen. Okay, lass uns das machen. Zuerst erstelle ich einen Text und dieser Text wird ein Name sein, und bevor ich das mache, wähle ich diesen Abschnitt mit der Rezension und lass uns ihn auf die horizontale Ebene ändern, und dann wird diese Überschrift ganz oben stehen. Und hier haben wir den Namen und dann die Bewertung. Okay, Name und Bewertung. Jetzt wähle ich den Namen aus, ändere seine Größe auf Sub Din und klicke auf Überprüfen und ändere die Typografie in Absatz Okay. Jetzt komme ich hierher und klicke auf Ellipse und erstelle die Ellipse so Wenn ich es erstelle, drücke ich die Umschalttaste. Die Form wird also perfekt so ausgerichtet sein. Okay. Jetzt wähle ich all diese Bereiche aus und drücke Shift A. Dann wähle ich wieder nur diese beiden Elemente aus und drücke Shift A, um ein anderes automatisches Layout hinzuzufügen. Dann wähle ich den Hauptrahmen und mache daraus ein horizontales Layout. Dann werde ich diese Ellips so auf die Oberseite legen. Okay. Eigentlich funktioniert dieses Muster nicht, also werde ich diesen Rahmen entfernen, um ihn zu entfernen, ich wähle den Rahmen aus und gehe dann hierher, dann wähle ich den Rahmen und hier wähle ich Automatisches Layout entfernen, und dann füge ich das einfach so hinein und dann entferne ich diesen Rahmen und wir müssen das Foto des Rezensenten und den Namen gruppieren. Ich wähle einfach diese beiden Abschnitte aus und drücke Shift A, dann mache ich es horizontal und setze eine Linie links in der Mitte. Dann wähle ich den Hauptrahmen aus. Dann mache ich das als vertikales Layout, und hier werde ich es so einstellen, dass es oben links ausgerichtet ist. Okay. Jetzt haben wir das Design, und von hier aus wähle ich das automatische Hauptlayout um es oben links auszurichten, und klicke hier, mache dann diesen Füllbehälter und ändere den Text so, dass er mittig ausgerichtet ist. Okay. Jetzt wähle ich hier den Rahmen aus. Lassen Sie uns diese Stopps umbenennen. Das wird eine Vorschaubox sein, und das wird Avata Avata sein, so wie Okay. Jetzt wähle ich einfach das Bewertungsfeld aus und vergrößere es so, wie hier. Jetzt fügen wir echte Details hinzu und fügen dann Stil hinzu. Also gehe ich einfach zu dieser Textdatei und lass uns diesen Namen holen und hier einen Namen hinzufügen Dann lassen Sie uns die Bewertung wie folgt kopieren, kopieren und das Tempo der Bewertung so einstellen. Dann setze das Ganze mit der Füllung so ein. Okay. Lassen Sie uns jetzt auch das Bild einstellen. Ich wähle einfach diese Ellipse aus und klicke hier, dann klicke ich auf Image Video Dann werden wir hier die Rezensenten Avata haben. Also wähle ich hier das Foto aus und füge es einfach so ein. Okay. Dann werden wir das Bewertungsfeld auswählen. Im Bewertungsfeld lege ich die Feldfarbe als unsere weiße Farbe fest und fügen dann die Effekte hinzu, die wir bereits gespeichert haben. Okay. Jetzt wähle ich die Bewertungen aus, und hier setze ich links und rechts als und oben und unten als sechs. Nein, nicht dieser. Nicht der Bewertungsbereich, wir müssen das Bewertungsfeld auswählen, und das horizontale Muster wird sechs sein und das vertikale Muster wird sechs sein, so wie hier. Auch hier müssen wir die Ecken auf diese Weise auf 20 ändern. Lass uns eigentlich oben und unten da es schöner aussehen wird. Jetzt wird diese Innenseite 22 sein. Hier wird die Größe zwei sein. Okay. Dann wähle ich den Text und ändere die Feldfarbe in diese schwarze Farbe. Ich muss es für den Abschnitt machen. Und hier, lass es uns am Ende machen, aber jetzt müssen wir ISAs hinzufügen Um diese fünf Sterne hinzuzufügen, wähle ich das Bewertungsfeld und lasse es uns so ändern , wie es passiert ist Lassen Sie uns dieses horizontale Layout als erstellen. Um die Bewertungs-IAs hinzuzufügen, klicke ich hier und klicke auf das Pontosm-Symbol Hier suche ich und hier haben wir Sterne Ich klicke einfach auf diesen Stern und komme hierher, schneide ihn ab und entferne den Rahmen Wählen Sie dann dieses Bewertungsfeld aus und in diesem Bewertungsfeld drücke ich einfach auf den Stern und hier füge ich es so hinzu. Dann werde ich seine Farbe in diese goldene Farbe ändern. Dann wähle ich den Stern aus und dupliziere ihn fünfmal. Dann wähle ich alle aus und lass uns alle auswählen. Ich drücke einfach die Umschalttaste und wähle alle aus und drücke dann Shift A, um sie zum Layout hinzuzufügen Dann ändere ich die Position in ein horizontales Layout, und hier ändere ich das Element zwischen den Größen. Machen wir sechs draus. Okay, perfekt, und ich werde die Größe der Sterne beibehalten, aber wenn du willst, kannst du sie einfach auswählen und die Breite und Höhe ändern. Okay. Jetzt sieht es so aus, wir können sie einfach von hier aus duplizieren oder wir können eine Komponente erstellen. Lassen Sie uns das für dieses Beispiel einfach so duplizieren, wie es ist. Ich platziere einfach das Übersichtsfeld und drücke Befehl C und Befehl B, dann wähle ich diese beiden Überprüfungsfelder aus und drücke Shift A und mache es horizontal. Dann wird die Größe dazwischen 20 sein, also so. Ja, wir müssen das von einem Punkt aus erhöhen. Wir müssen hier auf diese Weise dasselbe tun. Okay, lassen Sie uns die Höhe erhöhen, lassen Sie uns die Höhe erhöhen. Erhöhen wir die Zahl um die Zeile 440. Machen wir dasselbe hier, 440, so. Dann füge ich das zwischen den Größen 60 hinzu, dann werde ich das nochmal duplizieren. Wenn ich es dupliziere, geht es außerhalb dieses Rahmens, aber das ist völlig okay, weil wir das als Slider machen werden. Okay, gut. Lass uns auch die Höhe erhöhen. Lassen Sie uns versuchen, die Höhe für 4.040 bis 2.440 auf diese Weise zu erhöhen. Lass es uns auch hier machen, für 40 und hier für 440 Okay. Allerdings haben wir nicht viel größere Bewertungen, also brauchen wir es vielleicht nicht als 440, aber lassen wir es bei 300. Ja, 300 werden okay sein. Sehen Sie sich das Problem an, dass wir kein Bauteil haben, wir haben die Höhe dieser Designs manuell angepasst. Nun, wenn wir das Design überprüfen, wird es so aussehen, also muss ich den Inhalt ändern und auch diesen Rahmen korrigieren, ohne dass irgendwelche Probleme angezeigt werden , um es zu beheben, wie wir es getan haben, bevor wir diesen Bewertungsbereich auswählen und die Höhe auf 1.200 hinzufügen Dann füge ich horizontale Patins für beide Seiten hinzu und lass uns das Problem so beheben. hier haben wir ein Problem Wenn Sie das Design überprüfen, wird es so aussehen, aber es gibt mehr Platz, um es von hier aus zu beheben Ich klicke hier und mache die Null als die Seite des Schmerzes und lass uns mit 1.180 beginnen. Okay. Jetzt ist es absolut ja. Jetzt, wenn wir es sehen , wird es so aussehen. Okay. Jetzt müssen wir als nächsten Schritt drei Punkte hinzufügen. Dazu gehe ich zu Assets, klicke auf den Seitenpunkt, klicke auf Instanz einfügen und lass es uns einfügen. Lass es uns ausschneiden und zu den Dateien gehen. Und hier drinnen werde ich es so drücken. Dann drücke ich einfach diese beiden Elemente und drücke A, um das automatische Layout hier hinzuzufügen Ich mache das auf 220 und das automatische Layout wird eine Linie zur Mitte wie folgt sein. Passen wir es jetzt manuell an, da dieser Abschnitt zu lang ist, also müssen wir ihn manuell anpassen. Um es manuell anzupassen, werde ich diesen Rahmen entfernen, nein, wir müssen ihn anpassen, ich wähle einfach die Elemente aus und klicke auf Ignorieren, und ich werde ihn einfach manuell so anpassen Dann werden es 20 sein. Okay. Gut. Und jetzt müssen wir diesem Bewertungsabschnitt so einen Hintergrund hinzufügen, dann wird der Bewertungsbereich 600 sein, aber wir brauchen nicht, dass er 600 sein muss. Also machen wir es so, dass es 500 enthält und wir es auf 500 machen. Mal sehen, mal sehen, lassen Sie uns die Größe so verringern. Dann wählen wir diesen aus und die Höhe ist 492 und wo ist der Rahmen , den wir hinzugefügt haben. Das ist es. Machen wir die Höhe 492 und es wird ein kostenloser Container sein. Lassen Sie uns diese Sachen jetzt umbenennen. Hier ändere ich das Bewertungssatz und wir brauchen diesen Rahmen nicht, also wähle ich einfach alle Bewertungen aus und füge sie zur Überprüfung und lass uns das Layout in ein horizontales Layout wie dieses ändern . Dann werde ich diesen Rahmen überprüfen und hier werde ich diesen Rahmen ändern, um G zu überarbeiten , und dieser Rahmen wird Lab One oder am selben Tag sein, dieselben Daten, dasselbe DA-Tag, und dieser wird 24 Schrägstrich 7 sein , all diese Texte taggen, wir müssen die Füllfarbe in diese schwarze Farbe wie diese ändern . Jetzt fügen wir die echte Waffe hinzu. Öffnen wir die Datei und wir haben David, kopieren den Text und testen ihn so Lass uns das Bild hinzufügen. Dann haben wir hier eine weitere Bewertung. Fügen wir es hier hinzu und ersetzen diesen Text. Jetzt ändere dieses Bild so. Jetzt sehen wir es uns im Design an. Ich werde so aussehen, damit wir die Größe dieser Box verringern können. Wir werden es im Elementor-Design machen. Lass es uns jetzt so belassen. Jetzt haben wir eine Sektion. Jetzt müssen wir nur noch den Puta-Bereich erstellen. im nächsten Video Lassen Sie uns im nächsten Video den Puta-Bereich entwerfen 63. Design-Fußzeile: Hallo, alle zusammen. Jetzt müssen wir nur noch diesen Fußzeilenbereich erstellen Wenn ich also den Fußzeilenbereich erstelle, werde ich ihn in dunkler Farbe erstellen, und hier füge ich ein Logo hinzu, und hier füge ich eine Zusammenfassung der Klinik hinzu, und hier füge ich ein Social-Media-Handle Danach werde ich hier nützliche Links hinzufügen. Dann diese Seite, ich werde diese Kontaktleiter hinzufügen. Okay. Lass uns anfangen. Zuerst vergrößere ich den Rahmen und füge einen neuen Rahmen hinzu, und wir machen ihn mit einem Füllcontainer, und er wird es vorerst auf 500 machen, und dann füge ich dem ein automatisches Layout hinzu, also drücke ich Shift A, gerade das automatische Layout hinzu, dann automatisches Layout. Die Richtung wird das horizontale Layout sein und hier setze ich den horizontalen Abstand auf Null und den vertikalen Abstand auf Dann müssen wir schwarzen Hintergrund hinzufügen. Wenn wir diese Füllfarbe einfach in Schwarz ändern, wird sie nicht auf die Größe dieses Rahmens festgelegt. Wir müssen nur hier klicken, auf das Rechteck klicken und so klicken, dann mit Füllung und Höhe einstellen, dann ist Rechteck klicken und so klicken, dann mit Füllung und Höhe einstellen, die Einstellung mit Füllung und Höhe 500 Okay. Jetzt werde ich auf diesen Igno Autoayo dieses Rechtecks klicken. Dann kann ich es so anpassen, wie ich will, es so anpassen und hier werde ich außerhalb dieses Rahmens so hinzugefügt Dann nicht im Bewertungsbereich direkt außerhalb des Rahmens wie diesem und wir sollten auf IgnotlaPut it as this so klicken Was ist passiert? Ernsthaft Okay, jetzt alles gut. Hier ist das Rechteck. Ich werde das Rechteck nicht an die Spitze setzen, dann werde ich Itroclor zum Rechteck hinzufügen Keine Itrolor-Feldfarbe. Die Feldfarbe wird diese schwarze Farbe sein. Dann ist unsere Feldfarbe jetzt dieselbe, dann müssen wir als ersten Schritt unser Logo hinzufügen. Gehen wir zu unserem Stylesheet. Hier ist unser Stylesheet und hier ist unser Logo. Das ist unser Logo, aber wir brauchen das weiße Logo. Erstellen Sie ein weißes Logo, ich platziere einfach das Logo und in der Eigenschaft kann ich auf die Variantenschaltfläche klicken und eine Variante erstellen. Bringen Sie den Abschnitt hierher Ich werde diese Farbe ändern, um die Variante festzulegen , und den Variantennamen in weißes Logo ändern Ordnung. Gehen Sie jetzt wieder auf die Website und hier werde ich das Logo hinzufügen, gehen Sie zu Assert Assets. Wir haben das JB-Logo, klicken Sie darauf und hier das schieferweiße Logo, klicken Sie auf Einfügungen, dann schneide ich die TG-Dateien in den Rahmen aus, füge es ein und lassen Sie uns diesen Frame-Namen in „Okay“ ändern Jetzt muss ich den Fußzeilenbereich so auswählen, dann müssen wir den oberen Rand hinzufügen, da er nur am oberen Rand 60 ist den Fußzeilenbereich so auswählen, dann müssen wir den oberen Rand hinzufügen , 60 ist zu groß, Kit 30 ist gut und die Artikelgröße werde ich vorerst auf Null setzen. Dann muss ich einen Text erstellen. Ich drücke T bei dieser Art von Text, dann ändere ich es von Ty für Tab in Absatztext und die Füllfarbe, lassen Sie uns die Füllfarbe auf diese weiße Farbe ändern. Dieser Text sollte sich wie folgt in der Fußzeile befinden. Jetzt werde ich diese beiden Optionen sehen und Shift A drücken , dann werde ich dieses Layout in vertikal ändern Hier muss ich dieses Logo über den Text legen. diesem Rahmen müssen wir die Größe zwischen den beiden Enden ändern . Als Nächstes fügen wir hier eine Zusammenfassung hinzu, gehen wir zu Hart GPT, und hier, sagen wir, jetzt brauche ich eine Zusammenfassung, nein, nein, ich muss den Put-Abschnitt entwerfen, diutertonGib mir Schauen wir uns an, welche Art von Details mit GPT generiert werden. Okay, ich generiere die Details so. Okay, und gut. Okay, wir haben alle Details, aber ich brauche eine Zusammenfassung. Nehmen wir an, ich benötige eine Zusammenfassung für Clean in 150 Zeichen. Verstanden, habe Text. Lass uns das hier hinzufügen. Füge einen Abschnitt hinzu, einige hier, ändere diesen Text so, dann werde ich ihn so einstellen, dass er gefüllt enthält. Jetzt muss ich diese Größe in vier Spalten ändern. Okay, wir müssen hier Social-Media-Handles hinzufügen, wir haben einen Link zu sozialen Netzwerken, ich werde Facebook, Twitter, Facebook, Sam, Twitter und Link haben . Fügen wir den Tag hinzu, auf den ich hier eingehen werde. Jetzt klicke ich hier und klicke auf Fontas Suchphase Diese Stelle, ich kann sie hier, einfach auswählen, diesen Teil entfernen und dann auf die Kreuzung klicken, die Position so platzieren Platziere es unter diesem Rahmen. Lassen Sie uns diesen Rahmen wie folgt zu einer reinen Summe machen. Jetzt müssen wir hier nur Shift A drücken, um das automatische Layout hinzuzufügen. Dann klicke ich auf das Vektorsymbol und lasse uns die Feldfarbe auf Weiß ändern , damit wir deutlich sehen können , was hier passiert ist. Also lass uns diesen Sarazeb hier umbenennen und hier stelle ich ihn als gesendete Zeile ein und hier ändere ich zu Umarmung und die Höhe wird Umarmungsinhalt sein Und jetzt können wir die horizontale und vertikale Patina ändern . 20 Und jetzt werde ich bei Field Color sein. Fügen wir diese blaue Farbe als Feld hinzu, dann Radio 20, machen wir es auf 20. Dann reduzieren wir die Ecken auf neun. Dann lass uns hier sein. Nicht schlecht, aber wir können dieses Facebook vergrößern . Ich klicke einfach auf die I 2542 Jetzt sieht es okay aus, jetzt muss ich dieses Presseblatt duplizieren. Lassen Sie uns diese beiden Symbole auswählen und Shift A drücken, um automatische Layout hinzuzufügen, und lassen Sie uns das horizontale Layout erstellen Und dazwischen Seite B 20. Und jetzt ändern wir dieses Vektorsymbol. Lass uns Link Thin hinzufügen. Fügen wir X Twitter C Hochtöner hinzu. Haben wir kein neues Tita-Symbol? Es sieht so aus, als hätten wir kein neues Twitter-Symbol. Lassen Sie uns vorerst dieses alte hinzufügen, und in Element können wir hier schnell das echte hinzufügen und es so einfügen. Dann entferne ich dieses Facebook und wähle das Twitter-Symbol aus und klicke auf C-Sorte Proposition und ändere mit 505250 ist ein bisschen groß und verringere Sechs sind jetzt okay für High Fill, lass uns einen Hi-Fill-Behälter machen Mit werden zwei mal zu klein sein. Lass es uns schaffen. Wir brauchen nur zwei. Lassen Sie uns die Breite hier mit 65 77 überprüfen. Wir können locker 657 so machen. Okay. Jetzt müssen wir diese Füllfarbe in weiße Farbe ändern. Und lassen Sie uns das noch einmal duplizieren und hier fügen wir ein verlinktes Symbol hinzu. Wir haben verlinkt, wählen Sie einfach das verlinkte Symbol aus, und wir brauchen diesen Rahmen nicht und klicken Sie hier, klicken Sie in diesen Vektor und platzieren Sie den Link hier. Jetzt sollten wir das verlinkte Symbol so vergrößern , dass es mit anderen übereinstimmt. Okay. Und jetzt fügen wir Instagram hinzu. Gehe zu Font tsm S Instagram. Hier haben wir das Symbol und ändern das Instagram, entfernen den Instagram-Rahmen und klicken hier, fügen es so Lassen Sie uns dann diese Größe erhöhen , um die Farbe auf Weiß zu ändern. Okay, isoliere jetzt dieses Set und lass uns dazwischen die Größe auf zwei ändern. Okay. Jetzt schauen wir uns das Aussehen an und es wird so aussehen. Wenn es also zu schwach erscheint, können wir es einfach verringern, indem wir die hohe 60 ändern sie auf 65 65 umstellen Ja, 65 65 wird gut funktionieren. Jetzt siehst du, jetzt wird es so aussehen. Und hier haben wir einen weißen. Lass es uns so ändern. Okay. Und jetzt ändern wir den anderen Abschnitt. Eigentlich kann ich sogar den Fotobereich sehen und er hat bei 30 eine horizontale Polsterung Und jetzt lassen Sie uns diese Sektionen, Klinikübersicht und hier umbenennen Klinikübersicht und hier Also soziale Medien. Dann müssen wir nützliche Links hinzufügen. Lassen Sie uns nützliche Links für diesen Typ ST und hier fügen wir diese Art von Panzern hinzu und lassen Sie uns das so ändern, dass wir das Sub Edin ersetzen, wir haben hier kein Sub. Lassen Sie uns schnell urteilen. Dann fangen wir hier an, fügen wir hier Text hinzu. Dann müssen wir unseren Quicklink hinzufügen. Ich werde es duplizieren, diese beiden Abschnitte löschen und Shift A drücken und das Layout in ein vertikales Layout ändern Und hier ändere ich den Text in Schaltflächen, und dann können wir Details wie Home hinzufügen, und dieses Zuhause wird blau angezeigt, weil das der gewählte Link ist Dann werde ich sie einfach duplizieren und dann gehen wir zu unserer Sitemap und kopieren diesen Abschnitt in den Blog. unsere Anbieter, unser Anbieter, unsere Anbieter, Anbieter, Anbieter, kontaktieren Sie uns über den Kontakt, und dann werden wir einen Termin anfragen müssen , zu denen wir unsere Serviceanfrage nicht benötigen , und vereinbaren einen Termin. Und dann und dann fügen wir eine Seite mit den Allgemeinen Geschäftsbedingungen hinzu. Okay, jetzt wähle ich einfach diese Links aus und drücke Shift A, und lass uns die Größe auf 12 ändern und diesen Frame auswählen. Und hier fügen wir es etwa 30 hinzu. Okay. Dann ändere ich diese Farbe, um einfach alle auszuwählen und ihre Farben auf Y zu ändern. Okay. Und jetzt fügen wir es etwa 60 hinzu, aber wir werden diese Größe natürlich ändern Und jetzt fügen wir unseren Standortbereich hinzu. Es ist unser Standort. Kopie des Kontakts. Und hier erstellen wir einen weiteren Text, drücken auf den Text und ändern die Typografie wieder in Subdin, drücken auf Text färben und von hier aus kopieren wir diese Details Zuerst haben wir die Telefonnummer, die Telefonnummer an der Telefonnummer wie diese, dann muss ich diese beiden Abschnitte wie diesen auswählen und Shift A drücken und dann die Position auf vertikales Layout ändern Und hier drücke ich das T und klicke hier, und hier werden wir diese Schriftgröße auf Absatz ändern. Okay. Jetzt fügen wir die Details hinzu. E-Mail. Ja. Ja. Duplizieren Sie diesen in der E-Mail. Lassen Sie uns das ein paar Mal duplizieren. Fügen Sie dann einfach die Dämme hinzu, wir haben Stunden Zeit. In Ordnung. Jetzt haben wir Probleme, also was ist, wenn wir es so hinzufügen? Lass es uns so hinzufügen. Okay. Okay. Und jetzt wähle ich all diese Elemente aus und drücke Shift A, um eine Gruppe hinzuzufügen, und diese Zwischengröße ist Datel In Ordnung Jetzt haben wir diese drei Abschnitte, und ich wähle einfach den Fußzeilenbereich aus und ich ändere diesen Zwischenraum in Otto und er passt sich an den Platz an, den er hat Und hier ist das Design. Wir müssen das ein bisschen vergrößern und jetzt die Rahmengröße verkleinern, damit sie in die Fußzeile passt Was wir jetzt tun müssen, ist ein Copyright-Bereich. Also lass uns das auch machen. Um das zu tun, können wir tatsächlich diesen Rahmen verwenden. Um das zu tun, vergrößere ich einfach dieses Rechteck. Lassen Sie uns rechteckiges Filmmaterial machen, B-Intervall. Jetzt füge ich Text an der Stelle hinzu, an der ich ihn angebracht habe, also füge ich ihn einfach dem A-Abschnitt hinzu. Und in diesem Fußzeilenabschnitt benennen wir diese Dinge um, damit wir sie leicht verstehen können Das werden also schnelle Klingeltöne für schwache Links sein, und hier wird der Tank sein. Im Moment haben wir die Information, wo der Kontakt ist, das wird Tinte sein . Das werden die Kontaktinformationen sein. Okay. Jetzt werden wir diese drei Abschnitte haben. Ich drücke einfach auf Ich wähle einfach diese drei Abschnitte aus und drücke Shift. A wird eingestellt, und dann füge ich ein und in diesen Poa-Abschnitt ein, ich ändere es in ein vertikales Layout Und jetzt geht der Text nach unten und hier setzen wir ihn wie füllen Die Größe 19 ist 60, das ist in Ordnung. Jetzt ändere ich diesen Tipo Gravity Barging-Typografie und ändere Isolieren Sie nun den Puta-Bereich im Fußzeilenbereich in der vertikalen Polsterung Ich werde hier klicken und Okay. Was ich jetzt tun werde, ist, diesem Abschnitt das Layout hinzuzufügen. Ich verschiebe einfach A und füge dann 30, 30 bis 2020 hinzu, okay. Lassen Sie uns jetzt hier die Copyright-Details hinzufügen. Hier haben wir Urheberrechte. Nein, kein Urheberrecht. Wir schreiben einen 2024, 2024, wie diesen. Jetzt kann ich einen Strich hinzufügen, auf Strich klicken und hier werde ich diese Farbe in weiße Farbe ändern und dann auf diesen klicken. Nicht dieser, klicken Sie auf diesen. Lass uns nur den oberen Teil auswählen und so sein, dann muss ich nur die Puta VG auswählen und sie so vergrößern Okay. Jetzt haben wir einen wöchentlichen Design-Puta-Bereich Also ich habe ein Set gemacht, ich muss die Withs einstellen, da wird etwas falsch sein . Hier drin mache ich 30. Jetzt machen wir 60 draus. Und in einem Schaumstoff-Set muss ich diese Zwischengröße zu Otto hinzufügen , so wie hier Also, es ist okay, und hier werden wir nicht 60, das sind ungefähr 30. Wird so aussehen. Okay. Also, diese Icons sind eigentlich zu groß. Lassen Sie uns das entfernen und dann versuchen, 56 mal 60 hinzuzufügen. Lassen Sie uns bei 66 zuerst das horizontale und vertikale Layout entfernen, und wir benötigen keine Polsterung und ändern es auf 56 mal 50. Behalten Sie das für all diese Elemente Machen wir es nochmal fifo. Jetzt sieht es so aus und sie sieht gut aus. Jetzt müssen wir die Homepage auswählen und Befehl oder Steuerung drücken und es so ausdrücken. Okay. Jetzt hier unser Webseitendesign. 64. Design über Seite Teil 01: Hallo, alle zusammen. Jetzt müssen wir über das Protokoll unsere Anbieter und Kontaktseiten gestalten. Wir haben die Homepage erfolgreich erstellt und jetzt haben wir diese kleinen Aufgaben und um Inhalte für die About-Seite zu bekommen, können wir unsere Konkurrenten nutzen. Eigentlich müssen wir uns nur ein Bild davon machen, wie unsere Konkurrenten ihre Info-Seiten erstellen und welche Art von Inhalten sie verwenden. Und wenn wir uns diese Dinge besorgen, können wir unsere eigene Info-Seite erstellen. Wenn wir zur Datei mit den Anforderungen an das Design der Website gehen, können wir uns die Inspiration für das Design ansehen. Von hier aus werde ich das Konto dieser Wettbewerber eröffnen, einfach hier doppelklicken und dann auf Neuer Tab kopieren und ich werde das für all diese Konkurrenten tun . Website wie diese. Okay. Schauen wir uns jetzt die Info-Seiten an. Zuerst haben wir diese Website und hier haben wir Autink und diese Info-Seite hat nur diesen Abschnitt Und wenn wir hierher gehen, können wir uns dann über die Seite informieren? Nein, hier haben wir keine Info-Seite, also können wir dieses Design ignorieren. Und wenn wir hierher gehen, haben wir es mit dringender Versorgung zu tun. Und hier haben wir ungefähr eine Seite. Auf dieser „Über uns“ -Seite haben wir also die Geschichte über uns, und hier haben wir unsere Mission und Werte. Wenn wir dann nach unten gehen, können wir unsere medizinischen Fachkräfte und das Ärztegremium sehen , und wir können diesen Abschnitt auf unserer Lieferantenseite hinzufügen , und von hier aus können wir diesen Abschnitt und unseren Abschnitt über unsere Mission und Werte aufrufen. Wenn wir hier hingehen, haben wir einen Abschnitt und in diesem Abschnitt über uns haben wir Inhalte über die Klinik und hier haben wir Y Joss und Riax&Enjoy, dann haben wir Details zur wir diese überprüfen, ist es schwierig, uns ein Bild davon zu machen, was wir auf unserer About-Seite hinzufügen müssen Und unserer Meinung nach ist es mein Plan, einen solchen Bereich und einen Abschnitt für unsere Mission zu erstellen. Lass uns das machen. Um das zu tun, gehe ich zum Figma-Design, und im Figma-Design werde ich dieses Design einfügen und lass uns einen neuen Rahmen erstellen, und der Rahmen wird Desktop sein und ich werde ihn neben unsere Homepage stellen und dann den Namen wie oben ändern Dann drücke ich Shift A, um ein automatisches Layout hinzuzufügen , und beim automatischen Layout mache ich es zu einem vertikalen Layout und hier die Zwischengröße eins bis 20 und der linke und rechte 140 und das obere und untere Muster sind Null. Okay. Jetzt müssen wir dieses Rasterlayout hinzufügen. Wenn wir hier nachsehen, haben wir keinen Rasterstil, aber wenn wir hier und hier klicken , haben wir bereits ein Rasterlayout erstellt, also kann ich einfach darauf klicken und auf dieses Plus-Symbol klicken. Dann kann ich einen Stil für dieses Rasterlayout erstellen. Let's S ist wie das Hauptraster. Okay, wenn ich jetzt zu A gehe und hier klicke, können wir das Layout des Hauptrasters sehen. Okay. Jetzt werden wir diesen Abschnitt hinzufügen. Wir können diesen Abschnitt also einfach von hier aus kopieren , ohne ihn von Grund auf neu zu erstellen , da wir jetzt eine übersichtliche Homepage haben und die Genehmigung von unseren Kunden erhalten. Wenn wir das Design genehmigt haben, können wir den Inhalt einfach von hier kopieren. Kopieren wir dieses Menü, um es zu kopieren. Ich kann diesen Helden einfach auswählen und Befehl C drücken und ihn so einfügen. Okay. Stellen Sie jetzt sicher, dass Sie automatische Seitenlayout aktiviert haben, das der Einstellung für das automatische Layout der Startseite ähnelt Wenn es ähnlich ist, werden Sie keine Probleme haben. Und jetzt für die Seite, wir brauchen diese Schaltfläche nicht oder wir brauchen diese Art von Abstand nicht. Ich werde die Höhe dieses Heldenabschnitts auf diese Weise auf 600 reduzieren. Dann haben wir hier diesen weißen Farbtext, aber wir können ihn nicht sehen. Fügen wir ein Hintergrundbild hinzu , damit wir es deutlich sehen können. Ich klicke auf das Rechteck und dann hier. Dann machen wir die Höhe 600 und ich werde auf dieses IgnooToayout klicken Dann kann ich es hier ohne solche Probleme anbringen. Okay. Jetzt werde ich das so machen, bevor ich das mache, ich muss das Bild hinzufügen. Also habe ich das Bild schon erstellt. Sie können dieses Bild im Bereich Ressourcen überprüfen. Lassen Sie uns das Bild hinzufügen. Klicken Sie hier, klicken Sie auf das Imagevideo. Okay, hier. Wir sehen Bilder und das erste Projekt und eine Seite, und hier haben wir ein Bild. Ich klicke einfach auf Öffnen und klicke hier, um es hinzuzufügen. Dann kann ich es hinter mir lassen. Aber wenn ich es hinter mir lasse, sehe ich diese Art von schwarzer Farbe nicht. Wenn wir also auf die Startseite gehen und hier lineare Farben haben , die 80% der Opazität Also hier muss ich diese lineare Überlagerung zu dieser Info-Seite hinzufügen diese lineare Überlagerung zu dieser Also lass uns das machen. Mach es zuerst, ich klicke auf dieses Plus-Symbol. Und hier sehen wir uns die Einstellung an. Ist Null und 84, und die Farbe hat dieses Schwarz bekommen. Also lass es uns hinzufügen. Zuerst haben wir 80 als Deckkraft und wenn ich hier klicke und auf Linear klicke und hier haben wir 84. Dann sehen wir 84, Null, und hier haben wir 24. Lassen Sie uns diese Details zu 24 hinzufügen. Okay. Okay, aber derselbe Stil passt nicht hierher, weil das Bild des Arztes nicht zu sehen ist, also passen wir es so an, wie wir es sehen, wir können es löschen. Wir können das hier so ablegen. Okay. Und hier können wir vielleicht die Opazität auf diese Weise reduzieren und es ist viel besser Okay, jetzt brauchen wir diese Schaltfläche nicht mehr, also löschen Sie die Schaltfläche Hier müssen wir den Text hinzufügen. Um den Text hinzuzufügen, müssen wir den Text generieren und um den Text zu generieren, können wir GPT verwenden Ich habe das HGPT geöffnet und lass uns unsere Eingabeaufforderung abrufen. Hier haben wir die erste Eingabeaufforderung und kopieren die Eingabeaufforderung fügen dann die Vorderseite Sie sind ein Inhaltsautor. Sie sind ein Inhaltsautor, und ich möchte, dass Sie Inhalte für die About-Seite der JB Family Clinic-Website schreiben About-Seite der JB Family Clinic-Website Dann gibt es hier Informationen. Lassen Sie uns also unsere Informationen über die JB Family Clinic hinzufügen, genau genommen die Informationen, die wir auf dem Inhalt der Website haben Wenn wir den Inhalt der Website überprüfen, haben wir hier den Inhalt der Website Ich werde diese Inhalte einfach so kopieren. Vielleicht reicht es , dass wir den Inhalt für hier kopieren. Ich werde es einfach kopieren und dann auf GBT, ich sie. Eigentlich haben wir Inhalte für die Erstellung einer Kreditübersicht der Kategorien Also jetzt möchte ich eigentlich hier drin sagen, sagen wir mal, ich möchte eine Sektion machen. Im ersten Abschnitt geht es um uns, und im zweiten Abschnitt geht es um unsere Mission und Werte. Okay, jetzt der Moderator, um den Inhalt zu generieren, und mal sehen, okay. Jetzt muss ich sagen, ich möchte Titel für die Seite und die Unterüberschrift Brauche eine Unterüberschrift für jeden Abschnitt. Und tatsächlich brauchen wir nicht Unterschriften für jeden Abschnitt. Wir brauchen es nur für Schlagzeilen. Okay, hier haben wir den Titel. Ich werde es einfach kopieren und hierher kommen und hier klicken, dann den Titel so einfügen und lass uns hierher kommen. Und platziere den Untertext so. Vielleicht benötigen wir mehr Details zum Subpeding, weil das zu niedrig ist Nehmen wir an, Subdin benötigt etwas mehr Informationen. Lass uns diesen kopieren. Vielleicht wird es eine Menge Inhalt sein, aber mal sehen, vielleicht passt es. Ja. Es passt hier. Und jetzt müssen wir diese Art von Abschnitt erstellen. Also kopiere ich einfach den Abschnitt und füge ihn so ein. Und lassen Sie uns diese Art von Inhalt nicht zur About-Seite hinzufügen. Und hier machen wir das zwischen Größe, da zwischen Größe 90 Arbeit sein wird. Und hier, lassen Sie uns etwas zum Inhalt hinzufügen, und hier werde ich die Zeile als Überschrift der Angst wie folgt kopieren . Und lasst uns diesen Inhalt kopieren. Zuerst kopiere ich das und füge es so ein, und dann werde ich es duplizieren. Und hier haben wir diesen Abschnitt, fügen Sie einfach diesen Abschnitt ein und hier machen wir ihn auf etwa 60, denn wenn wir 60 daraus machen, hat er mehr Platz. Okay. Jetzt erfahren wir hier nicht mehr. Wir können diese Inhaltsanfrage zu Ihrem Termin hinzufügen und hier benötigen wir diese Schaltfläche nicht. Okay? Jetzt haben wir ungefähr den Inhalt und wir müssen dieses Bild ändern. Bevor wir das Bild ändern, erstellen wir den nächsten Abschnitt. Um den nächsten Abschnitt zu erstellen, werde ich diesen einfach duplizieren und hier werde ich diesen Inhaltsnamen in etwa drei Stufen ändern , und hier haben wir unsere Mission, glaube ich, unsere Mission und Werte. Kopieren Sie es einfach, testen Sie es hier, und was wir tun müssen, ist, diesen Abschnitt an die erste Stelle zu setzen und dieses Bild an zweiter Stelle, so wie hier. Hier fügen wir diese Informationen hinzu, kopieren einfach unsere Mission und Werte und formulieren es so. Dann brauchen wir hier keine Unterzeile, das dauert so Lass uns diesen Button entfernen. Wir brauchen diesen Knopf nicht. Ich werde auch diesen entfernen, und hier müssen wir unsere Kernwerte hinzufügen. Lassen Sie uns es tatsächlich hinzufügen, um es hinzuzufügen, wir können sie wie eine Liste hinzufügen. Was wir also tun können, ist neuen Text innerhalb der Zusammenfassung wie hier zu erstellen , nicht da drin. Okay, hier haben wir eine Unterteilung, lassen Sie uns unsere Kernwerte dort so hinzufügen Dann habe ich es hier als Subdin gesagt und jetzt werde ich es duplizieren und es in Text für Absatz ändern und hier müssen wir zuerst diese Details hinzufügen, ich werde diesen Text kopieren und mein Plan ist, nur diesen Text zu kopieren Wir benötigen nicht so viele Informationen weil der Benutzer das leicht verstehen kann , wenn wir einfachen Text wie diesen hinzufügen. Ich wähle die Ellipse aus und erstelle eine Ellipse als ob wir sie 16 mal 16 machen würden Und jetzt ändern wir diese Füllfarbe Blau und markieren diese beiden Elemente und drücken Shift A, wählen dann das horizontale Layout aus und stellen es hier in die Mitte und die Größe dazwischen wird 12 sein So, vielleicht ist sechs, sechs zu nah dran. Es wird basieren. Okay. Jetzt kopiere ich es einfach für ein paar Mal so. Jetzt werde ich diese Informationen so hinzufügen. Lassen Sie uns noch einmal die Details hinzufügen. Dann haben wir persönliche Aufmerksamkeit. Jetzt werde ich diesen Text kopieren und unten einfügen. Hier haben wir ein Problem. Das Problem ist, wenn wir unsere Mission verfolgen, ist die Größe kleiner als der Text. Was wir also tun können, ist hier zu klicken und auf den Inhalt zu klicken und er wird sich auf diese Weise vergrößern. Dann lassen Sie uns hier diesen Text kopieren und den Text so platzieren. Okay. Jetzt kommen wir zu unserer Mission und unseren Werten. Und ich denke, dieses Bild für 600 zu erhöhen, wird darauf basieren. 605 20 ist okay. Vielleicht ist 520 hier okay, lass uns die Höhe 600 so machen und wir müssen diese Bilder jetzt ändern. 65. Design über Seite Teil 02: Okay. Jetzt fügen wir diese Bilder hinzu. Zuerst klicke ich auf dieses rote Dreieck oder das Bild. Klickt hier, klickt auf Maglah Videos und auf einen Seitenordner in der Bilddatei, ihr könnt über uns unser Missionsbild sehen, klickt einfach drauf und setzt es so ein Dann kannst du bei unserer Mission dasselbe tun Okay. Jetzt haben wir Abschnitte über uns und unsere Mission. Dann können wir im Inhaltsordner der Website sehen, dass acht Kategorien hinzugefügt werden müssen. Fügen wir sie also hinzu. Es ist ziemlich einfach. Ich werde das etwa um die Seitengröße erhöhen, und hier können wir diesen Abschnitt einfach kopieren , so wie er ist , einfach kopieren und so einfügen. Versiegeln Sie die Seite tatsächlich und fügen Sie sie so ein. Warum es kein O hinzufügt, etwas stimmt nicht. Weil wir das Ignotolayo hinzufügen, also entferne ich das Häkchen und es passt perfekt Und hier müssen wir diese Breite ändern. Hier haben wir also die Breite 1001 60, also müssen wir diese Breite auf dieselbe Breite setzen. Um das zu tun, können wir diese linke und rechte Polsterung einfach so entfernen, dann passt sie sich automatisch an und hier können wir sie einfach den Behälter füllen lassen und es wird sich so anfühlen und hier brauchen wir diese Karussell-Symbole nicht Das wird am wenigsten so sein. Okay. Jetzt müssen wir den Inhalt hinzufügen. Also lass uns das machen. Zuerst müssen wir hier die kleine Beschreibung wie diese hinzufügen, dann werde ich sie duplizieren, und hier müssen wir die Kreditbeschreibung wie folgt hinzufügen. Okay. Und bei diesen Takes müssen wir die Typografie ändern , also so, als ob Button, Button nicht funktionieren wird Vielleicht ändern wir es in einen Absatz, und was ist dann, wenn wir Unterstreichungen hinzufügen Das Hinzufügen von Unterstreichungen ist nicht professionell und vielleicht lassen Sie uns Absatz machen und dieses reguläre Medium so Lassen Sie uns die Größe auf 2021 erhöhen, und zwar so. Und jetzt kann ich dazwischen die Größe 20 haben, aber machen wir es auf 15. 15 wird gut funktionieren. Okay, wir haben die erste Kategorie und wir müssen dasselbe für die Kategorien tun, und ich werde diesen Text einfach von hier kopieren und ihn so hier platzieren. Dann platzieren wir die Panzer auf der Kreditbeschreibung so und hier können wir gleiche Größe wählen und die Ausrichtung oben links als Ausrichtung machen und das Gleiche machen wir hier so. Lass uns weitermachen und jetzt haben wir diese dritte bei dieser kleinen Beschreibung, kopiere die kleine Beschreibung von hier. Und mag es wie hier, dann kopiere die Kreditbeschreibung, füge die Kreditbeschreibung und kopiere einfach. Klicke einfach auf diesen Artikel und klicke auf Immobilie kopieren und hier klicken und hierher kommen und auf Immobilie einfügen klicken Hier zwischen Größe 15 und wir müssen es auch hier 15 machen Okay. Nun, dann müssen wir diesen hinzufügen. Die kleine Beschreibung, lass uns den Text von hier kopieren und so einfügen und ihn so platzieren und einfügen. Okay. Nun nochmal, hier, hinter dem Eigentum , wir müssen das Eigentum noch einmal kopieren , Eigentum kopieren, Eigentum einfügen. Okay, dann mach es gleich Objekt. Jetzt haben wir diesen Abschnitt und wir haben noch vier weitere vor uns, und lassen Sie uns diese vier Elemente im eigentlichen Design hinzufügen Und jetzt müssen wir diese Fußzeile hinzufügen. Also können wir diese Fußzeile einfach kopieren und hier einfügen. Eigentlich denke ich, kopiere sowohl die Fußzeile als auch die Fußzeile VG und füge sie so ein Eigentlich können wir diese Elemente auswählen. Klicken Sie auf Komponente erstellen und der Name der Komponente wird in der Fußzeile angezeigt Jetzt können wir zu ASSRs gehen und hier haben wir die Fußzeile per Drag-and-Drop wie folgt Oder wir können einfach hier klicken und auf die Istat-Instanz klicken Dann machen wir die Größen eins bis 20 und setzen es so zusammen. Okay, wir haben die Info-Seite erfolgreich gestaltet. 66. Entwurf einer Blogseite: Hallo, alle zusammen. Jetzt ist es an der Zeit, die Blockseite zu gestalten. Mein Plan ist es, Blogbeiträge wie diesen zu gestalten. Lass uns anfangen. Zuerst werde ich einen neuen Rahmen erstellen. Eigentlich können wir diese Info-Seite einfach duplizieren und diese Inhalte entfernen. Wir brauchen nur den Header-Inhalt und hier werde ich zum Blockieren wechseln. Jetzt gehe ich zum Har GTP und frage, ob ich den Titel der Blockseite und eine kleine Beschreibung haben möchte Hier haben wir den Titel. Ich werde es einfach kopieren und einfügen und hier haben wir eine kleine Beschreibung, die so eingefügt wird. Okay. Jetzt werde ich diese Art von Design verwenden, also kann ich dieses Design einfach kopieren und bearbeiten. Ich werde einfach Bußgelder verhängen und hier unsere Anbieter kopieren und hier klicken und so einfügen, dann werde ich es so platzieren und von hier aus werde ich dieses entfernen. Okay, und jetzt mache ich die Zwischengrößen eins, zwei und mache links und rechts auf diese Weise gleich. Okay. Jetzt brauchen wir das hier nicht, entfernen es einfach und wir brauchen kein Profilsymbol, um entfernen und hier, lassen Sie uns dieses, zwei entfernen und hier, entfernen wir es auch. Und sehen wir uns unser Design noch einmal an. Hier haben wir Titel und kleine Beschreibung, dann das Datum der Veröffentlichung des Artikels. Also lasst uns diese hinzufügen für. Okay, hier sollten wir das Datum haben. Gehen wir zum Chat GDP und fragen mich nach dem Blogartikel sructblogist Es sollte einen Titel, eine kleine Beschreibung und das Erstellungsdatum enthalten . Okay, hier haben wir den Titel. Ich kopiere einfach den Titel und füge ihn so ein. Dann kleine Beschreibung, kopiere die Beschreibung und füge sie so ein, dann müssen wir hier diesen Titel kopieren und den Titel diesem Titel hinzufügen, nicht dem Titel. Es ist das Datum. Und als Nächstes möchte ich das zu zweit weil drei mal drei nicht viel Platz haben werden, aber drei mal drei ist okay. Ja, drei mal drei ist okay. Lass uns die drei mal drei so lassen. Aber wenn wir wollen, können wir das einfach erhöhen und zwei mal zwei hinzufügen. Zwei zu zählen wird größer sein. Machen wir drei mal drei und hier haben wir den nächsten. Eigentlich müssen wir nicht für jeden Inhalt hinzufügen, also werde ich das dreimal einfügen, bevor Sie das tun Lassen Sie uns diese beiden entfernen und einfach dreimal kopieren und einfügen. Und hier brauchen wir diese beiden Elemente nicht, wir entfernen sie einfach. Und jetzt werde ich dieses Bild ändern. Ich denke, wir haben die Bilder schon, also okay, klicken Sie auf das Bild und klicken Sie hier und wir haben die Blog-Seite, kopieren Sie einfach den Text von dort und lassen Sie uns das Gleiche für hier tun. Jep. Jetzt müssen wir das nur noch zum zweiten Mal so duplizieren und hier müssen wir diese Höhe auf Inhalte wie diesen ändern diese Höhe auf Inhalte wie diesen Also lass es uns so ein bisschen größer machen. Okay. Und hier müssen wir diesen Teil vielleicht um 640 erhöhen und lassen Sie uns das Gleiche dafür tun, es sind tatsächlich 645 Lass uns hier dasselbe tun. Okay. Jetzt sieht der Blockteil gut aus und gehe zu ASRs und wir müssen die Fußzeile hinzufügen Fügen wir die Fußzeile so hinzu. Lass uns eins daraus machen und das hier so reduzieren. Jetzt haben wir ungefähr zehn Blockseiten blockiert. Jetzt müssen wir die Kontaktseite erstellen. 67. Blog-Seitentwurf: Unser Problem auf der Blog-Seite. Ich denke, Sie haben 100 Blogbeiträge auf Ihrer Website. Wenn jemand auf diese Blog-Seite kommt, wird der gesamte Blogbeitrag geladen. Es gibt zwei Möglichkeiten, dies anzugehen. Die erste Möglichkeit besteht darin, eine Funktion hinzuzufügen , die nur Beiträge lädt, wenn jemand auf der Website scrollt. Wir müssen dafür JavaScript und PHP verwenden, oder wir können eine Paginierung hinzufügen, was bedeutet, dass wir nur sechs Beiträge pro Seite laden können Wenn jemand hier mehr sehen möchte, haben wir eine Seitennummerierung und wir können auf die zweite und dritte Seite klicken, um sie zu überprüfen . Lassen Sie uns also eine Paginierung die zweite und dritte Seite klicken, um sie zu überprüfen erstellen Um das zuerst zu tun, erstelle ich einen Rahmen und lass uns diese Framegröße bis hierher erhöhen , weil wir diesen Inhalt als automatisches Layout hinzufügen. Jetzt können wir hier die Paginierung hinzufügen . Um das zu tun, erstelle ich einen neuen Rahmen, und er wird hier eingefügt, weil unser Rahmen zwischen der Größe oder dem Zwischenraum eins zu, hier, eins zu 20 ist . Wählen Sie diese Datei aus. Hier ist der und ich werde die Breite als Füllbehälter hinzufügen. Okay. Jetzt können wir hier auf IgnooToAyout klicken und es hier ablegen, also müssen wir es tun Dann werde ich ein Rechteck erstellen , das hier erstellt wurde, und lassen Sie uns diesem Rahmen ein automatisches Layout hinzufügen und es als horizontales Layout festlegen und hier lassen Sie uns diese linken und rechten Details entfernen Lassen Sie uns eine Null daraus machen und der Rahmen sollte nicht fixiert sein. Der Rahmen sollte so sein und hier, lassen Sie uns Inhalt in der Mitte erstellen und jetzt möchte ich den Linkspfeil nach rechts hinzufügen Lassen Sie uns zuerst den Linkspfeil hinzufügen Ich klicke hier und auf font tsm, lass uns diesen Pfeil nehmen und ich sehe, hier haben wir den Pfeil Ich entferne das und klicke hier. Okay. Jetzt brauche ich eigentlich nicht, ich brauche diesen nicht. Jetzt kann ich einfach auf diesen Pfeil klicken und Shift A drücken, um ein Ayo hinzuzufügen, es dann in die Mitte legen Und lassen Sie uns die linke und rechte Patina 30 und die Ober- und Unterseite ebenfalls 30 hinzufügen und die Ober- und Unterseite ebenfalls Das ist zu groß, vielleicht ist Twin die richtige Größe Okay. Jetzt füge ich den Eckenradius hinzu, also machen wir es zu l zwei. Okay. Jetzt müssen wir eine Hintergrundfarbe hinzufügen. Zum Schluss fügen wir eine Hintergrundfarbe hinzu. Eigentlich können wir diese hellblaue Farbe hinzufügen und die Ecken sind zu groß. Machen wir es so, als ob sechs perfekt wären. Hier müssen wir die Höhe des Symbols erhöhen und das Symbol 202-20-3203 wird in Ordnung sein und sie sollten 15 sein und das sollten hier 15 sein . Lassen Sie uns die Feldfarbe auf Weiß ändern , so weit, so Und das Symbol ist etwas größer, machen wir es auf 15. 15 wäre perfekt und jetzt werde ich das duplizieren und es dann so drehen und dann in gebissenen Größen machen C Jetzt muss ich Zahlen addieren. Lass uns die Zahlen hinzufügen. Zuerst klicke ich auf die Tanks und füge Text wie hier hinzu, also fügen wir ihn als einen hinzu und bei Typografie machen wir den Text als Untertext. Drücken Sie dann Shift A, um das automatische Layout hinzuzufügen, und fügen Sie 15 als links und rechts hinzu. Ich habe nicht gearbeitet. Ich habe es nicht bearbeitet, also fügen wir Feldfarbe hinzu. Fügen wir also diese Feldfarbe hinzu. Also müssen wir das erhöhen , ich kann links und rechts Details wie diese und hier 15, hier, 15, vielleicht machen wir links und rechts 20, funktioniert nicht, vielleicht erhöhen wir es manuell. Die Ecken werden drin sein und hier wird die Farbe weiß sein. Machen wir das wie 45, 52, es wird genauso sein wie bei diesen beiden Elementen und hier ändern wir die Füllfarbe auf Weiß und und hier ändern wir die Füllfarbe auf Weiß und die Testfarbe ist Testfarbe wird diese schwarze Farbe sein und lassen Sie uns einen kleinen Rand hinzufügen. Strich, die Strichfarben, lassen Sie uns das und das besser machen als zuvor, und lassen Sie uns das duplizieren. Jetzt haben wir zwei und Phase zwei, machen wir das als Lass uns aus dem letzten Punkt zehn machen. Okay. Jetzt müssen wir das in blauer Farbe machen, weil dies der ausgewählte Artikel sein wird. Stellen Sie dazu die Tanks ein, stellen Sie die Textfarbe auf Blau ein, und die Hintergrundfarbe wird hellblau sein. Ja. Das wird funktionieren. Hier, lassen Sie uns diese Farbe hier in diese schwarze Farbe ändern, sie in schwarze Farbe ändern und dann diesen Strichstil hier kopieren. Lassen Sie uns das hier vergessen, klicken Sie einfach mit der rechten Maustaste und klicken Sie auf Eigenschaft kopieren und hier kommen Sie und klicken Sie auf Eigenschaft einfügen. Machen Sie hier dasselbe. Jetzt werde ich das hier hinstellen. Die Seitengenerierung wird so aussehen. Wir können das links und rechts so blau machen. Dann können wir diese Zahlen hier auch blau machen, weil sie so blau anklickbar sind Hier füge einfach drei Punkte hinzu ist das und mach es so. Hier machen wir diese Farbe zu Schwarz. Und jetzt haben wir die Seitennummerierung und diese Seitennummerierung wird sich je nach Design ändern, aber das wird darauf basieren, dass der Kunde das Design überprüft, wir können die Paginierungsfunktion erklären 68. Design-Kontaktseite Teil 01: Hallo zusammen. Jetzt haben wir hier den Link zu unseren Anbietern. Für unsere Anbieter benötigen wir keine separate Seite, da wir hier unsere engagierten Anbieter haben. Wenn also jemand oder Besucher auf unseren Link für Anbieter klickt, lassen wir diese Person wieder auf die Startseite hier reagieren Was wir jetzt erstellen müssen, ist Kontakt. Um wie zuvor eine Kontaktseite zu erstellen , können wir die Website unserer Konkurrenten überprüfen und uns deren Kontaktseiten ansehen. Hier haben wir die Formularadresse, die Formularadresse, Telefon und die Öffnungszeiten. Hier haben wir eine Karte und gehen wir für dieses Mal zum nächsten, wir sehen keine Kontaktseite. Lass uns sehen. Wir haben keine separate Kontaktseite, aber hier finden Sie die Öffnungszeiten und Details zu den Öffnungszeiten und Details in der Fußzeile Dann haben wir auf dieser Website Standorte und Standorte, wir haben die Standortdetails und auf dieser Website gibt es eine Kontaktseite und auf dieser Kontaktseite haben wir das Formular und den Bürostandort und die Geschäftszeiten, dann weitere Informationen Lassen Sie uns auch auf unserer Website eine ähnliche Schaltfläche verwenden. Gehen wir zu HagiDB und sagen wir, wir benötigen einen Titel und eine kleine Beschreibung für die Kontaktseite Dann sagen wir jetzt, wir brauchen einen Standort, Öffnungszeiten. Ich glaube, wir haben den Standort und die Öffnungszeiten. Ja, wir haben diese Informationen, also brauchen wir diese Informationen nicht, und ich denke, wir können weitermachen. Okay. Also zuerst gehe ich zum Feigen-Muddy-Schild Wir können einfach eins davon duplizieren. Lass uns den Block duplizieren und ihn so platzieren. Dann entfernen Sie diesen Abschnitt und entfernen , weil wir ihn hier nicht benötigen . Wir müssen diese Fußzeile wie folgt in den Blob einfügen diese Fußzeile wie folgt in den Blob Lassen Sie uns nun hier den Frame ändern Kein Kontakt kopieren Sie den Titel, drücken Sie auf den Titel, kopieren Sie die Beschreibung wie folgt lassen Sie uns dann diese Art von Formular erstellen Lassen Sie uns fragen, Kontakt generieren, Formular anfordern f. Vollständiger Name, E-Mail, Telefon, Betreff der Nachricht. Okay, das ist gut. Lassen Sie uns also das Formular erstellen und wir können das Design ähnlich diesem verwenden. Also erstelle ich zuerst einen Rahmen und lass uns den Rahmen mit einer Zugbreite wie folgt erstellen, dann lassen wir die Rahmenhöhe von 800 wie 800 sein, dann drücken wir auf Okay, dann lassen wir die unnötigen Elemente entfernen, duh. Wir brauchen nichts davon und dazwischen eine Größe, machen wir eine 20 draus, und hier werden wir das Formular erstellen Lassen Sie uns einen Text wie diesen erstellen und sagen wir, er gibt dem Formular einen solchen Titel. Kopieren wir diesen Titel den Titel, ändern den Typ der Gravito-Unterüberschrift, Subhding ist zu groß, vielleicht behalten wir die Größe als Bettzeug bei und wir müssen die Rahmengröße so auf 800 ändern Jetzt müssen wir hier den Text erstellen. Lassen Sie uns vorerst so einen Text erstellen. Dann vollständiger Name, kopiere diese TS und zuerst müssen wir verschiedene Frames erstellen. Ich werde diese beiden Elemente hervorheben und Hüfttaste Ao drücken, um ein automatisches Layout zu erstellen und es zu einem vertikalen Layout zu machen. Und diese Layoutgröße wird so sein, dass wir sie hier behalten. Die Höhe wird 800 sein, dann legen wir es nach oben und hier dazwischen ist Größe 20 okay und jetzt drücke ich Shift A und dann ändere ich die Höhe, um den Behälter zu füllen, und dazwischen ist Größe 20 okay und jetzt drücke ich Shift A und dann ändere ich die Höhe, um den Behälter zu füllen, und die Höhe wird vielleicht 45 sein und es so belassen und dann links, machen wir es wie sechs und in Strich, lass uns diese Farbe ändern. Eigentlich hatten wir hier schon den besten Strich, kopiere diese Farbe und die Strichfarbe wird diese sein und der Eckenradius wird sechs sein, lass uns das mit 55 machen. Wir müssen die Füllfarbe dieses vollständigen Namens ändern , hier sind es zwei, das ist gut. Ich denke, wir sind gut, dann erstelle das nächste Textfeld. Kopieren wir das Textfeld für die E-Mail-Adresse und fügen es so ein und dann die Telefonnummer, kopieren den Text und holen uns das durch Weitergeben und Drag-Drop so. Dann werde ich es wieder ein paar Mal kopieren. Dann haben wir das Thema Betreff sollte nicht optional sein. Eigentlich brauchen wir hier keinen Betreff, also lasst uns die Nachricht kopieren. Lassen Sie uns trotzdem einen Betreff hinzufügen. Lassen Sie uns das Thema so optional machen. Okay. Dann müssen wir bevorzugte Kontaktmethode hinzufügen, und diese ist Dropdown. Also lassen Sie uns so hinzufügen und hier müssen wir Dropdown-Symbol wie dieses hinzufügen, nicht gut, nicht gut. Und dabei, es dann wie sechs zu machen ist schade. Jetzt machen wir die Position, falls nein, im Layout und platzieren sie hier, dann ändern wir die Farbe auf diese Textfarbe. Das ist gut. Was wir nun zu diesem vorbereiteten Termin hinzufügen müssen, ist optional. Lass uns das machen. Wie haben Sie von uns erfahren? Machen wir es eigentlich optional und hier können wir es duplizieren, wenn es so wäre. Laden Sie dann das Dokument hoch. Lassen Sie uns das Dokumentfeld hochladen, um einen Anhang hinzuzufügen, sodass Personen Anlagen wie medizinische Berichte hochladen können . Beachten Sie, dass dieses Kontrollkästchen, weil wir separate Bedingungen und Datenschutzbestimmungen hinzufügen, beachten Sie, dass Sie diesen Text hinzufügen können, wenn Sie möchten. Eigentlich haben wir keine Nachrichtenschaltfläche erstellt. Lassen Sie uns die Nachrichtenschaltfläche erstellen. Es ist kein Button, kein Nachrichtenfeld. Es ist erforderlich und hier müssen wir das ändern. In der Nachricht müssen wir das ein bisschen erhöhen, also 150 okay und die Spitze auf Ober und Ober setzen, lassen wir es bei der Polsterung etwa sechs sein auf Ober und Ober setzen, lassen wir es bei der Polsterung etwa sechs und auch hier müssen wir das ändern Okay. Jetzt sieht es okay aus und hier müssen wir eine Schaltfläche hinzufügen, damit wir diese Schaltfläche einfach kopieren und hierher kommen, die Schaltfläche probieren können diese Schaltfläche einfach kopieren und hierher kommen, , nicht hier. Wir müssen diesen Rahmen auswählen und den Button einfügen. Lassen Sie uns damit den Rahmen vergrößern und hier diesen Text ändern, um das Gedicht unterzuschicken. Das Gedicht ist fertig. Jetzt müssen wir die Geschäftszeiten und andere Mitarbeiter hinzufügen . Lass uns das machen 69. Design-Kontaktseite Teil 02: Okay, hier müssen wir die Kontaktdaten hinzufügen. Wenn wir auf die Startseite gehen, können wir hier die Kontaktdaten sehen, also können wir diese einfach kopieren und direkt auf der Kontaktseite wie folgt einfügen . Lassen Sie uns nun diesen Abschnitt bearbeiten. Zuerst werde ich die Höhe so verringern, dass sie zum Design passt . Außerdem benötigen wir die Position und wir brauchen diese nicht, also werde ich sie entfernen und hier machen wir es so. Dann werde ich das als Linie links in der Mitte platzieren. Hier können wir das so anpassen und was wir dann hinzufügen müssen, ist, dass wir dieses Feinstaubsymbol nicht mehr brauchen und was wir jetzt brauchen, sind unsere Öffnungszeiten, ich werde diese einfach duplizieren und wenn wir zur Fußzeile gehen, wir haben hier Öffnungszeiten, also kopiere ich das einfach und komme her und lass uns den Standort der Klinik in Öffnungszeiten ändern und hier haben wir Text Montag bis Freitag 8:00 Uhr 17:00 Uhr Jetzt müssen wir dieses Symbol ändern, lassen Sie es uns ändern. Um es zu ändern, gehe ich zu den Schrägstrich-Symbolen auf pons.google.com und suche hier nach Öffnungszeiten, vielleicht Stunden. Vielleicht funktioniert die Uhr. Fügen wir diese Art von Uhr hinzu und hier müssen wir ihre Größe wie folgt verringern und die Größe des Symbols herausfinden. Die Größe des Symbols beträgt 106 mal 106. Ändern wir die Größe auf 100. Machen wir 100 draus. Okay, machen wir es größer. Lassen Sie uns das behalten und auf ENG klicken, um es herunterzuladen. Lassen Sie uns hier auf das Symbol und hier auf NV-Videos klicken dann das Symbol hinzufügen. Als ob das tatsächlich größer ist und die Farbe nicht ganz stimmt, also lass uns unseren Farbcode so bekommen. Und lass uns hierher gehen und den Farbcode und das Farbmessgerät ändern. Lassen Sie uns auf 200 umstellen und auf PNG klicken, um es herunterzuladen und hierher zu kommen. Klicken Sie erneut auf CJ Image. Gehen Sie so daran vorbei. Okay, perfekt. Jetzt haben wir die Details und Details von Open NA und dann möchte ich hier eine Karte hinzufügen. Ich werde einfach einen neuen Rahmen erstellen und die Rahmengröße auf 500 einstellen und ich werde diese Adresse kopieren. Das ist eigentlich eine falsche Adresse, lass es uns versuchen. Gehen Sie einfach zu Google und suchen Sie nach der Adresse. Ich glaube nicht, dass es tatsächlich einen solchen Ort gibt, also hier ist er. Jetzt drücke ich die Umschalttaste und das Foto wird auf dem Mac angezeigt. Wenn Sie unter Windows arbeiten, können Sie zum Sniping Tool oder Snipe Intol gehen und den Screenshot können Sie zum Sniping Tool oder Snipe Intol gehen abrufen Jetzt geht's los. Ich werde auf diesen Video-Button klicken und lass uns hierher gehen und ihn so platzieren. Jetzt werde ich die Passform verringern. Eigentlich muss ich diese Größe so verkleinern damit sie passt, oder ich kann sie vergrößern und sie optisch besser machen und los geht's. Jetzt müssen wir hinzufügen, um die Fußzeile hinzuzufügen Ich kann zu Assets und Eingabe gehen, auf Instanz einfügen klicken und sie so hinzufügen, einfach so Erhöhen Sie dann das Bit des Frames auf diese Weise. Okay. Nett. 70. Design über uns, Seite Teil 01: Hallo, alle zusammen. Lassen Sie uns nun eine Seite in Wordpress Element of Pro entwerfen. Okay. Hier unser Figma-Design, also gehe ich zum WordPress-Dashboard und jetzt gehen wir zur Seite R von Pages Okay, hier klicken wir auf Neue Seite und der Seitenname wird oben stehen Kopieren wir diese Überschrift als Titel. Und hier fügen wir es ein und klicken auf Bearbeiten mit allen Rechten. Jetzt müssen wir die Website entwerfen, und wenn wir das Element oder die Website überprüfen, haben wir einen ähnlichen Abschnitt wie diesen Heldenbereich. Dieser Homepage-Bereich ähnelt dem Abschnitt Über uns, was bedeutet, dass wir diesen Homepage-Bereich verwenden können , um einen Abschnitt zu erstellen. Ich meine den Heldenbereich auf der Homepage. Also lass uns das machen. Auch dieser Heldenbereich der Über uns-Seite, der Blogseite und Kontaktseite wurde immer wiederholt. Lassen Sie uns dies als Vorlage erstellen, was bedeutet, dass wir es wiederholt auf unseren Earl-Seiten verwenden können. Moment werde ich nur diese Info-Seite veröffentlichen und hier öffne ich das WordPress-Dashboard in einem neuen Fenster Von hier aus gehe ich zur Vorlage und speichere Vorlage hier. Ich gehe zum Abschnitt und im Abschnitt, klicke hier auf Neuen Abschnitt hinzufügen, wählen wir den Vorlagentyp Pass-Abschnitt und fügen wir den Namen hinzu. Ich werde den Namen als Heldenbereich für Unterseiten hinzufügen und auf Vorlage erstellen klicken Ich werde diese Bibliothek einfach entfernen , weil wir sie nicht benötigen Wenn wir uns nun den Bereich „ Über Page Hero“ ansehen und die Haupt-Homepage-Hero-Session ist das ziemlich ähnlich. Wir können diesen Abschnitt einfach von der Homepage kopieren . Lass uns das machen. Auch hier öffne ich die Website in neuen Fenster und klicke hier auf Bearbeiten mit dem Element von und klicke einfach mit der rechten Maustaste und klicke auf Kopieren. Gehen wir zum Vorlagenbereich, Heldenbereich für Unterseitenvorlage und klicken Sie mit der rechten Maustaste und klicken Sie auf Einfügen Und es wird einfach so eingefügt. Jetzt müssen wir unnötiges Zeug entfernen. Zuallererst, wenn wir hierher gehen, nein, nicht hierher, wenn wir zum Figma-Design gehen, können wir die Höhe sehen Die Höhe ist 600, also wählen wir den Container aus und hier hat er 800 Ich mache es einfach auf 600 und dann haben wir hier keinen Button, also lasst uns den Button entfernen, ihn löschen. Jetzt das Hintergrundbild. Hier haben wir dieses Hintergrundbild. Ich werde auf das Hintergrundbild und auf Exportieren klicken, es in JPEG ändern und auf die Schaltfläche Exportieren klicken. Gehen wir jetzt zu tiny png.com und verringern die Größe dieser Dateigröße dieses Titelbildes Jetzt klicke ich auf die JPEG-Schaltfläche, um es hier herunterzuladen . Lass uns hier im Container-Stil gehen Lass uns dieses Bild ändern. Klicken Sie auf das Bild und hier haben wir das Bild und es wurde gerade hochgeladen und hier fügen wir einfach den ALT-Text oder den alten Text hinzu und klicken Sie auf Conselect, es wurde gerade so hinzugefügt und wir müssen nichts tun und klicken Sie jetzt auf Veröffentlichen Jetzt haben wir diese Vorlage und wenn wir auf die A-Seite gehen und auf dieses Ordnersymbol klicken, können wir unsere Vorlage in meinem Vorlagenbereich sehen Derzeit haben wir keine Vorlage für den Hero-Bereich für Unterseiten, also werde ich die Seite neu übergeben. Wenn ich ihn hier erneut einfüge, haben wir den Hero-Bereich Ich kann einfach auf Einfügen und dann auf Anwenden klicken. Einfach so, es wird einfach hinzugefügt. Jetzt müssen wir nur noch den Text ändern. Siehst du, das ist die Macht des Elements oder der Vorlage. Gehen wir zum Pigma-Design und kopieren wir den Titel. Komm her, füge den Titel und die Beschreibung hier ein, kopiere die Beschreibung und füge die Beschreibung so ein. Nett Wenn wir jedoch die Beschreibung überprüfen, hat sie hier einen kleinen Platz wie diesen. Lassen Sie uns das tun, wir können R hier hinzufügen, wir müssen es erhöhen und lassen Sie uns R hier hinzufügen. Dann fügen wir hier R hinzu, dann müssen wir nach diesem Take R hinzufügen. Lass uns hier B wie folgt hinzufügen. Okay, ziemlich gut. Jetzt klicke ich auf C veröffentlichen, um zu speichern. Okay. Gehen wir nun zum nächsten Abschnitt über. Dieser Abschnitt ähnelt auch diesem Abschnitt. Wir können diesen Abschnitt einfach von der Homepage kopieren und hier hinzufügen. Lass uns das machen. Hier unsere Homepage und ich werde einfach auf diesen Abschnitt klicken und mit der rechten Maustaste klicken und auf Kopieren klicken. Dann klicken Sie auf einer Seite hier und klicken Sie auf Einfügen. Klicken Sie mit der rechten Maustaste und klicken Sie auf Einfügen. Okay. Und hier brauchen wir dieses Bildfeld nicht, also wähle ich es aus und lösche es. Das brauchen wir nicht. Wählen Sie es einfach aus. Lösche es. Okay. Jetzt ist es ziemlich gut und wir müssen vielleicht ein paar Dinge ändern, wir überprüfen hier, wir haben keine zwei Knöpfe. Wir haben nur einen Knopf. Lassen Sie uns diese Unterschaltfläche entfernen, und wenn wir die innere Größe überprüfen, die Zwischengröße ist 60, und wir klicken auf den Hauptcontainer und den Spaltenabstand 60, brauchen wir nichts zu tun und kopieren einfach den Text zuerst so, dann kopieren wir den zweiten Text, kopieren ihn einfach hierher, dann kopieren wir diesen Text Ich werde auf diesen Text klicken und auf Condo Bigate klicken und hier werde ich einfach diesen Text hinzufügen und hier müssen wir die Schaltfläche „Termin anfragen“ hinzufügen, fügen wir ihn hier hinzu. Und nachdem wir diese Website komplett gestaltet haben, werden wir Aktionen für diese Schaltflächen erstellen Lassen Sie uns diesen Links vorerst ein Hashtag hinzufügen, und jetzt müssen wir dieses Bild ändern. Was den Bildstil angeht, haben wir nichts. Also werde ich einfach auf dieses Bild klicken und auf Exportieren klicken und der Dateityp ist PEG, dann gehe ich zu Ti PNG, füge das Bild hinzu und gebe die Dateigröße wie folgt an, dann komm ich hierher. Wählen Sie ein Bild auf dem Bild wie dieses, kopieren Sie dann den alten Text so und klicken Sie auf Verbergen und es wurde einfach so hinzugefügt und wir haben nichts zu tun Jetzt müssen wir zum nächsten Abschnitt gehen und das Erstellen des nächsten Abschnitts ist auch ziemlich einfach Auf diese Weise können wir beim Erstellen der Hauptseite einfach den Inhalt von dort kopieren. Also kann ich mit der rechten Maustaste auf diesen Abschnitt „Über uns “ klicken und dann auf Condupl klicken. Jetzt kann ich auf den Container klicken und dann auf diesen Container im Hauptcontainer und ihn so aufstellen Lassen Sie uns jetzt den Text ändern. Lassen Sie uns diesen Text zuerst so ändern, dann kopieren wir diesen Text und hier hinter den Text. Auch hier müssen wir Sumin hinzufügen, also kopiere den TUM-Titel und duplizieren Sie ihn einfach und fügen Sie ihn ein Nun eine Kachel, lassen Sie uns diesen Text in Sued ändern, so wie hier. Dann müssen wir die Unterliste hinzufügen. Klicken wir auf Element und Suchliste hinzufügen. Die Symbolliste funktioniert, füge sie so hinzu. Und hier werde ich die Elemente entfernen und nur das eine Element behalten und dann auf diesen Text klicken , um ihn zu bearbeiten und zu kopieren und dann einzufügen. Klicken Sie jetzt auf dieses Symbol und wir haben diesen Kreis. Klicken Sie auf Einfügen, um es einzufügen, und gehen Sie zu Stil Die Symbolfarbe ist die Primärfarbe und wir sehen uns die Symbolgröße an. Die Größe des Symbols ist 16 mal 16. Machen Sie es nicht 60, 16. Die Lücke sehen Sie den Abstand, vergrößern Sie ihn, drücken Sie und der Abstand ist acht, machen Sie den Abstand acht und beim Text ändern wir die Farbe in diese Typografiefarbe Sehen wir uns an, dass es sich bei diesem Text um Typografie handelt, sodass wir die Textstile Typografie oder Absatz wie diesen beibehalten können die Textstile Typografie oder Absatz Okay. Jetzt muss ich diese Elemente einfach für einige Male duplizieren und den Inhalt hinzufügen. Kopiere einfach den Inhalt, lege den Inhalt hierher und kopiere den Inhalt T hierher, dann kopiere diesen Inhalt und kopiere diesen, gib ihn weiter Lassen Sie uns nun die Größe zwischen hier und hier den Abstand dazwischen ändern. Sehen wir uns den Abstand zwischen und 20 an. Lassen Sie uns einen Abstand zwischen 20 schaffen. Okay. Nett. Jetzt müssen wir diese Copy Paste hinzufügen, die so schmeckt, und wir brauchen die Schaltfläche nicht, löschen Sie die Schaltfläche. Okay, lass uns sehen. Jetzt müssen wir dieses Bild hinzufügen, damit wir das Bild, es als JB EG exportieren und auf die Schaltfläche Export unserer Mission oder Export klicken, auf die Schaltfläche Export unserer Mission oder Export klicken um es zu exportieren Sie dann auf Tiny PNG Fügen Sie dann auf Tiny PNG das PNG wie folgt Klicken Sie dann auf JPEG, um dieses Bild herunterzuladen, und jetzt gehen wir zu Über uns und klicken Sie auf dieses Bild und klicken Sie hier auf Bild auswählen, lassen Sie uns einfach das Bild hinzufügen. COVID, überwinde es so. Klicken Sie nun auf Select Nice. Nun, was wir tun müssen. Jetzt haben wir diese Kategorie mit der Kreditbeschreibung. Also lass uns das machen. Es ist ziemlich einfach, weil wir diesen Abschnitt bereits auf der Startseite haben, aber es gibt einige Änderungen, aber wir benötigen nur dieses Design. Also kopiere ich einfach den ganzen Abschnitt von hier und lass uns auf eine Seite gehen und den Inhalt einfach einfügen, und hier brauchen wir diesen nicht. Lösche es, weil es hier keine Schaltfläche gibt, okay. Jetzt hier, lass uns den Titel kopieren. Ich denke, der Titel ist derselbe. Okay. Okay. Jetzt brauchen wir diese Karussellfunktion nicht Eigentlich können wir das sehr einfach mit einem Raster beheben, nicht mit Spalten Also lass es uns versuchen. Ich klicke auf Element hinzufügen und füge ein solches Raster zur Rastereinstellung Ich stelle auch die Spaltenmasse ein und die Zeile wird zwei sein und die Lücken werden 20 sein, so wie hier. Dann kann ich diese Sterne hinzufügen. Zuerst haben wir das eigentliche Lass uns dieses Raster oben platzieren, also werde ich hier klicken und es so hinzufügen. Dann sehe ich mir das Bildfeld an und füge es so in das Raster ein, ich werde den Rand und die Abstände entfernen und jetzt fügen wir dieses hier hinzu. Dann haben wir wieder diesen, dann diesen und jetzt müssen wir die Anzahl der Rasterzeilen erhöhen Klicken Sie auf Beton, gehen Sie zum Layout und ändern Sie die Zeile in drei Zeilen und fügen Sie sie wie folgt hinzu. Jetzt denke ich, wir fügen Dt I will mother carousel hinzu, klicken Sie hier, klicken Sie auf Condolete und das brauchen wir auch nicht, also werde ich es einfach Okay. Jetzt ist alles perfekt abgestimmt und wir müssen nichts tun. Es sieht einfach so aus und jetzt müssen wir den Inhalt bearbeiten. Klicken Sie auf das Bildfeld und auf einen Stil, um die vertikale Ausrichtung zu ändern. Oben. Und jetzt fügen wir diese zusätzlichen Details hinzu. Zuerst haben wir den Text zur Beschreibung, fügen wir ihn so hinzu und fügen die BR hinzu, ich denke, es sollte funktionieren und eine weitere BR hinzufügen, okay, nett. Und jetzt sollte dieser Text ein wenig größer werden, um das zu tun. Wir können einfach so ein B-Tag hinzufügen. Ich glaube, es funktioniert nicht. B. Es funktioniert nicht, wir werden die Bildbox nicht verwenden können , weil wir diese zusätzliche Zeile haben, also müssen wir sie mit Scribe erstellen oder wir können CSS verwenden, aber das Hinzufügen von CSS ist der einfache Weg Fügen wir das CSS hinzu und schauen wir, was wir tun können. Also werde ich zuerst diesen Text kopieren und diesen Text ersetzen, und wie ich es zuvor getan habe, werde ich zwei BRO-Umbruchlinien wie diese hinzufügen und hier werde ich ein neues Tag namens span hinzufügen. Dies ist ein HTML-Tag und ein Flash-Span, um das Span-Tag zu schließen, und hier werde ich die Unterüberschrift Class Equal Cgory Box hinzufügen die Unterüberschrift Class Equal Cgory Box Okay. Nett. Nun, das ist ein SMLC TML-Klasse, die ich gerade erstellt habe, also kopiere ich sie und klicke auf Veröffentlichen und hier gehe ich zum benutzerdefinierten Webdesign USA oder ich gehe zum Dashboard unserer Website und hier haben wir Aussehen und klicke auf Anpassen Beim Anpassen können wir zusätzliche ESS hinzufügen. Um zusätzliches ESS hinzuzufügen, kann ich das CSS erneut kopieren und hierher kommen, und Punkt hinzufügen, weil es eine Klasse ist und eine Klammer wie diese, dann füge ich die Schriftgröße hinzu, mal sehen Die Schriftgröße ist 20, 20 x. Ich denke, das sollte jetzt funktionieren. Und lass uns auf die Info-Seite gehen das unterdrücken und schauen, ob es funktioniert hat oder nicht Okay, es funktioniert. Dieser Text ist größer als der Fenstertext, um das zu bestätigen Ich werde dieses neue Fenster öffnen und das überprüfen, richtig, gehe zu Inspec und zu diesem Auf Inspec haben wir Span und hier haben wir unsere CSS-Klasse. Wenn ich tatsächlich dieselbe Größe habe, nein, es ist dieselbe Größe, also müssen wir es nicht tun Diese beiden Artikel sagen, dieser sollte 21 sein. Hier muss ich 21 so machen und auf Veröffentlichen klicken. Wenn ich es jetzt von hier aus überprüfe, sollten wir Test 21 sehen, klicken Sie hier und hier haben wir 21 und sehen mit dem Unterschied, nett. Jetzt können wir dasselbe für den Rest dieser Bildbox tun. Klicken Sie hier und fügen Sie diesen Text ein und lassen Sie uns zum eigentlichen Inhalt gehen Um also den tatsächlichen Inhalt zu erhalten, gehe ich zu unserer Inhaltstextdatei und von dort zum Text. 71. 0708 Design über Seite Teil 02: Ich habe die Kategorien mit kleiner und langer Beschreibung. Also zuerst eine haben wir schon erstellt, und dann haben wir Frauengesundheit, kopiere den Text und herem interessant Ich glaube, wir vermissen es. Gehen wir also auf die Startseite. Und auf der Startseite, ja, wir ignorieren die Frau einfach, aber wir können es tun, weil wir mit diesen sechs Gegenständen perfekt in Form kommen können. Ignorieren wir es also. Also lasst uns zu dieser Vorsorgeuntersuchung und Vorsorge übergehen. Und in einer kleinen Beschreibung, ich werde diesen in der Kreditbeschreibung hinzufügen . Hier haben wir die Kreditbeschreibung. Okay, dann haben wir pädiatrische Versorgung. Also zur pädiatrischen Versorgung muss ich diese Beschreibung kopieren und so einfügen, dann den Text kopieren, den Text Eigentlich fügen wir dem ersten Artikel denselben Text hinzu, also müssen wir den ersten Artikel ändern und die ersten Artikeldetails wie folgt ändern , das Tempo ist wie folgt Jetzt haben wir dieses fünfte Symbol. Gehen wir hierher, gehen Sie so, kopieren Sie den Text. Möglicherweise sehen Sie den Teil, den ich kopiere, nicht im Text, weil ich ihn in meinem zweiten Fenster so öffne. Kopieren Sie dann erneut den gesamten Text und gehen Sie zum mentalen Unterwort, wir haben Ihre Beschreibung Okay. Der letzte. Lassen Sie uns das Format von hier kopieren und einfügen. Sie es jetzt so ein, kopieren Sie dieses, fügen Sie es so ein. Okay. Jetzt müssen wir dieses Bild wie die vertikale Ausrichtung nach oben platzieren und wir müssen es für ein Objekt tun, aber wir können einfach mit schreiben und auf Kopieren klicken und WritePaste eingeben und diesen Typ einfügen Oh, es ist kein Kopieren, also lass uns hier klicken und Dann klicken Sie hier und fügen Sie diesen Typ ein. Nichts ist passiert. Lass uns zum Stil übergehen. Ja, es ist passiert, aber es schien nicht. Lass uns hierher gehen und es so machen. Okay, klicken Sie auf Veröffentlichen und lassen Sie uns das im Design überprüfen. Ich werde so aussehen und das bedeutet, dass wir den Bereich „Über uns“ erfolgreich für den Designer erstellt haben. Jetzt müssen wir den Blockbereich entwerfen. 72. 0709 Arbeitsplatzformblatt für Designanfragen: Nun zu unserem FICMA-Design und der Website: Wenn jemand die Website besucht und auf diesen Call-to-Action-Button klickt, sollten wir eine Seite haben, auf der wir einen Termin anfragen Lassen Sie uns also diese Seite so erstellen, dass sie ein Formular für eine Terminanfrage und eine kleine Beschreibung enthält Gehen wir also zu unserem GPT-Chat und sagen, dass wir nein brauchen. Nehmen wir an, ich muss den Text von hier entwerfen und kopieren Seite und sie sollten eine Überschrift, eine Überschrift, eine Unterüberschrift und kleine Verschlüsselung des Anforderungsformulars Lassen Sie uns diesen Code ausführen, und hier haben wir die Details. In Ordnung. Hier sind die Details, und hier ist die kleine Beschreibung, und wir haben alle Informationen. Gehen wir also hierher und wir können einfach den Kontaktformularrahmen verwenden, um dieses zu erstellen, also werde ich das Ich bin so duplizieren Dann lassen Sie uns hier die Überschrift ändern, kopieren und einfügen. Kopieren Sie dann in die Unterüberschrift die Unterzeile und fügen Sie sie so ein. Jetzt können wir hier eine kleine Beschreibung hinzufügen. Kopieren wir diesen ersten Teil und fügen ihn so hinzu. Dann kopiere diesen Text und ich werde diesen Text duplizieren Drücke und ziehe ihn und lege ihn so ab. Lass uns diesen Inhalt hinzufügen. Und hier ändern wir diesen Text in Sonnenuntergang. Es wird ein Absatz sein und hier nicht die Höhe, die Breite wird wie folgt gefüllt Und hier brauchen wir diesen Abschnitt nicht und wir brauchen diesen Abschnitt nicht, wir brauchen nur diesen Rahmen und ich werde die Rahmenhöhe erhöhen. Eigentlich kann ich die Höhe auf den halben Inhalt ändern und es wird Earl angezeigt . Ich werde das einfach so erhöhen und für dieses Formular machen wir dieses Formular mittig. Ich werde es wie in der Mitte machen und diese Takes sollten so zentriert sein. In dieser Schaltfläche sollte sich auch so in der Mitte befinden. Auf diese Weise sieht es also nicht gut aus, das Zentrum tatsächlich hinzuzufügen. Also hier drinnen haben wir riesigen Platz. Für diesen Espace können wir ein Bild hinzufügen, weil das der einfachste Weg ist, den E-Abstand zu entfernen. Ich wähle hier aus und füge dieses Bild so und lass uns das Bild verkleinern. Also lass uns dieses Bild damit hinzufügen. Lass es uns so erhöhen. Und wenn wir wollen, können wir diesen Text hier hinzufügen. Lassen Sie uns den Text ausschneiden und hier einfügen. Eigentlich müssen wir diesen beiden Elementen einen Rahmen hinzufügen, also drücken Sie Shift A und machen Sie das Layout horizontal. Dann lege hier diesen Text darüber, wähle den Text aus und platziere ihn darüber. Dann wird die Breite halb sein, nicht halb. Lassen Sie uns den Text manuell so anpassen. Und was ist mit der Zwischengröße? Die Zwischengröße ist gut zwei. Und auch dieser Text sollte hier stehen, das hat ihn so oben platziert und jetzt sieht er gut aus, und jetzt müssen wir den Putter in Beziehung setzen und den Putter nach das hat ihn so oben platziert und jetzt sieht er gut aus, und jetzt müssen wir oben legen Machen wir eins draus, 220 so, und verkleinern wir es dann Und hier, lassen Sie uns dieses Bild ändern. Okay, suchen Sie im Bereich Ressourcen den Ordner mit den Bildern. Okay, jetzt klicke ich hier und wähle das Imagevideo aus. Dann siehst du hier auf den Bildern die Seite mit dem ersten Projekt und der Terminanfrage. Und hier haben wir ein Bild, klicken Sie auf Öffnen und fügen Sie es so hinzu Okay, jetzt ist unsere Seite mit Terminanfragen gestaltet und hier ändern wir diesen Seitentitel einen Termin anzufordern. Okay. 73. 0101 Hosting und Domain kaufen: Hallo, alle zusammen. Jetzt ist es an der Zeit, eine Domain zu kaufen und sie zu hosten , da wir die Domain und den Hoster benötigen , um unsere WordPress-Website zu hosten. Wählen Sie also zuerst weniger die Domain aus. Es gibt eine Website namens taldls.com. Auf dieser Website finden Sie alle Aktionen und Angebote der Domain-Anbieter. Von hier aus können Sie eine Domain kaufen, die das beste Hostin auswählt, und eine günstigere Domain erhalten Hier sehen Sie einen Filter. Hier suche ich nach unserem Domainnamen als benutzerdefiniertes Webdesign, und hier muss ich auf „ Bestätigen, dass Sie kein Roboter sind“ klicken. Okay, hier haben wir die verfügbaren Domains, und anhand dieses Preisfilters gebe ich etwa 1$ ein und lass uns sehen, welche Art von Domain wir für 1$ haben. Hier haben wir das Webdesign mit der benutzerdefinierten Punkt-S-Domain 4099. Name Jeep Also ich suche mir das im Raumschiff aus, wir können die Punkt-XYC-Domain für 0,98 Dollar bekommen Also hier klicke ich einfach auf Name Jeep und es wird zum Namen Jib weitergeleitet Und hier kann ich den Domainnamen suchen. Also lass es uns von hier kopieren und einfügen. Dann klicken Sie auf Suchen. Wir brauchen das.com nicht. Wir brauchen Punkte. Also hier können wir Punkt S sehen , wir können Punkt S hinzufügen. Okay. Jetzt haben wir es hier für 2,98 Dollar. Ich klicke einfach auf Zur Karte hinzufügen und es wurde der Karte hinzugefügt. Jetzt klicke ich auf Checkout und hier kann ich den Promo-Code hinzufügen. Also gehe ich hierher und lass uns den Promo-Code herausfinden. Dieses 99-Special ist der Promo-Code. Also kopiere ich ihn einfach und füge ihn hier ein, klicke auf Anwenden. Okay, jetzt muss ich mich in das Name Jeep-Konto einloggen, eigentlich habe ich bereits ein Name-Jeep-Konto. Wenn Sie noch keinen haben, können Sie auf Kostenloses Konto erstellen klicken und den Schritten folgen. In meinem Fall klicke ich auf Anmelden und füge hier meinen Benutzernamen und mein Passwort hinzu. Okay, ich habe mich gerade in das Namechp-Konto eingeloggt und hier füge ich den Promo-Code hinzu, kopiere ihn von hier und füge ihn so Klicke auf Anwenden und jetzt haben wir die Zwischensumme als 0,99, und ich werde das ganze Zeug abhaken, also entferne es Wir brauchen nichts von dem Zeug. Jetzt kann ich auf Bestellung bestätigen klicken. Bevor ich die Bestellung bestätige, gehe ich zu namjb.com und lasse sie uns aktualisieren Dann können wir den Host auswählen, indem wir auf diesen Host und dann auf Shared Hostin klicken Und in Name GP können wir dieses Paket iStlla und I Stellar plus für die Gestaltung und Entwicklung unserer WordPress-Website herunterladen Im iStllaPackage werden wir eine E-Mail-Funktion haben und wir werden GB, SSD und drei Websites haben SSD Im ITLLARplus werden wir eine unbegrenzte Domain haben. Es gibt jedoch ein Limit, obwohl es unbegrenzt ist, es ist niemals unbegrenzt Ich denke, es ist nur ein Marketing-Gag. Hier haben wir jedoch eine unbegrenzte Anzahl von Postfächern und wir haben diese Autobup-Funktion Diese Autobup-Funktion ist sehr leistungsfähig, und ich empfehle, dieses iTellarPlus-Konto zu wählen wenn Sie den Namen Cheap Server für Ihre echte Website verwenden möchten Namen Derzeit gibt es also einen Black Friday-Deal . Deshalb ist der Betrag so gering. Namecheap ist jedoch immer noch der billigste und erschwinglichste Hosting-Anbieter auf dem Markt Und hier können wir die Abrechnung als monatlich oder jährlich festlegen. Wenn wir es auf monatlich festlegen, wird es so viel kosten. Ich lege es jedoch jährlich fest, und jetzt können wir es für 22,80 $0,08 bekommen und wir können es jedes Jahr für 44,88$ verlängern Also, jetzt klicke ich auf Jetzt starten und hier legen wir es als neue Domain und klicken auf Bereits in der Karte und unsere Gesamtkosten werden Jetzt kann ich auf klicken. In den Warenkorb legen und hier kann ich auf Bestellung bestätigen klicken. Allerdings habe ich schon einige Zeit als Hosting-Anbieter, also brauche ich dieses Hosting nicht, also klicke ich einfach auf dieses Klauselsymbol und ich benötige nur die Domain. Sie können auch Domains von diesen anderen Anbietern erhalten. Und wenn wir auf Raumschiff zu dieser XYZ-Domain gehen, können wir hier nach dem Domainnamen suchen und die Arbeit fortsetzen Aber dafür wähle ich den Namen GIP, und jetzt klicke ich auf Bestellung bestätigen und setze den Kauf fort , was auch sehr wichtig ist , bevor Sie die Domain kaufen Überprüfen Sie immer den Text der Wenn Sie eine Domain mit falschem Text oder falschen Zeichen kaufen , repräsentiert diese nicht Ihre Marke Überprüfen Sie also immer den Text Ihrer Domain erneut. Wenn Sie nach einer Domain wie nach benutzerdefiniertem Webdesign suchen, werden Sie feststellen, dass diese Domain bereits vergeben ist, was bedeutet, dass wir diese Domain bekommen können und anstatt diese Domain zu bekommen, können wir diese Art von Domain bekommen Wenn wir also eine Domain bekommen, müssen wir immer überprüfen, ob es sich bei der Domain um eine Top-Level-Domain handelt, oder um das zu tun, können Sie einfach bei Google suchen, wenn wir nach der B-Punkt-XYZ-Domain suchen, wir können nach der Top-Level-Domain der XYZ-Domain suchen Dann heißt es, XYZ ist ein Top-Level-Domainname, und auf diese Weise können Sie den West-Domainnamen herausfinden, aber die bekanntesten Domainnamen lauten.com Punkt. Punkt Org Wenn ja, dann ist es Punkt Co Punkt K, so wie hier. ist wirklich wichtig, eine Top-Level-Domain zu bekommen , da Google und andere Suchmaschinen Top-Level-Domains einfacher bewerten als nur einige Low-Level-Domains. Ich werde Sie also sehen, nachdem ich den Domain-Kauf abgeschlossen habe. Okay. Jetzt haben wir hier den Domainnamen, und jetzt müssen wir den DNS ändern, um den DNS zu ändern. Ich werde auf Hängendes DNS verwalten klicken, Ich werde auf Hängendes DNS verwalten klicken was bedeutet, dass wir die Domain mit dem Server konfigurieren müssen. Und hier haben wir Name Chief Basic DNS. Ich werde es in Chief Webhosting DNS ändern. Dann klicke ich auf diesen Savy und er ändert sich. Okay. Jetzt müssen wir zum C-Panel gehen. Ich gehe zur Host-in-Liste, und in der Hosting-Liste ist hier unser Gastgeber. Also hier gehen wir zum C-Panel, kann ich einfach darauf klicken und es wird zum C-Panel weitergeleitet. Es spielt also keine Rolle, welche Art von Domain oder Hosting-Anbieter Sie wählen. A-C-Panels haben die gleiche Funktionalität. Also scrolle ich nach unten und hier haben wir den Domain-Bereich, also klicke ich einfach darauf und von hier aus klicke ich auf, erstelle eine neue Domain. Hier haben wir die Domain eingestellt, klicken Sie einfach darauf, erstellen Sie eine neue Domain, und hier fügen wir den Domainnamen hinzu, kopieren den Domainnamen und fügen ihn so ein. Dann wird auf dem Hosting-Server ein neuer Fold-Call-Punkt für das benutzerdefinierte Website-Design erstellt. Okay, wir werden also eine Subdomain haben. Also, jetzt klicke ich auf die Schaltfläche „Senden“. Okay, die Domain wurde erfolgreich erstellt. Wenn ich also hier klicke und auf die Website gehe, wird es so aussehen. Im Namen G haben wir ein Presl-Zertifikat für einen in der Nähe. Wenn wir also hier klicken, können wir die Verbindung Cece sehen, was bedeutet, dass das SSL-Zertifikat korrekt konfiguriert ist und auch unsere URL TTPs Okay ist Also, Earl Wood, wenn du diese Seite nicht bekommen hast, warte einfach fünf bis zehn Minuten und diese Seite wird erscheinen Okay. Jetzt müssen wir WordPress in der Domain installieren. 74. 0102 Wordpress neu installieren: Hallo, alle zusammen. Es ist Zeit , WordPress zu installieren. Ich gehe zum C-Panel und im C-Panel haben wir den Soft-Tacular-App-Installer Ich klicke einfach darauf und hier haben wir Wordpress und von hier aus klicke ich einfach auf Installieren Und jetzt muss ich hier die Details auswählen. Zuerst wähle ich TTPs und ohne diesen WWW-Punkt-Teil, also nur TTPs als Protokoll, dann wähle ich den Domainnamen Also hier ist unser Domainname und hier werde ich die neueste Version von Wordpress wählen die neueste Version von Wordpress und keine Verzeichnisse hinzufügen Ich werde WordPress einfach im Stammordner installieren, und hier können wir den Site-Namen und die Seitenbeschreibung ändern. Aber lassen Sie uns diese ITA ändern , während wir die Website gestalten. Lassen Sie uns diese Dinge vorerst so lassen, wie sie sind. Und hier müssen wir den Admin-Benutzernamen und das Admin-Passwort hinzufügen . Ich werde diese Details hinzufügen und auch ein Passwort hinzufügen. Merken Sie sich Ihren Benutzernamen und Ihr Passwort, da Sie diesen Benutzernamen und dieses Passwort verwenden müssen diesen Benutzernamen und dieses Passwort verwenden , um sich bei Wordpress anzumelden. Von hier aus werde ich diese Admin-E-Mail in eine funktionierende E-Mail-Adresse ändern , da diese E-Mail derzeit nicht funktioniert. Okay, scrolle nach unten und hier brauche ich keine zusätzlichen Plugins. Entfernen Sie die zusätzlichen Plugins und klicken Sie nun auf Schaltfläche Installieren. Daraufhin wird die Installation von Wordpress auf der Website gestartet . Okay, Wordpress wurde erfolgreich installiert und von hier aus kann ich auf diese URL klicken und in der administrativen URL zur WordPress-Website gehen. Ich kann so zu Wordpress gehen. Von hier aus klicke ich einfach auf Nein, ich möchte nicht versuchen, einen ET-Setup-Prozess auszuprobieren, und hier ist unser WordPress-Dashboard. Um auf das WordPress-Dashboard zuzugreifen, können wir einfach die URL unserer Website eingeben und dann WP Admin am Ende der Website-URL hinzufügen. So sieht unsere Website jetzt aus. In der nächsten Lektion werden wir Wordpress bereinigen und unnötiges Zeug von unserer WordPress-Website entfernen. 75. 0103 WordPress bereinigen: Hallo, alle zusammen. Wenn wir WordPress zum ersten Mal installieren, wird es einige unnötige Dinge geben. Also lass uns sie entfernen. Lassen Sie uns zunächst mit dem Plugin beginnen. Gehen Sie hier rüber und klicken Sie auf Plugins installieren und hier haben wir drei Plugins, also wähle ich alle aus und klicke auf Deaktivieren und dann auf Anwenden. Wählen Sie dann erneut alle aus und klicken Sie auf Löschen und dann auf Anwenden. Okay. Dann lass uns zu den Themen gehen. Hier haben wir drei Themen. Derzeit ist das aktive Thema 20 bis 25, klicken wir auf die restlichen Teams und entfernen sie auf diese Weise. Tun Sie es auch für dieses Spiel. Gehen wir nun zu den Befehlen und hier haben wir weitere Befehle Klicken Sie auf Papierkorb und gehen Sie zum Papierkorb und klicken Sie auf Dauerhaft löschen. Gehen wir zu Seiten und Earl-Seiten und hier werde ich diese einzige Seite mit den Datenschutzbestimmungen behalten und die Beispielseite löschen. Gehen Sie auch zum Tab Papierkorb und klicken Sie auf Dauerhaft löschen. Und schauen wir uns die Medienbibliothek an. Derzeit haben wir keine Medien und gehen dann zum Beitrag Earl Post, und hier haben wir Hello WordPOS Cash Gehe zum Papierkorb und klicke auf Dauerhaft löschen. Okay. Jetzt gehe ich zum Dashboard und im Dashboard werde ich diese Sachen löschen weil wir das vorerst nicht brauchen. Okay. Jetzt haben wir die WordPress-Website neu installiert und sind bereit, benutzerdefinierte Websites mit WordPress zu entwerfen. 76. 0104 WordPress – Schrittweise: Hallo, alle zusammen. Eigentlich habe ich vergessen, die WordPress-Arbeit per Video zu erstellen. Also lass es uns jetzt machen. Zuerst werde ich mich hier abmelden und auf Abmelden klicken, um mich auf der WordPress-Website anzumelden Wir können einen Schrägstrich nach der URL der Website und bei wp admin wie folgt hinzufügen der URL der Website und bei wp admin Dann kommen wir zu dieser WordPress-Anmeldeseite und hier müssen wir den Benutzernamen und das Passwort der Wordpress-Website hinzufügen , Dann klicke auf Login und jetzt bin ich im WordPress-Dashboard. Auf dem WordPress-Dashboard haben wir dieses Wordpress-Logo, und von hier aus können wir die Dokumentation überprüfen und mehr über Wordpress erfahren, und dann haben wir Homepage R. Wenn wir einfach hier klicken, wird es zur Startseite der Website weitergeleitet. Ich werde darauf klicken und dann haben wir hier den Befehlsbereich. Derzeit haben wir keine Befehle. Wordpress eignet sich am besten für die Anmeldung. Deshalb haben wir diese Art von Befehlsbereich. Dann haben wir hier ein neues Menüsymbol und dann können wir Medienseiten für Beiträge und Benutzer erstellen. Ebenfalls auf der rechten Seite finden Sie Details zu unserem Admin-Profil. Also fahre ich mit der Maus darüber und klicke auf diesen Admin Okay, hier haben wir persönliche Profildaten. Von hier aus können wir also die Admin-Farbe ändern. Wenn ich zum Beispiel diese Farbe auswähle, wird sie sich so ändern und das wird sich so ändern, aber ich mag die Standardfarbe. Und hier können wir unseren Vornamen, Nachnamen und Spitznamen hinzufügen , hier können wir unsere E-Mail hinzufügen. Eigentlich ist die E-Mail schon eingerichtet. Dann wird die URL der Website als unsere aktuelle Website-URL festgelegt , da wir der Superadministrator dieser Website sind. Dann können wir Details über uns selbst hinzufügen und auch ein Profilbild hinzufügen. Um das Profilbild hinzuzufügen, müssen wir uns mit dem Gravata-Konto registrieren Wenn Sie einfach hier klicken, ich mit der rechten Maustaste und klicke auf Neues Fenster öffnen. Hier können wir jetzt auf GT Data klicken und unser Gravita-Konto erstellen Vorerst werde ich das Gleiche beibehalten und hier können wir unser Passwort ändern, auf Neues Passwort festlegen klicken und hier Ihr Passwort hinzufügen, dann auf Profil aktualisieren klicken und ich werde das nicht tun Nachdem Sie das getan haben, melden Sie sich ab und können sich mit einem neuen Passwort anmelden. Okay, jetzt gehen wir zum Dashboard und nach Hause. Lass uns auf Live klicken. Okay. Und wenn ich im Bereich Updates einfach auf Updates klicke, können wir die Plugins, Themes und das Wordpress-Versionsupdate sehen . Derzeit ist unsere Website auf dem neuesten Stand. Und wenn Sie Aktualisierungen an Ihrer Website vornehmen, holen Sie sich immer Backups, und dann haben wir den Post-Bereich. Wenn ich also hier auf ErlFost klicke, können wir auf AdnwPost und dann auf Adnew klicken und hier können wir den Titel so hinzufügen, und hier können wir Details hinzufügen und wir können und dann auf Adnew klicken und hier können wir den Titel so hinzufügen, und hier können wir Details hinzufügen und wir können auf Veröffentlichen klicken. Aber in Zukunft werden wir diese Dinge vorerst machen. Lassen Sie uns die Vertrautheit mit der Benutzeroberfläche kennenlernen. Ich werde einfach auf Lu klicken und zurückgehen und hier werden die Beiträge angezeigt , die wir bereits haben Dann haben wir Kategorien und in zukünftigen Lektionen werden wir die Kategorien durchgehen. In den Medien können wir die Bilder, Videos und Dokumente auf unserer Website in diesem Medienbereich sehen und Dokumente auf unserer Website . Dann haben wir Seiten. Auf A-Seiten haben wir derzeit eine Seite mit Datenschutzbestimmungen. Wenn ich auf Vorschau klicke, sieht es so aus. Wenn wir es bearbeiten möchten, können wir einfach auf Bearbeiten klicken und diese Details nach Belieben bearbeiten. Aber lassen Sie uns vorerst nur das Personal durchgehen. Auch hier gehe ich zum Dashboard, dann haben wir den Befehlsbereich und dort werden die Befehle angezeigt , die wir für unseren Beitrag erhalten, dann haben wir den Abschnitt mit dem Erscheinungsbild. Derzeit haben wir im Bereich Erscheinungsbild nicht viele Details, da wir nur das Standardteam von Wordpress 2025 konfigurieren und in Zukunft im Plugin-Bereich mehr erfahren werden. Wir werden die Plugins haben , die wir für die Gestaltung dieser Website benötigen. Als Beispiel werden wir Element Pro verwenden, um unsere Website zu gestalten. Element oder Pro ist ein Plugin. Wenn ich auf „Neues Plugin hinzufügen“ klicke und hier kann ich die Plugins sehen und wenn ich dann hier nach Element oder Presenter suche und dieses Element - oder Website-Builder-Plugin ist erschienen, und hier heißt es zuletzt aktualisiert vor einer Woche und es funktioniert mit der Version unserer WordPress-Website es heißt design elemento.com, und wir können einfach auf „Installieren“ klicken und hier kann ich die Plugins sehen und wenn ich dann hier nach Element oder Presenter suche und dieses Element - oder Website-Builder-Plugin ist erschienen, und hier heißt es zuletzt aktualisiert vor einer Woche und es funktioniert mit der Version unserer WordPress-Website, es heißt design elemento.com, und wir können einfach auf „Installieren“ klicken jetzt und installiere das Plugin, dann aktiviere es, und es erscheint der Abschnitt mit dem installierten Plug-In A Von hier aus können wir auf dieses Upload-Plugin klicken. Und wenn wir den Plug auf unsere Website herunterladen, können wir einfach die Datei auswählen und installieren. Und hier können wir auf ErlSer klicken und hier können wir die Earl-Benutzer sehen , die wir auf unserer Website haben Derzeit haben wir also nur Superadmin und die Rolle ist Also wenn ich auf neuen Benutzer klicke. Hier sind die Details , die wir eingeben können. Dann können wir als Rolle den Administrator, Herausgeber, Autor oder Mitwirkenden auswählen Herausgeber, Autor oder Mitwirkenden Wenn es sich um einen Redakteur handelt, hat die Rolle des Redakteurs nicht all diese Details und kann nur Dinge wie Seiten, Beiträge, Kommentare überprüfen und ähnliches bearbeiten Beiträge, Kommentare überprüfen und ähnliches Dann haben wir Tools. Dieser Tool-Abschnitt ist vorerst nicht wichtig, lassen wir diesen überspringen. Dann haben wir losgelegt. Am Anfang haben wir einen Abschnitt wie Allgemein, Einschreiben, Lesen in Diskussion und hier können wir die Seitendetails scannen und es gibt noch einen anderen Abschnitt wie diesen. Im Moment sind das keine wichtigen Punkte. In zukünftigen Lektionen erfahren Sie mehr über diese Einstellungen und darüber, wie diese Einstellungen überschreiben können, wenn Sie möchten Sie können das WordPress-Dashboard aufrufen und mehr über das Dashboard erfahren. Ich hoffe, Sie haben ein grundlegendes Verständnis von Wordpress und lassen Sie uns in der nächsten Lektion mit dem Design beginnen. 77. 0105 – Elementor Pro einrichten: Hallo, alle zusammen. Wir werden Elementor Pro verwenden , um unsere benutzerdefinierte Website zu entwerfen, da Elementor der beste WordPress-Website-Builder auf dem Markt ist Elementor hat eine Vorversion, aber sie hat Schauen wir uns die Elementor-Pläne an. Um zu dieser Seite zu gelangen, klicken Sie auf den Link im Abschnitt Ressourcen oder in der Beschreibung Sie werden dann zu dieser Seite weitergeleitet Dann haben wir hier die Preispläne. Der empfohlene Preisplan ist Advanced Solo Website Builder. Mit diesem Preisplan können wir 118 Pre - und Pro-Budgets erhalten, und er hat 86 Projekte, aber mit dem Essential-Plan haben wir nur 57 Projekte Wenn wir mit Advanced Solo im E-Commerce-Bereich auf den Markt kommen, erhalten wir außerdem Pop-up Builder Dies ist eine Funktion, die wir verwenden werden, und bei der Marke Essential erhalten wir nicht viele Funktionen. Wenn Sie jedoch mehr als eine Website entwerfen möchten, können Sie zum Advanced-Plan wechseln. Oder wenn Sie ein Freelancer sind , der Websites für Ihre Kunden erstellt, können Sie die Expertenversion erwerben diese Art von Plan entscheiden, können wir viele Plug-ins und Add-Ons ersetzen . Dies wird dazu beitragen, die Seitenladegeschwindigkeit zu erhöhen und die gesamte Website zu optimieren Fangen wir also an, Elementor zu installieren. Dazu gehe ich zum Dashboard unserer Website und hier gehe ich zu Plugins und klicke auf AdNeu Zuerst müssen wir das Element Pre Plugin installieren. Also werde ich von hier aus nach Elementor suchen. Dann haben wir hier das Elemento Website Builder-Plugin. Es wurde von elemento.com entwickelt und ist mit unserer Wordpress-Version kompatibel Also klicke ich auf Jetzt installieren. Okay. Dann klicke ich auf Aktivieren. In Ordnung. Jetzt klicke ich auf Escape und überspringe diesen Schritt oder ich klicke auf die Schaltfläche Schließen, da wir Elementor Pro über die Elementor-Website einrichten werden Elementor Pro über die Elementor-Website einrichten Klicken Sie erneut auf die URL des Ressourcenbereichs und Sie werden zu dieser Seite weitergeleitet. Von hier aus werde ich auf der Advance Solo-Website, Builder-Plan, auf die Schaltfläche Jetzt klicken Advance Solo-Website, Builder-Plan, auf die Schaltfläche Jetzt Und hier muss ich die Details ausfüllen. Dann klicke ich auf Jetzt bezahlen und mache die Zahlung. Nachdem Sie sich erfolgreich registriert haben, können Sie es von hier herunterladen , indem Sie auf diese Download-Schaltfläche klicken, oder Sie können zum Elementor-Dashboard gehen , indem Sie ind elemento.com hinzufügen Und wenn Sie das tun, sehen Sie diese Art von Download-Symbol und dann sehen Sie das Element Plug in den Download. Klicken Sie darauf, dann wird der Download gestartet und Sie haben jetzt das Element of Plugin Lassen Sie uns das jetzt auf unserer Website einrichten. Ich gehe zum WordPress-Dashboard und gehe zu Plugins und klicke auf Plugin installieren. Dann klicke ich auf Neues Plugin hinzufügen. Dann klicke ich auf diesen Plugin-Upload-Button. Dann klicke ich auf „Stapeln und hier haben wir das heruntergeladene Element Pro-Plug-In. Es ist also eine C-Datei. Also wähle ich es einfach aus und klicke auf Öffnen. Dann klicke ich auf Jetzt installieren. Die Installation dauert einige Minuten. Okay. Dann wirst du dieses Fenster sehen. Klicken Sie von hier aus einfach auf diese Plugin-Schaltfläche zum Aktivieren. Und es wird erfolgreich installiert. Also hier ist das Installations-Plug-In. Jetzt klicke ich auf Verbinden und aktivieren. Dann komme ich auf diese Art von Seite. Also hier klicke ich auf Meine Lizenz aktivieren. Okay, Elemento Pro wurde erfolgreich aktiviert, und jetzt können wir die Funktionen von Elemento Pro nutzen 78. 0106 Clear Wordpress-Dashboard: Hallo, alle zusammen. In Ihrem WordPress-Dashboard sehen Sie diese Art von Element. Um sie alle zu entfernen, können Sie einfach auf diese Estren-Optionen klicken und hier den Tab deaktivieren , den Sie nicht sehen möchten Wenn Sie sie also deaktivieren, werden Sie diese Tabs nicht mehr sehen A Zu Plugins, ich gehe zu Plugin installieren. Es installiert automatisch den Lightspeed-Cache auf der Website. Hier ist ein Lightspeed-Cache-Plugin , das auf meinem Server installiert ist. Ich werde auf Deaktivieren klicken, da wir vorerst kein Cache-Plugin benötigen. Ich werde es löschen. Okay, perfekt. Lassen Sie uns in der nächsten Lektion mit der Gestaltung der Website beginnen. 79. 0107 Elementor-Editor Schritt für Schritt: Hallo, alle zusammen. Machen wir uns mit dem Elemento-Editor vertraut Lassen Sie uns also eine Seite erstellen. Jetzt befinde ich mich auf unserem WordPress-Dashboard Von hier aus bewege ich den Mauszeiger über die Seiten und klicke auf Neue Seite hinzufügen Und hier werde ich den Titel als Taste-Seite hinzufügen. Also hier haben wir ein Popup mit Vorlagen. Ich werde es schließen und hier werde ich eine Geschmacksseite hinzufügen. Dann klicke ich auf die Schaltfläche „Mit Elemento bearbeiten“ Wenn ich darauf klicke, werde ich zum Elemento-Editor weiterleiten Ich werde das vorerst überspringen, und hier ist unser Elemento-Editor. Zuerst klicke ich auf Seitenset in und ändere von der eingestellten Seite das Seitenlayout auf Elemento-Canvas Wenn wir das tun, erhalten wir eine leere Seite, auf der wir unsere benutzerdefinierte Website gestalten können Auf unserer linken Seite sehen wir die Widgets, die wir mit Elemento Pro verwenden können Wenn Sie ein Element einer Vorversion haben, können Sie nicht auf alle diese Widgets zugreifen Sie können jedes dieser Elemente einfach per Drag & Drop auf die Leinwand ziehen. Leinwand ist dieser leere Bereich. Vorerst werde ich diesen Struktur-Tab schließen und wenn wir in dieser oberen Leiste nachsehen, können wir auf der linken Seite sehen, wir die Seite im Symbol haben Klicken wir also auf Ich klicke darauf, um zur Seiteneinstellung zu gelangen. In dieser Seiteneinstellung können wir beispielsweise unsere wichtigsten Website-Optionen ändern oder einrichten , wenn ich auf Layout klicke und die Inhaltsbreite der Desktop-Größe derzeit 1140 beträgt Wenn wir dies auf 101.060 ändern, wirkt sich das auf die gesamte Website aus, aber ich werde es als Standard beibehalten Und wenn wir oben auf der Website Padding hinzufügen möchten, können wir diesen Wert einfach aufheben , indem wir auf dieses Kettensymbol klicken, und hier können wir es auf 60 setzen und dann klicken wir auf Speichern und jetzt klicke ich auf Zurück zum Editor und dann lass uns einfach eine Überschrift wie diese ziehen und die Überschrift wird wie hier gelöscht, weil wir 60 Padding oben haben. Wenn wir also wieder zur Sitzeinstellung gehen und zu den Layouts gehen und dies auf Null setzen, die Überschrift Null. Jetzt klicke ich auf Änderungen speichern und gehe zurück zum Editor. dann hier klicken, können wir die Struktur der Website sehen. Derzeit haben wir nur eine Überschrift. Dann können wir hier Knoten hinzufügen, klicken Sie einfach auf Knoten und wenn Sie dann den Knoten hinzufügen möchten oder über einen Abschnitt nachdenken möchten, können Sie einfach den Abschnitt auswählen. In diesem Fall wähle ich diese Überschrift aus und hier kann ich node lie eingeben. Das ist zum Testen. Dann kann ich auf einen Knoten verlassen klicken und dieser Knoten wird hier angezeigt. Stellen Sie sich vor, Sie arbeiten mit dem Team zusammen und haben nur wenige Designer , die an Seiten arbeiten. Indem Sie diese Art von Knoten hinzufügen und wenn sich Ihre Co-Designer auf der Website anmelden und die Seite überprüfen, können sie diese Knoten lesen und das Design sehr gut verstehen. Lassen Sie uns diesen schließen. Jetzt haben wir hier den Seitennamen. Der Seitenname ist Testseite und befindet sich derzeit im Entwurf. Wenn wir auf diese veröffentlichte Schaltfläche klicken, ist sie auf der Website verfügbar, aber derzeit ist sie im Entwurfsmodus. Dann haben wir dieses Symbol, dieses Jar-Symbol für den Zugriff auf diese Seiteneinstellung. Wenn Sie hier klicken und die Details ändern, wirkt sich dies auf die gesamte Site aus. Wenn Sie jedoch hier klicken und diese Details ändern, wirkt sich dies nur auf die Seiteneinstellungen wie ich es zuvor getan habe, indem ich das Seitenlayout geändert habe. Dann haben wir drei Ansichten. Der erste ist der Desktop, der zweite ist ein Tablet und der dritte ist ein Handy. Wenn wir beispielsweise diese Textgröße auf Mobilgeräten ändern möchten , können wir einfach auf den Text klicken und zu Estyle gehen und dann die Schriftgröße ändern Eigentlich muss ich auf diesen Text so klicken und zu Estyle gehen und jetzt kann ich seine Größe so ändern Wenn wir das tun, wirkt sich das nur auf das Handy aus. Wenn wir zur Desktop-Version wechseln, der Text derselbe ist der Text derselbe und auch auf der Tablet-Version. Mobilversion, sie ändert sich auf die Größe, die wir bereits festgelegt haben. Jetzt gehe ich zurück zur Desktop-Version. Jetzt ist der wichtigste Teil dieser seltsame Abschnitt. Wie ich bereits sagte, können wir diese Pro-Funktionen für das Element Pro und für die Vorversion verwenden das Element Pro und für die Vorversion Das Zeug wird niedrig sein. Lassen Sie uns diesen Text entfernen und dann den Abschnitt erstellen. Die erste ist da, wir müssen den Container hinzufügen. Das ist der richtige Weg , um die Website zu erstellen. Ich werde auf den Container klicken und er wird so aus diesem Container hinzugefügt, wir können die Details anpassen. Lassen Sie uns das vorerst als Standard beibehalten und dann füge ich weitere Elemente hinzu, ich werde hier klicken und dann lassen Sie uns die Überschrift hinzufügen und auch auf dieses Plus-Symbol klicken und lassen Sie uns einen Texteditor wie diesen hinzufügen. Jetzt klicke ich auf den Container und momentan ist die Richtung vertikal. Es hat eine Spalte, aber wenn wir auf horizontal klicken, wechselt sie zur Horizontalen. Es gibt viele Optionen, mit denen wir eine perfekte Website gestalten können. Und mal sehen, ob wir diesen Text ändern wollen. Wir können auf dieses Stiftsymbol klicken oder hier klicken und auf Bearbeiten Dann können wir den Text von hier aus ändern. Ich werde es wie gelbes Word ändern. Und dann klicke ich auf Stil und werde diese Textfarbe vorerst auf Schwarz ändern , Schwarz ändern , und ich werde diesen Typ für Grappy-Pins ändern Pins ist meine Lieblingsschrift, und lassen Sie uns ihre Größe auf 60 ändern Lass uns 60 draus machen. Dann ändere ich es auf Medium. Vielleicht sieht normal so besser aus, und wir können die Zeilenhöhe so ändern und die Ausrichtung auf „Lay“ setzen. Okay. Lassen Sie uns vorerst diesen Texteditor entfernen. Ich klicke einfach hier und dann kann ich einfach auf Löschen klicken oder ich kann einfach mit der rechten Maustaste klicken und auf Löschen klicken, so wie hier. Jetzt klicke ich erneut auf den Container und füge diesen Mint Heights 600 und die Containerhöhe wird 600. Dann klicke ich auf diesen Text und lasse uns eine Linienmitte erstellen also klicke hier und lass uns den Inhalt als Mittelpunkt rechtfertigen. Und machen wir das als Mitte, um das zu tun. Ich klicke so auf dieses Zentrum. Und jetzt haben wir hier zwei Zeilen. Also lass es uns reparieren. Um das Problem zu beheben, gehe ich zu Advance, und im Voraus haben wir diese Breite als benutzerdefinierte Breite angegeben, sodass wir auf Standard klicken können und es wird die volle Breite angezeigt. Es gibt also eine Menge Dinge zu tun, und in zukünftigen Lektionen werden wir all diese Dinge verwenden und du wirst in der Lage sein, tolle Schilder zu erstellen. Okay. Hier ist unser einfaches Hello World und wenn ich jetzt auf dieses Höhensymbol klicke, können wir die echte Ansicht sehen und wir können auch hier klicken, um sie zurückzubekommen. Und wenn ich auf dieses Pfeilsymbol und dann auf Seiten anzeigen klicke, wird es nicht aktualisiert. Klicken wir auf Veröffentlichen und versuchen wir erneut, es anzusehen. Okay, ich sehe mir das an. Wenn wir einen anderen Abschnitt möchten, können wir einfach hier klicken und auf den Container bis hierher klicken oder wir können auf dieses Plus-Symbol klicken und auf Plex Box klicken und die Struktur auswählen. Wenn ich ein zweispaltiges Raster hinzufügen möchte, können wir einfach hier klicken und jetzt haben wir eine Spalte. Wir können es also manuell machen. Nehmen wir als Beispiel diesen Container, und ich klicke hier. Gehen wir dann zu Estyle und lassen Sie mich den Hintergrundtyp hinzufügen Klicken Sie also auf diesen Klassiker und lassen Sie uns die Farbe in diese blaue Farbe ändern und auf Layout klicken Im Layout werde ich Mint-Höhen einstellen, lassen Sie uns das auf 300 setzen. Okay. Und diese Struktur bereitet ein bisschen Kopfschmerzen, also um das Problem zu beheben, werde ich sie einfach so platzieren und sie einfach auf die linke Seite ziehen und es wird ein Abschnitt, damit wir die Struktur unserer Website leicht überprüfen können . Und von hier aus müssen wir diese Art von zwei Spalten hinzufügen , um das zu tun. Ich werde auf dieses Plus-Symbol klicken und einfach einen Container wie diesen hinzufügen. Jetzt haben wir den Container im Container, also klicken wir mit der rechten Maustaste und klicken auf Dublgate. Dann kann ich auf den Hauptcontainer klicken und seine Richtung ändern oder horizontal und es werden einfach zwei Und hier haben wir eine Lücke, um diese Lücke zu schließen, ich werde diese Lücke auf Null setzen, und jetzt haben wir keine Jetzt klicke ich hier, um diesen Container auszuwählen. Gehe zum Typ, klicke auf Classic und ändere die Farbe. Ändern wir es in die Bildschirmfarbe und ändern wir die Anzahl der Klicks. Lassen Sie uns zu dieser Textfarbe wechseln. Elemental Editor ist ein wirklich einfach zu verwendender Editor. Also klicke ich einfach auf Veröffentlichen oder wir können einfach auf dieses Vorschausymbol klicken, um eine Vorschau der Änderungen anzuzeigen Wir können auf dieses Symbol oder das Vorschausymbol klicken und die Änderungen von Elger in der Realität überprüfen . In zukünftigen Lektionen werden wir tief in den Elementar-Editor eintauchen und noch viel mehr lernen 80. 0108 Elementor bald verfügbar Seite: Hallo, alle zusammen. Wenn Besucher jetzt unsere Website besuchen, wird sie so aussehen. Und wenn wir Websites für unsere echten Kunden und echte Unternehmen entwerfen , ist das ein wirklich schlechter Eindruck für die Marke. Lassen Sie uns eine Come InSoonPage erstellen und diese Coming Zoon-Seite einrichten , auf der wir unsere Website starten Dazu gehe ich zum WordPress-Dashboard und von hier aus ich über das Element und Bei Tools haben wir einen Tab namens Maintainers Mode. Klicken Sie einfach darauf und der Wartungsmodus ist derzeit deaktiviert, sodass wir auf dieses Db-Down-Feld klicken und die Option Kommen Sie rein sobald es Wartungsarbeiten gibt das in der Wartungsoption Wenn wir das in der Wartungsoption hinzufügen, wirkt sich das auf die Suchmaschinen aus und es heißt, dass es nicht empfehlenswert ist, diesen Modus länger als ein paar Tage zu verwenden. Selbst wenn Sie gerade Wartungsarbeiten durchführen oder eine brandneue Website erstellen, wählen Sie immer die demnächst erscheinende Seite aus. Dann können Sie das Design ändern. Wenn Sie beispielsweise Wartungsarbeiten durchführen möchten , können Sie eine elementare Vorlage entwerfen , die Details zur Wartung enthält Jetzt können wir unter Wer kann darauf zugreifen, angeben, wer angemeldet ist, was bedeutet, wer auf das WordPress-Dashboard zugreifen kann Wenn wir es als angemeldet festlegen, kann sich jeder entsprechend den Rollen, die er hat , im Presse-Dashboard anmelden entsprechend den Rollen, die er hat , im Presse-Dashboard . Wenn Sie jedoch auf Benutzerdefiniert klicken, haben wir hier die Möglichkeit, Rollen auszuwählen. Wenn wir nur die Administratorrolle auswählen, können sich nur Administratoren im WordPress-Dashboard anmelden. Loggen Sie sich für dieses Highway Sealt ein. Jetzt können wir hier eine Vorlage wählen. Derzeit haben wir keine Vorlagen erstellt, also können wir auf Jetzt erstellen klicken, Link, ich klicke einfach darauf. Jetzt sind wir im Vorlagenbereich. In diesem Element- oder Vorlagenbereich können wir Seitenlayouts und Abschnitte entwerfen und sie dann speichern. Der Vorteil ist, dass wir diese vorgefertigten Seitenlayouts und Abschnitte in unser WordPress-Website-Design einfügen können diese vorgefertigten Seitenlayouts und . Hier kann ich einfach den Namen hinzufügen und auf Mit Elemento bearbeiten klicken. Lass uns das machen Ich füge einfach den Vorlagennamen hinzu, sobald er kommt, dann klicke ich auf Mit Elemento bearbeiten und es wird zum Elemento weitergeleitet. Von hier aus klicke ich auf diese eingestellte Seite und Seitenlayout als Element oder Leinwand fest Okay. Jetzt kann ich auf dieses Plus-Symbol klicken und einen neuen Container hinzufügen Ich wähle das Plex-Feld aus und unser Seitenlayout wird vertikal angeordnet sein, also klicke ich auf dieses und dann auf den Container, und hier füge ich Min Hight Test Lass uns 700 wie folgt hinzufügen, dann klicke ich auf dieses Plus-Symbol und lass uns eine Überschrift hinzufügen Fügen wir einfach die Überschrift wie folgt hinzu. Dann gehen wir zu Stilen, und ich werde diese Textfarbe in Schwarz ändern und die Ausrichtung als Mittelpunkt festlegen. Dann zur Typografie, klicke ich auf dieses Stiftsymbol und ändere die Schriftfamilie auf Poppin Sie können jede Schriftart auswählen, die Ihnen gefällt, aber ich mag den Fpin wirklich Also werde ich die Größen 60 hinzufügen, dann füge ich eine normale Größe wie diese Dann gut und ich werde Text hinzufügen wie, klicken Sie auf dieses Stiftsymbol und klicken Sie auf den Inhalt, und ich werde hier beim Text als ob bald etwas Neues reinkommt. Vorhanden. Jetzt muss ich einen Absatz hinzufügen, um einen Absatz hinzuzufügen Ich kann auf diese Schaltfläche für das Anzeigenelement klicken, und hier erhalte ich einen Texteditor wie diesen. Dann füge ich Text hinzu, als würden wir uns freuen , unser brandneues Website-Design nur für Sie zu veröffentlichen. Dann markiere ich es und klicke dann auf dieses Toggle Toolbg und lass uns die Ausrichtung in der Mitte wie folgt einrichten Dann gehe ich zu Stil, ich kann von hier aus die Ausrichtung mittig machen, und dann ändere ich die Textfarbe Schwarz und lass uns die Typografie wieder in Pop-Ins ändern Ein Set mit den Größen 21. Dann möchte ich diese beiden Texte in die Mitte legen , um das zu tun, den Container isolieren und im Bereich Container-Layout füge ich den Inhalt als Mittelpunkt wie folgt hinzu. Dann möchte ich das Logo oben drauf setzen, ich klicke auf Element hinzufügen und hier auf Bild. Lass uns nach dem Bild suchen und hier haben wir ein Bild und ich werde es so platzieren. Dann muss ich hier unser Firmenlogo hinzufügen. Ich klicke auf diesen Abschnitt „Bild auswählen“ und hier wähle ich die Datei aus, und jetzt ist hier die Datei Ich klicke einfach darauf und es wird so hinzugefügt, dann entferne ich diesen Titel und ich verwende ALT-Text Der ALD-Text wird das Phenic-Logo der JB Family sein. Dann klicke ich auf Auswählen. Jetzt gehe ich zu Stil und die Ausrichtung wird im Mittelpunkt stehen Das ist und die beiden. Machen wir es mit 30, 30 wären gut. Dann muss ich mehr Platz zwischen diesen beiden Abschnitten hinzufügen. Dazu wähle ich das Bild aus, klicke dann auf Erweitert und im erweiterten Modus klicke ich gemeinsam auf diesen Linkwert. Kettensymbol verlinke ich es, dann werde ich am unteren Rand 30 wie folgt angeben. Okay. Jetzt ganz unten muss ich bei N einen Assistenten verlinken. Um das zu tun, klicke ich auf dieses Plus-Symbol und dann auf die Überschrift Lass uns die Überschrift so setzen. Dann lassen Sie uns das Design auf dieses Design ändern. Um das zu tun, werde ich einfach versuchen auf diesen Text zu klicken und dann auf Kopieren zu klicken. Dann klicke ich hier und klicke mit der rechten Maustaste, dann klicke ich auf Jenseits des Stils. Wenn ich diesen Stil einfüge, der Stil, den wir hier hinzugefügt haben wird der Stil, den wir hier hinzugefügt haben, automatisch zum Titel hinzugefügt. Dann gehe ich zu E-Stile und klicke auf Typografie. Dann ändere ich die Größe, sodass sie 30 wie folgt aussieht Dann fügen wir ein späteres Tempo hinzu, etwa 0,5, und jetzt füge ich den Text als ob ich jetzt tatsächlich einen Assistenten benötige, lass uns den Text etwas kleiner machen Lass uns 25 draus machen und die Breite wird mittel sein. Jetzt möchte ich zwei Texte hinzufügen, z. B. rufen Sie uns an und senden Sie uns eine E-Mail an. Lassen Sie uns dazu ein Symbolfeld erstellen. Dazu klicke ich auf Element hinzufügen und suche nach einem Widget-ähnlichen Symbol. Ja, hier haben wir ein Symbolfeld Ich ziehe es einfach so hin und lasse es fallen. So, dann kann ich es von hier aus bearbeiten. Lassen Sie uns also zuerst das Symbol ändern. Zuerst muss ich dazu ein Telefonsymbol hinzufügen. Ich klicke hier und lass uns nach dem Telefon suchen. Und lassen Sie uns dieses Telefonsymbol hinzufügen und auf Einfügen klicken. Dann möchten Sie Text hinzufügen, z. B. rufen Sie uns unter unserer Handynummer an. Also lass uns das machen. Also füge ich es einfach so hinzu. Dann brauche ich die Beschreibung nicht. Ich entferne einfach die Beschreibung. Dann ändern wir diese Farbe, um die Farbe zu ändern Ich klicke auf Stil und Stil, klicke auf das Symbol und ändere die Grundfarbe auf Schwarz, und die Größe ist in Ordnung Ändern Sie dann im Bereich Inhalt den Titel wie folgt in Schwarz. So können wir die Art der Dachkammer ändern. Wir können die Art der Schwerkraft auf etwa Pop-Ins ändern und es dann auf 20 machen Dann wird es normal sein. Dann machen wir es wie ein Medium. Jetzt möchte ich die Umrandung dieses Symbolfeldes hinzufügen , um das zu tun. Bevor wir das tun, lassen Sie uns das zweite Symbol erstellen, das uns eine E-Mail sendet. Um das zu tun, kann ich einfach hier klicken und dieses Duplikat dieses Elements duplizieren. Mit Recht kann ich auf Duplizieren klicken. Dann werde ich hier das Telefonsymbol in den Umschlag ändern und so ändern. Dann schicke ich uns eine E-Mail an unsere E-Mail. Dann möchte ich diese beiden in der Horizontalen hinzufügen, aber derzeit ist es vertikal. Dazu können wir einfach hier klicken und auf Neuer Container klicken. Und hier ziehe ich die Cools in der Iconbox in den Container, damit ich das Gleiche machen kann und auch bei der zweiten Iconbox Dann wähle ich den Container aus und stelle die Richtung Dann lassen wir es die Mitte ausrichten und ich werde diese Lücke auf automatisch ändern. Lassen Sie uns es tatsächlich schaffen. Eigentlich sollten wir es als Raum um uns herum machen. Dann kann ich auf dieses Symbolfeld klicken und jetzt klicke ich auf Weiter zum Rand im Rahmen, wir haben Box Shadow. Ich klicke einfach auf dieses Stiftsymbol. Dann lassen Sie uns Details hinzufügen. Ich mache die Unschärfe auf 15 und die Streuung auf Null ändern wir die Farbe etwas heller Lassen Sie uns eigentlich keinen Boxschatten hinzufügen, auf Zurück zur Standardeinstellung klicken Anstatt den Boxschatten hinzuzufügen, fügen wir einen festen Rand hinzu. Klicken Sie einfach auf den Rahmen und hier fügen wir die Größe als zwei hinzu. Lass es uns wie eins machen. Dann lassen Sie uns die Rahmenfarbe wie folgt ändern. Dann fügen wir die Rahmenreduzierung auf 15 hinzu. Okay. Was wir jetzt tun können, ist, das Layout zu erweitern und Padding hinzuzufügen. Fügen wir Padin als Okay. Jetzt wird es so aussehen. Es sieht also ziemlich toll aus, und lass uns das Gleiche tun. Klicken wir auf dieses Symbolfeld und wir können einfach mit der rechten Maustaste klicken und kopieren, dann mit der rechten Maustaste klicken und den Stil wie diesen einfügen. Dann klicke ich auf den Hauptcontainer und hier, lassen Sie uns ihn so platzieren, dass er wie in der Mitte steht, und lassen Sie uns so einen Spaltenabstand von mehr als einem Drittel herstellen. Lassen Sie uns das auffälliger machen. Um das zu tun, können wir die Farben ändern. Also klicke ich hier und gehe zu eStyleSoeStyle, klicke auf das Symbol und klicke auf Dann klicke ich auf diesen Farbsampler. Jetzt werde ich diese Farbe so in Blau ändern. Nehmen wir eigentlich die gleiche blaue Farbe wie das Logo. Das. Ich werde hier den blauen Farbcode hinzufügen. Es ist Null, Doppel, F. Und dann kann ich rechten Maustaste auf Kopieren klicken und rechten Maustaste den Stil wie folgt einfügen. Jetzt wird es auf der Website so aussehen. Da wir es in die Mitte bringen können, wenn wir Mitternacht als Null hinzufügen. Dann wird es jetzt so aussehen und wir können weitere Stile hinzufügen, aber im Moment wird das besser sein. Also klicke ich jetzt auf Veröffentlichen. Da wir das Design in der Tablet-Ansicht und der mobilen Ansicht ändern können . Die Tablet-Ansicht ist in Ordnung, aber auf dem Handy klicke ich auf dieses Handy, dann ändern wir diesen Text auf eine Textgröße von 38 und der Rest ist okay. Der Rest des Designs wird so aussehen und in Zukunft werden wir mehr erfahren. Aber vorerst veröffentlichen wir es und wenn ich auf dieses I klicke, kann ich es auf der Website überprüfen. Es wird so aussehen. Jetzt gehe ich zur Wartungsmodus-Seite und hier muss ich Wartungsmodus-Seite und hier auf Speichern als jetzt klicken, wenn wir überprüfen, wir haben diese demnächst erscheinende Seite, ich klicke einfach darauf und klicke auf Änderungen. Sobald wir das getan haben, ist der Wartungsmodus aktiviert. Also werde ich die URL der Website kopieren und es mit einem neuen Inkogtor-Fenster versuchen, damit wir das Design deutlich sehen können Es wird also so aussehen. Um also auf das Backend zuzugreifen, können wir einfach unter Slash WP Admin vorgehen Dann können wir hier Benutzername und Passwort hinzufügen. Dann klicke ich auf Anmelden. Sobald ich auf Anmelden klicke, leite ich zum WordPress-Dashboard Wenn ich auf der Homepage der Website nachschaue, während wir uns als Administrator anmelden , wird die echte Website statt auf einer Seite angezeigt. Wenn wir also das hier bearbeiten müssen, können wir zu Vorlagen gehen und auf Vorlagen speichern klicken. Satemdates haben wir Come in Zone, also kann ich auf Mit Elementor bearbeiten klicken und Änderungen an der Come in Zone-Seite vornehmen , die wir Das ist wirklich einfach, aber in Zukunft werden wir mehr lernen und unser Wissen nutzen, werden wir mehr lernen und unser Wissen nutzen um maßgeschneiderte Websites zu erstellen, die Aufmerksamkeit erregen und den Wert und die Identität der Marke repräsentieren Und wenn Sie bereit sind, die Website zu starten, können Sie diese Coming-Zone-Seite entfernen, indem Sie hier klicken . Sie werden dann zur Tools-Seite und hier auf der Registerkarte Wartungsmodus weitergeleitet und hier auf der Registerkarte Wartungsmodus Von hier aus können Sie den Modus deaktivieren Dann können Sie auf Änderungen speichern klicken , wenn Sie auf Änderungen speichern klicken, und lassen Sie uns die URL kopieren, dann gehen wir zum Inkognitor-Fenster und drücken Sie die Eingabetaste und Sie werden nicht mehr wirklich, ich muss ein Logo erstellen, wenn Sie sich abmelden und lassen Sie uns zur Startseite gehen und Sie werden die Coming Zone-Seite nicht mehr sehen. 81. 0109 So funktionieren Wordpress und Elementor: Hallo, alle zusammen. Bevor wir weitermachen, ist es wichtig, etwas über die Grundlagen von WordPress-Websites zu verstehen . Diese Websites werden hauptsächlich mit STMS, CSS und anderen Webtechnologien erstellt und anderen Webtechnologien Wenn wir mit Elementor arbeiten, müssen wir STML und CSS nicht beherrschen, aber wir sollten mit einigen Schlüsselkonzepten vertraut sein . In TML werden Sie beispielsweise auf Elemente wie H eins, zwei, drei, Absatz und Steuer stoßen zwei, drei, Absatz In CSS werden Sie Begriffe wie Rand, Abstand oder oberer Rand, unterer Rand, oberer Abstand, unterer Abstand, unterer Abstand und CSS-ID, Klasse hören oder oberer Rand, unterer Rand, oberer Abstand, unterer Abstand, . Die Begriffe tauchen häufig auf und wenn Sie wissen, was sie bedeuten , können Sie sich leichter darin zurechtfinden Sie müssen diese Konzepte nicht von A bis Et lernen, sondern müssen sich nur mit ihren Namen und Optionen vertraut machen Wenn Sie sich mit Elemento befassen, werden Sie natürlich besser verstehen, wie sie funktionieren Lassen Sie uns nun in einige der grundlegenden HTML - oder Hypertext-Markup-Sprachstrukturen eintauchen, die - oder Hypertext-Markup-Sprachstrukturen Stellen Sie sich das als Grundgerüst einer Website vor. Zum Beispiel H eins, H zwei, drei, sind Überschriften-Tags, die die Wichtigkeit der Überschrift auf einer Seite definieren . H eins ist in der Regel der Haupttitel, während H zwei und drei als Beispiel für den Untertitel verwendet werden . In Element of Canvas klicke ich auf diesen Helloworld-Text, und wenn ich das HTML-Tag HTML überprüfe, ist es Wenn wir wollen, können wir H eins, H zwei, H drei wie folgt auswählen zwei, H Dann haben wir hier P. P bedeutet Absatz. Dieses Tag wird für Text verwendet. Wenn wir zum Beispiel hier klicken und den Texteditor hinzufügen, wir ihn wie folgt hinzu, dann können wir ihn hier als Absatz sehen , was bedeutet, dass es sich um ein P-Tag handelt. Wenn wir den Link dann wie folgt hinzufügen möchten, markiere ich diesen Teil und lass uns auf diesen Link „ Einfügen bearbeiten“ klicken und unseren Link als google.com hinzufügen und die Eingabetaste drücken Das ist das A-Tag. Also, wenn ich dieses Bild in Text ändere und wenn wir hier nachschauen, ist hier ein Tag. Wenn jemand auf diesen Teil klickt, leitet er zu google.com weiter, weil wir dieses google.com als Link zu diesem Text hinzufügen Wenn wir diesen Teil dann fett formatieren möchten, kann ich ihn einfach markieren und auf diesen fett gedruckten Teil klicken Dann ändern sich das Design, der Text und wenn wir zum Text übergehen, haben wir dieses starke Etikett wie dieses. Wir müssen es nicht mit dem SDML-Editor bearbeiten. Wir können es einfach visuell bearbeiten. Das Einzige, was wir darüber wissen sollten, wer wir sind. Wenn wir die Grundlagen dessen, was wir tun, kennen, wird uns das helfen, das Elemento zu beherrschen. Dann sollten wir über CSS Basic nachdenken. CSS bedeutet Kaskade in Stylesheet. Es geht um E-Styling. Es steuert das Erscheinungsbild Ihrer Website, z. B. Farben, Schriftarten und I-Abstände. Wir können sie mithilfe von CSS anordnen. Normalerweise können wir CSS auf dieser Registerkarte „Stil“ bearbeiten. Als Beispiel klicke ich auf diese Bleistiftschaltfläche in dieser Überschrift und dann auf E-Stil. Hier ist das CSS - oder Stilset, das wir für den Text verwenden können Wenn ich zum Beispiel die Farbe ändern möchte, kann ich hier klicken und Farbe in etwa so ändern, nicht so, wie hier. Das ist eine CSS-Eigenschaft dieses Textes, die wir gerade gemacht haben. Dann können wir die Ausrichtung ändern. In diesem Fall ändert sich die Ausrichtung nicht und wenn wir möchten, können wir Textschatten hinzufügen oder das ist eine Eigenschaft der Typografie Wir können es ändern, wie wir wollen. Wenn wir sie ändern, ändern wir den CSS-Stil des Elements. Dann werden Sie hauptsächlich Margin und Padding verwenden. Fügen Sie all diese Konzepte zu visuellen Einstellungen hinzu oder vereinfachen all diese Konzepte zu visuellen Einstellungen Rand ist der I-Raum außerhalb eines Elements wie eine Lücke zwischen Überschrift und Absatz. Padin ist der I-Raum innerhalb eines Elements zwischen dem Inhalt und seinem Rand Element or vereinfacht all diese Konzepte zu visuellen Statinen beispielsweise den Ispace um ein Element herum anzupassen, können wir zur Registerkarte „Erweitert“ wechseln Hier haben wir Margin und Pad Demonstrieren Sie das deutlich. Ich werde eine neue Flexbox erstellen und diesen Container vom Typ Direct Column wie folgt Dann fügen wir die Hintergrundfarbe hinzu. Klicken Sie hier und gehen Sie zu Is Dies, dann klicken Sie auf Classic und lassen Sie uns die Farbe Rot wie folgt hinzufügen. Okay. Dann dupliziere ich das mit der rechten Maustaste und klicke auf Duplikat und dann werde ich es per Dragseil in den Container ziehen, den wir erstellt haben. Dann klicke ich auf das Bleistiftsymbol für die Überschrift und gehe zu seinem Stil. Lassen Sie uns diese Textfarbe in Schwarz ändern. Außerdem werde ich diesen duplizieren und ihn so in den Container legen. Lassen Sie uns die Farbe in so etwas wie Weiß ändern. Hier befindet sich der gelbe Text nun außerhalb des Containers. Um das Problem zu beheben, kann ich Margin Top hinzufügen. Lass es uns machen. Ich klicke hier und jetzt bin ich auf dem Container und gehe zu Advance. Hier sind der Rand und das Padin. Hier klicke ich auf Wert zusammen verknüpfen und hebe die Verknüpfung auf. Im Grunde genommen ist es so, dass, wenn ich es verlinke und zehn nach oben hinzufüge, es zum Rest des Designs hinzugefügt wird Aber machen wir es auf Null und wenn ich nur den oberen Rand hinzufügen möchte, kann ich es so hinzufügen. Margin ist der Ispace außerhalb des Elements. Wenn ich einen Rand hinzufüge, um 60 zu überschreiten, ist er bei 62 außerhalb des Containers, und wenn ich einen Wert von eins auf 20 setze, entspricht er bei 120 Pixeln dem Abstand zur Außenseite dieses Containers, und wenn ich einen Minuswert hinzufüge, ist und wenn ich einen Minuswert hinzufüge, er bei -120 Pixeln zu diesem Wenn ich also für mehr Tempo innerhalb des Containers sorgen möchte, kann ich eine Polsterung hinzufügen Wenn Sie die Verknüpfung der Werte aufheben, füge ich eine obere Polsterung als 120 hinzu. Wenn ich es hinzufüge, erhalte ich diese Art von Tempo, und wenn ich es nach unten mache, werden 120 nach unten hinzugefügt, und wir können das Gleiche mit rechts und so machen Machen wir es auf 500, damit wir die Änderungen leicht verstehen oder visuell sehen können Eigentlich ist es zu viel. Machen wir etwa 200. 200 ist visuell ansprechend, so wie das hier. Okay. Wenn ich nun mehr Platz zwischen diesen beiden Texten hinzufügen möchte, kann ich auf diesen Text klicken und zu „Weiter Im Voraus kann ich einen Rand wie 60 hinzufügen, nicht den oberen. Eigentlich muss ich den unteren Rand hinzufügen. Wenn ich also mehr Platz benötige, kann ich auf diese Weise mehr Pixel zum unteren Rand hinzufügen. Ich kann auf diesen Absatz klicken und am oberen Rand liegt 60 und er wird zum oberen Rand des Absatzes hinzugefügt. Ein grundlegendes Verständnis dieser Konzepte erleichtert also die Problembehandlung und Anpassung erheblich. Wenn eine Schaltfläche beispielsweise nicht wie erwartet ausgerichtet ist, sollten Sie den Rand des eingestellten Abstands überprüfen Mit Nina CSS können wir benutzerdefinierte Websites einfacher verstehen und erstellen 82. 0110 Design 01 Hero-Abschnitt Teil 01: Hallo, alle zusammen. Lassen Sie uns diesen Heldenbereich mit Elemento gestalten diesen Heldenbereich mit Elemento Das ist also eine Figma-Benutzeroberfläche, die wir im Rahmen des benutzerdefinierten Website-Designs mit Figma erstellt haben im Rahmen des benutzerdefinierten Website-Designs mit Figma erstellt Schauen Sie also im Abschnitt Ressourcen nach, um diese Figma-Community-Datei zu erhalten Lassen Sie uns also dieses Figma-Design in Elemento umwandeln. Um das zu tun, bin ich im WordPress-Dashboard. Ich gehe einfach über die Seiten und klicke auf Neue Seite und lass uns als Hero One bearbeiten. Fügen wir also den Seitentitel als Hero One hinzu. Dann klicke ich einfach auf Mit Elementor bearbeiten. Dann erhalte ich diese Nachricht. Ich schließe es einfach, weil wir eine benutzerdefinierte Website entwerfen werden. Wir benötigen keine vorgefertigte Vorlage. Okay, jetzt sind wir im Elemento-Editor. Also klicke ich zuerst auf diese Seiteneinstellung und wähle das Seitenlayout als Elemento-Canvas aus. So wie das So, jetzt haben wir eine klare Leinwand. Dann schauen wir uns zuerst die Größe dieses Heldenbereichs an. Also wähle ich den Heldenbereich aus, und hier ist er 1440 breit und 700 hoch Jetzt klicke ich auf dieses Plus-Symbol und hier stelle ich die Flexbox ein Dann wähle ich diese Richtungsspalte aus und erhalte einen Spaltenabschnitt wie diesen. Dann kann ich mir die Eigenschaften dieses Containers ansehen, und von hier aus werde ich das bei einer Mindesthöhe von 700 Pixel sehen Dann können wir für die Breite das Feld mit der Inhaltsbreite auf die volle Breite ausbreiten Dann schiebe ich hier Pixel, und die Breite ist 1.400 40. Sagen wir mal 1.440 Okay. Sieht jetzt gut aus. Als nächsten Schritt müssen wir also dieses Hintergrundbild hinzufügen. Um es hinzuzufügen, wähle ich das Hintergrundbild von hier aus. Hier ist das Hintergrundbild. Dann klicke ich auf diesen Export und stelle den Dateityp JPG und die Raten bei der Größe auf 1,5 X ein, dann klicke ich auf Export MD One und es wird einfach heruntergeladen, aber die Kilobyte-Anzahl ist wirklich hoch, lass uns die Dateigröße reduzieren Um das zu tun, gehe ich zu tiny png.com und ziehe es dann einfach Bevor wir es dann optimieren, hat es 580 Kilobyte, aber jetzt hat es nur Ich klicke hier, um es herunterzuladen. Okay, jetzt gehe ich zum Element oder Editor und wähle den Container aus, um Element oder Editor und wähle den ihn zu bearbeiten Dann gehe ich zu Stil In Estyles füge ich Hintergrund Hintergrundtyp wird klassisch sein und hier haben wir die Möglichkeit, ein Bild hinzuzufügen Ich klicke einfach auf Bild auswählen und jetzt kann ich das Bild einfach so auf unsere Website ziehen und rauben. Dann klicke ich auf Salt. Jetzt sieht es so aus und jetzt müssen wir die Option für das Hintergrundbild auswählen. Auflösung des Hintergrundbilds ist also voll und die Position befindet sich in der Mitte Dann ist der Anhang scrollbar, was bedeutet, dass beim Scrollen der Website das Bild scrollt. Aber wenn wir es so einstellen, dass es behoben ist, rufe ich das Bild nicht auf, wenn wir auf der Website scrollen Lass es uns scrollen lassen. Dann wiederhole ich es, ohne Wiederholung, dann wird die Displaygröße so abgedeckt und es wird so aussehen. Wenn wir uns die Vorschau der Website ansehen, wird sie so aussehen, aber sie sollte den gesamten Bereich abdecken. Repariere es, ich klicke auf den Container und gehe zum Layout. Dann lass uns dieses Bit so auf 100% ändern. Jetzt funktioniert es so, dann gehen wir zur Seiteneinstellung, nicht zur Seiteneinstellung, zur Seiteneinstellung. Um zur Seiteneinstellung zu gelangen, können wir auf dieses eingestellte Symbol klicken, und hier gehe ich zu Layout auf Layout, wir 1.140, ich mache 1.440 daraus Klicken Sie dann auf Änderungen speichern und schließen Sie hier. Wenn wir dann das Design überprüfen, sieht es so aus, und wenn wir es in der Vorschau überprüfen, sieht es auch so aus. Okay. Jetzt ist das Hinzufügen des Hintergrundteils abgeschlossen. Tatsächlich können wir dieses Raster ausblenden, indem wir hier klicken, und wir können das Design deutlich sehen . Jetzt müssen wir nur noch dieses Logo und das Menü hinzufügen. Es gibt nur wenige Möglichkeiten, dies zu tun. Lassen Sie uns also mit der einfachen Methode fortfahren, denn wir lernen immer noch etwas über das Elemento . Für das Logo füge ich einfach einen Text wie diesen hinzu und ändern wir dann den Text in Logo Lassen Sie uns nun die Eigenschaften dieses Logos betrachten. Isoliere das Logo, es ist ein Text und Schriften wie Railway Semi Bool 35. Lassen Sie uns diese Details hinzufügen. Ich klicke auf die Überschrift und hier gehe ich zum E-Stil, dann ändere ich die Farbe auf Weiß und klicke auf das Stiftsymbol unter Typografie, und hier ändere ich die Schriftfamilie auf Railway wie folgt Dann mit diesem halbfett und die Größe ist 35. Mal sehen, ja, die Größe ist 35 und die Feldfarbe ist weiß. Das haben wir schon gemacht. Okay, jetzt haben wir das Logo, dann müssen wir das Menü hinzufügen. Also klicke ich im Menü einfach auf Adeleans und suche Und hier haben wir ein paar Menüpunkte. Holen wir uns also einfach diesen einfachen Menü-Anker wie diesen. Und hier müssen wir Menüdetails hinzufügen. Derzeit haben wir keine Menüs Wir können nur ein neues Menü erstellen. Bevor ich ein neues Menü erstelle, ich einfach hier und klicke auf Entwurf speichern, um diese Änderungen zu speichern. Dann fügen wir das Menü hinzu, um das Menü hinzuzufügen Ich gehe zum Dashboard der WordPress-Website und auf WordPress haben wir die Möglichkeit, das Menü im Aussehen hinzuzufügen, aber derzeit sehen wir den Menüteil nicht , weil wir kein Thema ausgewählt haben. Wenn wir also eine Website mit Elemento erstellen, wird empfohlen, das Hello Elemento-Thema hinzuzufügen Also lass es uns hinzufügen. Jetzt bin ich im WordPress-Dashboard und im Erscheinungsbild und wähle das Thema aus. Von hier aus klicke ich auf Neues Theme hinzufügen. Und hier suche ich nach Hello Element. Eigentlich bekommen wir hier das Thema. Lassen Sie uns auf Details und Vorschau klicken, und hier haben wir Hello Element von Elemento Klicken Sie auf Installieren und dann auf Aktivieren Jetzt haben wir dieses Thema, also brauchen wir dieses 20251 nicht Wählen Sie es einfach aus und klicken Sie auf Löschen Jetzt ist hier unser Thema. Wenn ich jetzt das Aussehen überprüfe, können wir den Menülink sehen. Wenn ich auf Menüs klicke, werde ich zu dieser Menüseite weitergeleitet. Aber derzeit haben wir kein Menü. Lass uns ein neues Menü erstellen. Nennen wir es wie Hero-Menü, dann klicke ich auf Erstellen und füge keinen Anzeigeort oder ähnliches hinzu. Wenn wir eine echte Website entwerfen, klicken wir auf Create Man, wir können alle abdecken. Okay, jetzt ist das Menü erstellt. Jetzt können wir Menüelemente hinzufügen. Derzeit haben wir keine Pay-Pässe oder Kategorien. Nur wir können benutzerdefinierte Links hinzufügen. Wählen wir also Benutzerdefinierte Links aus, und als URL füge ich nur ein Hashtag hinzu. Und für Linktext können wir diese Texte kopieren. Zuerst kopiere ich das Home und füge es so ein und klicke auf Zum Menü hinzufügen, und es wurde einfach zum Menü hinzugefügt. Dann lassen Sie uns den zweiten Menüpunkt erstellen. Es geht um uns, füge es so ein und füge es so ein. Dann fügen wir diesen Menüpunkt wie diesen und unseren Coach und das C-Tag hinzu. Jetzt ist unser Menü fertig und es gibt eine Menge Dinge , die wir mit dem Menü machen können. Als Beispiel können wir solche Untermenüelemente hinzufügen , aber lassen Sie uns vorerst ein einfaches Menü wie dieses beibehalten und bei echtem Website-Design gehen wir zum Menü. Jetzt klicke ich auf Menü speichern. In Ordnung. Jetzt gehe ich zur Helden-Sektion und wir speichern den Entwurf, also werde ich diese Seite unterdrücken Wenn ich ihn drücke, sind hier das Menü und das Kamenu-Element, also klicke ich auf dieses Stiftsymbol und hier suche ich tatsächlich nach Helden, wir können diesen Menüanker nicht verwenden Ich werde es löschen und das Suchmenü erneut aufrufen. Und lassen Sie uns dieses WordPress-Menüelement holen, und ich ziehe es so und hier können wir das Menü so auswählen, das Menü ist so ausgewählt. Dann fügen wir seine Verbindungen zu diesem Menü hinzu, um das zu tun. Lass uns hier nachschauen, welche Art von Text ich auf diesem Figma-Menüpunkt verwende, er ist geöffnet und halbfett 18. Lassen Sie uns diese Details hinzufügen. Hier klicke ich auf Stil und klicke auf Typografie und suche Open Sans so, dann ist die Größe 18 und mit diesem Semivol wie diesem, dann müssen wir es in Transformation auf Großbuchstaben setzen, weil es hier in Großbuchstaben ist und vorerst gut ist, dann ändern wir die Textfarbe weiß Okay. Jetzt haben wir hier Logo und Menü. Außerdem müssen wir diese Hor-Details korrigieren, und dazu ist die Textfarbe normalerweise weiß, wenn Sie mit dem Mauszeiger Die Textfarbe sollte diese rote Farbe sein. Ich schiefe diesen Text und kopiere die Füllfarbe. Und ich verstehe, hier ist es, ich werde Farbe als Rot hinzufügen und wir brauchen den Zeiger nicht, also werde ich die Farbe einfach so entfernen und es wird so aussehen. Ich ändere nur die Deckkraft der Zeigerfarbe. Wenn aktiv, setze ich sie auf Rot und wenn der Zeiger aktiviert ist, entferne ich die Zeigerfarbe Okay. Jetzt müssen wir den Abstand zwischen den Elementen finden, also ist er 50 Pixel groß und wir fügen ihn von hier aus Der Abstand dazwischen wird also 50 sein. Okay. Wenn wir jetzt das Design überprüfen, wird es so aussehen und wir werden die Probleme nacheinander beheben. Das erste Problem ist das Logo und das Menü befinden sich in derselben Zeile. Um das Problem zu beheben, gehe ich zum Design und klicke dann auf Elemente und klicke auf Container. Klicke einfach auf Container und den hinzugefügten Container und ich klicke hier, dann sind wir in der Container-Einstellung. Ich werde den Container so auf die volle Breite ändern und im Voraus werde ich sie auf Null setzen. Und hier werde ich den Spalten- und Zeilenabstand wie folgt auf Null setzen. Dann füge ich dieses Logo hinzu und füge dieses Menü wie folgt zum Container hinzu. Also hier ist der Container und das Logo und der Menüpunkt befindet sich im Container. Also wähle ich den Container von hier aus und ändere dann die Diktion auf horizontal Ich repariere das so, dann füge ich hinzu, dass der Abstand zwischen dem Logo auf der linken Seite und dann auf der rechten Seite Jetzt ist das zweite Problem in der Figma-Datei ein Leerzeichen dazwischen als 140 Wenn wir hier hingehen, wenn wir auf das Layout klicken und hier nachsehen, ist der horizontale Abstand 140 Fügen wir unserem Design auch horizontale Polsterung hinzu. Dazu wähle ich den Hauptcontainer aus. Und klicke auf Advance. Dann haben wir hier Polsterung. Ich werde die rechte Polsterung als 140 hinzufügen, dann wird die linke Polsterung ebenfalls Okay. Jetzt sieht es so aus. Dann müssen wir diese obere Polsterung machen . Die obere Polsterung ist 20. Fügen wir es hinzu. Geh hierher und klicke hier. Dann fügen wir diese oberen Polster hinzu, 20 wie diese. Okay, so weit, so gut. Wenn wir uns nun diese beiden Designs ansehen, sind sie sich ziemlich ähnlich. 83. 0111 Design 01 Hero-Abschnitt Teil 02: Okay, jetzt müssen wir diesen Abschnitt erstellen. Also lass uns anfangen. Ich gehe zum Design, zuerst müssen wir eine Unterüberschrift hinzufügen, also gehe ich hierher und ziehe eine Überschrift wie diese per Drag-and-Rope, klicke auf die Überschrift und lass uns sie hier einfügen. Gehen wir also in diesen Container hinein, aber wir brauchen ihn außerhalb dieses Containers , wie hier. Und tatsächlich brauchen wir es hier unten. Okay. Gehen wir jetzt zur Registerkarte Stil und ändern den Typ. Zuerst mache ich daraus einen Linienmittelpunkt. Dann ändern wir die Farbe auf Y. Und hier doppelklicken wir darauf, und die Typografie ist offen ohne, füge zwei hinzu. Lassen Sie uns diese Details hinzufügen. Typografie betrifft, so ist die Schriftfamilie Open Sans und W ist Semibol und die Größe ist 20 und was wir hier haben, haben wir eine Zeilenhöhe, die 31 ist. Zur Zeilenhöhe addieren wir 30, sorry, 31 wie hier sorry, 31 wie Dann müssen wir es zu oberem Gas machen, also oberes Gas umwandeln Jetzt fügen wir den Rest des Inhalts hinzu und fixieren das Alignment Tissue. Dann müssen wir diese Überschrift hinzufügen. Bevor ich das mache, muss ich den Text ändern. Ich werde diesen Text von hier kopieren und hierher kommen und auf Inhalt klicken und den Inhalt so ändern. Dann werde ich einfach diese Überschrift duplizieren und los geht's. Dann kopiere ich das hier und die Typografie ist fett 60 und die Zeilenhöhe ist automatisch. Lass uns sie machen. Klicken Sie auf dieses Bleistiftsymbol, gehen Sie zur Kachel und die Typografie ist Railway 60 fett gedruckt Dann ist die Linienhöhe automatisch. Um es automatisch zu machen, klicke ich hier und dann auf dieses Stiftsymbol Dann kann ich die Textfolie Otto wie folgt hinzufügen. Okay. Aber es ist kein oberes Gas, es sollte Gas sein, also gehe ich zur Transformation und füge Standard hinzu. Gehen Sie dann hier zum Inhalt und fügen Sie den Inhalt ein. Eigentlich die Transformation, sehen wir Die Transformation ist hier in Groß-/Kleinschreibung, lassen Sie uns in der Typografie in Titelbuchstaben ändern und die Transformation wird wie folgt Okay. Was wir nun hinzufügen müssen, ist dieser Absatz. Also werde ich ihn zuerst kopieren und die Details überprüfen. Es ist Open Sans Regular 20, und ich kann es einfach noch einmal duplizieren , es dann hier ablegen und den Inhalt so hinzufügen. Dann ist das im stmlTag ein Absatz, also ändere ich ihn in P und jetzt sind die Werte wieder open sans regular Lassen Sie uns sie so gestalten, dass die Typografie offen ohne 20 ist und die Größe normal ist, regulär bedeutet normal Und hier ist der Fall standardmäßig so. Okay, jetzt haben wir nur noch CTA , was wir brauchen, um es zur Mitte hinzuzufügen Um es zur Mitte hinzuzufügen, versuchen wir, auf den Container zu klicken und dann auf den Container, machen wir es so, als würden wir die Mitte rechtfertigen Wenn ich das mache und in die Mitte komme , wird das nicht funktionieren. Jetzt können wir diesen Inhalt in den Container einfügen . Klicken Sie auf Element hinzufügen und erstellen Sie einen Container wie diesen Lassen Sie uns dann all diese Details entfernen und den Rand auf Null und die Polsterung auf Null setzen Dann werde ich all diese Inhalte so in diesen Container legen diese Inhalte so in diesen Container Jetzt wähle ich diesen Container aus. Jetzt gehe ich zu Advance und hier in Margin, es als Px oder Fixel Ich klicke einfach darauf und klicke auf das Bleistiftsymbol. Dann füge ich Margin als Auto hinzu und füge dann für den unteren Teil so automatisch hinzu. Wenn ich das mache, geht es in die Mitte. Im Grunde ist das, was hier passiert ist, als wir an der Spitze waren Otto, lassen Sie uns das unterste Motto streichen. Als wir oben bei Otto waren, sich der Raum zwischen dem Menü und füllte sich der Raum zwischen dem Menü und dem CTA, bis der CTA-Bereich den unteren Rand erreichte Und wenn wir Otto nach unten hinzufügen, füllt sich dieser Behälter von unten Also haben wir von oben nach unten gezogen und von unten nach oben gezogen, sodass dieser Inhalt in den Mittelpunkt gerückt ist. Okay, und als Nächstes müssen wir eine Schaltfläche hinzufügen, wir müssen diese Schaltfläche hinzufügen. Also lass es uns hinzufügen. Ich klicke darauf, um das Element hinzuzufügen, und hier suche ich, und hier haben wir eine Menge Schaltflächen, aber momentan nehmen wir diese einfache Schaltfläche und fügen sie hier ein. Dann klicke ich auf dieses Stiftsymbol und hier ändern wir zuerst den Text. Lassen Sie uns diesen Text kopieren, und die Texteigenschaften sind geöffnet und symbolisch. Fügen wir den Text hier hinzu, und derzeit ist der Link ein Hashtag, weil wir keinen Link haben Dann klicke ich auf Estyle und in der Typografie auf Estyle, die Schriftfamilie ist Open Sans 20 und ich sehe, dass die restlichen Details halbfett sind, und dann ist die und Okay. Jetzt müssen wir die Hintergrundfarbe ändern, also schiebe den Hintergrund und kopiere die Farbe, dann komm her. Und lass uns die Hintergrundfarbe herausfinden. Wo ist die Hintergrundfarbe? Okay. Bei Textschatten haben wir Farbe als Grün, aber wir machen sie rot, und hier fügen wir Farbe als Weiß hinzu, und dann fügen wir Farbe als Schwarz hinzu. Wir decken den Text ab, der schwarz ist. Und fürs Erste lassen wir es so. Dann müssen wir den Abstand zwischen dem Text und dem Rand der Schaltfläche hinzufügen den Abstand zwischen dem . Es ist 16 und hier haben wir 20. Es ist eine Polsterung der 16 oben und unten und der 20 links und rechts Also lass uns das auch machen. Klicken Sie einfach hier und lassen Sie uns die Verknüpfung zwischen den Werten aufheben und die obere Polsterung nicht wie folgt auf 60, 16, rechts, 20, unten, 16 rechts, 20, unten, 16 und rechts 20 festlegen Dann legen wir die Position als Mittelpunkt fest. Okay. Jetzt sieht es gut aus. Die Teile sind also zu eng, also müssen wir das Pad hinzufügen, bevor wir das Pad hineinlegen. Mal sehen, ob der Button eine abgerundete Ecke hat. Schauen wir uns den Knopf an. Tatsächlich hat diese Schaltfläche Null als Eckenradius, sodass wir keinen Eckenradius hinzufügen müssen Lassen Sie uns das Objekt in der Zwischengröße sehen, es ist 15 und auf der Schaltfläche auf der Schaltfläche ist es 20, und der Rest ist 15. Derzeit ist das also ein Container. In diesem Container haben wir die Überschriften und die Schaltfläche. Beim Layout überlasse ich also einfach den Container und das Layout. Stellen Sie die Lückenzeile auf 15 und fügen Sie einfach 15 als Zwischengröße hinzu. Und hier ist die Schaltfläche 220, also müssen wir weitere fünf hinzufügen. Um weitere fünf hinzuzufügen, klicke ich auf die Schaltfläche und gehe zu Erweitert und klicke zusammen auf den Tintenwert, und oben füge ich fünf hinzu, und es sind nur 220 und ein anderes Objekt hat eine Zwischengröße von 15. Okay, so weit, so gut. Und lass es uns im vollen Design sehen. Anzeigen sehen so aus. Und wenn wir das Figma-Design sehen, schauen wir es uns im Ansichtsmodus an und es sieht so aus Es befindet sich auf der eigentlichen Website und wir können auf diese Vorschauänderungen klicken und es in einem neuen Fenster öffnen Auf der Website sieht es so aus, und das ist das Figma-Design Das Einzige im Figma-Design ist, die Homepage rot ist, aber hier ist der Link zum Homepage-Startmenü weiß Um das Problem zu beheben, muss ich dieses Home-Menü als aktuelle Seite hinzufügen , denn wenn wir zum Design gehen und hier klicken, dann auf Stil klicken, um den Menüstil zu überprüfen, und wenn wir auf Aktiv klicken , meinen wir die ausgewählte Seite oder aktiv die aktuelle Seite Die aktuelle Seiten-Textfarbe ist rot, aber hier fügen wir nur die Dum-URL hinzu, wir sind nur beim Hashtag Fügen wir also die URL der Feldseite hinzu. Also gehe ich einfach zum WordPress-Dashboard und hier gehen wir zu Darstellung und Menüs. den Menüs haben wir dieses Hero One-Menü und auf der Homepage haben wir nur einen benutzerdefinierten Link. Aber bei Seiten klicke ich auf E. Die Seite wird also noch nicht angezeigt. Um das Problem zu beheben, muss ich diesen Heldenbereich veröffentlichen. Klicken wir auf „Veröffentlichen und live hier, wo die Seite veröffentlicht wurde“, und gehen wir erneut zum Dashboard und gehen zu „Aussehen, tut mir leid, nicht Aussehen“. s Erscheinungsmenüs Menüs hier auf Seiten, ich klicke auf VUL und hier auf unsere Seite Hero One Ich überprüfe es einfach und klicke auf Zum Menü hinzufügen und es wurde gerade hinzugefügt, also werde ich es hier platzieren, dann entferne ich diesen Homepage-Link und hier, klicke hier und lass diesen Hero in Home umbenennen Klicken Sie auf Menü speichern. Schauen wir uns jetzt die Seite an, klicken auf das Symbol, um eine Vorschau anzuzeigen, und jetzt wird der aktive Link angezeigt weil wir uns jetzt auf der Hero One-Seite befinden, und wir fügen einfach Hero One-Seite als Startseite dieses Menüs hinzu. Okay, lass uns mit dem Design der nächsten Helden-Sektion fortfahren Falls du irgendwelche Zweifel oder Probleme hattest, wirst du das klar verstehen, wenn du mit den nächsten Lektionen übst. 84. 0112 0111 Design 01 Hero Section Teil 03: Hallo zusammen, wir haben die Hero-Seite erfolgreich gestaltet. Lassen Sie uns nun die Reaktionsfähigkeit von Mobilgeräten korrigieren und Animationen hinzufügen Beginnen wir mit der Optimierung dieses Heldenbereichs für Mobiltelefone In Element of Editor haben wir die Möglichkeit, die Tablet- und Mobilversion der Website wie folgt anzuzeigen . Wenn wir zum Tablet gehen, ist das Design in Ordnung, aber das Menü wird nicht angezeigt. Wenn wir also zur Tablet-Version wechseln , indem wir hier klicken, wird unsere Website so aussehen, aber wir können das viel besser machen. Also lasst uns anfangen, sie zu reparieren. Also klicke ich auf den Hauptcontainer. Dann lass uns zu Advance gehen. Im Voraus haben wir das Padding mit 140 geschrieben. Das Problem ist am besten für die Desktop-Version, aber auf dem Tablet sieht es nicht gut Lass uns das 60 so machen. Aber wenn ich 60 hinzufüge, hat sich alles auf 60 geändert, aber wir brauchen nicht, dass alles 60 ist. Ich klicke zusammen auf diesen Linkwert, das Symbol und lass uns den oberen Pass 20 und den rechten als 60 hinzufügen. Dann auch links so 60, das ist viel besser als zuvor. Wenn wir dann im Menü nachschauen, wird es nicht angezeigt. Also lass es uns reparieren. Ich klicke einfach auf das Stiftsymbol in diesem WordPress-Menü, um es zu bearbeiten. Wenn ich dann runtergehe, kann ich dieses Handy im Dropdown sehen. Jetzt sind wir bei der Tablet-Porträt-Version. Hier werde ich voll mit klicken und wenn ich es jetzt ankreuze, wird es so aussehen und das ist viel besser als zuvor Dann können wir hier das Hamburger-Symbol haben. Also hier ist dieses Standardsymbol Hamburger, aber seine Farbe ist schwarz, also lassen Sie uns die Farbe ändern Um die Farbe zu ändern, müssen wir zu den IE Krawatten gehen Hier haben wir die Gesamttaste und lassen Sie uns die Farbe der Umschaltfläche auf Weiß ändern Wenn ich es jetzt überprüfe, ist es weiß und wir können die Größe ändern Machen wir es wie 36 oder 35, und dann klicke ich auf sie auf Ha, lass uns die Farbe in diese rote Farbe ändern. Ich klicke auf diese Farbunschärfe und lass uns diese rote Farbe wie diese bekommen Jetzt aber wenn es rot wird und hier sieht es aus. Jetzt können wir hier auch diese Farbe ändern. Lassen Sie uns dazu die Farbe ändern, ich klicke im Normalfall auf Dropdown auf Dropdown, lass uns die Geschmacksfarbe auf Schwarz setzen. Dann wird die Hintergrundfarbe weiß sein, lassen Sie uns dieselben Farben beibehalten. Um das zu tun, werde ich die Textfarbe auf Weiß ändern. Dann werde ich die Hintergrundfarbe entfernen, lassen Sie uns sie so entfernen. Aber wenn wir das tun, sieht das Design nicht gut Fügen wir also die Hintergrundfarbe Weiß hinzu und machen wir die Testfarbe Schwarz. Nur unterwegs und aktiv, lassen Sie uns die Testfarbe als rote Farbe festlegen. Klicken Sie auf den Farbmusterbildschirm und klicken Sie so, dann lassen Sie das Rot einfärben Jetzt sieht es so aus. Lass uns die Hintergrundfarbe nicht hinzufügen. Lassen Sie uns die Hintergrundfarbe weiß beibehalten. Aber eine Hintergrundfarbe zu haben, sieht gut aus. Lass es uns wie eine helle Aschefarbe wie diese machen. El ist gut. Jetzt aktiv, lassen Sie uns aktive Linkfarbe auf diese rote Farbe setzen , um hier zu klicken und lassen Sie es so und jetzt gut machen. Außerdem müssen wir die aktive Hintergrundfarbe als Aschefarbe auswählen . Lass uns das auch machen, so. Okay. Jetzt können wir horizontale Polsterung hinzufügen Wenn ich horizontale Polsterung hinzufüge, machen wir es wie zwei, wir fügen Polsterung zur horizontalen Seite hinzu, und wenn ich vertikale Polsterung hinzufüge, können wir die Größe dazwischen ändern Lass uns 15 draus machen. Okay, so weit, so gut. Und hier in der Ferne sollten wir es bei Null belassen. Okay, jetzt haben wir ein perfekt funktionierendes Menü und gehen wir zu diesem Abschnitt. Also hier, dieser Text ist okay, aber wir können die Textgröße dieser Überschrift minimieren. Klicken wir also auf dieses Stiftsymbol und gehen wir zum E-Stil und hier klicken wir auf Typografie und ändern wir die Textgröße auf etwa 50. Okay, perfekt. Wenn wir Änderungen an der Tablet-Version vornehmen, hat dies keine Auswirkungen auf den Desktop. Wenn ich auf den Desktop klicke, sind die Textstile identisch, und wenn wir zum Tablet wechseln, wird es geändert, weil wir es ändern, um es klarer zu machen. Wenn ich hier auf links klicke, geht dieser Text nach links. Aber in der Desktop-Version ist es in der Mitte. In der Tablet-Version ist es links. Auch wenn Sie zur Tablet-Version gehen, werden Sie sehen, dass Sie hier Änderungen vornehmen können. Hier ist es derzeit auf dem Tablet. Wenn ich hier klicke, geht es zum Desktop und wenn wir es von hier aus machen, kann ich das ändern. Das nennt man mobile Reaktionsfähigkeit. Jetzt können wir loslegen. Dann klicke ich hier auf die mobile Patriot-Version, lassen Sie uns auch diese Details ändern Klicken Sie auf den Container. Da wir die mobile Vorschau so ändern können, aber lassen wir es so, okay, jetzt klicke ich auf den Container und hier haben wir die Abstände 60, 60. Lass uns 15 draus machen. Ich klicke zusammen auf Wert verknüpfen. Ich kann den Link mit dem Wert entfernen. Dann füge ich Toppass 20 hinzu, dann werden wir 2020 etwas größer sein. Lass uns 15 draus machen und dann werden wir 15 sein. Links werden 15 sein. Okay. Wenn ich dann das Menü überprüfe, funktioniert es einwandfrei, dann müssen wir diesen Text ändern, damit ein Klick auf diesen Stift zu den Stilen und zur Typografie Machen wir es wie 18, ändern wir die Größe auf 18. Dann ändern wir die Textgröße für die Überschrift auf „Zu klein 45 wäre hier perfekt . Ich denke, der Absatztext ist okay, wir müssen ihn nicht ändern, wir wollen, wir können ihn einfach auf 18 ändern. Aber das ist nicht notwendig. Ich werde es jedoch vorerst bei 18 belassen und wir können auch die Zeilenhöhe ändern wenn wir wollen, lassen Sie uns das so ändern. Okay. Eigentlich sollten wir es auf 1,5 setzen. Okay. Jetzt müssen wir die Schriftgröße dieser Schaltfläche ändern, auf die Schaltfläche klicken und zu Iteris gehen und hier mit der Typografie Schriftgröße auf nicht eins, zwei, drei einstellen Machen wir es so, als ob 16, 16 ist. Okay. Jetzt reparieren wir einfach die mobile Version und jetzt funktioniert sie perfekt in der Version. Jetzt müssen wir nur noch Animationen hinzufügen. Lassen Sie uns eine Animation hinzufügen. Um eine Animation hinzuzufügen, klicke ich auf Weiter und bei Weiter haben wir Bewegungseffekte. Ich klicke darauf und werde vorerst den Icroolineffekt und das Mouset verwenden, weil das nur eine Helden-Sektion ist Lassen Sie uns also die Eingangsanimation ändern . Und gerade sind wir auf der Speisekarte. Also das Menü, lassen Sie uns das Menü als Slide Din wie folgt gestalten . Dann fügen wir einen Low-To-Motion-Effekt wie Folie DN hinzu, links so. Dann haben wir hier dieses Live-Coaching für Leistungsträger, klicken Sie darauf und gehen Sie zu Advance, dann klicken Sie auf Bewegungseffekt und hier ändern wir es zu Es gibt viele Animationen, aber lassen Sie uns einige davon hinzufügen Außerdem können wir die Animationsdauer und die Verzögerung der Animation hinzufügen , was bedeutet, wenn wir etwa eintausendtausend Millisekunden hinzufügen etwa eintausendtausend Millisekunden Ich werde 1 Sekunde oder 1.000 Millisekunden warten Millisekunden Dann gehen wir zum Head-and-Adve-Motion-Effekt. Dann lässt er es hüpfen, gebunden ist alles okay A lassen Sie uns sie dem Design hinzufügen. Swing Swing ist nicht gut, wenn man nach unten fährt. Aber viele Animationen sind nicht professionell und wirken sich auf die Ladegeschwindigkeit der Website aus, aber das ist nur zum Lernen und zum Spaß, also fügen wir diese Animationen Findet okay. Klicken Sie nun auf die Änderung der Vorschau, um zu sehen , wie die Animation funktioniert. Ja, es ist Arbeit. Und ja, so fügen wir Animationen hinzu. Jetzt müssen wir nur noch auf Veröffentlichen klicken und es wird auf der Live-Website verfügbar sein. 85. 0113 Design 02 Hero-Abschnitt Teil 01: Hallo, alle zusammen. Jetzt ist es an der Zeit, diesen Heldenbereich zu entwerfen. Also lass es uns tun. Zuerst gehe ich zum WordPress-Dashboard. Hier fahre ich mit der Maus über dieses neue und klicke auf die Seite. Dies ist eine Abkürzung, um eine neue Seite zu erstellen, und hier füge ich den Titel als Held zwei Dann klicke ich darauf mit dem Element oder dem Button Okay. Jetzt haben wir hier die Elementor-Seite und jetzt klicken wir auf diese Leerraumeinstellung und hier ändern wir das Seitenlayout auf Elemento Canvas Okay. Jetzt haben wir eine saubere Leinwand und von hier aus müssen wir zuerst diesen Hintergrund erstellen. Um diesen Hintergrund zu erstellen, müssen wir einen Container hinzufügen, hier klicken und auf Plex-Box klicken und dann auf diesen Container klicken. Dann schauen wir mal, die Breite ist 1.440, die Höhe ist 700 Lassen Sie uns diese Details hinzufügen. Eigentlich füge ich für die Breite die volle Breite hinzu, dann füge ich für die mittlere Höhe 700 hinzu. Jetzt muss ich den Hintergrund hinzufügen. Dazu klicke ich auf den I-Stil und dann auf Classic und hier müssen wir das Bild hinzufügen. Lass uns hierher gehen und jetzt den BG isolieren. Dann klicke ich einfach auf Export und lass es uns 1.5 machen, und lass es uns GPG machen, dann klicke ich auf Export, groß Jetzt gehen wir zu tiny png.com und klicken hier, dann Rag Image, es hat Jetzt sind es nur noch 120 Kilobyte. Jetzt drücke ich einfach auf JPG und es wird heruntergeladen und dann gehe ich hierher, klicke auf dieses Bild und lege es einfach so ab Dann können wir alten Text hinzufügen. Fügen wir alten Text wie 02g hinzu. Tatsächlich wird dieser alte Text für SEO-Zwecke verwendet oder wenn etwas mit diesem Bild passiert ist oder dieses Bild nicht geladen wird, wird dieser ALT-Text auf der Website angezeigt Ich werde auf Concealeg klicken und dann lass uns die Einstellung ändern. Bildauflösung ist also voll, die Position wird in der Mitte angezeigt, dann ist die Befestigung die Standardeinstellung, Wiederholung, keine Wiederholung, Displaygröße wie hier Sehen wir uns nun das Design an. Ich werde so aussehen. Jetzt müssen wir dieses Menü hinzufügen. Bevor wir das Menü hinzufügen, müssen wir einen Rand hinzufügen. Denn wenn wir auf Figma und hier auf den Rahmen klicken, ist es eine 140 als horizontale Polsterung Fügen wir hinzu, gehen wir weiter und am Rand machen wir es Eigentlich ist es kein Rand, es ist Polsterung. rechte Polsterung beträgt 140 und die linke Polsterung 40. Okay. Fügen wir jetzt dieses Logo hinzu. Das Logo ist meine Finanzen. Ich klicke einfach darauf und hier sind die Details. Gehen wir zu dem Element und klicken wir hier, dann einfach eine Überschrift per Drag-and-Drop und lassen Sie uns die Typografie überprüfen Klicken Sie auf den Text und die Typografie ist Georgia Regular 45 und die Füllfarbe ist flach Lassen Sie uns diese Details erstellen, klicken Sie auf die Überschrift, klicken Sie auf Stil und gehen Sie dann zur Typografie Die Schrift ist Georgia GE OR, hier haben wir Georgia, die Größe ist 45 und die Breite ist, lassen Sie uns die Breite noch einmal mit dieser normalen Marke mit einer normalen Schrift sehen dieser normalen Marke mit einer normalen Jetzt ist die Schriftfarbe schwarz. Lassen Sie uns nun diese Panzer wie folgt kopieren, dann hierher kommen, dann zu Inhalt gehen, Text so einfügen und er wird sich ändern. Wenn es sich nicht ändert, drücken Sie einfach die Eingabetaste und entfernen Sie die Eingabetaste. Es wird sich so ändern, was wir dann tun müssen, ist, dass wir oben 25 hinzufügen müssen. Bevor wir es hinzufügen, erstellen wir das Menü und die Kontakte-Schaltfläche, dann können wir das Hinzufügen von oben und andere Dinge hinzufügen. Jetzt müssen wir das Menü erstellen. Klicken Sie hier und suchen Sie im Menü und lassen Sie uns das Wordpress-Menü aufrufen, formulieren Sie es so. Jetzt müssen wir auf Bearbeiten klicken und hier haben wir das Hero One-Menü und wir müssen ein Menü für diesen M-Finer erstellen Lass es uns zuerst machen, ich klicke auf den Menübildschirm und es wird zum Menübildschirm weitergeleitet und hier klicke ich auf. Neues Menü erstellen. Nennen wir das als Hero Two-Menü, und dann klicke ich auf. Männer erstellen Okay. Jetzt wähle ich hier das Hero Two-Menü aus und klicke auf Auswählen. Dann können wir hier zuerst die Links als Homepage hinzufügen, wir müssen diese Hero Two-Seite verwenden. Um das zu tun, muss ich das veröffentlichen. Ich klicke einfach auf Veröffentlichen und jetzt komme ich zum Menü und wir müssen das unterdrücken der Seite Und hier haben wir 02, klicken Sie darauf und fügen Sie es zum Menü hinzu Dann werde ich hier klicken und das Navigationslabel in Formular ändern. Okay, jetzt müssen wir einen benutzerdefinierten Link als URL hinzufügen , ich sage Hashtag. Und dann sehen wir uns den Menüpunkt an, erste Menüpunkt ist Service, Copy, Prestige, klicken Sie auf AT-Menü. Dann überprüfen wir den zweiten , seinen Standort, sein Prestige, Hashtag zum Menü, dann klicken wir auf den Hashtag zur URL und klicken auf zwei Menüs, dann auf eine Aufgabe oder auf einen Hashtag, klicken Sie auf „Zum Okay, unser Menü ist fertig und Sie werden sehen, dass hier ein Kontakt-Button ist Das ist also eine separate Schaltfläche, und wir werden sie mithilfe des Button-Elements erstellen und sie wird nicht in dieses Menü aufgenommen. Also, jetzt klicke ich auf Speichern und gehe hierher, dann muss ich die Hero Two-Seite anfordern. Jetzt klicke ich auf das Menü und stelle im Inhalt das Menü als Hero Two-Menü ein. Es sah so aus, dann müssen wir nur noch den E-Stil hinzufügen. Zuerst gehe ich zu Advance und füge Rand und Polsterung als Null Dann lass uns das Detail herausfinden. Zunächst haben wir Typografie wie Vertica 16 Regular. Lassen Sie uns diese Details hinzufügen. Klicken Sie auf Estyle Typography, eine Familie wird Vertica sein. Ich glaube, es ist Vertica und die Größe Dann mit diesem regulären Mittelwert normal in elementar. Okay. Jetzt wird die Transformation wieder höher sein. Okay, gut. Dann lassen Sie uns die Zwischengröße überprüfen. Die Zwischengröße ist 25, um die Zwischengröße zu überprüfen. Mac können Sie ein Element auswählen und auf Alle drücken Auf dem Mac können Sie ein Element auswählen und auf Alle drücken und dann den Mauszeiger über das nächste Objekt bewegen In Windows können Sie dasselbe tun. Wenn Sie die Taste drücken, können Sie den Abstand oder die Polsterung sehen Okay, jetzt gehe ich hierher und dann machen wir den Abstand dazwischen zu 25. Jetzt gehe ich zu Hover in Hover sollte die Farbe ändern. Die Farbe ist also schwarz und die Schrift ist fett. Lass uns versuchen, es zu schaffen. Da die Farbe nicht weiß ist, Farbe ist schwarz, Zeiger brauchen wir die Zeiger nicht Lass uns schwingen. Die Farbe ist schwarz. Und auch im Normalfall müssen wir die Farbe auf Schwarz und so einstellen. Jetzt haben wir ein Problem, weil wir hier keine Möglichkeit haben , diese Schrift fett zu machen, während sie schwebt, also können wir es nur von hier aus tun, wie hier hinzufügen, aber wenn wir es tun, wirkt es sich auf das aus, also um das Problem zu beheben, müssen wir benutzerdefiniertes CSS hinzufügen, lassen Sie uns das tun, nachdem wir dieses Design fertiggestellt haben lassen Sie uns das tun, nachdem wir dieses Design fertiggestellt weil es ein bisschen schwierig ist und lassen Sie uns mit dem Design fortfahren, den Rest der Website. Jetzt müssen wir dies zu einer horizontalen Linie oder einer einzelnen Linie hinzufügen , um das zu tun Ich werde hier klicken und einen Container wie diesen. Dann gehen wir zum Container. Ich werde den Behälter damit voll machen. Lassen Sie uns dann im Voraus den Rand und die Polsterung entfernen. Dann lege ich sie einfach in diesen Behälter. Jetzt ist es im Container und klicke auf den Container, gehe zum Layout und klicke auf Richtung als roh horizontal so und es sieht ziemlich gut aus, dann müssen wir hier eine Schaltfläche hinzufügen. Um die Schaltfläche hinzuzufügen, klicken Sie hier. Schaltfläche „Suchen“. Okay, hier haben wir viele Knöpfe, aber wir brauchen nur einen einfachen Knopf wie diesen, leg ihn hier hin. Nicht die Außenseite des Containers drinnen. Ja, wir können es von hier aus so hinzufügen. Okay. Jetzt müssen wir den Stil dieser Schaltfläche ändern. Lassen Sie uns den aktuellen Stil herausfinden, klicken Sie auf die Schaltfläche Und hier haben wir einen Eckradius von 60. Machen wir 60 daraus und die Farbe ist schwarz. Machen wir sie zuerst und hier gehe ich zum E-Stil und dem Randradius, mache daraus 60 und die Farbe ist schwarz. Hier ist die Farbe Schwarz und welchen Text können wir kopieren Und komm her und gehe zum Inhalt. Und hier, ändere, klicke hier, um uns zu kontaktieren und gehe zu Estyle In Estyle, wir können die Typografie ändern Schauen wir uns also die Typografie an. Typografie ist Vertica Regular 16. Also lass es uns schaffen. Hier, Schriftfamilien Vertica 16. Normal und es ist in Großbuchstaben. Lassen Sie uns Großbuchstaben umwandeln. Jetzt müssen wir nur noch Polsterung hinzufügen, auf den Text klicken und Alt drücken Wenn Sie Alt drücken, sehen Sie den oberen und unteren Abstand als 16 und den linken und rechten Bereich als 37. Lass es uns machen Gehen Sie weiter nach vorne, um die Marge zu erhöhen und als 16 aufzustocken, nicht hier. Entschuldigung, nicht hier. Mach es einfach so wie es ist. Ich gehe einfach zum Stil. Lassen Sie uns das in Großbuchstaben umwandeln und schon ist es da, es ist hier. obere Muster ist 16 und das rechte Muster ist 16, das rechte Muster ist 37 37, untere 16, 37 ist das linke. Jetzt haben wir die perfekte Schaltfläche und lassen uns die Hover-Details auf die normale Änderung beim Hover ändern. Lassen Sie uns die Textfarbe auf Schwarz und die Farbe auf Weiß wie folgt ändern und die Farbe auf Weiß wie folgt Sieht gut aus. Jetzt müssen wir eine Polsterung hinzufügen Lassen Sie uns die Polsterung überprüfen. Wählen Sie hier all diese Dinge aus. Dann sehen wir uns die Polsterung ab 25 fügen dann die obere Polsterung oder den oberen Rand als Wählen wir zuerst den Container und dann hier den oberen Rand mit 25 aus. In Ordnung. Jetzt können wir zu Lay gehen und hier können wir Objekte zentrieren lassen und die gesamte Masse zum Mittelpunkt machen. Okay. In der nächsten Lektion fügen wir nun den aktiven Text fett hinzu. Um das zu tun, müssen wir CSS verwenden, und das ist ziemlich einfach. Lass uns das machen. 86. 0114 Design 02 Hero-Abschnitt Teil 02: Okay, jetzt lass uns weitermachen. Wenn ich hier klicke und das Design überprüfe, sieht es so aus, aber dafür müssen wir es perfekt ausrichten. Ich klicke auf den Container und dann auf den Container, um Ich klicke auf den Container und dann auf den Container, Inhalt mit Leerzeichen zu begründen. Wenn ich es dann noch einmal überprüfe, wird es völlig in Ordnung aussehen. Okay. Als Nächstes müssen wir diesen CtA-Abschnitt und dieses Bild erstellen, dafür werde ich den neuen Container erstellen, also klicken wir hier und Container, fügen ihn so und dann setzen wir ihn Lass es uns hier unten so platzieren. Nein hier. Lass es uns hier schaffen, in Ordnung. Jetzt ist es da, dann gehe ich zu Advance und entferne das Designmaterial. Lass uns die Lücke auf Null setzen. Und zuerst müssen wir diese Überschrift, den Absatz mit der Unterüberschrift und die Schaltfläche erstellen . Um das zu tun, werde ich hierher kommen und auf Element hinzufügen klicken und dann die Überschrift hinzufügen. Lassen Sie uns diese Details hinzufügen. Zunächst sind wir bei My Finance willkommen. Lass es uns so kopieren. Dann geh zum Stil. Die Farbe war schwarz. Und sehen wir uns die Typografie Georgia an, regulär 55. Machen wir 55 Schriften, Schriftfamilie ist Gott Und was ist die Art und Weise, wie Gewicht normal ist. Okay, hier haben wir ein Problem der kleinen Version des Desktops. Lassen Sie uns das beheben, bevor wir weitermachen, um es zu beheben, was wir tun können. Lass uns hier klicken und die Lücken als Null entfernen, und ich denke, von hier aus ist es okay und lassen die Größe so überprüfen und ja, es passt perfekt. Okay. Lassen Sie uns die Arbeit fortsetzen, und hier füge ich die Überschrift hinzu, dann müssen wir diesen Absatz für den Inhalt hinzufügen diesen Absatz für den Ich werde diesen Teil einfach duplizieren und fügen wir die Panzer hinzu, und einen Stil, wir haben Vatica Regular Hier, Vatica 25 regulär. Okay. Nun, dann müssen wir diese beiden Knöpfe hinzufügen. Bevor wir also die Schaltfläche hinzufügen, überprüfen wir die Größe der Ziffern. Es ist 20. Lass uns das zwischen zwei Größen machen. Klicken Sie auf den Container und hier wird die Zeilengröße zwei bis 21 sein. Ich klicke so zusammen auf Wert verknüpfen, dann machen wir 20 draus. Fügen wir nun die Schaltfläche hinzu. Eigentlich können wir diese Schaltfläche bekommen, aber lassen Sie uns sie von Grund auf neu erstellen. Ich suche nach einer Schaltfläche und füge sie dann so ein. Dann lass uns die Details herausfinden. Hier ist der Text Hel VaticRegular, 20, und dazwischen die Größen 18, 18, 35, 35. Lass es uns schaffen. Lassen Sie uns zuerst den Stil kopieren, dann gehen wir zum Stil über, Typografie, ist 20, Vertica Ist es 20? Ja, es sind 20 und es ist normal. Dann transformiere ich Ava-Gas wenn ich zum Figma-Design gehe und Alt drücke, erhalten wir 18 als oberen und unteren Rand oder unteren Rand, dann 35 als linke und rechte Polsterung dann 35 als linke und rechte Lassen Sie uns diese Details hinzufügen. Nicht hier. Sicher, im E-Style wird die Polsterung so sein , dass Moten mit 18 geöffnet wird, richtig als 35, 18, 35. Jetzt werden die abgerundeten Ecken 60 sein. Der Wasserradius wird 60 sein und die Farbe ist schwarz. Diese Farbe wird schwarz sein und auf unserer Seite ändern wir die Textfarbe auf Schwarz und die Hintergrundfarbe auf Weiß wie folgt. Okay, gut. Jetzt muss ich diese Schaltfläche für weitere Informationen erstellen. Lass es uns machen. Zuerst kopiere ich diesen Learn More Text. Dann können wir diese Schaltfläche einfach wie folgt dubligieren, auf Condo bligate klicken und hier werde ich den Text ändern um mehr zu erfahren und zum Stil im E-Stil übergehen, ich werde diese Farbe auf 0% Sichtbarkeit ändern und die Textfarbe schwarz ändern Dann muss ich den Rahmen hinzufügen, um den Rahmen hinzuzufügen, ich werde auf den Rahmentyp durchgehend klicken Und sehen wir uns hier die Rahmengröße an, also ist die Rahmengröße eins. Machen wir es so, dass der Rand eins sein wird. Okay. Wenn wir jetzt das Design überprüfen, wird es so aussehen, und jetzt müssen wir die Linie horizontal machen. Dazu müssen wir einen neuen Container erstellen und ihn so platzieren. Dann fügen wir die beiden Schaltflächen wie folgt zu diesem Container hinzu und er befindet sich innerhalb des Containers Klicken Sie auf den Container und ändern die Richtung auf horizontal. Eigentlich müssen wir die Position der Schaltfläche so ändern . Okay. Und sehen wir uns die Größe dazwischen an, klicken Sie auf die Schaltfläche, drücken Sie alle. Es ist 20. Ich glaube schon, es sind 20. Lass uns sehen. Ja, es sind 20. Fügen wir die Spaltenlücke plus zwei hinzu. Okay. Okay. So weit, so gut. Jetzt müssen wir zum Design gehen. Wir müssen hier etwas Platz hinzufügen. Das Leerzeichen sollte 30 sein, derzeit sind es 220, also klicke ich hier und setze auf Nicht im Voraus stylen. Ich füge einen Rand als oberen Rand hinzu, also zehn. Ja. Wenn wir die Zehn hinzufügen, erhalten wir einen Abstand. Jetzt muss ich tatsächlich, wir müssen diesen Container so in den Hauptcontainer stellen . Jetzt müssen wir einfach hier klicken und jetzt gehen wir weiter und am Rand werde ich auf diesen Stift klicken. Ich kann oben automatisch sein und unten wird so automatisch sein. Es ist einfach zum Mittelpunkt geworden und es wird so aussehen. Hier ist das Problem. Wenn wir versuchen, das Design zu verbessern , dann komm her. Dieser ist nicht hergekommen, das ist also das Problem. Mal sehen, was hier in diesem Container passiert ist. Wir haben den Speicherplatz hinzugefügt und ihn sogar entfernt. Wenn wir es entfernen, ändert es sich einfach. Eigentlich müssen wir Space Bitten hinzufügen. Lass es uns versuchen. Ja, wir müssen Leerzeichen hinzufügen, nicht Leerzeichen, kein Leerzeichen . Dann wird es gut aussehen und gut funktionieren Okay. Also hier ist unser Hauptcontainer, und wir müssen hier ein Bild hinzufügen, und seine Richtung ist vertikal, aber wir brauchen einen Container mit horizontaler Richtung. Um diesen zu erstellen, klicke ich einfach auf Neuer Container und füge den Container hinzu. Dann lass uns das ganze Zeug hier schwimmen und es mit Okay voll machen. Jetzt stelle ich die Richtung auf horizontal ein. Was ich dann tun kann, ist, nein, es ist nicht drin, ich werde es hier hinstellen, dann nicht hier. Hier, dann füge ich diesen Container in diesen Container ein. Sag es einfach so. Okay. Okay. Jetzt müssen wir wieder die automatische Layoutfunktion hinzufügen. Wir müssen so Auto zum Rand hinzufügen, oben wird automatisch sein, unten wird automatisch sein Okay, jetzt können wir Bild hinzufügen. Das ist also horizontal, und lassen Sie uns ein Bild hinzufügen, um ein Bild hinzuzufügen, klicken Sie hier und suchen Sie nach Bild und lassen Sie uns ein Bild wie dieses hinzufügen. Okay. Übergeben Sie das Bild zuerst erneut , um es zu unterdrücken. Ich werde auf dieses Bild klicken Dies ist das Bild, klicken Sie darauf, wählen Sie das Bild und klicken Sie dann auf Exportieren. Wir benötigen es in PNG-Version, da dieses Bild keinen Hintergrund hat Dann klicke ich auf die Schaltfläche Exportieren und es wurde gerade heruntergeladen. Dann gehe zu Tiny PNG. Und füge es hier hinzu, optimiere es, klicke auf PNG, um es herunterzuladen, dann komm her, klicke hier, dann klicke auf das Bild und füge das Bild so hinzu. Dann klicke ich auf Auswählen. Okay, das Bild passe an und ich werde die Bildauflösung auf volle Auflösung umstellen. Jetzt müssen wir es so einstellen. Derzeit sieht das Bild so aus, aber es funktioniert jetzt nicht wenn Sie ein Website-Design wie dieses sehen, können Sie diesen Strukturbereich einfach verkleinern und verbessern. Jetzt müssen wir dieses Bild so einrichten. Um das zu tun, klicke ich auf das Bild und gehe dann im Voraus zur Größen-Ansicht über, ich setze es auf Grow. Jetzt wird es größer, dann muss ich es im Figma-Design in die Ecke stellen . Lass uns das machen Um das zu tun, vergleiche ich den Wert der Marge und füge die verbleibende Marge wie folgt Kein Rand übrig, wir müssen den rechten Rand hinzufügen und er sollte minus sein, was bedeutet, dass dieser Teil gesendet wird die Füllung des Hauptcontainers Lass uns okay sein. Wenn ich mehr mache, als wir brauchen, sehen wir diese Art von ICO-Bar, um es zu entfernen Wir können es einfach so machen. Es ist minus 140 und wenn wir jetzt das Design überprüfen, wird es so aussehen. Mein Bildschirm ist 24 Zoll groß. Deshalb sieht dieses Design so aus. Aber wenn wir es auf einem kleinen Gerät wie einem Laptop, Desktop oder einem anderen Gerät überprüfen , wird es so aussehen. Was ich jetzt tun werde, ist im nächsten Teil hinzuzufügen. Der Roboter ist also fertig, und jetzt müssen wir diesen Teil erstellen. Ich wähle es aus und seine Höhe ist 270. Also lass es uns machen. Klick hier. Dann klicke ich auf diese zusätzliche Sekunde, um einen neuen Container zu erstellen, und der Container ist eine direkte Spalte, und hier stelle ich ihn auf die volle Breite ein, dann entferne ich alle unnötigen Dinge wie diesen, dann wird die Mint-Höhe 270 sein. Okay, jetzt haben wir ein anderes Problem. Nehmen wir an, wir fügen die Überschrift zu diesem Container hinzu. Ich habe es in der linken oberen Ecke eingerichtet, aber wir haben hier einen Rand von 140 oder ein Pad von 140. Um es hinzuzufügen, muss ich hier klicken und zu Advance gehen. Dann muss ich das rechte Padin als 140 und das linke Padin als 140 hinzufügen als 140 und das linke Padin als 140 Jetzt ist es fertig, dann muss ich diesen Inhalt in den Mittelpunkt stellen Klicken Sie auf den Container und gehen Sie zum Layout im Layout. Ich werde dafür sorgen, dass es das Inhaltszentrum wie folgt rechtfertigt. Dann machen wir die Richtung so horizontal wie folgt. Machen wir es wieder zu einem Einzelpostenmittelpunkt, und hier setzen wir es mit einem Stern, rechtfertigen wir den Inhalt mit einem Stern. Okay. Jetzt hier, lassen Sie uns diesen Text überprüfen. Dieser Text ist Georgia Regular 45, können wir den Stil aus dieser Helden-Sektion nehmen Ich werde hier mit der rechten Maustaste klicken, kopieren, dann hierher kommen und diesen Stil mit der rechten Maustaste einfügen. Jetzt muss ich diese Schriftgröße wie folgt auf 45 ändern. Jetzt kann ich diesen Inhalt hinzufügen, ihn einfach kopieren und zum Inhalt gehen und ihn so einfügen. Dann müssen wir es hier in zwei Zeilen hinzufügen, ich füge Klammer R bedeutet Pause hinzu, dann schließe ich den Bagot und jetzt haben wir es in zwei Zeilen, genau wie hier Dann lass uns zum Estyle gehen. Lassen Sie uns Typografie hinzufügen. Fügen wir eine Linienhöhe hinzu, die mir gefällt. Das ist besser. Jetzt müssen wir diese drei Abschnitte hinzufügen. Lassen Sie uns diesen erstellen und dann können wir ihn duplizieren. Bevor wir das tun, müssen wir diese Farbe schwarz machen. Mal sehen, dass die Farbe schwarz ist, aber nicht dunkelschwarz. Also kopiere ich den Farbcode, komm her, gehe zu Eastile, klicke auf den klassischen Hintergrund und füge den Farbcode ein Dann klicke hier und ändere dann diese Farbe auf Weiß. Okay. Lassen Sie uns nun mit der Gestaltung dieser beiden Abschnitte beginnen. Also hier, ich klicke hier auf die Überschrift wie diese, dann lass uns den Inhalt kopieren. Lassen Sie uns nun überprüfen, ob die Typografie vaticRegular, 65 ist. Lass es uns machen. Lass uns hier klicken. Normalerweise müssen wir den Titel hier hinzufügen. Wenn wir ihn hier direkt hinzufügen, bekommen wir unnötiges Zeug. Also jetzt klicke ich hier Stil, Typografie, Schriftfamilie, Heaica 65, 65 und normal W ist regulär bedeutet normal. Okay. Jetzt ist die Farbe der Grund und jetzt müssen wir diese Erfahrung hinzufügen. Also hilf VaticaRegular 25. Wir können diesen Teil einfach so duplizieren, dann hier klicken und den Text hier hinzufügen Dann ändern wir diese Größe auf 25. Okay. Jetzt müssen wir diesen Abschnitt horizontal wie folgt hinzufügen. Um das zu tun, sehen wir uns zunächst die Größe des Elements an, das einladend ist, es ist 15. Also lass uns das machen. Sie dazu hier, klicken Sie auf Container und platzieren Sie einen Container wie diesen. Dann lass uns das Zeug so in diesen Behälter legen . Ja, es ist im Container, und hier werde ich diese Lücke entfernen und die Reihenlücke wird 15 oder 20 sein. Lass es uns noch einmal sehen. Es ist 15. Der Abstand ist 15 und es sollte ein Einzelpostenzentrum sein. Die Richtung ist vertikal der Spalte. Okay. Jetzt werde ich das zweimal duplizieren, duplizieren und erneut duplizieren. Fügen wir nun die anderen Details wie folgt hinzu. Ordnung. Jetzt haben wir ein anderes Problem. Lass es uns reparieren. Um das Problem zu beheben, erhöhen wir die Aufnahmegröße wie folgt. Dann können wir diese Größe verkleinern, damit sie so passt. Wir können es mit diesem, zwei und diesem machen, so. Was wir jetzt tun können, ist die Größe dazwischen zu überprüfen. Die Zwischengröße ist 57, es ist 57. Fügen wir 57 als Zwischengröße hinzu. Um es hinzuzufügen, müssen wir diesen Abschnitt in einen anderen Container einfügen . Klicken Sie hier und lassen Sie uns den Container hinzufügen. Lass uns das machen. Dann fügen wir diese drei Abschnitte in diesen Container ein. Zuerst füge ich diesen hinzu, dann diesen, dann diesen, aber es hat das Innere nicht hinzugefügt, also fügen wir es so in diesen ein, so wie hier. Okay, machen wir die Richtung horizontal. Und hier fügen wir die Spaltengrößen hinzu, 57. Okay. Lassen Sie uns diese Elementgrößen jetzt wieder wie folgt erhöhen. Und hier machen wir die gleiche Notiz hier, wählen diese aus und setzen sie so ein, ok und okay. Jetzt wählen wir den Hauptcontainer und klicken auf Leerzeichen oder wir können einfach die Spaltengröße 57 hinzufügen, wie hier, 57. Jetzt müssen wir hier die Zwischengröße überprüfen, wir haben sie als 116, aber hier können wir auf diesen Hauptcontainer klicken und zum Layout im Layout gehen, wir können auf Ipace between klicken Wenn wir es im Design überprüfen, wird es so aussehen Wenn wir es mit dem Originaldesign vergleichen, sieht es wirklich gut aus. Die Sache hier ist, dass wir eine kleine Linie haben. Also lass uns versuchen, es zu reparieren, ich gehe zum Heldenbereich und klicke hier. Dann wird der untere Rand des Bildes unten so weggelassen. Jetzt sollte es behoben sein. Lass uns sehen, lass uns sehen. Ja, es ist behoben und los geht's. Hier ist das endgültige Design der Website. Eigentlich müssen wir hier einen Abstand dazwischen setzen , dann wird es so aussehen. 87. 0114 Design Hero 2 Teil 2 Menü-Highlite: Hallo, alle zusammen. Jetzt müssen wir diese Menüelemente in ihrer Phase und in der aktiven Phase fett formatieren. Derzeit ist diese Startseite aktiv, was bedeutet, dass diese Homepage die Seite ist , auf der wir uns gerade befinden. Wenn wir also hier sind, müssen wir diesen Menüpunkt fett formatieren. Denn bei unserem Figma-Design ist es hier fett. Lassen Sie uns diese Funktionalität hinzufügen. Um das zu tun, werde ich hier klicken, um das Menü zu bearbeiten. Dann gehe ich zu Advance. Auf Advance haben wir einen Ort, an dem Sie benutzerdefiniertes CSS hinzufügen können. Wir werden nicht viel mehr über CSS sprechen, aber du kannst mehr über CSS erfahren , indem du dir Tutoris auf wscos.com ansiehst. Hier fügen wir CSS-Code Tutoris auf wscos.com ansiehst Hier fügen wir Wenn ich zum Design gehe und mit der rechten Maustaste auf den Menüpunkt klicke und auf Inspec werden Sie diese Art von STM-Tags sehen und Sie kennen bereits Element oder CSS verwenden, um die Website und CSS als Funktion oder Element namens Klasse wenn die aktuelle Seiten-URL dem Menüelement in Elemento entspricht, ist es ein aktives Elemento-Element. Wir sind gerade bei ATAC A Mean Ankatag. Wenn ich es markiere, kannst du sehen, dass die Homepage hervorgehoben sehen, dass die Wenn ich hier klicke und diesen Service-Menüpunkt oder diesen Service Ankatag ansehe, siehst du die Klasse, aber in dieser Klasse siehst du nicht die aktive Klasse des Elemento-Elements Jetzt kopiere ich es einfach und dann gehe ich hierher, drücke Punkt und füge das Element Element aktive Und hier werde ich die Schrift mit hinzufügen. Dies ist ein CSS-Stil, mit dem Schriften erstellt werden können, und in diesem Fall sollte er fett sein. Dann lasst uns wie wichtig angreifen und es dann veröffentlichen. Jetzt funktioniert es. Was hat dieser wichtige Tag bewirkt? Überschreibt meistens den aktuellen CSS-Code. Jetzt ist ein Teil fertig, dann müssen wir dieses Objekt aktivieren, wenn wir es aktivieren. Um das zu tun, werde ich auf dieses kleine Symbol klicken und dann auf eines dieser Elemente klicken, und jetzt muss ich die ULL für ungeordnete Liste finden, und dieses Menü ist eine Liste, und hier haben wir diese ID, aber wir können die ID von hier aus hinzufügen Lassen Sie uns eine klare ID hinzufügen. Um das im WordPress-Menü bearbeiten vorab zu tun, gehe ich zu Lay. Beim Layout können wir die CSS-ID oder CSS-Klassen hinzufügen und lassen uns einfach die CSS-ID wie das Hero-Menü hinzufügen, dann kopiere ich sie und gehe zu Advance und gehe zu benutzerdefiniertem CSS und füge hinzu, wie Herou und AA bedeuten Anker-Tag, und hier fügen wir H hinzu, aber, wie der Schrift-Tweet fett sein wird Ich kopiere es einfach und füge es so ein. Wenn ich es jetzt im Design überprüfe, sollte es hier funktionieren. Wir sollten ein Hashtag ohne Punkt für die CSS-Klasse und einen Hashtag für die CSS-ID hinzufügen Hashtag ohne Punkt für CSS-Klasse und einen Hashtag für die CSS-ID Sie können diese Eta auf der Website der W Three School überprüfen. Ich veröffentliche es und lass uns zum Design gehen und es wird so aussehen. Okay, jetzt haben wir das Teil erfolgreich erstellt und wir sehen uns in der nächsten Lektion. 88. 0115 hero 3 Design-Challenge: Wir haben diese beiden Pigma Hero-Designs erfolgreich in Elemento umgewandelt , und hier Jetzt ist es an der Zeit, dieses Figma Hero Three Design in Elemento umzuwandeln dieses Figma Hero Three Design Also spiel einfach damit herum und versuche es zu tun. Und in der nächsten Lektion werde ich es auch tun. 89. 0116 Design-Held 3 Teil 01: Hallo, alle zusammen. Jetzt müssen wir diesen Hero Three entwerfen. Also lass uns damit anfangen. Hier bin ich auf der Website, und hier gehe ich zur Seite und klicke auf Neu hinzufügen. Dann werde ich hier den Titel als 03 hinzufügen. Dann klicke auf Bearbeiten mit Element einer Sekunde. Es wird auf das Element oder den Editor umgeleitet und der Editor wurde geladen, dann klicke ich auf Seiteneinstellung und dann auf Seiteneinstellung, ich ändere einfach das Seitenlayout auf Element oder kann jetzt anfangen zu entwerfen ich muss zuerst die Höhe dieses Abschnitts herausfinden. Die Höhe ist 223, lassen Sie uns eine Plex-Box erstellen und ihre Richtung wird in der Richtungsspalte wie diese sein. Dann hier klicken, um zum Layoutbereich des Containers zu gehen. Und hier wird die Größe zwei, zwei, drei sein. Okay. Jetzt mache ich die Richtung horizontal. Dann muss ich im Voraus diese Polsterung hinzufügen. Der Abstand beträgt 140, wie ich bereits gesagt habe Wenn Sie auf einen Abschnitt in Figma klicken und Alt drücken, können Sie einen Leerraum zwischen dem Element sehen Hier haben wir 140. Lass es uns hier hinzufügen. Die Rechte wird 140 sein und die Linke wird 140 sein. Okay. Jetzt müssen wir als ersten Schritt dieses Logo hinzufügen. Wählen Sie das Logobild auf der Figma aus und klicken Sie auf Bild exportieren Machen wir es 1,5 Uhr morgens. Jetzt gehe ich hierher Und klicken Sie auf das Elementsymbol, und hier fügen wir das Bild wie dieses hinzu. Klicken Sie dann hier und ziehen Sie das Logo per Drag&Rob wie folgt. Wählen Sie es aus und stellen Sie es auf volle Größe ein. Okay, das Logo ist unscharf, um das Problem zu beheben Gehen wir hier hin und machen es auf die Größe von zwei X, und versuchen wir es mit K. Dann lassen Sie uns dieses Logo ersetzen Klicken Sie hier, klicken Sie hier, laden Sie dann dieses Logo wie folgt hoch und klicken Sie auf Verbergen, tatsächlich wird dieses Logo größer als der Abschnitt Mindesthöhe dieses Abschnitts ist also 223, aber jetzt ist er höher Lass uns auf das Logo klicken und zum Stil gehen. Dann lass uns auf dem Höhepunkt 2023 sein und dann lass uns 100 plus so machen . Jetzt müssen wir dieses Menü hinzufügen, um dieses Menü hinzuzufügen Wir müssen zuerst ein Menü erstellen, hier klicken und das Suchmenü der Suchleiste suchen und das Wordpress-Menü aufrufen. Leg es hier hin. Jetzt müssen wir hier das Menü hinzufügen, dazu werde ich auf den Menübildschirm klicken, hier erstellen wir ein neues Menü, klicken auf Menü erstellen, ein neues Menü erstellen. Dann fügen wir diese Details hinzu. Zuerst müssen wir diese Seite veröffentlichen , weil wir als Startseite für diesen Helden drei Seiten einrichten müssen. Okay, jetzt ist es veröffentlicht und hier muss ich diese Seite erneut unterdrücken Dann fügen wir den Text wie das Hero Three-Menü hinzu. Klicken Sie dann auf Create Menu Okay. Und hier haben wir die dritte Seite von Hero, klicken Sie darauf und klicken Sie auf Im Zwei-Menü und klicken Sie hier, um es zu erweitern, dann ändern Sie diese Navigationsbeschriftung und dann haben wir nicht den Rest des Links, also lassen Sie uns einen benutzerdefinierten Link als URL am Hashtag und im Linktext erstellen , lassen Sie uns diese Takes zuerst hinzufügen, etwa dreht sich elektrische Service unter URL als Hashtag, drittens, Kontakt, Casting und Hashtag, klicken Sie auf Zum Menü hinzufügen Okay, jetzt klicke ich auf Speichern und dann auf Speichern. Und wenn ich jetzt zu Hero Three gehe und momentan das Menü nicht sehe Also wenn ich diese Seite unterdrücke und jetzt auf das Menü klicke und hier haben wir jetzt das dritte Menü, das 03-Menü Dann gehe ich zu E-Stil und wir müssen den Stil ändern. Schauen wir uns also zuerst den Text an. Hier ist die Typografie Kabine, regulär 18. Lassen Sie uns zuerst diese Details hinzufügen Typografie Die Kabinengröße ist normal, normale Meerjungfrau und sie ist 18, und das ist eine ungefähre Die Transformation erfolgt nach oberer Schätzung. Dann schauen wir uns die Farbe an, die Farbe ist schwarz. Hier ist die schwarze Farbe. Die Farbe ist schwarz. Dann überprüfen wir den Abstand zwischen der Auswahl eines Menüs und der Taste „ Überprüfen Sie die Größe Es sind 50 Pixel, beim Einfügen zwischen 50 Pixeln. Okay, und jetzt müssen wir die Ha-Einstellung ändern. Maus darüber fahren, wird die Farbe in diese dunkelgrüne Farbe geändert , und wir erhalten eine Unterstreichung Klicken Sie hier und fügen Sie die Farbe so ein, und hier haben wir die Unterstreichung, klicken Sie auf Farbe einfügen, Okay , und wenn aktiv, wird die Farbe automatisch aktiv, wird die Farbe sodass wir nichts tun müssen Okay, dann müssen wir diese Mitte machen Okay, um es zentriert zu machen, klicke ich darauf und gehe zum Inhalt und nicht zum Gehen wir zu Advance weiter. Klicken wir auf „Selbst ausrichten“ und schon richten wir es in der Mitte aus Es ging einfach in die Mitte. Und jetzt müssen wir dieses Anrufsymbol hinzufügen. Lassen Sie uns zunächst einen Container erstellen und in diesem Container können wir diesen Abschnitt erstellen. Okay, klicken Sie hier und fügen Sie einen Container hinzu, der größer ist Verkleinern wir ihn also ein bisschen wie folgt. Machen wir es vorerst so und wir können es später ändern und hier klicken. Dann suche ich nach der Icon-Box. Eigentlich brauchen wir keinen Container. Ich werde es einfach löschen. Wir können einfach das Icon Search Icon Box verwenden. Und hier haben wir das Symbolfeld, formulieren Sie es so. Sicherlich sollte es nach dem Tres-Menü so sein, dann kann ich zuerst hier klicken. Dieses Symbol ist ein Telefonsymbol. Lassen Sie uns das Telefon suchen und das Telefon auswählen Ich kann auf Einfügen klicken, und hier müssen wir den Inhalt ändern. Kopieren wir den Inhalt von hier und fügen ihn jetzt in die Ebene ein, dann kopieren wir diese Nummer fügen sie dann in die Beschreibung ein. So weit, so gut. Und was ich dann tun kann, ist hier auf der Ansicht, ich werde im E-Stil zu E-Stil wechseln. Stellen wir die Position so ein, dass sie richtig ist und vertikale Ausrichtung so in der Mitte erfolgt und gehen wir dann zum Symbol auf dem Symbol. Lassen Sie uns die Primärfarbe auf Weiß setzen und wir müssen den Hintergrund hinzufügen. Lassen Sie uns die Primärfarbe als Weiß verwenden, und dann gehe ich wieder zur Farbe und füge in der Ansicht einen Rahmen hinzu. Eigentlich ist es kein Rahmen, sondern Strich und dann zu Stil und Stil auf dem Symbol. Fügen wir diese Strichfarbe hinzu, da diese blaue Farbe die blaue Farbe von hier kopiert und die Sekundärfarbe Lokal ist die Primärfarbe blau und die Sekundärfarbe ist das Symbol, es wird weiß sein. Lassen Sie uns das Design verbessern, nachdem wir den Rest erstellt haben. Dann müssen wir diesen Text auf Cabin Medium, 16,5 ändern und die Farbe ist so blau. Lassen Sie uns das machen, ich werde zum Inhalt übergehen Die Titelfarbe wird diese Farbe sein. Dann wird die Typografie Kabine sein, tut mir leid, 16,5 und die Größe ist mittel, mittel, ich meine 500 Okay. Dann müssen wir die Beschreibung ändern. Lassen Sie uns die Details der Beschreibung überprüfen. Die Hintergrundfarbe ist schwarz und Cabin Wold 25. Dieser Hintergrund ist leer, Typografie, Kabine 25 würde Okay, so weit, so gut Was wir tun müssen, ist die Polsterung zu überprüfen. Hier wird die Polsterung 19 mal 19 sein. Fügen wir hier die Icon-Polsterung hinzu, das Muster wird 19 sein und die Symbolgröße ist 25 25. Lassen Sie uns das machen, nachdem wir die Fixiergewebe repariert haben. Da wir dieses Zentrum in die Mitte legen müssen, klicken Sie darauf und richten Sie es von selbst aus. Jetzt klicke ich hier und gehe zum Layout im Layout Ich werde diesen Inhalt mit voller Breite ändern und dann lassen wir den Abstand dazwischen, wir codieren einfach in die Größe der Website. Ist in dieser kleinen Version nicht gut, lassen Sie uns diesen Strukturabschnitt so entfernen und jetzt ist hier die Ansicht. Ich habe es gerade veröffentlicht 90. 0117 Behebt Problem mit der Desktop-Reaktionsfähigkeit: Sie werden diese Art von Ausrichtungsproblem sehen. Also lass es uns beheben. Meistens passiert das, weil dieser Container bereits Lücken hat. Wenn ich hier klicke, wird es als Null angezeigt, und wenn ich zur Seiteneinstellung und in den Layouts gehe, bekommen wir auch hier Lücken. Lassen Sie uns diese beiden Lücken auf Null entfernen. Das brauchen wir nicht und klicken auf Änderungen speichern, schließen es dann und klicken Sie hier auf Speichern. Es scheint nicht gespeichert worden zu sein, und speichern wir es. Jetzt klicke ich auf Zurück, um zu bearbeiten Okay. Jetzt müssen wir nur noch anderen unnötigen Speicherplatz einrichten. Hier klicke ich auf dieses Menü und in diesem Menü setze ich den Zeiger auf Null und wenn ich das mache, wird der Zeiger nicht angezeigt, also machen wir es wie zwei. Schauen wir uns das mal im Figma-Design an und hier schauen wir uns den Zeiger an. Eigentlich sind es zwei Machen wir zwei draus, es ist schon Zwei und dann machen wir das horizontale Padin zu Null Und wenn wir das sofort machen, werden die Abstände kleiner und wir machen die vertikale Polsterung auf Null, Zwei Lass es uns tatsächlich machen. Machen wir die horizontale Polsterung wie zwei. Dann werde ich hier die Zweipunktfixierung aus dem Zwischenraum entfernen Zweipunktfixierung aus dem Zwischenraum Jetzt haben wir ein klares Design. Jetzt klicke ich auf Veröffentlichen und hier gehe ich zu Responsive Test Tool.com und von hier aus können wir die Reaktionsfähigkeit überprüfen Ich klicke auf Änderungen in der Vorschau und kopiere die URL, nur den URL-Teil , füge sie hier und klicke auf dem kleinen Bildschirm auf Überprüfen Es wird so aussehen Dann gehen wir zur größeren Desktop-Version. Auf einem kleinen Tablet wird es also so aussehen. Dann lass uns zur nächsten Version gehen und in dieser Version wird es so aussehen. Lass es uns aus Zentimetern sehen. Es ist 15,6 Zoll groß, also wird es so aussehen. Soweit ich mich an die vorherigen Heldenabschnitte erinnere , die wir entworfen haben, hatten wir dasselbe Problem Lass uns zu diesen Heldenabschnitten gehen und sie bearbeiten. Also zu IHREN Seiten. In Seiten öffne ich Hero Two, lass uns auf Bearbeiten mit Elementor klicken und es hier in einem neuen Fenster öffnen, lass uns dieses auch öffnen Bei Hero One haben wir es so. Das passiert hauptsächlich wegen dieses Menüs. Ich klicke hier und gehe zu TyleoStyle. Ich füge den Zeiger mit einer Null und das horizontale Padin als Null Dann wird auch die vertikale Polsterung Null sein. Lassen Sie uns vertikale Paddinas so voreinstellen, dann wird es so aussehen, aber jetzt haben wir Das ist nicht in der Mitte. Um es in den Mittelpunkt zu stellen, denke ich , bei diesem Design steht das Design nicht im Mittelpunkt, also wird es so aussehen, und wir beheben das Problem und veröffentlichen es dann einfach. Dann lass uns zu Hero Two auf Hero Two gehen, wir werden das gleiche Problem haben. Lassen Sie uns das Problem beheben, indem wir hier klicken und zu „Es ist auf E“ gehen Zeiger ist Null, die horizontale Polsterung ist Null Vertikale Polsterung, lassen Sie uns das als Standard beibehalten und jetzt ist es näher gekommen und jetzt ist es diesem Design ziemlich ähnlich Das war das Problem, das unsere Website durcheinander gebracht hat. Jetzt werde ich es auch veröffentlichen. 91. 0118 Design-Held 03 Teil 2: Lassen Sie uns die Arbeit fortsetzen und ich klicke einfach auf dieses Symbolfeld Und beim Figma-Design haben wir diesen hellblauen Rand, aber in Elemento haben wir keine Möglichkeit, ihn hinzuzufügen Wir haben also nur die Primärfarbe, also die Hintergrundfarbe und die Sekundärfarbe als Textfarbe Wir haben jedoch keine Möglichkeit, eine Rahmenfarbe hinzuzufügen. Um das Problem zu beheben, können wir die Bildbox verwenden. Laden Sie dieses Symbol als Bild herunter. Dann können wir es direkt als Bild hinzufügen. Um das zu tun, gehe ich zur Elementseite, dann klicke ich auf dieses Element hinzufügen, und hier suche ich nach dem Bildfeld. Hier haben wir die Bildbox. Ich werde es einfach so ziehen und seilen. Dann versuche ich einfach klicken und dann auf Kopieren zu klicken, da wir bereits den E-Stil haben, sodass wir diesen Stil direkt einfügen können , indem wir hier mit der rechten Maustaste klicken und auf Phasenstil Okay, jetzt fügen wir diese Informationen hinzu. Um diese Informationen hinzuzufügen, isolieren Sie das Symbolfeld, gehen Sie zu Kontakt Hier kopiere ich den Titel und komme hierher Dann klicken Sie einfach auf den Titel. Dann komm her und kopiere die Beschreibung, und hier gib einfach die Beschreibung ein. So wie das. Okay. Jetzt müssen wir zum E-Stil wechseln und es ist schon in der Mitte, jetzt entfernen wir diesen Teil, wir brauchen diesen Teil nicht mehr, also lösche ich ihn einfach. Okay. Dann kann ich hier klicken und zuerst dieses Symbol hinzufügen. Wählen Sie das Symbol aus. Hier haben wir diese Panicon-Ebene und gehen Sie hierher, klicken Sie auf Exportieren und hier, stellen Sie PNG ein und klicken Sie auf Export P Pawn Es wurde gerade exportiert. Lass uns hierher gehen. Klicken Sie hier und ich ziehe das Symbol einfach so mit der Maus. Jetzt klicke ich auf dieses Auswahlsymbol, es wird so hinzugefügt und von hier aus stelle ich die Größen voll ein und gehen nun zu den Estyles in Estyles Ich werde auf das Bild klicken. Bild, ich stelle die Breite auf 100% ein, den Randtyp auf keinen. Lassen Sie uns die Breite tatsächlich so einstellen bis sie diese Größe nicht mehr erreicht Jetzt gehe ich weiter. Jetzt müssen wir das ausrichten, um es auszurichten, zum Stil gehen , auf das Feld klicken, und hier haben wir den Bildabstand von 15. Machen wir es auf Null. Und jetzt sieht es so und wir müssen es ein bisschen so erhöhen. Dann lass uns das richtig beheben. Also Posteingang, ich werde die vertikale Ausrichtung als oben hinzufügen, dann wird die Ausrichtung links bleiben. Und dann den Bildabstand, lassen Sie uns das so machen, als würden wir uns den Bildabstand hier ansehen . Das ist es auch. Lass es uns schaffen. Nein, es ist ein Werkzeug. Dann beträgt der Inhaltsabstand zehn. Machen wir zehn draus. Okay. Dann gehen wir zu Bild in Bild, ich werde die Breite auf 100% einstellen. Ja, dann gut hier und lass uns im Voraus weitermachen. Ich werde diesen Standard mit der Standardeinstellung ändern. Dann wird hier die Größe eine Zeichenfolge sein. Okay. Jetzt klicke ich auf Veröffentlichen und lass uns diese Seite aktualisieren, um das aktuelle W zu sehen. Aus irgendeinem Grund wird es nicht richtig angezeigt, also passen wir das an, und hier sollte die Breite 100 Fixel sein , also machen wir es Wir haben ein Problem mit dieser Machen wir 100% und dann ist der Inhalt hier gut Ich sehe gut aus und die Bildgröße sollte voll sein. Gehen Sie dann zu Weiter und richten Sie sich dann mittig aus, was die Standardeinstellung sein sollte, oder Sie lassen es zu hundert Prozent tatsächlich devoltieren und dann die Größe ändern Gut, aber aus irgendeinem Grund wird es nicht richtig angezeigt. Was ist, wenn wir die Breite ändern? Lassen Sie uns die Breite dieses Bildes wie folgt auf 50 ändern. Jetzt ist es viel besser. Dann gehe ich weiter und setze Margin und Padding auf Null Bei kleineren Geräten funktioniert es nicht richtig. Lassen Sie uns diese Größe hier wie folgt verringern, lassen Sie uns die Breite entfernen Wenn wir die Breite entfernen, wird sie korrekt angezeigt und hier im Voraus, gut auf dem Bild. Fügen wir damit Benutzerdefiniertes hinzu 45 45 wäre gut. Lassen Sie uns nun dieses Design veröffentlichen und es uns auf der Desktop-responsiven Website ansehen. Wir gehen zum responsiven Tool und kopieren es hier, fügen es so ein, klicken auf Häkchen und lassen uns die Desktop-Größe festlegen. Das ist größer. Und was ist mit dieser Größe? Okay, es funktioniert für die Woche, und ungefähr bei dieser Größe funktioniert es immer noch für die Woche. Und was ist mit hier? Okay. Wenn wir zu 280 mal 800 kommen, ist es ein Durcheinander, um es zu reparieren Schauen wir uns die Größe 50, 64 an, kommen wir her und klicken darauf Dann sehen wir uns in jeder Datei den Abstand dazwischen an, er ist 44. Lass es uns ein bisschen kleiner machen. Machen wir es auf 34. Und jetzt veröffentlichen wir es, dann können wir hier erneut auf Prüfen klicken, und jetzt wird es korrekt angezeigt. Okay. Gehen wir nun zum nächsten Teil der Website über, dem dieser Rand hinzugefügt wird. Um diesen Rand hinzuzufügen, können wir hier klicken und auf diesen Hauptcontainer klicken und dann auf Weiter gehen Wir sollten den Rand sehen. Im Voraus haben wir keine Grenze, nicht wahr? Ja, nicht im Voraus. Lass uns zu Estyle InStyle gehen, wir haben Border. Der Rand wird also fest sein und hier klicken. Dann sehen wir uns die Grenze von hier aus an. Okay, hier, Grenze mit ist zwei und Farbe ist diese Farbe. Also kopiere die Farbe, komm her. Der Rand wird zwei sein, und hier müssen wir ihn nur unten machen und die Randfarbe wird diese Farbe haben. Okay. Jetzt wird es so aussehen. Dann müssen wir diesen Abschnitt erstellen. Um diesen Abschnitt zu erstellen, klicke ich hier und klicke auf Cplex Box und erstelle einen neuen Container wie diesen und klicke auf Advance on Advance Das rechte Muster wird 140 sein und die linke Polsterung wird ebenfalls 140 sein, so wie Dann müssen wir diesen Text hinzufügen, also werde ich hier klicken und Rag androper eine Überschrift wie diese und Dann ist Typografie Cabin Medium 24. Gehen wir zu Estyle und Typografie ist Cabin 24 Medium. Medium bedeutet 500, kopiere einfach den Text und klicke auf Inhalt und füge den Text so Dann müssen wir hier die Farbe ändern. Kopieren Sie also diese Füllfarbe und setzen Sie sie so ein. Dann ist Punkt eins eins zwei, und hier müssen wir die Pop-ins mit dem Median 50 hinzufügen Ich dupliziere diesen einfach und lass uns ihn im Stil der Typografie gestalten, komm rein. Medium, 50 so, dann kopieren wir den Text und fügen ihn hier einfach so ein Okay. Jetzt werde ich wieder auf diesen Container klicken und hier zum Layout gehen, die Lücke sollte in der C-Zeile liegen und lass uns die mittlere Höhe herausfinden. Die durchschnittliche Höhe ist 577. Lass uns das mögen. Dann wird der Artikel hier im Mittelpunkt stehen. Und lass uns das so machen. Dann klicke ich hier und gehe zu eTyleOeStyle, klicke auf Hintergrundtyp und Dann lass uns dieses Hintergrundbild herunterladen, darauf klicken und auf Exportieren klicken Stellen wir es als JPG ein und klicken dann wie folgt auf Exportieren. Dann gehen wir zu Tiny PNG, klicken Sie hier. Ziehe es einfach so. Dann klicken Sie hier, um das optimierte Bild herunterzuladen und lassen Sie es uns hier platzieren. Klicken Sie auf Auswählen und es wurde einfach so hinzugefügt, und jetzt können wir das so anpassen Und hier müssen wir die Farbe ändern. Die Farbe ist schwarz, und das Objekt zwischen den Seiten sollte ebenfalls geändert werden, was bedeutet, dass die Linie nicht das Objekt zwischen den Seiten ist. Lassen Sie uns die Zeilenhöhe auf 55 setzen und das Ganze vergrößern, so dass diese Farbe schwarz sein sollte. Lassen Sie uns nun sehen, dass das Objekt dazwischen die Größe das Werkzeug ist, also klicken wir auf den Container und gehen wir zum Layout im Layout Der Abstand zwischen den Krähen sollte also zwei sein Was wir dann hinzufügen müssen, ist die Schaltfläche. Fügen wir also die Schaltfläche hinzu, klicken Sie hier, suchen Sie und fügen Sie einfach eine Schaltfläche wie diese hinzu. Dann schauen wir uns an, wie die Schaltfläche aussieht, und kopieren den Button-Text. Die Tipplücke für den Button-Text lautet also Cabin Medium 24, und das ist in jedem Fall, formuliere ihn wie folgt: Typografie, Kabine, Medium, 24 und die Transformation sollte so oben sein Dann schauen wir uns die Größe dazwischen an. Oben ist 25, links und rechts ist 30, 30. Lass uns 25 mal 25 draus machen. Klicken Sie hier, um nicht im Voraus in dieser Polsterung zu klicken. Lass uns 25 draus machen, also so. Dann sollte die Farbe weiß und diese dunkelblaue Farbe sein und die Ecken sind Null. Die Farbe ist diese und Weiß und diese Farbe, der Grenzradius wird Null sein. Jetzt haben wir ein Problem , weil der Text so aussehen sollte. Um das zu korrigieren, werde ich immer weiter gehen, lassen Sie uns das mit 253 benutzerdefiniert machen und es wird immer noch größer, das ist ein Problem und auch der Hintergrund funktioniert nicht so, wie er sein sollte. Lassen Sie uns zuerst dieses Problem beheben, um es Ich werde es als vollständig hinzufügen und dann kann ich zu Inhalt gehen und hier BR hinzufügen. Dann füge hier die BR-SLA-Halterung BR und schließe die Klammer so Dann wird es sich nicht ändern, wenn wir die Größe dieser Website ändern Jetzt haben wir ein Problem mit dem Hintergrundbild. Lass es uns reparieren. Es ist einfach. Klicken Sie auf den Container, weil wir dieses Bild zum Container hinzufügen. Und klicken Sie auf Bildauflösung als voll und die Position wird mittig rechts angezeigt. Und wenn wir es sehen, wird es so aussehen. Und was wir hier tun müssen, ist dieses Paise-Cover zu wiederholen, ohne es Wenn wir es dann überprüfen, wird es so aussehen Wenn wir es in einem kleinen Gerät wie diesem einchecken, wird es so aussehen. Okay. Hier haben wir ein anderes Problem. Ich denke, weil dieser Platz zu groß ist, nein, es ist genauso wie beim ursprünglichen Design. Also ja, hier erstellen wir einfach den Helden, Abschnitt drei. 92. 0119 Elementor aktualisiert: Hallo, alle zusammen. Wenn wir auf die Website gehen, werden wir ein Update haben. Also klicke ich einfach darauf und hier haben wir das Elemento-Versionsupdate Gehen wir also zu den Plug-ins und klicken auf Plugins installieren Hier haben wir Version 3.25 0.4 als aktuelle Version und wir haben eine neue Version als 3.26 Hier haben wir eine Meldung namens Bitte vor dem Upgrade sichern, was bedeutet, dass wir, wenn wir dieses Plugin aktualisieren wollen , eine Sicherungskopie dieser Website erstellen müssen , da die Plugin-Updates die Website beschädigen können Wenn es passiert ist und wir ein Backup haben, können wir das Backup wiederherstellen. Bevor wir dieses Plug-In aktualisieren, holen wir uns das Backup. Ich bin auf dem C-Panel auf dem Namecheap C-Panel, ich installiere dieses Wordpress als Wordpress und verwende es in Softacula Wenn Sie ein anderes Webhosting verwenden, suchen Sie einfach bei Google deren Backup-System und holen Sie sich das Backup In diesem Fall klicke ich auf WordPress, das von Softaculs verwaltet wird , und hier haben wir unsere Website Ich klicke einfach auf dieses nach unten schmale Symbol und hier sind die Details unserer Website Und hier haben wir einen grünen Button namens Backup. Klicken Sie einfach darauf und hier steht, dass dieses Backup nur für 28 Tage gültig ist, aber es ist okay. Und von hier aus können wir einen Knoten hinzufügen. Also werde ich ein Node-ähnliches Element oder ein Pro-Plugin-Update hinzufügen. Und ich werde den Backup-Speicherort als Standard festlegen und hier auf die Schaltfläche zur Backup-Installation klicken Schaltfläche zur Backup-Installation Jetzt sichern wir unsere WordPress-Website. Okay. Jetzt haben wir das Backup und ich klicke auf Zurück zur WordPress-Verwaltung. Und wenn hier etwas passiert, wenn wir das Element oder Plugin aktualisieren, können wir einfach auf diese Schaltfläche zum Sichern oder Wiederherstellen von fstore klicken diese Schaltfläche zum Sichern oder Wiederherstellen von fstore Dann haben wir hier die Backups und wenn ich auf diesen Knoten klicke oder wenn ich mit der Maus über diesen Knoten fahre, können wir den Backup-Knoten überprüfen, den wir Also hier ist das Backup , das wir gerade erstellt haben. Und wenn wir auf die Schaltfläche Wiederherstellen klicken, startet dieses Backup die Wiederherstellung oder wir können dieses Backup auf unseren lokalen Computer herunterladen. Okay, jetzt ist es Zeit, das Plug-In zu aktualisieren. Gehen Sie also einfach zur PlugIn-Seite und hier klicke ich auf Jetzt aktualisieren, und es wurde erfolgreich aktualisiert. Also werde ich die Seite unterdrücken, und jetzt ist unsere Version 3.26 0.2 Und wenn wir auf die Website gehen, die Website einwandfrei Also haben wir das Plugin erfolgreich aktualisiert. 93. 0120 Clear Website Backend: Hallo, alle zusammen. Jetzt ist es an der Zeit, die Benutzeroberfläche unserer FIGMA-Website mit Elementor auf eine voll funktionsfähige WordPress-Website umzustellen Benutzeroberfläche unserer FIGMA-Website mit Elementor auf eine voll funktionsfähige WordPress-Website Fangen wir Schritt für Schritt an. Zuerst gehe ich zum WordPress-Dashboard und wir verwenden diese WordPress-Website , um unsere Testseiten zu erstellen. Jetzt ist es an der Zeit, sie alle zu entfernen. Also lass es uns tun. Zuerst gehe ich zum Dashboard, das Dashboard ist leer, dann gehen wir zu Fst aposFstPage ist klar und gehen wir zur Medienbibliothek Und hier haben wir ein paar Bilder. Klicken wir auf Massenauswahl und wählen all diese Bilder wie dieses Klicken Sie dann auf Dauerhaft löschen. Oder wenn Sie viele Bilder haben, können Sie auf dieses Symbol klicken und hier klicken, auf dieses Kontrollkästchen klicken und dann einfach alle Bilder löschen. Okay. Gehen wir jetzt zu den Seiten auf Lpage. Wir haben diese Seiten. Ich klicke hier und auf Bulk Action, ich klicke auf Moto Trash und dann auf Anwenden. Okay. Jetzt klicke ich auf Papierkorb und dann hier. Dann klicke auf Dauerhaft löschen und dann auf Anwenden. Okay. Jetzt ist der Befehlsbereich klar und Elemento ist klar, und lassen Sie uns die Speichervorlage überprüfen Und hier haben wir die kommende Zonenvorlage, aber wir brauchen sie immer noch, denn wenn wir die Ansicht der Seite überprüfen , wird sie so aussehen Eigentlich haben wir hier ein Problem. Lassen Sie uns das in der nächsten Lektion beheben. Für diese neue Website benötigen wir eine Soundseite. Gehen wir zurück und hier, gehen wir zu Aussehen und Themen für Themen Wir haben dieses Halo-Elementor-Thema und wir werden dieses Halo-Elementor-Thema verwenden, also werde ich es so belassen Wenn Sie ein anderes Thema haben, können Sie einfach auf die Schaltfläche „Neues Thema“ klicken und so nach Hallo, Elemento suchen Wenn Sie das tun, erhalten Sie diese Art von Theme, klicken Sie darauf und hier werden Sie Theme installieren sehen. Klicken Sie einfach auf das Theme und aktivieren Ich habe es schon gemacht, also schließe ich es jetzt und klicke auf Plugins auf Plugin installieren. Wir haben Elemento und das Elemento-Plugin, mit denen wir die Website von Grund auf neu erstellen werden, und wenn der Benutzer zu El user geht, gehen wir zu El Hier haben wir nur Admin-Benutzer, und so weit, so gut, ich werde zum Dashboard gehen Und jetzt ist es an der Zeit, mit dem nächsten Schritt fortzufahren, Seite eingerichtet ist, und lassen Sie uns das in der nächsten Lektion tun. 94. 0121 Elementor globale Schriftarten und Farben: Okay. Jetzt ist es an der Zeit, die Seiteneinstellungen einzurichten. Wenn wir also unser Figma-Design überprüfen, haben wir bereits die Größe der Desktop-Version und die Polsterung der Website Es sind also 140. Also können wir diese Dinge auf der Elemento-Website definieren. Also lass uns das machen. Hier bin ich im Wordpress-Dashboard, und als ersten Schritt gehe ich zur Elementor-Startseite und werde diesen Teil entfernen Hier können wir auf die eingestellte Seite klicken. Also klicke ich einfach auf Anpassen. Wenn ich auf Anpassen klicke, muss ich unsere erste Seite erstellen , da wir derzeit keine Seite haben. Fangen wir also von dort an. Hier haben wir ein Nachrichtenelement oder Datendaten Ich klicke einfach darauf, klicke hier, um es jetzt auszuführen , und lass uns diese Nachricht wie folgt entfernen. Dann klicke ich auf Neue Seite und füge den Titel hinzu. Diese Seite wird unsere Homepage sein und wenn wir auf die Website gehen, sollte unser Homepage-Name dieser Website-Name sein. Hier haben wir die Webdesign-Anforderungen hier, der Firmenname oder der Name der Website ist JB Family Clinic, also kopiere ich ihn einfach und füge ihn hier ein, dann klicke ich auf die Schaltfläche „Mit Elementor bearbeiten Jetzt bin ich im Elemento-Editor. Lass uns von hier aus zum Sitzen gehen. Dazu klicke ich auf das Symbol für Seiteneinstellungen, und hier haben wir die Details. Gehen wir eins nach dem anderen. Zuerst müssen wir festlegen, dass wir ein Designsystem definieren können. Klicken Sie hier. Das Designsystem ist eine Sammlung wiederverwendbarer Komponenten mit klar definiertem Verwendungsstandard. Auf Elemento können wir globale Farben und globale Schriften als Designsystem verwenden Wir können wiederverwendbare Farben und Schriften erstellen. Klicken Sie zunächst auf globale Farben und hier können wir die Farben festlegen. Wenn wir zum Figma-Design und auf unserem Ithica-Blatt gehen, können wir die Farben der Website sehen Lassen Sie uns diese Farben definieren. Zuerst haben wir diese blaue Farbe Wählen Sie einfach das Rechteck aus und füllen Sie Wir können den Farbcode sehen, ihn auswählen und kopieren. Dann komm her. Stellen wir es als primär ein. Also hier, klicken Sie auf die Farbe und fügen Sie die Farbe wie folgt ein. Okay. Dann lass uns hierher gehen. Hier haben wir die Sekundärfarbe. Es ist eigentlich weiß, also fügen wir es so hinzu. Dann müssen wir unsere dritte Farbe oder Textfarbe hinzufügen. Also kopiere es einfach und hier fügen wir die Textfarbe hinzu. Und wir haben nur drei Hauptfarben. Aber wenn wir das Design überprüfen, können wir diese Art von hellblauer Farbe sehen, also kopiere ich sie einfach und wir können sie als Akzentfarbe wie folgt hinzufügen. Aber wenn Sie in Ihrem Fall nur drei Farben haben, können Sie die Akzentfarbe einfach ignorieren. Wenn Sie mehr als drei Farben haben, können Sie auf die Schaltfläche Farbe klicken und hier können Sie einen Namen für die Farbe hinzufügen. Also füge ich Tn oder Button-Farbe hinzu und hier kann ich die Farbe so auswählen, wie mir das gefällt. Sie können beliebig viele Farben erstellen, aber in diesem Fall benötigen wir keine benutzerdefinierten Farben. Also ich drüber und hier haben wir die Schaltfläche Löschen, also klicke ich auf Löschen und dann hier. Mach es. Okay. Jetzt klicke ich auf Änderungen speichern. Und hier haben wir auch einen Bereich für globale Schriftarten. Oder wenn wir zurückgehen, klicke ich auf Beenden und lass uns wieder zur Sitzeinstellung gehen. Und wenn wir hier nachschauen, können wir auf diese globale Schrift klicken. Wenn wir darauf klicken, wird es auf dieselbe Seite weitergeleitet. Es ist wie ein Tab. Nun zur Schrift: Wenn wir zu unserer Figma-Datei und zur Typografie gehen , können wir die Details der Schrift sehen , die wir auf dieser Website verwenden Okay, lassen Sie uns die Schriftdetails hinzufügen. Hier haben wir den Header als Lato 60 Regular. Gehen wir also zur WordPress-Website, und hier haben wir die primäre, klicken Sie darauf, und hier werde ich die Schriftfamilie auf LTO einstellen Dann ist die Größe 60 und die Höhe ist normal. Das heißt normal in Elemento. Jetzt haben wir hier die Schriftart und lassen uns die Zeilenhöhe als 36 hinzufügen, 36 ist okay Und der Vorteil der Definition dieser Parameter oder dieser Schriftarten und Farben besteht darin, dass wir diese Elemente im Design wiederverwenden können. Gehen wir zu einem Beispiel. Um das zu tun, klicke ich einfach auf Änderungen konzipieren und gehen zurück und ich klicke einfach auf Plus und Flexbox, erstelle dann eine direkte Spalte, in der Zeit enthalten ist, und hier klicke ich auf Element hinzufügen und lass uns eine Überschrift hinzufügen Dann werde ich diese Überschrift dreimal duplizieren und hier klicke ich auf die Überschrift, um sie zu bearbeiten, und klicke auf Ich Hier haben wir die Typografie eingerichtet. Wählen wir das Primäre als Tiografie aus. Jetzt haben wir ein Problem. Die Zeilenhöhe ist zu gering, also versuchen wir, das Problem von hier aus zu beheben. Lassen Sie uns die Linie 55 erreichen, 55 wird es wert sein. Und jetzt muss ich zur Sitzeinstellung und dann zu den globalen Schriftarten gehen und hier wird die Primärgröße die primäre Textzeilenhöhe sein. Okay. Speichern wir nun die Änderungen und kehren wir zum Design zurück. Lassen Sie uns nun diese Farbe als Textfarbe und hier diese Farbe als Akzentfarbe festlegen. Okay. Jetzt werde ich diesen Text mit Akzentfarben zweimal duplizieren, und das wird Ihnen helfen, die Macht der vordefinierten Farben und der Typografie zu verstehen die Macht der vordefinierten Farben und der Typografie Jetzt klicke ich auf Fablish, es ist okay. Veröffentlichen Sie diese Seite. Stellen Sie sich jetzt ein solches Szenario vor. Der Kunde dieser Website möchte also diese hellblaue Farbe in rote Farbe ändern und denkt, wir haben diese Art von Text wie 60 Text in dieser Farbe, Textfeld oder Schaltflächen in dieser Farbe. Und wenn wir diese hellblaue Farbe ändern wollen , müssen wir diese 60 Texte manuell ändern , indem wir in den Stil gehen und ihn von hier aus wie folgt ändern. Aber wenn wir globale Variablen oder globale Farben sagen, können wir diese Farbe einfach in der Seiteneinstellung ändern und das wird sich auf die Herbst-Website auswirken. Gehen wir zur Sitzeinstellung und hier gehe ich zur globalen Farbe und wir müssen diese Farbe in Rot ändern, sie so in Rot ändern, dann klicke ich auf Änderungen konzipieren und es gilt für die gesamte Website Ich klicke auf Zurück zum Editor, und jetzt siehst du, dass diese beiden Texte rot werden , weil wir die globale Farbeigenschaft für diesen Text festgelegt haben Das ist der Vorteil. Und wenn Sie diese Textgröße auf eine andere Größe ändern müssen , wenn Sie globale Typografie oder globale Schrift verwenden, können Sie diese Einstellung einfach in der Größeneinstellung ändern und es wirkt sich auf die gesamte Website Ich hoffe, Sie verstehen, warum wir diese Art von globalen Schriftarten und Farben festlegen Okay, jetzt kommen wir zum Sekundärtext. Der Sekundärtext ist also Abb. Tree 25 Regular. Machen wir es so, dass die Schrift fk tree, 25, und die Breite normal ist, bedeutet Nom. Stellen Sie diese Zeilenhöhe wie die Typografie auf der Figma-Typografie auf Auto ein, damit es einfach Stellen Sie sie wie Otto so ein und lassen Sie uns das Gleiche hier tun Die Zeilenhöhe ist automatisch und wenn es ein Problem gibt, können wir es einfach von hier aus ändern, dann müssen wir den Texttyp ändern Der Text besteht aus diesen Absatzschriften. Ist Feigenbaum 20 regulär. Ändern wir es auf Fake-Baum 20 ist regulär und hier ist Line Night automatisch. Klicken Sie hier, klicken Sie auf Bleistift und stellen Sie es auf Hto ein, jetzt haben wir hier Axon Eigentlich werde ich dieses Axon in Button ändern, weil wir es hier als Buttons haben Wenn wir wollen, können wir andere Texte ändern und der Button-Text ist Victory 20 Regular Eigentlich ist es hier Medium es sollte als Medium geändert werden. Wie dem auch sei, es ist ab Werk 20 Medium und es ist in Großbuchstaben geschrieben. Lass es uns schaffen Wir sollten hier Capital Factory 20 sein, nicht 25 20 mit diesem Semivol-Median bedeutet Semiv und Okay, und die Zeilenhöhe wird wieder automatisch eingestellt Ja, ja, ja, ja. Okay. Jetzt können wir diese Namen tatsächlich umbenennen. Lassen Sie uns den Primärtext in den Header ändern und das Subdin ist Sekundärtext, und diesen Schaltflächentext haben wir bereits geändert, und hier haben wir den Absatztext , damit wir ihn leicht verstehen können Und tatsächlich müssen wir diese Akzentfarbe in hellblau ändern , weil wir bereits Änderungen vorgenommen Kopieren wir den Farbcode und setzen ihn hier so ein. Klicke auf Änderungen speichern und jetzt klicke ich auf dieses Kreuz, weil wir andere Dinge einrichten müssen. Auch hier muss ich zur Seiteneinstellung gehen und auf Seiteneinstellungen klicken. Okay, jetzt legen wir die globalen Farben und die globale Schriftart fest. 95. 0122 Site-Einstellung einrichten: Hallo, alle zusammen. Jetzt können wir den Theme-Stil ignorieren, weil diese Setins vom Theme übernommen wurden, und wir werden unsere Website von Grund auf neu gestalten und das Designsystem globale Farben und Schriften reichen aus, um die Website zu gestalten, und dann müssen wir zu den Setins übergehen. In sTNS haben wir zuerst die Identität der Website. Also klicke ich einfach darauf und hier müssen wir der Site den Namen hinzufügen Gehen wir also zu unserem Figma-Design. Und hier gilt die Anforderung an das Website-Design Ich kopiere den Firmennamen oder den Namen der Website Oder wir können hier hingehen und die Führungskräfte von hier aus überprüfen und ich füge sie einfach so ein. Dann müssen wir eine Seitenbeschreibung hinzufügen. Dies ist die Seitenbeschreibung oder der Slogan. Ich werde diese Überschrift als Beschreibung oder Seitentitel kopieren und so aussehen, dann müssen wir das Seitenlogo hinzufügen, das Seitenlogo ist bereits erstellt. Hier ist unser Website-Logo, und ich klicke einfach auf dieses BG-Logo und gehe zu Export bei Export, ich gebe das Format als PNG an, dann klicke ich auf GB-Logo exportieren, Ich Epoded Dann gehe ich auf die Website, klicke hier und lass uns die Seite so hochladen Dann füge ich den alten Text als JB Family Clinic-Logo hinzu und klicke auf Auswählen, er wurde gerade hinzugefügt, und dann müssen wir die FvCon hinzufügen Ich glaube, wir haben derzeit kein Fv-Symbol, oder Nein, dafür werden wir nicht schnell eines erstellen. Ich drücke einfach auf diesen Rahmen und hier klicke ich einfach so und F Vicon sollte fünf mal fünf sein stellen wir den Breiten - und Höhentest f zu gut ein, fünf zu gut, also so Dann ändere ich diesen Rahmen in ein FV-Symbol. Jetzt gehe ich zu ASEDs in Assets, klicke auf in dieser Datei erstellt, und hier haben wir das JV-Logo, und ich klicke einfach auf ISAT-Instanz, und hier werde ich auf das Logo klicken, und ich werde einfach auf dieses Symbol für die abgeschlossene Instanz klicken, und dann werde ich diesen Teil der Familienklinik verschieben und hier werde ich diesen ich Eigentlich müssen wir die Schriftgröße erhöhen . Lass es uns schaffen. Ich gehe zu Dateien und in Dateien, wähle den Text aus und lass uns ihn vergrößern. Hier füge ich 500 hinzu, 500 ist zu groß, 200. Hier muss ich diese Größe ändern, so. Lass uns 300 draus machen. Wir können das eher so erhöhen. Jetzt werde ich das erhöhen und es sieht gut aus. Dann sehe ich dieses FV-Symbol und klicke auf Exportieren und dann auf TV-Symbol exportieren. Ich lade das Ti fas PNG, klicke das Ti fas PNG Okay. Jetzt gehe ich hier hin, klicke hier, Gefahren, ziehe das Fav-Symbol per Drag & Drop und füge Text hinzu, das Fav-Symbol ist leer, also werde ich es nicht bearbeiten Ich werde dauerhaft auf Löschen klicken Beim Herunterladen ist etwas passiert Ich werde. Hier ist unser FV-Symbolrahmen, aber er ist in diesem JB-Logorame Ich wähle einfach den JB-Text und klicke auf das FV-Symbol und füge ihn Jetzt befindet es sich im FV-Symbolrahmen. Dann werde ich Okay, jetzt gut, das Fav-Symbol auswählen und auf Port FV klicken Dann lass es uns so platzieren und ausschneiden, es hierher kopieren und dann so einfügen Klicken Sie dann auf CLX und dann auf Änderungen speichern, um diese Elemente zu speichern. Gehen wir zurück Lassen Sie uns nun diese Seite überarbeiten, um zu sehen, dass das neue Aussehen, wenn wir diese hinzufügen, schwierig ist Derzeit haben wir hier den Titel und wenn wir eine Vorschau dieser Website anzeigen, werden der JB-Teil oder das FAV-Symbol auf der Jetzt müssen wir das Layout einrichten, auf Layout und dann auf Layout klicken Zuerst haben wir die Inhaltsbreite Wenn wir zur FIGMA-Datei gehen und auf der Homepage nachsehen , wählen wir den Homepage-Frame und hier ist die Breite 1.440 Fügen wir also 1.440 hinzu. Dann müssen wir die Polsterung hinzufügen. Sehen wir uns die aktuelle Polsterung an. Hier haben wir die Polsterung als Abstände von 140 angegeben, also den Abstand zwischen links Wenn ich es zum Beispiel auf Null ändere, sich das Design wie folgt, aber wenn wir 140 hinzufügen, erhalten wir diese Art von Polsterung oder Leerzeichen dazwischen links und rechts Es ist 140, hier ist die rechte Seite 140 und die linke Seite ist 140 Es ist schon da. Dann haben wir Lücken. In Lücken haben wir Spalte und Zeile. Wenn wir es auf Null setzen, der Abstand zwischen diesen Elementen Null. Aber wenn wir 50 hinzufügen, wird es 50 sein. Sehen wir uns den Artikel zwischen den Größen an. Hier haben wir 220 und wenn ich hier Elemente oder Elemente auswähle und auf Y über dem nächsten Objekt klicke, können wir die Größe dazwischen sehen, also 220. Fügen wir Raw Gap ps 220 hinzu. Ich klicke auf die Schaltfläche „Wert zusammen verknüpfen“, um das Häkchen Der Rohwert ist dann 220 Was ist dann mit Lücken? Hier ist die Lücke zwei. Lassen Sie uns eigentlich keine spaltenähnliche Lücke zwischen zwei Elementen wie diesem hinzufügen , manuell. Also werde ich Column Gap Co hinzufügen. Dann klicke ich auf Conceive changes und das Standard-Seitenlayout wird ein Element mit voller Breite sein, so wie hier Wenn wir ein Thema auswählen, werden die Inhalte des Themes übernommen, aber lassen Sie uns ein Element mit voller Breite auswählen und jetzt auf Änderungen speichern klicken Dann behalten wir die Breakpoints als Standard bei und gehen zurück und wir haben die Seiteneinstellung erfolgreich festgelegt . Jetzt werde ich diesen Tab schließen, und hier sind wir im Design, und hier sehe ich ein Problem. Also lass uns so klicken. Dann ist der Abstand zwischen diesem Text zu hoch. Eigentlich ist es behoben, wenn wir die Seite neu laden und so weit, so gut, jetzt müssen wir die Kopf- und Fußzeile hinzufügen und das machen wir in der nächsten Lektion Vorerst werde ich diesen Teil entfernen und zum Speichern auf Veröffentlichen klicken 96. 0123 Design Kopfzeile 01: Okay, jetzt müssen wir mit dem Design beginnen. Also in Element haben wir Vorlagen. In Vorlagen gehe ich zu Team Builder. In Team Builder haben wir also Website-Abschnitte. Diese Abschnitte werden also wiederholt, und wenn wir ein Design für den Abschnitt erstellen, gilt es für die gesamte Site. Zum Beispiel ist der Header der Website auf der Website ziemlich ähnlich Wenn wir also zur Startseite gehen, der Menübereich derselbe, und wenn wir zur Info-Seite, zur Kontakt- oder zu einer anderen Seite gehen, der Menübereich derselbe Menüabschnitt oder die Kopfzeile ist derselbe. So können wir Vorlagen für Kopfzeilen, Fußzeilen und andere wiederholte Seiten der Website erstellen , was bedeutet, dass wir sie nur einmal erstellen müssen und sie dann auf Seiten anwenden können. In diesem Fall können wir den Header-Teil mit diesem Menüabschnitt A erstellen , wir können den Putter-Teil erstellen Beginnen wir mit dem Header-Design. Um das im Element - oder Theme-Builder zu tun, klicke ich auf dieses Plus-Symbol in der Kopfzeile. Dann werden wir hier vorgefertigte Vorlagen wie diese haben, aber ich wähle keine davon aus, also klicke ich einfach auf Schließen Ich werde dieses Design so vergrößern. Dann werde ich hier als ersten Schritt einen Container erstellen. Klicken Sie einfach hier, klicken Sie auf das Plex-Feld, klicken Sie auf diesen Spaltencontainer und lassen Sie uns die Größe dieses Abschnitts sehen. Die Größe ist also 120, also legen wir Mint auf 120 Pixel fest, dann mache ich diesen Inhalt mit voller Breite und füge hier eine Hintergrundfarbe hinzu Fügen wir eine kleine grüne Farbe wie diese , denn jetzt können wir deutlich sehen, wo wir arbeiten Lassen Sie uns nun zuerst dieses hinzuzufügende Logo hinzufügen, klicken Sie auf dieses Plus-Symbol und hier erhalten wir das Seitenlogo Ich ziehe einfach ein bisschen und reihe es ein bisschen. Dann werde ich im Container des Inhaltszentrums und die Richtung als Zeilenrichtung als Zeile und den Inhalt als Stern wie folgt ausrichten die Richtung als Zeilenrichtung als Zeile , dann wird ein Zeilenelement zentriert. Lassen Sie uns nun diesen Menüabschnitt erstellen, um das Menü zu erstellen. Hier klicke ich auf das Menü Elementsuche hinzufügen und hier rufe ich das WordPress-Menü auf und lassen es uns so zusammenstellen und gehen zu Estyle in Estyle, die Typografie wird Ja. Ist die Größe der Schaltfläche. Dann werde ich beim Inhalt die Textausrichtung als Mittelpunkt festlegen und vorerst Ausrichtung als Start festlegen. Dann lassen Sie uns auf Estyle ändern, normalerweise sollte die Testfarbe die Farbe sein und es sieht vorerst okay aus Klicken wir auf das Bild und in den Bildeinstellungen sollte die Ausrichtung überlappend sein und Ausrichtung selbst sollte so zentriert sein Dann lassen Sie uns dafür einfach dieses Anrufsymbol erstellen, ich werde auf ein Element klicken und hier, lassen Sie uns ein Bild wie dieses erstellen es hier hinzufügen Gehen Sie dann von hier aus zu Estyle und stellen Sie es in der Bildposition auf ef ein und die Ausrichtung erfolgt überlappend Dann sehen wir uns das Bild an, das sechs entfernt, setzen wir es auf C. Jetzt müssen wir dieses Symbol herunterladen Klicken Sie hier auf das Symbol und dann auf Exportieren und PNG, klicken Sie auf Exportieren, Anruf-Icon Dann kommen wir hierher und klicken auf das Bildfeld für den Inhalt Wir können einfach auf den Inhalt klicken. Seil das nochmal ab. Das kann mir gefallen. Klicken Sie dann auf C SLAC. Fügen wir nun diese Textdetails hinzu, kopieren den Text und fügen einen Testtitel Kopieren wir dann die Nummer und die diskettenartige Beschreibung Gehen wir nun zur Überschrift in der Überschrift, klicken auf das Bild und das Bild sollte zu 100% echt sein . Fügen wir dem Bild keine Größe hinzu. Lassen Sie uns dann vorerst die Bildbreite oder das Bildmaterial so beibehalten und gehen wir hier zum Inhalt im Inhalt über, die Art von Lücke ist Victory Medium 16, und um es hinzuzufügen, ich tatsächlich Absatztext hinzu, und lassen Sie uns sehen, dass seine Größe zwei ist, ich werde es einfach um 16 ändern und sollte es fett sein? Ja. Und sollte es oberes Gas sein, sollte es Oberblick sein und bei Transformation sage ich es so Was ist mit diesem Medium? Nicht normal, es sollte mittel sein. Ordnung. Dann ist die Farbe Schwarz, diese Farbe. Ordnung. Also hier, was wir haben, ist Abb. Bold 20. Lassen Sie uns auch diese Details hinzufügen. Bei der Beschreibung werde ich den Absatztext hinsetzen und jetzt muss ich den Text bearbeiten, seine Größe ist 20 und mit diesem Fettdruck soweit so gut. Hier gehe ich jetzt weiter zum nächsten Schritt, der voll sein sollte vielleicht das Inline-Auto einstellen und das wird so behoben und wir müssen die Größe dazwischen ändern. Schauen wir uns die Größe dazwischen an, es ist Z. Gehen wir zu Etylectaspac, machen wir daraus sechs. Perfekt. Jetzt sieht es so aus, dann müssen wir zum Inhalt gehen, nicht zum Inhalt, auf den Container klicken und auf Container gleichmäßig auf Ispace klicken, also wird es so eingestellt und jetzt müssen wir hinzufügen, weil dieses Menü derzeit nicht das Menü ist, das wir wollen, hier haben wir das Menü als unseren Anbieter blockieren und Kontakt und die Homepage Lassen Sie uns auf diesen Menüpunkt klicken und hier im Inhalt werde ich auf G zum Menübildschirm klicken und hier haben wir die Menüs , die wir bereits erstellt haben. Eigentlich werde ich sie löschen, weil wir diese Menüelemente wie diese nicht mehr benötigen. Lass uns löschen Okay. Jetzt füge ich hier den Menünamen als Hauptmenü und klicke auf Menü erstellen und hier auf Seiten, klicke auf und hier wähle ich die Elementor-Seite als Hauptseite aus, und hier ändere ich den Namen in Home und jetzt müssen wir zuerst weitere Seiten über die Seite hinzufügen Eigentlich fügen wir vorerst einfach Dammnus so hinzu für etwa dann Blog, dann unsere Anbieter und können es tanken, es hier bei Tumenu einfügen und auf sameno klicken Okay, jetzt haben wir das Menü, also geh zum Element der Seite und hier klicke ich auf Veröffentlichen und lassen uns das tatsächlich speichern. Es gibt einen Entwurf, klicken Sie hier und klicken Sie auf Entwurf speichern, bis wir das Menü fertig haben, Entwurf speichern, bis wir das Menü fertig haben, dann klicke ich hier. Eigentlich muss ich die Seite so unterdrücken. Dann klicken Sie auf das Menü und wählen Sie hier das Hauptmenü aus. Okay, jetzt gehe zu Estil in eTylef, lass uns die Farben ändern und wie ich die Textfarbe in Primärfarbe ändern werde Eigentlich brauchen wir keinen Zeiger. Gehen wir hier und nicht hier, gehen wir zu Stil über Stil, dividieren oder vier Punkte ergeben Null, weil wir keinen Zeiger brauchen. Eigentlich müsste es hier eine Option geben , um den Zeiger zu entfernen, wir haben das beim Inhalt. Wir haben diesen Zeiger als keinen. Setzen wir ihn auf none gehen wir dann zu Etie in Estes, horizontale Muster sollte Null sein, vertikale Muster sollte Null sein, Abstand dazwischen sollte 04 sein Und jetzt überprüfen wir diese Abstände. Zunächst sollte der Abstand 30 und der Abstand dazwischen 30 betragen. 30 ist zu nah dran. Ich kenne den Grund für dieses Abstandsproblem. Wenn wir uns das Figma-Design ansehen, hat es diese Art von weißem Behälter Lassen Sie uns diesen Container erstellen und mit der Bearbeitung beginnen. Beim Hinzufügen eines Elements ist hier ein Container. Ich ziehe es einfach so. Okay. Dann ändern wir zuerst die Hauptrichtung des Containers in Spalte, und jetzt können wir die Elemente deutlich sehen, und hier ist der Container, den ich hinzugefügt habe. Also klicke ich auf dieses kleine Symbol und öffne es. Dann füge ich dieses Logo-Menü (ein Bildfeld) in diesen Container ein , so wie hier. Okay. Klicken Sie nun auf den Container und dann auf Richtung als horizontale Zeile. Und hier haben wir ein Problem mit dem I-Abstand. Der Grund dafür ist, dass die Polsterung links und rechts als 142 hinzugefügt wurde. Klicken wir also auf den Container und gehen wir zu „Weiter zum Rand“, entfernen den Rand auf der Polsterung und entfernen die Polsterung Klicken Sie nun auf den Hauptcontainer, dann auf den Untercontainer und gehen Sie zu Layout im Layout Stellen Sie ihn als Lassen Sie uns nun diese Informationen anpassen. Wenn ich diesen Container auswähle, kann ich den Rand dieses Containers sehen. Also hier haben wir einen Abstand. In der Bildbox werde ich dieses Tempo entfernen, indem ich die Größe wie folgt ändere Hier können wir die Größe der Bildbox oder des Logos reduzieren die Größe der Bildbox oder des Logos Lass es uns so machen. Jetzt wird es korrekt angezeigt und jetzt haben wir ein Alignment Taschentuch Klicken Sie auf den zweiten Behälter und klicken Sie auf Elemente als Mittelpunkt ausrichten. Dann klicken Sie auf Advance auf dieses Bild. Hier ändern wir es wie bei Line Auto, sodass es so aussieht, als ob es oben und unten einen Rand gibt Fügen wir also Dance hinzu und entfernen den Rand. Entfernen Sie den Rand, klicken Sie gemeinsam auf den Linkwert und fügen wir wie folgt einen Minusrand nach oben hinzu. Dann haben wir unten den Rand. Lassen Sie uns auch diesen Rand entfernen. Jetzt ist es perfekt ausgerichtet, und wenn wir es in dem größeren Fenster überprüfen, sieht es so aus, und dann reduzieren wir Größe der Struktur wie folgt, damit wir ein klares Design bekommen. Jetzt müssen wir diesem Container weiße Farbe hinzufügen. Um die weiße Farbe hinzuzufügen, gehe ich zu Es ist klassisch im Hintergrund, dann fügen wir hier die weiße Farbe Die Sekundärfarbe ist die weiße Farbe. Dann muss ich jetzt Bereich I um das Menü herausfinden. Tatsächlich müssen wir in diesem Fall das größere Element auswählen, es ist dieses Telefonsymbol. Wenn wir es überprüfen, es 29 und 15 als links und rechts. Fügen wir also diese Informationen hinzu. Im Voraus ist das obere Ende nicht, klicken Sie tatsächlich auf den Container, und oben sind es 29. Dann rechts, 15 unten 15 links 29. Vielleicht machen wir es so, als ob nicht links, links sollte 15 sein und unten sollte 30 sein, nicht 29. Machen wir es auf 30. Okay. Und dann müssen wir den Abstand zwischen der oberen Ecke und dem Menü herausfinden. Es sind also 20. Wir müssen nur das Objekt auswählen und über das Objekt neben dem ausgewählten Element klicken, dann auf Alle drücken und wir können sehen, dass der Abstand 20 beträgt Wählen wir also den Hauptcontainer und fügen Sie den oberen Rand als 20 hinzu. Okay. Jetzt müssen wir abgerundete Ecken hinzufügen, schauen wir uns die abgerundeten Ecken an. Die abgerundeten Ecken sind 20 oder der Eckenradius ist 20, um den Eckenradius zu berechnen, gehen Sie zu Itis und tis an Bord, fügen Sie den Radius als 20 hinzu. Okay, einfach so können wir das Design sehen. Jetzt kann ich auf den Hintergrundcontainer klicken und den Hintergrund so entfernen. Klicken Sie dann auf Veröffentlichen. Bevor wir auf Veröffentlichen klicken, klicken wir auf die Header-Einstellung und auf Header-Einstellung, ändern wir diesen Titel Haupt-Header und klicken dann auf Veröffentlichen. Und wenn ich auf Veröffentlichen klicke, wird die Frage gestellt, wo möchtest du deine Vorlage anzeigen, und hier haben wir eine Schaltfläche zum Hinzufügen von Bedingungen. Also klicke ich einfach auf Bedingung hinzufügen und hier können wir den Artikel hinzufügen oder ausschließen. Deshalb wähle ich „ Gesamte Seite einbeziehen “, weil ich dieses Menü auf der gesamten Website sehen möchte . Und wir können als Beispiel weitere Bedingungen hinzufügen. Ich möchte das auf der Startseite ausschließen oder nicht anzeigen, wir können auf Singular klicken und hier können wir die Titelseite auswählen und dann kann ich auf San Clause klicken In diesem Fall müssen wir dieses Menü auf der gesamten Website einbinden, also entferne ich es und klicke auf Speichern und Klausel, dann wurde es gerade veröffentlicht Gehen wir jetzt zu den Seiten und ER-Seiten und hier haben wir die Homepage, also klicke ich einfach auf Mit Element bearbeiten und hier wird unser Menü angezeigt. 97. 0124 Design Header 02: Hallo, alle zusammen. Jetzt haben wir ein Problem. Also klicke ich auf dieses Plus-Symbol und lass uns einen einfachen Container erstellen. Und wie unser Website-Design sollte dieses Bild das Titelbild der Homepage sein. Versuchen wir also, dieses Bild hinzuzufügen. Klicken Sie auf das Bild und klicken Sie auf, um das PNG auszuwählen , und klicken Sie auf Exportieren und die Bildgröße ist größer, also gehe ich zu tiny png.com und speichere das Bild und lege es auf der winzigen png.com-Website ab, dann klicken die Bildradios auf die JPG-Schaltfläche, um es herunterzuladen, und jetzt muss ich auf die Startseite gehen und hier lassen Sie uns die und hier lassen Sehen wir uns die Mindesthöhe dieses Abschnitts an. Es ist 800, die Höhe ist 800, also machen wir daraus 800, nicht 700, 800. Okay. Gehen Sie jetzt zu Estils in Estyle, klicken Sie auf Background und Classic und hier füge ich dieses Bild hinzu Und dieses ALT-Bild-Tag wird nicht gebunden. Heldenbild und klicke auf C. Okay. Wenn ich es hinzufüge, wurde es außerhalb dieses Menüs hinzugefügt. Also brauchen wir es innerhalb des Menüs. Um das zu tun, können wir eine negative Marge hinzufügen. Also klicke ich auf diesen Container und gehe zu Advance, klicke auf Margin. Und obendrein füge ich negative Hundert hinzu. Wenn ich negative Hundert hinzufüge, geht das über und was ist , wenn wir minus 200 hinzufügen? Es ist go above, aber wir können genau die Größe ermitteln, die wir hinzufügen möchten , denn wenn wir auf das Menü klicken und überprüfen, ob die Höhe 120 ist, haben wir hier weitere 20, was 140 bedeutet. Fügen wir einen negativen Rand als 140 hinzu und wir müssen 60 hinzufügen, 60 werden funktionieren, vielleicht 50. Ja, die 150 werden perfekt funktionieren. Jetzt haben wir immer noch ein Problem, weil wir den Hintergrund nicht sehen können. Im Moment klicke ich auf Veröffentlichen und gehe dann zur Kopfzeile, um zur Kopfzeile zu gelangen Ich gehe zum Dashboard, Elementor, nicht Element in der Vorlage, Team Builder Team Builder, wir können den Haupt-Header sehen, darauf klicken und hier auf Bearbeiten klicken Wir können das Problem beheben, indem wir diesem Container einen IT-Index hinzufügen, den Container auswählen und weitermachen. Und falls Sie sich fragen, was ein IT-Index ist Index ist eine CSS-Eigenschaft, die die Iacin-Reihenfolge von TML-Elementen auf einer Webseite steuert die Iacin-Reihenfolge von TML-Elementen auf einer Wenn wir beispielsweise einen als IT-Index für diesen Container hinzufügen , wird er vor einem Element angezeigt Der höhere It-Indexwert erscheint also vor einem Element und der niedrigere It-Indexwert wird auf der Rückseite angezeigt. Jetzt klicke ich auf Veröffentlichen und gehe hierher, dann lass uns das nochmal rebashen. Siehst du, als ich es rebashe, unser 98. 0125 Standardfußzeile entfernen: Hallo, alle zusammen. Bevor wir dem Rest des Designs fortfahren, entfernen wir diesen Teil und gehen dann Schritt für Abschnitt oder Abschnitt für Abschnitt vor. Um diesen Teil zu entfernen, gehe ich zum Tress-Dashboard. Dann gehe ich hier zu Templates und Them Builder. Them Builder klicke ich hier In Them Builder klicke ich hier auf Footer und schließe das, dann hier, ich klicke auf das Plus-Symbol und das CilletPlex-Feld, dann erstelle ich einen Container wie diesen, dann klicke ich auf Footer Set in und ändere hier den Titel der Hauptfußzeile wie folgt, dann klicke ich auf Veröffentlichen und klicke auf at condition und es wird auf der Klicken Sie auf Speichern und schließen. Wenn ich jetzt auf die Startseite gehe und hier auf Mit Element bearbeiten klicke, auf Mit Element bearbeiten klicke eigentlich haben wir die Homepage noch nicht eingerichtet, also müssen wir auf den Dashboard-Seiten zum Dashboard gehen, auf Seiten klicken und hier auf Mit Element bearbeiten klicken. Und jetzt sehen wir weder die Fußzeile noch diesen Inhalt mehr, also lasst uns Abschnitt für Abschnitt erstellen Auf diese Weise können wir leicht verstehen, was wir tun 99. 0126 Hero Section Design: Hallo, alle zusammen. Wenn ich die Startseite unserer Website besuche, liegt diese Art von Speicherplatz daran, dass wir die Homepage noch nicht eingerichtet haben. Lassen Sie uns die Homepage einrichten. Um das zu tun, gehe ich zum Dashboard der Website. Dann gehe ich ins Innere des Sets und klicke auf Lesen. Zum Lesen haben wir hier einen Satz, mit dem Sie Ihre Homepage einrichten können. Ich werde es als statische Seite einrichten und hier werde ich die Homepage als JB Family Ginic festlegen , was der Name der Homepage ist, und ich klicke auf Änderungen speichern, wenn ich die Website besuche, können wir unsere Homepage so sehen Jetzt gehe ich wieder zum Dashboard und lass uns mit dem Design fortfahren Auf Seiten können wir unsere Homepage herausfinden und hier klicke ich auf Dieses Element bearbeiten und wir müssen diesen Abschnitt erstellen. Ich habe diesen Teil bereits erstellt, aber fangen wir von vorne an. Ich werde das entfernen und so sieht die Seite aus. Wenn Sie eine neue Seite erstellen, sollte sie so aussehen da wir den Header-Teil bereits eingerichtet haben. Hier klicke ich auf dieses Klassensymbol, wähle Flexbox und wähle den Spaltentyp „Richtung“ aus. Und für diesen Behälter stelle ich das volle Gewicht Dann können wir beim Vorderrand und bei den Polsterungen und dann beim Layout die Mindesthöhe hinzufügen Lassen Sie uns die Mindesthöhe herausfinden. Die Mindesthöhe ist 800 oder die Höhe ist 800, also fügen wir sie wie folgt hinzu: 800. Okay. Lassen Sie uns jetzt ein Bild hinzufügen, bevor wir etwas tun. Um ein Bild hinzuzufügen, müssen wir es herunterladen, das Bild wie folgt auswählen und dann auf Exportieren klicken. Ich werde es als JPG exportieren, dann müssen wir zu tinpng.com gehen, und hier werde ich es so ziehen und ablegen Dann gibt es die Dateigröße per Radio aus. Klicken Sie auf JPG, JPEG, um es herunterzuladen. Jetzt gehe ich zum Stil dieses Containers und wähle hier den klassischen Hintergrundtyp aus. Dann klicke ich hier auf Bild auswählen und hier habe ich das Bild bereits hochgeladen und Sie können das Download-Bild hochladen , indem Sie Altern wie folgt auswählen. Ich habe den alten Text bereits eingerichtet und jetzt klicke ich auf Auswählen. Hier müssen wir einige Einstellungen hinzufügen. Die Bildauflösung wird in der Mitte angezeigt, und die Befestigung erfolgt durch Scrollen und Wiederholen, keine Wiederholung, Displaygröße des Deckblatts. Okay, jetzt wird es so aussehen, aber das Problem ist, es sollte von hier aus beginnen. Eigentlich haben wir diesen Teil schon gemacht, also die Höhe dieses Teils ist 120, und wir fügen 20 hinzu, also wird es 140 sein, und lassen Sie uns auf den Container klicken, und im Voraus müssen wir einen negativen Rand als 140, vielleicht 50 hinzufügen . Okay, 150 funktionieren einwandfrei. Jetzt haben wir es einfach so eingerichtet. Was wir jetzt tun müssen, ist in diesem Abschnitt. Es ist ziemlich einfach. Ich kopiere den Text von hier und komme zum Elementor und klicke auf dieses Plus-Symbol Schlagwort und die richtige Überschrift wie diese, dann füge ich diesen dann füge ich diesen Unsere Überschrift ist hier drin, also lassen Sie uns das korrigieren, um das Problem zu beheben Ich klicke auf Container und dann auf Bereich Container-Layout, wir können definieren, wo unser Inhalt sein soll Wenn ich auf „Inhalt rechtfertigen“ klicke, wird er hier und hier angezeigt. Das ist das Tempo, in dem wir ihn hinzufügen wollen Aus irgendeinem Grund wurden die linken und rechten Abstände nicht eingerichtet, also fügen wir sie manuell hinzu, um sie hinzuzufügen Ich klicke auf Container und gehe zu Erweitert. Auf Advance füge ich die rechten Paddins 140 und die linken Paddins 140 wie folgt Okay. Lassen Sie uns hier weitermachen, wir können die Typografie hier einstellen, Typografie wird die Überschrift sein und die Farbe sollte zweitrangig sein . Ist weiße Farbe Okay, jetzt sollten wir von hier aus einen Platz haben, um das zu tun. Ich werde zum Inhalt übergehen und hier bin ich in der BR so. Dann fügen wir den Absatz hinzu, kopieren ihn und klicken dann hier, fügen dann eine Überschrift wie diese hinzu und ändern wir das Überschriften-TML-Tag in P, und hier fügen wir und hier fügen wir den Textinhalt hinzu und gehen stilvoll zu Stil Setze diesen Text auf Absatz, sieh dir an, dass es regulär 225 ist und welche Details der Absatztext sein wird Um den Absatztext zu überprüfen, kann ich einfach mit einer Schaltfläche auf diese Bearbeitung klicken. Wenn ich das überprüfe, sind es 220, also das ist das Problem. Was ist, wenn wir eine Unterüberschrift hinzufügen? Ja, es ist die Unterüberschrift. Ich werde es vorerst so belassen, dann lassen Sie uns die Textfarbe auf Weiß ändern Dann müssen wir hinzufügen, diese Schaltfläche hinzufügen. Um diese Schaltfläche hinzuzufügen, klicke ich auf diese Schaltfläche „Element hinzufügen“ und hier auf die Schaltfläche „Suchen “ und lege sie so ab. Okay, lassen Sie uns diese Details hinzufügen. Hier werde ich den Text kopieren und hierher kommen und den Text so einfügen. Lassen Sie uns den Link vorerst als Paso als Hashtag beibehalten. Dann müssen wir die Farben ändern. Es ist ganz einfach, gehe zum E-Stil und die Hintergrundfarbe ist diese blaue Textfarbe ist diese weiße Farbe. Okay, was wir jetzt hinzufügen müssen, ist Platz. Wählen wir also das T aus und drücken alle. 252-53-5305. Fügen wir diese Details hier im Block hinzu, dann oben 25, rechts, 35, unten 25, rechts 35, unten Okay, jetzt müssen wir die Ecken überprüfen. Die Ecken 15. Okay, hier, lass uns bei dem, was im Radio 15 steht, sagen. Okay, jetzt haben wir Überschrift, Text und den Button. Jetzt müssen wir bei BR von diesen Punkten aus arbeiten. Also hier bei der BR und der BR, guter Inhalt über Familie und BR wie dieser. Und danach müssen wir sicherstellen und das Buch Nice veröffentlichen. Jetzt müssen wir den Abstand zwischen diesem unteren Teil und diesem Abschnitt finden . Es ist also 60. Also lassen Sie uns diese Details hinzufügen. Klicken Sie auf den Container und im nächsten Schritt müssen wir das untere Pad in einer Größe von 60 Pixeln wie diesem hinzufügen. Okay, es sieht gut aus. Jetzt klicke ich auf Savedraft und lass uns das neu packen. Lassen Sie uns das trotzdem veröffentlichen, weil sich diese Website im Coming-Zone-Modus befindet Wenn ich die Seite jetzt neu flashe, wird sie so aussehen Und hier haben wir ein Problem. Wir haben einen Raum, in dem wir uns stellen müssen. Okay, ich habe den Grund für dieses Problem gefunden. Wenn wir also die Seiteneinstellung einrichten, fügen wir das Standardlayout Raw Gap nach 220 hinzu, also werde ich es entfernen. Wenn ich es entferne, wird dieses Problem behoben, und jetzt klicke ich auf Änderungen speichern. Lass es uns manuell hinzufügen. Klicke hier und hier haben wir schon einige Abstände. Um ihn zu entfernen, können wir einen negativen Rand wie folgt hinzufügen. Es sind tatsächlich zehn, und wenn wir zum Design gehen, steht für die Zwischengröße 20. Also hier haben wir schon zehn. Wenn wir diese negative Marge entfernen, haben wir bereits zehn. Wenn ich also zehn auf diese Weise hinzufüge, sind es 20, also müssen wir das für einen Abschnitt wie diesen tun, zehn oder wir können zehn zu diesem Container wie diesem hinzufügen. Das Gleiche wird passieren. Fügen wir diesem Container zehn hinzu , weil das der einfache Weg ist. Und ja. Wenn wir das tun, wird der fragliche Raum gelöst und nett sein. Jetzt klicke ich auf Veröffentlichen und wenn wir das Design jetzt in der Realansicht überprüfen, sieht es so aus. Eigentlich ist die Größe der Website normalerweise so, aber wie ich Ihnen bereits gesagt habe, ist mein Desktop größer, deshalb wird sie so angezeigt. Okay. Jetzt müssen wir etwas Animation hinzufügen. Lassen Sie uns eine kleine Animation hinzufügen. Zuerst klicke ich hier, lass uns weitermachen. Im Voraus gehe ich zu Bewegungseffekten. Bei Bewegungseffekten können wir die Eingangsanimation einstellen. Fügen wir einfache Dinge hinzu, wie das Verblassen oder Springen ist zu viel, Aufschreiben ist zu viel. Das Ausbleichen wird basieren. Fügen wir für jeden Abschnitt ein Fade-In hinzu. Klicken Sie hier, klicken Sie auf Bewegungseffekte und fügen wir standardmäßig ein Fade-In hinzu. Und hier, Bewegungseffekte, klicken Sie auf Abblenden. Nein, Padin wird es gut gehen. In Ordnung. Jetzt kann es veröffentlicht werden und jetzt wird es so geladen. Es ist wirklich einfach, weil diese Website für Profis ist und das Hinzufügen von zu vielen Animationen nicht in Ordnung aussieht. Okay. Jetzt müssen wir diesen Abschnitt entwerfen. Lassen Sie uns ihn in der nächsten Lektion entwerfen. 100. 0127aboutsummerysection01 ALTERED: Lassen Sie uns nun diesen Abschnitt entwerfen. Ich gehe auf die Seite und hier klicke ich auf das Plus-Symbol und das Plax-Buch, dann auf dieses Dann hier, lass uns sehen, dass ich den Abschnitt auswähle, dann auf Alle drücke und die Größe dazwischen überprüfe Es ist eins, zwei, 20, und lassen Sie uns hier, ich gehe zum nächsten Teil dieses Containers und setze den Rand des oberen Durchgangs auf 20 wie folgt. Dann müssen wir die Höhe finden, die Höhe ist 600. Fügen wir dem Layout ein Höhenlayout hinzu, die durchschnittliche Höhe beträgt 600. Jetzt sollten wir die Richtung als rohe Horizontale haben und als ersten Schritt müssen wir dieses Bild hinzufügen. Um das Bild hinzuzufügen, müssen wir es herunterladen, darauf doppelklicken, auf Export IM klicken und hier, gehen wir zu tiny png.com und laden Dragan op to hier herunter, um es auf Export IM klicken und hier, gehen wir zu tiny png.com und laden Dragan op to zu optimieren Eigentlich wird es als PNG heruntergeladen, aber wir brauchen es nicht Mal sehen, ob wir es als JPG herunterladen, wir bekommen vielleicht mehr Speicherplatz oder wir können uns vorstellen, dass es viel kleiner ist wie C hier, wir haben 90 Kilobyte, aber hier haben wir 26 Kilobyte aber hier haben wir Okay. Jetzt gehe ich hierher und klicke auf Con Plus-Symbol, suche dann nach Bild und Rag & Op-Bildfeld wie diesem und klicke darauf und lade hier das Bild und den Titel hoch. Für den alten Tag werde ich wie Arzt an der JB Family Clinic hinzufügen, weil das hilft, die Suchmaschinenoptimierung zu verbessern Und dann klicke ich hier und hier ist es in der Mitte, also lassen wir es zentrieren, indem auf das Symbol in der Mitte des Containers klicken Nun müssen wir diese beiden Elemente hinzufügen. Fangen wir damit an, um das hinzuzufügen Ich kann einfach einen Container erstellen, dann können wir diese beiden als Text hinzufügen. Lass uns das zuerst machen. Wir müssen hier klicken und den Container hinzufügen. Fügen wir einen Container wie diesen hinzu. Was wir nun tun müssen, ist zu den Überschriften dieser Überschrift hinzuzufügen und dann hier auf die zweite Überschrift wie diese zu klicken , dann lassen Sie uns diesen Text hier kopieren, ich kopiere ihn und füge ihn so ein, dann kopiere ich diesen und füge ihn hier ein. Gehen Sie jetzt zum Stil und diese Textgröße sollte P normal sein, was bedeutet, dass wir sie bereits als Absatz wie diesen eingerichtet haben. Dann denke ich, das ist die Überschrift. Mal sehen, es ist eine Überschrift, also fügen wir Farbe wie Schwarz hinzu. Dann müssen wir uns ein Bild von den Abständen machen. Es sieht so aus, als ob der Abstand sechs ist also fügen wir den Abstand als C hinzu. Klicken Sie hier und entfernen Sie diesen und fügen Sie ihn C hinzu. Klicken Sie hier und entfernen Sie diesen dann wie folgt hinzu. Jetzt müssen wir es zentrieren, klicken Sie auf die Mitte der Einzelposten. Dann werde ich im Voraus weitermachen, ich werde die Größenfolge festlegen. Nichts passiert. Lass uns ein hinzufügen Lass uns das Pad hinzufügen. Lassen Sie uns die Polsterung herausfinden und sie hinzufügen. Dann werden wir versuchen, etwas mit dem Abstand zu tun. Es ist 20 mal 20 und 12 mal 12. Okay. Fügen wir die Details hier hinzu, oben als zwei, rechts als gut, unten als zwei, rechts testen. Dann müssen wir das dekretieren. Lassen Sie uns das auf diese Weise verringern. Es sollte so sein. Ich passe es einfach manuell an, dann habe ich die Hintergrundfarbe und diesen Schatten. Fügen wir die Hintergrundfarbe hinzu, wir müssen die Ecke auf 20 setzen. Fügen wir die hinzuzufügenden Details hinzu Ich klicke hier und klicke auf Hintergrundtyp. Wählen Sie dann hier den Hintergrund als weiß aus. Okay. Dann klicken Sie auf Board und hier haben wir Box Shadow. Lass uns hierher gehen und die Schattendetails überprüfen. Also hier haben wir den Eff-Bereich im Eff-Bereich. Wir haben die Details. Es ist Position Null, Null und wir 15, dann ist Farbe Schwarz mit 15% Opazität Fügen wir diese Details hier hinzu, wir müssen die Unschärfe auf 15 und die Farbe auf Schwarz setzen , und dann müssen wir die Deckkraft einstellen Um die Opazität einzustellen, müssen wir eigentlich den Farbcode ermitteln Um das zu tun, wähle ich zuerst die Farbe Schwarz und dann wechsle ich zu HA. Und auch hier setze ich es auf Hs L, und hier haben wir Null, Null und hier haben wir 15. Gehen wir hierher und reduzieren diese beiden, bis sie 0,15 als letzten Wert dieser HSL erreichen, und jetzt wird es so angezeigt Okay. Jetzt müssen wir die Würfelecke mit 20 wie folgt hinzufügen. Okay, wir haben gerade diesen Abschnitt erstellt, und er scheint gut zu sein, und er scheint gut zu sein, und jetzt müssen wir ihn hier hinzufügen , um ihn an dieser Position hinzuzufügen Ich werde ihn auf absolut setzen, und jetzt kann ich den Ort ändern, aber wenn wir ihn auf absolut setzen, unsere Designänderung, lassen Sie uns das Problem beheben, um es zu beheben, ich gehe zum Layout und lassen uns das bewerten, bis es so festgelegt ist. Jetzt kann ich weitermachen und hier kann ich mich auf den Weg machen , wie ich will. Tatsächlich haben wir von hier aus ein Problem, ich werde es auf voll setzen und aus irgendeinem Grund wird es größer als das, was wir gewonnen haben, lassen Sie uns diesen Standard so ändern, dass er standardmäßig so ist . Jetzt ist es perfekt und hier klicken, dann das Takes einstellen, wir müssen die Position überprüfen, also ist sie da, also passen wir sie an. Es scheint gut zu sein, vielleicht fügen wir zu viel Abstand hinzu, also ändern wir die obere Hälfte auf zwei und die Unterseite auf „Gefällt mir“. Jetzt müssen wir das machen, weil das jetzt gut aussieht und was wir jetzt tun müssen, ist diesen Abschnitt zu erstellen. Um diesen Abschnitt zu erstellen, werde ich eine Bildbox erstellen. Mit der Bildbox können wir diesen Abschnitt ganz einfach erstellen, hier klicken und nach einem Bild suchen oder wir fügen ein Symbolfeld hinzu , weil das Symbol ist. Vielleicht fügen wir ein Bildfeld hinzu, weil wir es in Zukunft ändern können, wenn wir wollen. Ich füge dann einfach hier hinzu, ich muss dieses Symbol herunterladen, auf das Symbol klicken, auf Vektor exportieren klicken, und hier kopiere ich das T und komme hierher, dann füge ich die Überschrift hinzu, wie es dauert, entferne dann diese Beschreibung weil wir keine Beschreibung benötigen. Schauen wir uns die Größe an. Die Größe ist normal, 25 gehen zu Schwester und Inhalt, die Farbe sollte schwarz sein und die Typografie sollte so sein Jetzt müssen wir diesen Abstand zwischen dem Symbol und den Panzern entfernen diesen Abstand zwischen dem Symbol und den Panzern Setzen wir Null und kein Bild, wir können es mit der Breite machen, aber für den Moment nehmen wir das Bild, klicken hier und laden dieses Bild direkt hoch und entfernen den Titel, das ist klicken hier und laden dieses Bild direkt hoch und gleich übersichtlich hier, wir haben einen großen großen Abstand, gut im Stil zu stylen, den Bildraum so zu ändern, dass es nicht passiert, wenn wir einen Minus-Wert hinzufügen. Das Hinzufügen eines Minus-Werts ändert nichts Was sollten wir tun? Ich werde den Rand und die Polsterung entfernen und im E-Stil zum E-Stil wechseln Nein, ich werde zum Inhalt gehen, lassen Sie uns diesen Titel in D ändern und es ist ein bisschen besser Jetzt müssen wir Hintergrund und diesen Schatten hinzufügen, um das zu tun Ich gehe im Voraus zum nächsten Schritt, ich gehe zu diesem Hintergrundbereich und hier klicke ich bei Sekundärfarbe auf den Hintergrundtyp als klassisch. Sehen wir uns nun den Abstand an, links und rechts sowie oben und unten als. Sehen wir uns diese Details hier an, oben und unten als 20 und links und rechts als 20. Jetzt müssen wir hier die Ecken im Hintergrund reduzieren, wir müssen 20 hinzufügen, weil ich denke, es 20 Cent, das Grenzradio oder Eckradio sind 20. Okay. Jetzt müssen wir diesen Schatten hinzufügen, um den Schatten hinzuzufügen. Wir müssen die Details überprüfen und hier am Rand können wir die Details hier überprüfen Ich 15 Blur und ich werde auf dieses X klicken und diesen Farbcode kopieren , damit wir direkt von hier aus bearbeiten können, klicken Sie darauf und auf Rand, klicken Sie auf Box Shadow, der 15 sein wird und bei diesem Farbcode Perfekt. Klicken Sie jetzt hier, dann müssen wir es genauso positionieren, um das zu tun, die Position überprüfen und die Standardeinstellung auf absolut ändern. Jetzt können wir den Offset einstellen. Es ist so. Mal sehen, mal sehen, ob das E sein sollte und das sollte genau hier sein. Wir haben den Abschnitt erfolgreich erstellt und jetzt müssen wir diesen Text hinzufügen. Fügen wir ihn in der nächsten Lektion hinzu. 101. Informationen zum Zusammenfassungsabschnitt - Teil 02: Okay, jetzt müssen wir diesen Abschnitt erstellen. Also lass uns anfangen. Zuerst müssen wir einen Container hinzufügen, da dieser vertikal ist, und hier klicken, einen Container wie diesen hinzuzufügen. Wenn wir über das Bild gehen, können wir die Stelle sehen, an der wir Container hinzufügen können Klicken Sie hier, gehen Sie weiter, entfernen Sie alle diese Stopps. Und jetzt füge ich die Lick-Spalten hinzu. Zuerst haben wir eine Überschrift, dann haben wir einen Absatz. Wir müssen eine Überschrift erstellen, zuerst eine Überschrift. Und die zweite Überschrift, die zweite Überschrift sollte P sein weil es ein Absatz ist und klicken Sie hier, dann kopieren Sie diesen Text, fügen Sie ihn so ein, ändern Sie dann den Stil, sodass die Farbe schwarz ist , und dann hier kopieren Sie noch einmal und fügen Sie ihn ein und hier sollten wir die Typografie in Absatz - und Textfarbe wie folgt ändern die Typografie in Absatz - und Textfarbe wie folgt Jetzt müssen wir den Abstand hinzufügen, sodass der Abstand 20 beträgt Fügen wir Pacing hinzu, um es schnell zum Container hinzuzufügen, und hier im Layout fügen wir Raw als 20 hinzu. Okay. Was wir jetzt tun müssen, ist Zwischenräume hinzuzufügen. Wenn wir den Abstand zwischen 90 einchecken. Stellen wir es ein, klicken Sie hier, gehen Sie dann zu Advance und wir können einfach nach 90 am linken Rand suchen. Perfekt. Jetzt müssen wir den Button hinzufügen. Ich werde hier die Suchschaltfläche und die Dragon-Opper-Schaltfläche wie diese hier sehen, dann müssen wir den Text hinzufügen, damit er mehr erfahren kann und lassen wir den Link vorerst vergessen und gehen zu E-Stil im E-Stil , Typogravito-Schaltfläche ändern und die Farbe ist Hintergrundfarbe ist diese blaue Farbe und die Textfarbe ist weiße Farbe Sehen wir uns nun die 15 des Wasserradios und fügen sie als 15 hinzu und wir brauchen keinen Boxschatten, entfernen Sie ihn einfach, indem Sie ihn so einstellen. Machen Sie das als Null und jetzt gut, dann müssen wir die Größe dazwischen überprüfen. Schieben Sie den Text ein und klicken Sie auf und hier ist es 2020 bis 30, 30. Hier haben wir die Polsterung, es ist Top 20, rechts 30, Top 20, richtig, 30 und gut Auch hier haben wir diesen Abstand, diesen seltsamen Abstand, und das ist ein großes Problem, aber er taucht immer wieder auf und wir müssen nichts tun Um das Problem zu beheben, füge ich einfach eine negative Marge hinzu. Was wir jetzt tun müssen, ist diese sekundäre Schaltfläche, es ist ziemlich einfach. Also klicken wir hier und fügen die Schaltfläche hinzu oder wir können einfach duplizieren, indem rechten Maustaste klicken und auf Obligate klicken, dann müssen wir hier einen Container wie diesen hinzufügen Dann fügen wir diese Details in den Container ein und klicken hier und gehen weiter, machen daraus eine Null und im Layout fügen wir horizontal als Richtung hinzu und die Spalte wird 20 sein Ich glaube, es ist 20. Ja, es sind 20. Jetzt müssen wir den Hintergrund entfernen, um die Hintergrundfarbe zu entfernen , um die Hintergrundfarbe zu entfernen Ich klicke auf die Schaltfläche und gehe hier zum Stil und ändere die Hintergrundfarbe auf transparent und ändere die Textfarbe auf Primär wie folgt. Dann müssen wir nur noch ein Symbol hinzufügen und auch den Text ändern. Lassen Sie uns das so ändern und um das Symbol hinzuzufügen, können wir einfach auf die Symbolbibliothek klicken. Hier haben wir Fontosm-Symbolbibliothek und sehen uns diesen Symbolnamen Eigentlich gibt es für dieses Symbol keinen Namen. Wir können es einfach von hier aus überprüfen. Lassen Sie uns hier wie mit dem Pfeil suchen, wir haben das Symbol, klicken Sie darauf und klicken Sie auf Einfügen, und hier können wir die Position des Symbols festlegen. Ich werde die Symbolposition wie folgt hinzufügen und dann können wir den Symbolabstand festlegen. Sehen wir uns den Abstand zwischen den Symbolen an. Stellen wir es als ein und wir müssen benutzerdefiniertes ESS hinzufügen, um die Symbolgröße zu erhöhen. Machen wir das also in der nächsten Lektion. Auch hier klicke ich hier und wir müssen das Objekt in der Mitte ausrichten, damit es korrekt mittig ausgerichtet wird. Okay, so weit, so gut. Jetzt wird es so aussehen 102. Informationen zum Zusammenfassungsabschnitt - Teil 03: Hallo, alle zusammen. Jetzt müssen wir diese Icon-Größe erhöhen. Um das zu tun, müssen wir CSS verwenden. Also lass uns anfangen. Ich klicke auf dieses Stiftsymbol, um die Schaltfläche zu bearbeiten, und hier haben wir eine Stelle, an der wir dieser Schaltfläche eine ID hinzufügen können. Also werde ich ID als unseren Anbieter BTN hinzufügen. Füge einfach diese ID hinzu und wenn ich sie hinzufüge, füge ich keine Leerzeichen weil wir sie in einer Zeile hinzufügen müssen Jetzt kopiere ich es, dann gehe ich zu Advance. In Advance haben wir einen Ort, an dem Sie benutzerdefiniertes CSS hinzufügen können. Jetzt habe ich die ID bereits erstellt, also wähle ich diese ID im CSS aus, um das zu machen. Ich drücke auf das Hashtag und füge den ID-Namen ein. So wählen wir die ID im CSS aus und jetzt klicke ich auf Veröffentlichen Dann klicke ich hier auf Änderungen in der Vorschau und auf CSS-Code Wir müssen diese Art von Klammer hinzufügen, um DA-Code hinzuzufügen Jetzt bin ich runtergescrollt und schreibe einfach hier, klicke auf und klicke auf Inspec Jetzt klicke ich auf dieses Symbol und wähle das Symbol so aus. Hier ist das Symbol. Wenn wir hier nachsehen, ist unsere ID sichtbar und jetzt müssen wir diesen Teil auswählen, um das zu tun Ich kann diese Klasse kopieren und dann kommen und Leerzeichen hinzufügen, wir verwenden Punkt, um die Klasse wie folgt auszuwählen. Okay. Jetzt werde ich hier den Code hinzufügen, um die Größe dieses Symbols zu erhöhen. Dieses Symbol ist Text, also füge ich Code wie die Schriftgröße hinzu, und hier füge ich es hinzu, als ob 30 Pixel 30 Pixel zu groß sind. Wenn ich es hinzufüge, können Sie die Live-Vorschau sehen. Was ist mit 25.626 besser. Wenn ich 26 hinzufüge, es einfach runter, also müssen wir es wieder gutmachen Ich füge Semikolon hinzu und hier füge ich einen kleinen Code wie Margin Top, Margin Top, Presenter hinzu, dann füge ich hier etwas Fügen wir minus zehn px hinzu, das ist zu viel. Was ist mit fünf? Es ist immer noch zu viel. Was ist mit zwei? Eins scheint eins, nein, zwei werden zwei sein, das wäre die perfekte Kombination. Wir haben unser Schaltflächensymbol erfolgreich vergrößert und jetzt klicke ich auf Veröffentlichen und auf die echte Vorschau Im nächsten Video wird es so aussehen Lassen Sie uns diesem Teil eine Animation hinzufügen. 103. Informationen zum Zusammenfassungsabschnitt - Teil 04: Jetzt müssen wir eine Animation hinzufügen, machen wir es. Zuerst muss ich diesen beiden Elementen einen Moment hinzufügen, wenn wir auf der Website scrollen. Lassen Sie uns das zuerst für diesen Container machen. Ich wähle den Container aus oder wähle hier aus. Eigentlich ist das der Container. Ich wähle den Container aus, dann können Sie im Stil den Scroll-Effekt sehen Dieser Scroll-Effekt gilt für die inneren Elemente. Es funktioniert also nicht, wir müssen diesem gesamten Abschnitt einen Scroll-Effekt hinzufügen Um das zu tun, klicke ich vorab auf Advance, wir haben den Bereich Bewegungseffekte Im Bewegungseffekt können wir diesen Scroll-Effekt hinzufügen. Beim Scroll-Effekt haben wir viele Optionen und hier haben wir die Funktion, das Gerät auszuwählen, auf dem wir den Effekt verwenden möchten Aber lassen Sie es uns vorerst so belassen. Dann muss ich vertikales Scrollen hinzufügen. Wenn ich das scrolle, muss ich das rauf und runter gehen das zu tun, klicke ich auf dieses Stiftsymbol, und wenn ich hier den Scroll-Effekt auswähle, kann ich ihn nach unten oder oben einstellen Wenn ich es also als aktiviert einstelle, wird es beim Scrollen nach oben Wenn wir es nach unten scrollen, geht es nach oben. Wenn wir nach oben scrollen, geht es runter. Und ich brauche es runter. Jetzt muss ich den Aussichtspunkt einrichten. Okay, jetzt gehe ich hoch und lass uns die Bewegungen sehen. Wenn unser Standpunkt hier ist, können wir dieses Symbol auf diesem Teil zeigen, aber ich brauche es nicht, um es hier zu zeigen Um das Problem zu beheben, werde ich diesen Standpunkt von unten auf hier ändern Wenn ich dann anrufe, wird es von hier aus beginnen Siehst du, wenn der untere Teil so beginnt, nach unten zu scrollen und wir müssen diesen Aussichtspunkt von oben hinzufügen, um ihn hinzuzufügen, wir müssen weiter nach unten gehen, also füge ich einen neuen leeren Container wie diesen Dann fügen wir die mittlere Höhe als 800 hinzu, mal sehen, hier ist 800 genug. Und nett. Und jetzt noch mal, ich klicke hier auf eine Tanz-Axt und hier, mal sehen, was passiert, wenn unser Oberteil an unserem oberen Teil so aufschlägt wie hier, ich muss nur zu diesem Teil kommen. Jetzt können Sie sehen, dass es sich deutlich verändert, und wenn ich es horizontal machen möchte, kann ich diesen horizontalen Scolin verwenden Jetzt geht es so auf beide Seiten, aber ich mag die Oberseite und die Unterseite und dafür fügen wir von oben nach Um das zu tun, wähle ich dieses Bildfeld aus und gehe dann weiter zu Advance. Wir gehen zur Bewegung achtern und klicken hier auf Scrollen beim vertikalen Scrollen Ich füge die Richtung von hinzu, was bedeutet, dass dieser Abschnitt beim Scrollen nach oben verschoben wird. Lassen Sie uns das W korrigieren, wenn es hierher kommt Ich brauche das Oberteil, damit es so runtergeht. Ich muss nur so hingehen und nachsehen, gut. Wir müssen das ändern, um es besser zu machen. Klicken wir auf dieses Bildfeld und gehen wir zum Layout und fügen es im vertikalen Offset Layout und fügen es im vertikalen Offset hier ein. Jetzt denke ich, es sollte besser funktionieren als zuvor oder wie wäre es, es hier in der Mitte zu platzieren? Ja, wenn wir es zur Mitte hinzufügen, wird es perfekt funktionieren. Nett. Nett, nett. Gehen wir jetzt zu den Motion Effxs und klicken Sie hier. Dann legen wir den Boden fest. Hier, das werde ich tun. Hier, wenn das so läuft, stelle ich hier den Top-Pass ein, dann scrolle nach oben, scrolle nach oben wird gut funktionieren. Nein, irgendwas stimmt nicht. Eigentlich müssen wir diese Layoutposition eher in der Mitte platzieren , hier, mal sehen, ob etwas falsch daran ist. Aber jetzt denke ich, dass es gut funktioniert. Es funktioniert gut. Sicherlich müssen wir das Stück machen. Okay, jetzt ist es Arbeit, okay. Wir müssen mit den Werten spielen , die verwendet wurden, um den besten Bewegungseffekt zu erzielen, und jetzt finde ich, dass er gut aussieht. Okay. Wir fügen es einfach hinzu und hier fügen wir den Bewegungseffekt zu diesem ganzen Abschnitt hinzu. Also klicke ich auf den Abschnitt und gehe zu Advance, weil Hinzufügen von mehr Bewegungseffekten und Transaktionen die Website verlangsamt Wir müssen das also im Hinterkopf behalten und ich füge diese Art von Effekt hinzu. Lass es uns veröffentlichen und es uns auf der echten Website ansehen. Ja, es wird so funktionieren, aber das sollte dem Header-Design nicht ähnlich sein. Mal sehen, dass der Bewegungseffekt dieses Header-Inhalts verblasst, also müssen wir diesem Abschnitt eine Überblendung hinzufügen Bewegungseffekte, kein teilweises Verblassen wie hier. Veröffentlichen Sie Wenn Sie jetzt das Design überprüfen, ja, es wird so aussehen, hier haben wir ein Problem. Wenn wir das rauf und runter scrollen, ist dieses Tempo das Tempo erreicht, also müssen wir das Tapen tatsächlich auf dem größeren Bildschirm korrigieren, aber wir müssen es trotzdem reparieren, nein Um es im Layout zu korrigieren, füge ich Benutzerdefiniert mit like hinzu, dann sollte es in Ordnung sein. Ich denke. Mal sehen, kann veröffentlichen und irgendwas stimmt nicht. Was ist das? Lassen Sie uns diese Struktur verschwinden lassen und diesen Abschnitt auch verkleinern. Wenn ich es verkleinere, wird dieses Design immer größer und es gibt ein Problem, wir müssen es im Voraus beheben und hier, lassen wir es verkleinern. Der Offset ist in Ordnung Das Problem. Lassen Sie uns auf diesen Text klicken und den Text zentrieren und all diese Dinge entfernen und mit voller Breite machen wir dasselbe mit voller Breite und richten ihn mittig aus, und lassen Sie uns sehen, bis wir das Problem haben. Warum ist es passiert? Ich habe es als Fix mit etwas o eingestellt. Jetzt können wir das in Fixel einstellen Machen wir es so, dass 500, 500 zu schwach und 400, 200, 202 klein, 300, 300 für Woche zwei sind Eigentlich können wir die Größe von hier aus überprüfen. Die Breite beträgt 215. Um wie viel Uhr mache ich es? 215 sollte der Wind sein. Okay. Jetzt sollte es in Ordnung sein. Schau, kleiner Fehler, dass das Passgewicht jetzt gut ist, veröffentliche es und lass uns im Design sehen Ja, es wird jetzt so aussehen, bis es ein Problem gibt. Lassen Sie uns tatsächlich versuchen, es auch zu beheben. Ich denke links und rechts dazu so. Geben wir unsere benutzerdefinierten 250 ein, vielleicht sind 200 200 in Ordnung. Nicht in Ordnung. 15 veröffentlichen. Jetzt funktioniert es gut, alles klar. 104. Entwurf von Serviceteilen - Teil 01: Hallo, alle zusammen. Jetzt müssen wir diesen Abschnitt gestalten. Aber bevor wir diesen Abschnitt entwerfen, müssen wir bessere Symbole finden. Diese Symbole sehen nicht gut aus und stehen nicht für den Service, wir im Servicebereich anbieten. Außerdem haben wir hier andere Symbole und es ist besser bei Slim Icon. Um Symbole zu finden, können wir Websites wie Adobe Itok und Suchsymbole verwenden , oder wir können Google-Symbole verwenden, um Symbole zu verwenden Google-Symbole können kostenlos zum Google-Materialsymbol aufgerufen werden Sie können einfach nach Google-Google-Symbolen bei Google suchen das Materialsymbol und die Symbole zu erhalten klicken Sie darauf und hier haben Sie das Symbol. Ich muss das Aussehen dieser Symbole ändern, ich werde die Breite auf 200 reduzieren und dann den grauen Strich 200 machen. Dann ist die optische Größe 40 Weixel 40 Weixel ist besser und hier wird der Stil abgerundet und das Materialsymbol neu sein abgerundet und Ich wähle es einfach aus und hier machen wir Note auf Null und das Symbol etwas größer als 300 und lassen wir Note auf 200 setzen und hier können wir Zuerst müssen wir dieses Telefonsymbol ersetzen. Dazu klicke ich einfach auf das Telefonsymbol und lasse uns die Größe ermitteln. Es ist 32 Pixel mit lassen Sie uns hier suchen wie Telefon, hier haben wir ein Telefonsymbol und lassen Sie uns das alles Telefon auswählen und hier müssen wir diese Größe als 32 machen , drücken Sie Enter und die Farbe ist weiß, lassen Sie uns die Farbe weiß machen und klicken Sie auf PNG, und das Symbol wurde heruntergeladen und jetzt gehen Sie hier und klicken Sie einfach hier klicken Bild und Video, wählen Sie das Symbol wie dieses und Drücken Sie die Eingabetaste und jetzt können Sie einfach hier klicken. Wir haben es bereits ausgewählt. Eigentlich musst du hier das Co-Symbol auswählen, also klicke jetzt auf das Symbol und setze es so ein. Jetzt müssen wir es ein wenig verkleinern. Tatsächlich müssen wir das Symbol auswählen und es auf diese Weise verkleinern. Eigentlich hat es 32 Pixel entworfen. Wie auch immer, lass es uns jetzt hoch machen da 32 32 zu klein ist, findest du nicht? Ja, 32 ist zu klein. Lass uns 48 draus machen. 48 ist besser, behalten wir 48 als Größe. Gehen wir jetzt runter und hier haben wir eine Krankenschwester. Lass uns hier suchen wie Krankenschwester Wenn wir Krankenschwester suchen, haben wir solche Sachen. Lass uns nach Krankenhausgut suchen. Was ist mit Gesundheit? Okay, im Bereich Gesundheit, lass uns suchen. Lass uns ein Symbol finden, das für dieses Tempo geeignet ist. Ja, dieses Symbol wird okay sein. Wähle es aus, oder haben wir andere Symbole, die besser sind als es? Nein, von diesen Symbolen wird dieses Symbol dafür geeignet sein. Lass uns einfach versuchen, das Gewicht zu reduzieren. Holen Sie sich ein dünnes Liniensymbol und die Symbolfarbe ist blau. Ich lasse uns einfach diese blaue Farbe kopieren, damit wir die Symbolfarbe von hier aus einfach so ändern können . Okay. Dann lass uns die Größe überprüfen. Die Größe ist 57. Mach es 57. Eigentlich ist 57 zu groß. Machen wir 48 draus. Und klicken Sie auf Kopieren und GTU herunterladen. Gehen Sie jetzt hierher und wählen Sie das Symbol aus und klicken Sie auf Bild, um es hinzuzufügen. Tatsächlich wurde es nicht aktualisiert Klicken Sie auf diesen ganzen Abschnitt, um ihn so hinzuzufügen , und fügen Sie ihn so ein. Jetzt ist die Größe 57, lassen Sie uns diese Größe auf 57 reduzieren. Die 57 ist zu klein. 98 wird gut aussehen. Behalten wir es bei neun. Tatsächlich ist Linie 20 größer als ich mir das vorstelle. Kann diesen Hintergrund entfernen indem Sie hier klicken und auf den Zuschnitt klicken, dann können wir den Hintergrund so kopieren. Dann werden wir ein besseres Symbol haben. Was ist jetzt mit 30 bis 57? Jetzt so weit, so gut. Eigentlich sieht das dünne Symbol besser aus als dieses Symbol. Wie dem auch sei, lassen Sie uns Rot zu 100 machen , um das dünne Aussehen des dünnen Symbols zu sehen. Hier ist das dünne. Hier ist der dünne. Klicke hier und es ist. Jedenfalls. Jetzt müssen wir diese Icons ändern. Lassen Sie uns zuerst in der Präambel suchen. Sieht gut aus. Klick hier. Wir haben eine Milchflasche und sie sieht gut aus für hier. Wir müssen die Größe des Vektorsymbols ermitteln. Es ist 60 mal 80. Machen wir 60 draus und die Farbe ist die Farbe ist blau. Klicken Sie auf Confi eng herunterladen und wählen Sie dieses Symbol hier aus und klicken Sie hier. Dann füge es einfach so hinzu. Ich habe nicht hinzugefügt. Oh, ich verstehe, warum es nicht hinzugefügt wird, weil das eine Komponente ist. Klicken Sie hier und klicken Sie auf Instanz trennen, und dann kann ich hinzufügen, was passiert ist? Was ist hier passiert. Fügen wir es jetzt hier hinzu, klicken Sie einfach so und geben Sie es dann so aus Verkleinern Sie es jetzt. Was ist passiert? Hier. Eigentlich muss ich das entfernen oh lass uns dieses Bild so machen. Womit war das Bild ? Es ist 60. Wählen wir das Bild aus und machen es mit 60, nein, nicht gut, 120, die Hintergrundgröße sollte 12110 sein Die Größe sollte 110 sein. Jetzt muss ich auf dieses Bild klicken und dann auf Zuschneiden klicken und es so anhängen, weil wir es vergrößern können, wenn wir diese unnötige Größe entfernen. Dann kann ich es auf 60 setzen , also wähle das Bild vorab aus und drücke die Umschalttaste, um es zu vergrößern Es ist sechs Okay, sieht gut aus, und hier haben wir diesen Text, lassen Sie uns den Schwangerschaftsteil kopieren Okay, hier haben wir ein Schwangerschaftsbild und klicken Sie auf PNG, um es herunterzuladen und dieses Bild zu ersetzen. Klicken Sie auf dieses Bild , um es zu entfernen. Und hier fügen wir das Bild hinzu. Wir haben es gerade hier heruntergeladen, dann zweimal auf das Bild getippt und unnötigen Speicherplatz wie diesen beschnitten. Jetzt können wir die Raumverschiebung verringern und die Größe auf diese Weise verringern. Jetzt lassen wir Frauen menschliche Frauen kopieren. Suchen wir nach P und hier haben wir Weibchen. Wir können einfach diese Art von weiblichem Symbol oder Frauensymbol wie dieses hinzufügen oder oder dieses Symbol wird funktionieren. Laden wir es herunter und legen wir es ab, entfernen Sie es hier und nicht so fest. Klicken Sie einfach darauf und fügen Sie es wie folgt in das Feld ein und legen Sie es ein. Wir müssen die Größe überprüfen, soweit so gut und jetzt haben wir Hausarzneimittel, also lasst uns das kopieren und so einfügen , es ist wie Familie. Ich möchte diese Art von Symbol hinzufügen , weil bei dieser Art von Symbol auf PNG geklickt wird , um es herunterzuladen und dieses zu entfernen. Quickie, füge es so ein und drücke es dann so herunter Jetzt ist gut. Jetzt müssen wir diese Symbole zu unserer WordPress-Website hinzufügen . Klicken Sie auf dieses Symbol und auf X, klicken Sie auf Herunterladen und gehen Sie zur Website und klicken Sie hier, dann klicken Sie hier und wir können es einfach herunterladen. Es ist eine wirklich kleine Datei, also kann ich okay. Ja, lade es einfach herunter und mach es so und es sieht gut aus, klicke auf Veröffentlichen, um zu speichern und jetzt können wir anfangen , diesen Sex zu entwerfen 105. Entwurf von Serviceteilen - Teil 02: Hallo, alle zusammen. Lassen Sie uns nun diesen Abschnitt erstellen. Also hier gehe ich zu unserem Dashboard, und hier müssen wir einen Container wie diesen erstellen und lassen uns die Größe sehen. Die durchschnittliche Höhe betrug 666. Machen wir es hier, Mnhight 66, sechs, und jetzt gut hier, und hier müssen wir diesen Titel hinzufügen, um ihn hinzuzufügen, ich kopiere ihn einfach so, dann komm her und füge die Überschrift so hinzu, Vordertitel und gehe zu Style Set Align Center und Typograps Header und Textfarbe sollten diese schwarze Farbe haben und der Text sollte von hier aus abgeschnitten werden, also füge ich Bro hinzu, ich muss die Größe von 19 überprüfen. Es ist 120. Fügen wir es hinzu, klicken Sie hier und gehen Sie zu Advance, der obere Rand ist eins zu 20. Okay, so weit so gut. Was wir jetzt hinzufügen müssen, ist dieser Abschnitt. Wenn Sie diesen Abschnitt überprüfen, haben wir ein Rousel Wenn Sie ein Rousel hinzufügen möchten, können wir auf dieses Element hinzufügen klicken und das Karussell suchen Und wenn ich danach suche, erhalten wir ein solches Ergebnis und hier füge ich einfach diesen Autoartikel hinzu Jetzt muss ich diese unnötigen Sachen entfernen. Zuerst entferne ich die erste Folie und lasse nur zwei Folien übrig, und die angezeigte Folie wird zwei sein. Dann mache ich das hier, lass uns loslegen, Einsetzen ist okay. Navigation, Navigation ist okay. Lass uns Glo-Zeug machen, nachdem wir das Design fertiggestellt haben. Wenn Sie jetzt das Gehäusedesign überprüfen, ist es zu nah dran. Um das Problem zu beheben, klicke ich auf diesen Bearbeitungscontainer, und wenn wir jetzt hier nachschauen, können wir das via unter Slider Hashtag eins überprüfen Wenn wir wollen, können wir ihn also auch umbenennen. Aber vorerst werde ich das entfernen und hier A lassen wir den Abstand wie folgt entfernen. Jetzt müssen wir das linke und rechte Pad hinzufügen , um das Pad hinzuzufügen Ich klicke auf den Container und hier muss ich rechte Padnas 140 und das linke Padnus 140 hinzufügen Okay. Jetzt schnell und hier haben wir zwei Container. Ich wähle den Kausalwert aus und gehe im Voraus zu Advance, entferne all diese unnötigen Dinge hier zuerst, wir müssen diesen Titel hinzufügen und hier suche ich das Bildfeld so, einfach das Bildfeld hier hinein und mit dem Bildfeld können wir die Aufgabe ziemlich einfach erledigen. Die Ausrichtung erfolgt links und die Bildposition ist richtig Jetzt gehe ich zum Inhalt im Bereich Inhalt. Lassen Sie uns diese Details wie folgt hinzufügen, dann diesen einen Schritt wie diesen kopieren und dieses Bild herunterladen, das Symbol auswählen und in Exxpot exportieren Klicken Sie auf das Exportsymbol Dann kann ich das hier zu einem winzigen PNG hinzufügen , aber für dieses Bild lade ich es einfach so Fügen wir ALD-Text als pädiatrischen Teil hinzu und klicken Sie auf Konsultieren . Wählen Sie nun das Bildfeld und lassen Sie uns die Probleme beheben Lassen Sie uns zunächst herausfinden, dass die Größe dazwischen 20 mal 20 ist. Okay. Gehen Sie jetzt im Stil zu E, Imagepason ist 20, Contentpacing Gehen Sie jetzt zu Bild und Bildrand nicht. Die Bildbreite beträgt 100% Eigentlich ist es keine Bildbreite. Auf diese Weise verwendet das Bild die Standardgröße und jetzt müssen wir das Bild in der Mitte platzieren, um das zu tun. Lassen Sie uns dieses StmLTG in D ändern und jetzt zum E-Stil wechseln. Beim Inhalt die periodische Farbe die Textfarbe sein und die Typografie sollte wie folgt unterlegt sein Okay. Oder entfernen Sie den Rand und die Polsterung, die dann die volle Breite haben, dann sollte hier die vertikale Ausrichtung in der Mitte sein so weit so gut und jetzt müssen wir diesen Hintergrundschatten hinzufügen, Steinschatten oder auf den Felsschatten klicken und es ist 15 und hier haben wir die Informationen Lass es uns machen. Wir sind bereit, wenn Sie sich erinnern, wählen Sie das Bildfeld aus und gehen Sie im Voraus weiter, wir haben die pro Grenze Buchschatten bestellen, der Nerv ist 15 und die Farbe sollte auf HL X gehen , dann komm her und die Farbe sollte sich ändern, um hier zu klicken und HXL das CSS auszuwählen, den Farbcode zu kopieren und hierher zu kommen Ist der Farbcode so, wir fügen einfach ein Datum hinzu und wir müssen den Grenzradius ändern Wenn wir den Grenzradius überprüfen, ist die Reduzierung des Boards 20, lassen Sie uns auf 20 reduzieren. Okay. Jetzt funktioniert unser Schlagschatten nicht. Erinnerst du dich, dass dasselbe Problem beim Figma-Design aufgetreten ist Und was wir gemacht haben, ist, die Polsterung als 120 zu erstellen, dann fügen wir hier Margino Lass es uns für diesen machen. Dazu wähle ich den Container aus. Vorab ändere ich diese 140 auf 120 und mache sie auch hier zu 120. Dann klicken Sie hier. Für diesen Slider kann ich die rechte Polsterung als 20 und die linke Polsterung 20 hinzufügen 20 und die linke Polsterung Okay. Wenn wir das tun, können wir die Grenze deutlich sehen. Da wir die obere Polsterung als 20 hinzufügen müssen und die untere Polsterung ebenfalls 220 sein wird Jetzt müssen wir die Polsterung dieser Bildbox hinzufügen, sie ist 20, und auf das Bildfeld klicken und hier auf das Kettensymbol klicken und dann So weit, so gut und es sieht so aus, dann müssen wir nur dieses duplizieren und hier müssen wir die Größe dazwischen herausfinden Es ist auch 220, also können wir einfach hier klicken. Oder zum Layout auf dem Layout können wir 20 hinzufügen. Jetzt muss ich diese Details ändern. Lass uns sie ändern, von hier kopieren, hier klicken und so einfügen und das Bild ändern, um es zu ändern. Wir müssen dieses Symbol herunterladen und diesen Text kopieren um ihn zum alten Text hinzuzufügen, und auf Verbergen klicken. Okay Jetzt erstellen wir nur eine Seite und jetzt werde ich diese Folie duplizieren, weil wir dafür eine zweite Seite benötigen Ich gehe zu Carsels und klicke auf diese Schaltfläche zum Duplizieren, um den Slider zu duplizieren. Ich füge Slider als Namen hinzu, und jetzt müssen wir die Details wie zuvor ändern Also mach das Gleiche mit hier , einfach so. Exportieren, klicken Sie hier auf das Exportsymbol. beim Exportieren und fügen Sie das Al-Tag wie folgt hinzu. Klicken Sie auf Consiler, jetzt sind wir in Ordnung und hier haben wir ein Problem Dieser ist größer als dieser Problem zu beheben, klicke ich auf dieses Bildfeld und hier auf „Vergrößern“ und es wird so wachsen und wir können dasselbe auch mit diesen Elementen machen Jetzt haben wir hier ein großes Feld, um es zu entfernen. Ich klicke auf Karasel und Incara und ich gehe zum Stil, Abstand zwischen den beiden ist gleich Null und das Ball-Reduce-Pad rein, wir brauchen nichts davon Jetzt können wir auf die erste Folie klicken und das rechte Pad als zehn hinzufügen Dann klicken Sie hier auf dieses und gehen Sie zum nächsten Schritt und fügen Sie das linke Pad als zehn hinzu. Jetzt sieht es gut aus. Hier im Karussell können wir die Inhaltsdetails ändern. Hier können wir also den Namen des Karussells hinzufügen, also füge ich Dienste hinzu, und dann müssen wir hier noch einen Slider hinzufügen und wenn ich den Slider hinzufüge, sehe ich diesen Punkt Lassen Sie uns diese Punktdetails ändern, um das zu tun. Ich sollte in der Navigation zur Navigation gehen, nicht auf den Pfeil, es sollte Seitenzahl sein. Bei der Seitennummerierung ist es als Punkte festgelegt und bei Seitennummerierung im Stil gehe ich zu Stil Sehen wir uns den Stil an. Ich denke also, Stil ist 220. Also mal sehen, hier sind die D das. Ich schaue nur nach dem Stil, es sind 20. Lassen Sie uns also den Abstand auf 20 festlegen. Das ist Abstand vom Slider. Sehen wir uns den Abstand vom Slider aus an. Ich glaube, es sind auch 20, aber mal sehen. Ja, es sind 30, nicht 20. Machen wir 30, Position ist Mitte, dann ermittele Größe die Größe dieses einen Punktes. Es ist 20 mal 20, machen wir die Größe auf 20. Der Abstand zwischen den Punkten beträgt 20. Ist es nicht? Ja, es sind 20, was weniger? es scheint zu viel, also machen wir es so, als ob zehn immer noch zu viel sind. Machen Sie es wie sechs, das ist besser. Und Farbe, ich mache Grundfarbe als Farbe und unsere Farbe wird diese Akzentfarbe sein. Okay. Jetzt hat es perfekt funktioniert und haben wir Pfeile? Nein, wir haben keine Pfeile, also werde ich diese Pfeile entfernen, um sie für die Navigation Ich kann einfach Null oder auf Inhalt setzen, mal sehen, gibt es eine Möglichkeit, diesen Pfeilteil einfach zu entfernen und er wird einfach so verschwinden Okay. Lassen Sie uns jetzt weitere Inhalte hinzufügen. Um sie hinzuzufügen, haben wir die Inhaltsliste. Also lass es uns holen. Okay, hier ist der Inhalt, und wir müssen diesen Inhalt zur nächsten Folie hinzufügen . Also lass es uns machen. Kopieren Sie es einfach und fügen Sie den Inhalt ein und fügen Sie ihn so ein. Kopieren Sie dann erneut die kleine Beschreibung. Eigentlich keine kleine Beschreibung. Die Kreditbeschreibung sollte der Teil sein , den wir hinzufügen müssen. Nein, es geht um Seiteninhalte. Hier ist der Inhalt, für den wir Immunität haben und Maxine, kopiere ihn hier in unseren Servicebereich, füge den Inhalt von dort hinzu und sei dieser, dann kopiere die kleine Beschreibung, füge ihn so ein dann kopiere die kleine Beschreibung, , wie er hier ist und lass uns zuerst den Inhalt hinzufügen, dann können wir die Titel Mental Health Support, Adamall Description hinzufügen, einfügen, dann diesen kopieren, hier hinzufügen und dann Okay, füge es hier ein. Nett. Jetzt müssen wir die Bilder hinzufügen. Um also die Bilder hinzuzufügen, kopiere den Text von hier, lass uns den Impfteil kopieren und ihn auf den Impfstoff setzen , wird der Text sein, ihn in Google ein. Klicken Sie auf PNG zum Herunterladen und hier müssen wir hinzufügen, um es hinzuzufügen Ich werde eine Instanz davon erstellen, dann werde ich es trennen, klicken Sie hier, um es zu trennen, und dann kann ich dieses Bild einfach durch das Symbol ersetzen und auf das Bild klicken und hier haben wir den Impfstoff so. Also machen wir das Axtteil und machen es tatsächlich, wir können es einfach wie hier hinzufügen Eigentlich können wir einfach so klicken, dann darauf klicken und lassen Sie es uns in das Icon einfügen und diesen Vektor entfernen und einfach die Größe so verkleinern und hier sollte es die Größe haben. Sehen wir uns die Größe 125, 110 an, lassen Sie uns diese Icon-Größe auf 125 setzen diesen Vektor entfernen und einfach die Größe so verkleinern und hier sollte es die Größe haben. Sehen wir uns die Größe 125, 110 an, , eins Okay Jetzt sieht das perfekt aus und klicken Sie hier, dann exportieren, klicken Sie auf das Exportsymbol, und ich werde zuerst fortfahren, ich werde das hier platzieren, dann werde ich weitermachen, Generator behalten diesen Text kopieren, zum Material gehen und es so ablegen. Dann holen wir uns diese Art von Symbol und setzen es hier richtig ein. Ich habe es einfach so eingerichtet, es ist gut, exportiere es und dann psychische Gesundheit, suche psychische Gesundheit. Suche Mentor. Hier haben wir den Psychologie-Teil, laden Sie ihn herunter, gehen Sie hierher und ein Bild wie dieses, wählen Sie dann das Symbol aus, klicken Sie auf das Exportsymbol, und dann haben wir Counsel Search Health Was ist mit Ernährung? Ernährung. Dieses Symbol wird funktionieren. Laden Sie es herunter, klicken Sie hier und setzen Sie es so ein. Jetzt klicke ich auf das Exportsymbol. Jetzt können wir diese Symbole hinzufügen. Klicken Sie auf dieses Bildfeld, klicken Sie hier und zuerst haben wir das Symbol. Ich denke, das ist das erste Symbol. Es sollte das Symbol sein. Ja, ja, ja, es ist das Symbol, kopiere es und kopiere den Titel, um einen alten Text hinzuzufügen. Das Hinzufügen von altem Text ist wirklich wichtig , weil es hilft, Ihre Website zu frankieren, dieses Bild in Suchmaschinen zu frankieren. Versuchen Sie immer, das L-Tag hinzuzufügen und dann, was wir hinzufügen müssen. Ich glaube, dieses Bild im mentalen Bereich. Ich glaube, ich füge das falsche Bild hinzu, aber es ist das mentale Bild, mentale Gesundheit, und füge es vorerst einfach nicht hinzu. Gesundheit ist eigentlich Vorsorge und Vorbeugung. Gesundheit ist Screen und Vorsorge, klicken Sie darauf, und das sollte sein, dass die Suche das nicht kann. Eigentlich werde ich es anhand des Designs überprüfen. Also, ich sehe, dieser hier ist der Richtige. Ich kann jetzt ein Leerzeichen eingeben und auf Auswählen klicken. Okay, hier können wir das Symbol für psychische Gesundheit so hinzufügen. Okay. Jetzt können wir hier das Apple-Symbol hinzufügen. In Ordnung, klicken Sie auf Veröffentlichen. Schauen wir uns das Design an und unser Design wird so aussehen und wir können mehr hinzufügen , es funktioniert perfekt und wir können mehr Dinge wie Covereffekte und andere Dinge hinzufügen . Fügen wir sie hinzu, nachdem wir die gesamte Website entworfen haben. Ich denke, das wird viel besser sein , als es von hier aus hinzuzufügen. Hier haben wir ein Problem, das zu beheben. Ich werde einfach auf Casel klicken und zum Set in gehen. Ich werde die Infinity-Schriftrolle entfernen und ich denke, sie wird das Problem beheben, sie veröffentlichen und jetzt wollen wir sehen, mal sehen Ich repariere einfach kein Infinity Scroll mehr und kein Problem mehr. So weit, so gut und wir sehen uns in der nächsten Lektion. Wir müssen das Symbol Her Effect hinzufügen. Lassen Sie uns sie tatsächlich hinzufügen, nachdem wir die Website fertiggestellt haben. Tschüss. 106. Verbesserung der Sicherheit: Hallo, alle zusammen. Bevor wir weitermachen, wollen wir die Sicherheit unserer WordPress-Website verbessern. Es gibt also ein paar Dinge, die wir als ersten Schritt tun müssen. Lassen Sie uns das Sicherheits-Plugin installieren. Also gehe ich zu Plugins und klicke auf Neues Plugin. Okay, hier werde ich nach Word Pence suchen. Jetzt werden Sie Wordpens Security von WordpensPlug in sehen. Also lasst uns dieses Plugin installieren. Klicke auf Jetzt installieren und es wird installiert, dann klicke ich auf Aktivieren. Okay. Hier werde ich klicken, um eine Word Pens-Lizenz zu besorgen. Hier haben wir einen Preisplan, und ich werde Word Free Bland verwenden Hier klicke ich auf Kostenlose Lizenz anfordern, und hier klicke ich auf Ich bin okay, warte 30 Tage auf den Schutz vor neuen Threads, klicke darauf und hier füge ich meine E-Mail-Adresse Wenn Sie dann möchten, dass Sie eine WordPress-Sicherheits - und Schwachstellenwarnung per E-Mail erhalten, klicke ich auf Nein und hier auf dieses Kontrollkästchen, um den Allgemeinen Geschäftsbedingungen zuzustimmen. Dann klicke ich auf Registrieren. Jetzt wird eine E-Mail an unsere E-Mail-Adresse gesendet. Ich gehe zu meinem Gmail-Konto und überprüfe die E-Mail und hier habe ich die E-Mail erhalten. Ich klicke einfach auf Meine Lizenz automatisch installieren und hier wird es zur Website weitergeleitet und ich klicke auf Lizenz installieren. Okay, jetzt klicke ich auf. Gehe zum Dashboard. Ordnung, wir haben das Wordpens-Sicherheits-Plugin erfolgreich auf unserer WordPress-Website installiert , und jetzt müssen wir einige Konfigurationen vornehmen Als ersten Schritt sehen Sie, dass wir eine Meldung erhalten, um die automatische Aktualisierung des Wordpress-Sicherheits-Plugins zu aktivieren Also klicke ich auf Automatisches Update aktivieren. Wenn Sie es nicht gesehen haben, können Sie es ignorieren, und jetzt werde ich zuerst auch auf diese Firewall klicken. Sie werden hier einen Nachrichtenaufruf sehen, Sie werden hier einen Nachrichtenaufruf sehen um Ihre Site so sicher wie möglich zu machen. Nehmen Sie sich einen Moment Zeit, um Ihre Wordpens-Webanwendungs-Firewall zu optimieren . Ich klicke also auf hier klicken, um sie zu konfigurieren Okay. Jetzt erhalten Sie diese Art von Pop-up und hier wähle ich diese empfohlene Version aus und klicke auf HT Access-Datei herunterladen, um unsere HD-Zugangsdatei Hier kann ich einfach auf Weiter und dann auf Okay klicken. Jetzt befinden wir uns im Firewall-Bereich und der Status der Firewall für Webanwendungen befindet sich derzeit im Lernmodus . Nach einigen Tagen wird die Firewall auf unserer Website automatisch aktiviert Nach einigen Tagen wird die Firewall auf unserer Website Dies wird am 13. Februar geschehen. Ich werde es so belassen und jetzt kann ich auf Ican klicken und es entfernen. Dann können wir hier Ican starten. Ich werde auf „Neues Ican starten“ klicken und es wird meine Website öffnen. Dann gehe ich zu Anmeldesicherheit, entferne das und bei Anmeldesicherheit können wir die Zwei-Faktor-Authentifizierung hinzufügen, aber normalerweise aktiviere ich die Zwei-Faktor-Authentifizierung für unsere WordPress-Website nicht aktiviere ich die Zwei-Faktor-Authentifizierung für , weil ich eine andere Möglichkeit habe, unsere Anmeldeseite zu schützen , und vorerst klicke ich auf Set in, scrolle nach unten und hier klicke ich auf Recapture bei Login aktivieren und Seite zur Benutzerregistrierung Mit dieser Funktion können wir also Google Recapture zu unserer Website hinzufügen Ich klicke auf diese Recapter-Admin-Seite und sie wird auf unsere Google-Rückeroberung verweisen. Seite. Wenn Sie sich auf dieser Seite anmelden, können Sie auf die Schaltfläche Erstellen klicken Hier können wir unsere Website-Details hinzufügen. Hier müssen wir ein Label hinzufügen. Fügen wir ein Label wie unseren Domainnamen hinzu. Auf diese Weise füge ich nur den Domainnamen und den Typ des neuen Kapitels hinzu. Dann müssen wir hier unseren Domainnamen hinzufügen. Ich werde einfach den Domainnamen kopieren und das Zeug entfernen und nur den Domainnamen mit.com oder Punkten verwenden In diesem Fall Punkte, dann klicke ich auf Domain hinzufügen und sie wurde erfolgreich Und hier müssen wir die Google Cloud-Plattform einrichten und ich habe bereits ein Projekt in Google Cloud erstellt, also wähle ich eines davon aus, dann klicke ich auf Subm. Jetzt erhalten wir den Seitenschlüssel und den Sicherheitsschlüssel, also kopiere ich sie einfach und füge sie so und lassen uns diese Tasten verschieben und dann klicke ich auf Speichern Wir haben erfolgreich die Anmeldesicherheit hinzugefügt, um dies zu überprüfen Ich werde mich von der Website abmelden und wenn ich auf unsere WordPress-Anmeldeseite gehe, werden wir dieses durch ein Kapitel geschützte Logo sehen, was bedeutet, dass es erfolgreich zu unserer Website hinzugefügt wurde. Jetzt klicke ich erneut auf Anmelden. Okay. Dann gehen wir mit Wortstiften zum Dashboard. Dann gehen wir zur Scan-Seite und überprüfen das Ergebnis. Derzeit haben wir keine Probleme gefunden, und das ist auch gut so. Wenn Sie Probleme sehen, können Sie sie überprüfen und beheben. Jetzt gehe ich zu L OptionsoelOptions und behalte die meisten davon als Standard bei, behalte die meisten davon als Standard bei, und in den E-Mail-Einstellungen aktiviere ich die Option E-Mail an mich senden, wenn Wordpens deaktiviert ist und E-Mail senden, wenn die Wordpens-Webanwendungs-Firewall ausgeschaltet ist, sodass ich mich die Wordpens-Webanwendungs-Firewall ausgeschaltet ist, nicht über das Scanergebnis informieren muss Wenn wir es hinzufügen, werden wir eine Menge E-Mails erhalten, und Ich brauche diese nicht. Wenn Ihre Website viele Threads hat , sollten Sie diese Dubs aktivieren, aber for ist nicht notwendig und ich brauche diesen, diesen, diesen nicht, und ich mache diesen Alarm nur, wenn die Anzahl der Angriffe auf meiner Website stark zunimmt Wenn wir diese E-Mail-Präferenzen festlegen, erhalten wir die E-Mails mit den am dringendsten benötigten Updates Jetzt klicke ich auf Änderung speichern 107. WordPress-Anmelde-URL ändern: Hallo, alle zusammen. Wir können mit jeder WordPress-Website und Anmeldeseite auf jede WordPress-Website zugreifen. Hallo, alle zusammen. Wir können auf jede WordPress-Anmeldeseite zugreifen indem wir unsere Website eingeben. Irlah WPAdmin. In diesem Fall punktet das benutzerdefinierte Website-Design Jeder, der auf die Wordpress-Anmeldeseite zugreift. In den meisten Fällen verwenden wir den Benutzernamen als Admin. Wenn jemand einen Bot auf deiner Anmeldeseite ausführt oder versucht, die Anmeldedaten zu erraten, kann diese Person auf das WordPress-Dashboard zugreifen. Um dies zu beheben, können wir die URL der WordPress-Anmeldeseite ändern . Lass uns das machen. Zuerst gehe ich zum WordPress-Dashboard, indem ich mich auf der WordPress-Website anmelde Hier gehe ich zu Plugins und füge ein neues Plugin hinzu. Und hier werde ich nach WPs H Login Presenter suchen , jetzt haben wir dieses WPs Hide Login, Plug-In und momentan ist es mit unserer Wordpress-Version noch nicht getestet Aber versuchen wir es zu installieren. Wenn Sie sich diese Lektion ansehen, ist sie möglicherweise mit Ihrer Website kompatibel. Ich klicke auf „Jetzt installieren“ und dann auf „Aktiviere es erfolgreich Jetzt übertrage ich das Set im Set. Wir können sehen, dass WPs sich angemeldet haben Einfach darauf klicken und wenn ich hier nach unten scrolle, können wir die Login-URL und die URL Four oh four oh page not found angeben , was bedeutet, dass wir eine benutzerdefinierte Seite mit vier Seiten nicht gefunden erstellen und sie hier einstellen können vier Seiten nicht gefunden erstellen und sie hier einstellen Lassen Sie uns vorerst nur die Anmelde-URL ändern Um das zu tun, kannst du diesen Text einfach ändern, also füge ich hier den GA-Login wie folgt hinzu und denke immer daran, dir diese URL oder den Text, den du hinzufügen wirst, zu merken . Ich werde einfach den Login hinzufügen. Wenn Sie diese URL vergessen, können Sie nicht auf das WordPress-Dashboard zugreifen. Sie müssen die Datenbank und die Plugin-Datei bearbeiten. Denke immer daran. Ich füge einfach den Login hinzu und klicke auf Änderungen speichern und dann auf Logo. Wenn ich auf Abmelden klicke, ändere ich die Seiten-URL zur Anmeldung Wenn ich jetzt versuche, den WP-Administrator hinzuzufügen, wird auf die Vier-Vier-Seite verwiesen Lass uns hier den Login hinzufügen, sodass du diese URL jetzt alleine mit dem Benutzernamen und dem Passwort teilen kannst diese URL jetzt alleine mit dem Benutzernamen und dem Wenn eine Person versucht, einen WP-Administrator hinzuzufügen oder sich anzumelden, wird diese Person das nicht tun können, und das wird dazu beitragen, dass die professionelle Website erhalten bleibt und niemand von der Anmeldeseite deiner Website erfährt. Okay, jetzt klicke ich auf Anmelden auf der Website. Hier können wir die Aktivitäten von Word Trends in der letzten Woche sehen. Eigentlich brauche ich keine Daten, also gehe ich zur Option Bildschirm und deaktiviere das Symbol für die Worden-Aktivität in der letzten Woche und Earl Good 108. Erstellen benutzerdefinierter Felder mit dem Plugin Advanced Custom Fields: Hallo, alle zusammen. Jetzt müssen wir diesen Bereich für unsere speziellen Anbieter einrichten. Das ist also die Teammitgliederseite auf Element. Wir haben kein Widget, um Teams zu erstellen. Wir haben Ortho-Box und Bild-Box, aber wenn wir diesen Abschnitt mit dieser Bild-Box oder Ortho-Box erstellen , ein Problem darin, dass wir diese Art von Link nicht hinzufügen können hier klicken, um ein Element und ein Suchbild hinzuzufügen Okay, hier sieht das Bildfeld so Lassen Sie uns als Beispiel einfach eine Flexbox erstellen und hier klicken, um ein Element und ein Suchbild hinzuzufügen Okay, hier sieht das Bildfeld hier sieht das Bildfeld und es hat nicht diese Art von Link, den Link zum Ansehen des Profils, den Link zum Ansehen des Profils, lassen Sie uns das Ortho-Kästchen ankreuzen und so bearbeiten. Orthobox werden sowieso nicht funktionieren. Ein weiteres Problem ist, dass selbst wir diese Art von Bildbox verwenden. Ich glaube, Sie haben derzeit zehn Teammitglieder Aber in Zukunft, in wenigen Monaten, wird Ihr Unternehmen drei weitere Mitglieder einstellen, was bedeutet, dass das Unternehmen dieses neue Teammitglied hinzufügen muss , indem es das Design der Website bearbeitet. Wenn wir jedoch einen anderen Bereich erstellen , können wir unsere Teammitglieder hinzufügen Gehen wir also zur WordPress-Administrationsseite. Wenn wir hier einen Abschnitt wie Teammitglieder haben, können wir mithilfe dieses Abschnitts ganz einfach Teammitglieder hinzufügen. Wenn wir also die Teammitglieder hinzufügen, fügt WordPress dieses Teammitglied automatisch zu unserem Bereich für spezielle Anbieter hinzu. Um dies zu erreichen, können wir das Plugin für benutzerdefinierte Felder verwenden. Mit Plugins für benutzerdefinierte Felder können wir einen benutzerdefinierten Posentyp erstellen. Derzeit haben wir Posentypen wie Beiträge und Seiten, aber mit diesem Plugin für benutzerdefinierte Felder können wir das wahre Potenzial von Wordpress ausschöpfen und verwenden auch Elemento Pro Bei Element of Pro haben wir Loop-Grid- und Loop-Carasa-Elemente, was bedeutet, dass wir diesen Abschnitten ganze Vorlagen hinzufügen können Vielleicht verstehst du das noch nicht ganz, aber in den nächsten Lektionen wirst du die Typen der benutzerdefinierten Posen und die Stärke von Element of Pro klar verstehen Typen der benutzerdefinierten Posen und die Stärke von Element of Pro Lass uns anfangen. Zuerst gehe ich zum WordPress-Dashboard und klicke hier unter Plugins auf Neues Plug-In hinzufügen und suche nach benutzerdefiniertem Pos-Typ-Presenter. Jetzt erhalten wir diese Art von Ergebnis und hier wählen wir diese erweiterten benutzerdefinierten Felder von WP Engine Klicken Sie auf Jetzt installieren. Dann klicken Sie auf Aktivieren. Okay, ich habe aktiviert. Wenn wir auf Details anzeigen klicken, können wir sehen, dass das erweiterte benutzerdefinierte Feld die Word-Website in ein vollwertiges Content-Management-System verwandelt , indem es Ihnen die Tools bietet, mit denen Sie mehr aus Ihren Daten machen Fangen wir gut an Jetzt sehen Sie einen Menüpunkt namens ACF In diesem Menüpunkt gehe ich zuerst zum Pose-Typ Im Posentyp können wir einen neuen Pausentyp erstellen. Ich klicke auf Neu hinzufügen und lege hier das Label als Anbieter fest. Eigentlich unsere Anbieter. Lassen Sie uns einen Anbieter hinzufügen. Und der singuläre Name wird Provider sein und der Post-Schlüssel wird automatisch hinzugefügt Derzeit haben wir keine existierenden Taxonomien, also werde ich nichts auswählen und die Sichtbarkeit wird Also hier klicke ich einfach auf Änderungen speichern. Wenn ich auf Änderungen speichern klicke, wird im Menüpunkt ein neuer Abschnitt mit dem Namen Unsere Anbieter angezeigt. Wenn ich auf EO-Anbieter klicke, sollte es leer und in Ordnung sein. Das Symbol bezieht sich jedoch nicht unsere Anbieter. Um das Symbol zu ändern, auf unsere Anbieter. Um das Symbol zu ändern, klicke ich bei der erweiterten Konfiguration auf Erweiterte Konfiguration bei Sichtbarkeit auf Sichtbarkeit. Hier haben wir das Symbol festgelegt und hier können wir ein Symbol auswählen, das auf unsere Website oder unseren Anbieterbereich bezieht. Ich werde diese Art von Symbol hinzufügen, dann konzipieren wir Änderungen Ich ändere mich einfach so. Okay, der erste Teil ist abgeschlossen. Und dann gehe ich zu Feldgruppen in Feldgruppen, ich werde auf Jetzt hinzufügen klicken und hier können wir die Felder hinzufügen , in denen wir die Daten unserer Anbieter speichern möchten . Gehen wir zum Inhalt unserer Website. Hier ist der Inhalt unserer Website, und in unserem speziellen Anbieterbereich haben wir den Namen, die Rolle und Kurzbeschreibung sowie die Beschreibung des Darlehens. Außerdem haben wir ein Bild. Lassen Sie uns diese Details hinzufügen. Die erste Feldbeschriftung lautet Anbietername des Anbieters, Name des Anbieters und dieses Leerzeichen wie dieses, dann füge ich keinen Standardwert hinzu. Bevor wir das tun, müssen wir den Titel der Feldgruppe hinzufügen. Fügen Sie den Feldgruppentitel hinzu, ich werde unser Anbieterfeld so hinzufügen, dann hier werde ich es tun. Dann fügen wir hier einfach eine Textfeldgruppe hinzu, und jetzt klicke ich auf AddFEL, um ein neues Feld hinzuzufügen. Hier was wir brauchen, um diese Rolle hinzuzufügen kopieren Sie die Rolle und hier den Feldtyp, wir haben eine Menge Optionen zur Auswahl Lassen Sie uns die Feldtypen überprüfen, und hier haben wir die Wahl als Select Fügen wir es als Auswahl hinzu und dann füge ich hier Feldbezeichnung als Rolle hinzu und der Feldname wird automatisch hinzugefügt, und hier können wir Rollen hinzufügen. Schauen wir uns also derzeit die Rollen dieser Anbieter an. Eigentlich sind sie unterschiedliche Rollen. Wir können dafür einfach einen Feldtyp vom Typ Textfeld hinzufügen dafür einfach einen Feldtyp vom Typ Textfeld , da wir keine wiederholten Rollen haben Lassen Sie uns diesen Feldtyp also in Textfeld oder Text ändern. Okay. Jetzt klicke ich wieder auf Neu hinzufügen und hier können wir hier schließen, hier können wir auf Feld schließen klicken. Und okay, was wir jetzt hinzufügen müssen, ist eine kurze Beschreibung. Kopieren Sie einfach diese Kurzbeschreibung. Und lassen Sie uns es als Feldbeschriftung verwenden, und hier ändern wir diesen Text in einen Textbereich und klicken auf Schließen und AddFil, um ein neues Feld hinzuzufügen Und lass uns sehen. Jetzt haben wir hier die Kreditbeschreibung, einfach kopieren. Und für diesen können wir den Editor hinzufügen. Hier haben wir den Visivc-Editor, also können wir auf VisWKEditor klicken und hier als Feldbezeichnung können wir eine Kreditbeschreibung hinzufügen, auf Schließen und auf Feld klicken, dann müssen wir das Bild hinzufügen Für das Bild füge ich einfach die Feldbeschriftung als Headshot hinzu, dann lautet der Feldtyp Das Rückgabeformat wird Bildarray sein, und ich denke, jetzt haben wir ein Feld. Wir haben also den Namen des Anbieters, Kurzbeschreibung der Rolle, die Beschreibung des Darlehens und den Kurztext. Ja, ich meine, ändere das einfach in einen Namen. Sie müssen den Namen des Anbieters nicht hinzufügen, fügen Sie ihn einfach als Namen hinzu. Okay. Wenn Sie einen anderen Typ von Vergangenheit oder eine andere Art von Website erstellen möchten, können Sie diesen Feldtyp nach Belieben hinzufügen. Für dieses wird das großartig sein und hier müssen wir die Regel festlegen. Die Regel zeigt diese Feldgruppe an, wenn wir hier die Pose festlegen können und sie entspricht unserem Provider. Hast du dich daran erinnert, dass wir unseren Profis-Typ als unseren Anbieter geschaffen haben? Wir können es also so hinzufügen und derzeit müssen wir nur diese Feldgruppe in diesem Anbieterbereich sehen . Klicken wir also auf Änderungen speichern , um diese Feldgruppe zu speichern. Wenn ich jetzt zu unseren Anbietern gehe und hier auf Neuen OR-Anbieter hinzufügen klicke, und hier haben wir unsere Anbieterdetails, also können wir das wie folgt erhöhen. Und hier haben wir einen Namen, eine Kurzbeschreibung der Rolle, eine Beschreibung und den Headshot, um dieses Bild hinzuzufügen. Das ist also dem Beitrag ähnlich, aber hier haben wir benutzerdefinierte Felder, mit denen wir die Details unserer Teammitglieder hinzufügen können. Fügen wir diesen Inhalt also dem O-Provider-Bereich hinzu und setzen wir die Lektion fort. Wählen Sie hier „Rollen“ und fügen Sie es so ein und kopieren Sie die Kurzbeschreibung, fügen Sie sie so ein, und hier haben wir die Kreditbeschreibung für die Kreditbeschreibung Ich werde das einfach als Text wie diesen kopieren. Aber wenn wir wollen, können wir dieser Kreditbeschreibung Stile hinzufügen, und jetzt müssen wir den Headshot hinzufügen. Fügen wir den Headshot hinzu, um den Headshot hinzuzufügen Ich klicke auf Bild hinzufügen und hier können wir auf unsere Medienbibliothek zugreifen und ich klicke auf Dateien hochladen und auf Dateien auswählen. Hier haben wir das Bild unseres Anbieters, also wähle ich alle aus und klicke auf Öffnen, um sie alle hochzuladen Lassen Sie uns nun das Bild herausfinden. Das erste Bild ist Ärztin Sarah Thomson. Das wird das erste Bild sein. Fügen Sie dem ALT-Text den Namen des Arztes hinzu und klicken Sie auf C CLC. Ich habe gerade so hinzugefügt. Okay. Nun, hier werde ich den Titel als Ärztin Sarah Thompson hinzufügen und ich werde keine Beschreibung hinzufügen. Dann klicke ich auf Veröffentlichen, um die Anbieterdetails zu veröffentlichen. Okay. Wenn wir es jetzt hier überprüfen, können wir die Daten des Arztes sehen. So weit, so gut, also lassen Sie uns weiterhin die Daten unseres Anbieters hinzufügen und ich werde hier des Arztes oder den Namen des Anbieters kopieren, die Rolle und die Kurzbeschreibung sowie die Kreditbeschreibung kopieren. Schließlich das Bild, fügen Sie dem Titel den Namen hinzu und gehen Sie zu Bild hinzufügen. Dann lass uns das Bild sehen. Dies ist das Bild bei ALT Tanks. Klicken Sie auf CLF und dann auf Veröffentlichen Jetzt können wir unter Neu Unsere Anbieter darauf klicken und hier finden wir den Namen des nächsten Arztes hier und den Namen hier. Eigentlich brauchen wir dieses Namensfeld nicht weil wir den Titel bereits als Namen haben, aber lassen wir es vorerst so. Suchen Sie nach der falschen, kurzen Beschreibung, langen Beschreibung und fügen Sie dann ein Bild hinzu. Doktor Emma, hier ist der Arzt, den Emma veröffentlichen kann Klicken Sie auf „Neu hinzufügen“. Unsere Anbieter hier werden die restlichen Ärzte hinzufügen und Sie sehen sich. Wir haben unsere Ärzte erfolgreich hinzugefügt. Ich gehe zu unserem Anbieterbereich und klicke auf ELO-Anbieter. Hier sind die Earls-Anbieter , die wir haben. Wenn wir wollen, können wir jetzt auf Bearbeiten klicken oder es in den Papierkorb legen oder irgendwas anderes machen. Wenn wir auf klicken, werden wir derzeit die Details nicht sehen da wir sie nicht konfiguriert haben. Eigentlich müssen wir sie nicht so konfigurieren und in der nächsten Lektion fügen wir diese Details wie folgt zur Homepage hinzu. 109. Gestalten Sie unseren Anbieterbereich - Teil 01: Hallo zusammen, wir haben gerade unsere Anbieterdetails hinzugefügt und jetzt ist es an der Zeit, die Website zu gestalten. In unserer Figma-Datei ist hier der Abschnitt , den wir entwerfen müssen Hier haben wir ein Karussell und lassen Sie uns damit beginnen. Zuerst gehe ich zum Element oder Editor und lass uns diesen Abschnitt entfernen, weil wir ihn nicht benötigen. Ich werde hier klicken, um einen neuen Abschnitt zu erstellen und die Abschnittshöhe herauszufinden Dann kopiere ich den Text und klicke hier auf dieses Plus-Symbol, um eine Überschrift und einen Überschriftentext wie diesen hinzuzufügen Dann gehe ich zum Zentrum für die Stilausrichtung und Typografie wird als Kopfzeile angezeigt und die Textfarbe wird in dieser Farbe angezeigt Jetzt klicke ich wieder auf den Container. Im Container ändere ich „ Enthält B“ auf „voll mit“ und die Richtung ist spaltenförmig, vertikal, das Objekt wird zentriert ausgerichtet. Okay. Lassen Sie uns den Inhalt mit Aufgabenfeld erstellen und auf Advance klicken, hier klicken und Margin Top Pass 120 hinzufügen. Okay. Schauen wir uns jetzt mal die Größe dazwischen an. Die Zwischengröße ist 60, also gehen wir zum WordPress-Design, und hier wähle ich den Container aus. Container, ich werde eine 60 wie diese hinzufügen. Was wir jetzt hinzufügen müssen, ist dieser Abschnitt. Um dieses Karussell hinzuzufügen, können wir die Karussellschleife verwenden Lassen Sie uns eine Karussellschleife hinzufügen. Um das zu tun, suche ich hier nach einer Schleife und wenn wir nach einer Schleife suchen, erhalten wir ein Loop-Rousel-Objekt erhalten wir ein Loop-Rousel-Objekt Ich füge es einfach so hinzu. Dieses Loop-Karussell ist ein Schleifenraster, mit dem Vorlagen oder die Elemente von Folie zu Folie scrollen können dem Vorlagen oder die Elemente von Folie zu Folie scrollen Wir können eine Vorlage erstellen und mithilfe dieser Abfragen können wir Elemente oder Daten angeben, die wir zu diesem Karussell hinzufügen oder zu dieser Schleife hinzufügen möchten zu diesem Karussell hinzufügen oder zu dieser . Lass uns das machen Zuerst müssen wir eine Vorlage erstellen. Dazu klicke ich auf Vorlage erstellen und hier auf Okay. Wenn Sie jetzt hier nachschauen, haben wir das Elemento-Loop-Element erstellt, das unsere Vorlage ist Hier werde ich nach dem Element Loop-Element 370 suchen. Lassen Sie uns diese Details ändern und schauen, was zuerst passieren wird Ich setze die Anzahl der Folien auf drei und zeige sie an, was bedeutet , wie viele Seiten wir hier zeigen wollen, es werden drei sein und die Seite beim Scrollen wird eins sein und hier gleich hoch. Gehen wir zu Query. In Query werden Änderungen an unsere Anbieter weitergeleitet und dann klicken wir auf Veröffentlichen und schauen, ob wir sie bearbeiten können oder nicht. Hier werde ich erneut auf Vorlage bearbeiten klicken. Okay. Geh zurück. Okay, jetzt gehe ich zur Vorlage und hier können wir die Vorlagendetails bearbeiten. Ich denke, dass etwas mit meinem Browser nicht stimmt, also lass es uns noch einmal machen, damit du klar verstehst, was ich zuerst getan Ich gehe zur Homepage der Website und klicke auf Mit Elemento bearbeiten Und hier, lass uns bis hierher scrollen. Okay. Jetzt wähle ich diesen Loop-Sonnenschirm aus, und hier wähle ich den Vorlagentyp als Pose aus und erstelle eine Vorlage Dann füge ich die Anzahl der Schieberegler als drei hinzu und die Slide-Down-Anzeige als Wenn ich zwei daraus mache, sehe ich nur zwei davon, aber wir brauchen drei davon Dann sagte ich, dass die Abfrage als Quelle unsere Anbieter sein wird und diese Angaben werden standardmäßig verwendet und wenn wir wollen, können wir das ändern Okay. Lassen Sie uns nun die Vorlage bearbeiten. Um das zu tun, klicke ich auf Vorlage bearbeiten. Okay. Jetzt kann ich hier die Vorlage bearbeiten. Also werde ich zuerst hier klicken und die Details überprüfen, und dann klicke ich auf Element hinzufügen. Ich füge ein Element hinzu, wir haben Beitragstitel , Beitragsinhalt, Bildbeitragsinformationen, aber wir benötigen keine davon. Also füge ich das Textfeld so hinzu, und dann werden Sie die dynamischen Tags sehen Klicken Sie einfach darauf und Sie können Details wie das Hinzufügen des Pausendatums, der Force-ID und dergleichen sehen , aber wir müssen hier den Namen des Teammitglieds hinzufügen Ich klicke einfach auf dieses ACF-Feld. Okay. Nun, wenn wir hier zuerst sehen, haben wir diese Rolle. Fügen wir zuerst die Rolle hinzu. Hier werde ich auf dieses ACF-Feld klicken und dann hier klicken. Dann haben wir hier die Rolle. Ich klicke einfach bei Advance auf Scrollen, wir müssen vor oder nach der Rolle nichts hinzufügen nach der Rolle Jetzt ist das Problem, dass wir keine Informationen sehen, aber wir können zu diesem eingestellten Loop-Element gehen, und hier können wir die eingestellte Vorschau auswählen und diesen bestimmten Beitrag oder Artikel ändern, ihn als unseren Anbieter festlegen und auf Anwenden klicken und so eine Vorschau anzeigen Wenn ich das mache, wird es so angezeigt. Wählen wir dafür zuerst das Feld in der Ausgabe aus, ich klicke auf diesen Container und hier gehen wir weiter, setzen sie auf Null, so wie hier. Wenn wir das tun, werden wir einfach das E-Leerzeichen los. Jetzt klicke ich auf diese Überschrift, die ich bereits hinzugefügt habe, und hier gehe ich zu Estile. In der Typografie ändere ich die Typografie Mal sehen, ist Pi 20, schauen wir uns unseren Absatz an, es ist Pit Jetzt werde ich hier nachschauen. Der Name ist Posentitel, aber wir brauchen den Posentitel hier nicht. Stattdessen benötigen wir den Namen des Anbieters. Wenn wir zu unserem Anbieterbereich gehen und auf AD klicken, können Sie sehen, dass wir den Titel des Beitrags als Anbieternamen hinzufügen. Außerdem erstellen wir unseren Anbieternamen im erweiterten benutzerdefinierten Feld, sodass ich diesen Namen anstelle dieses Beitragstitels verwenden werde. Klicken Sie hier und entfernen Sie es, klicken Sie mit der rechten Maustaste und klicken Sie auf Con Dilete, jetzt erhalte ich die Überschrift so und hier drin, klicken Sie auf dynamische Tags und Affeld, dann klicken Sie auf das ACFFeld und der Schlüssel wird so benannt Diese dynamischen Tag-Felder sind nur auf Element of Pro verfügbar Dies ist ein Element der Pro-Funktion, das wir eine Vorlage erstellen können, oder wir können eine einzelne Vorlage erstellen und sie für den Pago-Bereich festlegen Dann werden die Daten, die wir im dynamischen Feld anfordern , automatisch hinzugefügt Als Beispiel hier denken Sie, dass wir den Force-Titel hinzufügen müssen. Wir können einfach auf dieses dynamische Feld klicken und so auf den Force-Titel klicken, und ich werde ihn duplizieren. Mal sehen, ob wir Zeit oder Beitragszeit hinzufügen wollen, die Beitragszeit wird so angezeigt und wenn wir das Beitragsdatum wollen, wird das Beitragsdatum so angezeigt. Wir müssen dieses dynamische Tag nur sofort definieren die Datenbank stellt eine Verbindung diesem Feld her und gibt uns Details. Lassen Sie uns das jetzt löschen. Hier legen wir den Namen fest, nicht den Titel. Stellen wir das Affeld ein und klicken Sie hier, klicken Sie auf Value Add Name gehen Sie dann zu Estyle Sehen wir uns die Details an. Es sind 25, ich glaube, es lässt nach. C Factory, 25 normal und hier haben wir die gleichen Details. Jetzt müssen wir die Textfarbe auf diese schwarze Farbe ändern. Bevor wir den Abstand und andere Dinge ändern, fügen wir hier die Details hinzu. Dann müssen wir die kurze Beschreibung hinzufügen. Zum Hinzufügen klicke ich auf Element und lass uns nach etwas suchen wie. Lassen Sie uns eine weitere Überschrift hinzufügen, und dieses Mal wird das STML-Tag P oder Absatz sein Eine Kachel, lassen Sie uns die Typografie als Absatz festlegen und die Farbe ist diese schwarze Klicken Sie nun zum Inhalt auf das dynamische Tag scrollen Sie hier nach unten und klicken Sie auf das ACF-Feld Und klicken Sie hier, der Schlüssel sollte eine kurze Beschreibung wie diese Okay. Jetzt müssen wir das Bild hinzufügen. Lass uns das Bild hinzufügen. Um das Bild hinzuzufügen, klicke ich hier und suche nach einem Bild. Okay, hier haben wir das Bild. Ich werde das Bild oben hinzufügen und die Auflösung auf niedriger einstellen und auf dieses dynamische Tag klicken. Klicken Sie tatsächlich auf dieses dynamische Tag und hier im ACF-Bildfeld, klicken Sie hier, wählen Sie die Kopfaufnahme aus und das hinzugefügte Bild mit dieser Bildauflösung ist voll, ohne Bildunterschrift Links. Okay. Nun müssen wir dieses Ansichtsprofil hinzufügen. Lassen Sie uns vorerst nur eine einfache Schaltfläche zum Anzeigen des Profils hinzufügen. Ich werde auf diese Weise nach BTN oder Button Button und Rager Button suchen und in Estyle zu Estyle gehen Lass uns die Details sehen. Wir sind schon bei diesem Button hier. Kann einfach die Button-Details von hier kopieren. Lass uns das machen. Oder lassen Sie uns das noch einmal erstellen. Gehen Sie dazu zu Estyle und wählen Sie unter Typografie die Schaltfläche aus und klicken Sie auf Farbe. Klicken Sie einfach auf Context Color und legen Sie sie als Primär- und Hintergrundtyp Eigentlich brauchen wir keinen Hintergrund und Board-Non-Box-Schatten sollte so aussehen und trotzdem haben wir den Jetzt haben wir keinen Hintergrund. Jetzt entferne ich die Abstände und im nächsten Schritt entferne ich die Abstände, die dann voll sind, mache sie zum Standard für den Inhalt, der Typ ist Standard und wir müssen das Symbol hinzufügen Klicken Sie hier auf die Symbolbibliothek, lassen Sie uns das Symbol überprüfen. Eigentlich brauchen wir dieses Symbol. Hier haben wir das Symbol. Klicken Sie darauf und klicken Sie auf Einfügen Die Position des Symbols ist N. Okay. Jetzt haben wir hier ein Problem. Wir haben einen riesigen Abstand und lassen Sie uns den Abstand zwischen den Symbolen sehen. Es ist der Abstand und der Stil des Z-Symbols Stellen Sie die Position links ein, um den Abstand zu entfernen Wir können einen negativen Rand hinzufügen wie 110. So verwenden Sie das Loop Karussell - Teil 01: Bei Element of haben wir ein cooles Feature namens Loop Carusel. Suchen wir hier nach Loop, und hier haben wir Loop Mit diesem Loop-Karussell können wir dynamische Inhalte hinzufügen, z. B. benutzerdefinierte Felder pausieren, benutzerdefinierte Posentypen pausieren, die wir bereits mithilfe erweiterter benutzerdefinierter Felder erstellt haben, Plug-ins, und wenn Sie E-Commerce betreiben, können Sie Produkte hinzufügen Der Vorteil davon ist, dass wir das Aruseldesign nur einmal erstellen müssen und dann nur Inhalte im WordPress-Dashboard erstellen müssen . Diese passen sich automatisch an das Design an , das wir mit Loop Carusel erstellen. Lass uns in die Tiefe gehen und ein paar Übungen mit Post machen. Zuerst gehe ich zum WordPress-Dashboard unserer Website und lass uns einen Beitrag erstellen. Ich gehe zu Earl Post. Derzeit haben wir keinen Beitrag, also werde ich mich intensiv bemühen, einen Beitrag zu erstellen. Also hier werde ich MpMP hinzufügen und haben Sie sich in unseren vorherigen Lektionen daran erinnert, wir über KI-Eingabeaufforderungen sprechen, also verwende ich einfach diese Eingabeaufforderungen, und hier werde ich die Rolle asm-Klinikarzt zuweisen , der Artikel, Schreiberfahrung und Aufgaben hat Schreiberfahrung und Aufgaben Ich möchte, dass Sie zehn Artikel erstellen, und hier sind Das brauchen wir nicht, und hier generieren wir zehn Artikel, wir generieren zehn Artikel Okay, diese Eingabeaufforderung funktioniert, also drücke ich auf Ende und lass uns sehen , welche Art von Artikeln wir bekommen Okay, ich generiere nur die Artikelstruktur oder die Daten für den Artikel Das brauchen wir nicht, also höre ich damit auf und gebe ein Ich benötige mindestens den aktuellen Artikel mit 500 Okay, mal sehen. Mal sehen. Das ist nur ein Beispiel, also versuche es nicht. Das sind eigentlich wirklich kleine Artikel, aber das wird für Beckley funktionieren Also hier muss ich sagen, dass ich wirklich zehn Artikel brauche. Sagen wir, mindestens zehn Artikel mit 500 wie diesem. Wenn wir es so generieren, erhalten wir tatsächlich zehn Artikel. Okay, wir haben gerade zehn Artikel wie diesen generiert, und jetzt müssen wir sie der Website hinzufügen. Lass uns auf die Website gehen und hier werde ich zum Posten gehen und auf EL Post klicken. Derzeit haben wir keine Artikel oder Beiträge, also klicke ich auf Neuer Beitrag, und hier kopieren wir diesen Titel und fügen den Titel hier ein. Dann kopiere ich einfach diesen Inhalt und füge ihn hier ein. Eigentlich müssen wir das besser machen. Was ist eigentlich, wenn wir Deepsek anweisen, diesen Inhalt für den Wordpress-Blockeditor zu generieren Lassen Sie uns sagen, können Sie diesen Inhalt für den Wordpress-Blockeditor generieren diesen Inhalt für den Wordpress-Blockeditor Also kann ich ohne zu suchen bearbeiten und lass uns den Inhalt kopieren. Mal sehen, was passieren wird. Ich generiere mit dem DML-Inhalt, und hier werde ich den gesamten Inhalt hier DML entfernen Wir haben ein DML-Tag, also können wir diesen Inhalt einfach in dieses HTML-Tag einfügen Es kann einige Zeit dauern, aber lassen Sie uns abwarten, ob es funktioniert hat oder nicht Okay, hier müssen wir sagen, dass der Klinikname JB Family sein sollte Lass es uns im nächsten Teil erzählen. Im Moment kopiere ich einfach den HTML-Code und füge den HTML-Code ein und klicke auf Vorschau, und es wird so aussehen. Und hier, lassen Sie uns das in J ändern . Können wir es nicht so ändern Ich muss zu TML gehen und diesen Teil finden. Ja, E. Ja, als JV-Familie Clei. Ja, jetzt ist es okay, und jetzt klicke ich auf Kompost und hier müssen wir das Beitragsbild einstellen Um ein Beitragsbild zu erstellen, verwende ich Canva und mach dir keine Sorgen, ich übernehme alle Bilder und diese Artikel im Bereich Ressourcen Jetzt bin ich hier bei Canva, und hier klicke ich auf Anpassen und lass uns 600 mal 400 machen , wie bei einem Bild für das Feature Und hier kopieren wir den Titel. Kopieren wir zum Beispiel Familiengesundheit. Nein, nicht der, hier, hier. Ja, Familiengesundheit, geh zu Elements, geh so schnell und geh zu Fotos. Und auf Fotos haben wir diese Art von Foto. Lass es uns größer machen. Und den brauchst du nicht. Dann klicke ich auf C Share, klicke auf Herunterladen, wähle Test-JPG aus und klicke auf Herunterladen. Okay, jetzt gehe ich auf die Website, klicke auf Concept Featured Image und lass uns das heruntergeladene Bild wie folgt hinzufügen. Klicken Sie dann auf Sonderbild von Concept. Und lassen Sie uns auf Veröffentlichen und Veröffentlichen klicken. Und jetzt kann ich mir den ersten ansehen. Klicken wir mit der rechten Maustaste hier und klicken Sie auf In neuem Fenster öffnen. Hier ist unser Beitrag und momentan wird er nicht ganz gut angezeigt , weil wir keine Vorlage für unseren Blogartikel, einen einzelnen Blogartikel, erstellt haben. Wir werden das in zukünftigen Lektionen tun, aber vorerst wird das funktionieren. Jetzt klicke ich auf Neuer Beitrag und erstelle den neuen Beitrag zum zweiten Beitrag. Hier ist die zweite Kraft, kopiere den vierten Titel, und das ist nicht gut für das Schreiben von echten Artikeln. Dies dient nur dazu, mehr über das Loop-Karussell zu erfahren . Dieser Beitrag kann uns bei der Erstellung unseres Blog-Seitenbereichs helfen. Lass uns gehen. Und hier werde ich den Inhalt kopieren. Nehmen wir an, können Sie den Inhalt für den Wordpress-Blog-Editor generieren ? Lassen Sie uns das ändern und sagen wir, können Sie etwa den Inhalt eines Beitrags bei etwa zehn Beiträgen generieren , den Inhalt für das Hinzufügen des WordPress-Blog-Editors, sodass ich ihn ohne Bearbeitung hinzufügen kann. Außerdem heißt die Klinik JB Family Clinic, und mal sehen, was passieren wird Okay, es funktioniert nicht, also kopiere ich jetzt diesen Befehl und gehe zu GPT Auf Ja GPT werde ich diesen Befehl hinzufügen, und bei Doppelcodes werde ich die Pose hinzufügen Also hier brauchen wir den ersten nicht. Wir brauchen sie von hier. Lass uns sehen. Die Post, fünf, sechs, sieben, acht, neun, zehn. Okay, jetzt füge diesen Inhalt ein und lass uns sehen, ob das nein, nein, nein, das funktioniert nicht. Ich muss sagen, sagen wir, über neun posten Inhalte für Tress Editor in DM in TML, unter 94 Okay, jetzt klicke ich auf Zustimmung, und jetzt sollte es in SDML generiert werden. Wir werden sehen, okay, es wird nicht funktionieren Okay, es wurde im SDML-Format generiert. Wir brauchen diesen Header nicht , aber wir brauchen nur Text von hier Okay, der Artikel wurde generiert, und jetzt muss ich sie nur noch hinzufügen Dies ist der zweite Artikel. Ich denke, wir brauchen das nicht und brauchen das auch, und hier haben wir den Titel, und hier werde ich diesen Inhalt einfach in diesen Absatz-Tag zu diesem Absatz kopieren . Und hier fügen wir es hinzu. Nein, nein, klicken Sie hier und suchen Sie nach THDM und schreiben Sie es so In der Vorschau wird es so aussehen. Okay, dann geh zum Posten in der Post. Wir müssen das vorgestellte Bild hinzufügen und lassen Sie uns das kopieren und lassen Sie uns die Impfung im Kindesalter angehen und es herunterladen. Klicken Sie auf Konzeptfunktion Dimage, klicken Sie hier und fügen Sie es wie folgt Klicken Sie dann auf Concept Feature Dimag und klicken Sie auf Veröffentlichen, Veröffentlichen Okay, jetzt klicken Sie auf Neuen Beitrag hinzufügen, und hier haben wir den dritten Beitrag, kopieren Sie diesen Titel und hier haben wir die tatsächliche Stärke Ich kopiere es einfach wie diesen Schlüssel. Nun, hier, HTML, benutzerdefiniertes HTML, füge es ein, klicke auf Vorschau, sieht gut aus, und hier müssen wir den Stress als Familie hinzufügen. Generieren wir unsere Kräfte. Lassen Sie uns sehen Dann klicken wir hier, um das vorgestellte Bild festzulegen, und ich werde fortfahren und den Beitrag erstellen und wir kommen zurück zu 111. So verwenden Sie das Loop Karussell - Teil 02: Hallo, alle zusammen. Jetzt haben wir den Beitrag und fangen wir an, etwas über die Loop-Cars zu lernen. Wir müssen also eine neue Seite erstellen, zu den ER-Seiten gehen und auf AdNwPage klicken und hier auf Adtitle einen Titel wie ER-Seiten gehen und auf AdNwPage klicken und hinzufügen Nennen wir es wie Blog. Das ist also nur zum Testen. Vielleicht können wir diese Seite für die eigentliche Website verwenden. Also lass es uns veröffentlichen und okay, jetzt klicke ich auf Bearbeiten mit Element of all right, ich werde hier klicken und auf Complex Box klicken, dann diesen direkten Spaltencontainer hinzufügen und hier suche ich nach Loop Carsel Hier haben wir Loop Carsel, ich werde es einfach hinzufügen und wenn ich das hinzufüge, kann ich diese Art von Design sehen Hier haben wir die Möglichkeit, eine Vorlage zu erstellen , oder wenn wir bereits eine Vorlage haben, können wir sie von hier aus durchsuchen, aber in diesem Fall müssen wir eine neue Vorlage erstellen Unser Ziel ist es, diesen Beitrag auf dieser Blockseite zu zeigen. Ich werde einfach auf Vorlage erstellen und dann auf Speichern klicken . Hier ist unsere Vorlage . Wenn wir mit der Maus darüber fahren, können wir den Namen der Vorlage sehen Jetzt kann ich Artikel zu diesem Abschnitt hinzufügen. Lassen Sie uns zuerst einen Container vom Typ Richtungsspalte erstellen, und ich klicke hier, dann muss ich im Voraus den Rand und das Pad entfernen, dann im Layout, ich werde hier klicken, dann können wir hier ein Element hinzufügen. Fügen wir zum Beispiel ein Bild hinzu und fügen wir es so hinzu. Dann haben wir hier ein Bild und auf Element of Pro haben wir dynamische Tags. Mit diesen dynamischen Tags können wir benutzerdefinierte Daten hinzufügen. Wenn wir zum Beispiel direkt ein Bild von hier hinzufügen, fügen wir dieses Bild aus unserer Medienbox hinzu und es bleibt gleich. Aber wenn wir hier auf dynamisches Tag klicken und hier drin, können wir Bilder sagen. Lassen Sie uns als Beispiel das Feature Dimage einstellen und wenn wir das Feature Dimage einstellen, wird es dynamisch sein Wenn ich es genauer erkläre, kann ich auf Speichern und zurück klicken und hier haben wir den Beitrag mit Dimage. Hast du dich daran erinnert, dass wir den Beitrag bereits erstellt haben und wir den ganzen Beitrag hierher gebracht Ich klicke auf Vorlage bearbeiten und klicke jetzt auf Vorlage bearbeiten. Dann klicken Sie hier auf Bearbeiten und lassen Sie uns dieses Feature-Bild-Tag entfernen und einfach dieses Bild aus dem Medienbereich hinzufügen dieses Bild aus und auf Speichern und wieder hier rein klicken, wir sehen nur dieses statische Bild. Das ist die Stärke von dynamischen Tags und bei der Abfrage können wir festlegen, zu welcher Art von Daten wir hier gelangen möchten. In Zukunft werden wir also unseren Bereich für Anbieter und Bewertungen erstellen und dabei diese Loop-Autos verwenden, um sie zu erstellen Wir werden erweiterte benutzerdefinierte Felder verwenden. Wenn wir Posentypen mithilfe erweiterter benutzerdefinierter Felder erstellen, können wir die Quelle als diesen Posentyp auswählen. Derzeit ist die Quelle Post und hier können wir das Datum festlegen, das wir hinzufügen möchten, aber ich mache es so und wir können die Reihenfolge nach Details festlegen und hier lege ich die Reihenfolge nach Datum fest und die Reihenfolge wird DESC sein, und wir haben zwei Arten von Bestellungen DESC bedeutet kurzfristig absteigend, das heißt, wenn wir es nach Datum sortieren, können wir den letzten Beitrag bis zum ältesten Beitrag sehen Wenn wir es auf ASC setzen, können wir zuerst den ältesten und den letzten als den neuesten Beitrag sehen und den letzten als den Machen wir es als DESC und nett. Jetzt müssen wir die Vorlage erstellen. Jetzt klicke ich auf Vorlage bearbeiten und dann auf San Okay. Jetzt klicke ich hier auf dieses Stiftsymbol und ich denke, du verstehst es und du weißt jetzt über die dynamischen Tags und lass uns dieses Bild so entfernen. Was wir jetzt hinzufügen müssen, ist Post. Hier haben wir viele Elemente. Wenn wir wollen, können wir Elemente anpassen. Fügen wir also eine Überschrift hinzu und gehen in der Überschrift zu Stil, klicken Sie auf die Überschrift als Subdin und die Farbe wird schwarz sein Und jetzt zum Inhalt, ich werde auf dieses dynamische Tag klicken, und hier kann ich Earl-Tags sehen , die wir dem Beitrag hinzufügen Wenn ich also auf den Titel des Beitrags klicke, erhalten wir den Titel des Beitrags, den wir erstellt haben. Jetzt können wir auf Element hinzufügen klicken und das vorgestellte Bild hinzufügen. Hier werde ich das Bild hier hinzufügen. Dann, wie ich es zuvor getan habe, hier und auf Beitrag klicken, das vorgestellte Bild auswählen, und vorerst werde ich hier den Standardstil beibehalten, werde ich hier den Standardstil beibehalten wenn ich hier klicke und eine weitere Überschrift hinzufüge Hier können wir das Post-Experten-Post-Datum wie dieses hinzufügen, dann ändern wir das hier in die Schaltfläche und die Farbe ist wieder da und ich klicke auf. Eigentlich klicke ich auf die Struktur und hier im Container füge ich Roger Pass hinzu. Lass uns das ergänzen. Jetzt schauen wir mal, ob wir einen Link hinzufügen wollen, ich werde hier nach Link und vielleicht nach Button suchen. Fügen wir dem Text eine Schaltfläche wie diese hinzu, ich suche nach mehr lesen und unter Link klicke ich auf dynamisches Tag, und hier können wir die Beitrags-URL auswählen. Und bei der Option Link kann ich auf In neuem Fenster öffnen klicken. Und wenn ich jetzt auf Speichern und zurück klicke, können wir unseren Beitrag so sehen. Wenn ich auf die US-Seite klicke und hier ist unser Beitrag. Wenn ich also auf die Schaltfläche „Mehr lesen“ klicke, wird sie zur Beitragsseite weitergeleitet. Derzeit erstellen wir die Beitragsseite nicht, aber wenn Sie die URL sehen, leiten wir einfach zur Beitragsseite weiter. Also werde ich jetzt wieder auf Vorlage bearbeiten klicken. Hier werde ich auf Container klicken, ich werde die Bildüberschrift und den Button so entfernen. Was wir jetzt tun können, sind vorgefertigte Elemente. Wenn ich hier nach dem Aufruf zum Handeln suche, können wir diese Art von Widget bekommen. Lassen Sie uns hier den Skin als klassisch festlegen und die Position auf links setzen und hier können wir die Position festlegen Aber lassen Sie uns das vorerst so belassen und mithilfe von Dynamic-Tags können wir dynamische Inhalte hinzufügen. Wenn ich hier klicke und auf dynamisches Tag klicke, stelle das vorgestellte Bild dass das vorgestellte Bild so aussehen soll. Beim Inhalt können wir den Titel als Pause-Titel und Beschreibung hinzufügen . Eigentlich brauchen wir die Beschreibung nicht, also entferne ich sie und verlinke die Post-URL wie diese und klicke auf Neues Fenster öffnen. Was wir jetzt tun können, ist bei diesem Stil, vielleicht ändern wir den Skin auf Cover und es wird viel besser aussehen und bei diesem Stil können wir die Polsterung so einstellen, dass wir die Polsterung für 2020 etwas größer hinzufügen , Dann sind wir an der Arbeit und am Inhalt, lassen Sie uns die Typografie so ändern, dass Titelfarbe weiß sein wird, und wir haben auch Fügen wir die Schaltfläche 12 als links und rechts hinzu, und der Text der Schaltfläche wird weiß sein Stellen Sie in der Typografie die Button-Typografie und die Hintergrundfarbe auf diese blaue Farbe Und auf der Box können wir die Höhe nach Belieben hinzufügen. Vielleicht fügen wir die Höhe als 450 hinzu. Bei ihrem Effekt können wir eine Überlagerungsfarbe hinzufügen. Fügen wir also die Überlagerungsfarbe Schwarz hinzu. Ändern Sie hier die Deckkraft wie folgt. Okay. So weit, so gut, jetzt werde ich auf Speichern und Schwarz klicken. Wenn ich auf Speichern und Zurück klicke, können wir hier unseren Beitrag so sehen. Und ich klicke einfach auf das Loop-Fasel und hier können wir die Anzahl der Folien ändern Wenn wir also vier daraus machen, haben wir nur vier Slider und Seite für Seite Machen wir zwei draus, es wird nur so aussehen Und bei der Navigation können wir den Pfeil ausblenden, wenn wir wollen, aber ich möchte die Pfeile im Stil anzeigen, wir können zur Navigation gehen und die Größe des Symbols so ändern und die Farbe auf wir können zur Navigation gehen und die Größe des Symbols so ändern Blau ändern und die Position ändern, lassen wir es nach draußen machen. Bei der Paginierung können wir eine Seitennummerierung wie diese hinzufügen und die Farbe wird blau. Hier ist die Stärke der dynamischen Tags bca usel und Wenn ich Seiten ansehe, sieht die Seite so aus und wir können sie nach sieht die Seite so Belieben anpassen Aber vorerst wird das ein gutes Beispiel dafür sein, wie man in zukünftigen Lektionen das Loop-Karsel besser verstehen kann. In zukünftigen Lektionen werden wir viel mehr dynamische Tags und benutzerdefinierte Felder für Loop-Autos lernen und verwenden viel mehr dynamische Tags und benutzerdefinierte Felder für Loop-Autos , indem wir den erweiterten benutzerdefinierten Feld-Plug verwenden 112. Gestalten Sie unseren Anbieterbereich - Teil 02: Okay. Wenn wir nun diese Schaltfläche mit unserer ursprünglichen Schaltfläche vergleichen, ist das Symbol etwas größer. Wie hier müssen wir CSS verwenden, um das Symbol zu vergrößern. Aber das Problem liegt in dieser Vorlage, wir haben wiederholte Schaltflächen. Hier haben wir nur diesen Button, aber jetzt haben wir eine andere Situation. Lassen Sie uns das regeln. Zuerst werde ich auf diese Schaltfläche klicken, und wie ich bereits gesagt habe, haben wir eine Schaltfläche, sodass wir einen einzigen CSS-Code erstellen und ihn für A dieser Schaltfläche verfügbar machen können . Um das zu tun, können wir die CSS-Klasse verwenden. Hier füge ich den CSS-Klassennamen als Profil anzeigen, Profil anzeigen, TN hinzu und klicke dann auf Veröffentlichen, um ihn zu speichern. Und jetzt haben wir das WordPress-Dashboard. Um diesen CSS-Code hinzuzufügen, kann ich zum Erscheinungsbild gehen und auf Anpassen klicken . Ich kann auf zusätzliches CSS klicken. Und hier kann ich den CSS-Code hinzufügen. Also hier können wir das Design sehen. Obwohl wir es nicht fertiggestellt haben, können wir es von hier aus sehen. Okay, jetzt müssen wir diese Schaltfläche vergrößern. Um das zu tun, das zu tun füge ich den CSS-Code und den CSS-Klassencode ein und füge Punkt hinzu, weil wir Punkt verwenden, um die CSS-Klassen zwischenzuspeichern , und ich werde nicht zu sehr auf CSS eingehen. Im Moment werde ich nur diesen Code hinzufügen , um dieses Symbol zu vergrößern. Wenn wir zu dieser Homepage gehen, gehen wir zur Homepage und hier klicken wir auf Mit Element bearbeiten und scrollen bis hierher, dann klicken wir auf Bearbeiten und wenn wir zu Advance on Advance gehen, haben wir benutzerdefiniertes ESS und hier haben wir den Code, mit dem wir diese Schaltfläche vergrößert haben. Ich werde es einfach kopieren. Lassen Sie uns den Inhalt kopieren und hier zur Anpassung und Bearbeitung gehen . Von hier aus brauche ich nur diesen Abschnitt, weil wir diese ID nicht brauchen Ich werde diese CSS-Klasse einfach so gestalten und auf Seite zwei klicken, um den Inhalt hinzuzufügen, und wenn wir das tun, wird unser Symbol größer. Wenn ich es entferne, ist es klein. Wenn ich es hinzufüge, ist es größer. Jetzt klicke ich auf Veröffentlichen und hier werde ich auf Aktualisieren klicken. Ich muss es erneut aktualisieren, weil das Design nicht ganz gut geladen wurde. Was stimmt nicht? Die Website ist nicht so angemeldet, wie wir es wollen. Jetzt klicke ich auf Element bearbeiten oder ich denke, es ist ein Cache-Problem, aber mal sehen, es ist Cache. Jetzt klicke ich hier wieder auf Vorlage bearbeiten, um sie zu bearbeiten, und hier können wir sie von hier aus bearbeiten. Wenn ich das bearbeite, wirkt sich das auf den Abschnitt aus. Wenn wir zu WP Admin gehen und zum Dashboard gehen und hier auf Vorlagen klicken, klicke ich unter Vorlagen speichern auf Vorlagen speichern, ich klicke auf Veröffentlicht, und hier haben wir diese Vorlage , die wir bearbeiten. Derzeit lautet der Name Elemental Loop Item. Klicken wir auf Bearbeiten und ändern wir diesen Namen in etwa so etwas wie diesen von unseren dedizierten Anbietern und klicken wir dann auf Aktualisieren. Wir können hier klicken, um ihn von hier aus zu bearbeiten und So oder wir können hier klicken , um diesen zu unterdrücken und ihn von hier aus zu bearbeiten Bearbeiten von der eigentlichen Website aus ist der bessere Weg , da wir dann klar verstehen können, wie das Design im Heldenbereich aussehen wird Auch hier haben wir dieses Problem, also aktualisieren wir es und klicken auf Mit Element bearbeiten oder nach unten scrollen und erneut auf Bearbeiten klicken. Richtig. Was wir jetzt hinzufügen müssen, ist I Spacing. Wenn wir den Abstand beim Schwein Mateen Brad überprüfen, es zwei L. Fügen wir den Abstand als Wenn ich hier klicke, siehst du, dass es ein Container ist. Wenn wir hier klicken und Raw als hinzufügen, sollte es so aussehen und mal sehen, es sind zwei und es ist Element als zwei. Okay. Jetzt müssen wir in dieser Ecke Radios und den Schatten hinzufügen. Fügen wir sie hinzu. Um sie hinzuzufügen, isolieren Sie den Container und im Container gehe ich zu Estyle auf Estyle Klicken Sie auf Oborder und Box Shadow. Fügen wir den Boxschatten hinzu. Lassen Sie uns also die Box-Shadow-Details von hier kopieren. Klicken Sie hier, die Farbe ist diese, also klicken Sie hier, um die CSSORGBA-Farben zu erhalten. Klicken Sie hier Die RGBA-Farbe ist das und füge sie so hinzu. Jetzt ist die Unschärfe 15 und X und Y Null. Lass uns hier klicken. Blurrinus ist 15 und andere sind Null. Okay. Jetzt müssen wir Radiusecken hinzufügen. Eigentlich müsste dafür die Radiusecke hinzugefügt werden, hier haben wir den Grenzradius. Wenn ich auf diesen Abschnitt klicke und den Grenzradius hier überprüfe, ist es 20. Stellen wir dieses Radio also auf 20 ein, wir werden die Änderungen sehen. Ich habe es hinzugefügt, aber wir haben es nicht ins Bild bekommen, um es ins Bild zu bekommen, ich klicke auf dem Bild auf Bearbeiten und gehe zu Estyle In Estyle können wir Randradios als el hinzufügen, aber nur 20, nicht 20, sondern nur wir haben den Randradius von oben als Also lass es uns hinzufügen. Wir haben also keine Bod-Radios wie 20 am unteren Bildrand Also klicken wir hier und oben, machen daraus 20 und oben 20 rechts, was links ist machen daraus 20 und oben 20 rechts, , wird 20 sein und nicht unten, wir müssen nur die oberen zehn hinzufügen, rechts als 20 und nett, dann müssen wir das Leerzeichen hier hinzufügen, es ist 220 Fügen wir den unteren Bereich oder fügen wir diese Containerpolsterung hinzu Soll der Container 20 sein? Ja, es ist Clet the container auf dem Polsterboden bei 20 Okay. Jetzt müssen wir die Größe dazwischen finden. Die Zwischengröße ist 20. Um es hinzuzufügen, müssen wir zum Loop-Karasel gehen Ich werde es von hier aus veröffentlichen und auf Speichern und zurück klicken Jetzt wird es so aussehen, aber es sieht nicht gut aus Wir müssen den Schlagschatten machen. Aber jetzt konzentrieren wir uns auf die Zwischengröße, um das zu tun, gehen wir zum Stil und der Abstand zwischen den Größen sollte so groß sein, das sollte es auch sein. Okay. Und bevor wir das Schlagschatten-Problem beheben, lassen Sie uns der Navigation und anderen Dingen Stil verleihen. Also zur Navigation, klicken Sie hier. Okay, es ist mit der Höhe ts 220, also machen wir mit dem Höhentest 20, um das zu tun. Gehen wir zur Navigation und eigentlich haben wir keine linken und rechten Navigationen Lassen Sie uns sie zuerst entfernen Um sie zu entfernen, gehe ich zum Inhalt und zur Navigation, wir müssen keine Pfeile zeigen und bei der Seitengenerierung haben wir Punkte und gehen wir zu Estils in Estes, wir müssen zur Seitengenerierung gehen, nicht Navigation und Abstand dazwischen werden so sein, wie ich mich erinnere, es 20 Jahre und Größe ist 20 mal wir müssen zur Seitengenerierung gehen, nicht Navigation und Abstand dazwischen werden so sein, wie ich mich erinnere, 20, die Größe wird auch bis 2021 sein, es ist 20 und die Farbe ist diese Primärfarbe und wir erhalten automatisch die Standardfarbe als hellblaue Farbe. Bei der Farbe O werde ich sie als Akzent verwenden, weil wir nicht die Primärfarbe als Farbe hinzufügen müssen die Primärfarbe als Farbe hinzufügen Hier haben wir ein Problem. Wir haben diese hellblaue Farbe, aber sie muss nicht hellblau sein, aber es gibt keine Möglichkeit, das Problem zu beheben, aber lassen Sie uns diese Farbe vorerst so beibehalten und das zwischen dem Abstand dieses Sliders und der Seitennummerierung hinzufügen , es ist 30, also machen wir es wie 30. Okay. Jetzt werde ich auf Veröffentlichen klicken und so weit, so gut. Aber hier haben wir viele Probleme. Lassen Sie uns sie eins nach dem anderen beheben. 113. Gestalten Sie unseren Anbieterbereich - Teil 03: Hallo, alle zusammen. Lassen Sie uns die Probleme beheben, die wir mit diesem speziellen Anbieterbereich haben. Um das zu tun, klicke ich auf Vorlage bearbeiten, und wenn wir hierher gehen, können wir deutlich sehen, dass dieses Bild nicht gut passt. Also klicke ich zuerst hier und wähle das Bild aus, dann gehe ich zu Advance Advance, ich stelle die Größe auf vergrößern ein und es ist jetzt einfach so. Jetzt kann ich es veröffentlichen und sehen, wie es auf dem Design aussieht und auf dem Design, es wird so aussehen. Als zweites Problem können wir hier sehen, dass wir eine Polsterung als Null haben, aber wir brauchen eine Polsterung auf der linken und rechten Schauen wir uns also die Figma-Datei an und schauen wir uns bei Figma die Größe des Pads Ich wähle einen dieser Texte aus und drücke auf die gesamte Polsterung, also fügen wir sechs als Wenn wir diesem Container nun nur noch Padding hinzufügen, gehe ich weiter und füge das rechte Padin als sechs und das linke Padna als sechs hinzu. Sie können sehen, dass das Wir können kein solches Muster hinzufügen. Anstatt ein solches Muster hinzuzufügen, müssen wir für die einzelnen Felder eine Polsterung hinzufügen Wählen Sie hier also das Feld aus, gehen Sie zu Weiter und fügen Sie Padin sechs hinzu, links eine Machen wir das Gleiche rechts sechs, links sechs und für den Button Jetzt klicke ich auf Veröffentlichen und lass uns das Design ansehen. Drücken Sie auf das Design und jetzt sieht es perfekt aus. Jetzt haben wir hier ein Ausrichtungsproblem Lassen Sie uns dieses Ausrichtungsproblem beheben Ich habe das Problem gerade gefunden. Wenn wir zur Vorlage gehen und auf Bild im Bild klicken, sagen wir Größe als vergrößern. Ich entferne es einfach. Wenn ich es entferne, ist es einfach repariert, und hier müssen wir nur Align Self Stretch hinzufügen. Dann klicke ich auf Einen Beutel speichern und klicke hier, stelle die gleiche Höhe ein. Und wenn wir jetzt das Design überprüfen, wird es so perfekt aussehen. 114. Gestalten Sie unseren Anbieterbereich - Teil 04: Und jetzt haben wir ein anderes Problem. Wenn Sie auf der linken und rechten Seite genau nachschauen, sehen wir den dunklen Schatten nicht, also müssen wir ihn reparieren. Ich habe eine Lösung für dieses Problem gefunden, indem ich in Foren nachgesehen und bei Google nach dem Problem gesucht habe. Bei Google suche ich einfach nach Schlagschatten oder wenn nicht im Element - oder Luka-Ergebnis angezeigt Und hier ist das Ergebnis, das ich in diesem Gita-Forum gefunden Ich habe die Lösung Also lasst uns diese Lösung anwenden. Und wie ich bereits sagte, müssen Sie eine Google-Suche durchführen oder wenn Sie Fragen haben, suchen Sie sie einfach bei Google. Wenn Sie das jetzt verstehen, wird es wahrscheinlich jemand anderes vor Ihnen bekommen. Lass uns jetzt mit der Arbeit beginnen. Zuerst muss ich den aktuellen Schatten, den Schlagschatten und das Eckradio entfernen . Ich wähle den Container aus und auf dem Container müssen wir zu E stirbt am Rand E gehen, den Rand auf Null setzen und den Boxschatten auf die Standardeinstellung zurücksetzen. Okay, jetzt klicke ich auf Veröffentlichen und wenn wir das Design jetzt sehen, wird es keinen Schlagschatten haben. Auf unserem Bild haben wir immer noch die Radios für die Bildecke. Wenn wir hierher gehen und hier den Bildstil angeben, haben wir Border-Radios wie auf dem Lassen Sie es uns vorerst so belassen. Und jetzt muss ich diesen Code kopieren. Kopiere ihn einfach hier und du kannst ihn tatsächlich lesen, aber ich werde das nicht schon lesen und das funktioniert mit dem Design. Jetzt werde ich diesen Container vorausschicken. Der Container geht auf Advance und hier auf benutzerdefiniertes ESS, im CSS wie folgt. Jetzt klicke ich vorerst auf Veröffentlichen und lass es uns im Design sehen. Wenn wir das Design überprüfen, können wir jetzt den linken und rechten Schatten deutlich erkennen. Lassen Sie uns das nun gemäß unserem Design beheben. Zuerst müssen wir diesen Abstand entfernen. Lass uns hierher gehen. Wenn wir das CSS sehen, haben wir diese Polsterung und wir brauchen sie nicht Ich entferne es einfach so. Wenn wir es jetzt veröffentlichen und es auf dem Design sehen, wird es so aussehen. Eigentlich müssen wir die Polsterung hinzufügen. Ich werde die Polsterung 20 mal 20 hinzufügen und auf Veröffentlichen klicken. Und hier, wenn wir das Design überprüfen, wird es so aussehen. Eigentlich brauchen wir die obere Polsterung nicht, also werde ich die obere Polsterung entfernen und hier oben links, unten, rechts Ich denke, der Wert, also schauen wir uns das Design noch einmal an, und jetzt wird es so aussehen Dann müssen wir hier den Schlagschatten ändern. Um den Schlagschatten zu ändern, müssen wir unseren Schlagschatten finden. Also gehe ich zu unserem Rigma-Design und wähle diesen Bereich für einzelne Anbieter Und hier haben wir den Schlagschatten. Und wenn ich auf diesen Dev-Moot klicke, kann ich den CSS-Stil sehen, und hier haben wir den Box-Shadow-Stil Ich kopiere es einfach. Lassen Sie uns diesen Box-Shadow durch unseren Box-Shadow ersetzen. Diese Spezifikation behält diesen wichtigen Tag hier bei und lasst uns veröffentlichen und sehen wir uns das Design an Okay. Nun, was wir tun müssen, ist hier, wir müssen den oberen Collins 20 und den unteren Teil B 2015 hinzufügen 50. Und lass es uns veröffentlichen und gestalten. Okay, links und rechts sind 15 Nachahmer hier, oben, rechts, unten, links, immer noch zu schwach, vielleicht zehn werden 2010 die Waren sein Und hoffentlich ist die Zeit reif dafür. Okay, so weit, so gut. Und jetzt müssen wir abgerundete Ecken hinzufügen. Das Hinzufügen von abgerundeten Ecken ist zu einfach, weil wir den Stil bereits von hier haben Kopieren Sie dieses Boat Reduce 20-Stil-Tag und fügen Sie es dann so hier ein. Lass uns das machen. Okay, jetzt ist es okay und komm her und verdränge das Design. Wenn ich das Design verdränge, wird es so aussehen und es ist unserem Design ziemlich ähnlich Aber das Problem ist, dass wir diese Lücke haben. Versuchen wir also, diese Lücke zu schließen. Gemäß dem vorherigen Design fügen wir einfach 20 als Rand hinzu, entfernen ihn, weil wir 20 als Polsterung für den Zoll hinzufügen und ich werde so aktualisieren und jetzt heißt es perfekt: Okay Hier haben wir ein Problem mit der Schaltfläche „Profil anzeigen“ , weil sie hier niedriger und hier etwas höher ist. Also werde ich es so belassen, weil es möglicherweise CSS benötigt, um es zu beheben. Okay, jetzt müssen wir hier hingehen und auf Ponce klicken und dann müssen wir das Hier und in der Abfrage anpassen , nicht das Layout abfragen, wir müssen die Anzahl der Folien anpassen Ich glaube, wir haben derzeit fünf, haben eine, 25 davon, fünf und klicken auf Und hier haben wir eine Menge Seitengenerierung. Okay, um die Seiteninierung zu korrigieren, können wir zum Layout gehen und beim Scrollen auf Folien blättern. Derzeit haben wir einen. Wenn wir es auf zwei setzen, können wir es so korrigieren, und jetzt werden wir zwei Folien gleichzeitig wie folgt scrollen. Okay, jetzt klicken Sie auf C veröffentlichen und lassen Sie uns zur Website gehen und uns das Design ansehen. Okay, es wird so aussehen. Wir haben hier ein Problem. Wenn wir dieses Paket sorgfältig prüfen, werden wir immer wieder dasselbe Ergebnis sehen. Sehen Sie jetzt, dieser Arzt ist hier und wenn wir das jetzt überprüfen, die Ärzte immer noch da. Um das Problem zu beheben, klicke ich hier auf Carsel bearbeiten und das Problem ist, dass wir derzeit nur fünf Anbieter haben, aber wir haben die Seite so eingestellt, dass wir als zwei scrollen Machen wir das auf drei, und wenn wir es auf drei setzen, wird es gut funktionieren Siehst du? Der Grund dafür ist, dass wir nicht genügend Anbieterdetails haben, um uns daran zu halten. Jetzt sieht Earl gut aus, und wenn ich jetzt hier aktualisiere, wird alles ohne Probleme funktionieren . Okay, spiele mit diesen Optionen herum und erziele das beste Ergebnis. Wenn wir zu Abfragen übergehen, können wir die Reihenfolge nach als Datum festlegen, und wenn wir es als A festlegen , werden die Elemente von kleiner nach größer angeordnet, was bedeutet, dass sie zuerst angezeigt werden, wenn wir sie zuerst hinzufügen. Jetzt veröffentliche ich, und wenn ich aktualisiere, fügen wir diesen Arzt Sarah Thompson als ersten Wert auf unserem Provider hinzu, genauso wie auf dem FIC Maple, und er wird korrekt angezeigt, weil wir ihn auf der Aztino ändern Jetzt haben wir gerade unseren speziellen Bereich für Anbieter fertiggestellt, und hier können wir mehr Ärzte oder mehr Anbieter hinzufügen und es verbessern Dann müssen wir diesen Abschnitt „ Kontakt aufnehmen“ erstellen. Auch hier müssen wir diesem Link zum Anzeigen des Profils eine Popup-Facia hinzufügen diesem Link zum Anzeigen des Profils eine Popup-Facia In Zukunft werden wir sie auch machen. 115. Design-Abschnitt Kontaktaufnahme – Teil 01: Hallo, alle zusammen. Jetzt müssen wir diesen Abschnitt gestalten. Lass uns anfangen. Zuerst klicke ich auf den Abschnitt und überprüfe die Höhe. Es sind 600. Gehen wir hier hin und klicken auf das Plus-Symbol, wählen Flexbox und Flexbox Tight wird die Richtungsspalte sein, und hier wird die mittlere Höhe sechs sein, nicht 300, sie sollte 600 sein und wir können sie später ändern, während wir entwerfen Okay, und die Richtung wird roh horizontal sein, und hier müssen wir diesen Abschnitt hinzufügen Zuerst müssen wir den Header hinzufügen, und bevor wir den Header hinzufügen, müssen wir diesen einzelnen Abschnitt in zwei Teile teilen , wie wir es hier gemacht haben. Wenn wir also den Container überprüfen, werden wir in diesem Abschnitt einen anderen Container haben . Lass uns das Gleiche tun. Also hier muss ich zuerst hier klicken, um ein Element hinzuzufügen , und dann auf Container klicken und den Container so verfolgen und löschen. Und dann füge ich Dance hinzu und entferne den linken und rechten Teil des Containers. Dann muss ich das Layout auswählen, die Richtung wird Spalte sein, und jetzt klicke ich hier, um eine Überschrift wie diese hinzuzufügen. Kopieren Sie den Überschriftentext von hier, hinter dem Text hier, und fügen Sie hinzu, um die Zeile zu unterbrechen Gehen Sie dann zu Stil und die Typografie wird als Kopfzeile angezeigt, dann wird die Textfarbe diese schwarze Farbe sein Jetzt müssen wir dieses Symbolfeld hinzufügen, wir können das Bildfeld verwenden Ich denke, die Bildbox wird funktionieren, vielleicht auch nicht. Fügen wir das Bildfeld hinzu, suchen Sie das Bildfeld und fügen Sie das Bildfeld in diesem Container auf Estyle hinzu. Stellen Sie die Bildposition auf links Das Problem liegt jedoch in der Bildbox Wir haben nicht viele Funktionen zum Hinzufügen der drei Zeilen, also müssen wir dies manuell tun Lass uns hierher kommen und zuerst dieses Symbol ändern. Um das Symbol zu ändern, gehe ich zum Google-Symbol. In materiellen Symbolen und Symbolen finde ich die Symbole. Suche nach dem Hon-Icon. Wir haben dieses Anrufsymbol und sehen uns die Details von hier aus Eigentlich ist es von hier. Passen wir die Breite so an , dass sie so schlank ist. Okay, jetzt klicke ich auf dieses PNG und lass uns die Farbe sehen, bevor wir es herunterladen. Die Farbe ist diese blaue Farbe, kopiere den Farbcode und füge den Farbcode ein. Ich denke, es ist derselbe Farbcode. Okay, jetzt klicke ich auf PNG, eigentlich müssen wir die Größe einstellen. Also hier ist Größe 60. Versuchen wir, 60 hinzuzufügen, 60 werden funktionieren. Klicken Sie dann auf PNG und gehen Sie zu Abb. Musign und scrollen Sie hier und klicken Sie auf dieses Symbol und entfernen Sie dieses Vektorsymbol Wählen Sie hier das Symbol-Layout und klicken Sie hier und platzieren Sie das Symbol so Dann müssen wir das Symbol „Nur auswählen“ anpassen und es so Okay. Jetzt müssen wir auch das Standortsymbol bekommen. Dieses Symbol wird funktionieren, laden Sie es herunter, gehen Sie hierher, entfernen Sie dieses Drop-In und wählen Sie das Symbol-Layout für Bildvideos, wählen Sie das Drop-Pn-Symbol und legen Sie es so ab. Wählen Sie dann das Symbol aus und verkleinern Sie es wie folgt. Okay. Dann müssen wir uns melden. Ja, oder dieser. Lassen Sie uns dieses Laborprofil so auswählen. Entferne es. Nein, nicht dieses Symbol. Also deaktiviere ich zu Recht das Symbol, und das wird das Symbol sein Okay. Sag es so. Dann und okay, so weit, so gut. Und jetzt können wir dieses Symbol herunterladen, das Symbol auswählen und auf das Exportsymbol klicken. Okay, lass es uns erstellen. Zuerst brauchen wir einen Container wie diesen. Dann lassen Sie uns den Rand der Container-Abfüllung auf Null setzen, dann fügen wir hier zuerst das Bildfeld hinzu und bei der Bildbox klicken Sie dann hier und eine Linie wird hier sein, eine Linie wird die Richtung der Zeile horizontal sein, Linie wird beginnen und jetzt müssen wir einen weiteren Container innerhalb dieses Containers erstellen , weil dieser Container horizontal ist , aber diese Abschnitte sind vertikal angeordnet Mal sehen, hier ist der Container, den wir hinzugefügt haben. Lass es uns so hineinlegen und dann müssen wir wieder zu Ads gehen und es so machen. Gehen Sie hier zum Layout und legen Sie die Richtung Spalte oder die vertikale Zeile beginnen soll, und jetzt können wir eine Überschrift hinzufügen. Mal sehen, welche Überschrift wir haben. Fügen wir drei Überschriften oder wir können diese einfach duplizieren. Lassen Sie uns zuerst die Details erstellen, indem wir hier klicken Gesicht hier auf Esty wird die Typografie . Das Gesicht hier auf Esty wird die Typografie untergehen, und dann wird die Farbe diese schwarze Farbe sein dann wird die Farbe diese schwarze Farbe Dann werde ich es dreimal so duplizieren. Dann haben wir diesen Text, den Text kopieren und den Text so auf jeder Krawatte platzieren, ihn in Absatz und hier die Zahl ändern. Ich denke, es wird eine benutzerdefinierte Größe haben, also letztere regulär 35. Lassen Sie uns diese Schriftfamilie auf at 3535 Regular ändern. Sehen wir uns nun die tiefere Größe an wählen Sie eine davon aus Die Größe 19 ist zehn Wählen wir den Container aus und setzen Sie die Zeile auf Okay, gehen wir zum Hauptcontainer im Hauptcontainer klicken auf die Mitte der Einzelposten wie folgt Sehen wir uns jetzt die Größe des Inhaltsbereichs an. Es ist auch zehn. Also hier wird die Spalte 100 sein und klicken Sie auf den Container mit der Überschrift. Lass uns hierher gehen und die Größe des Inhalts überprüfen. Es ist 30, hier können wir die Zeile auf 30 setzen. Okay. Jetzt müssen wir das dreimal duplizieren, ich werde mit der rechten Maustaste klicken und duplizieren, duplizieren. Wenn wir es jetzt 30 sehen. Jetzt kopieren wir die anderen Details wie diese, zuerst den Titel und er hat den gleichen Wortlaut und die Adresse hat auch den gleichen Wortlaut, und dann müssen wir drei Preso lesen, diesen entfernen und den Button hinzufügen und der Button wird hier sein, wir können den gleichen Button benutzen Ich denke, wir können dieselbe Schaltfläche verwenden . Um das zu tun, klicke ich auf Vorlage bearbeiten und dann auf Speichern und verlassen und wir können die Schaltflächeneigenschaft einfach von hier kopieren. Klicken Sie hier und klicken Sie mit der rechten Maustaste und klicken Sie auf Kopieren. Klicken Sie dann auf Speichern und zurück, um zurückzukehren, da es sich um eine Vorlage handelt Hier können wir einfach mit der rechten Maustaste auf die Schaltfläche klicken und hinter dieser Kachel klicken. Wenn ich diesen Würfel bewege, fügen Sie die Schaltfläche einfach ein und klicken Sie hier Dann müssen wir das Symbol hinzufügen, sodass das Symbol ein Pfeil ist. Und es ist nicht diese Art von Pfeil, lasst uns den Pfeil herausfinden. Hier klicken wir darauf, klicken wir auf Einfügen. Okay, so weit so gut. Jetzt müssen wir den Text kopieren und den Text hier platzieren, und hier haben wir ein Problem. Wir haben rechts und links als sechs addiert. Machen wir hier Null , weil wir nicht links und rechts handeln müssen, sondern hier drin. Dann klicke ich mit der rechten Maustaste auf Duplizieren und füge es hier ein und auch hier, wir brauchen das nicht, tut mir leid, nicht das. Die Steuerung ist auf Optionen eingestellt und diese wird gelöscht. Dann haben wir hier das Scheduler Vs-Symbol und fügen es so Dann lass uns den Inhalt ändern. Jetzt müssen wir das Symbol ändern, auf dieses Symbol klicken und hierher kommen. Klicken Sie dann auf das In-Symbol und dann auf JPG exportieren, wir benötigen kein PNG. das JPG-Symbol, klicken Sie hier, laden Sie das Symbol hoch, klicken Sie auf CLEC und jetzt haben wir dieses Symbol und klicken Sie auf Export, JavgoIcon und Cree und platzieren Jetzt haben wir das Design auf der linken Seite, das diesem Design entspricht, und jetzt müssen wir dieses Design auf der rechten Seite erstellen Lass uns das in der nächsten Lektion machen. 116. Design-Kontaktabschnitt - Teil 02: Okay, jetzt müssen wir diesen Abschnitt gestalten. Also lass uns anfangen. Zuerst wähle ich dieses Bild aus und klicke auf Exportieren und stelle den Typ Pass JPG ein und klicke auf Exportieren. Und hier gehe ich zu Tiny PNG und drachenseile das Bild, damit wir es optimieren können. Dann klicke ich auf die JPEG-Schaltfläche, um es herunterzuladen. Okay, jetzt müssen wir es in den Hauptcontainer hinzufügen. Also lasst uns den Hauptcontainer finden. Also klicken Sie hier. Hier haben wir unseren Hauptcontainer, und ich klicke einfach auf das Plus-Symbol und suche nach einem Bild und lass uns ein Bild wie dieses einfügen , das hinzugefügt wurde, sehen wir mal. Nein, ist es nicht Lass es uns noch einmal hinzufügen. Wir müssen es hier hinzufügen. Okay. In Ordnung. Jetzt werde ich auf das Bild klicken. Das heruntergeladene Bild, dann kopieren wir hier diesen Text. Lass uns das als Text hinzufügen. Okay, ich klicke auf Auswählen und das Bild wurde hinzugefügt. Jetzt müssen wir diesen Container auswählen und den Standard mit diesem 550 herausfinden . Fügen wir mit diesem 550 hinzu, klicken Sie hier, um Px und 550 auszuwählen. Okay. Und dann müssen wir Leerzeichen dazwischen hinzufügen, also klicken Sie hier und wir müssen auch die volle Bildauflösung auf ETyleeGod einstellen und in diesem Hauptcontainer fügen wir die Spalte 90 hinzu, die Einladungsgröße war hier 90. Jetzt müssen wir auf das Leerzeichen zwischen und in einem größeren Fenster klicken , es wird so aussehen, es wird so aussehen, und dann müssen wir es in die Mitte stellen Klicken Sie so auf Align Center. Jetzt müssen wir diese beiden Elemente hinzufügen, los geht's. 117. Design-Kontaktabschnitt - Teil 03: Jetzt müssen wir diese beiden Elemente erstellen, also fangen wir hier an. Lassen Sie uns zunächst die Breite herausfinden, die Breite ist 213 und die Höhe ist 152. Lass uns hierher kommen und auf unseren Hauptcontainer klicken und innerhalb des Hauptcontainers einen Untercontainer wie diesen erstellen und ihn hinter das Bild stellen Und jetzt wurde das Design geändert, aber machen wir weiter und wir können sie reparieren. Klicken Sie hier und gehen Sie zu Advance und legen Sie den Rand fest und fügen Sie eine Null hinzu. Dann können wir im Layout mit Klick hier und Klick auf Configure einstellen , dass die Breite 213 war Machen wir Breite 213 und Höhe 152. Die Körpergröße des Mannes wird 152 betragen. Eigentlich können wir die Höhe nur so einstellen , wie wir sie einstellen müssen. Also haben wir es hier schon gemacht. Wenn wir es also so überprüfen, können wir sehen, dass wir diese Details hinzugefügt haben. Okay. Jetzt müssen wir nur noch auf den Container klicken und die Position als absolut einstellen. Okay, dann können wir das Op-Set vorerst so einstellen , lassen wir es hier. Und jetzt müssen wir diese Texte hinzufügen klicken Sie hier und klicken Sie auf Überschrift und hier auf Stil, Typografie wird Kopf sein, Textfarbe wird diese schwarze Farbe sein und Text wird 247 so sein, dann werde ich ihn duplizieren und diesen kopieren, dann fügen Sie ihn so ein und seine Größe wird Sub sein, ich denke, die Größe ist aufgefüllt, ist es Bett 25, mal sehen. Ja, es ist ein Hinzufügen und klicken Sie hier, dann fügen Sie diesem Layout eine Hintergrundfarbe hinzu. Gehen Sie zum Stil auf Stilhintergrund, die Farbe wird wie folgt weiß sein Jetzt müssen wir Rahmen hinzufügen und tatsächlich Randradios hinzufügen. Wenn wir den Randradius überprüfen, wird er auf dieses Layout klicken und es ist 20, machen wir daraus 20 auf dem Layout, machen es zentriert zum Mittelpunkt des Werts und lassen Sie uns die einladende Größe herausfinden Die einladende Größe ist zehn. Stellen wir die Aufgabe zehn ein, nicht die Spalte. Eigentlich sollte es eine Zeile sein. Okay. Jetzt müssen wir die Polsterung hinzufügen, lassen Sie uns die Polsterung überprüfen Die Polsterung ist 20, im Container gehen Sie zu Adds und bei der Polsterung setzen Sie sie auf Okay. Jetzt müssen wir dazu diesen Hintergrundschatten hinzufügen. Ich kann zu Stil gehen und den Boxschatten stylen, den Boxschatten, lassen Sie uns die Boxschattendetails kopieren. Klicken Sie hier auf den Boxschatten und kopieren Sie die RGBA-Farben und kommen Sie hierher, bewegen Sie die RGBA-Farben, und die Unschärfe ist 15 und andere Lassen Sie uns diese Unschärfe auf 15 setzen. Okay. Nehmen wir an, es ist da, also legen wir die Position fest. Auf einmal wird der Offset so sein und der vertikale Offset wird tatsächlich so sein wie hier. Ja. Und wir vergessen, dem Hauptbehälter eine Polsterung hinzuzufügen, unsere Polsterung sollte 120 sein Ja, es sind 120. Sie fügen am oberen Rand für die Polsterung 1220 hinzu. Wählen Sie erneut diesen und den oberen Satz wie folgt aus. Ja, so weit so gut und jetzt haben wir diesen, dann müssen wir den zweiten hinzufügen Gehen wir genauso weiter , klicken Sie zuerst hier , um einen Container hinzuzufügen Lassen Sie uns einen Container wie diesen platzieren und lassen Sie uns so unter das Bild stellen. Okay. Dann im Voraus ist es die letzte Null, und lassen Sie uns die Breite herausfinden, die Breite ist 213 Fixel 213 Und dann gehen wir zum Stil und fügen so eine Hintergrundfarbe hinzu Dann kopieren wir den Text und fügen den Text hier hinzu, um Text in diesen Container einzufügen. Dann hier, um den echten Text hinzuzufügen, und hier, sagen wir, die Größe am selben Tag wie die Absatzgröße, aber es ist nicht die Absatzseite, nein. Ja, es ist eine 40 als Schriftgröße. Lassen Sie uns diese Schriftgröße also manuell wie folgt auf 40 festlegen. Okay, dann lass uns das duplizieren und dieses kopieren, den Text hier einfügen. Und was den Stil angeht, wird die Typografie eine Unterüberschrift sein. Okay, jetzt machen Sie es zentriert, machen Sie diesen Text auch mittig und klicken Sie auf den Container, Container auf das Layout, machen Sie es zu einer Ausrichtungsmitte und lassen Sie uns die Größe dazwischen herausfinden Die Größe dazwischen ist zehn, in der Zeile machen Sie daraus zehn und bei der Polsterung wird der Abstand zwei sein A macht Polster. Was ist mit der linken und rechten Polsterung? Die linken und rechten Polsterungen sind zu gut, zu gut, links ist zu gut. Etwas stimmt nicht. Victory, reguläre 40. Wir müssen den Wert erhöhen Machen wir links und rechts, aber Null. Nein, nicht arbeiten. Wir müssen das um nicht so viel erhöhen. 215-22-0220 wird funktionieren. Okay, so weit, so gut. Und jetzt müssen wir die Ecke hinzufügen. Sehen wir uns den Eckenradius Eckenradius an. Sehen wir uns den Eckenradius an, der Eckenradius ist zwei Arten am Rand, der Eckradius ist zwei leer, wir müssen den Boxschatten hinzufügen, den Farbcode für den Kastenschatten, wir müssen ihn von hier kopieren. Stellen Sie das CSS ein und kopieren Sie die RGPA-Farbe hier, wir sollten 15 daraus machen Jetzt sieht es gut aus. Jetzt müssen wir weitermachen und die Position wird absolut sein und wir können sie hier korrigieren. Und jetzt ändern wir den Offset und hier ist er. Es ist in der Mitte. Also fügen wir es der mittleren Horizontalen hinzu. Lassen Sie uns diese horizontale Ausrichtung so vornehmen , dass es genau in der Mitte sein sollte, um es hierher zu bringen . Okay. Und wir haben vergessen, die Textfarbe zu ändern. Lass uns die Textfarbe ändern. Okay, so weit, so gut. Und jetzt haben wir diese beiden Elemente, und jetzt müssen wir die Animation zu diesem Element hinzufügen . Also lass uns das machen. 118. Design-Abschnitt Kontaktaufnahme – Teil 04: Okay. Wenn ich nach unten scrolle, möchte ich, dass dieser Abschnitt von oben nach unten animiert wird, und wenn ich nach oben gehe, sollte es „Gehe nach oben“ und „Am selben Tag“ -Container sein , Abschnitt „Am selben Tag“ Wenn wir nach oben und unten scrollen, sollte er horizontal nach links und rechts gehen Fügen wir also diese Animationen hinzu. Klicken Sie also hier und wenn Sie weiterfahren, gehen Sie zum Bewegungseffekt und zum Bewegungseffekt zum Scroll-Effekt Beim Scroll-Effekt benötigen wir diese Vertikale, also klicken Sie hier auf die Vertikale und lassen Sie uns sehen, ob sie in Aktion ist Eigentlich sollte sie so unten sein. Okay. Lassen Sie uns jetzt den Standpunkt festlegen. Okay. Lassen Sie uns nun einen neuen Abschnitt erstellen, damit wir die Animation klar verstehen können Klicken Sie hier und fügen Sie Maxt als 600 min Höhe als 600 hinzu und jetzt funktioniert es so Gehen Sie runter, klicken Sie hier und lassen Sie uns aufhören, wenn es so ist wie hier. Also los geht's und lass uns damit aufhören. Genau hier, nein, nein, richtig? Okay. Nett. Jetzt müssen wir diesem den gleichen Effekt hinzufügen. Klicken Sie hier und auf Erweiterter Bewegungseffekt, klicken Sie auf Scroll-Effekt Und hier müssen wir den horizontalen Scroll hinzufügen . Und wenn ich es scrolle, sollte es so aussehen. Also hier, es geht so weiter und weiter runter, wenn ich so drück, sollte genau hier Schluss sein. Also lass uns sehen. Okay. Nett. Jetzt haben wir vollständig abgeschlossen Bereich „ Kontakt mit der JB Family Clinic“ Okay, hier, ich habe gerade ein Problem gefunden. Wenn ich also die Website vergrößere, wird dieser Abschnitt hier angezeigt. Wir können es also einfach reparieren, also klicken Sie hier und gehen Sie im Voraus weiter. Stellen Sie die horizontale Ausrichtung auf richtig ein, und jetzt können wir sie hier einstellen. Ist es wie hier? Lass uns sehen. Okay. Nett. Klicke auf Veröffentlichen 119. Problem mit Boxschatten beheben: Wenn ich auf der Website nachschaue, kann ich diese Art von Hintergrundschatten und den Eckenradius sehen , also brauchen wir ihn hier nicht, und ich kenne den Grund dafür, lassen Sie uns das beheben. Wenn wir zum R-Anbieter gehen, gebe ich im Loop-Karussell den Wert R-Provider-Vorlage an und klicke auf den Container Wenn ich dann zu Advance und benutzerdefiniertem CSS gehe, haben wir hier das CSS, also öffnen wir die Website auf New Tab Mal sehen, und hier werde ich dieses CSS entfernen, indem ich Command drücke, einen Befehl zum Ausschneiden, und jetzt auf Con Pablish klicke . Wenn ich die Website überprüfe, das Problem behoben A: Wenn wir es von hier entfernen, können wir sehen, dass der Hintergrund für die dedizierten Provider-Elemente ebenfalls entfernt wird Um das Problem zu beheben, werde ich das zunächst einfach so platzieren und hier kann ich zum Layout gehen und im Layout werde ich eine CSS-Klasse hinzufügen. Fügen wir unser Anbieter-Panel hinzu. Dieser Name kann alles sein, aber ich werde diesen Namen hinzufügen. Dann kopiere ich das und gehe zu benutzerdefiniertem CSS und füge hier einfach unser Anbieter-Panel wie folgt hinzu. Lass uns zehn machen, es so hinzufügen, zehn hinzufügen, es so hinzufügen und hoffen wir auf dieses Silber und mal sehen, es ist hier behoben, aber hier haben wir das Problem. Eigentlich müssen wir diese CSS-Klasse zwei hinzufügen, nicht in diesem Container. Ich denke, wir sollten es dem Carsel hinzufügen , also werde ich es hier entfernen und veröffentlichen, tut mir leid, wir müssen es hier bearbeiten Ich entferne sie einfach. Fügen wir sie so hinzu. Und hoffen wir, dass das funktioniert, bitte, dann klicken Sie hier wieder auf Convent, klicken Sie hier. Und dann versuchen wir, die CSS-Klasse hier zu bearbeiten. Ich denke es funktioniert. Es scheint zu funktionieren und klicken Sie auf Veröffentlichen. Gehen wir dann wieder zu Vorlage bearbeiten, den Container auf CS hier wieder, wir haben ein Problem. Wir haben nur eine CSSU. Wir haben das Leerzeichen jetzt nicht hinzugefügt Allgood, also klicke ich jetzt auf Veröffentlichen und wenn ich es jetzt überprüfe, sollte es funktionieren Okay, jetzt funktioniert es. 120. Abschnitt zur Entwurfsbewertung - Teil 01: Jeder muss jetzt diese vertrauenswürdigen Y-Familien wie den Q-Bereich erstellen . Dies ist der Vorschaubereich. Um dies zu erstellen, können wir dieselben Techniken verwenden , die wir für die Erstellung unseres speziellen Anbieterbereichs verwenden. Fangen wir wie zuvor Ich gehe zum Votress-Dashboard und hier können wir eine erweiterte benutzerdefinierte Feldgruppe erstellen , um die Bewertungen hinzuzufügen Hier haben wir derzeit Feld für unsere Anbieter und ich klicke auf Neu Und hier werde ich den Namen als Feld für Kundenrezensionen angeben. Und dann klicke ich auf Änderungen speichern. Bevor wir die Feldgruppe erstellen, müssen wir eigentlich die Posentypen erstellen. Also klicke ich auf Typen erzwingen, und hier haben wir die Posentypen unserer Anbieter, und hier müssen wir Kundenrezensionen, Beitragstyp, ländlichen Namen als Kundenbewertung hinzufügen und Singular Name Kundenbewertung und Posentyp e ist Kundenbewertung, und wir brauchen keine Textnomonien und die Sichtbarkeit ist öffentlich und klicke auf Änderungen speichern In der erweiterten Konfiguration können wir jetzt das Lab ändern und tatsächlich können wir diesem benutzerdefinierten Feld Symbole hinzufügen Derzeit gibt es Kundenrezensionen wie dieses Pin-Symbol. Wenn ich also hier zur Sichtbarkeit gehe, kann ich das Symbol hier sehen Fügen wir einen ähnlichen Stern hinzu. Okay. Welcher Bewertungsstern passt dazu, wählen Sie den Stern aus und klicken Sie auf Änderungen speichern. Okay, es ist Secky, jetzt gehe ich zu Feldgruppen und hier bearbeite ich unsere Kundenrezensionsräder, die wir bereits erstellt , und im Feld klicke ich auf Bearbeiten haben, und im Feld klicke ich auf Bearbeiten und zuerst müssen wir einen Namen hinzufügen, tatsächlich können wir diesen Namen als Titel hinzufügen Wenn wir zu unseren Anbietern, Anbietern gehen und hier haben wir unsere Anbieter, also klicke ich auf Bearbeiten und wenn ich bearbeite, können wir diese Ärztin Lisa oder den Titel als Gutachternamen hinzufügen , wie hier in MR ist der Name des Rezensenten und in der Beschreibung können wir die Bewertung hinzufügen und wir benötigen das benutzerdefinierte Feld für beim Headshot. Lassen Sie uns eigentlich ein Beschreibungsfeld wie dieses Bildfeld zum Headshot hinzufügen . Lass uns das machen. Hier werde ich ein Beschreibungsfeld hinzufügen, was bedeutet, dass Textbereich und Etikett als Überprüfungstext dienen. Lassen Sie uns das überprüfen. müssen keinen Text hinzufügen, nur die Überprüfung und der Feldname wird überprüft. Wir benötigen keinen Standardwert, dann klicke ich auf das Feld. Und hier müssen wir das als Bild auswählen. Solches Bild. Okay. Und die Feldtabelle wird ein Headshot sein und der Rückweg wird ein Bild-Array sein und gut. Jetzt gehe ich zu der Einstellung, die in der Standortregel festgelegt ist, dass der Beitragstyp der Kundenbewertung entspricht, und klicke jetzt auf Änderungen speichern. Ein guter. Wenn ich jetzt zum Bereich Kundenbewertung gehe und auf Bewertung eines neuen Kunden klicke, haben wir hier die Möglichkeit, den Titel als Namen und die Bewertung und dann das Headshot-Bild hinzuzufügen . Wenn ich zum Inhalt der Website gehe, können wir den Namen des Kunden sehen. Kopieren Sie den Kundennamen und geben Sie ihn als Titel ein. Dann haben wir hier die Beschreibung und dann müssen wir das Bild bekommen. Derzeit haben wir keine Bilder. Wir haben diese wenigen Bilder. Vielleicht können wir die Bilder im Bildordner sehen. Wir haben diese Bewertungs-Avatas in unserem Bildordner. Hier haben wir den Bilderordner und in der ersten Projektrezension Avatas Ich werde sie einfach alle hervorheben und dann das Bild hinzufügen und ich werde einfach alle einfügen, was bedeutet, dass wir sie verwenden können, wenn wir das echte Bild hinzufügen Also hier haben wir den ersten Avatar und klicken auf Auswählen und dann auf Veröffentlichen, Veröffentlichen. Okay, ich werde den Rest der Kundenrezensionen hinzufügen. Um das zu tun, klicke ich auf Neue Kundenbewertung hinzufügen und kopiere hier den Namen und die Beschreibung. Kopiere den Namen auf der Grundlage einer Beschreibung und gib ihn als Bewertung ab Dann finde den David und hier ist der David, wir verbergen, veröffentlichen und veröffentlichen die Bewertung Ich werde den Rest erledigen und wir sehen uns in der nächsten Lektion. 121. Bewertungsbereich mit Bewertungselement: möchte den Bewertungsbereich auf einfache Weise erstellen, ich zeige Ihnen auch den Weg. Wir können einfach die Bewertungselemente von Element verwenden und sie verwenden. Diese Lektion wird die Lektion sein , bevor wir das obige Karussell erstellen Machen Sie sich also in der nächsten Lektion keine Sorgen, Sie werden sehen, wie Sie das Karussell erstellen Okay, jetzt klicke ich auf das Plus-Symbol und hier suche nach Bewertung. Okay, hier haben wir ein Bewertungsfeld, ziehen Sie es so in die Länge Und hier müssen wir Artikel hinzufügen. Also füge zuerst die Artikel hinzu, wir müssen den Artikel finden. Okay, zum Inhalt der Website haben wir die Details, also lassen Sie uns hinzufügen, ich werde eins nach dem anderen hinzufügen, aber wir haben den Namen und wir haben keinen Titel, entfernen ihn und wir haben die Bewertung so, also brauchen wir das Symbol nicht, entfernen Sie das Symbol zu einem entfernen ihn und wir haben die Bewertung so, also brauchen wir das Symbol nicht, Bild. Lass uns ein Bild wie dieses hinzufügen. Okay. Jetzt machen wir dasselbe für das Rennen. Ich werde diese fünf Bewertungen hinzufügen und bis bald. Okay, füge die Folien oder die Rezensionen hinzu, und jetzt müssen wir nur noch die Seite zur Ansicht frei legen. Bei der zusätzlichen Option wird es drei Seiten zur Ansicht geben. Derzeit behalte ich die Standardoption bei und beim Stil müssen wir die Optionen ändern. Seite dazwischen wird 20 sein und die Rahmenfarbe sollte keine sein und der Randradius ist 20, Rand mit sollte Null sein, die Rahmenfarbe sollte auch nicht sein und die Polsterung war zu gut, die Polsterung war zu gut Wenn wir das von hier aus überprüfen, können wir hier sehen, dass die Polsterung zu gut ist. der Kopfzeile brauchen wir also keine Hintergrundfarbe für das Trennzeichen, wir brauchen auch keine Hintergrundfarbe für Das einzige, was wir brauchen, ist der Schlagschatten. Lassen Sie uns versuchen, den Boxschatten nach der Fertigstellung dieses Designs hinzuzufügen , und wir müssen zum Text gehen, und im Text wird die Namensfarbe schwarz sein und die Typografie ist Unterbearbeitung Ja, es ist vom Typ Subeding, und jetzt zum Titel, wir haben keinen Titel, also geht es uns nicht darum Und die Farbe der Rezension wird Text sein und die Typografie wird Absatz sein Sehen wir uns auf dem Bild die Bildgröße an. Figma-Design, Bildgröße 64 mal 64, mach es 64. Jetzt müssen wir die Lücke finden, die Lücke ist nicht, es sind zwei L und der Radius wird 60 sein Lass uns 60 draus machen. Wir brauchen keine Icons. Wir werden keine Symboldetails bearbeiten und hier haben wir ein Bewertungssymbol. Sehen wir uns die Größe des Bewertungssymbols an. Es ist 23 mal 23. Wir haben 23 Abstände, das ist das, es sind sechs, und die Farbe ist, lassen Sie uns die Farbe sehen, den Farbcode kopieren und den Farbcode hier einfügen. Die Sache ist, dass wir die Bewertungen immer noch nicht sehen. Lassen Sie uns herausfinden, wie wir die Bewertungen anzeigen können. Als zusätzliche Option, haben wir eine Bewertung? Nein. Okay, hier müssen wir die Bewertung hinzufügen. Fügen wir die Bewertung wie folgt als fünf hinzu. Okay? Okay. Ich hab dich. Ich hab dich. Fünf. Ja, die Bewertung ist immer fünf, weil wir für die Website die beste Bewertung für Okay hinzufügen, jetzt so weit so gut und wir haben ein ähnliches Ergebnis erzielt und wir haben noch viel zu tun. Wenn wir also zu Estyle gehen und jetzt den Navigationsteil in der Navigation einstellen müssen, setze ich den Pfeil auf ich den Pfeil Null, weil wir keine Pfeile benötigen Mal sehen, ob es eine Möglichkeit gibt, die Pfeile zu entfernen. Nein. Ich sehe keine Möglichkeit, den Pfeil zu entfernen, ein Stil, das können wir tun. Okay, und die Seitennummerierung sollte zwei sein. Ich denke, es ist ein Abstand der Seitenabstand dazwischen beträgt 20 und die Größe ist Machen wir also die Größe 20. Die Farbe ist die Primärfarbe, die aktive Farbe ist diese Farbe. Leider ist die Farbe eine Akzentfarbe, und die aktive Farbe wird diese Farbe sein. Okay. Also, was fehlt? Also lass uns sehen, lass uns sehen. Hier fehlt uns der Hintergrund. Gehen wir also zu den Folien und haben wir? Ja, wir haben Randfarben. Wir haben eine Möglichkeit, den Rand hinzuzufügen, aber nicht am Schlagschatten. Also lass uns sehen, lass uns sehen. Es sollte eine Möglichkeit oder Platz geben, um den Box-Schatten hinzuzufügen. Lassen Sie uns vorab den Rand sehen, den Randradius auf 20 setzen und den Schatten fallen lassen. Nein, es wird zu allen Abschnitten hinzugefügt oder lassen wir das, wir müssen es nur zur Folie hinzufügen. Also ich schiebe, die Hintergrundfarbe ist okay, Ränder grenzen mit zwei, und der Körperradius, die Boda-Farbe wird nicht weiß-schwarz sein Eigentlich haben wir keine Möglichkeit, Schlagschatten hinzuzufügen, aber wir erstellen bereits das CSS, vielleicht wird es funktionieren, den CSS-Code hier hinzuzufügen Also werde ich den Loop Carer auswählen. Dieser, lass uns diesen Loop Carsel auswählen. Hast du dich daran erinnert, dass wir CSS-Cast wie folgt hinzufügen? Und lass uns hier reingehen. Gehen wir zu Advance und in CSS, lass uns, es funktioniert. Wow, nett. Gehen Sie jetzt zum Inhalt und ich dachte nicht, dass das funktioniert, aber es funktioniert. Also hier werde ich die Grenze mit einer Krähe markieren und die Randfarbe wird nicht okay sein Das ist die Stärke von CSS dann müssen wir natürlich das Trennzeichen entfernen, und die Lücke wird k sein. Ich denke, die Lücke ist ausgestorben, sie ist zu gut, nicht sechs zu gut nicht sechs Okay. Und hier haben wir die Bewertung wie unten. Ich denke, es gibt keine Möglichkeit, die Bewertung wie folgt hinzuzufügen. Ja, wir müssen ein benutzerdefiniertes ESS erstellen, aber wir können eine solche Vorlage verwenden, indem wir das Loop-Karasel verwenden Das sind die Einschränkungen , die auch für Folien in Folien Wir müssen das Pad einrichten Wir haben die Hochzeit schon geplant. Oh nein, wir müssen das Hoch nach unten setzen. Oh, vielleicht klicken wir hier und fügen unten 30 hinzu, damit wir dieselben Ergebnisse erzielen können. 81 ist ein bisschen größer. Fügen wir unten sechs hinzu. Okay, jetzt ist es gut. Und in der Navigation sind die Seitennummerierungselemente der Navigation zu nahe beieinander, also versuchen wir, das Problem zu beheben Ich weiß, wie man das repariert. Wir müssen 60 sein. Ja, wir werden sehen, was wir tun können. Aber vorerst lassen wir es so, und jetzt müssen wir den gleichen Effekt hinzufügen. Schauen wir uns dazu an , was wir tun können. Zuerst werde ich das veröffentlichen und wir haben auch keine Möglichkeit, diesen obigen Effekt zu erzeugen, also müssen wir auch diesen ignorieren. Und jetzt werde ich aktualisieren und wir müssen einen Weg finden, hier Schlagschatten hinzuzufügen. Das ist also der Nachteil, wenn wir die vorgefertigten Elemente verwenden, aber mit der Leistung von Element Orp können wir benutzerdefinierte Inhalte für unsere Website erstellen und mithilfe von Vorlagen eine vollständig benutzerdefinierte Website erstellen Versuchen Sie jetzt zumindest, dieses Problem mit der Paginierung zu beheben. Ich habe mich zusätzlich darauf eingelassen. Okay, hier habe ich eine Möglichkeit, die Pfeile zu verstecken und die Vegetation sollte punktförmig auf den Folien stehen Okay, hier haben wir eine Möglichkeit, das Unkraut hinzuzufügen, aber wir müssen das mit nicht hinzufügen Let's make slides heißt Drei. Machen wir vier draus. Nein, hier sollten drei sein und die Folien sind okay. Jetzt, wo wir eine Sache reparieren und hier müssen wir noch die Polsterung hinzufügen, hier gut vom Stil, haben wir auf keinen Fall einen Abstand von Größe 20 dazwischen Was ist mit im Schauen wir uns das im Voraus an. Ich glaube nicht, dass wir eine Möglichkeit haben, weil es passiert ist, als wir diese CSS-Klasse hinzugefügt haben, also müssen wir das mit CSS beheben. Wie dem auch sei, wir werden diese Bewertung im Bewertungsfeld nicht verwenden, also werde ich sie einfach entfernen. Dies dient nur dazu , Ihnen beizubringen, wie das geht, und wir müssen CSS hinzufügen, sodass wir uns in diesem Kurs nicht auf CSS konzentrieren. Ich entferne einfach diesen Teil und wir sehen uns in der nächsten Lektion, in der das Erstellen der Fußzeile geht 122. Abschnitt zur Entwurfsbewertung - Teil 02: Okay, jetzt haben wir Bewertungen hinzugefügt. Fangen wir also an zu entwerfen. Lassen Sie uns hier zunächst die Größe dieses Containers überprüfen. Also ist es 492. Die Höhe ist 492, also machen wir 500 draus. Also werde ich zuerst diesen unnötigen Container entfernen und ich klicke hier iPlexBX und dann auf die Spalte Müde Okay, hier, lass uns im Voraus weitermachen. Lassen Sie uns all das entfernen, was feststeckt, und machen wir 140, 140 und rechts und links. Nein, nein, keine Marge. Es sollte eine Polsterung sein Polsterung beträgt 140 und die Polsterung beträgt ebenfalls 140, und der obere Rand wird Okay. Gehen wir jetzt zu Layout im Layout. Die Männerhöhe wird 500 Pixel betragen. Jetzt müssen wir als ersten Schritt diesen Header hinzufügen Lassen Sie uns hierher kommen, das Element auswählen und die Kopfzeile hinzufügen, dann diesen Text kopieren, den Text platzieren und ihn mittig ausrichten. Die Typografie ist die Kopfzeile und die Textfarbe wird dieser Text sein. Okay Jetzt müssen wir dieses Karussell hinzufügen. Holen wir uns das Loop-Karussell. Ich werde schnell das Anzeigenelementsymbol und Suchschleife und hier haben wir das Loop-Karussell, füge es hinzu und jetzt wähle ich den Hauptcontainer aus und bei RAW mache ich daraus 60, weil wir hier die einladende Größe als 600 haben Gehen wir jetzt, klicken wir auf diese Schleifenbox und zuerst müssen wir eine Vorlage erstellen Ich klicke einfach auf Vorlage erstellen und dann auf Sato, um sie zu erstellen Okay, ich wurde erstellt und ich muss eine wieder speichern Okay, wählen Sie jetzt den Container erneut aus. Lassen Sie uns eigentlich das Loop-Casel auswählen und hier wird unsere Vorlage automatisch hinzugefügt Und machen wir uns vorerst keine Gedanken über die Anzahl der Folien. Und gehen wir zur Abfrage in der Abfrage über. Ich lege die Quelle als Kundenrezensionen fest und lasse uns die Standarddaten überprüfen . Dann müssen wir auf Vorlage bearbeiten klicken Okay. Jetzt klicke ich auf dieses Plus und klicke auf das Plex-Feld und klicke diese Richtungsspalte und gehe zu Advance und entferne den Rand und die Polsterung Als ersten Schritt müssen wir nun das Bild und den Namen hinzufügen, um diesen Satz zu verwenden , Element hinzufügen und Bild suchen und das Bild einfach so hinzufügen Hier klicke ich auf dynamisches Tag und dann auf das ACF-Bildfeld, setze ich den Schlüssel als Kundenrezension wie diesen, das Bild wird hinzugefügt und die Bildauflösung ist voll Und um das Ergebnis zu zeigen, kann ich auf „ Objekt wiederholen“ klicken und dann auf Anfrage“ auf „Bewertung abfragen“ klicken. Ich lege die Einstellung für die Quellvorschau fest, Ich lege die Einstellung für die Quellvorschau fest die Vorschau eines bestimmten Beitrags auf Kundenbewertung ein und klicke auf Anwenden und Vorschau Ordnung. Jetzt fügen wir die restlichen Details hinzu und erstellen dann das Design. Jetzt muss ich den Namen hinzufügen, also füge ich die Überschrift hinzu und von hier aus werde ich den Beitragstitel so festlegen , wie ich mich erinnere, dass der Beitragstitel der ist, oder wir können auf Bearbeiten klicken und ihn sehen. Okay, hier ist der Titel des Beitrags der Name des Rezensenten. Okay. Jetzt ändere ich einfach die Farbe und lass uns die Schrift acht reguläre 25 sehen, was hier heißt, es sollte Sub Ding sein, es ist subbed, lass das Sub D rein, und jetzt werde ich diesen Text duplizieren und lassen Sie uns hier den Posentyp hier auswählen, den Posentitel entfernen und auf dynamisches Tag und ACF-Feld klicken, darauf klicken Der Schlüssel wird Überprüfung sein. Ja, die Bewertung wurde gerade hinzugefügt und ihre Größe sollte der Absatzgröße entsprechen. Lassen Sie uns das hier eingeben, legen wir es als Absatz und als Container fest, fügen wir die Größe dazwischen hinzu, die Größe der Einladung ist die Größe der Einladung, also gehe ich zum Layout und die Zeilengröße wird zwei sein Jetzt haben wir ein Problem. Derzeit haben wir das Icon-Set , all diese Icons sind fünf, aber wenn jemand bei einer Vier-Sterne-Revue einen Platz hat, müssen wir ihn anpassen, denn wenn wir hier nur vier Sterne oder fünf Sterne hinzufügen, können wir ihn nicht anpassen Versuchen wir es mit dem Nächsten. Jetzt haben wir Bewertungen hinzugefügt. Fangen wir also an zu entwerfen. Lassen Sie uns hier zunächst die Größe dieses Containers überprüfen. Es ist 492, die Höhe ist 492, also machen wir es auf 500. Zuerst entferne ich diesen unnötigen Container und klicke hier auf das Lex-Feld dann auf die Spalte Müde. Okay, hier, lass uns im Voraus weitermachen. Lassen Sie uns all das entfernen, was feststeckt, und machen wir 140, 140 und rechts und links. Nein, nein, keine Marge. Es sollte eine Polsterung sein Polsterung beträgt 140, und die Polsterung beträgt ebenfalls 140 und der obere Rand wird Okay. Gehen wir jetzt zu Layout im Layout. Die Höhe des Mannes wird 500 Pixel betragen. Jetzt müssen wir als ersten Schritt diesen Header hinzufügen. Kommen wir hierher, p-Element, und fügen Sie die Kopfzeile hinzu, kopieren Sie dann diesen Text, platzieren Sie den Text und richten Sie ihn mittig aus. Die Typografie ist die Kopfzeile und die Textfarbe wird dieser Text sein. Okay Jetzt müssen wir dieses Karussell hinzufügen. Holen wir uns das Loop-Karussell. Ich werde schnell das Anzeigenelementsymbol und Suchschleife und hier haben wir das Loop-Karussell, füge es hinzu und jetzt wähle ich den Hauptcontainer aus und bei RAW mache ich das auf 60, weil wir hier die einladende Größe als 60 haben Gehen wir jetzt, klicken wir auf dieses Loop-Casel und zuerst müssen wir eine Vorlage erstellen Ich klicke einfach auf Vorlage erstellen und dann auf Sato, um sie zu erstellen Okay, ich wurde erstellt und ich muss eine wieder speichern Okay, wählen Sie jetzt den Container erneut aus. Lassen Sie uns eigentlich das Loop-Casel auswählen und hier wird unsere Vorlage automatisch hinzugefügt Und machen wir uns vorerst keine Gedanken über die Anzahl der Folien. Und gehen wir zur Abfrage in der Abfrage über. Ich lege die Quelle als Kundenrezensionen fest und lasse uns die Standarddaten überprüfen . Dann müssen wir auf Vorlage bearbeiten klicken Okay. Jetzt klicke ich auf dieses Plus und klicke auf das Plex-Feld und klicke diese Richtungsspalte und gehe zu Advance und entferne den Rand und die Polsterung Jetzt müssen wir als ersten Schritt das Bild und den Namen hinzufügen, dazu formuliere ich Element hinzufügen und Bild suchen und füge das Bild einfach so hinzu und ja, hier klicke ich auf dynamisches Tag und auf das ACF-Bildfeld, ich werde den Schlüssel als Kundenrezension so einstellen, das Bild hinzugefügt und die Bildauflösung wird voll sein und das Ergebnis wird angezeigt, Ich kann auf Loop-Elementsatz und dann auf Abfrage klicken. Nein, die Einstellung zur Überprüfung bei Query Ich lege die Einstellung für die Quellenvorschau fest, stelle für das vorschauspezifische Beitragselement Kundenrezension ein und klicke auf Anwenden und Vorschau anzeigen. Lassen Sie uns nun die restlichen Details hinzufügen und dann das Design erstellen. Jetzt muss ich den Namen hinzufügen, ich werde die Überschrift hinzufügen und von hier aus werde ich den Titel des Beitrags sagen, da ich mich daran erinnere, dass der Beitragstitel der Name ist , damit wir auf Bearbeiten klicken und ihn sehen können. Okay, hier ist der Titel des Beitrags der Name des Rezensenten. Okay. Jetzt ändere ich einfach die Farbe und lass uns die Schrift regulär 25 sehen , das heißt hier, sie sollte Sub Ding sein, sollte sie subbed sein lassen, lass das Sub D rein, und jetzt werde ich diesen Text duplizieren und lassen Sie uns hier den Posentyp hier auswählen, den Posentitel entfernen und auf dynamisches Tag und ACF-Feld klicken, darauf klicken Der Schlüssel wird Überprüfung sein. Ja, die Bewertung wurde gerade hinzugefügt und ihre Größe sollte der Absatzgröße entsprechen. Gehen wir also zur Eingabe über, und hier legen wir es als Absatz fest und im Container nehmen wir die einladende Größe, die Umkehrung der Größe ist zwei Die einladende Größe ist zwei, also gehe ich zum Layout und die Zeilengröße wird zwei sein Jetzt haben wir ein Problem. Derzeit haben wir die Icons, all diese Icons sind fünf, aber wenn jemand eine Vier-Sterne-Revue hinzufügt, für die wir einen Platz haben, müssen wir sie anpassen, denn wenn wir hier nur vier Sterne oder fünf Sterne hinzufügen, können wir sie nicht anpassen Versuchen wir es in der nächsten Lektion. Okay, jetzt haben wir Bewertungen hinzugefügt. Fangen wir also an zu entwerfen. Lassen Sie uns hier zunächst die Größe dieses Containers überprüfen. Also ist es 492. Die Höhe ist 492. Also lass uns 500 draus machen. Also werde ich zuerst diesen unnötigen Container entfernen und ich klicke hier Vlexbx und klicke auf Okay, hier, lass uns im Voraus weitermachen. Lassen Sie uns das Ganze entfernen und machen wir 140, eins, 40 und rechts und links. Nein, nein, keine Marge. Es sollte eine Polsterung sein Polsterung beträgt 140 und die linke Polsterung beträgt ebenfalls 140, und der obere Rand beträgt Okay. Gehen wir jetzt zu Layout im Layout. Die Männerhöhe wird 500 Pixel betragen. Okay. Jetzt müssen wir als ersten Schritt diesen Header hinzufügen. Lassen Sie uns hierher kommen, ein Element auswählen und die Kopfzeile hinzufügen, dann diesen Text kopieren, den Text phasenweise platzieren und ihn mittig ausrichten. Die Typografie ist die Kopfzeile und die Textfarbe wird dieser Text sein Okay. Jetzt müssen wir dieses Karussell hinzufügen Holen wir uns das Loop-Karussell. Ich werde schnell dieses Werbeelementsymbol und die Suchschleife verwenden und hier haben wir das Loop-Karussell Und jetzt wähle ich den Hauptcontainer aus, und bei RAW mache ich daraus 60, weil wir hier die Zwischengröße 60 haben Okay. Jetzt lass uns gehen , klicken wir auf dieses Loop-Fasel und zuerst müssen wir eine Vorlage erstellen Ich klicke einfach auf Vorlage erstellen und dann auf Sato, um sie zu erstellen Okay, ich wurde erstellt und ich muss eine wieder speichern Okay, wählen Sie jetzt den Container erneut aus. Lassen Sie uns eigentlich das Loop-Casel auswählen und hier wird unsere Vorlage automatisch hinzugefügt Und machen wir uns vorerst keine Gedanken über die Anzahl der Folien. Und gehen wir zur Abfrage in der Abfrage über. Ich lege die Quelle als Kundenrezensionen fest und lasse uns die Standarddaten überprüfen . Dann müssen wir auf Vorlage bearbeiten klicken Jetzt klicke ich auf dieses Plus und dann auf das Plex-Feld und dann diese Richtungsspalte und gehe zu Advance und entferne den Rand und die Polsterung Als ersten Schritt müssen wir nun das Bild und den Namen für diesen Satz hinzufügen, Element und Suchbild hinzufügen und das Bild einfach so hinzufügen Hier werde ich auf dynamisches Tag klicken und auf das ACF-Bildfeld den Schlüssel als Kundenrezension wie diesen einstellen Okay, das Bild wurde hinzugefügt und die Bildauflösung wird voll sein Und um das Ergebnis anzuzeigen, kann ich auf Loop-Elementsatz und auf Abfrage klicken. Nein, bei der Einstellung zur Überprüfung auf Query werde ich die Einstellung für die Quellvorschau festlegen, die Vorschau eines bestimmten Beitrags zur Kundenbewertung einrichten und auf Anwenden und Vorschau klicken. Lassen Sie uns nun die restlichen Details hinzufügen und dann das Design erstellen. Jetzt muss ich den Namen hinzufügen, ich werde die Überschrift hinzufügen und von hier aus werde ich den Titel des Beitrags sagen, da ich mich daran erinnere, dass der Beitragstitel der Name ist , damit wir auf Bearbeiten klicken und ihn sehen können. Okay, hier ist der Titel des Beitrags der Name des Rezensenten. Okay. Jetzt ändere ich einfach die Farbe und lass uns die Schrift regulär 25 sehen, was hier bedeutet, dass sie subding sein sollte. Ja, also wird das Sub D eingefügt und jetzt werde ich diesen Text duplizieren und lassen Sie uns hier und hier den Posentyp auswählen, den Posentitel entfernen und auf dynamisches Tag und ACF-Feld klicken, darauf klicken Der Schlüssel wird die Überprüfung sein. Ja, die Bewertung wurde gerade hinzugefügt und ihre Größe sollte der Absatzgröße entsprechen. Lassen Sie uns das hier eingeben, legen wir es als Absatz und als Container fest, fügen wir die Größe dazwischen hinzu, die einladende Größe ist zwei. Die Einladungsgröße ist zwei, also gehe ich zum Layout und die Zeilengröße wird zwei sein Jetzt haben wir ein Problem. Derzeit haben wir die Icons, all diese Icons sind fünf, aber wenn jemand eine Vier-Sterne-Revue hinzufügt, für die wir einen Platz haben, müssen wir sie anpassen, denn wenn wir hier nur vier Sterne oder fünf Sterne hinzufügen, können wir sie nicht anpassen Versuchen wir es in der nächsten Lektion. Okay, jetzt haben wir die Bewertungen hinzugefügt. Also lasst uns anfangen zu entwerfen. Lassen Sie uns hier zunächst die Größe dieses Containers überprüfen. Also es ist 492, die Höhe ist 492, machen wir es auf 500. Also werde ich zuerst diesen unnötigen Container entfernen und ich klicke hier auf Plex-Box und dann auf die Spalte Müde. Okay, hier, lass uns im Voraus weitermachen. Lassen Sie uns all das Zeug entfernen und machen wir 140, eins, 40 und rechts und links. Nein, nein, keine Marge. Es sollte eine Polsterung sein Polsterung beträgt 140 und die linke Polsterung beträgt ebenfalls 140, und der obere Rand beträgt Okay. Gehen wir jetzt zu Layout im Layout. Die Höhe des Mannes wird 500 Pixel betragen. Jetzt müssen wir als ersten Schritt diesen Header hinzufügen. Lassen Sie uns hierher kommen, ein Element auswählen und die Kopfzeile hinzufügen, dann diesen Text kopieren, den Text phasenweise platzieren und ihn mittig ausrichten. Die Typografie ist die Kopfzeile und die Textfarbe wird dieser Text sein Okay. Jetzt müssen wir dieses Karussell hinzufügen Holen wir uns das Loop-Karussell. Ich mache das Werbeelementsymbol und die Suchschleife schnell und hier haben wir das Loop-Karussell, füge es hinzu, und jetzt wähle ich den Hauptcontainer aus und bei RAW mache ich daraus 60, weil wir hier die einladende Größe als 60 haben Okay. Jetzt lass uns gehen , klicken wir auf dieses Loop-Fasel und zuerst müssen wir eine Vorlage erstellen Ich klicke einfach auf Vorlage erstellen und dann auf Sato, um sie zu erstellen Okay, ich wurde erstellt und ich muss eine wieder speichern Okay, wählen Sie jetzt den Container erneut aus. Lassen Sie uns eigentlich das Loop-Casel auswählen und hier wird unsere Vorlage automatisch hinzugefügt Und machen wir uns vorerst keine Gedanken über die Anzahl der Folien. Und gehen wir zur Abfrage in der Abfrage über. Ich lege die Quelle als Kundenrezensionen fest und lasse uns die Standarddaten überprüfen . Dann müssen wir auf Vorlage bearbeiten klicken Jetzt klicke ich darauf und ich kann auf das Plex-Feld klicken und auf diese Richtungsspalte klicken und zu Advance gehen und den Rand und die Polsterung entfernen Jetzt müssen wir als ersten Schritt das Bild und den Namen hinzufügen , dazu formuliere ich Element hinzufügen und Bild suchen und füge das Bild einfach so Hier werde ich auf dynamisches Tag und auf das ACF-Bildfeld klicken , ich werde den Schlüssel als Headshot für Kundenrezensionen festlegen, so dass das Bild hinzugefügt wurde und die Bildauflösung voll ist. Um das Ergebnis anzuzeigen, kann ich auf Loop item set in und auf Query on review setting auf Query klicken , ich werde die Quellvorschau-Einstellung festlegen die Vorschau eines bestimmten Beitrags zur Kundenrezension und dann auf Anwenden und Vorschau klicken. Ordnung. Jetzt fügen wir die restlichen Details hinzu und erstellen dann das Design. Jetzt muss ich den Namen hinzufügen, also füge ich die Überschrift hinzu und von hier aus werde ich den Beitragstitel so festlegen , wie ich mich erinnere, dass der Beitragstitel der ist, damit wir auf Bearbeiten klicken und ihn sehen können. Okay, hier ist der Titel des Beitrags der Name des Rezensenten. Okay, jetzt ändere ich einfach die Farbe und lass uns die Schrift regulär 25 sehen, was hier bedeutet, dass sie subding sein sollte Ja, sollte es ein Untersatz sein und jetzt werde ich diesen Text duplizieren und lassen Sie uns hier Posentyp auswählen, den Posentitel entfernen und auf dynamisches Tag und AF-Feld klicken, darauf klicken Der Schlüssel wird die Überprüfung sein. Ja, die Bewertung wurde gerade hinzugefügt und ihre Größe sollte der Absatzgröße entsprechen. Lassen Sie uns das hier eingeben, legen wir es als Absatz und als Container fest, fügen wir die Größe dazwischen hinzu, die einladende Größe ist zwei. Die Größe für Einladungen ist zwei, also gehe ich zum Layout und die Zeilengröße wird ebenfalls bit Jetzt haben wir ein Problem. Derzeit haben wir das Icon-Set , all diese Icons sind fünf, aber wenn jemand eine Vier-Sterne-Revue hinzufügt, haben wir einen Platz dafür, wir müssen es anpassen, denn wenn wir hier nur vier Sterne oder fünf Sterne hinzufügen, können wir es nicht anpassen Versuchen wir es in der nächsten Lektion. Okay, jetzt haben wir die Bewertungen hinzugefügt. Also lasst uns anfangen zu entwerfen. Lassen Sie uns hier zunächst die Größe dieses Containers überprüfen. Es ist also 492, die Höhe ist 492. Also lass uns 500 draus machen. Also werde ich zuerst diesen unnötigen Container entfernen und ich klicke hier auf Plex-Box und dann auf die Spalte Müde. Okay, hier, lass uns im Voraus weitermachen. Lassen Sie uns all das Zeug entfernen und machen wir 140, 140 und rechts und links. Nein, nein, keine Marge. Es sollte eine Polsterung sein Polsterung beträgt 140 und die linke Polsterung beträgt ebenfalls 140, und der obere Rand beträgt Okay. Gehen wir jetzt zu Layout im Layout. Die Größe des Mannes wird bei 500 liegen. Jetzt müssen wir als ersten Schritt diesen Header hinzufügen. Lassen Sie uns hierher kommen, ein Element auswählen und die Kopfzeile hinzufügen, dann diesen Text kopieren, den Text phasenweise platzieren und ihn mittig ausrichten. Die Typografie ist die Kopfzeile und die Textfarbe wird dieser Text sein. Okay Jetzt müssen wir dieses Karussell hinzufügen. Holen wir uns das Loop-Karussell. Ich klicke auf dieses Werbeelementsymbol und suche nach Loop und hier haben wir Loop Carousel, füge es hinzu und jetzt wähle ich den Hauptcontainer aus und bei RAW mache ich das auf 60, weil wir hier die einladende Größe als 60 haben Okay. Jetzt lass uns gehen , klicken wir auf dieses Loop-Fasel und zuerst müssen wir eine Vorlage erstellen Ich klicke einfach auf Vorlage erstellen und dann auf Sato, um sie zu erstellen Okay, ich wurde erstellt und ich muss eine wieder speichern Okay, wählen Sie jetzt den Container erneut aus. Lassen Sie uns eigentlich das Loop-Casel auswählen und hier wird unsere Vorlage automatisch hinzugefügt Und machen wir uns vorerst keine Gedanken über die Anzahl der Folien. Und gehen wir zur Abfrage in der Abfrage über. Ich lege die Quelle als Kundenrezensionen fest und lasse uns die Standarddaten überprüfen . Dann müssen wir auf Vorlage bearbeiten klicken Jetzt klicke ich auf dieses Plus und dann auf das Plex-Feld und dann diese Richtungsspalte und gehe zu Advance und entferne den Rand und die Polsterung Jetzt müssen wir als ersten Schritt das Bild und den Namen hinzufügen, um das zu tun. Ich formuliere, füge das Element und das Suchbild und füge das Bild einfach so Hier klicke ich auf das dynamische Tag und dann auf das ACF-Bildfeld Ich stelle den Schlüssel als Kundenrezension so ein, das Bild wird hinzugefügt und die Bildauflösung ist voll Und um das Ergebnis anzuzeigen, kann ich auf Loop-Elementsatz und dann auf Abfrage klicken Nein, bei der Einstellung für die Überprüfung bei Query setze ich die Einstellung für die Quellvorschau, das vorschauspezifische Beitragselement Kundenrezension ein und klicke auf Anwenden und Vorschau. Lassen Sie uns nun die restlichen Details hinzufügen und dann das Design erstellen. Jetzt muss ich den Namen hinzufügen, ich werde die Überschrift hinzufügen und von hier aus werde ich den Titel des Beitrags sagen, da ich mich daran erinnere, dass der Beitragstitel der Name ist , damit wir auf Bearbeiten klicken und ihn sehen können. Okay, hier ist der Titel des Beitrags der Name des Rezensenten. Okay. Jetzt ändere ich die Farbe und lasse uns die Schrift regulär 25 sehen, was hier bedeutet, dass sie subding sein sollte. Ja, es ist also zu spät mit dem Subbed und jetzt werde ich diesen Text duplizieren und lassen Sie uns hier den Posentyp auswählen, den Posentyp auswählen, den Posentitel entfernen und auf dynamisches Tag und ACF-Feld klicken, darauf klicken Der Schlüssel wird die Überprüfung sein. Ja, die Bewertung wurde gerade hinzugefügt und ihre Größe sollte der Absatzgröße entsprechen. Lassen Sie uns das hier eingeben, legen wir es als Absatz fest und fügen wir als Container die Größe dazwischen hinzu, die einladende Größe. Die Größe für Einladungen ist zwei, also gehe ich zum Layout und die Zeilengröße wird eingestellt, jetzt haben wir ein Problem Derzeit haben wir die Icons, all diese Icons sind fünf, aber wenn jemand vier Sterne Rev. hinzufügt, haben wir einen Platz dafür, wir müssen es anpassen, denn wenn wir hier nur vier Sterne oder fünf Sterne hinzufügen, können wir es nicht anpassen Versuchen wir es in der nächsten Lektion. 123. Abschnitt zur Entwurfsbewertung - Teil 03: Erstens, sieh dir das an. Wir haben ein Bewertungs-IA-Widget, wenn wir es hier hinzufügen und hier können wir die Bewertungsskala auf fünf setzen und bei der Bewertung können wir dynamisches T hinzufügen, was bedeutet, dass wir erweiterte benutzerdefinierte Felder erstellen müssen , in denen wir Bewertungspunkte als Zahl hinzufügen können Bewertungspunkte als Zahl hinzufügen Lass uns das machen. Wenn wir zuvor nach Bewertungen suchen, können wir auch dieses Bewertungsfeld sehen und einzelne Bewertungen zu diesem Bewertungsfeld hinzufügen einzelne Bewertungen zu diesem Bewertungsfeld und das Design anpassen. Lassen Sie uns in diesem Fall mit dem Loop-Karsel fortfahren und schauen, was wir tun können Jetzt gehe ich zu Erweitertes benutzerdefiniertes Feld und Feldgruppe. In der Feldgruppe müssen wir das Feld Kundenbewertung auswählen. Lass es uns bearbeiten. Dann müssen wir hier ein neues Feld hinzufügen. Dieser Feldtyp wird Zahl sein. Fügen wir die Feldbezeichnung hinzu, da die Bewertung so aussieht. Jetzt klicke ich auf Änderungen speichern und wenn wir jetzt zu Kundenrezension und Titelüberprüfung gehen, können wir neue Bewertungsfelder sehen, also werde ich fünf Felder erstellen und sie speichern. Okay, machen wir das für den Rest. Eigentlich müssen wir sie hier nicht manuell hinzufügen, da wir sie bereits erstellen. Wir können diesem Feld einen Standardwert hinzufügen. Gehen wir zum erweiterten benutzerdefinierten Feld und zur Feldgruppe in der Feldgruppe und bearbeiten Sie das Cien-Review-Feld Und hier müssen wir diese Bewertung hier als Standardwert bearbeiten diese Bewertung hier als , ich gebe fünf Nein, wir müssen kein neues Feld hinzufügen. Also fügen wir hier fünf als Standardwert hinzu und klicken auf Änderungen speichern. Und jetzt gehen wir zu den Kundenrezensionen. Und wenn wir zu dieser Bewertung gehen, müssen wir das Bewertungsergebnis als fünf ansehen. Wir haben einfach ein leeres Feld hinzugefügt weil ich denke, als wir das Feld entfernt haben, es nicht entfernt, also gehen wir zurück und hier gelöscht. Wir müssen es nicht einfach löschen und dann auf Änderungen speichern klicken. Okay. Jetzt in den Bewertungen und lass uns zu MI gehen und der Standardwert ist fünf. Okay, so weit so gut. Und jetzt müssen wir das Design hinzufügen. Gehen wir zu unserem elementaren Artikel, und hier haben wir diese Bewertungen, gehen wir zur Bewertung und zu Tin Advance Custom Ähm, lass uns die Anzeige hinzufügen. Eigentlich müssen wir das wiederholen. Okay, wir haben schon gespeichert und das ist gut so. Wenn wir also at als zwei hinzufügen, wird dies als zwei angezeigt, aber in diesem Fall können wir das dynamische Tag festlegen, auf das erweiterte Feld für dynamisches Tag klicken und dann auf das Advancnumber-Rad klicken, erweiterte Feld für dynamisches Tag klicken und dann auf das wir überprüft haben Ordnung, soweit so gut und jetzt kann ich es veröffentlichen und wenn wir wollen, können wir es im Design sehen. Okay. 124. Abschnitt zur Entwurfsbewertung - Teil 04: Okay, lassen Sie uns die Vorlage bearbeiten und das Design verbessern. Ich klicke auf Vorlage bearbeiten und los geht's. Mal sehen, zuerst müssen wir dieses Bild auf der linken Seite und den Namen auf der rechten Seite erstellen dieses Bild auf der linken Seite und den , und das Bild, das ich sehe, ist 64 mal 64. Da wir den abgerundeten Eckradius hinzufügen müssen. Lass es uns machen, zuerst wähle ich das Bild aus. Ein Stil, lassen Sie uns die Ausrichtung zentrieren und dann die Peakzelle auf 64 ändern und der Radius ist 30, 30 ist nicht gut, aber ungefähr 60, 60 funktionieren perfekt. Sieht gut aus, dann muss ich einen neuen Container erstellen, lassen Sie uns einen Container wie diesen erstellen und weitermachen, nicht hier. Wählen Sie den Container aus, den wir gerade erstellt haben, und entfernen Sie im Voraus den Rand und die Polsterung und fügen Sie das Bild innerhalb des Container-Namens innerhalb des Containers Wählen Sie dann den Container aus und ändern Sie im Layout die Richtung in eine Zeile wie diese, richten Sie ihn dann mittig aus. Hier haben wir ein kleines Problem Wenn wir überprüfen, ob das Bild nicht perfekt ausgerichtet ist, können wir vielleicht dieses mittelgroße Bild einstellen , weil wir bei Advance den oberen Rand minus und nicht den oberen Rand hinzufügen können . Lassen Sie uns den oberen Rand minus hinzufügen. Ja, jetzt ist es perfekt und ich klicke auf den zweiten Container, und hier müssen wir die Spaltenlücke hinzufügen Wenn wir hier nachschauen und die Spalte sehen, ist sie zu gut, machen wir sie auch. Und jetzt müssen wir uns um diese EAs kümmern. Kopieren Sie die Farbe der Sterne und klicken Sie auf den Stil R One. Lass uns diese Farbe so ändern. Und was ist mit der Größe? Die Sterngröße beträgt 23 mal 23 und der Raum ist sechs. Lassen Sie uns den Abstand auf sechs festlegen und die Größe beträgt 23 mal 23. Okay. Also, was müssen wir bearbeiten? Okay, so weit, so gut alles wird perfekt aufeinander abgestimmt sein, und dazwischen Größe 12. Ich glaube, das füge ich schon dazwischen hinzu. Wenn nicht, ja, wir haben es bereits hinzugefügt. Okay. Jetzt müssen wir den Hintergrundeffekt hinzufügen, so wie wir es hier gemacht haben. Wir haben bereits den CSS-Code und die CSS-Klasse erstellt . Lass es uns hinzufügen. Bevor wir es hinzufügen, fügen wir die Polsterungen rund um dieses Feld hinzu. Sehen wir uns die Muster hier an. Es sind zwei und hier, nun ja, und diese Box hat eine Größe von 300. Lassen Sie uns diese Angaben machen, den Container aufstellen und im Voraus gibt es ein PaddinaSTL Dann wird die Breite 300 sein. Nein, die Höhe wird 300 sein. Lass es uns schaffen. Okay, was ist mit dem Eckradius? Sehen wir uns an, der Eckenradius ist 20, also stilistisch der Randradius 20. Okay, ich finde alles gut, also klicken Sie auf Veröffentlichen oder klicken Sie auf Sieben-Badge. Und jetzt müssen wir nur noch diese CSS-Klasse hinzufügen. Versuchen wir also, diese Klasse zu finden, usw. Hier müssen wir das Loop-Carel auswählen. In Loop-Carsel haben wir im Voraus die CSS-Klasse, also kopieren wir die Klasse und wählen diese Schleife CaruSelo Advance aus. Fügen wir das CSS plus hier hinzu und sehen, wie es gerade Was wir jetzt tun müssen, ist die einladende Größe zu finden. Die einladende Größe ist 20, hier müssen wir zu Stil gehen. Der Abstand zwischen den Stilen sollte 20 sein Okay. Jetzt werde ich es veröffentlichen und es ist so weit, so gut und wir fügen es einfach hinzu. Wenn wir jedoch das Design überprüfen, können wir in der dritten Bewertung sehen, dass wir nur die Hälfte dieser Bewertung sehen. Lassen Sie uns dazu diesen Effekt erzeugen, hier müssen wir zum Inhalt gehen. Beim Inhalt im Layout müssen wir zuerst die Anzahl der Folien herausfinden. Sehen wir uns also an, dass wir derzeit nur fünf Folien haben. Machen wir also fünf daraus, und auf der ausgestellten Folie werden zwei angezeigt. Jetzt werden Sie also nur zwei sehen, aber machen Sie sich keine Sorgen. Ich werde zeigen, wie das Problem behoben werden kann, und Slide on Iroll wird eine davon sein Wenn wir dann zum Set gehen, haben wir hier die Offset-Folie Ich werde die Offset-Folie wie links hinzufügen. Wenn ich es als links hinzufüge, sehen wir nur die Folie von hier. Eigentlich sollte es so richtig sein. Was ist nun, wenn wir diese Offset-Breite erhöhen? Wenn wir die Offset-Breite hinzufügen, sieht sie einfach so aus, aber wir brauchen sie, um mehr anzuzeigen. Dazu können wir einfach den Offset mit 200 hinzufügen. Nehmen wir an, dass 200 die Größe sein wird. Es sollte ein bisschen größer sein. Machen wir es auf 20 bis 30 bis 52 50 wird die bisher beste Größe sein, so gut. Und jetzt zur Navigation, ich muss die Pfeile nicht einblenden, also verstecke die Pfeile. Bei der Paginierung möchte ich den Punkt als Seitennummerierung sehen. Lassen Sie uns diesen Punkten Stil verleihen. Lassen Sie uns bei der Seitennummerierung stilvoll vorgehen. Die Punkte dazwischen werden 220 sein und die Punktseiten werden 20 sein Der Abstand zwischen den Punkten beträgt 20, die Größe beträgt 20 und die Farbe entspricht dieser Grundfarbe. Jetzt sollte der Abstand sein, ich glaube, es ist 30, es ist 20. Lass uns 20 draus machen. Und jetzt haben wir ein Problem, wir haben hier eine Menge Punkte drüber. Lassen Sie uns die Farbe als blaue Farbe festlegen. Okay. Um diese Punktezahl zu reduzieren, müssen wir nun die Folie auf Scroll ändern. Machen wir zwei draus. Dann sind zwei perfekt. Jetzt werden also zwei Folien auf diese Weise geändert. Okay, jetzt klicke ich auf Veröffentlichen und hier haben wir einen Bewertungsbereich wie 125. Fußzeileabschnitt entwerfen: Hallo, alle zusammen. Jetzt müssen wir diese Fußzeile entwerfen Also lass uns das machen. Zuerst gehe ich zu unserer Elemento-Vorlage und wir brauchen diesen Abschnitt nicht, also löschen wir ihn und klicken auf Veröffentlichen, dann müssen wir die Fußzeilenvorlage erstellen, also gehe ich zu WP-Admin, und bei WP-Admin und bei WP-Admin gehe ich zu Vorlagen und speichere Und wenn wir auf Veröffentlichen klicken, können wir die Vorlage sehen, und wir haben die Hauptvorlage bereits erstellt, aber wir haben keinen Inhalt hinzugefügt Das Erstellen des Puta-Abschnitts ist jedoch sehr einfach. Klicken Sie einfach auf Neue Vorlage hinzufügen und hier können Sie den Vorlagentyp auswählen Isolieren Sie hier in diesem Fall den Fuß, fügen Sie den Namen hinzu und klicken Sie dann auf Vorlage erstellen. Das habe ich schon gemacht und hier werde ich auf Mit Element bearbeiten klicken. Ich denke, das wirst du auch schon gemacht haben. Und hier denk nicht an die beiden, lass uns anfangen zu entwerfen. Ich werde den Container schließen , den ich bereits erstellt habe, dann klicke ich auf Weiter und dann hier und klicke auf Richtung Spaltentyp Container. Lass uns hierher gehen. Dann klicken Sie hier , um herauszufinden, ob die Höhe 42, vier ist. Fügen wir die Mindesthöhe als 42 hinzu, tut uns leid, 42, vier. Okay, und wir müssen zuerst diesen Abschnitt erstellen. Um diesen Abschnitt zu erstellen, können wir einen neuen Container erstellen. Lassen Sie uns diese Richtung als roh festlegen und dann auf Plus Sekunde klicken und einen Container wie diesen hinzufügen. Und in diesem Container entfernen Sie im Voraus alle Abstände und den Rand. Okay. Zuerst müssen wir dieses Logo hinzufügen, das Logo auswählen und auf Exportieren klicken und auf Logo exportieren klicken, hier suchen und das Bild so hinzufügen, hier klicken und das Bild so hinzufügen, hier klicken und einfach das Logo ziehen und löschen, das wir gerade erstellt haben und klicken Sie auf Auswählen und hier auf Link, klicken Sie hier und klicken Sie auf benutzerdefinierte URL, und hier müssen wir den Homepage-Titel hinzufügen. Hier können wir einfach die dynamischen Tags auswählen und auf die URL der Website klicken, sodass es sich um die Homepage-URL handelt und wir diese Farbe in dieser schwarzen Farbe angeben müssen. Ich kopiere den Farbcode von Figma Design und klicke im Hauptcontainer auf Estyle, klicke auf Hintergrundtyp und füge die Farbe wie folgt So weit so gut. Stellen Sie dann im Bildstil die Ausrichtung auf links ein und jetzt müssen wir diesen Text hinzufügen, also kopiere ich einfach den Text plus zweite Überschrift in der Überschrift hier, füge ihn hier ein und der Text Größe Absatz und Ausrichtung links, dann ist die Farbe weiß. Wir müssen uns keine Gedanken über die Breite dieses Inhalts machen , weil wir ihn korrigieren können , nachdem wir das Design fertiggestellt haben, und dann, was wir zu diesen Social-Media-Links hinzufügen müssen. Warum suchen wir hier nach einem sozialen Symbol und hier haben wir ein soziales Symbol. Ich ziehe sie einfach so und hier können wir die Symbole hinzufügen. Mal sehen, welche Art von Symbol wir haben. Wir haben Facebook, Twitter oder X auf Instagram verlinkt. Fügen wir das System Twitter hinzu . Dies ist das Symbol, das Sie möchten. Facebook, Twitter, verlinkt, das sollte verlinkt sein und hier müssen wir vorerst die Link-URL hinzufügen, ich werde keine URL hinzufügen, dann auf Artikel hinzufügen klicken und den nächsten Artikel hinzufügen, nämlich Instagram. Klicken Sie hier, suchen Sie im Stern, hier haben wir das Instagram-Symbol. Jetzt sollte die Ausrichtung überlappend sein und die Form sollte abgerundet sein . Bei einem Stil sollte die offizielle Farbe auf Benutzerdefiniert geändert werden. Primärfarbe wählen wir diese Füllfarbe, da diese blaue Farbe wie diese ist und die Sekundärfarbe weiß wie diese ist. So weit so gut. Lassen Sie uns die Größe dieses Symbols herausfinden. Ist 56 mal 56. Nehmen wir diese Größe als 56 56 ist zu viel, weil wir den Raum hinzufügen , verringern wir die Größe und machen wir es so, dass 28, 28 schlechter sein wird. Und Polsterung, die Polsterung sollte klein sein. Sehen wir uns also den Abstand zwischen diesen Symbolen an. Schauen wir uns ein grobes Symbol an. Lassen Sie uns grob schätzen, dass es sechs sein sollten. Lass uns sechs bis sechs Pixel und sechs daraus machen. Okay, jetzt können wir das so auf 56 ändern. Okay? Und der Abstand ist zwei, lassen Sie uns dafür sorgen, dass es keine Polsterung hat, ist sechs. Der Abstand ist so Sehen wir uns nun den Eckenradius an, klicken Sie hier und der Eckenradius ist neun und gehen wir hier hin, dann beim Randradius, nicht beim Eckenradius als Okay. Und auf IconHo wird die Primärfarbe primär sein, Sekundärfarbe wird sekundär sein, es wird so sein und jetzt müssen wir die Zwischengröße hinzufügen Wenn wir die Größe dazwischen überprüfen, ist es 20, und fügen Sie den Zeilenabstand zu den Containern Geben Sie für den Abstand zwischen dem Container auf der Layoutreihe einen Wert von 20 ein. Dieser Abschnitt ist in Ordnung. Jetzt haben wir diesen Abschnitt mit Quicklinks. Lass uns kreieren. Kann diesen Container einfach so duplizieren, rechten Maustaste klicken und duplizieren. Hier müssen wir nun den Linktext auswählen und hier dieses Bild entfernen und hier das Linktext auswählen und hier dieses Bild entfernen und hier zu einem schwachen Link ändern und den Typ von Gravital D so ändern und dann müssen wir das so im Menü hinzufügen, das ist einfach Ich werde auch diesen Abschnitt und das Suchmenü hier entfernen. Holen wir uns dieses Wordpress-Menü setzen es so ein und wählen das Menü aus. Lassen Sie uns zunächst das Hauptmenü auswählen, da das Menü und das Layout vertikal ausgerichtet werden. Ich glaube, es ist der Anfang. Es ist und hier müssen wir das Design ändern. Bevor wir also etwas tun, lassen Sie uns das Design ändern. Typografie besteht also aus Schaltflächen und die Textfarbe wird diese weiße Farbe haben, also auch zwischen den Größen Machen wir einen Zeiger Nein, nein, wir brauchen keinen Zeiger, also gehen wir zum Inhalt und zur vertikalen Ausrichtung Der Zeiger ist keine Animation, keine Su-Indikatoren. Wir brauchen ihn nicht. Und der mobile Breakpoint wird keiner sein, weil wir diesem Putter-Menü weder das mobile Dropdown noch das Hamburger-Menü hinzufügen müssen hinzufügen diesem Putter-Menü weder das mobile Dropdown noch das Hamburger-Menü Und jetzt gehen wir zu Estyle in eTyleOh, machen wir die Textfarbe auf primär und wenn aktiv, stellen wir die Textfarbe auf primär und algod, jetzt müssen wir Hier haben wir ein Testtool, was ist, wenn wir dieses S hinzufügen? Es hat gut funktioniert. Alles gut. Was ist mit der Zwischengröße Die Zwischengröße ist 30. Machen wir die Zwischengröße auf 30. Hier, nein, nicht hier auf dem Container, dazwischen sollte die Zeilenseite 30 sein. Okay, lassen Sie uns diesen Container duplizieren und das dritte Menü erstellen, bevor wir das tun. Wir haben ein Problem, also ist dieses Menü nicht auf der linken Seite, also machen wir es links Fügen Sie die horizontale Padina Null und es wird so perfekt sein Okay. Nun, was wir hier tun müssen, wir müssen die Kontaktinformationen hinzufügen, die Kontaktinformationen kopieren. Ändern Sie den Titel so, dann müssen wir diese Informationen hinzufügen. Ich werde dieses Menü entfernen und hier eine Überschrift in diesen neu erstellten Container einfügen und bei diesem Stil die Typografie auf Absatz ändern und die Textfarbe wird weiß sein Ist es ein Absatz? Ja, es ist ein Absatz. Ja, ich zitiere. Kopiere das Telefon. Inhalt nur ein Telefon wie dieses, dann füge die PR so hinzu und lass uns das duplizieren und hier haben wir die E-Mail, kopiere die E-Mail und füge sie so ein. Dann haben wir die Adresse, kopieren die Adresse und duplizieren diese mit der Adresse und der BR, um die Zeile zu unterbrechen. Dann haben wir Stunden, um das zu duplizieren. Dann sind wir im Bo. Jetzt müssen wir die innere Größe finden. Die innere Größe ist zwei. Dazwischen liegen jedoch die Kontaktinformationen und der Text 30. Der Hauptcontainer dazwischen oder die Größe sollte 30 sein und ich werde hier klicken, um einen neuen Container zu diesem Container hinzuzufügen. Entferne das Sorry, ich werde hier klicken und den Rand und die Abstände entfernen, dann werde ich den Inhalt in diesen Container legen, den Inhalt auswählen und ihn wie folgt in diesen Container legen ihn wie folgt in diesen Container Ich denke, das sollte die oberste E-Mail sein, gut und wähle aus, dass die Container- und Zeilenlayoutzeile toll sein sollte Und hier haben wir ein weiteres Problem, also brauchen wir dieses obere Polster nicht. Was ist, wenn wir das entfernen Wenn wir das entfernen, ist es behoben, aber wir brauchen die Polsterung, wir können den Abstand zwischen den beiden so hinzufügen. Es sind zwei Ja, es sind zwei. In Ordnung, so weit, so gut und jetzt haben wir den Inhalt, und jetzt müssen wir auf die Hauptfußzeile klicken und hier haben wir oben Platz als 30. Lass uns die 30 machen. Lecken Sie die Polsterung und machen Sie oben 30, 140, und links sollten 140 sein, so wie hier Jetzt beim Layout müssen wir den Abstand gleichmäßig hinzufügen oder der Abstand dazwischen sollte der richtige Weg sein Auch hier gilt Wenn wir das überprüfen, haben wir 88 als Zwischengröße. Fügen wir 88 als Zwischengröße hinzu. Hier sollte die Spaltengröße 88 wie folgt sein. Jetzt wird es so aussehen und es ist ziemlich gut, dass wir hier ein Problem haben. Dieses Bild sollte so sein, dass wir nur auf das Bild und auf den Rand klicken können . Fügen Sie einfach oben einen negativen Rand hinzu, so wie hier. Okay, das wird basieren. Also klicken Sie jetzt auf Veröffentlichen und jetzt haben wir eine perfekte Fußzeile, und dann müssen wir diesen Copyright-Teil erstellen Wenn wir das nun im Design überprüfen , öffnen wir dieses neue Fenster und scrollen nach unten. Die Fußzeile wird so aussehen und hier müssen wir Abstände hinzufügen, damit wir einfach hier klicken können und auf Weiter und dann auf Rand, Rand oben 20 hinzufügen Veröffentlichen Sie es und lassen Sie uns das Design sehen. Jetzt müssen wir den Bildnachweis hinzufügen, also lassen Sie uns die nächste Lektion bearbeiten. 126. Copyright-Abschnitt für Designfußzeile: Lassen Sie uns nun diesen Copyright-Bereich erstellen. Lass uns anfangen. Zuerst gehe ich zur Fußzeile und lass uns einen neuen Container erstellen, und in diesem Container müssen wir die Farbe ändern Die Farbe ist die Farbe, die wir im obigen Abschnitt haben , sodass wir leicht das, was wir an Farbe stylen, die Farbe unter Verwendung unserer globalen Farben Und hier wollen wir die Größe herausfinden, die Höhe ist 64. Eigentlich bestimmen wir die Höhe anhand dieses Textes, und lassen Sie uns vorerst diesen weißen Rand hinzufügen. Lassen Sie uns die Grenzdetails herausfinden. Der Strich ist ein Pixel, also gehen wir hier hin und wir können ganz einfach HR durchsuchen Wir haben einen Teiler, also setzen Sie es einfach so und ein Typ, die Farbe sollte weiß sein und der Abstand sollte Null sein Okay. Wir fügen einfach den Teiler hinzu und jetzt müssen wir diesen hinzufügen das T kopieren und zu Main Butter gehen und hier klicken, um die Überschrift hinzuzufügen, fügen Sie eine Überschrift wie diese Hat. Fügen wir die Überschrift, den Text hier und den Drag-Drop in diesen Container wie folgt ein. Okay. Und was den Stil angeht, ändere es in Ich denke, die Größe ist Buttongröße und zweitrangig. Lass uns sehen. Lass uns sehen. Ja, die Größe entspricht der Knopfgröße. Ja, es sollte mittelgroß sein, oder? Ja, mittel 20, mittel. Okay. Gut. Jetzt müssen wir etwas Abstand hinzufügen. Der Abstand beträgt 20 mal 20, oder? Ja, es ist 20 mal 20. Also, was die Überschrift angeht, gehe zu „Weiter im Voraus “, die obere Polsterung sollte so sein und die untere Polsterung sollte 20 sein Okay. Dann müssen wir den Text hinzufügen. Also hier müssen wir den Strom hier hinzufügen. Um es hinzuzufügen, können wir einfach hierher gehen und auf dem dynamischen Tag können wir das aktuelle Datum abrufen. Sehen wir uns das aktuelle Datum hier an. Wir haben das aktuelle Datum und die Uhrzeit, wählen Sie es aus und das Datumsformat wird angezeigt. Lassen Sie uns das Datumsformat sehen. Datumsformat ist okay, aber wir benötigen nur das Datum. Wir brauchen nicht, wir brauchen nur das Hier. Mal sehen, wir haben uns darauf eingestellt , nur auf Benutzerdefiniert zuzugreifen. Bei Benutzerdefiniert können wir einfach dieses Y hinzufügen und den Rest der Details wie folgt entfernen. Okay. Nun, im Voraus, wir können diesen Copyright-Teil hinzufügen. Fügen Sie erst das Copyright hinzu, danach wird der Rest des Nachher der Rest der Details wie folgt sein. Okay. Wir sollten ein Leerzeichen haben. Okay, gut. Und jetzt veröffentlicht Glicon Publish, um das Design zu veröffentlichen, und wenn wir es jetzt im echten Design sehen, wird es so aussehen Und hier haben wir ein Problem. Die Symbole sind zu groß, also lassen Sie uns das beheben, klicken Sie hier. Und was die Größe angeht, lassen Sie uns sie etwas klein machen, wie 45 Paddy Four und den Abstand istelo und jetzt sieht es gut aus und klicken Sie auf Wir gestalten einfach den gesamten Homepage-Bereich. Jetzt müssen wir die Animation hinzufügen und dieses Design mobilfreundlich gestalten , und dann müssen wir die nächste Lektion machen. 127. Bewegungseffekt hinzufügen: Okay, jetzt fügen wir unserer Website Bewegungseffekte hinzu. Wir sind also schon bei einem Bewegungseffekt. Wenn ich zum Beispiel auf diese Überschrift klicke und dann zum Bewegungseffekt gehe, können wir sehen, wie die normale Eingangsanimation ausgeblendet wird. Ab dem zweiten Abschnitt werde ich also nichts für einzelne Artikel hinzufügen, sondern für den gesamten Abschnitt. Also klicke ich auf den Abschnitt und gehe im Voraus zum Bewegungseffekt in der Eingangsanimation, lasse ihn einblenden, so wie hier. Dann machen wir den nächsten Abschnitt und den nächsten Abschnitt. also jedes Mal , wenn Sie eine Website entwerfen, Denken Sie also jedes Mal , wenn Sie eine Website entwerfen, immer an den Benutzer. Der Benutzer braucht keine ausgefallenen Sachen. Er muss einen einfachen Weg finden, um eine Lösung für sein Problem zu finden. Also müssen wir uns damit befassen, anstatt viele Animationen hinzuzufügen und unsere Website kompliziert zu machen. also diese Art von einfachem Bewegungseffekt hinzufügen , erzielen wir das beste Ergebnis. Okay, jetzt klicke ich auf Veröffentlichen und für die Fußzeile werde ich keinen Imagine-Typ hinzufügen . Okay, wenn ich jetzt das Design überprüfe, lass uns das Design in einem neuen Tab öffnen und es wird so aussehen Okay. Lassen Sie uns nun im nächsten Video das Problem mit der Reaktionsfähigkeit beheben oder die Website für Mobilgeräte anpassen 128. Problem mit reaktionsfreudig behoben - Teil 01: Okay, lassen Sie uns unsere Website mobilfreundlich gestalten. Bevor wir uns dem Handy und dem Tablet zuwenden, schauen wir uns an, wie unsere Website in der Desktop-Version aussieht. Zu diesem Zweck können wir das Responsive Testing Tool für Websites verwenden. Oder Sie können einfach den Google Mobile Responsiveness Checker verwenden und Sie werden viele Ergebnisse sehen, also werde ich dieses Ergebnis erhalten Und wenn ich hier derzeit unsere Website-URL hinzufüge, wird uns nur die Seite im Betreuermodus angezeigt, und sie ist sowieso als mobilfreundlich bekannt, wir uns keine Gedanken über die Startseite machen müssen Wir müssen die Website jedoch live schalten, um die Reaktionsfähigkeit auf Mobilgeräten zu überprüfen Also lass uns das machen. Gehen Sie hier und hier zur Website, zum Dashboard , klicken Sie auf den Wartungsmodus. Und hier wählen wir den zu deaktivierenden Modus und klicken auf Änderungen speichern. Okay, jetzt klicke ich auf Check. Eigentlich muss ich den Cache leeren. Wir haben immer noch nicht über den Cache in gesprochen, aber wenn Sie diese Art von Cache, Plug-In oder diese Art von sehen , kann ich einfach auf Barsch klicken und hier auf Prüfen klicken Okay, hier wird unsere Website auf dem Desktop in der Größe 1024 aussehen und sie sieht überhaupt nicht gut aus, aber wir können das auf dem Tablet für Sie erledigen Lassen Sie uns die andere Größe herausfinden und klicken Sie auf diese Größe und dann auf die dritte Größe, und hier wird das so aussehen, also gehe ich einfach zu unserem Editor, und hier haben wir die Tablet-Version, und Tablet Fortet zeigt bis zu zehn bis 24 Pixel an, was bedeutet, dass wir die 1024 ignorieren können, aber von hier aus müssen wir über das Design nachdenken. Tatsächlich denke ich, dass dies bei der 12 18 auch für das Tablet gelten wird Mal sehen, und dann müssen wir zu dieser Größe gehen und okay, hier haben wir ein Problem mit diesen Tasten. Also lass es uns reparieren. Gehen Sie zum Design und klicken Sie hier und lassen Sie uns sehen, was das Problem ist. Sehen wir uns zunächst die Container-Einstellung an, klicken auf den Container und der Container wird voll sein. Okay, es gibt nichts zu reparieren. Und hier sehen wir uns das Bild auf dem Bild an, dass wir nichts zu reparieren haben , und sehen wir uns diesen Container an. Okay, hier haben wir 90 als linken Abstand und Rand, also werde ich ihn entfernen Dann gehe ich zum Hauptcontainer und zum Layout. Lass uns einen Abstand dazwischen machen. Hier haben wir jedoch ein Problem, da dieser vertrauenswürdige Experte auf der rechten Seite befindet, um es zu beheben. Was ist, wenn wir die Spalte Gaass 90 60 hinzufügen. Lassen Sie uns diesen GaAs 60 hinzufügen, und wenn wir den Gapass 60 hinzufügen, wird alles in Ordnung sein und hier müssen wir den Inhalt rechtfertigen so beginnen lassen Jetzt ist es behoben und wir veröffentlichen es und klicken auf Heck, um das Design zu überprüfen Hier sagen wir dieses Problem, um es zu beheben Ich gehe zum Design und klicke auf diese Schaltfläche und auf der rechten Seite haben wir Platz Wenn wir die rechte Seite entfernen, können wir durch Verschieben etwas Platz wie diesen gewinnen Und hier machen wir für diese Website zwei, denn auf dem Design haben wir hier die SS 20 und hier haben wir die Größe 20 dazwischen Okay. Nun, wenn wir das Design veröffentlichen und überprüfen, sollte das behoben sein. Wir können das überprüfen. Okay, ich habe es so repariert, und okay, jetzt gehen wir zum nächsten Abschnitt. Hier haben wir einige Probleme mit der Ausrichtung, also können wir nicht viel dagegen tun, aber ich werde die Seite überarbeiten und das Einzige, was wir tun können, ist die gleiche Höhe zu entfernen und sie wird trotzdem dem Text entsprechend angepasst, aber lass uns hier weitermachen, aber das wird kein großes Problem sein Also werde ich auf Karussell klicken und hier werde ich die gleiche Höhe entfernen, und du siehst, wenn wir das machen, sah es nicht ganz gut aus, aber ich werde es veröffentlichen. Und wenn ich jetzt das Design überprüfe, passt es sich nur an den Text an, was bedeutet, dass das Symbol am Text ausgerichtet wird, nur die Servicesbox wird nicht richtig ausgerichtet, aber das ist viel besser als zuvor Gehen wir jetzt zum nächsten Abschnitt und hier sieht es gut aus, und jetzt gehen wir zum nächsten Abschnitt und hier sieht alles gut aus und in der Fußzeile sieht es gut aus, lass uns zur nächsten Größe auf dem Desktop gehen. Derzeit sind wir bei 13 66, gehen wir zu dieser Größe, in dieser Größe sieht gut aus, und hier haben wir das gleiche Problem, das wir bereits hatten, aber es ist viel besser als zuvor Gehen wir jetzt zur nächsten Größe, mal sehen, bis es Earl gut geht. Jetzt wird dieser Teil gut aussehen und jetzt haben wir viel Platz im größeren Fenster, es wird so aussehen, aber ich denke, es ist in Ordnung, weil es auf dem größeren Fenster ist, nicht auf dem kleinen Fenster. Also lass es uns so belassen. Okay. Gehen wir zur Tablet-Version über. Klicken wir im Design auf Tablet Prod Create von hier aus. Hier müssen wir eine Menge Dinge reparieren. Fangen wir eins nach dem anderen an. Zuerst müssen wir den Header reparieren. Klicken Sie auf den Header , um ihn zu bearbeiten, und hier haben wir meiner Meinung nach das Problem mit der Seiteneinstellung. Wenn ich zur Site-Einstellung gehe und auf dem Layout, fügen wir das Standard-Padding hinzu, ich kann das ganze Konzept ändern und beim Inhaltspadding fügen wir tatsächlich das Padding hinzu, aber wir können es von hier aus nicht ändern, also gehen wir zurück und recon-Header, um den Header zu bearbeiten und hier plattieren wir den Container und gehen weiter im Voraus, entfernen Sie das Padding wie folgt. Wenn wir die Polsterung entfernen, wird es so aussehen. Dann fügen wir das rechte Muster als 30, ma 20 und die linken Paddins 20 Okay, ich wähle diesen zweiten Container aus und lass uns die Richtung vertikal festlegen und den Inhalt so begründen, dass der Inhalt beginnen soll und von hier aus unser Logo Wenn ich weitermache, haben wir Margin Top Pass 20. Nein, es sind 20, okay. Wenn wir die Optionen oder Werte von hier aus ändern, gilt das nur für Tablet Potrit. Keine Sorge, es wird nichts passieren Hier haben wir also Margin Top Pass 24. Machen wir es auf Null. Eigentlich haben wir zwei. Hier haben wir also den oberen Rand 24 und den unteren Rand sieben, also werde ich hier klicken und erneut Minusrand hinzufügen. Okay, das behalte ich drin. Hier fügen wir zu Pass 30 hinzu, ändern wir es auf 220 und rechts, klicken Sie einfach hier eine Kette und die rechte ist Null, unten ist ebenfalls Null, links ist Null. Jetzt ist es zentriert und jetzt müssen wir über das Menü im Menü nachdenken. Ich werde diesen Backpunkt auf Handy ändern und wenn wir den Breakpoint auf Handy ändern, können wir das komplette Menü sehen, und dann haben wir dieses Bildfeld. Das Bildfeld hat ein benutzerdefiniertes Feld, ich werde es so voll machen. Okay, so weit, so gut. Lassen Sie uns diese Eingabe nun doppelt so groß machen. Die Ibuttwin-Größe sollte also zu Container und Layout passen Lass uns Profis 20, 22 Wochen, 15 machen. Ja, 15 werden okay sein. Also, wenn wir das Claus 24-Symbol überprüfen, wird es größer sein. Und wegen dieses Symbols wird dieses Menü größer sein. Wenn das Menü also größer ist, wird dieses Hintergrundbild nicht richtig angezeigt, also werde ich dieses Claus 247-Symbol auf dem Tablet ausblenden. Dazu wähle ich das Bildfeld aus und gehe zu Advance. Klicke auf RSF Sis, dann klicke ich auf Hight auf dem Tablet Okay. Und jetzt klicke ich auf Veröffentlichen und lass uns die echte Vorschau sehen, aber wir müssen mehr anpassen. Aber jetzt schauen wir uns die Tablet-Vorschau an. Überprüfe. Die Tablet-Vorschau wird so aussehen, aber hier müssen wir noch mehr bearbeiten. Also als ersten Schritt klicke ich hier und füge Pad Bottom wie folgt als 20 hinzu, dann klicke ich auf Veröffentlichen und dann hier, obere Rand wird 20 sein. Wird das okay sein? Ja, das ist okay. Jetzt klicke ich auf Veröffentlichen, lass es uns noch einmal überprüfen. Jetzt ist es viel besser und ich mag dieses Design. Wenn uns das überhaupt nicht gefällt, können wir einfach diesen ganzen Abschnitt auf dem Tablet ausblenden und einen neuen Abschnitt erstellen. Aber im Moment ist das viel besser und jetzt gehen wir zum Heldenbereich und dem Rest des Designs über. 129. Problem mit reaktionsfreudig behoben - Teil 02: Okay, jetzt müssen wir dieses Homepage-Design erstellen , das für das Tablet geeignet ist. Ich klicke auf Seite bearbeiten und das leitet mich zur Homepage weiter und hier haben wir den Heldenbereich, also schreibe ich Container und klicke auf Container bearbeiten. Und hier müssen wir zuerst zu Advance on Advance wechseln, ich werde den Schreibblock auf 60 ändern , der linke Abstand wird 60 bis 60 ist größer Machen wir 30 30 auf diese Weise und die Unterseite wird 30 sein und oben müssen wir es größer als 150 machen Was ist mit 160? 160 ist zu kurz und das sollte so sein. Es ist 230. Ordnung, sieht gut aus und die Schriftgröße ist okay, ich denke, was ist die Schriftgröße? Die Schriftgröße ist 60, vielleicht können wir sie reduzieren, aber im Moment finde ich, dass sie gut aussieht. Klicken Sie auf Veröffentlichen und wenn wir diese Schriftgröße reduzieren möchten, können wir einfach auf Seiteneinstellungen klicken und hier haben wir globale Schriftarten und klicken Sie auf dieses Bearbeitungssymbol und hier haben wir die Tablet-Version von Ptrit, also kann ich daraus 50 machen 50 werden in Ordnung sein. Machen wir 52 daraus und subdin machen wir 20, 21, Okay, Absatz wird 18 sein und die Schaltfläche wird 21 sein Okay, jetzt klicken Sie auf Const changes. Wir ändern die globale Schriftart so, dass sie für den Rest des Designs oder Designs wie dieses gilt Rest des Designs oder Designs wie Jetzt sind wir wieder hier, sehen gut aus und auf Knopfdruck, wenn wir wollen, können wir die Größe der Schaltfläche etwas kleiner machen, etwa 20, 30, 20, 30, so wie hier Jetzt haben wir den nächsten Abschnitt und die Überschrift ist hier, was wir tun müssen. Zuerst ist es ein großes Durcheinander, zuerst klicken Sie auf Container und dann gehen Sie weiter von der Polsterung und wir fügen die Polsterung als 30 hinzu Ich denke, wir fügen es als 30 hinzu. Mal sehen, die rechte und linke Polsterung sollte 30 sein. Lass uns 30 daraus machen, links ist 30. Jetzt müssen wir diese Position ändern, also klicken Sie hier und weiter hier, wir haben Offset. Lass es uns hier platzieren und es wird so funktionieren und wir müssen dieses Bildfeld korrigieren, das Bildfeld und im Voraus den Offset so machen. Und hier haben wir ein Problem. In der Tablet-Version haben wir keinen Platz für diese beiden Abschnitte, also kann ich auf den Container und auf das Layout klicken, die Richtung zu Zeile ändern und das geht hoch und das wird so runter gehen. Dann füge ich in der Zeile den Gap Pass 20 wie folgt hinzu. Dann hier klicken, alles sieht gut aus, und jetzt muss ich das wieder ändern. Lass es uns auf Offset ändern, das wird so sein. Dann sieht das hier gut aus und die Knöpfe sehen gut aus. Was wir tun müssen, klicken Sie darauf und fahren Sie fort, entfernen Sie die Polsterung, machen die rechte Polsterung auf 30, den linken Paddinus Okay. Hier sehen die Icons gut aus. Wenn wir mehr Platz auf Carsel wollen, können wir das als eine Seite ausstellen Das Design wird so aussehen und das ist viel besser als zuvor, und andere Abstände sind in Ordnung, aber wenn wir wollen, können wir diese Zeile 60 bis 30 oder 2020 ändern und müssen uns keine Gedanken über die Spalte Okay, so weit, so gut. Als nächstes haben wir unsere engagierten Anbieter. Hier haben wir viel Platz, um den Platz zu entfernen, ich kann den Rand einfach auf Null reduzieren. Jetzt sieht es gut aus und klicken Sie hier, dann entfernen Sie die Polsterung hier sind es 30, 30. Das ist ziemlich gut, wir können zwei Anbieter gleichzeitig hinzufügen und es sieht gut aus, also werde ich es so belassen So weit, so gut, was wir hier tun müssen. Hier haben wir wieder ein großes Durcheinander, klicken Sie hier, dann auf Advance entfernen Sie die Abstände und machen Sie das rechte Muster auf 30, linken Abstand auf 30, wie wir es zuvor getan haben, wir können zum Layout gehen und die Richtung zur Spalte ändern und alles wird in Ordnung sein und wenn wir wollen, können wir dieses Bild und den Text unten erstellen Lass uns das machen. Um das zu tun, können wir ganz einfach weitermachen. Wir müssen im Voraus darauf hinweisen, dass wir auf den Container klicken müssen, also klicken Sie auf den Container und im Voraus können wir die Reihenfolge ändern. Machen wir N und es wird so laufen. Aber dort funktioniert es nicht, also lass es uns sagen. Jetzt haben wir hier ein Problem, dieses wird gut funktionieren, aber das untere funktioniert nicht. Ich klicke auf diesen Container und oben am Rand, es ist am Rand oben 70 und hier klicke ich auf diesen und auf Advance Change Offset, um das zu mögen, so weit, so gut. Ordnung. Jetzt haben wir hier nichts zu reparieren. Dann gehen wir zurück und hier haben wir ein großes Durcheinander Klicken Sie hier und bei der vorherigen Änderung sollten die beiden oberen Ränder eins bis 20 sein und der linke Abstand sollte 30 sein Der rechte ist 30 und der linke ist 30. Dann haben wir hier dieses Loop-Karussell und hier können wir einfach diese Seite ändern, wenn es spielt Jetzt sieht es gut aus. Ja, das ist wirklich einfach und ich klicke hier und hier haben wir ein Tempo von 30. Lass es uns so machen. So weit, so gut hier, wir müssen 62 20 ändern. Wenn wir wollen, können wir dieses Zentrum machen, aber das müssen wir jetzt nicht tun, oder wir können uns einfach auf Stretch ausrichten. Wir können Align Self als Stretch einrichten. Und jetzt müssen wir die Fußzeile bearbeiten. Ich finde, die Homepage sieht gut aus. Gehen wir also zur Fußzeile und wieder ist schwaches Durcheinander. Bevor wir loslegen, klicke ich auf Veröffentlichen, um die Änderungen zu veröffentlichen Und wenn wir zur Desktop-Version wechseln, wird sich nichts ändern, weil wir alles in der Handy - oder Tablet-Version ändern. Okay. Gehen Sie jetzt runter und hier, klicken Sie auf Fußzeile, dann klicken Sie auf Speichern und lassen Sie hier, was wir zuerst haben, ich klicke hier auf Erweitert, rechter Abstand ist 30, und der linke Abstand ist so Was wir jetzt tun müssen, ist, dass der Spaltenabstand geringer sein sollte. Lass es uns so 30 machen. Okay. Und zur besseren Verwendung können wir dieses Zentrum so einrichten, dass es nicht zu nahe an den Text auf der linken Seite kommt und hier haben wir ein großes Problem, gehen wir zum Stil und ändern die Größe so. Der Abstand sollte sechs sein, wir eine Sechs und machen den Abstand so. Sieht gut aus Hier wird alles gut aussehen. Wir haben dort nicht viel zu bearbeiten, also klicke ich auf Par Live. Und hier haben wir oben ein Problem, ich muss eine Polsterung hinzufügen Es ist Teil von 20 Recon Publish. Lassen Sie uns das nun anhand des Designs überprüfen. Jetzt wird es so aussehen. Hier haben wir ein Problem und der Rest des Designs wird einwandfrei funktionieren, aber wir haben ein Problem damit. Boxen können wir tatsächlich entfernen. Wenn wir sie entfernen, treten solche Probleme auf dem Tablet und dem Handy nicht auf. beste Weg ist, sie auf dem Handy und dem Tablet zu verstecken und sie nur auf der Desktop-Version zu behalten. Aber wenn Sie möchten, können Sie sie einfach an die A-Website anpassen, aber das ist ein großer Aufwand So können Sie mit Ihrem Kunden sprechen und ihn entfernen. In diesem Fall werde ich sie alle entfernen. Ich meine also nicht, sich zu verstecken. Ich klicke auf Seite bearbeiten , um die Startseite zu bearbeiten. Und hier, sehen wir mal, hier, klicken Sie auf diesen ganzen Container und auf Advance können wir zu Responsive gehen und den mobilen Port ausblenden und auf dem Tablet verstecken Jetzt wird es auf dem Handy und Tablet nicht mehr angezeigt und wir können dasselbe mit Responsive ID tun, nur auf dem Desktop anzeigen Auch hier klicken Sie hier auf Advance ausblenden, hier kann Responsiveness veröffentlicht werden und sieht gut aus Wenn wir es dann auf der Website testen, haben wir dieses Problem nicht mehr Jetzt haben wir nur noch die Artikel , die wir nur sehen wollen. Wir können das vielleicht beheben, wenn wir das Loop-Karussell hinzufügen, aber ich erstelle eine andere Vorlage und füge diese Details hinzu, indem ich Advanced Cust Temple verwende, aber ich weiß nicht, ob es funktionieren wird oder nicht, lassen wir es so 130. Problem mit reaktionsfreudig behoben - Teil 03: Okay, jetzt müssen wir die Reaktionsfähigkeit auf Mobilgeräten übernehmen oder unsere Website mobilfreundlich gestalten Laut Google oder Jamini besuchen also etwa 55 bis 65% etwa 55 bis 65% der Besucher Websites mit Mobiltelefonen Daher ist es sehr wichtig, dass unsere Website auf Mobilgeräte reagiert Fangen wir also an. Zunächst können wir dies wie zuvor über den Header tun. Gehe zum Header und dann zum Header, momentan sieht es so aus. Zuerst und danach klicke ich auf den Container und in den Container, lass uns die Abstände 15 mal 15 machen, links und rechts wird 15 mal 15 sein und hier haben wir ein Problem Wir brauchen dieses Hamburger-Menü auf der rechten Seite. Lass es uns reparieren Ich klicke auf den Container und auf Layout, lass uns die Richtung ändern Okay, lass uns dem Breite hinzufügen. Ich klicke auf diesen Hamburger-Menüpunkt und stelle hier den Schalter links ausrichten und dann wird das Layout sein, was ist dort mit vertikal Nein, das sollte horizontal sein. Und ein Stil, sehen wir uns Umschalttaste auf Umschalttaste an, lassen Sie uns eine Größe festlegen Stellen wir diese Größe auf eine Rahmenbreite von 35 ein, wir benötigen keinen Und lassen Sie uns die Farbe auf diese Primärfarbe ändern. Die Hintergrundfarbe wird Akzentfarbe sein oder wir machen die Hintergrundfarbe Primärfarbe und die Farbe wird wie folgt weiß sein. Dann müssen wir das hier hinstellen. Lassen Sie uns versuchen, das im Voraus zu tun, lassen Sie uns mit zwei in einer Zeile ändern, keine Standardeinstellung, keine volle Breite, nein. Machen wir es wie benutzerdefiniert und fügen wir das benutzerdefinierte hinzu. Wenn wir das benutzerdefinierte mit hinzufügen, wird es perfekt ausgerichtet. Lassen Sie uns Benutzerdefiniert mit einer 50 hinzufügen. Lass uns sehen, was passieren wird. Wenn wir das machen, sieht es einfach so aus. Um es zu reparieren, werde ich hierher gehen. Machen wir es in voller Breite. Wenn wir es in voller Breite platzieren, wird es einfach so und es sieht okay aus. Okay, hier, hier, das ist zu nah, um es für den Container zu reparieren, lassen Sie uns die rechte und linke Polsterung wählen Die Spitze wird 20 sein, es ist okay, 20 oben zu sein, und die rechte Seite wird sechs sein und die linke wird ebenfalls sechs sein Dann wird im Layout der Spaltenabstand 15 sein und der Spaltenabstand wird ebenfalls sechs sein und jetzt klicken Sie hier auf Erweitert, lassen Sie uns das damit ändern. Hier haben wir immer noch das Problem. Das Symbol ist zu groß, daher sollte die OnTital-Schaltfläche klein Die Größe wird ungefähr so sein, und jetzt wollen wir diese Lign-Zentren dazu machen, wir können die unteren 20 entfernen und jetzt ist es Jetzt können wir die Breite dieses Bildes oder die Breite dieses Logos ändern dieses Bildes oder die Breite dieses Logos Lassen Sie uns ein Logo mit 80 machen, es wird funktionieren, und jetzt können wir die Zwischengröße und andere Dinge entfernen und dann mehr Platz gewinnen. Hier sollten sechs sein. Und in der Zeile sollte die Spalte Null oder Sechs sein. T sollte Null sein. Und jetzt hat dieser Button eine größere Breite, also vergrößern wir ihn. Okay. Bei diesem Stil sollte die Größe der Umschaltfläche erhöht werden. So wie das Jetzt ist es ziemlich gut und jetzt müssen wir uns um dieses Drop-down-Menü kümmern. Okay, um das zu tun, müssen wir zum Dropdown gehen und nach unten Lassen Sie uns eine vertikale Polsterung vornehmen, und der Abstand wird Null sein Typografie wird eine Schaltfläche sein. Die Hintergrundfarbe ist diese Farbe, die Textfarbe ist Text und die Textfarbe ist aktiviert, Testfarbe ist diese Auf Ha benötigen wir keine Hintergrundfarbe. Lassen Sie uns die Hintergrundfarbe weiß belassen und wenn sie aktiv ist, wird sie dieselbe sein. Jetzt sieht es gut aus. Okay, jetzt wird unser Menü so aussehen, und wir sind gut, ich werde es veröffentlichen und wir werden es uns im responsiven Design ansehen. Hier ist das Handy und lassen Sie uns den mobilen Breakpoint überprüfen. Eigentlich müssen wir es so drehen und dann gehen wir rauf und klicken auf Check Oh, hier müssen wir das verstecken. Um es zu verstecken, klicke ich darauf und auf Responsive, es sollte im mobilen Port ausgeblendet sein und auf Veröffentlichen klicken und jetzt überprüfe ich und alles wird funktionieren. Eigentlich müssen wir die Unterseite mit einer Polsterung versehen. Fügen wir hier den Container hinzu, das untere Muster sollte 20 sein, dann veröffentlichen wir es und lassen es uns auf dem Handy überprüfen Es sieht so aus. Lassen Sie uns diese Menüliste von hier aus hinzufügen, um das zu tun Wir können einfach hier und ein Dropdownmenü mit einem Stil anklicken Die Entfernung wird so sein und dann auf Veröffentlichen klicken und das Design sehen. Es ist ziemlich gut und vielleicht lassen Sie uns einen Punkt klarstellen und lassen Sie uns das überprüfen. Jetzt sieht es gut aus. Jetzt müssen wir das auf dem anderen Handy überprüfen. Ich werde auf dem Apple iPhone 8 so aussehen. Hier, was ist mit Samsung Galaxy? Es wird so aussehen. Und hier haben wir Apple iPhone X, und es ist ziemlich gut. Jetzt müssen wir den Header ändern , weil der Header-Text überhaupt nicht gut aussieht. Also lass uns hier klicken , um die Homepage zu bearbeiten. Okay, auf der Homepage werde ich zuerst hier klicken und dann auf Ti oder Graffy diese Überschrift Typografie, lass uns hier klicken und zu den globalen Telefonen gehen. Sehen wir uns bei Telefonen weltweit die Kopfzeile, die Größe der Kopftaste oder die Textgröße an. Vielleicht wird 40 funktionieren und das Sub-Din wird 18 sein. Was ist mit 20. 20 werden okay sein. Der Absatz wird 18 sein und die Schaltflächen werden 18 sein. Klicken Sie nun auf Änderungen speichern und klicken wir auf Zurück zum Editor Hier geht's zur Überschrift. In der Überschrift haben wir also viele Probleme, also müssen wir die Typografie auswählen Ich weiß nicht , warum es nicht gut aussieht, aber mal sehen, mal sehen Okay, dann müssen wir zum Container gehen und derzeit haben wir rechts und links als 30, also machen wir es wie 15, 15, die Unterseite sollte auch 15 sein , und diese Schrift sieht nicht gut aus, 40, reduzieren wir die Schrift mit 35, wird 37 38. 36 wird die beste Größe sein. Machen wir 36 daraus und die Textgröße der Schaltfläche sollte ebenfalls reduziert werden. Lassen Sie uns diese Änderungen vornehmen. Zuerst werde ich die aktuelle Einstellung veröffentlichen und hier auf Seiteneinstellung klicken, auf Seiteneinstellung klicken, dann zu Goble Prawns und Header auf Header gehen Das sollte 36 sein und im Sub ding lass uns das für 18 reduzieren und der Absatz ist Nein, nein, f den sollte 20 sein, wenn Absatz 18 ist, ist die Schaltfläche 18. Die Größe der Schaltfläche ist okay. Die Tastengröße ist in Ordnung, klicken Sie jetzt darauf. Speichern Sie Angers und klicken Sie auf Zurück zum Editor und gehen Sie zum Container. Okay. Jetzt müssen wir uns um diesen Knopf kümmern , weil der Knopf nicht gut aussieht, also lasst uns weitermachen. Gehen wir zu Stil und Stil. Wir sollten die Polsterung reduzieren müssen, sodass die obere Polsterung 12 und 50 sein wird Was ist mit 15:15, 50. Uh, keine Spitze wird 20 sein, rechts 15, unten Okay, es wird Bestie sein. Wenn wir den Text mittig ausrichten, sieht er viel klarer aus, aber wenn wir ihn zentriert anordnen, ist er schwer zu lesen Lassen Sie uns sie also so formulieren. Ja, gut hier. Also werde ich es veröffentlichen. Und jetzt gehen wir zum responsiven Design und schauen uns das Design auf dem Telefon an und es ist Apple iPhone X. Okay, es ist nicht schlecht. Drehe es. Okay, es sieht gut aus. Jetzt müssen wir weitermachen. Also hier, dieses Bild ist okay. Und hier haben wir das, lass uns hierher gehen. Und okay, wir verstecken diesen Teil, der zu 100% versorgt ist, auf dem Handy, sodass wir uns darüber keine Gedanken machen müssen. Gehen wir also zum Container und biegen wir bei 15 nach rechts und bei 15 links ab. Okay, hier haben wir ein Problem mit der Schaltfläche, also machen wir diese beiden Buttons so und der Zeilenabstand wird 15 sein. Okay. Und hier ist dieser Knopf oben. Der Grund dafür ist, dass wir mit 20 am oberen Rand liegen, also werde ich ihn auf Null setzen. Jetzt sieht es gut aus. Okay, das sieht okay aus. Dann lass uns hier und hier im Voraus gehen , rechts, 15, links 15. Einfach. Dann hier, diese Teile suchen. Okay. Die Teile sehen okay aus und ich hoffe, das funktioniert, es funktioniert. Wir können diese Lücke verringern. Gehen wir also bei der Paginierung zu Stil. Lassen Sie uns diese Lücke auf 15 setzen. Ja, 15 wird funktionieren. Dann haben wir hier unseren Anbieterbereich, und hier müssen wir etwas obere Marge hinzufügen. Also 12120 werden okay sein, vielleicht können wir 90 daraus machen, aber wir fügen dem Zeug schon 120 hinzu Also lassen wir es bei eins bis 20 bleiben. Okay, wir haben nichts zu bearbeiten. Eigentlich haben wir diesen Link, der nicht gut aussieht. Also ja, lass es uns bearbeiten, bevor wir es bearbeiten. Haben wir das rechte und das linke Fett geändert? Nein, lassen Sie uns das 15 mal 15 machen. Lassen Sie uns nun diese Änderungen veröffentlichen und gehen wir zur Vorlage bearbeiten und wählen hier die Schaltfläche aus. Es wird gerade nicht geladen, aber auf dieser Schaltfläche ist es okay, tut mir leid, lassen Sie uns den Rand auf Null eigentlich haben wir hier den unteren Wert als Zehn. Lassen wir es bei zehn belassen und wir müssen den oberen oberen Wert auf Null ändern, untere Wert wird minus zehn sein. Ich denke, es wird okay sein, jetzt klicken Sie auf Veröffentlichen. Eigentlich können wir auf Speichern und zurück klicken. Und schauen wir uns das Design an. Okay, ich werde mir etwas Zeit nehmen. Okay, ich habe geladen. Und hier ist es zu viel darunter. Möglicherweise müssen wir etwa 50 hinzufügen. Klicken wir also auf Container bearbeiten und hier wird er tatsächlich immer noch geladen. Warten wir also, bis es geladen ist. Okay, lassen Sie uns erneut auf die Vorlage bearbeiten klicken und hier machen wir es auf das Handy und hier klicken Sie auf die Schaltfläche und im Voraus, lassen Sie uns diesen Top-Pass minus -15 machen, das wird funktionieren Veröffentlichen Sie es jetzt und fertig. Gehen wir jetzt zur Seite. Gehen wir wieder zur mobilen Ansicht und hier gut. Okay, lass uns zum nächsten Abschnitt gehen und dieses Bild sieht okay aus. Und hier, was wir tun müssen. Okay, lass uns auf diesen Container klicken und tatsächlich. Lassen Sie uns diese Symbole in der Mitte erstellen, um das zu tun, klicken Sie auf den Container. Option Objekte ausrichten befindet sich bereits in der Mitte, also klicken wir auf dieses Bild und machen es zentriert. Ich bin immer noch nicht in die Mitte gegangen. Aber lassen Sie uns diese Mitte so einrichten, wir können sie leicht zentrieren, aber wir müssen diese Schaltfläche auch mittig ausrichten, aber keine Schaltfläche. Es ist ein Bild, lassen Sie uns das Spalte ändern und es wird mittig sein, dann müssen wir hier etwas Abstand hinzufügen , vielleicht eine Zeile als Zehn. Okay. Jetzt sieht es gut aus und lass uns hier dasselbe tun. Klicken Sie auf den Container und machen Sie ihn so zentriert, klicken Sie hier, machen Sie ihn zentriert und klicken Sie auf das Symbol oder den Link, dann sollte der Link -15 oder 15 sein Und lass es so zentriert ausrichten. Wir können diesen Artikel auch in die Mitte stellen, ja, ja. Auch hier müssen wir die Eins-Richtungs-Spalte so einstellen, dass die Spalte zehn sein wird, sie in die Mitte stellen, sodass die D-Mitte genommen wird, und dieser Button sollte -15 sein Dann lassen wir es hier in der Mitte ausrichten, wir müssen gut bis gut sein. Jetzt haben wir gerade diesen Abschnitt erstellt , haben wir tatsächlich den linken und den rechten entfernt? Nein, hier müssen wir 15 von links und rechts hinzufügen. Ordnung. Jetzt müssen wir das reparieren. Zuerst klicke ich auf den Container und im nächsten Schritt machen wir rechts auf 15 und links auf 15. Dann haben wir hier das Karussell. Also hier haben wir dieses Loop-Karussell. Bei diesem Schleifenkarussell müssen wir der angezeigten Seite eins machen Und beim Offset mit machen wir eine Null draus. Wenn wir es auf Null setzen, sieht es einfach gut aus. Wenn wir wollen, können wir einfach zehn hinzufügen. Fügen wir zehn hinzu, denn wenn wir zehn addieren, werden beide Seiten gleich. Okay, wir haben da nichts zu bearbeiten. Okay, jetzt klicke ich auf C veröffentlichen, und jetzt müssen wir nur noch die Fußzeile bearbeiten Es sieht wirklich schlecht aus, aber wir können es leicht verbessern Also klicken Sie auf cFoter und hier ist der obere Teil in Ordnung und wir haben hier ein Problem damit Lass uns das nach rechts und links auf 15 machen. Hier wird oben 20 sein, links wird 15 sein und auch rechts wird 15 sein. Und hier wird der Container 2020 sein, 20 werden okay sein. Und hier im Menü klicken Sie auf Elemente ausrichten und das Ganze wird wie folgt ausgerichtet. Lassen Sie uns jetzt damit beginnen. Nicht gut. Hier, es sieht okay aus. Dehnen. Wenn wir es dehnen, wird es okay aussehen. Dann müssen wir hier eigentlich, wir müssen hier nichts tun, nur richtig ausrichten und im Copyright-Bereich haben wir eine Menge zu tun und hier werden die Rechte 15 sein. Im Bereich Urheberrecht gibt es eigentlich auch nichts zu tun. Und bei diesem Stil scheint alles in Ordnung zu sein. Ordnung. Klicken Sie nun auf Veröffentlichen und sehen wir uns das Design auf dem iPhone X an. Apple iPhone X, klicken Sie auf Check. Okay, hier ist unser Heldenbereich und hier ist unser Hamburger-Menü, der Heldenbereich, der A-Bereich Wir können diesen Knopf nach links drehen. Wenn wir es also nach links schaffen, wird es viel besser sein. Klicken Sie also hier, um es derzeit in der Hauptfußzeile zu bearbeiten . Jetzt sind wir auf der Startseite Und hier machen wir einen Zeileneintrag links und machen das Gleiche Nein, nein, wir müssen das nach links machen. Wir können das machen. Mal sehen, mal sehen, Position links. Okay. In Ordnung. Jetzt ist es auch links und on-Stil, wir können das linke als o entfernen. Und hier können wir das obere als 2010 und das untere als auch 20 hinzufügen . Es ist jedoch nicht nötig, die Unterseite hinzuzufügen. Okay, jetzt klicken Sie auf Veröffentlichen und lassen Sie uns das Ganze noch einmal im echten Design überprüfen . Okay. Nun, hier ist unser About-Bereich und hier ist unser Kategorienbereich, und unser Anbieter erhält zehn Berührungen, Bewertungen und eine Fußzeile In der Fußzeile können wir diesem HR-Tag etwas Platz hinzufügen. Wenn wir das überprüfen, befindet sich der erste Teil auf der linken Seite, aber von hier aus geht er in die Mitte, aber es ist okay Wenn wir wollen, können wir sie einfach links machen, aber ich werde es so lassen und lassen wir das HR oder den Teiler machen, Top-Pass, vielleicht funktioniert das Klicken Sie hier, um die Fußzeile zu bearbeiten und zu erfahren, was passiert ist. wir in diesem Container zu Weiter auf Advance, unten wird 220 sein Wenn dort etwas passiert ist. In Ordnung, klicken Sie auf „Nett veröffentlichen“. Jetzt können wir es auch überprüfen. Okay, sieht gut aus. Nett. Wir sehen uns in der nächsten Lektion, der die nächste Seite erstellt wird. 131. Design über Seite - Teil 01: Hallo, alle zusammen. Lassen Sie uns nun eine Seite in Wordpress Element of Pro entwerfen. Okay. Hier unser Figma-Design, also gehe ich zum WordPress-Dashboard und jetzt gehen wir zur Seite R von Pages Okay, hier klicken wir auf Neue Seite und der Seitenname wird oben stehen Kopieren wir diese Überschrift als Titel. Und hier fügen wir es ein und klicken auf Bearbeiten mit Element of All Right. Jetzt müssen wir die Website entwerfen, und wenn wir das Element oder die Website überprüfen, haben wir einen ähnlichen Abschnitt wie diesen Heldenbereich. Dieser Homepage-Bereich ähnelt dem Abschnitt Über uns, was bedeutet, dass wir diesen Homepage-Bereich verwenden können , um einen Abschnitt zu erstellen. Ich meine den Heldenbereich auf der Homepage. Also lass uns das machen. Auch dieser Heldenbereich der Über uns-Seite, der Blogseite und Kontaktseite wurde immer wiederholt. Lassen Sie uns dies als Vorlage erstellen, was bedeutet, dass wir es wiederholt auf unseren Earl-Seiten verwenden können. Moment werde ich nur diese Info-Seite veröffentlichen und hier öffne ich das WordPress-Dashboard in einem neuen Fenster Von hier aus gehe ich zur Vorlage und speichere Vorlage hier. Ich gehe zum Abschnitt und im Abschnitt, klicke hier auf Neuen Abschnitt hinzufügen, wählen wir den Vorlagentyp Pass-Abschnitt und fügen wir den Namen hinzu. Ich werde den Namen als Heldenbereich für Unterseiten hinzufügen und auf Vorlage erstellen klicken Ich werde diese Bibliothek einfach entfernen , weil wir sie nicht benötigen Wenn wir uns nun den Bereich „ Über Page Hero“ ansehen und die Haupt-Homepage-Hero-Session ist das ziemlich ähnlich. Wir können diesen Abschnitt einfach von der Homepage kopieren . Lass uns das machen. Auch hier öffne ich die Website in neuen Fenster und klicke hier auf Bearbeiten mit dem Element von und klicke einfach mit der rechten Maustaste und klicke auf Kopieren. Gehen wir zum Vorlagenbereich, Heldenbereich für Unterseitenvorlage und klicken Sie mit der rechten Maustaste und klicken Sie auf Einfügen Und es wird einfach so eingefügt. Jetzt müssen wir unnötiges Zeug entfernen. Zuallererst, wenn wir hierher gehen, nein, nicht hierher, wenn wir zum Figma-Design gehen, können wir die Höhe sehen Die Höhe ist 600, also wählen wir den Container aus und hier hat er 800 Ich mache es einfach auf 600 und dann haben wir hier keinen Button, also lasst uns den Button entfernen, ihn löschen. Jetzt das Hintergrundbild. Hier haben wir dieses Hintergrundbild. Ich werde auf das Hintergrundbild und auf Exportieren klicken, es in JPEG ändern und auf die Schaltfläche Exportieren klicken. Gehen wir jetzt zu tiny png.com und verringern die Größe dieser Dateigröße dieses Titelbildes Jetzt klicke ich auf die JPEG-Schaltfläche, um es hier herunterzuladen . Lass uns hier im Container-Stil gehen Lass uns dieses Bild ändern. Klicken Sie auf das Bild und hier haben wir das Bild und es wurde gerade hochgeladen und hier fügen wir einfach den ALT-Text oder den alten Text hinzu und klicken Sie auf Conselect, es wurde gerade so hinzugefügt und wir müssen nichts tun und klicken Sie jetzt auf Veröffentlichen Jetzt haben wir diese Vorlage und wenn wir auf die A-Seite gehen und auf dieses Ordnersymbol klicken, können wir unsere Vorlage in meinem Vorlagenbereich sehen Derzeit haben wir keine Vorlage für den Hero-Bereich für Unterseiten, also werde ich die Seite neu übergeben. Wenn ich ihn hier erneut einfüge, haben wir den Hero-Bereich Ich kann einfach auf Einfügen und dann auf Anwenden klicken. Einfach so, es wird einfach hinzugefügt. Jetzt müssen wir nur noch den Text ändern. Siehst du, das ist die Macht des Elements oder der Vorlage. Gehen wir zum Pigma-Design und kopieren wir den Titel. Komm her, füge den Titel und die Beschreibung hier ein, kopiere die Beschreibung und füge die Beschreibung so ein. Nett Wenn wir jedoch die Beschreibung überprüfen, hat sie hier einen kleinen Platz wie diesen. Lassen Sie uns das tun, wir können R hier hinzufügen, wir müssen es erhöhen und lassen Sie uns R hier hinzufügen. Dann fügen wir hier R hinzu, dann müssen wir nach diesem Take R hinzufügen. Lass uns hier B wie folgt hinzufügen. Okay, ziemlich gut. Jetzt klicke ich auf C veröffentlichen, um zu speichern. Okay. Gehen wir nun zum nächsten Abschnitt über. Dieser Abschnitt ähnelt auch diesem Abschnitt. Wir können diesen Abschnitt einfach von der Homepage kopieren und hier hinzufügen. Lass uns das machen. Hier unsere Homepage und ich werde einfach auf diesen Abschnitt klicken und mit der rechten Maustaste klicken und auf Kopieren klicken. Dann klicken Sie auf einer Seite hier und klicken Sie auf Einfügen. Klicken Sie mit der rechten Maustaste und klicken Sie auf Einfügen. Okay. Und hier brauchen wir dieses Bildfeld nicht, also wähle ich es aus und lösche es. Das brauchen wir nicht. Wählen Sie es einfach aus. Lösche es. Okay. Jetzt ist es ziemlich gut und wir müssen vielleicht ein paar Dinge ändern, wir überprüfen hier, wir haben keine zwei Knöpfe. Wir haben nur einen Knopf. Lassen Sie uns diese Unterschaltfläche entfernen, und wenn wir die innere Größe überprüfen, die Zwischengröße ist 60, und wir klicken auf den Hauptcontainer und den Spaltenabstand 60, brauchen wir nichts zu tun und kopieren einfach den Text zuerst so, dann kopieren wir den zweiten Text, kopieren ihn einfach hierher, dann kopieren wir diesen Text Ich werde auf diesen Text klicken und auf Condo Bigate klicken und hier werde ich einfach diesen Text hinzufügen und hier müssen wir die Schaltfläche „Termin anfragen“ hinzufügen, fügen wir ihn hier hinzu. Und nachdem wir diese Website komplett gestaltet haben, werden wir Aktionen für diese Schaltflächen erstellen Lassen Sie uns diesen Links vorerst ein Hashtag hinzufügen, und jetzt müssen wir dieses Bild ändern. Was den Bildstil angeht, haben wir nichts. Also werde ich einfach auf dieses Bild klicken und auf Exportieren klicken und der Dateityp ist PEG, dann gehe ich zu Ti PNG, füge das Bild hinzu und gebe die Dateigröße wie folgt an, dann komm ich hierher. Wählen Sie ein Bild auf dem Bild wie dieses, kopieren Sie dann den alten Text so und klicken Sie auf Verbergen und es wurde einfach so hinzugefügt und wir haben nichts zu tun Jetzt müssen wir zum nächsten Abschnitt gehen und das Erstellen des nächsten Abschnitts ist auch ziemlich einfach Auf diese Weise können wir beim Erstellen der Hauptseite einfach den Inhalt von dort kopieren. Also kann ich mit der rechten Maustaste auf diesen Abschnitt „Über uns “ klicken und dann auf Condupl klicken. Jetzt kann ich auf den Container klicken und dann auf diesen Container im Hauptcontainer und ihn so aufstellen Lassen Sie uns jetzt den Text ändern. Lassen Sie uns diesen Text zuerst so ändern, dann kopieren wir diesen Text und hier hinter den Text. Auch hier müssen wir Sumin hinzufügen, also kopiere den TUM-Titel und duplizieren Sie ihn einfach und fügen Sie ihn ein Nun eine Kachel, lassen Sie uns diesen Text in Sued ändern, so wie hier. Dann müssen wir die Unterliste hinzufügen. Klicken wir auf Element und Suchliste hinzufügen. Die Symbolliste funktioniert, füge sie so hinzu. Und hier werde ich die Elemente entfernen und nur das eine Element behalten und dann auf diesen Text klicken , um ihn zu bearbeiten und zu kopieren und dann einzufügen. Klicken Sie jetzt auf dieses Symbol und wir haben diesen Kreis. Klicken Sie auf Einfügen, um es einzufügen, und gehen Sie zu Stil Die Symbolfarbe ist die Primärfarbe und wir sehen uns die Symbolgröße an. Die Größe des Symbols ist 16 mal 16. Machen Sie es nicht 60, 16. Die Lücke sehen Sie den Abstand, vergrößern Sie ihn, drücken Sie und der Abstand ist acht, machen Sie den Abstand acht und beim Text ändern wir die Farbe in diese Typografiefarbe Sehen wir uns an, dass es sich bei diesem Text um Typografie handelt, sodass wir die Textstile Typografie oder Absatz wie diesen beibehalten können die Textstile Typografie oder Absatz Okay. Jetzt muss ich diese Elemente einfach für einige Male duplizieren und den Inhalt hinzufügen. Kopiere einfach den Inhalt, lege den Inhalt hierher und kopiere den Inhalt T hierher, dann kopiere diesen Inhalt und kopiere diesen, gib ihn weiter Lassen Sie uns nun die Größe zwischen hier und hier den Abstand dazwischen ändern. Sehen wir uns den Abstand zwischen und 20 an. Lassen Sie uns einen Abstand zwischen 20 schaffen. Okay. Nett. Jetzt müssen wir diese Copy Paste hinzufügen, die so schmeckt, und wir brauchen die Schaltfläche nicht, löschen Sie die Schaltfläche. Okay, lass uns sehen. Jetzt müssen wir dieses Bild hinzufügen, damit wir das Bild, es als JB EG exportieren und auf die Schaltfläche Export unserer Mission oder Export klicken, auf die Schaltfläche Export unserer Mission oder Export klicken um es zu exportieren Sie dann auf Tiny PNG Fügen Sie dann auf Tiny PNG das PNG wie folgt Klicken Sie dann auf JPEG, um dieses Bild herunterzuladen, und jetzt gehen wir zu Über uns und klicken Sie auf dieses Bild und klicken Sie hier auf Bild auswählen, lassen Sie uns einfach das Bild hinzufügen. COVID, überwinde es so. Klicken Sie nun auf Select Nice. Nun, was wir tun müssen. Jetzt haben wir diese Kategorie mit der Kreditbeschreibung. Also lass uns das machen. Es ist ziemlich einfach, weil wir diesen Abschnitt bereits auf der Startseite haben, aber es gibt einige Änderungen, aber wir benötigen nur dieses Design. Also kopiere ich einfach den ganzen Abschnitt von hier und lass uns auf eine Seite gehen und den Inhalt einfach einfügen, und hier brauchen wir diesen nicht. Lösche es, weil es hier keine Schaltfläche gibt, okay. Jetzt hier, lass uns den Titel kopieren. Ich denke, der Titel ist derselbe. Okay. Okay. Jetzt brauchen wir diese Karussellfunktion nicht Eigentlich können wir das sehr einfach mit einem Raster beheben, nicht mit Spalten Also lass es uns versuchen. Ich klicke auf Element hinzufügen und füge ein solches Raster zur Rastereinstellung Ich stelle auch die Spaltenmasse ein und die Zeile wird zwei sein und die Lücken werden 20 sein, so wie hier. Dann kann ich diese Sterne hinzufügen. Zuerst haben wir das eigentliche Lass uns dieses Raster oben platzieren, also werde ich hier klicken und es so hinzufügen. Dann sehe ich mir das Bildfeld an und füge es so in das Raster ein, ich werde den Rand und die Abstände entfernen und jetzt fügen wir dieses hier hinzu. Dann haben wir wieder diesen, dann diesen und jetzt müssen wir die Anzahl der Rasterzeilen erhöhen Klicken Sie auf Beton, gehen Sie zum Layout und ändern Sie die Zeile in drei Zeilen und fügen Sie sie wie folgt hinzu. Jetzt denke ich, wir fügen Dt I will mother carousel hinzu, klicken Sie hier, klicken Sie auf Condolete und das brauchen wir auch nicht, also werde ich es einfach Okay. Jetzt ist alles perfekt abgestimmt und wir müssen nichts tun. Es sieht einfach so aus und jetzt müssen wir den Inhalt bearbeiten. Klicken Sie auf das Bildfeld und auf einen Stil, um die vertikale Ausrichtung zu ändern. Oben. Und jetzt fügen wir diese zusätzlichen Details hinzu. Zuerst haben wir den Text zur Beschreibung, fügen wir ihn so hinzu und fügen die BR hinzu, ich denke, es sollte funktionieren und eine weitere BR hinzufügen, okay, nett. Und jetzt sollte dieser Text ein wenig größer werden, um das zu tun. Wir können einfach so ein B-Tag hinzufügen. Ich glaube, es funktioniert nicht. B. Es funktioniert nicht, wir werden die Bildbox nicht verwenden können , weil wir diese zusätzliche Zeile haben, also müssen wir sie mit Scribe erstellen oder wir können CSS verwenden, aber das Hinzufügen von CSS ist der einfache Weg Fügen wir das CSS hinzu und schauen wir, was wir tun können. Also werde ich zuerst diesen Text kopieren und diesen Text ersetzen, und wie ich es zuvor getan habe, werde ich zwei BRO-Umbruchlinien wie diese hinzufügen und hier werde ich ein neues Tag namens span hinzufügen. Dies ist ein HTML-Tag und ein Flash-Span, um das Span-Tag zu schließen, und hier werde ich die Unterüberschrift Class Equal Cgory Box hinzufügen die Unterüberschrift Class Equal Cgory Box Okay. Nett. Nun, das ist ein SMLC TML-Klasse, die ich gerade erstellt habe, also kopiere ich sie und klicke auf Veröffentlichen und hier gehe ich zum benutzerdefinierten Webdesign USA oder ich gehe zum Dashboard unserer Website und hier haben wir Aussehen und klicke auf Anpassen Beim Anpassen können wir zusätzliche ESS hinzufügen. Um zusätzliches ESS hinzuzufügen, kann ich das CSS erneut kopieren und hierher kommen, und Punkt hinzufügen, weil es eine Klasse ist und eine Klammer wie diese, dann füge ich die Schriftgröße hinzu, mal sehen Die Schriftgröße ist 20, 20 x. Ich denke, das sollte jetzt funktionieren. Und lass uns auf die Info-Seite gehen das unterdrücken und schauen, ob es funktioniert hat oder nicht Okay, es funktioniert. Dieser Text ist größer als der Fenstertext, um das zu bestätigen Ich werde dieses neue Fenster öffnen und das überprüfen, richtig, gehe zu Inspec und zu diesem Auf Inspec haben wir Span und hier haben wir unsere CSS-Klasse. Wenn ich tatsächlich dieselbe Größe habe, nein, es ist dieselbe Größe, also müssen wir es nicht tun Diese beiden Artikel sagen, dieser sollte 21 sein. Hier muss ich 21 so machen und auf Veröffentlichen klicken. Wenn ich es jetzt von hier aus überprüfe, sollten wir Test 21 sehen, klicken Sie hier und hier haben wir 21 und sehen mit dem Unterschied, nett. Jetzt können wir dasselbe für den Rest dieser Bildbox tun. Klicken Sie hier und fügen Sie diesen Text ein und lassen Sie uns zum eigentlichen Inhalt gehen Um also den tatsächlichen Inhalt zu erhalten, gehe ich zu unserer Inhaltstextdatei und von dort zum Text. 132. Design über Seite - Teil 02: Ich habe die Kategorien mit kleiner und langer Beschreibung. Also zuerst eine haben wir schon erstellt, und dann haben wir Frauengesundheit, kopiere den Text und herem interessant Ich glaube, wir vermissen es. Gehen wir also auf die Startseite. Und auf der Startseite, ja, wir ignorieren die Frau einfach, aber wir können es tun, weil wir mit diesen sechs Gegenständen perfekt in Form kommen können. Ignorieren wir es also. Also lasst uns zu dieser Vorsorgeuntersuchung und Vorsorge übergehen. Und in einer kleinen Beschreibung, ich werde diesen in der Kreditbeschreibung hinzufügen . Hier haben wir die Kreditbeschreibung. Okay, dann haben wir pädiatrische Versorgung. Also zur pädiatrischen Versorgung muss ich diese Beschreibung kopieren und so einfügen, dann den Text kopieren, den Text Eigentlich fügen wir dem ersten Artikel denselben Text hinzu, also müssen wir den ersten Artikel ändern und die ersten Artikeldetails wie folgt ändern , das Tempo ist wie folgt Jetzt haben wir dieses fünfte Symbol. Gehen wir hierher, gehen Sie so, kopieren Sie den Text. Möglicherweise sehen Sie den Teil, den ich kopiere, nicht im Text, weil ich ihn in meinem zweiten Fenster so öffne. Kopieren Sie dann erneut den gesamten Text und gehen Sie zum mentalen Unterwort, wir haben Ihre Beschreibung Okay. Der letzte. Lassen Sie uns das Format von hier kopieren und einfügen. Sie es jetzt so ein, kopieren Sie dieses, fügen Sie es so ein. Okay. Jetzt müssen wir dieses Bild wie die vertikale Ausrichtung nach oben platzieren und wir müssen es für ein Objekt tun, aber wir können einfach mit schreiben und auf Kopieren klicken und WritePaste eingeben und diesen Typ einfügen Oh, es ist kein Kopieren, also lass uns hier klicken und Dann klicken Sie hier und fügen Sie diesen Typ ein. Nichts ist passiert. Lass uns zum Stil übergehen. Ja, es ist passiert, aber es schien nicht. Lass uns hierher gehen und es so machen. Okay, klicken Sie auf Veröffentlichen und lassen Sie uns das im Design überprüfen. Ich werde so aussehen und das bedeutet, dass wir den Bereich „Über uns“ erfolgreich für den Designer erstellt haben. Jetzt müssen wir den Blockbereich entwerfen. 133. Blogseite entwerfen – Teil 01: Hallo zusammen. Jetzt ist es an der Zeit, diese Blogseite auf Elementor zu gestalten Gehen wir also zum Elementor-Dashboard und jetzt bin ich im Bereich Earl Pages Und wenn wir zu Post und Earl Post gehen, haben wir einen Beitrag Fangen wir also an zu entwerfen. Und wieder gehe ich zu den Earl-Seiten, und von hier aus haben wir die Blog-Seite. Lassen Sie uns also vorerst diese Blog-Seite löschen und von vorne beginnen, auf den Papierkorb klicken und aus irgendeinem Grund wird die Website sehr langsam geladen. Vielleicht liegt es an meiner Internetverbindung. Wie auch immer, jetzt gehe ich in den Papierkorb und klicke auf Dauerhaft löschen. Jetzt klicke ich auf diese Anzeige auf eine neue Seite. Dann werde ich einen Titel wie JB Family Clinic Blob hinzufügen. Dann klicke ich auf Veröffentlichen, veröffentliche diese Seite und dann verschiebe ich diesen Teil erneut und gehe zum Dashboard und im Dashboard unter Einstellungen und in den Einstellungen zu Rot Lesungen Hier haben wir einen Ort, an dem wir unsere Homepage-Displays einrichten können. Hier habe ich es als statische Seite eingerichtet und die Homepage ist JB Family Clinic, das ist die Startseite, und für die Beitragsseite wähle ich diesen JB Family Cleaning Hier können wir höchstens Hundeseiten anzeigen lassen, aber ich denke, wir können diese Dinge anpassen , nachdem wir die Seite entworfen haben, aber lassen Sie uns das trotzdem von hier aus einrichten Und hier müssen wir sechs Seiten pro oder sechs Beitrag für Seite anzeigen . Machen Sie also sechs daraus und klicken Sie auf Änderungen speichern. Dann verwenden wir Element of Pro, also haben wir Profi-Funktionen , um diese Blog-Seite einzurichten. Um auf diese zuzugreifen, gehen Sie zu Vorlagen und klicken Sie auf Vorlagen speichern. Was wir tun werden, ist, eine neue Vorlage für unsere Seiten zu erstellen. Ich speichere Wordpress Earl-Daten, Blogbeiträge, Kommentare und andere Dinge als Archive. Also hier werde ich das Archiv sehen und hier werde ich den Namen als Archivvorlage hinzufügen. Lass es uns so machen. Die Vorlage ist falsch. In Ordnung, klicken Sie jetzt auf Vorlage erstellen. Für diese Bibliothek werde ich sie einfach entfernen oder wenn ich zu meinen Vorlagen gehe, finden wir hier unseren Heldenbereich für Unterseiten. Fügen wir es ein und klicken wir auf App Okay, hier haben wir den Heldenbereich, den wir bereits erstellt haben, und hier klicke ich auf diese Überschrift und auf den Titel, ich wähle einfach den Archivtitel wie diesen und die kleine Beschreibung, ich wähle die genaue Beschreibung aus, und wir müssen diese Informationen vielleicht vorerst hinzufügen. Lasst uns diesen veröffentlichen und auf Atcdition klicken und Earl Argives mit einbeziehen Wenn wir gesagt haben, dass Earl gibt, können wir alle Informationen zu Autoren, Datum, Suchergebnissen, Beitragsarchiv und Kategorien und anderen Dingen sehen alle Informationen zu Autoren, Datum, Suchergebnissen, , die in diese Vorlage geladen werden Also, jetzt klicke ich auf Speichern und schließen und es wurde veröffentlicht, und jetzt haben wir schon die Blogpost-Seite eingerichtet. Gehen wir also zu Seiten und sehen uns die Blogpost-Seite an. Wir werden die aktuelle Vorschau sehen, Wir werden die aktuelle Vorschau sehen wenn wir die Beitragsseite aufrufen. Derzeit wird also nichts angezeigt. Also lass uns das reparieren. 134. Blogseite entwerfen – Teil 02: Ich probiere einfach verschiedene Dinge aus, um das Problem zu beheben, aber damit habe ich immer noch kein Glück. Also lass uns eine andere Methode ausprobieren. Lassen Sie uns vorerst die Archivseite erstellen und wenn wir die Archivseite haben, soll sie Autor oder Kategorie oder anderes Zeug laden , wenn jemand danach fragt Hier fügen wir den Archivtitel hinzu, und jetzt müssen wir diesen Teil des Arch-Beitrags hinzufügen Ich klicke hier, klicke auf Cplexbx und klicke auf die Richtungsspalte, und hier drücke ich auf Element hinzufügen und ziehe einfach den Chi-Post-Abschnitt, und hier müssen wir den linken und rechten Strich 41 40 hinzufügen und links wird auch 140 sein, und der obere Teil sollte etwa 60 sein Lassen Sie uns das oberste Feld von hier aus herausfinden. Es ist 12. Ja, es sind nicht 60, es sind 1220. Okay, jetzt passen wir dieses Design an. Und momentan werde ich vorerst die gleiche Einstellung beibehalten, dann zum E-Stil wechseln und von hier aus sehen wir, dass der Spaltenabstand 220 bis 20 beträgt und der Rohabstand ebenfalls 220 beträgt und die Ausrichtung, lassen Sie uns die Ausrichtung links auf dem Bild vornehmen, den Randradius, sehen wir uns den Randradius an, der Randradius ist gemischt, aber wir müssen ihn überprüfen, er ist 20. Fügen wir den Körperradius als 20 hinzu, eigentlich brauchen wir nur die oberen 20, nicht links, oben und rechts, da die 20 und der Abstand okay ist, dann gehen wir zum Inhalt und zum Inhalt, lassen Sie uns sehen, dass die Textfarbe Standardfarben ist. Machen wir daraus eine Textfarbe, und die Typografie wird untergeordnet Ist es nicht? Schauen wir uns das Figma-Design Ja, aus irgendeinem Grund sollte diese Figma-Datei geändert Ich weiß nicht, was passiert ist, aber es sollte dann hier wieder subpding sein, für das Datum, an dem wir die Primärfarbe ändern müssen Typografie wird Absatz sein, es sind Absatzgröße Eigentlich sollte dieses Datum höher sein, aber lassen wir es vorerst hier und der Abstand ist Dieser Abstand wird gut sein, nicht 12. Jetzt wird die Farbe so sein wie Text, die Typografie wird der Absatz sein und der Abstand wird auch wieder sein Ich denke, wir haben nicht den freigegebenen Link mehr, aber es ist okay und Seitennummerierung, wir müssen diese Seitenbezeichnung anpassen , bevor wir die Seitennation anpassen, lassen Sie uns diesen Inhaltsparameter anpassen und für Meta brauchen wir keinen Kommentar, entfernen Sie einfach den Befehl und das Datum, dann müssen wir hier die Exer-Länge überprüfen Was ist die Länge? Lass uns diesen Text kopieren und zu wordcounter.net gehen und einfach den Scheck stellen und es sind 150 Zeichen und 22 Lass uns das auf 22 machen, nichts, lass es uns auf 150 machen , hier sollte die Meta tot sein, nein, wir brauchen kein Trennzeichen und wir müssen nicht die Schaltfläche „Mehr lesen“ für die Seiteninierung anzeigen, lassen Sie uns das Seitenlimit auf fünf setzen, was angezeigt wird Die Einstellungen sind gut und das müssen wir auch. Fügen wir Apply Custom Mix Up hinzu und lassen Sie uns sehen, was wir dann tun müssen, ist zum Stil zu gehen und im Voraus müssen wir einen Rahmen hinzufügen. Finden wir heraus, dass wir hier die Grenze haben. Denken wir mal, lassen wir das so. Bei der Seitennummerierung können wir die Farbe in diese blaue Farbe ändern, und sehen wir uns diese Seitennummerierung Und hier haben wir die Größe von int als sechs, aber den Abstand. Lassen Sie uns den Abstand überprüfen Der Abstand wird 30 sein und hier haben wir nicht viele Anpassungsmöglichkeiten, also lassen wir es so und klicken auf Veröffentlichen und das ist besser für die Archivseiten, aber wir müssen eine benutzerdefinierte Beitragsseite erstellen , um unsere Website zu verbessern. Lass uns das in der nächsten Lektion machen. 135. Blogseite entwerfen – Teil 03: Okay, jetzt müssen wir eine andere Methode ausprobieren , um diese Blockseite zu gestalten. Lass uns anfangen. Zuerst gehe ich zu unserem Wordpress-Dashboard. Dann mache ich mich auf den Weg und lese. Bei Lesungen deaktiviere ich die Beitragsseite und sie sieht dann so aus Dann klicke ich auf Änderungen speichern Jetzt gehe ich zu Seiten und Earl-Seiten, und hier haben wir die Blockseite, also klicke ich auf Bearbeiten und dann auf Bearbeiten mit Element in Ordnung Jetzt kann ich die Kopfzeile zur M-Vorlage hinzufügen, und hier haben wir den Heldenbereich, die Unterseite, klicken Sie auf Einfügen, klicken Sie auf Anwenden Okay. Fügen wir nun diese Informationen hinzu. Kopieren Sie zuerst den Titel, fügen Sie ihn hier ein, kopieren Sie diesen. Du musst es hier einfügen und lass uns BR, BR hier hinzufügen. nächste BR wird hier sein. Lass uns sehen. Lass uns sehen. Okay, jetzt ist der Header-Teil fertig. Jetzt klicke ich auf einen neuen Container und füge den Container für die Richtungsspalte hinzu. Und hier als Rand und Abstand und beim Hinzufügen linker und rechter Abstände sind es 140, so wie Dann müssen wir auch den oberen Rand als eins, zwei hinzufügen Jetzt müssen wir noch Kraft hinzufügen, klicken Sie auf Element hinzufügen und dann auf Suchkraft klicken Sie auf Element hinzufügen und dann auf Suchkraft Hier haben wir das Kraftelement. Ich werde es einfach so fallen lassen. Okay, jetzt ist unsere Truppe erschienen und jetzt müssen wir die Änderungen vornehmen Wenn wir dieses Design überprüfen, wird es so aussehen, also lasst uns die Skins ändern und uns die Premiere ansehen, also ändere ich es einfach auf Karte und der Kartenlook passt am besten zu unserem Design. Und was ist vollständiger Inhalt? Nein, der vollständige Inhalt ist kein Vorteil. Karten sind die Art, es zu zeigen. Was wir dann zeigen müssen, sind Titel und Exerp. Die Größe des Auszugs wird 100 sein. Ich glaube, es sind 150 so, ja, es sind 150 Zeichen Okay. Jetzt müssen wir die Kommentare nicht zeigen, wir müssen nur das Datum zeigen, und wir müssen auch nicht mehr lesen und wir brauchen auch keine Badgers und kein Avada Jetzt brauchen das einzige Problem, dass dieses Mal oben stehen sollte, aber das können wir leider nicht tun Also, Anfrage, die Quelle wird erzwungen und wir müssen keine Include-by-Condition hinzufügen Lassen Sie uns das Ganze nach Datum und DESC-Format sortieren Machen Sie dann bei der Seitennummerierung die Seitennummerierung als Zahlen plus vorherige und nächste Wenn wir es im Design überprüfen, sieht es so aus oder wir können die Infinity-Scroll-Funktion hinzufügen, aber das ist gut Für das vorherige und das nächste müssen wir dieses Design anstelle dieses Designs verwenden. Jetzt müssen wir den E-Stil hinzufügen oder bearbeiten. Gehen wir im E-Stil zum E-Stil. Sehen wir uns den Spaltenabstand an, er war 20, er war 20 und hier dazwischen ist die Größe 30. Lassen Sie uns die Ganzzahlgröße auf 40 setzen. Spaltenabstand beträgt zwei, der Zeilenabstand beträgt 40 Mann. Und auf dem Einkaufswagen die Hintergrundfarbe weiß und der Rand für den Rand. Eigentlich brauchen wir keinen Rand. Der Grenzradius, mal sehen, der Grenzradius wird zwei. Ja, der Radius liegt bei 20 als Randradius, und das wird so sein und das horizontale Pad das horizontale PademIAC vertikale Padding, schauen wir uns das vertikale Padding schauen wir uns das 830. Lassen Sie uns das so machen, wie es in Ordnung ist, und wie Effekt, lassen Sie uns keinen Effekt für den Boxschatten hinzufügen, lassen Sie uns Box-Shadow-Shells hinzufügen, aber aus irgendeinem Grund haben wir keine Option, den Box-Schatten zu ändern, also behalten wir ihn bei diesem devolven und gehen wir jetzt zu Bild, Bildbereich Vorerst können wir die Seite in einer Null haben und beim Inhalt wird die Titelfarbe die Farbe des Textes sein Die Typografie wird eine Unterüberschrift sein. Der Raum, den wir sehen, lasst uns diesen Raum sehen, es ist Was ist dieses Meta? Ich denke, Meta ist dieses Datum. Lassen Sie uns die Farbe in diese blaue Farbe ändern und wir brauchen kein Trennzeichen. Die Typografie wird ein Absatz sein. Dann wird die einzige Farbe die Typografie sein. Die Absatzphase sollte darin bestehen, dass wir den Raum sehen, es Except ist zu lang, also lass uns Inhalt und Länge bis 20, 20 noch größer, 15, zehn benutzerdefiniert, nichts passiert Warum das nicht so ist, wollen wir mal im Bildbereich sehen, okay, aber auf dem Bild haben wir ein Problem, weil es nicht nach oben ausgerichtet ist. 136. Blogseite entwerfen – Teil 04: Okay, ich habe das Problem gefunden. In diesem Bild, einem Stil auf der Karte, fügen wir eine vertikale Polsterung als 20 Wenn wir es entfernen, ist das Bild perfekt repariert. Und für diesen inhaltlichen Text fügen wir die Länge 20 hinzu. In diesem Fall müssen wir 22 hinzufügen, da sich die Exerps in der Wortzahl widerspiegeln Wenn wir also 24 hinzufügen und veröffentlichen fügen wir die 22 hinzu, dann gehe ich zur Vorschau, es wird so aussehen Und wenn wir diesen Inhalt jetzt einfach kopieren, werden ihm 22 Wörter angezeigt. Okay, jetzt wurde das Problem behoben und wir müssen dem Boden Platz hinzufügen. Also versuchen wir das zu tun und auch die Größe zwischen dieser Überschrift und dem Bild ist zu groß, also versuchen wir auch, das zu beheben. Bild, der Abstand, machen wir es auf Null und veröffentlichen es und sehen wir es im echten Design. Es sieht jetzt so aus und es scheint, dass wir alles in unserer Macht Stehende getan haben , um diesen Blockabschnitt zu erstellen, also kann ich jetzt auf Veröffentlichen klicken und wir müssen Änderungen an der Seitennummerierung vornehmen . Gehen wir zur eingestellten Seitennummerierung und sehen, was wir tun können Zuerst stelle ich den Text als Typografie ein und im Normalmodus wird die Farbe diese Farbe sein und darauf, wird die Farbe diese Farbe sein und darauf wie die Farbe Primärfarbe sein wird, wenn sie aktiv ist, die Farbe wird Primärfarbe sein und der Abstand zwischen den Leerzeichen die Farbe wird Primärfarbe sein und der Abstand zwischen den Leerzeichen wird 20 sein und lassen Sie uns von hier aus sehen, zwischen den Größen wird der Abstand 20 und der Abstand 40 sein, so wie Leider haben wir dieses Design so gemacht und wir müssen dafür dieses Design so gemacht und wir müssen dafür benutzerdefiniertes CSS verwenden, aber ich werde es in diesem Kurs nicht machen, hier, vielleicht in Zukunft, werde ich eine Videolektion für CSS und Wordpress erstellen und jetzt klicke ich auf veröffentlichen und lass es uns im echten Design sehen und es wird so aussehen, und wenn wir darauf klicken, werden wir weiterleiten zu die einzelne Blogpost-Seite und wir müssen diese Seite erstellen. Lassen Sie uns vorerst mit der Blog-Seite befassen , in Ordnung. Wenn wir auf die zweite klicken, wird die zweite Seite aufgerufen und der Rest des Designs wird angezeigt. Und wir können auch die Infinity-Scroll hinzufügen, aber ich denke, das Hinzufügen von Infinity Scroll wäre besser. Bei der Paginierung haben wir hier also Infinity Scroll, was bedeutet, dass wir das Spinning hinzufügen, okay ist Dann werde ich auf C Publish klicken, weil das viel moderner ist als die Paginierung Wenn ich jetzt angerufen werde, wird der Beitrag so angezeigt Ich werde das wieder unterdrücken und sehen der Beitrag geladen wird und der Beitrag wird so geladen und das ist viel besser Ich verwende die Seitennummerierung, wir können die Farbe auf diese blaue Farbe ändern Die rotierende Farbe wird blau sein, diese Typografie, keine Seiten mehr, keine Beitragsnachricht mehr wird schwarz sein und sie wird auf der Überschrift erscheinen, nicht auf der Überschrift, der Unterüberschrift Der Abstand wird also 40 sein. Und jetzt schauen wir uns das Design an. Hier werden wir sehen, dass das viel besser ist als zuvor. Und jetzt erstellen wir die einzelne Blogpost-Seite. 137. Blogseite entwerfen – Teil 05: Hallo, alle zusammen. Lassen Sie uns nun diese einzelne Blogpost-Seite erstellen. Wir haben kein Figma-Design für die einzelne Blogpost-Seite. Im Grunde müssen wir das Bild des Blogeintrags, dann den Titel und dann den eigentlichen Blogbeitrag zeigen dann den Titel und dann den eigentlichen Blogbeitrag Machen wir das, was in anderen Fällen bedeutet, wenn jemand auf den einzelnen Blogbeitrag klickt oder zu ihm kommt, wird er im besseren Design angezeigt. Um das zu tun, gehe ich zum Dashboard im Dashboard, ich gehe zum Speichern der Vorlage oder wir können zum Builder gehen. Gehen wir zu Team Builder. Ich denke, wir haben den Team Builder-Teil nicht verwendet, aber beide sind ziemlich gleich. Also hier sind unsere aktuellen Vorlagen. Jetzt müssen wir hier einen einzelnen Beitrag hinzufügen. Aktuell haben wir keine, also klicke ich jetzt bei Neu darauf . Dann haben wir hier Blockpost-Bibliotheken empfohlen. Ich werde dieses Zeug nicht verwenden, weil wir es von Grund auf neu entwerfen werden. Also müssen wir zuerst den Header zu meinen Vorlagen hinzufügen, wir haben einen Heldenbereich für unsere Seiten, klicken Sie auf Einfügen und dann auf Anwenden und hier müssen wir den Titel des Blockposts anzeigen. Klicken Sie hier und klicken Sie in dynamischen Tags auf dynamische Tags Hier haben wir den Titel erzwungen. Füge es einfach so hinzu. Dann werde ich für diesen nicht die Safed-Zeile verwenden, also werde ich einfach versuchen, sie anzuklicken und zu löschen Für dieses Hintergrundbild müssen wir das Post-Thumbnail verwenden Ich werde mit der rechten Maustaste klicken und auf Container bearbeiten klicken, und eine Kachel hier, wir haben das Bild Also hier, klicken Sie auf dynamisches Tag und auf Beitrag, wir haben das Bild vorgestellt. Lassen Sie uns das vorgestellte Bild festlegen und es wird so aussehen. Stellen Sie die Bildauflösung Vollbild ein und positionieren Sie die Mittelpunkte in der NoC-Wiederholung und die Anzeige erfolgt automatisch Auto ist keine gute Standardeinstellung. Deckblatt. Lassen Sie uns die Displays als Titelbild verwenden, was bedeutet, dass es so angezeigt wird. Dann fügen wir zur Hintergrund-Overlay das Olay hinzu, fügen einfach die folgende Textfarbe hinzu und erhöhen die Deckkraft ein wenig so und jetzt haben wir den Titel und das den Titel und das Wenn wir das veröffentlichen und auf Bedingung hinzufügen klicken , fügen wir einen Singular hinzu, aber wenn wir den Beitrag zeigen möchten, können wir einfach einen Beitrag hinzufügen, was bedeutet, dass nur diese Vorlage für den Beitrag dieser Website gilt Dann klicke ich auf Speichern und schließen. Und jetzt gehen wir zur Blog-Seite unserer Website. Wenn wir dann in einen dieser Beiträge gehen, wird er so aussehen, aber wir haben ihn trotzdem viel besser gemacht. Ich werde so aussehen und jetzt wieder zu unserer Vorlage gehen und jetzt müssen wir den Inhalt hinzufügen. Lassen Sie uns ein Textfeld wie dieses erstellen und für ein Element hier haben wir den Inhalt erzwungen. Wir müssen den erzwungenen Inhalt wie folgt hinzufügen, dann wird die Ausrichtung links und Textfarbe die Textfarbe und die Typografie der Absatz sein und die Typografie der Absatz sein Voraus haben wir nichts zu tun und klicken auf den Container, und im nächsten Schritt müssen wir den oberen Rand eins bis 20 hinzufügen, und rechts wird 140 sein, links wird 140 sein, links wird 140 sein, so wie hier Für diesen ist 120 etwas größer. Machen wir 60 draus. Okay. Hier haben wir eine Menge Gegenstände. Hier haben wir viele Artikel hinzuzufügen. Fügen wir erzwungene Informationen und wir benötigen den Befehl nicht. Fügen wir die Force-Navigation hinzu, um mit anderen Streitkräften zu navigieren , also fügen wir ein Inhaltsverzeichnis hinzu Aber ich denke, dass das Inhaltsverzeichnis in diesem Fall nicht funktionieren wird, aber fügen wir es trotzdem Hier habe ich nicht viel Ahnung, also klicke ich bei Vorlage darauf, und bei Blöcken können wir ein anderes Vorlagendesign sehen. Holen wir uns das hier, und hier können wir diesen Teil des zugehörigen Beitrags hinzufügen, und lassen Sie uns ihn hier hinzufügen, lassen Sie uns über Satellit miteinander in Verbindung treten. Klicken wir auf Einfügen und hier wurde er eingefügt, und ich möchte diesen Abschnitt mit dem zugehörigen Teil sehen. Bevor wir also weitermachen, lassen Sie uns zuerst diese Stile bearbeiten Wir haben hier Informationen zum Beitrag, und wir müssen den Autor nicht zeigen. Wir müssen nur das Datum anzeigen, keinen Kommentar, nur das Datum und hier den Stil auf dem Symbol, die Iconfarbe wird die Primärfarbe sein und die Icon-Größe ist okay. Machen wir es auf 16 und beim Text wird sich auch die Farbe des Textes verfärben und die Typografie wird ein Absatz sein Machen wir die Größe 12 dazwischen. Wenn wir wollen, können wir einen Teiler hinzufügen, aber wir brauchen keinen Teiler Und hier fügen wir einen Durchgang 20 für diese beiden großen 15 für diesen ganzen Abschnitt hinzu, und hier haben wir ein Inhaltsverzeichnis Fügen wir hier ein Inhaltsverzeichnis hinzu und für das Inhaltsverzeichnis gehen wir zum Stil über. Die Hintergrundfarbe wird Akzentfarbe sein, funktioniert nicht. Fügen wir so eine Aschefarbe hinzu. schwarze Rand wird nicht funktionieren, also fügen wir keinen Rahmen hinzu. Randradius, lassen Sie uns den Rahmenradius wie in der Kopfzeile festlegen, die Textfarbe wird diese Farbe haben und der Typ Gramm wird die Unterüberschrift sein für die Textfarbe keine Unterstreichungen hinzufügen, Lassen Sie uns für die Textfarbe keine Unterstreichungen hinzufügen, die Markierungsfarbe wird so aussehen Okay, jetzt zur Box, lassen Sie uns dieses Symbol blau färben Ich finde sie gut und inhaltlich. Lass es uns so belassen und jetzt ist der Inhalt des Beitrags okay, denn nur hier müssen wir die Textfarbe und die Typografie hinzufügen und alle sind perfekt dann für den vorherigen und nächsten Beitrag Gehen wir dann für den vorherigen und nächsten Beitrag zum Stil und die Farbe wird diese Farbe sein, die Typografie wird sein, lassen Sie uns das im Titel machen, was ist dieser Wir brauchen keinen Titel. Also hier, lassen Sie uns den Force-Titel entfernen, Pfeil für Pfeil zeigen, lassen Sie uns die Farbe blau machen und auf dem Etikett wird der Typografie ein Absatz wie dieser sein Okay. Ich denke, das ist besser. Was ist, wenn wir die Farbe auf Blau ändern? Ja, am besten ist es , die Farbe auf Blau zu ändern. Okay. Jetzt haben wir hier den Inhalt des Beitrags. Und wenn wir wollen, können wir einen verwandten Beitragsteil hinzufügen Um das für ein Anzeigenelement zu tun, gehen wir zur Überschrift und fügen die Überschrift wie verwandte Hosts Und ein Stil: Die Typografie wird Unterüberschrift sein, Textfarbe wird Text sein und dann klicken Sie auf das Plus-Symbol, um den Host hinzuzufügen Hier haben wir einen Beitrag nur für den Beitrag, und wir müssen das nur für die beiden Hosts wie diesen tun und lassen Sie uns diesen Beitragsstil von der Beitragsseite kopieren Hier haben wir die erste Seite, klicken Sie mit der rechten Maustaste auf Kopieren, dann rechten Maustaste und fügen Sie diesen Typ wie folgt ein. Und hier brauchen wir wieder zwei davon, und die Beitragsseite wird es zwei geben und für hier gibt es bei HR. Fügen wir hier eine Trennlinie hinzu, um diese beiden Abschnitte zu unterteilen, und ich denke, wir müssen nichts am Stil ändern Lassen Sie uns diese Trennfarbe wie folgt in Aschefarbe ändern. Okay. Klicken wir nun auf Veröffentlichen und sehen uns die echte Vorschau an. Gehen wir jetzt zu diesem Beitrag und was ist passiert? Gehen wir zu FostPage und schauen wir mal, ob FS wie das nicht stimmt ob FS wie das Okay, jetzt wird es so aussehen, und das sieht nicht gut Wir müssen die angegliederte Zwangsabteilung ändern. Um das zu tun, klicken Sie hier auf Bearbeiten, und hier beim Inhalt sollte die Titelfarbe schwarz sein, und er sollte auf Subdin sein und wir müssen ihn außer diesem hier nicht anzeigen Und es ist auch nicht nötig , die Meta anzuzeigen, sondern nur den Text mit der Schaltfläche „Mehr lesen“ anzuzeigen und Bile zu bestellen Lassen Sie uns die Reihenfolge nach dem Zufallsprinzip wie folgt festlegen, dann lassen Sie uns einen Zeilenabstand erstellen Lassen Sie uns die Spaltenlücke 20 machen, das ist okay. Und das Feld, das Bild, das auf 20 zeigt, ist okay, oder der Radius wird 20 sein, aber unten sollte es Null sein und das linke Bild sollte auch Null sein. Und was den Inhalt angeht, verfärbt sich die Lesemoiren. Die Typografie wird ein Button sein. Es ist okay. Machen wir es mit 20 zu tun. Gehen wir jetzt zum Layout und richten die Schaltflächen automatisch aus. Jetzt müssen wir in diesem Separator diesen Skin in Karte ändern. Das war der fehlende Teil. Auch hier müssen wir alle Details bearbeiten und zwei erzwingen und keine Notwendigkeit, die Übung und den Titel zu zeigen, mehr lesen sollte gesehen werden, keine Notwendigkeit, die Bank nometao und auf Style-Inhalt zu zeigen und auf Style-Inhalt mehr lesen Schaltflächenfarbe mit dieser Farbe Und was ist dieser große Raum? Okay, jetzt klicken Sie auf Veröffentlichen und das können wir ändern. Und sehen wir es uns im echten Design an, es wird so aussehen, und hier haben wir ein weiteres Problem. Dazu müssen wir klar und deutlich nur den Force-Text zeigen. Wir können diesen Teiler einfach duplizieren und ihn so hinzufügen. Dann duplizieren Sie es erneut und fügen Sie es hier ein. Dann wird es vom Rest des Designs getrennt sein und so aussehen. Das ist viel besser, und lassen Sie uns das im echten Design sehen. Also lass uns fünf davon so öffnen und es wird so aussehen. Eigentlich wird dieser Text viel besser sein als dieser, weil wir bisher nur Dummy-Text hinzugefügt haben, aber wir müssen besseren Text hinzufügen, um das beste Ergebnis zu erzielen, und ja, ich sehe ein Problem Wir sehen, dass sich das Hintergrundbild wiederholt. Lassen Sie uns das Problem beheben, den Container bearbeiten, und das Hintergrundbild sollte sich nicht wiederholen. Eigentlich ist es keine Wiederholung, aber aus irgendeinem Grund hat es sich wiederholt. Okay, los geht's. Für diese ähnliche Pose ist das etwas größer. Wir können also die rechte und linke Polsterung 990 hinzufügen, sodass sie kleiner wird, vielleicht eins nach dem anderen Ja. 90 mal 90 wären perfekt. Und hier haben wir ein Problem. Die Zeilenhöhe ist so klein, also nehmen wir die Zeilenhöhe, nicht zu groß 1.1 0.21 0.4 Ja, 1.4 wird besser sein. Vielleicht wird 1.5 viel besser sein. Ja. Okay. Jetzt hier, lass uns diesen Beitrag bearbeiten und jetzt haben wir hier die Blogpost-Seite und es funktioniert einwandfrei. Aber wenn wir die URL sehen, werden wir das Datum sehen. Um das zu beheben, können wir zum WordPress-Dashboard gehen und mit dem Lesen beginnen. Nein, nicht beim Lesen in den Perm-Links, wir können diese Permalink-Struktur als Tag und Name festlegen , um den Namen des Beitrags zu ändern und zu klicken Lass uns jetzt posten, und wenn wir jetzt einen dieser Beiträge wie diesen überprüfen, wird die URL so angezeigt und sie wird viel besser aussehen 138. Formular entwerfen – Teil 01: Hallo, alle zusammen. Jetzt müssen wir dieses Kontaktformular oder diese Kontaktseite gestalten. Gehen wir also auf Seiten zum Press-Dashboard, klicken Sie auf Neue Seite Dieser Seitenname lautet Kontakt und klicken Sie auf Tielemento bearbeiten, um den Elementor-Editor zu öffnen Okay, als ersten Schritt klicke ich auf dieses Ordnersymbol in meiner Vorlage. Ich werde diesen Heldenbereich für die Unterseitenvorlage sehen, Ich werde diesen Heldenbereich für die Unterseitenvorlage sehen für die Unterseitenvorlage Ordnung. Und lass uns den Text kopieren. Wir das, dann nehmen wir diesen Text. Dann füge B wie diese beiden an den Sollbruchstellen hinzu. Okay. Jetzt müssen wir in diesem Formular und diesem Kontakt die Farbe für die Klinik hinzufügen und unsere Symbole öffnen Und lassen Sie uns das tun. Dazu klicke ich auf das Pas-Symbol und Plex Box, dann wähle ich diese Art von Struktur aus, und hier K C auch hier, setze einfach den Rand und die Polsterung auf Null Und wenn wir dieses Design überprüfen, haben wir hier eine größere Größe und dort eine kleinere Größe Gehen wir also in diesen Container. Nun, lassen Sie uns diese beiden Spalten so ändern und okay, als ersten Schritt müssen wir den oberen Rand hinzufügen und der WTF-Trabm wird 140 mal 140 sein Und hier müssen wir diesen Text hinzufügen, um den Text zu kopieren und hier auf die Überschrift bei der Überschrift zu klicken , da dieser Text im Stil der Typografie Überschrift sein wird und die Textfarbe diese Textfarbe sein wird Okay, die Ausrichtung wird beibehalten, und dann müssen wir das Formular erstellen Also klicken Sie hier, um das Suchformular zu finden. Element of Four hat also dieses Formular. Fügen wir das Formular hinzu und klicken Sie hier die Größe dazwischen zu sehen. Ich glaube, es ist 220. Es sind 220. Also hier, lass uns bei O als 20 sein. Okay. Fügen wir nun den Namen des Formulars als Kontakt hinzu. Formular. Und jetzt müssen wir diese Details hinzufügen. Zuerst müssen wir den vollständigen Namen hinzufügen, Teil mit dem vollständigen Namen kopieren und hier fügen wir Platzhalter hinzu. Eigentlich sollte der Platzhalter so sein, wie der vollständige Name erforderlich ist Eigentlich sollte der Platzhalter so sein, wie der vollständige Name Lassen Sie uns also den Platzhalter als vollständigen Namen als Pflichtfeld angeben und das erforderliche Kästchen ankreuzen und die Spalte wird 100 sein und der Typ wird gesetzt und für das Etikett brauchen wir das Etikett nicht Und dann müssen wir Emas hinzufügen , wir haben Bilder, nicht Label, Platzhalter, das Label wird neun sein und dann müssen wir diese Telefonnummer hinzufügen, sie entfernen und hier klicken, dann ändern wir diesen Typ Ja, hier haben wir den Schwanz und den Ort, also wird es ihn geben. Eigentlich sollten wir ein Etikett hinzufügen, und hier können wir die Höhe der Beschriftungen so festlegen. Also müssen wir solche Beschriftungen hinzufügen. Okay, Etiketten. Kopie als E-Mail beschriftet und hier Telefon. Jetzt ist das nächste Feld Betreff, es ist optional. wurde als Betreff hinzugefügt und hier an diesem Tag der Text als Betreff bezeichnet. Dieser Typ Text und das Erforderliche ist Nein, und hier ist die Telefonnummer E-Mail ist erforderlich. Okay. Jetzt können wir die Eingabegröße hier ändern, aber wir können sie über das Style-Tag ändern. Lassen Sie uns vorerst diese Details hinzufügen und jetzt haben wir den Textbereich für Nachrichten. Der Typ wird also Textbereich sein. Okay, die Reihe wird fünf sein. Lass uns sehen, lass uns sehen. Vier sind besser als fünf wie diese und es erfordert dann gehen wir zum nächsten. Hier haben wir die bevorzugte Kontaktmethode und sie sollte aufgelistet sein. Also lass uns Platzhalter setzen und es ist optional. Das Label wird die bevorzugte Kontaktmethode sein, und hier müssen wir es auf CL ändern und hier müssen wir die Optionen hinzufügen Fügen wir also Optionen wie E-Mail hinzu, es heißt, geben Sie jede Option in einer separaten Zeile ein, um zwischen Label und Wert zu unterscheiden. Trennen Sie sie mit der Pipeline. Zum Beispiel der Vorname ist Okay, wir haben ihn und dann haben wir hier die Pipeline und fügen Emil Und hier ist der Himmel himmeldünn , als ob es ein Zoom ist Nein, Zoom wird hier nicht funktionieren. Lassen Sie uns also diese drei Optionen beibehalten. Und wenn wir wollen, können wir die Option Multileon hinzufügen, aber hier brauchen wir keine Multileation Wir brauchen nur eins zu spät, nein, wenn wir das Design überprüfen, wir sehen den Platzhalter nicht Um den Platzhalter hinzuzufügen, werde ich die bevorzugte Kontaktmethode wie folgt vorstellen und hinzufügen Es ist eine von allen bevorzugte Kontaktmethode. Und es funktioniert als Spiellötmittel und es ist kein Pflichtfeld, und lassen Sie uns zum nächsten Punkt übergehen Der nächste Punkt ist Clecoption. Wie haben Sie von uns erfahren? Cleco, es gibt eine Menge Feldtypen, spiele mit diesen Feldtypen herum und lerne sie alle Und ich werde diesen Text hier so kopieren. Dann wird das Etikett lauten, wie haben Sie von uns gehört? Und hier, lasst uns Amok machen, lasst uns nur diese Gegenstände behalten Und ich denke, hier müssen wir die PPE-Zeile nicht hinzufügen , weil wir die fünf Zeilen nur hinzufügen müssen , wenn wir separaten Text verwenden oder versuchen, verschiedene Texte aus diesem Text darzustellen zum Beispiel versuchen, eine E-Mail Wenn wir zum Beispiel versuchen, eine E-Mail zu erhalten , also wenn jemand eine E-Mail hat und wir eine erhalten möchten, wenn wir das Formular abschicken, können wir diese Pipeline wie folgt hinzufügen. Oder hier drinnen, in diesem Fall, wird der Himmel zu zweit sein und das Telefon zu dritt. Wenn dann jemand das Formular abschickt, erhalten wir diesen Text als eins, zwei, drei. Okay, das brauchen wir nicht, also entfernen wir es. Und jetzt, was wir hinzufügen müssen. Hier haben wir das menschliche Feld hochgeladen. Lassen Sie uns also ein neues Element hinzufügen, und hier sagen wir, der Typ als Datei-Upload und das Etikett wird als Upload-Dokument verwendet. Und hier können wir die maximale Dateigröße definieren. Lassen Sie uns die Option E-Mail mit Anhang erstellen und sie ist nicht erforderlich. Wir können zulässige Dateitypen hinzufügen, daher haben wir hier den Dateityp PDF, JPG, PNG, JPG PNG zugelassen . PDF, wie das hier. Okay, jetzt können nur Besucher das Dokument vom Typ JPG, PNG oder PDF hochladen, und Maxflee-Größe, machen wir es auf drei Die maximale Dateigröße sollte weniger als drei Megabyte betragen. Okay. Ich glaube, unser Formular ist fertig, aber wenn wir hier nachschauen, hat es keinen Namen. 139. CSS-Code hinzufügen, um Label im Dateifeld anzuzeigen: Okay, jetzt haben wir dieses Problem. Wir verstecken Etiketten. Wenn wir also Beschriftungen ausblenden, sehen wir dieses Etikett für das Hochladen von Dokumenten nicht, sodass nur die Schaltfläche „Datei“ ausgewählt wird. Um das Problem zu beheben, müssen wir den CSS-Code hinzufügen. Also werde ich das einfach veröffentlichen und so wird es aussehen, aber wir müssen den Dateitext hier hochladen. Also werde ich zuerst den Text kopieren und den Text so platzieren, dann diesen veröffentlichen und jetzt gehe ich zum Dashboard. Im Dashboard muss ich diesen Code hinzufügen, also gehe ich zum Erscheinungsbild und zur Anpassung. Sie finden diesen Code im Abschnitt Ressourcen. Dann gehe ich zu zusätzlichem CSS und füge den CSS-Code wie folgt hinzu und klicke auf Veröffentlichen. Lassen Sie uns jetzt hierher kommen und die Änderungen überprüfen. Jetzt können wir das Etikett sehen. Finden Sie diesen Code im Abschnitt Ressourcen. Wir müssen den CSS-Code hinzufügen. Bevor wir das tun, finde ich, dass diese Größe etwas größer ist, also lassen Sie uns hierher kommen und diese Breite 60 festlegen und diese zweite Containerbreite auf 40. Dann haben wir die Größe 100 der Breite. Okay, was wir jetzt tun müssen, ist hinzufügen 140. Design-Kontaktseite - Teil 02: Außerdem müssen wir den Titel dieser Schaltfläche ändern, um sie einzureichen, also machen wir das hier. Finden wir die Schaltfläche heraus und ändern wir „Senden“ wie folgt in „Senden“. Okay. Gehen wir jetzt zu Estyle in Style Lassen Sie uns die Spalte Lücke zu Null und zu zwei Zeilenlücken machen. Sehen wir uns die Zeilenlücken an, Zeilenlücken sind zwei. Mikrolücken 20, Etikettenabstand, lassen Sie uns den Etikettenabstand vorerst auf Null setzen, und die Farbe wird die Textfarbe sein und der Text wird Typografie sein Wir haben kein DML-Feld, also müssen wir uns darüber keine Gedanken machen Dann haben wir hier das Feld. Die Farbe des Feldtests wird also schwarz sein und die Typografie wird ein Absatz sein Also hier klicken wir auf das Feld, die Füllfarbe ist keine, was bedeutet, dass die Hintergrundfarbe weiß ist, und am Rand haben wir die Strichfarbe als Aschefarbe und die Breite wird eins sein Fügen wir also das Aquarell als dieses hinzu und breiten wir dieses ab. Eigentlich sollte die Wasserfarbe diese Farbe haben. Okay, dann müssen wir den Grenzradius finden. Der Randradius ist sechs, und lassen Sie uns die Textfarbe für den Text finden. Diese Farbe ist eigentlich Platzhalterfarbe Und lass uns zur Schaltfläche gehen. Also auf der Schaltfläche wird die Hintergrundfarbe der Schaltfläche diese Farbe haben, und die Schaltfläche ist nicht voll mit der Schaltfläche, also wird die Typografie die Schaltfläche sein und Position der Ausrichtungsstile wird links bleiben, Testfarbe der Textfarbe weiß Ja, die Textfarbe ist weiß, und lassen Sie uns die Ränder herausfinden Der Grenzradius ist 15 und etwa die Größe dazwischen 2020 mal 30, 30. Körperradius ist also 15, das Textmuster wird oben 20, rechts, 30, unten 20 links 30, so wie hier. Okay. Der Wassertyp wird keiner sein. Oh, lass uns auf die Homepage gehen und die On-Hover-Bühne überprüfen. Wir haben die Details beim Hover immer noch nicht hinzugefügt, aber lassen Sie uns auf unserem Hintergrund darauf achten , dass die Textfarbe auf Schwarz geändert wird Also, nicht gut. Lass es uns so viel besser machen. Vielleicht lassen wir es wie die Standardeinstellung. Wir müssen nichts tun. Wir sollten diese Art von Animation wie folgt hinzufügen. B zum Inhalt, ich denke, die Eingabeseite sollte mittelgroß sein, und jetzt wird es so viel besser sein. Veröffentlichen Sie das jetzt und lassen Sie uns das Design auf I'll Leave sehen, also wird es so aussehen. Okay. Das Formular ist fertig und jetzt müssen wir diesen Abschnitt erstellen. Und das Hinzufügen von Aktionen zum Formular ein weiterer Schritt, den Sie kennen müssen. Machen wir es also, nachdem wir das vollständige Design der Website fertiggestellt haben. 141. Design-Kontaktseite - Teil 03: Jetzt müssen wir diesen Abschnitt gestalten. Es ist ziemlich einfach, weil wir es bereits entworfen haben. Wenn wir auf die Startseite unserer Website gehen und hier nach unten scrollen, haben wir einen ähnlichen Bereich. Gehen wir zur Bearbeitung mit Elementor, um diesen Abschnitt zu bearbeiten , die Seite zu bearbeiten und den Abschnitt zu kopieren Scrollen Sie nach unten. In Ordnung. Lass uns eins nach dem anderen kopieren, richtige Kopie, komm her. Nein hier, hier, füge es so ein und hier, kopiere es, es ist ziemlich einfach. Nein. Ich glaube, den brauchen wir nicht. Wir können die Arbeit mit diesen beiden Gegenständen erledigen. Also zuerst kopiere ich, wähle den Hauptcontainer aus und schicke den Rechtfertigungsinhalt an die Mitte. Und auch beim Hauptcontainer gehe ich zum Layout und zum Layout, die Spalte wird 220 sein, also haben wir diesen Platz und auf dem Untercontainer wird auch die Zeile Eis 20 sein, so wie hier Ich denke, es sind 20, nicht wahr? Es ist 30. Die Rose ist 30. Okay. Nun, zuerst ist das S dasselbe, und dann haben wir den Standort der Klinik, und hier brauchen wir dieses nicht, also löschen wir es, und dann haben wir Öffnungszeiten zu den Öffnungszeiten, ich dupliziere einfach dieses, dann lade ich dieses Symbol herunter, dann komm her und klicke so, dann klicke auf das Symbol und füge das Symbol so hinzu, dann wähle hier und es wird so hinzugefügt, dann müssen wir diesen Text hinzufügen. Kopieren Sie die geöffnete Paste wie folgt, dann hier, kopieren Sie den Text, klicken Sie hier und platzieren Sie den Text so Jetzt haben wir diese drei Abschnitte und jetzt müssen wir diese Karte hinzufügen Um das zu tun, klicke ich auf das Plus-Symbol. Spalte mit der Richtung des Textfeldes, und hier wird die einladende Größe oben sein, eins , zwei und, und rechts 140 mal 140 Jetzt suche ich hier auf der Karte. Hier haben wir Google Map, füge es hinzu. Und jetzt lass uns das kopieren. Kopieren wir diese Kartenposition und fügen sie einfach so ein und sie wird so angezeigt. Wenn wir wollen, können wir es also etwas weiter zoomen und die Höhe anpassen. Sehen wir uns die Höhe hier an. Die Höhe ist 500, also machen wir nicht 400, 500 als Höhe, und das ist ziemlich gut. In Ordnung. Nett. Jetzt kann ich das veröffentlichen, und hier haben wir unsere Kontaktseite. Das wird auf dieser Art von Geräten besser aussehen. 142. Kopfzeile beheben: Hallo, alle zusammen. Jetzt entwerfen wir nur die Earl-Seiten, aber wir haben eine Menge Arbeit. Wir haben diese Seiten immer noch nicht responsiv gemacht. Gehen wir jedoch noch einmal Schritt für Schritt vor. Erstens haben wir auf der Homepage viel zu tun. Fangen wir also mit der Homepage und machen wir die Website funktionsfähig. Im ersten Schritt, wenn ich den Link auf der Startseite überprüfe, funktioniert der Home-Link so, dass unser Provider blockiert wird , sodass einer dieser Links nicht funktioniert. Wenn ich also auf dieses Anrufsymbol klicke, funktioniert es nicht und dieses Anrufsymbol ist nicht richtig ausgerichtet Lassen Sie uns also zuerst diese Dinge korrigieren , damit wir den Haupt-Header bearbeiten müssen. Also klicke ich auf den Haupt-Header, um ihn in Elemental zu bearbeiten und los geht's Zuallererst müssen wir dieses Menü ändern und um das Menü zu ändern, können wir darauf klicken und zum Menübildschirm gehen, um es zu verwalten Und hier ist das aktuelle Menü, aber diese Links sind benutzerdefinierte Links, also müssen wir sie ändern. In Admeno-Artikeln haben wir also Seiten. Wenn ich also auf O view klicke, können wir die Seiten sehen, die wir haben Also müssen wir diese „Über uns“ -Seite, die Blog-Seite und die Kontaktseite ersetzen , und schon wird unser „Rider“ -Bereich angezeigt. Lassen Sie uns also vorerst diese Artikel zur Website hinzufügen, und hier werde ich diese Navigationsbeschriftung in „Über“ ändern , sie dann hier platzieren, dann diesen benutzerdefinierten Link entfernen und dann haben wir Kontakt. Ich werde diesen benutzerdefinierten Link und das Tag entfernen und nur den Kontakt behalten, dann haben wir die Sperrseite, also ist Let's Change in der Lage, den benutzerdefinierten Link zu blockieren und zu entfernen. Jetzt sollten diese Elemente funktionieren, also klicke ich jetzt auf Savino Was wir dann tun müssen, ist, wenn jemand auf den Link dieses Anbieters klickt, diese Person sollte auf die Homepage weiterleiten Ich überprüfe, ob es zur Homepage weitergeleitet wird, unserem Anbieterbereich zu diesem Bereich. Lassen Sie uns diese Funktion dafür einrichten Ich klicke auf Mit Element rechts bearbeiten, scrolle dann nach unten zu unserem speziellen Anbieter und klicke hier, dann gehe ich zu Advance. Im Voraus werde ich die CSS-ID hinzufügen. Ich werde hier einfach unseren Anbieter Ders hinzufügen und ihn kopieren, dann die Änderungen veröffentlichen und jetzt zum Menü gehen und unsere Anbieter so mit einem Hashtag versehen Also klicke ich jetzt auf Menü speichern und dann schauen wir uns die Funktionalität an also als ersten Schritt Wenn wir also als ersten Schritt auf A klicken, wird es wirklich so auf die A-Seite reagieren und wir gehen wieder zur Startseite. Und wenn ich auf unsere Anbieter klicke, bezieht sich das auf den Bereich Anbieter. Welche Seiten haben das gemacht? Wir haben einfach die ID hinzugefügt oder wir weisen diesem Abschnitt einfach eine CSS-ID zu, und im Menü fügen wir sie einfach wie ein Hashtag unserer Anbieter hinzu. Wenn wir also auf unsere Anbieter klicken, können Sie hier sehen, dass wir einen OR-Provider-Hashtag ODER einen Provider-Tag wie diesen haben einen OR-Provider-Hashtag ODER einen Provider-Tag wie diesen Schauen wir uns das mal an und schauen wir nochmal nach. Gehen wir also zur Startseite und lassen Sie uns das noch einmal überprüfen Wenn ich das mache, wird unser Anbieter-Tag angezeigt und dieser Abschnitt leitet zur Anbieterseite weiter oder die Seite leitet zum Bereich OR-Anbieter Wenn ich auf Con-Tag klicke, wird es zur Kontaktseite weitergeleitet. Irgendwie passiert von hier aus nichts, wenn ich auf unsere Anbieter klicke, weil diese URL nicht korrekt ist. Wenn ich derzeit auf Unser Anbieter klicke, wird nach dieser Kontaktseiten-URL hinzugefügt, aber diese OR-Anbieter-ID befindet sich auf der Startseite. Wenn wir also weiterleiten möchten, müssen wir diese URL wie folgt auf die Startseite verweisen. Wenn ich nun versuche, die Seite zu unterdrücken oder zu der Seite zu wechseln, wird sie zu unserem Bereich für spezielle Anbieter weitergeleitet Um das Problem zu beheben, kann ich einfach den Inhalt kopieren und zum Menü gehen Anstatt nur den URL-Parameter hinzuzufügen, kann ich hier die URL der Website, dann Ashtag und den Parameter hinzufügen dann Ashtag und den Dann klicke ich auf Menü speichern und jetzt sehen wir uns die Aktion an. Also geh zuerst einfach zur Homepage und jetzt bin ich auf der Homepage. Wenn ich jetzt auf unseren Anbieter klicke, wird er zum Bereich Unser Anbieter Wenn ich auf Kontakt und dann auf unseren Anbieter klicke, wird es erneut zum Bereich Unser Siehst du, jetzt funktioniert es perfekt. Jetzt funktioniert unser Menü. Also funktioniert dieses Fußzeilenmenü, aber wir müssen das Fußzeilenmenü ändern Aber im Moment ist das perfekt. Und wenn wir das überprüfen, rufen Sie uns rund um die Uhr an, ich kann, wenn jemand auf dieses Symbol klickt , lesen oder wir können Funktionen hinzufügen , um Dialem vom Handy oder PC zu öffnen und aktuell funktioniert es nicht Wenn wir das genau überprüfen, können wir deutlich erkennen, dass es ein Problem mit der Ausrichtung Lassen Sie uns diese Probleme beheben. Jetzt bin ich wieder im Hauptmenü Lassen Sie uns zuerst dieses Ausrichtungsproblem beheben. Dazu klicke ich auf das Bildfeldelement gehe dann im Inhalt zu Stil in Stil Wenn wir bei der Krawatte nach Graphik suchen, fügen wir die Linienhöhe Strich Otto hinzu, aber ich mache es pixelig und fügen es wie Jetzt geht es nach oben und dann klicke ich hier und ändere dieses Auto in ein Auto wie dieses. Jetzt reparieren wir es einfach, und jetzt kann ich Leerzeichen eingrenzen. Lass es uns so hinzufügen. Jetzt ist es ziemlich gut. Vielleicht werden neun die Basis sein. Ja, neun werden stationiert sein. Veröffentlichen Sie es jetzt, und als nächsten Schritt haben wir bei Call Link. Gehen Sie also zu Google und suchen Sie nach dem Call Link-Tag in HTML. Und hier haben wir das HTML-Tag, also brauchen wir nur diesen Tell-Teil zu bekommen, diesen Tell-Teil zu kopieren und hierher zu kommen. Dann zum Inhalt, hier haben wir eine Stelle, an der wir den Link hinzufügen können. Also hier füge ich einfach Tell hinzu und jetzt muss ich diese Zahl hinzufügen. Also lass uns diese Zahl so hinzufügen. Das ist eine falsche Nummer, aber füge sie mit der Landesvorwahl hinzu. Veröffentlichen Sie es. Und jetzt gehen wir zur Homepage der Website und okay, hier haben wir ein PRI-Problem Aber wenn wir auf dieses Anrufsymbol klicken, öffnet sich ein Pop-up mit der Aufschrift „ Öffne Kip“, was bedeutet, dass , wenn wir dies auf dem Handy tun, die Wähltastatur geöffnet wird Okay. Jetzt haben wir hier ein Problem. Das Problem besteht darin, dass wir die Zeilenhöhe hier im Inhalt entfernen Lassen Sie uns die Zeilenhöhe der Beschreibung auf 30 setzen und beim Titel die Zeilenhöhe auf die rechte Zeile Null, veröffentliche es und lass dich vom Design leiten. Okay, ich habe so perfekt gearbeitet. Okay. In Ordnung. Jetzt funktioniert unser Menü perfekt und jetzt müssen wir zum Heldenbereich gehen. 143. Terminvereinbarung für Designanfragen - Teil 01: Hallo, alle zusammen. Jetzt müssen wir diese Anfrage als Ihre Terminseite gestalten. Also lass uns das machen. Ich gehe zum WordPress-Dashboard oder wir können den Mauszeiger hier drüber bewegen und auf die Seite klicken, und jetzt werde ich das kopieren Lassen Sie uns diesen Titel tatsächlich kopieren und auf Mit Elemento bearbeiten klicken Ordnung, wie wir es zuvor getan haben, klicken Sie hier, klicken Sie auf meine Vorlagen und hier haben wir Heldenbereich. Klicken Sie darauf, klicken Sie auf Anwenden Ordnung. Jetzt fügen wir den Header hinzu und sagen zuerst, kopiere die Überschrift, hinter der Überschrift so, dann müssen wir hier vielleicht BR hinzufügen. Aber ohne R sieht es auch gut aus, und lassen Sie uns diesen Teil zuerst kopieren, und hier müssen wir hier BR oder Break Line hinzufügen. So wie das. Okay. Jetzt müssen wir dieses Formular hinzufügen. Tatsächlich habe ich im letzten Figma-Video vergessen, diesen Abschnitt zu aktualisieren, also werde ich ihn aktualisieren und wir kommen wieder 144. Terminvereinbarung für Designanfragen - Teil 02: Hier bei Figma Design haben wir die Kontaktformularfelder Auf GPT können wir also das Feld für Terminanfragen sehen. Fügen wir also zuerst diese SP hinzu, wir benötigen einen vollständigen Namen, und derzeit haben wir hier einen vollständigen Namen, dann eine E-Mail-Adresse Und hier haben wir die E-Mail-Adresse, dann die Telefonnummer. Telefonnummer, dann sollten wir ein Drop-down-Menü für den Auswahlservice haben ein Drop-down-Menü für den Auswahlservice Also kopieren wir es und hier, benutzen wir einfach dieses vorgesehene Feld als Selektor-Anforderungsauswahldienst wie diesen und wir müssen nicht, dass wir auf dieses klicken und es so platzieren müssen auf dieses klicken und es so platzieren Okay. Dann brauchen wir eine bevorzugte Datum/Uhrzeit, also kopieren wir sie und fügen sie so hinzu Dann sollten wir eine Nachricht oder zusätzliche Notizen haben, also lasst uns das kopieren Dann lass uns so eine Anzeige machen. Eigentlich ist es optional. Fügen wir also diese Details wie folgt hinzu, und dann haben wir die Zustimmung. Eigentlich benötigen wir keine Zustimmung, und die Schaltfläche „Senden“ sollte „ Termin anfragen“ lauten. Hier werde ich diese beiden Optionen entfernen. Also dieser ändert dann Schaltfläche „ Senden“, um einen Termin anzufordern. Okay. Jetzt können wir dieses Formular verwenden , um unser Wordpress-Element oder Formular zu entwerfen. 145. Terminvereinbarung für Designanfragen - Teil 03: Richtig. Jetzt haben wir hier das Formular. Lass uns hierher gehen. Tatsächlich können wir diese Inhalte von der Kontaktseite kopieren. Ich öffne diese Website in einem neuen Fenster und gehe zu Kontakt Dann klicke ich auf Mit Elementor bearbeiten und hier haben wir dieses Kontaktformular Eigentlich werde ich einfach den ganzen Abschnitt mit der kopieren und C direkt dahinter kopieren. Jetzt brauchen wir diese Gegenstände nicht. Stattdessen brauchen wir diesen, also werde ich ihn einfach so ausdrücken. Eigentlich sollte es hier drinnen sein. Nein, nicht da in diesem Container wie diesem. Jetzt brauchen wir diese drei nicht mehr, also wähle ich sie einfach aus und lösche sie so. Jetzt haben wir hier zuerst das Formular, lassen Sie uns das Formular bearbeiten. Hier brauchen wir zuerst den vollständigen Namen. Ich glaube, wir haben schon den vollständigen Namen hier, und hier müssen wir das ändern, um einen Termin anzufordern , die Schreibweise des Liedes, und jetzt ist es das Terminanforderungsformular und hier sollten wir den vollständigen Namen haben. Ich werde dieses schließen und dann E-Mail-Adresse, vollständiger Name, hier haben wir E-Mail-Adresse und dann Telefonnummer, ich glaube, wir haben die Telefonnummer schon, dann wählen wir einen Service aus. Lassen Sie uns den Teil mit dem Auswahlservice kopieren und wir brauchen diesen Betreff nicht, also ändere ich den Betreff in Selector Service und dort wird Selector Service und der Typ Select angezeigt wird Selector Service und der Typ Auch hier werde ich das Label hinzufügen. Nun, wie wir es zuvor getan haben, fügen wir zuerst Informationen hinzu, fügen einfach die leere Option hinzu und jetzt müssen wir unsere Earl-Services hinzufügen. Wir können unsere Dienste auf der Inhaltsseite finden, gehen wir zum Inhalt Okay, hier haben wir den Inhalt oder hier haben wir die Dienste. Also hier haben wir acht Dienste. Lassen Sie uns einen nach dem anderen kopieren und seitenweise bearbeiten. Ich werde es so kleiner machen. Jetzt kannst du leicht sehen, welche Uhrzeit du kopierst. Hier haben wir also zuerst die pädiatrische Versorgung und fügen sie einfach alle hinzu Jetzt haben wir die Dienste. Gehen wir zum nächsten Feld und das nächste Feld ist bevorzugtes Datum und Uhrzeit, kopieren Sie es und hier werde ich dieses unnötige Zeug entfernen. Das neue Etikett wird hinzugefügt, Datum und Uhrzeit werden vorbereitet. Lassen Sie uns die Anfrage verschieben. Bei Place Solder müssen wir eigentlich dieses Datum-/Uhrzeitfeld erstellen Hier haben wir ein Datumsfeld, das erforderlich sein sollte. Wir haben jedoch kein Datums- und Uhrzeitfeld. Lass es uns zuerst so machen. Wir haben ein bevorzugtes Datum, das bevorzugte Datum ist ein Pflichtfeld, und hier als Platzhalter legen wir nur ein bevorzugtes Datum wie dieses fest, dann duplizieren wir dieses Datumsfeld und ändern es in Zeit, und die Uhrzeit ist nicht erforderlich, diese Uhrzeit ist optional Lassen Sie uns dieses Etikett rechts entfernen und den Platzhalter hinzufügen Der Platzhalter wird so optional sein. Optionale Wörter sind. Zeit ist optional. Eigentlich müssen wir dieses Zeitfeld nicht so machen, also können wir die Uhrzeit hier und das Datum hier so auswählen. Okay, jetzt haben wir ein Datums - und Uhrzeitfeld und dann brauchen wir Nachricht und zusätzlich nein, kopieren es und lassen uns den aktuellen Textbereich bearbeiten, es ist kein Pflichtfeld und dieses Zeitfeld ist kein Pflichtfeld bis Okay, gut. Jetzt müssen wir also die Bezeichnung der Schaltfläche ändern. Also ändern wir es, kopieren Terminanfrage und drücken die Tastenbeschriftung so, und es ist ziemlich gut. Also klicke ich jetzt auf Veröffentlichen. Und hier müssen wir die Überschrift und den Text ändern. Also lassen Sie uns hier die Überschrift kopieren, die Überschrift weitergeben, dann dubligieren und den Absatz so kopieren und diese Typografie in einen Absatz umwandeln Okay. Mal sehen die Größe zwischen Größe 30 ist, dann 20 draus Ich denke, es sollte 2020 sein. Dann müssen wir dieses Bild hinzufügen. Es ist ziemlich einfach. Wir können einfach Bildinhalt von hier kopieren oder einen neuen erstellen. Klicken Sie auf Element hinzufügen und Bild suchen. Und hier platziere das Bild so. Klicken Sie hier und wir können dieses Bild einfach herunterladen. Klicken Sie auf Exportieren und gehen wir zu Tiny PNG in, reduzieren Sie die Dateigröße wie folgt und laden Sie sie herunter. Dann fügen wir das Bild wie folgt hinzu und im Titel für den gesamten Text füge ich eine Terminanfrage hinzu und klicke auf Verbergen Okay Jetzt werde ich hier klicken und dieses Gerätecenter so einrichten Okay, mir geht es gut, und jetzt haben wir die zweite Seite mit der Terminanfrage. Lass es uns in der Rückansicht überprüfen. Okay, ich werde so aussehen, und ich denke, es wäre viel besser, diese beiden Elemente hier hinzuzufügen . Also lass uns das machen. Versuchen wir, diesen hier hinzuzufügen, und diesen auch hier. Lass es uns überprüfen. Das ist viel besser als zuvor. 146. Homepage verlinken: Lassen Sie uns nun unsere WordPress-Website verlinken. Ich gehe zur Startseite und wir sind bereit, den Link zu verlinken und Probleme im Menü zu beheben . Jetzt müssen wir zum Heldenbereich und dem Rest gehen. Ich werde auf Bearbeiten mit dem Element Okay klicken, jetzt haben wir diese Schaltfläche „Einen Termin anfragen“, also klicke ich hier, um zu bearbeiten und gehe zu Stil in Stil, wenn du mit der Maus darüber fährst. Lass uns Hover-Animationen wie Grow hinzufügen Es wird also so wachsen wenn der Besucher mit der Maus über die Schaltfläche fährt, und das ist ein einfaches Design, , wenn der Besucher mit der Maus über die Schaltfläche fährt, und das ist ein einfaches Design, also reicht das aus. Aber wenn Sie die Textfarbe so ändern möchten, können Sie das tun, aber wir werden auf dieser Website nicht tun Okay, jetzt gehe ich zum Inhalt, und zum Inhalt müssen wir diesen Button verlinken. Um das zu tun, können wir einfach die Seiten-URL kopieren und hier einfügen. Um das zu tun, gehe ich zum Dashboard der Website öffne das Dashboard hier. Dann gehe ich zu Seiten in Seiten , kopiere die Terminanfrage, kopiere auch einfach die Linkadresse von diesem U und hier, lass uns sie einfach zu dieser Link-Option hinzufügen, ich werde sie als In neuem Fenster öffnen hinzufügen. Besucher nun auf diese Schaltfläche klickt, öffnet sich ein neues Fenster und es wird die Seite mit der Terminanfrage für heute geöffnet. Okay. Jetzt müssen wir das Learn More UR hinzufügen . Hier ist die A-Zusammenfassung. Das sollte also auf die A-Seite gehen. Da ist auf der Seite, lass uns einen Seitenlink wie diesen kopieren. Dann komm her, Seiten-URL wie diese, und sie wird in einem neuen Fenster geöffnet und hier im Stil müssen wir die H-Animation hinzufügen, damit die Animation wächst und so aussieht. MTO-Anbietern sind wir bereit, hier die URL unseres Anbieters hinzugefügt Wenn also jemand hier klickt, sollte dies an unseren speziellen Anbieterbereich Wir können ganz einfach auf die Website gehen und hier kopiere ich einfach diese URL und füge sie dann so Okay. Nun, auch in einem Stil, wir können unsere Animation hinzufügen wie folgt wachsen. Okay. Jetzt der nächste Abschnitt und hier müssen wir Pop-up hinzufügen. Wenn also jemand auf Profil anzeigen klickt, müssen wir ein Popup hinzufügen und das machen wir in der nächsten Lektion. Und bevor wir das tun, fügen wir weitere Links hinzu. Hier müssen wir also die Anruf-URL hinzufügen, also kopiere ich diese Telefonnummer und klicke auf das Bild, und wenn jemand auf das Bild klickt, wir zu dieser benutzerdefinierten URL, und wenn jemand auf das Bild klickt, öffnet er die Wähltastatur des Geräts. Jetzt müssen wir diese URL hinzufügen. Das wird also die Kontaktseite auf Seiten sein , die uns kopieren und hier fügen Sie sie hinzu, öffnen Sie sie in einem neuen Fenster und vereinbaren Sie einen Besuch, gehen Sie zur Seite „Heute einen Termin anfragen“ und „ Abrechnung“ und fügen Sie den Link so ein und öffnen Sie ihn in einem neuen Fenster. Und für diese Links können wir, wenn wir wollen, die Wachstumsanimation hinzufügen. Es kann sich auf das Design auswirken, aber es wird hinzugefügt und hat möglicherweise keinen großen Einfluss auf das Design Also, was wir jetzt tun müssen, ist auf der Homepage, Earl Good. Jetzt denken wir an Earl, also wenn wir auf diese Links klicken, können wir es in der Aktion sehen. Also werde ich das veröffentlichen. Lassen Sie mich es veröffentlichen und dann überprüfen wir es. Wenn wir also auf diese Heldenschaltfläche klicken , werden wir heute zur Terminanfrage weitergeleitet. Und wenn wir darauf klicken, sollte es zu unserem Anbieterbereich weitergeleitet und wir sollten Maßnahmen gegen dieses Anzeigeprofil ergreifen können. Und wenn wir hier auf dieses klicken, wird es auf der Kontaktseite gelesen und alles funktioniert gut. Fügen wir nun ein Popup zu diesem Link „Profil anzeigen“ hinzu, und wir sehen uns in der nächsten Lektion. 147. Popup erstellen: verwenden, um von Solo- zu Experten-Tarifen Wir können Pop-Up-Builder verwenden, um von Solo- zu Experten-Tarifen überzugehen, aber bei Essential bekommen wir die Pop-Builder-Funktion nicht In unserem Plan haben wir also die Pop-Builder-Funktion, und jetzt werden wir diese Popup-Builder-Funktion hinzufügen Wenn jemand auf dieses Ansichtsprofil klickt , wird ein Pop-up angezeigt , und in diesem Popup finden Sie weitere Informationen zum Anbieter Also lass uns das machen. Zuerst gehe ich zum WordPress-Dashboard und im WordPress-Dashboard in den Vorlagen werden Popups angezeigt. Klicken Sie also auf Popups. Und derzeit haben wir keine Popups, also klicke ich einfach auf Neues Popup hinzufügen, und hier ist der Typ Popup und ich werde den Namen hinzufügen. Dieser Name wird also unser Anbieter sein. Lass es uns wie ein Pop-up hinzufügen. Unser Anbieter öffnet sich und klickt auf Create tem play. Okay, hier haben wir ein paar Pop-Art-Designs, aber lassen Sie uns eines von Grund auf neu entwerfen. Ich werde diesen entfernen. Und hier müssen wir es bearbeiten, also klicke ich auf Plex Box hinzufügen und dann auf die Richtungsspalte. Und hier, wenn ich unter Layout und Abstände zum Layout-Advance gehe , entferne ich all diese Details, und für das Padding fügen wir es wie oben 20, rechts, 20, und die unteren 20 links 20 hinzu, fügen wir den Abstand als 20 hinzu, dann müssen wir die Details hinzufügen Also lass uns das machen. In diesem Fall benötigen wir zuerst das Bild. Also lasst uns hier klicken und Bild suchen und das Bild so hinzufügen, dann lasst uns vorerst ein dummes Bild hinzufügen Also lass uns dieses Bild hinzufügen. Wenn Sie sich erinnern, erstellen wir diesen Bereich für unsere Anbieter verwenden dabei das erweiterte benutzerdefinierte Feld als anderen Posentyp. Wenn wir zum Dashboard und dann zum Dashboard gehen, haben wir diesen Bereich für unsere Anbieter als speziellen Posentyp. Bevor wir diese Informationen hinzufügen, erstellen wir einfach das Design. Also zuerst haben wir dieses Bild und ich werde es so hinzufügen, dann brauchen wir eine Überschrift. In diesem Fall lautet die Überschrift also, ich öffne das Figma-Design Okay, wir können diese Informationen von hier kopieren. Hier haben wir also diesen Titel als erste Überschrift, gehen dann zum Stil über, wechseln zu einem Absatz wie diesem und fügen im Container pro as hinzu. Ich denke, es wird funktionieren. Und lassen Sie uns vorerst einfach das grundlegende Design hinzufügen. Andererseits erstelle ich eine andere Überschrift. Und wenn Sie sich erinnern, füge ich immer an zwei Stellen ein HTML-Tag hinzu, aber das ist keine gute Methode. Im SEO-Teil werde ich mehr erklären, aber lassen Sie uns vorerst Standarddetails hinzufügen. Dann fügen wir hier den Namen Edit wie folgt hinzu, dann wird der Name als Unterüberschrift und die Textfarbe wird diese schwarze Farbe Dann haben wir hier eine kleine Beschreibung, aber wir müssen eine Kreditbeschreibung hinzufügen Wenn wir also zu unseren Anbietern gehen und auf Bearbeiten klicken, reduzieren wir das. Also hier haben wir keine Beschreibung. Im Moment werde ich diesen Text einfach kopieren , weil wir nur den Text benötigen. Jetzt werde ich diesen Abschnitt duplizieren und die Beschreibung wie folgt hinzufügen, und hier werden wir ihn in einen Absatz ändern Okay, jetzt sieht es gut aus, und dann werde ich eine Schaltfläche wie einen Termin anfragen hinzufügen Also lass uns die Schaltfläche tatsächlich von hier kopieren, weil wir sie nicht von Grund auf neu erstellen müssen, nein. Lassen Sie uns also die Startseite bearbeiten und einfach diese Schaltfläche kopieren, die Schaltfläche kopieren, kommen Sie her, drücken Sie die Taste so, dann sieht es so aus. Und machen wir die Taste so voll mit der Taste. Stellen Sie die Position also so gestreckt ein. Ändern Sie dann diesen Text, um eine Anfrage und einen Termin anzufordern. Oder lassen Sie uns einen Anfragetermin vereinbaren, und es sieht gut aus. Und jetzt gehe ich zum Container und passen das Design an, also mache ich es immer noch zu niedrig, vielleicht sind sechs nicht 60, die sechs werden funktionieren. Und wenn wir wollen, können wir weitere Designs hinzufügen, aber im Moment werde ich es so belassen und hier, klicken Sie auf das Bild und lassen Ausrichtung als Mittelpunkt und den Randradius festlegen, machen wir es auf 220. Und lassen Sie uns diese Ausrichtung so ändern, dass sie zentriert ist. Und hier machen wir es bis zwei, und jetzt wird es viel besser. Auch hier wird der Abstand, den die Reihe haben wird, gut sein. Und okay, wenn wir wollen, können wir die sozialen Medien hinzufügen, aber ich denke nicht, dass das gut sein wird. Aber wenn wir wollen, können wir die Social-Media-Links hinzufügen, aber derzeit haben wir keine, also wenn Sie möchten, können wir auch die Kurzbeschreibung hinzufügen, aber ich denke, wir brauchen hier keine Kurzbeschreibung. Nun, das wird der Design-Look sein und wir passen die Popup-Details an. Um die Popup-Größe und andere Dinge zu bearbeiten, klicken Sie einfach auf dieses Setin-Symbol. Ich gehe zur Popup-Einstellung, und hier können wir die Breite ändern, wie wir wollen, aber ich gebe die Breite als 600, vielleicht 680, wird perfekt aussehen und wir können eine Pop-Up-Position wie diese hinzufügen, aber die horizontale und vertikale Mitte ist der beste Ort und lassen Sie uns die Höhe dem Inhalt anpassen, was bedeutet, dass die Höhe je nach Inhalt angepasst wird und wenn wir wollen, wir können es an den Bildschirm anpassen, sodass es ein größeres Pop-up wird. Aber in unserem Fall werde ich es an den Inhalt anpassen und wenn wir wollen, können wir das Overlay verstecken, aber ich denke, das Cabin-Overlay wird hier gut sein, wir haben eine Schließen-Schaltfläche und lassen uns die Schließen-Schaltfläche einblenden und wir brauchen keine Eingangs - oder Ausgangsanimation Wenn Sie möchten, können Sie allgemeine Einstellungen hinzufügen, es gibt nicht viel und in der Vorschau können wir die Vorschau überprüfen, aber im Moment fügen wir nur Standarddaten hinzu, aber in der nächsten Lektion werden wir all diesen Elementen dynamische Tags hinzufügen. Wir haben ein Problem mit dieser Schaltfläche. Wir werden zu diesem Button gehen. Wir werden diese Art von Problem sehen. Lass es uns verschwinden lassen. Um es verschwinden zu lassen, können wir es einfach in der Mitte platzieren und der Inhalt wird zentriert und die Schaltfläche wird kleiner. Gehen Sie jetzt wieder zur Popup-Einstellung und zu einem Stil, wir machen mehr Sachen. Lassen Sie uns also vorerst Randtyp übergeben und der Grenzradius wird zwei sein und es werden kein Box-Schatten und kein Overlay benötigt Ich mag diese Overlay-Farbe, aber wenn wir wollen, können wir einfach die Overlay-Farbe ändern Aber ich denke, die Standardfarbe ist besser, und bei der Schließen-Schaltfläche machen wir die Schließen-Schaltfläche etwas größer Also, was die Größe angeht, lassen Sie uns die Größe 22 wählen, und die Farbe wird blau sein. Und nein, Sie müssen nichts tun. Und wenn wir wollen, können wir die Position ändern, aber ich denke, diese Position ist viel besser Okay. Jetzt auf Advance können wir Timing hinzufügen, aber ich werde dieses Timing überspringen. Und hier haben wir viele Optionen, aber ich werde sie als Standard beibehalten und hier können wir Rand und Padding hinzufügen und auch benutzerdefinierten Code hinzufügen Okay. Jetzt haben wir dieses Pop-up, also werde ich es einfach veröffentlichen und wenn es hier veröffentlicht wird, haben wir drei Tabs. Lass uns eins nach dem anderen gehen. Der erste ist der Zustand. Ich sage, wenden Sie aktuelle Vorlagen auf diese Seiten an. Von hier aus können wir diese Bedingungen hinzufügen. Also klicke ich einfach auf Bedingung hinzufügen und hier können wir sie ein - oder ausschließen. Wenn Sie beispielsweise das Pop-up nicht auf einer bestimmten Seite anzeigen möchten , lassen Sie uns bestimmte Seiten für Seite abrufen. Wir können auf Ausschließen klicken und die gesamte Site auf Singular ändern . Hier können wir die Titelseite auswählen. So wie das Wenn wir dieses Pop-up nur auf der Startseite anzeigen möchten, können wir auch die Option Auf der Titelseite einschließen setzen. In diesem Fall müssen wir dieses Pop-up auf der Titelseite einrichten. Fügen Sie Singular und Titelseite hinzu. Wenn wir dies als gesamte Website hinzufügen, wird dieses Popup auf allen Seiten geöffnet In diesem Fall funktioniert es nicht, da mit der Popup-Schaltfläche die Schaltfläche „ Profil anzeigen “ nur auf der Startseite angezeigt wird . Jetzt haben wir also diese Auslöser. Ich sage, welche Aktion der Benutzer ausführen muss, damit das Popup geöffnet wird. Also hier haben wir verschiedene Möglichkeiten. Wenn wir also das Pop-up beim Besuch eines Ladevorgangs anzeigen möchten, können wir das einfach beim Laden der Seite einschalten und hier können wir Sekunden hinzufügen. Wenn ich also dieses Pop-up nach 5 Sekunden anzeigen möchte , dass ein Benutzer auf unsere Website kommt, kann ich es so hinzufügen, aber ich werde es wissen lassen, und hier haben wir eine weitere Option. Wenn das also auf IsCall ist, können wir das Pop-up hinzufügen, wenn Iscall auf der Website Dann müssen wir zum Element scrollen. Wenn wir das also öffnen, können wir einfach einen Abschnitt mithilfe der CSS-Klasse definieren. Und wenn der Besucher zu diesem Abschnitt scrollt, erscheint das Popup. Also werde ich es bekannt machen und ein Klick bedeutet, dass wir das Popup öffnen können, wenn ein Besucher auf die Website klickt . Wenn wir das also auf drei setzen, also wenn der Benutzer dreimal klickt, also eins , zwei, drei, erscheint dieses Popup beim dritten Mal. Hier haben wir also viel mehr Optionen. Hier haben wir die Erkennung von Werbeblockern. Benutzer verwenden also Werbeblocker, um Werbung auf unserer Website zu blockieren, insbesondere wenn Sie eine WordPress-Blogseite betreiben , die Anzeigenschilder oder andere Anzeigen enthält Sie können feststellen, ob Benutzer den Werbeblocker verwenden, und wenn Sie nicht möchten, dass sie den Werbeblocker verwenden, können Sie ihn einfach aktivieren Okay, jetzt haben wir den Tab „ Erweiterte Regeln“. Hier sind es Anforderungen, die erfüllt werden müssen, damit das Popup geöffnet werden kann. Dieser Fall wird angezeigt, nachdem die X-Seite gewebt wurde. Wenn uns das gehört, können wir die Seitenanzahl hinzufügen , die den Benutzer überprüft Wenn ich zum Beispiel fünf hinzufüge und der Benutzer fünf Seiten besucht, erscheint das Pop-up. Es gibt noch viel mehr Auslöser, aber ich werde nicht alle durchgehen , sondern damit herumspielen. Es gibt supercoole Gegenstände, mit denen wir Popups auslösen und die Aufmerksamkeit des Besuchers auf uns ziehen können. Okay, jetzt gehe ich zur Startseite unserer Website und weise das einer Schaltfläche zu. Derzeit haben wir hier also keine Schaltfläche. Um das zu tun, werde ich einfach einen Button erstellen, um das zu testen, also füge ich den Button hier hinzu, und ich werde den Button-Text so ändern, dass ich weiß nicht so im Stil erscheint , lass uns die Primärfarbe ändern und wir fügen Padin 22 hinzu, um und wir fügen Padin 22 dich besser zu machen und hier müssen wir diesen Link verwenden, um dieses Popup zu machen Klicken Sie unter dem Link auf dynamische Tags und auf dynamische Tags und auf dynamische Tags werden Sie im Aktions-Popup sehen Jetzt können Sie hier klicken und das Aktionsfenster wird geöffnet. Hier können wir nach unserem Popup-Namen suchen, unser Provider-Popup. Klicken Sie darauf, und jetzt werde ich es veröffentlichen. Das heißt , wenn ich auf diese Schaltfläche klicke, sollte dieses Popup erscheinen. Lass uns versuchen, nach unten zu scrollen, scrolle so nach unten. Dann klicke darauf. Wenn ich darauf klicke, ist das Popup gerade erschienen und ich kann das Popup schließen und wenn ich auf Termin anfragen klicke, haben wir diese Schaltfläche für Terminanfragen eigentlich nicht eingerichtet , also lass uns einrichten. Hier sollte das Seite mit der Terminanfrage weitergeleitet werden, sodass ich nur den Titel „ Termin anfragen“ erhalte. Hier ist der Seitentitel für die heutige Terminanfrage. Fügen Sie ihn ein, öffnen wir ihn in einem neuen Fenster und klicken Sie auf Veröffentlichen. Okay, jetzt versuchen wir es noch einmal. Und los geht's. Dann erschien hier das Pop-up, und wenn Sie auf Termin anfragen klicken, wird es auf die Seite mit der heutigen Terminanfrage weitergeleitet, und wir können das Pop-up schließen Okay, das Popup funktioniert gut und ich werde dieses Pop-up entfernen. Und jetzt müssen wir die Button-Aktion diesem Ansichtsprofil zuweisen . Lassen Sie uns das mit Popup einrichten und die Aktion sehen. Vorerst werde ich das veröffentlichen und wir sehen uns in der nächsten Lektion. 148. Dynamische Popups mit Loop Carussell hinzufügen: Hier haben wir ein Problem. Ich habe einfach das erweiterte benutzerdefinierte Feld für dieses Popup eingerichtet und gehe dann zur Popup-Einstellung und zur Vorschau, lege unsere Anbieter fest und klicke auf Anwenden und Vorschau. Es hat gut funktioniert. Aber dann habe ich einfach zum Karussell gegangen und das Pop-up in diesem Ansichtsprofil eingerichtet. Das Ergebnis ist, dass, wenn wir auf den Link klicken, nur diese Art von Popup diesem Ansichtsprofil Ergebnis ist, dass, wenn wir auf den Link klicken, angezeigt Der Inhalt wird nicht in das Pop-up geladen, und das ist ein Problem mit Element und sie haben dieses Problem immer noch nicht gelöst Aber als ich nach der Lösung für dieses Problem suche, habe ich ein Video vom YouTube-Kanal webqudn gefunden, und er hat dieses Problem erfolgreich gelöst Lassen Sie uns dies also auf unseren Bereich für spezielle Anbieter anwenden. Um dieses Problem zu beheben, müssen wir unseren Anbietern ein neues URL-Typfeld hinzufügen und dann müssen wir dort den Popa-Link hinzufügen Also lass uns das machen. Zuerst gehe ich zum erweiterten benutzerdefinierten Feld und in der Feldgruppe haben wir unsere Anbieter. Ich klicke einfach auf Bearbeiten und hier haben wir die Felder, und jetzt brauchen wir ein neues Feld, also klicke ich auf ein Feld und dieser Feldtyp ist Link. Dann füge ich die Feldbeschriftung als Popup-Tinte wie folgt hinzu. Dann klicke ich auf Änderungen speichern und fahren mit dem nächsten Teil fort. Jetzt werde ich wieder hierher zurückkehren . Wir haben nur ein Popup, aber damit das funktioniert, müssen wir individuelle Popups für alle unsere Anbieter erstellen . In diesem Fall müssen wir fünf davon erstellen. Ich werde diese Popups in Anbieternamen umbenennen. Zuerst kopiere ich diesen Anbieternamen und klicke dann auf Details bearbeiten, und hier klicke ich auf Bearbeiten und von hier aus ändere ich dies in den Anbieternamen und klicke einfach auf Aktualisieren und jetzt klicke ich hier auf Mit Element bearbeiten Wir können die erweiterten benutzerdefinierten Felddetails entfernen und als ersten Schritt müssen wir diese Informationen hinzufügen. Derzeit ist hier der Headshot Wählen Sie das Headshot-Bild aus unserer Medienbibliothek aus. Hier ist es, klicken Sie auf Conslate, dann haben wir diese Überschrift, klicken Sie hier und lassen Sie uns die Dynamik entfernen Und füge die Rolle so hinzu. Lass uns die Rolle hinzufügen und dann die nächste, ich glaube, der Name ist, diese entfernen. Fügen wir also den Namen des Arztes oder des Anbieters wie folgt hinzu, und dann den nächsten Namen im nächsten, wir haben die Kreditbeschreibung. Also hier haben wir die Kreditbeschreibung, kopieren Sie sie einfach und fügen Sie sie so ein. Okay. Jetzt haben wir das erste Popup, jetzt klicke ich auf Veröffentlichen. Okay, jetzt ist unser erstes Popup fertig, also gehe ich zurück und gehe dann zum Popup-Fenster. Und von hier aus werde ich das duplizieren. Um es zu duplizieren, klicke ich einfach auf Vorlage exportieren und hier auf Implod-Vorlage und füge die Jason-Datei einfach so ein, klicke dann auf Import und dann auf Weiter Dann klicke ich auf Aktivieren und importieren. Okay, jetzt gehe ich zu Pops und keine Popups werden einfach importiert, und hier ist das Original Hier ist der importierte. Klicken wir also auf Mit Element bearbeiten. Hier, lassen Sie uns diese Details ändern. also in unserem Anbieter Holen wir uns also in unserem Anbieter diesen zweiten und kopieren den Namen. Hier ist der Name. Ändere den Namen. Jetzt ist es einfach, die Rolle so zu gestalten. Dann haben wir die Kreditbeschreibung, kopieren Sie die Kreditbeschreibung. Geben Sie hier die Kreditbeschreibung ein. Dann überprüfe den Headshot und lass uns hierher gehen. Dann ändere das Foto auf Doktor Carlos. Ich glaube, es ist Doktor Carlos. Ja, wähle es so aus. Okay. Jetzt klicke ich auf Veröffentlichen und dann auf Bedingungen Fügen wir Singular und hier die Titelseite Klicken Sie auf Speichern und schließen. Okay, jetzt ist es veröffentlicht. Und jetzt haben wir hier zwei Pop-Ups. Mal sehen, ja. Hier haben wir zwei Pop-Ups. Eigentlich müssen wir den Titel ändern. Ich habe vergessen, den Titel zu ändern. Lass uns auf Bearbeiten klicken und es so einfügen. Dann klicken Sie auf Update. Okay, jetzt haben wir zwei separate Popups. Jetzt müssen wir nur noch die Pow-up-Knopf hinzufügen. Lass uns auf die Startseite gehen. Klicken Sie nun mit 112 auf Bearbeiten. Jetzt müssen wir nur noch eine Schaltfläche hinzufügen. Ich werde einfach einen Button wie diesen machen und der Button hat ein gewisses Design, klicken Sie hier. Lass uns hier klicken und auf den Link klicken, wir müssen das als Pop-up einrichten, das Popup auswählen und dann das Ohr-Popup, wir müssen den Namen des Arztes suchen. Also ich glaube, wir haben die Ärztin Lisa. Also geben wir DR ein und wir haben das Pop-up von Doktor Lisa. Also werde ich diesen Text jetzt in DR Lisa ändern. Und wieder werde ich diese Schaltfläche duplizieren. Lassen Sie uns einen Container erstellen und diese Artikel zum Container hinzufügen , ohne nur mit unserer Website herumzuspielen Ich werde einen neuen Container wie diesen erstellen, und dann lass uns die Schaltfläche hinzufügen, und hier werde ich entfernen, ich werde schon Nein, hier werde ich diese Schaltfläche entfernen, und okay, hier fügen wir das Popup hinzu, es funktioniert, also jetzt muss ich diese Schaltfläche zum zweiten Mal duplizieren und wir können es einfach tun, wenn der Container Richtung als Pflaumenlücke plus zwei ist . Wir können es deutlich sehen. Also jetzt müssen wir den zweiten für Pally hier besorgen und auf der Welt das in DR Garlos ändern und dann den Namen ändern in uh Okay, jetzt muss ich das veröffentlichen und auf Vorschau klicken Jetzt gehe ich runter und wenn ich hier klicke, erscheint der von Doktor Lisa, und wenn ich hier klicke, erscheint und wenn ich hier klicke, der Arzt Carlos Propyle so Jetzt müssen wir mit der rechten Maustaste klicken und auf Linkadresse kopieren klicken Wenn ich dann diese Linkadresse in die URL einfüge, sehen wir diese Art von Linkadresse Lassen Sie uns einen Texteditor öffnen, Online-Texteditor wie diesen, dann und dann füge ich Text ein. In diesem Text erhalten wir also nur diesen Text von diesem Hashtag-Element. Kopieren Sie diesen Teil und gehen Sie hier zu unseren Anbietern, unseren Anbietern und Anbietern. Wir wählen es einfach von Doktor Lisa aus, also lassen Sie uns es bearbeiten und auf dem Popup-Link nach unten scrollen. Ich werde die URL einfach so einfügen. Okay. Jetzt klicke ich auf Speichern und lass uns zurückgehen Das sollte gespeichert werden. Es spart. Okay, es ist gespeichert, und dann gehe ich und hier gehen wir zum Profil von Doktor Carlos und von hier aus kopiere richtigerweise Linkkleid, Leertaste im Texteditor und kopiere den Link auf diesen Pop-Link, füge einfach die URA wie folgt hinzu. Okay, jetzt speichern wir auch diesen. Lassen Sie uns vorerst nur diese beiden Elemente hinzufügen. Okay, jetzt müssen wir nur noch einen Blick auf werfen unsere dedizierten Anbieter werfen und auf Temp bearbeiten klicken Okay. Jetzt entferne ich in diesem Ansichtsprofil diesen Link-Popup-Teil und füge beim dynamischen Tag einen Kurzcode hinzu. Dann können wir hier einen Kurzcode hinzufügen. Dieser Shortcode sollte also das Shortcode-Tag unseres Popup-Links sein. Wenn wir also zur Gruppe gehen, gehen wir zum Dashboard und hier zur erweiterten Feldgruppe für benutzerdefinierte Felder, und hier haben wir unsere Anbieterfelder, klicken Sie darauf und hier haben wir den Popup-Link. Das ist also der Name dieses Feldes, kopiere es und kehre zu unserer speziellen Vorlage zurück und füge hier Klammern hinzu: ACF-Feld, gleicher Doppelcode und der Popup-Link Also, was passiert ist, wenn diese Details mit unserem Provider-Sohn gefüllt werden, wird diese URL auch mit dem Popup-Link gefüllt, und wenn wir darauf klicken, erscheint das Popup, das sich auf diesen Anbieter bezieht Probieren wir es aus, klicken Sie auf Veröffentlichen und gehen wir nun zu unserer Homepage und zu unserem Anbieterbereich. Okay, wenn ich darauf klicke, passiert nichts und wir verpassen einen Teil oder wir haben einen Teil nicht richtig gemacht. Gehen wir also zu unserer erweiterten Feldgruppe und hier zu unseren Anbieterfeldern und klicken Sie auf Bearbeiten. Dann werde ich es in diesem Popup-Link so ändern, dass der Rückgabewert in Ink-Array ist, aber es sollte in LinkRL sein, ich werde mit LinkRL einrichten und jetzt auf Änderungen speichern klicken Und jetzt lass uns diese Seite unterdrücken. Lass uns sehen. Lass uns sehen. Mir passiert immer noch nichts. Okay, versuchen wir es noch einmal, aber dieses Mal passiert nichts. Wir können also eine Vorschau des Elements anzeigen, das wir diesem Ort hinzugefügt haben. Um das zu tun, gehe ich zu unserem speziellen Anbieterbereich. Dann fügen wir eine neue Überschrift wie diese hinzu und machen daraus einen Absatz und ändern die Farbe in diese schwarze Farbe Okay. Also hier, was ich machen werde, ist nur die Kurzvorwahl und die Kurzvorwahl wird die Kurznummer sein , die wir hier hinzugefügt haben. Also lasst uns diesen Shortcode kopieren. Das hier, füge es so ein. Okay. Klicken Sie jetzt auf Veröffentlichen und sehen Sie, was passieren wird. Drücken Sie die Seite erneut. Nein, nicht dieser Unterdrücke diesen. Und los geht's, der ACF-Shortcode ist nebenbei deaktiviert Okay, jetzt haben wir dieses Problem, also müssen wir den ACF-Shortcode aktivieren Ich werde nur den Shortcode aktivieren, wir können einfach diesen PHP-Code verwenden und ich werde dir zeigen, wie Ich gehe so zum WordPress-Dashboard und zu Plugins Klicken wir auf Neues Plugin hinzufügen. Wir werden ein neues Plugin hinzufügen, also wird dieser Plugin-Name WP-Code sein. Dieses Plugin ist mit unserer Version kompatibel Klicken Sie auf Jetzt installieren, Installieren in und dann auf Activate Nice. Hier ist das Plugin, also werde ich auf Code is NB klicken und derzeit haben wir kein Enable Nibbt, also werden wir nach PHP suchen und wir haben nur PHP, aber es ist deaktiviert Also lass uns auf Neu hinzufügen klicken. Okay, hier haben wir eine Menge kostenlos gebauter Nibbt, aber wir brauchen diese Stubs nicht In diesem Fall werden wir also unser eigenes Snibit erstellen, klicken Sie bei CustomNBT darauf Und hier müssen wir den Typ auswählen, also unser Typ ist PH-Skript und hier füge ich einfach den Code ein, von dem wir ihn kopieren , und Sie können Ressourcenbereich nachschauen, um diesen Code zu erhalten, und hier füge ich Dieser Titel wird also den ACF-Kurzcode aktivieren. Dann machen Sie es hier zu einem beliebigen Gerät und behalten Sie alle Details als Standard bei und klicken Sie auf Snibit speichern und es ist immer noch inaktiv, klicken Sie einfach auf Es ist Update und dann gehen wir zu Websites. Stellen Sie also sicher, dass Sie diesen Code korrekt hinzufügen, denn wenn Sie diesen Code falsch hinzufügen, wird das S beschädigt. Okay, schauen wir uns jetzt die Homepage an und sehen, was passiert. 149. Dynamische Popups ohne Problem beheben: Es scheint, dass der im ACF-Dokument bereitgestellte Code aus irgendeinem Grund nicht funktioniert, und wir haben neuen Code Ich füge einfach den Code hinzu und klicke einfach auf Aktualisieren und Sie werden diesen Code im Ressourcenbereich sehen diesen Code im Ressourcenbereich Lassen Sie uns nun die Website in Aktion sehen. Okay, klicken Sie auf unsere Anbieter und hier haben wir die Details. Wenn Sie auf das Symbol klicken, wird es so angezeigt, da diese URL einen Kurzcode hinzugefügt hat. Gehen wir nun zur Bearbeitung mit Elementor und wir benötigen diesen URL-Teil nicht, also entfernen wir ihn Klicken Sie auf Vorlage bearbeiten, und hier benötigen wir diesen Text nicht, also wähle ich ihn einfach hier aus und klicke auf Löschen und dann hier. Dann haben wir einfach den Kurzcode hinzugefügt und es funktioniert. Jetzt klicke ich auf Veröffentlichen und dann müssen wir Popa für den Rest unserer Anbieter erstellen Popa für den Rest unserer Anbieter Hier haben wir etwas falsch verstanden. Also lass es uns wiedergutmachen. Also sagte Doktor Carla Doktor Lisa. Kopieren Sie einfach die Adresse der Ärztin Lisa und gehen Sie hierher und fügen Sie sie dann ein Nein. Füge es einfach so ein und kopiere dann diesen Teil. Und im Dashboard gehen wir zu unseren Anbietern, unseren Anbietern, und bei Doktor Lisa füge ich versehentlich die URL von Doktor Carlos hinzu. Ich glaube, das war das Problem, das passiert ist, also entfernen wir dieses und klicken auf Concilateink unter dem Link und dann auf Link und Gehen wir dann zum Design und sehen wir es uns in der Aktion an. Los geht's hier und hier, es funktioniert jetzt. Okay, jetzt machen wir das für den Rest unserer Anbieterprofile. Also müssen wir zuerst die Popups erstellen und dann Popups erstellen. Ich werde diese unnötigen Tabs entfernen , weil wir sie jetzt nicht benötigen. Und okay, hier, klicken Sie einfach auf Vorlage exportieren. Eigentlich haben wir die Vorlage bereits exportiert. Wie auch immer, klicken Sie auf Vorlagen importieren und fügen Sie die Vorlage wie folgt hinzu. Fahren Sie fort, und wir müssen es noch zweimal wiederholen . Noch einmal, bitte fahren Sie fort. Und jetzt gehen wir hier zu Pop-Ups auf Pop-Ups, wir haben Doktor Lisa, Doktor Carlos, und dann lassen Sie uns diesen bearbeiten. Diese wird Emma sein. Und lass uns drei davon öffnen. Und hier haben wir die Daten der Ärztin Emma und es erscheint ein Pop-up. Okay, hier kopiere ich den Namen und klicke auf Mit Elemento bearbeiten Eigentlich müssen wir aktualisieren, nachdem wir den Namen geändert haben, dann auf Mit Elemento bearbeiten klicken und es ist bei Doktor Emmas Daten Hier geladen, der Name wird geändert und die Rolle und die Kreditbeschreibung Okay, jetzt das Bild Schauen wir uns das Bild an. Okay. Okay. Klicken Sie jetzt Conslate, klicken Sie auf Veröffentlichen und speichern und schließen Dann gehen wir zurück und sehen uns das nächste Im Pop-up gehen wir los, klicken auf Bearbeiten und dann haben wir Doktor Michel, es ist Update Wir können das Element bearbeiten oder zuerst den Namen ändern und dann die Beschreibung des Kredits ändern. Violoncello, Michael. Ich glaube, es ist Michael, jedenfalls nicht Michel. Lass uns das Bild hinzufügen. Okay, gut. Klicken Sie auf Veröffentlichen und dann auf Speichern und schließen. Geh zurück. Und die letzte ist Sara Sara Sara. Fügen Sie also die Namen hinzu, aktualisieren Sie sie, klicken Sie dann auf Mit Elemento bearbeiten und dann fügen wir diese Details Ändern Sie zuerst den Namen dieser einen Kreditbeschreibung und dann das Bild Wenn wir 20 Anbieter haben, müssen wir dies 20 Mal aktualisieren Das ist nicht der beste Weg, das zu tun, aber wir müssen es tun, weil die erweiterten benutzerdefinierten Felder, die nicht mit dem Loop-Karussell funktionieren , tatsächlich dynamische Loop-Carsel-Tags und die Popups für erweiterte benutzerdefinierte Felder nicht funktionieren Zusammen mit dem Element oder den Popups auf Loop-Prosel, die dynamischen Inhalt haben , funktionieren sie nicht automatisch, wir müssen sie Okay. Jetzt haben wir Anbieter-Popups für die Anbieter. Gehen wir also auf die Homepage. Jetzt ist es an der Zeit die URL zu kopieren um die URL zu kopieren, klicke auf Bearbeiten mit Elementor und hier ändere einfach Doktor Lisa Eigentlich brauchen wir hier jetzt keinen Titel, lass uns suchen, lass uns unseren Anbieter Emma sehen Dann hier mit der rechten Maustaste klicken, eigentlich müssen wir den Titel in ma ändern und den Titel hinzufügen, dann müssen wir den zweiten hinzufügen, den Mich. Dann nochmal, duplizieren Sie das zweimal, glaube ich, zweimal oder einmal. Wir haben also diesen einen letzten Anbieter, und hier gibt es einen Namen wie diesen. Okay, jetzt klicke ich auf Veröffentlichen und es ist Zeit, die URL zu bekommen. Also zuerst haben wir Malik, kopieren die Linkadresse, die Fasink-Adresse hier und kopieren sie so Dann bearbeitet die Ema die Akte von Emma. hier im Popup-Link unter der URL wie dieser Klicken Sie hier im Popup-Link unter der URL wie dieser auf eine URL und dann auf Speichern. Okay. Geh zurück. Und dann haben wir Doktor Mike, hier ist Michaels URL, kopiere die Link-Adresse und bei einem Link wie diesem, dann klicke auf Speichern Dann haben wir die Adresse von Doktor Sara Oink, gehen hierher und kopieren die URL, dann gehen wir zurück und wir gehen zum letzten Link speichern, dann brauchen wir diesen Abschnitt nicht, ich werde ihn einfach entfernen und auf Veröffentlichen klicken und lass uns die Website besuchen Also, unsere Anbieter, sehen wir uns das Pop-up an. Wir haben ein Problem. Wenn wir also versuchen, das Pop-up zu öffnen, öffnet es sich nicht, und ich kenne den Grund. Gehen wir also zur Umkehrung der Dashboard-Vorlage unter Vorlage, wir haben Popups Also hier, lassen Sie uns dieses Sara Thompson-Popup öffnen und lassen Sie uns alle öffnen. Wir müssen sie alle öffnen und als Einstellung, okay, ich speichere Optionen, können wir den Anzeigezustand sehen. Im Anzeigezustand machen wir es einfach leer, aber wir müssen eine Bedingung wie diese hinzufügen, also müssen wir die gesamte Site einbeziehen, oder wir können sie für Singular oder Singular hinzufügen, aber ich mache daraus die gesamte Site und klicke auf Änderungen speichern Okay, dann mache ich das für den Rest der Popups wie dieses Okay, was wir jetzt tun müssen, ist die Website zu überprüfen. Lassen Sie uns das überprüfen, fordern Sie die Seite und jetzt sollte es funktionieren. Ja, jetzt funktioniert es. Siehst du? Also das ist ein kleines Problem , das wir lösen müssen. Sieht jetzt gut aus. 150. Fußzeile funktionsfähig machen: Okay, die Homepage ist jetzt fertig und in der Fußzeile müssen wir einige Änderungen vornehmen Die Schaltflächen oder diese Social-Media-Symbole funktionieren nicht und wir müssen weitere Quicklinks hinzufügen, und hier müssen wir Aktionen zu diesen Telefonnummern und E-Mail-Adressen hinzufügen Lass uns das machen. Um das zu tun, müssen wir die Fußzeile bearbeiten Wenn ich also den Mauszeiger über diese Bearbeitung mit dem Element oder wenn wir hier die Hauptkopfzeile und die Hauptfußzeile haben, wähle ich die Hauptfußzeile aus. In Ordnung. Dann müssen wir hier einen Link zu diesem Social-Media-Symbol hinzufügen . Ich klicke hier. Und hier wird die Liste der Social-Media-Symbole geladen und derzeit haben wir kein Social-Media-Profil für JB Family Clinic, also füge ich einfach die URL der Website wie hier, Facebook, URL hinzu und klicke auf Link-Option und stelle sicher, dass sie in einem neuen Fenster und hier Twitter geöffnet wird URL hinzu und klicke auf Link-Option und sicher, dass sie in einem neuen Fenster und hier Twitter geöffnet Ich werde einfach HTTP, scall und slashlashx.com hinzufügen, und dann haben wir hier LinkedIn. Ich werde einfach HTTP call und slashlas linkedin.com.com dann haben wir hier LinkedIn. Ich werde einfach HTTP call und slashlas linkedin.com.com hinzufügen. Eigentlich sollte das Punkt sein, so wie hier. Und endlich haben wir Instagram. Instagram, los geht's. Dann gut. Jetzt fügen wir einfach einen Link zu den sozialen Medien und auf Quickink haben wir gerade das Hauptmenü hinzugefügt, aber lassen Sie uns ein anderes Menü für Lebensmittel erstellen und den Puta-Link hinzufügen Um das zu tun, klicke ich auf diesen Menübildschirm und das Menü wird in einem neuen Fenster geöffnet Und hier klicke ich auf Neues Menü erstellen und von hier aus füge ich ein Puta-Menü Klicken Sie dann auf Create Meno und legen Sie keinen Anzeigeort oder Dann klicke ich in Seiten auf EL ansehen und hier brauchen wir Titelseite über Kontakt, Block, Anfrage, Termin Fügen wir all diese Elemente und hier müssen wir den Titel ändern. In der Navigationsleiste mache ich den ersten Eintrag für Zuhause, der zweite für „Über uns und der dritte für einen Kontakt, und hier wird dieser gesperrt und der dritte wird ein Termin wie dieser angefragt. Jetzt klicke ich auf Samno und dann hier, ich werde die aktuellen Änderungen veröffentlichen und ich muss diese Seite neu laden, um dieses Menü zu laden Lass uns die Seite aktualisieren. Okay. Klicken wir auf das Menü, um es zu bearbeiten, und hier haben wir jetzt die Vollzeit-Menüoption Wählen Sie sie aus und das vollständige Menü wird so angezeigt . Außerdem müssen wir diesem wöchentlichen Abschnitt die URL für Nutzungsbedingungen und Datenschutzbestimmungen hinzufügen URL für Nutzungsbedingungen und Datenschutzbestimmungen , und ich werde das bei zukünftigen Videos tun jetzt am Telefon, wie wir es zuvor getan haben, Wenn jetzt am Telefon, wie wir es zuvor getan haben, jemand, der auf diesen Telefontext klickt, sollte er oder sie die Telefonwahl-Modeerscheinung öffnen Dazu kopiere ich zuerst die Nummer und füge dann einfach tell fallen und lass uns die Nummer wie folgt hinzufügen Das ist eine falsche Nummer. Sie sollten in Ihrem Fall eine reelle Zahl wie folgt hinzufügen . Okay. Fügen Sie einfach Tell hinzu und rufen Sie den ersten Text auf dem Link an. Okay, jetzt müssen wir zur E-Mail gehen, die E-Mail kopieren. Jetzt suche ich bei Google nur noch nach dem HDL-Code der E-Mail und nach keinem E-Mail-Link Der E-Mail-Link, der dM-Code, wird auch per E-Mail gesendet. Also kopiere ich es einfach und komme her, füge es so ein dann die E-Mail Okay. Öffne es neues Fenster, jetzt klicke ich auf Veröffentlichen und für Adresse und Öffnungszeiten ist es gut, und jetzt müssen wir den Copyright-Bereich ändern. Im Copyright-Bereich, hier und danach, werde ich einfach beim Ancha-Tag den Link AHF HREF equal setzen und die Klammer schließen, dann in Hf werde ich auf die Homepage-URL unserer Website wie folgt , sie einfügen, und am Ende werde ich einfach das A-Tag schließen wie Okay, jetzt wird es einfach URS, also wenn jemand hier klickt, wird es auf die Homepage weitergeleitet. Klicken Sie nun auf Veröffentlichen. Und wenn Sie möchten, können wir das Slash Design mit der zweiten URL unserer Unternehmenswebsite hinzufügen , aber in diesem Fall füge ich es einfach so hinzu und nett, die Fußzeile ist bereit zum Ansehen Lassen Sie uns also sehen, wie es weitergeht. Wenn wir also auf diesen Link klicken, wird er zum Social-Media-Konto und zu Nice weitergeleitet. Gehen wir also zur nächsten Seite über. 151. Machen Sie die Website reaktionsfreudig: Jetzt müssen wir hier die A-Seite reparieren. Ich werde auf Mit Elementor bearbeiten klicken und wenn wir jetzt das Design hier überprüfen, haben wir eine Schaltfläche, also werde ich auf Bearbeiten klicken und es sollte zur Seite mit der Terminanfrage gehen Ich öffne die Wordpress-Dash-Seiten, L-Seiten hier, kopiere die URL auf der Seite mit der Anfrage zur Bestätigung heute und einfach die URL und verlinkte Option adt als In neuem Fenster öffnen ein, und das war's, dann müssen wir die Website für Mobilgeräte anpassen. Fangen wir also von oben an. Also hier, es sieht auf der Tablet-Version gut aus. Der Grund dafür ist, dass wir bereits den Homepage-Bereich verwenden , um dies zu gestalten. Hier können wir dieser Schaltfläche jedoch etwas Platz hinzufügen. Wählen wir also die Schaltfläche aus und im Voraus werde ich das Minuszeichen entfernen. Ja. Wenn ich das Minus-Top entferne, sieht es gut aus, füge vielleicht minus zehn hinzu. Okay, jetzt ist es viel besser und hier ist gut. Und hier werde ich auf dieses Grid und auf Grid klicken. Lass uns das als eine Spalte auf Mobilgeräten wie diese machen und nicht als mobile, eine Spalte in der Tablet-Ansicht, und jetzt sieht es gut aus, richtig. Und in der Fußzeile ist alles gut, aber wir haben einige Dinge zu bearbeiten in der Fußzeile Lassen Sie uns das veröffentlichen und gehen wir zur Hauptfußzeile und klicken wir in der Hauptfußzeile auf das Tablet und hier machen wir dieses URL-Ausrichtungszentrum wir A hier, richte es in der Mitte aus. Aus irgendeinem Grund ist dieser Text nicht richtig ausgerichtet, aber ich denke, es ist besser, die Ausrichtung zu starten. Und von hier aus ändern wir die Typografie. Die Button-Typografie sollte auf der Tablet-Version etwas kleiner sein. Klicken wir also hier, um zu Global Phone zu gelangen, und auf Globalfon fügen wir die Tastengröße wie 18 hinzu Speichern Sie die Änderungen. In Ordnung, klicken Sie hier, um zurück zu gehen, schließen Sie dieses Fenster, um zu speichern und los geht's jetzt, es ist viel besser als zuvor. Und hier müssen wir die Polsterung und den Rand entfernen und es sieht jetzt gut aus Vielleicht fügen wir die rechte Polsterung als 30 und die linke Polsterung als 30 hinzu Okay. Jetzt sieht es auf dem Tablet gut aus, und jetzt gehen wir wieder zur Info-Seite , auf die wir gehen müssen, und hier auf Über uns, dann klicken wir auf Mit Elementor bearbeiten Dann sieht die Tablet-Ansicht besser aus. Dann gehen wir zur mobilen Ansicht. der mobilen Ansicht ist der Header in Ordnung. Geh, geh zurück. der mobilen Ansicht sieht die Kopfzeile gut aus, und hier haben wir den Kopfzeilentext und den Hintergrundtext. Wenn wir wollen, können wir ein anderes Bild hinzufügen, anderes Hintergrundbild, weil dieses Bild es nicht richtig zeigt, aber ich denke, ich werde es so lassen, weil es korrekt sichtbar ist und hier aussieht, also sieht es gut aus. In der Fußzeile sieht es gut aus. Also nichts zu bearbeiten in der mobilen Ansicht, also ich werde es tun, wird tatsächlich veröffentlicht Gehen wir jetzt zum nächsten Abschnitt. Gehen Sie also zuerst zur Startseite und dann haben wir jetzt die Block-Seite. Klicken Sie auf der Seite Blockieren auf Mit Element bearbeiten und dann schauen wir, ob wir irgendwelche Änderungen vornehmen müssen, soweit so gut. Jetzt gehe ich zum Tablet im Tablet, wir müssen einige Änderungen vornehmen. Also klicken Sie hier und auf diese rechte und linke Polsterung, wir sollten sie so ändern, dass 30 mal 30 zu groß ist Vielleicht machen wir es 20 mal 20. Ja, 20 mal 20 wird gut aussehen. Ich denke, es sollte 30 mal 30, 30 mal 30 sein. Ja. Als ich es 30 mal 30 gemacht habe, war die Ausrichtung korrekt und der Rest ist okay, also kann ich es jetzt auf dem Handy überprüfen. Schauen wir uns also die mobile Ansicht an, und auf dem Handy sieht sie großartig aus. Wir müssen nichts tun. Tatsächlich können wir die Polstergröße ändern. Die Polsterung wird 15 mal 15 sein. Ja, das Muster ist 15 mal 15. Okay. Klicken Sie nun auf Veröffentlichen und dann müssen wir den einzelnen Blockbeitrag bearbeiten. Gehen wir zu einem dieser Blöcke wie diesem und wir müssen das Design dieser Blockseite bearbeiten. Um das zu tun, haben wir hier das Element eines einzelnen Beitrags oder wir können einfach zu den Vorlagen oder dem Teambuilder in der Vorlage gehen Vorlagen oder dem Teambuilder in und dann hier den einzelnen Beitrag überprüfen, und das ist der Beitrag. Also klicken Sie jetzt auf Hinzufügen. In Ordnung. Sehen wir uns jetzt die Tablet-Vorschau auf dem Tablet an. Wir müssen die beiden ändern. Der Header sieht gut aus. Ändern Sie das jetzt auf 30 mal 30, und der Rest sieht okay aus. Und auch hier müssen wir 30 mal 30 so machen. Eigentlich müssen wir es auf dem Handy auf dem Tablet nicht 30 mal 30 machen , und jetzt sieht es gut aus. Gehen wir jetzt zum Handy. Das Handy wird so aussehen. Und hier müssen wir das auf 15 bis 15 ändern. Der Behälter sollte so eingestellt sein die Paddins 15, rechts und 15 Okay. Klicken Sie nun auf Veröffentlichen. Okay, jetzt gehen wir zur nächsten Seite. Die nächste Seite ist Vermeiden. Eigentlich ist unsere ID keine Seite. Es ist dieser Bereich und auf der Homepage sind wir bereit, ihn für Mobilgeräte geeignet zu machen, und jetzt müssen wir Kontakt aufnehmen. Klicken Sie unter Kontakt auf Bearbeitetes Element Okay, jetzt gehen wir hier zum Design. Wir haben alle Details, und jetzt können wir auf dieses Bild klicken und auf dem Bild können wir eine benutzerdefinierte URL und diese Nummer hinzufügen. Kopieren Sie die Nummer hier. Das wird Schwanz, Code und so sein. Ordnung. Plus. Also, wie ich schon sagte, das ist eine Seitenzahl. Also denk nicht darüber nach. Oder wenn Sie die Nummer hinzufügen, fügen Sie sie mit der Landesvorwahl hinzu. In meinem Fall sollte es plus 94 sein. Und hier, jetzt muss ich zum Tablet PortraTV gehen und es ändern Der Header sieht gut aus, und hier müssen wir ändern, dass die Höhe 30 und links 30 sein wird Eigentlich sieht es nicht gut aus. Was wir tun können, ist, den Take hier kleiner zu machen. Also lass uns 21 draus machen. Ja, 25, 25 werden in Ordnung sein. Jetzt sieht es okay aus. Dann machen wir das auf der Karte auf 30 mal 30. Okay. Jetzt sieht das Portrait des Tablets gut aus. Jetzt wechseln wir zum Handy. Auf dem Handy können wir das hier 15 mal 15 machen und dann können wir hier etwas Platz hinzufügen , also fügen wir Margin Top Pass 30 hinzu. Ja, wir brauchen dort Platz wie diesen. Okay. Nun, wenn wir wollen, können wir diesen Knopf mittig machen. Lass uns den Knopf machen. Gehen wir zum Button-Stil über den Button-Stil. Hier haben wir das Positionszentrum. Okay, jetzt ist es viel besser, und hier können wir rechts auf 15 und links auf 15 ändern. Okay. Sieht gut aus. Jetzt klicke ich auf Veröffentlichen und dann müssen wir diese neue Eröffnung bearbeiten, ja, die Anfrage zu einer Terminseite bearbeiten. Klickt auf die Seite und lasst uns auf Mit Element bearbeiten oder Okay klicken . Alles sieht gut aus und klicke auf Tablet-Port rea und hier Agod und hier drin, lass uns das rechts als 30, links als 30 machen Okay, sieht gut aus. Dann ja, wir haben nur einen Abschnitt. Dann fahren wir auf dem Handy mit 15 nach rechts und mit 15 nach links. Okay. Veröffentlichen Sie es. Und auf dem Handy wird das Menü nicht angezeigt. Okay. Also lass uns auf die Fußzeile und hier auf das Handy klicken. Nein, machen wir es zum Mittelpunkt. Die Ausrichtung wird gesendet. Okay. Wenn wir es zum Alignment Center machen, sieht das gut aus. Also jetzt veröffentlichen. Okay, veröffentliche es und 152. Kontaktformular einrichten: Hallo, alle zusammen. Jetzt ist es an der Zeit, diesem Kontaktformular eine Aktion hinzuzufügen. Wenn wir also derzeit nur auf Senden klicken, müssen wir das Formular ausfüllen. Es wird nichts passieren, weil wir das nicht eingerichtet Deshalb klicke ich jetzt auf Mit Elementor bearbeiten In Elemento Pro haben wir eine Kontaktformularfunktion. Wenn das also ein kostenloses Element wäre, müssten wir ein anderes Plugin wie Contact Form Seven oder W Form verwenden Contact Form Seven oder W Form Also klicke ich jetzt auf Kontaktformular bearbeiten, um das zu bearbeiten. Okay, hier sind Formularfelder und wir haben diese Formularfelder korrekt eingerichtet, und jetzt haben wir die Aktion nach dem Absenden. Also lass uns eins nach dem anderen gehen. Also die Schaltfläche, wir haben die Schaltfläche bereits eingerichtet, und dann haben wir diese Aktion nach dem Absenden. Also hier haben wir einen Schritt , den wir tun können. Also, wenn ich sie einfach alle entferne, lassen wir sie alle. Also, wenn ich die Aktion hinzufügen möchte, klicke ich auf dieses Plus-Symbol. Im Plus-Symbol haben wir die Option „Einreichung sammeln“. Wenn wir nur diese Option auswählen und wenn jemand seine Daten in dieses Kontaktformular einträgt, können wir diese Einsendungen sammeln. Um sie zu sammeln, kann ich zum Dashboard gehen. In Elementor haben wir hier einen Bereich für Einreichungen und von hier aus können wir die Einreichung sehen Derzeit haben wir einen von ihnen. Es scheint sich um einen Spam Wir können einen Beitrag aus dieser Tabelle aufnehmen oder sammeln und für weitere Informationen können wir sehen, woher er stammt. Und wir können klicken, um uns den Inhalt anzusehen. Das ist nur ein gefälschter Code. Dies ist nur eine IPAM-Einreichung und ich werde Ihnen zeigen, wie Sie diese IPAM-zwei verhindern Jetzt kam es von dieser E-Mail. Jetzt gehe ich zurück und hier haben wir mehr Optionen. Wir haben die Option E-Mail und E-Mail an. Wenn wir diese E-Mail-Option auswählen, können wir die Formulardetails abrufen. Wenn jemand diese Formulardetails ausfüllt, können wir eine E-Mail an unser E-Mail-Postfach erhalten, und auch per E-Mail können wir eine E-Mail an die Person oder den Besucher senden , die dieses Formular ausgefüllt haben. Fügen wir also diese Informationen hinzu. Bei der Übermittlung der Daten können wir auch die Benutzer-IP und den Benutzeragenten abrufen. Schauen Sie hier nach, wir können hier Benutzer IV sehen und der Benutzeragent ist diese Information. Lassen Sie uns den gesamten E-Mail-Prozess abschließen und testen. Zuerst haben wir einen E-Mail-Bereich. Wenn wir hier E-Mail auswählen, können wir diesen E-Mail-Bereich sehen und hier werde ich ihn einfach entfernen und hier können wir die beiden E-Mails erwähnen, was bedeutet, dass wir die E-Mail angeben können , die wir benötigen, um diese E-Mails von der Website zu erhalten, und hier können wir einen Betreff hinzufügen. Also werde ich den gleichen Betreff behalten . Es ist also wie eine neue Nachricht von JB Family Clinic und hier fügen wir Earl-Felder hinzu, was bedeutet, dass ich diese Felder zur Nachricht der E-Mail hinzufügen werde zur Nachricht der E-Mail hinzufügen Und dann können wir hier per E-Mail weitermachen. Ich zeige Ihnen, wie Sie mit unserem E-Mail-Konto E-Mails erstellen können. Von E-Mail bedeutet die E-Mail, die E-Mails an die Besucher sendet, oder unser E-Mail-Postfach. Hier können wir den Absendernamen hinzufügen Behalten Sie also einfach die Standarddetails bei und Sie können alle diese Details ändern und hier können wir eine Antwort auf E-Mail hinzufügen. Derzeit haben wir keine Antwort auf E-Mails. der E-Mail-Antwort wähle ich das E-Mail-Feld aus und wenn wir möchten, können wir Carbon Copy OCC und BCC hinzufügen Wir brauchen keinen von ihnen. Und zu den Metadaten können wir diese Details auch hinzufügen. Ich werde sie alle hinzufügen. Jetzt ist unsere E-Mail vollständig. Dann haben wir E-Mail zwei. Senden Sie eine E-Mail an zwei Männer, die glauben, dass Besucher uns eine E-Mail senden. Als Inhaber der Website werden wir diese E-Mail erhalten. Wir haben also all diese Informationen und können automatische Antwortnachricht senden , wenn der Besucher auf die Schaltfläche „Senden“ klickt Wir können automatisch eine E-Mail an sein E-Mail-Postfach beantworten , da wir seine E-Mail-Adresse bereits hier haben. Also hier werde ich den Betreff und die Nachrichten ändern. Lassen Sie uns KI zum Generieren verwenden. Okay, hier bin ich bei JAG PT, also werde ich JAG PT verkaufen, um Antwort-E-Mails an Besucher zu generieren , die den Kontakt ausfüllen Mal sehen, welche Art von Nachricht wir von jGBT generieren. Es ist zu lang. Sagen wir, machen Sie es kurz. Ich werde einfach diese Art von Nachricht hinzufügen, also werde ich die Nachricht einfach kopieren und hierher kommen, nicht hierher, kommen Sie her. Ich werde dieses Bild tatsächlich entfernen, weil wir es nicht benötigen, und einfach das hinzufügen und lassen Sie uns das entfernen, wenn es dringend ist, und nur diese Art von Bild hinzufügen. Und hier können wir den Vornamen wählen, denn wenn wir zu Formularfeldern in Formularfeldern gehen, haben wir eigentlich den vollen Namen im vollen Namen. Im Voraus können wir den Feldnamen sehen. Ich kopiere einfach den Feldnamen so und dann vorbei, ich denke, das wird funktionieren. Wenn das nicht funktioniert, schauen wir mal, was wir tun können. Einfach so einfügen und nett. Jetzt haben wir diese E-Mail und hier müssen wir die Absender-E-Mail hinzufügen und der Absendername ist okay und hier sollte die Antwort die E-Mail sein, die von den Besuchern eingegeben wurde. Gehen Sie zum Formular. Im Voraus können wir das Formular ausfüllen und wir fügen nun 32 hinzu. Jetzt haben wir die Schritteinstellung. Eigentlich haben wir keine Schritte, und als zusätzliche Option sind wir startklar, und wir haben bereits die Designs und lassen uns die Ergebnisse sehen. Jetzt werde ich das einfach veröffentlichen und dann müssen wir die E-Mail-Box erstellen, denn wenn wir versuchen, diese E-Mail zu senden, wird diese E-Mail niemals oder die E-Mail wird nicht an unsere E-Mail-Box oder diese E-Mail eins oder E-Mail 2% gehen , weil wir keine E-Mail-Nachricht und zwei E-Mails hatten. Lass uns das machen. Um das zu tun, gehe ich auf mein Name-Chip-Konto. Sie sollten zum Hosting-Anbieter gehen und auf das C-Panel zugreifen. Also hier klicke ich einfach hier und klicke auf Gehe zum C-Panel. Okay, ich leite zum C-Panel und zum C-Panel weiter Wenn Sie also Jeep nicht verwendet haben, spielt es keine Rolle, dass das C-Panel bei jedem HostEM-Anbieter gleich ist bei jedem HostEM-Anbieter gleich Es mag einige Änderungen haben, aber es ist ziemlich ähnlich Und wenn Sie kein E-Mail-Konto haben , wenn Ihr Dienstanbieter kein E-Mail-Konto hat, müssen Sie sich an ihn wenden und es von ihm anfordern. Auf dem Namenschip haben wir die E-Mails bereits erhalten. Wenn ich nach unten scrolle, können wir hier ein E-Mail-Konto erstellen oder wir können einfach hier nach E-Mail suchen. Los geht's. Von hier aus werde ich einfach auf E-Mail-Konto klicken. Okay, hier habe ich meine alten E-Mails. Von hier aus klicke ich einfach auf Cre und hier wähle ich einfach unsere Website-URL und als Benutzernamen füge ich vier hinzu und lass uns ein Passwort generieren Ich werde ein Passwort generieren und wir sind wieder da. In Ordnung. Jetzt klicke ich auf Concreate, die E-Mail wird info at custom website design dot sein , sodass Sie hier als Beispiel einen beliebigen Namen oder einen beliebigen Namen hinzufügen können hier als Beispiel einen beliebigen Namen oder einen beliebigen Namen Wenn Sie Joan sind, können Sie Joan zu Ihrer Website-URL hinzufügen, und jetzt klicke ich auf Okay, wir benötigen eine weitere E-Mail, die wir als zwei E-Mails hinzufügen können. Aus der E-Mail werden Informationen angezeigt, und wir erstellen zwei E-Mails als Wählen wir die Domain und ich füge meinen Namen hinzu. Okay. Dann werde ich das Passwort so einrichten, dann klicke ich auf Erstellen. Jetzt haben wir diese beiden E-Mails. Lassen Sie uns diese Informationen festlegen. Kopieren Sie einfach die E-Mail und gehen wir zum Kontaktformular und per E-Mail, ich werde aus E-Mails diese Info-App benutzerdefinierte Website design.us hinzufügen , und dann werde ich diese E-Mail kopieren, kopieren und als zwei E-Mails hinzufügen Dann füge ich als E-Mail an die E-Mail-Adresse hinzu, ich als E-Mail an die E-Mail-Adresse hinzu die der Benutzer hier eingibt Gehe zu ps und weiter kompiliert auf E-Mail, , kopiere den Fehlbetrag, E-Mail eins ist gut, E-Mail zwei wird zwei sein, zwei ist die Person oder der Empfänger oder die Person die dieses Formular ausgefüllt hat, und das Formular wird Info sein Lass uns die Info-E-Mail kopieren. Immer noch hier, und die Antwort darauf wird sein, dass ich mich vorher geirrt habe. Die Antwort auf lautet info at custom website design. Die beiden sollten die beiden sein E-Mail sollte die E-Mail sein, die der Benutzer jetzt zyklisch veröffentlicht hat und wir haben SMTP immer noch nicht eingerichtet, aber lassen Sie uns versuchen, ob diese E-Mail durchgeht oder nicht und mit der Vorschau, und jetzt werde ich dieses Kontaktformular ausfüllen Okay, los geht's. Ich füge nur die Informationen hinzu, und hier habe ich keine Dokumente hinzugefügt, also klicke ich jetzt auf Senden und lass uns sehen, was passieren wird. Okay. Angenommen, Ihre Einreichung war erfolgreich, und lassen Sie uns sehen, ob wir die E-Mail tatsächlich erhalten. Um die E-Mail zu überprüfen, gehe ich hier hin und was ist die E-Mail, die als eingerichtet ist und die beiden ein Netz, gehen wir hier hin und klicken auf Jet-E-Mail. Und hier haben wir Webmail-Software, klicken Sie einfach auf Öffnen. Mal sehen, ob diese E-Mail ankommt oder nicht. Ja, sie ist tatsächlich angekommen, aber das habe ich nicht erwartet. Also, wenn es durchgeht, werden wir es so sehen. Ja, es geht tatsächlich durch. Das ist ein ursächliches Zeichen. Wenn Sie die E-Mail jedoch nicht an Ihr E-Mail-Postfach bekommen haben, werde ich Ihnen zeigen, wie Sie das Problem beheben können, und ich werde Ihnen zeigen , wie Sie SMTP einrichten Wir haben diese Anführungszeichen in der Kopfzeile, also lassen hier die Betreffzeile entfernen, dieses Zitat ist bekannt Wir brauchen es nicht. Und schauen wir uns das auch in der E-Mail an. Es steht auch in der E-Mail. Eigentlich sollte der Betreff der E-Mail geändert werden. Der Betreff sollte eine Nachricht erhalten, los geht's, teste es einfach so und ich hoffe, du verstehst es. Wenn Sie diesen Teil nicht verstehen , lassen Sie es mich einfach wissen. Ich werde ein anderes Video erstellen. Okay. Lassen Sie uns nun unsere getestete E-Mail als Benutzer sehen, ich füge diese GMs hinzu. Lassen Sie uns sehen ob wir die E-Mail an G erhalten. Okay, hier ist meine E-Mail-Box und sie wurde empfangen Also hier ist unsere Nachricht. Hallo Gian Gian meine, der vollständige Name, den ich eingebe, danke, dass du dich gemeldet hast. Und hier haben wir die E-Mail. Eigentlich ist die E-Mail einzeilig. Wir müssen es besser machen. Um es besser zu machen, denke ich, können wir STMA hinzufügen. Versuchen wir, STM hinzuzufügen , die BR ist kaputt VR und veröffentlichen E-Mails funktionieren hier also perfekt. Wie ich schon sagte, das ist ein gutes Zeichen. Wenn Sie die E-Mail jedoch in der nächsten Lektion nicht erhalten, werde ich Ihnen zeigen, wie Sie das Problem beheben können. Bevor ich das mache, gehen wir zur Einreichung und klicken auf Einreichung. Hier haben wir die E-Mail. Wir können hier klicken , um die E-Mail-Details wie folgt anzusehen und zu überprüfen , und nett. 153. Problem beheben, dass E-Mail nicht gesendet wird | SMTP-Plugin einrichten: Hallo, alle zusammen. Wenn Sie keine E-Mails von Ihrer WordPress-Website erhalten, das Problem wie folgt beheben. Gehen wir also zunächst zu den Plugins und klicken Sie auf Neues Plugin. Und hier suchen wir nach WP Mail SMTP. Keine Haupt-Mail Post. In Ordnung. Hier ist das Plugin und es ist kompatibel mit unserer Wordpress-Version. Klicken Sie auf Jetzt installieren. In Ordnung. Klicken Sie nun auf Aktivieren. Ich klicke einfach auf Zurück zum Dashboard. Okay. Jetzt haben wir hier die Kulisse. Außerdem können wir testen, ob unsere E-Mail korrekt funktioniert oder nicht. Wenn wir zu Tools gehen, haben wir hier einen E-Mail-Test, und hier können wir unsere E-Mail-Adresse hinzufügen und auf E-Mail senden klicken, dann heißt es, es wurde ein Emittent erkannt Diese Website-E-Mail funktionierte jedoch schon früher. Mal sehen, ob wir dieses Mal eine E-Mail bekommen. Okay, ich logge mich gerade in mein Gmail-Konto ein und sehe die E-Mail nicht , was bedeutet, dass dieses Plugin die E-Mail-Funktionalität meiner Website beeinträchtigt. Lass es uns reparieren. Zuerst werde ich hier die Einstellungen vornehmen, ich muss die E-Mail-Adresse für den Abschlussball einstellen. Unsere Prom-E-Mail wird diese sein kopiere sie und füge die Primmil Die Abschlussball-Mail bedeutet E-Mail , dass wir E-Mails von dieser Website senden und dann hier die Prom-E-Mail erzwingen sie einzuschalten und hier können wir den Namen festlegen Ich werde den Standardnamen und die Standarddaten beibehalten. Dann im Mailer Iwa das SMTP. Okay, hier müssen wir den SMTP-Host hinzufügen. Holen wir uns also diese Informationen. Um diese Informationen zu erhalten, kann ich einfach zum C-Panel gehen, und hier ist unsere E-Mail, und ich klicke einfach auf Geräte verbinden. Okay, hier haben wir alle Informationen. Zuerst brauchen wir den Gastgeber als Gastgeber, ich werde diese E-Mail-Adresse verwenden. Gehen wir hierher und fügen den Host als unsere aktuelle E-Mail-Adresse hinzu. dann für die Verschlüsselung Wählen Sie dann für die Verschlüsselung SSL und hier ist der SMTP-Port 465 Okay, und der SMTP-Host sollte dieser Ausgangsserver sein. Kopieren Sie es und fügen Sie es hier ein, nicht die E-Mail-Adresse und SMTP-Benutzername werden die E-Mail-Adresse sein Die Verwendung und hier das Passwort für das E-Mail-Konto. Hast du dich daran erinnert, dass wir beim Erstellen eines E-Mail-Kontos einfach das Passwort dafür mit diesem Passwort erstellen, das Passwort eingeben, Okay, Authentifizierung einschalten, dann klicke ich auf Einstellungen speichern. Wenn du Google Workspace oder einen anderen E-Mail-Anbieter verwendest, wähle einfach den Mailer aus, den du verwendest, und richte In diesem Fall verwenden wir SMTP des Servers, also habe ich diese Informationen eingerichtet Okay, gehen wir zu den Tools, und hier haben wir ein Problem. Aktualisiere es. Okay, hier beim Senden an E-Mail und klicken Sie auf E-Mail senden und lassen Sie uns sehen, was passieren wird. Aus irgendeinem Grund wird die Website nicht geladen, aber hoffen wir, dass das funktioniert. Okay, es heißt Erfolg und hier ist eine Warnmeldung. Und vorerst ignorieren wir es. Und jetzt haben wir hier die E-Mail bekommen. Wenn Sie also denselben Schritt ausführen, den ich verwende, können Sie das Problem, dass die E-Mail nicht gesendet wird, erfolgreich beheben. Lassen Sie uns jetzt unsere E-Mail oder unser Kontaktformular testen. Klicken Sie einfach auf das Kontaktformular und hier, gehen Sie einfach zum Kontaktformular und lassen Sie uns diese Informationen hinzufügen. Und dieses Mal laden wir die Datei hoch. Klicken Sie auf ConChooSFLE und lassen Sie uns dieses Bild hochladen. Klicken Sie dann auf C Submit und lassen Sie uns sehen , welche Art von E-Mail Okay, sagen wir, die Einreichung war erfolgreich . Gehen wir also zu unserer E-Mail und aktualisieren sie. Hier haben wir die E-Mail bekommen und hier haben wir auch den Anhang. Hier haben wir Informationen. Es ist also ziemlich gut, dass die E-Mails funktionieren, und hier sollten sie empfangen werden. Wir haben Ihre E-Mail-Nachricht erhalten. Okay, nett. A Kein Element oder Einsendungen, wir werden eine Aufzeichnung dieser E-Mail haben. Hier ist die E-Mail, so nett. Jetzt müssen wir zum Anfragetermin übergehen, fordern Sie Ihr Terminformular an. Ich bitte um Ihren Termin, hier haben wir das Formular. Wir müssen dafür sorgen, dass dieses Formular funktioniert. Klicken wir auf Mit Eli Mondo bearbeiten , um es zu bearbeiten und es funktioniert Klicken Sie auf dieses Stiftsymbol, um das Formular zu bearbeiten. Wir haben bereits die Formularfelder und die Schaltfläche funktioniert Jetzt müssen wir nach dem Absenden aktiv werden und hier müssen wir die Einreichung und die E-Mails sammeln. Lassen Sie uns auch E-Mail hinzufügen. dann bei Collect Submission Fügen wir dann bei Collect Submission UserRib und User Lassen Sie uns per E-Mail dieselben Details einrichten , die wir hier eingerichtet haben Die E-Mail wird hier sein, die beiden E-Mails hier sein. Hier werden die beiden E-Mails sein. Dann lass uns diesen Text kopieren und den Betreff als Anfrage und Termin angeben. Dann werden wir die Felder sehen und jetzt müssen wir die Absender-E-Mail einrichten. Gehen wir von der E-Mail aus, fügen sie hier aus der E-Mail ein, dann wird der Name so lauten und die Antwort wird das E-Mail-Feld sein. Keine Kopie oder kein CC. Dann werden wir hier die Metadaten sammeln und jetzt per E-Mail werden die beiden E-Mail-Adressen sein. Gehen wir zu den Feldern und hier zum nächsten Schritt und kopieren Sie den E-Mail-Kurzcode. Wie ich Ihnen bereits gesagt habe, jemand, der an seine E-Mail geht, erhält jemand, der an seine E-Mail geht, eine Bestätigungsnachricht von der Website. Füge das als E-Mail hinzu und für den Namen des Abschlussballs, kopiere diesen Vorschuss und füge ihn dann so ein, dann wird die Antwort diese E-Mail sein. Kopieren Sie die Antwort auf, und hier müssen wir die Nachricht hinzufügen. Also hier, lass uns diese Nachricht einfach so hinzufügen. Sie können diese Nachrichten verbessern. Ich erstelle es einfach so, füge den BR hinzu und entferne diesen Teil. Wir brauchen diesen nicht, fügen den BR erneut hinzu, um die Zeilen zu unterbrechen, und hier müssen wir vom Feld zu diesem Feld wechseln. Und zuerst so, dann gut. Okay, nett. Wir können veröffentlichen und schauen, ob es funktioniert oder nicht. Denken Sie, wenn wir die Erfolgsmeldung ändern möchten, können wir einfach zu den zusätzlichen Optionen gehen und auf Benutzerdefinierte Nachricht klicken. Und hier haben wir die Nachrichten. Also hier können wir uns ändern. Lassen Sie uns Erfolg haben. Senden Sie uns eine E-Mail , wenn Sie versuchen, einen Termin anzufordern. Fügen wir hinzu, dass Ihre Terminanfrage gesendet wurde. Halten Sie es also hier und klicken Sie auf Veröffentlichen und dann lassen Sie uns das ausprobieren. Also klicke ich von hier aus auf die Schaltfläche „ Termin anfragen und hier haben wir das Formular. Lassen Sie uns also diese Details hinzufügen. Okay, hier fülle ich die Informationen aus. Jetzt klicke ich auf die Schaltfläche „ Termin anfragen“ und lass uns sehen, was passieren wird. Okay, los geht's Ihre Terminanfrage wurde gesendet. Wenn wir also bei der Einreichung die E-Mail aktualisieren , haben wir die E-Mail Wenn wir sie also aus den Formularen herausfiltern möchten, können wir einfach hier auswählen, einen Termin anfragen und darauf klicken, um die E-Mails mit der Terminanfrage automatisch zu filtern. Wenn wir dann exportieren möchten, können wir einfach auf Filter nach CHV exportieren klicken und ja, das ist ziemlich cool und wir sehen uns unsere E-Mail-Adressen an Hier haben wir die E-Mail bekommen. Eigentlich ist das die E-Mail. Aus irgendeinem Grund sieht diese E-Mail nicht gut aus. Also lass uns sehen und versuchen, das Problem zu beheben. Außerdem müssen wir hier das Thema ändern , also ändern wir das Thema auf Terminanfrage gchanges V Familienklinik Terminanfrage wie dann hier sind wir schon beim BR-Pausentag Warum es nicht funktioniert, es sollte funktionieren. Wie auch immer, klicken Sie auf Veröffentlichen und wenn wir die Details hier sehen, haben wir die E-Mail mit den Details wie dieser erhalten und wir erhalten auch die Metadetails. Jetzt funktionieren unsere E-Mails gut und wenn wir wollen, können wir einfach wieder schreiben, aber im Moment werde ich nicht noch einmal schreiben. Wenn wir zum Stil und zu Nachrichten übergehen, können wir die Nachrichtenfarben in der Erfolgsmeldung ändern, sie so grün machen, und wir können auch solche Dinge tun. Diese Fehlermeldung wird also rot sein, also klicken Sie auf Veröffentlichen. Okay, wir sehen uns in der nächsten Lektion. 154. Einrichten des Rank Math SEO Plugins: Hallo zusammen. Jetzt müssen wir uns um die technische und On-Page-SEO kümmern. Für On-Page-SCO können wir es einfach einrichten, indem wir dem Rank Math-Konfigurationsschritt folgen . Also lass es uns tun. Zuerst gehe ich zu Plugins und klicke auf Neu oder Plugin hinzufügen. Und hier haben wir sieben Plugins zum Aktualisieren. Ich zeige Ihnen bereits, wie Sie die Website aktualisieren können, ohne dass Probleme auftreten. Und jetzt werde ich das Plug-In suchen. Suchen Sie also nach Trend. Moderatorin für Mathematik. Okay, hier haben wir Rank Math SEO und es ist kompatibel mit unserer WordPress-Version, also klicke ich auf Jetzt installieren und dann auf Aktivieren. Okay, als ersten Schritt muss ich dieses Rank Math-Konto mit meinem Gmail-Konto verbinden . Oder Google-Konten. Hier klicke ich auf Connect your account, und hier haben wir die Möglichkeit, uns anzumelden, also klicke ich einfach auf diese Google-Option. In diesem Fall habe ich ein Konto, aber wenn Sie kein Konto Rang Math-Konto haben, können Sie einfach auf Jetzt registrieren klicken und ein kostenloses Konto bei Google Facebook gowordfx.com erstellen , oder Sie können Ihre E-Mail-Adresse verwenden, mit oder Sie können Ihre E-Mail-Adresse verwenden Sie E-Mails von dieser Website erhalten In meinem Fall habe ich bereits ein Konto, also melde ich mich dort an und klicke auf Google, um mich bei Gmail anzumelden Jetzt folge ich dem Schritt, klicke einfach hier auf Weiter und dann auf Jetzt aktiv. Das Plugin ist eingerichtet und jetzt müssen wir diesen Set-Assistenten abschließen. Hier wähle ich einfach, weil SEO ein anderes tiefgründiges Thema ist. Wenn wir also diese einfache Option wählen uns die Webdesigner mögen, hilft es uns, das Wissen zu nutzen, das wir bereits haben, und der Rest wird durch das Plugin konfiguriert. Dann klicke ich auf Setup is Okay, hier muss ich die Details hinzufügen. In diesem Fall handelt es sich bei meiner Website um eine Website für kleine Unternehmen, also um den Geschäftstyp. Also hier muss ich den Geschäftstyp auswählen. In diesem Fall sollte es Gesundheit sein. Also werde ich hier nach Gesundheit suchen, wir haben Krankenhaussuche Gesundheit. Nein, wir haben ein Krankenhaus. Ja, wir haben ein Krankenhaus, also wählen Sie den Geschäftstyp aus, und hier ist der Name der Website, und dann haben wir das Do-Logo. Also hier ist die Größe 100 mal 100 gut und dieses Bild sollte quadratisch sein Mein aktuelles Bild ist also nicht quadratisch, also machen wir ein quadratisches Dazu gehe ich einfach zu unserer Figma und klicke auf unser Und wenn wir das Aufkleberblatt überprüfen, können wir hier unser Logo sehen Lassen Sie uns einen neuen Rahmen erstellen und lassen Sie uns ihn so erstellen. Dann lass uns diese fünf gut bis 552 gut machen. Jetzt ist es quadratisch und jetzt füge ich das Logo hinzu. In Asset-Bibliotheken werde ich das Logo haben. Wählen Sie das Logo Wählen Sie Instanz einfügen und fügen Sie sie hier ein. Lass es uns größer machen. Hier werde ich einfach die Instanz trennen, um dieses Logo zu bearbeiten, weil ich es vergrößern möchte Das ist ein Textlogo, was bedeutet, dass ich die Typografie vergrößert habe Wenn Sie ein Bild als Logo verwenden, können Sie es einfach vergrößern In diesem Fall mache ich es, dann lassen Sie uns diesen Familienteil vergrößern, so dass 100 zu viel sind. Ich habe das Logo erstellt und jetzt benennen wir es in Logo um. Google hat das gefallen und jetzt wähle es aus und klicke auf Exportieren Ich werde dieses Logo als JPG erstellen und auf Exportieren klicken, Exportieren. Dann gehe ich zu tinypng.com und lass uns dieses Logo so minimieren, dann klicke ich auf diese JPG-Schaltfläche, lade es herunter und jetzt lass uns hier gehen und dieses entfernen und auf Upload-Datei hinzufügen klicken Und hier fügen wir einfach dieses Logo hinzu und fügen ALT-Text wie diesen hinzu, dann klicken wir auf Diese Datei verwenden, und jetzt haben wir ein Logo wie dieses und jetzt bemängeln wir das Social-Sharing-Bild Dieses Bild wird also angezeigt, wenn jemand die URL unserer Website in sozialen Medien wie Facebook, LinkedIn, Twitter oder Twitter Minix oder einer anderen Facebook-Plattform teilt URL unserer Website in sozialen Medien wie Facebook, LinkedIn, Twitter oder Twitter Minix oder einer anderen Facebook-Plattform Die Bildgröße sollte 1.200 und 630 betragen Lassen Sie uns also einen weiteren Rahmen erstellen. Lass uns das machen und lass es uns hier hinstellen. Machen wir es als sozial, ja, sozial fertig und es wird 1.200 sein und die Körpergröße wird 630 sein , also so, und wir müssen ein Bild hinzufügen In diesem Fall füge ich einfach diesen Heldenbereich hinzu, wähle den Heldenbereich aus, kopiere ihn und hier ist unser Rahmen Hier füge es einfach so ein und jetzt werde ich es so verkleinern . Dann fügen wir auch diesen Text hinzu. Kopieren Sie diesen Text und diesen Text und fügen Sie ihn ein, wählen Sie ihn aus und fügen Sie ihn hier Dann machen wir es so. Wir müssen diesen entfernen. Machen wir daraus 90. Andererseits werde ich diesen Globo von hier kopieren und ihn so platzieren, dann sollte die Textfarbe zu weißer Farbe wechseln Okay. Vielleicht reduzieren wir diese Größe auf 50, hier, also 36. Okay. Eigentlich können wir einfach den Header, diesen Teil, einfach kopieren und hierher zurückkehren, diesen entfernen und ihn dann so einfügen. Dann werde ich diese beiden Teile entfernen und hier, lassen Sie uns diese Größe so einstellen und sie so platzieren. Das ist viel besser. Jetzt wähle ich diesen Frame aus und gehe zum Exportieren, stelle ihn als JPG ein, exportiere und bei winzigem PNG können wir die fünf Größen reduzieren. Okay. Lade es herunter. Wenn Sie also einen anderen Bildtyp haben, können Sie ihn auch hinzufügen In diesem Fall haben wir jedoch bereits die Figma-Datei Deshalb können wir unser Design einfach mit der Figma-Datei erstellen unser Design einfach mit der Figma-Datei Und lassen Sie uns ALT-Text wie diesen hinzufügen, klicken Sie auf Diese Datei verwenden Okay, jetzt klicken Sie auf Speichern und fortfahren. Okay, jetzt müssen wir uns mit unserem Google-Konto verbinden. zukünftigen Lektionen werden wir also ein Google Analytics- und Google Search Console-Profil erstellen und es mit unserer Website konfigurieren, um eine bessere Sichtbarkeit im Google-Suchranking zu erzielen . Wir müssen also das Gmail-Konto auswählen, das wir für den Google-Dienst verwenden werden , den wir verwenden werden. Also klicke ich auf Google Services verbinden und wähle von hier aus einfach das Gmail-Konto aus , das ich für die Website verwenden werde . Klicken Sie auf Weiter und dann auf Auswählen dann auf Weiter. Okay, derzeit haben wir keine dieser Informationen, und in Zukunft oder in den nächsten Lektionen werden wir sie erstellen. Klicken Sie vorerst auf Speichern und fortfahren. Klicken Sie dann auf Zurück zum Dashboard. Okay, wir konfigurieren Rank Math SO einfach mit unserer Website. Also hier drin sind wir bei Rank Math SO und Titel und Meta. Von hier aus können wir sehen, wie unsere Website bei Google aussehen wird. Und hier haben wir Tabs. Mit diesen Tabs können wir also weitere Details hinzufügen. also beispielsweise Ihre E-Mail-Adresse hinzufügen möchten, können Sie einfach eine Wenn Sie also beispielsweise Ihre E-Mail-Adresse hinzufügen möchten, können Sie einfach eine E-Mail-Adresse hinzufügen, und wenn Sie Ihre Adresse oder Ihre Geschäftsadresse hinzufügen möchten , können Sie sie hier hinzufügen, dann können Sie Öffnungszeiten und Telefonnummern hinzufügen und hier können Sie die A-Seitensuche A auswählen. Dann auf der Kontaktseite nach Kontakt suchen. Dies ist die Seite, die wir bereits erstellt haben, und hier werde ich keine Öffnungszeiten hinzufügen , wenn Sie möchten, Sie können sie hinzufügen. Unternehmenstyp, den wir bereits für die Adresse ausgewählt haben, ich werde die Adresse nicht hinzufügen und Sie können ein Google My Business-Profil erstellen Auf diese Weise können Sie all diese Informationen zu Ihrem Google My Business-Konto hinzufügen diese Informationen zu Ihrem Google My Business-Konto und diese Website einrichten oder diese Website zu Ihrem Google My Business-Profil hinzufügen . Dann lass uns nach Ho Helmetta gehen. Hier können Sie Ihre Facebook-Seite hinzufügen, und wenn Sie andere Profile wie X, LinkedIn oder ein anderes haben, fügen Sie sie einfach zu einem Nachdem Sie all diese Änderungen vorgenommen haben, können Sie auf Änderungen speichern klicken, und hier haben wir noch mehr Informationen. Wenn Sie jedoch nicht viel über SEO wissen, behalten Sie sie einfach als Standard bei. Und in diesem Homepage-Bereich müssen wir unsere Homepage bearbeiten, damit unsere Website-Homepage bei Google angezeigt wird , wenn jemand wie JV Family Clinic sucht Klicken Sie dazu auf Seite bearbeiten und den Seitennamen, den Sie hier sehen werden Klicken Sie einfach darauf und wenn Sie hierher gehen, werden Sie diese Art von Ort sehen Dies ist der Blog-Editor, und hier siehst du dieses Rang-Mathematik-Symbol, indem du einfach darauf klickst. Wenn Sie darauf klicken, wird die Google-Vorschau angezeigt. Klicken Sie auf Snip bearbeiten und hier können Sie einen Titel hinzufügen. Also lass uns den Titel hinzufügen. Ich werde JB Family Clini hinzufügen. Machen wir es dann zur Beschreibung, wir müssen die Beschreibung hinzufügen Wenn Sie also diese Details als Beispiel erstellen jemand JV Family Clinic auf Google sagt, möchte ich diese Website sehen Deshalb füge ich diesen Text dem Titel bei. Ich muss diesen Text auch in die Beschreibung aufnehmen. In diesem Fall ist dieser Text also das Fokus-Keyword. Also zur Beschreibung werde ich diese Art von Text hinzufügen und wenn jetzt jemand bei Google sucht, wird die Website so angezeigt und bis sie auf der ersten Seite von Google angezeigt wird, wird es ein paar Tage dauern, und wenn Sie ein stark umkämpftes Keyword haben, müssen Sie möglicherweise mehr SEO-Kram machen. In diesem Fokus-Keyword können Sie in diesem Fall ein Fokus-Keyword hinzufügen Ich füge einfach JB Fami Clinic hinzu und hier können wir die Informationen sehen , die wir erstellen müssen Jetzt Earl Good, also jetzt klicke ich auf ST und speichere diese Vorschau. Jetzt gehe ich wieder zurück zum Dashboard und auf ER-Seiten können wir diese Details zu den Earl-Seiten hinzufügen. Klicken Sie auf Bearbeiten und ich werde es in einem neuen Fenster öffnen. Dann klicken Sie hier auf diese Rangliste und fügen Sie die Fokus-Tastatur hinzu. Lassen Sie uns etwas über JV Family Clinic hinzufügen und auf Bearbeiten ist übersprungen, können wir einfach etwas über JV Family Clinic hinzufügen und einfach so kopieren, kopieren und hinzufügen Dann können wir hier auch eine Beschreibung hinzufügen. Versuchen Sie immer, diesen Vorschautext manuell hinzuzufügen , und auf diese Weise Sie ein hervorragendes Ergebnis. Wenn Sie jedoch viele Seiten haben , können Sie die Vorschau einfach so einrichten, dass sie auf jeder Seite angezeigt werden soll. Gehen Sie dazu zu Frank Map und Title and Meta. Hier auf den Seiten kannst du festlegen , wie es angezeigt werden soll. In diesem Fall benötige ich diesen Seitennamen nicht , also werde ich ihn einfach entfernen. Ich habe Seitentitel und Trennzeichen Wenn ich dann hier klicke, sehe ich mehr Dinge , die wir hinzufügen können. In diesem Fall haben wir das also nicht. In diesem Fall füge ich einfach Titel wie diesen hinzu und zur Beschreibung können Sie Änderungen hinzufügen und dann auf Conceive Changes klicken Dieses Format gilt also für Seiten auf der Website, und bei der Veröffentlichung können wir dasselbe tun Okay. In der nächsten Lektion werden wir die Sitemap einrichten und die Google Search Console und Google Analytics einrichten. 155. Suchkonsole und GA4 einrichten: Starten Sie die Google Search Console. Wenn wir also unsere Website mit der Google Search Console konfigurieren , können wir die Präsenz der Website in der Google-Suche überwachen und aufrechterhalten . So können wir verstehen oder uns Bild von der Leistung von Keywords machen, z. B. welche Keywords bei Google eingestuft werden und wie viele Besuche wir über Keywords machen, z. B. welche Keywords bei Google eingestuft werden und die Google-Suche erhalten und ähnliches. Da wir die Sitemap unserer Website an die Google Search Console senden können , hilft dies, unsere Website bei Google schneller zu ranken. Fangen wir also an. Gehen wir zunächst zu Rank Map SEO und allgemein S zu den allgemeinen Einstellungen Hier haben wir die Webmaster-Tools und hier zuerst die Google Search Console, also klicke ich einfach auf die Bestätigungsseite der Search Console Wenn ich das mache, sehe ich den Schritt, den ich befolgen sollte , um die Google Search Console einzurichten Lassen Sie uns zuerst Schritt für Schritt vorgehen. Wir müssen zur Website der Google Search Console gehen. Dann werden Sie diese Art von Fenster sehen. Hier klicken Sie einfach auf Jetzt starten und hier müssen Sie die E-Mail-Kontodetails hinzufügen. Ich werde es hinzufügen und wir sehen uns im nächsten Schritt. Wenn Sie das tun, werden Sie diese Art von Fenster sehen. Wenn Sie also bereits eine Website haben, kann sie hier angezeigt werden. Hier haben wir diese benutzerdefinierte Website design.us. Der Grund dafür ist, dass wir dieses E-Mail-Konto konfigurieren oder eine Rangzahl für unser Gmail-Konto erstellen und dann automatisch die Google-Suchkonsole einrichten Wenn Sie also zu Analytic gehen, können Sie es hier sehen Okay. Wenn Sie diese Website nicht sehen, klicken Sie einfach auf die Unterkunft und fügen Sie hier die URL Ihrer Website hinzu. Also füge ich einfach meine Webseiten-URL wie folgt hinzu und klicke dann auf Weiter. Und ich habe diese Bestätigungsnachricht erhalten. Und wenn Sie das Rank Math SO nicht eingerichtet und das GML-Konto konfiguriert haben, müssen Sie das hinzufügen, ein TML-Tag hinzufügen, das DML-Tag kopieren und hier einfügen Das SDMLTag wird so aussehen . Jetzt klicke ich auf Gehe zur Immobilie und von hier aus kann ich zuerst Sitemap hinzufügen Klicken Sie auf Sitemap und hier müssen wir die Sitemap hinzufügen. Gehen wir zu Rank-Mathematik und Sitemap-Einstellungen. In Sitemaps können wir die Informationen anpassen. Also hier werde ich es als Standard beibehalten, Standard festlegen und Seiten machen es zu Standard- und schwebenden Elementen, wir müssen diese Elemente nicht bei Google einordnen, also werde ich das vergessen, weil sie Teil des Website-Designs sind, keine ganze Seite oder ein Wenn Sie sich also an die Kundenrezensionen erinnern, die wir mit Advanced Custom Wheels erstellt haben, und wir sie nicht unseren Anbietern zuordnen müssen müssen wir kein Ranking erstellen, da diese Artikel Teil einer ganzen Seite sind. Beispiel: Unsere Anbieter werden auf die Startseite geladen. Wenn die Homepage einen Rang einnimmt, wird sie automatisch unter der Startseite rangiert. Jetzt klicke ich auf Änderungen speichern, wir brauchen keine Kategorien, entfernen einfach Kategorien. Wenn Sie sich jedoch auf den Blog konzentrieren und Kategorien haben, sollten Sie diese beiden Elemente nicht Klicken Sie auf Ja speichern und gehen Sie dann zu Allgemein. Im Allgemeinen haben wir hier die Sitemap-URL. Also wenn ich darauf klicke, wird es so aussehen. Also müssen wir einfach diesen EML-Teil kopieren. Hier haben wir die URL und den Schrägstrich unserer Website. Ich kopiere den Text nach dem Schrägstrich und gehe hierher und füge ihn so Dann klicke auf Abschicken. Okay, die Sitemap wurde erfolgreich hinzugefügt und enthält Informationen. Wenn ich jetzt hierher gehe, sehe ich ein Problem. Klicken Sie also einfach auf Melden und sehen Sie sich das Problem an. Okay, sagen wir, Google hat schädliche Inhalte auf einigen Seiten Ihrer Website entdeckt . Dies ist eine Demo-Website Wenn Sie eine solche Fehlermeldung sehen, korrigieren Sie sie einfach und klicken Sie auf Bewertung anfordern. In diesem Fall werde ich nichts davon tun. Und im Laufe der Zeit werde ich die Leistungs- und Indexierungsdaten auf dieser Suchkonsole sehen die Leistungs- und Indexierungsdaten auf dieser Suchkonsole Okay. Jetzt müssen wir Google Analytics einrichten. Google Analytics gibt Aufschluss darüber, wie Nutzer mit unserer Website interagieren. Das ist also wirklich wichtig. Auf diese Weise können wir sehen, was Benutzer unserer Website tun und wie viel Zeit sie auf unserer Website verbringen werden und in welchen Ländern die Benutzer von unserer Website auf unsere Website kommen. Okay, jetzt richten wir es ein. In der Analytik haben wir also den Analytics-Teil, aber hier haben wir keine Eigenschaft. Also lass uns das von Grund auf neu machen. Wenn ich auf „Hier klicken“ zu KH klicke, können wir weitere Informationen zu Google Analytics sehen. Lassen Sie uns jedoch bei Google suchen. Google Analytics zum Einloggen und klicken Sie auf diesen Google Analytics-Link. Okay, von hier aus wähle ich das GML-Konto aus. Dann habe ich hier schon ein Analytics-Konto, aber lassen Sie uns eines von Grund auf neu erstellen Um es zu erstellen, klicken Sie auf Schaltfläche Erstellen und dann auf Konto. Hier füge ich einfach einen Benutzernamen hinzu. Ich werde einfach meine Analysen hinzufügen. Dann klicken Sie hier auf Weiter, und hier müssen wir den Eigenschaftsnamen hinzufügen. Als Namen der Immobilie füge ich JB Family Clinic hinzu, den Namen der Website JB Family Clinic, wie folgt Dann Vereinigte Staaten, wenn Sie aus einem anderen Land kommen, wählen Sie es einfach aus. Ich wähle die Vereinigten Staaten aus und Sie können den Bundesstaat ändern Ich lasse einfach die Standardeinstellung aktiviert und die Währung ist US-Dollar. Klicken Sie auf Weiter. Hier können wir die Branchenkategorie auswählen. Ich werde nach Gesundheit suchen. Nein, ich muss es eins nach dem anderen durchsuchen. Lassen Sie uns sehen, dass wir Gesundheit haben und in Google gibt es für die Kategorie Gesundheit Ladebeschränkungen wir also fort und ich füge Unternehmensgröße als klein hinzu, eins bis zehn, und klicke auf s und ich kann Geschäftsziele auswählen. In diesem Fall wähle ich „ Nutzerinteraktion und -bindung anzeigen Nutzerinteraktion und -bindung “ und dann „Traffic von Website-Apps verstehen“ und klicke auf. Hier erstellen, ich klicke auf Akzeptieren und klicke auf dieses Kästchen und dann auf Ich akzeptiere. Okay. Hier muss ich die Plattform in meinem Guess Web auswählen und hier müssen wir die Website, Lou, URL hinzufügen , ich werde nur das benutzerdefinierte Website-Design hinzufügen. USA und wähle HTTPS. Hier müssen wir den Namen der Website hinzufügen. Ich werde es als JB Family Clinic hinzufügen und dieses ankreuzen, dann auf Erstellen und Fortfahren klicken Okay, dann klicken Sie auf Weiter. Und hier klicken Sie auf Manuell installieren. Tatsächlich können wir das Rank Math-Plugin verwenden , um dies zu installieren. Ich werde diese Seite in Analytics unterdrücken, mal sehen, auf Analytics, ich werde auf Erneut verbinden klicken und die E-Mail-Adresse auswählen , auf Weiter klicken, fortfahren Okay. Jetzt ist die Suchkonsole in Ordnung, und hier haben wir das My Analytics-Konto, und auf dem Grundstück haben wir das Eigentum von JB Family Clinic und datastrem wird JB Family Clinic sein Hier werde ich auf Analytics-Code installieren klicken. Ich sage, aktivieren Sie diese Option nur, wenn Sie keine anderen Plug-In-Streams verwenden , um den Google Analytics-Code zu installieren Ich verwende ihn also nicht und jetzt ist alles klar Klicken Sie auf Änderungen speichern. Search Console wird jetzt grün und Analytic Analytics grün angezeigt und es ist eine Verbindung hergestellt Wenn ich jetzt zu Analytics gehe und das einfach streame und mal sehen, klicke einfach hier. Ich werde es einfach aktualisieren. Jetzt wähle ich hier meine Analytics aus. ABM. Jetzt zeigt es , dass es verbunden ist Besuchen wir jetzt unsere Website. Lassen Sie uns einfach ein neues Inkognito-Fenster geöffnet haben und einfach benutzerdefinierte Websites auf neue Weise entwerfen Hier besuchen wir unsere Website und sehen uns diese an, wir sollten aktive Benutzer als einen haben, aber sie ist nicht aktualisiert Lassen Sie uns ein paar Minuten warten. Okay, jetzt zeigt es einen aktiven Benutzer und ist aus Sri Lanka, also das bin ich. Okay. Alles gut. Wenn Sie es nicht sehen, heißt es auch, dass es bis zu 24 Stunden dauern kann , bis es in Ihrem Analytics-Konto angezeigt wird, und es wird nicht so lange dauern, und Sie werden sehen, wie viele aktive Benutzer diese Art von Benutzern haben. Okay, jetzt haben wir sowohl die Search Console als auch Google Analytics eingerichtet . 156. On-Page SEO-Analyzer verwenden: Rank Math SO hat eine coole Funktion namens SCO Analyzer. Lassen Sie uns diese Funktion verwenden, um die Suchmaschinenoptimierung unserer Website zu analysieren. Es ist also auf Rang Matso & SO Analyzer. Sie werden diese Art von Design hier sehen Klicken Sie einfach auf Start SO Analyzer und es scannt unsere gesamte Website und gibt uns das aktuelle Ergebnis von SCO Okay, derzeit liegt der SCO ISCO bei 7.400. Wenn wir also hier nachschauen, können wir die Probleme sehen Und die erste Option mit hoher Priorität ist die automatische Aktualisierung. Lassen Sie uns also die automatische Aktualisierung dieses Plugins aktivieren. Und jetzt haben wir hier viele Probleme, und lassen Sie uns eins nach dem anderen beheben, um das El-Problem zu beheben. Also hier haben wir eine Warnung. Es ist eine H-Eins-Richtung. Auf Ihrer Homepage wurde kein H-One-Tag gefunden. Fügen wir also das H-One-Tag hinzu, um das zu tun , klicken wir auf die Seite von hier aus, cliconeEdit mit Element oder hier, wenn wir diesen Text überprüfen, ist dies der Haupttext unserer Website und hier ist ein HTML-Tag Machen wir es zu einem H und klicken wir auf Veröffentlichen. Dann wird das Problem behoben sein. Ebenfalls in H zwei Schlagzeilen wurden mehr als 20 H zwei Tags auf Ihrer Startseite gefunden. Lassen Sie uns also nur die Zwischenüberschriften als H zwei beibehalten und all diese Probleme beheben Um das zu tun, werde ich zuerst diesen Text kopieren und schauen, ob es tatsächlich dieser ist Also wir machen es schon als H eins, und hier haben wir deine Familienzelle eingeweiht , also müssen wir eins nach dem anderen gehen. Also lassen Sie uns diese zwei behalten, weil das eine Unterzeile ist und wir hier 100% als H zwei haben, Okay, hier sind die 100%. Lass uns darauf klicken und es zu H drei machen. Im SDM-Tag können wir also H drei, H vier, H fünf, H sechs und das Absatztag Dpantag und PO Wir müssen diese HTML-Seitenstruktur SEO-freundlich gestalten, indem wir die SEO-Richtlinien befolgen Es wird helfen, unsere Website bei Google zu platzieren. Klicken wir hier. Dann machen wir H drei. Eigentlich denke ich, dass wir viel H zwei hinzufügen. Machen wir sie alle zu H drei. Hier haben wir keine Probleme. Hier haben wir viele H zwei, also klicke ich auf San Li und hier können wir die Vorlage bearbeiten. Also lass es uns zuerst bearbeiten. Wir haben H zwei hier, machen H drei daraus und machen das hier auf drei. Drei Absätze. Okay, jetzt klicke ich auf Veröffentlichen und dann auf Speichern und Zurück. Okay, nett. Wenn ich hier nochmal runter scrolle , haben wir eine Menge Ts, mach drei draus. Und wenn wir es teilweise am Design machen, wird das einfach sein, aber jetzt müssen wir es manuell machen. Also werde ich das als Absatz machen. Dieser sollte ein Absatz sein, und dieser ist drei, ist okay. Und hier, mach das als Absatz. Nein, das sollte ein Absatz sein und hier, das sollte H drei oder H vier sein, drei ist okay. Ich denke, wir müssen diese Vorlage auch bearbeiten, also lassen Sie uns sie bearbeiten. Okay. Nun, zuerst sollte dieser Name H zwei und H drei sein, und das sollte HP oder Paragraph Tag sein, dann klicke ich auf Seven Bath und hier müssen wir auch hier H drei und H vier, C vier sein. Jetzt klicke ich auf Veröffentlichen und lass uns schauen, ob es diese Probleme behebt oder nicht. Jetzt klicke ich hier auf SO Analyzer neu starten. Okay, es wird 82 und versuche, diesen SoCore auf mehr als 80% zu bringen Jetzt müssen wir den Bildern alle Tags hinzufügen. Wir können dieses SRT-Tag kopieren und so einfügen und das Symbol sehen Also hier, es ist dieses Symbol. Also ist es in der Kopfzeile. Klicken Sie darauf, um den Header zu bearbeiten. Okay, klicken Sie jetzt hier auf das alte Tag, kopieren Sie einfach den Titel und fügen Sie das alte Tag so ein und klicken Sie auf Veröffentlichen. Dann klicke ich auf Seite bearbeiten , um die Homepage zu bearbeiten. Okay, jetzt bin ich zurück. Der einfache Weg ist also, gehen wir zum Dashboard, und im Dashboard finden wir Medien, klicken Sie auf Medienbibliothek. Und hier werden wir die Bilder haben. Wir müssen nur auf Bearbeiten klicken und hier können wir das ALT-Tag hinzufügen. Fügen wir es wie ein soziales Banner hinzu, klicken wir auf Update und gehen Sie wieder zurück. Eigentlich ist es einfacher, wenn wir auf dieses Galerie-Symbol klicken und die Bilder werden so angezeigt, und jetzt können wir sie so hinzufügen. So. Das ist die einfache Methode, um Termin und das Uhrsymbol Also werde ich all diese Symbole hinzufügen und bis bald. Okay. Wenn wir es jetzt noch einmal überprüfen, werden wir ein besseres Ergebnis haben. Also klicken Sie auf Rs wir starten S Analyzer. Wir haben immer noch viele H-Two-Tags, und hier müssen wir auch diese Fußzeile bearbeiten In der Fußzeile haben wir auch viele H-Two-Tags. Klicken Sie jetzt auf cFoter conserve, damit wir sie alle bearbeiten können. Das sollte ein Absatz sein, und hier sollte das ein Absatz sein, oder wir können H zwei hinzufügen, aber lassen Ich verstehe, wir haben eine Menge. Und hier, machen wir daraus eine Drei. Und hier machen wir das als Drei und der Copyright-Bereich wird ein Absatz sein Klicken Sie auf Veröffentlichen und jetzt überprüfen wir es noch einmal. Okay, jetzt sind es 91 und das ist ziemlich gut. Hier haben wir also das Linkverhältnis, also müssen wir mehr externe Links hinzufügen, aber im Moment werde ich sie nicht hinzufügen, und für den Moment ist 91 viel besser als zuvor. 157. Seitenladegeschwindigkeit mit LiteSpeed Cache Plugin: Okay, jetzt haben wir noch einen Schritt, um unser vollständiges Website-Design fertigzustellen Das heißt, optimieren Sie unsere Website und laden Sie die Website schneller auf Handy, Desktop oder Tablet. Also lass uns das machen. Zuallererst, wenn ich Plug-ins anschließe und diese installiere, kann ich hier hören, dass wir viele Plug-ins über Updates haben, und hier haben wir den Light Speed-Cache. Ich werde ihn deaktivieren. Und der Grund dafür ist, dass der Hosting-Anbieter, den ich verwende , Namenschip und der Namenschip fügt automatisch das Light Speed-Gehäuse hinzu. Ich werde es löschen und dann die URL der Website kopieren und uns den Seitencode geben . Ich suche auf Google, Google Page Speed, und wir können Einblicke in die Seitengeschwindigkeit sehen, klicken Sie einfach darauf. Es ist also Pagespeed Dot Web Dv, also werde ich einfach die URL der Website durchblättern und auf Analysieren klicken. Okay. Auf Mobilgeräten liegt die Leistung bei 64, und das ist besser. Wir können das jedoch besser machen, und auf dem Desktop sind es 89. Lassen Sie uns also die Geschwindigkeit unserer WordPress-Website erhöhen. Dazu können wir Light Speed, das Cache-Plugin, verwenden, also klicke ich auf Plugin hinzufügen. Dann werde ich den Light Speed-Cache durchsuchen. Okay, hier haben wir das Light Speed Case Plugin und derzeit ist es nicht mit unserer WordPress-Version getestet. Wenn wir also ungetestete Plugins installieren, versuchen Sie immer, Backups zu erstellen In früheren Lektionen habe ich dir gezeigt, wie du Backups bekommst. Wir haben das Backup bereits, also klicke ich auf Jetzt installieren. Dann klicke auf Activate Okay, jetzt haben wir hier das Lightspeed-Cache-Plugin Also klicke ich vorerst auf das Dashboard, um zu Da zu gelangen Es wird so aussehen Also lass uns die Einstellung hinzufügen. Erstens haben wir Presets und bei Presets müssen wir das nicht machen, weil wir es manuell machen werden Denn wenn wir diese Voreinstellungen verwenden, kann dies unsere Website beschädigen, und wenn etwas unsere Website beschädigt, können wir nicht identifizieren, welcher Teil unsere Website beschädigt Wenn Sie sich also wohl fühlen, können Sie einfach auf App-Voreinstellungen klicken und weitermachen Aber in unserem Fall gehen wir eins nach dem anderen Gehen wir zunächst zu Allgemein über. Klicken Sie einfach darauf, IC Cloudserve zu aktivieren , und Sie werden diese Art von Fenster sehen Also hier musst du dich registrieren. Also werde ich mich bei Google registrieren. Klicken Sie auf Ich stimme zu und klicken Sie auf Google. Fahren Sie fort. Und hier klicke ich einfach auf „ Link fertig stellen“ und dann auf „Allgemeine Einstellungen“, aktiviere den Modus „Erraten“ und schon ist die Gastoptimierung ausgeschaltet. Und hier klicken Sie auf Meine öffentliche IP überprüfen und diese IP kopieren. Okay, hier haben wir die IP. Ich kopiere es einfach und füge es hier auf der Server-IP und schon mache ich die Benachrichtigung. Klicken Sie dann auf Änderungen speichern. Und jedes Mal, wenn Sie Änderungen im Light Speed-Cache vornehmen, klicken Sie einfach auf diesen Barsch , öffnen Sie Ihre Website im Inkognito-Fenster und im Inkognito-Fenster und überprüfen Sie, ob alles einwandfrei funktioniert Und wenn wir das tun, können wir verstehen, ob es kaputt geht oder ob es Okay. Dann haben wir den Cache-Tab. Klicke darauf. Im Cache deaktiviere ich diesen Cache für angemeldete Benutzer und kreuze den Cache Mobile an, dann werden andere Dinge standardmäßig verwendet und ich klicke auf Änderungen speichern und überprüfe die Website im Inkognitor-Fenster Behalten Sie dann bei TTL die Standardeinstellung bei. Auf Seite können Sie die Standardeinstellung beibehalten, und dann haben wir Ausschlüsse unter Ausschlüsse Wenn Sie eine Seite oder einen Beitrag haben möchten , für den Sie den Cache nicht verwenden möchten, können Sie den Seitenpfad einfach in diesem Format hinzufügen Solche Probleme haben wir also nicht. Gehen wir also zu SIO ESI, behalten die Standardeinstellung bei, und dann haben wir Objekt für Objekt, behalten wir die Standardeinstellung bei. Aktivieren Sie dann im Browser den Browser-Cache und klicken Sie auf Änderungen speichern. Behalten Sie dann den Vorschuss als zurückgestellt bei. Wenn Sie jedoch über einen großen Speicherplatz und einen riesigen Server und einen dedizierten Server verfügen , können Sie diesen Sofortklick verwenden. Das heißt , wenn ein Besucher den Mauszeiger über einen Seitenlink oder einen Post-Link bewegt, wird dieser Inhalt vorab geladen bevor der Benutzer diese Seite besucht Dies erfordert eine Menge Serverleistung. Verwenden Sie diesen Sofortklick also immer nur , wenn Sie über genügend Serverleistung verfügen. Wenn Sie dies also einschalten und Ihr Server nicht viel Strom hat, wirkt sich dies auf die Geschwindigkeit Ihrer Website aus, und Ihre Website wird aufgrund der Überlastung Ihres Servers nicht schneller. Also dann haben wir CDN. Klicke darauf Wenn Sie also möchten, dass CDN diese Giveic Dot Cloud hat, können Sie sie von hier aus aktivieren, aber ich werde sie nicht verwenden Wenn Sie also Cloudfare mit Ihrer Website eingerichtet haben , Ich werde Cloudfare in zukünftigen Lektionen einrichten, aber vorerst werde ich es so Jetzt haben wir die Bildoptimierung. Klicken Sie darauf und hier können wir auf Optimierungsanfrage senden klicken und das Plugin optimiert unsere Bilder automatisch. Möglicherweise müssen wir das 45 Mal tun. Nun sagen wir, Sie haben Bilder, die darauf warten, getäuscht zu werden. Bitte warten Sie, bis der automatische Vorgang abgeschlossen ist , oder füllen Sie sie jetzt manuell Warten wir also vorerst ab und lassen wir es die Bilder optimieren. Wenn Sie sich also das nächste Mal auf Ihrer Website anmelden, überprüfen Sie den Status Ihrer Bilder. Wenn dieser nicht lautet, dass 100 nicht optimiert wurden, klicken Sie einfach auf Optimierungsanfrage senden und im Laufe der Zeit werden 100 abgeschlossen. Okay, jetzt haben wir die Seitenoptimierung. Bevor Sie die Seitenoptimierung durchführen, besorgen Sie sich, wie ich Ihnen bereits gesagt habe, wie ich Ihnen bereits gesagt habe, ein Backup, führen Sie dann die Optimierung durch und überprüfen Sie die angegebene Website. Also bei der Seitenoptimierung klicke ich auf Ich werde auf CSS Minifi und auf CSS kombinieren und daraus Css generieren, dann sieht ich in der Zeile, dann CSS kombiniert extern und intern werden dann CSS laden, ein synchron ist aktiviert und CCSS für URL auf Inline-CSS und die Optimierung der Schriftdarstellung Klicken Sie auf Änderungen speichern und dann auf Purge ERL. Gehen Sie dann zum Inkognito-Fenster und überprüfen Sie, ob RL einwandfrei funktioniert oder nicht. funktioniert die Website also. Okay. Manchmal kann das die Website beschädigen. Wenn das passiert, schauen Sie sich diese Artikel nacheinander an und sehen Sie, was das Problem ist. Und wenn Sie das Problem finden, schalten Sie es einfach aus. Dann haben wir die JS-Einstellung. den JS-Einstellungen ist JS Minify auf JS kombiniert, auf JS Combined Extern und Inline ist aktiviert Dann wird der JS-Treiber offiziell geändert und gelöscht. Gehen Sie zum Inkognitor-Fenster und überprüfen Sie, Inkognitor-Fenster Okay, funktioniert gut. Dann haben wir die SDM-Einstellung auf SDM-Einstellung, lassen DML auf DNS minimieren, kostenlose Seitensteuerung wird aktiviert und WordPress entfernen, Imog wird aktiviert sein und WordPress entfernen, Imog Klicken Sie dann auf Änderungen speichern und testen Sie es erneut. Dann zur Medieneinstellung, wenn du Lazy Loadimage hinzufügen willst, mach es einfach an, aber ich mache es und füge hier einfach ResponsPlace Solder hinzu, was bedeutet, wenn das Bild Zeit zum Laden braucht, wird ein Platzhalter angezeigt und wir können Ich werde einfach die Standardfarbe beibehalten und diesen LQIP-Cloud-Generator erstellen und Lazy Load I Frame Und hier wird die Bildqualität 82 sein, und hier werde ich auch bei den Lazy-Load-Bildern sein, manchmal kann das die Website kaputt machen, klicken Sie auf Änderungen speichern und klicken Sie auf Barsch, jetzt testen Sie es hier und ich arbeite gut, lassen Sie uns zum nächsten Schritt übergehen Ich werde den VPI ausgeschaltet lassen und Viewpoint Image Crone wird ebenfalls ausgeschaltet sein Wenn Sie einige Bilder haben möchten , denen Sie keinen Lazy-Load-Effekt hinzufügen möchten , oder wenn Sie möchten der Ladevorgang priorisiert wird, können Sie die URL hier hinzufügen, aber in diesem Fall werde ich nichts davon können Sie die URL hier hinzufügen, hinzufügen Jetzt haben wir also die Lokalisierung, stellen Gavita für den Fall her, dass der Vata-Cache C aktiviert sein wird und behalten andere Dinge standardmäßig bei, dann haben wir Tuning, klicken auf Conceive Changes und behalten dann das Tuning als Standard bei und lassen uns keine Änderungen am Tuning vornehmen. Jetzt haben wir eine Datenbank. der Datenbank gibt es Überarbeitungen und andere Listen , die wir nicht mehr verwenden, überprüfen Sie einfach eins nach dem anderen, und wenn Sie der Meinung sind , dass es Dinge gibt, die Sie nicht benötigen, klicken Sie einfach auf Löschen oder Sie können einfach eins nach dem anderen anklicken In diesem Fall, wenn ich das löschen möchte, klicken Sie einfach darauf und es werden alle gelöscht. Wenn Sie also kein Autogramm benötigen, können Sie einfach darauf klicken und die Datenbank löschen Dann haben wir Crolero Croler. Ich werde nichts ändern Ich werde es als Standard einstellen, dann haben wir die Toolbox und ich werde keine Option für das Oh verwenden Wenn ich jetzt das Dashboard besuche, haben wir diese Art von Fenster und hier kann ich auf Reps klicken und die Seitengeschwindigkeit auf diesem Plugin überprüfen und wir können sehen, wie die Seite rechtzeitig geladen Klicken wir auf Repress, um zu überprüfen, ob die Seite rechtzeitig geladen wurde, bevor sie 3,76 Sekunden und jetzt 1,22 Sekunden Was wir jetzt tun können, ist die URL der Website zu kopieren, zur Seitengeschwindigkeit innerhalb, hinter der URL zu wechseln und das Ergebnis zu sehen Nun, hast du gesehen, dass die Leistung um bis zu 82% gestiegen ist und auf dem Desktop sind es 79, und hier haben wir Probleme, dass wir Tempo machen, aber das ist besser als wir, aber bei der Bildoptimierung, ich habe nicht daran gedacht, dass wir normales Bild in Web P konvertieren, mal sehen, gehen wir zu Bildoptimierung und gehen wir zu Bildoptimierung und Bildoptimierung, die hier eingestellt sind, wir müssen das an und hier machen, mache das Bildformat der nächsten Generation als Web P. Dann mach das aus die EXI-XMP-Daten des optimierten Bildes erhalten bleiben . Klicken Sie nun auf Änderungen speichern, gehen Sie zum Dashboard und klicken Sie auf Optimierung senden Anfrage, klicken Sie auf Tron zur automatischen Anfrage und lassen Sie uns die Option aktivieren, damit die Bilder automatisch optimiert werden. Okay, jetzt lass uns nochmal den Text von dir sehen und schauen, ob sich etwas ändert. Okay, jetzt sind es 90 geworden, also ist es jetzt besser als zuvor. Okay, also wenn du deine Website optimiert hast und dann Änderungen vornimmst oder neue Seiten erstellst, aktuelle Seiten aktualisierst oder Bilder änderst, wende immer bewährte Methoden an, z. B. wenn du ein neues Bild hinzufügst, es auf die tinyng.com-Website stellst und die Dateigröße sendest und solche Dinge machst Und hier haben wir einen COSCO-Tab. Wir brauchen das nicht, weil mehr Funktionen nur für P verfügbar sind, also klicke ich auf Schließen und dann auf Okay. Jetzt können wir die Website so sehen. Okay. 158. Beste Inhaltsbreite für Elementor Pro: Hallo, alle zusammen. Jetzt bin ich bei unserem Figma-Design Und hier das Figma-Design mit diesen 1.440. Und im gesamten Design der Website fügen wir auch diese 1.440 hinzu, fügen wir auch diese und beim Design der Website wird es größer Aber wenn wir zu den Seiteneinstellungen gehen und hier zum Layout im Layout gehen, heißt es, Standardinhalt mit diesem 1140 Lassen Sie uns diesen Standard entfernen, der hier hinzugefügt wird , oder wir können ihn einfach so hinzufügen Dann machen wir für die rechte Polsterung 30 und für die linke Polsterung ebenfalls Klicken Sie dann auf Conceive Changes, und als Referenz verwende ich für die Gestaltung der gesamten Website lediglich das Layout 1440 als Inhalt, aber mir ist klar, dass das nicht gut für die Reaktionsfähigkeit der Website ist gut Sie also nicht 1.440 als Inhalt hinzu, sondern fügen Sie einfach 1.140 hinzu und fahren Sie mit 1.140 hinzu Ich möchte, dass Sie dem immer mit dem Standardwert folgen immer mit dem Standardwert Und wenn Sie Fragen haben, lassen Sie es mich einfach wissen. 159. Entscheidende Geschwindigkeitsoptimierung und Hosting-Regeln: In dieser Lektion werden wir uns mit einer der absolut größten Beschwerden befassen , die Menschen über WordPress und Elementor haben Langsames Laden ist verschüttet. Lassen Sie uns einen großen Mythos gleich von Anfang an ausfindig machen. Die meisten Elementor-Websites sind aufgrund von Elementor selbst nicht langsam Sie sind langsam, weil die Leute sie bauen. Zu viele Plug-ins, nicht optimierte Designdatei, umfangreiche Animationen und minderwertiges Hosting Am Ende dieser Lektion werden Sie Schritt für Schritt das genaue System kennen, mit dem Sie jeden aufgeblähten, verzögerten Elementor in nin-schnelle Hive-Konvertierungsmaschinen umwandeln jeden aufgeblähten, verzögerten Elementor in nin-schnelle Hive-Konvertierungsmaschinen in nin-schnelle Hive-Konvertierungsmaschinen Fangen wir an zu optimieren. Hier ist unser Figma-Design und ich denke, ich möchte dieses Bild hinzufügen Um es hinzuzufügen, kann ich das Bild auswählen und so exportieren Unser Bild wurde exportiert. Und was die meisten Anfänger und DIY-Website-Builder tun, ist dieses Bild direkt auf die Website hochzuladen. Dies ist der Killer Nummer eins im Website-Bereich. Sie müssen Bilder optimieren, bevor Sie sie verwenden. Hier ist also genau professionelle Bild-Workflow , dem Sie folgen müssen. Zunächst können wir es mit einem kostenlosen Komprimierungstool wie Tiny PNG ausführen . Ich verwende Tiny PNG. Ich werde das Bild einfach so kennzeichnen und mit einem Seil versehen. Hast du es gesehen? Die ursprüngliche Bildgröße betrug 557 Kilobyte. Aber unsere optimierte Version ist nur 87 Kilobyte groß, und wenn wir sie herunterladen und die Qualität überprüfen, ist hier die optimierte, und wir holen uns auch das nicht optimierte Bild, und los geht's das nicht optimierte Bild, Sie können sehen, dass wir die gleiche Bildqualität haben. Das zweite Problem, das die meisten Anfänger haben, ist, dass sie einfach Bilder hochladen, ohne die Layoutabmessungen zu beachten. Wenn Ihr Container nur aus 200 besteht , laden Sie kein weißes Bild mit 4.000 Pixeln hoch. Behalten Sie bei, dass Ihre Standard-Desktop-Bilder Größe von maximal 1200-1600 Pixeln Die meisten Anfänger laden das Bild einfach hier herunter und verwenden es direkt Wenn Sie jedoch die Dateigröße und die Abmessungen dieses Bildes überprüfen , ist es viel zu hoch. Was Sie tun müssen, ist, die Abmessungen zu ändern. Als Nächstes müssen wir in Betracht ziehen , unsere Bilder in das Webb-Format zu konvertieren, aber wir müssen unser Asset nicht einzeln konvertieren Wir können dafür ein Wordless-Plugin verwenden. Wir können also unser Standardbild wie JPG oder PNG hochladen und einen zuverlässigen Bildoptimierer installieren Gehen wir also zum Plugin und klicken auf At Plugin. Und hier suchen wir nach dem Plugin namens Ewww Image Optimizer und dieses Plugin konvertiert unsere Bilder automatisch in das Webformat Ich werde das installieren. Sie können auch einen Plugin-ähnlichen Konverter für Medien verwenden. In diesem Fall werde ich dieses Plugin verwenden. Nach der Installation werde ich loslegen, und hier können wir dem folgen. Nehmen wir an, wir beschleunigen unsere Website und ich bleibe hier bei der kostenlosen Ich werde die Prüfung zum Entfernen von Metadaten und das Lazy Load deaktivieren und die Web-P-Konvertierungen überprüfen und dann werden unsere Dateien automatisch zu Web P konvertiert. Auch hier füge ich 1920 hinzu und auch Max als 1920 Was hier passiert ist, wenn jemand oder Ihr Kunde ein Bild wie ein 4.000-Fixel-Bild hochlädt, wird es durch dieses Plugin auf diese Größe reduziert und das Image-Backup ist lokal, und dann können Sie auf Einstellung speichern klicken. In Ordnung, du bist fertig. Lassen Sie uns als Nächstes über Caching sprechen. Anstatt WordPress darauf zu konzentrieren, Ihre Seiten jedes Mal, wenn ein Besucher auf einen Link klickt, komplett neu zu erstellen jedes Mal, wenn ein Besucher auf einen Link klickt, komplett neu , der Server einen statischen Snapshot Ihrer Seite und zeigt diese gespeicherte Version sofort Dadurch wird die Ladezeit erheblich verkürzt. Wenn Sie die Infrastruktur von Safa Acid hosten, empfehle ich dringend, das kostenlose Lightspeed-Caching-Plugin zu verwenden das kostenlose Lightspeed-Caching-Plugin Wenn Sie sich auf einem Standard-Apache- oder Engineer-Server befinden, Premium-Plugins wie WV Rocket fantastisch Für Anfänger müssen Sie dies nicht zu kompliziert machen oder jedes einzelne Kontrollkästchen aktivieren Aktiviere einfach die wichtigsten Grundlagen, Seiten-Caching und Browser-Caching Wenn Sie einfach diese beiden Co-Einstellungen aktivieren, fühlt sich Ihre Elementor-Site Lassen Sie uns nun über etwas sprechen, das die meisten Menschen völlig ignorieren Plugin fett gedruckt. Jedes einzelne Plugin, das Sie aktivieren fügt zusätzliches Skript hinzu und formatiert es Ihrem Seitenkopf. Code bedeutet mehr DTV-Anfragen, was Ihre Ladezeit direkt speichert Hier ist eine strenge goldene Regel für Ihr Webdesign-Projekt. Wenn Sie ein Plugin nicht aktiv verwenden , löschen Sie es vollständig. Noch wichtiger, wenn Elementor es schon negativ kann, installiere kein separates Plugin dafür Überladen Sie Ihre Website nicht mit wenigen verschiedenen Elementor-Vorabinformationen von Drittanbietern , nur um ein einziges Widget zu verwenden Halten Sie Ihr Setup auf ein Minimum. Ein sauberes Backend ist immer gleichbedeutend mit schnellem Spaß. Schauen wir uns den Elementor des Editors selbst an Hier sehen einige fantastisch aus, aber sie sind unglaublich stark im Browser-Rendering Ich spreche von riesigen Homepage-Slidern. Ich behalte eher coole Slider, und hier haben wir Karussellfahrer durch das Premium-Plugin Advanced bereitgestellt Das wird auf der Website viel schwerer sein. Nicht nur das, Hintergrundvideos und viele Spurenanimationen wirken sich stark auf die Ladegeschwindigkeit Ihrer Website Denken Sie immer daran, dass umfangreiche Videohintergründe mobile Nutzer bei langsameren Verbindungen komplett umhüllen. Entscheiden Sie sich stattdessen für intelligente, leistungsstarke Designentscheidungen. Tauschen Sie diesen schweren Slider gegen einen mutigen, statischen Heldenbereich Ersetzen Sie den komplexen, lobenden Bewegungseffekt die sauberen nativen CSS-Hover-Zustände Denken Sie daran, dass Sie nach dem Aussehen gestalten. Aber es muss unbedingt schnell geladen werden oder die Benutzer auf der Seite halten. Das bringt uns zu den wichtigsten Webfläschchen. die tatsächliche Leistungsmatrix Machen Sie sich keine Sorgen um die tatsächliche Leistungsmatrix, die Google verwendet hat, um Ihre Website zu bewerten. Wir werden uns hier nicht in tiefem Fachjargon verzetteln in tiefem Fachjargon verzetteln Sie müssen nur drei wichtige Dinge verfolgen. Zuerst LCP oder Largest Content Full Paint. Dabei wird einfach gemessen, wie schnell Ihr Hauptteil oberhalb des Fehlers Sahne enthält An zweiter Stelle steht CLS oder Cumulative Layer Shift. Dadurch wird die visuelle Stabilität verfolgt. Sie möchten sicherstellen, dass Ihre Layoutelemente beim Rendern der Seite nicht gewaltsam hin- und herspringen. Und drittens ist INP oder Interaktion mit dem nächsten Paint. Dies misst die Reaktionsfähigkeit. Wie schnell reagiert die Website, wenn Sie ein Klicker-Menü oder eine Schaltfläche verwenden Hier ist deine Abkürzung. Wenn du die Schritte befolgst, die wir gerade behandeln, deine Bilder optimierst, unnötige Plugins weglässt und saubere Layouts erstellst, wirst du automatisch alle drei Matrizen erstellen erstellst, wirst du automatisch , ohne die technischen Daten zu überdenken Lassen Sie uns jetzt ganz real sein. Du kannst den optimiertesten, schönsten und saubersten Elementor der Welt Aber wenn Sie es auf Chief Loa Tier Share Hosting hosten, wird es immer noch wie Slow Turtle geladen Wenn Sie ernsthaft Websites für Ihre Kunden professionell erstellen möchten, benötigen Sie eine angemessene Infrastruktur Suchen Sie nach Hosting-Umgebungen auf Hochgeschwindigkeitsservern basieren. Außerdem sollten sie über starke Verfügbarkeitsrekorde und Rechenzentrumsstandorte in der Nähe Ihrer tatsächlichen Zielgruppe Um deinem Server zu helfen, verwenden WordPress und Elementor standardmäßig Funktionen, die als Lazy Loading bezeichnet werden Dadurch wird sichergestellt, dass Bilder weiter unten auf der Seite nur genau für den Bruchteil einer Sekunde geladen werden , zu der der Benutzer scrollt Dadurch wird die erste Seite unglaublich schnell gestartet. Stellen Sie einfach sicher, dass Sie diese Funktion aktiv lassen. Schauen wir uns die Auswirkungen auf die reale Welt an. Vor der Optimierung sind Websites aufgrund riesiger Medienberichte und unübersichtlicher Skripte oft aufgrund riesiger Medienberichte und unübersichtlicher Skripte Aber nach der Anwendung dieser Checkliste halbierte sich die Ladezeit Ihre Benutzererfahrung völlig reibungslos und Ihre Konversionsraten steigen Bei der Geschwindigkeitsoptimierung geht es darum, nach einer einzigen Magie zu suchen. Es geht darum, eine kleine, absichtliche Angewohnheit, saubere Medienressourcen, minimale Plugin-Nutzung, solide Caching-Regeln und leistungsstarkes Layoutdesign zu kombinieren saubere Medienressourcen, minimale Plugin-Nutzung, solide Caching-Regeln und leistungsstarkes Layoutdesign Wenn Sie auch nur die Hälfte der Strategie umsetzen , die wir heute entworfen haben, werden sich Ihre Kundenseiten deutlich schneller anfühlen Okay, das ist es. Folgen Sie diesen Schritten , um das beste Ergebnis zu erzielen. 160. Kursprojekt: Herzlichen Glückwunsch. Sie haben es bis zum Ende des Kurses zum Design der benutzerdefinierten Benutzeroberfläche für Websites geschafft. Sie haben so viel aus dem Verständnis der Website-Struktur gelernt , um ein einzigartiges Design zu erstellen, das sich von anderen abhebt Bevor Sie loslegen, haben wir eine spannende Herausforderung für Sie. Ihr Klassenprojekt. Ihr Projekt besteht darin, eine benutzerdefinierte Website UI-Design für ein Restaurant zu erstellen. Wenden Sie alles an, was Sie in diesem Kurs gelernt haben. Mach dir keine Sorgen. Ich werde Sie noch einmal durch die Schritte führen. In diesem Abschnitt mit den Ressourcen Kursprojekte findest du hier eine Frage des Restaurantbesitzers. Kopieren Sie es und fügen Sie es in Ihr Figma-Projekt ein. Verwenden Sie die Informationen als Leitfaden für Ihr Design Wählen Sie Farben und Schriftarten aus, die zu den Restaurants passen, erstellen Sie dann ein einfaches, aber professionelles Logo Marke. Ideen und Inspirationen für das Farbdesign, die zu Ihrem Konzept passen. Dies wird Ihnen helfen, eine klare Richtung für Ihr Design festzulegen. Verwenden Sie die Anweisungen der künstlichen Intelligenz, die Sie in diesem Kurs lernen , um Inhalte für die Website zu generieren Lassen Sie Ihrer Kreativität freien Lauf und gestalten Sie die Benutzeroberfläche der Website Abschnitt für Abschnitt Sobald Ihr Design fertig ist, laden Sie es in Ihren Projektbereich dieser Klasse hoch. Das ist deine Chance, deine Fähigkeiten unter Beweis zu stellen und Feedback von anderen zu erhalten. Ich bin so stolz auf den Prozess, den Sie gemacht haben. Abschluss dieses Projekts wird Ihr Selbstvertrauen stärken Der Abschluss dieses Projekts wird Ihr Selbstvertrauen stärken und Ihr Portfolio um wertvolle Gebühren erweitern. Wenn Sie sich jemals nicht weiterkommen, Sie sich die Lektionen noch einmal an oder stellen eine Frage im Diskussionsbereich Ich bin hier um zu helfen. Danke, dass du mit mir gelernt hast. Ich kann es kaum erwarten, dein fantastisches Design zu sehen. Machen Sie jetzt weiter und lassen Sie Ihrer Kreativität freien Lauf. Lasst uns die Welt schöner machen. Eine Website nach der anderen.