Installing ProPhoto

Customizing Layout

Design Specifics

Learn HOW ProPhoto and
Wordpress work together

Step One

The ProPhoto theme allows you to customize your design in a visual builder making updating your template even easier! We still recommend going through the general P7 instructions and viewing the design specific instructions to get you started. Watch the video below to get a good grasp on how ProPhoto and Wordpress work hand in hand.

Subscribe for template update notifications!

[ close ]

Installing + getting started with ProPhoto 7

installing prophoto

There is no need to reinvent the wheel here, ProPhoto covers in great detail on how to install your theme and get you right on track!

ProPhoto install & Setup tuturIal

documents + Support

installing your design


After downloading your design file, go ahead and uncompress your file and store your zip file somewhere easily accessible, you will need this in case you need your installation instructions or Photoshop files for future reference.  

You will see 3 files, a basic instructions file, your “design_yourdesignname”, a Northfolk READ ME file with all important links, and as well as a “resources” containing customizable layered Photoshop files and a XML file for your demo content pages if applicable.

Before you are able to upload your design, you must already have purchased separately and installed ProPhoto 7 

ProPhoto > Manage Designs > Upload Design Zip

Install Zip File

Go to the MANAGE DESIGNS screen and drag and drop the P7 design file into ProPhoto

Once installed, your design will show up in the designs section below. To get started, simply click the “create new design” button below the one you uploaded.

design setup

After you have clicked "CREATE NEW DESIGN" it will begin to download all of the template files and ask you what you would like to title your new design. Once it is done loading, select the blue CUSTOMIZE to make it active in the back end.

Click customize to make your new design active in the back end while your current site is still live.

If everything has loaded properly, you can now click Customize in the WP sidebar under ProPhoto to be taken to the Base Layout to start editing in the Visual Builder.

Customizing your Layout

Visual Builder

In ProPhoto 7, you will design and customize you website using the all-new Visual Builder tool. The Visual Builder allows you to make changes directly to your site, right on the front-end. So no guessing which settings area to visit to make a change! 🙂 You can view any post or page within your site inside the Visual Builder, and edit it’s layout.

View the ProPhoto visual builder walkthrough:


View the ProPhoto in depth tutorials on EVERYTHING modules to learn about how your designs are built and how to edit your designs modules. (AKA Widgets for folks who are familiar with ProPhoto 6 and WordPress)

ProPhoto Modules tuturIal

Content Style

Each website page and blog post that you create in WordPress can contain text, images, etc.
(to remove the title or content area of specific pages, see our guide Hide title or content area of a post/page )

ProPhoto controls make it easy to select the style that should be applied to your WordPress content, including:

font styles used for paragraphs
spacing added between paragraphs
font styles used for headings (H1, H2, H3, etc.)
spacing above & below images
…and lots more.

content header and date settings

content footer settings

Image appearence 

content text style

Background color and images for posts and pages

hide title or content area of a post/page

View the ProPhoto documentation for each specific topic here:

excerpts on posts pages

Photo Galleries

View the ProPhoto in depth tutorials on photo galleries, how to create new ones, how to insert galleries as modules as well as Gallery Styles

ProPhoto GALLERIES tuturIal

Design Specifics

About Your Design




fonts used

Hex Colors Used

Here is the information you need pertaining to your design, fonts used as well as HEX colors if you would like to carry out branding elsewhere.

Archivo Black



  **all fonts are pre-loaded into your design 




Design Specific Features

Ardent utilizes some cool background parallax looks, we have strategically placed images in the block and page background to achieve this effect. We have included design PSDs so you can easily drag and drop your image onto your PSD, clip to the placement and save as a JPEG. Keep reading to learn how to place them!

Here you will find a few settings that may not be apparent at first and customized with a specific device in mind.

Two pages are using the page background, the HOME and the CONTACT page. To change these, create your background images with the included PSDs. Once you have those, go to the HOME page and click the layouts main cog.

When the layout settings pop up, scroll down and select ADD IMAGE.

The rest of them are placed in their specific block backgrounds. To change the image, hover over the block and select the green block settings cog. Scroll down to ADD IMAGE.

Editing your content on a locked block is simple, the lock indicates that is used in more than one layout and lets you know if you edit the block on one layout, it will change for the rest. If you only would like to change the content on one layout you can select "MAKE UNIQUE". Otherwise, to edit the demo content, simply select the lock icon to make it editable and select "CONTINUE".

After you have unlocked the block you can make your changes. After you save and exit the customizer it will lock your block back up.

You will need to do the same thing when editing the footer. We have used a static demo instagram image but included a grid widget for your automated instagram. You will need to go to SETTINGS and activate your Instagram account. Once that is done, delete the demo instagram image and link any social icons.

We have the galleries block on the WORK page as well as the SINGLE GALLERY page. To edit, just unlock the block and hover over each individual gallery, select the element cog and ADD ITEM to select which gallery you would like shown. You can also adjust the grid look and feel.

Ardent features a unique Main Content block background to give it the feel that the sidebar background extends. We have included a PSD to change the color of your sidebar if needed. To change it, click the blocks settings cog and go down to Background Image and select ADD IMAGE to replace.

The sidebar also features a custom coded Search Form. First select the BLOG MAIN CONTENT block settings and select the right column to edit the settings.

Once selected, go all the way to the end of the pop up and in the CSS you will see the code. You can change the hex color code of fonts, backgrounds and font colors.

Shopify Integration

Adding product pages and embedding Shopify Buy Now buttons

Learn how to use Shopify Lite to embed your shop products right into your design. We recommend reading through their tutorial on it because who better to learn from than the best?!

Buy Button Shopify Tutorial

Once you know how to grab your buy button code. Head over to your dashboard then go to:

Then paste that copied embed code into the widget and save.

You can then go to your listing page, and in the area where your BUY NOW button will be, edit the widget module and select your new listing widget from the dropdown.


We love the power of Wordpress + ProPhoto + Shopify!

But adding new product pages and embedding products can be tricky. Follow along with the video for creating new product pages, grabbing the embed code and adding it into your new product page!


adding a new product page

Go to your dashboard > pages and add a new page. Title this what your product listing will be called and Publish. Once published grab the page URL.


Paste new page URL into Shop page listing tile

Head to your shop layout you intend on using and click Customize. Once you have the customizer open, hover over the listing tile, and select the element cog. With the tile selected, paste the URL into the provided space and save.


Get Shopify Buy Now product embed code

Go to your newly created product listing page and click the customizer. When creating new pages your page will automatically be set to show the Base layout. We will want to make sure to set up our new listing page.

Select LAYOUTS and duplicate an already made listing page, title it with your new listing title and assign it to your correct Wordpress page and save settings.


Create and link listing layout to new product

Now that you have your layout duplicated, you will see that they are locked and linked blocks to your copied layout. You will want to break inheritance and make the block unique for every new listing layout you create.

To set your new Embed Code, hover over the widget element and click the cog and select your new listing Custom HTML widget from the drop down.


Set product Custom HTML widget and edit listing content

Finish editing the listing content and image and save changes.

still need help?

Submit A Support Ticket

Yep, send it off!


Happy to Help!


Your message is on its way to us. We try our best to respond ASAP but we like to boogie on the weekends, so you will probably hear back on Monday ;) 

[ close ]

In the Know

sign up for all future design template updates

go back please!

go back please!

what are you looking for?