1. Schritt: Das gekaufte Starterprojekt herunterladen

Nachdem du unser Starterprojekt mit Basic-Komponenten für Pinegrow gekauft hast, kannst du es herunterladen. Entpacke die ZIP-Datei und du siehst zwei Ordner und eine PDF-Anleitung.

Die Anleitung solltest du dir genau anschauen. Der Ordner Starter-Website enthält das Starterprojekt. Dupliziere diesen Ordner am besten für jedes neue Projekt. Der Ordner Basic-Komponenten enthält die vorgefertigen HTML & CSS Elemente wie Menüs, Titelbereiche und mehr.

3. Schritt: Basic-Komponenten reinladen

Die Basic-Komponenten mit vorgefertigten Bausteinen wie Menüs, Titelbereiche, Footer und mehr musst du zum Start Start in das Projekt laden. Wähle dazu am besten die Seite master.html aus (linke Seitenleiste) und klicke dann oben auf Page > Manage libraries & plugins.

Es erscheint eine Liste mit möglichen Plugins. Klicke beim ersten Start ganz unten auf Load component library und wähle den Ordner Basic-Komponenten an deinem Speicherort aus. In Zukunft tauchen die Basic-Komponenten schon in der Liste auf. Du kannst die Komponenten in mehreren Projekten nutzen, ohne den Ordner Basic-Komponenten zu duplizieren. Speichere ihn einfach dauerhaft irgendwo ab, damit es zu keinen Verlinkungsproblemen kommt.

Wir müssen noch die Ressourcen (Bilder, CSS-Datei, etc.) zum Projekt hinzufügen. Klicke bei ausgewählter Masterseite (master.html) nochmal auf Page > Manage libraries & plugins und klicke neben den Basic-Komponenten auf Resources. Im erscheinenden Fenster wählst du Add to or update all files in Starter-Website aus. Setze niemals den Haken bei "Overwrite resources...", da du sonst eventuelle Style-Änderungen verlierst.

1. Schritt: Masterseite auswählen + Aufbau

Die Masterseite ist quasi die Vorlage für alle Seiten auf deiner Website. Hier legst du Einstellungen fest, die auf jeder Unterseite gelten sollen. Das betrifft neben Header und Footer auch Code z.B. für Google Analytics und mehr.

Wenn du die Masterseite master.html auswählst, siehst du bereits einen leeren Header und Footer (oben und unten). Im Header (Kopfbereich) befindet sich bei den meisten Websites das Menü, im Footer (Fußzeile) befinden sich meist wichtige Links z.B. zum Impressum und der Datenschutzerklärung.

In der Mitte sind bereits viele wichtige Elemente wie Überschriften, Texte, Links uvm. aufgelistet. Diese erscheinen nur auf der Masterseite. Hier kannst du Überschriften und mehr auf einen Blick gestalten und das Design deiner Website festlegen.

3. Schritt: Header und Footer gestalten

Wie du siehst, hast du in wenigen Sekunden einen funktionierenden Header mit Menü und einen Footer. Du kannst die einzelnen Elemente wie Text, Icons usw. entweder in der Vorschau direkt anklicken, oder im Tree-Tab in der rechten Seitenleiste gezielhter auswählen. 

Hast du ein Element ausgewählt, kannst du es im Style-Tab (ebenfalls rechts) gestalten. Hier hast du jede Menge Möglichkeiten: Ändere Schriften oder Hintergründe, lege Abstände und Positionen fest oder füge Rahmen und Schatten hinzu. Mache aus den Basic-Komponenten deine Website mit eigenem Design.

Natürlich kannst du Elemente, die du nicht brauchst, einfach löschen oder andere einbauen. Wenn du dich über die Seitenstruktur mit div-Elementen und .Klassen wunderst, lies mehr zum Einstieg in Pinegrow und HTML.

5. Schritt: Überschriften, Texte, Links, Buttons und mehr gestalten

Auf der Masterseite findest du eine Übersicht wichtiger Elemente wie Überschriften (verschiedener Ordnungen), Texte, Links, Buttons, Listen, Felder und mehr. Diese Übersicht gibt es nur auf der Masterseite, sie wird nicht auf andere Seiten übertragen.

So kannst du schnell und übersichtlich das Design wichtiger Elemente deiner Website festlegen. Gestaltest du hier z.B. eine Überschrift (h1) um, sehen alle H1-Überschriften deiner Website so aus. 

1. Schritt: Basic-Komponenten auf die Startseite ziehen

Um die Startseite aufzubauen, wechselst du zur Seite index.html auf der linken Seitenleiste. Im Tree-Tab auf der rechten Seitenleiste siehst du, dass die Seite bereits in header, main und footer aufgeteilt ist (unter dem Punkt Body). Den Header und Footer haben wir schon gestaltet, im Main-Bereich bauen wir unsere Seite auf.

Im Tab Library in der linken Seitenleiste findest du die vorbereiteten Basic-Komponenten. Du kannst häufig genutzte und wichtige Elemente wie Titelbereiche, Menüs, Textbereiche, Karten, Checklisten, Accordions und mehr schnell und bequem nutzen, indem du sie einfach in den Main-Bereich der Startseite ziehst. Baue dir deine Seitenstruktur in wenigen Sekunden auf. Die leeren Bereiche (auch mit mehreren Spalten) kannst du völlig individuell mit Inhalten füllen.

3. Schritt: Eigene Texte einfügen

Die Texte der Basic-Komponenten sind nur Platzhalter - natürlich kannst du schnell und einfach deine eigenen Texte einbauen.

Klicke dafür einfach die Texte in der Vorschau (in der Mitte) doppelt an und tippe los. Im erscheinenden Balken kannst du markierten Text direkt in fett, kursiv oder unterstrichen umwandeln, per span formattieren oder Links setzen.

5. Schritt: Responsive, mobil optimierte Darstellung prüfen

Du erstellst deine Website in Pinegrow normalerweise responsive, sie passt sich also automatisch an verschiedene Bildschirmgrößen an. Unsere Basic-Komponenten sind bereits mobil optimiert und sehen immer gut aus - egal ob auf dem großen Computer oder kleinen Smartphone.

Prüfe die Darstellung deiner Website auf verschiedenen Geräten indem du entweder eine Größe links oben in der mittleren Vorschau auswählst, oder den Vorschaubereich an der Seite schmaler oder breiter ziehst. 

Im Starterprojekt gibt es drei Breakpoints (500px, 750px, 1000px) an denen sich die Darstellung einiger Objekte ändert. Diese siehst du im Style-Panel (@media...). Willst du die mobile Ansicht ändern, musst du die Vorschau klein darstellen, erst dann werden die Style-Einstellungen für kleine Displays sichtbar. Du kannst jederzeit zusätzliche Breakpoints hinzufügen und jedes Objekt in jeder Displaygröße wie gewünscht gestalten.

1. Schritt: Neue Seite in Pinegrow anlegen

Nachdem wir die Startseite fertiggestellt haben, wollen wir noch eine Kontaktseite erstellen. Das machst du einfach per Rechtklick im Project-Tab (linke Seitenleiste): Add new page.

Klicke im erscheinenden Fenster auf die Masterseite deiner Website, so wird automatisch auch bei der neuen Seite der Header und Fotter der Masterseite genutzt. Benenne die neue Seite z.B. kontakt.html.

3. Schritt: Neue Seite im Menü verlinken

Damit deine Seitenbesucher die neue Unterseite auch finden, müssen wir sie noch im Menü verlinken. Klicke dazu einfach in der Masterseite auf den Menüpunkt (z.B. Kontakt) bzw. wähle den Link (a) im Tree-Tab aus. Im Tab Element properties kannst du beim Punkt Href das Linkziel (also z.B. kontakt.html) angeben.

1. Schritt: SEO Metadaten für die Suchmaschinen eingeben

Das Starterprojekt kommt mit SEO-relevanten Meta-Einstellungen wie Seiten-Title und -Description, Meta-URL, Vorschaubild, Favicon und mehr. Diese findest du im Head-Bereich der Masterseite. Da einige Infos wie der Titel auf jeder Unterseite verschieden sind, sind diese automatisch editierbar.

Um die Meta-Einstellungen deiner Seiten hinzuzufügen, klicke einfach im Tree-Tab ganz oben auf den Namen deiner Seite und wechsle in den Tab Element properties. Dort kannst du Title (den Seitentitel, der auch im Browser erscheint), Description (Beschreibung, die auch bei Google erscheint) und mehr eingeben. Mit dem optionalen Tag "noindex" kannst du festlegen, ob deine (Unter-)Seite bei Google erscheinen soll, oder nicht.

3. Schritt: Impressum & Datenschutz - Die Website rechtssicher machen

Das Internet ist kein rechtsfreier Raum - wer eine Website erstellt, sollte wissen was er tut und sich mit der aktuellen Gesetzeslage auskennen. Dazu gehört neben korrektem Datenschutz auch das Impressum und die Datenschutzerklärung.

Im Starterprojekt sind beide Seiten bereits angelegt (aber natürlich noch nicht ausgefüllt): impressum.html und datenschutz.html. Du kannst die Rechtstexte einfach eingeben oder von einem Anwalt erstellen lassen. Nutzt du externe Inhalte oder Analysewerkzeuge, brauchst du wahrscheinlich noch ein Cookie-Tool.