Jimdo Design Barcelona

Design Barcelona

Barcelona was wird geboten

Barcelona bietet 960 px Breite. Für die Inhalte steht, nach Abzug des Innenabstandes, eine Breite von 920px bereit.

Die Sidebar ist direkt unter dem Content, gefolgt vom Footer. 

 

Die Navigation kommt als Drop-Down Menü daher. Eine Braedcrumb - Navigation wird direkt unter der Navigation angezeigt.


Ein farbiger Streifen oben rundet das Design ab. 


Design Barcelona Varianten

Jimdo stellt dem User 5 Varianten zur Wahl. Wobei der Unterschied zwischen den Varianten nicht auf den 1. Blick sichtbar wird.


Design Barcelona Varianten, kleiner feiner Unterschied

Der Unterschied zwischen den Varianten liegt in der Farbvariante.

Zum einen der Farbstreifen von 25 px ganz oben. Auf den 2. Blick und unter Einsatz der 2. und 3. Navigation-Ebene wird diese Farbe auch dort als Hintergrundfarbe angezeigt.

 

Ändern Sie das Farbe-Schema in eine eigene Farbe, dann ändert sich der obere Farbstreifen, der Hintergrund der Navigation, sowie die Farbe der 2. und 3. Ebene der Navigation bei Mouse-Hover. 

 

Oder Sie ändern die Farben je Wahl, Bereich auswählen. 

Die Navigation-Ebenen sind als Gesamtes zu sehen. Eigenschaften der 1. Ebene werden auf die Ebenen 2 und 3 übergeben. 


Können Sie einen Unterschied in den Thumb-Bildern der Vorschau erkennen?

Mobile Ansicht Design Barcelona

Die mobile Ansicht des Designs ist je nach Wahl der Variante in deren Farbschema abgebildet.

Das Logo der Website wird auf die verfügbare fest definierte Höhe der Navigation verkleinert.

 

Eine Änderung ist nur per zusätzliche Style-Eigenschaften im Head möglich.

Leider wird auf Tablets nicht die mobile Jimdo Ansicht aufgerufen. Besucher mit einem Tablet, testet mit Samsung und Android, können nicht die 2. und 3. Ebene der Navigation ansteuern. Da diese zwar kurz aufpoppt, aber nicht anklickbar ist.




Design Barcelona - was Sie noch Wissen sollten

Mobile Version

Die mobile Version wird in der Farbe der gewählten Variante dargestellt.

Farbschema

Einmal das vorgeschlagene Farbschema mit der Rolle geändert, gibt es kein einfaches zurück zum vorgegebenen Farbschema.

Auch die Wahl einer anderen Variante bringt keine Änderung. Einzig die mobile Ansicht zeigt die Farben der gewählten Variante.

Unschön

Bei der Änderung des Farbschemas, wird die der Inhalt der Sidebar mit in den Farben geändert. Es muss mit der Rolle nachgebessert werden.

Im Design sind Google-Schriften definiert. Auch wenn diese nicht benutzt werden, werden diese ggf. vom Browser mit geladen. Dies erhöht unnötig die Ladezeit der Website.

Kleine Bugs

Braincrumb behält die Farbe der gewählten Variante. Diese muss bei Bedarf mit der Rolle geändert werden.

Wählen Sie bei den Einstellungen einen Abstand oben, dann wird dieser auch auf den Bereich der Sidebar angewandt. (Stand 27.10.2015)

Ganz schlecht - grober Fehler

Das Design bildet auf zu kleinen Ansichten keinen horizontalen Scrollbalken. Der Besucher kann Inhalte die nicht in der Ansicht passen, nicht sehen. (Stand 27.10.215)



Tipps für die Verwendung von Barcelona:

1. verzichten Sie auf versteckte Seiten - Wenn doch, setzen Sie zusätzliche Buttons für den Weg zur darüber liegenden Seite.

2. Achten Sie darauf, dass aktive Navigationseinträge ein eigenes Aussehen haben

3. halten Sie die Navigation klein, dies gilt auch für die 2. und 3. Ebenen

Kommentar schreiben

Kommentare: 4
  • #1

    Julia (Montag, 24 Oktober 2016 16:04)

    ich würde gerne eine eigene Farbe für den Hintergrund des drop-down Menüs festlegen (weiß) - kann mir jemand den code geben, der in der Header eingefügt werden müsste?
    Danke und LG von Julia

  • #2

    Kertsin (Dienstag, 25 Oktober 2016 12:04)

    Hallo Julia,

    in Barcelona kann mit der Farbrolle der Hintergrund, wie auch die Schriftfarbe etc. geändert werden. Das Aussehen gilt für alle Ebenen der Navigation.
    Es ist also kein zusätzlicher Code für den Header notwendig.

    Kerstin

  • #3

    sandra (Mittwoch, 14 Dezember 2016 23:38)

    Wie kann man beim Design "Barcelona" das unscharfe Bild in den Hintergrund kopieren?

  • #4

    Kerstin (Donnerstag, 15 Dezember 2016 11:43)

    Hallo Sandra,

    das Bild in einem Grafikprogramm "unscharf" gestalten. Das Bild dann über Design > Hintergrund in die Website einfügen.
    Kerstin