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

The 'Custom Wedding Stationery' block includes a row with two columns. The row has a background image. To add your own background image, log into your ProPhoto customizer and navigate to the services page. Hover over the 'Custom Wedding Stationery' block and select the gear icon to open the pop-up window customizer. From here, select the row under the appearances tab. Next, scroll to update your row background image, padding, and max width. To update the right column background color, select the right column in the pop-up window customizer under the appearances tab and scroll to the background color settings.

'Custom Wedding Stationery' block

The 'Rentals' block on the Services Page layout includes one row and one column. The block has a background image and the row has a transparent background color. To add the block background image, hover over the 'Rentals' block and select the gear icon to open the pop-up customizer. Scroll until you see settings for background image. Select 'Add Image' to open your media library. To add the row transparent background color, remain in the pop-up window customizer and select the row under the appearance tab. Scroll until you see settings for the background color. Select the circle to upload your own brand color and use the toggle to change the opacity.

Rentals Background image and transparent Overlay

It is also important to notice that the blog sidebar is hidden on the phone screen. To customize this, Hover over the left side column in the 'Blog Grid w/Sidebar - WordPress Content' block and select the left side column under the appearances tab. Next, you will select the phone device icon under the 'Settings Overrides' section in the pop-up window customizer. You will see the visibility settings set to 'hidden'. If you would like to see the blog sidebar on phone screens, select the 'x' to change settings back to inherent.

The blog page layout of this design includes a sidebar and blog posts grid. To customize this, log into your ProPhoto customizer and go to your blog page layout. You will notice this block is designed with a row and two columns. The left side column includes modules to make up the sidebar. To edit these modules, simply hover over them with your mouse and select the gear icon to open the settings of the individual element. To edit the background color of the entire block, hover over the 'Blog Grid w/Sidebar - WordPress Content' block and select the gear icon outlined in green. Locate the background color settings and input your brand color by selecting the circle next to 'Background Color'. The right column includes a WordPress content module. To edit how your blog posts, appear, hover over the blog grid and select the gear icon outlined in purple. Customize all the settings of the blog posts in the pop-up window. To update the post excerpt settings, select 'Excerpt Styles'. 

Blog w/SIdebar layout

To add your own background image to this block, go to the Coming Soon page layout and hover over the 'Full Height Coming Soon' block and select the gear icon to open the pop-up window customizer. From there, scroll until you see background image settings. Select 'Add Image' to open your media library. You can also change position, repeat, size, and attachment settings.

The Grande design includes a coming soon layout to be used as you customize the rest of your website. To assign the coming soon layout as your static front page, login to your WordPress dashboard and select ProPhoto > Customizer. From there, locate the layouts area in the left side menu. Here, you can select which page will be your static homepage. Select 'Coming Soon'. You are not done just yet. Next, find the Coming Soon Page Layout, select the gear icon and select 'Coming Soon Page' to assign it properly. 

How to assign the 'coming soon' layout to your front page + adding your own background image

The homepage layout of this design includes a 'Home Header' block with a background gallery. To customize this, go to the homepage layout in the ProPhoto customizer and locate the Home Header Block. Next, hover over the block and select the gear icon to open the pop-up customizer window. Here, you can select if the block background is a color and image, gallery, or video. Select from your galleries and choose the gallery style. You will also notice padding. Customize this to your liking.

Home header Background Gallery

The Grande includes a unique grid in the footer. This will be customized using tiles. Log into the ProPhoto customizer and select 'Elements' > 'Tiles' in the left side menu. Scroll until you see the 'footer grid' tile and select the gear icon to open the tile pop-up customizer window. This tile is designed using shape and text layers. Select each layer to customize. Read this tutorial for a more in depth explanation on customizing tiles.

Footer Grid tile

#faf8f8
#f2eeed
#c29081
#778386
#3a3a3a

Colors

Italiana Normal - download here
Cardo Italic - download here
Maven Pro Normal - download here

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

Fonts

Design Elements

The Grande

The blog page layout of this design includes a sidebar and blog posts grid. To customize this, log into your ProPhoto customizer and go to your blog page layout. You will notice this block is designed with a row and two columns. The left side column includes modules to make up the sidebar. To edit these modules, simply hover over them with your mouse and select the gear icon to open the settings of the individual element. To edit the background color of the sidebar, hover over the block and select the gear icon outlines in green. Next, select the left column and customize the settings for this column such as padding and background color. The right column includes a WordPress content module. To edit how your blog posts, appear, hover over the blog grid and select the gear icon. Customize all the settings of the blog posts in the pop-up window. To update the post excerpt settings, select 'Excerpt Styles'. 

Blog Page Layout with Sidebar

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-a1f845f8-a8ac-4b2e-aa53-c0454d9b9ff7

It will look something like this:

On the about page layout, there is a tile including a hand-lettered 'lets chat'. This created with a tile so it can have a rollover affect. Before you customize this tile in ProPhoto, be sure to open the file in Photoshop and customize the lettering element. If you want the tile to change colors when hovered, be sure to save two different files - one color for the default and another for the hover. To upload these new files, in the left side menu of the ProPhoto customizer, select 'Elements' > 'Tiles'. Locate the 'Lets Chat' tile and select the gear icon to open the customization pop-up window. Once you have customized the tile, you will want to link it to the contact form in the footer. You will need open the customization settings for the footer block to copy the link in order to scroll to it. To do so, locate the footer and select the gear icon to open the block settings. From here, you will scroll down in the pop-up window customizer and select 'Click to Copy'. Next, locate the 'Lets Chat' tile on the about layout and hover to select the gear icon to open the settings of this graphic module. Here, select the 'Lets Chat' tile to open settings and paste in the 'Links To' area.

'Lets Chat' Tile

The 'About the Artist' block on the about page layout includes two columns; one with a background image and one with a background color. To customize, go to the about page layout and hover over the 'About the Artist' and select the gear icon to open the block settings. To customize the background settings of the columns, select the desired column. For the purpose of this tutorial, we will be using the left side column with the background image. Once you are in the block settings, select the top left side column to open the settings. This is where you will add your background image. It is important to note that for the tablet and phone screens, there is additional padding on this column. To edit this, select the icon for the screen size you wish to edit. For this tutorial, we will be using the tablet screen. You will do the same thing to edit the phone screen, but select the phone icon.

About Column Background image

As we have stated before, the Lucy Skye design includes many hand lettered words and elements. On the homepage, you will notice a hand-lettered 'journal' element with 'all the recent happenings' overlaid on a color block. When you purchased this template, you should have received all PSD resource files needed to customize this template. This PSD files is located in the file 'Design Elements' and it is called 'recent-happenings.psd'. Open this file in Photoshop, and customize this file as needed. Once you save this file for web, it is time to upload it into the ProPhoto customizer. Next, go to the 'Blog Grid' block and locate the 'journal all the recent happenings' graphic from the demo site. Hover over the graphic to add your newly customized image.

Journal/All the happenings Graphic

In this block, there is a row with welcome text. As we have previously stated, there are multiple hand-lettered words included in the design resources folder when you purchased this template. The word 'welcome' is included. If you would like to change the color, be sure to open the file in Photoshop and customize it accordingly. The welcome area of the 'Home Intro' block has padding to both the row and column. To edit this, select the gear icon of the 'Home Intro' block to open the pop-up customizer. Select the bottom row to open the customization settings. It is important to note that the column within this row includes both a background color and padding. To customize this, select the column and scroll until you see 'padding' and 'Background color'.

Welcome Row

Included in this design are several hand-lettered words and graphics. On the homepage, you will notice an image overlaid with a color block and hand lettered 'hey you'. When you purchased this template, you should have received all PSD resource files needed to customize this template. This PSD files is located in the file 'Design Elements' and it is called 'hey-you.psd'. Open this file in Photoshop, and customize this file as needed. Once you save this file for web, it is time to upload it into the ProPhoto customizer. Next, go to the 'Home Intro' block and locate the 'hey you' graphic from the demo site. Hover over the graphic to add your newly customized image.

Customizing the 'Hey You' graphic

First, it is important to notice that there is an image in the background of this block. To edit this, locate the block settings by hovering over the block and selecting the gear icon to open the pop-up window customizer. Next, scroll down until you see the settings to change the block background settings. This is where you can customize your background image settings.

Customizing the Background Image

There are a few important things to note about the 'Home Intro' block on the home page layout.

Home Intro Block

The contact form in this design is located in the footer. The footer block is located on each page layout (except 'Coming Soon') so you can go to any page layout to edit this. Because this block is used in multiple layouts, you will need to select the padlock icon to be able to edit. Select this icon and hit 'continue'. Next, hover over the contact form in the middle column and select the gear icon to customize. Add, delete, and rearrange form elements. Also, use the left side items in the pop-up window to customize your form further. 

Contact form

The footer block in this design is built with a row containing three columns. Both the left and right columns have a background color set. For the purpose of this tutorial, we will be customizing the left side column. To customize the background color of the column, select the gear icon to open the block customization settings and select the left column. Here, you will be able to customize settings such as the padding and background color or image. You will customize the other columns this same way.

Footer column Background colors

The 'Main Nav' block includes a row with three columns. The middle column includes the logo tile and a left and right column border. To customize this, log into your ProPhoto customizer and locate the 'Main Nav' block. This block is located on each page layout (except 'Coming Soon') so you can go to any page layout to edit this. Because this block is used in multiple layouts, you will need to select the padlock icon to be able to edit. Select this icon and hit 'continue'. Next, select the gear icon to open the pop-up window customizer. Then, select the middle column, and scroll until you see the section titled 'Border Width'. This is where you can edit the width and color of the column border width. In this case, the width is set to 1px on the left and right.

Main Navigation Middle Column Border

#f7f7f7
#f4edec
#191919

Colors

Lora - download here
Cantarell - download here
Courier- download here

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

Fonts

Design Elements

Lucy Skye

The blog posts page layout contains a sidebar on the right of the page and WordPress content on the left. To customize this, go into the ProPhoto customizer and select the blog page layout. The WordPress content will be customized in the left column, and the sidebar content will be customized in the right column. To edit the overall padding and background settings, 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

Included in this design is a menu located in the footer block. In this menu, there is an item that brings viewers to the top of the page. To edit this setting, locate the menus in the ProPhoto customizer and select the footer menu. Over over the 'Back to Top' menu item and a pop-up window will appear. This is where you paste your copied link. In this case, this links to the top menu block. 

Back to Top menu item in the footer

In the 'Our Style' block located on the homepage layout, there is a carousel gallery that expands the width of the window. To customize this gallery, locate the 'Our Style' block in the ProPhoto customizer. From there, you will hover over the gallery and select the gear icon. In the pop-up window, select the gallery and style you wish to use here. 

'Our Style' Carousel Gallery

The portfolio block on the homepage layout of this design includes a 'Text Below' portfolio grid. To customize this grid type, hover over the grid module and a pop-up window will appear. This is where you will be able to customize this grid. To customize the text below grid settings in the ProPhoto customizer, navigate to the elements item in the left side menu and select grids. There, you will see two options: One for a 'Rollover Grid' and One for a 'Text Below' grid. To edit either of these, select the gear icon.

Portfolio Grid

In the about block on the home page layout, there is a tile that brings viewers further down the page, specifically to the 'Meet the Team' block. To grab the proper link, locate the 'Meet the Team' block and copy the link. Paste the link in the 'meet the team' tile. To do so, hover over the tile until you see a gear icon appear. Select this icon and a pop-up window will appear. From there, you can paste the proper link in the 'Links To' area. 

Linking the 'meet the team' tile

There are a few testimonial blocks included in this design. This is designed with a background image, transparent layer, and text overlay. Locate the testimonial block you wish to customize and select the gear icon to open the pop-up window with customization settings. The background of the BLOCK is where you will add your image. The transparent overlay is added in the ROW background settings. The padding of your text is also added in the row settings.

Testimonials Block

In the Welcome Block of the homepage layout, there is text reading 'view our portfolio'. Be sure to link this properly. To do so, remember to find the proper block to link to and copy the link. Next, hi light the text and click the link icon from the menu. This is where you will place your homepage URL and the copied link.

Linking 'View Our Portfolio' Text

In the home header of this layout, there is a tile that brings viewers further down the page. To customize this tile, login to your WordPress Dashboard and navigate to the ProPhoto customizer. From there, you will select 'Elements' in the left side menu and click 'tiles'. From there, locate the corresponding tile, select the gear icon, and customize in the pop-up window. Link this tile properly by locating it in the header block on the static front page layout. Hover over the tile until you see a gear icon appear. Select this icon and a pop-up window will appear. From there, you can paste the proper link in the 'Links To' area. Remember to copy the link from the area you want to scroll to. In this case, it will be the welcome block.

Home header 'Scroll for More' tile

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-c52bea9f-6a75-4ec1-9ecb-d543ea0699e1

It will look something like this:

One a one page scrolling site like Phoenix, it is important to know how to link the menu items to blocks that are further down the page. Since Phoenix 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 in the main menu - Link to specific layout items

#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

On the 'About Page Layout' there is a 'What to Expect' block with a 'find out more' tile that brings viewers further down the page. To customize this tile, log into to your WordPress Dashboard and navigate to the ProPhoto customizer. From there, you will select 'Elements' in the left side menu and click 'tiles'. From there, locate the corresponding tile, select the gear icon, and customize in the pop-up window. Link this tile properly by locating it in the header block on the static front page layout. Hover over the tile until you see a gear icon appear. Select this icon and a pop-up window will appear. From there, you can paste the proper link in the 'Links To' area. Remember to copy the link from the area you want to scroll to. In this case, it will be the 'Our Process' block on the info page.

Linking the 'find out more' tile on the about page layout

The footer of Harmony is designed using two different blocks. One for Desktop and Laptop screens, and one for tablet and phone screens. This is accomplished by 'hiding' the block on certain screen sizes. For example, the 'Footer - Desktop and Laptop' is hidden on both the tablet and phone screen sizes. To customize this, open the block and select the device icon in the pop-up window customizer. Here, you will notice the section for 'visibility' has been updated to 'hidden'. This would be the same for the Footer - Tablet and Phone' block. Just be sure to select the device icon when customizing to be sure you are hiding it correctly.

Footer blocks

In the 'Home Intro' block on the home page layout, you will notice an accent line dividing two columns. To customize this, log into your ProPhoto customizer and be sure you are on the home page layout. Hover over the 'home intro' block and select the gear icon to open the pop-up window customizer. The column you will need to customize is the right column in the second row (you will see it highlighted in blue the screen cap below) . Select this column and scroll to the customization settings. Also, use these guidelines when customizing the 'Pricing' block on the info page layout.

Home Intro Middle Column border/accent line

In the home header of this layout, there is a tile that brings viewers further down the page. To customize this tile, log into to your WordPress Dashboard and navigate to the ProPhoto customizer. From there, you will select 'Elements' in the left side menu and click 'tiles'. From there, locate the corresponding tile, select the gear icon, and customize in the pop-up window. Link this tile properly by locating it in the header block on the static front page layout. Hover over the tile until you see a gear icon appear. Select this icon and a pop-up window will appear. From there, you can paste the proper link in the 'Links To' area. Remember to copy the link from the area you want to scroll to. In this case, it will be the home intro.

Home layout 'Scroll for More' tile

On the homepage layout of this design, there is a full window height block with a background gallery. To customize this, log into your ProPhoto customizer and make sure you are on the homepage layout. Hover over the first block and select the gear icon to open the block settings. This is where you will select the gallery and style of the background. To customize the block settings, scroll to the bottom of the pop-up customizer window. You can also choose the vertical alignment of the rows in the block.

Home page layout - Full Window Background gallery

#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

The 'Investment' block on the Info Page Layout includes a background image and row background color. To add your background image, hover over this block in the ProPhoto customizer and select the gear icon to open the pop-up window customizer. Scroll until you see the background image settings and select 'Add Image' to open your media library. To customize the row background color, stay in the pop-up window customizer and select the row under the appearance tab. Scroll until the Background color settings.

Investment Background image

The 'Behind the Scenes' block on the Client Hub page layout is made up of one row and two columns. The background of the block includes an image that is 'fixed when you scroll down the page. To customize this, hover over the 'Behind the Scenes' block and select the gear icon to open the block settings. Scroll until you see background image settings and select 'Add image' to open your media library. The right column has a background color. To customize this, stay in the pop-up window customizer and select the right column under the appearance tab and scroll until you see background color settings. Select the circle to upload your brand colors.

Behind the scenes background image

The 'Client Hub Header' block on the Client Hub page layout is made up of one row and one column. The row has a background image and the column has a transparent background color. To add the row background image, hover over the 'Client Hub Header' block and select the gear icon to open the pop-up customizer. Next, select the row under the appearance tab and scroll until you see background image settings. Select 'Add Image' to open your media library. To add the column transparent background color, remain in the pop-up window customizer and select the column under the appearance tab. Scroll until you see settings for the background color. Select the circle to upload your own brand color and use the toggle to change the opacity.

Client Hub Header background

On the Client Hub Layout, there is a menu that contains items that link further down the page layout. For the purpose of this tutorial, we will be using the 'Let's Hang' menu item. This menu item links to the 'Let's Hang' block. To copy the link, hover over this block and scroll and select 'Click to Copy' in the pop-up window customizer. Next, select 'Elements' > 'Menus' > 'Client Hub Menu' in the left side menu of the ProPhoto customizer. Select the gear icon next to the client hub menu. Be sure the box is check that says 'add link to specific block/row' and paste the copied link into the box labeled 'Link copied from block/row'. 

Linking client hub menu items

The blog page layout of this design includes a sidebar and posts excerpt list. To customize this, log into your ProPhoto customizer and go to your blog page layout. You will notice this blog is designed with a row and two columns. The left side column includes modules to make up the sidebar. To edit these modules, simply hover over them with your mouse and select the gear icon to open the settings of the individual element. To edit the background color of the sidebar, hover over the block and select the gear icon outlined in green. Next, select the left column and customize the settings for this column such as padding and background color. The right column includes a WordPress content module. To edit how your blog posts, appear, hover over the blog grid and select the gear icon. Customize all the settings of the blog posts in the pop-up window. To update the post excerpt settings, select 'Excerpt Styles'. 

Blog sidebar + post excerpt list

The about page layout of the Fiona template includes a 'Side by Side Testimonial 1' block. There is a 'Read more about client words' tile that links to a testimonial on the info page. To copy the link you wish to link to, go to the corresponding block and module in the ProPhoto customizer (in our case, the 'Side by Side testimonial 2' block the on the info page layout). Hover over this block and select the gear icon to open the pop-up window customizer. Scroll to the bottom of the pop-up and select 'Click to Copy'. Next, you will go back to the 'Read more client words' tile in the 'Side by Side Testimonial 1' block of the about page layout. Hover over the tile and select the gear icon to open the module's settings. Paste the copied link into the 'Links To' area. 

Linking the 'Read More Client Words' tile

The about page layout of the Fiona template includes a 'Team Members' block. This block is made up of three rows, each including two columns. Each row includes a background image and each right column includes a background color. For the purpose of this tutorial, we will be using the first row. To upload your image to the row background, hover over the 'Team Members' block and select the gear icon to open the pop-up window customizer. Next, select the top row under the appearances tab. Then, you will scroll to customize the settings of this row. To customize the right column background, you will stay in the same pop-up window customizer and select the right column in the first row. Next, you will scroll until you see 'Background Color'. Select the circle and input your brand color.

About Page Layout Team Members Block

Homepage layout 1 of the Fiona design includes a 'Full Width Testimonial' block that has a background image. To add your background image, hover over the 'Full Width Testimonial' block in Homepage Layout 1 and select the gear icon to open up the pop-up window customizer. Scroll until you see 'Background Image' and select the 'Add Image' button. 

Full-Width Testimonial background image

Another important thing to note is that the content in the columns appears at the bottom of the block. To update this, stay in the same pop- up window customizer and select each column under the appearance tab. Scroll until you see an area for 'Module vertical alignment' and select center, top, bottom, or justify.

Each row within this block includes a background color. To customize this, stay in the pop-up window customizer and select each row under the appearance tab. Scroll until you see the area for 'Background Color'. Select the circle to input your brand color. Also make note of the row maximum width. Customize that as needed.

Homepage layout 1 of the Fiona design includes a 'Home 1 Header' block including a background image. The block is made up of three rows; the first with one column, the second with two columns, and the third with one column. To add your background image, hover over the 'Home Header 1' block in Homepage Layout 1 and select the gear icon to open up the pop-up window customizer. Scroll until you see 'Background Image' and select the 'Add Image' button. 

Home page Layout 1 Header

Our Fiona design includes an second 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, locate 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.

Assign homepage layout 2 to your static front page

#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

The info page layout includes a 'Press' block made up of three rows. You will notice there is a line separator between the four press features and additional features. To customize this, locate the 'Press' block in the ProPhoto customizer. Next, select the gear icon to open the pop-up window customizer and select the middle row. Scroll down until you see the border bottoms settings. Here, you can customize the border bottom width, color and style.

Press column Line Separator

The blog page layout includes a block with a background image and blog menu. To update the blog menu, select 'Elements' from your left side menu and select 'Menus'. Next, select the gear icon next to 'Blog Menu. This is where you will add , rearrange, and delete menu items. The background image of the block can be customized in the 'Blog Menu' block settings.

Blog Menu

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-1c3c5e44-d0b0-40b2-b935-9d9e34c24744

It will look something like this:

The alternate homepage layout of Hawthorne is designed as a one-page scrolling site. That being said, the menu on this page remains static at the top of the window just like the other main menu. The difference is that this menu includes scrolling elements that take you further down the page. 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 menu item that links to the 'Alt Home Bio Info' as an example. You will paste the link into the 'About' menu item. To do this, navigate to 'Elements' > 'Menus' > select gear icon to open the menu settings. Next, select the gear icon of the 'About' menu item and paste the copied link.

Scrolling menu on Alternate homepage Layout

On the about page layout, there is a 'Scroll for more' tile that brings viewers further down the page. To customize this tile, log into to your WordPress Dashboard and navigate to the ProPhoto customizer. From there, you will select 'Elements' in the left side menu and click 'tiles'. From there, locate the corresponding tile, select the gear icon, and customize in the pop-up window. Link this tile properly by locating it in the 'About Header' block on the about page layout. Hover over the tile until you see a gear icon appear. Select this icon and a pop-up window will appear. From there, you can paste the proper link in the 'Links To' area. Remember to copy the link from the area you want to scroll to. In this case, it will be the 'About Bio Info' block on the about page.

About Layout 'Scroll for more' tile

On the homepage layout of this design, the main 'Logo + Navigation' menu block is set to 'sticky'. This simply means the block sticks to the top of the window when scrolling down the page. To customize this, locate the 'Logo + Navigation' block and unlock it to edit. Next, hover over the gear icon to open the pop-up window customizer and click the 'Sticky' toggle.

main 'Logo + Navigation' menu Sticky

Our Hawthorne 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, locate 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.

Assign the Alternate homepage to your static front page

#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

To change how your blog posts appear on the blog posts layout, navigate through the ProPhoto customizer to the blog posts layout. Under the blog grid block, there is a block titled 'WordPress Content'. To customize this block, either unlock or make it unique. Hover over the grid itself and select the grid icon to allow you to edit the module. From there, you can customize all the settings for your WordPress content, including excerpt styles.

Blog Posts Grid

The Blog Page Layout of this design includes a blog menu. To customize this, locate the 'Blog Grid' block on the Blog Page Layout in the ProPhoto customizer. This block is designed with a row containing three columns. Within these columns is a text element, grid, and blog menu. To edit each of these, simply select or hover over to customize the settings to fit your liking. Also keep in mind, there is a background color of the block as well as bottom border. To customize this, locate the block in the posts page layout. In the pop-up window customizer, select the background color of this block and the border bottom color and style.

Customizing the Blog Menu

The about page layout of this design includes an area for 'your favorites'. However, keep in mind these designs are meant to be customized to fit your needs. So, you might not need a favorites section. You could use this area to add more images or information for viewers to know about you and your business. To change the gallery, locate the 'Favorites Gallery' block on the about page layout. Hover over the gear icon and a pop-up customizer will appear to allow you to select the gallery and style.

'Favorites' Gallery

The homepage layout of this design contains a block with informational text and a full-width background image. 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.

'Our Mission' Block with full-width Background image

On the homepage layout of this design, there is a tile that has a unique hover feature. To customize this, log into your ProPhoto customizer and select 'Tiles' in the 'Elements' tab. Locate the corresponding tile and select the gear icon to open the pop-up customizer window. You will notice a layer titled 'Accent Line/BG Hover'. This is the layer you will most likely want to edit. The 'default' tab at the top of the pop-up window is where you will customize how the tile initially appears. In this case, there is a shape layer with a width of 3px and height of 50px. In order for this shape to appear to the left side of the allotted space, the x-position is set to -73. The 'Hover' tab at the top of the pop-up window is where you will customize how the tile hovers. In this case, the shape changes size and position. The width of this tile is now 150px and the x-position is set to 73 pixels (which allows the shape layer to be centered in the space allotted within the tile. Be sure to make note of these details when you begin customizing.

'Learn More' tile

#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

The Lookbook page layout includes a block made up of a row with two columns. The left column includes a portfolio menu and the right side column includes a gallery grid. To update the portfolio menu, in the left side menu of the ProPhoto customizer, navigate to Elements > Menus. There, you will see the portfolio menu. Add, delete, and rearrange menu items here. To update the portfolio grid, go to the 'Portfolio Menu' block in the Lookbook page layout. Hover over the grid to open the pop-up window customizer. Select the grid settings here. To update the rollover grid settings, in the left side menu of the ProPhoto customizer, navigate to Elements > Grids > Rollover Grid. Here, you can highly customize how the rollover grid will appear. 

Portfolio Menu + Grid

The 'Class Representatives' block on the Info Page Layout of this design is built with a row and two columns. To add your own background image, select the gear icon of the 'Class Representatives to open the pop-up window customizer. From here, scroll until you see 'Background Image' and click to upload your own. The right side column is made up of text and graphic modules. To update the background color of the column, remain in the same pop-up window customizer and select the right side column under the 'appearance tab. You will notice padding and a background color. To update the text modules, simply use your mouse to select the area and type away! To add your own photo to the graphic module, select the image in the right ride column and select the gear icon to open the pop-up window customizer. From here, select the graphic and select the button 'Add Image'. This will open your media library that you can choose from. You can also drag and drop an image from your computer into the media library.

Class Representatives block

The 'Process' block on the Info Page Layout of this design includes tiles with numbers and an circle outline. PLEASE NOTE: this design element does not need a Photoshop file to customize. To customize this, locate the Tiles area by navigating with the left side menu in the ProPhoto customizer. Here, you can customize the text layer and shape layer.

process Number Tiles

The blog page layout of this design displays posts with grid excerpts. To customize this, locate the 'blog grid' block in the blog posts page layout. Next, select the gear icon to open the pop-up window customizer. From here, select 'Excerpt Styles' in the left side menu of the pop-up window. This is where you can make all customizations for your post excerpts.

Blog posts grid layout

You will notice the row in the 'Our Philosophy' block on the about page layout has a transparent background. To update this, select the gear icon of the block to open the pop-up window customizer. Next, select the row and scroll for customization settings. You will notice padding, a maximum width, and a background color.

'Our Philosophy' transparency

The 'Memorable Experience' block on the About Page Layout of this design includes a tile that says 'authentic imagery' with a color block behind it. PLEASE NOTE: this design element does not need a Photoshop file to customize. To customize this, locate the Tiles area by navigating with the left side menu in the ProPhoto customizer. Here, you can customize the text layer and shape layer.

'Authentic Imagery' Tile

The 'Memorable Experience' block on the About Page Layout of this design includes an image with a color block behind it. When you purchased this template, you should have received a PSD file that includes an image mask and color block that allows you to customize this element. Update the file and save it for web. Next, you will log into your ProPhoto customizer and locate the Intro block on the home page layout. Hover over the element and select the gear icon to force a pop-up window to appear. This is where you will upload your newly edited file. If you need more information about saving images for web with Photoshop, read this tutorial.

'Experience' Image

Both the about and info page layout header blocks are designed the same. We will be using the about page layout for the purpose of this tutorial. Follow these instructions to customize your info and connect page header block as well. Now, to customize your about page header, log into your ProPhoto customizer and navigate to the about page. Hover over the 'About Header' block and select the gear icon to open the pop-up window customizer. From here, scroll to update your block background image and padding. It is important to notice that this block is made up of a row with two columns. To update the right column background color, select the right column in the pop-up window customizer and scroll to the background color settings.

About, Info, and Connect page layout header settings

The homepage layout of this design includes a block with a vertical menu and full-width background image. To upload your own background image, navigate to the homepage layout in your ProPhoto customizer. From there, hover over the block and select the gear icon to open the block settings. A pop-up window customizer will appear. This is where you will customize settings for the background image and color as well as block padding, borders and more.

Homepage layout Vertical menu block

Our Duplicity design includes an alternate homepage layout to give you alternative design possibilities. To assign the alternate homepage as your static front page, login to your WordPress dashboard and select ProPhoto > Customizer. From there, locate 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

#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

The 'Our Pricing' block on the details page includes column borders to create a grid design. Log into your ProPhoto customizer and make your way to the details page layout. Once you make it there, scroll until you find the 'Our Pricing' block and select the gear icon to open the pop-up customizer window. To edit the column borders, select the column you wish to edit in the appearance tab of the block. Then, scroll down the pop-up window to find border width, color, and style settings. For this design, there is a border on the bottom of the first column, left and right of the middle column, and the bottom column.

Investment column borders

The 'Our Process' block on the details page layout includes three tiles for 'who you are', 'why you are', and 'where you are'. To customize these, log into your ProPhoto customizer and select 'Elements' in the left side menu. Then select 'Tiles' to customize each tile.

Our Process tiles

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-ea7664c3-a5fa-4dd1-8739-ea7b8fed65de

It will look something like this:

The details page layout includes an block including process, pricing, and testimonials tiles. Before uploading the image you want to add into this area, open it in Photoshop. Crop the image into a square using the crop tool and save for web at 680px wide. Next, log into your ProPhoto customizer and select 'Tiles' in the elements tab in the left side menu. Locate the tile you wish to customize, and select the gear icon. Locate the image layer, scroll down and select 'Add Image'. Upload your image and make sure to check the box 'This is a retina (2x) sized image'. This allows your image to look nice and crisp on retina screens. Next, it is important to note that each tile is linked to different blocks further down the page. Locate the block you wish to scroll to and select the gear icon to open the block settings. For the purpose of this tutorial, we will be using the 'Our Process' tile and block. Scroll to the bottom of the customizer pop-up window and select 'Click to Copy'. This link is now successfully copied to your clipboard. Next, you will go the 'Our Process' graphic module to paste the link into the tile.

Process, Pricing, and Testimonials Tiles

The blog posts page layout is designed with a grid excerpt display. To edit this, locate the 'Main Block/WordPress Content Area' block on the default layout. Hover over the blog grid and select the gear icon in the purple box. This pop-up window is where you will customize how your posts appear. For this particular design, it is important to note that there is inner padding applied to these grid items. To update this, go into the elements tab in the left side menu, select grids. Next, select the gear icon on the 'text below 'grid style. Use both the basic and advanced tabs to customize this grid style.

Blog Posts Grid Inner padding

The favorite things on the about page layout includes 3 tiles that have a roll over effect. Before uploading the image you want to add into this area, open it in Photoshop. Crop the image into a square using the crop tool and save for web at 570px wide. Next, login to your ProPhoto customizer and select 'Tiles' in the elements tab in the left side menu. Locate the tile you wish to customize, and select the gear icon. Locate the image layer, scroll down and select 'Add Image'. Upload your image and make sure to check the box 'This is a retina (2x) sized image'. This allows your image to look nice and crisp on retina screens.

Favorite Things Tile

On the about page layout, there is an intro block including text, an image, and a border separating the two. To edit this, go to the about page layout, locate the intro block and select the gear icon to open the block settings. From there, select the top row and scroll until you see border bottom width, color, and style settings. Customize to fit your style and branding!

About Intro row Bottom Border

The home page and details layout of this design include a testimonial block. For the purpose of this tutorial, we will be using the home page layout testimonial, however, these instructions will teach you how to edit both of them. Navigate to the testimonial block on the homepage layout, hover and select the gear icon to open the pop-up customizer window. This block is made up of two rows containing a column within. This allows the rows to have different widths. To add your background image, select the gear icon, scroll down in the pop-up window and add your image. To customize the row max width, select the block gear icon and the second/bottom row. Here, you will be able to change the padding and max width to your desired settings.

Testimonial with background Image

The 'Intro Block' Home Page Layout of this design includes an image with a color block behind it. When you purchased this template, you should have received a PSD file that includes an image mask and color block that allows you to customize this element. Update the file and save it for web. Next, you will log into your ProPhoto customizer and locate the Intro block on the home page layout. Hover over the element and select the gear icon to force a pop-up window to appear. This is where you will upload your newly edited file. If you need more information about saving images for web with Photoshop, read this tutorial.

Home Page Layout Intro Accent Image

Most page layouts of the Aspen Willow design include a header with a background image and logo overlaid. For the purpose of this tutorial, we will be using the Home Page Layout as an example. This tutorial can apply to the following layouts: home page, about, details, and contact. To add your own background image, locate the 'Home Header' block on the homepage layout in the ProPhoto Customizer. Hover over the block and select the gear icon which will open a pop-up window customizer. From there, you can add your own image to the background of the block and adjust the padding and other settings as needed.

Page Layout Headers with logo overlaid

Aspen Willow is designed with a 'mobile menu' shown on all devices. To update these settings, log into your ProPhoto customizer and navigate to your homepage layout. Hover over the home header block and you will notice a gray box appear at the top of the window titled 'Home Page Layout. From there, select the gear icon which will prompt a pop-up customizer window to appear. Select 'Mobile Menu' in the left side menu of the pop-up. This is where you will make all your customizations.

Mobile Menu

#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

The blog posts page layout contains a sidebar on the right of the page and WordPress content on the left. To customize this, go into the ProPhoto customizer and select the blog page layout. The WordPress content will be customized in the left column, and the sidebar content will be customized in the right column. To edit the overall padding and background settings, 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

The 'Learn More' block on the info page layout includes a vertical menu. This menu includes items that link further down the page layout. For the purpose of this tutorial, we will be using the investment info menu item. You will customize the rest of the menu items using the same steps. The first thing you will need to do is copy the block link you wish to scroll to. To do so, locate the Investment Info block and scroll until you see the option to 'Click to Copy'. Next select 'Elements' > 'Menus' in your ProPhoto customizer. From here, click the gear icon for the Investment Info menu item and paste it in the URL box.

Info page layout vertical menu

On the homepage layout of this design, there is a block for Press + Newsletter Sign-Up. You will notice that this block is made up of two columns; the left for press and the right for a newsletter sign up. You will notice that the left column includes a background color. To customize this, log into your ProPhoto customizer and locate the 'Press + Newsletter Sign-Up' block. Hover over this block and select the gear icon to open the pop-up window customizer. Next, select the left side column to open the settings. You will notice left side padding and a background color. Please note: some settings differ depending on what screen size. In this case, the padding is customized on the phone screen. To adjust these settings, select the phone icon.

Press + Newsletter Sign-up

It is also important to notice that these tiles link to their corresponding gallery. In order to link them properly, first get the link to the gallery you need to link to. For the purpose of this tutorial, we will be using the creative gallery: (https://designs.pro.photo/the-final-year/gallery/creative/). Next, paste the link into the 'Creative Gallery' tile. To do so, locate the tile in the 'session types' block on the homepage layout. Hover over the tile and select the gear icon to open the pop-up window customizer. Select the tile and scroll until you see the 'links to' area. This is where you will paste the URL of your gallery.

On the homepage layout of this design, there are tiles that has a unique hover feature. To customize this, log into your ProPhoto customizer and select 'Tiles' in the 'Elements' tab. Locate the corresponding tile and select the gear icon to open the pop-up customizer window. You will notice a layer titled 'Accent Line'. This is the layer you will most likely want to edit. The 'default' tab at the top of the pop-up window is where you will customize how the tile initially appears. In this case, there is a shape layer with a width of 300px and height of 2px. In order for this shape to 'grow' to the side of the allotted space, the x-position is set to 50. The 'Hover' tab at the top of the pop-up window is where you will customize how the tile hovers. In this case, the shape changes size and position. The width of this tile is now 400px and the x-position is set to -50 pixels (which allows the shape layer to 'grow' to the left side of the allotted space within the tile. Be sure to make note of these details when you begin customizing.

Gallery Tiles

The homepage layout of this design includes a block for a featured session. This block has a background image with a row containing two columns. In the above tutorial, we explain how to add your own background image to a block. You will notice the 'View Full Session' tile in the right column appears at the bottom right of the block. This is possible by adjusting the padding of this column and setting the module vertical alignment to 'bottom'. To customize this, hover over the block and select the gear icon to open the pop-up customizer. Next, select the right side column. Scroll to adjust the padding and module vertical alignment. To link this tile, hover over the tile itself and select the gear icon to open settings. Select the graphic tile and paste the URL you wish to link to. 

'featured session' block

You will notice many blocks of this design have a block background image with a row background transparent color. The above tutorial will guide you through customizing similar blocks throughout The Final Year design.

The background of the 'Behind the Scenes' block on the homepage layout of this design includes a block background image and row background transparent color. To customize this, go to the homepage layout of your ProPhoto customizer and locate the behind the scenes block. Select the gear icon of the block to open the pop-up customizer window. Upload your image into the block background. To locate the row settings, remain in the pop-up window and select the row from the top diagram. Scroll until you see the background color settings and customize from there. You can put in the HEX code of your brand colors and use the slider to decrease the transparency.

Behind the scenes background

Read more about background videos on this ProPhoto tutorial

The homepage template of the Final Year includes a background video on desktop and laptop screens. Background videos are not compatible on mobile screens, so there will be a background image instead. Before you upload your own video, it is important to be aware of the size. Videos can quickly become very large files, making your website load very slow. We recommend compressing your videos prior to upload on either Clipchamp or Handbrake. It is important to note that only MP4 videos are supported on ProPhoto 7. So, be sure to compress and export as this file type. Once you have compressed and exported your video, you are ready to upload it into your block background. To do so, log into your ProPhoto customizer and navigate to the 'Desktop Full Width Header Video' on your homepage layout. Hover over the block and select the gear icon in the green tab to open the pop-up window customizer. Here, you will select 'video' for the block background. Next, select if you are uploading your video from the media library or YouTube/Vimeo. For this design, we uploaded the compressed video to the media library. Add a fall back image ('poster') in case the video does not load.

Homepage background Video

#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

Our Penny + Sparrow 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, locate 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

On the homepage layout of this design, there is a tile called 'about the team'. This tile has a hover affect to shift the arrow over to the right. To customize this, select 'elements' > 'tiles' in the left side menu. Locate the 'About the team arrow accent' tile and select the gear icon to open the pop-up window customizer. The arrow is created using the shape tool. The angled parts of the arrows are created with the 'rotate' tool. In the 'Hover' tab, the x-translates 6px. You are free to customize this as you please!

'About the team' tile

It is important to note that the 'Home menu + Page Content' block includes a slideshow gallery in the middle column. To customize this, log into your ProPhoto customizer and locate the 'Home menu + Page Content' block. Hover over the gallery and select the gear icon to open the pop-up window customizer. This is where you can select your gallery and style.

Home Page Layout Gallery

This design includes a vertical menu on each layout (with the exception of the alternate homepage layout). This area on each page is designed in a block with either a background image or color. The vertical menu is located in the left side column of each of these blocks. To customize the vertical menu, log into your ProPhoto customizer and select the 'Elements' tab in the left side menu and select the 'menus' tab. To customize the items in the menu, select the gear icon to view the items included in the menu. Here, you can add, rearrange, and delete menu items. The vertical menu blocks on the page layouts include either a background image or color. For the purpose of this tutorial, we will be using the homepage layout. To customize the background image and/or color, locate the 'Home menu + Page Content' block. Select the gear icon to open the block settings. In this window, you can update the background color and image.

Vertical Menu Block Content

#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

On the portfolio landing page layout, there is a grid including three different galleries. To customize this, head into your ProPhoto customizer and navigate to the 'Portfolio Landing Page' layout. Hover over the grid module to customize, and select the gear icon. You will notice the Gallery Style will open in the left side menu and a pop-up window will appear for further customization options.

Portfolio Landing Page Grid

On the blog page layout of this design, the posts are displayed using grid excerpts. To customize this, go into the ProPhoto customizer and locate the 'Blog Posts without Sidebar' page layout. Hover over the 'WordPress Content' section and select the padlock icon to unlock and customize the block. Hover over the grid and select the gear icon to customize. In the pop-up customizer window, select the left side option titled 'Excerpt Styles'. Her you can select what style the excerpt is displayed in. To customize further, select 'Grid Excerpts' in the left side menu. Here, you can make tons of customizations to make your blog stand out!

Blog Posts Grid

On the blog page layout of this design, there is a menu with post categories. To customize this, go into the ProPhoto customizer and locate the 'Blog Posts without Sidebar' page layout. From here, you will see the main navigation in addition to the 'Blog Submenu' block and 'WordPress Content Area' block. To update the blog submenu, select 'elements' in the left side menu. From there, select menus > 'Blog Menu'. Edit, add and delete menu items as necessary. Currently, the menu is made up of individual categories. 

Blog Categories Menu

The about page layout of this design includes an area for 'your favorites'. However, keep in mind these designs are meant to be customized to fit your needs. So, you might not need a favorites section. You could use this area to add more images or information for viewers to know about you and your business. To change the gallery, locate the 'Favorites Gallery' block on the about page layout. Hover over the gear icon and a pop-up customizer will appear to allow you to select the gallery and style.

'Our Favorite Things' Gallery

Our Atlas 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

On the homepage layout of the Atlas design, there is a block with a full-width background image and logo tile overlaid. To customize this, log into your ProPhoto customizer and locate the homepage layout. From there, hover over the 'Header Image + Logo' block and select the gear icon to open the block settings. Scroll until you see background image settings. Here, you can customize the position, whether the image repeats, the size of the image, and if the image scrolls with the page or remains fixed.

Homepage Layout Header Background image

#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.