Design & Layout.

DESIGNFUNKTIONEN

Dynamische Web-Erlebnisse designen für jede Bildschirmgröße.

Start Creating

Design & Layout

Interaktionen & Effekte

Design-Assets & Medien

Benutzerdefinierte Breakpoints

Füge mehrere benutzerdefinierte Breakpoints hinzu, um Websites für jede erdenkliche Bildschirmgröße zu designen und zu optimieren.

resize handle
resize handle
resize handle
Bild von einer Website für das Designmagazin Daylong auf dem Tablet-Breakpoint. Zwei Quadratbilder horizontal ausgerichtet jeweils mit weißem Text. Das Bild links ist ein bunter digitaler Farbverlauf, das Bild rechts ist eine Frau im rosafarbenen Kleid.
Bild von einer Website für das Designmagazin Daylong auf dem Mobile-Breakpoint. Ein Quadratbild einer Frau im rosafarbenen Kleid mit weißem Text.
 Bild von blauem Text vor einem weißen Hintergrund mit dem Text "Breakpoint hinzufügen"
Bild von einer Website für das Designmagazin Daylong auf dem Desktop-Breakpoint. Drei Quadratbilder horizontal ausgerichtet jeweils mit weißem Text. Das Bild links ist ein bunter digitaler Farbverlauf, das Bild im Zentrum ist eine Frau im rosafarbenen Kleid und das Bild rechts ist ein buntes pixeliertes Design.
Alt-Text: Bild von einer Website für das Designmagazin Daylong auf dem Tablet-Breakpoint. Zwei Quadratbilder horizontal ausgerichtet jeweils mit weißem Text. Das Bild links ist ein bunter digitaler Farbverlauf, das Bild rechts ist eine Frau im rosafarbenen Kleid.
Bild von einer Website für das Designmagazin Daylong auf dem Mobile-Breakpoint. Ein Quadratbild einer Frau im rosafarbenen Kleid mit weißem Text.
Image of desktop, tablet, mobile and ellipses icons aligned horizontally with mobile highlighted.
resize handle
resize handle
resize handle
Bild von einer Frau, die Kopfhörer über dem Kopf hält vor einem roten Hintergrund mit Farbverlauf. Das Maßeinheiten-Menü ist geöffnet und Min./Max. ausgewählt.
Bild von einer Frau, die Kopfhörer über dem Kopf hält vor einem roten Hintergrund mit Farbverlauf. Das Maßeinheiten-Menü ist geöffnet und Min./Max. ausgewählt.
Bild von einer Frau, die Kopfhörer über dem Kopf hält vor einem roten Hintergrund mit Farbverlauf. Das Maßeinheiten-Menü ist geöffnet und Min./Max. ausgewählt.
Bild von einer Frau, die Kopfhörer über dem Kopf hält vor einem roten Hintergrund mit Farbverlauf. Das Maßeinheiten-Menü ist geöffnet und Min./Max. ausgewählt.

CSS-Grid

Erstelle komplexe, sich überschneidende Layouts in einem zweidimensionalen Raum mit präziser Kontrolle über die Positionierung von Elementen an jedem Breakpoint.

Zwei sich überschneidende Bilder vor einem blauen Hintergrund mit Farbverlauf. Das vorderste Bild ist eine Portfolio-Website mit drei Fotos vor einem gelben Hintergrund. Das hintere Bild zeigt die Content Verwaltung von Editor X.
Zwei sich überschneidende Bilder vor einem blauen Hintergrund mit Farbverlauf. Das vorderste Bild ist eine Portfolio-Website mit drei Fotos vor einem gelben Hintergrund. Das hintere Bild zeigt die Content-Verwaltung von Editor X.

Repeater

Verwende dieses flexible Layout-Tool, um deine Inhalte in mehreren Boxen mit einheitlichem Styling anzuzeigen. Verbinde Repeater mit dem integrierten CMS, um nahtlos Team-Profile, Funktionslisten oder Projektgalerien zu gestalten.

Layouter

Designe modulare Flex-Layouts mit responsiven Boxen, die sich nahtlos in jeden Viewport einfügen. Du kannst aus einem großen Angebot von anpassbaren leeren Wireframes auswählen, bis hin zu vollständig designten Layoutvorschlägen.

Bild von einem Mann der eine metallische Jacke und Backpack trägt. Links erscheint der Bereich für Andock-Punkte und Ränder im Editor X Inspektor-Panel.
Bild von einem Mann der eine metallische Jacke und Backpack trägt. Links erscheint der Bereich für Andock-Punkte und Ränder im Editor X Inspektor-Panel.

Andocken

Beim intelligenten Andocken werden Elemente automatisch an den nächstgelegenen Kanten ihres übergeordneten Containers befestigt. Du kannst das Andocken auch manuell anpassen, um präzise Layouts in jedem Viewport zu erstellen.

Bild von einem Container mit Text und links einem Screenshot des Lagen-Panel vor einem texturierten blauen Hintergrund.

Ebenen

Verwende das Ebenen-Panel, um die Reihenfolge aller Elemente auf einer Website anzuzeigen und zu verwalten, und die übergeordneten Beziehungen zwischen ihnen zu sehen. Du kannst deine Ebenen auch umbenennen, um den Überblick zu behalten.

Text skalieren

Lege eine minimale und eine maximale Schriftgröße fest, um sicherzustellen, dass sich der Text allmählich an die Bildschirmgröße anpasst.

Weitere Funktionen für Design & Layout:

Ein vergrößertes Bild vom oberen linken Teil einer Website mit Kopfzeile in grün markiert.

Master-Elemente

Speichere Kopfzeilen, Abschnitte und Fußzeilen zur Wiederverwendung auf anderen Seiten. Um den Erstellungsprozess zu vereinfachen, werden Änderungen, die du an einem Master-Element vornimmst, überall auf der Website übernommen.

Drei Layout-Vektoren und ein Button vor einem grauen Hintergrund.

Design-Assets

Designe und speichere ganze Abschnitte als Design-Assets und verwende sie auf mehreren Websites wieder. Du kannst Design-Assets lokal auf Website-Ebene speichern oder sie in einer gemeinsam nutzbaren Design-Bibliothek ablegen, um sie auf allen Websites im selben Konto zu nutzen.

Bild von zwei Überschriften vor einem weißen Hintergrund mit jeweils einem Bleistiftsymbol.

Designverwaltung

Zeige das Typografie- und Farbdesign einer Website an und bearbeite sie. Hier kannst du die Textstile und Farbpaletten der Website vollständig anpassen.

Bild von horizontal ausgerichteten leeren rechteckigen und buttonförmigen Symbolen vor einem grauen Hintergrund.

Benutzerdefinierte Menüs

Erstelle und verwalte mehrere einzigartige Menüs für jede Seite einer Website. Wähle ein Menüdesign, wähle die Elemente, die in jedem Menü erscheinen, verknüpfe sie mit verschiedenen Zielen und passe jedes Menü pro Breakpoint an.

Bild eines grauen Quadrats mit blauem Maßstab, der Höhe des Viewpoints bei 100 zeigt.

Viewport-Höhe

Stelle einen beliebigen Abschnitt einer Website auf 100% Ansichtshöhe ein. So nimmt dieser immer die volle Höhe des Bildschirms ein, unabhängig davon, auf welchem Gerät er angezeigt wird.

Bild eines Schalters mit Optionen von „Fest“ und „Fließend“ in einem Container vor einem grauen Hintergrund.

Fixiert, fließend und skaliert

Steuere, wie sich Elemente bei der Größenänderung des Bildschirms verhalten. Wähle eine feste oder fließende Größe oder lege fest, dass Bilder und Text proportional zum Viewport skaliert werden.

Ein vergrößertes Bild vom oberen rechten Teil des Canvas mit weißem Text vor einer grauen Zylinderform.

Griffe zur Größenänderung

Verwende die Ziehgriffe zur Größenänderung auf jeder Seite der Arbeitsfläche, um eine Website in jeder Viewportbreite anzuzeigen und zu gestalten.

Bild eines markierten Containers mit einer blau umrandeten Layout-Vorlage.

Stapeln

Behalte die vertikalen Ränder zwischen Elementen in jedem Viewport bei und verhindere Überlappungen auf kleineren Bildschirmen.

Bild eines markierten Containers mit einem weißen Quadrat umgeben von einem hellgrünen Hintergrund.

Container-Padding

Definiere die Abstände an allen 4 Seiten eines Containers, damit dieser immer einen bestimmten Abstand zum Rand einhält.

Bild von vertikal ausgerichteten blauen Desktop-, Tablet- und Mobile-Symbolen mit einem Abwärtspfeil links.

Kaskadierungsregel

Alle Stiländerungen, die du an einem Breakpoint vornimmst, wirken sich kaskadenartig auf kleinere Breakpoints aus, aber nicht umgekehrt.

Bild von horizontal ausgerichteten blauen Desktop-, Tablet- und Mobile-Symbolen mit Desktop ausgewählt.

Kopieren zwischen Breakpoints

Kopiere die Design- und Stileigenschaften eines Elements von einem Breakpoint zu einem anderen. So kannst du z. B. das Styling eines Elements auf dem Handy mit wenigen Klicks auf das gleiche Element auf dem Tablet übertragen.

Bild von zwei Quadrat-Containern mit markierten Layout-Vorlagen vor einem grauen Hintergrund.

Format-Kopien

Kopiere Designattribute von einem Element auf ein anderes, um deine Effizienz zu steigern. Du kannst die Formatierung eines Elements an einem bestimmten Breakpoint oder die Formatierung für alle Breakpoints kopieren.

Bild von vertikal ausgerichteten Seite- und Anker-Symbolen vor einem weißen Hintergrund.

Anker

Hilf Besuchern mit unsichtbaren Positionsmarkierungen bei der Navigation durch eine Website. Definiere ein beliebiges Element als Anker und verknüpfe es mit Buttons oder Menüpunkten auf der gesamten Website.

Bild von grauen horizontalen Linien und blauem Text vor einem weißen Hintergrund.

Font-Upload

Lade deine eigenen Schriftarten hoch und verwende sie auf jeder Website.

Bild von horizontal ausgerichteten Fraktions-, Prozent- und Pixel-Symbolen.

Maßeinheiten

Du kannst die Größe deiner Elemente in Pixeln, Prozentwerten oder entsprechend der Höhe oder Breite des Viewports angeben. Außerdem kannst du die Größe der Spalten und Zeilen in deinem Grid bestimmen, mit fr, calc und mehr.

Alle ansehen →

Und das ist erst ein Bruchteil der Möglichkeiten.

Entdecke weitere fortschrittliche Funktionen zum Erstellen, Verwalten und für den Launch von leistungsstarken Websites mit Editor X.

Kollaborations-Suite.

Optimiere deine Arbeitsabläufe und die Zusammenarbeit im Team mit erweiterten Rollen und Berechtigungen, Teamkonten, gemeinsam nutzbaren Design-Bibliotheken und vielem mehr.

Entwicklung.

Erstelle fortschrittliche Webanwendungen mit benutzerdefiniertem JavaScript und APIs auf Velo, einer integrierten offenen Entwicklungsplattform.

Codefreies CMS.

Verwende Datensammlungen, um hinter den Kulissen einer Website nahtlos dynamische Inhalte zu verwalten, ohne das Design zu verändern.

Marketing & SEO.

Nutze fortschrittliche Marketing-Integrationen, um Online-Kampagnen zu messen, den Traffic zu steigern und wertvolle Besucherinformationen zu erfassen.

Business-Lösungen.

Beantworte alle geschäftlichen Anforderungen mit den richtigen eCommerce-Tools, von leistungsstarken Online-Shops bis hin zu Abonnement- und Buchungssystemen.

resize handle
resize handle

Editor X

Den Rest bestimmst du.