Canvas-Seiten — Volle kreative Freiheit
Canvas-Seiten bieten dir pixelgenaues Freiform-Design ohne Raster- oder Layout-Einschränkungen. Platziere Elemente überall auf der Seite und erstelle einzigartige, immersive Layouts. Sie ersetzen die ehemaligen "Freestyle-Seiten", die auf ein Raster-Design beschränkt waren, das auf einer 20 Jahre alten Technik namens WYSIWYG (What you see is what you get) basierte. Es war schlichtweg unmöglich, diese Seiten frei zu bearbeiten – jetzt hast du alle Freiheiten!
Elemente hinzufügen
Canvas-Seiten unterstützen vier Elementtypen:
Text — wähle Überschriften-Ebenen (H1–H6) oder Fließtext, such dir eine beliebige Schriftart aus, lege Größe und Farbe fest
Bild — lade ein Bild hoch oder füge eine URL ein; füge Alt-Text für SEO hinzu; doppelklicke, um das Bild innerhalb seines Rahmens neu zu positionieren
Video — bette einen YouTube- oder Vimeo-Link ein oder lade dein eigenes Video hoch; wähle zwischen Autoplay oder Click-to-Play
Button — lege den Beschriftungstext, die Link-URL, Hintergrund- und Textfarben sowie den Eckenradius fest
Element-Einstellungen
Jedes Element kann feinjustiert werden:
Position & Größe — lege X (%), Y (px), Breite (%) und Höhe (px) für eine präzise Platzierung fest
Rotation — drehe jedes Element von 0° bis 360°
Ebenen-Reihenfolge — klicke mit der rechten Maustaste auf ein Element, um es in den Vordergrund oder Hintergrund zu bringen (z-Index-Steuerung)
Klick-Aktionen — verlinke auf eine interne Seite oder eine externe URL; Bilder können in einem Detail-Modal mit Galerie-Navigation geöffnet werden
Klick-Aktion - Modal
Die Klick-Aktion auf einem Bild kann ein Link oder ein Modal sein. Du kannst wählen, ob das Bild in einem Fenster geöffnet werden soll, oder die Galerie-Option aktivieren; dann wird das Fenster zu einer scrollbaren Galerie, die du mit Bildern oder Videos füllen kannst. Außerdem kannst du die Overlay-Farbe wählen.
Seitenhintergrund
Lege den Hintergrund für die gesamte Canvas-Seite fest:
Website-Hintergrund — transparent / Standardfarbe deiner Website
Farbe — wähle eine beliebige Volltonfarbe
Bild — lade ein Bild hoch oder füge eine URL ein, und nutze dann den Fokuspunkt-Wähler, um zu steuern, welcher Teil auf verschiedenen Bildschirmgrößen sichtbar bleibt
Video — bette ein Video ein oder lade eines als Hintergrund mit Fokuspunkt hoch; füge ein optionales Farb-Overlay mit einstellbarer Deckkraft für bessere Lesbarkeit hinzu
Responsive Viewports
Canvas-Seiten unterstützen drei unabhängige Ansichten (Viewports):
Desktop (1440 px)
iPad Air (820 px)
iPhone 16 Pro (430 px)
Jeder Viewport hat sein eigenes Element-Layout. Klicke mit der rechten Maustaste auf Elemente in der Desktop-Ansicht, um sie auf das iPad, iPhone oder beide gleichzeitig zu kopieren. Passe dann Positionen und Größen unabhängig pro Viewport an, um sicherzustellen, dass dein Design auf jedem Gerät großartig aussieht.
Header & Footer
Beim Erstellen einer Canvas-Seite kannst du wählen, ob der Header und Footer der Website angezeigt oder ausgeblendet werden soll. Dies ist ideal für eigenständige Landingpages oder immersive Vollbild-Erlebnisse.
Startseite
Jede Canvas-Seite kann als Startseite deiner Website festgelegt werden, sodass sie das Erste ist, was Besucher sehen.
Beispiel: Landingpage mit Videohintergrund
1. Erstelle eine neue Canvas-Seite und blende Header und Footer aus
2. Setze den Hintergrund auf Video und füge einen YouTube- oder Vimeo-Link ein
3. Passe den Fokuspunkt an, damit die Schlüsselszene auf allen Geräten zentriert bleibt
4. Füge ein Farb-Overlay hinzu (z. B. Schwarz mit 40 % Deckkraft) für besseren Kontrast
5. Platziere ein H1-Textelement mit deiner Schlagzeile
6. Füge einen Button hinzu, nenne ihn "Portfolio ansehen" und verlinke ihn mit deiner Galerieseite
7. Wechsle zu den iPad- und iPhone-Ansichten, kopiere die Elemente vom Desktop und verfeinere die Positionen
8. Lege diese Canvas-Seite als deine Startseite fest
Das Ergebnis ist eine filmreife Fullscreen-Landingpage, die auf allen Geräten nahtlos funktioniert.