Inspector panel.

Take a tour of the Inspector panel where you control size, position and behavior of all elements on your website. This is an overview of all the properties and dropdown options on the panel.

Start lesson →

Take a tour of the Inspector panel where you control size, position and behavior of all elements on your website. This is an overview of all the properties and dropdown options on the panel.

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.

NEXT VIDEOS

Video tutorial about breakpoints on Editor X

Learn how to edit element style, position and behavior at every viewport width.

Play icon
Video tutorial about layout tools on Editor X that use Flexbox technology

Discover 3 layouting tools that harness the power of flexbox technology.

Play icon
Video tutorial about how to use Stack on Editor X

Learn how to use stack to control the vertical relationship between elements.

Play icon
Video tutorial about how to design responsive layouts using a Layouter on Editor X

Learn how to design responsive layouts using a Layouter.

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

Blue background with 2 shaded blue containers, one on top of the other with a smaller white logo in the center of the boxes.

LESSONS & EXERCISES

Sizing

Discover the difference between Fixed, Fluid and Scale Proportionally.

Icon for measurements. A small rectangle with a smaller one inside it on the left side.

LESSONS & EXERCISES

Measurements

Learn when to use the right CSS units of measure to control how elements resize.

Blue background with a darker blue box over it, there is an white icon in the middle of the box. This shows docking & margins.

LESSONS & EXERCISES

Docking & Margins

Explore Editor X’s smart docking system.

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Collaboration
Arrow down icon
VIDEO LIBRARY
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.