Changing home page images

Viewing: Home | ProPhoto | Ivory

 

Changing out the home page header images using the front end editor

Click the video below to play.

 

 


 

Ivory home page header image sizes

To get the wide slimmer images in the design, all the images for the home page slideshow or header background image is set specifically to these dimensions before uploading.

2000 x 500 @72dpi and saved as a jpeg quality 6 in Adobe Photoshop (or your preferred image editor).

You don’t have to follow our directions, you can upload your own image sizes with different results.

 

 


 

 

Changing out the home page header images in Ivory – Step by Step

In WordPress, click the galleries button in the sidebar. Hover over the “Home Page Gallery” gallery and select the edit button.

 

 

The next screen allows you to add new images by clicking the add images button, and you can drag and drop the images to re-arrange them to what you want to show in the slideshow.

 

 

You can also delete images by selecting one or multiple, just by clicking on the image once and pressing the “delete” button.

 

 

When you’re done adding your new images be sure to click the update button when you’re finished, which saves the gallery.

That’s the end of the steps if you’re just replacing the images we’ve setup in the design. If you want to remove the slideshow and place an image there instead read on below.

 

 


 

 

Changing the home page slideshow for a background image

 

First, make sure you’re on the home page template and scroll down to the “header block”.

You’ll see a ProPhoto spacer widget in the block, which is REQUIRED to remain there for the background image you’re going to set to show up on the design. ProPhoto requires that content be added to a block, row, or column to show a background image, which is why we placed the spacer widget there.

You can click the widget to adjust the slider height.

 

 

From there, hover over the header block and click the menu in the green bar and click “customize”.

 

 

The next step is to simply remove the slideshow we have in place so you can add your background image. To do that, just click the “color and image” option instead of the gallery option.

 

 

Below that section, the new block background settings will show up. Click the edit button for the image to upload your background image.

You’ll want to be sure to set it to “cover” for the settings so that your image fills the design space entirely. You can play with other settings and set whether or not the image centers or not, we encourage users to play and learn to get the best out of ProPhoto.

 

 

Be sure to save when you’re finished.

Remember we set specific image sizes for this design, which you can see at the top of this article, but feel free to upload your own image sizes as you see fit.

 

Changing contact page images

Viewing: Home | ProPhoto | Ivory

 

We’ll guide you on how to change the contact form image in our Ivory design.

 

Changing the contact form image using the editor

Click the video below to play.

 

 


 

Changing the contact form image using the customizer

Click the video below to play.

 

 

Changing about page images

Viewing: Home | ProPhoto | Ivory

 

We’ll guide you on how to change the about page images in our Ivory design.

 

Changing the about page about image using the editor

Click the video below to play.

 

 


 

 

Changing the about page image using the customizer

Click the video below to play.

 

 


 

 

Changing the about page image step by step

The first step is to make sure you’re on the about page template for this change.

Look for the “about block” we’ve labeled and click the about image widget to edit.

 

 

When the options come up, you can edit how the image animates on the design by changing the animation settings.

 

 

Scrolling down further, you can delete the current image and see the exact dimensions we’ve uploaded the image at.

For this page, we’ve uploaded our image as at 800 x 800 @72 dpi and saved as a jpeg at 6 quality in Photoshop (or you can use your own favorite program.)

Since this is a large image for the page and we want the image to be retina on devices, we’ve set the “constrain to half width” setting checked on. This reduces the image by half so that it shows up at the size we want on desktop but increases the resolution on mobile devices so that the image is ready for retina screens.

 

 

 


 

Changing the about page background image using the editor

Click the video below to play.

 

 


 

 

Changing the about page background image step by step

First is to make sure you’re on the about page template.

Hover over the about block and click the green settings icon and “customize.”

 

 

Scroll down until you get to the background settings, there you can edit or delete the current image in place.

For this design, we’ve set the image to center, center, and “cover” so that the background image covers the entire width of the design.

Feel free to play with the settings to get what you prefer best.

 

Make sure to save when you’re finished with your changes.

For the background image, we use our standard background image sizing. See the related article below for our Prophoto standard.

 

Changing tiles in Ivory

Viewing: Home | ProPhoto | Ivory

 

Changing the home page tiles

While we can’t go into the details about how tiles work in ProPhoto specifically we can explain the general basics of how they work in our design. You can find more detailed information about tiles on the ProPhoto support site here.

The first step is to simply go into the ProPhoto customizer and switch to the “design” level and click the tiles icon in the customizer sidebar.

 

 

This allows you to see all the tiles we’ve created for the entire design. We’ve labeled them so you know where they go.

You can click any tile to edit one.

When you’ve clicked on the tile you want to edit, you can see the different layers of the tile on the left hand side. Each layer represents a different part of the tile as a whole. We’ve named them so they’re easier to see which layer goes to which tile state.

 

 

You’ll see 3 tabs at the top labeled “tile state”. Each state represents the view that you see when you see the tile on the website.

  • The first state is “default” which is what you see when you load up the website.
  • The second state is the “hover” state. This shows you what the tile looks like when you hover over the tile in the design.
  • The last state, the “active” state shows you the tile once you’ve clicked on the tile on the site.

You can click each layer and it will show you the different settings for each layer. You’ll need to switch states to work on that view individually.

So as an example, if you wanted to change the text, you click the hover text layer, and switch to the default tile state, which allows you to edit the text. Since the text only shows up on the hover state, you’ll need to switch the state back to hover to adjust the settings further.

The reason why the text only shows up on the hover state is we’ve set the opacity on the default state to zero, and the opacity on the hover state to 1, this is how all the “hover” layers work in our designs. Doing it this way ensures that the layer only shows up on the hover state. Likewise, if it was set to the opposite, the hover layer would show nothing and the default state would show the content instead. — The opacity can be set for each layer.

 

 

One more example: If you wanted to change the image, click the image tile (which shows you the image size we uploaded) and switch to the default state to upload a new image.

If you wanted to say make a 4th or 5 tile for the home page, you can do that easily by simply going back to the main tiles window, and pressing the copy button of any tile by hovering over it, rather than making a new one. It’s much easier to copy and edit than it is to create new ones from scratch.

 

Now that you’ve seen how tiles sort of work, we really encourage you to play around with the settings and customize things to your liking.

The next step is to show you how to apply those images to the pages the tiles are displayed on, by default when you edit any of the tiles they’re going to change on the website because they’ve already been placed in the design.

In Ivory, our main tiles are on the home and portfolio pages, so let’s take a look.

In the customizer, be sure you’re on the home page template first.

Look for the portfolio block to see all the ProPhoto image widgets placed.

 

 

We’ve placed an image widget in each column, and set each widget to display one of the tiles we made earlier instead of an image. Click the widget to show the settings for the widget. There you can adjust the animation settings we’ve set for the image, and switch between an image or a prophoto tile.

 

 

You can also set the link to where you want your tile to go. For the home page, we’ve set each to go to a different page of the design.

Be sure to click save when you’re done!

If you wanted to add a fourth or fifth tile to the home page, you would simply copy one of the columns with the current widget in it, paste the column where you wanted it in the block, and edit the widget to apply the 4th tile you made.

 

 

Likewise, this entire tutorial would be the exact same for the portfolio page in Ivory.

 

Fonts used in Ivory

Viewing: Home | ProPhoto | Ivory

 

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

 

Roboto Condensed

https://fonts.google.com/specimen/Roboto+Condensed?authuser=1&query=roboto&selection.family=Roboto+Condensed

Amiko

https://fonts.google.com/?authuser=1&query=Amiko&selection.family=Amiko

Satisfy

https://fonts.google.com/?authuser=1&query=satisfy&selection.family=Satisfy

 


 

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 | Ivory

 

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.3 – (1.31.18)

  • Updated template names for better identification
  • Updated to have more basic settings across the entire design
  • Updated included design instructions for 2018

 

Version 1.2 – (11.12.17)

  • NEW Updated text spacer widget on the home page with the new ProPhoto spacer widget (Added in ProPhoto 6.19.0)
  • NEW Customized the contact form with the new form customization options (Added in ProPhoto 6.18.0  &  6.19.0)
  • NEW Added fancy animations to most pages in the design (Added in ProPhoto 6.19.0)
  • NEW Added a carousel gallery style and demo (Added in ProPhoto 6.18.0)
  • Updated the home page to rotate images in a slideshow
  • Updated the menu to not stick to the top (You can still set this if you want it!)
  • Updated menu drop downs to have more space horizontally for longer menu item links
  • Updated some images for 2018
  • Removed the custom CSS we had for the contact form for better customization.
  • Removed the duplicate home page gallery

 

Version 1.1 – (3.2.17)

  • NEW Added the contact form submit button as a tile (Added in ProPhoto 6.10.0)
  • NEW Added new gallery styles for each gallery type
  • NEW Added new demo gallery pages
  • NEW Added a customized mobile menu tile (Added in ProPhoto 6.12.0)
  • NEW Added a custom pinit button tile (Added in ProPhoto 6.11.0)
  • NEW Added font style for better readability in the mobile sidebar
  • NEW Hid gallery title for galleries (Added in ProPhoto 6.14.0)
  • Updated grids to have vertically aligned text (Added in ProPhoto 6.12.0)
  • Updated demo Images for 2017
  • Updated contact form to span the entire width of the design
  • Updated dummy text on investment page
  • Updated spacing from titles on the investment page for better readability
  • Updated design thumbnail
  • Updated .xml file for 2017
  • Updated design description

 

Version 1.0 – (8.19.16)

  • Release to the public.

 

Can’t find what you’re looking for?

TOP

MENU