Let’s take a tour of the Inspector panel on Editor X. Here you can control size, position and behavior of all elements on your website.
When you click any element, you’ll see its unique properties in the Inspector panel. Notice that the properties vary depending on which element is selected.
Let’s scroll to see the available properties for an image. Here at the top of the panel are your alignment options. Click the different icons to realign your element.
Below, you can control how your elements resize across all breakpoints. By default, images are set to Scale proportionally with the viewport.
Select Fixed to measure your image in pixels. As you change the viewport, it stays exactly the same size.
To change it to Fluid, deselect Scale proportionally. Now, the image will keep the same height but change its width in percent in relation to the viewport.
When it comes to how an element is measured, you have four different units: Pixels, Percent which is a percentage of the element’s parent container—and Vh & Vw which are percentages of the viewport height and width.
To further explain viewport width, let’s set the width of this image to 50vw. When you change the viewport size, the image will always fill half of the viewport width.
This is different from percent. This image is sitting inside a container. Let’s set the width to 50%. Now when you resize the viewport, the image always fills half the container’s width
Back in the Inspector panel, you can set minimum and maximum width and height. Let’s set the minimum width of this image to 400 pixels. When you resize the viewport, the image width will never get smaller than that.
When you add an element, it auto-docks to the closest edge.
Under Position, you can change the docking to relate to the center or any edge. Use Margins to set the distance between an element and the container it’s docked to.
Here, by selecting Fixed Position, you can pin an element to the screen at a certain place. Now the element stays put as you scroll.
On this section we added a grid. Grid is a CSS layouting tool that creates a 2-dimensional framework for precise positioning of elements.
Under Grid Area, you’ll see how an element is placed on the grid. These numbers relate to the gridlines.
For example, this image is placed between the gridlines of columns 2 and 9 and rows 6 and 13. By changing these numbers, you can extend the image to fill other areas of the grid.
Under Anchor, you can set any element to be an anchor on your page. Select this text, add an anchor, and rename it.
Next, let’s scroll up to our first fold and connect the Contact button to our Contact Form anchor.
Now when you click the Contact button on the top of the page, it scrolls down to that anchored text at the bottom.
When you’re not using the Inspector panel, you can close it so you have more space to design.
Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.
