Content
Images can be customised in many different ways using the various options Editor X has on offer.
Sizing options
You can control how images resize as the viewport width changes - A viewport is the area of the window in which web content can be seen. This is often not the same size as the rendered page which can result in some of the webpage appearing differently depending on the device or browser being used.
From the inspector (located in the top right corner) choose Fixed to keep an image at a set pixel size no matter what device it’s viewed on. Set an image to Fluid to allow its width to adjust in relation to the viewport. Alternatively check the Scale proportionally checkbox. This allows your image to resize seamlessly with the viewport, keeping a balanced ratio between height and width.
Focal Points
Focal point allows you to display a certain part of an image. To do this select the image, then from the floating toolbar select the Focal Point icon.
Next, drag the blue dot to the spot you want to focus on, or simply click the spot you want to focus on. You can select a different sport at each breakpoint.
Crop and Zoom
At each breakpoint, you can zoom in on a specific area of an image and choose how it is cropped.
Select the image and make sure it is set to Fixed or Scale proportionally.
Next, from the floating action bar click the Crop icon.
Drag the edges of the image to crop and use the slider to zoom in and out.
Scroll Effects
Add depth and character to your creations with scroll effects. To do so, select an image at any breakpoint, click Settings, then under Scroll Behavior choose Parallax or Reveal.
Stretch
Expand any image so it fills an entire section, container or grid cell at every viewport width. First, drag your image inside the area you want it to fill, select the image, then click the Stretch icon in the top right corner.
Positioning
Define the exact position of your images at each breakpoint. Select an image and open the Inspector panel to control its alignment, docking and margins. Under Position type, you can also set an image to be Fixed or Sticky position - Fixed position pins it to the screen, so it stays put during scroll. Sticky position lets you control when the image stays put and when it continues to scroll with the page.
Note: Setting an image to Fixed position changes the hierarchy of your site, so this action affects all breakpoints.