Wireframe-Generator

Projektname Vorlage (ersetzt das Layout) Container Abstand (Gutter) Tags Stil

Layout als JSON (für Fortgeschrittene)

[
    {
        "cols": [
            {
                "label": "Header",
                "s": {
                    "xs": 12
                },
                "blocks": []
            }
        ]
    },
    {
        "cols": [
            {
                "label": "Hero",
                "s": {
                    "xs": 12
                },
                "blocks": []
            }
        ]
    },
    {
        "cols": [
            {
                "label": "Feature 1",
                "s": {
                    "xs": 12,
                    "md": 4
                },
                "blocks": []
            },
            {
                "label": "Feature 2",
                "s": {
                    "xs": 12,
                    "md": 4
                },
                "blocks": []
            },
            {
                "label": "Feature 3",
                "s": {
                    "xs": 12,
                    "md": 4
                },
                "blocks": []
            }
        ]
    },
    {
        "cols": [
            {
                "label": "CTA",
                "s": {
                    "xs": 12
                },
                "blocks": []
            }
        ]
    },
    {
        "cols": [
            {
                "label": "Footer",
                "s": {
                    "xs": 12
                },
                "blocks": []
            }
        ]
    }
]

Der komplette Layout-Baum (Reihen → Spalten → Komponenten/Reihen). Wird vom Editor automatisch gepflegt und lässt sich hier kopieren oder einfügen.

Breite bearbeiten für:

Mobile First: Eine Breite gilt ab diesem Breakpoint und größer, solange keine andere gesetzt ist (gepunktet = geerbt). Rechten Rand ziehen = Breite, ⠿ ziehen = verschieben. Jede Spalte kann Komponenten und weitere Reihen enthalten („+ Inhalt…“, „+ Reihe“).

Reihe hinzufügen: