Avenue

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 Avenue design. Click the Create New Design button to make a copy.

After the assets are all downloaded, a popup will give you the choice to create the demo WordPress pages and content used in the design. Choose “continue” to allow that. 

Once the import process is finished you will have the option to rename and save this new design copy. Give your new copy a unique name and description so you can find it easily later.

Click Save 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 Avenue privately.

If you are running ProPhoto in test drive mode, you will want to click Test Drive to start customizing the design. If this is a new site or you are using an under construction plugin you can simply go live.

Customizing vs Go Live design

About the visual builder & layouts

If you aren’t already familiar with the Visual Builder or how it works, you’ll want to learn a bit about it before you modify the Avenue design. We have plenty of info in our Visual Builder guide and a great video about using WordPress and ProPhoto together.

We also recommend learning about Layouts, since the Avenue design uses several different layouts for specific pages. See our Layouts guide for more information.

Create the front and blog pages and any other necessary pages

The Avenue design is intended to have a static front page and separate blog page to display your posts. These pages were created for you automatically if you choose that option during the creation of the design. If that’s you, skip to creating some blog posts or customizing the front page. If you did not choose to have that done and if you don’t already have these pages, you will want to go to the “Pages > Add new” area in WordPress and create two new WordPress pages, “Home” and “Blog” (or whatever you would like to title the pages).

Be aware that the design is also intended to operate as a single page site whereby the menu links scroll the user to specific sections right on the front page. If you like this behavior, then no other pages should really need to be created at this time. However, if you prefer to change the design’s behavior so that the menu links go to separate, standalone pages, you will want to create these additional pages in the “Pages > Add new” area of WordPress as well.

Assigning the front page and layouts

Once your pages are created and published, go view the site and launch the Visual Builder by clicking the “Customize” link in the top WordPress admin bar. When launched, navigate to the Layouts area. Here you will set the front page and blog posts page to the “Home” and “Blog” pages you just created.

After you make those selections, ensure that the Home Layout is assigned to “Your Front Page.”

Create some blog posts

When you are done with the pages, you may also want to create a few blog posts to ensure that the front page of the site is populated properly. You can create your posts in the “Posts > Add New” area.

Now that the structure of your site is set up, you can then begin customizing. To start, view the front page of your site and click the “Customize” button in the WordPress admin bar to launch the Visual Builder. Because the Visual Builder allows front-end editing, most of the items you should be able to navigate to and edit simply by clicking. However, there are a few specific items to point out.

Front page gallery

The gallery near the top of the design is actually displaying as a block background gallery, which is set in the “Hero Image” block:

In this settings area, you can change the gallery to one of your own. Or, if you go to the “Elements” > “Galleries” area, you can click to edit that gallery titled “Home Page Gallery” and replace the default images with your own. We recommend you size your gallery images as shown in our image sizing guide.

Editing graphics on the front page

Several of the graphics on the front page are actually Tiles, displaying within the layout using graphics modules.

You can edit these Tiles by going to the “Elements” > “Tiles” area. And you can modify where the icons link to by clicking to edit the graphic module, selecting the image, then editing the “Links to” field.

Pricing block background image

On the front page down in the “Details” section is a background image. This is a block background image that is set for the the “Pricing Block.” You can edit by going to that block’s settings and changing the block background in the appearance tab.

Social media icon setup

Similar to the other graphics described above, to change where the social media icons in the Footer area link to, you will want to click to edit those graphic modules. And then input your own social media URLs in the “Links to” fields for each icon.

As mentioned before, the Avenue design was created to operate as a single page site design so that when you click a menu item, it scrolls you automatically to that particular section right on the front page. If you like how this functionality works, you can just leave those menu links as they are and just customize each section on the front page.

However, if you’d prefer that those menu links instead take visitors to individual pages instead, you will want to go to the “Elements” > “Menus” area and then click to edit the “Default” menu structure. Once you’ve done that, then you can click to edit each individual menu item and change the page that each is linked to. (By default, they are set to link to the “Home” page and to their own specific block on that page.) Our menus guide covers editing menu links and the different types available.