"MACH DEINE SEITE JETZT FIT,
    DER nächste SOMMER KOMMT BESTIMMT!"

    Willst Du Deinen Besuchern ermöglichen schnell und ohne viel Geklicke mit Dir in Kontakt zu treten? Dann könnte das hier die Lösung sein. Mit diesem Tutorial erhälst Du den Kontakt-Button wie Du ihn links auf der Seite siehst. Füge einfach folgenden Code in den Head-Bereich ein.

    <style type="text/css">
    /*<![CDATA[*/
    /* Deine Slideshow */

    .Mail a {

    background: url(http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/img/i5c38d9b2b8720559/1359026597/std/image.png)no-repeat;
    position: fixed;
    left: -57px;
    top: 400px;
    background-color: #00A1FA;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0px 4px 7px 3px rgba(0, 0, 0, 0.7), inset 0 1px 0 0 #C7ADAD;
    -moz-box-shadow: 0px 4px 7px 3px rgba(0, 0, 0, 0.7), inset 0 1px 0 0 #C7ADAD;
    box-shadow: 0px 4px 7px 3px rgba(0, 0, 0, 0.7), inset 0 1px 0 0 #C7ADAD;
    padding: 48px 5px 5px;
    float: left;
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01);
    font-size: 20px;
    font-family: Courier New, serif;
    text-align: center;
    text-decoration: none;
    text-underline: none;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);   
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;

    }

    .Mail a:hover {

    -webkit-transform: translateX(55px);
    -moz-transform: translateX(55px);
    -o-transform: translateX(55px);
    -ms-transform: translateX(55px);
    transform: translateX(55px);

    }

    /*]]>*/
    </style>

    Und folgenden Code in ein Widget/HTML-Modul in die Sidebar:

     

    <div class="Mail">
        <a href="mailto:Deine-Slideshow@gmx.de?subject=Meine%20Anfrage" title="Schreib mir..">KONTAKT</a>
    </div>

     

    Der rot markierte Bereich muss durch Deine Mail-Adresse ersetzt werden.

    Kommentare: 76
    • #76

      Uschi (Montag, 08 Mai 2017 18:49)

      Hallo,
      ich hab mir eben alles durchgelesen (oder vielleicht doch was übersehen) - aber die Antwort nicht gefunden. Wie kann ich die Schriftfarbe abändern? Der Hintergrund hat geklappt, aber ich hätte die Schrift gerne in weiss. Danke für eine Rückantwort.

      Gruss Uschi

    • #75

      Albert (Dienstag, 31 Januar 2017)

      ersetze http durch https ganz einfach
      bei mir dreht sich der Button nicht, er klappt sich einfach nur auf.
      w

    • #74

      Sandra (Mittwoch, 14 Dezember 2016 11:34)

      Hallo, hab das gleich Problem wie Katrin. Mir hat es auch meinen Button zerschossen und kann es nicht mehr ändern. Meine Kontaktdaten stehen jetzt ganz oben auf den Seiten und bringt meine ganz Page durcheinander.
      Wie kann ich das ändern?

      Vielen Dank schon mal für die Antwort
      Sandra

    • #73

      Katrin (Montag, 05 Dezember 2016 22:39)

      Hi, was macht man denn jetzt, wenn man jedesmal eine Fehlermeldung bekommt, weil die url ja noch http ist und nicht https:
      background: url(http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/img/i5c38d9b2b8720559/1359026597/std/image.png)no-repeat;

      Ich kann dadurch nichts Neues einbauen oder ändern, da ich immer diese Fehlermeldung bekomme. :(
      Danke Katrin

    • #72

      hans & gerry (Freitag, 09 September 2016 22:29)

      Bitte Kontaktieren Sie uns

    • #71

      Mathias Tretschog (Montag, 04 Juli 2016 17:51)

      Hallo zusammen,
      ich würde gern den Kontaktbutton auf der rechten Seite einstellen, was ich einigermaßen hinbekommen habe. Allerdings weiß ich nicht, welche Änderung ich noch vornehmen muss, damit der Button auf der rechten Seite nach dem herausdrehen ganz sichtbar ist und nicht nur wie aktuell zur Hälfte.

      HG aus KW
      Mathias

    • #70

      donja (Donnerstag, 14 Januar 2016 23:43)

      Hallo vielen Dank für alle diese tollen Tips , leider schaffe ich es nicht die Textfarbe zu verändern , habe die Shadows herausgenommen , die Hintergrundfarbe geändert , aber jetzt ist die Textfarbe zu hell und man kann nichts lesen ??
      vielen Dank für deine Hilfe
      donja

    • #69

      Dennis (Samstag, 02 Januar 2016 10:42)

      Hallo,

      ich nutze das Layout Cairo. Hier verschwindet der Button auch hinter dem Content. Gibt es dafür eine Lösung?

      LG

    • #68

      Julia heuer (Mittwoch, 11 November 2015 10:40)

      Hi,
      kannst du mir verraten, an welcher Stelle ich die Farbe im Code ändern kann?

    • #67

      Nico (Sonntag, 25 Oktober 2015 11:49)

      Hallo

      Vielen Dank erst einmal für Deine vielen tollen Tipps.
      Gibt es eine Möglichkeit URL-Paramter direkt in ein Kontaktformular abzufüllen? Die Idee ist folgende: Ich habe auf unserer Vereins-Homepage verschiedene Veranstaltungen aufgelistet, für die man sich direkt online Anmelden kann. Dazu habe ich das Kontaktformular mit dem jeweiligen Link der Veranstaltung verlinkt. Wenn ich mich zum Beispiel für den Filmabend anmelden möchte, klicke ich auf den Link "Anmeldung zum Filmabend". Dann öffnet sich das Kontaktformular und ins Textfeld des Formulars wird direkt "Anmeldung zum Filmabend" übergeben.
      Ist das möglich?

      LG
      Nico

    • #66

      Katrin (Montag, 20 Juli 2015 07:58)

      Hallo, ich nutze ebenfalls das Layout Rome und der Kontakt Button verschwindet hinter dem Content. Wie lässt sich das anpassen, damit dieser immer vorne zu sehen ist?

      lg, Katrin

    • #65

      Denise (Mittwoch, 17 Juni 2015 16:48)

      Hallo, ich habe den Head-Bereich im Layout Rome mit einem anderen Tutorial verkleinert. Wie kann ich den Code des Kontakt Buttons abändern, damit er wieder wie vorher, links an der Seite angezeigt wird und nicht in der Sidebar?

    • #64

      isswas (Montag, 23 Februar 2015 22:59)

      Wie immer ein super Tutorial!

      Inzwischen habe ich neben der Jimdo Seite auch eine andere "Eigenentwicklung" ganz ohne Web-Baukasten.
      Aber auch dort greife ich gerne auf deine Snippets zurück!

      Kleiner Hinweis zu diesem coolen Einblend-Effekt.
      Du hast einen kleinen Bug im Code.

      Und zwar hier:
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);

      Dort hintendran muss noch diese Zeile:
      -ms-transform: rotate(-90deg);

      .. und am besten auch noch:
      transform: rotate(-90deg);

      Die Bewirkt das der Effekt auch im IE (> 9) funktioniert.
      Ansonsten "dreht" der Button nämlich nicht rein, sondern "fährt" einfach heraus (was auch schön ist, aber das drehen ist halt doch cooler *g*)


      @ALL:
      Beim Überfliegen eurer Kommentare habe ich einige Male die Frage nach dem einfügen von mehreren Buttons gesehen.
      Benutzt dafür einfach unterschiedliche DIV CLASS Bereiche.

      Im Beispiel wurde <div class="Mail"> verwendet.
      Demzufolge steht im CSS-Code: .Mail a { bzw. .Mail a:hover {

      Dupliziert einfach den CSS-Code und den div class Bereich und verwendet statt "Mail" z.B. "Irgendwas".
      Jetzt noch die Position des Buttons mit top: höher oder niedriger als die hier im Beispiel angegebenen 400px setzen, und schon habt ihr den Button zwei Mal!

      Ist natürlich Witzlos.
      Jetzt also noch ein anderes Background Bild verwenden (also was anderes als den Briefumschlag) oder ggf. ganz auf ein Background Bild verzichten und alles Textbasiert machen.
      Und natürlich soll beim drauf Klicken was anderes passieren als das e-Mail Fenster zu öffnen. Also auch dran denken den href anzupassen. Fertig.

      Wichtig: Wenn sich durch den geänderten Inhalt die Größe des Buttons ändert muss man auch den left: Einzugsbereich (hier -57px) vergrößern oder verkleinern damit es schön aussieht.
      Auch dran denken diesen geänderten Wert dann im a:hover CSS-Code anzupassen!

      Hier noch ein Beispiel, wie so ein zweiter Button (jetzt mal auf der linken Seite in einem leicht veränderten Design) aussehen könnte.

      CSS-Code:

      .menu-spin p {

      position: fixed;
      right: -150px;
      top: 400px;
      width: 7em;
      margin: -2.5em 0 0 0;
      z-index: 5;
      background: rgba(239,248,251, 0.7);
      color: black;
      font-weight: bold;
      font-size: large;
      text-align: left;
      border: solid rgba(239,248,251, 0.5);
      border-right: none;
      padding: 0.5em 0.5em 0.5em 2.5em;
      box-shadow: 0 1px 3px black;
      border-radius: 3em 0.5em 0.5em 3em;
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      -webkit-transition: all .5s ease-out;
      -moz-transition: all .5s ease-out;
      -o-transition: all .5s ease-out;
      transition: all .5s ease-out;

      }

      .menu-spin p:hover {

      -webkit-transform: translateX(-150px);
      -moz-transform: translateX(-150px);
      -o-transform: translateX(-150px);
      -ms-transform: translateX(-150px);
      transform: translateX(-150px);

      }


      Code für das HTML-Modul:

      <div class="menu-spin">
      <p>
      <span style="color:#FF0000">HAUPTMEN&Uuml;</span><br /><br />
      <a href="http://fakeornot.tk/">Startseite</a><br />
      <a href="gb.php">G&auml;stebuch</a><br />
      <a href="bug.php">Bug-Bereich</a><br />
      <a href="vorschlag.php">Verb.vorschl&auml;ge</a><br />
      <a href="info.php">&Uuml;ber diese Seite</a><br />
      <a href="impressum.php">Impressum</a>
      </p>
      </div>



      Hier sieht man übrigens auch, dass ich die Farbe für den Text "Hauptmenü" in diesem Fall mit span style auf Rot gesetzt habe.
      Vielleicht hilft das ja dem ein oder anderen der hier nach einer anderen Farbe für das Wort "Kontakt" gefragt hat.


      Ich hoffe ich konnte etwas helfen ...


      lg

    • #63

      fan (Mittwoch, 11 Februar 2015 21:07)

      Hallo

      ich würde gerne das Wort "Kontakt" in weißer schrift als -> #FFFFFF aber ich weiß nicht wo ich das einfügen soll. Ich bitte um Hilfe

    • #62

      Markus (Mittwoch, 11 Februar 2015 16:22)

      Hallo,

      vielen Dank für Deine Tutorials. Du hast mir schon mit Deinem nivoslider für ein anderes Projekt weitergeholfen und nun kann ich den Kontakbutton auch sehr gut verwenden.
      Bei mir ist die Schrift allerdings grün (so wie alle Links auf meiner Seite). Kann ich dies ändern? ich habe es mit den üblichen CSS / HTML codes probiert, aber es funktionierte nicht.
      Würde mich freuen, wenn Du mir helfen könntest.
      Danke und Gruß
      Markus

    • #61

      Harald Müller (Samstag, 07 Februar 2015)

      Hallo,
      danke für das Klasse Tutorial.

      Der Kontakt-Button lässt sich zwar einfügen aber beim anklicken passiert nichts.
      Wo liegt das Problem

    • #60

      mahyin (Mittwoch, 04 Februar 2015 21:41)

      Danke! Ist super! Aber wurde die Frage schon beantwortet, wie man die Farbe des Buttons ändern kann?

    • #59

      flugschule-freeman (Samstag, 24 Januar 2015 17:02)

      Hallo,
      wie kann ich die Schriftfarbe verändern?

    • #58

      Nicole Czermak (Freitag, 23 Januar 2015 17:24)

      Hallo super, das hat geklappt. Besteht eigentlich die Möglichkeit den gleichen Button auch mit einem Facebook und Google+ Logo zu versehen? Gern würde ich dann drei Buttons unter einander an der Seite haben.
      Hoffe hier kann jemand helfen?

    • #57

      Rosa Arredondo (Sonntag, 11 Januar 2015 16:59)

      Sehr schöööön Dankeeeee!!!!

    • #56

      Sarah (Freitag, 02 Januar 2015)

      Hallo, gibt es eine Möglichkeit, statt auf den Kontakt zu verweisen, auf den Bereich "Feedback" umzustellen?

    • #55

      domiswindrad (Samstag, 01 November 2014 19:53)

      Sehr schön.. Leider klappt es sowohl auf dieser Seite hier als auch bei mir nicht...
      woran kann das liegen?

    • #54

      majacolic (Samstag, 25 Oktober 2014 09:07)

      hallo,

      super Trick :)
      Aber kann ich den auch die Farbe des Buttons ändern???

      Grüße Maja

    • #53

      eliasmitropoulos (Donnerstag, 09 Oktober 2014 15:51)

      Das ist ja cool!!! :-)))

    • #52

      Michael Krause (Mittwoch, 08 Oktober 2014 22:42)

      Super :)

    • #51

      f (Dienstag, 30 September 2014 14:45)

      ...ich bekomme das einfach nicht hin, bitte dringend um Hilfe? Habe den gesamten Code kopiert und eingefügt und es passiert leider nichts ;(

    • #50

      IceSpark (Donnerstag, 11 September 2014 19:35)

      ? Geht nicht... Ich habe den Text zwar eingegeben, aber es kommt kein neue Menüpunkt oben im Menü... :(

    • #49

      brickhenge (Montag, 01 September 2014 15:46)

      Danke, danke seeeeeeeeeehr hilfreich und sieht toll aus :D

    • #48

      Sue (Montag, 21 Juli 2014 16:22)

      Hello Hello

      Du hast klasse Sachen drauf! Danke! Ich versuche den Kontaktbutton (der seitliche) auf allen Seiten erscheinen zu lassen. So wie hier auf Deiner Site.

      Kannst Du mir helfen?

      Danke und Grüsse aus Zürich!

      Sue

    • #47

      Manuel Bäuml (Donnerstag, 03 Juli 2014 01:33)

      Hi,
      der kontaktbutton ist super. Kann ich diesen auch für andere zwecke nutzen?
      Ich möchte gerne
      - 2 buttons übereinander anordnen
      - andere Beschriftung und anstelle email auf eine andere Seite der Website verlinken
      - Jeweils das Briefsymbol durch ein eigenes symbol ändern, z.B. "Qualität" oder "Kundenreferenzen"
      - Die hintergrundfarbe an die Website anpassen
      Ist das möglich?
      danke und vg

    • #46

      Wandtattoo (Mittwoch, 14 Mai 2014 11:26)

      Danke für den html Code.
      Tolle Seite - sehr übersichtlich. Meißt findet man solche Tutorials nur auf englisch.
      Ich brauch immer wieder ein wenig Hilfe mit meiner Wandtattoo Seite.
      Jetzt habe ich eine neue schöne Seite wo ich Hilfe und Tips finde.
      Hab euch in meinen Lesezeichen gespeichert :-)
      Gruß

    • #45

      Sarah Kaiser (Mittwoch, 30 April 2014 15:08)

      Guten Tag,

      Wir würden gerne anfragen, ob es Möglich ist bei Ihnen einen sponsored Artikel über Ihre Seite "deine-slideshow.jimdo.com
      " zu veröffentlichen, der unseren Onlineshop für festliche Kleider (Hochzeitskleider, Abschlussballkleider, Ballkleider etc.) vorstellen soll. Können Sie mir hierfür die Konditionen nennen?

      Eine andere Option wäre, da wir einige PR3 und PR2 Blogs zum Thema Mode/Fotografie/Hochzeit führen, Links zu tauschen.

      Wir freuen uns auf Ihre Rückmeldung und verbleiben mit den besten Grüßen,

      Sarah Kaiser
      Direct Marketing Manager
      Telefon: 038462 183599 (Mo-Fr 9-12 &amp; 14-17 Uhr)

    • #44

      JTPhotography (Donnerstag, 17 April 2014 12:35)

      Wirklich eine tolle Sache mit dem Kontakt-Button wie ich die Farbe anpassen kann, habe ich nun schon herausgefunden, aber wenn man auf das Kontaksymbol klick passiert ja nichts. Wie kann man es einstellen, dass sich das Kontaktformular öffnet, wenn man auf den Umschlag geklickt hat?

      Vielen Dank schon mal!
      Gruß

    • #43

      ThomasO (Mittwoch, 16 April 2014 21:13)

      Wirklich nett und einfach einzubauen.

    • #42

      mineanime (Donnerstag, 10 April 2014 15:15)

      Danke! MineAnime gefällt das :-)

    • #41

      wurzelundfluegel (Montag, 07 April 2014 16:19)

      Geniall!!! Danke für die echt guten Beschreibungen!!!

    • #40

      mira-haschke (Freitag, 14 März 2014 20:22)

      vielen, vielen Dank... :)

    • #39

      W.Hardt GmbH Papier-Schreibwaren-Bücher+Spielwaren (Dienstag, 04 März 2014 17:27)

      wie kann der Kontakt-Button wieder entfern werden?

    • #38

      Nenad (Mittwoch, 26 Februar 2014 10:28)

      Ich habe eine Frage, weiß jemand ob die Tutorials nur für den privaten, nicht kommerziellen Gebrauch gestattet sind?

    • #37

      elisabethkirchmair (Montag, 03 Februar 2014 14:38)

      Knüpfe gerne an die Frage von Julian an - wie bekomme ich den Kontaktbutton auf die rechte Seite mit der korrekten Rotationsbewegung? Das verlegen ist kein Problem, aber das Ausklappen lässt sich nicht auf links ändern. DANKE für dein Feedback!!

    • #36

      Hakan Kolcu (Montag, 27 Januar 2014 12:46)

      Wie bekommt man die Schriftfarbe in Weiss und ist es möglich das man es direkt zum Kontaktformular auf eigener Webseite weiterleiten kann ?

    • #35

      Ugras (Freitag, 10 Januar 2014 12:39)

      Wie kann ich 2 oder 3 solche Buttons einbinden? Möchte einen als mail und die anderen als link machen. Bisher "kleben" sie aber immer zusammen. Über Tipps wie ich die Position verändern kann wäre ich sehr dankbar.

    • #34

      trogi (Sonntag, 15 Dezember 2013 23:07)

      Kann mann irgendwie auch zwei kontakt buttons übereinander einbinden?

    • #33

      Luca (Sonntag, 27 Oktober 2013 11:59)

      Hallo! Deine Seite gefällt mir echt gut!

      Den Kontaktbutton hab ich einrichten können. Ist es auch möglich, dass nicht nur im Betreff etwas steht sondern auch unterhalb im Text eine Warnung in roter Schrift erscheint wenn man eine Mail öffnet?

      Danke und Gruss

    • #32

      Thomas Rabe (Mittwoch, 16 Oktober 2013 17:37)

      Das nenne ich eine schnelle Antwort...Danke!!
      Ich muss halt etwas "offizieller" formulieren...
      Den Punkt hatte ich übersehen, war wohl zu sehr auf den Head und andere Tutorials konzentriert. Deine Seite habe ich erst heute entdeckt und jetzt "muss" ich einfach mal wieder ein paar Dinge anpassen ;)

    • #31

      Deine Slideshow (Mittwoch, 16 Oktober 2013 15:54)

      Danke für dein Feedback Thomas ;-)

      Den Text änderst Du ganz einfach im unteren Code an folgender Stelle ab:

      title="Schreib mir.."

      Viele Grüße.

    • #30

      Thomas Rabe (Mittwoch, 16 Oktober 2013 15:41)

      Ersteinmal: Hervorragende Seite!!... Hohes Niveau und dabei selbst für Dummies (wie mich!!) verständlich erklärt, was mich leider auch zu meiner Frage bringt:
      Wie kann ich den Text "Schreib mir..." beim Mouseover (gerne) ändern oder (notfalls) löschen??

      Anm.: Habe bisher schon die eine oder andere Funktion ausprobiert... was soll ich sagen,: funktioniert!! Die bisher beste Seite für das jimdo Widget/HTML-Modul.

    • #29

      moyo-wa-simba (Donnerstag, 19 September 2013 12:55)

      Es hat funktioniert!!!!!!!!!!
      Danke
      Susanne

    • #28

      Julian Mann (Mittwoch, 21 August 2013 17:49)

      Erst einmal vielen Dank für ein Weiteres tolles Tutorial!
      Echt super, dass Du so etwas hier anbietest - Respekt!
      Gerne würde ich wissen ob, und wenn ja wie, sich der Kontakt-Button auch an den rechten Rand verlegen lässt.
      Das Verlegen an sich bekomme ich hin - allerdings scheitere ich an der Bewegung des Buttons.

      Viele Grüße

    • #27

      techgamo (Freitag, 16 August 2013 15:07)

      Hey, Wie bekommt man den Kontakt Button transparent ?

      Mfg
      skyr