Erstellen Sie eine persönliche Marken-Website mit Elementor & WordPress (KOSTENLOSE Plugins)

1. Einführung: Und willkommen zurück zu einem weiteren großartigen Elementor-Kurs mit mir, Ken In diesem Kurs lernst du Elementor kennen, indem du eine einseitige persönliche Marken-Website erstellst, um deine professionellen Dienstleistungen bei potenziellen Kunden zu bewerben zu Das Ziel ist es, Ihnen Elementor beizubringen, aber wir werden es praktisch machen Wir werden mit einer schwarzen WordPress-Installation beginnen und sie schrittweise in eine vollständige, voll funktionsfähige, responsive Website umwandeln Nun, die Idee hinter diesem Kurs ist sehr einfach. Anstatt Ihnen zufällige Elementor-Widgets, Elemente und Funktionen beizubringen , werden wir Elementor verwenden, um praktisch eine echte Website zu erstellen , mit der Sie sich, Ihre Arbeit und Ihre Dienste online präsentieren können Ihre Arbeit und Ihre Dienste online Das bedeutet, dass wir die Seite Abschnitt für Abschnitt erstellen, einschließlich eines Heldenbereichs, einer Navigationskopfzeile, die beim Scrollen oben bleibt , wenn Sie einen Servicebereich, einen Portfolio-Bereich, Portfolio-Bereich, Testimonials, ein Kontaktformular Wir stellen außerdem sicher, dass alles auf Desktop-, Tablet- und Mobilgeräten ordnungsgemäß aussieht und funktioniert und Während des gesamten Kurses werde ich Sie Schritt für Schritt durch den gesamten Prozess führen, einschließlich der winzigen Details, die dazu beitragen, aus einer einfachen WordPress-Seite etwas zu machen einer einfachen WordPress-Seite , das sich professionell anfühlt. Am Ende dieses Kurses wirst du ein tieferes Verständnis von WordPress und Elementor haben und eine komplette Website du weiter anpassen kannst Wenn Sie ein Freelancer, Designer, Kreativer oder Dienstleister sind und eine persönliche Website für sich selbst erstellen möchten , lassen Sie mich Ihnen zeigen, wie das mit Elementor geht Also, wenn du dich darauf freust, loszulegen, lass uns gehen. Wir sehen uns in der nächsten Lektion. 2. Projektübersicht: Willkommen zurück. Deshalb möchte ich dir nur genau zeigen, was du in diesem Kurs kreieren wirst. Das ist dein Klassenprojekt. Also lass mich die Seite aktualisieren. Also, wie Sie sehen können, haben wir einen Heldenbereich mit dieser schönen Eingangsanimation. Wir werden sehen, wie das geht, wenn wir nach unten scrollen. Wir haben diesen Zählerbereich. Wir haben einen Servicebereich. Bereich „Frühere Arbeiten“, in dem du einige deiner bisherigen Arbeiten vorstellen kannst. Jemand kann darauf klicken, um mehr von deiner Arbeit zu öffnen. Wie Sie sehen können, öffnet sich Ihr Portfolio, wenn Sie darauf klicken . In diesem Fall öffnet es mein Portfolio auf Kundenreferenzen von hands.net-Kunden Sie können eine Zeit festlegen, wie schnell oder langsam diese gescrollt werden sollen Der Besucher kann auch manuell navigieren oder scrollen, um die verschiedenen Testimonials zu lesen Dann haben wir einen Bereich „ Buchen Sie mich“ oder „ Kontakt“, in dem der Benutzer einen Dienst auswählen kann, vielleicht sogar zwei Dienste, und dann das Projekt so klar wie möglich beschreiben, dann seinen Namen und seine E-Mail-Adresse angeben und dann ein Angebot anfordern Wenn Sie dieses erhalten, können Sie es lesen und sich dann mit ihnen in Verbindung setzen oder sie per E-Mail kontaktieren, um weitere Informationen zu erhalten. Und dann haben wir eine Fußzeile. Der Betrachter kann auch darauf klicken , um Ihre Arbeit erneut zu öffnen Wenn wir zurück zum Anfang gehen, weil es sich um eine einseitige Website handelt, navigieren diese Links innerhalb dieser Seite, aber zum rechten Bereich Wenn ich also auf Dienste klicke , gehe ich zum Servicebereich Portfolio Es geht zum vorherigen Arbeitsabschnitt. Kontakt, es geht zum Kontaktbereich. Ich gehe zurück nach oben. Wir haben hier auch eine Schaltfläche für Dienste. Wir geben dem Besucher nur so viele Handlungsaufforderungen wie Unser Ziel ist es, dass sie auf Schaltflächen klicken und dann die von uns gewünschte Aktion ausführen können Das ist also ein kurzer Überblick darüber, was Sie in diesem Kurs erstellen werden. Jetzt können wir loslegen und mit der Arbeit daran beginnen. Also wir sehen uns in der nächsten Lektion. 3. Installieren von WordPress: Es ist Zeit, WordPress zu installieren. Und das geht über das C-Panel. Jeder WordPress-Webhost stellt Ihnen ein C-Panel zur Verfügung, mit dem Sie WordPress installieren können. Finden Sie heraus, wie Sie je nach Webhost zu Ihrem C-Panel gelangen . Also werde ich auf Gehe zu C Panel klicken. Also hier sind wir im C-Panel. Und einer der Tabs im C-Panel wird der Sof Tacular Apps Installer sein , der WordPress enthält Klicken Sie also einfach auf WordPress. Und du wirst direkt hierher gebracht , wo du WordPress installieren kannst. Also werde ich hier auf Jetzt installieren klicken, wir müssen eine URL auswählen. Nun, da Sie einen Domainnamen gekauft haben, wird er hier aufgelistet. Wenn Sie mehrere haben, werden sie in diesem Drop-down-Menü angezeigt. Und noch etwas, ich wähle gerne dieses Präfix, https www dot, dein Domainname. Wenn ich also nach draußen klicke, wird geprüft, ob ich ein SSL-Zertifikat habe. Wenn ich kein SL-Zertifikat habe, wird es mit HTTP oder HDTP funktionieren Stellen Sie also sicher, dass Sie über ein SSL-Zertifikat verfügen, um Besuchern mitzuteilen, dass Ihre Website sicher ist Füge hier nichts hinzu. Ihre Website wird also www dot Ihre Domain Dot Ihre Erweiterung sein . Geben wir der Website einen Namen. Ich nenne es Alex Dow. Professioneller visueller Designer. Es ist eine Portfolio-Website. Dies sind die Anmeldeinformationen Sie benötigen, um sich direkt bei WordPress anzumelden, anstatt das C-Panel zu verwenden. Stellen Sie also sicher, dass Sie diese irgendwo sagen. Ich kopiere sie einfach und öffne einen Notizblock, füge das genau dort ein, kopiere das Passwort Sie müssen diese E-Mail nicht kopieren, aber ich werde sie trotzdem kopieren . Das musst du nicht kopieren. Und Sie werden einige vorgewählte Plugins haben , die je nach Webhost mit Web Press installiert werden . Manche Webhoster haben diese nicht. Ich brauche also keine davon, um sie alle zu überprüfen. Wenn Sie Advance nutzen, möchten Sie vielleicht die Datenbank-Backups ändern , die von Ihrem Webhost wöchentlich aufbewahrt werden. Normalerweise ändere ich das nicht, ich belasse es einfach auf der Standardeinstellung. Das sind also die einzigen Einstellungen Sie sich wirklich ansehen müssen. Dann klicke ich auf die Installation. Da haben wir's. Also ist WordPress jetzt erfolgreich installiert und wir haben die administrative URL. Wenn wir darauf klicken, wird das WordPress-Dashboard Ihrer Website aufgerufen. Wie Sie sehen können, sind wir hier. Die Website, die wir erstellt haben, war Alex Doe. Ja, herzlichen Glückwunsch. Du hast WordPress installiert. Merken Sie sich jetzt die Anmeldeinformationen, die wir gerade in diesen Notizblock eingegeben Wenn wir uns von dieser Website abmelden, werden wir nach den Anmeldeinformationen gefragt Dort werden wir das verwenden, kopieren und den Benutzernamen und das Passwort einfügen. Füge das ein. Erinnere dich an mich. Dann lass uns einloggen. Und da haben wir es. So installiert man also WordPress. Und jetzt sind wir bereit, mit dem nächsten Schritt fortzufahren , der Installation eines WordPress-Pins. Wir sehen uns in Kürze. 4. Installieren eines WordPress-Themes: Wenn WordPress installiert ist, ist es Zeit, unser WordPress-Theme zu installieren. Gehen wir also zu den Themen für das Erscheinungsbild. Und ich gehe zu Neu hinzufügen. Dies sind die Standardthemen, die mit jeder Installation von Wordpress geliefert werden. Jetzt sind wir im Jahr 2026, aber das neueste aktive Ding, das standardmäßig in Wordpress enthalten ist, ist 2025 Es scheint, dass sie 2026 kein neues erstellt haben. Also werde ich einfach Ding hinzufügen sagen, weil wir ein benutzerdefiniertes Ding namens Astra verwenden wollen ein benutzerdefiniertes Ding namens Astra verwenden Dies ist eines der besten Dinge Sie jemals in WordPress verwenden können. Also sage ich installieren, aktivieren. Und jetzt ist Astra aktiv. Dies sind nur Werbung von ihnen. Schließ das. Und so ist Astra jetzt unser aktives Thema. nun in der nächsten Lektion Lassen Sie uns nun in der nächsten Lektion einen Lamentor installieren Wir sehen uns in Kürze. 5. Elementor installieren: Jetzt ist es an der Zeit, Elementor zu installieren, das Plugin, das wir als Drag-and-Drop-Seitenersteller verwenden wir als Drag-and-Drop-Seitenersteller Gehen wir also zu den Plugins. Lassen Sie uns zunächst einfach auf Plugins klicken, um die Liste der Standard-Plugins zu sehen , die mit jeder Installation von WordPress geliefert werden. Und das ist dieses Chisme und Hello Dolly. Ich wähle einfach alle aus und lösche sie dann. Bewerben. Wir brauchen sie nicht. Dann sage ich Plugin hinzufügen. Lass uns hier nach Elementor suchen. Es wird mit mehr als 10 Millionen aktiven Installationen die erste Wahl sein mit mehr als 10 Millionen aktiven Installationen Ich sage jetzt installieren. Lass uns weitermachen und es aktivieren. Und jetzt ist Elementor auf unserer Website aktiv. Sobald du es installiert hast, wirst du diesen Elementor hier sehen diesen Elementor hier Aber du musst nicht reingehen und etwas ändern. Wir müssen uns nicht damit anlegen. Gehen wir jetzt zu den Seiten. Wir haben hier einige Standardseiten. Ich werde sie löschen, also wähle sie alle aus und verschiebe sie in den Papierkorb. Wende das an. Lassen Sie uns nun in der nächsten Lektion von der Indizierung abraten. Ich werde Ihnen in Kürze sagen, was es ist. 6. Indexierung verhindern: Bereit, mit dem Aufbau unserer Website zu beginnen. Aber es gibt eine Sache, die wir sicherstellen müssen , bevor wir fortfahren, nämlich Suchmaschinen davon abzuhalten, die Website so zu indexieren, wie sie ist die Website so zu indexieren, wie sie Google, Bing und andere Suchmaschinen schicken ihre Spider oder ihre Bots neuen Websites zu suchen und sie zu ihrer Datenbank hinzuzufügen , um sie den Menschen zur Verfügung zu stellen Sie möchten nicht , dass Google Ihre Website noch nicht verfügbar macht , weil Sie sie noch nicht erstellt haben Das wirkt sich also negativ auf Ihre Suchmaschinenoptimierung aus. Deshalb möchten wir den Suchmaschinen sagen, diese Website noch nicht indexieren sollen. Sie ist noch nicht bereit für die Öffentlichkeit. Gehen wir also zu den Einstellungen, lesen und Suchmaschinen davon abhalten, diese Site zu indizieren Und lass uns die Änderungen speichern . Da haben wir's. In der nächsten Lektion beginnen wir nun mit dem Aufbau unserer einseitigen Website. Wir sehen uns in Kürze. 7. Erstellen einer einzelnen Webseite: Jetzt ist es an der Zeit, dass wir unsere einzige Webseite erstellen. Gehen wir also zu Seiten. Und denken Sie daran, dass wir die beiden Standardseiten, die mit Webpress geliefert wurden , gelöscht die beiden Standardseiten, die und gelöscht haben. Wir brauchen sie nicht Sagen wir einfach, lassen Sie uns das zuerst loswerden und eine Seite hinzufügen. Geben wir ihm einen Namen. Ich nenne es einfach Zuhause. Lassen Sie uns diese Vorlage zunächst als vollständige Webseite einrichten. Und jetzt, wo wir damit fertig sind, gehen wir darauf ein und übrigens, das ist, dass diese Vorlageneinstellung eine elementare Einstellung ist Es ist keine WordPress-Einstellung, nur so nebenbei Gehen wir nun zu den Astro-Einstellungen, und für den Container wollen wir einen Container mit voller Breite Seitenleiste, wir wollen keine Seitenleiste, also keine Seitenleiste. Und diese Elemente müssen wir deaktivieren. Bevor ich sie deaktiviere, wollen wir diese Webseite veröffentlichen und sehen, was sie sind. Also sage ich veröffentlichen. Und jetzt, wenn wir die Seite auf einem neuen Tab ansehen, lass mich das hier schließen. Dies ist der Header hier , weil es sich um ein Astra-Thema handelt. Es kommt mit Standard-, Kopf- und Fußzeile und was ist das andere Ding, Bannerbereich Hier gibt es standardmäßig einen Bannerbereich. Wir wollen keine davon, weil wir diese Seite mithilfe der Drag-and-Drop-Funktionen von Elementor von Grund auf neu erstellen möchten diese Seite mithilfe der Drag-and-Drop-Funktionen von Elementor von Grund auf neu mithilfe der Drag-and-Drop-Funktionen von Elementor von Gehen wir also wieder rein und deaktivieren sie alle und speichern sie dann. Ist es gespeichert? Ja, schauen wir uns die Seite an. Und jetzt ist es eine leere Leinwand. Also lassen Sie uns all diese schließen. Und jetzt, da unsere Seite erstellt wurde, kehren wir zur Liste der Seiten zurück, die wir haben. Und wie Sie sehen können, haben wir die Homepage hier. Eine andere Sache, die wir tun möchten , ist , dass wenn Sie die Domain einer Website besuchen, sie auf die Homepage gehen sollte. Wenn wir also jetzt die Domain nehmen, kopieren, einen neuen Tab öffnen und das einfügen, entspricht das Ihrer Domain.com oder.net, Wenn du jetzt dorthin gehst, gibt es eine andere Dies ist nicht die Standardseite, die wir wollen. Wir möchten, dass die Seite, die wir gerade erstellt haben, das Ziel unserer Domain ist. Also müssen wir WordPress mitteilen, welche Seite wir zu unserer Standard-Homepage machen möchten. Gehen wir also zu den Einstellungen und lesen. Auf der Startseite werden derzeit Ihre neuesten Beiträge angezeigt. Deshalb sehen wir das. Aber wir wollen nein sagen, lass uns eine statische Seite als unsere Homepage wählen. Welche Homepage? Das ist unsere Homepage. Die Seite, die wir gerade erstellt haben, Änderungen speichern. Und wenn wir das jetzt neu laden, verweist die Root-Domain auf unsere leere Seite, die wir mit unserem Design füllen Also ich denke, wir werden hier aufhören. In der nächsten Lektion beginnen wir nun mit der Erstellung unseres Heldenbereichs. 8. Erstellen eines Heldenbereichs: Jetzt sind wir hier auf der Referenz-Website. Ich möchte nur, dass wir den Heldenbereich sehen , den wir erstellen werden. So sieht es aus. Also, wie machen wir das? Lass uns zu unserem Projekt wechseln. Gehen wir jetzt zu den Seiten und wir haben Elementor installiert, aber wir haben daraus keine Elementor-Seite gemacht Sagen wir also bearbeiten. Und hier haben wir die Bearbeitung mit Elementor. Also klicke darauf. Dadurch wird die Seite in eine Seite umgewandelt, die bearbeitet werden kann. Also hier sind wir in Elementor. Das Erste, was Sie hier bemerken werden, ist, dass wir atomare Elemente haben Ich werde sie alle zusammenbrechen lassen. Dies sind neue Elemente die in der neuesten Version von Elementor erstellt wurden, aber sie sind sehr begrenzt, da die wichtigsten Funktionen hinter einer Paywall versteckt sind Also zum Beispiel die Schaltfläche, wenn du hier eine Schaltfläche ablegst und Hover-Effekte hinzufügen möchtest, wenn ich mit der Maus darüber fahre, möchte ich, dass sie ihre Farbe ändert Wenn ich eine Interaktion erzeugen möchte, befinden sich Hover-Effekte, wie Sie sehen können, hinter Also können wir so nicht arbeiten. Wenn ich keinen Zugriff auf grundlegende Effekte wie Hover-Effekte habe, dann möchte ich dieses neue System nicht verwenden Ich wollte dir das nur zeigen. Lass uns das loswerden. Wir werden also überhaupt keine atomaren Elemente verwenden. Wir wollen die ursprünglichen beliebten kostenlosen Elemente verwenden , die wir schon immer verwendet haben. Das ist das Containersystem anstelle des Systems der atomaren Elemente. Also werden wir hier einen Container abstellen. Und wie Sie sehen können, hat dieser Container hier zwei Spalten, den Textblock und den Bildblock. Wir brauchen also zwei Spalten darin. Also sage ich plus, füge wieder ein Element hinzu. Ich werde da einen Container reinstellen. Und in diesen Container werde ich zwei weitere Container stellen. Dieser Container wird derjenige sein, mit dem wir unseren Breiteninhalt festlegen. Wie Sie sehen können, berührt dieser Inhalt nicht die Kanten. Es gibt also einen unsichtbaren Einzelcontainer , in dem sich zwei weitere Container befinden, ein Container und ein weiterer Container. Also, wie machen wir das? Also haben wir unseren Container dort platziert. Jetzt gehen wir wieder zurück, fügen Elemente hinzu und legen hier einen weiteren Container ab. Und ich werde mit der rechten Maustaste klicken und den Container duplizieren . Jetzt haben wir zwei Container in diesem äußeren Behälter. Ich wähle diesen äußeren Behälter aus und gehe zum Layout. Unter Anleitung. Ich würde sagen , wir wollen, dass es eine Reihe ist und nicht diese Vertikale. Also sagen wir horizontal, und das wird alles in einer Reihe anordnen. Richtig. Wie Sie sehen, sind wir fast da, aber wir wollen eine bestimmte Breite festlegen, die uns gefällt. Zuallererst wähle ich den äußersten Container aus und sage, wir wollen zur prozentualen Breite wechseln Und wir möchten, dass Sie 100% des Bildschirms einnehmen , auf dem Sie die Website betrachten möchte ich zu dem anderen Container gehen Damit möchte ich zu dem anderen Container gehen, der die beiden Spalten enthält. Und ich möchte sagen, dass ich möchte , dass er 80% dieses Außencontainers einnimmt , weil dieser Außencontainer 100% belegt , wenn wir hierher wechseln, er belegt Aber denken Sie daran, dass wir hier diesen anderen Behälter haben , der die beiden Säulen enthält Wir wollen, dass es 80% des äußersten Containers ausmacht. Also mit diesen Wahlen und mit diesem Prozentsatz 80%. Beachten Sie nun, dass alles nach rechts nach links verschoben wurde . Also werde ich diesen äußersten Container auswählen. Und genau hier sagen wir, richten Sie alles nach der Mitte aus Dadurch wird der Behälter, der darin gehalten wird, in die Mitte gerückt. Und jetzt sind wir bereit , das zu veröffentlichen. Wenn ich, sagen wir, Element hinzufügen, Textüberschrift auswähle und es dort ablege, gehe ich zurück zu Element hinzufügen. Der Texteditor ist ein Absatz. Lass ihn fallen. Jetzt wollen wir es hier einfügen, direkt unter der Überschrift, und zurück gehen, um Element hinzuzufügen und eine Schaltfläche hinzuzufügen. Lege es genau da unten ab. Gehen Sie wieder rein und sagen Sie unter dem Layout Standbild. Veröffentlichen Sie das. Sehen Sie sich an, was wir gerade erstellt haben. Und jetzt, wie Sie sehen können, ist alles strukturell korrekt Wir werden alles so stylen, dass es fantastisch aussieht. Jetzt werden wir diese Lektion hier beenden. In der nächsten Lektion wollen wir nun diesen Heldenbereich gestalten. 9. Stilheldenabschnitt: Jetzt ist es an der Zeit, unsere Seite zu gestalten. werden Sie jedoch Auf der Referenz-Website werden Sie jedoch feststellen, dass wir diesen Hintergrund mit Farbverlauf haben , der von Dunkelblau bis hin zu Hellblau reicht. Wie stellen wir das also ein? Also lass uns zurück zu Elementor gehen. Lass uns eine Hintergrundfarbe hinzufügen. Also gehe ich zu diesem Drop-down-Menü, Seiteneinstellungen. Gehen wir zum Hintergrund, und hier stellen wir es ein. Lass uns den Farbverlauf wählen. Jetzt haben wir diese beiden Farben. Ich werde meinen Explorer öffnen. Ich werde diesen Ordner mit Download-Assets bereitstellen , der alles enthält , was Sie benötigen, um diese Website genau so neu zu erstellen , wie sie ist Das schließt also auch die Farben ein, die ich verwendet habe. Wir haben also diesen Abschnitt mit Hintergrundfarben. Also wähle ich diese Farbe aus und kopiere sie. Gehen wir wieder rein. Die erste Farbe wird dieses Blau sein. Und die zweite Farbe wird dieses Hellblau sein. Sie können aber auch andere Farben wählen, die Sie möchten. also für die zweite Farbe Lassen Sie uns also für die zweite Farbe diese als Grundlage verwenden. Speichern Sie die Änderungen. Und lassen Sie uns diesen Bereich verlassen. Als Nächstes richten Sie sie vertikal zur Mitte des Säulencontainers aus, in dem sie sich befinden. Also wähle ich diesen Container und begründe hier den Inhalt. Sagen wir Mitte, einfach so. Ich werde diesen Rechtsklick auswählen und ihn duplizieren, weil wir diesen Text benötigen. Sie müssen tippen, aber ich werde nur kopieren und einfügen. Ich wähle das hier rein und füge den Inhalt ein, den Alex macht. Also wähle ich das aus. Füge das ein. Kopieren Sie diesen Textkörper und wählen Sie ihn aus. Strg A, Strg Shift V, wenn du etwas von irgendwo anders einfügst , um sicherzustellen, dass du kein Styling von der Stelle einfügst, wo du es kopiert hast Also Strg Shift V. Und da haben wir es. Also veröffentliche das. Schauen wir es uns zunächst an. Es ist jetzt viel besser. Wählen Sie jetzt das aus und ich wähle diese gelbe Farbe aus den Texten, dem Notizbuch, dem Notizblock und kopiere das Gelb Solange dies ausgewählt ist, gehe ich zur Stiltextfarbe Gelb. Jetzt werden Sie feststellen, dass es zwei Farben hat, und ich werde Ihnen zeigen, wie das geht. Dies ist mit freundlicher Genehmigung eines Plug-in-Kits Light für kalte Elemente möglich. Lassen Sie uns das zunächst veröffentlichen. Und ich möchte, dass wir ins Dashboard gehen. Gehen wir zu Plugins, fügen Sie Plugin hinzu. Wir möchten ein Plugin namens Elements Kit Light hinzufügen, das wir auf der gesamten Website verwenden werden. Also genau hier werde ich Elements Kit eingeben. Elements Kit Elementor Add-Ons. Dies bietet uns hier nur mehr coole Elemente , die Elementor uns nicht zur Verfügung stellt oder die Elementor in der kostenpflichtigen Pro-Version hat Jetzt, wo wir das Elements Kit aktiv haben, wir es aktivieren, wenn wir auf Elements Kit klicken aktivieren, wenn wir auf Ich mag es, hier „Erweitert“ zu wählen, nur um sicherzugehen standardmäßig mehr Optionen ausgewählt sind, also erweitert. Dies sind nur Elemente , die genau hier wie diese auftauchen werden. Das ist so fortgeschritten. Wählen Sie dann als Nächstes keine davon aus. Du brauchst sie nicht. Im nächsten Schritt schließen Sie das Setup ab. Wenn ich jetzt hierher zurückgehe und sicherstelle, dass Sie die Seite bereits veröffentlicht haben, drücken R, um die Seite zu aktualisieren. Wenn ich jetzt Atomic zusammenfalle, all diese Panels, allgemeiner Link in der Kurzbiografie, wirst du Elemente aus dem Elements-Kit sehen. Dies sind zusätzliche coole Add-Ons wir benötigen, um das zu erstellen, was wir erstellen möchten. Lassen Sie uns das jetzt schließen, diese Überschrift gehört von Haus aus zu Element, aber wir möchten die Überschrift des Elements Kit verwenden . Ich gebe Überschrift ein Und wie Sie sehen können, haben wir die Standardüberschrift, die wir haben, und wir haben auch eine Überschrift aus dem Elements-Kit. Das ist also die, die wir wollen. Legen Sie es dort ab und lassen Sie uns das löschen . Klicken Sie mit der rechten Maustaste auf Löschen. das ausgewählt ist, gebe ich Alex ein und innerhalb dieser Klammern mache ich das. Und jetzt ist es eine Frage des Stylings. Gehe zum Stil. Wir haben den Titel , der Alex ist, und der Fokus-Titel ist der in den Klammern. also zunächst Gehen wir also zunächst zu Titel und Typografie und erhöhen die Größe auf die gewünschte Größe Wählen wir eine schwarze Schriftstärke von 900 , um sie viel mutiger zu machen Und geben wir ihr welche Farbe? Weiß. Also Titel, Farbe, Weiß. Lass das zusammenbrechen. Gehen wir zum fokussierten Titel. Gehen wir zur Farbe. Wir wollen es in dieser orangen Farbe haben. Also kopiere dieses Orange. Das Orange einfärben. Wenn Sie mit der Maus darüber fahren , wird es gelb. Also wollen wir dieses Gelb kopieren. Und wenn Sie mit der Maus darüber fahren, fügen Sie das ein. Also beim Schweben wird es so gelb sein. Aber beachte, dass es immer noch nicht dick ist. Lassen Sie uns in der Tat zur Typografie gehen. Schriftstärke schwarz. Und tatsächlich, genau hier beim Inhalt Ja, wir haben Leerzeichen. Solange es noch ausgewählt ist, gehen wir noch einmal zu Stil, Stil und Typografie Wir wollen, dass es Unterstil ist, wir wollen, dass es kursiv ist, einfach so Und beachten Sie, dass wir dieses Trennzeichen haben, also reduzieren Sie den Titel, das Trennzeichen Gehen wir zum Inhalt, reduzieren den Titel und das Trennzeichen und deaktivieren wir das. Wählen Sie diesen Text aus. Lass es uns weiß machen. Und wir wollen vermeiden, dass es zu lang wird. Solange es noch ausgewählt ist, gehen wir zu Erweitert mit Benutzerdefiniert. Und geben wir ihm vielleicht 75%. Veröffentlichen Sie das. Und lassen Sie uns eine Vorschau dessen ansehen, was wir haben. Große Verbesserung, aber wir möchten den Abstand zwischen ihnen verringern. Das sind die Margen. diese Option ausgewählt ist, aktualisieren Sie Ihre Kommunikation. Gehen wir zur Advanced-Margin über. Unterbrechen Sie diesen Link, denn wenn Sie hier etwas ändern, wirkt sich das auf oben, rechts, unten und links aus. Wir wollen nur den unteren Rand reduzieren. Lassen Sie uns auch diesen Alex Doug auswählen, erweiterter Rand, reduzieren Sie den unteren Rand Veröffentlichen Sie das. Und lass uns nachschauen, was wir haben. Tolle Verbesserung. Also werden wir dort aufhören. In der nächsten Lektion sehen wir uns an, wie diese Schaltflächen erstellt werden. Wir sehen uns in Kürze. 10. CTA-Schaltflächen im Stil von Hero: Jetzt ist es an der Zeit, unseren Button so zu starren , dass er wie unsere Referenz-Buttons aussieht Also, wie machen wir das? Zurückschalten. Gehen wir hier rein. Jetzt haben wir natürlich zwei Schaltflächen, und wenn wir sie nebeneinander platzieren wollen, müssen wir das tun, was wir hier mit diesen beiden Spalten gemacht haben. Also wollen wir unter diesem Text einen Container hinzufügen. Element hinzufügen. Gehen wir zu Basic über. Das ist ein Layout. Hier haben wir den Container. Lassen Sie uns ihn direkt unter diesem Absatz ablegen und unsere Schaltfläche dort hineinziehen und mit der rechten Maustaste auf Duplizieren klicken, den Container auswählen, in dem sie sich befinden, und den Container auswählen, in dem sie sich befinden, die Richtung auf horizontal ändern. Wenn ich das veröffentliche, werden Sie feststellen, dass diese Schaltflächen aufgrund der Standardpolsterung, die in jedem Container enthalten ist , nicht genau am Text ausgerichtet sind aufgrund der Standardpolsterung, die in jedem Container enthalten , Wie Sie sehen können, haben wir rundum eine gewisse Polsterung. Wir wollen diese Polsterung entfernen. Während der Container ausgewählt ist, gehen wir zu „Erweitert Gehen wir zu Padding und entfernen das. Jetzt können wir etwas obere Polsterung hinzufügen, vielleicht zehn und untere zehn, aber die linke Polsterung lassen Veröffentlichen Sie das. Wie Sie sehen können, sind sie jetzt richtig ausgerichtet. Eine andere Sache, die wir jetzt tun möchten, ist auszuwählen, dass zu viel Speicherplatz vorhanden ist. Wir können also diesen Text auswählen, erweiterter Rand unten. Reduzieren wir es vielleicht bis zu dieser Stelle. Veröffentlichen Sie das. Wählen Sie die Schaltfläche und gehen Sie zum Stil. Zuallererst können wir ändern, was darin steht. Dienstleistungen und auf der anderen steht Portfolio Oder sieh dir meine Arbeit an. Meine Arbeit ansehen. Klicken Sie jetzt hier auf diese Schaltfläche und gehen Sie zum Stil. Und ich möchte, dass wir die Polsterung bearbeiten. Also mach das kaputt Ich gebe ihm gerne eine linke Polsterung von 40 oder 50, rechte Polsterung von 50 obere und untere Polsterung von 15 15. gleiche Fall gilt für diesen Stil, Polsterung links 40, rechts, 40, dann 15, 15. Okay. Geben wir ihm dafür eine Hintergrundfarbe Grau und eine Textfarbe in Schwarz. wir diese Option auswählen, möchten wir ihr eine Verlaufsfarbe geben , da unser Farbverlauf immer zwischen diesen beiden Farben Gelb und Orange spielt . also, während es ausgewählt ist, wir also, während es ausgewählt ist, zum Hintergrundtyp Farbverlauf über. Ich werde unsere Farben hier kopieren. Gelb, versteh das. Benutze es als zweite Farbe. Aber kopiere die Orange, füge sie ein. Dann hier der Winkel, wir wollen ihn drehen. Anstatt 180 Grad sollte es 90 Grad sein. Lassen Sie uns die Textfarbe schwarz machen. Beim Hover für diese Schaltfläche beim Hover, weil wir auf den normalen Status eingestellt waren Wenn Sie mit der Maus darüber fahren, möchten wir, dass es dieselbe Verlaufsfarbe hat. Also wähle ich das aus. Also gehen wir wieder rein und kopieren die Orange. Fügen Sie es dort ein. Kopiere das Gelbe. Füge das ein, einfach so. Aber wir wollen das auf 90 Grad ändern, den Winkel, einfach so. Und das beim Schweben, ausgewählt. der Maus darüber fahren, möchten wir, dass es einen grauen Hintergrund hat , keinen Farbverlauf, sondern nur einen klassischen grauen Farbhintergrund mit schwarzen Texten Ich werde nicht versuchen , es konsistent zu halten. Moment, warum funktionieren Tipps nicht? Veröffentlichen Sie das. Lass uns hierher gehen. Ich weiß es nicht. Ist das ein Bug? Auf Normal ist es ein Gradient, aber auf Normal. Ich weiß nicht, warum wir diesen Bug haben. Elemental muss das untersuchen, aber lassen Sie uns weitermachen. Sehen Sie sich das mal an Da der Hover-Effekt hier nicht funktioniert, können wir eine Animation hinzufügen, also wähle ich sie aus Beim Hover wollen wir eine Hover-Animation. Vielleicht wachsen. Ja, so. Machen wir dasselbe mit dem Hover, es sollte auch wachsen Also veröffentliche das, lass uns sehen, was wir haben. Ja. Also los geht's. In der nächsten Lektion fügen wir nun dieses Bild zusammen mit dem Hintergrund hinzu. Wenn ich diese Seite lade, gibt es, wie Sie sehen können, zwei separate 11. Heldenbild: Es ist also an der Zeit, am Bild der Helden-Sektion zu arbeiten. Also, weil du das Bildelement bereits hinzugefügt hast. Zuallererst, bevor wir weit gehen, gibt es etwas, das Sie bemerkt haben, dass ich die ganze Zeit mache. Wenn ich etwas duplizieren möchte, muss ich mit der rechten Maustaste klicken und es duplizieren. Das sind zwei Schritte, die ich jedes Mal machen muss. Um das zu vermeiden, gehe ich immer gerne zu diesem Drop-down-Menü, Benutzereinstellungen und zu den Schnellbearbeitungsoptionen. Dadurch kann ich einfach mit der Maus darüber und einfach darauf klicken, um alles zu duplizieren, was ich duplizieren möchte also das Bildelement ausgewählt ist, wähle ich das Hochladen von Bildern Und wie versprochen, werde ich diesen Ordner hier bereitstellen. Dieser Download-Ordner enthält also alles, was Sie benötigen. Also das erste, was wir eingeben werden, ist dieses Bild mit diesem verblassenden unteren Rand, professionelle Männerbild Null oder dein eigenes Bild Also, das ist mein Webhost, der sich über meinen Server beschwert, also werde ich das einfach speichern und diese Seite aktualisieren Schließ das. Wählen Sie also dies und das aus, um es hochzuladen. Wenn ich darauf doppelklicke, wird es jetzt funktionieren. das Bild ausgewählt ist, Wenn das Bild ausgewählt ist, sage ich „Auswählen“, und los geht's. Nun, für dieses Bild, dieses gelbe Bild hier, werden wir es der Spalte als Spaltenhintergrund hinzufügen . Also diese Spalte , die das Bild enthält, gehen wir zu Stil, Hintergrundtyp. Lassen Sie uns ein Bild auswählen und dann Dateien hochladen. Und in unserem Ordner haben wir den Hero-Hintergrundpinsel, der das öffnen wird. Und wähle aus. Jetzt ist es da, aber wir müssen ein paar Dinge tun. Nehmen wir zunächst an, die Position sollte in der Mitte liegen. Wir möchten sagen, dass wir nicht wollen, dass es sich wiederholt. Für die Displaygröße wollen wir dann sagen: Enthalten. Und was uns ermöglichen wird, es richtig zu positionieren , ist dieses tatsächliche Bild von diesem Typen. Wenn das Bild ausgewählt ist, gehen wir zu W. Und lassen Sie uns einfach so damit herumspielen. Ich finde, das ist eine schöne Größe. Und sagen wir veröffentlichen. Und lassen Sie uns eine Vorschau davon ansehen. Wir kommen irgendwohin. Schauen wir also mal, ob wir jetzt etwas verbessern können Zuallererst können wir diese Textspalte auswählen. Und was die Breite angeht, sie einnehmen soll, denken Sie daran, dass sich diese Spalte und diese Spalte hier in diesem Container befinden . Also, wie viel von diesem Container sollte jede Spalte einnehmen? Lass uns das auswählen. Wir wollen, dass es 40% ausmacht. Prozent, keine Pixel. Also, das ist Höhe und mach das. 40% Und wir wollen, dass das 60% ausmacht. Also layouten Sie 60%. Veröffentlichen Sie das. Und schauen wir uns das an. Ja, das ist eine viel größere Verbesserung. Also ich denke, jetzt können wir damit beginnen. Wir werden im weiteren Verlauf weitere Verbesserungen vornehmen. Was bleibt also noch übrig? Das Einzige, was hier noch übrig ist, ist dieses Hintergrundmuster mit diesen geometrischen Formen. Also lass uns weitermachen und das hinzufügen. Und das werden wir dem gesamten Helden-Sektion-Container hinzufügen , der alles andere enthält. Also dieser rosafarbene Container hier, gehe zum Stil des Hintergrunds. Wählen wir aus, dass wir diese Hintergrundmuster für den Heldenbereich haben . Öffne das und wähle es aus, und los geht's. Also habe ich diese Bilder mit Adobe Illustrator vorbereitet, sodass Sie alle Muster vorbereiten müssen, die Sie verwenden möchten Jetzt wollen wir, genau wie wir es getan haben, hierher gehen und sagen: „Position Mittelpunkt Wir wollen sagen, dass es keine Wiederholungen gibt. Und für die Displaygröße geben wir Publish ein und schauen wir mal, was wir haben Da haben wir's. Was ist mit der Deckung? Ja, Deckung ist dafür besser. Lass uns hierher gehen, weil ich möchte, dass es bis zu den Rändern reicht. Da hast du es also. Wir sind fertig mit der Helden-Sektion. Der Rest der Abschnitte wird eine Wiederholung dessen sein , was wir gerade im Heldenbereich gemacht Aber natürlich gibt es einige einzigartige Dinge, die wir tun werden Also wir sehen uns in der nächsten Lektion. 12. Kopfzeile erstellen: Jetzt ist es an der Zeit, einen Header für unsere Website zu erstellen , denn wie Sie sehen können, haben wir momentan natürlich keinen Header, und wir wollen etwas , das so aussieht. Also, wie erstellen wir das? Ich wechsle hierher zurück. Gehen wir in unser Armaturenbrett. Ich möchte zum Dashboard gehen. Und denken Sie daran, wir haben Elements Kit Light hinzugefügt. Unter Elements Kit haben wir also eine Header-Fußzeilen-Option Also lass uns darauf klicken. Wir werden eine neue Vorlage hinzufügen und sie Header nennen. Es ist unser Header. Und wir möchten, dass es auf der gesamten Website angezeigt wird. Wenn Sie mehrere Webseiten hätten, möchten Sie, dass es auf allen Webseiten angezeigt wird Dann wollen wir, dass es aktiv ist. Dann gehen wir zu Inhalt bearbeiten. Wir werden zu Elementor weitergeleitet, um einen Header zu erstellen. Jetzt wollen wir sagen, lassen Sie uns einen Container hinzufügen und all diese Panels zusammenklappen, die wir nie benötigen Gehen wir zum Layout und fügen hier einen Container hinzu. Und genau wie wir es zuvor getan haben, wollen wir in der Lage sein, unseren Header auf 80% des Bildschirms zu beschränken. Dieser äußere Behälter sollte also eine Breite von 100% haben. Und dieser innere sollte 80% des äußeren ausmachen. Und damit wollen wir zum äußeren gehen und das innere verschieben und es so auf die Mitte ausrichten. Und jetzt hier drinnen wollen wir drei Spalten. Tatsächlich brauchen wir keine drei Spalten. Wir brauchen nur drei Artikel. Wir brauchen ein Bild und das Basisbild. Wir brauchen auch einen Nerv. Also werde ich Nerv eingeben. Also, wir haben hier unterschiedliche Nerven, aber der, den wir wollen, ist Elements Kids Nerve Menu. Wir platzieren es unter dem Bild, aber immer noch in diesem inneren Behälter. Und wir möchten auch eine Schaltfläche hinzufügen, die immer noch unter Basic Never Atomic Elements es sei denn, du hast die Pro-Version von Elementor Und platzieren wir den Button direkt darunter. Wählen wir nun den Container selbst aus und wechseln wir zur Zeile. Das sind nun drei Elemente, die als Reihe angeordnet sind. Ich möchte das Bild auswählen. Lassen Sie uns das Logo auswählen. Ich habe dieses fiktive Logo erstellt. Es gehört keiner realen Person. Doppelklicken Sie also darauf und lassen Sie uns es auswählen. Jetzt ist es schon klein genug, aber ich möchte sichergehen, dass wir bei der Breite sehr genau sind. Gehen wir also bei „Erweitert“ zu „Benutzerdefiniert“ und sagen vielleicht 20 oder 25% dass vielleicht 20 oder 25% dieses Containers darin Platz finden Wählen wir den Nerv aus. Wenn wir nun das Nervenelement auswählen , werden wir nach einem Menü gefragt. Wenn wir ein Menü haben, wird es hier aufgelistet, aber wir haben noch kein WordPress-Menü erstellt. Lassen Sie mich das also zunächst veröffentlichen. Und gehen wir zurück zu Ich möchte hier ein immer verfügbares Dashboard haben . Gehen wir also hier drinnen zum Darstellungsmenü. Und wir wollen ein Menü erstellen. Also lass es mich einfach mein Menü nennen und lass es uns zum Hauptmenü machen und dann Menü erstellen. Nun, da wir die Homepage bereits haben, wählen wir sie aus und fügen sie dem Menü hinzu. Sie wird hier aufgelistet. Und wir wollen zusätzliche Elemente, zusätzliche Menüpunkte, Dienstleistungen und Portfolio-Kontakte erstellen . Gehen wir also zu benutzerdefinierten Links. Lassen Sie uns einfach einen Hash genau dort platzieren und ihn Dienste nennen, die dem Menü hinzugefügt wurden. Wir werden später zurückkommen und dafür sorgen, dass diese Links tatsächlich irgendwohin führen. Lassen Sie uns also noch ein Hash Beer, ein Portfolio zum Menü und schließlich Kontakte hinzufügen . Kontakt, zum Menü hinzufügen. Dann sagen wir Menü speichern. Also haben wir mein Menü-WordPress-Menü mit vier Menüpunkten erstellt . Ich gehe wieder rein, das ist die Seite. Gehen wir zurück zum Header-Editor. Und weil es veröffentlicht wurde, aktualisieren wir diese Seite. Und wenn ich jetzt schlafe, wo ist dieser Nerv? In Ordnung, lass mich wo ist der Nerv? Wenn ich Strg E drücke, sehen wir einen Überblick über alles, was wir im Editor haben Nerv. Es ist also zu einem sehr winzigen Element zusammengebrochen. Aber hier können wir das Mein Menü auswählen, das wir gerade erstellt haben. Wenn Sie das jetzt auswählen, ist es sichtbar, wie Sie sehen können. Jetzt sagen wir bereits, dass dies 20% der Breite sein sollte. Lassen Sie uns auch dafür sorgen, dass der Button 20% des Containers einnimmt. Und richten wir es nach rechts aus. Und jetzt zum Nervenelement: Stellen wir sicher, dass es die restlichen 80% einnimmt. Oh, 60%, weil das 2020 ist, 40, also 60%. Und solange es noch ausgewählt ist, gehen wir einfach so zum Content Align Center . Veröffentlichen Sie das. Und wir wollen sie auf Weiß umstellen. Solange es noch ausgewählt ist, gehen wir zum Menüpunkt Stil. Unter normalen Umständen sollten wir es auf Hover weiß machen. Machen wir es orange. Der Gegenstand nimmt Farbe an, wenn er darüber schwebt, orange. Und wenn wir uns auf einer bestimmten Seite befinden, wenn sie aktiv ist, machen wir sie orange Das heißt, wenn wir uns auf einer bestimmten Seite oder Abschnitt befinden, auf den der Artikel verlinkt ist , machen wir ihn gelb. Veröffentlichen. Sehen wir uns das jetzt in der Vorschau an. Nun, wie Sie sehen können, ist es nicht richtig ausgerichtet. Diese Taste ist im Vergleich zu allem anderen zu hoch. Gehen wir also wieder rein. Und da dieser Container hier ausgewählt ist, stellen wir sicher, dass die Elemente so vertikal mittig ausgerichtet sind . Lassen Sie uns das schließen. Und gehen wir zu diesem Editor hier und wählen diese Schaltfläche, rechts Leak Copy, gehen zurück zu unserem Editor hier, wählen die Schaltfläche, rechts Leak Paste-Stil. Also müssen wir das nicht wiederholen , außer jetzt ist es soweit Wir müssen jetzt diese 20% -Peitsche zurücksetzen . Los geht's Also, jetzt gehe ich zurück zu unserem Editor und werde R drücken, um die Seite neu zu laden Und jetzt hat unsere Webseite den Header. Lassen Sie uns also eine Vorschau des Headers mit allem anderen anzeigen. Da haben wir's. Da sieht es schon gut aus. Aber aus irgendeinem Grund ist dieser Abstand hier größer als dieser. Ich weiß nicht warum. Wir werden uns das später ansehen. Aber lassen Sie mich es jetzt einfach schließen, einschließlich dem. Nun, ich mag es, diese Marge oben rechts hier zu reduzieren. Wenn Sie also Ihre Kopfzeile bearbeiten möchten, können Sie den Mauszeiger genau hier über diesen Teil bewegen und auf die Kopfzeile klicken, aber ich möchte sie in einem neuen Tab öffnen, also verwende ich mein Mausrad und drücke das Mausrad, um sie in einer neuen Registerkarte zu öffnen Wie ich bereits erwähnt habe, verfügt jetzt jeder Container über eine Standardpolsterung Also wähle ich diesen Container aus, der alles enthält, gehe zu Advanced und unterbreche das Standard-Padding einfach so Und der äußere Container hat auch seine eigene Standardpolsterung. Wie Sie sehen können, haben wir den Rand oben drastisch reduziert Und jetzt, wenn wir diese Seite neu laden, beobachten Sie den Header. Jetzt ist alles viel näher an der Spitze. Da haben wir's. In Ordnung. Jetzt verstehe ich, was das Problem war. also diese Schaltfläche ausgewählt Als wir also diese Schaltfläche ausgewählt und die Stile dieser Schaltfläche hier eingefügt haben, haben wir die Einstellungen ersetzt, die wir hier für die Schaltfläche festgelegt hatten : Ausrichten, Schreiben, Veröffentlichen Darunter. Da haben wir's. Jetzt sieht unser Header fantastisch aus, außer dass wir immer noch die Schaltfläche auswählen, zum Inhalt gehen und das ändern müssen , um mich zu buchen, zu veröffentlichen. Dann lass es uns schließen. Wir können den Editor hier neu laden. Jetzt können wir es noch einmal in der Vorschau ansehen. Ja. Also, das ist das Ende des Headers. In der nächsten Lektion wollen wir uns nun ansehen, wie die verbleibenden Abschnitte erstellt werden. Wir sehen uns in Kürze. 13. Gegenabschnitt: Jetzt wollen wir diesen Zählerbereich genau hier hinzufügen. Schauen wir uns also an, wie das geht. hier reingehe, möchte ich sagen, Element hinzufügen, und ich möchte all das zusammenklappen. Und wenn wir nach unten scrollen, wollen wir genau hier einen Layout-Container hinzufügen Nun, dieser Layout-Container sollte einen weiteren Container haben , der den eigentlichen Inhalt enthält, also gehe ich wieder hinein, und dieser sollte 100% der Breite einnehmen, während er 80% des äußeren Containers einnehmen sollte Gehen wir zurück zum äußeren Container und richten die Elemente in der Mitte aus. Jetzt wollen wir diesen Text duplizieren, damit wir ihn wiederverwenden können. Es ist ein Header. Und tatsächlich habe ich vergessen, hier auszuwählen, dass dieser Alex-Hund ein H-Hund sein soll. Das ist eine H-Zwei. Ja, es ist schon eine H-Zwei. Ja, das hatten wir, weil wir es einfach von hier aus dupliziert haben, es hat diese Margeneinstellung, wir haben es entfernt Und beachte hier eine Sache, das ist eigentlich eine Spalte, und das ist eine weitere Spalte Was wir also brauchen, ist ein Container. Und leg das in den Behälter , der sich in dem anderen Behälter befindet. Und darunter wollen wir auch einen Button platzieren. Also werde ich diesen Button duplizieren und ihn unter dem Text platzieren. Dann dupliziere ich diesen Behälter und wähle den äußeren Behälter aus und wechsle zu Rolle. Wir haben also zwei Spalten. Und hier drin möchte ich diese beiden entfernen Okay, das ist nicht entfernbar, ist nicht entfernbar, kann also zu Recht gelöscht werden Und ich möchte einen Zähler hinzufügen. Ziehen Sie den Zähler also per Drag & Drop hinein. Wählen Sie den Zähler aus und duplizieren Sie ihn zweimal. Wählen Sie den Behälter aus, in dem sie sich befinden, und wechseln Sie zur Reihe. Wir wollen den Inhalt der Mitte und im Abstand zwischen den Elementen ausrichten. Veröffentlichen Sie das. Sehen wir uns eine Vorschau der Änderungen an. eine Vorschau der Änderungen an. Genau, genau so. Aber jetzt sollte jeder von ihnen haben. Geben wir ihm einen Hintergrund. Gehen wir zu Advanced. Wählen Sie einen dieser Zähler Fortgeschritten. Lassen Sie uns es zunächst etwas aufpolstern, vielleicht 20. Dann gehen wir zu seinem Hintergrund über. Hintergrundfarbe. Ich wähle dieses Dunkelblau oder eine andere Farbe, die du verwenden möchtest. Füge das dort ein. Gehen wir zur Stilnummer. Geben wir ihr vorerst die Farbe Weiß und den Titel Weiß. Für die Zahl können Sie eine schwerere Schrift wählen, also Schriftstärke, Schwarz. Du kannst sogar eine andere Schrift sagen, vielleicht Monserat Ja, so etwas Schweres Dann gehen wir zum Grenzradius der erweiterten Grenze von 20. Dann schreiben wir Leak, kopieren den rechten Leak, Face Style, Right Leak, fügen den Stil ein und veröffentlichen das. Genau hier werde ich diesen Text kopieren. Wir müssen ihn eingeben, ihn auswählen und zum Inhalt gehen. Ich werde es dort einfügen und es auf weißes Veröffentlichen ändern. Ich gehe hierher. Einfach so. Nun, wie Sie hier sehen können, ist der Abstand hier fantastisch. Aber unserer hier ist nicht so gut. Also lass uns kein Leerzeichen dazwischen haben. Richten wir sie einfach in der Mitte aus und veröffentlichen wir, wir können jedem von ihnen eine gewisse Breite geben . Zuallererst geben wir dieser Spalte eine Breite von vielleicht 40% und dieser eine von 60%. Benutzerdefiniert, 33%. Kopieren, Leak korrigieren, Stil einfügen, Stil kopieren, einfügen , veröffentlichen. Da haben wir's. Lassen Sie uns jetzt die Details ändern. Hier könnten 55 Kunden bedient werden. Also, wie lautet der Titel? Kunden bedient. Das hier könnte sein. Was haben wir hier? Projekte abgeschlossen. 329 Projekte abgeschlossen. Und das hier könnten 100% sein, also das Suffix Prozent steht für Fraktion, Garantie Dann, wenn wir genau das ausschließen . Sie Kontakt auf , veröffentlichen Sie das. Los geht's So erstellt man diesen Abschnitt, und er ist dem Heldenbereich zu nahe. Ich möchte hier wieder reingehen und den Container auswählen, der den gesamten Heldenbereich enthält, und zur Höhe gehen und ihn auf VH ändern Das ist die Ansichtshöhe, und wir wollen ihr 100 geben. Wir wollen sagen, dass es den ganzen Bildschirm einnimmt. Die Helden-Sektion sollte den ganzen Bildschirm einnehmen . Veröffentlichen Sie das. Einfach so. Wir wollen auch diesen und vielleicht diesen Container , der diesen Abschnitt enthält, auswählen und ihm einen oberen Rand von 50 geben, um ihn vom oberen Teil zu trennen. Ordnung. Also, wir wollen nicht, dass es den unteren Teil berührt. Also könnten wir vielleicht die Breite dieses Bildes reduzieren. Veröffentlichen Sie das. Einfach so. Ja, sie sind richtig getrennt. Ja, genau das werden wir in dieser Lektion erreichen. In der nächsten Lektion sehen wir uns an, wie Sie diesen Abschnitt hier, meine Dienste, erstellen. Wir sehen uns also in Kürze. 14. Klebrige Kopfzeileneffekte: Bevor wir zu diesem Abschnitt hier übergehen, werden Sie feststellen, dass, wenn wir mit dem Scrollen beginnen, die Kopfzeile klebrig ist und wenn wir nicht scrollen, die Hintergrundmuster ganz oben sind Dies ist die Referenz-Website, aber wenn wir auf der Website, an der wir gerade arbeiten , mit dem Scrollen beginnen , verschwindet der Header und dieses Muster ist nicht ganz oben, also müssen wir das jetzt lösen Und um das zu tun, um den Header klebrig zu machen, müssen wir ein Plugin namens Sticky Header Effects for Element verwenden namens Sticky Header Effects for Element Gehen wir ins Armaturenbrett. Plugins, Plugin hinzufügen. Lass uns Sticky hinzufügen. Geben Sie einfach Sticky Header Header ein. Also Sticky-Header-Effekte für Elementor jetzt installieren. Dann lass uns das aktivieren. Und jetzt ist es hier. Gehen wir also wieder rein, lassen Sie uns einfach den Mauszeiger darüber bewegen und sagen: Richtiger Link, Link in neuem Tab öffnen Wir müssen also den Container auswählen, der den gesamten Header enthält, und zum erweiterten Collape-Layout wechseln, zu den Sticky-Header-Effekten wechseln und ihn aktivieren Schließen Sie diese Profi-Werbung. Im Moment ist es schon klebrig. Wir haben es aktiviert, also wird es oben klebrig sein. Aber was wir wollen, ist eine transparente Kopfzeile, und das heißt, wenn wir jetzt hier hingehen und diesen Editor aktualisieren, schauen wir uns das Muster hinter dem Heldenbereich an. Wie Sie sehen können, sind die Muster nun ganz oben. Wenn ich eine Vorschau davon sehe, sind sie, wie Sie sehen können , ganz oben. Aber jetzt werden Sie ein Problem feststellen: Wenn wir mit dem Scrollen beginnen, befindet sich in der Kopfzeile kein Hintergrund Alles wird überladen. also wieder reingehen, direkt unter der transparenten Kopfzeile, können wir eine Hintergrundfarbe auswählen nach dem Scrollen ebenfalls ändern Also gehen wir wieder rein und wählen dieses Dunkelblau aus, gehen wieder rein, Hintergrundfarbe, wählen das aus und fügen es dann dort ein und veröffentlichen Schließe diese, gehe zum Editor und aktualisiere diese Vorschau. Wenn wir jetzt mit dem Scrollen beginnen, wird es blau, sodass alles sichtbar bleibt Wenn wir nach oben scrollen, verschwindet der Hintergrund. So macht man das also. In der nächsten Lektion wollen wir uns nun ansehen, wie der Abschnitt Dienste erstellt wird. 15. Abteilung Dienstleistungen: Jetzt ist es an der Zeit, den Servicebereich zu erstellen. Schauen wir uns also an, was wir hier haben. Wir haben diese vier Boxen und diesen Typen. Also lass uns wieder hier rein gehen. Wir werden einige der Dinge, die wir bereits erstellt haben, wiederverwenden . Also werde ich diesen Abschnitt einfach duplizieren. Und ja, die beiden haben wir schon. Denn beachten Sie hier, dass dies eine Spalte und eine weitere Spalte ist. Fügen wir also einfach eine Überschrift und etwas Text darüber hinzu. Also über diesem Container werden wir diese Alex-Puppe duplizieren. Und ich möchte es direkt über diesem Abschnitt platzieren. Und ich möchte auch auswählen, dass dieser Text dupliziert werden soll. Es geht darum, Dinge wiederzuverwenden, die du bereits direkt unter Alex Dow gestylt hast direkt unter Alex Dow gestylt Dann lass uns zum Stylen übergehen. An der Mitte ausrichten, wählen Sie dies aus. Wir wollen das auf Seite zwei ändern und zum Stil „Titel“ wechseln. Typografie reduziert die Größe, vielleicht auf die Rückengröße Das ist vernünftig. Und beachten Sie hier, dass es diesen Separator hat. Gehen wir also zur Aktivierung des Inhaltstrenners. Aber jetzt müssen wir diesen unteren Rand so loswerden . Und ich möchte diesen Text kopieren. Wählen Sie das aus, gehen Sie zum Inhalt, alles Control Shift VL. Beachten Sie hier, dass dies eine eingeschränkte Breite hat. Solange sie ausgewählt ist, möchte ich zur erweiterten benutzerdefinierten Breite wechseln. Ich wollte 60% der verfügbaren Breite des Containers einnehmen , in dem sie gespeichert ist Ändern Sie das Trennzeichen, wählen Sie diese Texte aus. Das Trennzeichen sollte weiß sein. Und sie sollten meine Dienste sein. Meine Dienste. Nun, ich möchte, dass es der Ras ist, die Farben sollten normal gelb sein. Kopiere das, geh hier rein, wähle hier, Leertaste, füge es dort ein, schneide das aus, entferne das Leerzeichen, gehe hierher, wenn du mit dem Mauszeiger darüber fährst, so Nun, in diesen beiden Spalten, die wir bereits erstellt haben. Zuallererst möchte ich diese Spalte auswählen und sagen, dass sie 40% und diese 60% einnehmen sollte . Ich möchte alles von hier entfernen. Und von hier aus. In Ordnung. Es gibt einen Bug. Das funktioniert nicht, also klicken Sie mit der rechten Maustaste auf Löschen. Also haben wir diese beiden Kolumnen veröffentlicht. Nehmen wir an, ja, das ist 60 40, wenn man es sich nur ansieht. Oder wir könnten es einfach 50, 50 oder 45 55 machen. Nun, hier müssen wir auch hinzufügen , dass wir ein paar Container hinzufügen müssen , einen Container darüber und einen weiteren darunter. Und dann werden wir in jeder dieser beiden Reihen noch ein weiteres Paar Container haben. Also duplizieren Sie das. Aber wenn wir das jetzt auswählen, wechseln wir zu Zeile, also eins, zwei. Lassen Sie mich das einfach löschen, auswählen und duplizieren sodass es eins, zwei, drei, vier ist. Dupliziere das und lass es uns hier ablegen. Gehe zu Stil, Titel, Typografie und reduziere die Größe Gehen wir zum Inhalt. Warte, stylen, mittig ausrichten. Und das Trennzeichen sollte oben sein. Lass uns sehen. Separator B. Sagen wir oben. Ich werde das duplizieren. Lege es da rein, dupliziere es noch einmal. Platziere es da drin. Ich werde auch duplizieren, ich kann einfach das oder das duplizieren und es direkt unter dem Aline-Zentrum ablegen . Es hat eine Breite. Also sagen wir einfach Standard. Und ich möchte das kopieren. Wählen Sie das aus, gehen Sie zum Inhalt, fügen Sie es dort ein. Es ist derselbe Text, also werde ich ihn einfach duplizieren. Nein, direkt darunter. Was wir hier haben, ist ein Container mit zwei Spalten. Das ist diese Spalte und diese Spalte. Und in dieser Spalte haben wir einen Container, haben wir einen Container der zwei Spalten mit zwei Containern enthält. Was wir jetzt machen wollen, ist das zu stylen. Gib ihm einfach diese dunkelblaue Farbe. Ich wähle das aus , um seine Farbe zu kopieren, gehe zu seinem Hintergrund. Kopiere das. Wählen Sie diesen Container aus und wechseln Sie zum erweiterten Hintergrund. Farbe, probiere das dort. Gehen wir zur Polsterung. Geben wir ihm eine Polsterung von 20. Und gehen wir zu seinem Grenzstil über, Grenze 20. Wähle das aus. Okay, wählen wir einfach aus solange es noch ausgewählt ist, klicken wir mit der rechten Maustaste auf Kopieren Wählen Sie diesen rechten Link-Paste-Stil aus. Wählen Sie diesen rechten Link-Paste-Stil aus. Stil einfügen. Nun werden Sie feststellen, dass hier zu viel Platz ist, und das liegt an der Standardpolsterung des Containers, der die beiden enthält Gehen wir also zu „Fortgeschritten“ über und unterbrechen dort die Polsterung Wählen wir auch diesen aus. Dieser Container. Fortgeschritten, entferne die Polsterung, veröffentliche das. Und jetzt gefällt mir nicht, dass das fast ganz oben ist Wir könnten diese Überschrift auswählen und zu den oberen zehn Seiten am oberen Rand gehen, rechts ohne Text Wählen Sie das aus, klicken Sie mit der rechten Maustaste auf Stil einfügen, wählen Sie das aus, klicken Sie mit der rechten Maustaste auf Stil einfügen, dann veröffentlichen Sie es dort. Jetzt werden Sie auch feststellen, dass wir diese Dekorationen genau hier haben. Wenn Sie sie benötigen, können wir einfach zu einem von ihnen gehen, zu Stil, Hintergrundüberlagerung gehen und ihm einen Farbverlauf geben Und der Farbverlauf wird dieses Hellblau und das Dunkelblau für die zweite Farbe verwenden dieses Hellblau und das Dunkelblau für die zweite Farbe Und wir wollen auf Radio umsteigen. Also, dieses Blau sollte eigentlich sein. Dieses Blau hier sollte die zweite Farbe sein. Und das Dunkelblau hier sollte die erste Farbe sein. Dann sagen wir, Opazität unten links. Lassen Sie uns den Standort auf 80% erhöhen. Tun Sie also, was ich gerade getan habe. Radio, strahlender Typ, Position unten links. Sie können die Deckkraft ändern, wenn Sie möchten, und die Position auf 80% einstellen. Jetzt wähle ich einfach diese Kopie aus. Stil einfügen. Stil einfügen und Stil einfügen. Jetzt hat es auch einen Rand. Gehen wir also zum Stil. Solider Rand. Und lassen Sie uns die Randfarbe blau machen. Geben wir ihm so etwas Blau. Randfarbe von eins. Nein, sagen wir zwei, Rand mit Ja, also kopieren/einfügen, wählen, rechter Leak-Paste-Stil, rechtes Leak auswählen, Stil einfügen, veröffentlichen. Wenn wir uns das jetzt in der Vorschau ansehen, sind wir fertig. also in der nächsten Lektion Lassen Sie uns also in der nächsten Lektion dieses Bild hinzufügen. Wir sehen uns in Kürze. 16. Services-Image: Jetzt ist es also an der Zeit, das Dienste-Image zu erstellen. Aber bevor wir das tun, ist mir gerade aufgefallen, dass ich vergessen habe, diesem Abschnitt einen dunkelblauen Hintergrund zu geben . Gehen wir also weiter und wählen den dunkelblauen Hintergrund aus, kopieren ihn und gehen zurück zu unserem Editor, wählen den Abschnitt aus, gehen wir zum Stil. Ist das ausgewählt? In Ordnung, Stil. Hintergrund eng. Geben wir ihm dieses Dunkelblau. Jetzt, genau hier, wollen wir der Farbe Hellblau geben. Also wähle ich das aus. Wählen Sie diese Spalte aus, gehen Sie zum Stil. Hintergrund blau. Geben wir ihm auch einen Grenzradius von 20. Tatsächlich sollte der Hintergrund nicht blau sein. Ich sollte einen Gradienten haben. Gehen wir also zurück zum Hintergrundfarbverlauf. Und geben wir ihm dasselbe Hellblau machen es aber dunkler. Und dann ändere das auf Radio. Wir können den Standort leicht verschieben oder dieses Blau so reduzieren. Jetzt wollen wir hier einfach ein Bild und das Basisbild hinzufügen . Wähle das aus. Lass uns gehen und jedes Bild hochladen, das wir wollen. Das ist das, das ich benutzt habe. Am Ende des Tages lernen wir nur, wie man Elementor benutzt Sie sollten sich frei fühlen, jede Art von Website zu erstellen, die Sie möchten Fügen wir nun direkt darunter eine Trennlinie hinzu. Also füge hinzu. Immer noch unter Basic, wir haben das Trennelement Lass es uns direkt unter dem Bild ablegen. In Ordnung, es scheint, dass diese Spalte standardmäßig auf Zeile gesetzt ist. Ja, wir sollten zur vertikalen Spalte wechseln. Und jetzt fügen wir diesen Teiler hinzu. Einfach so. Wenn der Teiler ausgewählt gehe ich zur Breite und reduziere ihn ist, gehe ich zur Breite und reduziere ihn auf, sagen wir, 50% und richte ihn mittig aus, gehe zum erweiterten Rand nach oben Bis dahin, dann Stil. Lassen Sie uns diese zunächst auf Schrägstriche umstellen, aber Sie können es nach Belieben ändern Falls es nicht nach Schrägstrichen aussieht, klicken Sie hier einfach auf Anzahl. Deine könnte erscheinen. Lass uns sehen. Ordnung. Lass uns das Gewicht jedes Schrägstrichs erhöhen Erhöhen Sie die Größe so. Reduziere das Gewicht leicht. Spielen Sie also mit diesen Einstellungen herum, bis Sie den richtigen Schrägstrich haben , oder wählen Sie einfach eine andere Option, die Sie hier möchten. Sie könnten sich auch für lockig entscheiden, was, nein, gekrümmt ist. Ich mag diesen auch. Lassen Sie mich das sogar behalten und dann warten. Größe. Oh, das ist die Höhe, Menge. Und ich möchte diese gelbe Farbe wählen. Und gib ihm diese gelbe Farbe. Wenn Sie zu Schrägstrichen wechseln, lassen Sie uns mit der Lücke herumspielen, die Breite erneut reduzieren und dann veröffentlichen Dieses Bild ist etwas größer als die Textfelder. Es ist nicht schlecht, aber wir wollen sicherstellen, dass alles ein bisschen kompakter ist Dieser Abschnitt ist auch zu breit. Also möchte ich den gesamten Container auswählen, in dem sie sich befinden, und diesen Wert auf 70% ändern. Veröffentlichen Sie das. Und lass uns sehen, was wir als Nächstes haben. Ja, es ist ein bisschen ausgewogener. Also spielst du einfach mit diesen Einstellungen herum und siehst, wie du das kreativer gestalten kannst. Jetzt habe ich diese Dienste nicht aktualisiert. Das könnte zum Beispiel sein, lass uns zum Inhalt gehen. Lassen Sie uns das M entfernen Ändern Sie dann die Dienste auf Grafikdesign, wählen Sie dieses aus und entfernen Sie das M-Webspace-Design Modeling. Veröffentlichen Sie das. Sie können auch mit dem Separatortyp herumspielen, wenn Sie zum Trennzeichen wechseln . Wo änderst du das? Ich denke, es steht unter dem Inhaltstrennzeichen. Es kann sich zu etwas Festem mit Stern ändern. Ja, spielen Sie einfach damit herum und sehen Sie die besten Ergebnisse, die Sie erzielen können. Ich nehme eine gepunktete Standardeinstellung. Veröffentlichen. Noch einmal. Ja, ich finde, es sieht jetzt gut aus. Ja, das sollte konvativer sein. Lass uns den Text auswählen. Gehe zu Fortgeschritten mit, ich sage 50%. Veröffentlichen und los geht's hier. Ja, du kannst sogar 40% der Breite machen. 40% davon. An dieser Stelle werden wir diese Lektion beenden. Jetzt noch eine Sache. Wir brauchen etwas Polsterung unter und über dem Inhalt des Containers Das Padding sollte sich also auf dem Container selbst befinden, Container ausgewählt, erweitert, diesen unterbrechen, dann oberer Rand von 50, unterer Abstand von 60 veröffentlichen Einfach so. Also wir sehen uns in der nächsten Lektion. 17. Portfolio-Abschnitt: Hey, willkommen zurück. Jetzt ist es an der Zeit, den vorherigen Arbeits- oder Portfoliobereich zu erstellen. Also, wie erstellt man das? Ich kehre dazu zurück. Gehen wir zu unserem Redakteur. Ich werde das einfach duplizieren. So haben wir jetzt zwei. Wählen Sie den Container selbst aus, gehen Sie zum Stil und entfernen Sie die Farbe. Wählen Sie den Hintergrund aus und entfernen Sie ihn dann . Was brauchen wir noch? Wir müssen diese Container entfernen, alle. Lassen Sie uns in der Tat einfach einen Container erstellen. Fügen wir einfach einen Container direkt darunter hinzu. Ja. Und lassen Sie uns den Container selbst auswählen und ihn zu 60% der Breite machen. Tatsächlich 50 oder 40%. 50% Jetzt wollen wir hier ein Bildfeld hinzufügen. Also Bildbox. Und wir möchten verwenden, nicht die Bildbox von Elementor selbst verwenden die Bildbox von Elementor selbst Benutze die Bildbox von Elements Kid. Ich werfe das da rein. Und ich werde es zweimal duplizieren, eins, zwei, dann wähle ich den Container selbst aus und wechsle zur Zeile. Jetzt haben wir drei Bildfelder. Jetzt möchte ich, ich möchte diesen Projektnamen kopieren das erste Bildfeld auswählen. Lass uns das verschieben. Gehen wir zur Leiche und ändern die Überschrift. Gehen wir zur Beschreibung, fügen sie dort und die Schaltfläche sollte das Ansichtsprojekt speichern. Lass das zusammenbrechen. Lass uns zum Bild gehen. Ich möchte ein Bild auswählen, Dateien hochladen. Ich wähle das als erstes Bild aus. Wähle das aus. Nachdem der Inhalt fertig ist, gehen wir zum Styling. Gehen wir zum Bild und geben ihm einen Grenzradius. Von den Top 20. Also das ist oben links. Gehen wir nach rechts, 20. Ja. Gehen wir zur Leiche. Grenzradius, durchbrich die unteren 20. In Ordnung, geben wir ihm zuerst einen Hintergrund. Art des Hintergrunds. Geben wir ihm eine Geben wir ihm vorerst diese Farbe. Also, als wir ihr jetzt einen Flaschenradius von 20 gaben, gab es ihr auf dieser Seite. Gehen wir also nach links 20. Gehen wir zum Button. Ordnung. Geben wir ihm diese dunkle Farbe. Geben Sie also diese dunkle Farbe so ein. Und wenn Sie mit der Maus darüber fahren, möchten wir, dass es eine Verlaufsfarbe hat. Wählen wir also Gelb und Orange. Es sollte gelb sein. Sprechen wir Orange als erste Farbe. Und jetzt schalten wir diese einfach so auf 90 Grad um. Wir können diese Farbe auch unter dem Hauptteil ändern : Titel, Typografie, Farbe Geben wir ihm den Titel Typografie vor Farbe. Sollte ein helleres Grau sein. Ja, hat sich hellgrau eingenistet. Kopieren Sie das, wählen Sie diesen Pastestil, wählen Sie diesen Einfügestil Wählen Sie dies aus, wählen Sie ein Bild, ein Projektbild. Ich wähle das aus. Versuchen Sie nun sicherzustellen, dass alle Bilder des Projekt-Images dieselbe Größe haben. Weil es die Bildgröße ist, die bestimmt. Wie Sie jetzt sehen können, sehen sie ein bisschen komisch aus, aber ich hatte einfach keine Zeit die beiden verschiedenen vorzubereiten um alle Projektbilder vorzubereiten, aber ich versuche, sie auf die gleiche Größe und die gleichen Abmessungen zu bringen, damit sie alle identisch aussehen. Wie Sie sehen können, sind diese vorzeigbarer als ein großes ein kurzes, aber es liegt an Ihnen, das zu veröffentlichen Lassen Sie mich einfach diese Beschreibung kopieren, das auswählen, zum Inhalt übergehen und den Text einfügen Kopiere das, geh hierher, Körper, füge es ein. Z Culture Magazine ist der Titel. Barton sollte View Projects lesen. Veröffentlichen Sie diese Ansicht. Scrollen Sie nach unten. Da haben wir's. Ein netter Bereich für mein Portfolio. Mein Portfolio. Das füge ich da ein. Und ich denke, jetzt sind wir bereit, mit dem nächsten Abschnitt fortzufahren, dem Abschnitt mit Kundenreferenzen Was sagen die Leute über Ihr Unternehmen? Wir sehen uns in Kürze. 18. Erfahrungsberichte von Kunden: Jetzt ist es an der Zeit, diesen Abschnitt mit Kundenreferenzen zu erstellen, und genau das wollen wir erreichen Wechseln Sie also zu unserem Editor. Genau hier. Ich werde diesen Abschnitt einfach duplizieren. Also duplizieren Sie das. Und jetzt haben wir es hier unten. Und ich werde einfach alles löschen, was sich in diesem Container befindet, weil er bereits die Einstellungen hat, die wir benötigen. Jetzt sage ich, füge Elemente und Testimonials hinzu. Und wie Sie sehen können, haben wir ein kostenloses Testimonial mit Elementor und ein weiteres kostenloses Das ist das Elements-Kit, das wir brauchen. Das lasse ich da fallen. Und wie Sie sehen können, gibt es mehrere Stile. Derjenige, den ich als Referenz ausgewählt habe, ist dieser. Also wähle ich Stil fünf. Also da haben wir es. Und ich gehe in die Einstellungen und wir wollen zu jedem Zeitpunkt zwei Folien zeigen , also eins, zwei. Solange diese Option ausgewählt ist, gehe ich zu den Einstellungen und erweitere den Bereich Kundenreferenz. Das sind dann die Standard-Platzhalter für Kundenreferenzen. Deshalb werde ich den ersten Erfahrungsbericht erweitern . Also werde ich einfach ein paar Texte auswählen, vielleicht ist das nur ein Platzhaltertext weil ich ihn nicht eingeben möchte, sondern dort einfügen Das hat der erste Kunde gesagt. Und ich werde diesem Kunden den Namen Clark Kent geben . Die Bezeichnung ist vielleicht grenzenlos. Metro Goldwine. Die zweite, vielleicht Clark Kent zusammenbrechen lassen und zu Testimonium zwei gehen Sagen wir Jennifer Anniston mit der E-Bezeichnung CFO Green CFO Ich hole mir gleich hier etwas Text. Vielleicht das. Und fügen Sie es in die Testimonial-Bewertung ein und erweitern Sie die dritte. Wir haben also zumindest einen Abschnitt mit grundlegenden Testimonials, aber wir können es besser machen also zunächst Lassen Sie uns also zunächst dazu übergehen und das Portfolio auf Testimonials umstellen Portfolio auf Testimonials umstellen Und lassen Sie uns hier mit den Testimonials unserer Kunden beginnen . Da haben wir's den Titel erneut zusammenklappen und ihn hier für das Testimonial auswählen, können wir uns entscheiden, ob wir eine Bewertung abgeben möchten Vielleicht hat uns dieser Typ eine Vier-Sterne-Bewertung gegeben und die anderen haben uns zwei gegeben Also werde ich das einfach veröffentlichen. Geh stilvoll rein, denn jetzt wollen wir das stylen. Wir können auch zu diesem Testimonial zurückkehren , jedes Testimonial erweitern und einen Kunden-Avatar hinzufügen Also wähle ich das aus und gehe zum Hochladen. Nehmen wir an , das ist Uhr Wählen Sie aus. Und jetzt sind wir da. Also werde ich dasselbe für die anderen beiden tun. Veröffentlichen Sie das und lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Da haben wir's Jetzt können wir ihnen also ein paar abgerundete Ecken geben , wenn Sie das bevorzugen. Solange es noch ausgewählt ist, gehe ich zu Stil, Layout, Randradius. Mal sehen, 20, einfach so. Veröffentlichen. Wir müssen nicht tief gehen, aber wie Sie sehen, können wir verschiedene Teile der Testimonials bearbeiten Zum Beispiel diese Zitate, das Zitatsymbol, wir können die Farbe ändern Wie Sie sehen können, können wir ihm die gewünschte Farbe geben. Im Moment ist es rot, aber das ergibt keinen Sinn. Also werde ich es einfach bei etwas Blau belassen, sagen wir genau dort, aber wir können die Opazität reduzieren, um es weniger sichtbar zu machen, vielleicht bis zu dieser Stelle, und das veröffentlichen eine Vorschau der Änderungen an. Und da haben wir's. Sie können auch hier zu den Inhaltseinstellungen zurückkehren und die Geschwindigkeit einstellen. Wenn Sie möchten, dass es vor dem Scrollen länger bleibt, können Sie vielleicht sagen, dass wir 2000 Millisekunden benötigen möchten Das sind 2 Sekunden. Sie können sich zum Beispiel auch dafür entscheiden, Punkte anzuzeigen. Deshalb werde ich genau hier Punkte anzeigen, damit ich auf Schaltflächen klicken kann, um zu navigieren. Und Sie können die Punktfarbe bearbeiten. Ich denke, es ist ein Hintergrundtyp. Du kannst ihm diese gelbe Farbe geben. Ordnung, geben wir ihm Weiß und wenn es aktiv ist, können wir ihm diese gelbe Farbe geben. Wenn es aktiv ist, lassen Sie mich diesen Stil auswählen, zum Fokustitel wechseln, diesen kopieren, zu diesem zurückkehren, zu Punkt gehen, zum aktiven Hintergrund wechseln, ihm diese Farbe geben. Also jetzt ist der aktive der gelbe. Veröffentlichen Sie das. eine Vorschau der Änderungen an. Da haben wir's. So erstellen Sie also den Abschnitt mit den Testimonials. 19. Bewegung - Effekte: Jetzt ist es an der Zeit, an den Bewegungseffekten zu arbeiten. Wenn ich die Seite aktualisiere, werden Sie feststellen, dass sich die Elemente reibungslos bewegen. Lassen Sie mich diese Seite einfach so aktualisieren. Bewegung Diese Bewegungseffekte verbessern das Benutzererlebnis wirklich. Wenn ich scrolle, haben wir den Eingang genau da. Den haben wir auch. Wie schaffen wir das also? Gehen wir zu unserem Redakteur. Gehen wir wieder rein. Ich werde das einfach schließen. Weil wir die Kopfzeile genau hier haben und der Heldenbereich Spalten hat, die jetzt ganz nach oben gehen, weil das ein Sticky-Header ist. Auswahl dieser Spalten im Heldenbereich ist etwas schwierig. Also drücke ich Control I, um die Struktur aufzurufen. Und jetzt können wir in diese Container gehen. Wählen wir nun den Container aus, dem sich alles befindet, und gehen wir zum erweiterten, zusammengeklappten Layout dann zu Bewegungsfehlern. Gehen wir zur Eingangsanimation. Ich liebe es, nach links zu verblassen. Das bringt es von links rein. Und natürlich werde ich diesen anderen auswählen, den, der das Bild enthält. Gehe zum erweiterten Collap-Layout, gehe zu Bewegungseffekten, Eingangsanimation, rechts einblenden, einfach so. Aber jetzt ist dieses Bild vom Hintergrund getrennt. Also wollen wir eine kurze Verzögerung bei diesem Bild von dem Typen. Um das zu erweitern, kann ich einfach das Element Typ auswählen dann zu erweitertem Layout und Bewegungseffekten übergehen. Eingangsanimation wird nach rechts ausgeblendet, aber wir wollen die Animation verzögern, Animationsverzögerung vielleicht um 300 Millisekunden Das heißt, weil die Spalte selbst dieses Recht hat, ohne Verzögerung auszublenden, wird es zuerst angezeigt, wird es zuerst angezeigt, und dann hat das Bild eine Es wird etwas später reinkommen . Lassen Sie uns das einfach veröffentlichen und eine Vorschau der Änderungen anzeigen. Überprüfe das. Genau so. Aber jetzt müssen wir dasselbe für diesen Textblock tun. Lassen Sie uns einfach diese Seite aktualisieren und sehen. Sie kommen alle rein, weil wir nur den Container animiert haben, in dem sie sich befinden. Wenn wir uns zuerst mit den einzelnen Elementen wie diesem Text befassen, können wir sie gleich behandeln, jedes Element, dieselbe Behandlung. Das kann also standardmäßig mit dem Container kommen, dann beginnen wir hier mit unserer Verzögerung. Alex, gehe zu den fortgeschrittenen Layout-Bewegungseffekten, die mit einer Verzögerung von 200 Millisekunden nach links übergehen mit einer Verzögerung von 200 Millisekunden nach links Dann wird das Layout mit Bewegungseffekten zusammengeklappt und nach links ausgeblendet, 300 Millisekunden. Vielleicht wählen wir den gesamten Container aus, in dem sich diese beiden befinden, legen die Bewegungseffekte an und blenden nach links in 400 Millisekunden blenden nach links in Sie können so kreativ werden, wie Sie möchten. Wie Sie hier bemerkt haben, haben wir mehrere andere Arten von Animationen. Sie müssen kein Fade-In machen. Sie können die Ansicht auch vergrößern oder vergrößern, wie Sie möchten. Sehen wir uns jetzt eine Vorschau der Änderungen an. Genau so. Lass uns die Seite noch einmal aktualisieren. Da haben wir's. Das liebe ich. Also, das ist dasselbe, was wir überall wiederholen werden, wo immer wir wollen. Wir werden das jetzt machen und ich überlasse es dir als Auftrag. Also gilt derselbe Fall dafür. Ich werde das auswählen. Reduzieren Sie die Bewegungseffekte und verblassen Sie sie nach links. Wählen Sie diese Option, legen Sie die Bewegungseffekte fest und blenden Sie sie nach rechts aus. Ich wähle diesen, den Button, und verzögere ihn Wird mit einer Verzögerung von 300 Millisekunden nach links ausgeblendet. Ich werde das auch standardmäßig angeben, dieser Container bringt alles gleichzeitig rein Ich möchte, dass du das zuerst einbringst, dann wird es eine Verzögerung von 200 und diese 300 geben. Wenn das ausgewählt ist, lassen Sie uns hier nach rechts übergehen, Verzögerung von 200 und diese Verzögerung von 300 Okay. Rechts einblenden. Okay. Da haben wir's. Also schau dir das mal an. Genau. Also, wenn ich zu unserer Referenz wechsle, wenn ich das aktualisiere. Schau dir an, wie die reinkommen. Überlegen Sie sich also, wie Sie ein ähnliches Ergebnis erzielen können wie ich. Das ist deine Aufgabe. Ich hoffe, du hast verstanden, was wir hier gemacht haben. es ist eine interessante Aufgabe Ich denke, es ist eine interessante Aufgabe , die Ihnen gefallen wird. 20. Links: Jetzt ist es an der Zeit, sicherzustellen, dass unsere Website navigierbar ist. Wenn Leute auf Link klicken, müssen sie irgendwohin gebracht werden auf unserer Referenzwebsite Wenn Sie auf unserer Referenzwebsite auf Dienste klicken, wird sie nach unten zum Bereich „ Meine Dienste“ gescrollt. Wenn Sie auf Portfolio klicken, wird es nach unten zu meinen vorherigen Arbeiten gescrollt Wenn wir zum Kontakt gehen, geht es zum Kontaktbereich Wie fügen wir Links hinzu und wie stellen wir sicher, dass Sie bei jedem Linkklick an die richtige Stelle gelangen? Mal sehen, wie das geht. Hier sind wir in unserem Arbeitsbereich. Wenn ich klicke, gehen wir zum Editor. Wenn ich die Schaltfläche Dienste auswähle, haben wir hier, wie Sie sehen, einen Platzhalter. Aber wir möchten sicherstellen, dass, wenn Sie darauf klicken, es nach unten zu diesem Bereich „Meine Dienste“ scrollt Was wir also verwenden wollen, ist ein Ankerlink. Also werde ich Element hinzufügen, Anker, Menüanker sagen. Und das bedeutet, dass Sie es genau dort platzieren, wo Sie der Klick auf die Schaltfläche hinführen soll. Also wollen wir, dass es uns hierher bringt. Also werde ich dieses Ankerelement genau hierher ziehen. Und das ist nicht der richtige Ort, aber ich möchte veranschaulichen, warum es nicht der richtige Ort ist. Also haben wir es genau dort platziert, und jetzt ist es das ausgewählte Objekt. Also, was wir hier tun wollen, ist, ihm einen Namen zu geben, welchen Namen wir im Link-Feld der Schaltfläche verwenden werden. Das sind also Dienstleistungen. Es könnte ein beliebiger Name sein. Da wir ihm also den Namen Services gegeben haben, ist dies das Ziel. Wenn wir also auf die Schaltfläche hier im Linkfeld gehen, wollen wir ihr diesen Zielnamen geben. Also Dienstleistungen. Und das heißt, wenn wir darauf klicken, werden wir weitergeleitet. Ich werde nach unten zum Bereich Dienste scrollen. Aber jetzt ist das Problem, es wird uns hierher bringen. Es scrollt und platziert dieses Ankerelement ganz oben Also, wenn ich das veröffentliche und eine Vorschau der Änderungen sehe. Wenn wir auf diese Dienste klicken, wird, wie Sie sehen können die Überschrift ausgeblendet wo wir sein wollen, und wo wir nicht sein wollen. Deshalb habe ich gesagt, dass es nicht richtig ist, es dort zu platzieren. Dies ist nur ein Fehler, der auf dem Design der Software basiert. Deshalb wollen wir es etwas höher platzieren , sodass die Überschrift etwas niedriger ist, wenn auf die Dienste geklickt wird Also wollen wir das herausziehen und es vielleicht genau dort im vorherigen Abschnitt platzieren es vielleicht genau dort im vorherigen Abschnitt Es spielt keine Rolle, in welchem Abschnitt es sich befindet. Worüber wir nachdenken möchten, ist dieses Ankerelement ganz oben platziert wird. Und wenn die gewünschte Überschrift zu nah dran ist, wird sie durch diesen schwebenden Header verdeckt. Deshalb möchten wir, dass es weiter von der Überschrift unseres Zielabschnitts entfernt ist. Nun, da es da ist, wollen wir die Änderungen veröffentlichen und eine Vorschau anzeigen. Wenn wir jetzt darauf klicken, wird dieses Ding ganz oben platziert. Und weil genau hier zwischen dieser und der Überschrift diese Lücke besteht , wurde zumindest die Überschrift nach unten verschoben. Das ist also der Kern dessen, was wir erreichen wollen. Als Nächstes wollen wir uns meine Arbeit ansehen. Da wir jetzt also über die Benennung des Ziels Bescheid wissen, können wir ihm einfach das Portfolio als Namen geben , Portfolio. Deshalb werde ich diesen Anker duplizieren. Und ziehe ihn runter, ich kann nicht weiter scrollen, also lass mich das einfach löschen und hierher gehen und dann Anker eingeben Ich möchte es hier in diesem vorherigen Abschnitt ablegen. Solange es noch ausgewählt ist, geben wir ihm den Namen Portfolio. Und weil auf unserer Schaltfläche das Hash-Portfolio bereits veröffentlicht ist, gehen wir hier rein. Klicken Sie hier, um zu meinem Portfolio-Bereich zu gelangen. Die große Frage ist nun, was ist mit diesen ganz oben Wenn ich auf Dienste klicke, geht es nirgendwohin. Wie haben wir dieses Menü erstellt? Wir sind in das Armaturenbrett gegangen. Gehen wir also in die Erscheinungsmenüs. Und denken Sie daran, wie wir diese benutzerdefinierten Links erstellt haben. Wenn ich also diesen benutzerdefinierten Link erweitere, denken Sie daran, dass er eine URL hat. Wir haben Hash verwendet. Während wir ihn erstellt haben, haben wir einen Hash hinzugefügt. Das ist es. Das sind also Dienstleistungen. Wenn man das zusammenfasst, ist das Portfolio. Kollabieren Sie dort. dann natürlich aus dem gleichen Grund an, Nehmen wir dann natürlich aus dem gleichen Grund an, das ist das Kontakt-und-Speicher-Menü. Jetzt gehen wir wieder rein und aktualisieren diesen Editor, um ihn auf die Änderungen aufmerksam zu machen , die wir im Dashboard vorgenommen haben. Sehen wir uns nun eine Vorschau der Änderungen an. Wenn Sie jetzt auf Dienste klicken, wird uns ihr Portfolio direkt angezeigt. Und Kontakt, wir haben kein Ankerelement hinzugefügt. Lass mich das einfach schließen und wieder runter. Wenn wir nach unten scrollen, haben wir nur bis zu Testimonials Lassen Sie mich das einfach duplizieren , jetzt haben wir das. Wir können sagen, löschen wir diesen Client, sagen wir Kontaktraum, M. Und jetzt können wir sagen, Anker hinzufügen, und platzieren wir ihn direkt in diesem vorherigen Abschnitt. Kontakt aufnehmen, veröffentlichen. Und weil wir ihm bereits diesen Hash-Kontakt gegeben haben, wir hierher weitergeleitet, wenn wir hier klicken und auf Kontakt klicken werden wir hierher weitergeleitet, wenn wir hier klicken und auf Kontakt klicken. Jetzt werden wir an diesem Kontaktformular arbeiten. Wenn wir zur Referenz-Website gehen, müssen wir ein Kontaktformular erstellen, und das ist für eine spätere Lektion. Also mach dir darüber keine Sorgen. Wir wollten nur, dass die Links stimmen. Wir haben jetzt auch dieses Buch für mich. Also gehen wir natürlich zu Elementor, rechts, Link, Openlink in New Ich möchte dieses Buch für mich bearbeiten. Und es ist überflüssig, aber es soll dir nur zeigen, dass du hier einen Button haben kannst, aber er wird uns auch zum Kontaktformular führen, denn wenn dich jemand buchen will, geht er zum Kontaktformular. Buch M ist also der Button. Also kontaktieren, veröffentlichen. Also gut, zurück zum Editor, aktualisiere. Und aktualisieren Sie auch diese Seite hier und sagen Sie Book me. Dadurch gelangen wir zur Seite „ Kontaktiere mich“. Ich denke, das ist das Ende dieser Lektion. Ich sehe dich in der nächsten. 21. Fußzeilenabschnitt: Jetzt ist es an der Zeit, den Feer zu erstellen. Gehen wir gleich hier zu unserem Redakteur. Jetzt werden wir die Fußzeile nicht gleich hier erstellen. Dies ist jetzt für das Kontaktformular reserviert. Wir werden diesen Editor verlassen. Wir werden auch nicht im Header-Bereich arbeiten. Wir werden in das Dashboard gehen und uns daran erinnern, wie wir die Kopfzeile mit den Elementen Kit, Kopf- und Fußzeile erstellt haben die Kopfzeile mit den Elementen Kit, Kopf- und Fußzeile erstellt Gehen wir also zurück zum Kit mit den Dashboard-Elementen, Header-Fußzeile. Jetzt haben wir eine Kopfzeile Nehmen wir an, fügen Sie eine Fußzeile für neue Vorlagen hinzu und wählen Sie hier die Fußzeile aus. Lassen Sie uns es auf der gesamten Seite sichtbar machen und sagen wir, den Inhalt bearbeiten . Hier sind wir. Auf diese Weise können wir auch etwas anderes über Elementor erfahren, nämlich dass Sie vorgefertigte Vorlagen verwenden können Sie müssen nicht alles selbst erstellen. Dies sind Elementor-Vorlagen, und dies sind Elements-Kit-Vorlagen Also werde ich darauf klicken und das öffnet dieses Popup Wie Sie sehen können, haben wir alle Seiten. Vollständige Seite, Sie können einfach klicken und installieren, anstatt stundenlang die Seite selbst zu erstellen. Aber natürlich wollten Sie lernen, wie man Webseiten von Grund auf neu erstellt , bevor Sie Vorlagen verwenden. Gehen wir nun zur Kategorie und wählen Fußzeile. Ja, lass uns gleich hier zur Fußzeile gehen. Und der, den ich ausgewählt habe, ist dieser hier. Also sage ich einfach Einfügen und schon ist es eingefügt. Denken Sie daran, dass unsere Website den Hauptcontainer zu 100% belegt und der Container, der den Inhalt im Außencontainer enthält, zu 80% belegt Stellen wir also sicher, dass dies bei dieser Vorlage der Fall ist. Wenn ich das auswähle, wie du sehen kannst, das ist Fitzels, wollen wir sichergehen, dass es prozentual ist und es 100% ist Und diese innere Kontrolle so, dass ich diesen Behälter auswählen kann, der den Inhalt enthält Ich möchte, dass es 80% des äußeren Containers ausmacht nun den äußeren Behälter auswählen, richten wir alles in der Mitte aus. Veröffentlichen Sie das und lassen Sie uns die Änderungen überprüfen. Überprüfe das. Da haben wir's. Jetzt können wir darauf klicken, um ein Logo hinzuzufügen. Wählen Sie einfach unser Logo aus, wählen Sie. Ich gehe zur Referenz-Website und wähle hier die Option Fotonachricht kopieren aus. Füge das dort ein. Nein, das ist die Überschrift. W der Titel, die Beschreibung. Strg Shift. Zurück zur Referenz, Erstellung zeitloser Kommunikationsmaterialien und weiter zur Titelbeschreibung, A, Control Shift Und wählen Sie diese Schaltfläche. Meine Arbeit ansehen. Und ich möchte daraus einen externen Link machen. Nehmen wir also an, wenn wir hier auf meine Referenz-Website gehen , ist dies die Referenz. Wenn ich darauf klicke, öffnet sich ein neuer Tab und ich gehe zu meinem B-Hands-Portfolio. Das ist meine Arbeit. Also meine Arbeit ansehen, öffnet meine Arbeit in einem neuen Tab. Also, wie machen wir das? Gehen wir zurück und lassen Sie mich das einfach aus der Referenz kopieren. Jetzt, wo wir wieder reingehen, haben wir den Button ausgewählt. Ich werde es in das URL-Feld einfügen und um es in einem neuen Tab zu öffnen, klicke ich darauf und sage In neuem Fenster öffnen. Dann veröffentliche das. Überprüfe das. Wenn ich darauf klicke, öffnet sich mein Behans-Portfolio Wie Sie sehen können, alle Rechte vorbehalten und die N-Leiste hier muss bearbeitet werden Wir wollen, dass der Behälter , in dem sie sich befinden, auch 80% des äußeren Containers ausmacht. Das entspricht nicht unserem Farbschema. Also möchte ich hier auf unsere Seite gehen und eines der Elemente mit der Farbe auswählen. Lass uns das Gelb kopieren, zurück zum Fußzeilen-Editor gehen, dieses Element auswählen, zum Stil gehen, zum fokussierten Titel Ist das gleiche Überschriftenelement. Veröffentlichen Sie das. Wenn ich das auswähle, ist das Farbschema, wie du siehst, auch nicht dasselbe. Das ist eine Icon-Liste. Gehen Sie also zum Stiltext, bewegen Sie den Mauszeiger und fügen Sie die Farbe genau dort Beim Hover sollte es das Markengelb sein. Der gleiche Fall gilt für diesen Schaltflächenstil. Die Textfarbe auf H sollte unserer Markenfarbe entsprechen. Veröffentlichen. Lass es uns überprüfen. Da haben wir's. Aber jetzt müssen wir die Schaltflächen aktualisieren, weil sie nirgendwohin führen. Diese wurden mit der Vorlage geliefert. Wir haben sie nicht festgelegt. also den Inhalt der Elemente auswählen, gehen wir zum B über. A sollte einfach zur URL, zur Startseite gehen , oben zusammenklappen, zum Portfolio gehen. Portfolio sollte zu HH gehen, Portfolio Merken Sie sich den Anker, Dienste sollten zu Hash-Services gehen Dienste und Kontakt sollten dem Hashwert „Kontakt“ zugewiesen werden. Veröffentlichen Sie das und lassen Sie uns eine Vorschau der Änderungen anzeigen. Tatsächlich sollte es auf dieser Seite sein. Lassen Sie mich einfach die Seite aktualisieren, damit die Fußzeile sie wiedergibt. Wenn ich jetzt auf Portfolio klicke, wird es dort angezeigt. Wenn ich zu Kontakt gehe, gehe ich da runter, wenn ich hier runter gehe, Dienste, dann scrollt es nach oben. Sehr gut. Sie können auch darauf klicken, um einfach so nach oben zu gelangen. Ich denke, die Fußzeile ist jetzt abgedeckt. Nun, da ist da noch dieses Element der sozialen Symbole, was für Sie jetzt wahrscheinlich einfach ist basierend auf allem, was wir bisher tun konnten Wenn wir also zunächst das Facebook-Symbol erweitern, können wir zur Farbe gehen und Benutzerdefiniert sagen und es auf die gewünschte Farbe ändern. Ich habe es nicht in meiner Zwischenablage. Aber das ist etwas, was du tun kannst. Wenn Sie die Farbe in die Markenfarbe ändern möchten , sodass sie beim Bewegen des Mauszeigers zu Orange oder Gelb wechselt , müssen Sie diese Aufgabe erledigen Aber ansonsten ist jetzt alles andere abgedeckt. Wir können dies auch auswählen und diesen Inhalt 2027 ändern. Und ändere diesen Foto-Pin in Alex Doe. Dein Name jetzt. Veröffentlichen Sie das. Alex Doe ist Reservat. 22. Kontaktbereich: Zeit, ein Kontaktformular für unsere einseitige Website zu erstellen . Als wir hier zu unserem Redakteur gingen, hatten wir bereits einen Kontaktbereich erstellt. Was hier fehlt, ist ein Kontaktformular. Wie ich bereits erwähnt habe, zum Erstellen eines Formulars benötigen wir zum Erstellen eines Formulars ein Plugin, ein Formular-Plugin. Es gibt viele Arten von Formular-Plugins. Mein Favorit und der, den ich verwende, ist Forminator. Gehen wir also in unser Dashboard. Ich gehe einfach, weil wir mit der FUTA fertig sind , gehe zu Wordpress Das bringt uns zum Armaturenbrett. Ich gehe zu Plugins, füge Plugin hinzu. Und ich tippe hier ein. Lassen Sie mich das alles einfach abweisen. Ich gebe hier Ominator ein. Hier sind wir, dass FormatorFMS jetzt installiert ist. Aktivieren. Es wird genau hier auftauchen. Ich kann einfach direkt zu Forms gehen. Oder lassen Sie mich einfach auf das Dashboard klicken, um zur Startseite des Plugins zu gelangen. Hier ist die Homepage. Hier möchte ich die Angebotsanfrage wählen, weil wir hier im Wesentlichen möchten , dass jemand ein Angebot anfordert. Wenn Sie sich die von mir erstellte Referenzwebsite ansehen, wo ist die Referenzwebsite? Hier möchten wir, dass jemand einen Service auswählen kann : Webdesign, Kartenmodellierung, vielleicht Videobearbeitung, dann einige Projektdetails, dann seinen Vornamen und seine E-Mail-Adresse eingeben und ein Angebot für das Projekt anfordern kann, das er gerade beschrieben hat. Also, wie machen wir das? wieder reingehen, können wir ein Formular von Grund auf neu erstellen, aber das ist eine Lektion für eine zukünftige Klasse. Im Moment können wir einfach eine Vorlage verwenden. Also erstelle ein Formular. Das sind also die Felder, Dienste, zusätzliche Knoten, Vorname, E-Mail-Adresse, Telefonnummer. Wenn Sie die Telefonnummer nicht möchten, können Sie dieses Feld einfach entfernen. Wenn Sie ein Feld umbenennen möchten, klicken Sie einfach darauf und ändern Sie es. Beschreiben Sie also Ihr Projekt. Projekt bewerben. Jetzt heißt es also, dein Projekt zu beschreiben. Für den Vornamen können Sie ihn erweitern, um das Präfix, den zweiten Vornamen und den Nachnamen zu deaktivieren , da wir nur den Vornamen wollen. Wir wollen nicht mehrere Felder. Und für die E-Mail sieht es gut aus. Also sage ich einfach Veröffentlichen und wir bekommen diesen Kurzcode, wir im Vordergrund einfügen und das Formular wird überall dort angezeigt, wo wir diesen Kurzcode einfügen. Also kopiere ich den Shortcode. Schließe das, gehe zu unserem Editor, füge Element hinzu, Kurzcode-Element. Es ist nur ein Platzhalter, in den Sie einen beliebigen Kurzcode einfügen Also lass es dort fallen. Und jetzt fügen wir den Kurzcode ein. Wir kopieren es einfach vom Dashboard da drin. Und das Formular sollte hier erscheinen, veröffentlichen. Okay. Lassen Sie uns einfach beantragen, den Editor zu aktualisieren und das Formular zu sehen. Scrollen Sie nach unten. Hier ist das Formular. Nun, diese Dienste sind eine Auswahl. Nein, das ist ein Element vom Typ Checkbox , und das ist nicht das, was wir wollen. Aber bevor wir das ändern, lassen Sie mich einfach hierher zurückkehren und eine Vorschau der Änderungen anzeigen. Gehen Sie zu Kontakt, und so sieht es im Moment aus. Jetzt möchte ich sie schließen, weil wir sie nicht mehr benutzen. Mal sehen, wie man das stylt. also zu unserem Formular im Forminator-Bereich zurückzukehren, habe ich zunächst erwähnt, dass dies ein Checkbox-Feld ist Wir wollen kein Checkbox-Feld. Wir wollen ein Dropdown-Feld. Also werde ich das löschen und sagen, Formularfelder einfügen. Was wir gerade gelöscht haben, ist ein Feld vom Typ Checkbox. Was wir wollen, ist ein Auswahlfeld zum Einfügen. Jetzt brauchen wir hier Optionen. Welche Dienstleistungen bieten wir an? Grafikdesign, Webdesign, Option hinzufügen, Videobearbeitung, Option hinzufügen, Kartenmodellierung. Wenn Sie möchten, dass jemand mehrere Optionen auswählen kann , wie ich es Ihnen gezeigt habe, können Sie diese Mehrfachauswahl treffen. Wenn Sie möchten, dass jemand nur einen Dienst auswählen und beschreiben kann , was er möchte, können Sie es einfach bei einem Dienst belassen. Mal sehen, was noch? Wählen Sie den Servicetyp aus. Bewerben Sie sich. Jetzt können wir das ziehen und darüber platzieren. Es ist das Erste, das Änderungen veröffentlicht. Wenn wir nun zu unserem Editor gehen und das Element, das Shortcode-Element, auswählen und anwenden, werden die Änderungen, die wir gerade im Backend im Dashboard vorgenommen haben, wiedergegeben. Sehen Sie sich eine Vorschau der Änderungen an und lassen Sie uns sehen, mit wem wir Kontakt haben. Jetzt haben wir hier ein Drop-down-Menü, und jemand kann nur einen Servicetyp auswählen. Lassen Sie uns in der nächsten Lektion sehen, wie Sie dieses Formular formatieren , da Sie nicht möchten, dass diese Lektion zu lang wird . Wir sehen uns in Kürze. 23. Formgebung des Formulars: Jetzt ist es an der Zeit, unser Formular zu starren. Lassen Sie mich zunächst auf Vorschau klicken, damit wir sehen können , was wir haben, oder Kontakt aufnehmen Wir haben gemerkt, dass es geschrumpft ist und wir nach links geschoben haben. also hier wieder reingehen, wollen wir zunächst das Formular selbst auswählen, zu Erweitert gehen und für die Breite wollen wir volle Breite angeben, sodass es die gesamte Breite des Containers einnimmt , in dem es sich befindet Veröffentlichen Sie das und lassen Sie uns eine Vorschau der Änderungen anzeigen. Nehmen Sie Kontakt auf. Jetzt nimmt es die gesamte Breite ein, aber wir wollen, dass diese Breite 50% beträgt Ich mag es schmal. Ich fahr hier runter. Ich denke , das ist eine bessere Formgröße. Als Nächstes möchten wir dieses Auswahlfeld bearbeiten. Denken Sie daran, dass wir hier verschiedene Arten von Feldern haben. Dies ist ein Namensfeld. Dies ist ein E-Mail-Feld. Das ist dieses Textbereichsfeld. Und hier gibt es verschiedene Arten von Feldern, und Formuator bietet uns die Möglichkeit, jeden Feldtyp, den Sie verwendet haben, zu bearbeiten Das passiert also in diesem Panel-Erscheinungsbild. Zuallererst können wir zum Stil übergehen. Sie können wählen, ob Sie es als Standard belassen möchten. Wie Sie sehen können, haben wir diese engen Grenzen. Das haben wir. Ich kann sagen, flach, und das wird die Ränder entfernen , wenn wir das veröffentlichen und zu hier gehen, während es ausgewählt ist, anwenden und in der Vorschau ansehen, zum Kontakt gehen. Sie werden jetzt feststellen, dass es keine Grenzen gibt. Sie können es auch fett machen. Das bedeutet kühne Grenzen. Und wie Sie sich vorstellen können, wenn ich hierher gehe und diese Seite einfach aktualisiere, hat sie Grenzen. Das ist es also. Also lassen Sie mich einfach sagen, wir wollen, dass es bei der Standardeinstellung bleibt. Und was uns wirklich interessiert, sind die Farben. Wir möchten benutzerdefinierte Farben verwenden. Das erweitert all diese Arten von Feldern. Dies hier ist ein Auswahlfeld, sodass wir die Auswahl gestalten können. Wir können zum Beispiel sagen, die Rahmenfarbe weiß sein soll und die Rahmenfarbe weiß sein soll. Wenn ich also sage, Änderungen veröffentlichen und hier aktualisieren, ist dieser Rand weiß. Wie Sie sehen können, ist er jetzt weiß. Also, ich möchte ihm einen Farbton geben , weil wir mit diesem Hellblau arbeiten, wir wollen ihm einen dunklen Blauton geben, aber etwas anders, damit es sich beruhigt. Also wollen wir dieses Blau wählen. Ich gehe zu den Seiteneinstellungen. Denken Sie daran, dass wir dieses Hellblau als Teil eines Farbverlaufs verwenden. Wenn du also zum Hintergrund gehst, war es die zweite Farbe. Die obere Farbe war dunkelblau. Also möchte ich dieses Hellblau auswählen. Geh wieder rein und sag, die Rahmenfarbe sollte dunkelblau sein, aber etwas heller. Vielleicht diese Farbe, veröffentliche das. Aber jetzt kannst du gerne mit den Farben herumspielen , die du willst. Gleichzeitig soll Ihnen dies die Vielseitigkeit dieses Plugins zeigen . Wenn ich diese Seite aktualisiere , haben wir jetzt, wie Sie sehen können, dieses Hellblau. Es geht nicht darum, die Dinge gerade sehr schön zu machen. Jetzt können wir auch dieses Symbol und den Text bearbeiten. So können wir zum Beispiel diesen Text weiß machen. Also die Farbe des Textes. Das ist die Feldtextfarbe. Das ist diese Farbe, aber wir wollen die Etikettenfarbe. Lassen Sie uns das veröffentlichen und eine Vorschau der Aktualisierung der Änderungen anzeigen. Ja, das ist also diese Farbe. Ich suche nach dem Feld Lass uns zum Feld Grundlagen gehen und die Bezeichnung ändern. Also die Bezeichnung aller Felder, wir wollen, dass sie vielleicht dunkelgrau ist, veröffentliche das. Wenn wir jetzt hier hingehen und das aktualisieren, ja, wir wollten, dass die Beschriftungen weiß sind. Wenn wir jetzt nach unten klicken, können Sie auch diese Rahmenfarbe des aktiven Elements ändern . Grundlagen des Felds reduzieren. Gehen wir in die Auswahl. Denken Sie daran, dass es Select gibt, und die Auswahl hat hier ein anderes Menü namens Dropdown List. Container-Grenze. Ja. Das hier kann in dieses Grau geändert werden. Veröffentlichen Sie das, und lassen Sie uns die Änderungen überprüfen. Aktualisieren. Nein, das ist nicht die Farbe. Ich möchte, dass wir das Marineblau ändern. Ist es eine Hover-Dropdown-Liste? Umrissfarbe. Konzentrieren Sie sich. Ja, das. Auf welches Element wir uns auch konzentrieren, es hätte sein sollen , sagen wir, diese Farbe. Lassen Sie uns das jetzt aktualisieren. Ja, wie Sie sehen, können Sie jeden Aspekt dieses Formulars ändern. Jetzt wollen wir auch, dass diese Hintergrundfarbe für den Fokus ausgewählt ist , weil das die aktuell gewählte Farbe ist. Wenn wir das auswählen und erweitern, ist es jetzt blau. Also sollte das gewählte Feld vielleicht , sagen wir mal, grau sein. Aktualisiere das. Da haben wir's. Wie Sie sehen können, können Sie damit herumspielen. Ich möchte, dass wir das ändern. Ausgewählt, Fokus schweben. Farbe der Option Geben wir ihm dieses Grau statt dieses dunklen Schwarz. Ich denke, die Option hier ist diese Farbe. Okay, das ist es nicht. Oh, diese Optionen, ich glaube, das haben wir geändert. Es sollte eine dunkle, dunkle Farbe haben. Schweben. Wir können diese Symbolfarbe auch ändern. Wenn es standardmäßig ist, möchten wir, dass es weiß ist. Änderungen veröffentlichen. Dieses Symbol hier, aktualisiere es. Ja, es ist weiß und wenn es schwebt, ist es blau. Weiß und im Schwebeflug. Ordnung, also ja, also ich möchte, dass ihr diese Farbe ändert Ihr seht diesen hässlichen blauen Rand genau hier. Ich denke, hier ändern wir es. Ich möchte, dass es weiß oder hellgrau, violett ist. Und lassen Sie uns das auffrischen. Ja. Also wollte ich dir nur zeigen, wie man jedes Feld bearbeitet. Nun, das war nur ein ausgewähltes Feld , auf das wir uns konzentriert haben. Wir können es reduzieren und zum Eingabe- und Textbereich gehen. Dies ist ein Textbereich, und das sind Eingabefelder. Denn wenn wir zum Formularfeld zurückkehren dieses auswählen, ist dies ein Namensfeld und es ist ein Eingabefeld. Schließ das. Das hier ist ein Textfeld. Das sind also Eingabefelder, und das ist ein Textbereich. Das ist eine Auswahl. Also zurück zu Aussehen und Farben, wir wollen zum Eingabe- und Textbereich gehen, und hier können wir diese drei beeinflussen. Das sind also deine Aufgaben. Nehmen Sie sich etwas Zeit und spielen Sie mit dem Eingabe- und Textbereich dieses Formulars herum . Sie können auch an der Schaltfläche „Senden“ arbeiten, bei der es sich um die Schaltfläche „ Angebot anfordern“ handelt. Sie können ihm eine Hintergrundfarbe von vielleicht dieser dunklen Hintergrundfarbe geben, und los geht's. Aber ja, geben wir ihm diese gelbe Farbe. Ich möchte, dass wir hier reingehen, in den Seiteneinstellungen das auswählen, von hier aus in den Ausgang gehen , diesen Teigstil wählen, den Fokustitel auswählen, dieses Gelb auswählen, das kopieren, hier wieder rein gehen, es angeben. Geben wir ihm standardmäßig die gelbe Farbe. Und wenn der Mauszeiger darüber bewegt wird, möchten wir ihm die orange Farbe geben . Verstanden Wenn Sie mit der Maus darüber fahren, wollen wir ihm diese orange Farbe geben. Veröffentlichen Sie die Änderungen und sehen Sie sich eine Vorschau an. Lass uns sogar hierher gehen. Klicken Sie auf Wählen Sie das Formular und übernehmen Sie alle von uns vorgenommenen Änderungen und sehen Sie sich eine Vorschau der Änderungen an. Jetzt liegt es an dir, auf YouTube weitere Videos auf Forminator anzusehen , um zu verstehen, wie man dieses fantastische Formular-Plugin benutzt Es ist ein sehr mächtiges Formular-Plugin. Erfahren Sie, wie Sie Ihr Formular genau so starten können, wie Sie es möchten. Wir möchten diese Lektion nicht zu lang machen. Wenden Sie sich also an Webdesign. Also Optionen hier, und dann Angebot anfragen. Nun ein kurzes Update zu etwas, an das ich mich bei der Bearbeitung dieser Lektion erinnert habe. Ich habe dir nicht gezeigt, dass du hier auch die Hintergrundfarbe dieses Containers ändern kannst. Also werde ich diesen Container gleich hier auswählen. Gehe zu Stil, kopiere diese Farbe. Wählen Sie diesen Hintergrundtyp im Containerstil und fügen Sie ihn dort ein. Gehen Sie dann zum Grenzradius von 20. Veröffentlichen Sie das. Tatsächlich können wir auch zu Advanced wechseln und ihm eine Polsterung von 20 geben Veröffentlichen Sie das und lassen Sie uns eine Vorschau der Änderungen anzeigen. Gehe zum Kontakt. Da haben wir's. Ich 24. Reaktionsfähige Kopfzeile: Jetzt ist es an der Zeit, ein starkes Ergebnis zu erzielen und die Seite auf verschiedenen Geräten responsiv zu gestalten. Wie Sie hier oben sehen können, haben wir die Tablet-Porträtansicht und wir haben eine mobile Ansicht. Unsere Aufgabe ist es also, nach unten zu gehen und alles responsiv zu machen Aber das erste, was wir tun wollen, ist mit dem Header zu beginnen Und denken Sie daran, dass wir den Header separat erstellt haben. Gehen wir also zur Bearbeitung mit Elementor und dann zur Kopfzeile. Und tatsächlich werde ich diesen Editor schließen, weil wir in der nächsten Lektion darauf zurückkommen in der nächsten Lektion darauf zurückkommen Im Moment konzentrieren wir uns auf den Header. Also hier ist der Header-Editor. Ich werde das schließen. Wechseln wir also zum Tablet-Porträt, und es erbt die Einstellungen, die wir für den Desktop festgelegt haben Wie Sie sehen können, macht dieser innere Behälter, der alle drei Spalten 80% des äußeren rosafarbenen Containers Also wollen wir das zu 90% machen. Der äußerste Wert liegt bei 100%. Wenn wir in den Desktop-Modus expandieren, haben wir das. Also lassen Sie uns das duplizieren , um zwei Header zu haben, und ich drücke Strg, ich kollabiere dort Jetzt haben wir zwei Header. Wir haben den ursprünglichen Header und den, den wir duplizieren. Jetzt möchte ich das Original ausblenden und an dem duplizierten arbeiten Ich kann also doppelklicken und es das Tablet nennen Doppelklicken Sie auf den Tablet-Header. Doppelklicken Sie darauf. Das ist der Desktop-Header. Das ist vorerst versteckt. Daran arbeiten wir also. Und was wir tun wollen, ist diese Schaltfläche zu entfernen und sie zu erweitern, diesen Container zu erweitern. Wählen Sie tatsächlich einen Container aus, in dem sie sich befinden. Und nehmen wir an, wir wollen Platz zwischen ihnen. Das wird alles innerhalb des Containers auseinanderdrücken . Also Abstand zwischen dem lokalen Element und dem Menüelement. Und der Grund, warum wir den Header dupliziert haben, ist, wenn wir den Button löschen würden. Hätten wir nur einen Header behalten und den Button gelöscht, würde er auf allen Geräten gelöscht werden , auch auf dem Desktop Wir wollen also einen separaten Header ohne die Schaltfläche haben. Jetzt, wo wir das haben , können wir darauf klicken und es erweitern. Wie Sie sehen können, haben wir hier ein Seitenmenü. Und was wir tun wollen, ist zu den Einstellungen für das mobile Menü gehen und hier zum Logo des mobilen Menüs zu gehen, und wir wollen dieses Logo hinzufügen, das auswählen. Wenn wir es jetzt erweitern, ist das Logo da, aber der Hintergrund ist weiß. Gehen wir also zu Stil, Menü-Wrapper, Mobile-Wrapper-Hintergrund Wir wollen ihm diesen dunkelblauen Hintergrund geben. Lassen Sie uns in der Tat sehen. Ich möchte, dass wir ziemlich schnell zu den Seiteneinstellungen gehen. Wir wollen dieses Dunkelblau besiegen. Aus dem seitlichen Hintergrund, dieses Blau, kopiere das, geh von hier aus raus. Verstecken wir das für eine Sekunde. Gehen Sie zurück zum Tablet-Header, gehen Sie zum Stil. Lass uns in der Tat dazu gehen. Klicken Sie auf das Burger-Menü, gehen Sie hier rein und fügen Sie es dort ein. Reduzieren Sie den Menü-Wrapper und gehen Sie zum Menüpunkt. Geben wir dem Objekt eine weiße Farbe als Textfarbe. Bei Hover können wir ihm diese gelbe Farbe geben. Aber auf Hover hat es schon einige schöne Hover-Farben. Wir können auch zum Menü-Wrapper gehen und die gewünschte Breite bestimmen Sagen wir hier Prozentsatz. Und wir wollen, dass es genau dort schmal und nicht zu breit ist. Beachten Sie nun, dass das ToGo-Symbol zu dunkel ist. Also lass das zusammenbrechen. Willst du zum Hamburger-Menü gehen. Hamburger Es gibt den Hamburger zum Mitnehmen und es gibt auch diesen Closed ToGo und es gibt auch Das ist der Closed ToGo. Wir wollen zum Hintergrundtyp Hintergrundtyp wechseln. Wo ist der Hintergrundtyp? Und gib ihm einfach so eine weiße Farbe. Dann ist da noch das Symbol. Wir können ihm jede Farbe geben, die wir wollen. Im Moment habe ich ihm einfach eine zufällige gelbe Farbe gegeben, und ich denke, das ist gut genug. zurück, während das ausgewählt ist, Gehen wir zurück, während das ausgewählt ist, wollen wir jetzt auch zum Hamburger Togo gehen, und wir wollen zum Hintergrundtyp gehen und ihm eine weiße Farbe geben Hintergrunds. Veröffentlichen Sie das. Du kannst ihm jede Farbe geben, die du willst. Wenn wir es jetzt in der Vorschau ansehen, wir es gerade in der Vorschau Und wir haben vergessen, diesem Logo einen Link zu geben. Wählen Sie also das Logo, den Link und die benutzerdefinierte URL und geben wir ihr die Domain-URL und veröffentlichen Sie sie. Gehen wir wieder rein , damit wir, wenn wir das auswählen , zur Startseite gehen können. Und wenn ich Strg+Shift I drücke, können wir jetzt hier hin gehen , um die responsiven Tools zu aktivieren, und wir wollen diese auf Tablets umstellen iPad mini zum Beispiel, und jetzt sieht es so Beachten Sie jetzt, dass wir die beiden Header haben, den ursprünglichen Desktop-Header und den Tablet-Header Wir wollen den Tablet-Header ausblenden . Wir möchten den Desktop-Header ausblenden, wenn wir die Website auf einem Tablet betrachten . Also, wie machen wir das? wieder rein gehen, wollen wir das auswählen und zu Advance gehen. Wählen Sie den Desktop-Header aus, gehen Sie zu Advance, reduzieren Sie das Layout, gehen Sie zu Responsive und blenden Sie es auf Tablet und Handy aus. Es wird also nur auf dem Desktop sichtbar sein. Dann wählen wir diesen Tablet-Header aus, gehen zu Advanced und machen das Gegenteil. Responsive, auf dem Desktop verstecken, den Tablet-Header, weil wir ihn auch für Mobiltelefone wiederverwenden werden. Er wird also nur auf Mobilgeräten und Tablets sichtbar sein . Veröffentlichen Sie das. Du weißt schon, wenn wir wieder hierher gehen und nach Hause klicken. Da wir uns jetzt im Tablet-Modus befinden, können wir nur den Tablet-Header sehen. Wenn wir jetzt darauf klicken, erscheint unser Menü. Also ich finde, es sieht schon gut aus. Gehen wir wieder rein, gehen wir zum Handy. Und es sieht auch auf dem Handy gut aus, aber wir müssen es ein bisschen verbessern. Wählen Sie also einen Container aus, in dem sie sich befinden, gehen Sie zu Erweitert, und ich möchte diese Polsterung aufheben dann eine Polsterung links von 20 hinzufügen Sagen wir nun zehn und fügen rechts von zehn „Veröffentlichen“ hinzu. Lassen Sie uns das nun überprüfen . Sagen wir zu Hause, dann sagen wir HL zehn. Ja, so sieht es also aus. Und jetzt wollen wir das auf dem Handy bearbeiten. Wenn Sie das auswählen, ist es, wie Sie auf dem Handy sehen können , zu breit. Auf Mobilgeräten wollen wir also, dass es breiter ist, vielleicht bis zur Veröffentlichung. Geh wieder rein, nach Hause, wähle das aus. Jetzt sieht es gut aus. Mach dir darüber keine Sorgen. Natürlich wird das nicht auftauchen. Das ist Wordpress. Das sind Wordpress-Tools. Im Grunde sind wir mit den Headern fertig. So macht man sie responsiv. 25. Reaktionsfähiger Körper: Jetzt ist es an der Zeit, den Körper reaktionsfähig zu machen. Also lass uns weitermachen und das tun. Ich werde einfach die responsiven Tools verlassen und das schließen. Und weil wir mit dem Header fertig sind, werde ich ihn auch schließen. Klicken wir nun auf Mit Elementor bearbeiten , um die Seite zu bearbeiten, und wechseln wir zum Tablet Und jetzt, wie Sie sehen, gibt es hier bereits ein großes Problem Wir möchten den obersten Container auswählen Erweitern Sie ihn, wählen Sie den Container darin aus. Und lassen Sie uns zur erweiterten Marge gehen. Lassen Sie uns sogar die Polsterung durchbrechen. Gehen wir zunächst zur Breite und machen wir sie zu 100% oder 95% der Breite des äußersten rosafarbenen Containers 95% der Breite des äußersten rosafarbenen Dann geben wir ihm einfach einen oberen Rand von 50. Sagen wir 60 oder 70. Und jetzt, obwohl es noch ausgewählt ist, denken Sie daran, dass es immer noch zwei Spalten, eine Spalte, zwei Spalten sind. Wir können von einer Zeilenkonfiguration zu einer vertikalen Konfiguration wechseln , bei der die beiden Spalten keine Spalten mehr sind. Sie fangen einfach an. Also wechseln wir zu nein, wir sollen das auswählen. Gehe zum Layout und wechsle dazu. Und jetzt wählen wir diesen ersten Container und geben ihm 100% Breite, 100% Breite innerhalb dieses Containers. Lassen Sie uns auch diesen auswählen und ihm eine Breite von 100% geben. Jetzt nimmt es 100% ein. Und weil das zu 100% ist, sollten wir alles zentralisieren. Also genau hier, lasst uns auch das auswählen und alles in der Mitte anordnen , was ein solches Zentrum rechtfertigt Veröffentlichen Sie das. Wenn wir es in der Vorschau ansehen, drücken Sie Shift I, um die Entwicklungstools aufzurufen. Lassen Sie uns das umschalten und zum Tablet, iPad Mini, wechseln. Ja, so sieht es aus Lass uns die obere Marge für diesen Container wieder erhöhen und sie auf 100 halten, um das zu veröffentlichen. Ich denke, das ist eine bessere Position, wenn man nach unten scrollt. Sehr gut. Wenn wir jetzt runter gehen, können wir hier dasselbe tun. Wir können diesen Container auswählen, der alles enthält, und zu einer Spalte wechseln. Wählen Sie dann diesen aus, machen Sie ihn zu 100% breit und richten Sie alles zur Mitte aus. Wählen Sie diesen Text aus, gehen Sie zu Stil, Ausrichtung, Mitte. Wählen Sie das aus, machen Sie es zu 100%. Und tatsächlich möchte ich das auswählen und es auch zu 100% so machen , damit alles perfekt passt. Veröffentlichen Sie das. Lass uns eine Vorschau davon ansehen. Einfach so. Das können wir hier auch tun. Ich wähle das aus, gehe zu Erweitert. Solange dies ausgewählt ist, gehe ich zu Erweitert und gebe es ein. Nein, ich möchte eine Breite von 80%. Wählen Sie diesen Container aus, der all diese Behälter enthält, und geben Sie ihm eine Breite von 100%. Aber fortgeschritten. Lassen Sie uns es rundum mit 20 Polstern versehen, damit es an den Seiten Luft bekommt Ich glaube sogar, wir können das Gleiche tun, was wir hier getan haben. Ich bevorzuge es gestapelt. Das haben wir also. Dann haben wir diesen Container. Er hält alles in der Hand. Gehen Sie also zum Layout und lassen Sie uns alles stapeln. Wählen Sie den Behälter aus, in dem sich diese vier befinden, und machen Sie ihn so zu 100% breit. Wählen Sie den aus , der das Bild enthält, und machen wir ihn zu 100% oder sagen wir zu 60%, 80%. Und stellen wir sicher, dass in diesem Behälter selbst in dem sie sich befinden, alles so zur Mitte hin ausgerichtet ist. Inzwischen haben Sie schon das Wesentliche verstanden. wir das auswählen, gehen wir zu Erweiterte Breite in Prozent, sagen wir 80%, wählen wir diesen Container hier aus und machen ihn einfach zu 100%, wir diesen Container hier aus und machen ihn einfach gehen aber zu Erweitert und geben ihm 20 Polsterung Das Gleiche gilt hier. 80% Wählen Sie diesen Container aus. Gehen wir zu 90%. Ich denke, das ist eine gute Breite. Veröffentlichen Sie das. Und dann kontaktiere mich im Bereich. Fortgeschritten, fortgeschritten 80%. Wählen wir diesen Container aus, der das Formular enthält. Ich gebe ihm vielleicht 90%. Da braucht man nicht viel. Veröffentlichen Sie dort. Lassen Sie uns alles überprüfen. Scrollen Sie nach unten. Ich liebe es. Jetzt müssen Sie nur noch zur mobilen Ansicht wechseln. Okay. Und wiederhole die gleiche Arbeit, aber jetzt für das Handy. Das einzige, was Sie zusätzlich tun werden, ist die Größe verschiedener Elemente auf Mobilgeräten zu reduzieren. zum Beispiel bei dieser Überschrift Gehen wir zum Beispiel bei dieser Überschrift zu Stil, Titel. Wie Sie sehen, gibt es immer Elemente, die für verschiedene Geräte bearbeitet werden können, wenn wir uns im responsiven Modus befinden gibt es immer Elemente, die für verschiedene Geräte bearbeitet werden können, . Wir werden immer diese Symbole haben. Wenn wir auf Tablet umsteigen, wird sich dies auf Tablet und Desktop ändern. Da wir also bereits Tablets gemacht haben, machen wir es jetzt mit Mobilgeräten. Wir können eine Größe für die Typografie festlegen. Wir können eine Größe für mobile Geräte festlegen, vielleicht bis zu diesem Punkt Und tatsächlich haben wir sogar vergessen, dies so einzustellen, dass es auf die Mitte ausgerichtet ist. Sobald wir es so machen, wird es von der mobilen Ansicht übernommen. Für diese Version auf Mobilgeräten müssen wir zum Startdesign wechseln und jedes dieser Optionen auswählen und mit 100% zu Erweitert wechseln. Ich kann das schreiben, kopieren, das schreiben, den Stil einfügen, das schreiben, den Stil einfügen. Ich kann kopieren. Nein, da ist der Hauptheader. Wählen Sie diesen aus, gehen Sie zu Stil, Titel, Typografie und reduzieren Sie dort die Größe Was sonst? Jetzt kann ich das kopieren. Stil einfügen. Klicken Sie mit der rechten Maustaste auf Stil einfügen. Das ist immer noch zu lang, aber wir können es so an der Mitte ausrichten. Klicken Sie mit der rechten Maustaste auf Stil einfügen. Und ich denke, wir sind damit fertig. Also das Einzige, was noch übrig ist, ist die Fußzeile, aber das ist eine Aufgabe, um die Sie sich kümmern können , basierend auf allem, was wir gelernt haben also ganz nach unten scrolle, finde ich, dass alles gut aussieht Wenn wir zu Pixel P wechseln, denke ich, sieht jetzt alles viel besser Sie können sich Zeit nehmen, alles zu aktualisieren , damit es makellos aussieht Also ich denke, wir werden hier vorerst aufhören. In der nächsten Lektion werden wir sehen, was noch getan werden muss. Wir sehen uns also in Kürze. 26. Schlussbemerkungen: Und herzlichen Glückwunsch, dass Sie es bis zum Ende dieses Kurses geschafft haben. Sie haben nicht nur gelernt, wie einige der beliebtesten kostenlosen Elementor-Funktionen funktionieren, sondern Sie haben auch eine voll funktionsfähige, reaktionsschnelle Website für Ihre persönliche Marke erhalten Hoffentlich haben Sie jetzt ein besseres Verständnis dafür, wie diese einzelnen Tools verwendet werden können , um eine Website mit einem echten Zweck zu erstellen Jetzt eine kurze Erinnerung. Vergessen Sie wie immer nicht, Ihr Klassenprojekt mit uns zu teilen. Wenn Sie mit der Erstellung Ihrer einseitigen Website fertig sind, machen Sie einen ganzseitigen Screenshot der fertigen Website und laden Sie ihn in die Projektgalerie Ich würde gerne sehen, was Sie sich ausgedacht haben, und Ihr Projekt könnte auch andere Schüler in der Klasse inspirieren Wenn Ihnen dieser Kurs gefallen hat und Sie ihn nützlich fanden, können Sie meine Arbeit am besten unterstützen, indem Sie sich einen Moment Zeit nehmen, um eine Bewertung und eine Rezension abzugeben. Ihr Feedback trägt dazu bei, dass dieser Kurs für andere Schüler , die vielleicht Webdesign lernen möchten, besser auffindbar , die vielleicht Webdesign lernen möchten Nehmen Sie sich also einen Moment Zeit und gehen unter diesem Videoplayer auf die Registerkarte „Testberichte“ und teilen Sie mir und der gesamten Community ob Sie diesen Kurs jedem empfehlen würden , der Lamenter lernen möchte . Das wäre wirklich hilfreich, und ich schätze Nun, vielen Dank, dass ihr mit mir gelernt habt, und bis zum nächsten Mal, kreiert weiter. Wir sehen uns bald.