Layout Editor

ProPhoto 6 allows websites to be built and highly customizable with several parts known as blocks, rows, and columns. 

Template Layout Area

Designs have a template layout item, which is the highest level in the hierarchy of customizations. Navigate to the template area by going ProPhoto Customizer > toggle 'Template' tab > Layout > Template at the top left of the window.

This area contains all of your main template customizations. All customizations made in the template layout area will fall down into the blocks, rows, and columns of all page templates. Whatever elements you wish to apply to the entire design should be applied here. 

Suggested customizations made to the template layout area are : 

  • background images, colors, or galleries
  • desired sizing (max row width or window height)
  • text and font styles

More about controlling the appearance of your template layout can be found on the ProPhoto website

Blocks

The second level of the layout customizer is the block layout item. Within blocks, live rows and columns. Different sections of a page template can be grouped together using blocks. You can change customizations to fit that block alone, that are different than other blocks. 

You can rename the blocks anything you'd like. This makes it easier to find specific areas of your site when you begin customizing. 

Blocks inherit customizations from the template layout area, but it is easy to override those customizations if you wish to do so. 

Rows

Inside blocks, you will find rows, which is the third level of the layout customizer. You can have multiple rows within a block. The row layout area will inherit customizations from both the template and block layout areas. You can override these customizations. 

Screen Shot 2017-01-13 at 12.40.27 PM.png

Columns

Inside rows are columns, which are the fourth in the hierarchy. Columns allow you to divide up the row vertically and add widgets if you choose. All columns inherit from layout items above it (rows, blocks, and templates). If there are customizations you wish to make to a specific column, you may override the customization that is inheriting. 

Screen Shot 2017-01-13 at 12.45.28 PM.png

Moving Layout Items

Moving layout items is easy because of the drag-and-drop feature added in this new update. Click and drag between columns to resize the columns. 

Making Blocks sticky

Each block in the ProPhoto customizer has the ability to be 'sticky'. Sticky simply means that when scrolling down a page, a certain block 'sticks' to the top of the browser. This allows visitors to easily navigate throughout your site. In order to make a block sticky, hover over the block and click the image of a tack (it should turn green).

Sticky-Items.jpg

Also, check out the tutorial about the layout editor on the ProPhoto website.

Padding, Borders, and Margins

The layout editor allows for extensive customizations to make your site look the way you always envisioned it. Remember that layout items have a parent that it inherits customizations from. There are two specific ways to create space around specific items - padding and margin.

The ProPhoto team has created very helpful tutorials on these elements that we could not explain any better, so be sure to check those out!