Video & decorative.

Bring your boldest creations to life with video tools and decorative elements on Editor X. Learn how to add and edit Transparent Videos, VideoBox and Vector Art to create exceptional web experiences.

Start lesson →

Bring your boldest creations to life with video tools and decorative elements on Editor X. Learn how to add and edit Transparent Videos, VideoBox and Vector Art to create exceptional web experiences.

Let’s explore how to use video tools and decorative elements on Editor X.


We’ll focus on how to add and edit Transparent Videos, VideoBox, and Vector Art.


From the Add panel, under Media, you’ll find three types of videos. You can embed single video players from the web, or browse through a curated collection of Video Box—and Transparent Videos for more design flexibility.


Let’s start by adding a VideoBox.


Choose one from our in-house selection, or upload your own creation directly from your computer.


Once you add it to the page, click the Stretch icon to expand the video to fill the entire section and make it a full width background.


From the floating action bar, under Settings, you can add a description to improve SEO and accessibility.


Use the Focal Point tool to define the focus, and go to Behaviors to choose how your video starts playing, how to pause it, and what happens when it ends.


You can also choose to enable sound and decide when it plays. 


Go to Preview to see it in action.


Let’s head back to the editor, and add a Transparent Video.


Using exclusive technology, these videos create captivating 3D effects that make them stand out on any viewing device.


You can also upload your own transparent videos that have been exported with an Alpha channel.


Resize by hand, or head over to the Inspector panel to set the exact size and position.


Under Design, you can choose the cover image and recolor it with custom hues to get the exact shade and depth you want.


From the Layers panel, you can drag the text to appear in front of the transparent video, like this. Let’s see how it looks.


In the next section, let’s add another VideoBox—this time, we’ll choose one from the curated collection.


Go to Design to choose the cover, add an overlay, and redefine your boundaries by customizing the edges of the videobox.


You can also add a border and shadow effects here. Click on the play button to customize the color and choose a different design.


In the add panel, under Decorative, you can add Shapes and Vector Art. Notice that you can access VideoBox and Transparent Videos from here too. 


Let’s choose a Vector Art from the existing collection.


Go to Settings to add a description, and keep this toggle on to keep the proportions the same when resized.


Under Design, you can adjust the colors to fit the exact palette of your site.


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

NEXT VIDEOS

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
Video about how to set up a team account on Editor X.

Learn how to set up a team account.

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.

LESSONS & EXERCISES

Title

Learn how to work with sections—the building blocks of your site.

Start Lesson

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.