Image / Animation - Related Blocks

📝 Note: These blocks are part of the Otter Blocks plugin, which you can get from here.

📝 Note: The blocks' appearance can be improved using the Otter features, such as Transform to Sticky, Visibility conditions, Dynamic Values or Images, as well as Counting / Typing / Loading animations, and Patterns.

The Otter plugin allows the creation of engaging websites using image-related blocks:

🗄️ Masonry

This block boasts the website's appearance by displaying multiple images in a rich masonry layout.

Each image displayed in this block can be separately customized by clicking on it and using the options in the right sidebar. The specific customizations available for the Masonry block cover two areas:

Masonry - where you can activate the masonry layout and adjust the space between the photos from the margin area.

Gallery settings - from this area, you can customize the images by selecting the number of columns, enabling the cropping option to ensure alignment, or linking to the image / attachment page. You can also select an image size.

Use cases for the Masonry block

creating a beautiful About Us section

⏭️ Slider

Enhance your website's appearance with a minimal image slider to showcase beautiful images.

The specific customizations available for this block cover two areas:

Images - here, you can add the images you want to display in the slider and captions.
Settings - from this tab, you can configure the number of visible slides and the height of the images. The interesting part is that you can set the autoplay and adjust the slide change delay. The arrows and bullets can be hidden from the slider.

Use cases for the Slider block

presenting products' qualities in a more dynamic way

creating an NFT preview section using the slider block

🚲 Lottie Animation

This block boosts your website's dynamics by allowing you to add animated images easily.

The specific customizations available for this block cover one area:

Settings - here, you can set the trigger of the animation, enable to loop animation, adjust its speed, reverse the animation, and adjust the container width in pixels.

Edit - allows the user to change the animation very easily. To insert a Lottie Animation, you can paste the URL of it or upload a JSON file. Check this link if you need Lottie files source.

📝 Note: To use JSON uploads for Lottie Animations, make sure you check this option from Settings > Otter.

Use cases for the Lottie Animation block

creating a 404 page using the Lottie animations

creating an outstanding Custom Thank You Page - documentation

📝 Note: Unlock more features using the PRO version of the plugin.