Links auf Website in Pinegrow einbauen

In Pinegrow kannst du ganz einfach Texte und andere Objekte verlinken. Willst du einen kompletten Textlink oder Button in deine Website einbauen, nutzt du am besten das Link-Element a aus der Library (unter Content oder Text). Ziehe es einfach auf deine Website an die Stelle, an der du es haben willst.

Willst du einen Textabschnitt in einem längeren Text verlinken, markierst du diesen am besten mit der Maus, wähend du den Text bearbeitest, und klickst im blauen, oberhalt erscheinenden Menü auf Link. Hier kannst du direkt dein Linkziel eingeben und mit Create Link bestätigen.

Du kannst ohne Probleme auch andere Objekte wie Bilder, Überschriften, div-Blöcke, Listelemente, und mehr verlinken. Klicke dazu z.B. das Bild an, das du verlinken möchtest und gehe auf den Tab Element Properties in der rechten Seitenleiste. Ganz unten findest du den Button Create Link. Oder du klickst das Bild mit der rechten Maustaste an und wählst im Menü Transform > Add link.

Links in Pinegrow wieder entfernen

Einen Link in Pinegrow wieder zu löschen ist so einfach, wie ihn zu setzen. Klicke das verlinkte Objekt einfach auf der Website-Vorschau an und gehe auf Element properties auf der rechten Seitenleiste. Dort klickst du ganz unten auf den Button Remove the link.

Oder du klickst das Objekt mit der rechten Maustaste an und wählst Transform > Remove the link.

Solltest du auf irgendwelchen Gründen nirgens die Option, einen Link zu entfernen sehen, schaust du dir das Objekt am besten im Tree Tab auf der rechten Seitenleiste an. Es sollte in einem a-Element stecken (vielleicht musst du zunächst alle Ebenen mit dem Pfeil aufklappen), dort kannst du es einfach rausschieben und das Link-Element a löschen. Siehst du kein a-Element, gibt es auch keinen Link.

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.