{"id":5879,"date":"2024-04-14T12:33:49","date_gmt":"2024-04-14T04:33:49","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5879"},"modified":"2024-04-14T12:33:49","modified_gmt":"2024-04-14T04:33:49","slug":"resources-section","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/resources-section\/","title":{"rendered":"Resources section"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>The Resources section enables you to upload and organize all your website\u2019s resources. This section is located in the left toolbar of the Designer. Within this area, you can upload resources, categorize them into folders, filter them by type (Images, Documents, or Lottie), and seamlessly drag and drop them onto your Webflow canvas.<\/p>\n<p>Throughout this tutorial, you will gain insight into the following:<\/p>\n<ol role=\"list\">\n<li>Adding resources<\/li>\n<li>Compatible file formats<\/li>\n<li>Naming resources<\/li>\n<li>Utilizing resources<\/li>\n<li>Removing resources<\/li>\n<li>Filtering and organizing resources<\/li>\n<\/ol>\n<h2>Adding resources<\/h2>\n<blockquote><p><strong>Note:<\/strong> Files uploaded to the Resources section are <em>not restricted <\/em>\u2014 meaning they are publicly accessible and searchable, though not automatically indexed by search engines unless the file is linked on a publicly viewable webpage. Further details on resource privacy can be found in Webflow.<\/p><\/blockquote>\n<p>There are three methods to include images or files on your site:<\/p>\n<ul role=\"list\">\n<li>Clicking the &#8220;cloud&#8221; upload icon in the Resources section<\/li>\n<li>Directly dragging and dropping resources into the Resources section<\/li>\n<li>Dragging and dropping resources directly onto the canvas<\/li>\n<\/ul>\n<blockquote><p><strong>Note:<\/strong> Only upload files that you have the necessary usage and distribution rights for.<\/p><\/blockquote>\n<h3>Upload a resource to the Resources section<\/h3>\n<p>To add a resource to the Resources section:<\/p>\n<ol role=\"list\">\n<li>Access the \u201c<strong>Resources<\/strong>\u201d icon in the left toolbar<\/li>\n<li>Click the \u201c<strong>cloud<\/strong>\u201d upload icon<\/li>\n<li>Choose one or multiple images or files from your device<\/li>\n<\/ol>\n<h6><strong>Reminder:<\/strong> If uploading a file that already exists in the Resources section with a different name, the original name will be kept if the file hasn\u2019t been altered (i.e., size or dimensions remain unchanged). To upload an identical resource with a different name, a modification must be made to the file.\u00a0<\/h6>\n<h3>Directly add a resource to the canvas<\/h3>\n<p>You can also drag one or more image(s) or file(s) from your device directly onto the canvas without opening the Resources section. This action will automatically generate an image element or create a link to the file. The image or file will also be added to the Resources section for future use.<\/p>\n<h6><strong>Note:<\/strong> It&#8217;s not feasible to directly drag a dotLottie file onto the canvas due to browser constraints. Nevertheless, the dotLottie file can be uploaded to the Resources section.<\/h6>\n<h2>Compatible file formats<\/h2>\n<p>The Resources section is compatible with various image file types, the document categories listed below, as well as Lottie JSON and dotLottie animation files.<\/p>\n<h6><strong>Reminder:<\/strong> Image files must not exceed 4MB in size and documents should not surpass 10MB.<\/h6>\n<h3>Supported image file extensions<\/h3>\n<ul role=\"list\">\n<li>PNG<\/li>\n<li>JPEG and JPG<\/li>\n<li>GIF<\/li>\n<li>SVG<\/li>\n<li>WebP<\/li>\n<\/ul>\n<h3>Supported document file types<\/h3>\n<ul role=\"list\">\n<li>PDF<\/li>\n<li>DOC and DOCX<\/li>\n<li>XLS and XLSX<\/li>\n<li>PPT and PPTX<\/li>\n<li>TXT<\/li>\n<li>CSV<\/li>\n<li>ODT<\/li>\n<li>ODS<\/li>\n<li>ODP<\/li>\n<\/ul>\n<h3>Supported Lottie file types<\/h3>\n<ul role=\"list\">\n<li>JSON (Lottie only)<\/li>\n<li>dotLottie<\/li>\n<\/ul>\n<h6><strong>Additional tip: <\/strong>There are three ways to obtain a dotLottie file. You can <strong>transform<\/strong> your existing Lottie JSON file to dotLottie using the <a href=\"https:\/\/dotlottie.io\/resources\/json-to-dotLottie\/\" target=\"_blank\" rel=\"noopener\">JSON to dotLottie conversion tool<\/a>, <strong>generate<\/strong> a dotLottie file directly from After Effects using the <a href=\"https:\/\/lottiefiles.com\/plugins\/after-effects\" target=\"_blank\" rel=\"noopener\">LottieFiles plugin<\/a>, or <strong>download<\/strong> a predesigned dotLottie file from <a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noopener\">LottieFiles.com<\/a>.<\/h6>\n<h2>Naming resources<\/h2>\n<p>To prevent issues during resource uploads to the Resources section or the canvas, consider the following when naming your resources:<\/p>\n<ol role=\"list\">\n<li>You <strong>are allowed<\/strong> to utilize letters, numbers, hyphens, and underscores (characters permissible in URLs for linking to resources)<\/li>\n<li><strong>Avoid<\/strong> special characters in filenames (e.g., `#, (), &#8216; ,`)<\/li>\n<li>Keep filenames concise (100 characters or fewer, <em>including<\/em> the file extension)<\/li>\n<\/ol>\n<h6><strong>Reminder: <\/strong>To enhance loading speed, ensure images are below 4MB \u2014 resize, optimize, and\/or compress large files. Utilize a free third-party tool like <a href=\"https:\/\/compressjpeg.com\/\" target=\"_blank\" rel=\"noopener\">CompressJPEG<\/a> or <a href=\"https:\/\/compresspng.com\/\" target=\"_blank\" rel=\"noopener\">CompressPNG<\/a>. You can also compress resources by converting them to WebP format using the Webflow conversion tool.<\/h6>\n<h6><strong>Reminder: <\/strong>If a file is uploaded to the Resources section with a different name but remains unaltered (i.e., size or dimensions intact), the original name will be preserved. To upload the same resource with a new name, modification of the file is necessary.\u00a0<\/h6>\n<h2>Utilizing resources<\/h2>\n<p>Once resources are accessible in the Resources section, you can incorporate them into your site. Images will display as image elements when added, and files will appear as text links.<\/p>\n<h3>Attaching resources to link elements<\/h3>\n<p>You can link resources to link elements via link settings. To link a resource to a link element:<\/p>\n<ol role=\"list\">\n<li>Select the <strong>link element<\/strong> (link block, text link, or button) on the canvas<\/li>\n<li>Navigate to <strong>Settings panel<\/strong> &gt; <strong>Link settings<\/strong><\/li>\n<li>Click the \u201c<strong>paperclip<\/strong>\u201d file icon<\/li>\n<li>opt for <strong>Choose attachment<\/strong><\/li>\n<\/ol>\n<p>When a visitor clicks the link, image or document files will open in the same tab. Other file types will download to the visitor&#8217;s device.<\/p>\n<p>If you wish to modify the linked attachment, you can <strong>substitute<\/strong> an attachment in link settings. You can also adjust settings to have the image or document file <strong>open in a new tab<\/strong> upon clicking.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948e9c39b040c71971e8f_62d041f7dc05f37ee4641ad8_kdnn1fmrfoggtqrl1bi3hduypfqbbjpkebe4dvur2y5w_hhdvq7hw0sl0yolwetf29nv4cejfsrfm-u0x_l0iusmogxl5xyv_ncxnfxf8wfqy8bljktfdbn2qvlvspw4sc5vcj024li1fuqkyoesz8.png\" alt=\"The \u201cFile\u201d option is chosen in the Link settings section.\" title=\"64b948e9c39b040c71971e8f_62d041f7dc05f37ee4641ad8_kdnn1fmrfoggtqrl1bi3hduypfqbbjpkebe4dvur2y5w_hhdvq7hw0sl0yolwetf29nv4cejfsrfm-u0x_l0iusmogxl5xyv_ncxnfxf8wfqy8bljktfdbn2qvlvspw4sc5vcj024li1fuqkyoesz8\"><\/div>\n<\/figure>\n<h3>Utilizing image resources as background images<\/h3>\n<p>To employ uploaded image resources as background images:<\/p>\n<ol role=\"list\">\n<li>Select the element on the canvas for the background image<\/li>\n<li>Access <strong>Style panel<\/strong> &gt; <strong>Backgrounds<\/strong><\/li>\n<li>Click the \u201c<strong>plus<\/strong>\u201d icon beside <strong>Image &amp; gradient<\/strong><\/li>\n<li>Choose <strong>Choose image<\/strong><\/li>\n<li>Select the image in the <strong>Resources section<\/strong><\/li>\n<\/ol>\n<p>For further information on styling background images, explore additional resources.<\/p>\n<h6><strong>Reminder:<\/strong> Upload an optimized background image with correct resolution as Webflow does not generate responsive variants for background images. Learn more about background image resolution.<\/h6>\n<h3>Searching for resources<\/h3>\n<p>You can locate a resource using the search bar within the Resources section or by utilizing Quick find. Quick find can be accessed through shortcut <strong>Command<\/strong> +<strong> E<\/strong> (on Mac) or <strong>Control<\/strong> + <strong>E <\/strong>(on Windows). When using Quick find, ensure to <strong>enable<\/strong> the feature.resource discovery.<\/p>\n<p>If you wish to activate resource discovery in the Quick find feature:<\/p>\n<ol role=\"list\">\n<li>Enter <strong>Command<\/strong> + <strong>E<\/strong> (on Mac) or <strong>Control<\/strong> + <strong>E <\/strong>(on Windows) to launch the <strong>Quick find<\/strong><\/li>\n<li>Press the gear icon<\/li>\n<li>Select <strong>Include resources<\/strong><\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948e9c39b040c71971e92_62d041f735426959633a0b89_qdop8-d-xqxq3cwtjetmlippa_r9u8tycw-x615zazpp87zlfznp9dbihug7c50gxj7yti4kl5txx6cam7zoy_fazmj_joiozbqbxnwe4ijtbnbvj-b_dxmxpjcm2qdprdiujgbr3feypji2mmc5tw.png\" alt=\"The gear icon in the Quick find search bar is highlighted.\" title=\"64b948e9c39b040c71971e92_62d041f735426959633a0b89_qdop8-d-xqxq3cwtjetmlippa_r9u8tycw-x615zazpp87zlfznp9dbihug7c50gxj7yti4kl5txx6cam7zoy_fazmj_joiozbqbxnwe4ijtbnbvj-b_dxmxpjcm2qdprdiujgbr3feypji2mmc5tw\"><\/div>\n<\/figure>\n<h2>Steps to eradicate resources<\/h2>\n<p>When you delete a version of a resource on the canvas, it <em>does not<\/em> delete the resource in the Resources panel. To eliminate a resource from the Resources panel:<\/p>\n<ol role=\"list\">\n<li>Access the <strong>Resources panel<\/strong><\/li>\n<li>Hover over the resource you aim to eliminate<\/li>\n<li>Click the gear icon visible at the top right of the resource<\/li>\n<li>Press <strong>Delete<\/strong><\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948e9c39b040c71971eaa_62d041f8b29aee3fb500afdc_dxujmjaiewnycaks9afikwfrlwx6joa7ys1qcwpuxzivlbe7pjbblhoo42qfp_rwkxf0eytkj5jkaiciwrrgkd5r4uigrrhb4go6kzw8iet1j_6kcqlvg3oyyiudhjwll5zsz1wat90lcvjy5r74tu.png\" alt=\"The Unveil resource settings \u201ccog\u201d icon on a resource.\" title=\"64b948e9c39b040c71971eaa_62d041f8b29aee3fb500afdc_dxujmjaiewnycaks9afikwfrlwx6joa7ys1qcwpuxzivlbe7pjbblhoo42qfp_rwkxf0eytkj5jkaiciwrrgkd5r4uigrrhb4go6kzw8iet1j_6kcqlvg3oyyiudhjwll5zsz1wat90lcvjy5r74tu\"><\/div>\n<\/figure>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948e9c39b040c71971e9f_62d041f8cedd04384808b0df_upl2qgrzscs_sgmqwakm9vzi9trfp0-aj41vdlujj43zd3fspdyvwiew8tescdawc-ecyocal6m7_u4mzifouuiv7bteidxbvysvjbmvtkh5tjob0e_rtz1pcjr8vcjbtk98mfyiwp4avhiynobokw.png\" alt=\"The Erase button highlighted in the Resource details modal.\" title=\"64b948e9c39b040c71971e9f_62d041f8cedd04384808b0df_upl2qgrzscs_sgmqwakm9vzi9trfp0-aj41vdlujj43zd3fspdyvwiew8tescdawc-ecyocal6m7_u4mzifouuiv7bteidxbvysvjbmvtkh5tjob0e_rtz1pcjr8vcjbtk98mfyiwp4avhiynobokw\"><\/div>\n<\/figure>\n<p>Remember that deleting a resource from the Resources panel while it is still in use somewhere on your site will result in the resource reappearing in the Resources panel once you publish the site and refresh the Designer. All occurrences of the resource must be erased from your site, <em>then<\/em> from the Resources panel, to completely remove it.<\/p>\n<h6><strong>Key information:<\/strong> By selecting a resource\u2019s gear icon to unveil the <strong>Resource details<\/strong> modal, you can view its <strong>dimensions<\/strong>, <strong>size<\/strong>, and\/or <strong>frames<\/strong>.<\/h6>\n<h2>Method to categorize and arrange resources<\/h2>\n<p>To locate specific resources more conveniently, you have a variety of filtering and sorting choices within the Resources panel.<\/p>\n<h3>Process to filter resources<\/h3>\n<p>Initially, all types of resources are shown in the Resources panel. To filter resources by file type:<\/p>\n<ol role=\"list\">\n<li>Launch the <strong>Resources panel<\/strong><\/li>\n<li>Press the dropdown at the top left corner of the panel<\/li>\n<li>Select the category of resources to exhibit (<strong>All resources<\/strong>, <strong>Images<\/strong>, <strong>Documents<\/strong>, or <strong>Lottie<\/strong>)<\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948e9c39b040c71971ea2_62d041f83ee778bf43a96cc1_pazy51huwcxiuhrj8qroj3wy4tuz0cxsdtgshhm_yx2u01s56z-5x-wiarjc6j2kswlb0vjrkeeje33_3ucmmk5vkczfeyoemzzy9nix0jeouvfojk0bvdshtfbc4ju1rswocc6dk8fybsenxekqqf.png\" alt=\"The filtering resources dropdown highlighted in the Resources panel. The options are \u201cAll resources,\u201d \u201cImages,\u201d \u201cDocuments,\u201d and \u201cLottie.\u201d\" title=\"64b948e9c39b040c71971ea2_62d041f83ee778bf43a96cc1_pazy51huwcxiuhrj8qroj3wy4tuz0cxsdtgshhm_yx2u01s56z-5x-wiarjc6j2kswlb0vjrkeeje33_3ucmmk5vkczfeyoemzzy9nix0jeouvfojk0bvdshtfbc4ju1rswocc6dk8fybsenxekqqf\"><\/div>\n<\/figure>\n<h3>Process to sort resources<\/h3>\n<p>Initially, resources in the Resources panel are arranged from newest to oldest. You can sort resources by <strong>Newest first<\/strong>, <strong>Oldest first<\/strong>, or <strong>Alphabetical (A-Z or Z-A)<\/strong>. To sort resources:<\/p>\n<ol role=\"list\">\n<li>Access the <strong>Resources panel<\/strong><\/li>\n<li>Press the dropdown at the bottom left corner of the panel<\/li>\n<li>Select a sorting preference (e.g., <strong>Newest first<\/strong>, <strong>Oldest first<\/strong>, <strong>Alphabetical (A-Z)<\/strong>, or <strong>Alphabetical (Z-A)<\/strong>)<\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948e9c39b040c71971e9a_62d041f8330d3b3b4346e9de_dqbwuitmtauglfhfaz2slhd7hiqlfw51ixwehon_whngarh1smheehu912tllby1bwjmm_bbots1uzq9o5c0ffrwqturbwaxybcjxqj8v63znkcf1ljzkkp1elclgnc7h455km895rxo9irnen2vao.png\" alt=\"The sorting resources dropdown highlighted in the Resources panel. The options are \u201cNewest first,\u201d \u201cOldest first,\u201d \u201cAlphabetical (A-Z),\u201d and \u201cAlphabetical (Z-A).\u201d\" title=\"64b948e9c39b040c71971e9a_62d041f8330d3b3b4346e9de_dqbwuitmtauglfhfaz2slhd7hiqlfw51ixwehon_whngarh1smheehu912tllby1bwjmm_bbots1uzq9o5c0ffrwqturbwaxybcjxqj8v63znkcf1ljzkkp1elclgnc7h455km895rxo9irnen2vao\"><\/div>\n<\/figure>\n<h3>Process to modify the Resources panel presentation option<\/h3>\n<p>Initially, resources in the Assets panel are exhibited using the grid view. You can view resources in a <strong>Grid<\/strong>, <strong>List<\/strong>, or <strong>List &#8211; small<\/strong> option. To alter the view option:<\/p>\n<ol role=\"list\">\n<li>Launch the <strong>Resources panel<\/strong><\/li>\n<li>Press the \u201c<strong>grid<\/strong>\u201d icon at the bottom left corner of the panel<\/li>\n<li>Select a viewing option (e.g., <strong>Grid<\/strong>, <strong>List<\/strong>, or <strong>List &#8211; small<\/strong>)<\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948e9c39b040c71971ea7_62d041f880d6635511a59038_363ct9b0ks85-cagty9l2wol1acu2l0y0kop9kz4k_9gracmtknu71amm9ht42jl3u5bcfzl-_qfosuvvcfh14i-mqe69trx1eds76w5mgjiyvmo0zodmxjhdj7caphr4bu26mqyhxlwrja4plhsxl.png\" alt=\"The Resource panel view option dropdown highlighted in the Resources panel. The choices are \u201cGrid,\u201d \u201cList,\u201d and \u201cList - Small.\u201d\" title=\"64b948e9c39b040c71971ea7_62d041f880d6635511a59038_363ct9b0ks85-cagty9l2wol1acu2l0y0kop9kz4k_9gracmtknu71amm9ht42jl3u5bcfzl-_qfosuvvcfh14i-mqe69trx1eds76w5mgjiyvmo0zodmxjhdj7caphr4bu26mqyhxlwrja4plhsxl\"><\/div>\n<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Upload and manage all your website\u2019s assets in the Webflow Designer.","protected":false},"author":2,"featured_media":5880,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[290],"tags":[],"class_list":{"0":"post-5879","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5879","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5879"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5879\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5880"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5879"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5879"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5879"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}