Agency

To begin, you’ll want to visit the “ProPhoto > Manage Designs” screen in your ProPhoto software, and scroll down to locate the included Agency design. Click the Create New Design button to make a copy.

After the assets download, a popup will ask you if you would like to create the demo WordPress pages and content. Most people should choose “continue” so that the starting point is as close to the demo as possible. 

A popup will allow you to give your new copy a unique name and description so you can find it easily later. Click Copy and the new copy will be added to your other saved designs further up the screen. When you’re ready, click Customize to start working with Agency privately.

Customize vs Go Live – 7

A simple automatic onboarding process happens when you activate the Agency design copy. ProPhoto will automatically create the two pages it needs titled “Home” and “Blog.” You should see them in “Pages > All Pages”

If you already have pages with those titles, the existing pages will be used. These pages titled Home and Blog will be designated as the “Static Front Page” and “Blog Posts Page” in Layouts in the Visual Builder. All your pages will be assigned to their corresponding layout.

The links in the default menus will connect to these new pages, as well. What this all means is your site should look like the demo right out of the gate. Later on you can create more pages, adjust what page is the home or posts pages and create and assign more layouts.

Agency comes with five layouts

1. Home Page – for the static front page
2. Blog Page – for the main posts page
3. Single Galleries – the default for all of the gallery pages
4. Single Post/Page – the default for new WordPress posts and pages
5. Base – the layout that pages get when one is not specifically assigned (like new static pages)

You can assign new layouts to other WordPress pages any time. We recommend copying the default layout for new versions.

Agency comes with just one menu. Several of its menu items simply scroll to different parts of the home page by default. These are special scroll-to links which take the visitor to a specific part of the page. You should not need to change any of these links. But at some point you may want to add items to the menu or edit existing ones. Check out the menus overview for details.

Main menu

The main menu module sits in the topmost block in all your templates. It is a shared block so you can edit it from any page. Here are the steps for editing the main menu links (also shown in the video below.

1. Hover the topmost block with the menu and click the lock icon. This unlocks a shared block.
2. Click continue to edit the shared block
3. Hover the menu module and click the editing icon
4. Edit the individual menu items in the left sidebar or create new ones

Mobile Menu

The mobile menu is the same as the main menu; it’s just displayed vertically in the slideover block. View and edit the slideover block and mobile menu by using the view mode button and clicking the tablet or phone icons.

If you don’t have any blog posts, now is a time to start publishing a few! Even if you create temporary dummy posts, it’s a good idea to have 5 or 6 so you can see how they will look in the grid on your home page recent posts grid and on your main blog posts page. Add some text and at least one image to each post. Since ProPhoto Grids create thumbnails from the content of your blog posts, you may want to review how to feature images. You can provide a specific Featured Image in your WordPress post editor for use as the grid photo. Otherwise, the first image in your post or the first gallery image will be used for the grid thumbnail.

When you have blog posts with images, galleries, or a Featured Image, your own photos will be used to create grid thumbnails, demonstrated in this screenshot:

If a page does not include a Featured Image, your grid will try to use a photo from the content of the page, or from any ProPhoto gallery which appears in the page content. If neither of those can be found, a fallback image is used instead, seen on the right side in the example above. Fallback images are uploaded to grid styles are edited in “Elements > Grids > Styles > Edit style > Advanced.”

Grid appearance and behavior is controlled through each grid style. These are edited in “Elements > Grids > Grid Styles.” See the grid style in used when editing the WordPress content module > Excerpt Styles > Grid Excerpts.

At this point, it’s time to begin personalizing the front page with your own content using the Visual Builder. Enter the Visual Builder for the front page by clicking “ProPhoto > Customize” in the WordPress admin area or by clicking the customize button while viewing the page. The Visual Builder is where you will make all your ProPhoto content and settings changes.

Edit background images

The top background image on the home page is a background for the entire home page layout. Edit the layout and in the Appearance tab delete the default an upload your own image. Other background images or background colors are on blocks or rows. Edit a block to view all the settings for the block, row and column.

Consider the contact block at the bottom of the home page. The dark color is set on the block and over the top of that is a transparent image of the world. 

Edit graphics using tiles

Nearly all graphic elements in the Agency design are created as tiles, which are layered composites that feature images, text, shapes, animation, and other hover effects. These are some tiles used in Agency:

• the logo
• Tell me more button
• Menu button for tablets & phones
• disc graphics in the ‘about’ section
• social media icons
• bio images in the ‘team’ section
• …and more

Edit a tile by clicking the edit icon for the graphics module from which it is displayed. The video below shows this process for the logo. You can edit text layers by typing in your own words, upload your own image layers, and lots more.

 Edit other layouts

You must be viewing a page to which a layout is assigned in order to edit it. Accordingly, to edit the single post/page layout, you must be viewing a post or a page. To edit the Blog Page layout, view your main blog page and to edit the single galleries layout, go to the url of a single gallery. When in the Visual Builder there are some helpful ways to view other pages.

1. Click any link!

Just click any link in the visual builder as if you were on the front end. If the link is in a shared block you will need to first unlock the block.

 2. Pages dropdown

At the top of the Visual Builder is a Pages link that will list all your published pages. Click on a page and you’ll be taken to that page but remain in the Visual Builder. 

3. Layout links

In the Layouts area if a layout is assigned to a specific page you can click the page type or title and it you will be taken to that page in the visual builder

Single posts and pages

To view a single post page use the pages dropdown to select the blog page and then click on one of the excerpt grid thumbnails.

Each post and page receives a header with a background image under the title. Note that the background images will be the first or featured image for each page or post.

WordPress content modules

The content you add to a WordPress post or page displays in a layout via a WordPress content module. In Agency this is in a block called “WordPress Content – Default.” Edit this module to adjust the style of the content displayed in that module. Review the content module overview for details.