Seitenbutton einfügen

  • Habe das mal hier vom Layout Forum zu Tips rüber kopiert. Ist hier besser zu finden

    Hier mal was ganz einfaches für einen Seitenbutton:


    [Blockierte Grafik: http://united-host.eu/zeta/seitenbutton.jpg]



    Folgendes fügt man unter Attribute / mobile_script ein:

    <style>
    .link-border {
    border-width: 0;
    }
    </style>

    Folgendes fügt man auf jeder Seite in einen Artikel ein:

    <a href=kontakt.html#a1326>
    <img alt="seitenbutton" src="kontakt.png" style="position: fixed; right: 0px; top: 75%" class="link-border" /></a>

    Hinweis:

    Den Kontakt.png Button muss man erstellen und in das Hauptverzeichniss des Output/Preview Ordners kopieren, wenn du das Verzeichniss mit
    einem FTP Client hochlädst. Ansonsten musst du das Bild über den Producer hinzufügen und den Verweis zu dem Bild natürlich im Code angeben.

    Die Angabe #a1326 verweist direkt auf einen Artikel/Formular deiner Seite (hier Kontaktformular) Die Nummer steht im html Code, welche
    vergeben wurde, oder man lässt sie weg.

    Mit top wird der Abstand von Oben angegeben und mit right:; 0px der Abstand von rechts

    Mit dem aktuellen IE und Chrome, Smartphone und Tablet funktioniert es gut.


    Gruss swork




    Zeta Producer Version: v12.5.6 Business

    2 Mal editiert, zuletzt von swork (20. April 2014 um 19:59)

  • Hallo swork,

    bitte die "Leerzeichen" bei dein Einträgen an den richtigen Stellen ändern (löschen), denn sonst haut das nicht hin!

    Ergänzend dazu noch folgendes:

    -Man kann bei einem Artikel unten links auf das Symbol klicken und dann auf "allen Seiten vererben" auswählen.
    Somit erspart man sich das einfügen auf jeder Seite.

    -Man kann das "Button-Bild" ganz normal in die Bildverwaltung des ZPs reinladen und trägt dieses dann in den Code mit ein.

    -Die ID-Angabe muss nur gemacht werden, wenn man direkt auf einen Artikel will.
    In der Regel reicht die Angabe der Seite, wenn man den Kontakt-Button anklickt, dann kommt man gleich auf die Kontaktseite.

    So, ich denke ich habe gerade auf die Schnelle nichts vergessen ;)

    Gruß
    Jochen

  • Hi Jochen

    Zu den Leerzeichen. Was sehe ich nicht was du siehst. Ich habe mal einen Screenshot gemacht wie es auf meinem
    Bildschirm und Tablet aussieht. Sieht eigentlich alles normal aus, oder meinst du etwas im geposteten html Code ?

    Jo, an Vererben habe ich jetzt garnicht gedacht, macht die Sache natürlich einfacher :)

    Das mit Bild über ZP einfügen hatte ich ja geschrieben und das man dann den Code ergänzen muss.
    Hier dazu die Ergänzung: media/images/kontakt.png

    Die id verweist direkt zu dem Artikel, hatte ich ja geschrieben und das man das auch weglassen kann.
    Es ist ja so, das dass Kontaktformular beim Responsive Design nicht immer oben auf der Seite steht, sondern
    sehr weit unten, unter der Sidebar und sonstiges und durch die "#axxx" Artikelangabe gelangt man auf dem
    Smartphone direkt zum Formular. Vielleicht will man ja auch garnicht zum Kontakt, sondern zu einer anderen
    Stelle auf einer Webseite und dann ist das dann auch schonmal als Erklärung erschlagen, wie man das mit
    dem Seitenbutton macht.

    Gruss swork

  • Hallo,

    ich meine folgende (zuviel vorhandene) Leerzeichen im Code:

    <_style>
    .link-border {
    border-width: 0;
    }
    <_/style>

    Und hier:

    <_a href=kontakt.html#a1326>
    <img alt="seitenbutton" src="kontakt.png" style="position: fixed; right: 0px; top: 75%" class="link-border" /></a>

    Gruß
    Jochen

  • Hi Jochen

    Mmmm, wie kommt denn sowas ? Habe es doch nur kopiert und eingefügt. Zzzz
    Danke für den Hinweis und ich habe es korrigiert.


    Gruss swork




    Zeta Producer Version: v12.5.6 Business

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!