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

Download

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:


Modules

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

#000000

#E3D7CB

#F5F5F5

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.

Playfair Display

Lato

Mindfully

  **all fonts are pre-loaded into your design 

Design Specific Features

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.

In the header there is also a Categories list using the MENU module. Click the cog and in the sidebar you can adjust the categories shown.

The blog page header contains a grid of featured posts or Recent posts from a specific gallery. To change, select the module cog and in the GRID SETTINGS select your grid type. If it is a "Recent posts from a category" type, select the chosen category. If it is a "Selected Post" click the blue ADD POST button to choose.

We have included basic form elements which you can adjust by hovering over the form and selecting the widgets cog settings. To change a pre-existing form element, click the settings cog. To add a new form element, click the + ADD FORM ELEMENT, select settings and adjust placement with the dots.

To change the PHOTOGRAPHERS HEADER blocks column background images, click the cog to adjust settings for the block, select the left, center, or right COLUMN cog and scroll down to add your image. 

Throughout the site you will see images within columns, to change the image, click the cog for the module and select the inserted image. Click ADD IMAGE to update with your own.

On the Bio and Information page we have also added a custom collage of images, included in your Resource Files there will be a set of collage types to choose from, mix them up throughout the site or have the same style on each page. Your PSD will have instructions for updating and saving for web.

Once you have your updated graphic, select ADD IMAGE and update with your new collage.

Speak also utilizes custom Portfolio buttons for style. To edit the tiles themselves, in the sidebar go to ELEMENTS > TILES. Locate the Gallery 1, Gallery 2 and Gallery 3 tiles to update images and text.

Once that is done, hover over the tile and select the widgets settings cog. Under graphic settings, click on Gallery 1 and paste your gallery link.

We include blocks that also host tiles with links to specific blocks. To edit the text that is shown, go to ELEMENTS > TILES and go to the correct tile, update text (this will become updated on the site view and to update the link, select the widgets cog and paste in your link and choose how you would like your link to open. We suggest same page for links within your site and new page for linking out of your site.

To change your main masthead gallery, click the cog to adjust settings for the HOME MASTHEAD block, select the Edit module cog on the gallery. Use the dropdown to adjust the gallery shown and the style. In the ProPhoto sidebar, you can also go to ELEMENTS > GALLERIES and locate the Masthead Gallery to add your own images. We have included a PSD file for adding a perfect fit slideshow.

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

still need help?

Submit A Support Ticket

Yep, send it off!

TROUBLESHOOTING?

Happy to Help!

Wonderful!

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?