How to Create a Custom Image Shape in Elementor

HomeWordPressHow to Create a Custom Image Shape in Elementor

How to Create a Custom Image Shape in Elementor

Image is a crucial element of design. But, merely adding an image is not enough. You need to style up your image to make it more attractive. In the context of web design, it’s a common thing to see an image in a round or rectangle shape. What about custom shape?

A few moments ago, Elementor released a WordPress theme called Hello. It’s a simple WordPress theme designed specifically to work with Elementor. We are not going to review the theme in this post. The screenshot of the theme is what we are going to talk about. The screenshot of the Hello theme shows up a simple, clean web page with an image in custom shape as follows.

We love the concept of the web page design displayed on the screenshot as it looks elegant for us. Or more specifically, we love the shape of the image in which unique enough.

Turns out, creating a custom image shape like the one shown on the Hello theme is pretty easy in Elementor. All you need to do is set the custom border radius of the image.

First off, add an image to your Elementor canvas by dragging it from the element panel (the left side panel) and select an image from the gallery or upload a new one.

Once the image is added, go to the Style tab on and scroll down to the Border Radius option under the Image section. Click the chain icon to unlink the values.

Set the border radius values until you get the shape you want. Use different values to get a custom image shape.

In addition to setting different border radius values to an image to make it have a unique shape, Elementor also offers more options to make your image look even more attractive. For instance, you can add a box shadow or set a hover animation.

If you are new to Elementor, you can visit this page to read more articles about Elemetor.

hand-picked weekly content in your inbox


related posts