Portion Effect

How to use Portion Effect Widget of Sky Addons for Elementor

Create amazing image grid layouts using Elementor with the Portion Effect widget. This widget allows you to design unique and creative image displays by slicing images into multiple blocks with dynamic styles. Whether you want small thumbnails, medium-sized blocks, or large image sections, the Portion Effect makes it simple and visually stunning. Ideal for portfolios, creative galleries, or modern UI components, this widget offers full control over each block’s size, position, and effects — all without writing a single line of code.

Features:

1. Split any image into custom-sized blocks.
2. Full control over each block’s height, width, and position.
3. Add creative 3D effects like rotation, brightness, and shadow.

Insert Portion Effect Widget

1. Open Elementor Editor. In the Elementor panel, search for “Portion Effect” under Sky Addons.
2. Drag and Drop the Widget to the desired location on your page / editor.

Layout Section

1. Choose Image – Upload or select the main image to apply portion effects on.
2. Blocks for Creative Portion Effects – Add multiple blocks to slice your image.
   • Height – Set height for each image portion block.
   • Width – Set width for each portion block.
   • Top – Control vertical position of the block.
   • Left – Control horizontal position of the block.

Style Customization

Customize each portion block with various advanced visual effects.

Portion Section

1. Height – Controls the vertical dimension of the effect box.
2. Box Shadow – Adds depth and realism with shadow effects.
3. Angle – Adjust the skew angle for a creative appearance.
4. Left Size – Sets how far the block appears from the left.
5. Width – Controls horizontal dimension of the block.
6. Rotate Y – Adds 3D flipping effect on the Y-axis.
7. Brightness – Adjusts light intensity of the block.

Save and Preview

1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. Image not displaying correctly? Make sure your image is properly sized and the blocks do not exceed image boundaries.
2. Blocks not aligning properly? Double-check the width, height, top, and left settings for overlapping or overflow issues.
3. Rotation looks odd? Try resetting the angle or rotate Y settings to defaults.

Conclusion

The Portion Effect widget offers a creative way to break an image into customizable parts and animate them with unique effects. It’s ideal for designers, portfolios, and interactive visuals, providing high design flexibility with minimal effort. Just pick your image, define the slices, and let the widget do the magic!