Eine Restaurant-Website mit WordPress + Elementor (kostenlose Plugins) aufbauen

1. 2 Intro: Und willkommen zurück zu einem weiteren großartigen Wordpress-Webdesign-Kurs mit mir, Ken Messa Wenn Sie mich zum ersten Mal sehen, habe ich Leuten beigebracht, wie man mit Wordpress und kostenlosen Wordpress-Plugins wunderschöne Landingpages und voll funktionsfähige Websites erstellt voll funktionsfähige mit Wordpress und kostenlosen Wordpress-Plugins wunderschöne Landingpages und voll funktionsfähige Websites Wordpress und kostenlosen Wordpress-Plugins wunderschöne Landingpages und Und in diesem Kurs zeige ich Ihnen, wie Sie mit Wordpress Elementor und anderen kostenlosen Plug-ins eine voll funktionsfähige Restaurant-Website von Grund auf neu erstellen eine voll funktionsfähige Restaurant-Website von mit Wordpress Elementor und anderen kostenlosen Plug-ins eine voll funktionsfähige Restaurant-Website von Grund auf neu und anderen kostenlosen Plug-ins Sie müssen nichts bezahlen, um Ihre Website zum Laufen zu bringen wir diesen Kurs abgeschlossen haben, haben Sie eine Website , auf der Sie sofort Bestellungen und Reservierungen für Ihr Restaurant entgegennehmen können. Und das gesamte Bestell- und Reservierungssystem wird eine kostenlose App für Mobiltelefone integriert , die Sie im App Store oder Playstore herunterladen können . Sie erhalten dann Bestellungen, wenn Kunden ihre Bestellungen auf der Website aufgeben , die Sie gerade erstellen Aber bevor wir weit gehen, möchte ich Ihnen ein wenig über mich erzählen ungefähr fünf Jahren benötigte ich eine Website, um meine Grafikdesign-Dienstleistungen zu präsentieren und zu verkaufen. Ich hatte einige Jahre als Grafikdesigner gearbeitet, wollte aber selbstständig sein. Also wollte ich eine Website erstellen, über die ich meine Grafikdesign-Vorlagen und Dienstleistungen verkaufen konnte meine Grafikdesign-Vorlagen und , zum Beispiel auf Free Peek oder Shadow Stock. Zu diesem Zeitpunkt bin ich auf Elementor gestoßen und bei der Presse wurde mir klar, dass ich meine eigene Website erstellen könnte und so beschloss ich, es auszuprobieren Aber ich wusste nicht, dass diese Entdeckung nicht nur meine persönlichen Bedürfnisse erfüllen, sondern auch ein ganz neues Kapitel in meiner Karriere beginnen würde sondern auch ein ganz neues Kapitel in meiner Karriere beginnen Nachdem ich mir ein paar Elemento-Tutorials angesehen und meine eigene Website erstellt hatte, geschah etwas Magisches Es gingen Anfragen von Leuten ein , die mich baten, Websites für sie zu erstellen Und so habe ich einige Jahre für Webdesign-Kunden gearbeitet mehrere Websites für verschiedene Unternehmen erstellt Heute, und hier bin ich, ich übernehme keine Kundenprojekte mehr, sondern widme meine Zeit dem Teilen meines elementaren Fachwissens mit Ihnen allen Und wie ich bereits erwähnt habe, werden wir noch einmal alles behandeln, was Sie wissen müssen, um eine umfassende Website mit Wordpress zu erstellen Von der Erstellung einer einladenden Homepage die Präsentation Ihrer Speisekarte bis hin zum Teilen der Geschichte Ihres Restaurants Und sogar die Integration eines voll funktionsfähigen Bestell - und Reservierungssystems sodass Sie mit der Annahme von Bestellungen beginnen können Wir werden uns sofort den praktischen Aspekten von Wordpress und Elementor befassen Und ich begleite Sie Schritt für Schritt, während wir Online-Präsenz Ihres Restaurants zum Leben erwecken Am Ende dieses Kurses verfügen Sie nicht nur über die Fähigkeiten, eine Restaurant-Website zu erstellen, sondern auch über die Fähigkeiten , mithilfe von Webpress eine Vielzahl von Websites zu erstellen. Weil ich weiß, dass einige von Ihnen vielleicht genau dort sind, wo ich war, bevor ich wusste, wie man Websites erstellt. Sie möchten wissen, wie Sie Websites für sich selbst erstellen können, anstatt Leuten Hunderte oder Tausende von Dollar dafür zu zahlen . Weil Sie wahrscheinlich mehrere Ideen für verschiedene Websites und Online-Plattformen haben mehrere Ideen für , aber nicht wissen, wie Sie es selbst machen sollen. Einige von Ihnen möchten vielleicht sogar in das Webdesign-Geschäft einsteigen und dafür bezahlt werden, Websites für Kunden zu erstellen. wir diesen Kurs abgeschlossen haben, haben Sie also eine solide Grundlage dafür, wie Sie eine beliebige Website erstellen können. Dieser Kurs ist für dich. Übrigens, dieser Kurs ist die Erfüllung einer Bitte einer meiner Schülerinnen, Bridget Xi Ruf Bridget zu, dass sie diese Anfrage gestellt hat . Falls noch jemand eine Idee für eine Website hat , die wir in der nächsten Stunde erstellen sollen, legen Sie sie einfach im Diskussions-Tab unter diesem Videoplayer Ich kann es kaum erwarten zu sehen , was du erstellen wirst. Wenn du also genauso begeistert bist wie ich, sehe ich dich in der nächsten Lektion. 2. Projekt-Demo: Jetzt wollen wir uns unser Klassenprojekt ansehen. Eine der besten Möglichkeiten, eine Fähigkeit zu erlernen, besteht darin, etwas zu bauen. Das ist es, was wir bauen werden, diese Website genau hier. Ich möchte Sie nur auf einen kurzen Rundgang durch die Website mitnehmen. Während ich diesen Kurs vorbereitete, habe ich diese Website im Voraus erstellt. Ich habe es aus einem Grund gebaut , damit wir uns beim Aufbau etwas anschauen können. Wenn wir den Heldenbereich hier erstellen, können wir uns das ansehen und dann zu Wordpress gehen und mit dem Aufbau beginnen. wir uns ansehen, was wir bauen, haben wir einen Bezugspunkt. Andere Kurse oder Kurse haben vielleicht einen Ansatz, bei dem Sie einfach alles unter Kontrolle haben Du baust einfach etwas aus heiterem Himmel. Du weißt nicht genau, was du in diesem Kurs baust . Wir haben die Möglichkeit, zu dieser Referenz-Website zurückzukehren , den Abschnitt anzusehen, den wir gerade erstellen, wie er gestaltet ist, und zu unserem Editor zurückzukehren Das ist der Heldenbereich, und wenn ich ihn neu lade, werdet ihr feststellen, wie gut er animiert ist Jedes Element ist animiert , einschließlich des Hintergrundbilds. Und wenn wir mit dem Scrollen beginnen, werden Sie feststellen, dass wir einen Sticky-Header haben, der oben bleibt , unabhängig davon, wo wir uns auf der Website befinden, was eine coole Funktion ist Sie möchten nicht, dass Ihre Nab-Leiste beim Scrollen ausgeblendet wird beim Scrollen ausgeblendet Jedes Element hier ist animiert. Wenn ich es noch einmal neu lade, lassen Sie uns nach unten scrollen, ganz nach unten Wir werden sehen, wie das alles geht. Ich denke, es verleiht Ihrer Website Leben, sodass es sich nicht nur um eine statische Website handelt. Die andere Sache, die ich Ihnen zeigen möchte sind diese Schaltflächen die das Bestell - und Reservierungssystem öffnen. Wenn wir auf dieses Menü klicken und bestellen, öffnet sich das Menü und ich zeige Ihnen, wie Sie dieses System aufbauen. Ein Kunde kann herkommen und wählen, vielleicht will er einfach nur etwas Kaffee. Sie wählen den Kaffee und können Ihnen einige spezielle Anweisungen geben. Ich will es gehabt haben. Vielleicht komme ich mit zwei Gästen, wir werden zu dritt kommen. Wir können das in den Einkaufswagen legen. Und ich habe schon einige Tests damit gemacht. Deshalb habe ich zwei Artikel auf meiner Karte. Lass mich die Pizza rausnehmen. Der Kunde kann all diese Details hier angeben. Bestellmethode, Abholung, das ist okay. Speichern Sie die verfügbare Zeit so schnell wie möglich. können wir bearbeiten. Ich hatte diese bereits beim Testen festgelegt und deshalb sind sie bereits als Zahlungsmethode gespeichert. Hier wird es Bargeld oder Karte am Abholschalter sein , speichern Sie das. Und jetzt sind wir bereit, unsere Bestellung aufzugeben. Wenn ich klicke, hole bitte eine Bestellung ab. Ich gebe meine Bestellung jetzt auf meinem Handy auf, genau hier. Das ist die App, von der ich dir erzählt habe. Sie werden diese App haben, wenn Sie die Restaurant-Website betreiben. Hier ist die ausstehende Bestellung. Und ich habe hier einen grünen Button, um die Bestellung anzunehmen. Ich sollte aber auch in der Lage sein, die Person anzurufen und mit ihr zu bestätigen. Vielleicht können wir das tun, wenn ich möchte, dass sie bezahlen, bevor wir die Bestellung annehmen. Wenn ich hier zustimme, muss ich die Lieferzeit oder die Wartezeit angeben , vielleicht 30 Minuten, Abholzeit. Das heißt, sie sollten nach 30 Minuten kommen. Nun, da ich die Bestellung angenommen habe, wird der Kunde das auf der Plattform sehen. Bestellung bestätigt Abholung in 30 Minuten. Lass mich das schließen. Wir haben auch die Tischreservierungen, Anzahl der Personen, vielleicht drei Personen, ein Datum morgen. Nehmen wir an, wir kommen um 10:30 Uhr, wir haben ein Treffen, vielleicht haben wir ein paar besondere Anmerkungen. wir haben ein Treffen, vielleicht haben wir ein paar besondere Anmerkungen Möchten Sie dann als Nächstes im Voraus bestellen und Ihr Lieblingsessen bei der Ankunft bereit haben Lieblingsessen bei der Ankunft bereit Ja, bestelle jetzt, damit ich meine Bestellung aufgeben kann. Vielleicht Kaffee, spezielle Anweisungen. Wir werden zu dritt in den Einkaufswagen legen, und dann können wir zum Einkaufswagen gehen und die gleichen Anweisungen hier wiederholen. Tischreservierung. Spar dir das. Nein, warte. Tischreservierung und Bestellung. Tischgröße drei Personen, 1030. Speichern Sie diese Zahlungsmethode bar. Jetzt können wir unsere Bestellung aufgeben. Es gibt wieder eine Nachricht in der App. Und denken Sie daran, dass diese App zu 100% kostenlos ist. Ich gehe zurück und sehe die ausstehende Bestellung an und mir die ausstehende Bestellung an und kann hier auf Annehmen klicken, die grüne Taste. Ich kann weitermachen und das akzeptieren. Jetzt wird der Kunde hier auf dem Bildschirm sehen , dass seine Bestellung, seine Reservierung bestätigt wurde. Lass uns das schließen. Wenn wir jetzt hier scrollen, werden wir natürlich sehen, wie jeder einzelne Abschnitt auf dieser Seite erstellt wird. Wir haben hier eine kleine Speisekarte, wir zeigen einige der Speisen, die wir haben. Und ich zeige Ihnen, wie Sie dieses Menü mit einem sehr tollen Plug-In erstellen können. Dies ist dieselbe Schaltfläche, um das Menü zu laden , damit der Kunde eine Bestellung aufgeben kann. Dies ist dieselbe Reservierungsschaltfläche , um eine Reservierung vorzunehmen. Diese werden jetzt als Call to Actions bezeichnet. Jede Landingpage muss Handlungsaufforderungen enthalten, denn das ist der Zweck einer Landingpage. Um den Benutzer dazu zu bringen, eine Aktion zu ergreifen. In diesem Fall geht es darum, eine Bestellung aufzugeben oder eine Reservierung vorzunehmen. Und hier haben wir eine Galerie. Wir können auf Galerie öffnen klicken. Es wird in einem neuen Tab geöffnet, und ich zeige dir, wie das geht. Wir werden hier zur Galerie-Seite weitergeleitet. Wir werden Bilder von verschiedenen Aktivitäten haben. Wir können sie uns in verschiedenen Kategorien, Mitarbeitern, Küchentischen oder allen ansehen . Da haben wir's. Wir haben die Info-Seite. Im Grunde dreht sich hier alles um das Layout. Wir werden auch sehen, wie man diese Seite erstellt. Sie hat dieselben Call-to-Action-Schaltflächen , weil sie wichtig sind. Wir haben hier ein Newsletter-Anmeldeformular, falls sie auf dem Laufenden bleiben möchten , was mit dem Restaurant passiert. Lassen Sie mich natürlich zur Kontaktseite „Kontakt“ wechseln. Sie können sich an das Management oder den Administrator der Website wenden . Dies ist nur eine einfache Website, aber sie bietet alles, was Sie auf einer Restaurant-Website benötigen , um Ihr Unternehmen erfolgreich zu führen. Ich habe damit zwei Ziele. Ich möchte Ihnen helfen, eine tatsächliche Website zu erstellen , die Sie für Ihr Restaurant verwenden können wenn dies Ihr Ziel ist. Aber es wird Sie auch mit den Fähigkeiten ausstatten , Wordpress-Websites zu erstellen. Sie werden das Wordpress und die elementaren Arbeitsabläufe zum Erstellen von Websites verstehen . Das ist nur ein kurzer Überblick über das Projekt, an dem wir arbeiten werden. Und wenn du dein Projekt abgeschlossen hast, vergiss nicht, einen Screenshot deiner Landingpage zu machen und ihn hier mit dem Rest der Community zu teilen . Gehe einfach direkt unter diesem Videoplayer zum Tab Projekte und Ressourcen. Hier ist ein Beispiel für einen meiner früheren Kurse. Dies ist der Tab Projekte und Ressourcen. Und hier sind Beispiele für einige Projekte, die die Studierenden hier gepostet haben. können also gerne einen Screenshot Ihrer Landingpage machen und ihn mit der Community teilen. Holen Sie sich Feedback von Mitschülern und Ihrem Lehrer. Und ich glaube, dass wir dadurch alle zusammenwachsen können . Wenn Sie also bereit und begeistert sind, loszulegen, lassen Sie uns über den Kauf einer Domain und das Hosting für Ihre Website sprechen , denn Ihre Website muss irgendwo online sein Wir sehen uns in Kürze. 3. Hosting und Domainnamen kaufen: Willkommen zurück. Jetzt haben Sie gesehen , was wir bauen werden. Es ist Zeit, darüber zu sprechen, wo Ihre Website gehostet werden soll. Jede Website, die Sie besuchen oder online sehen , wird irgendwo auf einem Server gespeichert. Aus diesem Grund steht die Website Menschen von überall auf der Welt zur Verfügung. Wenn ich auf einen Link klicke, der mich zu Ihrem Restaurant führt, werden die Restaurant-Webseiten von dem Server geladen , der von Ihrem Webhost bereitgestellt wird. Es ist das Zuhause Ihrer Website. Ich bin direkt hier auf der WordPress.org-Website und speziell auf der Hosting-Seite Wordpress hat seine empfohlenen Webhosts. Fahren Sie fort und lesen Sie diese Seite. Es ist WordPress.org Slash-Hosting. Wie Sie sehen können, haben wir drei empfohlene Webhosts von WordPress.org Wir haben Bluehost, wir haben Dream Host und wir haben WordPress.com. Wenn wir Bluehost öffnen, und wir haben WordPress.com. Wenn wir sind wir Bluehost hat Wordpress-Hosting. Lass mich einfach darauf klicken oder vielleicht hier rauf gehen. Wordpress, Wordpress-Hosting. Hier sind die Preise für die verschiedenen Pläne von Blue Host. Das sind 5,4$. Pro Monat stehen Ihnen 40 GB SSD-Speicher zur Verfügung und Sie können drei Websites hosten Im Rahmen dieses Hosting-Plans können Sie drei verschiedene Websites unter demselben Hosting-Plan haben . Schauen wir uns Dream Host an. Gehen wir zum Wordpress-Hosting, dem unschlagbaren Wordpress-Hosting Schauen wir uns die Preisgestaltung an 2,95€ springen zu weiteren Funktionen und Textspezifikationen Anzahl der Websites: Sie können eine für 8,95 erhalten . Sie können unbegrenzt viele Websites erhalten Sie können auf diesem Hosting-Dienst unbegrenzt viele Websites für diese anderen einrichten, es ist nur eine Machen Sie einfach weiter und gehen Sie als Nächstes all diese durch. Schauen wir uns die dritte Option an, die sie anbieten, ist WordPress.com. Verwechseln Sie WordPress.com jetzt nicht mit WordPress.org. WordPress.com ist eine Plattform, mit der Sie darauf eine Website erstellen können , und die sich um Ihr Hosting kümmert Es hostet deine Websites für dich. WordPress.org ist die Organisation, die das Wordpress bereitstellt , das Sie auf Ihren Webhost herunterladen Wenn Sie beispielsweise eine Website auf Bluehost erstellen, müssen Sie Wordpress herunterladen und installieren Sie erhalten es von WordPress.org. Wenn wir auf die Startseite gehen, können Sie sehen, dass Sie Wenn ich nun Wordpress auf meinem lokalen Host bauen möchte , der sich genau hier auf meinem Computer befindet , nur zu Entwicklungszwecken, um zu experimentieren, bevor ich einen Webhost finde, kann ich Wordpress hier herunterladen Aber wenn ich eine Website erstellen und online starten möchte, benötige ich einen Webhost. Und wenn ich einen Plan kaufe, mir der Webhost Zugriff auf das Panel. Jeder Webhost stellt Ihnen ein Panel zur Verfügung. Und im Panel werden Sie Wordpress installieren, und ich zeige Ihnen, wie das geht. Wir haben auch einen Service , der nicht auf WePress.org aufgeführt ist, denn denken Sie daran, dass dies nur Empfehlungen sind Aber es gibt viele andere Webhosts, die sehr großartig sind. Persönlich habe ich einige Websites mit dem Namen Chip gehostet. Gehen wir jetzt zum Shared Hosting. Ordnung, also wenn Sie gerade erst anfangen und Ihre Website testen, ist das der Plan, den ich verwende, wenn ich gerade mit einer Geschäftsidee beginne und das Terrain sondieren möchte. Stella plus 2,98€ pro Monat. Zuallererst erhalten Sie einen kostenlosen Domainnamen unbegrenzte Website Das heißt, Sie können Mike.com haben. Sie können Ferguson.com New Gym website.com haben Ferguson.com New Gym website.com können Sie mehrere Websites hosten Gehen wir davon aus, dass dies nur Websites sind, die Sie testen. Sie benötigen keine separaten Hosting-Angebote , um Ideen zu testen. Sie können sie einfach alle im Rahmen eines Hosting-Plans testen , für den Sie 2,98€ pro Monat zahlen Dann. Sobald einer von ihnen richtig durchstartet und anfängt, sehr gut zu funktionieren, können Sie jetzt separat ein dediziertes Hosting dafür bekommen Das ist es, was ich mache. würde ich persönlich empfehlen. Es steht Ihnen jedoch frei, aus diesen anderen Webhosts einen beliebigen anderen Webhost auszuwählen . Hier dreht sich alles um Webhosting. Ich hätte eine separate Lektion über den Kauf einer Domain gehabt. Aber der Kauf einer Domain ist ziemlich einfach. Du kommst einfach zu Name Chip. Und ich habe keine Verbindung zu Name Chip. Ich kriege kein Geld von ihnen. Es ist nur der Service , den ich persönlich nutze. Sie können zu Domains kommen, Domainnamen suchen und nach Ihrem Namen suchen. Sagen wir Bebistra.com Wenn ich die Eingabetaste drücke, werden mir verschiedene Optionen und Und ich kann in den Warenkorb legen und jede Domain kaufen, die ich möchte. Sie können hier sehr günstige Domains bekommen. Seien Sie einfach kreativ mit Ihren Domainnamen, wenn der, den Sie möchten, zu teuer ist, wie Betbstra.com, wie Sie sehen können, es ist ein Premium-Domainname und er kostet 34 Das ist eine Menge Geld. Aber nehmen wir an, wie Sie sehen können, handelt es sich nicht um eine Premium-Domain. Es ist nur 10.28. Seien Sie kreativ und suchen Sie nach Möglichkeiten, einen günstigen Domainnamen zu bekommen , mit dem Sie leben können Im Grunde geht es darum, Webhosting und einen Domainnamen für Ihre Website zu kaufen Webhosting und einen Domainnamen für Ihre Website zu Lassen Sie uns in der nächsten Lektion darüber sprechen, wie Sie Wordpress in Ihrem Panel installieren , sobald Sie Ihr Webhosting und einen Domainnamen gekauft haben. Wir sehen uns in Kürze. 4. WordPress installieren: Willkommen. Jetzt ist es an der Zeit, Wordpress in unserem Panel zu installieren. Unabhängig davon, für welchen Webpost Sie sich entschieden haben, ist die Installation von Wordpress nun , wenn Sie den Namenschip nicht verwenden so ziemlich dieselbe, wenn Sie den Namenschip nicht verwenden. Wir müssen auf das Panel zugreifen und uns dann in unser Panel einloggen und dort Wordpress installieren , damit ich auf mein Panel zugreifen kann. Im Namenschip muss ich mich zunächst in meinen Namenschip einloggen und mich anmelden. Loggen Sie sich jetzt einfach in Ihren Webbeitrag ein. Ich muss das überprüfen. Lassen Sie mich das ganz schnell überprüfen. Ordnung. Reichen Sie das ein. Hier sind wir. Ich gehe direkt zu meiner Hosting-Liste. Das ist eine Liste der verschiedenen Hosting-Pakete. Wie Sie sehen können, habe ich nur eines gekauft. Ich gehe zum Panel von. Ich habe mich bei meinem Name-Chip-Konto angemeldet, damit ich mich in mein Panel einloggen kann, indem ich darauf klicke. Ihr Webhost bietet Ihnen möglicherweise die Möglichkeit, zur Anmeldeseite Ihres C-Panels zu gelangen, sodass Sie nicht Ihr Webhost-Konto aufrufen müssen. Aber so habe ich es gemacht. jetzt wieder in mein Panel zurückkehren, unabhängig von Ihrem Webhost, wird Ihr C-Panel die meisten dieser Funktionen genau hier haben. Und eine dieser Funktionen ist Wordpress. Es wird im Staculus Apps Installer sein. Ich klicke auf Wordpress und werde zum Softaculus-Dienst weitergeleitet Wie du siehst, wird This is Softaculus direkt auf die Wordpress-Übersichtsseite weitergeleitet direkt auf die Wordpress-Übersichtsseite weitergeleitet Das sind jetzt meine aktuellen Installationen. Wie Sie sehen können, habe ich eine Wordpress-Installation unter dieser Domain. Wir können eine neue installieren. Ich werde weitermachen und installieren. Jetzt habe ich ein paar Domainnamen, einer davon ist VFX Port.com und diesen werde ich aus dem Drop-down-Menü verwenden Wenn Sie ein SSL-Zertifikat haben, können Sie HTTPS wählen Mir gefällt das Präfix WWW Klicken Sie nach draußen, es wird geprüft und bestätigt, dass Sie ein SSL-Zertifikat haben. Wie Sie sehen können, ist dies die Version von Wordpress, die wir derzeit haben. Natürlich lasse ich dieses Feld leer, weil ich nicht möchte, dass mein Domainname eine Erweiterung mit dem Schrägstrich wwwfport.com hat Es wird einfach vifport.com heißen. Als Nächstes geben wir unserer Website einen Namen. Ich gebe ihm ein Restaurant. Geben wir ihm einen kurzen Slogan oder eine kurze Beschreibung. Die besten Mahlzeiten der Stadt. Dies sind die Anmeldeinformationen, mit denen Sie sich direkt bei Ihrem Wordpress-Dashboard anmelden Ihrem Wordpress-Dashboard wenn Sie nicht das C-Panel aufrufen möchten. Sie müssen also nur zu Ihrem Domain-Login gehen und Sie werden zur Anmeldeseite weitergeleitet. Und dann ist das eine Standard-Admin-E-Mail von Spectaculars generiert wurde In dieser Admin-E-Mail erhalten Sie alle Warnungen oder Benachrichtigungen vom System, Ihrem Webhost in Bezug auf Ihre Website, möglicherweise Sicherheitswarnungen oder ähnliches Ich werde alles andere intakt lassen, aber wir können die Registerkarte „ Erweitert“ öffnen und wenn Sie Ihre Website von Zeit zu Zeit sichern möchten , lassen Sie diese. Standardmäßig kannst du sagen, vielleicht einmal pro Woche, Backup-Rotation , vielleicht zwei Kopien. Das bedeutet, dass Sie zu jedem Zeitpunkt immer zwei Kopien Ihrer Website haben werden , eine ältere Version und die Version, die am häufigsten gesichert wurde. Damit möchte ich auch diese überprüfen. Dies sind Plug-ins, die mit Ihrem Wordpress vorinstalliert werden . Ich benötige keines davon, weil es bessere Alternativen gibt , sobald wir mit der Installation von Plug-ins beginnen . Dann können Sie eine E-Mail angeben , um eine Benachrichtigung zu erhalten , sobald Ihre Installation abgeschlossen ist. Aber das ist keine Masseninstallation , sondern eine optionale Installation. Da haben wir es, jetzt haben wir Wordpress installiert. Wie Sie sehen können, ist dies unsere Domain, dies ist unsere administrative URL. Dadurch gelangen wir zum Wordpress-Dashboard. Wenn ich darauf klicke, haben wir es da. Jetzt haben wir Wordpress erfolgreich installiert. Wie Sie sehen können, ist dies Version 6.4 0.2 und jetzt können wir mit der Website beginnen. Wir sehen uns in der nächsten Lektion. 5. Elementor installieren: Jetzt ist es an der Zeit, Elementor zu installieren , da wir die Website damit erstellen Gehen wir direkt zu den Plug-ins. Ich klicke zunächst auf Plugins, damit wir zur Liste der bereits installierten Plugins weitergeleitet werden können . Ich möchte beide auswählen, indem ich das Kästchen hier ankreuze. Löschen Anwenden. Wir brauchen sie nicht. Jetzt haben wir ein unbeschriebenes Blatt. Ich werde weitermachen und hinzufügen. Wir werden zum Wordpress weitergeleitet. Stecken Sie das Verzeichnis hier ein, ich suche nach Element, es ist natürlich das erste von elemento.com mit mehr als 5 Millionen aktiven Installationen Wenn Sie Elementor noch nicht kennen, haben wir, wie Sie sehen können, weitere Plugins, die entwickelt wurden, um die Leistung von Elementor zu erweitern Dies sind Drittunternehmen wie WP Developer Unlimited, WP Royal Dies sind Drittanbieter, die weitere Elemente erstellt haben, die Sie Ihrem Elementor-Plugin kostenlos hinzufügen Und wir werden im Laufe der Installation von Elementor eine Reihe dieser Plugins verwenden Elementor Ich klicke auf Aktivieren und werde zum Elementor-Setup-Assistenten weitergeleitet Wenn Sie nun einige dieser Vorteile nutzen möchten, können Sie ein Konto bei elemento.com erstellen. Sie müssen jedoch kein Konto erstellen, um Elementor zu verwenden. Ich überspringe Sie müssen jedoch kein Konto erstellen, um Elementor zu verwenden. Ich überspringe das einfach Sie können wählen, ob Sie mit dem Hello-Thema fortfahren möchten, das speziell von Element vom Elemento-Team für die Zusammenarbeit mit Elementor erstellt wurde Elemento-Team für die Zusammenarbeit mit Elementor Aber wir werden ein viel besseres Wordpress-Theme namens Astra verwenden ein viel besseres Wordpress-Theme namens Und wir werden es in der nächsten Lektion installieren. Ich mache weiter und überspringe das. Das ist der Name, den wir unserer Website gegeben haben , als wir sie erstellt haben. Wir müssen es nicht ändern, aber wenn Sie möchten, können Sie es jetzt ändern. Ich mache einfach den nächsten Schritt. Sie können jetzt ein Logo hinzufügen, wenn Sie möchten, aber das machen wir später. Ich überspringe es jetzt. Wir sind fertig. Sie können eine leere Leinwand mit dem Elementar-Editor bearbeiten, oder Sie können eine professionell gestaltete Vorlage auswählen oder Vorlagen importieren Sie bereits in einem anderen Projekt erstellt haben. Wir können aber auch auf Überspringen klicken oder dieses Fenster schließen. Lass mich einfach auf Überspringen klicken, aber wir werden trotzdem zu einer leeren Elementor-Seite weitergeleitet Wie Sie sehen können, wird der Editor von Elementary geladen. Jetzt ist das eine leere Seite. Wir werden es löschen. Aber schauen wir uns vorerst an, was wir hier haben. Schalte die Macht von Element I frei. Dadurch stehen uns KI-Funktionen zur Verfügung. Beim Aufbau unserer Website können wir KI-Funktionen nutzen . Lassen Sie uns weitermachen und „ Weiter“ sagen. Los geht's. Wie ich bereits erwähnt habe, ist das nur eine leere Seite. Lass uns hierher gehen und Exit sagen. Wenn wir Exit sagen, weil wir diese Seite nicht veröffentlicht haben, wird uns vielleicht gesagt, wir werden gefragt, ob wir die Seite wirklich verlassen wollen. Jetzt können wir genau hier wählen, wohin wir jedes Mal weitergeleitet werden möchten, wenn wir auf diese Exit-Taste klicken. Und ich mag es, zum WP-Dashboard weitergeleitet zu werden , weil das der einzige Ort ist, an den ich gehen möchte. Ja, lassen wir es, weil wir die Änderungen nicht speichern wollen. wurden wir jedes Mal zum Wordpress-Dashboard weitergeleitet Von nun an wurden wir jedes Mal zum Wordpress-Dashboard weitergeleitet, wenn wir auf die Exit-Schaltfläche klicken Unser Editor wird zum Dashboard weitergeleitet , was wir wollen. Wie Sie sehen können, haben wir jetzt Elementor und Vorlagen. Diese beiden wurden nach der Installation von Elementor zu dieser Liste hinzugefügt nach der Installation von Elementor zu dieser Liste Wenn wir hier zu Elementor gehen, haben wir Integrationen und erweiterte Funktionen Sie müssen keine dieser Einstellungen wirklich berühren. Ich persönlich nehme an keiner dieser Einstellungen Änderungen vor. Ich mache einfach weiter und fange direkt an. So installiert man Element. In der nächsten Lektion sehen wir uns an, wie das Astra-Theme installiert wird. Wir sehen uns in Kürze. 6. Installiere ein WordPress-Theme: Jetzt ist es an der Zeit, ein Wordpress-Theme zu installieren. Jedes Mal, wenn Sie an einem Wordpress-Projekt arbeiten möchten, müssen Sie ein Theme installiert haben. Jetzt machen wir das, indem wir uns mit den Themen des Erscheinungsbilds befassen. Standardmäßig wird bei jeder Installation von Wordpress ein vorinstalliertes Theme installiert und das Theme hat den Namen des Jahres, in dem Sie Wordpress installiert haben . In diesem Jahr haben wir 2024 als aktives Thema. Letztes Jahr hatten wir 2023 und im Jahr davor hatten wir 2022. Aber das sind nicht die , die wir verwenden werden. Wir gehen hinein und fügen ein neues Thema hinzu und werden in das Themenverzeichnis weitergeleitet. So wie wir zum Plugin-Verzeichnis weitergeleitet wurden. Wie ich bereits erwähnt habe, ist das Astra-Thema unser Lieblingsthema. Es bietet einfach einige sehr nette Funktionen , die ich wirklich gerne benutze. Und du wirst sehen, warum Astra jetzt installiert ist, aber noch nicht aktiv ist. Klicken Sie auf Aktivieren. Da haben wir's. As ist jetzt aktiviert. Fangen Sie mit einer vorgefertigten Vorlage an, bla, bla, bla. Nein, lassen Sie uns das schließen , weil wir alles von Grund auf neu erstellen werden Wir werden keine vorgefertigten Vorlagen verwenden. Ordnung, wie Sie jetzt sehen können, ist Active das Astra-Thema. Im Grunde genommen ist das so, um ein Wordpress-Theme zu installieren. In der nächsten Lektion beginnen wir mit der Arbeit an der Startseite. Wir sehen uns in Kürze. 7. Elementor Workspace-Übersicht: Nachdem wir unser Theme installiert und Elementor installiert haben, wollen wir uns einen kurzen Überblick über den Elementor-Arbeitsbereich Gehen wir direkt zu Pages. Dies ist die Liste aller Webseiten, die wir haben. Als wir nun Wordpress installiert haben , wurden zwei vorinstallierte Webseiten mitgeliefert. Wie Sie sehen können, handelt es sich bei dem Entwurf der Datenschutzrichtlinie um einen Entwurf und eine Beispielwebseite , auf der Sie diese beiden auswählen, zu diesem Drop-down-Menü wechseln und in den Papierkorb verschieben. Mit anderen Worten, lösche sie. Jetzt haben wir eine Beispielelementseite, die während des Elementa-Setup-Assistenten generiert wurde Diese Seite eignet sich gut , um sich die Übersicht über den Elemental Workspace anzusehen die Übersicht über den Elemental Workspace Um nun zum Element-Editor zu gelangen, haben wir zwei Möglichkeiten. Wir können hier auf Mit Elementa bearbeiten klicken oder hier auf Bearbeiten gehen. Sie finden dieselbe Option zum Bearbeiten mit Elementor. Ich klicke einfach darauf und werde zum Frontend weitergeleitet, wo wir uns jetzt den elementaren Arbeitsbereich hier ansehen können den elementaren Arbeitsbereich hier ansehen Hier befindet sich unsere Website. Was auch immer wir bauen , es wird genau hier sein. Das ist wie unser Werkzeugkasten. Es hat alles, was wir brauchen. Dies sind Elemente , die wir auf unsere Website ziehen können , um sie zu verwenden. Deshalb heißt es Elementor. Es versorgt uns mit Elementen. Jetzt haben wir Panels, die verschiedene Elemente enthalten. Wenn ich sie alle zusammenfalle, lass mich das einfach schließen. Dies sind alle Panels, die Elemento uns zur Verfügung stellt. Wenn wir sie erweitern, handelt es sich um ein Container-Element, da Element letztes Jahr auf ein containerbasiertes System zur Erstellung Ihrer Webseiten umgestellt ein containerbasiertes System zur Erstellung Ihrer Webseiten Und wir werden sehen, wie man diese Container benutzt. Wenn ich das zusammenfalle, haben wir das Basispanel. Es enthält die am häufigsten verwendeten Elemente Sie auf jeder Website finden können. Wir haben ein Überschriftenelement. Wenn wir es genau dorthin ziehen, ist das, wie Sie sehen können , eine Überschrift, und wir können darauf doppelklicken und sie bearbeiten. Lassen Sie mich das schließen. Wir haben einen Texteditor, eine Schaltfläche, einen Teiler, wir haben einen Abstandshalter Wir werden sehen, wie man die meisten davon benutzt. Wenn wir das Basisfenster reduzieren und das Pro-Panel erweitern, werden Sie feststellen, dass diese Elemente in der oberen rechten Ecke ein kleines Schloss haben . Das bedeutet im Grunde, dass diese nicht kostenlos sind. Sie können es nicht ziehen und hier einfügen. Wenn Sie versuchen, es zu ziehen, wird dieses Pop-up angezeigt, in dem Sie aufgefordert werden, ein Upgrade durchzuführen. Das Gute an Elementor ist, dass wir bei der Installation von Elementor andere Plug-ins von Drittanbietern gesehen haben, andere Plug-ins von Drittanbietern gesehen haben die zusätzliche Elemente bereitstellen Sie müssen sich keine Sorgen machen , dass Sie keinen Zugriff auf diese Pro-Elemente haben Zugriff auf diese Pro-Elemente Sie können immer noch auf Elemente zugreifen, die die meisten dieser Dinge können, indem die Add-Ons für Elemente von Drittanbietern installieren , die wir bei der Installation von Elementor gesehen haben Und wir werden sehen, wie das geht, weil wir gesagt haben, dass wir einige dieser Plug-ins von Drittanbietern verwenden Wenn ich das Pro-Panel zusammenklappe, haben wir das allgemeine Panel. Das hier hat kostenloses Zeug, man kann Sachen hierher ziehen und ablegen. Lass mich das zusammenklappen, lass mich hierher zurückkehren. Natürlich werden wir uns das alles ansehen und Sie werden sehen, wie wir sie verwenden. Nun hast du gemerkt, wenn ich das zum Beispiel hierher ziehe, ändert sich das an den Einstellungen des spezifischen Elements, das du gerade gelöscht hast , oder an dem Element, das du gerade deinem Workspace ausgewählt hast. Wenn wir auswählen, ist das immer noch Überschrift bearbeiten, weil es sich um eine Überschrift handelt. Wenn ich diese Option auswähle, denke daran, dass es sich um ein Bildkarussell handelte . Das ändert sich in „ Bildkarussell bearbeiten“ Das bedeutet, dass diese Einstellungen für dieses spezielle Bildkarussell für dieses Wenn ich dies dupliziere, indem ich mit der rechten Maustaste klicke und dupliziere und auswähle , gelten diese Einstellungen für dieses spezielle Wenn ich auswähle, gelten diese Einstellungen für dieses spezielle Bildkarussell Wenn wir nun diese Einstellungen hier angezeigt haben und weitere Elemente hinzufügen möchten, können wir einfach auf dieses Symbol klicken und die Elementliste wird erneut Und Sie können alles, was Sie möchten, hineinziehen. Beachten Sie, dass sich hier die Schaltfläche „ Bearbeiten“ geändert hat , da wir die Schaltfläche gerade entfernt haben. Es ist gerade das aktive Element. Ich möchte, dass wir uns auch einen Navigator ansehen. Wenn ich die Strg-Taste drücke, haben wir hier einen Navigator. Dies ist im Grunde ein Überblick über das, was wir hier in diesem Bereich haben. Wie Sie sehen können, haben wir drei Container. Wir haben diesen Container, hier ist ein weiterer Container und hier ist noch ein Container. Das sind drei Container. Im dritten Container haben wir ein Bildkarussell und eine Schaltfläche Wie Sie sehen können, das Bildkarussell und die Schaltfläche. In diesem zweiten Container haben wir nur eine Bild-Carro-Zelle Wenn ich das zusammenfalle und es erweitere, haben wir eine Bild-Carro-Zelle Hier haben wir zwei Überschriftenelemente. Wenn ich das zusammenfalle und den Container erweitere, haben wir zwei Überschriftenelemente. Das ist der Navigator. Und du kannst einfach, du kannst diese Steuerung schließen. Sie können es an einer beliebigen Stelle auf dem Bildschirm verwenden. Und es schwebt auf Ihrem Bildschirm, sodass Sie andere Teile sehen können. Hier, lass mich es einfach da hinstellen und das schließen. Hier haben wir das Symbol für den responsiven Modus. Dies ist die Schaltfläche , mit der wir es gewohnt sind, unsere Website auf verschiedenen Gerätegrößen responsiv zu machen. Hier haben wir eine Historie, eine Liste von Änderungen, die wir an unserer Website vorgenommen haben. Und wir können einen Zeitpunkt auswählen und zu diesem zurückkehren. Dadurch wird der Status Ihrer Website in den Zustand geändert , in dem sie sich befand, als Sie diese Änderung vorgenommen haben. Es entfernt alle Änderungen , die danach vorgenommen wurden. Auf diese Weise können Sie viele Änderungen rückgängig machen, die Sie vorgenommen haben und mit denen Sie nicht zufrieden sind. Wir können zum Zeitpunkt des Beginns der Bearbeitung zurückkehren und die Website ist leer , weil sie zu diesem Zeitpunkt so aussah , und wir werden sehen, wofür all diese anderen gedacht sind. Im Grunde ist das nur ein kurzer Überblick über den elementaren Arbeitsbereich. Während wir an den verschiedenen Webseiten und verschiedenen Abschnitten arbeiten , werden Sie sich in der nächsten Lektion daran gewöhnen, all diese Tools zu verwenden all diese Tools Lass uns nun mit dem Heldenbereich beginnen . Wir sehen uns in Kürze. 8. Helden-Abschnitt - Hintergrundbild: Jetzt haben wir uns nur einen kurzen Überblick über den elementaren Arbeitsbereich verschafft, aber wir benötigen diese Seite nicht mehr. Ich mache einfach weiter und klicke auf das Burger-Menü und gehe dann. Wir sagen „Gehen , weil wir die Änderungen nicht speichern müssen . Es wird zum Dashboard weitergeleitet, wie wir es bereits gesagt haben. Gehen wir jetzt zurück zu den Seiten. Wir können das löschen , weil wir es nicht benötigen. Fügen wir nun eine neue Seite hinzu, indem wir auf diese Schaltfläche klicken. Und geben wir ihr einen Namen. Nennen wir das die Homepage. Gehen wir nun zur Vorlage und wählen Elementor Full Width Gehen wir zu den Astra-Einstellungen, da wir die Seite einrichten und das Erscheinungsbild der Seite durch das von Ihnen verwendete Thema bestimmt wird Gehen wir zu den Astra-Einstellungen. Dies sind die Wordpress-Einstellungen, aber das sind die Astra-Einstellungen. Was wir wollen, ist genau hier in voller Breite. Mach dir keine Sorgen über diese Einstellungen. Sie gelten nur, wenn das Layout entweder auf Normal oder Schmal eingestellt ist . Diese sind uns egal , weil wir sie auf volle Breite eingestellt haben. Der gleiche Fall gilt für die Seitenleiste. Wir möchten nicht, dass unsere Webseite eine Seitenleiste hat, wir setzen sie auf keine Seitenleiste. Dann schauen wir uns die deaktivierten Elemente an. Wir wollen die Astra-Kopf- oder Fußzeile nicht, wir werden unsere eigenen Kopf - und Fußzeilen erstellen, um - und Fußzeilen Und dass wir das einfach intakt lassen oder einfach deaktivieren können, aber das ist nicht wirklich wichtig Hier hat er veröffentlicht, veröffentlicht. Jetzt ist die Seite fertig. Jetzt können wir mit Elementor auf Bearbeiten klicken und werden zum Frontend weitergeleitet, wo wir jetzt mit dem Erstellen beginnen können Denken Sie jetzt daran, dass Elementor jetzt ein containerbasiertes Webdesign-System verwendet, das Sie gesagt ein containerbasiertes Webdesign-System verwendet Wir werden Container verwenden, um unsere verschiedenen Abschnitte zu erstellen Wenn Sie hier auf dieses Plus-Symbol klicken , werden einige vorgefertigte Strukturen angezeigt, die Sie verwenden können. Wir nehmen das hier für die Helden-Sektion. Wenn ich hier hin wechsle, habe ich das gestern gebaut, als ich es vorbereitet habe. Das hier ist der Heldenbereich. Jede Landingpage muss einen auffälligen Heldenbereich mit drei Hauptelementen haben. Eine Überschrift, die zusammenfasst, worum es auf der Webseite geht und worum es bei Ihrer Website oder Ihrem Unternehmen geht Eine kurze Beschreibung, in der die Überschrift und die Schaltflächen zum Aufrufen von Aktionen erläutert zum Aufrufen von Aktionen Das sind die drei Dinge, die du in deiner Heldenabteilung haben musst in deiner Heldenabteilung haben Wir möchten zunächst dieses Hintergrundbild in unserem Heldenbereich haben und dann eine Überschrift mit diesem Text und den Schaltflächen hinzufügen . Beginnen wir mit dem Hintergrundbild in dieser Lektion. Wir wechseln wieder hierher, das ist es, was wir haben. Und wenn ich hier „Container bearbeiten“ ausgewählt habe, bedeutet das, dass wir den gesamten Container bearbeiten . Wir gehen auf Stil und Hintergrundtyp ein und wählen das aus. Und unter Bild laden wir ein Bild hoch, das wir als Hintergrundbild verwenden möchten. Ich sage Dateien hochladen. Ausgewählte Dateien werden in diesen Ordner namens Website Assets umgeleitet . Ich werde das als ZIP-Ordner zur Verfügung stellen, damit Sie diese Bilder , die ich speziell für diesen Kurs vorbereitet habe, verfolgen können diese Bilder , die ich speziell für diesen Kurs vorbereitet habe . Schauen Sie direkt unter diesem Videoplayer auf der Registerkarte Projekte und Ressourcen nach. Doppelklicken Sie darauf und ich möchte dieses Bild aus der Heldenabteilung verwenden. Es ist 1920 mal 108 Pixel groß, das ist Full-HD. Ich doppelklicke darauf und jetzt ist es aktiv. Ich sage auswählen. Jetzt ist es hinzugefügt. Solange wir den Container noch ausgewählt haben, müssen wir kommen und Wiederholung sagen. Keine Wiederholung, damit sich dieses Bild nicht wiederholt. Wir wollen es auch deckend machen. Um den gesamten Behälter zu füllen, müssen wir zurück ins Layout gehen, diese Höhe auf VH ändern und 100 sagen Jetzt füllt es einfach so den gesamten Raum aus. Zweitens möchten wir diese dunkle Überlagerung hinzufügen , da unsere sehr hell ist Solange dies noch ausgewählt ist, passen wir den Stil an, reduzieren den Hintergrund und erweitern dann den Hintergrund, das Overlay, den Hintergrundtyp Dieses Mal wollen wir das in die dunkelste Ecke ziehen . Wir können die Intensität des Schwarzen so weit erhöhen , wie wir wollen Ich belasse es bei 0,77, aber du kannst ruhig mit der Dunkelheit herumspielen und Update sagen Das gibt uns jetzt die Gelegenheit, mehr über diese Änderungen in der Vorschau zu erfahren Wenn wir sehen möchten, was wir haben, können wir eine Vorschau der Änderungen anzeigen. Dadurch wird eine neue Registerkarte geöffnet , die wir sehen können. Wir haben jetzt ein sehr schönes Hintergrundbild in unserer Helden-Sektion. So fügst du ein Hintergrundbild hinzu. In der nächsten Lektion sehen wir uns an, wie Sie diesen Text hinzufügen. Wir sehen uns in Kürze. 9. Heldenabschnitt - Text: Jetzt ist es an der Zeit, den Text für den Heldenbereich hinzuzufügen. Fangen wir mit der Überschrift Leckere Mahlzeiten an. Und ich werde sie einfach alle kopieren, weil mir einfach der Wortlaut gefällt, den wir verwendet haben Wenn ich wieder reingehe, gehen wir zurück zu unserem Redakteur Denken Sie jetzt daran, weitere Elemente hinzuzufügen. Alles was wir tun müssen, ist auf das Symbol dort oben zu klicken und es werden die Panels angezeigt. Und wir wollen eine Überschrift hinzufügen. Ich ziehe eine Überschrift per Drag & Drop direkt dorthin. Wie Sie sehen können, ist sie standardmäßig linksbündig ausgerichtet, sodass wir sie einfach so in der Mitte ausrichten können. Jetzt können wir diesen Text ändern. Ich möchte die leckeren Mahlzeiten verwenden. Ich werde das kopieren. Tasty Meals, doppelklicken Sie hier und fügen Sie es dort ein. Der Grund, warum ich das nicht doppelt angeklickt und hier eingefügt habe , ist , dass es mit der Formatierung geliefert wird, die es an der Stelle hatte, von der Sie es kopiert haben Das willst du nicht? Lass mich das einfach rückgängig machen. Denn wie Sie sehen können, schauen Sie sich die gesamte Formatierung Das ist alles CSS und Sie wollen das nicht. Wenn ich das mache, wenn du es hier einfügst, hat es nicht die Formatierung, die es hatte. In Ordnung, als Nächstes möchten wir einen Texteditor hinzufügen , der im Grunde ein Absatz ist. Wie Sie sehen können, wurde dies in einen Texteditor geändert , da dies das aktive Element ist. Zuallererst können wir in den Stil gehen und ihn einfach so in der Mitte ausrichten. Jetzt wirst du feststellen, dass es grau ist. Solange wir noch im Trend sind, können wir sagen, dass die Textfarbe weiß ist. Lass mich hier wechseln. Leckeres Essen von Weltklasse. Lass mich einfach das Steuerelement C kopieren und ich kann das einfach duplizieren. Solange dies noch ausgewählt ist, kann ich mit der rechten Maustaste auf Duplizieren klicken. Und jetzt haben wir zwei. Ich kann das auswählen, hier reingehen und das dort einfügen, das aktualisieren. Jetzt werdet ihr natürlich feststellen, dass hier im letzten Heldenbereich alles vertikal in der Mitte ausgerichtet ist. Der Abstand zwischen hier und hier ist ähnlich dem Abstand zwischen hier und unten. Das wollen wir in diesem containerbasierten System. Wenn wir den Container selbst auswählen und zum Layout wechseln, können wir jetzt den Inhalt begründen. Wir können sagen, wir wollen es in der Mitte haben. Wie Sie sehen können, verläuft diese Linie in der Mitte. Derzeit ist dies standardmäßig auf den oberen Rand eingestellt. Wie Sie sehen können, schneidet die lange Linie oben ab. Wir können es nach unten, in der Mitte oder nach oben stellen. Wir wollen es in der Mitte haben, einfach so. Als Nächstes wollen wir jetzt unseren Text stylen. Lassen Sie uns zunächst mit Weltklasse beginnen und mit Stil nach innen gehen. Gehen wir zur Typografie. Gehen wir zunächst zur Textfarbe ändern sie in Weiß Erweitern Sie diese Typografie. Übrigens, wenn du irgendein Pop-up wie dieses loswerden willst , klicke irgendwo hier drin, klicke irgendwo hier drin Typografie, wir wollen das ändern. Ich erinnere mich nicht an den Namen dieser Front. Lass mich einfach nach unten kritzeln. Das ist es nicht, aber das können wir jetzt gebrauchen. Wir können die Größe vielleicht bis zu diesem Punkt erhöhen. Lassen Sie uns einige Änderungen an leckeren Gerichten vornehmen. Wählen Sie diesen Stil aus und ändern Sie ihn in die gewünschte Farbe. Ich werde die goldene Farbe ändern, die ist irgendwo gelb. Das ist der Code. Denken Sie jetzt daran, dass es immer gut ist, konsistent zu bleiben, wenn Sie diesen Code einmal festgelegt haben. Überall, wo Sie diese gelbliche Farbe verwenden, kopieren Sie einfach diesen Code und fügen ihn in die andere Einstellung Jetzt, wo wir entschieden haben, dass dies unsere Schriftfarbe für die Überschrift ist , vielleicht irgendwo etwas weniger schreiend Gehen wir jetzt zurück zur Typografiegröße. Wir wollen auch die Schriftfamilie auf Montserrat, meine Lieblingsschrift, umstellen Montserrat, meine Lieblingsschrift, Lassen Sie uns die Schriftstärken auf Schwarz ändern. Das ist sehr fett gedruckt. Lassen Sie uns nun die Größe weiter erhöhen, vielleicht bis zu diesem Punkt. Jetzt werden Sie feststellen, dass wir hier zu viel Platz haben. Solange dies noch ausgewählt ist, können wir zu Advanced Break the Margin übergehen. Und dann lassen Sie uns oben die Marge bis zu einem gewissen Punkt reduzieren. Machen wir dasselbe auch für den unteren Teil, damit wir die Beschreibung näher bringen und sie aktualisieren können. Sehen wir uns die Änderungen jetzt an. Das haben wir. Schauen wir uns unsere Referenz an. Ich denke, wir sind der Referenz ziemlich nahe. Ich mag das sogar noch besser. So fügen Sie den Text in der nächsten Lektion hinzu. Sehen wir uns an, wie man Schaltflächen hinzufügt und gestaltet. Wir sehen uns in Kürze. 10. Heldenabschnitt - Buttons: Jetzt ist es an der Zeit, die Schaltflächen hinzuzufügen , die wieder in unseren Editor zurückkehren. Gehen wir hier rein und wählen eine Schaltfläche aus und legen sie genau dort ab. Jetzt werden Sie in unserer Referenz natürlich feststellen, dass sie sich in der Mitte und nebeneinander befinden. Wie machen wir das? Denn wenn wir das einfach duplizieren, wird es unter dieser Schaltfläche stehen. Denken Sie daran, dies ist ein containerbasiertes System, wir können einen Container verwenden. Das Gute an Containern ist, dass wir die Richtung der Elemente innerhalb des Containers wählen können . Wenn ich hier reingehe und einen Container auswähle und ihn direkt unter diesem Text im Container platziere, können wir diese beiden Elemente jetzt einfach ziehen und beide in diesen Container legen. Wenn ich das auswähle, wie du sehen kannst ist das der Ed-Container, sie sind beide drin. Nun, da der Container hier unter Richtung aktiv ist, können wir sagen, dass wir nicht wollen, von links nach rechts abwärts Voilà. Und denken Sie daran, wir können auch Inhalte rechtfertigen Jetzt können wir sie links, rechts oder in der Mitte platzieren . Schau dir die lange Linie an, die genau in der Mitte auftaucht. Wenn wir das auswählen, haben wir sie in die Mitte gelegt. Lassen Sie uns jetzt weitermachen und sie stylen. Wenn ich diese erste Schaltfläche auswähle, können wir zunächst ändern, was darin steht. Was steht da? Menü öffnen und bestellen. Sagen wir einfach Menü öffnen und bestellen. Wählen wir den zweiten aus. Tischreservierungen. Tischreservierungen. Da haben wir's. Wenn Sie diese erste Schaltfläche auswählen, können Sie zum Stil wechseln. Wir wollen ihm die goldene Farbe geben. Denken Sie daran, dass wir konsistent bleiben wollen. Wir wählen hier diese goldene Farbe aus, indem wir diesen Textstil auswählen. Kopieren Sie dann dieses Steuerelement oder klicken Sie einfach mit der rechten Maustaste und kopieren Sie es. Wählen Sie dann diesen Go-Inside-Stil und den Button Farbsteuerung V. Fügen Sie ihn dort ein. Und da haben wir es. Für diesen ist es meiner Meinung nach weiß, schwarz mit einer schwarzen Schrift. Ich wähle diese Stilschaltflächenfarbe weiß. Und die Schrift ist schwarz. Die Textfarbe ist schwarz, einfach so. Für diesen ist die Textfarbe ebenfalls schwarz. Jetzt werden Sie feststellen, dass wir hier einen gewissen Abstand vom Rand zum Text haben. Wir haben auch diese abgerundeten Ecken für den Grenzradius. Für die abgerundeten Ecken können wir einfach so einen Randradius von 50 geben . Machen wir dasselbe für diese 50. Lassen Sie uns nun den Abstand vergrößern. Und hier dreht sich alles um Polsterung. Lassen Sie uns den Link auf der linken Seite unterbrechen, wir können ihm sagen wir 60 auf der rechten Seite geben 60, untere 20 und obere 20. Lassen Sie uns das Gleiche dafür wiederholen. Lass uns das kaputtmachen. Lassen Sie uns zunächst das Update 602.060.20 geben, das eine Vorschau der Änderungen bietet, und Die Helden-Sektion nimmt jetzt langsam Gestalt an. In der nächsten Lektion fügen wir eine Überschrift hinzu. Das ist der Header. Er besteht aus dem Logo und der Navigationsleiste oder der Navigationsleiste. Wir sehen uns in der nächsten Lektion. 11. Header - Das Logo hinzufügen: Jetzt ist es an der Zeit, die Kopfzeile oder den Navigationsbereich hinzuzufügen. Als erstes möchten wir das Logo hinzufügen , das zu unserer Workstation zurückkehrt. Lass uns weitermachen und von hier aus gehen. Jetzt fügen wir den Header nicht direkt hier auf der Startseite hinzu , die wir bearbeitet haben. Wir werden den Vorgang hier beenden, weil wir ein anderes Plug-In verwenden werden, um den Header zu erstellen. In Ordnung, jetzt lass uns gehen. Und jetzt sind wir im Armaturenbrett. Gehen wir in die Plug-ins, fügen wir neue hinzu, sagen wir einfach Elementor Denken Sie daran, dass wir sagen, dass wir Drittanbieter haben , die großartige Elementor-Addons entwickelt haben , mit denen wir einige großartige Funktionen nutzen können, die einige großartige Funktionen nutzen können, die in einer kostenlosen Version von Element nicht verfügbar sind Eines davon ist Element Element Adds. Wie Sie sehen können, hat es mehr als 1 Million aktive Installationen, ein Beweis dafür, wie beliebt es ist. Wir werden auch Sticky-Header-Effekte für Element verwenden , aber dazu kommen wir noch. Lassen Sie uns zunächst das Element Skit Element Add aktivieren Element Skit Element Add , das dieses Menü zu dieser Liste hinzufügt Wir können weitermachen und Header, Footer Select sagen. Das wird zu diesem Einrichtungsassistenten weitergeleitet. Wir möchten hier die erweiterten Einstellungen auswählen, da dadurch einige weitere Widgets hinzugefügt werden , die derzeit aktiviert sind. Wenn wir uns für Basic entscheiden, sage ich Advanced, wenn ich das möchte, da Sie das aus sehen können, ich sage Advanced, das ist automatisch aktiviert. Und das gilt auch für weitere Einstellungen hier unten. Fortgeschritten. Als Nächstes, sagen wir, nächster Schritt, können Sie nicht sensible Diagnosedaten teilen. Speichern Sie als Nächstes diese Änderungen. Jetzt geht es uns gut. Jetzt gehen wir in die Header-Fußzeile. Wie Sie jetzt sehen können, haben wir keine Kopf- oder Fußzeilen erstellt Ich sage neu hinzufügen, ich nenne das. Du kannst ihm einfach einen beliebigen Namen geben und musst es nicht so eingeben, wie ich es eingegeben habe Du kannst einfach meinen Header sagen. Es ist nicht wirklich wichtig. Mir gefällt einfach dieser Camel-Koffer. Es ist ein Header. Wenn wir die Fußzeile erstellen, wähle ich Fußzeile Aber im Moment ist es eine Kopfzeile und wir möchten, dass sie auf der gesamten Website sichtbar ist Diese anderen Optionen sind nur in der Premium-Version verfügbar. Nehmen wir an, wir möchten, dass es aktiviert wird wenn Sie Wartungsarbeiten durchführen . Und Sie möchten, dass Ihr Menü nicht sichtbar ist. Sie können es aktivieren, aber im Moment möchten wir, dass es verfügbar auf der Website sichtbar ist. Sobald wir das getan haben, können wir direkt mit der Bearbeitung beginnen. Aber ich möchte es zuerst speichern, damit du es hier sehen kannst. Wenn wir einen weiteren Fuß oder Header erstellen, wird es hier eine Liste geben. Jetzt können wir weitermachen und Edit sagen. Das gleiche Popup wird erscheinen. Inhalt bearbeiten. Hier sind wir. Da dies der elementare Builder ist, hat er natürlich immer noch denselben Builder, aber jetzt befinden wir uns in einem völlig anderen Bereich der Website. Wir sind nicht auf der Startseite, wir sind im Header-Editor. Lassen Sie uns nun einen Abschnitt hinzufügen. Diesmal möchten wir diese Struktur hinzufügen, in der sich zwei Container befinden. Dies ist ein äußerer Container mit zwei Containern im Inneren, denn wie Sie sehen können, haben wir natürlich die Loco auf der linken Seite und die Navigationsleiste auf der rechten Das sind zwei Container. Zuallererst können wir diesen Container auswählen und sagen, wir wollten 50% belegen, vielleicht 30% Stellen Sie sicher, dass dies auf Prozent und nicht auf Pixel oder MS-Prozentsatz 30% eingestellt ist MS-Prozentsatz 30% Das heißt, sie sollten zu 70% diesen Prozentsatz wählen, 70% belegen sie 100% des Platzes, den sie haben. Lassen Sie mich damit das Zeichen auswählen oder einfach darauf klicken , um die Elemente und das Bild aufzurufen. Ich mache weiter und lade es aus unserem Assets-Ordner hoch. Hier ist das Logo, das ich vorbereitet habe. Öffnen Sie Select und los geht's. Sie müssen diese Einstellungen nicht manuell festlegen , indem Sie diese auswählen und hier eingeben Sie können auch einfach hierher kommen und die Maus ziehen und die Größe nach Ihren Wünschen Aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Da ist natürlich unser Logo, es sieht komisch aus, weil es hier auf einem dunklen Hintergrund ist, aber hier ist es im Grunde auf einem weißen Hintergrund. So fügen Sie Ihr Logo zu Ihrer Website hinzu. Aber bevor wir gehen, gehen wir wieder rein und wählen hier das Bildelement aus , das das Logo ist. Wir wollen daraus einen Link machen, benutzerdefinierte URL, und ich mache es zum Link meiner Website. Jetzt werden Sie natürlich Ihre URL kopieren. Kopiere das und füge es hier ein. Aktualisiere das, schau dir die Änderungen an. Da haben wir's. Wenn Sie jetzt mit der Maus darüber fahren, ist es anklickbar Wenn jemand darauf klickt, wird er auf die Startseite weitergeleitet Aber wir haben unsere Startseite nicht eingerichtet. Wir wurden auf die von Wordpress bereitgestellte Standard-Startseite weitergeleitet , wodurch mir klar wurde , dass wir vergessen haben , diese Startseite sehr schnell einzurichten. Wechseln wir zu dieser Vorschauseite und gehen wir zu den Dashboard-Tools. Keine Einstellungen Beim Lesen der Startseite wird eine statische Seite angezeigt, der es sich um die von uns erstellte Startseite handelt. Speichern Sie die Änderungen. Wenn ich jetzt wieder hier reingehe und mit Strg R aktualisiere und dann eine Vorschau der Änderungen sehe. Wenn wir mit der Maus darüber fahren und darauf klicken, weil wir gesagt haben, dass unsere Startseite auf die von uns erstellte Startseite umgeleitet wird auf die von uns erstellte Startseite umgeleitet Und genau das wollen wir. Im Grunde genommen ist das so, wie man das Logo hinzufügt und es anklickbar macht Es leitet jemanden nach Hause zurück. In der nächsten Lektion sehen wir uns an, wie Sie die Navigationsleiste hinzufügen. Wir sehen uns in Kürze. 12. Header - Navbar hinzufügen: Es ist jetzt an der Zeit, die Navigationsleiste hinzuzufügen. Gehen wir zurück zu unserem Editor, lassen Sie mich einfach diese Navigationsleiste und diesen Teil schließen , jetzt bleibt uns das übrig. Das ist die Vorschauseite. Gehen wir wieder rein, lassen Sie uns weitermachen und sagen, hier rein, geben wir Navi ein. Sie werden feststellen, dass wir hier ein Nav-Menü haben, aber es hat ein Schloss, weil es mit dem Pro-Bedienfeld von Element geliefert wird. Aber einer der Gründe, warum wir Elements Kit Light hinzugefügt haben , war, dass es ein kostenloses Navigationsmenü hat. Aus diesem Grund habe ich erwähnt, dass die für Elementor entwickelten Plug-ins von Drittanbietern sehr großartig sind Sie ermöglichen Ihnen den freien Zugriff auf Funktionen, für die Sie sonst für die Nutzung mit Element bezahlen müssten für die Nutzung mit Element bezahlen Ich ziehe dieses Element-Navigationsmenü genau dorthin und wie Sie sehen können, wird hier nichts angezeigt, da es das aktive Element ist. Das ändert sich in das Navigationsmenü Elemente bearbeiten , weil wir dieses Element bearbeiten. Aber eine Sache, die Ihnen im Menü zur Inhaltsauswahl auffallen Menü zur Inhaltsauswahl wird, ist, dass hier kein Menü aufgeführt ist. Das heißt, wir müssen ein Menü erstellen. Lass mich das einfach aktualisieren. Jetzt möchte ich zu dieser Vorschauseite kommen. Das rechte Leck öffnet jedoch den Link in einem neuen Tab, weil ich ihn intakt lassen und zum Dashboard gehen möchte intakt lassen und zum Dashboard gehen , damit wir ein Menü erstellen können. Und dann werden wir kommen und das Menü hier anzeigen. Wenn wir zu den Menüs für das Aussehen des Dashboards zurückkehren, können wir ihm einfach so einen Namen geben , mein Menü. Machen wir es zum Hauptmenü, Menü erstellen. Im Grunde ist das Menü eine Liste der Elemente, die Sie als A-Leiste anzeigen möchten. Dies sind die Menüelemente, die Startseite, die Galerie und der Kontakt. Im Wesentlichen sind dies Webseiten, die uns sagen, dass wir ein paar Seiten erstellen müssen ein paar Seiten erstellen , wie Sie hier sehen können. Lassen Sie mich das einfach schließen. Passwort-Manager, wie Sie hier sehen können , Menüelemente hinzufügen. Menüelemente können Webseiten sein, ich habe zusammengeklappt, dass es sich auch um Beiträge handeln kann. Wenn Sie beispielsweise einen Blogbeitrag oder einen Artikel haben, können Sie ihn zu einem Menüpunkt machen. Dies können benutzerdefinierte Links sein. Es können Kategorien sein, was auch immer Sie wollen, aber wir möchten Seiten als Menüelemente verwenden. Lassen Sie mich das vorerst auswählen. Zum Menü hinzufügen. Wie Sie jetzt sehen können, haben wir es dem Menü hinzugefügt . Lass mich das Menü speichern. Gehen wir jetzt wieder rein und klicken mit der rechten Maustaste auf Reload. Lade diese Seite neu, diesen Editor. Wenn ich das Nav-Element auswähle, öffne erneut dieses Drop-down-Menü Jetzt haben wir mein Menü. Weil wir ein Menü erstellt haben. Jetzt wird nur die Startseite angezeigt, weil wir nur einen Menüpunkt haben. Lass uns das aktualisieren. Wenn wir wieder reingehen, müssen wir weitere Menüelemente hinzufügen. Ich gehe zu Seiten, bewege den Mauszeiger darüber und füge dann eine neue Seite Ich klicke einfach mit der rechten Maustaste auf Link in neuem Tab öffnen. Link in neuem Tab öffnen. Link in neuem Tab öffnen. Dies sind drei Tabs des Seitenerstellers. Ich nenne das „About Page“. Lassen Sie uns vorerst einfach weitermachen und veröffentlichen, ohne irgendwelche Konfigurationen vorzunehmen. Das ist die Galerie ph. Gehen wir hier rein und sagen, dass Kontakte veröffentlicht werden. Wenn ich jetzt all diese neuen Seiten schließe und hierher komme und sie aktualisiere. Jetzt haben wir drei weitere Elemente, die wir uns alle ansehen können. Ich füge diese drei hinzu. Zum Menü hinzufügen. Jetzt haben wir drei, Sie können solche Elemente ziehen und das Menü speichern. Lassen Sie mich das Menü sagen, schließen Sie das. Wenn wir jetzt zum Editor zurückkehren und R steuern, wie Sie sehen können, haben wir jetzt all diese Menüelemente. Jetzt müssen sie auf der rechten Seite sein. Solange dies ausgewählt ist, können wir horizontale Menüposition sagen, oder? Aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Da haben wir's. Eine Sache, die Ihnen dabei auffallen wird , ist, dass sie sehr weit voneinander entfernt sind und näher an den Rändern zu liegen scheinen wieder reingehen, können wir uns daran erinnern, dass wir es mit Containern zu tun haben Wenn wir nun diesen äußeren Behälter auswählen , in dem sie sich befinden, und entweder volle Breite oder einen Prozentsatz angeben , der natürlich 80% beträgt, dann geben wir auch diesen beiden Containern die richtigen Prozentsätze wir das auswählen, geben wir ihm vielleicht 25%. Sie sollten 25% des Platzes belegen, und das sollte die restlichen 75% einnehmen , wodurch das Menü bis zum Ende verschoben wird. Aber jetzt ist das zu groß. Ich wähle das Bildelement selbst aus, wähle das aus. Das ändert sich zu Bild bearbeiten, und jetzt können wir dem Bild unter Stil vielleicht eine Breite von 50% des Platzes geben, 50% Wenn wir zurück in den Inhalt gehen, lassen Sie uns das links ausrichten. Sehen wir uns die Änderungen an. Da haben wir's. Ordnung, jetzt gehen wir zurück zu den Innenseiten, wir wollen nur sehen, wie die Startseite aussieht. Also wähle ich Ansicht und genau das haben wir. Jetzt werden Sie hier auf unserer Referenz-Website natürlich feststellen, dass wir diesen weißen, hässlichen Hintergrund nicht haben. Wie erreichen wir diesen transparenten Hintergrund? Wenn Sie scrollen, wird es schwarz. Wie erreichen wir das? Das werden wir in der nächsten Lektion tun. Wir sehen uns in Kürze. 13. Transparenter Sticky-Header: Jetzt ist es an der Zeit, unseren Header klebrig und transparent zu machen . Genau wie hier. Im Moment sieht es toll aus ohne diesen weißen, hässlichen Hintergrund. Mal sehen, wie das geht. Gehen wir zurück zu unserem Arbeitsbereich und gehen wir zu dem Dashboard, das wir installieren möchten. Schließen Sie einfach alles. In Ordnung, lassen Sie mich jetzt hier rein, lassen Sie mich einfach zum Armaturenbrett gehen. Füge neue Plug-In-Plugins hinzu, füge neue hinzu, die wir installieren möchten. Geben Sie noch einmal einfach Elementor ein. Es wird alle Elementor-bezogenen Ergänzungen bringen. Was wir brauchen die Sticky-Header-Effekte für Elementor Wie der Name schon sagt, bietet es Sticky-Header-Effekte für Ihre Header. Aktivieren Sie das, jetzt ist es aktiv Kehren wir nun zur Header-Fußzeile des Elements Kit zurück Wir haben unsere Header-Bearbeitung mit Wenn ich den Container auswähle, der den ausgewählten Header enthält, gehe ich zu Erweitert Wenn Sie hier nichts auswählen können, denken Sie daran, dass Sie jederzeit die Strg-Taste drücken können, um den Navigator aufzurufen , und Sie können ihn jetzt hier auswählen. Ich kann diesen Container auswählen, indem ich ihn einfach auswähle. Dies ändert sich zum Bearbeiten des Containers. Gehen wir zu Sticky-Header-Effekten. Lassen Sie uns das aktivieren. Lasst uns diesen Navigator schließen und ihn aktualisieren. Okay, lassen Sie uns nur die Änderungen überprüfen, aber nicht die Änderungen daran. Ich möchte auswählen. Zuallererst würden Sie feststellen, dass diese bis an den Rand gedrängt wurden. Das werden wir klären. Ich wusste, dass es passieren würde. Wenn wir nun das wählen, wenn wir darauf klicken, wie Sie sehen können, haben wir das immer noch nicht geklärt. Wenn ich wieder reingehe, wollen wir sagen: transparentes Header-Update , das eine Vorschau der Änderungen anzeigt. Jetzt sind die Änderungen wirksam. Wenn wir noch einmal zur Startseite gehen, haben wir jetzt unseren Header ohne diesen weißen Hintergrund, aber wir haben hier ein paar Probleme. Zuallererst wurden diese an den Rand gedrängt. Eine weitere Sache, wenn wir diese Seite neu laden, werden Sie einen hässlichen weißen Hintergrund bemerken bevor dieser schöne Hintergrund geladen Lassen Sie uns das noch einmal auswählen. Ich hoffe, Sie haben gesehen, dass wir das nicht wollen, wir wollen so etwas. Gehen wir zu unserer Referenz. Wenn ich diese Seite neu lade, sehr nettes, subtiles Neuladen der Noch einmal, genau das suchen wir. wieder reingehen, wollen wir als Erstes dieses Problem hier lösen. Gehen wir hier rein und wählen dieses Menü Dieses Nava geht zum Stil Wir wollen diesen Menüpunkten zunächst die richtige Farbe geben diesen Menüpunkten zunächst die richtige Farbe Sie müssen zum Menüelementstil, zum Zusammenklappen, zum Menü-Wrapper und zum Menüelement-Stilelement „Erweitern“ wechseln. Die Textfarbe sollte weiß sein. Wir können es wegen des weißen Hintergrunds beim Schweben nicht sehen. Wir wollen, dass es golden ist. Ich hoffe wir können. Wenn wir diese Seite jetzt bearbeiten wollen, können wir einfach hier rauf gehen. Jede Seite, die du mit Elementor erstellt hast, kann bearbeitet werden, indem du hier oben gehst Wenn es sich um die Seitenbearbeitung handelt, klicken Sie auf Mit Elementor bearbeiten Wenn es sich um die Kopf- oder Fußzeile handelt, klicken Sie auf Meine Kopf- oder Fußzeile mit Elementor bearbeiten Der Grund, warum wir das öffnen, ist, dass wir uns diese schnappen wollen Ich wähle die Textstilkopie , die das sogar schließen kann. Gehen wir jetzt wieder rein und denken Sie daran, dass wir die Navigationsleiste ausgewählt hatten. Wir gingen zum normalen Menüstil. Beim Schweben ist es weiß. Beim Schweben muss es eine goldene Farbe haben. Ist die Farbe nun golden, wenn sie aktiv ist? Immer wenn die Seite aktiv ist, muss sie auch diese goldene Farbe haben. Aktualisiere das. Wenn wir jetzt eine Vorschau davon anzeigen, möchten wir natürlich keine Vorschau der Menüleiste anzeigen, sondern auf die Startseite gehen, um sie so zu sehen. Das sieht jetzt gut aus. Die andere Sache ist, dass wir sie nach innen drängen müssen. Denken Sie jetzt daran, wann wir die Transparenz auf eingestellt haben. Aktiv. Als wir die Transparenz aktivierten, wurden diese automatisch zur Seite geschoben. Was wir nun tun können, versuchen wir auszuwählen. Wie Sie sehen können, wird es bei 80% liegen, aber es berührt immer noch 100% des Bildschirms. Was wir tun können, ist, einen neuen Container hinzuzufügen, einen Container hier an der Seite hinzuzufügen. Jetzt haben wir drei Container nebeneinander angeordnet, aber wir wollen diese beiden Container in diesen anderen Container ziehen , diesen neuen Container. Jetzt befinden sich beide in dem neuen Container, den wir gerade hinzugefügt haben. Wählen wir nun den neuen Container und ändern die Richtung von links nach rechts. Jetzt ist es von links nach rechts, aber jetzt ist es bei 100%. Wir wollen einen Prozentsatz von 80% und eine Breite von 80% erreichen. Sagen wir zuerst volle Breite, dann Prozentsatz 80%. Wie Sie jetzt sehen können , nimmt es 80% der Breite Natürlich können wir es jetzt innerhalb dieses äußeren Containers ausrichten, indem wir den äußeren Behälter auswählen und hierher gehen und was sich darin befindet, einfach so in der Mitte ausrichten darin befindet, einfach so in der Mitte Das ist jetzt in der Mitte des äußeren Containers. Ich hoffe, Sie haben inzwischen Verständnis für Container, nehmen immer noch die Prozentsätze ein, die wir ihnen gegeben haben Und das ist genau das, was wir brauchten. Aktualisierung der Vorschau, der Änderungen. Jetzt können Sie gut positioniert auf der Startseite genau das sehen , was wir brauchen. Aber jetzt noch ein Problem. Lade diese Seite neu. Es gibt immer noch das Problem mit dem weißen Hintergrund. Was wir tun können, ist diese Hintergrundbearbeitung mit Elementor, der Startseite selbst, nicht mit der Kopfzeile, zu bearbeiten Elementor, der Startseite selbst, nicht mit der Kopfzeile, In Ordnung, lassen Sie uns diesen äußeren Behälter auswählen. Und wie Sie sehen können, kann ich ihn nicht auswählen. Wenn ich die Strg-Taste drücke, rufe ich den Navigator auf. Und jetzt kann ich den Container auswählen. Jetzt ist es ausgewählt. Gehe zu Advanced Motion Effects. Wir wollen, dass es verblasst. Einfach so. Aktualisiere das. Lassen Sie uns nun die Änderungen überprüfen. Das ist genau das, was wir noch einmal brauchten. Lass uns das jetzt laden. Genau. Damit sind wir am Ende der klebrigen Effekte der Navbar Wir sind fertig mit der Helden-Sektion. Als Nächstes wollen wir Arbeit an der Körperpartie beginnen. Wir sehen uns bald. 14. Sticky Header Hintergrund: Jetzt ist es an der Zeit, am Hauptteil zu arbeiten hier zu unserer Referenz-Website zu wechseln, wie Sie sehen können Wir haben dieses schöne Bild, etwas Überschriftentext, eine Beschreibungsschaltfläche. Dieser dreispaltige Abschnitt. Im Grunde wollen wir zunächst diese grundlegenden Bereiche schaffen. In der nächsten Lektion werden wir dann an diesem Menü arbeiten. In der folgenden Lektion erstellen wir die Galerie. Lassen Sie uns mit den grundlegenden Teilen wie diesem Abschnitt beginnen . zurück zu unserem Arbeitsbereich wechseln, sind wir mit einem Header fertig. Aber bevor wir gehen, denken Sie daran, wenn Sie sich das ansehen, es hat einen schwarzen Hintergrund. Wenn wir anfangen zu scrollen, schauen wir uns das Logo an, es schrumpft Das habe ich vergessen, dir das zu zeigen. Wenn wir den Container hier auswählen und in Advanced gehen. Wenn wir den Container hier auswählen und zu Advanced wechseln, gehen wir zu Sticky Header Effects, Hintergrundfarbe, der Farbe, zu der wir wechseln möchten. Sobald wir mit dem Scrollen beginnen, möchten wir, dass es schwarz Wir wollen das Logo verkleinern. Lassen Sie uns auch den Header auf 70% seiner Größe verkleinern, denn wenn wir uns unsere Referenz hier ansehen, schrumpft er Verkleinern wir es auf 70% und wir können das Logo auf vielleicht, sagen wir, 60% verkleinern und das aktualisieren Mal sehen, ob wir das, was wir hier haben, laden wir es. Okay, jetzt haben wir hier unten nicht genug Inhalt , um weiter zu scrollen. Lass uns weitermachen und diese Seite mit Elementor bearbeiten , damit wir sehen können, ob wir weiter scrollen können nach unten scrollen, fügen wir einen doppelspaltigen Container hinzu , solange er noch ausgewählt ist Gehen wir zu Advanced. Lassen Sie uns diese Marge hier aufteilen und ihr eine obere Marge von 100 geben. So können wir etwas Abstand zwischen diesem Abschnitt und dem Heldenbereich 100 schaffen . Jetzt haben wir diesen Bereich, aktualisiere ihn. Wenn wir uns das jetzt ansehen, können wir scrollen. Wie Sie sehen können , haben wir genau das. Das ist jetzt nicht richtig ausgerichtet. Gehen wir zurück zu den Header-Einstellungen. Wählen wir den Container aus, der das Logo enthält, diesen Container hier. Richten wir ihn vertikal in der Mitte aus, so wie Sie gesehen haben, wie er sich bewegt hat. Machen wir dasselbe für die Navbar. Lass uns in der Mitte ausrichten, wie bei diesem Update. Wenn wir jetzt die Startseite laden und scrollen. Wie Sie sehen können, haben wir einen gut aussehenden Sticky-Header. Nachdem das erledigt ist, können wir das meiner Meinung nach eine Lektion nennen und mit können wir das meiner Meinung nach eine Lektion nennen der nächsten Lektion fortfahren, in der wir nun weiter an den grundlegenden Abschnitten arbeiten werden . Ich werde sehen. 15. Körperschnitt - Basic 1: Sie werden sich erinnern, dass wir in der vorherigen Lektion einen Abschnitt hinzugefügt und ihm eine Marge von 100 gegeben haben. Von dort aus machen wir weiter. Ich sage mit Elementor bearbeiten, aber bevor wir mit Elementor bearbeiten, möchte ich nur diesen Header schließen Lass mich einfach zum Dashboard gehen. Lass es uns da lassen. Lassen Sie uns jetzt zu diesem Tab wechseln. Schließ diesen. Bearbeiten Sie mit Elementor Los geht's. Hier ist der Abschnitt, den wir auf der linken Seite hinzugefügt haben. Ich möchte diesen Navigator loswerden. Es gibt ein praktisches Tool, das ich vergessen habe zu aktivieren und das ich immer sehr nützlich finde, wenn ich auf das Burger-Menü klicke. Gehen wir zu Benutzereinstellungen > Handles bearbeiten. Wenn ich jetzt mit der Maus über diese Ecken fahre, werden Sie feststellen, dass sich nichts ändert Wenn wir jedoch diese Bearbeitungsgriffe aktivieren, einige sehr praktische Tools denen Sie Ihre Arbeit erheblich beschleunigen können Anstatt mit der rechten Maustaste darauf zu klicken und zu löschen, kann ich einfach mit der Maus darüber fahren und es sofort löschen Und wenn Sie das tun, sieht es vielleicht nicht nach viel aus, aber sobald Sie anfangen, Element immer wieder zu verwenden, werden Sie feststellen, dass es sehr hilfreich ist, wenn das aus dem Weg Ich werde hier klicken und sagen, dass ich ein Bildelement genau hier hineinziehen möchte ein Bildelement genau hier hineinziehen möchte Wir wollen, dass wir uns gesund ernähren. Anstatt ein neues Überschriftenelement hinzuzufügen, kann ich es einfach duplizieren indem ich den Mauszeiger darüber bewege. Und dann das Dann ziehen Sie das und legen Sie es dort ab. Lass mich das einfach kopieren. Natürlich werden Sie tippen, weil Sie nichts haben, um das zu kopieren und einzufügen. Natürlich ist das zu groß. Solange es noch ausgewählt ist, gehe ich zum Stil über. Ändern Sie es zunächst in die gewünschte dunkle Farbe. Sagen wir 111, das ist okay. Klicken Sie da rein, um das loszuwerden, dann die Typografie. Lass uns unseren irgendwo da benutzen. Gehen wir zum Inhalt links, richten ihn aus, gehen wir zur Style-Typografie Reduzieren Sie die Zeilenhöhe, damit der Abstand nicht zu groß ist. Jetzt werden Sie feststellen, dass dieser die Randeinstellungen hat , die wir dafür hatten Denken Sie daran, dass wir den Rand oben und unten reduziert haben , während er noch ausgewählt ist. Gehen wir zu „Fortgeschritten“. Lasst uns die einfach so auf Null stellen. Eine andere Sache, die wir tun möchten, ist diesen Container für die Begründung auszuwählen . Lass es uns vertikal in die Mitte stellen. Lassen Sie uns weitermachen und das Bildelement auswählen. Lass uns dort ein schönes Bild einfügen. Wir haben ein vertikales Bild verwendet. Das ist es. Ja, ich doppelklicke auf Bild zwei. Natürlich können Sie jedes Bild verwenden, das Sie verwenden möchten . Wähle das aus Da haben wir's. Das hat scharfe Ecken und das hat abgerundete Ecken. Solange das noch ausgewählt ist, gehe ich einfach so zum Stil Randradius 20. Lassen Sie uns auch darauf klicken und einen Texteditor oder einen Absatz unter die Überschrift ziehen . Denken Sie natürlich daran, dass wir genau hier eine Schaltfläche benötigen. Anstatt eine Schaltfläche neu zu machen und sie zu stylen, anstatt hier eine Schaltfläche hinzuzufügen und sie erneut zu gestalten, können wir einfach hierher kommen und sie duplizieren und hierher ziehen Solange es noch ausgewählt ist, können wir es ändern, um mehr zu lesen und es zu aktualisieren Wenn Sie nun etwas mehr Abstand zwischen dem Bild und dem Text wünschen , wählen Sie einfach den Container der die beiden Container die den unterschiedlichen Inhalt enthalten, diesen Container und Lücken, wir können sagen 50, das ist eine Lücke von 50 zwischen diesen beiden Containern. Aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Da haben wir's. Es nimmt langsam Gestalt an. Der nächste Teil, den wir erstellen, ist dieser Y S. Das können wir sehr schnell machen . Lass uns hier reingehen. Natürlich können wir das einfach duplizieren, weil es oben schon einen schönen Rand hat. Wir wollen nicht noch einmal mit dem Einstellen beginnen. Element ermöglicht es dir, dich nicht zu wiederholen. Sobald Sie ein Element erstellt haben, können Sie es einfach weiter duplizieren und ändern Jetzt, wo wir das dupliziert haben, hat es diesen Spielraum. Aber wir werden, lassen Sie uns diesen Image-Container loswerden. Jetzt bleibt uns nur noch das übrig. Natürlich können wir es zu 100% und das Layout zu 100% machen . Wie Sie sehen können, ist es kleiner. diese Überschrift auswählen, platzieren wir sie zunächst in der Mitte. Gehen wir zur Typografie. Lass uns vielleicht so etwas wie 50 geben. Dann geh zurück zum Inhalt. Warum? Wählen wir diesen Texteditor aus. Gehe zum Stil Middle Align. gleiche Fall gilt für die Schaltfläche, wählen Sie sie und die Ausrichtung des Inhalts aus. Warte, wir haben hier keinen Button. Wir haben den dreispaltigen Abschnitt. Schließ das. Lassen Sie uns das zunächst aktualisieren. Hier drin. Wir können einen Container direkt unter dem Texteditor hinzufügen. Das ist ein Container innerhalb des Containers. Wir können drei weitere Container hinzufügen, das ist ein Container innerhalb des Containers. Wir können einfach so ein Symbolfeld hinzufügen. Bevor wir es stylen, möchte ich Ihnen nur zeigen, warum wir das Icon Box hinzugefügt haben der Maus über , wenn Sie mit der Maus über dem Container fahren, der den Container enthält Lassen Sie uns das noch einmal duplizieren. Jetzt haben wir drei Container in diesem Container. Wir müssen nur den Behälter auswählen , in dem sie sich befinden, und so die Richtung von links nach rechts ändern. Aber jetzt wollen wir das auswählen und es stylen. Geh stilvoll rein. Zuallererst wollen wir, dass die Farbe so ist, dass ich das Gelb nicht ausgewählt habe. Ich wähle diese Kopie im Button-Stil aus. Wählen Sie dieses Stilsymbol und fügen Sie es ein, wenn Sie den Mauszeiger darüber bewegen. Wir wollen, dass es schwarz ist. Nehmen wir an, es waren 111, einfach so. Wir können jetzt auch zur Titelfarbe der Typografie wechseln Lassen Sie uns diese Farbe beibehalten Wir können auch den Abstand zwischen den beiden hinzufügen. Und da haben wir es. Jetzt liegt es an Ihnen, den Inhalt zu ändern. Wir können dieses Symbol ändern, indem wir zu Inhalt gehen und es auswählen. Dann wählen wir vielleicht , was wir wählen sollen? Einfügen. Jetzt können wir diese beiden löschen, dann zweimal duplizieren, das aktualisieren. Jetzt kannst du dazu kommen und dieses Symbol vielleicht in etwas anderes wie Pfeffer ändern und Geld sparen oder etwas Ähnliches. Aktualisieren. Sehen Sie sich eine Vorschau der Änderungen an. Da haben wir es. Ich denke, wir werden gleich für diese Lektion aufhören , nur damit es nicht zu lang wird. Und wir werden in der nächsten Lektion weitermachen. Wir sehen uns in Kürze. 16. Körperschnitt - Basic 2: Willkommen zurück. Jetzt ist es an der Zeit, dort weiterzumachen , wo wir aufgehört haben. Denken Sie daran, dass wir diesen Abschnitt jetzt erstellen, wenn wir zu hier wechseln . Das ist sehr einfach. Inzwischen müssen Sie in der Lage sein, es zu erstellen, aber lassen Sie uns das tun. Gehen wir zurück zu unserem Editor von, lassen Sie uns diesen Abschnitt duplizieren, nur um sicherzustellen, dass wir oben einen einheitlichen Rand haben. Sie werden feststellen, dass wir hier oben und unten einige schöne Polsterungen Fügen wir gleich hier etwas Polsterung hinzu wählen diesen Container Lassen Sie uns diese Standardpolsterung oben unterbrechen. Geben wir 50, jetzt geben wir natürlich 100 Lassen Sie uns das zunächst entfernen, zurückgehen und diesen Abschnitt auswählen, erneut für den unteren Bereich. Geben wir ihm auch 100 solange er noch ausgewählt ist, gehen wir zu Stil, Hintergrundtyp, geben ihm eine Farbe, vielleicht Grau. Was haben wir sonst noch? Wir haben auch diesen Text. Denken Sie daran, dass wir uns nicht wiederholen wollen . Wir können das einfach duplizieren, es nach unten ziehen und direkt über Y S platzieren. Jetzt, solange es noch ausgewählt ist, gehe ich zum erweiterten Rand. Verkleinern Sie einfach so den unteren Rand. Dieser Tag ist köstlich. Kopiere das, solange es noch ausgewählt ist. Inhalt, füge das köstlich ein. Lass uns das auch kopieren. Steuerelement mit gelber oder goldener Farbe C. Wählen Sie die Textfarbe des Stils aus und fügen Sie sie dort ein. Das bedeutet gesunde Mahlzeiten für alle. Kopieren Sie das, wählen Sie dieses Y aus. Fügen Sie es dort ein. Das ist Lorem Ipsum. Das ist also okay. Ich denke, unsere Überschriften sind ein bisschen zu groß. Wenn ich mich nicht irre, reduzieren wir sie auf etwa 40. Sagen wir jetzt 45. 45 ist okay. Wählen Sie das auch aus. Geh zurück zu 45, glaube ich. Jetzt geht es uns gut. Aktualisiere das jetzt in der übernächsten Lektion , wir werden am Menü arbeiten. Wir können das so anzeigen, aber bevor wir da sind, erstellen wir diesen Abschnitt weil er diesem sehr ähnlich sieht. Das einzige, was wir tun müssen, ist dieses Hintergrundbild hinzuzufügen , das wieder hier reingeht. Lass uns das duplizieren. Gehen wir weiter und wählen solange es noch ausgewählt ist, Gehe zum Stil. Diesmal geht es nicht um Farbe, das Bild. Wir fügen die Upload-Dateien für Spaghettibilder hinzu die Upload-Dateien für Spaghettibilder Mal sehen, wo ist das Bild? Wir können jedes Bild hinzufügen. Ich denke, das ist es, Bild 35. Da haben wir's. Wähle das aus. Fantastisch. Jetzt können wir uns positionieren und sagen, oben in der Mitte. Wir können sagen, keine Wiederholung. Und wir können es einfach so abdecken. Aber eine andere Sache, die ich dir nicht gezeigt habe , ist, dass du es beim Scrollen an einer Stelle reparieren kannst , sodass jemand, der scrollt, durch das Bild scrollt Das ist ein netter Effekt. Ich habe vergessen, diese Referenz-Website einzufügen. Lassen Sie uns das auch in Weiß ändern, diesen Text auch in Weiß. Aktualisiere das. Lassen Sie uns auch endlich wieder den äußeren Container auswählen und zur Hintergrundüberlagerung wechseln und die Farbe auf Schwarz ändern Lassen Sie uns die Intensität erhöhen , damit der Text auffällt. Aktualisiere das. Jetzt können wir einen weiteren Aufruf zum Handeln hinzufügen. Duplizieren Sie diese Kopie, ziehen Sie sie. Lass es uns genau dort ablegen, in der Mitte ausgerichtet. Hier steht Tischreservierungen, aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Scrollen Sie nach unten. Da haben wir's Wie Sie sehen können, hat es diese schöne Schriftrolle, die das gesamte Bild anzeigt, während Sie es durchblättern. Was mir jetzt sehr gut gefällt, wenn ich zu unserer Referenz zurückkehre, wie ich im nächsten Abschnitt erwähnt habe, wir werden das erstellen. In der Lektion. Danach erstellen wir die Galerie, bevor wir zu anderen Teilen übergehen. Wir sehen uns in der nächsten Lektion. Geh nirgendwohin. 17. Globale Schriftarten: In dieser Lektion sollten wir an diesem Menü arbeiten. Aber ich erinnere mich, dass wir die globalen Schriftarten nicht festgelegt haben. Schauen Sie sich jetzt an, was wir hier auf unserer Website haben. Das ist es, was wir uns ansehen, die Schrift, die wir auf der Referenzwebsite haben. Dies ist eine Montserrat-Schrift, die ich für Websites bevorzuge nun die Schriftart angeht, die wir gerade erstellen, hat sie die Roboto-Standardschrift, die mit Element geliefert wird Wir wollen das auf Montserrat ändern. Wenn wir wieder reingehen, können wir zu jedem einzelnen Element gehen. Wir ändern die Schrift auf Monterat. Indem Sie das Element auswählen, zur Stiltypografie wechseln, jetzt Monat eingeben, und das hat sich zu Montserrat geändert Aber das wäre zu mühsam, weil es bedeutet, dasselbe zu wiederholen Aber glücklicherweise bietet Elementor eine Möglichkeit, globale Schriftarten festzulegen . Sobald Sie sie festgelegt haben, wird jedes Mal, wenn Sie ein textbasiertes Element hinzufügen, die Schriftart angezeigt, die Sie in den Einstellungen dieser Burger-Menü-Website festgelegt haben in den Einstellungen dieser Burger-Menü-Website Wie Sie sehen können, haben wir globale Farben und globale Schriftarten. Ich kann die primäre Schriftart so einstellen , dass sie die gewünschte Schriftart ist. Das hat sich auf Montserrat geändert. Klicken Sie irgendwo da drin Ich mache dasselbe für alle, weil ich es mag, wenn sie Montserrat Klicken Sie da endlich rein, Montserrat endlich rein, Montserrat Lass uns das aktualisieren. Gehen wir zurück zum Editor. Nun, jeder Fonds ist Montserrat, außer diesen schicken Fonds, die wir ausdrücklich festgelegt haben Wie Sie sehen können, handelt es sich bei allen unseren Fonds jetzt um Monerat. Wenn wir zum Beispiel hier unten einen Texteditor hinzufügen, wird es immer noch Montserrat sein Lass mich das löschen. Das war nur die Einrichtung der globalen Fonds und jetzt wissen Sie, wie das geht. Wir sehen uns in der nächsten Lektion, wenn wir das Menü zusammenstellen. Wir sehen uns in Kürze. 18. Lebensmittelkarte: Jetzt ist es an der Zeit, eine Speisekarte zu erstellen, genau wie wir sie hier haben. Diese Speisekarte dient nur dazu, einige der Lebensmittel anzuzeigen, die Sie haben. Denn denken Sie daran, wenn ein Kunde Ihrem Restaurant ist und tatsächlich bestellen möchte, klickt er auf diese Schaltfläche und sieht das eigentliche Menü. Lassen Sie uns abwarten und sehen, los geht's. Dies ist das eigentliche Menü, auf das sie klicken und ihre Bestellung aufgeben können . Dies dient der Darstellung und der Ästhetik Ihrer Website. Lass uns weitermachen und das tun. Was wir tun müssen, ist ein Plug-In zu installieren. Gehen wir zu Plugins. Neues hinzufügen. Ich suche nach einer Speisekarte. Speisekarte. Los geht's mit Radius Theme. Es hat jetzt 3.000 aktive Installationen. Hier gibt es viele Optionen und Sie können mit allen herumspielen. Aber das, was mir gefallen hat, ist dieses Radius-Thema. Für den speziellen Zweck, den ich gerade beschrieben habe, wird ein schönes Menü mit vier Elementen angezeigt. Lass uns weitermachen und installieren. Wie Sie jetzt sehen können, ist es mit dieser Version von Press kompatibel. Einige von ihnen sind ungetestet. Ich mache weiter und aktiviere es. Los geht's, ein paar Beschreibungen. Aber was wir tun wollen, ist zu allen Lebensmitteln überzugehen. Natürlich haben wir kein Essen, also können wir Essen oder Mahlzeit hinzufügen. Gehen wir zurück zur Seite hier. Ich sage gegrilltes Hähnchen. Und Sie können es hier ausführlich beschreiben, aber wir müssen diese lange Beschreibung hier nicht angeben aber wir müssen diese lange Beschreibung hier nicht , weil wir dieses Plug-In nicht verwenden werden, um unsere Bestellungen aufzugeben. Wir werden ein anderes Plug-In für das Bestell- und das eigentliche Menüsystem verwenden . Was wir hier tun können, ist eine kurze Beschreibung zu geben , ob dieses Huhn für zwei Personen ausreicht . Platziere das hier. Der Grund, warum wir dieses Plug-In nicht für das Bestellsystem und all das verwenden , ist, dass es , wenn wir zum Beispiel auf dieser Referenz-Website auf dieses gegrillte Hähnchen klicken um zu der Seite weitergeleitet zu werden, auf der wir hässlich ist, wenn wir zum Beispiel auf dieser Referenz-Website auf dieses gegrillte Hähnchen klicken, um zu der Seite weitergeleitet zu werden, auf der wir unsere Bestellung aufgeben sollen. Schau dir das an, ich weiß nicht einmal, wie man das bearbeitet, weil es nicht mit Elementor erstellt wurde Wir müssen es mit Wordpress bearbeiten, Gutenberg. Und das wollen wir nicht tun. Wir wollen, dass dieses Menü genau hier geladen wird, wo auch immer der Button ist. Wir benötigen diese Beschreibung nicht, aber wir benötigen diese kurze Beschreibung für visuelle Zwecke. Lassen Sie uns weitermachen und es in eine Kategorie einordnen. Neue Kategorie hinzufügen. Wir können dieses Mittagessen oder eine beliebige Kategorie nennen . Sobald Sie das eingegeben haben, drücken Sie die Eingabetaste, wir können eine Funktion hinzufügen Dieses Bild hier, gegrilltes Hähnchen. Ich glaube, das ist es. Wählen Sie ein ausgewähltes Bild aus. Lassen Sie uns das jetzt veröffentlichen. Ich werde weitermachen und drei weitere Lebensmittel kreieren. Ich werde diesen Abschnitt schnell vorspulen und weitere Lebensmittel hinzufügen. Wie Sie sehen können, habe ich drei Beispielgerichte erstellt , und jetzt möchten wir sie hier auf unserer Seite anzeigen. Wir zeigen sie direkt unter diesem grauen Bereich an. Lass mich hoch, lass mich diesen duplizieren, einfach so. Und dann ziehe es und lege es direkt darunter. Wie Sie sehen können, hat es eine Textbeschreibung, unser Menü, das kopiere ich. Diese Änderungen an unserem Menü, dann lösche ich sie. In der Tat, einfach so. Jetzt lassen wir diesen Container hier stehen. Jetzt, zurück, gehen wir zum Shortcode-Generator und fügen einen neuen Beitrag hinzu. Geben wir ihm jetzt einen Namen, Homepage-Menü, das. Geben wir ihm auch ein Layout, wählen Sie Layouttyp aus, den wir ihm geben möchten. Lass uns damit weitermachen. Gehen wir von Kategorie zu Kategorie vor. Ja, lassen Sie uns jetzt das Mason-Grid verwenden. Sie können mit all diesen Einstellungen herumspielen, aber das Wichtigste ist, dass Sie wissen, wie man sie anzeigt Sobald Sie es angezeigt haben, können Sie zurückkommen und hier einige Dinge ändern. Gehen Sie zurück zur Seite, laden Sie sie erneut und sehen Sie, wie sich die Änderungen an diesen Layouteinstellungen auf sie ausgewirkt die Änderungen an diesen Layouteinstellungen Lass uns weitermachen und veröffentlichen. Nun, da es veröffentlicht ist, wählen wir diese Kopie des Kurzcodes aus. Gehen wir zum Frontend. Hier wähle ich einen Kurzcode, ein Kurzcode-Element aus und ziehe es in den Container. Hier füge ich den Kurzcode ein, den wir gerade kopiert haben. Aktualisiere das. Lassen Sie uns das Scrollen nach unten anwenden. Sehen wir uns eine Vorschau der Änderungen an. Wenn Sie nach unten scrollen, so sieht unser Menü aus. Wie Sie sehen können, unterscheidet es sich von dem was ich hier habe, weil ich ein anderes Layout ausgewählt habe. Lassen Sie mich das auswählen. Aktualisiere das. Wenn Sie diese Seite aktualisieren möchten, wählen Sie dies aus. Wenden Sie dann alle Änderungen an, die wir hier im Backend vorgenommen haben, und scrollen Sie nach unten. Jetzt sieht es so aus, wie wir Es wird weiterhin so aussehen, als würde es geladen, wenn Sie sich auf dieser Bearbeitungsseite Wenn Sie jedoch eine Vorschau der Änderungen anzeigen, sie wirksam geworden. In Ordnung, also los geht's. Nun, Sie werden natürlich feststellen, dass wir hier auf unserer Referenz-Website dieses Menü haben. Wir können das einfach duplizieren. Lass uns runtergehen und das gleich darunter platzieren. Jetzt wollen wir es direkt darunter haben. In Ordnung, lass uns nach oben scrollen. Lass es uns vorerst hier hinstellen. Dann möchte ich diesen Behälter tragen und ihn über den Knopf stellen. Manchmal ist es etwas schwierig, Elemente dort zu platzieren, wo man sie platzieren möchte. Wenn ich diese Schaltfläche auswähle, kann ich sie in die Mitte des Abstands legen , hier ist der Abstand zu klein. Solange die Option ausgewählt ist, gehen Sie oben zu „Erweiterter Rand “. Sagen wir 50. Dann lassen Sie uns auch den Inhalt des geöffneten Menüs ändern. Öffne das Menü, mach dir keine Sorgen um diese Tasten, wir werden sie ersetzen. Das sind nur Platzhalter , weil wir diese Tasten aus dem eigentlichen Stecker beziehen, den wir für das eigentliche Menüsystem verwenden Das sind nur Platzhalter. Wenn Sie nach unten scrollen, eine Vorschau der Änderungen anzeigen. Wir haben eine nette Speisekarte. Nehmen wir auch an, wie Sie hier sehen können, ist dieses Gericht aus dem Canyon ein, ein bisschen kürzer als dieses andere. Ich denke, das hat mit dem Bild zu tun, das wir verwendet haben. Lass uns das Bild ändern. Wenn Sie Bilder verwenden, die genau dieselbe Größe haben, werden sie dieselbe Größe haben, wie ich es hier getan habe. All diese Bilder sind quadratisch. Ich bereite sie als quadratische Bilder derselben Größe vor. Wenn eines der Bilder, die du hochlädst , kürzer ist als das andere , dann wirst du solche Artefakte haben solche Artefakte Lassen Sie mich dieses Bild durch einen anderen Bildtyp ersetzen , der dieselbe Größe hat. Wie Sie sehen können, 1234. Das sind die Bilder, die ich verwendet habe. Lassen Sie mich das ausgewählte Bild auswählen und es aktualisieren. Lass uns einfach diese Seite aktualisieren. Aktualisiere es. Da haben wir's. Jetzt ist es dasselbe. Stellen Sie sicher, dass Ihre Bilder genau dieselbe Größe haben, damit sie ohne diesen Größenunterschied angezeigt werden können . So erstellen Sie dieses Display-Menü. Aber eine weitere Sache, die ich tun möchte, ist diesen Link zu deaktivieren . Ich glaube, ich habe es gesehen, ich glaube, es ist irgendwo hier drin. Detaillink zur Detailseite. Deaktiviere das. Lass uns das aktualisieren. Jetzt. Wenn wir diese Seite neu laden, hat sie keinen Link Dies ist nur zu Anzeigezwecken gut, da die eigentliche Funktionalität auf dieser Schaltfläche angezeigt wird So erstellt man dieses Menü. Es war etwas länger als der Rest der Lektionen, aber es war eine gute Herausforderung für uns. Lassen Sie uns in der nächsten Lektion diese Galerie gleich hier erstellen, Lassen Sie uns in der nächsten Lektion diese Galerie gleich hier erstellen bevor wir mit dem nächsten Teil fortfahren. Wir sehen uns in Kürze. 19. Galerie: Lassen Sie uns nun sehen, wie Sie diese Galerie hier erstellen. Wenn Sie einen meiner früheren Kurse besucht haben, wissen Sie natürlich, wie man diese Galerie erstellt. Aber wenn du nach einer Auffrischung suchst, lass uns das machen Weiter zu unserer Seite, hier sind wir. Wir wollen zurück zum Herausgeber. Lassen Sie uns weitermachen und diesen Abschnitt duplizieren. Ziehen wir es und platzieren es unter diesen Bereich mit dem Bildhintergrund. Lassen Sie uns dieses Menü natürlich loswerden. Lassen wir den Button genau dort stehen, denn hier haben wir einen Button, um die Galerie zu öffnen. Sagen wir einfach Galerie. Jetzt fügen wir hier die Galerie hinzu. Dazu müssen wir ein weiteres Elementor-bezogenes Plug-In hinzufügen ein weiteres Elementor-bezogenes Plug-In Gehen wir wieder rein und sagen Plugins, füge neuen Elementor hinzu. Es heißt Essential Adds for Element. Wie Sie sehen können, hat es 2 Millionen aktive Installationen. Lass uns das aktivieren. Lassen Sie uns als Nächstes mit Advanced weitermachen. Advanced bedeutet im Grunde nur, dass uns mehr dieser Widgets im Frontend zur Verfügung stehen werden. Als Nächstes suchen wir nach dieser filterbaren Galerie Als Nächstes können wir „Weiter“ sagen. Hier. Als Nächstes. Nein danke. Jetzt sind wir mit der Installation fertig. Gehen wir jetzt zurück zum Frontend und aktualisieren die Seite mit Steuerung R. Immer wenn Sie ein zusätzliches elementares Add-Plug-In hinzufügen, wird es hier hinzugefügt Wenn wir all diese Panels zusammenklappen, denken Sie daran, dass wir Element K, Elements Kit, hinzugefügt haben Hier sind die Panels für das Elements-Kit und jetzt haben wir wichtige Add-Ons hinzugefügt. Dies soll Ihnen nur zeigen , wo Sie sie alle finden können. Dies sind kostenlose Elemente, die Sie hinzufügen können, aber natürlich enthalten sie auch Premium-Elemente. Aber die filterbare Galerie nach der wir suchen, ist genau hier. Wenn wir nach unten scrollen, können wir es ziehen und dort ablegen Da haben wir's, solange es noch ausgewählt ist. Dies ändert sich jetzt in „ Filterbare Galerie bearbeiten“. Zuallererst reichen sechs anzuzeigende Elemente aus. Mal sehen, was sonst noch Filterbare Steuerungen sind, sind diese Elemente hier oben, wie Sie sehen können, wir haben Tische, Personal, Küche Das sind quasi Kategorien von Bildern, die Sie haben. Kategorien von Fotos, vielleicht Fotos von Mitarbeitern, vielleicht die verschiedenen Arten von Lebensmitteln, die Sie haben. Vielleicht eine Reise. In welcher Kategorie auch immer Ihre Fotos platziert werden sollen. wieder reingehen, können wir filterbare Steuerelemente erstellen Ich werde nur die verwenden, die ich benutzt habe, Tabellen. Wir sagen Element, kategorisieren Sie diese Bilder danach. Der zweite hier kann das Personal sein und der dritte kann das sein, was diese Räumlichkeiten waren Aktualisiere das, was ist daran falsch? In Ordnung, solange das noch ausgewählt ist. Jetzt können wir die Galerieelemente erstellen und das sind die einzelnen Bilder, wie Sie hier sehen können Wir haben das erste Galerieelement. Wenn ich das auswähle, kann ich ihm die Kontrolle geben. Der Name des Steuerelements hier ist der Name der Kategorie hier oben. Wenn wir sagen, dass es sich um Tabellen handelt, wird dieses Bild nur angezeigt , wenn wir das Tabellensteuerelement auswählen. Lassen Sie mich diesen Text loswerden, weil mir der Text nicht gefällt, aber Sie können ihn behalten, wenn Sie möchten. Ich entferne auch den Link-Button. Einfach so bleibt uns ein Leuchtkasten-Knopf übrig . Dadurch wird es nur geöffnet, sodass Sie es in einem isolierten Modus betrachten können. werden wir los. Lassen Sie uns nun weitermachen und ein Bild für diesen Abschnitt auswählen. Sie können jedes wählen. Dies ist zum Beispiel Tabelle zwei. Wählen Sie das aus. Da haben wir's. Nun, das ist Galerieelement eins. Wir können es vielleicht Tabelle eins nennen. Werden Sie kreativ mit diesen Artikeln. Vielleicht, oh warte, das sollte das Personal sein, das ist vielleicht der Koch. Lass uns das loswerden. Lassen Sie uns den Link-Button loswerden und den Koch auswählen. Okay, wählen wir diesen Typen aus. Wählen Sie das aus und los geht's. Ich öffne Galerieelement drei. Lassen Sie uns zunächst auswählen, vielleicht sprechen wir über die Räumlichkeiten. Gehen wir also offen in die Küche Das ist ein Bild von der Küche. Lasst uns diese Texte entfernen. Entferne den Link, sagen wir, das wird von den Räumlichkeiten kontrolliert. Es sollte nur angezeigt werden, wenn es sich bei der Gebäudesteuerung um aktive Räumlichkeiten handelt. Nennen wir das Küchen-Update. Ich mache weiter und wiederhole dasselbe für diese drei, aber ich werde diesen Abschnitt schnell vorspulen. Ich habe gerade die restlichen drei fertig erstellt. Wenn wir eine Vorschau der Seite anzeigen, gehen wir zum Abschnitt. Hier sind wir. Wenn wir Tabellen auswählen , werden Tabelle eins und Tabelle zehn angezeigt. Wenn wir das Personal zeigen , das die Köchin Kate, die Kellnerin und Alex, den Barkeeper, haben die Kellnerin und Alex, den Barkeeper, wird, zum Beispiel für Alex, der Artikel heißt Alex, und der Barkeeper fällt hier unter diesen Texteditor Nun werden Sie hier in unserer Referenz feststellen , dass wir abgerundete Ecken haben Also lass uns weitermachen und das stylen. Solange es noch ausgewählt ist, gehe ich in den Stil und gehe zum Radius des Elementrandes. Geben wir 20, jetzt sind sie gerundet. Aktualisiere das. Wenn wir zur Vorschauseite gehen, sind sie jetzt gerundet. Da haben wir's. Sie können weitermachen und mit all diesen anderen Einstellungen herumspielen. Sie nun wissen, wie Sie diese filterbare Galerie hinzufügen können, möchten wir uns in dieser Lektion kurz fassen Aber wir haben wirklich die wichtigsten Teile behandelt, die wichtigsten Teile Machen Sie weiter und spielen Sie mit all diesen Einstellungen herum und sehen Sie, ob Sie Ihre Filtergalerie verbessern können. Das ist alles für diese Lektion. In der nächsten Lektion sehen wir uns an, wie Sie diese Fußzeile erstellen. Wir sehen uns in Kürze. 20. The Footer: Jetzt sind wir dabei, diese Fußzeile zu erstellen , ohne weitere Zeit zu verschwenden Lassen Sie uns zur Sache kommen und auf unsere Website wechseln. Jetzt werden wir natürlich genauso , wie wir die Kopfzeile getrennt von der Startseite erstellt haben, die Fußzeile separat mit Element Ski Light erstellen separat mit Element Ski Light Es ist an der Zeit, die Seite zu verlassen, aber bevor wir die Seite verlassen, lassen Sie uns weitermachen und Update sagen Jetzt können wir aussteigen. In Ordnung, gehen wir zur Header-Fußzeile von Element Skit. Sagen wir, füge neue hinzu, du kennst das, was mein Fuß ist Natürlich sollten diese Änderungen an der Fußzeile aktiv sein und lassen Sie uns weitermachen und den Inhalt bearbeiten Hier sind wir. Jetzt werden wir natürlich dreispaltigen Abschnitt hinzufügen. Lass uns weitermachen und das hier hinzufügen. Ich möchte ein Bildelement hinzufügen. Wir können das Logo hier platzieren. Ich wähle das Logo hier aus. Wir werden soziale Symbole hinzufügen. Und ich mag diese von Elements Kit. Diese anderen sind vom Element-Team, aber diese sind von Elements Kit. Ich werfe sie gleich da ab. Wie Sie sehen können, sind sie oben positioniert. Wenn ich den Behälter auswähle, in dem sie sich befinden, kann ich die Ausrichtung so ändern , dass sie zentriert ist. Ich kann hier dasselbe für das Logo tun, aber das ist nicht einmal sichtbar. Nun, wie Sie hier sehen können, haben wir ein Hintergrundbild, wir wissen bereits, wie das geht. Wählen Sie den Container aus, gehen wir zu Stil, Hintergrundtyp und wählen wir dann ein Bild aus. Wir möchten sicherstellen, dass wir ein großes, großes Bild auswählen. Ja, 19 mal 1920 mal 1080. Ja, wähle das aus. Da haben wir's. Verstehe wie immer die Position, vielleicht in der Mitte oder vielleicht in der Mitte oben Sagen wir, Anlage Standard, Wiederholung, Wiederholung. Sagen wir das Cover für die Hintergrundüberlagerung. Geben wir ihm diese schwarze Farbe. Lass es uns dunkler machen, einfach so. Das bedeutet natürlich, dass wir die sozialen Symbole nicht sehen können, die Auswahl der Elemente, diese Änderungen zur Bearbeitung von sozialen Symbolen. Und wir haben Facebook, Twitter und Linked in. Sie können ein weiteres hinzufügen, wenn Sie möchten, aber wir bleiben bei drei Facebook-Konten. Gehen wir jetzt unter normalen Umständen zur Farbe über, zur Farbe. Also wollen wir diese goldene Farbe wählen. Ich möchte die Seite mit Elementor bearbeiten, diese Texte auswählen, zum Stil gehen, das gelbe Steuerelement C auswählen, um es zu kopieren und zu schließen Komm rein, füge es ein. Jetzt ist es gelb, aber das ist tatsächlich die Farbe des Textes. Ich möchte eine weiße Hintergrundfarbe haben. Das ist genau das, was wir wollen , wenn der gelbe Hintergrund schwebt Normalerweise möchte ich sogar, dass der Text so schwarz ist Wenn wir mit der Maus darüber fahren, möchten wir, dass der Hintergrund einfach weiß Lassen Sie uns dasselbe für Twitter wiederholen. Es ist standardmäßig schwarz, aber der Hintergrund ist golden. Und wenn Sie mit der Maus darüber fahren, muss der Hintergrund weiß sein. Jetzt machen wir auch verlinkt, das sollte schwarz sein, sollte golden sein, in der Warteschleife, weiß Aktualisiere das natürlich, hier fügst du die Links zu den verschiedenen sozialen Plattformen direkt dein Profil auf dieser Plattform ein. Füge es hier ein. Für Linked In für Twitter fügst du es hier ein. Und für Facebook gehen wir zum Stil über. Sie können sie auch ganz nach rechts ausrichten. Sie können auch das Logo in der Fußzeile auswählen und es verkleinern, vielleicht bis zu diesem Punkt Und richten Sie es links aus. Jetzt genau hier. Lassen Sie uns weitermachen und eine Textüberschrift „Mahlzeiten“ hinzufügen, wie kein anderes Exemplar. Fügen Sie es dort ein. Ändern wir die Frontfarbe auf Weiß. Gehen wir zur Typografie. Lass es uns schwarz machen. Richten wir es in der Mitte aus. Und ich denke, jetzt geht es uns gut. Dann müssen wir auch einen Textabsatz oder einen Texteditor hinzufügen. Platzieren wir es genau dort, Stil, Mittelfarbe, Weiß. Aktualisiere das. Jetzt haben wir hier natürlich etwas Polster rauf und runter. Polsterung hier und Polsterung da unten, Auswahl der Fußzeile selbst, Auswahl der Fußzeile selbst Geben wir vielleicht 100 und hier 100. Aktualisiere das. Lassen Sie uns auch diesen Container auswählen, der den Text enthält. Lassen Sie uns alles in der Mitte vertikal ausrichten. Lasst uns das reduzieren. Wählen Sie diesen Text aus und ziehen Sie einen Rand nach unten , damit alles richtig ausgerichtet ist. diesen Container erneut auswählen, können wir eine Lücke setzen, vielleicht 40, das sind 440. Aktualisiere das, lass uns eine Vorschau anzeigen. Fantastisch, das ist unsere Fußzeile. Wir können das etwas dunkler machen, hier wieder reingehen, Hintergrund überlagern, dunkler so Lassen Sie uns auch dieses Logo, einen Link, einen Link zu einer benutzerdefinierten URL erstellen Kopieren Sie das, fügen wir es dort ein, aktualisieren Sie das. Fantastisch. Und wenn wir jetzt darauf klicken, wird das Logo auf die Startseite weitergeleitet. Es gibt eine Sache, die Sie beachten müssen , wenn wir uns der untersten Seite nähern bis zu ihnen scrollen . Genau, es sieht sehr nett Aber ich wollte, dass Sie beachten, dass wir keinen Spielraum für den unteren Rand dieses Abschnitts festgelegt haben, um hier eine gewisse Trennung zu haben Jetzt müssen wir diese Homepage bearbeiten, mit Elementor bearbeiten. Scrollen Sie jetzt ganz nach unten, dieser Abschnitt genau hier, der die gesamte Auswahl enthält, die fortgeschritten Er hat einen oberen Rand von 100 Geben wir ihm auch einen unteren Rand von 100. Aktualisieren Sie die Vorschau, sodass alles gleichmäßig verteilt ist. In Ordnung, genau nach unten scrollen. Jetzt haben wir genau da einen schönen Abstand. So erstellen Sie die Fußzeile mit Elements Kit. Ich hoffe, dir gefällt diese Lektion. In der nächsten Lektion legen wir das ausgewählte Bild fest. Wir sehen uns in Kürze. 21. Ausgewähltes Bild festlegen: Wir möchten sehr schnell etwas tun, nämlich ein ausgewähltes Bild für unsere Landingpage einrichten. Das alles ist Teil von SEO. Für Wordpress, was sehr wichtig ist. Sie können eine Website haben , die sehr schön ist. Wenn Sie jedoch nicht die richtige Suchmaschinenoptimierung durchführen, die Website für Google und andere Suchmaschinen nicht einmal sichtbar. Sie müssen ein ausgewähltes Bild festlegen. Wenn wir wieder reingehen, müssen wir nur zu Seiten gehen. Sie wählen die Seite aus, wir möchten ein ausgewähltes Bild zur Bearbeitung einrichten . Und genau hier werden Sie feststellen, dass wir ausgewähltes Bild eingestellt haben, vorgestelltes Bild, das wir sein wollen Das kann übrigens ein nettes Beitragsbild sein. Lege das als das vorgestellte Bild fest und aktualisiere es. Wenn nun jemand unser Restaurant nach seinem Namen googelt es in den Google-Suchergebnissen auftaucht oder es sich um Suchergebnisse handelt, wird dieses ausgewählte Bild angezeigt Das ist natürlich besser, als nur einen kurzen Text zu zeigen , der beschreibt, worum es in unserem Restaurant geht Wenn Sie jetzt mehr darüber erfahren möchten , warum ausgewählte Bilder wichtig sind und wie Sie Ihre Website für SEO einrichten und optimieren können. Ich habe hier auf Skillshare einen kompletten Kurs, der dir alles zeigt, was du über Wordpress SEO wissen musst . Schau dir mein Profil an und suche nach einem Kurs zum Thema Wordpress SEO. Aber im Grunde genommen ist das so, wie du dein vorgestelltes Bild einrichtest. In der nächsten Lektion sehen wir uns an, wie Sie die Info-Seite erstellen. Wir sehen uns in Kürze. 22. Info-Seite: Jetzt ist es an der Zeit, die Info-Seite zu erstellen. Ich gehe zurück zu unserem Dashboard. Lassen Sie mich zunächst all die anderen Dinge schließen , an denen wir gearbeitet haben. Jetzt sind wir hier und das ist die Info-Seite. Ich möchte reingehen. Beachten Sie, wenn Sie mit der Maus über die Startseite fahren, die Option Bearbeiten mit Elementor, aber diese anderen bearbeiten nicht mit Und das liegt daran, dass wir noch nicht angefangen haben, sie mit Element zu bearbeiten. Wir haben sie gerade erstellt und sind nicht zum Frontend gegangen, um sie zu bearbeiten. Aber sobald wir anfangen, sie mit Elementor zu bearbeiten, wenn du wieder da bist, wird es diese Option Wir sind hier, wir bearbeiten es. Denken Sie daran, dass wir hier nicht die Grundeinstellungen vorgenommen haben, die wir für die Startseite festgelegt haben. Gehen wir zur Standardeinstellung. Gehen wir zur Vorlage und sagen Elementor in voller Breite. Gehen wir auch in die Astra-Einstellungen. Sagen wir volle Breite, Seitenleiste, keine Seitenleiste. Lassen Sie uns diese anderen deaktivieren. Aktualisiere das, großartig. Lass uns jetzt mit Elementor bearbeiten. Was wir tun wollen, ist, wenn ich eine Vorschau davon anzeigen kann und dann zur Startseite gehen Ich möchte, dass wir mit Elementor bearbeiten. Wir möchten einige dieser Teile, die sich auf der Startseite befinden, wiederverwenden einige dieser Teile, die sich auf der Startseite befinden, Wenn ich zum Beispiel scrolle, können wir das auswählen. Ich kann einfach kommen und sagen, mit der rechten Maustaste auf Kopieren klicken. Wenn ich hier in dieser Box wieder reingehe, kann ich „Einfügen“ sagen. Das ist eine Möglichkeit, Elemente erneut zu verwenden. Eine andere Möglichkeit, Elemente wiederzuverwenden , besteht darin , mit der rechten Maustaste auf „Als Vorlage speichern“ zu klicken . Wenn ich es als Vorlage speichere, kann ich es zum Beispiel als Bildhintergrundabschnitt bezeichnen. Jetzt ist es in meinen Vorlagen gespeichert. Wenn ich jetzt herkomme, lass mich das einfach löschen. Wenn ich hierher komme, um eine Vorlage hinzuzufügen , und in meine Vorlagen gehe, kann ich „Einfügen“ sagen. Es wird mir sagen, dass es alles überschreiben wird , was ich hier erstellt habe. Ich sage bewirb dich. Da haben wir's. Ich wollte, dass wir das auswählen , damit wir so etwas kreieren können. Zuallererst wähle ich das aus und wie Sie sehen können, ich den Container nicht steuern. Und denken Sie daran, dass er eine obere Marge von 100 hatte, von der Stelle, an der wir ihn auf der Startseite ausgewählt haben. Wir wollen diesen Rand entfernen, damit er steigt. Beachten Sie, dass wir all diese Dinge auch nicht haben. Lassen Sie mich das loswerden , aber ich möchte diese kurze Beschreibung beibehalten. Ich finde, es sieht besser aus. Lassen Sie mich den Container selbst auswählen und oben etwas Polsterung hinzufügen Lass uns 200 draus machen. Ordnung, machen wir es zuerst auf Null und entfernen dann den Link. Wir können also jeweils nur eine Zelle bearbeiten. Ich möchte, dass es 200 sind, sagen wir 180, das sind 1.800 unten Sagen wir 50. Alles klar , wähle den Text aus und füge ihn ein. Und dann können wir hier vielleicht nur eine kurze Beschreibung haben , einfach so. Aktualisiere das. Lassen Sie uns als Nächstes unsere Geschichte auswählen. Lassen Sie uns diesen Abschnitt hinzufügen. Fügen wir eine Marge von 100 hinzu. Dupliziere das. Ziehen wir das hin und legen es da rein. Ändern Sie es aus Konsistenzgründen in die schwarze Farbe 111. Lassen Sie uns auch diesen Text auswählen. Geh wieder rein. Texteditor. Lass uns das dort einfügen. Verwenden Sie beim Einfügen Strg+Shift V anstelle von Strg V. Wenn Sie es mit Strg V einfügen, hat es die Formatierung, die es zuvor hatte Dann solange es noch ausgewählt ist. Richten wir es in der Mitte aus. Was haben wir sonst noch? Wir haben zwei Bilder direkt darunter, aber in diesem Container können wir immer noch einen Container und dann zwei Container innerhalb eines Duplikats hinzufügen . Jetzt gehen sie von oben nach unten. Wählen wir den äußeren aus. Stellen wir sicher, dass es von links nach rechts ist. Einfach so. Jetzt können wir hier ein Bild hinzufügen Wählen Sie hier ein Bild aus Ihrer Geschichte aus. Kann das auswählen. Geben wir ihm die abgerundeten Ecken im Stil des Randradius 20. Lassen Sie uns das jetzt duplizieren. Lass uns das loswerden. Lass uns das ändern. Ich werde einfach eines dieser Bilder verwenden, aber du musst ein schönes hochladen. Da haben wir's, Update. Sehen wir uns die Änderungen an. Fantastisch. Jetzt werden Sie natürlich feststellen, wenn wir diese Seite aktualisieren, dass sie beim Neuladen diesen Sprung hat Und wir wollen , dass diese schrittweise Ladesteuerung erweiterten Bewegungseffekte des Containers auswählt, sagen wir, sie einblendet, aktualisiert Lassen Sie uns einfach so eine Vorschau der Änderungen anzeigen. Als Nächstes werden wir diesen Abschnitt hinzufügen, wie Sie bereits vermutet haben Wir können ihn von der Startseite auswählen weil wir etwas erstellt haben , das so aussieht Wir haben es bereits als Vorlage gespeichert. Wir gehen hier rein, das ist es. Einfügen, Anwenden. Wenn wir scrollen, los geht's. Ordnung, also Familienangelegenheiten, kopiere das, wähle es aus, füge es ein, betrieben von Olivia und Lucas Füge das da rein. Kopieren Sie das, wählen Sie das aus, fügen Sie das dort ein. Und das ist natürlich ein Platzhalter, wir werden die eigentlichen Schaltflächen haben, die wir hier verwenden werden. Lassen wir das dabei Fantastisch. Lassen Sie uns weitermachen und diesen Abschnitt erstellen. Wir wollen einen zweispaltigen Abschnitt. Solange dieser Bereich noch ausgewählt ist, gehe ich oben zur erweiterten Marge 100 über. Lass uns gleich hier ein Bild hinzufügen. In Ordnung. Es ist auf der rechten Seite. Auf der linken Seite können wir den Text haben. Und der Texteditor, das ist Lucas, das ist nur ein Platzhaltertext, Lucas 111 Die Schrift ist schwarz und wahrscheinlich 45 groß. Jetzt wähle ich natürlich den Behälter aus, in dem er sich befindet, und richte dann alles vertikal in der Mitte aus. Wählen Sie ein Bild von Lucas aus. Hier sind wir, offen. Lass uns gehen. Fantastisch. Gehen wir zum Stil Randradius 20, um ihm diese abgerundete Ecke zu geben. Dann wählen wir diesen Container hier im Layout aus. Geben wir ihm einen Spaltenabstand von vielleicht 40. Fantastisch. Lassen Sie uns das jetzt duplizieren. Jetzt ist es dupliziert. Wir können das ziehen und auf die andere Seite legen. Lass uns das hier nach rechts ändern, wo ist ein gutes Bild? Lernen Sie Olivia kennen, denn diese Dienerin wird von Lucas und Olivia geführt. Wähle das aus Da haben wir's. Das ist Olivia. Aktualisiere die Vorschau der Änderungen. Da haben wir's. Super geil. Wir sind fast fertig mit der Info-Seite. Natürlich müssen wir diesen Bereich für die Newsletter-Anmeldung erstellen , aber das sollte eine Lektion für sich sein. Lassen Sie uns das in der nächsten Lektion tun. Wir sehen uns in Kürze. 23. Newsletter-Anmeldeformular: Jetzt ist es an der Zeit, dieses Newsletter-Anmeldeformular zu erstellen , das wieder in unserem Editor angezeigt wird Im Moment werden wir diesen Ort verlassen. Also können wir zum Backend des Dashboards gehen und mein bevorzugtes Formular-Plugin für Wordpress installieren, das Forminator heißt Gehen wir zum Ausgang des Dashboards. Gehen wir zu Plugins Hier neu hinzufügen. Geben wir Forminator ein. Los geht's, von WP MU Dev mit 500.000 Installationen Dies ist eines der besten Formular-Plugins auf dem Wordpress-Plugin in Reposit Jetzt sind wir hier. Sie finden es fast am Ende dieses Menüs. Wenn ich auf Forminator klicke, wird das Dashboard des Plug-ins aufgerufen. Hier sind wir Wie Sie sehen können, können wir ein Formular erstellen, jede Art von Formular erstellen, oder Sie können Umfragen, Meinungsumfragen oder so etwas erstellen Umfragen, Meinungsumfragen oder so etwas Lass uns, ich möchte, dass wir einen Newsletter erstellen. Anmeldeformular, Weiter. Das ist eine Vorlage, die wir verwendet haben. Anmeldeformular, erstelle das. Wie Sie hier in unserer Referenz sehen können, stehen diese natürlich hier in unserer Referenz sehen können, nebeneinander. Vorname und E-Mail können dies auswählen und es ziehen und direkt neben den Vornamen setzen. Wenn wir es in der Vorschau ansehen , sieht es so aus. Hier ist die Schaltfläche Abonnieren. Hier geht's los. Du kannst Inhalt ändern, indem du darauf klickst und sagst vielleicht trete uns bei oder so, Bewerben Sie sich. Jetzt heißt es: Schließ dich uns an. Schließ dich uns an. In Ordnung, jetzt ist es an der Zeit, das Formular zu stylen. Wenn ich auf Veröffentlichen klicke, haben wir einen Kurzcode. Und denken Sie daran, wie Sie einen Kurzcode im Frontend anzeigen . Wenn ich hier auf diese Seite komme und „Bearbeiten“ sage Elementor direkt darunter nach unten scrollt , lassen Sie uns das Tatsächlich brauchen wir die beiden. Lass mich einfach das Bild loswerden. Wir brauchen die beiden Container und lassen Sie mich das alles loswerden. Jetzt haben wir diese beiden Container. Lassen Sie uns in diesem Container ein Kurzcode-Element einfügen, lassen Sie es uns dort ablegen. Gehen Sie nun zurück zum Dashboard, kopieren Sie diesen Kurzcode und fügen Sie ihn ein. Wählen Sie dies aus und fügen Sie es hier ein. Da haben wir's. Aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Scrollen, los geht's. Holen wir uns auch das neueste Exemplar, das hier reinkommt. Lass mich das duplizieren. Lass das da fallen. Welche Kontrollen habe ich gemacht, um sie rückgängig zu machen? Nehmen wir das und ich füge es ein. Lassen Sie mich auch den Text auswählen, Texteditor da drin. Ich füge das ein, aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Fantastisch. Lassen Sie uns jetzt auch hier unten auf diesem Container etwas Spielraum hinzufügen. Advanced Bottom 100 Update, das. Sehen wir uns die Änderungen an, indem wir nach unten scrollen. Ein paar nette Polsterungen genau da. Lassen Sie uns das nun so gestalten, dass es in unserem Armaturenbrett besser aussieht in unserem Armaturenbrett besser aussieht Wenn wir das schließen, haben wir Nachfelder, wir haben hier ein Erscheinungsbild. Sie können verschiedene Erscheinungsbilder für Ihr Formular wählen. Ich mag die mutige Farbe, aber ich möchte diese Farben ändern, Farben. Lassen Sie uns benutzerdefiniert statt standardmäßig benutzerdefiniert verwenden. Das erste, was ich ändern möchte, ist die Schaltfläche Senden. Ich möchte, dass es wieder diese goldene Farbe hat. Ich wähle den Stil aus und kopiere den Code. Gehen Sie wieder rein und wählen Sie es dort einfügen. Jetzt ist es diese Farbe beim Schweben, ich möchte, dass sie 111 im Fokus ist, obwohl das nicht sehr wichtig ist 111 ansehen, los geht's. Lasst uns jetzt dafür sorgen, dass diese Ecken weniger schreiend sind. Dunkler Eingabe- und Textbereich für die Rahmenfarbe, ich möchte sie in dieses hellgraue Feld ändern, ich möchte sie dieses leicht dunkelgraue On Focus ändern, das leicht dunkelgrau Das ist okay. Vorschau, los geht's. Fantastisch. Aber jetzt wollen wir ihnen ein paar abgerundete Ecken geben. Sie sind zu scharf. Lassen Sie uns das zunächst aktualisieren. Formintor bietet uns jetzt die Möglichkeit , unseren Formularen mehr benutzerdefiniertes CSS hinzuzufügen . Wenn wir diese Änderungen nicht mit diesen Funktionen hier vornehmen können, können wir benutzerdefiniertes CSS für weitere Änderungen verwenden Sie haben zum Beispiel bemerkt, dass dies ein Eingabefeld ist. können wir definieren , wie sich unsere Eingabefelder CSS-Einstellung können wir definieren , wie sich unsere Eingabefelder in ihrem Aussehen verhalten sollen. Wir können hier reingehen und für die Eingaben sagen, wählen Sie Eingaben aus. Das ist jetzt der Selektor für alle Eingänge. Wir wollen den Grenzradius fünf. Wir wollen, dass der Randradius der Eingabefelder eine abgerundete Ecke von fünf Pixeln hat. Wenn wir uns das jetzt ansehen, haben sie eine abgerundete Ecke von fünf Pixeln, sagen wir, zum Beispiel 50. Wie Sie sehen können, ist es jetzt ziemlich abgerundet . Lass uns das aktualisieren. Lassen Sie uns die Änderungen überprüfen. Wir wollen, dass es 550 sind, das ist zu viel Update. Jetzt wollen wir dasselbe auch für die Schaltfläche tun, aber wenn Sie hier nachschauen, haben wir keine Schaltfläche zur Auswahl. Diese werden Selektoren genannt. Wir haben keine Schaltfläche zur Auswahl. Was wir tun können, ist zum Frontend zu gehen. Lassen Sie mich zunächst diesen Kurzcode auswählen und auf Anwenden klicken. Nur um anzuwenden, was wir im Dashboard im Backend gemacht haben , indem wir nach unten scrollen Wie Sie jetzt sehen können, sind die Änderungen wirksam geworden. Wenn wir eine Vorschau davon anzeigen und nach unten scrollen, sind wir fertig Jetzt kann ich mit der rechten Maustaste auf diese Schaltfläche klicken und dann nachschauen. In jedem Browser finden Sie ein Inspektionselement. Wie Sie nun sehen können, beim Klicken auf Inspect im Grunde der gesamte Code angezeigt, wurde beim Klicken auf Inspect im Grunde der gesamte Code angezeigt, einschließlich des Selektors, der der Schaltfläche zugewiesen wurde Wenn Sie jetzt hier nachschauen, können Sie sehen, dass die Schaltfläche gelb ist Es ist sehr leicht zu erkennen , dass dies der Button ist. Sie hat eine gelbe Hintergrundfarbe und wird als Formintor-Button Submit bezeichnet Wenn wir das mit der Punktsteuerung C auswählen und wieder rein gehen, können wir es als unseren Selektor verwenden Klammer einfügen, öffnen und schließen. Jetzt können wir sagen, dass der Grenzradius fünf Pixel beträgt. Wenn wir uns das jetzt in der Vorschau ansehen, hat es jetzt diese Pixel. Aktualisiere das. Jetzt sieht es natürlich ein bisschen hässlich aus, mit all dem Platz, der hier noch übrig ist. Warum dehnen wir es nicht bis zum Ende aus und legen es in die Mitte. Jetzt, wo wir es bereits ausgewählt haben, können wir 100% hinzufügen Das ist nicht die Schreibweise von Breite. Wenn wir es jetzt in der Vorschau ansehen, hat es die Breite von 100%. Aktualisieren Sie das. Ordnung, wenn wir jetzt zu dieser Seite zurückkehren und diese noch ausgewählt ist, können wir das anwenden, was wir gerade im Backend gemacht haben. Wenn wir jetzt eine Vorschau der Änderungen sehen, lassen Sie mich das schließen. Lass uns runterkriechen und los geht's. So erstellen das Formintor-Newsletter-Anmeldeformular In der nächsten Lektion wollen wir an der Galerie-Seite arbeiten Wir sehen uns in Kürze. Geh nicht zu weit. 24. Galerie-Seite: Jetzt ist es an der Zeit, die Galerie-Seite zu erstellen. Öffnen wir sie einfach, bevor wir die Galerie-Seite erstellen. Hier ist sie. Mir ist gerade aufgefallen, dass wir dieses Symbol nicht hier oben auf der Info-Seite erstellt haben. Lassen Sie mich nach einem Symbol suchen, lassen Sie uns es dorthin ziehen. Das ist ganz einfach, diese beiden Brillen, oder wir können diese beiden dunkleren nehmen. Einfügen. Und natürlich ändern wir die Farbe in, lassen Sie mich einfach diese Farbe von dieser Schaltfläche auswählen. Kopiere das und füge es dort ein. Wenn Sie mit der Maus darüber fahren, können wir aus Konsistenzgründen den Wert 111 angeben. Einfach so. Aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Da haben wir's. Wenn ich diese Seite neu lade, ist sie natürlich animiert, aber sie wird nur sehr steif geladen Keine Sorge, wir werden an den Animationen für die restlichen Elemente auf der Website arbeiten den Animationen für die restlichen Elemente auf der Website Denn wenn Sie sich unsere Seite hier ansehen, laden Sie die Referenz-Website neu. Alles ist animiert Daran werden wir arbeiten, keine Sorge, gehen wieder rein. Jetzt haben wir unser Icon und sind bereit, an der Galerie zu arbeiten. Lass mich zur Galerie wechseln. Wie Sie sehen können, haben wir hier diese Namensgalerie , die in der Kopfzeile hässlich aussieht. Das liegt daran, dass dies die Rohseite ist, die wir erstellt haben, genau wie die Info-Seite. Wir haben sie noch nicht mit Elementor bearbeitet und wir haben diese Grundkonfigurationen nicht im Backend festgelegt Deshalb ist es nur die Standardseite von Astra Wordpress. Wenn wir sagen, dass die Bearbeitungsseite direkt zurück zum Backend geleitet wird , wo wir grundlegende Einstellungen wie das Template Elementor vornehmen können grundlegende Einstellungen wie das Template Elementor Die volle Breite kann in den Astra-Einstellungen verwendet werden. Wir können sagen, volle Breite, keine Seitenleiste. Und lassen Sie uns diese natürlich deaktivieren. Aktualisiere das. In Ordnung, wenn wir jetzt mit Elementor bearbeiten sagen, ist es jetzt eine Elementor-Seite Lass uns weitermachen und das loswerden. Da wir diesen Abschnitt auf der obersten Seite verwenden möchten, können wir ihn zu einer Vorlage machen oder ihn einfach auf eine andere Seite kopieren , auf der wir ihn verwenden möchten. Ich schreibe, klicke und kopiere. Wenn ich in unsere Galerie gehe, kann ich „Einfügen“ sagen, aber ich sage auch „Als Vorlage speichern“, damit wir Seite zu Seite speichern können , weil wir es auch auf der Kontaktseite verwenden werden . Wir wollen es nicht noch einmal kopieren müssen. Da haben wir's. Ändere das zur Galerie Fantastisch. Als Nächstes möchten wir das einfach aktualisieren lassen. Vorschau, die Änderungen, los geht's. Als Nächstes möchten wir zur Startseite gehen, weil wir diese Galerie-Bearbeitung mit Elementor kopieren möchten Wir können hier ganz nach unten scrollen. Wir möchten den gesamten Abschnitt kopieren, klicken Sie mit der rechten Maustaste auf Kopieren. Gehen Sie wieder rein, klicken Sie mit der rechten Maustaste auf Einfügen. Da haben wir's, denn wir hatten es schon entworfen. Es sieht schon gut aus. Aber jetzt ist das eine einzigartige Galerie. Was auch immer wir hier tun, hat keinen Einfluss auf die Galerie auf der Startseite. Lassen Sie mich die Startseite schließen. Geh sofort wieder rein. Um Zeit zu sparen, werde ich hier keine weiteren Bilder hinzufügen. Wenn wir jedoch die Einstellungsseite in den Galerieelementen reduzieren, können Sie hier weitere Bilder hinzufügen, indem Sie sie duplizieren, indem Sie sie hineinkopieren Und vielleicht beschriften wir es als Tabelle acht wählen ein anderes Bild aus Lassen Sie mich hier einfach ein zufälliges Bild auswählen. In Ordnung, lassen Sie mich das auswählen. Und jetzt, um Zeit zu sparen, werde ich sie einfach duplizieren und, und, und dann randomisieren. Schlüsselanhänger gleich da, Tisch zehn, Alex aktualisiert das Jetzt hatten wir hier eine separate Schaltfläche hinzugefügt, um diese Galerie-Seite zu öffnen. Ich werde das schließen und die Seite aktualisieren. Lassen Sie mich zunächst zur Startseite zurückkehren und mit Elementor bearbeiten Lass uns ganz nach unten scrollen. Jetzt hat diese Schaltfläche hier keinen Link und wir möchten, dass sie zur Galerie-Seite weitergeleitet wird. Ich werde das kopieren. Gehe hierher, solange das ausgewählt ist, ich füge es dort ein. Und natürlich hat die Galerie-Seite die Erweiterung Galerieaktualisierung , das weiß ich. Denn wenn du hier zum Dashboard gehst und zu den Seiten gehst, wenn du dir die Galerie-Schnellbearbeitung ansiehst, ist der Slug Galerie, das heißt die Domain, dieser Slug Sie können sich das auch kurz ansehen , indem Sie mir sagen lassen, Rat bearbeiten Wenn Sie zur URL gehen, werden Sie feststellen, dass es sich hier um die Slash-Galerie von VF export.com So ist das eine Galerie. Wenn du sie in einem separaten Tab öffnen möchtest, öffne dieses Zahnrad, öffne in neuem Fenster, Aktualisiere Wenn ich mir jetzt eine Vorschau der Startseite ansehe und ganz nach unten scrolle Wenn ich auf Galerie öffnen klicke, wird die Galerie-Seite geöffnet, an der wir gerade arbeiten. Lassen Sie mich das schließen, weil wir zu der Galerie-Seite zurückkehren möchten , an der wir gerade arbeiten . Jetzt müssen wir diese Schaltfläche entfernen , da sie für die Startseite gedacht war. Die Galerie selbst enthält eine Schaltfläche „Mehr laden“. Wenn ich die Schaltfläche „Weitere Einstellungen laden“ zusammenblende, wird sie genau dort geladen. Wenn du auf Laden klickst, werden alle weiteren Bilder angezeigt, die du hast. Ich glaube, wir hatten mehr Bilder. Oh, lass mich die Version davon schließen , dass wir hier sein sollten. Wenn ich zur „Galerie reduzieren“ gehe, wird die Schaltfläche „Weitere Artikel laden“ hier angezeigt. Und wenn wir auf Mehr laden klicken , werden die restlichen Bilder geladen. Aber jetzt müssen wir es nach innen stylen. Lassen Sie uns das zunächst aktualisieren. Lassen Sie uns dieses Seitensteuerelement R aktualisieren, damit wir es sehen können. Ordnung, wählen Sie jetzt diese Galerie aus und gehen wir zum Style-Button „Mehr laden“. Zuallererst der obere Abstand, geben wir ihm 50. Geben wir ihm diese Polsterung. Lasst uns das veröffentlichen 60 links, 60 rechts bis 20 unten. Geben wir ihm auch den Grenzradius von 50, sodass wir ihm auch diese goldene Farbe geben wollen. Wenn wir wieder rein gehen, können wir Kopieren auswählen und es dort einfügen. Und wenn wir mit der Maus darüber fahren, wollen wir, dass es auf einem ist. Aktualisieren Sie das aus Konsistenzgründen Lassen Sie uns die Änderungen überprüfen Fantastisch. Weil wir die Galerie selbst von der Homepage kopiert haben. Es hat den Rand, den wir auf der Startseite festgelegt hatten. Deshalb müssen wir nichts mehr hinzufügen. Wenn wir mehr laden, können wir mehr Bilder sehen. Das ist Gewicht. Wir müssen diese Texte ändern. Sagen wir einfach , unsere Geschichte in Bildern aktualisiert das. So sieht es aus. Wie ich bereits erwähnt habe, werden wir an den Bewegungseffekten arbeiten. So erstellt man die Galerie-Seite. In der nächsten Lektion werden wir an der Kontaktseite arbeiten. Wir sind fast am Ende, Leute. Herzlichen Glückwunsch zu dem weit, Sie gekommen sind. Wir sehen uns in Kürze. 25. Kontakt-Seite: Jetzt ist es an der Zeit, die Kontaktseite zu erstellen. zur Kontaktseite wechseln, wiederholen wir dieselben Schritte, die wir auf der Bearbeitungsseite der Galerie-Seite unternommen haben. Wenn ich sehr schnell zurückkehren kann. Wie Sie sehen können, ist dies derzeit der Standard-Header von. Dies ist die Standardeinstellung, wenn wir jetzt in diese Einstellungen gehen. Wenn wir zu den Astra-Einstellungen gehen , haben wir deshalb die Kopf- und Fußzeile deaktiviert Wenn wir nun diese beiden deaktivieren und die Seite aktualisieren, wenn wir die Seite aufrufen, in Ordnung, jetzt haben wir immer noch diese Kontaktüberschrift, die meiner Meinung nach eine WordPress-Überschrift ist Überhaupt nicht. Richtig. Wie auch immer, lassen Sie uns die Vorlage auf Elementor Astra mit voller Breite ändern . Wir möchten, dass sie hier die volle Breite hat, keine Seitenleiste Lassen Sie uns auch den Bannerbereich deaktivieren und aktualisieren. In Ordnung, natürlich mit Elementor bearbeiten. Lassen Sie uns nun die von uns erstellte Vorlage hinzufügen , den Seitenanfang, Einfügen, Anwenden Sie können dieses Hintergrundbild hier ändern und hat keine Auswirkungen auf die anderen Seiten, auf denen wir diese Vorlage für den Kontrollcontainer verwendet haben Mir gefällt dieser schwebende Container-Stil. Lass uns das auswählen. Lassen Sie mich das auswählen und das schließen. Das ist der Kontakt. Kontaktiere uns, aktualisiere das jetzt, weil wir gerade ein Formular erstellen. Lass uns hierher gehen. Kontakt zur Referenz-Website. Fantastisch. Da wir dieses Formular erstellen, müssen wir natürlich das Format verwenden. Ich gehe wieder rein ins Armaturenbrett. Gehen wir zurück, gehen wir zu Formulator Forms. Nehmen wir an, erstellen Sie ein Kontaktformular. Fahren Sie fort, um das zu erstellen. Es hat hier einige Standardfelder. Vorschau, Dies ist ein Eingabefeld. Eingabefeld. Eingabefeld, und das ist ein Textbereich. Erinnerst du dich, als wir hier zu dem Auftritt kamen , wann CSS aktiviert werden sollte? Wir hatten den Selektor für den Textbereich, haben aber bei der Erstellung der Newsletter-Anmeldung nur mit Eingaben gearbeitet bei der Erstellung der Newsletter-Anmeldung nur mit Eingaben Wir werden ihn auch verwenden , wenn wir müssen. Wenn wir zur Fields Preview zurückkehren , sollten wir eigentlich zum Erscheinungsbild zurückkehren. Gehen wir zu Bold. Gehen wir zur Schaltfläche „ Abschicken“ von Colors Wir sollten ihr das Gelb geben. Nochmals, kopiere das. Fügen wir es ein. Es sollte 11111 geben. Da haben wir's. Für den Eingabe-Textbereich möchten wir diesen hellgrauen Rand haben. Wir wollen diese etwas dunklere Farbe haben. Der gleiche Fall gilt dann, wenn der Fehler okay ist. Jetzt eine Vorschau ansehen, das ist viel besser. Schließ das natürlich. Denken Sie daran, dass wir gesagt haben, dass Sie das neu anordnen können, wenn Sie beispielsweise möchten , dass der Vorname und die E-Mail-Adresse in derselben Zeile stehen Das können Sie immer tun. Sie haben viel Flexibilität. Jetzt haben wir unseren Shortcode. Ich kopiere den Shortcode, dann gehe ich zurück zu, das ist die Info-Seite und wir sind fertig damit. Ich gehe zurück zur Kontaktseite und sage Hinzufügen. Und ich möchte, dass wir eine doppelte Spalte hinzufügen. Abschnitt, ich wähle das aus, lassen Sie uns den oberen Rand von 100 hinzufügen. Dann fügen wir hier einen Kurzcode hinzu, ein Kurzcode-Element. Fügen wir den Kurzcode genau dort ein, aktualisieren Sie ihn. Lassen Sie uns die Änderungen überprüfen. Da haben wir's. Fügen wir nun den Rand unten hinzu, wählen diesen Container aus, aktualisieren ihn, lassen Sie uns eine Vorschau der Änderungen anzeigen. Ja, da sind ein paar nette Abstände. Jetzt müssen wir auch konsistent sein und ihm diese abgerundeten Ecken geben. Also gehen wir hier natürlich wieder rein, jetzt, wie Sie sich vorstellen können, werden wir uns das Aussehen von benutzerdefiniertem CSS ansehen. Wählen wir den Textbereich Randradius von fünf Pixeln aus. Lass mich das kopieren. Nehmen wir an, die Eingabe muss ebenfalls einen Grenzradius von fünf Scheitelschwellen haben Sehen Sie sich das an. Fantastisch. Und jetzt die Schaltfläche, ich erinnere mich nicht mehr an den Namen der Schaltfläche, den ausgewählten Namen, es war Forminator Submit Kopieren Sie die fünf X. Denken Sie daran, dass wir der Vorschau auch eine Breite von 100% geben sollten Vorschau auch eine Breite von 100% Los geht's, aktualisiere das. Erledigt. Wenn wir jetzt hier hingehen und diesen Shortcode auswählen und das anwenden, was wir gerade im Backend gemacht haben, ist er jetzt sichtbar. Sehen wir uns das in der Vorschau an und schließen wir das. Da sieht unser Formular sehr toll aus. Jetzt bleibt natürlich nur noch, dass wir uns freuen würden, von Ihnen zu hören , dass Sie die Textüberschrift einfügen, das ist eine geringere Summe. Nehmen wir einfach einen Texteditor. Wählen wir den Behälter aus, in dem sie sich befinden , und begründen wir sie in der Mitte. Sie sollten 40 sein. Ja, das ist Monserrat, aber wir wollen, dass es schwarz ist. Die Farbe sollte ebenfalls 111 A sein. Und jetzt werden Sie feststellen, dass wir dieses Akkordeon hier haben Fügen wir also ein Akkordeon und ich denke, ich werde dieses Set von Elements verwenden Ganz genau. Es hat drei Felder. Standardmäßig erweitere ich das und sage: Schicken Sie mir eine E-Mail an restaurant.com Anfragen, Anfragen Anfragen bei restaurant.com Diese Trennung ist zu groß, also halte ich die Umschalttaste gedrückt und drücke die Eingabetaste mir eine E-Mail an restaurant.com Anfragen, Anfragen bei restaurant.com Diese Trennung ist zu groß, also halte ich die Umschalttaste gedrückt und drücke die Eingabetaste, um es in die nächste Zeile zu Wählen Sie die beiden aus. Erweitern Sie das und geben wir ihnen ein paar Kugeln. Das wird eine Kugel. Nein, ich möchte, dass es zwei Kugeln sind. In Ordnung, lass das zusammenbrechen. Erweitere das zweite Telefon. Plus 254-12-3458 254-12-3458 plus 1008002373. 254-12-3458 plus 1008002373. Jetzt können wir sie vielleicht fett machen. Jetzt lassen wir das zusammenklappen und dieses entfernen. Akzeptiere, einfach so. Ich habe das wieder hierher gelegt und die Umschalttaste gedrückt gehalten , um es in die nächste Zeile zu verschieben, einfach so. Jetzt kannst du sie größer oder kleiner machen, wenn du willst. Lassen Sie uns das erweitern. Sie können die Farbe hier ändern, wenn Sie möchten. Mal sehen, Überschrift drei, das ist eine gute Größe. Lassen Sie uns auch diesen Container auswählen und den Abstand 40 einstellen. Aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Da haben wir's. Unsere Kontaktseite ist jetzt fertig. Wir können dieses Akkordeon zusammenklappen. Jetzt sind wir bereit, mit dem nächsten Schritt fortzufahren Wir möchten die Bewegungseffekte auf den verschiedenen Seiten hinzufügen und dann dafür sorgen, dass die Seiten auf verschiedenen Gerätegrößen, Smartphones und Tablets reagieren verschiedenen Gerätegrößen, Smartphones und Tablets Auf einem Desktop sieht es bereits gut aus, also arbeiten wir an diesen beiden Geräten. Wir sehen uns also in der nächsten Lektion. 26. Bewegungseffekte hinzufügen: Jetzt ist es an der Zeit, all diesen Elementen Bewegungseffekte hinzuzufügen . Wenn ich diese Seite neu lade, ist dieser Header, wie Sie sehen können animiert, während er nur sehr steif geladen Lass uns das nochmal sehen. Wie Sie sehen können, wollen wir animieren, damit sie künstlerisch aussehen können Fangen wir mit dieser Seite an und gehen zurück zur Bearbeitung der Startseite Solange wir noch hier sind, können wir sagen, dass wir diesen Container auswählen, in dem der Text zu Erweiterte Bewegungseffekte geht. Sagen wir Verblassen. Ich hüpfe gern nach links, einfach so Dieser andere springt nach rechts. Fortgeschrittene Bewegungseffekte, nach rechts springen, aktualisiere das. Sehen wir uns die Änderungen an. Das ist viel besser , wie Sie sehen können. In Ordnung, jetzt gehen wir zurück zur Galerie-Seite. Dieser hier. Sagen wir, bearbeite mit Elementor Ordnung, wenn wir dieses erste Element auswählen, können wir zu Advanced Motion Effects wechseln Wir können sagen, du kannst mit all den anderen herumspielen, aber ich mag es, hochzuspringen, gefolgt von diesem anderen, der ebenfalls hochspringt Lass uns etwas anderes versuchen. Nach links zoomen Nein, ich zoome nicht gern nach links oder rutsche nach rechts. Dieser andere rutscht nach links. Und dann wird dieser hochspringen. Lass uns das aktualisieren und sehen. Ja, das gefällt mir. Natürlich ist das nicht sichtbar und das ist Teil der Galerie. Es wird einfach zusammen mit der Galerie auftauchen. Gehen wir zur Info-Seite. Lassen Sie mich etwa schließen. Diese Überschriften sollten gelb sein. Ich denke, sie sind besser gelb. Wenn ich die Tabs öffne, die ich gerade geschlossen habe, wenn ich diese goldene Kopie auswähle finde ich , dass sie so besser aussieht. Der gleiche Fall gilt für dieses Update, das jetzt zurück zur Kontaktseite aktualisiert wird, dass ich das schließe. Und jetzt haben wir die Info-Seite ausgewählt. Das kann fortgeschritten sein. Gehen wir zu Bewegungseffekten. Hüpfen, alles klar. Einfach so Im Grunde werde ich einfach weiter mit den Bewegungseffekten herumspielen. Ich glaube, jetzt hast du den Dreh raus. Ich werde hier schnell vorspulen, während ich mit den Bewegungseffekten kreativ werde , aber werden Sie kreativ, probieren all die Bewegungseffekte aus, die wir hier haben , und sehen Sie, was Sie sich einfallen lassen können. Du musst nicht unbedingt das tun, was ich mache. Rutscht hoch. Endlich Leute, ich bin fertig damit, meine eigenen Bewegungseffekte hinzuzufügen. Ich hoffe, Sie haben sich etwas Zeit genommen und kreativ einige nette Bewegungseffekte hinzugefügt Da Sie meinen noch einmal sehen können, lassen Sie mich ihn aktualisieren. Da haben wir's. So gehen wir vor. Genau. Das habe ich auf allen Seiten gemacht. So fügen Sie Ihrer Website Bewegungseffekte hinzu. In der nächsten Lektion, bevor wir die Website auf verschiedenen Geräten responsiv machen, fügen wir nun bevor wir die Website auf verschiedenen Geräten responsiv machen , die Menüfunktion hinzu. Wir sehen uns in Kürze. 27. Bestellsystem einrichten: Jetzt ist es an der Zeit, das Bestellsystem, das Menübestellsystem, hinzuzufügen . Wir werden ein fantastisches Plugin von Oracle namens Gloria Food Jetzt ist dieses Plugin großartig , weil es Ihnen sogar eine App bietet , mit der Sie Bestellungen von Kunden erhalten können Schauen wir uns einfach die Leistung dieses Steckers an. Gehen wir wieder rein, ich will zu den Plugins gehen Füge hier hinzu, ich werde nach Menübestellung suchen. Wir suchen Gloria Food. Wir gehen jetzt. Wir wollen diesen Gloria Food-Plug-In Das hat er gesagt, lass es uns aktivieren. Fantastisch. Also hier haben wir es, und hier ist es, hier klicken. Ich bin froh, dass wir die verschiedenen Schritte unternehmen, die wir unternehmen müssen, um es einzurichten. Sie müssen ein Gloria Food-Konto erstellen. Wie dies vermuten lässt, hatte ich während der Arbeit an dieser Beispielwebsite bereits ein Gloria Food-Konto erstellt während der Arbeit an dieser Beispielwebsite bereits ein Gloria Food-Konto Arbeit an dieser Beispielwebsite Wenn ich mich einfach bei Gloria Food anmelden kann, lass mich das einfach ziehen und hier ablegen So wird Ihre Oberfläche aussehen. Sie können alle Lebensmittel herstellen, die Sie möchten. Wie ich dir in der Projektübersicht gezeigt habe, kannst du alle Lebensmittel kreieren, die du willst, aber du musst zuerst diese Schritte durchführen, du musst, du musst die Grundlagen des Restaurants, die Dienstleistungen und die Öffnungszeiten angeben . Zahlung und Steuerzahlung, Steuern und gesetzliche Verfügungen, Menü, all diese Details. Und dann können Sie dieses automatisierte System genießen. Auf diese Weise kann die App, die Sie aus dem Playstore oder App Store herunterladen, auch aus dem Playstore oder App Store herunterladen feststellen, wer das ist und welche Bestellungen gerade getätigt werden. Lassen Sie mich von diesem Profil abmelden , da ich weitergeleitet werde , um ein neues Konto zu erstellen Weil das ein anderer Domainname ist. Ich möchte mich mit Gloria Food verbinden. Beginnen wir mit der Erstellung eines Gloria Food-Kontos. Mein Restaurant Money. Anfangs nenne ich es Mr. Money Food. Nennen wir es. Lass uns jetzt gehen. Ich benutze eine meiner E-Mails. Vielleicht dieser Vorname, sagen wir natürlich, ich erstelle ein Passwort. Ich verwende einen Passwort-Manager, ich werde dieses Passwort verwenden. Ich richte es nicht für Kunden ein. Erstellen Sie ein Konto, Sie können unsensible Plugin-Daten teilen oder Sie können sich dafür entscheiden, sie nicht zu teilen Wählen Sie dann aus, welche Optionen Sie einrichten möchten. Wie Sie sehen können, haben Sie hier alle diese Optionen außer nur einer Option. Das ist nicht wirklich, wirklich wichtig oder notwendig, aber du kannst dich auch dafür entscheiden, dafür weiter zu bezahlen. Ich möchte dir zeigen, warum dieser Plug In einfach unglaublich ist. Ich habe es kürzlich entdeckt und finde es einfach großartig. Es hat mehr als du brauchst. Sie müssen jetzt zum Gloria Food-Adminbereich gehen , um Ihr Restaurantprofil einzurichten Nach Abschluss der Einrichtung können Sie zurückkommen und die Widgets zu Ihrer Website hinzufügen Jetzt werden wir zum Gloria Food-Konto weitergeleitet. Wie ich bereits erwähnt habe, handelt es sich um eine Oracle-Firma. Es gehört Oracle. Wir haben bereits einige Details vorinstalliert. Jetzt werde ich mein Land nach Kenia ändern, weil ich dort ansässig bin, D Nairobi Geben Sie genaue Details an , denn das ist wichtig. Dies ist ein Unternehmen , das Sie gerade gründen. Ich muss auch die Telefonnummer, den Straßennamen und die Hausnummer angeben . Sagen wir Moy Avenue. Wie Sie sehen können, geht es automatisch in Echtzeit zur Moy Avenue in Nairobi Da sind wir als Nächstes. Nein danke. Sag diese Details nicht. Teilen Sie den Kunden Ihren genauen Standort mit. Ich kann jetzt auf der Karte genau zeigen , wo ich mich in der Moy Avenue Sagen wir gleich nebenan Haus. Webseite des Restaurants. Haben Sie eine echte Website? Ja, wir werden VFX port.com verwenden . Lassen Sie uns das als Nächstes bereitstellen Nun, die Küche, die ich anbieten werde , zeigt mehr. Natürlich können Sie aus all den wählen. Sie können all diese jederzeit bearbeiten. Sie können sogar alle, die Sie hier ausgewählt haben, löschen und Ihre eigenen hinzufügen. Ich füge nur mexikanisches Frühstück hinzu, amerikanisch. Wir haben Chinesisch, mehr Chinesisch, Indisch, Kb Sushi. Ordnung, als Nächstes wählen die erfolgreichsten Restaurants ein bis drei Küchen Oh warte, lass mich den Kebab entfernen. Lassen Sie mich Indisch und Sushi entfernen. Lassen Sie mich auch das Frühstück streichen. Lassen Sie uns jetzt sagen, mexikanisch, amerikanisch und chinesisch. Bestätigen Sie als Nächstes bitte Ihre E-Mail-Adresse. Ich muss meine E-Mail öffnen. Gehen Sie hier hin und bestätigen Sie sie. E-Mail-Adresse validieren. Ich bin jetzt auf meinem anderen Bildschirm. Ordnung. Also, wenn ich wieder hier bin, wird es automatisch bestätigt. Bieten Sie als Nächstes eine Abholung an Ihrem Standort an? Ja, mein Restaurant bietet eine Abholung an. Ja oder nein. Bieten wir Lieferung an? Tun wir. Als Nächstes beginnen Sie mit dem Hinzufügen von Lieferzonen. Hab es. Füge eine weitere Lieferzone hinzu. Wenn Sie darauf klicken, können Sie jetzt Größe ändern, um Ihren Radius zu erweitern Ich hab's. Lassen Sie uns einfach den Radius auf den größten Teil des zentralen Geschäftsviertels von Nairobi ausdehnen. In Ordnung Nehmen wir an, der CBD-Mindestbetrag der Bestellung, die Sie aufgeben möchten. Vielleicht 2000 Liefergebühr, vielleicht 100 Schilling. Wir müssen daraus Schilling machen. Wir werden die Währung ändern. Schließ das. Tischreservierung? Ja, wir bieten Tischreservierungen an. Ich nehme hier die Standardeinstellungen. Auf Bestellung essen? Ja. Wenn jemand vor Ort ist, kann er sofort bestellen. Bieten Sie Bestellungen an? Ja. Als Nächstes erfahren Sie, wie es für Ihre Kunden funktioniert: Ermöglichen Sie es Kunden, Speisen und Getränke zu bestellen, wenn sie an Ihrem Standort sind. In Ordnung. Als Nächstes, wann haben Sie geöffnet, fügen Sie Stunden hinzu. Ich nehme einfach die Standardeinstellung, stelle aber sicher, dass du deine Arbeitszeiten festlegst. Sehen wir uns die Ausnahmen an. Wenn Sie Feiertage haben und all das, was es Kunden ermöglicht, eine bestimmte Bearbeitungszeit anzufordern , ja, Sie können angeben, Mindestzeit im Voraus, 1 Stunde, Höchstzeit im Voraus, vier Tage. Sie können nicht erwarten, eine Lieferung vor Ablauf von 1 Stunde zu erhalten , und sie können nicht erwarten, dass sie ihre Bestellung erhalten, wenn sie sie nach vier Tagen und so weiter erhalten möchten . Ich denke, das ist selbsterklärend. Ich mache einfach als Nächstes weiter. Jetzt können Sie Steuern erheben. Ich sage, dass die Menüpreise bereits Steuern enthalten , weil ich meine Menüpreise mit den Steuern abrechne. Vorab vorinstallierte Umsatzsteuer für die Liefergebühr. Wenn du Steuern auf die Liefergebühr aufschlagen möchtest, vielleicht 16% oder etwas Ähnliches . Zahlungsmethoden, ja, ich akzeptiere Lieferung, Abendessen bei Abholung. Sie können auch Karten akzeptieren, wenn Sie möchten, aber ich finde Bargeld großartig. als Nächstes den Firmennamen Ihre offiziellen Daten ein, Geben Sie als Nächstes den Firmennamen Ihre offiziellen Daten ein, damit Ihr Kunde weiß, wo er kauft. Meine Bistro-Firmenregistrierung. Lassen Sie mich nur diese Details hinzufügen. 00200 Land, Kenia. In Ordnung. Als nächstes können wir meine Allgemeinen Geschäftsbedingungen aus der Vorlage erstellen. Erstellen, das ist vorinstalliert. Wir können auch die Datenschutzrichtlinie erstellen , die anhand dieser Vorlage erstellt wurde. Als Nächstes ist es jetzt an der Zeit , eine App zu installieren. 28. Bestellsystem Mobile App: Installation der App. Nächstes Smartphone. Wenn Sie ein Tablet haben, wählen Sie Tablet aus . Als Nächstes gebe ich meine Nummer ein. Fantastisch. Jetzt haben sie mir eine SMS mit einem Link zum Herunterladen geschickt. Lass mich einfach darauf warten. Ich habe gerade die Nachricht erhalten. Jetzt kann ich auf diesen Link klicken , um die App herunterzuladen. Ich wurde zum App Store weitergeleitet. Nun, natürlich ist es das, was Sie sehen. Wenn Sie mitmachen, haben Sie eine SMS erhalten und können sie jetzt herunterladen , da ich bereits zuvor eine App heruntergeladen hatte. Ich mache einfach weiter und öffne es als Nächstes. Nun, ich weiß nicht, was es mir sagen wird, weil ich es mit einer anderen Telefonnummer heruntergeladen hatte . In Ordnung. Also muss ich mich abmelden , damit ich mich mit einer anderen E-Mail anmelden kann. Ordnung, jetzt heißt es , dass ich die App erfolgreich verbunden habe. Sobald Sie die App öffnen, stellt sie automatisch eine Verbindung her, sodass ich auf Weiter klicken kann. Fantastisch. Das ist nur die App, die den ganzen Lärm macht. Und Sie können diese Nummer des Bestellleiters im Restaurantnetz angeben . Wie Sie sehen, erhalten Sie eine Testbestellung, damit Sie sehen können, was Sie erhalten , wenn Kunden über Ihren Service bestellen. Ordnung. Das ist optional , also kann ich einfach auf Weiter klicken. Jetzt, wo wir das haben, haben Sie Ihr Restaurant eingerichtet. Gehen wir jetzt zurück zu unserer Homepage und schauen wir uns an, was wir haben. Wenn ich hier zum Dashboard zurückkehre und jetzt aktualisiere, ist dies der Einrichtungsassistent, dem wir folgen sollten. Wenn ich sage, Restaurantprofil einrichten, haben wir das natürlich schon getan. Das wird das öffnen. Ja, alles ist schon eingerichtet. Warum wiederholt es das? Und das haben wir bereits getan. Gehen wir einfach die Schritte durch. Nein, das muss ich nicht angeben. Gehen wir zur Menüeinrichtung. Ich gehe einfach direkt zum Menü, das hier eingerichtet ist. Sie können das Restaurantmenü in Zukunft konfigurieren. Sie können es als Nächstes ändern. Alles, was Sie eingeben oder ändern, wird in Echtzeit gespeichert. Ja. Als Nächstes findest du natürlich alles, um deinen Burger individuell zu gestalten Sie können verschiedene Artikel hinzufügen. Sie können all diesen verschiedenen Lebensmitteln und den verschiedenen Lebensmittelgrößen , die Sie haben, zusätzliche Auswahlmöglichkeiten hinzufügen all diesen verschiedenen Lebensmitteln und den verschiedenen Lebensmittelgrößen . Okay. Überspringe das als Nächstes. Ordnung. Also, wenn wir jetzt wieder hierher gehen, sind wir fertig? Nein, noch nicht. Also zurück hierher, ja, wir haben bereits eine Website. Ordnung. Also lass uns diese Schritte noch einmal durchgehen. Ja, wir bieten Bestellungen an. Wir müssen jetzt all diese Schritte noch einmal durchgehen, ich denke, wir überprüfen sie nur . Ja. Alle Einstellungen, die wir ursprünglich vorgenommen haben, sind in Ordnung. Zahlungsmethoden. Das ist okay. Wie Sie sehen können, haben wir diese Zecken die alles bestätigen. Als nächstes, Bestellungen entgegennehmen. Möchten Sie, dass wir Ihr Menü einfügen? Nein, dies ist optional, da Ihnen Gebühr berechnet wird, wenn Sie sich entscheiden, es hochzuladen. Hier können Sie manuell erstellen, es werden keine Dateien hochgeladen. Das ist optional. Lassen wir es dabei. Verlagswesen, mobiler Verkauf, Zahlungen, Online-Zahlungen, das ist ein kostenpflichtiger Service. Laden wir diese Seite neu. Restaurant einrichten. Lassen Sie uns all diese anderen entlassen. Nun, das ist ein bisschen komisch, denn als ich die Referenz-Website eingerichtet habe, habe ich dieselben Schritte im Gloria Food-Dashboard Und das wurde überprüft, nachdem ich all diese Schritte durchlaufen hatte Aber im Moment scheinen mir ein oder zwei Details in der Einrichtung zu fehlen , aber um Zeit zu sparen, glaube ich nicht, dass ich mehr Zeit damit verbringen werde , herauszufinden, welches Detail ich verpasst habe, aber im Moment haben wir alle Details, die wir benötigen um auf unserer Webseite eine Bestellschaltfläche hinzuzufügen. als Teil Ihrer Hausaufgaben Gehen Sie als Teil Ihrer Hausaufgaben auf Youtube und suchen Sie nach dem offiziellen Kanal von Gloria Food Und finden Sie heraus, wie Sie jedes einzelne Detail in Ihrem Gloria Food-Konto einrichten ( Gloria Food-Dashboard ), damit Sie dies überprüfen können Aber wie ich bereits erwähnt habe, haben wir alle Details, die wir benötigen. Und in der nächsten Lektion werden wir die Bestellschaltflächen und die Reservierungsschaltflächen auf unseren Seiten hinzufügen . Wir sehen uns also in der nächsten Lektion. 29. Schaltflächen des Bestellsystems: Jetzt sind wir fast fertig damit. Gehen wir zu den Einstellungen. Jetzt haben wir diese beiden Knöpfe. Wenn ich das kopiere, schauen ob wir es irgendwo hier im Frontend anzeigen können. Das ist die Info-Seite. Lass mich das schließen. Lass uns gleich hier auf die Startseite gehen. Bearbeiten Sie mit Elementor, lassen Sie mich Gloria machen Hier sind wir. Lassen Sie uns genau dort einen Kurzcode hinzufügen. Ich füge den Kurzcode genau dort ein. Dies ist der Kurzcode, den wir von Gloria Food erhalten haben . Da ist er Jetzt, wenn wir diese Seite aktualisieren und auf Vorschau klicken. Können wir das Menü laden, wenn wir darauf klicken? Yami Bistro? Natürlich sind das die Lebensmittel, die wir ausgewählt haben Denken Sie daran, dass Sie jederzeit zurückgehen und diese Lebensmittel herstellen können. Sie können Brokkoli bestellen. Sie können hier wählen, was Sie wollen, Mayo, Knoblauch, Senf. Wenn du spezielle Anweisungen hast, bin ich wirklich hungrig. Und Sie können die Menge wählen. Dann in den Warenkorb legen. Sobald es zur Karte hinzugefügt wurde, können Sie zur Karte gehen und hier Ihre Daten angeben. Wenn Sie diese Schritte hier befolgen, erhalten Sie die Bestellung auf Ihrem Telefon. Sie haben die Möglichkeit , sie sofort anzunehmen. Jetzt ist die Sache so, dass Sie, sobald Sie eine Bestellung erhalten haben, direkt dort eine Benachrichtigung mit der Aufschrift „Erstbestellung“ sehen . Möglicherweise möchten Sie dies bei diesem Kunden telefonisch bestätigen , bevor Sie die Bestellung auf Ihrem Telefon annehmen. Sie auf Akzeptieren klicken, können Sie den Kunden anrufen, da seine Telefonnummer direkt dort auf der Bestellung angezeigt wird. Wie Sie gerade auf Ihrem Telefon sehen können, können Sie natürlich die Telefonnummer sehen, sobald Sie sie anrufen, und bestätigen, ob Sie ihnen sagen möchten , dass sie zahlen sollen, bevor sie eine Bestellung aufgeben Sie können es ihnen bei Ihrem Telefonanruf mitteilen. Und wenn sie dann 50% oder 100% zahlen , können Sie die Bestellung jetzt in Ihrer App annehmen. Ich hoffe das macht Sinn. Nur weil Sie keine Online-Zahlungen akzeptieren können , heißt das nicht, dass Sie einen Kunden, der eine Bestellung aufgegeben hat, nicht anrufen und ihn zur Zahlung bitten können, bevor Sie seine Bestellung in Ihrer App annehmen können. Ich denke, das ist ein sehr gutes System. Wenn Sie einen Webentwickler dafür bezahlen würden ein solches System zu erstellen, wäre das sehr teuer. Aber hier haben Sie eine Website, die voll funktionsfähig ist , und Sie haben auch eine App, eine Handy-App, die voll funktionsfähig ist. Das ist ein hervorragendes System für Ihre Restaurant-Website. Lass mich das schließen. Im Grunde. So macht man das. Oh warte. Bevor wir gehen, möchte ich, dass wir das stylen. Zuerst wähle ich das aus, gehe zum Stil, kopiere diesen Code und gehe dann zurück zu diesem Ort. Personalisieren. Wir können diese Schaltfläche jetzt an die Farbe anpassen , wir können sie auswählen und in X ändern und dann unseren Code genau dort einfügen. Okay, wir können es nicht einfügen. Ich weiß nicht warum. E09 genau einhundert 48 948 48 948 . Jetzt können wir, wir können auch einen Teil dieses Grenzradius hinzufügen. Es waren 50, wie Sie sehen können. Jetzt ist es abgerundet. Wir können ihm eine Polsterung von sagen wir 20 geben, sagen wir. Sie können den Text auch ändern. Was der Text sagt, Set, Menü und Bestellung. Wenn wir nun diese Seite aktualisieren. Da haben wir's. Denken Sie daran , dass ich erwähnt habe, dass dies Platzhalter sind, also sind dies die eigentlichen Schaltflächen, die wir hier verwenden werden Jetzt werden Sie feststellen, dass wir auch diese Elementelemente von Gloria Food haben diese Elementelemente von Gloria Anstatt diese Backend-Schaltfläche zu verwenden, können wir diese Bestellschaltfläche einfach hierher ziehen. Wir wählen diese Kopie und den Einfügestil aus. Lassen Sie uns das jetzt löschen. Jetzt haben wir hier unsere Schaltfläche zum Öffnen des Updates. Wenn wir eine Vorschau der Änderungen diese Schaltfläche jetzt verwenden, funktioniert sie voll und ganz, da es sich um eine elementare Schaltfläche von Gloria hier wieder reingehen, können wir auch einen Reservierungstisch auswählen. Reservierung. Wählen Sie diese Kopie aus, wählen Sie sie aus , klicken Sie mit der rechten Maustaste, fügen Sie den Stil ein und löschen Sie das Update. Sehen wir uns eine Vorschau der Änderungen an. Schauen wir uns jetzt die Reservierungen an. Hier sind wir. Wir können einfach weitermachen und unsere Bestellung aufgeben. Jetzt sind es die gleichen Knöpfe, die ich hier benutzt habe. Das sind Tischreservierungen. Wir können das duplizieren. Ich weiß nicht, was ich hier auf der ursprünglichen Website eingefügt habe. Lass mich nach Hause gehen. Genau hier hatten wir Tischreservierungen. Ja, ich werde hier hingehen und das duplizieren. Trage es, lass es dort fallen. Wählen Sie die Kopie aus, wählen Sie sie aus, klicken Sie mit der rechten Maustaste auf Stil einfügen Dann lösche ich die untere. Sehen wir uns die Änderungen an. Sie können diese Call-to-Action-Schaltflächen auf der gesamten Website wiederholen , da es immer sehr wichtig ist , einen Aufruf zum Handeln zu haben. Nun zum geöffneten Menü, ich glaube, hier hatte ich dieses hier, Duplikat auf einer Landingpage. Sie müssen die Leute zum Handeln aufrufen, und Sie rufen sie zum Handeln auf, indem Sie an strategischen Stellen Schaltflächen hinzufügen . Ich wähle diese Kopie aus, wähle diesen Einfügestil und dann lösche ich das. Jemand wird sich diese wenigen Mahlzeiten hier ansehen. Und dann klicken sie auf Menü und bestellen. Aktualisiere das. Gehen wir hierher und sehen uns das im Aktionsmenü und in der Reihenfolge an. Da haben wir's wieder. Jetzt noch eine Sache, an die ich mich gerade erinnert habe. Diese Schaltfläche sollte zur Info-Seite führen. Wenn ich das auswähle, kann deine URL „Über uns“ angeben. Dann können wir es in einem neuen Tab öffnen und aktualisieren, damit wir die Änderungen überprüfen können. Ordnung, wenn jemand mehr darüber erfahren möchte , warum du dich gesund ernährst, kann er darauf klicken und zur Info-Seite gehen. Was auch immer du da reintun willst. Denken Sie daran, dass wir hier die Schaltfläche für Tischreservierungen haben sollen . Mach einfach weiter und bearbeite diese Seite. Sie können einfach kopieren. Sie können hierher kommen und „Kopieren“ sagen und dann den Button hier einfügen. Das ist eine schnelle Übung für dich, sie ist nicht sehr schwierig, also probiere sie einfach aus. Und ich glaube, das ist alles, was ich jetzt für das Bestellsystem hatte. Ich denke, es ist an der Zeit, die Website auf verschiedenen Geräten responsiv zu machen . In der nächsten Lektion wollen wir uns ansehen, wie das geht. 30. Responsive Header: Jetzt sind wir gerade dabei , den Kurs zu beenden. Die Website sieht schon toll aus. Wir haben die Arbeit am Bestellsystem, dem Reservierungssystem, abgeschlossen , aber wir müssen dafür sorgen, dass die Website auf verschiedenen Geräten fantastisch aussieht. Auf Desktops sieht es bereits gut aus, aber wir müssen sicherstellen, dass es auf Mobiltelefonen und Tablets gut aussieht . Um zu beginnen, drücken wir Control Shift. Strg Shift auf deiner Tastatur. Nur um die Entwicklungstools Ihres Browsers aufzurufen. Ich benutze jetzt Chrome. So sieht es auf dem Samsung Galaxy aus. Schauen Sie sich das an, wie Sie hier sehen können, ist unser Menü. Wenn ich klicke, sieht es sehr hässlich aus. In Ordnung, es ist ein bisschen schwierig, hier damit zu arbeiten. Lassen Sie mich einfach zu Responsive übergehen, damit wir das erweitern und zurückgehen können. Im Grunde sieht es so aus, wie Sie sehen können. Hier ist mein Menü, Togo, hier ist mein Logo. Die Website sieht nicht besonders toll aus. Als erstes möchten wir den Header responsiv machen, die Nap-Leiste und das Logo hier wechseln. Ich möchte mit der Maus darüber fahren und meinen Header sagen. Das bringt uns zu dem Ort, an dem wir den Header bearbeiten können Hier sind wir jetzt, zuerst klicke ich auf dieses Symbol für den responsiven Modus und dann wechsle ich zu Mobiltelefonen. Wie Sie sehen können, denken Sie daran, dass sie sich in diesem Container befinden, der sich in diesem anderen Container befindet. In diesem Container nehmen beide 100% der Breite Wenn Sie sich diesen kleinen Behälter ansehen, der das Logo enthält, es 100% und diese 100%. Was ist, wenn wir das Logo auswählen, zurück ins Layout gehen und Prozent sagen und es 30% einnehmen lassen. Lassen Sie uns das jetzt auch auswählen, es sollte den verbleibenden Platz einnehmen Ich glaube, 70% wählen zu Prozent Zellen aus. Wie Sie sehen können, ernähren sich 70% nicht. Wenn ich es kleiner mache, wird es so weit nach oben geschoben, wo es hinpasst. Denk an 60 oder so. Lass uns das auswählen. Zuallererst sollte das 100% ausmachen. In Ordnung, lassen Sie uns das für eine Sekunde aktualisieren. Lassen Sie mich diesen Container auswählen, dem sich die beiden befinden. Lassen Sie uns die Ränder und die Polsterung durchbrechen. Lassen Sie mich den Container auswählen, der das Menü enthält. Lassen Sie uns sehen, ob 64% das okay sind. Damit bin ich einverstanden. In Ordnung, also los geht's. Wenn wir jetzt hierher zurückkehren und diese Seite aktualisieren und zu Samsung Galaxy 8 wechseln . Lassen Sie uns das noch einmal aktualisieren. Ordnung, es scheint, dass wir diese Kontrolle beeinflusst haben . Dieser Container, der diese beiden Container enthält, muss zu 100% belegt sein. Gehen wir jetzt wieder rein und drücken Shift R auf Hard Refresh. Oh warte, ich glaube, es liegt an diesem Text hier , wie du sehen kannst. Lassen Sie uns zunächst zur Startseite zurückkehren. Lass uns zum Handy wechseln. Lassen Sie mich diesen Typografie-Stil auswählen , verkleinern, aktualisieren und dann die Seite überprüfen Fantastisch. Ja, es war die Größe des Textes, die dazu führte, dass er die Hälfte einnahm, weil der Text draußen überlief Wir können das auch kleiner machen. Ich kann das nicht auswählen. Lass mich einfach aktualisieren, weil. Der Header wurde in diesem Editor nicht wirksam. In Ordnung, lassen Sie uns noch einmal in den responsiven Modus wechseln. Wie Sie jetzt sehen können, sieht es fantastisch aus. Und ich kann das auswählen, Weltklasse kann es auch kleiner machen. Wir können die Einstellungen dafür erhöhen, oh warte mal, die Marge. Bei den leckeren Gerichten können wir das zurücksetzen, hier wieder reinkommen und die Größe erhöhen, aber auch die Zeilenhöhe verringern. Aktualisiere das. Ordnung, lassen Sie uns jetzt weitermachen und zu den Header-Einstellungen wechseln. Dieses Element auswählen. Das Element. Gehen wir in den Menü-Wrapper. Bevor wir irgendwohin gehen, ändern wir den Burger-Stil, den Hamburger-Stil Wie Sie sehen können, haben wir den Hamburger und schließen, das ist der Hamburger Tog, das geschlossene Togo ist das Lassen Sie uns zunächst diesen Hintergrundtyp ändern . Lass es uns farbig machen. Geben wir ihm das Gelb, das Gold, indem wir das Exemplar auswählen, das einfach so ist , wenn man mit dem Mauszeiger darüber fährt Zuallererst wollen wir auch nicht, dass es eine Grenze hat. Wir wollen, dass der Hintergrund auf diese Weise weiß wird. Aber jetzt wollen wir, dass die Farbe des Symbols schwarz ist. Diese inneren Linien aktualisieren das. Wenn wir jetzt wieder reingehen und das zurücksetzen. Aktualisiere das. Da haben wir's. Lassen Sie uns nun dieses Menü erweitern. Für den Menü-Wrapper. Oh warte, wir sollten jetzt diesen Prozentsatz haben. Wir können ihn erhöhen oder verringern, weil wir nicht möchten, dass er den gesamten Bildschirm einnimmt Jetzt können wir ein Logo für Mobilgeräte hinzufügen. Zurück zum Inhalt Logo für das mobile Menü. Fügen wir dort unser Logo hinzu. Da haben wir's. Wenn wir jetzt darauf klicken, hat es dieses Logo, aber es sieht gestreckt aus. Wenn wir also zurück zum Stil zurückkehren, kann die Breite des Logos für mobile Menüs die Breite verringern oder vergrößern . Und die Höhe. Ich glaube, ich mag es wie diesen Menü-Wrapper. Machen wir es mobil. Menühülle, Hintergrund schwarz. Reduzieren Sie den Menü-Wrapper. Stil des Menüeintrags. Ändern wir es auf weiß. Wenn Sie den Mauszeiger darüber bewegen, sollte es diese goldene Farbe haben, wenn es aktiv ist, und es sollte auch diese goldene Farbe haben Lassen Sie uns nun mit dem geschlossenen Togo-Hamburger abschließen. Wir haben das geschlossene Togo, die Symbolfarbe Aber jetzt der Hamburger, der Hintergrundtyp, diese goldene Können wir ihn ausrichten? Schnelle Beobachtung, genau hier. Bei der Bearbeitung dieses Videos wurde mir klar, dass wir, anstatt zu versuchen, es links auszurichten , die Breite dieses Menü-Wrappers hätten vergrößern sollen , damit sie von links nach rechts ausgerichtet werden können , genau so Gehen Sie also zur Breite des Menü-Wrappers. Und lassen Sie uns das mit erhöhen, bis zu diesem Punkt sind sie jetzt nebeneinander Lassen Sie uns es bis zu diesem Punkt sogar etwas breiter machen. Dann lass uns aktualisieren. Wie ich bereits erwähnt habe, nehme ich dieses Update auf, während ich diese Lektion bearbeite. Das heißt, ich hatte den Rest dieser Lektion bereits aufgenommen und die restlichen Lektionen und das Menü sind fertig. Die restlichen Lektionen werden immer noch in dieser Größe und mit dieser falschen Ausrichtung Aber mach dir keine Sorgen. Wenigstens weißt du jetzt, was zu tun ist. In Ordnung, wir können es nicht nach links ausrichten. Sagen wir einfach aktualisieren, aktualisieren Sie das, indem Sie darauf klicken, dass das Menü geöffnet wird. Nun, das ist natürlich nicht auf der endgültigen Website , die der Benutzer sieht, vorhanden . Das ist für dich als Administrator, deshalb abstrahiert es das Im Grunde genommen ist das so, wie man den Header so einrichtet, dass auf verschiedene Geräte reagiert Ich werde in den Tablet-Modus wechseln . Wie Sie sehen können, sieht es natürlich nicht so toll aus. Warte, lass uns zum Tablet wechseln. Genau hier in den Header-Einstellungen möchte ich diesen Container auswählen und ihm auch 100% geben. Jetzt bleiben sie dort. Aktualisieren. Jetzt müssen wir die gleichen Einstellungen für die Tablet-Version wiederholen. Beginnen wir mit dem Logo des mobilen Menüs. Lassen Sie uns die Breite reduzieren. Ich denke, das ist eine gute Größe. Das sieht gut aus, aber machen wir es schwarz. Wir wollen zum Menü-Wrapper gehen und ihn schwarz machen. Dann sollte die Stilfarbe der Menüelemente weiß sein. Wenn er schwebt, sollte er das Gold sein . Einfach so Aktualisiere. Vorschau. In Ordnung, wir uns gleich hier eine Vorschau an. wir sicher, dass wir es auf dem iPad Mini ansehen . Da haben wir's. So können wir das Logo nur geringfügig vergrößern. Wenn ich das Bildelement auswähle, kannst du die Breite erhöhen, vielleicht bis zu diesem Punkt, das aktualisieren. Dann können wir das aktualisieren und sehen, wie es genau aussieht. Ich glaube, mir gefällt, wie es jetzt aussieht. So macht man den Header auf verschiedenen Geräten responsiv. In der nächsten Lektion machen wir den Rest der Seite responsiv. Wir sehen uns in Kürze. 31. Responsive Startseite: Jetzt sind wir gerade damit fertig, den Header responsiv zu machen. Ich werde diesen Editor schließen. Jetzt haben wir nur noch die Startseite. Denken Sie daran, dass dies die Startseite ist. Jetzt drücke ich Strg R, um diese Seite so zu aktualisieren, dass sie den neuen Header wiedergibt. In Ordnung, da haben wir's. Jetzt wechseln wir in den Responsive-Modus. Wechseln wir in den Tablet-Modus. So sieht die Website auf Tablets aus. Wenn ich die Texte auswähle, können sie in den Stil passen, die Größe so reduzieren. Ich finde, so sieht es toll aus. Ich möchte auch den Container auswählen, der das alles enthält. Gehen Sie zu „Erweitert“ und geben Sie ihm, solange es verknüpft ist , einen Abstand von 20 Runden Fantastisch. Lassen Sie uns als Nächstes dazu übergehen. Ich möchte s, wählen wir das aus, gehen wir zum Stil der Typografie Machen wir es 40 groß. Lassen Sie uns die Größe auf 1,1 reduzieren. Wir können diese Lücke auch auf 30 reduzieren. Sagen wir 20 pro Runde. Wir können ihm eine Polsterung von 20 geben. Wählen Sie diesen Container aus und wechseln Sie rundum zu Advanced 20. Ich finde es sieht toll aus, so wie es ist. Aber aus Gründen der Einheitlichkeit wollen wir 40 machen . Lassen Sie uns hier dasselbe wiederholen, 20 rundum jetzt rechts und links, aber 100 rauf und runter, 2.200 100 unter 20, Im Moment sind es 100, die so sind. Lassen Sie uns das hier wiederholen. Rundum fortgeschritten 20. Avast, entferne das. Link 2.120, 100, 20 Rundum-Update, das eine Vorschau der Änderungen anzeigt Ich finde, es sieht auf dem Tablet fantastisch aus. Wenn wir jetzt zu mobilen Bildschirmen wechseln, sieht es so aus. Ich denke, es sieht schon gut aus wenn die Tablet-Einstellungen gerade über den Handyeinstellungen angewendet wurden. Gehen wir wieder rein und wechseln wir zu Samsung Galaxy. So sieht es auf einem Samsung aus. Ich finde es sieht toll aus. Aber jetzt haben wir nicht an dem Foto gearbeitet, also lass uns weitermachen und das machen. Ich finde, es sieht toll aus. Jetzt machen wir das Foto natürlich separat. Ja, lass uns das Foto separat machen. Nennen wir das eine Lektion. Wir sehen uns in Kürze. 32. Responsive Footer: Wie Sie bemerkt haben, sieht die Landingpage jetzt fantastisch aus, bis auf das Essen Lassen Sie uns jetzt etwas gegen die Lebensmittelumstellung unternehmen. Lass uns da nicht hingehen. Klicken wir einfach mit der rechten Maustaste hier und öffnen verlinkenden neuen Tab, um die Landingpage in einem neuen Tab zu öffnen. Lassen Sie uns jetzt natürlich mit der Maus darüber fahren und auf Meine Lebensmittel klicken, weil wir jetzt an dem Essen arbeiten wollen Weil wir damit fertig sind, werde ich es schließen Das ist unsere Geräteansicht. Hier ist unser Foto, bereit für die responsive Bearbeitung. den responsiven Modus auswählen, wechseln wir in den Tablet-Modus, und so sieht es aus. Zuallererst möchte ich das Logo auswählen und es zu 100% machen. Ich möchte auch den Behälter auswählen, in dem sich alle und ihm 100 geben, obere 20 Seite 120. Aktualisiere das. Ich denke, es sieht auf mobilen Bildschirmen gut aus. Lass mich das etwas kleiner machen, damit es so passt. So sieht es auf Tablets aus. Wechseln wir zu mobilen Bildschirmen. So aktualisiere ich das. Aber wir müssen diese auswählen und sie in die Mitte legen. Aktualisiere das. Wenn wir nun zu dieser Aktualisierung wechseln, fangen wir ganz oben an. Das ist die Spitze. Scrollen Sie nach unten. Okay, wir können das in die Mitte legen, aber wir können es auch dort lassen Da sich diese anderen jedoch in der Mitte befinden, sollten sie zusammen mit der Taste ebenfalls zentriert sein. Das machen wir bis zum Fuß. Es sieht alles gut aus, aber jetzt sind wir mit dem Fuß unten. Aber bevor wir fertig sind, lassen Sie mich nur Vorschau sagen. Klicken Sie auf das Logo, um zur Startseite zu gelangen, bearbeiten Sie es dann mit Elementor, wechseln zum Handy und scrollen Sie dann hier nach unten, wählen Sie den Text richten Sie ihn mittig Dieser Text ist ebenfalls in der Mitte ausgerichtet. Und der Button geht auch in die Mitte. Alles andere ist mittig ausgerichtet. Wenn ich mir die Control-Shift-Funktion in der Vorschau ansehe, finde ich, dass sie jetzt fantastisch aussieht. So macht man die Fußzeile responsiv. Einheitlichkeit haben wir diese Anpassung auch an der Startseite vorgenommen Einheitlichkeit haben wir diese Anpassung auch an der Startseite Und das ist das Ende dieser Lektion. Nun zu einer kurzen Übung, denn Sie haben gesehen, wie wir es geschafft haben , die Startseite, die Landingpage sowie die Kopf - und Fußzeile responsiv zu gestalten Landingpage sowie die Kopf - und Fußzeile responsiv - und Fußzeile Jetzt möchte ich dir eine kurze Übung geben. Es liegt an Ihnen, den Rest der Seiten nach den gleichen Prinzipien responsiv zu gestalten, die wir für die Responsive-Gestaltung der Startseite verwendet haben. Das ist eine kurze Übung, an der Sie teilnehmen können um zu sehen, ob Sie diese Website fertigstellen können Wir haben die schwierigsten Teile bereits erledigt, jetzt ist dies nur der einfache Machen Sie also weiter und beenden die Seiten „Über uns“, „Galerie“ und „Kontakt Vor diesem Hintergrund muss ich einige wichtige Dinge hinweisen. Also, wir sehen uns in der letzten Lektion. 33. Schlussgedanken: Ich möchte mir einen Moment Zeit nehmen und Ihnen zum Abschluss dieses Kurses gratulieren , falls Sie noch hier sind. Nach all diesen Lektionen bedeutet das, dass Sie es wirklich ernst meinen , zu lernen, wie man Websites mit Wordpress erstellt , oder dass Sie Ihrer Restaurant-Website wirklich ernst meinen. Die Tatsache, dass Sie hier sind, bedeutet, dass Sie mit der Erstellung Ihrer Website fertig sind. Und ich möchte mich nur bei Ihnen dafür bedanken, dass Sie sich entschieden haben, von mir zu lernen. Wenn Sie mich zum ersten Mal sehen, habe ich natürlich noch viele weitere Kurse, an denen Sie teilnehmen können indem Sie einfach mein Profil hier auf Skillshare besuchen. Sie werden lernen, andere Arten von Websites zu erstellen , und Sie können Ihre Wordpress-Kenntnisse drastisch verbessern . Vor diesem Hintergrund möchte ich auch darauf hinweisen, dass es sich bei der von uns erstellten Website nicht um SEO handelt. Optimiert. Seo bedeutet Suchmaschinenoptimierung. Und das bedeutet, Ihre Website für Suchmaschinen wie Google sichtbar zu machen . Und wenn Leute zu Google gehen und nach Restaurant-Websites in ihrer Nähe suchen, sollte Ihre Website in den Suchergebnissen erscheinen können . Andernfalls sind Sie einfach unsichtbar und erhalten nicht den Traffic, den Sie für das Wachstum Ihres Unternehmens benötigen. Deshalb müssen Sie lernen, wie Sie Ihre Website für Suchmaschinen sichtbar machen können. Die gute Nachricht ist, dass ich hier einen umfassenden Kurs oder Kurs zum Thema Skillshare habe hier einen umfassenden Kurs oder Kurs , den Sie sich ansehen können , um zu lernen, wie Sie Ihre Website optimieren können. Wir behandeln alles, was Sie über Wordpress und SEO wissen müssen . Und das heißt, wenn Sie den Kurs beenden, werden Sie Ihre Website optimiert haben. Noch eine Sache, ich möchte dich nur um einen schnellen Gefallen bitten , der weniger als 1 Minute dauern wird. Es dauert ungefähr 40 Sekunden. Würden Sie sich bitte einen Moment Zeit nehmen und eine Bewertung dieses Kurses hinterlassen? Bitte teilen Sie mir mit, was Sie von dem Kurs halten. Was hat dir daran gefallen? Sie werden auch anderen potenziellen Schülern mitteilen, was sie von diesem Kurs erwarten können. Eine weitere Sache, die passiert, wenn Sie eine Bewertung hinterlassen , ist, dass der Skillshare-Algorithmus die verschiedenen Bewertungen berücksichtigt , die für jede Klasse abgegeben wurden, und bestimmt, ob die Klasse mehr Schülern gezeigt werden soll Sie werden dazu beitragen, dass dieser Kurs für mehr potenzielle Schüler, die nach solchen Inhalten suchen, die mir viel bedeuten, sichtbarer mehr potenzielle Schüler, die solchen Inhalten suchen wird Schauen Sie einfach unter diesem Videoplayer Dort finden Sie eine Rezension- oder Feedback-Schaltfläche , mit der Sie Ihr Feedback hinterlassen können. Lass mich wissen, wie ich abgeschnitten habe und ich werde das wirklich, wirklich zu schätzen wissen. Andernfalls ist das das Ende der Sache.