The 3 Types of Imagery In Splash

Visual assets bring an event page to life more than anything else. Whether it's a striking Cover block image, an animated GIF, or a brilliant picture of an important speaker, imagery can make or break your event.

When designing your event page for maximum visual impact, it's important to understand the differences between the three types of images used in Splash:

  • Image Element
  • Square Element
  • Background Image

A designer will utilize the these elements strategically to optimize for a variety of different use cases. Let’s break down the differences between each.

 

Image Element:

Quick Definition 

An Image Element is the most basic form of imagery used in Splash. It allows the user to quickly and easily add an image to an event page. There is no default cropping, re-sizing, nor stretching applied to the image by default. If you are adding an Image Element to the page, the image will take up 100% width of the container you are adding it to. If you elect to reduce or increase the width of the Image Element, the entire element will scale proportionally.

Swapping out imagery 

To change the image housed inside an Image Element, the user can click into the Image Element directly on page or find it in the page's Layout tab. They can then choose to Upload an image from their computer, or select from the Unsplash or Giphy libraries.

Resizing 

The designer can increase or decrease the size of the Image Element by altering the width inside the Width/Height tool. As the user changes the width, the entire Image Element will scale proportionally.

Alt Text 

Designers now have the ability to add Alt Text to any Image Element on a Splash page. This provides the option to include a brief description of the image to improve search engine optimization (SEO) and accessibility. 

Sounds cool, can you show me?

Here is a step-by-step process and video of an Image Element being added, changed, re-sized, and cropped below:

  1. The designer hovers over the headline element to add an element below it.
  2. The designer clicks into the Element library.
  3. Select Image Element.
  4. Once the Image Element is successfully placed on the page, the designer elects to Change the image.
  5. The designer uploads an image from their desktop.
  6. The designer enters Alt Text for the image.
  7. The designer clicks into Width/Height and reduces the width of the Image Element to 50%.
  8. The designer the elects to float the Image Element left.
  9. The designer crops the image to their liking and hits Save.

 

Square Element:

Quick Definition 

A Square Element can also be called a “frame” since one is literally adding a blank container (or frame) to the event page. The frame’s width can be resized using the width tool, and the height of the frame is dictated by how much padding is applied to the bottom of the element.

The designer can dictate the shape of the frame as well by applying a radius inside the Border tool. If you'd like the frame to house an image, you can click into the blank frame to select a photo. Essentially, the designer is now applying a Background Image to this element. They can then reposition the image inside the frame and decide how the image will resize inside of it.

Swapping out imagery

To change the image housed inside a Square Element, the user can click into the Square Element directly on page or find it within the Layout tab. The actual image will be located inside the element's Background tool. The image can then be uploaded from your computer, or selected from the Unsplash or Giphy stock libraries.

Resizing

The designer can increase or decrease the width of the Square Element by altering the width inside the Width/Height tab. If the user wants to change the height of the Square Element, they must navigate to the Margin & Padding tool.

Remember: Padding adds space inside an element (read more about it here). So if the user wants to increase or decrease the height of the frame, they need to add or subtract padding from the bottom of the element.

Re-shaping 

Another option available to the designer is altering the actual shape of the frame of a Square Element. You can round the corners by accessing the Radius Input inside the Border tool.

Sounds cool, can you show me?

Example of a Square Element being added, the background changed to an image, re-shaped, and then cropped below:

  1. The designer hovers over a Headline Element before clicking the appearing icon to add a new element.
  2. The designer clicks into the Elements folder.
  3. The designer selects Square Element.
  4. Once the blank frame of a Square Element is added to the page, the designer clicks directly into the frame to change the background image.
  5. The designer uploads an image from their desktop.
  6. The designer then adjusts the alignment of the image in the Square Element by altering the Size, Repeat, and Positioning features of the Background Tab. (Note: These features are NOT available to the designer in a regular Image Element. They are only available when editing a Square Element or the Background Image of other elements.)
  7. The designer then adjusts the width of the Square Element to be 50%.
  8. To adjust the height of the Square Element, the designer clicks into Margin/Padding and adds more padding to the bottom of the Square Element.
  9. Once the designer has resized the Square Element to have 50% padding and 50% width (making it a perfect square), the designer clicks into the Border Tab and adds 100% to the Radius Input, creating a perfect circle.
  10. The designers clicks out of the Layout Tab and hits Save.

Adding a Square Element to a page (No Audio) from Splash on Vimeo.

 
Background Image:

Quick Definition

A Background Image is not an actual element found in Splash’s element library. It is actually an image that is applied to the background of an element or block. The Background Image is set to Fill by default, but the designer can also elect to have the image be Contained, Normal, Fit Width, or Fit Height. They can also decide if they want the image to repeat horizontally or vertically as well.
 

Swapping out imagery

To change the Background Image of an element or block, the designer, as a best practice, should click into the title of the element or block. The actual image will be located inside the Background tool. They can then choose to upload an image from their computer, or select from the Unsplash or Giphy stock libraries. 


Resizing

Since the Background Image is not an actual element, it is reliant on the sizing and proportions of the element or block it is being housed inside of. So if the designer wants to increase the size of the Background Image of a block, they need to increase the size of the block (by adding width, or padding). There is no “perfect size” for the background image of blocks. Splash requires that images be smaller than 2000x2000 pixels or 10MB. Anything above those requirements will be downsized.
 

Sounds cool, can you show me?

Example of a Background Image being applied, re-positioned, and cropped below: 

  1. The designer clicks into Layout Tab.
  2. The designer clicks into the Cover Block.
  3. The designer clicks into the Background Tab of the Cover Block.
  4. The designer clicks into the Background Image feature of the Background tool to upload an image.
  5. The designers uploads an image from their desktop.
  6. The designer then adjusts the alignment of the Background Image by altering the Size, Repeat, and Positioning features of the Background tool.
  7. The designer then clicks the Fixed Position check-box to create parallax scrolling for the image. They then un-click the checkbox to set it back to default scrolling.
  8. The designer then crops the Background Image.
  9. Bonus step: The designer then elects to reduce and increase the opacity of the Color Mask Element that has been included in the Cover Block. (Note: The majority of Cover Blocks in the Splash Block Library will include a Color Mask Element by default)

 




Important differences to know for each type of imagery:


Cropping

When you crop an Image Element, the exact portion of the image you have elected to crop will now be displayed on the page. If you elect to crop a Square Element or Background Image, the photo will fill the space of the frame. 

Rounded Corners

A common use case for rounded corners are for Button Elements but if you want to apply rounded corners to the imagery on your event page, you have to make sure it is either a Square Element or a Background Image. You can round the corners of entire blocks, or any element in Splash — EXCEPT FOR Image Elements — by using the Border tools. The reason for this is because Splash will not allow you to alter the original imagery used in the Image Element.

To conclude this lesson, take a look at this video below summarizes the main differences between the 3 Types of Imagery In Splash:

 

So, as you can see, there are many different ways to add imagery to your event page — it's just up to the designer to decide which element or strategy will work best for their needs.

 

Best of luck!

avatar_square_splashhat.jpg

Pete Richardson

Client Education Manager

Was this article helpful?
1 out of 1 found this helpful