You can add pictures to your website via our Picture Block or Grid Gallery Block in the editor of your website. This help guide will explain how to add images to your website via our Picture Block. If you want to add images via our Gird Gallery block for multiple images or other effects please see our Grid Gallery Help guide.
Add Pictures to your Website via the Picture Block
- Click Add Block in the stack you are wanting to add the image and select the Picture block.
- Choose the file you are wanting to upload from your computer.
We recommend that you upload your files at least 2400pixels in width to support retina screens. - If you want to change the shape and look of your picture - click the edit pencil icon when hovering over the image you have just uploaded.
You will now see the sidebar slide out with various editing options. The current picture in edit mode is highlighted with 2 square brackets. While in this mode you can click edit on other pictures to quickly switch to them. When you are finished editing the picture click the Save changes button to store your settings.
Quickly adjusting Height, Crop and Zoom
Simply drag the zoom tool up and down to adjust how zoomed in or zoomed out you need the picture in this space.
Drag the bottom handle up and down to adjust the image height. This handle is specially designed to SNAP to other images next to it so you can quickly line things up perfectly.
Cropping the exact part of your image is a breeze just left click anywhere on the image and drag to position the exact part of your image that you want to be visible. You can also adjust the Width, Height and Alignment from the sidebar under Size
Adding a Title and Subtitle
Click on the title bar to open the Title and Subtitle options. As you type the text will update on the image with a live preview. Alt-text is an alternative text which is hidden behind the image and is used to describe the image to Google.
Change Title Position & Style
Use these settings to change the title position on the right-hand side. You can also alter other settings like Font, Colour and Alignment.
Adding a Link and Mouse-over effects
Clicking on the Links bar allows you to add a hyperlink to the image so viewers can click the image to go to a Page, Website, Blog Post or Product.
You can also choose to Enlarge the picture in a zoom popup as the Link which is great for pictures that need to be viewed bigger.
Once you have a link setup you can edit the mouse-over effects. Mouse-over effects add a dynamic look to the image when the visitor moves their mouse over the picture. This is great for image links as it entices the user to click the image. You can select from a range of mouse-over effects but these are limited depending on Picture Shape, Title text used and Title position.
Adding Effects
Clicking on the Effects bar will open up the effect options for your picture. As you change these settings a live update is showing on the right.
Effects are somewhat linked to the stack you are working in. After adding an effect to one image in your stack all pictures added after this will get the same effect at upload. You can also choose at any time to update all other pictures in the stack by clicking the 'Apply effects to other pictures' button.
Hot tip: If you are adding pictures into a different stack the effects won't be applied. But, if you DO want the same effects to be applied to an image in a different stack you have two options to quickly apply the effects:
- Add a new picture into the existing stack that already has cool effects applied to a picture. The effects will be automatically applied once you upload the picture and then you can drag the picture to a different stack and the effects will remain in place.
- If you've already uploaded the picture you can just drag the picture to the stack with picture effects already applied and then click the pencil icon on the image with effects already applied, click the Effects menu and then click the 'Apply effects to other pictures' button. You can then drag the image to a different stack.
Edit mouse-over effects
This button is disabled if you don't have a Link added yet, but a quick way to get to these settings. Usually found under the Link menu.
Change title position & style
This button is disabled if you don't have a title added yet, but a quick way to get to the Title position settings. Usually found under the Title text menu.
Shape
Choose Square, Circle or Rounded
Photo filter
Choose from Black & White, Slightly Blurry and Really Blurry
Colour overlay
Add colour on top of your picture. Choose how much of the picture you would like to show through. Great for darkening, brightening and tinting pictures.
Border
Choose the colour and thickness of your border.
Apply effects to other pictures
Instantly apply all your effects, mouse-over styles and title position styles to all other images in the current stack. A quick way to get everything looking uniform.
Hot tip: To add your picture styles to other stacks, make sure you have other images in that stack first, then drag your image to that stack, click this button to apply the styles and then drag it back. Your style will be instantly applied to all images in this other stack.
Remove effects
You might have gone a bit overboard, it's ok this button will get you back to normal.