Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor.

Elementor'da Z indeksli kayan bir düğme oluşturmak ister misiniz?

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.

Kayan eylem düğmesi bir eylemi tetikleyebilir veya sizi bir yere yelken açmaya gönderebilir. E-postalar için tetikleyiciler, sosyal ağlar, ziyaretçileri bir kanala abone olmaya yönlendirmek ve daha fazlası gibi.

Elementor'da 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

Bu yöntemle kayan eylem düğmesi oluşturmak için Elementor'un ücretsiz sürümünü kullanabilirsiniz. Ancak, web sitenizde düğmenin görünmesini istediğiniz her sayfada tasarladığınız düğmeyi yapıştırmanız gerekir.

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.

Elementor ile web sitenizi kolayca oluşturun

Elementor oluşturmanıza izin verir Kolay ve Ücretsiz profesyonel bir görünüme sahip herhangi bir web sitesi veya blog tasarımı. Kendiniz yapabileceğiniz bir web sitesi için çok fazla ödeme yapmayı bırakın.

İ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, ziyaretçileri Elementor web sitesinde gezinmeye zorlamak için düğmeyi bir tetikleyici olarak kullanacağız. 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ş.

...