How to add a Flexible Pictures block to the Page Editor

Flexible Pictures scale to browser widths, simply drag and drop them onto your page and choose from a wide range of styling classes including inner shadows, borders and rounded corners.

1. Adding Flexible Pictures from Page Blocks To add a Flexible Picture block to your page, open Add Page Blocks and select Flexible Picture under the Visual Blocks tab. Do note that the smallest width a Flexible Picture can be for it to respond to smaller screen sizes is 600px. 2. Drag and dropping images into the Flexible Picture box Drag and drop an image from your desktop or a folder into the Flexible Picture box to add it to your page. The picture will automatically be saved inside a folder (given the same name as your page) in the CMS Pictures library. You can also re-drop pictures, changing the image in the Flexible Picture box without deleting the existing image from your Pictures folder. If there's already an image that you would like to use saved in the CMS Pictures library, double-click on the Flex Picture block to open the Hot Directory, from here you can open the Pictures folder and select the pre-uploaded image. Drag and dropping an image from a folder or desktop Thumbnail Extra Tip The name your image is saved with, will be the same name given to it in the CMS Pictures Library. As a time saving tip, save your images with SEO friendly titles before drag and dropping them into the Page Editor. 3. Configuring the options and adding classes for Flexible Pictures To configure the options for an image, highlight and right-click on the Flex Picture block to open the Options pop-up. From here you can edit the height of the image (in pixels), the width (in percentage), change the mouseover text, choose to show the title or not and add a URL link to your image. 4. Examples of styled Flexible Pictures There are a variety of different styling adjustments you can add to Flexible Pictures by right-clicking on the block to open the Options pop-up. From here open the Class System drop-down by selecting the downward arrow. The Flex Picture specific System Classes are under the Image Styling section. Below are some examples. Extra Tip Resize your page width or check this page on mobile to see the effect. Styles used: "Object background", "image-rounded", "image-inner-shadow" Styles used: "Image-circular", "image-shadow" Styles used: "Image-rounded", "image-shadow" Styles used: Column with "white-back", Flexible Picture with "bordered" style and image title displayed