Werde Experte mit Elementor Pro MASTERY-Kurs: Anfänger bis Fortgeschrittene

1. Kursübersicht: Hallo, angehende Webdesigner und Freelancer. Ich bin Pre Meta Ihr Leitfaden für die ultimative Reise und Webdesign mit Elementor Page Builder, in dem Sie die Geheimnisse des Webdesigns lüften, ohne dass Sie programmieren müssen In den nächsten Kapiteln erhalten Sie die Freiheit, als freiberuflicher Webdesigner von überall aus zu arbeiten Stellen Sie sich vor, Sie beherrschen die Kunst von Elementor Pro beim Erstellen visuell beeindruckender und vollständig Kein Code, nur pure kreative Kraft. Sie tauchen tief in die Fähigkeiten ein, die Sie von den Grundlagen bis hin zu fortgeschrittenen Techniken auszeichnen Sie werden mehr für Ihre Arbeit verlangen. Erstellen Sie Websites, die auf Geschwindigkeit optimiert und bei Besuchern und Suchmaschinen gleichermaßen beliebt sind. Lernen Sie, lokal ohne Domain zu erstellen und benutzerdefinierte Menüs für eine nahtlose Navigation zu erstellen. Wir werden auch alle wichtigen Elemente untersuchen und die Leistungsfähigkeit von Element oder KI nutzen, um den Arbeitsablauf zu beschleunigen und visuell beeindruckende Websites zu entwerfen. Dieser Kurs richtet sich an alle, die eine Leidenschaft dafür haben, Websites zu erstellen ohne programmieren zu müssen. ob Sie davon träumen, eine Webdesign-Agentur zu gründen, Ihr Unternehmen zu gründen, Freelancer zu werden oder ob Sie einfach alles in einem umfassenden Kurs lernen möchten , dies ist Ihr Weg zum Erfolg. Aber das ist noch nicht alles Machen Sie sich bereit, ein Pop-up-Experte zu werden, sperren Sie Dutzende von Pro-Elementor-Widgets und entdecken Sie, wie Sie mit den kostenlosen Elementor-Funktionen beeindruckende Websites erstellen mit den kostenlosen Elementor-Funktionen beeindruckende Websites Vielen Dank, dass du meinen Elementor Pro Mastery-Kurs in Betracht gezogen meinen Elementor Pro Es sind absolut keine Programmierkenntnisse erforderlich, nur ein Computer und Internetzugang Alle in diesem Kurs verwendeten Tools und Softwares sind absolut kostenlos damit Sie Ihre Leidenschaft zum Beruf machen können. Tauchen wir mit Elementor Pro in die aufregende Welt des Webdesigns 2. WordPress-Installation und -Einrichtung: Erstens, willkommen zu diesem neuen Kurs. Ich freue mich so, dass du hier bist. Dieser Kurs hat buchstäblich die Fähigkeit, dein Leben für immer zu verändern, genau wie bei mir. Sie müssen diesen Kurs jedoch vollständig abschließen, um ohne weitere Umschweife von seinem Wert zu profitieren. Fangen wir einfach mit dieser Vorlesung an. Zuallererst müssen wir Zap und Press in unserem lokalen System installieren Zap und Press in unserem lokalen System Jetzt gibt es auch andere Möglichkeiten , mit Web Press zu beginnen Hauptsächlich, um einen Hosting-Dienst zu kaufen, egal ob es sich um Hostinger oder Site Drown Es gibt viele verschiedene Hosting-Dienstleister, aber ich empfehle nicht, plötzlich dafür zu bezahlen, während Sie lernen Nur weil Sie Ihr lokales System jederzeit nutzen und es wie einen Webserver verwenden können. Das werden wir heute lernen, um sicherzustellen, dass wir Web Press in unserem System installieren und in unserem lokalen System herumüben. Richtig. Wie Sie sehen, habe ich Google Chrome geöffnet und war auf der offiziellen Website von Zam. Im Download-Bereich sehe ich verschiedene Versionen zum Herunterladen für das Betriebssystem Abhängig von der Art des Systems, das Sie gerade verwenden, kann der Installationsvorgang nun des Systems, das Sie gerade verwenden, etwas anders sein Da ich ein Max-System verwende, wird der Installationsprozess im Vergleich zum Installationsprozess und Windows etwas kompliziert sein im Vergleich zum Installationsprozess und Windows etwas kompliziert , da Windows ein sehr optimiertes und lineares Installationssystem hat ein sehr optimiertes und lineares Installationssystem und keine weiteren zusätzlichen Dinge in Bezug auf die Windows-Installation erforderlich sind Während Sie im System vielleicht hier und da einige Änderungen in Bezug auf Berechtigungen vornehmen oder einige Dateien hier und da ändern müssen in Bezug auf Berechtigungen , aber machen Sie sich keine Gedanken darüber welches System Sie gerade verwenden, es spielt keine Rolle, weil ich die Schritte durchgehen werde , während ich dieses System erkläre, ich werde die Schritte für die Installation auf dem Max-System durchgehen . Aber ich zeige dir auch all die Dinge, die du für Windows tun musst oder wo genau du das Video überspringen kannst um mit der nächsten Vorlesung zu beginnen. Da ich ein Max-System verwende, werde ich die neueste Version des Zap herunterladen die neueste Version des Zap Gerade jetzt. Da ich Zap bereits installiert habe, werde ich es nicht noch einmal installieren Nun, Zap, im Grunde das, was es ist, es hat verschiedene Arten von Servern und Datenbanken wie Apache, meine QL und all diese verschiedenen Dinge Und es sorgt im Wesentlichen dafür, dass Ihr lokales System, Ihr Laptop oder Ihr PC als Webserver fungiert Was ist nun ein Webserver? Ein Webserver ist nichts anderes als eine Computerhardware. Bei Computersoftware ist es im Grunde der Computer selbst. Der Unterschied besteht jedoch darin, dass sie TTP-Anfragen und ihre Varianten wie STP-Anfragen akzeptiert , wie Hypertext-Übertragungsprotokoll und Hypertext-Übertragungsprotokoll, Secure Layer Was auch immer wir mit den Websites und Webanwendungen umgehen , wir senden eine Sie müssen das gesehen haben, wenn Sie versuchen , in einem Browser nach einer Website zu suchen , im URL-Bereich, obwohl Sie den Domainnamen selbst bemerken werden, aber wenn Sie darauf klicken, sehen Sie möglicherweise das S oder ETP. In einigen Szenarien , in denen einige Websites kein SSL-Zertifikat haben, wird dort möglicherweise STP angezeigt, gefolgt von einem kein SSL-Zertifikat haben, wird dort möglicherweise STP angezeigt, gefolgt Doppelpunkt und einem Doppelpunkt Das ist es also, was diese STP-Anfrage im Grunde bedeutet. Sie werden also Ihr System als Webserver einrichten, was nicht bedeutet, dass Ihr System nutzlos ist und es sich einfach wie ein Webserver verhält und Sie nicht in der Lage sein werden , andere Dinge zu tun , die Sie früher getan haben Es ist im Grunde nur so, dass es Ihnen hilft, Anfragen von Websites und Webanwendungen zu umgehen . Richtig? Sobald Sie diesen Zamp installiert haben, müssen Sie nichts weiter tun, klicken Sie einfach auf Weiter Wenn du für Mac installierst, dann brauchst du nur einen Dragon-Drop zu machen und der Zampill wird auf deinem System installiert Wenn Sie Windows verwenden, müssen Sie lediglich auf Weiter, Weiter, Weiter klicken, gefolgt von dem Speicherort im Browser, dem Sie die Dateien installieren möchten Ich würde empfehlen, dass Sie Ihren Zamp auf dem Laufwerk C installieren , auf dem sich Ihr Windows-Betriebssystem befindet, da dies den Vorgang rationalisiert Andernfalls werden Sie damit konfrontiert sein, dass Sie, sobald Sie Press installiert haben und versuchen , sich auf Ihrer Kleiderwebsite anzumelden und Änderungen an Ihrer Website vorzunehmen, möglicherweise einige Komplikationen auftreten Das ist der einzige Grund, warum ich empfehle Zap auf Ihrem Laufwerk zu installieren Sobald Sie mit der Installation des Zamps fertig sind, müssen Sie zu den Slash-Downloads von Press.org wechseln Jetzt gibt es zwei Websites von Wordpress. Offiziell. Die erste ist Tress.org, eine WordPress-Organisation, und die zweite ist WordPress.com Jetzt sage ich Ihnen allen, dass Sie zu Tress.org gehen sollen, weil Sie Zugriff auf die Open-Source-Software erhalten werden Zugriff auf die Damit Sie völlig kostenlos herunterladen und Ihre eigene Website von Grund auf neu erstellen können Was passiert, wenn Sie zu WordPress.com gehen? Nun, Sie erhalten Zugriff auf dieselbe Pressesoftware. Auf der anderen Seite wird Press im Voraus etwas Geld für ein monatliches Abonnement verlangen . Nur damit sie die Website auf ihrem Server hosten können. Sie versuchen also, Änderungen direkt auf dem Server und nicht in Ihrem lokalen System vorzunehmen. Das ist also der grundlegende Unterschied zwischen Dress.com und WordPress.org. Sobald Sie den Slash-Download-Bereich von Dress.org aufgerufen haben, finden Sie diesen Download-Button, gefolgt von der neuesten Version, unabhängig davon, was sich die Presse ausgedacht Slash-Download-Bereich von Dress.org aufgerufen haben, finden Sie diesen Download-Button, finden Sie diesen Download-Button gefolgt von der neuesten Version, unabhängig davon, was sich die hat Derzeit ist die Wordpress-Version 6.4 0.2 und das habe ich auf mein System heruntergeladen , wie Sie hier sehen können Jetzt wird eine Zip-Datei heruntergeladen. Es liegt in Ihrer Verantwortung , sie zu extrahieren , da es sich bei der ZIP-Datei um eine komprimierte Datei handelt und die unkomprimierte Datei, die all diese verschiedenen Ordner und Dateien enthält, eine unkomprimierte Version ist und viel mehr Speicherplatz beansprucht Das ist der einzige Grund, warum die ZIP-Datei heruntergeladen wird, wenn Sie zunächst auf die Download-Schaltfläche klicken zunächst auf die Sobald Sie aus der Zip-Datei extrahiert haben, bleiben Ihnen dieser Ordner und diese Datei übrig, und Sie müssen sie tatsächlich in den Zamp-Ordner einfügen Also werde ich einfach zum Teil „Anwendungen“ gehen . Alles klar? Ich gehe einfach zu den Anwendungen, und da wir einen Mac verwenden, folge ich diesem Schritt. Wenn Sie ein Windows-System verwenden, müssen Sie einfach zu Ihrem Laufwerk C wechseln, Ihren Am-Ordner durchsuchen, Am-Ordner durchsuchen, und sobald Sie den Zam-Ordner darin gefunden haben, werden Sie definitiv den ST-Doc-Ordner finden Innerhalb des ST-Doc-Ordners müssen Sie Ihren Presseordner hierher verschieben So einfach ist das, sonst nichts. Im Grunde sagen Sie dem Zam, dass Zap all diese verschiedenen Server hat , über die wir bereits gesprochen haben, Apache, meine CQL und all diese Dinge Wenn Sie diese Server einschalten, wird Ihre Wordpress-Website schnell erkannt Da wir unseren lokalen Host, unser lokales System, umgehen werden, wollen wir, dass sich die Presse überall am Tdcs-Standort befindet Jetzt müssen Sie nur noch in den Press-Ordner gehen und nach dieser Datei namens Hyphen Config suchen Beispiel für eine PHP-Datei mit Bindestrich. Das ist jetzt eine HP-Datei. Sie müssen einige Änderungen an der HP-Datei vornehmen. Jetzt müssen Sie nicht unbedingt Codierung und HP-Sprache kennen . In dieser Datei müssen jedoch nur wenige Änderungen vorgenommen werden , damit eine Datenbank für Ihre Wordpress-Website erstellt wird. Ich klicke einfach darauf und öffne es mit einem Texteditor. In Ordnung. Nun, je nachdem, welche Art von Texteditor-Software Sie in Ihrem System haben, kann es sich um einen VS-Code oder eine andere Notepad- oder eine andere Texteditorsoftware Sie können es damit öffnen. Und dann bis zu dem Teil in dem Sie diesen DB-Namen, den DB-Benutzer und das DB-Passwort finden können , richtig? DB-Name ist im Grunde der Name Ihrer Datenbank, DB-Benutzer ist der Benutzername Ihrer Datenbank und DB-Passwort ist das Passwort für Ihre Datenbank, oder? Jede Website benötigt Daten, und diese Daten werden in einem tabellarischen Format gespeichert Und diese Tabellen, eine Sammlung von Tabellen, werden eine Datenbank bilden Nun wird diese Datenbank gespeichert, Sie können sagen, in einem SQL oder nein. Ql Base Q ist im Grunde eine strukturierte Abfragesprache, und Qual ist keine unstrukturierte Abfragesprache wie Ihre Mongo-DB Und wir haben verschiedene Arten von Datenbanksoftware, die wir verwenden, da sie eine relationale QL-Datenbank verwendet Ich würde sagen, es benutzt mein Okay, mein QL in Apache Wir müssen einen Namen für diese Datenbank angeben. Wir nutzen eine Presse-Website. Wir geben diesen Namen als Presse an. Der Name der Datenbank wird Press sein und gebe ich in diese einzelnen Anführungszeichen ein in diese einzelnen Anführungszeichen Der Name für die Datenbank wurde angegeben, gefolgt vom Datenbankbenutzer , den ich als Root eingeben werde Nun, was bedeutet Root? Root ist im Grunde ein Konto in Ihrem lokalen System, unabhängig davon, ob Sie ein Max-System oder ein Windows- oder Linux-System verwenden . Root wird dort bleiben. Root-Konto ermöglicht den Zugriff auf alle Arten von Datenbanken. Wenn Sie Ihre Tress-Website verwenden , sagen wir einfach, Sie haben verschiedene Datenbanktabellen, Sie haben nur wenige Bilder in eine Datenbank für eine separate Presse-Website hochgeladen eine Datenbank für eine separate Presse-Website und Sie haben eine separate Presse-Website, und Sie haben eine separate Presse-Website, eine zweite Tress-Website Sie auf diese Dateien und Ordner von der vorherigen Presse-Website zugreifen möchten . über den Root-Benutzernamen zugreifen, können Sie die Daten aus verschiedenen Datenbanken abrufen die Daten aus verschiedenen Datenbanken Das ist es, was DB-Benutzer eigentlich meinen, und genau das macht das Root-Konto, gefolgt vom Passwort Sie müssen das Passwort leer lassen, also geben Sie nichts hinein. Wenn Sie versuchen, das DB-Passwort einzugeben. Sie möchten Ihre Datenbank nicht mit einem Passwort sperren. Sie möchten, dass die Datenbank für jede einzelne Website zugänglich ist. Richtig? Wenn Sie damit fertig sind, speichern Sie es einfach mit der Taste S, oder Sie können einfach hierher gehen und auf Speichern klicken. Stimmt das? Ich werde diese Datei einfach schließen. Ich mache einfach eine Kopie dieser Datei. Ich mache einfach eine Kopie hier drüben. Ich mache eine Kopie und füge sie direkt in diesen Ordner ein, wie Sie sehen können. Eine Kopie dieser Konfliktdatei wurde erstellt, aber ich werde die Kopie und die Beispielwörter daraus entfernen. Mir bleibt nur die PHP-Datei mit Bindestrich, Konfliktpunkt. Das wollen wir. Sobald wir das getan haben, öffne ich Amp und Manager SX. Da wir dieses Max-System verwenden, würde ich auf ManasX klicken Wenn Sie ein Fenstersystem verwenden, müssen Sie nur auf Zam klicken und die drei Server starten, die Ich gebe einfach das Passwort ein da es nur wenige Berechtigungen erfordert Sobald ich das Passwort eingegeben habe, öffnet sich der Sam-Ordner. Warte eine Sekunde. Es sieht so aus, als hätte ich ein falsches Passwort eingegeben. Ordnung. Warten wir einen Moment, bis wir den Samp öffnen Jep. Jetzt können wir Server verwalten Sobald wir Server verwalten, können wir Pro, Apache Web Server und meine Datenbanken sehen. Jetzt müssen Sie sie alle starten. Klicken Sie einfach auf die Schaltfläche Start, Alle starten, und alle drei Server werden gestartet. In einigen Situationen werden Ihre FTPD oder Meine Datenbanken gestoppt, werden Ihre FTPD oder Meine Datenbanken gestoppt auch wenn Sie auf die Schaltfläche Alle starten geklickt Sie wissen, was Sie tun müssen, ist einfach zum Aktivitätsmonitor auf Ihrem Max-System zu gehen , nach SCTPD, Q und Pro FTPD zu suchen und sie alle zu beenden . Alles klar? Nur dann wirst du all diese Dinge ausführen können . Jetzt minimieren wir das für einen Moment, okay? Es wird im Hintergrund weiterlaufen. Was wir tun werden, ist zu unserem Google Chrome zu gehen. Und ich klicke auf einen neuen Tab und suche nach dem lokalen Host-Hypun PHP, meinem Administrator . In Ordnung Php, mein Admin. Ich kann einfach auf den Drop klicken. Okay. Löschen bedeutet im Grunde, dass Sie diese Datenbank gelöscht haben. Ich klicke auf New Press und dann auf Create. Ordnung. Der Datenbankname Wordpress wurde in meinem lokalen Hostsystem erstellt. Sie müssen keine Namen oder Anzahl von Spalten oder ähnliches hinzufügen . Du musst nur zurück gehen und in deinem Ural-Bereich statt HV, meinem lokalen Admin-Host-Bindestrich, Wordpress ist das, wonach du suchen musst Ordnung. Gib ihm etwas Zeit. Es öffnet sich diese Seite und Sie klicken einfach auf die Sprache, mit der Sie gerne auf Ihrer Wordpress-Website arbeiten. Für die meisten von uns wäre es jetzt Englisch mit der Version für die Vereinigten Staaten. Also klicke ich einfach auf Weiter. Ich werde den Titel meiner Wordpress-Website auf alles Mögliche setzen. Es könnte Ihr Firmenname sein, Ihr Portfolioname, was auch immer Sie beabsichtigen, den Titel Ihrer Website beizubehalten , da Sie ihn hier eingeben können. Aber vorerst behalte ich den Seitentitel einfach als Presse. In Ordnung, Nutzername. Es muss Admin sein. Nun, dieser Benutzername unterscheidet sich dem Benutzernamen, den wir für unsere Datenbank angeben. Für die Datenbank haben wir den Benutzernamen als Route angegeben, was bedeutet, dass dieses Konto Zugriff auf alle verschiedenen Datenbanken hat , wohingegen dieser Admin-Benutzername für den Zugriff auf Ihre spezielle Wordpress-Website bestimmt ist . So wie Sie verschiedene Google-Konten haben, Ihre Gmail-Konten, richtig? Sie haben unterschiedliche Nutzernamen, unterschiedliche E-Mail-IDs und ein anderes Passwort dafür Bei Ihrem Telefonpasswort und Ihrem Telefonbenutzernamen ist dies nicht der Fall Ihrem Telefonpasswort und Ihrem Telefonbenutzernamen . Ich hoffe, du verstehst, worum es geht. Also hier gibst du den Namen als Admin an. Admin bedeutet nicht unbedingt, dass du deinen Nutzernamen als Admin behalten musst, sondern was es im Grunde bedeutet , dass du, wenn du mehrere Nutzernamen hast, mehrere Zugriffe auf deine Arbeitspresse-Website Ja, das ist möglich. Nehmen wir an, Sie liefern diese Website in Zukunft an einen Kunden, Sie agieren als Freelancer, oder? Und Sie möchten diese Website an einen Kunden liefern , der dann später einige Beitragsseiten verwalten und nur wenige Medieninhalte von seiner Seite hochladen kann einige Beitragsseiten verwalten . Dann möchten Sie ihnen den Editor-Zugriff geben , aber nicht den Admin-Zugriff. Administratorzugriff haben Sie Zugriff auf all die verschiedenen Plug-ins, zusätzliche Einstellungen und im Grunde auf den gesamten Zugriff auf die Website. Grund, warum wir einen Benutzernamen namens admin haben, der die Kontrolle über die gesamte Website hat, und dann haben wir unterschiedliche Benutzernamen Wenn du also mit deinem Namen als Nutzernamen weitermachen möchtest , denk einfach daran, dass dies dein Admin-Zugang ist Das bedeutet, dass Sie die gesamte Kontrolle über die Website haben. Richtig, gefolgt von einem Passwort. Nun, warum benötigen wir ein Passwort? Da Wordpress Open Source ist, besteht eine große Wahrscheinlichkeit Ihre Website gehackt wird bedeutet nun nicht, dass Wordpress unsicher ist und Sie das Wordpress-CMS nicht weiter verwenden sollten Nein, das ist absolut falsch. Ich glaube, etwa 43% der Internet-Websites werden mit Hilfe von Druckmaschinen erstellt. Wenn es einen so großen Fehler gegeben hätte, dann glaube ich nicht, dass so viele Websites mit Druckmaschine erstellt worden wären Aber der einzige Sinn eines Passworts ist , dass Sie, da ich vor ein paar Minuten darüber gesprochen habe , mehrfach auf diese Wordpress-Website zugreifen können auf diese Wordpress-Website Sie haben einen Benutzernamen und ein Passwort. Wenn Sie also jemandem einen redaktionellen Zugriff gewähren und den Administratorzugriff behalten möchten, benötigen Sie einen Benutzernamen und ein Passwort. Also gebe ich einfach ein Passwort und ich werde mein Passwort verstecken, sodass selbst du weißt, dass du kein Passwort sehen kannst das ich für meine Wordpress-Website verwende. Ich mache einfach mit dem Passwort weiter , das ich derzeit habe. Es spielt trotzdem keine Rolle, dass ich ein Wochenpasswort eingebe. Ich werde mit einem schwierigen Passwort weitermachen, nur um euch zu zeigen, dass dies die sichere Methode ist, die man befolgen sollte, okay. Ordnung, das ist mein sicheres Passwort und Sie kreuzen dieses Kästchen nie an. Dies sagt uns im Grunde, dass eine Suchmaschine Ihre Website nicht aufruft. Wenn Sie dieses Kästchen ankreuzen. Auf diese Weise können Suchmaschinen davon abgehalten werden, diese Website zu indexieren Und wir wollen nicht , dass das passiert. Wir möchten, dass unsere Website von Suchmaschinen erkannt wird. Aber mach dir keine Sorgen. Auch wenn Sie klicken, klicken Sie nicht auf diese Option. Suchmaschinen werden derzeit niemals in der Lage sein, Ihre Website zu indizieren , da diese Website nicht im Internet gehostet wird . befindet sich in Ihrem lokalen System und Ihr lokales System verhält sich vorübergehend wie ein Webserver , wenn Sie Änderungen an Ihrer Website vornehmen Ich hoffe, du verstehst, worum es geht. Sobald Sie all diese Dinge getan haben, klicke ich auf Installieren, drücke aber die Taste. Der einzige Grund, warum ich mit all diesen verschiedenen speziellen Details weitermache all diesen verschiedenen , ist, dass ich keine der Details auslassen möchte und ich möchte euch nicht im dunklen Schatten halten , die gerade mit dem Installationsteil angefangen haben. Und wenn Sie das getan haben, machen Sie mit dem Hauptzweck des Kurses weiter. Ich möchte nicht, dass das passiert. Wenn ihr etwas leitet, stellt sicher, dass ihr jedes einzelne Ding lernst , was auch immer. Es ist wichtig für euch, es ist wichtig , jedes einzelne bisschen davon zu lernen. Jetzt sagen sie, dass Sie eine E-Mail-Adresse angeben müssen. Ich muss die Eingabe der E-Mail verpasst haben. Ich schätze, früher war die E-Mail-Option optional, aber jetzt denke ich, dass sie wichtig ist. Geben wir also einfach meine E-Mail-Adresse ein. Okay, ich gebe meine geschäftliche E-Mail-Adresse ein. Und ich klicke auf Installieren, drücke. In Ordnung, also lass uns einfach etwas Zeit damit verbringen. Ordnung, also Press wurde installiert und ich klicke auf Anmelden. Ich gebe den Benutzernamen ein oder ich kann meine E-Mail-Adresse eingeben. Richtig? Und dann gebe ich das Passwort ein. Ich kann auf „ B speichern“ klicken, sodass ich jedes Mal diese auf meinem lokalen Server gehostete Presse-Website zugreifen möchte , mich nicht immer wieder anmelden muss und Sie die Tress-Website auf Ihrem Bildschirm sehen. Das heißt aber nicht , dass wir unseren gesamten Schritt abgeschlossen haben. Nein, das ist erst der Anfang. Ja. Für Windows-Benutzer sind Sie so gut wie fertig. Sie können diese Lektion ab jetzt einfach überspringen, aber Sie können zur nächsten Vorlesung übergehen . Das meinte ich. Aber für die Mac-Benutzer haben Sie noch ein paar Dinge zu tun. Der einzige Grund, warum die Mac-Benutzer noch einige Dinge zu tun haben , ist, dass der Mac verschiedene Arten von Sicherheitsebenen und unterschiedliche Berechtigungen für jede einzelne Ordnerdatei und all diese Dinge hat verschiedene Arten von Sicherheitsebenen und unterschiedliche Berechtigungen für jede einzelne Ordnerdatei . Das ist der einzige Grund, warum wir einige Änderungen vornehmen müssen. Ich werde diese Kleiderwebsite vorerst schließen. Ich werde in den Amp-Ordner wechseln . Das ist der Amp-Ordner, und ich habe einen EDC-Ordner In diesem EDC-Ordner finde ich die httpd-Konfigurationsdatei Okay? Ich werde diese Konfigurationsdatei finden. Jetzt muss ich das bearbeiten, ich muss diese Datei bearbeiten. Jetzt bearbeite ich diese Datei. Was ist der Zweck davon? Was passiert, ist, dass eine Tres-Website, nur eine leere Tres-Website, Sie nicht an den Punkt bringt , an dem Sie tatsächlich etwas erstellen möchten , um mit einem Theme-Builder zu beginnen, sei es Element oder Elementor Pro oder DV, der Theme-Builder, die Sie lernen und verwenden möchten Um dieses Plug-In zu installieren, müssen Sie einige Themes für Ihre Website oder einige zusätzliche Plugins installieren , sei es für SEO-Zwecke oder für einige andere Funktionen , die Sie aus diesen Gründen möglicherweise hinzufügen möchten. Um Plug-ins zu installieren, müssen Sie Änderungen an der Konfliktdatei vornehmen. Selbst wenn Sie versuchen, beispielsweise Bilder oder Videos hochzuladen , erlaubt Ihnen der Mac das möglicherweise nicht. Oder vielleicht haben wir nicht den vollen Zugriff auf die Elemente, die Sie hochladen möchten. Aus diesen Gründen versuchen wir, Änderungen an dieser speziellen Konfliktdatei vorzunehmen . Wir suchen bis zu dem Teil, in dem wir den Benutzer-Dämon finden , indem wir die Taste F oder den Befehl verwenden Wenn du siehst, kannst du sagen, für Mac-System habe ich gerade nach dem Benutzer Demon gesucht. In Ordnung. Also Benutzerdämon und Gruppendämon sind zwei Dinge, die ich hier besonders habe. Jetzt hat es diese speziellen Dinge automatisch erkannt Okay, warum? Also, weil Zap bereits in meinem System installiert war Wie Sie wissen, habe ich in der Vergangenheit bereits eine Wordpress-Website erstellt, tatsächlich viele Wordpress-Websites in der Vergangenheit in diesem System selbst In Ihrem Fall finden Sie diesen Benutzer zunächst möglicherweise nicht, finden Sie diesen Benutzer zunächst möglicherweise nicht gefolgt von meinem Namen und diesen Gruppenmitarbeitern. Sie werden nur diesen Benutzerdämon und diesen Gruppendämon sehen. Okay, du musst diese beiden Zeilen kommentieren. Nun, was bedeutet Kommentar? Kommentar bedeutet die Zeilen die Ihr Compiler speichern wird, aber er wird sie nicht erkennen Er wird es nicht lesen und ausführen. Es wird als Referenz da sein, aber nicht als Referenz für die Compiler. Gehen Sie nicht in die Tiefe, es sei denn, Sie sind noch nie auf einige Programmierkurse oder einen meiner Programmiersprachenkurse gestoßen einige Programmierkurse oder , insbesondere auf den Stag-Webentwicklungskurs Mach dir darüber keine Sorgen. Denken Sie nur daran, dass ein Kommentar im Grunde bedeutet, dass Ihre Software diese Codezeile nicht versteht. Aber du wirst es lesen, nicht ausführen, du wirst es einfach lesen. Es ist nur zu Ihrer Information, wir löschen diese Codezeilen nicht , wir behalten sie nur. Ordnung, lassen Sie mich hier einfach herausfinden, dass wir einfach ein Pfundsymbol vor diesem Satz hinzugefügt haben und es wird die jeweilige Codezeile kommentieren, gefolgt von, Sie müssen Benutzer mit Großbuchstaben schreiben , gefolgt von diesem Ding. Nun, wie werden Sie in Ihrem Fall wissen, wie der Benutzername Ihres Systems lautet? Öffnen Sie einfach das Terminal, indem Sie die Befehlstaste und die Leertaste gleichzeitig die Befehlstaste und die Leertaste drücken, und suchen Sie einfach nach Terminal. Sobald Sie die Eingabetaste gedrückt haben, suchen Sie einfach nach ID und geben Sie die Eingabetaste ein. Sobald Sie nach ID suchen, finden Sie U, ID entspricht in meinem Fall 501, gefolgt von einer Klammer , in der Sie den Benutzernamen finden Okay? Das musst du kopieren und hier einfügen, wo du, okay, diese bestimmte Zeile sehen kannst . In der nächsten Zeile müssen Sie eine Gruppe mit dem Großbuchstaben hinzufügen , gefolgt von dem Gruppennamen, den Sie haben. Öffnen Sie erneut das Terminal und Sie finden die Gruppe genau hier. Wir haben Gruppen , die in meinem Fall zwanzig entsprechen. Und in der Gruppe habe ich Mitarbeiter. Das kopiere ich und füge es hier ein. Sobald Sie das getan haben, speichern Sie diese Datei einfach erneut mit dem Befehl S oder Sie können einfach auf Speichern klicken, indem die Datei drücken und auf Speichern klicken. Okay, sobald Sie das getan haben, schließen Sie einfach das Terminal und schließen Sie die Konfigurationsdatei. Und als Nächstes müssen Sie nur zu Ihrem Presseordner zurückkehren. Wir haben diese Konfigurationsdatei, okay, nicht das Beispiel, okay? Stellen Sie sicher, dass Sie nicht auf die Beispieldatei klicken. Sie klicken auf den Bindestrich, den Konfigurationspunkt PHP-Datei, Öffnen mit Texteditor, Softwaresuche bis zu dem Teil, in dem Sie die Konfiguration finden Okay, irgendwo in der Nähe. Okay, sobald du drückst, liegt WP-Unterstrich im Grunde dort, wo du das findest, direkt darunter Füge diese spezielle Codezeile hinzu, die ich einfach eingebe und schreibe definiere Klammer, offene Klammer gefolgt von einem Leerzeichen In S ist das Unterstrichverfahren für Dateistreams, okay, Methode, Single erfunden, gefolgt von a. Dann müssen wir wieder in einzelne Anführungszeichen schreiben, was direkt ist. Dann müssen wir wieder in einzelne Anführungszeichen schreiben wieder in einzelne Anführungszeichen Das bedeutet, dass es Ihrem System im Grunde ermöglicht , all die verschiedenen Arten von Themen zu akzeptieren, Ihre ZIP-Dateien oder vielleicht Bilder oder Videos oder Audios oder J-Dateien, alles , was Sie hochladen oder Änderungen an der Datenbank vornehmen möchten. Sie geben die Rechte der Lese-Schreib-Methode , das ist es, was Sie tun Und klicken Sie einfach auf Speichern. Ich klicke einfach auf Datei und dann auf Speichern. Sobald Sie das getan haben, schließen Sie es wieder. Klicken Sie im Inhalt einfach auf Inhalt und dann mit der rechten Maustaste auf den Inhalt. Gehen Sie, um Informationen von Read Only zu erhalten. Lass es lesen, schreiben, lass es auch lesen, schreiben, was jeder ist. Hier wird dein Nutzername stehen , der standardmäßig gelesen, geschrieben wird. Die anderen beiden werden nur gelesen. Sie müssen diese Lese- und Schreibberechtigung ändern. Tun Sie das, denn ich glaube, all diese Ordner, die WP-Inhalte sind, beinhalten Admin, okay? In den WP-Inhalten findest du möglicherweise auch Plugin-Designs und Uploads Machen Sie dasselbe für all diese verschiedenen Ordner und ändern Sie nur die Berechtigungen Dann können Sie verschiedene Themen herunterladen, auf verschiedene Themen zugreifen, löschen diese verschiedenen Themen löschen und so weiter. Okay, genau das mache ich hier. Sobald du das getan hast, denke ich, wirst du ziemlich gut darin sein , mit deinem Kurs zu beginnen. 3. Themen-Installation und Erste Schritte mit Wordpress: Was ist los, alle? Willkommen zurück zum Video. In diesem Videovortrag zeige ich Ihnen allen, wie wir ein neues Theme auf einer Wordpress-Website installieren können. Genau hier bin ich auf der Startseite meiner Website. Und hier finden Sie einige der Dinge, die bereits vorhanden sind. Nun, das sind die Dinge , die ich nicht manuell hinzugefügt habe. Das liegt daran, dass derzeit ein Thema verwendet wird. Ganz oben finden Sie diese schwarze Leiste, in der wir das Wordpress-Logo und die Wordpress-Option haben. Von dort aus können wir zwischen den verschiedenen Themen dieser Website navigieren und zu unserem Wordpress-Dashboard zurückkehren. Wir können diese Seite unserem Wordpress-Editor bearbeiten und die Gutenberg-Blogs verwenden Und dann haben Sie die Möglichkeit, Kommentare hinzuzufügen. Genau hier im Plus-Symbol finden Sie den Benutzer der Post-Media-Seite. Mit dieser Hilfe können Sie einen neuen Beitrag hinzufügen. Es könnte ein Blogbeitrag oder vielleicht eine Produktseite oder eine Serviceseite sein. Sie können Medien hinzufügen und Sie können sogar eine neue Seite hinzufügen. Medien bedeutet im Grunde, dass, ob Sie ein neues Bild, eine GIF-Datei oder eine Videodatei hochladen möchten GIF-Datei oder eine Videodatei im Grunde genommen bedeutet, dass Sie versuchen, eine neue Seite zu erstellen. Ob es sich um eine Homepage über eine Seite, eine Kontaktseite, eine Serviceseite usw. handeln könnte . Ja, Sie können mehrere Benutzer hinzufügen , die auf derselben Presse-Website arbeiten. Genau hier, der äußerste rechte Teil dieses schwarzen Balkens. Du wirst dein eigenes Profil finden. Also, was ist der Nutzername deines Profils? Profiloptionen wurden hinzugefügt und um sich von der Option abzumelden, rechts, es gibt eine Suchleiste, um zwischen verschiedenen Elementen zu suchen , die sich genau hier befinden. Gehen wir hier zurück zum Dashboard. Wie Sie in diesem Bereich sehen können, haben wir Home-Updates. Updates werden alle Updates angezeigt , die aktualisiert werden müssen. Im Grunde geht es um unsere Plug-ins, aber im Moment haben wir keine Plugins installiert. Dann haben wir die Möglichkeit , Medienseiten zu posten, Kommentare, die wir hier in der oberen schwarzen Leiste gesehen haben. Dann haben wir den Bereich Erscheinungsbild. In diesem Abschnitt mit dem Erscheinungsbild finden Sie nun Themen. Gehen wir einfach darauf ein und Sie werden drei Themes finden , die bereits auf unserer Website installiert sind, nämlich 2024, 2020, 3.20, 22. Jetzt habe ich sie nicht manuell installiert. Es war bereits vorhanden, als ich meine Wordpress-Website installiert habe . In Ordnung, aber wir benötigen nicht einmal alle drei. Wir benötigen keinen von ihnen. Wir wollen ein neues Thema. Lass uns einfach ein neues Thema hinzufügen. auf diese Option klicken, können wir zwischen verschiedenen Themen suchen. Ich werde einfach nach einem Block suchen. Lass uns hier einsteigen, du wirst diese Option finden. Lass uns auf Installieren klicken. Während der Installation gehen Sie möglicherweise davon aus, dass das Theme einsatzbereit ist Sie möglicherweise davon aus, dass , sobald wir auf Installieren klicken . Nein, Sie erhalten eine weitere Option, um das Theme zu aktivieren. Das bedeutet, dass auf Ihrer Tress-Website möglicherweise mehrere Themes auf Ihrer Website installiert sind, aber im Moment kann nur eines aktiviert werden. Lassen Sie uns im Moment die Blockierung aktivieren und wir kehren zu unserem Themenbereich zurück unserem Themenbereich und deaktivieren und löschen alle anderen. Gehen wir zu den Themendetails. Wir haben die Möglichkeit, sie zu löschen, lassen Sie uns sie löschen. Dieser auch, damit wir Speicherplatz für unsere Website freigeben können. Sie werden feststellen, dass dies unser Block-Theme ist , das wir verwendet haben. Abgesehen von Block gibt es jetzt viel mehr Themen, die die Leute verwenden. Hauptsächlich Astra. Aber ich werde in diesem Kurs nur zeigen , warum Block erforderlich ist. Ordnung, hier in der Blockdarstellung wirst du feststellen, dass Bo gleich hier erscheint , nachdem wir das Theme installiert haben Anfangs hatten wir nur Themes und ich glaube, wir hatten einen Editor, oder? Nur diese beiden Optionen waren verfügbar. Aber im Moment haben wir Widgets, Menüs blockieren. Gehen wir zu Block und sehen , welche Optionen wir haben. Genau hier haben wir nützliche Plug-ins und das Änderungsprotokoll zu Hause. Aber wenn wir in dieser Home-Option selbst nach unten scrollen, finden Sie eine Option zur Installation des Block Companion-Plug-ins. Wir werden auch dieses installieren. In Ordnung, was werden wir tun? Wir kehren zu unserer Menüoption zurück. Ordnung. Warum brauchen wir jetzt ein Menü? Wenn Sie also eine Zeile auf einer Website aufrufen, sehen Sie immer eine Kopfzeile oder eine Navigationsleiste, von der aus Sie zwischen verschiedenen Seiten navigieren können. Richtig? Ob Sie von einem Mobilgerät, einem Desktop-Bildschirm oder einem Tablet-Gerät aus zugreifen, es spielt keine Rolle. Sie finden die Navigationsleiste immer oben auf Ihrer Website. Gut, also etwas Ähnliches wollen wir auch für diese Website. Lassen Sie uns also einen Namen für dieses Menü erstellen. Wir können also etwas wie Navbar oder Hauptmenü angeben. Geben wir einfach Navbar ein und ich wähle Header-Menü Ordnung, jetzt wird Navbar, der Name unseres Menüs, nur für uns zugänglich sein Das heißt, der Name wäre für die Besucher, die auf unserer Website landen, nicht sichtbar die Besucher, die auf unserer Website landen, Ich hoffe, du verstehst, worum es geht. Und lassen Sie uns ein Menü erstellen. Sobald ich also ein Menü erstellt habe, werden Sie feststellen, dass es im Viewll-Bereich, auf der Startseite und auf der Beispielseite einige Seiten Viewll-Bereich, auf der Startseite und auf der Beispielseite Aber gehen wir zu unserem Seitenbereich , um zu sehen, welche anderen Seiten wir haben Wir haben eine Beispielseite und eine Seite mit Datenschutzrichtlinien , von denen nur ein Beispiel aktiviert ist. Das bedeutet, dass es derzeit verwendet wird. Und diese Seite, bei der es sich um eine Seite mit Datenschutzrichtlinien handelt, ist im Entwurf mehr enthalten, das heißt, sie ist nicht veröffentlicht. Wir wollen keine dieser beiden Seiten, also nehmen wir einfach beide. Und im Bereich Massenaktionen können wir auswählen, was den Papierkorb verschoben wurde, sodass mehrere Elemente gleichzeitig gelöscht werden können. Gut, Sie können also feststellen , dass keine Seiten gefunden wurden. Fügen wir also ein paar Seiten hinzu, indem wir auf diese Schaltfläche Wir können dieser Seite einen Titel hinzufügen. Geben wir dem also so etwas wie eine Homepage. Sobald wir das getan haben, werden Sie in rechten Messerleiste , dass wir eine Seite haben und Sie einen Block haben. Auf dieser Seite findest du eine Zusammenfassung, auf die wir später noch eingehen werden. Dann haben wir Block, wir haben hier auch ein Block-Theme-Symbol, dem Sie zwischen verschiedenen Seitenstrukturen und verschiedenen Designstilen wählen können verschiedenen Seitenstrukturen und verschiedenen . Ordnung, aber wir werden jetzt nicht ins Detail gehen In Ordnung, aber wir werden jetzt nicht ins Detail gehen und alles, was wir hier haben, behandeln , weil wir auch andere Vorträge geplant haben. Klicken wir erneut auf Veröffentlichen. Ordnung. Lass uns hier eine neue Seite hinzufügen. Sie können eine Option zum Hinzufügen einer neuen Seite sehen. Wir klicken einfach hier und fügen eine „Über uns “ -Seite hinzu. Ich klicke auf Veröffentlichen und Veröffentlichen, okay. Lass uns eine weitere Seite hinzufügen und ihr so etwas wie Kontakt geben. Lassen Sie uns eine weitere Seite hinzufügen, indem wir auf diese Schaltfläche klicken, und ich kann so etwas wie eine Kontaktseite angeben. Ordnung, kontaktiere uns. Lass uns veröffentlichen. Ordnung. Sobald es veröffentlicht wurde, gehe ich zurück zu meinem Tress-Dashboard Hier können Sie sich über uns informieren und uns kontaktieren. Gehen wir zu den Menüs, damit wir drei dieser Seiten zu unserer Navigationsleiste hinzufügen können . In Ordnung, also Erscheinungsbildmenüs. Und hier haben wir unsere eigene Bar kreiert, oder? Im neuesten Bereich finden Sie die Startseite über Kontakt und View Sie finden zwei Homepages. Nun, warum ist das so? Lass es mich dir einfach zeigen. Um sie alle einzubeziehen, kann ich einfach alle auswählen und dem Menü das Jahr hinzufügen. Sie werden einen benutzerdefinierten Link für diese Startseite finden und eine Seite für diese Homepage haben wir gerade erstellt. Die Seite beinhaltet alle anderen Dinge , die eine Webseite benötigt. Sei es ein Titel, der Hauptteil der Seite, ausgewähltes Bild, der Auszug einer Seite und ähnliches Aber für benutzerdefinierte Links können Sie dies hinzufügen Alles andere, es könnte ein Link zu Ihrer Facebook- oder Instagram-Seite sein und Sie können das Label so ändern , dass Sie meinem Facebook folgen , so ähnlich. Aber im Moment benötigen wir keinen benutzerdefinierten Link zu unserem Menü. Wir können das vorerst einfach entfernen und schon haben wir Kontakt und Startseite. Dies ist jedoch keine korrekte Reihenfolge oder Struktur für unsere Navigationsleiste. Wir sollten immer unsere Startseite, dann die Info-Seite und dann die Kontaktseite anzeigen . Lassen Sie mich es einfach hierher ziehen und platzieren. Sagen wir einfach, dass Sie auch eine weitere Seite hinzufügen. Es könnte eine Service - oder Produktseite sein. innerhalb der Dienstleistungen, die Sie anbieten, Nehmen wir an, innerhalb der Dienstleistungen, die Sie anbieten, Ihr Unternehmen, ein Webdesign- und SEO-Unternehmen. Und Sie bieten Dienstleistungen wie Webdesign, SEO und E-Commerce an. Unter oder besser gesagt unter Dienstleistungen bieten Sie diese drei Dienstleistungen an. Sagen wir einfach, dass der Unterpunkt Ihren Benutzern erlauben, auf das Drop-down-Menü zu klicken und die About-Seite aufrufen zu lassen, zu einem Unterpunkt von Home wird. Kontakt könnte auch der Unterpunkt „Über uns“ sein, nicht „Zuhause“, da Sie die Struktur sehen können. Aber lassen Sie uns einfach so etwas wie Home, Über uns und Kontakt auf allen drei einzelnen Seiten verwenden. Gut. Und wir können das Menü speichern. Wenn wir auf unsere Wordpress-Website gehen und genau das besuchen, was wir bekommen, können Sie feststellen, dass dies der Titel für unsere Wordpress-Website ist. In der Navigationsleiste oder Kopfzeile haben wir verschiedene Seiten, die wir erstellt haben, und sie sind perfekt so ausgerichtet , wie wir sie anzeigen wollten. Fein. Nun, was ist ein Thema? Wir haben Block C tatsächlich in unserem System installiert, aber warum brauchen wir ihn? Was ist ein Wordpress-Theme? Jede Website, die Sie mit Wordpress erstellen , benötigt ein bestimmtes Wordpress-Theme. Ohne sehr technisch zu werden, werde ich nur einige Dinge über das Wordpress-Theme ansprechen. Im Grunde genommen handelt es sich um einen allgemeinen Stil und ein allgemeines Layout Ihrer aktuellen Website. Jedes Wordpress-Theme hat verschiedene Optionen im Theme-Customizer, die wir gleich eingehen werden Und diese Optionen können von der Anpassung Ihres Headers reichen , die wir hier haben Die Startseite Über uns kontaktieren Sie uns. Und die Fußzeile, die wir am untersten Teil unserer Seite haben untersten Teil unserer Seite Erstellen Sie verschiedene Blockbeiträge die die Breite Ihrer Website steuern, z. B. Blöcke oder volle Breite, oder bestimmte E-Commerce-Funktionen wie Ihre Produktlayouts oder verschiedene Layouts für Shop-Seiten Grundsätzlich können Sie all die vorgefertigten Dinge , die wir in einem Wordpress-Theme erhalten, zwischen ihnen anpassen. Es geht also im Grunde um ein Wordpress-Theme. Im Allgemeinen steuert es also das Layout und den Stil Ihrer aktuellen Wordpress-Website. Und sie erstellen die Website nicht, also machen Sie sich das ganz klar. Ein Seitenersteller wie Elementor oder DV ist erforderlich, um Ihre gesamte, Ihre gesamte Website zu erstellen Theme hingegen ist eher eine Außenschale für die Seitenersteller und ein Ausgangspunkt für die Erstellung Ihrer Wordpress-Website Sie hoffen also, dass Sie hier in der oberen Leiste den Sinn der Verwendung und Installation des Wordpress-Themas in unserem System Wordpress-Themas in unserem System verstanden haben. Zuvor haben wir keine Option zum Anpassen gefunden. Wir hatten die Möglichkeit, die Seite zu bearbeiten, aber nicht anzupassen. Derzeit haben wir die benutzerdefinierte Option. Sobald wir also beim Anpassen auf diesen Pinsel klicken, werden Sie feststellen, dass unser Presse-Theme-Editor einen Bloxy-Theme-Editor weglässt Sie können feststellen, dass das derzeit aktivierte Theme Blox ist. Sie können sogar zwischen verschiedenen Themen wechseln, je nachdem wie viele Themen Sie auf Ihrer Presse-Website installiert haben Aber da wir vorerst nur eines haben und wir andere Themen in den Papierkorb verschoben haben, haben wir nur eines. Wenn ich nun die Startseite als aktuellen Ausgangspunkt festlegen möchte , diese als Standardseite, wenn jemand auf unserer Website landet, dann sollten wir dies als Standardseite festlegen. Wie werden wir also vorgehen? Genau hier im unteren Teil unseres Theme-Editors findest du Sign Identity-Menüs , die Homepage-Einstellungen und zusätzliches CSS hinzufügen Gehen wir also zu den Homepage-Einstellungen. Und hier wird standardmäßig Ihr letzter Beitrag ausgewählt. Das heißt, welcher Beitrag oder welche Seiten auch immer erstellt werden sollen, der neueste, wird als Standardbildschirm angezeigt. Aber das ist etwas , was wir nicht wollen. Wir wollen eine statische Seite. Das heißt, das , was Sie ausgewählt haben , bleibt die ganze Zeit erhalten, die Website bleibt am Leben. Also wählen wir die statische Seite aus, wählen die Startseite als Startseite und wir veröffentlichen einfach. Ordnung, hier haben wir die Homepage und wir wählen sie aus. Wir gehen zurück und vielleicht finden Sie andere Optionen, die wir später besprechen werden. Aber lassen Sie uns das vorerst einfach schließen. Und wann immer jemand die Website aktualisiert, haben wir hier den lokalen Host Wordpress und Sie finden die Startseite als Standardseite wieder zu Ihrem Dashboard zurückkehren, finden Sie manchmal möglicherweise keinen Zugriff auf die obere Leiste oder das Dashboard Dies könnte möglich sein , weil Sie sich jetzt möglicherweise nicht auf Ihrer Wordpress-Website angemeldet haben jetzt möglicherweise nicht auf Ihrer Wordpress-Website um sich anzumelden, oder an der URL-spezifischen URL. Damit Sie loslegen und sich in Ihren Admin-Zugang einloggen können, müssen Sie den Namen Ihrer Website als lokalen Host-Schrägstrich eingeben Namen Ihrer Website als lokalen Host-Schrägstrich In unserem Fall ist das Wordpress. Dann haben wir wieder einen Schrägstrich und dann schreibst du WP Hyphen admin Es bedeutet im Grunde, dass Wordpress Admin-Zugriff hat. Es gibt also mehrere Zugriffe auf Ihre Wordpress-Website. Es gibt Redakteure, es gibt Abonnenten und es gibt Admins und so weiter. Wir wollen also einen Administratorzugriff, damit wir mit einer Wordpress-Website beginnen und Änderungen daran vornehmen können. Bevor ich diesen Vortrag beende, möchte ich nur hier und da ein paar Dinge zeigen. Genau hier im Dashboard findest du Einstellungen unter Einstellungen findest du auch andere Optionen wie allgemeines Schreiben, Lesen, Diskussionsmedien pro Nachricht und Datenschutz Du brauchst dir keine Gedanken über all die anderen Dinge zu machen, die wir gerade haben . Konzentrieren wir uns einfach auf Allgemeine und die anderen Dinge, die wir haben. Genau hier ist Parmelings , über das ich gerade berichten werde. Andere Dinge werden wir später in diesem Kurs behandeln. Weil ich gerade das Gefühl habe, alles zu zeigen und zu besprechen, wird sich alles sehr überwältigend anfühlen. Ich gehe einfach zu den allgemeinen Einstellungen und hier findest du den Seitentitel , den wir auf Wordpress gesetzt haben. Jetzt, während wir unsere Tres-Website installiert haben, haben wir den Titel später auf Wordpress gesetzt. Wenn Sie ihn ändern möchten, können Sie einfach zu den Einstellungen unter Allgemeine Optionen zurückkehren Sie können den Seitentitel ändern. Jetzt finden Sie hier auch den Slogan. Jetzt ist der Slogan optional. Nehmen wir an, Sie erstellen eine Unternehmenswebsite so etwas wie Nike Jetzt hat Nike einen Slogan wie Just Do It. Sie können „Just Do it“ in den Slogan und den Nike-Insite-Titel schreiben den Slogan und den Nike-Insite-Titel Dann haben Sie die Wordpress-URL-Seitenadresse RL, über die Sie sich derzeit keine Gedanken machen müssen Sie haben auch eine Admin-E-Mail-Adresse. Nun, welche E-Mail-Adresse Sie auch immer bei der Installation von Wordpress festgelegt haben, Sie setzen sie auf eine E-Mail-Adresse, die Sie aus irgendeinem Grund ändern möchten , damit Sie hierher zurückkehren und die E-Mail-Adresse ändern können . Richtig. Andere Dinge, die wir derzeit auf dieser Seite haben, darüber brauchen Sie sich keine Gedanken zu machen. Sobald wir nach unten scrollen, finden Sie Datum, Format, Uhrzeit und Format. Und das ist etwas, das wichtig wäre , wenn Sie speziell neue Blogbeiträge verfassen. Und es hätte das Datum und die Uhrzeit der Veröffentlichung. Sie können einfach einem Format für die Zeit und das, was sich für Sie angenehm anfühlt, folgen . Aber was auch immer derzeit festgelegt wurde , wird von den meisten Menschen verwendet. Wenn Sie sich nun den Abschnitt Permel in der Option Einstellungen ansehen , finden Sie die Permeling-Struktur als einfachen Dan-Namen, Monat und numerischen Namen nach der benutzerdefinierten Naman-Struktur Was sollten wir wählen? Was auch immer gerade ausgewählt ist. Ist es standardmäßig die gute Option, nein zu wählen? Standardmäßig ist es auf den Namen Dan eingestellt. Das heißt, sagen wir einfach, Sie haben einen Blockbeitrag oder einen Produktbeitrag erstellt. Die Ural-Struktur würde ungefähr so aussehen wie das Jahr, das Datum und der Monat, gefolgt vom Namen des Beitrags. Nun, das sollten Sie um jeden Preis komplett vermeiden , da dies in Bezug auf SEO nicht gut sein wird. In Bezug auf SEO spielt Ural Slug auch eine sehr große Rolle Wenn du deinen Ural-Slug so klein wie möglich machen und nur hinzufügen könntest möglich machen und nur hinzufügen worum es auf der gesamten Seite oder dem gesamten Beitrag geht, wäre das mehr als genug Auswahl des Beitragsnamens ist die beste Option, um die Permeling-Struktur auszuwählen . Sie können die Änderungen hier speichern Ordnung, was auch immer der Beitragsname oder der Seitenname sein mag, er würde hinter dem Schrägstrich erscheinen und es wird so angezeigt, wie deine Permeling-Struktur wie deine Permeling-Struktur Ich hoffe, euch gefällt dieser Vortrag. In der nächsten Vorlesung zeige ich euch allen, wie wir unseren Page Builder installieren und verwenden können. 4. Installation des Elementor PRO Page Builders: Leute, in dieser Vorlesung werden wir sehen wie man die Element- oder Pro-Version in unserem System installiert Wie ich in der vorherigen Vorlesung gesagt habe , werden wir uns ansehen, wie man die Startseite mit dem Elementor-Plug-In , einem Website-Builder , erstellt und gestaltet einem Website-Builder , Ich habe das gesagt, aber ich habe das Gefühl, dass noch ein paar Dinge zu tun sind , bevor wir uns direkt mit dieser speziellen Sache befassen Im Moment werden wir sehen, wie dieses Elementor-Plug-In installiert Und wir werden uns auch mit einigen Grundeinstellungen befassen , die Elementor bietet Danach werden wir die Sache mit dem Container und der Flexbox verstehen Sache mit dem Container und der Flexbox In Ordnung, wie Sie auf meinem Desktop-Bildschirm sehen können, habe ich die Elementor Pro-Zip-Datei Jetzt ist Elementor ein kostenloses Plug-In mit bestimmten Funktionen, die völlig kostenlos genutzt werden können Sie müssen Ihre Kartendaten nicht eingeben oder auch nur einen einzigen Cent bezahlen , um auf all diese kostenlosen Funktionen zugreifen zu Es gibt jedoch nur wenige kostenpflichtige Funktionen. Und Sie müssen sie auf monatlicher Abonnementbasis bezahlen . Elementor Pro ist also bezahlt. Aber da wir lernen und das nicht für kommerzielle Zwecke verwenden werden, habe ich die Zip-Datei, auf die Sie alle zugreifen können . In Ordnung? Und diese Zip-Datei können Sie verwenden, um die Funktionen von Elementor Pro zu erkunden. Alles klar? Ich empfehle überhaupt nicht, raubkopierte Software zu verwenden , sonst mache ich damit keine Werbung, in keinem Sinn Dies ist nur eine Version von Elementor Pro in einem ZIP-Dateiformat, das häufig zu Übungszwecken verwendet wird , okay? Also weil ich möchte, dass ihr, wisst ihr, habt ein sehr knappes Budget , um neue Dinge und all diese Dinge zu lernen Aus diesem Grund stelle ich diese Dateien zur Verfügung, damit Sie verschiedene Dinge lernen und erforschen können. Sobald Sie tatsächlich einige Websites für kommerzielle Zwecke erstellen, vielleicht später, können Sie für das Elementor Pro-Abonnement bezahlen das Elementor Pro-Abonnement Aus diesem Grund werde ich mit dieser Datei fortfahren und auch zeigen, wie man sie benutzt Im Dashboard-Bereich werden Sie sehen, dass wir eine Option für Plug-ins haben. Sobald ich mit der Maus drüber fahre, sehe ich Optionen für die Installation von Plug-ins, Hinzufügen neuer Plug-ins und den Plug-in-Dateieditor Installiere jetzt die Plug-ins. Sobald Sie dort hinübergehen, wird eine Liste der verschiedenen Plug-ins angezeigt , die derzeit auf unserer Presse-Website installiert sind . Da unsere Website in unserem Fall ziemlich frisch und neu ist, sind nicht viele Plug-ins installiert. Alles, was sie haben wird, ist ein Anti-Spam-Plug-In und das Hello Dolly Dies ist nur ein einfaches Plug-In. Ich glaube, es wurde installiert, weil wir vermutlich 2024, 2023 Theme Builder hatten . Richtig. Deshalb haben wir diesen Stecker. Wir können sie später jederzeit löschen, aber im Moment lassen wir es einfach so, wie es ist. Und wir werden gleich hier ein neues Plug-In hinzufügen. Ich werde auf diese Option klicken und Sie können sehen dass wir eine Option mit vielen verschiedenen Plug-ins haben. Dieser Bereich verhält sich wie Ihr App Store oder Playstore, genau wie bei einem iPhone oder Android-Smartphone haben wir den Playstore oder den App Store, haben wir den Playstore oder den App Store von dem aus Sie verschiedene Anwendungen herunterladen können Das Gleiche gilt für Wordpress, dass Sie viele verschiedene Plug-ins herunterladen können Ich suche einfach nach Elementor, Elementor und klicke hier. Sobald Elementor angezeigt wird, werde ich es installieren. Jetzt hat Elementor, wie gesagt, bestimmte kostenlose Funktionen und bestimmte kostenpflichtige Um die Pro-Version nutzen zu können, benötigen wir den Elementor selbst, die kostenlose Version selbst, damit Pro und Elementor Hand in Hand gehen können Dann klicken wir auf Aktivieren. Und wir warten, bis es dieses Plug-In aktiviert. Wir können das überspringen. Okay? Wir können den gesamten Vorgang überspringen. Sobald dies erledigt ist, klicken Sie erneut auf Überspringen, das sich in der unteren rechten Ecke Ihres Bildschirms befindet. In Ordnung, jetzt wird es sich so zeigen. Jetzt sind in die neueste Funktion von Elementor auch die KI-Tools eingebettet Sie können hier und da einfach ein paar Dinge beschreiben und es wird den größten Teil der Arbeit erledigen Du musst nicht einmal Dragon-Drop-Drop machen. So hat sich Elementor in letzter Zeit weiterentwickelt. Aber lass uns das vorerst einfach überspringen. Unser Hauptzweck dieses Kurses ist es, die Funktionen von Elementor und Elementor zu erkunden Presse-Websites weiterleiten. Wir kehren jetzt zu unserem Dashboard zurück. Was Sie gerade gesehen haben, war das Elementor-Dashboard. Okay? Bisher hatten Sie, wie Sie oben in der schwarzen Leiste sehen können, die Option „Benutzerdefiniert“. gilt für den Bearbeitungsbereich, das Bearbeitungs-Dashboard für das von uns verwendete Thema. Wir haben die Bearbeitungsseite und dann haben wir den Elementor „ Breite bearbeiten“ Diese Bearbeitungsseite ist die Wordpress-Option zum Bearbeiten von Seiten. Dies ist für das Thema, das wir verwenden, nämlich Block. Dies ist für den Elementor , einen Seitenersteller, den wir derzeit verwenden Wir kehren zu unserem Dashboard zurück. Und jetzt müssen wir unsere Pro-Datei installieren , die Elementor Pro ist Wir werden wieder zu den Plug-ins zurückkehren. Wir werden ein neues Plug-In hinzufügen. Oben finden Sie die Option Plug-In hochladen. Wir klicken einfach hier und wir können es finden. Option zur Auswahl der Datei. Jetzt können Sie die Datei nicht mehr per Drachenseil hierher ziehen. Sie müssen nur die Datei durchsuchen und sobald sie gefunden ist , können Sie sie installieren und Sie müssen auch das Pro-Plug-In aktivieren. Sobald Sie das getan haben, glaube ich, haben Sie das Ganze so gut wie installiert. Wie Sie nun sehen können, werden Sie nach der Installation von Elementor Pro darauf hingewiesen, der Installation von Elementor Pro darauf hingewiesen, dass eine neue Version von Elementor Pro jetzt verfügbar ist Bitte aktualisiere diese Elementor Pro-Funktion niemals. Sie werden in große Schwierigkeiten geraten. Der einzige Grund, warum ich das sage , ist, dass, sagen wir einfach Sie haben eine Website erstellt die auf Ihrem lokalen Server gehostet wird, was ich meine, dass Ihr System, Ihr Laptop-Bildschirm, richtig? Sie haben also eine Website mit Elementor Pro erstellt und plötzlich beschlossen, alle Plugins zu aktualisieren, die Sie zusammen mit Elementor Pro verwendet haben Was nun passiert, ist, dass die Elementor Pro-Feature-Dateien die in den neueren Versionen vorhanden sind, Ordnung, es könnten Debug-Dateien sein, es könnten neue Funktionen sein, die verwendet werden müssen Diese werden natürlich Ihr vorhandenes Element oder Ihre vorhandene Datei angehängt Jetzt ist Element or Pro, wie gesagt, eine kostenpflichtige Version. Es erfordert einen Lizenzschlüssel. Sie müssen eine monatliche Abonnementgebühr bezahlen. Richtig? Es wird mit einem Konto verknüpft. Sobald festgestellt wird, dass Ihr vorhandenes Elementor Pro keinen Lizenzschlüssel hat, könnten Sie in große Schwierigkeiten geraten, was möglicherweise zu rechtlichen Problemen führen kann, oder Ihre Website könnte einfach kaputt gehen Aktualisieren Sie Ihr Elementor Pro also niemals , wenn Sie etwas lernen Wenn Sie für die Elementor Pro-Version bezahlt haben, aktualisieren Sie Ordnung, jetzt bleiben wir einfach bei diesem Teil und gehen zu den Elementor-Einstellungen Wie Sie sehen können, habe ich, sobald ich den Mauszeiger über Elementor-Einstellungen bewegt, die Elementor-Einstellungen bewegt, jede Menge verschiedene Optionen Moment konzentriere ich mich nur auf den Teil mit den Tools, oder ich sollte sagen, auf den Teil mit den Einstellungen Okay, ich werde mich auf diese beiden Optionen konzentrieren. Gehen wir einfach zuerst zu den Einstellungen und dort finden Sie allgemeine Integrationen für Fortgeschrittene und Funktionen Gehen wir zum Teil „Funktionen“. Sobald ich nach unten scrolle, werde ich feststellen, dass wir eine Option für Inline-Schriftsymbole haben Sie müssen diese Option also von Standard auf Aktiv ändern. Das bedeutet im Wesentlichen, dass alle Symbole, die Sie auf dieser Website haben werden, im Allgemeinen im SG-Format sind. Bilder sind in der Regel im P - oder PNG- oder PEC-Format. Ordnung, P ist am stärksten komprimiert und Sie wissen, es wird unter den anderen Optionen am schnellsten geladen. Andere Dateierweiterungen, die ich gerade gesagt habe, einfach so, Icons haben auch eine SG-Datei. Jetzt wird diese SG-Datei gerendert, ohne die Schrift zu laden. Fantastisch. Und die Icon-Bibliothek und die zugehörigen CSS-Dateien und Schriften. Das ist es, was diese Inline-Schriftsymbole im Grunde bedeuten. Dies bedeutet, dass Ihre Leistung der Website erheblich gesteigert wird. Wordpress hat einen sehr schlechten Ruf in Bezug auf die Leistung der Website, aber ich glaube, es liegt an den Entwicklern wie sie ihre Website optimieren, bis zu Ihrem Punkt , dass es im Grunde keinen Unterschied zu einer reaktiven Website oder einer Wordpress-Website gibt. Ja, es hängt auch vom Server ab, auf dem Sie Ihre Website gehostet haben, aber ich denke, hier gibt es nur wenige Optimierungen. Und es könnte Ihnen auch helfen, die Leistung Ihrer Website zu beschleunigen die Leistung Ihrer Website zu Das ist es also, was Ihnen helfen wird , zum Grid-Container-Teil zu kommen. Wenn Sie nun CSS, HTML und Javascript gelernt haben , vergessen Sie STL und Javascript. Konzentrieren Sie sich auch einfach auf den CSS-Teil. Wenn Sie sich jemals in Ihrem Leben mit CSS befasst haben, müssen Sie das Konzept von Containern gehört oder sogar davon gelernt haben, oder? Container und Flexboxen. Elementor hat in letzter Zeit die Funktion eines Grid-Containers hinzugefügt Wenn Sie diese Container-Funktion verwenden möchten, klicken Sie auf die aktive Funktion und es wird eine Rasteroption erstellt , die Sie hinzufügen können Container-Option, die Sie zu Ihrer Presseseite hinzufügen können. In Ordnung, wir haben auch die obere Bearbeitungsleiste. Wir haben diese spezielle Option. Wir klicken auf Aktiv. Wir können auf Aktiv klicken. Das ist für die KI-Version, okay. Wenn Sie die AI-Funktion nutzen möchten, sollten Sie auf Aktiv klicken. Da Sie nun den Elementor Pro verwenden, besteht die Möglichkeit, dass Sie die KI-Version davon möglicherweise nicht verwenden Aber wenn Sie nur mit der Element- oder kostenlosen Version weitermachen und die Datei, die ich zur Verfügung stellen werde, nicht installieren, können Sie die KI-Version davon quasi aktivieren Ordnung, dann haben wir die aufgelisteten Elemente auf den Landingpages und alle möglichen Dinge, die Sie aktivieren müssen. Und Sie können uns standardmäßig einfach bei den stabilen Funktionen belassen. Ordnung, sobald Sie das getan haben, können Sie einfach auf Änderungen speichern klicken. Und ich denke, wir sind ziemlich gut darin, das gesamte Element oder die Website für die nächste Vorlesung einzurichten . 5. Flexbox-Container vs. innerer Abschnitt - Etwas verwirrend, aber mach dir keine Sorgen: Alle zusammen, willkommen zurück zu einem weiteren Video. In dieser speziellen Videovorlesung werden wir untersuchen, was der Unterschied zwischen dem Flexbox-Container und der Schnittmenge ist der Unterschied zwischen dem Flexbox-Container , die wir früher in dem Element oder in früheren Versionen hatten. Ich habe zwei Websites erstellt. Dies sind zwei Dummy-Websites. Die erste hier drüben, die wir sehen können, hat die alte Elementor-Version Ich denke, es hat die Version 3.5, glaube ich. Und früher hatten wir Schnittpunkte. Und im Moment haben wir die Wahl zwischen Grids und Containern. Sie können sehen, dass wir Raster und Container als Layout unserer Website Ich werde also kurz zeigen, was der Unterschied zwischen diesen beiden ist , damit wir verstehen, wie wir die Container-Funktion in den kommenden Vorlesungen nutzen können , wie wir die Container-Funktion in den kommenden Vorlesungen . Wie Sie hier sehen können, hatten wir einen Texteditor für Überschriften und dann eine Schaltfläche. Nun sind alle drei Elemente an diesem bestimmten Schnittpunkt, in dieser bestimmten Spalte oder diesem Abschnitt mittig ausgerichtet. Damit kein Problem. Gehen wir einfach davon aus, dass wir diesem speziellen Abschnitt eine weitere Schaltfläche hinzufügen möchten . Und wir möchten diese Schaltfläche so anordnen, dass diese neue Schaltfläche und diese vorhandene Schaltfläche beide in derselben Zeile befinden. Sie gehören beide zu derselben Spalte, okay? Und es muss eine Art Abstand zwischen diesen beiden Elementen geben. Ist das möglich? Lass uns versuchen, es herauszufinden. Also ziehe ich einfach diesen Knopf und versuche, ihn zu platzieren. Es gibt mir also zwei Möglichkeiten. Ich kann es entweder über dieser vorhandenen Schaltfläche oder unter dieser platzieren . Was ist, wenn ich es über dieser Schaltfläche platziere? Ich kann diese Linie zentrieren, ich kann eine Linie links lassen, ich kann eine Linie schreiben, oder ich kann sie so begründen, dass sie die gesamte Breite einnimmt. Aber das ist nicht genau das, was wir wollen, oder? Wir möchten, dass diese beiden Schaltflächen in derselben Spalte erscheinen. Wie können wir das also erreichen? Ist es innerhalb einer Kreuzung möglich? Nein, ist es nicht. Deshalb haben wir ein Konzept von Containern und Grids. Also genau hier in dieser neueren Version von Elementor, wo wir auch die Elementor Pro-Version haben die Elementor Pro-Version Aber Vorsicht, die Pro-Version und die kostenlose Version beide den Container Selbst wenn Sie mit der kostenlosen Version fortfahren möchten , können Sie standardmäßig weiterhin elementos auf den Container zugreifen neueren Version wurde das Schnittmengenkonzept entfernt und der Container als Layout für den Standard-Elementor-Stil verwendet der Container als Layout für den Standard-Elementor-Stil Wenn ich also hier versuche, eine weitere Schaltfläche hinzuzufügen, habe ich immer noch nur zwei Möglichkeiten Entweder kann ich die Schaltfläche über dieser Schaltfläche platzieren oder die neue Schaltfläche unter der vorhandenen Schaltfläche platzieren. Ordnung, aber wie platziert man es In Ordnung, aber wie platziert man es so, dass es in derselben Spalte erscheint? Nun, da kommt das Konzept des Containers. Ich kann es einfach hier platzieren. Und du kannst sehen, dass ich einen Container habe. Wirkt wie eine Kiste. Wenn Sie meinen Full-Stack-Webentwicklungskurs besucht haben, in dem ich einen separaten Abschnitt über CSS und die Styling-Einheiten und die Styling-Layouts und all diese Dinge habe, dann werden Sie sich vielleicht auch hier mit dem Konzept vertraut machen . Aber wenn Sie diesen Webentwicklungskurs noch nicht besucht haben oder in der Vergangenheit noch nie etwas über CSS gelernt haben, brauchen Sie sich keine Sorgen zu machen. Ein Container ist wie eine Kiste. In einer Box können Sie Elemente oder Gegenstände, die Mittellinie oder Dinge zusammen darüber anordnen . Sie können sie stapeln, so wie dieser Behälter wie eine Kiste verhält. In dieser Box kann ich meinen vorhandenen Button platzieren und diesen Button einfach duplizieren. Okay, Sie können also sehen, dass sich diese beiden Schaltflächen in diesem Container befinden. Wenn ich auf diesen Container klicke, können Sie sehen, dass diese beiden Elemente diesem Feld vorhanden sind, das in der grauen Rahmenlinie angezeigt wird. Selbst wenn ich versuche, es strukturell darzustellen, befindet sich in diesem Container ein Container. Wir haben diese beiden Knöpfe. Versuchen wir, sie so anzuordnen , dass diese beiden Elemente gleich erscheinen. Wir können sie zentrieren und die Reihe in horizontaler Richtung ausrichten So können wir das bekommen. Nehmen wir nun einfach an, dass wir etwas mehr Abstand zwischen diesen beiden Schaltflächen hinzufügen möchten . Wie können wir das machen? Sobald ich nach unten scrolle, habe ich die Möglichkeit, Lücken zu setzen. Ich kann einfach den Wert für die Lücken erhöhen. Sie können sehen, dass diese Tasten voneinander getrennt werden. Ordnung. Ich kann es sogar so ändern, dass es umgekehrt Lass mich es einfach auf Null statt auf Mitte setzen. Sie können sich vorstellen, dass es so aussehen würde. Lassen Sie mich das einfach in Prozent ändern. In Ordnung. Zwischen diesen beiden gibt es einen gewissen Standardabstand. So würde es aussehen, wenn die Richtung dieses Containers umgekehrt eingestellt Wenn es horizontal ist, wäre es so. Vertikal, so etwas. Und horizontal. Oder ich könnte umgekehrt sagen. Lass uns einfach den Namen ändern. Sagen wir einfach, das ist Knopf eins, Knopf eins. Und das Gleiche gilt für den nächsten Knopf. Wenn ich so etwas wie Taste zwei, Taste zwei gebe und wenn ich das Container-Layout ändere, anstatt es umzukehren, wenn ich es vertikal platziere, dann können Sie sehen, dass Schaltfläche zwei gestapelt ist Schaltfläche eins befindet sich unten, so werden der gesamte Abstand und die Richtung des Containers eingestellt Wenn Sie den Inhalt begründen möchten , können Sie das sogar tun. Nun, das würde mit dem vertikalen Teil nicht passieren. Wenn ich es horizontal mache, kann ich es zentrieren, ich kann einen gewissen Abstand dazwischen haben. So dass sich eine Taste auf der linken Seite und der linken Seite und die andere Taste ganz rechts befindet. So haben wir etwas Platz. Ein Leerzeichen bedeutet im Grunde, dass die Schaltfläche auf der linken und rechten Seite Abstände hat, genauso wie dieser Bereich gleichmäßig einen gleichmäßigen Abstand in allen vier Richtungen hat. So können Sie sehen, dass sich oben und unten rechts ein gewisser Rand oder eine Polsterung befindet So funktioniert dieses spezielle Container-Layout also tatsächlich Wenn Sie sich dennoch nicht sicher sind, lassen Sie mich Ihnen das anhand eines anderen Beispiels zeigen. Direkt unter diesem Abschnitt, bestimmten Abschnitt, an dem wir gerade gearbeitet haben, haben wir einen weiteren Abschnitt mit Rezensionen. Diese Bewertungen dienen nur als Beispiel. Es ist nicht wie ein Abschnitt mit genauen Bewertungen oder Testimonials , den eine Website haben könnte Aber nur um ein Beispiel zu geben oder das Konzept des Container-Layouts zu demonstrieren, habe ich so etwas gebaut In unserem älteren Element-Layout haben wir also diese Art von drei Rezensionen. Gehen wir nun einfach davon aus, dass wir alle Elemente in diesem Testimonial-Bereich zentriert anordnen möchten alle Elemente in diesem Testimonial-Bereich Also, wie werde ich das machen können? Ich kann also einfach auf die Spalte selbst klicken und sie vertikal in der Mitte und horizontal in der Mitte ausrichten und horizontal in der Mitte Selbst wenn ich die Mitte horizontal ausrichte, wird dieses bestimmte Element nicht mittig ausgerichtet , auch nicht dieses und nicht das, alles Bezug auf die Y-Achse Sie werden mittig ausgerichtet, aber nicht in Bezug auf die X-Achse. Wenn Sie das Diagramm klar verstehen können, ist dies meine Y-Achse. Wenn ich die Elemente in Bezug auf die Y-Achse zentrieren möchte, würde das Element idealerweise irgendwo hier drüben stehen. Aber wenn ich will, ist das meine X-Achse. Wenn ich das Element in Bezug auf die X-Achse zentrieren möchte , sollte das Element irgendwo hier drüben liegen, oder? So sollten die Dinge idealerweise funktionieren, aber mit dem Kreuzungs-Layout funktioniert es nicht. Wenn ich zur neueren Version von Elementor zurückkehre und auf den Container klicken kann, kann ich das Container-Layout so ändern , dass die Richtung vertikal sein soll Und wir haben den Inhalt zentriert ausgerichtet und den Inhalt zentriert und die Elemente sind mittig ausgerichtet In Bezug auf die Y- und X-Achse können Sie sehen, die Elemente genau in der Mitte befinden. Einfach so. So war es mit Hilfe unseres Container-Layouts möglich. Eine letzte Sache: Das Container-Layout wäre in einem Szenario hilfreich. Nehmen wir an, Sie möchten in einer älteren Version, mit der Sie gerade arbeiten, das Bild nur so ersetzen dass das Bild, das Sie in der ersten Spalte hatten , in die dritte Spalte verschoben wird. Und das Bild in der dritten Spalte sollte an die Stelle des Bildes in der ersten Spalte zurückkehren. Ordnung, wenn Sie so etwas tun möchten, was manchmal bei einigen Fehlern passieren kann, einfach aus Versehen, hätten Sie das Bild in einer falschen Spalte oder in einem falschen Abschnitt platzieren können. Das könnte sogar Ihre Website beschädigen , wenn Sie sie richtig gestaltet haben. Wenn du so etwas machen möchtest, dann ist das nur Dragondrop. Es ist sehr einfach, du kannst das einfach so herumziehen. Aber manchmal kann ein bestimmtes Element, das Sie neu anordnen möchten, in eine andere Spalte verschoben werden, in diesen Schnittpunkt selbst. Um zu verhindern, dass das passiert, was die Elementor-Version hat, sagen wir einfach, ich habe den gesamten Container Ich habe diesen ganzen Container. Wenn ich einfach auf die Struktur klicke, hat ein Container einen Container. Alles klar? Im Grunde versuche ich zu erklären, dass wir einen Container haben, okay? Das ist ein ganzer Container. Das ist ein Container, und das ist ein besonderer Container. Und dieser ist auch ein weiterer separater Container. Anstelle von drei Spalten haben wir drei Container. Eine Kiste in einer anderen Kiste, es ist wie eine verschachtelte Kiste Nehmen wir an, wir haben eine große Schachtel Amazon. Dann haben wir ein paar verschiedene Boxen, drei Boxen von Best Buy, Walmart oder welcher anderen E-Commerce-Plattform, die Sie sich vorstellen könnten Gehen wir einfach von einer anderen E-Commerce-Plattformbox aus. Diese drei Boxen befinden sich in einer großen Kiste. Wir möchten auf den Container klicken, das übergeordnete Feld. Wir können die Richtung der Elemente dieser Container neu anordnen der Elemente dieser Container Sie können leicht erkennen, dass es sich bei den Elementen oder den Containern um Elemente in unserem Fall im Grunde um diese Container Was ich also im Grunde versuche zu erklären , ist diese spezielle Spalte , von der Sie vielleicht denken, dass sie eine Spalte ist, aber es ist ein Container. Dieser ist ein Container, dieser ist ein Container. Das sind zwar Container, aber sie sind Teil eines großen Containers, also kann ich sie vorerst einfach als Elemente bezeichnen, oder? Also habe ich einfach versucht, diese Container so umzukehren diese Container so umzukehren , dass wir sie so neu anordnen können , wie wir es erwartet haben. So funktionierte unser Flexbox-Container also tatsächlich. Ich weiß, dass einige Leute, die sich dieses Video ansehen , das Konzept von Containern möglicherweise sehr verwirrend finden von Containern möglicherweise sehr verwirrend Aber machen Sie es nicht zu kompliziert, es sich einfach wie eine Kiste in einer Kiste vor. Eine Box bietet die Flexibilität, Objekte in beliebiger Richtung in Bezug auf die Y- und X-Achse zu platzieren Objekte in beliebiger Richtung in Bezug auf die Y- und X-Achse zu wann immer Sie versuchen, um etwas herum aufzubauen. Wenn Sie versuchen, Objekte anzuordnen, platzieren Sie immer ein Bild eines Graphen, der ein zweidimensionales Diagramm hat. X- und Y-Achse. Machen Sie es sich mit der Z-Achse nicht zu kompliziert. Außerdem arbeiten wir nicht an einer Drei-D-Website, wir arbeiten nur an der Zwei-D-Version. Im Moment haben Sie nur eine Y- und X-Achse. Wenn Sie einige Elemente mittig in Bezug auf die X-Achse und in Bezug auf die Y-Achse platzieren Bezug auf die X-Achse und in Bezug auf möchten, wie sich das verhalten würde. Verhalten würde also ziemlich genau das replizieren, was Sie erwartet haben, wenn Sie das Konzept der Container anwenden Das war beim Schnittmengenkonzept nicht der Fall. Container sind sehr praktisch. Und Container gab es schon, bevor Elementor dies in ihren neueren Versionen erfand Weil CSS standardmäßig das Konzept von Containern hatte, die begründeten Inhalt und all diese Dinge abtauchen und Ich denke, wenn Sie mit CSS vertraut sind, wäre es kein Problem, dieses Konzept zu verstehen. Aber wenn Sie neu in der Welt der Webentwicklung sind, lassen Sie sich von diesem Container-Konzept nicht überwältigen Schauen Sie sich dieses Video einfach noch einmal an, Sie finden es nicht bequem, damit umzugehen Ich sage immer, wenn Sie einer Vorlesung folgen, versuchen Sie, sie praktisch selbst zu machen , damit Sie klar verstehen , wie sie tatsächlich funktioniert hat. Ordnung, ich hoffe, dieses Video hat euch geholfen, das Konzept von Containern zu verstehen. In der nächsten Videovorlesung werden wir sehen, wie man mit dem Elementor Page Builder eine Homepage einer Website erstellt mit dem Elementor Page Builder eine Homepage einer Website 6. Elementor-Elemente lernen, während du die Startseite baust: Ordnung, ich hoffe, ihr seid genauso begeistert wie ich, denn in diesem Video werden wir mit dem Element oder dem Page Builder eine komplette Homepage von Grund auf neu erstellen Früher, als wir dieses Plug-in nicht in der oberen schwarzen Leiste hatten, haben wir diese Option zum Bearbeiten mit Element oder Page Builder nicht gesehen zum Bearbeiten mit Element oder Page Builder Aber jetzt können wir genau hier eine neue Seite haben, die Element oder 58 heißt Auf dieser Seite selbst werden wir eine komplette Homepage von Grund auf neu erstellen und gestalten. Da sich der Autor nun auf der Seite befindet, möchten wir diese Seite von Grund auf neu erstellen. Lassen Sie uns diese Seite einfach bearbeiten, indem wir gleich hier hingehen. Was werden wir tun? Wir werden den Seitennamen gleich hier entfernen. Sehen Sie, wir haben die Option „Seite blockieren“ und ich werde auf diesen Block mit den Optionen „App blockieren“ klicken. Ich werde auf den Seitentitel klicken. Genau hier im Seitentitel. Ich habe die Möglichkeit, benutzerdefiniert und deaktiviert zu vererben. Ich klicke einfach auf deaktiviert und speichere das. Sobald ich darauf klicke, werde ich diese Seite veröffentlichen. Wenn ich mir meine Seite ansehe, schauen wir mal, was passiert. Kann ich den Seitentitel genau hier sehen? Im Ural-Bereich wird es keinen Seitentitel geben, aber er wird nicht auf unserer Webseite erscheinen. Oben sehen Sie den Header, den wir zuvor erstellt haben. Ordnung, fangen wir einfach damit an, die Seite mit dem Elementor zu erstellen . Ich klicke einfach hier und so wird die Oberfläche des Element- oder Seitengenerators aussehen Im linken Bereich sehen Sie die verschiedenen Plug-ins. Und ich sollte nicht Plug-ins sagen , sondern eher Elemente in den Grundlagen. Das Layout, das Sie sehen können, haben wir ein Container-Layout, wir haben ein Pro-Layout, wir haben eine Layout-Option. Dann haben wir Pro. Hier haben wir alle Pro-Elemente, die seit der Installation unseres Pro-Plug-ins verfügbar sind . Aber ich denke, dieses Video wäre gut genug für diejenigen, die gerade erst anfangen und das Plug-In noch nicht gekauft haben. In Ordnung, was werden wir tun? In erster Linie benötigt jede Webseite einen Heldenbereich. Zunächst erstellen wir einen Heldenbereich indem wir genau hier klicken, was das Plus-Symbol ist. Und ich werde hier die verschiedenen Flexbox-Optionen auswählen können. Ich muss die Struktur meiner Flexbox wählen. Ich werde mit den Abschnitten mit zwei Spalten fortfahren. Und was werden wir tun? Wir behalten eine schwarze Hintergrundüberlagerung bei und fügen einige Elemente hinzu Ordnung, hier können Sie das rosafarbene Layout sehen, das genau hier entsteht Es ist der gesamte Container, das gesamte Flexbox-Layout, in dem wir zwei Container haben. Sie können es genau hier sehen Ordnung, jetzt finden Sie im linken Bereich drei verschiedene Optionen: das Layout, den Stil und die erweiterten Optionen. Auf der Registerkarte „Layout“ finden Sie verschiedene Optionen, finden Sie verschiedene Optionen Sie die Breite des Containers auswählen und denen Sie die Breite des Containers auswählen und bearbeiten können, und die Lücken, die Sie zwischen den vorhandenen Elementen oder Containern lassen können den vorhandenen Elementen oder Containern In Ordnung, ich hoffe, du verstehst, worauf es beim Layoutteil ankommt. Kommen wir dann zur Stiloption Wir haben die Möglichkeit, zwischen verschiedenen Hintergründen zu wählen . Wie der Hintergrund aussehen soll, wann er normalerweise angezeigt wird und was passieren soll, wenn der Cursor auf dieses Element zeigt. Das ist der Hover-Effekt, der passiert. Möglicherweise möchten Sie weitere Details oder weitere Stilelemente hinzufügen Details oder weitere Stilelemente Wenn der Benutzer den Cursor auf ein bestimmtes Element bewegt, können Sie diese Effekte und Einstellungen für den Hoor-Effekt ändern und Einstellungen für den Hoor-Effekt zum Hintergrundtyp kommen, finden wir verschiedene Optionen Wir haben das klassische Video mit Farbverlauf und die Diashow. Klassisch bedeutet im Grunde, dass eine einfache Farbe auf den Hintergrund aufgetragen wird. Oder ein Verlaufseffekt ist etwas, bei dem zwei oder mehr Farben in unterschiedlichen Formaten verwendet werden können, z. B. linear, radial usw. Wenn Sie meinen Figma I-Kurs besucht haben, haben Sie bestimmt etwas über verschiedene Arten von Farbverläufen gelernt und gelernt, wie wir das Erstellen verschiedener Hintergrundlayouts umgehen können Erstellen verschiedener Hintergrundlayouts umgehen Etwas Ähnliches kann direkt hier auf der Presse-Website nach dem Hintergrund angewendet werden . Wir haben die Möglichkeit, den Hintergrund zu überlagern Das heißt, wenn Sie versuchen, einen Overlay-Effekt für Ihren Hintergrund zu erzeugen , können Sie das sogar tun Dann haben Sie die Möglichkeit, den Elementen einen Rahmen hinzuzufügen. Sie können einen Randtyp angeben, Sie können einen Radius hinzufügen, Sie können einen geformten Teiler hinzufügen Im Bereich für Fortgeschrittene finden Sie eine Option, finden Sie eine Option mit dem Rand und der Polsterung herumzuspielen Jetzt werden wir später auf dieses Thema eingehen , nämlich was ist Rand, was ist Innenabstand? Aber im Grunde bedeutet das, dass in dieser Vorlesung selbst das, was die Benutzer im Wesentlichen mit Rand und Innenabstand tun können , darin besteht, dass sie einen gewissen Abstand zwischen Ihren Ich hoffe, Sie verstehen, worauf es bei Rand und Polsterung ankommt. Dann haben Sie die Möglichkeit, die Elemente auszurichten und in welcher Reihenfolge, insbesondere möchten Sie Ihre Elemente oder Elemente anordnen Dann haben Sie die Möglichkeit, die Größe festzulegen, mit der Position herumzuspielen und, Sie wissen schon, vielleicht den Z-Index zu erhöhen oder zu verringern. Wir werden also jedes einzelne Thema behandeln. Sie sich darüber keine Sorgen, aber was werden wir vorerst in dieser speziellen Flexbox tun? Wir werden eine Hintergrundfarbe hinzufügen. zur Stiloption kommen, haben wir den Hintergrund normal . Wir klicken auf Klassisch und wählen die Standardfarbe aus. Sie können sehen, dass keine der Farben angewendet wurde. Es nimmt nur die Standardfarbe auf, die da ist. Und die Farbe des Hintergrunds für diese spezielle Flexbox ist transparent. Wann immer Sie so etwas finden, bedeutet das im Grunde dass es sich um einen transparenten Hintergrund handelt. Ordnung, wir wollen also keinen transparenten Hintergrund, sondern einen schwarzen Hintergrund. Klicken wir einfach auf die Farbe und ziehen den Schieberegler nach unten links oder vielleicht sogar unten rechts. Du kannst fokussieren, unten links ist schwarz. Sie können sich sogar den Hex-Code ansehen , wenn die Zahl ganz Null ist Das bedeutet im Grunde , dass sie schwarz ist. Wenn die Zahlen alle sind, bedeutet das im Grunde, dass sie weiß ist. Wir können einfach entweder nach links oder nach rechts ziehen und wir erhalten einen schwarzen Hintergrundeffekt. In Ordnung. Ich kann sogar zwischen verschiedenen Farben wählen, indem meinen Schieberegler nach rechts und zur Seite bewege . Das sind die wärmsten Farben Und nach links werden es die coolsten Farben sein. Okay, hier kannst du sehen, ob du mit diesem zweiten Slider herumspielst Das bedeutet im Grunde, dass du mit der Transparenz deiner Farbe spielst. Je weiter Sie sich in Richtung des Schiebereglers nach links bewegen, bedeutet das im Grunde, dass Ihre Farbe transparent ist. Und je weiter Sie sich nach innen nach rechts bewegen, bedeutet das im Grunde, dass die Farbe undurchsichtig oder nicht transparent ist . Ich hoffe, ich verstehe, worum es geht Lass es uns einfach etwas schwarz machen, aber nicht genau schwarz. Ich werde es einfach bei diesem Farbton belassen. Alles klar? Ich mag diese Farbe, also lassen wir sie einfach so. Kommen wir nun zu diesem Bildteil, wir wollen vorerst kein Bild hinzufügen, aber wir werden uns später damit befassen. In Ordnung, jetzt fügen wir ein paar Elemente hinzu. Was ich tun werde, ich klicke einfach auf diesen Container. Ich klicke einfach auf diesen Container. Ich kehre zu dieser speziellen Schaltfläche zurück , mit der ich zwischen verschiedenen Elementen, die wir haben, blättern kann. Und ich werde einen Texteditor hinzufügen. Texteditor bedeutet im Grunde , dass Sie Text hinzufügen. Es hat kein h1h2-Tag, sondern ein Absatz-Tag Wenn Sie einen Full-Stack-Kurs zur Webentwicklung absolviert haben oder eine Vorstellung von HTML und CSS haben, müssen Sie sich mit verschiedenen Tags in HTML vertraut gemacht einen Full-Stack-Kurs zur Webentwicklung absolviert haben oder eine Vorstellung von HTML und CSS haben, haben Es gibt viele Tags wie h1h6, dann haben Sie ein Tag-Tag oder ein Absatz-Tag , das im Wesentlichen den gesamten Inhalt, den Hauptinhalt Ihres Textes enthält Hauptinhalt Ihres Textes Wobei from h1h6 alle Überschriften-Tags enthält, die im Grunde das darstellen, worum Ihrem Im Moment werden wir so etwas wie einen Firmennamen hinzufügen etwas wie einen Firmennamen Im Moment können Sie sehen, dass die Farbe dieser Schrift dunkelblau ist, würde ich sagen. Aber mit der schwarzen Hintergrundfarbe passt es nicht gut. Natürlich möchten wir, dass ein kontrastierender Effekt entsteht, wenn die Farbe des Hintergrunds schwarz ist. Dann möchten wir natürlich, dass die Farbe der Schrift einen Kontrast dazu bildet. Das heißt, es sollte einen helleren Farbton haben, oder eine hellere Farbe wäre nicht am besten, um ihr eine weiße Farbe zu geben. Lass uns dazu gehen. Sie können Textedor genau hier sehen. Ich klicke auf Style. Und dann ziehe ich im Bereich „ Textfarbe“ meinen Cursor in Richtung des oberen linken Bereichs, und Sie können sehen, dass meine Farbe zu Weiß gewechselt ist. Ordnung. Sie können sogar mit den verschiedenen Ausrichtungen Ihres Textes herumspielen Derzeit ist eine Zeile übrig, aber sie ist nicht ausgewählt Standardmäßig würde der Text eine Zeile hinterlassen. Dann hast du eine Mittellinie, rechts eine Linie und den ausgerichteten Inhalt. Aber lassen Sie uns es einfach behalten. Mit den Standardeinstellungen können wir sogar die Typografie ändern. Typografie, grundsätzlich können Sie zwischen verschiedenen Schriftfamilien wählen Hier hast du ein paar eingebaute Schriften und es ist sogar mit Google Fonts verbunden Wenn ich nach etwas wie Poppins suche, kannst du sehen, dass es sich um eine Google-Schrift Und sie kann genau hier angewendet werden. Wenn Sie jedoch einige benutzerdefinierte Schriftarten hinzufügen möchten, erfahren Sie später in diesem Kurs, wie Sie sie zu Ihrer Website hinzufügen können. Jetzt können Sie sogar mit den verschiedenen Schriftgrößen herumspielen. Derzeit ist eine bestimmte Standardgröße darauf angewendet. Sie können den Schieberegler sogar bewegen, um zu sehen wie er mit 15 Pixeln aussehen würde. 15 Pixel Ihres Textes leor. Oder ich würde es einfach behalten. 2020 sieht gut aus. In Ordnung. Jetzt kannst du sogar verschiedene Einheiten finden. Derzeit gibt es die Einheit in Pixeln, Sie finden EM, Ram, Viewport-Breite und so weiter Ich werde also nicht alle Einheiten behandeln , die wir hier haben Aber ich glaube, in meinem Full-Stack-Webentwicklungskurs habe ich all diese verschiedenen Einheiten im CSS-Bereich vollständig behandelt . Ich hoffe, wenn Sie sich eingehend mit diesen Dingen beschäftigen möchten , sollten Sie sich diese Kurse auf jeden Fall ansehen. In Ordnung, dann haben wir die Schriftstärke. Schriftstärke bedeutet im Wesentlichen, ob Sie Ihre Schrift fett halten oder die Schriftstärke gering halten möchten. Wenn ich das so belasse, wirst du feststellen, dass die Schrift selbst sehr dünn wird. Wenn ich es fett mache, dann wirst du feststellen, dass der Text sehr fett und hell ist. Lassen Sie uns einfach fett bleiben. Wir können es sogar durch halbfett oder so ersetzen, aber ich möchte es einfach bei fett belassen. Jetzt haben Sie die Möglichkeit , Ihren Text zu transformieren. Nehmen wir an, ich habe für einige Fälle einen Text hinzugefügt, der einen Buchstaben und alle Wörter in Kleinbuchstaben enthält , aber ich möchte ihn in Großbuchstaben ändern. Dann können Sie sehen, dass alle Buchstaben meines Textes in Großbuchstaben umgewandelt wurden. Wenn ich es in Kleinbuchstaben schaffe, werden alle Buchstaben in Kleinbuchstaben umgewandelt. Ich habe die Möglichkeit, Großbuchstaben zu schreiben. Das bedeutet im Grunde, dass nach jedem Wort der erste Buchstabe des nächsten Wortes Großbuchstaben umgewandelt wird Wohingegen die Liste der Buchstaben desselben Wortes in Kleinbuchstaben umgewandelt wird. Das ist es, was großgeschriebene Transformation eigentlich bedeutet. Und dann haben Sie die Option zur Normalisierung, was im Grunde bedeutet, dass unabhängig vom Text, den Sie eingefügt haben, diese Einstellungen auf die Standardeinstellungen zurückgesetzt werden Dann haben Sie die Möglichkeit , Ihr Element zu gestalten. Das heißt, ob Sie Ihren Schriftstil normal, kursiv oder obisch beibehalten Ihren Schriftstil normal, kursiv oder obisch Ich hoffe, Sie verstehen, worum es geht die Transformation und den Stil zu umgehen Wenn Sie mit einer Textbearbeitungssoftware wie Microsoft Word oder Google Docs gearbeitet haben Textbearbeitungssoftware , diese Einstellungen natürlich sind diese Einstellungen natürlich sehr einfach zu verstehen und zu umgehen. Ordnung, endlich haben wir Dekoration, was im Grunde bedeutet, dass Sie Ihrem Text eine Unterstreichung hinzufügen möchten? Möchten Sie Ihrem Text eine Überzeile hinzufügen? Möchten Sie einen Text durchstreichen lassen oder es vielleicht keine der oben genannten Optionen. Lassen Sie uns also einfach die Standardeinstellung beibehalten, was bedeutet, dass keine der Optionen für die Dekoration angewendet wird. Und dann haben Sie eine Option für die Zeilenhöhe. Da wir nur zwei Wörter in derselben Zeile haben , haben wir nicht mehrere Zeilen, wir haben nicht viele, die mehrere Zeilen abdecken. Zeilenhöhe bedeutet im Grunde, dass immer dann, wenn Sie mehrere Wörter oder einen so langen Text haben , der sich über mehrere Zeilen erstreckt, der Abstand zwischen diesen Zeilen vergrößert wird. Stimmt das? Sie haben Zeilenhöhe, Sie haben Buchstabenabstand. Das bedeutet Abstand zwischen jedem einzelnen Buchstaben. Wenn ich es in etwas ändere, sagen wir einfach drei, können Sie sehen, wie sich der Text verändert hat. Es sieht anders aus als früher, oder? Sie haben auch Wortabstände. Das bedeutet, dass mit dem Abstand zwischen zwei oder mehr Wörtern herumgespielt wird. Stimmt das? Dann haben Sie die Möglichkeit, einen Textschatten hinzuzufügen , auf den wir jetzt nicht eingehen werden. Aber im Wesentlichen können Sie Ihrem Text eine Unschärfe oder vielleicht etwas Schatten hinzufügen Dieser Effekt wäre cool wenn Sie einen helleren Hintergrund haben Aber im Moment haben wir einen dunkleren Hintergrund. Ich möchte diesen Bereich nicht ansprechen. Gut, lassen Sie uns ein neues Element hinzufügen. Ich werde auf dieses Symbol klicken und meine Überschrift per Drag & Drop direkt in diesen Container selbst ziehen. Wenn ich es links innen oder rechts innen platziere , können Sie Ihr neues Element in einigen Fällen möglicherweise nicht innerhalb des Containers hinzufügen und es wird möglicherweise außerhalb Ihres Containers hinzugefügt. Wie würden Sie sie in diesem Fall so neu anordnen, dass sie direkt in diesem Container erscheinen ? Ganz einfach Wenn Sie auf den gesamten Container-Bereich klicken, haben Sie die Möglichkeit, zwischen Navigator und manchmal sogar Structure zu wählen . Sie können einfach hier klicken. Und hier findest du verschiedene Optionen wie diese. Wie die Überschrift aussehen würde, Texteditor enthalten würde und so weiter. Alle Elemente , die Sie auf der gesamten Website haben , werden hier angezeigt. Ordnung, ich kann meine Überschrift einfach direkt in diesen Container ziehen meine Überschrift einfach direkt in , in dem ich einen Texteditor habe. Sie können feststellen, dass der Texteditor über meiner Überschrift und die Überschrift unter dem Texteditor angezeigt wird. Wenn Sie die Einstellungen im Container neu anordnen möchten , können Sie sie einfach per Drag & Drop direkt hier in den Container selbst Sie können das sogar in diesem Bereich tun. Gut, ich ändere den Text einfach etwas wie Zahlungen tätigen oder ich würde einfach etwas wie sichere Zahlungsoption sagen oder lassen Sie uns einfach ein paar weitere Wörter hinzufügen. So etwas wie Zahlungen zu tätigen war noch nie so einfach. Ordnung. Was ich tun werde, ich ändere einfach die Schriftfarbe Zuerst gehe ich zum Stil, ändere die Textfarbe auf Weiß, ändere die Typografie auf Poppins, weil wir die Konsistenz auf unserer gesamten Website beibehalten möchten die Konsistenz auf unserer gesamten Website Dann werden wir diesen Text hinzufügen, oder besser gesagt, wir werden diesen Text in etwas Großbuchstaben umwandeln In Ordnung, was werden wir jetzt tun? Wir werden die Größe dieser Schrift erhöhen. Wir möchten daraus etwa 70 Pixel machen. Das sieht gut aus. Was werden wir in diesem Container selbst machen? Unter unserer Überschrift fügen wir einen weiteren Texteditor hinzu. Im Grunde erstellen wir eine Website für eine Anwendung, die ähnlich wie Apple Pay oder N More funktioniert . Es ist wie eine Werbewebsite für eine Anwendung, mit der Benutzer Zahlungen tätigen können. Dies ist nur eine kurze Vorstellung davon, was die Website im Wesentlichen erklärt und was wir genau versuchen zu tun. In Ordnung, hier haben wir also einfachen Text. Auch hier können wir einfach den Schriftstil und die Farbe des Textes ändern. Aber die einfache Möglichkeit, dies zu umgehen und das Styling einzufügen, besteht , einfach auf eines der anderen Elemente zu klicken , die Sie replizieren möchten Genau hier kann ich einfach auf diesen Text klicken. Ich klicke mit der rechten Maustaste auf dieses Element. Ich kann kopieren, oder ich habe eine Abkürzung, um den Befehl C auszuwählen . Ich kann das einfach hier in diesem Element selbst tun. Ich kann mit der rechten Maustaste klicken und das Styling einfügen. Sie können hier sogar eine Abkürzung sehen , nämlich Command Shift und V, ich kann es genau hier machen. Sie können sehen, dass das Styling für das H-One-Tag übernommen wurde, was wir nicht anwenden wollen. Wir machen es einfach rückgängig, indem wir die Befehlstaste und die Z-Muster gedrückt halten. In Ordnung, gehen wir einfach zum Style-Tag. Ändere die Farbe auf Weiß. Wir können die Schriftfamilie auf Poppins ändern. In Ordnung, und das ist der Text, den wir haben. Nun, zwischen dem Namen , den wir hier haben, Texteditor, und unserer Überschrift können Sie sehen, dass hier eine Lücke besteht. Es wäre besser, wenn wir einige Elemente in unserem Elementor verwenden und einige coole Änderungen daran vornehmen könnten in unserem Elementor verwenden und einige coole Änderungen daran Ordnung, also können wir einfach eine Trennlinie zwischen unserem Texteditor und Heading hinzufügen eine Trennlinie zwischen unserem Texteditor und , sodass wir eine Art Trennung zwischen diesen beiden Elementen haben eine Art Trennung zwischen Genau hier haben wir Stil, jetzt ändern wir die Farbe in etwas wie Grün Ich bewege meinen Schieberegler einfach in Richtung einer Farbe wie Grün. Ich würde gerne eine kühle grüne Farbe anstelle einer sehr hellen Farbe verwenden . Ich denke, diese grüne Farbe würde gut aussehen. Lassen Sie mich einfach meinen Cursor zum obersten Teil bewegen, und das ist die Farbe meines Teilers. Jetzt kann ich sogar das Gewicht meines Teilers ändern. Das bedeutet, wie dick mein Teiler sein soll. Derzeit ist er auf eins eingestellt Ich kann das einfach zu etwas machen , sagen wir einfach drei Oder vielleicht würden sogar 2,5 gut aussehen. In Ordnung, jetzt kannst du den Abstand zwischen ihnen finden. Lass es uns einfach auf die kleinstmögliche Lücke zwischen diesem und dem reduzieren . Jetzt können Sie feststellen, dass zwar der Firmenname, der Texteditor genau hier endet, aber unser Teiler, Sie wissen schon, er nimmt die gesamte Breite ein. Wir wollen nicht, dass das passiert Was können wir in diesem Fall tun? Wir sollten sicherstellen , dass unser Teiler im Element - oder Bearbeitungsbereich ausgewählt ist im Element - oder Bearbeitungsbereich ausgewählt zum Inhaltsteil gehen, werden Sie herausfinden, ob Sie mit der Breite herumspielen möchten oder nicht Derzeit ist es auf 100% eingestellt, was bedeutet, dass Sie die maximal mögliche Breite entsprechend Ihrem Container einnehmen . Unabhängig von der Breite Ihres Containers nehmen Sie einfach den gesamten Platz ein. Das ist es, was 100% eigentlich bedeutet. Aber wir würden es gerne auf etwa 40% reduzieren . Das sieht perfekt aus. Nun, was werden wir als Nächstes tun? Wir wollen zwei Schaltflächen unter diesem Text hinzufügen, oder? Wir möchten unter diesem Text zwei Schaltflächen hinzufügen, damit der Benutzer mehr über unsere Anwendung erfahren oder die App sogar herunterladen kann . Lass uns einfach unseren Button direkt darunter platzieren. Jetzt möchten wir zwei Schaltflächen verwenden und beide Schaltflächen sollten in einer Reihe erscheinen. Das bedeutet, dass beide Schaltflächen in derselben Zeile erscheinen sollten und es keine zwei Zeilen geben sollte. In Ordnung, was können wir in diesem Fall tun? Lassen Sie uns in erster Linie versuchen, herauszufinden , mit welchen anderen Elementen wir im Bearbeitungsstil von Button herumspielen können . Wann immer Sie eine Schaltfläche haben, können Sie den Typ der Schaltfläche ändern, unabhängig davon, ob sie standardmäßig verwendet werden soll. Das heißt, sie hat eine graue Hintergrundfarbe mit der Schaltfläche „Informationen“. Das bedeutet, dass es standardmäßig einige festgelegte Einstellungen gibt. Styling-Einstellungen wie blaue Hintergrundfarbe. Wenn Sie Erfolg haben, wird es grün sein. Wenn es sich um eine Warnung handelt, hat es eine orange Farbe, und wenn es sich um eine Gefahr handelt, hat es eine rote Farbe. Lassen Sie uns einfach die Standardeinstellung beibehalten, Sie können den Text ändern, zum Beispiel mehr erfahren. In Ordnung, wenn Sie dem Text einen Link hinzufügen möchten, wird der Benutzer jedes Mal, wenn der Benutzer auf diese Schaltfläche klickt, auf eine Seite oder einen Teil einer Seite innerhalb dieser Webseite selbst weitergeleitet . Sie können dafür sorgen, dass die Dinge das umgehen. Sie haben die Möglichkeit, mit der Größe der Schaltfläche herumzuspielen , unabhängig davon, ob sie klein, mittel, groß oder extra groß sein soll . Aber ich denke, diese Größe des Buttons ist gut genug. Ordnung, gehen wir zur Stiloption und ändern die Schriftfamilie auf Poppins, was wir auch für andere Schriftarten und andere Elemente angewendet haben auch für andere Schriftarten und andere Elemente Wir ändern die Farbe der Schaltfläche auf Grün, was genau der Farbe unseres Teilers entspricht Was werden wir hier machen? Wir kopieren einfach den Hex-Farbcode für diesen Teiler. Wir gehen zu dieser Schaltfläche in der Farbe der Schaltfläche, ich werde sie hier einfügen Sie können feststellen, dass die Farbe geändert wurde, aber ich möchte sie etwas dunkler machen. Ich denke, diese Farbe sieht gut genug aus. Und das ist dieselbe Farbe, die ich auch hier im Teilerbereich auftragen werde auch hier im Teilerbereich auftragen Lass mich einfach diese Farbe einfügen. In Ordnung, das sieht gut aus, glaube ich, ja. Also, was werden wir tun? Wir haben auch die Möglichkeit, einen Grenzradius hinzuzufügen. Du wirst anhand der Schaltfläche sehen, was Grenzradius eigentlich bedeutet. Im Moment können Sie sehen, dass der Button an allen vier Ecken eine scharfe Kante hat . Oben links, oben rechts, unten, links, unten rechts, richtig. Aber sagen wir einfach für ein Szenario, in dem wir runde Schaltflächen oder abgerundete Kanten für unsere Schaltfläche hinzufügen möchten . Wir können das einfach umgehen und wir können etwas hinzufügen, sagen wir einfach um die 50. Dann können Sie feststellen, dass die Schaltfläche kreisförmig zu sein scheint, aber lassen wir es einfach bei etwa zehn. Ich denke, zehn würden gut aussehen. Oder vielleicht sogar fünf in diesem Fall. Fünf sieht wirklich toll aus. Alles klar, was machen wir jetzt? Wir werden das einfach duplizieren. Jetzt werden Sie feststellen, dass beide Schaltflächen in einem Stapelformat angezeigt werden. Sie sind beide so, einer erscheint oben, der andere erscheint unten. möchten wir jedoch, dass diese beiden Schaltflächen In diesem Fall möchten wir jedoch, dass diese beiden Schaltflächen in einer Reihe erscheinen. Wenn Sie sich die vorherigen Videos angesehen haben, in denen wir ausführlich darüber gesprochen haben , was Flexbox ist und was früher war, was Schnittmenge war, dann wissen Sie natürlich , dass wir einen Container hinzufügen müssen. richten Sie die Elemente so aus, dass beide Schaltflächen in derselben Zeile erscheinen. Lassen Sie uns die Schaltflächen einfach per Drag & Drop in den Container ziehen, um sicherzustellen , dass beide Schaltflächen in derselben Position angezeigt werden. Wir können einfach mit der rechten Maustaste auf diesen Container klicken und Navigator wählen. Hier haben wir einen Container , in dem wir zwei Knöpfe haben. In Ordnung. Jetzt ändern wir die Farbe der Schaltfläche und des Textes in etwas wie „ Jetzt herunterladen “. In Ordnung. Jetzt herunterladen. Lass es mich jetzt einfach entfernen, wir behalten es einfach beim Herunterladen. Fein. Was ich möchte , ist, dass wir einfach die Farbe des gefundenen Produkts zur Standardfarbe machen , nämlich Grau. Ordnung, lassen Sie mich jetzt die Richtung des Containers so ändern , dass er horizontal ist. Jetzt können Sie sehen, dass beide Schaltflächen ungefähr so aussehen. Nun, das ist genau das , was wir wollten. Also gut, was wollen wir jetzt im nächsten Container hinzufügen? Wir möchten direkt darin ein Bild unserer Anwendung hinzufügen . Wir ziehen das Bildelement per Drag & Drop. Ordnung. Elementar ist sehr einfach. Alle Seitenersteller in Wordpress sind sehr einfach zu verstehen und zu erlernen. In Ordnung, hier können wir einfach Image wählen. Jetzt haben Sie die Möglichkeit, die Dateien aus Ihrem Ordner hochzuladen , oder Sie können zwischen verschiedenen Elementen suchen , die Sie bereits hochgeladen haben. Genau hier findest du verschiedene Elemente und Bilder, die ich bereits hochgeladen habe. Oder Sie können sogar die URL eines Bildes eingeben , das Sie bei Google Images gefunden haben. Im Moment werde ich einfach verschiedene Bilder durchstöbern , die ich hier habe. Ich wähle einfach dieses Bild und ich wähle es gleich hier aus. Jetzt können Sie sehen, dass dies das Bild ist , das wir hier haben. Jetzt habe ich die Möglichkeit, mit den Bildeinstellungen herumzuspielen, z. B. die Breite, das maximale Gewicht, die Höhe usw. zu ändern . Und vielleicht finden Sie diese Option, die als CSS-Filter bezeichnet wird, genau hier. Wenn ich jetzt darauf klicke, kann ich zwischen verschiedenen Optionen wählen, um die Unschärfe des Bildes zu um die Unschärfe des Bildes Vielleicht spiele ich mit der Helligkeit des Bildes herum. Derzeit ist es auf 200 eingestellt. Wenn ich meinen Slider nach links bewege, kannst du sehen, dass das Bild dunkler wird. Wenn ich meinen Schieberegler nach rechts bewege, ändert sich die Helligkeit des Bildes, sodass es heller wird. Das bedeutet, dass das Bild weißer sein wird. Sie können sogar mit der Kontrastsättigung herumspielen. Das bedeutet im Grunde , dass Sie nicht unbedingt ein Bildbearbeitungswerkzeug verwenden müssen unbedingt ein Bildbearbeitungswerkzeug verwenden , um einige grundlegende Änderungen an Ihrem Bild vorzunehmen . Ordnung. Ich hoffe, ihr habt ein gewisses Grundverständnis darüber wie die Elemente in Elementary Page Builder funktionieren. Aber es gibt noch eine Sache zu tun, bevor wir, Sie sind fertig mit unserem Gebäude, unserer Helden-Sektion Klicken Sie auf diesen Container und Sie werden feststellen, dass die Elemente so erscheinen , dass sie im oberen Teil haften und nicht in der Mitte erscheinen. Wenn Sie einfach auf diesen Container klicken, werden Sie feststellen, dass die Richtung des Containers vertikal eingestellt ist. Das ist genau das, was wir wollen, aber wir wollen auch den Inhalt so ausrichten, dass der Inhalt und das Bild so erscheinen , dass die Höhe der Container ausgerichtet ist. Ich hoffe, ihr könnt sehen, dass der gesamte Heldenbereich richtig gefüllt ist. Ordnung, jetzt stellst du vielleicht sogar fest, dass zwischen deiner Kopfzeile und deinem Heldenbereich ein gewisser Abstand besteht . Wir werden sehen, wie wir das mit Hilfe von Rand und Padding machen können das mit Hilfe von Rand und Padding Okay, bevor ich mit einem anderen Abschnitt weitermache, Sie vielleicht feststellen, dass sich das Layout unseres Element- oder Seitengenerators geändert hat das Layout unseres Element- oder Seitengenerators geändert Sie können hier oben sehen, dass wir den Namen unserer Seite sehen können. Dann haben wir die verschiedenen Symbole, das Desktop-Symbol, das Tablet und das Handysymbol. Dann hast du die Post-Einstellungen genau hier. Wie ist diese Änderung passiert? Auch im Layout-Bereich können Sie früher sehen, dass wir das Grid nicht hatten, wir hatten nur einen Container dafür. Was ich getan habe, ich bin einfach zu meinem Wordpress-Dashboard zurückgekehrt. Genau hier. Ich bin gerade zu Elementor Settings gegangen In den Einstellungen habe ich eine Funktion in der Liste der Funktionen Was ich anfangs getan habe, war, diese Grid-Container-Funktion auf die Standardeinstellung eingestellt war. Ich habe das in der oberen Leiste des Editors auf aktiv geändert. Ich habe das auch von Standard auf Aktiv geändert. In Ordnung, Sie können auch eine Option zum Bauen mit KI sehen. Ich habe auch von Standard auf Aktiv gesetzt und die Änderungen vorgenommen. Und ich habe es genau hier gespeichert. Aus diesem Grund haben wir ein anderes Layout für unseren Elementor gesehen Gehen wir zurück zu Seiten, allen Seiten Elementor 58 und wir bearbeiten Bearbeiten mit Ordnung, bevor wir nun einen neuen Abschnitt innerhalb des Heldenbereichs selbst erstellen, fügen wir ein neues Bild im Hintergrund hinzu, damit ein gewisser Effekt entsteht Ich möchte hier in diesem Container ein Bild hinzufügen . Wenn Sie zum Stil gehen, finden Sie ein Bild. Ich wähle ein Bild aus , das als Linie für das Bild bezeichnet wird , das ich hier habe. Und Sie können sehen, dass unter dem Heldenbereich eine gekrümmte Linie verläuft. Jetzt ändere ich einfach die Position des Bildes so, dass es auf der linken Seite erscheint. Ordnung, vorher möchte ich die Displaygröße ändern. Sie können sehen, dass die Displaygrößen derzeit auf Standard eingestellt sind. Aber wir können es in etwas wie enthalten ändern. Wenn ich das in „enthalten“ ändere, können Sie sehen, dass die Zeilen erscheinen. Früher haben wir nur eine einzelne Linie gesehen, eine einzige gekrümmte Linie, die unter dem Heldenbereich verläuft, und jetzt können wir mehrere Linien sehen. Nun, wie ist diese Änderung genau passiert? Das Bild selbst enthielt viele verschiedene, in vielen verschiedenen gekrümmten Linien. Aber wir haben nur die einzige Linie gesehen , die durch unseren Heldenbereich ging. Das liegt daran, dass unser Heldenbereich so breit und hoch ist, dass er nur den Teil des Bildes abdeckt , durch den die Linie verlaufen ist. Indem die Anzeigegröße unseres Bildes so ändern, dass es enthält. Das ermöglicht, wie Sie hier sehen können, ich habe die Dokumentation für Element geöffnet oder gleich hier in den verschiedenen Größen, die wir haben. Sie können sehen, dass das Cover enthält, wir haben das auf eingestellt, Sie können sehen dass die Größe enthalten ist. Was bedeutet das, dass das gesamte Bild in das Element passt Offensichtlich wären die Abmessungen des Bildes und die Abmessungen Ihres Abschnitts und die Abmessungen Ihres Abschnitts Ihrer gesamten Flexbox nicht jedes Mal gleich. In diesem Fall möchten Sie, dass das Bild in Ihr Flexbox-Layout passt, sodass das Bild vergrößert Bildgröße kleiner ist als die Flexbox-Option, die Sie haben Oder es wird die Größe des Bildes komprimieren. Die Abmessungen des Bildes werden auf die Größe reduziert und an die Größe des Layouts Ihrer Flexbox angepasst . Ordnung, Sie können hier sehen, das gesamte Bild in das Element passt, wobei die gleichen Proportionen beibehalten werden . Es wird im Grunde nicht fallen. Die Proportionen des Bildes führen häufig zu Letterboxing, bei denen sich um das Bild herum Leerzeichen befinden um das Bild herum Leerzeichen Anstatt Leerzeichen zu hinterlassen, wurde das Bild im Wiederholungsbereich tatsächlich wiederholt Wir können dies auf „Keine Wiederholung“ ändern, sodass Sie sehen können, dass der Teil ganz rechts auf „Keine Wiederholung“ eingestellt ist. Ordnung, die Bilder sehen ungefähr so aus und genau so wollen wir es haben. Wir haben das Bild nicht im Bereich Hintergrund-Overlay hinzugefügt , im Hintergrund selbst hatten wir Classic Wir haben die Farbe geändert und das Bild hinzugefügt. In Ordnung, ich hoffe, du verstehst, worum es geht. Nun, wenn wir zum nächsten Abschnitt kommen, können wir hier dieses Plus-Symbol auswählen. Wenn Sie auf das Plussymbol klicken, können Sie auswählen , ob wir eine neue Flexbox oder ein Rasterlayout hinzufügen möchten. Sie haben die Möglichkeit, eine Vorlage hinzuzufügen. diesen Vorlagen können Sie nun zwischen verschiedenen Element - oder Provorlagen oder Vorlagen , die Sie in Ihrem System gespeichert haben Wir werden uns auch ansehen, wie wir unsere eigenen Vorlagen erstellen und speichern können unsere eigenen Vorlagen erstellen und speichern Dann hast du die Möglichkeit, mit KI zu bearbeiten , indem du das Element oder ich verwendest. Du kannst einfach ein paar Dinge und Elemente schreiben oder du übernimmst einfach die Aufgabe, deinen gesamten Abschnitt oder einige der Elemente zu erstellen . Fürs Erste fügen wir einfach eine neue Flexbox hinzu und behalten die Richtung vertikal bei. In Ordnung, was wollen wir jetzt? Wir wollen einen neuen Abschnitt hinzufügen, der drei Karten mit einem Glas enthalten wird . Tatsächlich wird es einen gewissen Gradienteneffekt geben. In erster Linie möchten wir diesen Texteditor, diese Überschrift und diesen Teiler erneut verwenden Überschrift und diesen Teiler erneut Ich mache einfach ein Duplikat davon. Machen Sie auch ein Duplikat dieses Teilers. Manchmal können Sie möglicherweise nicht auf diesen Teiler klicken nur weil die Größe des Teilers viel zu klein ist Sie können sehen und es gibt keine Lücke zwischen dem Texturator und der Selbst wenn Sie versuchen, den Cursor in der Trennlinie zu platzieren, können Sie manchmal nicht darauf klicken In diesem Fall können Sie einfach auf eines der Elemente klicken Oder Sie können im Container selbst rechten Maustaste klicken und auf Struktur klicken. Früher haben wir Navigator gesehen, aber jetzt haben wir Structure, einfach weil wir ein paar Funktionen im Element oder Abschnitt geändert haben, okay? Aber mehr oder weniger bleibt das Konzept dasselbe. Richtig? Jetzt haben wir Divider Das wollten wir duplizieren. Lass uns ein Duplikat davon machen. Und auch die Überschrift. Lass uns ein Duplikat davon machen. Alles klar, was ich jetzt tun kann, ich kann es einfach hierher ziehen und dort ablegen. Auf diese Weise kann ich auch den Teiler direkt unter diesen Teil ziehen und dort ablegen den Teiler direkt unter diesen Teil Ziehen Sie ihn auch hier unten per Drag & Drop ab. Jetzt ist die Farbe dieses speziellen Texteditors und der Überschrift weiß und der Hintergrund ist ebenfalls etwas weiß. Sie können die Schriftfarbe auf Schwarz ändern. Gehen wir zum Styling-Teil. Wir ändern die Textfarbe auf Schwarz. Wird auch die Farbe dieser Schrift auf Schwarz ändern. Ordnung, sobald wir das getan haben, möchten wir diesen beiden Text zentriert ausrichten . Indem wir einfach auf den gesamten Abschnitt klicken, können wir das Inhaltscenter ausrichten und die Elemente zentrieren. Stellen wir einfach sicher, dass hier auch Align Center verfügbar ist. Wenn nicht, was Sie tun können, können wir einfach zum Inhalt gehen und wir können Text zur Mitte schreiben. Ordnung. Nun zu diesem Teil, was werden wir tun? We Align Center, was wollen wir für diesen Teil? Das sieht nicht gut aus. Das Geschäftsziel in Schwarz, Farbe sieht nicht gut aus. Wir können die Farbe einfach so ändern, dass sie etwas dunkleres Grau annimmt. Diese graue Farbe sieht gut aus. Ordnung, wir können den Text einfach auf etwas wie internationale Zahlungen klicken. Lassen wir es einfach so, intern. Zahlungen. In Ordnung. Wir können die Schriftgröße verringern oder wir könnten sogar den Text davon reduzieren. Sagen wir einfach internationale Zahlungen. In Ordnung. Ordnung. Internationale Zahlungen. Was machen wir damit? Sie können sehen, dass es keinen Abstand zwischen dem Heldenbereich und dem nächsten Abschnitt gibt. Um einen gewissen Abstand zwischen diesen beiden verschiedenen Abschnitten zu schaffen, können wir mit den Einstellungen für Rand und Abstand herumspielen Wenn Sie das hier sehen können, habe ich hier ein Bild, das deutlich erklärt, was Innenabstand und Rand eigentlich bedeuten 7. Blocksy Theme Customizer - Vertrau mir, es ist sehr einfach!: Ordnung, jetzt, wo ihr gelernt habt, wie ihr eure gesamte Website mit dem 11 oder Theme Builder erstellt , schauen wir uns hier unsere Kopf- und Fußzeile an , damit wir die Kopf- und Fußzeile mit dem Theme-Customizer anpassen können , den ihr hier sehen könnt Dieses Symbol hier, das benutzerdefinierte Symbol in der oberen Leiste, ermöglicht es uns, den Theme-Editor zu verwenden Dies ist der Theme-Customizer und wie Sie wissen, verwenden wir tatsächlich das Block-Theme Sie können hier sehen, dass wir das Block-Theme aktiviert haben und je nach Anwendungsfall können Sie auch andere Themes wie Astra verwenden. Insgesamt bleiben mehr oder weniger 80 bis 90% der Elemente, die Sie hier im Theme-Customizer finden , unverändert Aber nur ein paar Dinge hier und da können sich ändern, je nachdem, welche Art von Theme Sie tatsächlich verwenden Jetzt nur für dieses Video, ich habe meine Webcam ausgeschaltet und Sie werden gleich den Grund dafür wissen. Aber lass uns einfach sehen, welche anderen Optionen wir im Theme-Customizer haben In den allgemeinen Optionen findest du die allgemeine Hauptseitenleiste und ähnliche Dinge, mit denen du auch die Farbe und Typografie deiner Website umgehen kannst Farbe und Typografie deiner Dann hast du die Möglichkeit, Änderungen an deinem Block, Beitrag, einzelnen Beitrag und Kategorien und ähnlichem Dann hast du auch die Möglichkeit , deine Seiten zu bearbeiten. Am Ende dieses gesamten Theme-Customizers finden Sie eine Option namens Core. Am Ende dieses gesamten Theme-Customizers finden Sie eine Option namens Core Unter Core findest du Menüs, Widgets, Homepage-Einstellungen und zusätzliches CSS zur Seitenidentität Widgets, Homepage-Einstellungen und zusätzliches CSS In Ordnung, lass uns nach oben gehen. Und unter Allgemein haben wir Header. Wir werden also versuchen, diese Kopfzeile oder Navigationsleiste für unsere Website anzupassen . Was ich tun werde, ich klicke einfach auf die Kopfzeile. Und sobald ich klicke, wirst du feststellen, dass ich Elemente und ich habe Überschriften In Ordnung, und hier findest du drei Reihen. Die obere Reihe, die Hauptreihe und die untere Reihe. Was bedeutet das also und warum haben wir dafür drei Reihen? Ich habe diese Website, und hier drüben können Sie sehen, dass dies eine Navigationsleiste ist. Das ist also wie eine Hauptreihe. Und ganz oben haben Sie den Standort, die Arbeitszeiten und die sozialen Symbole genau hier. Das benimmt sich also wie eine oberste Reihe. Das ist wie deine Hauptreihe, und diese Website hat keine untere Reihe. Meistens verwenden die meisten Websites im Internet nur eine Hauptreihe. Wenn Sie ein Top hinzufügen möchten, können Sie darin Elemente hinzufügen. Also, was wollen wir? Wir wollen ein Logo, wir wollen ein Menü, aber wir wollen kein Suchsymbol in unserer Navigationsleiste. Jetzt könnte das Suchsymbol hilfreich sein, falls Sie eine E-Commerce-Website haben , auf der Sie nach Produkten oder Dienstleistungen suchen oder nach verschiedenen Blockbeiträgen suchen möchten nach Produkten oder Dienstleistungen suchen oder . Aber vorerst streichen wir es einfach durch. In Ordnung, und was werden wir tun? In dieser Zeile selbst können wir ein neues Element hinzufügen. Jetzt sehen Sie vielleicht , dass die Zeile in zwei Spalten unterteilt ist , die linke und die rechte. Und hier in der Mitte haben wir ein paar gepunktete Linien. Im Grunde versucht es zu sagen , dass dies in zwei Abschnitte unterteilt ist Wenn Sie die Einstellungen rund um die Kopfzeile ändern möchten , können Sie einfach auf die Hauptzeile klicken und schon finden Sie die Struktur. Also vorhin haben wir den Header gesehen. Das bedeutet, dass die Header-Einstellungen für die oberste Zeile, die untere Zeile und die Hauptzeile gleich sein werden. Sobald Sie auf die Hauptzeile klicken, werden die Einstellungen nur für diese Hauptzeile geöffnet. In Ordnung, hier haben Sie also die Struktur. Die Containerstruktur ist Standard. Sie können sogar die gesamte Breite der beiden Boxen ändern. Sie können die Höhe und Breite anpassen. Sie können sogar das Design-Layout ändern. Also hier hast du den Hintergrund. Sie haben die Möglichkeit, einige Ränder hinzuzufügen. Sie können auch einen Rand am unteren Rand hinzufügen. Und Sie können Ihrer Kopfzeile sogar etwas Schatten hinzufügen. Aber lassen Sie uns einfach zurückgehen und versuchen , einige Elemente in unsere Hauptzeile einzufügen. Hier können Sie also sehen, dass wir eine Kontooption haben. Das bedeutet, dass einige Leute die Möglichkeit bieten möchten, sich von ihrer Website an - oder abzumelden Wenn Leute eine E-Commerce-Website haben, möchten sie den Benutzern natürlich die Möglichkeit geben , sich in ihr Konto einzuloggen , damit sie frühere Bestellungen tätigen können Oder, Sie wissen schon, sie können sich ihre Kaufhistorie ansehen. Sie können zusätzliche Rabatte oder Gutscheine erhalten. Sie können also das Account-Widget verwenden. Dann hast du den Button HTML. Auf diese Weise können Sie einige andere Plug-ins einbetten , indem Sie den HTML-Code einfügen Dann haben Sie das Menü , das bereits verwendet wird. Also all die Seiten, die wir haben und wir haben ein Hauptmenü erstellt, oder? Das Menü wurde Navar genannt, wenn ich mich nicht irre, also wird das hier angezeigt Dann haben Sie die Suche und die sozialen Symbole. Also genau hier, genau wie wir verschiedene soziale Symbole haben , ist das etwas Ähnliches. Wir haben ein Widget genau hier. Versuchen wir also, einen Button mitzubringen. Und wir können diese Schaltfläche links vom Hauptmenü oder rechts vom Hauptmenü platzieren vom Hauptmenü oder . In Ordnung, wir können das sogar dazwischen hinzufügen. In Ordnung, wir haben drei Spalten. Wir haben einfach keine zwei Spalten. Es ist nur so, dass, wenn wir keine Elemente dazwischen hinzufügen, natürlich etwas Platz übrig bleibt. Hier haben wir also die Schaltfläche, und Sie können sehen, dass sie einige Standardeinstellungen in Bezug auf das Design übernimmt . Hier der Text, wenn wir mit der Maus darüber fahren, wird die Textfarbe blau Und die Farbe der Schaltfläche ist standardmäßig ebenfalls blau. Und wenn wir mit der Maus darüber fahren, wird es dunkelblau oder so etwas wie ein sehr dunkelblauer Farbton Ordnung, also können wir auch die Farbe des Buttons ändern Wir können einfach auf Button klicken. Und hier finden Sie die Optionen, mit denen Sie zwischen verschiedenen Button-Layouts wählen können. Hier haben Sie also eine Schaltfläche, bei der die Schaltfläche selbst eine Hintergrundfarbe hat oder die Schaltfläche nur eine Randfarbe hat und der Hintergrund der Schaltfläche transparent ist. In Ordnung. Sie können sogar die Größe der Tasten ändern. Sie können sogar ein Etikett hinzufügen. Anstatt es herunterzuladen, können Sie also, wenn Sie so etwas wie einen Kontakt geben oder einen Anruf buchen möchten, sogar so etwas hinzufügen. Wenn Sie nun eine URL hinzufügen möchten , die besagt, dass jemand, der auf diese Schaltfläche klickt, eine Seite weitergeleitet wird. Sie können die Link-URL hinzufügen, wenn Sie das möchten. Immer wenn der Link eingefügt wurde und wenn jemand auf die Schaltfläche klickt, sollte er auf eine neue Seite in einem neuen Tab weitergeleitet werden Manchmal passiert es also , dass jedes Mal, wenn Sie auf die Schaltfläche klicken, die Weiterleitung meistens derselben Registerkarte selbst erfolgt Wenn Sie ihm jedoch die Option geben möchten , den neuen Link in einem neuen Tab zu öffnen, können Sie diesen Schalter einfach umschalten Ordnung. Dann haben Sie die Möglichkeit, Ihre eigene CSS-Klasse und andere Dinge hinzuzufügen. Wenn wir zum Design gehen, können Sie sehen, dass Sie die Schriftfarbe ändern können. Sie können sogar die Farbe der Schaltflächen ändern. Also lass es mich einfach so machen. Und wir können die Farbe der Schaltfläche auf Grün ändern. Hier können wir die Farbe auswählen. Jetzt findest du hier nicht die Farbe, die wir als globale Farbe in unserem Elementor gespeichert haben , nur weil dies eine Theme-Einstellung ist und das dein Elementor-Seitenersteller war Hier können wir die grüne Farbe einfach manuell auswählen, indem wir unseren Cursor platzieren und etwas Ähnliches, aber nicht Ich glaube nicht, dass wir genau dieselbe Farbe finden würden. Und das ist für Initial und das ist für Hover. Wir können also einfach den Hex-Code kopieren und dieselbe Farbe auch für den Hover einfügen Wenn wir also den Mauszeiger bewegen, ändert sich die Farbe der Schaltfläche nicht. Also gut, so haben wir die Konsistenz gewahrt Kommen wir nun zum Teil mit der Schriftfarbe. Die Schriftfarbe ist zunächst auf Schwarz eingestellt. Alles klar? Okay. Also die Farbe, das ist nicht für dein Menü , sondern für deinen Button. Ordnung, also hier ist die ursprüngliche Textfarbe weiß, und wenn Sie den Mauszeiger darüber bewegen, ist sie auch weiß Also werden wir es hier nicht ändern. Sie können einen Randradius hinzufügen, wenn Sie Ihrer Schaltfläche kreisförmige oder, Sie wissen schon, abgerundete Kanten geben möchten . Sie können sogar einen Rand und andere Dinge hinzufügen , um Ihr Design zu umgehen. Sie zu Ihrem Hauptmenü zurückkehren, finden Sie hier Ihr Hauptmenü. Und hier hast du jetzt ein Logo. Sie werden feststellen, dass es den Seitentitel aufnimmt, aber nicht das Logo. Hier können Sie also einfach ein Logo auswählen, Sie können ein Bild auswählen. Also hier werde ich dieses Bild als Logo für meine Webseite auswählen . Hier werden Sie feststellen, dass dieses Bild einen Text in weißer Farbe hat. Weil Sie sehen können, dass das Logo genau hier erscheint. Da die Hintergrundfarbe unseres Headers jedoch weiß ist und die Textfarbe ebenfalls weiß ist, wird das Logo nicht richtig angezeigt. In diesem Fall haben wir also zwei Möglichkeiten. Entweder können wir unser Logo mit Photoshop so bearbeiten, dass die Textfarbe schwarz oder etwas dunkler wird. Oder wir können die Hintergrundfarbe unserer Hauptzeile , unserer Navigationsleiste, ändern . Das Beste wäre also, die Hintergrundfarbe, du weißt schon, den Header zu ändern . Also was wir hier tun können, wir können einfach die Hintergrundfarbe ändern. Aber bevor wir das tun, möchten wir nicht , dass der Seitentitel angezeigt wird. Also können wir das einfach ausschalten und der Seitentitel wird nicht mehr angezeigt. In Ordnung. Sie können sogar die Ausrichtung Ihres Inhalts ändern , d. h. ob Ihr Logo in der linken, mittleren oder rechten Linie erscheinen soll . Sie können das sogar hier tun Sie haben die Möglichkeit , je nach Reaktionsmodus zwischen verschiedenen Geräten zu wählen je nach Reaktionsmodus zwischen verschiedenen Geräten hier zum Designteil kommen, können Sie den Rand ändern Was werden wir tun? Wir werden die Hintergrundfarbe ändern. Wenn ich hier auf die Hauptzeile klicke, findest du Design. Und ich kann den Hintergrund hier ändern. Ich habe die Möglichkeit, einen klassischen Hintergrund in der Farbe zu verwenden. Ich habe die Möglichkeit, den klassischen Hintergrund zu wählen , oder ich kann sogar einen Farbverlauf verwenden. Farbverlauf. Wie Sie bereits erfahren haben, ist es so, als würden zwei Farben gleichzeitig in einem linearen oder radialen Format verwendet . Sie können sehen, dass Sie zwischen verschiedenen vorgefertigten Farbschemata wählen können , die dieses Thema bietet Sie können aber auch mit Ihren eigenen benutzerdefinierten Farben arbeiten. Sie können sogar Ihr eigenes Bild im Hintergrund hinzufügen, aber das würde wirklich schrecklich aussehen Bleiben wir also einfach bei der Farbe. Und hier kannst du mit der Farbe herumspielen. Also gut, wenn du dieser speziellen, du weißt schon, Hintergrundfarbe eine Farbe hinzufügst dieser speziellen, du weißt schon, Hintergrundfarbe eine , ist das nur für deine Hauptreihe und nicht für deine obere und untere Reihe. Ich meine, wenn Sie, Sie wissen schon, Ihren Button in der obersten Reihe platzieren möchten , dann werden Sie feststellen, dass die oberste Zeile eine andere Hintergrundfarbe hat . Die Einstellungen werden also nur für die Hauptreihe übernommen und nicht für die obere oder untere Zeile. Ich hoffe du verstehst, worum es geht. Bringen wir das zurück, weil wir nicht mehrere Zeilen wollen, wir wollen nur eine einzige Zeile. Und hier haben wir die schwarze Hintergrundfarbe. Wenn wir jetzt die schwarze Hintergrundfarbe beibehalten, können wir sehen, dass es sich bei dem Text um Text handelt. Oder die Schriftart für unser Menü, die Farbe ist nicht wirklich attraktiv. Sowohl die Farben als auch der Hintergrund und die P-Farbe selbst sind sehr dunkel. Wir müssen also einen kontrastierenden Effekt erzielen. Wir klicken auf Menü Eins. Wir gehen zu Design und ändern die Farbe P in Weiß. Bringen wir das Weiß her. Sie finden drei Farboptionen: Initial, Hover und Active Nun, was bedeutet aktiv? Aktiv bedeutet im Grunde, dass, wo auch immer Sie auf die Seite geklickt haben, sagen wir einfach, Sie haben auf Home geklickt Sie befinden sich also auf der Startseite selbst, oder? Wann immer Sie sich auf der Startseite befinden, die Farbe dieses Textes ändert sich die Farbe dieses Textes in eine Farbe, die Sie festgelegt haben, was darauf hinweist. Okay, du bist auf dieser Seite. In Ordnung. Lass uns für alle Farben Weiß machen. Und hier finden Sie, dass Hover auch weiß ist und Active auch weiß ist Sie können sogar die Schriftfamilie ändern. Sie können sogar die Schriftgröße ändern. Sie können sogar die Schriftstärke ändern. In Ordnung, hier haben Sie all die verschiedenen Optionen. Sie können sogar eine Drop-down-Option direkt hier im Theme-Customizer hinzufügen direkt hier im Theme-Customizer Ordnung, hier könnte die Drop-down-Option also aus zwei Optionen bestehen Ob Sie möchten, dass im Drop-down-Menü angezeigt wird, von wo aus Sie mit der Maus über dieses bestimmte Seitenelement fahren, oder ob Sie auf dieses Element klicken möchten Und dann sollte das Drop-down-Menü angezeigt werden. Das ist so etwas Ähnliches. Sie können die Elemente sogar über den Effekt ändern. Das heißt, ob Sie möchten, dass es sich um eine einfache, einfarbige Boxfarbe handelt. Sie können sogar einen gewissen Abstand zwischen den Elementen im Drop-down-Menü hinzufügen . Sie können sogar den Offset ändern. Im Grunde bedeutet das den Abstand zwischen den Elementen. In Ordnung, dann hast du den horizontalen Versatz. Es bedeutet im Grunde den vertikalen und horizontalen Abstand. Okay, zurück zu dem Teil, wo wir deine Hintergrundfarbe haben, du hast einen schwarzen Hintergrund und du hast dunklen Grau-Schwarzton einer Helden-Sektion Nun, dieser Header und dieser Heldenbereich sehen nicht so gut Können wir diese Hauptreihe nicht einfach so machen , dass sie transparent erscheint ? Natürlich können wir das tun, indem wir einfach zu Ihrem Header zurückkehren. Wir können einfach zum Header zurückkehren, wir können einfach zu den Headern gehen, Global Header auswählen und dann die transparente Funktionalität nutzen und den Schalter umschalten Jetzt werden Sie feststellen, dass der gesamte Header jetzt transparent ist Es wird das Design eines Heldenbereichs annehmen. Jetzt werden Sie feststellen , dass, sobald wir unsere Kopfzeile transparent gemacht haben, die Einstellungen für Rand und Abstand entfernt wurden. Das bedeutet, dass unser Heldenbereich mit unserem Header übereinstimmt Wir können den Rand und die Polsterung später zu unserem Hero-Bereich hinzufügen , indem wir zu unserem Element - oder Seitenersteller zurückkehren Aber vorerst behalte ich das einfach als meine transparente Kopfzeile. Jetzt finden Sie hier auch eine Schaltfläche, nämlich Bedingungen bearbeiten. Was bedeutet das jetzt? Sobald ich darauf klicke, werden Sie feststellen, dass ich zwischen verschiedenen Optionen wählen kann, ob ich möchte, dass diese Einstellungen für die transparente Header-Anzeige für meine gesamte Website oder nur auf einer bestimmten Webseite angezeigt werden auf einer bestimmten Webseite angezeigt . Ordnung, wenn ich das so mache, sagen wir einfach, nur zu dieser Seite hinzufügen. Lass mich einfach als deine Seite auswählen, was genau diese Seite ist. Und ausschließen. Sie können Ausschließen hinzufügen. Auf welcher Seite können wir das ausschließen? Sagen wir einfach, ich möchte das von meiner Blockseite oder einigen anderen Seiten wie der Blockseite ausschließen meiner Blockseite oder , okay? Ich kann das von der Blockseite ausschließen. Ich kann das sogar von einer anderen Seite ausschließen, vielleicht von einer vier- oder vierseitigen Seite. In Ordnung, also kann ich die Einstellungen jetzt einfach speichern. Mal sehen, was passiert, wenn ich das schließe. Und lassen Sie mich das einfach veröffentlichen , damit alle Einstellungen gespeichert werden. Und sobald ich geschlossen habe, gehe ich zu meinem Presse-Dashboard. Ich öffne eine Blockseite, indem ich zum Post-Bereich gehe. Ein Beitrag, ich werde meinen ansehen. Also, sobald ich hier bin, okay. Auch hier werde ich diesen durchsichtigen Header finden. Aber im Idealfall sollten wir das nicht tun. Gehen wir zu Seiten und was werden wir tun? Wir werden zur Blockseite navigieren. Wo haben wir unsere Protokollseite damit wir eine Blockseite erstellen können, wenn wir wollen. Gehen wir zurück zu unserer Website. Wir passen unseren Header an, indem wir zum globalen Header gehen, dort Bedingungen festlegen, und wir wollen das nur auf unserer einzelnen Seite einbinden . Okay, dieser Blog ist nur eine Seite und nicht zum Posten bestimmt. Sie können sehen, das ist von, dieser Blog ist Teil unserer Seite und unseres Beitrags. Lassen Sie uns einen einzelnen Beitrag auswählen. Okay. Sobald wir diesen einzigen Beitrag geschrieben haben, speichern wir die Bedingungen. Okay, wenn wir zurückgehen, ändern wir die Farbe der Hauptreihe auf Schwarz. Okay, wir haben schwarze Farbe, oder vielleicht ändern wir das einfach in etwas wie Blauton. Ich werde zu einem bläulichen Farbton wechseln. In Ordnung, irgendwas in der Nähe. Lass uns veröffentlichen. Kehren wir zu unseren Bedingungen für die Kopfzeile und die globalen Header-Einstellungen zurück . Und wir wollen den transparenten Header in eine einzelne Seite aufnehmen und in einem einzelnen Beitrag ausschließen. In Ordnung, sagen wir einfach alle Post-Archive. Ordnung, die Bedingungen, die wir dabei verwendet haben , und sobald wir gehen, veröffentlichen wir. Ich bin mir nicht ganz sicher, warum die Einstellungen nicht übernommen wurden. Vielleicht versuchen wir, unsere Webseite zu aktualisieren. Lassen Sie mich zu den Bedingungen für die Kopfzeile und die globalen Header-Einstellungen zurückkehren . Ordnung, versuchen wir es, indem wir die Seite mit den Datenschutzrichtlinien verwenden. Ich werde das durchgehen, ich kann die Bedingungen speichern und veröffentlichen. Ich werde sie schließen. Gehe zu den Seiten, alle Seiten hier. Wir sollten unsere Seite mit den Datenschutzbestimmungen finden. Ich glaube, wir haben es weggeworfen. Lass uns diese Seite wiederherstellen. Ordnung, gehen wir zurück zu einer Seite. Hier haben wir das. Lassen Sie uns jetzt eine Vorschau davon anzeigen. Sie werden feststellen, dass dieser Header einen blauen Hintergrund hat. Genau das bedeutete der gesamte Teil mit den Bedingungen. Kehren wir zu unserer Haupt-Website zurück. Wir werden auf diese Webseite gehen. Sobald wir hier sind, wählen wir Benutzerdefiniert Sobald wir nach unten scrollen, finden Sie unter Menüs, dass wir derzeit das Menü in der Navigationsleiste verwenden. Jetzt haben wir im Menü der Navigationsleiste eine Startseite, wir haben die Info-Seite, wir haben die Kontaktseite. Aber was ist, wenn wir dem Hauptmenü noch ein paar Seiten hinzufügen möchten ? Lassen Sie uns versuchen, Artikel hinzuzufügen. Hier findest du Elementor 58, die Seite, die wir mit unserem gesamten Page Builder erstellt haben mit unserem gesamten Page Builder Lass uns versuchen, das hinzuzufügen. Sobald wir es hinzugefügt haben, können wir es ziehen und genau dort platzieren, wo wir wollen. Wir können sie neu anordnen. Sobald wir das getan haben, können wir es einfach speichern und veröffentlichen. Sobald wir das getan haben, was Sie tun können, anstatt diese Startseite als Standardseite Ihrer Website festzulegen , können Sie sie als Standardseite festlegen, indem Sie einfach zurückgehen. Sie können zurückgehen und unter Core die Homepage-Einstellungen auswählen. Gehen wir also zu den Homepage-Einstellungen Anfangs wird Ihr letzter Beitrag möglicherweise als Standardbeitrag angezeigt. Sie können einfach einen statischen auswählen. Anstatt die Startseite als Startseite auszuwählen, können Sie das Element 58 auswählen. Und das finden Sie als Standardseite. In Ordnung, unter der Beitragsseite findest du verschiedene Optionen. Du kannst sogar eine neue Beitragsseite hinzufügen. Ordnung, wir werden uns ansehen wie wir diesem Teil einen Blockbeitrag hinzufügen können. Aber lass uns das vorerst einfach veröffentlichen. Wir gehen zurück und schauen uns einige andere Einstellungen an. Jetzt finden Sie hier auch verschiedene Menüs und verschiedene Widgets, die wir haben. Dies sind alles Gutenberg-Presseelemente. Hier haben Sie die Homepage-Einstellungen, die wir im Abschnitt zur Identität der Website gesprochen haben Hier finden Sie den Seitentitel, den wir als Tress gespeichert haben , sowie das Site-Symbol. Was bedeutet das Seitensymbol hier oben auf dieser Website? Sie finden dieses spezielle Symbol genau hier. Und dieses Symbol, wenn Sie dieses Symbol in etwas Ähnliches oder vielleicht ein anderes eigenes Bild ändern möchten etwas Ähnliches oder vielleicht , können Sie einfach ein Symbol auswählen. Wir wählen einfach dieses Bild aus und es fordert uns auf, es zuzuschneiden , weil es 512 mal 512 Pixel groß ist. Also werden wir es hier einfach auf diese Dimension reduzieren. Sie werden feststellen, dass der Seitentitel oder das Seitensymbol geändert wurde. In Ordnung, speichern wir das einfach und kehren zu unserem Theme-Customizer zurück Hier im Thema unter der Überschrift haben wir diesbezüglich Änderungen vorgenommen Sobald wir zum Allgemeinen übergehen, finden Sie verschiedene Optionen. Ordnung, unter Allgemein findest du auch eine Option , nämlich nach oben zu scrollen. Was bedeutet es nun, wenn ich die Schriftrolle nach oben hinzufüge? Sobald ich nach unten scrolle, findest du unten rechts auf deiner Website eine Schaltfläche. dieser Schaltfläche können Sie jetzt jedes Mal, wenn Sie auf die Schaltfläche klicken bis zum obersten Teil unserer Webseite scrollen Das ist eine sehr hilfreiche Funktion, wenn Sie eine lange Liste von Elementen oder Abschnitten auf Ihrer Webseite Und es hilft Ihren Benutzern , zum obersten Teil Ihrer Webseite zu navigieren Sobald wir nun auf dieses Pfeilsymbol klicken , wenn Sie nach oben scrollen, werden Sie verschiedene Schaltflächensymbole sehen Sie können sehen, dass Sie eine Standardschaltfläche haben, Sie können zu so etwas wechseln , etwa so. Sie können sogar die Form der Schaltfläche ändern, unabhängig davon, ob sie einen quadratischen Kreis haben soll. Sie können sogar das Design ändern, ob die Symbolfarbe weiß sein soll, Hintergrundfarbe, Sie können sie ändern, Sie können sogar etwas Schatten hinzufügen Sie können sogar etwas Schatten hinzufügen und Sie können sogar ausrichten, ob sie je nach Anwendungsfall ganz rechts oder links angezeigt werden soll ganz rechts oder links angezeigt . Das ist der einzige Grund, warum ich meine Webcam ausgeschaltet habe , nur um das Scrollen nach oben zu zeigen. Funktionalität ist hauptsächlich unten rechts auf Ihrer Webseite verfügbar . In Ordnung. Unten finden Sie jetzt ein Mondsymbol. Es wechselt im Grunde zu einem Dunkelmodus-Thema für Ihren Theme-Customizer Und sobald Sie auf das Sonnensymbol klicken, wechselt es zum Thema Lichtmodus Das waren einige grundlegende Informationen. Lass uns das veröffentlichen und wenn wir zurück sind, schalten wir es einfach ab mit der Schraube nach oben Sie finden auch eine Option, um zum Webseiten-Frame zu wechseln Sie wissen schon, dadurch hat Ihre Website einen Rahmen, eine Art Rahmeneffekt. Sie können sogar die Rahmengröße ändern, Sie können die Rahmenfarbe und ähnliches ändern. Okay, zurück zu den Breadcrumbs und anderen Bereichen unter dem allgemeinen Layout, was bedeutet Breadcrumb? Gehen Sie also davon aus, dass Sie auf der Walmart-Seite sind. Lassen Sie mich Sie einfach zu Walmart bringen , damit ich die Dinge ziemlich einfach erklären kann Ich gehe zu Walmart und wenn ich zur Abteilung gehe, okay, lass mich einfach eines der Dinge auswählen Sagen wir einfach, ich gehe zur Elektronik. Unter Elektronik haben wir, sagen wir einfach iPhone. Und wenn ich hier auf iPhone klicke, findest du Handys nach Marken sortiert. Apple iPhone. Das ist also wie ein Brotkrumen Es wird angezeigt , auf welcher Seite, auf welcher Seite , auf welcher Seite Sie das Produkt gefunden haben Sie können also etwas Ähnliches tun, indem Sie den Breadcrumb in Ihre Hauptzeile einbetten und ähnliches In Ordnung, ich hoffe, du verstehst, worum es geht. Schauen wir uns die Fußzeile an. Sobald ich hier nach unten scrolle, findest du diesen speziellen Teil sich in der unteren Reihe befindet Auch in der Fußzeile finden Sie drei Zeilen. Die obere Reihe, die untere Reihe, oder ich sollte sagen, die mittlere Reihe und dann die untere Reihe In Ordnung, hier kannst du mehrere Widgets hinzufügen. Sie finden Menüs, verschiedene soziale Symbole und Vegetaria eins bis drei, bis sechs Fügen wir also Vegetaria eins, Vegetaria zwei und Vegetaria drei hinzu Wenn ich auf Vegetaria eins klicke, wirst du feststellen, dass es zunächst leer ist Wir können Gutenberg-Blöcke hinzufügen. Das sind drei Gutenberg-Blöcke. Hier kann ich eine Überschrift hinzufügen, ich kann eine Überschrift hinzufügen, so etwas wie Lass uns einfach über uns sagen. In Ordnung. Wir können auch das Tag dieser Überschrift ändern. Anfänglich könnte man sagen zu H zwei. Sie können dies je nach Anwendungsfall auf H346 ändern. Und hier erfährst du mehr über uns. Gut, wir können auch ein weiteres hinzufügen, sagen wir einfach Absatz-Tag. Und ich kann einen einfachen Text hinzufügen, so etwas. Ich kann einfach den einfachen Text hinzufügen. Ich platziere den Text genau hier. Oder ich könnte es einfach so einfügen , dass das Styling nicht genau hier eingefügt Sie können das über uns auch in der Vegetaria finden. Ich kann die Seiteneinstellungen hinzufügen. Die Seitenliste könnte aufgerufen werden oder das gesamte Menü. Alle Seiten, die Teil unserer Website sind, werden angezeigt. Ich kann einfach nach einer Seitenliste suchen. Ich kann es hier runterbringen. Sie finden alle Seitenlisten, die wir haben und die Teil unserer Website sind. Ordnung. Wir können hier sogar eine Überschrift nach oben hinzufügen. Ich kann so etwas wie Seiten hinzufügen, in Ordnung. Sie können sehen, dass die Seiten unter Ihrer Seitenliste angezeigt werden. Sie können es also einfach per Drag & Drop ziehen. Oder Sie können es einfach platzieren, indem Sie einfach auf die Seiten klicken. Wenn Sie auf den Aufwärtspfeil klicken, können Sie es einfach platzieren. Lassen Sie mich einfach diesen Teil auswählen. Ich ziehe das einfach oder verschiebe es nach unten. Ordnung, und jetzt können Sie sehen, dass Seiten oben und die Seitenliste unten angezeigt werden. Ordnung. Hier können Sie auch andere Elemente hinzufügen. Lassen Sie mich etwas hinzufügen, sagen wir einfach, kontaktieren Sie uns. Wir können hier weitere Blöcke hinzufügen. Du findest eine Menge verschiedener Optionen, die du verwenden Du kannst dein YouTube-Video, dein Vimeo-Video und viele andere Dinge finden und einbetten , die du hier hinzufügen kannst, worauf ich nicht näher eingehen werde Also, wer versteht es, verschiedene Gutenberg-Elemente zu verwenden Ordnung, hier findest du auch verschiedene soziale Symbole und andere Dinge, die wir hier haben. Sie finden verschiedene Optionen, um verschiedene Einstellungen wie Farben, Ihre Typografie und die Leistung Ihrer Website zu umgehen verschiedene Einstellungen wie Farben, Ihre Typografie und die Leistung Ihrer Website zu Wenn Sie jedoch generell einen Seitenersteller verwenden , sei es Element oder DV, ist es am besten, mit der Farbe und den Typografieeinstellungen in diesem Seitenersteller selbst umzugehen, anstatt Ihren Theme-Customizer zu verwenden , damit Ihre Website nicht kaputt geht den Typografieeinstellungen in diesem Seitenersteller selbst umzugehen, anstatt Ihren Theme-Customizer zu verwenden , damit Ihre Website nicht Hier haben wir die gesamten, hier haben wir die gesamten Theme-Customizer-Einstellungen behandelt gesamten Theme-Customizer-Einstellungen Ich hoffe, den Jungs hat dieser Vortrag gefallen. In der nächsten Lektion werden wir sehen, wie wir mit dem Theme-Customizer Blockbeiträge erstellen können mit dem Theme-Customizer Blockbeiträge erstellen 8. Blogbeiträge erstellen und bearbeiten - Vertrau mir, es ist sehr einfach!: In Ordnung, lassen Sie uns sehen, wie wir einen Blockbeitrag erstellen können. Hier oben findest du das Plus-Symbol, das neue Plus. Sobald Sie mit der Maus darüber fahren, wird eine Liste mit Optionen, einer Medienseite, einer Lining-Seite, Vorlage und einem Benutzer angezeigt. Was bedeutet das also? Sobald Sie auf Beitrag klicken, können Sie einen Blockbeitrag erstellen. Wenn du auf Medien klickst, darfst du Bilder, Videos und GIF-Dateien hochladen , Videos und GIF-Dateien Wenn du auf eine Seite klickst , darfst du eine Webseite erstellen Wenn Sie auf die Landingpage klicken, dürfen Sie eine Landingpage erstellen Der grundlegende Unterschied zwischen einer Landingpage und einer einfachen Webseite besteht also einer Landingpage und einer einfachen Webseite im Grunde darin, dass eine Landingpage im Allgemeinen für die Konvertierung optimiert ist . Das bedeutet im Grunde, dass Sie möchten, dass Benutzer, wann immer sie auf Ihrer Landing Page landen, eingeben einige Details zu ihren persönlichen Daten eingeben oder eine sofortige Transaktion im Austausch für ein digitales Produkt oder eine Dienstleistung oder eine Art von Buchung für Ihre Veranstaltung tätigen eine sofortige Transaktion im Austausch für digitales Produkt oder eine Dienstleistung . Es geht um die Landing Page, eine Webseite, die den Inhalt und die Informationen anzeigt und präsentiert, das ist Ihre Webseite Im Allgemeinen ist die Landing Page für diejenigen gedacht, die eine sofortige Transaktion durchführen möchten Und der Zweck der gesamten Seite besteht nicht darin, über das Unternehmen, das Produkt oder die Dienstleistung zu kommunizieren , sondern eine sofortige Transaktion durchzuführen, unabhängig davon, ob es nur darum geht, die E-Mail-Adresse oder ihr Geld durch Eingabe der Kartendetails zu sammeln ihr Geld durch Eingabe , das ist die Landingpage-Vorlage. Wie wir bereits in Element oder Page Builder gesehen haben , können wir Vorlagen erstellen. Genau hier haben wir Benutzer Sie können Ihrer Webpress-Website mehrere Benutzer hinzufügen. Lass uns auf Post klicken. Sobald Sie darauf klicken, wird Ihnen dieser Presseredakteur hier angezeigt. Sie können Ihrem Blogbeitrag einen Titel hinzufügen. Hier können Sie den Inhalt für Ihren Blogbeitrag hinzufügen. Wenn ich versuche, Inhalte hinzuzufügen, lass mich dem einfach so etwas wie Blog Nummer eins geben. Alles klar? Und wir können sagen , dass dies ein Testblog ist. Ordnung. Das ist mein Titel. Jetzt werden Sie hier im rechten Bereich feststellen, dass die Sichtbarkeit auf öffentlich eingestellt ist. Das heißt, wann immer dieser spezielle Blockbeitrag veröffentlicht wird, ist er öffentlich zugänglich und kann von jedem eingesehen werden. Ordnung, jetzt besteht der einzige Unterschied zwischen einem Blockbeitrag und einer Webseite darin, dass der Inhalt des Blockposts zwar der Inhalt des Blockposts der Webseite selbst wiederverwendet werden könnte Block-Beitrag können Ihre Benutzer, die Ihren Blog lesen, jedoch im Wesentlichen Kommentare am Ende Ihres Blockposts hinterlassen Kommentare am Ende Ihres Blockposts und diesen Blog in den Social-Media-Profilen teilen Das ist also der einzige Vorteil des Hinzufügens eines neuen Blockposts. Wenn Sie Blöcke erstellen, können Sie Vorlagen verwenden und die URL ändern. Sie können sogar festlegen, wer der Autor dieses Blockposts ist. Wenn Sie mehrere Benutzer sind, können Sie wählen, wer diesen Blog veröffentlicht. Sie können jeden einzelnen Blog kategorisieren. Nehmen wir einfach an, Sie haben drei Blogs, drei Kategorien von Blogs, Webdesign, E-Commerce und SEO Sie können sie also kategorisieren, indem Sie neue Kategorien hinzufügen. Du kannst neue Hashtags hinzufügen, sodass Nutzer, die Blöcken suchen verschiedenen Blöcken suchen, die du veröffentlicht hast, nur ein paar Stichwörter eingeben können Und je nach den Tags und Kategorien, in denen du sie kategorisiert hast, werden sie angezeigt, und dann findest du ein ausgewähltes Bild Selbst wenn dein Inhalt des Blocks kein Bild enthält, kannst du jetzt des Blocks kein Bild enthält, ein ausgewähltes Bild hinzufügen , sodass auf deiner gesamten Webseite , auf der alle Blockkarten angezeigt werden, dort dein ausgewähltes Bild angezeigt wird. Auszug bedeutet im Grunde, dass eine einfache Zusammenfassung dessen angezeigt wird, worum es in Ihrem gesamten Block geht Jetzt ist der Auszug optional . Du kannst es hier aufschreiben. Es erkennt Ihren Inhalt nicht automatisch und bildet ein Ganzes, es sei denn, es ist für sich allein. Sie müssen es manuell eingeben. Ordnung, hier unten werden Sie sehen, ob Sie Kommentare von Benutzern zulassen möchten oder ob Sie pinke Rückseiten und Trackbacks zulassen möchten ? Das heißt, jeder kann zurück zu deinem Blogbeitrag verlinken. Es ist immer eine gute Praxis , dies zu überprüfen. In Ordnung, wir können hier einige Sperrinhalte hinzufügen. Ich kann Textinhalte hinzufügen, so etwas wie, lass uns das einfach sagen, okay. Ich werde den Inhalt von dieser Website kopieren. Ich kann es hier einfügen. Ich kann sogar ändern, ob es fett oder kursiv sein soll oder ob es ein Überschriften-Tag sein soll. Ich kann das in Überschrift H zwei ändern. Ich kann das als H zu einem Tag machen. Standardmäßig wird jeder Titel Ihres Blogposts auf N H ein Tag gesetzt. Ordnung. Wir können sie einfach bearbeiten. In Ordnung. Oder wir können sogar jedes einzelne Element auswählen , das wir auf unserer Webseite haben. Okay, hier kannst du ein paar zusätzliche Dinge hinzufügen. Sie können sogar einen Link zu Ihrem bestimmten Wort oder Ihren Sätzen hinzufügen . Sie können einige der Wörter hervorheben. Sie können ein Inline-Code-Bild hinzufügen. Sie können ein tiefgestelltes oder hochgestelltes Zeichen hinzufügen. Es gibt eine Reihe verschiedener Optionen. Ordnung, wenn du hier auf das Plus-Symbol klickst, lass es mich dir einfach zeigen. Was meine ich damit? Wenn ich auf dieses Plus-Symbol klicke, kannst du zwischen verschiedenen Gutenberg-Elementen oder Gutenberg-Blöcken blättern verschiedenen Gutenberg-Elementen oder Gutenberg-Blöcken Hier kann ich darauf zurückgreifen, sagen wir einfach, ich möchte ein Bild einbetten Ich kann hier einfach nach einem Bild suchen, ich kann sogar die Galerie nutzen. Das bedeutet, dass mehrere Bilder genau hier angezeigt werden könnten. Sie können sogar das Logo der Website verwenden. Sie müssen nicht manuell durch das Logo navigieren , das Sie für diese Website festgelegt haben. Sie können sogar das vorgestellte Bild verwenden. Welches Bild auch immer für das vorgestellte Bild eingestellt ist , wird hier angezeigt. Sie können sogar das Cover für diesen Blogbeitrag festlegen. Ordnung, Sie können sogar Medien und Text hinzufügen, sodass der Inhalt und das Bild umschlossen werden. In Ordnung. Sie können sehen, das heißt im Grunde, dass Sie Medien und Wörter nebeneinander stellen , um ein reichhaltigeres Layout zu erhalten, Sie ein paar Dinge bearbeiten können Wir können das Bild hochladen oder Bild aus der Medienbibliothek auswählen Das würde ich hier lieber tun. Ich kann diese Leute auswählen. Ordnung, und das haben wir für unseren Blogbeitrag hier. Ich kann sogar veröffentlichen oder weitere Inhalte hinzufügen. Lassen Sie mich versuchen, weitere Inhalte hinzuzufügen. Ich kann hier einfach einige Absatzinhalte hinzufügen. Ich kopiere den folgenden Text. Gut, ich füge ihn hier ein. Ich kann sicherstellen, dass es sich um Absatztext handelt. Sie können feststellen, dass dies ein Absatztext ist. In Ordnung, hier haben wir den gesamten Blockpost. Ich kann sogar noch ein paar Inhalte hinzufügen. Ich kann hier einfach auf die Info-Seite gehen, ich werde den Großteil des Inhalts finden. Ich glaube, ich kann es einfach kopieren. Ich kann es einfach hier platzieren. In Ordnung, lass es mich einfach machen, ich füge es ein. Okay, ich denke, wir haben vielleicht nicht das Ganze kopiert, also kopieren wir einfach den gesamten Inhalt und fügen ihn ein. Sobald wir das getan haben, veröffentlichen Sie. Ordnung, wir können veröffentlichen und Sie werden feststellen, dass dieser Blog zur Ansicht verfügbar ist. Nachdem wir uns den Beitrag angesehen haben, wollen wir sehen, wie er aussieht. Hier können Sie also feststellen, dass der Header tatsächlich einen blauen Hintergrund hat. Denn wenn Sie sich richtig erinnern, haben wir, als wir versucht haben, Ihren Einstellungen für die Anzeige der Kopfzeile einige Bedingungen zu geben , gesagt, dass nur für die Startseite selbst, die Element von 58 ist, die Kopfzeile einen transparenten Hintergrund haben sollte. Aber für Ihre Blogseiten sollte die Kopfzeile einen blauen Hintergrund haben. Ordnung, hier findest du den Bereich, in dem Leute Kommentare hinterlassen können. Hier können sie den Kommentar posten und sogar deine Inhalte erneut teilen In Ordnung, hier wirst du das finden. Wer hat diesen Blog veröffentlicht? Welcher Tag genau? Und ist es in eine Kategorie eingeteilt oder nicht? Wenn Sie sie neu anordnen und in eine richtige Struktur bringen möchten , können Sie dies sogar tun, indem Sie zum Anpassen gehen Wir klicken erneut auf Theme Customizer. Hier im Bereich Beiträge blockieren findest du hier einzelne Beiträge. Es gibt verschiedene Layouts , um deinen Beitrag zu strukturieren. Standardmäßig ist es auf schmale Breite eingestellt. Das heißt, zuerst wird Ihr Titel angezeigt, dann das Bild, und dann wird die Tras-Struktur so aussehen. Wenn ich das auf normale Breite ändere, kannst du sehen, dass es keinen solchen Abstand oder Rand zwischen deiner rechten und linken Richtung Wenn ich das auf die linke Seitenleiste ändere, dann findest du hier auf der linken Seite verschiedene Beitragstitel Und etwas Ähnliches kann auf der rechten Seite angezeigt werden. Ordnung, hier kannst du sogar das vorgestellte Bild verwenden , wenn ich es veröffentlicht habe. Warte eine Sekunde, nur eine Sekunde hier. Du würdest kein vorgestelltes Bild für diesen Blockbeitrag finden , weil wir nichts eingestellt haben. Also lass mich einfach schließen. Ich werde diesen Beitrag bearbeiten, indem ich auf diese Schaltfläche klicke. Und hier werden Sie feststellen , dass wir kein ausgewähltes Bild eingestellt haben . Lassen Sie mich also einfach ein ausgewähltes Bild auswählen. Was ich bin, ich werde diesen Typen als Hauptbild auswählen. Ordnung. Dies ist nicht Teil des Blockposts, sondern ein ausgewähltes Bild. Lassen Sie mich also einfach meinen Blog aktualisieren und wann ich meine Seite ansehe. Um das zu sehen, kann ich einfach auf diese Schaltfläche klicken, um den Beitrag anzusehen. Und es wird in einem neuen Tab geöffnet. Jetzt hier, obwohl wir es als vorgestelltes Bild angegeben haben, würdest du es in unserem Blockbeitrag nicht finden. Warum? Wenn wir also auf den Theme-Customizer klicken, wenn wir die Einstellungen für einzelne Beiträge durchgehen und nach unten scrollen, werden Sie feststellen, dass die Einstellung für das ausgewählte Bild ausgeschaltet ist. Sobald wir umschalten, werden Sie feststellen, dass zuerst das vorgestellte Bild angezeigt wird, dann der Titel und dann, wer den gesamten Block veröffentlicht hat Poste hier, du kannst sogar Beitrags-Tags hinzufügen, sodass alle Hashtags, die du verwendest, angezeigt werden Sie können unten sogar eine Share-Box hinzufügen. Die Leute können diesen Beitrag auf ihrer Facebook-Seite teilen , die im Profil, auf Pinterest oder sogar auf Twitter verlinkt ist. Sie können sogar ein Autorenfeld hinzufügen, sodass der Autor , der diesen Blog veröffentlicht hat, einige weitere Kommentare hinzufügen kann. Sie können sogar eine Beitragsnavigation hinzufügen. In Ordnung. Sie können sogar eine Beitragsnavigation hinzufügen. Und Sie können sogar verwandte Beiträge hinzufügen, was im Grunde bedeutet, dass alle Beiträge , die sich auf diesen Titel und diese Kategorie beziehen , als Vorschlag am Ende des Blockbeitrags angezeigt werden . Ich hoffe, du verstehst, worum es geht deinen Blockbeitrag komplett zu erstellen und zu bearbeiten. Ich denke, es ging so ziemlich darum. 9. Unsere mobile Homepage gestalten: Ordnung, schauen wir uns an, wie wir unsere Website responsiv gestalten können. Im Moment wird das, was Sie hier auf dem Bildschirm sehen, diese Art von Designebene auf Desktop-Bildschirmen angezeigt Was passiert, wenn wir dieselbe Website auf einem Tablet oder einem mobilen Bildschirm betrachten dieselbe Website auf einem Tablet oder einem mobilen Bildschirm Natürlich können die Elemente miteinander übereinstimmen, da sich die Größenbreite und der Abstandsrand je nach Gerätebreite ändern Wir müssen uns also ändern, bevor wir unsere Website tatsächlich responsiv gestalten Es gibt noch ein paar Dinge, die mit dieser Website zu tun haben, insbesondere mit unserem Heldenbereich. Erstens, wie Sie sehen können, dieses Bild und der Inhalt hier mit unserem Header überein, weil wir unseren Header transparent gehalten haben Lassen Sie uns der Helden-Sektion etwas Polsterung hinzufügen. Wir klicken auf Editith Elementor. Und lass uns einfach warten, bis es geladen ist. Genau hier für diesen Abschnitt, ich klicke gleich hier. Sie können sehen, dass wir den gesamten Container bearbeiten. Wir gehen zu den erweiterten Einstellungen und genau hier im Padding füge ich etwas Abstand von oben hinzu Ich benutze einfach meine Aufwärtspfeiltaste auf der Tastatur, um den Heldenbereich herunterzuklappen Unsere 100 Pixel Polsterung von oben sehen also gut aus. Also lass uns das einfach veröffentlichen. Ordnung, sobald ich nach unten scrolle, habe ich all diese Abschnitte, die auf dem Desktop-Bildschirm erscheinen. Nun gibt es eine Sache, über die ich vorhin noch sprechen möchte, nämlich Akkordeon Als wir uns mit Tabs befassten, hätten wir meiner Meinung nach auch über den Bereich Akkordeon sprechen sollen über den Bereich Akkordeon sprechen Lassen Sie mich schnell einen neuen Abschnitt hinzufügen. Ich werde gleich hier einen neuen Abschnitt hinzufügen. Ich werde eine Flexbox mit zwei Spalten hinzufügen. Hier haben wir unser Akkordeon. Lassen Sie uns zuerst einen Titel hinzufügen. Fügen wir einen Titel unter diesem Titel hinzu, wir werden, was sagen Sie, unser Akkordeon verwenden Wir können stattdessen ein Akkordeon hinzufügen. Was wir tun können, wir können einfach ein Duplikat dieses Teilers machen , sodass wir diesen Teiler einfach hierher bringen können fragst dich vielleicht, dass die Breite dieser Trennwand genau hier in diesem speziellen Behälter so groß war Die Breite war viel größer als das, was wir hier sehen können als wir dupliziert und genau hier in diesem Container platziert Sie können sehen, dass sich die Breite entsprechend angepasst hat. Warum ist das so? Weil wir hier zwei Spalten haben. Wir haben zwei Container. Es hat seine Höhe angepasst. Oder besser gesagt, entsprechend gut, lass uns einfach eine Zeile hinterlassen. Dadurch erhöhen wir die Breite auf etwa diesen Punkt. Wir werden Akkordeon hinzufügen. Lass uns Akkordeon hinzufügen. Nun, Akkordeon ist so etwas wie eine C-Sektion Sie können hier sehen, dass wir Akkordeon haben. Wir können auf diese verschiedenen Elemente klicken und sie werden zusammenbrechen und zusammenbrechen In der Akkordeonversion hast du etwas Inhalt, du hast ein Symbol Wenn es bereits geöffnet ist, findest du den Inhalt genau hier. Sie können den Inhalt ändern, Sie können den Titel ändern. Es ist etwas Ähnliches wie das, was wir zuvor gesehen haben. Was wir tun können, wir können sogar das Symbol ändern. Im Moment haben wir die Icon-Bibliothek. Wir können zwischen verschiedenen Symbolen navigieren, die wir haben. Sie können die empfohlenen Symbole für unser Akkordeon hier sehen Symbole für unser Akkordeon hier Sie können sogar die Ausrichtung des Symbols ändern. Anstatt die linke Linie zu erstellen, können wir sie hier in die rechte Linie ändern. Es sieht gut aus, gut im linken Behälter. Was wir tun können, wir können einen weiteren Container hinzufügen. Was ich versuche ist, ich versuche nur, diese Art von Kiste zu nutzen . Jetzt wird das für Anfänger sehr schwierig werden. Lassen Sie uns versuchen, eine einfache Version dieses Layouts zu erstellen. Was ich tun werde, ich füge einfach einen neuen Container in diesen vorhandenen Container ein. Und stellen wir einfach sicher, dass dieser Container vertikal ausgerichtet ist und die Breite dieses bestimmten Containers tatsächlich 100 beträgt. Ordnung, es wird also tatsächlich die gesamte Höhe verwendet. In Ordnung. Machen wir es in voller Breite. Und was werden wir tun? Wir werden später auch die Breite ändern, aber vorerst versuchen wir, einige Bilder darin einzufügen. Ich werde hinzufügen, wir werden das Bild so ändern wie, hier habe ich dieses Bild, ich werde dieses Bild verwenden. Ich werde auch ein weiteres Bild hinzufügen. Lassen Sie mich einfach ein Duplikat davon machen. Also gut. Die Richtung des Containers wird auf horizontal geändert. Fein. Die Richtung des inneren Containers wird auf horizontal geändert. Ich ändere dieses Bild in etwas Ähnliches, sagen wir mal. Ordnung, Sie können die Richtung sehen, oder besser gesagt, ich sollte sagen, die Größen dieser Bilder sind unterschiedlich. Um ihnen etwas Ähnliches zu geben , werde ich das duplizieren. Ich werde das duplizieren. Wir werden dafür sorgen, dass dieser Container in Ordnung ist. Du weißt, was ich tun sollte. Ich sollte ein Duplikat dieses Containers machen. In Ordnung. Ein Container hat diese beiden Bilder und der andere Container hat diese beiden Bilder. Gut, versuchen wir, den Inhalt umzukehren. In Ordnung, so sieht es aus. Nun wird der Container, der innere Behälter, den wir hier haben, der innere Behälter, den wir hier haben, versuchen, seine Höhe so zu ändern , dass er innerhalb des Containers selbst gut aussieht. Meiner Meinung nach können wir diesem Container eine gewisse Hintergrundfarbe geben. Lass mich das stylen. Wir können eine Farbe wählen, wir können ihr etwas wie Schwarz oder einen dunkleren Farbton geben . Das sieht gut aus. Genau so haben wir ein ähnliches Design-Layout erstellt , oder? Der einzige Unterschied besteht darin, dass das Bild einen gewissen Randradius hat. Ordnung. Ich hoffe, du verstehst, worum es in diesem Teil geht. Wir können diesem Akkordeon sogar noch ein paar weitere Artikel hinzufügen. zum Inhalt gehen, können wir duplizieren, dass doppelte Artikel erstellt werden Wir können diese vier, diese 23 und so weiter ändern . In Ordnung, lassen Sie uns das veröffentlichen. Schauen wir uns nun an, wie wir unsere Website responsiv gestalten können. Das war die gesamte Absicht, Das war die gesamte Absicht hinter der Erstellung dieses gesamten Videos stand. Genau hier oben findest du den Desktop, das Tablet-Symbol und das Smartphone-Symbol. Wenn Sie das nicht oben finden , würden Sie es auf jeden Fall in der unteren linken Ecke Ihres Elementor-Bearbeitungsfensters finden. Die Website sieht auf Desktop-Bildschirmen gut aus, aber lassen Sie uns sehen, wie sie auf Tablet-Bildschirmen aussieht Ich klicke einfach auf den Portraitmodus meines Tablets. Hier kannst du feststellen , dass unsere Helden-Sektion selbst nicht so toll aussieht. Beim Titel selbst können wir die Schriftgröße reduzieren. Aber die beiden Spalten hier sehen nicht so gut aus. Was wir tun können, ist, dass wir zwei Optionen haben. Entweder können wir die Schriftgröße verringern und versuchen, den gesamten Inhalt so anzupassen, dass er in die Tablet-Breite passt. Aber ich würde vorschlagen, einen anderen Abschnitt zu verwenden , was wir tun können. Wir können das einfach replizieren, indem wir mit rechten Maustaste auf unseren Container Wenn Sie nicht in der Lage sind, was Sie tun können, können Sie einfach auf Struktur klicken Stellen Sie sicher, dass Sie den Heldenbereich unseres Containers ausgewählt haben, und dann können Sie einfach ein Duplikat davon erstellen. Ordnung, sobald du das getan hast, direkt unter diesem Heldenbereich findest du direkt unter diesem Heldenbereich den doppelten Bildschirm. Gut. Nun, im Bereich Duplikate, was ich tun werde, werde ich einfach diesen Container entfernen. Wenn wir dieses Bild haben, wollen wir das nicht, wir löschen es einfach hier. Es bleibt dieser spezielle Container übrig einen Textor, den Teiler und den Titel hat, gefolgt von einem weiteren Tester und zwei Buttons Versuchen wir, sie so auszurichten, dass sie in der Mitte erscheinen Dafür klicke ich einfach auf diesen Container. Ich gehe zur Richtung. Natürlich wollen wir, dass das horizontal ist. Es macht keinen Unterschied, auch wenn ich das auf vertikal ändere. Aber was wir wollen, ist, dass wir rechtfertigen wollen , dass der Inhalt in den Mittelpunkt gerückt wird. Lass uns das machen. Jetzt können Sie feststellen , dass der Container in der Mitte ausgerichtet ist, okay. Jetzt ist das alles gut, aber versuchen wir auch, die gesamte Schriftgröße dieses bestimmten Titels zu ändern . Ich gehe zur Registerkarte Stil und klicke auf Typografie. Ich reduziere die Größe auf etwa, sagen wir einfach 50 Pixel Also behalte ich einfach die 50 Pixel und das würde gut aussehen, gut. Jetzt findest du das vielleicht hier drüben. Wir haben etwas Polsterung von oben, aber wir haben keine Polsterung von unten Fügen wir auch eine Polsterung von unten hinzu. Hier was ich tun werde, ich klicke einfach auf diesen Container. Ich gehe zum Bereich für Fortgeschrittene. Genau hier findest du die Polsterung ab den oberen hundert Pixeln, aber lassen wir sie nach unten fallen und ändern auch die Polsterung für die unteren Ich werde einfach die Verknüpfung der Werte aufheben. Sobald Sie auf Link aufheben klicken, werden Sie feststellen, dass die obersten Werte ebenfalls auf Null zurückgesetzt wurden Der einfache Grund dafür ist , dass Sie, wie Sie sehen können, neben dieser Polsterung das Tablet-Symbol finden Die Einstellungen für die Polsterung wurden für das Tablet-Gerät zurückgesetzt Auch hier muss ich für den unteren Teil 100 angeben. Ich mache daraus etwa 50. Das würde uns ausreichend Platz lassen , um unseren nächsten Abschnitt zu beginnen. Fein. Wenn du willst, kannst du eine Taste löschen, wenn du willst, aber ich würde sie einfach so lassen, wie sie ist. Und wenn Sie möchten, können Sie diesen Inhalt sogar genau hier zentrieren. Ich gehe einfach zu diesem Teil. Ich gehe zum Styling und ändere die Ausrichtung auf Mitte. Jetzt werden all diese Einstellungen nur für Tablet-Bildschirme angewendet. Sie können hier sehen, dass wir den Tablet-Porträtmodus haben. Wir können diesen Teiler in der Mitte ausrichten. Sie können sogar unseren Titel mittig platzieren. Gehen wir zum Inhalt. Hier finden wir die Ausrichtung. Auch dies wird dieses Zentrum ausrichten. Stellen wir sicher, dass dieser spezielle Container mit zwei Schaltflächen in einer Reihe auch zum Inhaltszentrum ausgerichtet ist. All diese Dinge erscheinen in der Mitte, okay. Selbst wenn ich den Desktop-Modus ansehe, werden Sie feststellen, dass der andere Abschnitt direkt darunter angezeigt wird. Wir wollen nicht, dass das passiert. Dieser Teil des Heldenbereichs sollte nur auf Tablets und Kinoleinwänden angezeigt nur auf Tablets und Kinoleinwänden und auf dem Desktop ausgeblendet werden. Der Bereich mit den besten Helden , den wir hier haben, sollte dagegen nur auf Desktop-Bildschirmen angezeigt und für Tablet - und Smartphone-Geräte ausgeschaltet sein . Klicken wir also auf diesen speziellen Container. Wir werden diesen Container bearbeiten. Wir gehen zur Registerkarte „Erweitert“, direkt unter „Erweitert“. Wenn du nach unten scrollst, findest du den Bereich, der als responsiv bezeichnet wird. Klicken Sie einfach auf Responsive. Und hier findest du verschiedene Optionen zur Auswahl. Den Sichtbarkeitsmodus verstecken wir im Tablet-Portraitmodus, wir verstecken uns im mobilen Portraitmodus. Und im folgenden Abschnitt werden wir diesen Teil natürlich im Desktop-Modus ausblenden, weil wir nicht möchten, dass dieser Teil auf Desktop-Bildschirmen angezeigt wird. Wenn ich in den Desktop-Modus gehe, wird dieser Heldenbereich . Und dieser Teil, der angezeigt wird, aber nur im grauen Modus, weil wir der Advent sind, wir der Herausgeber sind, deshalb können wir diesen Teil sehen. Okay, hier, sobald wir auf den Tablet-Bildschirm gehen, findest du den Bereich „ Nächster Held“. Dieser Teil der Helden-Sektion. Ordnung. Lass uns nach unten scrollen und hier findest du diese drei Karten. Jetzt dieser Gradienteneffekt mit drei Karten, wir haben so viel gearbeitet und es gab so viele Komplikationen direkt in verschachtelten Containern Und wir haben gelernt und unsere Energie verschwendet worden , weil wir nicht einfach alle drei Spalten in einer einzigen Breite Wie können wir dann auf diese einfache Weise vorgehen? Wir können einfach auf diesen Container klicken. so etwas wie Vertikal machen, anstatt die Flexbox horizontal Können wir nicht einfach so etwas wie Vertikal machen, anstatt die Flexbox horizontal auszurichten? Wir können das gleiche Ergebnis erzielen. Im Moment können Sie die Breite entsprechend der Breite unseres Desktop-Bildschirms sehen . Karten mit Farbverlauf werden hier richtig eingesetzt. Sie können sogar das Symbol, diesen Text und diese Textmittellinie anpassen, wenn Sie möchten, aber ich werde es einfach so lassen, wie es ist. Ordnung, und beachten Sie bitte , dass diese Richtung, die auf vertikal eingestellt ist, derzeit nur für Tablet-Bildschirme gilt, nicht für Desktop-Bildschirme. Wenn ich einfach in den Desktop-Modus zurückkehre, werden Sie feststellen, dass diese drei Spalten, diese drei Container , in einem horizontalen Flexbox-Modus erscheinen . Gut. Gehen wir zurück zu diesem Tablet-Modus. Wir können diese Schriftgröße verringern , indem wir zur Typografie gehen, und wir können sie so erscheinen lassen, dass sie in einer einzigen Zeile erscheinen Auch hier machen wir 50 Pixel und stellen sicher, dass dies im Tablet-Modus ausgewählt ist, oder? Größe von 50 Pixeln für diesen Titel wird also nur auf Tablet-Bildschirmen angewendet. Ich hoffe, du verstehst, worum es geht. Sobald wir nach unten scrollen, finden wir einen weiteren Abschnitt in dem wir das Styling einfach kopieren und einfügen können. Also fügen wir das Styling einfach hier ein. Ordnung, und hier können Sie sehen, dass wir den Titel wieder in 50 Pixeln haben . Nun, die Tabs eins und Tabs zwei, beide sehen gut aus. Wir müssen uns nicht unbedingt ändern, zumindest für Tab 1 halte ich es nicht für nötig , etwas in Tab eins zu ändern. Aber ich denke, dass wir für Tab zwei einige Dinge ändern können , sodass unser Symbol nicht so klein erscheint und der Text auch in einer einzigen Zeile, dem Titel selbst, richtig angezeigt wird . Versuchen wir also, sie zu bearbeiten. Das werde ich tun, ich werde das einfach veröffentlichen . Okay, ich werde das veröffentlichen. Ich kehre in meinen Ansichtsmodus zurück, sobald ich hier eine Vorschau meiner Änderungen angezeigt habe. Wenn ich mit der Maus über meinen Editith-Elementor fahre, findest du Tab eins und Lass uns einfach schnell auf Tap Two klicken , damit wir den Inhalt, den wir in Tap Two haben, bearbeiten können Ich kann einfach auf Reaktionsmodus und Tablet-Modus klicken. Hier finden Sie das Symbol. Lass uns auf das Bildfeld klicken. Hier können wir zum Styling-Teil gehen. Im Styling haben wir das Bild. Lass uns auf Bild klicken. Hier können Sie sehen, dass die Breite derzeit auf 15% eingestellt ist . Erhöhen Sie dies auf etwa, sagen wir einfach 30. Okay. Wir können die gleichen Einstellungen auch später darauf anwenden, aber versuchen wir einfach, diesen Teil hier zu umgehen. Der Inhalt selbst, wo wir den Titel und die Beschreibung haben . Wir können auch die Typografie reduzieren. Lassen Sie uns die Größe einfach auf etwa 20 Pixel reduzieren. 20 Pixel würden meiner Meinung nach so gut aussehen. Außerdem werden wir alle die gleichen Einstellungen anwenden. Lassen Sie uns die gleichen Einstellungen hier kopieren und einfügen. Styling einfügen. Und hier können Sie feststellen, dass unsere gesamte Tab-Two-Box so aussehen wird. Gut, lass uns das alles veröffentlichen. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Wir werden wieder hierher zurückkehren. Lass uns die Webseite aktualisieren. Wenn wir uns das Tablet genauer ansehen, werden Sie feststellen, dass die von uns vorgenommenen Änderungen hier übernommen werden. Lassen Sie mich einfach nach unten zu dem Teil scrollen , in dem wir zur zweiten Registerkarte wechseln können. Sobald ich Tap Two ausgewählt habe, wirst du feststellen, dass ein Titel in einer einzigen Zeile erscheint. Außerdem scheint das Bild größer zu sein als das, was es zuvor aussah. Sobald du nach unten scrollst, findest du auch dein Akkordeon, was ich nicht für nötig halte , um das Akkordeon herum zu Aber für diesen Teil, in dem wir diese speziellen Bilder und verschiedene Abschnitte haben diese speziellen Bilder und , die wir hier haben, können wir eine Lücke zwischen ihnen hinzufügen Lücke zwischen diesem Container und diesem Container. Wir können einen gewissen Abstand zwischen ihnen hinzufügen. Wir können einfach auf den äußeren Behälter klicken. Wir können hier nach unten scrollen. Wir können einfach den Abstand zwischen ihnen vergrößern. Gut, so dass es den gesamten Raum einnimmt. 70 aus Spalte und Zeile sieht meiner Meinung nach gut aus. Oder Sie könnten sogar die Richtung der Flexbox von vertikal auf umgekehrt ändern der Flexbox von vertikal auf umgekehrt Es scheint dir so zu sein. Sie können es einfach ändern, wie Sie möchten. Sobald Sie nach unten scrollen, finden Sie diesen Abschnitt, in dem dieses Bild mit dem nächsten Abschnitt überschneiden sollte Dies geschieht jedoch nicht im Tablet-Modus. Warum? Also lass es uns überprüfen. Offensichtlich gibt es ein Problem mit den Einstellungen für Abstand und Rand Wir müssen nicht unbedingt Änderungen an diesem speziellen Abschnitt vornehmen , in dem wir das Bild dieses Typen haben Gehen wir einfach schnell zum nächsten Abschnitt. Hier haben wir diesen Teil. Wir werden die Polsterungseinstellungen unverändert lassen, aber was wir eigentlich wollen, ist, dass dieser Abschnitt einen Minuswert für den Rand von oben hat Gehen wir zu „Fortgeschritten“. Hier haben wir Spielraum. Lassen Sie uns die Verknüpfung der Werte für Margin von oben aufheben. Ich lege es runter, sodass es aussieht, als ob sich das Bild mit dem nächsten Abschnitt zu überlappen scheint mit dem nächsten Abschnitt zu überlappen Gut, so sieht der Inhalt aus. Klicken wir so auf das Bild, dass der Text und dieses Bild nicht so sehr miteinander übereinstimmen Wir gehen von rechts zu den erweiterten Einstellungen für dieses Bild. Sie werden feststellen, dass es einen Rand gibt , der minus den Studienpixeln entspricht Lass es uns hier unten ablegen. Wir hatten -30 Anfangs hier, von unten hatten wir minus 220, richtig? Gehen Sie runter auf etwas wie -18 Ich denke, -18 würde gut aussehen, -18 sieht gut aus Und wir werden es so lassen, wie es ist. Gut, hier haben wir verschiedene Dinge. Nun, der Inhalt dieses Containers, in dem wir diesen Teil haben , berührt unser gesamtes Wasser. Sie können hier sehen, was wir tun können. Wir können tatsächlich etwas Polsterung von rechts und links, rechts geben etwas Polsterung von rechts und links, rechts Lass uns einfach zu diesem Container gehen. Wir gehen von oben und unten zu Advanced über. Wir haben 20, aber machen wir es auch von rechts und links. Fügen wir von rechts und links 20 Pixel hinzu. Jetzt sieht der Inhalt nett aus. Gut. Lassen Sie uns diesen Titel auch auf das reduzieren, was wir hier haben. Ich kopiere einfach. Ich füge den Stil so ein, dass er hier erscheint, aber du kannst hier finden, dass die Farbe der Schrift geändert wurde. Wir müssen die Farbe der Schrift auf Weiß ändern. Okay, weiße Schrift. Hier haben wir diese Bilder. Gut, alles sieht gut aus. Scrollen wir nach unten. Und hier haben Sie den Abschnitt „Aufruf zum Handeln“. Gut, darüber müssen wir uns keine Sorgen machen , denn das sieht wirklich gut aus. Jetzt, innerhalb weniger Minuten, haben wir unsere Website tatsächlich für den Tablet-Modus responsiv gemacht . Mal sehen, wie eine Website auf einem Mobilgerät aussehen würde. Wir klicken hier einfach schnell auf das Symbol für den mobilen Portraitmodus. Sie werden feststellen, dass der Heldenbereich meiner Meinung nach gut aussieht. Ordnung, aber wir können immer noch einige Lücken zwischen allen Elementen hinzufügen , sodass sie tatsächlich den gesamten Bereich für den Heldenbereich abdecken Klicken wir also einfach auf den äußeren Container für den Heldenbereich Wir werden im Layout-Tab selbst nach unten scrollen . Du wirst Lücken finden. Versuchen wir also einfach, die Lücke so zu vergrößern, dass wir nicht viel Abstand haben. Ordnung. Auch für diesen gesamten Abschnitt gehen wir zu Erweitert und reduzieren die Polsterung Wir lassen nur die Polsterung herunterfallen und wir wollen nur, dass die Polsterung von oben ungefähr ist, sagen wir auch 50 von Lassen wir es einfach bei 50. Gut, ich bin mir nicht ganz sicher, wie unser Header aussehen würde , wenn er mit unserer Helden-Sektion übereinstimmt Lassen Sie uns das standardmäßig auf 100 belassen. Ich finde das sieht ziemlich cool aus. Sobald wir hier nach unten scrollen, haben Sie alle anderen Elemente. Auch hier können wir den Schriftstil herunterklappen. Die Typografiegröße muss für diesen Teil auf etwa 25 Pixel reduziert Wir können es auch auf etwa zehn Pixel reduzieren, ich würde sagen, weil wir es gerade auf einem Desktop betrachten, oder Möglicherweise stellen wir fest, dass der Inhalt für Firmennamen viel zu klein ist. Aber sobald wir uns die genaue Website auf einem Mobilgerät ansehen, würden wir feststellen, dass sie gut aussieht. Lassen Sie uns auch die Breite dieses Dings verringern , sodass sie etwa um diesen Teiler herum Die Breite sieht auch gut aus. Auch für diesen Teil können Sie den Schriftstil und die Schriftgröße herunterklappen . Ich finde, es sieht gut aus, also werde ich nicht mit diesem Teil herumspielen. Ja, aber für den zweiten Container dem wir das Bild im Hintergrund haben, können wir die Position dieses Typen im zweiten Container ändern . Lassen Sie mich einfach die Struktur auswählen. Genau hier in der Struktur haben wir den zweiten Container. Der dritte Container, okay, der zweite Container, Hintergrund, wir gehen zum Stil über. Hier habt ihr den Hintergrund in der Displaygröße, hier habt ihr das Cover. Die Wiederholung ist Standard, die Position kann nicht geändert werden. Ich denke, also versuchen wir mal zu sehen ob wir die Position ändern können oder nicht. Wenn ich das als Benutzerdefiniert festlege, dann schauen wir mal, was passiert. Okay, nur für Mobilgeräte, wir können das in etwas Ähnliches ändern. In Ordnung. Meiner Meinung nach würde das gut aussehen. Gut, das sieht wirklich gut aus. Lassen Sie uns dieselben Einstellungen, die wir für diesen Teil vorgenommen haben, auch für die anderen Abschnitte anwenden . Fein. Was werden wir tun? Ich glaube nicht, dass wir die Schriftgröße für den Titel verringern müssen . Ordnung. Ich kopiere einfach. Ich scrolle nach unten und füge das Styling für diesen Titel ein. Ich werde das Gleiche für diesen und auch für den Teiler In Ordnung, jetzt haben wir Tab eins und Tab zwei. Lass uns auf Tapon klicken, um zu sehen, wie es aussieht. Tab hat sich sehr gut angepasst. Die Richtung der Flexbox wurde automatisch von horizontal auf vertikal geändert . Aber für Tab zwei gibt es meiner Meinung nach noch einiges zu tun. Sie können hier sehen, dass wir nicht wollen, dass dieser Rand erscheint. In Ordnung. Wir wollen nicht, dass diese Grenze erscheint. Wenn wir wollen, können wir das hier hinzufügen. Lass uns das Ding ändern. Wir werden das einfach veröffentlichen. Sehen wir uns zunächst eine Vorschau der Änderungen an. Wir klicken hier auf Elementor und Tab zwei Ich gehe zum mobilen Bildschirm für diesen Container auf der Registerkarte Stil Gehe zur Grenze, ich werde das entfernen. Wir werden sicherstellen, dass es keinen Rand gibt, oder auch wenn es einen Rand gibt , den wir dem unteren hinzufügen möchten. Lass uns nach unten etwas hinzufügen. So würde der Abstand aussehen, aber das sieht nicht gut aus. Lass mich es einfach zurücksetzen. Ich mache das wieder auf Null. Ordnung. Was können wir noch tun? Ich denke, das sieht gut aus, wenn wir die Grenze entfernen, und das sieht meiner Meinung nach ziemlich gut aus. Fein. Lass uns das einfach veröffentlichen . In Ordnung, wenn wir zurückgehen, aktualisieren wir unsere Seite. Sie werden feststellen, dass die Änderungen übernommen werden. Lass uns auf den mobilen Modus klicken. Wir werden nach unten zum zweiten Teil unseres Tabs scrollen. In Ordnung, hier haben Sie Tab zwei. Und so sieht es in diesem Behälter für das Akkordeon Oder besser gesagt, diese Registerkarte, Sie werden feststellen, dass die Ausrichtung so ist, diese Position vertikal sein muss Mal sehen, wie es vertikal funktioniert. Vertikal hilft es nicht. Lass es uns einfach waagerecht halten und hier zentrieren. Sie können zwischen verschiedenen Typen wählen. Was früher im Wesentlichen passiert ist , war , dass auf Desktop- und Tablet-Bildschirmen Tab und Tap To oben angezeigt wurden. Aber was jetzt auf Mobilgeräten passiert, ist, dass es sich einfach wie ein Akkordeon verhält Hier haben Sie die Tab-Option und dann unten die Tap-Option. Der nächste Abschnitt, das Akkordeon hier. Lass uns etwas Polsterung hinzufügen, wenn du willst, du kannst, aber im Moment lasse ich es einfach so, wie es ist Und hier sieht es gut aus. Scrollen wir nach unten zu dem Teil, in dem wir diesen Teil hier haben, das Bild und diesen Teil. Da wir gesagt haben, dass der Bildindex eins ist, wird er vorne angezeigt. Hier haben wir den Hauptteil, den Titel, die Beschreibung, den Teiler Und hier hast du das Bild. Das Bild erscheint vor dem Text. Im Moment wollen wir nicht, sich diese Dinge überschneiden. Was wir tun können, anstatt diese Marge auf minus 220 zu setzen, können wir sie einfach so belassen Das sieht viel sauberer und viel besser aus. Und ich denke, wir sind ziemlich startklar. einzige Änderung, die wir vornehmen müssen, betrifft den Firmennamen , den Titel usw. Lassen Sie uns das Styling also sehr schnell kopieren und einfügen . In Ordnung, lassen Sie uns dieses Zentrum auch hier ausrichten. Ich kann zum Stil-Teil für den Texteditor gehen. Ich kann dieses Zentrum ausrichten. Ich kann diese Mitte für das Teil ausrichten. Okay, für die ganze Test-Sache. Wir können das Inhaltszentrum rechtfertigen. Stellen wir sicher, dass das Bildfeld, das wir hier haben, alle mittig ausgerichtet erscheinen, für alle mittig ausgerichtet sein muss. Wir können es einfach kopieren. Wir können das Styling dafür prima hier einfügen. Wir können auch die Einstellungen ändern. Fein. Sie können feststellen, dass alle Partnerbilder Partnerlogos in einem vertikalen Format gut aussehen, aber wir müssen einige Lücken zwischen ihnen hinzufügen. Lass uns auf den innersten Container klicken. Wir werden nach unten scrollen und einige Lücken hinzufügen. In Ordnung, ein Abstand von etwa 45 Pixeln würde gut aussehen. Meiner Meinung nach sehen 45 Pixel gut aus. Lass es uns einfach so lassen wie es ist. Wir können das wieder ändern, aber ich werde das nicht immer und immer wieder machen. Hier können Sie die Schriftgröße herunterklappen , wenn Sie möchten, auch für die Schaltfläche. Sie können diese Schaltfläche auch nur für den mobilen Bildschirm etwas kleiner machen . Sie können den Schaltflächenstil nicht nur für den mobilen Bildschirm ändern . Wenn Sie den Wert zu klein ändern, die gleiche Tastengröße auch auf den anderen Geräten aus. Lass es uns einfach so lassen wie es ist. Und ich denke, wir sind dem responsiven Modus der Website so gut wie fertig. 10. Erstelle einen benutzerdefinierten Header/die Navigationsleiste: Lassen Sie uns sehen, wie wir mit dem Element oder Plug-In unsere eigene benutzerdefinierte Navigationsleiste erstellen können unsere eigene benutzerdefinierte Navigationsleiste . Genau hier können Sie sehen, dass wir eine Liste aller Seiten haben , die wir haben. Das Element oder die 58-Seite ist die Titelseite unserer Website. Das heißt, wenn wir URL, Local Host for Press, eingeben Local Host for Press, wird diese Seite geöffnet. Was ich gerne tun würde, ist, dass wir hier einfach das Zuhause wechseln können . Wir können dem so etwas wie Blog geben, den, den wir als unser Element haben, oder 58. Wir können das in ein ändern. Lassen Sie mich das schnell bearbeiten und wir können das auf Home ändern. In Ordnung, lassen Sie uns das auch auf Home ändern. Das ist der URL-Slug und das ist der Titel deiner Webseite. Lass uns aktualisieren. Gehen wir zurück zu unserer Speisekarte. Genau hier im Bereich Erscheinungsbild findest du Menüs in den Seitenmenüs. Zuerst möchten wir natürlich die Startseite, dann die Über uns und dann die Blockseite und die Kontaktseite anzeigen dann die Über uns und dann die Blockseite . In Ordnung, jetzt speichern wir das Menü. Zuallererst speichern wir das Menü. Dieses Menü dient nur der Anordnung aller Perioden , die wir auf unserer Website haben. Genau wie wir den Block Theme Customizer verwendet haben , um unsere Kopfzeile und Navigationsleiste anzupassen , um die Hintergrundfarbe zu ändern und unser Logo, die Schaltflächen, auszurichten Und wir haben viele verschiedene Dinge gesehen. Ähnliches kann mit dem Element- oder Pro-Plug-In direkt hier auf den Seiten gemacht werden. Ich füge noch ein paar Seiten hinzu und wir geben das als Blocktitel. Geben wir dem so etwas wie Block Nummer zwei. Ordnung. Zuallererst, das ist eigentlich keine Seite. Vielmehr sollte es ein Beitrag sein. Lass uns das als Beitrag geben und wir werden einen weiteren Beitrag hinzufügen. Oder besser gesagt, was wir schon haben. Zwei Beiträge, Hello World und Blog eins. Lass uns den Titel bearbeiten. Okay, wir können das so etwas wie Blog zwei bearbeiten. In Ordnung, ich werde das aktualisieren. Wir kehren hier zu unserem Dashboard zurück. Sie können sehen, dass wir Block zwei haben. Okay. Wir können auch die Uralschnecke ändern. Lass uns das auf Blog zwei ändern. Gut, lass uns das aktualisieren. Was werden wir tun? Lass mich das einfach schnell bearbeiten. Okay, das sieht gut aus. Lass uns sogar in der Uralschnecke aktualisieren. Ich behalte das einfach als Blog-Beitrag. Ordnung, lassen Sie uns jetzt aktualisieren, was ich tun werde. Ich gehe einfach zurück zu meinen Menüs, Erscheinungsbildmenüs, genau hier im Bereich Alle anzeigen. Ich könnte auch Innenseiten posten. Du wirst den Blogbeitrag nicht finden, du musst zum Post-Bereich gehen. Hier findest du Block 1.2 Lass uns sie hinzufügen und sie zu einem Teil deines Blogs machen. Wir können ein Drop-down-Menü haben. Immer wenn sich jemand im Block bewegt, findet er Block eins und Block zwei Ordnung, speichern wir das Menü. Was werden wir tun? Wir werden zu unserer Adresswebsite zurückkehren , um zu sehen, ob die Änderungen sichtbar sind oder nicht. Hier kannst du sehen, dass wir Blog eins haben, Block zwei. Aber wir möchten diesen Header mit Elementor anpassen diesen Header mit Elementor Wir gehen zurück, wir gehen zur Vorlage, oder? In Vorlagen findest du Save Templates, Theme Builder und viele andere Dinge. Lass uns auf Theme Builder klicken. Genau hier im Theme Builder findest du eine Option, um deinen Header zu bearbeiten. Lass uns auf Edd klicken. Sobald Sie zuerst darauf klicken, werden Sie aufgefordert, zwischen verschiedenen vorgefertigten Vorlagen zu wählen , die von Limit oder Plugin erstellt wurden. Aber wir würden es gerne von Grund auf neu erstellen. Lassen Sie uns das hier einfach durchstreichen, Sie werden einen leeren Bereich finden, den Sie umgehen können. Fügen wir hier eine Flexbox mit zwei Spalten hinzu. Wir werden einen Container und den anderen Container haben. Jetzt fügen wir hier ein Logo hinzu. Wenn Sie auf Element hinzufügen klicken, werden Sie einige Elemente finden, die Teil Ihrer Kopfzeile sind. Es wird empfohlen, diese als Element oder Header zu verwenden . Hier haben Sie das Logo der Website, den Seitentitel, Seitentitel, das Pressemenü, das Suchformular und die Seitenübersicht. Lassen Sie uns zunächst unser Seitenlogo verwenden . Wie Sie sehen können, ist das Site-Logo jetzt genau hier sichtbar. Da die Hintergrundfarbe jedoch nicht dunkel ist, ist der Text für das Logo nicht sichtbar. Wir klicken einfach auf unseren Container, die gesamte Flexbox. Wir gehen zur Registerkarte Stil. Wir ändern die Hintergrundfarbe auf Schwarz. Lass uns einfach die Farbe auf Schwarz ändern. Sobald wir das gemacht haben, werden Sie feststellen, dass unser Bild viel zu groß erscheint. Wir klicken einfach auf dieses Bild. Wir gehen zu Style. Und wir werden die Breite ändern. Aber lassen Sie mich das einfach bei 40% belassen und wir richten es links aus. Ordnung, jetzt fügen wir in diesem Container auch ein Navigationsmenü hinzu. Lass uns unser Tress-Menü hinzufügen , wenn ich nach einem Menü suche. Lassen Sie mich das zunächst erklären. Drücken Sie Menü. Wir haben Menu Anchor und all diese verschiedenen Dinge. Aber vielleicht sehen wir auch so etwas wie, lassen Sie uns einfach das Pressmenü verwenden. Ich werde es direkt in diesen Behälter legen. Ordnung, standardmäßig wurde die Richtung des Containers auf vertikal eingestellt. Lassen Sie uns das auf horizontal ändern. So sieht es aus, aber das ist nicht genau das, was wir wollen. Sie können sehen, dass diese Elemente erscheinen. In einem gestapelten Format. Aber wenn wir wollen , dass dieses Logo erscheint und unser Menü in der Reihe erscheint, was sollten wir dann in diesem Fall tun? Natürlich sollten sie Teil eines Containers sein. Die Richtung des Containers sollte auf horizontal eingestellt sein. Woran wir arbeiten müssen, ist dieser Teil hier, die Bildauflösung ist auf volle Auflösung eingestellt. Wir können das auf ein anderes ändern oder wir können zum Stil übergehen. Wir können die Breite ändern. Und wir können die Breite dieses Dings ändern. Das Logo der Seite selbst. Das Logo der Seite, das wir hier zuerst haben, lassen Sie mich es einfach auf etwa diesen Teil reduzieren. Ich kann die Breite des anderen Containers , den wir haben, genau hier ändern . Ich kann diese 56% einfach nutzen . Lassen Sie mich das einfach machen, da 57 für den anderen Container gut genug wären . Genau hier haben wir zwei Elemente , aber das Logo der Seite erscheint viel zu klein. Was werden wir in diesem Fall tun? Wir gehen zu Advanced. Wir werden sehen, okay, hier entspricht diese Breite der Größe des Site-Logos. Wir möchten, dass dieser Wert um etwa 22 % angezeigt wird, aber wenn wir das Bild für das Logo der Website in das Innere des Bildes aufnehmen, können wir die Breite auf über 100% erhöhen. Das ist auch in Ordnung. Sobald wir das getan haben, können Sie dieses Zentrum ausrichten. In Ordnung, es funktioniert also nicht. Obwohl ich auf die Mitte geklickt habe, wird es nicht angepasst, weil die Größe des Seitenlogos maximal ist. Es nimmt hier die maximale Breite entsprechend der Breite des Site-Logos ein. In diesem Fall können wir nur zum Stil wechseln Wir können auf den Container klicken und hier können wir das Inhaltscenter und das Einzelpostenzentrum rechtfertigen Genau so werden sie aussehen. Ich hoffe, du verstehst, worum es geht und jetzt verstehst du , wie Flex Box tatsächlich funktioniert. In Ordnung, hier haben wir das Logo der Seite. Hier haben wir unsere Speisekarte und Speisekarte. Sie werden feststellen, dass der Text blau erscheint. Lassen Sie uns dies in Weiß ändern, indem wir zum Stil wechseln. Sie werden normal schweben und aktiv sein. Wir ändern die Farbe für alle drei Bundesstaaten auf Weiß. Okay? Ebenfalls, okay. Standardmäßig hat Hover keinen Status Und selbst wenn es aktiv ist, hat es keinen Status. Also lass es uns einfach so lassen wie es ist. Und was wollen wir in dem anderen Container? Wir wollen das, wann immer der Benutzer. Im Moment erstellen wir diesen Header mit Element oder Page Builder. Korrekt. Und wir versuchen, den Header im Laufe der Zeit responsiv zu gestalten. Fein. Dieser Teil des Containers wird auf Desktop-Bildschirmen angezeigt, während der andere Teil des Containers auf Mobil - und Tablet-Geräten angezeigt wird . Ordnung, konkret würde ich sagen, mobil, weil Sie auf Mobilgeräten ein Hamburger-Symbol sehen werden Und sobald jemand darauf klickt, das Hamburger-Symbol so erweitert, dass das gesamte Menü angezeigt wird erweitert, dass das gesamte Menü angezeigt Gut, wir werden etwas Ähnliches hinzufügen. Lass uns ein Duplikat davon machen. Nachdem Sie erneut ein Duplikat erstellt haben, ziehen Sie es einfach hierher und legen Sie es dort ab. Gut, jetzt haben wir das gemacht, aber ich möchte das Menü gegen Ende platzieren. Das heißt, der Kontakt sollte sich nach rechts bewegen und das Zuhause sollte irgendwo genau hier sein. Wir können einfach hier auf das Tres-Menü klicken. Sie erhalten ein Layout für das Drop-down-Menü. Hier haben Sie ein vertikales, horizontales und Dropdownmenü. Mal sehen, was passiert, wenn wir zunächst Dropdown haben. Selbst im Desktop-Modus siehst du das Hamburgeron, wenn jemand darauf klickt. Du wirst feststellen, dass das eine Dies ist nun standardmäßig unabhängig davon, ob Sie das Drop-down-Menü verwenden oder nicht Wann immer Sie Ihr mobiles Display verwenden, wird Ihnen ein Hamburgeronine angezeigt. Lass uns hierher zurückkehren. Wir verwenden die Horizontale und wir werden diese Ausrichtung nach rechts vornehmen. Richten Sie Ihr gesamtes Tress-Menü nach rechts aus. Fein. Wenn du dich entlang streckst, nimmt das Platz ein, sodass es auch von rechts und links gepolstert ist, aber lassen wir es einfach nach rechts Ordnung. Nun, was genau wir in diesem Container haben wollen. Okay, in diesem Container wollen wir noch ein paar Dinge. Zuallererst können Sie sehen, dass wir einen Seitentitel haben, Sie haben den Seitentitel, Sie haben ein Suchformular, Sie haben eine Sitemap, Sie haben einen Seitentitel und all diese verschiedenen Dinge. Sie können auch verschiedene Teile umgehen, die Sie haben. Dafür können wir in der Box nach dir suchen, du findest eine Liste, du wirst ein Symbol finden. Wir werden die Icon-Dosenliste verwenden. Aber es gibt auch eine Sache, die ich gerne nutzen würde, nämlich das Suchformular. Lassen Sie uns zunächst das Suchformular verwenden. Ich ziehe das einfach hierher und stelle sicher, dass es Teil des Containers ist. Gut, lass uns ein neues Element hinzufügen. Wir können dem so etwas wie eine Icon-Box direkt über der Suche geben . Und ich werde nur schnell den Grund zeigen , warum wir die Icon-Box genau hier verwenden . Sie werden feststellen, dass wir diesen Text montags bis freitags 08:00 bis 18:00 Uhr geöffnet haben. Richtig. Wir können so etwas gebrauchen. Wir können das Symbol löschen. Wir wollen das Symbol nicht, sondern wir möchten den Titel und die Beschreibung verwenden. Wir können Arbeitszeiten sagen oder wir könnten etwas wie Montag eingeben. Bis Freitag, also braten. In Ordnung. Darunter können wir die Uhr bis 18:00 Uhr einhalten. Gut. Sie können genau hier sehen dass wir einen Bindestrich zwischen 08:00 Uhr und 18:00 Uhr hinzufügen können . Hier haben wir den richtigen Abstand. Gehen wir zum Stil und ändern Farbe des Inhaltstextes in Weiß. Die Titelfarbe wurde auf Weiß geändert und muss auch für die Beschreibung verwendet werden. Ordnung, jetzt die Typografie, beide müssen auf Poppins gesetzt werden, weil wir die Konsistenz auf unserer gesamten Webseite beibehalten wollen unserer gesamten Webseite Ordnung, auch dafür möchten wir es als Poppins belassen Lasst uns nach Poppins suchen. Fein. Sowohl für diesen Titel als auch für die Beschreibung wurde Poppins verwendet Versuchen wir, die Schriftgröße auf etwa 25 Pixel zu reduzieren. Ich denke, 25 Pixel würden gut aussehen. Wir könnten es weiter auf etwa 20 Pixel reduzieren. 20 Pixel sehen gut aus. Hier können wir 15 Pixel verwenden. Ich denke, 15 Pixel würden mehr als genug aussehen. In Ordnung, der Abstand. Sie können auch mit dem Buchstabenabstand, dem Wortabstand und der Zeilenhöhe herumspielen , aber ich werde es nicht tun. Hier haben wir die Box und wir können auch ihre Ausrichtung ändern. Wir können diese Linie auf die rechte Linie ändern, sodass sie erscheint und sich in Richtung der rechten Ecke bewegt, bis zu diesem Drop-down-Menü im Abstand. Anfangs hatte es ungefähr diesen Abstand, aber wir haben ihn auf Null reduziert. In Ordnung, jetzt haben wir diesen Teil erledigt. Was bleibt uns noch übrig? Wir möchten auch ein Symbol hinzufügen. Wir werden ein Symbol hinzufügen. In der Element - oder kostenlosen Version gibt es ein Element , das als Symbol bezeichnet wird. Jetzt kann dieses Symbol verwendet werden, um die Site Knife Bar zu nutzen, auf die wir später noch eingehen werden. Wenn wir auf das Kebab-Symbol klicken, versuche ich , das Kebab-Symbol oder das Drei-Punkte-Symbol zu importieren Kebab-Symbol oder das Drei-Punkte-Symbol Meist finden Sie ein, Sie finden interne Anwendungen, in denen Sie die drei Punkte im vertikalen Format haben , das als Menü bezeichnet wird Es wird auch Kebab oder Ellipsen genannt Lassen Sie uns nach dem Ellipsensymbol suchen. Hier haben Sie die vertikale und die horizontale Version. Ich werde einfach die horizontale verwenden. Und ich kann die Farbe dieser Primärfarbe ändern , sie muss weiß sein. Ich kann die Größe ändern. Außerdem denke ich, dass etwa 30 Pixel mehr als genug aussehen würden. Ordnung, wenn Sie vertikale Ellipsen verwendet haben, können Sie sogar die Drehung herumspielen als horizontal festlegen, indem Sie einfach den Drehungsgrad auf 180 ändern und er wird korrekt auf oder vielleicht 90 Ich denke, wenn es vertikal ist, ändert man es auf 90, also wird es horizontal In Ordnung, hier hast du all diese verschiedenen Dinge. Lasst uns das auch darauf ausrichten, oder? Wir wollen, dass alle drei Elemente übereinstimmen. Was ich mit „in Reihe“ meine, bedeutet im Grunde, dass all diese Inhalte, wann immer wir zwischen verschiedenen Geräten wechseln, in einer einzigen Zeile erscheinen sollten. In Ordnung, was werden wir tun? Wir gehen gleich hier zu Advanced. Im Modus „Fortgeschritten“ werden Sie feststellen, dass die Position absolut fest ist. Darauf werden wir nicht eingehen, sondern auf die Breite. Wir werden dies für dieses Element in der Zeile automatisch einstellen. Wir werden diese erweiterte Breite in der Zeilenautomatik für das letzte Element angeben, außerdem gehen wir zu Breite und in Zeilenautomatik. Jetzt, wo wir diesen ganzen Teil erledigt haben, die eine Sache, die meiner Meinung nach geändert werden muss ist die eine Sache, die meiner Meinung nach geändert werden muss, dieses Menü. Und dieses Menü hier, wir haben den Schriftstil als Standard. Lassen Sie uns das so ändern, dass Pop-Ins auftauchen, die bei uns auftauchen. Okay, wir können auch die Größe ändern. Wenn ich die Größe auf ändere, lass mich sie einfach auf 15 Pixel reduzieren, würde das gut aussehen. Lassen Sie uns das bei 15 Pixeln belassen. Ich kann das sogar fett machen. Fett funktioniert nicht. Mal sehen, wie es wie ein Medium aussieht. Medium sieht gut aus. Poppins 15 Pixel und mittlere Stärke werden wir hier anwenden. Stattdessen kann ich einfach kopieren Ich kann das Styling hier einfügen. Was ich ändern muss, ist, dass ich eine Zeile schreiben muss. So, indem ich einfach dorthin gehe, kann ich eine Zeile schreiben. Jetzt habe ich alle Schriftarten hier in meiner Kopfzeile oder Navigationsleiste als Poppins, mit derselben Schriftgröße und derselben Schriftstärke. In Ordnung. Nun kommt eine Sache in die Suchleiste, ich kann, wir haben schon früher besprochen, dass die Suche wirklich benutzt wird , um zwischen verschiedenen Produkten, verschiedenen Blöcken, Beiträgen, all den Dingen, die Sie haben, zu suchen . Wenn wir jetzt auf die Suchleiste, das Suchformular, klicken, werden Sie verschiedene Skins finden, die Sie haben. Dies ist das klassische Format , bei dem es eine Suchleiste gibt und außerhalb der Suchleiste die separate Schaltfläche für Ihr Suchsymbol vorhanden ist außerhalb der Suchleiste die . Wenn Sie dies auf ein Minimum beschränken, befindet sich das Suchsymbol in Ihrer Suchleiste. In Ordnung, wenn Sie den Vollbildmodus beibehalten, können Sie nur das Suchsymbol sehen. Und sobald jemand auf das Suchsymbol klickt, der gesamte Bildschirm wird der gesamte Bildschirm für die Suche übernommen. Verschiedene Blöcke, Beiträge, verschiedene Dienste und verschiedene Produkte, die Sie auf Ihrer Website verkaufen. Gut, du hast also verschiedene Dinge. Sie können mit der Ausrichtung herumspielen, Sie können die Größe Ihres Symbols ändern. Lassen Sie mich das vorerst schließen. Hier siehst du die Umschalttaste. Wenn ich mit der Größe spiele, wirst du sehen, dass sich die Größe des Symbols ändert Ich kann daraus etwas machen. Wie groß ist das? Die Größe von ist auf etwa 30 Pixel eingestellt, sodass wir etwas Ähnliches tun können. 30, 30 sieht viel zu klein aus. Machen wir es einfach stärker. Ordnung, richten wir das nach rechts aus und ändern hier die Farbe auf Weiß. Sie finden auch Eingaben und andere Eingaben zum Umschalten wenn du die Eingabe umgehst, Was passiert, wenn du die Eingabe umgehst, wenn du auf die Schaltfläche klickst Das ist der Teil, wenn Sie die Farbe ändern, sagen wir vielleicht einfach Rot. Sie können sehen, wie sich die Hintergrundfarbe im Vollbildmodus ändert. Im Moment möchten wir dies als Standard beibehalten. Wir können die Typografie auf Poppins umstellen, um die Konsistenz auf unserer gesamten Website aufrechtzuerhalten Wir können die Textfarbe ändern, wenn Sie möchten. Was passiert, wenn Sie die Textfarbe ändern? Sie können den Suchtext sehen , der hier geschrieben ist. Es ändert sich. Sie können hier sogar die Rahmenfarbe ändern. Wenn ich die Rahmenfarbe ändere, werden Sie feststellen, dass sich der Teiler hier problemlos ändert Wir möchten die Farbe des Symbols ändern. Lass uns das einfach durchstreichen. Anstatt dieses Grau zu verwenden, belassen wir die Farbe der Umschalttaste auf Weiß Wir können das auf Weiß ändern. Alles klar. Wir können dem sogar eine Grenze hinzufügen. Wir können hinzufügen. In Ordnung, geben wir dem hier etwas. Was ich eigentlich versucht habe, die Größe zu erklären, die du hier sehen kannst. Diese Größe scheint die gesamte Größe Ihres Suchformulars zu sein. Wenn Sie insbesondere nur die Größe Ihres Umschalters umgehen möchten , können Sie dies tun, indem Sie zum Stil wechseln, zum Umschalter wechseln und dann das Symbol ändern Okay, die Größe hier, du kannst damit herumspielen Okay, ich kann es einfach auf etwa 50 Pixel machen. Ich kann zunächst die Rahmenbreite hinzufügen. Immer wenn Sie mit dem Schieberegler für die Rahmenbreite herumspielen, werden Sie feststellen, dass die Umgebung Ihres Symbols das Format eines Felds hat. Sie können dies in den Randradius ändern , sodass es kreisförmig angezeigt wird. Lassen Sie uns die Rahmenbreite einfach bei einer Zwei belassen. Ich denke, zwei würden mit einem Grenzradius gut aussehen Sobald Sie 24 überschreiten, erscheint er kreisförmig. Obwohl du 83605000 gehst, macht das keinen Unterschied. Wir können es einfach bei 35 belassen nur um sicherzugehen, dass wir einen runden Kreis haben Und wir werden das Größensymbol herunterklappen. Sehen Sie, was genau hier passiert. Wenn ich die Größe ändere, den Randradius selbst, den Rand, der den Rand umgibt, wird er nicht wirklich komprimiert. Das liegt daran, dass der Inhalt selbst eine Größe von 45 hat. Wenn ich es auf etwa 35 reduziere, was wir für dieses Auslassungszeichen getan haben, können wir auch mit dem Stil herumspielen, Icon-Größe wird auf etwa 50 erhöht Das sieht ziemlich gut aus. Gut, wir haben jetzt all diese Dinge, nur um sicherzugehen, dass alle drei Dinge , die wir hier haben , in einem Container erscheinen. Lassen Sie uns auch einen weiteren Container hinzufügen. Innerhalb des äußeren Containers werde ich einen Container hinzufügen , den wir hier haben. Platzieren wir ihn. Und ich werde versuchen, alle Gegenstände in diesen Behälter zu legen , okay. In diesem Container haben wir zwei Elemente. Lassen Sie uns auch das dritte Element nennen. Gut, wir gehen zum Container, wir ändern die Richtung auf horizontal. Hier werden Sie feststellen, dass alle drei in einer einzigen Zeile erscheinen. Es ist ein Inline-Format, aber wir möchten, dass alle drei Elemente am Ende erscheinen. Wir können den Inhalt begründen. Sie können einen Raum zwischen dem Raum um uns herum und dem Raum sogar finden. Wir ändern das einfach, um es zu beenden. Wir können die Artikel hier aufeinander abstimmen. Sie werden feststellen, dass dieses Symbol oben angezeigt wird. Es ist auch oben, aber da es einen Titel und eine Beschreibung hat, nimmt es die gesamte Höhe Ihres Containers ein. Wir können die Ausrichtung einfach auf die Mitte ändern die Ausrichtung einfach auf die , sodass es so aussieht. Oder Sie können dies sogar so ändern , dass es am untersten Teil erscheint Aber lassen Sie uns das einfach als Mittelpunkt behalten . Und das würde meiner Meinung nach gut aussehen. Fein. So haben Sie verschiedene Dinge umgangen, aber es gibt noch ein paar Dinge zu tun. Zuallererst wird dieses Menü, das wir hier haben, zu Erweitert wechseln. Wir wählen Reaktionsfähigkeit. Wir werden das auf dem Handy verstecken. Mal sehen, wie es auf Tablet und Desktop aussieht. So sieht es auf dem Desktop aus. Insbesondere aus diesem Grund möchten wir es auf dem Desktop und auf dem Handy verstecken. Gehen wir zu Responsive über. Wir werden das im Tablet- und Desktop-Modus ausblenden, gut, aber es sollte auf dem Handy sichtbar sein. In Ordnung, gehen wir zur mobilen Ansicht. Und hier wirst du das nicht finden. Das ist zwar sichtbar, weil wir der Administrator sind, wir sind gerade dabei, unsere Website so zu gestalten , dass wir alle Elemente sehen können. Aber wenn wir tatsächlich eine Vorschau anzeigen, würden Sie dieses spezielle Element, das Hamburger-Symbol, nicht finden spezielle Element, das Hamburger-Symbol, Du wirst nur dieses finden. Sobald Sie darauf klicken, finden Sie diese Art von Drop-down-Option und all diese Dinge werden angezeigt Drop-down-Menü für Mobilgeräte ist ein Klick hier Mobilgeräte ist ein Klick Sie können den Mauszeiger nicht bewegen, da Sie ein Touchscreen-Gerät verwenden Sie können nicht über die Elemente schweben. Sie müssen darauf klicken, damit ein Drop-down-Menü angezeigt wird. Gut. Lass es uns durchstreichen. Sie können das Hamburger-Symbol auch ändern , indem Sie hier einfach zum Stil gehen Dort finden Sie eine Umschalttaste, mit der Sie die Farbe dieser beiden weißen Feine so ändern können , dass sie sichtbar ist Sie können hier sogar die Position ändern. Sie können es sogar richtig ausrichten, indem Sie einfach gehen. Die Ausrichtung ist auf „Fine“ eingestellt. Darüber müssen wir uns keine Sorgen machen. Aber für diesen Teil , in dem wir das speziell für unser Mobilgerät haben , können wir zum Layout gehen. Wir können zum Stil gehen. Hier finden wir die Breite des Bildes. Sie können sogar die Breite Ihrer Iconbox und Ihres Site-Logos ändern . Das Element wird als Site-Logo bezeichnet. Das kannst du tun. Du kannst sogar die maximale Breite für all diese Dinge ändern , aber wir lassen es einfach so, wie es ist. Sehen Sie, wie es auf dem Tablet aussieht und wie es auf dem Desktop aussieht. Auf dem Desktop sieht es wirklich gut aus. Ich hoffe, euch hat dieser Vortrag gefallen. Sobald Sie den Header veröffentlicht haben, werden Sie aufgefordert, eine Bedingung für diesen Header hinzuzufügen. Das heißt, ob Sie die Stileinstellungen für Ihr Header-Menü auf Ihre gesamte Website oder auf bestimmte Seiten anwenden Ihr Header-Menü auf Ihre gesamte möchten. Lassen Sie uns das einfach als gesamte Website beibehalten und wir speichern alles. Ordnung, ich glaube , das war alles von meiner Seite für diesen Vortrag. 11. Erstelle eine benutzerdefinierte Fußzeile und 404-Fehlerseite: Okay, jetzt, da Sie gesehen und verstanden haben wie man die Kopfzeile mit Element oder Pro erstellt, wollen wir uns auch ansehen, wie wir das Plug-In verwenden können , um unsere Fußzeile und die 44-Fehlerseite zu erstellen Wir kehren im Tres-Dashboard zu unseren Templates Theme Builder zurück und erhalten eine Option zur Auswahl der Fußzeile Nun kann sich der Hintergrund dieses Elements oder des Elements von weiß zu schwarz ändern, kann sich der Hintergrund dieses Elements oder des Elements von weiß zu schwarz ändern je nachdem, wann Sie ihn entsprechend verwenden, er wird in den dunklen Modus oder in den hellen Modus geändert Im Moment haben wir noch keine Fußzeile erstellt, daher wird uns eine Planke angezeigt, aber oben rechts findest du die Schaltfläche „Neuen hinzufügen Wir können einfach dort drüben klicken und es werden uns verschiedene Vorlagen angezeigt, die wir haben Jetzt können wir es von Grund auf neu erstellen, egal, aber ich denke, es würde uns viel Zeit kosten, es von Grund auf neu zu erstellen. Sie haben bereits gesehen, wie man einen Header von Grund auf neu erstellt. So ziemlich die gleichen Dinge gelten auch für die Fußzeile. Bringen wir einfach diese Vorlage für die Fußzeile mit. Ich werde Ihnen nur zeigen, dass die Dinge ziemlich gleich sind, kein Unterschied als solcher, Sie können sogar die Elemente ändern. Sie haben andere Elemente, die Sie hinzufügen können Genau hier hast du einige Profi-Elemente, deren Hinzufügen in der Kopf - und Fußzeile keinen Sinn macht , wie dein Look-Grid, Loop, Carousol, was auch immer auf der Seite und im Layoutteil ist , nur dass es Sinn macht, genau hier in der Fußzeile oder sogar im Header hinzugefügt zu werden genau hier in der Fußzeile oder sogar im Oder sagen wir vielleicht einfach einfach einfach, was das angeht. Wenn Sie Google Maps in der Fußzeile hinzufügen möchten , ist das eine gute Vorgehensweise Ich würde das immer empfehlen, wenn Sie versuchen, lokale Kunden und lokale Kunden anzulocken und Ihre Büroräume oder Ihre Geschäftsräume präsentieren möchten Ihre Büroräume oder Ihre Geschäftsräume Sie können den Standort einfach mithilfe dieses Google Maps-Elements in Ihrer Fußzeile auflisten den Standort mithilfe dieses Google Maps-Elements in Ihrer Fußzeile Das wäre ein großartiges, gutes Beispiel, das man zeigen könnte. Sie können den Hintergrund, das Styling-Layout, den Container und den erweiterten Bereich erneut ändern . All diese Dinge sind ziemlich gleich, was wir bereits in der vorherigen Vorlesung gesehen haben. Ich hoffe, Sie verstehen, worauf es bei der Verwendung der Fußzeile ankommt. Sie können hier sogar die sozialen Symbole ändern. Sie können verschiedene Symbole und verschiedene soziale Links hinzufügen. Im Moment gibt es uns an welcher Taste Sie das Symbol ändern können. Sagen wir einfach, von welcher Presse zu vielleicht sagen wir Instagram. Du kannst es einfach auf Instagram ändern. Sie können das Symbol einfügen, den Link oder die URL Ihrer Instagram-Profilseite einfügen URL Ihrer Instagram-Profilseite und auch deren Breite anpassen. Der Abstand zwischen Facebook und Twitter ist darauf zurückzuführen, dass sich hier ein undefiniertes soziales Symbol Sie können es einfach entfernen und Sie werden feststellen, dass der Abstand zwischen all diesen Symbolen gleichmäßig verteilt Wenn Sie mehr Abstand zwischen ihnen hinzufügen möchten, können Sie einfach zum Abschnitt „Styling“ gehen. Sie können weitere hinzufügen. Sie können einen Lückenrand und all die verschiedenen verfügbaren Funktionen hinzufügen und all die verschiedenen . In Ordnung, ich hoffe, du verstehst, worum es geht. Ich werde es erst einmal veröffentlichen. Ich füge unter der Bedingung hinzu , dass diese Art von Fußzeile auf die gesamte Website angewendet wird Einfach speichern und schließen. Schauen wir uns jetzt noch einmal die 44-Fehlerseite an, wir gehen zum Theme Builder. Das war eine schnelle Abkürzung , um wieder zum Theme Builder zurückzukehren. Anstatt zum Dashboard zu gehen, drücken wir auf das Dashboard. Was bedeutet 44 Fehlerseite? Also, wann immer jemand da ist, sagen wir einfach, Sie haben den Aufbau Ihrer gesamten Website auf Ihrem lokalen Hostsystem abgeschlossen Ihrer gesamten Website auf Ihrem lokalen Hostsystem und möchten nun Ihre Website von Ihrem System auf einen Hosting-Dienst übertragen, richtig? Im Grunde versuchen Sie also, Ihre Website öffentlich im Internet zugänglich zu machen , also immer dann, wenn jemand Ihre Doing-URL gefolgt von einem Schrägstrich und dann die Seite Wenn nun jemand einen Tippfehler in der URL macht, was dann passieren soll, wo der Nutzer weitergeleitet werden soll, wird das zulassen, oder werden Sie Ihrem Nutzer die Erfahrung geben, dass nur ein einfacher Chrome-Fehler vier oder vier angezeigt wird, dass die Seite, so etwas in der Art Ihrem Nutzer die Erfahrung geben, dass nur ein einfacher Chrome-Fehler vier oder vier angezeigt wird, dass die Seite, , nicht gefunden wurde Es wird keine gute Erfahrung sein, oder? Es ist besser, einfach eine benutzerdefinierte Seite zu erstellen, die zeigt , dass der Benutzer bei Ihrem Fehler einen Tippfehler hatte Oder stellen Sie einfach sicher, dass Sie auf die richtige URL klicken und sie reagiert auf die Seite, auf die Sie gehen möchten Wir können einfach zur Schaltfläche „Neu hinzufügen“ gehen. Vielleicht ist es nicht immer nur ein Tippfehler, es geht auch manchmal um die kaputten Links Nehmen wir einfach an, Sie haben vor einem Monat eine Website aktualisiert und es gibt eine Seite, sagen wir, eine Blockseite Sie haben die URL für die Blockseite geändert. Sie als Administrator haben die URL des Blogs geändert und Ihre Startseite hatte einige Schaltflächen, die auf die dieser Blockseite mit der vorherigen URL reagierten , die Sie hatten und die einen defekten Link auf Ihrer Website erstellt In diesem Szenario können sich 44 Fehlerseiten als nützlich erweisen. Und auch in Bezug auf SEO unterstützen und empfehlen Google, Bing und andere Suchmaschinen Website-Besitzern, die 44 Fehlerseiten zu verwenden, um Ihren Nutzern ein authentisches Erlebnis zu bieten. Sie können einige vorgefertigte Vorlagen verwenden. Sie können sogar Änderungen daran vornehmen. Oder wir haben hier eine Vorlage. Ich kann einfach diese einfügen. Schau es dir sogar an. Ich kann einfach auf das Plussymbol mit der Vergrößerung klicken. Nur um einen Überblick darüber zu bekommen, wie diese Seite mit 44 Fehlern aussehen würde, kann ich einfach auf das Ordnersymbol klicken Ich kann dieses eine Insert verwenden. Mal sehen, wie es aussieht. Genau so möchten wir, dass unsere Benutzer es zeigen. 44, die Seite, die wir suchen, existiert nicht. Und zurück zur Startseite, genau hier, Sie möchten sie wieder mit Ihrer Website verlinken. Sie können also einfach Ihre Homepage verwenden. Also kann ich einfach die Homepage nutzen. Wenn also jemand auf diese Schaltfläche klickt, wird er auf Ihre Startseite weitergeleitet. Gut, im Hintergrund kannst du ein Bild hinzufügen. Sie können vielleicht sogar einige Animationen hinzufügen, die später in diesem Kurs behandelt werden, oder? Animationen und die Hintergrundfarbe können also den Schriftstil ändern, und Sie wissen, dass die Farbe der Schriftarten möglicherweise den Rand der Schaltflächen verändert. All diese Dinge hängen von Ihrem Design und der Konsistenz des Themas ab , dem Sie folgen. Es liegt also an Ihnen, was Sie tun können. Ich zeige Ihnen nur all die Funktionen , die der Element- oder Theme-Builder bietet. Ich hoffe, du verstehst, worum es geht. In der nächsten Vorlesung werden wir sehen, wie wir die Preloader in Elementor nutzen können 12. Preloader und Seitenübergänge - Endlich Animationen!: Mal sehen, wie wir Seitenlader und Übergänge nutzen können Seitenlader und Übergänge Genau hier in Element oder Pro findest du eine Funktion Zuallererst müssen wir zum Dashboard gehen. Sobald Sie direkt im Element oder in den Einstellungen zum Presse-Dashboard gehen , müssen Sie zur Registerkarte mit den Funktionen und nach unten zu dem Teil scrollen, dem Sie etwas finden würden, das als Warten Sie eine Sekunde. Wo ist es? Es war genau hier. Seitenübergänge genau hier. Standardmäßig wäre es auf aktiv gesetzt , aber aus irgendeinem Grund können Sie, wenn Sie diesen grünen Punkt hier nicht sehen können, einfach auf Aktiv klicken und nach unten scrollen und die Änderungen speichern. Im Wesentlichen können Sie damit wenn Sie von einer Seite zur anderen wechseln, ein Ladebildschirm auf Ihrem Bildschirm angezeigt wird. Das passiert, weil Sie Seitenlader und Übergänge verwenden , bei denen es sich um Funktionen von Elementor Pro handelt Lassen Sie uns versuchen, unsere Website mit Element zu bearbeiten. Oder hier können wir dieses Symbol sehen, oder? Dies wird als Seiteneinstellungen bezeichnet. Wir können hier klicken. Sobald Sie nach unten scrollen, finden Sie eine Option namens Als Seitenübergänge. Lass uns darauf klicken. Und hier würden Sie verschiedene Optionen finden. Hier können Sie den klassischen Hintergrund oder den Hintergrund mit Farbverlauf für das Laden Ihrer Seite auswählen . Immer wenn Sie auf eine andere Seite klicken, wird eine Hintergrundüberlagerung , und es kann sich um eine klassische oder eine mit Farbverlauf handeln. Geben wir ihr einen Farbverlauf, wir verwenden weiße Farbe und die andere grüne Farbe, wir verwenden die grüne Farbe die wir hier haben Wir können diesen Farbsampler verwenden. Sie können sehen, dass die Pipette einfach hochkommt und die Pipette dort platziert werden könnte , wo wir den Farbcode abrufen möchten Gut, manchmal funktioniert es vielleicht nicht, aber manchmal schon. Hier können Sie sehen, wie diese grüne Farbe auftaucht. In Ordnung, das ist die zweite Farbe. Die Farbe für die erste Farbe, die wir haben, Weiß ist die Position, ist auf Null gesetzt und die zweite auf 200. Jetzt müssen Sie wissen, wie der Verlaufseffekt funktioniert , da wir ihn bereits behandelt haben. Genau hier haben wir verschiedene Blickwinkel. Wir können es auch linear oder radial machen, aber lassen wir es einfach linear. Jetzt haben wir eine Eingangsanimation. Wie wollen wir die Animation anzeigen , ob Sie nun - oder ausgeblendet werden möchten. Einblenden, richtig. Verblassen Sie nach oben. Aber ich denke, das Verblassen würde wirklich gut aussehen. Lassen Sie uns das beim Verblassen belassen. Sie können sogar eine Exit-Animation wählen, wie zum Beispiel „Ausblenden“, wie hier Für die Exit-Animation können wir diese Einstellung einfach auf „Keine“ belassen , da die Animation nicht ewig andauert. Wenn Ihre Seite kaum geladen wird, dauert es etwa ein oder zwei Sekunden. Es gibt eine gewisse Animationsdauer. Du kannst das so kurz halten wie, okay, lass uns das einfach so halten. 1.500 oder 15 50. Jetzt ist dieser Wert in Millisekunden angegeben, nicht in Sekunden. Hier hast du das. Sie können eine Vorschau Ihres Tempowechsels anzeigen, indem Sie auf dieses Symbol klicken. Sobald du dir eine Vorschau davon angesehen hast, wirst du sehen , dass die Animation so funktioniert. Sie können es sogar herunterklappen. Mal sehen, wie es funktioniert. Es könnte zu Verzögerungen kommen. Wir können sogar daran arbeiten. Wir können auf Preloader klicken Es gibt viele Arten von Preloadern. Das heißt, unabhängig davon, ob Sie eine Animation in der Mitte zeigen möchten , können Sie sehen, dass sich irgendein Spinner bewegt Lassen Sie mich einfach die Größe des Spinners vergrößern , damit er für Sie sichtbar Alles, was Sie dort sehen können, ist ein Spinner. Sie könnten den Animationstyp so ändern, Kreis so gestrichelt ist, wie bei springenden Punkten Sie könnten dies sogar in Puls ändern, Sie könnten dies sogar in solche Spinner ändern, je nach Ihrem Lassen Sie uns einfach diesen gestrichelten Kreis beibehalten. Ich denke, Kreis würde wirklich gut aussehen. Wir können die Größe auf etwa 150 erhöhen. Ich denke, 150 würden gut aussehen. Lass uns das einfach bei 150 belassen. Ordnung. Sie können auch die Farbe Ihres Spinners ändern, indem Sie zu diesem Teil gehen Sie können die Farbe des Spinners ändern. Okay, aber ich würde es gerne weiß lassen. Sie können eine Verzögerung hinzufügen, wenn Sie möchten, aber es macht keinen Sinn, eine Verzögerung hinzuzufügen. Ehrlich gesagt können Sie sogar die Dauer festlegen, sodass sie nicht ewig dauert. Hier hast du verschiedene Möglichkeiten, zwischen denen du wählen kannst. Preloader, egal ob Sie Animation oder ein Symbol anzeigen möchten Was passiert, wenn ich ein Symbol verwende? Nehmen wir an, ich habe meine eigenen Symbole hochgeladen oder werde meine eigenen Bibliotheken verwenden . Das Symbol muss im SVG-Format sein. Zuallererst könnten Sie sogar die Schrift verwenden. Fantastische Icons. Die sind wirklich toll. Sie können sehen, dass es einen Spinner gibt. Es gibt auch andere Optionen. Was passiert, wenn wir den Spinner wählen , der standardmäßig der ist Fügen wir sie hier ein. Sie können diesem Symbol eine Animation hinzufügen. Wenn Sie auch ein benutzerdefiniertes Symbol haben, können Sie es drehen. Du könntest es sogar springen lassen, du könntest es sogar flashen lassen Es gibt so viele verschiedene Optionen, mit denen Sie herumspielen und sehen können , was für Sie funktioniert Aber im Moment würde ich das einfach als Animation behalten , wenn Sie möchten Sie können sogar ein Bild verwenden. Mal sehen, was passiert, wenn ich dieses Symbol verwende. Okay, ich habe dieses Symbol, ich kann verschiedene Animationen wählen anstatt ein SVG zu verwenden. Wenn Sie nur ein Bild im PNG-, Web- oder JP-Format haben, können Sie es als Preloader verwenden Hier können Sie springen, Sie können genau hier sehen, wie es aussehen kann Hier können Sie Ihr Site-Logo oder das Site-Icon platzieren , das Sie verwendet haben Lass uns das einfach so belassen wie nichts. In Ordnung, speichern wir die Änderungen. Ich werde dieses Bild nicht verwenden, sondern die Animation verwenden , die wir hier haben. Spar dir das, wir gehen zurück. Mal sehen, ob wir eine Vorschau der Änderungen anzeigen können. Wie Sie gesehen haben, als die Website den Preloader geladen hat und der Übergang auch grün angezeigt wurde , war ein Seitenübergang ein Effekt aber die Animation war vorgeladen Ich hoffe, Sie haben diese beiden Konzepte verstanden und verstanden, wo Sie der Meinung waren, dass diese beiden Optionen nur für den Element- oder Pro-Login verfügbar sind nur für den Element- oder Pro-Login verfügbar Das wird für die kostenlose Version nicht verfügbar sein. 13. Mega-Menü - Es ist anders!: Die nächste Funktion, die ich mit Ihnen allen besprechen werde , ist der Mega Menu Builder. Kehren wir zu unserem Vorlagenbereich im Wordpress Dashboard Theme Builder zurück unserem Vorlagenbereich im . Für uns ist es wichtig, einen benutzerdefinierten Header auf unserer Wordpress-Website zu haben . Wir gehen einfach hier rüber, was wir zuvor gebaut haben. Wir werden diesen Teil bearbeiten. Genau hier haben wir das Wordpress-Menü als Element verwendet. Nur um zu demonstrieren, wie der Mega-Menü-Builder funktioniert, müssen wir ihn vorerst entfernen. Ich werde das löschen. Ich werde ein neues Element hinzufügen, das nur als Menü bezeichnet wird. Okay, noch eine Sache. Ich würde das Menü hier nicht sehen. Nur weil wir zu unserem Dashboard zurückkehren müssen. Drücken Sie hier auf Dashboard. Ich muss zurück zu Element oder Einstellungen gehen. In den Einstellungen. Auf der Registerkarte „Funktionen“. Ich scrolle nach unten zu dem Teil, in dem ich das Menü finden kann. Jetzt wird es standardmäßig nicht aktiviert. Wir müssen das aktivieren. Jetzt kehren wir zu unseren Templates Theme Builder zurück. Wir wählen unseren Header aus und passen ihn an. Wenn wir nun die verschiedenen Elemente durchsuchen , die wir haben, die verschiedenen Blöcke, die wir haben, werden wir ein Menü finden, das Sie hier sehen können. Lass uns diesen einfach löschen. Das wurde früher nicht gespeichert, deshalb wurde das Wordpress-Menü genau hier angezeigt. Wir platzieren es einfach in unserem Container neben diesem Logo. Im Moment ist der Text schwarz. Wir müssen die Schriftfarbe auf Weiß und auch die Typografie auf Poppins ändern Weiß und auch die Typografie auf Poppins Poppins werden wir retten. Fein. Zurück zum Inhalt hier. Wir werden eine Homepage haben, die auf unsere Elementor-Seite 25 verlinkt unsere Elementor-Seite 25 Wir werden den nächsten Abschnitt haben , der eine Info-Seite sein wird Es wird natürlich auf die Info-Seite verlinken. Suchen wir nach dem Über uns. Der dritte Artikel, den wir haben, ist die Kontaktseite. Kontaktseite. Lassen Sie uns unsere Kontaktseite hier verlinken. Schließlich werden wir, nur um die Funktionsweise von Mega Menu zu demonstrieren, einen neuen Titel erstellen. Geben wir dem Ganzen einfach so etwas wie ein Team. Ordnung, dann können Sie sehen, dass es hier einen Schalter gibt, auf dem Drop-down-Inhalt steht Wir schalten das um. Sie werden feststellen, dass neben dem Team ein Drop-down-Menü angezeigt wird Eine Sache, die mir hier auffallen kann , ist, dass wir jedes Mal, wenn wir den Cursor über eines der Seitenmenüelemente bewegen, sehen können, dass sich die Textfarbe leicht ändert, wenn wir den Mauszeiger darüber bewegen Wir wollen nicht, dass das passiert, weil dann die Schrift nicht sichtbar wäre Wir gehen zu Ho, wir ändern die Schriftfarbe auf aktiv. Nochmals, wie man die Farbe für das Aktive wieder weiß. Wir setzen das auf Weiß. Für alle drei Staaten haben wir die weiße Farbe in Ordnung. Versuchen wir nun, die Breite so anzupassen , dass alle vier Inhalte im selben Bereich ausgerichtet werden. Okay, was die Typografie selbst angeht, versuchen wir einfach, die Dinge rund um die Schriftgröße zum Laufen zu bringen Ungefähr 14 Pixel helfen uns hier, wir behalten es einfach bei 14 Pixeln wir auf Steam klicken, können Sie feststellen, dass wir ein neues Drop-down-Menü erstellen können. Das ist ein Mega-Menü, oder? Ich kann auf das Plus-Symbol klicken. Kann vier Spalten, vier verschiedene Container hinzufügen. In jedem Container können wir ein Element platzieren, lassen Sie uns einfach ein Element von, sagen wir einfach ein Bild, eine Bildbox einfügen . Ich suche einfach nach einer Bildbox. Ich platziere es gleich hier. Ich werde den Teil mit der Beschreibung entfernen. Das wollen wir nicht. Wir werden nur den Titel und das Bild hier in der Bibliothek verwenden. Ich habe vier Bilder. Sie haben ungefähr die gleiche Größe. Oder was wir auch tun können, ist, anstatt das Bildfeld zu verwenden, weil das E-Mail-Feld Sinn machen würde, wenn wir ein Symbol oder ein Logo einfügen möchten , gefolgt von einem Text, darstellt, warum dieses Symbol auf unserer Webseite vorhanden ist. In unserem Fall hier zeigen wir gerade alle Teammitglieder, die Teil dieses Geschäfts sind, hier drüben an. Einfügen eines Bildelements und eines separaten Titelelements wäre sehr sinnvoll. Ich lösche das vorerst einfach und gehe zum Basisbild. Ich wähle das Bild gleich hier aus. Ich werde auch ein Überschriften-Tag direkt unter diesem Teil einfügen . Alles klar? Ich kann einen Namen geben, so etwas wie, Hi John hier. Ordnung. Prüfungsnote. Das ist so ziemlich alles. So mache ich das. Und ich werde das einfach für vier andere Artikel duplizieren . Ordnung. Vier Container. Und die anderen Container, ich lösche sie einfach, sodass der Abstand so groß ist , dass Sie feststellen können , dass wir ursprünglich vier Container hatten. Wir duplizieren sie und was auch immer die leeren leeren Container da waren, wir haben sie genau hier im Bild gelöscht. Wir werden das Bild schnell ändern. Nochmals, wir müssen das Bild genau hier ändern. Wir ändern das Bild zum Himmel. Ordnung. Wir können den Text auch ändern oder vielleicht. Okay. Ich denke, die Schriftfarbe ist gut genug. Ich denke, Schwarz würde zu einem weißen Hintergrund passen. Aber wenn du den Hintergrund dafür ändern möchtest , kannst du das sogar tun. Dafür muss ich einfach auf den gesamten Container mit klicken. In Ordnung. Ich muss nur auf die Breite des Containers klicken und sicherstellen, dass ich Teil des Teams bin. Wenn ich auf das Team klicke, siehst du, dass dies das Menü ist und ich kann auch die Hintergrundfarbe ändern. Ich hoffe, du verstehst, worum es geht. Ähnliches kann für all die verschiedenen Container getan werden, die wir haben. Sie können sogar die Flexbox-Einstellungen ändern und einige der Dinge hinzufügen, die Sie möchten, egal ob Sie ein Videobild oder eine Ju-Datei einbetten möchten, was auch immer Sie hier einfügen möchten. Ich denke, diese Funktion könnte sich als nützlich erweisen, wenn Sie viele Elemente haben , zu denen Ihre Benutzer navigieren sollen, Sie aber einfach nicht alle in einer einzigen Hauptzeile Ihrer Kopfzeile auflisten können . Wenn Sie die Funktionalität von Mega Menu verwenden, können Sie ein solches Layout verwenden, um das zu erreichen was Sie eigentlich tun wollten. 14. Loop-Grid für Blog-Beiträge und Produkte – Einführung in dynamische Inhalte: Richtig, schauen wir uns eine weitere Funktion , die als Loop Builder bezeichnet wird Wir klicken einfach auf Mit Elementor bearbeiten. Sobald wir hier klicken, findest du verschiedene Teile , mit denen du navigieren kannst Aber um zum Theme Builder zurückzukehren, klicken wir auf den Theme Builder. Hier finden Sie verschiedene Optionen. Lass uns auf Loop Item klicken. Wenn sich nun genau das Loop-Element als nützlich erweist, wir an, Sie erstellen eine E-Commerce-Website oder Sie haben mehrere Blogs, oder Sie haben mehrere Produkte und Dienstleistungen und möchten einige dynamische Inhalte in einem Kartenformat auf der Startseite Ihrer Website anzeigen einige dynamische Inhalte . In diesem Fall könnte sich ein Loop-Element als nützlich erweisen. Hier haben Sie einige vorgefertigte Vorlagen, die Sie verwenden können, aber wir werden sie von Grund auf neu erstellen. Lass uns das einfach schließen. Da es sich um eine Pro-Funktion handelt, benötigen Sie Element oder Pro-Plug-In. In Ordnung, hier haben Sie einen Abschnitt, in dem Sie Ihr Loop-Grid hinzufügen können. Lass uns auf das Plus-Element klicken. Und Sie haben die Möglichkeit, zwischen Flex-Box oder Grid zu wählen. Wählen wir also einfach Flexbox. Wir werden die vertikale Richtung verwenden. Sobald wir auf das Element Hinzufügen klicken, werden Ihnen einige empfohlene Optionen angezeigt: Beitragstitel, Inhalt des Beitrags, Beitragsbild und Beitragsinfo. Lassen Sie mich Ihnen zunächst zeigen, welche anderen Funktionen wir haben und wie viele verschiedene Blogbeiträge wir bisher erstellt haben. Was ich tun werde, ich gehe einfach zurück zur Startseite. Wenn ich auf Blog One klicke, sieht der erste Blog so aus. Sie können sehen, dass wir den Titel haben. Dies ist der Inhalt des Auszugs. In Ordnung, das ist das Bild. Nun, das ist kein vorgestelltes Bild. Das ist nur ein Bild. Hier haben wir die, die Leiche unten. Ich habe diesem Blog ein Tag hinzugefügt. Hier findest du soziale Symbole, die Nutzer teilen und kommentieren können. Du kannst sogar sehen, wie mein zweiter Block aussieht. Hier hast du den Block zum Bildinhalt. Hier hast du wieder einen Hashtag und einen Kommentar hinterlassen von was? Pressekommentator In Ordnung, wir haben also diese beiden Dinge. Gehen wir jetzt zurück zu unserem Lue-Grid. Ich kann einfach mein Feature-Bild zuerst platzieren. Egal, ob du an deiner Produktseite arbeitest oder ob du verschiedene Produkte, die du verkaufst, oder verschiedene Blockposts, die du hast, anzeigen und präsentieren möchtest. Sie müssen einige Karten auf der Startseite haben, zu denen Benutzer navigieren können. Rechts, im ausgewählten Bild wird das Bild angezeigt , das Sie für diesen bestimmten Blockbeitrag festgelegt haben . Ordnung, darunter können wir einen Titel für unseren Blockbeitrag hinzufügen. Das ist wie ein dynamischer Inhalt. Der gesamte Abschnitt, die gesamte Container-Flexbox , die wir bisher erstellt haben, ist dynamisch. Das bedeutet im Grunde, dass das vorgestellte Bild und der Titel automatisch ausgefüllt werden vorgestellte Bild und der Titel automatisch ausgefüllt , je nachdem, wie viele Blöcke, wie viele Produkte und wie viele Seiten Sie haben Und die darin enthaltenen Daten werden automatisch ausgefüllt. Im Moment müssen Sie es nur einmal entwerfen und es wird für mehrere Postblöcke, Beiträge, mehrere Produktseiten usw. repliziert , mehrere Produktseiten usw. Also hier hast du den Blocktitel. Darunter können wir unseren Blog- oder Beitragsauszug hinzufügen. Es bedeutet im Grunde, worum es bei dem Inhalt geht. Dann fügen wir ein weiteres Element hinzu , nämlich den Inhalt des Beitrags. Dadurch wird der gesamte Inhalt angezeigt , den wir nicht möchten. Dann haben wir die Post-Informationen. Scrollen wir einfach nach unten zu dem Teil, in dem wir Informationen platzieren können. Sobald Sie diese Beitragsinformationen verwendet haben, finden Sie verschiedene Optionen, Autor, Datum, Uhrzeit und Kommentare. Jetzt macht Zeit keinen Sinn, wir werden sie einfach entfernen. Wir halten uns einfach auf dem Laufenden, damit es zeigt, dass, okay, dieser Blog aktuell ist, der Inhalt frisch ist und es so viele Kommentare gibt. Im Moment gibt es keine Kommentare. Sie werden also keine Kommentare sehen. Aber du wirst herausfinden, wo genau das veröffentlicht wurde. Und von wem? Im Moment der Benutzername, mit dem ich herumarbeite, admin. Aber du kannst das auf alles ändern, was du hast. Andere Dinge, die wir dafür benötigen , sind eine Schaltfläche. Lassen Sie uns auch eine Schaltfläche hinzufügen. Ich habe einen Button, ich platziere ihn hier. Ich möchte die Beitragsinformationen direkt unter dem Titel platzieren . Hier kannst du sehen, wer das gepostet hat, wann genau es gepostet wurde wann genau es gepostet wurde und wie viele Kommentare zu diesem Blockbeitrag hinterlassen wurden. Gut, wir können den Inhalt zentrieren und zu diesem Teil kommen. Lassen Sie uns zunächst das Bild umgehen. uns das Bild, das wir hier haben, Lassen Sie uns das Bild, das wir hier haben, in der Mitte ausrichten. Sie können das vorgestellte Bild hier sehen. Es ist ein dynamischer Inhalt. Wir gehen zum Stil. Wir ändern die Breite des Bildes auf etwa 50%. Nur 50% der Fläche sollten mit unserem Bild bedeckt sein. Egal welche Breite wir für unseren gesamten Container haben. Das ist wie ein Bildelement. Im Bildelement haben wir das Bild selbst. Richtig? 50% der Bildbreite. Fein. Sobald wir zu dieser Registerkarte für Fortgeschrittene gehen, finden Sie verschiedene Optionen, um das Problem zu umgehen, aber das müssen wir nicht. Hier haben wir den Blocktitel. Hier können Sie das Zentrum ausrichten. Sie können die Typografie auf Poppins ändern. Lassen Sie uns Poppins wählen. Dazu können wir auch die Position zentriert können wir Wir können die Größe und Farbe ändern. Anstatt die Textfarbe auf Blau zu setzen, können wir sie auch auf Schwarz setzen und die Typografie auf Poppins ändern Lass mich das einfach machen. Ich werde Poppins auswählen Ordnung. Nun zu diesem Teil mit Ausnahme, jetzt können Sie sehen, dass der Beitrag mit der Ausnahme für diesen speziellen Block viel zu groß ist. Nun, es ist vielleicht nicht der gleiche Fall für alle anderen Blockposts. Was wir hier für den Auszug tun können , können wir stylen Sie haben verschiedene Möglichkeiten. Versuchen wir zunächst, die Mittellinie zu zentrieren Sie finden im Inhalt. Sobald wir darauf klicken, finden Sie die Option Einstellungen. Sobald Sie auf dieses Tool auf dem Mädchensymbol klicken, können Sie sehen, dass Sie die Länge des Auszugs auswählen Wenn du diesen Wert bei zehn belässt, werden die ersten zehn Wörter nicht angezeigt Sie können es sogar so reduzieren, dass fünf oder fünf nicht die gesamte Information anzeigen würden. Lassen Sie uns das einfach bei 15 belassen. 15 wären gut genug. Wir haben 15 Wörter ausgewählt. Zeigen Sie einfach die ersten 15 Wörter an. In Ordnung, jetzt haben wir den Button. Lassen Sie uns den Knopf mittig anordnen. Wir können den Text auch ändern, Beispiel mehr lesen Ordnung. Lesen Sie mehr. Wir können das schaffen. Wie Sie sehen können, gibt es verschiedene Arten von Schaltflächen. Standardschaltfläche ist grau. Die Infoschaltfläche normalerweise eine blaue Farbe oder eine hellblaue Farbe. Dann haben Sie Erfolg, und das ist grün. Dann gibt es eine Warnung, die gelb und gelb oder orange ist, und Gefahr ist rot. Aber lassen Sie uns einfach die Standardfarbe beibehalten und die Farbe auf etwa Grün ändern , was wir als globale Farbe gespeichert haben. Hier haben Sie die Textfarbe , bei der die Farbe Weiß beibehalten wird. Wir werden die Farbe unseres Button-Hintergrunds ändern. Wir haben das als grün gespeichert. Das verwenden wir gerade. Ja, das ist so ziemlich alles. Sie können sogar die Größe ändern und das verknüpfen Wenn nun jemand auf diese Schaltfläche klickt, möchten wir, dass der Benutzer zu dem jeweiligen Blockpost oder einer bestimmten Produktseite weitergeleitet dem jeweiligen Blockpost oder einer bestimmten Produktseite wenn wir den Link tatsächlich manuell Was passiert dann, wenn wir den Link tatsächlich manuell eingeben Egal, wie viele Blockposts Sie haben, egal wie viele Produkte Sie haben, diese Artikel werden in einem Schmierformat angezeigt. Aber jedes Mal, wenn jemand auf die Schaltfläche klickt, wird er auf denselben Link umgeleitet , weil Sie den Link fest codieren Wir wollen nicht, dass das passiert. Wir wollen, dass der Link auch dynamisch ist. Wir können einfach hier auf dieses Symbol klicken, dem es sich um dynamische Tags handelt. Und Sie können die Post-URL auswählen. Wählen Sie einfach die Post-URL aus. Und wann immer jemand darauf klickt, öffnet sich der Beitrag blockieren. Ordnung, genau hier können wir den gesamten Container auswählen. Wir können dem eine Grenze hinzufügen. Was Sie sehen können, ist der Abstand nicht so groß, was wir tun können. Lassen Sie uns zunächst versuchen, dem Ganzen einen Rahmen hinzuzufügen. Ich gehe einfach zum Layout. Ich werde es mit Stil sehen, tatsächlich werden wir Grenze an Grenze finden, wir würden einen festen finden. Lassen Sie uns die Breite des Randes aus allen Richtungen auf eins belassen. Lassen Sie uns das einfach als eins behalten. Mal sehen, wie es aussehen würde. So sieht es aus. Lassen Sie uns die Farbe dieses Randes auf Grün ändern. Ich gehe, ich ändere die Farbe auf Grün. Ich klicke auf das Globconl Green. So sieht es aus, aber lassen Sie uns auch die Breite von erhöhen, wir wollen, dass der Rand ein bisschen fett ist Wenn Sie auf den Rand klicken, werden es zwei. Mal sehen, zwei funktionieren in unserem Fall hervorragend. Sie können sogar einen Randradius hinzufügen, um die abgerundeten Kanten zu erhalten, aber ich würde es so lassen, wie es ist. Lassen Sie uns den gesamten Abschnitt auswählen. In diesem Abschnitt möchte ich gewissen Abstand zwischen ihnen haben. Gehen wir zu Container Advanced. Hier findest du das Layout. Wir können das ändern, können sogar die Höhe ändern. Lassen Sie uns die Höhe auf etwa 06:55 ändern. Okay, 655 sieht gut aus, aber 655 wäre wirklich groß Lass es uns auf etwa 16:16 reduzieren. Sieht gut aus. Genau hier im Jahr 610 können wir das Inhaltscenter rechtfertigen und das Artikelzentrum ausrichten In Ordnung, wir können eine Lücke zwischen ihnen hinzufügen. Lassen Sie uns eine Lücke zwischen den Elementen auf etwa 30 hinzufügen. So sieht es aus. Ich finde, das sieht ziemlich gut aus. Lass uns das veröffentlichen. Wenn wir zur Startseite zurückkehren, können wir hier zur Startseite zurückkehren. Kann einfach hier auf der Startseite auswählen. Ich kann einfach nach unten zu dem Teil scrollen , wo immer ich dieses spezielle Loop-Grid verwenden möchte , ich kann einfach mein Loop-Grid hier hinzufügen. Ich kann einfach auf die Anzeigenvorlage klicken, ich klicke einfach auf die Anzeigenvorlage. Oder wissen Sie was, ich muss nicht zwischen verschiedenen Vorlagen navigieren, ich muss nur auf Plus Flex Box, Horizontale Richtung klicken . Das heißt, alle Karten in horizontaler Richtung ausrichten. Und lassen Sie uns ein Element hinzufügen , das ein Loop-Grid sein wird. In Ordnung, lassen Sie uns unser Loop-Grid hierher ziehen und dort ablegen. Nun müssen wir diesem Loukrid einen Namen geben, aber wir haben dem Lukrid keinen Namen gegeben Gehen wir zum Theme Builder. Sobald Sie zum Theme Builder gehen, finden Sie hier Loop-Elemente Sie finden Loop-Elemente. Jetzt müssen wir den Namen ändern. Lassen Sie uns das bearbeiten, indem wir auf die Vorschau-Schaltfläche klicken. Sie finden eine Option, um dies zu bearbeiten. Hier kannst du auf die drei Punkte und dann auf Umbenennen klicken. Hier kannst du dem so etwas wie eine Blog-Postkarte geben. Ordnung. Klicken Sie einfach auf Ändern. Sie können sehen, dass der Name des Loop-Elements geändert wurde. Lass uns das schließen. Hier können wir anfangen, die Vorlage für eine Blog-Postkarte abzutippen. Sie werden feststellen, dass unser Loop-Grid so aussieht. Sie können sehen, das ist für Blog eins, das ist für Block zwei. Lassen Sie uns sie veröffentlichen und sehen, wie es aussieht. Ordnung, sobald ich eine Vorschau der Änderungen habe, wollen wir sehen, wie sie aussehen. Wenn ich nach unten scrolle, kannst du einfach darauf klicken. erste Blog wird erscheinen, aber er erscheint nicht auf der nächsten Seite. Es geht um Blog eins. Wenn ich auf diese Schaltfläche klicke, siehst du, dass Block zwei erscheint. Ordnung, ich hoffe, Sie haben verstanden, was die Verwendung von Loop-Grid und Loop-Elementen auf Ihrer Adress-Website angeht 15. Benutzerdefiniertes CSS für zusätzliche Funktionalität - Strikt für Profis!: Leute, ich freue mich sehr auf diesen Vortrag, weil wir ein wirklich cooles Feature in Elementor untersuchen Wie ihr sehen könnt, bin ich auf der Startseite meiner Website. Hier haben wir den Heldenbereich der die benutzerdefinierte CSS-Funktionalität verwendet. Wir werden im Hintergrund unseres Heldenbereichs eine coole Animation hinzufügen , und du wirst feststellen, dass einige der Symbole schweben werden. Kehren wir zu unseren Elementor-Einstellungen zurück. Hier habe ich den Heldenbereich. Jetzt findest du für jeden Abschnitt oder jedes Element, wann immer du darauf klickst, oder jedes Element, wann immer du darauf klickst, eine Registerkarte für Fortgeschrittene. Unter der Registerkarte „Erweitert“ finden Sie nun eine benutzerdefinierte CSS-Option. Hier können Sie Ihren eigenen benutzerdefinierten CSS-Code schreiben. Du kannst sogar mit Hilfe der KI schreiben, welches Element oder welches innerhalb des Elements selbst bereitgestellt wird. Hier kannst du das CSS hinzufügen. Wenn Sie nun meinen Full-Stack-Webentwicklungskurs besucht haben, in dem wir einen speziellen Abschnitt für den gesamten CSS-Teil haben, müssen Sie etwas darüber gelernt haben. Aber obwohl Sie immer noch nichts über CSS wissen, können Sie bei Google nach wenigen Animationen suchen , die in CSS geschrieben sind. Lass uns ein paar Bilder hinzufügen. Ich werde diesem Container ein Bild hinzufügen. Lassen Sie mich das Bild einfach auf diesen Block, das Globussymbol, ändern . In Ordnung, hier habe ich das Globussymbol. Ich gehe zum Stil und ändere die Breite dieses Bildes. Im Moment ist die Größe des Bildes viel zu groß. Ich werde es einfach auf etwa 18 reduzieren. Ja, ich denke, 18 wären gut genug. Jetzt gehen wir wieder zum Abschnitt für Fortgeschrittene. Wir gehen zu dem Teil, in dem wir eine Position haben. Jetzt finden Sie drei Optionen: Standard, Absolut und Fixed. Was bedeutet das jetzt? Standard bedeutet im Grunde, dass das Element überall dort, wo Sie Ihr Element in einem bestimmten Container einer Flexbox oder vielleicht sogar in einem Grid platzieren einem bestimmten Container , in diesem Container selbst bleibt. Egal, wie viel Scrollen Sie oben oder unten ausführen, die Position des Elements würde sich nicht ändern. Aber wenn ich das zu etwas wie einem Absoluten ändere, ich flexibel steuern, wo das Bild im mittleren Bereich platziert werden kann. Das ist es, was ich mit Absolut machen kann. Was ist, wenn ich es repariert habe? Lass mich dir einfach auch zeigen, was passiert , wenn ich so etwas repariert habe. Ich kann dieses Bild einfach als feste Position auswählen. Auf der Registerkarte „Erweitert“ kann ich die Position auswählen, die fixiert werden soll. Und was passiert, wenn ich nach unten scrolle? Sie können sehen, dass das Bild an der festen Position bleibt. Das ist es, was deine feste Position hier eigentlich bedeutet, wir können sie einfach auf die Standardeinstellung zurücksetzen. Ich werde auch ein weiteres Bild hier in diesem Container hinzufügen . Ich wähle das Bild als dieses Symbol aus. Wir gehen zum Stil über und ändern ihn auf etwa 18. Die Breite soll bei etwa 18 liegen. Das wäre gut genug. Wir werden das Absolute ändern, sobald wir es getan haben Ich denke, die Position dieser beiden Elemente ist gut. Jetzt habe ich hier dieses spezielle Element im benutzerdefinierten CSS-Teil. Ich werde diesen Code einfügen. Nur um kurz zu erklären, worum es bei dieser Animation geht, können Sie feststellen, dass wir mithilfe des Keyframes-Tags eine Animation namens Float erstellt haben . Darin haben wir den Wert auf 0% gesetzt . Das bedeutet, dass Sie zu Beginn der Animation auf die Position bei Null Pixeln übersetzen müssen. Wenn der Wert bei 50% liegt, wenn die Animation zur Hälfte abgeschlossen ist, müssen Sie in Bezug auf die Position übersetzen Sie müssen etwas über Übersetzungen und Transformationen in der Mathematik gelernt haben und Transformationen in Das gleiche Konzept wird genau hier in der CSS-Animation angewendet. Im Grunde transformieren Sie also Ihr Bild und verschieben die Position in Bezug auf die X-Achse auf 20 Pixel. In der Hälfte der Animation wird das Bild also in Bezug auf die X-Achse in Richtung 20 Pixel verschoben . Und es bewegt sich auch auf 50 Pixel in Bezug auf die Y-Achse. Und es dreht sich in der Z-Achse. Also hier haben wir die Y-Achse, hier haben wir die X-Achse und es gibt auch eine Z-Achse, die direkt zur Kamera zeigt. Das ist also die Z-Achse. In Ordnung, hier haben wir die Z-Achse. Sie dreht sich auch, und es gibt eine Skalierung, das heißt skalieren, das heißt verkleinern oder vergrößern. Wenn ich 0,7 habe, bedeutet das, die Größe zu reduzieren und sicherzustellen , dass Sie das Bild verkleinern. 2.7 Hier haben wir die Grade, 13 Grad. Wenn die Transformation abgeschlossen ist, übersetzen Sie das Y in, wiederum in Bezug auf die Y-Achse, wieder in die Null-Pixel. In Ordnung, ich hoffe, wir haben es verstanden. Wir wählen die Animation Float aus, die wir genau hier erstellt haben. Wir möchten, dass die gesamte Dauer der Animation etwa 20 Sekunden lang läuft. Hier haben wir verschiedene Bewegungseffekte , die linear oder lockerer sein können. Das bedeutet, dass der Start und das Ende der Animation glatt sein sollten. Wir möchten, dass diese Animation unendlich in einer Schleife läuft. Das ist es, was es im Grunde bedeutet. Lassen Sie uns dieselben Einstellungen, dasselbe benutzerdefinierte CSS auch auf dieses spezielle Element anwenden . Und sobald ich das gespeichert habe, lass mich dir zeigen, wie es aussehen würde. Wir können auf „Änderungen in der Vorschau anzeigen“ klicken Sie werden feststellen, dass diese Animation in unserer Helden-Sektion zu sehen ist. Sieht das nicht so gut aus? Wenn wir sogar nach unten scrollen, können Sie feststellen, dass die Animation im Hintergrund abläuft. Da die Animationsdauer etwa 20 Sekunden beträgt, werden Sie feststellen, dass die Animation sehr flüssig und sehr langsam abläuft. Aber es sieht so cool und so beruhigend aus. Ich hoffe, euch hat dieser Vortrag gefallen. Sie können mit CSS verrückt und ein paar Animationseffekte erzielen Oder fügen Sie vielleicht sogar einige benutzerdefinierte Verlaufsfarben oder ändern Sie die Einstellungen Ihrer vorhandenen Elemente auf Ihrer Website 16. Popup-Formulare zum Sammeln der E-Mail-Adresse von Nutzern - Sehr wichtig!: Ordnung, Leute, lasst uns sehen, wie wir das Popup-Formular mit unserem Elementor-Seitenersteller nutzen können unserem Elementor-Seitenersteller um es in unsere Presse-Website einzubetten Einbetten und Verwenden eines Popup-Formulars ist jetzt sehr hilfreich, wenn Sie E-Mail-Adressen Ihrer Besucher im Austausch für ein Abonnement Ihres kostenlosen Newsletters oder ein Werbegeschenk sammeln Ihrer Besucher im Austausch ein Abonnement Ihres kostenlosen Newsletters oder ein Werbegeschenk Es könnte ein E-Book sein, eine herunterladbare Datei, was auch immer Sie versuchen, sie mit Ihrem Publikum zu teilen Idealerweise möchten Sie dieses Popup-Formular zu Ihrem Blogbeitrag hinzufügen. Aber wenn du hier zum Beitragsbereich gehst, wirst du feststellen, dass wir keine Option zum Bearbeiten mit Elementor Wir müssen einen Plockpost mit unserem Element oder Plugin erstellen unserem Element oder Plugin nur dann kannst du ihn bearbeiten Ordnung, vorerst werde ich das Popup-Formular in unsere Homepage selbst einbetten Aber bevor wir das überhaupt tun, müssen wir hier zu unserem Tress-Dashboard zurückkehren. Sie finden eine Option, um zu den Vorlagen zu gelangen, und unter Vorlagen finden Sie eine Option für Popups. Lass uns dort drüben klicken. Und hier kannst du ein neues Popup hinzufügen. Geben wir hier etwas einen Namen. Sie können zwischen verschiedenen Artikeln wählen , die Sie erstellen möchten. Geben wir ihm so etwas wie einen Newsletter. Ich kann so etwas wie Newsletter sagen und ich kann eine Vorlage erstellen. Jetzt wissen Sie natürlich alle, dass, wenn wir über Vorlagen oder Popups oder irgendetwas, das mit Element oder Theme Builder zu tun hat, sprechen Vorlagen oder Popups oder , es definitiv einige vorgefertigte Vorlagen von Element oder Pro zeigen werden. Du musst dein Konto mit Elementor verbinden , um diese Pro-Vorlagen nutzen zu können Wir werden es von Grund auf neu erstellen. Lass es uns ab jetzt einfach schließen. Die Verwendung einer der Vorlagen ist keine schlechte Praxis. Ich sage nicht, dass wir das nicht tun werden, wir werden das nicht tun, nur weil ich möchte , dass Sie alle alles von Grund auf neu lernen. Hier kann ich einfach auf das Plus-Symbol klicken und das Flexbox-Layout auswählen Jetzt, genau hier im Flexbox-Layout, finden Sie hier verschiedene Layoutoptionen Entweder kann ich diese Optionen wählen wenn ich vier Container habe, oder ich kann sie manuell so hinzufügen, dass sie so gestapelt werden, dass sie in einem Abschnitt mit vier Spalten angezeigt werden Lass uns das benutzen. Da wir ihn haben, werden wir diesen Container vorerst löschen . Was werden wir tun? Wir werden einfach die Breite dieses speziellen Containers so vergrößern , dass er der Größe entspricht. Die Breite passt in diesen Teil. In Ordnung, was werden wir dafür tun? Lass uns einfach den ganzen Teil auswählen . Stellen wir sicher, dass es auf horizontal eingestellt ist, insbesondere bei dieser Flexbox. Wir wollen die Breite auf ungefähr so viel erhöhen, das sind 98%. Wir könnten das sogar 200 machen, das spielt keine Rolle. Aber du kannst sehen, dass sich die Größe von hier aus und dein Verhalten ändert. Wenn wir das um 200% ändern, behalten wir es einfach bei 100%. Ich werde vorerst ein Bild hinzufügen Natürlich möchten wir zeigen, worum es in diesem Newsletter geht Wir können vielleicht das Cover des Newsletters teilen , aber vorerst möchte ich nur ein Bild geben, möchte ich nur ein Bild geben das ich bereits in meiner Mediathek habe. Ich werde dieses Bild auswählen. Nachdem ich das ausgewählt habe, kann ich hier einen Titel hinzufügen. Was genau wollen wir, dass unsere Nutzer Maßnahmen ergreifen und warum sollten sie eigentlich unseren Newsletter abonnieren? Wir können so etwas sagen wie unseren Newsletter abonnieren. Jetzt können Sie dies ersetzen, indem Sie das kostenlose Buch herunterladen oder Zugang zu unserem kostenlosen Webinar oder ähnlichem erhalten direkt hier Zugang zu unserem kostenlosen Webinar oder ähnlichem erhalten. Im nächsten Container kann ich ein Formular hinzufügen. Lass uns nach einem Formular suchen. Hier haben wir das Formular , das ein Pro-Element ist. Wenn ich einfach schließen kann und es dir unter Pro zeige, findest du auch verschiedene Optionen. Hier findest du einen Profi, wir ziehen ihn einfach per Drag-and-Drop hierher. Sie finden verschiedene Felder, Namen und E-Mail-Nachricht. Jetzt wollen wir nicht alle Felder, wir suchen nur nach der E-Mail-Adresse oder vielleicht sogar nach Namensinstanzen. Aber im Moment wollen wir nur die E-Mail-Adresse unserer Besucher sammeln. Wir gehen gleich hier zum Formular. Sie können den Bearbeitungsbereich von Element sehen oder Sie werden feststellen, dass wir gerade die Formularfelder bearbeiten. Wir können den Namen des Formulars ändern, wenn Sie möchten, oder Sie können die Werte der Felder sogar löschen oder duplizieren. Lassen Sie uns den Namen und die Nachricht schließen. Und wir wollen nur eine E-Mail. Jetzt können Sie im Eingabefeld sehen, dass Sie den Platzhalter als E-Mail haben Darüber hinaus haben Sie auch ein Etikett als E-Mail. Jetzt macht es keinen Sinn, immer wieder dasselbe hinzuzufügen. Wir können das Etikett einfach ausschalten, sodass nur der Platzhalter deutlich zeigt , was genau der Benutzer eingeben soll . Genau hier. Gut. Wir können sogar die Farbe der Schaltfläche ändern, indem wir zu den Abschnittsschaltflächen gehen. Sie können den Namen der Schaltfläche ändern , anstatt den Text Senden zu verwenden. Wir können Abonnieren sagen. Ordnung, abonniere. In diesem Teil, in dieser Schaltfläche selbst, gehen wir zu den Stilschaltflächen, wir können die Farbe ändern. Diese Schaltfläche, die Schaltfläche „Senden“ genau hier. Wir können die Hintergrundfarbe auf Grün ändern. Die globale Farbe , die wir gespeichert haben. Gut, das ist das Layout unseres Formulars. Nun, wo genau wir unsere E-Mail-Adresse hinschicken wollen, würden wir eine Art E-Mail-Marketing-Integrationssoftware benötigen . Es gibt eine Menge verschiedener Optionen wie Ihren Mailchimp Sie werden ein Konvertierungskit haben, das ich persönlich verwende, und ich werde Ihnen auch zeigen, wie wir sie in unsere Website einbetten können Genau hier unter diesem Layoutinhalt sammelst du Beiträge Hier werden die Einsendungen in Element oder Einreichungen gespeichert. Es gibt einen Teil in Ihrem Wortress-Dashboard unter Element, oder Sie finden Beiträge, von denen Sie im Wortress-Dashboard sehen können , wer eingereicht hat Aber wenn Sie es tatsächlich in Ihre E-Mail-Marketing-Software integrieren, können Sie einfach hier rübergehen, Sie werden es finden Welche Art von Aktionen möchten Sie? Was für eine Sammlung von Einsendungen und E-Mails? Und sobald Sie auf dieses Plus-Symbol klicken, finden Sie eine Reihe verschiedener Optionen, die Sie Ihre Kampagne integrieren können. Nehmen wir an, Sie haben eine Kampagne in Mailchimp oder im Convert Kit, oder Sie verwenden Mail Alight, Slack, Discord Also lass es uns einfach als Convertkit behalten. Und sobald ich dieses Konvertierungskit hinzugefügt habe, findest du hier eine Option Jetzt könnte das Verfahren für Mail Chimp etwas anders sein Aber der einzige Grund, warum ich mich Convert Kit entscheide, ist, dass jeder mit Convert Kit anfangen kann ist es für mindestens 1.000 Abonnements völlig kostenlos Ab sofort ist es für mindestens 1.000 Abonnements völlig kostenlos. Das heißt, solange Sie in Ihrem Konto keine 1.000 E-Mail-Listen gefunden haben, wird Ihnen kein einziger Cent berechnet. Aber im Fall von Mail Chimp müssen Sie meiner Meinung nach mit 20$ pro Abonnement beginnen Genau hier unter Convert Kit findest du eine Option, um deine API einzugeben Wählen Sie Benutzerdefiniert statt Standard. Und darunter müssen wir unsere APIK eingeben. Wie werden wir unsere APIK abrufen? Zuerst müssen wir zur Seite „ Kit konvertieren“ gehen , sobald du dich bei unserem Convert Kit angemeldet hast. Wenn du ein neues Konto erstellt hast, kannst du einfach zu deinem Profil oben rechts gehen und auf Einstellungen klicken Sobald du auf Einstellungen klickst, findest du hier und hier eine erweiterte Option. Sobald Sie nach unten scrollen, finden Sie eine API. Kopiere das einfach. Wir kehren zu unserer Website zurück. Wir fügen das hier ein und es gibt Ihnen eine Reihe verschiedener Optionen, aus denen Sie auswählen können , was es uns genau sagen will. Geben wir ihm einfach etwas Zeit, um es zu laden und in ein Konvertierungskit zu integrieren . Hier findest du eine Reihe verschiedener Leadmagnete und Landingpages, die ich bisher erstellt habe. Das sind meine Landingpages. Convert Kit bietet jetzt zwei Optionen, um Ihre Abonnentenliste zu erstellen und zu erweitern. Erstens, entweder um ein neues Formular oder eine Landingpage zu erstellen. Landingpages sind eine Seite, auf der Sie Ihre E-Mail-Adresse erstellen, und es handelt sich um eine eigenständige Webseite von Convert Kit selbst gehostet wird und Ihre eigene Domain oder deren Convert Kits-Domain verwendet . Abhängig von Ihrem Anwendungsfall können Sie entweder eine Landingpage oder ein Formular erstellen, können Sie entweder eine Landingpage oder ein Formular erstellen wenn Sie ein Formular erstellen möchten, es handelt sich im Grunde genommen um einen eingebetteten Teil. Der einzige Unterschied, der Hauptunterschied zwischen Landing Page und Formular besteht darin, dass das Formular Teil einer Webseite ist, wohingegen die Landing Page selbst eine eigenständige Webseite ist. Die Funktionalität beider Dinge ist dieselbe. Sie versuchen, E-Mail-Adressen im Austausch für ein Abonnement für einen Newsletter oder eine Veranstaltung zu sammeln ein Abonnement für einen Newsletter oder eine Veranstaltung zu oder ihnen einen Bleimagneten anzubieten. Aber wir können einfach das Formular benutzen. Ab sofort erstelle ich ein Formular und ich kann einfach als modal belassen, weil wir wollen, dass es ein Popup-Ding ist. Ich kann ein einfaches wie dieses wählen, Charlotte. Jetzt weiß ich, dass es in diesem Kurs nicht nur um Konvertierungs-Kits geht, sondern nur darum, etwas zu erstellen, nur um eine E-Mail-Liste zu erstellen und euch allen zu zeigen, wie wir unser Convertkit mit Element integrieren können , oder ich erstelle dieses Dummy-Formular. In Ordnung, hier kann ich Sobald ich jetzt auf Veröffentlichen klicke, sehe ich mehrere verschiedene Optionen. Javascript, HTML, Teilen, Bounce drücken und so weiter. Aber im Moment würde ich mit keinem von ihnen weitermachen. Okay, ich werde das einfach speichern, vielleicht kann ich das in etwas ändern wie, sagen wir einfach Elementor Pro Ordnung, Elementor Pro, das ist es. Ich werde das speichern Ich klicke auf Veröffentlichen. Und im Moment behalte ich es einfach unter dem HTML-Tab, sobald ich wieder hier bin, und wenn ich es auswähle, sollte ich es normalerweise hier finden, genau hier, was mein Elementor-Pro-Formular ist Aber lassen Sie mich vorerst einfach den Web-Dev-Leadmagneten auswählen. Sobald ich diesen ausgewählt habe, passiert im Wesentlichen, dass, welche Aktionen auch immer von dieser Landingpage ausgeführt werden sollen, das bedeutet, irgendeine Art von Leadmagneten zu versenden oder sie in ein loses Briefabonnement einzubeziehen , das von diesem speziellen Popup-Formular aus stattfindet . Hier sammle ich die E-Mail-Adresse aus diesem E-Mail-Feld, und für die Landingpage selbst ist auch ein Vorname erforderlich. Unser Popup-Formular hat jedoch kein Namensfeld. Sie können das vorerst überspringen. Und Sie können sogar Tags hinzufügen. Mithilfe von Tags können Sie die gesamte E-Mail-Liste kategorisieren , aus der später genau der Verkehr stammt Wenn Sie die E-Mail, also die gesendete E-Mail, nur an eine Gruppe von Personen in Ihrer gesamten Liste versenden möchten, können Sie sie gezielt in Ihre Tagliste aufnehmen Ich werde nicht im Detail auf Convert Kit und die Funktionsweise der gesamten E-Mail-Marketing-Software eingehen Convert Kit und die Funktionsweise der gesamten , aber ich hoffe, Sie verstehen, worum es geht diese verschiedenen E-Mail-Kampagnenprogramme zu umgehen. Okay, genau hier, ich habe das gebaut und werde es veröffentlichen Sobald ich jetzt auf Veröffentlichen klicke, findest du verschiedene Bedingungen und Auslöser. Das bedeutet im Grunde, wo genau möchtest du deine Vorlage anzeigen? Das Popup-Formular, das wir erstellt haben? Auf welcher Seite möchtest du das präsentieren? Das können wir hinzufügen. Wir wollen das nur auf einer einzigen Seite anzeigen. Welche Seite besonders? Wir möchten dies auf unserer Titelseite , der Hauptwebseite, präsentieren . In Ordnung, ich kann jetzt zu Triggern gehen. Trigger bedeutet im Grunde, dass zu welchem bestimmten Zeitpunkt, welchem genauen Ereignis, wenn der Benutzer eintritt, wir auftauchen wollen. Dieses Popup-Formular. Es wird eine Seite geladen Sobald ich umgeschaltet habe, werden Sie feststellen, dass Sie nach wie vielen Sekunden die Seite geladen haben, angezeigt werden möchten. Dieses Popup-Formular Wenn Sie scrollen möchten, das heißt, nachdem eine Seite vertuscht wurde, sagen wir einfach, dass der Benutzer etwa 50% des gesamten Webseiteninhalts gelesen hat , dann sollten Sie darauf verzichten. Dieses Popup-Formular. Das kannst du machen. Sie können auf einem bestimmten Element blättern. Nehmen wir einfach an, dass Sie Ihrem Abschnitt eine Klasse hinzugefügt haben . Nachdem dieser Klassenbereich nach oben gewischt wurde, wird das Popup-Formular angezeigt Ein Klick wird ebenfalls ausgelöst, was bedeutet, dass jedes Mal, wenn jemand auf eine beliebige Stelle auf der Webseite klickt, das Popup-Formular angezeigt wird Sie haben eine nachträgliche Inaktivität . Sobald der Benutzer liest, sagen wir einfach, Sie haben einen sehr langen Blockbeitrag Der Inhalt selbst wird ungefähr ein oder zwei Minuten dauern , bis der Benutzer ihn gelesen Nach etwa 15 bis 20 Sekunden. Sobald der Benutzer gerade liest, ohne zu scrollen oder irgendwelche Aktivitäten auszuführen, wird er angezeigt . Dieses Popup-Formular Ordnung. Sie haben keine genaue Absicht, das heißt, wenn jemand Ihre Webseite schließt, wird sie angezeigt . Dieses Popup-Formular. Ordnung, jetzt kann ich es einfach so lassen wie beim Laden der Seite nach etwa 10 Sekunden. Und ich habe auch fortgeschrittene Regeln. Hier haben Sie also nacheinander Seitenaufrufe. Nehmen wir einfach an, dass Sie dieses spezielle Popup-Formular präsentieren möchten. Nachdem etwa zehn oder 15 Benutzer Ihre Webseite tatsächlich nur angesehen haben, sollte sie zuerst angezeigt werden. Sie erhalten alle zehn bis 15 organischen Zugriffe. Sobald Sie etwas Traffic bekommen haben, möchten Sie dieses Popup-Formular nach X Sitzungen aufrufen. Das bedeutet, dass sich die Seitenaufrufe und die Seitensitzungen in Bezug darauf unterscheiden, sagen wir einfach, dass ich ein Benutzer bin und diese Webseite betrachte. Die Anzahl der Seitenaufrufe. Okay? Ich werde diese Website noch einmal besuchen Das wird als Seitenaufrufe gezählt, aber in der Sitzung geht es im Grunde darum, wie oft ich Ihre Webseite betrachte In Ordnung, dann wird es bis zu x-mal angezeigt. Das bedeutet, dass dieses Popper-Formular nur einmal für jeden einzelnen Benutzer angezeigt wird Sie können diese Regel sogar umgehen , wenn Sie von einer bestimmten URL kommen Nehmen wir an, Sie haben jede einzelne Webseite oder jeder einzelne Blockbeitrag hat eine URL. Jetzt möchten Sie dieses Popper-Formular nur dem Traffic präsentieren , von Ihren Social-Media-Konten umgeleitet Nehmen wir einfach an, Sie haben den Link Ihrer Webseite, URL, auf Ihrer Facebook- oder Instagram-Bioseite für einen begrenzten Zeitraum eingefügt auf Ihrer Facebook- oder Instagram-Bioseite für . Sie laufen wie eine Veranstaltung. Bitte melden Sie sich für meinen Newsletter an Dann erhalten Sie Zugang zu exklusiven Rabatt für die bevorstehende Produkteinführung Dieser Link wird ausschließlich auf Facebook und Instagram Stories geteilt. Immer wenn sich jemand über diese Bio-Links durch diese Geschichten klickt , wird dieses Popup-Formular angezeigt . Andernfalls wird der organische Traffic oder die Tatsache, dass Sie über die Google-Suche auf Ihre Website kommen oder einfach Ihre URL in den Browser eingeben , Ihr Popup-Formular nicht angezeigt. Dann gibt es eine gewisse Show, wenn man von wo kommt. Genau. Sagen wir einfach , Sie möchten das kategorisieren, von wo aus Interne Links, externe Links. Sie möchten diese Popup-Seite sogar markieren. Popup-Seite, die Nutzern angezeigt wird, die von der Chrome-Suchmaschine oder der Google-Suchmaschine anstelle von Bing oder anderen Plattformen kommen Chrome-Suchmaschine oder der Google-Suchmaschine . Für gesperrte Benutzer ausblenden. Nehmen wir einfach an, Sie gewähren einen Rabatt für neue Benutzer. Diejenigen, die sich bereits angemeldet haben, werden nicht angezeigt. In diesem Popup können Sie sogar zwischen Geräten wechseln. Sagen wir einfach, dies ist ein exklusiver Rabatt, der für Ihre Mobilgeräte Nur Sie können das überhaupt tun. Bei bestimmten Browsern wie Chrome haben Sie einen Vorteil, Sie haben Brave und bei anderen Browsern können Sie sogar Datum und Uhrzeit festlegen. Nehmen wir an, Sie veranstalten ein zeitlich begrenztes Webinar, das an den Wochenenden und an allen Wochentagen von Montag bis Freitag durchgeführt wird. Sie möchten Ihre Webseite mit diesem Popup-Formular bewerben , damit sich die Leute hier für Ihren Newsletter oder Ihre E-Mail, Ihr Webinar, anmelden können Ihren Newsletter oder Ihre E-Mail, Ihr Webinar, . Sie können das Datum einfach umschalten und auswählen. Und nur dann wird dieses spezielle Popup angezeigt. Aber vorerst werde ich es einfach speichern und schließen, sobald ich es mir angesehen habe. Mal sehen, was passiert. Okay, also ich werde einfach auf die Startseite gehen, bis 101, 234-567-8910 zählen, okay 234-567-8910 Ich kann genau hier sehen, dass wir dieses Popup-Formular haben. Ordnung, ich hoffe, Sie verstehen es jetzt, Sie haben auch noch eine weitere Option. Dies ist das Formular , das Sie auf Ihrer Presse-Website erstellt haben. Was wäre, wenn Sie tatsächlich ein Formular in Convert Et selbst erstellt haben ein Formular in Convert Et selbst und jetzt genau das gleiche Design-Layout auf Ihrer Weress-Website wiederverwenden möchten genau das gleiche Design-Layout . Wie können Sie das machen? Gehen wir einfach zu einer der anderen Seiten. Dafür muss ich zum Dashboard gehen. Ich werde eine neue Seite erstellen. Okay? Ich werde eine neue Seite erstellen und das so nennen wie, sagen wir einfach, sagen wir einfach, wir werden das mit Element bearbeiten oder später, lassen Sie uns das als Konvertierungs-Popup behalten, Formular bearbeiten mit Elementor Wir werden gleich hier hingehen. Das Schalottenformular, das wir mit der vorgefertigten Vorlage hier unter X Tamal erstellt der vorgefertigten Vorlage hier unter X Tamal Wir werden den gesamten X-Tamal-Code problemlos hier in unseren kopieren hier Dieses Ding erzeugt eine Flexbox mit dieser Richtung, Flexbox mit Partikelrichtung innerhalb des hinzugefügten Elements Wir suchen nach HTML, falls Sie sich nicht sicher sind , ob dieses HTML Teil der Pro- oder der kostenlosen Version ist . Außerdem finden Sie HTML in der kostenlosen Version. Außerdem können wir es einfach hier in diesen HTML-Code ziehen und platzieren . Sie müssen es nur einfügen. Sobald Sie es eingefügt haben, müssen Sie es veröffentlichen. Sobald Sie veröffentlicht haben und Ihre Seite aufgerufen haben, schauen wir uns an, ob wir die Popup-Seite sehen können. Wir können diese Popup-Seite nicht sehen. Ich bin mir nicht ganz sicher, warum es nicht passiert ist. Idealerweise sollte. Gehen wir zu den Einstellungen. Sehen wir uns andere Einstellungen an , die wir in unserem Formular haben. Okay? Also das sollte für alle Geräte sichtbar sein. Okay, das Timing ist 5 Sekunden, okay? Der einzige Grund, warum wir das nicht sehen konnten , weil das Timing auf 5 Sekunden eingestellt war, reduzieren wir es einfach auf vielleicht sogar drei. Okay, speichern wir das nochmal. Ich klicke auf Veröffentlichen. Ich kopiere den tamilischen Code. Jetzt können Sie sehen, dass das Popup sichtbar ist, da es ungefähr 5 Sekunden gedauert hat, bis es angezeigt Das Pop-up, okay, ich hoffe, Sie verstehen, worauf es ankommt, ein Pop-up zu erstellen und E-Mail-Adressen von Ihren Besuchern zu sammeln . 17. Popup-Menü der Seitennavigationsleiste - Du willst nichts verpassen!: Leute, jetzt, wo wir etwas über Popups gelernt haben, werdet ihr dasselbe Konzept verwenden um eine seitliche Navigationsleiste zu erstellen Genau hier auf unserer Homepage haben wir dieses Ellipsensymbol in der Kopfzeile Sobald der Benutzer darauf klickt, haben wir gewarnt, dass der Benutzer mit einer seitlichen Navigationsleiste aus der richtigen Richtung und in einem Animationsformat mit einer Bildergalerie und einem Homepage-Menü aufgefordert werden sollte einer seitlichen Navigationsleiste aus der richtigen Richtung und in einem Animationsformat mit einer Bildergalerie und einem Homepage-Menü Ordnung, dafür müssen wir wieder auf Dashboard drücken. Sobald wir dort im Vorlagenbereich sind, haben wir Popups. Lass uns dorthin gehen. Wir fügen eine neue Vorlage hinzu und geben den Namen als Seitennavigationsleiste an. In Ordnung, lassen Sie uns eine Vorlage erstellen. Sobald wir das getan haben, werden uns natürlich einige Vorlagen , die wir nicht verwenden werden. Wir werden es von Grund auf neu erstellen. Nun die weiße Ebene, die Sie hier in der Mitte unserer Webseite sehen, hier wird Ihr Popup erscheinen. Aber das ist nicht der Ort, an dem wir wollen. Wir möchten, dass unsere Navigationsleiste aus der richtigen Richtung kommt, von der rechten Seite des Bildschirms genau hier. Wenn das Ganze ausgewählt ist, klicken wir einfach auf dieses Zahnradsymbol , das die Popup-Einstellungen anzeigt. Und wir werden die Position ändern, sodass es in horizontaler Richtung erscheinen sollte. In Bezug auf die vertikale Richtung sollte es im obersten Teil erscheinen Ordnung, und die Breite muss auf etwa, sagen wir einfach 420 reduziert sagen wir einfach 420 Ich denke, 425 wären gut genug. Ich denke, 425 ist mehr als genug. Sobald wir das getan haben, wird auch die Höhe so angepasst, dass sie auf den gesamten Bildschirm passt, sodass er die gesamte Höhe einnimmt. Und wir können unsere Inhalte und Elemente in der Navigationsleiste dieser speziellen Website so anpassen Navigationsleiste dieser speziellen Website , dass sie in der Mitte angezeigt werden. Und zwischen den Elementen ist ausreichend Platz. Ordnung. Jetzt haben wir hier die Animation. Auch wenn die Eingangsanimation so sein sollte, weißt du, dass rechts hineinrutscht, von rechts hineinrutscht und die Ausgangsanimation nach rechts herausgleitet. Fein. Da wir diese Animation etwas schneller machen wollen, bewegen wir den Slider nach links und wir machen die Animation für etwa 0,6 Sekunden. In Ordnung, lass uns auf die Anzeige klicken. Wir machen die Flexbox nach unten. Wir benötigen nur einen Container. Und wir werden ein Element hinzufügen. Nun, das Erste, was wir darin hinzufügen werden, wäre unser Logo. Lassen Sie uns nach dem Logo der Website suchen. Das werden wir hier hinzufügen. Fein. Übrigens, der Hintergrund dafür, unsere gesamte Navigationsleiste auf dieser Website sollte in diesem Stil schwarz sein. Zuerst klicke ich auf dieses Zahnradsymbol, bei dem es Popup-Einstellungen im Stilbereich Ich gehe zum Hintergrundtyp und wähle Classic aus. Ich ändere die Farbe in einen etwas dunkleren Farbton. In Ordnung. Ja, ich denke, das wäre gut genug. Sobald wir das gemacht haben, haben wir unser Seitenlogo. Wir möchten unser Seitenlogo so ändern , dass es in der Mitte erscheint und Breite von etwa 45% hat, wäre gut. Ordnung. Danach möchten wir Ihnen unsere Bildergalerie zeigen. Vorher wäre es gut, wenn wir noch einen Texteditor hinzufügen könnten. Fügen wir direkt in diesem Container einen Texteditor hinzu. Und hier haben wir den Text. Lassen Sie uns den Schriftstil auf Poppins, Schriftfamilie ändern. Lassen Sie uns nach Poppins suchen und die Farbe des Textes soll weiß sein Feine Ausrichtung, wieder in der Mitte. Jetzt werden wir darunter einen sozialen Link hinzufügen. Wir werden einen sozialen Link hinzufügen. Wir möchten eine Icon-Liste auflisten, dass wir ein Instagram-Logo haben und dass wir die URL unseres Instagram-Profils haben. Fein. Wir haben die Liste wieder. Wir wollen nur eine Liste. Im Moment sollte dieses Symbol Instagram sein. Wir wählen Instagram auf aus und fügen das ein. Sobald wir das haben, wäre der Text ein. Ich werde die URL meiner Instagram-Seite platzieren. Das ist die URL, oder ich sollte sagen, nur der Benutzername. Und ich kann die URL sogar hier hinzufügen. Wenn ich möchte, dass das Symbol anklickbar ist, ist das in Ordnung. Ich möchte, dass das in der Reihe ist, oder? Es erscheint in derselben Zeile und wir können das Styling zwischen ihnen anwenden. Lassen Sie uns es mittig ausrichten. Wir können die Farbe des Symbols so ändern, dass es weiß ist. Wir können auch die Farbe des Textes so ändern, dass er weiß ist. Lassen Sie uns die Farbe des Textes so ändern, dass er weiß ist. Und wir können auch die Typografie und Größe erhöhen. Ich denke, etwa 25 Pixel wären gut genug. Lassen Sie uns den Schriftstil auf Poppins ändern, um sicherzustellen , dass die gesamte Website einheitlich ist die gesamte Website einheitlich Auch hier sollte die Symbolgröße auf 25 Pixel erhöht werden. Gut, das ist gut genug. Was ich nicht hinzufügen muss, weil es offensichtlich ist, dass wir über unseren Benutzernamen sprechen. Gut, das ist gut genug. Jetzt werden wir darunter Galerie hinzufügen, eine Bildergalerie. Suchen wir also im Grunde nach Galerie , Galerie und Gruppen. Gut, lassen Sie uns direkt unter diesem Teil eine Galerie hinzufügen. Gut, wir müssen ein paar Bilder auswählen. Lass uns ein paar Bilder hinzufügen. Bei diesem halte ich meine Befehlstaste gedrückt. Windows-Systeme, Sie müssen Ihre Steuertaste gedrückt halten. Fein. Diese beiden Bilder glaube ich. Fügen wir auch diese beiden hinzu. Gut, wir haben sechs Bilder und wir werden sie in diese Galerie einfügen. Gut. Jetzt können wir sie nach dem Zufallsprinzip anordnen, oder es könnte etwas Lesyload angewendet werden Lazy Load bedeutet im Grunde, dass immer dann, wenn Sie versuchen, Ihre Website zu laden, nur wenige Bilder geladen werden Dann wird der nächste Satz von Bildern geladen, wenn Sie möchten Leistung Ihrer Website eine höhere Punktzahl erreicht. Jetzt sollte das Layout in einem Rasterformat vorliegen. Sie können die Anzahl der Spalten ändern. Im Moment haben wir vier Spalten. Sie können sehen, dass die erste Spalte zwei Bilder hat, zweite Spalte hat zwei Bilder, Spalte hat nur ein Bild und die vierte Spalte hat auch ein Bild. Lassen Sie uns die Spalten auf drei reduzieren, damit die sechs Bilder angepasst und in zwei Zeilen und drei Spalten aufgeteilt werden können. Fein. Lassen Sie uns auch den Abstand zwischen diesen Bildern ändern. Ich denke, etwa 18:18 wäre gut genug. Ordnung. Wir können auch das Design so ändern , dass das Verhältnis von drei S auf vier auf vier S geändert werden kann . Drittens, die Bildgröße würde sich von 16 S auf neun ändern , das ist auch das, was wir tun können. Aber fürs Erste behalten wir es einfach bei vier S zu drei. Das wäre gut, denke ich. Oder anfangs war es drei Uhr bis 02:00 Uhr , richtig? Ja. Bildauflösung. Wir haben ein mittleres Vorschaubild. Ich denke, für diese spezielle Größe der Navigationsleiste ist dies die perfekte Größe für unsere Galerie Fein. Jetzt können wir darunter unser Menü hinzufügen. Wir können unser Tres-Menü gleich hier hinzufügen. Darunter können wir unser Tres-Menü hinzufügen. Auch hier können wir den Inhalt zentrieren. Wir können die Farbe des Textes in Weiß ändern, in der Typografie fein Ich könnte das in Poppins Fun-Familie ändern, oder? Dies ist unsere Navigationsleiste auf der rechten Seite oder an der Seite. Außerdem, welche anderen Dinge könnten hinzugefügt werden Es gibt eine Reihe verschiedener Dinge, die Sie hinzufügen können. Sie können auch ein paar weitere soziale Links hinzufügen. Lass uns versuchen, es zu tun. Dosenbox oder Dosenliste direkt unter unserem Pressemenü. Lassen Sie mich einfach andere Artikel löschen. Oder vielleicht könnte ich noch ein paar Artikel hinzufügen und ihnen etwas wie Facebook und Twitter geben . Oder vielleicht sogar verlinkt . Gut, ich kann das Gleiche tun. Also kann ich einfach das Styling kopieren. Ich kann es hier einfügen. Styling gut einfügen. Dafür kann ich das in ein Facebook-Logo ändern. Wenden Sie die Facebook-Einstellungen gleich hier an. Wir können den Namen meiner Facebook-Seite darunter hinzufügen. Ich kann das in etwas wie, sagen wir Linton, ändern. Ordnung, Linton nochmal, ändere den Text so und wir haben endlich den Aufbau unserer rechten Leiste abgeschlossen Nun zu unserer Navigationsleiste. Wir wollen sicherstellen, dass der Inhalt dieses gesamten Containers die gesamte Höhe einnimmt Ordnung. Die Haupthöhe sollte 100 V H betragen. Das heißt, sie nimmt die Höhe des Containers ein, ist die gesamte Höhe des Viewports in Ordnung Außerdem ist die Richtung vertikal und wir möchten den Inhalt zentrieren, ausrichten, die Elemente zentrieren und sicherstellen, dass zwischen ihnen ein gewisser Abstand besteht So können wir sogar Lücken hinzufügen und die Lücke vergrößern Es sieht gut aus. Ich denke, etwa 35 wären gut genug, oder? Das ist genau das, was wir wollen, wenn wir das veröffentlichen. Jetzt werden wir mit verschiedenen Bedingungen, Auslösern und Regeln konfrontiert, die wir für unser Messerleisten-Popup auf der rechten Seite einrichten möchten . Die Absicht hinter der Verwendung dieser Navigationsleiste ist jedoch , dass immer dann, wenn der Benutzer auf Ihre Ellipse in der Kopfzeile klickt, diese Navigationsleiste angezeigt wird Das heißt, egal wie viele Beitragsseiten Sie erstellen, Sie möchten, dass diese seitliche Messerleiste angezeigt Richtig. Vorerst speichern und schließen wir. Wir werden keine Bedingungen, Auslöser oder Regeln anwenden. Wir kehren in der Navigationsleiste zu unserer Presse-Website zurück. Lass mich einfach auf die Startseite gehen. Ich klicke auf Mit Elementor bearbeiten. Sobald ich dort bin, bearbeite ich meinen Header, den wir erstellt haben. Gut, lass mich dem einen Moment Zeit geben. Genau hier in der Kopfzeile bearbeite ich meine Kopfzeile. Genau hier in der Kopfzeile habe ich die drei Symbole. Ich kann auf Link klicken. In der Option für dynamische Tags habe ich die Möglichkeit, ein Popup auszuwählen. Sie können in den Aktionen sehen, die ich geöffnet habe. Ich kann das Popup erneut auswählen. Ich muss auf die Einstellungen des Popups klicken und jetzt wird es angezeigt. , ob ich alle Popups oder nur ein bestimmtes Pop-up auswählen möchte , wir wollen natürlich nur eine bestimmte Seitenmesserleiste. Also suchen wir einfach nach einer Vorlage für die Seitenleiste und diese werden wir speichern. Lassen Sie uns das veröffentlichen und wir werden unsere Webseite sehen , wenn ich es mir ansehe. Wenn ich darauf klicke, können Sie sehen, dass eine seitliche Messerleiste erscheint. Wenn ich irgendwo außerhalb der Navigationsleiste klicke, verschwindet sie. Ich hoffe, euch gefällt dieser Kurs bis jetzt. Wenn ihr Fragen habt, könnt ihr mich im Bereich „In“ stellen und ich werde mein Bestes geben , um jede einzelne eurer Fragen zu beantworten. 18. Element in Design-Blog posten/Produktbeiträge: Schauen wir uns ein anderes Element oder Pro-Element an, das ein Post-Element sein wird. Aber bevor ich gleich darauf eingehe, möchte ich nur hervorheben, dass ich hier noch ein paar weitere Blockbeiträge hinzugefügt habe . Wie Sie sehen können, haben wir es uns angesehen. Korrekt. Hier können Sie sehen, dass andere Beiträge gefüllt werden. Jetzt ist das Bild für den ersten Block nicht proportional zu den anderen weil das Bildverhältnis und die Bildabmessungen anders sind als bei den anderen Karten. Außerdem kannst du feststellen, dass die Höhe jeder einzelnen Karte etwas anders ist, einfach weil wir einen anderen Titel haben. Wir können die Höhe anpassen. Wir können die Höhe korrigieren. Das heißt, es sollte diese bestimmte Höhe nicht überschreiten. Die Titelgröße könnte auf vielleicht 35, 40 Pixel reduziert werden, wir könnten das umgehen. Eine Sache, die Ihnen vielleicht auffallen wird , ist , dass wir auch Block zwei hatten, aber er wird hier nicht gefüllt. Nun, warum ist das so? Lass uns das einfach mit Elementor bearbeiten Ich klicke einfach hier, übrigens, auch in meinem Menü, auch in meinem Menü, lass mich dir nur zeigen, was ich meine Ich kann mir hier eine Vorschau der Änderungen ansehen. Immer wenn ich im Block herumlaufe, findest du Block eins, Block zwei in all den anderen Blöcken, die ich hinzugefügt habe. Jetzt wurde das nicht automatisch ausgefüllt, ich musste zurück zu meinem Tres-Dashboard und den Darstellungsmenüs gehen. Ich ging zu den Beiträgen und fügte all die Dinge hinzu, die in mein Menü aufgenommen werden sollten . Und dann habe ich es per Drag & Drop unter die Blog-Seite Es wurde ein Unterpunkt meiner Blog-Seite. Und ich habe das Menü gespeichert. Korrekt. Wir können auch das Pop-up sehen, das wir zuvor erstellt haben. Gehen wir zu unserem Element oder unseren Einstellungen. Genau hier. Wir wählen Ihre Vorlage für Loop Grid aus. Lass uns zunächst auf „ Lass mich einfach zurückspeichern“ klicken . Ordnung, wir haben dieses Schleifenraster Lassen Sie mich einfach eine dieser Karten auswählen, wir können einfach eine dieser Karten auswählen. Okay, genau hier in diesem Bereich, dem leeren Raum zwischen diesen beiden Karten. Und Sie können sehen, dass wir das Loop-Grid ausgewählt haben. Ordnung, jetzt werden Sie feststellen , dass es drei Spalten gibt. Deshalb können wir sehen, dass sechs Blöcke erscheinen. Sie können jedoch feststellen , dass nur sechs Elemente pro Seite gefüllt werden können, sodass Sie sie erhöhen oder vielleicht sogar verringern können. Wenn ich das auf nur drei Karten reduziere, die auf dieser speziellen Startseite angezeigt werden sollen , dann kannst du auch Seitennummerierung hinzufügen Paginierung bedeutet im Grunde , dass Sie Zahlen hinzufügen können. Unten rechts haben Sie ein bis drei Optionen anstelle von Zahlen Sie können dies sogar auf „ Zurück“ oder „Weiter“ ändern. Auf diese Weise könnten Sie sogar Zahlen plus „Zurück“, „ Weiter“, „Zurück“, „123“, „Weiter“ hinzufügen Weiter“, „Zurück“, „123“, „Weiter , und es gibt ein Seitenlimit. Sie können das Seitenlimit auch erhöhen, wenn Sie möchten. Sie können den Text des vorherigen und des nächsten Etiketts ändern . auch etwas wie vor und zurück Sie können auch etwas wie vor und zurück beim Klicken laden, was im Grunde bedeutet, dass Sie eine Schaltfläche erhalten die Schaltfläche anpassen können, und wenn jemand auf die Schaltfläche klickt, wird das Zahlenauswahlfeld geladen und die anderen Blogkarten werden aufgefüllt Oder Sie könnten einen Infrarot-Scroll verwenden. Der Infrite Scroll wäre beste Szenario für die Verwendung von Infinite Scroll, wenn Sie eine separate Produktseite haben dieser Produktseite werden alle Produkte angezeigt , die sich auf Elektronikartikel beziehen Und nehmen wir an , Sie haben 15, 20 elektronische Artikel, die auf dieser Seite angezeigt werden sollen. Dort können Sie Ihren Inference Crewel verwenden , aber nicht auf der Startseite Das ist momentan keine gute Praxis. Behalten wir einfach die As-Schaltfläche damit wir Load More nutzen können. Sie können das Symbol sogar ändern, wenn Sie möchten. Im Moment werden wir keinen der Artikel verwenden. Sie können den Abstand ändern, Sie können ihn ausrichten, Sie können die Schaltfläche gestalten, und es gibt eine Reihe verschiedener Dinge, mit denen Sie auch herumspielen können. Wie hier hast du die gleiche Größe. Sobald ich das umschalte, wirst du feststellen, dass die gesamte Höhe der Karten auf „gleich“ eingestellt ist , und zwar korrekt Dann hast du auch noch die Abfrage. Im Grunde bedeutet das, welche Quelle das sein soll, ob du alle Beitragsseiten anzeigen willst, Seiten linieren, was auch immer du auswählen möchtest, das kannst du tun Wie genau möchtest du das alphabetisch ordnen? Möchten Sie, dass es nach Titel, Anzahl der Kommentare und dem Blog, der zuletzt veröffentlicht wurde , sortiert Du kannst es einstellen, eine Menge verschiedener Dinge tun. Okay, ich werde das einfach veröffentlichen. Und der einzige Grund, warum ich das Thema Loop Grid noch einmal angesprochen habe, ist, dass der Beitragsabschnitt , den wir in dieser Vorlesung behandeln werden, dem Loop-Grid ähnelt. Loop Grid ist ein zusätzliches Element. Welches Element? Oder kürzlich hinzugefügt, aber zuvor hatten wir ein Post-Element. Wenn ich auf „Element hinzufügen“ klicke, findest du im Pro-Bereich „Beitrag“. Was passiert, wenn ich einen Beitrag hinzufüge? Lass mich einfach darauf klicken. Ich klicke auf Flex Box und wähle diese horizontale Richtung. Jetzt ziehe ich das Post-Element per Drag & Drop direkt in diesen Container. Mal sehen, was passiert. Sobald ich das mache. Sie werden feststellen, dass alle Beiträge automatisch ausgefüllt werden. Das Design-Layout unterscheidet sich ein wenig von dem, was wir im Loop Grid festgelegt haben Weil wir das Loop-Grid von Grund auf neu gemacht haben, oder? Es wurde komplett maßgeschneidert für das Loop-Grid. Aber für diese Elemente des Post-Teils können Sie gleich hier sehen, wie es ist, einige Standardeinstellungen verwenden, können Sie die Runde ändern. Es ist nicht so, dass Sie sich an die Standard-Designeinstellungen halten müssen, wie hier für den Titel. Sie können sehen, dass Sie auch die Farbe des Titels ändern können . Gehen Sie zum Style-Tape, Sie finden Inhalt im Inhalt, Sie können die Titelfarbe anstelle von Blau ändern, Sie können daraus Ihr Grün-Weiß machen. Sie können die Typografie auf, sagen wir einfach Poppins, auf dieselben Einstellungen ändern sagen wir einfach Poppins, auf dieselben Einstellungen Die Schriftfamilie wird auf jede einzelne Karte angewendet , okay? Sie können sogar den Textstrich ändern, wenn Sie möchten. Sie können einige Metadaten hinzufügen. Nun, was bedeuten Metadaten hier? Das Datum, die Kommentare, all das sind Metadaten. Ordnung, dann hast du einen Auszug, was im Grunde bedeutet, dass du ihn manuell einstellen musst, während du einen Beitrag erstellst Es teilt im Grunde mit, worum es in deinem Beitrag genau geht. Es ist also wie eine kurze Beschreibung Ihres Beitrags, das ist ein Auszug aus dem Inhalt, und dann haben Sie mehr gelesen Dieser Read More ist hier wie ein Link, nicht eher ein Button. Du kannst die Farbe ändern, du kannst die Typografie wieder ändern, ich kann das auf Poppins einstellen Okay, lassen Sie uns versuchen, Poppins für jedes einzelne Textelement zu erstellen , damit Ihre Konsistenz auf der gesamten Website gewahrt bleibt der gesamten Auch hier werde ich diese Poppins gut machen. Also hier haben wir den Inhalt geändert . Kommen wir zum Bildteil. Sie können den Grenzradius hinzufügen, wenn Sie möchten. Sie können einen gewissen Abstand angeben, wenn Sie möchten, Sie können einige CSS-Filter hinzufügen. Ich habe bereits zu Beginn des Kurses besprochen, dass Sie mit CSS-Filtern die Helligkeit, den Kontrast und andere Effekte der Unschärfe manuell anpassen können Helligkeit, den Kontrast und andere Effekte der Unschärfe manuell anpassen , um Ihr Bild zu bearbeiten, anstatt eine andere Bildbearbeitungssoftware zu verwenden. Okay, kommen wir zum Kartonteil, das heißt, du kannst für jede einzelne Karte einen Rand hinzufügen Wenn ich versuche, den Rand breiter zu machen, werden Sie feststellen, dass er sich wie ein Rand formt. Ich kann es etwas dunkler machen, damit es etwas dicker wird. Ich kann sogar einen Randradius hinzufügen, etwa so. Ich kann etwas Polsterung hinzufügen. Offensichtlich klebt der Inhalt, also können wir hier einen gewissen Randradius und eine Polsterung für die Box hinzufügen Polsterung für die Box Ich kann vielleicht, sagen wir einfach zehn, hinzufügen. So findest du es aus allen Richtungen. Ordnung. Aber wenn Sie nicht möchten, dass der gesamte Teil gepolstert wird und Sie nur den Inhalt auffüllen möchten , können Sie das sogar tun Mal sehen, wie das funktioniert. Wenn ich zehn hinzufüge, wirst du feststellen, dass das Bild so bleibt, wie es ist. Aber der Inhalt , also dein Titel, dein Auszug, deine Metadaten und deine weitere Information, ist in den vier Richtungen etwas aufgepolstert Sie haben auch unterschiedliche Effekte, die Hoover - und im normalen Modus auftreten Du hast auch Box Shadow. Wenn ich auf Box Shadow klicke, wirst du feststellen, dass sich hinter den Karten ein Schatten befindet , der gut aussehen würde. Dann kannst du auch die Hintergrundfarbe ändern. Wenn ich diese Hintergrundfarbe ändere, werden Sie feststellen, dass sich die Hintergrundfarbe des Inhalts ändert. Ich lösche das einfach, weil ich es nicht will Du kannst dem sogar eine Randfarbe geben. Ich kann die globale grüne Farbe einstellen. Das würde meiner Meinung nach gut aussehen, ist aber nicht so toll. Bringen wir das einfach wieder auf die Standardeinstellung zurück. Ich kann einfach auf die Farbe klicken und dann auf das Aktualisierungssymbol klicken. Gut, so sieht es aus. Kommen wir nun zurück zum Layoutteil Sie werden Lücken zwischen den Spalten finden. Derzeit ist es auf 30 Pixel eingestellt. Wenn ich diesen Wert erhöhe, wirst du feststellen, dass , je mehr ich den Abstand zwischen meinen Karten Inhalt immer kleiner wird, je mehr ich den Abstand zwischen meinen Karten vergrößere. Lass uns das einfach bei 30 belassen. Jetzt gibt es auch eine gewisse Reihenlücke. Also hier haben wir drei Spalten und zwei Zeilen, richtig? Hier können Sie also sogar den Zeilenabstand vergrößern, wenn Sie möchten. Lassen Sie uns das einfach bei 50 Pixeln belassen. Sie können den Inhalt , den Sie hier haben, sogar ausrichten. Sie können also entweder eine Mittellinie, eine Linie nach links oder sogar eine Linie nach rechts drehen. Aber ich denke, die Mittellinie würde gut aussehen. Okay, um zum Inhaltsteil hier zu kommen, Sie haben unterschiedliche Skin-Layouts. Klassisches Kartenformat. Wenn ich das auf das Kartenformat ändere, kannst du sehen, dass es wirklich, wirklich gut aussieht. Hier hast du verschiedene Kategorien. Nun, Kategorien habe ich bei der Erstellung von Posts festgelegt. Lassen Sie mich Sie einfach zurück zum Tress-Dashboard bringen, genau hier im Post-Bereich. Ich gehe zu allen Beiträgen und genau hier findest du Kategorien. Also habe ich hier ein paar Blöcke erstellt, die Teil der gängigsten Kategorien sind , und zwei Blöcke, die Teil dieser Kategorie sind. Alles klar? Und ich habe ein paar Hashtags vergeben , damit Leute, wenn sie in verschiedenen Blöcken suchen, den Inhalt durchsuchen können und dann diesen bestimmten Block finden können. Gut. Um sie zu kategorisieren, müssen Sie einfach auf einen der Blockbeiträge und dann auf Ert klicken, genau hier im Bearbeitungsbereich Du kannst ihnen ein Schlagwort geben und sie sogar kategorisieren, indem du eine neue Kategorie hinzufügst Ich hoffe, du verstehst, was Kategorien und Tags angeht. Sie können mehrere Tags oder sogar mehrere Kategorien hinzufügen. Aber was Ihnen Kategorien und Tags im Wesentlichen ermöglichen, ist, dass Sie später einfach sagen, dass Sie eine Art von Blockkarten erstellt haben , die Sie direkt hier auf einfach sagen, dass Sie eine Art von Blockkarten erstellt haben eine Art von Blockkarten der Webseite sehen können. Und ganz oben findest du Kategorien. Im Grunde gehört dieser Block also zur Kategorie Kurse, aber diese Kategorie hat mehrere verschiedene Kurse von Betriebssystem über Webentwicklung, UI UX bis hin zu Datenabschnitten und Algorithmen und ähnlichem reichen. All diese einzelnen Kurse werden also ähnlichen Hashtag haben, der sich auf den Inhalt und den Titel bezieht sich auf den Inhalt und den Titel , sodass es in Bezug auf Suchmaschinen einfacher ist , Ihren Inhalt zu finden , sodass Besucher auf Ihrer Webseite landen können Ich hoffe, du verstehst, worum es geht. Jetzt haben wir auch etwas anderes, das als vollständigen Inhalt bezeichnet wird. Das bedeutet, dass ganze Blockbeiträge sichtbar sein werden, was wir natürlich nicht wollen. Behalten wir das einfach als Karten , denn die Karte sieht einzigartig aus. Es unterscheidet sich von Classic, weil Classic was wir im Loop Grid erstellt haben, sehr ähnlich sieht . In Ordnung, hier kannst du sogar die Anzahl der Spalten festlegen. Welche Spalten Sie nun auch festlegen möchten, sie werden nur dann auf den Desktop-Modus angewendet wenn Sie nur eine Spalte für das mobile Tablet-Gerät behalten möchten . Sie können dies sogar ändern , indem Sie einfach auf diesen Tablet-Modus klicken und diesen auf eins einstellen. Wenn ich nach unten scrolle, wirst du feststellen, dass nur eine Spalte angezeigt wird. Wenn ich diese beiden ändere, sagen wir einfach drei, dann sieht das nicht wirklich gut aus. Mal sehen, ob es zu zweit funktioniert. Im Desktop-Modus sieht es gut aus, wenn wir zwei Spalten haben. Mal sehen, was passiert, wenn wir den mobilen Modus haben. Natürlich hätten wir gerne nur eine Karte, da die Breite nicht groß ist , um den gesamten Inhalt unterzubringen. Dann haben Sie auch Option zwei, um alle Beiträge pro Seite anzuzeigen. Darüber haben wir bereits gesprochen. Sie können das Bild zeigen, wenn Sie möchten. Sie können das sogar umschalten Mal sehen, was passiert, wenn Sie Maschinen auswählen. Wenn ich darauf klicke, kannst du sehen, was passiert. Was im Wesentlichen passiert, ist auch der gesamte Bildrand erscheint. Wenn ich das umschalte, werden Sie feststellen, dass zuerst das Bild angezeigt Lassen Sie mich das einfach wieder in den Desktop-Modus bringen Ich klicke erneut auf Maschinen und lass uns sehen, was passiert Sie werden feststellen, dass das gesamte Bild angezeigt wird und die Höhe nicht gleichmäßig angepasst wird. Das ist es, was Maschinen eigentlich bedeuten. Sie können die Bildgröße einstellen, Sie möchten dies auf Miniaturbildgröße setzen, Sie können es tun, Sie möchten es auf Vollbild setzen, dann wäre das gesamte Bild eingestellt Aber belassen wir es einfach bei Medium, das ursprünglich da war Ich glaube, es war mittelgroß. Wenn ich mich nicht irre, denke ich, dass Medium oder Medium Large etwas war , das zuvor angewendet wurde. Also lass uns einfach mittel bleiben. Es gibt auch ein Bildverhältnis. den Schieberegler bewegen, werden Sie feststellen, dass das Bild vergrößert oder verkleinert wird , je nachdem, wo Sie den Cursor oder den Schieberegler platzieren Gut für mich, ich denke, etwa 0,56 würden gut aussehen. Gut, hier sind es 0,56. Sie können sogar zwischen den Titeln hin- und herschalten , wenn Sie den Titel anzeigen möchten Aber natürlich ist es eine gute Praxis, einen Titel hinzuzufügen. Wenn Sie versuchen zu zeigen, worum es in Ihrem Blockbeitrag geht, können Sie den Titel ändern. Du kannst das geschätzte Tag für deinen Titel ändern. Im Idealfall ist es jetzt eine gute Praxis, zwei Tags für den Titel Ihres Blockposts zu verwenden zwei Tags für den Titel Ihres Blockposts Also behalten wir es einfach bei zwei. Wenn Sie einen Auszug hinzufügen möchten, können Sie das tun. Sie haben auch die Länge des Auszugs angegeben. Und das steht natürlich für die Anzahl der Wörter und nicht für die Anzahl der Zeichen Statt 100 Wörtern könnten wir das einfach so belassen wie sagen wir einfach 25 Wörter. Nur die ersten 25 Wörter würden angezeigt. Ordnung. Dann haben Sie sich auch für einen benutzerdefinierten Auszug beworben Wenn Sie also beim Erstellen eines Blockposts Ihren gesamten benutzerdefinierten Auszug erstellt haben , das auch so Die Einstellungen werden auch dort angewendet. Gut, und hier haben Sie Metadaten. In den Metadaten finden Sie nun, dass zunächst Datum und Kommentare dargestellt werden. Stimmt das? Wenn Sie weitere Daten hinzufügen möchten , z. B. wer diesen bestimmten Artikel veröffentlicht hat, zu welchem Zeitpunkt und wann genau wurde er geändert? Wurde das überhaupt aktualisiert oder nicht? Sie können diese Dinge sogar hinzufügen. Sie könnten sogar ein Trennzeichen zwischen diesen Metadaten hinzufügen , indem Sie das Symbol auswählen, Punkt oder vielleicht sogar das Separate platzieren. Sie können dies hinzufügen, dann haben Sie die Option „Weitere Informationen“. Sie können sie umschalten, Sie haben mehr Text gelesen, oder Sie können dies durch etwas anderes ändern Sie haben auch Knöpfe. Wenn du das machst, dann schau, was passiert. Es richtet die Buttons automatisch aus , wenn ihr sie dann in einem neuen Fenster geöffnet habt. Wenn also jemand auf den Link klickt, möchtest du, dass der Block-Beitrag in einem neuen Tab geöffnet wird? Natürlich wollen wir, dass das passiert. Was wird sonst passieren? Ob Google oder eine andere Suchmaschine, wir werden erkennen, dass Besucher, die auf Ihrer Startseite landen, schnell auf eine neue Seite springen. Das erhöht also Ihre Absprungrate und senkt Ihre Indexierung in Bezug auf die Suchrankings Hier haben Sie also auch Kategorien. In diesem Badge hier findest du Kategorien statt Kategorien. Möchtest du, dass es Hashtags sind Hier können Sie also sogar Hashtags oder Kategorien verwenden Hier hast du eine Avatar-Option. Wenn ja, verwenden Sie einen Ihrer Aviatar. Was ich meine, genau hier, Sie werden feststellen, dass dies mein Profil ist, das ist Aviatar Du kannst das Profil bearbeiten. Und Sie können einfach einen beliebigen Avatar auswählen , den Sie hier anzeigen möchten. Und du kannst sie dir einfach anzeigen indem du diesen Teil „ Kommende Abfrage“ auswählst. Du hast verschiedene Optionen, um sie einfach so anzuordnen, wie wir es zuvor im Luke-Grid gesehen haben. Sie können eine Seitennummerierung hinzufügen , wenn Sie möchten. Im Wesentlichen ist das Post-Element dem, was wir in Luke Grid gesehen haben, sehr ähnlich Es ist nicht viel anders aber der einzige Unterschied besteht darin , dass Sie nichts von Grund auf neu erstellen müssen . Es gibt viele Dinge, die vordefiniert sind, und Sie können mit diesen Einstellungen herumspielen , um mit Ihrem Postkartenbereich zu beginnen , der in Ihre Homepage aufgenommen werden soll. 19. Portfolio-Element, um deine Produkte/Blogs zu präsentieren: Ordnung, lassen Sie uns sehen, wie wir das Portfolio-Element nutzen können , das Teil des Element - oder Pro-Plug-ins ist. Genau hier können Sie das Portfolio sehen. Was bedeutet das? Ich habe diese Website genau hier. Sie können sehen, dass hier das Portfolio-Element verwendet wird. Wenn ich auf Mode klicke, wirst du feststellen, dass nur diese erscheint. Wenn ich auf Schmuck klicke, erscheint ein solches Bild. Es gibt einen gewissen Grenzradius. Wenn wir mit der Maus darüber fahren, werden Sie feststellen, dass der Text mit grünem Hintergrund und diese beiden Symbole mit einem gewissen Hover-Effekt angezeigt werden Hier haben wir Filter. Lassen Sie uns versuchen, so etwas zu erstellen Ich werde einen neuen Abschnitt erstellen. Wir werden die Richtung der Flexbox vertikal beibehalten. Fügen wir das Portfolioelement hinzu. Sobald ich das Portfolio-Element hinzufüge, nur die Bilder meiner Beiträge hier in der Abfrage angezeigt. Sie werden feststellen, dass es nach Datum sortiert ist. Was auch immer zuletzt veröffentlicht wurde, wurde hier angezeigt, Reihenfolge nach absteigend Im Layoutbereich würden Sie herausfinden, welche Art von Bildauflösung Sie verwenden möchten Wie viele Beiträge pro Seite möchtest du sehen? Lass uns das einfach bei drei belassen. Wir wollen drei Spalten, das wäre gut. Das Bildverhältnis kann auch angepasst werden. Wenn ich mit der Maus darüber fahre, kannst du feststellen, dass der Titel des Blockposts jetzt im Abfrageteil erscheint, du findest die Quelle Möchtest du den gesamten Beitrag anzeigen? Möchten Sie alle Seiten anzeigen? Möchten Sie Landingpages, manuelle Auswahl, aktuelle Abfragen oder etwas Ähnliches anzeigen manuelle Auswahl, aktuelle Abfragen ? Was passiert, wenn Sie eine aktuelle Abfrage oder ähnliches hinzufügen ? Sie müssen die ID hinzufügen. Wir werden später auf die ID und den Unterricht eingehen. Aber vorerst behalten wir das einfach als Post. Der gesamte Beitrag, den wir haben, alle vorgestellten Bilder für diesen Beitrag werden genau hier angezeigt. Wir können und vielleicht sogar ausschließen, ob wir nur einen Teil des Beitrags zeigen möchten , anstatt den gesamten Inhalt des Beitrags herauszuholen. In Ordnung, hier kannst du sie kaufen oder ausschließen. Vermeiden Sie sogar Duplikate , wenn wir wollen. Genau hier können Sie zur Filterleiste gehen, und wenn Sie die Filter anzeigen möchten, können Sie sie sogar hier anzeigen Wenn Sie auf Anzeigen klicken, haben Sie zwei Möglichkeiten, entweder aus Kategorien oder Tags auszuwählen. Mal sehen, ob wir Kategorien haben. Du wirst Kurse finden. Wir sollten natürlich eine weitere Option in Betracht ziehen , nämlich die Netzmafia Aber lassen Sie uns das einfach behalten, da Sie verschiedene Tags finden werden. Jetzt wird die Option nur angezeigt, weil wir beibehalten haben , dass nur drei Beiträge pro Seite angezeigt werden sollen. Das Gleiche gilt, wir haben Kategorien. Im Idealfall wissen wir, dass wir zwei Kategorien geschaffen haben, oder? Wenn ich zu Layout gehe und alle Beiträge pro Seite anzeige, sagen wir einfach, ich erstelle einfach so viele Beiträge wie aktuell. Ich habe es auf 15 geschafft, aber wir haben hier nur sieben Beiträge. Du wirst zwei Kategorien finden. Behalte einfach die maximale Anzahl, wie viele Seiten du hast. Behalte das einfach so hier. Sie können den Titel ändern, was auch immer Sie haben, ob Sie ihn anzeigen möchten oder nicht. Sie können hier sogar das Artikelverhältnis festlegen. Sie können die Höhe Ihres Bilds anpassen, indem Sie einfach den Cursor platzieren und den Schieberegler bewegen Oder Sie können einfach auf die Aufwärts- und Abwärtspfeiltasten auf Ihrer Tastatur klicken Aufwärts- und Abwärtspfeiltasten auf Ihrer Tastatur Sie können H Two-Tag wählen, wenn Sie möchten. Wenn Sie H two tag wählen, werden Sie feststellen, dass der Titel besser und fetter erscheint Und ja, lass uns zum Stil gehen. Wir können eine Spaltenlücke zwischen ihnen hinzufügen , die gut aussehen würde. Auch ein gewisser Zeilenabstand. Ordnung, 25 oder vielleicht sogar 35 würden sowohl für die Szenarien als auch für Ihre Zeile und Spalte gut aussehen . Fügen wir einen gewissen Grenzradius hinzu. Wenn ich diesen Wert einfach als Randradius beibehalte, werden Sie feststellen, dass Sie nach einem Punkt dem sich die Kanten oder die Ecken abgerundet haben, , an dem sich die Kanten oder die Ecken abgerundet haben, eine Objektüberlagerung Was passiert, wenn Sie die Artikelüberlagerung wählen? Wählen wir Grün, unsere globale Farbe. Hier können Sie die grüne Farbe wählen. Und Sie werden feststellen, dass der Text erscheint und es einen Hintergrund gibt. Aber ich möchte diesbezüglich einige Änderungen vornehmen. Wir könnten diese Farbe etwas transparent machen. Mal sehen, was jetzt passiert, machen wir es ein bisschen undurchsichtig Ich denke, das würde einfach perfekt funktionieren, ich denke viel darüber nach Ja, das sieht fantastisch aus. Lass uns das einfach so lassen, wie es ist, okay? Sie können auch zwischen verschiedenen Farben Ihres Textes und Ihrer Typografie wählen verschiedenen Farben Ihres Textes und Ihrer Typografie Stellen wir die Typografie auf Poppins ein. Ich wähle Poppins aus. Ich hoffe, Sie werden feststellen, dass Poppins Fun Family auf die Text-Fclicon-Filterleiste angewendet wurde die Text-Fclicon-Filterleiste angewendet Sie werden feststellen, dass wir sogar die Farbe der Filterleiste ändern können die Farbe der Filterleiste Sie können sogar eine aktive Farbe hinzufügen, unabhängig davon, was gerade ausgewählt ist und angezeigt wird. Sie könnten sogar die Typografie ändern. Lass uns Poppins wählen. Wir haben Mohnblumen ausgewählt, wir können einen Abstand zwischen ihnen hinzufügen Sie können einen Abstand zwischen all diesen Dingen hinzufügen. Sie können sogar zum Ausmalen wechseln. Mal sehen, was passiert, wenn wir Farbe wählen. Sie werden feststellen, dass sich die Schriftfarbe ändert. Wenn wir „Aktiv“ wählen, werden Sie hier derzeit sehen, dass alle in Ordnung ausgewählt sind. Der Unterschied zwischen dem Abstand zwischen und dem Abstand darin, dass, wenn ich meinen Schieberegler für den Abstand dazwischen bewege, Sie den Abstand zwischen meiner Filterleiste feststellen. Änderungen. Wenn ich den Abstand zwischen dieser Filterleiste und den Elementen, die ich für mein Portfolio habe , ändere, wird er größer oder kleiner. Lassen Sie uns das einfach bei 35 belassen. Diese Konsistenz wird auf dieser Seite beibehalten. Hier haben Sie den Abschnitt. Anstatt ein Feld auszuwählen, können Sie es sogar in voller Breite angeben , sodass es von einem Ende zum anderen erscheint. Wenn Sie dem eine gewisse Polsterung geben möchten , können Sie das sogar tun Versuchen wir, etwas Polsterung von links und rechts hinzuzufügen. Wenn ich etwas Abstand von links hinzufüge, werden Sie feststellen, dass der Inhalt zwar angezeigt wird, aber etwas Platz vorhanden ist Lassen Sie uns auch 30 von rechts hinzufügen, Sie werden einen gewissen Abstand finden Okay, das haben wir bisher gemacht. Jetzt können Sie dem gesamten Abschnitt sogar eine Hintergrundfarbe hinzufügen , indem Sie einfach auf diesen Abschnitt klicken. Wenn wir zum Stiltyp gehen, könnten wir zum Hintergrund-Overlay Konzentrieren wir uns nun auf die Hintergrundüberlagerung, die wir hier noch nicht behandelt haben. Wenn ich den Hintergrundtyp als klassisch für die Hintergrundüberlagerung wähle , kann ich ein Bild auswählen Gehen wir einfach davon aus, dass ich dieses bestimmte Bild auswähle. In Ordnung. Jetzt habe ich dieses Bild in meinem Hintergrund. Jetzt können Sie zunächst sehen, dass die Farbe nicht ausgewählt ist. Aber trotzdem erscheint das Bild, das Bild wirkt irgendwie sehr transparent. Nun, wie ist das passiert? Gehen Sie einfach zu den CSS-Filtern und stellen Sie fest, dass die Unschärfe auf Null gesetzt ist Helligkeit ist all diese Dinge. Wenn Sie jedoch die Sättigung verringern, werden Sie feststellen, dass das gesamte Bild , das im Hintergrund arbeitet, schwarz-weiß ist Etwas Ähnliches, das genau hier erreicht wird. Sie können sehen, dass das Bild im Hintergrund einen schwarzen, weißen Farbton hat. Sie können das tun, indem Sie auf CSS-Filter klicken und die Sättigung auf Null reduzieren. Alles klar? Und das passiert nur, wenn du als Hintergrund-Overlay ausgewählt hast. Alles klar? Es wird nicht passieren, wenn Sie Ihren Hintergrund ausgewählt haben , einfacher Hintergrund. Sie werden auch feststellen, dass es transparent ist. Wenn Sie sich dafür entscheiden , dass es zu 100% undurchsichtig ist, dann werden Sie genau das finden Okay, lassen wir das einfach fallen. 2.6 0.6 würde gut aussehen. Okay, du hast den Mischmodus. Verschiedene Arten von Mischmodi. Lassen Sie uns hier nicht darauf eingehen. In Ihrer Position würden Sie verschiedene Positionen finden, die wir behandelt haben. Verbundenheit ist etwas, das wir nicht angesprochen haben. Bilifolt wäre auf Scrollen oder Standard eingestellt . Mal sehen, was passiert, wenn wir Fixed wählen. Wenn ich wähle, wenn ich scrolle, kannst du sehen, dass sich das Bild auch ändert. Die Bildrichtung in Bezug auf die Y-Achse ändert sich. Im Wesentlichen scrollen wir das Bild auch im Hintergrund Das passiert genau hier für unser, für unser Portfolio Ich gehe zur Filterleiste. Ich werde die Typografie etwas fetter machen. Machen wir das fett, damit es genau hier sichtbar ist. Wir könnten sogar die Farbe ändern, wenn du willst, aber ich werde sie nicht anfassen. Artikelüberlagerung: Hier finden Sie verschiedene Dinge, die wir behandelt haben, und verschiedene Artikel Außerdem hoffe ich, dass ihr versteht, wie wir das Portfolio-Element verwenden und wie wir das Hintergrund-Overlay nutzen können , indem wir einige CSS-Filter hinzufügen, die Deckkraft ändern und auch den Anhang des Hintergrund-Overlays ändern Anhang des 20. Preislistenelement - Zeige deine Servicegebühren an: Lassen Sie mich Ihnen ein weiteres Element zeigen, nämlich die Preisliste. Ich werde hier einen neuen Abschnitt hinzufügen. Ich könnte die Flexbox mit einer vertikalen Richtung auswählen. Später können wir weitere Container hinzufügen. Ich füge das Element gleich hier in die Preisliste ein. Sobald ich das fallen lasse, wirst du feststellen, dass wir einen Titel haben, wir haben eine Beschreibung, dann hast du ein paar Punkte und dann hast du den Preis. Wann könnte sich genau dieses Element als nützlich erweisen? Nehmen wir an, Sie erstellen eine Serviceseite oder vielleicht sogar eine ähnliche Website für ein Restaurant oder Café der Sie nur die Preisliste für jedes einzelne Lebensmittel anzeigen. Sie können hier also einfach auf den Hintergrund klicken. Ich habe den Hintergrund des gesamten Containers, der Flexbox. Ich gehe zum Stil. Und was ich für den Hintergrund tun kann, ich kann ein Bild auswählen, also klicke ich einfach auf Klassisches Bild. Ich habe ein Kaffeebild hochgeladen. Was wir genau versuchen zu bauen, ist ein Bereich für den Preis all der verschiedenen Kaffeesorten, die dieses Café serviert. Hier hast du das Bild Wir möchten aber auch eine Art Hintergrund-Overlay hinzufügen Ordnung, hier in der Hintergrundüberlagerung können wir einen Verlaufseffekt auswählen, können wir einen Verlaufseffekt auswählen obwohl Sie ein Bild im Hintergrund haben Sie können Ihrem Bild sogar einen Verlaufsfarbeffekt als Ergänzung hinzufügen Ihrem Bild sogar einen Verlaufsfarbeffekt als Ergänzung Hier haben Sie eine Farbe, die Primärfarbe und die Sekundärfarbe. Lassen Sie uns die Primärfarbe so belassen, dass sie einem dunkelroten Farbton ähnelt. Also lassen wir es einfach etwas wie einen dunklen bräunlichen Farbton beibehalten einen dunklen bräunlichen Farbton Alles klar? Und bei der zweiten Farbe bleibt es schwarz, okay. Und wir ändern die Position der ersten Farbe auf etwa 75. Okay, von oben nach unten werden Sie feststellen, dass die Farbe etwas dunkler erscheint, okay. Sie werden auch die Deckkraft des Hintergrunds ändern. Wenn ich meinen Cursor oder meinen Slider nach rechts bewege, wirst du feststellen, dass das Bild immer unschärfer wird Oder es gibt einen dunkleren Farbverlauf, eine Art Farbton, der sich über dem Bild bewegt Der Text wird gut sichtbar. Jetzt kann ich auf diese spezielle Preisliste klicken. Ich kann auf Stil klicken. Ich kann zur Farbe meines Textes gehen und diese Farbe auf Weiß ändern. Jetzt werden Sie feststellen, dass wir den Titel und den Preis genau hier haben. Ich kann das auf Weiß ändern, ich habe eine Beschreibung, sogar ich kann das auf Weiß ändern. Jetzt finden Sie verschiedene Arten von Trennzeichen zwischen dem Titel und der Preisliste Für jeden Artikel, den wir haben, ist es gepunktet. Wir können das ändern in, wir können es auf doppelt ändern, also gibt es doppelte Linien. Und Sie können das sogar als falsch festlegen, aber wir möchten es so belassen, dass es punktiert bleibt Sie können es sogar als solide belassen, aber solide würde nicht so gut aussehen Du hast auch Gewicht für diese Punkte. Sie können den Schieberegler bewegen, um zu sehen, was für Sie funktioniert. Sie können sogar Abstände hinzufügen, sodass Sie feststellen können, dass, je weiter Sie den Slider bewegen, genau dort, wo er links vom Titel und vom Preis In Ordnung, hier, lassen Sie uns einfach den Abstand 20 beibehalten. Du kannst sogar die Farbe deiner Punkte ändern , dann hast du das Trennzeichen, dann hast du das Bild. Jetzt kannst du diesem Bild ein Bild hinzufügen. Was werden wir dafür tun? Wir werden gleich hier im Inhalt zum Inhalt gehen. Sie können jede einzelne Artikelliste erweitern. Sie können den Preis festlegen. Sie können den Namen des Titels ändern. Geben wir das als Espresso. Wir behalten einfach die Beschreibung. Was auch immer es ist, wir können das Bild in dieses bestimmte Symbol ändern . Ordnung, dann kann ich dasselbe Bild auch für die anderen Artikel mitbringen . Ich kann es wie Fracino machen. In Ordnung, dann haben wir heiße Schokolade. Behalten wir das einfach als heiße Schokolade. In Ordnung, lassen Sie uns den Abstand für unseren Separator erweitern. Ich denke, etwa 15 Pixel würden gut aussehen. Fein. Hier hast du jetzt ein Bild für jedes einzelne Bild. Okay, zuerst müssen wir auch ein Bild für die heiße Schokolade hinzufügen . Geben wir dieses Bild. In Ordnung, und so würde unsere Speisekarte gut aussehen. Sie können das Tag ändern , wenn Sie es als H drei behalten möchten. Sie werden feststellen, dass der Titel fett erscheint und dass er in großer Größe erscheint. Sie können die Farbe dieses H-Two-Tags ändern, wenn Sie möchten , indem Sie einfach das gewünschte Tag auswählen. Für das Span-Tag wird es auf Weiß gesetzt. Wenn Sie ein H zwei oder ein H drei oder andere Tags möchten, müssen Sie die Einstellungen dafür gleich hier ändern. Sie haben auch eine Beschreibung , die auf Tag gesetzt ist. Also lassen wir es einfach so wie es ist. Wir werden zum Stil übergehen, diesen Teil haben wir behandelt. Aber wenn Sie zum Bild gehen, können Sie die Bildgröße ändern. Derzeit ist es auf Thumbnail eingestellt. Sie können das ändern. Wenn Sie möchten, können Sie sogar einen Randradius hinzufügen, den Abstand um das Bild herum sowie den Titel und die Beschreibung, sodass Sie auch die verschiedenen Elemente umgehen können die Beschreibung, sodass Sie auch die verschiedenen Elemente umgehen können. Wie möchten Sie diese verschiedenen Elemente ausrichten? Möchten Sie sie vertikal ausrichten? Möchten Sie den Inhalt, den Sie haben, in Bezug auf das Bild in der Mitte, nach oben oder zum Ende ausrichten haben, in Bezug auf das Bild in der Mitte, ? Ich denke, die Mitte würde gut funktionieren. Lass es uns einfach so belassen. Wir können eine Lücke hinzufügen. Lassen Sie uns das einfach so behalten, denn 2020 würde gut aussehen. Auch hier im Vorhinein können Sie eine Randpolsterung und andere Dinge hinzufügen Wir können ein Duplikat davon machen, wenn wir wollen. Wenn ich ein Duplikat davon mache, können Sie sehen, was passiert. Es erscheint direkt darunter, einfach weil wir den gesamten Containerbereich, die gesamte Flexbox-Richtung, auf vertikal eingestellt haben die gesamte Flexbox-Richtung, auf vertikal Wenn ich das Layout in die horizontale Richtung ändere, werden Sie feststellen, dass es oben so aussieht Wir können sogar eine Trennlinie hinzufügen Lassen Sie mich einen Teiler genau hier oben platzieren. Oder weißt du was, ich könnte sogar einen Behälter hinzufügen. Suchen wir nach Contain. In Ordnung, ich kann oben einen Container hinzufügen. Nun, diese Container-Richtung. Lassen Sie mich zunächst die Container-Einstellungen bearbeiten. Wir werden das auf vertikal ändern. Ordnung, in diesen Behälter legen wir unsere Preisliste und diese Preisliste, okay. Jetzt möchten wir oben einen weiteren Container hinzufügen. Gut, also fügen wir hier oben einen Container hinzu. In diesem Container werden wir unseren Teiler hinzufügen. Dieser Teiler, wir haben unseren Titel, wir können ihn hinzufügen, lassen wir das einfach als Mittellinie Nun, so etwas wie ein Menü. Also gut, hier kannst du zwischen den verschiedenen Tags wechseln , die du willst. Ich behalte das einfach als Pan-Tag. Ich mache das so solide wie möglich. Die Breite ist in Ordnung. Wir gehen zur Farbe des Teilers und setzen diesen auf Weiß Also können wir auch unseren Text ändern, ich kann zur Typografie übergehen, ich kann das zu Poppins ändern Ich kann meinen Text sogar vergrößern. Für das Menü hier würde das aussehen, 50 Pixel würden einfach toll aussehen, gut. Nun für die anderen Container, die wir haben, wo wir diese beiden Preislisten haben, können wir die Container-Einstellungen auf horizontal ändern, und das ist unser Menü, das wieder wie die Preisliste aussehen würde wieder wie die Preisliste Wir können zur Typografie übergehen und die Typografie Poppins umstellen Hier kann ich Poppins für den Titel, Poppins für den Preis und auch Poppins für die Beschreibung auswählen Poppins für den Preis und auch Poppins für die Beschreibung Ich kann dieselben Einstellungen auch für den anderen speichern, indem ich einfach den Stil kopiere und einfüge Sie können sehen, dass unser Menü so aussehen würde , wenn wir das Preislistenelement verwenden 21. Countdown-Element - Führe einen zeitlich begrenzten Verkauf / eine Veranstaltung durch: Ordnung, lass uns sehen. Ein weiteres Element, übrigens, in dieser Mine selbst, hatten wir das Kaffeebild, aber ich habe gerade den Hintergrund entfernt, indem die G-Website entfernt habe. Und da drüben habe ich gerade mein Bild hochgeladen. Und ich verwende dieses Bild für beide Preislistenelemente. Also werde ich direkt unter diesem Teil einen neuen Abschnitt hinzufügen. Behalten wir die Flexbox in fünfter vertikaler Richtung bei. Jetzt werde ich unser Countdown-Countdown-Element verwenden unser Countdown-Countdown-Element Wann kann sich das als nützlich erweisen? Offensichtlich, wenn wir versuchen eine zeitlich begrenzte Verkaufsseite für Werbeaktionen zu erstellen. Oder Sie versuchen, ein Webinar zu veranstalten, das in etwa einer Woche veranstaltet wird. Oder Sie veranstalten tatsächlich dort einen Verkauf Sie können dieses Countdown-Element zuerst verwenden Geben wir diesem Container hier in der Hintergrund-Overlay eine Art Hintergrundbild Ich wähle Classic Select-Bild als dieses aus. Sobald wir darauf klicken, werden wir feststellen, dass die Deckkraft auf 2,5 eingestellt ist. Dadurch werden wir feststellen, dass die Deckkraft auf 2,5 eingestellt ist wird dieser Wert um etwa 2,9 erhöht Dieses Bild für den gesamten Container nehmen wir tatsächlich als Breite als 100 H an. Lassen Sie uns das als 100 H ermitteln, Sie würden auch feststellen, dass das Bild wiederholt wird Gehen wir zum Hintergrund. Wir machen das so, als würde es sich nicht wiederholen. Wenn wir das so machen, dass es sich nicht wiederholt, wirst du feststellen, dass das Bild genau hier endet. Stattdessen machen wir die Displaygröße so, wie sie aussieht, und sie vergrößert sich entsprechend der erhöhten Breite unseres Containers von selbst entsprechend der erhöhten Breite unseres Containers von Gut, jetzt platzieren wir darin platzieren wir Lassen Sie uns versuchen, direkt darunter ein Bild hinzuzufügen , bei dem es sich um dieses große Angebot handeln würde. Wir möchten auch unser Countdown-Element hinzufügen. Lassen Sie uns unser Countdown-Element hierher ziehen und dort ablegen. Ich werde es platzieren, aber lassen Sie mich zuerst sehen, wo genau für dieses Bild, das genau hier in der Struktur, in diesem Container, platziert ist, wir das Bild haben Idealerweise sollte der Container auch das Hinzufügen eines Countdowns ermöglichen auch das Hinzufügen eines Countdowns Ja, jetzt können wir unseren Countdown hinzufügen. Hier können Sie feststellen, dass der Countdown ungefähr so aussieht Im Inhaltsteil finden Sie nun das Fälligkeitsdatum oder den Evergreen-Timer, was im Grunde bedeutet, dass der Timer nach einer bestimmten Zeit automatisch aktualisiert wird nach einer bestimmten Zeit automatisch aktualisiert Wenn Sie ein Fälligkeitsdatum wünschen, bedeutet das, dass der Verkauf nach einem bestimmten Zeitraum enden sollte nach einem bestimmten Zeitraum enden Sie können das Datum festlegen, indem Sie einfach auf diese Registerkarte gehen und auf Wann der Verkauf tatsächlich enden soll, klicken. Im Moment wähle ich einfach Heute aus. Heute würde der Verkauf in nur wenigen Stunden enden. Ich kann die Uhrzeit einstellen. Außerdem haben wir hier den Kalender , damit wir das Datum, den Monat und das Jahr einstellen können. Hier kann ich stattdessen die Zeit einstellen, ich kann das auf etwa 10 Minuten machen. Derzeit ist es 44 Uhr 18:00 Uhr, also machen wir es auf 16:28 Uhr. Alles klar Hier findest du übrigens, okay, das Timing ist derzeit auf UTC eingestellt Sie werden feststellen, dass die Zeit auf UTC eingestellt ist. Wenn Sie derzeit möchten, dass das Timing Ihrer Zeitzone entspricht, können wir einfach zu Ihrem Dashboard zurückkehren , aber auf Dashboard klicken. Lass uns gleich hier draufklicken. Wir gehen zum Teil Einstellungen. Genau hier in den Einstellungen finden Sie den Teil Zeitzone hier. Wählen Sie einfach die Zeitzone aus, in der Sie sich befinden. Ich bin in Indien. Meine Zeitzone wäre die erste, lass mich hier in Asien nach meinem Ort suchen. Wo würde ich meinen Platz finden? Indien. Kalkutta ist eine Stadt in Indien. Ich kann das einfach auswählen und das wird meine Zeitzone sein. Lassen Sie mich das einfach speichern , indem ich nach unten scrolle und auf die Schaltfläche „Sicher“ klicke Ich bearbeite das mit Elementor, und wenn ich nach unten scrolle, wirst du feststellen, dass der Timer tatsächlich nur für 8 Minuten läuft Okay, so kannst du den Timer laufen lassen. Nun, zurück zu diesem Teil, es gibt verschiedene Ansichtsoptionen. Wenn Sie möchten, dass dies mehr in einem Block angezeigt wird, wird es so angezeigt. Sie können sogar Tage vernachlässigen wenn es nur eine Frage von ein paar Stunden ist, dann können Sie Tage einfach ausschalten Hier haben Sie ein benutzerdefiniertes Etikett, wenn Sie möchten, Sie können das Etikett sogar ausblenden, aber das würde keinen Sinn machen Es ist wichtig , ein Etikett hinzuzufügen. Es gibt auch ein benutzerdefiniertes Etikett, wenn Sie Stunden, Minuten oder Sekunden ändern möchten. Also, aber wir lassen es einfach so wie es ist. Und welche anderen Aktionen sollte es nach Ablauf der Zeit ausführen? Das heißt, was würde nach sieben bis 8 Minuten passieren? Wir haben also nur wenige Möglichkeiten. Entweder können wir unsere Benutzer auf eine andere Seite weiterleiten oder wir können diesen Timer ausblenden. Oder wir können eine Nachricht anzeigen, damit wir eine Nachricht anzeigen können. So etwas wie der Verkaufszeitraum ist abgelaufen. Ordnung, nach Ablauf des Zeitraums wird diese Meldung angezeigt, wird diese Meldung angezeigt, gefolgt von einem Ausrufezeichen Wenn Sie zum Style-Teil gehen, finden Sie verschiedene Optionen. Hier haben Sie die Breite des Containers. Sie können feststellen, dass die Breite des Containers ungefähr die gesamte Breite beträgt, 100% Sie können die Hintergrundfarbe ändern, derzeit ist sie auf Keine eingestellt. Sie können das in etwas Ähnliches ändern. Jeder Block wird eine Art Blocklayout für Stunden, Minuten, Sekunden haben. Jeder einzelne wird seinen Block haben. Wenn Sie die Ansicht als Block haben , erscheint der Text, der Stunden, Minuten oder Sekunden ist , unten. Wenn Sie in der Warteschlange stehen, erscheint er direkt unter Ihrer Zeit und direkt darunter. Ordnung. Und sie werden eng und kompakt zueinander erscheinen. Wenn du das als Block machst, wird es so gut aussehen. Sie können sogar das Design ändern. Wenn Sie einen Rahmen hinzufügen möchten , den Sie hinzufügen können, ist er derzeit auf Standard eingestellt, das heißt, es gibt keinen Rahmen. Sie können dies in eine durchgehende, doppelt gepunktete Rille ändern. Schauen wir uns an, wie Groove aussieht , weil Sie ihn noch nie gesehen Es ist Solid sehr ähnlich, aber es kann hier und da ein paar Unterschiede geben. Mal sehen, was passiert, wenn ich diesen Rand auswähle und die Rahmenbreite auf etwa, sagen wir 20, erhöhe . So sieht es aus Es ist wie ein Rillenrand mit Rahmeneffekt. Wenn ich das auf durchgehend ändere, wäre meine Rahmenbreite ungefähr so. Aber lassen Sie mich es einfach wieder auf zwei zurückbringen , denn das wäre meiner Meinung nach ausreichend, wir können den Randradius vergrößern , um ihn kreisförmig zu machen, gut. Um das Ganze kreisförmig zu machen, müssen wir es zuerst wie in einer Linie machen. Nachdem wir das in die Reihe gebracht haben, würde unser Inhalt so aussehen. Ordnung, jetzt habt ihr auch einen gewissen Abstand zwischen allen drei Blöcken oder Werten und Sekunden. In Ordnung, hier kannst du etwas Polsterung hinzufügen. Was passiert, wenn Sie die Polsterung erhöhen? Der Abstand um den Inhalt herum wird größer. Offensichtlich kennen Sie sich mit diesem Teil aus. Wir können die Polsterung erhöhen. Sie können den Abstand innerhalb des Inhalts verringern , wenn Sie möchten Sie können die Farbe des Inhalts ändern. Sie können die Topographie auf Poppins, sagen wir Poppins, ändern auf Poppins, sagen wir Poppins, Was passiert auf dem Etikett? Wir können sogar die Farbe des Etiketts ändern. Wir setzen dies auf die Standardeinstellung, die weiß ist. Ändern Sie die Typografie erneut auf Pops. Wenn Sie das fett formatieren möchten, können Sie das sogar tun. Sie können einen Textstrich hinzufügen. Sie können eine Nachricht hinzufügen, wenn Sie möchten. Sie können die Typografie der Nachricht ändern. Text. Die Farbe der Nachricht , die nach dem Ende des Countdowns angezeigt wird, wird in der Mitte mit weißer Farbe und knallender Schrift angezeigt in der Mitte mit weißer Farbe und knallender Schrift Und wir wollen eine Schriftstärke haben , die fett wäre, 700 fett, richtig? Lassen Sie uns auch die Größe auf etwas um die 35 erhöhen, 30 würde meiner Meinung nach gut aussehen. Ja. Nun, was passiert innerhalb der ganzen Sache selbst, wenn wir hier zu weit gehen? Sie finden wieder alle Standardoptionen , die wir für alle anderen Elemente sehen können. Ich hoffe, du verstehst, was es heißt, verschiedene Dinge zu verwenden. Lassen Sie mich die Zeit einfach auf etwa eine Minute reduzieren . Nur ein paar Sekunden. Und ich kann das einfach veröffentlichen, um zu sehen, welche Nachricht angezeigt wird. Wenn ich hier nach unten scrolle, wirst du feststellen, dass der Verkaufszeitraum abgelaufen ist. In Ordnung, aber jetzt haben wir hier etwas Abstand. Also, warum erscheint das? Lass mich einfach zurückgehen. Genau hier haben wir den gesamten Container. Dieser Container, wir werden ihn stylen. Wir legen den Hintergrund fest. Okay, Container. Wir werden unser Hintergrund-Overlay haben. Wir wollen das, keine Wiederholung. Wir machen daraus ein Cover. Okay. Das Cover wird das Ganze mit Fine belegen. Sobald wir veröffentlicht haben, laden wir die Seite gleich hier neu. Wenn ich hier nach unten scrolle, kannst du feststellen, dass die gesamte Breite gut aufgenommen wird. Sie können sehen, dass der Verkaufszeitraum abgelaufen ist. Ordnung, es ging also nur darum, das Countdown-Element zu verwenden 22. Blockquote-Element - Füge Zitate/Tweets in deine Blog-Seite ein: In Ordnung, sehen wir uns hier ein anderes Element an. Ich werde eine Flexbox erstellen. Ich werde ein neues Element hinzufügen. Dieses Element ist Blockcode. Anstatt hier zu suchen, haben wir Blockcode. Ich kann es sogar eingeben, indem ich nach einem Element suche. Und hier haben wir den Blockcode. Nun, wie kann Blockcode uns helfen und was genau macht er? Hier? Wie Sie sehen können, handelt es sich im Grunde genommen um Teile, die von jemandem gegeben und mit dem Tweet verknüpft sind. Gehen wir einfach davon aus, dass Sie Ihren Blockbeitrag schreiben. Und Sie als Autor haben auf Ihrer Twitter-Plattform einen Tweet verfasst. Das können Sie hier einbeziehen. Es gibt verschiedene Skins für jeden einzelnen, was sagst du? Dieser Blockcode. Sie können den Inhalt ändern. Sie können den Namen des Autors ändern. Sie können die Twitter-Schaltfläche hinzufügen oder entfernen, wenn Sie möchten. Wenn du den Tweet-Button einfügst, hast du verschiedene Möglichkeiten, entweder ein Symbol oder nur Text oder sowohl Symbol als auch Text einzufügen , entweder ein Symbol oder nur Text . Sie können die Farbe von Twitter ändern, aber ich denke, ich möchte dies hier als Twitter-Logofarbe beibehalten . Sie können dies auf Bubble ändern. Bubble ist im Grunde wie eine Chat-Box-Sache. Lass mich das einfach veröffentlichen und dir zeigen, wie es hier auf meiner Seite aussehen würde. Sobald ich hier nach unten scrolle, würdest du diese Blase finden Hier siehst du einen kleinen Pfeil. Das ist es, was eine Blase ist. Sie können dies sogar in einen Link ändern. Das heißt, wenn jemand darauf klickt, wird er zu Ihrem Tweet weitergeleitet. Lassen Sie uns das hier einfach klassisch belassen. Sie haben das Etikett , das Sie verwenden können. Sie können Ihren Benutzernamen hinzufügen, sagen wir einfach, das ist ein Benutzername, den ich behalten werde. Immer wenn jemand darauf klickt, wird er auf Ihre Seite weitergeleitet. Lassen Sie mich nur sehen, ob sich die Änderungen widerspiegeln. Warte eine Sekunde. Nur eine Sekunde. Ich werde diesen Teil einfach ändern. Ich scrolle nach unten, wo ich einfach auf den Tweet klicken kann. Wenn ich hier darauf klicke, würdest du diesen Tweet von dieser Twitter-Plattform oder diesem Twitter-Nutzer finden . In Ordnung, lassen Sie uns das überqueren. Und hier habe ich verschiedene Optionen, um auszuwählen , wo genau ich diese aktuelle Seite anvisieren möchte , nicht benutzerdefiniert. Und Sie können nur eine Option festlegen Sie im Inhalt haben , nämlich Blockcode. zum Abschnitt Stil gehen, können Sie die Textfarbe ändern. Sie können die Typografie ändern. Sie können die Lücke zwischen dem Namen des Autors und dem Tweet, den er verfasst hat, ändern Namen des Autors und dem Tweet, den er verfasst hat, Sie können die Farbe der Typografie ändern. Sie können mit der Größe der Schaltfläche, dem Wort, dem Radius und der Farbe herumspielen , eine benutzerdefinierte Farbe hinzufügen oder Sie können bei der offiziellen Twitter-Farbe bleiben Sie können hier mit dem Rand der Mitte herumspielen . Sie könnten eine Rahmenbreite hinzufügen. Sie könnten etwas hinzufügen, eine Lücke. Du könntest sogar etwas vertikale Polsterung und so hinzufügen. Lassen Sie mich es einfach auf die Standardeinstellung zurücksetzen. Hier hast du den Rand wie die Haut. Sie können dies sogar in ein Zitat ändern. Sobald ich ein Zitat gemacht habe, würden Sie der Regel das Symbol mit doppelten Anführungszeichen sehen, aber es ist nicht sichtbar. Also müssen wir zum Stil übergehen. Wir müssen gleich hier zum Beschichten gehen. Wir können Schwarz wählen. Wenn ich das hier schwarz mache, wirst du es finden. Dieses Symbol erscheint. Sie können es vergrößern oder verkleinern. Sie können eine Lücke hinzufügen, wenn Sie möchten. Sie können mit dem Knopf herumspielen , den wir zuvor gesehen haben. Wir können auch andere Optionen wie Box-Code haben. Wir können einen sauberen Weg haben , wo ich meiner Meinung nach ein Zitat verwenden möchte Es gibt eine Reihe verschiedener Optionen, mit denen Sie herumspielen können. Sie können eine Linie zentrieren, Sie können eine Linie schreiben , Sie können eine Linie links lassen. Und es gibt noch viele andere Dinge. Ich denke, das könnte nützlich sein, wenn Sie Testimonials hinzufügen, Sie versuchen, Feedback hinzuzufügen, den genauen Mantel, den Ihr Kunde oder Ihre Kunden für Ihr Produkt oder Ihre Dienstleistung hinterlassen haben, die Sie ihnen angeboten haben Oder Sie könnten einfach einen Tweet des Autors des Blockposts hinterlassen einen Tweet des Autors des Blockposts 23. Testimonial-Karussell-Element - Baue Vertrauen auf, indem du Kunden-/Kundenbewertungen hinzufügst: Lassen Sie mich Ihnen ein weiteres Element zeigen, nämlich Testimonials Lassen Sie mich einfach nach Zeugenaussagen suchen. Das werden wir genau hier sehen. Ich werde einen neuen Abschnitt hinzufügen, Flexbox, vertikale Richtung. Wenn wir nun zum Stilbereich gehen, finden Sie eine weitere Option, nämlich den Shaped Divider , den wir noch nicht verwendet Versuchen wir es hier zu verwenden. Sie haben oben und unten von oben, ich hätte gerne eine geformte Trennwand Hier haben Sie ein geteiltes Pfeilbuch und viele verschiedene Optionen zur Auswahl Lassen Sie uns versuchen, Split zu nutzen. Ich kann die Farbe Grün wählen. Mal sehen, wie es aussieht. So kannst du sehen, wie es sich spaltet. Wenn ich möchte, dass es von unten nach unten geht, teilt es sich. Ich kann die Breite ändern. ich die Breite vergrößere, kannst du auch sehen, dass die Höhe und all diese Dinge zunehmen. Ich kann mich ändern, sagen wir neigen. Was passiert, wenn ich das auf Tilt ändere? Sie können sehen, dass die Höhe ungefähr so sein könnte. Ordnung, lassen Sie mich auch einfach die Größe des gesamten Containers erhöhen. Volle Breite und Höhe entsprechen der gesamten Höhe. 100 ist das, was wir wählen werden , nehmen die gesamte Höhe ein. Um auf den Stil zurückzukommen, bei dem wir unseren Formteiler haben Wir würden diese Höhe auf etwa 500 setzen . Ungefähr so viel Gut, lass uns runtergehen. Oder wir könnten das erhöhen. Das heißt nicht, dass es bei 500 aufhört. Wenn Sie den Schieberegler zur äußersten rechten Seite bewegen und den Wert fünf sehen, bedeutet das nicht, dass er bei 500 stoppt. Wenn ich etwas wie 800 hinzufüge, kannst du sehen, dass es immer noch geht. Es spielt keine Rolle. Sie können es einfach erhöhen, oder vielleicht ist es nicht gut genug, dies auf 65650 zu erhöhen Nehmen wir an, 75750 ist genau das, wonach wir suchen sollten Ordnung, Sie können genau sehen , dass unser ganzer Container in zwei Teile geteilt wurde Dieses Dreieck links unten links hat eine weiße Farbe. Und dann haben wir das obere rechte Dreieck, das eine grüne Farbe hat. Ordnung, lassen Sie uns versuchen unser Testimonial-Karussell hier hinzuzufügen Ich werde es genau hier in der Mitte platzieren. Versuchen wir nun, das Artikelzentrum anzuordnen Es erscheint genau hier. Was ich stattdessen tun werde, ist, dass anstelle dieses Dings der Formteiler genau hier erscheint der Formteiler genau hier Ich kann den Winkel ändern. Ich kann das einfach umdrehen, sodass es genau hier erscheint. Ich könnte sogar die Höhe verringern. Lass uns eine 400 oder so draus machen. Ich denke, 380 würden gut aussehen. Lassen Sie uns das bei 380 belassen, gut. Nun zu diesem Testimonial-Karussell Natürlich wollen wir die Bewertungen, die positiven Bewertungen unserer Kunden oder Kunden, die unsere Dienstleistungen oder unsere Produkte gekauft haben, vorstellen die positiven Bewertungen unserer Kunden oder Kunden, die unsere Dienstleistungen oder unsere Produkte gekauft haben, unsere Wir möchten dieses erfreuliche Feedback unseren neuen Interessenten präsentieren erfreuliche Feedback unseren neuen Interessenten Hier können Sie verschiedene Folien sehen. Es gleitet automatisch. Sie können den Zeitpunkt ändern, und ich zeige Ihnen jeden einzelnen von ihnen. Hier hast du Punkt eins. Sie können den Inhalt ändern. Sie können sogar jedem einzelnen Bilder hinzufügen. Lass mich ein paar Bilder hinzufügen. Wir haben nur wenige. Wir können sie dem Kreis-Avatar hinzufügen. Wir geben diesen Typen namens John Doe. Die zweite, wir behalten diese Dame, sie sieht sehr glücklich aus, also geben wir ihren Namen. Emily. Emily Blunt Sie ist CMO eines Unternehmens. Geben wir dem einfach einen CMO. Lass uns noch ein Bild hinzufügen. Ich werde den Kerl behalten und ihm den Namen Will, Will Smith geben. Okay, es sieht aus wie Will Smith. Also werde ich das als Will Smith behalten. Er ist CEO eines Unternehmens. CEO, CTO. Und CMO sind die drei Titel, die wir haben. Oder Sie könnten dies sogar in etwas wie Founder ändern . In Ordnung. Sie können sogar Artikel hinzufügen, Sie können ein Duplikat davon erstellen. Ich muss nicht darüber unterrichten. Auch hier können Sie den Hauttyp, den Text, den Sie haben, die Bewertung, die Sie im Lorimpsu-Text haben, ändern Text, den Sie haben, die Bewertung, die Sie im Lorimpsu-Text haben Sie können das von Standard auf Bubble ändern. Wenn Sie dies in Bubble ändern, werden Sie feststellen, dass dies wie in einem Chat-Box-Format angezeigt wird . Ordnung. Aber das ist kein kleiner Pfeil, einfach weil die Hintergrundfarbe, die wir haben, nicht grau ist. Stellen wir das auf ein etwas dunkleres Grau ein. Ungefähr diese Farbe würde gut aussehen. Jetzt können Sie sehen, dass das Chat-Box-Symbol einwandfrei aussieht. Kehren wir zu unserem Testimonial zurück. Sie haben ein anderes Layout. Entweder können Sie Ihr Bild so einstellen, dass es dem Text der Person und ihrer Position entspricht , oder Sie können sie so stapeln , dass das Bild oben erscheint und der Name und die Position dieser Person nach unten gehen. Oder Sie können das Bild oben beibehalten , was im Grunde bedeutet, dass alle Informationen über die Person oben und die Bewertung des Feedbacks unten angezeigt werden. Wenn ich das als Bild links mache, wird es so aussehen. Wenn ich das als Bild rechts mache, wird es so aussehen. Lassen Sie uns das als Bild links behalten, weil es gut aussieht. Hier können Sie die Ausrichtung ändern. Wenn ich daraus eine linke Zeile mache, werden Sie feststellen, dass das Feedback zu einer linken Zeile wird. Ob Mittellinie oder rechte Linie. Bei der Änderung des Textbuches behalten wir die Mittellinie bei Wir haben auch Folien pro Ansicht. Wenn ich drei Folien pro Ansicht hinzufügen kann, wird sie so aussehen. Wir können zwei machen, wir können sogar zehn hinzufügen und so weiter. Lassen Sie uns einfach ein Feedback pro Folie behalten. Wir haben Folien zum Scrollen. Wie viele Folien wollen wir zeigen? Abhängig davon kannst du es zeigen. Jetzt kannst du sogar die Breite ändern. Sie können den Text kompakt gestalten, indem Sie die Breite des Feedbacks verringern. Oder Sie könnten dies sogar auf die Standardeinstellung setzen. in den Abschnitt Zusätzliche Abschnitte und zusätzliche Optionen gehen , finden Sie Pfeile. Wenn ich das einfach schließe, wirst du feststellen, dass der Pfeil verschwunden ist. Wenn ich das umschalte, findest du genau hier einen kleinen Pfeil. Sie haben auch eine Seitennummerierung am unteren Rand, Sie haben drei Punkte Sie können dies auf Bruch ändern, was im Grunde bedeutet , dass insgesamt drei da sind und Sie sich derzeit auf der ersten Wenn du das als Fortschritt machen möchtest, wirst du feststellen, dass der Fortschrittsbalken am Bußgeld erscheint. Hier hast du den obersten Teil. Wenn ich auf Weiter klicke, siehst du, Fortschrittsbalken bis zu diesem Punkt reicht Wenn ich zum letzten Fortschrittsbalken gehe, berührt er das Ende. Behalten wir das als Punkte bei. Sie können die Übergangsdauer und sogar die Autoplay-Geschwindigkeit ändern Möchte das als Autoplay behalten. Wenn du nicht willst, kannst du das einfach ausschalten. Sie haben auch Infinite Loop. Sie können jederzeit eine Pause einlegen, wenn Sie Cursor über ein Feedback fahren. Die automatische Wiedergabe würde dann nicht stattfinden Sie haben auch die Möglichkeit, bei der Interaktion eine Pause einzulegen. Das heißt, wenn jemand darauf klickt oder wenn jemand krabbelt, dann diese Folie automatisch Hier hast du die Bildauflösung , die auf voll eingestellt sein sollte Du hast auch Lazy Road, aber lass uns diesen Teil nicht anfassen. Ordnung. Wenn Sie zum Stil-Teil kommen, werden Sie unterschiedliche Abstände zwischen ihnen finden. Sie finden die Rahmenfarbe, Rahmenbreite, den Randradius und den Inhalt. wir zum Inhaltsteil kommen, können Sie natürlich die Typografie in den Poppin-Bildteil ändern , Sie können die Größe ändern Wenn ich die Größe vergrößere, wird es so aussehen. Wenn ich den Abstand zwischen dem Namen und dem Bild ändere, wird die Änderung so aussehen. Ich kann den Randradius für das Bild ändern. Wenn ich möchte, dass das Bild abgerundete Kanten hat, kann ich meinen Schieberegler nach rechts bewegen. Oder wenn ich das als scharfe Kanten angeben möchte, kann ich meinen Slide nach links bewegen. Aber lassen Sie uns das einfach als Standard beibehalten, das ist kreisförmig. Hier im Navigationsteil finden Sie zwei Schaltflächen links und rechts. Sie können die Größe der Schaltflächen auch erhöhen oder verringern . Sie könnten ihre Farbe ändern . Sie könnten die Seitennummerierung hinzufügen. Und ob Sie möchten, die Punkte am unteren Rand etwas größer oder kleiner erscheinen , indem Sie die Blase ändern, was Sie tun können, können Sie der Blase einfach geben Sie können etwas Polsterung hinzufügen, wenn Sie möchten. Sie können einen Rahmen hinzufügen, wenn Sie möchten, und so weiter. Gut, ich hoffe, du verstehst, worum es bei der ganzen Sache geht. Kommen wir zum Inhalt. Genau hier findest du den Text, der da ist, genau hier. Wir können das auf Poppins ändern. Lass uns versuchen, das zu tun. Sie können feststellen, dass Pops genau hier angewendet wird Fein. Ich hoffe, ihr versteht, worum es geht. Als eine weitere Sache, die wir hinzufügen können, können wir einfach direkt hier in den Inhalt zurückkehren, wir können der Blase einen Rand hinzufügen. Wenn ich einen Rand hinzufüge, lass mich diesem Rand einfach eine Farbe geben. Ich kann dem eine grüne Farbe geben. Das ist eine Hintergrundfarbe. Dies ist keine Rahmenfarbe, sondern eine Hintergrundfarbe. Lassen Sie mich hier einfach die Standardeinstellungen vornehmen. Sie haben einen Rahmen, wir schalten diesen Rahmen hier einfach um, Sie werden sehen, dass ein schwarzer Rand angewendet wurde, aber wir wollen keine schwarze Farbe Stattdessen wollen wir die grüne Farbe. Dieser Rand könnte je nach Anwendungsszenario vergrößert oder verkleinert werden. Wir werden diesen Teil abwählen. Wir gehen gleich hier zu „Fortgeschritten“ über. Im fortgeschrittenen Teil findest du Border genau hier. Sie können dem gesamten Testimonial-Karussell sogar einen Rahmen hinzufügen gesamten Testimonial-Karussell Was passiert, wenn ich einen Festkörper hinzufüge? Es würde eine Grenze rund um das Ganze auftauchen. Ich möchte die Grenze nur einer bestimmten Richtung geben. Ich kann das auch tun, indem ich einfach so viel hinzufüge. Ich kann die Rahmenfarbe auf Grün ändern. So wird es aussehen. Ich kann den Rand Us hinzufügen, wenn ich will, aber das ergibt keinen Sinn. Ich kann sogar einen Boxschatten hinzufügen. Sie können Box Shadow sehen. Aber lass mich es einfach zurücksetzen. Zurück zur Standardeinstellung. Genau so funktioniert unser Testimonial-Carousal-Bereich. 24. Element der Preistabelle: Service-Preise im Stufenformat anzeigen: Lassen Sie uns mit einem anderen Element beginnen. Ich werde einen neuen Abschnitt erstellen. Wir möchten, dass die Flexbox-Richtung horizontal ist. Hier werde ich einen Container hinzufügen. Ich werde ein Duplikat dieser Container erstellen , bevor ich überhaupt einen weiteren Container hinzufüge. Lassen Sie uns zuerst die Höhe dieses Containers auf etwa 100 H einstellen , okay. Es nimmt die gesamte Höhe ein. Lassen Sie uns nun diesem klassischen Bild einen Hintergrund hinzufügen und diesen werde ich auswählen. Wir wollen, dass sich nichts wiederholt und die Displaygröße zu groß ist. Vergrößern Sie das gesamte Bild so, dass es bereits der Breite und Höhe unseres Containers entspricht. Fügen wir nun Container hinzu und wir werden diese duplizieren diese duplizieren , sodass wir hier drei Spalten haben. Im Wesentlichen versuchen wir zu erstellen, dass wir versuchen , eine Preistabelle für eine Website, eine Serviceseite oder ein Produkt jeder Größe zu erstellen, Sie sich vielleicht umgesehen haben. Sie bieten eine Serviceseite an, oder? Eine Preisseite. Auf dieser Preisseite gibt es drei verschiedene Preisstufen. Eine davon wären die Stufen Basic Advanced und Pro Level. Hier werden wir etwas Ähnliches erreichen. Du wirst einen Titel finden, du wirst eine Beschreibung finden, du wirst eine Hintergrundfarbe finden. Sie haben ein Etikett, Sie haben Ihre Preise, egal ob es sich um ein monatliches oder ein jährliches Abonnement handelt. Sie haben verschiedene Funktionen aufgelistet. Sie haben Ihr Muster und etwas Text, Sie direkt unter Ihrem Muster platzieren können . Lass uns versuchen, das zu bearbeiten. Ich klicke einfach darauf und Option zur Bearbeitung der Preistabelle wird angezeigt. Anstatt Ihren Titel einzugeben, können wir dies jetzt in etwas ändern. Lass mich das als Diamantenpaket machen. Das ist wie ein Diamantenpaket. Dann können wir die Beschreibung ändern. Wir können das einfach als unsere Beschreibung behalten. Wir können das Titel-Tag auf H zwei oder etwas anderes ändern, aber lassen Sie uns einfach drei behalten. Was die Preisgestaltung angeht, können wir das Symbol in Dollar, Euro oder jede andere Währung ändern , die Sie verwenden. Wir können das also sogar in Rupie ändern, aber ich würde es jetzt gerne als Dollar behalten Ich kann den Preis ändern. Statt 39,99 kann ich ihn auf 59 99 ändern, wenn ich will. In Ordnung, hier kann ich das Währungsformat ändern. Was ist nun der Unterschied zwischen diesem Format und diesem Format? Wenn ich das ändere, werden Sie feststellen, dass der Centanteil nach diesem Dezimalpunkt erscheint , oder Sie könnten den Standardteil verwenden. In Ordnung, das würde also gut aussehen. Hier hast du auch den Verkauf, was passiert, wenn ich zwischen den Verkäufen hin- und herwechsle Wenn ich also zum Verkauf wechsle, wird der ursprüngliche Preis gesenkt und der neue Preis wird genau hier angezeigt Ich kann den ursprünglichen Preis bei etwa 99 belassen. Ordnung. Ich kann den Zeitraum ändern, egal ob es ein monatliches Abonnement oder ein jährliches Abonnement sein soll . Ich kann dies als jährliches oder monatliches Abonnement beibehalten. Lassen Sie mich das als monatlich festlegen. Sie können das sogar vierteljährlich machen. Hier haben Sie eine Liste von Funktionen. Sie können sogar das Symbol ändern anstatt ein kreisförmiges Häkchen zu verwenden. Ich kann einfach dieses Kästchen oder nur ein einfaches Häkchen verwenden . Ich kann einfach nach T suchen oder hier nachschauen, ich habe diesen Scheck. Ich kann das auswählen, ich kann die Farbe des Symbols auf Grün ändern. Und hier kann ich das Objekt nicht als eins auflisten, sondern als eine Domain einrichten. Ich kann eine Replik davon machen. Ich kann es also einfach mehrmals kopieren und einfügen. Anstatt einer Domain kann ich die anderen Funktionen als 100 B, 100 GB Bandbreite und Bandbreite auflisten . Ordnung, und als letztes Feature können wir so etwas wie 100 Website-Hosting sagen. Das ist wie eine Preistabelle für jede Art von Hosting-Dienstleister. Es könnte ein Nebengrundstück sein. Ich versuche nur, weißt du, die Funktionen aufzulisten , die sie anbieten. Hier haben Sie 100 GB Pan mit hundert Hosting-Websites und dem Häkchensymbol. In Ordnung. Du kannst sie sogar neu anordnen, wenn du willst. Ich kann das einfach hier platzieren. Eine Domain kann im untersten Teil erscheinen. Sie können sogar etwas wie ein SSL-Zertifikat oder ein SSL-Zertifikat hinzufügen SSL-Zertifikat oder ein SSL-Zertifikat Lassen Sie mich zunächst einfach ein Duplikat davon erstellen. Ich werde das streichen. SSL-Zertifikat. In Ordnung, was sind die Funktionen? Hosting oder Anbieter? Lass uns das einfach hier herausfinden. Ich gehe zum Webhosting. Sobald ich nach unten scrolle, werden Sie feststellen, dass es unbegrenzt viele Optionen gibt , um die Funktionen aufzulisten , die wir haben, CDN und ähnliches Wir können ein weiteres Element hinzufügen. Lassen Sie uns versuchen, ein Duplikat davon zu erstellen. Ich kann etwas wie CDN Free CDN anstelle von Call Cross hinzufügen , oder ich kann einfach stornieren sagen Müssen wir stornieren? Nein, tun wir nicht. Haben wir das Kreuz? Die Absage? Das kann ich nicht finden. Suchen wir nach dem Falschen. Okay, das können wir auch nicht finden. Was wäre das Symbol für Kreuz? Lass uns versuchen, nach einem Kreuz zu suchen. Okay, ich kann das Kreuzsymbol nicht finden, also lasse ich es einfach so wie es ist. Okay, hier haben wir diese verschiedenen Funktionen. Wir haben auch eine Fußzeile hier in der Fußzeile, wir haben die Schaltfläche, anstatt hier zu klicken, wir können sagen, dass wir inzwischen einen Link bereitstellen können Ein dynamischer Link könnte auch in Bezug auf zusätzliche Informationen bereitgestellt Wir können so etwas wie 30 sagen, die Geld-zurück-Garantie. Alles klar, das ist der Text , den wir auch mit zusätzlichen Informationen ergänzen können. Kommen wir zum Menübandbereich, Sie können sogar den Text des Menübands ändern , wenn Sie ihn einblenden möchten, Sie können ihn einblenden oder aber ausschalten Sie können die Position auch ändern, aber ich würde sie gerne beibehalten, da sie in Ordnung ist wir zum Styling-Teil kommen, können Sie hier die Farbe des Hintergrunds anstelle von Schwarz ändern . Wir können so etwas wie Grün ändern. Hier haben wir Grün. Hier kann ich die Farbe des Titels in etwas wie Schwarz ändern. Schwarz könnte verwendet werden, aber machen wir es einfach zu Weiß für die Typografie Lassen Sie uns das auf Poppins ändern. Okay, auch was die Größe angeht, könnten wir unseren Titel vergrößern oder verkleinern Genau hier, ich denke etwa 35 Pixel würden gut aussehen, gut. Kommen wir wieder zum Untertitelteil, wir können damit herumspielen, indem wir ihn in Poppins ändern Wir verwenden einfach die Standardbeschreibung, oder wir könnten die Beschreibung sogar entfernen , wenn wir sie nicht möchten Bei der Preisgestaltung können wir die Farbe auf Schwarz ändern. Das ist übrigens der Hintergrund. Wir können das ausräumen, wir können Polsterung hinzufügen. Wenn wir die Farbe der Schrift auf Schwarz ändern können, es ist dunkel, dann haben wir wieder Typografie. Lassen Sie uns das auf Poppins ändern In Ordnung, also so wird es aussehen. Kommen wir nun zum Währungssymbol Sie können die Größe dieses Symbols sogar reduzieren oder erhöhen. Ich denke, 50 Pixel sehen ganz gut aus. Was sollte nun die Position des Dollars sein, unabhängig davon, ob Sie wollen, dass er links oder rechts in einer Linie liegt? Ich denke, eine linke Linie würde gut aussehen. Wie soll die vertikale Position sein? Das Dollarzeichen sollte oben in der Mitte oder unten erscheinen . Ich denke unten in der Mitte. Alle drei sehen gut aus. Meiner Meinung nach würde ich einfach die oberste Position verwenden, um zum Bruchteil zu kommen Wenn ich diesen Wert erhöhe, wirst du feststellen, dass der 99-Teil ebenfalls zunimmt oder abnimmt. In Ordnung. Also ich kann das einfach um die 40 machen . Ich kann sogar die Position ändern, 59, 99. Ich finde, das sieht gut aus. Oder unten, es sieht gut aus. Lass uns das einfach als Top belassen. In Ordnung, hier haben wir den Originalpreis. Wir können es rot machen, lassen wir es dunkelrot. Wir ändern die Schrift auf Pins. Wir können das auch vergrößern. Alles Licht 99. War die ursprüngliche Preis-Typografie Poppins eingestellt, nicht wahr? Okay, das ist für einen bestimmten Zeitraum. Okay? In dem monatlichen Zeitraum, den wir haben, können wir sogar die Position unseres ursprünglichen Preises festlegen. Es ist auf den Tiefpunkt eingestellt. Wir können dies auf Mitte oder Oberseite ändern. Unten ist der beste Weg, um den ursprünglichen Preis darzustellen. Wir können die Farbe der Periode ändern, was ich tun werde, die graue Farbe, die sie hat. Wir ändern die Farbe, wir behalten das als Schriftfarbe bei, aber wir ändern den Schriftstil auf Poppins Suchen wir nach Pins, die wir verwendet haben , und wir können sie darunter oder daneben platzieren Ich finde außerdem, sieh gut aus. Ich platziere es einfach hier. hier wieder zum Funktionsumfang kommen, können Sie hier die Hintergrundfarbe für jedes einzelne Feature ändern . Sie können so etwas tun, aber ich möchte die Standardeinstellung verwenden. Ich kann Polsterung hinzufügen, ich kann die Farbe des Textes ändern. Ich kann sogar die Typografie ändern. Ich kann das in etwas wie Poppins ändern. Ich kann die Ausrichtungslinie ändern, eine rechte, eine linke Mittellinie. Sieht gut aus. Ich kann die Breite erhöhen, wenn ich will, aber lassen Sie uns einfach die Standardbreite verwenden. Ich kann einen Teiler dazwischen hinzufügen. Okay, hier hatte ich die Möglichkeit, einen Teiler hinzuzufügen. Ich kann zwischen verschiedenen Trennwänden wählen, durchgehend, doppelt, entweder gestrichelt, gepunktet, und jeden von ihnen verwenden Ich kann sogar die Farbe des Teilers wählen. Ich kann das Gewicht erhöhen, aber zwei sind perfekt, die Breite verringern Ich kann den Abstand zwischen den Features ändern. Hier, im Abstand vom Fuß, würdest du diesen Teil, den Button und diesen Text finden . Wir können mit der Hintergrundfarbe und der Polsterung herumspielen . Wir können die Größe der Schaltfläche erhöhen oder verringern Wenn ich das klein machen würde, wäre das meiner Meinung nach das Beste. Wenn ich die Schaltfläche so klein habe, kann ich den Effekt ändern indem ich mit dem Mauszeiger über diese bestimmte Schaltfläche fahre Wenn ich diese Textfarbe oder besser gesagt die Hintergrundfarbe der Schaltfläche auf Grün ändere oder besser gesagt die Hintergrundfarbe der Schaltfläche auf Grün Mal sehen, was passiert, wenn ich meinen Cursor bewege. Im Idealfall sollte es passieren. Lass uns versuchen, das jetzt zu speichern, Textfarbe, wir wollen, dass es weiß ist. Lassen Sie uns versuchen, die Änderungen hier zu sehen, wenn ich nach unten scrolle. Zu diesem Teil. Okay, warum erscheint es nicht im Hover Wir haben diese Farbe, ein feiner Hintergrund sollte die klassische Rahmenfarbe sein Wir möchten keiner Rahmenfarbe eine Textfarbe geben. Wir wollen natürlich, dass es weiß ist. Aber warum scheint es nicht okay zu sein? Wir können sogar die Animation ändern, wenn Sie mit der Maus darüber fahren Ich werde nicht auf diesen Teil eingehen. Hier haben wir einige zusätzliche Informationen, die wir anders gestalten können. Hier können wir die Typografie auf Poppins umstellen. Ich kann den Rand für den Teil mit dem Band vergrößern oder verkleinern . Dieser Teil ist sehr beliebt Ich kann die Farbe des Etiketts ändern, in Ordnung. Ich kann sogar die Entfernung festlegen , von der genau Sie dieses spezielle Etikett platzieren möchten . Ich mache das einfach als Standard. Ich kann die Farbe des Textes darin wählen. Ich kann sogar die Typografie auf Poppins ändern. Ich kann diesem Etikett sogar etwas Boxschatten hinzufügen. Das sieht gut aus, gut. Nun, wenn wir das Ganze erledigt haben, was können wir dagegen tun? Wir können das duplizieren. Lass uns ein Duplikat davon machen. Übrigens, auf der Registerkarte „Erweitert“ finden Sie alle anderen Optionen, die es für andere Elemente gibt. Außerdem werde ich hier für den gesamten Container ein Duplikat dieses Containers erstellen. Machen Sie erneut ein Duplikat davon und ich lösche die anderen Container. Gut, lassen Sie uns jetzt andere Container für diesen Teil löschen Für dieses spezielle Diamantenpaket möchte ich das Menüband nicht anzeigen. Ich entferne einfach dieses Band für den ersten und den letzten. Ich möchte das nur für den mittleren Teil hier behalten . Ich kann den Pakettitel so ändern , dass wir hier einfach Titan statt Diamant sagen . Ich kann das als Platin bezeichnen. Wir können sogar den Preis dafür ändern. Für das Titanmodell können wir die Preisgestaltung festlegen, statt 59, 99 können wir es auf 299 festlegen. Das ist wie das teuerste. Wir können auch den ursprünglichen Preis ändern. Anstatt den ursprünglichen Preis S 98 zu verwenden, können wir diesen als 599 festlegen Für die Platin-Version können wir 129 und für das Original 200 angeben Alles. Ich werde nicht im Detail auf die Änderung der Funktionsliste eingehen. Sie können das selbst tun, aber ich würde gerne die Elemente in der Mitte anordnen. Lass uns einfach auf den gesamten Container klicken. Wir gehen zum Layout und begründen Inhalt und richten die Elemente mittig aus, okay. Durch die Ausrichtung der Elemente in der Mitte wurde im Wesentlichen erreicht, dass der Container, unabhängig davon, welches Containerelement er hatte, seine Höhe entsprechend angepasst hat Und dass er seine Position so angepasst hat, dass er in Bezug auf die Y-Achse unseres äußersten Containers in diesem speziellen Flexbox-Bereich zentriert die Y-Achse unseres äußersten Containers in diesem speziellen Flexbox-Bereich diesem speziellen Flexbox-Bereich Ich hoffe, ihr habt verstanden, was es heißt, verschiedene Preistabellen zu erstellen 25. Animiertes Headline-Element - Verbessere deinen Titelauftritt mit coolen Animationen: Lassen Sie uns versuchen, diesem Abschnitt der Preistabelle eine animierte Überschrift hinzuzufügen . Nun, dieser Teil wird etwas knifflig werden, nicht wegen des Elements, das wir verwenden werden, sondern wegen der Art und Weise, wie wir die Elemente in diesem Abschnitt anordnen werden . Achten Sie sehr genau auf diese Vorlesung. Wie Sie wissen, hat diese Flexbox eine horizontale Richtung. Wir haben dieses Preistabellenelement in jedem Container platziert Wir haben drei Container, Container eins, Container zwei und Container drei. Jetzt würden wir gerne geben, oder besser gesagt, wir würden gerne einen weiteren Container hinzufügen, damit wir unsere animierte Überschrift oben platzieren können. Gut, ein weiterer Behälter, in dem wir diese drei Behälter haben werden. Lassen Sie mich dazu einfach das Flexbox-Layout auf vertikal ändern. Achten Sie vorerst nur sehr, sehr sorgfältig darauf. Ich klicke auf Ad Element. Ich bringe meinen Container nach draußen. Wir werden nur sichergehen, dass dieser Container, den wir hier haben , nicht Teil davon ist. Ich kann einfach auf Struktur klicken. Sie können feststellen, dass der leere Container, den wir haben, Teil eines verschachtelten Containers ist, der auch eine Preistabelle hat , was wir nicht wollen Wir können ihn einfach ziehen und direkt darunter platzieren. Wir können es einfach direkt über diesem vorhandenen Container mit Preistabelle platzieren . Fein. Jetzt haben wir diesen. Jetzt möchten wir auch einen weiteren Container hinzufügen. Lassen Sie uns versuchen, dies zu duplizieren, indem wir es einfach duplizieren. Wir können diesen Container ziehen und darin platzieren. Hier haben wir zwei Container in dieser Flexbox, den äußersten Container einen und den äußersten Container In Ordnung. Nehmen wir an, das ist eine Flexbox. In der Flexbox haben wir zwei Amazon-Boxen. Amazon Box eins, Amazon Box zwei. In dieser Amazon-Box haben wir jetzt eine Box von Walmart, die andere Box von Best Pi und die andere Box von einem anderen Anbieter Ordnung. Lass es mich einfach hier hineinziehen und platzieren. Lassen Sie mich hier einfach eine Struktur öffnen. Wir haben den Container, in dem wir einen Container mit Preistabelle haben. Und hier haben wir einen weiteren Container mit Preistabelle. Sie sind nicht verschachtelt, sie sind individuell. Sie können die Struktur genau hier sehen, genau hier. Wir haben den dritten Container , der nicht Teil davon ist. Sie können sehen, dass die Ausrichtung etwas anders ist. Lassen Sie uns versuchen, es genau hier zu platzieren , um ein Teil davon zu sein. Ich kann es einfach so anordnen und Sie werden feststellen, dass alle drei in einem Container erscheinen. Nun, dieses Feld, dieser Container wird horizontal eingestellt. So wirst du erscheinen. Sie werden jedoch feststellen, dass Diamant zuerst erscheinen sollte, Platin sollte zuletzt erscheinen und Titan sollte in der Mitte erscheinen. Versuchen wir, sie neu anzuordnen. Wir können gleich hier hingehen. Was ich tun werde, ich klicke einfach auf Struktur. mit der rechten Maustaste darauf klicken, sollte Titanium in der Mitte erscheinen, was das letzte ist. Lass uns Set direkt oben spielen, Titanium wird hier erscheinen. Der letzte, der Diamant ist, sollte zuerst erscheinen. Das werden wir machen. Platin wird als letzter dran sein. Platin wird an letzter Stelle stehen. Okay, was ist passiert? Wir müssen zuerst sicherstellen, dass alle Strukturen einwandfrei zusammengebrochen sind. Diamant, dann Titan sollte auftauchen. Titan ist genau hier. Wir werden es hier platzieren und Sie werden feststellen, dass das unsere Vereinbarung in Ordnung ist. Jetzt fügen wir unsere animierte Überschrift hinzu. Lass uns nach einer animierten Überschrift suchen. Ich ziehe es und platziere es genau hier. Sie werden feststellen, dass dies unser Text mit dem letzten Wort ist. Es war eine Art Kreisanimation im Umlauf. Lassen Sie uns einfach zuerst den Text ändern, dass diese Seite eine Preistabelle enthält. In Ordnung, was sollte der hervorgehobene Text sein? Lassen Sie uns diesen entfernen. Und lassen Sie uns die Preistabelle verwenden. Gut, hier haben Sie, diese Seite hat eine Preistabelle. Sie können sogar Text nach dem Text hinzufügen. Das heißt, was sollte angezeigt werden, nachdem Sie dies markiert haben? Sie können es sogar hinzufügen. Möchtest du, dass es in einer Endlosschleife läuft? Sie können dieses Kästchen ankreuzen. Wie lange soll diese Animation dauern? Willst du irgendeine Art von Verzögerung? Sie können all diese Werte in Millisekunden hinzufügen. Sie können sogar einen Link hinzufügen, wenn Sie möchten. Das werde ich nicht, ich kann den Titel-Tag auf zwei ändern. Ich gehe zum Stylen. Ich ändere die Farbe dieser Form. Das Highlight ist eine Animationsoption. zum Inhaltsteil gehe, kann ich zwischen verschiedenen Animationen wechseln, die ich habe. Anstatt zu markieren, kann ich dies auf Drehen umstellen. Es wird den Text eintippen, ungefähr so. Du wirst es so finden statt stilvoll. Beim Rotieren können wir den Animationstyp ändern. Möchtest du tippen? Willst du, dass das ein Clip ist? Was passiert, wenn wir einen Clip haben? Lassen Sie uns herausfinden, wie der Text angezeigt wird. Sie müssen auch umdrehen, wir werden den Text umdrehen. Mal sehen, Flip, vertikal passiert. Du hast einen Strudel, er dreht sich so um. Dann haben Sie Jalousien so angezeigt. Dann haben Sie Drop in Wave, Sie haben Slide Down. Ich denke, tippen würde am besten aussehen. Lass uns das zu einer Typisierung machen. Hier haben Sie verschiedene rotierende Texte, die wir können. Diese Seitentabelle, alles klar. Diese Seite hat eine Preistabelle, okay. Hier haben Sie auch einen Text , den wir leer lassen werden. Nachdem wir zur Registerkarte Stil gegangen sind, wählen wir die Farbe der Überschrift aus. Lassen Sie uns das bei der Typografie als Weiß kennzeichnen. Stellen wir das auf Poppins ein. Wir können Text hinzufügen. Wenn wir sogar die Farbe des animierten Textes ändern können. Animierter Text könnte so etwas sein wie, fügen wir einen hellgrauen Ton hinzu. Wir können hier eine hellgraue Melodie hinzufügen. Wir könnten die Formfamilie in Poppins ändern. Wir können die Auswahlfarbe ändern. Auch hier haben Sie eine andere Auswahlfarbe, die wir nicht noch einmal eingehen werden. Das Aufrufen der Registerkarte „ Erweitert“ ist dieselbe wie die andere. Lass uns veröffentlichen. Wir können die Änderungen sehen indem wir zu unserer Webseite scrollen Lassen Sie uns das aktualisieren. Sobald Sie hier nach unten scrollen, finden Sie Ihre Seite, auf der diese Seite eine Preistabelle enthält In Ordnung, also so sieht es aus. Jetzt stellen Sie möglicherweise fest , dass der gesamte Text ausgewählt wird und die Hintergrundfarbe zu Schwarz wechselt. Das liegt daran, dass wir keinen Nachtext haben. Lassen Sie uns versuchen, den Text nach dem Text zu ändern. So etwas wie diese Seite hat eine Preistabelle oder so etwas wie Elementor Pro Element Was passiert ist, dass Sie zwischendurch möchten , dass ein Text geändert wird, das können Sie tun Sie können sogar den rotierenden Text anstelle der Preistabelle ändern . Du kannst diesen Elementor Pro machen. Was passiert jetzt? Schauen wir uns das mal an. Diese Seite enthält eine Preistabelle. Lassen Sie uns das abtippen. Hier findest du das Ganze. Hier können wir zum Styling gehen. Wir können ausgewählten Text auswählen. Der Text, der gerade ausgewählt wird , der gerade angezeigt wird, ist auf einige Standardeinstellungen eingestellt, die schwarz sind. Wenn ich das auf etwas in der Nähe von Weiß ändere , schauen wir mal, was passiert. Sie können sehen, dass der gesamte Text weiß ausgewählt wurde. Sie können weitere Farben hinzufügen, wenn Sie möchten. Sie können die Farbe des Textes ändern und so weiter und so weiter. Gut, ich hoffe, ich habe verstanden, was das Hinzufügen animierten Überschrift zu Ihrem Abschnitt angeht. 26. FlipBox-Element - Das ist einzigartig!: Ordnung, lassen Sie uns versuchen, ein anderes Element zu verwenden , nämlich Flipbox Ich werde einen neuen Abschnitt hinzufügen. Wir werden dieses Layout beibehalten. Erhöhen wir die Höhe auf etwa 05:50 Pixel. Fein. Wir ändern die Hintergrundfarbe. Geben wir ihm hier ein Bild. Ich wähle dieses Bild aus. Ich finde, ich kann dieses Cover sogar machen und es nicht wiederholen. Wiederhole es nicht. Und hier haben wir das Bild. Jetzt drinnen, warte zuerst eine Sekunde. Anstatt dies hier zu verwenden, könnte dieses Bild als Hintergrundüberlagerung verwendet werden Genau hier gehen wir zur Hintergrund-Overlay über. Klassisch Wählen Sie dasselbe Bild aus, dieselben Einstellungen würden angewendet Das heißt, wir wollen, dass das Display bedeckt, wiederholt, wiederholt wird. Die Opazität wäre etwas höher als etwa 18. Jetzt wollen wir das. Fügen wir ein Element hinzu , das Flipbox genannt wird. Ich ziehe es und platziere es genau hier. Sobald ich es platziert habe, kann ich es zuerst zentrieren indem ich den Inhalt ausrichte und die Elemente mittig ausrichte Jetzt werden Sie feststellen, dass es eine Überschriftenbeschreibung und eine Schaltfläche hat und dass es sich nach rechts dreht, sodass es zwei Seiten hat Das könnte sich als nützlich erweisen, wenn Sie versuchen, einen Service anzubieten und Sie möchten einfach nicht gesamten Inhalt auf der Karte selbst Sie können hier eine Art Flip-Effekt hinzufügen. Sie können ein paar Dinge anzeigen. Nun, das wäre nicht unbedingt etwas Ähnliches wie das, was wir in der Preistabelle gemacht haben, denn in der Preistabelle sind alle Funktionen aufgeführt. Aber das wäre nur ein kurzer Überblick darüber, worum es bei dem Service geht, oder? Sie können den Anwendungsfall finden, für Sie am besten funktioniert. Und dieser Umschwung passiert nur, wenn Sie mit dem Mauszeiger darüber fahren. Immer wenn Sie den Cursor in Richtung dieses Elements bewegen , erfolgt der Umschwung. Und wenn Sie den Cursor wieder außerhalb dieses Elements bewegen, nimmt das Umdrehen die ursprüngliche Position des Pakets wieder ein. In dieser speziellen Flipbox haben Sie Inhalt. Hier haben Sie den Inhalt und hier haben Sie den Hintergrund. Hier können wir den Hintergrund auf klassisch oder mit Farbverlauf ändern. Ich kann das Bild auswählen, also lass mich dieses Bild als meinen Hintergrund auswählen. Sobald ich das getan habe, kann ich die Hintergrundüberlagerung auswählen Auch hier kann ich verschiedene Farben wählen, wenn ich will. Und was ich hinzufügen möchte, ist ein Bild anstelle des Sternsymbols. Ich kann zum Inhalt gehen. Und anstatt das Symbol zu verwenden, das sich genau hier befindet, lassen Sie mich zuerst nach dem elementaren Symbol suchen. Haben wir? Ja, das tun wir. Fügen wir hier das elementare Symbol selbst ein. Oder ich könnte einfach auf Bild klicken und das elementare Bild zurückbringen, das ich hier habe. Du kannst es sehen. Aber die Bildgröße ist viel zu groß und ich muss sie anpassen. Anstatt es zu tun, kann ich wirklich klein halten, etwa mittel. Es wäre nicht machbar, die Einstellungen zu umgehen. Lassen Sie uns also einfach dieses elementare Symbol verwenden. Ordnung, sobald wir das getan haben, können wir uns das in einem gestapelten Format ansehen Das ist die Ansicht von Stacked, das heißt, sie wird einen Kreis haben Oder Sie könnten auch eine Option mit Rahmen haben. Sie haben jetzt verschiedene Optionen. Möchten Sie, dass der Rahmen kreisförmig ist? Möchtest du, dass es quadratisch ist? Möchten Sie, dass der Stapel quadratisch oder kreisförmig ist? Sie können zwischen verschiedenen Optionen wählen. Ordnung, ich werde jetzt mit dieser Option fortfahren . Hier hast du die Überschrift. Ich kann das auf Elementor Pro ändern, gut. Ich kann diesem Kurs nur zur Beschreibung etwa fünf Sterne geben diesem Kurs nur zur Beschreibung etwa fünf Sterne . Fünf Sterne für diesen Kurs. Und ich schaue mir diesen Kurs gerne an. In Ordnung, hier haben wir eine Beschreibung. Hier hast du auch wieder im Inhalt. Das heißt, wenn du einmal umgedreht hast was der Inhalt hier angezeigt werden soll, können wir zwischen verschiedenen Hintergründen wählen. Sie können mit verschiedenen Einstellungen herumspielen. Hier können Sie die verschiedenen Titel-Tags ändern , die Sie haben. Als Titel können Sie H eins und H23 eingeben. Das hilft jetzt bei SEO-Zwecken. Hier haben Sie Ihren Beschreibungstitel, den Sie auf Span-Tag setzen können , oder Sie können die Höhe anpassen und lassen Sie mich ihn entsprechend als Standard festlegen. Sie können einen größeren Grenzradius hinzufügen. ich das nach rechts schiebe, wirst du feststellen, dass sich die gesamte Flipbox in ein Captual-Format verwandelt Ich kann das wieder auf zehn oder 12 ändern. 12 ist viel zu klein. Wir können es einfach auf 16 schaffen. Mal sehen, wie es 2020 aussieht. Sieht gut aus. Ich mache daraus einfach 20. Nun, welchen Effekt möchte ich für Flip haben? Möchte ich, dass das so umgedreht wird? Möchte ich, dass es Slide ist? Was passiert, wenn ich meinen Cursor bewege? Sie können sehen, dass es so aussieht. Das ist der Folieneffekt, den Sie haben. Drücken Sie, wenn ich. Mein Cursor. Es verschiebt den Originalinhalt nach oben Das ist Wirkung. Sie haben hineingezoomt. Es zoomt rein, du musst so rauszoomen. Du hast auch Fade Sehr einfacher Effekt. Behalten wir einfach diese Folie. Was passiert, wenn wir Flip haben? Sie haben auch Anweisungen für jede Richtung. Sie möchten, dass es sich vertikal nach oben dreht. Willst du, dass es unten ist? Ist das ein Flip? Willst du, dass es so rechts oder links ist? Du kannst das sogar ändern. Ich werde das als richtig wählen. Wir können dies sogar als Tiefe in drei D angeben. Mal sehen, was passiert, wenn ich eine Tiefe von drei D wähle. Wenn ich meinen Cursor mitnehme, wirst du sehen, dass er so etwas wie ein Byte hat. Lass mich einfach irgendeinen Gegenstand hervorheben , den ich hier in meiner Nähe habe. Ich habe diese Fernbedienung, ich kann sie einfach umdrehen. So wird der Flip tatsächlich funktionieren. Ordnung. Dies ist die Drei-D-Tiefe, wiederum für die Effekte und Animationen für die Preistabelle. Auch wenn du zurückgehst, nicht wegen der Preistabelle, sondern ich würde hier sagen, animierte Überschrift. Wir haben besprochen, dass wir beim Rotieren verschiedene Optionen für Animationen haben, aber wir haben auch hier hervorgehoben, dass es sich um einen Kreis handelt. Sie haben auch lockiges Haar. Möglicherweise finden Sie die Farbe der Locken nicht besonders ansprechend, da sie rot ist und die Hintergrundfarbe des Farbverlaufs ebenfalls rot ist Lassen Sie mich einfach die Farbe der Form so ändern , dass sie etwa weiß ist, damit sie sichtbar Hier würden Sie lockig finden, Sie würden feststellen, dass die Unterstreichungen oben und unten angezeigt werden Beide Seiten, Sie haben eine doppelte Unterstreichung, einen Zickzack, Sie haben eine Diagonale, es wird Jetzt können Sie es auch in den Vordergrund stellen , anstatt es zu erscheinen, sondern es hinter dem Text erscheinen zu lassen, Sie können es auch vorne erscheinen lassen, indem einfach zum Stil gehen und diese Umschaltoption auswählen Sie es in den Vordergrund stellen, werden Sie sehen, dass dieser Text ein Schrägstrich ist Sie können abgerundete Kanten haben. Sie haben auch andere Durchschläge. Sie haben auch X, es wird Ihren Text durchstreichen. Gut, aber wir behalten dies als Dreh - und Tippeffekt für die animierte Überschrift bei. Das waren nur ein paar Dinge, die ich im vorherigen Video verpasst habe . habe ich jetzt in diesem Teil , in dem ich diesen Flip-Effekt für die Flipbox Welche anderen Optionen habe ich jetzt in diesem Teil, in dem ich diesen Flip-Effekt für die Flipbox habe , im Style-Tab? Ich kann zwischen verschiedenen Farben meines Textes wählen. In der Überschrift habe ich die Textfarbe auf weiße Typografie eingestellt Ich kann das auf Poppins ändern. Ich kann die Schriftgröße auf etwa 35 reduzieren. Ich kann sogar den Textstrich ändern. Ich kann den animierten Text auch in Weiß ändern . Mal sehen, was passiert. Ich kann die Typografie wieder auf Poppins umstellen. Ich habe Textstrich, ich habe ausgewählt. Okay. All diese Dinge sind für den animierten Text passiert. Mein Fehler. All diese Dinge passieren für animierte Schlagzeilen. Aber wir arbeiten an der Umgehung der Flipbox. Lass uns zum Stil gehen. Und hier findest du verschiedene Ausrichtungen für deine Flipbox Ich kann es links, rechts, Mittellinie machen. Ich kann die Position so ändern, dass nach oben oder in der Mitte liegt. Machen wir das zur Mitte. Ich kann sogar den Randtyp festlegen. Möchte ich, dass es solide ist? Möchte ich, dass es doppelt so hoch ist? Möchte ich, dass es gestrichelt ist, gepunktet ist und so weiter. Aber lassen Sie uns das vorerst so belassen wie bisher, Sie würden keinen gepunkteten Rand finden, weil wir keine Rahmenbreite hinzugefügt haben Wenn ich die Rahmenbreite hinzufüge, werden Sie feststellen, dass es einen gewissen Rand gibt Ich kann die Farbe auf Weiß ändern, und jetzt finden Sie gepunktete Ränder auf der gesamten Flipbox Stimmt das? Wir können das hier einfach als Standard festlegen. Sie würden einen gewissen Abstand um Ihr Symbol herum finden. Sie könnten auch die Farbe des Textes ändern. Die Primärfarbe des Symbols könnte geändert werden, und die Farbe des sekundären Symbols kann ebenfalls geändert werden. Aber lassen Sie uns das einfach auf die Standardeinstellung zurücksetzen. Sie haben die Symbolgröße, die Sie entsprechend anpassen können. Lassen Sie mich es einfach auf die Standardeinstellung zurücksetzen. Sie können dem eine Polsterung hinzufügen. Sie können dieses Symbol drehen. Sie können einen Radius und einen Randradius um Ihr Symbol herum hinzufügen . Sie können einen gewissen Abstand zwischen Ihrem Titel und Ihrem Symbol hinzufügen . Sie können die Farbe Ihres Titels in Weiß ändern , damit er sichtbar ist. nun zum Beschreibungsteil kommen, können Sie diesen Teil in Weiß ändern. Auch hier können Sie die Typografie sowohl für Ihren Titel als auch für Ihre Beschreibung festlegen die Typografie sowohl für Ihren Titel als auch für Ihre Beschreibung Genau hier haben wir die Textfarbe, Sie können die Textfarbe auf Weiß einstellen Wenn ich meinen Cursor an eine beliebige Stelle in der Farbe bewege, ändert sich auch die Farbe meiner Schaltfläche. Sie finden es genau hier. Okay, das passiert, wenn wir unter dem Rücken sind. Wir haben zwei Optionen, was den Stil angeht, vorne und hinten. Wenn Sie im hinteren Teil nach unten scrollen, finden Sie die Farbe der Schaltfläche. Sie können das zurücksetzen. Sie können die Rahmenfarbe anstelle von Weiß ändern. Sie können diese Farbe in jede andere Farbe ändern , die Sie angeben möchten. Sie können den Randradius hinzufügen, da Sie eine gewisse Randbreite hinzufügen könnten , sodass der Rand etwas dick erscheint. Und Sie könnten die Farbe des Beschreibungstextes ändern . Sie könnten sogar die Farbe des Textes der Überschrift in Weiß ändern . In Ordnung. Sie können die Typografie für alle Texte, die Sie gesehen haben, entweder vorne oder hinten, für beide Texte auf Poppins ändern für alle Texte, die Sie gesehen haben, entweder vorne oder hinten, für beide Texte auf Poppins entweder vorne oder hinten, für beide Hier hast du den Titel. Sie können dies auf Weiß ändern. So sieht es aus. Gut, ich hoffe, Sie verstehen, worum es geht, das Problem zu umgehen. Flipbox in Element oder Pro. 27. Dias, Medienkarussell und Galerieelemente - Videos mit Inhalten versehen!: Leute, jetzt möchte ich die Dinge wirklich schnell voranbringen. In diesem Video werden wir drei Elemente behandeln, die von Element oder Pro, Plug In bereitgestellt werden. Zuerst schauen wir uns das Folienelement an, dann sehen wir uns die Galerie und dann das Medienkarussell Lassen Sie uns eine neue Flexbox hinzufügen. Es spielt keine Rolle, welche Richtung Sie festgelegt haben, aber wir wollen nur einen Container. Wir können das horizontal machen. Hier füge ich das Folienelement hinzu. Ich kann es einfach hier ziehen und ablegen. Jetzt würden Sie feststellen, dass es einen Titeltext gibt, den Beschreibungstext, eine Schaltfläche in der Mitte. Unten finden Sie nun drei Ellipsen, drei Punkte, die angeben, wie viele Folien für dieses Element vorhanden sind In der linken und rechten Richtung finden Sie Pfeile, finden Sie Pfeile denen Sie zwischen den verschiedenen Folien Ihres gesamten Elements navigieren verschiedenen Folien Ihres gesamten Elements Nun, wann könnte sich das als nützlich erweisen? Nehmen wir an, Sie versuchen, einen Heldenbereich für Ihre E-Commerce-Band zu erstellen , in dem Sie verschiedene Produkte, die Sie verkaufen, oder vielleicht verschiedene Dienstleistungen , die Sie anbieten, vorstellen die Sie verkaufen, oder vielleicht verschiedene Dienstleistungen , die sich beim Erstellen einer Produktseite als nützlich erweisen könnten sich beim Erstellen einer Produktseite als nützlich Und diese Produktseite muss einen Heldenbereich haben. Der Heldenbereich könnte das sein, ein Folienformat. Wenn ich jetzt versuche, das zu veröffentlichen, schauen wir uns an, wie das aussieht. Wenn ich zu diesem Teil runterscrolle, stellst du vielleicht fest, dass die Breite nicht richtig belegt ist. Die Breite ist nicht auf 200% eingestellt. Wie können wir das ändern? Wir können dieses Popup einfach schließen. Kehren Sie zu unseren Elementor-Einstellungen zurück, wählen Sie Ihr Flexbox-Layout wählen Sie die Registerkarte Layout Und in der Inhaltsbreite müssen wir auf Volle Breite klicken Wenn ich das jetzt speichere , pass gut auf, ich habe das in den Folieneinstellungen nicht geändert. Ich habe das in den Container-Einstellungen geändert, oder? Wenn ich zu dem Teil scrolle, in dem ich meinen Slider habe, wirst du sehen, dass die gesamte Breite eingenommen wird. Stimmt das? Gehen wir jetzt zurück. Ich kann den Inhalt ändern, wenn ich will. Wenn ich auf den nächsten Pfeil klicke, wirst du feststellen, dass eine Animation im Umlauf ist. Es gibt eine gewisse Hintergrundfarbe, und die Textanimation sieht auch gut von unten nach oben aus. Ordnung, es gibt ein paar Dinge, die wir hier ändern können. Wenn Sie weitere Folien hinzufügen möchten, klicken Sie einfach auf das Element hinzufügen. Wenn Sie ein Duplikat davon erstellen möchten, können Sie das Dokumentsymbol auswählen. Wenn Sie sie entfernen möchten, klicken Sie einfach auf das Kreuzsymbol. Lassen Sie uns versuchen, das Ganze zu erweitern und zu sehen, was jede einzelne Folie in Bezug auf das Design-Layout bietet. Wenn ich darauf klicke, kannst du die Hintergrundfarbe ändern oder ein Bild hinzufügen. Lassen Sie mich hier ein Bild hinzufügen. Ich habe drei verschiedene Produktbilder. Zuerst füge ich dieses Bild hinzu. Sobald ich das hinzugefügt habe, werden die Einstellungen für die erste Folie übernommen. Sie können hier sehen, anfangs waren wir auf der zweiten Folie. Sie müssen nur zwischen verschiedenen Folien navigieren. Jetzt wäre die Option für die Anzeige der Größe auf „Abdecken“ eingestellt. Was passiert, wenn ich das so ändere, dass es enthält? Sie kennen den Unterschied zwischen Contain und Cover. Offensichtlich können Sie sehen, wie es die Breite einnimmt. Wenn ich das auf Auto setze, wird die Größe automatisch angepasst , sodass sie vergrößert wird Aber wir wollen nicht , dass das passiert, also können wir es einfach wieder auf die Titelseite setzen Wir können mit verschiedenen Effekten herumspielen. Hier haben wir den Ken-Burns-Effekt. Lassen Sie uns versuchen, umzuschalten und zu sehen, was passiert. Was beim Ken Burns-Effekt passiert , ist, dass Sie sehen können dass ein leichter Zoomeffekt , wenn die Folie aktiv ist Es gibt eine bestimmte Zoomrichtung, die Sie einstellen können , wenn Sie möchten , dass die Ansicht vergrößert wird Verkleinert können Sie zwischen verschiedenen Optionen wählen, die Sie möchten, aber ich denke, das Vergrößern würde gut aussehen Wenn Sie ein Hintergrund-Overlay hinzufügen möchten, können Sie das sogar tun Dieses Bild befindet sich im Hintergrund, aber das Bild hat einen Schatten , sodass der Text sichtbar wird Sonst war es vorher nicht so. Sie können den weißen Text und das helle Hintergrundbild mit voller Sättigung und voller Transparenz sehen das helle Hintergrundbild mit voller Sättigung und all diese Dinge funktionierten mit dem Text, den wir hatten, nicht. Lassen Sie uns eine Hintergrundüberlagerung hinzufügen. Jetzt können Sie zwischen verschiedenen Mischmodi wechseln. Was ist nun der Mischmodus? Wenn Sie mit verschiedenen Fotobearbeitungsprogrammen wie Photoshop gearbeitet haben Fotobearbeitungsprogrammen wie Photoshop oder sogar einen UX-Kurs über Figma besucht haben, müssen Sie den Mischmodus kennen gelernt haben Was passiert, wenn ich Multiplizieren wähle? Wenn ich das auf Bildschirm ändere? Wenn ich zur ersten Folie zurückkehre, schauen wir mal, was passiert. Es gibt mehrere verschiedene Optionen. Du kannst dunkeln, du kannst es hell machen, du kannst mit dem Sättigungsgrad herumspielen du kannst mit dem Sättigungsgrad herumspielen und so. Wenn ich mit der Sättigung für das erste Hintergrund-Overlay-Bild herumspiele , finde ich diese Transparenz Und die Sättigung ist so eingestellt , dass der Hintergrund ungefähr so aussieht Es ist nicht so hell, es ist nicht sehr dunkel, aber irgendwo dazwischen wirkt es wie bei einem alten Foto, oder? Aber lassen wir das einfach normal. Sie können auch zwischen verschiedenen Optionen herumspielen . Okay? Du hast Farbe, du hast Ausgrenzung, du hast Leuchtkraft Sie können zwischen verschiedenen Optionen herumspielen. Ich kann normal wählen, weil ich finde, dass das fantastisch funktioniert. In unserem Fall kann ich verschiedene Einstellungen für meine erste Folie wählen. Hier habe ich einen Hintergrund , den wir ausgewählt haben. Wenn Sie zum Inhaltsteil übergehen, können Sie den Titel dieser Folie ändern. Lass uns das als Soaps machen. Ich kann die Beschreibung ändern, wenn ich will. Ich kann den Text meiner Schaltfläche ändern. Lass mich das einfach so machen, wie es jetzt ist. Sie können inzwischen sehen, dass die Schaltfläche genau hier erscheint. Sie können einen Link hinzufügen, oder Sie können dem Link ein dynamisches Tag hinzufügen, sodass er automatisch auf einen neuen Beitrag oder eine neue Seite verweist, auf die Sie verlinkt haben. Jetzt könnten dieselben Dinge auch auf andere Folien angewendet werden. Wenn ich zum Styling-Teil der ersten Folie gehe, werden Sie feststellen, dass es einen Schalter gibt, der benutzerdefiniert ist Mal sehen, was genau hier passiert. Hier haben Sie die Möglichkeit , den Inhalt, den Sie haben, neu anzuordnen Wir haben eine horizontale Position. Was bedeutet das jetzt? All die Dinge, die wir inhaltlich in Bezug auf die X-Achse haben, können geändert werden. Ich denke, Sie sind sich jetzt alle einig, dass die X-Achse, die horizontal ist, die Y-Achse vertikal ist, oder? Im Moment richten Sie die Mitte in Bezug auf die Horizontale aus. Das bedeutet, dass der Inhalt genau hier angezeigt wird. Wenn ich diese linke Zeile mache, erscheint sie genau hier. Wenn ich es richtig mache, erscheint es genau hier. Ordnung. Wenn ich dies oder das wähle, funktioniert der Inhalt entsprechend. Lassen Sie uns dies in der ersten Folienhülle links oder rechts platzieren, da Sie sehen können, dass das Produkt auf der linken Seite angezeigt wird. Natürlich ist es sinnvoll, unseren Text auf die rechte Seite zu verschieben. Ich kann auch die vertikale Position ändern. Ich kann es in der Mitte oben oder gegen Ende machen. Ich kann meinen Text sogar ausrichten. ob ich möchte, dass es rechtsbündig, mittig ausgerichtet ist und so weiter. Aber ich denke, richtig, Aline funktioniert gut, weil wir wollen, dass der Text nur im leeren Bereich unserer Produktseite angezeigt wird . Das Produktbild im Hintergrund. Fein. Sie können die Farbe Ihres Inhalts ändern. Sie können einen Textschatten hinzufügen, wenn Sie möchten. Sie können mit der Typografie herumspielen , indem Sie einfach darauf klicken Sie können mit Unschärfe, Horizontalem, Vertikalem und allem anderen herumspielen. Oder Sie können es auf die Standardeinstellungen zurücksetzen. Gut, wenn Sie im Inhaltsteil selbst nach unten scrollen. Hier haben wir den Teil mit den Folien umgangen. Welche andere Option haben wir jetzt? Wir haben Slider-Optionen, eine, die Sie unten sehen können. Wir haben die Option Ellipse, oder? Oder die Punkte, an denen wir Pfeile und Punkte sehen können. Hier haben Sie die Autoplay-Option. Das heißt, es wird sich automatisch weiter ändern. Oder Sie könnten einen Teil dieser Pause machen, wenn Sie mit der Maus darüber fahren. Das heißt, wenn mein Cursor auf dieser bestimmten Folie schwebt, ändert sich die Folie nicht Wenn ich darauf klicke oder irgendeine Art von Tastatureingabe ausführe, wird die Interaktion unterbrochen Hier hast du auch die automatische Wiedergabegeschwindigkeit. In Millisekunden sind 5.000 Millisekunden. Hier hast du eine Endlosschleife. Das heißt, es scrollt weiter, auch wenn es die dritte Folie durchgesehen hat. Es fängt wieder bei Null an, nämlich bei Folie Nummer eins. Hier haben Sie einen Übergang, unabhängig davon, ob Sie möchten, dass es sich um eine Folie oder ob Sie möchten, dass es ausgeblendet wird. Was passiert, wenn wir Fade verwenden? Lass uns einfach hier nachsehen. Sie würden feststellen, dass eine Fade-Animation angezeigt wird. Sie können es genau hier sehen. Und Sie können sogar die Geschwindigkeit dieses speziellen Übergangs ändern. Wie soll die Inhaltsanimation nun nach oben, unten, links, rechts und vergrößert sein unten, links, rechts und vergrößert Sie können zwischen verschiedenen Animationstypen herumspielen. Hier können Sie sehen, wie die Animation des Textes herunterkommt. Das war für den Inhaltsteil. Okay, hier hatten wir anfangs das oben, also können wir das machen. Außerdem können wir mit verschiedenen Navigationstypen herumspielen. Was wir gerade besprochen haben, betraf Pfeile und Punkte. Mal sehen, ob wir nur Pfeile haben, dann würden wir unten keine Punkte finden. Was ist, wenn wir nur Punkte haben? Würde keine Pfeile in die linke und rechte Richtung finden. Aber wenn wir keine der oben genannten Möglichkeiten haben, müssten wir manuell hindurchwischen Wenn ich meinen Cursor von rechts nach links bewege, würde er natürlich zur nächsten Folie wechseln Wenn ich den Cursor bewege, wenn ich die Maustaste gedrückt halte und den Cursor von links nach rechts bewege, wird die vorherige Folie wie diese ausgewählt. Ich hoffe, du verstehst, worum es geht. Verwenden wir jetzt einfach Pfeile oder tun wir einfach, was auch immer für Sie funktioniert. Auch wenn Sie das als Pfeile und Punkte behalten möchten , können Sie das tun. Wenn Sie zur Registerkarte Stil gehen, finden Sie verschiedene Optionen. Ob Sie mit dem Inhalt herumspielen möchten, ob Sie ihn mit Polsterung versehen möchten Ob Sie die Position dieses Artikels ausrichten möchten. Wenn ich das als horizontale Position zum Mittelpunkt mache, können Sie verschiedene Dinge finden. Was passiert mit der Folie? Sie können genau hier sehen, dass sich die Position des Inhalts ändert. Hier haben Sie eine vertikale Position. Sie können den Text auch ausrichten und so weiter. Hier im Titelteil können Sie die Typografiefarbe des Textes ändern und herumspielen. Die Beschreibung der Abstände könnte für die Schaltfläche, herumspielen. Die Beschreibung der Abstände könnte die wir hier haben, dieselbe sein Hier können Sie zwischen verschiedenen Tastengrößen wechseln. Fügen Sie Ihrer Schaltfläche erneut etwas Typografie hinzu. Sie können mit der Breite des Randes herumspielen. Wenn Sie möchten, dass der Rand etwas dicker ist, können Sie den Cursor nach rechts bewegen Wenn Sie möchten, dass der Rand dünn ist, können Sie den Cursor in Richtung des linken Cursors bewegen, oder ich sollte Slider sagen, wenn Sie abgerundete Schaltflächen hinzufügen möchten abgerundete Schaltflächen hinzufügen möchten Sie können den Randradius vergrößern. Sie können die Effekte auf Normal ändern und festlegen wie Sie zwischen verschiedenen Navigationen hin- und herwechseln können. Sollen die Pfeile drinnen oder draußen sein? Wenn du das draußen lässt, kannst du den Pfeil der Farben ändern. Da der Hintergrund des Containers weiß ist, können wir die Pfeile schwarz machen. Ich setze das einfach zurück und platziere meine Pfeile darin. Genau hier können Sie auch Seitennummerierung sehen, das sind die drei Punkte hier. Möchtest du, dass das drinnen oder draußen ist? Spiel um sie herum. Sie können die Größe ändern. Sie können die Farbe Ihrer Paginierung wählen. den Punkten unten können Sie mit den verschiedenen Farben herumspielen , die Sie als aktiv festlegen können Die ersten beiden Folien , die nicht auf unserem Bildschirm angezeigt werden, sind nicht aktiv. Sie sind wie in einem Grauton. Derjenige, der gerade aktiv ist , also Folie Nummer drei, befindet sich in einem dunklen schwarzen Punkt. Das haben wir hier im Style-Tab. erneut zur Registerkarte „Erweitert“ gehen, finden Sie dieselben Dinge , die Sie zuvor gesehen haben. Ich werde auch nicht näher auf Folien eingehen, ich werde meine Zeit nicht damit verschwenden, dieselben Dinge zu tun, die wir für Folie eins getan haben. Auch für Folie 2.3 hoffe ich, dass ich den Punkt verstanden habe. In Ordnung. Also, was müssen wir noch abdecken? Okay, das war für das Folienelement. Lassen Sie uns ein weiteres Element hinzufügen , nämlich das Galerieelement. Ich füge eine weitere Flexbox mit Abwärtsrichtung hinzu. Ich werde eine Galerie hinzufügen. Lass mich hier suchen. Sie haben eine einfache Galerie und eine einfache Galerie. Ich denke, beide Funktionen sind sich ziemlich ähnlich. Es gibt jetzt keinen großen Unterschied darin. Grundsätzlich können Sie mit dem Galerieelement all Ihre Arbeiten präsentieren. Dies könnte sich als nützlich erweisen, wenn Sie eine Portfolio-Website oder eine persönliche Portfolio-Website erstellen oder einfach nur versuchen, die gesamte Arbeit Ihrer Kunden zu präsentieren. Das Projekt funktioniert unabhängig davon, was Sie bisher gemacht haben oder Sie versuchen einfach, alle Bilder anzuzeigen. Nehmen wir einfach an, Sie sind Fotograf und zeigen alle Bilder an. Bilder aus der Tierfotografie oder wunderschöne Landschaftsbilder Sie können einfach mehrere Bilder aus der Medienbibliothek auswählen oder sie hochladen oder das Bild von einer anderen URL einfügen. Oder Sie können eine Video-Playlist und eine Audio-Playlist und ähnliche Dinge hinzufügen und erstellen Video-Playlist und eine Audio-Playlist . Hier kann ich einfach meine Befehlstaste, Formularsysteme und Steuertaste für Fenstersysteme gedrückt halten. Und ich kann mehrere Bilder auswählen und Sie finden mehrere Bilder, die hier unten ausgewählt sind hier unten ausgewählt damit ich eine neue Galerie erstellen kann. Ich kann die Reihenfolge sogar umkehren. Wenn ich will, kann ich sie neu anordnen, ich kann jedem einzelnen Bild eine Bildunterschrift hinzufügen Wenn ich möchte, kann ich sie als Galerie einfügen. Hier würden Sie feststellen, dass wir vier Spalten in einer einzigen Zeile haben . Gut, ich kann hier damit herumspielen. Sie werden feststellen, dass es sich bei dem Typ um ein einzelnes Vielfaches handelt. Was passiert, wenn ich dieses Vielfache wähle? Dann werden wir natürlich nicht alle Bilder hier sehen. Sehen wir uns hier zunächst alle Einstellungen an, die wir für den einzelnen Typ haben. Sie können sie hier standardmäßig oder nach dem Zufallsprinzip bestellen, Sie können das Laden aktivieren oder deaktivieren. Lazy Load bedeutet im Grunde, dass die Bilder nicht von Anfang an geladen werden . Das heißt, wenn Sie auf Ihre Website klicken, werden die Bilder nicht zuerst geladen. Sobald Sie nach unten scrollen und den Teil erreicht haben , in dem die Bilder angezeigt werden sollen, das Laden. Auf diese Weise könnte die Leistung der Website bis zu einem gewissen Grad gesteigert werden. Das hast du bei Lazy Load. Sie können mit den verschiedenen Layouteinstellungen herumspielen. Hier ist es auf Raster eingestellt. Was passiert in Justified? Hier siehst du das ausgerichtete Format, das heißt, die Bildgröße wird perfekt wiedergegeben, was in Maschinen passiert. Bei Maschinen wirst du dasselbe auch finden, weil die Abmessungen aller Bilder ziemlich gleich sind. Wenn Sie jedoch nur wenige Bilder haben , die andere Höhen- und Breitenmaße haben, wird die Höhe und Breite der Zeilen und Spalten entsprechend angepasst . Hier können Sie die Anzahl der Spalten festlegen. Ich kann es auf zwei reduzieren, damit die Fotos entsprechend vergrößert werden. Hier können Sie einen gewissen Abstand zwischen verschiedenen Elementen hinzufügen. Wenn ich meine Folie nach rechts bewege, werden Sie feststellen, dass der Abstand zunimmt. Es passiert etwas langsamer, aber Sie können einfach damit herumspielen. Sie können dazu einen Link hinzufügen. Sie könnten einen Leuchtkasten hinzufügen. Was passiert, wenn ich eine Lightbox hinzufüge? Lass mich das einfach auswählen. Ja. Wenn ich auf eines der Bilder klicke oder den Mauszeiger darüber bewege, kannst du feststellen, dass das Bild etwas dunkler Wenn ich darauf klicke, wird das Bild größer und du kannst das gesamte Bild richtig betrachten Das ist es, was Leuchtkasten eigentlich bedeutet. Lass mich einfach auf das Element klicken , damit wir verschiedene Einstellungen sehen können. Sie können mit der unterschiedlichen Bildauflösung herumspielen , die Sie haben. Hier hast du ein Overlay. Welches Overlay möchtest du haben? Etwas ein Hintergrund. Möchtest du jedem einzelnen Bild einen Titel hinzufügen? Wenn ich mit der Maus darüber fahre, siehst du einen Titel? Nein. Wenn ich das als Titel mache, können wir das hier hinzufügen, du findest den Titel des Bildes selbst. Das nimmt den Namen , den wir unserem Bild gegeben haben. Fügen Sie auch eine Beschreibung, die Überschrift oder den Alt-Text hinzu. Machen wir das einfach so, dass es nicht zu dem Stiltyp wechselt, den Sie für normal halten. Und natürlich können Sie eine Rahmenbreite hinzufügen. Sie können den Grenzradius hinzufügen. Sie können die Farbe des Randes ändern. Sie können Animationen hinzufügen. Wenn ich mit dem Mauszeiger auf das Bild fahre, wird es vergrößert Es könnte herauszoomen. Es kann sich nach links bewegen, es kann sich nach rechts bewegen. Es kann sich nach oben bewegen, oder es könnte sich nach unten bewegen. Ich hoffe, du verstehst, worum es geht. Sie können sogar die Dauer der Animation ändern. Sie können die Overlay-Kacheln ändern wenn Sie einen Mischmodus hinzufügen möchten , den wir gerade im Folienelement besprochen haben den wir gerade im Folienelement Etwas Ähnliches könnte hier getan werden Man kann zwischen verschiedenen Animationen hin und her wechseln. Sie können die Dauer der Animationsüberlagerung festlegen. Sie können den Inhaltsstil wählen und festlegen, ob der Text in der Mitte links angezeigt werden soll . Eine Linie, oder? Eine Linie in der Mitte oder oben oder unten. Möchtest du etwas Polsterung für deinen Inhalt? Möchten Sie Ihrem Text etwas Animation hinzufügen? Möchten Sie einer Sequenz eine Animation oder so geben ? Das sind die Dinge, die Sie für Ihr Galerieelement haben. Was passiert nun, wenn ich hier oben wähle, ich kann mehrere Galerien hinzufügen. Die Galerie, die wir gerade für diese vier Personen erstellt haben, direkt in dieser Galerie, ich habe diesen Titel für die Galerie. Lassen Sie mich dem einfach so etwas wie die Leute geben , die hinter dem Unternehmen stehen. Ordnung. Ich kann verschiedene Bilder auswählen. Nun, diese Galerie, die Galerie, die wir zuvor für den einzelnen Typ verwendet haben , war anders. Sie wurde nur für den einzelnen Typ gespeichert. Für mehrere müssen Sie hier eine weitere Galerie erstellen . Sie müssen erneut eine Reihe verschiedener Bilder auswählen . Ich werde eine Galerie erstellen. Ich kann das hier einfügen, und hier findest du alle Leute. Ich kann gleich hier mehrere Galerien hinzufügen. Hier habe ich den Filter zum Klicken, und nur diese Galerie würde angezeigt. Nehmen wir an, Sie sind Fotograf. Sie machen Fotos von Models, Sie klicken auf Fotos von Wildtieren und Wildtieren. Sie klicken auf Fotos von Autos und Produkten. Hier kannst du verschiedene Galerien erstellen und erstellen. Sie können Filter hinzufügen, indem den Mehrfachtyp verwenden. In Ordnung. Du kannst sie bestellen, wie du willst. Ich denke, alles danach ist ziemlich dasselbe, was wir für den einzelnen Typ besprochen haben. Ich hoffe auch, dass wir den Sinn der Verwendung des Galerieelements verstehen. Mal sehen, was wir mit dem Medienkarussell anfangen können. Lassen Sie uns eine horizontale Flexbox hinzufügen. Wir fügen ein Element hinzu, das als Media Causal bezeichnet wird. Wenn ich es hierher ziehe und dort ablege, funktioniert es ähnlich wie Folien Der einzige Unterschied besteht darin , dass es mit unserer Bildergalerie funktioniert. Für jeden Artikel, den Sie auswählen, ein Bild oder ein Video. Hier kann ich für jede Folie drei Produktbilder hinzufügen . Für die erste Folie würde dieses Produktbild für die zweite angezeigt werden. Hier kann ich zur zweiten gehen. Ich kann diesen wählen. Für den dritten kann ich diese Option wählen, ich storniere einfach die anderen beiden Artikel, die ich hatte. Jetzt kann ich den Skin ändern, ob es Karussell sein soll, ob ich eine Show mit Effekt haben möchte, die Diashow zeigt im Grunde alle Fotos oder Galerieelemente, die ich unten habe Und das Hauptbild, auf das gerade fokussiert wird , wird in voller Breite angezeigt Dann haben Sie Cover Flow, das so aussehen wird, ein Drei-D-Format, was meiner Meinung nach ziemlich cool ist. Hier kannst du einstellen, wie viele Folien pro Ansicht angezeigt werden sollen, wie viele Folien gescrollt werden sollen, wie hoch und breit diese sein sollen. Wenn Sie jedoch hier im Inhaltsteil auf die zusätzlichen Optionen klicken , finden Sie Pfeile , die Sie hier haben. Sie können die verschiedenen Paginierungselemente ändern. Sie können dies als Autoplay und eine Reihe verschiedener Dinge einrichten, die wir bereits in den Folien- oder Folienelementen gesehen haben zur Registerkarte Stil gehe, kann ich auch auf die Navigation klicken Und ich kann die Farbe der Pfeile für die Navigation so ändern , dass sie schwarz sind. Hier findest du Pfeile. Die Größe beträgt 20 Pixel. Ich kann die Farbe auf Schwarz ändern , damit sie sichtbar ist, okay, die Seitennummerierung ändern, egal ob ich möchte, dass sie drinnen oder draußen Ich kann mit verschiedenen Dingen herumspielen , die wir bereits früher besprochen haben Ich hoffe, Sie verstehen, worum es geht, und Sie haben ein gutes Verständnis und eine gute Grundlage für die drei Elemente 28. Bewertungen Element - Baue deine Business-Website mit This auf!: Richtig. Lassen Sie uns nun sehen, wie wir das Bewertungselement nutzen können. Nun, das Bewertungselement ist dem, was wir für das Testimonial-Element gesehen haben, etwas ähnlich was wir für das Testimonial-Element gesehen haben Der einzige Unterschied, den das Bewertungselement haben würde , besteht darin, dass es Bewertungen enthalten wird Das Sternenelement, das Sie hier sehen können. Hier, direkt unter diesem Produkt, Carrousal Media, wird es einen Link zu verschiedenen sozialen Symbolen direkt unter diesem Produkt, Carrousal Media Karussell. Ich werde einen neuen Abschnitt hinzufügen Ich werde das Flexbox-Layout so einstellen, dass es direkt in diesem Container horizontal Ich möchte Bewertungen hinzufügen. Lass es uns einfach hierher ziehen und dort ablegen. Jetzt würden Sie feststellen, dass diese Bewertung erscheint. Was wir nun tun können, wählen Sie einfach Ihren Container aus und stellen Sie sicher, dass der Inhalt gerechtfertigt ist. Elemente in der Mitte werden ebenfalls mittig ausgerichtet. Kommen wir zurück zu dem Teil, in dem wir die Bewertungen hier haben Sie werden feststellen, dass die Bewertungen, lassen Sie mich das einfach auf volle Breite ändern. Außerdem würde ich gerne die Höhe erhöhen. Ich werde die Höhe auf etwa 50 erhöhen , damit Sie sehen, dass hier die Mitte ausgerichtet ist. Wir haben hier drei Ellipsen, Sie haben die Übersicht und es gibt Pfeilsymbole auf der linken und rechten Seite Nun, vielleicht finden Sie es auf den ersten Blick nicht sehr deutlich , einfach weil die Hintergrundfarbe grau ist Versuchen wir, die Farbe des Hintergrunds zu ändern. Ich kann eine Hintergrundüberlagerung mit einem gewissen Farbverlauf hinzufügen. Lass uns versuchen zu sehen, wie es aussieht. Wenn ich diese Farbe verwenden würde, würde sie meiner Meinung nach einfach ihren Zweck erfüllen. In Ordnung, für die zweite Farbe. Ja, behalten wir es bei Rot oder lassen es vielleicht fallen , um die Farbe in ein bisschen lila zu ändern. In Ordnung. Das ist das Farbschema , mit dem wir weitermachen werden. Gut, hier findest du zwei zu diesem und diesem. Wenn ich jetzt auf die Bewertungen klicke, wirst du feststellen, dass wir derzeit drei Bewertungen haben. Jede einzelne Bewertung zeigt den Avatar, ihren Namen, den Nutzernamen und den Nutzernamen des Social-Media-Profils sowie das Symbol des Social-Media-Profils, mit dem sie verknüpft ist. Nun, wann kann sich das als nützlich erweisen, verglichen mit dem Testimonial-Element , das wir zuvor gesehen haben Diese Bewertung sieht nach einer echten Spielerei oder Fälschung aus. Wenn Sie ein solches Element in Ihre Website aufnehmen , um zu zeigen, dass Ihre Kunden Ihnen vertrauen , können Sie Social-Media-Profile tatsächlich mit ihren Profilen verknüpfen Im Wesentlichen wird dadurch der Eindruck erweckt, dass all diese Bewertungen echt sind und es sich nicht um gefälschte Bewertungen handelt Wenn ich auf einen der Artikel klicke, klicken wir hier auf den ersten Artikel Wählen wir das Bild dieser Person aus. Es wird genau hier angezeigt. Und der Name dieser Person ist John Doe. Ich kann den Titel ändern. Dieser Titel steht für ihren Benutzernamen eines beliebigen Social-Media-Profils , mit dem Sie ihn verlinken. Hier, direkt unter dem Bild, findest du das Symbol. Das heißt, ob Sie auf Instagram oder Facebook oder Linked In verlinken möchten , es hängt davon ab, auf welchem Social-Media-Profil sie sehr aktiv sind. Du solltest ihren Link hinterlassen. Sie können den Link zu ihrem Profil hier hinterlassen. Hier hast du den Titel. Nun, dieser Titel könnte anders sein, es könnte der CEO des Unternehmens sein, der Firmenname und verschiedene Dinge, Sie können eine Bewertung hinzufügen. Wenn ich etwas wie sagen wir einfach vier hinzufüge, dann werden Sie automatisch sehen, dass insgesamt fünf Sterne angezeigt werden , von denen sie Ihnen vier Sterne gegeben haben. Wenn ich etwas wie sechs gebe, wird es nicht angezeigt, weil der Höchstwert, den es enthält, fünf ist. Jetzt können Sie sogar Dezimalwerte hinzufügen. Wenn Sie etwas wie 2,12 0,22 0,3 sagen, wird das im Grunde Wenn Sie etwas wie 2,12 0,22 0,3 sagen nicht den gesamten Stern abdecken Sobald Sie die 2,5-Marke erreicht haben, deckt sie die Hälfte des Sie können genau hier sehen, dass wir 2,5 Sterne haben. Ich würde das einfach bei 4,5 belassen. Wir haben 4,5. Ich kann den Bewertungstext jetzt auch ändern. Ich behalte einfach, was auch immer es ist. Ich kann den Namen, das Bild für Bewertung zwei und Bewertung drei ändern . Ich kann den Namen auch in Emily Plant ändern. Genau hier. Wir können das auf Instagram ändern, weil ich glaube, dass der Großteil der weiblichen Bevölkerung auf Instagram aktiv ist. Hier würden Sie nun feststellen, dass die Farbe des Symbols schwarz ist. Es ist solide, es ist nicht blau, im Gegensatz zu dem, was wir bei Twitter gesehen haben. Was können wir dagegen tun? Sie werden feststellen, dass dieses spezielle Symbol, Instagram, einem Trend folgt. Dieses Symbol wird nur angezeigt, wenn das gesamte Perückensymbol einen schwarzen Rand und schwarze Linien Sie können die Farbe nicht ändern. Wenn Sie eines der Symbole manuell hochladen möchten , können Sie auf diesen Upload klicken und die Datei durchsuchen, in der sie sich in Ihrem System befindet. Gut, um auf diesen Teil zurückzukommen, Punkt drei. Ich kann das auf Will Smith ändern. Ich ändere das Bild zum Himmel. Jetzt werde ich Facebook verlinken. In Ordnung, hier sind wir. Nutzte drei Social-Media-Profile, Facebook, Twitter und Instagram. In Ordnung. Ich werde die Bewertung nicht ändern, ich behalte sie einfach, was auch immer darin steht. Ich kann mehr Artikel herstellen. Ich kann auch mehr Artikel hinzufügen. Wenn ich möchte, kann ich ein Duplikat davon machen. Ich könnte einige davon entfernen. Hier habe ich die Möglichkeit auszuwählen, wie viele Folien zur Ansicht angezeigt werden sollen. Was ist also, wenn ich mehrere Bewertungen habe? Nehmen wir an, ich habe statt drei etwa sechs davon. Fein. Es sollten nur zwei Bewertungen angezeigt werden. Für die erste Folie hier können Sie sehen, dass wir zwei Rezensionen haben. Wenn ich hier scrolle, findest du noch einen Satz von zwei, dann noch zwei. Dieser war auch auf der zweiten Folie zu sehen. Es wiederholt sich für die dritte Folie. Lass uns weiterhin so etwas machen. Genau hier haben Sie die Folien pro Ansicht. Hier haben Sie Folien zum Scrollen. Wie viele Folien kannst du sehen? 12.345,6 Also hier kannst du es auf vielleicht reduzieren, sagen wir einfach drei Was wird in diesem Fall passieren? Nur wenige Bewertungen werden korrekt angezeigt. Diese Geldrezensionen werden angezeigt, wenn Sie beim Scrollen auf den Folien herumspielen. Lassen Sie uns das hier auf die Standardeinstellung setzen. Sie können die Breite jeder einzelnen Bewertung festlegen , wenn Sie diesen kleinen Bewertungsabschnitt abgeben möchten , wenn Sie diesen kleinen Bewertungsabschnitt abgeben Dann können Sie die Breite auf 80% einstellen . Hier haben Sie auch zusätzliche Optionen, die wir auch im Medienkarussell gesehen haben, nämlich das Aktivieren oder Deaktivieren des Pfeilsymbols hier auf der linken und rechten Seite Für die Pg-Nation könnt ihr entweder Punkte oder Bruch oder Fortschrittsbalken verwenden Punkte oder Bruch oder Fortschrittsbalken Der Fortschrittsbalken wird oben angezeigt. Gut, für diese Bewertung verwende ich die Seitennummerierung Ich kann die Übergangsdauer festlegen. Sie können sehen, dass es sich mit etwa 500 Millisekunden ziemlich schnell bewegt mit etwa 500 Millisekunden ziemlich schnell Hier haben Sie die Möglichkeit, automatisch einzuspielen. Sie können die Autoplay-Geschwindigkeit einstellen. Sie können diese Endlosschleife erstellen oder sie einfach ausschalten , damit sich die Bewertungen nicht immer wieder ändern Wenn ich den Cursor auf eine der Bewertungen bewege, werden Sie feststellen, dass sie pausiert Wenn ich klicke, wird dieselbe Aktion ausgeführt. Das heißt, es wird hier pausieren. Sie können das Bild einstellen. Das Bild, über das wir sprechen ist der Avatar oder das Bild der Person. Hier haben Sie Lazy Load , das wir besprochen haben. Ich werde nicht nochmal hingehen, komme in die Style-Abteilung. Sie können den Abstand zwischen den Elementen hier ändern zwischen den Elementen hier Wenn Sie nur eine Bewertung auf einer Folie haben, macht es keinen Sinn, den Slider zu verschieben. Genau hier haben Sie den Abstand zwischen verschiedenen Bewertungen. Sie können die Hintergrundfarbe für jede einzelne Bewertung ändern . Was passiert? Lass es mich dir zeigen. Wenn ich die Farbe ändere, werden Sie feststellen, dass die Einstellungen für den farbigen Hintergrund auf die Bewertung selbst angewendet werden. In Ordnung, hier kannst du einen Rahmen hinzufügen, wenn du willst. Was passiert, wenn ich etwas wie, sagen wir einfach 2345, hinzufüge sagen wir einfach 2345 Selbst wenn ich fünf hinzufüge, würdest du es nicht sehen, weil die Farbe der Standardhintergrundfarbe sehr ähnlich ist der Standardhintergrundfarbe Aber wenn ich die Rahmenfarbe in etwas ändere , sagen wir, Schwarz, dann können Sie jetzt sehen , dass der Rand sehr fett erscheint . Wenn wir es auf vielleicht, sagen wir einfach zwei, reduzieren , würde das gut aussehen. Oder vielleicht sogar drei. Ich kann einen Randradius hinzufügen, wenn ich möchte, dass die Testimonials oder Bewertungen in einem Format mit abgerundeten Kanten angezeigt werden, und ich kann das tun, ich kann eine Polsterung hinzufügen, damit ich kann eine Polsterung hinzufügen, damit mein Inhalt nicht am Rand haften bleibt Was passiert, wenn ich einfach den Abstand vergrößere? Das wirst du bekommen. Gut, du kannst es rückgängig machen, indem du einfach Null zu allen Elementen hinzufügst. Aber wenn du das tust, was wird passieren? Sie werden einfach feststellen, dass der Inhalt die Grenze Ihrer Bewertungen berührt . Wir könnten das auf vielleicht erhöhen, sagen wir einfach auf etwa 15 oder so. 15 würden hier gut aussehen. Sie können die Hintergrundfarbe nur für den Header festlegen. Wenn ich die Farbe festlege, wirst du sehen, dass die Hintergrundfarbe nur auf den Teil angewendet wird, in dem du den Namen der Person, ihre Position oder die Profil-URL, das Social-Media-Symbol und ihren Avatar hast. Ordnung, in Ordnung. Wenn ich eine Lücke hinzufüge, wirst du feststellen, dass die Lücke zwischen dem Inhalt und der Kopfzeile zunimmt. Machen wir das einfach rückgängig, sodass es auch für die Hintergrundfarbe wieder auf die Standardeinstellungen zurückgesetzt Standardeinstellungen auch für die Hintergrundfarbe wieder auf die Ich setze das zurück. Wir haben einen Separator Sie können hier sehen, dass Sie den Separator haben. Sie können die Farbe des Trennzeichens ändern, wenn Sie möchten, aber wir behalten die Standardfarbe bei. Und Sie könnten sogar die Größe des Trennzeichens ändern. Wenn du willst, dass es fett ist, kannst du es fett machen. Wenn du eng sein willst, kannst du es eng machen. Finde jetzt diesen Teil, den John Doe und den Emily Blunt Sie werden feststellen, dass der Inhalt etwas weiter unten als die Kopfzeile erscheint Das bedeutet, dass im Vergleich zu dieser Bewertung eine gewisse Lücke zwischen der Kopfzeile und dem Inhalt besteht . Vor allem, weil diese Bewertung die richtigen Bewertungen hat, hat sie einige Sterne gegeben, aber nicht für diese Bewertung. Wenn du Bewertungen für alle Rezensionen hinzufügst, wirst du feststellen, dass der Inhalt automatisch angepasst wird , oder? Wenn wir in den Textteil des Stilbereichs gehen, können Sie die Typografie ändern, Sie können die Farbe des Namens, den Personennamen und den Titel ändern den Personennamen und den Titel Die Rezension, genau hier, ist das, was in Laura Epsom-Text geschrieben ist Dann hast du ein Bild. Nun zum Bild, Sie können die Größe der Person hier vergrößern oder verkleinern . Wenn ich das um die 70 mache, würde es so aussehen. Licht. Oder vielleicht denke ich, dass 40 bis 50 ganz gut funktionieren. Hier hast du eine Lücke zwischen dem Namen und dem Foto. Hier hast du den Grenzradius. Wenn Sie diesen Randradius auf Null setzen, haben Sie spitze Kanten im Vergleich zu abgerundeten Kanten Wenn Sie einen Kreis mit abgerundeten Kanten oder eine quadratische Form mit abgerundeten Kanten haben möchten , können Sie mit dem Rand D herumspielen , um diese Einstellung, die einen Randradius von zehn Pixeln hat, ungefähr anzupassen diese Einstellung, die einen Randradius von zehn Pixeln hat, Wenn ich zu gehe, kann ich das offiziell oder benutzerdefiniert machen , wenn ich auf Benutzerdefiniert klicke. Dafür kann ich jetzt die Farbe ändern. Sie können für Twitter sehen, auch die Farbe des Symbols auf Rot ändert. Wenn Instagram zu Rot wechselt, ist die Instagram-Farbe idealerweise auf, ich denke, lila oder so, lila oder violett eingestellt ich denke, lila oder so, . Hier würden Sie feststellen, dass die Einstellungen für Facebook gelten. Wenn ich das zurücksetze, wirst du außerdem feststellen, dass die offizielle Farbe ausgewählt wird. Sie können die Größe der sozialen Symbole erhöhen oder verringern . Genau hier hast du die Bewertung. Welche Bewertung möchtest du? Fantastische Schrift oder Unicode. Was passiert mit Unicode? Sie können sehen, dass es verschiedene Arten von Sternenlayouts gibt. Wenn ich das als unmarkierte, als solide Einstellungen vornehme. Wenn ich diese Gliederung mache, wirst du eine andere Einstellung finden, oder? Ich wähle Fontosum und Outline. Es würde einen geringfügigen Unterschied zwischen der Bewertung geben , die Sie sehen werden In Ordnung, hier haben Sie Solide und Sie haben Gliederung. Sie können mit der Größe dieser Bewertungen herumspielen. Sie können, wenn Sie möchten, sogar einen gewissen Abstand zwischen den einzelnen Sternen hinzufügen . Sie könnten die Farbe der Sterne von gelb auf rot, orange, alles, was Sie möchten, ändern, Sie könnten sogar die Farbe der nicht markierten Sterne Ordnung. Endlich haben wir die Navigation. Diese Navigation bezieht sich nun auf die Pfeile, die wir in der linken und rechten Richtung haben der linken und rechten Richtung und auf die unteren Paginierungspunkte, die wir haben Ich könnte vielleicht mit der Größe der Pfeile herumspielen und ihre Farbe so ändern, dass sie sichtbar sind Sie können genau hier sehen, dass Weiß am sichtbarsten ist. Anstatt eine hellgraue Farbe zu verwenden, könnte ich mit verschiedenen Seitengrößen herumspielen. Ich kann sogar die Farbe ändern, nur die Farbe für die aktiven Folien All diese Dinge könnten direkt hier erledigt werden , indem Sie zum Abschnitt für Fortgeschrittene gehen. Sie können mit dem Rand und der Polsterung herumspielen, Sie können den Inhalt ausrichten und so weiter und so fort Ich hoffe, ihr habt verstanden wann und wie ihr das Bewertungselement nutzen Vom Element oder vom Pro Plug In. 29. Inhaltsverzeichnis für deine Blog-Beiträge: Leute, dieser Vortrag wird sehr hilfreich für diejenigen sein , die Blockposts auf ihrer Website in Rechnung stellen wollen . Wie ihr gleich hier auf meiner Wikipedia-Seite sehen könnt. Und ich habe bei jeder Suche, die Sie machen, nach einem Artikel in der Internetpresse in Wikipedia gesucht , egal ob es sich um ein Web-Press-Element oder was auch immer Sie suchen, Sie werden auf jeden Fall ein Inhaltsverzeichnis auf der linken Seite finden . Das werden wir auf unserer Webpresse-Website verwenden . Das Inhaltsverzeichnis ist ein Element, das vom Element - oder Pro-Plug-In angeboten wird. Dadurch können die Benutzer, die Ihren Blockbeitrag besuchen, zwischen verschiedenen Überschriften und verschiedenen Teilen Ihres Blockbeitrags den Inhalt zu überspringen , den sie für ihre Recherche oder nur für ihre Informationssammlung als unnötig erachten. Wenn ich hier einfach auf Plugins klicke, wirst du das automatisch feststellen, der Inhalt springt direkt zu dem Teil, den ich lesen möchte Hier habe ich den Themennamen, oder ich sollte sagen Unterthema, und den Inhalt selbst Die Art und Weise, wie diese ganze Seite eingerichtet ist , der Titel ist Tres, sie ist in H gesetzt, ein Tag hier hast du den Inhalt , der idealerweise im P- oder Span-Tag ist Dann habt ihr die Übersicht aufgeteilt. Übersicht, unter der Sie ein Trennzeichen haben. Im Grunde bedeutet das, dass es sich um ein H-Two-Tag handelt, das die Unterthemen definiert In den Unterthemen gibt es jetzt vielleicht noch mehr Unterthemen wie Themen, Plug-ins und mobile Anwendungen, Barrierefreiheit und Barrierefreiheit und Dies sind Ihre drei H-Tags. Alles klar. Das ist die Hierarchie , der jeder Block Post folgt, genauso repliziert Ich habe den gesamten Inhalt von dieser Seite kopiert und hier einen neuen Blockbeitrag erstellt Sie werden feststellen, dass ich den Titel als Adresse habe. Hier habe ich einige Inhalte. Sie können sehen, dass dies Ihr Titel-Tag ist. Das sind zwei. Sie können sehen, dass Sie einfach zwischen verschiedenen Tags wechseln können , wenn Sie etwas geben möchten , und wenn Sie der Wörter einen Absatz geben möchten, können Sie es einfach markieren und auf diese Schaltfläche hier klicken . Das ist ein H-Trei-Tag, richtig? Ich habe kein Trennzeichen zwischen dem H-Zwei-Tag und dem Inhalt hinzugefügt . Wenn du geben möchtest, dann kannst du das tun. Hier hast du wieder das als H drei. Wenn du nach unten scrollst, wirst du feststellen , dass auch andere H-Zwei-Tags da sind. Das ist die Art von Post, die wir haben und die wir umgehen werden. Gehen wir zurück zu unserem Adress-Dashboard. Darin gehen wir nun zu Templates und Theme Builder. Sobald wir hier klicken, gehen wir zum einzelnen Beitrag und importieren einige der vorgefertigten Vorlagen für das Design eines einzelnen Beitrags. Hier finden Sie eine Reihe verschiedener Optionen. Ich möchte mit diesem Teil fortfahren. Ich werde das einfach einfügen, gut, obwohl Sie sehen können, dass es in einem Blockbeitrag mit Pesto-Sauce-Rezepten angezeigt wird Blockbeitrag mit Pesto-Sauce-Rezepten Standardmäßig werden jedoch keine Standardinhalte Im Grunde werden die Stileinstellungen für Ihren vorhandenen Blockbeitrag angewendet . Ich hoffe du verstehst, worauf es ankommt. Fügen wir sie in unsere Seite ein. Hier findest du den letzten Block-Beitrag, den wir gedrückt haben, also genau das hat es hier in diesem speziellen Container ausgewählt . Idealerweise sollten Sie ein bestimmtes Bild für Ihren Blockbeitrag verwenden, das als Hintergrundbild für diesen Container angezeigt wird. Hier haben Sie zwei Container für diese Flexbox. Hier hast du den Titel, eine Beschreibung oder ich würde sagen einige Beitragsinformationen darüber , wann genau dieser Beitrag veröffentlicht wurde? Darunter findest du die Details oder einen Auszug. Aktuell habe ich bis auf diesen Blockbeitrag noch keine angegeben , du würdest hier nichts finden Dann hast du den Inhalt selbst. Sie können sehen, dass es mehrere verschiedene Dinge gibt. 23 Tags. Sobald du nach unten scrollst, findest du eine Option , um dies zu teilen und Kommentare hinzuzufügen, wenn du etwas geben möchtest. Ganz unten auf dieser Blockseite findest du einen verwandten Blockbeitrag oder einen Blockbeitrag, findest du einen verwandten Blockbeitrag oder einen Blockbeitrag der vom selben Autor veröffentlicht wurde. Korrekt Dies sind die Dinge, die Sie vorerst idealerweise finden werden. Ich werde die Stileinstellungen des Titels und der Beitragsinformationen und all das nicht ändern oder vielleicht bearbeiten , weil das nicht der Zweck der Erstellung dieser Lektion ist. Ich füge einfach schnell ein neues Element und suche nach einem Inhaltsverzeichnis, das ich einfach per Drag-and-Drop direkt hier in diesen Container ziehe. Sobald ich es ablege, wirst du feststellen, dass wir diese Übersicht mit zwei H-Tags haben. Wir haben so viele Tags. Jetzt nimmt es auch das Folgende auf, diesen Teil, wo das eigentlich Teil unserer Blockseite ist, aber es ist nicht Teil unseres Inhalts, oder? Wie können wir sie aus unserem Inhaltsverzeichnis entfernen? Weil dies nicht Teil des Wordpress-Titelinhalts ist. Das sind die Dinge, die Teil des Inhalts sind, von der Übersicht bis zur Geschichte. Das sind die Bestandteile unseres Inhalts. In der Übersicht finden Sie Themen, Plug-ins und mobile Anwendungen. Sie können sehen, dass es einige gibt, hier bildet sich bereits eine Hierarchie . Klicken wir gleich hier im Bereich Editing Paint unter dem Tab „ Inhalt“ auf das Inhaltsverzeichnis-Element im Bereich Editing Paint unter dem Tab „ Inhalt“ auf das Inhaltsverzeichnis-Element Sie können den Titel in etwas wie „Gehe zum Inhalt“ ändern , Sie können ihn ändern. Was auch immer Sie diesem Titel geben möchten . Wie hier ist das H-Tamal-Tag für diesen Header auf H vier gesetzt Wenn Sie dies nun auf H drei ändern, wird natürlich davon ausgegangen, dass dies Teil Ihres Blockpostinhalts ist, aber das ist nicht der Fall Im Grunde hilft das Inhaltsverzeichnis den Benutzern, zwischen verschiedenen Themen oder Unterthemen zu navigieren zwischen verschiedenen Themen oder Unterthemen , die Ihr Blockpostinhalt tatsächlich enthält Ordnung, wir behalten einfach das H-Tamal-Tag, damit es H vier ist Nun, darunter findest du „Einschließen“ und „Ausschließen“. Darunter findest du Anker nach Schlagwörtern . Nun, was bedeutet das? Hier findest du 234h6 und all die verschiedenen Arten von Tags Jetzt gibt es mehrere, mehrere, mehrere Tags. Wie bereits erwähnt, H 2.3-Tags lediglich zeigen H 2.3-Tags lediglich, worum es in diesem gesamten Unterthema geht Was sind die Unterabschnitte unter dem Unterabschnitt? Ich würde sagen, Unterabschnitte sind wie H drei und Unterthemen sind Und der Titel selbst ist dein H-One-Tag. Gut, die H456 werden im Allgemeinen für solche verwendet , die nicht so wichtig sind, aber du möchtest einfach ein Styling hinzufügen, damit es rüberkommt , als ob das auch Teil deines Blockposts ist Meiner Meinung nach sollte dieser H-Four-Tag nicht enthalten sein. Wir können das einfach entfernen. Wir können Hi sogar entfernen , da es nicht Teil des Inhalts von Blockbeiträgen ist. Wir behalten einfach h zwei und h drei. Sie müssen auch ausschließen. Das bedeutet, dass Sie den Inhalt der Tags H zwei und S drei in das Inhaltsverzeichniselement aufnehmen . Sie schließen einige der Dinge aus. Sobald ich hierher gehe, findest du darunter CSS-Selektoren in einer kommagetrennten Liste. Was bedeutet das jetzt Wenn Sie Cascading Stylesheets umgangen haben oder eine Vorstellung von der allgemeinen Webentwicklung mit benutzerdefiniertem Code wie HTML, CSS, Javascript haben, dann müssen Sie etwas allgemeinen Webentwicklung mit benutzerdefiniertem Code wie HTML, CSS, Javascript haben, über CSS-Selektoren und ID-Selektoren gelernt haben CSS-Selektoren und ID-Selektoren Es gibt eine Reihe verschiedener Selektoren. Ich habe dieses gesamte Konzept in meinem Webentwicklungskurs behandelt in meinem Webentwicklungskurs Sie können auschecken, wenn Sie möchten. Der Zweck hinter der Verwendung von CSS-Selektoren ist, dass wir, wie gesagt, diesen Abschnitt nicht in unser Inhaltsverzeichnis aufnehmen wollen unser Inhaltsverzeichnis da er nicht Teil unseres Blockposts ist Wir können einfach auf diesen Teil klicken. Wir können gleich hier zum Abschnitt „Erweitert“ gehen. Wir können diesen CSS-Klassenklassen nur zur Vereinfachung eine CSS-Klasse geben . Was bedeuten Klasse und ID? Ein Element könnte eine Klasse haben, Klasse könnte für mehrere Elementklassen verwendet werden. Sagen wir einfach, du bist ein Student der Ingenieurwissenschaften, alles klar, und du studierst Informatik. Nun, an Ihrer Universität gibt es etwa drei Studiengänge für Informatik Studierende der Informatik, der Ingenieurwissenschaften, sind drei Klassen Wenn die Leute Informatik sagen, dann besteht die Möglichkeit, dass alle Schüler der drei Klassen ihre Hand heben und sagen, ja, wir sind Teil der Informatik. Aber wenn ich speziell die Rollennummer sage, sagen wir, vier heben die Hand, dann gibt es nur einen Schüler, der seine Hand hebt, richtig? Das ist Ausweis. Die ID ist einzigartig. Sie wird nur einem Element, einem Abschnitt, einem Container zugeordnet. Auf diese Weise könnten Klassen für mehrere Elemente verwendet werden. Immer wenn Sie diese Klasse aufrufen, wenn Sie einige Stileinstellungen auf sie anwenden, werden die Einstellungen für alle Elemente angewendet , die dieser Klasse zugeordnet sind. Wenn ich einem Element eine ID gebe, wenn ich diese ID in CSS nenne und ihm einen Stil gebe, werden nur diese Stileinstellungen auf dieses Element angewendet, das mit dieser ID verknüpft wird. Weil ID nur einem Element zugeordnet ist , weil jedes einzelne Element eine eindeutige ID hat. Wohingegen dies bei Klassen nicht der Fall ist. Ich hoffe, wir verstehen es hier. Wir werden eine Klasse hinzufügen, so etwas wie einen verwandten Beitrag. Lassen Sie mich das als verwandten Beitrag angeben. Ordnung, ich könnte das auch als Kamelfall angeben, aber ich würde es einfach als verwandten Beitrag belassen. Gut, ich werde diesen verwandten Beitrag kopieren. Ich werde das kopieren. Ich gehe zurück zu diesem Teil, dem Inhaltsverzeichnis und der Option Ausschließen. Ich setze einen Punkt an die erste Stelle. Wann immer Sie Ihren Klassenselektor verwenden, setzen Sie immer den Punkt an die erste Stelle, wenn Sie den Namen angeben, wenn Sie eine Verbindung herstellen oder wenn Sie zum ersten Mal ein Element mit einem Klassennamen definieren Sie müssen keinen Punkt setzen. Aber wenn Sie diese Klasse aufrufen auf dieses Klassenelement anwenden möchten einige Einstellungen auf dieses Klassenelement anwenden möchten, setzen Sie zuerst den Punkt und dann den Klassennamen ein. Jetzt können Sie sehen, dass dieser Teil nicht mehr enthalten ist. Fein. Obwohl ich hier immer noch die Betriebssystemwerte und den C Plus-Mastery-Blockbeitrag sehen die Betriebssystemwerte und hier immer noch die Betriebssystemwerte und den C Plus-Mastery-Blockbeitrag Schauen wir uns auch an, was wir dagegen tun können, da es sich bei diesen beiden Abschnitten um unterschiedliche Abschnitte handelt Hier kannst du sehen, ob ich auf Struktur klicke, warte eine Sekunde. Hier haben wir verwandte Rezepte. Okay, das ist ein Abschnitt, wir der Klasse zuordnen müssen. Wir müssen diesem Container den klassenbezogenen Beitrag geben. Was ich getan habe, ich habe nur die Klasse der Überschrift gegeben. Was ich nicht tun musste. Was ich tun werde, gehe ich zu Überschrift, das habe ich ausgewählt. Ich scrolle im Bereich für Fortgeschrittene nach unten. Wenn ich nach unten scrolle, habe ich CSS-Klassen. Ich werde einfach Befehl X oder Control X ausführen , je nachdem , welches Betriebssystem Sie verwenden. Ich klicke auf den Abschnitt Verwandte Rezepte. Ich klicke auf Erweitert. Ich füge die Klasse gleich hier ein. Ich gehe zurück zu meinem Inhaltsverzeichnis und schließe dasselbe aus. Und jetzt können Sie sehen, dass dieser Teil nicht angezeigt wird. Ich hoffe, Sie verstehen, dass Sie einen Teil des Inhalts aus Ihrem Inhaltsverzeichniselement ausschließen müssen. Ordnung, gehen wir zurück zu Include, jetzt haben Sie auch einen Container. Das bedeutet, dass dieses Steuerelement das Inhaltsverzeichnis auf Überschriftenelemente unter einem bestimmten Container beschränkt das Inhaltsverzeichnis auf Überschriftenelemente unter einem bestimmten Container Was bedeutet das? Wir werden uns das später ansehen, aber wir haben auch eine Markeransicht. Was bedeutet das? Derzeit können Sie sehen alle Unterthemen unter diesen Zahlen nummeriert sind, so wie diese beiden Tags „Übersicht“ heißen In der Übersicht haben wir nun Unterpunkte 1.11 2131 Punkt 4.1 Wenn ich für das zweite, das zweite Unterthema auch andere Unterabschnitte gehabt für das zweite, das zweite Unterthema hätte, wäre es auch 2,12 0,22 Punkt 3.1 gewesen . Ich kann Zahlen oder Aufzählungspunkte verwenden, wenn ich Aufzählungspunkte Das werde ich sehen. Jetzt kann ich das Symbol ändern, wenn ich möchte oder wenn ich keine Symbole verwenden möchte. Ich kann einfach auf keins klicken. Wenn ich das Symbol ändern möchte, kann ich einfach auf das Symbol klicken und die Symbolbibliothek wird angezeigt. Ich kann einfach nach Pfeilen suchen. Okay, lass uns einfach nach Pfeilen suchen, oder ich könnte einfach auf alle Symbole klicken und nach einer Kugel suchen. Okay, wir haben keine Kugel, suchen wir nach Vorwärts. Was ich im Grunde suche diese beiden Dreieckssymbole, oder wie soll man sagen, dass sie als Ihre dreieckigen Klammern bezeichnet werden , richtig Wir suchen nach dreieckigen Klammern. Was sind die empfohlenen Aufzählungspunkte? Sie können einen Kreis mit einem Umriss sehen, einen Umrisskreis mit einem Punkt oder einem quadratischen Punkt, rechten oder quadratischen Aufzählungspunkt, sollte ich sagen. Wenn du in verschiedenen Symbolen scrollst, findest du viele verschiedene Optionen. Ich werde nach Angle suchen, das ist genau das, wonach ich gesucht habe. Lassen Sie mich das hier einfach nutzen. Sie werden feststellen, dass diese Art von Symbol auf die gesamte Inhaltsliste angewendet wird . Fein. Was können wir sehen, wenn ich zu den zusätzlichen Optionen gehe? Möchtest du Wordrapow hinzufügen? Keiner meiner zwei oder drei Tags hat einen wirklich langen Text, Auch wenn ich versuche, etwas hinzuzufügen, lass mich versuchen, es zu tun. Aber ich glaube nicht, dass ich dazu in der Lage wäre, weil wir hier keine Möglichkeit haben, den Text zu bearbeiten. Wir haben die Möglichkeit, mit dem Styling und dem erweiterten Bereich herumzuspielen . Aber wenn ich den Inhalt ändern möchte, muss ich zu meinem Theme zurückkehren. Presseeditor anpassen. Was im Grunde genommen ein Zeilenumbruch bedeutet, ist, dass, wenn der Name Ihres Unterthemas sehr lang ist, das Zeichen- oder Wortlimit sehr groß ist Im Idealfall passt es sich von selbst an , dass die gesamte Textlänge in zwei oder drei Zeilen angezeigt wird Wenn Sie jedoch den Zeilenumbruch ein- und ausschalten, bedeutet das, dass er nur die gesamte Zeile einnimmt Und dann werden die Wörter , die ausgeschnitten werden, mit Auslassungspunkten versehen Das ist es, was Wrap im Grunde bedeutet. Sie haben die Box-Option minimiert. Was steht da? Wenn Sie diese Option aktiviert haben, können Sie sie im Grunde zusammenklappen und erweitern Dies ist die Funktion, die Sie mit der Option „ Minimierte Box“ erhalten können Jetzt können Sie sogar das Symbol für diese Option zum Reduzieren und Erweitern ändern für diese Option zum Reduzieren und Erweitern Sie können zwischen verschiedenen Symbolen wählen indem Sie auf die Symbolbibliothek klicken. Oder wenn Sie Ihre eigene benutzerdefinierte SG hochladen möchten. Sie können es zum Erweitern tun, Sie können zwischen verschiedenen Symbolen wählen. Aber vorerst behalte ich einfach das, was hier angezeigt wird. Es wird auch zeigen, dass diese minimierte Version im Tablet-Porträt sichtbar sein sollte Tablet-Porträt sichtbar sein Was bedeutet es also, wenn ich den Desktop-Modus habe? Ich kann sehen, wie es zusammenbricht und expandiert. Wenn ich zum Tablet-Bildschirm gehe, sehe ich das wieder. Aber wenn ich auf ein Mobilgerät gehe, sehe ich auch diesen Teil. Mal sehen, was passiert, wenn ich einen Desktop oder eine kleinere Version habe. Das bedeutet, dass dieser Teil bereits geschlossen ist, wenn ich auf meinem Mobilgerät bin. Wenn ich auch auf meinem Tablet bin, wird es geschlossen. Aber wenn ich in meinen Desktop-Modus zurückkehre, wird er geöffnet. Das ist im Grunde genommen das Minimierte. In Ordnung, ich hoffe, du verstehst, worum es geht. Ich schicke es einfach zurück zur Standardeinstellung, nämlich Tablet-Porträt. Jetzt habe ich hier die hierarchische Ansicht. Was bedeutet das? Sehr einfach. Im Überblick haben wir Themen, Plug-ins und mobile Anwendungen, oder? Diese sind Teil dieses Übersichtsthemas. Wenn ich das ausschalte, scheint es, dass sich um separate Abschnitte handelt, sie sind nicht Teil davon Ich muss darauf klicken, damit die Leute das verstehen können Okay, auf Mobilgeräten sind Anwendungen Teil des Übersichtsbereichs. Sie haben auch die Möglichkeit, Artikel zusammenzuklappen. Wenn ich das mache, kann ich auf diese Übersicht klicken. Und wenn jemand auf „Übersicht“ klickt, werden ihm Optionen zur Auswahl, Themen, Plug-ins usw. angezeigt. Halten Sie diesen Teil auch in Ordnung und kommen Sie zum Stil-Teil. Okay, was haben wir sonst noch für Inhalte? Lassen Sie mich zunächst sicherstellen, dass wir es nicht sind. Ich überspringe keines der Dinge. Wenn ich wieder auf Ausschließen gehe, hast du die gleiche Markierung und das gleiche Symbol, das du geben möchtest Wenn ich zum Stilbereich gehe, kann ich Hintergrundfarbe der Box ändern oder der gesamten Box eine Rahmenfarbe hinzufügen. Ich kann die Farbe des Loaders hinzufügen. Was passiert, wenn ich die Farbe des Loaders hinzufüge? Das heißt, wenn Sie expandieren, sagen wir, Sie haben eine Menge verschiedener Unterabschnitte Der Blockbeitrag ist sehr lang und es gibt mehrere Inhaltsverzeichnisse genau hier in diesem Element selbst. Es kann einige Zeit dauern, bis der Inhalt geladen ist Dort kannst du eine Farbe hinzufügen, wenn du etwas geben möchtest. Ich kann einen Rand hinzufügen, ich kann einen Randradius hinzufügen. Aber lass uns versuchen, es zu tun. Versuch es und tu es erst dann, dann werden wir herausfinden, ob es überhaupt gut aussieht oder nicht. Vorerst füge ich eine Randfarbe hinzu. Okay. Das ist Hintergrundfarbe. Wir wollen eine hellere Hintergrundfarbe. Ich werde das so etwas wie einen dunkelgrauen Farbton beibehalten. Ich denke, das würde gut aussehen. Fein. Wir werden auch die Farbe des Textes ändern. Sehr hier gemacht. Ich kann etwas wie, sagen wir, Schwarz mit einer Randfarbe versehen. Ordnung. Ich habe Lodo Color Geben wir das zu etwas wie leuchtendem Gelb. Oder ich wähle eine hellgelbe Farbe. Fein. Ich kopiere den Textcode. Gut, ich kann einen Rahmen mit hinzufügen. Wenn ich Rahmen mit hinzufüge, können Sie sehen, dass der Rahmen um mein gesamtes Inhaltsverzeichnis größer und fetter wird Ich kann einen Randradius hinzufügen, um die Kanten abzurunden. In Ordnung, ich denke, etwa 25 Pixel sehen gut aus. In diesem Fall kann ich den Inhalt mit einer Polsterung versehen. Ich kann die Höhe anpassen. Ich kann Box-Schatten geben, wie ich will, aber ich werde keine Box-Schatten geben. Ich setze es zurück. Wir können auch einen Header stylen. Versuchen wir, dieser Überschrift dieselbe gelbe Farbe zu geben. Gut, ich kann das in etwas wie diese Farbe ändern . Ich denke, das würde gut aussehen. Fein. Nun zur Textfarbe, was ich tun werde, ich wähle Weiß als Text, aber es sieht nicht so schön aus. Wir müssen unsere gelbe Farbe etwas dunkler machen. Nur dann wäre es sichtbar. Und genau hier macht es Sinn. Ich kann einfach bis zu dem Teil herumspielen , wo ich genau die Farbe bekomme , die gut dazu passen würde. Ordnung. Also ich finde, diese Farbe sieht gut aus, gut. Nun, was die Typografie angeht, kann ich das auf Poppins setzen Ich kann einfach nach Poppins suchen. Ich kann sogar die Schriftgröße ändern, wenn ich will, aber ich werde sie einfach so lassen , wie sie ist Ich kann hier die Symbolfarbe für jede einzelne Symbolfarbe ändern , die wir haben. Wir können das auf Weiß ändern, dieses Symbol, das wir zum Zusammenklappen und Erweitern haben. Wir können es auf Weiß ändern. Außerdem können wir die Breite des Trennzeichens hinzufügen. Das bedeutet, wie dick unser Separator sein soll. Ich werde es einfach bei drei Pixeln belassen. nun zum Listenteil und zum Abschnitt Stil kommen, werden Sie feststellen, dass wir diese Dinge hier umgehen werden. Sie können die Höhe anpassen, diese Typografie, wir können das auf Poppins einstellen Hier können Sie die Farbe des Textes ändern. Sie können Einrückungen hinzufügen. Einrückung ist der Abstand zwischen diesem Teil. Das findest du genau hier. Wann immer Sie Themen hinzufügen , die Teil eines großen Themas sind, lassen Sie am Anfang definitiv etwas Platz. Das nennt man Einrückung. Sie können den Einzug anpassen, Sie werden feststellen, dass die Einheit auf EM eingestellt ist Sie können das auf Pixel umstellen, das wäre besser zu verstehen, oder? Sie können ihn anpassen Wenn Sie das auf Null bringen, dann ist es offensichtlich so, als ob Sie diese Art von Dingen, die als hierarchische Ansicht bezeichnet werden, nicht wahr? Sie können einfach zurückgehen, Einzug vergrößern oder vielleicht sogar die Standardeinstellung einstellen Aber im Moment möchte ich das nur bei 15 Pixeln belassen , weil das für mich gut aussieht Was die Textfarbe angeht, ändere ich sie in Weiß, damit sie sichtbar ist. Ich kann sogar für jeden einzelnen Punkt Unterstreichungen hinzufügen. Wenn ich möchte, kann ich den Hover-Effekt ändern. Wenn ich mit der Maus über eines dieser Elemente fahre, kann ich die Farbe des Hovers ändern Ich kann den aktiven Wert ändern. Das heißt, wann immer dieses bestimmte Element aktiv ist, kann ich seine Farbe auf Gelb ändern. Was auch immer auf diesen Teil eingestellt ist, wir können es so ändern. Lass uns das machen. Dafür klicke ich auf Header. Ich kopiere den Hex-Code. Ich gehe hier in Hover zu List. Außerdem verwende ich dieselbe Farbe für aktiv. Außerdem werde ich dieselbe Farbe verwenden. Hier haben wir die Übersicht ausgewählt. Das bedeutet, dass derzeit die Übersicht eingestellt ist. Wir sehen uns die Übersicht an. Wenn ich mit der Maus über eine der anderen Seiten fahre, werden Sie feststellen, dass auch eine Unterstreichung angezeigt wird und sich auch die Farbe der Schrift ändert Korrekt. Hier hast du einen Marker, was bedeutet das? Lass uns versuchen, das herauszufinden. Marker ist im Grunde die Farbe Ihrer Aufzählungspunkt-Symbole . Korrekt. Wir können das sogar auf Weiß setzen. In Ordnung, und du kannst die Größe ändern. Sie können es etwas groß erscheinen lassen , damit es sichtbar ist. 12 Pixel wären meiner Meinung nach ausreichend. Ordnung, wenn Sie zum Abschnitt für Fortgeschrittene kommen, können Sie die Elemente ausrichten und das können Sie erstellen. Klebrig auch. Nun, wie es uns helfen würde, das klebrig zu machen. Lass uns sehen. Zuerst werde ich das veröffentlichen. Und sobald ich auf Veröffentlichen klicke, wirst du sehen, dass wir gefragt werden, ob du eine Bedingung stellen möchtest Wenn ich auf Werbung klicke, kannst du sehen, dass ich das Inhaltsverzeichnis für alle meine einzelnen Seiten und Beiträge hinzufügen kann Inhaltsverzeichnis für alle meine einzelnen Seiten und Beiträge hinzufügen Aber möchte ich dieselben Einstellungen für meine Homepage anwenden , die wir mit dem Element oder Pro erstellt haben Nein, ich möchte nur dieses spezielle Inhaltsverzeichniselement für unseren Blockbeitrag präsentieren dieses spezielle Inhaltsverzeichniselement . Ich wähle einfach Beitrag blockieren aus. Jetzt kann ich sogar eine andere Kategorie hinzufügen , in der ich die Einstellungen für alle blockierten Beiträge anwenden möchte , oder wenn du Beiträge blockieren auswählst, kann ich das tun. Wenn ich innerhalb aller Blockposts ausschließen möchte, möchte ich nur von einem Blockbeitrag ausschließen Aber ich möchte das Inhaltsverzeichnis-Element für alle anderen Blockbeiträge anwenden Inhaltsverzeichnis-Element für alle anderen Blockbeiträge Nehmen wir an, ich habe 100 Blockbeiträge , von denen ich dieses Inhaltsverzeichniselement in 99 dieser Blockbeiträge verwenden möchte. Aber nur einer dieser Blockposts sollte das Inhaltsverzeichnis nicht Was würdest du tun? Würdest du einfach weitermachen und den Titel von 99 Block Post weitertippen? Nein, du kannst einfach alles verwenden, anstatt Include, du kannst eine Bedingung hinzufügen und diese ausschließen. Im Bereich Ausschließen können Sie jetzt zum Beitrag gehen und nach diesem bestimmten Blockbeitrag suchen. Ich kann nach einem Blog suchen, sagen wir mal nach einem. Ich möchte diesen Teil nicht in das erste Protokoll aufnehmen. Ordnung. Ich kann auch andere Bedingungen hinzufügen, aber vorerst lasse ich es einfach so, wie es ist. Wenn wir zyklisch speichern, können wir eine Vorschau der Änderungen anzeigen. Änderungen in der zyklischen Vorschau. Sobald ich nach unten scrolle, werden Sie feststellen, dass sich unser Inhaltsverzeichnis an seiner festen Position befindet, oder? Es ist hier an seiner festen Position. Wenn ich möchte, dass dieses Inhaltsverzeichnis klebrig ist, was im Grunde bedeutet, dass sich mein Inhaltsverzeichnis zusammen mit meinem Cursor bewegen sollte, auch wenn ich nach unten scrolle . Das heißt, es sollte sich an seinen Teil halten. Und es spielt keine Rolle, ob ich nach unten oder nach oben scrolle, es sollte bei mir sein, so wie es da ist. Genau hier siehst du den linken Bereich selbst. Der linke Bereich ist ausschließlich dafür vorgesehen. Egal wie weit ich nach unten scrolle, das Inhaltsverzeichnis-Element wird hier sein und nicht das, was wir hier sehen können, das sich an seiner festen Position befindet. Welche Änderungen müssen wir vornehmen? Zuallererst müssen wir die Breite so anpassen, dass es sich nicht mit unserem Inhalt überschneidet, auch wenn ich es als Sticky markiere. Andernfalls wäre der Inhalt nicht sichtbar. Korrekt. Hier drüben, was werden wir tun? Wir wählen das einfach aus. Wir werden die Breite so ändern , dass sie ungefähr zu diesem Teil passt. Gut, veröffentliche das. Danach klicken wir auf dieses Elementinhaltsverzeichnis. Wir gehen zum Abschnitt für Fortgeschrittene. Im Bereich „Erweitert“ müssen wir hier nach unten zum Teil von Motion Effects scrollen . Unter Bewegungseffekte findest du Sticky. Sie möchten es so machen, dass es oben oder unten klebrig ist, wo genau es für alle Geräte oder nur für den Desktop klebrig sein sollte . Offensichtlich wollen wir es nur für den Desktop. Andernfalls reicht die Breite des Tablets und des Mobiltelefons nicht aus, um den Inhalt und das Inhaltsverzeichniselement unterzubringen. Wir streichen einfach das Tablet-Gerät durch und behalten es für den Desktop. Wenn ich nach unten scrolle, werden Sie feststellen, dass das Inhaltsverzeichnis genau hier angezeigt wird. In Ordnung, das ist die Sache , die du hier machen kannst. Jetzt können Sie die Breite auch so einstellen , dass sie so viel Platz einnimmt. Weil Sie wissen, dass das Inhaltsverzeichnis nur so viel Platz einnimmt, oder? Ich kann die Breite vergrößern, okay. Hier ist, was du bekommen wirst. Lass uns das veröffentlichen. Lassen Sie uns sehen, ob wir die reflektierten Änderungen sehen können. Jetzt können Sie sehen, dass ich gerade meine Plug-ins verwende. Plug-ins ist hervorgehoben. Wenn ich nach unten zu mobilen Anwendungen scrolle, werden mobile Anwendungen, andere Funktionen und Barrierefreiheit angezeigt . All diese Dinge werden hervorgehoben. In Ordnung. Ich kann sogar expandieren und zusammenbrechen. Dieser Teil kollabiert ebenfalls. Wenn wir zum nächsten gehen, kann ich einfach direkt darauf klicken und es wird nach unten zu diesem bestimmten Teil gescrollt und so weiter Wenn ich mir einen anderen Blockbeitrag wie Block eins ansehen würde, würden wir ein solches Inhaltsverzeichnis nicht finden. Sie können sehen, dass es kein Inhaltsverzeichnis gibt. Was ist, wenn ich zu einem anderen Blockpost gehe? Nehmen wir an, ich bin auf meinem FEMA-Blockpost? Lassen Sie uns sehen, ob wir das Inhaltsverzeichnis sehen können. Hier können wir das Inhaltsverzeichnis sehen. Jetzt der einzige Grund, warum wir keine Überschriften finden können, weil der Hauptteil unseres Blockpostens keine H2h3-Tanks hat und Korrekt. Das ist der Grund, warum Sie hier kein Inhaltsverzeichnis zu sehen bekommen. Du kannst das umgehen , ähm, wie gesagt, dieser Teil, der Container im rechten Bereich wird dein vorgestelltes Bild als Hintergrund haben. Du kannst sie einfach entfernen, indem du einfach auf die Flexbox hier klickst, den Container. zum Bereich Stil gehen, finden Sie das vorgestellte Bild. Sie können sie entfernen , wenn Sie dies veröffentlichen. Jetzt wurden die Standardeinstellungen dieser Vorlage geändert. Selbst wenn ich mir den Figma-Blockbeitrag ansehe, würdest du im Hintergrund des Inhaltsstable-Elements kein hervorgehobenes Bild finden Hintergrund des Inhaltsstable-Elements kein hervorgehobenes 30. Lottie - Lass deine Website professionell und übertrieben aussehen!: Ordnung. Nun bin ich mir nicht ganz sicher, ob Sie jemals vom Lottie-Element gehört haben, als Sie Ihre Website mit dem Element oder dem Plug-In Lottie ist jedoch im Wesentlichen ein Open-Source-Animationsdateiformat , das auf der Javascript-Objektnotation basiert Json ist etwas Ähnliches wie Javascript, aber es ist eine vereinfachte Version davon Aus diesem Grund haben sie eine sehr geringe Größe lassen sich schneller laden als herkömmliche Animationsdateitypen wie GIFs und all diese Jetzt hat Lottie im Vergleich zu GIF noch einen weiteren Vorteil Sie können interaktive Websites sein Sie machen Ihre Website für die Benutzer sehr attraktiv Sie können es sehr interaktiv gestalten. Und es wird Ihre Fähigkeiten im Bereich Website-Design auf die nächste Stufe heben. Deshalb werden wir davon erfahren. Jetzt, genau hier, werden Sie sehen, dass ich auf meiner Kontaktlinsen-Seite bin. Genau hier auf der Contactors-Seite. Ich möchte einen Heldenbereich für diese Seite hinzufügen , indem ich einfach die Flexbox auswähle Ich wähle das Layout mit zwei Containern aus. Auf der linken Seite werde ich den Text hinzufügen. Und auf der rechten Seite werde ich eine Lottie-Animation hinzufügen. Lassen Sie mich zuerst Lottie hier hinzufügen, sobald ich sie per Drag & Drop gezogen habe. Genau hier. Das ist übrigens ein Pro-Element. Ordnung, das ist also eine Standardanimation, die Sie hier im Inhalts-Tab sehen können . Sie finden Lottie und Einstellungen. In Lottie werden Sie feststellen, dass Sie entweder Ihre Mediendatei oder eine externe URL verwenden können Was bedeutet das jetzt? Und wo genau könnten Sie diese Lottie-Dateien bekommen Lassen Sie uns zunächst sehen, wie wir unsere Mediendatei hier auf Lottie Files.com hochladen können . Dies ist kein Open-Source-Programm, aber ich würde sagen, es ist ein Marktplatz, auf dem Sie Lottie-Animationen völlig kostenlos kaufen oder herunterladen können , je nachdem, welche Art von Animation und welchen Plan Sie verwenden Im Moment verwende ich die kostenlose Version und habe gerade nach Play gesucht Jetzt gibt es eine Menge verschiedener Animationen und diese sind völlig kostenlos, obwohl Sie unten vielleicht Pro finden. Aber diese sind einfach kostenlos zu benutzen. Wenn Sie einen von ihnen finden, der bezahlt wird, haben sie einen gelben Kreis mit einem Kronensymbol darin. Ich würde sagen, das ist die kostenpflichtige Animation. Aber nehmen wir jetzt an, ich möchte diese spezielle Animation nutzen, oder? Also kann ich einfach hier drüben klicken und du kannst zwischen den verschiedenen Farben wechseln, die du hast. Sie können Animationen bearbeiten. Sie können die Hintergrundfarbe bearbeiten. Aber wir wollen nur einen transparenten Hintergrund, damit wir ihn einfach in jeden Bereich unserer Website einbetten Also kann ich einfach auf Animation bearbeiten klicken. Und ich kann das in Creator öffnen, oder ich kann es im Lote Editor öffnen Also lass mich das einfach im Lottie Editor öffnen . Und wenn ich das einmal gemacht habe, kann es einige Zeit dauern, bis es geladen ist. Und hier kann ich die Farben ändern , indem ich einfach auf alle Farben Du wirst feststellen, dass es bei den Orangetönen funktioniert , oder? Wenn ich die Farbe ändere, indem ich einfach hier klicke, kann ich Grün oder eine andere Farbe wählen. , mit welcher Farbe ich gerne herumarbeite, ich kann einfach diese grüne Farbe auswählen und schon ich kann einfach diese grüne Farbe auswählen und schon entstehen die verschiedenen Arten von Grüntönen Sie können gegen Ende der Animation sehen, die grüne Farbe in einem sehr transparenten Zustand befindet Wenn es dagegen mit dem Pulseffekt beginnt , ist es sehr dunkel. Das hast du. Sie haben auch das Symbol in der Play-Schaltfläche. Nun, dieses Bild, ich bin mir nicht ganz sicher, ob Sie dieses Bild bearbeiten können , weil es hier, es ist keine Animation. Sie könnten das Bild durch etwas ersetzen, was Sie möchten, oder Sie könnten es einfach mit dem herunterladen, was Sie haben. Ich werde diese Animation einfach speichern. Sobald ich das getan habe, erhalte ich Option, es in meinem Arbeitsbereich zu speichern, und ich kann einen beliebigen Namen angeben. Gut, also werde ich das einfach in meinem ersten Projektordner speichern . Dies ist jetzt der Standardordner , den Sie mit Ihrem Konto erhalten. Sobald du ihn anklickst und ihn in deinem Workspace speicherst, hast du die Möglichkeit, ihn herunterzuladen und in ein Lottie Json-Format zu exportieren Das ist es, was wir wollen, obwohl es auch andere Optionen gibt, wie optimiertes Lottie, Jason, optimiertes Lott und viele andere Formate wie GIF, Webp, Four MOV, die anderen vier Formate, die du hier in der unteren rechten Ecke deines Bildschirms sehen kannst hier in der unteren rechten Ecke deines Bildschirms sehen Nun, das sind keine interaktiven Elemente. Nun, genau hier, wie Sie sehen können, habe ich verschiedene Animationen. Jetzt haben diese Animationen einen Namen im Umlauf. Sie können sie nicht einfach so in der Vorschau anzeigen. wie Sie eine Vorschau von Bildern oder Videos und anderen Dingen anzeigen können. Hier musst du sie einbetten oder während des Exports musst du deiner Animation einen Namen geben, damit du sie einfach in einen beliebigen Bereich importieren kannst Im Moment werde ich nur diesen Teil auswählen Und ich werde auf Auswählen klicken, um zu sehen ob die richtige Animation abgerufen wurde. Ja, Sie können sehen, kontaktieren Sie uns, Animation ist einwandfrei. Nun, zunächst haben Sie gesehen , dass die Animation funktioniert hat. Ausnahmsweise, oder? Es geht nicht herum. Im Loop können Sie sogar die Ausrichtung anpassen. Zuallererst können Sie entweder die Mittellinie links oder eine Linie rechts zur Linie machen , aber selbst wenn ich die Ausrichtung ändern würde, würden Sie keine notwendige Änderung finden nur weil sie die gesamte Höhe und Breite in Bezug auf die Flexbox-Abmessungen einnimmt die gesamte Höhe und Breite in Bezug auf die Flexbox-Abmessungen einnimmt Bezug auf die Flexbox-Abmessungen Richtig, wir haben zwei Spalten. Dieser Flexbox-Container wird unseren Titel für die Kontaktseite haben und dieser wird die Animation enthalten In Ordnung, hier können Sie eine Bildunterschrift hinzufügen, wenn Sie möchten. Sie können eine benutzerdefinierte Überschrift als Titel hinzufügen. Dann wird der Titel, der für die Animation vorhanden ist , genau hier angezeigt. Wenn ich nur eine Bildunterschrift hinzufügen kann, muss ich dem eine Bildunterschrift geben. Gut, wenn ich das benutzerdefiniert mache, muss ich den benutzerdefinierten Titel für diese Animation eingeben. Aber vorerst behalten wir es einfach. Keine darunter. Sie finden jetzt einen Link, Sie können entweder einen benutzerdefinierten Ural hinzufügen, das heißt, wenn jemand auf diese Animation Lottie-Animation klickt , wird er zu einer beliebigen Webseite weitergeleitet Gut, jetzt haben wir den Teil von Lottie behandelt. Mal sehen, was wir mit den Einstellungen machen können. Im Bereich der Einstellungen haben Sie verschiedene Optionen, z. B. das Auslösen in verschiedenen Ansichtsfenstern Zuallererst füge ich noch eine weitere Flexbox hinzu, um zu zeigen , ob die Ausrichtung überhaupt funktioniert oder nicht Hier habe ich diese vertikale Dimension. Ich werde gleich ein weiteres Lottie-Element hinzufügen. Ich werde einfach laden, ich werde nur die neueste Animation hochladen , nämlich die Play-Taste Alles klar jetzt. Okay? Okay. Ich bin mir nicht ganz sicher, warum das Bild nicht über die Play-Taste erscheint So wie wir es hier gesehen haben. Was? Wir werden das einfach durch eine andere Animation ersetzen. Mal sehen, was wir hier bekommen können. Ich finde, das sieht gut aus, aber diese Animationsgröße ist viel zu groß. Aber trotzdem, wenn wir versuchen können, das links auszurichten. Ja, Sie können sehen, dass es nach links ausgerichtet ist. Es ist nach rechts ausgerichtet und es ist nach der Mitte ausgerichtet. Sie haben verschiedene Optionen, um Ihre Animation auszurichten , indem Sie zum Einstellungsteil wechseln. Was kannst du sehen? Sie können die Viewport-Einstellungen sehen Das bedeutet, dass Sie diese Animation immer dann auslösen , wenn Sie sich in diesem bestimmten Viewport befinden Was bedeutet nun Viewport? Hier können Sie sehen, dass ein Viewport ein Polygonanzeigebereich in der Computergrafik ist ein Polygonanzeigebereich In der Theorie der Computergrafik gibt es zwei Bereiche, etwa Begriffe von Relevanz beim Rendern einiger Objekte nicht unbedingt eine komplizierte Erklärung, aber was im Grunde bedeutet, dass ist nicht unbedingt eine komplizierte Erklärung, aber was im Grunde bedeutet, dass die Displaygröße davon abhängt, welche Art von Gerät Sie verwenden Nehmen wir einfach an, wir befinden uns auf dem Testbildschirm und ich verwende insbesondere das Macbook Air M, eines der Abmessungen meines Monitors, meines Laptop-Bildschirms, in Bezug auf Breite und Höhe, was auch immer es ist, es nimmt die gesamte Breite ein und die Animation beginnt , wann immer ich das auf meinem Viewpoort-Bildschirm betrachte Jetzt das Viewport direkt unter dem Triggerpunkt, Sie werden feststellen, dass das Viewport 0% 200% eingestellt ist. Das heißt, wenn ich meinen Bildschirm scrolle, spielt es keine Rolle, meine Animation geht weiter. Meine Animation wird 0-100% betragen. Aber was ist, wenn ich das hinzufüge? Viewpoort-Animation sollte zwischen wo auch immer Sie hingehen, oder sogar in Ihren Ordnern, in denen Sie mehrere Dateielemente haben. Sie finden die Bildlaufleiste immer genau hier Die Viewpoort-Animation sollte zwischen 50 und 65% liegen. Nehmen wir für diesen Teil an, Sie können im äußersten rechten Teil unserer Webseite eine beliebige Website sehen, wo auch immer Sie hingehen, oder sogar in Ihren Ordnern, in denen , richtig der Bildlaufleiste können Sie nun tatsächlich scrollen und Ihr gesamtes Ansichtsfenster anzeigen Mit der Bildlaufleiste können Sie nun tatsächlich scrollen und Ihr gesamtes Ansichtsfenster anzeigen, oder? Ihr gesamtes Viewport Wenn ich also diese Lottie-Animation so anpasse diese Lottie-Animation so , dass das Viewport bei etwa 50% beginnt und die Animation bei 65% endet. Wenn ich jetzt nach unten scrolle, werden Sie feststellen, dass ich über diesen Teil gesprochen habe , aber die Bildlaufleiste deckt immer noch nicht die 50% des Wenn ich wieder nach unten scrolle, können Sie sehen, dass hier etwa 49% des Bildschirms abgedeckt sind Sie können genau hier sehen, warum die Animation gestartet wurde. Wenn ich wieder nach unten scrolle, weißt du was? Ich werde das einfach auf dem Laufenden halten, damit die Animation weiterläuft. Sobald ich die 65% meines Darstellungsfensters überschritten habe, würde die Animation nicht mehr ausgeführt werden Sie werden feststellen, dass die Animation gestoppt wurde. Wenn ich wieder nach oben scrolle, wirst du feststellen, dass die Animation wieder läuft. Das ist es, was im Grunde genommen in diesem Viewport eigentlich bedeutet. Aber die beste Vorgehensweise ist , es weiter laufen zu lassen. Oder wenn Sie nur die Animation in einem bestimmten Viewport scrollen möchten nur die Animation in , dann können Sie das tun Die anderen Auslöser, die wir haben, sind das Klicken, wenn ich auf das Element klicke, erst dann startet die Animation, richtig. Das heißt, klicken. Und wie oft möchten Sie diese Animation hier ausführen? Loop wird ins Unendliche gehen. Wenn ich das einfach auf drei ändere, wird es dreimal in einer Schleife animiert Danach wird es aufhören. Dies ist das zweite Mal, dass es läuft. Warten wir, bis es das dritte Mal läuft. Nach dem dritten Mal werden Sie feststellen, dass die Animation nicht ausgeführt wird. Dies ist das dritte Mal , dass sie ausgeführt wird. Mal sehen, ob es das nächste Mal läuft oder nicht. Hier werden Sie feststellen, dass die Animation stoppt, nachdem Sie sie dreimal ausgeführt haben. Genau hier können Sie es sogar ändern. Wenn Sie es einfach leer lassen, läuft es unendlich weiter Gefolgt davon, dass Sie mit dem Mauszeiger über andere Auslöser fahren. Immer wenn Sie den Cursor innerhalb des Lote-Elements bewegen, wird die Animation gestartet Und sobald Sie mit der Maus aus dem Element herausfahren , wird die Animation trotzdem Sie haben gerade den Startpunkt ausgelöst, richtig? Es beginnt, wenn Sie den Cursor innerhalb des Elements bewegen. Hier hast du einen Hover Out. Immer wenn Sie als Auslöser auf On klicken. Sie haben auch die Möglichkeit, mit dem Mauszeiger auszusteigen. Das heißt, was ist, wenn Sie den Cursor außerhalb des Loselements bewegen Sie den Cursor außerhalb des Loselements In diesem Fall können Sie die Animation entweder rückgängig machen oder sie anhalten, als ich die Animation gestartet habe Lassen Sie mich zunächst die Animation starten, indem ich meinen Cursor bewege. Wenn ich jetzt den Cursor nach draußen bewege, können Sie sehen, dass die Animation angehalten wurde Was ist, wenn ich rückwärts mache? Ich bringe meinen Cursor rein. Wenn ich jetzt den Cursor nach draußen bewege, können Sie sehen, dass die Animation umgekehrt wird So folgt es. Die anderen Auslöser, die wir haben, sind Scroll. Was passiert nun mit Scroll? Zuerst füge ich einfach ein weiteres Flexbox-Layout mit Abwärtsrichtung Ich werde ein weiteres Chargenelement für dieses hinzufügen. Dieser, den wir gesehen haben. Ich gehe zu den Einstellungen. Wir wollen dafür nicht scrollen, wir machen einfach weiter, gut, rückwärts ist das, was wir wollen. In Ordnung. Nun zum anderen Abschnitt, der anderen Flexbox, die wir haben. Ich füge Lottie Element hinzu. Ziehen Sie es einfach hierher und legen Sie es dort ab. Ich lade eine Mediendatei hoch. Fahren Sie fort. Ich habe auch eine Radanimation. Lass uns versuchen, das mitzubringen. Ich denke, das könnte der Richtige sein. Lass uns sehen. Ja, das ist das Modell mit Rad, aber ich bin mir nicht ganz sicher, warum das Bild nicht angezeigt wird. Ich muss zurück zu meinem Dashboard mit Lottie-Dateien. Und wenn ich einmal hier bin, muss ich mir diese Animation genau hier ansehen . Ich habe das. Ich werde den Titel in etwas wie Wheel ändern , damit es leicht zu verstehen und wiederzuverwenden ist. Okay, hier sind wir. Ich sehe, dass hier ein Punkt ist. Ich bin mir nicht ganz sicher, ob das Bild exportiert werden würde. Lassen Sie uns versuchen, das erneut herunterzuladen. Ich gehe zurück. Ich lade eine neue Datei hoch und ich kann einfach dieses Feld nehmen, in dem diese Meldung nicht mehr angezeigt wird. Ordnung. Ich wähle einfach Wheel aus. Okay, die Animation wird nicht angezeigt. nicht ganz sicher. Lass uns versuchen, eine andere Animation herauszufinden. Ich habe anfangs nur Rad ausgewählt , das war falsch. Versuchen wir herauszufinden, was mit dieser Animation passiert. Ordnung, wenn wir diese spezielle Animation oder vielleicht sogar diese Animation verwenden . In Ordnung, was passiert dann? Lass uns sehen. Ich klicke einfach darauf. Ich klicke auf Save two Work Space Up, speichere es. Und es wird ein neuer Tab geöffnet. Ändern Sie jetzt auf der neuen Registerkarte den Namen der Animation in etwa Rad zwei. In Ordnung, und wir werden die Json-Datei herunterladen. Lass uns das herunterladen. Ich werde eine neue Json-Datei hochladen. Hoffentlich sollte das funktionieren. Ja, hier kannst du sehen, dass die Radanimation richtig angezeigt wird. Die Viewport-Einstellung soll Scrollen sein. Ich möchte, dass die Animation ewig anhält. Das heißt, sie sollte unendlich sein mehr aussehen, wenn Sie das Scrollen auslösen. Was passiert, wenn du nach oben scrollst? Sie können sehen, dass sich das Rad gegen den Uhrzeigersinn dreht. Wenn ich nach unten scrolle, drehen wir uns im Uhrzeigersinn. Das ist es, was es im Grunde bedeutet. Wenn Sie nun die Einstellungen für das Ansichtsfenster auf ändern, sagen wir einfach, dass Sie bei etwa 65 bis 70% beginnen und bei 100% enden. Wenn Sie dann nach unten scrollen und bis zu dem Teil scrollen, den Sie nicht etwa 67% des Ansichtsfensters abdecken, werden Sie die Animation des sich drehenden Rades nicht finden Wenn Sie über die 67% Ihres Darstellungsfensters hinaus scrollen, wird die Animation nur dann einwandfrei ausgelöst Aber lassen Sie uns einfach Null bis 100% beibehalten . Jetzt haben Sie hier Effekte im Verhältnis zum Viewport, oder Sie möchten, dass sie sich auf die gesamte Seite beziehen Dies bezieht sich auf die gesamte Seite und nicht auf Ihren Standpunkt Das heißt, der Standpunkt könnte sein wie viele Elemente Sie direkt von diesem Teil bis zum Endteil hinzufügen direkt von diesem Teil bis zum Endteil Aber die Seite wird nur dort sein, wo Ihre Kopfzeile endet und wo Ihre Fußzeile beginnt, das ist Ihre Okay, hier, wenn ich weiter nach unten scrolle, wo ich meine Fußzeile sehen kann, dann würde die Animation nicht funktionieren Das ist die ganze Seitensache Bringen wir es zurück zu Viewport. Jetzt haben Sie auch Start - und Endpunkt. Was bedeutet das? Ich habe auch ein paar andere Animationen , mit denen Sie das viel besser verstehen werden. Ich werde ein weiteres Lottie-Element hinzufügen. Okay, lass mich hier einfach nach Lottie suchen. Ich werde die erste Animation hochladen, die ich verwendet habe. Ist es dieser? Dieser. Versuchen wir es durch diesen zu ersetzen. Okay, das ist das Rad, das ist das Kontaktrad. Lass uns das sehen. Nein, das auch nicht Ich hatte auch eine Autoanimation. Lassen Sie mich sehen, ob wir das gebrauchen können oder nicht. Ich tippe einfach Auto ein oder ich könnte Motorrad, Fahrrad, irgendwas eingeben. Der einzige Grund, warum ich nach einem Auto oder einem sich bewegenden Objekt suche , ist, dass ich zeigen kann, wie genau dieser Teil funktioniert, den Standpunkt und den Endpunkt Ordnung, hier habe ich diese spezielle Animation , die ich verwenden kann Ich gehe zum Herunterladen, Speichern im Arbeitsbereich. Ja, wähle dieses Projekt als meinen Ordner aus. Wenn Sie einen weiteren Ordner hinzufügen möchten, werden Sie feststellen, dass dieser nur in der Pro-Version verfügbar ist . Okay, warum wurde kein neuer Workspace geöffnet? Lass es uns noch einmal sagen. Idealerweise sollte es ein neues Band öffnen, von dem wir es als JSON-Datei herunterladen können. Fein. Es könnte auch möglich sein, dass wir alle kostenlosen Credits aufgebraucht haben , die uns in der kostenlosen Version zugewiesen wurden . Ich bin mir nicht sicher. Ich werde es herausfinden müssen. Gebt mir einen Moment und ich melde mich wieder bei euch. Okay, hier bin ich in meinem Armaturenbrett. Ich kann das einfach umbenennen in. Sobald es fertig ist, laden wir es herunter und ich werde es hochladen. Ich wähle diese Mediendatei aus und ändere sie. Lass uns versuchen, das zu benutzen. Okay. Trotzdem denke ich, dass es ein Problem mit Lottie selbst geben könnte, weil das Bild nicht geladen Aber hier findest du das kleine quadratische Kästchen. Sind die Räder. Das größere Feld genau hier, wo mein Cursor schwebt, ist das Auto selbst, und im Hintergrund haben Sie die Landschaft Ordnung, jetzt kann ich den Startpunkt setzen, sagen wir 50, und ich kann 100 daraus machen Was passiert jetzt? Du wirst sehen , dass dieser Schwarzbär genau hier auftaucht. Es beginnt also nach den 50% der Animation genau hier. Wenn ich hier auf diese Animation klicke, dreht sich der große Turm um, oder? Das sind also die 50% der Animationslänge genau hier. Sie würden feststellen, dass Sie im Hintergrund einen großen Wolkenkratzer haben , von da an beginnt und endet die Animation bei 100%. Sie könnten es sogar , dass der Endpunkt bei 80% der Animationslänge liegen sollte 80% der Animationslänge Das sind also die Dinge, die Sie jetzt umgehen können Es mag für Sie alle keinen Sinn ergeben , weil wir einfach nicht die gesamte Landschaft sehen Und das Objekt, das wir hier haben, können Sie mit der Geschwindigkeit Ihrer Animation spielen, egal ob Sie möchten, dass es mit einer Geschwindigkeit von 1 x, 1,5 oder 2 x ausgeführt wird , das beschleunigt die Animation nur. Hier haben Sie zwei X und Sie können sehen, wie schnell die Animationsanimation regiert. Wenn ich das auf 1.5 mache, wird es ungefähr so laufen. Aber lassen Sie uns es einfach als eins behalten. Sie könnten es sogar herunterklappen , damit die Animation etwas langsamer ist. Was haben wir sonst noch? Wir können das rückgängig machen. Nun, was haben wir genau hier gesehen? Immer wenn wir den Cursor aus der Animation herausbewegen, wird die Animation umgekehrt Ähnliches kann getan werden. Hier haben Sie die Option zum Rendern ob es G oder Canvas sein soll. Wenn ich das auf Leinwand ändere, dann schauen wir mal, was passiert. Nun, Canvas ist keine besonders gute Option, denn Wig ist diejenige, die all Ihre notwendigen Dateien, Ihre Bilder und all die verschiedenen Dinge enthält . wird es auch weniger Ladezeit benötigen Im Vergleich zu Canvas wird es auch weniger Ladezeit benötigen. Gut, hier haben Sie die Option Leasyload. Wir werden das abwählen, um zu diesem Teil zurückzukehren Jetzt können Sie im Stil mit der Breite herumspielen und die maximale Breite für Ihr Grundstück festlegen Hier können Sie ändern , ob Sie dem etwas Transparenz verleihen möchten oder nicht Wenn ich etwas wie 0.19 hinzufüge , wirst du feststellen , dass die Animation sehr transparent ist Sie ist nicht sehr undurchsichtig. Je mehr Sie Ihren Slider nach rechts bewegen, desto mehr wäre Ihre Animation hier sichtbar. Sie können sogar CSS-Filter hinzufügen, genau wie Sie es mit einem Bild tun könnten. Ordnung, ich kann das einfach rückgängig machen In Ordnung, ich kann das einfach rückgängig machen, sodass hier alles sichtbar ist. Sie können sogar einen Hover-Effekt hinzufügen und die Übergangsdauer ändern Im Bereich für Fortgeschrittene können Sie den Rand, die Polsterungseinstellungen und viele verschiedene Dinge ausprobieren 31. Code-Highlight: Ordnung, wie Sie sehen können, bin ich jetzt hier auf meiner Blogpost-Seite. Nehmen wir einfach an, dass Sie aus irgendeinem Grund einen Blog zum Thema Programmieren erstellen und Ihrem Blogbeitrag Codefragmente hinzufügen möchten Ihrem Blogbeitrag Codefragmente hinzufügen In diesem Fall, nur um ein Beispiel zu geben , wie Sie auf der Javat Point-Website feststellen können, dass all diese Codes in einem Snippet-Format vorliegen und Ähnliches könnte auch in unserem Blockbeitrag über unsere Presse erreicht werden unserem Blockbeitrag über unsere Presse einfach zu unserer Website zurückkehre, klicke ich auf eine neue Flexbox. Ich werde hier diese Richtung wählen. Ich werde ein neues Element hinzufügen, das als Code-Highlight bezeichnet wird. Lass es mich einfach hierher ziehen und ablegen. Sobald ich das gemacht habe, kannst du zwischen verschiedenen Sprachen wählen Genau hier, der Code, den ich habe , um zwei Zeichenketten zu vergleichen, okay, das ist im Java-Format. Das ist auch in Java. Was ich tun kann, ich kann diesen Code einfach kopieren. Ich kann hierher zurückkehren, statt Java-Skript kann ich Java auswählen. Ich füge den Code ein. Sobald ich das eingefügt habe, werden Sie feststellen , dass all diese Zeilen, Sie wissen schon, in verschiedenen Farben hervorgehoben sind. Sie können feststellen, dass die Klasse blau angezeigt wird. Öffentliche statische Leere wird blau angezeigt. Der Wert, den wir den Variablen S eins und S zwei geben , ist grün. Dann sind die Hauptsyntax, die Zeichenkettendatenwerte und die Print-LN-Funktionen ebenfalls rot. Die Kommentare sind grau. Das ist die Syntax , die Sie haben, oder? Und das ist die Art von Highlight, die es bereits einfügt, oder? Das Highlight, dass es bereits gilt. Hier finden Sie jetzt einen Schalter, mit dem Sie zwischen der Anzeige der Zeilennummern wechseln können oder nicht Wenn ich das also ausschalte, würdest du keine Zeilennummern finden, so wie du keine Zeilennummern finden Korrekt. Aber wenn Sie etwas hinzufügen möchten, können Sie es hier hinzufügen. Sie haben eine Kopie in die Zwischenablage. Das heißt, sagen wir einfach, hier bin ich hier. Kann ich eine Option zum Kopieren in die Zwischenablage finden Im Gegensatz zu Computerfreaks sollte ich für Computerfreaks einfach zurückgehen statt nach Java T Point Lassen Sie mich statt nach Java T Point einfach nach GFT suchen, was für Computerfreaks ist, ich habe den Javascript-Code ich habe den Jetzt findest du hier eine Schaltfläche, um das in unsere Zwischenablage zu kopieren Wenn ich kopiere, kannst du sehen, dass Code kopiert wurde, aber das war in Java T Point hier nicht der Fall , du kannst ihn hinzufügen Wenn ich meinen Cursor in diesen speziellen Codeausschnitt bewege, finde ich die Option, den Code zu kopieren Ordnung, jetzt machen wir auch ein Duplikat davon anstelle von Java Ich werde das als Javascript machen. Das Highlight wäre ein bisschen anders. Lassen Sie mich auch den Code für Javascript kopieren. Ich werde den Code für Javascript kopieren und einfügen . Auf diese Weise werden Sie feststellen, dass eine andere Syntax korrekt ist. Nun, für diesen Teil wo Sie die Kopie in die Zwischenablage haben , haben Sie Zeilennummern Sie werden auch einige bestimmte Zeilen hervorheben. Sie haben 13 Bindestriche, sechs. Was heißt das jetzt? Das heißt, diese Zeilen, Zeile Nummer eins, Zeile Nummer 3456, werden hervorgehoben Ordnung, lassen Sie mich das in etwas anderes ändern und es ist nur ein Platzhalter Es ist kein Standardwert. Wenn ich so etwas wie eins hinzufüge, wird die erste Zeile hervorgehoben. Wenn ich möchte, dass Zeile Nummer drei hervorgehoben wird, kann ich einfach hinzufügen und ich kann Zeile Nummer drei angeben. Wenn Zeile sechs angezeigt werden soll, kann ich Komma und Zeile sechs setzen. Aber qualifizieren Sie sich, ich möchte, dass die Zeilennummern 456 alle drei hervorgehoben werden. Ich kann einfach vier Bindestriche machen sechs von Zeile vier bis sechs werden hervorgehoben Ordnung. Ich kann das Gleiche tun, etwa 325. Das heißt, in diesen drei Zeilen erstellen wir Variablen und fügen dieser einen gewissen Wert hinzu. Ordnung, wir haben die Zeilen hier hervorgehoben Sie finden eine Option zum Hinzufügen von Zeilenumbrüchen. Nun, was bedeutet Zeilenumbruch? Hier können Sie feststellen , dass der Code, was sagen Sie, einen Kommentar hat , der die gesamte Breite einnimmt. Und wir haben eine Bildlaufleiste, eine horizontale Bildlaufleiste. Wir müssen hier scrollen, um das Ganze zu finden. Wenn ich diesen Zeilenumbruch umstelle, wirst du das finden, was sagst du? Kommentar wird so angezeigt , dass wir keine Scrollleiste mehr benötigen Das ist es, was Wrap eigentlich bedeutet. Du kannst das deaktivieren, sodass deine Scrollleiste hier angezeigt wird. Sie können zwischen verschiedenen Themen wählen, die Sie haben. Derzeit ist es auf ein solides Thema eingestellt. Wenn wir es in ein dunkles Design ändern, hast du eine braune Hintergrundfarbe und hier hast du weißen Text. Wenn wir uns dafür entscheiden, Okada, werden Sie Folgendes sehen Wir haben solarisiertes Licht. Morgen haben wir Dämmerung. Morgen ist etwas Ähnliches wie das, was wir hier im Geeks-Ja-Skriptcode-Snippet hier sehen können hier im Geeks-Ja-Skriptcode-Snippet hier Sie können die Höhe und die Schriftgröße anpassen. Wenn ich meine Körpergröße auf etwa 115 Pixel herabsenke, findest du auch eine vertikale Scrollleiste. Sie müssen Ihren Mauszeiger innerhalb des Codeausschnitts platzieren und dann müssen Sie Ihr Scrollrad verwenden, um den Code gut zu scrollen Ich kann das rückgängig machen, sodass es hier eine ausreichende Höhe einnimmt Sie können die Schriftgröße erhöhen oder verringern zur Registerkarte Stil gehen, haben Sie keinen Stil, Sie sind fortgeschritten. Jetzt zeigt Advanced natürlich die gleichen Dinge, die wir auch für alle anderen Elemente sehen können. 32. Paypal und Stripe-Integration - Sammle einfach Zahlungen ein!: Leute, jetzt werden wir lernen, wie wir Zahlungen mit der Paypal- und Stripe-Schaltfläche akzeptieren können . Nun diese beiden Buttons, lasst mich das einfach suchen und euch alle zeigen. Hier haben wir zwei Buttons, Paypal und Stripe. Mit diesen beiden Schaltflächen können wir als Eigentümer der Website Zahlungen einziehen, sei es, um nur Spenden zu sammeln oder Ihr Zahlungsgateway für den Verkauf Ihrer Produkte oder Dienstleistungen einzurichten Ihr Zahlungsgateway für den Verkauf Ihrer Produkte oder Dienstleistungen einzurichten . Oder es könnte ein Abonnement anbieten, ohne Vo Commerce verstehen und nutzen zu müssen. Genau hier bin ich auf meiner Blockseite. Und ich werde einen neuen Abschnitt hinzufügen und eine neue Flexbox wird in vertikaler Richtung sein, richtig? Fügen wir den Paypal-Button hinzu. Zuerst ziehe ich es einfach per Drag-and-Drop nach unten. Jetzt finden Sie unter Inhalt zunächst die Preise und Zahlungen. Darunter finden Sie ein Paypal-Konto. Sie geben einfach Ihr Paypal-Konto ein, unabhängig davon, ob es sich um Ihr persönliches oder geschäftliches Paypal-Konto handelt. Sie geben einfach die E-Mail-Adresse , mit der Sie Ihr Paypal verwenden. Wenn Sie ein Paypal-Benutzer sind, müssen Sie natürlich wissen, dass die Konto-E-Mail-Adresse hier sein sollte. Bei der Transaktionsart haben Sie eine Reihe verschiedener Optionen wie Checkout, Spende, Abonnement. Schauen wir uns zunächst den Checkout an. Nehmen wir an, ich versuche ein E-Book zu verkaufen. Ich kann den Artikelnamen einfach so nennen, dass es Buch ist. Dann habe ich SKU, was für Stock Keeping Unit steht, was im Grunde bedeutet, dass, sagen wir einfach, Sie verkaufen ein physisches Produkt in Ihrem Inventar, Sie haben ungefähr 50 Artikel. Wenn Sie hier 50 angeben, bedeutet das, dass maximal 50 Mal verkauft werden können. Ordnung, wenn Sie ein digitales Produkt und es nur für eine begrenzte Anzahl von Benutzern verkaufen möchten In Ordnung, wenn Sie ein digitales Produkt verkaufen und es nur für eine begrenzte Anzahl von Benutzern verkaufen möchten, können Sie dies auch als SKU festlegen und die Zahl auch angeben. Sie können den Preis festlegen. Es liegt an dir, was auch immer du behalten willst. Sagen wir einfach, ich behalte 20$ und das ist in USD. Sie können die Währung in australischen Dollar, Euro usw. ändern Euro usw. Sie können die Menge ändern. Jetzt gilt diese Menge im Grunde immer dann, wenn jemand auf die Paypal-Schaltfläche klickt. Wie viele Artikel sollten zu ihrer Karte oder beim Kauf hinzugefügt werden ? Möchten Sie, dass die Benutzer zwei oder drei Artikel kaufen , wenn sie auf die Schaltfläche „Kaufen“ klicken, oder handelt es sich nur um eine Menge? Wir behalten das einfach bei einem. Und dann hast du einen Versandpreis. Das kannst du hinzufügen. Nehmen wir an, ich füge 5$ Versand Ich füge Steuern von etwa 5% hinzu. 5% von 20$ wären 1,01$ plus fünf, was der Versandpreis ist, wird 6$ betragen. Jetzt, da 6$ zum Verkaufspreis des Artikels 2020 hinzugefügt würden , plus sechs wären Ordnung, hier im Button-Bereich würden Sie feststellen, dass Sie Nehmen wir an, anstatt zu kaufen, möchten Sie jetzt so etwas wie „Kaufen“ behalten. In Ordnung, dann können Sie die Ausrichtung für die Schaltfläche festlegen. Hier ist eine Linie übrig. Ich kann das in die Mitte ändern, oder ich könnte eine Linie schreiben, oder ich kann es so begründen, dass sie die gesamte Breite einnimmt. In Ordnung. Hier kann ich das Logo oder das Symbol von Paypal in etwas anderes ändern , indem ich einfach darauf klicke und sicherstelle , dass wir unser eigenes hochladen. Oder wir können diejenigen auswählen , die Fontawesome anbietet. Aber im Moment lasse ich es einfach so wie es ist. Ich kann darauf klicken, um das Symbol zu entfernen, oder ich kann mein eigenes hochladen. Hier in der Symbolposition kann ich sehen, dass das päpstliche Symbol vor dem Text erscheint Wenn ich das auf „Nach dem Text“ ändere, sehe ich, dass dieses päpstliche Symbol hinter dem Text erscheint Kehren wir einfach zum vorherigen Text zurück. Und dann haben Sie den Abstand zwischen den Symbolen. Wenn Sie den Schieberegler bewegen, werden Sie feststellen, dass zwischen Ihrem Symbol und Ihrem Text eine Lücke besteht. Gut, hier haben Sie die Button-ID , mit der Sie verfolgen können, wie viele Einheiten verkauft wurden und so weiter. Dann haben Sie zusätzliche Optionen. Nun, das ist wichtig, wichtig in dem Sinne , dass, sagen wir, wenn ein Benutzer den Zahlungsvorgang abgeschlossen und die Transaktion erfolgreich war, wohin möchten Sie den Benutzer weiterleiten? Sie können Ihrer Website eine Dankesseite oder eine dynamische Seite hinzufügen Ihrer Website eine Dankesseite oder eine dynamische Seite Sie ein dynamisches Tag hinzufügen können , mit dem ihnen eine Rechnung für ihren Kauf angezeigt wird. Sie können das jetzt hinzufügen. Ich verwende einfach die zitierte URL, die die Startseite ist. Hier wirst du das finden. Öffne das Paypal in einem neuen Tab. Immer wenn jemand darauf klickt, wird Paypal in einem neuen Konto geöffnet. Hier haben Sie auch eine Sandbox, die wir gleich sehen werden Aber lassen Sie mich kurz erläutern, was benutzerdefinierte Nachrichten bedeuten, wenn ich das umschalte. Sagen wir einfach, es liegt ein Fehler vor. Sie werden sehen, dass ein Fehler aufgetreten ist. Wenn das Paypal-Konto jedoch aus Sicht des Verkäufers nicht verbunden ist aus Sicht des Verkäufers nicht verbunden , wird es angezeigt. Keine Zahlungsmethode verbunden. Wenden Sie sich an den Verkäufer. Jetzt haben wir hier eine Sandbox. Was bedeutet es, wenn ich das anschalte? Sie finden ein Sandbox-E-Mail-Konto. Und es heißt, dass dies die Adresse ist , die Sie von Paypal erhalten Wenn Sie mit Ihrem Entwicklerkonto eine Sandbox einrichten, können Sie die Sandbox verwenden, um Ihren Kaufablauf zu testen Sandbox ist nur ein Wort um zu erklären, dass Sie an einer Testumgebung in Paypal selbst arbeiten einer Testumgebung in Wenn Sie sich anmelden, haben Sie die Möglichkeit, zu developer.paypal.com zu gehen . Sobald Sie sich angemeldet haben, können Sie unter Sandbox-Konten zu den Testtools wechseln Sie erhalten hier standardmäßig zwei Konten. Ich habe diese drei. Wenn ich ein neues Konto erstellen möchte, klicke ich einfach auf diese Schaltfläche und Sie werden feststellen, dass ich ein persönliches Konto oder ein Geschäftskonto erstellen kann . Und ich kann die Region wählen. Wenn ich hier Vereinigte Staaten von Amerika nenne, kann ich die Zahlungen einfach in US-Dollar akzeptieren. Sobald ich das Konto erstellt habe, können Sie hier sehen, dass ein Geschäftskonto erstellt wird. Sie können einfach hier auf das Konto klicken, den Link, der sich dort befindet. Und Sie müssen die E-Mail kopieren und zu Ihrem Teil zurückkehren und das Sandbox-E-Mail-Konto in diesen Platzhalter einfügen . In Ordnung. Da wir nun eine Zip-Datei von Element oder Pro verwenden und uns nicht wirklich auf ein Element oder Abonnement verlassen , würde diese Sandbox nicht funktionieren Was ich tun würde, ich gebe einfach mein persönliches Paypal-Konto um zu sehen, ob die Zahlung funktioniert oder nicht Geben Sie mir einfach einen Moment, bis ich meine Paypal-Daten eingebe. Jetzt werde ich veröffentlichen. Sobald ich veröffentlicht habe, werde ich nur eine Vorschau der Änderungen anzeigen. Wenn ich jetzt nach unten scrolle und auf die Schaltfläche „ Kaufen“ klicke, wirst du feststellen, dass wir zu einem neuen Tab weitergeleitet werden, auf dem wir gesehen haben, dass es ein Zahlungsgateway gibt. Aber wir sind vom System ausgesperrt, melden Sie sich erneut ab. Und ich zeige euch allen hier, wie es funktioniert. Wie Sie auf der Karte sehen können, sollen wir 26$ zahlen. 20$ sind für den Verkaufspreis des Artikels 5$ sind für den Versand und 1$ für die Steuern, die Gesamtsumme beträgt 26. Richtig. Lass uns das einfach streichen. Du kannst deine Sandbox benutzen. Im Bereich Stil können Sie die Typografie ändern Sie können den Textschatten ändern. Sie können einige Hintergrundfarben hinzufügen, wenn Sie möchten. Sie können einen Grenzradius hinzufügen. Sie könnten sogar einige andere Nachrichten hinzufügen. Die Nachrichten, die Sie haben, die Fehlermeldung und das Paypal sind nicht verbunden. Sie können die Farbe und die Typografie auch gut ändern. Ähnliches kann auch für den Streifenknopf gemacht werden für den Streifenknopf gemacht Ich suche einfach nach dem Stripe-Button, ich platziere ihn einfach darunter, und hier würden Sie wieder den Produktnamen finden Ich gehe einfach zurück zu meinem Paypal-Button um die anderen Transaktionsarten anzuzeigen. Hier haben wir ausgecheckt. Zuerst haben wir uns die Art der Checkout-Transaktion angesehen, was bedeutet, dass Sie bei einem Service für die einmalige Gebühr verkaufen . Dann haben Sie eine Spende. Was passiert nun, wenn Sie auf Spende klicken? Sie können hier den Artikelnamen wählen. Es wäre natürlich eine Spende. Da es sich um eine Spende handelt, verkaufen Sie nichts. Sie akzeptieren nur Zahlungen und es sind keine Lagerbestände mehr in Ihrem Inventar vorhanden. Du kannst SQ einfach etwas wie N eins geben, nur zwei, nur als Spende. Damit haben Sie dann den Spendenbetrag. Egal, ob Sie feste Spendenbeträge sammeln möchten oder ob es sich um einen beliebigen Betrag handelt. Ob Sie möchten , dass Benutzer flexibel alles bezahlen können , was sie können. Das können Sie auswählen, dann haben Sie ein Abonnement. Sobald Sie darauf klicken, können Sie den Artikelnamen auswählen. Sagen wir, Basisstufe, oder? Wir haben uns die drei Preisstufen in der Preistabelle angesehen . Vortrag gleich hier. Sie können Ihrem Dienst einfach den Namen geben. Sie können den SQ auf so etwas wie die Basisstufe einstellen . Und Sie können den Preis festlegen. Nehmen wir auch an , sie zahlen monatlich 50 Dollar . Oder Sie könnten es täglich, wöchentlich oder jährlich festlegen. Und es gibt auch eine automatische Verlängerungsfunktion. Wenn jemand klickt und kauft und seine Paypal-Daten eingibt, wird ihm monatlich, täglich oder wöchentlich eine Gebühr berechnet . Wenn Sie möchten, dass die automatische Verlängerung deaktiviert wird, dann denke ich nicht, dass es Sinn macht dies zu einem Abonnement zu machen. Der einzige Unterschied besteht darin , dass, sobald Sie dies zu einem Abonnement machen und keine automatische Verlängerungsfunktion haben, dies im Grunde bedeutet, dass Sie den Zugriff auf den Dienst, auf den Ihr Benutzer Zugriff haben wird, beenden den Dienst, auf den Ihr Benutzer Zugriff haben wird , sodass er die Zahlung leisten muss . Auch hier gilt: Wenn Sie dies als automatische Verlängerung festlegen, bedeutet dies im Grunde, dass Benutzer die Paypal-Daten nicht immer wieder eingeben muss . In Ordnung. Dies sind einige Dinge in Ihrem Paypal-Button, die zu diesem Streifen-Button kommen Wenn Sie hier hingehen, können Sie den Produktnamen festlegen. Geben wir dem wieder so etwas wie Buch, Buch. Ich kann die Währung auf eine andere setzen. Hier habe ich eine Reihe verschiedener Optionen. Früher haben wir kein INR gesehen , was indische Rupien für Paypal sind, aber jetzt haben wir für Stripe diese Option Dann haben Sie den Produktpreis. Sie können wieder etwas einstellen, 20$. Sie können die Menge festlegen Sie können den Versandpreis festlegen. Der Steuersatz. Für den Steuersatz müssen Sie jedoch zuerst Ihr Stripe-Konto verbinden und innerhalb des Stripe-Kontos haben Sie Zugriff auf Produkte. Für dieses bestimmte Produkt müssen Sie die Steuersätze festlegen. In Ordnung. Ich zeige Ihnen, wie wir die Sandbox nutzen können, oder ich sollte sagen, die Test-API von Stripe Dies funktioniert mit dieser speziellen Datei unseres Elementor Pro, ohne dass Sie das Elementor Pro-Abonnement abonnieren müssen das Elementor Pro-Abonnement abonnieren hier zum Button-Teil kommen, können Sie den Button in etwas wie, sagen wir, kaufen ändern sagen wir, kaufen Ich kann die Ausrichtung erneut einstellen, links, rechts, mittig, ausgerichtet. Okay, ich kann einfach die Mitte ausrichten. Ich kann das Symbol ändern. Ich kann einstellen, ob das Symbol oder vor dem Text angezeigt werden soll . Ich kann hier den Abstand zwischen den Symbolen wählen. In den zusätzlichen Optionen kann ich die Weiterleitung nach erfolgreicher Zahlung wählen Hier kann ich die URL einstellen. Hier haben wir Stripe in einem neuen Tab geöffnet, benutzerdefinierte Nachrichten. Hier haben Sie die Stripe-Testumgebung eingerichtet. Wenn ich das umschalte, werden Sie sehen, dass wir zuerst zu den Integrationseinstellungen gehen müssen Wenn ich mit der Maus darüber fahre, wirst du sehen, dass ein neuer Link in unserem Wordpress-Dashboard geöffnet wird in unserem Wordpress-Dashboard genau hier unter Wordpress-Dashboard. Du wirst feststellen, dass wir uns unter Element oder Einstellungen befinden Unter Einstellungen haben wir Integrationen ausgewählt. Sobald Sie Integrationen ausgewählt haben, scrollen Sie einfach nach unten zu dem Teil, in dem Sie Stripe finden , und unter Geheimer Schlüssel testen müssen Sie Ihren API-Schlüssel einfügen Also gehe ich einfach zurück zu meinem Stripe-Dashboard. Sie müssen zuerst ein Konto erstellen. Die Erstellung Ihres Kontos nimmt nicht viel Zeit in Anspruch. Sie müssen nicht viele Ihrer persönlichen Daten eingeben und auf die Autorisierung und Eröffnung Ihres Kontos warten Autorisierung und Eröffnung Ihres Kontos warten Sie können einfach damit beginnen und müssen nur zu Ihren Dashboard-Einstellungen gehen Sobald Sie dort sind, finden Sie API Key Stab. Klicken Sie einfach dort und zeigen Sie Ihren Testschlüssel an. Und kopiere es und füge es hier unter diesem geheimen Testschlüssel ein. Sobald Sie das getan haben, klicken Sie einfach auf gültige Test-API. Hier kannst du das einfach veröffentlichen. Was wird passieren, wenn du das veröffentlichst? Mal sehen, ob ich auf Block zwei klicke. Sobald ich nach unten scrolle, kann ich auf diesen Stripe-Checkout klicken und Sie können sehen wir ein Buch im Wert von 20$ sehen können Das ist im Testmodus, okay. Hier können Sie Ihre E-Mail-Kartendaten, Karteninhaber usw. eingeben . Gut, wir gehen einfach zurück und ja, im Grunde ging es um deinen Stripe-Kauf. Der einzige Unterschied zwischen Stripe und Paypal besteht darin, dass Sie mit Paypal auch andere Optionen auswählen können , z. B. Spendenabonnement oder einen einmaligen Kauf. Für Stripe können Sie jedoch nur ein Produkt verkaufen. Wenn du verkaufen willst, denke ich, eine Mitgliedschaft oder ähnliches. Sie müssen die Einstellungen in Ihrem Stripe-Konto selbst ändern . Denn genau hier, wie Sie unter Ihren Preisen und Zahlungen sehen können , müssen Sie zuerst Ihre Produkte einrichten und dann die Steuersätze usw. auswählen. Derzeit erlaubt Element oder Pro Ihnen als Website-Designer und -Entwickler nicht erlaubt Element oder Pro Ihnen als Website-Designer und -Entwickler , die Funktionen für Spenden und Abonnements für die Stripe-Buttons hinzuzufügen Spenden und Abonnements für die Stripe-Buttons Sie können dies jedoch für Paypal tun. 33. Hotspot - Hast du schon davon gehört?: Ordnung, lassen Sie mich Ihnen jetzt ein cooles Feature zeigen , das als Hotspot bezeichnet wird. Also, was bedeutet es? Nehmen wir an, ich habe ein Bild, vorzugsweise von einer Karte oder einem Produkt. Nehmen wir an, Sie haben auf einer Karte mehrere Standorte und versuchen nur anzuzeigen, wo sich Ihre Büros oder Geschäfte befinden. Stimmt das? Sie können also Hotspots hinzufügen, sodass immer dann, wenn jemand auf diesen Hotspot klickt oder den Mauszeiger darüber bewegt, er die Adresse des Hotspots findet Lassen Sie mich Ihnen nur ein Beispiel dafür zeigen. Ich kann nur ein Bild auswählen. Ich habe dieses wirklich coole Foto von einem Gaming-PC hier eingerichtet. Ich kann ein paar Hotspots hinzufügen. Wir können jedoch sehen, ob es sich bei diesem Produkt um einen Gaming-Stuhl handelt. Dies ist eine Gaming-Maus. Wir haben Kissen, wir haben Tastatur. Wir haben einen Computer mit vier ganz unten, oder ein Poster davon, wie ich sehe. Dann haben Sie externe Monitore, Sie haben einen Controller auf der Rückseite. Sie haben die Funko Pops und die schalldichten Schaumstoffe Stimmt. Sie können hier einen Hotspot hinzufügen und den Inhalt, den Sie finden würden, ein Bild hinzufügen, Sie können die Größe des Bildes wählen Sie können die Ausrichtung links, rechts, mittig usw. festlegen rechts, mittig usw. Aber im Moment nimmt es nur die gesamte Größe des Containers unter Hotspot ein. Sie könnten einen oder mehrere Hotspots hinzufügen. Ich kann einfach mehrere Hotspots hinzufügen. Aber du würdest es jetzt nicht sehen können. Warum? Weil ich denke, dass die Farbe und die Art und Weise, wie sie festgelegt ist, für uns nicht sichtbar sind. Wir werden auch untersuchen, wie wir das machen können. Derzeit habe ich zwei Hotspots hinzugefügt, was für uns nicht ausreicht. Wir benötigen 1231 für unseren Gaming-Stuhl, einen für die Kissen, den dritten für den Monitor, vierten für die Tastatur, den fünften für die Maus, sechs für das, was sagst du, das Tastatur-Mauspad Dann hast du für den Desktop-PC, das wäre 12345678, Für das Formular haben wir zehn, fügen wir zehn davon hinzu 4.567.899.10 In Ordnung, ich kann Animationen hinzufügen, aber Sie könnten die Animation hier nicht finden Was wir tun müssen, wir werden einfach zum Stil übergehen. Wir gehen zum Hotspot. Unter Hotspot können Sie sehen, dass keine Farbe zugeordnet wurde. Wir müssen eine helle Farbe wählen , damit sie sichtbar ist. Ich werde etwas wie Weiß wählen. Wäre Weiß sichtbar? Ich glaube schon. Oder wir könnten das auf so etwas wie Orange einstellen. Oder wir können auch ein anderes Bild hinzufügen. Lassen Sie uns zunächst bei diesem Bild bleiben und sehen, ob das funktioniert oder nicht. Zuerst haben wir den weißen Hotspot. In Ordnung. Wir können diesen verwenden oder ich könnte etwas wie ein orangefarbenes hinzufügen , damit Orange sichtbar ist. Ja. Was passiert, wenn wir eine andere Farbe wählen? Ich versuche nur herumzuspielen, weil das Bild selbst viele Farben hat , weil es einen RGB-Streifen im Hintergrund hat . Das Bild selbst enthält viele Farben . Es wird also sehr schwierig, einen Hotspot hinzuzufügen , da er dann aus der Sicht des Benutzers nicht leicht zu identifizieren wäre . Versuchen wir, dies als weißen Hotspot anzugeben. Sobald ich das gemacht habe, kann ich hier unter Hotspot einfach zu Bild gehen, wir haben mehrere. Wenn ich hier auf einen der Hotspots klicke , kann ich ein Label hinzufügen. Ich kann die Position ändern. Ich kann auch einen Link hinzufügen. Das heißt, wenn ich ein Label wie sagen wir einfach Gaming Chair hinzufüge . Sie können hier sehen, dass ich das Label Gaming Chair habe. Ordnung, jetzt kann ich einen Link hinzufügen, sodass, wenn jemand darauf klickt, er zu einem externen Link oder einem internen Link weitergeleitet wird . Ich kann ein Symbol für diesen Hotspot hinzufügen. Derzeit hat dieser Hotspot kein Symbol, aber wenn Sie nur das Symbol verwenden oder unser eigenes hochladen, können Sie die benutzerdefinierte Größe dieses Hotspots festlegen Sie können die Höhe ändern, Sie können die Breite ändern oder Sie können sie zurücksetzen, indem Sie sie einfach ausschalten. Sie können hier Inhalte hinzufügen. Hier gibt es einen Unterschied zwischen dem Label und dem Inhalt. Wenn ich das als Gaming-Stuhl habe, kann ich etwas hinzufügen, zum Beispiel kann ich den Markennamen sehen. Ich kann einfach den Markennamen, Secret Lab, Gaming-Stuhl, weiße Farbe hinzufügen . Dies ist die Produktbeschreibung. Was passiert nun, wenn wir zum Style-Teil übergehen? Ordnung, hier haben Sie auch einen Tooltip , der gleich behandelt wird. Wenn ich unter Hot Spot zum Style-Tab gehe, kann ich verschiedene Animationen ändern. Ich kann verschiedene Animationen für Hotspot ändern. Wenn jemand darauf zeigt, möchtest du den Text des Hotspots anzeigen oder möchtest du, dass er anklickbar ist , sodass du zwischen verschiedenen Optionen wählen kannst? sodass du zwischen verschiedenen Optionen wählen kannst Ordnung, lass mich einfach zum Tooltip gehen und sehen, dass Trigger gerade angeklickt ist Wenn ich das auf Hover setze, wirst du das finden. Wenn ich auf dem Gaming-Stuhl schwebe, findest du den Secret Lab-Gaming-Stuhl White Farbe ist Text wird direkt unter unserem Hotspot angezeigt . Hier haben Sie den Effekt Sie die Position des Tooltips festlegen können, dass Sie die Position des Tooltips festlegen können, ob Sie den Text des Inhalts oben auf Ihrem Etikett oder unten, rechts oder links anzeigen den Text des Inhalts oben auf Ihrem Etikett oder unten, rechts oder links Sie können es einstellen, wie Sie möchten. Sie können die Animation so einstellen, ob sie eingeblendet, ausgeblendet, ausgeblendet oder vergrößert werden soll. Wenn ich das gesagt habe, kannst du es sehen. Es sieht so aus. Wenn es nach Richtung verblasst, wird es so aussehen. Wenn es sich um Folie für Richtung handelt, können Sie sehen, wie es nach oben und nach unten gleitet. Sie können auch die Dauer der Animation festlegen. Wenn ich unter Hotspot zum Stil gehe, kann ich die Größe unseres Labels, des Hotspots, angeben. Ich kann die Mindestbreite und Mindesthöhe für unseren Hotspot auswählen . Es hat eine gewisse Höhe. In Ordnung. Sie können auch die Farbe der Box hinzufügen. Was bedeutet es, wenn ich eine Boxfarbe hinzufüge? Sie können gleich hier sehen, ob ich einen Gaming-Stuhl mit einer bestimmten Boxfarbe habe, werden Sie feststellen, dass dies unser Hotspot ist, das ist unser Label. Wenn ich mit der Maus darüber fahre, siehst du den Inhalt in Ordnung. Sie können den Abstand festlegen, Sie können den Randradius dafür anpassen Sie könnten vorerst sogar einen Boxschatten hinzufügen. Wir wollen keine Boxfarbe, wir werden das einfach löschen. Wir werden auch die Größe auf das einstellen, was sie gerade ist. Wir werden bis hierher gehen. Sie können die Bildeinstellungen so ändern , dass ich die Transparenz reduzieren möchte oder ich möchte dort, wo es sich um die CSS-Bildfilter handelt, aufklappen. Ich möchte die Sättigung auf Null reduzieren , damit ich ein Schwarzweißbild erhalte. Hier drüben wäre es einfach , die Farbe des Hotspots und den Text selbst zu ändern. Direkt unter dem Tooltip können Sie die Textfarbe auswählen. Wenn ich das auf etwas wie Rot setze, schauen wir mal, was passiert. Die Inhaltsfarbe und der Text wurden auf Rot geändert. Ich kann die Typografie einstellen. Ich kann sogar die Ausrichtung ändern, und ich kann sogar einige Boxen hinzufügen, und ich kann die Farbe der Box ändern Hier werden Sie feststellen, dass es eine Box für unseren Inhalt gibt. Das wollen wir für den Rest der Artikel. Lass uns versuchen, es zu tun. Ich gehe hierher, wieder zurück. Im Inhalt für diesen Hotspot, den wir für den Gaming-Stuhl haben, entferne ich einfach das Etikett, weil wir wollen, dass nur dieser Button erscheint, oder? Dieser pulsierende Effekt. Nun, wir ändern die Position indem wir einfach auf Position statt auf Inhalt klicken Und ich kann den Offset einstellen, egal ob er rechts vom Bild oder links sein soll . Wir wollen das direkt über dem Gaming-Stuhl, rechts oder einfach auf dem Gaming-Stuhl anzeigen . In Ordnung. Hier können wir die vertikale Ausrichtung einstellen. Ob wir wollen, dass es oben oder unten ist, wir können das einstellen. Aber im Moment möchte ich das einfach als Top belassen. Ich kann die Animation auswählen. Ich möchte, dass die Animation dieses Hotspots einen sanften Beat, ein erweitertes Overlay oder keine Das wird für den Kreis geschehen , den Sie hier haben. Gut, lass mich einfach zurück zum Stil gehen. Ich ändere die Farbe des Hotspots in etwas wie Rot, oder sagen wir einfach Orange. Orange würde gut aussehen. Ich denke, hier können wir so etwas wie ein leuchtendes Orange hinzufügen. Okay, lass mich hierher gehen. Ich wähle leuchtendes Orange. Ordnung. Zurück hier unter Hotspot wählen wir den Artikel aus. Wir gehen an die Position, an der eine Animation erweitert werden soll , okay. Oder wir haben das sogar im leisen Takt gesagt, richtig. Sie haben Animationen sequenziert, was bedeutet, dass Sie, sagen wir, Sie haben mehrere Animationen für Ihren Hotspot Es gibt eins, es gibt zwei, es gibt drei. Daher können Sie dies im Uhrzeigersinn einstellen. Zuerst wird diese Animation angezeigt, dann wird dieser Hotspot angezeigt Dann wird hier drüben der Hotspot auftauchen und so weiter. Das ist Sequenzanimation. Kommen wir zurück zum Tooltip-Teil Sie können den Auslöser einschalten oder hier klicken, Sie haben die Animation für den Inhalt Für diese Hotspot-Schaltfläche hier können wir die anderen Dinge auswählen Auch wenn wir jetzt nach dem Inhalt suchen, den wir haben, können Sie sehen, dass er außerhalb unseres Bildes erscheint Wir wollen nicht, dass das passiert. Was können wir in diesem Fall tun? Geben Sie einfach die Größe an der der Kreis-Hotspot nicht sichtbar wäre . Das ist die Größe davon Kommen wir zu dem Teil, in dem wir den Text ändern wollen. Für diesen Text, bei dem er etwas außerhalb des Hotspots erscheint, müssen wir unter dem Inhalts-Tooltip die Position anstelle von oben ändern Wir können das auf genau hier ändern. Es wird ungefähr so aussehen. Gut, lassen Sie mich einfach ein Duplikat des Hotspots hier machen. Ich habe auch diesen anderen, aber ich ändere die Position. Der andere Hotspot würde genau hier im Monitorbereich erscheinen . Gut, ich werde den Inhalt in etwas wie Externer Monitor ändern , okay. Externer Monitor nur dafür. Dafür sehen wir uns den Gaming-Stuhl und so weiter an. Ich kann diesen Tooltip-Text so einrichten, dass oben angezeigt wird, wenn ich möchte, indem ich einfach zu der Position gehe. Und ich kann in Tooltip einstellen, ich kann das auf den Anfang setzen. So wird der Text angezeigt. Sie können dies für alle anderen Artikel tun. Sie können auch einfach herumspielen und sehen, was für Sie am besten funktioniert. Dies kann sich im Wesentlichen als nützlich erweisen, wenn Sie tatsächlich versuchen, verschiedene Funktionen Ihres Produkts zu präsentieren . Oder versuchen Sie einfach, die verschiedenen Büros und Standorte Ihrer Geschäfte auf der ganzen Welt zu präsentieren . 34. Wunder tun mit Elementor AI: Leute, das Video, auf das ihr alle gewartet habt, ist endlich da. Mal sehen, wie wir das Element- oder I-Feature nutzen können . Element or I befindet sich zu diesem Zeitpunkt, zu dem ich dieses Video aufnehme, derzeit im Beta-Modus , was im Grunde bedeutet, dass nicht alle Funktionen funktionieren werden. Sie können hier sehen, dass wir die Beta haben, was im Grunde bedeutet , dass nicht alle Funktionen einwandfrei funktionieren werden. Einiges davon könnte gut funktionieren und einiges davon funktioniert vielleicht nicht einfach. Trotzdem hat Elementor es gerade für die Öffentlichkeit veröffentlicht, und dafür verlangen sie Geld Aber wir werden sehen, und wir werden am Ende auch sehen, ob es sich lohnt oder nicht, denn ich weiß, dass es dem Markt so viele kostenlose KI-Tools gibt Zuallererst hat Chat-GPT den KI-Markt dominiert. Dann haben wir Googles Powered, Microsofts Bing. Und ich denke, Google denkt sich auch Mini aus, oder? Es gibt so viele I-Elemente und Tools da draußen. Nun, wie hebt sich KI von Elementor im Vergleich zu den anderen KI-Tools In erster Linie hilft Element oder KI also bei der Textgenerierung, sodass wir unseren Elementen Animationen hinzufügen, benutzerdefiniertes CSS hinzufügen und dann Bilder bearbeiten und die Layouts für den Hintergrund mit Farbverlauf ändern können Klicken wir zuerst hier auf den Texteditor. Ich gebe lediglich bestimmte Anweisungen an Element oder KI, damit es jemandem Text für unsere Website generiert Jetzt könnten wir dasselbe mit ChagBT machen, aber was Elementor sagt, es versteht im Grunde, worum es auf Ihrer Website Wenn Sie Ihrer Website gerade einige Elemente hinzugefügt haben, versteht sie das Layout und versteht was der Inhalt Auf diese Weise erhalten Sie eine spezifische Ausgabe für Ihre Bedürfnisse. Gehen wir zu Prost elementor.com und genau hier finden Sie eine Reihe verschiedener Kategorien Hier haben Sie spezielle Eingabeaufforderungen für Bilder, Textcode und zum Erstellen von Containern Gehen wir gleich hier zum Textteil. Wenn ich nach unten scrolle, sehe ich einen Teil dem steht, eine Beschreibung mit drei Absätzen zu erstellen. Wenn ich jetzt auf Aufforderung kopieren klicke, kann ich einfach hierher zurückkehren und unter diesem Texteditor einfach auf Write It With AI klicken. Sobald ich hier klicke, wirst du feststellen, dass es einige Zeit dauern kann. Diese Funktion ist übrigens nur für diejenigen verfügbar , die ihr Google-Konto verknüpft oder ihr Konto bei Elementor erstellt haben ihr Google-Konto verknüpft oder ihr Konto bei und sich mit der Website verbunden haben Und Sie erhalten für einen begrenzten Zeitraum kostenlosen Zugriff auf Element oder AI Sobald dieser Zeitraum abgelaufen ist, müssen Sie die Abonnementgebühr bezahlen. Genau hier. Ich gebe einfach das Tempo der Aufforderung ein. Wenn Sie das hier bemerken, werden Sie sehen, dass die Aufforderung „Treffen Sie eine Entscheidung für “ in den eckigen Klammern die Nische enthält, für die die Website gebaut wurde und die drei Absätze enthält. Gehen wir also wieder hierher zurück. Ich ändere das in, da Sie wissen, dass der Grund, warum wir diese Website erstellt haben , darin bestand, für eine Anwendung zu werben, eine Payment-Gateway-Anwendung. Wir werden die Payment-Gateway-Anwendung so beschreiben , wie wir sagen können wann mehr, damit die Leute international bezahlen können, sodass die Leute Zahlungen international und im Inland tätigen können , ohne oder ich könnte sagen, sehr einfach Ordnung. Und das enthält nur einen Absatz, oder? Lassen Sie uns den Text generieren. Je nach Art des Inhalts, den Sie generieren möchten, kann es einige Zeit dauern . Lass uns warten. Übrigens alle Funktionen, die Sie verwenden werden , verbrauchen alle Funktionen, die Sie verwenden werden , nur wenige Credits. Ich bin mir nicht ganz sicher , wie viele Credits für die kostenlose Version vergeben würden, aber Sie können einfach hier nachsehen, dass ein wirklich großer Absatz angezeigt wird. Wir können einfach darauf klicken, um es kürzer zu machen, nur weil wir wollen, dass der Inhalt in unseren Heldenbereich passt . Trotzdem ist es viel zu lang. Lass mich einfach noch einmal darauf klicken, um es kürzer zu machen. Ordnung, und hier haben wir ein Zahlungsgateway, das eine sichere und schnelle Lösung für Bo Domestic und all diese Dinge ist. Es ist die perfekte Wahl für Einzelpersonen. Wenn wir diese Zeile überspringen können, denke ich, dass es bis jetzt gut ist. Lass uns kopieren. Anstatt zu kopieren und einzufügen, können wir einfach die letzte Zeile löschen Und wir können einfach auf Us Text klicken , damit er genau hier angewendet wird In Ordnung, so funktioniert der Textteil. Lass uns diese Website veröffentlichen. Kommen wir zu den Buttons gleich hier. Unter diesem Text haben wir zwei Schaltflächen, oder? Mal sehen, ob wir irgendwelche KI-Funktionen haben. Für die Schaltfläche suche ich einfach nach Code. Unter Code suche ich nach der Schaltfläche. Ordnung, lassen Sie mich einfach nach dem Button suchen. Lass uns zu. Seite. Hier hast du diesen. Knöpfe an, rotiert und Text bewegt sich darüber wie wir das nutzen können Kopieren wir diese Aufforderung. Ich gehe zurück zu meiner Website. Da diese Schaltfläche „Weitere Informationen“ kein Symbol hat, klicken wir einfach hier, in der Symbolbibliothek. Und wir können jeden von ihnen auswählen. Da wir mehr erfahren möchten, können wir einfach auf den Pfeil klicken. Wir benötigen einen Pfeil, okay. Ich denke, dieses Pfeilsymbol würde gut aussehen. Lass uns das hier einfügen. Gut, das sieht gut aus. Um diese Eingabeaufforderung zu verwenden, müssen wir zu Advanced wechseln. Scrollen Sie hier nach unten zum Teil des benutzerdefinierten CSS. Sie würden Edit with AI finden. Hier werden wir die Eingabeaufforderung einfügen. Gut, lassen Sie uns den Code dafür generieren. Jetzt wird es einen CSS-Code generieren, den wir verwenden werden. Wir können ein paar Dinge ändern. Wenn Sie ein Experte für CSS sind, ist das in Ordnung. Hier haben wir dieses Ding. Wir können einfach auf Einfügen klicken. Sobald wir das eingefügt haben, schauen wir uns das hier an. Sie können sehen, wie cool unser Button aussieht. Lass uns das veröffentlichen. Alles klar, was können wir damit noch machen? Hier haben wir ein Bild und wir haben einen Teil mit Containern. Richtig, gehen wir runter und versuchen, unsere Bilder zu manipulieren und den Hintergrundeffekt für diesen Abschnitt zu ändern. Wie Sie sehen können, haben wir für diesen Abschnitt eine Hintergrundüberlagerung Es gibt weiße Farbe und es gibt grüne Farbe. Ordnung. Jetzt hat dieses Farbschema einen Farbverlauf. es hat einen linearen Farbverlauf, Ich denke, es hat einen linearen Farbverlauf, lassen Sie mich diesen Abschnitt hier einfach auswählen. Ich kann zum Stil gehen. Hier können Sie sehen, dass der Standort für den ersten bei 35% und für den zweiten bei 100% liegt. Versuchen wir, dies zu ändern. Was können wir in diesem Fall tun? Wir können einfach nach drei Zutaten suchen, okay. Im Wesentlichen werden Sie feststellen, dass es drei Farben gibt und sie im Hintergrund animiert werden. Kopieren wir die Eingabeaufforderung. Wir gehen hier unter Erweitert hin. Unter Erweitert wählen wir zuerst benutzerdefinierte CSS-Bearbeitung mit KI aus. Stellen Sie sicher, dass Sie den Container, den Hintergrundcontainer und das Flexbox-Layout ausgewählt haben, haben, und fügen Sie die Eingabeaufforderung ein. Lassen Sie uns den CSS-Code innerhalb weniger Sekunden rendern innerhalb weniger Sekunden Wir können einfach den gesamten CSS-Code generieren. Jetzt können Sie feststellen, dass standardmäßig eine Farbe verwendet wurde . Wir können sie ändern. Welche Farbe ich tatsächlich ausgewählt habe, ist das. Lass mich einfach diese Farbe auswählen. Ich füge es gleich hier ein. Okay, ich wähle einfach diesen Teil aus. Ich füge es ein. Das ist meine zweite Farbe. Ich füge das auch ein, die dritte Farbe. Fein. Lass uns kopieren. Wir fügen es gleich hier ein. Wenn ich das jetzt veröffentlichen würde, würden Sie feststellen, dass es die grünen Farben verwendet. Wir können zum Style-Teil gehen, wir können das ausschalten Sie würden feststellen, dass der gesamte Hintergrund so funktioniert Da wir den Verlaufsstil hatten, überlappte er sich mit dem benutzerdefinierten CSS Aus diesem Grund waren die Animation und der Farbverlauf mit drei Radiantfarben der Farbverlauf mit drei Radiantfarben nicht so effektiv Aber jetzt können Sie sehen, dass es cool ist, das zu sehen. Gut, lass uns wieder hierher gehen. Andere Dinge können gebaut werden, wir können mit den Bildern herumspielen. Außerdem habe ich das, ich könnte dieses Bild in etwas anderes ändern. Aber lass mich einfach nach unten scrollen oder ja, irgendwas in diesem Teil, wo ich das Bild von diesem Typen habe. Ordnung, ich ersetze einfach das Bild dieses Typen durch dieses Bild, auf dem es einen Hintergrund gibt. Und wir werden versuchen, den Hintergrund für dieses Bild zu entfernen. Wählen Sie unter Bild auswählen oder daneben Bild aus. Wir haben Edit mit KI hier. Ich werde das auswählen und den Hintergrund entfernen. Okay, ich klicke einfach darauf. Es gibt zwar eine Website namens This Removed Dog, auf der Sie einfach eines unserer Bilder hochladen können und der Hintergrund wird entfernt. Es gibt uns ein ziemlich genaues Ergebnis. Es dauert einige Zeit und Sie können sehen, dass es sehr genau ist, würde ich sagen, einfach weil der Hintergrund für das Bild, das wir verwendet haben, schlicht war und eine einfarbige Hintergrundfarbe hatte. Ich bin mir nicht ganz sicher, ob es ein paar mehr Bilder oder Objekte im Hintergrund gegeben hätte ein paar mehr Bilder oder Objekte im , wie gut das funktioniert hätte. Aber jetzt versuchen wir einfach, dieses Bild zu verwenden . Mal sehen, ob es funktioniert. Offensichtlich wird es dieses Bild in diesem Abschnitt verwenden. So sieht der Abschnitt aus. Ordnung, was den Teil mit den Bildern angeht, könnten wir ihn sogar in etwas anderes ändern , wenn ich ein Bild wie dieses habe. Lassen Sie mich einfach ein neues Bild aufrufen, das Produktbild. Lassen Sie uns versuchen, das Produktbild zu verwenden. Genau hier. Gut. Hier habe ich dieses Bild. Ich kann einfach dieses Bild wählen. Ich kann das Produkt selbst ändern. Ich könnte Variationen hinzufügen. Ich kann beschreiben, welche Variante oder Änderung ich an dem Produkt haben möchte. Ich könnte sagen, dass das Bild von Haaren ist. Pflege. Und so enthält das Bildbild Produktbilder von Haarspülseifen Wir möchten diese Produkte ersetzen. Auch hier werden nicht viele Variationen angezeigt , ich würde sagen, was Variationen des Bildes angeht. Es funktioniert nicht so gut, weil ich weiß , dass andere Tools wie Mid Journey auch noch in der Beta-Phase befinden. Natürlich können wir von Element keine Wunder erwarten. Oder lassen wir das und wir könnten wieder durch das ersetzen was wir früher benutzt haben, nämlich den Himmel. Gut, was bleibt uns übrig? Lassen Sie uns hier versuchen zu sehen, wie wir einen neuen Container generieren können . Anstatt auf das Plus zu klicken , wo wir den gesamten Container und den gesamten Abschnitt von Grund auf neu erstellen oder eine neue Vorlage erstellen Lassen Sie uns versuchen, mithilfe von KI einen neuen Abschnitt zu generieren. Hier könnte ich einfach auf diese AI-Schaltfläche klicken und sie fordert uns auf, einige vorgeschlagene Eingabeaufforderungen einzugeben Jetzt möchte ich, dass Sie Ihre Eingabeaufforderungen vorerst sehr genau Ihre Eingabeaufforderungen vorerst Ich habe einfach die gesamte Aufforderung aufgeschrieben und meine Eingabeaufforderungen danach aufgeteilt, welchem Layout, welcher Art von Farbschema ich folgen möchte, welcher Art von Typografie ich folgen möchte, welche Art von Bildern ich möchte, welche Art von CTA-Aktionen und CTA-Elementen ich möchte, welche Art von Animationen ich möchte, welche Art von Marke ich meinen Besuchern präsentieren möchte. All diese Dinge habe ich eigentlich schon aufgeschrieben eigentlich Sie können einfach die Hilfe von Cha GPT nutzen und sich eine Aufforderung einfallen lassen, die uns hilft, Eingabeaufforderungen für Element oder AI zu erstellen, um einen neuen Container zu erstellen Sagen wir einfach eine Produktfirma, gut, dass Sie eine Helden-Sektion erstellen , das ist es, was Sie eingeben können Ich füge einfach die gesamte Eingabeaufforderung und klicke auf Generieren. Mal sehen, welche Art von Container es angezeigt wird, denn ich finde, Design ist sehr visuell. Man kann es nicht mit Worten erklären. Deshalb gibt es Produkte wie Dvd und Figma. Und sie verfügen über Funktionen für die Zusammenarbeit , sodass die Mitarbeiter zusammenarbeiten können anstatt sie einzutippen und zu erklären, welche Art von Arbeit Sie voneinander erwarten Hier kannst du sehen, dass es sehr, sehr einfache Dinge zeigt . Es gibt zwei Container. Der eine hat den gesamten Text. Text angeht, so habe ich keinen Zweifel daran, dass er sich auszeichnen wird, denn St. GBD selbst und das GBT-Modell selbst sehr gut , was den Text angeht, aber was die Bilder und die Animation und das Layout angeht, ist es das nicht, es liefert keine genauen Ergebnisse Wir könnten diesen Teil einfach löschen oder was der bessere Weg wäre, eine der Premate-Vorlagen entweder aus Theme Forest zu importieren oder der Premate-Vorlagen entweder aus Theme Forest die Elementor Pro-Vorlagen zu verwenden Ich hoffe, euch hat dieser Vortrag gefallen. Es gibt viele andere Dinge , die Element in Bezug auf KI verbessern könnte. Mal sehen, ob sie in Zukunft die richtige Version von Element verbessern und einführen könnten . Oder ich für die Öffentlichkeit. 35. Das ist eine Verpackung: Abschlussnotizen: Leute. Bevor wir diesen Kurs beenden, möchte ich nur einige der Dinge besprechen , die wir vielleicht verpasst haben. Genau hier bin ich auf meinem Wortress-Dashboard und unter Elementor haben wir etwas namens As Tools Wenn wir genau hier hingehen, findest du unter allgemeinen Tabs, dass es einen sogenannten abgesicherten Modus gibt Das kann sich als nützlich erweisen, wenn Sie, sagen wir einfach, einige der Plug-ins verwenden oder vielleicht ein Theme von Theme for Us oder einem der Theme-Marktplätze importiert haben Theme von Theme for Us oder einem der Theme-Marktplätze und Ihre Website kaputt geht, um die Probleme zu debuggen Sie könnten einfach den abgesicherten Modus aktivieren, in dem Sie herausfinden , welches Plug-In oder was genau die Ursache für den Ausfall Ihrer Website ist, und dann können Sie debuggen Das ist also ein wichtiger Aspekt bei der Verwendung des abgesicherten Modus. Kommen wir dann zum Teil zur Versionskontrolle Hier können Sie zu einer der vorherigen Versionen von Element zurückkehren oder einfach eine der Versionen auswählen und auf die Schaltfläche „Neu installieren“ klicken. In Ordnung, dann haben Sie hier den Wartungsmodus. Nehmen wir an , sobald Sie diese Website von Ihrem lokalen System zu Ihrem Hosting-Anbieter hochgeladen oder übertragen haben, dann entscheiden Sie , sagen wir einfach, dass Sie Ihre Website oder einige der Webseiten aktualisieren möchten , dann wäre es keine gute Erfahrung , dass die Besucher Ihrer Website und in diesem bestimmten Moment parallel aktualisieren Webseite. In diesem Fall können Sie dann einfach den Wartungsmodus auswählen, der als Wartung bezeichnet wird. Oder „Demnächst“, „Demnächst könnte sich als nützlich erweisen, wenn Sie tatsächlich eine Webseite in Ihrer Menüleiste selbst, in der Navigationsleiste oder in Ihrer Kopfzeile enthalten haben. Ich würde sagen, dass die Seite selbst nicht ganz so live ist wie auf meiner Website. Hier habe ich. Lass mich dir nur zeigen, was ich damit meine. Hier habe ich eine sogenannte Blocks-Seite. Wenn ich direkt hierher gehe, wirst du feststellen, dass es eine Seite gibt, die demnächst verfügbar ist weil ich keinen der Blöcke veröffentlicht habe. So etwas kannst du tun, indem du einfach Coming soon auswählst. Oder Sie können einfach in den Wartungsmodus wechseln, was im Grunde bedeutet, dass jedes Mal, wenn jemand Ihre URL besucht , während Sie die Website aktualisieren, sieht, dass die Website gewartet wird Und Sie können das benutzerdefinierte Thema und Design mit dem Element- oder Theme-Builder Und Sie können das Design-Layout der verschiedenen Seiten auswählen , ob sie gewartet werden sollen oder bald verfügbar sein sollen. Wenn ich den Wartungsmodus auswähle, wirst du sehen, dass du die jeweilige Vorlage auswählst. Wenn Sie nun eine Vorlage für den Wartungsmodus gespeichert haben , wird diese direkt hier im Menü angezeigt und Sie können sie auswählen. Ordnung, hier hast du die Möglichkeit, jedes der Kits zu importieren oder zu exportieren, was im Grunde bedeutet, dass, sagen wir einfach, du hast eines der Theme-Elemente oder Themes von Theme for oder einem der Theme-Marktplätze heruntergeladen eines der Theme-Elemente oder Themes von Theme , du kannst es importieren Oder wenn Sie Ihr eigenes Theme verkaufen möchten , das Sie mit den Element- oder Pro-Elementen erstellt haben, und als Freelancer Geld verdienen und Ihre digitalen Vermögenswerte verkaufen möchten als Freelancer Geld verdienen und Ihre digitalen Vermögenswerte verkaufen Dann können Sie Ihr gesamtes Theme exportieren und auf einem der Marktplätze verkaufen In Ordnung, hier haben Sie den Benutzerbereich. Sie können mehrere Benutzer hinzufügen. Wenn Sie also sehen, dass es mehrere Benutzerrollen wie Abonnent, Mitwirkender, Autor, Herausgeber, Administrator Ab sofort sind wir Administratoren, was bedeutet, dass wir Zugriff auf alle Dinge haben , die wir auf unserer Presse-Website tun können Wenn Sie einen neuen Abonnenten erstellen, bedeutet dies im Grunde , dass dieser den Beitrag lesen und Ihren Blogbeitrag kommentieren kann . Wenn Sie jemandem die Rolle eines Mitwirkenden zugewiesen haben, kann dieser den Beitrag bearbeiten und löschen Das heißt, sagen wir einfach Sie haben Ihre Unternehmenswebsite oder Sie haben Ihre eigene Portfolio-Website und Sie haben Blogs veröffentlicht, aber Sie haben einen Texter dabei und Sie haben ihnen den Zugriff für Mitwirkende gewährt , sodass sie den Inhalt Ihres Beitrags bearbeiten oder vielleicht sogar löschen können den Inhalt Ihres Beitrags bearbeiten oder vielleicht sogar Wenn es nicht den Anforderungen entspricht, haben Sie die Möglichkeit, jemandem Autorenzugriff zu gewähren, was im Grunde bedeutet, dass er seinen Beitrag veröffentlichen Dateien in die Medienbibliothek hochladen kann. Nehmen wir an, anstelle eines Redakteurs, bei dem ein Redakteur im Grunde bedeutet, dass er Mitwirkende ist, nehmen wir an, dass Sie einen Texter in Ihrem Team haben in Ihrem Team dessen Aufgabe es ist, Ihren Blockbeitrag nur zu bearbeiten und ihn nicht erstellen, zu löschen oder Inhalte hinzuzufügen Du solltest ihnen einen Mitwirkenden geben, aber wenn du einen Texter bei dir hast, solltest du ihnen Autorenzugriff geben , damit sie Medien und andere Bilder, Videos, was auch immer für den Blockbeitrag geeignet ist, schreiben, veröffentlichen, hochladen können Medien und andere Bilder, Videos, was auch immer für den Blockbeitrag geeignet ist, schreiben, veröffentlichen, hochladen . Dann haben Sie einen Editor-Zugriff. Mit dem Editor-Zugriff kann die Person Kategorien innerhalb von Blockbeiträgen verwalten. Sie können die Kommentare moderieren sie dann ausgleichen und einen beliebigen Beitrag oder eine Webseite löschen. Dies ist eine weitere wichtige Sache, da Sie ihnen hier auch den Zugriff auf Ihre Webseite gewährt haben, was sich von Ihrem Blockbeitrag unterscheidet. Das wird wie ein Vollzeitjob bei dem sie Zugriff auf den Blockbeitrag haben. Dieser Editor-Zugriff ist jetzt praktisch, wenn Sie das gesamte Webdesign-Projekt an Ihren Kunden übergeben Webdesign-Projekt an Ihren Kunden manipulieren jedoch weder die Plugins noch entfernen sie die Benutzer oder bearbeiten das Theme selbst, was zu Problemen mit der Beschädigung von Websites führen könnte Es ist perfekt, ihnen den Editor-Zugriff zu geben , und Sie sollten den Administratorzugriff selbst behalten. Um also jedem Ihrer Benutzer, sagen wir, einem Abonnenten Zugriff zu gewähren, versuchen wir, einen Benutzernamen anzugeben. Ich gebe dem so etwas wie einen Editor. Ich werde eine E-Mail schreiben. Lassen Sie mich einfach eine beliebige E-Mail hinzufügen. Also hier habe ich die E-Mail. Ich kann den Vornamen und Nachnamen schreiben und hier kann ich das Passwort ändern, wenn ich möchte. Lassen Sie mich einfach so etwas wie ein sehr einfaches Passwort eingeben und ich kann diese Benachrichtigungsleiste einfach aktivieren oder deaktivieren. Da dies meine eigene E-Mail-ID ist. Ich weiß, dass ich Zugriff auf den Editor erhalten habe, also entnehme ich das einfach Und hier kann ich die verschiedenen Rollen wählen. Lassen Sie mich dies einfach als Abonnentenrolle angeben und ich werde einen neuen Benutzer hinzufügen. Ordnung. Lassen Sie mich jetzt einfach abmelden und ich melde mich mit einem anderen Benutzer an. Ich sollte sagen, dem Editor-Zugang oder mit dem Editor-Zugang oder dem Abonnenten-Zugang. Hier können Sie also sehen, dass ich mich mit dem Editor-Zugriff angemeldet habe . Genau hier können Sie den Editor-Zugriff sehen. In meinem Dashboard selbst habe ich also nur eine Option, Menü zum Zusammenklappen des Profils, und ich kann zum Dashboard wechseln. Ordnung, wenn ich also auf eine Presse-Website gehe, kann ich einen beliebigen Block-Beitrag auswählen. Und hier habe ich nur Zugriff darauf meinen Blockbeitrag zu lesen und Kommentare hinzuzufügen, was allen Benutzern sehr ähnlich ist , die keinen Zugriff auf Ihre Website haben. Sie können sogar dasselbe tun, sie können den Blockbeitrag lesen und Kommentare in Ihrem Beitrag hinterlassen. Der einzige Unterschied besteht jedoch darin , dass sich jemand, der einen Kommentar hinterlässt, auf Ihrer Website anmelden muss. Das haben Sie also getan, indem jemandem als Abonnent Zugriff gewährt haben. In Ordnung. Also ich hoffe, ihr versteht, worauf es ankommt und herzlichen Glückwunsch. Hiermit beenden wir den gesamten Kurs. Ernsthaft. Wussten Sie, dass nur 10% der Studierenden das erste Modul bestehen? Das bedeutet, dass Sie buchstäblich zu den besten Studenten gehören , die diesen Kurs je besucht haben. Und jetzt müssen Sie nur noch zwei Dinge tun. Die erste besteht darin, Maßnahmen zu ergreifen. Heute weiß ich, dass es ein bisschen klischeehaft klingen wird, aber es ist eine Tatsache, dass die Reise auf 1.000 Meilen mit einem einzigen Schritt beginnt Beginnen Sie mit dem Aufbau einer einfachen Website. Es spielt keine Rolle, ob Sie heute nicht alles machen können, sondern zumindest anfangen können. In Ordnung, zweitens brauche ich dein Feedback. Nehmen Sie sich 30 Sekunden Zeit, um Ihr ehrliches Feedback zu diesem Kurs hier auf der Plattform zu hinterlassen Ihr ehrliches Feedback zu . Und ich, sowie Hunderte anderer Studenten, werden Ihnen dankbar sein. Ich freue mich sehr zu sehen, wie dieser Kurs positiv auf den Rest Ihres Lebens auswirken wird. Halten Sie mich also unbedingt über Ihre Ergebnisse auf dem Laufenden. Ich freue mich auf Ihren Erfolg. Passen Sie auf sich auf. Tschüss.