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.