How do I add and manage graphics in the video editor?

<!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta charset="utf-8" />  <title>How do I add and manage graphics in the video editor? – Vimeo Help Center</title> <meta name="description" content="The video editor includes a graphics feature (formerly called Stickers) that lets you add images or solid backgrounds to your videos. You..." /><meta property="og:image" content="/hc/theming_assets/01HZPZSWFSW8B6FJMXJ8SF8JM7" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="Vimeo Help Center" /> <meta property="og:title" content="How do I add and manage graphics in the video editor?" /> <meta property="og:description" content="The video editor includes a graphics feature (formerly called Stickers) that lets you add images or solid backgrounds to your videos. You can choose from a wide variety of available graphics. 💡Tip:..." /> <meta property="og:url" content="https://help.vimeo.com/hc/en-us/articles/12426829143185-How-do-I-add-and-manage-graphics-in-the-video-editor" /> <link rel="canonical" href="https://help.vimeo.com/hc/en-us/articles/12426829143185-How-do-I-add-and-manage-graphics-in-the-video-editor"> <link rel="alternate" hreflang="de" href="https://help.vimeo.com/hc/de/articles/12426829143185-Wie-kann-ich-Grafiken-im-Video-Editor-hinzuf%C3%BCgen-und-verwalten"> <link rel="alternate" hreflang="en-us" href="https://help.vimeo.com/hc/en-us/articles/12426829143185-How-do-I-add-and-manage-graphics-in-the-video-editor"> <link rel="alternate" hreflang="es" href="https://help.vimeo.com/hc/es/articles/12426829143185--C%C3%B3mo-puedo-agregar-y-gestionar-gr%C3%A1ficos-en-el-editor-de-video"> <link rel="alternate" hreflang="fr" href="https://help.vimeo.com/hc/fr/articles/12426829143185-Comment-ajouter-et-g%C3%A9rer-des-graphiques-dans-l-%C3%A9diteur-vid%C3%A9o"> <link rel="alternate" hreflang="ja" href="https://help.vimeo.com/hc/ja/articles/12426829143185-%E5%8B%95%E7%94%BB%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%83%BC%E3%81%A7%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%8A%E3%82%88%E3%81%B3%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%AF"> <link rel="alternate" hreflang="ko" href="https://help.vimeo.com/hc/ko/articles/12426829143185-%EB%8F%99%EC%98%81%EC%83%81-%EC%97%90%EB%94%94%ED%84%B0%EC%97%90%EC%84%9C-%EA%B7%B8%EB%9E%98%ED%94%BD%EC%9D%84-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%B6%94%EA%B0%80%ED%95%98%EA%B3%A0-%EA%B4%80%EB%A6%AC%ED%95%98%EB%82%98%EC%9A%94"> <link rel="alternate" hreflang="pt" href="https://help.vimeo.com/hc/pt/articles/12426829143185-Como-fa%C3%A7o-para-adicionar-e-gerenciar-elementos-gr%C3%A1ficos-no-editor-de-v%C3%ADdeo"> <link rel="alternate" hreflang="x-default" href="https://help.vimeo.com/hc/en-us/articles/12426829143185-How-do-I-add-and-manage-graphics-in-the-video-editor"> <link rel="stylesheet" href="//static.zdassets.com/hc/assets/application-a42a464885a505c24ac3b0ab35047489.css" media="all" id="stylesheet" /> <link rel="stylesheet" type="text/css" href="/hc/theming_assets/15415396/10315422760081/style.css?digest=30867889745681"> <link rel="icon" type="image/x-icon" href="/hc/theming_assets/01HZPZSWKB9ZPE43CY47XS1PC5"> <meta content="width=device-width, initial-scale=1.0" name="viewport" />   <script type="text/javascript">window.searchClearButtonLabelLocalized = "Clear search";</script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> //var assetsHeadBg = "/hc/theming_assets/01HZPZSTPTNY0M951AZ5MA1NX3"; var categoryIcons = { "202594577" : "//theme.zdassets.com/theme_assets/9109816/6be85fdcbfcdb1bf492eec165db4526c265c4ade.png", "202594597" : "//theme.zdassets.com/theme_assets/9109816/f05d67c519e89af3c82cd91dbb0d074acc58aeb4.png", "201496018" : "//theme.zdassets.com/theme_assets/9109816/20313fb91b2d0d90f0c0078f1d8199e75e2a8fb1.png", "115000288088" : "//theme.zdassets.com/theme_assets/9109816/e62cb82ab05902bdf1e48394df62b29603bf5049.png", "202603428" : "//theme.zdassets.com/theme_assets/9109816/cb9565f4209dd23339ce20d05e8ab08ac4422ce5.png", "360002793531" : "//theme.zdassets.com/theme_assets/9109816/6be85fdcbfcdb1bf492eec165db4526c265c4ade.png", "360002644252" : "//theme.zdassets.com/theme_assets/9109816/f05d67c519e89af3c82cd91dbb0d074acc58aeb4.png", "5374470309389" : "//theme.zdassets.com/theme_assets/9109816/20313fb91b2d0d90f0c0078f1d8199e75e2a8fb1.png", "360002429312" : "//theme.zdassets.com/theme_assets/9109816/e62cb82ab05902bdf1e48394df62b29603bf5049.png", "202594587" : "//theme.zdassets.com/theme_assets/9109816/cb9565f4209dd23339ce20d05e8ab08ac4422ce5.png", "202594617" : "//theme.zdassets.com/theme_assets/9109816/6be85fdcbfcdb1bf492eec165db4526c265c4ade.png", "204059588" : "//theme.zdassets.com/theme_assets/9109816/f05d67c519e89af3c82cd91dbb0d074acc58aeb4.png", "202594627" : "//theme.zdassets.com/theme_assets/9109816/20313fb91b2d0d90f0c0078f1d8199e75e2a8fb1.png", "202603408" : "//theme.zdassets.com/theme_assets/9109816/e62cb82ab05902bdf1e48394df62b29603bf5049.png", "202603398" : "//theme.zdassets.com/theme_assets/9109816/cb9565f4209dd23339ce20d05e8ab08ac4422ce5.png" } </script>   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-RBKK');</script>   <script> (function(apiKey){ (function(p,e,n,d,o){var v,w,x,y,z;o=p[d]=p[d]||{};o._q=o._q||[]; v=['initialize','identify','updateOptions','pageLoad','track'];for(w=0,x=v.length;w<x;++w)(function(m){ o[m]=o[m]||function(){o._q[m===v[0]?'unshift':'push']([m].concat([].slice.call(arguments,0)));};})(v[w]); y=e.createElement(n);y.async=!0;y.src='https://cdn.pendo.io/agent/static/'+apiKey+'/pendo.js'; z=e.getElementsByTagName(n)[0];z.parentNode.insertBefore(y,z);})(window,document,'script','pendo'); document.addEventListener('DOMContentLoaded',function(){ pendo.initialize({ visitor: { id: HelpCenter.user.identifier, email: HelpCenter.user.email, referrer_path: document.referrer } }); }) })('3595ceb6-d35b-437a-6764-8ec9a8b5cb7d'); </script>  </head> <body class="">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-RBKK" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <script> function handleLoginRedirection() { var currentUrl = encodeURIComponent(window.location.href); var redirectionUrl = "https://vimeo.com/log_in?redirect=" + window.location.href; window.location.assign(redirectionUrl); } // window.onload = setSignInLink; // Execute after the page is loaded </script> <script> // Function to set a cookie with an expiration time function setCookie(name, value, hours) { const expires = new Date(); expires.setTime(expires.getTime() + (hours * 60 * 60 * 1000)); document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`; } // Function to get a cookie value function getCookie(name) { const nameEQ = name + "="; const ca = document.cookie.split(';'); for (let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) === ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length); } return null; } // Function to delete a cookie function eraseCookie(name) { document.cookie = name + '=; Max-Age=-99999999;'; } // Function to fetch the help center integration token async function fetchHCIntegrationToken() { try { const response = await fetch('/api/v2/help_center/integration/token.json'); if (!response.ok) throw new Error('Network response was not ok to get hc integration token.'); const data = await response.json(); return data.token; } catch (error) { console.error('Failed to fetch help center integration token:', error); } } // Function to request a new JWT token using the hc integration token and additional data async function fetchJwtToken(bearerToken) { const postData = { userName: '', subdomain: 'vimeosupport' // Include subdomain in request data }; try { const response = await fetch('https://us-central1-vimeo-infra.cloudfunctions.net/zendesk_messenger_login', { method: 'POST', headers: { 'Authorization': `Bearer ${bearerToken}`, 'Content-Type': 'application/json' }, body: JSON.stringify(postData) }); if (!response.ok) throw new Error('Network response was not ok to create jwt token.'); const data = await response.json(); return data.jwtToken; } catch (error) { console.error('Failed to fetch JWT token:', error); } } // Function to fetch and set the JWT token async function fetchAndSetJwtToken() { try { const hc_integrationToken = await fetchHCIntegrationToken(); if (hc_integrationToken) { const jwtToken = await fetchJwtToken(hc_integrationToken); if (jwtToken) { setCookie('messenger', jwtToken, 1); // Store the token for 1 hour return jwtToken; // Return the new JWT token } } } catch (error) { console.error('Failed to fetch and set JWT token:', error); } } // Function to initialize JWT token management async function initializeJwtToken() { let jwtToken = getCookie('messenger'); if (!jwtToken) { jwtToken = await fetchAndSetJwtToken(); // Fetch and set the token if not present } // Use the token in the zE function zE('messenger', 'loginUser', function (callback) { callback(jwtToken); }); // Refresh the JWT token every 55 minutes setInterval(async () => { jwtToken = await fetchAndSetJwtToken(); // Fetch and set the new token }, 55 * 60 * 1000); // Refresh every 55 minutes } // Function to handle the initialization based on sign-in status async function handleInitialization() { zE('messenger:set', 'conversationTags', ['messenger_help_centre']); zE('messenger:set', 'conversationFields', [ { id: '27812922616209', value: 'messenger_help_centre' }, ]); // Check the value of false here const signedIn = false; if (signedIn) { await initializeJwtToken(); } } // Execute handleInitialization when the script loads console.log("Hello Header First") document.addEventListener('DOMContentLoaded', handleInitialization); console.log("Hello Header Last") </script> <div class="alertbox"></div> <a class="skip-navigation" tabindex="1" href="#main-content">Skip to main content</a> <div id="fixed-header"> <header class="header"> <div class="logo"> <a title="Home" href="/hc/en-us"> <img src="/hc/theming_assets/01HZPZSWBPKHPF4Q4A3XF5SPKM"> </a> <span class="help_center_name"> <a title="Home" href="/hc/en-us"> Help Center </a> </span> </div> <div class="nav-wrapper-desktop"> <nav class="user-nav" id="user-nav"> <ul class="user-nav-list"> <li id="zva_diff_id"><a onclick="zE('messenger', 'open'); return false;" href="">Contact us</a></li> <li><a href="https://vimeo.com/upgrade">Pricing</a></li> <li> <a href="https://vimeo.com/upload" class="upload_button"> <svg width="17px" height="12px" viewBox="0 0 17 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Page-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="zen-desk-logged-in" transform="translate(-1151.000000, -28.000000)" fill="#FFFFFF"> <g id="logged-in-nav" transform="translate(0.000000, -1.000000)"> <g id="Upload-Button" transform="translate(1141.000000, 19.000000)"> <path d="M23.8838433,14.8328767 C24.0158209,14.4683397 24.1044776,14.0863123 24.1044776,13.6821918 C24.1044776,11.6487014 22.3001119,10 20.0746269,10 C18.3085448,10 16.8245522,11.0448219 16.2795149,12.4891616 C15.8271642,12.0896438 15.2126119,11.8410959 14.5335821,11.8410959 C13.1422761,11.8410959 12.0149254,12.871189 12.0149254,14.1424658 C12.0149254,14.3937753 12.0703358,14.6312767 12.1509328,14.856811 C10.8865672,15.3465425 10,16.4907836 10,17.8246575 C10,19.6040767 11.578694,21.0465753 13.5261194,21.0465753 L17.0522388,21.0465753 L17.0522388,17.7454904 L16.7570522,18.015211 C16.3641418,18.3751452 15.7254104,18.3751452 15.3325,18.015211 C14.9385821,17.6561973 14.9385821,17.0725699 15.3325,16.7135562 L17.3474254,14.8724603 C17.7403358,14.512526 18.3790672,14.512526 18.7719776,14.8724603 L20.786903,16.7135562 C21.1808209,17.0725699 21.1808209,17.6561973 20.786903,18.015211 C20.3939925,18.3751452 19.7552612,18.3751452 19.3623507,18.015211 L19.0671642,17.7454904 L19.0671642,21.0465753 L22.5932836,21.0465753 C24.540709,21.0465753 26.119403,19.6040767 26.119403,17.8246575 C26.119403,16.4622466 25.1915299,15.3041973 23.8838433,14.8328767" id="Upload-icon"></path> </g> </g> </g> </g> </svg> <span class="t en-us">Upload</span> </a> </li> <li><a id="sign-in-link" style="cursor:pointer" onclick="handleLoginRedirection()" class="sign-in">Sign in</a> </li> </ul> </nav> </div> <div class="nav-wrapper-mobile"> <button class="menu-button-mobile" aria-controls="user-nav-mobile" aria-expanded="false" aria-label="Toggle navigation menu"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-menu"> <path fill="none" stroke="currentColor" stroke-linecap="round" d="M1.5 3.5h13m-13 4h13m-13 4h13"/> </svg> </button> <nav class="menu-list-mobile" id="user-nav-mobile" aria-expanded="false"> <ul class="menu-list-mobile-items"> <li class="item"> <a id="mobile-sign-in-link" style="cursor:pointer" onclick="handleLoginRedirection()" class="sign-in" role="menuitem">Sign in</a> </li> <li class="nav-divider"></li> <li class="item" id="zva_diff_id"><a onclick="zE('messenger', 'open'); return false;" href="https://vimeo.com/help/contact">Contact us</a></li> <li class="item"><a href="https://vimeo.com/upgrade">Pricing</a></li> <li class="item mobile-btn-upload"> <a href="https://vimeo.com/upload" class="upload_button"> <svg width="17px" height="12px" viewBox="0 0 17 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Page-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="zen-desk-logged-in" transform="translate(-1151.000000, -28.000000)" fill="#FFFFFF"> <g id="logged-in-nav" transform="translate(0.000000, -1.000000)"> <g id="Upload-Button" transform="translate(1141.000000, 19.000000)"> <path d="M23.8838433,14.8328767 C24.0158209,14.4683397 24.1044776,14.0863123 24.1044776,13.6821918 C24.1044776,11.6487014 22.3001119,10 20.0746269,10 C18.3085448,10 16.8245522,11.0448219 16.2795149,12.4891616 C15.8271642,12.0896438 15.2126119,11.8410959 14.5335821,11.8410959 C13.1422761,11.8410959 12.0149254,12.871189 12.0149254,14.1424658 C12.0149254,14.3937753 12.0703358,14.6312767 12.1509328,14.856811 C10.8865672,15.3465425 10,16.4907836 10,17.8246575 C10,19.6040767 11.578694,21.0465753 13.5261194,21.0465753 L17.0522388,21.0465753 L17.0522388,17.7454904 L16.7570522,18.015211 C16.3641418,18.3751452 15.7254104,18.3751452 15.3325,18.015211 C14.9385821,17.6561973 14.9385821,17.0725699 15.3325,16.7135562 L17.3474254,14.8724603 C17.7403358,14.512526 18.3790672,14.512526 18.7719776,14.8724603 L20.786903,16.7135562 C21.1808209,17.0725699 21.1808209,17.6561973 20.786903,18.015211 C20.3939925,18.3751452 19.7552612,18.3751452 19.3623507,18.015211 L19.0671642,17.7454904 L19.0671642,21.0465753 L22.5932836,21.0465753 C24.540709,21.0465753 26.119403,19.6040767 26.119403,17.8246575 C26.119403,16.4622466 25.1915299,15.3041973 23.8838433,14.8328767" id="Upload-icon"></path> </g> </g> </g> </g> </svg> <span class="t en-us">Upload</span> </a> </li> <li class="nav-divider"></li> </ul> </nav> </div> </header> </div> <main role="main"> <div class="container-divider"></div> <div class="container"> <nav class="sub-nav"> <ol class="breadcrumbs"> <li title="Vimeo Help Center"> <a href="/hc/en-us">Vimeo Help Center</a> </li> <li title="Making, managing, and sharing videos"> <a href="/hc/en-us/categories/12385928065809-Making-managing-and-sharing-videos">Making, managing, and sharing videos</a> </li> <li title="Video creation and enhancement"> <a href="/hc/en-us/sections/12397317598737-Video-creation-and-enhancement">Video creation and enhancement</a> </li> <li title="Editing videos"> <a href="/hc/en-us/sections/12402611847057-Editing-videos">Editing videos</a> </li> <li title="Editing in a web browser"> <a href="/hc/en-us/sections/12414987128721-Editing-in-a-web-browser">Editing in a web browser</a> </li> </ol> <div class="search-container"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true"> <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/> <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/> </svg> <form role="search" class="search" data-search="" action="/hc/en-us/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓" autocomplete="off" /><input type="search" name="query" id="query" placeholder="Search" aria-label="Search" /></form> </div> </nav> <div class="article-container" id="article-container"> <aside class="article-sidebar" aria-labelledby="section-articles-title"> <div class="collapsible-sidebar"> <button type="button" class="collapsible-sidebar-toggle" aria-labelledby="section-articles-title" aria-expanded="false"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon"> <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon x-icon"> <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/> </svg> </button> <span id="section-articles-title" class="collapsible-sidebar-title sidenav-title"> Articles in this section </span> <div class="collapsible-sidebar-body"> <ul> <li> <a href="/hc/en-us/articles/12426815178897-About-the-video-editor" class="sidenav-item ">About the video editor</a> </li> <li> <a href="/hc/en-us/articles/31822428466577-How-do-I-use-keyboard-shortcuts-in-the-video-editor" class="sidenav-item ">How do I use keyboard shortcuts in the video editor?</a> </li> <li> <a href="/hc/en-us/articles/23464658782865-How-do-I-use-a-template-in-the-video-editor" class="sidenav-item ">How do I use a template in the video editor?</a> </li> <li> <a href="/hc/en-us/articles/16367006563089-How-do-I-use-the-text-based-video-editor" class="sidenav-item ">How do I use the text-based video editor?</a> </li> <li> <a href="/hc/en-us/articles/12426733378193-How-do-I-use-the-inspector-toolbar-in-the-editor" class="sidenav-item ">How do I use the inspector toolbar in the editor?</a> </li> <li> <a href="/hc/en-us/articles/12426745064721-How-do-I-add-and-manage-media-in-the-video-editor" class="sidenav-item ">How do I add and manage media in the video editor?</a> </li> <li> <a href="/hc/en-us/articles/27377357898897-How-do-I-scale-media-in-the-editor" class="sidenav-item ">How do I scale media in the editor?</a> </li> <li> <a href="/hc/en-us/articles/14799572303505-How-do-I-add-an-intro-or-outro-to-my-video" class="sidenav-item ">How do I add an intro or outro to my video?</a> </li> <li> <a href="/hc/en-us/articles/12426713967761-How-do-I-record-a-video-in-the-video-editor" class="sidenav-item ">How do I record a video in the video editor?</a> </li> <li> <a href="/hc/en-us/articles/12426791681041-How-do-I-use-the-Timeline-in-the-video-editor" class="sidenav-item ">How do I use the Timeline in the video editor?</a> </li> </ul> <a href="/hc/en-us/sections/12414987128721-Editing-in-a-web-browser" class="article-sidebar-item">See more</a> </div> </div> </aside> <article id="main-content" class="article"> <div class="art-pd"> <header class="article-header"> <h1 title="How do I add and manage graphics in the video editor?" class="article-title"> How do I add and manage graphics in the video editor? </h1>  </header> <section class="article-info"> <div class="article-content"> <div class="article-body"><p><span style="color: #1a2e3a;">The video editor </span>includes a graphics feature (formerly called Stickers) that lets you add images or solid backgrounds to your videos. You can choose from a wide variety of available graphics.</p> <p>💡Tip: Learn how to upload photos from your device to use in your video at ‘<a href="https://help.vimeo.com/hc/en-us/articles/12426745064721" target="_blank" rel="noopener noreferrer">How do I add and manage media in the video editor?</a>’</p> <p><strong>In this article: </strong></p> <ul> <li><a href="#h_01JHP38V98BC2EG8JWS88EJFEY">How to add graphics</a></li> <li><a href="#h_01JHP38V987E7BQVDPD8YHXWGZ">How to customize graphics</a></li> <li> <a href="#h_01JHP38V989N448BQF4K6YFPA3">How to add a solid background</a> </li> <li><a href="#h_01JHP38V98N60CCP8WED877KXD">How to adjust a graphic’s duration in the video </a></li> </ul> <h3 id="h_01JHP38V98BC2EG8JWS88EJFEY"><span style="color: #434343;">How to add graphics</span></h3> <p>Graphics can be added from the <strong>Graphics </strong>menu in <span style="color: #1a2e3a;">the video editor</span>. </p> <p><strong>To add a graphic to your video: </strong></p> <ol> <li>Select the <strong>Graphics</strong> icon in the <span style="color: #1a2e3a;">left-side panel </span>of the video editor.</li> <li>Choose a category (Shapes, Icons, Buttons, etc.) or browse the entire collection. </li> <li>Select the graphic to add it to the canvas.</li> </ol> <p><span style="color: #0a0e12;">The graphic will appear with a bounding box. You can select and drag the anchor points of the box to resize or drag the entire graphic to a new position on the canvas. </span></p> <p class="wysiwyg-indent1"><img src="/hc/article_attachments/31822593585169" alt="A rectangular graphic with a 'Find out more' button is selected within a bounding box. The bounding box has four anchor points for resizing and repositioning the graphic." width="498" height="458.963963963964"></p> <h3 id="h_01JHP38V987E7BQVDPD8YHXWGZ"><span style="color: #434343;">How to customize graphics</span></h3> <p>Graphics can be further customized by using the inspector toolbar. </p> <p><span style="color: #0a0e12;">When selecting the graphic in the video, the graphics inspector toolbar will appear above the canvas to display more options for customizing your graphic. Learn more about the inspect toolbars at </span><a href="https://help.vimeo.com/hc/en-us/articles/12426733378193" target="_blank" rel="noopener noreferrer">'How do I use the inspector toolbar in the video editor?</a><span style="color: #0a0e12;">'.</span></p> <p>The graphics inspector toolbar in the video editor allows users to customize graphics by changing colors (when available for the graphic), rotating, flipping, adjusting opacity, adding animations, and replacing the graphic. </p> <p>Right-clicking the graphic opens an additional options menu including copy, paste, duplicate, delete, and adjusting layer order.</p> <h3 id="h_01JHP38V989N448BQF4K6YFPA3"><span style="color: #434343;">How to add a solid background </span></h3> <p>From the graphics menu, choose <strong>+Add a solid background</strong> to insert a background color behind your video.</p> <p><img src="/hc/article_attachments/31822579924241" alt="The graphics menu in the video editor with a button labeled '+Add solid background'. This feature allows users to insert a solid color background behind their video content. width=" width="589" height="292"></p> <p>To change the color, select the background and then select the <strong>Colors</strong> button from the Inspector Toolbar. Choose your desired color from the color menu.</p> <h3 id="h_01JHP38V98N60CCP8WED877KXD"><span style="color: #434343;">How to adjust a graphic’s duration in the video </span></h3> <p>As with all elements, adding a graphic to your video will generate a corresponding element box on the timeline. </p> <p><strong><span style="color: #0a0e12;">To trim or extend a graphic’s duration in your video: </span></strong></p> <ol> <li><span style="color: #0a0e12;">Select the graphics element block in the Timeline - this will display its adjustment handles on either end of the element block. </span></li> <li>Drag the handles to shorten or lengthen the duration of the element block.  <ul> <li> <strong>Shortening the Clip:</strong> Select and drag the edge towards the center of the clip to reduce its duration.</li> <li> <strong>Lengthening the Clip:</strong> Select and drag the edge away from the center of the clip to increase its duration. This will reveal more of the clip's content in the Timeline.</li> </ul> </li> </ol> <p><strong>Note:</strong> If you've previously shortened a clip, you can always lengthen it again up to its original duration.</p></div> </div> </section> <footer> <div class="article-footer"> </div> <div style="color:green; padding-bottom: 50px;" class="downvote-success-message"> </div> <div class="article-votes"> <span class="article-votes-question" id="article-votes-label">Was this article helpful?</span> <div class="article-votes-controls" role="group" aria-labelledby="article-votes-label"> <button type="button" class="button article-vote article-vote-up" data-helper="vote" data-item="article" data-type="up" data-id="12426829143185" data-upvote-count="12" data-vote-count="21" data-vote-sum="3" data-vote-url="/hc/en-us/articles/12426829143185/vote" data-value="null" data-label="12 out of 21 found this helpful" data-selected-class="button-primary" aria-label="This article was helpful" aria-pressed="false">Yes</button> <button type="button" class="button article-vote article-vote-down" data-helper="vote" data-item="article" data-type="down" data-id="12426829143185" data-upvote-count="12" data-vote-count="21" data-vote-sum="3" data-vote-url="/hc/en-us/articles/12426829143185/vote" data-value="null" data-label="12 out of 21 found this helpful" data-selected-class="button-primary" aria-label="This article was not helpful" aria-pressed="false">No</button> </div> <small class="article-votes-count"> <span class="article-vote-label" data-helper="vote" data-item="article" data-type="label" data-id="12426829143185" data-upvote-count="12" data-vote-count="21" data-vote-sum="3" data-vote-url="/hc/en-us/articles/12426829143185/vote" data-value="null" data-label="12 out of 21 found this helpful">12 out of 21 found this helpful</span> </small> <div class="downvote-message"> <iframe id="article_feedback_form_frame" style="height:500px; width: 100%; border:0;" src="/hc/en-us/requests/new?question=&tf_14926078681617=https://vimeosupport.zendesk.com/hc/en-us/articles/12426829143185-How-do-I-add-and-manage-graphics-in-the-video-editor&ticket_form_id=14926109199377"></iframe> </div> </div> <div class="article-return-to-top"> <a href="#article-container"> Return to top <svg xmlns="http://www.w3.org/2000/svg" class="article-return-to-top-icon" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true"> <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/> </svg> </a> </div> </footer> <div class="article-relatives"> <div data-recent-articles></div> <section class="related-articles"> <h2 class="related-articles-title">Related articles</h2> <ul> <li> <a href="/hc/en-us/related/click?data=BAh7CjobZGVzdGluYXRpb25fYXJ0aWNsZV9pZGwrCJFaB1NNCzoYcmVmZXJyZXJfYXJ0aWNsZV9pZGwrCJGcvFhNCzoLbG9jYWxlSSIKZW4tdXMGOgZFVDoIdXJsSSJXL2hjL2VuLXVzL2FydGljbGVzLzEyNDI2NzMzMzc4MTkzLUhvdy1kby1JLXVzZS10aGUtaW5zcGVjdG9yLXRvb2xiYXItaW4tdGhlLWVkaXRvcgY7CFQ6CXJhbmtpBg%3D%3D--f718fdf0b6ef285fbf7b9c0ae412eced60b0298b" rel="nofollow">How do I use the inspector toolbar in the editor?</a> </li> <li> <a href="/hc/en-us/related/click?data=BAh7CjobZGVzdGluYXRpb25fYXJ0aWNsZV9pZGwrCJE1kERNCzoYcmVmZXJyZXJfYXJ0aWNsZV9pZGwrCJGcvFhNCzoLbG9jYWxlSSIKZW4tdXMGOgZFVDoIdXJsSSJNL2hjL2VuLXVzL2FydGljbGVzLzEyNDI2NDkwNjg4OTEzLUNyZWF0aW5nLWFuZC1lZGl0aW5nLXZpZGVvcy13aXRoLVZpbWVvBjsIVDoJcmFua2kH--8d7ad7866fec64fa74584b44d7856b7fa6c2bfe6" rel="nofollow">Creating and editing videos with Vimeo</a> </li> <li> <a href="/hc/en-us/related/click?data=BAh7CjobZGVzdGluYXRpb25fYXJ0aWNsZV9pZGwrCJFzpGBNCzoYcmVmZXJyZXJfYXJ0aWNsZV9pZGwrCJGcvFhNCzoLbG9jYWxlSSIKZW4tdXMGOgZFVDoIdXJsSSJRL2hjL2VuLXVzL2FydGljbGVzLzEyNDI2OTYxNzc3NTUzLUhvdy10by1hZGQtbG9nby1ncmFwaGljLW92ZXJsYXlzLXRvLWV2ZW50cwY7CFQ6CXJhbmtpCA%3D%3D--b262d3cd706996d85a342f7e3923635e7ff78556" rel="nofollow">How to add logo graphic overlays to events</a> </li> <li> <a href="/hc/en-us/related/click?data=BAh7CjobZGVzdGluYXRpb25fYXJ0aWNsZV9pZGwrCBFug755FjoYcmVmZXJyZXJfYXJ0aWNsZV9pZGwrCJGcvFhNCzoLbG9jYWxlSSIKZW4tdXMGOgZFVDoIdXJsSSJtL2hjL2VuLXVzL2FydGljbGVzLzI0NzEyMTQzMTM4MzIxLUhvdy1kby1JLWN1c3RvbWl6ZS10aGUtYXBwZWFyYW5jZS1vZi1teS1yZWNvcmRpbmctaW4tdGhlLVJlY29yZC1TdHVkaW8GOwhUOglyYW5raQk%3D--5cb6a8c39e54720fd8c772eb5e86bfe4337c8b2d" rel="nofollow">How do I customize the appearance of my recording in the Record Studio?</a> </li> <li> <a href="/hc/en-us/related/click?data=BAh7CjobZGVzdGluYXRpb25fYXJ0aWNsZV9pZGwrCJH%2BP8t1DToYcmVmZXJyZXJfYXJ0aWNsZV9pZGwrCJGcvFhNCzoLbG9jYWxlSSIKZW4tdXMGOgZFVDoIdXJsSSJRL2hjL2VuLXVzL2FydGljbGVzLzE0Nzk5NTcyMzAzNTA1LUhvdy1kby1JLWFkZC1hbi1pbnRyby1vci1vdXRyby10by1teS12aWRlbwY7CFQ6CXJhbmtpCg%3D%3D--4fb533c0e617cf78d59b72909a22ac3bd80dfd37" rel="nofollow">How do I add an intro or outro to my video?</a> </li> </ul> </section> </div> </div> </article> </div> </div> <script> const label = document.querySelector(".article-vote-label"); swap(label); // Create an observer to track new vote labels added to the DOM const observer = new MutationObserver(mutationRecords => { for (const mutation of mutationRecords) { if (mutation.addedNodes[0]) { swap(mutation.addedNodes[0]); } } }); observer.observe(label, { childList: true }); // Swap the label text for the supplied label function swap (node) { const text = node.innerText ? node.innerText : node.data; const position = text.indexOf("out of"); if(position) { node.textContent = text.slice(0 , position) + "found this helpful"; } } </script> = </main> <footer class="footer"> <div class="footer-inner">  <h4 class="footer-title"><span class="t en-us">One video platform. All your video needs.</span></h4> <ul class="footer-links"> <li><a href="https://vimeo.com/upgrade"><span class="t en-us">Pricing</span></a></li> <li><a href="https://vimeo.com/enterprise"><span class="t en-us">Enterprise</span></a></li> <li><a href="https://vimeo.com/solutions/small-business-solutions"><span class="t en-us">Small Business</span></a></li> <li><a class="mobile_menu_link" href="https://vimeo.com/solutions/creative-professionals-solutions"><span class="t en-us">Creative Professionals</span></a></li> <li><a href="https://vimeo.com/upload"><span class="t en-us">Upload</span></a></li> <li><a href="https://vimeo.com/ott"><span class="t en-us">Monetize my videos</span></a></li> <li><a href="https://vimeo.com/about"><span class="t en-us">About</span></a></li> <li><a href="https://vimeo.com/blog"><span class="t en-us">Blog</span></a></li> <li class="last_child"><a class="mobile_menu_link" href="https://vimeo.com/ondemand/startselling"><span class="t en-us">Sell videos</span></a></li> </ul> </div> <div class="bottom-footer"> <div class="footer-inner"> <div class="footer-bottom"> <div class="tm"> <span class="t en-us">TM + © 2024 Vimeo.com, Inc. All rights reserved.</span> </div> <ul class="footer-bottom-links"> <li><a href="https://vimeo.com/terms"><span class="t en-us">Terms</span></a></li> <li><a href="https://vimeo.com/privacy"><span class="t en-us">Privacy</span></a></li> <li><a href="https://vimeo.com/privacy/us-state-privacy">U.S. State Privacy</a></li> <li><a href="https://vimeo.com/dmca"><span class="t en-us">Copyright</span></a></li> <li class="last_child"><a href="https://vimeo.com/cookie_policy"><span class="t en-us">Cookies</span></a></li> </ul>  </div> <div class="footer-bottom-right"> <div class="footer-language-selector"> <div class="dropdown language-selector"> <span>Language:</span> <button class="dropdown-toggle" aria-haspopup="true"> English (US) <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="dropdown-chevron-icon"> <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/> </svg> </button> <span class="dropdown-menu dropdown-menu-end" role="menu"> <a href="/hc/change_language/de?return_to=%2Fhc%2Fde%2Farticles%2F12426829143185-Wie-kann-ich-Grafiken-im-Video-Editor-hinzuf%25C3%25BCgen-und-verwalten" dir="ltr" rel="nofollow" role="menuitem"> Deutsch </a> <a href="/hc/change_language/es?return_to=%2Fhc%2Fes%2Farticles%2F12426829143185--C%25C3%25B3mo-puedo-agregar-y-gestionar-gr%25C3%25A1ficos-en-el-editor-de-video" dir="ltr" rel="nofollow" role="menuitem"> Español </a> <a href="/hc/change_language/fr?return_to=%2Fhc%2Ffr%2Farticles%2F12426829143185-Comment-ajouter-et-g%25C3%25A9rer-des-graphiques-dans-l-%25C3%25A9diteur-vid%25C3%25A9o" dir="ltr" rel="nofollow" role="menuitem"> Français </a> <a href="/hc/change_language/ja?return_to=%2Fhc%2Fja%2Farticles%2F12426829143185-%25E5%258B%2595%25E7%2594%25BB%25E3%2582%25A8%25E3%2583%2587%25E3%2582%25A3%25E3%2582%25BF%25E3%2583%25BC%25E3%2581%25A7%25E3%2582%25B0%25E3%2583%25A9%25E3%2583%2595%25E3%2582%25A3%25E3%2583%2583%25E3%2582%25AF%25E3%2582%2592%25E8%25BF%25BD%25E5%258A%25A0%25E3%2581%258A%25E3%2582%2588%25E3%2581%25B3%25E7%25AE%25A1%25E7%2590%2586%25E3%2581%2599%25E3%2582%258B%25E6%2596%25B9%25E6%25B3%2595%25E3%2581%25AF" dir="ltr" rel="nofollow" role="menuitem"> 日本語 </a> <a href="/hc/change_language/ko?return_to=%2Fhc%2Fko%2Farticles%2F12426829143185-%25EB%258F%2599%25EC%2598%2581%25EC%2583%2581-%25EC%2597%2590%25EB%2594%2594%25ED%2584%25B0%25EC%2597%2590%25EC%2584%259C-%25EA%25B7%25B8%25EB%259E%2598%25ED%2594%25BD%25EC%259D%2584-%25EC%2596%25B4%25EB%2596%25BB%25EA%25B2%258C-%25EC%25B6%2594%25EA%25B0%2580%25ED%2595%2598%25EA%25B3%25A0-%25EA%25B4%2580%25EB%25A6%25AC%25ED%2595%2598%25EB%2582%2598%25EC%259A%2594" dir="ltr" rel="nofollow" role="menuitem"> 한국어 </a> <a href="/hc/change_language/pt?return_to=%2Fhc%2Fpt%2Farticles%2F12426829143185-Como-fa%25C3%25A7o-para-adicionar-e-gerenciar-elementos-gr%25C3%25A1ficos-no-editor-de-v%25C3%25ADdeo" dir="ltr" rel="nofollow" role="menuitem"> Português </a> </span> </div> </div> </div> </div> </div> </footer>    <script src="//static.zdassets.com/hc/assets/en-us.6690a15e63bc14e68b2d.js"></script> <script src="https://vimeosupport.zendesk.com/auth/v2/host/without_iframe.js" data-brand-id="10315422760081" data-return-to="https://help.vimeo.com/hc/en-us/articles/12426829143185-How-do-I-add-and-manage-graphics-in-the-video-editor" data-theme="hc" data-locale="en-us" data-auth-origin="10315422760081,true,true"></script> <script type="text/javascript"> /* Greetings sourcecode lurker! This is for internal Zendesk and legacy usage, we don't support or guarantee any of these values so please don't build stuff on top of them. */ HelpCenter = {}; HelpCenter.account = {"subdomain":"vimeosupport","environment":"production","name":"Vimeo"}; HelpCenter.user = {"identifier":"da39a3ee5e6b4b0d3255bfef95601890afd80709","email":null,"name":"","role":"anonymous","avatar_url":"https://assets.zendesk.com/hc/assets/default_avatar.png","is_admin":false,"organizations":[],"groups":[]}; HelpCenter.internal = {"asset_url":"//static.zdassets.com/hc/assets/","web_widget_asset_composer_url":"https://static.zdassets.com/ekr/snippet.js","current_session":{"locale":"en-us","csrf_token":null,"shared_csrf_token":null},"usage_tracking":{"event":"article_viewed","data":"BAh7CDoLbG9jYWxlSSIKZW4tdXMGOgZFVDoPYXJ0aWNsZV9pZGwrCJGcvFhNCzoKX21ldGF7DDoPYWNjb3VudF9pZGkDZDjrOhNoZWxwX2NlbnRlcl9pZGwrCJGcM95hCToNYnJhbmRfaWRsKwiR/Bu/YQk6DHVzZXJfaWQwOhN1c2VyX3JvbGVfbmFtZUkiDkFOT05ZTU9VUwY7BlQ7AEkiCmVuLXVzBjsGVDoaYW5vbnltb3VzX3RyYWNraW5nX2lkMA==--c141eb7970cd1865f6d6c40d4341dd47d61d08ac","url":"https://help.vimeo.com/hc/activity"},"current_record_id":"12426829143185","current_record_url":"/hc/en-us/articles/12426829143185-How-do-I-add-and-manage-graphics-in-the-video-editor","current_record_title":"How do I add and manage graphics in the video editor?","current_text_direction":"ltr","current_brand_id":10315422760081,"current_brand_name":"Vimeo Support","current_brand_url":"https://vimeosupport.zendesk.com","current_brand_active":true,"current_path":"/hc/en-us/articles/12426829143185-How-do-I-add-and-manage-graphics-in-the-video-editor","show_autocomplete_breadcrumbs":true,"user_info_changing_enabled":false,"has_user_profiles_enabled":false,"has_end_user_attachments":true,"user_aliases_enabled":false,"has_anonymous_kb_voting":true,"has_multi_language_help_center":true,"show_at_mentions":false,"embeddables_config":{"embeddables_web_widget":true,"embeddables_connect_ipms":false},"answer_bot_subdomain":"static","general_settings_url":"https://help.vimeo.com/hc/admin/general_settings?locale=en-us","user_segments_url":"https://vimeosupport.zendesk.com/knowledge/user_segments?brand_id=10315422760081","has_gather":true,"has_ckeditor":false,"has_community_enabled":false,"has_community_badges":true,"has_community_post_content_tagging":false,"has_gather_content_tags":true,"has_guide_content_tags":true,"has_user_segments":true,"has_answer_bot_web_form_enabled":false,"has_edit_user_profile_v2":false,"has_garden_modals":false,"theming_cookie_key":"hc-da39a3ee5e6b4b0d3255bfef95601890afd80709-2-preview","is_preview":false,"has_alternate_templates":true,"arrange_articles_url":"https://vimeosupport.zendesk.com/knowledge/arrange?brand_id=10315422760081","article_verification_url":"https://vimeosupport.zendesk.com/knowledge/verification?brand_id=10315422760081","has_article_verification":true,"guide_language_settings_url":"https://help.vimeo.com/hc/admin/language_settings?locale=en-us","docs_importer_url":"https://vimeosupport.zendesk.com/knowledge/import_articles?brand_id=10315422760081","content_tags_url":"https://vimeosupport.zendesk.com/knowledge/content_tags?brand_id=10315422760081","community_badges_url":"https://vimeosupport.zendesk.com/knowledge/community_badges?brand_id=10315422760081","community_settings_url":"https://vimeosupport.zendesk.com/knowledge/community_settings?brand_id=10315422760081","gather_plan_state":"subscribed","search_settings_url":"https://vimeosupport.zendesk.com/knowledge/search_settings?brand_id=10315422760081","has_search_settings_in_plan":true,"theming_api_version":2,"theming_settings":{"show_translations":false,"brand_color":"rgba(23, 213, 255, 1)","brand_text_color":"rgba(10, 14, 18, 1)","text_color":"rgba(10, 14, 18, 1)","link_color":"rgba(10, 14, 18, 1)","hover_link_color":"rgba(10, 14, 18, 1)","visited_link_color":"rgba(10, 14, 18, 1)","background_color":"rgba(241, 245, 249, 1)","heading_font":"'Helvetica Neue', Arial, Helvetica, sans-serif","text_font":"'Helvetica Neue', Arial, Helvetica, sans-serif","logo":"/hc/theming_assets/01HZPZSWFSW8B6FJMXJ8SF8JM7","show_brand_name":true,"favicon":"/hc/theming_assets/01HZPZSWKB9ZPE43CY47XS1PC5","homepage_background_image":"/hc/theming_assets/01HZPZSWRJ0M4VT0W36RG3TY4D","community_background_image":"/hc/theming_assets/01HZPZSWXPJY1VPD90K0HVGQ1Y","community_image":"/hc/theming_assets/01HZPZSX1QXKDCXHGXAFC0TANY","instant_search":true,"scoped_kb_search":false,"scoped_community_search":false,"show_recent_activity":false,"show_custom_block_1":false,"custom_block_1_title":"Guide","custom_block_1_description":" For Product manuals, How to guides, and Quick snippets.","custom_block_1_logo":"/hc/theming_assets/01HZPZSX5X42RW3D045DCNFB5W","custom_block_1_url":"","show_custom_block_2":false,"custom_block_2_title":"FAQs","custom_block_2_description":"For all frequently asked questions about the Products and related Functionality.","custom_block_2_logo":"/hc/theming_assets/01HZPZSX9WD1ETYT016XVTGP4G","custom_block_2_url":"","show_custom_block_3":false,"custom_block_3_title":"Contact","custom_block_3_description":" Submit tickets, learn about upcoming events or simply talk to a product specialist.","custom_block_3_logo":"/hc/theming_assets/01HZPZSXEF50DTRDK55GB3P7A4","custom_block_3_url":"","show_articles_in_section":true,"show_article_author":false,"show_article_comments":false,"show_follow_article":false,"show_recently_viewed_articles":true,"show_related_articles":true,"show_article_sharing":false,"show_follow_section":true,"show_follow_post":true,"show_post_sharing":true,"show_follow_topic":true},"has_pci_credit_card_custom_field":true,"help_center_restricted":false,"is_assuming_someone_else":false,"flash_messages":[],"user_photo_editing_enabled":true,"user_preferred_locale":"en-us","base_locale":"en-us","has_user_session_cookie_enabled":false,"has_custom_statuses_enabled":true,"has_generative_answers_in_help_center":false,"has_generative_answers_in_help_center_for_anonymous":false,"has_hc_generative_answers_setting_enabled":false,"has_intl_date_format_enabled":true,"has_guide_service_catalog":false,"version":"v25714"}; </script> <script src="//static.zdassets.com/hc/assets/hc_enduser-64f4b3d968c1e60fd9f97a15e6d465ba.js"></script> <script type="text/javascript" src="/hc/theming_assets/15415396/10315422760081/script.js?digest=30867889745681"></script> </body> </html>

CINXE.COM

How do I add and manage graphics in the video editor? – Vimeo Help Center