Gutenberg'de Kodsuz (Sabit) Yapışkan Blok Nasıl Oluşturulur

Gutenberg'de yapışkan blok oluşturmanın yollarını mı arıyorsunuz? 🤔

Bağlı kuruluş sorumluluk reddi beyanı oluşturmak, indirimler sunmak veya ziyaretçilerin dikkatini ürününüzün önemli özelliklerine çekmek istiyorsanız, yapışkan bir blok bu hedeflere ulaşmanıza yardımcı olabilir.

Sabit bloklar olarak da bilinen yapışkan bloklar, kullanıcı sayfayı aşağı kaydırdığında bile ekranda görünür kalır ve vurgulamak istediğiniz içeriğin her zaman kullanıcının görünümünde olmasını sağlar.

👉 İşte neden bahsettiğimize dair bir örnek: kullanıcı kaydırırken bile sosyal simgelerin kendi konumlarında nasıl "sıkıştığını" görebilirsiniz:

Gutenberg'e yapışkan bir blok eklemek, kusursuz ve ilgi çekici bir kullanıcı deneyimi sunarak mesajınızı etkili bir şekilde iletmenize ve hedef kitlenizin ilgisini çekmenize olanak tanır.

Gutenberg kutunun dışında yapışkan bir blok sunmuyor. Ancak yazılarınıza ve sayfalarınıza yapışkan bloklar eklemek için kullanabileceğiniz üçüncü taraf araçlar vardır.

Bu derste, WordPress web sitenize yapışkan bir blok eklemek için Otter Blocks adlı popüler Gutenberg eklentisini nasıl kullanacağınızı göstereceğiz.

Hadi derinlemesine inceleyelim. 🤿

Gutenberg Editör'de yapışkan blok nasıl eklenir

Gutenberg Editör'de yapışkan blok eklemek için aşağıdaki adımları uygulamanız gerekir:

• Adım 1: Otter Blocks eklentisini yükleyin ve etkinleştirin
• 2. Adım: Bloğunuz için Yapışkana Dönüştürme aracını etkinleştirin
• 3. Adım: Yapışkan blok konumunu değiştirin
• 4. Adım: Ofseti yapılandırın
• 5. Adım: Mobil cihazda yapışkan engellemeyi etkinleştirin
• İsteğe Bağlı Adım: Kayan modu deneyin
• İsteğe Bağlı Adım: Blok davranışını belirtin

Adım 1: Otter Blocks eklentisini yükleyin ve etkinleştirin 🔌

Otter Blocks, Gutenberg Düzenleyicinin işlevlerini genişleten bir WordPress eklentisidir.

Web sitenizin tasarımını ve işlevini geliştirmeye yardımcı olacak bir dizi sayfa yapı taşı, düzenleyici özelliği ve şablon sunar.

Otter tarafından sunulan en popüler bloklardan bazıları, diğer şeylerin yanı sıra fiyatlandırma tabloları, referanslar, sosyal simgeler, haritalar, ilerleme çubukları, animasyonlar, geri sayım ve ürün incelemeleridir. İşte Otter bloklarının tam listesi.

Otter Blocks'un ücretsiz ve premium bir sürümü vardır (Otter Pro olarak adlandırılır).

Gutenberg'de temel bir yapışkan blok oluşturmak için ücretsiz sürümü kullanabilirsiniz, böylece bu eğiticiyi ücretsiz olarak takip edebilirsiniz.

Ancak blok ile ekran arasına mesafe eklemek, ön uçtaki yapışkan bloğu kaldırmak, mobil cihazlarda yapışkan blokları görüntülemek vb. gibi ele aldığımız adımların bazılarını gerçekleştirmek için eklentinin premium sürümüne ihtiyacınız var.

Otter Pro, tek bir web sitesi için yıllık 49 ABD doları tutarında bir ücret karşılığında mevcuttur. Buradan satın alabilirsiniz. Eklentiyi kullanmadan önce denemek istiyorsanız bu demoyu bir deneyin.

➡️ Devam etmek için Otter'ın ücretsiz veya premium sürümünü yükleyin. Aşağıdaki eğitimde, belirli bir özelliğin ne zaman premium seçeneğini gerektirdiğini not etmeye çalışacağız.

Adım 2: Bloğunuz için Yapışkana Dönüştürme aracını etkinleştirin 🚧

Gutenberg Editör'de yapışkan bloğu eklemek istediğiniz sayfayı açın veya gönderin.

Yapışkan hale getirmek istediğiniz bloğu seçin ve düzenleyicinin sağ tarafında bulunan panele gidin.

Panelde Engelle'ye gidin ve Engelleme Araçları seçeneğine gidin. Artı işaretini seçerek Blok Araçlarını genişletin.

Ardından açılır menüden Yapışkana Dönüştür'ü seçin.

Blok Araçları'nın hemen altında Yapışkan adlı yeni bir seçenek görünecektir. Bunu genişletin ve Sticky To'ya gidin.

Sticky To'da bloğun yapışmasını istediğiniz öğeyi ayarlayabilirsiniz. Dört seçenek vardır:

1. Üst Düzey Blok
2. Bölüm
3. Ebeveyn Bloğu
4. Ekran

Bu seçenekleri ve hangisinin yapışkan gönderinize uygun olduğunu anlamak için Gutenberg Editör'de Belgeye Genel Bakış'ı açın ve yapışkan yazı blokunuzu çevreleyen bloklara bakın.

En üstteki blok Üst Düzey bloktur. Üst Seviye Bloğu seçerek yapışkan bloğunuzu en üstteki blokla sabit hale getirmiş olacaksınız. Bizim durumumuzda, aşağıdaki resimdeki Grup bloğudur.

Daha sonra, Bölüm seçildiğinde yapışkan bloğun Bölüm bloğuna sabitlenmesi sağlanır ve Ana blok seçildiğinde yapışkan blok , yapışkan bloğunuzun hemen üzerindeki bloğa sabitlenir .

Bizim durumumuzda Parent bloğu Bölüm Sütunu bloğudur. Aşağıdaki resme bakın.

Son olarak, Ekran seçeneğinin seçilmesi editöre tüm blokları göz ardı etmesini ve gönderiyi kullanıcı ekranının en üstüne yapıştırmasını söyleyecektir.

Yapışkan bloğun konumu varsayılan olarak üst olarak ayarlanmıştır. Konumunu nasıl değiştireceğinizi öğrenmek için bir sonraki adıma geçin.

3. Adım: Yapışkan blok konumunu değiştirin 🚩

Yapışkan blok konumunu değiştirmek için sağ panele dönün ve Yapış seçeneğinin hemen altındaki Konum'u arayın.

Yapışkan bloğu ekranın üstüne veya altına yerleştirebilirsiniz. Alt konum yalnızca Otter Pro kullanıcıları tarafından kullanılabilir .

Bloğun demo sitelerimizden birinde nasıl göründüğü:

4. Adım: Ofseti yapılandırın ⚙️

Yapışkan bloğun konumunu ayarladıktan sonra önizlemesini yapmayı deneyin. Blok ekrana çok uzak veya yakın görünüyorsa, yapışkan blok ile ekran arasındaki mesafeyi artırmak veya azaltmak için Ofset seçeneğini kullanın.

5. Adım: Mobil cihazda yapışkan engellemeyi etkinleştirin 📱

Varsayılan olarak yapışkan blok yalnızca masaüstü bilgisayarlarda görünür. Mobil cihazda etkinleştirmek istiyorsanız Mobil cihazda etkinleştir seçeneğini açmanız yeterlidir.

Bu arada mobil seçeneğe yalnızca Otter Pro kullanıcıları erişebiliyor .

İsteğe Bağlı Adım: Kayan modu deneyin 🏄

Yapışkan blok, kullanıcılar sayfayı kaydırdığında ekran boyunca yüzecek şekilde ayarlanabilir. Kullanıcının dikkatini çekmenin ve onu yapışkan bloğa yönlendirmenin harika bir yolu.

Yalnızca Otter Pro kullanıcıları kayan modu kullanabilir ve bu yalnızca bizim durumumuzda grup bloğu olan üst düzey bloğa uygulanabilir.

Kayan nokta moduna geçiş yaptığınızda bloğun genişliğini , kenarını ve kenar uzaklığını tanımlamanız istenecektir.

Genişlik elbette bloğun genişliğini ifade eder ve kenar, bloğun ekrandaki konumunu (sol veya sağ) tanımlamanıza yardımcı olur. Ofset , yapışkan blok ile seçilen taraf arasındaki mesafeyi ifade eder.

Kayan modu yapılandırdıktan sonra sayfayı ön izlemenizi ve gerekli ayarlamaları yapmanızı öneririz.

İsteğe Bağlı Adım: Blok davranışını belirtin 👨🏽‍💼

Otter Block eklentisini kullanarak aynı sayfada birden fazla yapışkan blok oluşturabilirsiniz. Bazen bu bloklar birbiriyle çarpışabilir. Davranış seçeneğini kullanarak, yapışkan bir bloğun çarpışmalar sırasında nasıl tepki vereceğini belirleyebilirsiniz.

Davranışı daraltma , soldurma veya yığınlama şeklinde ayarlayabilirsiniz.

Çöküşün seçilmesi, yapışkan blokların aynı hareketle çarpışma sırasında birbirlerine çökmesini sağlayacaktır:

Ve soldurmayı seçmek, bloğun soluklaşmasına veya diğer bloğun içinde kaybolmasına neden olacaktır.

Son olarak yığın seçildiğinde, aşağıdaki gif'te gösterildiği gibi blok, çarpıştığı diğer yapışkan blokların üzerine yığılacaktır .

Hem soldurma hem de yığın yalnızca Otter Pro kullanıcıları tarafından kullanılabilir .

Bu kadar. Artık Gutenberg'e yapışkan bir blok eklediniz. 🤩

Gutenberg'de ilk yapışkan bloğunuzu yaratın 🧱

Gutenberg'e sabit veya yapışkan bir blok eklemek, ziyaretçilerin dikkatini WordPress web sitenizin önemli bölümlerine çekmenin harika bir yoludur.

Gutenberg varsayılan bir yapışkan blok sunmadığından, bu işlevi sitenize eklemek için üçüncü taraf bir eklenti kullanmanız gerekir.

Bir avuç yapışkan blok eklentisi olsa da, Otter Blocks piyasadaki en kolay ve en kullanıcı dostu blok eklentisidir.

Ücretsiz ve premium bir sürümü var. Ücretsiz sürüm, yapışkan bir blok oluşturmak için kullanılabilir, ancak ekranın alt kısmındaki bloğu sabitlemek veya mobil cihazda bloğu etkinleştirmek gibi bazı gelişmiş ayarlar, eklentinin premium sürümü kullanılarak gerçekleştirilebilir.

👉 Otter Blocks eklentisini kullanarak sayfanızda yapışkan bir blok oluşturmak ve çalıştırmak için aşağıdaki adımları izlemeniz gerekir:

Gutenberg'de nasıl yapışkan blok oluşturulacağı hakkında sorularınız varsa aşağıdaki yorum bölümünde bize bildirin .