Divi Sitenize Floating About Card Nasıl Eklenir?

Ziyaret ettiğiniz hemen hemen her web sitesinde öğeler açılır ve sayfaya yapışır. Çerez uyarıları ve tercihleri, e-posta kayıtları ve sohbet kutuları. Hepimiz bir noktada onları görmezden gelme ve web sitesinin bize söylemeye çalıştığı her şeye kör olma eğilimindeyiz. Okumadan sadece X'i tıklıyoruz. Ancak bu, bu tür öğelerin yararlı olamayacağı veya yeri olmadığı anlamına gelmez. Divi ile, sitenize değer katan, dikkat çekmeden kim olduğunuzu ve markanızın ne yaptığını açıklayan, kolayca yüzen bir kart oluşturabilirsiniz. Ne kadar kolay olduğunu görelim.

Ön izleme

masaüstü

Mobil

1. Bir Sayfa Şablonu Oluşturun

Yapmak istediğiniz ilk şey, bu yüzen kart hakkında hangi sayfaları eklemek istediğinize karar vermektir. Bunu web sitenizin her sayfasında veya yalnızca belirli açılış sayfalarında isteyebilirsiniz. Her iki durumda da, kurmak için Divi Tema Oluşturucu'yu kullanabilirsiniz. Ya genel bir şablon olarak ya da yalnızca belirli sayfalar için geçerli olan bir şablon olarak.

Şablonu Oluşturmak için Tema Oluşturucuyu Kullanın

Başlamak için WordPress kontrol panelinizde Divi – Theme Builder'a gidin. Yüzen kartı uygulamak istediğiniz sayfaların Özel Gövde bölümünü veya her yere uygulamak için Genel Gövde bölümünü seçin.

Divi Visual Builder'ı yükledikten sonra, seçenek verildiğinde Sıfırdan Başlat'ı seçin.

1 Sütunlu Satır Ekleme ve İçerik Gönderme Modülü

Ardından, istendiğinde tek sütunlu bir satır seçin.

Ardından, İçerik Gönderi modülünü seçmek istiyorsunuz. Bu, dinamik içerik özelliğimizin bir örneğidir. Modül, Divi sayfasının kendi içinde oluşturulmuş eşlik eden tasarımı görüntüler; bu, bu modülün bu şablonla farklı sayfalar için farklı içerik göstereceği anlamına gelir. Blog gönderileri için blog içeriği olacaktır. Mağaza sayfaları için ürünler olacaktır. Ve tek tek sayfalar için Divi kullanarak oluşturduğunuz özel içerik.

Bölüm ve Satır Aralığını Ayarla

Bunlar yerindeyken, birkaç boşluk ayarlaması yapmamız gerekiyor. Bölüm ayarlarına (Divi oluşturucudaki mavi kenarlık) gidin ve tüm üst ve alt dolguları kaldırın. Sen Tasarım sekmesi, Boşluk başlığı altında bunu ve sonra Dolgu altında Top 0px ve Alt ayar.

Değişikliklerinizi kaydedin ve Satır ayarlarını girin. Yine, Üst ve Alt Dolguyu 0px olarak ayarlayın .

Ardından, Boyutlandırma başlığını bulun ve Özel Cilt Payı Genişliğini Kullan'ı açın ve değerini 1'e ayarlayın. Ardından, Genişlik ve Maks Genişlik'i %100'e ayarlayın.

Hazırlık yapıldıktan sonra, hadi kart hakkında yüzen yapmaya başlayalım!

2. Kayan Kart Ekle

Yeni Bölüm ve Satır Ekle

İlk olarak, yeni bir bölüm eklemek isteyeceksiniz. Sayfanın alt tarafına gidip mavi + daireyi tıklayarak ve bölümün türü istendiğinde Düzenli seçerek bunu yapın.

Bir Bulanıklık Modülü Ekle

Bu, kayan karta ayrılmış bölüm olacaktır. İçeride, başka bir tek sütunlu satır eklemek istiyoruz. Ve bunun içinde, kayan kartın kendisi için bir Blurb modülü kullanmak istiyoruz. Divi Blurb modülü, oluşturucudaki en çok yönlü modül olabilir, bu nedenle bu özellik için sunduğu özelliklerden yararlanmak istiyoruz.

Bölüm ve Satır Ayarlarını Ayarlayın

Bunu yerine yerleştirdikten sonra, bu satırın ve bölümün dolgusunu ve konumlandırmasını ayarlamamız gerekiyor. Yani ilk Bölüm ayarlarına gidin ve Display altında 0px için üst ve alt dolgu set - Aralığı.

Ardından, Gelişmiş sekmesi altında Konum başlığını bulun. Z İndeksini 12'ye ayarlayın. Sayı ne kadar yüksek olursa, bölüm ve içeriği o kadar "ön" duracaktır. Ve kayan bir kart olduğu için, diğer tüm öğelerin üzerinde yüzmesini istiyoruz.

Son olarak, Satır ayarlarına gidin ve Üst ve Alttaki dolgusunu bir kez daha 0 piksele ayarlayın .

Blurb Modül İçeriği

Şimdi kartın kendisini şekillendirmemizin zamanı geldi. Blurb modülü için Ayarlar'a girin. İşletmenizi tanımlayan bir unsur olduğu için şirketinizin veya markanızın ne yaptığından kısaca bahsetmek isteyeceksiniz. Bu bir örnek gönderi olduğu için, onu biraz zombi aromalı lorem ipsum ile doldurduk. Başlık ve gövde içeriğini İçerik sekmesi altında ayarlayabilirsiniz.

Arka Plan Rengini Ayarla

Açıkça kayan kartın sitenizle görsel olarak eşleşmesini istiyorsunuz, bu nedenle doğru arka plan rengini seçmek çok önemlidir. #ffffff (beyaz) ile gidiyoruz. İçerik sekmesi de buna ev sahipliği yapar ve bunu Arka Plan başlığı ve Boya Kutusu altında bulabilirsiniz.

Bir Kart Resmi Seçin

Blurb modülü size modül için bir resim veya simge ekleme seçeneği sunar ve biz şirketimizi temsil eden bir resim istiyoruz. Yine, İçerik sekmesi altında, Resim ve Simge'yi bulun ve modülünüz için çalışan resmi yükleyin.

Kart Köşelerini Şekillendirin

Ardından Tasarım sekmesine ve Kenarlık başlığına gidin. Yuvarlatılmış Köşeler seçeneklerini bulun ve her köşeyi 25 piksele ayarlayın . Bu, genel kartın şeklini değiştirmeden keskin, kare kenarları yumuşatır.

Metin hizalama

Metin başlığı altında, Metin Hizalamasını ortaya ayarlayın.

Kayan Kartın Başlık Metnini Stillendirin

Daha önce ayarladığınız başlık metni varsayılan olarak H4'tür . Stil vermek için Başlık Metni başlığına gidin, H4 sekmesini seçin ve aşağıdaki Başlık seçeneklerini değiştirin:

• Yazı Tipi: Poppins
• Yazı Ağırlığı: Kalın
• Metin Rengi: # 22303f
• Metin Boyutu: 20px
• Çizgi Yüksekliği: 1.3em

Ardından, Duyarlılık ayarlarına gitmemiz ve mobil cihazlar için başlığın boyutunu değiştirmemiz gerekiyor. Başlık Metin Boyutunu 14px olarak değiştirin .

Kartın Metnini Stillendirin

Poppins'e yanında Vücut Metin gezinmek ve değiştirmek Vücut Yazı başlık yazı eşleşecek.

Ardından Bağlantı sekmesine (zincir simgesi) tıklayın ve Bağlantı Metni Rengini siteniz için ücretsiz bir renkle değiştirin. #97c357'yi seçtik.

Hakkında Kartını Boyutlandırma

Boyutlandırma başlığı altında bu ayarlara aşağıdaki değerleri ekleyin:

• Görüntü Genişliği: %75
• İçerik Genişliği: 25vw
• Genişlik: 25vw
• Maksimum Genişlik: 30vw

Duyarlılık ayarları altında aşağıdaki değerleri ayarlayın:

• İçerik Genişliği: 90vw
• Genişlik: 90vw
• Maksimum Genişlik: 95vw

Köşedeki kayan bir kartın okunması genellikle imkansız olduğundan, bu değerler kartın mobil cihazlarda ekranın tüm genişliğini kaplamasını sağlar.

Bulanıklık için Boşluk

Boşluk başlığı Eğer Üst ve 2vw için Alt Dolgu ve Sol ve Sağ Dolgu 1vw için 0px için sol kenar boşluğu ayarlamak gerekir hızlı bir düzeltme vardır.

Duyarlı ayarlar için yalnızca Üst ve Alt Dolgu değişecektir. Bunları %5 olarak ayarlayacağız.

Kutu Gölgesi Ekle

Yüzen kart, bulunduğu yerde sabit kalacağı için, aslında içeriğinizin üzerinde yüzüyormuş gibi görünmesini istiyoruz. Bu efekt, modüle temel bir kutu gölgesi ekleyerek yeterince basittir. Bu seçenek Kutu Gölgesi altında bulunabilir ve temel alt gölgeyi seçtik.

Duyarlı CSS'yi Ayarlama

Şimdi eğlenceli kısım. Kayan kartın kendisini sayfaya yapıştırmasını sağlayacağımız Gelişmiş sekmesine geçiyoruz. Bunu yapmak için ilk adımımız masaüstü için eklediğimiz resmi kapatmak. Blurb modülündeki resimler, mobil cihazlarda boyutu ve kullanılabilirliği gerçekten etkileyebilir, ayrıca sayfanın yüklenmesi için başka bir şeydir.

Bu yüzden display:none; eklemek istiyoruz . Özel CSS altındaki yalnızca mobil Blurb Image alanı altında.

Pozisyon Ayarı ile Kartı Sabitleyin ve Kaydırın

Son olarak, kartı yüzmesini istediğimiz yere konumlandıracağız. İlk olarak, Gelişmiş sekmesine gitmek ve Konum'a kaydırmak istiyoruz. Açılır menüden Sabit'i seçin.

Ardından, Konum seçeneklerini bulun. Bu, kayan kartın ekranda kalacağı noktadır. Masaüstü için ekranın alt köşesinde olmasını istiyoruz. Yani bununla ilişkili olan kareye tıklıyoruz. Ayrıca pencere kenarından biraz ötelenmesini istiyoruz, bu nedenle Dikey Ofseti %3 ve Yatay Ofseti %2 olarak değiştireceğiz.

Ardından, mobil cihazlar için farklı bir konum ve dengeleme oluşturmak istiyoruz. Yukarıda, ekranın tüm genişliğini germek için kartın genişliğini ayarladık. Bunu akılda tutarak, Sabit Konumu alt orta olarak değiştireceğiz, böylece kart her zaman ekranın altında yüzecek.

Ek olarak, sadece mobil için Dikey Ofseti değiştireceğiz. Bu değeri %3 olarak ayarlayın. Mobil ekranın genişliği ve ortalanmış olması nedeniyle yatay kaydırmaya gerek yoktur.

Nihai sonuçlar

Her şey doğru şekilde ayarlandığında ve kişisel siteniz için ayarlandığında, nihai ürün buna benzer görünmelidir.

masaüstü

Mobil

Çözüm

Divi'nin güçlü seçenekleri ve sezgisel arayüzü ile kısa sürede sitenize yüzen bir kart tasarlayabilir ve yerleştirebilirsiniz. Kullanıcılarınıza en başından kiminle uğraştıklarını bildirerek, bir marka sadakati kazanmanız gerekir.

Web sitelerinizde kayan kartları ne için kullandınız? Yorumlarda bize bildirin!