How do I add and manage graphics in the editor?

<!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta charset="utf-8" />  <title>How do I add and manage graphics in the editor? – Vimeo Help Center</title> <meta name="description" content="Graphics in the editor (formerly known as Stickers) lets you add images to your video. There are hundreds of graphics to select from. ..." /><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 editor?" /> <meta property="og:description" content="Graphics in the editor (formerly known as Stickers) lets you add images to your video. There are hundreds of graphics to select from. 💡Tip: To upload your own image, select the Media button in the..." /> <meta property="og:url" content="https://help.vimeo.com/hc/en-us/articles/12426829143185-How-do-I-add-and-manage-graphics-in-the-editor" /> <link rel="canonical" href="https://help.vimeo.com/hc/en-us/articles/12426829143185-How-do-I-add-and-manage-graphics-in-the-editor"> <link rel="alternate" hreflang="de" href="https://help.vimeo.com/hc/de/articles/12426829143185-Wie-f%C3%BCge-ich-Grafiken-im-Editor-Erstellen-hinzu-und-verwalte-sie"> <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-editor"> <link rel="alternate" hreflang="es" href="https://help.vimeo.com/hc/es/articles/12426829143185--C%C3%B3mo-a%C3%B1ado-y-gestiono-gr%C3%A1ficos-en-el-editor-Crear"> <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-Create"> <link rel="alternate" hreflang="ja" href="https://help.vimeo.com/hc/ja/articles/12426829143185-Create-Editor%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-Create-%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-adiciono-e-gerencio-gr%C3%A1ficos-no-editor-Create"> <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-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=30312381088913"> <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 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' }, ]); } // Execute handleInitialization when the script loads 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-editor" class="sidenav-item ">About the editor</a> </li> <li> <a href="/hc/en-us/articles/23464658782865-How-do-I-make-a-video-by-using-a-template" class="sidenav-item ">How do I make a video by using a template?</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-editor" class="sidenav-item ">How do I add and manage media in the 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-About-Intros-and-Outros" class="sidenav-item ">About Intros and Outros</a> </li> <li> <a href="/hc/en-us/articles/12426713967761-How-do-I-record-videos-in-the-editor" class="sidenav-item ">How do I record videos in the editor?</a> </li> <li> <a href="/hc/en-us/articles/12426791681041-How-do-I-use-the-Timeline-in-the-editor" class="sidenav-item ">How do I use the Timeline in the editor?</a> </li> <li> <a href="/hc/en-us/articles/12426766391185-How-do-I-add-and-edit-text-in-the-editor" class="sidenav-item ">How do I add and edit text in the 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 editor?" class="article-title"> How do I add and manage graphics in the editor? </h1>  </header> <section class="article-info"> <div class="article-content"> <div class="article-body"><p><strong><span style="color: #1a2e3a;">Graphics</span></strong><span style="color: #1a2e3a;"> in the editor (formerly known as </span><strong><span style="color: #1a2e3a;">Stickers</span></strong><span style="color: #1a2e3a;">) lets you add images to your video. There are hundreds of graphics to select from. </span></p> <p><strong><span style="color: #1a2e3a;">💡Tip: </span></strong><span style="color: #1a2e3a;">To upload your own image, select the </span><strong><span style="color: #1a2e3a;">Media </span></strong><span style="color: #1a2e3a;">button in the side toolbar. Learn more at ‘<strong><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 editor?</a></strong>’</span></p> <p><strong><span style="color: #1a2e3a;">In this article learn about:</span></strong></p> <ul> <li><a href="#h_01HKDEANCNVMXX77TDSYDF9CQB"><span style="color: #1a2e3a;">Adding graphics</span></a></li> <li><a href="#h_01HKDEANCNK2PZYNWKNHKEN8EV"><span style="color: #1a2e3a;">The graphics inspector toolbar </span></a></li> <li><a href="#h_01HKDEANCNNSJBSXEVBJVVNW61"><span style="color: #1a2e3a;">Adding a solid background</span></a></li> <li><a href="#h_01HKDEANCN3YCCSTG22R0M9YEM"><span style="color: #1a2e3a;">Trimming or extending a graphic’s duration in the video</span></a></li> </ul> <h3 id="h_01HKDEANCNVMXX77TDSYDF9CQB"><span style="color: #434343;">How to add a graphic </span></h3> <ol> <li>Select <strong>Graphics</strong> from the left-side toolbar. This will open the graphics menu where you can select from a variety of graphics categories.</li> <li>Select a category from the menu or select the <strong>All categories </strong>dropdown menu to select a category. </li> <li>Select the graphic you’d like to add to your video. </li> </ol> <p>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 stage. </p> <p> </p> <p><img src="/hc/article_attachments/21457227907857" width="624" height="415"></p> <h3 id="h_01HKDEANCNK2PZYNWKNHKEN8EV"><span style="color: #434343;">How to use the graphic inspector toolbar</span></h3> <p>When selecting the graphic in the video, the graphics inspector toolbar will appear above the stage to display more options for customizing your graphic. Learn more about the inspect toolbars at <a href="https://help.vimeo.com/hc/en-us/articles/12426733378193" target="_blank" rel="noopener noreferrer">'<strong>How do I use the inspector toolbar in the editor?</strong></a><strong>'.</strong></p> <p><strong>Options in the graphics inspector toolbar include:</strong></p> <ul> <li> <strong>Colors: </strong>Change the color of the graphics (<strong>⚠️Note: </strong>This is not available for all graphics). </li> <li> <strong>Rotate: </strong>Rotate the angle of the graphic around its center axis point. </li> <li> <strong>Flip: </strong><span style="color: #1a2e3a; background-color: #ffffff;">Flip the graphic horizontally or vertically.  </span> </li> <li> <strong><span style="color: #1a2e3a;">Opacity</span></strong><span style="color: #1a2e3a;">: Set the opacity of the graphic (0%-100%). </span> </li> <li> <strong><span style="color: #1a2e3a;">Animation</span></strong><span style="color: #1a2e3a;">: Select from a variety of animations for how your graphic appears on the screen. </span> </li> <li> <strong><span style="color: #1a2e3a;">Replace Graphic:</span></strong><span style="color: #1a2e3a;"> Replace the selected graphic with stock graphics or upload your own graphic.</span> </li> </ul> <p><span style="color: #1a2e3a;">Right-clicking the graphic itself will also bring up the following tools: </span></p> <ul> <li><strong><span style="color: #1a2e3a;">Copy</span></strong></li> <li><strong><span style="color: #1a2e3a;">Duplicate</span></strong></li> <li><strong><span style="color: #1a2e3a;">Paste</span></strong></li> <li><strong><span style="color: #1a2e3a;">Delete</span></strong></li> <li> <strong><span style="color: #1a2e3a;">Bring to front</span></strong><span style="color: #1a2e3a;">: Moves the selected graphic in front of other elements that are in the video.</span> </li> <li> <strong><span style="color: #1a2e3a;">Bring forward: </span></strong><span style="color: #1a2e3a;">Moves the selected graphic one step forward in the order of layers. </span> </li> <li> <strong><span style="color: #1a2e3a;">Send back: </span></strong><span style="color: #1a2e3a;">Moves the selected graphic one step back in the order of layers. </span> </li> <li> <strong><span style="color: #1a2e3a;">Send to back</span></strong><span style="color: #1a2e3a;">: Moves the selected graphic behind other elements that are in the video. </span> </li> </ul> <h3 id="h_01HKDEANCNNSJBSXEVBJVVNW61"><span style="color: #434343;">How to add a solid background</span></h3> <p>You can also select <strong>+Add a solid background</strong> from the graphics background to add a solid background to the Timeline.</p> <p>To change the color of the background, select the background and select the <strong>Colors </strong>button from the Inspector Toolbar to select a color from the color menu. </p> <p> </p> <p><img src="/hc/article_attachments/21457227915153" width="624" height="371"></p> <h3 id="h_01HKDEANCN3YCCSTG22R0M9YEM"><span style="color: #434343;">How to trim or extend a graphic’s duration in your video</span></h3> <p>You can change how long a graphic appears in your video. </p> <p><strong>To trim or extend a graphic’s duration in your video: </strong></p> <ol> <li>Select the graphic to find its corresponding element in the Timeline. It is represented by a rectangle with a preview of the graphic above the place in the video that it appears in. <br><img src="/hc/article_attachments/21457241030929" width="452" height="394"> </li> <li>Select the edge of the start or end of the rectangle representing the graphic and drag to the left or right to trim or extend its duration.<br><strong>💡Tip: </strong>You can extend a graphic’s duration that you have previously trimmed. </li> </ol> <p class="wysiwyg-indent1"><img src="/hc/article_attachments/21457227921937" width="624" height="101"></p> <ol start="3"> <li>You can also select the rectangle in the timeline and drag it to a new position in the timeline to change where it will appear in your video.</li> </ol> <p>⚠️<strong>Note:</strong> Text on graphics cannot be edited or customized.</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="9" data-vote-count="18" data-vote-sum="0" data-vote-url="/hc/en-us/articles/12426829143185/vote" data-value="null" data-label="9 out of 18 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="9" data-vote-count="18" data-vote-sum="0" data-vote-url="/hc/en-us/articles/12426829143185/vote" data-value="null" data-label="9 out of 18 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="9" data-vote-count="18" data-vote-sum="0" data-vote-url="/hc/en-us/articles/12426829143185/vote" data-value="null" data-label="9 out of 18 found this helpful">9 out of 18 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-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=BAh7CjobZGVzdGluYXRpb25fYXJ0aWNsZV9pZGwrCJHcN5FNCzoYcmVmZXJyZXJfYXJ0aWNsZV9pZGwrCJGcvFhNCzoLbG9jYWxlSSIKZW4tdXMGOgZFVDoIdXJsSSJOL2hjL2VuLXVzL2FydGljbGVzLzEyNDI3Nzc2NzQ0NTkzLUdldC12aWRlby10cmFuc2NvZGUtc3RhdHVzLWZyb20tdGhlLUFQSQY7CFQ6CXJhbmtpCg%3D%3D--870df1ff1b17ccc040b79ba70ad1e0895039d025" rel="nofollow">Get video transcode status from the API</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-f%25C3%25BCge-ich-Grafiken-im-Editor-Erstellen-hinzu-und-verwalte-sie" dir="ltr" rel="nofollow" role="menuitem"> Deutsch </a> <a href="/hc/change_language/es?return_to=%2Fhc%2Fes%2Farticles%2F12426829143185--C%25C3%25B3mo-a%25C3%25B1ado-y-gestiono-gr%25C3%25A1ficos-en-el-editor-Crear" 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-Create" dir="ltr" rel="nofollow" role="menuitem"> Français </a> <a href="/hc/change_language/ja?return_to=%2Fhc%2Fja%2Farticles%2F12426829143185-Create-Editor%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-Create-%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-adiciono-e-gerencio-gr%25C3%25A1ficos-no-editor-Create" 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.cacab8b2af301c81e552.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-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-editor","current_record_title":"How do I add and manage graphics in the 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-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_lookup_fields_in_guide_legacy_templates":true,"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,"has_docs_importer":false,"user_preferred_locale":"en-us","base_locale":"en-us","has_end_user_session_renewal":true,"has_user_session_cookie_enabled":false,"has_end_user_2fa":true,"has_custom_statuses_enabled":true,"has_generative_answers_in_help_center":false,"has_hc_generative_answers_setting_enabled":false,"has_intl_date_format_enabled":false,"has_guide_service_catalog":false,"version":"v25440"}; </script> <script src="//static.zdassets.com/hc/assets/hc_enduser-d68384437d39435a7330ccf84a2862c6.js"></script> <script type="text/javascript" src="/hc/theming_assets/15415396/10315422760081/script.js?digest=30312381088913"></script> </body> </html>

CINXE.COM

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