LESSON 05

Docking & margins.

Control the positioning of elements at every viewport size.

Docking elements.

Editor X has a smart docking system. When you drag an element into a container, it automatically docks to the closest edges. You can override this and manually set your docking from the Inspector panel.

Adding margins.

Use margins to maintain a set distance between an element and the edges of the container it’s docked to. From the Inspector panel, under Margins, choose your desired value in pixels (px) or percent (%). You can also add margins to the sides of an element that isn’t docked. These margins act like a buffer between the element and the container or gridlines around it.

​TRY IT YOURSELF

Exercise on docking & margins.

Open Academy X from desktop to complete this exercise.

Start these exercises on the desktop breakpoint (1001px & Up).

01

Resize the canvas. Drag the handles at the sides of the canvas to see how the image stays docked to the left on every screen size.

02

Change a margin value. Select the image to open the Inspector panel on the right. The left margin is set to 100px. This means it's positioned 100px to the left. Change the value to 250px and see what happens.

03

Set the margin unit. Set the image margins in %. Use the drag handles to resize and watch the image respond differently on every screen size.

04

Drag & dock. Drag the image to the right side of the screen. It will automatically dock for best results. Remember, elements on Editor X can be docked to any side.

05

Customize docking. ​Now, from the Inspector panel using the docking and margin controls, position the image exactly 10% from the right, and 30px from the bottom.

06

Dock to center. Click the dot in the center of your docking controls, so the image is docked to the center. Now, set the margin values to 0px. Use the drag handles to resize the canvas and see how it looks.

Watch related videos.

Editor X

The rest is up to you.