Telefonnummer als Icon auf der Mainpage dauerhaft

Thema wurde von robbie_herzog, 20. April 2020 erstellt.

  1. robbie_herzog

    robbie_herzog Erfahrener Benutzer

    Registriert seit:
    2. März 2020
    Beiträge:
    70
    Danke erhalten:
    3
    Danke vergeben:
    14
    Hello!
    Hat jemand von euch schon mal einen Telefonkontakt in der Mainpage eingebunden?

    Stell mir vor eine Telefonblase abzubilden oder am unteren unteren Rand die Telefonnumer zu platzieren.

    Diese soll immer sichtbar sein.

    Beim Draufklicken sollte die Tel.Nr. erscheinen.

    Hat jemand einen Tipp für die Umsetzung dazu?

    Hab mal eine Grafik dazu gebastelt.
     

    Anhänge:

  2. jps

    jps Erfahrener Benutzer

    Registriert seit:
    9. Juni 2015
    Beiträge:
    503
    Danke erhalten:
    54
    Danke vergeben:
    95
    Ich hab es im Header mit Verlinkung auf die Telefonnummer.
     
  3. Developer

    Developer Erfahrener Benutzer

    Registriert seit:
    7. November 2012
    Beiträge:
    2.944
    Danke erhalten:
    629
    Danke vergeben:
    114
  4. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.543
    Danke erhalten:
    11.305
    Danke vergeben:
    1.611
    Das geht z.B. über eine Sitebar.
    Habe das gerade mal in meinem Testshop.
    (Link nur für registrierte Nutzer sichtbar.)
    gemacht.
     
  5. robbie_herzog

    robbie_herzog Erfahrener Benutzer

    Registriert seit:
    2. März 2020
    Beiträge:
    70
    Danke erhalten:
    3
    Danke vergeben:
    14
    Ja cool Barbara, genauso stellen wir uns das vor? :)
    Wie hast du das umgesetzt?
     
  6. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.543
    Danke erhalten:
    11.305
    Danke vergeben:
    1.611
    Ist Dein Shop selbst installiert, oder ein Cloud-Shop?
     
  7. robbie_herzog

    robbie_herzog Erfahrener Benutzer

    Registriert seit:
    2. März 2020
    Beiträge:
    70
    Danke erhalten:
    3
    Danke vergeben:
    14
    Selbst installiert.. Desweiteren hab ich echt Probleme, eigenes Content beim Malibu einzufügen..

    Möchte auf der Startseite nen großes Bild mit gekachtelten Kategorienbildern abbilden, welche auf
    die jeweilige Kategorie verlinkt werden soll, aber da kommt nix. Blockieren die Widgets diese Funktion?

    eventausstatter.com
     
  8. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.543
    Danke erhalten:
    11.305
    Danke vergeben:
    1.611
    Ich würde einzelne Bilder nehmen und kein großes mit Kacheln.
    Denke auch an kleine Geräte, da muss das entweder aus oder sich so ändern, dass es erkennbar und bedienbar bleibt.

    Zur sidebar:
    Erstelle im GXModules ein eigenes Verzeichnis:
    Meins/Sidebar/Shop/Themes/All/
    darin eine Datei
    index.html
    mit dem Inhalt:
    HTML:
    {block name="index_bottom" append}
    <aside id="sticky-social">
        <ul>
           <li><a class="phone" href="#"><i class="fa fa-phone fa-fw" target="_blank"></i><span>Telefonnummer</span></a></li>
        </ul>
    </aside>
    {/block}
    (Statt "Meins" kann Stu auch Deinen NAmen oder Kürzel ... nehmen, und statt "Telefonnummer" muss Deine Tel. Nr. eingesetzt werden)

    Dann kommt im eigenen CSS Deines Themes das hier:
    Code:
    /*sidebar*/
    a {
       text-decoration: none;
    }
    ul {
       list-style: none;
       margin: 0;
       padding: 0;
    }
    
    @media (max-width:768px){
    #sticky-social {
    display: none;
    }}
    
    @media (min-width:768px){
    #sticky-social {
       right: 0;
       position: fixed;
       top: 30%;
       z-index: 10020;
    }}
    
    #sticky-social a {
       background: #ffd200;
       color: #fff;
       display: block;
       height: 36px;
       font: 16px "Open Sans", sans-serif;
       line-height: 35px;
       position: relative;
       text-align: center;
       width: 35px;
       border-top: 1px solid #fff;
    }
    #sticky-social a span {
       line-height: 35px;
       right: -120px;
       position: absolute;
       text-align:center;
       width:120px;
    }
    #sticky-social a:hover span {
       right: 100%;
       border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
         font: 14px "Open Sans", sans-serif;
         line-height: 35px;
        background: #ffd200;
    }
    
    die Werte musst Du auf Deine Wünsche anpassen.

    Wenn Du ein eigenes Childtheme hast, kannst Du dort auch die html-Datei anlegen, statt in GXModules.
     
  9. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.910
    Danke erhalten:
    1.559
    Danke vergeben:
    1.133
    habe mir erlaubt das für 2-sprachig anzupassen:

    Code:
    {block name="index_bottom" append}
    <aside id="sticky-social">
        <ul>
         {if $smarty.session.languages_id == "2"}
                 <li><a class="phone" href="#"><i class="fa fa-phone fa-fw" target="_blank"></i><span>0381-xxxxxx</span></a></li>
                 {else}
                <li><a class="phone" href="#"><i class="fa fa-phone fa-fw" target="_blank"></i><span>+49-381-xxxxxx</span></a></li>
               
              
                {/if}
        </ul>
    </aside>
    {/block}
     
  10. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.910
    Danke erhalten:
    1.559
    Danke vergeben:
    1.133
    mir ist noch aufgefallen, dass wenn der Kunde aus versehen auf das Icon klickt, er zur Startseite kommt. Kann man das ausschalten?
     
  11. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.543
    Danke erhalten:
    11.305
    Danke vergeben:
    1.611
    Versuche mal das:
    <li><a class="phone" href="#">
    zu ändern in
    <li><a class="phone">
     
  12. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.543
    Danke erhalten:
    11.305
    Danke vergeben:
    1.611
    Für Cloudshops:
    das geht auch, wenn man den html-Code in den Quellcode einer Footerspalte setzt.
     
  13. Developer

    Developer Erfahrener Benutzer

    Registriert seit:
    7. November 2012
    Beiträge:
    2.944
    Danke erhalten:
    629
    Danke vergeben:
    114
    Sorry, dachte Du meinstest den Header. War gedanklich woanders. :D
     
  14. robbie_herzog

    robbie_herzog Erfahrener Benutzer

    Registriert seit:
    2. März 2020
    Beiträge:
    70
    Danke erhalten:
    3
    Danke vergeben:
    14
    Guten Morgen Barbara,
    danke euch schon mal!

    Irgendwie hab ich nen Fehler drin. Bzw. kommt nix.
    Hab das Verzeichnis wie oben beschrieben erstellt.
    eine index.html Datei und diese eingefügt.
    Sowie beim eigene Stylesheet den CSS Code eingebgen.

    Was mach ich falsch? :D
    Bilder anbei.
     

    Anhänge:

  15. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.543
    Danke erhalten:
    11.305
    Danke vergeben:
    1.611
    Cache geleert?
     
  16. robbie_herzog

    robbie_herzog Erfahrener Benutzer

    Registriert seit:
    2. März 2020
    Beiträge:
    70
    Danke erhalten:
    3
    Danke vergeben:
    14
    Cache im FTP & im Browser geleert.. Kein Erfolg
     
  17. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.543
    Danke erhalten:
    11.305
    Danke vergeben:
    1.611
    Schau mal ganz unten im oder unter dem footer, ob da eine Zeile mit dem Icon und Text ist.
     
  18. robbie_herzog

    robbie_herzog Erfahrener Benutzer

    Registriert seit:
    2. März 2020
    Beiträge:
    70
    Danke erhalten:
    3
    Danke vergeben:
    14
  19. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.910
    Danke erhalten:
    1.559
    Danke vergeben:
    1.133
    da stimmt was mit Deiner index.html nicht, die hat nur 13 kb, meine hat 459....

    upload_2020-4-28_12-25-16.png
     
  20. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.543
    Danke erhalten:
    11.305
    Danke vergeben:
    1.611
    @marmoles
    Was steht bei Dir da alles drinnen?

    @robbie_herzog
    Bei Dir kommt der Code nicht an....
    Versuche mal wenn Du es im Content-Manager in eine Footerspalte setzt.
    (ohne den {block....}{/block})