Okay, jetzt lasst uns weitermachen und
den Header für unsere Website erstellen.
Und genau so sieht es gerade aus,
und es sieht überhaupt nicht gut aus.
Das ist es, was wir erreichen wollen.
Sie können die Kopfzeile hier sehen, wir
haben das Logo auf der linken Seite
und dann haben wir das Hauptmenü auf der rechten Seite.
jedoch
Zeigen Sie Ihnen jedoch etwas wie wenn ich auf eine andere Seite gehen würde,
sagen wir als Beispiel die About-Seite,
genau hier können Sie sehen, dass die Kopfzeile anders ist.
Dieser hat einen schwarzen Hintergrund,
während der Header auf
der Homepage überhaupt keinen Hintergrund hat,
fügt sich hier einfach in das Hintergrundbild ein,
im Grunde müssen wir 82 verschiedene Header erstellen.
Eine speziell für die Homepage und dann die
andere für den Rest unserer Seiten.
Wie machen wir das jetzt?
Bevor ich dir das zeige,
lass mich einfach die Demo-Website wegziehen.
Bevor ich dir jetzt zeige, wie das geht,
möchte ich dir etwas anderes zeigen.
Wenn ich mit Elementor zu Edit gehen sollte,
ging ich zu den Site-Einstellungen.
Neben der Möglichkeit, Ihre globalen Telefone und Ihre Farben und all das einzustellen
,
können Sie auch Änderungen an der Site-Identität vornehmen
, genau hier haben wir Einstellungen.
Wenn ich hier auf die Dichte klicke,
können wir auch den Site-Namen ändern.
Ich rufe meine Reisepassreise an.
Das ist der Name der Website.
Und dann wird der Slogan sein , wenn Reisen auf Abenteuer trifft.
Für das Logo wähle ich genau hier das Logo aus.
Lasst uns das einfügen.
Und dann wähle ich für das Phi of Icon
das Bild der IT mit dem
grünen Hintergrund aus.
füge ich ein.
Und los geht's, wir haben unsere Site-Identität.
Jetzt können Sie auch hier zur Kopfzeile kommen
und verschiedene
Änderungen vornehmen, die Sie auswählen können, um das Logo auszublenden, den
Slogan anzuzeigen, die Inhaltsbreite zu erhöhen
oder die Inhaltsbreite zu reduzieren
liegt alles an dir.
Da wir jedoch unsere eigenen benutzerdefinierten Header erstellen werden,
müssen wir hier überhaupt nichts ändern.
Also werde ich jetzt weitermachen und einfach
updaten. Und dann überprüfe ich das.
Okay, ich gehe zurück zum Backend Exit to Dashboard.
Und jetzt erstellen wir unseren Header.
Ich komme hier runter zu unseren Eltern.
Hier sehen Sie Elemente oder Headon-Lebensmittel sind Baumeister.
Dies ist vom Plugin. Ich klicke da rein.
Und jetzt klicke ich auf Neu hinzufügen.
Und jetzt nennen wir das den Homepage-Header.
Dann genau hier, wo Sie eine Art von Vorlage haben.
Wir werden den Header wählen,
und dann können wir wählen, okay,
wo möchten wir diesen Header anzeigen?
Da es sich speziell um die Titelseite handelt,
werde ich hier unten wählen, dass Sie bestimmte Ziele haben.
Ich wähle bestimmte Seiten aus und
lade hier einfach nach Hause ein.
Und da gehst du.
Jetzt wird bei diesem speziellen Header
nur auf der Homepage angezeigt.
Und dann können Sie für Benutzerrollen genau hier wählen, okay,
vielleicht möchten Sie diese Kopfzeile nur anzeigen, um angemeldete
Benutzer sind ausgeloggte Benutzer
oder Bearbeitungen oder Sie haben viel Flexibilität.
Ich werde das einfach leer lassen, weil wir
für alle da sein wollten.
Jetzt haben Sie
diese Option aktiviert Layout für uns Vorlage.
Jetzt ist die Sache mit Elementor, dass Sie neben
der Standardvorlage und einer von Ihrem Theme bereitgestellten
Elemente auch zwei benutzerdefinierte Vorlagen erhalten.
Einer wird als elementare Canvas-Daten bezeichnet, volle Breite,
einfacher in voller Breite bedeutet, dass
Ihre Inhalte bis zu den Rändern Ihres Bildschirms erstrecken können.
Also geht im Grunde die volle Breite, dass
ich so bin wie keine Ränder Muster sind.
Elemental Canada als Implementierungen, dass Sie
keine Kopf- oder Fußzeile haben werden.
Es ist im Grunde ein leeres Element oder unsere Vorlagen,
wir gehen nicht mit einer Canvas-Vorlage.
Es ist also wirklich nicht nötig, dieses Layout zu aktivieren,
aber ich werde die Elemente der Vorlage voller Breite auswählen
.
Lass uns jetzt weitermachen und auf „Veröffentlichen“ klicken.
Jetzt klicke ich auf Bearbeiten mit Elementor.
Was wir hier erreichen wollen, ist das,
lassen Sie mich die Demo-Seite zurückbringen.
Es wird im Grunde ein Abschnitt mit zwei Spalten sein.
Die linke, die linke Spalte, wir haben das Logo,
während die Spalte auf der rechten Seite das Hauptmenü hat und wir möchten auch,
dass
die Spalte auf der hellen
mit dem Hauptmenü mehr Breite hat .
Also sieh dir das an.
Okay, genau hier klicke ich
hier auf den Plus-Button.
Und jetzt können wir unsere Struktur wählen.
Und ich werde diese eine Kluft hier wählen.
Diese wird haben,
die erste Spalte wird ein Drittel des gesamten Abschnitts haben,
während die zweite Spalte zwei Drittel haben wird.
Da wir den Abschnitt, wie Sie sehen können, für die Inhaltsbreite bearbeiten
, könnten wir tatsächlich die volle Breite erreichen,
wenn Sie möchten.
Aber ich gehe mit Box und ich
wähle 1240 Pixel.
Dies ist nur meine persönliche Präferenz.
Ich habe Menschen geliebt 1240 Pixel.
Jetzt, hier für die allererste Spalte,
klicke ich hinein.
Ich scrolle den ganzen Weg hier runter.
Und wir versuchen das Logo hinzuzufügen.
Also füge ich das Website-Logo hinzu.
Klicken Sie auf, legen Sie es hinein.
Und jetzt haben wir unser Logo.
Jetzt können Sie sehen , weil das Logo weißen Text hat
und dies ein weißer Hintergrund ist.
Aber ertrag es einfach mit mir.
Okay, ich entscheide mich.
Die Bildgröße hier gehe ich vorerst voll aus.
Dann lasst uns fortfahren und
auf die Schaltfläche Bearbeiten für diesen Abschnitt klicken.
Alles klar, also habe ich da reingeklickt.
Ich gehe wieder zum Style.
Und dann ist er dorthin gegangen, wo du angefangen hast zu tippen.
Ich entscheide mich für Klassiker.
Jetzt wähle ich die Farbe Schwarz.
Jetzt kannst du das Logo tatsächlich sehen, oder? Okay.
Gehen wir nun zur zweiten Spalte.
Wir werden unsere Navigationselemente hinzufügen.
Schreiben Sie also gegen das Navigationsmenü,
klicken Sie auf ziehen, drogen Sie das Innere.
Und dann können Sie sehen, dass das Hauptmenü standardmäßig ausgewählt ist.
Wenn Sie jedoch eine Reihe von Änderungen vornehmen müssen,
beachten Sie genau hier, dass das Hauptmenü verbleibt.
Der Text ist in Großbuchstaben, er ist weiß.
Es ist auch nach rechts und auch in der Mitte ausgerichtet.
Also müssen wir für Verdünner tun.
Lasst uns wieder hier rein gehen. Als erstes werde ich
beim Bearbeiten des Navigationsmenüs genau hier
das Layout klicken.
Und jetzt entscheiden wir uns für „Ausrichten“ nach rechts.
Wie Sie gerade sehen können, ist es auf der rechten Seite.
Jetzt lasst uns zum Stil übergehen.
Und wir werden zur Typografie herkommen.
Klicken Sie auf die Schaltfläche „Bearbeiten“.
Com nicht-haarige Transformation, wählen Sie Großbuchstaben.
Okay?
Und dann klicken wir für die Textfarbe
auf das globale Symbol
und wählen dann hauptsächlich für Weiß.
Gut.
Aber wie richten wir
die Menüpunkte in der Mitte vertikal aus?
Was Sie hier tun möchten, ist, dass Sie hier auf die Spaltenpotenz bearbeiten klicken
,
diese spezielle Schaltfläche hier klicken.
Und jetzt können Sie sehen, dass wir Vertical Align haben.
Wir entscheiden uns für „Middle“.
Da gehst du.
Das ist es.
Aber wir sind noch nicht fertig.
Für das Logo.
Klicken wir auf die Schaltfläche Bearbeiten für das Website-Logo.
Und dann werden wir die Ausrichtung hier
nach links gehen.
Als könntest du den Unterschied noch nicht wirklich erkennen,
aber ertrage einfach mit mir.
Wir werden das nach links wählen.
Okay, lass uns jetzt weitermachen und Updates.
Jetzt schauen wir uns einfach an, was wir haben.
Sehen Sie sich die Seite an.
Und da gehst du.
Jetzt können Sie sehen
unsere Homepage genau hier diesen speziellen Header hat,
aber dann entwickelt sich weiter, um zu gehen
sagen wir als Beispiel die About-Seite. Sie können sehen,
dass wir diesen Header überhaupt nicht haben.
Wenn es zur Kontaktseite gehen möchte.
Als Beispiel können Sie sehen, dass wir diesen Header nicht haben.
Genau hier
hat die Homepage jetzt
dieses spezielle Handout mit dem schwarzen Hintergrund,
dem Logo und dann den Menüpunkten.
Um das abzurunden, werde ich tatsächlich
ein paar Änderungen vornehmen.
Gehen wir zurück zur Rubrik.
Okay, und ich weiß, dass ich gesagt
dass die Inhaltsbreite 1240 Pixel beträgt,
aber ich habe einige weitere Tests gemacht,
und ich denke, es ist am besten, dass wir mit der vollen Breite gehen.
Also lasst uns vorerst mit voller Breite gehen.
Dann werden wir diese Spalte, die das Logo
trägt, auf 2525% Prozent reduzieren .
Während die Spalte, die die manuellen Elemente enthält, 75% haben wird.
Nehmen wir dann auch eine Änderung am Logo vor.
Ich klicke auf Logo bearbeiten.
Lass uns zum Stil gehen.
Und dann setzen wir dies für die maximale Breite
auf 75%.
Und eine Frage, die Sie vielleicht haben, ist
warum offensichtlich die maximale Breite und nicht die tatsächliche Breite.
Hier ist das Ding.
Wenn Sie die Breite für das Logo festlegen,
das Logo immer diese Breite.
Wir gottlos, von der Bildschirmgröße.
Du arbeitest mit Max-Breite.
Sie sagen im Grunde genommen: Hey,
das Logo sollte diese Breite niemals überschreiten.
Dann in Situationen, in denen die Bildschirmgröße nicht
groß genug ist, dokumentiert die volle Breite des Logos
die Größe der
maximalen Breite ist viel besser für reaktionsschnelles Design.
Und du willst immer reaktionsschnell sein.
Also stellen wir das auf 75 Pixel ein.
Und wenn wir jetzt aktualisieren,
wenn wir uns unseren Header ansehen,
können Sie jetzt sehen, dass
ähnelt, was wir
hier auf der Demo-Website haben.
Das Letzte, was zu tun ist, ist, dass wir
diesen Header für den zweiten Header duplizieren werden.
Also hat er im Grunde das, was wir tun werden.
Okay, ich gehe zurück ins Backend.
Anstatt den zweiten Header für den Rest der Website zu erstellen
,
werden wir einfach hierher kommen und dann sehen Sie
EA-Duplikate oder das
die wesentlichen Atomduplikate.
Ich mache jetzt weiter und dupliziere einfach
den Homepage-Header.
Jetzt sehen Sie Entwürfe Elementor.
Lass uns weitermachen und ich klicke auf Bearbeiten.
Und dann schauen wir uns hier ein paar Änderungen an.
Wir nennen dies den globalen Header.
Sie können ihm einen anderen Namen geben, den Sie wollen,
aber ich nenne dies einen globalen Header.
Und dann genau hier,
pep von Vorlagen, ja, es ist der Header.
Dann ist das Display eingeschaltet.
Wir werden mit der ganzen Website gehen.
Aber um auf der sicheren Seite zu sein,
komme ich hierher und sage „Ausschlussregel hinzufügen“.
Wir sagen, Hey, zeige das hier unten nicht auf der
Homepage an.
Er hat eine bestimmte Seite.
Ich komme hierher und tippe einfach nach Hause ein, um sicherzustellen,
dass dieser Header niemals auf der Homepage angezeigt wird
.
Es wird nur auf der gesamten Website angezeigt.
Und da gehst du.
Also Vorlage auch volle Breite.
Lass uns jetzt weitermachen und auf „Veröffentlichen“ klicken.
Und da gehst du.
Um also wieder hier reinzugehen,
lasst uns diese Seite aktualisieren.
Das ist also der Header für die Homepage.
Aber jetzt sieh dir das an.
Okay, wenn ich auf eine andere Seite gehen wollte,
sagen wir als Beispiel die About-Seite.
Jetzt werden Sie sehen, dass
der doppelte Header nicht angezeigt wird.
Gehen wir auch zur Artikelseite.
Sie können noch einmal sehen, dass der doppelte Header nicht angezeigt wird,
obwohl wir gesagt haben, dass
der doppelte Header auf jeder Seite außer der Homepage angezeigt
wird,
was genau hier vor sich geht.
Und vertrau mir, es hat mehrere Stunden gedauert.
Nur China findet genau heraus
warum das nicht funktioniert hat, aber ich habe es herausgefunden.
Was Sie tun möchten, ist einfach hier zur doppelten Kopfzeile zurückzukehren
.
Dies ist der doppelte Treffer, der jeder erstellt wurde.
Was du tun willst, ist das, okay,
versuche einfach zu initiieren,
lass uns tatsächlich zurück zum Back-End gehen
, damit du nicht verwirrt bist.
Alles klar, von hier
aus klicke einfach auf Bearbeiten mit Elementor.
Bearbeiten Sie mit Elementor.
Und was Sie dann tun werden, ist genau hier,
initiieren Sie einfach jede Art von Veränderung.
Angenommen, Sie fügen die Überschriftenelemente hier hinzu,
zum Beispiel, okay, lassen Sie das dort hinein.
Siehst du jetzt, dass der Update-Button verfügbar ist?
Okay, ich gehe wieder rein und schließe das.
Der springende Punkt hier ist, dass Sie eine Art Änderung an der Kopfzeile vornehmen möchten
eine Art Änderung an der Kopfzeile vornehmen
, damit
dieser Update-Button bergab ausgelöst wird.
Jetzt können wir updaten.
Und jetzt sollte es klappen.
Wenn Sie also aufgefordert werden, hier zu meiner Artikelseite zurückzukehren
und jetzt zu aktualisieren.
Jetzt können Sie sehen, dass der doppelte Header
jetzt zeigt, dass ich zurück zur Homepage gehe,
genau dieselbe Kopfzeile ist.
Ich gehe auf die About Seite.
Und natürlich ist es auch genau derselbe Header.
Genau das sollten Sie tun
, wenn Sie versuchen
Ihre Kopf- und Fußzeilen auf den Duplikaten zu duplizieren.
Gehen Sie einfach mit Elementor in die Bearbeitung,
fügen Sie ein Element hinzu, entfernen Sie dieses Element,
nur um den Update-Button auszulösen.
Aktualisieren.
Und jetzt wird die neue doppelte Kopf - oder Fußzeile
jetzt voll wirksam sein.
Das war's also für das Video, das wir unsere beiden Header erstellt haben.
Danke fürs Zuschauen und wir sehen uns in der nächsten Klasse.