How to Create An Image Mask in Divi
Images are a very important element of any website. One picture says a thousand words and gives the page a fresher and lighter look.
It doesn’t matter if you are showing yourself/your products in the picture or using stock pictures, one thing is for sure, a picture with sharp edges can sometimes look quite boring.
If you observe the work of designers while looking for ideas to design your website, you have probably come across very interesting image layouts surrounded by colors and shapes many times.
This design is also called an image mask. And in Divi, this is very easy to achieve with a couple of modules. Follow this tutorial to find out how, or download three ready-made sections and edit them to your liking.
Add a new Section
Go to the page you want to add an image to or create a new one. Add a new Section with two rows and add a Divider module in the row of your choice.
Edit Divider module
- Show divider → No
- Background → Add your Image as a background (this gives you more control on how your image is positioned inside a mask).
- Apply Admin Label: Main image in the Content tab → Admin Label.
- Go to the Design tab and set height to 500px for Desktop, 500px for Tablet and 300px for Mobile view in the Sizing tab.
- In the Advanced tab go to Position and set position to relative, vertical offset to 10px and z-index to 2.
Now let’s add our mask.
We will be using SVG shape for this with base64 encoding.
In the Advanced tab of our Divider module go to Custom CSS tab and paste the code below in the Main CSS field.
CSS
-webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1MDAgNTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48cGF0aCBkPSJNMjY0LjM1MywzMy42ODFjMTAzLjEwMiwyOC42NDcgMjM0LjQ1NSw4MC42NzEgMjM0LjQ1NSwyMjMuOTYzYzAsMTMzLjk0NSAtMTU3LjA4OSwyMzYuODY3IC0yNTcuMDIyLDIyNS42NjFjLTg3LjU5MywtOS44MjEgLTE0Ny43MzIsLTQ5LjI0NSAtMTgzLjUxNiwtMTE0LjE5Yy0zNy45MzcsLTY4Ljg1NiAtNjcuNjg4LC0xOTYuOTkxIC01My40NTUsLTI1OC44OTFjNy40NTMsLTMyLjQxNSAyMi44NzgsLTU1LjcwMiA0NS42NTYsLTcwLjQ3YzU0LjM2NSwtMzUuMjQ3IDE0MC42NywtMjYuNDE0IDIxMy44ODIsLTYuMDczWiIvPjwvc3ZnPg==");
-webkit-mask-repeat: no-repeat;
Take a look at how your image looks inside the mask.
If you don’t like how it’s positioned you can go back to the background settings in the Content tab and choose a different background position. For my image I chose the bottom right position.
Add the background shape
- Add a new code module.
- Apply background color to it. I chose pink and added a bit of transparency.
- Apply Admin Label: Background Shape in the Content tab → Admin Label.
- Go to the Design tab → Sizing and set width to 70% and height to 100%.
- In the Transform tab choose Rotate and set 35deg to the first field.
- Go to the Advanced tab → Position. Set position to absolute, Horizontal Offset to 20px and z-index to 1.
- Now apply the mask to the background shape. Go to the Advanced tab → Custom CSS and paste the code below in the Main element field.
CSS
-webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1MDAgNTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48cGF0aCBkPSJNMjY0LjM1MywzMy42ODFjMTAzLjEwMiwyOC42NDcgMjM0LjQ1NSw4MC42NzEgMjM0LjQ1NSwyMjMuOTYzYzAsMTMzLjk0NSAtMTU3LjA4OSwyMzYuODY3IC0yNTcuMDIyLDIyNS42NjFjLTg3LjU5MywtOS44MjEgLTE0Ny43MzIsLTQ5LjI0NSAtMTgzLjUxNiwtMTE0LjE5Yy0zNy45MzcsLTY4Ljg1NiAtNjcuNjg4LC0xOTYuOTkxIC01My40NTUsLTI1OC44OTFjNy40NTMsLTMyLjQxNSAyMi44NzgsLTU1LjcwMiA0NS42NTYsLTcwLjQ3YzU0LjM2NSwtMzUuMjQ3IDE0MC42NywtMjYuNDE0IDIxMy44ODIsLTYuMDczWiIvPjwvc3ZnPg==");
-webkit-mask-repeat: no-repeat;-webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1MDAgNTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48cGF0aCBkPSJNMjY0LjM1MywzMy42ODFjMTAzLjEwMiwyOC42NDcgMjM0LjQ1NSw4MC42NzEgMjM0LjQ1NSwyMjMuOTYzYzAsMTMzLjk0NSAtMTU3LjA4OSwyMzYuODY3IC0yNTcuMDIyLDIyNS42NjFjLTg3LjU5MywtOS44MjEgLTE0Ny43MzIsLTQ5LjI0NSAtMTgzLjUxNiwtMTE0LjE5Yy0zNy45MzcsLTY4Ljg1NiAtNjcuNjg4LC0xOTYuOTkxIC01My40NTUsLTI1OC44OTFjNy40NTMsLTMyLjQxNSAyMi44NzgsLTU1LjcwMiA0NS42NTYsLTcwLjQ3YzU0LjM2NSwtMzUuMjQ3IDE0MC42NywtMjYuNDE0IDIxMy44ODIsLTYuMDczWiIvPjwvc3ZnPg==");
-webkit-mask-repeat: no-repeat;
Add the first additional shape
- Add a new Code module.
- Apply a background color to it. I chose pink again.
- Apply Admin Label: Shape One in the Content tab → Admin Label.
- Go to the Design tab → Sizing and set height and width to 150px.
- Go to the Border tab and set border radius to 50%.
- Go to the Advanced tab → Position. Set position to absolute and click the bottom right square in the position window.
- Set Vertical Offset to -10px, Horizontal Offset to 20px and z-index to 9.
- Go to Custom CSS and paste the code below in the Main Element field.
CSS
-webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzIDMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+PHBhdGggZD0iTTIuMDY4LDEuMjk3YzAsMC4yMDQgLTAuMDg0LDAuNDA1IC0wLjIyNiwwLjU0OWMtMC4xNDQsMC4xNDIgLTAuMzQ0LDAuMjI4IC0wLjU0NiwwLjIyOGMtMC4yMDUsLTAgLTAuNDA3LC0wLjA4NiAtMC41NDksLTAuMjI4Yy0wLjI4NywtMC4yOTEgLTAuMjg3LC0wLjgwNSAtMCwtMS4wOTVjMC4xNDIsLTAuMTQyIDAuMzQ0LC0wLjIyNSAwLjU0OSwtMC4yMjVjMC4yMDIsMCAwLjQwMiwwLjA4MyAwLjU0NiwwLjIyNWMwLjE0MiwwLjE0NyAwLjIyNiwwLjM0NCAwLjIyNiwwLjU0NiIgc3R5bGU9ImZpbGwtcnVsZTpub256ZXJvOyIvPjwvc3ZnPg==");
-webkit-mask-repeat: repeat;
-webkit-mask-size: 4px;
Add another additional shape
- Add a new Code module.
- Apply a background color to it. I chose pink again.
- Apply Admin Label: Shape Two in the Content tab → Admin Label.
- On the Design tab → Sizing and set height and width to 40px.
- On the Transform tab and choose Rotate. Apply 320deg to the first field.
- Go to the Advanced tab → Position and set position to absolute. Set Vertical Offset to 55px (30px on mobile), Horizontal Offset to 5px and z-index to 9.
- Now go to the Custom CSS tab and paste the code below to the Main Element Field.
CSS
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
That’s it! Save it and go take a look at your awesome image mask design. If you want to modify colors you can right click on the element and click “View Modified Styles” or choose your module you would like to edit in the wireframe view or with the help of layers.
Using Divi Pixel Image Mask module
Take your designs to the next level and save time and money by using the Divi Pixel Plugin. Select your plan and start building awesome websites today. We offer a 14-day money-back guarantee, so joining Divi Pixel is 100% risk-free!
Kaja Haler
Kaja is the CEO of a boutique online agency, a young mom, a perfectionist, a front-end developer & Divi enthusiast, with a great passion for beautiful websites that bring results. She has been making websites for the sixth year in a row, and for the last two years she has been paying a lot of attention to conversion design, as a beautiful website is good, but a beautiful website that sells is even better.
Enhance your Divi Theme with Custom Settings and New Modules. Start Creating Awesome Websites with the Divi Pixel
We offer a 14 Day Money Back Guarantee, so joining is Risk-Free!
