gelöst Telefonhörer im Header

Thema wurde von Anonymous, 31. Januar 2022 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    438
    Danke erhalten:
    146
    Danke vergeben:
    547
    Hallo,

    In der mobilen Ansicht habe ich im Header LOGO - LUPE (SUCHE) - WARENKORB - Drei striche zum Menu

    Ich hätte nun gerne zwischen LOGO und LUPE einen Telefonhörer wenn man diesen Anklickt sollte man uns direkt anrufen können. Ich habe eigtl alles probiert und komme nicht weiter.

    Gruß
    Thomas
     
  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    17. Oktober 2018
    Beiträge:
    140
    Danke erhalten:
    78
    Danke vergeben:
    18
    Hallo Thomas. Was hast Du denn schon 'alles' probiert?

    Eigene Inhalte im Header einfügen geht im Content Manager: Inhalte > Content Manager > Elemente > Header
    Da dann zweckmäßigen HTML Code eingeben:
    HTML:
    <a title="Rufen Sie uns direkt an!" class="" href="tel:+499123456789"> <span class="fa fa-phone"></span></a>
    und noch etwas per CSS aufhübschen. Viel Erfolg!

    Gruß
    Pepe
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    410
    Danke erhalten:
    174
    Danke vergeben:
    137
    Ich hab da mal was gebastelt, was eig. auch ziemlich hübsch ist.
    Der Telefonhörer ist dann in einer zweiten "Header-Zeile" direkt unter dem eigentlich Header mit dem Logo etc.
    Es ist auch anklickbar und man kann die hinterlegte Nummer direkt anrufen.

    (Damit die Zeile dann nicht nur für einen einzigen Hörer da ist, kann man den HTML Code erweitern und das Ganze floaten, sodass links z.B. der Hörer ist und rechts (habe ich) 2-3 Siegel - z.B. SSL-Siegel im .svg-Format - reinhauen, sodass die Mitte frei ist.

    HTML in "Tracking-Code (Head)" reinhauen.
    CSS natürlich über SE4.

    HTML:

    <li class="visible-xs">
    <center style="background-color: #FFFFFF;">
    <div class="MyClassXYZ">
    <a href="tel:+499123456789">
    <img alt="FuerGoogle" border="0" height="40" src="(Link nur für registrierte Nutzer sichtbar.)" width="40" />0203 12 34 567-Tel.nr. KANN AUCH WEG</a>
    </div>
    </center>
    </li>


    CSS:

    .MyClassXYZ {
    margin-top: 35px; <(nur wenn die kreierte Zeile unter den eigentlichen Header rutscht, sonst löschen)
    display: inline-flex;
    margin-left: 2px;
    align-items: center;
    justify-content: center;
    }
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    438
    Danke erhalten:
    146
    Danke vergeben:
    547
    Hey Pepe,

    Eigenen Content so wie du beschrieben hast , hab ich angelegt, nur wird der in der Mobilen ansicht nicht angezeigt. JA die spalten sind alle richtig angelegt, trotzdem sehe ich mobil nix von meinem Content.

    @O.C.
    Hast du mal nen Beispiel wie das dann aussieht?

    Lg
    Thomas
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    438
    Danke erhalten:
    146
    Danke vergeben:
    547

    Das klappt irgendwie nicht
     
  6. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    410
    Danke erhalten:
    174
    Danke vergeben:
    137
    @Thomas_F

    Ich hab umgebastelt, sodass es ohne CSS funzt.
    Nur HTML in Tracking-Code (Head) rein und "Tracking Code verwenden" aktivieren.

    Code:
    <li class="visible-xs">
    <div style="display:block; text-align:right; float:right; margin-right:5px; margin-bottom:5px; margin-top:7px;">
    <img alt="FuerGoogle" border="0" height="40" src="https://i.ibb.co/KKsydNb/ssl-siegel-256.png" width="40" />  <img alt="FuerGoogle" border="0" height="40" src="https://i.ibb.co/KKsydNb/ssl-siegel-256.png" width="40" />  <img alt="FuerGoogle" border="0" height="40" src="https://i.ibb.co/KKsydNb/ssl-siegel-256.png" width="40" /></div>
       <div style="display:block; text-align:left; float:left; margin-left:5px; margin-bottom:5px; margin-top:7px;">
    <a href="tel:+499123456789">
    <img alt="FuerGoogle" border="0" height="39" src="https://i.ibb.co/GskMdVt/Telefonbild.png" width="39" />&nbsp;0203 12 34 567</a></div>
    </li>
    Sieht dann so aus: (Mobil anschauen)
    (Link nur für registrierte Nutzer sichtbar.)

    [​IMG]
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    438
    Danke erhalten:
    146
    Danke vergeben:
    547
    Ideal, so sollte es aussehen.

    Ich habe Honeygrid Theme, ich denke aus diesem Grund geht der HTML Code von dir bei mir leider nicht.
     
  8. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    410
    Danke erhalten:
    174
    Danke vergeben:
    137
    Seltsam, ich habe auf Honeygrid umgestellt und es funzt trotzdem einwandfrei.

    [​IMG]
     
  9. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    438
    Danke erhalten:
    146
    Danke vergeben:
    547
    Ich probiere es morgen nochmal in ruhe, hab nun Feierabend. Ich gebe Dir bescheid. Im CSS muss ich mit dem neuen Code nix eintragen nee?
     
  10. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    410
    Danke erhalten:
    174
    Danke vergeben:
    137
    Ja, Rückmeldung wär super.
    Ne, ist komplett ohne CSS.

    Schönen Feierabend
     
  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    438
    Danke erhalten:
    146
    Danke vergeben:
    547
    Es Funktioniert Super, Optimale Lösung... 1000Dank für die Super Hilfe

    ( Mein Fehler war das ich es nicht in den Tracking Code eingegebene hatte )
     
  12. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    410
    Danke erhalten:
    174
    Danke vergeben:
    137
    Sehr gerne. Freut mich, dass es funzt :)