Before you even begin to work on getting the ProPhoto software, make sure you have your hosting and domain all set in stone. If you have not done this, take a look at this ProPhoto tutorial on getting started. Once you have all of that figured out, you have to install WordPress. When you have your hosting and domain, and setup Wordpress, you are ready to Install ProPhoto. Woohoo! We suggest that you install ProPhoto automatically, with the P6 Installer Plugin. If you're having issues automatically installing P6, follow the instructions on the ProPhoto website.

Before you jump in...

*This tutorial uses affiliate links. That means if you click the link and sign up with Flywheel, we get a little bit of money. 💰 We only recommend services we trust.

You purchase the ProPhoto licensed software one time and are able to use it indefinitely without any recurring fees. New versions of ProPhoto will be released periodically that might require an upgrade fee at a discounted rate. You will have recurring payments due for your website hosting services.

prophoto fees

Think of ProPhoto add-on designs as the interior design of your home. ProPhoto comes with nine free designs when you purchase the theme. You can also choose to purchase a premium design to really male a statement with your site. 

add-on designs "your interior Design"

Think of a domain name as your home address. A website domain name is pretty much a way Domain Name Servers (DNS) on the internet forwards visitors of your site to the server computer at your hosting company, which is where the content of your site lives. If you wish,  you can own multiple domain names at a time and they can each can point to any web server all from a single hosting account.

domain name "Your Address"

Think of website hosting as a house. In order for your site to be viewed, you must choose a web hosting service. Web hosting companies put simply, have computers (also referred to as servers) that connect to the Internet. Your site has to be stored on a server so that every time someone types in your url, they are connected to the hard drive on the computer that your website content is stored on. WordPress is the platform that makes ProPhoto a possibility with the ability to create pages, posts, and content which is all installed on a web server. In order to make your site visible to others, you can pay a web host a fee to store your website content on their server computers. 
* We recommend using Flywheel for your hosting, read why on our blog.

hosting company "your house"

Before you jump the gun and purchase ProPhoto, there are a few things you might need to know beforehand. Below we have made a list of the most important things to be aware of pre-purchasing. If you still have more questions even after reading the below points, feel free to contact ProPhoto or email us at [email protected]

Before you Purchase ProPhoto

Registering ProPhoto. A registration box will appear that has your information. Once you finish your registration, there will be a pop-up asking you about importing content from an older version of ProPhoto. ProPhoto 4 will import galleries only, and ProPhoto 5 will import galleries, grids, and primary menus. You can select to import desired content, but you can not import a design from a previous version of ProPhoto. You can find more tutorials on Installation and setup on the ProPhoto website.

step six

Enter Test-Drive mode or activate ProPhoto. Test-drive is a great tool to use if you have an existing site that you need to keep up for visitors while you customize a ProPhoto design. Activating a design is available for those of you who prefer the public to see your P6 theme when viewing your website. If you choose to test-drive, you can click the button 'go live' to make ProPhoto 6 activate for viewers. More info on test drive mode can be found here.

step five

Install ProPhoto theme. If everything checks out when you complete the compatibility test, click the 'Install from Token' button. If you are unable to install the theme, contact ProPhoto.

step four

Do a website compatibility test to make sure your server is able to install ProPhoto. Navigate to the P6 Installer from the WordPress menu. All problems, if there are any will be shown. 

step three

** If you receive a 'Missing style.css Stylesheet' message, you are most likely in the wrong area within WordPress. If you are in the Themes area, you are uploading the file to the wrong place. Redirect to the Plugins area. 

Upload the .zip file. The file you receive when purchasing ProPhoto is NOT a theme file, so make sure you upload the file to Plugins. When you log in to Wordpress, select Plugins, add new, and Upload plugin.

step two

Download .zip file named pp-installer.zip which you should have received after purchasing ProPhoto. If you did not get this file, make sure you check your spam. If you can not locate this file, contact ProPhoto.

step one

The ProPhoto support team has a step-by-step guide on how to Install and setup your new ProPhoto site which we suggest you take time to read thoroughly. You can find that tutorial here. Also, we have taken the time to walk you through installation steps as well so feel free to read below.

Installing ProPhoto

Create new design on the design to make a copy of the add-on design. Once you do this, the design will download. Once the design has been copied, you can make this design your customizing design. This is also the area that you will 'go live' when you're ready to make your site visible to the public. See more info about working with designs here

step five

Drag and drop the .zip file into the area labeled 'drop files here to upload'.

step four

When logged into WordPress, select the 'Manage Designs' tab under the ProPhoto tab in the WordPress menu.

step three

Unzip the 'package' .zip file. The design .zip file will be uploaded into ProPhoto, NOT the package .zip file. 

step two

Download Add-On .zip file. Once you purchase a design, save the .zip file to your computer. 

step one

The ProPhoto support team has an extensive step-by-step guide on how to Install Add-On designs which we suggest you take time to read thoroughly. You can find that tutorial here. Also, we have taken the time to walk you through installation steps as well so feel free to read below.

Installing Add-On Designs

This area of ProPhoto is where you will review and assign layouts to all pages and page types. Also, you can choose what content you want on your site’s front page (posts or a page). This feature takes place of what was formerly known as page templates. To assign page templates, select the Layouts section, and locate the page you want assigned. Click the gear icon to open a pop up window that will allow you to assign these layouts to your pages. You can copy any layout and delete any layout (with the exception of the base layout). However, we typically do not recommend deleting any layouts, because there is no way to retrieve them once deleted. Find a more extensive explanation of layouts here.

What is a layout?

Essentially, a design is everything that makes up your ProPhoto site including the appearance and layout. Designs are imported and exported in the 'manage designs' area of the ProPhoto customizer. This is where the free designs that come with the ProPhoto theme will be and where you will upload purchased designs which we touched on in the above tutorial. You can change the designs you are customizing at any point. A great feature that ProPhoto now allows is the Test Drive mode which simply means you can customize a ProPhoto design privately until you're ready to go live. This allows visitors to see your current site while you're updating to a new site. For more info, read ProPhoto's tutorial on the Create and Manage Designs area.

Design Defined

Designs + Layouts

Global settings for your site are set here. This includes things like social media, comments , analytics, forms, and other settings. If you would like an Instagram feed on your website, this is where you would edit those settings. Also, set your copyright information as well as any advanced settings here.

Settings

In this area, customize how the text will look throughout the site. You can delete or change existing font styles as well as add new font styles and set font defaults. ProPhoto is synced with Google fonts, but you can also upload a WOFF file. Just be sure you are uploading and using fonts that are free or that you own the web license for them!

Font Styles

Add menus, galleries, tiles, grids, and other modules in the elements area. This will most likely be the area you use the most. Here, is also where copied modules will appear. Within the elements area are libraries and modules. Libraries contain content that can be saved and reused throughout your site. Modules are elements that can be dragged into layouts and customized to fit your liking. These include, text, twitter, header, graphics, forms, WordPress content, video, featured image, facebook, widgets, and Pinterest.

Elements

Here, is where you will add new or previously created blocks to a layout. There will be a series of dots that you click, hold, and drag to your page layouts. In this area of ProPhoto7, you can also add your own block. There are two types of blocks - standard and slideover. Within each block, there are settings you can customize including the appearance and structure. In the appearance area, change the padding of the rows and columns, hide on certain devices, add padding, change the alignment, background color or image, and add custom CSS. Use the structure tab to add, remove, or rearrange rows and columns. You can lock certain blocks if you wish to use the same customizations in many places throughout the template.

Blocks

The ProPhoto support team has worked really hard to make their platform easier to use for you guys! So they’ve completely reimagined the structure to be more of a drag-and-drop visual editor. This way, you will be able to see your changes in live time - how neat! Below, we have listed the five major areas that make up ProPhoto 7. Before you begin customizing, we highly recommend taking a good look around to get a good feel of where everything is located. To get into the ProPhoto customizer, login to your WordPress dashboard and click your site at the top left of the window with the home icon. Once this tab opens, click ‘Customize’ in the top menu.

ProPhoto Basics

Once you have authorized your account, you can add your Instagram feed to your ProPhoto site via the grid module. On most of our designs, we have put a placeholder gallery. To add your Instagram feed in, simply locate the Instagram block. Select grids in the left side menu in the ProPhoto customizer. Drag and drop whichever grid style you wish to use for your Instagram feed to the Instagram Block. For more information about adding your Instagram to your website, be sure to check out this tutorial as well.

An awesome new feature added to ProPhoto is the ability to add your Instagram feed using the grid module we touched on above. Before you can do anything, you must first authorize your Instagram account. To do this, open one tab where you are logged into your Instagram account. Open another tab where you are logged into your ProPhoto site and open the visual builder. From there, navigate to Settings > Site Settings > Social Media > Instagram to click the Authorize button.

Adding Your Instagram Feed into a Grid module

close tutorial

Tutorials Coming Soon!

#f7f7f7

#ecebe8

#c3b3a5

#3f3f3f

Colors

Butler Ultra Light - download here
Libre Franklin Normal - download here
Cormorant Light Italic - download here

** All fonts used in our ProPhoto templates are either free Google fonts or free of licensing **

Fonts

Design Elements

Phoenix

Tutorials Coming Soon!

#faf4f1

#f5f5f5

#efefef

#a4805b

#212c34

Colors

Beau - download here
Sarala Normal - download here
EB Garamond Italic - download here

** All fonts used in our ProPhoto templates are either free Google fonts or free of licensing **

Fonts

Design Elements

Harmony

Tutorials Coming Soon!

#f7f7f7

#eae9e3

#21211f

Colors

Aunofa - download here
Foglihten - download here
Sunflower Light - download here

** All fonts used in our ProPhoto templates are either free Google fonts or free of licensing **

Fonts

Design Elements

Fiona

Tutorials Coming Soon!

#f6f2ef

#f2f2f2

#b2917a

#202021

Colors

Noto Serif (Regular + Italic) - download here
Work Sans (Normal + Medium) - download here

** All fonts used in our ProPhoto templates are either free Google fonts or free of licensing **

Fonts

Design Elements

Hawthorne

Tutorials Coming Soon!

#e4e4e1

#e0d5cf

#b2917a

#9da197

#7b7672

Colors

Vidaloka Normal - download here
Work Sans - download here
Arapey Italic - download here

** All fonts used in our ProPhoto templates are either free Google fonts or free of licensing **

Fonts

Design Elements

Eden

Tutorials Coming Soon!

#e7e8eb

#cad0d9

#fdf4f3

#f0e6dd

#f5e1d1

#e9c7bc

#22231e

Colors

Spinwerad - download here
Lato Bold - download here
Abuget - download here
Lora Normal  - download here

** All fonts used in our ProPhoto templates are either free Google fonts or free of licensing **

Fonts

Design Elements

Duplicity

Tutorials Coming Soon!

#f9f7f6

#f9f0ea

#e6d2c1

#95937a

#696969

#1e1f1e

Colors

Slabo 27px Normal - download here
Montserrat - download here
Shopping Script - download here
Lora Normal + Italic - download here

** All fonts used in our ProPhoto templates are either free Google fonts or free of licensing **

Fonts

Design Elements

Aspen Willow

On the footer of this page layout, there is a tile that takes you to the top of the page. To customize the design of the tile, go into the ProPhoto customizer and select elements, then tiles. Locate the tile and customize in the pop-up window. To link this tile to the top of the homepage, we copied the link from the social media, logo, and contact info block (like we did in the scrolling element tutorial above) and pasted in the tile in the footer. Don't forget to paste your homepage URL in front of the pasted link!

Scroll to top footer Tile

A pup-up window will then appear, allowing you to customize this element. There are many grid types that you can choose from including: Recent Posts, Selected Posts, Categories, Recent Posts from a Category, Popular Posts, Instagram, Galleries, and Custom. For this design, we used the recent posts grid type. In this window, you can also choose if the post excerpt appears, how many posts show, whether it is a rollover or text below grid, ho to crop it, the desired widths, and columns. There are many customizations you can do here to make this design fir your needs. Read this tutorial to find out more about customizing grids.

Another important feature to note in this design is the recent posts grid. To customize the settings of this area, locate the recent posts block in the ProPhoto customizer. To edit the grid specifically, hover over the grid element and select the gear icon.  

Recent Posts Grid

The collections/pricing area of this template is designed with a full-width background that is 'fixed' when scrolling. This simply means that the background image will stay in place as the information on that block scroll. To upload your own photo and customize the settings to your liking, hover over the block and select the gear icon. Scroll down the pop-up window and select your background image by clicking 'Add Image'. Scroll further to customize the position of the image, whether it repeats, the size, and attachment of the image (whether it scrolls with the page or is fixed). You will also change the padding of this area here as well.

Collections with Full-width background image

Our Larissa design has a full width background carousel gallery at the top of the page. To customize this, locate the block setting by hovering over the block and selecting the gear icon. This will open a pop-up window where all the customizations for this block are made. Here, you can update the padding, background color, etc. In addition, you will be able to select the customizations for the background of the block. You can change it to be a color, static image, or keep the gallery. You will select the gallery you wish to show, as well as the gallery style. In this case, we have the background gallery set to a carousel, but feel to change it to any of the gallery styles that come with this template. Or, if you're feeling extra confident - create your own!

Home header Gallery

The copied ID can be pasted any place you can put a url link. In this case, we will be using a home page menu item and selecting the option to 'add link to specific block/row'. 

#goto-20bdf261-b9f9-402a-aaa4-52a3c0db2204

It will look something like this:

One a one page scrolling site like Larissa, it is important to know how to link the menu items to blocks that are further down the page. Since Larissa is a one page scrolling site, the menu items link to different blocks on the homepage. To grab the link you wish to scroll to, go to the desired block or row settings (gear icon), scroll down a bit in the pop-up window and select the 'Click to Copy' button. For the purpose of this tutorial, we will use the about area of the website as an example.

scrolling elements - Link to specific layout items

#dcc0b9

#595758

Colors

Derivia - download here
Lato - download here
Bellefair - download here
Monsieur La Doulaise - download here

** All fonts used in our ProPhoto templates are either free Google fonts or free of licensing **

Fonts

Design Elements

Larissa

#fafafa

One a one page scrolling site like Larissa, it is important to know how to link the menu items to blocks that are further down the page. Since Larissa is a one page scrolling site, the menu items link to different blocks on the homepage. To grab the link you wish to scroll to, go to the desired block or row settings (gear icon), scroll down a bit in the pop-up window and select the 'Click to Copy' button. For the purpose of this tutorial, we will use the about area of the website as an example.

scrolling elements - Link to specific layout items

#f7f7f7

#000000

Colors

Playfair Display Italic - download here
Elsie Normal - download here
Lora Normal - download here
Reem Kufi - download here

** All fonts used in our ProPhoto templates are either free Google fonts or free of licensing **

Fonts

Design Elements

The Final Year

One a one page scrolling site like Larissa, it is important to know how to link the menu items to blocks that are further down the page. Since Larissa is a one page scrolling site, the menu items link to different blocks on the homepage. To grab the link you wish to scroll to, go to the desired block or row settings (gear icon), scroll down a bit in the pop-up window and select the 'Click to Copy' button. For the purpose of this tutorial, we will use the about area of the website as an example.

scrolling elements - Link to specific layout items

#faf8f7

#a69f86

#60675a

Colors

Cormorant Family - download here
Lato - download here
Bellefair - download here

** All fonts used in our ProPhoto templates are either free Google fonts or free of licensing **

Fonts

Design Elements

Penny + Sparrow

On the details page layout of this design, there is a block for session info. This is made up of a row and two columns. The left side column is a gallery and the right side menu is made up of different text styles. To edit the gallery, locate the 'Gallery + Session Info' block. Hover over the gallery in the left column. Select the gear icon and a pop-up window will appear. Here, you can select which gallery and style you wish to use. To edit specific gallery styles, select 'elements' in the left side menu > select galleries > styles. From there, select the gallery style you wish to edit and hit the gear icon to open the settings. 

Session Info Gallery

In the pop-up, you will notice the block is made up one row with two columns. In the left side column, is where you will find the blog sidebar. In the right column is where your WordPress content will appear; in this case it is your blog post content. In the structure of the block, you can move the columns to the left or right, customize how wide the columns are, and delete or copy the columns and rows.

The blog posts page layout contains a sidebar on the left of the page. To customize this, go into the ProPhoto customizer and select the blog posts layout. Locate the WordPress Content (with Blog Sidebar) block. Hover over the block and select the gear icon. Here, a pop-up will appear that allows you to customize the block further.

Blog SIdebar

On the homepage of this design, there are three call to action tiles that take viewers to other area of your website. Within this tile is a circular image. Provided in the .zip file are three circular image mask PSD files for you to use, depending on what page you use. Open that file in Photoshop and clip your image properly. Make note you are using the proper image mask that corresponds to the page you are customizing (home, alternate, or blog sidebar image). Next, you will open the call to action tile you wish to upload the image into and select the gear icon to open the pop-up window. Select '+Add Layer' and upload the image. 

Call to Action Tiles

Throughout this design, there are hand-drawn botanical illustrations used in the background of blocks. You should have received Photoshop files for these elements so you can change the color and size. If you did not receive them, please shoot us an email. We would be happy to send them to you. Once you customize them to your liking, you can re-upload them back into your website. Head into your ProPhoto customizer, locate the block with the background illustration and select the gear icon to open the settings of that block. Scroll down until you can set the background color and image. 

Background Illustrations

Our Olive Marie design contains a main menu at the top of the page that contains a 'fixed' background image. This simply means that the background image will stay in place as the three call to action tiles on that block scroll. To upload your own photo and customize the settings to your liking, hover over the block and select the gear icon. Scroll down the pop-up window and select your background image by clicking 'Add Image'. Scroll further to customize the position of the image, whether it repeats, the size, and attachment of the image (whether it scrolls with the page or is fixed). You will also change the padding of this area here as well.


full width background image with tiles overlaid

Our Olive Marie design includes an alternate homepage layout to give you more design possibilities. To assign the alternate homepage as your static front page, login to your WordPress dashboard and select ProPhoto > Customizer. From there, find your way to the layouts area in the left side menu. Here, you can select which page will be your static homepage. Select 'Alternate Home Page'. You are not done just yet. Next, find the Alternate Home Page Layout, select the gear icon and select 'Alternate Home Page' to assign it properly.

Alternate homepage

To customize this, locate the Logo + Navigation block on any of your layouts. Unlock the block and open the settings by selecting the gear icon. Click the right column and scroll down until you see background color. Select and change to your desired color.

Main Menu Background Color

#faf9f8

#b2bfbc

#596e67

#b29a76

#293835

Colors

Arsenal - download here
Abhaya Libre - download here
Cantarell - download here

** All fonts used in our ProPhoto templates are either free Google fonts or free of licensing **

Fonts

Design Elements

Olive Marie

One a one page scrolling site like Larissa, it is important to know how to link the menu items to blocks that are further down the page. Since Larissa is a one page scrolling site, the menu items link to different blocks on the homepage. To grab the link you wish to scroll to, go to the desired block or row settings (gear icon), scroll down a bit in the pop-up window and select the 'Click to Copy' button. For the purpose of this tutorial, we will use the about area of the website as an example.

scrolling elements - Link to specific layout items

#f9f9f9

#a7a5a6

#3a3b3c

Colors

Cormorant Light (Regular + Italic) - download here
Dosis - download here

** All fonts used in our ProPhoto templates are either free Google fonts or free of licensing **

Fonts

Design Elements

Atlas

Visual Builder

ProPhoto now uses a drag and drop platform referred to as a 'visual builder'. This simply means as you will customize your design, you will see those changes live and in real time.