This tutorial explains how the free Avenue design pattern for ProPhoto can be modified. Check our live demo to see what Avenue 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.
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.
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.
Setting up pages and assigning layouts
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.
Customizing the front page
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. Learn more about galleries in our overview 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 clicking on them directly.
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 Block 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.
Editing menu links
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.
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.