top of page

Build Fully Responsive Website

Design & Layouting.

Craft dynamic web experiences for every screen size.

Design & Layouting

▼
Start Creating

Custom breakpoints

Add multiple custom breakpoints to design and optimize sites for any screen size imaginable.

Image of a website for a design magazine called Daylong displayed on the tablet breakpoint. There are two square images aligned horizontally with white text on top of each one. The image on the left is of a colorful digital gradient and the image on the right is of a woman in a pink dress.
Image of a website for a design magazine called Daylong displayed on the mobile breakpoint. There is a square image of a woman in a pink dress and white text is placed on top.
Image of blue text over a white background that reads, add breakpoint.
Image of a website for a design magazine called Daylong displayed on the desktop breakpoint. There are three square images aligned horizontally with white text on top of each one. The image on the left is of a colorful digital gradient, the center image is of a woman in a pink dress and the image on the right is of a multicolored pixelated design.
Image of a website for a design magazine called Daylong displayed on the tablet breakpoint. There are two square images aligned horizontally with white text on top of each one. The image on the left is of a colorful digital gradient and the image on the right is of a woman in a pink dress.
Image of a website for a design magazine called Daylong displayed on the mobile breakpoint. There is a square image of a woman in a pink dress and white text is placed on top.
Image of desktop, tablet, mobile and ellipses icons aligned horizontally with mobile highlighted.
Image of a woman holding headphones over her head on a red gradient background. The units of measure menu is open and Min/Max is selected.
Image of a woman holding headphones over her head on a red gradient background. The units of measure menu is open and Min/Max is selected.
Image of a woman holding headphones over her head on a red gradient background. The units of measure menu is open and Min/Max is selected.

CSS grid

Create intricate, overlapping layouts in a 2-dimensional space with precise control over the positioning of elements at every breakpoint.

Two images overlapping each other over a blue gradient background. The image in the front is of a portfolio website displaying three photographs over a yellow background. The image in the back shows the Editor X content management system.
Two images overlapping each other over a blue gradient background. The image in the front is of a portfolio website displaying three photographs over a yellow background. The image in the back shows the Editor X content management system.

Repeater

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.

Layouter

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.

Image of a man in a metallic jacket wearing a backpack. To the left is the Docking and Margins section of the Editor X inspector panel.
Image of a man in a metallic jacket wearing a backpack. To the left is the Docking and Margins section of the Editor X inspector panel.

Docking

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.

Image of a designed container with text and a screenshot of the Layers panel on the left, over a blue textured background.

Layers

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. 

Text scale

Set a minimum and maximum font size to ensure text gradually scales in relation to the screen size. 

More design & layouting features:

A zoomed in image of the top left part of the canvas with the header highlighted in green.

Masters

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. 

Three layout vectors and a button shape over a grey background.

Design assets

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.

Image of two heading titles over a white background and a pencil icon next to each one.

Theme manager

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. 

Image of blank rectangular and button-shaped icons lined up horizontally over a grey background.

Custom menus

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. 

Image of a grey square with a blue measure of 100 viewport height.

Viewport height

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.

Image of a toggle showing Fixed and Fluid placed inside of a container over a grey background.

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.

A zoomed in image of the top right part of the canvas and white text placed over a grey cylindrical shape.

Resizing handles

Use the resizing handles on each side of the canvas to view and design a site at any viewport width.

Image of a selected container with a graphically outlined layout design.

Stack

Maintain the vertical margins between elements at any viewport and prevent overlap on smaller screens. 

Image of a selected container with a white square surrounded by a light green background.

Container padding

Add spacing around the edges of any container so it always keeps a set distance from the edge.

Image of blue desktop, tablet and mobile icons aligned vertically with a downwards arrow placed on the left.

Cascading rule

Any style changes you make at one breakpoint will cascade down to smaller breakpoints, but not the other way around. 

Image of desktop, tablet and mobile icons aligned horizontally indicating the desktop icon is selected.

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.

Image of two square boxes with graphically outlined layout designs over a grey background.

Copy formatting

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.

Image of page and anchor icons aligned vertically over a white background.

Anchors

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.

Image of grey horizontal lines and blue text over a white background.

Font upload

Upload your own fonts and use them on any site.

Image of fraction, percentage and pixel unit of measure icons aligned horizontally.

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.

Try for free

bottom of page