Single images

Customize the size, position and behavior of images at each breakpoint by setting sizing options, scroll effects, focal points and more.

Sizing options

Control how images resize as the viewport width changes. 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.

Image showing website in the workspace and the Inspector panel is open. This is to indicate how images resize at different viewports.

Focal point

Choose which part of an image you want to stay visible as the screen size changes. First select the image, then from the floating action bar click the Focal Point icon.

Next, drag the blue dot to the spot you want to focus on—or simply click the spot you want. You can select a different spot at each breakpoint.

Image showing website in the workspace. The floating action bar is present and focal point is clicked on.

Crop and zoom

At each breakpoint, you can zoom in on a specific area of an image and choose how it’s cropped. Select the image and make sure it’s 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.

Image showing website in the workspace. Crop and zoom on images are shown.

Scroll effects

Add depth to your creations with scroll effects. 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 Scroll, you can also set an image to be Pinned 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 Pinned position changes the hierarchy of your site, so this actions affects all breakpoints.

Image showing website in the workspace, the Inspector panel is open. How to position images is highlighted and shown.

Follow these steps in the editor

Basic exercise

Open the exercise on the editor →

Cropping an image. Drag the image into a section. From the floating action bar, select Crop and remove the top and bottom of the image, so the focus is circle in the center. Click Apply.
Stretching an image. Click the stretch icon in the top right to stretch the cropped image to fill the section.

Advanced exercise

Open advanced exercise on the editor →

Getting set up. Go to the desktop breakpoint and apply a grid of 1x2 to the first section. Add the image to the right cell and stretch it to fill.
Setting the focal point. Select the image to open the floating action bar. Click the Focal Point icon and choose which part of the image you want to be in the center.
Parallax scroll. From the floating action bar, click Settings then under Scroll Behavior choose Parallax.
Changing behavior per breakpoint. Go to tablet and change the scroll behavior to None.

Transcript

Let’s explore how to edit the style, position and behavior of images on Editor X.

From the Add panel, under Media you’ll find a wide collection of curated images. You can also upload your own media from the cloud, your social channels, or directly from your computer.

All of your site files can be viewed in the Media Manager. You can create folders, filter and reorder your media to keep things organized.

You can also create Boards to better manage a specific project or brand—and group files together so they’re easy to find.

To edit a media file, click on it and use the actions panel on the right. Here, you can make changes to your image and add tags. Let’s adjust some settings.

From this Photo Studio, you can enhance your image, cut out the background, add overlays and more. Note that you’re altering the source of the image, so these changes are reflected across all breakpoints.

Now add your image to the page, drag into place and use the handles to resize—or for more accuracy, use the Inspector Panel on the right, and set the exact size and position.

From the floating action bar, under Settings, you can add a link to your image, choose the scroll behavior and add alt text. You can also access the Photo Studio from here by clicking Adjust.

To replace an image, use the floating action bar—click Change Image, then swap and update.

Under Design, you can edit the color, border, corners and shadow effect of your image. These style changes can be made at each breakpoint.

Use the Focal Point tool to define the focus of an image as the screen size changes. Let’s see what it looks like on mobile.

You can also crop images to make sure certain parts are highlighted at each viewport. Click the Stretch icon to expand the image to fill the entire grid cell. Cascading rules apply here, so these changes are not reflected on bigger breakpoints.

To add an animation, click this icon and choose the one you want.

Down here, this image is a child of the section with no grid dividing the space, so you can use the Stretch icon to turn it into a background.

And choose the Parallax effect as the scroll behavior.

As with all style changes, you can select a different scroll behavior for every screen.

Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.