Mark Brand Boutique

Mark Brand Boutique

Menu

Free resources for photographers & creatives

How to Create a Landing Page in ProPhoto 7

Landing pages are simplified webpages designed to encourage a website visitor to take specific action. In a landing page all standard navigations, footers, menus and external links are removed to keep the visitor on the page and increase conversion rates.

Landings pages are great for a lead magnet opt-in programs, hidden pricing pages, signup forms, or contact forms.

In this post we are sharing how to create an effective landing page in ProPhoto 7. We will cover the follow steps to creating a landing page:

  1. Add new WordPress Page
  2. Create new ProPhoto layout and assign to the page
  3. Add a new block with two columns and remove padding
  4. Add row background color
  5. Add custom CSS for row height
  6. Add column background image
  7. Add text and landing page content
  8. Add column padding
  9. Hide mobile menu

1. Add new WordPress page

The first step requires you to create a new WordPress page. Login to your WordPress website and navigate the left panel to “Add New” post. Give the page any title desired and click “publish.”

2. Create new ProPhoto layout and assign the new layout to the landing page

Open the ProPhoto customizer by clicking the ProPhoto customizer shortcut button (on the top navigation of the page). Once you open the ProPhoto customizer go to “Layouts” > “Add New Layout.”

Name the layout “Landing Page” or similar. Click the setting gear icon of the layout and click the page from the drop down to assign the page you just created to this new layout. Finally click the blue “save” button.

Pro tip: click the page name link (listed under the layout) to be directed straight to that page.

3. Add new block with columns and remove block padding

Click “Blocks” > “Add Block” from the left panel. Name the new block by clicking on the title (in the left panel) and typing a new title.

Drag and drop the new block into the page layout.

Inside the Block dialog box click “Structure” then click the plus icon to add a new column.

Click the “Appearance” button and scroll down to the padding. Drag the sliders to 0% to remove the padding from the block.

4. Add background color to row

Scroll back up (inside the block dialog box) and click the row setting icon (in orange) to lock it in. Scroll down to the background color section. Click the plus icon and select a color from the color picker.

5. Add custom CSS for row height

Copy the custom CSS code below to your clipboard.

& {
min-height: 100vh;
}

Navigate back to your ProPhoto customizer window with the block dialog box opened.

Verify that you are editing the row settings (in orange). If not, click the setting icon for the row to lock in your selection.

Scroll down to the bottom of the dialog box and click inside the “Custom CSS” input field. Paste the code (listed above) into the field.

6. Add column background image

To add a responsive image use the column background image settings. Simply click the left column setting icon (in blue) to lock it in, scroll down and click “Add Image” to upload a background image or use one from your WordPress media folder.

Use the following background image settings available as drop down options below the background image button:

  • Position: center center
  • Size: cover
  • Repeat: no-repeat
  • Attachment: fixed

7. Add text and content

Click “Elements” on the left ProPhoto panel. Click and drag a text module into the right column. Type your desired text directly into the text module. Optionally apply heading tags (h1, h2, h3) to your headings.

Change the text defaults if desired. Click the setting icon of the text module (in purple). Scroll down and select your desired font style from the dropdown.

Add any relevant modules to achieve your landing page goals. For example, add a widget module to add your MailChimp signup form or add a ProPhoto tile to create a button that links to your desired client action.

8. Add column padding

Open the block dialog box by clicking the setting icon of the block (in green). Click the second column setting icon (in blue) to lock in your selection and scroll down to the padding. Move the sliders to the right to your desired padding (a padding of 10%-20% is ideal).

9. Create a blank ProPhoto tile

Click “Tiles” tiles from the left ProPhoto panel and click “+ Add Tile.” Click inside the “title name” input field and type a new name.

You do not need to add anything to the tile. Simply close out of the tile dialog box.

10. Assign the blank ProPhoto tile to the layout’s mobile menu icon

Hover over the page layout (near the top edge of the layout) until the layout setting icon box appears. Click the setting icon to open the ProPhoto layout settings.

Click “Mobile Menu” > “Select Tile.” Click on the empty tile you just created. Close out of the dialog box.

Final result, ProPhoto Landing Page

This is a simple landing page design. There are many different ways to style your own ProPhoto 7 landing page. Add in your own fonts, colors, images, logos and unique content to make this landing page come alive.

Pro tip: be sure to check how this layout looks in mobile versions. Optionally adjust the settings for specific device breakpoints.

More ProPhoto tutorials and tips

Read More
Add a comment...

Your email is never published or shared. Required fields are marked *

    Popular Posts on the Brand Blog

    Read More

    Free Downloads & Resources

     

    Checkout our free downloads and resources for photographers and creatives

    Mark Brand Boutique

    Mark Brand Boutique serves photographers, videographers and small business creatives in all 50 states and worldwide.

    secure payments by: