Durchsuchen Sie nach Kategorie
GrapesJS Webseiten
GrapesJS-Webseiten-Plugins decken alles ab, was zum Bau einer Seite statt einer E-Mail gehört: komplette Seitenvorlagen, mehrteilige Layouts und Starter für Landingpages, Portfolios und Marketing-Websites. Installiere ein Vorlagenpaket, und deine Nutzer öffnen den Editor auf einer fertigen Seite, die sie überarbeiten können, statt auf einer leeren Arbeitsfläche. Stöbere in kostenlosen Community-Paketen und Premium-Bibliotheken, jeweils mit Live-Vorschau und Angaben zur Versionskompatibilität.
Über GrapesJS Webseiten
Eine Webseite ist in GrapesJS ein Komponentenbaum auf der Arbeitsfläche — und die Plugins dieser Kategorie liefern diesen Baum fertig mit. Sie zerfallen in zwei Gruppen. Seitenvorlagen liefern eine vollständige, fertige Seite — eine Landingpage mit Hero, Features, Testimonials und Call-to-Action, ein Portfolio mit Bildraster und Biografie oder eine lange Marketingseite mit fixierter Navigation — die deine Nutzer öffnen und überarbeiten, statt sie aus Teilen zusammenzusetzen. Abschnittsbibliotheken liefern stattdessen die Teile, sodass eine Seite durch Stapeln vorgefertigter Abschnitte in beliebiger Reihenfolge entsteht; sie überschneiden sich mit Blockbibliotheken, sind aber auf Seitenabschnitts-Größe zugeschnitten. Beide unterscheiden sich von einem Preset, das den Editor selbst konfiguriert, und von einem Website-Builder, der viele Seiten gleichzeitig verwaltet. Drei praktische Prüfungen vor der Installation. Stelle sicher, dass das CSS-Framework des Pakets im Canvas-iframe geladen ist, denn die Arbeitsfläche übernimmt die Stylesheets deiner Anwendung nicht. Prüfe, ob die Vorlage Styles je Breakpoint definiert und nicht nur für Desktop. Und entscheide vorab, ob du Vorlagen als Projekt-JSON speicherst, das bearbeitbar bleibt, oder als exportiertes HTML, das es nicht ist.
GrapesJS Webseiten — FAQ
- Was ist der Unterschied zwischen Seitenvorlage und Preset?
- Ein Preset konfiguriert den Editor — Panels, Blöcke, Style-Sektoren — und lässt die Arbeitsfläche leer. Eine Seitenvorlage konfiguriert nichts und füllt die Arbeitsfläche mit einer fertigen Seite. Normalerweise nutzt du beides: das Preset, um den Editor einmal einzurichten, und Vorlagen, um Nutzern für jede neue Seite einen Startpunkt zu geben.
- Wie lade ich eine Seitenvorlage in GrapesJS?
- Für eine fertige Seite ersetzen editor.setComponents und editor.setStyle den Inhalt der Arbeitsfläche durch Markup und CSS der Vorlage. Kommt die Vorlage als Projekt-JSON, stellt editor.loadProjectData sie samt intaktem Komponentenmodell wieder her — der bessere Weg, weil alles sauber bearbeitbar bleibt.
- Kann GrapesJS eine mehrseitige Website verwalten?
- Ja — die Pages-API verwaltet mehrere Seiten in einem Projekt, und editor.Pages.select wechselt zwischen ihnen. Die Plugins hier arbeiten seitenbezogen und füllen jeweils eine Seite. Wenn du Seitenübersicht, Routing und Veröffentlichung als Produktfunktion brauchst, sieh dir stattdessen die Kategorie der Website-Builder an.
- Sind GrapesJS-Seitenvorlagen responsiv?
- Gute schon, automatisch ist es aber nicht. GrapesJS schreibt echte Media Queries nur, wenn Styles bei ausgewähltem Gerät gesetzt werden — eine ausschließlich am Desktop gebaute Vorlage bringt also keine Mobil-Regeln mit. Prüfe die Vorschau im Eintrag bei jedem Breakpoint und vergewissere dich, dass das Paket angibt, für welche Geräte es entworfen wurde.
- Warum sieht eine Vorlage im Editor ungestylt aus?
- Weil die Arbeitsfläche ein iframe ist und die Stylesheets deiner Anwendung nicht übernimmt. Eine für Tailwind oder Bootstrap gebaute Vorlage erscheint als reines HTML, bis du dieses Framework über die Canvas-Styles-Option des Editors in die Arbeitsfläche lädst. Das ist der mit Abstand häufigste Grund, warum ein frisch installiertes Paket kaputt aussieht.
Durchsuchen Sie nach Tag