WebSite X5Help Center

 
Benjamin T.
Benjamin T.
User

Sticky bar unten  de

Autor: Benjamin T.
Visitado 285, Seguidores 1, Compartilhado 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!

Publicado em
23 RESPOSTAS
Daniel W.
Daniel W.
User
Usuário do mês DEUsuário do mês 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 -----

Ler mais
Publicado em de Daniel W.
Daniel W.
Daniel W.
User
Usuário do mês DEUsuário do mês EN

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

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

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

Ler mais
Publicado em de Daniel W.
Daniel W.
Daniel W.
User
Usuário do mês DEUsuário do mês 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.

Ler mais
Publicado em de Daniel W.
Benjamin T.
Benjamin T.
User
Autor

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

Ler mais
Publicado em de Benjamin T.
Benjamin T.
Benjamin T.
User
Autor

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

Ler mais
Publicado em de Benjamin T.
Daniel W.
Daniel W.
User
Usuário do mês DEUsuário do mês 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

-----

Ler mais
Publicado em de Daniel W.
Daniel W.
Daniel W.
User
Usuário do mês DEUsuário do mês 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.

Ler mais
Publicado em de Daniel W.
Daniel W.
Daniel W.
User
Usuário do mês DEUsuário do mês 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.

Ler mais
Publicado em de Daniel W.
Daniel W.
Daniel W.
User
Usuário do mês DEUsuário do mês 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.

Ler mais
Publicado em de Daniel W.
Daniel W.
Daniel W.
User
Usuário do mês DEUsuário do mês 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.

Ler mais
Publicado em de Daniel W.
Benjamin T.
Benjamin T.
User
Autor

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.

Ler mais
Publicado em de Benjamin T.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês PL

(It > De)  ...  Wenn das Menü kein Untermenü, sondern nur normale Hauptmenüpunkte enthält, können Sie das „Menüobjekt" einfach in die Fußzeile einfügen. Um es beim Scrollen der Seite immer sichtbar zu machen, fixieren Sie es am unteren Rand mit einem einfachen zusätzlichen Code wie diesem:
<style> #imFooter_imMenuObject_05 {position:fixed;bottom:5px !important;background-color:lavender}</style>

... Ersetzen Sie die ID durch die ID Ihres Objekts:
#imFooter_imMenuObject_05

.

ciao

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Benjamin T.
Benjamin T.
User
Autor

möchte kein Menü anhängen, möchte CTA anhängen. Das geht nur mittels einer Sticky bar...

Ler mais
Publicado em de Benjamin T.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês PL

... Möchten Sie eine feste Leiste am unteren Fensterrand positionieren...?...
... Wenn ja, können Sie dies mit DIV_CUSTOM und dem Code EXTRA erreichen.

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Benjamin T.
Benjamin T.
User
Autor

Ich möchte einen festen Balken am unteren Fensterrand positionieren

Ler mais
Publicado em de Benjamin T.
Daniel W.
Daniel W.
User
Usuário do mês DEUsuário do mês EN

Man könnte auch einfach ein Text-Objekt nehmen und das per CSS-Code fixieren.

Kleine Anleitung:

1) Text-Objekt mit Texten und Symbolen auf 1 Seite platzieren

     (Text zentrieren, Leerzeichen für etwas Abstand)

2) Das Text-Objekt im Raster markieren, oben auf "Code" klicken und diesen Code hinzufügen

position: fixed;
bottom: 0;
display: block;
background-color: pink;
z-index: 100;

Siehe Screenshot

3) Bei Bedarf dieses Text-Objekt kopieren und auf anderen Seiten einfügen

Mein Testseite dazu (fixiertes Text-Objekt bei Homepage und Contact)

>> https://findelinks.de/123test-autohandel/

Ler mais
Publicado em de Daniel W.
Daniel W.
Daniel W.
User
Usuário do mês DEUsuário do mês EN

Als Ergänzung noch diese Einstellungen bei den Links, siehe Screenshot

-----

Ler mais
Publicado em de Daniel W.
Andreas S.
Andreas S.
Moderator

Wieso nimmst du nicht die "Datenschutzleiste" und stellst sie auf unten anzeigen. Die ist auch immer unten fixiert.

Ler mais
Publicado em de Andreas S.
Benjamin T.
Benjamin T.
User
Autor

Hi Andreas, das war in der Tat auch mein erster Gedanke. Diese lässt sich jedoch schließen, was ich nicht möchte. Zudem lassen sich keine Objekte in ihr integrieren und sie ist vom Format starr. Gute Idee!

Ler mais
Publicado em de Benjamin T.
Benjamin T.
Benjamin T.
User
Autor

DAniel, Dein Ansatz ist super, wie bekommt man den Footer hinter die Leiste?

Ler mais
Publicado em de Benjamin T.
Benjamin T.
Benjamin T.
User
Autor

hab´s hinbekommen, den z-index auf 9999. Das sieht super aus. Mach es bei Dir auch, dann bleibt der Inhalt des Footer hinter dem Banner. Vielen Dank!

Ler mais
Publicado em de Benjamin T.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês PL
Daniel W.
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.

... vielleicht beziehen Sie sich auf die schwebende Leiste am Ende dieses Themas:
https://helpcenter.websitex5.com/pt/post/273075
... mit einem ähnlichen Ergebnis wie der feste Vorschlag, den Sie gerade gegeben haben, ... Hallo, ciao.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪