Pinegrow Forest

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

Texte in Pinegrow: Über Schriftarten, Textstile & mehr

Die Texte sind meist der wichtigste Bestandteil einer Website. Sie bilden den Hauptinhalt, sollten aber abwechslungsreich gestaltet werden, damit deine Seite nicht langweilig aussieht. Pinegrow bietet dir viele Möglichkeiten, Texte einfach zu bearbeiten und ansprechend zu gestalten.

Für Anfänger

T

Unterschiedliche Arten von Text

↪︎

Text auf Website ziehen

Text bearbeiten, Zeilenumbruch, löschen

U

Text formatieren & stylen

Für Fortgeschrittene

Eigene Schriftart einbauen

Text vertikal schreiben

Worttrennung & Umbrüche verhindern

Text mit Schatten

Symbole & Emojis

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

Die unerschiedlichen Arten von Text in Pinegrow

Auf Websites gibt es unterschiedliche Arten von Text und Pinegrow unterstüzt alle davon. Für Paragrafen, Überschriften, Links oder Listen existieren unterschiedliche Tags:

<p> Paragraf
Der am häufigsten verwendete Textbaustein. Er wird für alle Fließtexte genutzt.

<h> Überschriften
Die gibt es in 6 verschiedenen Stufen der Wichtigkeit (h1 bis h6)

<a> Verlinkungen
Links können auch in einem Text stehen. Das <a> Tag wird oft auch für Buttons verwendet.

<ul> Listen
Aufzählungen können in ungeordneten (<ul>) oder geordneten (<ol>) Listen stattfinden. Sie enthalten <li> Aufzählungspunkte

<i>, <b>, <u>, <s> Textstile
Ein Text lässt sich kursiv (<i>) oder fett (<b>), unterstrichen (<u>) oder durchgestrichen (<s>) darstellen.

<span> Textbereiche stylen
Mit dem span-Element lassen sich einzelne Wörter innerhalb eines Textes umgestalten (z.B. umfärben)

Verschiedene HTML Text-Elemente in Pinegrow nutzen

Verschiedene Arten von Text in Pinegrow und HTML

Ein Textfeld in Pinegrow auf die Website ziehen

Tipp: Ziehst du ein Text-Element durch das Tree-Panel auf die Seite, kannst du dessen genaue Position (innerhalb oder unterhalb eines div-Containers) leichter erkennen.

Einen Text auf die Website ziehen

Willst du einen Textblock auf deine Website ziehen, nutzt du das <p>-Element. Es befindet sich in der Library unter Content. Ziehe es einfach mit gedrückter linker Maustaste entweder direkt auf den Vorschaubereich deiner Seite, in eine Komponente der Basic Komponenten oder in den Tree-Tab auf der rechten Seite. 

Nutzt du den Tree-Tab, kannst du genauer kontrollieren, wo dein Textfeld landet. In den meisten Fällen gehört es in einen div-Container, vielleicht unter eine Überschrift.

Einen Text bearbeiten, Zeilenumbruch & löschen

Hast du ein Textfeld auf die Website gezogen oder willst den Text einer Komponente ändern, klickst du das Textfeld einfach doppelt an. Es öffnet sich der Texteditor in Pinegrow und du kannst deinen Text einfach eintippen. 

Hast du in deinem Text einen Zeilenumbruch und drückst die Enter-Taste, erstellt Pinegrow automatisch ein neues Textfeld (p) unter dem aktuellen. Das ist in HTML ganz normal und gewünscht. Willst du einen Zeilenumbruch innerhalb des Textfeldes, musst du die Shift-Taste (Großschreib-Taste) gedrückt halten und dann Enter drücken.

Willst du einen Textblock löschen, wählst du ihn einfach aus (am besten direkt das p-Element im Tree-Tab) und drückst die Entfernen-Taste deiner Tastatur bzw. nutzt Rechtsklick > Delete.

Text-Bearbeitungsmodus in Pinegrow

Klicke einen Text einfach doppelt an, um ihn in Pinegrow zu bearbeiten

Einen Text in Pinegrow formatieren und stylen: Fett, kursiv, unterstrichen uvm.

Tipp: Um nur einzelne Sätze oder Wörter eines Textes zu stylen, kannst du span nutzen und eigene Klassen vergeben.

Einen Text formatieren und stylen

Um den Text auf deiner Website in der Größe, Schriftart oder Farbe zu ändern, kannst du im Style-Tab das p-Element gestalten. Dann legst du direkt das Design vom kompletten Text deiner Website fest (Überschriften und Listen musst du separat gestalten).

Willst du einzelne Wörter oder Sätze innerhalb eines Textfeldes fett, kursiv oder unterstrichen darstellen, wählst du einfach den entsprechenden Satz / Wort aus und klickst im erscheinenden Menü direkt oberhalb auf B (fett), I (kursiv) oder U (unterstrichen).

Willst du ein Textfeld anders als andere auf deiner Website gestalten, zum Beispiel eine Bildunterschrift oder besonders wichtigen Text, musst du dem entsprechenden Textfeld eine Klasse vergeben. Wähle dazu das Textfeld aus und erstelle im Style-Tab eine neue Klasse. Dieser kannst du eine besondere Schriftfarbe, Schriftgröße, Schriftart und mehr vergeben.

Willst du nur einen Satz oder Wort innerhalb eines Textfeldes optisch besonders gestalten (Farbe, Schriftgröße, etc.), wählst du den Textbereich aus und klickst im erscheinenden Menü oberhalb auf span. Dem Span-Abschnitt kannst du dann eine eigene Klasse zuweisen und diesen so gestalten.

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

Eine eigene Schriftart in Pinegrow einbauen & nutzen

Eine eigene Schriftart in Pinegrow zu nutzen, ist aktuell leider nicht so einfach. Das Pinegrow Starterprojekt hat bereits die Schriftart Open Sans vorinstalliert. Generell solltest du keine Website ohne definierte Schriftarten online stellen.

Zwar bietet Pinegrow ziemlich einfach die Möglichkeit, eine Schrift von Google Fonts zu importieren, diese wird aber von einem Google-Server geladen. Aus Datenschutzgründen solltest du Schriftarten lieber lokal in deine Website einbinden.

Erstelle dazu in einem Projektordner am besten einen Ordner mit Schriftarten (fonts), dort kopierst du die Schriftarten rein, die du in deinem Projekt nutzen willst (als .fft, .woff, .woff2, .eot oder .svg Dateien). Diese kannst du dir voher downloaden oder kaufen.

Füge nun in deiner CSS-Datei diesen Code ein. Passe den Namen der Schriftart und den Speicherpfad an deine Bedürfnisse an und gib den Namen deiner Schriftart im Style-Tab unter Font family an.

@font-face {
 font-style: normal;
 font-weight: normal;
 src: local('Montserrat'),local('Montserrat-Regular'),
url('../media/montserrat-regular.woff2') format('woff2'),
url('../media/Montserrat-Regular.ttf') format('truetype');
 }
Eigene Schriftarten in Pinegrow hinzufügen

Tipp: Du solltest immer mind. eine Schriftart in deine Website einbinden. In unserem Starterprojekt ist das für dich schon erledigt.

Schrift in Pinegrow mit Writing mode: Vertical RL vertikal schreiben

Zahlreiche Texteinstellungen findest du im Style-Tab in Pinegrow

Text vertikal schreiben und andere Texteffekte

Im Style-Tab findest du unterschiedliche Einstellungen zum Aussehen und Verhalten von deinen Texten. Gestaltest du direkt das p-Element, änderst du das Aussehen aller Texte auf deiner Website. Willst du nur bestimmte Texte gestalten, musst du diesen im Style-Tab eine eigene Klasse vergeben (z.B. .TextVertikal)

In den Style-Einstellungen findest du unter FONT / TEXT alle relevanten Texteinstellungen. Hier änderst du die Schriftart, Schriftgröße und den Zeilenabstand sowie die Schriftfarbe, Dicke, Abstände der Buchstaben und mehr. Du kannst Texte unterschtreichen, durchstreichen, nur aus Großbuchstaben bestehen lassen oder sie mittels Writing mode: Vertical RL vertikal anzeigen lassen.

Wortrennungen und Umbrüche verhindern

Bei einer responsiven Website ist es normal, dass sich die Größe von Textfeldern ändert, je nachdem wie groß das Browserfenster bzw. das Gerät ist. So wandern Worte auf die nächste Zeile oder werden getrennt.

Durch die Einstellungen White space und Word break im Style-Tab kannst du bestimmen, wie genau das geschieht. Durch White space: Nowrap wird der automatische Zeilenumbruch verhindert, das ist z.B. praktisch bei Menüs. Mit Word break kannst du festlegen, ob und wie Wörter beim Zeilenumbruch getrennt werden sollen.

Einen Zeilenumbruch auf der Website mit Pinegrow verhindern

Mit der Einstellung White space: Nowrap lassen sich Zeilenumbrüche verhindern

Unterschiedliche Schatten zu Texten in Pinegrow hinzufügen

In den Text-Schatten Einstellungen lassen sich verschiedene Arten von Schatten erzeugen

Einen Text mit Schatten versehen

Genau wie alle anderen Objekte auch, kannst du ebenso Text in Pinegrow mit einem Schatten versehen. Das erzeugt einen schönen 3D-Effekt und hebt deinen Text optisch besser hervor. 

Im Style-Tab findest du die Einstellung TEXT SHADOW über die du deinem Text einen oder sogar mehrere Schatten hinzufügen kannst. Bestimmen lässt sich der Abstand, Winkel, Unschärfe und Farbe des Schattens. Mit etwas Kreativität lassen sich schöne Effekte erzeugen.

Symbole und Emojis verwenden

In Pinegrow kannst du deine Texte ganz einfach mit Symbolen wie Pfeilen, Klammern, Sonderzeichen und Emojis aufhübschen. Klicke dazu auf den Stern ★ im blauen Menü, das erscheint, wenn du einen Text bearbeitest 😉.

Selbstverständlich kannst du jedes beliebige Sonderzeichen in Pinegrow nutzen. Auf dem Mac gibt es dazu eine Zeichenübersicht ✔︎ im Internet existieren viele Seiten, auf dem du den Unicode für das entsprechende Zeichen kopieren und dann einfach im Textfeld einfügen kannst 🌲.

Symbole, Sonderzeichen und Emojis auf der Website in Pinegrow verwenden

Zahlreiche Symbole und Emojis sind im Menü der Textbearbeitung versteckt