Mehr Flexibiliät bei Layouts

Joerg

Hallo, wie kann man dies bei den Layouts Producer Responsive, Stripe Responsive und Poster Responsive umsetzen (bei weißen Hintergrund der Website)?

Es geht um die horizontale Navigation der nachfolgend genannten Website, wobei der Hintergrund zunächst transparent ist (hier mit weißer Schrift) und sich dieser dann beim Scrollen automatisch in einen einfarbigen Hintergrund (hier weiß) ändert und die Schriftfarbe sich ebenso automatisch anpasst (hier schwarz).

Zusätzlich erscheint beim Wechsel des Navigationshintergrunds von transparent auf einfarbig (hier weiß) ein "feiner Schatten" unterhalb der Navigation, was diese dadurch vom Inhaltsbereich besser abhebt:

http://www.vvvzeeland.nl/de

(Navigationspunkte in weißer Schrift)

(Automatische Änderung der Darstellung beim Herunterscrollen)

Dies halte ich für eine gelungene und zudem sinnvolle Funktionalität!

Bei den o.g. Layouts des ZP finde ich das nicht so elegant und praxisnah gelöst.

Zwar kann man den Hintergrund auch transparent einstellen, beim Herunterscrollen verbleibt dieser Zustand jedoch, was dazu führt, dass hierbei z.B. das Logo den Inhaltsbereich (Navigationspfad, Texte, Fotos) überlagert.

Möchte man (wie im Beispiel) den Menütext auf dem/den Headerfoto(s) in weißer Schriftfarbe darstellen, ist dieser nach dem Herunterscrollen nicht mehr zu erkennen, da er nicht automatisch in einer dunkleren Farbe (z.B. schwarz) umgewandelt wird wie auf der besagten Website.

(Navigationspunkte (inaktiv) in weißer Schriftfarbe)

(Beim Herunterscrollen überlager das Logo Website-Inhalte und Navigationspunkte sind nicht mehr lesbar)

Wäre es evtl. auch möglich, dass das ZP-Team eine solche Funktion durch Layout-Updates "nachzurüstet"?

Obwohl ich nach wie vor sehr gerne mit dem ZP arbeite und auch bereits die Version 14 (Business) erworben habe, würde ich mir wünschen, dass die Flexibilität von ZP-Layouts generell verbessert würde. Auch das sich bspw. die mobile Darstellung des Menü-Buttons nicht wirklich beeinflussen lässt, finde ich weiterhin schade.

Gerade die Navigation (egal ob Desktop-Darstellung oder Mobildarstellung) fällt doch jedem Seitenbesucher ins Auge, schließlich nutzt diese jeder Seitenbesucher häufig. Dadurch wird aber auch deutlich, dass sich diese bei etlichen ZP-Layouts gleichen wie ein Ei dem Anderen.

Da meine Kunden natürlich gerne vorab Website-Referenzen sehen, wurde ich genau auf diesen Punkt bereits mehrfach angesprochen mit dem nachfolgenden Hinweis, man hätte das dann aber gerne in einer anderen Weise dargestellt.

Wenn ich hierauf aber als Anwender des ZP keinen oder nur eingeschränkten Einfluss habe, sind mir hier leider bereits die Hände gebunden und ich kann dem Kundenwunsch nicht nachkommen.

Ändert man selbst etwas (im Entwicklermodus) am Layout, dann ist es ja nicht zuletzt auch so, dass in dieses dann von Updates durch ZP nicht mehr unterstützt wird und/oder ggf. bei künftigen Updates des Zeta Producer nicht kompatibel ist und hierdurch wohl Mehrarbeit entsteht.

Ein CMS erwerbe und nutze ich allerdings, um eben den Arbeitsaufwand zu verringern.

Besten Dank vorab!

Mario

Hallo Jörg,

Zu deiner ersten Frage, ich habe HIER ein kleines Script veröffentlicht. Damit kannst du all diese Sachen verwirklichen. HIER habe ich zB. mit dem gleichen Script einen kleinen Test gestartet, ab bestimmter Scrollposition wird das Logo ausgeblendet und die Navigation wandert nach oben.
Den Menü-Button kannst du einfach per CSS problemlos anpassen.
Für all diese Sachen ist es keinesfalls Notwendig das Layout zu kopieren. Somit sind diese auch bei künftigen Updates nicht ausgeschlossen.

PS: Die von dir angesprochenen Layouts Producer-Responsive und Stripe-Responsive lassen sich super anpassen. Damit kann man so ziemlich alles anstellen. Poster Responsive ist da allerdings etwas Eigenwillig, da geht nicht so viel.

Mario

Ich habe das mal kurz getestet.

Hier die Seite inkl. Code. LINK

Stefan S

Zitat von Joerg

Wäre es evtl. auch möglich, dass das ZP-Team eine solche Funktion durch Layout-Updates "nachzurüstet"?

Es wäre sicherlich möglich in den Layout-Einstellugen noch separate Einstellungen für "Hauptmenü fixiert" einzufügen. Das macht aber die Einstellungen immer komplexer. Wir bewegen uns hier immer auf dem schmalen Grat, es dem "Gros" der Benutzer so einfach, wie möglich zu machen und dabei den "Experten" auch genügend Einstellungen zu bieten.

Manchmal entscheiden wir uns für weniger komplexe Einstellungen zum Wohle der Allgemeinheit, weil wir auch denken, dass die Experten mit angepasstem CSS/JS eigentlich alles gewünschte erreichen können.

In diesem Sinne nehme ich Ihren Vorschlag gerne in unsere interne "Wunschliste" auf.

Joerg

Hallo Mario,

herzlichen Dank!

Super, dass Du quasi immer eine Lösung parat hast, dafür ein ganz dickes Lob!

Ich werde versuchen, Deine Tipps umzusetzen und sie helfen mir in jedem Fall schon viel weiter!

Was ich auf Deiner Test-Seite gesehen habe, ist klasse umgesetzt!

Leider bin ich kein Experte, was Programmierung angeht. Ich bin in erster Linie im grafischen Bereich tätig (weshalb ich ja ein CMS nutze).

Stefan S

Hallo Herr Seiz,

auch Ihnen Danke für die Rückmeldung!

Mario hat mir schon sehr weitergeholfen!

Diese Lösung bedeutet aber, dass ich die Einträge für jedes Projekt neu einstellen muss - mit "Hausmitteln" würde das eben einfacher und mit weniger Aufwand gehen.

Vielleicht hätte man von vornherein bei den Layouts eine solche Funktion integrieren sollen, denn es macht ja Sinn, dass Website-Content nicht - wie im Beispiel gezeigt - durch das Logo überdeckt und die Navigation teils nicht mehr lesbar ist.

Ich verstehe schon, dass man versucht, einen "Mittelweg" zu finden.

Verstehen Sie es bitte nicht falsch, aber wenn es heißt "weniger komplexe Einstellungen zum Wohle der Allgemeinheit", dann verstehe ich andererseits aber nicht, weswegen dann die Einstellungen/Features bei den (responsiven) Layouts nicht einheitlich sind.

Genau dies verkompliziert nämlich die Arbeit nicht weniger (Funktionsbeschreibungen zu den einzelnen Layouts des ZP sind leider nicht vorhanden, wie dies bspw. bei Joomla!-Templates die Regel ist). Man kann sich die jeweiligen Funktionen (bzw. Einschränkungen aber kaum allesamt merken).

Wegen meiner mangelnden Programmierkenntnisse kann ich nebenbei bemerkt auch nicht wirklich nachvollziehen, weswegen die Funktionalitäten der Layouts offenbar unterschiedlich sind - oder (nur zum Verständnis) anders gesagt: Wieso werden die Layouts nicht von vorherein so programmiert, dass die Funktionen identisch sind?

Wenn mit dem "Gros" der Benutzer Einzelanwender gemeint sind, die ihre eigene(n) Website(s) mit dem ZP erstellen (das ist nicht negativ gemeint!), dann ist es ja auch z.B. ok, wenn die Menü-Darstellung sich gleicht.

Nicht aber, wenn man für Dritte Websites erstellt, diese (potentiellen) Kunden vorab Referenzen sehen wollen und ihnen genau diese Ähnlichkeiten sofort ins Auge fallen. Wie bereits erwähnt, bin ich darauf schon mehrfach angesprochen worden.

Da ich eben im Auftrag Dritter arbeite habe ich mich auch für die Business-Version entschieden und nicht für die kostengünstigere Express-Variante. Ein CMS nutze ich, um den Arbeitsaufwand zu reduzieren (zu meinen Arbeiten gehört auch die SEO-Optimierung der Kunden-Websites, das funktioniert mit dem ZP weit besser als bei anderer Software).

Joerg

Mario

Hallo nochmal,

also das hat nun schon sehr gut funktioniert!

Nun hätte ich noch eine weitere Frage dazu, die ich Gestern leider vergaß.

Am gestrigen Beispiel mit dem "Standard-Logo", dass Du auch auf der Test-Website genutzt hast, möchte ich meine Frage stellen:

Ist es umsetzbar, dass das Logo auf dem Headerbild zunächst weiß dargestellt wird und (nachdem man das "Ende" des Headerbildes erreicht hat und der Hintergrund der Navigation sich in weiß ändert sowie die Schrift in schwarz) dass das Logo ab diesem Bereich schwarz angezeigt wird?

Zudem statt einer Linie ein "Schatten" unterhalb der Navigation, sobald der Hintergrund weiß angezeigt wird?

Im Prinzip also wie auf http://www.vvvzeeland.nl/de?

Nochmals herzlichen Dank vorab!

Mario

Zitat von Joerg

Ist es umsetzbar, dass das Logo auf dem Headerbild zunächst weiß dargestellt wird und (nachdem man das "Ende" des Headerbildes erreicht hat und der Hintergrund der Navigation sich in weiß ändert ...

Das sollte ebenfalls mit diesem Script gehen. Ab einer bestimmten Scrollposition das Logo ausblenden und ein neues Logo einblenden.

Zitat von Joerg

Zudem statt einer Linie ein "Schatten" unterhalb der Navigation, sobald der Hintergrund weiß angezeigt wird?

Das hat bei meinem Test nicht funktioniert. Deshalb habe ich den Border genommen.

Mario

Ich habe mich der Sache nochmal angenommen.

Was du noch vergessen hast ist der Mobile Navigationsbutton, dieser muss ja in dem Fall auch seine Farbe ändern.

Ich fasse noch einmal zusammen.

Ab Scrollposition Null:

Logobereich Transparent
Navigation Weiß
Logo1 in Weiß
Mobiler Navigationbutton Weiß

Ab einer Scrollposition von 300 Pixeln:

Logobereich Weiß (leicht durchscheinend)
Logobereich unten Schatten
Navigation Schwarz
Logo2 in Schwarz
Mobiler Navigationbutton Schwarz

LINK zur Testseite.

Da kommt dann schon ein wenig Code zusammen. Ich hoffe du blickst da noch durch.

Einstellungen > CSS

CSS

<style>
.noshadow, .noshadow > .navbar-inner {
    background:transparent;
    min-height: 60px;
    transition: all 0.2s ease 0s;
}
@media (max-width: 568px) {
.noshadow, .noshadow > .navbar-inner {
    min-height: 60px !important;
}}

.navbar .nav > li > a {
    color: #fff;
}
.navbar .nav > li.active > a {
    color: #fff;
}

.llogo {
position: fixed;
top:10px;
margin-left:-475px;
left:50%;
z-index:6100;
}
@media (max-width: 975px) {
.llogo {
    margin-left:0;
left:10px;
}}
.llogo2 {
display: none;
position: fixed;
top:10px;
margin-left:-475px;
left:50%;
z-index:6100;
}
@media (max-width: 975px) {
.llogo2 {
    margin-left:0;
left:10px;
}}

.navbar-inner button.btn-navbar, .navbar-inner button.btn-navbar:hover{
color: #fff;
    border: 1px solid #fff;
}
</style>

Alles anzeigen

Widget > Quelltext

CSS

        <!-- LOGO -->
<div class="llogo"> 
<a href="https://www.zella.de" target="_self"><img title="zur Startseite" alt="" border="0" src="https://www.zella.de/code/bilder/logo/logowe.png" alt="Logo"></a></div>
<div class="llogo2"> 
<a href="https://www.zella.de" target="_self"><img title="zur Startseite" alt="" border="0" src="https://www.zella.de/code/bilder/logo/logosw.png" alt="Logo"></a></div>


<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery(window).scroll(function(){
        if(jQuery(this).scrollTop()>=300){
        jQuery('.noshadow, .noshadow > .navbar-inner').attr('style','background: rgba(255, 255, 255, 0.98); box-shadow: 0px 10px 7px -6px rgba(0,0,0,0.2) !important;');
            jQuery('.navbar .nav > li > a').attr('style','color: #000;');
jQuery('.llogo').attr('style','display: none;');
jQuery('.llogo2').attr('style','display: block;');
jQuery('.navbar-inner button.btn-navbar, .navbar-inner button.btn-navbar:hover').attr('style','color: #000; border: 1px solid #000;');
    }   
        else if (jQuery(this).scrollTop()<300) {
        jQuery('.noshadow, .noshadow > .navbar-inner').attr('style','background:transparent !important;');
            jQuery('.navbar .nav > li > a').attr('style','color: #fff;');
jQuery('.llogo').attr('style','display: block;');
jQuery('.llogo2').attr('style','display: none;');
jQuery('.navbar-inner button.btn-navbar, .navbar-inner button.btn-navbar:hover').attr('style','color: #fff; border: 1px solid #fff;');
        }
    })
})
</script>

Alles anzeigen

PS: Wenn du das ganze jetzt so in Stripe Responsive erstellst und auf dem Handy anschaust wirst du wahrscheinlich feststellen das sich die Änderung des Logo-Bereiches zu spät einstellt (300px). Deshalb habe ich im im Layout-Designer die Grundeinstellung (vw) in (60vh) geändert. Somit sollte genügend Raum für alle Bildschirme vorhanden sein. Wichtig ist hierbei das der Focus deiner Header-Grafik im Zentrum liegt.

Nochmal PS: Im Querformat (Handy passt das noch nicht ganz). Ich kenne deine Header-Grafik leider nicht.

Entweder das (60vh) im Layout-Designer hoch setzen oder eben die 300px Scrollposition runter setzen. Musst du einfach testen wie deine Header-Grafik dann besser zur Geltung kommt.

Mehr Flexibiliät bei Layouts

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?