WebSite X5Help Center

 
Michael G.
Michael G.
User

Buttons unterer Rand am Smartphone  de

Author: Michael G.
Visited 2048, Followers 2, Shared 0  

Hallo,

ich möchte das Thema noch mal aufgreifen, da ich immer mehr Seiten sehe die so etwas haben.
Die haben am unteren Rand (nur in der Smartphone Ansicht, kleinste Ansicht) feste Buttons. Die Seite inkl. Fußzeile wird trotzdem sichtbar sein und dahinter lang scrollen.

Auf manchen Seiten sind es: 1x breiter Button mit Text und 1x kurzer Button mit Icon oder 2x gleich Breite Buttons usw.
Vielleicht kann man sowas ähnliches auch mit X5 erstellen?  

Posted on the
35 ANSWERS - 1 USEFUL
Andreas S.
Andreas S.
Moderator
Best User of the month DE

Nenne uns eine Seite!  Wieso nimmst du nicht das "Mobile Contact" Widget?

Read more
Posted on the from Andreas S.
Michael G.
Michael G.
User
Author

dieses Widget ist doch wie ein fliegender Button oder? Kann man bei diesem Widget nur 2 Buttons auswählen?

Ich meine aber auch Buttons fest am unteren Rand. Und dahinter scrollt die Seite

Read more
Posted on the from Michael G.
Andreas L.
Andreas L.
User

@Andreas, Michael meint glaube ich das was ich auch mal hier angefragt hatte. Ich finde nur diesen Artikel nicht, wir sind da mit X5 aber glaube ich auch zu keiner Lösung gekommen.

Read more
Posted on the from Andreas L.
Michael G.
Michael G.
User
Author

@Andreas L., du hast Recht. Daher wollte ich das Thema noch mal aufgreifen, vielleicht hat in der Zeit jemand eine Idee oder Lösung gefunden.

Read more
Posted on the from Michael G.
Andreas L.
Andreas L.
User

Unter X5 leider keine Lösung.

Read more
Posted on the from Andreas L.
Klaus W.
Klaus W.
User

@ Andreas L: Ich denke, du meinst das hier:

'2. Einstellungen' > 'Erweitert' > 'Statistiken, SEO und Code' > 'Code'

Dann vor dem </HEAD> Tag den Text zwischen den nächstenn beiden gestichelten Linien hineinkopieren:

-------------------------------------------------------------------------------------------------------------

<style>

@media (min-width:600px) { .actionbuttons{display:none} }

@media (max-width:599px) { .clear{clear:both}

i.mobile{background-attachment:scroll;background-clip:border-box;background-color:transparent;background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDEzLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMTQ5NDgpICAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjIiIGJhc2VQcm9maWxlPSJ0aW55IiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKCSB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEzLjgxOHB4IiBoZWlnaHQ9IjE5LjA3NHB4IiB2aWV3Qm94PSIzLjc0IDEuMzcyIDEzLjgxOCAxOS4wNzQiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0xMy45MjYsMTQuNTkxbDIuMjE4LDQuNzU2bDAuNTU4LTAuMjYzYzAuNzI1LTAuMzM4LDEuMDYzLTEuMjY4LDAuNzI2LTEuOTkzbC0wLjk0Ny0yLjAzMwoJCWMtMC4xNzEtMC4zNjMtMC40NzItMC42MzktMC44NDgtMC43NzZjLTAuMzc1LTAuMTM2LTAuNzgzLTAuMTE4LTEuMTQ2LDAuMDQ5TDEzLjkyNiwxNC41OTF6Ii8+Cgk8cGF0aCBkPSJNMTAuNzI0LDYuMjY1YzAuNzI2LTAuMzM3LDEuMDY0LTEuMjY3LDAuNzI2LTEuOTkzbC0wLjk0OC0yLjAzNGMtMC4xNjktMC4zNjMtMC40Ny0wLjYzOC0wLjg0Ny0wLjc3NQoJCWMtMC4zNzYtMC4xMzctMC43ODMtMC4xMi0xLjE0OSwwLjA1MUw3Ljk1MSwxLjc3N2wyLjIxMyw0Ljc0OEwxMC43MjQsNi4yNjV6Ii8+Cgk8cGF0aCBkPSJNMTQuNDA3LDIwLjE1NGwwLjQ1My0wLjIxMmwtMi4yMTYtNC43NTNsLTAuODMyLDAuMzljLTAuMTIzLDAuMDU2LTAuMjU3LDAuMDYyLTAuMzgzLDAuMDE2CgkJYy0wLjEyNS0wLjA0Ni0wLjIyNS0wLjEzOC0wLjI4Mi0wLjI1OEw3LjgwOSw4LjE3NUM3LjY5Niw3LjkzNCw3LjgwOCw3LjYyNCw4LjA1MSw3LjUxMWwwLjgzMy0wLjM4OGwtMi4yMi00Ljc0OEw2LjIxLDIuNTg2CgkJQzUuODc2LDIuNzQyLDQuNzQ1LDMuMzc5LDQuMTI2LDUuMDgxYy0wLjU1MiwxLjUxOC0wLjc4Nyw0LjI0MywxLjI0MSw4LjU5M0M5LjQxNywyMi4zNTUsMTQuMiwyMC4yNSwxNC40MDcsMjAuMTU0eiIvPgo8L2c+Cjwvc3ZnPgo='), none;background-origin:padding-box;background-position:0 11px;background-repeat:no-repeat;background-size:auto auto;width:45px}

i.email{background-attachment:scroll;background-clip:border-box;background-color:transparent;background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDEzLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMTQ5NDgpICAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iMjEuNTUycHgiIGhlaWdodD0iMTcuOTM4cHgiIHZpZXdCb3g9Ii0wLjAzMSA0LjA2MyAyMS41NTIgMTcuOTM4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IC0wLjAzMSA0LjA2MyAyMS41NTIgMTcuOTM4IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBkPSJNMTAuNzQ1LDEzLjkyOGMtMS43NTIsMC0xMC43NzYtNy4yNzItMTAuNzc2LTcuMjcyVjUuODU2YzAtMC45OSwwLjgwNC0xLjc5NCwxLjc5NS0xLjc5NGgxNy45NjEKCWMwLjk5MiwwLDEuNzk2LDAuODA0LDEuNzk2LDEuNzk0bC0wLjAxNCwwLjg5NkMyMS41MDgsNi43NTMsMTIuNTgxLDEzLjkyOCwxMC43NDUsMTMuOTI4eiBNMTAuNzQ1LDE2LjM5NQoJYzEuOTIsMCwxMC43NjMtNi45NTEsMTAuNzYzLTYuOTUxbDAuMDE0LDEwLjc2MmMwLDAuOTktMC44MDQsMS43OTQtMS43OTYsMS43OTRIMS43NjVjLTAuOTkxLDAtMS43OTUtMC44MDQtMS43OTUtMS43OTQKCWwwLjAxNC0xMC43NjJDLTAuMDE4LDkuNDQ0LDguOTkzLDE2LjM5NSwxMC43NDUsMTYuMzk1eiIvPgo8L3N2Zz4K'), none;background-origin:padding-box;background-position:0 13px;background-repeat:no-repeat;background-size:auto auto;width:45px}

a i{display:inline-block;height:45px;line-height:45px;opacity:0.7;vertical-align:middle}

a:hover i.mobile,a:hover i.email{opacity:0.9}

.button.big{margin:20px auto; margin-bottom:1px;}

#mail-now{right:0px}

#call-now{left:0px}

#mail-now, #call-now{width: calc(50% - 4px);height:57px;border-radius:5px;position:fixed;bottom:0px;background:#fff;border:2px solid #ddd;box-shadow:0px 2px 2px #888;z-index:100;text-align: center;}

#mail-now span, #call-now span{display: none}

#call-now i.mobile{background-position:20px 20px}

#mail-now i.email{background-position:17px 20px}

.button.big.green{color:#000000;}

}   

</style>

-------------------------------------------------------------------------------------------------------------

Dann vor dem </BODY> Tag den Text zwischen den nächstenn beiden gestichelten Linien hineinkopieren:

------------------------------------------------------------------------------------------------------------- 

<div class="actionbuttons">

<a id="call-now" href="tel:+123456789" class="button big green"><i class="mobile"></i><span>Anrufen</span></a>

<a id="mail-now"  href="mailto:***" class="button big green" rel="nofollow"><i class="email"></i><span>Zu Kontakte hinzufügen</span></a></div>

<div class="clear"></div>

<script>$(document).ready(function() {$('.actionbuttons').show();

$(function () {$(window).scroll(function () { if ($(this).scrollTop() > 180)

{ $('.actionbuttons').fadeOut(500); }

else { $('.actionbuttons').fadeIn(500); } }); }); }); </script>

-------------------------------------------------------------------------------------------------------------

Nun noch die Telefonnummer und Mailadresse anpassen

Read more
Posted on the from Klaus W.
Klaus W.
Klaus W.
User

Sorry: im unteren Textblock befindet sich die Mailadresse an dieser Stelle:

<a id="mail-now"  href="mailto:***" class="button big green" rel="nofollow"><i class="email"></i><span>Zu Kontakte hinzufügen</span></a></div>

Read more
Posted on the from Klaus W.
Andreas L.
Andreas L.
User

gute Lösungwink

Read more
Posted on the from Andreas L.
Klaus W.
Klaus W.
User

Wissen ist auch zu wissen wo es steht.

Read more
Posted on the from Klaus W.
Klaus W.
Klaus W.
User
Klaus S.
Was ist das denn für ein überflüssiger Kommentar ?! Wissen ist auch zu wissen wo es steht.
Read more
Posted on the from Klaus W.
Michael G.
Michael G.
User
Author

Die Lösung ist gut danke, ich hatte das nicht mehr gefunden.
Aber so richtig funktioniert es nicht. Da es die Fußzeile verdeckt und auch keine Farben und Breiten verändert werden können

Read more
Posted on the from Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT
Michael G.
Die Lösung ist gut danke, ich hatte das nicht mehr gefunden. Aber so richtig funktioniert es nicht. Da es die Fußzeile verdeckt und auch keine Farben und Breiten verändert werden können

(It > De) ... Hallo, in der Vergangenheit haben Sie mehrere meiner Codes übernommen und / oder ausprobiert ...
... auch in diesem Fall könnte man vielleicht ein einfaches DIV_CUSTOM EXTRA verwenden ...
... Ich denke auch, dass das Objekt, das Andreas S.  Ihnen ursprünglich vorgeschlagen hat, einfach und gültig sein könnte ...
... aber ich habe nicht ganz verstanden, was Sie für das Scrollen und die Position in der Fußzeile bekommen möchten ...
.. zusätzlich zu den anderen gültigen Vorschlägen, die zuvor gesagt wurden,
... wenn Sie den Link zu einer Seite setzen und / oder ein paar STAMP (Screenshots) beifügen, könnte dies hilfreich sein ...

hallo, ciao

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Author

z.B Smartphone Ansicht von ebay Kleinanzeigen

Hier scrollt Fußzeile trotzdem über die Buttons und ist sichtbar...

Die anderen Website muss ich suchen. Auf jeder Website waren die Buttons am unteren Rand immer anders gestaltet. Daher wäre es doch schön, wenn man die Button Widget verwenden könnte und diese unten am Rand fixiert und die Seite dahinter scrollen kann

Read more
Posted on the from Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

... mit meinem Android-Smartphone fällt mir in der ebay-Fußzeile nichts auf,
das fließt wie das unseres Programms ...
... könnte das Objekt "Mobiler Kontakt" gut funktionieren?
... wenn Sie dieses Objekt möchten, kann es auch im Desktop-Browser sichtbar gemacht werden ...
... oder wenn Sie an einem ähnlichen Effekt interessiert sind, könnte dies auch mit einem DIV_CUSTOM erreicht werden ...

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Andreas S.
Andreas S.
Moderator
Best User of the month DE

für @ELISA:  anscheinend funktioniert das "mobile contact" Objekt nicht! Egal wo ich es einfüge es kommt immer die Fehlermeldung...

Read more
Posted on the from Andreas S.
Michael G.
Michael G.
User
Author

@KolAsim

Hast du einen kommpletten Code dafür? Ich kenne mich mit div usw nicht aus.

Das Widget Mobiler Kontakt ist nicht so dafür geeignet!

Vielleicht finde ich diese Seiten wieder, dann schicke ich die Bilder

Read more
Posted on the from Michael G.
Michael G.
Michael G.
User
Author

Beispiel 1 kommt dem schon etwas näher, jedoch sollten die Button nur in der Smartphone Ansicht zu sehen sein und nicht in der Desktop Ansicht.

Read more
Posted on the from Michael G.
Klaus W.
Klaus W.
User

Wie hast du denn deine Breakpoints unter '2 Vorlage > Auflösung und responsives Design' gesetzt. Der Code von KolAsim greift ab einer Auflösung von 600px abwärts:

@media (min-width:600px) { .actionbuttons{display:none} }
@media (max-width:599px) { .clear{clear:both}

@KolAsim: Von DIV_CUSTOM EXTRA höre ich zum ersten mal. Danke für den Hinweis.

Read more
Posted on the from Klaus W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT
Michael G.
Beispiel 1 kommt dem schon etwas näher, jedoch sollten die Button nur in der Smartphone Ansicht zu sehen sein und nicht in der Desktop Ansicht.

... << -720 pixel 

... Strg + U  (Ctrl+U) :   row 8 x //HEAD  ||  row 20-27 x //BODY

> > Beispiel 3

ciao

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Author

Hast du einen kompletten Code?

Breakpoints sind

1250, 960, 720, 480

Read more
Posted on the from Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

 << - 1950:

<style> @media (min-width: 1949px) { #socialK {display:none } } </style>

--------------------------------------

or << - 960:

<style> @media (min-width: 959px) { #socialK {display:none } } </style>

------------------------------------------

or << - 720:

<style> @media (min-width: 719px) { #socialK {display:none } } </style>

----------------------------------------------

or << - 480:

<style> @media (min-width: 479px) { #socialK {display:none } } </style>

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Author

Wenn ich diesen Code eingebe
<style> @media (min-width: 479px) { #socialK {display:none } } </style>
Erscheinen keine Buttons am unteren Rand

Read more
Posted on the from Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

... ... tatsächlich erscheint es auf Bildschirmen, die kleiner als < 480 Pixel sind ...

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Author

Muss ich nicht Buttons irgendwo speichern? 

Read more
Posted on the from Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT
Michael G.
Muss ich nicht Buttons irgendwo speichern? 

(It > De) ... Sie können die absolute URL verwenden, wie in meinem Beispiel ...
... oder Sie können Ihre eigenen PNG-Bilder verwenden, "bildname.png"; ...oder laden Sie die von Ihnen bevorzugten Icons von PIXABAY auf Ihren PC herunter, zum Beispiel die von mir verwendeten:
https://cdn.pixabay.com/photo/2015/12/28/02/58/home-1110868__340.png
https://cdn.pixabay.com/photo/2015/03/10/17/26/facebook-667456__340.png
https://cdn.pixabay.com/photo/2017/06/23/02/32/pinterest-2433266__340.png
... dann hängen Sie diese Bilder mit dieser Option an Ihr Projekt an und lassen den Ordner "files" als Standardziel:
>> Schritt 1 - Einstellungen > Bereich Erweitert > Statistiken, SEO und Code > Funktionen im Bereich Code | ▪Mit dem HTML-Code verlinkte Dateien
... so ändern Sie den Code der Bilder auf diese Weise:
<a title="GOOGLE" href="https://www.google.it/" >
<img src="files/bildname.png" width="50" /> </a>
... ersetzen Sie TITLE und HREF durch Ihre Verweise und Links ...

ciao

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Author

Also irgendwie stehe ich gerade auf dem Schlauch.

Ich verstehe jetzt gar nichts mehr :-(

Dachte sowas geht einfacher zu lösen, aber das scheint ja sehr komplex zu sein die Sache. Schade.

Trotzdem danke für eure Tipps

Read more
Posted on the from Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

... es ist ganz einfach, kopieren / einfügen ...
... wenn du es nicht tust, wirst du es nicht wissen...wink...

ciao

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Author

Das habe ich ja gemacht mit deinem Code

<style> @media (min-width: 479px) { #socialK {display:none } } </style>

Aber es erscheinen keine Buttons in der kleinsten Ansicht. 

Read more
Posted on the from Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

... wo ist der LINK Ihres Beispiels...?...
... Ich habe mein vorheriges > Beispiel 3  geändert,   Das ist jetzt unter << 480 Pixel
.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Author

@KolAsim

Hier ist der Link 

www.dienstleistungsservice-wesenberg.de

Read more
Posted on the from Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

... OK x /HEAD ...

... NO! x /BODY  >>

>> Schritt 1 - Einstellungen > Bereich Erweitert > Statistiken, SEO und Code > Funktionen im Bereich Code | ▪Benutzerdefinierter Code: (5°) ▼ > Vor dem </BODY> Tag

... code:

<div id="socialK" style="position:fixed;bottom:0px;right:10px;border-radius:30px 0px 0px 0px;width:auto; height:50px; overflow:hidden; "><a title="GOOGLE" href="https://www.google.it/" ><img src="https://cdn.pixabay.com/photo/2015/12/28/02/58/home-1110868__340.png" width="50" /></a><a title="GOOGLE" href="https://www.google.it/" ><img src="https://cdn.pixabay.com/photo/2015/03/10/17/26/facebook-667456__340.png" width="50" /></a><a title="GOOGLE" href="https://www.google.it/" ><img src="https://cdn.pixabay.com/photo/2017/06/23/02/32/pinterest-2433266__340.png" width="50" /></a></div>

.

ciao

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Author

Das klappt schon mal.

Aber die Buttons sind nicht die richtigen, Wie kann ich die ändern.

Es soll sein Brief für Mailkontakt und Telefonhörer zum anrufen.

Es gab mal einen Code da erschienen 2 rechteckige Buttons am unteren Rand, leider finde ich den Code nicht mehr. Der Nachteil war bei denen, das die die Fußzeile verdeckt haben

Read more
Posted on the from Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

... natürlich die Bilder, die Sie durch Ihre ersetzen müssen ...laughing...
... oder suchen Sie sie im Internet, finden Sie Hunderte von ihnen ...
... zum Beispiel:  https://icons8.com/icons/

 

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪