Channel: Elementor

Category: Education

Description: 👋🏼 Help us improve by answering this short survey: elemn.to/survey-time In this tutorial we’ll learn how to create a claymorphism effect using Elementor. As an added bonus, we’ll teach you two ways to achieve this. The first natively in Elementor, and the second using custom CSS. Claymorphism is a technique used to give your website elements an effect of depth and it is achieved by combining two shadows. It kinda looks like clay and therefore is named claymorphism. The tutorial will cover: ✔︎ Applying Claymorphism to shapes ✔︎ Applying Claymorphism to buttons ✔︎ Adding custom CSS for further enhancements ✔︎ Using CSS classes for efficiency ✔︎ And much more! CSS Code Snippets: selector .elementor-widget-container{ box shadow: inset 10px 10px 15px #F1FCE3, box shadow: inset -10px -10px 30px #BCD39C; } clay .elementor-widget-wrap{ background-color: #fff; box-shadow: inset 10px 10px 15px #F1FCE3, inset -10px -10px 20px #A9C682, 10px 10px 20px #1F688C42; } Don’t forget to subscribe to our channel! Get Elementor: elementor.com Get Elementor Pro: elementor.com/pro Timestamps: 00:00 Introduction 00:45 Get started 00:55 Add Claymorphism to shape 01:49 Add Claymorphism with CSS 02:29 Use CSS classes for efficiency 03:45 Add Claymorphism to a button