Add an Image Element
Click on Create new picture layer in the Create Toolbar to add an image element to your canvas.
Edit an Image Element
Select the picture layer you want to edit on your canvas or in the layer list.
Add a Default Image
In the Image Panel, you can add a default image for your image element. This image will be displayed in your generated images if:
- ...you don't override it with dynamic content, so f.ex. the featured image of your blog posts or
- ...the element is not set to dynamic.
Image Alignment
Size
- Cover: Your image will always fill the box. That could result in some parts of your image to be cut off, if its resolution is not the same as of the box. If your image is too small, it will be blown up. On the plus side: Your layout will never look broken because of a wrong image size! (This setting is what we use for most of our preset designs!)
- Contain: Your image will be displayed fully in the box. That could result in empty spaces in your image container, if its size is not the same as of the box. If your image is too small, it will be blown up.
- Width: The width of your image will be set to the width of your image container. This could result in either some parts of your image to be cut off, or in empty spaces in your image container, depending on the size of your image.
- Height: The height of your image will be set to the height of your image container. This could result in either some parts of your image to be cut off, or in empty spaces in your image container, depending on the size of your image.
Background Position Vertical
Use the background positioning settings to decide if your image should be anchored to the top/bottom/left/right/center of the layer.
Background Repeat
Use the background repeat settings to define repeating patterns that arrange themselves according to the size of your picture layer.
- No Repeat: The background-image is not repeated. The image will only be shown once. This is the default
- Repeat: The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit
- Repeat-x: The background image is repeated only horizontally
- Repeat-y: The background image is repeated only vertically
- Space: The background-image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images
- Round: The background-image is repeated and squished or stretched to fill the space (no gaps)
Border Radius
Add a border radius to give your image rounded corners, or display a square image in a circle shape.
More Styles
You can also add borders and shadows to any picture layer by activating the respective style panels.