Block Types: Picture

What is a picture block? 

The "Picture" block type allows you to add an image to your website, and link it to another page, or catalog link. 

How to add a picture block: 

  1. In the the website editor, go to the panel on the left and find "Current Page"
  2. Under "Current Page", click the "+" icon to the right of the row you wish to add a picture block to
  3. In the "Select Block Type" pop up window, click on Picture
  4. After you have clicked on the "Picture" block, the pop-up window will disappear, and you will see the new block added last in the row under the left panel, and it will be highlighted in blue

How edit a picture block:

  1. In the left-hand panel, find the "Picture" block
  2. Click the pencil icon to the right of "Picture"
  3. The "Picture" editor window will pop-up
  4. Below are the changes that can be made to the picture block type: 
  • Change Name: 
    • The change name link allows you to change the block label from the default, to a more customized name. This name only appears in the website editor dashboard, on the left-hand panel. 
  • Block Style (Advanced): 
    • Block styles can be added to each block for custom CSS. This is an advanced functionality for our users who have CSS knowledge. 
  • Image: 
    1. Click Pick Image to select from your image library
    2. Then click on the image that you want to add, and select it
    3. Complete the rest of the options in the Picture block editor before clicking Done and saving your changes
  • Horizontal alignment: 
    • Select how the picture aligns in the block: center, left, or right aligned.
  • Link?: 
    • Add a link to the image by choosing from your link library.
  • Open links in new window?:
    • If you have added links to the images in your carousel, select whether the link should open in a new window, or the current window.
  • Maximum Width:
    • Set the maximum width of the image within the block per screen size
  • Delete block: 
    • The red box with a trash icon in the bottom left corner of the window will delete the block altogether.
  • Done:
    • Click Done to close the block editor. Please note, you will need to click Save in the website editor to save the changes made to the block.