Im vorherigen Video haben wir erfolgreich
unsere beiden Header erstellt,
einen für die Homepage
und den anderen für den Rest der Website.
Aber jetzt werden wir unseren Global Footer erstellen.
Und die gute Nachricht hier ist, dass wir nur eine der Footer erstellen müssen
, und
genau das versuchen wir zu erstellen.
Wir werden dieses Bild hier auf der linken Seite haben
und dann ein paar Kontaktinformationen, Social-Media-Symbole.
Und dann ist die Seite grundsätzlich hier unten urheberrechtlich geschützt
.
Lass uns weitermachen und das schnell machen.
Ich klicke auf „Neu hinzufügen“.
Und wir nennen dies die globale Fußzeile.
Wählen Sie die Option hier ist Footer
und natürlich angezeigt , da die gesamte Website.
Und wir ändern die Vorlage auf volle Breite.
Und da sind wir los.
Lass uns weitermachen Veröffentlichen.
Und jetzt lasst uns mit Elementor bearbeiten.
Jetzt möchte ich, dass Sie sehr genau auf einen massiven Unterschied zwischen der Kopf- und Fußzeile und der Kopfzeile achten
auf einen massiven Unterschied
zwischen der Kopf- und Fußzeile und
, die wir hier haben.
Wir haben im Grunde nur zwei Spalten.
Derjenige auf der linken Seite, der das Logo hält,
das auf der rechten Seite mit dem Code, das Hauptmenü.
Beachten Sie jedoch für die Fußzeile,
dass es ein bisschen anders ist.
Ja, wir haben immer noch zwei Spalten,
denen eine dieses Bild enthält,
die andere enthält die Kontaktinformationen.
Aber hier unten
ist dieser Copyright-Text tatsächlich eine dritte Spalte.
Es ist nicht unter dieser ersten Kolumne hier.
Es ist eigentlich eine separate Spalte für sich allein.
Um diese Art von mehrspaltigen Abschnitt zu erstellen,
verwenden wir
ein neues Element, das als E-Mail-Abschnitt in der Umfrage bezeichnet wird.
Es ist eigentlich das allererste Element, das Sie haben,
dieses hier in einem Abschnitt.
Ich klicke auf Drag und lege es dann hinein.
Okay, also zuerst das Wichtigste ist,
dass ich den allerersten Abschnitt bearbeiten werde.
Wenn Sie Probleme haben, auf den Abschnitt der Eltern zu
klicken,
können Sie Ihren Navigator grundsätzlich immer genau hier verwenden und Sie können genau hier
sehen , dass wir diese Abschnittsspalte und dann Kreuzung haben
.
Also klicke ich jetzt auf den Abschnitt.
Wir werden die Inhaltsbreite genau hier auf volle Breite ändern
.
Und dann Spalten Lücke.
Wir werden keine Lücke wählen.
Der Grund dafür ist, dass Sie, wenn Sie genau aufpassen,
jetzt sehen können, wie Sie das Bild haben,
es gibt keinen Platz,
es gibt keinerlei Polsterränder.
Das Bild befindet sich direkt
dort am unteren Rand.
Dort wählen wir hier unsere Knotenlücke.
Wir wollen überhaupt keine Lücken haben.
Dasselbe gilt auch für den inneren Abschnitt.
Aber bevor wir da reinspringen,
fügen wir eine Hintergrundfarbe hinzu.
Ich gehe zum Hintergrundetyp.
Und natürlich werden wir uns entscheiden, dass sie schwarz sind.
Also werde ich einen schwarzen Hintergrund für die Fußzeile haben.
Als nächstes wird jetzt die Ina-Abschnitte sein.
Ich klicke hier von der Navigation nach wieder auf den inneren Bereich
,
wir werden die volle Breite erreichen.
Und dann Spalten, Spalten Lücke hier.
Wir werden auch keine Lücke sagen.
Okay, genial.
Lassen Sie uns nun
die allererste Spalte hier behandeln,
die unser Image haben wird.
Also lasse ich das Bildelement dort drin fallen.
Wähle dieses Bild gleich hier aus.
Und falls Sie sich fragen, dass dies tatsächlich in Peru ist.
Es ist ein Ort namens Horeca Kina oder wer ist Cocina.
Ich bin mir nicht genau sicher, wie es auf Finanzen basiert,
im Grunde wie ein Wüstengebiet.
Sie können Soundboard machen und so weiter.
Ziemlich toller Ort zum Auschecken.
Und ich werde es zum Narren umstellen.
Aber dann ist hier der dünner, oder?
Wir werden die Spaltenbreiten ändern.
Wir machen die erste Kolumne hier drin.
Wir werden es tatsächlich ein bisschen breiter machen.
Wir werden also bis zu 63 Pixel gehen,
eigentlich 63%, also 63% und dann 37% für die zweite Spalte.
Aber wir werden das Bild ändern.
Das Bild ist viel zu groß.
Also lasst uns weitermachen und das Bild bearbeiten.
Und dann werden wir hier rüber gehen, um zu
stylen und sind hier,
ich werde 450 Pixel wählen.
Es ist also fast groß genug und breit genug.
Okay, das ist das Bild genau dort.
Jetzt schließe ich gerade den Navigator.
Für die zweite Spalte
fügen wir eine Reihe verschiedener Elemente hinzu.
Das allererste hier wäre das Überschriftenelement,
und dieses wird unsere Kontakte sein.
Ich gebe alles in Großbuchstaben ein. Kontakt.
Es wird ein H2 sein.
Für den Stil der Weisheit.
Wir gehen zur Textfarbe
und wählen einfach Primär aus.
Jetzt wählen wir eine andere Überschrift aus.
Schon wieder.
Ich werde es direkt unter den Kontakt fallen lassen
.
Dieser wird ein Telefon sein.
Wieder Großbuchstaben an Telefon.
Wir werden diesen jedoch ein Alter von drei Jahren machen.
Eigentlich machen wir es zu einem H4.
Wir werden es zu einem H4 machen
und wir werden einige Informationen hinzufügen.
Was ich hier machen werde, ist, dass ich
einfach mit der rechten Maustaste klicken und dann einfach dupliziere.
Und jetzt machen wir das ein Alter von fünf Jahren.
Die tatsächliche Telefonnummer wird eine h5 sein.
Ändern wir also die Zahl hier auf
090 Leerzeichen 645, Raum 3417.
Das wird die Telefonnummer sein.
Und ich gehe zurück zu Style und Topografie.
Lasst uns tatsächlich Texte wählen.
Ich bevorzuge dieses Textmuster,
also wählen wir dieses aus.
Dann duplizieren wir auch das Telefon.
Ziehen Sie es wieder unter der Telefonnummer hierher
.
Wir werden auch die Telefonnummer selbst duplizieren
.
Okay, und ziehen Sie dann das NIF-Telefon an.
Nun, ups, tut mir leid, das ist den ganzen Weg da oben gegangen.
Bringen wir es wieder hier runter.
Okay, jetzt bearbeiten wir das Telefon,
das zweite Telefon genau hier.
Wir ändern das in E-Mail.
So läuft man im Grunde klug.
Duplizieren Sie einfach, wann immer Sie
können, und nehmen Sie einfach die notwendigen Änderungen vor.
Jetzt bearbeiten wir die Telefonnummer.
Wir werden die E-Mail ändern.
Meine E-Mail ist Alex.
Pass-Ports werden sieht nicht richtig aus.
Alex bei Passport travel.com.
Okay. Jep. Das ist richtig.
Und nicht zuletzt
haben wir eine Adresse.
Lassen Sie uns auch die E-Mail duplizieren
noch einmal hinzufügen.
Lasst uns ziehen, lassen Sie das hier rein.
Ändern Sie auch die E-Mail.
IP-Adresse.
Für die eigentliche Adresse
verwenden wir einen Texteditor im Gegensatz zu einem ausgeblendeten,
da es mehrere Textzeilen geben wird, die den Texteditor direkt dort löschen werden
.
Ich habe hier eine sehr interessierte Adresse.
Ich weiß nicht, ob das eigentlich eine echte Adresse ist
. Ich weiß es nicht mehr.
Aber es passt in R2, Emile Zola.
Jetzt drücke ich die Umschalttaste, nicht nur gegen die Eingabetaste,
denn wenn Sie die Eingabetaste drücken, verwenden Sie
,
die Umschalttaste und geben Sie dann die Eingabetaste ein.
Sie haben also einen einzigen Zeilenabstand.
Und jetzt tippe ich noch einmal 609002, Leon,
Shift Enter ein.
Und dann tippen wir ganz in Frankreich
und wir werden zur Style-Typografie übergehen.
Wir werden mit SMS gehen.
Und natürlich wird die Textfarbe primär sein.
Und da gehst du.
Und zu guter Letzt
werden wir unsere Social-Media-Icons haben.
Sehr, sehr, sehr wichtig.
Die sozialen Medien werden hier unten im General sein.
Lassen Sie uns ein Social Media hinzufügen.
Und natürlich werden wir für Facebook
die Farbe von effizientem Code zu Custom ändern
.
Die Grundfarbe hier wäre Weiß,
die Sekundärfarbe wäre schwarz.
Grundsätzlich haben Sie den weißen Hintergrund und dann
wird das eigentliche Symbol selbst schwarz sein.
Wenn dies eine echte Website ist, die Sie erstellen,
würden Sie hier den Link zu Ihrer Facebook-Seite hinzufügen
.
Das ist für Facebook.
Lassen Sie uns genau das Gleiche auch für Twitter tun.
Warum wird es die Parameterfarbe
Schwarz als Sekundärfarbe sein.
Das letzte Banale ist YouTube oder Fuchsia Color Kostüm.
Die Primärfarbe ist weiß,
sekundäre Doppelpunkt ist schwarz.
Und dann die Form hier,
wir werden ihre Form ändern, um Kreis,
rechts, und dann Ausrichtung,
ich werde sie tatsächlich links ausrichten.
Wir sind fast da.
Beachten Sie dann jedoch, dass es einen gewissen Abstand gibt,
die tatsächlichen Kontaktinformationen und dann das Bild.
Was Sie hier tun werden
ist, dass wir direkt hier zu der Spalte gehen
, die
all diese Kontaktinformationen enthält,
klicken Sie dort hinein.
Gehen Sie zuerst über, Vertikal ausrichten,
lassen Sie uns zur Mitte ausrichten.
Dann geh zu Fortgeschritten
und dann hast du schließlich Padding.
Ich werde diese Werte miteinander aufheben
, weil
die Sache dabei standardmäßig ist,
egal welchen Wert Sie Ihrem Padding hinzufügen,
oben, rechts, unten oder links.
Es wird einen Kurs der restlichen drei Seiten duplizieren.
Wir wollen das also nicht,
wir möchten nur eine Padding auf einer Seite hinzufügen.
Also klicke ich hier auf diese Schaltfläche, um
die Verknüpfung der Werte aufzuheben, für den Fall, dass Sie es nicht wissen,
Pattern ist im Grunde eine Möglichkeit, Platz zwischen Ihrem Inhalt und seiner Grenze zu schaffen
.
Wie Sie sehen können, fügen wir links eine Polsterung hinzu und sehen schon viel besser aus.
Sie sehen können, fügen wir links eine Polsterung
Und ich gehe bis zu 40 Pixel.
Wir sind fast da.
Einer von ihnen, den wir gerade hinzufügen werden, werden die
Copyright-Texte sein.
Also scrolle ich den ganzen Weg hier runter.
Genau hier unter deiner elementaren Kopf- und Fußzeile
siehst du Copyright-Texte.
Klicken Sie auf Ziehen.
Und ich werde sehr, sehr vorsichtig sein.
Wir lassen es nicht in der ersten Spalte fallen
, die das Bild enthält.
Wir lassen es in eine separate Klinik fallen, die als blaue Linie betrachtet wird
, was das bedeutet, okay.
Dies wird eine separate Spalte sein.
Beachten Sie jetzt , dass sich die BlueLine
nur unter dem Bild unter der Spalte befindet,
die das Bild enthält.
Aber wenn ich meine Maus jetzt nur ein bisschen weiter
nach unten
sieht man die blaue Linie, die sich über beide Spalten erstreckt.
Jetzt werde ich den Copyright-Text dort ablegen.
Und da ist es.
Die Textfarbe hier drin wird offensichtlich primäre Typografie sein.
Wir werden mit Text gehen, der an der Mitte ausgerichtet ist.
Und wir werden tatsächlich zur Typografie übergehen
, ein Gewinn.
Und lassen Sie uns das nur ein
bisschen kleiner machen als sonst.
Ich denke, 16 Pixel sind ungefähr richtig.
Aber wir möchten auch etwas Polsterung hinzufügen.
Lasst uns also zu Fortgeschritten gehen.
Auch hier werden wir die Verknüpfung der Werte aufheben.
Wir werden auch für die unteren zehn Pixel eine Polsterung von 20 Pixeln für die obersten zehn Pixel hinzufügen
.
Wir haben ziemlich viel getan.
Lass uns jetzt weitermachen und Updates.
Mal sehen, wie es aussieht.
Also gehe ich hier rüber und aktualisiere die Seite.
Und da gehst du.
Das ist unsere Fußzeile genau dort.
Jetzt weiß ich, dass Sie hier unten Leerzeichen sehen können,
aber das liegt einfach daran, dass wir noch keinen Inhalt auf der Homepage haben
.
Deshalb hast du diesen Leerraum.
Ich habe der About-Seite bereits einige Inhalte hinzugefügt.
So sieht es eher so aus, wie es jetzt aussehen wird.
Sie können sehen, dass kein Leerzeichen mehr auf einem int vorhanden ist
, da wir tatsächlich
etwas Inhalt auf der Seite haben, aber da ist er.
Wir haben jetzt unsere Fußzeile
mit dem Bild aus Peru, urheberrechtlichen Texten sowie einigen Kontaktinformationen gut ausgebaut
.
Danke fürs Zuschauen, und natürlich
sehen wir uns in der nächsten Klasse.