Page Designer - Image Tile-Hover Effect and Image Cropping

Best Practices

Setting Hover Detail

Step one

Decide if you will use an image or text (title and subtitle) or both

Step two

If using an image, set the Image Layout Style: Tile, Stretch, Fit, Fill, Center and set the Image Padding

Note: Image Padding and the Aspect Ratio in the General Tab affect the image sizing. It may take several tries of customization to get a right fit.

If only using text, set the Title and Subtitle, if any, and set the positioning of the text: 

Vertical Align: Top, Center, Bottom

Horizontal Align: Left Center, Right 

Note: You may also need to customize the Text Padding 

Step three

Head to Hover Detail tab, enter the image, hyperlink, or text you wish to display over the set Image/Text that we just configured.

Set the: Alignment, Font weight, Font size and Font color. 

Best Practice

Set the background color of the Hover Effect a similar or the same background color as in the General tab so that the text (if used) is not hidden by the underlying text/image 

Step four

Still in the Hover Detail tab, select the Hover Effect: None, Fade, Image Zoom, Slide up

And Save.  

Image Cropping 

To use the image cropping, you will need to go the image tab on any tile that has the option to add an image. Once on this tab, a new button will appear called edit image. Clicking on this button will open up the the image cropping screen.

Here, you will be able to choose the section of the image that you would like to keep. To do this, you can grab an anchor point on the selected area and drag to resize and re-position. In addition, you will be able to select from three aspect ratios (16:9, 4:3, 1:1) which allows you to be able to lock into an aspect ratio when resizing. To turn this off, all you will need to do is click on the aspect ratio again.

Once you have the area which you would like to crop, you can click the save button. This will ask you to save the image, with a pre-populated name and link based on where you had gotten the image. You will be able rename as well as change the location of where you save the image. Once this has been selected, the new image will populate the image link url.

Note: This saves the image as a .png. This means that any non .png images will be converted into this format on save.