Linking to blocks

Viewing: Home | ProPhoto | Booth

 

On a one page design, it’s pretty simple to set it up with links. Each block in the customizer has a setting to copy the block’s url.  You can copy, then paste that url into any menu link you want, or you can create a new one.

 

Linking to blocks using the customizer

Click the video below to play.

 

You can use the url from the header block or menu block row to make a to-the-top button. We’ve done that by making the logo in the footer go to the top of the page when clicked.

 

 


 

 

Linking to blocks step by step

 

Step 1.

You can create a new block with new content first, or just use existing blocks we’ve already made for you. In the ProPhoto customizer, make sure you’re on the home page template first.

If you’ve just activated the design, most likely the blocks will be closed to make it easier to see what you’re doing. You can click the arrow to drop those blocks down to customize them.

 

 

Step 2.

Once you’ve clicked the dropdown to open the block, hover over the block to bring up the green bar, and click the hamburger menu to bring up the settings. There you’ll click “Link to block” which automatically copies the URL to the block.

 

 

Step 3.

Now that you have your URL copied, click the blue rounded button at the top of the sidebar to switch to the “design” level.

Click the menus button in the sidebar to bring up the menu items in ProPhoto.

There you can click on any existing menu item once to edit it’s settings, or you can click the  “new custom item” button to create a new menu item, but it’s easier to use the ones we’ve already created for you and just simply edit them.

To move the menu links or re-arrange them, drag and drop them where you want in order that you want.

 

 

Step 4.

Once you’ve clicked onto the menu item, click the “add link to specific block/row/column” box if it’s not selected already, then simply right click the box url box and paste your URL into the box. Alternatively you can also press control or command+v to paste it into the box.

Make sure to click save when you’re done.

 

 

 


 

 

Creating a new link with the url

 

To create a completely new menu item on the menus screen, click the “new custom item” button to create a new link.

 

 

You only need to choose the “home page link” option to add a link item that has the option to paste in the block URL.

 

 

Now you can repeat the process from previous steps to paste in a block URL.

 

 

Changing header images

Viewing: Home | ProPhoto | Booth

 

 

Changing the header slideshow using the editor.

 

Click the video below to play.

 

 


 

 

Changing the header slideshow using the customizer.

 

Click the video below to play.

 

 


 

 

Changing the header slideshow step by step.

 

The first step is to add a new or edit an existing gallery. To do that, head to the galleries tab in WordPress (Not ProPhoto). Your design should’ve automatically imported the existing home page gallery. (Other galleries depending on how placed may or may not import with the design)

Hover over the gallery to bring up the WordPress options and click the edit button to edit it.

 

 

Step 2.

 

There are several options you can do on the gallery screen, including drag and drop images by dragging them with your mouse, selecting them individually to delete images, and of course the button to add your own images.

Make sure to the gallery style to the “Home Page Slideshow” style we’ve added to the design.

We of course highly recommend adding your own images instead of using any demo images since the photos aren’t going to be representative of your work, and you know…it’s illegal to steal.

When you’re finished make sure to click the big blue update button.

 

 

Step 3.

 

Next we’ll need to apply your home page slideshow you’ve created into the correct place in ProPhoto. In the WordPress sidebar, select ProPhoto and customizer, then make sure you’re on the template level, and that you’re customizing the home page template.

 

 

Step 4.

 

To begin making the change, hover over the “Header Block” and select the green icon to bring up the settings, then click “customize”.

 

 

Step 5.

 

When the settings come up, you’ll see the “block background” section. This is where you’ll apply your gallery to the page and select your gallery style. Your design already comes with a home page gallery style setup for you, so you only need to apply it.

Be sure to click save when you’re finished.

 

 

 

 

Fonts used in Booth

Viewing: Home | ProPhoto | Booth

 

The first step is to simply download the fonts from the web and install them to your machine to use them in Photoshop and other places. We can’t include the fonts in the downloads since they aren’t ours legally to include, but we always use free fonts found on the web.

 


 

Fonts used in this design

 

Fjalla One

https://fonts.google.com/specimen/Fjalla+One

Monsterrat

https://fonts.google.com/specimen/Montserrat

Marck Script

https://fonts.google.com/specimen/Marck+Script

 


 

Downloading fonts from Google

(click the video below to play)

 

When downloading fonts, they’ll come as .zip file. Double click the zip file to unpackage it onto your machine, then simply double click the fonts to install them.

 


 

USING FONTS IN PRO PHOTO

To edit the overall font style for the entire design go to:

ProPhoto > Customizer > Switch to Design Level (The blue rounded button) Click the Menu Icon > Fonts > Styles

There, you can switch out google fonts, change styles, upload your own, etc. All the font styles are applied to the various blocks, columns, rows, and tiles in the design throughout the customizer. On the styles screen you’ll be able to edit existing styles (and they’ll change across the entire design) or add new ones and apply those wherever you wish.

For more on fonts in ProPhoto see ProPhoto’s own support site HERE.

 

Change Logs / Updates

Viewing: Home | ProPhoto | Booth

 

Please remember any update for a design RESETS all your current design changes! You’ll be starting completely over by re-installing the design.  Please see our GUIDE to upgrading if you’re thinking about updating a design.
Dates indicate when the update was released publicly.

 

Version 1.0 – (8.25.17)

  • Initial release to the public.

 

Can’t find what you’re looking for?

TOP

MENU