Webflow for creators

Customize your creator template and publish your creative content.

This video features an old UI. Updated version coming soon!
A customizable Webflow template for creators displays a profile picture, a bio, and links to the creator’s store, website, social media, and conferences. 

Getting started with a Webflow template may seem a little daunting at first, but we’ve covered all the basics you need to know to get going — from purchasing your template and customizing it, to publishing your creative content for the whole world to see.  

In this lesson you’ll learn how to: 

  1. Purchase your template
  2. Customize your project in the Webflow Designer
  3. Work with a blog
  4. Add or remove elements from your project
  5. Publish your project
  6. Connect a custom domain to your project
  7. Set up Google Analytics
  8. Get help with your template

Purchase your template

Before you can start designing, you need to purchase your template and create a project from it in your Webflow Dashboard. You can purchase your creator template to use for only one person, business, or project.

To select and purchase your creator template:

  1. Go to Webflow's Template marketplace to find the premium template you'd like to use for your project (e.g., Links X template, Links App template, Socialite's Social template)
  2. Click Buy on the template's landing page (you’ll be prompted to sign up for a free Webflow account if you don’t already have one or can log into your existing account if you’re logged out)
  3. Type your payment information into the checkout modal (or click “Edit credit card” to update your payment information if you’ve added it previously)
  4. OPTIONAL: click Add promo code (if you have one) from the checkout modal
  5. Enter the promo code in the input field and click the Apply button to adjust your total due
  6. Press the Pay now button to complete your purchase 
  7. Press Continue after reviewing your payment confirmation
  8. Give your new project a name and press Create project to open your newly purchased template in the Webflow Designer
Note: You can find template purchase invoices within the Purchases tab of your account

Remember, after you’re done working on your design, you can always access your project in your Webflow Dashboard

Click “Add promo code” to open the promo code field in the template checkout modal. 
Type your promo code into the promo code field and press “Apply” to activate your discount.
Press “Continue” after reviewing your template payment confirmation.
Name your project and press “Create project” to open your template in the Designer.

Customize your project in the Webflow Designer

After you’ve purchased your template, you can start customizing it to make it your own. 

Your template may have opened up directly in the Webflow Designer, or you might prefer to open your project from your Webflow Dashboard. Either option will take you to the same place — the Designer — which is where all your custom design magic happens!  

Before you begin customizing the look of your template, you can familiarize yourself with the different panels in the Designer, as well as the Webflow canvas itself: 

These panels give you access to your pages (Pages panel), the hierarchical structure of the elements in your pages (Navigator panel), an overview of any assets added to your project (Assets panel), and the ability to adjust the style of the elements on your pages (Style panel). The Canvas is where you can interact with the elements in your project. 

You can also preview your design in your browser before you publish it by clicking the “eye” icon in the upper left corner of the Designer

Keep in mind that it’s a good idea to periodically check the tablet and mobile views of your design when making changes to your project. You can do this by switching between different breakpoints.

In addition to the information we’ve included in this lesson, the template designer may have provided a “Start Here” guide as one of the pages in your template. If one of these exists in your project, click on it to learn tips and tricks specific to the template you purchased. 

Open the Pages panel in your template to see if the template designer provided you with a “Start Here” guide. 
Note: Before you start making changes to your project, it’s a good idea to backup your project and make manual backups (in addition to Webflow’s auto-backups) before any big changes to your project as you adjust your design.

Let’s walk through how you can use the Designer to: 

Good to know: If you are using Webflow’s Free account plan, you’ll be able to edit all the pages within your template, but you will not be able to add additional pages without first upgrading to a paid account plan or a site plan. 

Edit text

To edit text in your template, double-click the text element or select it and press enter. Then, select the placeholder text and replace it with your own content.

Text is selected in a text element in the Webflow Designer. 

You can also change your text’s font, weight, color, etc. Typography style properties are located under the Typography section of the Style panel

Good to know: if you want to quickly change your text’s style across your entire project, you can adjust its font family, font size, and line height with the Body (All pages) tag selected. 

Learn more about typography.

Related reading:

Change colors

If your template’s color scheme was built using color swatches, you can easily edit a color swatch to update it sitewide (e.g., changing a red color swatch to purple updates all red colored elements to become purple). 

If you change a color swatch to update it sitewide, you can quickly change the color of multiple elements using that sitewide swatch. In the example above, the sitewide color swatch has been changed from red to purple. 

Learn how to edit color swatches.

Customize backgrounds 

Some elements use a background color, image, or gradient to add visual interest. 

Setting the background on an element gives you control over appearance and legibility. In the Backgrounds section of the Style panel, you can add a background image, gradient, or color to most elements (except media elements like video and image).

Learn how to adjust background styles.

Click an element and open the Style panel to change its background color, background image, or gradient. In the example above, the background color of an element was changed from red to blue. 

Related reading:

Replace images

You can replace any placeholder images in your template with ones you upload yourself. 

Learn how to replace images.

Double click an image or press “Enter” on the keyboard to open Image settings and replace the image with one of your own. 

Related reading:

Update links

Customizing your template means you’ll also want to update any links in your chosen design. 

To quickly update a link, select the element that contains the link. Open the Settings panel and make adjustments as needed. 

Learn how to set a link and adjust its settings.

Select the link you want to update, open the Settings panel, and update the placeholder link with one of your own.

Related reading:

Good to know: You can also embed videos hosted on a third-party site like YouTube or Vimeo. Learn how to use Webflow’s video element.

Collect visitor information

To collect subscriber information (e.g., sign ups for your newsletter, etc.) or to allow visitors to submit messages to you via a contact form, you can configure your form to accurately collect your subscriber’s information and send it to you. 

You can collect this information directly in your Webflow account, or you can use third parties like MailChimp or Zapier to collect form data for you. 

Learn how to manage form submissions and notifications.

A contact form is selected on the Webflow Designer canvas and the Settings panel is open where form settings can be updated.
Note: If you encounter an element that is a Symbol, double click it to edit the elements within the Symbol. Symbols are reusable components that can be used in many instances across your entire project (e.g., you can have the same contact form on several different pages). Each time the Symbol is updated on one page, it updates in all other locations it exists. Read more about Symbols

Related reading:

Modify SEO settings

To modify the title, image, and description that appears when you share your site, or when someone searches for your site, you can adjust SEO settings and Open Graph settings within your page’s settings. 

Learn how to set SEO settings and how to set Open Graph settings.

Open the Pages panel, click on the “cog” icon next to the page whose settings you want to update, and scroll down to the SEO settings and Open Graph settings section to add your own information.

Related learning: 

Work with a blog

If your template came with a built-in blog, you can quickly create new posts featuring your very own dynamic content — all by using Webflow’s built-in content management system (CMS). 

A CMS is where all dynamic content is stored and maintained. Your website references that dynamic content on different pages, so anytime you create or change any content in the CMS, it updates all the pages where it’s referenced, instantly.

Webflow's "visual" CMS enables you to create structured content, design around that content, and update it all — without touching a line of code. Read more about Webflow CMS and how to work with individual Collection items.

You can identify dynamic CMS elements by their purple colored outlines. 

Dynamic content (like blog content), is indicated by purple outlines in the Designer
You can access your dynamic content from the left-hand side of the Designer in the CMS panel

Let’s walk through how you can:

Customize your individual posts

To customize a blog post, you can do this from within the Webflow CMS. Your CMS will likely contain 2 (or more) CMS Collections with some sample content (e.g. a “Blog posts” collection and a “Categories” collection). You can update the sample content with your own information. 

Open the CMS panel to access your CMS Collections.

A CMS Collection is a collection of similar items. For instance, you might have a CMS Collection called “Blog posts.” The “Blog posts” Collection contains individual Collection items — individual blog posts. 

Choose a CMS Collection (e.g., “Blog posts”) to see the individual Collection items inside it.

Each Collection item (e.g., each blog post) contains fields for you to fill in data. For instance, you can add a blog post title, the blog post content, the blog post’s featured image, the post category, etc. 

Choose a Collection item to see individual fields you can edit for that item. 

To update the sample content with your specific information: 

  1. Open the CMS panel from the left of the Designer
  2. Click the CMS Collection you want to update (e.g., “Blog posts”)
  3. Click a Collection item (e.g., one of the individual blog post samples)
  4. Add your information to the included fields
  5. Save your changes, or click the dropdown arrow to either Publish your single blog post right away (without waiting for the next site-wide publish to take place), or Save as Draft if you aren’t quite ready to publish your post

Repeat the above steps for any other blog post Collection item you want to update. The changes you’ve made will automatically update on the canvas (unless you’ve set your post as a “Draft”, which will hide it from view on your site).

Good to know: If you change the blog post’s title, make sure you update the post link (or “slug”) as well. 

Learn how to update Collection items.

Add and delete blog posts and categories

To add 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 import them through the CMS API using Zapier or webhooks.

Open the CMS Collection to which you want to add a new Collection item (e.g., a new blog post), and press “+ New blog post” to add the new item. 

Learn how to create new Collection items.

To delete a Collection item (e.g., a blog post or a category) you can either delete many items at a time, or you can individually delete a Collection item

To delete a single Collection item:

  1. Open the CMS panel from the left of the Designer
  2. Click the CMS Collection you want to update (e.g., “Blog posts” or “Categories”)
  3. Click a Collection item (e.g., one of the individual blog posts or categories)
  4. Scroll to the bottom of the Collection item and press “Delete,” and “Delete” again to confirm
To delete a Collection item (e.g., a blog post), open the item you want to delete, scroll to the bottom of the item and press “Delete.” 

Save a draft of a blog post

Instead of publishing a blog post to your site, you can save it as a draft first. 

If you’re not ready to publish a Collection item (e.g. a blog post), you can choose to save it as a draft.

You can edit draft items as many times as you need and continue to save them as a draft until you’re ready to publish them. Once ready, the item can be staged for publish or published instantly to your site.

Learn how to edit draft items.

Schedule a blog post

Scheduled publishing lets you prepare content releases in advance and have it pushed live automatically. This feature is only available on Hosted CMS, Business, and Ecommerce Plans.

Learn how to schedule your blog posts.

Add or remove elements from your project

You’ve chosen your desired homepage from your template to customize, but maybe you have a completely different social media account you want to add, or a new link you want to feature in your links list. Or maybe you don’t have a Whatsapp account or a product store and you’d prefer to remove these items from your design.  You can do any of this to perfectly customize the content you’re presenting.

Good to know: If you need to add or remove blog posts, you’ll want to do this a little differently since blog posts are managed by the Webflow CMS. Check out how to work with a blog for blog-specific instructions. 

Let’s walk through how you can:

Note: It’s a good idea to make a manual backup point prior to making any significant changes to your project. 

Add elements to your project

You can reuse elements and components in your project. For instance, if you want to add another link, you can copy the link you want to duplicate and paste its duplicate right into your project:

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

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

Remove elements from your project 

You can also remove elements from your project. For example, you may not use a social media platform and would like to remove the link to it: 

  1. Select the element you want to delete (make sure you’ve selected all of its related components so you’re not leaving any elements behind after you delete it) 
  2. Press Delete on your keyboard

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

Publish your project

As you customize your design, you can publish your project to Webflow’s native domain for free (e.g., “www.myamazingplants.webflow.io”) to get a feel for what your site looks like on the web. 

Click “Publish” in the Designer to publish your project to the webflow.io domain. 

Learn how to publish your project

Connect a custom domain to your project

While you can always publish your project to Webflow’s native domain for free (e.g., myamazingplants.webflow.io), you also have the option to connect your custom domain to your project and publish it there instead (e.g., myamazingplants.com). 

We’ll walk through how you can: 

Purchase a site plan for your project

If you’d like to use a custom domain with your project or set up a more robust blog, you can purchase a site plan for your project. 

If your template uses the Webflow CMS (e.g., for a blog), you will not be able to purchase a Basic site plan until the CMS has been removed from your project. In some instances, this may break portions of the template design, so be sure to backup your project prior to removing the CMS. 

Open your project’s Settings and select the Hosting tab. From this tab you can choose the site plan you would like to purchase for your project. 

Learn how to manage your site plan

Learn how to apply a promo code to your site plan purchase.

Connect your custom domain to your project

Once you’ve purchased a site plan for your project, you can publish your project to any custom domain you own (e.g., myamazingplants.com). 

Learn how to connect your custom domain.

Set up Google Analytics

You’ve created a sweet site. Now it’s time to add Google Analytics to track powerful metrics like how many users and pageviews your site is getting, how long people are spending on your site, and how many of them are leaving the page without clicking other links (bounce rate). Google Analytics also allows you to see where the traffic to your site is coming from. You can even narrow these parameters down to the city.

To set up Google Analytics, go to your project’s Settings, and select the Integrations tab. 

Learn how to set up Google Analytics for your site

Get help with your template

If you are new to Webflow, you might find that templates using lots of interactions, custom menus, and popup modals can be challenging to edit at first. However, if you need support for your template, you can reach out to the template designer for help (and many template designers include help documentation within their templates).

Learn how to receive template support.

Pat yourself on the back for making such a cool, custom site, and share that creative content with the world! 

Try Webflow — it's free
No items found.
This video features an old UI. Updated version coming soon!