Anpassung des ausgewählten Jimdo-Designs


Tools und Bereiche im Webbaukasten JIMDO

Zur Gestaltung Ihrer JIMDO-Page mit der Methode „Bestehende Layouts verwenden und anpassen“ stehen Ihnen folgende Tools und Bereiche zur Verfügung:

 

  • Menü > DESIGN > Designvorlagen: hier können die Layouts (oder Layout-Varianten) ausgewählt und aktiviert werden
  • Im Bereich Menü > DESIGN der Bereich Style: Definition von Schriften, Ausrichtung und Farben für z.B. Inhaltstext, Überschriften, Links, Trennstriche, Buttons, Navigation etc.
  • Im Bereich Menü > DESIGN der Bereich Hintergrund oder über Siteadmin > DESIGN > Hintergrund gelangen Sie in das Dialogmenü für die Konfiguration und Zuweisung von einem oder mehreren Hintergründen. Hintergründe können Farben, Einzelbilder, Wechselbilder oder Videos sein.
    Individuell für jede Einzelseite oder gültig für alle Seiten.

Der Klick auf das „Plus-Symbol öffnet den folgenden Dialog zur Erstellung von Hintergründen. innerhalb dessen stehen für Hintergründe die Elemente Bild, Wechselbilder (Slideshow), Video oder Farbe zur Verfügung.

 

Treffen Sie eine Auswahl, laden Sie z.B. eine hochwertige Bilddatei hoch und positionieren Sie die Bildmitte über den sichtbaren Punkt im Bildelement:

 

Dabei eigenen sich ruhige Hintergrundbilder oder Farben oft wesentlich besser, als Slideshows mit unterschiedlichen detailreichen Motiven oder sogar Videos, bei denen sich direkte URLs von den Plattformen YouTube und Vimeo einbinden lassen.

 

Die Wechselbildeinstellungen ermöglichen Ihnen den Upload mehrerer geeigneter Bilder (möglichst gleiche Bemaßung und inhaltliche Kontinuität) sowie per drag & drop das verschieben der Bilder in der Reihenfolge zuzüglich der Geschwindigkeits-Einstellungen.

 

Hintergrundfarben können ebenso gepickt wie als RGB oder HEX-Werte eingegeben werden.

 

Besonders hilfreich in diesem Hintergrund-Manager: alle Hintergrundvarianten werden automatisch abgespeichert und für eine spätere Verwendung unverändert vorgehalten.

Die meisten neuen Layouts verfügen darüber hinaus über einen Logobereich unterhalb dessen sich ein leicht verständliches Upload-Menü für Grafikdateien befindet.

Layouts die diese Funktion haben zeigen im Bearbeitungs-Modus folgendes Symbol an:

 

Gestaltungshinweise für Hintergründe

Bei der Konzeption Ihrer JIMDO-Webseite empfehle ich grundsätzlich, von hinten nach vorne zu arbeiten.

 

Da Sie durch die Arbeit mit einem Webbaukasten ohnehin konkrete Vorgaben in der Gestaltung des eigentlichen Webcontainers haben, kommt dem Hintergrund ihrer JIMDO Page eine besondere Bedeutung zu, mit dem Sie wichtige Effekte erzielen können. Natürlich lassen sich hier auch großformatige Fehler machen die den Genuss Ihrer Seite für Besucher erschweren.

 

Es besteht immer die Möglichkeit eine Farbe, einen z.B. rein weißen Hintergrund oder eine unauffällige Grafik als Hintergrund einzusetzen, das sollte man auch zunächst in Angriff nehmen, da der Einsatz eines dynamischen Fotos oder Videos auch konzeptionelles Können voraussetzt.

 

Fotos als Hintergrund

Der häufig geäußerte Wunsch nach einem Bild oder Video als Hintergrund einer Webseite will überdacht sein. Sie tun den Besuchern Ihrer Website nicht unbedingt einen Gefallen, indem Sie Bild mit Bild (im Inhalts- oder Kopfbereich) konkurrieren lassen.

 

Besteht der Inhalt Ihrer Webseite ausschließlich oder überwiegend aus Text mit minimalem Grafikeinsatz, so können Sie meistens bedenkenlos ein aussagestarkes Bild im Hintergrund verwenden. Ein Foto sollte schnell vom Auge zu begreifen sein, möglichst keine Schriften darstellen und vor allem an den Rändern eine gleichmäßige Wirkung erzielen. 

 

Eignung von Bildern als Hintergrund

Achten Sie vor allem darauf, im Hintergrund keine zu detailreichen Abbildungen oder grafische Texte mitlaufen zu lassen, da sie stets mit einem vordergründigen Schriftbild konkurrieren werden. Einige grundsätzliche Empfehlungen dazu:

 

A) Wenig Bild, verhältnismäßig viel Content Hier können Sie einen grafischen (nicht fotografischen) Hintergrund einsetzen. Benutzen Sie einen zum Seitenhintergrund farblich passenden Header oder einen Vollfarbton und eine neutrale Körperfarbe.

 

B) Sehr viel Bild, wenig Text Hintergrund so neutral wie möglich, kein zusätzliches Headerbild, Seitenkörper maximal an den Hintergrund adaptiert, damit die Bilder ungestört wirken können. Schwarz/Weiß Grau/Schwarz oder ähnliche neutrale Text/Farbkombinationen benutzen. Verwenden Sie vor allem serifenlose Schriften, die keine Aufmerksamkeit abziehen. und halten Sie die Navigation möglichst überschaubar.

 

C) Mehrseitig textlastig Bieten Sie hier volle Konzentration auf den Text. Dieser sollte extrem gut lesbar sein und mit Absätzen gegliedert. Verwenden Sie gut lesbare Schriften 14 - 16 Px groß, dunkel auf schlagweißem Grund. Nehmen Sie ein schmales Layout oder nutzen Sie ein Design mit fixer Breiter für die Contentdarstellung, da sich Text in der Breite nicht gut lesen lässt und einen ausreichenden Zeilenabstand. Der Hintergrund sollte thematisch harmonisieren, darf auch intensiv und detailreich fotografisch sein, sollte aber möglichst nicht animiert werden.

 

D) Prozessorientiert Ist das Ziel Ihrer Webseite das Generieren von Anträgen, Abschlüssen, Kontaktaufnahmen etc.? Dann lenken Sie bloß nicht davon ab. Prozessorientierte Webseiten verlangen dem Besucher Konzentration ab. Verlieren Sie den Kunden nicht auf Ihren Zielseiten durch Ablenkung und Anreize. Bebildern Sie - thematisch passend - den Prozess oder das dahinter stehende Ziel ausschließlich im Inhaltsbereich und halten Sie alle weiteren Elemente neutral, seriös und vor allem unauffällig.

 

Styles einsetzen

Sofern Sie bei der Schalterstellung Aus bleiben, haben Sie unterhalb des Sektors Farbschema die Möglichkeit, Ihre Seite – im ausgewählten Design – in eine frei definierbare Farbe zu tauchen. Dies erspart Ihnen viel Einzelarbeit im Vergleich zum aktivierten Detail Styling und ist gerade für Anfänger eine sehr willkommene Möglichkeit, um möglichst schnell einen umfassenden Effekt in die Farben der eigenen Webseite zu bringen.

 

 

 

Die Auswahl von Kopf- und Hintergrundbildern wird an dieser Stelle nicht getroffen. Beim Klick auf Farbschema erhalten Sie 64 voreingestellte Farben (darunter auch durchsichtig – das kleine grau-weiße Schachbrettmuster am rechten oberen Rand der 64 Musterfarben), weiterhin ein Farbfeld, aus dem Sie Ihre Wunschfarbe mit der Maus picken können, und darunter auch ein Eingabefeld für (sofern Sie den Umgang damit beherrschen) RGB- und Hex-Werte.

 

 

Bei einem Wechsel des Designs werden die von Ihnen getätigten Einstellungen für das Farbschema nicht auf ein anderes Design übertragen, jedoch zu diesem Design (Rome) bleiben sie zunächst abgespeichert. Wenn Sie es viel genauer und detaillierter nehmen wollen, haben Sie die Möglichkeit, über das sogenannte Detail Styling eine wirklich große Anzahl einzelner Elemente (nicht alle!) Ihres Layouts individuell zu gestalten.

 

 

Sobald Sie die Option Detail Styling aktiviert haben, wird Ihre Maus auf »stylefähigen Elementen« zu einer kleinen Farbrolle, mit der Sie Elemente auf Ihrer Jimdo- Seite berühren und diese ganz nach Ihren individuellen Wünschen bearbeiten – also stylen – können.

 

Das bezieht sich nur auf das Aussehen der Elemente, hat nichts mit der eigentlichen Inhaltsänderung zu tun und vererbt sich auf alle Elemente gleichen Typs.

 

Welche Elemente lassen sich denn berühren?

Im Grunde alle, die mit Text, Navigation, Unterschrift, Überschrift, Button etc. bezeichnet werden können. Sie können zum Beispiel die Navigation-Schrift farblich in unterschiedlichen Zuständen (aktiviert, nicht aktiviert) individuell gestalten. Die Position der Navigation oder die Art der Navigation (Quernavigation, Hochnavigation, Dropdown etc.) lassen sich jedoch nicht verändern bzw. auswählen.

 

Diese Art des Stylings ist deswegen so herausfordernd, da man als Laie schnell mit den grundsätzlich vorhandenen Möglichkeiten und den visuellen Zusammenhängen zwischen den einzelnen Elementen überfordert wird.

 

Bei der großen Anzahl der Elemente, die sich verändern lassen, benötigt man im Grunde tiefergehende Erfahrung, um aus dem Handgelenk heraus ein harmonisches Gesamtkonzept bestehend aus Farben, Schriften und Flächen zu definieren.

 

Eine weitere Überraschung besteht oftmals auch darin, dass man zu einem späteren Zeitpunkt (wenn man zum Beispiel nachträglich einen Blog oder einen Shop einrichtet) feststellt, dass eine Vielzahl von Elementen bislang im Styling noch gar nicht ausgestaltet wurden, da man sie schlichtweg nicht »auf dem Schirm« hatte.

 

Hier hilft Ihnen unser kostenloses und smartes Schnellstarter-Template

 

Die Schriftbibliothek ist komfortabel und umfassend, überfordert Design-Anfänger jedoch völlig. Immerhin helfen kleine gut gemeinte Filter – die auch am Beispiel erklären, was Serifen oder serifenlose Schriften etc. sind –, die Auswahl einzuschränken. Obwohl ich Jimdo und gerade die neuen Style-Methoden wirklich toll finde, möchte ich hier auch wiederholt bemängeln, dass etwas sehr Wichtiges aus meiner Sicht fehlt: Es wäre eine hilfreiche und benutzerfreundliche Funktion, individuelle Styling-Einstellungen in einem File speichern, exportieren, archivieren und wieder hochladen zu können. Gegebenenfalls in einer internen Versionsverwaltung.

 

Auf diese Art und Weise ließen sich Sicherheitskopien und Versionen von gelungenen Stylings erstellen, die man bei Bedarf wieder reaktivieren kann. Immerhin und zur Ehrenrettung: Jede Designvorlage lässt sich mit einem Klick wieder auf die ursprünglichen Layout-Vorgaben zurücksetzen. Dazu klickt man – wie bereits eingangs beschrieben – rechts auf den Button Zurücksetzen auf Layout-Vorgaben und bestätigt die Änderung per Abspeichern.

 

Ein weiterer Pluspunkt: Der Farbfächer übernimmt unten links (unterhalb der 64 vorselektierten Farbquadrate) die letzten acht gewählten Farben in einer Extrazeile, sodass man ohne permanente Neueingabe oder das Herauspicken von Farbwerten bereits benutzte Farben mit einem Klick direkt wieder wählen kann.

 

Wissenswert ist auch, dass es Gruppen von Elementen gibt, die man nur gemeinsam stylen kann. Nicht einzeln. So lassen sich beispielsweise die Navigationspunkte nur gemeinsam in Farbe, Schrift, Hintergrund etc. stylen und nicht etwa einzeln.

 

Anders ausgedrückt: Eine bunte Navigation mit individueller Farbe je Menüpunkt können Sie also (zum Glück) nicht definieren. Einzelne Elemente wie zum Beispiel die bunten Sharebuttons lassen sich im Übrigen nicht gestalten, denn sie sind eben vordefinierte Elemente mit eigenen individuellen Bearbeitungsoptionen. Dazu im nächsten Abschnitt mehr.

 

Für alle aktuell 40 responsiven Jimdo-Layouts gelten die vorgenommenen Style-Einstellungen grundsätzlich auch in der mobilen Darstellung. Leider lassen sich die mobilen Layouts nicht mit direkten Style-Möglichkeiten bearbeiten – allenfalls ist eine Individualisierung durch ein komplexes Überschreiben von CSS-Klassen im Head-Bereich (Einstellungen) möglich.

 

Die mobilen Ansichten der 40 Jimdo-Designs sind aber überwiegend mit viel Liebe zum Detail gebaut, auch wenn ein individuelles »Detail-Styling« der Mobilversion zurzeit nicht vorgesehen ist.

 

Fazit: Das Detail-Styling ist eine weitreichende und smarte Funktion, mit der auch sehr individuelle Lösungen und Styles umgesetzt werden können. Die Gefahr, sich zu verzetteln, ist jedoch definitiv gegeben.

 

Stylen Sie Ihre Seite also mit Zeit und in mehreren Sitzungen.