{"id":37,"date":"2023-06-16T12:11:19","date_gmt":"2023-06-16T12:11:19","guid":{"rendered":"https:\/\/theplus.so\/blog\/?p=37"},"modified":"2023-06-16T12:11:19","modified_gmt":"2023-06-16T12:11:19","slug":"clickable-image","status":"publish","type":"post","link":"https:\/\/theplus.so\/blog\/clickable-image\/","title":{"rendered":"&#x1f5bc;&#x2196; How to Make Clickable Images in Your Notion Template?"},"content":{"rendered":"\n<p>When you add an image to your Notion template, you cannot link to that image. <strong>Clicking <\/strong>on the image enlarges the image. But there is no link to the image. So how do you give a link to the image? How to redirect people to the link you want when they click on the image?<\/p>\n\n\n\n<!--more-->\n\n\n\n<ol class=\"wp-block-list\">\n<li>First, open the widget creation page in Notion Plus.<\/li>\n\n\n\n<li>Click the &#8220;<strong>Image<\/strong>&#8221; button on the &#8220;<strong>Add Widget<\/strong>&#8221; page.<\/li>\n\n\n\n<li>First, give a name to &#8220;<strong>Name<\/strong>&#8220;.<\/li>\n\n\n\n<li>You can paste an image link, such as <strong>.png, .jpg, or .gif<\/strong>, into the &#8220;<strong>Image Source Link<\/strong>&#8220;.<\/li>\n\n\n\n<li>The most crucial part is in the &#8220;<strong>Image Link<\/strong>&#8220;, write the link to go when the image is clicked.<\/li>\n\n\n\n<li>Create your widget by clicking the &#8220;<strong>Add Image<\/strong>&#8221; button at the bottom.<\/li>\n\n\n\n<li>Copy and paste the <strong>embed link<\/strong> of the newly added widget into your Notion template.<\/li>\n<\/ol>\n\n\n\n<p>Yes, it&#8217;s a pretty simple process. In this way, a <strong>clickable link<\/strong> can be given to the images.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Make Clickable Images in Your Notion Template? (Notion Widgets)\" width=\"660\" height=\"371\" data-src=\"https:\/\/www.youtube.com\/embed\/hyvhJJPrnGo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">What Can I Do With Clickable Images?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Banner<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/ugurkilci.com\/projects\/socialmediaplanner\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"472\" data-src=\"https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-social-media-planner-1024x472.jpg\" alt=\"\" class=\"wp-image-40 lazyload\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/472;width:660px;height:304px\" data-srcset=\"https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-social-media-planner-1024x472.jpg 1024w, https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-social-media-planner-300x138.jpg 300w, https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-social-media-planner-768x354.jpg 768w, https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-social-media-planner.jpg 1366w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>You can add a banner to your <strong>Notion template<\/strong>. In this way, you can have advertising space. The appealing aspect of this lies in Notion&#8217;s structure. Templates created with Notion maintain their relevance over time, remaining evergreen. Once your Notion template is duplicated, any edits made to the original template do not automatically update the duplicated version.<\/p>\n\n\n\n<p>You can make editable banners with Notion Plus Image. You can also update the banner in the future.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Measure Click<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"1000\" height=\"667\" data-src=\"https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/short-link.jpg\" alt=\"\" class=\"wp-image-41 lazyload\" style=\"--smush-placeholder-width: 1000px; --smush-placeholder-aspect-ratio: 1000\/667;width:446px;height:297px\" data-srcset=\"https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/short-link.jpg 1000w, https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/short-link-300x200.jpg 300w, https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/short-link-768x512.jpg 768w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/figure>\n<\/div>\n\n\n<p>Use a link shortener from a link shortener site to measure how much engagement the banner or image gets. This way you can measure clicks. You can measure the effect of the picture used. You made an image with a red background and if it&#8217;s less <strong>clickable<\/strong>, update the image. Measure the link again. You can do <strong>A\/B testing<\/strong>. You can detect your highest interaction rate and use this <strong>strategy <\/strong>in your new templates.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create Extreme Buttons<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/www.freepik.com\/search?query=button%20desings\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"1024\" data-src=\"https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-extreme-button-design-1024x1024.jpg\" alt=\"\" class=\"wp-image-39 lazyload\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/1024;width:289px;height:289px\" data-srcset=\"https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-extreme-button-design-1024x1024.jpg 1024w, https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-extreme-button-design-300x300.jpg 300w, https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-extreme-button-design-150x150.jpg 150w, https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-extreme-button-design-768x768.jpg 768w, https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-extreme-button-design-1536x1536.jpg 1536w, https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-extreme-button-design.jpg 2000w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>With tools like Photoshop and Illustrator, you can craft intricate buttons that would be challenging to create, and seamlessly integrate them into your product. Envision the creative possibilities that lie within your grasp.<\/p>\n\n\n\n<p>If you want to discover what can be done with this style of Notion Plus, by signing up for the <a href=\"http:\/\/notionplus.dev\/newsletter\" target=\"_blank\" rel=\"noreferrer noopener\">Notion Plus Newsletter<\/a>, I&#8217;m sending you tips on what you can do each week.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/notionplus.dev\/membership?sign=in&amp;continue=https:\/\/notionplus.dev\/dashboard\/add-widget?q=images\" target=\"_blank\" rel=\"noreferrer noopener\">Create an Image Widget Now!<\/a><\/h2>\n","protected":false},"excerpt":{"rendered":"<p>When you add an image to your Notion template, you cannot link to that image. The solution is in the article.<\/p>\n","protected":false},"author":1,"featured_media":42,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[25,49,52,58,59,62,64,70,71,72],"class_list":["post-37","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-notion-templates","tag-how-to-make-clickable-images-in-your-notion-template","tag-notion-image","tag-notion-image-click","tag-notion-planner","tag-notion-plus","tag-notion-template","tag-notion-templates","tag-notion-weekly-planner","tag-notion-widget","tag-notion-widget-tool"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>&#x1f5bc;&#x2196; How to Make Clickable Images in Your Notion Template?<\/title>\n<meta name=\"description\" content=\"When you add an image to your Notion template, you cannot link to that image. The solution is in the article.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/theplus.so\/blog\/clickable-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"&#x1f5bc;&#x2196; How to Make Clickable Images in Your Notion Template?\" \/>\n<meta property=\"og:description\" content=\"When you add an image to your Notion template, you cannot link to that image. The solution is in the article.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/theplus.so\/blog\/clickable-image\/\" \/>\n<meta property=\"og:site_name\" content=\"Notion Widgets, thePlus.so Blog (NotionPlus)\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-16T12:11:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-clickable-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ugurkilci\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"&#x1f5bc;&#x2196; How to Make Clickable Images in Your Notion Template?\" \/>\n<meta name=\"twitter:description\" content=\"When you add an image to your Notion template, you cannot link to that image. The solution is in the article.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-clickable-image.png\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ugurkilci\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/theplus.so\/blog\/clickable-image\/\",\"url\":\"https:\/\/theplus.so\/blog\/clickable-image\/\",\"name\":\"&#x1f5bc;&#x2196; How to Make Clickable Images in Your Notion Template?\",\"isPartOf\":{\"@id\":\"notionplus.dev\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/theplus.so\/blog\/clickable-image\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/theplus.so\/blog\/clickable-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-clickable-image.png\",\"datePublished\":\"2023-06-16T12:11:19+00:00\",\"author\":{\"@id\":\"notionplus.dev\/blog\/#\/schema\/person\/6235d04ff6ecd453b6492d417d448590\"},\"description\":\"When you add an image to your Notion template, you cannot link to that image. The solution is in the article.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/theplus.so\/blog\/clickable-image\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/theplus.so\/blog\/clickable-image\/#primaryimage\",\"url\":\"https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-clickable-image.png\",\"contentUrl\":\"https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-clickable-image.png\",\"width\":1280,\"height\":720,\"caption\":\"notion-clickable-image-notion-template\"},{\"@type\":\"WebSite\",\"@id\":\"notionplus.dev\/blog\/#website\",\"url\":\"notionplus.dev\/blog\/\",\"name\":\"Notion Widgets, thePlus.so Blog (NotionPlus)\",\"description\":\"Design more aesthetic Notion templates with Notion Widgets free!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"notionplus.dev\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"notionplus.dev\/blog\/#\/schema\/person\/6235d04ff6ecd453b6492d417d448590\",\"name\":\"ugurkilci\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"notionplus.dev\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/86d29cbd87e37b56f84d97dfd7a959243e80c0257d5ef81cd07f41571db7c21d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/86d29cbd87e37b56f84d97dfd7a959243e80c0257d5ef81cd07f41571db7c21d?s=96&d=mm&r=g\",\"caption\":\"ugurkilci\"},\"sameAs\":[\"https:\/\/theplus.so\/blog\"],\"url\":\"https:\/\/theplus.so\/blog\/author\/ugurkilci\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"&#x1f5bc;&#x2196; How to Make Clickable Images in Your Notion Template?","description":"When you add an image to your Notion template, you cannot link to that image. The solution is in the article.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/theplus.so\/blog\/clickable-image\/","og_locale":"en_US","og_type":"article","og_title":"&#x1f5bc;&#x2196; How to Make Clickable Images in Your Notion Template?","og_description":"When you add an image to your Notion template, you cannot link to that image. The solution is in the article.","og_url":"https:\/\/theplus.so\/blog\/clickable-image\/","og_site_name":"Notion Widgets, thePlus.so Blog (NotionPlus)","article_published_time":"2023-06-16T12:11:19+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-clickable-image.png","type":"image\/png"}],"author":"ugurkilci","twitter_card":"summary_large_image","twitter_title":"&#x1f5bc;&#x2196; How to Make Clickable Images in Your Notion Template?","twitter_description":"When you add an image to your Notion template, you cannot link to that image. The solution is in the article.","twitter_image":"https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-clickable-image.png","twitter_misc":{"Written by":"ugurkilci","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/theplus.so\/blog\/clickable-image\/","url":"https:\/\/theplus.so\/blog\/clickable-image\/","name":"&#x1f5bc;&#x2196; How to Make Clickable Images in Your Notion Template?","isPartOf":{"@id":"notionplus.dev\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/theplus.so\/blog\/clickable-image\/#primaryimage"},"image":{"@id":"https:\/\/theplus.so\/blog\/clickable-image\/#primaryimage"},"thumbnailUrl":"https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-clickable-image.png","datePublished":"2023-06-16T12:11:19+00:00","author":{"@id":"notionplus.dev\/blog\/#\/schema\/person\/6235d04ff6ecd453b6492d417d448590"},"description":"When you add an image to your Notion template, you cannot link to that image. The solution is in the article.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/theplus.so\/blog\/clickable-image\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/theplus.so\/blog\/clickable-image\/#primaryimage","url":"https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-clickable-image.png","contentUrl":"https:\/\/theplus.so\/blog\/wp-content\/uploads\/2023\/06\/notion-clickable-image.png","width":1280,"height":720,"caption":"notion-clickable-image-notion-template"},{"@type":"WebSite","@id":"notionplus.dev\/blog\/#website","url":"notionplus.dev\/blog\/","name":"Notion Widgets, thePlus.so Blog (NotionPlus)","description":"Design more aesthetic Notion templates with Notion Widgets free!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"notionplus.dev\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"notionplus.dev\/blog\/#\/schema\/person\/6235d04ff6ecd453b6492d417d448590","name":"ugurkilci","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"notionplus.dev\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/86d29cbd87e37b56f84d97dfd7a959243e80c0257d5ef81cd07f41571db7c21d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86d29cbd87e37b56f84d97dfd7a959243e80c0257d5ef81cd07f41571db7c21d?s=96&d=mm&r=g","caption":"ugurkilci"},"sameAs":["https:\/\/theplus.so\/blog"],"url":"https:\/\/theplus.so\/blog\/author\/ugurkilci\/"}]}},"_links":{"self":[{"href":"https:\/\/theplus.so\/blog\/wp-json\/wp\/v2\/posts\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theplus.so\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theplus.so\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theplus.so\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theplus.so\/blog\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":0,"href":"https:\/\/theplus.so\/blog\/wp-json\/wp\/v2\/posts\/37\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theplus.so\/blog\/wp-json\/wp\/v2\/media\/42"}],"wp:attachment":[{"href":"https:\/\/theplus.so\/blog\/wp-json\/wp\/v2\/media?parent=37"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theplus.so\/blog\/wp-json\/wp\/v2\/categories?post=37"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theplus.so\/blog\/wp-json\/wp\/v2\/tags?post=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}