Webflow for innovators

The initial steps with a Webflow template may appear slightly overwhelming at first, but we’ve addressed the fundamentals so you can start — from acquiring and personalizing your template, to launching your inventive content for the world to view.

During this module you’ll understand:

1. How to procure your template
2. How to modify your site in the Webflow Designer
3. How to manage a blog
4. How to include or eliminate elements from your site
5. How to publish your site
6. How to link a custom domain to your site
7. How to configure Google Analytics
8. How to obtain assistance with your template

How to procure your template

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.

Important: Upon acquiring your template, you can insert a promotional code (if you possess one) by selecting Add promotion code in the checkout modal, inputting the promotional code in the text box, then pressing Apply.

To pick and acquire your innovator template:

1. Visit Webflow’s Template marketplace to locate a top-tier template you wish to utilize for your site (e.g., Links X template, Links App template, Socialite’s Social template)
2. Press Purchase on the template’s main page (you’ll 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’re logged out)
3. Enter your payment details into the checkout modal (or click “Modify credit card” to update your payment details if you’ve previously added them)
4. Click on the Pay now button to finalize your purchase
5. Tap Continue after verifying your payment confirmation
6. Name your new site and hit Create site to unveil your newly procured template in the Webflow Designer

Important: You can locate template acquisition invoices in Workspace settings > Templates tab > Purchased templates. Click Download invoice to acquire the invoice for a particular template you’ve purchased.

Later on, you will be able to access your template-based site from your Webflow Dashboard.

How to tailor your site in the Webflow Designer

Once you’ve acquired your template, you can begin personalizing it to suit your style. 

Your template might have launched directly in the Webflow Designer, or you may opt to start your site from your Webflow Dashboard. Both options lead you to the same location — the Designer — where all your personalized design enchantment occurs!  

Prior to commencing customizing your template, you can acquaint yourself with the various panels in the Designer, alongside the Webflow canvas itself: 

• Pages panel
• Narrator panel
• Resources panel
• Style panel
• Canvas

These panels grant you access to your pages (Pages panel), the hierarchical arrangement of the elements in your pages (Narrator panel), an outline of assets you’ve integrated into your site (Resources panel), and the capability to fine-tune the style of the elements on your pages (Style panel). The canvas is the arena where you can interact with the elements in your site. 

You can also preview your design in your browser prior to publishing it by tapping the “eye” icon in the top left corner of the Designer. 

It’s advisable to routinely check diverse breakpoint views of your site’s design, to guarantee that your website is responsive across various devices. Learn more about breakpoints.

In addition to the details we’ve incorporated in this module, the template creator may have furnished a “Start Here” 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’ve purchased. 

If you’re utilizing Webflow’s Introductory site plan, you’ll be able to modify all the pages within your template, but you won’t be able to append additional pages or replicate a page without first enhancing to a paid Workspace plan or paid site plan.

Important: Before embarking on alterations to your site, it’s wise to back up your site and produce manual backups (besides Webflow’s auto-backups) before carrying out any substantial changes to your site.

Lets go through how you can utilize the Designer to:

• Alter text
• Adjust colors
• Personalize backgrounds
• Substitute images
• Renew links
• Collect site visitor data
• Modify SEO configurations

Important: If you come across an element that’s 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.

Alter text

To modify text in your template, double-click a text element or choose it and press Enter/Return. Then, select the placeholder text and substitute it with your own content.

You can also alter your text’s font, weight, color, etc. Typography style attributes are situated under the Typography category of the Style panel. 

Useful tip: If you wish to promptly alter your text’s style throughout your entire site, you can choose the Body (All pages) tag and modify the text’s font type, font size, and line height. Learn more about typography.

Connected reading:

• Typography color contrast

Adjust colors

If your template’s 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).

Personalize backgrounds 

Certain elements utilize a background color, image, or gradient to introduce visual interest. 

Establishing the background on an element furnishes you control over the appearance and legibility. In the Style panel > Backgrounds, you can include a background image, gradient, or color to most elements (besides media elements like video and image). Learn how to tweak backgroundstyles.

Additional resources:

• Webflow’s color selector
• Font color variation

Substitute pictures

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.

Further reading:

• Incorporating alt text for your images
• Different file formats for images
• Optimizing image quality

Revise hyperlinks

It’s 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 Settings panel > Link settings and make the necessary adjustments. Learn about setting a hyperlink and tweaking its configurations.

Further reading:

• Anchor text
• Link sections

Valuable tip: You also have the option to embed videos from external platforms like YouTube or Vimeo. Learn about utilizing Webflow’s video component.

Gather visitor details

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.

You can collect this data directly in your Site settings, or utilize third-party services such as MailChimp or Zapier to manage form submissions. Explore how to handle form submissions and notifications.

Adjust SEO configurations

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’s settings. Dive deeper into SEO with our SEO fundamentals guide.

To access SEO configurations and Open Graphsettings:

1. Access the Pages panel
2. Click the cog icon next to the desired page for updates
3. Edit information in SEO configurations or Open Graph configurations

Operating a blog

If your template includes a built-in blog, you can efficiently craft new posts showcasing your unique content using Webflow’s built-in content management system (CMS). 

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.

Webflow’s visual CMS empowers you to shape structured content, creatively design around that content, and manage it all — without requiring code alterations. Explore more about the Webflow CMS and handling individual Collection items.

You can distinguish dynamic CMS elements by their purple outlines or by selecting the element and checking the Style panel. If a Dynamic style settings segment is visible, the element is a dynamic CMS element.

Let’s review the process of:

• Personalizing your individual posts
• Incorporating and removing blog entries and categories
• Preserving a blog post draft
• Scheduling a blog post

Personalizing your individual posts

You can tailor a blog post within the Webflow CMS. A CMS in a template site generally comprises 2 (or more) CMS Collections with sample content (e.g., a “Blog posts” Collection and a “Categories” Collection). You can replace the sample content with your own data.

A Collection is a compilation of similar items. For example, you might have a Collection named “Blog posts.” The “Blog posts” Collection encompasses individual Collection items — individual blog posts.

Each Collection item (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’s main image, the blog post’s category, etc.

To update the sample content with your specific input: 

1. Click the CMS icon in the Designer toolbar to open the CMS panel
2. Select the desired Collection (e.g., “Blog posts”)
3. Pick a Collection item (e.g., one of the sample blog posts)
4. Fill in the fields with your information

Subsequently, you can:

• Save your changes
• Use the dropdown menu to Publish your individual blog post immediately (omitting the need for a global publish)
• Employ the dropdown menu to Save as Draft if you’re not prepared to publish the post yet. 

Repeat the above steps for any other Collection item you wish to update. The modifications you make will automatically reflect on the canvas (unless you’ve kept your post as a draft, which hides it from public view on your site). Discover more about updating Collection items.

Important: Ensure to update the URL slug if you change the blog post’s title. 

Incorporating and removing blog entries and categories

To append a Collection item (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.

You have the option to erase multiple Collection items at once or delete individual Collection items. 

To remove a single Collection item:

1. Access the CMS icon in the Designer toolbar to open the CMS panel
2. Select the desired Collection (e.g., “Blog posts”)
3. Pick a Collection item (e.g., a blog post)
4. Scroll to the bottom and select Delete
5. Confirm by clicking Delete again

Preserve a draft of a blog post

Instead of directly publishing a blog post on your site, you can securely retain it as a draft initially.

You can amend draft items multiple times and continue saving them as drafts until you’re ready for publication. Once finalized, the article can be prepared for publishing or published on your site. Explore how to manage draft items.

Schedule a blog post

Scheduled publishing enables you to plan content releases beforehand and automatically push them live at the designated time. This feature is exclusively available on Hosted CMS, Business, and Ecommerce site plans.

Learn how to schedule your blog entries.

How to append or eliminate elements from your site

You’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.

Valuable tip: 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. 

Let’s guide you through:

• Incorporating elements into your site
• Eliminating elements from your site

Note: It’s advisable to makeCreate a backup before implementing any major alterations to your website.

Include components in your website

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:

1. Choose the element you want to duplicate (e.g., a link)
2. Copy the element using Command + C (on Mac) or Control + C (on Windows)
3. Paste the copied element using Command + V (on Mac) or Control + V (on Windows)

You can also undo the paste action by hitting Command + Z (on Mac) or Control + Z (on Windows).

Eliminate components from your website

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:

1. Select the element you want to remove (ensure you’ve selected all its associated components to avoid leaving any elements behind post-deletion)
2. Press the Delete key on your keyboard

You can also undo the delete action by hitting Command + Z (on Mac) or Control + Z (on Windows).

Steps to publish your website

While customizing your design, you can publish your website to Webflow’s native domain for free (e.g., “www.myamazingplants.webflow.io“) to preview how your site appears on the web. Learn how to publish your website.

Guide on linking a personal domain to your website

Although you can always publish your website to Webflow’s default domain for free (e.g., myamazingplants.webflow.io), you also have the opportunity to connect your custom domain to your website and publish it there instead (e.g., myamazingplants.com).

We will explain how you can:

• Obtain a site plan for your new website
• Link your custom domain to your website

Obtain a site plan for your website

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.

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.

Discover how to apply a promo code for your site plan purchase.

Link your custom domain to your website

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.

Process for adding Google Analytics

You’ve developed an awesome website. Now, it’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’s traffic sources, allowing you to drill down to specific locations like cities. Learn how to configure Google Analytics for your website.

Obtaining assistance for your template

If you’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.

Celebrate your achievement in creating a unique and engaging website, and share your creative content with the world!