## Ortsgruppen-Homepage selbst erstellen

- [Gestalten der Website](website/og-homepage.md?id=gestalten-der-website)
- [Titelbild einfügen](website/og-homepage.md?id=titelbild-einfügen)
- [Terminkalender einbauen](website/og-homepage.md?id=terminkalender-einbauen)
- [Profilbildgenerator einrichten](website/og-homepage.md?id=profilbildgenerator-einrichten)

Die Website bietet alle Informationen die ihr braucht, um eure **eigene OG-Homepage** zu basteln. Dazu braucht ihr **keine besonderen technischen Kenntnisse**, ihr solltet aber ein Auge für Design haben.

Der Link zu eurer Homepage lautet dann "studentsforfuture.info/ortsgruppe/*Name eurer OG*". Hier ist ein [Beispiel der OG Leipzig](https://studentsforfuture.info/ortsgruppe/leipzig/).

Zum Homepage-Editor gelangt ihr über den Reiter `Pages`. Dort findet ihr bereits eine Seite die den Namen eurer OG trägt. Klickt einfach auf `bearbeiten`, um deren Design & Inhalte anzupassen.



### Gestalten der Homepage

In der Mitte der Eingabemaske ist die aktuelle Arbeitsversion eurer Website zu sehen. Um ein geändertes Design zu testen, könnt ihr oben rechts `Vorschau` auswählen. Wählt `Aktualisieren`, damit die Änderungen auch auf der tatsächlichen Homepage geändert werden.

Neue Elemente fügt ihr mit dem `+`-Knopf hinzu, der in der linken oberen Ecke der Eingabemaske liegt. Dort könnt ihr zwischen **verschiedensten Designblöcke** auswählen. 

Anschließend könnt den Block auf der Seite an die **gewünschte Position** ziehen. Ebenso könnt ihr ihn wieder **löschen oder duplizieren**.

Wählt ihr einen existierenden Block aus, so erscheint rechts neben der Eingabemaske ein **Optionsmenü, mit verschiedenen Einstellungsmöglichkeiten**. Zum Beispiel lässt sich dort die Schriftgröße in einem Absatz anpassen.

**Übersicht über die wichtigsten Blöcke:**

| Name                         | Funktion                                |
| ---------------------------- | --------------------------------------- |
| **Heading**                  | Verschiedene einheitliche Überschriften |
| **Absatz**                   | Textelemente einbinden                  |
| **Buttons**                  | Knöpfe zum Verlinken anderer Websites   |
| **Bild**                     | einzelnes Bild                          |
| **Galerie**                  | mehrere Bilder mit Fester Spaltenanzahl |
| **Zitat**                    | Einbinden von Zitaten                   |
| **Pullqoute**                | Einbinden von Zitaten                   |
| **#PublicClimateSchool2020** | Link zur PCS Website                    |
| **Cover**                    | Titelbild                               |
| **Calendar**                 | Terminkalender eurer OG                 |
| **Profile Image Generator**  | Profilbildgenerator für Events          |



### Titelbild einfügen

Oben auf eurer Homepage könnt ihr ein **großes Titelbild** einbauen. Dafür eignen sich besonders **Bilder von Klimastreiks** oder anderen Aktionen eurer OGs. [Hier ein Beispiel der OG Leipzig.](https://studentsforfuture.info/ortsgruppe/leipzig)

Dafür müsst ihr oben auf eurer Seite einen `Cover` Block einbauen. Wählt dann ein **Bild mit möglichst hoher Auflösung** aus. Anschließend könnt ihr innerhalb des Titelbilds weitere Blöcke einbauen, meistens bietet sich ein `Heading` an, also eine Überschrift.

Im Optionsmenü des `Cover`-Blocks könnt das Titelbild mit einer Farbe überlagern. Wählt dafür eine Farbe aus und ändert danach die `Deckkraft`, bis euch das Ergebnis gefällt. [Hier ein Beispiel auf der SFF-Startseite.](https://studentsforfuture.info)



### Terminkalender einbauen

Ihr könnt einen **Terminkalender** einbauen, **der alle Events anzeigt**, die für eure OG eingetragen wurden. Außerdem könnt ihr diesen auf eine Kategorie, wie die PCS beschränken. Erstellt dazu einen `Calendar`-Block.

Im Optionsmenü des Blocks könnt die **Ortsgruppe, und die Eventkategorie des Kalenders auswählen**. Es bietet sich an, eure eigene OG auszuwählen, um deren Events anzuzeigen. 

Zusätzlich könnt ihr den **Zeitraum des Kalenders eingrenzen**. Für einen Studenplan zur PCS eignet sich beispielsweise der Zeitraum 25.05.-29.05.



### Profilbildgenerator einrichten

Ihr könnt auch einen **Profilbildgenerator** einbinden. Dafür benötigt ihr allerdings selbst einen **passenden Profilbildrahmen**. Dieser sollte im `.png` oder `.svg` Format sein und mindestens eine Auflösung von **800x800** **Pixeln** haben. 

Erstellt dafür einen `Profile Image Generator`-Block. Anschließend müsst ihr einen passenden **Profilbildrahmen auswählen oder hochladen**. In der Medien-Galerie der Website ist bereits ein Rahmen für die PCS-2020 verfügbar.