Adding any styling images and photos within Shogun is super simple, we have a great tutorial below that will teach you how to make the most of the Image element.

How to edit your images in Shogun

Shogun has a built in image editor that can help you do just that! Simply click on the Image element, and select Edit Image.

How to crop an image in Shogun

Cropping in the Shogun image editor is really easy! Simply drag the crop box over the area that you would like to crop and click 'save' - done!

How to resize an image in Shogun

You can use the Shogun image editor to resize the images on your Shogun page. To get started, hit 'edit image'.

Clicking on the lock icon will remove the editors ability to keep the aspect ratio of the image. Disabling this will give you more creative freedom.

How to rotate an image in Shogun

Rotating images is super simple! You can choose to rotate it clockwise, or anticlockwise by 45 degree increments!

Adding an alternate image on hover

Sometimes, you would like to let your customers see an alternative image when they hover over an image, maybe you want to showcase more of your product! This can be done using the 'alternate image' option within Shogun.

Please note, both images need to be the same dimensions in order for this effect to be effective.

How to add alt text to your images

Adding alternate text to your images is important for search engine optimisation and screen readers. This is super simple to add into your images in your Image Elements.

Overlaying elements on your image element

Overlaying elements on your Image Elements can be a great way of showcasing your content. The Image Element is a containing element, meaning that you can drag other elements on top of this element. This works similarly to the Section Element.

Vertically aligning content in your Image Element

By default, your content will be vertically aligned in the middle of the Image Element. You have the option to vertically center in the middle, top or bottom of the Image Element.

How to enable an image lightbox

Great question! Built right into the Image element, you can set the image to open in a lightbox. This means that when a user clicks on one of your images on your page, that it will display over the content and larger.


Note: background images within the Section Element do not have alt tags as they are decorative visuals added through CSS styles. They are not added into the content of the page and therefore are not detected by search engines or screen readers.

Did this answer your question?