Changing Coming Soon Layouts

The first step you’ll want to do in our Keynote designs is choose which layout to go with and customize. In this tutorial we’ll show you how to easily switch between layouts to work on them.

First, let’s start by going into the customizer.

To do that, in WordPress, click ProPhoto > Customize.



Next, you’ll want to delete the demo menu we have in the design. To do that, hover over the menu block, and click the trash can to delete. We promise you won’t need it! 🙂



Now that it is gone, let’s go ahead and choose which layout we want to display. To do that, click the layouts option in the sidebar.



On the layouts screen, we make this process super simple. Under the “Default Layout” dropdown, select which design you want to display, then simply click save. when you click the layouts option in the sidebar again, the window closes, and you’ll see your new layout is available!



From there, you can edit your text, add blocks, rows, and columns, and use all of ProPhoto’s wonderful features to customize the design further.



Using Test Drive Mode

With ProPhoto’s test drive mode enabled, you can freely work on your new site, while your old one is still live.

This means, if you have another theme, or ProPhoto 6 as your live theme, you can test drive ProPhoto 7, and work on it while your P6 site is still live! Or if you previously had never worked with a WordPress or ProPhoto theme, you can use Test Drive mode to display one our coming soon designs, like Keynote.


Test Drive Mode

The first thing we want to do after installing ProPhoto 7 is to go to ProPhoto > Manage Designs.



On the manage designs screen, you can see which is your live design, and which is the current test driven design.

If you want to change your live design for some reason, you can do so by simply going to WordPress > Appearance > Themes and activating a new theme.

When you’re logged in, you’ll see the test driven site (in the blue box), while your site visitors will see your live site (in the dark gray box).



In this instance, one of the default themes from WordPress (2017) is our live design and the default theme for our test drive is the creative design that comes with ProPhoto 7.

In your case, it’s likely that you have ProPhoto 4, 5, or 6 as your live theme, while the default ProPhoto 7 design is your test dive theme.

If you haven’t installed your keynote design, or another ProPhoto design, see this tutorial on how to do that for the next step.

Once your design is installed, press the “test drive” button.



After clicking the test drive button, the design will show up in the test drive section.

You can always see which design you have “live” by either logging out of WordPress, or simply going to your address in another browser where you’re not logged in and view your website.


Now you can click back into the WordPress sidebar, then ProPhoto > Customize to customize your design, while your old one is active.

If you’re using our Keynote design, then you have a couple of different options.

A. You can go ahead and customize the Keynote design real quick, then come back to the manage designs screen, and click “Go Live”. (This is what we recommend.)

To learn how to choose which layout to use in our Keynote design, see below.

B. You can just click “Go Live” and the default coming soon design that came with Keynote will be the one that’s live that your site visitors will see.

Once you’ve made your choice, you can then simply create a new design from scratch, use one of the existing designs that came with ProPhoto 7, import a ProPhoto 6 design, or import a ProPhoto 7 premium design to work on. After importing, be sure to click the test drive option.

At this point, “Keynote” will be your live design, and your other will be the Test Driven design.


Keynote III Changelogs

How our versioning works:

The first number is the version ProPhoto is on.
The second number is the version the design is on.
The third number is the release the design is on.Shortcode

Version 7.1.0 – (3.19.2020)

  • Release to the public

La Lune® Social Font

Changing the size, color, and style of the font

The font size, color, and spacing can all be set under the La Lune Social font style in your design. To edit those attributes, in the ProPhoto customizer, click: Font Styles in the sidebar, and then look for the two styles we’ve set up. We’ll always go ahead and setup one with a dark color and one with a light color for you to start with. We’ll always name them “La Lune Social” to make it easy for you to find and use.

You can easily edit the size, spacing, and color just like you would any other font in ProPhoto. The below graphic explains all the different options you have when editing the font style.

After clicking the font style to edit it’s settings, there are 4 options to choose from.
– The top tab allows you to change the settings for how the font style looks in general.
– The link tab allows you to change the settings for how the font looks when the font is linked to something.
– The pointer tab allows you to change the settings for how the font link will look when hovered over.
– The active tab allows you to change the settings for how the font link will look when you’ve clicked on the link.

Each one has its own settings for size, line height, color, and spacing.

In your design, the icons will already be placed using a ProPhoto tile and an image module. So when you change settings from above they’ll be reflected in every place we’ve already added the social icons in the design.

Adding new social icons

To add new social icons, you’ll do this under “tiles” in ProPhoto 7. To start, in ProPhoto click “Elements” then “Tiles” in the customizer.

In the tiles screen, you can scroll down in the sidebar and select which social icons you want to play with. We’ve already set them up for you, so really the only reason to edit these is to make a copy of an existing social media tile, and change it to a new one you want to add.

To do that, simply hover over the one you want, and click the copy icon.

Once you copy the tile, it’s easy to edit it. Make sure to change the tile name first, then simply scroll down in the text layer and type the letter of the social icon you want. If we have it, it will display as a social icon.

Icons are case sensitive when you type them in. So Capital F and lowercase f might be two different icons. No need to type out the whole social icon name. Just the first letter it starts with.

See our release notes below for which icons we’ve added.

Placing new social icons in your design

To place the new icon tiles you’ve made in the previous step, you can click into any module that we added to your design to edit it. To do that, simply find where we’ve added the social icons in your design, hover over the image module and click the settings icon.

You might find the social icons placed in various parts of your site, you’ll need to edit them in all the places for them to be consistent. In most designs we place them in the footer, or in the sidebar if there is one on the blog. We might also place them in your mobile menu.

In the settings screen for the image module, you can delete an icon by simply hovering over the tab and pressing the delete icon.

You can edit the tile’s link, and change out the tile for a different one by clicking each of the image tabs.

Finally, you can also click the “add graphic” button to add a new tile to the existing ones.

Release Notes

Dates indicate when the update was released publicly.

Version 0.2 (Beta) – 3.19.2020

  • Added Shopping Cart Icon (Capital Letter)
  • Added Alternate Shopping Cart Icon (Lowercase Letter)

Version 0.1 (Beta) – 7.18.19

  • Added Facebook Icon (Capital Letter)
  • Added Twitter Icon (Capital Letter)
  • Added Pinterest Icon (Capital Letter)
  • Added Instagram Icon (Capital Letter)
  • Added Mail Icon (Capital Letter)
  • Added Youtube Icon (Lowercase Letter)
  • Added Vimeo Icon (Lowercase Letter)

Adding a Subscribe Button

In some of our designs for WordPress and Showit we have a “dummy” subscribe form or button that’s a simple jpg. If you’d like to add your own email newsletter subscription form there are a lot of options to choose from.

Start by creating your own newsletter first at one of the sites of your choice.


We recommend Flodesk for it’s easier to use platform and affordable prices. You’ll have to learn how to use those apps and sites yourself, but below we’ll show you how to implement your own form into the site.

Once you’ve created your newsletter, you’ll be able to use an embed option to add to your own website.

The code will usually look something like this:

<div id="fd-form-5d9e40a93d578d000fe32ca2"></div>
  window.fd('form', {
    formId: '05ad9320refdsafdsadummyid',
    containerEl: document.querySelector('#fd-form-05ad9320refdsafdsadummyid')

Adding a custom widget

To add the code to your site, first go log into your WordPress Dashboard, and click: Appearance > Widgets then click the tab that says “custom html“.

Next, after clicking the tab, be sure that “ProPhoto Widgets” is checked, and click “add widget” when you’re done. You can also simply drag and drop any widget over to the ProPhoto widgets dropdown on the right instead.

Next, it will auto scroll and open the widget you’ve added in place. Simply copy the code in from your favorite newsletter service and click save.

The next step is to add your widget into your ProPhoto template. To do that, go into ProPhoto > Customize in ProPhoto. Then, go to the layout you want to add your new newsletter form to.

When you’re ready, click the “elements” tab in the ProPhoto sidebar, and drag and drop a “widget” module anywhere into the layout.

Next, hover over the widget module you added, and click the settings icon and then click the “widget settings” tab.

There, you can assign the widget in the dropdown to the module.

That was the final step! Save your layout, and then view the layout on the front end to see it.

NOTE* ProPhoto will only show widgets on the front of your site, not in the backend.

The Form Design

The design of your form is usually done through the newsletter service you chose, but you can also alternatively use some CSS to customize them as well. You can add the custom css in the column that your module has been added to.

Header Code

Some services may require you to add some code to the “head” of your website. No problem!

In ProPhoto, click “settings“.

Next, click the “advanced” tab. Then click the “custom code” tab.

Paste your code into the “insert into header area” box and click save.

Table of Contents

Still can't find what you're looking for?