Elementor-Kurs für Anfänger: Erstelle eine vollständig funktionierende Dachfirma-Website von Grund auf

1. Kurseinführung: Nun, hallo, dort. Sind Sie bereit zu lernen, wie Sie Ihre eigenen Websites mit Elementor von Grund auf ohne Programmierkenntnisse erstellen können? Ich möchte dir zeigen, wie man genau das macht. Wenn Sie bis zum Ende bei mir bleiben, wir fertig sind, haben Sie, wenn wir fertig sind, die Fähigkeiten, jede Art von Website zu erstellen , die Sie möchten. Wann immer du willst. Mein Name ist Ken und ich benutze Elementor seit fünf Jahren. Ich benutze WordPress seit sechs Jahren. Und ich erstelle seit 4,5 Jahren Websites für zahlende Kunden. Wenn ich keine Websites für Kunden erstelle, erstelle ich elementare Vorlagen und verkaufe sie auf Creative Market. Ich verdiene also Geld mit zahlenden Kunden und auch dem Verkauf digitaler Produkte , die ich mit Elementor entwickelt habe. Und in diesem Kurs möchte ich dir genau zeigen, wie das geht. Wenn wir fertig sind, werden Sie verstanden haben, wie man mit Abschnitten, Spalten, Abständen, Texten und Topographie, Bildern und Farben arbeitet . Und diese Fähigkeiten ermöglichen es Ihnen, jede Art von Website-Idee zusammenzustellen , die Sie zu einem bestimmten Zeitpunkt haben. Denn im Moment haben Sie vielleicht eine Idee für eine Website. der nächsten Woche haben Sie vielleicht eine andere Website-Idee. Und Sie können Webdesigner nicht weiter dafür bezahlen, jedes Mal, wenn Sie eine neue Idee haben, Websites für Sie zu erstellen. Deshalb möchte ich Ihnen zeigen, wie Sie unabhängig sein und jederzeit Websites für sich selbst erstellen können. Ich konnte meine eigenen Websites erstellen und damit Einnahmen erzielen. Ich habe Kurse speziell für Anfänger erstellt , und dieser Kurs ist nicht anders. Ich gehe davon aus , dass du noch nie WordPress oder Elemental benutzt hast. Also möchte ich deine Hand halten und sicherstellen, dass du genau verstehst , was du vom ersten Schritt an tun musst, von der Installation von WordPress-Themes bis zur Installation von WordPress-Plugins jedes einzelne Element Ihrer Website von oben nach unten, von einer Seite zur anderen Seite zu erstellen, sie miteinander zu verknüpfen und all das. Wir werden tatsächlich an einem realen Projekt arbeiten, bei dem wir eine Website für Dachdeckerfirmen erstellen werden. Es ist also eine hypothetische Dachdeckerfirma, die sich an uns gewandt und uns gebeten hat , eine Website für sie zu erstellen. Wir haben den gesamten Inhalt und werden sehen, wie man ein solches Projekt angeht. Diese spezielle Art von Website wurde tatsächlich von einem meiner Studenten, Alex Rodriguez, angefordert . Und es ist mir eine Ehre und Freude , endlich zu halten, was ich versprochen habe. Ich würde liefern. Also Alex Rodriguez, ich möchte dich anrufen. Und denken Sie daran, wenn Sie weitere Ideen für eine bestimmte Art von Website haben , die wir erstellen sollen, fügen Sie sie in die Diskussion unten ein, und ich werde sicher sein, eine solche Klasse zu erstellen. Ich freue mich sehr, Sie hier zu haben , und ich kann es kaum erwarten, loszulegen. Also, ohne noch mehr Zeit zu verschwenden , wir sehen uns in der ersten Lektion. 2. Das Kursprojekt: Und willkommen. Wie ich in der Einleitung erwähnt habe, wurde dieser Kurs ausdrücklich von einem meiner Schüler, Alex Rodriguez, im Schatten von Alex Rodriguez, angefordert . Und er wollte, dass wir eine Website für Dachdeckerfirmen erstellen. Und er wollte ausdrücklich, dass es ein Terminformular oder einen Terminbuchungsassistenten gibt. Und wie Sie hier sehen können. Das ist also die Helden-Sektion. Wir haben vier Seiten und wenn wir mit dem Scrollen beginnen, bleibt die Kopfzeile, wie Sie sehen, oben klebrig. Er verschwindet nicht mit dem Rest des Inhalts. Dadurch hat der Benutzer Zugriff auf die Navigationsleiste, unabhängig davon , wo er sich auf der Website befindet. Wenn Sie sich dieses Formular zur Terminbuchung ansehen, enthält es ein Drop-down-Menü all den verschiedenen Arten von Dienstleistungen , für die wir einen Termin buchen können. Wenn Sie z. B. ein Solardach wünschen, können wir Ihnen das bieten. Geben Sie dann unseren Namen, E-Mail-Adresse, Telefonnummer und zusätzliche Informationen an, die das Unternehmen bei der Terminbuchung wissen soll an, die das Unternehmen bei der Terminbuchung wissen Dann können wir die Nachricht senden. der Firma erhalten wir die Anfrage nach einem Termin und melden uns bei mir. Wenn wir jetzt nach unten scrollen, haben wir natürlich diesen schönen blauen Abschnitt hier. Wir werden sehen, wie das geht. Weil das die Homepage ist und es ist eine Landingpage. Es hat mehrere Call-to-Action-Tasten wie diese. Hier ist noch einer. Es ist immer gut, Benutzern zu sagen, was sie tun sollen. In diesem Fall möchten wir, dass sie mit uns sprechen. Wir haben hier verschiedene Dienste vorgestellt und wir können klicken, um mehr zu erfahren. Wir haben dieses schöne Vorher-Nachher-Bild. Dies ist also, bevor das Dach fertiggestellt wurde, und dies ist, nachdem das Dach fertiggestellt wurde. Und es fängt einfach an, sich zu bewegen. Sobald sich der Mauszeiger über dem Bild befindet. Wir werden sehen, wie das geht. Dann haben wir diesen schönen kleinen einfachen Abschnitt. Hallo, Homepage oder eine Landingpage sollte immer einen Testimonial-Bereich haben , den du als sozialen Beweis hinzufügen kannst. Dann haben wir diesen Notfall-Kaiserschnitt. Dann diese schönen Ordner, die in die About-Seite gehen. Wir haben die Seite Über uns. Es hat eine nette Heldenabteilung, sehr einfach und minimalistisch. Wir haben unsere Vision und Mission, unsere Geschichte. Dann haben wir, was wir anbieten. Ein netter Bildausschnitt hier mit einem Bildhintergrund. Dann haben wir diesen Countdown-Bereich. Wenn ich diese Seite aktualisiere, weil ich nach unten scrolle, ja, wir haben diesen schönen Zähler und wir werden sehen, wie das alles gemacht wird. Dann springe in den Blog. Dies ist der Ort, an dem wir die neuesten Artikel anzeigen , die wir als Website veröffentlicht haben. Und wir werden sehen , wie man das schafft. Dies ist also eine Vorschau auf das, woran wir arbeiten werden , während wir all diese Seiten durchgehen und jedes einzelne Element erstellen, das Sie gesehen haben . Sie erwerben die Fähigkeiten, die Sie benötigen , um Ihre zukünftige Websites. Und noch etwas: Ich ermutige meine Schüler gerne, so kreativ wie möglich zu werden. Du musst es nicht unbedingt genau so machen, wie ich es mache. Sie haben die Freiheit der Ideen und der Kreativität, um Ihre eigene Version der Dachdecker-Website zu erstellen. Sobald Sie das getan haben, würden wir gerne sehen, was Sie erstellt haben. Machen Sie also einen Screenshot Ihrer Lieblings-Webseiten, die Sie erstellt haben, und teilen Sie ihn mit uns direkt hier unter diesem Video. Und erhalte Feedback von Kommilitonen und von mir. Und lasst uns das Feuer weiterbrennen lassen. Gehen wir zu Lektion Nummer eins über. Wir sehen uns in Kürze. 3. Installation von WordPress in cPanel: Willkommen zurück. Nachdem Sie Webhosting für Ihre Website gekauft haben, ist es an der Zeit, WordPress über das cPanel zu installieren. Jetzt bin ich genau hier auf meiner cPanel-Anmeldeseite. Ich mache weiter und melde mich an. Ich schlage vor, dass du dasselbe tust. Und jetzt sind wir angemeldet. Jetzt sieht Ihr cPanel vielleicht etwas anders aus als meins, aber diese Einstellungen und Funktionen sind unabhängig vom Webhost ziemlich gleich. Was wir also suchen wollen, ist ein App-Installer namens Soft Calculus Apps Installer. Und eine der Apps, die wir über Calculus installieren können , ist WordPress, wie Sie sehen können. Also klicke ich auf Wordpress und werde weitergeleitet, um Calculus zu lösen. Und hier werden wir WordPress installieren. Wie Sie sehen können, haben wir eine kurze Beschreibung von WordPress. Wir haben jetzt die Möglichkeit, WordPress zu installieren. Und direkt unter diesem Bereich haben wir die aktuellen Installationen. Wenn Sie also mehrere WordPress-Installationen haben, werden diese hier aufgelistet. Wie Sie sehen, habe ich bereits eine Installation. Also mache ich weiter und klicke auf Jetzt installieren. Und das öffnet den Ort, an dem wir die Details unserer Website eingeben können. Sie uns zunächst Lassen Sie uns zunächst ein Präfix oder ein Protokoll für unsere URL wählen. Ich verwende gerne https, www.ourdomain.com. Also wähle ich HTTPS. Und Sie können HTTPS nur verwenden, wenn Sie Sicherheitsgründen über ein SSL-Zertifikat verfügen. Wenn ich also nach draußen klicke, wird nach meinem SSL-Zertifikat gesucht und es nun bestätigt, dass ich ein SSL-Zertifikat habe. Und wir sind startklar. Wenn Sie kein SSL-Zertifikat haben, werden Sie darüber informiert, dass Sie kein gültiges SSL-Zertifikat haben und HTTPS nicht verwenden können. Sie können HTTP verwenden, dies wird jedoch nicht empfohlen. In Ordnung, also möchte ich dieses Verzeichnis entfernen. Wir möchten unsere Website nicht in einem Ordner namens WP ablegen . Wir möchten, dass es sich im Stammverzeichnis unseres Servers befindet. Als nächstes wählen wir unsere WordPress-Version. Ich möchte die neueste Version verwenden, also wähle ich sie aus. Geben wir unserer Website einen Namen. In diesem Zusammenhang heißt die Website also Roof Call, Roof Company und eine kurze Beschreibung. Auf dem Planeten. Hier geben Sie die Anmeldeinformationen Ihrer WordPress-Website ein. Wenn du dich von WordPress abmeldest. Um sich wieder anzumelden, müssen Sie diese Informationen verwenden. Also lass uns das von admin in etwas wie deinen Benutzernamen ändern . Mein Benutzername und lass uns ein sicheres Passwort eingeben. Lassen Sie diese E-Mail einfach intakt. Gehen wir nun zum nächsten Teil über. Hier können wir wählen, ob diese drei Plugins vorinstalliert sind , aber wir möchten nicht, dass sie vorinstalliert sind, da es bessere Optionen für diese Art von Plugins gibt. Also führe das an, und du musst nichts anderes ändern. Im nächsten Teil fügen Sie einfach eine E-Mail wie Ihr Gmail hinzu. Hier wird eine Benachrichtigung gesendet , sobald Ihr WordPress installiert wurde. Also mache ich weiter und installiere es jetzt. Scrollen Sie nach oben und verlassen Sie diese Seite erst, wenn der Fortschrittsbalken 100 Prozent erreicht hat. Also lassen Sie uns ein paar Minuten Zeit. In Ordnung, wir haben es also erfolgreich installiert. Hier ist die URL zur Website und dies ist die URL zum Dashboard. Was wir also tun möchten, ist darauf zu klicken, um zum WordPress-Dashboard zu gelangen , wo wir mit der Erstellung unserer Website beginnen können. Und hier haben wir es. Lass mich da einfach ein bisschen rauszoomen. So installieren Sie WordPress über das C-Panel. in der nächsten Lektion Lassen Sie uns in der nächsten Lektion ein WordPress-Theme installieren. Wir sehen uns in Kürze. 4. Installieren des Astra Themes: Willkommen zurück. Jetzt, da wir WordPress über das cPanel installiert haben, ist es an der Zeit, unser WordPress-Theme zu installieren. Und ohne Zeit zu verschwenden, schauen wir uns die Themen des Aussehens an. Und standardmäßig haben wir das 2023 Theme installiert, da wir gerade im November 2022 sind. Es ist also nur ein Monat vor 2023. Für den längsten Teil des Jahres 2022 haben wir das Theme 2022 standardmäßig installiert, aber wir verwenden keines dieser Standarddesigns. Ich möchte ein spezielles Ding namens Astra verwenden, das meiner Meinung nach das beste WordPress-Theme auf dem Markt ist . Also hier sind wir. Es ist fast ganz oben, aber wenn du nach unten scrollst, haben wir Tausende von Themes, die du verwenden kannst. Ich klicke auf Auf Astra installieren. Wenn Sie es nicht sehen können, können Sie hier eine schnelle Suche durchführen. Und lass uns weitermachen und aktivieren. Klicken Sie also auf Aktivieren. Und da haben wir es. Also danke, dass du Astros installiert hast. Lass mich einfach das Pop-up schließen. Und jetzt ist Astra das aktive Theme, und so installiert man ein WordPress-Theme. In der nächsten Lektion wollen wir ein WordPress-Plugin installieren , da wir einige WordPress-Plugins verwenden werden. Mal sehen, wie man einen installiert. Und weil wir eine Website mit Elementor erstellen, installieren wir Elementor. Wir sehen uns in der nächsten Lektion. 5. Installieren eines WordPress-Plugins: Willkommen zurück. Wenn das Astra Theme installiert ist, ist es Zeit, Elementor zu installieren. Lass uns also in die Plugins gehen. Neues hinzufügen. Aber bevor wir sagen, neu hinzufügen, gehen wir zu den Installierten Plugins. Ordnung, wir haben also einige vorinstallierte Plug-ins. Abhängig davon, wer Ihr Webhost ist. Manchmal stellen Sie möglicherweise fest, dass Sie Plug-ins vorinstalliert haben , die Sie nicht verwenden möchten. In diesem Fall möchte ich also keines dieser Plugins verwenden, also deaktiviere und entferne ich sie einfach. Jetzt, da sie alle deaktiviert sind, kann ich sie alle auswählen, indem ich das Kästchen ankreuze. Und dann löschen. Bewerben Sie sich in diesem Drop-down-Menü. Okay? In Ordnung, jetzt haben wir sie alle entfernt. Wenn ich diese Seite aktualisiere. Derzeit sind keine Plug-ins verfügbar. Also lass uns weitermachen und hier auf „Neu hinzufügen“ klicken oder genau hier wird es zum WordPress-Plugin-Verzeichnis weitergeleitet . Hier gibt es Tausende von Plugins, die Sie für jeden Zweck installieren können. Deshalb sind wir unter Druck, es ist großartig. Also werde ich weitermachen und hier nach Elementor suchen . Elementor. Und hier sind wir. Wie Sie sehen, hat es mehr als 5 Millionen aktive Installationen. Und es wurde von elements are.com erstellt. Klicken Sie auf Installieren. Jetzt. Lass uns weitermachen und auf Aktivieren klicken. Aktiviere. Jetzt haben wir Elementor installiert und aktiviert. Bisher wurden Sie bei jeder Installation von Elementor zu einem Einrichtungsassistenten weitergeleitet, in dem Sie mehrere Einstellungen konfigurieren mussten, bevor Sie Elementor verwenden können. Ich habe den Einrichtungsassistenten nicht gesehen und nur für den Fall, dass Sie zu diesem Einrichtungsassistenten weitergeleitet wurden, habe ich ein vorab aufgezeichnetes Video, in dem ich Ihnen zeige, wie Sie alles in diesem Einrichtungsassistenten einrichten. Lass es mich jetzt für dich spielen, nur für den Fall, dass dir dieser Setup-Assistent angezeigt wurde . Also los geht's. Also klicke ich auf installiert, oder? Wenn ich also auf Aktivieren klicke, werde zum Elementor-Setup-Assistenten weitergeleitet. Also lasst uns auf Aktivieren klicken. Und das ist der Zauberer hier. Lassen Sie mich also ein bisschen herauszoomen damit Sie alles sehen können. Wie Sie jetzt sehen können, haben wir ungefähr fünf Schritte, um alles einzurichten, bevor wir Elementor verwenden können. Und der erste Schritt besteht darin, ein Konto bei elementor.com zu erstellen , wenn Sie diese Vorteile nutzen möchten, aber Sie müssen kein elementares Konto haben , um Elementor nutzen zu können. Also werde ich weitermachen und diesen Teil überspringen. Der zweite Schritt besteht also darin , zu entscheiden, ob Sie das Hello-Thema verwenden möchten , das vom Elementarteam entwickelt und gepflegt wurde. Sie haben aber auch die Möglichkeit, diesen Schritt zu überspringen , wenn Sie eine andere Sache haben, die Sie verwenden möchten Ich verwende gerne Astra. Astra Theme ist eines der leichtesten, schnellsten und SEO-freundlichsten Themen auf dem Markt. Also werde ich weitermachen und diesen Teil überspringen. Der dritte Schritt besteht darin, Ihrer Website einen Namen zu geben. Und standardmäßig ist der Name, der in diesem Feld angezeigt wird, der Name, den Sie Ihrer Website bei der Installation von WordPress gegeben haben . Das ist also der Name, den ich meiner Website gegeben habe. Ich werde es nicht ändern, also behalte ich es einfach, ich drücke einfach auf Escape. Wenn Sie dann ein Logo haben, haben Sie in diesem Moment die Möglichkeit, es hochzuladen Dies können Sie jedoch jederzeit später tun, während Sie Ihre Website erstellen, damit wir weitermachen und es überspringen können. Und dann können wir endlich direkt eine leere Leinwand bearbeiten und eine Webseite von Grund auf neu erstellen. Oder wir können nach Hunderten von Vorlagen suchen, die von Elementor erstellt wurden und sich im Elementor-Workspace befinden , oder unser eigenes Vorlagenelement importieren , das wir möglicherweise selbst gekauft oder erstellt haben zuvor. Aber ich werde weitermachen und das überspringen. Und standardmäßig gelangen Sie beim Erhitzen direkt zu einer leeren Leinwand, gelangen Sie beim Erhitzen direkt zu auf der Sie mit dem Erstellen Ihrer Webseite beginnen können. Um diesen Ort zu verlassen, klicken Sie auf dieses Burger-Menü und wechseln Sie zum Dashboard. Wir werden also zum Backend des Editors für die spezielle leere Leinwand weitergeleitet , die wir gerade verlassen haben. Aber was wir tun möchten, ist darauf zu klicken, um zum eigentlichen Dashboard zu gelangen, in dem wir alle Wordpress-Einstellungen haben. Und wenn Sie jetzt hier im linken Menü nachschauen, werden Sie feststellen, dass wir Elementor und Vorlagen haben. Beide werden nach der Installation von Elementor angezeigt. Und wenn wir auf Elementor klicken, können wir hier mit allen Einstellungen herumspielen. In der Regel müssen Sie jedoch keine Änderungen an den Standardeinstellungen des Plugins vornehmen. Sie werden einfach direkt mit dem Aufbau Ihrer Webseiten beginnen. Und los geht's. So vervollständigen Sie den Einrichtungsassistenten, nur für den Fall, dass Sie selbst auf einen Setup-Assistenten gestoßen sind. Und im Grunde genommen installiert man so ein WordPress-Plugin. Jetzt haben 99% der WordPress-Plugins keinen Einrichtungsassistenten So installieren Sie Elementor auf Ihrer Website. der nächsten Lektion an, Sehen wir uns in der nächsten Lektion an, wie Sie mit dem Erstellen einer Website im Frontend beginnen . Wir sehen uns in Kürze. 6. Erstellen Sie den Header – Installieren Sie das -: Willkommen zurück. Jetzt, da wir Elementary installiert haben, können wir mit dem Aufbau der Website beginnen. Und wie ich in dieser Lektion erwähnt habe, werden wir den Header erstellen. Der Header ist dieser Bereich genau hier. Es enthält das Logo und die Navigationsleiste oder die Navigationsleiste. Schauen wir uns also an, wie man baut. Sie gehen zurück ins Armaturenbrett. Und um den Header zu erstellen, wird ein anderes Plugin namens Elements Keep Light Add-Ons für Elementor verwendet. Gehen wir also in Plugins, Add New. Lass uns nach Elementor suchen. Und natürlich ist Elementor aktiv, aber Sie werden feststellen, dass wir hier mehrere andere Plug-ins haben , die den Namen Elementor tragen. Und dies sind Plug-ins von Drittanbietern, die von unabhängigen Entwicklern entwickelt wurden , um sie zu Elementor hinzuzufügen. Elementor, die kostenlose Version von Elementor, hat Einschränkungen. Also haben diese Drittanbieter-Entwickler beschlossen, hey, lassen Sie uns die Leistung der kostenlosen Version von Elementor erhöhen oder steigern , indem wir ein kostenloses Add-on für Elementor bereitstellen. Und ich zeige Ihnen, wie das funktioniert, wenn wir die Website erstellen. Und so ist eines dieser Add-ons Elements Hit Elementor Adults. Also lass uns installieren. Jetzt. Scrollen wir während der Installation nach unten. Und Sie werden feststellen, dass wir mehrere von ihnen elementare Kostüm-, Skin- und Sticky-Header-Effekte für Elementor haben. Dies ist ein weiteres Plugin, das wir benötigen werden, und ich werde dir zeigen, welche Rolle es spielen wird. verschiedene Möglichkeiten, jede Art von Website zu erstellen , die Sie möchten Aufgrund all dieser zusätzlichen Add-Ons, die Ihnen kostenlos zur Verfügung gestellt werden, haben Sie mit der kostenlosen Version von Elementor all dieser zusätzlichen Add-Ons . Jetzt, wo Elements Kit installiert ist, lassen Sie uns es aktivieren. Also klicke ich auf Aktivieren. Und jetzt wurde es installiert. Aber um es zu benutzen, wenn ich auf Elements Get klicke, werden wir zu einem Einrichtungsassistenten weitergeleitet , damit wir alles vorbereiten können. Wie Sie sehen, müssen wir also einige Schritte durchlaufen. Nun, dies sind die Konfigurationen, die wir für die verschiedenen Funktionen auswählen können , die wir aktivieren möchten. Nun, da z. B. hier die Grundkonfiguration ausgewählt wird. Einige Einstellungen hier werden automatisch deaktiviert. Wir müssen sie manuell einschalten. Wenn wir jedoch auf Erweitert klicken, beobachten Sie, wie sich einige dieser Einstellungen ändern. Wenn wir also auf Erweitert klicken, wie Sie sehen können, haben wir den Builder eingeschaltet. Und das ist bei einigen dieser Einstellungen hier auch der Fall . Einige von ihnen waren ausgeschaltet , als es einfach war. Aber jetzt, wo wir „Erweitert“ ausgewählt haben, gehören sie automatisch. Und das heißt, wenn wir das Plugin im Frontend verwenden müssen , werden sie automatisch verfügbar sein. Also lasst uns auf den nächsten Schritt klicken. Nächster Schritt, Weiter, Weiter, Weiter und dann Änderungen speichern. Und da haben wir es. Elements Kid ist jetzt installiert, aktiviert und bereit, um den Header zu erstellen. in der nächsten Lektion Lassen Sie uns in der nächsten Lektion mit dem Kopf beginnen. Wir sehen uns in Kürze. 7. Erstelle den Header – das Logo: Willkommen zurück. Jetzt, da wir Elements Kit installiert haben, können wir mit der Erstellung des Headers beginnen. Lassen Sie mich zunächst all diese Werbung loswerden . Du brauchst sie nicht. Und dann werden Sie feststellen, dass wir auf dem Element Keep eine Kopfzeile und eine Fußzeile haben. Klicken Sie also auf Header Footer. Und weil wir keine Kopf- oder Fußzeile erstellt haben, haben wir hier nichts aufgeführt. Also klicke ich auf „Neu hinzufügen und dieses Pop-up wird angezeigt. Lassen Sie uns unseren Header, einen Namen, unseren Header quer behalten und ihm einen passenden Namen geben. Und der Typ ist Header. Als wir die Fußzeile erstellt haben, haben wir ihr den Fußzeilentyp zugewiesen und wir möchten, dass sie auf der gesamten Website sichtbar ist. Lassen Sie uns das einschalten, um sicherzustellen, dass es auf der Website aktiv und sichtbar ist. Und dann speichern wir die Änderungen. Okay, wie Sie sehen können, haben wir damit begonnen, eine Liste mit verschiedenen Kopf - und Fußzeilen zu erstellen , und Sie können so viele erstellen, wie Sie möchten. Nachdem dies erstellt wurde, klicken wir auf Bearbeiten. Das Pop-up erscheint erneut. Und jetzt klicken wir dieses Mal auf „ Inhalt bearbeiten“ , um zum Frontend zu gelangen, wo wir mit den Elementor-Tools beginnen können, ihn visuell zu erstellen. Und hier sind wir. Nun, wie Sie sehen, lassen Sie mich einfach zu diesem Ort zurückkehren. Sie werden feststellen, dass der Header-Bereich in zwei Spalten unterteilt ist , Logo-Spalte und die Navigationsleistenspalte. Also lass uns weitermachen und unser Logo hinzufügen. also zu unserer Website zurückkehren und darauf klicken, werden die verschiedenen Strukturen geöffnet , mit denen wir schnell beginnen können. Und wir wollen eine Doppelspalte. Das wird das Logo enthalten, und das wird das Napa tragen. Und wir können die Größe entsprechend ändern. Ziehen wir das also nach links. Als Nächstes möchten wir hier auf dieses Pluszeichen klicken. Dadurch werden die verschiedenen Elemente angezeigt, werden die verschiedenen Elemente angezeigt die wir die Seite ziehen und sie verwenden können, um ihre Webseite zu erstellen. Lassen Sie mich zuerst diese Panels hier zusammenklappen. So können wir einen kurzen Blick auf die verschiedenen Panels werfen, die wir haben, weil wir Elemente installiert haben. Hält. Beachten Sie es jetzt, es ist hier aufgeführt. Bevor wir es installiert haben, war es hier nicht aufgeführt. Wir hatten nur die Standard-WooCommerce- WordPress- und Elementor-Panels. Aber jedes Mal, wenn wir ein Add-on installieren , das speziell für Elementor erstellt wurde, wird es hier aufgelistet und wir haben Zugriff auf diese verschiedenen Elemente. Denken Sie daran, als wir bei der Einrichtung des Elements Kits die Option Advanced statt Basic ausgewählt haben, haben wir diese Elemente aktiviert, um sie uns jetzt zur Verfügung zu stellen uns jetzt zur Verfügung zu , während wir die Website erstellen. Lassen Sie mich das zusammenfassen, weil wir vorerst keine davon verwenden. Wer möchte in das Basis-Panel gehen. Und natürlich ist dies, wie ich bereits erwähnt habe, ein elementares Panel. In der kostenlosen Version, wenn ich zusammenbreche , dass wir auch die Pro-Version haben, können wir keinen Zugriff auf diese Elemente haben. Wir können sie nicht ziehen, wenn du es versuchst. Dieses Pop-up erscheint und fordert Sie zum Upgrade auf. Lassen Sie mich das zusammenklappen und den Basis-Tab erweitern. Und jetzt können wir unser Bild dort hineinziehen. Und lass es für einen Moment fallen, weil es die aktiven Elemente sind, die gerade auf der Seite sind. Die Einstellungen hier haben automatisch die Einstellungen des Bildes geändert und das können Sie an diesem Text hier oben erkennen. Wenn ich diese Elemente also noch einmal zeigen möchte, kann ich hier auf dieses Symbol klicken. Es wird diese Elemente wieder enthüllen. Und wenn ich z.B. diese Überschrift ziehe , so sind das die Spalten in diese andere Spalte. Beachten Sie, dass sich die Einstellungen in die Überschrift bearbeiten geändert haben , da es sich um das Element von just drop handelt. Das heißt, es ist das Element , das gerade aktiv ist. Wenn ich das Bild auswähle, haben sich die Einstellungen geändert, um das Bild zu bearbeiten. Wenn ich den Abschnitt auswähle, haben sich die Einstellungen in Abschnitt bearbeiten geändert Dies sind Einstellungen für diesen Abschnitt. Also lass mich das löschen. Überschrift brauchen wir auch nicht, denn dort werden wir es in Napa haben. Und wenn Sie das Bild auswählen, klingt es so, als ob Sie das Bild bearbeiten möchten. Und wenn ich das auswähle, können wir weitermachen und unser Logo hochladen. Also gehe ich zum Hochladen von Dateien und wähle Dateien aus. Und ich möchte in diesen Ordner gehen, den ich vorbereitet habe. Sie finden es in der Beschreibung unten. Sie können all diese Assets, Dach-Website, Säuren herunterladen . Hier ist das Logo. Und in diesem Ordner finden Sie auch alle Bilder, die Sie für die Website verwenden werden. Wir haben also auch diese ReadMe-Texte. Wenn ich es öffne, hat es die Farben, die ich verwendet habe, nur für den Fall, dass Sie diese speziellen Farben verwenden möchten , die ich verwendet habe. Lass mich das schließen. Wenn ich also auf das Logo doppelklicke, wissen wir, dass es hochgeladen wurde. Klicken Sie auf Medien einfügen und los geht's. Jetzt wurde unser Logo hochgeladen und es ist fertig. Ich klicke auf Aktualisieren. Und wir können eine Vorschau der Änderungen anzeigen. Da haben wir's. So fügen Sie das Logo mit Elements Kids zu Ihrer Website hinzu. In der nächsten Lektion möchte ich Ihnen zeigen, wie Sie die Navigationsleiste hinzufügen. Schauen wir uns also in Kürze an, wie das geht. 8. 8 Erstelle den Header Das Nav: Willkommen zurück. Jetzt ist es an der Zeit, die Navbar zu erstellen. Das nächste, was wir tun müssen, ist hier auf dieses Pluszeichen zu klicken. Und das wird die Elemente noch einmal enthüllen. Und hier lassen Sie uns weitermachen und nav und ein V eingeben werden die verschiedenen Navigationselemente angezeigt. Wie Sie sehen können, haben wir ein Navigationsmenü, das hier oben ein kleines Schlosssymbol hat. Dies ist mit Elementor Pro verfügbar. Aber weil wir Elementor Pro nicht haben, verwenden wir die kostenlose Version von Elementor. Wir können das Elemente-Navigationsmenü verwenden, das auch so leistungsstark ist wie das, das mit Elementor Pro verfügbar ist. Lassen Sie mich das zunächst schließen, bevor wir das auswählen. Das Basisfenster wurde ausgeblendet und das Pro-Panel erweitert. Wie Sie sehen können, befindet sich hier das Navigationsmenü unter dem Pro-Panel. Also können wir es nicht benutzen. Das Ausklappen und Erweitern Elementen für Kinder in der Kopfzeile und Fußzeile. Wie Sie sehen können, haben wir hier unten das Entführungsmenü für Elemente . Aber um schnell zu spezifische Elemente zu bekommen, können Sie sie natürlich einfach schnell nav eingeben. So sind wir also hierher gekommen. Ich ziehe das da rein. Jetzt haben wir das Napa fallen lassen. Lassen Sie mich zuerst auf Update klicken. Da das NAV derzeit das aktive Element ist, heißt es natürlich , dass Elemente bearbeiten das Nav-Menü beibehalten. Und einer der Menüpunkte hier ist ein Drop-down-Menü. Und das soll eine Liste verschiedener Menüs sein , die wir im WordPress-Backend mit Menüeinträgen erstellt haben . Und wenn ich Menüpunkte sage, meine ich wie zu Hause über Blog-Kontakt. Wie bereits erwähnt, soll dieses Drop-down-Menü ein Menü oder mehrere Menüs mit Menüpunkten enthalten. Und wir können es auswählen, um es anzuzeigen. Also müssen wir zurück zum Backend von WordPress gehen und ein Menü erstellen, das die verschiedenen Menüelemente enthält , die wir anzeigen möchten. Jetzt, da die Seite gespeichert ist, möchte ich auf dieses Burger-Menü klicken und auf Beenden klicken. Und wenn Sie zum ersten Mal darauf klicken, erhalten Sie diese Optionen. Wo möchtest du auch aussteigen? Ich möchte zum WP-Dashboard wechseln und das anwenden. Bevor wir gehen, muss ich auf Update klicken. Lass uns jetzt gehen. Ordnung, also lass uns jetzt in die Darstellungsmenüs gehen. Und jetzt können wir unser Menü erstellen. Wie bereits erwähnt, handelt es sich um ein Menü. Das ist es, was wir hier erschaffen. Erstellen Sie unten Ihr erstes Menü. Also geben wir ihm einen Namen. Meine Speisekarte. Das ist in Ordnung. Klicken wir auf Menü erstellen. Und ich habe vergessen zu sagen, dass es das Hauptmenü sein sollte. Menü erstellen. Und nach dem Speichern ihres Menüs wird dieser Bereich aktiv. Beachten Sie nun diese Texte mit der Aufschrift Menüelemente hinzufügen aus der linken Spalte, diese Spalte genau hier. Was wir also tun müssen, ist Menüelemente zu erstellen , die hier angezeigt werden. Und die Menüpunkte, die wir auf unseren Seiten anzeigen möchten. Bei den Menüpunkten kann es sich auch um Blog-Beiträge oder WordPress-Beiträge handeln. Sie können benutzerdefinierte Links sein. Dies können Kategorien sein, die Sie erstellt haben, aber wir möchten Webseiten als Menüelemente erstellen. Um dieser Seitenliste hier Menüelemente hinzuzufügen, müssen wir Webseiten erstellen. Lass uns in die Seiten gehen. Und standardmäßig haben wir diese beiden Menüelemente , die bei jeder Neuinstallation von WordPress enthalten sind. Ich wähle die beiden aus und gehe dann in den Papierkorb. Bewerben Sie sich. Keine Seiten gefunden. Also möchte ich eine neue Seite erstellen. Geben wir ihm einen Namen. Darüber ist unsere About-Seite. Machen Sie sich über all diese Einstellungen keine Gedanken. Wir werden sie konfigurieren, während an den einzelnen Seiten arbeiten. Im Moment wollen wir veröffentlichen, weil wir nur Menüelemente erstellen , die veröffentlicht wurden. Lass uns zurückgehen. Jetzt ist es hier aufgeführt. Fügen wir noch einen hinzu. Bloggen, veröffentlichen. Gehen wir wieder rein. Fügen Sie eine weitere für den Kontakt hinzu. Die Kontaktseite. Geh wieder hier rein. Und zum Schluss, lass uns tippen. Und zum Schluss fügen wir eine Homepage hinzu. Also hat Home das veröffentlicht. Gehen wir wieder rein. Wenn wir nun wieder in die Darstellungsmenüs zurückkehren, stellen wir fest, dass wir jetzt Menüelemente haben, die wir zu unserem Hauptmenü hinzufügen können. Wenn ich also alle auswähle und zum Menü Ausrüstung hinzufüge, sind sie es, wir können sie ziehen, um sie neu anzuordnen. Ich möchte das dort ablegen und der Kontakt sollte der letzte sein. Und dann klicken Sie auf Menü speichern. Jetzt wurde unsere Speisekarte aktualisiert. Jetzt gehe ich zurück in Elemente, Heat, Header, Footer, Klick, Bearbeiten, Inhalt bearbeiten. Denken Sie daran, dass wir die Elemente des Navigationsmenüs für Kinder hier gelöscht haben. Wenn wir jetzt auf dieses Drop-down-Menü klicken, erscheint mein Menü, das Menü, das wir gerade erstellt haben. Und los geht's. Es werden die verschiedenen Menüelemente angezeigt, die wir als Seiten erstellt haben. Jetzt wollen wir diese Elemente nach rechts verschieben. Also klicke ich auf horizontale Menüposition. Stimmt. Da haben wir's. Klicken Sie dann auf Aktualisieren. Sehen wir uns eine Vorschau der Änderungen an. Und los geht's. Das ist unser Header. Und im Grunde ist es so, wie man einen Header erstellt. Natürlich ist dies in Arbeit. Wir haben die Bearbeitung des Headers noch nicht abgeschlossen. Wir werden es verfeinern, sobald wir das Heterosexuelle hinzufügen. in der nächsten Lektion an, Schauen wir uns in der nächsten Lektion an, wie man den Heldenbereich erstellt . Wir sehen uns in Kürze. 9. 9 Erstelle die Hero: Willkommen zurück. Jetzt ist es an der Zeit, den Heldenbereich zu erstellen. also zurück zu unserer Referenz zu kommen, dies ist eine Helden-Sektion, die das Hintergrundbild, den H1 und den Aufruf zum Handeln enthält . Schauen wir uns also an, wie man das in unserem Editor erstellt . Nun, das ist der Teil, in dem wir unseren Header bearbeitet haben. Das ist nicht derselbe Ort. Wir werden unseren Heldenbereich bearbeiten. Wenn ich sehr schnell hierher wechseln könnte. Wir haben diesen Header mit dem Elements Keeps Light-Plug-In erstellt . Wir mussten in den Headerordner von Elements Kit gehen und den Header erstellen. Und das machen wir für die Fußzeile. Aber um diesen Heldenbereich zu erstellen, werden wir die Elemente nicht verwenden. Er hatte ein Ordner-Plugin, wird einfach Elementor verwenden. also wieder hier reingehen, können wir diese von hier aus nicht weiter bearbeiten. Was wir also tun müssen, ist Seiten zu verlassen und dann in sie zu gehen. Und weil dies unsere Homepage ist, werden wir natürlich die Homepage bearbeiten. Dort werden wir unsere Heldenabteilung aufbauen. Also klicke ich auf Bearbeiten. Denken Sie daran, dass ich erwähnt habe, dass wir hier über diese Konfigurationen sprechen werden. Das ist also die Zeit. Es ist also an der Zeit, das zu tun. In der vorherigen Version von Elemental sah diese Vorlageneinstellung anders aus. Wenn Sie also Elementor verwendet haben und diese neue Version nicht gesehen haben, sieht sie so aus. Also klicke ich auf diese Standardvorlage und stelle sie auf Elementor in voller Breite um. Weil wir wollen, dass der Heldenbereich vom Bildschirmrand zum anderen Bildschirmrand verläuft. Und jetzt mit Elementor in voller Breite ausgewählt. Lass uns das schließen. Das nächste, was wir tun wollen, ist in das Astro-Sparen zu gehen . Dies sind die Wordpress-Einstellungen. Lass uns in Astro reingehen. Möchten Sie die volle Breite gestreckt unter dem Inhaltslayout auswählen, haben wir Boxinhalt, Box, volle Breite enthalten und volle Breite betont. Wir wollen, dass das volle Gewicht gestreckt wird. Für die Seitenleiste möchten wir dann nicht, dass die Website oder die Webseite eine Seitenleiste hat. Wir haben also eine rechte Seitenleiste, linke Seitenleiste und keine Seitenleiste. Ich wähle keine Seitenleiste aus. dann für diese Elemente Deaktivieren wir dann für diese Elemente standardmäßig den Header und footer.com mit dem Astra-Thema. Da wir unseren eigenen erstellen, denken Sie daran, dass wir unseren eigenen Header erstellt haben, auch unser eigenes Essen oder so bauen wird wo das Deaktivieren aktualisiert werden muss. Jetzt ist es aktualisiert. Als Nächstes müssen wir auf „Mit Elementor bearbeiten“ klicken Dadurch werden wir zum Frontend weitergeleitet , wo wir eine Seite erstellen können. 10. 10 Erstelle den Hero Den Hintergrund Imag: Und jetzt, wo wir hier sind, beachten Sie, dass wir den Header nicht bearbeiten können, da dies nicht der Bereich ist, in dem wir den Header bearbeiten können. Wir müssen in den Heat-Header-Bereich des Elements gehen , um den Header zu bearbeiten. Das erste, was wir tun müssen, ist natürlich eine Struktur auszuwählen. Wir brauchen eine solche Doppelspaltenstruktur. Dann fügen wir dieses Bild im Hintergrund als Hintergrund für diesen Abschnitt hinzu. Also klicke ich auf diesen Abschnitt. Dies wird in den Bearbeitungsbereich geändert. Und bevor wir weitermachen, fällt mir gerade ein sehr praktisches Tool ein , das ich vergessen habe zu aktivieren. Wenn Sie also den Mauszeiger über diese oder über die Spalten bewegen, sollten wir feststellen , dass in dieser Ecke einige weitere Optionen als Abkürzungen auftauchen . Um das zu bekommen, klicken wir auf das Burger-Menü, Benutzereinstellungen. Griffe bearbeiten. Lassen Sie uns das aktivieren. Und jetzt, wo wir mit der Maus über diesen Bereich fahren, habe ich darüber gesprochen. Ordnung, also wenn Sie auf diesen Abschnitt klicken, gehen wir in Stil, Hintergrund, Hintergrundtyp. Wählen Sie das aus. Wir haben die Möglichkeit, ihm eine Farbe zu geben, aber wir geben ihm keine Farbe. Das ist also nur ein Beispiel zum Rückgängigmachen. Lass uns darauf klicken. Wir wollen ihm ein Bild geben. Also klicke ich in dieses Bild. Lassen Sie uns nun weitermachen und das Hintergrundbild hochladen. also im Ordner Roofing Website Assets Suchen wir also im Ordner Roofing Website Assets nach diesem Bild. Ich glaube, das war es. Öffnen. Da haben wir's. Legen Sie Medien ein. Jetzt merkst du, dass wir es nicht sehen können. Und das liegt daran, dass sie keinen Inhalt in der Sektion haben. Die Höhe des Abschnitts wird durch den Inhalt im Inneren bestimmt. Und lass mich dir zeigen, was ich meine. Also klicken Sie auf dieses Plus. Platzieren wir unsere Überschrift da rein. Lassen Sie uns auch einige Texte hinzufügen. Texteditor. Wie Sie sehen können, nimmt die Höhe des Abschnitts jetzt zu , wenn wir weitere Elemente hinzufügen. Lassen Sie uns auch eine Schaltfläche hinzufügen. Lass es fallen, wenn du die blaue Linie siehst. In Ordnung, wie Sie sehen können, nimmt die Höhe zu. Was wir jedoch mit den Einstellungen des Abschnitts vergrößern können , ist der Rand oben, unten und an den Seiten. Also, wenn du in Advanced gehst während wir diesen Abschnitt bearbeiten, und auch das Padding. Lassen Sie uns also die Polsterung erhöhen. Die Polsterung ist der Abstand zwischen dem Rand des Abschnitts und dem Inhalt innerhalb des Abschnitts. Lassen Sie uns diese Werte trennen damit wir jede Tasche individuell bearbeiten können. Wenn wir die obere Polsterung machen oder 100. Wie Sie sehen können, hat der Abstand zwischen ihnen gealtert und dem Inhalt oben zugenommen. Lass uns das auch unten machen. 100. Jetzt haben wir also 100 Daten. Aber lass uns 200, 200 daraus machen. Und für das Top-200-Update dort, lass uns eine Vorschau der Änderungen anzeigen. Also los geht's. Aber wir wollen, dass es so aussieht. Also, wie machen wir das? Gehen wir also wieder rein ändern wir zunächst die Position dieses Bildes. Wählen Sie den Abschnitt immer noch einmal aus und gehen Sie in den Stil für die Position. Lass es uns geben. Versuchen wir es mit Center, Center, und los geht's. Da sollte es also sein. Für die Größe. Wählen wir das Cover und schauen wir uns an, wie es aussieht. Also sagen wir das Update. Jetzt deckt das Bild den gesamten Here Abschnitt ab. Wenn wir also wieder hier reingehen und Standard wählen und das aktualisieren, lass mich dir zeigen, wie es aussieht. Sehen wir uns eine Vorschau der Änderungen an. In. Das ist das Problem, das wir haben. Lassen Sie etwas Leerzeichen übrig, stellen Sie also sicher, dass dieses Set abgedeckt ist, damit es den gesamten Hintergrund abdecken kann. Aktualisiere das. Lassen Sie uns noch einmal eine Vorschau der Änderungen anzeigen. Und los geht's. So bereiten Sie das Hintergrundbild des Hero-Abschnitts vor. in der nächsten Lektion Lassen Sie uns in der nächsten Lektion weiter am Textblock und allem anderen arbeiten . Also werde ich dich bald sehen. 11. 11 Erstellen Sie den Hero den Textblock: Ich schnapp mir das, verstanden, das. Gehen Sie hier rein, wählen Sie diesen Inhalt aus. Ich füge es hier ein. Aber natürlich müssen Sie jetzt Ihre eigene SMS eingeben. Sie sind zuverlässige Dachdeckerexperten. Dann lass uns in den Stil gehen und die Farbe vielleicht in dieses Gelb ändern. Aktualisiere sie. Also lass mich diese Datei hier austauschen und mir diese gelbe Farbe schnappen. Und hier füge ich das Gelbe ein und aktualisiere die Seite. Da haben wir's. Aber jetzt werden Sie feststellen , dass diese Überschrift nicht so aussieht, wie wir sie hier haben. Dies scheint einen Gradienten zu haben. Wie erreichen wir das mit einem anderen Plugin, das eine Erweiterung von Elementor ist. Also lass uns wieder hier rein gehen. Und ich möchte diese Seite nicht verlassen. Lassen Sie mich einfach zu einem neuen Tab wechseln und zum Dashboard gehen. Gehen wir zu Plugins, Add New. Und das Plugin heißt Pi Out Net Add-Ons für Elementary. Als nächstes Buyout, Net-Add-Ons für Elementor. Es ist eine Erweiterung von Elemental, genau wie Elements das Licht hält. Lass es uns aktivieren. Sie haben Einstellungen. Nun, wie Sie sehen, hat es auch viele Elemente, genau wie Elemente, Kinder. Wenn wir also wieder hier reingehen und es aktualisieren, ist es Control R und wählen diesen Text aus. Wenn wir reingehen. Zuallererst werden Sie feststellen, dass wir jetzt diese PAF Net-Add-Ons für Elementor haben . Das bedeutet, dass es jetzt verfügbar ist. Und wenn wir das auswählen und all diese Panels zusammenklappen, wie Sie hier sehen können, ist es so. Also, wenn wir diese Texte auswählen, schauen wir uns den Stil an. Und Sie werden feststellen, dass wir einen perfekten Verlaufstext haben. Also können wir das aktivieren. Und jetzt können wir die beiden Farben auswählen, die wir als Standardfarben verwenden möchten . Also lass mich hier wechseln und das als eine der Farben wählen, dieses Gelb. Lass es mich da hinstellen. Dafür. Lass es uns in dieser Farbe machen. Wie Sie jetzt sehen können, beginnen wir, diese Effekte zu bekommen. Das einzige, was wir tun müssen, ist diesen Text zu ändern. Und um das zu tun, schauen wir uns die Typografie von Tidal an. Lassen Sie uns die Schriftfamilie auf Monitoring Mom Sarah ändern. Und lassen Sie uns das Gewicht auf etwa 900 erhöhen. Da haben wir's. Lassen Sie uns auch die Größe erhöhen. Zuverlässige Dachexperten aktualisieren das. Lassen Sie uns die Farbe dieses Textes ändern, indem wir ihn auswählen. Das ändert sich beim Bearbeiten von Text, Editor-Stil, Farbe, Weiß. Aktualisiere das. Sehen wir uns eine Vorschau der Änderungen an. Da haben wir's. Es nimmt also jetzt schon Gestalt an. Das einzige, was wir bei der Arbeit am Knopf tun müssen. Aber vorher wollen wir uns ansehen, wie man diese Schriftfamilie ändert. Gehen wir hier zurück, solange dies noch ausgewählt ist, gehen wir in die Art des Stils, Typografie, Montserrat. Montserrat. Aktualisiere das. Da haben wir es also. Und um die Farbe der Schaltfläche zu ändern, wählen Sie zunächst die Schaltfläche aus. Diese Änderungen an der Schaltfläche „Bearbeiten“. Wir können ändern, was der Button zu uns sagt. Und wir können die URL ändern. Wenn sie also auf diese Schaltfläche klicken, sollten sie zu der Seite weitergeleitet werden, die wir hier angeben. Also zB www.google.com. Lassen Sie uns das zunächst aktualisieren. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Ordnung, wenn wir also mit der Maus über diese fahren, wie Sie hier unten sehen können, lautet die URL google.com. Und wenn wir darauf klicken, gehen wir zu google.com, gehen wir zurück. Wenn Sie möchten, dass es in einem neuen Tab geöffnet wird, können Sie hier auf dieses Zahnrad klicken und dann ein neues Fenster öffnen. Dadurch wird die Seite in einem neuen Tab geöffnet. sich also eine Vorschau an, wenn wir auf „Mit uns sprechen“ klicken , wird es in einem neuen Tab geöffnet und unsere Seiten sind integriert. Gehen wir nun, solange die Schaltfläche noch ausgewählt ist, und gehen wir in den Stil. Wie Sie sehen können, ist dies die zusammenklappende Farbschaltfläche , die zeigt, dass wir hier nur zwei Optionen haben. Für den Farbhintergrundtyp. Wir können das ändern in. Wir können das in dieses Gelb ändern. Lass mich das Gelb kopieren. Klicken Sie auf eine beliebige Stelle in diesem Bereich , um dieses Pop-up zu entfernen. Da haben wir's. Und beim Schweben wollen wir, dass es weiß ist. In seinem normalen Zustand ist es also gelb. Farbe beim Schweben. Wir wollen, dass es weiß ist. Also lass mich hier klicken. Beim Schweben ist es weiß. Aber solange der Wert noch darunter ist, sollte der Text schwarz werden. Einfach so. In Ordnung, also ändern wir auch den Randradius auf zehn. Und das macht es an den Ecken etwas runder. Wir sollten auch die Größe der Schaltfläche erhöhen , indem wir die Polsterung erhöhen. Padding, lassen Sie uns das zusammenklappen , dadurch wird die Schaltfläche reduziert. Aber jetzt für links, geben wir 50 für die Fahrt, 50 für die Spitze. Geben wir es vielleicht 20, unten 20. Das macht den Button also viel größer, Theta. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Also los geht's. Wenn Sie den Mauszeiger bewegen, ändert es sich zu y. Und wenn wir darauf klicken, werden die URL und die Anbieter geöffnet . So erstellt man also den Heldenbereich. In der nächsten Lektion erfahren Sie, wie Sie diesen Assistenten für Anfragen und Termine erstellen . Wir sehen uns in Kürze. 12. 12 Mache den Header klebrig: Willkommen zurück. Jetzt ist es an der Zeit, mit der Arbeit an diesem Buch zu beginnen, einem Terminassistenten. Also zurück zu unserer Referenz, dieser Anfrage, einem Terminassistenten. Aber bevor wir das tun, habe ich mich gerade daran erinnert wir eine wichtige Sache vergessen haben. Beachten Sie also, wenn er anfängt zu krabbeln, wie ich bereits erwähnt hatte, der Header bleibt oben. Das nennen wir Sticky Header. Es ermöglicht dem Benutzer Zugriff auf das Menü, unabhängig davon welchem Teil der Website oder Webseite er sich befindet. Das ist also sehr wichtig für die Benutzererfahrung, UI UX. Schauen wir uns also an, wie man den Header klebrig macht und auch diese Hover-Effekte hinzufügt , weil ich denke, das haben wir vergessen. Ja, haben wir. Wenn Sie also auf dieses Burger-Menü klicken, beenden Sie es. Gehen wir zurück in die Header-Footer von Elements Kit. Klicken wir auf Mit Elementor bearbeiten , um es direkt im Frontend zu bearbeiten. Und da haben wir es. Lassen Sie uns nun zunächst auf dieses Nav-Menü klicken und ins Innere des Stils gehen. Ich möchte den Menü-Wrapper reduzieren und einen Menüelementstil öffnen . Und jetzt werden Sie feststellen, dass wir unter Typografie den normalen Status bewegen und aktiv sind. Im Normalzustand sollte es schwarz sein, aber wenn Sie den Mauszeiger bewegen, ist es grau und wir möchten, dass es gelb ist. Lassen Sie mich darauf zurückkommen. Kopiere die gelbe Farbe. Wählen Sie Elemente wie Scholar aus und fügen Sie sie dort ein. Wenn wir jetzt mit der Maus darüber fahren, ist es gelb. Das gewährleistet die Konsistenz der Markenfarben. Und wenn es aktiv ist, wollen wir auch, dass es so gelb ist. Also füge ich das da rein. Aktualisiere das. Lassen Sie uns die Änderungen überprüfen. Da haben wir's. Eine andere Sache ist, unser Logo zu einem Link zur Homepage zu machen Link zur Homepage zu , sodass jemand, der auf das Logo klickt, zur Homepage zurückkehrt. Lassen Sie mich einfach meinen Homepage-Link nehmen. Kopiere das. Wählen Sie das Bild selbst aus. Und direkt hier unter dem Inhaltslink wählen Sie eine benutzerdefinierte URL aus. Und ich füge meinen Homepage-Link dort ein, weil das meine URL ist. Also, wenn ich diesen Browser einfach so nach unten ziehen könnte. Mein Homepage-Link ist www.mydomain.com. Stellen Sie also sicher, dass es Ihre Domain.com ist. Lass mich das einfach wieder nach oben ziehen, einfach so. Jetzt, wo wir es so haben, lassen Sie uns das aktualisieren. Sehen Sie sich eine Vorschau der Änderungen an. Wenn Sie jetzt mit der Maus über das Bild fahren, wird es, wie Sie sehen, in ein Handsymbol verwandelt um zu zeigen, dass Sie darauf klicken können. Wenn wir also jetzt auf diesen Link klicken, wird nicht zu der Homepage weitergeleitet, die wir als unsere Homepage ausgewählt haben. Wir werden zur von WordPress festgelegten Standard-Homepage weitergeleitet , da wir keine bestimmte Homepage als Startseite festgelegt haben keine bestimmte Homepage als Startseite festgelegt und lassen Sie mich Ihnen zeigen, was ich meine. Wenn ich also darauf klicke , werden wir zur Standard-HelloWorld-Homepage weitergeleitet, aber wir möchten auf diese Homepage weitergeleitet werden. Lass mich auf diese Startseite klicken. Wir wollen hierher gebracht werden. Also, wie stellen wir die Homepage ein? Gehst du zurück in unser Armaturenbrett? Lass mich einfach hergehen. Dashboard-Einstellungen, das Lesen der Startseite wird angezeigt. Also, was wir tun wollen, ist eine statische Seite und dann Startseite und dann Home auszuwählen. Das ist unsere Seite. Dies ist eine Liste aller Seiten, die wir haben. Speichern Sie dann die Änderungen. Wenn wir nun zum Frontend gehen und sagen wir, wir befinden uns auf der About-Seite. Wenn wir klicken, wird das Logo entfernt. Die Homepage, die Sie ausgewählt haben , weil die URL darauf verweist. Aber wie Sie sehen können, ist unser Header immer noch nicht klebrig. Also, wie machen wir es klebrig? Genau wie auf unserer Referenzseite hier. Um das Beste aus Sticky zu machen, müssen wir das Plugin verwenden , das ich Ihnen zuvor gezeigt habe ist auch eine Erweiterung von Elementor und Es ist auch eine Erweiterung von Elementor und heißt Sticky-Header-Effekte für Elementor. Gehen Sie also in unser Dashboard und klicken Sie einfach auf Dashboard. Gehen wir zu Plugins. Fügen Sie Neu hinzu und geben Sie Sticky Header ein. Hier sind Sticky-Header-Effekte für Elementor installiert. Lassen Sie uns es jetzt aktivieren. In Ordnung, und jetzt ist es installiert. Stimmt das? Gehen wir jetzt zurück zu der Stelle, an der wir den Header bearbeitet haben. Wenn ich Strg R drücke, um die Seite zu aktualisieren, oder einfach mit der rechten Maustaste klicken und neu laden. Wenn wir nun den Header auswählen und hineingehen oder erweitern, wie Sie sehen können, Sticky-Header-Effekte für Elementor angezeigt Jetzt erweitert und dann aktivieren wir sie. Jetzt werden hier natürlich mehrere Einstellungen angezeigt, aber die einzige Einstellung, die wir benötigen, ist, den Header-Hintergrund zu ändern , sobald wir mit dem Scrollen beginnen. Bevor wir das tun, lass mich dir zeigen, was ich meine. Lassen Sie uns das aktualisieren, bevor wir diese Hintergrundfarbe aktivieren. Jetzt, wo es aktiviert ist, lass mich einfach zum Frontend wechseln. Wenn wir anfangen zu scrollen. Wir haben noch nicht genug Inhalt, um dort nach unten zu scrollen , damit ich dir zeigen kann, was ich dir zeigen möchte. zunächst Lassen Sie mich zunächst diese Seite schnell bearbeiten , um zusätzliche Inhalte darunter hinzuzufügen. Lassen Sie mich hier einfach einen Abschnitt hinzufügen. Lassen Sie mich oben einen sehr großen Spielraum geben, etwa 200. Lassen Sie mich dort vielleicht ein paar Texte hinzufügen. Aktualisiere das. Du kannst eigentlich schon sehen , was ich dir zeigen möchte. Lassen Sie uns eine Vorschau dieser Seite anzeigen. Jetzt. Wenn wir scrollen, wie Sie sehen können, ist die Kopfzeile jetzt klebrig, hat aber keinen Hintergrund. Und das wollen wir klären, weil Sie das Logo nicht sehen können , solange der Hintergrund transparent ist. Was wir also tun wollen, ist zu der Stelle zurückzukehren, an wir den Header bearbeiten, der hier ist. Und obwohl wir noch unter fortgeschrittenen Sticky-Header-Effekten sind, wird die Hintergrundfarbe aktiviert, die auswählt, welche Farbe der Hintergrund nach dem Scrollen geändert werden soll. Und wir wollen, dass es weiß ist. Also aktualisiere das. Lassen Sie uns eine Vorschau davon anzeigen. Jetzt. Wenn es zur Startseite geht und scrollt, wie Sie sehen können, ist der Hintergrund weiß und alles in der Kopfzeile ist sichtbar. Im Grunde genommen ist es also so, dass der Header haften bleibt. In der nächsten Lektion sehen wir uns an, wie man ihr Buch erstellt. Ein Termin mit , wir sehen uns in Kürze. 13. 13 Erstellen Sie den Appointment Formi installieren: Hallo, Willkommen zurück. Jetzt ist es an der Zeit, die Anfrage zu erstellen, einen Termin mit diesem Ergebnis genau hier. Und dazu müssen wir ein Formular-Plugin namens Terminator installieren . Jetzt gibt es mehrere andere Formular-Plug-ins auf dem Markt. Aber ich liebe For Me auch nicht, weil die meisten der tollen Funktionen , die es kostenlos oder Premium anbietet oder mit anderen ausländischen Plug-ins bezahlt wurde, ohne Zeit zu verschwenden. Gehen wir in das Armaturenbrett. Ich möchte nur auf das Dach von COE gehen. Armaturenbrett. Plugins, füge neue hinzu. Lass uns nach einer Form suchen. Und los geht's. Es ist von WP MU dev. Es hat mehr als 300.000 Installationen und wie Sie sehen, hat es eine Fünf-Sterne-Bewertung von mehr als 1.000. Installieren. Lassen Sie uns nun weitermachen und aktivieren. Und da haben wir es. Ich habe dieses Menü hier auf der linken Seite herausgenommen. Für viele sollten sie ganz unten sein. Also hier sind wir. Wenn ich also einfach für mich klicke, wird keiner von beiden zu diesem Teil weitergeleitet, wo du eine Zusammenfassung all deiner Formulareingaben, Missionsquiz und all das hast. 14. 14 Erstellen Sie den Appointment ein Formular erstellen: Und wir haben auch diese Abkürzungen, um ein Formular zu erstellen oder eine Umfrage zu erstellen. Aber was uns vorerst interessiert, ist die Erstellung eines Formulars. Also werde ich erstellen, wir haben verschiedene vorgefertigte Formulare , mit denen wir schnell beginnen können. Da unsere jedoch benutzerdefiniert ist, klicken wir auf Leer und fahren fort. Geben wir ihm einen Namen. Termine. Lass uns kreieren. Und jetzt können wir hier beginnen, die verschiedenen Felder einzufügen , die wir in unserem Formular haben möchten. Dies sind die verschiedenen Bereiche. Fangen wir also mit dem Service an. Welchen Service benötigen wir? Welchen Service benötigt der Kunde? Also natürlich, das ist jetzt ein Drop-down-Menü. Ich gehe wieder hier rein. Lassen Sie uns ein Feld einfügen. Und die Dropdownmenüoption heißt Select, wie Sie hier sehen können. Ich wähle das Einfügefeld aus und es werden die Einstellungen für diesen speziellen Formularfeldtyp angezeigt. Natürlich wird es nicht Latch genannt. Wir nennen es Service. Art der Dienstleistung. Das ist der Platzhalter, das ist die Bezeichnung oder das Formularfeld, wie dieser Dienst hier oben, um diese Brownfield zu beschriften. Es ist auch hier zu gehen und die Optionen vorzubereiten. Also Dachreparaturen, das ist die erste Option im Drop-down-Menü. Austausch des Daches. Und ich denke, lassen Sie uns vorerst damit weitermachen. Aber natürlich geben Sie jetzt die spezifischen Dienste ein, die Sie haben. Wenn Sie dieses Feld dann als erforderlich kennzeichnen möchten, können wir in die Einstellungen gehen. Moment ist es optional, aber wir können es nach Bedarf einstellen und dann die Botschaft festlegen , dass die Leute sehen , wenn sie es nicht spüren. Daher ist eine Art der Umfrage mit einem Ausrufezeichen erforderlich. In Ordnung, gehen wir zurück zu den Etiketten. Lassen Sie uns einen Platzhalter hinzufügen. Die Servicezeit. Jetzt können wir auf Anwenden klicken. Wenn wir nun eine Vorschau anzeigen, hat es diesen Drop-down-Menü-Dienst. Wählen Sie einen Servicetyp und dann die Liste der Optionen, die wir vorbereitet haben. In Ordnung, lass uns das schließen. Und dann veröffentlichen wir dieses Formular. Nachdem wir es veröffentlicht haben, erscheint dieses Pop-up mit einem Kurzcode. Und dies ist der Kurzcode, den wir auf unserer Seite einfügen werden , um das Formular anzuzeigen. Also lass uns das kopieren. Wir haben erfolgreich geboten. Und nur für den Fall, dass Sie dies geschlossen haben, können Sie den Kurzcode jederzeit von hier abrufen , indem Sie das Formular noch bearbeiten. Termine anfragen, auf dieses Zahnrad klicken, Kurzcode kopieren. Der Kurzcode wurde für mich erfolgreich kopiert. Nun, wenn ich mit der rechten Maustaste auf diesen geöffneten Link in einem neuen Tab klicke und dann zu diesem neuen Tab gehe. So können wir die Seite öffnen und dann auf Mit Elementor bearbeiten klicken. So können wir mit der Bearbeitung der Seite mit Elementor beginnen. Wenn ich zuerst nach unten scrolle , lass mich das zuerst loswerden. Ich kann einen neuen doppelspaltigen Abschnitt hinzufügen. Und in diesem Teil klicken Sie auf dieses Plus. Und dann genau hier den Kurzcode oder einfach nur kurz eingeben. Es wird der Kurzcode angezeigt. Ziehen Sie diesen Kurzcode und geben Sie ihn dort ein. Und solange es noch aktiv ist, liest es sich als Edit-Trod-Code. Jetzt können wir hier den Kurzcode einfügen, den wir gerade aus dem Formulator kopiert haben. Da haben wir's. Dieser Kurzcode wurde dort eingefügt. Und wie Sie jetzt sehen können, wird es im Frontend angezeigt. Alles, was wir jetzt tun müssen, ist diese anderen Felder zu erstellen. Und wir werden unsere Form haben und dann unsere Form gestalten. Ich gehe wieder hier rein. Lassen Sie uns das aktualisieren. Sehen wir uns eine Vorschau der Änderungen an. Scrollen Sie also nach unten, da ist es. Mach dir keine Sorgen. In Kürze wirst du so aussehen. 15. 15 Erstelle den Appointment Füge den gesamten F hinzu: Und willkommen zurück. Jetzt, da wir unser Formular im Frontend angezeigt haben, ist es an der Zeit, die restlichen Felder des Formulars hinzuzufügen. Gehen wir zurück in unser Dashboard klicken wir auf Feld einfügen und klicken wir auf Feld einfügen. Jetzt können wir einige davon auswählen. Was wir also benötigen, ist der Name des Benutzers, seine E-Mail-Adresse, sein Telefon und seinen Textbereich. Ich denke, das reicht. Also Feld einfügen, und da haben wir es. Sie uns eine Vorschau anzeigen, bevor wir Anpassungen vornehmen. Und los geht's. So sollte es also aussehen. Sie wählen die Art von Service aus, die sie benötigen. Sie geben ihren Namen, ihre E-Mail-Adresse und ihre Telefonnummer an, damit wir sie erreichen können, sowie alle zusätzlichen Informationen, die sie uns erhalten möchten. Sobald sie einen Termin mit all diesen Informationen angefordert haben, können wir uns telefonisch oder per E-Mail mit ihnen in Verbindung setzen und den Termin vereinbaren. vor diesem Hintergrund Lassen Sie uns vor diesem Hintergrund das schließen und dann aktualisieren, damit diese Änderungen übernommen werden. In Ordnung, jetzt ist es gespeichert. Lassen Sie uns eine Vorschau der Änderungen im Frontend anzeigen. Wenn ich diese Seite aktualisiere und dann eine Vorschau der Änderungen sehe. Ja, also da haben wir es. Als Nächstes möchten wir das Erscheinungsbild des Formulars aktualisieren , das kohärent ist oder mit dem Branding der Website, den Markenfarben, übereinstimmt . Moment, wenn wir den Mauszeiger darüber bewegen, ist es blau, und das sind die Standardfarben , die beim späteren Formen verwendet werden. Wir müssen auch einige dieser Angaben hier ändern , da Sie möglicherweise Ihre eigene Landesvorwahl für die Telefonnummer und all das verwenden möchten . Gehen wir also wieder rein hier im Armaturenbrett. Lass uns auf den Namen klicken. Also können wir das in deinen Namen ändern, und dann kann das Alex Cross sein. Wir können es auch zu einem Pflichtfeld machen. Name ist erforderlich. Und dann lassen Sie uns das anwenden. Lassen Sie uns das vorerst in der Vorschau ansehen. Dies ist ein Pflichtfeld. Dies ist auch ein Pflichtfeld, aber diese sind nicht erforderlich und Sie können es an diesem Sternchen erkennen. Wenn wir jetzt Nachricht senden sagen, werden Sie feststellen, dass wir diese benutzerdefinierten Nachrichten erhalten , die wir eingegeben haben. Name ist erforderlich, Art der Dienste erforderlich. Diese weisen jedoch auf keine Probleme hin. Um es konsistent zu machen, lassen Sie uns das in einen Apostroph ändern. Die E-Mail-Adresse ist ebenfalls erforderlich. Beine bei company.com. Es macht es auch erforderlich. Ihre E-Mail ist erforderlich. Die Telefonnummer kann optional sein. Wende das an. Und dann für den Textbereich. Lassen Sie uns zunächst etwas ändern. Es ist mit zwei zusätzlichen Informationen gekennzeichnet. Und was den Platzhalter angeht, triff dich. In Ordnung, lassen Sie uns eine Vorschau davon sehen. Wie Sie sehen, zusätzliche Informationen, was sollten wir sonst noch beachten, wenn wir uns auf Sie vorbereiten? Telefonnummer. All diese Details werden von uns individuell angepasst. In Ordnung, also lass uns das aktualisieren. Und jetzt wurden die Änderungen gespeichert. Also zurück zum Frontend auf der Seite, auf der wir es bearbeiten. Wählen Sie eine beliebige Stelle innerhalb des Shortcode-Elements aus. Wir können die Seite aktualisieren oder einfach auf Anwenden klicken , um die Änderungen, die wir im Backend vorgenommen haben, zu übernehmen. Jetzt ist es aktualisiert. Sehen wir uns eine Vorschau der Änderungen an. Ordnung, und da haben wir es. So fügen Sie also im Grunde alle Felder für das Terminformular hinzu. In der nächsten Lektion sehen wir uns an, wie Sie das Erscheinungsbild und die Farben anpassen können , damit es mit dem Rest der Website übereinstimmt. Also werde ich dich bald sehen. 16. 16 Erstellen Sie den Appointment der Form Ap: Willkommen zurück. Wie Sie sehen können, , wenn ich mit der Maus über diese Felder sind sie blau gefärbt, wenn ich mit der Maus über diese Felder fahre. Und das wollen wir nicht, weil das nicht mit unseren Markenfarben übereinstimmt. Also, wenn wir hier wieder reingehen, wollen wir, während wir noch das Formular für die Terminanfrage bearbeiten, zum Feld Aussehen gehen. Und wenn ich zurück zu den Feldern, zum Feld gehen könnte , wenn wir hier runter gehen, haben wir auch diesen Button hier, der uns zum nächsten Ort führt, nämlich zu diesem Teil. Wenn ich also auf Aussehen klicke, merkst du, dass wir diesen Teil jetzt hervorgehoben haben. Wenn ich nach unten scrolle, wirst du feststellen, dass wir hier Verhalten haben und hier haben wir auch Verhalten. Im Grunde gehen wir diese Schritte durch, um die Einrichtung unseres Formulars abzuschließen. Jetzt, wo wir uns im Schein befinden, wollen wir uns zunächst ändern. Dies ist eine Vorschau unseres Formulars. Dies ist eine Vorschau, wie das Formular aussehen wird. Wenn ich also Flaggen auswähle , die die Ränder auf dem Feld entfernen, wenn ich Fett auswähle , wird wenn ich Fett auswähle , diese Zeile fett. Die Standardeinstellung ist ziemlich schmerzhaft. Kühn. Das ist der, den ich mag. Tatsächlich haben wir dann auch Material und keins. Also entscheide ich mich für fett. Wir können den von Ihnen gewünschten auswählen. Jetzt. Das ist für den Designstil. Genau hier. Wir haben auch die Möglichkeit, die Farben zu ändern. Moment verwenden wir also die Standardfarben, die mitgeliefert werden, für mich auch nicht, aber ich möchte das Kostüm wählen. Und das wird hier mehr Einstellungen zeigen, mit denen wir herumspielen können , um die Formel genau so zu gestalten , wie wir es wollen. Fangen wir also mit einem Absenden-Button an. Also, bevor wir etwas ändern, ist der Absenden-Button blau und die Hoverfarbe hier ist auch blau. Also lass uns das schließen. Oh warte, wenn wir eine Vorschau davon sehen, beachte, dass unser Formular jetzt fett gedruckt ist. Es hat kräftige Randfarben. Gehen wir also zum Absenden-Button. Erweitere das. Und die Hintergrundfarbe ist blau. Wenn ich also hier wechseln und diese gelbe Farbe wählen könnte, klicken Sie darauf, um diesen Teil anzuzeigen, doppelklicken Sie darauf und fügen Sie ihn dort ein. Wenn wir es in der Vorschau ansehen. Jetzt gelb gefärbt, aber beim Schweben ist es blau. Also möchte ich das ändern. Dies ist standardmäßig, anstatt vielleicht diese Farbe haben zu wollen. Wenn wir nun eine Vorschau davon sehen, wenn wir den Mauszeiger bewegen, eine dunkle Farbe essen oder noch besser, lassen Sie uns die tatsächlichen Farben verwenden , die wir verwenden wollten. Also mache ich ein sehr dunkles Blau, das wie Schwarz aussieht. Aktualisiere das. Wir müssen die Fokusfarbe nicht wirklich ändern , aber aus Konsistenzgründen. Ordnung, lassen Sie uns jetzt eine Vorschau darauf werfen. Fantastisch. Also gefällt mir, wie es aussieht. Lassen Sie uns das schließen und aktualisieren, da Sie unveröffentlichte Änderungen haben. Jetzt ist es gespeichert. In Ordnung, das nächste, was wir tun wollen, ist an der Schwebefarbe der Felder zu arbeiten . Wenn Sie das schließen, denken Sie an dieses Drop-down-Menü, dieses Feld, der Typ dieses Feldes ist Auswahlfeld. Ich gehe zurück in die Felder. Denken Sie daran, dass das Einfügen fehlgeschlagen ist und das Drop-down-Menü eine ausgewählte Eingabeart war. Also wieder hier rein, Aussehen, Kostüm. Wir haben hier die gewählte Art der Eingabe. Und die Standardrandfarbe ist dieses Dunkelgrau. Wenn ich also das Dunkelgrau im Standardzustand beim Hover öffne , ist es blau. Also, was ich will , ist, es leichter zu machen. Also klicken Sie darauf und lassen Sie es uns so hellgrau machen. Sehen Sie sich das an. Wie Sie sehen können, ist das Grau heller als dieses andere Grau. Ich will immer noch, ich will es immer noch leichter machen als es jetzt ist. Lassen Sie mich das auf unserem Board als Vorschau ansehen, und mir hat dieses Notenniveau gefallen. In Ordnung, also jetzt auf Hover. Lassen Sie uns die Randfarbe in dieses Gelb ändern. Füge es da rein. Und lassen Sie uns eine Vorschau darauf werfen. Auf jeden, der das Gelb isst. Im Fokus wollen wir auch, dass es so gelb ist. Aber du kannst es in jeder gewünschten Farbe machen. Erinnerst du dich daran? Dann wollen wir die Symbolfarbe auch so gelb machen. Aber du kannst es machen, lass uns es in dieser dunkelschwarzen Farbe machen. Jep. So wie das. Beim Schweben. Es muss diese dunkle Farbe haben. Sogar. Und standardmäßig ist dies das Symbol, über das wir gesprochen haben. An, aber es ist immer noch schwarz. Ich will dieselbe Kolumne behalten. In Ordnung, also was sonst? Textfarbe, Textfarbe sieht okay aus. Lassen Sie uns nun an dieser Farbe des Dropdownmenüs arbeiten. Wir sind also fertig mit der Auswahl-Dropdownliste. Der Container muss eine Container-Grenze sein. Lass es uns so dunkel machen. Etwas dunkleres Grau. Ja, das ist etwas dunkleres Grau. Und ich denke, alles andere sollte so bleiben, wie es ist. Also lass uns das schließen. Lassen Sie mich das zunächst aktualisieren , damit wir die Änderungen speichern können. Das ist gespeichert. Lassen Sie uns als Nächstes an den restlichen Feldern arbeiten. Also möchte ich zuerst dieses Hellgrau auf die restlichen Felder kopieren . Lass uns wieder hier rein gehen. Innen auswählen. Es war Triple C, E. Anstatt das zu kopieren. Gehen wir zum Eingabe- und Textbereich. Bei diesen anderen Feldtypen handelt es sich um Eingaben. Und das ist der Textbereich. Diese drei sind Eingänge. Standardrandfarbe sollte also dreifach C E, C B, C E C, D sein. Lassen Sie mich das kopieren. Sie müssen es nicht kopieren. Jetzt haben sie alle diese Farbe, aber jetzt wollen wir sie beim Schweben gelb machen. Also kopiere ich die gelben Klamotten , die schweben. Im Fokus. Wir möchten auch, dass es für den Fehler so gelb ist. Lassen wir es bei der Standardfarbe , da Fehlermeldungen normalerweise nur rot gefärbt sind. Lassen Sie uns eine Vorschau davon anzeigen. Jetzt. Los geht's. Also im Fokus. hat eine goldene Farbe und eine gelbe Farbe, sodass es auffällt und der Benutzer sehen kann, wo er tippt. Sobald wir das aktualisiert haben, gehen wir zum Frontend. Wählen wir das Formular an einer beliebigen Stelle im Kurzcode aus, aus dem hervorgeht, dass diese angewendet wurden. Lassen Sie uns nun eine Vorschau der Änderungen anzeigen. Scrollen Sie mit der rechten Maustaste nach unten. Wie Sie sehen, wird das Erscheinungsbild des Formulars jetzt wie gewünscht aktualisiert. So erstellen und passen Sie das Formular nun mit dem Formulator an. In der nächsten Lektion sehen wir uns an, wie man das Layout ändert und es nach oben schiebt , sodass es im Heldenbereich stilistisch dargestellt wird. Und gleichzeitig werden wir an diesem neu definierten Dachabschnitt arbeiten . Jetzt bearbeiten wir offiziell den Körperbereich. Wir sehen uns in Kürze. 17. 17 Erstelle den Body Section Roofing neu definiert: Hey, willkommen zurück. Jetzt, wo wir mit dem Terminformular fertig sind, ist es an der Zeit, den Textbereich auszufüllen und wir beginnen mit diesem Bereich hier, mit diesem Textblock. Wir wollen so etwas machen. Also, was ich tun möchte, ist, mir das einfach zu schnappen. Lass uns hier reingehen. Hier bearbeiten wir die Landingpage. Und hier drin ist das natürlich ein doppelspaltiger Abschnitt. Wir haben also diese Kolumne. Wenn ich hier reingehe, kann ich mir einfach eine Überschrift schnappen. Und jetzt, da es das aktive Element hier ist, heißt es Überschrift bearbeiten, und ich kann weitermachen und Löschen auswählen und es dann dort einfügen. Ich möchte auch wieder hier reingehen und mir diesen Text holen. Jetzt kopiere ich diese Steuer, aber natürlich müssen Sie Ihren eigenen benutzerdefinierten Text verwenden . Dies war nur ein Text, den ich mir bei der Erstellung der Referenzwebsite ausgedacht habe. Okay, also geh wieder rein und ich möchte hier oben auf dieses Symbol klicken , um ein Texteditor-Element hinzuzufügen. es fallen, wenn diese blaue Linie erscheint, und klicken Sie dann hier hinein und fügen Sie den Text dort ein. Oder jetzt, für Ihren Fall, geben Sie dort ein, was Sie eingeben möchten. Lassen Sie uns das jetzt aktualisieren. Und bevor wir weitermachen, werden Sie feststellen, dass wir die Schriftfamilie der einzelnen Text- oder Typografieelemente hier oben im Heldenbereich geändert haben der einzelnen Text- oder . Und wir wollen die Topographie nicht ständig individuell ändern. Für jedes einzelne Element können wir einfach eine globale Schriftart festlegen, die jeder neue Text jedes Mal annimmt, wenn wir neue Texte hinzufügen. Also tun wir das, indem wir in dieses Burger-Menü, Seiteneinstellungen und globale Schrift gehen. Lassen Sie uns also die Hauptschrift oder die Überschriftarten Montserrat erstellen. Und jetzt wirst du feststellen, dass sich das zu Montserrat geändert hat. Klicken Sie hier auf eine beliebige Stelle, um den sekundären Monitor AX zu entfernen . Klicken Sie dort auf eine beliebige Stelle. Für die Texte, das sind die Körpertexte wie dieser, wir wollen auch, dass es Montserrat ist. Das hat ein Montserrat verändert und auch den Akzent. Aktualisiere das. Wir können auch die gewünschte Schriftstärke für unsere Überschriften vorgeben . Also wollte ich 800 hinzufügen. 800 ist okay. Aktualisiere das. Jetzt wird jedes Mal, wenn wir Text auf den Webseiten hinzufügen , standardmäßig interaktiver. Also, wenn ich das schließe, geh zurück. Lass mich das einfach schließen. Wenn ich jetzt eine Überschrift hier reinziehe, ist es standardmäßig Montserrat. Das wollten wir. Jetzt müssen wir also nicht mehr zu den Einstellungen zurückkehren, um sie zu ändern. Welches Telefon soll ich necken. das erledigt ist, erhöhen wir zunächst Wenn das erledigt ist, erhöhen wir zunächst den Abstand am oberen Rand des Textes, den Abstand zwischen dem Text und dem Rand dieser Spalte oben. Also wähle ich die Spalte Advanced Padding aus. Lass es uns nach unten drücken. Wir vergrößern nur den Abstand darüber. Lassen Sie uns es ein wenig auf 90 reduzieren. Lassen Sie uns auch die linke Polsterung erhöhen. Vielleicht nach diesem Zeitpunkt. In Ordnung, so. dies jetzt nach oben drücken, wird die Säule tatsächlich nach oben verschoben. Wählen wir also diese Spalte „Erweitert“ aus. Lassen Sie uns den Rand durchbrechen und dann oben. Schieben wir es einfach so nach oben. Bis zu diesem Teil wollen wir. Lass uns auf vielleicht 20 steigen, zwei Drittel davon. Und dann, solange wir noch hier sind, lass uns zum Stil gehen. Solange diese Spalte noch ausgewählt ist, Stil, Hintergrund, möchte ich sie weiß machen. Da haben wir's. Wir wollen auch wieder in die fortgeschrittenen Bereiche zurückkehren. Und geben wir ihm eine Polsterung von 20 rundum. Sagen wir 30 oder 40. Schieb alles so rein. Und dann geben wir ihm einen Randradius. Grenzradius von 20. Das gibt ihm rundum diese abgerundete Ecke. Und dann lassen Sie uns die Seite aktualisieren. eine Vorschau der Änderungen an. Und los geht's. So sieht es also aus. Lassen Sie uns etwas dagegen tun. Oder sieht es hier aus? Hat diese Farben. Gehen Sie also wieder rein und wählen Sie diesen Stil aus. Lass mich gehen und mir diese dunkle Farbe holen. Sei es, solange dies noch die ausgewählte Stiltextfarbe ist, füge sie dort ein. Und lass uns zur Typografie gehen, die Größe erhöhen. Ich glaube, ich will, dass es 900 sind, so. In Ordnung, aktualisiere das. Lassen Sie uns einfach so eine Vorschau der Änderungen anzeigen. Also los geht's. So erstellt man also den neu definierten Dachabschnitt. Ich glaube, mir gefällt, wie es aussieht. Als Nächstes wollen wir diesen Abschnitt mit großen Auswahlmöglichkeiten erstellen. Sehen wir uns in der nächsten Lektion an , wie das geht. Bis bald. 18. 18 Erstellen Sie den Körper-Abschnitt, warum Sie uns auswählen: Willkommen zurück. Jetzt ist es an der Zeit, den Abschnitt Y wählt zu erstellen . Dieser Abschnitt. Gehen wir also zurück in unseren Editor. Und lassen Sie uns einen neuen Abschnitt hinzufügen. Und natürlich ist es ein einspaltiger Abschnitt. Ja, es ist ein einspaltiger Abschnitt. Also einspaltig. Und jetzt beachte natürlich, dass der Hintergrund dunkelschwarz ist, dieses dunkle Marineblau. Also schnapp ich mir das einfach. Kopieren. Wählen Sie diesen Abschnitt aus, geben Sie Stil, Hintergrundtyp und Farbe ein. Jetzt füge das da rein. Jetzt ist es dieses Land. Denken Sie daran, dass die Höhe eines Abschnitts durch den Inhalt eines Abschnitts bestimmt wird . Lassen Sie uns also einige Inhalte hinzufügen. Und Sie werden feststellen, dass wir hier diese Kreuzung haben , die weiß ist und zwei Spalten hat. Schauen wir uns also zuerst an, wie man eine Kreuzung hinzufügt. Also, wenn ich wieder hier reingehe, klicke ich auf Plus und dann haben wir eine Kreuzung. Also lasse ich es da rein. Standardmäßig hat es zwei Spalten. Und genau das brauchen wir, denn es gibt diesen Textblock und da ist das Bild. Aber bevor wir an diesem Teil arbeiten, sollten wir uns auch das ansehen. Warum entscheidet man sich dafür, schneller vorzugehen? Wir können diese Überschrift einfach duplizieren. Also bewege ich den Mauszeiger dort drüben und klicke dann auf diese beiden Duplikate. Und dann ziehe ich das und lasse es über der Kreuzung fallen . Weil es dieselbe Farbe wie der Hintergrund hat. Du kannst es sehen. Also wähle ich es aus. , ist es noch ausgewählt, Wie Sie sehen, ist es noch ausgewählt, es ist die Überschrift „Bearbeiten“. Lass mich die gelbe Farbe nehmen. Bobby, lass uns reingehen, Style. Füge es da rein. Gehen wir zurück in den Inhalt und richten wir ihn auf die Hauptmahlzeit aus. Also schnapp dir diesen Text. Wahrscheinlich kann das auch duplizieren, diesen Textkörper duplizieren. Und dann doppelklicken Sie darauf, fügen Sie es dort ein. Gehen Sie in den Stil hinein, ändern Sie ihn in Weiß und richten Sie ihn in der Mitte aus. Jetzt müssen wir natürlich den Abstand oben im Text erhöhen. Der Abstand zwischen dem Rand des Abschnitts und dem Inhalt innerhalb des Abschnitts oben. Also wähle ich den Abschnitt Advanced Padding top aus. Lassen Sie uns die Dinge ein wenig nach unten verschieben. Und auch unten, unterhalb des Innenteils, brauchen wir etwas Polsterung. Also lass uns das auch machen. Ich gebe dir die 50. Wir sind immer noch unter der Sektion. Lassen Sie uns nun weitermachen und die Kreuzung auswählen. Ändern, zu Stil, Hintergrund wechseln. Ändere die Farbe in Weiß. Einfach so. Mir ist gerade eingefallen, dass wir das nicht als H1 eingestellt haben. Es sollte ein H1 sein. Jede Landingpage sollte eine H1 haben und nicht zwei oder drei. Nur ein H1. Und H1 ist eine Aussage oder ein Satz, der dem Benutzer kurz gesagt sagt, worum es auf dieser Seite geht. Es ist das Alleinstellungsmerkmal dieser Seite oder Ihres Unternehmens. Und darauf gehe ich in meinem SEO-Kurs ausführlich ein , den du dir ansehen kannst, indem mein Profil hier auf Skillshare besuchst. In Ordnung, das ist jetzt also ein H1. Wir können so viele H2, H3, H4, H5 haben, wie wir wollen. Das ist auch ein H2. Und das ist okay. In Ordnung, das nächste, was wir tun wollen, ist diesen inneren Text hinzuzufügen. Deshalb kümmern wir uns um Ihre Bedürfnisse. Kopiere das. Lass uns das auch duplizieren. Ziehen Sie es und legen Sie es in diese Spalte. Lass uns das duplizieren. Ziehe es drunter und lege es dort ab. Also wähle ich das aus. Und weil ich den Text kopiert habe, kümmern Sie sich um Ihre Bedürfnisse, aber wir müssen ihn etwas verkleinern. Gehen Sie also zur Insights-Kachel. Und dann schnappte ich mir für diese Texte P, die das ausgewählt haben. Füge es ein. Okay, lass mich hier einfach ein Bild hinzufügen, damit ich auf das Bild klicke. Bild. Ist das. In Ordnung? Also obwohl das Bild tatsächlich ist, haben wir diese Einstellungen. Lass mich es hochladen. Hier ist es, geöffnet. Medien einlegen und los geht's. Also können wir es kleiner machen. Wir können den Button auch duplizieren. Ziehen Sie es, während die linke Maustaste noch unter Druck Ihrer Finger steht , und scrollen Sie mit dem Rad nach unten. Sie den Knopf genau dort. Und jetzt haben wir hier eine Icon-Liste. Also lass uns wieder hier rein gehen. Klicken Sie auf diese Symbolliste. Ziehen Sie die Symbolliste per Drag & Drop direkt dort ab. Der Rand direkt unter dem Text ist zu groß, also wähle ich den Text aus. Erweiterte Marge. Reduzieren Sie den Rand unten. Lass mich das kopieren. Wählen Sie das aus. Und dann erweitern wir die Liste mit Punkt Nummer eins. Ich doppelklicke darauf und füge es dort ein. Gehen Sie wieder hier rein, schnappen Sie sich diese Kopie, die zusammenklappen , erweitern Sie diesen Doppelklick, fügen Sie sie dort ein. Und zum Schluss, kopiere das. das abgelaufen, erweitern Sie den Doppelklick dort und fügen Sie ihn ein. Jetzt. Natürlich müssen wir jetzt die Symbole ändern, wir können sie ändern. Ich möchte auch den Abstand zwischen diesen beiden vergrößern , damit ich die Schaltfläche Erweitert, Rand, oben auswählen und etwas nach unten drücken kann. Und dann beim Schweben habe ich bemerkt, dass es weiß ist. Ich möchte, dass es so dunkelblau ist. Lassen Sie mich das zunächst auswählen. Gehen Sie stilvoll rein. Kopiere das aus dem Abschnitt. Wählen Sie die Schaltfläche aus. Beim Schweben. Es muss schwarz sein und der Text muss weiß sein. Oder wir können es so gelb machen. Also lass mich einfach so gelb sein. Gehen wir wieder rein und ändern diese Farben. Unter dem Eintrag in der Symbolliste. Gehen wir zur Symbolfarbe. Lass es uns so gelb machen. Und beim Schweben. Lass es uns so dunkelblau machen. Einfach so. Aktualisiere. Lassen Sie uns die Änderungen überprüfen. Scrollen Sie also nach unten. Da haben wir's. Jetzt müssen wir also die Polsterung an der Innenseite dieses Doppelsäulenabschnitts erhöhen. Also gehe ich wieder rein wähle den doppelspaltigen Abschnitt, erweiterte Polsterung. Und weil das verlinkt ist, können wir vielleicht 30 geben. Und dann geh in den Style-Brand. Lass es uns versuchen. Ich muss ihm diesen abgerundeten Eckeffekt verleihen. Lassen Sie uns auch den Bildstil, den Randradius, auswählen. Lassen Sie uns die Größe so reduzieren , dass sie ausgewogen ist. Aktualisiere. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Da haben wir's. Jetzt habe ich gerade gemerkt, dass wir diesen von links hineingeschoben haben. Das hätten wir nicht tun sollen. Also lass uns wieder hier rein gehen. Wählen Sie dies aus und lassen Sie dann Null stehen. Aktualisiere das. Überprüfen Sie die Änderungen. Scrollen Sie nach unten. Jetzt ist es also richtig auf den Text im reinen Abschnitt ausgerichtet . Natürlich sollten Sie sich Zeit nehmen , um zu verfeinern, was wir bisher geschaffen haben. Dies ist nur eine Anleitung, aber ich würde erwarten, dass Sie sich Zeit nehmen, um sicherzustellen , dass alles großartig aussieht, sobald Sie die Fähigkeiten erworben haben. Also im Grunde ist es so , wie man diesen Abschnitt erstellt. Sehen wir uns in der nächsten Lektion an, wie Sie diesen anderen Teil erstellen. Während wir Fortschritte machen. Wir sehen uns in Kürze. 19. 19 Erstelle den Abschnitt Skilled Technicians: Willkommen zurück. Lassen Sie uns nun mit der Erstellung des Bereichs für qualifizierte Techniker fortfahren . Das ist es also, was wir erschaffen. , ohne Zeit zu verschwenden Lassen Sie uns hier einsteigen, ohne Zeit zu verschwenden. Lassen Sie uns also weitermachen und einen Abschnitt mit einer einzelnen Spalte hinzufügen. So. Lass uns weitermachen und diese Überschrift duplizieren. Ich ziehe es da rein. Und bevor wir weitermachen, wählen wir zunächst diesen Abschnitt für Fortgeschrittene aus. Gehen wir zum Rand und vergrößern den Abstand zwischen diesem Abschnitt und dem vorherigen Abschnitt. Also Margin Top 50, sagen wir 100, einfach so. Jetzt wollen wir als Nächstes diesen Text hinzufügen , der sich darunter befindet. Lass uns das duplizieren. Fügen wir das da rein. Und jetzt beachte, dass dieser Text hier kompakter ist. Rechts und links hat es ausreichend Platz. Also lass uns hier rein gehen. Solange dies noch ausgewählt ist, möchte ich in den linken Rand gehen. Lass es uns auf vielleicht 200 belassen. Und auf der rechten Seite 200. Und lassen Sie uns natürlich zum Stil gehen, ihn so zentralisieren. Ordnung, also das nächste, was wir tun wollen, ist das auszuwählen. Rechtsklicken Sie dann auf Kopieren. Wählen Sie diesen Stil zum Einfügen mit der rechten Maustaste aus. Auf diese Weise können Sie die auf einen anderen Text angewendeten Stile kopieren und einfügen . Aber jetzt ist das natürlich linksbündig. Deshalb wurden sie nach links gedrängt. Wir müssen es auswählen und sicherstellen, dass es zur Mitte ausgerichtet ist. Ordnung, also jetzt, da dies ein einspaltiger Abschnitt ist, können wir hier reingehen und eine, eine Kreuzung, direkt unter den Text ziehen . Jetzt hat es zwei Spalten , weil wir diese drei Spalten erstellen wollen. Und in jeder Spalte werden wir eine Bildbox haben. Dies ist eine Bildbox. Also klicke ich darauf, gehe wieder hier rein. Plus, und ich gebe Bildfeld ein. Das, was wir wollen, ist dieses von Elements Kit. Also lass es uns da rein ziehen und ablegen. Und lassen Sie uns natürlich ein Bild auswählen. Ich hatte diese Bilder bereits hochgeladen. Sie können also weitermachen und das tun, um zu vermeiden , dass zum Computer zurückkehren, um sie hochzuladen Ich wähle hier einfach eines der Bilder aus. Legen Sie Medien ein. Und los geht's. Das nächste, was wir tun werden, ist, in den Stil zu gehen , um hier mit dem Styling der Farben zu beginnen. Körper. Ich finde die Farbe der Bodytags okay. Aber für den Titel ändern wir die Farbe auf Gelb. Gelb, und beim Schweben können wir ihm diese dunkle Farbe geben. Jep. In Ordnung, für den Button machen wir ihn in dieser dunklen Farbe. Hintergrund. Diese dunkle Farbe. Und wenn Sie den Mauszeiger bewegen, ändern wir es auf Schwarz, Gelb. Einfach so. In Ordnung, wir können also auch die Größe der Überschrift erhöhen. Also zusammengebrochen, dass der Titel der Topographie, Typografie, erweitert wurde. Vielleicht irgendwo da. Lass uns das aktualisieren. Es geht auch so zum Bildrandradius von 20. Und jetzt, wo wir mit dem Aussehen zufrieden sind, müssen wir diese Spalte zweimal duplizieren. Also vorbei, über diese Spalten 12. Und dann lass uns den letzten loswerden. Also los geht's. Und wir brauchen einen gewissen Abstand zwischen diesen Texten und dem inneren Abschnitt. Wählen wir also den Schnittpunkt mit dem erweiterten Rand oben aus. Einfach so. Aktualisiere das. Bevor wir weitermachen, lassen Sie uns den Text hier ändern. also diesen Inhaltskörper auswählen, können wir ihn auf Dachreparaturen umstellen. Ändere diese beiden. Gartenreparatur. Und lassen Sie uns auch das Bild ändern. Also wähle das aus. Ich wähle hier einfach ein zufälliges Bild aus. Legen Sie Medien ein. Gehen wir rein, machen wir das Bild vielleicht , um Medien einzufügen. Und lass uns die Überschrift ändern. Austausch des Daches. Und lassen Sie uns das aktualisieren. Wenn das erledigt ist, lassen Sie uns eine Vorschau der Änderungen anzeigen. Also nach unten scrollen. Da haben wir's. So erstellt man diesen Abschnitt. in der nächsten Lektion an, Sehen wir uns in der nächsten Lektion an, wie Sie diese Vor- und Nachher-Effekte erstellen. Also werde ich dich bald sehen. 20. 20 Erstellen Sie den Körperabschnitt vor und nach: Willkommen zurück. Es ist jetzt an der Zeit, diese Vorher-Nachher-Abschnitte zu erstellen, was ich sehr cool finde. Es gibt dem Benutzer eine Vorschau auf das Vorher und Nachher eines Projekts. Also vorher, dann, danach. Ohne Zeit zu verschwenden. Gehen wir zurück zu unserem Editor. Und wie immer, lassen Sie uns weitermachen und einen doppelspaltigen Abschnitt hinzufügen, denn wie Sie sehen können, haben wir diesen Textblock und dann das Vorher-Nachher-Bild. Also gehe ich wieder rein. Fügen Sie einen doppelspaltigen Abschnitt hinzu. Solange es noch ausgewählt ist. Gehen Sie in diesem Abschnitt zu Erweitert. Geben wir ein Nein, noch einmal tausend, 100 Top-Marge. Sie können ihm jeden Spielraum geben, mit dem Sie sich wohl fühlen. Dann ziehe ich das her. Und das ist natürlich der Textbereich. So bieten wir dauerhafte Lösungen. Verstanden, geh wieder hier rein. Lass mich das duplizieren. Und dann zieh das genau dort hin. Und wie Sie sehen können, ist es mittig ausgerichtet, ich möchte, dass es linksbündig ist. Geh wieder hier rein, dupliziere das, ziehe es und lege es dort ab. Und es hat immer noch die Polsterung, die wir für links und rechts eingestellt haben. Also solange es noch ausgewählt ist, gehe ich zu Erweitert und entferne dann diesen Abstand, diesen Rand so. Gehen Sie stilvoll nach innen, linksbündig. Um das Vorher-Nachher-Bild hinzuzufügen, klicke ich darauf. Und hier tippe ich vorher und nachher oder davor. Dies ist von Pi Ordinate Add-Ons für Elementor. Also ziehe ich das einfach da rein. Da haben wir's. Fügen wir also das erste Bild hinzu. Wo ist es? Dort? Wir haben es. Im Nachher-Bild. Da haben wir's. Lassen Sie uns das jetzt aktualisieren. Und lassen Sie uns zuerst eine Vorschau der Änderungen anzeigen. Scrollen Sie also nach unten. Wie Sie sehen können, sieht es ein bisschen anders aus als das, was wir hier haben, denn hier ist es nur der Moment, in dem Ihr Mauszeiger auf dem Bild befindet. Er beginnt automatisch, diese Einstellung zu verschieben. Das ist also eine der Einstellungen, die hier wieder aufgenommen werden. Lassen Sie uns eine Vorschau davon anzeigen. Wir müssen das zuerst auswählen und es dann verschieben. Aber es bewegt sich nicht, wenn wir den Mauszeiger bewegen , wie es hier der Fall ist. Also, um das zu ändern, geh wieder hier rein. Nun, das ist immer noch ausgewählt. Optionen. Bewegen Sie den Schieberegler beim Mauszeiger. Wenn wir das auswählen, passiert das in dem Moment, in dem sich die Maus über dem Bild befindet. Und ich mag es so. Also lass uns das aktualisieren. Und wir können das Bild nach Belieben etwas kleiner oder größer machen. Aber gleichzeitig möchte ich diese Textblöcke nur aus Gründen der Einheitlichkeit nach unten verschieben . Lassen Sie mich die Polsterung auswählen. Polsterung an der Oberseite Ich möchte, dass es sich vertikal in der Bildmitte befindet. So wie das. Lassen Sie uns das aktualisieren. Sehen wir uns eine Vorschau der Änderungen an. Scrollen Sie also nach unten. Da haben wir's. Das ist also unser Vorher-Nachher-Bild, was ich cool finde. Nun, das war's für diese Lektion. in der nächsten Lektion an, Sehen wir uns in der nächsten Lektion an, wie man etwas erstellt. Nun, das ist sehr einfach zu erstellen, aber lassen Sie uns das in der nächsten Lektion erstellen. Also werde ich dich bald sehen. 21. 21 Erstelle den Körperabschnitt Erfahrene Dachdecker: Hey, willkommen zurück. Jetzt ist es an der Zeit, diesen sehr einfachen Abschnitt zu erstellen. Wir sind eigentlich fast am Ende der Seite. Und wie Sie vielleicht schon vermutet haben, handelt es sich um einen doppelspaltigen Abschnitt. also wieder hier in unserem Editor reingehe, klicke ich einfach auf diesen plus doppelspaltigen Abschnitt. Wählen wir den Abschnitt Erweitert aus. Fügen wir oben einen Rand hinzu. Es ist immer gut, einen einheitlichen Rand oben in jedem Abschnitt beizubehalten . Also gebe ich 100. Da haben wir's. Natürlich ist das ein Bild. Ich möchte klicken und das Bild dort ablegen. Und weil es vertikal ist , habe ich es ein bisschen schmal gemacht. Klicken Sie darauf. Lass uns nach diesem Bild suchen. Wo ist es? Ja, das ist es. Legen Sie Medien ein. Und geben wir ihm ein paar abgerundete Ecken. Also, solange es noch ausgewählt ist, lassen Sie uns einen Blick in den Stil werfen. Randradius 20, einfach so. Und jetzt lassen Sie uns diesen vergrabenen Text natürlich duplizieren und dort einfügen. Und wir haben vergessen, diesen Text zu ändern. Lassen Sie mich das einfach auf qualifizierte Techniker umstellen. Lass mich zurückgehen und das kopieren. Dauerhafte Lösungen. Wählen Sie das aus , fügen Sie es dort ein. Und jetzt dazu, kopiere das und füge es dort ein. Lass uns diesen Text duplizieren. 40 direkt unter der Überschrift. Und ich möchte diese Richtung nach unten drücken, oder? Lassen Sie uns die Höhe des Bildes erhöhen. Drücken wir, wählen wir diese Spalte aus und drücken alles nach unten indem wir in die erweiterte Polsterung gehen, obere Polsterung. Sie können einfach die Zahlen eingeben. Also sagen wir 110. Und lassen Sie uns das aktualisieren. Lassen Sie uns also die Änderungen überprüfen. unten scrollen. Im Moment werden Sie feststellen, dass diese beiden zu nahe beieinander liegen. Also, wieder rein zu gehen und das ist einer der Gründe, weil wir die Polsterung entfernt haben , die standardmäßig hier war. Wir können aber auch den Abschnitt selbst auswählen. Und weil es aus zwei Spalten besteht, können wir den Abstand zwischen den beiden Spalten steuern. Während dies ausgewählt ist, wechseln Sie zu Abstand zwischen den Layoutspalten. Lassen Sie uns eine breitere wählen. Wenn wir nun eine Vorschau davon sehen, werden Sie feststellen, dass der Abstand viel größer ist Scrollen wir also nach außen. Und los geht's. So erstellt man diesen Abschnitt. Oh warte, wir haben diesen Button nicht hinzugefügt. Also lassen Sie uns diesen Button duplizieren. Und ziehen wir es ganz in den Abschnitt. Lass es da fallen. Das bedeutet nun, dass wir diese Polsterung reduzieren müssen . Wählen Sie also die Spalte aus und reduzieren Sie sie, bis sie ausgeglichen ist. es dir einfach an. Aktualisiere dort. Ich denke, ich muss es noch etwas reduzieren. Ich mag es an diesem Punkt. In Ordnung, lassen Sie uns eine Vorschau der Änderungen anzeigen. unten scrollen. Und da haben wir es. So erstellt man diesen Abschnitt. in der nächsten Lektion noch einmal sehen, Lassen Sie uns in der nächsten Lektion noch einmal sehen, wie Sie den Abschnitt mit Testimonials erstellen. Wir sehen uns in Kürze. 22. 22 Erstellen Sie die Testimonials im Körperbereich: Und wir sind zurück. Jetzt ist es an der Zeit, den Testimonial-Bereich zu erstellen. Wie Sie sehen können, sieht es fast genauso aus wie der weiße Abschnitt. Lassen Sie uns also weitermachen und diesen Abschnitt duplizieren. Ich gehe wieder hier rein. Duplizieren Sie dies, und aus diesem Grund ist die Verwendung von Elementor so cool. Also haben wir es im Grunde dupliziert. Also ziehe ich das ganz nach unten und lasse es fallen, sobald diese blaue Linie erscheint. Und geben wir ihm auch einen gewissen Spielraum oben bei ja, 100. Diese haben einen gewissen Spielraum. Aber lassen wir uns nicht täuschen. Lass mich sehen. Lass es uns hier etwas aufpolstern. Direkt unter der Marge für Formularanleihen. Geben wir ihm eine 80. In Ordnung, also jetzt zurück zum Ende. Lassen Sie uns auswählen, was unsere Kunden sagen. Geh hier rein, wähle das aus, füge es dort ein. Sei der Ford, der da drin ist. Aber wir müssen rechts und links etwas Spielraum hinzufügen. Also solange es noch ausgewählt ist, erweiterter Rand links, zwei drauf. Zu rennen. Aktualisiere das. Gehen wir wieder rein. Das sind jetzt die Zeugnisse. Also, wenn wir wieder hier reingehen, müssen wir diese Kreuzung loswerden. Wählen Sie das nun aus und geben Sie Testimonial ein. Testimonial, wir haben das Standard-Testimonial , das in Elementor, der kostenlosen Version, enthalten ist. Und wir haben Elements Kids. Die, die wir wollen, ist die von Elements Kid. Ziehen Sie es per Drag & Drop, wenn Sie diese blaue Linie sehen. Und standardmäßig haben wir hier diese verschiedenen Optionen. Ich benutze diesen hier gerne, aber du kannst mit dem Rest experimentieren. Im Moment zeigen wir also nur ein Testimonial. Wir können in die Einstellungen gehen. Sehen wir uns die Folien zur Veranschaulichung an. Wir können natürlich sagen, zwei Folien zum Scrollen , das ist wie viele, um wie viele Folien sollte es scrollen. Lassen Sie uns nun weitermachen und am Erscheinungsbild arbeiten. Gehen Sie zurück in das Layout. Gehen wir jetzt zum Testimonial. Hier haben wir eine Liste der drei Testimonials. Testimonials Nummer eins, hier soll der Name des Kunden kommen. In Ordnung, Benennung, Marketingleiter. Bei welcher Firma? Jetzt brauchen wir also einige Texte zur Überprüfung. Lass mich einfach schnappen, ich kann den Text nicht nehmen. Lass mich einfach diesen Text schnappen. Im Grunde haben wir keine Zeit, um zu versuchen, ein aktuelles Testimonial einzugeben. In Ordnung, also das hat Alex Brandon gesagt. Lass uns weitermachen und mit den Farben herumspielen. Stil. Wenn wir das Layout zusammengebrochen haben. Wie Sie sehen können, haben wir den Wrapper-Inhaltsstil, wir haben die Beschreibung, Bewertung, das abgerufene Symbol und die Clients. Fangen wir also mit einem Kunden an. Farbe des Kundennamens. Lass es uns so gelb lassen. Füge das da rein und jetzt ist es gelb. Beim Schweben können wir es so weiß machen. Wir können auch mit der Topographie oder Größe des Namens herumspielen . Also kehre ich einfach zur Standardeinstellung zurück. In Ordnung, dann Benennung des Kunden. Lass uns ihm eine weiße Farbe geben. den Mauszeiger bewegen, können wir ihm die gelbe Farbe geben, die so hell ist. Es ist wie eine Umkehrung. Also los geht's. Kundenbild, Sie können mit einem Client-Image herumspielen. Ich mag es einfach mit den Standardeinstellungen für das Bild. Gehen wir zur Beschreibung. Die Farbe ist, offensichtlich, okay. Sie können es jedoch in jede gewünschte Farbe ändern. Also lasse ich es einfach schwarz. Dann haben wir auch dieses Zitat hier oben. Wir können die Farbe in jede gewünschte Farbe ändern. Ich mag es einfach als schwache farbige Anführungszeichen. Und da haben wir es. Also zurück zum Inhalt, Testimonial, Brandon, lassen Sie uns das erweitern. Wir können den Kunden-Avatar ändern. Und ich hatte einige Bilder für das Testimonial zur Verfügung gestellt . Los geht's. Das ist Brandon. Ich werde zusammenbrechen. Alex, erweitere das. Lisa lächelt. Neue Kunstmedien. Und vielleicht lassen Sie uns, lassen Sie uns ein paar andere Texte finden, um dort P bereitzustellen , ich sie so formulieren kann, dass sie das gesagt hat. Genau da. Lisa Smiley. Oh, warte, lass uns ihren Avatar hinzufügen. Das ist Lisa. Nein, das ist Lisa. Lächeln. Und lassen Sie uns Lisa zusammenbrechen und eine dritte Person hinzufügen, Nord VPN. Dann lassen Sie uns hier ihr Zeugnis geben. Los geht's, und ihr Avatar. So können wir auch die Bewertung ermitteln , die sie der Website gegeben haben. Also vielleicht hat uns dieser Typ eine Bewertung von vier von fünf gegeben . Aktualisiere das. Wie Sie sehen können, sind dies vier von fünf. Gehen wir also zurück in den Stil. Innenlayout. Wir wollen dem eine abgerundete Ecke geben. Also 20, einfach so. Aktualisieren Sie das. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten bis ganz nach unten. Und das haben wir. So erstellen Sie also den Testimonial-Bereich. Wenn wir diese Seite abgeschlossen haben, lassen Sie uns fortfahren und diesen Bereich für die Notfall-Hotline erstellen diesen Bereich für die Notfall-Hotline bevor wir den Ordner erstellen. Also, wir sehen uns in der nächsten Lektion. 23. 23 Erstelle die Notfallnummer des Körperabschnitts: Hey, willkommen zurück. Jetzt ist es an der Zeit, den Hotline-Bereich direkt hier unter den Testimonials zu erstellen . Also hier sind wir. Ich gehe wieder hier rein. Lassen Sie uns einfach so einen Abschnitt erstellen , einen einspaltigen Abschnitt. Und jetzt haben wir eine Spalte in diesem Abschnitt. Lassen Sie uns also die Farbe der Spalte selbst in Gelb ändern. Also wähle ich den Spaltenstil. Lass mich einfach gehen und mir dieses Gelb holen. Solange dies noch ausgewählt ist, gehe ich zu Stil, Hintergrund, Farbe wie diesen. Lassen Sie uns diesen Text nun duplizieren. Ich möchte das duplizieren, weil ich die Farbe dort nicht ändern muss . Also lass uns das kopieren. Wählen Sie das aus. Hier. Lassen Sie uns das mittig ausgerichtete bearbeiten. Dann können wir das duplizieren. Solange dies noch ausgewählt ist. Lass uns zum Stil gehen. Ändere die Farbe in Weiß. Typografie, verkleinern Sie die Schrift. Und lassen Sie uns die Spalte auswählen und dann fortfahren. Gehen wir zum Rand. Und noch ein Rand übrig, vielleicht etwa 100. Margenrecht. Hundert. Gehen wir zu Style Border Radius. Lass uns an der Polsterung arbeiten. gepolstertes Oberteil Drücken wir einfach, während wir es uns ansehen. Vielleicht 35, die unteren 35 auch. Ich denke, das ist okay. Also lass uns diesen Text hier kopieren. Fügen Sie das ein, während dies ausgewählt ist. Und jetzt ist es an der Zeit, diesen gelben Teil nach oben zu schieben. Wählen Sie also die Spalte selbst aus, obere Rand muss bis irgendwo dort negativ sein. Aktualisiere das. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie also nach unten bis ganz nach unten. Und da haben wir es. So erstellt man diesen Abschnitt. in der nächsten Lektion Lassen Sie uns in der nächsten Lektion an diesem Ordner arbeiten. Also werde ich dich bald sehen. 24. 24 Erstellen Sie den Footer Abschnitt: Willkommen zurück. Jetzt, wo wir mit dem Körperteil fertig sind, ist es an der Zeit, am Fußzeilenbereich zu arbeiten. Und genau wie wir es mit dem Header-Bereich gemacht haben, werden wir den Ordner separat erstellen, nicht genau hier, wo wir den Bodybereich bearbeiten. Es ist also Zeit, diesen Teil zu verlassen. Also klicke ich auf dieses Burger-Menü. Dann wird exit zum Backend weitergeleitet. Und von hier aus können wir zum Headerordner für Kinder von Elements gehen. Und jetzt können wir „Neu hinzufügen“ sagen. Denken Sie daran, dass wir zuerst den Header erstellt haben. Jetzt ist es Zeit, das Foto zu erstellen. Geben wir ihm einen Namen. Und natürlich ist der Typ jetzt der Ordner, den wir brauchen. Wir haben es auf der gesamten Website sichtbar gemacht. Und es muss aktiv sein. Wenn Sie mehrere Ordner oder Header haben, können Sie einige aktivieren, was bedeutet, dass sie auf der Website nicht sichtbar sind. In Ordnung, also lass uns weitermachen und die Änderungen speichern . Und los geht's. Also lass uns bearbeiten. Und dann klicken Sie auf „Inhalt bearbeiten“ , um zum Frontend weitergeleitet zu werden. Und von dort aus können wir es genauso erstellen , wie wir den Header erstellen. Also hier sind wir. Wie Sie auf unserer Referenzwebsite sehen können, hat sie drei Spalten. Lassen Sie uns also weitermachen und einen dreispaltigen Abschnitt hinzufügen . Da haben wir's. Denken Sie daran, dass Sie die Größe dieser Spalten jederzeit ändern können. Sie sind nicht starr. Lassen Sie uns damit beginnen, hier ein Bild hinzuzufügen , damit wir ein Logo hinzufügen können. Wählen Sie das aus, wählen Sie das Logo aus, fügen Sie ein Bild ein. Als Nächstes müssen wir diesen Text hinzufügen , eine kurze Beschreibung. Also, jetzt hier reinzugehen, das Gute an Elementor ist, dass ich diese Seite z. B. direkt hier auf der Bearbeitungsseite bearbeite, oder sagen wir, ich bin im Editor. Ich kann ein Element mit seinem Inhalt aus einem Bereich kopieren. Klicken Sie auf eine beliebige Stelle in dieser Textkopie. Gehen Sie auf derselben Website zu einer anderen Seite oder einem Bereich, den Sie Elementor selbst verwenden. Klicken Sie und fügen Sie dann ein. So einfach heißt es. Ich wollte dir das nur zeigen, aber lass mich das löschen. Lassen Sie uns einen Texteditor hinzufügen. Das nächste, was wir tun müssen, ist etwas zu erschaffen. Lassen Sie uns diese Quicklinks erstellen. Also klicke ich darauf, füge eine Textüberschrift hinzu. Und dann lass uns gleich hierher gehen und uns diese Farbe schnappen. Kopieren. Während dies ausgewählt ist, Stil. Ändere die Farbe. Und dann Quicklinks. Dann klicken wir darauf. Seitenliste hinzufügen. Seitenliste, ziehen Sie sie unter die Überschrift Quick Links. Jetzt können wir einen Artikel hinzufügen. Im Grunde fügen wir hier Seiten als Listenelemente hinzu. Erweitern Sie das also für den ersten Artikel. Nennen wir es unser Zuhause. Zuhause. Wählen Sie nun in diesem Drop-down-Menü die Startseite aus. Ich habe den Artikel vorgeladen. Du kannst es ungefähr nennen. Im Grunde können Sie hier also jede Seite als Menüpunkt hinzufügen . Wählen Sie also das aus, wählen Sie die About-Seite aus. Lassen Sie uns einen weiteren Kontakt hinzufügen, Kontaktseite. Und so sieht es aus. wir also Wenn wir also die Liste selbst zusammenklappen, wie Sie sehen können, haben wir Symbole. Ich brauche keine Icons. Wir haben den Text, damit wir den Text bearbeiten können. Farbe des Textes. Geben wir ihm das Dunkelblau. Und zur Armut, zum Schweben, geben wir ihm das Gelb. Einfach so. Und der Abstand hier ist ziemlich klein. Lassen Sie mich einfach den Abschnitt selbst auswählen. Abstand zwischen den Spalten. Ich möchte, dass es breiter ist. Einfach so. Ich möchte das erhöhen, weil es hier zu viel Platz gibt, den wir nicht nutzen. Aktualisiere das. Lassen Sie uns zuerst eine Vorschau der Änderungen anzeigen. Ordnung, jetzt werden Sie feststellen, dass dieses Bild auf dem Logo viel Polsterung aufweist. Gehen Sie also wieder hier rein, wählen Sie das Logo aus, entfernen Sie den Rand und reduzieren Sie den linken Rand bis zu diesem Punkt, sodass er am Text ausgerichtet ist. Lassen Sie uns das aktualisieren. Perfekt. Jetzt möchten Sie vielleicht zwei Spalten mit Links haben. Falls Sie viele Links haben, die Sie teilen möchten. Also kannst du hier reingehen und eine Kreuzung wählen . Wirf es da rein. Und weil es zwei Spalten hat, wählen Sie dieses Element aus und legen Sie es dort ab. Und das kannst du duplizieren. Die letzte wurde entfernt. Und jetzt können Sie hier mehr Seitenlinks haben. Wenn Sie also z. B. eine Copyright-Seite haben, wenn Sie eine Seite mit den Allgemeinen Geschäftsbedingungen haben, können Sie sie in dieser Spalte haben. Also ist das jetzt natürlich ausgewählt. Wir können diese beiden Allgemeinen Geschäftsbedingungen bearbeiten. Lizenzierung, vielleicht Datenschutzrichtlinie. Und Sie können die Größe entsprechend ändern. Und jetzt hast du zwei Spalten. Also lass uns das aktualisieren. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Und da haben wir es. Als Nächstes müssen wir dieses Anmeldeformular erstellen. Lass mich das einfach kopieren. Duplizieren Sie das, ziehen Sie es per Drag & Drop hinein. Wählen Sie das aus , fügen Sie es dort ein. Gehen Sie zu Style-Typografie und ändern Sie die Größe entsprechend. Geh hier rein, wähle diesen Text aus. Dupliziere das. Zieh das da rein. Also kann ich das ziehen. Und dann müssen wir natürlich endlich dieses Formular hinzufügen. Und wie Sie vielleicht schon vermutet haben, handelt es sich um ein Formularformular. Also gehen wir zum Backend, um es zu erstellen. Lassen Sie mich das zunächst sagen. eine Vorschau der Änderungen an. Da haben wir's. Gehen wir also in unser Dashboard. Hier sind wir später noch bei der Formel. Klicken wir auf Formulare. Und jetzt kannst du zu Create gehen. Ich verwende einfach dieses vorgefertigte Newsletter-Anmeldeformular. Weiter. Anmeldeformular, Erstellen. Und los geht's. Es braucht also Vorname und E-Mail. Schauen wir uns das mal an. Und natürlich hat es Standardfarben und -einstellungen. Schließ das. Gehen wir zu Aussehen, Kühnheit, Kostüm. Gehen wir zum Absenden-Button. Natürlich brauchen wir es. gelb Kopiere das, füge es dort ein, während du den Mauszeiger bewegst. Wir wollen, dass es diese Farbe hat. Es ist immer gut, ein einheitliches Set an Markenfarben zu haben . Sehen Sie sich das an. Da haben wir's. Lass uns jetzt auf dem Feld arbeiten. Eingabe. Die Randfarbe. Ich möchte, dass es so ist, es war Triple CE, CE, ECE, so. Beim Schweben. Wir können es in diese gelbe Farbe bringen. Im Fokus. Es kann auch diese gelbe Farbe sein. Veröffentlichen. Lass uns diesen Kurzcode kopieren. Gehen Sie hier zurück zu unserer Seite, unser Redakteur. Hier ist der Herausgeber. Lassen Sie uns ein Kurzcode-Element hinzufügen. Los geht's. Ziehen Sie es dort hin und legen Sie es dort ab. Los geht's. Also füge ich diesen Kurzcode hier ein. Und los geht's. Dieser Rand ist also etwas zu groß, also wähle ich den Text mit erweitertem Rand, unten. Reduziere es ein bisschen. Und lassen Sie uns auch einige Social-Media-Symbole hinzufügen. Symbole für soziale Medien. Lass uns sie da reinwerfen. Und das bringt dieses Gleichgewicht hierher, um diesen Bereich zu vertuschen Schieben wir diese Social-Media-Symbole nach links, genau wie dieses Update. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Also los geht's. Wir können daraus einen Link zur Homepage machen. Also lass uns das schnell machen. Wählen Sie dieses Bild wie gewohnt aus, gehen Sie zu Inhalt, Link, benutzerdefinierte URL. Lassen Sie mich einfach die Home-URL wählen. Einfach so. Aktualisiere. Vorschau. Wenn ich jetzt darauf klicke, werden wir zur Homepage weitergeleitet. Und wenn wir ganz nach unten scrollen, schauen wir mal, ob wir den Ordner haben. Da haben wir's. Aber jetzt brauchen wir einen gewissen Abstand zwischen diesen beiden. Lassen Sie mich also auf Mit Elementor bearbeiten klicken , damit wir die Seite selbst, den Textbereich, bearbeiten und ganz nach unten scrollen können. Alles was wir tun müssen, ist diesen Abschnitt auszuwählen , in dem sich der Notfall befindet. Gehen Sie zum unteren Rand von Advanced. Geben wir 100. Das habe ich bezahlt. Vorschau. Die Änderungen. Scrollen Sie ganz nach unten. Und los geht's. Wir haben hier also ein paar schöne Abstände. Sie können es erhöhen oder reduzieren, wenn Sie möchten. Also jetzt damit, so erstellt man die Landingpage oder die Homepage. In der nächsten Lektion sehen wir uns an, wie Sie den Rest der Website erstellen. Also werden wir in Kürze weitermachen. 25. 25 Baue die Über uns Seite den Hero an: Wir sind zurück. Jetzt, da wir mit der Homepage fertig sind, ist es an der Zeit, zur Seite Über uns oder zur About-Seite überzugehen . Und ich bin genau hier in meinem Dashboard. Aber bevor wir mit dem Aufbau beginnen, schauen wir uns die Referenz-Website an. Oder richtig, also nach unten scrollen. Da haben wir's. Das ist es also, was wir bauen, ohne Zeit zu verschwenden. Gehen wir zurück zu unserem Dashboard. Lass uns in die Seiten gehen. Denken Sie daran, dass wir die Seiten bereits erstellt haben. Das Einzige, was wir jetzt tun müssen, ist nach Eddie zu suchen. Und hier sind wir. Lassen Sie uns weitermachen und die Seite so einrichten wie wir es mit der Homepage für die Vorlage getan haben Wählen wir volle Breite, Elementor, volle Breite. Gehen wir in die Astro-Einstellungen. Wählen Sie die volle Breite, gestreckte Seitenleiste, keine Seitenleiste. Dann deaktivieren wir die Kopf- und Fußzeile. Aktualisiere das. Und jetzt ist es aktualisiert. Klicken wir auf Mit Elementor bearbeiten, damit wir zum Frontend gehen und mit der visuellen Erstellung beginnen können. Und hier sind wir. Denken Sie natürlich daran, dass wir dieses Foto oder den Header von hier aus nicht bearbeiten können , da wir es nicht hier erstellt haben. Aber sie sind sichtbar , weil wir sie bereits erstellt haben und sie auf allen Seiten sichtbar sind. Also jetzt das Erste, was wir brauchen, um diese Heldenabteilung zu erstellen. Wenn wir also wieder hier reingehen, ist es ein einspaltiger Abschnitt. Da haben wir's. Und wir müssen zuerst das Hintergrundbild hinzufügen. Wählen Sie also aus, solange dieser Abschnitt noch ausgewählt ist, lassen Sie uns in den Hintergrund des Stils gehen. Wählen wir ein Bild aus. Ich denke, das ist das Bild, füge Medien ein. Und lassen Sie uns diese Textblöcke natürlich einfügen. Was wir also tun wollen, ist hier auf dieses Symbol zu klicken und dann einen Textblock dorthin zu ziehen. Geh zurück hierher, ziehe etwas Text dorthin. Und dann müssen wir die Polsterung oben und unten in diesem Abschnitt erhöhen . Also können wir diesen Raum hier oben und hier unten haben. Also lass uns wieder hier rein gehen. Wählen Sie einen Abschnitt aus, erweiterte Polsterung oben. Lass uns 100 versuchen, so etwas. Solange es noch ausgewählt ist. Gehen Sie hinein in Stil, Position, Mitte, Mitte. Ich glaube, das gefällt mir. Wir wollen nicht, dass es sich überall wiederholt. Und für die Größe wählen Sie wie gewohnt das Cover, das bedeutet, dass es vom Bildschirmrand zum anderen Bildschirmrand verläuft. Auf den Seiten wird es keine Leerzeichen geben, wie wir es bei der Homepage getan haben . Also los geht's. Lassen Sie mich das noch einmal kopieren. Und jetzt ist es an der Zeit , es hier einzufügen. Lass es uns in die Mitte legen. Denken Sie daran, dass Sie Ihre eigenen Texte verwenden müssen, weil ich mir nur einen Platzhaltertext ausgedacht habe. Schieb es in die Mitte. Einfach so. Wenn wir diesen Abschnitt erneut auswählen, fügen wir eine Hintergrund-Overlay, einen Hintergrund hinzu, und dann haben wir eine Hintergrund-Overlay. Und wir können eine schwarze Farbe verwenden. Also lass uns Schwarz wählen. Dadurch wird sichergestellt, dass der Text über dem Bild besser zur Geltung kommt. Wie Sie gerade sehen können, sticht es hervor. Lassen Sie uns den Text auswählen. Gehen Sie in den Stil hinein und geben wir ihm dann einen Farbverlauf. Ich gehe zurück und wähle diese gelbe Farbe. Kopiere das für die untere Farbe. Und dann muss es für die obere Farbe natürlich eine weißliche Farbe sein. Solange wir noch hier sind. Verläufe reduzieren, Titel erweitern. Schauen wir uns die Typografie an, um ein bisschen mehr über uns zu erfahren. Wählen wir dies aus, um es in Weiß zu ändern. Aktualisiere das. Sehen wir uns eine Vorschau der Änderungen an. Da haben wir es. Die Heldensektion ist also in der nächsten Lektion fertig. Sehen wir uns an, wie wir unsere Geschichte erstellen können, diesen Abschnitt finden Sie hier. Also werde ich dich bald sehen. 26. 26 Baue die Über uns Seite Unsere Geschichte: Hallo zusammen. Willkommen zurück. Lassen Sie uns weiter auf der Seite Über uns arbeiten. Als Nächstes wollen wir diesen Teil hier erstellen , unsere Geschichte. Und es hat diese beiden dunklen Hintergründe auf diesen beiden Säulen, Mission und Vision. Gehen wir also wieder rein und wählen wir einen doppelspaltigen Abschnitt aus, denn wie Sie sehen können, handelt es sich um eine Doppelspalte, eine Textblockspalte und die Bildspalte. Und diese Textblockspalte hat eine Schnittmenge mit einer Doppelspalte. Gehen wir also wieder rein fügen wir zunächst ein Bild hinzu. Klicken Sie auf dieses Pluszeichen und ziehen Sie dann ein Bild hinein. Und lass es uns auswählen. Also ich denke, das war das Bild. Legen Sie Medien ein. Natürlich können wir das ziehen, um das Bild zu verkleinern und Platz für den Text zu schaffen. Dieses Symbol ist genau hier, um eine Überschrift per Drag & Drop zu ziehen. Ich habe vergessen, daraus einen H1 zu machen. Wählen Sie also Über uns. Mach es zu einem H1. Das ist ein H2. Das ist okay. Lass es uns in unsere Geschichte ändern. Ich gehe wieder hier rein. Während dies ausgewählt ist, fügen Sie es dort ein. Ordnung, lass mich das kopieren. Kopiere das. Klicken Sie auf dieses Symbol. Ziehen Sie den Texteditor an diesen Punkt. Doppelklicken Sie hier und fügen Sie den Text dort ein. Und Sie werden feststellen , dass der Text dem Bild sehr nahe kommt. Wählen wir also den Abschnitt aus. Und unter Spaltenabstand wählen wir breiter aus, um diesen Abstand zu erhöhen. Lassen Sie uns nun an der Farbe unserer Geschichte arbeiten. Sollte diese dunkle Farbe haben. Kopiere das, solange es noch ausgewählt ist, Stil. Füge die Farbe da rein. Klicken Sie hier auf eine beliebige Stelle, um diese Topographie zu entfernen. Erhöhen wir die Größe bis zu dieser Stelle. Gib ihm ein Gewicht von 900. Einfach so. Um nun die Doppelspalte hinzuzufügen, gehen wir hier wieder rein. Die Kreuzung hat diese beiden Spalten. Lass uns natürlich hier reingehen und uns unsere Vision schnappen. Kopiere das. Lass uns das duplizieren. Zieh es da rein. Lass es zu unserer Vision werden. Lassen Sie uns die Größe reduzieren. Vielleicht 35. Gehen Sie zum Inhalt der Website und stellen Sie ihn in den Mittelpunkt. Machen wir es zu einem H3. Weil das ein H2 ist. H3, wir folgen der Hierarchie in den Überschriften gemäß den HTML-Richtlinien. Als Nächstes wollen wir die Mission wählen. Duplizieren Sie das, ziehen Sie es unter unsere Vision. Doppelklicken Sie darauf und fügen Sie es dort ein. Stil wäre es in der Mitte. Ordnung, jetzt wollen wir diese Spalte auswählen, die diesen Textblock enthält. Gehen Sie stilvoll rein. Wir müssen ihm einen Hintergrund geben. Also Hintergrundfarbe. Also lass mich diese Farbe wählen, kopieren und dort einfügen. Jetzt brauchen wir diese gelbe Kopie , die die Überschrift auswählt. Stil. Füge das da rein. Stimmt das? Als Nächstes wollen wir es vereinfachen, solange die Spalte noch ausgewählt ist, klicken Sie mit der rechten Maustaste und kopieren Sie sie. Wählen Sie dann diese Spalte aus. Rechtsklick Stil einfügen. In Ordnung, jetzt ist der Stil eingefügt. Lass uns das duplizieren. Stell es da rein. Duplizieren Sie den Text. Zieh das da rein. Lassen Sie uns nun diesen Textkörper in Weiß ändern. Wählen Sie dies aus und ändern Sie es in Weiß. Als Nächstes wählen Sie natürlich diese Spalte aus. Grenze. Geben wir ihm einen Randradius von 20. Derselbe Fall gilt dafür. Wählen Sie das Randtraining im Spaltenstil aus. Jetzt müssen wir einen gewissen Abstand zwischen den beiden Spalten schaffen . Solange diese Spalte noch ausgewählt ist, gehen Sie in den erweiterten Rand. Entfernen Sie diesen Link, damit wir einzelne Zellen bearbeiten können. Und wir wollen den linken Rand erhöhen, diesen linken Rand auf etwa zehn. Dadurch wird dieser Rand von der linken Seite nach innen gedrückt. Wir wollen dasselbe für diese Kolumne tun. Gehen Sie also zum Rand, während es ausgewählt ist. Entferne das. Erhöhen Sie dann den rechten Rand auf bis zu zehn. Einfach so. Und jetzt beachte, dass wir hier oben etwas Polsterung brauchen . Also solange es noch ausgewählt ist, mach es kaputt. Und dann erhöhen wir die obere Marge an der Spitze. Die obere Polsterung, etwa 25 für die Seite. 2020. Und die Marge bei der Steuer schafft hier bereits Spielraum. Wie Sie sehen können, drückt diese blaue Box diesen Teil nach unten. Aber wir können den Text auswählen und unten zum erweiterten Rand gehen. Reduzieren Sie diese Marge. Und solange diese Spalte noch ausgewählt ist, erhöhen wir den unteren Abstand auf 25. So haben jetzt die Ober- und Unterseite eine gleichmäßige Polsterung. Und lassen Sie uns dasselbe für diese Spalte wiederholen. Also Polsterung, 25, 25 und Training. Und jetzt wählen wir diesen Text und reduzieren seinen unteren Rand. Einfach so. Aktualisieren. Es ändert sich, um Michelle zu erwähnen. Hey, dass wir vergessen haben, dieses Bild oder abgerundete Ecken zu bekommen. Wählen Sie also diesen Randradius des Bildstils. Einfach so. Dann können wir das ein wenig ziehen , um das Bild zu vergrößern. Aktualisiere das. Sehen wir uns eine Vorschau der Änderungen an. Ordnung, also da haben wir es. Aber jetzt beachte, dass dieser Text zu nah an der Helden-Sektion ist, sodass wir ihn etwas nach unten verschieben können. Wir können tatsächlich den gesamten Abschnitt nach unten verschieben. Gehen Sie also wieder rein und wählen Sie den Abschnitt aus. Fortgeschrittene Marge an der Spitze, vielleicht 50. Aktualisiere das. Vorschau der Änderungen anzeigen. Ja, also momentan gefällt mir, wo es ist. Und so erstellt man diesen Abschnitt. In der nächsten Lektion sehen wir uns an, wie wir das erstellen, was wir anbieten. Und wie Sie sehen können, haben wir diesen schönen Hover-Effekt. Sehen wir uns in Kürze an, wie Sie diesen Abschnitt erstellen können . Wir sehen uns bald. 27. 27 Baue die Seite über uns auf, was wir anbieten.: Was wir anbieten, lassen Sie uns weitermachen und diesen Teil erstellen. Also, zurück zu unserem Editor, werde ich eine einzelne Spalte hinzufügen. Ja, es ist ein einspaltiger Abschnitt wie dieser. Und dieser einspaltige Abschnitt hat eine Schnittmenge mit drei Spalten, wie Sie hier sehen können. Also fügen wir eine Kreuzung hinzu wie wir es mit diesem Abschnitt gemacht haben. Also, wenn wir wieder hier reingehen, lassen Sie uns das zunächst duplizieren. Ziehen Sie es hierher und legen Sie es dort ab. Es ist auch ein Duplikat. Und ziehen Sie es per Drag & Drop unter die Überschrift. Wie Sie sehen können, liegen diese beiden zu nahe beieinander. Also lass uns diesen unteren Abschnitt nach unten drücken. Wählen Sie den Abschnitt aus, stimmen Sie bestenfalls überein. Entferne diesen Link. Und natürlich geben wir ihm vielleicht 100. Einfach so. Lassen Sie uns dies nun in das unter Inhaltscenter ausgewählte Center verschieben. Und das unter Style Center Align. Gehen wir wieder rein. Ich möchte mir den von uns angebotenen Text schnappen. Wähle das Gesicht aus, das ich in ihrem Trollope gemacht habe ihrem Trollope , das diesen Inhalt ausgewählt hat. Füge es da rein. Und jetzt ist es an der Zeit, unseren dreispaltigen Abschnitt hinzuzufügen. Klicken Sie also auf das Symbol und fügen Sie eine Kreuzung ein. Im Moment hat es zwei Spalten. Keine Sorge, lassen Sie uns an nur einer Spalte arbeiten und diese zweimal duplizieren. Also hier reingehen. Was wir tatsächlich tun können, ist dies zu duplizieren und direkt unter diese Texte zu ziehen. Und wir können das bearbeiten, anstatt an dieser neuen Schnittstelle zu arbeiten . Also Zeit, die Farben umzukehren. Der Hintergrund muss gelb sein. Lassen Sie mich diesen Text auswählen. Wähle diese Farbe. Wählen Sie dann die Spalte selbst, den Stil und den Hintergrund aus. Gib mir die gelbe Farbe. Gehen Sie nun zu diesem Spaltenstil, dieser Farbe. Kopieren Sie das, wählen Sie diesen Textstil aus, Grundfarbe dort. Jetzt haben wir also alles rückgängig gemacht. Der Text ist schwarz, also in Ordnung, also los geht's. Das nächste, was wir tun müssen, ist dies zweimal zu duplizieren. Und ich möchte den letzten entfernen . Genau wie dieses Update. Aber denken Sie daran, dass wir diese Spalte, die sich links befand und einen rechten Rand hatte, dupliziert haben. Das heißt, alle haben rechte Ränder und wie Sie sehen können, berühren sie den Rand nicht. Wir brauchen den Rand dafür links, nicht rechts. Also wähle diesen aus und gehe hinein in Advanced. Dieser rechte Rand muss Null sein und dies muss beachtet werden. Es ist also Null. Und für die Linke zehn. Das gilt jetzt also für die Linke. Und jetzt für diesen, er hat bereits einen Rand auf der rechten Seite. Geben wir ihm auch einen Rand links von zehn. Jetzt ist es also ausgewogen. Lassen Sie uns einige dieser Texte auswählen. 25 Jahre im Dienste von Kunden. Lassen Sie uns das auswählen, wo zertifizierte Experten Inhalte veröffentlichen. Schließlich bieten wir Garantie an. In Ordnung, jetzt bleiben also nur noch die Hover-Effekte übrig. Wählen Sie also eine der Spalten aus, wie sie weiß sein soll. Jep. Denken Sie daran, dass der Text schwarz oder dunkelgrau sein sollte . Also kopiere ich diesen Textstil. Wählen Sie diesen Text aus. Stil einfügen. Wählen Sie diesen Text aus und dann mit der rechten Maustaste auf den Stil einfügen. Wenn Sie jetzt den Mauszeiger bewegen, wird es weiß und der Text ist immer noch sichtbar. Dafür müssen wir dasselbe tun. Wählen Sie also diesen Spaltenstil beim Hover, Farbe, Weiß. Und zum Schluss für diesen, Style on Hover, Farbhintergrundstil. Warum? Das aktualisieren? Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Richtig, also nach unten scrollen. Da haben wir's. So erstellen Sie diesen Abschnitt. in der nächsten Lektion an, Sehen wir uns in der nächsten Lektion an, wie Sie diesen Abschnitt erstellen. Wir sehen uns in Kürze. 28. 28 Baue die Seite über uns Seite unsere Kunden: Und willkommen zurück. Jetzt ist es an der Zeit, diesen Abschnitt zu erstellen. Und wie Sie vielleicht vermutet haben, werden wir einige dieser Elemente einfach in den Abschnitt selbst kopieren , da dies eine der Hauptfähigkeiten von Elementary ist. Es ermöglicht Ihnen, Elemente in einen anderen Abschnitt zu kopieren , den Sie gerade erstellen. Also lass uns auf Plus klicken. Es ist ein doppelspaltiger Abschnitt. Solange dieser Abschnitt noch ausgewählt ist, geben wir ihm eine obere Marge von 100. Einfach so. Geben wir ihm nun ein Hintergrundbild. Ja, geben wir ihm ein Hintergrundbild. Solange es ausgewählt ist. Stilisieren Sie den Hintergrund, klicken Sie genau dort auf das Pluszeichen. Und ich mache weiter und wähle dieses Bild aus. Natürlich müssen wir jetzt ein Bild in diese Spalte einfügen. Dieses Bild. Klicken Sie auf dieses Plus, lassen Sie das Bildelement dort fallen, und das erweitert den Abschnitt. Also, zurück zum Abschnitt, Lass uns zur Position gehen. Lass es uns in der Mitte versuchen. In der Mitte. Nein, das wollen wir nicht. Unten in der Mitte. Jep. Das wollen wir. Der Hintergrund wurde reduziert und ihm eine schwarze Hintergrundüberlagerung zugewiesen. Also wähle das aus und dann schwarz. Klicken Sie hier auf eine beliebige Stelle. Um das los zu werden. Lassen Sie uns dann die Leistung dieser Hintergrundüberlagerung bis zu diesem Punkt erhöhen . Wählen wir das aus , um das Bild zu ändern. Das ist also das Bild. Und geben wir ihm eine abgerundete Ecke. Während es also immer noch ausgewählt ist, haben wir den Randradius von 20 ausgewählt, erhöhen wir auch den Abstand oben und unten. Während dieser Abschnitt ausgewählt ist, erweitertes Routing, 50 unten, 50 oben. Lassen Sie uns diesen Text nun duplizieren. Dürre da drüben. Ich denke, es hat eine gelbe Farbe. Ja, es ist gelb. Also wähle ich das einfach unter Stil aus. Kopiere diese Farbe. Wählen Sie diesen Stil aus. Füge es da rein. Lassen Sie uns den Textblock duplizieren. Wirf es da rein und es hat eine weiße Farbe. Solange es noch ausgewählt ist, wechseln Sie zu Stil, Textfarbe, Weiß. Jersey ruft zum Handeln auf. Ja, tut es. Also lass uns hier reingehen und sagen, wähle diese Schaltfläche. Der Knopf da drin. Und solange es noch ausgewählt ist, ändern wir den Text, um zu sprechen. Sprich mit uns. Natürlich werden Sie den Link hier angeben. Wenn Sie dann möchten, dass es in einem neuen Tab geöffnet wird, klicken Sie auf dieses Zahnrad. Wählen Sie In neuem Tab öffnen aus. Also füge einen Link ein, dass du möchtest, dass dieser Button die Leute weiterleitet , hier zu schreiben, um Insider-Stil zu schreiben, möchte diesen Abstand entfernen, linker Abstand. Geben wir ihm eine 50. Richtig 50, Top 20. Einfach so. Für den Randradius versuchen wir es mit 15. 15 ist okay. Wenn Sie möchten, können wir auch eine quadratische Schaltfläche haben. Sie möchten, können Sie auch eine scharfe Ecke haben Wenn Sie möchten, können Sie auch eine scharfe Ecke haben, indem Sie all diese entfernen. Wie Sie jetzt sehen können, ist die Farbe grün. Wählen wir also diesen Text aus. Kopiere das. Wählen Sie die Schaltfläche aus. Füge es dort ein. Beim Schweben. Wir wollen, dass es weiß ist. Farbe auf dem Hintergrund sollte also weiß sein. Und die Texte, während sie noch unter Hover stehen, sollten schwarz sein. Einfach so. Aktualisiere das. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Ordnung, also da haben wir es. So erstellt man diesen Abschnitt. Eigentlich sind wir fast fertig. in der nächsten Lektion an, Sehen wir uns in der nächsten Lektion an, wie man diese Zahlen erstellt. Sie sind animiert. Also, wenn ich diese Seite aktualisieren könnte, möchte ich sie aktualisieren, solange wir oben sind. Und wenn wir nach unten scrollen, sollen diese Zahlen so animiert sein. Sehen wir uns in der nächsten Lektion an, wie man das erstellt . Wir sehen uns in Kürze. 29. 29 Erstellen Sie die Über uns-Seite Let’s Talk Numbers (aktualisiert): Willkommen zurück. Dies ist der letzte Abschnitt auf dieser Seite. Schauen wir uns also an, wie man erstellt. Herzlichen Glückwunsch an unseren Redakteur. direkt unter diesem Abschnitt Lassen Sie uns direkt unter diesem Abschnitt einen Abschnitt mit einer einzigen Spalte haben. Wir gehen. Geben wir ihm eine Obergrenze. Indem Sie den oberen Rand von 100 auswählen. Das hat er mit meiner Liste gemacht. Klicken Sie dann auf das Pluszeichen und lassen Sie uns eine Kreuzung hinzufügen. Es ist tatsächlich über der Kreuzung. Wir müssen eine Überschrift hinzufügen. Also diese dunklere Farbe. Also klicke ich auf duplizieren und ziehe es dann per Drag & Drop als Bobs Abschnitt. Es ist also in diesem Abschnitt. Dieser Abschnitt. In Ordnung, also was sollte da stehen? Reden wir über Zahlen. Also wähle das aus. Sie erkennen, dass die rechte Seite hier, dieses Pluszeichen. Und wählen wir den runden Zähler. Also ziehen wir es per Drag & Drop da rein. Und wie Sie sehen, ist es bereits animiert. Also das einzige, was wir tun müssen, weil er bestimmte Substantive angibt , die wir verwendet haben müssen. Also fertig, Sergeants. Sobald Sie das getan haben, solange dies noch ausgewählt ist, klicken Sie einfach auf eine beliebige Stelle darin. Das ist dann natürlich das, was wir tun wollen. Diese ändern die Hintergrundfarbe auf Gelb. Wählen Sie also die Spalte selbst, den Stil und die Hintergrundfarbe aus. Ich kopiere das Gelb. Füge es da ein. Lassen Sie uns die Farben dieser Zahlen ändern. Also Liga sowieso, nur weil das dann diesen Zähler wählen, LMS. Jetzt ist es die Stilnummer der Beratungsseite. Nennen wir es diese dunkle Farbe. Füge es da ein. Es ist auch der Titel in derselben dunklen Farbe. Es ist also ein bisschen auffälliger. Und das, was wir tun müssen, ist, dies zweimal oder dreimal zu duplizieren, so oft Sie es anzeigen möchten. Und lassen Sie uns das aktualisieren. Ich wähle diese Spalte aus. Gehe zu Advanced. Links, ich will eine Fünf oder Zehn. Und rechts möchte ich es auswählen. Kopieren. Wählen Sie dieses aus. Stil. Ordnung, jetzt wählen wir die kleinste Hygiene aus. Auf der rechten Seite. Wir wollen es vor Ort einsetzen, Rand zehn. Jetzt ist dieser Raum sogar überall. Als Nächstes wollen wir ihm eine abgerundete Ecke geben. Wählen Sie wie gewohnt den Spaltenrand aus. Lustig. Die Laktatbogengrenze. So wie diese Grenze. Das nächste Quartal ist damit erledigt. Lass uns jetzt einfach mitspielen. Der zweite Titel hier bedeutet also, Kunden zu haben. Während das ausgewählt ist, mögen die Teammitglieder, Mitglieder, sie sind 53 zufriedene Kunden. Vielleicht haben wir das ausgewählt. Wir haben 3.000 plus 8.000. Geben wir ihm das Suffix Zahnseide. Tausend Flop-Kunden. Oder wir können auch sagen, wählen Sie das aus, gehen Sie in die 320-Projekte ein. Und schließlich der letzte, sagen wir braune bis weiße Offiziere, die den letzten auswählen. Also lasst uns, bevor wir eine Vorschau der Änderungen sehen, okay. Lassen Sie uns die Änderungen überprüfen. Es gibt jedoch etwas, das ich dir zeigen möchte , indem ich nach unten scrolle. Da haben wir es. Was ich Ihnen also zeigen wollte, ist, dass wir den Rand darunter nicht hinzugefügt haben, also geht es hier wieder zurück. Wählen Sie den Abschnitt Excel aus. Rand, Unterseite. Hundert, haben bezahlt, das. Änderungen. Es dehnt sich nach unten aus. Wir gehen, also haben wir einen schönen Abstand. So erstellen Sie diese Seite. Und im Grunde verwenden wir, wie Sie bemerkt haben , dieselben Prinzipien , die wir auf der Homepage verwenden. Das heißt, wenn Sie mehr Seiten sehen möchten, vielleicht eine Serviceseite haben oder eine spezielle Landingpage erstellen möchten eine spezielle Landingpage auf der ein bestimmtes Produkt mit einem Rabatt verkauft wird, müssen Sie nur den gleichen JC anwenden. Ziehen und Ablegen. Hier wurde eine neue Seite bereitgestellt. Du solltest das Zuhause betreuen. Seiten. Die Anzeige wird genau hier angezeigt und Sie können Änderungen vornehmen. Und dann fange ich an zu malen. In der nächsten Lektion. Lektion zum Erstellen der Seite. 30. 30A Erstellen Sie die Blog: Und willkommen zurück. Jetzt ist es an der Zeit, an der Blogseite zu arbeiten. Die Blog-Seite funktioniert also, wenn ich einfach mit der rechten Maustaste auf Link in neuem Tab anzeigen klicken könnte mit der rechten Maustaste auf Link in neuem Tab anzeigen , damit wir zum Frontend gehen und ihn uns ansehen können . Das ist also die Blogseite. Die Blogseite funktioniert, indem sie die Blogbeiträge , die Sie gepostet oder veröffentlicht haben , abruft und sie direkt hier anzeigt. Wann immer Sie also einen brandneuen Blogbeitrag veröffentlichen, wird dieser automatisch hier angezeigt. Also müssen wir WordPress sagen, Hey, weißt du was, jedes Mal, wenn ich einen neuen Blogbeitrag veröffentliche , der genau hier angezeigt wird. Also, wie machen wir das? Gehen wir zurück in unser Armaturenbrett. Und lass uns auf Bearbeiten klicken. Beginnen wir also wie gewohnt mit einer Vorlage, die die volle Breite haben soll. Gehen wir in die Astro-Einstellungen oder in die Breite gestreckt. Seitenleiste. Keine Seitenleiste. Lassen Sie uns diese Kopf - und Fußzeile unserer Daten aktivieren. Und obwohl es Update ist, ist es jetzt bereits aktualisiert. Aber lassen Sie mich hier zu diesem anderen Tab wechseln , den wir uns gerade angesehen haben. Wie Sie sehen können, ist dies der Header und dies ist der Ordner , den wir deaktiviert haben und der von Astra bereitgestellt wird. Wenn wir sie also nicht deaktivieren, haben Ihre Seiten immer diesen Header und diesen Ordner. Und wir haben hier bereits einen Ordner erstellt. Das brauchen wir nicht. Deshalb konnten wir diese beiden jetzt auf dieser Seite verwenden, denn mit dieser Tabelle sind sie nicht sichtbar, wenn ich die Seite aktualisiere . Das wollen wir. So können wir freien Speicherplatz haben, um die Seite tatsächlich visuell mit Elementor zu erstellen. Ordnung, jetzt, wo das erledigt ist, schließe ich diese Seite. Jetzt. Auf dieser Seite klicke ich auf Mit Elementor bearbeiten, damit wir mit Elementor daran arbeiten können . Und los geht's. Lassen Sie uns nun natürlich zuerst einen Abschnitt mit voller Breite hinzufügen. Und während der Abschnitt noch ausgewählt ist, gehen Sie in den Stilhintergrund. Natürlich brauchen wir ein Bild. Und ich werde dieses Insertmedium weiterhin verwenden. Und jetzt, weil ich möchte, dass es genauso aussieht wie der Heldenbereich, den wir auf der About-Seite verwendet haben. Es gibt eine andere Möglichkeit, Vorlagen zu erstellen, die Sie möglicherweise jedes Mal auf vielen Seiten wiederverwenden möchten. Also, wenn wir schnell zurück zum Dashboard wechseln könnten. Gehe in Seiten hinein. auf der About-Seite Klicken wir auf der About-Seite auf Mit Elementor bearbeiten. Jetzt, da wir hier im Editor der About-Seite sind und sie Elemente enthält, die wir vielleicht auf anderen Seiten verwenden möchten. Alles was wir tun müssen, ist direkt hier zu diesem Menü zu gehen. Als Vorlage speichern. Und geben wir ihm einen Namen. Seite, Webseitenvorlage. Natürlich würdest du ihm einen bestimmten Namen geben , den du magst. Klicken Sie auf Speichern. Und jetzt kann es verwendet oder eingefügt werden. Jetzt gehe ich von hier aus. Wir können das also im Dashboard belassen und ich werde zurück zu der Stelle wechseln , an der wir die Blogseite bearbeitet haben. Lass mich das entfernen. Und wenn wir jetzt genau hier auf dieses Ordnersymbol klicken, elementar, laden wir seine eigenen Vorlagen, aber wir wollen meine Vorlagen. Das sind die Vorlagen, die Sie gespeichert haben. Es sind Vorlagen, die Sie zuvor erstellt haben. Und jetzt haben wir die Webseiten-Vorlage, die wir erstellt , klicken, einfügen und anwenden. Und hier sind wir. Wie Sie sehen können, haben wir genau den gleichen Inhalt und das gleiche Layout wie für die About-Seite. Aber natürlich können wir nur behalten, was wir wollen. Also werde ich diese anderen Abschnitte einfach loswerden , weil wir nur daran interessiert sind, sie zu haben. Sie sind, also klicke ich auf Aktualisieren. Und lass uns das bearbeiten, um zu bloggen. Gehen wir hier zu unserer Referenz. Lass mich einfach auf Blog klicken. Lesen Sie die neuesten Artikel unserer Redaktion, kopieren Sie sie , gehen Sie zurück hier, wählen Sie ihn aus unserer Redaktion, kopieren Sie sie , gehen Sie zurück hier, , fügen Sie ihn dort ein, aktualisieren Sie ihn. Und jetzt, um die Blöcke auf diese Weise anzuzeigen. Wie Sie hier sehen können, haben wir vier Blogbeiträge. Dies sind Blogposts, die ich für diese Beispielwebsite erstellt habe . Und WordPress zieht sie im Grunde aus dem Dashboard und zeigt sie hier an. Also lass uns wieder hier rein gehen. Klicken Sie auf dieses Pluszeichen. Wählen wir einen einspaltigen Abschnitt aus. Solange es noch ausgewählt ist. Gehen Sie in die fortgeschrittenen Margen der Top 100. Und jetzt hier, lass uns einen Blog hinzufügen. Der Blogbeitrag von Elements zieht ihn immer wieder per Drag & Drop hinein. Und im Moment werden die Standard-Blogbeiträge angezeigt , die mit WordPress geliefert werden. Und ich werde es dir zeigen. Wie du siehst, HelloWorld, willkommen bei WordPress. Das ist dein erster Beitrag. Aktualisiere das. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Denken Sie also daran, dass wir auf dieser Seite keinen Blogbeitrag erstellt haben. Wie ich bereits erwähnt habe, wird dieser Inhalt aus dem Backend abgerufen. Jetzt müssen wir zurück zum Backend gehen und ein paar Blogbeiträge erstellen, sie veröffentlichen, und sie werden hier angezeigt. 31. 30B Erstelle die Blog-Seite Die Blog-Beiträge: Gehen wir zurück ins Armaturenbrett. Und hier oben haben wir Beiträge. Wir hatten Seiten hier, hier haben wir Beiträge. Also klicken Sie auf Beiträge. Hier findest du die Liste der Beiträge, die du hast. Wie Sie sehen können, ist hier der Hello World-Beitrag. Wenn ich es mir schnell in einem neuen Tab ansehe. So sieht es aus. Lass mich das schließen. Also möchte ich das auswählen und in den Papierkorb verschieben. Bewerben Sie sich. Lass mich das schließen. Jetzt. Ich möchte „Neu hinzufügen“ sagen. Lass uns also einen neuen Beitrag hinzufügen. Geben wir ihm einen Namen. Z.B. Ideen für Dacheindeckungen für Hausbesitzer. Das ist also der Name unseres Blogposts. Lassen Sie uns eine Standardvorlage wählen. Elementor, volle Breite. Nun, das Bild, das Sie hier sehen können, ist ein Feature-Bild. Während wir uns also noch in diesen Einstellungen befinden, haben wir ein ausgewähltes Bild. Wählen Sie das ausgewählte Bild aus. Und lassen Sie uns diesen Bildsatz als ausgewähltes Bild auswählen . Da haben wir's. Gehen wir wieder rein, gehen wir zu den astralen Einstellungen. Wir können es auch in voller Breite dehnen. Keine Seitenleiste. Diese Tabelle, diese wie gewohnt, veröffentlichen, veröffentlichen. Wenn wir nun zu unserer Seite zurückkehren, auf der wir die Blogseite bearbeitet haben, das Blog-Archiv, und die Seite aktualisieren. Sie können jetzt sehen, dass der von uns erstellte Blogbeitrag angezeigt wird. Ich gehe wieder hier rein. Was wir tun wollen, wie Sie hier sehen können, haben wir einige Texte, ein bisschen Text. also wieder hier reingehen, müssen wir den Blogbeitrag mit seinem Inhalt füllen . Das sind die Blogposts, denk dran, also editiere mit Elementor. Hier können wir einfach einen einzelnen Spaltenabschnitt hinzufügen. Vielleicht fügen wir ein Bild hinzu. Legen Sie das Medium ein und direkt darunter. Lassen Sie uns einen Textblock hinzufügen. Das wäre jetzt natürlich der Inhalt deiner, deiner Blogbeiträge. Ein Stück wäre, wo Sie über dieses spezielle Thema sprechen , um das es in dem Blogbeitrag geht. Lass mich sehen, ob ich mir etwas Lorem Ipsum-Text schnappen kann. Also lass mich klicken, Artikel lesen, diesen Lorem Ipsum kopieren, wie du siehst, das ist ein Blogbeitrag. Angenommen, der Besucher ist zu dem Blogbeitrag gekommen, er kann lesen, worüber er lesen sollte. Gehen Sie also wieder hier rein und wählen Sie diesen Textblockinhalt basierend auf dem Inhalt aus. Los geht's, aktualisiere das. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Also los geht's. Natürlich müssten Sie am unteren Rand etwas Rand hinzufügen . 100. eine Vorschau der Änderungen an. Und jetzt haben wir ein paar schöne Abstände. Natürlich soll Ihnen dieser Kurs jetzt Anleitungen geben , wie Sie Dinge tun können. Aber natürlich würden Sie sich Zeit nehmen, um sicherzustellen, dass Ihr Blogbeitrag sehr gut strukturiert ist. Und es sieht toll aus, während die Kunden, während ihre Besucher es lesen. Jetzt, da wir diesen Blogbeitrag veröffentlicht haben, gehen wir zurück zum Dashboard. Gehen wir zu den Beiträgen. Und jetzt ist es hier, Gewicht 0. Als wir, als ich diese Überschrift von dieser anderen Website hier eingefügt habe , hatte sie einige Einstellungen. Ich muss das entfernen und selbst eingeben. Was also passiert ist, als ich diese Überschrift hier kopiert habe , lassen Sie mich zurückgehen. Als ich es von hier kopiert und hier eingefügt habe. Ich habe es zusammen mit seiner Formatierung von der anderen Website eingefügt . Deshalb können Sie diesen HTML-Code sehen. Wenn ich es jetzt aktualisiere und zurückgehe, hat es den richtigen Namen, da dies kein vorformatierter Text ist , ich von einer anderen Website ausgewählt habe. Also, was ich tun möchte, ist mittags einen zweiten Blogbeitrag zu erstellen. Wie reinige ich dein Zimmer, z.B. dann direkt hier in diesen Einstellungen, Elementor in voller Breite. Lassen Sie uns ein Feature-Bild einrichten. Nehmen wir an, das ausgewählte Bild. Und lassen Sie uns in die Astro-Einstellungen für Weizenstretching gehen . Keine Seitenleiste. Deaktiviere diese. Veröffentlichen. Lass uns mit Elementor bearbeiten. Ordnung, lassen Sie uns einen einspaltigen Abschnitt hinzufügen. Klicken Sie darauf, um ein Bild hinzuzufügen. Stellen Sie das Bild ein. Und das kann es tun. Also. Fügen Sie die Medien direkt darunter ein. Vielleicht eine Überschrift. Leg es in die Mitte. Und das muss ein H1 sein. Denken Sie daran, dass jede Seite einen H1 haben muss. Dann ziehen wir diesen Text unter ihren Stil. Schieb es in die Mitte. Und dann gehen wir einfach zurück zu dieser Referenz-Website und kopieren den Textkörper dieses, diesen Lorem Ipsum-Textes . Kopiere das. Geh wieder hier rein. Wählen Sie das aus und fügen Sie es dort ein. Lass uns die Farbe ändern. Diese dunkle Farbe. Dieser Stil ist ausgewählt, obwohl er ausgewählt ist . Füge es da rein. Vielleicht machen wir das, solange es noch ausgewählt ist. Versuchen wir es mit einer Marge von 50. Aktualisiere das. Das ist eine Vorschau. Da haben wir's. Lassen Sie mich das jetzt einfach schließen. Und genau hier, nachdem wir die Erstellung dieser Blogbeiträge abgeschlossen haben , den zweiten, klicken Sie auf das Burger-Menü, um das Burger-Menü zu beenden. Gehen wir nun zurück zu der Seite, auf der wir unsere Blog-Archivseite bearbeitet haben . Also hier sind wir. Wenn ich es noch einmal aktualisiere. Und wie Sie jetzt sehen können, zieht WordPress einen Teil dieses Textes aus dem Inhalt der Blogbeiträge, um als Ausgang oder kurze Einführung zu dienen , damit jemand eine Vorstellung davon hat , was er lesen wird mehr darüber, wann sie den Blogbeitrag öffnen. Nun, da es in der nächsten Lektion so aussieht, wollen wir sehen, wie man es strukturiert. Einfach so. Einfach so im Grid-Stil. Also, wir sehen uns in der nächsten Lektion. 32. 31 Erstellen Sie die Blog-Seite Anpassen des Auftritts: Hallo, Willkommen zurück. Jetzt ist es also an der Zeit, am Erscheinungsbild der Blogbeiträge zu arbeiten . Derzeit sehen sie so aus, aber wir wollen, dass sie in einem Raster sind. Schauen wir uns an, wie das geht. beliebige Stelle innerhalb des gesamten Elements auswählen , werden diese Einstellungen angezeigt. Jetzt wollen wir als Erstes dieses Drop-down-Menü wählen und Rasse mit Daumen auswählen . Da haben wir's. Wie Sie sehen, nimmt es bereits Gestalt an, aber wir müssen an den Farben arbeiten. In Ordnung, also lass uns weitermachen und die Hintergrundfarbe ändern. Ich gehe stilvoll rein. Und wenn wir das für einen Moment zusammenbrechen lassen, haben wir diese sechs Optionen. Wir haben diese sechs Panels. Also jetzt den Wrapper-Hintergrund öffnen. Wählen wir eine weiße oder graue Farbe. Ich möchte leicht graue Farben, damit sie auffallen. Und dann wählen wir Lass uns das zusammenklappen und hineingehen. Gezeiten. Willst du es schwarz machen. Also Typografie, Lass uns weitermachen und diese dunkle Farbe wählen. Lass es uns da reinkleben. Beim Schweben. Wir wollen so gelb sein. Also kopiere ich das. Färbe, füge es dort ein. Jetzt wird es gelb, wenn wir den Mauszeiger darüber bewegen. Wir können auch an der Topographie arbeiten. Schriftfamilie. Ändern wir das auf Montserrat. Gehen wir wieder rein und legen wir es in die Mitte, genau wie diese Mittelausrichtung. Wir können das Schriftgewicht auch auf etwa 800 erhöhen . So wie das. Lass uns in den Inhalt gehen. Dort werden wir diesen Text bearbeiten. Also Farbe, wir wollen auch, dass es diese dunkle Farbe hat, einfach so. Und jetzt beachte, dass wir hier zu viele Texte haben. Wir wollen, dass es hier bis irgendwo ankommt, nicht alle diese Texte. Gehen wir also zurück zum Inhalt. Und wir haben Ernteinhalte wortwörtlich. Also sagen wir 20 Wörter. Wir wollen nur 20 Wörter als Auszug zeigen. Und ich denke, das ist eine gute Zahl. Gehen wir also zurück zum Stil vergrößern wir den Abstand zwischen der Schaltfläche und diesem Text. Also den Wrapper zusammenklappen und zum Inhalt gehen. Wir können die Marge am unteren Rand erhöhen, indem wir zuerst Breaking Bad und dann die untere Marge erhöhen. Und lassen Sie uns den Text zentralisieren. Einfach so. Lass uns in den Knopf gehen. Lass uns die Farbe ändern. Also, Texte färben, belassen wir es auf weißem Hintergrund. Lass uns diese dunkle Farbe wählen. Füge das da rein. Und beim Schweben. Oder vielleicht können wir es gelb färben. Wählen wir also diese gelbe Farbe aus. Beim Schweben. Wir wollen , dass es diese dunkle Farbe hat. Kopiere das, füge es dort ein. Einfach so. Okay, jetzt beachte, dass sich die Schaltfläche auf der linken Seite befindet, sodass wir sie in der Mitte ausrichten können , indem wir zurück unter Inhalt gehen. Schaltfläche „Mehr lesen“. Lass es uns so in die Mitte schieben und es aktualisieren. Natürlich hat dieses Element viele weitere Einstellungen , mit denen Sie herumspielen können, bis Sie die Ergebnisse lieben. Im Grunde genommen ist es also so , wie man das Grid erstellt. Ich schlage vor, dass Sie weitermachen und weiter mit all diesen verschiedenen Einstellungen experimentieren und herausfinden wie Sie Ihren Blogbeitrag am besten präsentieren können. Schauen wir uns also eine Vorschau der Änderungen an. Und das ist unsere Blogseite oder unser Gewicht. Wir müssen also am unteren Rand dieses Elements einen Rand hinzufügen , bevor wir diesen Teil abschließen. Wählen Sie also den Abschnitt grüne Seite fortgeschritten, unterer Rand, 100 aus. Update, das ändert sich wirklich. Scrollen wir nach unten und es sieht gut aus. Im Grunde genommen ist es so, wie man die Blog-Archivseite erstellt. Je mehr Blogbeitrag Sie haben, desto mehr werden Sie hier angezeigt haben. Und eine weitere Sache, die ich erwähnen wollte, ist, dass Sie jetzt feststellen werden, dass wir den Abfrageteil haben, wenn wir wieder in das Layout zum Reduzieren von Inhalten zurückkehren , wenn wir wieder in das Layout zum Reduzieren von Inhalten . Hier stehen wir unter Druck, holen die Daten ab. Wordpress zeigt jetzt Blogbeiträge , die zur Kategorie „ Nicht kategorisiert“ gehören. Aktualisiere das zuerst. Wenn wir in das Dashboard gehen, werden Sie feststellen, dass wir diese beiden Blogbeiträge haben und sie sich in der Kategorie „ Nicht kategorisiert“ befinden. Wir können verschiedene Kategorien erstellen und WordPress anweisen, nur Blogbeiträge aus dieser bestimmten Kategorie anzuzeigen . Also sagen wir z. B. und einen Beitrag, Lass uns eine Kategorie erstellen. Also wähle ich eine Kategorie aus und kann ihr einen Namen geben. Dachreparaturen. Ich drücke einfach die Eingabetaste. Es wird automatisch ein Slug für uns erstellt. Wenn wir also Quick Edit sagen, ist dies der Slug, wie Sie sehen können. Du kannst dieses Bein auch hier nehmen, wenn du möchtest, dass es anders sein soll, oder hier rein. In Ordnung? In Ordnung, jetzt gehen wir zurück zu allen Beiträgen. Und lassen Sie uns eine dieser Kategorien ändern, z. B. dieser. Gehen wir zu, wir können die Kategorie hier bearbeiten. Wir können ihre Kategorie hier schnell bearbeiten und ändern. Deaktiviere das und überprüfe das, dann aktualisiere es. Und jetzt gehört es zur Kategorie Dachreparaturen. Wir können auch in die Bearbeitung gehen. Und genau hier unter den Wordpress-Einstellungen können wir nach unten scrollen und Kategorien finden. Moment, weil wir uns für die Dachreparatur entschieden haben, wie Sie sehen, handelt es sich um eine Dachreparatur. Wenn wir also mehrere Kategorien haben, können wir hier jede auswählen. Und dieser Blogbeitrag wird in diese Kategorie fallen. Also jetzt zurück zum Frontend. Innerhalb dieses Abfrageinhalts, obwohl dies der Fall ist, ist dieses Element ausgewählt. Gehen Sie in die Abfrage. Lassen Sie uns diese Optionen schließen und nur Dachreparaturen auswählen. Wie Sie sehen können, zeigt WordPress jetzt nur den Blogbeitrag an, der zur Kategorie Dachreparaturen gehört. Wir können auch sagen, ob wir das entfernen und nicht kategorisiert wählen. Es werden jetzt die einzigen Blogbeiträge in der Kategorie „Nicht kategorisiert“ angezeigt . Denken Sie hier daran, dass es nur ein Blogbeitrag ist, der in der Kategorie Uncategorized ist. Wenn Sie die beiden anzeigen möchten, müssen wir hier nur die Kategorie Dachreparaturen hinzufügen . Sie können so viele Kategorien hinzufügen, wie Sie möchten, und sie werden hier angezeigt. Also unsere Daten. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Und los geht's. So können Sie das Layout der Blog-Archivseite verschönern oder anpassen. Es ist jetzt an der Zeit, Ihre Website auf unterschiedliche Bildschirmgrößen reagieren zu lassen . Das sind mobile Bildschirme, Tablets, und auf dem Desktop sieht es schon gut aus. Lassen Sie uns also an den anderen beiden arbeiten. Also werde ich dich bald sehen. 33. 32 Responsive die Website machen. Die Kopfzeile (aktualisiert): Hey, willkommen zurück. Jetzt sind wir also fast fertig mit einer Website, aber wir müssen sie auf mobilen Bildschirmen und Tablets responsiv gestalten . Bevor wir also anfangen, daran zu arbeiten, schauen wir uns an, wie es von mir auf diesen Geräten aussieht. Tastatur, Control Shift I. Und das öffnet die DevTools. Mach dir keine Sorgen um den ganzen Code. Das musst du nicht anfassen. Das einzige, was uns interessiert sind diese Geräte hier. Jeder Browser hat die Möglichkeit, verschiedene Bildschirmgrößen nachzuahmen , damit Entwickler sehen können, wie ihre Website, sobald sie bereit ist, die verschiedenen Gerätegrößenoptionen zu verwenden, klicken wir hier auf dieses winzige Symbol. Und jetzt werden diese Einstellungen angezeigt. So sieht es auf einem iPad Air aus. Wenn ich zu Samsung Galaxy gehe, die Website, wie sie aussieht, Samsung Galaxy genannt. Einige der Elemente sind bereits gut aufeinander abgestimmt, aber wir müssen etwas mit dem Header tun. Wie Sie sehen können, ist hier das Menü, die Navigationsleiste, die Fußzeile. Wir arbeiten nicht. Mal sehen, wie wir auf Surface Pro Seven vorgehen können. So sieht es aus. Jetzt sehen wir, wie es auf verschiedenen Bildschirmgrößen aussieht. Lass uns das entfernen und das von Neptun schließen. Jetzt habe ich mit Elementor zu viel bearbeitet. Dann klicken Sie auf unsere Kopfzeile, die uns zu dem Ort führt. Und QBR ist, wie Sie sehen können, die Kopfzeile editierbar. Ich wähle diesen Abschnitt und klicke dann auf diesen responsiven Modus. Ich kann hier als Ordner schreiben, in dem die Einstellungen angezeigt werden , an denen wir interessiert sind Lassen Sie uns mit einem mobilen Bildschirm beginnen. Ich klicke darauf. Und natürlich ist dies, wie Sie bereits sehen können, ein weiterer Ort, an dem wir Looks unserer Website sehen können, die ich nur ohne diese Bearbeitungsoptionen sehen wollte. Also solange der zweite noch ausgewählt ist. Das erste, was wir jetzt verstehen müssen , warum wir diese responsiv machen , ist, dass, wenn wir zum Desktop-Modus zurückkehren können, dies zwei Spalten darin sind. Eine, die von links nach rechts verläuft. Von links nach rechts sind es 100%. Das ist also ein Prozentsatz. Nice Now-Button-Marken. Gehen wir also wieder rein, wenn das klein ist, sind die Säulen Labore und werden übereinander gestapelt. Und sie belegen 100% der Woche. Moment nimmt diese Spalte mit dem Logo also 100% der Breite ein, von links nach rechts. Wir können es zu 50 Prozent schaffen. Also, solange es ausgewählt ist, machen wir es in der Spalte. 50% Einfach so. Jetzt ist die Navbar immer noch zu 100%. Deshalb ist es unten gestapelt. Wenn wir es auswählen, können wir auch 50% verdienen. Und jetzt kaufen beide 50%. Scheint, dass Sie auch das Menü nach unten drücken müssen. Nicole ist zu nah am Rand. Es ist alles ausgewählt. Gehen wir zu Advanced Margin. Das ist großartig. Diese Marge ist top. Erhöhen Sie es auf zehn, dann den Rand nach rechts. Bis zu zehn. Aktualisiere das. Lassen Sie uns die Änderung überprüfen und so sieht sie aus. Aber natürlich müssen wir Control Shift I drücken und dann zu diesem Element wechseln und dann zu einem der kleinen Geräte wie dem iPhone SE wechseln. Und so sieht es aus. Ordnung, also gehen wir wieder rein, lassen Sie uns den Tablet-Modus verwenden. Und es gibt eine kleine Flasche Elementor, die Menschen betrifft, wahrscheinlich kleine Mittel wie meins. Meiner ist etwa 7 m lang. Und der kleine Fehler ist, dass die Änderungen sehen wollen, die wir während der Arbeit am Tablet-Modus vornehmen. Wir müssen das ein bisschen in die Länge ziehen, einfach so. Es muss ein wenig erweitert werden. Und ich weiß nicht, warum das passiert, aber wenn Sie das nicht in die Länge ziehen und erweitern, werden Sie die Änderungen, die Sie vornehmen, nicht sehen. Jetzt. Wie Sie sehen können, können wir die Änderungen sehen, die wir vorgenommen haben. Nun, wir sind im mobilen Bildschirmmodus. Und jetzt zurück zum Tablet-Modus, wie Sie sehen können, davon spreche ich. Also wenn z.B. ich dies auswähle und 50% wähle, wirst du keine Änderung sehen. Aber wenn ich es etwas in die Länge ziehe, können Sie jetzt sehen, dass es 50% belegt. Seien Sie sich dessen also bewusst. Wenn ich das auswähle und 50 Prozent gebe. Jetzt müssen wir das natürlich viel kleiner machen. Also vielleicht etwas wie 30% auswählen. Das heißt jetzt besetzen 75%. Für richtig. Lassen Sie mich nun das Menü auswählen. Brecht die Marge da draußen auf. Und wenn Sie diese Griffe hier nicht sehen können, rollen Sie einfach nach oben, um den Wert auf zehn zu erhöhen. Oder die Aufwärts- und Abwärtspfeiltasten auf Ihrer Computertastatur. Ich werde auch den rechten Rand erhöhen. Aktualisiere das. Sehen Sie sich also eine Vorschau der Änderungen an. Wenn wir auf das iPad Air umsteigen, sind das unsere Beine. Ich gehe wieder rein. Wenn wir das Menü auswählen, wird die tatsächliche Navigationsleiste angezeigt und wir können es hier hinzufügen. Gehen Sie also zurück zu Kontext, Menü, Einstellungen, Menülogo und fügen Sie Medien ein. Wenn wir jetzt das Menü öffnen, ist das unsere Gesäßmuskulatur, oder? Eine andere Sache, die Ihnen vielleicht aufgefallen ist, ist dieser Übersichtseffekt. Das wollen wir ändern. Schauen wir uns an, wie das Menü gut aussieht, aber lassen Sie uns ins Innere gehen. Stil hat den Menü-Wrapper ausgeblendet. Wir können im Stil eines kleinen Hamburgers arbeiten. Das ist der Hamburger-Stil. Also z.B. für die Hintergrundfarbe können Sie ihr jede gewünschte Farbe geben. Aber natürlich möchte ich diese gelbe Farbe sprechen. Kopiere das. Füge es da ein. Und jetzt ist es schwarz. Aktualisiere das. Und natürlich auch auf mobilen Bildschirmen wird es auch auf mobilen Bildschirmen immer noch so gelb sein , da sich die Farbe auf alle Bildschirmgrößen auswirkt. So bearbeitet man also den Header. Jetzt reagiert es auf allen Bildschirmgrößen. Es sieht toll aus. In der nächsten Lektion sehen wir uns an, wie Sie auch Ordnerantworten erstellen. Also wir sehen uns in Kürze. 34. 33 Mache die Website Responsive den Footer: Und wir sind zurück. Um das Foto responsiv zu gestalten, folgen wir den gleichen Prinzipien, die wir hier in der Kopfzeile befolgt haben. Lassen Sie uns zunächst eine Vorschau dieser Änderungen anzeigen. Und was ich tun möchte, ist die Dev-Tools zu verlassen. Und ich möchte die Homepage auswählen. Lassen Sie uns nun den Mauszeiger darüber bewegen. Wählen Sie dann den Ordner aus. Dies ist eine Abkürzung zu verschiedenen Editoren. In Ordnung, also hier sind wir. Lassen Sie uns dieses Symbol hier auswählen, im Responsive-Modus. Lass uns in den Tablet-Modus wechseln. Und lassen Sie uns das natürlich ein wenig nach außen ziehen . Und jetzt ist dies ein wahres Spiegelbild dessen, was wir derzeit haben. Wir müssen hier ein paar kleinere Änderungen vornehmen. Lassen Sie uns die Größe dieser Schrift reduzieren, sodass sie in einer Zeile steht. Bis zu diesem Punkt. Es ist auch stark reduziert. Abonnieren Sie unseren Newsletter. Ordnung, also können wir das ein bisschen nach innen drücken. Ich sehe, es ist viel näher am Rand als die Texte. Also solange es ausgewählt ist, fortgeschritten, mach das kaputt. Und dann lassen Sie uns, lassen Sie uns bis zu diesem Punkt nur ein bisschen abnehmen . Aktualisiere das. In Ordnung, also lass uns jetzt zu Smartphones wechseln. So sieht es also auf Smartphones aus. Als erstes möchte ich diesen Textkörper auswählen. Richten Sie die Mitte aus, wählen Sie diese sozialen Symbole aus und richten Sie sie in der Mitte aus. Wählen Sie diesen Text aus. Ich werde es auch an der Mitte ausrichten. So zufrieden. Denken Sie jetzt daran, dass diese beiden Spalten übereinander gestapelt sind. Wir können sie einfach in zwei Teile teilen. Wählen Sie dies aus und geben Sie Ihnen 50 Prozent Weizen. So wie diese Funktion vorhanden ist. Und jetzt sind sie beide Seite an Seite. Als Nächstes stellen wir das in die Mitte. Mittig ausrichten und für das Formular anmelden. Sieht einfach toll aus. Wir machen uns Sorgen um Leichtigkeit. Also aktualisiere das. Sehen wir uns eine Vorschau der Änderungen an. Wenn wir also Kontrollschicht I drücken, so sieht es auf einem Tablet aus. Und wenn wir vielleicht auf Samsung Galaxy S8 wechseln, sieht es auf einem Samsung Galaxy so aus. Ich glaube, ich mag es so. Und so kann das Foto auf verschiedene Bildschirmgrößen reagiert werden. In der nächsten und letzten Lektion wollen wir dafür sorgen, dass die Textteile der verschiedenen Seiten auf allen Bildschirmgrößen responsiv sind. Wir sehen uns in Kürze. 35. 34 Machen Sie die Website Responsive auf der Startseite: Willkommen zurück. sind wir mit der Kopf- und Fußzeile fertig. Die beiden reagieren. Lassen Sie uns an den Hauptabschnitten der Seiten arbeiten. Also wenn ich nach Hause gehe, wähle ich das aus. Jetzt sind wir wieder zu Hause. Fangen wir nun mit der Homepage an. Also wähle ich das aus, damit wir direkt mit der Bearbeitung beginnen können. Und hier sind wir. Das erste, was Sie tun müssen, ist natürlich auf das Symbol für den Responsive-Modus zu klicken Symbol für den Responsive-Modus , um die Einstellungen anzuzeigen. Lass uns in den Tablet-Modus wechseln. Und lassen Sie uns es natürlich ein wenig erweitern. Wenn Sie einen Breitbildschirm haben, denke ich nicht, dass dies ein Problem sein wird. Sie werden einfach sehen, dass alles korrekt funktioniert. Damit wollen wir diesen Text nun ein wenig nach innen drängen. Wie Sie sehen können, sieht unser Header fantastisch aus, und wenn ich ganz nach unten scrolle, sieht unser Foto fantastisch aus. Wir müssen also nur ein paar kleine Änderungen am Inhalt des Körpers vornehmen . Wenn Sie also diese Spalte auswählen, gehen Sie in den erweiterten Rand auf der linken Seite. Lass es uns ein bisschen erhöhen. Einfach so. Und ich denke, das ist ein netter Ort. Und es ist lesbar. Scrollen Sie nach unten. Mir gefällt immer noch, wo sich das befindet, also werde ich es nicht anfassen. Lassen Sie uns dasselbe für diese Kolumne tun. Wählen Sie die Spalte Advanced Padding aus. Das waren 90. Aber auf der linken Seite wollen wir es einfach so auf Training erhöhen. Wählen wir diese Spalte aus. Erweiterte Polsterung auf der linken Seite. Geben wir 20 auf der rechten Seite. Einfach so. Das sieht toll aus. Lass uns wiederholen, was wir getan haben. Wählen Sie den Erweiterten aus. Das sind 126 an der Spitze. Also lass uns dir einfach 120 geben. Lass uns das zu 100% machen. Also ja, lass es uns zu 100% machen. Einfach so. Lassen Sie mich diesen Abstand für diese Spalte mit dem Bild entfernen . Machen wir es auch zu 100%. Und jetzt geben wir ihm eine Polsterung von 20 auf der rechten Seite. Also irgendjemand links, 50 oben. Derselbe Fall gilt für dieses Serin. Und ein cooler Trick, den wir machen können, ist, dieses Bild vor diesen Texten auf Tablet-Bildschirmen zu platzieren, es aber genau dort zu belassen, wo es sich auf der Registerkarte auf den Desktop-Bildschirmen befindet. Wir haben also diese Funktion in Elemental, bei der ich, wenn ich das auswähle und zu dieser Stelle gehe, diesen Abschnitt auswählen kann , der diese beiden Spalten enthält. Und mit Advanced Responsive können wir die Spalten auf dem Tablet umkehren. Und das wird die Spalte, die sich darunter befand, über der ersten Spalte bringen . Also los geht's. Lassen Sie uns das auch in den Mittelpunkt rücken. Derselbe Fall trifft zu. Schieben wir es in die Mitte. Und es scheint unten einen seltsamen Rand zu haben. Wählen wir also diesen Text aus. Fortgeschritten. Mach das kaputt. Und jetzt haben wir es zurückgesetzt. Lassen Sie uns eine Vorschau der bisherigen Änderungen anzeigen. Bevor wir uns eine Vorschau angesehen haben, hat es sich geändert. Lass uns arbeiten. Lassen Sie uns dieses Bild ein wenig erweitern. Wenn Sie diese Spalte auswählen, vielleicht 35%, sodass daraus 65 Prozent werden. Und im Moment haben wir zu viel Spielraum an der Spitze. Also wähle ich das aus, gehe in Advanced und sage, dass er AT hatte , wir können es bis zu diesem Punkt nur ein bisschen erhöhen. Jetzt ist es ausgewogen. Ich finde, der Abschnitt mit den Testimonials sieht gut aus. Aber links und rechts davon hatten wir einen gewissen Spielraum. So fortgeschritten. Entferne das. Und wie Sie sehen, können wir feststellen, dass es auf diesem Gerät so aussehen wird, aber nicht auf anderen Geräten. Dies sind also nur Einstellungen , die für das Tablet gelten. Scrollen Sie also nach unten. Das hatte einige, ich denke, ich finde, das sieht gut aus, aber lassen Sie uns diesen Text etwas kleiner machen, weil er dort zu nahe am Rand liegt, können wir auch die Größe dieses Textes reduzieren. Da ist jemand, ich glaube , das sieht besser aus. Lass uns updaten. Sehen Sie sich eine Vorschau der Änderungen an. Schicht steuern. I. Lass uns in den Tablet-Modus wechseln, iPad Air. Und lass uns anfangen zu scrollen. Ordnung, also wir haben das Problem dort. Ich denke, wir müssen die Standardeinstellungen , die wir von unserem Desktop hatten, entfernen. Also mache ich das kaputt, ich wähle diese Spalte aus. Gehe zu Advanced. Entferne das und entferne das. Lassen Sie uns es jetzt noch einmal einrichten. Rand oben. Ich drücke den Abwärtspfeil auf meiner Tastatur. Das ist ein netter Platz für die Polsterung. Geben wir ihm etwa 30. Das ist okay. Aktualisiere das. Und los geht's. Jetzt sieht es also gut aus. unten scrollen. Da haben wir's. Die Seite sieht also super aus. Und so kann der Körperbereich auf unterschiedliche Bildschirmgrößen reagiert werden. Sehen wir uns auf der About-Seite an , wie das geht. Bevor wir zum Schluss kommen. Wir sehen uns in Kürze. 36. 35 Machen Sie die Website mobil über Pa: Moment arbeiten wir gerade an der Seite Über uns. Aber ich dachte, ich sollte dir vor Ende des Unterrichts eine Übung geben. Gehen wir also zur About-Seite. Und wie Sie sehen, sieht es auf Tablets so aus. Und wenn wir zu mobilen Bildschirmen wechseln, sieht es so aus, oder? Ich denke, das ist eine gute Übung für Sie, um sich damit vertraut zu machen , Seiten responsiv zu gestalten. Wir haben nicht näher darauf eingegangen, wie Abschnitte wie diese responsiv gestaltet werden können. Nehmen Sie sich also einen Moment Zeit und lassen Sie Ihre Seite auf mobilen Bildschirmen und Tablets fantastisch aussehen. Andererseits, wenn wir zur Blog-Seite wechseln, schauen wir uns an, wie es aussieht. Also nach unten scrollen. Standardmäßig sieht die Blog-Seite fantastisch aus. Also nicht viel Arbeit hier drin. Wenn Sie jedoch einige Änderungen vornehmen möchten , damit es auf einer anderen Bildschirmgröße ansprechender aussieht. Mach weiter und mach das. Aber nachdem Sie das gesagt haben, werden Sie bemerkt haben, dass wir die Kontaktseite nicht angefasst haben, aber das war gewollt. Die Kontaktseite ist also auch Teil Ihrer Übung, wenn Sie diesen Kurs abgeschlossen haben Machen Sie weiter und erstellen Sie eine schöne Kontaktseite. Wenden Sie dieselben Prinzipien an, die wir bei der Erstellung dieses Formulars angewendet haben. Erstellen Sie einfach das Formular in Terminator und werden es im Frontend auf der Kontaktseite mit einem Kurzcode angezeigt . Seien Sie kreativ, schauen Sie sich andere Websites an und sehen Sie, wie ihre Kontaktseiten aussehen und versuchen Sie, so etwas nachzubilden. Und nachdem ich das gesagt habe, habe ich noch ein paar abschließende Gedanken. Also, wir sehen uns in der letzten Lektion dieses Kurses. Wir sehen uns in Kürze. 37. 36 Schlussgedanken: Herzlichen Glückwunsch. Wenn du es bis hierher geschafft hast, bedeutet das, dass du ein Finisher bist. Viele Menschen können etwas anfangen, aber nicht jeder kann es beenden. Manche Menschen lassen sich ablenken, andere geben unterwegs einfach auf. Aber du hast es bis hierher geschafft. Das sagt viel über die Art von Person aus, die du bist. Aus tiefstem Herzen. Ich wollte nur sagen, danke, dass du so weit gekommen bist, und herzlichen Glückwunsch zum Abschluss dieses Kurses. Sie haben jetzt die Fähigkeiten, jede Art von Website, die Sie möchten, mit WordPress und Elementor von Grund auf neu zu erstellen . Es ist immer eine Freude , Sie hier zu haben. Und zum Schluss möchte ich Sie nur um einen kleinen Gefallen bitten. Würdest du dir nur 1 Minute Zeit nehmen und eine Bewertung zu diesem Kurs direkt unter diesem Video hinterlassen? Und der Grund, warum ich um eine Bewertung bitte, ist dass Sie anderen Schülern helfen, diesen Kurs zu entdecken. Je mehr Bewertungen die Klasse hat, desto mehr andere Schüler, die nach dieser Art von Unterricht suchen , können sie finden, da der Skillshare-Algorithmus die Klasse nach oben schiebt und es ist für mehr Schüler besser auffindbar . Nehmen Sie sich also nur 1 Minute Zeit und teilen Sie anderen Schülern mit, was Sie über diesen Kurs herausgefunden haben. Wie fühlst du dich? Was hat dir an der Klasse gefallen? Würden Sie es Anfängern oder Lernenden auf fortgeschrittenem Niveau empfehlen, das wird wirklich viel bewirken. Und es wird eine großartige Möglichkeit sein, Skillshare zu einem besseren Ort zu machen. Ich möchte noch einmal herzlichen Glückwunsch zum Abschluss des Kurses aussprechen. Und das ist vorerst alles von mir. Bis zum nächsten Mal. Bleib kreativ, bleib produktiv und vergiss nicht, mir zu folgen, um benachrichtigt zu werden , wenn ich einen neuen Kurs poste. Wir sehen uns später. Stück.