Simone

To begin, you'll want to visit the "ProPhoto > Manage Designs" screen in your ProPhoto software, and scroll down to locate the included Simone 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 Simone privately or Go Live if you don't mind it being live (perhaps it's a new site).

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

ProPhoto will automatically create the five pages it needs - Blog, Contact, Home, Details 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.

Simone starts with six layouts:

1. Default - the layout that pages get when one is not specifically assigned (e.g. single post pages and gallery pages)
2. Blog Layout - a layout assigned to single post pages and all multiple post (archive) pages
3. Contact Layout - a layout specifically for your contact page
4. Home Layout - for the static front page
5. Details Layout - a layout specifically for your details/info/pricing page
6. 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.

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. This design depends heavily on grids based on posts so some need to be published to get a feel for how it will look. Also make sure that you assign at least one category to each post, so that the category grids used in the design have something to work with. 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 top of the blog posts page is supposed to look.

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 front. The Visual Builder is where you will make all your ProPhoto content and settings changes.

Simone comes with two menus, a main one and an additional one for social media links. These will all be set up by default and should work. But it's common to want to customize these menus more. The social media links will definitely need updating. Check out the menus overview for details.

Here are the steps for editing the main menu in the HEADER block. This menu is shared by all layouts. A video below shows the process.

1. Enter the visual builder when viewing your home page.
2. Hover the header block with a menu and click the lock icon. This unlocks the shared block.
3. Click continue to edit the shared block
4. Hover the menu module and click the editing icon. Use the popup to edit the style of the menu.
5. 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.

Now turn your attention to the rest of the content on the home page.

Logo

The Simone logo is a simple text module. The sub-title underneath is another text widget. Simply put your cursor in the text module and click then start changing the text to what you desire.

Home Hero Block

The image in this block is a background on the row. To swap it out, edit the block and click on the row.

Scroll down and click "add image" in the background image area. 

The text on top of the background image is from simple text modules. Click in each module and edit the text as you like.

Click the edit icon for each module to adjust spacing.

Home content block

Edit the text modules in the by simply clicking in them and adjusting the text. The right column in the top row and the left column in the bottom row are images in graphic modules. The video below shows how to swap a graphic module image.

The right column in the second row is a categories grid. This type of grid displays an image link to the category archives page for each category you choose to include. This feature only works if you have been categorizing your posts. If you don't have at least four categories with published posts, set that up first. Create and publish some posts and/or apply some categories to them.

The image in the grid will come from the first or featured image for the most recent post in each category. If you find that you want the grid items to be larger, you can reduce the padding on the column.

Edit the grid module to change the grid sizing settings or the categories featured in the grid.

Footer block

The footer block is present in all 6 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. Here you have a text module where you'll replicate your logo changes.

Below that is another menu module, this one for linking to your social media accounts. Edit the module to play with style and to edit the individual menu items. 

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 Categories

The Blog Categories block contains a categories grid. This block is actually shared by 4 layouts since this design uses post categories as a primary way to direct traffic to different types of content.  Manage the grid sizing settings and the categories that are featured by editing the grid module. 

Wordpress Content Narrow with Date

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 since the posts are showing excerpts by default.

Since this module also displays on archive pages you'll use it to edit the content WordPress outputs on those page types as well. Learn more about this module in the WordPress content module guide.

Take care not to delete this block or module! If you do, none of the WordPress content will display on any pages that are supposed to show posts.

Switch to editing the Contact Layout using the Pages dropdown at the top of the Visual Builder.

Contact Block

There is only one unique block in this layout. It has two rows with two columns in each row. Click in the text modules to add your own text. Edit the graphic modules and add your own images. 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.

Switch to editing the Details Layout using the Pages dropdown at the top.

Details Block

The main block here is called "details." Again, the layout is a series of graphic modules and text modules set in different columns. Directly edit the text modules to change the text to what you want. Edit the graphic modules to change the images to what you want. The "inquire" buttons are tiles that can be linked to the contact page. Edit the module, click on the tile label and set the Links to option to link to your own contact page. 

To adjust the style of the inquire button, click to edit the tile inline.

Switch to editing the Portfolio Layout using the Pages dropdown at the top.

Portfolio block

This is the block that displays the grid that links to individual galleries. The default is a "galleries" grid type. Before you can link to some galleries, you need to create some galleries. If you have not done that, go to "Elements > Galleries > New Gallery" and start creating new galleries. Alternatively you can create galleries in "Galleries > All Galleries". It's two ways to do the same thing. To learn more about galleries check out our galleries overview.

When you have published galleries you can edit the grid in the block and select them.

If the module editing button is inaccessible (because of the block buttons) a quick way around that is to turn on X-Ray mode. This gives a little padding to everything and will put the module in a place where it is not overlapped by something else. 

The Default 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.

In general, you should not make any changes to this layout unless you are sure that you want to change something that applies to all pages sharing these blocks or not already assigned different layouts.

To edit this layout simply navigate to any page except Blog, Contact, Details, Home or Portfolio. You might need to create a test page in "Pages > All Pages" if you are just starting out. The default layout tends to be simple and this one is no different. This default layout has the same Header and Footer blocks that are present on every other layout. You can edit those blocks here or in an of the layouts that share them. It also has a block that contains the WordPress content module.

The WordPress Content Module 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 on newly created pages.