Raleigh

To begin, you’ll want to visit the “ProPhoto > Manage Designs” screen in your ProPhoto software, and scroll down to locate the included Raleigh 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 to start working with Raleigh privately.

Customize vs Go Live – 7

A simple automatic onboarding process happens when you activate the Raleigh design copy.

ProPhoto will automatically create the three pages it needs – Home, Blog, and Portfolio. You will see these in “Pages > All Pages” 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. Later on you can create more pages, adjust what page is the home or posts pages and create and assign more layouts.

Raleigh begins with four layouts

1. Home Page Layout – for the static front page
2. Single Galleries Layout – for all the gallery pages
3. Portfolio Landing Page – a layout specifically for your portfolio landing page
4. Base – the layout that pages get when one is not specifically assigned. All your static pages and post pages will receive this layout by default.

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

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, seen on the right side in the example above. Fallback images are uploaded to grid styles 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 used when editing the WordPress content module > Excerpt Styles > Grid Excerpts.

At this point, it’s time to begin personalizing the front page layout 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.

Menus

Raleigh comes with three menus. These will all be set up and should work if you choose to import the demo content. Several menu items (about, details, contact) 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. Check out the menus overview for details.

Main menu

The main menu module sits in the topmost block called Logo & Navigation 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. Hover the topmost block with the menu 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

Mobile Menu

The mobile menu is the same as the main menu; it’s just displayed vertically in the slideover block. View and edit the slideover block and mobile menu by using the view mode button and clicking the tablet or phone icons. The style of the mobile menu is changed via options in that menu module.

Logo

The Raleigh logo is a simple tile with one text layer. Unlock the logo and navigation 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.

Carousel Gallery Block

The gallery below the logo and menu is a module displaying a gallery called “Homepage Carousel Gallery.” You’ll want to edit that gallery in “Elements > Galleries.” There you can remove add and reorder images. 

You can also edit galleries in the WordPress Dashboard “Galleries > All Galleries”. See the galleries overview for more details. To change the gallery or gallery style used in the module, edit the module and go to Gallery Settings. Raleigh comes with a few gallery styles you can try. Or you can edit them or create new ones. 

Welcome block

Simply click in the text modules and type in your own text. See “Fonts and Text Styles” for how font styles are applied. The image on the right is in a graphics module. Edit the module, delete the demo image then use the Add Graphic button to upload your own. 

About block

This block has a few more things going on. It features a special row that is only visible on tablet and phone widths. The other row is then hidden at those widths. Changing the visibility or settings at specific widths is accomplished in the “settings overrides” area using the device icons.

To see both rows together so that you can edit them at once, it’s handy to activate “X-Ray Mode.” This is a mode in the Visual Builder that shows any block, row, column or module that might be hidden. 

Another option is to edit the one row in desktop/laptop modes and the other in tablet/phone.

Background

The entire block has a background of green leaves. The default image is a tall portrait image. That type of image will work best to achieve the overlapping nature. The same image is used in the mobile row, it’s just that the background-position is changed to cover the entire area in those cases. All you need to do is swap out the block background if you don’t like the default image.

Text and image

Again edit the text by clicking into the text module. Edit the image by editing the graphics module. You’ll need to edit the text and image in both rows using the methods described above.

Session Info Block

The graphic elements you see in this block are created as tiles, which are layered composites that feature images, text, shapes, animation, and other hover effects. Edit a tile by clicking the edit icon for the graphics module from which it is displayed. The video below shows this process for the logo. You can edit text layers by typing in your own words, replace the images in the image layers, and lots more. The screenshot below shows how to edit one of these tiles. You can always edit any tile at any time in “Elements > Tiles.”

Testimonial Block

Edit the block to swap out the background image. Click in the text modules to change text. Then you are done! Here are some details to get into the nitty gritty.

• The background color for the text comes from the row.
• The indentation of the row comes from the padding settings on the block.
• The text margin inside the white row comes from the column padding.

Contact Form Block

The main thing here is the form. Make sure to set the email address for the form submissions in “Settings > Forms.” To add more fields or adjust the style of the form itself edit the form module.

The submit button is a tile, which you would edit in “Elements > Tiles.”

Footer Blocks

The footer block has 3 columns. The right and left columns have the two other menus show in Elements > Menus. Edit the menu module with “seniors, weddings and lifestyle” and make sure they connect to the galleries you want. The “read the blog, contact and back to top” links should work out of the box, although you can edit the text of each item if you want.

The images are actually from a gallery that has three images in it called “Mock Instagram Feed.” To continue using this replace the images when editing that gallery. Or, if you prefer to display an instagram feed, delete the gallery module and add a grid module. Then choose Instagram as the grid type. You’ll need to authorize Instagram in “Settings > Social” first. If you have a favorite Instagram embed code you like, use a WordPress custom HTML widget in “Appearance > Widgets” to paste that code in. Then display that widget via a widget module.

The social icon links are in a graphics module. Edit the module, click on each item and paste in your own social links. 

Edit the portfolio layout by unlocking the menu block and clicking the portfolio link.

The grid module featured in the demo will be present but there won’t be any galleries added to it yet. You’ll see an empty placeholder. So if you don’t have any galleries you will want to make some first, even if you just throw a few images in at the start. At some point edit the grid module and add some galleries. All this is shown below.

The block actually has two grid modules. They are meant to display the same three galleries. The modules on desktop/laptop use a rollover style grid. The modules on tablet/phone use a text below style. The reason for this is to make it easier to navigate on touch devices. Edit the mobile grid module by viewing tablet mode and going through the same process as you just did.

If you prefer to have just one module at all widths, simply delete this module that shows at smaller widths.

The Base layout is the layout that applies to most of your pages and posts. That is because it is set to be the default layout. As such, to edit this layout simply navigate to any post or page or archive page in the Visual Builder. Or, do the same from the front end and then enter the Visual Builder.

For now, click the blog menu item to see how the blog looks and make any tweaks to the base layout. The WordPress Content Area block is the block to concern yourself with. Inside this block is a WordPress Content Module, which displays the content you add to a post or page. 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. The video below shows how to adjust the excerpt grid settings, specifically.

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