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 Starterprojekt hast du als Anfänger einen leichteren Einstieg in Pinegrow und erstellst Websites viel schneller
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 registrierenBasic-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.
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 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 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.
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ü.
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 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 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 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.
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.
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 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.
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.
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.
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.
Ü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.
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.
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.
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.)
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.
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).
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 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 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.
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.
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.
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 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 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.
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 StarterprojektAlle 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