Universelles Portfolio-Design: Von Figma-Vorlage zu Live-WordPress-Site mit Elementor Pro

1. Willkommen bei Figma für WordPress: Erstellen Sie ein universelles Portfolio mit Elementor Pro Kurs: Hallo zusammen. Willkommen bei Universal Portfolio Website Design with Element of Pro, einem Kurs, in dem Sie lernen, wie Sie eine schöne professionelle Portfolio-Website erstellen, ohne eine einzige Codezeile zu eine schöne professionelle Portfolio-Website schreiben. Wir beginnen damit, ein Figma-Konto zu erstellen und unsere Designdatei zu öffnen Sie werden lernen, wie Sie Text bearbeiten, Bilder austauschen und neue Farben auswählen, die zu Ihrem persönlichen Stil passen Als Nächstes werden wir in einer Domain weitermachen und das Hosting Ihrer Website einrichten Hosting Ihrer Website einrichten damit sie live ist und mit der Welt geteilt werden kann. Dann kommt der unterhaltsame Teil Wordpress. Wir werden WordPress und Element Free und Elemento Pro installieren und beginnen, Ihr Figma-Design mit einfachen Traganrof-Tools neu zu erstellen, ohne dass eine Codierung erforderlich ist, aber Sie erfahren auch, wie Sie Ihre Website auf der Seite SCO beschleunigen können, damit Google Sie finden und Google Analytics verbinden kann, um Ihre Website auf der Seite SCO beschleunigen können, damit Google Sie finden und Google Analytics verbinden kann zu sehen, wer Sie besucht und worauf Hallo, ich bin Akalanka, eine Webdesignerin aus Sri Lanka. Meine Leidenschaft ist es, mein Wissen zu teilen. Ich habe diesen Kurs sehr anfängerfreundlich gestaltet. Auch wenn Sie Figma oder Wordpress noch nie benutzt haben, werde ich Sie bei jedem Schritt begleiten Dieser Kurs ist perfekt für Anfänger, die neugierig auf Elementp-Freelancer sind, und für Kreative , die ein herausragendes Portfolio suchen Ist jemand bereit, sein Figma-Design in eine funktionierende Website umzuwandeln? Am Ende dieses Kurses verfügen Sie über eine voll funktionsfähige, verfügen Sie über eine voll SCO-fähige Portfolio-Website von Ihnen entworfen und selbstbewusst erstellt wurde, sodass Sie mit Intensivstation innerhalb des Kurses beginnen 2. Einführung in die von uns verwendeten Tools: Vorteile, Nachteile und Alternativen: In diesem Kurs werden wir hauptsächlich die drei Tools Figma, Verpus und Elemento P verwenden Verpus und Elemento P Schauen wir uns die einzelnen Tools einmal an Es gibt Vor- und Nachteile und einige Alternativen. Sie wissen also genau, womit Sie arbeiten. Zuerst, Figma. Figma ist unser Design-Tool. Hier erstellen wir das Layout und den visuellen Stil Ihres Portfolios Bevor Sie daraus eine echte Website machen. Lass uns über Prosa sprechen. Pigma läuft in Ihrem Browser. Sie müssen nichts herunterladen oder installieren. Es ist für einzelne Benutzer kostenlos. Sie können Ihre Designs live mit anderen bearbeiten. Wenn Sie also mit einem Kunden oder Teamkollegen zusammenarbeiten, können diese Ihnen in Echtzeit Änderungen oder noch mehr Elemente vorschlagen in Echtzeit Änderungen oder noch mehr Elemente vorschlagen Es ist außerdem vollgepackt mit praktischen Funktionen wie automatischen Layout-Komponenten und gemeinsam genutzten Bibliotheken, die das Design auch für Anfänger effizient machen Design auch für Anfänger effizient Hier sind einige Nachteile. Die Oberfläche kann zunächst etwas überwältigend sein. Es gibt viele Banner und zwei Studenten, und da es vollständig Cloud-basiert ist, benötigen Sie eine stabile Internetverbindung reibungslos zu funktionieren. Als Alternative gibt es Tools wie AdovXD und Ikech. Sie können auch CanMA verwenden. Es ist eine anfängerfreundliche Option, hat aber viele Einschränkungen Als nächstes werden wir WordPress verwenden. WordPress ist unsere Website-Plattform, die Grundlage, die Ihre Website unterstützt. Es ist eine der beliebtesten Plattformen der Welt. Wird von über 40% der Websites verwendet. Lassen Sie uns über Profis sprechen. Es ist Open Source und kostenlos. Sie haben die volle Kontrolle über Ihre Website, vom Design über SCO bis hin zur Leistung. Sie können Plug-ins installieren, um fast alle Funktionen hinzuzufügen, die Sie sich vorstellen können. Und es ist anfängerfreundlich, besonders wenn Sie es mit einem Visual Builder wie Elemento Nun, hier sind einige Nachteile. Sie müssen eine Domain und ein Hosting kaufen , um eine Website online zu stellen . Es erfordert regelmäßige Updates und Backups, damit alles reibungslos läuft. Und obwohl es flexibel ist, kann sich die Einrichtung zunächst technisch anfühlen. Alternative zu Wordpress Wix und Square Space Earl in einem Website-Builder , die einfacher zu bedienen sind, aber weniger Kontrolle bieten Webflow bietet Ihnen mehr Gestaltungsfreiheit. Auch für einfache Websites ist Framer eine weitere beste Wahl Das letzte Element von Pro Element of Pro ist unser Page Builder Das Tool, mit dem Sie dieses Prot VoluFigma-Design in eine voll funktionsfähige Word-Website verwandeln Lass uns über Profis sprechen. Es ist extrem anfängerfreundlich. Kein Code erforderlich, nur Dragon Row. Sie erhalten die volle Designkontrolle über jeden Teil Ihrer Website, einschließlich der mobilen Ansicht. Elementor Pro enthält erweiterte Widgets wie Formulare, Slider, Preisintervalle, Kundenreferenzen und mehr. Mit dem Team Builder können Sie die gesamte Struktur Ihrer Website, Kopf- und Fußzeilen sowie Blockvorlagen visuell gestalten Fußzeilen sowie Blockvorlagen visuell Element of Pro ist ein Pad-Plug-In, es ist also nicht kostenlos Wenn Sie sich später dazu entschließen, zu einem anderen Builder zu wechseln, wird Ihr Design nicht übertragen, sondern Ihr Design nicht übertragen, Sie müssen es neu erstellen, und obwohl es einfach zu bedienen ist, müssen Sie dennoch einige Zeit damit verbringen, sich mit der Benutzeroberfläche und den grundlegenden Methoden vertraut zu machen. Lassen Sie uns nun über einige Alternativen sprechen. Es gibt Hersteller wie Prix Builder, Brave Builder, DV Oxygen Nicht nur das, wir haben WordPress-Standardeditor Gutenberg in der nächsten Lektion Lassen Sie uns in der nächsten Lektion in die Designwelt eintauchen 3. Erstellen Sie ein Figma-Konto: Hallo, alle 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 Falls nicht, klicken Sie auf Schaltfläche „Kostenlos starten“ und klicken Sie hier auf. Fahren Sie mit Google fort, um sich mit Ihrem Gmail-Konto anzumelden. Okay, jetzt klicke ich auf mein Gmail-Konto und dann auf. Fahren Sie fort. 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? Also werde ich hier Design auswählen. Dann klicken Sie auf Weiter. Dann heißt es: Beschreibt irgendeines davon deine Arbeit? Hier wähle ich einen Freelancer und du wählst entsprechend deiner Position aus, dann klicke ich auf Weiter Dann haben wir noch eine Frage wie, wem arbeitest du 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 und dann auf Weiter klicken und hier, haben Sie schon einmal ein IgM-Produkt verwendet, werde ich viele Male hinzufügen Wenn Sie mit IgM nicht vertraut sind, klicken Sie einfach auf und dann auf Weiter Dann wähle ich dieses Starterpaket aus. In zukünftigen Lektionen werde ich die Vorteile des Seitenabonnements von Figma erläutern die Vorteile des Seitenabonnements 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 Eskep 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 4. Figma Walkthrough: Erkunden der Benutzeroberfläche: Hallo, alle zusammen. Hier haben wir die universelle Portfolio-Figma-Datei Ich klicke einfach auf diese sich öffnende Figma-Schaltfläche und es wird eine Kopie unserer Figma-Datei erstellt Wenn wir die Figma-Datei überprüfen, haben wir hier die weibliche Portfolio-Version und die männliche Portfolio-Version Klicken Sie auf die weibliche Version und dann auf diese Play-Schaltfläche, um sie in einem neuen Tag zu öffnen Also hier ist die Vorschau, und schau, dann klicke ich auf das nächste Bild, und hier haben wir die männliche Version der Portfolio-Website. Und nicht nur das, hier haben wir angezettelt Istigaset ist der Ort, der Farben und Schrift dieser Portfolio-Website definiert Farben und Schrift Jetzt zeige ich Ihnen, wie Sie die Schriftfarben, den Text und die Bilder ändern die Schriftfarben, den Text und Lassen Sie uns zunächst mit Farben beginnen. Denken Sie daran, wenn Sie diese Farbe nicht mögen oder ob Sie in einer anderen Branche tätig oder ob Sie vorhaben, eine umfassende Polio-Website für Beziehungsberater zu entwerfen , in diesem Fall ist diese Farbe nicht geeignet Die geeignete Farbe sind die Farben Rosa, Schwarz und Weiß Also lass uns die Farben ändern. Um die Farben zu ändern, müssen wir nicht jedes einzelne Element durchgehen. Hier können wir dieses Farbelement in der Farbpalette auswählen. Dann sehen Sie hier diese Feldfarbe und klicken auf die Primärfarbe Hier sehen Sie das Bearbeitungssymbol, klicken Sie darauf und dann hier unter der Eigenschaft. Dann können Sie hier den Farbcode hinzufügen. Also werde ich einen Farbcode wie den Hashtag FF 200 hinzufügen. Die Farbe wird zu dieser orangen Farbe wechseln. Und wenn wir es auf dem Design überprüfen, ändert sich hier alles in die orange Farbe. Siehst du, denn in Figma definieren wir diesen Farbcode als Primärfarbvariable oder als Primärfarbe ist Kachel Wenn wir ihn an einer Stelle ändern, wirkt sich das auf alle Frames Und jetzt ändern wir diese Farbe in Leber und Farbe. Klicken Sie einfach hier und lassen Sie uns dies als Website für Beziehungsberater erstellen . Also lass uns rosa Farbe hinzufügen. Farbe wie diese. Okay, jetzt wird alles rosa und dann müssen wir den Text ändern. Der Text in den beiden Frames ist also editierbar, was bedeutet, dass wir einfach auf den Text doppelklicken und ihn bearbeiten können auf den Text doppelklicken und ihn bearbeiten Bearbeiten Sie es einfach wie Zugim Dot so. also an manchen Stellen Wenn wir also an manchen Stellen einfach auf den Text doppelklicken, wird der Text nicht bearbeitet, wenn dies auf einem Mac passiert Sie können die Befehlstaste drücken und so auf den Text doppelklicken Also hier drücke ich den Befehl und doppelklicke so Wenn Sie Windows verwenden, können Sie Strg drücken und doppelklicken. Dann können Sie diese Texte nach Belieben ändern. So können wir den Text ändern, und es spielt keine Rolle, wo er ist, du kannst ihn einfach so ändern. Und das wird sich auf das Design auswirken, aber wenn der Text das Design so ändert, ist dieser Abschnitt in diesem Fall kleiner. In diesem Fall müssen wir also eine Zeile hinzufügen und daraus eine Zeile wie diese machen Dann müssen wir die Bilder schnallen. Dazu können wir das Bild einfach wie zuvor auswählen. Wenn es nicht ausgewählt ist, klicken wir beim Doppelklicken, wir können die Befehlstaste drücken oder die Befehlstaste oder die Strg-Taste gedrückt halten. Wir können auf dem Mac die Befehlstaste und auf dem Windows die Strg-Taste drücken, und es wird ausgewählt. Dann haben wir den Bildbereich ausgefüllt, wählen Sie ihn einfach aus und jetzt können wir auf die Schaltfläche „Vom Computer hochladen“ klicken , um den Dateibrowser zu öffnen. Okay, hier wähle ich einfach ein Bild aus. Wählen Sie dieses aus und es wird hinzugefügt. Wenn wir es also hinzufügen, wird es so aussehen. Was wir also tun können, ist , es zu ernten. Wir sollten es so machen, wie es passt. Dann können wir dieses Design vergrößern, indem wir den Befehl drücken, während wir das dieses Design vergrößern, indem wir den Befehl drücken Mausrad benutzen, um die Größe auf diese Weise zu erhöhen , oder in Windows Strg und Mausrad drücken. Dann können wir hier klicken und es als Task Crop einstellen. Dann kannst du es hier ändern, wann immer du willst, also füge ich es einfach so und hier kann ich es einfach erhöhen. Wenn Sie das Bild vergrößern, sollten Sie Shift drücken. Wenn Sie die Umschalt-Taste nicht drücken, wird es ohne Umschalttaste angepasst. Dadurch wird das Aussehen des Bildes beeinträchtigt. Drücken Sie also immer die Umschalttaste und passen Sie es so an. Lass uns das so anpassen und es so ausdrücken. Okay. Jetzt ändern wir einfach das erste Bild und hier, lassen Sie uns auch dieses Bild ändern, das Bild auswählen. Hier können Sie das Bild sehen, das wir ausgewählt haben, und hier, klicken Sie auf das Bild, um auf das Bild zu doppelklicken. Dann können wir hier auf das Bild klicken und auf Vom Computer hochladen klicken. Und hier fügen wir dieses Bild hinzu. Jetzt müssen wir das so ändern, dass es passt, dann den Bereich vergrößern, dann einen Zuschnitt machen und hier nicht die blauen Ecken auswählen, sondern das Bild auswählen, und hier haben wir das Ende des Bild-Presseblatts und hier nicht die blauen Ecken auswählen, sondern das Bild auswählen, und hier haben wir das Ende des Bild-Presseblatts und passen es entsprechend an. Auf diese Weise können wir die Bilder ändern. Hier können wir demselben Fehltritt folgen und die Bilder ändern, und für den Hintergrund können wir ihn auch ändern Derzeit habe ich keinen Bildhintergrund. Ich werde jedoch nur den Hintergrund auswählen, und hier haben wir die Eigenschaft der weißen Farbe des Bildes auf dem Feld. Also hier müssen wir dieses Bild ändern. Klicken Sie auf das Bild, klicken Sie auf Vom Computer hochladen und lassen Sie uns einfach dieses Bild auswählen, und jetzt müssen wir es wie anpassen machen und dann zuschneiden. Ich glaube nicht, dass dieses Bild hier passt, dann drücken Sie Shift und D wie folgt. Dann können wir es nach Belieben anpassen, sodass es so aussieht. Und wenn wir jetzt den FOT-Polorahmen auswählen und auf das Display-Symbol klicken, können wir die Änderungen sehen , die uns gefallen haben. Okay, es ist ziemlich einfach. Bei dieser Methode können Sie den Text, die Bilder und die Details dieser Frames ändern . Und ich befinde mich immer noch in der Entwicklungsphase der Datei. Nachdem ich das komplett entworfen habe, werde ich diese Frames wie hier, Hero umbenennen und hier können wir Menü hinzufügen. Ich werde sie so ändern. Auf diese Weise werden Sie die Abschnitte, an denen Sie gerade arbeiten, leicht verstehen. Wenn Sie außerdem Anforderungen an das Design einer Portfolio-Website für eine männliche Person haben , können Sie diese nicht nur verwenden, sondern Sie verfügen jetzt auch über grundlegende Kenntnisse von Figma , sodass Sie Ihre eigenen Abschnitte erstellen können Zum Beispiel haben wir hier keinen Bereich für die Galerie, sodass Sie Ihre eigene Galerie erstellen können Wir sehen uns also in der nächsten Lektion. 5. Subdomain erstellen: Hallo, alle zusammen. Jetzt bin ich auf unserer Universal-Portfolio-Website Figma Design Sie können diesen Link im Bereich Ressourcen überprüfen. Hier haben wir also zwei Portfolio-Designs. Die erste ist für die weibliche Version und die zweite für die männliche Version. Also werde ich diese weibliche Portfolio-Version verwenden , um unsere Website zu gestalten. Also werden wir die Website für Hannah Clark entwerfen. Um das zu tun, benötigen wir einen Host in und eine Domain. Okay, wenn du vorhast, eine neue Domain zu kaufen und sie zu hosten, kannst du diese Lektion überspringen und mit der nächsten Lektion fortfahren In der nächsten Lektion werde ich Ihnen zeigen, wie Sie eine Domain und einen Hosting-Server kaufen Wenn Sie jedoch bereits eine Domain und einen Hosting-Server haben , zeige ich Ihnen in dieser Lektion, wie Sie eine Subdomain erstellen und unsere Website auf einer Subdomain hosten Also lass uns anfangen. Jetzt bin ich im C-Panel meines Hosting-Anbieters, also verwende ich Name Cheep als Hosting-Anbieter Also gehe ich hier zum Domain-Bereich. Im Domain-Bereich klicke ich einfach auf die Domains. Jetzt kann ich hier alle Domains sehen , die ich derzeit habe. Ich werde diese benutzerdefinierte Website design.us-Domain verwenden , um eine Subdomain zu erstellen Um eine Subdomain zu erstellen, klicke ich einfach auf Created Domain klicke ich einfach auf Jetzt gebe ich hier den Namen der Subdomain ein. In meinem Fall wird es Hana Dot Custom Website Design US sein Hana Dot Custom Website , denn wenn wir eine Subdomain erstellen, müssen wir die Hauptdomain auswählen Also kopiere ich einfach die US-Domain mit benutzerdefiniertem Website-Design, und hier füge ich einfach Hanna Dot hinzu und füge die Subdomain stufenweise hinzu , weil unser Psonas oder der Name unseres Business Okay. Wenn ich jetzt hier den Domainnamen eingebe, können Sie sehen, dass wir einen Stammnamen für das Dokument als Subdomain-Namen haben einen Stammnamen für das Dokument als Subdomain-Namen Und hier haben wir den Dokumentenstamm gemeinsam genutzt und es hat den Dateiteil für öffentliches SDML Wenn ich also diesen gemeinsamen Dokumentenstamm nehme, diese US-Dateien mit benutzerdefiniertem Hanad-Website-Design passen sich diese US-Dateien mit benutzerdefiniertem Hanad-Website-Design an öffentliches DML an, aber das müssen wir nicht tun, also werde ich das nicht überprüfen Mit den Einstellungen wird also benutzerdefinierte Hanadt-Ordner design.us im öffentlichen SDML-Ordner erstellt Wenn ich mit der Maus über das Home-Symbol fahre, Dokumentenverzeichnis angezeigt, in dem wir diesen Ordner erstellen werden Jetzt klicke ich auf die Schaltfläche „Senden“. Okay, jetzt wurden unsere Subdomains erfolgreich erstellt, und wenn wir auf diesen Ordnerpfad klicken, wird der Dateimanager geöffnet Wenn wir auf diese Subdomain klicken, wird die Domain-Vorschau geöffnet, aber derzeit gibt es eine Meldung und wir müssen etwa 20 bis 30 Minuten warten , bis DNS richtig konfiguriert Lassen Sie uns in der Zwischenzeit einen Ordner namens Test Dot TML auf unserer neu erstellten Und lass uns dort klicken und auf Bearbeiten klicken und es bearbeiten. Dann fügen wir hier Text hinzu, als ob es sich um eine Subdomain handelt. Lass es uns wie Hallo machen. Das ist eine Subdomain. Also klicke ich jetzt auf Conceive Changes und lass uns versuchen, es erneut zu repash Wenn ich es erneut packe, wird eigentlich nichts angezeigt. Warten wir also etwa 20 Minuten und danach werde ich sehen. Okay, ich habe etwa 20 Minuten gewartet, und hier ist das Aussehen der Website, wenn wir sie besuchen. Also hier ist die Textpunkt-HTML-Datei, die wir erstellt haben. Wenn wir auf Weiter klicken, können wir unsere Nachricht sehen Hallo, das ist eine Subdomain, Text, den wir hinzufügen 6. Kauf einer Domain und Hosting: 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 die benutzerdefinierte Punkt-S-Domain 4099 für Webdesign. 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 werde ich den Promo-Code hinzufügen, ihn von hier kopieren und so einfügen 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 Website verwenden möchten den Derzeit gibt es also einen Black Friday-Deal . Deshalb ist der Betrag so gering. Dennoch ist Namecheap 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 Jetzt klicke ich auf Jetzt starten und hier legen wir sie als neue Domain fest und klicken auf Bereits in der Karte und unsere Gesamtkosten betragen 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, z. B. wenn wir zur B-Punkt-XYZ-Domain gehen, 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 Custom Website Design-Punkt 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. 7. Installieren Sie WordPress auf Ihrem Hosting: Hallo zusammen. Jetzt müssen wir WordPress auf unserer Website installieren. Um das zu tun, gehe ich zum C-Panel. Im C-Panel sehen Sie Softaguls App Installer Also klicke ich einfach darauf. Wenn ich darauf klicke, werde ich auf diese Seite weitergeleitet und hier klicke ich auf In WordPress installieren Wenn ich auf Installieren und dann auf Installations-URL auswählen klicke , wähle ich Hana Dot Custom Web Design, USA, dann füge ich kein Verzeichnis hinzu und wir wählen die neueste Version als unsere WordPress-Version Und als Seiteneinstellung können wir den Namen und die Seitenbeschreibung hinzufügen. Aber im Moment werde ich keine hinzufügen, und im Admin-Konto müssen wir den Admin-Benutzernamen und das Admin-Passwort hinzufügen. Und hier haben wir das Plug-in, ich werde eines davon abwählen und wir fügen sie später Wenn Sie möchten, können Sie sie behalten. Also ich habe ein Admin-Konto mit einem Admin-Benutzernamen, ich füge einfach den Benutzernamen hinzu. Es kann Hannah oder Admin Hanna oder so etwas sein. Ich füge einfach Admin hinzu, dann generiere ich mit dem Admin-Passwort ein Passwort und merke mir immer diese, verwende einen Namen und ein Dazu müssen Sie sich auf der Website anmelden. Dann füge ich unter Admin-E-Mail eine Admin-E-Mail wie folgt hinzu. Danach klicke ich einfach auf die Schaltfläche Installieren. Jetzt fängt es an zu installieren. Jetzt haben wir hier die Website Wordpress installiert. Wenn ich also auf diesen klicke, kann ich zum Backend gehen und wir können einfach über unseren Website-Slash WB Admin auf das Backend zugreifen Okay, wir haben Wordpress erfolgreich installiert 8. Bereinigen Sie das WordPress-Dashboard: Hallo alle zusammen. Jetzt müssen wir unser WordPress-Dashboard aufräumen. Fangen wir also von oben an. Von hier aus haben wir diese Bildschirmoptionen. Ich klicke einfach darauf und hier kann ich die Bildschirmelemente dieses Dashboards entfernen. Also werde ich sie alle entfernen , weil ich vorerst keine davon benötige. Also werde ich jetzt auf diese Bildschirmoption klicken, um sie auszublenden. Und jetzt haben wir hier ein übersichtliches Dashboard. Dann gehen wir hier zu Earl Post. In ErlPost haben wir diesen Hello World-Beitrag. Ich werde auf TASH klicken und es in den Papierkorb schicken. Dann gehe ich zu TAsh und klicke auf Dauerhaft löschen. Nun zu Kategorien, wir haben keine Kategorien, wir haben nur diese Standardkategorie und die Medienbibliothek, mal sehen, wir haben keine Medienbibliothek, dann klicke ich auf R-Seiten auf ER-Seiten, wir brauchen diese Beispielseite oder diese Datenschutzseite nicht oder diese Datenschutzseite Also entferne einfach beide. Klicken wir dann im Papierkorb auf Dauerhaft löschen und hier auf Dauerhaft löschen. Dann zu den Befehlen, mal sehen, wir haben keine Befehle und beim Aussehen klicken wir darauf. Bezug auf Themen haben wir drei Themen, aber wir werden Elementor Pro verwenden, um diese Website zu gestalten, also werden wir Hello Elementor Them installieren Lassen Sie uns vorerst das Theme von Earl deaktivieren oder inaktiv machen. Den brauchen wir auch nicht. In Zukunft werden wir das Halo Elemental Theme installieren. Lassen Sie uns dies vorerst als Hauptthema behalten oder es gibt das aktive Plugins klicken Sie auf PlugIn installieren und hier brauchen wir weder dieses Chisme noch Hedoly-Plug-ins Also Radio, ich habe dir gesagt, dass ich den Namen Jeep im Namen Jeep verwende, Light Speed-Cache Vorerst werde ich es so belassen. Aber in Ihrem Fall machen Sie sich keine Sorgen, wenn Sie den Lightspeed-Cache nicht sehen . In zukünftigen Lektionen werden wir lernen, wie man das Light Speed Cache Plugin installiert und konfiguriert , um die Geschwindigkeit unserer Website und des Caches zu verbessern. Okay, jetzt bei Benutzern oder Benutzern, es hat nur mein Benutzerkonto. Jetzt haben wir eine saubere Website. Wenn wir also zum Dashboard gehen und hier haben wir eine neue World-Website, und in der nächsten Lektion beginnen wir mit dem Design. 9. WordPress – Schritt-für-Schritt-Anleitung: Hallo, alle zusammen. Eigentlich habe ich vergessen, die WordPress-Arbeit per Video zu erstellen. Also lass es uns jetzt machen. Also werde ich mich zuerst hier abmelden und auf Abmelden klicken Und um uns auf der WordPress-Website anzumelden, können wir nach der URL der Website und im WP-Adminbereich wie folgt einen Schrägstrich hinzufügen URL der Website und im WP-Adminbereich Dann kommen wir zu dieser WordPress-Anmeldeseite und hier müssen wir den Benutzernamen und das Passwort der Wordpress-Website hinzufügen , die wir registriert haben 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 . 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 über das neue 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. Ich bewege den Mauszeiger 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. Also, wenn ich hier auf ErlFost klicke, können wir auf AdNWPost und dann auf Ad NW 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 Sachen 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 Zeug 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 , ist dieses Element - oder Website-Builder-Plugin aufgetaucht, und hier steht, dass es zuletzt vor einer Woche aktualisiert wurde und es mit der Version unserer WordPress-Website kompatibel ist. Es heißt design elemento.com, und wir können einfach auf „Jetzt installieren“ klicken und das Plugin installieren, dann aktivieren, und es erscheint der Bereich „Installiertes Plug-In“ A Von hier aus können wir auf dieses Upload-Plugin klicken, und wenn wir das Plugin 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 angefangen. Am Anfang haben wir einen Abschnitt wie allgemeines Schreiben, Lesen in Diskussion und hier können wir die Randdetails 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. 10. Installation von Elementor Pro: 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-Widgets erhalten und es hat 86 Projekte, aber mit dem Essential-Plan haben wir nur 57 Projekte Als ob wir zum Bereich Marketing und E-Commerce gehen würden, mit dem Advanced-Solo-Plan erhalten wir mit dem Advanced-Solo-Plan den 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 erweiterten Tarif wechseln. Oder wenn Sie freiberuflich tätig sind und Websites für Ihre Kunden erstellen, können Sie die Expertenversion erwerben diese Art von Plan entscheiden, können wir viele Plugins und Add-Ons ersetzen . Dies wird dazu beitragen, die Ladegeschwindigkeit der Seite zu erhöhen und die gesamte Website zu optimieren Fangen wir an, Elementor zu installieren. Dazu gehe ich zum Dashboard unserer Website und hier gehe ich zu Plugins und klicke auf Ad NE Zuerst müssen wir das Elemento Pre Plugin installieren. Von hier aus werde ich nach Elemento suchen. Dann haben wir hier das Elementor Website Builder-Plugin. Es wurde von elemento.com entwickelt und ist mit unserer Wordpress-Version kompatibel Ich klicke auf Jetzt installieren. Okay. Dann klicke ich auf Aktivieren. In Ordnung. Jetzt klicke ich auf Überspringen und überspringe diesen Schritt oder ich klicke auf 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 klicke ich auf der Advance Solo-Website, Builder-Plan, auf die Schaltfläche Jetzt , und hier muss ich die Details eingeben 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 wechseln , indem Sie mid elemento.com hinzufügen Und wenn Sie das tun, werden Sie diese Art von Download-Symbol sehen, und dann sehen Sie Element Plug in Download, klicken Sie darauf, dann wird der Download gestartet und jetzt haben Sie das Element-Plugin Lassen Sie uns jetzt unsere Website einrichten . Nachdem ich es heruntergeladen habe, gehe ich zu Plugins und klicke auf Ad Plugin. Und hier kann ich auf Plugin hochladen klicken und hier ankreuzen, um das Bundle zu bekommen, dass wir den CFle Dragon Rob herunterladen , die C-Datei, die wir von der Elementor-Website bekommen Klicken Sie dann auf Jetzt installieren und dann auf Active Plug Okay. Jetzt sehen wir hier den Abschnitt Elemento Plug In Wenn Sie diese Art von Nachricht sehen, klicken Sie einfach auf Verbinden und aktivieren und dann auf Verbinden und aktivieren Okay. Wenn wir jetzt zur Lizenz übergehen, ist der Status aktiv. Jetzt können wir die Elemento Pro-Funktion auf unserer Website verwenden und dieses universelle Portfolio ganz einfach auf unserer Elementor-Website entwerfen dieses universelle Portfolio ganz einfach auf unserer Elementor-Website 11. Elementor Editor – Schritt-für-Schritt-Anleitung: 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 G-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 kehre ich zur Desktop-Version zurück. 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 lassen Sie uns das als Mitte verwenden, 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. 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 12. Einrichten globaler Farben in Elementor: Hallo, alle zusammen. Jetzt müssen wir das Theme installieren, um das über das Erscheinungsbild zu erledigen und auf Theme klicken. Und hier, klicken Sie auf sie und suchen Sie hier Hello elemento Hier ist das Hello Elementor-Thema, klicken Sie darauf und wenn Sie auf Weiter klicken, können Sie Hello Elementor von Elemento sehen Klicken Sie nun auf Installieren. Klicke auf Aktivieren Okay, jetzt ist es aktiviert, dann klicke ich auf dieses 2025-Thema und klicke auf Löschen, weil wir dieses Theme nicht brauchen und nett. Jetzt müssen wir die Seiteneinstellung einrichten. Um das zu tun, gehe ich zuerst zu Seiten und klicke auf Seiten. Und hier haben wir eine Standardseite, also klicke ich auf Papierkorb, weil wir dieses Element oder zehn Seiten nicht benötigen, gehe dann in den Papierkorb und entferne es, indem ich dauerhaft auf Löschen klicke, aber dann klicke ich auf Seite und jetzt werde ich die Homepage erstellen. Hier füge ich den Titel als Startseite hinzu, dann klicke ich auf Mit Elemento bearbeiten Wenn ich auf Mit Elementor bearbeiten klicke, öffnet sich die Elementor-Arbeitsfläche und von hier aus können wir die Website und die Seiteneinstellungen gestalten, wir können das Seitensatz im Titel ändern und in zukünftigen Lektionen Experten hinzufügen. Ich werde dir zeigen, wie du Auszüge hinzufügst und wie du unsere Homepage in Suchmaschinen wie Google einstufst Lassen Sie uns vorerst die Seiteneinstellungen dafür einrichten. Ich werde auf das Symbol für die Seiteneinstellungen klicken, und hier können wir globale Farben und globale Schriftarten hinzufügen. Wenn wir also zu unserer universellen Dfolio-Website gehen, haben wir ein Itca-Blatt In diesem Ita-Blatt haben wir die Farben Zum Beispiel ist dies die Primärfarbe, und dies ist die Textfarbe, und diese weiße Farbe ist die Sekundärfarbe. Lassen Sie uns also diese Details hinzufügen. Um diese Details hinzuzufügen, gehe ich zur Website und klicke zuerst auf diese globale Farbe. Wir haben die Systemfarben. Lassen Sie uns diese Systemfarben ändern. Erstens haben wir den Primärbereich. Holen wir uns die Primärfarbe. Dazu klicke ich auf diese erste Farbe und dann hier, dann auf dieses Symbol im T-Stil bearbeiten und kopiere diese Farbeigenschaft und klicke hier und füge sie dann so ein. Der Name wird die Primärfarbe und dann haben wir diese Textfarbe. Klicken Sie hier, klicken Sie auf EdittStyle und kopieren Sie die Farbe dann in den Text, fügen Sie den Farbcode und Textfarbe ein, ändern Sie diesen Titel in eine Textfarbe, und dann haben wir diese weiße Wir können das Gleiche mit diesem machen. Dies wird eine Sekundärfarbe sein und die Farbe wird wie folgt eingefügt. Eigentlich müssen wir vor der Farbe einen Hashtag hinzufügen. Okay. Dann haben wir diese Akzentfarbe, aber in diesem Fall haben wir diese Ho-Her-Farbe. Um den Her-Farbcode zu kopieren, müssen wir ein Rechteck wie dieses erstellen und dann hier klicken, dann die OA-Farbe auswählen und jetzt können wir auf Variable trennen klicken Der Grund dafür ist, dass wir diese Cho-Farbe derzeit nur in diesem Farbwürfel verwenden diese Cho-Farbe derzeit nur in diesem Farbwürfel Wenn wir sie also einfach trennen, wird die Variable entfernt Jetzt kann ich den Farbcode von hier kopieren und hierher kommen und den Farbcode so platzieren Dann machen wir hier diese Powerfarbe. Okay. Jetzt haben wir die Farbcodes für Earl. Jetzt klicke ich auf Änderungen speichern. Dann werde ich diesen entfernen. Dann gehe ich zurück, klicke auf Speichern und jetzt können wir hier klicken, um die Schrift hinzuzufügen. Jetzt haben wir hier dieselbe Struktur. Eigentlich können wir hier klicken, um zu diesem Abschnitt zu gelangen. Okay, jetzt müssen wir Text hinzufügen. Lassen Sie uns diesen Text tatsächlich entfernen und auf Instigaset werde ich all diese Texte hinzufügen, was bedeutet, dass wir das Itigaset bearbeiten müssen Nachdem ich das Itigaset bearbeitet habe, werde ich 13. Konfigurieren von Site-Einstellungen und globalen Schriftarten in Elementor: Hallo, alle zusammen. Versuchen wir nun, diese Typografie hinzuzufügen Zuerst haben wir den Header, also gehe ich einfach zur Sitzeinstellung und als Primärtext ändere ich diesen Text in Header Dann doppelklicken Sie einfach hier und kopieren Sie es so. Dann klicken Sie hier und lassen Sie uns die Typografie sehen, also hier haben wir Nunito bold 50. Damit wir das überprüfen können, suchen wir nach Nunito-Größe ist 50 mit diesem Ball, und was ist die Die Zeilenhöhe ist Otto, lassen Sie uns die Zeilenhöhe auf 50 setzen. Ja, die Zeilenhöhe wird 44 sein. Lassen Sie uns die Zeilenhöhe so einstellen, dass die Zeilenhöhe 50 sein wird. Okay. Als Nächstes haben wir diese Subheader-Schrift Nunito Semibolt 26. Lass uns das machen Das zweite W wird Einheit oder 26, halbfett sechs sein, wir werden halb fett sein und Einheit wird 30 sein Ich glaube, es waren 30. Lass uns sehen. Es ist 33, machen wir 30 draus. Okay. Dann ändere ich diesen Text in eine Zwischenüberschrift, kopiere und füge sie wie folgt ein Dann haben wir Text. Text bedeutet Absatz, kopiere den Absatztext. Es ist so, dann müssen wir die Schrift hinzufügen. Die Schrift ist open sans regular 18 30 open cents 18 regular bedeutet normal und line ist 30. Wenn es irgendwelche Probleme gibt, können wir sie einfach entfernen, indem herkommen und wir Akzent setzen? Ja, wir haben jetzt Buttons, kopiere den Button-Text und stelle ihm Akzentfarben vor und klicke hier, dann ist es Open Semi Wold 22, Open Semi Volt Größe ist 22 und die Zeilenhöhe wird 30 sein Ich glaube, es ist 30? Nein, es ist 25, Iinight ist Jetzt müssen wir die benutzerdefinierten Anleihen hinzufügen weil wir die Manline-Schrift hinzufügen müssen Menülink und so einfügen , dann hier klicken und einfach hinzufügen öffnet Semivolteighteen, OpenSemivolteighteen Und was ist mit Line Night is 21. Okay, jetzt haben wir Earl-Schriften, also klicke ich jetzt auf Änderungen speichern. Okay, dann klicke ich hier, um zurück zu gehen, und auf den Mistie können wir ihn ignorieren , weil wir Element- oder Editor-Eigenschaften verwenden werden Element- oder Editor-Eigenschaften verwenden Also ignoriere einfach diese Theme-Stile. Dann haben wir den Abschnitt hinzugefügt, und als ersten Teil haben wir die Identität der Website. Gehen wir dorthin, und hier müssen wir den Namen der Site und die Beschreibung der Site hinzufügen. Fügen wir unseren Site-Namen hinzu. Der Name der Website ist Hannah Clark, also werde ich den Text einfach von hier kopieren und so einfügen Dann werde ich es als Seitenbeschreibung leer machen Eigentlich können wir diese Artikel ändern, wenn wir das auf der Seite CO machen. Hier müssen wir das Sit-FV-Symbol hinzufügen, und in unserem Tiger-Sheet erstelle ich einfach ein Favicon, das die ersten Buchstaben des Namens von Hannah Clark enthält Also klicke ich einfach auf Exportieren und mache es zu JPG und klicke auf Klicken Sie auf FVcon, stellen Sie das JPEG klicken Sie auf Favicon exportieren Und jetzt müssen wir zu winzigem PNG gehen. Jetzt sind wir bei tiny png.com, also tiny PNG ist das Tool zur Dateikomprimierung, das hilft, die Dateigröße zu reduzieren Also hier haben wir 37 Kilobyte und jetzt haben wir 8 Kilobyte. Klicken Sie auf die JPG-Schaltfläche, um es herunterzuladen, und dann gehen wir hierher und klicken Sie auf Sit Favicon und lassen Sie uns es gehen wir hierher und klicken Sie auf Sit Favicon und Dann einfach bei ALT, ein Gas-TV-Symbol. Dann geh zurück, jetzt haben wir einen BH-Bereich. Einstellung ist der wichtige Teil das Layout Klicken Sie im Layout auf Layouts, die Inhaltsbreite ist 1.140 und das ist die Standard-Inhaltsbreite, obwohl unser Figma-Design eine Breite von 1.440 hat, Bei der Einstellung ist der wichtige Teil das Layout. Klicken Sie im Layout auf Layouts, die Inhaltsbreite ist 1.140 und das ist die Standard-Inhaltsbreite, obwohl unser Figma-Design eine Breite von 1.440 hat, aber bei diesen 1140 Pixeln die elementare Standardbreite Containers setze ich sie dann auf Null und die Lücken werden 20 und die Lücken werden Also, wenn wir hier auf dieses Bild klicken und Alt drücken und den Abstand zwischen den Seiten überprüfen, es 20, das ist also der Spaltenabstand, und lassen Sie uns den Zeilenabstand überprüfen. Die Zeilenlücke ist die Zeilenlücke ist zehn, also machen wir, aap ist eine Lücke ist zehn. Okay. Standard-Seitenlayout ist jetzt Element oder volle Breite, nicht Themenelement oder volle Breite. Und der Breakpoint ist Standard, und jetzt klicken Sie auf Änderungen speichern Okay, geh zurück und wir können vorerst andere Dinge ignorieren. Okay, jetzt gehe ich zurück und so sieht unsere Website aus. Eigentlich muss ich diese Seite neu aufrufen , um die neue Version zu überprüfen Okay. In der nächsten Lektion werden wir den Header entwerfen. Vorerst werde ich auf Veröffentlichen klicken und die Homepage veröffentlichen. Dann gehe ich nach deiner Website, RL, zum WordPress-Dashboard bei WP Admin Dann können wir loslegen und weiter lesen, deine Homepage-Anzeige auf eine statische Seite ändern und die Homepage auswählen und dann auf Änderungen speichern klicken. Wenn wir jetzt die Website besuchen, wird die Website so aussehen und in der nächsten Lektion beginnen wir mit der Gestaltung unserer Website. 14. Entwerfen des Kopfzeilenmenüs – Teil 1: Hallo, alle zusammen. Jetzt ist es an der Zeit, die Website zu gestalten. Ich gehe zur Universal-Portfolio-Website Fake Mobile, und das ist die Version, die wir entwerfen werden. Also hier brauchen wir dieses Rasterlayout nicht, also werde ich einfach hier klicken, um es auszublenden. Und jetzt haben wir hier ein klares Design. Als ersten Schritt müssen wir also diesen Abschnitt, diesen Header, erstellen. Lass uns das tun. Dazu gehe ich auf unsere Website und gehe zum Dashboard. Im Dashboard benötigen wir dieses Element oder diese Übersicht eigentlich nicht Klicken Sie also auf Bildschirmoptionen und entfernen Sie es. Okay. Jetzt zur Vorlage, ich klicke auf Team Builder. Bei ihnen Builder haben wir separate Abschnitte. Also hier haben wir Header, Footer, Single Forced, Single Page und solche Sachen Als ersten Schritt müssen wir also die Kopfzeile erstellen Also klicke ich einfach auf diesen Plus-Zyklus. In Ordnung. Jetzt öffnet es das Element oder den Editor, und hier haben wir eine Bibliothek, also können wir in dieser Bibliothek einen fertigen Designheader finden, aber ich werde keins davon verwenden, also klicke ich einfach auf das Schließen-Symbol und hier haben wir das Element oder den Editor. Also hier klicke ich auf dieses Plus-Symbol und wir werden Flexbox verwenden, also klicke ich einfach auf Flexbox und der Plexbox-Typ wird direkt angezeigt Okay. Füge es so hinzu und ich klicke darauf und auf Advance, ich werde Ränder und Abstände entfernen. Als ersten Schritt müssen wir also dieses Logo hinzufügen, um es hinzuzufügen, ich wähle es aus, ich wähle es aus, dann klicke ich auf Exportieren, und hier mache ich es zu JBG, weil das Display oder der Inhalt weiß ist und wir nicht brauchen, wir brauchen keinen transparenten Hintergrund Dann klicke ich auf Port. Und lass uns zu Tiny PNG gehen und es einfach hier ablegen. Dann wurde es optimiert, dann klicke ich auf diese Schaltfläche, um es herunterzuladen und los geht's. Und als ersten Schritt müssen wir das Logo hinzufügen. Also hier können wir einfach ein Seitenlogo wie dieses hinzufügen und hier können wir das Logo hinzufügen. Klicken Sie also einfach auf Seitenlogo ändern und hier auf Seitenlogo, und dann müssen wir die Download-Seite hochladen. Und lass uns den Titel kopieren und ihn so einfügen, Hanas. Lass uns daraus ein Logo machen. Wir müssen immer das ALT-Tag hinzufügen. ALT-Tag ist für die Suchmaschinenoptimierung sehr wichtig Wenn dieses Logo nicht geladen wird oder wenn es fehlt, wird das ALT- oder ol-Tag angezeigt. Fügen Sie also immer aussagekräftigen Text hinzu (altes Tag). Okay, ich klicke auf Änderungen speichern und klicke jetzt auf Zurück zum Editor, und unser Logo wurde einfach so hinzugefügt, aber wir brauchen es auf der linken Seite, um es auf der linken Seite zu machen, ich klicke auf den Container und auf Layout, ich füge diese Richtung als rohe horizontale Richtung hinzu, und nur der Y-Inhalt wird gestartet. Okay, es kam auf die linke Seite. Und jetzt wollen wir die Zwischenseiten herausfinden. Also hier haben wir 20 als Top. Um diese Details zu erhalten, können Sie einfach das Element in der Figma-Datei auswählen, das Sie überprüfen möchten, und auf Figma-Datei auswählen, das Sie überprüfen möchten, und ALTO all Tag drücken Ihrer Tastatur auf ALTO all Tag drücken, um die Größe dazwischen zu sehen Und wenn wir die Größe zwischen den beiden sehen wollen, klicken Sie einfach so und finden Sie sie Also ich gestalte die Website nach Maß, volle Klasse, Sie können diese Informationen finden. Also fügen wir 20 als oberste Position hinzu, gehen wir hier hin und auf Container, gehen wir zu Weiter, dann wird der obere Rand 20 sein, so wie hier. Okay. Dann müssen wir das Menü hinzufügen. Um das Menü hinzuzufügen, können wir einfach auf Element hinzufügen und das Suchmenü auswählen Hier erhalten wir das WordPress-Menü. Kopieren Sie es einfach und ziehen Sie es hierher. Also ziehe es einfach hierher und es wird dem Container hinzugefügt, und wir müssen ein Menü erstellen , bevor wir damit fortfahren, ich kann einfach darauf klicken. Gehen Sie zum Menübildschirm, um eines zu erstellen, und hier können wir ein Menü erstellen. Für den Menünamen füge ich also das Hauptmenü hinzu und klicke auf Menü erstellen. Wählen Sie keines dieser Dinge aus, erstellen Sie ein einfaches Menü. Okay. Von hier aus können wir Seiten hinzufügen, Beiträge posten oder benutzerdefinierte Links hinzufügen. Also hier werde ich die Homepage auswählen. Auf Seiten haben wir eine Homepage. Ich füge es einfach hinzu und dann haben wir ein anderes Menü wie A Services und Testimonial, lass uns eine Verbindung herstellen Das ist also eine Landingpage. Wenn ich auf der Landing Page auf dieses A klicke, wird es zum A-Bereich weitergeleitet. Um das hinzuzufügen, müssen wir diesen benutzerdefinierten Link verwenden. Benutzerdefinierter Link füge ich die Links hinzu, über die Treppe führt , und als URL fügen wir vorerst den Hashtag hinzu, nachdem wir alle Abschnitte abgeschlossen haben , und dann können wir das Menü einrichten, was bedeutet, wenn ich auf „Über“ klicke, wird es sich auf den Abschnitt A beziehen, der sich wie folgt Okay. Klicken Sie jetzt auf Zum Menü hinzufügen, dann haben wir den Service, den Text zu kopieren und hier, platzieren Sie den Text am URLS-Hashtag, klicken Sie auf AddTo Menu, dann hier das Testimonial, kopieren Sie es und kommen Sie hierher, platzieren Sie den Linktext und fügen Sie den Okay. Dann auf Lass uns eine Verbindung herstellen, sollte das ein Button sein, also müssen wir ihn separat erstellen. Vorerst werde ich diese Sachen hinzufügen und auf Menü speichern klicken. Dann gehen wir zurück und jetzt müssen wir das mit den Details veröffentlichen. Bevor wir es veröffentlichen, erstellen wir es als Speicherentwurf wie diesen und veröffentlichen es, nachdem wir den vollständigen Menübereich oder den vollständigen Kopfzeilenbereich erstellt haben. Dann klicke ich auf das Reload-Symbol, um diese Seite neu zu laden. Okay. Nachdem ich es neu geladen habe, wurde es einfach hinzugefügt Jetzt klicke ich auf das WordPress-Menü und das Menü ist ausgewählt, weil wir nur ein Menü haben, und lassen Sie uns diese Details anpassen Zuerst wird das Layout horizontal sein und die Anordnung wird Ir sein und wir brauchen keinen Zeiger, machen keinen, und wir haben kein Untermenü, und im Drop-down-Menü für Mobilgeräte können wir weitere Details hinzufügen, können wir weitere Details hinzufügen, aber lassen Sie uns das im Bereich Responsive Design tun Und jetzt müssen wir zu E-Stile gehen. In E-Stilen können wir die Typografie festlegen. Die Typografie sollte aus Menülinks bestehen. Wussten Sie, dass wir Menülink-Typografie auf globalen Schriftarten erstellen Menülink-Typografie auf globalen Wir haben es im Bereich mit den Seiteneinstellungen gemacht, und wenn wir den Mauszeiger darüber bewegen, machen wir die Textfarbe zu dieser Primärfarbe wie folgt Oder vielleicht fügen wir hinzu, fügen wir ihre Farbe als orange Farbe Und wenn sie bei Aktivierung orange erscheint, müssen wir die Primärfarbe einstellen. Die Primärfarbe wird diese grüne Farbe sein. Okay. Jetzt brauchen wir keine Trennwände wie diese, entfernen sie und jetzt müssen wir die horizontale Polsterung hinzufügen, um sie hinzuzufügen Wir können einfach auf ein Menü wie dieses klicken, drücken und den Mauszeiger über das Die Größe dazwischen ist 36. Stellen wir die horizontale Polsterung auf 36 ein. Okay. Als Nächstes können wir vertikale Polsterung hinzufügen Sehen wir uns die vertikale Polsterung von hier aus an, sehen wir uns die vertikale Polsterung an. Es ist 14. Machen wir daraus 14. Okay. Eigentlich sollte das horizontale Muster Null sein und der Abstand dazwischen 36 sein, so wie hier 36? Ja, es ist 36. Der Abstand dazwischen sollte 36 sein und das horizontale Muster sollte Null sein, so wie hier. Okay. Wir haben kein Drop-down-Menü und wir haben keine Gesamtschaltfläche in der Desktop-Version. In der mobilen Version haben wir es getan. Okay. Jetzt müssen wir die Ausrichtung korrigieren. Lassen Sie uns das Problem beheben, klicken Sie auf diesen Container und fügen Sie das Align-Element als Mittelpunkt wie folgt hinzu. Okay, dann müssen wir eine Schaltfläche hinzufügen, um diese Schaltfläche „ Lass uns verbinden“ hinzuzufügen, ich kann auf Element - und Suchschaltflächen klicken. Und hier haben wir eine Schaltfläche, einfach so ziehen und ablegen. Also lass es hierher fallen, ich werde einfach hier klicken und es so platzieren. Okay, jetzt können wir diese Schaltfläche an das Figma-Design anpassen diese Schaltfläche an das Figma-Design 15. Entwerfen des Kopfzeilenmenüs – Teil 2: Okay, jetzt müssen wir diesen Button entwerfen. Wählen Sie dazu die Schaltfläche und gehen wir zu unserem Figma-Design und überprüfen Sie die Details Die Schaltflächenfarbe ist also die Feldfarbe. Und was ist mit dem Button-Text? Der Button-Text ist, glaube ich, Männertext. Ja, es ist manueller Ink-Text. Gehen wir also dorthin und ändern wir zuerst den Text Der Text wird „Lass uns eine Verbindung herstellen“ lauten. Ich kopiere es einfach und füge es so ein. Dann fügen wir vorerst Link als Hashtag hinzu. Gehen Sie dann im E-Stil zum E-Stil, die Tastenposition wird Spitze sein und die Typografie ist männlich Dann brauchen wir keinen Textschatten, und bei normaler Textfarbe ist diese Primärfarbe Nein, die Textfarbe ist Sekundärfarbe, weil die Textfarbe weiß ist. Ja, die Textfarbe ist weiß. Jetzt wird der Hintergrundtyp klassisch sein und die Farbe wird diese Primärfarbe sein. Und wenn Sie mit der Maus darüber fahren, ist die Textfarbe immer noch die Sekundärfarbe und die Hintergrundfarbe wird diese Farbe wie diese sein Okay, lassen Sie uns vorerst keine Animationen hinzufügen. Oder wenn wir wollen, können wir einfach Like Grow hinzufügen. Wenn ich mit der Maus drüber fahre, wird es so wachsen Okay, jetzt müssen wir den Grenzradius hinzufügen. Sehen wir uns also den Grenzradius an. Es ist 30. Der Eckradius ist 30. Hier haben wir den Grenzradius. Lass uns so 30 draus machen. Dann müssen wir die Polsterung hinzufügen. Lassen Sie uns den Wert für den Moment auf Null setzen und uns die Polsterung ansehen, den Text verschließen, alles drücken und so, es ist 30 und links und rechts ist 30 und oben und unten Lass uns die Nummer 18 draus machen. Eigentlich müssen wir die Verknüpfung des Wertesymbols aufheben. Wir müssen auf das Symbol „Wert aufheben“ klicken. Dann rechts auf 30, unten 18, linker Einsatz *** Okay. Wenn wir nun zum Design gehen, befindet sich das Menüset auf der rechten Seite und dieses Logo auf der linken Seite. Um das zu tun, müssen wir zum Container gehen, und wir können es einfach leicht machen. Wir können es einfach wie einen Zwischenraum machen. Und wenn wir das tun, ist das Menü in der Mitte und diese Schaltfläche ist links. Wenn wir jedoch zum ursprünglichen Design übergehen, sollte der Abstand zwischen dieser Schaltfläche und dem Menü 36 betragen. Um das Problem zu beheben, müssen wir ein Element hinzufügen, und hier müssen wir einen Container hinzufügen, einfach einen Behälter mit Lappen und Roper wie diesen Ich habe nicht hinzugefügt. Lass es uns so machen. Okay. Fahren Sie dann fort und entfernen Sie den Rand und die Polsterungen im Layout Lassen Sie uns die Verknüpfung der Werte für die Lücken aufheben, und der Spaltenabstand beträgt 36. Okay. Jetzt werde ich dieses WordPress-Menü so in diesen Container einfügen. Lass es uns einfach so hinzufügen. Nein, nein, ich habe nichts hinzugefügt, so und dann machen wir dasselbe mit der Schaltfläche, und sie sollte so aussehen. Okay. Wenn wir jetzt auf den Container klicken, können wir die Richtung auf horizontal ändern. Und der Inhalt für die Rechtfertigung wird N sein, und wir haben die Spalte Gap Pass 36 hinzugefügt. Wenn wir sie auf Null setzen, wird es so sein, es sollte 36 sein, und wenn wir es jetzt überprüfen, können wir deutlich den Abstand zwischen dem Design erkennen und wir erreichen einfach das, was wir erreichen wollen. Wenn wir also hierher gehen, wird es so aussehen und wir klicken auf „ Vorschau der Änderungen“ und es wird in einem neuen Fenster geöffnet. Die Website wird also auch wie das Design aussehen. Erstellen Sie in diesem Container einen Einzelposten als Mittelpunkt wie folgt. Okay, jetzt ist unser Header-Teil fertig. Dieser Teil, also was ich jetzt tun kann, ist auf Veröffentlichen zu klicken. Wenn ich auf Veröffentlichen klicke, haben wir einen Power-Call. Wo möchtest du deine Vorlage anzeigen? Ich klicke auf diese Anzeigenbedingung und sorge dafür, dass sie die gesamte Website umfasst. Ich möchte dieses Menü auf der ganzen Seite sehen. Jetzt können wir also weitere Bedingungen hinzufügen, aber wir möchten sie auf der gesamten Website anzeigen. Dann klicke ich auf Speichern und Schließen und auf das Menü Veröffentlichen. Wir können es von hier aus sehen. Okay, jetzt gehe ich zum WordPress-Dashboard und wenn wir hier zum Template- und Theme-Builder gehen , können wir unseren sehen , aber der Name ist nur Element oder Header, Hashtag 226, wir müssen ihn ändern, um ihn zu ändern Wir können auf Bearbeiten klicken. Dann klicke ich hier auf diesen eingestellten Header und auf den Titel, ich ändere diesen Titel in Header, Header und klicke auf Veröffentlichen. Wenn wir dann zurückgehen und es überprüfen, wird es so aussehen. Okay. 16. Entwerfen des Heldenbereichs – Teil 1: Hallo, alle zusammen. Wir haben gerade erfolgreich den Header entworfen. Jetzt müssen wir das Design fortsetzen. Jetzt muss ich zur Homepage gehen, ich werde einfach zu unserem Frontend der Website gehen, und jetzt wird es so aussehen. Jetzt kann ich auf Mit Elementor bearbeiten klicken. Okay. Nun zu den Seiteneinstellungen, wir müssen einige Änderungen vornehmen. Zuerst müssen wir das Seitenlayout auf „Voll mit“ ändern . Dann können wir auf diesen hohen Titel in Element oder ganz mit Seitenlayout klicken diesen hohen Titel in Element oder ganz mit Seitenlayout Der Titel wird nicht angezeigt, aber klicken wir auf diesen hohen Titel, um diesen Titel auszublenden Wenn ich dann auf Veröffentlichen klicke und aktualisieren lasse, ist es immer noch Ich denke, das ist in der Fußzeile, um das Problem zu beheben Lassen Sie uns einfach eine leere Fußzeile erstellen, also gehe ich zum Wordpress-Dashboard und klicke in Team Builder auf das Plus-Symbol dieser Dann werde ich das schließen und vorerst auf diese Fußzeileneinstellung klicken und einfach den Titel in Fußzeile ändern, und ich werde nichts hinzufügen Ich klicke einfach auf Veröffentlichen und dann auf Ad Cdition und es wird auf der gesamten Website angezeigt Also klicke ich jetzt auf Speichern und Schließen. Okay, es ist gespeichert. Also hier können wir die Live-Seite sehen. Lass uns das live sehen, also werden wir jetzt den Fußzeilentext nicht mehr sehen Wenn wir es also hier unterdrücken, können wir sehen, dass es so aussehen wird Okay. Jetzt ist es an der Zeit, diesen Heldenbereich zu entwerfen. Um das zu tun, müssen wir zuerst einen Container erstellen. Die Containergröße wird hier sein, wir haben 90 und hier haben wir 500. Es sollte 590 sein, also gehen wir hier hin, klicken Sie auf PlusConPlax Box, klicken Sie auf die Richtungsspalte und dann hier als mittlere Höhe, lassen Sie uns 600 draus machen Okay. Ändern Sie jetzt die Richtung zur Zeile und richten Sie den Inhalt so aus, dass die Zeile in der Mitte steht. Okay. Lassen Sie uns dazu zuerst diese Texte hinzufügen Ich werde darauf klicken, Element hinzufügen und auf die Überschrift klicken und die Überschrift so ziehen. Dann wird bei Überschrift das HTML-Tag in eins H geändert, da dies die Hauptüberschrift der Website ist. Dann lass uns diesen Text so kopieren. Dann geben Sie den Text einfach so ein. Dann wird auf seinem Würfel die Typografie als Header angezeigt Hier ist die Typografie die Kopfzeile, und beim Inhalt sollte nur dieser Teil von Hannah Clark die Primärfarbe sein, die grüne Farbe Lassen Sie uns also die Textfarbe auf Schwarz setzen und hier füge ich Open tax is SP, A N, span, closed tag und dann wieder open tag slash open tag slash Ich erstelle einfach ein DML-Tag. Eigentlich müssen wir eine ID hinzufügen, also suche ich nach Set ID Equal und fügen dann ID Head Title und Titel Machen wir es wie Held, Heldentitel , kopieren wir es einfach. Das ist einfaches ML und CHS, aber mach weiter mit dem benutzerdefinierten CSS von Advance, füge einfach Hashtag und Headale wie folgt Ordnung. Jetzt hat es nur das Design beeinflusst. Jetzt klicke ich wieder auf Element hinzufügen und dann auf Überschrift hinzufügen. Wenn ich eine weitere Überschrift hinzufüge, sie auch horizontal hinzugefügt. Um das zu beheben, klicke ich hier und füge den Container hinzu Lassen Sie uns alle Inhalte in diesem Container entfernen. Dann ziehe ich diesen Titel in den Container und ziehe den nächsten Titel in den Container. dann beim Container-Layout Lassen Sie uns dann beim Container-Layout den Inhalt in der Mitte ausrichten und die Richtung wird vertikal der Spalte sein. Ausrichtung wird so sein, dass das Element am Anfang und die Lücke ausgerichtet wird Sehen wir uns die Lücke an. Die Lücke ist 15, was pro 15 ist. Okay, jetzt müssen wir diesen Text in diesen Text ändern, den Text kopieren und den Text platzieren, und lassen Sie uns dieses HTM-Tag in H drei ändern Dann eine Kachel, die Ausrichtung bleibt links und Typografie ist die Unterüberschrift und die Farbe ist diese Textfarbe Sie können diese Details hier sehen. Okay, jetzt werde ich diesen Text einfach duplizieren weil ich ihn nicht machen muss oder ihn nicht erneut hinzufügen muss. Ich kann es einfach machen, dann werde ich diesen Text kopieren. Dieser Text wird Typografie als Absatz und die Textfarbe wird unsere Textfarbe sein Fügen Sie das so ein, dann zum Stil, lassen Sie uns das in Absatz ändern Jetzt wächst dieser Text nach links. Wir können es einfach beheben, indem wir VR hinzufügen. Wenn ich also zum Inhalt übergehe, lassen Sie uns dieses STM Lt als P oder Absatz festlegen und hier können wir festlegen, dass wir es so machen Fügen wir BR so hinzu, dann BR so Okay, so weit so gut. Ja, dann müssen wir eine Schaltfläche hinzufügen, um die Schaltfläche hinzuzufügen. Ich werde einfach auf „Element hinzufügen“ und „ Suchen“ klicken und die Schaltfläche einfach hier platzieren. Dann müssen wir den Button-Text kopieren. Es funktioniert einfach mit mir am Text, und lassen Sie uns vorerst einen Hashtag als Link im E-Stil erstellen Lassen Sie uns die Position so festlegen, dass dann die Typografie die Schaltfläche ist. Sehen wir uns also die Typografie-Taste an und lassen Sie uns auf die Figma-Datei drücken und sehen, und lassen Sie uns auf die Figma-Datei drücken dass sie 22 mal 33 groß ist Klicken wir also gemeinsam auf den Linkwert , um die Verknüpfung aufzuheben , und oben ist 22, rechts ist 33, oben ist 22, links ist Okay. Dann ist ein Eckradius 60, wir sollten 60 hinzufügen. Dann wird die Farbe des Textes die Sekundärfarbe sein und die Hintergrundfarbe wird diese Farbe haben. Danach sollte sich die Farbe so ändern und die Animation wird wie folgt wachsen. So weit so gut. Wenn wir uns das Design ansehen, können wir feststellen, dass riesige Abstände aufgrund der Zeilenhöhe dieser Takes entstanden sind. Um das Problem zu beheben, können wir einfach hier klicken und sehen, wie es funktioniert, wenn wir die Zeilenhöhe ändern. Eine Änderung dieser Zeilenhöhe ist also keine Option. Hier können wir diese Linie mit der Zeilenhöhe ändern. Ja. Die neue Zeilenhöhe in der Zwischenüberschrift ist also 20, und hier können wir die Zeilenhöhe der Typografie auf Zeile 35 ändern Zeilenhöhe der Typografie auf Zeile 35 Okay. Lassen Sie uns diese Änderungen vornehmen. Machen wir es vorerst zur Kopfzeile und gehen wir zur Seiteneinstellung über. Gehen Sie zur Größeneinstellung zu globalen Telefonen und zur Kopfzeile, die Zeilenhöhe ist 35 und die Zwischenüberschrift, die Zeilenhöhe ist 26 und klicken Sie auf Änderungen konzipieren und klicken Sie hier, um zum Editor zurückzukehren Nun, wenn wir wollen, können wir auch die Zeilenhöhe dieses zweiten Absatzes ändern , um das zu tun, wir können das einfach so Wenn du willst, kannst du das machen. Ich mache einfach 28 draus. Gehen wir also zu Sitzeinstellungen und globalen Telefonen und Absatzzeilenhöhe wird 28 sein und auf Änderungen speichern klicken. Klicken Sie auf Zurück zum Editor, um zu Okay zu gelangen. Jetzt können wir sehen, dass ich hier einen Abstand habe, um das zu korrigieren, was Abstand ist. Wir können eine negative Marge hinzufügen. Klicken Sie auf den Absatz oder die Überschrift, dann auf Weiter und dann auf Wert miteinander verknüpfen. Dann oben bei einem Minuswert wie diesem. Wir können das Gleiche mit dem Boden machen. Jetzt entwerfen wir einfach diesen Abschnitt und dann müssen wir dieses Bild hinzufügen. Fügen wir es in der nächsten Lektion hinzu. 17. Entwerfen des Heldenbereichs – Teil 2: Hallo, alle zusammen. Jetzt müssen wir dieses Heldenbild hinzufügen. Lass uns anfangen. Zuallererst müssen wir das Bild herunterladen. Ich werde auf das Bild klicken und hier werden wir Exportieren sehen, und ich werde das Bild in JPEG ändern und auf Exportieren klicken. Okay, dann gehe zu Tiny PNG und füge dem winzigen PNG ein Bild hinzu. Klicken Sie dann auf dieses J BG , um die optimierte Version herunterzuladen. Und jetzt haben wir hier dieses Bild. Also gehe ich jetzt zu Elementor und suche hier nach Bild. Dann werden wir dieses Bildelement sehen, und ich werde es einfach so ausdrücken Also hier ist unser Textcontainer, und ich füge dieses Bild außerhalb dieses Textcontainers in den Hauptcontainer ein. Okay. Jetzt klicke ich hier zum Bearbeiten und hier können wir das Bild auswählen und ich klicke hier, dann lade ich einfach das optimierte Bild hoch, und für dieses Bild ALT-Tags füge ich diesen Text hinzu, und als Titel füge ich diesen Text hinzu, dann klicke ich auf Silt, um ihn hinzuzufügen Okay. Nun, hier werde ich die Bildauflösung auf voll einstellen. Okay, jetzt sehen unsere Bilder so aus, aber es ist hübsch, ist klein, also mach es größer. Wir können diesen Container auswählen und ihn mit anpassen. Lass es uns damit schaffen. Lass uns die Perücke von hier aus sehen. Bei dieser 559 können wir hier einfach 559 mit Fixel und 559 auf diese Weise hinzufügen oder wir können es prozentual hinzufügen Lassen Sie uns das tatsächlich prozentual hinzufügen . Machen wir es so, dass 50, 50% perfekt wären. Wenn wir nun den Container überprüfen, beträgt der Spaltenabstand 20. Also hier werde ich einfach auf Space Bitten klicken, um dieses Bild auf der rechten Seite auszurichten , und dieser Text wird auf der linken Seite ausgerichtet. In Ordnung, so weit, so gut. Aber der Boden dieses Containers ist hier, aber das Bild ist hier. Wir können dieses Bild nach unten machen, auf das Bild klicken, zum Hinzufügen gehen und align self auf N setzen, also so. A Im Moment müssen wir diesen Abschnitt dafür gestalten. Lassen Sie uns einen neuen Abschnitt erstellen. Klicken Sie auf das Plus-Symbol und wählen Sie dann das Plex-Feld Richtungsspalte wird zur Zeile. Dann lass uns die Größe herausfinden. Die Größe ist 200, hier lassen wir uns bei Minhightts so machen, dann gehen wir zu Is Dies und im Hintergrund, wir können einfach auf Classic klicken und die Hintergrundfarbe auf diese Textfarbe ändern die Hintergrundfarbe auf diese Textfarbe weil hier die Hintergrundfarbe die Textfarbe ist Okay. Nun, wenn wir hier nachschauen, sollte zwischen diesem Bild und dem schwarzen Hintergrund ein Leerzeichen sein. Wenn wir also überprüfen, ob es noch eine Lücke gibt, um die Lücke hinzuzufügen, klicke ich auf diesen Container und auf erweiterten Linkwert füge dann den oberen Durchgang 30 wie folgt hinzu. Okay. Vielleicht fügen wir es als 20 hinzu, 20 wäre die beste Größe, und hier auch. Lass uns 20 draus machen. Und hier können wir dasselbe machen. Okay, jetzt ist es viel besser. Nun zum nächsten Schritt, wir müssen diese Abschnitte hinzufügen. Speichern wir also die Änderungen, indem wir auf Save Rap klicken. Okay, für diesen Abschnitt mit den Erfolgen können wir das Zähler-Widget für das Element F verwenden . Also werde ich hier nach dem Zähler suchen. Hier haben wir das Zähler-Widget. Ich werde es einfach hinzufügen und Sie sehen, wenn wir es hinzufügen, gibt es einen Zähleffekt. Lass es uns einrichten. Zuerst müssen wir 40 plus hinzufügen, also füge ich einfach die Startnummer als Null und die Endnummer als 240 hinzu . Wenn wir dann etwas davor hinzufügen wollen, können wir es hinzufügen, oder wenn wir es dahinter hinzufügen wollen, können wir es hinzufügen. Also müssen wir es hinter uns hinzufügen. Lass uns eigentlich bei 50 anfangen. Ja. Jetzt wird die Animationsdauer hier sein, 2 Sekunden. Ich werde es auf 1 Sekunde schaffen. Die Animation wird also in 1 Sekunde stattfinden. Also dieses Tausend bedeutet Millisekunden Millisekunden. Tausend Millisekunden bedeuten 1 Sekunde. Okay. Dann müssen wir den Titel hinzufügen. Ich werde einfach den Titel kopieren. Hat mir das gefallen. Dann lass uns zu E Styles gehen. Bevor wir zu Style in Container gehen. Beim Layout machen wir es zum Alignment Center. Es ist viel besser. Bearbeiten Sie nun das Zähler-Widget und gehen Sie zu ETyleoStyle-Titelposition , nach der wir wollen Wir können so etwas hinzufügen, aber wir brauchen und horizontale Ausrichtung wird so zentriert sein, dann müssen wir die Lücke hinzufügen Lass uns die Lücke herausfinden. Ich glaube, es sind 20. Ja, es sind 20, lass uns 20 draus machen. Die Position der Nummer wird in der Mitte stehen. Die Zahlenlücke, die Lücke mit dem Plussymbol, machen wir so, dass es vier sind. Ja, das ist Standard. Machen wir zwei draus. Okay. Zahlen, wir können die Textfarbe in unsere Sekundärfarbe ändern, also Weiß, und die Typografie in die Kopfzeile ändern Tatsächlich befindet es sich bereits in der Kopfzeile und wir benötigen keinen Textstrich oder Textschatten auf dem Titel Die Textfarbe wird weiß sein und Typografie wird die Schaltfläche „ Lass uns sehen“ sein, die Schaltflächengröße die Typografie der Schaltfläche „o“, und jetzt wird es so aussehen, und wir brauchen drei weitere davon Ich werde einfach duplizieren und nochmal duplizieren, nochmal duplizieren. Okay. Klicken Sie jetzt hier und lassen Sie uns zu den Details gehen. Es ist jahrelange Erfahrung. Mir hat das gefallen und es sollten neun sein. Die Endzahl sollte neun sein und die Startzahl sollte Null sein, und das Ende wird plus O sein. Dann haben wir diese Erfolgsquote, klicken Sie hier, ändern Sie diesen Titel in Erfolgsrate und hier bei Presentage und dann ist die Erfolgsquote 92 92, und wir beginnen mit etwa 30. Ja. Sieht gut aus. Und jetzt müssen wir den letzten hinzufügen. Der letzte ist für Kunden garantiert. Es sollten mehr als 5 Millionen sein. Fügen wir hier fünf hinzu und machen wir Null daraus. Machen wir eins daraus, und hier müssen wir den Dollar hinzufügen, dann sollte es hier ein Plus sein, also so. Okay. In Ordnung. Jetzt müssen wir das richtig ausrichten, klicken Sie auf den Container und auf Layout, wir können auf dieses Leerzeichen dazwischen klicken und es wird entsprechend angepasst. Okay, wir haben den Abschnitt erfolgreich gestaltet. Nett. Jetzt habe ich ein anderes Problem. Es ist kein wirkliches Problem. Es ist wie eine Verbesserung. Wenn wir also mit der Maus über diese Schaltfläche fahren, ist die Hintergrundfarbe besser, aber die Textfarbe sollte geändert werden Wenn wir diese Textfarbe also in Dunkelgrün ändern, wird das die Benutzererfahrung erheblich verbessern , da die Benutzer sie besser verstehen können Siehst du, vielleicht sollte es schwarz sein. So, jetzt ist es viel besser als zuvor. Okay, wir müssen es für diesen Header-Bereich machen. Klicken Sie also einfach auf Entwurf speichern, um die Änderungen zu speichern, und klicken Sie dann hier, um den Header zu bearbeiten. Leave speichern, dann hier klicken und bei diesem Stil auf unserer Textfarbe ist das okay. Jetzt ist es viel besser. Okay. Jetzt auch hier, lassen Sie uns die Farbe auf diese Primärfarbe ändern. Das sollte professionell sein , denn das sollte professionell sein Wenn wir viel Text oder viele Farben hinzufügen, das nicht gut. Okay, jetzt klicke ich auf Seite bearbeiten, um die Homepage zu bearbeiten. Okay, jetzt müssen wir den A-Bereich entwerfen. 18. Entwerfen des Abschnitts "Info": Hallo, alle zusammen. Fangen wir also mit dem Entwerfen an. Zuerst müssen wir den Abschnitt erstellen. Ich klicke hier und klicke auf Textfeld und wähle die Textfeld-Richtungszeile Dann entfernen Sie im Voraus den Rand und die Polsterung, und wenn wir hier nachsehen, der Artikel zwischen den Größen ist der Artikel zwischen den Größen oder der Abschnitt dazwischen 1220, also gehen wir Okay. Als ersten Schritt müssen wir das Bild hinzufügen, hier klicken und das Bild suchen und das Bild so hinzufügen, dann können wir hier weitermachen zweimal auf das Bild tippen. Klicken Sie auf Als JPEG exportieren. Wenn du einen transparenten Hintergrund hast, kannst du das als PNG exportieren, aber ich mache das mit JPEG weil ich keinen transparenten Hintergrund habe. Okay, jetzt gehen wir zu Tin PNG und Ragan Optimize, klicken dann auf die JPEG-Schaltfläche, um es herunterzuladen und klicken Sie hier und dann agnop Dann lassen Sie uns diesen Titel und das Tempo wie Altex kopieren. Okay. Conclate habe ich gerade hinzugefügt, und jetzt müssen wir diesen Abschnitt erstellen Um diesen Abschnitt zu erstellen, müssen wir den Container hinzufügen, da dieser Hauptcontainer über Abschnitt Hauptcontainer eine horizontale Richtung hat, dieser Text jedoch vertikal sein sollte Um das zu tun, werde ich hier klicken und einen Container wie diesen hinzufügen. Füge es einfach so hinzu. Dann werde ich damit hinzufügen. Machen wir es etwa 60 60. Ich denke, 60 werden funktionieren. In Ordnung. Dann werde ich hier klicken, um eine Überschrift hinzuzufügen. Es wird um Hanna Clark gehen, also füge es einfach so ein Dann lassen Sie uns Inhalt hinzufügen, bevor wir etwas tun. Dann müssen wir das hinzufügen, einfach kopieren und so einfügen. Dann müssen wir diesen Text hinzufügen. Also duplizieren Sie einfach diesen und fügen Sie den Text so hinzu. Und jetzt müssen wir die Typografie anpassen. Wenn wir es nicht tun, wird das Design nicht gut aussehen und wir werden es nicht richtig bearbeiten können Klicken Sie auf die erste Überschrift und machen Sie daraus DA geschmolzenes Gas H zwei, dann eine Kachel, Sipograph wird die Kopfausrichtung und die Textfarbe die Textfarbe sein Okay. Dann lassen Sie uns hier sehen, dass die Variable die Unterüberschrift ist. Klicken Sie einfach hier und klicken Sie auf die Unterüberschrift. Wenn Sie eine andere Größe wünschen, können Sie auf diesen Bleistiftlöwen klicken und die Größe ändern In unserem Fall müssen wir dies jedoch nicht tun dann die Textfarbe auswählen, sodass Sie die Textfarbe von hier aus ändern können Okay, und klicken Sie hier, kopieren Sie dann den Text und platzieren Sie den Text wie folgt. Dann wird bei Stil, Ausrichtung links die Typografie Absatz und Farbe die Textfarbe sein Okay. Wenn ich zum Inhalt gehe, muss ich das in einen Absatz ändern und dieser Zeilen-HTML-Tag sollte H drei sein. Vergiss also nicht, das zu tun. Es ist wirklich wichtig , dass unsere Seite den Suchmaschinen rangiert, und das ist ungefähr auf Seite SO. Tatsächlich werden wir unsere Website COSCO in zukünftigen Lektionen analysieren unsere Website COSCO in zukünftigen Lektionen Wenn wir dies ab sofort tun, wird es uns helfen, unsere Website in Zukunft zu verbessern. In Ordnung. Jetzt fügen wir hier eine negative Marge hinzu. Das Oberteil wird so sein. Okay. Und jetzt müssen wir dieses Zentrum einrichten. Wenn wir unser Figma-Design überprüfen, ist es tatsächlich richtig ausgerichtet weil wir weitere Daten hinzufügen müssen Lassen Sie uns nun auf diesen Container klicken und dafür sorgen, dass er das Inhaltszentrum rechtfertigt Okay, jetzt werde ich diesen Teil duplizieren, und dann müssen wir diesen Text hinzufügen, den Text kopieren und hier einfügen und ihn dann zu H drei machen. Wenn wir dann die Typografie überprüfen, ist es eine Schaltfläche, also Stil, Typografie, ändern Sie sie in eine Schaltfläche wie Dann müssen wir diese Liste hinzufügen, um das zu tun Ich werde auf Element hinzufügen und dann auf Suchliste klicken Hier haben wir die ich auflisten kann. Ich werde es einfach so ziehen und ablegen. Eigentlich sollte es hier sein, dann klicke ich auf con. Bevor wir den Inhalt bearbeiten, sollten wir zum Stil und zum Text übergehen. Lassen Sie uns die Textfarbe als Text festlegen, Lassen Sie uns die Textfarbe als Text festlegen hier wird die Typografie ein Absatz sein Ich denke, es ist ein Absatz, es ist ein Absatz. Jetzt kopiere ich einen nach dem anderen und kopiere diesen Inhalt, hier haben wir Artikel, füge ihn so ein. Dann werde ich für dieses Symbol so klicken und hier finden wir dasselbe Symbol. Das ist die Pontosom-Symbolbibliothek. Hier finden wir dasselbe Symbol. Klicken Sie. Ich suche einfach hier, wir haben das Häkchen Ich kann einfach auf Installieren klicken. Sehen wir uns jetzt die Größe an. Die Größe ist 22 mal 22 und die Farbe ist die Primärfarbe. Lassen Sie uns diese Details machen. Zuerst werde ich diese beiden Elemente entfernen und hier auf dem Symbol ist die Größe 22, dann ist die Lücke, sehen wir uns die Lücke an. Die Lücke ist vier, machen Sie die Lücke so , dass die Ausrichtung rechts ist, die Farbe ist die Primärfarbe. Jetzt können wir hier klicken , um den Artikel zu duplizieren. Jetzt klicke ich so und kopiere dann das, was so aussieht. Dann dubltd copy das braucht zwei, und jetzt müssen wir die Zwischengröße ändern, um das zu tun, ich gehe zum Stil Hier haben wir einen Abstand dazwischen, sehen wir uns den Raum dazwischen an Es sind zehn, machen wir zehn draus. In Ordnung, so weit, so gut. Dann müssen wir dieses Angebot oder diesen Code hinzufügen. Ich kopiere einfach den Code und klicke auf Ad Element Search Quote. Jetzt haben wir hier den Blockcode das Element einfach per Drag & Drop. Dann füge ich das Zitat hinzu und wir brauchen weder das Tweet-Symbol noch den Autor. Okay, der Bildschirm wechselt zum Zitat. Gehen wir zum Stil eines Stils über. Die Textfarbe wird diese Textfarbe sein und die Typografie wird ein Absatz sein Eigentlich müssen wir die Typografie ändern. Die Textfarbe wird Text sein und hier haben wir das Datum dem die Codefarbe farbig wird und wir müssen die Größe verringern Auf diese Weise brauchen wir eigentlich diese Art von Anführungszeichen zu Anführungszeichen. Allerdings haben wir dieses Design nicht auf dem Element, schauen wir mal, wir haben dieses Design nicht, also fügen wir das Zitat hinzu und wir können die Ausrichtung, da uns die Ausrichtung in der Mitte gefällt, viel besser machen da uns die Ausrichtung , aber lassen Sie uns die Ausrichtung links und eins stilisiert machen , wir können die Lücke ändern, also werde ich die Lücke Typografie, ändern Sie es in Absatz und klicken Sie hier. Dann im E-Stil, mach es so nach Italien Okay. Jetzt sieht es gut aus und im Code können wir die Codegröße reduzieren. Lass es uns so machen. Es ist zu klein. Die Größe vier wird die beste Größe sein. Dann müssen wir diesen Bereich „Finde mich online“ erstellen. Dazu müssen wir ein horizontales Layout verwenden. Ich klicke hier und auf Container, ich werde einfach Container wie diesen einfügen. Dann wird es hart und die Richtung wird roh sein und der Inhalt wird im Mittelpunkt stehen. Okay. Jetzt werde ich diesen Text einfach duplizieren und ihn so hineinfügen. Dann ändern wir den Text in diesen und seine Größentaste und fügen ihn so auf die Schaltfläche „ Mistyle Typography is“ ein. Okay. Und dann müssen wir das Social-Media-Symbol hinzufügen. Soziale Symbole von Will. Also hier habe ich soziale Symbole, füge sie hinzu. Wir müssen es in diesen Container einfügen. Eigentlich wurde es bereits zu diesem Container hinzugefügt, aber dieser Text sollte ungefähr so aussehen. Dann klicke ich auf den Container und lasse ihn so in der Artikelmitte ausrichten. Okay. Dann müssen wir die Größe dazwischen herausfinden, also ist es 15, also können wir einfach Gap Pass, Spalte Gap Pass 15 hinzufügen . So wie das. Okay, jetzt müssen wir dieses Design anpassen, um das zu tun, lassen Sie uns die Details herausfinden. Es ist also 51 mal 51 und der Ordnungsradius ist 30. Okay, lassen Sie uns diese Details hinzufügen. Klicken Sie hier. Für den Moment behalten wir diese sozialen Linien bei und Form wird ein Kreis sein und die Spalten werden automatisch ausgerichtet Stil ändert die offiziellen Farben, die hier zu Ändern Sie die Primärfarbe, da diese Farbe und die Sekundärfarbe wird tatsächlich die Sekundärfarbe sein Sekundärfarbe ist weiße Farbe wie diese Dann können wir die Größe so hinzufügen, wie 51 51 sein soll. Das Symbol wird nicht das 51. Sehen wir uns die Größe des Symbols an. Die Icon-Größe ist 21. Lassen Sie uns nicht die Symbolgröße hinzufügen, die Polsterung Wenn wir die Polsterung überprüfen, wird die Polsterung auf Fixel 15 wie folgt sein Der Abstand dazwischen wird sechs sein, mach sechs daraus. Was für ein Radius ist das Zinnsymbol O lassen Sie uns seine Farbe wie folgt ändern seine Farbe wie folgt und die Sekundärfarbe wird diese Textfarbe sein. Jetzt ist es viel besser. Wenn wir wollen, können wir die Symbolgröße erhöhen. Lass es uns wie 21 machen. Nun zum Inhalt. Fügen wir zuerst das Symbol hinzu, das wir verlinkt haben. Klicken Sie auf Icon Library und suchen Sie nach Link in. Hier haben wir das Symbol verlinkt. Klicken Sie auf Einfügen und hier den Link zum sozialen Symbol und die Option Link Wir können die Option „In neuem Fenster öffnen“ hinzufügen . Wenn ein Besucher auf die Schaltfläche klickt, wird diese Person auf diese Social-Media-Seite auf Neuer Registerkarte weitergeleitet . Dann das zweite Symbol, wir haben Facebook und Facebook als zweites Licon derzeit haben wir keine Facebook-Seite oder LinkedIn-Seite oder so, also werde ich einfach die Facebook-Website-URL der Facebook-Seite hinzufügen, und hier fügen wir den Link zur Website-URL hinzu, aber in Ihrem Fall sollten Sie die Seiten-URL hinzufügen, dass Sie Kunde verfügbar sind oder ob Sie diese Website für Business Coach unter erstellen der Business-Coach, Social-Media-Links oder wenn Sie diese Website für den Autor beim Autor erstellen den Autor beim Autor Social-Media-Details, wenn Sie sie verstehen, dann haben wir das YouTube-Symbol. Aber hier drin lassen wir Instagram durchsuchen und dann füge ich Instagram R hinzu. Okay. Eigentlich, diese Größe, lassen Sie uns diese Heigen-Größe auf 22 setzen. Es sollte ein bisschen groß sein, machen wir es auf 24 und ändern das Pad in Lass uns nur 222 draus machen, also so. Jetzt haben wir diesen Abschnitt über ihre Animation, lassen Sie uns so wachsen. Wir haben den Abschnitt „ Über uns“ erfolgreich so gestaltet. Jetzt kann ich auf Saraft klicken und mit dem nächsten Abschnitt fortfahren 19. Entwurf des Abschnitts Services: Hallo, alle zusammen. Jetzt müssen wir diesen Servicebereich gestalten. Also lass uns anfangen. Ich gehe zum Elementor-Editor und klicke auf Neuen Container hinzufügen und klicke auf Flexbox und stelle hier die Spalte als Richtungsspalte Okay, jetzt müssen wir die Größe eins zu eins dazwischen hinzufügen. Gehen wir weiter und bei Rand eins bis 20 liegt der obere Rand bei eins zu 20. Okay. Jetzt müssen wir diesen Text hinzufügen. Kopieren Sie einfach den Text und klicken Sie hier, dann fügen Sie die Überschrift hinzu. Dann geben Sie die Überschrift einfach so ein. Dann ein Stil, mach daraus eine Linienmitte und Typografie wird zur Überschrift und die Farbe zur Textfarbe Dann müssen wir diesen zweiten Teil oder die Unterüberschrift hinzufügen, den Text kopieren und hier im Inhalt das HTML-Tag als H zwei beibehalten Jetzt werde ich diesen Header duplizieren, dann zu H drei machen und ihn so einfügen. Dann eine Kachel, Typografie wird eine Unterüberschrift wie diese sein. Sehen wir uns die einladende Größe an, die einladende Größe ist zehn Lassen Sie uns die Einladungsgröße dieses Containers auf zehn festlegen. Die Krähengröße wird zehn sein. Eigentlich sind es schon zehn Okay, jetzt müssen wir diesen Abschnitt hinzufügen Um diese Sitzung hinzuzufügen, können wir Grid verwenden. Also klicke ich auf Element hinzufügen und suche einfach nach dem Raster oder dem Unterlayout, wir können das Raster sehen Ich werde es einfach kopieren und so einfügen. Jetzt haben wir das Rasterdesign und hier, haben Sie sich daran erinnert, dass wir bei diesem Container eine Zeile als zehn hinzufügen, aber in unserem Figma-Design ist es 30, was bedeutet, dass wir 20 weitere hinzufügen müssen das zu tun, klicke ich auf das Raster und auf Advance link l value und füge Top Pass 20 wie folgt Okay. Nun wollen wir sehen, dass wir drei Spalten haben. Also bei Layout, Raster, wir haben kein Mittel mit roter Zeilenlinie, wir brauchen es auch nicht ohne Lassen Sie uns vorerst ohne Zeile bleiben, und die Spalte wird drei sein und die Zeile wird zwei sein, und die Lücken werden, glaube ich, 20 mal 20 Ja, es ist 20 mal 20. Fügen wir Lücken als 20 mal 20 hinzu. Okay. Jetzt können wir Inhalte zu diesem Raster hinzufügen. Um das zu tun, klicke ich auf dieses Plus-Symbol oder ich kann einfach einen Container in diese Spalte ziehen und Container in diese Spalte ziehen und der Container-Rand und das Padding sind vorerst Null Die Richtung sollte vertikal sein. Machen wir die Richtung vertikal und dann machen wir es Machen wir es vorerst zum Mittelpunkt. Dann können wir den Inhalt hinzufügen. Zuerst haben wir dieses Symbol. Klicken Sie darauf und klicken Sie auf Exportieren. Lassen Sie uns als JPG exportieren, klicken wir auf Export Vector und auf Tiny PNG, fügen Sie es einfach so hinzu, reduzieren Sie es um fünf Größen, dann kommen Sie her und ich hier ist ein m, dann fügen Sie das Bild so hinzu und klicken Sie darauf, dann ziehen und rauben Sie das Symbol, dann werde ich diesen dann ziehen und rauben Sie das Symbol, Text kopieren und lTag ist dieser Text und lTag dieser Text, ändern Sie den Titel zu diesem kopierten Text Jetzt müssen wir den Titel des Dienstes hinzufügen, den Titel kopieren und auf Plasicon und hier die Überschrift klicken , das HTML-Tag für die Überschrift wird H drei sein, den Text platzieren und auf seinem Stil platzieren, ihn zu einer Zeilenmitte machen und die Typografie wird zur Zwischenüberschrift. Ich denke, es ist ein Subheader. Ja, es ist Subheader, was ist dann mit der Farbe? Farbe ist Textfarbe, ändere Farbe zu Textfarbe, dann dupliziere es so, dann behalte ich das HTML-Tag als H drei, kopiere diesen Text und diese Texttypografie ist Schaltfläche Sie beim Text und auf der Kachel Ändern Sie beim Text und auf der Kachel die Typografie in die Schaltfläche, da sie kleiner ist Auch hier kann ich es duplizieren, dann kopiere ich diesen Text und setze den Text so, dann mache ich das STL-Tag zu einem Absatz, dann ändere ich bei Stil die Typografie in einen Absatz wie diesen dann mache ich das STL-Tag zu einem Absatz, dann ändere ich bei Stil die Typografie in einen Absatz Wir haben den ersten Service erfolgreich entworfen und sehen uns die Größe der Inhalte an. Die Größe der Eingeladenen ist sechs und obendrein 40. Wir, die unterste Hälfte, ist 40. Lassen Sie uns diese Details hinzufügen. Um das zu tun, klicke ich auf den Container und auf den Container. Ich denke, eine Lücke wird dann eine Lücke sein, nicht noch. Ja, Reihe ist zehn. Okay. Jetzt können wir auf einen Blick eine Polsterung zu Pass 40 hinzufügen, rechts als sechs und unten als 40, links als sechs, so wie hier Okay. Dann fehlt es. Jetzt müssen wir den Eckenradius hinzufügen. Der Eckenradius ist 20. Lassen Sie uns diese eine Datei an Bord machen, den Eckenradius auf 20 setzen, und jetzt müssen wir den Randtyp hinzufügen, eigentlich nicht den Randtyp, Bob Shadow, klicken Sie auf dieses Symbol und sehen wir uns die Schattendetails Hier haben wir Schlagschatten, also die Unschärfe ist vier und Position X Lassen Sie uns diese Details herausfinden. Horizontal wird Null sein, Vertikal wird Null sein. Unschärfe ist Unschärfe ist vier auf Farbe, klicken Sie hier und weiter, die Farbe ist diese, klicken Sie hier und wählen Sie hier Css, und wenn wir Css auswählen, können wir das RGB-CHD kopieren und dann können wir es einfach so einfügen Jetzt ist es dasselbe wie das Figma-Design. Jetzt müssen wir nur noch den Container und den Ling auswählen und dann duplizieren Dann nochmal duplizieren. Wenn wir es duplizieren, wird es das Raster füllen. Das ist ziemlich einfach. Ich werde das noch dreimal duplizieren , weil wir sechs solcher Dienste haben. Dann werde ich diese jetzt hinzufügen, also fügen wir einen nach dem anderen hinzu. Als Nächstes haben wir Führungskräfte, kopieren den Text, blättern den Text hier, kopieren Sie diesen Text, fügen Sie den Text hier ein, kopieren Sie diesen Text, fügen Sie den Text hier Wenn wir eine Struktur erstellen, können wir die Website einfach duplizieren und einfach gestalten Dann müssen wir das Bild ändern, hier klicken und auf Exportieren, JPG, klicken Sie auf Vektor exportieren. Eigentlich werde ich die Bilder herunterladen und dann kann ich sie hochladen. Ich meine, reduziere die Größe und lade sie hoch. Danach muss ich sie nur noch zu jedem einzelnen Dienst hinzufügen . In Ordnung. Jetzt gehe ich zu Tine BNG und öffne die hier eingestellten Bilder. Ich wähle Bilder aus, füge einfach diese Bilder hinzu: eins, zwei , drei, vier, fünf, sechs, wir haben sechs Bilder. Jetzt klicke ich auf diese JPG-Schaltfläche, um sie herunterzuladen. Alle von ihnen. Okay. Jetzt kann ich hier sehen, dass Bilder heruntergeladen werden. Ich wähle einfach alle aus und klicke auf dieses Bild, klicke auf OtoosImage und ich kann Bilder wie dieses einfach ziehen und umwickeln Nachdem sie hochgeladen wurden, kann ich einfach das Bild auswählen und auf Auswählen Eigentlich muss ich den ALT-Text hinzufügen. Fügen Sie immer ALT-Text hinzu, kopieren Sie einfach diesen Text und fügen Sie ihn wie den ausgewählten ein. Und hier glaube ich, dass ich den Text schon kopiert habe. Jetzt müssen wir den Inhalt in diesem Abschnitt ändern. Zuerst benutzen wir das, also einfach hier klicken und die Bilder werden geladen. Hier ist das Bild für dieses Bild, wir müssen das ALT-Tag wie zuvor hinzufügen und auf Consil klicken , dann müssen wir den Inhalt aktualisieren , den Titel ändern, dann eine Überschrift hinzufügen, dann eine kleine Beschreibung wie diese hinzufügen und hier haben wir drei Zeilen, aber hier haben wir nur zwei Zeilen Was wir tun können, ist , einfach die Klammer BR hinzuzufügen und die Klammer so zu schließen Wenn wir das tun, macht es einen Zeilenumbruch auf STM, dann wird dieser Text unten angezeigt Jetzt müssen wir den Mindset-Masterprogramm-Service ändern. Wählen Sie ihn einfach aus, fügen Sie ihn ein, wählen Sie ihn aus und fügen Sie ihn ein, kopieren Sie ihn und fügen Sie ihn ein, dann kopieren Sie die kleine Beschreibung und fügen Sie ihn wie folgt Dann müssen wir es für den nächsten machen. Also hier, kopiere den Tank, füge die Tanks so ein, wähle ihn aus, dann hier, los geht's. Kopieren Sie einfach das Figma-Design und fügen Sie das Design ein. Okay, jetzt haben wir ein Problem. Also, wenn wir diesen Text hier überprüfen, können wir viele Tags sehen. Der Grund ist, dass ich das einfach so einfüge, aber es ist nicht der richtige Weg. Ich muss den Text kopieren und hier einfügen, nicht hier. Wenn wir es so einfügen, wird dieses Problem nicht auftreten. Ich denke, der Rest dieses Textes wird gut funktionieren, und wir müssen hinzufügen, dass wir hier sind, um die drei Zeilen des Absatzes und die letzte beizubehalten, ändern Sie einfach den Text und ändern Sie das Bild, klicken Sie auf dieses Symbol und probieren Sie das Symbol, klicken Sie auf CLC, jetzt haben wir diesen Text in dieser und wir müssen hier handeln B. Wir haben den Servicebereich erfolgreich gestaltet und in zukünftigen Lektionen können wir es versuchen oder wir können etwas HA-Effekt und Animation hinzufügen Im Moment können wir einfach hier klicken und dann auf Savedra klicken 20. Hinzufügen von Schaltflächen zum Abschnitt Services: Wir müssen diese Schaltfläche hinzufügen. Um das zu tun, gehen wir zum Elemental Editor und wenn wir hier nach oben scrollen, haben wir dieselbe Schaltfläche Also klicken Sie mit der rechten Maustaste und klicken Sie auf Kopieren. Dann komm her und hier ist der Abschnitt, in dem wir die Schaltfläche hinzufügen möchten, wähle den Container aus, klicke mit der rechten Maustaste darauf und los geht's. Jetzt haben wir hier eine Schaltfläche. Gehen Sie also zu Ost-Kachel auf Ost-Kachel. Stellen Sie die Position als Mittelpunkt ein. Okay, jetzt müssen wir nur noch diesen Text kopieren und Text einfügen. Gehen Sie also zum Inhalt und geben Sie den Text so weiter. Dann um sicherzugehen. Lass uns die Polsterung überprüfen. Es ist also 22 mal 33. Also lass uns hierher gehen und es uns hier ansehen. Es ist auch 22 mal 33. Okay. Jetzt brauchen wir einen Abstand. Wenn wir „Klar“ ankreuzen, beträgt der Abstand 30. Wir können einfach auf die Schaltfläche klicken, weitermachen, Rand und die Polsterung entfernen und dann den oberen Rand 25 hinzufügen, weil das eigentlich schon 20 sein sollte, weil wir schon 10 als Abstand Nett. Jetzt müssen wir diesen Bewertungsbereich erstellen. Lassen Sie uns ihn in der nächsten Lektion erstellen. 21. Entwerfen des Abschnitts "Bewertungen": Hallo, alle zusammen. Jetzt müssen wir diesen Bewertungsbereich erstellen. Also lass es uns tun. Ich gehe zum Elemento-Editor und zuerst müssen wir den Container erstellen, auf dieses Plus-Symbol klicken und dann auf Flexbox klicken Dann klicke ich hier auf die Spalte Daction. Okay, jetzt haben wir zwischen den Leerzeichen eins bis 20, also fügen wir es hinzu, gehen weiter, entfernen den Standardrand und Padding und fügen den oberen Rand zu Okay. Dann gehen wir zum Figma-Design und beim Figma-Design ist die Höhe 600 Fügen wir es also hinzu, klicken wir auf den Container und dann auf Layout. Die Mindesthöhe beträgt 600. Okay. nun als ersten Schritt wir nun als ersten Schritt dieses Hintergrundbild hinzu. Dazu klicke ich auf das Bild wie dieses, wähle das Bild aus und klicke dann auf die Schaltfläche Exportieren. Okay, es ist ausgefallen und jetzt gehe ich zu tiny png.com und wir laden es hoch , um die Dateigröße zu reduzieren Dann klicke ich auf diese Schaltfläche, um es herunterzuladen. Jetzt gehe ich auf unsere elementare Website und gehe hier zu Estyle und klicke auf den klassischen Hintergrundtyp , dann auf dieses Joe-Bild und lade das Bild einfach so Dann werde ich das bei diesem Text als ALT-Text dieses Bildes kopieren diesem Text als ALT-Text dieses Bildes Also lass es uns so hinzufügen. Klicken Sie dann auf Verbergen oder in den Einstellungen, stellen Sie das Bild auf volle Position, Mitte als Standardeinstellung ein, oder machen Sie es einfach wie Fix&Repeat , keine Wiederholung, Größe, Cover Das Display wird auf diese Weise verdeckt angezeigt. Der Anhang ist nicht behoben. Anhang sollte scrollbar sein und die Displaygröße wird automatisch eingestellt, oder wir können ein Cover hinzufügen. Okay, jetzt haben wir den Hintergrund. Als Nächstes müssen wir diesen Text hinzufügen. Es ist ziemlich einfach. Wir können einfach hier und auf die Überschrift so klicken. Dann geh einfach hierher, kopiere die Panzer und bezahle den Text hier. Dann lassen Sie uns diese Überschrift duplizieren, und jetzt kopieren wir diese Takes und fügen Text wie diesen ein, dann ändern wir das HTML-Tag in H drei. Und jetzt gehen wir zu Estyle und hier haben wir die Unterüberschrift ausgewählt, auf diese globale Typografie-Schriftart geklickt und die Zwischenüberschrift festgelegt Dann ändern wir die Farbe wie folgt in diese Textfarbe Und wir müssen die Stiländerungen dieser Kopfzeile vornehmen, um den ausgewählten Stil zu übernehmen und ihn zur Ausrichtung in der ausgewählten Stil zu übernehmen und Mitte der Kopfzeile zu machen. Dann hier, in der Textfarbe, müssen wir diese Ausrichtung in der Mitte vornehmen Und nicht nur das, ich werde auf den Hauptcontainer klicken und Alignment Items Center so Okay, schauen wir uns das dazwischen an, ich sage zehn. Hier scheint es zu nah zu sein, also lasst es uns reparieren, um es zu reparieren. Wir können einfach so klicken und dann auf diese Pension klicken. Dann ändern wir die Zeilenhöhe. Stellen wir die Zeilenhöhe auf 50 50 ein, dann fügen wir 50 hinzu und wir müssen nur hier klicken und den Header auswählen, dann können wir zu Global Bonds gehen und den Header bearbeiten und die Zeilen 50 wie folgt hinzufügen. Klicken Sie nun auf Const changes und klicken Sie hier, um zum Editor zu gelangen Okay. Jetzt müssen wir das obere und untere PadInt hinzufügen, das machen, hier klicken und auf diesen Abschnitt klicken und dann den Header auswählen und alle drücken um die dazwischen liegende Größe zu finden, es ist 70. Und was ist damit? Es ist auch 70, klicken Sie auf den Container weiter oben bei der Polsterung 70 und unten wird 70 sein Okay. Jetzt müssen wir diese Bewertungen erstellen. Es ist ziemlich einfach und bevor wir es erstellen, müssen wir die Zwischengröße hinzufügen. Hier, dazwischen, ist Größe 30. Vielleicht können wir es zur Marge hinzufügen. Also lass es uns vorerst überspringen. Um also Bewertungen hinzuzufügen, klicke ich auf Element hinzufügen, und hier suche ich nach Bewertung Okay, hier haben wir die Bewertungen. Wir haben gerade so hinzugefügt. Okay, jetzt haben wir drei Bewertungen. Lassen Sie uns vorerst alle drei Scheinrezensionen behalten. Und hier, lass uns sehen, zuerst werde ich dieses Bewertungsfeld auswählen und jetzt sehen, was wir anpassen müssen Als erste Option haben wir also Seiten pro Ansicht. Hier haben wir eine, zwei, drei, drei Seiten, also klicke ich einfach auf drei und schiebe, um zu scrollen Lass uns es wie eins machen, nicht zwei, eins. Also scrollt man nach einer. Okay, jetzt mit Standard und ohne zusätzliche Option brauchen wir keine Pfeile, weil es keine Pfeile gibt. Wenn Sie möchten, können Sie die Pfeiltasten und Autoplay beibehalten, Autoplay-Geschwindigkeit 5.000, was 5.000 Millisekunden in Sekunden bedeutet , das sind 5 Sekunden Okay. Jetzt wird Endlosschleife ja sein, draufdrücken wie wird ja sein, Push on Interaktion wird ja sein. Okay. Und wir können so viel Last hinzufügen, wie Last bedeutet. Wenn die Bewertung nicht in der Struktur der Website vorhanden ist, wird sie erst geladen, wenn sie im Design angezeigt wird. Okay, jetzt müssen wir zu EstilSoets gehen. Bevor wir zu Estes gehen, fügen wir echte Bewertungen hinzu Lassen Sie uns echte Details hinzufügen. Zuerst werde ich diese beiden Artikel entfernen und nur Punkt eins behalten. Und zuerst müssen wir hier das Bild auswählen. Um das zu tun, werde ich hierher gehen und das hier anbraten. Klicken Sie auf dieses Bild, klicken Sie auf dieses Bild, klicken Sie darauf, wählen Sie alle drei aus und klicken Sie dann auf Drei Ebenen exportieren, und es wird als C heruntergeladen . Also klicke ich einfach darauf. Ich verwende einen Mac. Wenn Sie Windows verwenden, klicken Sie einfach mit der rechten Maustaste und extrahieren Sie es. Und hier haben wir den Testbericht Emages. Gehen wir also zu Tiny PNG und fügen diese Bewertungen hinzu. Okay. Jetzt werde ich drei davon herunterladen. Okay. Jetzt habe ich L von drei Bewertungen. Sie überprüfen den Bildnamen dieser Bewertung, es ist nur ein zufälliger Name. So können wir diesen Bildern den tatsächlichen Namen dieser Person hinzufügen. Das wird dazu beitragen, diese Bilder in Google zu platzieren, und es ist auch eine professionelle Möglichkeit, unsere Bilder zu präsentieren. Um das zu tun, klicke ich einfach hier und lass uns diesen Namen kopieren, und das ist eine bewährte Methode. Dann werde ich einen Namen wie diesen herkommen, und ich werde dasselbe für den Rest der Bilder tun. Okay, jetzt sind unsere Bilder fertig, also markiere ich sie alle und lass uns auf unsere Website gehen und hier klicken. Dann werde ich diese Bilder einfach per Drag & Drop auf unsere Website hochladen. Und los geht's. Jetzt kopiere ich diesen Titel und teste ihn ALT und klicke auf CLC. Jetzt müssen wir den Namen hinzufügen, um den Namen hinzuzufügen, lassen Sie uns den Namen markieren und kopieren Nach dem Namen müssen wir den Titel hinzufügen, den Titel kopieren, den Titel hier einfügen, und die Bewertung ist für Sie und ich kann, wir brauchen kein solches Social-Media-Symbol, also werde ich es entfernen Und so wird der Link leer sein. Dann müssen wir diesen Text hinzufügen und den Text so weitergeben. Okay, jetzt haben wir die erste Bewertung. Jetzt kann ich diese Bewertung noch zweimal duplizieren und so klicken, dann fügen wir zuerst das Bild hinzu. Dieses sollte das Bild sein. Fügen Sie dem Bild ein ALT-Tag hinzu. Okay. Jetzt hier, kopiere den Namen. Kopieren Sie den Titel so, die Bewertung wird fünf sein, und kopieren Sie diesen Text so und fügen Sie ihn so ein. Wenn Sie also eine Bewertung wie drei wünschen, können Sie sie einfach wie drei hinzufügen, aber das Hinzufügen von drei ist nicht gut fürs Geschäft, also fügen wir es als fünf hinzu. Okay, jetzt müssen wir den dritten bearbeiten. Klicke hier, klicke auf Ja und füge es so hinzu. Bearbeiten Sie dann den Titel, fügen Sie den Titel hinzu und geben Sie den Titel so weiter. Dann klicken Sie hier, um den Titel hinzuzufügen. Das ist der Name. Das ist der Titel. Okay, dann füge die Bewertung hinzu, füge sie so hinzu. Okay, jetzt haben wir alle drei Bewertungen. Lassen Sie uns das Designproblem beheben. Um das zu tun, gehe ich auf Estyle zu Estyle. Lass uns den Abstand dazwischen herausfinden. Wählen Sie eine dieser Bewertungen aus und drücken Sie bei der nächsten Bewertung die Alt-Taste Es sind 20 rechte Leerzeichen zwischen 20 und Rand mit, machen wir es auf Null. Wir brauchen keine Grenze. Dann der Grenzradius, lassen Sie uns sehen, dass der Grenzradius zwei ist, und dann sind das obere und untere Muster zwei und links und rechts neun Fügen wir also diese Details hinzu, das Muster, klicken Sie hier, dann hier, oben 20, rechts, neun, unten 20, links neun Okay. Jetzt müssen wir die Hintergrundfarbe hinzufügen. Tatsächlich können wir der Kopfzeile eine Hintergrundfarbe hinzufügen. Lassen Sie uns die Standardfarbe beibehalten. Wir können ein Trennzeichen sehen. Wenn du willst, kannst du es zeigen, aber ich werde es nicht zeigen, also binde es an die Höhe. Und jetzt beim Text wird diese Schriftfarbe die Schriftfarbe sein und die Typografie Aber schauen wir uns die Typografie an. Hier ist die Typografie offener Sinn, Halbwand 18. Lassen Sie uns diese Details hinzufügen. Wir, der Absatz und Familie, sind opensans 18 wid semivol so, dann ist die Zeilenhöhe 30. Ist 30. Die Zeilenhöhe ist 30. Okay. Dann wird die Titel-Textfarbe diese Farbe haben und lassen Sie uns die Typografie sehen Typografie ist offen, ohne die reguläre Version 16. Lass es uns schaffen Wählen Sie zuerst den Absatz aus und klicken Sie dann auf das Bearbeitungssymbol Größe 16, was normal ist Innit 30 so. Okay, jetzt müssen wir die Bilder anpassen. Die Bildgröße, lassen Sie uns die Bildgröße herausfinden . Es ist also 92. Siehst du, die Bildgröße ist 92, also fügen wir einfach 92 hinzu. Okay. Lass uns jetzt hierher gehen und tatsächlich lass uns hierher gehen. Lücken im Grenzradius, lassen Sie uns diese beibehalten. Eigentlich müssen wir die Lücke hinzufügen. Der Abstand zwischen dem Bild und dem Text beträgt 15, also fügen wir ihn als 15 hinzu und wir müssen keinen Randradius und kein Symbol hinzufügen. Lass uns das Symbol herausfinden. Die Icon-Größe ist also 23 mal 22. Machen wir daraus 22. Nein, bei diesem Symbol geht es um ein Social-Media-Symbol Wir müssen es nicht hinzufügen, also ignoriere es einfach. Bei der Bewertung ist die Größe 22, und lassen Sie uns herausfinden, dass der Abstand , sehen wir mal, neun ist. Machen wir es wie zehn. Ja. Machen wir zehn draus. Okay. Dann ist die Farbe, lass uns die Farbe herausfinden. Hier ist die Farbe. Kopieren Sie den Farbcode und gehen Sie hierher Sie sich dann dem Farbcode wie folgt vor. Ordnung. Jetzt sieht es ziemlich gut aus Hier haben wir ein Problem. Das ist nicht in derselben Zeile. Wir können es leicht beheben, indem wir diese Lücke schließen. Lassen Sie uns die Lücke reduzieren. Lassen Sie uns also Gap auf über neun bringen. Jetzt sieht es gut aus. Dann haben wir keinen Text, haben wir den Bewertungstext geändert? Nein, hier haben wir den Bewertungssatz und den Überprüfungstext, klicken Sie auf Typografie und die Farbe wird auch wie folgt als Textfarbe angezeigt Okay, jetzt müssen wir diese Paginierung hinzufügen oder das Design dieser Paginierung ändern Gehen Sie dazu zur Navigation in der Navigation. Sehen wir uns die Seitengröße 15 mal 15 und die Leerzeichen 220 an. Fügen wir also 15 für die Größe hinzu, Leerzeichen 220. Dann ist die Farbe die Primärfarbe, eine aktive Farbe ist die Textfarbe. Siehst du, ziemlich gut. Siehst du? Was wir jetzt eigentlich nur haben, was wir tun müssen, ist Abstand hinzuzufügen. Wenn wir diesen Container und so weiter überprüfen, beträgt der Rohabstand zehn, was bedeutet, dass wir 20 weitere hinzufügen müssen, weil der Abstand dazwischen hier 30 ist. Um das zu tun, können wir hier hingehen. Klicken Sie hier und auf Advance Margin oben bei einem Strich bis 20, und jetzt haben wir hier 30 der Größe. Okay, jetzt müssen wir sie in die Mitte bringen, um das zu tun. Klicken Sie auf diesen Container und hier steht Klicken Sie auf diesen Container und „ Inhalt als Mittelpunkt rechtfertigen“. Okay, jetzt sieht es ziemlich gut aus. Also haben wir den Vorschaubereich erfolgreich gestaltet. Ich kann jedoch sehen, dass hier ein Abstand besteht. Versuchen wir, ihn zu beheben. Wir brauchen diesen Abstand nicht. Ja, wir haben einen Abstand dazwischen. Lass uns versuchen, es zu reparieren. Lass uns zu einem Container gehen. Lasst uns damit 100% verdienen. Ja, wenn wir diese 100% hinzufügen , das behoben, und jetzt sieht es ziemlich gut aus. Okay, klicken Sie jetzt auf Graft speichern, um die Änderung zu speichern. 22. Entwerfen des Kontaktabschnitts: Hallo, alle zusammen. Jetzt müssen wir dieses Ctaxon dafür entwerfen Fangen wir bei Null an. Zuerst klicke ich auf diesen Rahmen und gehe zu diesem Rasterlayout und deaktiviere diese Schaltfläche für die Höhe. Klicke auf diese Schaltfläche zum Anzeigen , um das Raster anzuzeigen Und hier haben wir ein 12-Spalten-Raster und sechs für diesen Abschnitt und sechs für diesen Abschnitt Wir müssen eine Spalte hinzufügen , die 50% für diesen Text und 50% für das Formular enthält . Also lass uns das machen. Klicken Sie hier zuerst auf das Li-Plus-Symbol, dann auf Flexbox, und hier müssen wir die Richtungszeile hinzufügen Und hier im erweiterten Layout fügen wir 1224 oben und einen Stil hinzu, klicken auf den Hintergrundtyp und ändern die Farbe in diese Primärfarbe. Okay. Jetzt müssen wir diese Texte hinzufügen. Fügen wir dazu diese Texte hinzu. Wir können hier klicken und einfach die Überschrift wie folgt hinzufügen und zum Stil gehen, die Textfarbe auf Weiß ändern und die Typografie wird als Kopfzeile angezeigt und die Ausrichtung bleibt Und zum Inhalt fügen wir diesen Text wie folgt fügen ihn dann so ein Dazu müssen Sie die Zeile hier hinzufügen. Wir können einfach das BR-Tag so hinzufügen. Und wenn Sie diesen oberen Teil sehen und der untere Teil dieses Textes zwei Typen hat, können Sie einfach hier klicken und die Zeilenhöhe ändern. In meinem Fall sind es 50. Wenn du weniger als 50 hast oder das nicht gut aussieht. Sie können auf Globale Telefone verwalten und hier Zeilenhöhe hinzufügen und auf Änderungen speichern klicken. Gehen wir jetzt zurück und als Nächstes müssen wir diesen duplizieren, auf Duplizieren klicken und wenn wir ihn duplizieren, wird er auf diese Weise angezeigt, weil wir Pro Container ausgewählt haben Um das Problem zu beheben, klicke ich auf Element hinzufügen und füge einen neuen Container hinzu Und für diesen Container werde ich alle Ränder und Abstände entfernen und beim Layout werde ich die Breite auf 50% erhöhen Dann kann ich diese Elemente so in diesen Container einfügen diese Elemente so in diesen Container Okay, jetzt hat es 50% der Größe. Anderer Text. Klicken Sie hier und lassen Sie uns den Stil auf Subheader ändern. Lassen Sie uns den Subheader von hier kopieren und wie folgt einfügen Okay. Jetzt werde ich dieses HTML-Tag auf H drei ändern. Dann klicken Sie mit der rechten Maustaste und duplizieren Sie diesen Text erneut. Dann fügen wir diesen Absatztext hinzu, kopieren ihn und fügen ihn so ein, ändern dann das STML-Tag in Absatz für P und ändern dann unter Stil die Typografie in Absatz, so wie hier ändern dann das STML-Tag in Absatz für P ändern dann unter Stil die Typografie in Absatz, so wie Dann müssen wir diese Symbole hinzufügen, um das zu tun. Ich werde hier klicken und die Liste hier suchen, wir haben eine Symbolliste, also füge ich einfach eine solche Symbolliste hinzu. Dann werde ich unnötige Symbole entfernen und hier klicken. Dann sind die Texte der Symbolliste dieser Text Kopieren Sie einfach diesen Text und das Symbol ist dieses Häkchen Einfach suchen, checken und los geht's, los geht's. Wir haben dieses Häkchen hier. Hier können wir also dasselbe Häkchen sehen und dann auf Okay klicken, es ist nicht sicher, weil im Stil im Symbol die Farbe diese Hintergrundfarbe ist Lass es uns so weiß machen. Okay. Lassen Sie uns nun Earl-Inhalte hinzufügen, bevor wir Abstände oder Stile bearbeiten. Duplizieren Sie dies zweimal und fügen Sie die Tanks hinzu. Also müssen wir das kopieren, die Panzer stufenweise anpassen. Okay. Jetzt müssen wir diesen Text hinzufügen, einfach den Text kopieren und diesen duplizieren und so unten platzieren. Dann fügen Sie diesen Text ein. Okay. Jetzt müssen wir die Größe erhöhen. Zuerst müssen wir die volle Höhe dieses Abschnitts herausfinden oder wir können einfach 30 als Ober- und Unterteil hinzufügen, dann können wir von hier aus wachsen. Fügen wir jedoch Mindesthöhe hinzu, also klicke ich hier und hier haben wir Mindesthöhe als 851, also klicken wir auf diesen Hauptcontainer und auf die Layoutkette Mindesthöhe bis 851 Dann wird ein Einzelposten in der Mitte stehen. Okay. Lassen Sie uns nun diesen ETylet ändern, gehen wir zu Estyle und auf Estyle finden wir heraus, welche Art von Stil wir haben, die Icon-Größe ist 22 und der Abstand ist vier, fügen wir diese Details hinzu zur Icon-Größe ist 22, die Lücke ist vier und Ausrichtung wird links vertikal sein, wir müssen es nicht Lassen Sie uns Null daraus machen, und mindestens ein Leerzeichen dazwischen wird zehn sein Fügen wir zehn als Zwischenraum hinzu, dann ist der Text tipografisch und die Textfarbe ist diese Sekundärfarbe, so dass wir keine Farbe benötigen diese Sekundärfarbe, so dass wir keine Farbe Okay, wir haben diesen Abschnitt erfolgreich entworfen , jetzt müssen wir dieses Dazu müssen wir zuerst einen Container erstellen, also klicken wir hier und klicken auf Element hinzufügen und hier nur auf einen Container wie diesen. Fügen wir es so hinzu, dann beträgt die Breite des Containers 50%. Okay. Jetzt kann ich die Hintergrundfarbe auf jeder Kachel auf Weiß ändern . Klicken Sie hier, die Hintergrundfarbe wird weiß sein und auch die Ecken werden zwei leer sein. An Bord wird der Grenzradius also zwei sein. Okay. Jetzt müssen wir das hier hinzufügen und von hier aus einfach klicken und eine Überschrift hinzufügen, dann beim Text, dann die DML wieder auf Absatz und einen Stil ändern , die Ausrichtung bleibt übrig Ich denke, es ist und die Typografie wird ein Absatz sein und die Farbe ist diese Textfarbe Jetzt müssen wir die Polsterung hinzufügen. Lassen Sie uns die Polsterung herausfinden. Klicken Sie hier und links und rechts ist 20 und die obere Unterseite ist 30, fügen wir diese Details Um diese Details hinzuzufügen, wähle ich den Container Behälter vorne am Rand und Polsterung oben, es sind 30, 20, unten 30, links 20. Okay, nett. Jetzt müssen wir dieses Formular hinzufügen. Um das zu tun, klicke ich einfach hier und suche nach einem Formular wie diesem. Dann lass das Formular einfach so fallen. Jetzt haben wir Formularfelder. Also lasst uns sie eins nach dem anderen hinzufügen. Erstens haben wir den vollständigen Namen. Ich kopiere einfach den Text, und im Namen wird der Texttyp Text sein und die Bezeichnung wird benannt. Fügen Sie einfach den Namen hinzu, an dem das Lötmittel mit dem erforderlichen Namen benannt wird , und klicken Sie auf dieses erforderliche Symbol Und hier werde ich auf dieses Label klicken, um es auszublenden, sodass die Labels nicht angezeigt werden Es werden also nur Platzhalter sein. Jetzt haben wir E-Mail, kopieren Sie einfach den Text und gehen Sie hier auf E-Mail, der Typ ist E-Mail, das Etikett ist E-Mail und der Platzhalter ist E-Mail ist Pflichtfeld Dann haben wir vorerst eine Nachricht, ich werde sie entfernen, und jetzt klicke ich auf Artikel hinzufügen, und was haben wir? Wir müssen das Telefon hinzufügen. Also kopiere einfach den Text und platziere den Text hier, dann wird der Platzhalter sein, dann müssen wir diesen Typ in eine Zahl wie diese ändern, nicht in Nummer, es sollte t TES sein Okay. Als Nächstes müssen wir diese Firma hinzufügen, den Text kopieren, und ich werde ihn einfach von hier aus duplizieren, und hier wird der Typ Text sein und das Label Comp und der Platzhalter ist Compania, falls zutreffend Okay, es ist nicht erforderlich, aber die Telefonnummer Jetzt füge ich dieses Label hinzu, kopiere einfach den Text und klicke hier auf Hinzufügen, ändere das auf dem SDMLte wie folgt in SMS Lass es uns vorerst so belassen. Jetzt müssen wir diese Checkbox hinzufügen, um das zu tun. Wir können auf den Anzeigenartikel klicken und dies in das Kontrollkästchen und die Checkbox-Bezeichnung ändern Kontrollkästchen und die Checkbox-Bezeichnung Das dauert jetzt, wir müssen die Option hinzufügen. Fügen wir nun zuerst diese Kontrollkästchen hinzu, kopieren diesen Text und fügen ihn so ein. Kopieren Sie als Nächstes diesen Text, fügen Sie ihn so ein , als Nächstes kopieren Sie diesen, fügen Sie ihn so ein, und dann kopieren Sie diese Aufnahme, fügen Sie ihn so ein, dann kopieren Sie diesen Text und fügen Sie ihn so ein. Jetzt können Sie hier sehen die Überschrift nicht angezeigt wird, um das Problem zu beheben Wir können auf den Anzeigenartikel klicken und ihn als HTML festlegen. Dann können wir hier nur HTML-Text hinzufügen. Ich werde es darüber sagen. Ich sollte eigentlich das Hauptziel für den Coaching-Text hier sein, füge ihn so hinzu. Okay, jetzt kreuzen Sie diese Inline-Liste an , damit die Liste so aussieht, und kümmern wir uns um das Design, nachdem wir RFelds hinzugefügt haben. Dann müssen wir dieses Nachrichtenfeld oder die Textbereiche hinzufügen, um das zu tun, klicken Sie auf Deleon hinzufügen und Text in Textbereich ändern, dann werden die Beschriftungen zusätzliche Knoten sein Auf diese Weise wird dieser Text verkauft und er ist nicht erforderlich Okay, jetzt haben wir das vollständige Formular und der Button-Text sollte „Anfrage senden“ lauten. Gehen wir also hierher und ändern den Button Senden , um Anfragen zu senden. Okay, jetzt müssen wir das Es hinzufügen 23. Entwerfen des Kontaktformulars: Hallo, alle zusammen. Jetzt müssen wir den Esty hinzufügen. Klicken Sie auf dieses Stiftsymbol, um ihn hinzuzufügen Gehen wir jetzt zu Esty.O Style, dem Spaltenabstand, wir brauchen den Spaltenabstand nicht, aber wir brauchen den Gehen wir zum Designelement und finden Sie den Zeilenabstand heraus Es ist 15. Fügen wir eine Lücke als 15 hinzu. Die Spaltenlücke bedeutet, wenn wir Online-Felder wie den Vornamen hier und den zweiten Namen hier haben, müssen wir die Lücke zwischen diesen horizontalen Feldern berücksichtigen , aber in diesem Fall haben wir diese Art von Feld nirgends. Sagen wir 15. Okay, jetzt ist Label Spacing, wir können diesen Label-Teil ignorieren, und jetzt haben wir hier ein STML-Feld Also auf dem STML-Feld sieht der Abstand schon okay aus, dann wird die Farbe tatsächlich sein, wir müssen die Farbe ändern Farbe ist diese Farbe, kopiere einfach den Farbcode und setze diesen Farbcode einfach so ein Geben Sie dann im STML-Feld die Farbe ebenfalls wie folgt ein Die Typografie ist ein Absatz, dann müssen wir die Felder bearbeiten Auf den Feldern wird die Textfarbe diese Textfarbe sein, dann wird die Typografie die Absatz- und Hintergrundfarbe sein . Behalten Sie die Hintergrundfarbe bei Weiß, Behalten Sie die Hintergrundfarbe da die Vordergrundfarbe ebenfalls weiß ist Okay, jetzt müssen wir die Rahmenfarbe herausfinden. Also die Randfarbe ist, ich glaube, es ist auch die Farbe, die wir schon hatten. Das ist also die Farbe. Eigentlich ist es nicht diese Farbe. Kopieren Sie einfach diesen Farbcode und los geht's. Fügen Sie dann zur Randfarbe diese Farbe hinzu. Und jetzt die Randbreite, lassen Sie uns die Breite eins herausfinden und dann wird der Grenzradius sechs sein Okay. Fügen wir sechs als Grenzradius hinzu. Ziemlich gut. Was müssen wir jetzt tun? Jetzt müssen wir zu Button in Button gehen , die Position wird so belassen, dann wird die Typografie Button sein und der Randtyp wird keiner sein Wir brauchen keinen mutigeren Typ. Die Hintergrundfarbe ist diese Grundfarbe Mauszeiger darüber fahren, wird diese Farbe sein, wenn Sie mit dem Mauszeiger darüber fahren Okay. Eigentlich müssen wir die Farbe des Textes ändern, so wie hier. Okay. Jetzt müssen wir uns keine Gedanken über die vorherige Schaltfläche machen , weil wir keine haben. Und der Radius des Schaltflächenrandes wird 60 sein, und lassen Sie uns herausfinden, dass die Größe 22, 33 ist. Der Randradius ist also 60, und der Textabstand wird oben 22, rechts, 33, oben, unten 22, links 33 sein, genau so Dann Nachricht. Die Typografie der Nachricht wird also ein Absatz sein und die Farbe der Erfolgsmeldung wird grün hinzugefügt. Diese Farbe wird funktionieren. Lass uns so färben, dann wird die Farbe diese rote Farbe sein. Bei der Farbe der Zeilennachricht behalten wir sie als Standard und die Schritte bei, wir können die Schritte einfach ignorieren. Und es ist ziemlich gut. Wenn wir diesen Textbereich vergrößern wollen, können wir einfach zum Inhalt gehen und hier ist der Textbereich, und hier können wir Zeilen hinzufügen. Fügen wir es als fünf hinzu. Okay. Jetzt müssen wir diese Checkbox verbessern, um das auf Estyle zu machen verbessern, um das auf Estyle müssen wir den Checkbox-Stil herausfinden Eigentlich haben wir keinen Checkbox-Stil, also müssen wir ihn so beibehalten Um den Checkbox-Stil hinzuzufügen, haben wir CSS verwendet, daher werde ich in Zukunft einige Lektionen zum Hinzufügen von CSS machen. Lassen Sie es uns vorerst so belassen. Jetzt ist unser Formular ausgefüllt. Jetzt müssen wir das Formular einrichten und in zukünftigen Lektionen werden wir das Formular so einrichten, dass Nachrichten an unser WordPress-Dashboard und Nachrichten an unsere E-Mail-Box gesendet werden. Jetzt klicke ich hier und klicke auf Saveaf 24. Entwurf der Fußzeile: Hallo, alle zusammen. Jetzt müssen wir den Fußzeilenbereich gestalten. Lass uns gehen Hier speichern wir einfach den Entwurf, und jetzt gehe ich hier zum WordPress-Dashboard. Ich werde den Entwurf erneut speichern und sicherstellen, Ich werde den Entwurf erneut speichern dass er korrekt gespeichert ist. Okay. Lass uns jetzt gehen und zum WordPress-Dashboard gehen. von hier aus auf Vorlagen Klicken Sie von hier aus auf Vorlagen und dann auf Builder auf Builder. Wir haben diese Fußzeile oder wir können einfach hier klicken und wir haben die leere Fußzeile bereits erstellt Entferne es und sieh es dir von Grund auf an. Jetzt kann ich auf dieses Plus Gon klicken und zur Fußzeile gehen oder hier klicken und auf Neu klicken, dann das entfernen und hier klicken und lassen Sie uns den Titel einfach in Fußzeile umbenennen, so wie Okay. Jetzt müssen wir nur auf dieses Plus und dann auf das Feld Komplex klicken, und schon sind wir in der Richtungszeile wie hier Ignoriere diesen Bereich. Es wird nicht auf dem Design erscheinen. Und jetzt müssen wir die Größe überprüfen. Die Höhe beträgt 382. Lass uns 380 draus machen. Hier wird die Mindesthöhe 380 sein. Dann ein Stil, klicken Sie auf Background Dip und fügen Sie dann die Hintergrundfarbe als Textfarbe hinzu. Mal sehen, die Hintergrundfarbe ist die Textfarbe. Okay. Jetzt können wir einfach auf Veröffentlichen klicken und hier auf Bedingung hinzufügen klicken und die gesamte Site einrichten und auf Speichern und schließen klicken. Auf diese Weise können wir sehen, ob es tatsächlich für die Website gilt oder nicht. Jetzt gehe ich auf die Website und lass uns sehen, wie es aussieht. Klicken Sie auf bearbeitetes Telement oder wir haben die Website immer noch nicht veröffentlicht, also müssen wir zum Editor gehen, um sie zu überprüfen, und los geht's Hier haben wir den Puta-Bereich. Okay, wir sind auf dem richtigen Weg. Okay, jetzt klicke ich auf dieses Plus-Symbol und füge einen Container hinzu. Und in diesem Container setzen wir Rand und Abstand auf Null Und hier müssen wir dieses Head-OG hinzufügen, also kann ich einfach auf Exportieren klicken und es als PNG exportieren , oder wir können einfach diese Typografie erstellen, lassen Sie uns das in Typografie erstellen Das ist jetzt nur ein einfacher Text. Um das zu tun, gehe ich zur Fußzeile und klicke einfach hier und füge eine Überschrift dann im E-Stil zur Typografie Schauen wir uns dann im E-Stil zur Typografie die Werte Es ist Nonito 39 Volt. Lass uns nicht hier sein, wir sollten 39 und Volt haben. Okay. Sieht gut aus. Dann kopiere ich einfach diesen Text und passe den Text hier an, dann müssen wir die Farbe auf Sekundärweiß ändern, die Sekundärfarbe wie diese. Okay. Was wir jetzt tun müssen, ist einfach diesen Text hinzuzufügen, den Text zu kopieren und tatsächlich können wir beim Inhalt den TML-Tag auf drei setzen, dann werde ich ihn duplizieren und ihn als P oder Absatz erstellen Dann phasenweise den Text im E-Stil. Dies wird Absatztext sein, und die Textfarbe ist die Standardtextfarbe. Okay. Jetzt ist dieser Abschnitt gut. Jetzt müssen wir einen neuen Container hinzufügen, einfach hier klicken und einen Container wie diesen hinzufügen und in diesem Container haben wir einen Schnelllink. Kopieren Sie den Quicklink-Text und hier, klicken Sie hier und fügen Sie eine neue Überschrift wie diese Fügen Sie dann die Tanks hinzu und ihre Größe ist die Ausrichtung der Unterüberschrift. Die Ausrichtung erfolgt in der Mitte wie folgt Dann ist die Farbe zweitrangig. Dann müssen wir dieses Menü hinzufügen. Um dieses Menü hinzuzufügen, müssen wir ein neues Menü erstellen. Lassen Sie uns diese Änderungen vorerst veröffentlichen und jetzt müssen wir zum WordPress-Dashboard im WordPress-Dashboard gehen, in den Darstellungsmenüs , und hier haben wir das Hauptmenü. Klicken Sie nun auf Neues Menü erstellen und in diesem neuen Menü füge ich es als Fußzeilenmenü So, dann klicken Sie auf Menü erstellen und für die Fußzeile müssen wir diese Abschnitte hinzufügen Lassen Sie uns vorerst den Hashtag als Link hinzufügen. Hier, nein hier, wir haben die Homepage. Wir können es einfach zum Menü hinzufügen und dann zum Hashtag für benutzerdefinierte Links gehen Linktext steht an erster Stelle über hier, erste Text bezieht sich auf einen Hashtag, der zweite Text ist Service und der dritte Text enthält Kontakt, nicht Inhalt Kontakt, URLs-Hashtag und dann Nutzungsbedingungen wie diese Sie dann die Datenschutzrichtlinie wie folgt ein und fügen Sie einen Hashtag hinzu, klicken Sie auf Zu Okay, unser Fußzeilenmenü Jetzt klicke ich auf das S-Menü und füge nichts davon hinzu. Jetzt werde ich hier die Seite aktualisieren. Und dann suche ich hier im Menü so und kopiere das Wort Pres-Menü und füge es hier ein, dann wähle ich das Menü Es ist bereits ausgewählt. Ausrichtung wird mittig sein, und für den Backpoint setze ich den Breakpoint auf „Nichts , weil wir ein Textmenü wie dieses benötigen Deine Maus wird vertikal sein. Lass uns diese Farbe sichtbar machen. Wir wollen stylen, die Typografie wird Mnuulin sein und die Textfarbe wird diese Farbe Okay, hier haben wir das Menüset und jetzt, was den Inhalt angeht, wir Hier wird nichts unterstrichen sein. Zeiger wird keiner wie dieser sein, dann das Symbol haben wir nicht Jetzt können wir zum E-Stil wechseln. der Maus darüber fahren, legen wir den Stil als Überfarbe fest und bei aktivierter Option legen wir die Primärfarbe für die aktive und horizontale Polsterung fest. Lassen Sie uns sehen. Das horizontale Muster wird Null sein, aber wir haben die vertikale Polsterung Lassen Sie uns den Abstand zwischen diesen Elementen herausfinden . Es ist 15. Fügen wir hinzu, dass der Wert 15 ist. Okay. Eigentlich ist es keine vertikale Polsterung. Stellen Sie den vertikalen Abstand auf Null ein, und der Abstand dazwischen sollte 15 sein, so wie hier Okay. Jetzt runter, wir haben kein Dropdown, also können wir es ignorieren, und jetzt sieht es gut aus. Hier müssen wir den Abstand zwischen 30 herausfinden. Wir können einfach hier klicken und in Lücken können wir den Rohabstand als 30 hinzufügen. Okay. Jetzt haben wir den Mittelteil. Danach müssen wir das nur noch gut in den sozialen Medien erstellen, einfach den Text kopieren und wir können diesen Container einfach duplizieren , weil wir nicht immer wieder machen müssen, also werde ich ihn duplizieren, und in diesem Text füge ich einfach diesen hinzu, lösche dieses Menü, dann suche ich hier nach sozialen Netzwerken. Okay, hier haben wir soziale Symbole, fügen Sie einfach hier ein und lassen Sie uns das soziale Symbol hinzufügen. Eigentlich hat es einen Link auf Facebook und Instagram. Facebook ist also in der Mitte, also lasst uns in die Mitte gehen, und das ist nicht Twitter. Das sollte verlinkt sein. Link und hier müssen wir die URL hinzufügen. Ich werde nur die URL der LinkedIn-Website hinzufügen, aber in UAs oder auf der eigentlichen Website müssen Sie hier die LinkedIn-Seite oder die URL der Social-Media-Seite hinzufügen hier die LinkedIn-Seite oder die URL der Social-Media-Seite Und die Farbe, ich werde keine offizielle Farbe hinzufügen, ich werde Hasm hinzufügen, aber wir können sie auf dem Ich stirbt hinzufügen Lassen Sie uns vorerst die offizielle Farbe beibehalten. Auf Facebook verwenden wir einfach eine Facebook-URL wie diese. Auch bei der Link-Option können wir dafür sorgen, dass sie in einem neuen Fenster geöffnet wird. Wenn jemand darauf klickt, wird es in einem neuen Fenster geöffnet. Und hier müssen wir Instagram hinzufügen, hier klicken und das Symbol Instagram suchen. Einfügen und hier ist die URL der Instagram-Seite. Okay, die Form wird abgerundet oder lassen Sie uns einen Kreis daraus machen und die Spalte wird automatisch zentriert ausgerichtet. Lassen Sie uns jetzt die Größe, Höhe und andere Dinge herausfinden . Die Breite ist 51 mal 51 und 15 15 ist die Größe von. Gehen wir zu Stil und ändern diese offizielle Farbe, um hier auf die Primärfarbe zu setzen, die Sekundärfarbe wird es so sein. Die Größe sollte 51 51 sein. 51 ist zu groß. Nein, Größe ist nicht 51. Die Symbolgröße sollte 21 sein. Lass es uns 22, 22 machen, so. Polsterung, lassen Sie uns die Polsterung herausfinden. Das Pad ist 15. Los geht's beim PaddinsF 15 nicht EM, machen wir es so reparabler machen wir es so reparabler Dann wird der Abstand dazwischen sechs sein. Machen wir das zwischen und der Reihenlücke. Wir brauchen keine Reihenlücke. Dann Randradius, lass es uns wie C machen , jetzt können wir Icon-Hover-Sachen hinzufügen Lassen Sie uns die Primärfarbe als Hoverfarbe wie diese machen und die zweite Farbe wird diese schwarze Farbe sein , siehe Wenn wir wollen, können wir ihre Animation hinzufügen. Lass uns so wachsen und jetzt sieht es hübsch aus. Gut. Wenn es sich zu klein anfühlt, erhöhen Sie die Symbolgröße. Lass uns 26 draus machen und das ist okay. In Ordnung. Wir haben unsere Fußzeile erfolgreich gestaltet. Mal sehen, wie die Fußzeile so aussehen wird , und im Hauptcontainer können wir das als Zwischenraum hinzufügen, sodass es sich an den Platz auf können wir das als Zwischenraum hinzufügen, der Website anpasst, und jetzt müssen wir die Polsterung oben hinzufügen, die Polsterung beträgt 30, was ist mit der unteren Polsterung Die untere Polsterung, machen wir 20 draus. Aber für den Moment fügen wir die obere Polsterung tatsächlich als 30 hinzu. Die Unterseite ist 30. Lassen Sie uns vorab keinen Rand daraus machen, indem wir die oberen 30, die unteren oder 30 hinzufügen. Okay, jetzt müssen wir diesen Copyright-Bereich hinzufügen. Schauen wir uns also das Personal an. Also hier haben wir eine Leitung. Ich werde auf dieses Plus-Symbol klicken und den Zeilenteiler suchen. Hier haben wir den Teiler. Um das zu tun, müssen wir einen neuen Container erstellen, also klicken Sie hier und klicken Sie auf Flexbox und fügen Richtungsspaltentrenner hinzu, weil diese Spalte horizontal ist, wir aber vertikal brauchen nun zu diesem Stil passen, Lassen Sie uns nun zu diesem Stil passen, dass er diese Textfarbe wie folgt Beim Layout brauchen wir mittlere Höhe, wir brauchen keine mittlere Höhe. Jetzt müssen wir also den Teiler hinzufügen. Suchen wir einfach nach dem Teiler und ziehen ihn so per Drag-and-Drop. Dann ein Stil, ändern Sie die Farbe in die Sekundärfarbe und lassen Sie uns weitere Informationen sehen. Erhöhen Sie diesen Wert und sehen wir, dass die Höhe des Teilers Eigentlich ist es sowieso eine Grenze. Okay. Jetzt ist die Breite eins, die Lücke wird 15 sein. Ich denke, es sind 15 oder 20. Äh, die Lücke ist 20, also setzen wir GAP ist Lücke auf Null und fügen 20 zum Text hinzu. Fürs Erste fügen wir 15 als Lücke hinzu, aber machen wir es anhand des Textes. Um den Copyright-Text hinzuzufügen, füge ich die Überschrift wie folgt hinzu. Dann verwenden wir für diese Überschrift das dynamische Tag, klicken auf das dynamische Tag und überprüfen das Datum. Hier haben wir das aktuelle Datum und die Uhrzeit und hier wird das Datumsformat benutzerdefiniert sein und wir brauchen nur das hier, also werde ich nur die Y-Pause behalten. Okay, hier haben wir das Hier, aber hier drin brauchen wir beim Copyright und den aktuellen da und den Rest Text. Also werde ich vorab alle ts und hier kopieren bevor ich diesen Volltext hinzufüge und für bevor wir nur diesen Teil brauchen. Ich werde einfach kopieren. Und danach werden wir diesen Teil wie diesen brauchen. Okay, füge tatsächlich Leerzeichen hinzu, lass uns das im Texteditor öffnen und an diesem Tag können wir alle Details sehen. Im Moment werde ich einfach den Text kopieren und jetzt werde ich den Texteditor öffnen. Ich habe gerade den HTML-Editor der W Three School geöffnet. Also klicke ich auf Testen Sie es selbst, und hier haben wir die Möglichkeit, den HTML-Text hinzuzufügen. Also was das Design angeht, wenn wir diesen Text hinzufügen, ändern wir den Stil in Menlink. Ich glaube, es ist Menu Okay, die Typografie ist jetzt hier Manlink, machen Sie es im Stil Menlink und die Textfarbe wird in dieser Farbe sein, und die Ausrichtung wird so zentriert sein , dieser Text Wenn ich nun auf diese Hannah Clark oder die URL der Website klicke , sollte sie auf die Homepage dieser Website weitergeleitet werden. Als ob du ein Designer wärst, kannst du kannst du Nachdem wir ihn erhalten haben, können wir etwas hinzufügen, das vom XYZ-Designer entworfen wurde Und wenn jemand auf diesen XYZ-Designer klickt, sollte er auf unsere Website, unsere Portfolio-Website, weitergeleitet werden unsere Portfolio-Website, Kopieren wir also diesen Text und gehen SDMLEditor , um dies zu ermöglichen Also hier werde ich einen A-Tag machen. Also hier bei Baggot AHF werde ich dieses Anchor-Tag oder das A-Tag im Bereich Ressourcen hinzufügen das A-Tag im Bereich Ressourcen Und hier müssen wir die URL der Website hinzufügen. Hier ist die URL der Website, kopiere sie und füge sie in diese HF ein und hier das Ziel ist gleich NU, und schließe dann das A-Tag wie folgt. ML ist ziemlich einfach. Und das ist nur für HTML Sie können mehr über DML an W Three Schools erfahren Also dann müssen wir den NCat oder Link zu diesem Text hinzufügen , weil dies unsere Unternehmensportfolio-Websites sind, um das auf aHF-Ebene zu tun und es zu schließen Dann schließe den NCatC auf diese Weise. Dann hier bei der FS. Fügen wir es hinzu HTTP, Ts collalah XY Das ist nur eine gefälschte URL. Es sollte die URL der Website und das Ziel gleich dem neuen Mittelwert sein, dies wird in einem neuen Fenster geöffnet. Also hier ist der vollständige Code, den wir nach 2025 hinzufügen müssen. Kopieren Sie den Code und fügen Sie anschließend diesen Text hinzu. Okay, jetzt sieht es so aus, lass es uns testen, nachdem wir weitere Details hinzugefügt haben. Zuerst gehe ich zum Teiler und auf dem Teiler wird die Lücke bei Co. liegen. Und bei diesem Copyright-Text müssen wir 20 als Zwischengröße hinzufügen Um das zu tun, können wir einfach auf diesen Copyright-Text klicken und dem Zeug fortfahren. Die obere Polsterung wird so sein, die untere Polsterung wird 20 sein. Wenn Sie diesen Text auch in einer anderen Farbe kneten möchten, können Sie diese Farbe hinzufügen Was den Stil angeht, werden wir die Hintergrundfarbe dunkler machen, also so, aber ich werde die Standardfarbe beibehalten, weil wir diesen Teiler haben, um diese beiden Abschnitte zu trennen Lassen Sie uns das jetzt in Aktion überprüfen. Wir erstellen einfach eine Überschrift und eine Überschrift, wir verwenden dynamische Tags und keine dynamische Tag-Einstellung im Voraus, wir fügen den vorherigen Teil als diesen hinzu und wir müssen diesen Bereich hier und nach dem Teil als unser STM hinzufügen und auch beim dynamischen Tag können wir noch viel mehr machen. Und jetzt werde ich diesen Abschnitt veröffentlichen und ihn im Design überprüfen Also werde ich so auf eine Website gehen und hier haben wir die Fußzeile. Wenn ich dann auf diese Sana Clark klicke, wird sie in einem neuen Fenster geöffnet Und wenn ich auf unsere Designer-Website klicke, wird sie auch in einem neuen Fenster geöffnet Eigentlich haben wir tatsächlich eine Firma namens XYC Designers, aber ich verstehe es einfach als Dum Content Okay Wir können zwar CSS verwenden, um diesen Stil zu ändern, aber lassen Sie es uns vorerst so belassen Und jetzt ist unser Footy fertig und ich denke, ich werde auf Mit Elementor bearbeiten klicken Ich denke, unsere Desktop-Version der Website ist voll entwickelt, und jetzt können wir sie veröffentlichen und die tatsächliche Ansicht überprüfen Ich klicke auf Veröffentlichen und jetzt klicke ich auf dieses Auge, um eine Vorschau anzuzeigen. Okay. Nun, lass uns sehen, los geht's. Wir haben eine voll funktionsfähige Website. Wir können für später mehr ESTA hinzufügen und hier haben wir ein Problem. Dieser Hintergrund sollte den gesamten Abschnitt abdecken . Lass es uns reparieren. Klicken Sie hier und wählen Sie einen Stil, die Displaygröße wird abgedeckt. Es sollte abgedeckt sein. Ja, so. Also. Klicken Sie nun auf Veröffentlichen und es wird automatisch neu erstellt Okay, hier haben wir den Header. Wir können später Animationen hinzufügen, und jetzt sieht es gut aus. Dann haben wir hier den Schaum und hier haben wir die Fußzeile. Okay, es sieht ziemlich gut aus. 25. E-Mail einrichten: Alle zusammen, lassen Sie uns diesem Formular Funktionen hinzufügen. In diesem Formular müssen wir also, wenn unser Kunde oder Besucher dieses Formular ausgefüllt hat, diese Informationen in unser E-Mail-Postfach schicken. Mit Elemento Pro gibt es also zwei Möglichkeiten , diese E-Mails oder diese Kontaktdaten zu erhalten . Die erste ist, dass wir es per Element- oder Formulareinsendung erhalten können per Element- oder Formulareinsendung Wenn wir nach dem Absenden zu dieser Aktion übergehen, d. h. wenn jemand auf dieses Anfrageformular klickt und das erforderliche Feld ausfüllt, können wir die Einreichung abholen und diese Details per E-Mail erhalten. Lassen Sie uns also zunächst über das Sammeln von Einsendungen sprechen. Dazu gehe ich zum Wordpress-Dashboard und im Wordpress-Dashboard in Elemento können wir diese Einreichung sehen Sie klicken einfach darauf und derzeit haben wir keine Einreichung Lassen Sie uns also dieses Formular ausprobieren und sehen , welche Art von Details wir erhalten werden. Um das zu tun, gehe ich zur Formularseite und zum Element des Editors Ich klicke einfach auf dieses Stiftsymbol und lasse uns all diese Elemente konfigurieren. Hier füge ich nur „Einsendung sammeln“ hinzu, was bedeutet, dass wir L-Informationen zu diesem Bereich „ Einreichung“ erhalten . Bei der Einreichung können wir dann hinzufügen, welche Art von Informationen wir erhalten müssen. Bei Metadaten können wir die Benutzer-IP und den Benutzeragenten abrufen Wenn ein Besucher also dieses Formular ausfüllt und auf Anfrage senden klickt, können wir die IP-Adresse der Person und andere Details abrufen , z. B. welche Art von Browser sie verwendet und ähnliches. Dann haben wir die Schritteinstellung. Tatsächlich benötigen wir für dieses Formular keine Schritteinstellung, da wir nur ein einseitiges Formular haben und es bei zusätzlichen Optionen für die Formularvalidierung als Browser-Standard festlegen, zusätzlichen Optionen für die Formularvalidierung als Browser-Standard festlegen, was bedeutet, dass, wenn jemand die erforderlichen Formulare nicht ausfüllt, diese Person eine Nachricht erhält. Und wenn ich eine benutzerdefinierte Nachricht aktiviert habe, können wir diese Nachrichten ändern. Wenn jemand erfolgreich Anfragen gesendet hat, wird er sehen, dass Ihre Übermittlung erfolgreich war, aber wir machen das menschlicher und benutzerfreundlicher Wir können einfach so etwas hinzufügen, als ob Ihre Anfrage erfolgreich gesendet wurde Dann können wir hier sagen, Hannah, werden wir uns in Kürze bei dir melden Aus Gründen des Fehlers können wir diese Nachrichten auch ändern, aber ich werde derzeit keine davon ändern, wir speichern diese Seite als Entwurf Aber um das zu testen, lassen Sie uns diese Seite veröffentlichen. Auf diese Weise können wir die echte Website auf der Titelseite wie folgt überprüfen , und dann gehe ich zum Formularbereich und gebe hier meine Daten ein. Okay, füllen Sie einfach die Schaltfläche Jetzt werde ich auf diese Schaltfläche Anfrage senden aus und lassen Sie uns sehen, was passieren wird. Okay, jetzt haben wir diese Erfolgsmeldung erhalten, und jetzt gehen wir zu den Einreichungen, und bei den Einsendungen werde ich die Seite ausblenden Okay, hier haben wir die EMAs, die ich teste. Eigentlich teste ich es zweimal, also schauen wir uns das erste Mal Also klicke ich einfach auf die Schaltfläche „Ansehen“. Und los geht's. Jetzt haben wir die Details, und Sie können die Formteile sehen, die wir bekommen haben, und hier haben wir Test-Call-Feld oder CB und fühlen uns so, als würden wir graben. Das ist also das STML-Feld, das wir hinzugefügt haben, sodass wir es einfach ignorieren können Bei zusätzlichen Informationen können wir die Benutzer-IP und den Benutzeragenten wie folgt sehen Wenn also jemand dieses Formular ausfüllt und Anfragen an diesen Business-Coach sendet, erhält die Hanna auf dieser Einreichungsseite viele Informationen Wie ich bereits sagte, können wir diese Informationen auch per E-Mail senden, sodass diese E-Mail in unserem E-Mail-Postfach landet Lass uns versuchen, das auch zu tun. Dazu klicke ich nach dem Absenden auf dieses Plus-Symbol und lege die E-Mail fest. Wenn ich auf dieses Plus-Symbol klicke und die Liste hier überprüfe, können wir eine Menge Dinge tun. Wir können einfach Milam einrichten, Antwort und ein Popup erhalten und es konvertieren und noch viel mehr Dinge tun Außerdem gibt es ein Feld namens E-Mail, was bedeutet, dass Kunde oder wenn Besucher uns eine E-Mail schicken, wir eine E-Mail an diese Person zurückschicken können, weil diese Person an ihrer E-Mail-Adresse in diesem E-Mail-Postfach also auch E-Mail verwenden, können wir E-Mails an die E-Mail-Adresse senden, an die er sich hält. Wenn ich also diese E-Mail herausnehme und hier sehe, haben wir nur diesen E-Mail-Tab, aber wenn wir hier E-Mail hinzufügen, haben wir die Möglichkeit, das zweite Bild hinzuzufügen Lassen Sie uns nun ein E-Mail-Konto erstellen und dafür sorgen, dass die E-Mails funktionieren Dazu gehe ich zu Spanel meines Website-Hostings und dort gibt es E-Mail-Kontofunktionen, also scrolle ich nach unten oder ich kann E-Mail suchen, hier haben wir ein E-Mail-Konto Wenn wir jedoch nach unten suchen, sehen wir den E-Mail-Bereich Im E-Mail-Bereich haben wir die E-Mail-Konten. Ich klicke einfach auf und hier können wir eine neue E-Mail erstellen. Ich werde auf diese Schaltfläche „Erstellen“ klicken. Danach muss ich die Domain auswählen. Also werde ich diese Domain auswählen, und hier ist unsere Domain , hnadt custom website design.us Ich wähle es einfach aus und hier müssen wir den Benutzernamen hinzufügen. Also werde ich zwei E-Mails erstellen, eine E-Mail für den Empfänger, sodass wir diese E-Mail verwenden, um E-Mails von unserer Website aus zu versenden. Und die zweite E-Mail ist die Empfänger-E-Mail. Die Empfänger-E-Mail erhält also die E-Mail, wenn wir E-Mails über unsere Website senden. Okay, für den Benutzernamen lautet die Empfänger-E-Mail Hello At Hana Dot Custom Website Design. Dieser Teil wird also Ihre Website-URL sein, und hier können wir ein Passwort hinzufügen. Wir können ein Passwort wie dieses generieren oder Sie können ein benutzerdefiniertes Passwort hinzufügen. A Stellen Sie sicher, dass Sie dies irgendwo schreiben oder sich dieses Passwort merken , da Sie dieses Passwort benötigen , um sich in Ihr E-Mail-Konto einzuloggen. Also werde ich einfach ein Passwort erstellen. Okay, ich erstelle einfach ein Passwort und dann kann ich auf die Schaltfläche Erstellen klicken Wenn ich auf die Schaltfläche Erstellen klicke, wird die E-Mail erstellt. Hier ist die E-Mail. Und hier kann ich auf diese Check-E-Mail klicken und das E-Mail-Postfach überprüfen. Sie können diese E-Mail also mit Ihrem Gmail oder Ihrem E-Mail-Client konfigurieren . Auf diese Weise erhalten Sie die E-Mail an Ihre E-Mail-Box, ohne sich wie folgt in die E-Mail-Box einzuloggen. Hier haben wir also Informationen zu unserer E-Mail, und wir werden diese Informationen verwenden, um die E-Mail-Funktionalität unserer Website zu konfigurieren und SMTP einzurichten Okay. Jetzt werde ich die unten stehenden E-Mails sehen. Um das zu tun, klicke ich auf Erstellen und wähle hier die Domain aus und füge dann den E-Mail-Namen hinzu, wie in vier. Dieser E-Mail-Name wird also ein Name wie dieser oder mein Name sein. Fügen Sie dieses Feld einfach nicht hinzu, erstellen Sie die E-Mail so und für diese werde ich nur Informationsinformationen bei hanadt custom website design US hinzufügen bei hanadt custom website design US Okay, dann werde ich hier bei dem Passwort so sein, dann werde ich wieder auf Erstellen klicken Okay, jetzt haben wir Hello-E-Mail und Informationen bei Hana Custom Website Design US-E-Mail. Jetzt können wir zum Elementoditor und zum Elementor-Editor Wir können diesen E-Mail-Tab einrichten. Also hier müssen wir die E-Mail hinzufügen. E-Mail lautet also hallo athnadt custom website design US zwei werden die Empfänger-E-Mail sein und hier können wir den Betreff hinzufügen Hier werde ich diesen Betreff wie bei einer neuen Kundenanfrage für die Hannah Clark-Website wie folgt ändern neuen Kundenanfrage für die Hannah Clark-Website Und bei Nachrichten werde ich Earl Fields hinzufügen. Mit diesem Earl Fields-Kurzcode werden wir die Felddetails in unsere E-Mail-Box bekommen, und dann müssen wir hier von E-Mail aus E-Mail die E-Mail des Absenders hinzufügen , also hier erstellen wir sie als Information Hier ist die E-Mail des Absenders. Ich werde einfach hier sein und einfach die E-Mail-Adresse kopieren und ehrlich und hier können wir die Antwort auf die E-Mail auswählen. Also hier sollte die Antwort auf das E-Mail-Feld sein. E-Mail-Feld dieses Formulars denn wenn wir auf die Antwort-Schaltfläche klicken, sollten wir diesem Besucher antworten , der uns eine E-Mail geschickt hat. Okay. Dann können wir für die Metadaten all diese Informationen hinzufügen. So können wir die URL für die Tageszeitseite hinzufügen, wir benötigen keine Seiten-URL, Benutzeragenten FM oder IP, keinen Kredit. Und hier fügen wir einfach Earl-Metadaten hinzu und stellen das Senden als HTML und als E-Mail an Lassen Sie uns auch die E-Mail konfigurieren. Wie ich bereits sagte, wird diese E-Mail an den Besucher gesendet , der dieses Formular ausfüllt. E-Mail dieses Besuchers sollte also die E-Mail sein , die er hier eingibt. Holen wir uns also das E-Mail-Feld. Also klicke ich auf dieses Formularfeld und auf E-Mail, ich gehe zu Advance, und hier haben wir die Feld-ID, den Shortcode Ich kopiere es einfach und schreibe eine E-Mail an, ich füge es einfach so hinzu Dann müssen wir hier den Betreff und die Nachricht hinzufügen. Okay, fügen wir einen Betreff hinzu wie Danke für die Kontaktaufnahme und im Nachrichtenfeld, wir brauchen keine Earl-Felder. Wir müssen eine Dankesnachricht senden und dem Besucher mitteilen, dass Hanna ihn oder sie kontaktieren wird Ich werde dies entfernen und Nachrichten hinzufügen wie, danke für Ihre Kontaktaufnahme, Ihre Anfrage wurde erfolgreich empfangen und Hanna freut sich, von Ihnen zu hören Text wie dieser hier, wir können den Namen der Person hinzufügen Dazu gehe ich zu den Formularfeldern und gehe im Abschnitt mit dem vollständigen Namen zu Advance und kopiere den Kurzcode. Dann komm her und füge es so hinzu und die Absender-E-Mail wird als Info unter angezeigt, lass es uns von hier kopieren. Die Absender-E-Mail wird diese sein kopieren Sie sie einfach und hier ist die Absender-E-Mail und der Absendername wird Hannah Clark sein und die Antwort lautet Hello at hana dot custom website design, und wir benötigen keine Kopie, also müssen wir keine Metadaten senden Jetzt haben wir also E-Mail eins und E-Mail zwei, also werde ich diese Seite veröffentlichen Sehen wir es uns in Aktion an. Jetzt gehe ich auf die Website und unterdrücke die Website, und hier gehen wir zum Kontaktformular und lassen uns dieses Formular ausfüllen und sehen, ob die E-Mails gesendet werden oder nicht Okay, hier werde ich die Formulardetails hinzufügen. Okay, jetzt klicke ich auf Zustimmungsanfrage und lass uns sehen, was passieren wird. Ihre Anfrage wurde erfolgreich gesendet und wir werden sehen, dass sie tatsächlich in der E-Mail-Box gelandet ist. Also hier haben wir diese E-Mail bekommen und hier haben wir eine Information. Auf diese Weise können wir auch die E-Mails abrufen und uns die E-Mail ansehen , die der Besucher hinzugefügt hat. In meinem Fall ist dies diese E-Mail, also sollte der Besucher die E-Mail auch erhalten. Los geht's mit meinem E-Mail-Konto. Wir haben die E-Mail bekommen. Wir haben diese E-Mail so bekommen. Diese E-Mail besteht jedoch aus einer Zeile, sodass wir eine Umbruchlinie hinzufügen können, um dies zu vereinfachen. Ich werde hier eine E-Mail schreiben, ich werde nur das BR-Tag wie dieses hinzufügen und hier auch das BR-Tag hinzufügen und hier können wir einfach das BR-Tag BR und hier R wie dieses hinzufügen, dann kann ich veröffentlichen und jetzt wird unsere E-Mail für die neuen Zeilen unterbrochen. Jetzt haben wir eine funktionierende E-Mail für den Fall , dass die E-Mails Ihrer Website nicht funktionieren. Ich zeige Ihnen, wie Sie das Problem beheben können, indem Sie den SMTP-Plug einrichten 26. Fehlerbehebung bei SMTP-Problemen: Hallo zusammen. Wenn Ihr Formular nicht funktioniert und Sie die E-Mails nicht erhalten, lassen Sie uns das Problem beheben. Um das zu tun, gehen wir zuerst zum Worps-Dashboard und dann zu Plugins und klicken auf At Plugin Suchen wir nun nach dem Plugin namens SMTP. Suchen Sie einfach nach SMTP und Sie werden dieses WP-Mail-SMTP von WPForms sehen dieses WP-Mail-SMTP von WPForms Klicken Sie auf Installieren und dann auf Aktivieren Ich klicke einfach auf Gb zum Dashboard und lasse es uns manuell konfigurieren Jetzt können wir dieses WP-Mail-SMTP-Plug-In hier sehen. Und mit diesem Plugin können wir SMTP-Daten konfigurieren SMTP bedeutet einfaches E-Mail-Übertragungsprotokoll. Lassen Sie uns dies zunächst mit Tools tun Sie können über eine Funktion zum Senden von Testnachrichten oder Test-E-Mails Sie können einfach die E-Mail-Adresse hinzufügen , an die Sie die E-Mail senden möchten, und dann auf SendMail klicken, los geht's Ich füge einfach die E-Mail hinzu und klicke auf E-Mail senden Hoffentlich sollte das die E-Mail senden sein weil meine E-Mail-Funktion korrekt funktioniert, sie wird einfach so gesendet Und falls du die E-Mail nicht erhalten hast, kannst du hier eine Nachricht sehen. Gehen wir irgendwo zu den Set-Ins und fügen zuerst das Set hinzu und versuchen dann, die E-Mail zu senden. Okay, jetzt scrolle ich hier nach unten und hier muss ich die Absender-E-Mail hinzufügen. Also sage ich die E-Mail-Adresse , von der E-Mails gesendet werden. Also in meinem Fall ist es Info Info bei hana dot custom website design US und graben dieses Force Fm-E-Mail-Kontrollkästchen. Dann wird der Abschlussball Hannah Clark heißen. Und wenn wir wollen, können wir auch den Namen FcePom verwenden, was bedeutet, dass dieser Name der Hauptname oder der Name der E-Mail-Adresse von Fat Hana Dot Custom Designs sein wird Fat Hana Dot Custom Designs Okay, ich werde es einfach schaffen und der Rückweg ist aus und der Mailer, ich nehme dieses Bei anderen SMTPs ist die Konfiguration schwierig. Also lass es uns tun Um das zu tun, gehe ich zu unserem C-Panel und hier ist unsere E-Mail-Adresse, von der E-Mail-Adresse. Jetzt klicke ich auf die Schaltfläche „Geräte verbinden“. Unter Geräte verbinden können wir diese Einstellung zur Verwaltung des E-Mail-Clients herausfinden. Okay. Kommen wir jetzt eins nach dem anderen. Zuerst müssen wir den SMTP-Host einrichten. Gehen wir also hierher und wir müssen diesen Ausgangsserver als SMTP-Host hinzufügen Also kopiere einfach, komm her und füge es so ein. Und die Verschlüsselung wird sein, lassen Sie uns die Verschlüsselung sehen. Es ist SSL TLS, machen wir TLS. Nein, machen wir SSL. Okay, dann SMTP-Pod, lass uns den SMTP-Pod herausfinden. Es ist 465. Es ist bereits hinzugefügt. Fügen wir diesen Pot hinzu und hier verwenden SM TPA einen Namen und ein Passwort Der SMTP-Verwendungsname ist also die E-Mail-Adresse aus der E-Mail. Geben Sie es einfach ein und hier müssen Sie das Passwort hinzufügen , mit dem Sie dieses E-Mail-Konto erstellt Und ich habe dir bereits gesagt , dass das Passwort wirklich wichtig ist , weil du dieses Passwort benötigst , um auf deine E-Mail-Box zuzugreifen. Also werde ich es einfach so hinzufügen. Dann hier Ilicon Save Settings. Also wenn dieses SSL nicht funktioniert, wähle einfach das TLS und ich verwende SSL Okay, speichere die Einstellung und lass uns zu den Tools gehen. Senden Sie dann die Beispiel-E-Mail. Also ändere ich die Standardeinstellung, E-Mail-SMTP, und stelle so ein , dass ich die E-Mail senden und sehen werde, was passieren wird Okay, es ist ein Erfolg. Also los geht's, wir haben diese Nachrichten und gehen wir zu unserer E-Mail-Box, und hier haben wir die E-Mail. Probieren Sie diese Methode aus und sehen Sie, wie sie funktioniert. Also, wenn es nicht sendet, siehst du hier eine Fehlermeldung. Sie können AIGPD verwenden, um das Problem herauszufinden, oder Sie können es einfach googeln und das Problem beheben Okay, jetzt müssen Sie nichts mehr tun, Sie richten nur das SMTP ein und entsprechend Ihren SMTV-Daten dieses Postfach funktionieren Also meins war ein fertiges Wort. Lassen Sie es uns jedoch erneut testen, damit ich diese Informationen ausfülle. Klicken Sie jetzt einfach auf Onsen-Anfrage und lassen Sie uns sehen, was passieren wird Okay, wir haben die Nachricht erhalten und schauen wir uns das mal an. Hier, wir haben die Dankeschön-Nachricht wie diese bekommen, und so weiter hier, wir haben die Nachricht über das neue Kundenanfrageformular auf der Hannah Clark-Website erhalten. Okay. 27. Ändern der Hover-Farben: Einer ist jetzt startklar und jetzt müssen wir die responsiven Probleme und andere UIS-Probleme beheben Zuallererst, wenn wir den Mauszeiger darüber bewegen, bekommen die Schaltflächen diese orange Farbe und es scheint ein bisschen unprofessionell zu sein und es passt nicht zum Business Coach-Thema und nicht zur Farbpalette Lass es uns reparieren. Um das Problem zu beheben, klicke ich auf Mit Elemento bearbeiten. Mein Plan ist es klicke ich auf Mit Elemento bearbeiten. Mein Plan ist Maus darüber zu fahren, damit es in derselben Farbe erscheint das zu tun, müssen wir eins nach dem anderen vorgehen und sie so reparieren Klicken Sie auf die Schaltfläche und gehen Sie zu Estyle Lassen Sie uns diese Farbe zu dieser Farbe machen, dieselbe Farbe und dieselbe Textfarbe werden so weiß sein Jetzt können wir auf Kopieren klicken und dann auf diese Schaltfläche klicken, einfach drüber schreiben und auf Pastyle klicken Aber wenn ich das Design ändere, drücke ich Command Is oder Control unter Windows und lass es uns einfach ändern hier klicken und zu Style auf Ho gehen, dieses Weiß ändern und diese Primärfarbe so Dann klicken Sie hier einfach auf das Formular und dann auf ButtonTyle , wir müssen zur Schaltfläche gehen und die Hintergrundfarbe wird diese sein und die Textfarbe wird weiße Farbe sein Wir müssen uns keine Gedanken über vorherige Schaltfläche machen, weil wir keine haben, und dann müssen wir sie hier korrigieren Klicken Sie einfach hier und einen Stil, ich kann ihn in eine einheitliche Farbe ändern und so Jetzt sieht es so professionell aus als zuvor. Jetzt klicke ich auf CF Bliz und wir müssen das gleiche Problem in der Kopfzeile beheben . Dazu klicke ich auf diese Kopfzeile, um einen Teil zu bearbeiten, und los geht's, klicken wir darauf und dann auf Es Kachel auf Nova, ändere die Farbe auf Standardfarbe wie folgt Veröffentlichen Sie es jetzt und dann klicken wir hier und klicken Sie auf Foot Gehe zum Futa-Bereich. FutaSection müssen wir dieselbe Bearbeitung vornehmen, um das Social-Media-Symbol zu ändern Okay, hier, klicken Sie hier und auf den Rand des Estyle-Symbols, ändern Sie es in diese Farbe Klicken Sie dann im nächsten Video auf Veröffentlichen und Lassen Sie uns das Responsive-Problem beheben 28. Korrigieren der Reaktionsfähigkeit des Tablets: Hallo, alle zusammen. Jetzt müssen wir die Reaktionsfähigkeit dieser Website erhöhen Diese Website reagiert nicht auf Tablets oder Mobilgeräten. Fangen wir also an, das zu tun. Zuerst gehe ich zur Desktop-Version und beginnen wir mit der Kopfzeile, also klicken Sie auf diese Kopfzeile, um sie zu bearbeiten Okay, jetzt bin ich in der Kopfzeile, also werde ich jetzt auf diese Tablet-Portret-Version klicken, und hier müssen wir zuerst links und rechts Abstände hinzufügen Das wird also eingezahlt. Also klicke ich auf Container bearbeiten und auf Advance, ihr seht hier jetzt das Tablet-Portrat und hier ist der Desktop Hier ist das Handy. Also werde ich auf dem Tablet die Verknüpfung dieses Werts aufheben Dann fügen wir 20 hinzu. Nein, nein, nicht für Top Top wird Null sein, richtig 20. Mir gefällt das auch. Und als nächsten Schritt wird das Menü nicht richtig angezeigt. Es wird als Hamburger-Menü angezeigt, aber wir benötigen es als normales Menü, da dort Platz ist , um es als normales horizontales Menü hinzuzufügen Um das Problem zu beheben, können wir diese Pause einfach auf mobile Geräte ändern Und auf diese Weise wird das Menü so aussehen. Dann können wir zu Style gehen und dieses Zeug wie vertikale Lass uns sechs draus machen und den I-Abstand zwischen 20 verkleinern und jetzt sieht es auf dem Tablet so aus und ich kann auf diesen Container klicken, und hier füge ich den Spaltenabstand Machen wir es wie 25 Dann gehen wir wieder zum Menü und fügen Sie das Leerzeichen zwischen 25 hinzu. Okay, jetzt sieht es viel besser und auf der Vorderseite der Tablet-Version sieht es gut aus. Und jetzt gehen wir auf diese Hauptseite, um das zu tun Ich werde das zuerst veröffentlichen und dann auf Seite bearbeiten klicken. Okay, jetzt bin ich auf unserer Startseite, also werde ich auf dieses Tablet Porto klicken und hier muss ich zu Advance gehen und Polsterungen wie rechts zum Leeren und links zum Leeren hinzufügen rechts zum Leeren und links zum Leeren Hier werde ich auf diesen Container klicken und im Layout können wir das Justify Content Center hinzufügen Ich möchte das nur in die Mitte stellen. Lass es uns versuchen. Klicken Sie hier und auf Advance sollte hier etwas eingestellt sein. Lassen Sie uns das Set herausfinden. Okay, hier richten wir es aus, KEINE Tablet-Version, lassen wir es so ausrichten, dass es sich selbst als Mittelpunkt ausrichtet lassen wir es so ausrichten, dass es sich selbst als Mittelpunkt Jetzt passt es sich korrekt und wir müssen die Schriftgröße nicht ändern, aber wenn wir wollen, können wir auch die Schriftgröße ändern Klicken wir dazu hier, um den Header rechtzeitig für Apple zu bearbeiten . Klicken Sie hier und klicken Sie dann auf Man Global Fonts Bevor wir das tun, können wir einfach diese Größe anpassen und die beste Größe herausfinden. 38 ist also die beste Größe für diesen Header. Und was ist mit hier? Lass es uns versuchen. Machen wir es so, als ob 22 gut für Subheader wäre, und was ist hier Die Absatzgröße wird in Ordnung sein. Jetzt klicke ich erneut auf diese Überschrift und ändere die Typografie Kopfzeile und ändere diese Typografie auch in Unterüberschrift und Dann klicke ich auf dieses Managed Global-Schriftsymbol und auf die globale Schrifteinstellung Ich wähle einfach die Portrait-Version aus und klicke auf Header und hier sehen wir Lass uns 38 so draus machen. Und hier müssen wir das auf 220 machen und die Tastengröße wird ungefähr 18 sein? Ja, 18 wäre gut. Und jetzt ist die Größe der Menülinks okay. Jetzt klicke ich auf Änderungen speichern und dann auf Zurück zum Editor , um zum Editor zurückzukehren. Okay, jetzt bin ich auf der Homepage und unser Heldenbereich sieht so aus, und ich werde hier klicken. Und wenn wir wollen, können wir die Polsterung dieser Taste verringern Also machen wir es wie oben zwölf und lassen es uns wie oben 15 machen, rechts wird 15 sein, unten 15. Links 15. So wie das hier. Es scheint zu klein zu sein. Was ist mit 20, 15 bis 20? 20 bis 20 sind nicht gut. Okay. Das ist viel besser, wir müssen hier dasselbe tun, aber hier sieht es gut aus. Und jetzt müssen wir in diesem Abschnitt nichts mehr tun, also klicke ich auf diesen Hauptcontainer und im Voraus können wir Test 20 und den linken Test 20 hinzufügen, und er wird entsprechend angepasst. Und im obigen Abschnitt klicken wir einfach hier und fügen die Polsterungen Nas 20 und 20 wie folgt Und wieder werde ich hier klicken und sehen, wie es sich von selbst ausrichtet. Lass es uns zentrieren und es wird so aussehen. Lassen Sie uns das eigentlich als eine Spalte zusammenfassen. Derzeit haben wir also zwei Spalten, also machen wir es wie eine Spalte. Um das zu tun, klicke ich auf diesen Container. Lassen Sie uns im Layout diese Richtung in eine Spalte wie diese ändern und jetzt sieht sie so aus. Jetzt klicke ich auf diesen sekundären Container und dieser Container prozentual und er wird zu 100% so sein. Jetzt sieht es ziemlich gut aus. Jetzt wird es so aussehen. Wir können hier dasselbe tun, aber der Heldenbereich sieht schon besser aus. Jetzt haben wir diesen Abschnitt. Zuerst müssen wir die linken und rechten Fadins 20 hinzufügen, links wird auch 20 sein Okay. Dann haben wir dieses Netz. Also klicken Sie auf das Raster, klicken Sie zuerst auf das Raster, und wir können zum Layout gehen und zu Rasterzeile und -spalten, wir können es wie ein zweispaltiges Raster machen und die Zeilen werden so drei sein. Okay, jetzt ist es viel besser, wir müssen diese Schaltfläche ändern, etwa zwischen 2020 und 2020 Okay. Jetzt reparieren wir nur den zweiten Abschnitt mit den Diensten und jetzt haben wir diesen Abschnitt mit der Erfolgsgeschichte. Also klicken Sie hier und fügen Sie die Polsterung hinzu. Fügen wir also hinzu, klicken wir gemeinsam auf diese Linkqualität, um das Verblassen von oben und unten zu entfernen Jetzt rechts Test zwei und links Test auf 20. Okay. Nun, wenn wir wollen, können wir die Anzahl der Objekte so ändern sie angezeigt werden, sodass wir die Höhenvorschau wie zwei ändern können und dann zwei vorherige Basisanzeigen wie diese Dann gehen wir zum nächsten Abschnitt und hier fügen wir hier also die Mindesthöhe Wenn wir wollen, können wir die Mindesthöhe entfernen , also setzen wir die Mindesthöhe auf Null, und dann können wir die obere Überblendung wie 30 hinzufügen und die untere Fading wird 30 sein Es ist viel besser als zuvor. Und dann müssen wir das hier korrigieren, also klicke ich auf den Hauptcontainer und hier werde ich die Mindesthöhe auf Null setzen. Von hier aus können wir das als Spalte machen, um es in zwei Zeilen zu machen und weitermachen, fügen wir rechts bei 20 hinzu, links als 220. Klicken Sie dann auf den sekundären Container, den Container in diesem Container, und ändern Sie den Wert auf Prozent und stellen Sie ihn auf 100% ein. Auf diese Weise können wir hier den gleichen Prozentsatz von 100% machen , so wie hier. Okay. Jetzt sieht es ziemlich gut aus. Außerdem müssen wir das Pad oben und unten hinzufügen. Also lass uns oben mit 30 und unten mit 30 so sein. Okay, jetzt beheben wir auch dieses Problem und jetzt müssen wir den A-Abschnitt beheben. Klicken Sie also auf Veröffentlichen. Okay, klicken Sie jetzt auf Con Footer , um den Footer-Bereich zu bearbeiten. Also hier, es sieht gut aus. Also klicke ich auf den Hauptcontainer und lasse die obere Polsterung bei 30 bleiben, und die rechte ist 20, die untere ist 30 und die rechte ist links 20, so wie hier Also müssen wir nichts tun. Ich passe mich entsprechend an. Eigentlich müssen wir hier die Farbe ändern. Also ändern wir die Primärfarben so. Okay. Jetzt müssen wir hier nichts tun und der Copyright-Bereich sieht gut aus. Also klicke ich jetzt auf Veröffentlichen. Und jetzt gehen wir zur Hauptseite, klicken Sie einfach so und ich werde auf der Hauptseite gutgeschrieben. Okay. ist unsere Tablet-Version voll funktionsfähig und Sie können das Design dieser Website im Responsive Checker Tool überprüfen und im Detail herausfinden Ich gehe einfach zum Responsive-Testtool und kopiere einfach die URL der Website und füge die URL hier Klicken Sie auf C check, und hier können wir die Vorschau auf dem Desktop sehen und wir können ihre Größe mit verschiedenen Versionen wie dieser herausfinden . Und wir können die Tablet-Version so testen und auf dem Tablet wird es so aussehen 29. Optimierung der Reaktionsfähigkeit auf Mobilgeräten: Hallo, alle zusammen. Lassen Sie uns nun die mobile Reaktionsfähigkeit dieser Website korrigieren die mobile Reaktionsfähigkeit dieser Website Wenn ich auf Mobile Portre klicke, wird es so aussehen, und lassen Sie uns das verbessern Lassen Sie uns zunächst mit der Kopfzeile beginnen, also klicke ich auf die Kopfzeile Okay. Jetzt haben wir hier diesen Header, mit dem wir das Hauptmenü unserer Website in der Mobil- und Tablet-Version angezeigt haben. Aber auf Mobilgeräten sollte es diese Art von Hamburger-Menü geben, aber mit diesem Design sind wir dazu nicht in der Lage Wir werden dieses Design auf mobilen und kreativen Geräten verstecken. Um das zuerst zu tun, dupliziere ich dieses Menü und klicke auf dieses erste Menü und gehe zu Advance Advance Wir werden einen responsiven Bereich im responsiven Bereich haben, wir können ihn auf Mobilgeräten verstecken. Dieser Abschnitt wird auf Mobilgeräten nicht mehr angezeigt und jetzt haben wir den zweiten Abschnitt, den wir verpflichten. Ich gehe zu Advance und auf Responsive Lassen Sie uns ihn auf Desktop und Tablet ausblenden und auf Mobilgeräten anzeigen Wenn wir jetzt zum Desktop gehen, ist der zweite so verschwunden Dann klicke ich hier auf den Container und auf das Layout, er hat die Richtung als Zeile. Und in dieser Schaltfläche versuchen wir, auf die Schaltfläche zu klicken und sie zu löschen. Dann klicken Sie auf diesen Container und lassen Sie uns diesen Container mit 60, 60 bis 40 erstellen. Machen wir es so, dass 30, 20, zehn die beste Größe sein werden. Vielleicht machen wir 20, 20 bei 20, und auf diese Weise können wir das Menü vergrößern. Jetzt klicke ich auf dieses WordPress-Menü und wir müssen ein neues Menü für diesen Abschnitt erstellen , weil wir einfach diese Kontaktschaltfläche aus dem mobilen Menü entfernen Was wir tun können, ist hier zu klicken. Das Menü ist auf dem Bildschirm und es werden die Menüs geöffnet Dann werde ich hier ein neues Menü erstellen. Fügen wir dem Menünamen das mobile Menü hinzu und klicken Sie auf Meno erstellen. Dann müssen wir die Menüelemente hinzufügen Zuerst fügen wir das Zuhause hinzu. Dann gehen wir hierher und gehen zu den Tablets dann müssen wir Zeugenaussagen hinzufügen und dann warten Eigentlich können wir zu unserem Figma-Design übergehen. Okay, auf unserem Pigma-Design können wir diese Texte kopieren, zuerst hier kopieren, los geht's und auf einen benutzerdefinierten Link unter Über ein Hashtag hinzufügen, dann haben wir Dienste, klicken Sie darauf und fügen Dienste wie diesen hinzu, fügen Sie Hashtag hinzu Menü hinzufügen, dann wird Kopie der Testimonials hier unter dem Hashtag in die URL eingefügt Fügen Sie dann auch das Kontaktmenü zu diesem Menü hinzu, fügen Sie den Hashtag hinzu und klicken Sie auf Desktop-Version, wir fügen diese Kontaktschaltfläche als separate Schaltfläche In diesem Fall müssen wir es also zum mobilen Menü hinzufügen und auf Menü speichern klicken. Und hier werde ich auf Veröffentlichen klicken und dann gehen wir zur mobilen Version, und jetzt werde ich diese Seite erneut unterdrücken Okay, jetzt gehen wir zum Header-Bereich. Gehe einfach zum WP-Adminbereich und hier auf Templates im Builder, klicke auf diesen Header, um ihn zu öffnen, und klicke auf diesen Bearbeiten-Button , um den Inhalt zu bearbeiten. Okay, jetzt gehe ich hier zur mobilen Version und klicke auf das Menü und hier ändere ich es zum mobilen Menü. Wenn wir jetzt das Menü überprüfen, haben wir es so, aber wir können es reparieren, um es zu reparieren. Grabe die gesamte Breite so aus, und wenn ich es jetzt ankreuze, sieht es so aus und es hat alle Gegenstände. Jetzt kann ich zu Etles OneTils gehen. Die Typografie wird Menülink sein und die Textfarbe wird diese Farbe Und hier müssen wir zum Dropdown gehen und wir müssen die Drop-down-Einstellung anpassen Also hier wird die Testfarbe diese Farbe und die Hintergrundfarbe sein, lassen Sie uns die Hintergrundfarbe so ändern und die Testfarbe weiß machen, und jetzt wird es so aussehen. Edge Over behalten wir also den Standardwert bei, denn auf Mobilgeräten ist der Rand nicht so wichtig und wir brauchen den Rand auch nicht Und was ist mit horizontalem Pading? Lassen Sie uns das auf etwa 20 machen, dann das vertikale Pading, lassen Sie es uns so und wir können den Abstand anpassen , jetzt machen wir den Abstand so, und jetzt machen wir es wie folgt Und jetzt gehen wir zur Umschalttaste. Auf Toggle können wir die Farbe ändern. Lassen Sie uns die Farbe tatsächlich in Weiß ändern, und die Hintergrundfarbe wird diese Primärfarbe sein, und lassen Sie uns ihre Größe auf 35 erhöhen, 35 ist gut Und jetzt wird es so aussehen, und wir brauchen keinen Wasserradius. Lassen Sie uns den Wasserradius so gestalten und ihn viel besser machen, und wir müssen uns nicht viele Gedanken über unser Handy machen und unser Handymenü ist fertig. Jetzt kann ich auf Veröffentlichen klicken und wir gehen zu unserer Website, gehen wir zur Website oder wir können es mit dem Responsive Test Tool überprüfen und gehen wir zu Hier ist das Handy. Hier ist das Handy und lass es uns auf dem Handy überprüfen, damit es so aussieht, und jetzt müssen wir den Heldenbereich anpassen, um das zu tun. Ich klicke hier auf die Startseite, um zur Startseite weiterzuleiten, und klicke dann auf das mobile Board. Hier ist das zu nah. Also repariere es, ich klicke auf den Hauptcontainer und auf Advance Add Top Adding wie 60, nein, ich muss es nur nach oben hinzufügen. Fügen wir oben wie 60 hinzu und der rechte Wert wird 20 sein und der untere Wert wird Null sein und der linke Wert wird 220 sein, so wie hier. Jetzt ist es viel besser. Wenn wir wollen, können wir die Schriftgröße verringern, hier klicken und wir gehen einmal zur Typografie und versuchen, sie auf 28 zu ändern , sie ist zu klein Wird gut aussehen. Machen wir es auf 32 und 34, und der Rest der Schrift bleibt gleich. Klicken Sie hier. Klicken Sie auf Globale Schrift verwalten, dann auf Kopfzeile und stellen das mobile Portrait ein und machen Sie es 34 34 so und klicken Sie auf Änderungen speichern und ich werde den Rest der Schriftgröße unverändert lassen und klicken Sie auf Änderungen speichern und ich werde den Rest der Schriftgröße unverändert lassen, wenn wir es von hier aus ändern, auf das globale Design auswirkt. Aus diesem Grund verwenden wir die globalen Schriftarten. Okay, jetzt wird es viel besser aussehen und klicken Sie hier. Wenn wir wollen, können wir diese Schriften in voller Breite erstellen. Hier können wir also Dehnung statt Dehnung hinzufügen. Richten Sie sich im Voraus aus, verwenden Sie es Stretch. Es funktioniert mit werde ich voll zwei sein, das sieht gut aus. Wenn wir wollen, können wir dieses Top und diesen Text-Button machen . Klicken Sie auf das Bild und auf Advance, klicken Sie auf diese Bestellung , um so zu beginnen. Jetzt wird es so aussehen und es ist viel besser als zuvor. Und jetzt in diesem Abschnitt können wir einfach zum Layout gehen und zwei Spalten so ändern und hier lassen wir den Roger Pass 220 so einstellen und hier ändern wir das zwischen der Größe. Lassen Sie uns die Titellücke so gestalten, dass sie so aussieht. Klicken Sie nun mit der rechten Maustaste auf Kopieren und klicken Sie mit der rechten Maustaste auf Stil einfügen, Stil einfügen, Stil wie folgt einfügen. Dann fügen wir etwas Abstand hinzu. Machen wir es so, als ob 30, 30 wäre viel besser. Dann auf dem Hauptcontainer auf Vorfahrt, das ist oben Fadins 20, rechts werden 220, unten 20, links 20 sein Wird so aussehen. Dann haben wir hier dieses Bild und der Text, der gut aussieht und hier sieht es gut aus und das Handy kann einfach darauf klicken und etwas Abstand hinzufügen. Lassen Sie uns den Abstand als und den Spaltenraum hinzufügen, lassen Sie uns den Spaltenabstand auf 15 setzen, so wie hier. Jetzt wird es so aussehen und hier müssen Sie nichts tun, und dieser Button sieht gut aus. Und hier haben wir eine Vorschau einer Folie, und hier müssen wir nichts tun. Alles sieht gut aus. Hier, machen wir es zum Header. Also ja, es sollte Header sein. Auf diese Weise wird dieser Header angepasst. Das Typogramm sollte als Header verwendet werden, und hier sieht es gut aus Wenn wir wollen, können wir einige rechte und linke Polsterungen entfernen . Also lass uns. Lassen Sie uns den oberen Pfad 30 setzen, rechts werden zwei Brunnen und unten werden 30 sein, links wird es so sein. Auf diese Weise werden wir etwas mehr Abstand haben. Okay. Jetzt sieht die Homepage gut aus. Und wenn Sie möchten, können wir diese Textzentren so einrichten. Es liegt an dir. Ich werde es so auf der linken Seite lassen, es wird leicht lesbar sein. Also werde ich jetzt auf Veröffentlichen klicken und dann muss ich zum Bereich Fußzeile gehen Klicken Sie auf Fußzeile und Fußzeile, wir müssen nicht viel tun, also klicken Sie einfach auf den Hauptcontainer und dann auf Hauptcontainer, lassen Sie uns OgaPas 30, 30 erstellen Was für 60. Ja, 60 werden viel besser sein, und jetzt wird es so aussehen. Der Copyright-Bereich sieht also gut aus. Jetzt werden wir diese Änderungen veröffentlichen und die Reaktionsfähigkeit unserer Website ist vollständig gestaltet In der nächsten Lektion müssen wir die Animation zu dieser Website hinzufügen und jeder Schaltfläche dieser Website Funktionen hinzufügen jeder Schaltfläche dieser Website Machen wir das also in der nächsten Lektion. 30. Verknüpfen von Website-Abschnitten: Hallo, alle zusammen. Jetzt müssen wir diese Abschnitte verlinken, was bedeutet, wenn ich auf diese Info-Seite klicke, sollte sie direkt auf diesen verweisen oder auf diesen Abschnitt Also lass uns das machen. müssen wir jedem Abschnitt IDs zuweisen. Um das zu tun, fangen wir von zu Hause aus an. Also klicke ich auf der Startseite auf den Hauptcontainer und gehe dann zu Advance. Bei Advance werde ich die CSS-ID wie folgt hinzufügen. Dann lass uns zur nächsten Sitzung gehen. nächste Abschnitt ist dieser, klicken Sie darauf und hier wird dies eine Sitzung sein. Ich werde einfach CSS-IDs hinzufügen. Dann haben wir hier eine Servicesitzung. Ich füge Tanz hinzu und gehe hierher und füge Ids Vss hinzu. Wenn du zwei Wörter hast, meine Dienste, kannst du meine Dienste wie diesen zusammenfassen In meinem Fall sind es nur Dienstleistungen und der nächste Abschnitt ist testimonio. Lassen Sie uns diesen Text von hier kopieren und dann auf den Hauptcontainer klicken und die CSS-ID als Testimonial hinzufügen und immer im gleichen Format hinzufügen, das heißt, wenn Sie in Testimonial Großbuchstaben als Anfangsbuchstaben hinzufügen Großbuchstaben als Anfangsbuchstaben in Testimonial Behalte die Konsistenz bei und hier haben wir Kontakte. Ich gehe zu Advance und füge das als Kontakt hinzu. Okay, jetzt veröffentliche ich das und jetzt müssen wir zum Menübereich unserer Website gehen, um das zu tun Ich werde diese Website einfach in einem neuen Fenster öffnen, und hier gehe ich zu den Menüs Appearance Men und hier haben wir das mobile Menü. Beginnen wir mit dem Hauptmenü, wählen Sie das Hauptmenü aus und klicken Sie auf die Schaltfläche Auswählen. Und die Homepage ist mit der Homepage verlinkt, und dann haben wir diese Info-Seite. Auf einer Seite müssen wir eine ID hinzufügen. Also klicken wir auf den Hauptcontainer und auf den Hauptcontainer, hier haben wir die CSS-ID, kopieren sie und fügen sie so hinzu. Wenn wir also die ID hinzufügen, sollte sie mit einem Hashtag beginnen Als wir es hinzugefügt haben, haben wir es mit der Homepage-URL so gemacht, weil dieser Abschnitt auf der Homepage befindet Füge diesen Hashtag immer etwa nach der Homepage-URL hinzu. Ich werde die Homepage-URL kopieren und gehen wir zu Diensten und zu Diensten, machen wir dasselbe mit der URL der Website, dann mit dem Hashtag, dann gehen wir hierher, klicken Sie Fügen Sie es bei CSS ID so hinzu, dann haben wir ein Testimonial, klicken Sie Lassen Sie uns den Hauptcontainer auswählen und im Voraus diesen Text kopieren und wie folgt einfügen Eigentlich müssen wir diesen Abschnitt so kopieren und dann so einfügen, dann können wir jetzt auf C savenu klicken und das behalten wir bei Ich werde hierher gehen und die Website in einem neuen Fenster öffnen und mal sehen, wie ich beim Klicken auf „Über“ klicke, es wird zum A-Bereich weitergeleitet und wenn Nlck Css, wird es zum Servicebereich weitergeleitet Wenn ich auf Testimonial klicke, wird es zum Testimonial weitergeleitet diese Weise können Sie unsere Website verlinken , da dies die einseitige Website ist Okay, jetzt müssen wir dieselbe Aktion zu diesem Kontakt hinzufügen, also müssen wir dazu die Daten hinzufügen . Lass uns Kontakt aufnehmen. Aber um das zuerst zu tun, scrolle ich hier nach unten und klicke hier, dann kopiere ich das und jetzt kann ich hier klicken und zur Kopfzeile gehen. der Kopfzeile haben wir hier das Hauptmenü und hier haben wir die Schaltfläche. bei diesem Button-Link z. Kopieren Sie bei diesem Button-Link z. B. zuerst die URL der Website mit dem Hashtag und fügen Sie dann die Option ID und Link Aktivieren Sie kein Fenster oder ein anderes Fenster und klicken Sie dann auf Veröffentlichen. Sie müssen es nicht ansehen, klicken Sie einfach auf Veröffentlichen um es zu veröffentlichen, und drücken Sie dann erneut auf die Seite Klicken Sie nun auf die Kontakt-Schaltfläche und es wird wie folgt weitergeleitet Das ist der Weg bis jetzt, dann müssen wir diesem Helden-Button Action hinzufügen. Gehen wir also die Startseite, um die Homepage zu bearbeiten, und hier klicken wir auf diese Schaltfläche und hier die URL ein und nach dem Hashtag müssen wir den Kontakt hinzufügen, müssen wir den Kontakt hinzufügen denn wenn wir auf diese Schaltfläche klicken, sollte er zu diesem Kontaktformular weiterleiten Das ist der CTA oder der Aufruf zum Handeln, hier haben wir bereits Facebook und LinkedIn und andere soziale Profile hinzugefügt und LinkedIn und andere soziale Profile Hier müssen wir dieselbe URL wie diese hinzufügen Fügen wir ja hinzu. Dann ist es jetzt fertig, jetzt veröffentliche ich es und wenn ich es dann in Aktion überprüfe, dann ruht die Website und klickt auf dieses Werk mit mir und es wird sich auf diesen Abschnitt beziehen. Jetzt müssen wir zum Menü gehen und das Fußzeilenmenü auswählen Dann müssen wir denselben Menü-Link zur Fußzeile hinzufügen. Hier geht es um und um Dienstleistungen. Lassen Sie uns überprüfen, ob die Dienst-ID in Ordnung ist. Bei den Diensten, die Sie hinzufügen, sollte dieses Wort genau dem Linkwort entsprechen. Wenn es anders ist, wird der Linkprozess nicht funktionieren, dann kontaktieren Sie uns hier und die Allgemeinen Geschäftsbedingungen und fünf Richtlinien, wir müssen diese beiden Seiten generieren. Klicken wir jetzt auf das Menü Speichern und dann gehen wir zum mobilen Menü und machen dasselbe. Okay. Jetzt haben wir hier ungefähr genau das Aktuelle, das wir von hier aus hinzufügen können. Jetzt können wir einen Servicebereich wie diesen aufrufen, dann hier über diese Dienste. Dann haben wir Testimonius. Lassen Sie uns einen Abschnitt mit Testimonios hinzufügen. So, dann lassen Sie uns hier eine Verbindung herstellen, wir müssen ihn als aktuell hinzufügen, und das Testimonial Dieser ist okay. Der Service ist okay. Worüber ist okay. El ist gut. Jetzt klicke ich auf Csavmu und das mobile Menü ist auch fertig. Jetzt können wir es in Aktion überprüfen. Wenn ich auf Conservs klicke, sollte es an die Dienste weitergeleitet werden. Jetzt ist der Lingn-Prozess Elgod, und als nächsten und letzten Schritt müssen wir in der nächsten Lektion Bedingungen und Pric-Richtlinienstatistiken hinzufügen Pric-Richtlinienstatistiken 31. Generieren von Seiten mit Nutzungsbedingungen und Datenschutzrichtlinien: Hallo, alle zusammen. Jetzt ist es an der Zeit, Datenschutzrichtlinien und Nutzungsbedingungen zu erstellen. Dazu können wir im Google-Datenschutzrichtlinien-Generator suchen , und wir werden diese Art von kostenlosen Datenschutzrichtlinien-Generatoren erhalten von kostenlosen Datenschutzrichtlinien-Generatoren Klicken Sie einfach darauf, und hier müssen wir ein einfaches Formular ausfüllen. Lassen Sie uns das zunächst Schritt für Schritt machen. Also zuerst klicke ich darauf. Werden wir Ihre Datenschutzrichtlinie verwenden? Es wird eine Website sein, dann klicke ich auf Weiter und erstelle eine Datenschutzrichtlinie. Und hier muss ich die URL der Website hinzufügen . Lassen Sie uns die URL der Website von hier kopieren. Dann müssen wir den Namen der Website hinzufügen. Fügen wir den Namen der Website hinzu, kopieren Sie den Namen der Website und fügen Sie ihn wie folgt hinzu. Dann müssen wir den Typ eingeben, also füge ich hinzu, dass ich eine Einzelperson bin, dann müssen wir das Land eingeben. Dann müssen wir den Bundesstaat eingeben und Ihr Land auswählen. In diesem Fall wähle ich einfach Vereinigte Staaten aus und klicke auf Weiter. Dann lies das hier einfach. Welche Art von persönlichen Daten sammeln Sie von Benutzern. In unserem Fall haben wir ein Formular. In diesem Formular haben wir eine E-Mail-Adresse, einen Vor- und Nachnamen, eine Telefonnummer und kein Social-Media-Profil ausgewählt Vor- und Nachnamen, eine Telefonnummer . Wir sammeln nur diese Dinge, wählen sie dann aus und klicken auf den nächsten Schritt. Wenn Sie mehr Felder haben, können Sie einfach die anderen beiden auswählen , dann klicke ich auf den nächsten Schritt. Hier haben wir eine weitere Frage namens Wie können Benutzer Sie kontaktieren, wenn Sie Fragen zu Ihrer Datenschutzrichtlinie haben? Hier können Sie per E-Mail, Besuch oder so etwas hinzufügen . In diesem Fall werde ich per E-Mail hinzufügen, dann kann ich die E-Mail-Adresse hinzufügen. Die E-Mail-Adresse lautet Hello at Hana Dot Custom Website Design Us und dann klicken Sie auf den nächsten Schritt . Hier haben wir zwei Möglichkeiten. Für die erste Wahl müssen wir die Premium-Version verwenden, aber wir brauchen sie nicht. Sie klicken also einfach auf Nein, ich möchte keine professionelle Datenschutzrichtlinie, klicken Sie einfach auf den nächsten Schritt und hier muss ich die E-Mail-Adresse hinzufügen. Ich füge einfach die E-Mail-Adresse hinzu und klicke dann auf diese, um eine zu generieren. Okay, wir haben gerade die Seite mit den Datenschutzbestimmungen generiert, sodass ich einfach auf diese beiden Zwischenablagen kopieren klicken kann Oder Sie erhalten diese Kopie auch an Ihre E-Mail-Adresse. Ich werde einfach auf In die Zwischenablage kopieren klicken. Gehen wir dann zum Dashboard der Website und fügen Sie auf der Seite , auf die Sie hier klicken, den Titel als Datenschutzrichtlinie Klicken Sie dann auf Bearbeiten mit dem Element von. Und hier klicke ich auf das Plus-Symbol, Textfeld und drücke das Feld. Die Richtung wird zur Richtungsspalte Und hier fügen wir eine Passmarge hinzu, eins, zwei, 20. Okay. Dann klicken Sie hier und fügen Sie einen Texteditor wie diesen Dann klicke ich auf diesen Code und gebe dann den Code ein, den ich mit diesem Datenschutzrichtlinien-Generator generiert habe . Und hier, lass uns zu Estyle gehen. Lassen Sie uns die Ausrichtung nach links vornehmen und die Typografie wird zum Absatz, die Farbe zur Textfarbe Da wir Linkfarbe hinzufügen können. Fügen wir diese grüne Farbe zur Linkfarbe hinzu. Und wir können Absatzabstände hinzufügen. Machen wir es wie 15 und schön, es wird so aussehen, und am Ende fügen wir hinzu, klicken wir auf den Hauptcontainer und für den unteren Teil fügen wir 120 hinzu, so wie hier. Dann klicken Sie auf Veröffentlichen und wir haben gerade die Seite mit den Datenschutzrichtlinien generiert die Seite mit den Datenschutzrichtlinien Lassen Sie uns die zweite Seite mit den Allgemeinen Geschäftsbedingungen erstellen. Dazu kann ich einfach so im Google Term and Conditions Generator suchen , und hier haben wir ein paar Vorschläge. Gehen wir also zum Term and Condition-Generator, Website, und hier müssen wir etwas hinzufügen. Wo werden Ihre Allgemeinen Geschäftsbedingungen verwendet? Es ist also die Website, dann klicken Sie auf Weiter und generieren Sie die Allgemeinen Geschäftsbedingungen, und hier müssen wir die URL der Website hinzufügen, und hier müssen wir den Namen der Website hinzufügen und hier den Typ eingeben, da ich in Ihrem Fall individuell bin, wenn es sich um ein Geschäft handelt, als Geschäfts- und andere Geschäftsinformationen. schätze, ich wähle einfach Ich bin individuell und stelle hier den Status ein und klicke auf const state und hier haben wir Fragen, C-Benutzer erstellen Konten? den Status ein und klicke auf const state und hier haben wir Fragen, C-Benutzer erstellen Konten Ist es möglich, dass Benutzer Inhalte erstellen und hochladen? Können Nutzer Waren kaufen, bieten Sie Abonnements an? Ich mache so ein Nein. Wenn irgendwas davon zutrifft, müssen Sie diesen Preis zahlen, aber der einfachste Weg ist, KI zu verwenden , um eine Seite mit allgemeinen Geschäftsbedingungen zu erstellen. Hier können wir wieder die E-Mail-Adresse hinzufügen. Ich habe gerade die E-Mail-Adresse so hinzugefügt, dann auf nächsten Schritt und dann auf Weiter geklickt. Hier müssen wir jetzt auch nachschauen und auf klicken. Im nächsten Schritt klicke ich auf Ich muss die E-Mail-Adresse hinzufügen, füge die E-Mail-Adresse hinzufügen klicke dann auf Kongenerieren Ich habe die Allgemeinen Geschäftsbedingungen generiert Jetzt kopiere ich diesen Text der Allgemeinen Geschäftsbedingungen und gehe auf die Website Hier kann ich einfach auf Neue Seite klicken und hier auf die Seite klicken, die im Titel als Nutzungsbedingungen festgelegt ist. Dann werde ich der gleichen Theorie folgen , der wir zuvor gefolgt sind, und zwar so. Fügen Sie dann im Voraus den oberen Rand als eins, zwei, 20 und den unteren Rand als 12 hinzu, wie folgt. Dann gehe ich hierher, kopiere das einfach in die Zwischenablage und schneide das hier aus und füge den Text wie folgt hinzu, gehe dann zum Code und füge ihn so Dann eine Kachel, mach daraus Typografie und die Link-URL wird in dieser Farbe sein Okay. Jetzt haben wir die Seiten mit den Allgemeinen Geschäftsbedingungen und den Preisrichtlinien. Veröffentlichen Sie sie jetzt Okay, jetzt gehen wir zum Menü auf Futter Menu, wählen es aus und klicken auf Verbergen und hier auf Allgemeine Geschäftsbedingungen und Prioratsrichtlinien , kreuzen Sie sie einfach von hier aus Oder Sie können auf Viewer klicken und hier sehen Sie die Allgemeinen Geschäftsbedingungen und die PriocPolicy und die PriocPolicy Dann klicken Sie einfach auf Zum Mann hinzufügen Hier haben wir einen benutzerdefinierten Link, gewinnen Sie Artikel entfernen Sie sie. Wir brauchen sie nicht. Und los geht's, jetzt klicken wir auf Menü speichern und jetzt gehen wir auf die Website und sehen sie uns in Aktion an. Okay. Klicken wir jetzt auf Datenschutzrichtlinie und los geht's. Wir reagieren einfach auf die Seite mit den Datenschutzbestimmungen und hier haben wir die Allgemeinen Geschäftsbedingungen Klicken Sie auf Allgemeine Geschäftsbedingungen . Wenn Sie jetzt zu den Diensten gehen möchten, können wir einfach auf Dienste klicken und zu den Diensten gehen. Okay. 32. Animationen hinzufügen: Jeder. Jetzt müssen wir unserer Website Animationen hinzufügen. Sie können jedem Text Animationen hinzufügen oder Sie können Animationen zu Abschnitten wie diesem Abschnitt zu diesem Bild hinzufügen . Der beste Weg ist das Hinzufügen von Animationen zu Abschnitten, denn wenn Sie zu viele Animationen hinzufügen, wirkt sich dies auf die Ladegeschwindigkeit der Website aus. Lassen Sie uns diesen Abschnitten Animationen hinzufügen. In der Kopfzeile werde ich keine Animationen hinzufügen. Ich werde den Standard-Header beibehalten und für diesen Abschnitt klicke ich einfach auf den Container und gehe zu Advance. Vorab haben wir Bewegungseffekte auf Bewegungseffekte, wir haben Eingangsanimationen. Wir können also Fade-In, Fade-In Links, Fade-In Rechts hinzufügen , und wir haben noch viel mehr Omen-Sachen wie dieses und Roll-In. Also die sind nicht so professionell. In diesem Fall füge ich Fading Left hinzu. So wie das. Hier können wir die Animationsdauer hinzufügen, also werde ich es so schnell machen. Dann können wir die Animation verzögern. Wenn Sie hier 1.000 hinzufügen, wird diese Animation nach 1 Sekunde ausgeführt, aber ich werde sie nicht verwenden. Also hier müssen wir die Animation zu diesem Bild hinzufügen. Gehen wir hier zu Bewegungseffekten, die Eingangsanimation wird wie folgt eingefügt, dann wird die Geschwindigkeit wie folgt übergeben. Dann veröffentliche das und lass es uns in Aktion sehen. Also, jetzt klicke ich auf die Vorschau der Änderungen und mal sehen, jetzt wird es so animiert Dann haben wir diesen Abschnitt, klicken auf den gesamten Abschnitt und auf Advance, gehen zu Bewegungseffekten und fügen hier Fading Up wie folgt Gehen wir jetzt zu diesem Abschnitt und machen dasselbe. hier bei Bewegungseffekten Fügen Sie hier bei Bewegungseffekten Fading links wie folgt hinzu und fügen Sie hier Motion EffxFad Dann haben wir hier diese beiden Abschnitte. Lassen Sie uns diesem ganzen Abschnitt tatsächlich Animationen hinzufügen. Also klicken Sie hier und gehen Sie weiter zu Motion Effex. Fügen wir es hinzu, indem wir es wie folgt ausblenden Dann haben wir diesen Abschnitt und in diesem Abschnitt sieht es nicht gut aus, wenn wir diesem Hintergrund Animationen hinzufügen Fügen wir also nur für diesen Inhalt hinzu. Also hier können wir diese Animationen zu diesem Abschnitt mit drei Ansichten hinzufügen , sie auswählen und zum Bewegungseffekt gehen und hier drin, sie so ausblenden lassen , oder vielleicht lassen wir sie wie Fading hinzufügen, Nein, nicht. Mach es so, als würde es verblassen. Und hier im aktuellen Design können wir diesen beiden Elementen nicht einfach eine Animation hinzufügen. Um das Problem zu beheben, muss ich einen neuen Container wie diesen erstellen und das Zeug aus diesem Container entfernen und einfach diese beiden Texte so in diesen Container einfügen. Und dann kann ich den ganzen Container auswählen und bei Motion EWX dann kann ich ihn wie folgt hinzufügen Okay, jetzt haben wir diesen Abschnitt mit den Abschnitten und im gehen wir zu Bewegungseffekten und fügen Fading Die Animationsdauer wird schnell sein und lassen Sie uns dieses Formular wie folgt ergänzen Ziemlich gut und wir müssen es schnell machen und wir müssen Fasten machen, dieses, um es hier so schnell und schnell zu machen und ich denke, es ist schnell. Lass uns sehen. Es ist normal, mach es schnell. Was ist mit diesem Abschnitt? Bewegungseffekt, nicht normal, mach es schnell und mach es schnell. Versuchen Sie also immer, die Konsistenz der Website zu wahren. Auf diese Weise erhalten Sie einen einzigartigen Fluss auf der gesamten Website wie diesen. Okay. Sehen wir uns das jetzt in Aktion an. Also los geht's. Ich klicke einfach hier und lass uns sehen, okay, die Animation funktioniert, und wenn ich scrolle, wird sie so animiert. Für den Fuß werde ich keine Animationen hinzufügen. Fügen Sie diesen Abschnitten einfach Enranc-Animationen hinzu, und diese Animationen funktionieren sowohl auf Mobilgeräten als auch auf Tablet-Versionen 33. Einrichten von Rank-Mathematik für On-Page-SEO-Optimierung: Hallo zusammen. Jetzt ist es an der Zeit, das SCO auf der Seite zu machen. Wir können das Rank MAT-Plugin verwenden, um unsere Website für SCO zu optimieren. Gehen wir also zu Plug INS und dann auf Plugins, klicken wir auf Plugin. Unser Fokus liegt darauf, dass, wenn jemand unsere Website oder unseren Firmennamen bei Google sucht, unsere Website im ersten Ergebnis von Google oder anderen Suchmaschinen angezeigt werden sollte . Also werde ich bei Plug Is auf Such-Plugins klicken und hier nach Rank MAT Presenter suchen. Okay. Hier haben wir Rank Also, jetzt klicke ich einfach auf Jetzt installieren und dann auf Aktivieren. Okay. Jetzt gehen wir zu dieser Einrichtungsseite und hier müssen wir das Rank Max-Profil mit Google verbinden. Ich klicke einfach auf Konto verbinden. Und hier haben wir einen Ort , an dem Sie sich anmelden können. Wenn Sie kein Rank Math-Konto haben, können Sie auf Jetzt registrieren klicken und sich registrieren oder ein kostenloses Rank Math-Konto erstellen. Also hier werde ich Google benutzen. Wenn Sie Facebook-Code oder WordPress haben, können Sie diese verwenden oder Sie können nur die E-Mail-Adresse verwenden , um sich zu registrieren. In meinem Fall habe ich bereits ein Rank Math-Konto, also klicke ich auf diese Anmeldeschaltfläche und wähle hier die Gmail-Option. Okay. Jetzt wähle ich hier mein Gmail und klicke hier auf Jetzt aktivieren. Jetzt gehen wir zu diesem Einrichtungsassistenten und hier werde ich diese einfache Option wählen, da wir kein Profi bei SOT sind . Die einfache Option hilft uns dabei, dieses Plugin einfach einzurichten, ohne tiefes Wissen über SEO zu haben. Okay, jetzt klicke ich auf Start Wizard und hier muss ich den Webseitentyp auswählen. In meinem Fall wird dies ein persönliches Portfolio sein. Und hier wird der Name unserer Website angezeigt, und ich werde diese Website überspringen, der alternative Name, und der Name der Person, der Organisation wird Hannah Clark sein . Wenn Sie das als Kleinunternehmen auswählen, müssen Sie in meinem Fall mehr Dinge hinzufügen In unserem Fall sollte es ein persönliches Portfolio sein. Okay, hier müssen wir ein Logo für Google hinzufügen, die Loggröße sollte eins nach dem anderen sein, um es zu schweißen. Derzeit ist das das Logo, aber es ist nicht quadratisch Was wir also tun können, ist ein quadratisches Logo zu erstellen. Um das zu tun, gehe ich zu unserem FigmaFle Okay. Jetzt werde ich hier einfach einen Rahmen erstellen, einfach hier klicken und so klicken und jetzt muss ich ihn auch nach dem anderen machen Dann kopiere ich einfach diesen Text und komme hierher und füge ihn so ein. Jetzt werde ich die Größe erhöhen, indem ich Befehlstaste oder und das Mausrad so verwende, dann werde ich diese Schriftgröße wie folgt verringern. Okay. Nun, was wir tun können, ist, dieses ausgerichtete Zentrum so zu dieses ausgerichtete Zentrum so gestalten und es zentriert zu machen, und wenn ich will, kann ich diese weiße Farbe in diese dunkle Farbe ändern. Lassen Sie uns das hier schnell machen und bei der Füllfarbe wählen wir einfach die Primärfarbe und diese Textfarbe aus, lassen Sie uns diese Farbe als Sekundärfarbe auswählen. Das ist viel besser. Jetzt werde ich das in NC umbenennen und jetzt auf Explore den Typ Pass JPG auswählen und auf Explore klicken. Ich habe heruntergeladen. Lass uns jetzt hierher gehen. Klicken Sie auf Upload-Datei hinzufügen und klicken Sie hier Laden Sie dann einfach die heruntergeladene Datei herunter oder laden Sie sie einfach hoch. Okay. Und hier fügen wir das ALT-Tag hinzu und klicken auf Diese Datei verwenden Jetzt sieht unser Logo für Google so aus, und jetzt müssen wir das Standardbild für das Teilen in sozialen Netzwerken hinzufügen. Seine Größe sollte also 1206 hundert 30 sein. Lassen Sie uns also einen weiteren Rahmen erstellen. Lass uns hierher gehen und auf diesen Rahmen klicken und dann hier klicken. Dann lassen Sie uns hier die Bildgröße 1.200 630 herausfinden. Okay, für das Internet, 1206 30. Okay. Das standardmäßige soziale Netzwerk hier im Bild bedeutet wenn jemand unsere Website in sozialen Medien wie Facebook teilt , eine Vorschau unserer Website angezeigt wird. Die Standardvorschau wird also nicht gut aussehen. In dieser Rangfolge können wir also eine Vorschau hinzufügen, die eine einzigartige Ansicht und eine benutzerdefinierte Ansicht hat, und das wird sehr professionell sein. In diesem Abschnitt wähle ich einfach diesen Heldenbereich aus und drücke Command C oder Control C, um ihn zu kopieren und so einzufügen , dann mache ich ihn einfach in der Mitte und ändere das jetzt als Social Preview. Jetzt klicke ich auf Exportieren und exportieren als JBG und dann auf Schaltfläche Social Preview exportieren, um es herunterzuladen . Hier können wir diese Dateigröße reduzieren Um das zu tun, werde ich auf tiny png.com gehen und es einfach so drachenseilen Okay. Klicken Sie zum Herunterladen auf Herunterladen und los geht's. Klicken Sie auf Datei hochladen und laden Sie die Datei einfach so hoch. Dann können wir hier ALT D hinzufügen und auf Diese Datei verwenden klicken, um die Datei hochzuladen. Wenn nun jemand diesen Link zur Website in den sozialen Medien teilt , sieht die Vorschau so aus. Jetzt klicke ich auf Speichern und fortfahren und auch hier muss ich die Google-Dienste verbinden. Es ist für die Google Search Console und andere Google-Dienste wie Google Analytics. Lass es uns jetzt machen. Wenn wir das tun, wählen Sie das GML-Konto , das Sie für die Google Search Console verwenden möchten Klicken Sie auf diese Schaltfläche „ Google-Dienste verbinden“. Hier wähle ich die Gmail-Adresse aus und klicke auf Weiter. Und hier klicken Sie auf Weiter. Jetzt können wir hier die Google Search Console und Google Analytic verbinden die Google Search Console und . Hallo zusammen Während ich diese Lektion erstelle, kommt es zu Stromausfällen, nachdem ich Rank Math vollständig installiert und eingerichtet Versuchen wir es jedoch noch einmal und gehen wir zu den Einstellungen und ich werde Ihnen Schritt für Schritt zeigen, was ich Also lass mich zu dem Ort gehen, an dem wir angehalten haben. Wir schließen diesen Teil ab. Dann haben wir diesen Teil abgeschlossen. Okay, hier haben wir schon die Suchkonsole und Google Analytics verbunden , aber lass es uns noch einmal machen. Vorerst werde ich auf diese Schaltfläche zum erneuten Verbinden klicken und hier die E-Mail auswählen, um den Zugriff zu gewähren Ich denke, du hast diesen Teil bereits abgeschlossen. Okay, jetzt bist du auf dieser Seite. Also hier ist das derzeit nicht anklickbar, aber warten wir ein paar Minuten, bis es anklickbar wird Okay, hier können Sie Ihre Website und andere Websites sehen , die diesem GML-Konto zuordnen Also hier wähle ich einfach meine Website aus, bei der es sich um ein individuelles Website-Design handelt Und hier müssen wir diese Registerkarte mit dem Indexstatus aktivieren, sodass sie derzeit aktiviert ist. Trotzdem kann ich nicht darauf klicken, wenn diese Schaltfläche nicht aktiviert ist , also dieser Kreis auf dieser Seite. Klicken Sie einfach darauf und aktivieren Sie ihn, nachdem er angeklickt Gehen wir also zur Analytics-Seite auf der Analytics-Seite über Wählen Sie hier meine Analysen Und hier habe ich die Immobilie bereits erstellt. Eigentlich nehme ich dieses Video auf, zwei Eis und beide Male, dieser Stromausfall ist passiert, und das ist das dritte Mal Also hier, klicken Sie einfach auf Neue GA Four-Immobilie erstellen. Und hier können Sie dieses Popup-Fenster sehen, in dem es heißt: Möchten Sie wirklich eine neue GA Four-Eigenschaft erstellen? Klicken Sie einfach auf Okay und es wird eine GA Four- oder Google Analytics-Eigenschaft erstellt. Also hier, hier, es hat eine neue Eigenschaft erstellt, und hier wählen Sie den Datenstream als Website aus. Und hier müssen wir diesen Analytics-Code auf unserer Website installieren , um das zu tun Sie können einfach auf dieses Kontrollkästchen klicken und den Bearbeitungscode installieren lassen. Und dieses Analytics ist Google Analytics, mit dem ich die Besucher unserer Website und die Besucherdaten unserer Website verfolgt habe . Wenn Sie also angemeldete Benutzer ausschließen möchten, d. h. wenn Sie auf dieser Website angemeldet sind und versuchen, auf die Seiten zuzugreifen, werden Sie als Besucher angesehen. Wenn Sie dies jedoch ankreuzen, werden Sie nicht sehen, dass Sie ein Besucher sind. Wenn du es nicht willst, kreuze es einfach an, aber vorerst werde ich es nicht nehmen, und hier ist das immer noch nicht aktiviert Accens ist für Blogs auf Websites Während diese Suchkonsole und die Analytik konfiguriert sind, wollen wir versuchen Google Search Console aufzurufen und uns die Eigenschaften anzusehen Sie können also auf die Schaltfläche „ Weitere Informationen“ klicken, um mehr darüber zu erfahren wie diese Google Search Console funktioniert und wie Sie sie konfigurieren können. Meiner Meinung nach werde ich diesen Text einfach und zu Recht hervorheben und dann auf Google suchen nach klicken. Und hier werde ich das Google Search Console-Login hinzufügen. Und hier ist die Anmeldeseite, klicken Sie darauf. Und hier müssen wir die Gmail-Adresse auswählen , die wir mit unserer Website konfigurieren. Sie klicken darauf und hier haben wir diese Website, URL, klicken Sie einfach darauf und dann gehen wir zur Übersicht auf Ovie, wir haben keine Ergebnisse, wir haben keine Ergebnisse, also warten Sie eine Woche bis Woche oder manchmal, bis Besucher auf Ihre Website kommen und Sie werden das Ergebnis in der Google Search Console sehen und auf Sitemaps zur Sitemap gehen Wenn Sie diese eingereichte Sitemap sehen, müssen Sie gehen, aber wenn Sie sie nicht sehen, Das Rang Map-Plugin erstellt eine Sitemap für Ihre Website. Wir können einfach diese Sitemap hinzufügen und das machen wir, nachdem wir die Einrichtung abgeschlossen haben. Und jetzt gehen wir zu Google Analytics und sehen, dass es funktioniert. Also werde ich einfach auf Suchen klicken und hier werde ich GA, Google Analytics Go Google Analytics-Login hinzufügen . Fügen wir Ihr Login hinzu und klicken Sie auf dieses Ergebnis. Auch hier muss ich den Benutzer auswählen. Okay. Hier ist die Google Analytics-Seite, die ich eingerichtet habe In meinem Fall ist sie fertig eingerichtet, aber in Ihrem Fall werden Sie diese Art von Analyse nicht sehen. Wenn Sie das nicht sehen, warten Sie einfach 30 Minuten und Sie werden diesen Text sehen. Sehen wir uns die Analyseseite an, die ich bei meinem letzten Versuch erstellt habe. Sie werden dieses Typschild sehen. Hier werden Sie also keine aktiven Nutzer sehen. Sie können also einfach überprüfen, ob der Google Analytics-Code auf Ihrer Website funktioniert , indem Sie zu IncopNTO Window gehen und Ihre Website besuchen Dann lassen Sie uns die Aktivität überprüfen. Also hier, wenn du die Aktivität immer noch nicht siehst, klicke einfach auf diesen Button und nimm einfach dieses antike Ding, mach einfach solche Sachen und geh dann nach Hause. Wenn Sie es zu Hause immer noch nicht sehen, warten Sie einfach ab und beruhigen Sie die Website wie diese Wenn Sie in meinem Fall Case Pluging verwenden, verwende ich diesen Lightspeed-Cache verwende ich diesen Lightspeed-Cache Gehen Sie also zum Cache und klicken Sie auf Perch A und versuchen Sie es dann noch einmal so und schauen Sie, ob es funktioniert Dann gehen wir zu Berichten über Berichte. Wir können unseren Pot-Snapshot erstellen. In diesem Abschnitt können wir also die Details zum Benutzerverhalten sehen. Also hier haben wir drei Möglichkeiten. In unserem Fall sollten wir diese erste Option auswählen, das Benutzerverhalten, und Sie können auf Vorlage in der Vorschau klicken und sehen, wie sie aussieht. Also hier wird es so aussehen. Also klicken Sie einfach auf, wählen Sie diese Vorlage. Und wenn Sie Google Analytics richtig eingerichtet haben, werden Sie das Ergebnis dort sehen. also in meinem Fall Gehen wir also in meinem Fall zu dem ersten , den ich bereits installiert habe, und hier sind die Details. Gehen wir also zu drei Berichten über, denen Sie diese Art von Details sehen können. Nachdem wir dies erfolgreich konfiguriert haben, können wir auf Speichern klicken und mit dem E-Mail-Bericht fortfahren Ich werde das Häkchen entfernen, da ich keinen E-Mail-Bericht benötige Wenn er immer noch nicht anklickbar und deaktiviert ist, warten Sie einfach ein paar Minuten oder klicken Sie auf Speichern und fortfahren und wir können es später tun Dann klicke ich auf Zurück zum Dashboard. Und hier, wenn Sie die Sitemap nicht so sehen, aktualisieren Sie sie einfach ein paar Mal. Wenn Sie sie immer noch nicht sehen, können Sie in den allgemeinen Einstellungen zur GRA-Einstellung gehen , auf Analytics klicken und hier können Sie diesen Indexstatus-Tab wie folgt aktivieren, und dann können Sie auf diese Sitemap-Einstellungen klicken, und hier ist die URL der UR-Website, Sitemap-URL. also einfach mit der rechten Maustaste und klicken Sie auf Linkadresse kopieren und gehen Sie hierher. Dann füge es einfach so hinzu. Und hier ist unsere Website-URL, und hier ist die Sitemap-URL Klicken Sie einfach auf Senden, nachdem Sie sie eingereicht haben. Sie können die untergeordnete Sitemap hier sehen, und wenn Sie diese Sitemap einreichen, können Sie Ihre Website schnell bei Google indexieren. Okay. Lassen Sie uns nun die Funktionen von Rang Math SO durchgehen. Gehen wir zum Dashboard auf dem Dashboard, wir haben nichts zu tun, und die Inhalts-KI ist eine Premium-Funktion. In diesem Fall verwenden wir die kostenlose Version von Rank Math, und die Analytics-Seite wird nicht benötigt, da wir die Analysen in Google Analytics überprüfen können und die Analytics-Seite auch für die kostenpflichtige Version unterstützt wird. Und hier klicken wir auf allgemeine Einstellungen. bei dieser allgemeinen Einstellung Behalten Sie bei dieser allgemeinen Einstellung einfach die Standardwerte bei und ändern Sie die Werte nicht. Dann gehen wir hier zu Titel und Meta. Erstellen Sie diesen Robots-Metaindex immer. Wenn Sie also auf „Kein Index“ klicken, wird Ihre Website nicht bei Google indexiert, also kreuzen Sie diesen nicht an. Kreuzen Sie immer Index an. Dann können Sie das Trennzeichen ändern, wenn Sie möchten. Ich werde die Standardeinstellung beibehalten und hier können Sie wählen, ob Sie die Überschrift, die bei Google angezeigt wird, groß schreiben möchten Bei der lokalen Suchmaschinenoptimierung laden wir diese Details bereits hoch, laden wir diese Details bereits hoch während wir das Frank Math-Plugin einrichten Und hier können wir die URL der Facebook-Seite hinzufügen, und hier können wir zusätzliche Profil-Live-Link-TIN oder Instagram-Profil hinzufügen . Wenn Sie also ein LinkedIn-Profil haben, können Sie einfach Ihr in.com-Profil hinzufügen, und wenn Sie auch ein Twitter-Konto haben, sagen Sie einfach.com, wie diesen Schrägstrich Auf diese Weise können Sie zusätzliche Profile hinzufügen . Wenn Sie mehr als eines hinzufügen, können Sie sie einfach in einer neuen Zeile wie dieser hinzufügen. Okay. Dann Startseite auf Startseite, wir müssen auf diese Seite bearbeiten klicken , um Startseite bearbeiten, Google-Ranking-Vorschau, dazu ich mit der rechten Maustaste hier und klicke auf Link in neuem Tab öffnen. Okay, jetzt bin ich auf der Homepage und das ist der Wordpress-Editor. Und hier können wir auf diese Optionsleiste klicken und hier diese Rangübersicht auswählen. Okay, jetzt müssen wir das Fokus-Keyword hinzufügen. Wie ich dir schon gesagt habe, habe ich es bereits getan. Aus diesem Grund ist das Fokus-Keyword bereits da, also werde ich es entfernen und das Fokus-Keyword einfach so hinzufügen. Und dann ist hier die Vorschau bei Google und hier ist die Bewertung in den sozialen Medien und hier ist die Facebook-Vorschau, hier ist die Twitter-Vorschau. Hast du dich daran erinnert, dass wir dieses Vorschaubild für soziale Medien hinzugefügt haben und hier auf Allgemein klicken und hier wird das die Vorschau von Google sein und wir können diese Vorschau ändern, indem wir den Titel bearbeiten Derzeit lautet unser Titel Hannah Clark ins like Clark Ich ändere ihn einfach und wir können diesen Titel hinzufügen und sicherstellen, dass Ihr Titel nur 60 Zeichen hat, da bei Google nur die ersten 60 Zeichen angezeigt Nach der Beschreibung können wir diese Beschreibung hinzufügen, und für die Beschreibung oder die Beschreibung des Suchergebnisses fügen wir immer das Hauptschlüsselwort In diesem Fall lautet das Hauptschlüsselwort Hanna Clark. Verdammt, ich bin Anna Clark. Bist du bereit, deinen Sohn so zu dieser Beschreibung hinzuzufügen, füge nur 160 Zeichen denn wenn du mehr als 60 Zeichen hinzufügst, wird es nicht auf Google angezeigt. Also hier wird es so aussehen, und ich werde es schließen. Und bei Set-Ins ist das Hauptschlüsselwort dieses, und hier haben wir Probleme, und nachdem Sie es abgeschlossen haben, können Sie einfach auf Speichern klicken und es wird auf Ihrer Seite gespeichert. Nachdem wir es gespeichert haben, können wir hierher gehen, hier, wir haben den Autor, behalten Sie es einfach Standardeinstellung, weil wir hier keine Autoren haben, vielleicht deaktivieren Sie es. Gut, weil diese Website keine Autoren hat und nur hier, behalten Sie die Standardeinstellung für Abscheu bei, und wenn Sie Ihren Beitragstitel anders sehen möchten, können Sie diesen Text hier hinzufügen, aber sie beizubehalten ist der einfache Weg und Seiten, wenn Sie die Bewertung Ihrer Seite im Google-Ergebnis ändern möchten , können Sie diese Details ändern, aber ich werde sie als Standard beibehalten. Und wenn du hier klickst, siehst du die Bedingungen oder den Shortcode, die du hinzufügen kannst, aber lass uns nichts daran ändern Und was Kategorien angeht, haben wir keine Kategorien und wir haben keine Tags, behalten sie einfach als Klicken Sie auf Änderungen speichern, wenn Sie Änderungen vornehmen. Dann die Sitemap-Einstellung, wir haben bereits die Sitemap gesendet, und dann ist das wichtige Element dieser SCO Analyzer. Überprüfen Sie also den SCO-Wert Ihrer Website und Sie können auf diesen SO-Analyzer neu starten oder auf diesen SO-Analyzer klicken , um diese Daten zu analysieren Und wenn Sie einen niedrigeren SOScore sehen, können Sie hier nach Priorität Wenn Sie die automatischen Updates nicht aktiviert haben, klicken Sie einfach auf Automatische Updates aktivieren , und hier haben wir U Basic U Description und H ein Tag H zwei Tags. Wenn Sie es also nicht so sehen, als Beispiel, hier haben Sie zu viele H zwei Schlagzeilen, was Sie tun können, ist, Sie können auf die Startseite gehen. Stellen Sie sich vor, Sie haben zwei H-eins-Tags oder wenn Sie kein H-eins-Tag haben, haben Sie zu viele H-Zwei-Tags, um das Problem zu beheben, können Sie zur Startseite gehen. Ich werde einfach auf dieser Startseite auf Mit Eleanor bearbeiten klicken dieser Startseite auf Mit Eleanor Okay. Schauen wir uns jetzt die wichtigsten Themen an. In meinem Fall ist dieses HTML-Tag H One, was bedeutet, dass wir ein H-One-Tag für die Website haben. Die Webseite hat also nur ein H-One-Tag oder eine Überschrift ein Tag. Und hier, das ist auf H drei, und hier, das ist kostenlos. Du kannst das Zeug ändern. Wenn Sie sich erinnern, als wir diese Website entworfen haben, habe ich Ihnen gesagt, dass Sie immer das HTML-Tag zuweisen sollen, da dies eine bewährte SEO-Practice ist. Und wenn wir diesen hier überprüfen, ist es H zwei und dieser ist H drei, und das ist ein Absatz. Wenn Sie in Gas viele H-Zwei-Tags haben , fügen Sie einfach nur zwei Tags für die Abschnittsüberschriften hinzu und machen Sie andere zu den Tags Absatz vier, H drei , H vier, H fünf oder H sechs. Ich hoffe, Sie haben es verstanden und nachdem Sie diese Änderungen vorgenommen haben, klicken Sie auf Veröffentlichen Dann können Sie auf diesen Fresart-Analyzer klicken und immer versuchen, diesen Wert auf mindestens 80 oder mehr zu Hier kannst du die Burnings überprüfen und hier steht, dass ich keine Seitenmarkierungen habe, also können wir einfach hier klicken und auf Neuen Tab öffnen klicken, und hier haben wir zwei Probleme Hier sage ich Fokus-Keywords. Es gibt noch zwei Seiten ohne Fokus-Keywords. Schreiben Sie einfach, klicken Sie und öffnen Sie es im Fenster und im Customizer können wir zu Side Identity gehen und hier können wir einen Slogan hinzufügen Ich habe den Slogan bereits hinzugefügt. Ich kann hier einen Slogan hinzufügen. Also dann zu dieser Nachricht, es gibt zwei Seiten ohne Fokus, ohne Fokus-Keyword ohne Fokus-Keyword Wenn wir also diese beiden Seiten überprüfen, haben wir Datenschutzbestimmungen und allgemeine Geschäftsbedingungen. Wir müssen diesen beiden Seiten also kein Fokus-Keyword hinzufügen , da wir sie nicht bei Google rangieren müssen, sodass wir dieses Problem ignorieren können. Und hier haben wir den Host-Titel, bei dem die Fokus-Keywords fehlen. Einfach darauf klicken und schon ist es auf der Startseite, und wir kennen diese Nachricht auch, weil wir den Titel und die Beschreibung der Homepage über Rank Man ändern, und wir müssen diesen Titel nicht von hier aus ändern. Okay. Nachdem ich alle Änderungen vorgenommen habe, klicke ich auf SO Analyzer neu starten und sehe dann den SO SCO. Trotzdem zeige ich dasselbe Ergebnis, aber dieser SCO ist ziemlich gut um unsere Website in Suchmaschinen zu platzieren. So können wir Rank Math verwenden, um auf der Seite SCO auf unserer Website zu erstellen. 34. Einrichten des LiteSpeed Cache Plugins für schnellere Website-Geschwindigkeit: Hallo zusammen. Lassen Sie uns nun die Seitengeschwindigkeit der Website in ESCO erhöhen. dazu zunächst Gehen wir dazu zunächst zu Google Page Speed Inside. Ich gehe einfach zu Google und suche nach Google PageSpeed, und hier haben wir PageSpeed und hier haben wir Klicken Sie darauf und hier können wir unsere Website-URL hinzufügen, die Website-URL Seite hinzufügen und auf Analysieren Okay, auf Mobilgeräten liegt die Leistung bei 74, und sehen wir uns den Desktop an, Desktop ist 92, und das ist eine ziemlich gute Leistung. Lassen Sie uns das jedoch besser verbessern. Gehen wir dazu zum WordPress-Dashboard und lassen Sie uns das Plugin anschließen und hinzufügen. Und wir werden das Light Speed Cache-Plugin verwenden. In den Such-Plugins werde ich nach dem Light Speed-Cache suchen. Hier haben wir den Light Speed-Cache, klicken Sie auf Jetzt installieren und dann auf Aktivieren. Das Plugin wurde erfolgreich aktiviert und wir können hier Lightspeed, das Cache-Plugin, das Symbol sehen und hier haben wir den Light Speed-Cache Ich gehe einfach zum Dashboard auf dem Armaturenbrett, wir haben diese Art von Design Zuerst klicke ich auf diesen Quicdt Cloud-Dienst aktivieren, klicke auf und ich gehe zu dieser Seite und hier muss ich ein Konto erstellen Also werde ich einfach auf Google Option klicken und mich bei Google registrieren Zuerst muss ich auf diese Schaltfläche klicken, um eine Vereinbarung zu treffen, dann klicke ich auf das Gmail-Konto, um mich zu registrieren, und hier werde ich auf dieses Finish Ink Setup klicken und zurück zu Wordpress gehen , dann kann ich jetzt diese Art von Fenster sehen, und hier werde ich auf Page Speed Disco to fps klicken und lass uns das Ergebnis sehen. Es wird einige Zeit dauern. Nehmen wir an, vor 91 nach 91, ich werde auf diesen freien Pash-Button klicken, um die Ladezeit der Seite zu überprüfen. Das ist wirklich gut. Seitengeschwindigkeit ist co und hier ist eine Seitenladezeit hier, lade D innerhalb von 0,58 Sekunden , dann lass uns eins nach dem anderen gehen und den Stab richtig einrichten Zuerst gehe ich zur Voreinstellung. Unter Voreinstellung können wir eine Standardvoreinstellung einrichten oder anwenden, indem wir einfach auf diese Voreinstellung anwenden klicken, aber das werde ich nicht tun. Ich überspringe diesen Tab und lass uns zu Allgemein gehen, ich gehe zu Allgemein und hier ist momentan der Gastmodus ausgeschaltet, ich werde ihn einschalten und ich werde die Gastoptimierung aus lassen und für die Server-IP werde ich darauf klicken, um meine öffentliche IP zu überprüfen und hier ist die IP. Ich werde es einfach kopieren dann so hier einfügen. Dann werde ich die Benachrichtigung ausschalten. Beim Tuning behalte ich die Standarddetails und klicke nun auf Änderungen speichern. Okay, jetzt haben wir diesen Cache-Tab. Gehen wir zur Registerkarte Cache. Okay, jetzt müssen wir diese Tabs einrichten. Also hier aktiviere den Cache und deaktiviere den Cache für angemeldete Benutzer oder mach ihn aus und behalte andere Elemente. Dann hier Cash Mobile einschalten und fertig. Klicken Sie auf Savchange und wenn Sie Änderungen vornehmen, versuchen Sie immer, Ihre Website im Inkognito-Fenster zu überprüfen , da diese Einstellungen beschädigen können Versuchen Sie also immer, Ihre Website im Inkognito-Fenster zu überprüfen. Und bei DTL werde ich die Einzahlung beibehalten und bei Perch die Einzahlung beibehalten Ausgenommen davon, dass Sie eine URL oder eine bestimmte Seite haben eine URL oder eine bestimmte Seite , die Sie nicht zwischenspeichern möchten. Sie können diese URL hier hinzufügen, und vorerst werde ich sie überspringen, und der Rest des Tabs wird ein EIS sein, das Standardobjekt beibehalten, die Standarddaten und den Standardbrowser beibehalten . Ausgenommen davon, dass Sie eine URL oder eine bestimmte Seite haben, die Sie nicht zwischenspeichern möchten. Sie können diese URL hier hinzufügen, und vorerst werde ich sie überspringen, und der Rest des Tabs wird ein EIS sein, das Standardobjekt beibehalten, die Standarddaten und den Standardbrowser beibehalten. Klicken Sie auf Browser-Cache und auf Advance legen Sie einfach einen Standard fest und klicken Sie dann auf Änderungen speichern. Okay. Klicken Sie jetzt wieder hier, wo Sie sitzen, und überprüfen Sie dann Ihre Website im Inkognito-Fenster Schreiben Sie das und sehen Sie, ob es kaputt geht, es funktioniert einwandfrei. Und dann haben wir CDN. Auf CDN können wir den schnellen Cloud- oder Cloud-Tarif konfigurieren, aber in diesem Fall werde ich das nicht tun, dann haben wir die Bildoptimierung Bildoptimierung, klicken Sie auf Optimierungsanfrage senden und tun dies, bis Sie das Ti-Feld hier sehen Derzeit sind es 7%, und wenn ich es noch einmal versuche, heißt es, dass Sie ein Bild haben, das darauf wartet, abgerufen zu werden Versuchen Sie es also am nächsten Tag, tun Sie es, bis Sie Ihre Bilder vollständig optimiert haben. Und in der Einstellung für die Bildoptimierung klicken Sie auf diesen Cron für automatische Anforderung Wenn Sie dies tun, optimiert die Cron-Funktion Ihre Bilder automatisch, sodass Sie nicht immer wieder darauf klicken müssen Hier das Bildformat der nächsten Generation, mach es zu Web P, und das bewahrt EXIV-XMP-Daten von optimierten Originalbildern, mache es auf kein Backup und gehe dann runter und für dieses Objekt mach es einfach an und klicke auf Änderungen speichern Dann haben wir Seitenoptimierung. Okay, wie ich dir bereits gesagt habe, wenn du an diesem Plugin arbeitest, klicke immer auf den Perche Earl, nachdem du Änderungen vorgenommen hast, insbesondere an der Überprüfen Sie dann die Website im Inkognito-Fenster. Wenn es Probleme gibt, können Sie diese sofort beheben, indem Sie die Änderungen rückgängig machen , die Sie am Lightspeed-Cache Okay, hier haben wir die CSS-Minifizierung und Kombination von CSS auf diesem CSS in der Reihe, machen es beim Laden von CSS und schalten dann ein und die Optimierung der Schriftanzeige Dann klicken Sie auf Änderungen speichern und dann auf Barsch A. Gehen Sie dann zum Incoto-Fenster und drücken Sie die Seite, die Website und überprüfen Sie mit breakof Nein es funktioniert für schwach Die Sterne werden nicht angezeigt Lassen Sie uns das in der nächsten Lektion beheben Gehen wir jetzt zu Js-Einstellung auf Js-Einstellung, Js minify wird auf Js Combine sein und andere Sachen als Standard beibehalten, dann klicken Sie auf Änderungen speichern und alles löschen, dann klicken Sie hier, überprüfen Sie es hier, sehen Sie, passen, funktioniert gut, funktioniert nicht einwandfrei, und dann gehen Sie zur SDM-Teamtabelle minify, here, remove oder PrismoG und speichern Sie die Änderungen, dann klicken Sie hier auf Alle jetzt in den Medieneinstellungen hier, ein responsiver Platzhalter und Sie können die Farbe des responsiven Halters ändern. Ich werde die Standardfarbe beibehalten. Mach das Lazy Load, auf das ich mich einlasse. Derzeit haben wir keine I-Frames auf unserer Website. Machen Sie es jedoch und fügen Sie Größen hinzu, stellen Sie hier die Wordpress-Bildqualität ein, machen Sie es auf 83, und wenn Sie das als 50 oder etwas weniger als 83 82 hinzufügen, wird die Bildqualität erheblich auf Radio eingestellt sein , tun Sie das nicht. Okay, dann haben wir diesen Ike-Standard und hier schließen wir aus. Wenn es ein Medium gibt oder wenn es ein Bild gibt , das Sie vom Lazy Load ausschließen möchten, können Sie dieses Bild einfach hinzufügen. Bilder und Inhalte beim verzögerten Laden werden geladen, wenn der Besucher die Website zu diesem Bereich scrollt. Hier ein Beispiel: Wenn ich nach unten scrolle, wird dieses Bild erst geladen , wenn ich diesen Abschnitt so sehe. Dann haben wir diese Lokalisation und Gravatacas im Gravata-Fall Das war's, dann E-Tuning, behalte einfach die Standardeinstellung Dann behält CSS auch die Depot-Einstellung bei, dann haben wir eine Datenbankdatenbank, wir können erzwungene Revisionen und Ablaufdaten und andere Junk-Dateien löschen , Junk-Record, der in der Datenbank erstellt wurde Sie können einfach auf diesen Cleaner klicken, wenn Sie diesen Autodraft und andere Dinge nicht benötigen, oder Sie können einfach nacheinander klicken Bei der DB-Optimierung behalten Sie einfach die Einzahlung bei. Dann haben wir hier den Crawler, aber wir müssen dort nichts tun und die Toolbox auch in der Toolbox, es gibt nichts für uns zu tun, und das ist alles, was wir dem Lightspeed-Cache-Plugin tun können Lassen Sie uns nun die Seitengeschwindigkeit und die Ladezeit der Seite unterdrücken und die Ladezeit der Seite Lassen Sie uns diese Page-Speed-Disco unterdrücken und sehen, was passieren wird Also können wir das mit der Seitengeschwindigkeit im Inneren versuchen, und hier ist der ICO für Seitengeschwindigkeit 90, aber wir haben keine Verbesserung vorgenommen Ich denke, der Grund ist, dass dieses Plugin bereits auf der Website installiert ist . Das mag die Werbung sein, aber wir erhöhen die Ladezeit der Seite. Hier sind es immer noch 74 und hier sind es 96, und das ist eine ziemlich gute Leistung. Und hier erfahren Sie, wie Sie die Geschwindigkeit Ihrer Website verbessern Geschwindigkeit Ihrer Website Wir sehen uns in der nächsten Lektion. 35. Beheben des Problems mit der Emoji-Anzeige auf Ihrer Website: Hier haben wir dieses Problem. Wenn wir uns von unserer Website abmelden, werden die Sternsymbole nicht angezeigt Lassen Sie uns das Problem beheben. Um das Problem zu beheben, gehe ich zu den Plugins und klicke auf und suche nach Code ISNIP. Ich werde dieses WP-Code-Plugin installieren Okay, es ist gerade installiert, und dann gehe ich zu Installieren, Plugin und aktiviere hier das WP Code, Light-Plugin Und hier kann ich jetzt Code hinzufügen, sodass du ihn nicht codieren musst. Ich werde den Code bereitstellen, also klicken Sie einfach hier auf den Code und dann auf Neu hinzufügen. Dann klicken Sie von hier aus auf Custom Snip und wählen Sie PHP Snip und hier gebe ich einen Code ein, überprüfen Sie einfach den Ressourcenbereich und fügen Sie diesen Code einfach so ein und klicken Sie dann auf diesen aktiven Code und klicken Sie dann auf Snip speichern Bevor du darauf klickst, einfach keine anderen Dinge hinzu, füge nur diesen Code hinzu, den ich Wenn du andere Dinge hinzufügst, wird deine Website kaputt sein Klicken Sie dann auf Save SNIP Okay. Nun, wenn ich diesen Nip hier codieren gehe, kann ich sehen, dass aktiv ist nipped. Lassen Sie uns das bearbeiten und einen Titel hinzufügen . Es wird klar sein, wenn jemand versucht, unsere Website zu überprüfen. Ich füge einfach diesen Text hinzu und klicke auf Aktualisieren, Ich füge einfach um ihn zu aktualisieren Jetzt gehe ich zu Element und gehe ich zu Element Und wenn Ihre Website diese Symbole korrekt anzeigt, müssen Sie diese Lektion nicht durchgehen. Und hier klicke ich einfach auf Datei und Daten löschen. Okay. Dann klicken Sie auch auf diese Schaltfläche zum Synchronisieren der Bibliothek und dann hier und auf Light Speed, klicken Sie auf Purge A. Dann lassen Sie uns diese Website im Inkognito-Fenster öffnen und sehen, ob sie funktioniert Jetzt funktioniert es perfekt und jetzt haben wir die Website komplett gestaltet 36. Kursprojekt: Hallo, alle zusammen. Herzlichen Glückwunsch. Sie haben diese Portfolio-Website erfolgreich für Business Coach entworfen, und jetzt ist es Zeit für Ihr Klassenprojekt. Sie in Ihrem Klassenprojekt Öffnen Sie in Ihrem Klassenprojekt diese universelle Portfolio-Website und wählen Sie Portfolio Female oder Portfolio Website Design auf FICMA aus und ändern Sie den Textinhalt entsprechend Ihrem Portfoliotyp Erstellen Sie ein Portfolio für sich selbst oder für eine Person oder eine fiktive Figur , für die Sie eine Portfolio-Website entwerfen möchten. Dabei kann es sich um einen Coach, einen Geschäftsmann, ein Studio oder jemanden handeln, Ändern Sie also einfach diese Inhalte und erstellen Sie Ihre eigene Version. Sie können diese Textfarbe also nach Bedarf ändern. Also, wenn Ihnen diese Primärfarbe nicht gefällt, klicken Sie einfach so und klicken Sie darauf, bearbeiten Sie diesen Stil, und hier können Sie einfach diese Farbe ändern. Wenn Sie diese Farbe ändern, machen wir sie zu dieser roten Farbe. Es wird das gesamte Design so beeinflussen. Spielen Sie also einfach mit Ihrer eigenen Version der Website herum, erstellen Sie sie und teilen Sie sie auf diese Weise im Klassenprojekt. Wir können es überprüfen und dir unser Feedback geben. Ich hoffe also, dass Sie in diesem Kurs wertvolle Dinge lernen, und wir sehen uns in der nächsten Klasse.