Whether you just bought Noah Photography template, or are simply having a look, we are happy to have you here. As you might know, Noah Photography Template 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.
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 Noah Photography's 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:
Click on the element with the color you want to edit.
In the styles tab on the right, find the color setting (ex. Text color)
Click on the color square.
Once the little pop-up opens, click the edit icon and choose a new color.
Click save.
See the video below for mini-tutorial.
Fonts
Noah Photography is using two additional fonts: Boska and Red Hat Display. Both of them can be downloaded at Fontshare. These fonts are 100% free for personal and commercial use.
Red Hat Display 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:
Selecting "Body"
In the styles tab on the right, click selector and select "Body (All pages)"
Scroll down to "Typography" and change for the desired font.
See the video below for mini-tutorial:
Boska font is applied to H1 headings. You can also edit it the same way by:
Selecting heading type you want to edit
In the styles tab on the right, click selector and select "All H1 Headings"
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.
Static content in the navigator tab
And dynamic content will be displayed using purple font color.
Dynamic content in the navigator tab
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.
Static content in the designer area has blue border
And dynamic content's border will be purple.
Dynamic content has purple border in the designer area
Editing static content
Every copy, but the projects 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:
In the "Designer mode" simply double click on the text you want to edit, and change it. Webflow will autosave it for you.
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
Note: we cover in detail editing the projects collections lower on this page in "Template specific" section.
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:
Go to CMS Collections on the left side, and find the collection you want to edit (ex. Projects).
Click on the collection item (ex. specific project).
Change the inputs that you want to edit (ex. project name)
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:
Find the image you want to change and select it.
In settings tab on the right click replace image and choose the new one.
To edit background image:
Find the element with the background image (ex. Section, Div) and select it.
In styles tab, scroll down to the background image settings and click on the image settings.
In the little pop-up select "choose image" to select a different image.
Have a look at the video below to see how we edit profile image on home page.
Template specific
In this section you can find tips directly connected to editing the Noah Phtography template.
Editing navigation
On Noah template we use two symbols for top navigation bar: "Navbar Black" and "Navbar White". Inside each of these symbols there's a "Mobile Menu". It means that changing "Mobile Menu" symbol in one place, will change it across whole website.
To do that:
Double click on any Navbar symbol.
Find and select by double clicking "Mobile menu" symbol.
In the styles panel change display to "Flex".
Do all the changes you need. Once done change display again to "None".
Check the video below to see how we do it.
Editing loader
Loader is only enabled on the homepage and editing it is very easy. Loader uses static images so you will need to edit them manually.
To do that:
On homepage find and select loader div in the navigator tab.
In the styles panel change display to "Block".
Now you can see the loader.
To edit images find "Loader images wrap" and inside it you will find three Loader Images. Each one of them corresponds to the images visible in the loading animation. The div on top corresponds to the first image, second div to the middle image and last div to the last image.
If you want to edit these images, simply select the image div, and in the styles panel scroll down to "background image" and change it.
After you did all the changes make sure to select loader and change its display back to "None".
Disable loader
If you don't want to have loader at all, follow these steps:
On homepage go to the interactions tab.
Under "Page trigger" delete the "Page load" trigger.
Done!
Tips & tricks
Below we list some of the tips, tricks and "don't forget's".
How to start
In our opinion the most efficient way to start, is to purchase hosting plan for your website, at the beginning. That way, even on free Webflow plan, you will be able to add more pages to your project. That's important, so you can copy/paste sections to your newly added pages, so you don't change original template pages. That way you can always reuse the original layouts.
SEO (change meta settings)
Before you publish your website make sure to change your meta titles, descriptions and images. You'll need to do it per page and it's very important for your SEO.
To do that:
Go to "Pages" on the left side and click the settings icon on the page you want to edit.
Change the Meta Title, Description and Open Graph Image. Once done click "Save".
Change SEO options here
Interactions
We understand that you might want to turn off some interactions. You can easily distinguish elements with interactions applied. In the navigator tab, they will have a little bolt icon visible. In the designer area, after selecting specific element, you will see green bolt icon as well. After you select such an element, go to interactions tab on the right and delete the interaction by clicking the bin icon.
Save unused pages as drafts before publishing
Before you publish your website save all unused template pages as draft so they don't get listed in search engines like Google.
Support
If you purchased Noah Photography template we offer you basic support. For questions directly related to our template please contact us an email on mike@wavesdesign.io
