Can't find what you're looking for? Search below:

Your ProPhoto Version

Square

This tutorial explains how the free Square design pattern for ProPhoto 6 can be modified. Check our live demo to see what Square looks like.

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

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 Square 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.

Use the on-boarder

Use the ProPhoto on-boarding wizard to setup a design with the basics. When you activate the design from "ProPhoto > Manage Designs" (or when you click the Setup button in that screen) you will be guided through the setup of a few key items, including: Finally, you'll be introduced to the ProPhoto Bar which helps you find where to change background images, where to locate widgets, and even switch designs as you view your site. This brief video explains the on-boarding wizard:

About the layout editor & templates

If you aren’t already familiar with the Layout Editor or how it works, you’ll want to learn a bit about it before you modify the Square design. We have plenty of info in our Layout editor guide.

We also recommend learning about page Templates, since the Square design uses them for different pages of your site. See our Designs & Templates guide for more information.

Setup a front page

The Square design is intended to have a static front page and separate blog page to display your posts. You should have set this up already by using the design On-boarding Wizard mentioned previously.

After creating the front page for your site, edit that page in WordPress and check the box to hide all page content, seen in this screenshot:

p6-hide-page-content-checked

Update your page and ProPhoto will supply the content (the grid) for the front page after you’ve created the grid in the next steps.

Setup additional pages

The front page of Square is a grid which links to some posts and pages from your WordPress site. You should have setup these pages by using the design On-boarding Wizard mentioned previously, but if you did not, now is a good time to create them.

In WordPress, click “Pages > Add new” and create each of the following pages, if you do not already have them on your site:

  • About
  • Portfolio
  • Investment
  • Contact

Each of these pages will need to have a featured image supplied. This is the black graphic with white text, seen in the front page grid. You must click to download these images to your computer, and unzip the file. A .psd version is included for those that want to edit the text in Photoshop. The font is a free Google font called “Oswald.” Each corresponding image can be uploaded in the page editor in WordPress, as demonstrated in this video clip:

Similar to the front page steps above, you will also hide each page content with the checkbox, seen here:

p6-hide-page-content-checked

If you skipped the on-boarding wizard mentioned earlier, you will also need to apply the proper Square page template, seen in the side of your page editor like this:

p6-square-page-template-about

Repeat the process for each page you intend to use or link from your front page grid in later steps.

Create some blog posts

When you are done with the pages, you may also want to create a few blog posts before you proceed to the next step – the front page grid you will create next steps will link to several blog posts. Having a few posts published ahead of time will be helpful when you proceed to the next step.

Create the front page grid

To recreate the large grid shown on the Square front page, go to the “ProPhoto > Customizer > Layout” area and select the Square Home Page template.

In the Navigation Block section, click to add a new grid widget below the placeholder, seen in this video clip:

The grid widget will need these settings to achieve the same appearance as the demo:

  • “Select posts/pages” grid type
  • “Overlaid text on rollover” grid style
  • image crop ratio = 1:1
  • gutter = 0
  • max columns = 4
  • item min width = 200
  • item ideal width = 300
  • item max width = 900

Since you have created the pages you need in the previous steps, you can drag the content you want into the grid. Use the filter dropbox to limit by posts, pages, or even search for content you want. Drag each item from the left to the right, placing each item in-order. You can use this process to achieve the same setup/appearance as seen in the demo:

  • a blog post
  • the Galleries page
  • two blog posts
  • the Investment page
  • two blog posts
  • the About page
  • two blog posts
  • the Blog page
  • one blog post

We demonstrate all of this setup in our video clip:

You are welcome to make adjustments and change this grid styling & configuration any time, just check out our Grids guide any time.

Edit the grid with new posts

As you have probably noticed, this grid is created manually – posts are not added to it automatically.

You will probably want to edit this grid widget periodically to update it with newer blog posts, since it will not update automatically with new posts when you create them.

Editing the Square menu links

In earlier steps, the on-boarding wizard helps you link the menu to your pages, but if you skipped that step, you can return to the beginning of this guide to setup your design menu links again.

Otherwise, you can go to the “ProPhoto > Customizer > (toggle top-left switch to “Design”) > Menus” area any time to edit your menu. Select the Primary Menu in this screen to work on your links, demonstrated here:

p6-square-primary-menu-area

We recommend using the Page link menu item for each page you create. Use this same workflow for each page you want to link from your menu – first creating a WordPress page, then adding or editing a menu item to link to it.

You may also work with the Sidebar – Archives and Sidebar – Categories menus, but these merely contain automatic menu items that you shouldn’t need to modify.

Personalize page content

Square makes use of page templates to create the content & layout for the pages it uses by default. (created in earlier steps)

To edit specific pages used by this Square design, you’ll want to select a specific page template at the top of your Layout screen, seen here:

p6-square-select-template

Then you can use the Layout Editor to customize the template.

You will have the easiest time finding and editing different parts of each template by using the ProPhoto Bar tool, so we strongly recommend using this tool to link directly to each part of each page template while viewing your page in your browser.

Header images on pages

One special note, the default image you see at the top of each of your pages is a Column Background image. Using the ProPhoto Bar, you can quickly find and replace background images, and you’ll discover that Square places them as background for the right column of your template navigation block at the top of the page layout.

Edit graphics using tiles

A couple of the graphic elements in the Square design are tiles. You can edit these layered composite graphics by going to the “ProPhoto > Customizer > (toggle “Template” to “Design” at the top-left) > Tiles” screen, as seen in this video clip:

These special composite graphics are made of layers of text, images, and shapes. You can use different colors, styling, hover & animation effects, and lots more, so we recommend learning how to work with tiles by checking out our Tiles guide.

For example, to change the text layers in the default logo graphic, select the text layers individually and type your own text into the sidebar editor box, seen in this screenshot:

p6-square-logo-text-layer

If you have your own logo, you do not need to use a tile design at all – you can edit the graphics widget in your base template layout and provide your logo image in it’s place. For more info on this widget type, see our Graphics widget guide.

If you have questions about using different parts of your design, search this website for help, or contact us for guidance.

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