Z indeksi açıkken kayan bir düğme oluşturmak ister misiniz? Elementor ?

Tüm ekran içeriğinin önünde görünen ve genellikle dairesel bir şekil ve ortasında bir simge bulunan düğmeyi bildiğinizden eminiz. Peki, bu kayan eylem düğmesi.

Hareketli eylem düğmesi, bir eylemi tetikleyebilir veya sizi bir yere yelken açmaya gönderebilir. E-postalar, sosyal ağlar için tetikleyiciler, ziyaretçi bir kanala abone olmak için ve diğerleri.

Dans Elementor, kayan eylem düğmesi oluşturmanın iki yöntemi vardır, bunlar aşağıdaki gibidir:

  • Z-Index ayarlayarak
  • Bir açılır pencere oluşturarak -Popup-

Bu derste size sadece Z indeksini ayarlayarak kayan bir eylem düğmesinin nasıl oluşturulacağını göstereceğiz ve bunu gerçekleştirmek için pro sürümünü kullanacağız.

Ama önce şunu öğrenin: WordPress'te Elementor nasıl kurulur

Elementor'da Kayan Eylem Düğmesi Nasıl Oluşturulur

Ücretsiz sürümünü kullanabilirsinizElementor Bu yöntemle kayan eylem düğmesini oluşturmak için. Ancak tasarladığınız butonu her sayfada butonun bilgisayarınızda görünmesini istediğiniz yere yapıştırmanız gerekmektedir. web sitesi.

kazanımı için idealdir.  Elementor Pro, özelliğe de erişebilirsiniz Özel CSS, ki bu eğitimde kullanacağız.

Elementor düzenleyicinize gidin; mevcut içeriğinizi (sayfalar, makaleler vb.) değiştirebilir veya yeni bir içerik oluşturabilirsiniz. Bu eğitimde, bir sayfayı değiştireceğiz.

İlk önce, tek bir sütunla yeni bir bölüm oluşturun. Düğme widget'ını seçin ve widget panelinden düzenleme alanına sürükleyip bırakın. Sonra düğmeyi değiştir Metinleri  ve bağlantı. 

Bu eğitimde, düğmeye basmak için düğmeyi tetikleyici olarak kullanacağız. ziyaretçi gezinmek için Site Web Elementor. Ardından, seçenek üzerinde hizalanma, olarak ayarla sağ et, Son olarak, değiştirin boyut Açık düğmesinin Çok büyük.

Z indeksi ile kayan bir düğme oluşturun

Yukarıdaki GIF'de de görebileceğiniz gibi, bu buton bölümde sabittir. Ardından, aynı konumda tutarken kaydırdıkça hareket etmesini sağlayacağız.

Sekmeye git gelişmiş. parametrede Düzen, genişliği ayarla Inline'da (araba), tanımla Sabit üzerindeki konum, Ayarlamak yatay yönlendirme üzerinde sağ ve ayarla dekalaj istenildiği gibi.

Z indeksi ile kayan bir düğme oluşturun

Daha sonra, bu yöntemdeki esasları tanımlayacağız. Alan içerisinde Z Dizini, 9999 sayısını girin düğmeyi her zaman önde yapacaktır (yüzer).

Z indeksi ile kayan bir düğme oluşturun

Şimdi kayan eylem düğmesini döndürme zamanı. Her zaman sekmenin altında gelişmiş, Erişmek css sınıfları bloktan düzen, sonra yaz rotate içeride.

Ayrıca bakınız: Elementor: En İyi WordPress Sayfa Oluşturucu ile Tanışın

Bundan sonra bloğa git özel CSS , ardından aşağıdaki kodu alana yapıştırın:

.rotate.rotate
{transform: rotate(90deg);}

Düğmenin az önce döndüğünü görebilirsiniz, ancak ekranın yan tarafı arasında garip bir boşluk var. Öyleyse, ayarlayarak düzeltelim dekalaj -92'de

Z indeksi ile kayan bir düğme oluşturun

Son olarak, bu kayan eylem düğmesi için son bir küçük dokunuş yapacağız. bloğa erişin Trafo, onu seç GENEL BAKIŞ, seçeneğe eriş Ofset ve her seçeneği şuna ayarlayın: 7.

Z indeksi ile kayan bir düğme oluşturun

Elementor'da belirli bir şeyi başarmak için birkaç seçenek vardır. Kayan düğmeye gelince, kullanabileceğiniz iki seçenek var. Burada sadece bir yöntemi ele aldık, diğer yöntem başka bir öğretici olacak.

Ayrıca Oku: Elementor: Bir WordPress web sitesi nasıl taşınır

Daha fazla stil seçeneğine sahip olmak istiyorsanız, Popup'ın oluşturucusunu kullanarak kayan bir eylem düğmesi oluşturmak daha iyi bir alternatif olacaktır, çünkü düğmenin yanı sıra düğmenin kapanma süresi, süresi, giriş veya çıkış animasyonu gibi davranışı özelleştirme seçeneklerine sahip olacaksınız. .

Bu görevi az önce kolayca tamamladınız. Kenar boşluklarını her cihaza uyacak şekilde değiştirmeye çalışarak tabletinizin ve akıllı telefonunuzun çalışmasını önizleyin.

Elementor Pro'yu Hemen Alın!

Sonuç

Böyle ! Bir profil kartına nasıl Yakınlaştırma efekti uygulanacağını gösteren bu makale bu kadar. Oraya nasıl gideceğinizle ilgili herhangi bir endişeniz varsa, bize içinde bildirin. Yorumlar.

Ancak, ayrıca kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.

...