This tutorial explains how the free Explore design pattern for ProPhoto can be modified. Check our live demo to see what Explore looks like.
About the Visual Builder
If you aren't already familiar with the Visual Builder you may want to check out our Visual Builder guide first.
Explore gives you a simple starting point - static landing page linking to a separate blog, portfolio and contact form. Each of these pages have their own layout. Then you can build other custom pages as needed.
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 Explore 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.
Give your new copy a unique name and description so you can find it easily later. Click Save 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 Explore privately or Go Live if you don't mind it being live.
Automatic page creation and layout assignment
A simple automatic onboarding process happens when you activate the Explore design copy.
ProPhoto will automatically create the six pages it needs - About, Blog, Contact, Home, Info and Portfolio. You will see these in "Pages > All Pages."
If you already have pages with those titles, the existing pages will be used. WordPress will designate the Home and Blog as the "Static Front Page" and "Blog Posts Page," respectively. All your pages will be assigned to their corresponding layout.
The links in the default menus will connect to these new 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.
Explore starts with a whopping eight layouts!
- Base - the layout that pages get when one is not specifically assigned (like new static pages)
- About Layout - a layout specifically for your about page
- Blog Layout - a layout assigned to single post pages and all multiple post (archive) pages
- Contact Layout - a layout specifically for your contact page
- Gallery Layout - the layout for all single gallery pages
- Home Layout - for the static front page
- Info Layout - a layout specifically for your info page
- Portfolio - a layout specifically for your portfolio landing page
You can assign new layouts to other WordPress pages any time. We recommend copying the default layout for new versions. It is easier then starting from scratch.
Create posts
If you don't have any blog posts, now is a time to start publishing 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. The first image in the post or the featured image is what will be used as the thumbnail representing the post in grids and excerpts. The main blog page uses a grid.
You may want to review how to feature images. These don't have to actually be inserted into the post. With some posts created you can see how the grid on the blog posts page is supposed to look.
How to customize menus
At this point it's time to start 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.
Explore comes with two menus, a main one and an additional one for blog categories on the posts page. These will all be set up by default and should work. But it's common to want to customize these menus more. Check out the menus overview for details.
Here are the steps for editing any menu. A video below shows this.
- Enter the visual builder when viewing a page.
- Hover a block with a menu and click the lock icon (if present). This unlocks a shared block.
- Click continue to edit the shared block
- Hover the menu module and click the editing icon. Use the popup to edit the style of the menu.
- 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 slide-over block. View and edit the slide-over 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.
Home Page Layout
Now turn your attention to the rest of the content on the home page.
Logo
The Explore logo is a simple tile with three text layers. Unlock the LOGO TILE 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.
Home Slider Block
This block contains one module, a gallery module. It's displaying the gallery called "Home." You can see the name of the gallery and the name of the gallery style being applied when you edit a gallery module.
You'll want to swap out the images in this gallery. You can do that in the Visual Builder by going to "Layouts > Galleries > Home." Alternatively, the gallery can be edited in the WordPress dashboard in "Galleries > All Galleries". Learn more about galleries in our galleries overview.
Home section blocks
Edit the text modules in the layout by simply clicking in them and adjusting the text. The right column in section one and the left column in section 2 consists of 2 separate grid modules. See below for how to edit a grid module.
You'll want to make sure that you've set a Featured Image for the posts or pages you choose for the grid items.
Home Testimonial
The background image is on the block. Edit the block and scroll down a bit to upload your own image.
The transparent background color is on the block if you are interested in changing that.
Footer block
The footer block is present in all 8 layouts. It's a shared block so when you edit it in this layout, the change will apply to this block in all layouts. Much like you did with the menu block edit it, unlock it and click continue. You'll want to edit the single graphics widget in the right column and paste in your own social media URLs. Click in text widgets to edit the text content. Edit the graphics widget to swap out the map graphic, etc.
Portfolio Layout
Switch to editing the Portfolio Layout using the Pages dropdown at the top.
When you first view the page you'll see an empty space on the right side where a 3 column portfolio grid should be.
The module is there, you just need to select the galleries you want to display from the grid. If you have not yet created any galleries click the back arrow at the top left and go to "Elements > Galleries." Create a new gallery or edit ones that are already there. Learn more in our galleries overview.
About Layout
Switch to editing the About Layout layout using the Pages dropdown at the top.
About Intro
Simply click in the text to edit. Edit the image by editing the graphics module.
About Likes List
The likes block has a block background image. Edit the block and click the add image button to swap out the background image.
The white square inside the block background is a row background color.
Info Layout
Switch to editing the Info Layout using the Pages dropdown at the top of the Visual Builder.
Info Block
Here you have just text widgets and a graphics widget. Edit the text in the widget directly. Edit the graphics widget by clicking on the icon, clicking on the graphic item and then the "add image" button to select or upload your own image.
Info Prices Block
This block consists of three columns. In each column is a series of text and graphics widgets. Change the text to what you want. Edit the graphics widgets to reflect your own images.
The light gray column color is a background on the column. To change this color:
- Edit the block
- Click on one of the columns in the top diagram
- Click on the color circle in the background area and select the color you want
Blog Layout
Switch to editing the Blog Layout using the Pages dropdown at the top of the Visual Builder. The Blog Layout shows up on all single post pages and multiple post (archive) pages.
Blog Header
The blog header block is another one that consists of text widgets and graphics widgets. By now you know how to edit them. Click on the text directly. Click the edit icon on the graphics widget.
WordPress Content Block
This block contains the WordPress content module. This is the module that displays the chronological listing of posts the WordPress serves up to your blog posts page. The module controls allow you to change the look and style of the WordPress content. To access those controls unlock the block and click the edit icon at the bottom of the module. You'll then see lots of controls. You may be particularly interested in the Excerpt Style options. For example:
Since this module also displays on single post pages and archive pages you'll use it to edit the content WordPress outputs on those page types as well. For example, comment styling doesn't show up as an option when editing the WordPress Content Module on your main blog page because excerpts don't allow for comments. But that option is available in the module when editing a single post page. Learn more about this module in WordPress content module.
Contact Layout
Switch to editing the Contact Layout using the Pages dropdown at the top of the Visual Builder.
Contact Form Block
There is only one unique block in this layout. It is in two columns with some text modules and a form module in the left column and graphic module in the right column. The form in the contact page should work out of the box. It will send submissions to your email address in "Settings > General". Or you can set one specifically in "Settings > Forms." Edit the style or content of the form by editing the form module itself.
The image in the right column is uploaded directly to the graphic module. Edit the module to replace the image. A portrait oriented image will work best.
Initial Layout
The Initial layout is the layout that applies to any post or page that does not have another layout specifically assigned. That is because it is set to be the default layout. As such, to edit this layout simply navigate to any page except About, Blog, Contact, Home, Info or Portfolio. You might need to create a test page if you are just starting out. The default layout tends to be simple. Here there the same Logo, Tile and Footer blocks that are present on every other layout and a block with the WordPress content module. You can edit those blocks here or in an of the layouts that share them.
This WordPress Content Block is the same block that is in the Blog Layout. 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 this module to edit the style of the content displayed in that module.
Take care not to delete this block or module! If you do, none of the WordPress content will display. In general, you should not make any changes to this block unless you are sure that you want to change something that applies to all pages sharing these blocks or not already assigned different layouts.
Gallery Layout
The Gallery Layout is the layout assigned to individual gallery pages. You see this layout when viewing one of these gallery pages. You can view them from "Galleries > All Galleries" in the WordPress dashboard or by going to the Portfolio page and clicking on one of the gallery grid links.
The layout is almost exactly the same as the Initial Layout. The only difference is that the WordPress content module in the Content Block does not have dates selected in the Header Styles area. The galleries will not display in the Visual Builder; but you will see a placeholder as shown below. They will display in full on the front end.
If you have questions about using different parts of your design, search this website for help, or contact us for guidance.
Comments
0 comments
Article is closed for comments.