8 Design der Website anpassen

Klicken Sie im Administrationsmenü auf Design. Sie sehen verschiedene Designvorlagen (Themes), aus denen Sie auswählen können.

Die Designvorlage Philippus VK bietet die vielen Einstellungsmöglichkeiten, die im Folgenden kurz beschrieben werden. Die anderen Themes können Sie ebenfalls einfach ausprobieren. Die Veränderungen lassen sich einfach wieder zurücknehmen. Zum Bearbeiten klicken Sie auf den Link Einstellungen.

8.1 Header-Bild (früher: Logo) hochladen

Um ein eigenes Header-Bild hochzuladen, bereiten Sie ein Bild in der Größe 889 x 316 Pixel vor. Klicken Sie dann wie unter 8 beschrieben auf Einstellungen.

Entfernen Sie unter den Standard Headerbild-Einstellungen bei "Standard Header-Bild verwenden" das Häkchen, um den Platzhalter-Header zu entfernen und die Upload-Funktionen zu sehen. Laden Sie Ihre vorbereitete Datei hoch, indem Sie auf Durchsuchen klicken, die Datei auf Ihrem PC wählen und Öffnen klicken. Nach dem Hochladen klicken Sie ganz unten im Administrationsbereich Ihrer Musterwebseite auf Konfiguration speichern. Anschließend erscheint Ihr Headerbild über dem Inhaltsbereich.

Gerne hilft Ihnen Vernetzte Kirche dabei, ein geeignetes Bild in der richtigen Größe herzustellen.

PS: Falls Sie sich über die großen Maße des Headerbildes wundern: Es gibt seit November 2014 neue und breitere Versionen des Philippus-Themes. Auch wenn Sie nicht die breiteste Version unter Design >> Einstellungen Philippus VK >> Grundeinstellungen wählen, bitte das Headerbild in großer Größe hochladen. Das Headerbild wird für kleinere Version automatisch kleiner skaliert. So haben Sie aber gleich die richtige Größe für alle Breiten.

8.2 Farben nach Vorlage anpassen

Wählen Sie Farben, die auch zu Ihren Headerbildern und Ihrem Logo passen. Klicken Sie dazu unter Design auf Einstellungen (siehe 8). Dort finden Sie vorgefertigte Designvorlagen, die von professionellen Grafikern entwickelt wurden.

Wählen Sie eine Farbkombination und klicken Sie anschließend auf Konfiguration speichern. Schließen Sie das Bearbeitungsfenster mit dem schwarzen X rechts oben. Ihre Musterwebseite hat nun ein neues Erscheinungsbild. Testen Sie ggf. auf die gleiche Weise mehrere Farbkombinationen!

Achtung: Haben Sie in Ihrem Browser noch weitere Fenster geöffnet, die Ihre Musterwebseite anzeigen, werden diese nicht automatisch angepasst. In diesem Fall wählen Sie in Ihrem Browser Anzeige aktualisieren oder drücken Sie die beiden Tasten Strg + R für neu laden (= Reload) oder F5.

8.3 Farben individuell anpassen

Klicken Sie im Einstellungsmenü (siehe 8) auf Design und wählen Sie wie unter 8.2 eine Farbkombination, die Ihren Vorstellungen am ehesten entspricht. Wählen Sie dann bei Hintergrundfarben und Text- und Linkfarben Ihre gewünschten Farben. Bei Transparenz und Verläufe können Sie die Farbübergänge einstellen. Änderungen sehen Sie direkt in der Vorschau. Klicken Sie nach Ihrer Auswahl unten links auf Konfiguration speichern.

Sie können Ihre Farbänderungen auch immer wieder auf das ausgewählte Design-Preset zurücksetzen, wenn Sie neben der veränderten Farbeinstellung auf Farbe löschen klicken. Dann wird wieder ein weißes Farbfeld gezeigt, das hier anzeigt, dass wieder die Designvorlage aktiv ist.

Tipp: Verwenden Sie nicht zu viele verschiedene Farben! Das macht Ihre Website unruhig und lenkt von den Inhalten ab. Bedenken Sie auch, dass durch Bilder zusätzlich Farbe auf die Website kommt, die mit Ihren Farbeinstellungen harmonieren sollte. Um Flächen abzusetzen, ohne dass es zu bunt wird, machen verschiedene Farbstufen der gleichen Farbe Sinn. Auf http://zeichen.bayern-evangelisch.de/artikel/8/farben finden Sie die Farbwerte für die Violett-Töne der ELKB.

8.4 Schriftart anpassen

Wählen Sie unter Einstellungen (siehe 8) >> Schriftfamilie die gewünschten Schriftarten. Ihre Änderungen sehen Sie unmittelbar in der Vorschau. Klicken Sie danach unten links auf Konfiguration speichern.

Hinweis: Die Schriftarten sind nicht nur unterschiedlich im Erscheinungsbild, sondern laufen auch verschieden weit. Auch wenn Sie die Schriftgröße nicht global für die gesamte Website verändern können, ist durch die Wahl einer anderen Schriftart mehr oder weniger großer Text möglich.

8.5 Name (und Slogan) der Website

Der Name ihrer Website, der z.B. beim Philippus VK-Theme links oben unter dem Balkenkreuz erscheint, kann unter Konfiguration >> Website-Informationen geändert werden. Bei einigen Themes (z.B. Bartik, Garland) kann noch einen Untertitel (=Slogan) eingetragen werden, der auf der Website direkt zu sehen ist. Beim Philippus-Theme kommt dieser Slogan nur bei der Fensterbeschriftung des Browsers vor.

Sollten Sie den Zeilenumbruch in der Überschrift selbst steuern wollen, finden Sie hier weitere Informationen: http://www.netzmarginalien.de/musterwebsite-umbruch-ueberschriften

8.6 Zweites Logo

Analog zum ELKB-Logo über der linken Menüspalte lässt sich auch der Bereich im Header über der rechten Spalte in der aktuellen Philippus-Version nutzen. Sie können ein zweites Logo hochladen. Bereiten Sie dazu ein Logo mit den Bildmaßen 230x200 Pixel vor. Klicken Sie dann wie unter 8 beschrieben auf Einstellungen.

Laden Sie Ihre vorbereitete Datei hoch, indem Sie auf Durchsuchen klicken, die Datei auf Ihrem PC wählen und öffnen klicken. Nach dem Hochladen sehen Sie den Namen der hochgeladenen Datei zur Kontrolle in der oberen Zeile. Klicken Sie ganz unten im Administrationsbereich Ihrer Musterwebseite auf Konfiguration speichern. Anschließend erscheint Ihr zweites Logo über der rechten Spalte.

Hinweis: Achten Sie darauf, dass sich Logo, Header und Hintergrund harmonisch zueinander verhalten. Dies erreichen Sie automatisch, wenn Ihr neues Logo einen transparenten Hintergrund hat. Dann läuft der Header-Hintergrund durch und das neue Logo passt optimal ins Design.
Hat Ihr Wunschlogo einen farbigen Hintergrund, dann müssen Sie die Logo-Elemente in einem Grafik- Programm ausschneiden und auf einem transparenten Hintergrund einfügen. Es ist nicht sinnvoll, das Logo selbst mit einem farbigen Hintergrund zu versehen.

Wenn Sie das zweite Logo wieder entfernen möchten, dann brauchen Sie nur das Kästchen bei Zweites Logo NICHT anzeigen zu aktivieren und diese Einstellung zu speichern.

8.7 Headerbild zum Wechseln

In der aktuellen Version der Musterwebsite Philippus ist es möglich, für verschiedene Seiten unterschiedliche Headerbilder einzustellen. Alle Header haben das Format 562 x 200 Pixel. Klicken Sie wie unter 8 beschrieben auf Einstellungen.

Dort finden Sie unten den Bereich Header-Bilder zum Wechseln. Wie üblich können Sie Ihre vorbereiteten Dateien hochladen, indem Sie auf Durchsuchen klicken, die Datei auf Ihrem PC wählen und öffnen klicken.

Wichtig: Sie müssen nach jeder Bildauswahl Konfiguration speichern drücken, damit das Bild hochgeladen wird. Ansonsten wird die Änderung nicht im System abgelegt. Es können also nicht in einem Schritt mehrere Bilder auf einmal hochgeladen werden.

Anschließend wird das je neue Header-Bild in der Liste aufgeführt. Achten Sie darauf, dass alle Header unterschiedliche Namen haben, sonst überschreibt eine Datei die bereits vorhandene Datei mit gleichem Namen.

Zum Löschen der Headerbilder einfach die Check-Boxen vor den entsprechenden Bildern aktivieren, "Ja, ausgewählte Bilder wirklich löschen" auswählen und auf "Jetzt löschen" klicken.

Achtung: Mit der Betätigung dieses Buttons werden die Bilder gelöscht! Ausnahmsweise ist hier die Veränderung sofort aktiv, ohne dass die Konfiguration nochmals gespeichert werden muss.

Auf den Inhaltsseiten können Sie dann unter dem neuen Reiter "Headerbild" im Auswahlfeld das entsprechende Headerbild für diese Seite festlegen. So können Sie für thematische Seiten die passenden Headerbilder einstellen. Wie immer das Speichern nicht vergessen!

8.8 Eigenes Favicon erstellen/einstellen

Im Auslieferungszustand ist das ELKB-Balkenkreuz als Favicon der Musterwebsite voreingestellt. Bei den Designeinstellungen können Sie ein eigenes Favicon hochladen. Wenn Sie mehr zum Thema Favicon erfahren möchten oder selbst ein neues Favicon erstellen möchten, finden Sie hier die entsprechende "Netzmarginalie": http://www.netzmarginalien.de/favicon-erstellen

8.9 Breite der Website einstellen

Man kann im Abschnitt Design auch zwischen drei Breiten beim Philippus-VK-Theme wählen.

Da die Bildschirm-Größen und -Auflösungen in letzter Zeit rasant gewachsen sind, bietet das Philippus-Design auch zwei breitere Versionen an, die größere Headerbilder und vorallem mehr Platz im Inhaltsbereich erlauben. Natürlich sind auch die größeren Stufen als Responsive Design entwickelt worden und passen sich so der Gerätegröße optimal an. So sind auf jedem Gerät vom großen Fernseher bis zum Smartphone alle Inhalte möglichst gut zugänglich.

Durch die erweiterten Größenoptionen sind auch neue Header-Formate möglich. Damit Sie nicht pro Breite je ein neues Headerbild anpassen müssen, erledigt das System hier die Arbeit für Sie: Das Bild, das Sie hochladen wird vom System so gezoomt, dass es den Headerbereich füllt. Um die bestmögliche Darstellung zu erzielen, laden Sie bitte ab jetzt in jedem Fall ein Headerbild der Größe 889 x 316 Pixel hoch. Dann können Sie einfach zwischen den nun verfügbaren Breiten wählen, ohne dass Sie erneut ein Headerbild anpassen müssen. Verwenden Sie trotzdem weiterhin die Version 1, dann skaliert das System das Bild ohne Qualitätsverlust.

Unter Design >> Einstellungen Philippus VK >> Grundeinstellungen können Sie die breiteren Versionen aussuchen oder wieder auf die Grundversion zurückstellen. Dort finden Sie auch die genauen Maße für die jeweilige Breite des Inhaltsbereichs.

8.10 Design-Varianten im Theme Philippus VK clean

Das Theme Philippus VK clean ist eine neue Design-Variante, die wie alle anderen Varianten ausgewählt werden kann. Philippus VK clean ist eine Weiterentwicklung von Philippus VK. Das bedeutet, dass alle Features, die hierfür entwickelt wurden auch weiterhin zur Verfügung stehen.
Folgende Gestaltungsmöglichkeiten werden in Philippus VK clean zusätzlich angeboten:
Anzeige ein-/ausschalten: Hier können Sie wählen, ob Logo bzw. Name der Website angezeigt werden soll.
Logo-Einstellungen: In diesem Bereich können Sie ein eigenes Logo hochladen. Unter der Rubrik Design können Sie festlegen, wie das Logo dargestellt werden soll: rund oder eckig.


Zusätzlich können Sie im Bereich Design ein Farbschema und eine Schrift festlegen!
Neu ist: Sie können aus dem gesamten Angebot der der google-fonts auswählen. Mit einem Klick auf den verlinkten Begriff google-font gelangen Sie direkt zu sämtlichen Schriftfamilien, die zur Verfügung stehen.
Wenn Sie eine geeignete Schrift gefunden haben, klicken Sie auf den Quick-Use-Bottom   und übertragen Sie den Quick-Use-Namen in das Feld ein.


Im nächsten Schritt unter der Rubrik Design können Sie festlegen, ob und in welcher Form das Balkenkreuz auf Ihrer Webseite erscheinen soll.


Im Abschnitt Eigene Farben können Sie die Farbgestaltung vornehmen: Hier können Sie einfach mal die verschiedenen Varianten durchprobieren und auswählen, welche Zusammenstellung gut zur Ihrer Einrichtung passen könnte.