Concrete5 Workshop (Teil 5): Layout ändern & Bilder einfügen

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.

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“.

Hinzufügen eines Layouts in Concrete5

In dem erscheinenden Menü wählt Ihr „Layout hinzufügen“ aus.

Layout hinzufügen auswählen...
Layout hinzufügen auswählen…

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.

Spalten, Zeilen, AbständeLayout als Vorlage speichern?

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.

...und Layout erstellenDas fertige Layout!

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.

Einen neuen Block in Concrete5 hinzufügen

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.

Bild in Concrete5 einfügen

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.

Bild auswählen

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.
Den PC nach dem passenden Bild durchsuchen

In der Explorer-Ansicht des Betriebssystems die gewünschten Bilder per Mausklick auswählen…

Das gewünschte Bild auswählen...

…und durch anklicken der Schaltfläche „Datei hochladen“ den Upload bestätigen.

...und Hochladen

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.

Übersicht der hochgeladenen Bilder in Concrete5

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.

Mouse-Over-Effekt

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.

Alles eingestellt? Dann Bild einfügen!

Das Endergebnis der Bemühungen…

…sollte ungefähr so aussehen.

So könnte es 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.

Noch keine Stimmen.
Bitte warten...

2 Gedanken zu „Concrete5 Workshop (Teil 5): Layout ändern & Bilder einfügen

  1. wie kann man die bilder auf die richtige größe bringen, dass sie ganz in das layout passen und nicht nur ein teil?
    Und wie bekomme ich ein eigenes Hintergrundbild hoch gelanden und eingefügt?
    Die Vorlagen gefallen mir alle nicht…

    1. Arne

      Hallo Daniel,

      Die Bildgröße muss entweder vorher in einem Bildprogramm wie z.B. Photoshop festgelegt werden oder kann beim Hinzufügen über Bildgröße beschränken und das Einstellen der Maximalwerte festgelegt werden.

      Wenn du ein eigenes Hintergrundbild verwenden willst, musst du ein bestehendes Theme anpassen. Dazu benötigst du je nach verwendetem Theme, PHP und CSS Kenntnisse.

      Hier mal ein Beispiel für das Default-Theme: Plain Yoghurt
      Das Hinterrundbild nenne ich im Beispiel back.jpg.

      – Default Theme auswählen
      – Das gewünschte Bild (back.jpg) in das Image-Verzeichnis des Themes hochladen
      (/concrete/themes/default/images)
      – Die main.css im Theme Hauptverzeichnis (/concrete/themes/default) in einem Editor wie z.B. Notepad++ öffnen und Zeile 3 wie folgt anpassen.
      body {/* customize_background */ background: url(images/back.jpg) no-repeat center; /* customize_background */ padding: 0px; margin: 0px; }
      – Die geänderte main.css speichern und wieder hochladen.

      Wenn man jetzt die Seite aufruft, wird das gewünschte Hintergrundbild angezeigt.

      Alternativ kannst du dich einfach, wie in Teil 6 des Workshops beschrieben bei der Concrete5 Community anmelden um viele weitere Themes zu installieren. Vielleicht ist da noch was für dich dabei.

      Gruß Arne

Schreibe einen Kommentar

Die von Ihnen hier erhobenen Daten werden gemäß unserer Datenschutzerklärung zur Veröffentlichung Ihres Kommentars in unserem Blog verarbeitet.