Elementor ile Animasyonlu Blob Efekti Nasıl Yapılır?

WordPress Elementor Pro kullanarak sitelere modern bir animasyonlu blob efekti nasıl ekleyebileceğinizi adım adım gösterdim.
Ekstra eklenti gerektirmeden, sadece birkaç satır CSS ile şık bir hover geçişi oluşturuyoruz.
Tasarımınızı öne çıkaracak sade ama etkileyici bir efekt arıyorsanız bu videoya göz atabilirsiniz 

selector:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  transition: 0.5s;
  border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
  animation: animate 10s linear infinite;
}
selector:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  border: 2px solid #fff;
  border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
  animation: animate2 6s linear infinite;
}
selector {
  position: relative;
  z-index: 10;
}
selector:hover p {
  color: #fff;
}
selector:hover:before,
selector:hover:after {
  background: rgba(0, 0, 255, 0.6);
  border: none;
}
@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes animate2 {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}