Design & Layouting
Add multiple custom breakpoints to design and optimize sites for any screen size imaginable.
Create intricate, overlapping layouts in a 2-dimensional space with precise control over the positioning of elements at every breakpoint.
Use this flex layouting tool to display unique content in multiple boxes with uniform styling. Connect repeaters to an integrated CMS to seamlessly design team profiles, feature listings or project galleries.
Design modular flex layouts with responsive boxes that seamlessly wrap at every viewport. You can choose from a selection of customizable blank wireframes, to fully designed layout suggestions.
With smart docking, elements automatically attach to the closest edges of their parent container. You can also manually adjust the docking to create precise layouts at every viewport.
Use the Layers panel to view and manage the order of all the elements on a page and see the parenting relationships between them. You can also rename your layers to stay organized.
Set a minimum and maximum font size to ensure text gradually scales in relation to the screen size.
More design & layouting features:
Save and reuse headers, sections and footers on multiple pages. To streamline your creation flow, changes you make to one master will apply everywhere it’s used on the site.
Design and save entire sections as design assets, and reuse them on multiple sites. You can save design assets locally on a site level, or save them to a shareable design library to access them on all sites under the same account.
View and edit a site’s typography and color themes. This is where you can fully customize the text styles and color palettes of the site.
Create and manage multiple unique menus on every site page. Choose a menu design, select the items that appear on each menu, link them to various destinations and customize each menu per breakpoint.
Set any section of a site to 100% viewport height. This way, it will always take up the full height of the screen, no matter which device it’s being viewed on.
Fixed, fluid & scale
Control how elements behave as the screen resizes. Choose a fixed or fluid size, or set images and text to scale proportionally to the viewport.
Use the resizing handles on each side of the canvas to view and design a site at any viewport width.
Maintain the vertical margins between elements at any viewport and prevent overlap on smaller screens.
Add spacing around the edges of any container so it always keeps a set distance from the edge.
Any style changes you make at one breakpoint will cascade down to smaller breakpoints, but not the other way around.
Copy to breakpoint
Copy an element’s layout and style properties from one breakpoint to another. For example, you can apply the styling of an element on mobile to the same element on tablet in just a few clicks.
Copy design attributes from one element to another to increase efficiency. Choose to copy how an element is styled at a specific breakpoint, or from the way it's styled across all breakpoints.
Help visitors navigate a site with invisible position markers. Make any element an anchor and link it to buttons or menu items throughout a site.
Upload your own fonts and use them on any site.
Units of measure
Size your elements in pixels, percentages, or according to the viewport height or width. You can also size the columns and rows in your grid using fr, calc and more.
See all →
Design your best websites yet on Editor X.