Pinegrow Forest

Die inoffizielle Hilfeseite & Community mit Tipps & Tricks rund um Pinegrow, dem Programm zur Erstellung von Webseiten

Links in Pinegrow: Über Verlinkungen, Linkstile, Buttons & mehr

Links sind sehr wichtige Elemente einer jeden Website. Mit Ihnen lässt du Nutzer auf andere Unterseiten oder bestimmte Bereiche deiner Seite gelangen. Du kannst aber auch Anrufe und mehr starten. Pinegrow bietet dir viele Möglichkeiten, Links einfach zu bearbeiten und ansprechend zu gestalten.

Für Anfänger

a

Das Link-Element a und href

↪︎

Links auf Website einbauen

↪︎

Elemente verlinken

Links entfernen

U

Links gestalten

:ho
ver

Linkstadien & Pseudoklassen

🀱

Buttons gestalten

Für Fortgeschrittene

#

Link zu Bereich einer Seite

Link zu Dokumenten & Bildern

+

Link in neuem Browser-Tab

@

Anrufe & E-Mails starten

</>

Javascript ausführen

Hover-Animationen

Für Anfänger: Mit Links in Pinegrow arbeiten

Elemente verlinken und Linkziel hinzufügen

Wie du Texte, einzelne Worte, Bilder und andere Objekte mit einem Link versetzt, hast du weiter oben gelesen. Jetzt musst du noch das Linkziel angeben, also die Seite, auf die ein Nutzer gelangt, nachdem er den Link angeklickt hat.

Egal, wie du einen Link in Pinegrow gesetzt hast, überall findest du ein Feld Href. Hier gibst du das Linkziel an. Pinegrow macht es dir einfach: Wenn du auf das Ordner-Symbol klickst, kannst du die Unterseite, zu der du verlinken willst (z.B. deine Seite kontakt.html) einfach in deinem Website-Ordner auswählen.

Willst du zu einer fremden Website verlinken, kannst du im Feld Href auch einfach eine URL wie https://www.pinegrow-forest.com eingeben.

Linkziel Href in Pinegrow hinzufügen

Das Linkziel Href kannst du in Pinegrow ganz einfach hinzufügen

Pseudoklassen bei Link hover, active, focus, visited in Pinegrow einstellen und gestalten

Tipp: Das Stadium deiner Links (hover, active, etc.) kannst du im Style-Tab ganz einfach umschalten, um deine Design-Einstellungen zu sehen.

Linkstadien und Pseudoklassen wie :hover, :active und :focus

Um Links noch besser hervorzuheben, kannst du deren Aussehen verändern, wenn man mit der Maus über sie fährt oder sie anklickt. Das kannst du im Style-Panel mithilfe der sogenannten Pseudoklassen :hover, :active und :focus einstellen.

hover: Style, wenn du mit der Maus über den Link fährst

active: Style, wenn du den Link anklickst

focus: Style, wenn du den Link mit den Pfeiltasten deiner Tastatur ausgewählt hast

visited: Style, wenn du den Link schonmal besucht hast

Klicke dazu auf die drei Punkte im Style-Tab, während du ein Link-Element ausgewählt hast. Wähle das a-Element aus und klicke auf den Doppelpunkt dahinter : > wähle hier z.B. hover aus. Klicke auf Create und schon hast du eine Regel erstellt, mit der du das Aussehen deiner Links ändern kannst, wenn du mit der Maus darüberfährst (hover).

In Pinegrow kannst du die verschiedenen Linkstadien eines Link-Elements sehen, wenn du es auswählst und ganz oben im Style-Tab auf :active, :hover usw. klickst.

Buttons in Pinegrow gestalten

Buttons kennst du von fast jeder Website. Sie sind meist auffällig gestaltet und laden dazu ein, sie anzuklicken. Buttons sind aber in den meisten Fällen ganz normale Links, also a-Elemente.

Willst du einen Button in Pinegrow erzeugen (mal abgesehen von Formular-Absende-Buttons o.ä.) ziehe einfach ein a-Element an die Stelle deiner Website, wo du den Button gern hättest und erstelle eine Klasse (z.B. .Button). Im Starterprojekt ist das für dich schon vorbereitet. Diese Klasse kannst du jetzt gestalten, damit sich die Buttons von den restlichen Links deiner Website unterscheiden.

Buttons sind oft eckig oder rund, und haben in den meisten Fällen eine Hintergrundfarbe. Wählst du eine Background-Color, etwas Padding und einen Border Radius, erzielst du schnell gute Erfolge.

Links und Buttons in Pinegrow im Style-Tab gestalten

Hier ein paar Button-Beispiele:

ButtonButton ButtonButton

Für Fortgeschrittene: Tipps & Tricks zu Links in Pinegrow

zu Dokumenten und Bildern in Pinegrow verlinken und downloaden

Der Browser zeigt PDF-Dokumente und Bilder an, wenn du darauf verlinkst

Link zu Dokumenten und Bildern zum Download erstellen

Manchmal ist es sinnvoll, Bilder oder PDF-Dokumente wie Speisekarten o.ä. zum Download anzubieten. Das geht in Pinegrow ganz einfach.

Du musst zuerst dein Bilder oder Dokument, das du zum Download anbieten möchtest, in deinen Website-Ordner schieben. Vielleicht erstellst du einen eigenen Ordner "downloads". Lade die Website in Pinegrow neu und schon siest du die Datei auch in Pinegrow.

Jetzt brauchst du nur noch den Pfad deiner Datei. Das ist zum Beispiel "website.de/downloads/mein-Dokument.pdf". Diesen Link gibst du einfach als Href deines Links / Buttons an und der Nutzer sieht das Dokument / Bild im Browser und kann es herunterladen.

Link in einem neuen Browser-Tab öffnen

Wer zu fremden Website verlinkt will oft, dass der Seitenbesucher die eigene Website nicht gänzlich verlässt und lässt den Link in deinem neuen Browser-Tab öffnen. So hat der Seitenbesucher deine Website noch in einem Tab offen.

In Pinegrow kannst du ganz einfach einstellen, dass sich ein Link in einem neuen Browser-Tab öffnen soll. Beim setzen des Links findest du das Feld Target, in dem du die Werte _blank, _parent oder _top auswählen kannst. Wählst du nichts aus, öffnet sich der Link ganz normal. Bei _blank öffnet sich der Link in einem neuen Browser-Tab oder Fenster. _parent und _top brauchst du nur, wenn du mit frames und iframes hantierst.

Link mit Pinegrow in neuem Browser-Tab oder Fenster öffnen

Verwende als Target des Linkziels _blank, um den Link in einem neuen Browser-Tab öffnen zu lassen

E.Mail per Link in Pinegrow mit Href mailto: starten

Starte eine E-Mail per Klick auf einen Link mit dem Href mailto:...

Anrufe und E-Mails per Link starten

Links auf Websites können noch mehr, als nur Nutzer irgendwohin zu leiten. Du kannst mit ihnen auch Anrufe starten und E-Mails verschicken. Gib dazu einfach folgende Befehle in das Linkziel-Feld Href ein:

mailto:info@website.de > Öffnet das E-Mail-Programm des Nutzers mit einer neuen (leeren) E-Mail an die Adresse info@website.de. 

tel:+49157123456789 > Startet einen Anruf an die Telefonnummer 0157 123456789. Gib die Nummer immer ohne Leerzeichen und am besten mit der Vorwahl +49 (für Deutschland) ein.

Es gibt auch Links, mit denen du einen Skype-Anruf oder einen WhatsApp-Chat startest. Du kannst auch bei einer E-Mail schon den Betreff und Text angeben. Suche dazu einfach im Internet nach der Lösung, die dich interessiert.

Javascript per Klick auf Link / Button ausführen

Bist du fortgeschritten und hast eigene Javascript-Funktionen geschrieben, die du beim Klick auf einen Link oder Button starten lassen möchstest, kannst du das mit der folgenden Schreibweise machen:

jacascript:meineFunktion();

Willst du eine Animation erstellen oder das Aussehen eines Objekts deiner Website per Knopfdruck ändern, nutzt du am besten die Pinegrow Interactions und musst kein eigenes Script programmieren.

Javascript per Link in Pinegrow starten

Per Href eines Links lässt sich auch Javascript starten

Fortgeschrittene Hover-Animationen

Wie du die Optik von Links mit :hover änderst, wenn man mit der Maus drüber fährt, hast du weiter oben schon gelesen. Mit ein paar Tricks kannst du fortgeschrittene Hover-Animationen erstellen.

Mit der CSS-Einstellung transition lässt sich eine Zeitdauer einstellen, die eine Übergangsanimation vom normal- zum hover-Staus eines Links startet.

Noch aufwändigere Animationen lassen sich mit CSS-Keyframes starten. Gib dazu CSS-Einstellungen am Anfang und Ende der Animation mittels @keyframes in deine CSS-Datei ein und starte diese mit der CSS-Eigenschaft animation: meineAnimation 2s; (2s = Dauer der Animation)

@keyframes meine Animation {
 from {top: 0px;}
 to {top: -5px;}
}

Viel einfacher ist die Verwendung von Pinegrow Interactions, mit denen du ziemlich leicht komplexe Animationen erstellen kannst, die starten, wenn du mit der Maus über ein Objekt (z.B. einen Link) fährst.