WebSite X5Help Center

 
Michael G.
Michael G.
User

Buttons unterer Rand am Smartphone  de

Autor: Michael G.
Besucht 1595, Followers 2, Geteilt 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?  

Gepostet am
35 ANTWORTEN - 1 NüTZLICH
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

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

Mehr lesen
Gepostet am von Andreas S.
Michael G.
Michael G.
User
Autor

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

Mehr lesen
Gepostet am von 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.

Mehr lesen
Gepostet am von Andreas L.
Michael G.
Michael G.
User
Autor

@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.

Mehr lesen
Gepostet am von Michael G.
Andreas L.
Andreas L.
User

Unter X5 leider keine Lösung.

Mehr lesen
Gepostet am von 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

Mehr lesen
Gepostet am von 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>

Mehr lesen
Gepostet am von Klaus W.
Andreas L.
Andreas L.
User

gute Lösungwink

Mehr lesen
Gepostet am von Andreas L.
Klaus W.
Klaus W.
User

Wissen ist auch zu wissen wo es steht.

Mehr lesen
Gepostet am von 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.
Mehr lesen
Gepostet am von Klaus W.
Michael G.
Michael G.
User
Autor

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

Mehr lesen
Gepostet am von Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats 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

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autor

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

Mehr lesen
Gepostet am von Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats 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 ...

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

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

Mehr lesen
Gepostet am von Andreas S.
Michael G.
Michael G.
User
Autor

@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

Mehr lesen
Gepostet am von Michael G.
Michael G.
Michael G.
User
Autor

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.

Mehr lesen
Gepostet am von 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.

Mehr lesen
Gepostet am von Klaus W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats 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

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autor

Hast du einen kompletten Code?

Breakpoints sind

1250, 960, 720, 480

Mehr lesen
Gepostet am von Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats 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>

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autor

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

Mehr lesen
Gepostet am von Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats PT

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

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autor

Muss ich nicht Buttons irgendwo speichern? 

Mehr lesen
Gepostet am von Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats 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

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autor

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

Mehr lesen
Gepostet am von Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats PT

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

ciao

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autor

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. 

Mehr lesen
Gepostet am von Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats PT

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

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autor

@KolAsim

Hier ist der Link 

www.dienstleistungsservice-wesenberg.de

Mehr lesen
Gepostet am von Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats 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

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autor

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

Mehr lesen
Gepostet am von Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats 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/

 

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪