WordPress für Designer: Themes und Layout-Werkzeuge

Hintergrundbild

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Wie sich ein Hintergrundbild einfügen lässt und welche Eigenschaften Cornerstone dafür anbietet, sehen Sie hier.

Transkript

Ich möchte diesem Bereich hier oben ein schickes Hintergrundbild geben. Das ist in dem Fall die Section. Ich klicke auf die Section drauf, um jetzt hier die Section über den Inspector auszuwählen. Dann haben wir hier Hintergrund, Hintergrundbild und an dieser Stelle, klicke ich jetzt, um ein Bild in den Hintergrund zu setzen. Jetzt ist es in dem Fall so, dass wir auf der linken Seite Text haben, das heißt auf der linken Seite sollte auf dem Bild nichts zusehen sein, was das verdeckt. Also hier zum Beispiel, das würde nicht passen. Dass würde auch nicht passen, hier würden wir auch den Server überdecken. Wir können natürlich hier in die Einstellung hinein gehen, und das Bild horizontal spiegeln. Aber das habe ich nicht vor. Ich gehe hier wieder raus. Ich gehe wieder zurück auf meine Seite, und möchte jetzt hier an der Stelle ein anderes Bild auswählen, und zwar dieses hier, bei dem haben wir auf der linken Seite genug Platz. Wie geben hier normalerweise noch Alternativtext an und so weiter aber ich überspringe das jetzt mal. Hier haben wir jetzt das Bild eingefügt. Wir sehen also hier auch eine Vorschau auf das Hintergrundbild. Nun können wir uns noch weitere Eigenschaften anschauen, zum Beispiel die Möglichkeit ein Pattern zu machen, das heißt, wenn man hier zum Beispiel ein kleines Bild hat, kann man dieses kacheln, und somit über den gesamten Hintergrund kacheln, was dann ein nettes Muster ergibt. Hier können wir das Bild Parallax machen, das heißt, dass es beim Scrollen im Prinzip stehen bleibt und der Vordergrund scrollt weg. Dann haben wir hier die Möglichkeit mit dem Margin und Padding zu arbeiten. Das heißt wir können festlegen wie groß der Abstand ist hier oben bis der Text anfängt und genauso auch hier unten. Links und rechts natürlich auch. Hier steht das Ganze jetzt auf 10 %, für oben und für unten. Wenn ich diese Anzahl hier verringere oder vergrößere, ich mache mal 15% daraus, dann haben wir einen viel größeren Abstand. oder wenn ich 5% daraus mache, ist er viel geringer. Wir müssen also einen guten Wert finden, der das Ganze gut aussehen lässt. und mit 10% sieht das eigentlich sehr ordentlich aus. Wir können hier um die gesamte Die sieht man aber kaum. Das ist nur ein Pixel. Ich werde das mal erhöhen auf 5 Pixel, dann sieht man auch hier die Outline. Wir können natürlich die Farbe ändern für diese Outline, aber in unserem Fall möchte ich natürlich keine Border. Wir können hierüber den Text zentrieren, was ich auch nicht vor habe und wir können hier festlegen ob dieser Bereich vielleicht auf dem Smartphone gar nicht angezeigt werden soll, also versteckt werden soll, hier steht Hide. Wenn ich jetzt hier zum Beispiel hin klicke und das Smartphone aktiviere, dann wird in der Smartphoneansicht der Bereich nicht mehr gezeigt. Wenn ich jetzt also hier jetzt einmal hingehe und auf Smartphone wechsle, dann fehlt der komplett. An für sich gefällt mir das Ergebnis schon sehr gut, was mir noch nicht gefällt, ist dieser Gap hier, den möchte ich entfernen. Ich wähle ihn also aus, und klicke hier Delete. Dann haben wir jetzt hier einen leeren Bereich, eine leere Column, eine leere Spalte, aber das muss uns hier nicht weiter stören. Diese bleibt einfach an der Stelle leer. Und wir haben in dem Fall ein schönes Ergebnis, was wir uns auch anschauen wollen, in dem wir hier einfach mal sagen View Page in einem neuen Tab. Hier sehen wir nichts, denn ich habe einen Fehler gemacht, ich muss natürlich speichern. Das passiert mir sehr häufig, denn der Button ist hier sehr klein versteckt. Man sollte natürlich immer daran denken, auf Speichern zu klicken, bevor man sich das jetzt in einem neuen Tab anschaut. Hier haben wir jetzt das Ergebnis. Wir haben also gesehen, dass man hier ganz einfach ein Hintergrundbild in die gesamte Section legen kann, um somit die Webseite optisch noch weiter aufzuwerten.

WordPress für Designer: Themes und Layout-Werkzeuge

Erstellen Sie Ihre Wordpress-Website mit X-Themes und Cornerstone – ganz ohne Quellcode

5 Std. 8 min (56 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!