In diesem Teil des Concrete5 Workshops erkläre ich Euch, wie Ihr das Layout für die Seite ändert und Bilder auf der Website einfügen könnt.
Zuerst schauen wir uns an, wie man ein neues Layout festlegen kann, um z.B. mehrere Felder oder Spalten für Inhalte zu erstellen. Dadurch habt Ihr unter anderem die Möglichkeit Texte neben Bildern zu platzieren. Schließlich sollen Bilder die Texte auf einer Website unterstützen oder etwas verdeutlichen.
Inhaltsverzeichnis:
Anlegen eines neuen Layouts
Damit ein neues Layout angelegt werden kann, klickt Ihr zuerst in dem gewünschten Bereich, in dem Ihr das Layout erstellen wollt, auf „Hinzufügen“. In unserem Beispiel „Hinzufügen zu Main“.
In dem erscheinenden Menü wählt Ihr „Layout hinzufügen“ aus.
Aufbau des Layouts
In den Layout-Einstellungen könnt Ihr nun angeben, wie das Layout aussehen soll.
Spalten: Hier gebt Ihr an, wie viele Felder nebeneinander, angelegt werden sollen.
Zeilen: Hier gebt Ihr an, wie viele Felder untereinander, angelegt werden sollen.
Abstände: Wie groß soll der Anstand zwischen den zeldern sein. (Die Angabe erfolgt hier in px=Pixel)
Wenn Ihr möchtet, kann die Einstellung für das Layout als Vorlage gespeichert werden. So kann das Layout später einfach per Mausklick ausgewählt werden. Ihr könnt ruhigen Gewissens mit den Einstellungen herum experimentieren, da diese jederzeit wieder geändert werden können.
Zum Schluss noch auf „Hinzufügen“ klicken, damit dieses in die Website eingefügt wird. Das Ergebnis sieht, mit den Einstellungen aus unserem Beispiel, aus wie in dem rechten Bild.
Bilder in das neue Layout einfügen
Zuerst wird wie im vorherigen Bild gezeigt wieder der Bereich ausgewählt, in dem das zild hinzugefügt werden soll. Wir wählen im Beispiel direkt ein Feld aus dem neuen Layout aus. Es erscheint das folgende Menü, in dem „Block hinzufügen“ausgewählt wird.
Darüber gelangt man zu einer Auswahl der verschiedenen Möglichkeiten wie z.B. Bilder, Videos oder Text einzubinden. Da ein Bild eingefügt werden soll, wählt Ihr „Image“ aus.
Es erscheint eine Übersicht der Bildoptionen. Da bisher noch kein Bild ausgewählt wurde, muss dies als Nächstes gemacht werden. Dazu auf den Text „Bild auswählen“ klicken, um zur Bilderübersicht zu gelangen.
Der Bild-Upload
Die Bildübersicht ist zunächst leer, da noch keine Bilder in Concrete5 importiert wurden. Oben rechts kann über die Schaltfläche „Durchsuchen..“ der eigene PC nach Bildern für die Website durchsucht werden.
In der Explorer-Ansicht des Betriebssystems die gewünschten Bilder per Mausklick auswählen…
…und durch anklicken der Schaltfläche „Datei hochladen“ den Upload bestätigen.
Sind alle gewünschten Bilder hochgeladen, müsst Ihr nur auf das jeweilige Bild in der Übersicht klicken und in dem erscheinenden Menü auf „Auswählen“ gehen.
Urheberrechte von Bildern beachten
Bei der Nutzung von Bildern auf der eigenen Website solltet Ihr darauf achten, dass keine Rechte von Dritten verletzt werden. Einen Blogartikel zu diesem Thema ist hier zu finden.
Der Mouse-Over-Effekt
Wenn Ihr wollt, kann noch ein Bild für einen Mouse-Over-Effekt ausgewählt werden. Mouse-Over-Effekt bedeutet, dass sobald der Mauszeiger über das Bild 1 bewegt wird, sich die Anzeige zu Bild 2 ändert und wieder zurück wechselt, wenn der Mauszeiger wieder vom Bild weg bewegt wird.
Das Hinzufügen erfolgt wieder, in dem Ihr in der Übersicht auf das gewünschte Bild klickt und im Menü auf „Auswählen“ geht.
Zusätzliche Bildeinstellungen
Im unteren Bereich können noch weitere Angaben zu dem Bild gemacht werden.
Bild verweist auf eine URL: Per Klick auf das Bild wird die hinterlegte URL aufgerufen.
Alternative Bildbeschreibung: Falls beim Besucher der Website keine
Bilder angezeigt werden, wird diese Beschreibung anstelle des Bildes angezeigt.
Maximale Größen: Hier kann die maximale Bildgröße in Pixel angegeben
werden. (1 cm = 119 Pixel)
Sind alle gewünschten Einstellungen hinterlegt, nur noch auf die Schaltfläche „Hinzufügen“ klicken.
Das Endergebnis der Bemühungen…
…sollte ungefähr so aussehen.
Im nächsten Teil des Workshops schauen wir uns an, wie andere Themes und zusätzliche Plugins installiert werden können. Bei Fragen zum Thema Layout und Bilder einfügen einfach die Kommentarfunktion nutzen.
