Buttons unterer Rand am Smartphone 
Author: Michael G.
Visited 1962,
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
Nenne uns eine Seite! Wieso nimmst du nicht das "Mobile Contact" Widget?
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
@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.
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.
Unter X5 leider keine Lösung.
@ 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
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>
gute Lösung
Gut abkopiert von https://helpcenter.websitex5.com/en/post/219353
Wissen ist auch zu wissen wo es steht.
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
(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
.
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
... 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 ...
für @ELISA: anscheinend funktioniert das "mobile contact" Objekt nicht! Egal wo ich es einfüge es kommt immer die Fehlermeldung...
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
... ein paar meiner exklusiven Grundbeispiele:
> Beispiel 1
> Beispiel 2
... etc. ... ... .
.
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.
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.
... << -720 pixel
... Strg + U (Ctrl+U) : row 8 x //HEAD || row 20-27 x //BODY
> > Beispiel 3
ciao
.
Author
Hast du einen kompletten Code?
Breakpoints sind
1250, 960, 720, 480
<< - 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>
.
Author
Wenn ich diesen Code eingebe
<style> @media (min-width: 479px) { #socialK {display:none } } </style>
Erscheinen keine Buttons am unteren Rand
... ... tatsächlich erscheint es auf Bildschirmen, die kleiner als < 480 Pixel sind ...
.
Author
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
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
... es ist ganz einfach, kopieren / einfügen ...
...
... wenn du es nicht tust, wirst du es nicht wissen...
ciao
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.
... wo ist der LINK Ihres Beispiels...?...
... Ich habe mein vorheriges > Beispiel 3 geändert, Das ist jetzt unter << 480 Pixel
.
Author
@KolAsim
Hier ist der Link
www.dienstleistungsservice-wesenberg.de
... 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
.
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
... natürlich die Bilder, die Sie durch Ihre ersetzen müssen ...
...
... oder suchen Sie sie im Internet, finden Sie Hunderte von ihnen ...
... zum Beispiel: https://icons8.com/icons/
.