How to Create a Claymorphism Effect in Elementor - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Wordpress Elementor Page Builder Video: How to Create a Claymorphism Effect in Elementor.
👋🏼 Help us improve by answering this short survey: http://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: https://elementor.com
Get Elementor Pro: https://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

Published: Thursday, July 14, 2022 9:23 PM
Category: Wordpress Elementor Page Builder

12 Views

Related Videos

How to Create Animated Snowfall Effect with Elementor

by Best Webhosting Added 4 years ago 93 Views / 0 Likes

The Christmas is here! How to add some holiday feel to your online store pages or your blog pages? That's super easy and code-free with JetTricks add-on for Elementor! Check this out! Get Best Elementor Themes, Templates and Add-ons: https://www.templatemonster.com/elementor-marketplace/ Get JetTricks Plugin Now: https://www.templatemonster.com/wordpress-plugins/jettricks-visual-effects-addon-for-elementor-wordpress-plugin-69529.html Jingle Bells - Ch
Create a Sticky Scrolling Effect Using Elementor

by Best Webhosting Added 4 years ago 94 Views / 0 Likes

In this tutorial, we'll see how to create a cool sticky scrolling effect, showing 3 interchanging mobile images that scroll into one another. You will learn how to: • Make an image widget sticky • Use the z-index • Add animation • Create a SUPER COOL effect Get Elementor: https://elementor.com Join Pro: https://elementor.com/pro/
How to Create a Popup With a Mouse Track Effect in Elementor

by Best Webhosting Added 4 years ago 97 Views / 0 Likes

In this tutorial, we’ll create a popup with a mouse track effect that you can add to your WordPress website using Elementor. You'll learn how to: •︎ Create a mouse track effect animation •︎ Use position absolute •︎ Set conditions and triggers Note: Mouse track effects do not work on mobile or tablet because they don’t use a mouse. Read more on Motion Effects here: https://elementor.com/blog/introducing-motion-effects/ Get Elementor Pro: https://elemen
Create 3D Image Effect with Elementor Pro Motion Effects

by Best Webhosting Added 4 years ago 95 Views / 0 Likes

Elementor's Motion Effects are an awesome feature that all of us were thrilled to get for Elementor Pro. And they don't stop to amaze us to this day, since they allow you to create stunning animations in such an easy way, by simply clicking a couple of buttons! Here's a cool little trick that you guys might find interesting, achieved by an unusual combination of motion effects settings. WordPress theme for Elementor we used in this tutorial. Try it ou
How to Create a Sliding Door Effect With Mouse Track in Elementor

by Best Webhosting Added 4 years ago 96 Views / 0 Likes

In this tutorial, we’ll create a sliding door movement with motion effects that you can add to your WordPress website or landing page using Elementor. You'll learn how to: •︎ Use custom width •︎ Add Z-index •︎ Add a horizontal scroll motion effect Read more on Motion Effects here: https://elementor.com/blog/introducing-motion-effects/ Get Elementor Pro: https://elementor.com/pro/
Advanced Tutorial: How to Create an Animated Text Effect in Elementor

by Best Webhosting Added 4 years ago 98 Views / 0 Likes

In this tutorial, we’ll create cool animated text with motion effects that you can add to your WordPress website using Elementor. You'll learn how to: •︎ Add a horizontal scroll •︎ Use the overflow: hidden dropdown •︎ Create a cool text trick! (Advanced) Read more on Motion Effects here: https://elementor.com/blog/introducing-motion-effects/ Get Elementor Pro: https://elementor.com/pro/
Create a Neon Lighting Effect with Text in Elementor #Shorts

by Best Webhosting Added 2 years ago 14 Views / 0 Likes

In this video, Selin, one of our Elementor Experts, teaches you how to create a neon lighting effect with text in Elementor. 🔔 Subscribe to our channel!🔔 https://www.youtube.com/c/Elementor?sub_confirmation=1 Get Elementor: https://elementor.com Get Elementor Pro: https://elementor.com/pro #shorts #elementor #elementorpro #webcreators #neoneffect #neontext
Create a Popup Text Path Menu with a Hover Image Effect in Elementor [Advanced PRO]

by Best Webhosting Added 2 years ago 20 Views / 0 Likes

In this Advanced Tips & tricks tutorial we’ll learn how to create a popup text path menu with an awesome animated hover effect on the image to really level up our navigation designs. The tutorial will cover: ✔︎ Creating a popup menu ✔︎ Using the Text Path Widget with a custom SVG ✔︎ Hiding and rotating image using custom CSS ✔︎ Connecting the popup menu to the icon in header section ✔︎ And much more! Links: Text Path Widget Tutorial https://youtu.be/a
Popular
Elementor Tutorial - 3 Easy Ways To Add Parallax Scrolling Effect To Elementor Sections

by Best Webhosting Added 4 years ago 102 Views / 0 Likes

People love their parallax effect and in this video, I am going to show you how to add it to your Elementor designs... Ok so there are 3 different ways to do this until Elementor adds it themselves: - http://snifflevalve.com/tutorials/elementor-parallax-section-background-image/ - https://wordpress.org/plugins/granular-controls-for-elementor/ - https://shop.namogo.com/elementor-extras/extensions/parallax-elements/ On a side note, I am not really a par
How to Add a Christmas Snow Effect With CSS in Elementor

by Best Webhosting Added 4 years ago 69 Views / 0 Likes

Adding falling snow to your website is a great way get into the Christmas festive spirit. For this, all we need to do is embed a small piece of CSS, using Elementor's custom CSS feature. Get the CSS Snow Effect code: https://elementor.com/christmas-snow-effect/ Download Elementor Pro: https://elementor.com/pro/
Popular
How to Add a Parallax Effect to Your Hero Section in Elementor

by Best Webhosting Added 4 years ago 103 Views / 0 Likes

In this tutorial, we’ll add a 3d parallax effect to our hero section on our WordPress website using Elementor. You'll learn how to: •︎ Layer images on top of one another •︎ Use vertical scroll on text •︎ Set fixed position to a section background Learn more about the viewport settings: https://www.youtube.com/watch?v=0pjPb8orwXM Read more on Motion Effects here: https://elementor.com/blog/introducing-motion-effects/ Get Elementor Pro: https://elemento
Sticky Sections Overlap Effect with Elementor Pro

by Best Webhosting Added 4 years ago 85 Views / 0 Likes

Create Overlapping Sticky Sections Effect with Elementor Pro. Elementor Pro allows you to design creative visual effects for your websites. Websites mentioned in this video: https://www.apple.com/apple-music/ ~~~~~ • Subscribe to ONE by TemplateMonster, to unlimited access to over 10,000 products for web design and development: • https://one.templatemonster.com/ ~~~ Get JetElements Add-on for Elementor • https://www.templatemonster.com/wordpress-plugi