Formular-Buttons als Link verwenden

Damit ein Link nicht erst nach langem Suchen, sondern bereits auf den ersten Blick über die Seite gesehen und als solcher erkannt wird, gibt es bei Jimdo die "Button"-Schaltfläche, mit der Buttons in verschiedenen Styles erstellt werden können.

 

Als Alternative für die Bordmittel-Methode bieten sich folgende Methoden (...so haben wir es früher gemacht...)

 

Bild verlinken

Die einfachste Methode ist, ein Bild des Knopfes hochzuladen, den man als Link verwenden will, und diesem mit der Standardschaltfläche "Link" eine Verknüpfung zuzuweisen:

 

Man kann auch innerhalb eines Text- oder Tabellenfeldes ein Bild von einer beliebigen Webseite (als Kopie) einsetzen, dann erscheint dieses praktisch im Fließtext. Diesem Bild lässt sich auf die gleiche Weise ein Link zuweisen.

 

Beispiel:

 


 

Nachteil: Die Grafik verändert beim darüberfahren mit der Maus nicht das Aussehen, ohne dass man weitere Maßnahmen ergreift. Lediglich der veränderte Mauszeiger lässt erkennen, dass es sich um einen Link handelt...

 

Input-Code

Eine viel elegantere Lösung ist das Einsetzen eines Input-Codes in ein Textfenster im html-Modus (zusätzliche Optionen > HTML bearbeiten)

 

HowToDo:

  • öffne das Textfeld im html-Modus 
  • füge einen der beiden folgenden Code-Snippets ein:
    • Link öffnet im selben Tab:
      <input type="button" value="Google" onclick="location='https://www.google.de'">

    • Link öffnet in einem neuen Tab:
      <input value="Google" onclick="popup=window.open('https://www.google.de')" type="button" />
Value =  Beschriftung des Buttons
location/window.open = URL: die Web-Adresse, wo die Verknüpfung hinführen soll

 

Beispiel:

  Ziel: https://www.google.de/

 

 Link öffnet im selben Tab

 

 Link öffnet in neuem Fenster/Tab

 




TIPP: Auf diese Weise "händisch" erstellte Buttons können auch in Textfeldern untergebracht werden!

 

 

 

PS: Jimdo-Buttons in Textfeldern

 

Mit einem kleinen Trick kann man auch einen Jimdo Standard-Button in einem Textfeld unterbringen:

 

Jimdo Standard-Button (erstellt mit Jimdo Button-Element)


 

Jimdo-Button in Textfeld




Kaum ein Unterschied zu sehen - ein bisschen eingerückt vielleicht...

HowToDo:

  • Jimdo-Button erstellen und verlinken
  • Im Ansichtsmodus RMT* auf Button und "Element untersuchen" wählen (Firefox)
  • html kopieren
  • im Bearbeitungsmodus kopiertes html in Textfeld (html-Modus) oder widget an der richtigen Stelle einfügen
  • ggf. Schriftfarbe (der Beschriftung) einstellen

 


*RMT= Rechte MausTaste


 

Quell-Code (Beispiel s.o. - nach Schriftfarbezuweisung):

 

<div id="cc-m-5959991864" class="n j-callToAction">
<div class="j-calltoaction-wrapper j-calltoaction-align-1"><span style="color: #ffffff;"><a style="color: #ffffff;" class="j-calltoaction-link j-calltoaction-link-style-1" data-action="button"  href="http://www.google.de/" target="_blank" data-title="Google">Google</a></span></div>
</div>

 

Interessant:

Jimdo verwendet eine andere Methode: data-action="button". Ah ja, so geht´s auch. Wir können also auch diesen Code kopieren und als Widget verwenden.


Noch interessanter:

Die Stilzuweisungen class="..." sind für die Formatierungen verantwortlich. Die ID: id="cc-m-5959991864" brauchen wir nicht, sie kann gelöscht werden.
Aber dann: "j-calltoaction-link-style-1" wird ersetzt durch "j-calltoaction-link-style-4" und die neue Klasse beliebig angepasst. Schon haben wir mehr als 3 Stile für unsere Buttons!


Auch interessant:

Diesen Link kann ich auch im gleichen Fenster öffnen lassen. Einfach target="_blank" durch target="_self" ersetzen...


Und auch noch interessant:

Der Link des ins Textfeld eingestzten Buttons kann mit Bordmitteln geändert werden:

Kommentar schreiben

Kommentare: 0