Jetzt, da wir die Kopf- und Fußzeilen erstellt haben,
ist es jetzt an der Zeit, unsere Homepage zu erstellen.
Und der allererste Abschnitt, den wir
bauen werden, wird das Banner sein, das Sie sehen können
. Wir haben das Hintergrundbild
mit den tropischen Bäumen,
Palmen und dem Strand.
Und dann natürlich die Texte,
wir reisen mit Abenteuer und dann
der Button, auf dem unser Buch steht, jetzt deine Reise.
Natürlich hätten Sie auch bemerkt, dass
der Hintergrund grundsätzlich in den Header einfügt.
Wie machen wir das?
Nun, wir werden fortfahren
und die Homepage bearbeiten.
Ich sage Edit with Elementor.
Genau hier.
Sie können feststellen, dass wir im Grunde zwei Spalten haben,
eine oben, die
enthält, wo gereist ist ist, bedeutet Abenteuer.
Und dann haben wir eine weitere Spalte
die das Button-Buch enthält, Ihre Reise.
Was ich hier einfach machen werde, ist das.
Wir haben hier einen Überschriftentext,
aber falls Sie nichts sehen,
ziehen Sie einfach das Überschriftenelement
und legen Sie es in Ihr Feld hier ab.
Und ich werde einfach sagen,
wo wir reisen trifft auf Abenteuer.
Das ist der wichtigste Slogan für die All Website.
Und ich mache das eins zu eins.
Aber wir werden einige Änderungen an
der eigentlichen Topographie selbst vornehmen.
Also lasst uns zum Stil gehen.
Und für die Typografie hier drin
werde ich die Transformation in Großbuchstaben umwandeln.
Und wir werden auch das Gewicht 900 machen
, nur um es sehr, sehr dick zu machen.
Und dann wird der Stil es auch kursiv machen.
Das war's vorerst für den Text.
Lassen Sie uns jetzt weitermachen und das Hintergrundbild für diesen Abschnitt hinzufügen
.
Also klicke ich hier auf den Button „ Abschnitt bearbeiten“.
Die Inhaltsbreite, wir behalten dieses eine Feld bei,
aber dann machen wir die Breite hier 1240 Pixel.
Und unsere Checkliste befürwortet die Höhe,
wir werden sie auf eine Mindesthöhe von tausend Pixeln einstellen
, weil wir wirklich so viel von diesem Hintergrundbild wie möglich zeigen wollten
.
Also lass mich das 1 Tausend machen.
Und jetzt gehen wir zum
Stil, Hintergrundtyp Klassiker.
Und ich wähle das Bild aus.
Und es wird so sein, ich entschuldige mich.
Eigentlich haben Sie vorerst zwei separate hier drin.
Ich werde die Frau löschen, die benutzt wird,
wir werden die große Version verwenden.
Dieser ist nur 859 Pixel hoch,
aber dieser ist 1274.
Also werden wir von diesem Gebrauch machen.
Also füge ich das ein.
Und da gehst du.
Lassen Sie mich Ihnen nun einige Tricks zur Positionierung Ihres Hintergrundbildes zeigen
.
Sie haben verschiedene Arten von
Positionen in Mitte, Mitte,
Mitte links, Mitte, rechts und so weiter.
Es liegt also wirklich an Ihnen, die idealen Positionswinkel für Ihr Hintergrundbild zu wählen
.
Meiner hier, den ich gewählt habe , wird unten in der Mitte sein.
Hier sieht man tatsächlich die Palmen,
den Strand.
Es ist also bekannt, dass die beste Position ist.
Und dann haben Sie für die Größe
mehrere Möglichkeiten hier drin
ich gehe mit Cava.
Der Unterschied zwischen Kovach und enthalten ist
die einschließbare Darstellung des gesamten Bildes.
Inhalt ist nicht immer die beste Option
, denn wenn Sie das gesamte Bild anzeigen
das Bild nicht groß genug für den gesamten Bildschirm ist,
wird es wiederholt studiert.
Sie können hier im Hintergrund sehen, dass sich das Bild irgendwie
wieder wiederholt.
Aber mit COVID sagen Sie im Grunde
genommen: Hey,
versuchen Sie sicherzustellen, dass das Bild den
gesamten Bildschirm abdeckt.
Deshalb habe ich mich entschieden, hier behandelt zu werden,
aber auch
ein Hintergrund-Overlay hinzuzufügen. Also sieh dir das noch einmal an.
Ich gehe wieder auf
Overlay. Ich klicke da rein.
Ich will, ich werde es tun, dass ich wie gewohnt zum Hintergrundtyp gehe
,
wir wählen ein schwarzes Overlay.
Und dann ist die Deckkraft hier drin,
ich bin tatsächlich mit der 0.23 gegangen.
Natürlich kannst du das ändern
wenn du Zope und 23 nicht benutzen willst .
Aber jetzt gehen wir zurück zu den eigentlichen Texten.
Lass uns wieder hier rein gehen.
Und natürlich, die Textfarbe,
werden wir diese weiß machen.
Und da ist es, okay.
Wir werden auch die Größe ändern.
Also gehe ich bis zu 120 Pixeln.
Und wieder ist dies ein völlig subjektives.
Du kannst deine etwas größer machen,
ein bisschen kleiner.
Aber wir werden auch die Ausrichtung ändern.
Gehen wir zum Inhalt. Wir werden
es an der Mitte ausrichten.
Und da ist es, wir reisen uns letztendlich treffen.
Und was wir jetzt tun werden, wäre
, unseren Button hinzuzufügen.
Ich ziehe den Button genau hier,
Element und ich springe ihn direkt unter die Überschrift.
Natürlich sagen wir genau hier,
buchen Sie Ihre Reise. Jetzt.
Natürlich würden Sie hier den Link zu einer Seite oder einer XNOR-Website wie einem Golden oder Booking.com hinzufügen
den Link zu einer Seite oder einer
.
Wenn ich sieben wäre, mach das und wir könnten einfach „ book kin dot com“ sagen
.
Lass uns das einfach machen. Wir können .com nur zum Spaß daran haben.
Und natürlich richten wir es an der Mitte aus.
Die Größe hier wird mittel sein.
Fügen wir auch ein Icon hinzu.
Okay, also wähle ich die Icon-Bibliothek hier aus.
Lass uns nach einem Flugzeug suchen.
Ich werde viel wählen, meinen Bäreneinsatz.
Sie haben die Möglichkeit, die Symbolposition nach oder vor dem Text auf zu ändern
.
Das wollen wir schon mal weitermachen.
Und dann der Icon-Abstand.
Sie können auch einen Abstand zwischen dem Symbol und dem Bild hinzufügen
.
Also werde ich mit Hilfe gehen
, nur um es ein wenig Abstand zu geben.
Jetzt werden wir zum Stil übergehen.
Hier werden wir einige wichtige Änderungen vornehmen.
Die erste, die wir hier machen
werden, wäre die Topographie,
die Gewichte der Texte.
Es wird 600 geben und dann in Großbuchstaben umwandeln.
Da dies ein Link ist,
würden Sie feststellen, dass es die unterstreichende Idee gibt,
aber das wollen wir nicht.
Also gehe ich zu Style, ich gehe, ich gehe
zur Deklaration und wähle dann keine aus.
Wir wollen keinen der Texte in einem der
zugrunde liegenden Texte da drin.
Alles klar, Typografie, Farbe, Text, Farbe genau hier.
Wir werden mit dem Weißen gehen.
In Ordnung?
Dann haben Sie für den Button selbst hier
den Hintergrundtyp
und klicken wir dort hinein.
Und wir werden mit klassischer Farbe hier gehen
, wäre Orange.
Jetzt setzen wir sowohl eine Grenze als auch eine solide.
Was wir dann für die Grenze tun werden
, ist, dass wir auch die Randfarbe in die orange Farbe ändern werden
.
Und dann fügen wir einen Randradius
nur um die Kreise zu machen,
die Kanten nur ein bisschen kreisförmig.
Wir werden mit zehn gehen,
tut mir leid, wir werden hier mit 12 Pixeln fahren.
Und das war's.
Ich werde jetzt weitermachen und Updates.
Und mal sehen, wie es aussieht.
Gehen wir zum Dashboard.
Klicken wir hier rein, gehen zur Homepage
und da ist es.
also letztendlich gereist
haben wir natürlich den Button
hier, der auf unser booking.com verlinken würde.
Aber wie erreichen wir das dann?
Wo man den Hintergrund hat, der sich grundsätzlich
in das Head Up Deutschland einfügt.
Ganz nächstes Video, in dem ich dir zeigen werde, wie das geht.