WELCOME TO THE BLOG

Using Templates in ProPhoto 6

templates1

A common question that we have gotten from customers over the years is how to differentiate parts of their site to look and function uniquely.  For example, “I want to have a Wedding section on my site, with it’s own unique menu items and design, separate from the Newborn section of my site, is that possible?”  In prior versions of ProPhoto, hacky workarounds could be used to “sort of” pull it off.  But they were a lot of work and rarely achieved what a customer was really wanting.

In ProPhoto 6, we’ve made this totally possible by way of a new feature called templates.  Each template is simply a saved set of customization settings that you can apply to any page type, or individual page that you want.  And you can create as many templates as you’d like!

Template Selection Example

Using the power of templates, you can create completely different layouts and apply them to different areas of your site, allowing you to basically create multiple sites within one.  But templates can also be used for more subtle changes as well.  For example, if you have just one particular page where you want to add a sidebar column that runs alongside your content, you can create a template to do this and apply it to just that one page, without affecting any other pages on the site.

Template Creation

Whenever you want to create a new template in ProPhoto, all you need to do head to the Template Manager area.  There, you can create copies or children of existing templates.  If you create a copy of a template, it is just that, a copy that you can edit however you’d like, separate from the template that you copied it from.

Template Manager Example

This is what the Template Manager looks like…

A child template on the other hand will still inherit all of the settings from the parent of which it is created.  That way you can make changes to just the parent template and they will flow down to all of the child templates automatically.  This is very helpful where you are wanting templates that share many common elements, but maybe have just a few slight variations.

Template Assignment

To assign templates to your site, you can do it very easily right within the Template Assignment area.  This area allows you to assign any template you’ve created to any particular page type on your site, like individual post pages, category archive pages, etc.

Template Assignements Page Example

Or, if you want to get even more detailed and assign templates to individual pages specifically, you can do that right within the WordPress page editor.

Individual Page Template Assignment Example

ProPhoto 6 Fonts

workingwithfonts

It stands to reason that your photos are the most important thing on your website. But you know what comes in as a close second? Fonts. That’s why ProPhoto 6 has made the selection of great typography even more flexible and powerful.

What is a font style?

The new font styles tool allows you to create a preset for text styling where you can choose the typeface, color, capitalization, size, spacing, and much more. Then, you can use your font style presets anywhere in your design.

font-styles-example

font styles each preview so you can compare visually

When you want to alter the appearance of a font style, you can modify one and all text on your site which uses that style will update at once. Simple! You can also duplicate a font style and edit the copy if you want to use a variation for only some of your site headlines, text, links, etc., or create a completely new preset to use.

Which font typefaces can be used?

Google Fonts selection is built right into ProPhoto 6, giving you free access to over 800 font families. Simply type in the name of a font (with automatic popup suggestions) and select what you want. All fonts are licenses for use on any website without royalties.

p6-selecting-google-font

simply type the name of any Google Font

But what if you have a special font that you own (and have license to use on a website) which isn’t available as a Google Font? ProPhoto 6 also supports WOFF format, so if you own a font in this format, or if you have the license to convert this font to a web-friendly format, you can drag-and-drop your font right into ProPhoto and use it in a font style.

p6-woff-upload

Fonts in WOFF format are available from many websites, such as FontSquirrel.com, MyFonts.com, and many others, so you have lots of options to find typeface as unique as your photography.

ProPhoto 6.4.0

640

Today we’re pushing another auto-update with new features to ProPhoto 6, version 6.4.0. Highlights of this release include:

  • Thumbnail-style galleries
  • Gallery “Full-window” mode
  • Responsive call-to-action items

Thumbnail-style galleries

P6 galleries now can be displayed as a responsive grid of thumbnails:

2016-06-29_11-33-23

These thumbnail galleries can be cropped or masonry style, and you can control the sizing like you can with regular ProPhoto grids:

2016-06-29_11-35-06

2016-06-29_11-38-07

You can choose to have the gallery be only the thumbnail view, or to have clicks on individual images spawn full-screen or full-window gallery mode.

Gallery full-window mode

Galleries now support two “expanded” modes — fullscreen and full-window. Fullscreen is the same as what has been in P6 all along — a fullscreen experience without any browser chrome (for browsers that support the HTML5 fullscreen API). In 6.4.0 we’re adding “full-window” mode. This is similar to fullscreen, except it covers the full browser window and not the full computer screen. If you have the opacity of your full-window background turned down to less than 100%, you can see your site content beneath, as shown below:

2016-06-29_11-47-37

This is a really slick effect, and together with the new thumbnail-style galleries, full-window mode can be used to create a more modern, immersive version of the traditional “lightbox” style gallery.

A really great benefit of the new full-window mode is that browsers that don’t support fullscreen can now get full-window as a fallback. iPhones and iPads do not support HTML5 fullscreen mode, so until today, we hid the fullscreen button for galleries on these devices. Now, with full-window mode, these devices get a great looking quasi-fullscreen experience.

2016-06-29_11-51-03

We even style the full-window to look like your fullscreen settings if we’re using it as a fallback for fullscreen on an unsupported device, so you can control separately your fullscreen background and full-window background appearance.

Responsive Call-to-Action Items

ProPhoto 6.4.0 also adds responsive call to action items. To set them up, go to the new area in the customizer:

2016-06-29_11-57-52

The Call-to-Action area has a library of 14 different types for you to choose from, and you can assemble your call-to-action items in any order you want:

2016-06-29_12-03-17

Each call to action item is configurable:

2016-06-29_12-05-45

And most of them allow you to set the item to be text, an image, or a tile:

2016-06-29_12-07-22

Create blocks that stick to the top

stickyblocks

A little more than a month ago, a feature called “sticky blocks” was added to ProPhoto 6. When vertically scrolling a page this sticky option makes it possible for the content of a block (maybe the logo or a menu) to stick to the top of the browser window. This is great for encouraging viewers to visit other areas of the site, especially when on a page with a lot of content, like your main blog posts page. We’ve seen a few sites taking advantage of it, but we’d love to see more!

Any block item in “ProPhoto > Customizer > Layout” can by made sticky. Simply hover the block and click the image of a tack.

sticky_pin

Whatever is in that block will then stick to the top when it hits the top of the browser window. If you only want a menu to stick to the top (which is pretty common) then create a block that only contains a menu widget. This is what is shown in the gif below. Notice how the menu that sticks starts does not have to start at the top of the layout.sticky_blocks_example_low

 

Can I change the appearance of the sticky block once it hits the top?

Yes! You have a few block customization options that you can change for only the sticky state. Click on the gear icon for the sticky block.sticky_block_edit Any customization area that has a pin image near the viewport breakpoint images can be customized for only the sticky state.  sticky_customization_option

For example, if you don’t want the block to be as tall when it is in the sticky state you could reduce the top or bottom padding after clicking this sticky icon (shown above).

Can I turn the stickiness on/off based on viewport width?

Yes! You can do this as well, although it’s not really a feature specific to sticky blocks. If you want a block to be sticky on, say.. all devices except small mobile devices,  you would create two separate blocks. Using layout item responsive breakpoint visibility options, one block would be set to display on tablet, laptop and desktop, and the other (non-sticky) one would be set to display on mobile phones.

ProPhoto 6.3.0

630

Today we’re pushing another auto-update with new features to ProPhoto 6, version 6.3.0. Highlights of this release include:

  • Custom grids
  • Tons more template assignment possibilities
  • New blocks/rows always added to child templates
  • Tile text alignment
  • Tile text linebreaks

Custom Grids

Similar to the feature in P4 and P5, you can now create grids in P6 made of custom items. Custom grid items are found in the ProPhoto Settings screen, and each one consists of title, url, image, and text:

2016-06-22_13-36-35

Then, you can create and insert a grid made up of these custom items in the customizer as a widget, or into a post or page:

2016-06-22_13-39-59

Template Assignments

You guys asked for it, so we made P6 way more flexible when it comes to assigning templates. In the customizer, we added an assignment for 404 pages, plus options to set templates for individual blog post categories, custom post types, proofing gallery page types, and more:

2016-06-22_13-46-26

Plus, you can now set template overrides for individual blog posts, galleries, and custom post type posts:

2016-06-22_13-49-12

Adding Blocks & Rows

One thing that has proved to be unintuitive and time-consuming for our users has been the fact that after you break template inheritance for a group of blocks or rows in a template, you can no longer add a block or row to that group in a parent template, and have it show up in the child with broken inheritance. We’ve corrected that in 6.3.0 — now, now whenever you add a block or a row in any template, it will always be added to all of the child and grand-child templates. We think this will make templates easier to use, and your site design more maintainable.

2016-06-22_13-55-18

And more…

6.3.0 has more good stuff in it too, including a handful of nice enhancements to the “Tiles” feature, and some bugfixes. For all the gory details, as always, head over to the changelog.

What’s Next?

More good stuff is coming soon as well. We have two additional big features both nearly complete: thumbnail-style galleries, and responsive call to action items. We’re pretty confident 6.4.0 will be out with those two features and more in around one week.

Get a $30 rebate when you choose our recommended host, Bluehost