Images.

Explore the potential of a powerful image on Editor X. Learn how to add, style, replace and position images on every site page. See how you can organize your images and adjust their attributes to create exceptional web experiences.

Explore the potential of a powerful image on Editor X. Learn how to add, style, replace and position images on every site page. See how you can organize your images and adjust their attributes to create exceptional web experiences.

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.

NEXT VIDEOS

Video about how to use video tools and decorative elements on Editor X

Explore how to add and edit Transparent Videos, VideoBox and Vector Art.

Play icon
Video about how to use custom menus on Editor X

Discover how to create and manage multiple custom menus on every site.

Play icon
Video tutorial about saving and reusing designs using Masters

Learn how to make a section a Master to save & reuse your designs.

Play icon
Video about how to create, manage and share design libraries on Editor X

Learn how to create, manage and share design libraries with your team.

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

Thumbnail indicating single images. Purple background with a shaded purple box over it and an icon in the middle.

LESSONS & EXERCISES

Single Images

Discover how to customize the size, position and behavior of images per breakpoint.

Video about how to use video tools and decorative elements on Editor X

VIDEO LIBRARY

Video & Decorative

Explore how to add and edit Transparent Videos, VideoBox and Vector Art.

VIDEO LIBRARY

Title

Get to know where you control size, position and behavior of all elements.

Watch Now

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.