{"id":4536,"date":"2024-04-15T00:31:18","date_gmt":"2024-04-14T16:31:18","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4536"},"modified":"2024-04-15T00:31:18","modified_gmt":"2024-04-14T16:31:18","slug":"webflow-for-innovators","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/webflow-for-innovators\/","title":{"rendered":"Webflow for innovators"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b949da4109332189fe5657_610da29986ab2632b1206e89_3qlxbia2wgj_rwrjn3eckekfrasvhcnta0drvmlh02zt1_sbx34ld5lcvk9uy5zrl2o-bzr0fi0kbiiuzra24dm_s7r0ufozncphbxg50dwbqqsqjmd1esywkjzsazvjubormtcv.png\" alt=\"A personalized Webflow template for innovators showcases a profile picture, a bio, and links to the innovator\u2019s store, website, social media, and conferences.\u00a0\" title=\"64b949da4109332189fe5657_610da29986ab2632b1206e89_3qlxbia2wgj_rwrjn3eckekfrasvhcnta0drvmlh02zt1_sbx34ld5lcvk9uy5zrl2o-bzr0fi0kbiiuzra24dm_s7r0ufozncphbxg50dwbqqsqjmd1esywkjzsazvjubormtcv\"><\/div>\n<\/figure>\n<p>The initial steps with a Webflow template may appear slightly overwhelming at first, but we\u2019ve addressed the fundamentals so you can start \u2014 from acquiring and personalizing your template, to launching your inventive content for the world to view.<\/p>\n<p>During this module you\u2019ll understand:<\/p>\n<ol role=\"list\">\n<li>How to procure your template<\/li>\n<li>How to modify your site in the Webflow Designer<\/li>\n<li>How to manage a blog<\/li>\n<li>How to include or eliminate elements from your site<\/li>\n<li>How to publish your site<\/li>\n<li>How to link a custom domain to your site<\/li>\n<li>How to configure Google Analytics<\/li>\n<li>How to obtain assistance with your template<\/li>\n<\/ol>\n<h2>How to procure your template<\/h2>\n<p>Prior to commencing the design, you must procure your template and establish a site from it in your Webflow Dashboard. You can acquire your innovator template to utilize for just one individual, business, or site.<\/p>\n<h6><strong>Important:<\/strong> Upon acquiring your template, you can insert a promotional code (if you possess one) by selecting <strong>Add promotion code<\/strong> in the checkout modal, inputting the promotional code in the text box, then pressing <strong>Apply<\/strong>.<\/h6>\n<p>To pick and acquire your innovator template:<\/p>\n<ol role=\"list\">\n<li>Visit <a href=\"https:\/\/webflow.com\/templates\">Webflow\u2019s Template marketplace<\/a> to locate a top-tier template you wish to utilize for your site (e.g., <a href=\"https:\/\/webflow.com\/templates\/html\/links-x-app-website-template\">Links X template<\/a>, <a href=\"https:\/\/webflow.com\/templates\/html\/links-app-website-template\">Links App template<\/a>, <a href=\"https:\/\/webflow.com\/templates\/html\/socialites-social-website-template\">Socialite&#8217;s Social template<\/a>)<\/li>\n<li>Press <strong>Purchase<\/strong> on the template&#8217;s main page (you\u2019ll be asked to register for a complimentary Webflow account if you are not already registered or you can log into your existing account if you\u2019re logged out)<\/li>\n<li>Enter your payment details into the checkout modal (or click &#8220;<strong>Modify credit card<\/strong>&#8221; to update your payment details if you\u2019ve previously added them)<\/li>\n<li>Click on the <strong>Pay now<\/strong> button to finalize your purchase<\/li>\n<li>Tap <strong>Continue<\/strong> after verifying your payment confirmation<\/li>\n<li>Name your new site and hit <strong>Create site<\/strong> to unveil your newly procured template in the Webflow Designer<\/li>\n<\/ol>\n<h6><strong>Important:<\/strong> You can locate template acquisition invoices in <strong>Workspace settings<\/strong> &gt; <strong>Templates<\/strong> tab &gt; <strong>Purchased templates<\/strong>. Click <strong>Download invoice<\/strong> to acquire the invoice for a particular template you\u2019ve purchased.<\/h6>\n<p>Later on, you will be able to access your template-based site from your Webflow Dashboard.<\/p>\n<h2>How to tailor your site in the Webflow Designer<\/h2>\n<p>Once you\u2019ve acquired your template, you can begin personalizing it to suit your style.\u00a0<\/p>\n<p>Your template might have launched directly in the <strong>Webflow Designer<\/strong>, or you may opt to start your site from your Webflow Dashboard. Both options lead you to the same location \u2014 the Designer \u2014 where all your personalized design enchantment occurs!\u00a0\u00a0<\/p>\n<p>Prior to commencing customizing your template, you can acquaint yourself with the various panels in the <strong>Designer<\/strong>, alongside the <strong>Webflow canvas<\/strong> itself:\u00a0<\/p>\n<ul role=\"list\">\n<li>Pages panel<\/li>\n<li>Narrator panel<\/li>\n<li>Resources panel<\/li>\n<li>Style panel<\/li>\n<li>Canvas<\/li>\n<\/ul>\n<p>These panels grant you access to your pages (<strong>Pages panel<\/strong>), the hierarchical arrangement of the elements in your pages (<strong>Narrator panel<\/strong>), an outline of assets you\u2019ve integrated into your site (<strong>Resources panel<\/strong>), and the capability to fine-tune the style of the elements on your pages (<strong>Style panel<\/strong>). The <strong>canvas<\/strong> is the arena where you can interact with the elements in your site.\u00a0<\/p>\n<p>You can also preview your design in your browser prior to publishing it by tapping the &#8220;eye&#8221; icon in the top left corner of the <strong>Designer<\/strong>.\u00a0<\/p>\n<p>It\u2019s advisable to routinely check diverse breakpoint views of your site\u2019s design, to guarantee that your website is responsive across various devices. Learn more about breakpoints.<\/p>\n<p>In addition to the details we\u2019ve incorporated in this module, the template creator may have furnished a \u201cStart Here\u201d guide as one of the pages in the template. If such a guide exists within your site, you can utilize it to grasp tips and techniques specific to the template you\u2019ve purchased.\u00a0<\/p>\n<p>If you\u2019re utilizing Webflow\u2019s Introductory site plan, you\u2019ll be able to modify all the pages within your template, but you won\u2019t be able to append additional pages or replicate a page without first enhancing to a paid <a href=\"https:\/\/webflow.com\/pricing#workspace-plans\">Workspace plan<\/a> or paid <a href=\"https:\/\/webflow.com\/pricing#site-plans\">site plan<\/a>.<\/p>\n<h6><strong>Important:<\/strong> Before embarking on alterations to your site, it\u2019s wise to back up your site and produce manual backups (besides Webflow\u2019s auto-backups) before carrying out any substantial changes to your site.<\/h6>\n<p>Lets go through how you can utilize the <strong>Designer<\/strong> to:<\/p>\n<ul role=\"list\">\n<li>Alter text<\/li>\n<li>Adjust colors<\/li>\n<li>Personalize backgrounds<\/li>\n<li>Substitute images<\/li>\n<li>Renew links<\/li>\n<li>Collect site visitor data<\/li>\n<li>Modify SEO configurations<\/li>\n<\/ul>\n<h6><strong>Important:<\/strong> If you come across an element that\u2019s also a Symbol, double-click it to modify the elements within the Symbol. Symbols are reusable components that can be utilized in numerous instances across your entire site (e.g., you can possess the same contact form on numerous different pages). Each time you revise one instance of the Symbol, it updates in all other locations. Read more about Symbols.<\/h6>\n<h3>Alter text<\/h3>\n<p>To modify text in your template, double-click a text element or choose it and press <strong>Enter\/Return<\/strong>. Then, select the placeholder text and substitute it with your own content.<\/p>\n<p>You can also alter your text\u2019s font, weight, color, etc. Typography style attributes are situated under the <strong>Typography<\/strong> category of the <strong>Style panel<\/strong>.\u00a0<\/p>\n<h6><strong>Useful tip:<\/strong> If you wish to promptly alter your text\u2019s style throughout your entire site, you can choose the Body (All pages) tag and modify the text\u2019s font type, font size, and line height. Learn more about typography.<\/h6>\n<p><strong>Connected reading:<\/strong><\/p>\n<ul role=\"list\">\n<li>Typography color contrast<\/li>\n<\/ul>\n<h3>Adjust colors<\/h3>\n<p>If your template\u2019s color scheme encompasses color variables, you can effortlessly modify a color variable to update it across the site (e.g., transforming a red color variable to purple alters all red colored elements to purple).<\/p>\n<h3>Personalize backgrounds\u00a0<\/h3>\n<p>Certain elements utilize a background color, image, or gradient to introduce visual interest.\u00a0<\/p>\n<p>Establishing the background on an element furnishes you control over the appearance and legibility. In the <strong>Style panel <\/strong>&gt;<strong> Backgrounds<\/strong>, you can include a background image, gradient, or color to most elements (besides media elements like video and image). Learn how to tweak backgroundstyles.<\/p>\n<p><strong>Additional resources:<\/strong><\/p>\n<ul role=\"list\">\n<li>Webflow\u2019s color selector<\/li>\n<li>Font color variation<\/li>\n<\/ul>\n<h3>Substitute pictures<\/h3>\n<p>You have the option to swap out placeholder images in your design with alternative images that you upload yourself. You can upload images and access previously uploaded images through the Assets panel. Discover how to replace images.<\/p>\n<p><strong>Further reading:<\/strong><\/p>\n<ul role=\"list\">\n<li>Incorporating alt text for your images<\/li>\n<li>Different file formats for images<\/li>\n<li>Optimizing image quality<\/li>\n<\/ul>\n<h3>Revise hyperlinks<\/h3>\n<p>It\u2019s also important to update any hyperlinks in your selected design. To swiftly modify a hyperlink, select the element containing the hyperlink, then navigate to the <strong>Settings panel <\/strong>&gt; <strong>Link settings<\/strong> and make the necessary adjustments. Learn about setting a hyperlink and tweaking its configurations.<\/p>\n<p><strong>Further reading:<\/strong><\/p>\n<ul role=\"list\">\n<li>Anchor text<\/li>\n<li>Link sections<\/li>\n<\/ul>\n<h6><strong>Valuable tip:<\/strong> You also have the option to embed videos from external platforms like YouTube or Vimeo. Learn about utilizing Webflow\u2019s video component.<\/h6>\n<h3>Gather visitor details<\/h3>\n<p>To collect information from site visitors (e.g., newsletter sign-ups, etc.) or to allow visitors to send messages via a contact form, you can configure your form to accurately gather this information and forward it to you.<\/p>\n<p>You can collect this data directly in your <strong>Site settings<\/strong>, or utilize third-party services such as MailChimp or Zapier to manage form submissions. Explore how to handle form submissions and notifications.<\/p>\n<h3>Adjust SEO configurations<\/h3>\n<p>To customize the title, image, or description displayed when your site is shared or searched, you can modify SEO settings and Open Graph settings within your page\u2019s settings. Dive deeper into SEO with our SEO fundamentals guide.<\/p>\n<p>To access <strong>SEO configurations<\/strong> and <strong>Open Graph<\/strong><strong>settings<\/strong>:<\/p>\n<ol role=\"list\">\n<li>Access the <strong>Pages panel<\/strong><\/li>\n<li>Click the cog icon next to the desired page for updates<\/li>\n<li>Edit information in <strong>SEO configurations <\/strong>or <strong>Open Graph configurations<\/strong><\/li>\n<\/ol>\n<h2>Operating a blog<\/h2>\n<p>If your template includes a built-in blog, you can efficiently craft new posts showcasing your unique content using Webflow&#8217;s built-in content management system (CMS).\u00a0<\/p>\n<p>A CMS is the repository for dynamic content. Your website references this dynamic content on various pages, ensuring that any modifications to this content in the CMS automatically update across all relevant pages.<\/p>\n<p>Webflow&#8217;s visual CMS empowers you to shape structured content, creatively design around that content, and manage it all \u2014 without requiring code alterations. Explore more about the Webflow CMS and handling individual Collection items.<\/p>\n<p>You can distinguish dynamic CMS elements by their purple outlines or by selecting the element and checking the <strong>Style panel<\/strong>. If a <strong>Dynamic style settings<\/strong> segment is visible, the element is a dynamic CMS element.<\/p>\n<p>Let\u2019s review the process of:<\/p>\n<ul role=\"list\">\n<li>Personalizing your individual posts<\/li>\n<li>Incorporating and removing blog entries and categories<\/li>\n<li>Preserving a blog post draft<\/li>\n<li>Scheduling a blog post<\/li>\n<\/ul>\n<h3>Personalizing your individual posts<\/h3>\n<p>You can tailor a blog post within the Webflow CMS. A CMS in a template site generally comprises 2 (or more) CMS <strong>Collections<\/strong> with sample content (e.g., a \u201cBlog posts\u201d Collection and a \u201cCategories\u201d Collection). You can replace the sample content with your own data.<\/p>\n<p>A <strong>Collection<\/strong> is a compilation of similar items. For example, you might have a Collection named \u201cBlog posts.\u201d The \u201cBlog posts\u201d <strong>Collection<\/strong> encompasses individual <strong>Collection items<\/strong> \u2014 individual blog posts.<\/p>\n<p>Each <strong>Collection item<\/strong> (e.g., each blog post) contains fields for your content. For instance, you can insert a blog post title, the blog post content, the blog post&#8217;s main image, the blog post&#8217;s category, etc.<\/p>\n<p>To update the sample content with your specific input:\u00a0<\/p>\n<ol role=\"list\">\n<li>Click the <strong>CMS<\/strong> icon in the Designer toolbar to open the <strong>CMS panel<\/strong><\/li>\n<li>Select the desired <strong>Collection<\/strong> (e.g., \u201cBlog posts\u201d)<\/li>\n<li>Pick a <strong>Collection item<\/strong> (e.g., one of the sample blog posts)<\/li>\n<li>Fill in the fields with your information<\/li>\n<\/ol>\n<p>Subsequently, you can:<\/p>\n<ul role=\"list\">\n<li><strong>Save<\/strong> your changes<\/li>\n<li>Use the dropdown menu to <strong>Publish<\/strong> your individual blog post immediately (omitting the need for a global publish)<\/li>\n<li>Employ the dropdown menu to <strong>Save as Draft<\/strong> if you&#8217;re not prepared to publish the post yet.\u00a0<\/li>\n<\/ul>\n<p>Repeat the above steps for any other <strong>Collection item<\/strong> you wish to update. The modifications you make will automatically reflect on the canvas (unless you&#8217;ve kept your post as a draft, which hides it from public view on your site). Discover more about updating Collection items.<\/p>\n<blockquote><p><strong>Important:<\/strong> Ensure to update the URL slug if you change the blog post&#8217;s title.\u00a0<\/p><\/blockquote>\n<h3>Incorporating and removing blog entries and categories<\/h3>\n<p>To append a <strong>Collection item<\/strong> (e.g., a blog post or a blog category), you can create new items manually, import items from a CSV file, or link them through the CMS API using Zapier or webhooks. Learn how to create additional Collection items.<\/p>\n<p>You have the option to erase multiple Collection items at once or delete individual Collection items.\u00a0<\/p>\n<p>To remove a single <strong>Collection item<\/strong>:<\/p>\n<ol role=\"list\">\n<li>Access the <strong>CMS<\/strong> icon in the Designer toolbar to open the <strong>CMS panel<\/strong><\/li>\n<li>Select the desired <strong>Collection<\/strong> (e.g., \u201cBlog posts\u201d)<\/li>\n<li>Pick a <strong>Collection item<\/strong> (e.g., a blog post)<\/li>\n<li>Scroll to the bottom and select <strong>Delete<\/strong><\/li>\n<li>Confirm by clicking <strong>Delete<\/strong> again<\/li>\n<\/ol>\n<h3>Preserve a draft of a blog post<\/h3>\n<p>Instead of directly publishing a blog post on your site, you can securely retain it as a draft initially.<\/p>\n<p>You can amend draft items multiple times and continue saving them as drafts until you&#8217;re ready for publication. Once finalized, the article can be <strong>prepared for publishing<\/strong> or <strong>published <\/strong>on your site. Explore how to manage draft items.<\/p>\n<h3>Schedule a blog post<\/h3>\n<p>Scheduled publishing enables you to plan content releases beforehand and automatically push them live at the designated time. This feature is exclusively available on <a href=\"https:\/\/webflow.com\/pricing#site-plans\">Hosted CMS, Business, and Ecommerce site plans<\/a>.<\/p>\n<p>Learn how to schedule your blog entries.<\/p>\n<h2>How to append or eliminate elements from your site<\/h2>\n<p>You&#8217;ve selected your desired template for customization, but you may desire to include a fresh image on the homepage or feature a new hyperlink in your list of links. Alternatively, you may not require a Twitter link or a product store and prefer to eliminate these elements from your layout. You have the flexibility to add or remove elements from your site to perfectly tailor your content.<\/p>\n<h6><strong>Valuable tip:<\/strong> For managing blog posts, a slightly different approach is necessary as blog posts are controlled by the Webflow CMS. Refer to the blog-specific instructions on working with a blog.\u00a0<\/h6>\n<p>Let\u2019s guide you through:<\/p>\n<ul role=\"list\">\n<li>Incorporating elements into your site<\/li>\n<li>Eliminating elements from your site<\/li>\n<\/ul>\n<h6><strong>Note:<\/strong> It&#8217;s advisable to makeCreate a backup before implementing any major alterations to your website.<\/h6>\n<h3>Include components in your website<\/h3>\n<p>You have the option to integrate elements and parts in your website. For example, if you wish to insert a new link, you can duplicate an existing link by copying and pasting it directly onto your site:<\/p>\n<ol role=\"list\">\n<li><strong>Choose<\/strong> the element you want to duplicate (e.g., a link)<\/li>\n<li>Copy the element using <strong>Command <\/strong>+<strong> C<\/strong> (on Mac) or <strong>Control <\/strong>+<strong> C<\/strong> (on Windows)<\/li>\n<li>Paste the copied element using <strong>Command <\/strong>+<strong> V<\/strong> (on Mac) or <strong>Control <\/strong>+<strong> V <\/strong>(on Windows)<\/li>\n<\/ol>\n<p>You can also undo the paste action by hitting <strong>Command <\/strong>+<strong> Z<\/strong> (on Mac) or <strong>Control <\/strong>+<strong> Z<\/strong> (on Windows).<\/p>\n<h3>Eliminate components from your website<\/h3>\n<p>You can also eradicate elements from your website. For instance, if you do not utilize a specific social media platform and wish to delete its link, follow these steps to remove an element:<\/p>\n<ol role=\"list\">\n<li>Select the element you want to remove (ensure you&#8217;ve selected all its associated components to avoid leaving any elements behind post-deletion)<\/li>\n<li>Press the <strong>Delete<\/strong> key on your keyboard<\/li>\n<\/ol>\n<p>You can also undo the delete action by hitting <strong>Command <\/strong>+<strong> Z<\/strong> (on Mac) or <strong>Control <\/strong>+<strong> Z<\/strong> (on Windows).<\/p>\n<h2>Steps to publish your website<\/h2>\n<p>While customizing your design, you can publish your website to Webflow&#8217;s native domain for free (e.g., &#8220;www.myamazingplants.<strong>webflow.io<\/strong>&#8220;) to preview how your site appears on the web. Learn how to publish your website.<\/p>\n<h2>Guide on linking a personal domain to your website<\/h2>\n<p>Although you can always publish your website to Webflow&#8217;s default domain for free (e.g., myamazingplants.<strong>webflow.io<\/strong>), you also have the opportunity to connect your custom domain to your website and publish it there instead (e.g., myamazingplants.<strong>com<\/strong>).<\/p>\n<p>We will explain how you can:<\/p>\n<ul role=\"list\">\n<li>Obtain a site plan for your new website<\/li>\n<li>Link your custom domain to your website<\/li>\n<\/ul>\n<h3>Obtain a site plan for your website<\/h3>\n<p>If you want to use a custom domain with your website or establish a more comprehensive blog, you can purchase a site plan for your website. Learn how to manage your site plans.<\/p>\n<p>If your template utilizes the Webflow CMS (e.g., for a blog), you cannot purchase a Basic site plan until the CMS is removed from your website. This action may affect parts of the template design, so make sure to back up your website before eliminating the CMS.<\/p>\n<p>Discover how to apply a promo code for your site plan purchase.<\/p>\n<h3>Link your custom domain to your website<\/h3>\n<p>Once you have acquired a site plan for your website, you can publish your website to any custom domain you own (e.g., myamazingplants.com). Learn how to connect your custom domain.<\/p>\n<h2>Process for adding Google Analytics<\/h2>\n<p>You&#8217;ve developed an awesome website. Now, it&#8217;s time to set up Google Analytics to monitor essential metrics such as user count, pageviews, user session durations, and bounce rates. Google Analytics also provides insights into your website&#8217;s traffic sources, allowing you to drill down to specific locations like cities. Learn how to configure Google Analytics for your website.<\/p>\n<h2>Obtaining assistance for your template<\/h2>\n<p>If you&#8217;re new to Webflow and find templates with numerous interactions, customized menus, and popup modals challenging to customize, you can seek assistance from the template designer. Additionally, many template designers include support documentation within their templates.<\/p>\n<p>Celebrate your achievement in creating a unique and engaging website, and share your creative content with the world!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Customize your creator template and publish your creative content.","protected":false},"author":2,"featured_media":5288,"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":[284],"tags":[],"class_list":{"0":"post-4536","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4536","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=4536"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4536\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5158"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}