Pinegrow Forest

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

zur Englischen Version

DE

  1. Deutsch
  2. Englisch
Goldfish Website Projekte in Pinegrow öffnen und bearbeiten

Starterprojekt mit Basic-Komponenten

Mit dem Starterprojekt von Pinegrow Forest mit vorgefertigten Basic-Komponenten erstellst du schnell und einfach einzigartige Websites in Pinegrow.

Das Starterprojekt bietet einen deutlich leichteren Einstieg und kann für unbegrenzt viele Projekte genutzt werden. Die Basic-Komponenten enthalten leichte Vorlagen in reinem HTML & CSS mit Interactions und sind ohne Framework nutzbar. 

Melde dich im Login-Bereich an und kaufe das Starterprojekt dort um zukünftige Updates kostenlos zu erhalten.

zzgl. MwSt.
Mit dem Kauf stimmen Sie unseren AGB zu

Zahlungen per Banküberweisung oder PayPal auf Anfrage an info@pinegrow-forest.com

Einfacher Einstieg

Starte leichter neue Projekte wenn du neu in Pinegrow bist

Vorbereitetes Start-Projekt

Spare Zeit durch das vorbereitete Projekt mit üblichen Einstellungen

Viele Basic-Komponenten

Nutze vorgefertigte Komponenten wie Menüs, Titelbereiche & Footer

Leichterer Einstieg in Pinegrow für Anfänger

Pinegrow gibt dir die Möglichkeit, eine komplett individuelle Website vollkommen nach deinen Wünschen zu erstellen und erlegt dir dabei im Grunde keine Grenzen auf. Das Programm für Profianwender überfordert aber mit seiner sehr steilen Lernkurve Neueinsteiger oft und setzt gewisse Grundkenntnisse im Bau von Websites voraus.

Das Starterprojekt nimmt dir als Anfänger viele Hürden und Einstellungen ab und du kannst direkt mit dem Bau und der Gestaltung deiner Website beginnen. So gelingt dir auch ohne Programmierkentnisse die Einarbeitung in Pinegrow deutlich schneller und leichter. Du öffnest einfach ein bereits vorbereitetes, leeres Projekt und ziehst fertige Komponenten wie Menüs, Titelbereiche, Bereiche mit Text und Bild, Footer und mehr auf deine Seite.

Mit dem Pinegrow Forest Starterprojekt viel Zeit sparen und individuelle Websites mit Pinegrow erstellen

Mit dem Starterprojekt hast du als Anfänger einen leichteren Einstieg in Pinegrow und erstellst Websites viel schneller

Masterseite vom Pinegrow Forest Starterprojekt mit HTML Elementen wie Überschriften zum schnellen stylen

In der Masterseite legst du schnell und einfach das Design deiner Seite fest

Wiederverwendbares Starter-Projekt

Unser Starterprojekt setzt durch nur wenige gängige Voreinstellungen auf völlige Individualität in der Erstellung von Websites mit Pinegrow. Du findest eine leere Seite vor, die bereits eine Masterseite mit Header- und Footer-Bereich, eine mit @Fontface eingebettete Schriftart, eine Übersicht zum schnellen gestalten und einige SEO-Einstellungen enthält.

Mit dem Starterprojekt erstellst du schneller beliebig viele Websites, ohne immer wieder die gleichen Grundeinstellungen vornehmen zu müssen. Da dazu kein Framework, sondern nur wenig Code benötigt wird, werden deine Websites leichter und schneller.

Zahlreiche Basic-Komponenten einfach & schnell nutzen

Bei den Basic-Komponenten handelt es sich um vorgefertigte, häufig verwendete Bereiche wie Mehrspaltige Blöcke, Header, Menüs, Titelbereiche, Bereiche mit Text und Bild, Karten mit Icons, Checklisten, Preislisten, Accordions, DSGVO-konforme Dritt-Inhalts-Warnungen, Kontaktformulare, Tabellen, Footer und mehr.

Du kannst alle Komponenten einfach auf deine Website ziehen und individuell völlig frei gestalten bzw. abändern. Die Komponenten, die du in allen Projekten verwenden kannst, setzen auf möglichst wenig Code, sind vollkommen responsiv optimiert und sparen jede Menge Zeit bei der Erstellung einer Website.

Ziehe vorgefertigte, aber komplett bearbeitbare Blöcke wie Titelbereiche und Menüs schnell und einfach auf deine Website

Starterprojekt im Login-Bereich kaufen

Melde dich kostenlos im Login-Bereich von Pinegrow-Forest an und kaufe das Starterprojekt dort, um in Zukunft Updates mit neuen Inhalten gratis downloaden zu können.

kostenlos registrieren

Basic-Komponenten in der Übersicht

Inhaltsblöcke

Die leeren Inhaltsblöcke befüllst du ganz individuell mit Texten, Bilden, Überschriften und mehr. Es gbit sie auch mit mehreren Spalten, so kannst du sehr einfach Elemente (wie Text und Bild) nebeneinander positionieren. Die Inhaltsblöcke umgeben deinen Inhalt mit einem praktischen Rand / Seitenabstand, der sich an jede Gerätegröße anpasst.

Inhaltsblock - Pinegrow Forest Basic Komponente

Header L Hamburg

Ein relativ umfassender Header (Kopfzeile) mit Platzhalter für ein Logo, Beschreibungstext, Kontaktdaten und einem Menü mit Dropdown-Funktion. Auf Smartphones wird das Menü als Hamburger-Menü (drei Striche) angezeigt und mit einer Animation geöffnet. Wie bei allen Komponenten lassen sich bequem Elemente entfernen oder hinzufügen.

Header L Hamburg - Ein umfassender Header mit Hamburger Menü - Pinegrow Forest Basic Komponente

Header L Scroll

Ein relativ umfassender Header-Bereich mit Logo, Beschreibungstext, Kontaktdaten, Dropdown und einem Menü, das sich auf mobilen Geräten in ein horizontales Scroll-Menü umschaltet. So sind die ersten Menüpunkte direkt sichtbar und mit einem Wisch nach links erscheinen die restlichen Menü-Links.

Header L Scroll - Umfassender Header mit Scrollmenü - Pinegrow Forest Basic Komponente

Header S

Ein minimalistischer Header mit Logo und Menü ohne viel Schnickschnack. Auf mobilen Geräten verwandelt sich das Menü in ein Hamburger-Menü (drei Striche) mit einer schönen Animation beim Öffnen. Wie alle Komponenten ist auch der Header S vollständig anpassbar.

Header S - Minimalistischer Header mit Hamburger Menü - Pinegrow Forest Basic Komponente

Verschiedene Menüs

In den Basic-Komponenten sind auch verschiedene Menüs zum freien Einsatz auf deiner Website enthalten. Sie bieten Dropdown-Menüs und werden auf Smartphones zu einem Hamburger- oder horizontalem Scroll-Menü.

Menüs - Hamburger-Menü oder Scroll-Menü zum freien Einsatz auf der Website - Pinegrow Forest Basic Komponente

Titelbereich Verlauf

Ein Titelbereich mit Text, der mittels Hintergrund-Verlauf über dem Hintergrundbild liegt. Die Inhalte (standarsmäßig Überschrift, Text und Button) können frei gewählt werden, zudem ist die Hintergrundfarbe natürlich frei wählbar. Alles lässt sich individuell anpassen.

Titelbereich Verlauf - Farbverlauf mit Text über Titelbild - Pinegrow Forest Basic Komponente

Titelbereich geteilt

Ein Titelbereich mit Text neben dem Titelbild. Wie alle Komponenten ist auch dieser völlig responsive (auf alle Gerätegrößen optimiert) und lässt sich vollständig anpassen (angezeigte Elemente, Texte, Bilder, Hintergrundfarbe, Seitenverhältnis und mehr).

Titelbereich geteilt - Titelbild neben Text - Pinegrow Forest Basic Komponente

Titelbereich Overflow

Ein Titelbereich mit Überschrift und Beschreibungstext, der sich leicht über das Hintergrundbild legt. So sind auf dem ersten Blick mehr Infos als nur ein Bild zu sehen. Wie immer vollständig responsive und anpassbar.

Titelbereich Overflow - Überschrift und Text ragen ins Titelbild herein - Pinegrow Forest Basic Komponente

Titelbereich Inside

Ein Titelbereich, bei dem Inhalt wie die Überschrift und Beschreibungstext das Titelbild überlagern. Selbstverständlich vollständig responsive und in Sachen Inhalt, Größe, Text, Farbe, Transparenz, Milchglas-Effekt und mehr anpassbar.

Titelbereich Inside - Titelbild überlagert mit Überschrift und Text - Pinegrow Forest Basic Komponente

Einfacher Textblock

Ein ganz einfacher Block mit Text und einer Überschrift. Ganz einfach lassen sich nach Belieben Elemente wie Bilder, Buttons und mehr hinzufügen. Wie alle Basic-Komponenten vollständig responsive und für alle Gerätegrößen optimiert.

Einfacher Textblock - Überschrift und Text untereinander - Pinegrow Forest Basic Komponente

Block mit Text und Bild

Häufig verwendete Komponente mit Inhalt wie Text und Überschrift neben einem Bild. Werden mehrere davon untereinander gepackt, wechselt sich die Ausrichtung und Hintergrundsfarbe ab. Dieses Verhalten ist wie angezeigte Elemente und das komplette Design vollständig anpassbar.

Block mit Text und Bild - Pinegrow Forest Basic Komponente

Block mit Text und Bild Voll

Der Textbereich wird neben dem Bild in Kachel-Optik dargestellt. Weitere Inhalte wie Buttons lassen sich ganz einfach hinzufügen. Die Reihenfolge von Text und Bild wechselt sich ab, was sich aber wie alles andere auch einstellen / anpassen lässt.

Block mit Text und Bild in Kachel-Optik - Pinegrow Forest Basic Komponente

Text auf Bild

Der Textblock wird bei dieser Komponente als Überlagerung auf dem Bild angezeigt. In linker und rechter Ausführung vorhanden. Wie immer responsive und vollständig anpassbar in Sachen Inhalt, Text, Transparenz, Hintergrundfarbe, Milchgals-Effekt, Bild und vielem mehr.

Text als halbtransparenter Overlay auf Bild - Pinegrow Forest Basic Komponente

Icons

Icons mit Text nebeneinander dargestellt. Bild / Symbol, Text sowie Anzahl der Icons ist leicht zu ändert. Wird gern für Siegel, Übersichten oder Kontaktbereiche genutzt. Mobil werden die Icons untereinander dargestellt.

Icons - Drei Symbole mit Text nebeneinander - Pinegrow Forest Basic Komponente

Karten

Drei Karten mit Bild, Text und Button nebeneinander. Praktisch für Leistungsübersichten und mehr. Selbstverständlich in Sachen Inhalt, Positionierung, Anzahl der Karten, Farbe, Schatten, Hover-Effekt und mehr vollständig einstellbar und responsive.

Karten - Inhaltsübersicht mit Bild nebeneinander - Pinegrow Forest Basic Komponente

Übersicht

Eine anpassbare Übersicht mit Icons, Überschriften, Text und Buttons. Auf großen Monitoren werden vier, auf mittleren Bildschirmen zwei Blöcke nebeneinander dargestellt. Auf Smartphones stehen die Blöcke untereinander. Wie immer vollständig anpassbar.

Übersicht mit Icons, Text und Buttons - Pinegrow Forest Basic Komponente

Checklist

Eine Checkliste als übersichtliche Darstellung von Eigenschaften, Leistungen, Vorteilen und mehr. Vollständig anpassbar in Sachen Symbol, Anzahl der Spalten, Abstände, Animationen, Farben und co. Selbstverständlich responsive.

Checkliste - Übersicht mit Häckchen - Pinegrow Forest Basic Komponente

Preisliste

Eine Preisliste für Speisen oder Leistungen mit Infos wie Beschreibungstext, Größen, Preisen und mehr. Passt sich an alle Gerätegrößen an und ist vollständig individualisierbar. Farbwechsel zur besseren Übersichtlichkeit lässt sich anpassen.

Preisliste - Individualisierbare Speisekarte - Pinegrow Forest Basic Komponente

Accordion

Ein Accordion mit ausklappbaren Inhalten und einer schönen Animation. Wird gern z.B. für FAQs genutzt. Wie alle Komponenten vollständig responsive und anpassbar (Inhalte wie Bilder, Buttons etc., Farben, Animationen und Effekte, Texte, Anzahl, Formen etc.)

Accordion - FAQ mit Animationen - Pinegrow Forest Basic Komponente

Tabelle

Eine einfach zu gestaltende und erweiterbare Tabelle. Befüllbar mit Texten, Bildern und anderen Inhalten. Spalten und Reihen lassen sich einfach hinzufügen und die komplette Optik wie Farben, Abstände, Positionierung, Rahmen ect. individuell gestalten.

Tabelle - einfach anpassbar - Pinegrow Forest Basic Komponente

Zustimmung externer Inhalt

Ein DSGVO-konformes Element zur Zustimmung vor dem Laden externer Inhalte wie YouTube-Videos und mehr. Die Quelle wird nicht geladen, bevor der Nutzer Zugestimmt hat. Optisch selbstverständlich vollständig anpassbar (z.B. mit Vorschau als Hintergrundbild).

DSGVO-konforme Zustimmung externer Inhalt - Pinegrow Forest Basic Komponente

Unterbrecher-Formen

Formen wie diese weiße Schräge oberhalb und unterhalb der Icon-Komponente sind ebenfalls in den Basic-Komponenten erhalten. Die Form, Winkel, Farbe etc. ist vollständig anpassbar. Solche Unterbrecher lockern den Inhalt optisch auf und differenzieren sich zum typischen Block-Design.

Unterbrecher-Formen - Schrägen oberhalt und unterhalb von Blöcken - Pinegrow Forest Basic Komponente

Unterbrecher Kontakt

Ein Unterbrecher / Störer, der zwischen dem normalen Inhalt eingebaut werden kann, um diesen aufzulockern und z.B. Kontaktdaten anzuzeigen. Auf Wunsch mit abgedunkeltem Hintergrundbild, in Farbe, Design und Inhalt vollständig anpassbar und responsive.

Unterbrecher mit Kontaktdaten und Hintergrundbild - Pinegrow Forest Basic Komponente

Unterbrecher Zitat

Ein schöner Unterbrecher zwischen dem Inhalt mit einem Zitat, auf Wunsch mit Hintergrundbild und einem Bild des Autors. Lockert den Inhalt auf. Lässt sich z.B. auch in einen Slider (PG Interactions) stecken zum Anzeigen von Rezensionen.

Unterbrecher Zitat mit Hintergrundbild und Autor - Pinegrow Forest Basic Komponente

Kontaktformular

Ein Kontaktformular mit Feldern, Labels, Select-Feldern, Radio-Buttons, Checkboxes, einer Datenschutz-Zustimmung und mehr. Felder lassen sich einfach hinzufügen, anpassen, gestalten und entfernen. Wichtig: Enhalten ist nur das HTML und CSS, das Formular braucht noch ein Absenden-Script zum Funktionieren.

Kontaktformular individuell anpassbar - Pinegrow Forest Basic Komponente

Kontaktbereich

Ein Kontaktbereich mit Kontaktinfos wie Telefonnummer, E-Mail und Adresse neben einem Kontaktformular (nur HTML und CSS). Andere Inhalte lassen sich einfach hinzufügen und das Kontaktformular durch z.B. eine Karte tauschen. Wie immer responsive und vollständig anpassbar.

Kontaktbereich mit Kontaktinfos, Telefonnummer und Formular - Pinegrow Forest Basic Komponente

Footer S

Ein kleiner, übersichtlicher Footer (Fußzeile) ohne viel Schnickschnack. Vollständig responsive und frei gestaltbar. Elemente lassen sich einfach hinzufügen oder entfernen.

Footer S - ein übersichtlicher, kleiner Footer - Pinegrow Forest Basic Komponente

Footer M

Ein gewöhnlicher Standard-Footer am Ende einer Website. Inhaltlich und optisch vollständig anpassbar und responsive. Elemente wie Texte, Icons oder Listen lassen sich leicht hinzufügen und entfernen und der Footer kann einfach an dein Design angepasst werden.

Footer M - einfach einen Footer in die Website einbauen - Pinegrow Forest Basic Komponente

Footer L

Ein umfangreicher, responsiver Footer mit viel Platz für Informationen und Links für große Websites. Texte, Listen, Icons und mehr lassen sich einfach hinzufügen und entfernen. Das Design ist vollständig anpassbar und lässt sich für deine Seite individualisieren.

Footer L - umfangreicher Footer mit vielen Links - Pinegrow Forest Basic Komponente

Anleitung & Einstieg in das Starterprojekt

Hier findest du eine Anleitung, wie du das Starterprojekt nutzen, einen einfacheren Einstieg in Pinegrow bekommen und schneller individuelle Websites erstellen kannst.

Einstieg in das Starterprojekt

Alle Vorteile im Überblick

Leichterer Einstieg

Pinegrow-Neulinge haben einen leichteren Start in das Programm

Große Zeitersparnis

Erstelle nicht alle Komponenten & Einstellungen jedes Mal neu

Responsiv optimiert

Alle Basic-Komponenten sind für gängige Displaygrößen optimiert

Leichter Code

Die Komponenten kommen mit nur wenig HTML und CSS aus

Individuell anpassbar

Du selbst legst das Design deiner einzigartigen Website fest

Ohne Framework nutzbar

Erstelle schnellladente Websites ohne Frameworks wie Bootstrap

Wiederverwendbar

Nutze das Starterprojekt mit Basic-Komponenten für viele Projekte

Updates & Aktuelle Version

Version 2.2

07.09.2023

  • Neuerungen bei den Basic-Komponenten:
  • Dropdown Menu funktioniert noch besser und kann sich jetzt in zwei Ebenen ausklappen
  • Neue Komponente: Text-Bild rechts
  • Korrekter ul / li Aufbau bei Menüs
  • Aktuelle PG Interactions-Version
  • Div um rechtliche Links im Footer hat jetzt eine eigene Klasse mit besserer Darstellung
  • Reparatur des Menüs in der Komponente Header S
  • Umbenennung vieler Klassennamen für eine verständlichere Nomenklatur
  • Erstellung neuer Standardklassen für Abstände (.MarginTop50px) und Textfarben (.TxtWhite)
  • Icons-Blöcke haben jetzt eine Überschrift
  • Neuerungen beim Starterprojekt:
  • Open Graph Meta Tag site-name für den Seitennamen (auf der Masterseite)

Version 2.1

05.10.2022

  • Neuerungen bei den Basic-Komponenten:
  • Neue Komponente: Tabelle
  • Zahlreiche kleinere CSS-Optimierungen vieler Komponenten (z.B. Entfernung aller calc()-Werte aufgrund von Padding)
  • Beschreibungstext im Menü lässt sich dank eigener Klasse einfacher bearbeiten
  • Besseres mobiles Menü bei vielen Menüpunkten
  • viele kleine Verbesserungen beim Hamburger- und Scroll-Menü
  • Dropdown-Menüs sind bei ausgeschaltetem Javascript jetzt sichtbar
  • Titelbilder und Hintergrundbilder sind als img und nicht background-image eingebaut für bessere Austauschbarkeit auf Unterseiten und besseres SEO
  • Komponente "Text Image" ist einfacher und mit weniger Code aufgebaut, so kann die Anordnung von Bild und Text leichter geändert werden
  • Komponente "Text Image Rechts" entfällt
  • Bei den Komponenten "Cards" und "Overview" lassen sich einfacher mehr oder weniger Karten darstellen
  • Die Komponente "Consent External Content" lässt sich dank Interaction ohne IDs und img als Hintergrund leichter mehrfach auf einer Seite einbauen
  • Komponenten "Divider", "Divider Icons" und "Divider Quote" mit leichter austauschbarem Hintergrund
  • Bei der Komponente "Divider Quote" lässt sich das Autor-Bild dank img einfacher tauschen
  • Alle Elemente von Kontaktformularen werden jetzt über den Typ (z.B. input) anstatt über eine Klasse gestaltet
  • Honeypot-Felder in den Komponenten "Contact Form" und "Contact Area" hinzugefügt
  • Neuerungen beim Starterprojekt:
  • optionales noindex Tag zum einfachen Ausblenden von Seiten aus Google (entfernt auch die Masterseite aus den Suchergebnissen)
  • einfacheres Tauschen der Schriftart durch Definition im body (CSS) anstatt für jedes HTML-Element einzeln
  • schnelles Stylen von Formularen durch Formular-Elemente in der Masterseite
  • schnelles Stylen von Tabellen durch Tabellen-Elemente in der Masterseite
  • übersichtlichere Unterteilung von Elementen auf der Masterseite durch Überschriften
  • bessere Darstellung von Links, Buttons und span auf Masterseite (untereinander)

Version 2.0

03.05.2022

  • neue Kontaktformular Komponente
  • neue Kontaktbereich Komponente
  • neue Form-Divider oben und unten
  • bessere Darstellung von Platzhalterbildern
  • Voreingestellte Größe von Überschriften
  • Übersicht wichtiger Elemente wie Texte und Überschriften zum schnellen gestalten in der Masterseite (Starter-Website)
  • optimierte Darstellung aller Komponenten für größere Monitore
  • optimierte Darstellung von Links in den Footern
  • optimierte Darstellung von nebeneinanderliegenden Blöcken
  • optimierte Darstellung von Listen (Starter-Website)
  • Optimierungen bei der Karten-Komponente
  • Bereiche mit Bild und Text wechseln Reihenfolge untereinander jetzt automatisch
  • Umbenennung vieler Klassen zur Vereinheitlichung
  • Fehlerbehebung der Verlinkungsprobleme bei Dropdown-Menüs
  • Checklisten Kompetente besteht jetzt aus ul und li Elementen

Version 1.1

18.08.2021

  • Neue Komponente für Speisekarten und Preislisten
  • kleinere Verbesserungen bei verschiedenen Komponenten
  • Button wird jetzt einfacher im Starterprojekt gestyled

Version 1.0.1

16.05.2021

  • Dropdown-Menüs funktionieren auf Smartphones und Tablets besser
  • Ein Fehler wurde behoben, nach dem die Komponenten bei jedem Neustart neu reingeladen werden mussten
  • Verschiedene kleine Optimierungen und Fehlerbehebungen

Version 1.0.0

18.04.2021

  • Starterprojekt mit üblichen CSS-Einstellungen, Masterseite mit header-, footer- & änderbarem main-Bereich, vorgefertigten Seiten "Impressum", "Datenschutz", "Master" & "Index", eingebauter Schriftart Open Sans, Breakpoints, SEO-relevanten metadaten inkl. Favicon und mehr
  • Basic-Komponenten mit 32 vorgefertigten Komponenten aus leichtem HTML, CSS und Interactions wie mehrspaltige Blöcke, Header, Menüs, Titelbereiche, Textbereiche mit Bildern, Icons, Karten, Checklisten, Accordions, DSGVO-konformen externen Inhalten, Dividerblöcken, Footer und mehr