This tutorial explains how the free Agency design pattern for ProPhoto can be modified. Check our live demo to see what Agency looks like.
About the Visual Builder
If you aren't already familiar with the Visual Builder you may want to check out our Visual Builder guide first.
In general, Agency was created to behave as a 'single-page site' design. That is, your front page is made entirely in one layout, and contains all the main sections of info for typical visitors in one page, including:
- A logo & menu area up top
- A large 'welcome' image and text
- An informative section about services/products
- A grid area linking to the recent posts on your blog
- An 'about' section for your business
- A 'team' section for bio info
- A 'featured' section for affiliates or other badges
- A contact form
In many cases, you may not have need for other pages of your site. But you're welcome to create other WordPress pages and the Single Post/Page layout will be applied to them. Open the slide-downs below for tips on specific steps or view them in order.
Create a design copy
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.
When you click to Customize a design instead of Go Live, your design will be visible to you and other admins when signed into WordPress. Visitors will continue to see your Live Design so you can work privately on your customizing design. Learn more in our Create and Manage Designs guide.
Automatic page creation and layout assignment
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
- Home Page - for the static front page
- Blog Page - for the main posts page
- Single Galleries - the default for all of the gallery pages
- Single Post/Page - the default for new WordPress posts and pages
- 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.
How to customize menus
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.
- Hover the topmost block with the menu and click the lock icon. This unlocks a shared block.
- Click continue to edit the shared block
- Hover the menu module and click the editing icon
- 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.
Provide a featured image for blog posts
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.
If neither of those can be found, a fallback image is used instead. 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 use when editing the WordPress content module > Excerpt Styles > Grid Excerpts.
Personalize layouts
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.
If you have questions about using different parts of your design, search this website for help, or contact us for guidance.
Comments
0 comments
Article is closed for comments.