WebSite X5Help Center

 
Benjamin T.
Benjamin T.
User

Sticky bar unten  de

Автор: Benjamin T.
Просмотрено 38, Подписчики 0, Размещенный 0  

Hallo zusammen, wie kann ich die Stick bar am unteren Rand festmachen, bislang funktioniert das nur mit Sticky Buttons, die gehen aber nicht über die gesamte Breite und sind in sich nicht multibel variabel. Was eigentlich sehr schade ist, da hier ganz klar CTA´s deutlich platziert werden könnten! :)
Bin gespannt! Vielen Dank!

Размещено
12 Ответы
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

Vielleicht melden sich noch die CSS-Experten und können eigenen Code anbieten.

Ansonsten kann auch das Objekt "Sticky Button" verwendet werden und mit zusätzlichem CSS-Code für eine breitere Anzeige gesorgt werden.

Kleine Anleitung:

1) Objekt "Sticky Button" im Footer platzieren.

2) Zusätzlicher CSS-Code unter "1 Einstellungen > Statistiken und Code / Code" einfügen:

    #icm_stickybuttonimFooter_pluginAppObj_03 { width: 100vw; }

Die Zahl _03 muss individuell ermittelt werden, damit es auch funktioniert.

Beim Test geht der Streifen nur rechts bis zum rechten Rand des Browser, aber links nicht ganz.

----- Screenshot -----

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

Jetzt hat es mit der vollen Breite geklappt, siehe Einstellung im Screenshot (2) die Markierung

----- (1) -----

----- (2) -----

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

Und hier noch der Link zur Testseite, um sich die Sache anzuschauen, siehe

>> https://findelinks.de/123test-aufklappmenue-2/

Der gelbe Streifen ist verlinkt zu einer Seite, bei der ein Motorrad ins Bild fährt.

Dieser "ins Bild fahren"-Effekt wird auch in einem kostenpflichtigen Templates verwendet.

Zum Nachbauen ohne kostenpflichtiges Templates gibt es eine Anleitung.

Читать больше
Размещено От Daniel W.
Benjamin T.
Benjamin T.
User
Автор

Hallo zusammen, wie kann ich die Stick bar am unteren Rand festmachen, bislang funktioniert das nur mit Sticky Buttons, die gehen aber nicht über die gesamte Breite und sind in sich nicht multibel variabel. Was eigentlich sehr schade ist, da hier ganz klar CTA´s deutlich platziert werden könnten! :)
Bin gespannt! Vielen Dank!
Nur zum klarer lesen, da der Text oben durchgestrichen ist und ich ihn nicht mehr abändern kann.                      Vielen Dank, Daniel. Ich ahbe da noch ein paar Fragen: Wo im Code eintragen und wie ermittle ich die Zahl?
Beste  Grüße

Читать больше
Размещено От Benjamin T.
Benjamin T.
Benjamin T.
User
Автор

Hallo zusammen, wie kann ich die Stick bar am unteren Rand festmachen, bislang funktioniert das nur mit Sticky Buttons, die gehen aber nicht über die gesamte Breite und sind in sich nicht multibel variabel. Was eigentlich sehr schade ist, da hier ganz klar CTA´s deutlich platziert werden könnten! :)
Bin gespannt! Vielen Dank!
Nur zum klarer lesen, da der Text oben durchgestrichen ist und ich ihn nicht mehr abändern kann.                Vielen Dank, Daniel. Ich ahbe da noch ein paar Fragen: Wo im Code eintragen und wie ermittle ich die Zahl?
Beste  Grüße

Читать больше
Размещено От Benjamin T.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

Die StickyBar hat ja den Effekt beim Scrollen, vielleicht finde ich eine Lösung. Allerdings bin ich kein CSS-Experte und von Javascript verstehe ich fast gar nichts.

Zum Objekt "Sticky Buttons" - das muss mit Extra-CSS-Code auf die volle Browserbreite erweitert werden, da ich bisher noch keine Option dafür im Objekt finden konnte.

Ermitteln der benötigten Zahl:

Bei WebSite X5 in der Vorschau unten auf das Objekt "Sticky Button" mit der rechten Maustaste klicken und "Quellcode anzeigen" auswählen, es öffnet sich ein Fenster und dort ist die Zahl zu finden, siehe Markierung im Screenshot

-----

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

Vielleicht können die CSS-Experten den CSS-Code noch ergänzen, damit längere Texte auch auf schmäleren Bildschirmen sowie auf Tablets und Smartphones richtig angezeigt werden.

Vielleicht könnten die CSS-Experten auch einen CSS- und/oder Javascript-Code für die StickyBar zur Verfügung stellen, da ich nicht weiß, ob meine Kenntnisse dafür ausreichen.

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

Falls ich mich nicht irre, dann hatte KolAsim vor einigen Monaten einen Code gepostet für einen Nutzer mit ähnlichem Wunsch, vielleicht kann er den Code posten oder den Post verlinken.

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

Alles auf NEU - Footer fixiert:

Bei meiner Testseite das Objekt "Sticky Button" entfernt und neben Header auch Footer fixiert.

CSS-Code bei WebSite X5 unter "1 Einstellungen > Statistik und Code / Code":

     Benutzerdefinierter Code:

     Vor dem </HEAD> Tag

<style>
#imHeaderObjects {
position: fixed;
display: block;
background-color: pink;
width: 100%;
z-index: 1000000;
}
#imHeaderBg {
position: fixed;
background-color: pink;
}
#imFooterObjects {
position: fixed;
bottom: 0;
display: block;
background-color: pink;
z-index: 1200000;
}
#imFooterBg {
position: fixed;
background-color: pink;
z-index: 1000000;
}
</style>

Somit gibt es eine größere Gestaltungsmöglichkeiten beim fixierten Footer.

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

Je nach Platzbedarf unter "2 Vorlage > Struktur des Templates" die Höhe bei "Seitenbereich" für "Fußzeile" und "Hintergrund der Fußzeile" für alle Bildschirmbreiten einstellen.

Und vielleicht kennen die anderen Nutzer weitere Möglichkeiten für einen fixierte Bereich.

Читать больше
Размещено От Daniel W.
Benjamin T.
Benjamin T.
User
Автор

Oje, ganz ehrlich, das hört sich kompliziert an. Ich möchte etwas einfaches, was ich variabel gestalten kann, wie eben die Sticky leiste, nur eben unten.
So wie auf dem Screenshot zu sehen ist.

Читать больше
Размещено От Benjamin T.