Native

To begin, you’ll want to visit the “ProPhoto > Manage Designs” screen in your ProPhoto software, and scroll down to locate the included Native design. Click the Create New Design button to make a copy.

After the assets download, a popup will ask you if you would like to create the demo WordPress pages and content. Most people should choose “continue” so that the starting point is as close to the demo as possible. 

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 (or Test Drive, if you’re working in Test Drive mode) to start working with Native privately.

Customize vs Go Live – 7

A simple automatic onboarding process happens when you activate the Native design copy. During this process, ProPhoto will automatically create the six pages it needs – Home, Blog, About, Contact, Information and Testimonials. You will see these in the “Pages > All Pages” area of WordPress:

If you already have pages with those titles, the existing pages will be used. The pages titled Home and Blog will be designated as the “Static Front Page” and “Blog Posts Page.” All the layouts in the design will be assigned to the corresponding pages.

The links in the default menus will connect to these pages, as well. What this all means is your site should look like the demo right out of the gate. Pretty sweet huh? 🙂

Later on you can create more pages, adjust what page is the home or posts pages and create and assign more layouts.

Native begins with nine layouts

1. About – for the “About” page
2. Blog – for the blog posts page
3. Contact – for the “Contact” page
4. Home – for the static front page (“Home” page)
5. Info – for the “Info” page
6. Single Gallery – a layout for all the gallery pages
7. Single Post – a layout specifically for individual blog post pages
8. Testimonials – for the “Testimonials” page
9. Base – the Default Layout that pages get when one is not specifically assigned. All your static pages and post pages will receive this layout by default. We strongly recommend leaving the Default Layout setting to the Base layout and not changing.

You can assign new layouts to other WordPress pages at any time. We recommend copying the default layout for new versions.

Native comes with two menus. These will all be set up and should work if you choose to import the demo content. The main navigation is the “Menu Open” menu structure, which is what shows on all pages when clicking the “Navigation” button in the upper left corner.

This main menu module sits in the slideover block called Menu Open, which is present in all your layouts. It is a shared block so you can edit it from any page. Here are the steps for editing the main menu links which are shown in the video below.

1. Click the “Navigation” link to open the slideover. Hover the block and click the lock icon. This unlocks a shared block.
2. Click continue to edit the shared block
3. Hover the menu module and click the editing icon
4. Edit the individual menu items in the left sidebar or create new ones

And the other menu structure is the vertical nav menu that shows at the top of the home page.

In this menu, several of the menu items (Gallery and Reviews) simply scroll to different parts of the home page by default. These are special scroll-to links which take the visitor to a specific part of the page. You should not need to change any of these links. But at some point you may want to add items to the menu or edit existing ones. (To do so, just click to edit that menu module.) Check out the menus overview for details.

If you don’t have any blog posts, now is a time to start creating a few! Even if you create temporary dummy posts, it’s a good idea to have 5 or 6 so you can see how they will look. Add some text and at least one image to each post. Only after you have some published posts can you get an idea of what the excerpts grid will look like on the blog posts page.

Each grid item uses an image from the post for the thumbnail. You may want to review how to set feature images. You can provide a specific Featured Image in your WordPress post editor for use as the grid photo. This image does not have to be in the post itself. Otherwise, the first image in your post or the first gallery image will be used for the grid thumbnail.

If a page does not include a Featured Image, your grid will try to use a photo from the content of the page, or from any ProPhoto gallery which appears in the page content. If neither of those can be found, a fallback image is used instead. (Fallback images are uploaded to grid styles and are edited in “Elements > Grids > Styles > Edit style > Advanced.”)

Grid appearance and behavior is controlled through each grid style. These are edited in “Elements > Grids > Grid Styles.” See the grid style in use when editing the WordPress content module > Excerpt Styles > Grid Excerpts.

At this point, it’s time to begin personalizing the front page with your own content using the Visual Builder. Enter the Visual Builder for the front page by clicking “ProPhoto > Customize” in the WordPress admin area or by clicking the customize button while viewing the page. The Visual Builder is where you will make all your ProPhoto content and settings changes.

Logo

The Native logo is a simple tile with one text layer. Unlock the Logo block, edit the module and see the list of tiles populate on the left. Find the Logo tile and edit it. Finally click on the text layer and change the text.

Gallery Thumbnails

Directly below the logo and next to the vertical nav menu on the home page are four different gallery thumbnails. Each of these are also Tiles, displaying by way of graphics modules within the layout. To edit the thumbnails themselves, you can click to edit the module, then click to edit the Tile. Then, when editing the tile, you can edit the image layer, and replace the default image with your own. For each of the 4 tiles, recommended image sizes are:

• Gallery 1 Tile – 1308 x 1140
• Gallery 2 Tile – 1308 x 868
• Gallery 3 Tile – 1308 x 672
• Gallery 4 Tile – 1308 x 942

When you replace each image, make sure to leave the “This is a retina(2x) sized image” box checked:

And to edit where these items link to, you can click on the module and edit the “Links to” field like so:

Call to Action block

Further down on the home page is a block with an image and a View Pricing link:

The text is displayed via text modules, which you can easily click to modify. And the “View Pricing” button is a graphics module that can be edited like the Gallery graphics described above. The image on the left however is a column background image, and the black border for the content on the right is a column border. Both of which can be accessed like so:

Instagram Feed

To display your own instagram feed in Native design, first go to the “ProPhoto > Settings > Site Settings > Social Media” area, and authorize your own Instagram account in that settings area.

Next, go to the “Instagram” block and click to unlock, then click to edit the grid module. Click the “Grid Settings” tab and change the Grid type from “Custom” to “Instagram.”

Footer Block

The social media links down in the footer area of the site (Facebook, Instagram and Twitter) are all individual tiles displayed within one graphics module. So to edit the URLs that each links to, unlock the Footer block, click to edit the graphics module, and then click on each item and edit the “Links to” field, as discussed above for other graphics modules.

The display in the About and Contact layouts is very similar to the Call to Action block in the Home layout. The images shown are column background images. And the black border around the text are column border settings.

Most everything else in the page is a text or graphics module that can simply be clicked to be edited.

Near the top of the Information layout are 3 different thumbnail graphics that scroll you down to other information further on the page. You shouldn’t need to worry about changing the links themselves. But to modify the image, you can click to edit the graphic modules, and then edit the tiles specifically themselves.

The size of each image you can use to replace the default image layers are 1328 x 1852px.

Other items in the layout are text modules, which can be clicked to modify.

At the top of the Blog layout is a “Featured Post” block. The intention is that you can include a title, text, background image and link to a particular post that you’d like. Editing the text is pretty straightforward; click the text modules to edit.

As for the image, that is set as the block’s background image:

And to edit the URL that the “View Post” link goes to, click to edit that graphics module:

The Single Gallery, Single Post and Base layouts are all very similar. They contain the logo and nav at the top, content in the middle and then the Instagram Feed and Footer at the bottom. In almost all cases, you will want to leave the blocks and modules in these layouts intact.

The WP Content block is the block to concern yourself with in these layouts. Inside this block is a WordPress Content Module, which displays the content you add to a post or page (or your gallery). Anything from WordPress displays in this module. Scroll to the bottom of the this module to edit the style of the content displayed in that module. Review the content module overview for details.

Take care not to delete this block or module! If you do, none of the WordPress content will display.