Okay, also fangen wir an, mit Elementen zu arbeiten, die durch den Wiederaufbau unseres Headers genehmigt
wurden.
Und ich zeige Ihnen, wie Vorlagen
mit Elementen arbeiten, professionell sind.
Das erste, was ich mache, ist, dass ich zum Backend gehe
und den elementaren Kopf- und Fußzeilen-Builder
deaktiviere.
brauchen wir nicht mehr.
Also deaktiviere ich und lass uns einfach einen Blick auf
den nicht existierenden Header werfen,
wir nicht mehr haben, und natürlich keine Fußzeile.
Jetzt können Sie immer noch die Ungeschicke einer Schaufel sehen
die Ungeschicke einer Schaufel
und dann die Unternehmenstexte hier drin,
das ist das Hallo Thema
diese Lebensmittel zeigt, sind für uns.
Alles klar, lass uns wieder reingehen.
Und sobald Sie Elementor Pro installiert und aktiviert haben,
sehen Sie genau hier, wo Sie
eine Vorlage für das LM-Elementar haben,
Sie sehen den Theme-Builder.
Also mach weiter, klicke hier rein.
Und jetzt können Sie die verschiedenen Arten von Vorlagen sehen
, die wir erstellen können.
Wir bauen den Header aus.
Also klicke ich auf Plus, um den Header hinzuzufügen.
Das Gute an Elementor Pro
ist, dass Sie Zugriff auf eine Vielzahl von Vorlagen haben
, die Sie verwenden können.
Du kannst sie genau hier sehen.
Verschiedene Stile für den Header.
Sie können einige sehen, wissen Sie, Sie haben
das Logo auf der linken Seite, die
Social-Media-Symbole auf der rechten Seite,
das Hauptmenü unten.
So können Sie einfach eine dieser Vorlagen einfügen
, die genau zu der gewünschten Art von Design passt.
Aber ich baue uns einfach
von Grund auf neu, weil ich
dir zeigen möchte, wie das
mit dem Elementar pro Elemente funktioniert.
Also schließe ich das.
Wir werden einfach wie zuvor wieder aufbauen.
Ich komme sofort her
erstelle unsere beiden Kolumnen. Abschnitt.
Eine davon wird es etwa 30% geben, der andere etwa 70%.
Und wenn ich jetzt zum elementaren Backend gehe,
und jetzt kannst du sehen, dass wir das Site-Logo genau hier haben
.
Also ziehe ich das und lasse es hinein.
Eine andere Sache ist, dass Sie möglicherweise eine Änderung mit dem elemental Pro-Logo-Element bemerken
.
Das ist die Tatsache, dass Sie tatsächlich Zugang zu den Höhen haben
.
Das Logo auf dem Stil mit dem
Logo-Element, das vom elementaren Header- und Footer Builder-Plug-In bereitgestellt
wird.
Sie haben diese Optionen nicht,
sodass Sie die Höhe des Logos von hier aus steuern
können.
Aber das werden wir noch nicht anfassen.
Ich gehe wieder zum Back-End,
wähle die Navigationsmenü-Elemente genau hier
lass es hier rein.
Und natürlich wird das Hauptmenü wählen.
Richten wir uns an den richtigen großen Punkten aus.
Wir stellen das auf Handy ein.
Denken Sie daran, lasst uns unsere Typografie gestalten.
Wir machen das in Großbuchstaben.
Kehren wir zur Hauptsitzung selbst zurück, die
beide Spalten enthält.
Lass es uns in voller Breite machen.
Für das Logo füge ich einfach
einen schwarzen Hintergrund hinzu.
So können wir zumindest vorübergehend das Logo sehen.
Okay, so viel zu groß.
Lasst uns wieder hier rein gehen.
Für die maximale Breite wählen wir einfach 75% aus,
genau wie zuvor.
Wissen Sie, erstickt, um die Höhe in diesem Fall zu verwenden
, noch eine Änderung.
Richten wir die Menüpunkte vertikal
richten sie an der Mitte aus.
Und da gehst du.
Und natürlich auch die Farbe.
Das hab ich vergessen.
Lasst uns die Farbe ändern. Tickt Clo2 primär.
Und das ist das.
Jetzt sieh dir das an.
Hier unten hast du veröffentlicht.
Wenn Sie auf Veröffentlichen klicken,
sind Elemente hier Pool und ich sage: hey,
wo möchten Sie diese bestimmte Vorlage anzeigen?
Wir werden die Bedingung hinzufügen,
nicht das Antazida, weil
dies für die Homepage sein wird.
Ich komme sofort her und wähle Singular.
Und dann wird für Singlets sagen,
okay, alle einzelnen Seiten, nein,
wollten sich speziell auf der Titelseite teilen.
Also wähle ich das aus.
Und das ist, ich werde weitermachen
und ich werde einfach speichern und schließen.
Und das war's.
Lass uns jetzt weitermachen und aktualisieren.
Und ich zeige dir etwas sehr, sehr Interessantes.
In Ordnung, lass mich eine harte Aktualisierung machen.
Also hier ist eine dünnere Linie.
Sie können sehen, dass
die Menüpunkte genau hier angezeigt werden.
Oh, übrigens, der Hover-Effekt, den er sehen kann,
der Bindestrich, der auf dem Altersmenüpunkt sichtbar
ist, der standardmäßig von Elementar-Pool, Menü und Menüelement bereitgestellt
wird.
So können Sie das beim Hover-Effekt ändern, wenn Sie den Manager hier langweilen möchten
den Manager hier langweilen
, ist, dass wir das Logo nicht mehr sehen.
Wir können die Menüpunkte sehen, aber wir sehen das Logo nicht.
Was passiert hier?
Hier möchte ich Ihnen das Konzept des Z-Index vorstellen
.
Jetzt lasst uns wieder hier rein gehen.
Zunächst verschieben wir
die Hintergrundfarbe für den Header.
Wir brauchten es nicht mehr.
Aber sieh dir das an.
Ich gehe rüber zu Fortgeschrittenen.
Genau hier hast du das.
Option aber sehr, sehr wichtig,
sehr mächtig genannt Z-Index.
Ich gebe diesem einen Wert von
zwei Updates. Lasst uns wieder hier rein gehen.
Machen wir eine sehr harte Aktualisierung.
Und einfach so.
Jetzt können Sie sehen, dass das Logo erscheint.
Vorstand.
Halte eine Sekunde fest.
Was genau ist gerade passiert?
Sehen Sie sich diesen Z-Indexwert genau hier an.
Wann immer Sie ein Element haben,
ein Abschnitt, der einen anderen Abschnitt überlappt,
möchten Sie vielleicht Elemental mitteilen können
, welches dieser Elemente Sie
zuerst anzeigen möchten, was nicht der Fall ist.
Du willst das andere vor den anderen bringen?
In diesem Fall überlappt gerade
das Binärbild unseren Header.
Wir möchten, dass der Header beeinflusst wird, damit wir das Logo und das Hauptmenü sehen können
.
Daher müssen Sie dem Element, vor dem Sie erscheinen möchten, eine höhere Z-Indexzahl geben
eine höhere Z-Indexzahl
.
Da wir dem Header den Z-Indexwert von zwei gegeben haben.
Lassen Sie mich tatsächlich in die Sektion gehen, die unsere Banane hält.
Lassen Sie mich also mit Elementar bearbeiten.
Gehen wir hier zum Navigator-Bereich, fortgeschritten.
Sie können genau hier sehen, dass wir keinen Wert für den Z-Index für den Abschnitt haben
, der das Banner enthält.
Aber wenn ich jetzt hier reinkomme
und ich ihm einen Wert von drei gebe.
Jetzt können Sie sehen, dass wir das Logo nicht mehr sehen,
wir sehen auch das Hauptmenü nicht mehr.
liegt daran, dass der Xin-Indexwert
dieses Abschnitts, der
die Banane enthält, jetzt größer als zwei ist.
Aber wenn ich es jetzt gebe, siehst du, dass wir das Hauptmenü und das Logo haben
.
Genau so funktioniert der Z-Index.
Nun, eine Frage, die Sie vielleicht haben, eine
sehr gute Frage ist,
Alex, halten Sie eine Sekunde fest.
Bevor wir den Wert dieses Index von zwei an den Header gegeben
haben.
Wie können wir das Hauptmenü immer noch lösen?
Aber wir haben das Logo nicht gesehen.
Ich werde zu 100% ehrlich zu dir sein.
Ich bin mir nicht genau sicher, warum das passiert ist.
Ich schätze, vielleicht gibt es einen Code
in Elementen , der dem Hauptmenü immer
Priorität einräumt, um es immer anzuzeigen.
Auch hier könnte es etwas sehr, sehr
Einfaches sein, das ich einfach vermisse.
Ich bin mir nicht ganz sicher.
Entschuldige dich dafür, aber ich möchte ehrlich zu dir sein.
Aber nimm es einfach für das, was es ist.
Wann immer Sie eine Situation einführen möchten, in der
ein Element das andere überlappt
und Sie möchten, dass
automatischen Elemente hinter der Show vorne
einfach einen höheren Z-Indexwert geben.
Eine Sache, die Sie vielleicht bemerkt haben, ist
der plötzliche Leerraum
der hier ganz oben nicht erscheint.
Und das passiert, weil
wir in vielen Fällen standardmäßig elementar ein Muster von zehn Pixeln um die Elemente hinzufügen.
in vielen Fällen standardmäßig elementar
Eine Möglichkeit, diese Art von Problem zu umgehen,
ist es einfach, den Abschnitt zu bearbeiten
, der in diesem Fall den Leerraum hat
, es ist mein Header.
Lassen Sie mich also weitermachen und den Elementar-Header bearbeiten.
Ich werde selbst zu diesem Abschnitt gehen.
Bearbeiten Sie also den Abschnitt und laden Sie dann
hier ein, wo Sie die Spaltenlücke haben.
Ich sage keine Lücke,
überhaupt keine Lücke.
Lassen Sie uns im Grunde aktualisieren, indem wir keine Lücke sagen.
Wir sagen, Hey, wir wollen nirgends irgendwelche Muster.
Jetzt wird das vom Leerzeichen abgelesen.
Aber jetzt beachte das, weil wir Nein gesagt haben, überhaupt keine Lücken.
Jetzt hat die Spalte, die ein Logo enthält, kein Muster mehr
zwischen dem Logo und dem oberen Rand unseres Bildschirms.
Gehe also einfach zu der Spalte mit dem Logo.
Gehen Sie genau hier zum erweiterten Muster,
wir sagen es nur, zehn Pixel Polsterung oben.
Updates, die das Problem oder die Vorfälle lösen.
Dies sind also einige der sehr kleinen
nervigen Probleme, auf die Sie stoßen könnten
, wenn Sie Elementar verwenden und wie Sie sie umgehen können.
Aber fast fertig.
Lassen Sie uns lieber den mobilen Header für unseren Header für die Titelseite erstellen
.
Und ist genau das Gleiche wie zuvor.
Wir werden jetzt hier reinkommen
den gesamten Abschnitt duplizieren.
Und kommen wir raus, komm hier runter zum
Bearbeitungsbereich für mobile Header.
Wir werden die klassische Farbe Schwarz stylen.
Und was brauchen wir dann? Was müssen wir sonst noch tun?
Wir müssen in den Responsive-Modus wechseln.
Gehe zum Handy.
Und jetzt genau hier,
editiere die Spalte, wir sagen 50%.
Machen Sie dasselbe für die Spalte, die das Hauptmenü enthält.
Und dann sag 50%.
Wir können das Menü hier rechts ausgerichtet bearbeiten
.
Vielleicht mach es ein bisschen größer.
Also lasst uns zum Stil gehen.
Komm hier runter zum Toggle-Button.
Die Größe, mach es ein bisschen groß.
Auch für das Logo.
Gehe zu Stil, maximale Breite, 100%.
Ja, wir müssen auch die Optionen zum Ausblenden oder Ausblenden machen
, also fortgeschritten.
Gehen wir zum Responsive.
Für diesen Abschnitt und diesen Abschnitt, der das
Logo- und Nachfragemenü enthält.
Wir gehen hier zu
Advanced und reagieren dann.
Ich sage „An Deck verstecken“, „Stop“,
Auf dem Tablet verstecken“, aber dann auf dem Handy anzeigen.
Gehen wir nun zur alten ursprünglichen Kopfzeile
bearbeiten Sie diesen Abschnitt.
Gehe zu Erweitert, gehe zu responsive.
Versteck dich einfach auf dem Handy und das war's.
Also lasst uns weitermachen und aktualisieren.
Hoffentlich habe ich nichts vergessen
, was hier zurückgekommen ist.
Aktualisieren Sie die Seite.
Mal sehen, was wir haben.
Okay, so originell voraus oder ich wage es.
Und das ist schräge Sicht, die gut aussieht.
Und dann wird das jetzt die mobile Ansicht sein.
Und David ist also genau so, wie man genau dasselbe auf dem Elementor-Produkt macht
, das wir
mit dem Elementor Kopf - und Fußzeile gemacht haben.
Eine letzte Sache, bevor ich dieses Video schließe,
lass uns zum Back-End gehen.
Jetzt auf den Vorlagen.
Es tut mir leid, dass Sie unter dem Theme-Builder
anstelle unserer Vorlagen in einem Theme-Builder hier den neuen Header sehen, den Sie erstellt haben.
anstelle unserer Vorlagen in einem Theme-Builder hier den neuen Header sehen,
Sie können nach innen klicken, um es zu bearbeiten.
Noch einmal.
Wenn Sie dann den Namen ändern möchten,
ist es sehr, sehr einfach.
Du kommst hier runter zum Einstellungen-Button
und dann direkt hier
können wir diesen den Home-Header nennen.
Wir können es zu Hause, zu Hause, den Home-Header im Grunde nennen
.
Und dann können wir dem Auftragskopf den Namen Global geben.
Wenn Sie die Bedingungen für diese Ebene ändern möchten,
möchten Sie den Kopf oder vielleicht denselben Header auf einer anderen Seite verwenden
.
Hier unten haben Sie die Speicheroptionen, die Sie dort hineinklicken.
Jetzt haben Sie hier Zugriff auf das Display.
Unsere Option für Bedingungen.
Hier können Sie jetzt hineingehen,
jetzt wechseln Sie vielleicht zu einer anderen Seite und so weiter.
Und das ist es im Grunde genommen, um
den Homepage-Header sowohl auf den Desktop - als auch auf mobilen Versionen mit Elementor Pro zu erstellen
sowohl auf den Desktop - als auch auf mobilen Versionen
.
Danke fürs Zuschauen.
Wir sehen uns in der nächsten Klasse.