Slider als Kopfgrafik

    Suche und "übe" nun seit Stunden, kapiere hier so einiges nicht …., alle gefundenen und ausprobierten Lösungsvorschläge führen nicht zum Ziel ….


    Verwendetes Layout: Athmosphere Responsive:


    Slider (mit Logo und Text) als Kopfgraphik eingebaut.


    Wie passe ich die Containergrösse an? Sollte die absolut identische Grösse des Sliders erhalten.



    Kann mir hier irgendjemand weiterhelfen?


    Gruss Beat

    Hallo,


    wenn Sie uns bitte mal genau beschreiben, was Sie umsetzen möchten, also was genau Ihr Ziel ist, dann können wir Ihnen vielleicht besser helfen und ein passendes Vorgehen beschreiben.

    Freundliche Grüße
    Steffen T. (Zeta Producer-Support)

    Hallo


    Ich möchte eine "Kopfgraphik" ganz oben auf allen Seiten meiner Homepage https://www.asgs.ch/index.php . Zur Zeit habe ich das mit einem Slider gelöst, funktioniert eigentlich einwandfrei. Optisch störend ist (vgl. Bild oben) der "Rahmen", dieser schient durch die Grösse des "Containers" bestimmt zu sein. Es gelingt mir nicht, die Grösse dieses "Containers" zu verändern.


    Es ist mir konzeptionell nicht klar, woher dieser "oberste" Container stammt. Hinweise (in anderen Beiträgen gefunden) auf "Layout/Allgemein/Container" führen nirgends hin, da bei mir dort nichts von "Container" steht. Nennt sich dieser "Container" bei diesem Layout "Header"? (Nehme an, dass ein Header das gleiche ist, wie "Kopfgraphik"). Sollte dieser Container der "Header" sein finde ich nirgends Hinweise, wie ich die Grösse anpassen könnte. Das Ganze ist für Anfänger wie mich eher etwas verwirrend, dies umso mehr, als dass ich kaum nützliche Hinweise gefunden habe, um mein "Problem" zu lösen.


    Danke im voraus für die Hilfe.


    Gruss B

    Hallo Beat,


    wechsle mal mit F8 in die Spaltenansicht und füge dann in der Spalte "Header" das Wigdet "Header" ein. Hierbei handelt es sich um einen speziellen Slider, der nur für den obersten Bereich der Seite gedacht ist. Eventuell ist das die Lösung.

    Hallo Thomas


    Danke für den HInweis, erste Versuche mit dieser Methode haben noch nicht zum Ziel geführt, ich probiere weiter und werde mich dann wieder melden.


    Freundliche Grüsse

    Beat

    Danke Mario


    Werde das so versuchen, sobald ich Zeit habe. Nur zur Info: Die Lösung mit dem "Slider" war bis dato die einzige Möglichkeit für mich als Anfängeres inetwa so hinzukriegen wie ich es mir vostellte. Konzeptionell habe ich das Ganze aber offensichtlich immer noch nicht begriffen. Hier spricht man nun wieder vom Headerbereich (in meinem Verständnis ist ein Header etwas das oben auf allen Seiten dargestellt wird). Frei "positionieren" kann man (oder ich) den Header nicht und auch die Grösseneinstellung ist für mich eher rätselhaft. àhnlich verhält es sich mit dem Logo (Positionierung/Grösse). Bleibt das Widget "Slider", das mir diesbezüglich noch am flexibelsten scheint.


    Nochmals besten Dank, irgendwannn werde auch ich das Ganze begreifen.


    Gruss Beat

    Hallo Beat,


    wenn ich Dich richtig verstehe, geht es eigentlich nur darum, Logo und Vereinsbezeichnung oben anzuzeigen. Der einfachste Weg wäre über die von Zeta gelieferten Bordmittel "Logo" und "Webseitename / Slogan".


    Vorbereitung:

    - besorge dir das ASGS-Logo in einer Auflösung von 100 x 100 Pixel (nur Logo ohne Text) mit transparentem Hintergrund


    Durchführung:

    1. Mache in Zeta ein Backup des Projektes oder kopiere den kompletten Projektordner auf einen USB-Stick, damit Du das ursprüngliche Projekt bei Nichtgefallen der Änderungen wiederherstellen kannst.
    2. Gehe auf "Layout" -> "Logo"
      1. Trage unter "Top-Line" eine Mindest-Höhe von 100 px ein
      2. Ändere unter "Grafik" die Breite und Höhe jeweils auf 100 px
      3. Gehe auf "Logografik" und wähle dort als Bilddatei das transparente ASGS-Logo aus
      4. Speichere die Änderung am Layout.
    3. Gehe auf "Einstellungen" -> "Elemente"
      1. aktiviere dort "Logo anzeigen"
      2. aktiviere "Website-Name anzeigen
        1. Trage bei Name "ASGS" ein
        2. trage bei Slogan "Swiss Senior Golf" ein
      3. mit OK Bestätigen


    Das Ganze sieht dann ungefähr so aus wie unter https://hosting.zeta-producer.com/6339181579/index.html dargestellt, ich habe hier auf die Schnelle nur das selbe Layout rausgesucht und die Grafik von Eurer Seite runtergeladen und auf 100 x 100 beschnitten.


    Ich würde vorschlagen, dass Du grundsätzlich bei den Standardwerkzeugen von Zeta bleibst, da dann Fragen oft schneller beantwortet werden können oder gar nicht erst entstehen.

    Hallo Thomas


    Ganz herzlichen Dank, super Service.


    Bin jetzt leider 2 Tage abwesend, werde das Ganze genau so machen wie von Dir beschrieben. Werde mich dann nochmals melden.


    Freundliche Grüsse

    Beat

    Hallo Thomas


    Habe das Ganze nun exakt so "nachgebaut" wie von Dir beschrieben. Der Tipp war mit Sicherheit gut, ich glaube nun das Prinzip einigermassen kapiert zu haben.


    Leider ist aber das "Schlussresultat" für mich nicht brauchbar. Wie Du der Beilage entnehmen kannst, würde die Lösung bestens funktionieren, wäre der Hintergrund oben "weiss", was bei mir nicht der Fall ist.


    Ich versuche es halt weiter, eine Lösung zu finden, bei welcher ich den Slider oben bzw. dessen Hintergrund anders hinkriege (aktuelle Lösung). Sollte das nicht gelingen, lasse ich es dann halt bleiben, es geht ja einigermassen wie es ist.


    Gleichwohl nochmals besten Dank für die grosse Unterstützung.


    Freundliche Grüsse

    Beat

    Du solltest das so machen wie vom Thomas beschrieben.


    Um den Hintergrund einzufärben gehst du folgendermaßen vor.

    Ich habe ein Lösung genommen wo der Hintergrund nicht die volle breite annimmt, sieht bestimmt besser aus.


    Gehe zum Layoutdesigner > Logo > Topline, hier gibst du 120 ein. Darunter "Position > Abstand Links" gibst du 0 ein.


    Gehe zu Einstellungen > CSS und kopiere dort folgendes ein.

    Code
    1. <style>
    2. #webinfo {
    3.     background-color:rgba(255, 255, 255, 0.8);
    4.     padding: 0 50px;
    5.     border-radius: 10px;
    6. }
    7. </style>

    Damit das besser zu deinem Layout passt habe ich wie im Inhaltsbereich das Weiß leicht durchscheinend gestaltet und Runde Ecken hinzu gefügt.

    Das kannst du natürlich abändern.

    1. Zeile "background-color": 0.8 gibt die Transparenz an, 1.0 wäre ohne Transparenz.
    2. Zeile "padding": die 50px geben den Abstand des Hintergrundes rechts und links vor. Die Höhe ergibt sich aus den Layouteinstellungen Höhe Logo und Höhe Topline.
    3. Zeile "border-radius": erstellt die Runden Ecken, wenn nicht gewünscht einfach die komplette Zeile löschen.

    Das ganze würde dann so aussehen. LINK

    Zitat von beat.michel

    Leider ist aber das "Schlussresultat" für mich nicht brauchbar. Wie Du der Beilage entnehmen kannst, würde die Lösung bestens funktionieren, wäre der Hintergrund oben "weiss", was bei mir nicht der Fall ist.

    Das müssten Sie ggf. auch spezifizieren. Es könnten z.B. gut funktionieren, wenn Sie in den Layout-Einstellungen die Schriftfarbe für den Webnamen auf "#ffffff" setzen… Zumindest wäre es dann lesbar.

    Hallo Mario und Stefan


    Problem gelöst! Habe mich zu 100% an Eure Anweisungen gehalten und mittels des CSS von Mario das nun genau so hingekriegt wie gewünscht.


    Ganz herzlichen Dank an Euch beide, so macht "arbeiten" schon fast Spass.


    Freundliche Grüsse

    Beat