Documentation

Introduction

Happy to have you here

Whether you just bought Muza template, or are simply having a look, we are happy to have you here. As you might know, Muza is built on Webflow - the powerful no-code tool for creating websites. If you are already familiar with it, I'm sure editing this template will be a piece of cake.

This documentation covers general rules of working with Webflow that we thought are worth sharing. On top of that we created a template specific section to help you understand the little details of Muza template.

If you are new to Webflow

On the other hand, if it's your first time using Webflow, you might want to have a look at Webflow university and their 101 crash course.

Styling

Below you can find some general rules regarding styling your template.

Colors

In Muza template we've used Color Swatches. It means that you can change color in one place, and it will be applied to all the elements that share the same swatch.

To change color swatches:

1. Click on the element with the color you want to edit.
2. In the styles tab on the right, find the color option (ex. Text color)
3. Click on the color square.
4. Once the little pop-up opens, click the edit icon and choose a new color.
5. Click save.

See the video below for mini-tutorial.

Fonts

Muza is using one additional font: Satoshi. It can be downloaded at Fontshare. This font is 100% free for personal and commercial use.

Satoshi font is applied to the Body of the website, and because of that, is automatically applied to all paragraphs and text blocks. You can change it globally by:

1. Selecting "Body"
2. In the styles tab on the right, click selector and select "Body (All pages)"
3. Scroll down to "Typography" and change for the desired font.

See the video below for mini-tutorial:

‍

It is also applied to all headings (H1-H6). You can also edit them same way by:

1. Selecting heading type you want to edit
2. In the styles tab on the right, click selector and select "All H(1, 2, 3, 4, 5, 6) Headings"
3. Scroll down to "Typography" and change for the desired font.

Icons

All of the icons are in the .svg format, so changing the Color Swatches on the website will not affect them. You can download these icons from the "Assets" tab, and edit them in your design software (Photoshop, Figma, Sketch etc.). You can also upload your own icons directly.

Editing

Below you can find some general tips on editing template's copy and images.

Static content vs. dynamic content

When it comes to copy, in Webflow we distinguish two different copy types - static content and dynamic content (CMS).

To quickly distinguish these copy types you can have a look in the navigator tab, where static content will be displayed using white font.

‍

‍

And dynamic content will be displayed using purple font color.

‍

‍

You can also directly see which element is static and which dynamic, by directly hovering over it in the designer space. The static content will have a blue border around it.

‍

And dynamic content's border will be purple.

Editing static content

Every copy, but the CMS related one, is a static content. It means that you need to edit it directly on the page.

You can edit static content in two ways:

1. In the "Designer mode" simply double click on the text you want to edit, and change it. Webflow will autosave it for you.
2. In "Editor mode" similarly click on the text and change it.

Check the video below to see how to edit static content in the "Designer mode".

Editing dynamic content

Editing dynamic content is very easy, but can be a little confusing at the beginning. This type of content you will need to edit through collections. Once you get it, it's as simple as filling in the web form.

To edit dynamic content:

1. Go to CMS Collections on the left side, and find the collection you want to edit (ex. Podcasts).
2. Click on the collection item (ex. specific episode).
3. Change the inputs that you want to edit (ex. podcast name)
4. Save and it's done.

You can read more about editing collections and working with Webflow CMS on their university page.

Editing (static) images

There's two different image types used in this template - normal image and background image. You might notice that we used normal images mostly for icons, and the big images are implemented as a background image.

To edit normal image:

1. Find the image you want to change and select it.
2. In settings tab on the right click replace image and choose the new one.

To edit background image:

1. Find the element with the background image (ex. Section, Div) and select it.
2. In styles tab, scroll down to the background image settings and click on the image settings.
3. In the little pop-up select "choose image" to select a different image.

Have a look at the video below to see how to edit background image.

Editing products (eCommerce)

Editing your eCommerce products is very similar to editing dynamic content.

To edit your products:

1. Go to "Ecommerce" and click on "Products". Find the product you want to edit and select it.
2. Once in the product edit all the fields you want.
3. Save and it's done!

Template specific

In this section you will learn about all of the details directly related to Muza template.

Search bar

As Muza is content driven website we thought it might be useful to be able to search easily. However, if you don't feel like your website needs search functionality, simply delete the search link from the top navigation.

Editing the search bar overlay

Search bar overlay is a Symbol; it means that if you edit it in one place the changes will be reflected everywhere. To edit this symbol, simply:

1. Find "Search Block" symbol in the navigator tab and double click it
2. Once it's selected change it's display to "flex".
3. Do the required changes. Once done select the main symbol again and hide it by applying Display -> none.

See the video below to see how you can edit your search bar.

About CMS collections in Muza

Muza takes full advantage of Webflow CMS. Below you can learn about the structure that we created to give you full control over the content.

Collections overview

• Podcasts - collection where you can add your podcast episodes.
• Topic - collection to categorise your podcast. If you add new topics you can later specify the topic of the podcast in podcasts collection
• Blog posts - collection to add blog posts
• Tags - directly related to blogs so you can add a main tag of your post. To do it connect the tag in the the blog posts collection
• People - collection where you can add people. Later you can connect them in podcast collection as a main guest or others, as well in blog posts collection if you want to add an author.

Ecommerce

Merch is added through Webflow's ecommerce. However, if you don't need to use it disabling it is really simple. The best way to disable shop on your Webflow site is to:

• Delete cart from the navigation and any other place
• Delete any links that showcase ecommerce products
• To be safe, delete all the products

Support

If you purchased Muza template we offer you basic support. For questions directly related to our template please leave us an email on templates@wavesdesign.io

For questions connected to using Webflow as a tool please have a look at their university or contact their support.

On the other hand if you would like us to customize your template the way you need it drop us a line at mike@wavesdesign.io