Erstellen Sie eine professionelle Blog-Website mit WordPress & Elementor Pro

1. Einführung in die Erstellung eines professionellen Blogs mit WordPress & Elementor Pro: Bist du bereit, einen professionellen Blog zu erstellen , der nicht nur toll aussieht, sondern auch monetarisiert werden kann Willkommen bei der Erstellung einer Blog-Website mit Wordpress und Elemento In diesem Kurs führe ich Sie Schritt für Schritt durch den Aufbau eines modernen, responsiven und voll funktionsfähigen WordPress-Blogs mit Elemento Pro? Wir werden von Anfang an beginnen. Hosting und Domain kaufen, WordPress installieren und Element of Pro einrichten. Dann werden wir mit dem Design beginnen, wo Sie lernen , wie Sie einen vollständig benutzerdefinierten, einzigartigen Blog entwerfen, Blogseiten, einzelne Beitragsseiten und Kategorieseiten erstellen. Fügen Sie Suchfunktionen hinzu, damit Inhalte leicht zu finden sind. Richten Sie ein Abonnentenformular , um mit dem Aufbau Ihrer E-Mail-Liste zu beginnen. Erstellen Sie wichtige Seiten wie Kontakt, Datenschutzbestimmungen und Allgemeine Geschäftsbedingungen. Korrigieren Sie die Reaktionsfähigkeit auf Mobilgeräten, sodass Ihre Website überall perfekt aussieht E-Mail- und SMTV-Set für professionelle Kommunikation. Am Ende dieses Kurses werden Sie einen schönen, benutzerfreundlichen und monetarisierbaren Blog haben, der auf Ihre persönliche Marke, Ihr Unternehmen oder Ihre Kunden zugeschnitten Ihre persönliche Marke, Ihr Unternehmen oder Ihre Kunden Hallo, ich bin Akanka, eine Webdesignerin aus Sri Lanka und auch die Gründerin Ich habe diesen Kurs erstellt, um das Bloggen einfacher, schneller und zugänglicher zu machen , auch wenn Sie gerade erst anfangen Wenn du dich jemals von WordPress überwältigt gefühlt hast oder nicht wusstest, wo du anfangen sollst, wird dir dieser Kurs die Klarheit und das Selbstvertrauen geben , die du brauchst Wenn Sie bereit sind, einen professionellen Blog auf intelligente Weise mit modernen Tools wie WordPress und Elemento Pro zu erstellen intelligente Weise mit , lassen Sie uns gemeinsam mit der Erstellung Ihres Blogs beginnen sehen uns im Kurs 2. Vor- und Nachteile von Elementor und WordPress: In diesem Kurs werden wir hauptsächlich zwei Tools verwenden, WordPress und Elemental Pro Schauen wir uns an, was jedes Tool macht, Vor- und Nachteile Auch ein paar Alternativen. Sie wissen genau, woran Sie arbeiten. Zunächst 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. Lass uns über Prosa sprechen. Es ist Open Source und kostenlos. Sie haben die volle Kontrolle über Ihre Website, vom Design über das Betriebssystem 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 kombiniert 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. Es ist zwar flexibel, aber die Einrichtung kann sich zunächst technisch anfühlen. Alternative zu Wordpress, Wochen und Square Space Earl-in-One-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 ist unser Page Builder. Das Tool, mit dem Sie dieses Pt VolufGMA-Design in eine voll funktionsfähige Word-Website verwandeln Lassen Sie uns über Profis sprechen. Es ist extrem anfängerfreundlich kein Code erforderlich, Dragon Room. Sie erhalten die volle Designkontrolle über jeden Teil Ihrer Website, einschließlich der mobilen Ansicht. Elementp enthält erweiterte Widgets wie Formulare, Slider, Preisintervalle, Kundenreferenzen und mehr. Mit dem Theme Builder können Sie die gesamte Struktur Ihrer Website, Kopf- und Fußzeilen, Blockvorlagen und visuelle Elemente gestalten Fußzeilen, Blockvorlagen Element of P ist ein kostenpflichtiges Plug-In, 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, die Benutzeroberfläche und die grundlegenden Methoden zu erlernen 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 mit dem Design beginnen 3. Hosting und Domainnamen kaufen: Hallo, alle zusammen. Jetzt ist es an der Zeit, eine Domain zu kaufen und sie zu hosten , da wir die Domain und den Hoster benötigen , um unsere WordPress-Website zu hosten. Wählen Sie also zuerst weniger die Domain aus. Es gibt eine Website namens taldls.com. Auf dieser Website finden Sie alle Aktionen und Angebote der Domain-Anbieter. Von hier aus können Sie eine Domain kaufen, die das beste Hostin auswählt, und eine günstigere Domain erhalten Hier sehen Sie einen Filter. Hier suche ich nach unserem Domainnamen als benutzerdefiniertes Webdesign, und hier muss ich auf „ Bestätigen, dass Sie kein Roboter sind“ klicken. Okay, hier haben wir die verfügbaren Domains, und anhand dieses Preisfilters gebe ich etwa 1$ ein und lass uns sehen, welche Art von Domain wir für 1$ haben. Hier haben wir 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. 4. Wie man WordPress von Grund auf neu installiert: Hallo, alle zusammen. Es ist Zeit , WordPress zu installieren. Ich gehe zum C-Panel und im C-Panel haben wir den Soft-Tacular-App-Installer Ich klicke einfach darauf und hier haben wir Wordpress und von hier aus klicke ich einfach auf Installieren Und jetzt muss ich hier die Details auswählen. Zuerst wähle ich TTPs und ohne diesen WWW-Punkt-Teil, also nur TTPs als Protokoll, dann wähle ich den Domainnamen Also hier ist unser Domainname und hier werde ich die neueste Version von Wordpress wählen die neueste Version von Wordpress und keine Verzeichnisse hinzufügen Ich werde WordPress einfach im Stammordner installieren, und hier können wir den Site-Namen und die Seitenbeschreibung ändern. Aber lassen Sie uns diese ändern, während wir die Website gestalten. Lassen Sie uns diese Dinge vorerst so lassen, wie sie sind. Und hier müssen wir den Admin-Benutzernamen und das Admin-Passwort hinzufügen . Ich werde diese Details hinzufügen und auch ein Passwort hinzufügen. Merken Sie sich Ihren Benutzernamen und Ihr Passwort, da Sie diesen Benutzernamen und dieses Passwort verwenden müssen diesen Benutzernamen und dieses Passwort verwenden , um sich bei Wordpress anzumelden. Von hier aus werde ich diese Admin-E-Mail in eine funktionierende E-Mail-Adresse ändern , da diese E-Mail derzeit nicht funktioniert. Okay, scrolle nach unten und hier brauche ich keine zusätzlichen Plugins. Entfernen Sie die zusätzlichen Plugins und klicken Sie nun auf Schaltfläche Installieren. Daraufhin wird die Installation von Wordpress auf der Website gestartet . Okay, Wordpress wurde erfolgreich installiert und von hier aus kann ich auf diese URL klicken und in der administrativen URL zur WordPress-Website gehen. Ich kann so zu Wordpress gehen. Von hier aus klicke ich einfach auf Nein, ich möchte nicht versuchen, einen ET-Setup-Prozess auszuprobieren, und hier ist unser WordPress-Dashboard. Um auf das WordPress-Dashboard zuzugreifen, können wir einfach die URL unserer Website eingeben und dann WP Admin am Ende der Website-URL hinzufügen. So sieht unsere Website jetzt aus. In der nächsten Lektion werden wir Wordpress bereinigen und unnötiges Zeug von unserer WordPress-Website entfernen. 5. Installieren und Aktivieren von Elementor Pro: Hallo zusammen. Wir werden Elementor Pro verwenden , um unsere benutzerdefinierte Website zu entwerfen, da Elementor der beste WordPress-Website-Builder auf dem Markt ist Elementor hat eine Vorversion, aber sie hat Schauen wir uns die Elementor-Pläne an. Um zu dieser Seite zu gelangen, klicken Sie auf den Link im Abschnitt Ressourcen oder in der Beschreibung Sie werden dann zu dieser Seite weitergeleitet Dann haben wir hier die Preispläne. Der empfohlene Preisplan ist Advanced Solo Website Builder. Mit diesem Preisplan können wir 118 Pre - und Pro-Budgets erhalten, und er hat 86 Projekte, aber mit dem Essential-Plan haben wir nur 57 Projekte Als ob wir mit Advanced Solo im E-Commerce-Bereich auf den Markt gehen würden, bekommen wir 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 Advanced-Plan wechseln. Oder wenn Sie ein Freelancer sind , der Websites für Ihre Kunden erstellt, können Sie die Expertenversion erwerben diese Art von Plan entscheiden, können wir viele Plug-ins und Add-Ons ersetzen . Dies wird dazu beitragen, die Seitenladegeschwindigkeit zu erhöhen und die gesamte Website zu optimieren Fangen wir also an, Elementor zu installieren. Dazu gehe ich zum Dashboard unserer Website und hier gehe ich zu Plugins und klicke auf AdNeu Zuerst müssen wir das Element Pre Plugin installieren. Also werde ich von hier aus nach Elementor suchen. Dann haben wir hier das Elemento Website Builder-Plugin. Es wurde von elemento.com entwickelt und ist mit unserer Wordpress-Version kompatibel Also klicke ich auf Jetzt installieren. Okay. Dann klicke ich auf Aktivieren. In Ordnung. Jetzt klicke ich auf Escape und überspringe diesen Schritt oder ich klicke auf die Schaltfläche Schließen, da wir Elementor Pro über die Elementor-Website einrichten werden Elementor Pro über die Elementor-Website einrichten Klicken Sie erneut auf die URL des Ressourcenbereichs und Sie werden zu dieser Seite weitergeleitet. Von hier aus werde ich auf der Advance Solo-Website, Builder-Plan, auf die Schaltfläche Jetzt klicken Advance Solo-Website, Builder-Plan, auf die Schaltfläche Jetzt Und hier muss ich die Details ausfüllen. Dann klicke ich auf Jetzt bezahlen und mache die Zahlung. Nachdem Sie sich erfolgreich registriert haben, können Sie es von hier herunterladen , indem Sie auf diese Download-Schaltfläche klicken, oder Sie können zum Elementor-Dashboard gehen , indem Sie ind elemento.com hinzufügen Und wenn Sie das tun, sehen Sie diese Art von Download-Symbol und dann sehen Sie das Element Plug in den Download. Klicken Sie darauf, dann wird der Download gestartet und Sie haben jetzt das Element of Plugin Lassen Sie uns das jetzt auf unserer Website einrichten. Ich gehe zum WordPress-Dashboard und gehe zu Plugins und klicke auf Plugin installieren. Dann klicke ich auf Neues Plugin hinzufügen. Dann klicke ich auf diesen Plugin-Upload-Button. Dann klicke ich auf „Stapeln und hier haben wir das heruntergeladene Element Pro-Plug-In. Es ist also eine C-Datei. Also wähle ich es einfach aus und klicke auf Öffnen. Dann klicke ich auf Jetzt installieren. Die Installation dauert einige Minuten. Okay. Dann wirst du dieses Fenster sehen. Klicken Sie von hier aus einfach auf diese Plugin-Schaltfläche zum Aktivieren. Und es wird erfolgreich installiert. Also hier ist das Installations-Plug-In. Jetzt klicke ich auf Verbinden und aktivieren. Dann komme ich auf diese Art von Seite. Also hier klicke ich auf Meine Lizenz aktivieren. Okay, Elemento Pro wurde erfolgreich aktiviert, und jetzt können wir die Funktionen von Elemento Pro nutzen 6. Bereinigen des WordPress-Dashboards: Hallo, alle zusammen. In Ihrem WordPress-Dashboard sehen Sie diese Art von Element. Um sie alle zu entfernen, können Sie einfach auf diese Estren-Optionen klicken und hier den Tab deaktivieren , den Sie nicht sehen möchten Wenn Sie sie also deaktivieren, werden Sie diese Tabs nicht mehr sehen A Zu Plugins, ich gehe zu Plugin installieren. Es installiert automatisch den Lightspeed-Cache auf der Website. Hier ist ein Lightspeed-Cache-Plugin , das auf meinem Server installiert ist. Ich werde auf Deaktivieren klicken, da wir vorerst kein Cache-Plugin benötigen. Ich werde es löschen. Okay, perfekt. Lassen Sie uns in der nächsten Lektion mit der Gestaltung der Website beginnen. 7. 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 8. Theme-Installation und Einrichtung des Blogbeitrags: Lassen Sie uns nun das Theme installieren. Ich gehe hier zum Auftritt und klicke auf Team. Klicken Sie auf Zehn, klicken Sie auf sie. Hier werde ich nach Hello Elementor suchen. Wir haben das Thema Wir können auf Installieren und dann auf Aktivieren klicken . Jetzt haben wir Elemento Pro und Halo Thema. Jetzt müssen wir noch wenige Blogbeiträge erstellen. Klicken Sie unter Beitrag auf Alle Beiträge und hier habe ich derzeit drei Blogbeiträge, aber ich benötige mehr Blogbeiträge denn wenn ich keinen Blogbeitrag habe, können wir die Qualitätsvorschau unserer Website nicht erhalten , was bedeutet, dass wir viele Ipaces haben werden. Lass uns ein paar Dummy-Posts erstellen und nachdem wir das Design fertiggestellt haben, können wir sie alle lassen und hier klicken und auf Models klicken und diese Beiträge löschen und sie dauerhaft löschen Ich gehe zu ChagPT und zur Aufforderung in Dover. Hier werde ich sagen, dass Sie ein Finanzberater sind und ich möchte, dass Sie 12 Log-Beiträge erstellen und ich werde sie 12 Log-Beiträge erstellen und Hier ist ein Teil mit weiteren Informationen, und hier werde ich sagen, dass sie einen Titel mit 500 bis 600 Wörtern haben sollten . Die Kategorie sollte persönliche Finanzen, Steuern, Schuldenmanagement Investitionen. Ich werde das entfernen, mir drei Auswahlmöglichkeiten geben und hier sage ich , gib mir auch kleine Beschreibung für jede Kategorie und drücke Enter, hier haben wir Kategorienbeschreibungen und hier haben wir Blogposts Die Blockposts sind wirklich klein, was bedeutet, dass es nicht gut ist. Ich muss sagen, du solltest Generäle und E-Host mindestens 700 mehr Wörter haben mindestens Lass uns sehen. Ja, bitte. Hier generiere ich den Logpost. Jetzt muss es die B Two generieren. Ich würde sagen, bitte, es wird den Rest des Blogposts generieren, und in diesem aktuellen Blogbeitrag haben diese nichts mit der Finanznische zu tun. Ich werde sie einfach alle entfernen, klicken Sie auf dieses Kästchen und klicken Sie auf Bulk Action Mow Toash auf Rash anwenden, hier klicken, pro Anwendung löschen Ordnung. Und jetzt werde ich zu den Kategorien gehen, und derzeit haben wir diese Kategorie nicht kategorisiert, aber wir haben bereits einige Kategorien generiert. Sagen wir also, bitte hier, um den Rest zu generieren. Und lass uns hochgehen. Und hier fügen wir diese Kategorien Klicken Sie einfach auf die persönlichen Finanzen und fügen Sie den Namen und die Beschreibung wie folgt hinzu, klicken Sie auf Kategorie, dann auf eine Steuerbeschreibung, auf Kategorie im Schuldenmanagement, dann auf eine Beschreibung und schließlich auf Investition. In Ordnung. Jetzt haben wir vier Kategorien und die Kategorie „Nicht kategorisiert“ ist die Standardkategorie. Lassen Sie es genau dort und dann gehen wir zu allen Beiträgen und jetzt müssen wir diese Beiträge hinzufügen. Hier ist der erste Blogbeitrag. Kopiere zuerst den Titel und los geht's hier, klicke auf Beitrag. Ordnung, hier haben wir Gutenberg-Editor, wir müssen diesen Editor verwenden, kopieren Sie einfach den Titel und lassen Sie uns den Rest des Logposts so kopieren und einfach einfügen Hier können wir diese Dinge wie diese entfernen, löschen und auch wir können dieses löschen, das Objekt auswählen und Oh, wählen Sie einfach das Objekt aus und drücken Sie auf der Tastatur auf Löschen Wir diese und diese Titel sind auf H drei, ich mache sie zu H zwei. Außerdem werde ich dieses H zwei machen und dieser Titel ist auf dem Haupttitel ist auf dem H-Titel und der Rest des Titels wird H zwei sein und wenn es viele H-Zweien gibt, ist das keine gute Sache In diesem Fall können wir die Überschriften dieser Hauptüberschrift herausfinden und sie dann zu H drei machen Im Moment mache ich es einfach so und die Plugin-Rank-Mathematik, das kannst du ganz einfach machen Jetzt werde ich auf Veröffentlichen klicken und den Blogbeitrag veröffentlichen. Derzeit haben wir den Blogbeitrag wie diesen und ich werde zurückgehen und hier müssen wir ein ausgewähltes Bild hinzufügen. Ohne dieses Beitragsbild wird dieser Blogbeitrag nicht gut aussehen. Ich werde ausgewählte Bilder erstellen und wir sehen uns in Sekunden. Ordnung. Ich habe gerade das vorgestellte Bild erstellt. Lassen Sie uns auf diesen Titel klicken und dann sehen wir diese Funktion mit der Bildschaltfläche. Ich klicke einfach darauf und lade hier alle vorgestellten Bilder hoch, die ich bereits erstellt habe. Los geht's. Ich wähle alle neun aus, die ich habe, und lass uns warten, bis es hochgeladen ist und du diese ausgewählten Bilder oder Bilder im Ressourcenbereich finden kannst diese ausgewählten Bilder oder Bilder im Ressourcenbereich Wenn du dir hier diese Bilder ansiehst, Breite und Höhe all dieser Bilder identisch Hier haben wir 1060 als Breite und 720 als Höhe. Achten Sie also immer darauf, Bilder hinzuzufügen, die dieselbe Breite und Höhe haben, um die Einzigartigkeit der Website zu unterstreichen Wenn wir Bilder mit unterschiedlichen Größen hinzufügen, wirkt sich dies auf das Design unserer Website Jetzt klicke ich auf Feature-Bild festlegen. Außerdem muss ich das alte Tag und das ALT-Tag hinzufügen, dann klicke ich auf, sagte Future Dimag, jetzt klicke ich auf Speichern und los geht's Wir haben gerade unseren ersten Blogbeitrag erstellt und es liegen noch acht weitere vor uns. Auch bei der Kategorie müssen wir die Kategorie auswählen. Wir haben unsere Kategorien bereits erstellt, die Standardkategorie Fst ist nicht kategorisiert. Ich werde es entfernen und hier haben wir persönliche Finanzen, Blogbeitrag, jetzt klicke ich rechts auf Conceive Jetzt hat dieser Gutenberg-Editor viele Funktionen. Wenn du möchtest, kannst du sie benutzen. beispielsweise hier einen neuen Abschnitt hinzufügen möchten, Wenn Sie beispielsweise hier einen neuen Abschnitt hinzufügen möchten, klicken Sie einfach hier und drücken Sie die Eingabetaste. Klicken Sie dann auf diesen Werbe-Blog. Hier können Sie auswählen , welche Art von Element Sie hinzufügen möchten. Wenn Sie auf Durchsuchen oder auf dieses Plussymbol klicken, können Sie außerdem alle Elemente sehen. Im Moment sind wir gut, also werde ich auf Speichern klicken. Jetzt klicke ich hier und lass uns zur Seite Ein Beitrag gehen und auf Beitrag klicken, um einen neuen Beitrag hinzuzufügen. Jetzt lass uns hochgehen. Wir haben diesen bereits hinzugefügt und jetzt müssen wir den zweiten hinzufügen, den Titel kopieren und uns dem Titel stellen. Du denkst, lass es besser aussehen als das. Das ist nur zum Testen, Kopieren und Einfügen wie folgt. Okay. Jetzt klicke ich auf diesen Beitrag und dann auf Beitragsbild speichern. Sorry, setze das Beitragsbild, und hier haben wir das Bild des Notfallfonds, füge Al-Tag und die Kategorie Slate hinzu, persönliche Finanzen, klicke auf Veröffentlichen, veröffentliche den Beitrag. Jetzt kann ich hier auf Beitrag klicken und den ersten Beitrag hinzufügen, also mache ich das und wir sehen uns danach. 9. Einrichten der Site-Einstellungen: Okay. Jetzt haben wir den gesamten Beitrag und hier ist diese Beitragskategorie als nicht kategorisiert ausgewählt. Klicken wir auf Quick Edit und hier können wir es als Tiefenmanagement-Update festlegen. Jetzt haben wir auch unsere Markendetails. Hier ist das Markenlogo. Ich habe es gerade erstellt und hier haben wir den Styleguide. Hier haben wir also Markendetails und wir haben die Farbcodes, auch Kopfzeile und Haupttext. Das wollen wir verwenden. Okay. Jetzt haben wir alle Informationen. Als Nächstes können wir zu Seiten gehen auf alle Seiten klicken. Und hier klicken Sie auf eine Seite, um unsere Homepage zu erstellen. Für den Namen der Homepage werde ich nur Wealth Wise hinzufügen. Entschuldigung für den Titel, ich werde ihn kopieren und so einfügen. Dann fügen wir diesen Teil dem Slogan der Website hinzu. Wenn ich es einfach durch Drücken von Command V oder Control V unter Windows einfüge , wird es als Absatz hinzugefügt. Wir können den Text hier einfügen und den Text markieren, Befehl A oder Strg A, dann Befehl X. Und schon können wir Text hier einfügen und den Text markieren, Befehl A oder Strg A, dann Befehl X. ihn so einfügen. Okay. Jetzt werde ich auf Mit Elemento bearbeiten klicken Okay. Nett. Jetzt sind wir bei Elemento Editor Was wir tun können, ist, diese Dinge in der Einstellung zu definieren diese Dinge in der Einstellung zu Klicken Sie hier und klicken Sie auf diese Seiteneinstellung. Gehen wir zur Seiteneinstellung zu den globalen Farben Hier haben wir primäre sekundäre Text - und Akzentfarben. Lassen Sie uns diese Farbcodes kopieren. Fügen Sie es so zu unserer Website hinzu. Los geht's. Eigentlich sollte das die Hintergrundfarbe sein, nicht die Textfarbe, also füge ich einfach den Hintergrund hinzu , es ist nicht nötig, Farbe hinzuzufügen , einfach Hintergrund für den Text hinzufügen, lassen Sie uns Primärfarbe als Text hinzufügen, was bedeutet, dass wir diese Primärfarbe von hier kopieren und so einfügen. Oder lassen Sie uns das etwas dunkler machen wie diese Farbe, weil es leicht lesbar sein sollte, weil ein Block ist und obwohl dies kein Block ist, wir beim Erstellen einer Website müssen wir beim Erstellen einer Website die Barrierefreiheit der Farben überprüfen, und jetzt klicke ich auf Änderungen speichern , dann haben wir hier die Schriftarten. Was wir tun können, ist, zurück zu gehen und auf Globale Schriften zu klicken, und hier haben wir die Schriftarten. Lassen Sie uns diese Schriftarten hinzufügen. Zuerst haben wir Fopens die Pop-Ins kopiert, Schriftfamilie als Fopen hinzugefügt, und die Größe wird auf 62 und fett gedruckt auf Hundert gesetzt Ich mache die Transformation Großbuchstaben und lass uns die neunte Zeile ändern Lass es uns so machen und der Buchstabenabstand ist ziemlich gut Also hier werde ich diese beiden primären Header ändern. Dann müssen wir hier Unterüberschrift für Unterüberschrift hinzufügen, die Schriftfamilie der Familie wird aufpoppen und die Größe anpassen, lassen Sie uns Größe auf 52 setzen, nicht 62, 52 mit Mold Crasformg Line Night, machen wir es auf 52, alles klar, und hier müssen wir die Textschrift Schriftfamilie der Familie wird aufpoppen und die Größe anpassen, lassen Sie uns Größe auf 52 setzen, nicht 62, 52 mit Mold Crasformg Line Night, machen wir es auf 52, alles klar, und hier müssen wir Es ist Laura, kopiere es einfach. Aura und lass uns 21 draus machen. Vielleicht sind 20 Arbeit. Dann, wenn das normal ist, sagen wir Linet, vielleicht müssen wir die Zeilenhöhe ändern Lassen Sie uns das überprüfen, wenn wir dazu kommen. Dann muss ich an der Schaltfläche für den Button-Text, lass uns HopinshPins 21 holen, lass uns das als Semivol Paese machen Vielleicht machen wir das als Medium. Linet wird auch 21 Jahre alt sein. Sie sich jetzt bitte vor, dass wir jetzt die globalen Schriften und die globalen Farben haben und ignorieren Sie den Theme-Stil. Dann zur Identität der Website, lassen Sie uns diese für später hinzufügen Vorerst müssen wir in den Hintergrund gehen. Hintergrund werde ich als klassisch auf den Hintergrundtyp klicken , und hier muss ich die Hintergrundfarbe hinzufügen, also klicken Sie hier und wählen Sie die Hintergrundfarbe wie folgt aus. Dann ändert sich das Konzept, dann gehen wir zurück. Und jetzt müssen wir das Layout hinzufügen. Lassen Sie uns damit die Standardeinstellung festlegen, dann wird die Lücke zwei sein. Die Standardabstände für Container sind zehn Lassen Sie uns das so belassen und wir gehen zurück und alles ist startklar Jetzt schließ hier und lass uns zur Website gehen. Jetzt klicke ich hier auf Seiteneinstellung, auf Seiteneinstellung, das Seitenlayout wird das Element voller Breite sein. auch im Layout Machen wir es auch im Layout zu einem Element mit voller Breite. Gehen wir dann zurück und gehen zur Identität der Website fügen diese Details jetzt hinzu. Kopieren Sie also zuerst den ST-Namen, fügen Sie den Site-Namen hier ein und kopieren Sie dann den Slogan. Fügen Sie den Slogan hier ein. Hier können wir auch das Seitenlogo hinzufügen, hier klicken und los geht's. Hier haben wir das Seitenlogo, fügen Sie es einfach hinzu und klicken Sie beim alten Tag auf Select and sit FV-Symbol Ich habe gerade die Fav-Con erstellt. Klicken wir auf dieses Qs-Bild und fügen wir dieses FV-Symbol hinzu. Sie finden diese Details im Abschnitt Ressourcen Klicken wir auf dieses Qs-Bild und fügen wir dieses FV-Symbol hinzu. Sie finden diese Details im Okay, klicken Sie jetzt auf Verbergen und klicken Sie jetzt auf Änderungen speichern Und lass uns zum Editorfenster gehen. In Ordnung. Jetzt sieht die Website so aus, also klicke ich jetzt auf Veröffentlichen und lass uns diese Seite unterdrücken Wenn ich die Seite unterdrücke, sieht sie so aus 10. Erstellen und Anpassen einer Kopfzeile: Ordnung. Jetzt müssen wir als ersten Schritt den Header erstellen. Gehen wir also zum WordPress-Dashboard. Also unsere Website, UrlaWP Admin. Dann haben wir von hier aus diese Vorlagen und klicken auf Team Builder Team Builder, hier haben wir die Kopfzeile, klicken Sie auf das Plus-Symbol. Nett. Von hier aus können wir einen Header auswählen oder einen von Grund auf neu erstellen. Hier werde ich das schließen und lassen Sie uns von Grund auf neu erstellen. Von hier aus klicke ich auf das Plus-Symbol und wähle die Plex-Box aus. Die Plex-Box wird zur Richtungszeile. Und los geht's. Gehen Sie einfach zur nächsten Seite dieses Containers und entfernen Sie alle Ränder und Abstände. Und da der Barsch tief ist, werde ich das St. Logo hinzufügen Klicken Sie einfach hier, um ein Element hinzuzufügen und hier haben wir ein seitliches Logo. Los geht's. Dann gehen wir zu eTyleOeStyle, wir können die Breite ändern Lassen Sie uns das M links auf 75% setzen und der Rest ist gut. Jetzt klicke ich auf den Container und füge obere und untere Polsterungen hinzu Fügen wir die Oberseite als sechs und die Unterseite wie folgt hinzu. Jetzt müssen wir den Mann hinzufügen, also klicken Sie auf Element hinzufügen und das Suchmenü suchen. Und hier haben wir ein neues Menü, füge es einfach so hinzu. Derzeit haben wir kein Menü auf den Menüs. Was wir also tun müssen, ist, darauf zu klicken und zum Menübildschirm zu gelangen. Und das Menü von hier aus verwalten. Also werde ich darauf klicken ein neues Menü erstellen. Dann füge ich hier den Menünamen hinzu. Machen wir es zum Hauptmenü und erstellen wir ein Menü. Okay, wir haben das Hauptmenü erfolgreich erstellt, und jetzt müssen wir den Menüpunkt hinzufügen. Hier ist die Homepage. Klicken Sie einfach auf die Startseite und dann auf Zum Menü hinzufügen. Und wenn wir alle ansehen, haben wir keine anderen Seiten Hier haben wir eine Seite namens Home. Aber schauen wir mal, ob wir das überprüfen, ich werde zu Seiten und Seiten gehen. Auf allen Seiten haben wir keine Seite. Was ich jetzt tun kann, ist , hier zu klicken und diese Navigationsbeschriftung einfach so in Home zu ändern. Dann müssen wir Blog- und Kontaktseiten hinzufügen. Was wir tun können, ist, hier einen benutzerdefinierten Link zu erstellen Gehen Sie einfach zu customink und fügen Sie hier den URLS-Hashtag Fügen wir Linktexte über uns hinzu Klicken Sie auf Meno, dann wieder Hashtag und auf Link Texas Blow Wir müssen separate Seiten für all diese benutzerdefinierten Links erstellen , aber konzentrieren wir uns vorerst auf das Hauptmenü und die Startseite Oder wir können die leere Seite für jede Seite erstellen oder wir können leere Seiten erstellen und sie hier direkt zuweisen. Auf diese Weise werden wir also nicht viel zu tun haben. Also werde ich diese Beiträge entfernen und auf Menü speichern klicken. Jetzt können wir zu den Seiten gehen und auf At NW klicken. Und hier werde ich diesen Seitentitel hinzufügen , wenn Über uns ihn veröffentlichen, auf die AD-Seite klicken, bloggen, veröffentlichen, auf Seite klicken und uns kontaktieren, veröffentlichen. Okay. Jetzt kann ich zu den Menüs zurückkehren und hier unter Aussehen, hier haben wir Menüs und hier können wir jetzt auf Seiten klicken und alle ansehen und hier haben wir alle Seiten wie diese, alle auswählen und auf Atomnu klicken und es wird so hinzugefügt Dann können wir Kategorien hinzufügen und dann auf „Menü hinzufügen“ klicken . Dann können wir diese Kategorien hier unten wie folgt hinzufügen diese Kategorien hier unten wie folgt Füge es einfach so unter der Mainblow-Seite hinzu. Klicken Sie nun auf Menü speichern und gehen wir nun zum Elementor-Header und veröffentlichen ihn vorerst Eigentlich können wir das als Entwurf speichern, klicken Sie hier und klicken Sie auf Entwurf speichern Auf diese Weise können wir es speichern, ohne es zu veröffentlichen. Wählen Sie nun das Worresmnu und hier das Menü als Hauptmenü Okay, das Menü wurde so geladen und jetzt wähle ich den Hauptcontainer aus und füge im Layout das als Leerzeichen dazwischen Okay, jetzt müssen wir das Menüdesign ändern. Was ich tun kann, ist auf das Menü zu klicken und Stil zu gehen und die Typografie wird Wir müssen die Größe jedoch ändern. Lass es uns wie 18 ändern. Dann ist die Textfarbe Text, normale Farbe, und auf HA brauchen wir eigentlich keinen Teiler Wenn du den Teiler magst, dann ist er so Dann, wenn die Kante über ist, wird die Schriftfarbe diese grüne Farbe sein Wenn ich drüber bin, wird es grün aussehen und wir brauchen keinen Zeiger. Bei aktiver Farbe ist die Textfarbe also zweitrangig. Und wenn der Inhalt hier als Zeiger angezeigt wird, überprüfen Sie, ob er nicht vorhanden ist. Wenn dir ein solcher Zeiger gefällt, kannst du ihn behalten, aber ich mag es nicht, einfach auf keinen zu klicken und schon wird die Ausrichtung gestartet. Okay, jetzt sehen alle gut aus und gehen zum E-Stil. Und hier machen wir dieses horizontale Muster zu Null, und das vertikale Muster wird ebenfalls Null sein. Jetzt füge ich Platz zwischen uns hinzu. Fügen wir hinzu, dass 90, 90 zu groß ist. Machen wir 60 draus. Ja, 60 sieht gut aus. Okay. Lass uns jetzt runtergehen. Lassen Sie uns hier die Dropdown-Textfarbe als Primärfarbe festlegen. Dann wird die Hintergrundfarbe diese Hintergrundfarbe und die Typografie die Schaltfläche sein, aber die Schriftgröße ist 80 wie folgt Und auf der anderen Seite wird die Textfarbe grün sein, und die Hintergrundfarbe wird grün sein Machen wir es zur Primärfarbe und lassen Sie uns sehen, dass es funktioniert. Ja, es funktioniert perfekt. Und auf Aktiv machen wir das. Okay. Jetzt brauchen wir hier keine Grenze. Und hier fügen wir horizontale Muster hinzu, machen wir es auf 30, und lassen Sie uns sehen, dass es eigentlich ein vertikales Muster sein sollte. Machen Sie ein vertikales Muster zu 30, 30 ist zu viel. Vielleicht lass uns bei 20 sein und das horizontale Muster wird auch 20. Jetzt sieht es so aus, und hier können wir den Abstand zum Menü ändern. Lass uns darauf achten, dass 2020 zu viel ist. Machen wir es so, als ob neun ziemlich gut sind. Taste umschalten. Dieser Schalter, aber wir müssen die Details der Umschaltfläche in der mobilen Ansicht anpassen Details der Umschaltfläche in der mobilen , da die mobile Welle derzeit so aussieht Aber in zukünftigen Lektionen werden wir die mobile Ansicht korrigieren Lassen Sie uns das vorerst so belassen und sie zum Mittelpunkt machen Klicken Sie einfach auf diesen Hauptcontainer und richten Sie die Objekte in der Mitte aus. Klicken Sie auch hier. Jetzt schneide ich diesen Container und die einzelnen Artikel ab. Klicke auf Mitte, um das Zentrum so zu gestalten , dass es so aussieht und es sieht ziemlich gut aus. Lassen Sie uns auch die Tablet - und Mobilversionen gleichzeitig reparieren . Was ich also tun kann, ist auf die Tablet-Version zu klicken. der Tablet-Version wähle ich den Container und am Rand links und rechts, machen wir es wie 15 und links wird 15 sein Okay. Jetzt sieht dieses Bild ziemlich gut aus, und jetzt klicken Sie auf dieses Hamburger-Menü Und hier können wir die Größe nach Belieben ändern . Lass es uns ändern. 36 und die Grenze mit wird Null sein, Grenzradius wird ebenfalls Null sein. Und die Hintergrundfarbe wird diese Primärfarbe oder die Textfarbe sein , und das Hamburger-Menü unter Farbe wird die Hintergrundfarbe sein. Okay. Jetzt haben wir ein Problem. Wenn wir dieses Menü öffnen, wurde es mit dem Rest des Containers geöffnet. Um das Problem zu beheben, klicke ich auf das Wort Rsmo und hier auf den Inhalt, ich mache es in voller Breite Und wenn ich es dann ankreuze, öffnet es sich so Und jetzt haben wir hier ein Problem. Diese Umschaltfläche reagiert nicht mehr und es ist quasi außerhalb des Layouts Was wir tun können, ist, auf den Container zu klicken und der Container ändert die Richtung zur vertikalen Spalte Wenn ich das jetzt ankreuze, sieht es so aus, und jetzt sieht es wirklich gut aus Auch hier können wir den Inhalt des Logos dieser Seite in die Mitte setzen, indem wir den Inhalt zu hundert Prozent auf diese Weise erhöhen. Und wenn Sie diese Eigenschaften überprüfen, sehen Sie dieses Tablet-Protrit-Symbol. Das heißt, wenn wir während der Tablet-Version Änderungen vornehmen , wirken sich diese Änderungen nur auf die Tablet-Version Wenn wir zur Desktop-Version wechseln, ist das Design dasselbe, und hier sehen Sie das Desktop-Symbol. Und wenn Sie auf Handy klicken, können Sie hier das Handy sehen. Okay, jetzt lass uns an der mobilen Version arbeiten. Okay, gehen wir zum Mobilgerät und hier sehen wir, ich klicke einfach auf den Hauptcontainer und lasse uns die Richtung auf Pro Horizontal einstellen. Okay. Also, los geht's. Dafür sollte sich dieser Menüpunkt auf der rechten Seite befinden. Was ich tun kann, ist zum Logo zu gehen. Lassen Sie uns nun im Voraus fortfahren. Ich werde diese Breite ändern, Ich werde diese Breite ändern nicht das Bild mit der Breite dieses Site-Logos. Machen wir es benutzerdefiniert und verkleinern wir es wie folgt. Lass es uns so hinzufügen. Okay. Lass uns 270 Nice draus machen. Nun, wir hatten dieses Problem schon einmal, was bedeutet, dass die Seite nicht richtig angezeigt wird , und ich habe den Grund für dieses Problem gefunden. Wenn wir zum Container auf dem Container gehen, fügen wir den Rand rechts und links als 15 hinzu. Aber was wir tun müssen, ist es auf der Polsterung hinzuzufügen. Lassen Sie uns den Rand links rechts auf Null setzen. Wenn wir das tun, wurde das Problem behoben und ich füge hier die ersten sechs hinzu und der Abstand wird 15 sein Und auch die linke Polsterung wird 15 sein. Auch hier müssen wir diese Größe auf ein bisschen mehr reduzieren diese Größe auf ein bisschen mehr Eigentlich, wenn wir nicht hier im Container sind, gehen wir zum Layout. Lassen Sie uns beim Layout die Lücke auf Null setzen. Und jetzt können wir das Seitenlogo so hinzufügen, nicht 25245 Okay. Jetzt sieht es ziemlich gut aus. Und wenn wir zur Tablet-Version gehen, können wir dasselbe mit der Tablet-Version tun. Klicken Sie also einfach hier und machen Sie die Richtungszeile horizontal. Und lass uns weitermachen, diesen Rand rechts und den Rand links entfernen. Dann fügen wir es gleich hier hinzu. Eigentlich müssen wir zusammen auf den Linkwert klicken , um ihn zu überprüfen 615615 Ordnung. In der Desktop-Version haben wir den Rand rechts und links nicht hinzugefügt, also können wir ihn so platzieren und los geht's, hier ist unser Menü und Logo, und das ist der Header. Jetzt klicken Sie auf Veröffentlichen und dann haben wir hier At condition. Also werde ich auf Condition klicken und dafür sorgen, dass es die gesamte Site einschließt. Dann klicke ich auf Speichern und klausel Ar, jetzt gehen wir zu unserer Homepage. Gehen wir zurück zur Wettseite. Und los geht's. Hier ist die Homepage. Lass uns das überprüfen Okay, jetzt sieht es so aus, und das ist der Fußzeilen-Teil Lassen Sie uns vorerst eine leere Fußzeile erstellen und wir können Fußzeile erstellen, nachdem wir den Heldenbereich fertiggestellt Nicht der Heldenbereich, die Homepage. Okay, gehen wir zu Team Builder Templates Team Builder. Und hier haben wir zwei Header. Das ist der Header. Also wenn ich hierher gehe. Das ist der Header, also werde ich diesen Header entfernen. Klicken Sie auf Trash, modifizieren Sie den Papierkorb und klicken Sie hier und klicken Sie auf Renim. Dann lass es uns bei Head so ändern. Ordnung. Siehst gut aus. Dann lass uns zu Footer gehen. Ich klicke einfach hier und hier sind einige Fußzeilen. Im Moment überspringe ich es und klicke einfach auf Die gesamte Website veröffentlichen und dann auf Speichern und schließen Okay. Lass uns sehen. Los geht's. Hier ist jetzt die Website. In der nächsten Lektion müssen wir die Startseite gestalten. 11. Entwerfen des Heldenbereichs: Jeder. Lassen Sie uns jetzt die Homepage gestalten. Wenn wir derzeit auf die Homepage gehen, sieht sie so aus, und ich möchte die Homepage-Seite einrichten. In unserem Fall gehen wir zum Dashboard und zur Seite Seiten 0, und wir müssen diese Seite einrichten. Um das zu tun, kann ich auf Dashboard drücken und dann auf Set In und Tding gehen Ich werde es in einem neuen Fenster öffnen, und hier auf Ihrer Startseite wird angezeigt, klicken Sie auf eine statische Seite und legen diese Homepage als unsere zweite Homepage fest, die wir erstellt haben Jetzt klicke ich auf Änderungen speichern. Wenn ich jetzt die Website besuche, wird sie so aussehen, weil unsere Homepage leer ist. Jetzt klicke ich mit Elemento alles klar darauf. Jetzt ist es an der Zeit, die Homepage zu gestalten. Okay, lass uns mit dem Design beginnen. Zuallererst müssen wir den Heldenbereich erstellen. Mein Plan ist es also, einen Beitrags-Slider zu erstellen. Dieser Slider wird also etwa drei Beiträge haben, wahrscheinlich die letzten drei Beiträge. Lass es uns machen. Zuerst klicke ich auf dieses Plussymbol Xbox und die Richtung wird in der Spalte angezeigt. Okay, jetzt gehe ich zu Advance und entferne alle Abstände und Ränder, alles in Ordnung Jetzt werde ich auf dieses Anzeigenelement klicken. Also ich bin ein Element von Pro, wir haben ein Loop-Karussell Mit diesem Loop-Karussell können wir Slider mit dynamischem Inhalt erstellen Beitrag ist also ein dynamischer Inhalt, was bedeutet, dass wir Beiträge auch über unser Dashboard hinzufügen können Beiträge auch über unser Dashboard Mit anderen Worten, WordPress ist ein CMS-Content-Management-System. Lassen Sie uns diese Funktion verwenden , um unser Post-Grid zu erstellen. Um das zu tun, werde ich einfach dieses Loop-Karussell im Container ausrauben dieses Loop-Karussell im Container Okay. Jetzt kann ich hier den Vorlagentyp auswählen. In unserem Fall sollten es Beiträge sein. Wenn Sie mithilfe erweiterter benutzerdefinierter Felder verschiedene Krafttypen erstellen , werden all diese Elemente hier geladen. In unserem Fall haben wir Post, und dann können wir hier die Abfrage setzen , bevor wir die Abfrage setzen. Lassen Sie uns eine Vorlage erstellen. Also klicke ich auf Vorlage erstellen und hier speichern , um dieses Design zu speichern. Okay. Nun, hier klicke ich auf das Plus-Symbol und das Plex-Feld, die Richtung wird in der Spalte angezeigt. Okay, dann entferne ich wie zuvor all das unnötige E-Zeug und klicke auf Element hinzufügen. Und hier haben wir den Posentitel, Auszug aus dem Beitrag, das Feature Dimag, den Inhalt des Beitrags, die Beitragsinfo Was wir hinzufügen müssen, ist der Hintergrund. Um den Hintergrund hinzuzufügen, ich die erzwungene Funktion Dimage hinzu Was ich tun kann, ist, diesen Container auszuwählen und zu Estyle zu gehen , auf Classic zu klicken und hier kann ich diese Funktion für dynamische Tags verwenden, darauf klicken, und hier haben wir dynamische In unserem Fall benötige ich das Feature Dimage. Klicken Sie einfach auf Feature Dimage. Das Feature Dimage wird so angezeigt. Bevor wir weitermachen, werde ich auf dieses eingestellte Loop-Element klicken und hier werde ich diesen Titel in eine Pause-Slider-Vorlage ändern Dann werde ich das veröffentlichen. Jetzt klicke ich auf Speichern und zurück und wir sind zurück auf unserer Homepage, und hier müssen wir nur die Schleife auswählen und jetzt müssen wir hier die Anzahl der Folien hinzufügen Ich benötige drei Folien. Sit on Display wird eins sein und Sit on Scroll wird auch eins sein. Jetzt klicke ich auf die Vorlage und los geht's, unsere Vorlage ändert sich wie folgt. Jetzt kann ich auf den Container klicken und Might hinzufügen. Fügen wir die Höhe wie folgt als 700 hinzu. Gehen wir nun zu ES-Kacheln auf E-Dateien. Die Position wird mittig sein, und die Anlage ist Standard, Wiederholung ohne Wiederholung, Displaygröße, lassen Sie uns die Abdeckung so gestalten Dann können wir einen Scroll-Effekt hinzufügen, aber ich werde ihn nicht hinzufügen, und hier können wir den Mauseffekt hinzufügen. Ich mache es nicht. Ich füge ein Hintergrund-Overlay hinzu, klicke hier, klicke auf Normal, und der Hintergrundtyp wird klassisch sein und die Farbe wird unsere Primärfarbe sein Oder es. Lassen Sie uns eine Hintergrundfarbe daraus machen und die Deckkraft auf fünf erhöhen , ich werde sicherlich keine Hintergrundfarbe hinzufügen Jetzt möchte ich den Posentitel und eine kurze Beschreibung oder ein paar Informationen über den Beitrag wie einen Auszug hinzufügen Posentitel und eine kurze Beschreibung oder ein paar Informationen über den Beitrag wie und hier eine Schaltfläche namens Read Me Lass es uns machen. Dazu können wir auf Element hinzufügen klicken und zuerst Titel des Beitrags hinzufügen. Okay, ich erlaube mir nicht zu bearbeiten. Ich kann das also veröffentlichen und auf Seite bearbeiten klicken. Okay. Klicken Sie jetzt erneut auf Vorlage bearbeiten. In Ordnung. Jetzt kann ich hinzufügen, dass es wie eine Panne ist. Also füge einfach den Beitragstitel hinzu und der Beitragstitel ist hier. Ich möchte es hier platzieren. Bevor wir das tun, lassen Sie uns einfach das Design erstellen. Dann möchte ich einen Auszug aus dem Beitrag. Lass uns so hinzufügen. Dann will ich einen Knopf. Lass uns den Knopf so drücken. Okay. Jetzt wird dieser Text nicht richtig angezeigt. Was wir also tun können, ist, diesem Text die Hintergrundfarbe hinzuzufügen . Um das zu tun, muss ich einen neuen Container erstellen. Lassen Sie uns einen Container wie diesen per Drachenseil gestalten. Und noch einmal, lassen Sie uns all das unnötige Zeug entfernen und bei Daction die Spalte vertikal machen, und ich werde es hier platzieren, dann füge ich den gesamten Pausentitel und den Post-Auszug und die Schaltfläche in diesem Container Lassen Sie uns das eigentlich so machen. Okay. Jetzt wähle ich den Container aus und gehe zu Estyle, klicke auf den Hintergrundtyp und lass uns die Hintergrundfarbe ändern Primärfarbe wie diese. Okay, ziemlich gut. Lassen Sie uns jetzt mit dem Titel bearbeiten. Wählen Sie den Titel des Beitrags aus und gehen Sie zur Ost-Kachel. Die Ausrichtung erfolgt links und die Typografie wird wie folgt in der Kopfzeile angezeigt Dann wird die Textfarbe die Hintergrundfarbe sein. Nett. Jetzt müssen wir den Auszug hinzufügen Also hier werde ich die Länge auf zehn setzen. Lass uns nachschauen. Wie wäre es wenn wir auf Anwenden klicken , um Inhalte zu posten Okay, jetzt ist es hier, zehn ist nicht gut. Lass uns 225 draus machen. Okay, 25 ist viel besser. Und gehen wir zu Stilausrichtung, Ausrichtung links, und Typografie wird Text sein Dann wird die Textfarbe die Hintergrundfarbe sein. Und jetzt sieht es so aus, und jetzt möchte ich diesen Button verbessern. Ich werde auf die Schaltfläche klicken und der Button-Text wird weiter gelesen. Also lesen wir mehr davon. Und wenn Sie möchten, können Sie dynamische Tags hinzufügen, aber ich werde es nicht tun. Und für den Link können wir dynamische Tags hinzufügen. Klicken Sie auf dynamisches Tag und hier können wir die Beitrags-URL hinzufügen. Falls du keine Ahnung von dynamischen Tags und UV-Garausel hast oder wenn du in die Tiefe gehen möchtest, habe ich bereits einen vollständigen Kurs über Elemento Pro und du kannst ihn dir ansehen oder einfach deinen Kommentar im Bereich Fragen und Antworten hinzufügen. Ich werde eine separate Lektion über dynamische Tags, Lobe Carser und Benotung über diese Dinge erstellen Lobe Carser Okay. Gehen wir jetzt nach Estes auf Es dies. Die Position wird verlassen, Zeit für die Lücke wird gedrückt Hast du dich daran erinnert, dass wir all diese Dinge auf der Seiteneinstellung eingestellt haben und die Textfarbe wird, lassen Sie uns die Hintergrundfarbe machen und die Farbe wird die Sekundärfarbe sein Hast du gesehen, was ich gemacht habe? Hier die Textfarbe, globale Farbcode , der Hintergrund und die Hintergrundfarbe ist diese grüne Farbe. Der Randradius wird Null sein und wir machen den Abstand als. Machen wir oben 22, rechts, 30, unten 22, links 30 so, es ist allerdings etwas größer Machen wir das auf 20 bis 20, jetzt ist es viel besser, vielleicht 25. Ja. 25 sieht viel besser aus. Und hier lassen wir den Rand über dem Design, also klicken Sie darauf und klicken Sie darauf , um die Farbe zur Primärfarbe zu machen, und der Hintergrundtyp wird so sein oder die Hintergrundfarbe wird auf weiße Farbe geändert. Siehst du? Sie können auch eine Transaktionsanimation wie diese hinzufügen. Lass uns wachsen, siehst du? Jep. Und als Nächstes möchte ich das hier unten hinzufügen und so viel verkleinern Um das zu tun, wähle ich den Subcontainer aus, den wir erstellt haben, und fahren fort und fügen dann Padding Klicken Sie also hier und lassen Sie uns allen Seiten eine Polsterung von 20 hinzufügen und schon kann die Ausrichtung beginnen Und hier kann ich die Breite auf 60 ändern. Nein 60 ist nicht gut. Vielleicht werden 90 funktionieren. Ja, 90 ist ziemlich gut. Dann muss ich zum Hauptcontainer auf dem Hauptcontainer gehen. Ich muss auch das Pad hinzufügen. Sagen wir es als 20. Und jetzt gehen wir zum Layout. Und hier kann ich den Inhalt ausrichten als Ende festlegen und das Ausrichtungselement als Anfang festlegen. Okay, hast du gesehen, dass es jetzt viel besser ist. Und wir können auch auf diesen zweiten Container oder den Hintergrundcontainer klicken , und hier, wenn ich hier klicke und wir die Deckkraft einfach verringern können, machen wir es so Okay, jetzt sieht es ziemlich gut und auch in unserem Auszug können wir nach dem Ende dieses Absatzes Text hinzufügen Was wir tun können, ist, zu Advance zu gehen und danach weiter. Fügen wir drei Punkte wie diesen hinzu. Und auf Knopfdruck sieht dieser Dreipunkt nicht gut aus, also werde ich ihn einfach entfernen. Wenn also jemand auf diese Schaltfläche klickt , leitet diese Person auf diese Seite oder diesen Beitrag weiter. Lassen Sie uns auch auf die Option Link klicken und sie ändern, um sie so zu ändern, dass sie in einem neuen Fenster geöffnet wird. Okay, jetzt sieht es ziemlich gut aus. Okay, was ich jetzt tun kann, ist auf Veröffentlichen und dann auf Speichern und B. Und mal sehen, wie es weitergeht. Hier ist das Design. Und jetzt kommen wir nur noch zum Design. Lassen Sie uns zunächst die Abfrage einrichten. Klicken Sie also auf das Loop-Karussell und gehen Sie zu Query. Die Abfragequelle wird pausiert. Und hier können wir, wenn wir wollen, Autorenbegriffe hinzufügen, einschließen oder ausschließen, aber ich werde es nicht tun. Datum wird also nur eine Reihenfolge bis hier sein, sollte DESC absteigend sein, was bedeutet, dass der letzte Beitrag zuerst angezeigt wird und der älteste Beitrag zuletzt angezeigt wird. Okay. Jetzt können wir bei der Einstellung die EPL-Geschwindigkeit ändern. Und wenn wir übergehen, wird die Seitenleiste gedrückt und wir können die Richtung ändern, oder wenn wir mehr als eine Seite haben, können wir mehrere Folien hinzufügen, und in unserem Fall brauchen wir keine von ihnen, und ich werde die Navigation entfernen, und ich werde die Navigation entfernen weil wir sie nicht Außerdem werde ich die Seitennummerierung entfernen. Okay. Das Wichtigste , was mir an diesem Design Sorgen macht, ist, dass es das Layout nicht vollständig abdeckt und es ist ziemlich hässlich. Es sah alt aus, also können wir auf den Container klicken, und hier wird die Inhaltsbreite so voll sein. Jetzt sieht es gut aus. Okay? Okay, jetzt sieht es viel besser aus, und was ich brauche, ist, die Mindestanzahl pro Nacht zu erhöhen. Lass uns versuchen, es hier zu machen. Nein, von hier aus geht es nicht. Also werde ich auf Vorlage bearbeiten klicken, dann gehen und hier auf den Container klicken und lass uns diese Min Night auf VH und pH 200 ändern Bedeutet, dass dies auf der gesamten Startseite angezeigt wird. Aber das Problem ist, ich habe vergessen, dass wir diesen Header bereits haben. Was ich also tun kann, ist, dass ich die Mindesthöhe 80 einstellen kann. Ja, es wird funktionieren und klicken Sie auf Speichern. Dann klicken Sie hier , um den Header zu bearbeiten. Und jetzt bin ich im Header, klicke einfach auf den Header-Container und setze Mnhight auf VH auf OMG ist groß, aber mal sehen, dass es perfekt sein sollte. Klicken wir hier, um die Seite zu bearbeiten. Ja, es ist größer als ich erwartet hatte. Also das sollte sicherlich 80 sein, nicht Pixel VH ET, veröffentlichen, mal sehen Hier, machen wir zehn draus. Zehn werden Arbeit sein, spar sie dir. Gehen wir hier hin, wählen diesen Container aus und fügen ihn als 90 hinzu und speichern ihn. Eigentlich habe ich es für Rome Place hinzugefügt, also muss ich es im Homepage-Bereich bearbeiten, nicht in dieser Vorlage, also gehe ich zu Vorlagen bearbeiten und hier, hier, wähle ich den Container aus und ändere ihn in. Lassen Sie uns das so ändern und klicken Sie auf „In Hundert ändern“ und dann auf „Veröffentlichen Lass uns sehen. Dann gehen wir zurück zu unserer Homepage, klicken Sie hier. Klicken Sie so. Okay, jetzt ist es LF 12. Entwerfen des Abschnitts "Featured Posts": Okay. Lassen Sie uns nun einen Abschnitt mit ausgewählten Beiträgen erstellen. Dazu gehe ich hierher und klicke auf das Plus-Symbol, dann werden Flexbox und die Pex-Box-Richtung als Spalte angezeigt Dann werde ich bei Advance alle Ränder und Patins entfernen Dann klicke ich auf ein Element und suche hier nach Beiträgen Hier bekommen wir Post-Elemente, also werde ich es einfach so formulieren wie diese neun. Von hier aus können wir den Skin ändern. Ich wähle diese Karte aus und drei Spalten werden funktionieren und der Beitrag pro Seite wird sechs sein, was bedeutet, dass sechs oder ein Beitrag so angezeigt wird Jetzt sieht die Bildauflösung gut aus und das Bildverhältnis ist auch bei dieser Zahl gut, dann müssen wir den Titel überprüfen Hier müssen wir den Titel anzeigen und der Titel-Tag wird H drei sein. Dann füge ich bei Exerp die Länge der Übung hinzu , da sie etwa 15 hinzugefügt haben Ich glaube, es wurde nicht aktualisiert. Ja, es wird nicht aktualisiert. Vielleicht entfernen wir EAP, klicken Sie auf diese Anzeigenschaltfläche, um sie auszublenden Jetzt ist es so und ich werde auch die Schaltfläche „ Mehr lesen“ entfernen und wir brauchen kein Datum oder die Anzahl der Kommentare, und ich werde ein neues Fenster öffnen Dann ist dieses Abzeichen okay, wir müssen die beiden Avatare nicht zeigen. Jetzt wird es so aussehen. Aber wenn du Exerpt wirklich brauchst, kannst du es zeigen und die Exp-Länge auf fünf setzen und wir sehen es uns in den realen Ansichten an, es wird korrekt angezeigt, also müssen wir diese Exp-Länge auf 50 setzen Wenn wir es nun überprüfen, los geht's, wir haben die Größe 50. Gehen wir nun zu Query on Query. Die Quelle sind Beiträge und das Datum wird alle sein, dann wird Reihenfolge B zufällig sein, was bedeutet, dass Beiträge für diesen Abschnitt zufällig ausgewählt werden oder wir können sie nach der Anzahl der Befehle oder der letzten Änderung oder nach der Menüreihenfolge sortieren, aber ich mache es nach dem Zufallsprinzip. Bei der Paginierung brauchen wir dann keine Paginierung. Was wir tun können, ist, zur Registerkarte Stil auf der Registerkarte Stil zu wechseln und diesen Spaltenabstand Der Zeilenabstand wird ebenfalls 20 linksbündig sein, und die Hintergrundfarbe der Karte entspricht dieser Hintergrundfarbe, und wir ändern die Rahmenfarbe nicht. Ich setze den Randradius Null und hier haben wir den Kastenschatten, öffne ihn und wir werden diesen Kastenschatten haben. Und beim Bild werde ich das Standardbild beibehalten. Dann lass uns zum Inhalt gehen. Beim Inhalt wird die Titelfarbe primär und die Typografie die Unterüberschrift sein, aber wir müssen die Details ändern Hier mache ich 21 daraus, dann wird der Bolzen mittelgroß sein Mittel, nein, nicht mittel. Vielleicht funktioniert Semibold. Ja, Semibold ist gut, und auch hier, lass uns 25 draus machen Buchstabenabstand, machen wir ihn zum Standard. Vielleicht machen wir diese Zeilenhöhe auf 30. Jetzt werden 28 funktionieren. Okay. Jetzt können wir den Abstand anpassen, also füge ich sechs hinzu und wir haben hier keine Meta-Details. Was wir also tun können, ist, zu Außer bei Textauszügen zu gehen, die Farbe ist die Textfarbe und auch hier können wir diese Textfarbe als Farbe des Titels festlegen, aber lassen wir sie als Primärfarbe behalten und dann wird die Typografie Text sein Diese Typografie ist zu nah dran, soweit ich mich erinnere, ich ändere sie bereits, aber lassen Sie uns sehen, bevor wir das tun, lassen Sie uns in der unteren Zeile 20 etwas Platz hinzufügen Und für den typografischen Klickkontext klicken Sie auf diese globale Schriftart verwalten und dann auf Kontext und lassen Sie uns diese Zeile als erstellen Fügen wir etwa 26 hinzu und speichern Änderungen zurück im Editor. Okay, jetzt ist es ziemlich gut, aber es ist immer noch zu nah dran Gehen wir also wieder hierher und klicken Sie hier, klicken Sie auf Set und Text, machen wir daraus 30. Jetzt ist es viel besser. Jetzt können wir, wenn wir wollen, die Read More hinzufügen. Lassen Sie uns eigentlich das Gelesene hinzufügen. Klicken Sie hier und los geht's. Und gehen wir zu den Inhalten von Estyle on Estyle unter Content, hier haben wir mehr gelesen Ich werde Farbe als Sekundärfarbe festlegen und die Button-Typografie einstellen, aber hier müssen wir die Schriftgröße reduzieren Lass es uns wie 16 machen. Und hier machen wir aus diesem Raum etwa sechs. Und hier gibt es zusätzlichen Platz in etwa 20. Okay, jetzt sieht es ziemlich gut aus. Okay, jetzt sieht alles gut aus. Also, was ich tun kann, ist einfach auf Veröffentlichen zu klicken, um mir die Änderungen anzusehen. Okay, jetzt wird es so aussehen. Außerdem müssen wir hier beim Titel sein. Also lass uns das machen. Auch hier haben wir kein vorgestelltes Bild und der Abstand zwischen dem Titel und diesem Bild ist zu groß, also lassen Sie uns das korrigieren. Gehen wir hierher, und wir können diesen Raum so ändern , dass wir drei daraus machen. Und hier können wir die Ausweisdetails ändern. Hier können wir die Hintergrundfarbe so ändern und Textfarbe wird tatsächlich der Hintergrundfarbe entsprechen. Das funktioniert so. Okay, jetzt veröffentliche es. Und los geht's. Hier ist das Design und es sieht ziemlich gut aus. Also lass uns den Titel hinzufügen, um den Titel hinzuzufügen, ich werde hier klicken und lass uns den Header hinzufügen. Der Header, das M-Tag, wird also H zwei sein. Fügen wir es wie unsere letzten Erkenntnisse hinzu und gehen wir zu Set in, machen es zu einer Linienlage, Typografie wird als Header verwendet und ich werde das auch duplizieren, dann wird das ML-Tag P sein und schon verpassen Sie nichts Lesen Sie unsere neuesten und beliebtesten Artikel und lassen Sie uns daraus Text machen Und dann klicke ich auf diesen Beitragsbereich und lass uns am Rand zwei Punkte herausnehmen. Jetzt hat es mehr Abstand. Veröffentlichen und los geht's. Jetzt wird es so aussehen und ich werde auf die Schaltfläche „Lesen Sie mich“ klicken Schaltfläche „Lesen Sie mich“ die Tiefe von Snowball bis Tiefe Avalanche Klicken Sie auf den Beitrag bearbeiten und dann auf Beitragsbild vom Konzept. Fügen wir dieses vorgestellte Bild wie folgt hinzu und klicken Sie auf Konzept. Okay. Gehen wir nun zum nächsten Schritt über. 13. Entwerfen des Kategoriebereichs: Okay, lassen Sie uns jetzt einen Abschnitt erstellen , in dem alle Kategorien angezeigt werden. Also werde ich zuerst auf dieses Plus-Symbol klicken und Flexbox, Richtungsspaltentyp und Container hinzufügen Richtungsspaltentyp und Container dann im Voraus den gesamten Rand und die Polsterung entfernen Dann füge ich hier den Rand von eins zu 20 hinzu. Das Leerzeichen ist so, dann fügen wir Überschrift und Überschrift hinzu. Ein Text wird Ihre finanzielle Reise untersuchen . Außerdem werde ich ihn duplizieren und die Unterüberschrift wie folgt hinzufügen und ihn dann zu einem Absatz machen Jetzt werde ich das in den Mittelpunkt stellen. Klicken Sie auf die Überschrift, den Stil, klicken Sie auf Typografie und wählen Sie hier den Subheader-Typ aus, stellen Sie ihn in die Mitte und lassen Sie uns auch diesen Mittelpunkt und den Text so gestalten Jetzt müssen wir hier Kategorien hinzufügen. Gehen wir also zu unserer Website und zu den Beiträgen, hier haben wir Kategorien und hier haben wir vier Kategorien. Was wir tun können, ist, dass wir die Icon-Box verwenden können. wir also zunächst ein Element hinzu und fügen wir den Container in diesem Hauptcontainer hinzu. Dann entfernen wir alle Abstände und Ränder, und dann gehen wir zum Layout und die Layoutrichtung sollte Zeile sein Als Nächstes klicke ich auf Element und Suchsymbol hinzufügen, los geht's, hier haben wir das Symbolfeld, und lassen Sie uns die Kategoriedetails hinzufügen. Zuerst kopiere ich den Kategorienamen und füge ihn in den Titel ein, und dann kopieren wir die Kategoriebeschreibung, hinter der Beschreibung wie folgt Dann klicke ich auch auf die Ansicht und klicke auf Adresse kopieren und füge dort die Linkadresse hinzu und klicke auf Neues Fenster öffnen. Jetzt müssen wir dafür das Design ändern. Gehen wir zu EstilSoets, wenn wir wollen, wir können das Symbol so platzieren links und rechts machen, um das zu tun, ich werde hier klicken und die vertikale Ausrichtung wie diese Ausrichtung wird links sein und der Symbolabstand, machen wir es auf 15 und auch für den Inhaltsabstand, lassen Sie es uns so machen, dass 15 15 zu viel ist, aber es ist okay Lassen Sie uns nun das Symbol ändern. Gehen wir zum Symbol und tatsächlich zum Inhalt, ich muss das Symbol von hier aus ändern. Eigentlich kann ich alle Kategorien so kopieren und dann gehen wir zu Hag BT und lassen Sie uns das einfügen und lassen uns diese Elemente so entfernen Dann werde ich sagen, gib mir für jede ein fantastisches Symbol, mal sehen, los geht's Lass uns das kopieren und einfügen. Du musst diese Zeilen entfernen. Tatsächlich gibt es kein Symbol namens Handhold in Dollar. Gib mir ein kostenloses Telefon, also Icons. Lass uns sehen. Nehmen wir an, es gibt mehr. Ja, lass uns die Universität kopieren und einfügen. Okay, füge es ein. Und jetzt gehen wir zu E-Stil auf E-Stil, lassen Sie uns die Symbolfarbe in Sekundärfarbe ändern. Und die Größe ist okay. Dann zum Inhalt, lassen Sie uns die Typografie in die Schaltfläche ändern. Titel-Typografie ist eine Schaltfläche, und die normale Farbe ist die Textfarbe Die Go-Farbe wird wie diese grüne Farbe sein. Dann ist Beschreibung TiroF Text und die Farbe wird Textfarbe sein Okay. Nun, warum schreiben und klicken wir auf Bligate und es wird sich so duplizieren Dann muss ich diese Inhalte ändern. Gehen wir von Kategorien aus, kopieren Investitionen, wählen wir nicht Investitionen aus, Investitionen. So, dann lass uns diesen Text kopieren. Da ist der Text, klicken Sie mit der rechten Maustaste auf Linkadresse kopieren, fügen Sie ihn ein und erstellen Sie ein Diagramm. Symboldiagramm. Los geht's, dann kann ich einfach auf den Container klicken und mit der rechten Maustaste klicken, dann duplizieren. Es wird so dupliziert. Dann fügen wir die Details erneut hinzu, fügen sie so hinzu. Lass uns die Brieftasche hinzufügen. Holen Sie sich immer die Hilfe von KI , wenn Sie eine Website entwerfen. Lass uns den Teil mit dem Lärm reinkopieren und das hier platzieren : Lärm und komm her, Steuern. Panzer. Kopiere es, füge es hier ein. Außerdem muss ich die URL einfügen. Ich glaube, ich habe vergessen, die URL in Personal Finance einzufügen. Klicken Sie mit der rechten Maustaste auf Linkadresse kopieren und fügen Sie sie so ein. Okay. Jetzt geht's los. Hier haben wir alle vier Artikel, aber wir haben eine Menge Probleme. Lassen Sie uns sie zuerst eins nach dem anderen beheben. Ich möchte diese Größe auf 50% setzen, also gehen wir zu Advance und klicken bei mir auf Benutzerdefiniert und 50. Dann klicke auch hier und gehe zu Advance und Custom 50 wie folgt. Dann klicken wir auf Kopieren, dann klicken wir auf Stil einfügen, fügen den Stil ein. Jetzt haben wir auch ein Problem, nämlich dass wir nicht genug Abstand haben. Wir können also einen separaten Container erstellen. Stellen Sie den Behälter hierher, dann lassen Sie uns das Zeug entfernen und ich werde diesen Behälter in diesen Behälter legen. Und dieser wird sich auch in diesem Hauptcontainer befinden, den wir erstellt haben, und im Layout hier kann ich die Zeile und Spalte festlegen. Lassen Sie uns 40 und 40 daraus machen damit ich der Spalte nicht 40 hinzufügen muss. Und jetzt wird es so aussehen und lassen Sie uns 60 daraus machen. Und dann klicke ich auf eines dieser Icon-Boxen und lass uns zu Itis gehen und weiter zu Advance, lass uns zu Border gehen und es solide machen. Eigentlich brauchen wir keinen Rand, aber was wir brauchen, ist Box Shadow. Fügen wir einen Boxschatten wie diesen hinzu, und ich werde die Details des Boxschattens nicht ändern , und beim Layout ändern wir den Abstand auf und ich werde die Details des Boxschattens nicht ändern, und beim Layout ändern wir den Abstand auf sechs, vielleicht ja, 15 funktionieren und dann jetzt mit Recht diesen Stil kopieren, einfügen, diesen Stil einfügen, auch hier, Stil einfügen Eigentlich können wir das Raster verwenden, nicht diesen Container, und wenn wir das Raster verwenden, passt es sich automatisch an das Raster an Gehen wir hierher und fügen wir das Raster hinzu. Fügen wir das Raster wie folgt hinzu und das Raster wird aus zwei Spalten bestehen und diese werden auch für die Lücke gelten, wenn 40 zu viel ist. Lass uns Lücken 20 machen. Dann werde ich diese Boxen dem Raster hinzufügen. Wir können es einfach hinzufügen und hier platzieren und auch von hier aus, es Standardgröße machen und es hier hinzufügen, rechten Maustaste auf Kopieren klicken und den Stil drücken. Wenn wir das tun, können wir das Design erhalten , das die gleiche Größe wie der Hintergrund hat. Lass uns hierher gehen und den Fehler beheben. So erklärt. Und ja, dann lassen Sie uns diesen ganzen Container entfernen. Und jetzt hat es in jedem Artikel genau die gleiche Größe. auch für diesen Boxschatten Gehen wir auch für diesen Boxschatten zu Border. Und hier ändere ich das in, nein, lass uns so bleiben und die Streuung wird drei sein und die Unschärfe wird 22. Lassen wir es so verschwimmen, dass zehn und p eins sein wird. Wir klicken auf Copy Patty, FT Style, Pastyle. Ordnung. Jetzt haben wir diesen Abschnitt vollständig entwickelt. Wenn wir wollen, können wir auch eine Marge von bis zu 60 hinzufügen. 60 ist zu viel. Vielleicht ist 30 die Größe. Lassen Sie uns das nun anhand des Designs überprüfen. Wenn also jemand auf diese Kategorie klickt, wird sie zur Kategorieseite weitergeleitet und wir müssen die Kategorieseite bearbeiten, was wir in zukünftigen Lektionen tun werden. 14. Erstellen eines Abonnentenformularabschnitts: Lassen Sie uns nun ein Abonnentenformular erstellen. Um das zuerst zu tun, erstellen wir den Container. So, dann müssen wir die Werte weiter verknüpfen, dann hier eins, 20 sind der obere Rand. Dann muss ich dafür die Kopfzeile hinzufügen, gehen wir zu Elemente auf Elemente, gehen wir zu Elemente auf Elemente, ziehen die Überschrift per Drag-and-Drop, und ich füge das als Überschriftentext hinzu. Gehen wir zu Stil auf Stil über. Die Ausrichtung wird in der Mitte sein, die Typografie wird die Zwischenüberschrift sein Jetzt werde ich einfach diesen Subheader, den Haupt-Header, duplizieren und einen Subheader erstellen Gehen wir zu Estyle on Estyle und ändern es in Text, und dann füge ich den Text wie folgt und Sie finden all diesen Inhalt im Jetzt muss ich das Abonnentenformular hinzufügen . Was wir verwenden können, ist die elementare Form. Ich werde mich hier bilden. Hier haben wir das Formular. Ich werde es einfach so ziehen und ablegen. Gehen wir dann weiter und fügen wir dem Eintrag die oberen Ränder hinzu. Jetzt haben wir Platz. Wir haben es auch hier gemacht, wenn du dich erinnerst, siehst du was? Lassen Sie uns nun sehen, welche Art von Feldern wir benötigen. Auf dem Abonnentenformular benötigen wir eine E-Mail und wir benötigen kein Nachrichtenfeld, wir benötigen ein E-Mail-Feld. Wenn Sie möchten, können Sie den Namen auch behalten, aber ich werde den Namen entfernen und nur die E-Mail und den Button behalten. Auch hier als Formularname werde ich ihn als Abonnement festlegen. Okay. Jetzt auf dem Etikett, ich werde das Etikett verstecken. Dann haben wir die Schaltfläche für den Button-Text, ich werde abonnieren so einstellen. Okay. Jetzt möchte ich das in einer Zeile machen, was bedeutet, dass sich der Textbereich oder das Textfeld und die Schaltfläche in derselben Zeile befinden. Um das zu tun, klicke ich auf das E-Mail-Feld, und hier als Spaltenbreite mache ich es auf 75. Okay, jetzt siehst du, mit dieser Änderung und ich gehe auch zu den Schaltflächen auf den Schaltflächen, die Spaltenbreite wird 25 sein. Okay. Das Textfeld hat einen Wert von 75% und der Button einen Wert von 25%. So können wir das Online-Formular erstellen. Okay, lassen Sie uns dieses Design verbessern. Zuerst gehe ich zu Estyle auf Estyle als Spaltenlücke. Machen wir 15 daraus, und wir müssen uns keine Gedanken über den Zeilenabstand Fügen wir es vorerst als 15 hinzu, und wir müssen uns keine Gedanken über die Bezeichnung des HDML-Felds machen, und dann gehen wir zum Feld Im Feld können wir die Textfarbe hinzufügen, also füge ich die Textfarbe als Text hinzu und lassen Sie uns Typografie als Text hinzufügen, dann ist die Hintergrundfarbe weiß und lassen Sie uns die Rahmenfarbe so etwas grau machen, lassen Sie uns den Randradius auf Null setzen, weil wir den Schaltflächen und anderen Kartendesigns folgen müssen, wir müssen die Einzigartigkeit der Website beibehalten. Dann ist hier alles in Ordnung und auf der Schaltflächenposition werden Mesh und Alignment Center sein Dann die Typografie, machen wir sie als Button- und Randtyp Keine, dann ist die Hintergrundfarbe diese Sekundärfarbe und die Textfarbe ist weiß, und wir brauchen keine Rahmenfarbe, und wir haben keine vorherige oder nächste Schaltfläche, und Board-Radius wird Null sein und der Textabstand wird wie folgt sein 14 14 funktioniert, weil wir das Textfeld und die Höhe der Schaltfläche so anpassen müssen das Textfeld und die Höhe der Schaltfläche so anpassen müssen Dann gehe ich hier zur Hintergrundfarbe über, die Primärfarbe ist, und es wird so aussehen Dann werde ich die Textfarbe als weiße Farbe beibehalten. Und wenn Sie möchten, können wir Animationen wie diese hinzufügen, aber das ist nicht notwendig. Wenn Sie diese Änderungen vornehmen, wenden Sie immer das Design und den Stil an, den Sie hier verwenden, da dadurch die Einzigartigkeit der Website erhalten bleibt Jetzt haben wir das Anmeldeformular und wenn wir wollen, können wir zu Lass uns weitermachen gehen und so können wir rechte Patina 60 hinzufügen und die linke Polsterung 60 ist zu klein, vielleicht ist 90 90 mal 90 gut, vielleicht ist eins bis 212120 mal 120 Jetzt ist es kleiner, außerdem werde ich zum Hauptcontainer gehen Beim Hauptcontainer füge ich die Höhe der Münze als 350, vielleicht 400 hinzu und begründe, dass der Inhalt in der Mitte steht. Dann ein Stil, wir können die Hintergrundfarbe hinzufügen. Fügen wir diese grüne Farbe hinzu und reduzieren wir die Deckkraft der grünen Farbe auf diese Weise und machen wir daraus 600 Ja, 600 wären großartig und als Nächstes gehen wir zum Formular auf Formular Wir müssen die Aktion nach dem Absenden festlegen Hier werde ich das entfernen, was wir tun müssen , ist, dass wir die Einreichung sammeln müssen, was bedeutet, wenn ein Benutzer dieses E-Mail-Formular gesendet hat, was bedeutet, wenn ein Benutzer dieses E-Mail-Formular gesendet hat, wird diese E-Mail-Adresse unsere E-Mail-Erfassung bereut, und ich werde Ihnen innerhalb weniger Minuten zeigen, wie es aussieht , und auch hier, wenn Sie möchten, können wir ein E-Mail-Marketing-Tool wie Mail Jim hinzufügen. Wenn wir diese Option auswählen, können Sie hier sehen, dass wir den Mailchimp-Tab haben und hier können wir die Mailchimp-ABI hinzufügen. Auf diese Weise können Sie Ihr Abonnementformular mit Mailchimp verbinden Mailchimp In dieser Lektion werde ich das nicht tun, also werde ich diesen E-Mail-Chimp entfernen und auch hier haben wir diese E-Mail-Aktion, das heißt, wenn wir hierher gehen, wenn jemand diese E-Mail-Liste abonniert , erhalten wir eine Benachrichtigung, erhalten wir eine Benachrichtigung, und wir müssen die beiden E-Mails einrichten, auch aus E-Mail und so, dass wir wollen, dass die Felder Felder bedeuten , die Wenn Sie auf dieses Plus-Symbol klicken, haben wir hier viele Optionen. Wenn wir diese E-Mail auswählen, können wir auch eine E-Mail an unseren Besucher oder die Person senden , die dieses Formular ausfüllt und auf die Schaltfläche Abonnieren klickt, damit wir ihn darüber informieren können, dass wir ihre E-Mail erhalten haben. Ich werde beide entfernen, und wenn du es hinzufügen möchtest, kannst du es selbst schreiben oder wenn du Probleme beim Ausprobieren hast , lass es mich einfach wissen. Ich werde einen Laser erstellen. Und bei der Übermittlung können wir die Benutzer-IP und den Benutzeragenten des Absenders erfassen. Wenn jemand dieses Formular sendet, können wir die E-Mail auch vom UIP-Benutzeragenten abholen zusätzliche Option werde ich die Standardpromulgation als Browser-Standard beibehalten und gehen zurück zum Formularfeld und zum Formularfeld, hier können wir die Seitenreihenfolge festlegen, also sagen wir, geben Sie Ihre E-Mail-Adresse ein, um sich im Voraus anzumelden, wenn Sie möchten, können Sie einen Standardwert festlegen, und wenn Sie möchten, können Sie In den Lektionen zur Formularerstellung oder zur Gestaltung von Kontaktseiten werden wir uns eingehend mit diesen Bereichen befassen, und im Moment sieht alles gut aus, und jetzt werde ich das veröffentlichen und das Abonnentenformular testen, also klicke ich auf Änderungen in der Vorschau anzeigen und los geht's hier. Ich gebe hier meine E-Mail-Adresse ein, dann klicke ich auf Abonnieren und hier haben wir die Erfolgsmeldung erhalten. Außerdem können wir das Nachrichtendesign ändern. Wenn wir also zum Stil übergehen, haben wir hier die Botschaft und lassen uns die Typografie der Nachricht in Text ändern und die Farbe wird diese Farbe Die Farbe der Fehlermeldung wird wie folgt rot sein. Veröffentlichen Sie sie. Jetzt wird die Farbe der Nachricht anders sein. Also gehe ich zum Dashboard und auf dem Dashboard unter Elementor kannst du den Bereich für die Einreichung sehen Wenn Sie hier klicken, können Sie alle E-Mails oder alle Formulareinsendungen herausfinden E-Mails oder alle , die Sie auf der Website haben Also hier unter dem Abonnementformular haben wir diese E-Mail erhalten. Was wir tun können, ist, das Formular hier auszuwählen. Wenn Sie mehr als ein Formular haben und nur Abonnenten erhalten möchten, können Sie das Formular auswählen und auf Export Filter CSV klicken und die CSV-Datei auch in Zukunft abrufen die CSV-Datei auch in Zukunft Wenn Sie das E-Mail-Marketing-Tool verwenden möchten, können Sie diese CSV-Datei verwenden, um diese E-Mails zu Ihrem E-Mail-Marketing-Tool hinzuzufügen. Jetzt sieht es gut aus. 15. Entwurf der Fußzeile: Jetzt müssen wir den Potter erschaffen. Also lass uns das machen. Um das zu tun, gehe ich zum WordPress-Dashboard. Im Wordpress-Dashboard gehe ich zu Templates Them Builder. Auf ihnen Builder, hier haben wir Footer. Klicken Sie einfach auf dieses Plus-Symbol. Eigentlich glaube ich, dass wir bereits eine Fußzeile erstellt haben. Versuche es zu bearbeiten Hier ist die Fußzeile. Ich werde diese unnötige Fußzeile entfernen, und hier haben wir die Fußzeile und klicken auf Bearbeiten Los geht's. Ich gehe am Set rein. Ich werde diesen Text einfach entfernen und nur die Fußzeile voneinander trennen Okay, jetzt werde ich eine Flexbox wie diese erstellen. Dann machen wir bei der mittleren Körpergröße 300 draus. Ja, dann lassen Sie uns den Rand und die Polsterung anpassen. Dann fügen wir 20 als oberen Rand hinzu. Lassen Sie uns dann zu seinem Stil etwas hinzufügen. Fügen wir einen Hintergrund wie diesen hinzu. Machen wir das auf 350 Pixel. Ja, das ist viel besser. Dann werde ich von hier aus ein Element hinzufügen. Zuerst füge ich das Seitenlogo und auch hier auf dem Container wählen wir die Richtung als horizontale Krähe Und ohne nur das Seitenlogo hinzuzufügen, ich einen Container hinzu, entferne das Zeug, dann füge ich dieses Logo in den Container ein, so wie hier auf dem Container, es wird die vertikale Spalte sein, und ein Zeileneintrag, der den Inhalt rechtfertigt, wird auch Start sein Jetzt benötige ich den Anzeigentext. Füge hier die Überschrift hinzu, tausche diese beiden Absätze aus und es wird tatsächlich Text sein. Dieses Logo funktioniert hier nicht, weil dieser Logotext der Hintergrundfarbe entspricht . Deshalb wird dieser Teil nicht angezeigt, also müssen wir das Logo ändern, bevor wir es ändern. Lassen Sie uns diese Textfarbe ändern. Und was ich tun kann, ist, ohne nur das Seitenlogo hinzuzufügen Ich werde das Seitenlogo entfernen und das Bild hinzufügen. Und einfach so, lass es uns hier hinstellen. Dann muss ich das Bild ändern, es hier machen. Ich füge das Logo hinzu, wähle dieses Bild aus und hier im Ressourcenbereich kannst du sehen, dass es ein weißes Logo ist. Lass es uns so hinzufügen. Dann stellen wir uns dem ALD-Tag. Jetzt haben wir dieses Logo ohne weißen Hintergrund. Es ist gut. Jetzt müssen wir hier einen kleinen Absatz hinzufügen. Ich werde Text wie diesen hinzufügen und jetzt werde ich diesen Container füllen und ich werde es dreimal so machen Dann werde ich diesen Text und das Logo entfernen, und ich werde es auch für hier tun Nett. Jetzt füge ich hier den wichtigen Link hinzu. Also füge ich zuerst die Überschrift hinzu, dann füge ich den Titel als wichtige Links hinzu, und dann machen wir die Ausrichtung mittig. Die Typografie wird sub d sein, aber wir müssen die Größe ändern Machen wir 30 daraus und die Zeilenhöhe wird ebenfalls 35. Und die Textfarbe wird diese Hintergrundfarbe sein. Dann machen wir das als Mittelpunkt, um das zu tun, klicken wir auf den Container und machen den Einzelposten so zentriert wie folgt. Jetzt muss ich ein Menü hinzufügen. Suchmenü hier und ich werde dieses WordPress-Menü hier im mobilen Drop-down-Menü hinzufügen , ich werde es als keins festlegen Eigentlich muss ich es so zu diesem Container hinzufügen und jetzt muss ich ein Menü erstellen oder ich kann das Header-Menü wählen, das Wort pres meno oder das Wort tras-Menüelement auswählen, und das Menü wird zum Hauptmenü, und lassen Sie uns das Layout so vertikal wie folgt gestalten, dann Ausrichtung, Mittelpunkt und Zeiger Gehen wir jetzt zu Estyle. Hier werde ich suchen. Hier werde ich den Menünamen in einen wichtigen Link ändern. Und im Menü Icecream müssen wir dieses Menü ändern, aber lassen Sie uns das tun, nachdem wir den gesamten Inhalt erstellt haben Lassen Sie uns zunächst zu seinem Würfel gehen und hier ändern wir den Text Schaltfläche und die Textfarbe wird wie diese Hintergrundfarbe sein und der Rand über der Farbe wird grün sein und die aktive Farbe wird ebenfalls grün sein Und wir können die vertikale Polsterung ändern, wenn Sie möchten. Und hier füge ich den Abstand zwischen als 15 hinzu. Und hier, lassen Sie uns diese horizontalen und vertikalen Abstände entfernen diese horizontalen und vertikalen Abstände und daraus 30 machen 30 wird Arbeit sein, und es wird so aussehen. Dann kann ich Text kopieren und so einfügen, dann auf den Container klicken, ihn zu einem Einzelpostenzentrum machen, einem Einzelpostenzentrum machen, und hier ändere ich das in einen begründeten Beitrag Dann klicke ich auf Element hinzufügen und füge ein Post-Element hinzu. Ich werde diese Beiträge verfolgen und sie so löschen. Eigentlich sollte es hier so fallen und ich werde den Skin als klassisch salzen und derzeit ist er horizontal, aber wir brauchen das vertikal. Um das zu tun, mache ich diese Spalte einer und die Beitragsseite wird drei sein, nicht minus zwei, drei, und die Bildposition wird so belassen. Und die mittlere Bildauflösung wird funktionieren und hier, was die Bildbreite angeht, machen wir sie auf 30%, so wie hier. Vielleicht machen wir es auf 40. Okay, wir müssen den Titel zeigen und wir müssen den Experten nicht zeigen und wir müssen die Metadaten nicht zeigen Außerdem brauchen wir nicht die Schaltfläche „Mehr lesen und lassen uns ein neues Fenster öffnen Wenn also jemand darauf klickt, wird es in einem neuen Fenster geöffnet Okay. Gehen wir jetzt zu Query on Query, ich wähle Beiträge aus, sie werden nach dem Datum sortiert und die Reihenfolge wird DESC sein Dann klicke ich darauf und ignoriere ItigiPose und Paginierung, wir brauchen keine Paginierung wir brauchen keine Dann gehen wir zu etyLeoeStyle, lassen Sie uns eine Spaltenlücke erstellen. Eigentlich brauchen wir hier keine Spaltenlücke. Lassen Sie uns diese unformatierte Lücke zwei machen und auch diese Spaltenlücke plus zwei. Auf jeden Fall bleibt eine Ausrichtung übrig und hier müssen wir uns keine Gedanken über die Box machen, und wir müssen uns auch keine Gedanken über das Bild machen. Gehen wir zum Inhalt und ändern wir die Farbe des Inhaltstitels wie folgt in Weiß. Außerdem wird die Typografie aus Text wie diesem bestehen. Lassen Sie uns diese Textgröße auf 16 setzen. Jetzt ist es viel besser und auch hier machen wir die Zeilenhöhe 20. In Ordnung, es sieht ziemlich gut aus. Und wenn wir wollen, können wir diesen Skin als Karte machen. Der Hintergrund wird also weiß sein, aber ich werde ihn klassisch beibehalten. Okay. Jetzt klicke ich auf diesen Hauptcontainer und gehen wir zu Adlace. Fügen wir den unteren Teil als 220 hinzu, so wie hier Und lassen Sie uns auch diese Bildgröße reduzieren , damit wir eine gute Ausrichtung haben Lass uns 30 draus machen. Okay, jetzt haben wir den oberen Teil der Fußzeile fertiggestellt. Hier müssen wir den Copyright-Bereich hinzufügen . Also lass uns das machen. Dazu klicke ich auf das Klassensymbol und füge ein neues Plex-Feld wie dieses Dann gehe ich zu „Alle Ränder und Abstände vergrößern und füge einen Stil hinzu. Lass uns die Hintergrundfarbe als diese Textfarbe hinzufügen Dann klicke ich hier und füge die Überschrift hinzu , lass uns ziehen und ziehen und machen wir es als H drei. Und hier werde ich hier klicken und muss das dynamische Datumstag auswählen. Also hier haben wir das aktuelle Datum und die aktuelle Uhrzeit. Dann klicke ich auf dieses G-Symbol und das Datumsformat ist benutzerdefiniert, und hier wollen wir nur das E sehen. Also behalte ich das Y und entferne sie alle, dann können wir im Voraus den Vorher-Nachher-Text hinzufügen. Vorher füge ich den Sinus hinzu und danach füge ich den Wert des Wohlstands hinzu oder setze ihn wieder Gehen wir jetzt im E-Stil zu Estyle, stellen die Ausrichtung in die Mitte und die Typografie Dann wird die Farbe die Hintergrundfarbe sein. Lassen Sie uns diese Typografie jetzt auf 60 stellen, 18 werden pro sein und dann klicke ich auf den Container auf Container Lassen Sie uns die obere Polsterung auf 15 setzen und auch die untere Polsterung auf 15. Los geht's Lassen Sie uns diese Typografie in Text umwandeln und hier, machen wir es mittelgroß, 18 reicht aus. Dann klicke ich auf Veröffentlichen und wenn wir jetzt das Design überprüfen, können wir Beat Design Footer sehen Wenn wir wollen, können wir auch den Inhalt von hier entfernen und müssen außerdem ein neues Menü für die Importlinks erstellen Lass uns das jetzt machen und dazu gehe ich zu Aussehen und Menüs. In den Menüs klicke ich auf Neues Menü erstellen. Der Menüname wird wichtig sein. Links und klicken Sie auf Erstellen. Jetzt füge ich hier die Startseite als Seite, die Blog-Seite und die Kontaktseite hinzu und klicke hier auf At Tomenu, ich ändere das auf Home und klicke auf Menü speichern Derzeit haben wir nur diese vier Artikel, aber in Zukunft müssen wir weitere hinzufügen Ich gehe zurück zu unserem Fußzeilen-Editor und klicke hier Dann ändere ich das Menü „Zu wichtigen Links “ wie folgt. Für wichtige Links müssen wir auch Seiten mit Datenschutzrichtlinien und Nutzungsbedingungen erstellen Seiten mit Datenschutzrichtlinien und Nutzungsbedingungen Ich werde dir auch zeigen, wie man sie erstellt, und dann müssen wir auch diese Links hinzufügen. Lass es uns veröffentlichen. Okay. Jetzt müssen wir im nächsten Schritt die Handyprobleme beheben. Wir müssen die mobilen Probleme dieser Homepage beheben. Dann können wir zu Designer Aus, dem Blog und der Kontaktseite gehen dem Blog und der Kontaktseite und das machen wir in den nächsten Videos. 16. Korrigieren der Reaktionsfähigkeit auf Mobilgeräten: Gehen Sie voran, lassen Sie uns Probleme mit der Reaktionsfähigkeit beheben. Klicken Sie auf Dieses Element bearbeiten , um diese Hauptseite zu bearbeiten. Dann lass uns zum Tablet Atriov gehen. Ich sehe so aus. Wir haben das Menü und die Kopfzeile bereits auseinandergenommen. Jetzt müssen wir das Problem mit diesem Helden-Slider beheben . Wenn wir zur mobilen Ansicht gehen, wird es so aussehen. Was ich tun kann, ist auf Vorlage bearbeiten zu klicken , um den Heldenbereich zu bearbeiten. Dann bin ich im Heldenbereich. Wenn Sie hier nachschauen, können Sie die Vorlage mit vier Slidern sehen, und hier ist der Container. Gehen wir zum Hauptcontainer und zum Hauptcontainer. Ich füge Mnhight als hundert hinzu. Ich meine, der Heldenbereich wird tatsächlich in Mindesthöhe angezeigt, ich werde ihn etwa 80 hinzufügen, also wird er 80% der Tablet-Ansicht Dann werde ich das auf dem Container mit 100% machen. Da ich dafür die Schriftgröße ändern muss, wähle ich den Posentitel aus und gehe zu Estyle auf Estyle. Hier klicke ich auf dieses Symbol dann auf Manage Global Font, ein Von hier aus können wir dann sehen , dass wir uns auf dem mobilen Portriot befinden. Also werde ich auf Mobile Potriot diese Größe auf 46 ändern. Dann wird auch die Zeilenhöhe so sein, dass wir sie auf 1,2 setzen. Nein. Lass uns eins daraus machen. Und auch auf dem Subeter werde ich es so machen, dass 41.21 zeilenhoch sein wird Auch beim Text werde ich die Schriftgröße auf 18 ändern , und für die Schaltfläche lassen wir sie wie folgt auf 18 setzen Dann klicke ich auf Änderungen speichern und dann auf Zurück zum Editor. Und los geht's. Jetzt haben wir kleinere Schriftarten und auf der Mobile Hero-Vorlage zwei Elemente angezeigt, aber ich benötige nur einen Artikel. Lass uns versuchen, das Problem zu beheben. Eigentlich müssen wir diese Änderung an der Loop-Karussell-Einstellung vornehmen , also klicke ich auf Speichern und speichern und hier kann ich den Container innerhalb des Containers auswählen Hier haben wir Loop-Karussell auf Loop-Karussell . Hier haben wir zwei Slide-On-Displays auf dem Tablet, ich mache eins daraus Auf diese Weise wird es so angezeigt. Okay. Jetzt sieht es ziemlich gut aus. Lass uns auf Vorlage bearbeiten klicken und dann auf Speichern klicken und hier, die Zwischengröße ist etwas größer. Was wir also tun können, ist die Lücke zu ändern. Wenn wir hier zur Seiteneinstellung auf der Site gehen, können wir die Lücke tatsächlich hier zur Seiteneinstellung auf der Site gehen, erkennen. Wir können diese Lücke also auf 15 oder zehn ändern. Ja, zehn werden Werke sein. Auf dem Tablet werden es also zehn sein, und für den Inhalt können wir, wenn wir wollen, Null hinzufügen Dann gehen wir zur mobilen Ansicht in der mobilen Ansicht, es sieht so aus und Gap Ten wird auch dort funktionieren Jetzt werde ich schnell eine Änderung vornehmen und ich werde hierher zurückkehren, wenn ich dann zu globalen Schriftarten gehe und hier ist die Header-Schriftgröße auf Mobilgeräten Also ändern wir es auf 36 und Inet wird eins sein. Eigentlich ist der Standard-Lint eins, es ist also nicht nötig, ihn zu ändern. Und hier machen wir das auf 32, und die Textgröße wird 18 sein und die Zeilenhöhe wird 1,2 sein. Lass uns 1.4 daraus machen. Damit es auch für die Tasten leicht lesbar ist, machen wir es auf 18. Und jetzt klicken Sie auf Conceive Changes zurück zu Wenn wir also globale Schriften verwenden, müssen wir sie nicht manuell anpassen Wenn wir es an der globalen Schriftart anpassen, wirkt sich das auf alle Elemente Jetzt sieht unser Header gut aus. Gehen wir jetzt zu unserem neuesten Insider-Bereich und reparieren wir zuerst die Tablet-Version. Bei der Tablet-Version müssen wir also die linke und rechte Polsterung hinzufügen Fügen wir die rechte Polsterung als zehn hinzu und auch die linke Polsterung als zehn oder vielleicht 15 15 15 15 ist die Größe, die wir haben müssen, äh, ja, es Okay, und es sieht sehr gut aus. Dann gehen wir zur mobilen Ansicht und sehen, was wir tun können. In der mobilen Ansicht müssen wir nichts tun. Es wird entsprechend angepasst. Wenn wir wollen, können wir die Zwischengröße ändern, aber ich werde die Standardgröße 15 beibehalten. Dann haben wir diesen Abschnitt, also gehe ich zur Tablet-Version, und wie wir es zuvor getan haben, müssen wir rechts auf 15 ändern , auch links auf 15, und es wird sich auch anpassen, es wird sich auf dem Handy anpassen. Dann müssen wir hier den gleichen Bereich für zwei Abonnenten einrichten, wobei Vorschuss hier 15 sein wird und der linke Teil 15 sein wird. Wenn Sie der Meinung sind, dass dieser Raum zu groß ist, können Sie ihn entfernen, aber ich denke, dieser Raum ist besser. Jetzt ist unsere Homepage vollständig responsiv und hier haben wir ein Problem, klicken Sie auf das Abonnentenformular und wir fügen die rechte und linke Polsterung hinzu, also mache ich es auf Null und es wird so aussehen: Okay, jetzt werde ich es veröffentlichen, dann müssen wir die Fußzeile bearbeiten, auf Fußzeile und auf Fußzeile klicken, lass uns zur Tablet-Version gehen Und hier müssen wir links und rechts hinzufügen. Oben werden 20 sein, werden 15 sein, unten werden 20 sein. Und dann hier der Grund, wir müssen es zu einer Spalte machen und es wird so aussehen. Dann ist auf dem Handy der obere Teil okay, ein wichtiger Link ist okay. Aus dem Grund sieht es so aus. Und wenn wir das Bild oben platzieren, können wir den Text so sehen und das Problem ist, dass er sich auf den gesamten Abschnitt auswirkt, also mache ich ihn wie zuvor links. In einer solchen Situation können wir also diesen Abschnitt duplizieren, und dann werde ich den obigen Abschnitt in der mobilen Ansicht ausblenden , sodass er nur für Desktop und Tablet verfügbar ist und nicht für die mobile Ansicht. Also gehe ich zu Advance und hier Responsive auf Responsive, wir können im mobilen Portal auf Ausblenden klicken. Und wenn wir auf Mobilgeräte umsteigen, gehen wir runter. Es wird nicht angezeigt. Und dann wollen wir das nicht auf der Tab-Lat- und Desktop-Version anzeigen . Um das zu tun, klicke ich hier und gehe zu Advance and Responsive. Hier kann ich es auf der Registerkarte und Hy auf dem Desktop verstecken . Es wird also auf diesen Bildschirmen ausgeblendet und nur in der mobilen Version verfügbar sein. Jetzt kann ich hier auf Inhalt klicken und das Bild an die erste Stelle setzen. Unser Posentitel wird also auch auf dem Bild so angezeigt , dass wir uns das Bild können und wir können den Abstand so ändern, machen können und wir können den Abstand so ändern, dass zwei, vielleicht drei funktionieren. Auf dem Desktop wird das jetzt nicht angezeigt. Ich werde das Bild mit der linken Seite zeigen, dieses Bild, und auf dem Handy wird es angezeigt. Jetzt klicke ich auf Veröffentlichen und lass es uns im echten Design überprüfen. Hier klicke ich mit der rechten Maustaste und klicke auf Inspect. Dann klicke ich hier auf diese Werkzeugleiste zum Umschalten des Geräts. Und hier haben wir jetzt die mobile Version, und wenn ich nach unten scrolle, ist hier das Ergebnis, das angezeigt Und auf der Desktop-Version ist hier das Ergebnis. Ich hoffe du hast die Idee. Okay, jetzt haben wir den Header erfolgreich entworfen, aber auch hier müssen wir Höhe und Left Readiness 15 hinzufügen und ihn schön veröffentlichen. Jetzt haben wir hier das Design. 17. Gestalten der Info-Seite: Wir müssen die ATS-Seite entwerfen. Lass uns hier draufklicken. Derzeit haben wir die leere Seite. Was ich mache, ist auf Seite bearbeiten zu klicken. Dann klicke ich hier auf Mit Elemento bearbeiten. Jetzt bin ich im Elemento-Editor, also kann ich einfach hier klicken und auf Kontextblöcke klicken und dann auf die Richtungsspalte klicken, um einen neuen Container zu erstellen . Lassen Margin und Padina auf Null setzen, hier gibt es bei Margin 60 so und hier müssen wir die Details hinzufügen und zuerst füge ich die Überschrift hinzu, den Überschriftentext, er wird mittig sein und der Typograph wird Kopfzeile mittig sein und der Typograph und ich werde es auch duplizieren und es als Absatz und an diesem Typografie-Text machen Absatz und an diesem Typografie-Text Was ich jetzt tun muss, ist Inhalte zu generieren. Was ich tun kann, ist, die Hilfe von KI zu bekommen. Okay, hier bin ich im KI-Chat, mit dem ich Blog-Beiträge generiert habe , und hier werde ich sagen, gib mir Informationen über die Überschrift und den Inhalt der Seite, du brauchst eine Kopfzeile, eine Unterüberschrift und eine Beschreibung über uns. In deinem Fall musst du es selbst schreiben oder die Hilfe von KI entsprechend deiner Nische verwenden und es hat etwas generiert, das ich nicht will, also muss ich dieser KI sagen, dass es für die Block-Website ist, sie beinhaltet alle Lass uns hochgehen und unsere Kategorien überprüfen. Kopiere einfach die Kategorie. Sie umfasst alle drei Kategorien, drei Kategorien und weitere drei Kategorien und gibt mir Informationen zum Inhalt dieser Block-Website. Und mal sehen, was passieren wird. Okay, das ist gut. Lassen Sie uns diesen Teil kopieren, und hier werde ich ihn einfach so hinzufügen und in Ihrem Fall nicht dasselbe tun. Sie müssen es entsprechend Ihrer Nische machen und entsprechend Ihrer Website ist es gebunden. Dann können wir hier hinzufügen, was wir abdecken. Lassen Sie uns das nach dieser Sitzung hinzufügen. Ich kann also hier klicken, auf das Kontextfeld klicken und die Richtung als Spalte angeben. Gehen Sie dann zu Weiter auf Advance. Fügen wir einen Rand hinzu, um eins zu übergeben , 220, und darin werde ich einen weiteren Container erstellen und alle Ränder und Abstände entfernen. Beim Layout sage ich, dass die Richtung horizontal ist sage ich, dass die Richtung und der Y-Inhalt hier sein wird, und dann werde ich hier klicken und das Bild hinzufügen Dann werde ich genau hier eine Überschrift hinzufügen. Wussten Sie, dass es sich bei diesem Container um einen direkten horizontalen Container handelt? Deshalb wurde diese Überschrift so hinzugefügt und los geht's hier. Ich werde einfach den Überschriftentext hierher kopieren und den Überschriftentext so hinzufügen. Eigentlich können wir diesen Container benutzen. Ich werde das Bild und die Überschrift zu diesem Hauptcontainer hinzufügen und dann lassen wir diesen Hauptcontainer horizontal ausrichten. Dann füge ich diese Überschrift hinzu, nur diese Überschrift innerhalb des Containers und dieser Container, der Untercontainer wird wie folgt spaltenvertikal sein Auf diese Weise müssen wir nicht viele Elemente hinzufügen, dann gehen wir zu STIs und STIs machen das als Unterheader wie diesen Dann werde ich das duplizieren und das als Inhalt H drei machen Außerdem wird dieser hier H vier sein und hier bei der Person. Tatsächlich können wir das Grid hinzufügen, das wir bereits erstellt haben. Ich werde dieses entfernen und gehen wir zur Homepage und auf der Homepage werde ich auf Mit Elementor bearbeiten klicken Siehst du, ich habe diese Website nicht entworfen oder einen Plan erstellt Ich wurde einfach in Echtzeit erschaffen. Weißt du, ich kopiere einfach dieses Raster, kopiere es einfach und lass uns hierher kommen dann das Raster so bewegen. Dann zum Raster, eigentlich brauchen wir das Raster hier nicht, aber lassen Sie uns das Rasterraster rastern, die Spalten werden eins sein und die Zeilen werden eins, zwei, drei, vier Zeilen sein. Oh, so. Und hier, lassen Sie uns das Bild auf 40% vergrößern. Eigentlich müssen wir weitermachen. Lassen Sie uns die Bildgröße hier auf Hundert setzen und im Voraus wird die Breite achtern sein, was 40% bedeutet So wie das. Nett. Der tatsächliche Bereich von 50, 60, 60% wird funktionieren, und dieser Wert liegt bei 40 pro. Nein, dieser sollte 60% sein und dieses Bild sollte 40% sein, so wie hier. Jetzt muss ich hier ein Bild hinzufügen. Dieses Bild sollte ein vertikales Bild sein. Wenn ich das Bild erstelle, sollte ich das berücksichtigen. Ich werde das Bild erstellen. Komm wieder her. Ich habe gerade das Bild erstellt, also erstelle ein Bild. Ich verwende die CNMAouse-Website wie fxs.com und benutze Figma, um es zu schneiden und die Größe zu Hier haben wir das Bild, das er verwendet hat, ist 700 und die Breite ist 600 Fügen wir es hier hinzu und lassen Sie uns sehen, was wir tun müssen. Ich lasse es einfach so fallen und kopiere hier das ol-Tag, hinter dem ol-Tag, und hier wird es so aussehen und es wird hier nicht vollständig behandelt. Was wir tun können, ist, die Bildhöhe zu erhöhen. Ich werde zu Canva gehen und es machen und wir werden zurückkommen. Entwerfen Sie einfach das Bild, ich werde hier und bei diesem Imageangriff hingehen und mal sehen, dass es immer noch nicht perfekt zu unserem Design passt Also was ich machen kann ist, dass ich das als Aligned Center einrichten kann, oder ich kann diesen Custom mit Live Make erhöhen, es ist 50 wert, 50 werden es wert sein. Oder Sie können die Breite und Höhe dieses Abschnitts herausfinden . Um das zu tun, können Sie auf die Vorschau der Änderungen klicken. Und hier geht es weiter. Ich werde mit der rechten Maustaste auf Inspec klicken und dann hier klicken. Dann können Sie hier die Bildhöhe und das Bild mit Höhe sehen die Bildhöhe und das Bild mit Höhe Sie können dies zusammen mit der Höhe verwenden, um das Bild zu erstellen. Gehen wir nun zum nächsten Abschnitt über und gehen wir hierher. Sehen wir uns den nächsten Abschnitt an. Im nächsten Abschnitt erfahren Sie, warum wir das tun und unserer Community beitreten. Lassen Sie uns diese beiden Abschnitte erstellen. Ich kann diesen Abschnitt einfach duplizieren und einfügen, ja, wir müssen ihn darunter einfügen. Den Abschnitt, den wir behandeln, können wir einfach so machen und hier diesen Marsch in den oberen Durchgängen eins, zwei, 20 und lassen Sie uns diesen Text dahingehend ändern, warum wir das so machen, und dann können wir diesen Abschnitt hinzufügen. Jetzt müssen wir unseren Community-Bereich hinzufügen. Was ich tun kann, ist, diesen Text zu kopieren, einfach diesen Text zu duplizieren und ihn darunter zu platzieren, dann hier, dann diesen Abschnitt zu kopieren und diesen Abschnitt zu verschieben und ihn so unten einzufügen und so hinzuzufügen Dann muss ich hier etwas hinzufügen, dieses Formular hinzufügen, also werde ich es einfach kopieren und so einfügen Hier werde ich auf diese Überschrift klicken und sie so machen , dass H drei das Gleiche macht, um H drei zu sein. Und wenn wir das als Mitte hinzufügen, nützt das offenbar nicht viel. Was wir tun können, ist , hier zu klicken und daraus eine linke Zeile wie diese zu machen. Außerdem müssen wir hier und in der Abonnement-Sitzung das Gleiche tun hier und in der Abonnement-Sitzung das Lasst uns links abbiegen und Patins wie folgt schreiben Jetzt möchte ich ein Bild wie dieses zu dieser Seite hinzufügen , um das zu tun, wir müssen diese Artikel in verschiedene Behälter einwickeln Lass uns hier klicken und einen Container wie diesen und all das Zeug hier hinzufügen. Ich werde einfach alle Artikel in diesem Container so hinzufügen. Los geht's. Lassen Sie uns nun ein Leerzeichen zwischen diesen beiden Abschnitten haben. Wir können hier ganz einfach einen Margenverlust hinzufügen oder wir können zwei verschiedene Container verwenden. Ich werde hier einfach einen oberen Rand hinzufügen. Machen wir es auf 30 oder vielleicht 60, 60 werden funktionieren. Und auf andere Weise können wir hier klicken und einen Container wie diesen hinzufügen und wieder, diese Sachen entfernen und in diesen Container legen wir diesen und diesen. Dann werde ich diesen Container duplizieren und diesen und diesen entfernen , dann werde ich diesen und diesen in diesen Container legen . Jetzt müssen wir eigentlich auch diesen hinzufügen. Das ist ein bisschen aufwändig, aber füge einfach den oberen Rand hinzu, aber ich möchte dir das jetzt nur auf diesem Hauptcontainer zeigen, ich kann zum Layout gehen und den Zeilenabstand wie folgt hinzufügen. Dann möchte ich hier ein Bild hinzufügen. Um das zu tun, werde ich auf den Hauptcontainer klicken und seine Richtung auf horizontale Zeile ändern und das einfach duplizieren. Nein, lass uns einfach dieses Bild kopieren und einfach hier klicken und das Bild so einfügen. Es wird nur dem Design entsprechen und hier klicken. Machen wir daraus 60. Dann klicken Sie hier und richten Sie die Elemente in der Mitte aus. Außerdem müssen wir hier das Gleiche tun. Jetzt kann ich dieses Bild ändern. Hier ist das neu erstellte Bild und ich klicke hier, gehe dann zu Inhalt und lade das Bild hoch. Außerdem müssen wir den ALT-Text hinzufügen. Wenn Sie den ALT-Text hinzufügen, fügen Sie immer aussagekräftigen Text und O-freundliche Keywords wie How to be Wealthy oder ähnliches hinzu. Und los geht's, wir entwerfen einfach die A-Seite. Wenn wir wollen, können wir dieser Seite auch einen weiteren Abschnitt hinzufügen, aber lassen Sie uns das minimalistisch halten Jetzt weiß auf veröffentlicht, und in der nächsten Lektion müssen wir das Problem beheben, das auf Mobilgeräten reagiert 18. Korrigieren der mobilen Reaktionsfähigkeit auf der Info-Seite: Okay, jetzt müssen wir die Probleme mit der Reaktionsfähigkeit auf Mobilgeräten beheben. Bevor wir das tun, haben wir im letzten Video, in dem wir uns mit der mobilen Reaktionsfähigkeit befasst haben, diese Lücke auf zehn erhöht, aber wir wollen das nur in Tablet- und Mobilversionen tun, aber die Desktop-Version hat sich ebenfalls geändert Gehen wir hier zur Seiteneinstellung und zum Layout, machen wir das als zwei y, denn wenn wir zehn daraus machen, wird es immer zehn sein und wir klicken auf Änderungen, klicken wir auf Zurück zum Editor Okay, perfekt Gehen wir nun zur Tablet-Portrait-Version und ändern wir sie. Fügen wir das Hinzufügen von rechts als 15 und links als 50 hinzu. Lassen Sie uns das auch hier ändern. Machen wir es zur Richtungsspalte und klicken dann auf das Bild und gehen weiter und machen es zu hundert oder wir können es einfach voll machen und wir müssen das auch hier tun. Es ist tatsächlich auf dem Layout, mach es zu 100% so. Dann können wir die rechten Muster 15, die linke Patinustie neun hinzufügen die rechten Muster 15, die linke Patinustie Jetzt können wir auch hier dasselbe tun, um die Spalte vertikal zu machen und dann mit dem rechten Abstand als 15 und dem linken Muster als 50 voranzukommen rechten Abstand als 15 und dem linken Muster als 50 Dann klicken wir hier auf Weiter. Mach das voll. In Ordnung. Jetzt sieht es ziemlich gut aus. Dann gehen wir zu Mobile Patriot auf Mobile Port Riot. Es scheint, dass alles sehr gut aussieht und wir müssen nichts tun Okay, jetzt klicken Sie auf Veröffentlichen, denn so gestalten wir auch einfach die A-Seite. Jetzt müssen wir die Blog-Seite einrichten und das machen wir in der nächsten Lektion. 19. Blogseite einrichten: Okay, jetzt richten wir die Blockseite dafür Wir können Element oder Them Builder verwenden. Unter Vorlagen haben wir hier den Team Builder. Einfach drauf klicken und jetzt hier, darauf bei Neu klicken. Wenn Sie darauf klicken, können wir hier jeden Bereich unserer Website sehen , den wir bearbeiten können. Wir müssen sie alle bearbeiten. Lassen Sie uns zunächst den Blockbereich bearbeiten. Hier haben wir ein Archiv. Wenn ich auf dieses Info-Symbol klicke, können wir hier die Beschreibung haben. Also hier können wir die Blockliste erstellen. Machen wir das, klicken Sie auf dieses Plus-Symbol und hier können wir die vorgefertigten Vorlagen abrufen. Wenn du möchtest, kannst du eine davon verwenden, aber ich schließe sie einfach und lass uns sie von Grund auf neu erstellen. Ich klicke auf dieses Plus-Symbol, hier Tex Box, dann mache ich Null als Wert und für den oberen Rand machen wir 60 für Elemente, hier haben wir den Archivtitel. Ich füge es einfach hinzu und das wird sich automatisch an die Seite anpassen. Hier werde ich es in die Mitte stellen und die Typografie in eine Kopfzeile wie folgt ändern Dann klicke ich wieder auf Element hinzufügen und hier haben wir Arch Force, einfach per Drag-and-Drop Erinnerst du dich an das letzte Mal, als wir dasselbe auf der Homepage gemacht haben und hier können wir dasselbe tun? Jetzt müssen wir hier zuerst den Stil anpassen, lassen Sie uns den Skin als Teil wie diesen auswählen, dann wird die Spalte drei sein und wir sollten das Bild zeigen. Lassen Sie uns die Bildauflösung auf mittelgroß einstellen, damit wir ein klares Bild bekommen . Wir müssen den Titelausschnitt zeigen und außer der Länge, machen wir daraus zwei Wenn Sie möchten, können Sie dann das Datum und die Befehle anzeigen. In diesem Fall zeige ich die Daten oder Befehle nicht an, also lösche ich sie einfach so und hier können wir die Schaltfläche „Mehr lesen“ beibehalten, und hier haben wir den Stapel. Dann lass uns die Paginierung machen. Wir können die Paginierung so einstellen oder wir können diesen Infinity-Escod verwenden, was bedeutet, dass beim Scrollen der Website die restlichen Bilder geladen Auch hier können wir keine Post-Nachricht mehr hinzufügen. Ich werde die Standardnachricht beibehalten. Wenn Sie eine benutzerdefinierte Nachricht wünschen, können Sie diese verwenden. Okay. Gehen wir jetzt zu eTypeTap auf ITyleTab, lassen Sie die Spaltenlücke durchgehen und eine Lücke wird ebenfalls 20 Ausrichtung, Mittelpunkt, Ausrichtung und Karte, wir haben den Arbeitsschatten und ich werde dort nicht viel ändern Auch beim Inhalt muss ich den Autor ich Hier, lass uns diesen Atison schwingen , weil wir ihn nicht brauchen. Gehen wir jetzt zum Stil auf der Karte über. Ich werde die Standarddaten für hier behalten. Gehen wir zum Bild und ändern wir den Bildabstand. Machen wir es wie C und die Hintergrundfarbe des Badges wird diese Farbe haben und die Textfarbe wird diese Farbe haben. Nun zum Inhalt, die Titelfarbe wird die Primärfarbe sein und die Schriftfarbe wird, lassen Sie uns diese Unterüberschrift erstellen, dann müssen wir sie auf 21 ändern Hier werden es 28 sein, wir können es so semiv machen Nun zu Meta müssen wir uns keine Gedanken über Meta machen, weil wir keine hinzugefügt Lassen Sie uns dann beim Auszug die Textfarbe hinzufügen. Auch die Typografie wird Text wie dieser sein und wir können auch den Abstand ändern und jetzt müssen wir uns um die Schaltfläche „Mehr lesen“ kümmern Lass es uns grün machen. Der Tippfehler wird der Button sein, aber wir müssen ihn verkleinern Lass uns 16 draus machen. Sie können dieses Design überprüfen und demselben Entwurfsmuster folgen, da wir die Einzigartigkeit der Seite auf jeder Seite beibehalten Einzigartigkeit der Seite auf jeder Seite Wir haben keine Seitennummerierung und hier geben wir dieser Nothing Pound-Nachricht die Grundfarbe und es ist ein bisschen wie eine Unterüberschrift Okay. Jetzt alles gut. Es ist jedoch keine gute Idee, nur diesen Archivtext hinzuzufügen. Lassen Sie uns mithilfe von KI eine Überschrift und einen Untertext erstellen. Jetzt bin ich in unserem JG BT-Chat. Hier werde ich sagen, gib mir Header und Header oder Blog-Seite Hier, lass uns dieses Sub kopieren. Eigentlich werde ich dieses kopieren und das ändern. Ich werde das einfach entfernen. Ich muss es entfernen. Dann klicken Sie hier und fügen Sie eine Überschrift wie diese hinzu. Stylen Sie dann den Men-Header. Eigentlich sollten wir es so machen, dass die Überschrift zwei B ist. Hier muss ich das in zwei Zeilen zeigen Was ich tun kann, ist, ein RO-Break-Tag wie dieses hinzuzufügen. Dann werde ich das duplizieren, dann komm her und ändere Typografie Text und lass uns diesen Text hier so hinzufügen Okay. Jetzt muss ich hier etwas Abstand hinzufügen, damit ich den unteren Rand einfach wie folgt als 20 hinzufügen kann. Nett. Jetzt sieht es gut aus. Jetzt kann ich auf Veröffentlichen und jetzt auf Bedingung hinzufügen klicken. Bedingung hinzufügen kann ich Earl-Archive einbeziehen, aber das ist nicht das, was wir brauchen. Wir müssen ein Post-Archiv hinzufügen. Wir müssen nur Beiträge anzeigen, auf Beitragsarchiv und dann auf Speichern und Schließen klicken. Wie greife ich nun auf diese Seite zu? Eigentlich werde ich zum Set gehen und das auf Host Give umstellen. Ich denke, das Wort ist richtig, aber ich weiß es nicht. Nun, wenn wir das so betrachten, wird es sich zeigen, aber das ist nicht das, was wir brauchen. Wenn wir auf diesen Block klicken oder wenn wir zu der Blog-Seite gehen, die wir bereits erstellt haben, muss diese Blockliste angezeigt werden. Dazu muss ich zum WordPress-Dashboard gehen. Gehen wir zum WordPress-Dashboard. Und im Wordpress-Dashboard gehe ich hier zu Einstellungen und Untersetzen, gehe zu Lesen Stellen Sie beim Lesen den Blog für die Beitragsseiten ein und klicken Sie dann auf Änderungen speichern Wenn ich es jetzt hier überprüfe, sah es so aus. Siehst du, es sieht ziemlich gut aus und es wird automatisch der nächste Beitrag oder der nächste Blogbeitrag angezeigt. Wenn ich das überprüfe, ist der Platz hier wirklich klein. Wir müssen etwas Abstand zwischen diesen beiden Abschnitten hinzufügen. Um das zu tun, gehe ich zur Fußzeile. Klicken Sie auf Dann klicken Sie hier und gehen wir zu Advance. Fügen wir bei Advance den oberen Rand als 1220 hinzu. Auf diese Weise werden wir einen besseren Raum haben. Vielleicht fügen wir es als 60 hinzu und klicken auf Veröffentlichen. Und jetzt, wenn ich es in den Schildern auf der Startseite überprüfe, können wir hier den Abstand sehen und auch auf der Log-Seite können wir es hier deutlich sehen. Okay, jetzt sieht es ziemlich gut aus und das ist es nicht, wir müssen mehr Sachen machen. Als Beispiel haben wir hier auf der Homepage Kategorien. Hier sind unsere Kategorien. Hier ist die Kategorie. Wenn ich auf Kategorie klicke, wird sie so angezeigt und das sieht überhaupt nicht gut aus. Was wir tun müssen, ist, zum Teambuilder unter dem Builder zu gehen , auf Forced Gave zu klicken, auf Forced Gave zu klicken und hier werde ich mit der rechten Maustaste hier klicken und auf die OpenNW-Fensterturm-Postkarte Dann kann ich auf Neu klicken und das ignorieren Was wir tun werden, ist, wenn wir zu einer Kategorieseite wie dieser oder einer Suchseite als Beispiel gehen , suchen wir nach ABC. Eigentlich gibt es keinen ABC-Beitrag, suchen wir nach Steuern. Wenn wir die Suchscheinwerfersteuer erheben, wird sie so angezeigt, aber das ist nicht das, was wir wollen Wir müssen jede Archi-Seite für diese Abschnitte erstellen. Lass uns das machen. Das zu tun ist wirklich einfach. Zunächst werde ich die Probleme mit der Reaktionsfähigkeit in diesem Blog-Archiv beheben Probleme mit der Reaktionsfähigkeit in diesem Blog-Archiv Danach können wir das einfach kopieren. Um das zu tun, werde ich hier klicken und hier müssen wir das Pad in links Paden 15, links Padding 15 hinzufügen das Pad in links Paden 15, links Padding 15 Außerdem ist dieser Text zu groß, um ihn zu korrigieren Gehen Sie zum Stil auf Inhalt Lass mich auf die Homepage gehen und es mir auch ansehen. Ich denke, auf der Homepage haben wir es behoben, aber wir müssen es überprüfen und auf der Homepage sicherstellen, wir es richtig repariert haben. Schauen wir uns den Inhalt an, die Typografie wurde auf 21 geändert. Wir haben es geschafft. Lassen Sie uns hier dasselbe tun. Hier werden Inhalt und Titel 21 sein, so wie hier auch 2.1 0.1 wird funktionieren und der Rest des Textes ist okay. Actual 21 ist zu klein, oder? Nein, es ist okay, es geht aufs Handy und auf dem Handy sieht es ziemlich gut aus. Hier gibt es nichts zu tun. Wir sind startklar. Was wir jetzt tun können, ist, dass wir zu Recht kopieren können. Dann können wir auf eine neue Archivseite gehen und uns dem stellen. Dann müssen wir hier den Archivtitel hinzufügen, nicht den benutzerdefinierten Titel, wir müssen diesen Archivtitel so hinzufügen. Lass uns diesen löschen, auch diesen löschen und lass es uns noch einmal machen. Ziehen Sie den Archivtitel einfach per Drag-and-Drop wie folgt. Dann macht man es zentriert und fügt einen Subheader hinzu, dann sehen wir uns hier die Größe der Einladungs-Pins Es ist 20. Es gibt eine Marge, die unter 20 liegt. Jetzt kann ich das veröffentlichen. Wenn ich das veröffentliche, muss ich die Bedingung hinzufügen, auf Bedingung hinzufügen klicken und dann können wir das hier einstellen. Wenn ich alle Archive einstelle, wird es auf alle Archivseiten gesetzt. Was ich tun möchte, ist, dass ich alle Archive hinzufügen und eine weitere Bedingung hinzufügen möchte. Dann muss ich in dieser Bedingung das Post-Archiv ausschließen, muss ich in dieser Bedingung das Post-Archiv ausschließen weil wir dafür eine andere Archivseite haben und wir auch das Suchergebnis Archiv ausschließen müssen und dann werde ich auf Speichern und schließen klicken. Okay. Also hier, wenn wir das bei der Suche Archiv so überprüfen, wird es nicht funktionieren , weil wir den Suchtyp Archiv p ausschließen . Ich gehe auf die Homepage und lass uns zu unserer Kategorie gehen. In dieser Kategorie wird es so angezeigt und siehe da. Jetzt möchte ich das Suchfeld hinzufügen. Wenn wir das Suchfeld zur Blockseite hinzufügen, können wir den Beitrag durchsuchen. Lass uns das machen. Um das zu tun, werde ich sie zuerst alle entfernen. Lass uns das veröffentlichen und lass uns die Seite so aufräumen und zum Dashboard gehen. Im Dashboard muss ich zum Theme Builder gehen. Bei Them Builder müssen wir wieder zum Archiv gehen. Eigentlich haben wir vergessen, diese Archivseite umzubenennen und hier setzen wir den Namen auf Oh mein Gott und veröffentlichen ihn. Okay, jetzt gehen wir zurück. 20. Hinzufügen einer Suchleiste: Okay, hier auf der Beitragsseite müssen wir das Suchfeld hinzufügen oder wir müssen es hinzufügen. Lass uns auf Bearbeiten klicken und hier füge ich die Suche hinzu. Jetzt fügen wir hier die Suchleiste hinzu. Los geht's. Hier haben wir die Suchleiste. Hier kann ich diesen Text ändern, wenn ich will, also werde ich ihn so belassen. Hier haben wir jetzt Ergebnisse. In diesen Ergebnissen können wir die Live-Ergebnisse anzeigen, und ich werde Ihnen in der nächsten Lektion oder nachdem wir diese Suchfunktion abgeschlossen haben, zeigen, wie es eingerichtet ist in der nächsten Lektion oder nachdem wir diese Suchfunktion abgeschlossen haben, zeigen, wie es eingerichtet . Dann haben wir eine Anfrage. Auf Anfrage werde ich diese Quelle als Beiträge festlegen, denn wenn wir das auf Alles setzen, werden Beitragsseiten und andere Dinge angezeigt , die unsere Website hat, aber wir müssen nur Beiträge durchsuchen. Klicken Sie auf Beiträge und auf zusätzliche Einstellungen, wir müssen uns darüber keine Gedanken machen, und dann gehen wir zu EtyleoeStyle, ich setze die Suchfeld-Typografie auf Text wie diesen, dann legen wir die Textfarbe fest und wir haben kein Symbol Auch im Fokus können wir die Textfarbe wie folgt ändern. Dann werden für die Lücke zwischen Eingabe und Taste zwei wie folgt sein. Und dann auf Löschen haben wir kein Symbol, also müssen wir es nicht einrichten. Dann wird für die Schaltfläche „Senden“ die Hintergrundfarbe als Textfarbe und der Hintergrundtyp als zweitrangig, und der Hintergrundtyp diese grüne Farbe, verwendet. Außerdem müssen wir die Typografie auf eine solche Schaltfläche einstellen. Dann ist der Radius der Suchschaltfläche Null und wir müssen die obere und untere Polsterung hinzufügen Eigentlich sind oben und unten okay. Wir müssen das richtige Muster hinzufügen. Lass uns bei 30 sein und links werden wir auch 30 sein, vielleicht 60. Fügen wir eine 60 hinzu. Es wird besser sein , weil wir hier und auf dem Knopf und bei einem Regenschauer die Schulter nehmen müssen hier und auf dem Knopf und bei einem Regenschauer die Schulter , wird die Textfarbe weiß sein und die Hintergrundfarbe ist Primärfarbe wie diese. Wir können den HA-Effekt auch so hinzufügen. Jetzt sieht es ziemlich gut aus. Wenn wir wollen, können wir Anweisungen wie den Suchbeitrag hinzufügen, aber das werde ich nicht tun, also werde ich zu Advance Advance gehen , lass uns unten Patmus 20 Wir werden so viel Platz zum Atmen haben. Jetzt sieht es ziemlich gut aus. Jetzt werde ich auf Veröffentlichen klicken und wir haben noch viel mehr zu tun, aber lassen Sie uns das ausprobieren, ich werde Änderungen vornehmen und die Blog-Seite einrichten ich werde Änderungen vornehmen und die Blog-Seite und hier werde ich tax eingeben und auf Osearch klicken Wenn ich auf CSearch klicke, alle Details oder der gesamte Beitrag angezeigt, der sich auf Steuern bezieht, aber wir müssen das Suchfeld Archiv erstellen und los geht's Dazu müssen wir zum Team Builder Team Builder gehen, gehen wir zu Templates Team Builder und jetzt müssen wir eine Sucharchivseite erstellen Klicken Sie dazu auf und dann auf Archivieren. Und hier, lassen Sie uns das entfernen und wir können diesen Abschnitt einfach kopieren und einfügen. Okay. Jetzt müssen wir Text hinzufügen, also werde ich ihn duplizieren und ihn dann hier ablegen. Hier sollte es hier sein. Dann lass uns diese Ausrichtung so ändern und daraus einen Absatz machen und diesen Text entfernen und dann hier klicken und dieses Archiv oder Archiv tit setzen. Hier wird der Archivtitel angezeigt und wir gehen zu E-Stil auf E-Stil Lasst uns die Typografie ändern, lasst uns 21 und hier dieses Ensemble zusammenstellen und hier werden wir 26 sein. Das ist ein dynamisches Tag. Denken Sie daran, wir haben den Archivtitel. Dieser Archivtitel ähnelt dem Seitentitel. Wenn wir hier beispielsweise nach Titeln suchen, ist dies der Archivtitel oder der Titel der Seite. In diesem Fall wird er hier nicht angezeigt, es wird nun angezeigt, jetzt möchte ich hier die Titelsuche als Archiv einrichten. Hast du dich daran erinnert , dass wir die Suchseite nicht eingerichtet haben, als wir sie hier unter bestimmten Bedingungen veröffentlichen? Hier haben wir Suchergebnisse. Als wir alle Archivseiten eingerichtet haben, haben wir das nicht festgelegt. Das liegt daran, dass wir dafür eine separate Seite wie diese benötigen . Jetzt klicke ich auf SavanClos und es wurde veröffentlicht. Wenn ich es jetzt überprüfe, wenn ich diese Seite einfach unterdrücke, wird es so sein Versuchen wir, diesen Abschnitt zu kopieren. Lassen Sie uns jetzt sehen, wie es perfekt sucht. Jetzt muss ich als nächsten Schritt die Reaktionsfähigkeit überprüfen Hier können Sie sehen, dass die Reaktionsfähigkeit nicht gut aussieht. Auf der Tablet-Version ist es perfekt und auf dem Handy klicken wir hier und gehen wir zum Stil auf die Schaltfläche Submit bei Estyle, wir müssen das als 20 alle 20 verschicken Machen wir es auf jeden Fall auf Null und dann werden wir 15 mal 15 sein Und hier haben wir auch das klare Symbol, und das ist das klare Symbol. Eigentlich können wir seine Farbe so ändern. Und wenn Sie möchten, können wir die Größe des Symbols ändern. Also hier ist das Symbol. Ich habe es einfach vergessen. Okay. Jetzt sieht es ziemlich gut aus. Jetzt veröffentliche es. Eigentlich werde ich diesen Teil kopieren und bei der Suche Aga müssen wir den Stil so anpassen. Okay. Veröffentlichen Sie es jetzt und als Nächstes müssen wir das einrichten. Lass uns hier auf Ergebnisse klicken. Um es einzurichten, ich nach Ergebnissen und klicke auf Hier anzeigen. Wir müssen ein temporäres Live-Ergebnis erstellen . Wenn ich so suche, wird das Ergebnis hier angezeigt. Es wird in Echtzeit angezeigt. Um das zu tun, klicke ich hier auf Reattemplate, Konzept, lass uns das auf Live-Suchergebnisse ändern Klicke hier Xbox und füge die Ex-Box wie folgt hinzu, dann entferne deine STA Was die Polsterung angeht, lass uns bei Padins Six sein. Jetzt müssen wir hier den Wasserhahn hinzufügen, den wir zeigen müssen. Zuerst benötigen wir das vorgestellte Bild, ich mache es 300 mal 300 und dann müssen wir den Titel des Beitrags zeigen. Wenn wir wollen, können wir den Beitragsausschnitt zeigen, aber wir wollen den Beitragsausschnitt nicht zeigen Wenn du willst, kannst du ihn einfach so hinzufügen und ich werde das nicht tun , also werde ich ihn löschen Jetzt klicke ich hier und lass uns zum Layout gehen. Die Layoutrichtung wird horizontal sein und dieses Bild sollte hier sein, dann klicken Sie hier, dann ändern Sie die Typografie Text wie diesen und dieses Bild sieht okay aus Dann muss ich nur noch einen unteren Rand hinzufügen, weil dadurch ein Element wie dieses geladen wird , weil der Beitrag horizontal geladen wird Die erste Reihe ist hier, die zweite Reihe ist hier. Klicken wir auf den Hauptcontainer, einen Stil, den wir Border nennen. Der Rand ist durchgehend und wir machen uns die Mühe, bis der Rand die Farbe und eigentlich brauchen wir nur den unteren Rand, wir brauchen nur den unteren Rand so und lassen uns diese farblose kleine Asche so machen Das ist es und das ist es nicht. Wir müssen den Link hinzufügen Wenn Sie also auf dieses Bild oder diesen Text klicken, sollte er zu dem jeweiligen Beitrag weitergeleitet werden. Um das zu tun, klicken Sie auf. Lassen Sie uns das zuerst für das Bild tun, klicken Sie auf das Bild. Machen Sie das als benutzerdefinierte URL und hier beim dynamischen Tag und hier, klicken Sie auf PostRLT ist dynamisches Tag und die Post-URL wird dort auch, lassen Sie uns das Gleiche für diesen Text hier tun, wir können einfach posten okay und die Textfarbe auf primär, lassen Sie uns die Primärfarbe auf normal am Rand über zeigen Machen wir es so zweitrangig. Okay, jetzt klicke ich auf Veröffentlichen und lass uns hierher zurückkehren. Dann klicke ich auf Veröffentlichen und suche hier Vorlage für Live-Suchergebnisse , die wir gerade erstellt Wähle sie einfach aus und veröffentliche sie. Dann lass es uns versuchen. Eigentlich müssen wir es auf Live testen, das genau hier ist. Wenn wir das machen, ist hier das Ergebnis, aber es sieht überhaupt nicht gut aus. Lassen Sie uns das Design ändern, um das Design zu ändern. Hier gehe ich zu EtyleoeStyle, jetzt haben wir eine Als Ergebnis fügen wir die Hintergrundfarbe hinzu . Fügen wir diese Farbe als Hintergrundfarbe hinzu. Fügen wir einen kleinen Boxschatten hinzu. A Lass es uns nicht hinzufügen. Lass uns hier nach einem ähnlichen Tag suchen. Jetzt können wir es am Design ändern , indem wir das Design überprüfen. Zuerst setze ich den Abstand zum Suchfeld auf Null und der fett gedruckte Radius auf Null Lassen Sie uns den Abstand auf Null setzen Wenn wir wollen, können wir die Breite steuerlich ändern. Mit dem Ergebnis wie diesem. Aber lassen Sie uns die Breite der Zeit beibehalten. Textfeld wie dieses, das ist der bessere Weg, und der Abstand zwischen den Zeilen wird Null sein und der Abstand zwischen den Spalten, wir haben keine Spalte, und das ist es Den Rest des Designs können wir mithilfe der Live-Suchergebnisseite ändern , also klicken Sie hier und beginnen wir zuerst mit dem Bild. Okay. Gehen wir zur Stilausrichtung links und fügen wir die Breite als 100% hinzu. Und für den Container wir die Elemente aus und richten sie mittig aus. Lassen Sie uns die volle Breite angeben und dann schauen wir mal. Klicken wir auf Veröffentlichen und testen wir es erneut. Steuer. Es ist immer noch größer und die Bilder sind nicht richtig ausgerichtet oder sie haben unterschiedliche Größen. Wir müssen es reparieren und die Größe des Bildes ändern. Um das zu tun, gehe ich hierher und füge hier einen Container hinzu. Lassen Sie uns für den Container den Rand und das Padding auf Null setzen, dann fügen wir das Bild hinzu und beim Container füge ich einen auf Null setzen, dann fügen wir das Bild hinzu und beim Container Container mit einer 40 hinzu und dann werde ich den Container duplizieren, und hier dürfen wir kein Bild zeigen Ich muss den Container so duplizieren dann das Bild von hier und beim Posentitel entfernen Mach das auch mit as 60. Und die Zwischengröße, machen wir eine Zwischengröße als 50, vielleicht wird diese Größe 30 sein, ist Arbeit 30 wird funktionieren, und hier, machen Sie diese 70 und klicken Sie auf cAblish und sehen wir uns jetzt die Vorschau an. Lass uns mit der Arbeit aufhören Ein Such-Tag. Jetzt sind die Bilder korrekt ausgerichtet, aber die Bildgröße ist immer noch zu groß. Um das Problem zu beheben, gehen wir zur erzwungenen Archivierung und ich muss dieses Bild verkleinern. Lass uns versuchen, es von hier aus zu machen. Tauschen wir es mit 50% aus und hier wird auch die Containergröße sein wird auch die Containergröße sein, dann gehen wir zu Container und weiter zu Container, nein, wir müssen zu Container für Container gehen , es in die Mitte bringen. Mitte so. Lass uns Max mit Säure hier Alignment Center hinzufügen. Der Wasserradius wird Null sein und mal sehen, ob es funktioniert. Lasst uns Panzer nach der Höhle bauen. Endlich, jetzt sieht es viel besser aus. Jetzt haben wir diesen Raum, also wird es nicht funktionieren. Was wir tun können, ist auf den Container zu klicken und das Maximum auf diese Weise zu entfernen. tatsächlich ändern, ohne es Lassen Sie uns diese Containergröße tatsächlich ändern, ohne es zu ändern. Fügen wir es vielleicht 50 hinzu und versuchen wir es jetzt. Hoffen wir, dass es funktioniert. Endlich funktioniert es. Ich habe einfach Größe des ausgewählten Bildes auf 100% belassen und hier ändere ich diesen Container auf 15% und dieser Container wird so aussehen. Ich werde es automatisch ausfüllen und auf Veröffentlichen klicken und jetzt sieht es ziemlich gut aus C Panzer. Und da kannst du eine Menge Sachen hinzufügen. Als Beispiel können Sie das EAP hinzufügen. Was wir also tun können, ist hier zu gehen und das Clcpas-Symbol hier bei Post Exp und dann zu Style zu gehen und zuerst auf diese Einstellungen zu klicken und in der Einstellung die Exap-Länge hinzuzufügen, da Und wenn du willst, kannst du im Voraus Sachen Dann machen wir auf Style eine Zeile daraus und ändern die Typografie in Text eine Zeile daraus und ändern die Typografie Lass es uns wie 60 machen. Lassen Sie uns diesen Abstand auf 15 festlegen und fügen wir eine Textfarbe wie Aschefarbe hinzu. Dann können wir veröffentlichen und schauen, ob das Design gerade da ist, wo ich es gerade veröffentliche, aber nichts passiert. Steuern. Ich bin nicht erschienen, lass uns etwas leckerer und weniger guter Lassen Sie uns das auf Poseninhalte anwenden und schauen wir mal, ob es sich dabei um Text oder Steuertext handelt Jetzt geht's los. Hier ist der Auszug, und hier ist auch der Text, hier fügen wir viel Abstand hinzu, also sechs, nicht Null Lass es uns schaffen. Ja, lass uns eine Null draus machen und für diesen Container das O als Sick machen. Veröffentlichen wir es jetzt und lass uns hier in der Suche klicken Oh. Los geht's. Hier ist das endgültige Design. Und wenn du willst, kannst du mehr Ideen testen und das Ganze verbessern, aber das ist gut für mich. Und jetzt haben wir die Suchseite fertig, auch das Live-Suchergebnis. Jetzt müssen wir die gleiche Funktionalität zu diesem Sucharchiv hinzufügen , wir fügen nur erzwungene Kopieren des Archivs hinzu und sind am Stil vorbei Auch hier müssen wir das Ergebnis öffnen und die Suchsuche hören, weil wir die Vorlage einrichten müssen und jetzt auf Fablsh klicken müssen, wenn wir zur Suchergebnisseite gehen, und lassen Sie uns das testen Wenn wir es testen, wird es so aussehen. Ziemlich gut. Im nächsten Schritt müssen wir den einzelnen Beitrag bearbeiten, und das machen wir in der nächsten Lektion. Wenn wir derzeit zu den persönlichen Finanzen gehen, werden wir es so sehen und als Text, wir werden es so sehen. Wenn wir in der nächsten Lektion auf diesen einzelnen Beitrag klicken, müssen wir dieses Design ändern. Lass es uns in machen 21. Design für einen einzelnen Blogbeitrag: Okay, lassen Sie uns jetzt diese einzelne Blogpost-Vorlage entwerfen. Dazu gehe ich zum WordPress-Dashboard oder zum WordPress-Dashboard. Dann gehen wir hier zu Team Builder. Klicken Sie in Team Builder auf Neu, und hier haben wir einen einzigen Beitrag. Klicken Sie darauf. Los geht's. Ich werde diesen entfernen, weil wir ihn nicht brauchen. Dann klicke ich zuerst hier und erstelle eine Plex-Box wie diese. Lassen Sie uns eine zweispaltige Struktur erstellen, weil wir keine zweispaltige Struktur erstellt haben. Klicken wir also hier und erstellen wir diese Art von einer Spalte . Wir können es aber manuell machen. Aber lass uns hier klicken und alle Ränder und Abstände entfernen und das machen wir hier, genauso auch Lassen Sie uns hier dasselbe tun. Okay. Nun fügen wir oben den oberen Rand als 60 hinzu. Jetzt müssen wir zuerst den Titel der Pose hinzufügen. Füge es hinzu und dann müssen wir den Inhalt des Beitrags hinzufügen. Bevor wir den Inhalt posten, müssen wir das Feature-Bild wie folgt hinzufügen und dann unten die Beitragsnavigation hinzufügen, damit es zum vorherigen und nächsten Beitrag navigiert , nachdem wir all das hinzugefügt Wir können das Design erstellen und davor muss ich die Schaltfläche Teilen hinzufügen. Hier haben wir die Schaltfläche „Teilen“ gesetzt. Fügen wir es so hinzu und wenn Sie dann Benutzern das Kommentieren erlauben, können Sie einen Post-Befehlsabschnitt wie diesen hinzufügen , und davor füge ich den Beitragsbereich hinzu. In diesem Beitragsbereich werden wir einen Beitrag hinzufügen. Jetzt fangen wir mit dem Design an. Bevor wir entwerfen, fügen wir alle Inhalte, die wir hinzufügen möchten, zur Seitenleiste Für diese Seitenleiste werde ich die Suche hinzufügen. Eigentlich können wir die Suchleiste von hier aus aufrufen, einfach zu Recht kopieren. Hier ist die Post-Arch-Suchleiste. Dann füge es so ein. Wir müssen das Design ändern, und dann werde ich ein Post-Set wie dieses hinzufügen. Okay. Was sonst? Das ist vorerst genug. Wenn Sie mehr Dinge wie den Autor haben und die Autorendetails hinzufügen möchten, können wir eine Orthobox wie diese hinzufügen Und ja, lassen Sie uns auch Orthobox hinzufügen. Auf diese Weise können Sie deutlich sehen, obwohl wir es hier nicht hinzufügen, aber wenn ich es hinzufüge, können Sie deutlich sehen, wie man es benutzt Okay. Jetzt müssen wir das Design bearbeiten. Fangen wir also mit dem Abstandsproblem an. Hier brauchen wir also einen Abstand zu diesen Abschnitten, klicken Sie auf den Hauptcontainer und gehen Sie zum Layout bei Spaltenmasse 20. Dann kümmern wir uns um diesen Header, gehen wir zum Stil. Die linke Typografie wird so eine Zwischenüberschrift sein. Dann das Bild, das Bild, wir müssen nichts tun Ich werde es vollständig machen und für diesen Text werde ich die Ausrichtung nach links und die Textfarbe als Text und das Typogramm wird dieser Text wie folgt sein Okay, lassen Sie uns hier und hier weitermachen, wir können die Schaltfläche Teilen hinzufügen, also klicken wir auf die Schaltfläche Teilen und lassen Sie uns Pinterest hinzufügen, dupliziert, Twitter, nicht Twitter, Ei, lassen Sie uns nur diese Dinge hinzufügen Wenn du möchtest, kannst du weitere hinzufügen, und hier kannst du das Design ändern Ich würde sagen, der Farbverlaufstyp ist quadratisch, die Spalte wird links ausgerichtet sein, die Ziel-URLs , die aktuelle Seite und ein Stil, wir müssen nichts tun. Es sieht schon gut aus. Im Voraus füge ich dann den unteren Rand als 60 hinzu. Jetzt hat es auch mehr Platz. Die Spitze ist 30, 33 30, also so. Jetzt müssen wir die Schaltflächen „Zurück“ und „Weiter“ bearbeiten , um das zu tun. Gehen Sie hier hin. Und wenn Sie das Etikett zeigen, können Sie es ausblenden, aber ich werde es einblenden und lassen Sie uns den Pfeil für die Kachel und auch diesen Rand zeigen . Dann gehen wir zu E-Stil auf E-Stil. Die Etikettenfarbe wird diese grüne Farbe sein und die Typografie wird die Button-Typografie sein und lassen Sie uns 16 daraus machen Oder 18 wird Arbeit sein. Dann wird die Titelfarbe des Beitrags auch diese Farbe haben und der Text wird so sein, aber wir müssen sie reduzieren, also 12 12 funktioniert und Pfeil, die Pfeilfarbe wird auch diese grüne Farbe haben oder wir können hellgraue Farbe wie diese hinzufügen und ich gebe die Standardgröße an. Der Rand wird so aussehen. Wenn wir wollen, fügen wir einen Abstand wie diesen hinzu. Okay. Jetzt sieht es okay aus. Heute gab es starken Regen, also habe ich aufgehört aufzunehmen Also lass uns weitermachen. Und wir haben diesem Post-Navigationselement die Farbe Her oder Hund hinzugefügt die Farbe Her oder Hund diesem Post-Navigationselement Also gehen wir all diese Elemente durch und fügen den Rand der Farbe Okay, jetzt gehen wir hoch und fangen von hier an. Okay, jetzt müssen wir uns um diesen Abschnitt kümmern. Wir können ganz einfach zum Dashboard der Wordpress gehen . Dann müssen wir eigentlich die Seite besuchen und ich werde auf Mit Element bearbeiten oder klicken. Wir können das ganz einfach kopieren. Das ist ein Post-Element. Also auf der Homepage, hier haben wir das gleiche Post-Element. Ich werde mit der rechten Maustaste auf Kopieren klicken, hierher kommen, mit der rechten Maustaste klicken und den Stil einfügen. Machen wir es eigentlich zur Karte. Als ich daraus eine Karte mache, hat sich das Design geändert. Okay, jetzt ändere ich die Spaltenanzahl auf zwei und wir werden zwei Spalten posten und Beiträge pro Seite werden ebenfalls zwei sein. Zeige Bilder und lass uns alle Informationen behalten, und hier entferne ich Metadaten und Kommentare und die Länge des Auszugs wird sein, machen wir daraus 50 und zeige mehr, was Kategorie sein wird, und wichtig ist die Abfrage Bei der Abfrage können wir die Quelle als Ports angeben und das Datum wird alle zufällig angeordnet sein Wenn also jemand diesen Beitrag besucht, hat er zufällig zwei Beiträge und keine Seitennummerierung. Wir müssen uns keine Gedanken über die Seitennummerierung machen, und dieser Inhalt ist auch fertig Was wir also tun können, ist zum Befehlsbereich zu gehen. Ich werde den Befehlsbereich für diesen Blog nicht verwenden, aber ich werde Ihnen zeigen, wie Sie ihn verbessern können. Also hier, klicken Sie auf dieses Stiftsymbol und auf Befehl hier haben wir einen Skin, wählen die Theme-Befehle und der Quelltext wird im Voraus aktualisiert. Wir haben nicht viel zu tun, aber die Links und die Farbe der Schaltflächen stimmen immer noch nicht mit unserer Themenfarbe überein. Um das Problem zu beheben, klicke ich hier und erstelle diesen Speicherentwurf und lass uns mit den Einstellungen fortfahren Auf der anderen Seite müssen wir uns an dieses Thema anpassen. zu tun, gehen wir zur Typografie Lassen Sie uns die Körperfarbe als Text verwenden, und die Typografie wird Text sein sehen, ob es sich geändert hat, wenn ich es mache und der Abstand zwischen den Typografie, ich lasse es einfach so, wie es ist, und hier werden die Linkfarben Mal sehen, ob es sich geändert hat, wenn ich es mache und der Abstand zwischen den Typografie, ich lasse es einfach so, wie es ist, und hier werden die Linkfarben diese Farbe auf HO haben, lassen wir es so primär und die Typografie wird auch gleich sein und dann haben wir hier diese Kommentarschaltfläche, wenn du willst, du kannst die Typografie so auswählen, aber ich werde es nicht tun. Ich werde die Änderungen hier speichern und dafür müssen wir immer noch die Farben der Schaltflächen korrigieren Ich gehe zurück und hier haben wir die Schaltflächen. Bei Buttons sage ich die Art des Gapio-Buttons und bei normaler Textfarbe es die Hintergrundfarbe und die Hintergrundfarbe Sekundärfarbe und wir haben keinen Randradius Außerdem haben wir keinen Randtyp, und wir müssen die Abstände und den Rand hinzufügen . Lassen Sie uns den oberen Pass 15, 22, 15, 22 so Wenn Sie mehr Platz benötigen, können Sie es hinzufügen, aber ich werde es so belassen und auf der Kante über dem Rand, die Textfarbe wird packbraun sein und der Text wird eine Primärfarbe wie diese sein. Okay. So können wir das machen, und jetzt können wir auf Änderungen speichern und dann auf Zurück klicken, um zu Bearbeiten Okay zu gelangen. Wie ich Ihnen bereits gesagt habe, werde ich das entfernen, weil ich es nicht benötige. Ich zeige es dir nur für. Wenn Sie das zu Ihrer Website hinzufügen müssen, können Sie den Schritten folgen. Jetzt haben wir hier das Autorenprofil im Autorenprofil. Wir können das Layout so gestalten, wie wir wollen, und hier gehen wir zu Estyle Ich werde das Bild behalten. Ich werde die Einstellung so lassen, wie sie ist, und der Name wird „Lass uns die Grundfarbe machen “ und die Typografie wird „Button“ sein Lassen Sie uns den Text behalten. Machen wir es auf Knopfgröße. Da diese Biographie Typografie mit diesem Text und dieser Schaltfläche , sehen wir derzeit keine Schaltfläche, also behalten wir sie als Standard bei Eigentlich müssen wir unsere Benutzerdaten hinzufügen , damit das besser aussieht Machen wir es also, nachdem wir den Rest des Designs fertiggestellt haben, und jetzt haben wir hier die Suchleiste. Klicken Sie darauf und gehen wir zur Schaltfläche „Senden“ von eTyleOeStyle Wir haben diese Polsterung. Lassen Sie uns das Ganze so entfernen, dann machen wir es so, dass sechs sechs oder 12 mal 12 viel besser sind Nun, das ist auch auf der Tablet-Version ziemlich gut, es wird so aussehen und es ist okay. Dann gehe ich zur Desktop-Version und hier haben wir einen weiteren Blockpost-Set. Was wir tun können, ist, das Design eines Blockposts hinzuzufügen. Dieses Block-Beitrag-Design, um es zu bekommen, klicke ich auf Fußzeile bearbeiten, kopiere, komm her, passe diesen Stil Dann gehe ich zur Skins-Karte. Eigentlich ist Skin klassisch, mal sehen. Der Skin ist klassisch, Spalte ist eins, die Postra-Seite ist drei Nehmen wir an, diese Spalte ist 14 pro Seite. Behalten wir es bei sechs. Lassen Sie uns diese beiden Sachen anrufen. Wir müssen den Auszug nicht zeigen, und wir müssen auch nicht die Schaltfläche „Mehr lesen“ im Estyle anzeigen die Schaltfläche „Mehr lesen“ im Estyle Gehen wir zum Inhalt, und hier ist die Hintergrundfarbe Lass es uns so dunkel machen. Jetzt ist es ziemlich Okay, jetzt haben wir einen supercoolen einzelnen Blogbeitrag Was wir tun können, ist, dass wir auf Bedingung veröffentlichen und auf Inklusive klicken können , dass wir auf Bedingung veröffentlichen und auf Inklusive Ich muss diese beiden Beiträge auswählen und hier alles posten und dann auf Speichern und Schließen klicken. In Ordnung. Gehen wir jetzt auf unsere WordPress-Website und lesen wir den Beitrag von MotoRad, und los geht's Hier haben wir den Blogbeitrag, und er sieht so aus, wie wir es uns wünschen. Das ist ziemlich cool, und hier müssen wir uns anpassen, um das zu tun, wir müssen zum WordPress-Dashboard gehen Gehen wir zum WordPress-Dashboard und im WordPress-Dashboard gehe ich zu Benutzern und Profil. Hier im Profil muss ich diese S eingeben. Ich werde diese SF hinzufügen, ich werde den Vornamen John Doe hinzufügen und der Spitzname wird Edwin sein Der Name dieses Spiels wird John Doe sein. Und hier gehen wir zu JGPT und suchen nach biografischen Informationen für diesen Eigentlich müssen wir den Namen hinzufügen. Sein Name ist John Doe. Okay, lass uns das hier kopieren und hier einfügen, dann brauchen wir eine Profilfunktion. Eigentlich müssen wir diese Website mit Gravata verbinden , um das zu tun Ich werde es nicht tun, also klicke ich auf Profil aktualisieren und wenn ich dann hier hingehe und lass uns posten , Oh mein Gott Hier haben wir alle Informationen über den Autor. Aber es ist zu lang. Was wir tun können, ist, zum Dashboard zu gehen und das Team zusammenzustellen und auf dieses Element eines einzelnen Beitrags zu klicken. Wir müssen den Namen tatsächlich ändern. Benennen wir es hier um, klicken wir auf das Einstellungssymbol und sagen Single Block Post oder Single Post Publish und hier, klicken wir auf diesen Avatar und gehen wir zum Stil, lassen Sie uns diesen Biografie-Text wie 40 machen. Nein, es ist immer noch zu viel. Eigentlich können wir es hier unten so platzieren . Auf diese Weise können Besucher über ihn lesen. Wenn du willst, kannst du auch den Archivieren-Button hinzufügen, damit du alle Beiträge dieser Person hier, hier, hier, sehen kannst, Jack. Lassen Sie uns ein dynamisches Tag hinzufügen. Fügen wir den Namen des Beitragsautors hinzu und klicken Sie hier. Und weiter vor addRD und nach Apostroph S ist der Beitrag gelesen, John DoysFST Okay Jetzt gehe ich hier zu Estyle auf Estyle Martin, lass uns die Textfarbe auf Hintergrundfarbe ändern. Und die Hintergrundfarbe wird die Sekundärfarbe sein und die Typografie wird die Es ist zu groß, also geben wir die Textgröße 16 an. Ho, mach es so primär. Nein, eigentlich sollte das so sein und die Hintergrundfarbe sollte so eine Primärfarbe sein. Ich werde das Standard-Fading beibehalten, also hier ist der Weg, um die Details des Autors anzuzeigen Wenn wir das veröffentlichen und hier weitermachen, wurde es immer noch nicht aktualisiert, aber aus irgendeinem Grund wird es nicht aktualisiert Wenn wir jedoch auf diese Schaltfläche klicken, gelangen wir zu dieser Arch-Seite. Jetzt ist der einzelne Blockpostteil abgeschlossen und die meisten Arbeiten sind abgeschlossen. Jetzt müssen wir die Kontaktseite erstellen. Lass uns das machen. 22. Gestalten der Kontaktseite: Lassen Sie uns nun die Kontaktseite erstellen. Dazu gehe ich auf die Kontaktseite und klicke auf Seite bearbeiten. Dann klicke ich von hier aus auf Mit Elemento bearbeiten und ich gehe zu ChagBT und sage „ Inhalte für die Kontaktseite So sollte es Kontakt sein. Wir und das ist ein Finanzprotokoll. Sagen wir, nett. Lassen Sie uns nun diese Informationen hinzufügen. Um das zu tun, kann ich auf eine andere Seite gehen. Gehen wir eigentlich zu einer Seite und klicken auf Mit Elementor bearbeiten. Von hier aus können wir diesen Abschnitt kopieren Auf diese Weise müssen wir es nicht von Grund auf neu erstellen. Und dann lass uns diesen Text kopieren, ihn hier platzieren, diesen Text kopieren. Okay. Jetzt müssen wir Kontakt aufnehmen, Partnerschaften und Zusammenarbeit mit Gästen. Lassen Sie uns diese Informationen hinzufügen. Lassen Sie uns zunächst eine Spalte für die Richtungszeile erstellen, alle Ränder und Abstände entfernen und den oberen Rand bis 20 hinzufügen Dann werde ich hier klicken und den Container hinzufügen. Lassen Sie uns außerdem den Rand und die Polsterung auf diesem Container entfernen. Dann klicken Sie hier und fügen Sie eine Überschrift hinzu. Diese Überschrift wird uns kontaktieren, kopieren, so einfügen, zu Estyle Align gehen, bis wir gegangen sind, Typografie wird Unterüberschrift sein Dann müssen wir diese E-Mail-Adresse, Telefonnummer und Bürozeiten hinzufügen. Um das zu tun, gehe ich hierher und suche nach der Symbolliste. Los geht's, ziehen wir es einfach so per Drag & Drop. Dann ändere hier dieses Symbol in Nlop. Lass uns das tatsächlich bekommen. Holen wir uns das und dann müssen wir die E-Mail hinzufügen. Holen wir uns diese E-Mail. Die E-Mail wird auf der benutzerdefinierten Website design.us aufgerufen . Wenn Sie möchten, können Sie auch auf dem Link E-Mail zwei und eine E-Mail-Adresse hinzufügen Ich denke, das sollte richtig sein . Info Search Mail Two Mail, um so zu funktionieren. Sehen Sie nett. Wenn jemand auf dieses Symbol klickt, öffnet es diese E-Mail, es öffnet sich die E-Mail-Box, und dann müssen wir den Standort, den Standort und die Telefonnummer hinzufügen . Fügen wir diese Telefonnummer hinzu. Das ist Seite eins. Ich werde einfach das Suchtelefon hinzufügen und die Telefonnummer gleich hier hinzufügen, dann müssen wir die Bürozeiten hinzufügen. Kopieren Sie die Bürozeiten und suchen Sie hier nach Office Lolock auf einer Uhr Okay, ziemlich gut. Also, was wir tun müssen ist diese Partnerschaft und die Gastbeiträge zu kopieren und diesen zu schmieren und ihn hier zu korrigieren, ihn so einzufügen Dann kopiere diesen und füge ihn genau hier ein und in diesem Stil, links und hier aus, kopiere den Text, füge den Text Nett. Jetzt werde ich einen neuen Container erstellen, hier klicken und diesen Container hier hinzufügen. Eigentlich muss ich ihn hier hinzufügen, hier klicken und ihn so hinzufügen. Okay. Jetzt ist es in diesem zweiten Container, aber wir wollen es hier haben, genau hier. Nein, hier eigentlich nicht. Okay. Nun, ich ändere die Ränder und den Abstand und kopiere diesen, bleibe drin und hier sende uns eine Nachricht an diesem Text, schicke uns eine Nachricht und kopiere diesen Teil und füge ihn so ein und bei diesem Text so, dann suche ich hier Formular auf Formular, ziehe es einfach so und lege es so ab Und hier geht's jetzt zum Formular, ich suche, ich stelle es als Kontaktformular Und hier brauchen wir einen Namen, der erforderlich sein sollte. Platzieren wir ein Lötzeichen in der Sie werden hier einen Namen angeben, dann E-Mail, E-Mail, Presder wird weniger als die E-Mail-Adresse sein , die Sie so drücken Dann Nachricht, kein Etikett, Platzhalter auf den Pilas, keine Vorschläge Jetzt können wir auch einen Betreff hinzufügen. Der Texttyp sollte Text sein und hier wird die Bezeichnung Betreff und Platzhalter sein Geben Sie den Betreff der E-Mail wie folgt ein und es wird genau hier oben Das ist ziemlich gut, und wenn Sie möchten, können Sie weitere E-Mail-Felder hinzufügen, und bei Advancetting können Sie den Standardwert für jede E-Mail als Beispiel in einer Nachricht festlegen . Ich muss Halo hinzufügen, Sie können es einfach hinzufügen, wenn ich es hinzufüge, es wird automatisch zum Postfach hinzugefügt Und nett. Außerdem möchten wir das erforderliche Zeichen anzeigen, und diese Nachricht sollte so erforderlich sein und die Schaltfläche ist in Ordnung. Wenn wir wollen, können wir den Text der Schaltfläche „Senden“ ändern , aber das werde ich nicht tun. Nach dem Absenden werden die Abholung, die Einreichung und die E-Mail aktiviert. Einreichung der Sammlung können wir diese Formulardaten also im Formular zur Einreichung der Sammlung sammeln , das sich unter Elementor und Einreichungen befindet , und dann per E-Mail Hier können wir die beiden E-Mails festlegen Wenn also jemand eine Frage stellt, kannst du sie direkt in dein E-Mail-Postfach schicken Und hier als Nachricht: Wenn wir alle Felder hinzufügen, können wir alle Felder abrufen. Oder wenn Sie speziell ein Feld möchten, können Sie zu vier Feldern wechseln. Nehmen wir an, wir brauchen diesen Namen. Gehen wir also weiter und wir können den Kurzcode kopieren und hierher kommen. Dann können wir per E-Mail einfach darauf hinweisen, dass sein Name der Name ist, zwei werden unsere E-Mail sein und der Abschlussball wird die Person sein , die diese E-Mail gesendet hat Ich habe bereits erstellt, wie man E-Mails und SMDB einrichtet. Wenn Sie sie nicht überprüft haben, werde ich sie nach dieser Lektion hinzufügen und nachdem wir all diese Informationen eingerichtet haben, können wir zu EstilSotils gehen, wir können den Spaltenabstand ändern Lassen Sie uns den Spaltenabstand 15 setzen und der Zeilenabstand sollte 15 sein, nicht Machen wir daraus zwei. Dann ist Etikett Abstand. Lassen Sie uns diesen Raum für die Bezeichnung einrichten. Vielleicht funktionieren sechs. Ja. Und wenn du willst, kannst du die Farbe des Textes ändern. Und wenn Sie möchten, können Sie auch die Typografie ändern Also hier mache ich ein bisschen klein wie 18 und die Zeile Nacht wird ebenfalls 18 sein und den Rand mit Ich mache es auf Null füllen Eigentlich brauchen wir eine Grenze. Eins und hier primär, dann wird der Grenzradius so Null sein, und lassen Sie uns diese kleine Aschefarbe so machen. Okay. Dann lass uns zu Button gehen. Der Knopf ist in Ordnung. Es gibt nichts zu tun. Dann können wir bei der Nachricht sagen, dass Erfolgsmeldung grün ist, Fehlermeldung rot in der Farbe der Zeilennachricht wird diese Farbe haben. Das sollte rot sein. Okay. Jetzt müssen wir uns keine Gedanken mehr über Schritte machen, da wir nur ein einfaches Formular haben. Jetzt können wir das veröffentlichen und wenn es so ist, hier ist das Formular, und wenn ich jetzt das Formular ausfülle dann auf Zustimmung klicke, erhalten wir die Nachricht zum Absenden. Wir können diese Nachrichten auch ändern, wenn Sie diese Nachrichten ändern möchten Gehen wir zu den zusätzlichen Optionen und unter Benutzerdefinierte Nachricht können Sie benutzerdefinierte Nachrichten hinzufügen, und das werde ich nicht tun. Gehen wir zur Einreichungsseite und zur Einreichungsseite Hier ist die Testnachricht , die ich gerade gesendet habe. Jetzt haben wir die Kontaktseite und den voll funktionsfähigen Blog als nächsten Schritt. Wenn Sie Google Adsens erhalten oder Anzeigen schalten möchten, benötigen Sie Seiten mit den Allgemeinen Geschäftsbedingungen und den Datenschutzbestimmungen In der nächsten Lektion werde ich Ihnen zeigen, wie man sie generiert 23. Erstellen einer E-Mail und Konfigurieren von SMTP: Tun Sie es, ich gehe zu meinem Name-Chip-Konto. Sie sollten zum HSTMPVider gehen und auf das C-Panel zugreifen. Also hier klicke ich einfach hier und klicke auf Gehe zum C-Panel. Okay, ich leite zum C-Panel und zum C-Panel weiter Wenn Sie also den Namen JP nicht verwendet haben, spielt das keine Rolle. Das C-Panel ist bei jedem HostEM-Anbieter gleich. Es mag einige Änderungen haben, aber es ist ziemlich ähnlich Und wenn Sie kein E-Mail-Konto haben oder wenn Sie ein Dienstanbieter oder ein E-Mail-Konto sind , müssen Sie sich an sie wenden und es von ihnen erhalten. Also auf Name Jif, wir bekommen die E-Mails schon. Wenn ich also nach unten scrolle, können wir hier E-Mail-Konto finden, oder wir können einfach hier nach E-Mail suchen. Los geht's. Okay. Von hier aus werde ich einfach auf E-Mail-Konto klicken. Okay, hier habe ich meine alten E-Mails. Von hier aus klicke ich einfach auf Cre und wähle hier einfach die URL unserer Website Als Verwendungsname füge ich Informationen hinzu und lasse uns ein Passwort generieren Also werde ich ein Passwort generieren und wir sind wieder da. In Ordnung. Jetzt klicke ich auf Concreate, die E-Mail wird info at custom website design dot sein, sodass Sie hier beispielsweise einen beliebigen Namen oder einen beliebigen Namen hinzufügen können. Wenn Sie Joan sind, können Sie Joan zu Ihrer Website-URL hinzufügen , und jetzt klicke ich auf Okay. Wir benötigen eine weitere E-Mail, die wir als zwei E-Mails hinzufügen können. Aus der E-Mail werden Informationen angezeigt, und wir erstellen zwei E-Mails als Wählen wir die Domain und ich füge meinen Namen hinzu. Okay. Dann werde ich das Passwort so einrichten. Okay, dann klicke ich auf Erstellen. Okay, jetzt haben wir diese beiden E-Mails. Lassen Sie uns diese Informationen festlegen. Gehen wir also zunächst zu Plugins und klicken auf Neues Plugin hinzufügen. Und hier suchen wir nach WP Mail SMTP, nicht nach Main Mail. E-Mail. In Ordnung. Hier ist das Plugin und es ist kompatibel mit unserer WordPress-Version. Klicke auf Jetzt installieren. In Ordnung. Klicken Sie nun auf Aktivieren. Ich klicke einfach auf Zurück zum Dashboard. Okay. Jetzt haben wir hier die Kulisse. Außerdem können wir testen, ob unsere E-Mail korrekt funktioniert oder nicht. Wenn wir zu Tools gehen, haben wir hier einen E-Mail-Test, und hier können wir unsere E-Mail-Adresse hinzufügen und auf E-Mail senden klicken, dann heißt es, es wurde ein Emittent erkannt Diese Website-E-Mail funktionierte jedoch schon früher. Mal sehen, ob wir dieses Mal eine E-Mail bekommen. Okay, ich logge mich gerade in mein Gmail-Konto ein und sehe die E-Mail nicht, was bedeutet, dass dieses Plugin die E-Mail-Funktionalität meiner Website beeinträchtigt. Also lass es uns reparieren. Also gehe ich zuerst zu den Einstellungen hier, ich muss die Prom-E-Mail einstellen. Unsere Abschlussball-E-Mail wird also diese sein. Kopieren Sie es und fügen Sie die PM-Mail hier ein. Die Prom-E-Mail bedeutet E-Mail , dass wir E-Mails von dieser Website aus versenden, und dann hier die Prom-E-Mail erzwingen, sie einschalten und hier können wir den Namen festlegen Ich werde den Standardnamen und die Standarddaten beibehalten. Dann in der E-Mail habe ich das SMTP. Okay, hier müssen wir den SMTP-Host hinzufügen. Holen wir uns also diese Informationen. Um diese Informationen zu erhalten, kann ich einfach zu C Panel gehen und hier ist unsere E-Mail, und ich klicke einfach auf Geräte verbinden. Okay, hier haben wir alle Informationen. Zuerst brauchen wir den Gastgeber als Gastgeber, ich werde diese E-Mail-Adresse verwenden. Gehen wir hierher und fügen den Host als unsere aktuelle E-Mail-Adresse hinzu. Wählen Sie dann für die Verschlüsselung SSL aus, und hier ist der SMTP-Port 465 SMTP-Host sollte dieser Ausgangsserver sein Kopieren Sie es einfach und fügen Sie es hier ein, nicht die E-Mail-Adresse, und der SMTP-Benutzername ist die E-Mail, der Benutzername und hier das Passwort für das E-Mail-Konto Haben Sie sich daran erinnert, dass wir bei der Erstellung eines E-Mail-Kontos einfach das Passwort dafür mit diesem Passwort erstellen und das Passwort eingeben Okay, Authentifizierung einschalten, dann klicke ich auf Savesetting Wenn Sie also Google Workspace oder einen anderen E-Mail-Anbieter verwenden, wählen Sie einfach den Mailer aus, den Sie verwenden, und richten Sie die Sie verwenden, und richten Sie In diesem Fall verwenden wir SMTP des Servers, also habe ich diese Informationen eingerichtet Okay, gehen wir zu den Tools und hier haben wir ein Problem, aktualisieren Sie es Okay, hier beim Senden an E-Mail und klicken Sie auf SendMIL, um zu sehen, was passieren Aus irgendeinem Grund wird die Website nicht geladen, aber hoffen wir, dass das funktioniert Okay, es heißt Erfolg und hier ist eine Warnmeldung Lassen Sie uns sie vorerst ignorieren. Also jetzt haben wir hier die E-Mail bekommen. Wenn Sie denselben Schritt ausführen, den ich verwende, können Sie das Problem, dass die E-Mail nicht gesendet wird, erfolgreich beheben. 24. Erstellen von Seiten mit Datenschutzrichtlinien und Nutzungsbedingungen: Jetzt müssen wir die Seite mit den Datenschutzrichtlinien sowie die Seite mit den Allgemeinen Geschäftsbedingungen erstellen . Dazu gibt es zwei Methoden. Die erste ist ooe AI HAG PT und sagt Ihnen, Nischen und andere Dinge, die Sie tun, zu blockieren und KI Ihre Inhalte generieren zu lassen. Wenn Sie den Inhalt oder die Datenschutzseite und die Seite mit den Allgemeinen Geschäftsbedingungen generieren den Inhalt oder die Datenschutzseite und die Seite , müssen Sie den Inhalt gründlich überprüfen und zur Website hinzufügen . Die nächste Methode ist die Verwendung des Term and Die nächste Methode ist die Verwendung Conditions Generators oder des Datenschutzrichtlinien-Generators Lassen Sie uns den Datenschutzrichtlinien-Generator verwenden und versuchen, ihn zu erstellen. Ich suche einfach nach dem Datenschutzrichtlinien-Generator bei Google und hier habe ich ein paar Ergebnisse Hier gehe ich zu dieser Website mit Punktinformationen für Datenschutzerklärungen, und hier müssen wir dem Schritt folgen Zuerst wähle ich die Version als Website aus. Wenn ich dann hier weitermache, muss ich die URL der Website und den Namen der Website hinzufügen. Und hier werde ich hinzufügen, dass ich eine Einzelperson bin. Wenn Sie ein Unternehmen sind, können Sie das Unternehmen hinzufügen und hier die Informationen hinzufügen. Dann können Sie das Land eingeben. Ich gebe mein Land ein und klicke auf nächsten Schritt. Und wenn Sie persönliche Daten von Benutzern sammeln, können Sie diese hier hinzufügen. In diesem Fall haben wir ein Abonnentenformular, was bedeutet, dass wir die E-Mail-Adresse erfassen und auch Vor - und Nachnamen im Kontaktformular angeben können . Und dann klicke ich auf den nächsten Schritt, und hier müssen Sie angeben, wie andere Personen oder Besucher Sie kontaktieren können. Ich werde die Methode als E-Mail verwenden und die E-Mail hier hinzufügen, dann klicke ich auf den nächsten Schritt. Und hier, wenn Sie diese professionelle Datenschutzrichtlinie nutzen möchten , müssen Sie bezahlen, also klicke ich auf Nein, ich möchte keine professionelle Datenschutzrichtlinie und dann auf nächsten Schritt klicken. Und hier muss ich die E-Mail-Adresse hinzufügen, dann erhalten wir den Code. Einfach die E-Mail-Adresse hinzufügen und auf Generieren klicken. Ordnung. Hier ist die Seite mit den Datenschutzbestimmungen und von hier aus können wir die Text - oder HTML-Version kopieren, oder Sie können diesen Link kopieren und direkt zu diesem Link. Am besten erstellen Sie Ihre eigene Seite. Lass es uns machen. Jetzt gehe ich hier zu unserem Blog und allen Seiten. Und hier klicke ich auf eine Seite und dieser Seitentitel lautet Datenschutzrichtlinie, dann klicke ich auf Mit Elementor bearbeiten und ich werde auch Seite über Seite öffnen , damit ich das Design von dort kopieren kann Also werde ich auf Mit Elementor bearbeiten klicken und hier ist es. Ich werde einfach diesen ersten Teil kopieren und hierher kommen, dann füge ich ihn einfach so ein Hier, ich werde das entfernen. Eigentlich werde ich das duplizieren und dann werde ich es hier so entfernen, dann brauche ich diesen Teil nicht und hier werde ich es tun. Eigentlich brauche ich diesen Teil auch nicht, und hier füge ich den Text der Datenschutzrichtlinie hinzu, dann kopieren wir diese beiden Zwischenablagen und hier füge ich den Texteditor Hier ist der Texteditor, füge ihn einfach hinzu. Gehen wir zum Code und stellen uns dem Code. Und nett und ich werde dieses H von der Datenschutzseite entfernen . Wenn ich jetzt hierher gehe, kann ich eine Linie nach links ziehen und den Text auswählen. Wenn ich möchte, kann ich auch die Textfarbe und auch die Linkfarbe ändern , aber standardmäßig haben wir all diese Informationen erhalten, und hier ist die Seite mit den Datenschutzbestimmungen. Nachdem wir es fertiggestellt haben, kann ich es einfach veröffentlichen . Wenn ich es mir ansehe, finden Sie hier unsere Seite mit den Datenschutzbestimmungen. Ja. Jetzt müssen wir diese Fußzeile hinzufügen und auch die Nutzungsbedingungen generieren. Es ist ziemlich einfach. Sie können den Term and Condition Generator googeln, und hier finden Sie Term and Condition Generator.com und Sie können den Schritt wie zuvor ausführen und das Formular ausfüllen, dann erhalten Sie den SDML-Code Das werde ich nicht tun. Was ich jetzt tun werde, ist , über Menüs zu Mino zu gehen, hier werde ich wichtige Links verwenden, und bei wichtigen Links werde ich den Link zur Datenschutzrichtlinie wie folgt hinzufügen Jetzt werde ich auf Speichern klicken. Wenn ich dann auf der Website nachschaue, gehen wir hier runter. Wir haben den Link zur Datenschutzrichtlinie. Wenn ich darauf klicke, werde ich zu unserer Datenschutzseite weitergeleitet. Okay, wir haben unseren Blog erfolgreich gestaltet. Jetzt müssen wir Blogartikel veröffentlichen, und Sie können dies erweitern, indem weitere Kategorien erstellen und andere Dinge tun. 25. Abschluss des Kurses und Abschlussprojekt: Herzlichen Glückwunsch zum Abschluss dieses Kurses. Jetzt sind Sie an der Reihe, alles, was Sie gelernt haben, in die Tat umzusetzen. Ihr Klassenprojekt besteht darin, eine Block-Website für eine Nische Ihrer Wahl zu entwerfen und zu erstellen . So können Sie Schritt für Schritt vorgehen. Repariere zuerst deine Nische. Es könnte Reisen, Essen, Trinken, Fitness, Sport oder irgendetwas anderes sein, das dich fasziniert. Der zweite Schritt ist die Einrichtung von Wordpres mit Elementor Pro auf neueren Postings Der dritte Schritt ist Entwerfen eines neueren Blogs, das Erstellen einer Homepage, einer Blog-Seite, des Layouts für einzelne Boost-Beiträge und Kategorieseiten. Der vierte Schritt besteht darin, Funktionen hinzuzufügen, die Suchleiste einzufügen und ein Abonnentenformular einzurichten , um mit dem Sammeln von E-Mails zu beginnen Der nächste Schritt besteht darin, Ihre wichtigsten Seiten zu Kontakt, Datenschutzbestimmungen und Allgemeinen Geschäftsbedingungen zu erstellen Ihre wichtigsten Seiten zu Kontakt, . Testen Sie dann Ihr Blog auf dem Handy und stellen Sie sicher, dass alles auf allen Geräten gut aussieht. Wenn Sie fertig sind, teilen Ihr Projekt in der Skillshare Project Gallery Fügen Sie den Screenshot des Blogs, eine kurze Beschreibung Ihrer Nische und warum Sie sie ausgewählt haben Falls verfügbar, können Sie auch einen Live-Link zum Blog teilen. Ich würde mich freuen zu sehen, was du kreierst. Danke, dass du an diesem Kurs teilgenommen hast. Ich sehe dich beim nächsten Mal.