"ProPhoto" > "Customize" > "Buttons"
ProPhoto “Buttons” is a powerful tool for creating and editing layered custom graphics on your site. It virtually eliminates the need for Photoshop when customizing an included or purchased design.
The “Buttons” feature allows you to create and edit small reusable graphic elements which can be employed in a variety of ways throughout your ProPhoto site. You can use them for your site logo, menu items, widget images, and more. A complete list of button enabled areas is at the bottom of this tutorial.
ProPhoto’s included designs, as well as most add-on designs available for purchase make extensive use of Buttons. That means that if you’re making your own design based heavily on an included or paid add-on design, you’ll probably be editing some of the design’s Buttons. If a design comes with Buttons you will see all of them in the main Buttons screen. Here you can create, edit, copy and delete Buttons.
You would copy a Button when you want to use a similarly styled graphic multiple times, with only small differences in each. For example, you might create a single menu Button. All your menu items will share that look but just with different text. So you copy it multiple times and only edit the text layer. What a time saver!
A Button consists of any number of layers of images and text, each of which has various customization options. We have created the Button editor to be easy to use for everyone. Those that have experience with graphic creation software (like Photoshop) should see some similarities.
Clicking “create” or “edit” loads the Button editor, (pictured above). Here you can layer text and images, styling each layer as you go. Easily create text hover effects or use a sprite image to create an image hover change. ProPhoto cannot downsize these images (They don’t appear in the markup as a flattened image.) so when you create them it’s important to size them precisely. Every change you make is immediately visible in the preview so it is easy to see what your button will look like.
After creating a button you can apply it to your site in a Button-enabled area. After clicking “set image” or “change image” you will see a tab in the upload box called “Choose Button“. That will open an area with all the buttons already created in that design. Select the button you want to use and then click “Use selected button.”
Where to use buttons
- Primary, secondary or vertical nav menu items
- Call to action items
- Custom icon widget images
- Pinterest pin it button
- Slideshow overlay image
- Comments header images (add a comment, link to this post, email a friend)
- ‘Read more’ image for text below grids
- Bio picture
How can I make a button a link?
Buttons themselves are just graphics. You don’t set a link for a button itself. However, a button can be used as a link in the above areas. For example, a call to action item using a button can link to any url. You just paste in a url for that call to action item. The same thing goes for menu items. The actual link is contained in the menu item, but you can use a button for a menu item, just like you can use an image.