Divi ile bir öğe altbilgisi olarak bir bulanıklık modülü nasıl kullanılır

Bulanık modül Divi altbilgisi için iyi bir seçimdir. Farklı düzenlerde görüntüleri veya simgeleri görüntüleyebilirler ve birçok ayarları vardır. Mermileri şık hale getirmek için simgelerle bağlantılar için idealdir. Neyse ki, divi açıklama modülünü kullanarak bu tür bir bağlantı yapmak zor değildir. Bu makalede, Divi altbilginizde altbilgi öğesi için açıklama modülünün nasıl kullanılacağını göreceğiz. Önizleme Başlamadan önce, altbilgimizin masaüstünde ve akıllı telefonda nasıl göründüğüne bakalım. Bulanık modül altbilgisi ile masaüstü

İşte yapacağımız altbilginin masaüstü sürümü. Bir bağlantı oluşturmak için sağ üst köşede bir açıklama kullanıyoruz.
Bulanık modül altbilgisi ile cep telefonu

Aşağıda bir akıllı telefondaki açıklamamızla bir altbilgi ekranıdır. Divi altbilgi şablonunu indir

İlk olarak, Divi tema oluşturucu için bir şablon altbilgisine ihtiyacınız var. Bunu kendiniz yapabilir veya blogda zarif temalar tarafından sağlanan ücretsiz altbilgilerden birini kullanabilirsiniz. “Ücretsiz altbilgi” için bir blogda arama yaparak bulabilirsiniz. Bilgisayarınızdan klasörü indirin ve unzip. Örneğim için, Divi’nin yapay zeka düzeni paketleri için ücretsiz bir başlık ve altbilgi şablonu kullanıyorum. YouTube kanalımıza abone olun Divi altbilgi şablonunuzu yükleyin

JSON dosyanızı yüklemek için WordPress kontrol panelinde Divi> Tema Oluşturucunu açın. Taşınabilirliği seçin ve Sermaye İçe Aktarma sekmesini tıklayın. Dosyayı seçin ve bilgisayarınızdaki dosyaya gidin ve seçin. Divi Tema Şablon Şablonlarını İçe Aktar’ı tıklayın ve dosyanın içe aktarmasını bekleyin. Kullanmak istemiyorsanız başlıkları silin. Değişik Kaydet’i tıklayın. Artık yeni Divi altbilginizi ayarlamaya hazırsınız. Altbilgiyi buradan arkadan düzenleyebilir veya ön taraftaki görsel oluşturucuda seçebilirsiniz. Başlayıcının özel bir menüsü olduğu ve varsayılan olarak oluşturucuda açıldığı için alt altta altbilgiyi düzenleyeceğim. Düzen ve başlığın her ikisi de çizilecek birçok tasarım kuyruğuna sahiptir. Özellikle başlık şablonundaki menü tasarımını ve altbilgi yapay zekayı seviyorum. Tüm bunları, altbilgide bir açıklama bağlantısı tasarlamama yardımcı olmak için kullanacağım. Blurb modülünü öğe altbilgisi olarak kullanın

Yaptığımız ve kaynaklar adı verilen iki bölümdeki bağlantıyı değiştireceğim. Bu bize istediğimiz bağlantıyı verecek ve bir simge ile vurgulayacaktır. İlk başlığı kullanacağım ve bağlantı sayısını azaltacağım. İlk olarak ayarlayacağız ve geri kalanını yapmak için klonlayacağız.

İlk olarak, modülü iki sütundan birinde silin. Bunu iki sütuna dönüştüreceğiz, bu nedenle bir öğe altbilgisi olarak açıklama modülümüz için yalnızca bir sütuna ihtiyacımız var.

Satır ayarlarını açın ve iki sütunu seçin.

Son olarak, bağlantı içeren metin modülünü silin. Sadece bir başlık modülüne ihtiyacımız var.

İmleci modülü eklemek istediğiniz alana gidin ve artı simgesini seçin. Listeden Açıklama Modülünü seçin. Blurbmul modülü hazırlayın Açıklama başlıklar, içerikler ve görüntüler içerir. Başlığı bağlantı olarak kullanacağız. İçerik metni kısa bir açıklama için kullanılabilir. Bu öğretici için sileceğim. Kullanmak istiyorsanız, metni olabildiğince kısa hale getirmenizi ve yalnızca birkaç açıklama kullanmanızı öneririm. Resmin yerine, bir simge kullanacağız.

Bağlantının adını ekledim ve içerik metnini sildim. Ardından, görüntü ve simgenin altında bir simge kullanın. İkon seçmenlerinde simgeni seçin. URL’yi bağlantı bölümünün altındaki başlık bağlantı URL’sinin alanına ekleyin. Kalan bağlantı ayarlarını varsayılan olarak bırakın. Bu sekmede yapacağımız tek şey bu.

Başlık: Bağlantı Adınız

Ikon: Double Pas Anahtarı

Başlık URL bağlantısı: bağlantınız
Tasarım sekmesine, simgenin rengi için #db0eb7 girin. Görüntünün/simgenin yerleştirilmesini sola ayarlayın.
Renk simgesi: #db0eb7

Görüntünün/simgenin yerleştirilmesi: sol
Görüntü/simge genişliği için masaüstünü seçin ve 20 piksel olarak ayarlayın.
Masaüstü Görüntü/Simge Genişliği: 20 PX

Görüntünün/simgenin genişliği altındaki telefonu seçin ve 15px olarak ayarlayın.
Cep telefonu görüntüsü/simge genişliği: 15px

Görüntünün/simgenin sınırının genişliğini 1 piksel olarak ayarlayın ve #39C0ED olarak renklendirin.
Görüntü Sınırı genişliği/simgesi: 1px

Resim/simge sınırı rengi: #39c0ed
Görüntünün/simge dolgunun dört tarafına 10 piksel ekleyin.
Dolgu görüntü/simge: 10px (üst, alt, sol, sağ)

Başlık metnine gidin. Yazı tipini archivo olarak ayarlayın ve renk beyaz olur.
Yazı tipi başlığı: Archivo

Başlık metin rengi: #ffffff
Alana kaydırın ve sol dolguya 14vh ekleyin.
Masaüstü dolgu, sol: 14vh

Telefon simgesini seçin ve sol dolguya 4VH ekleyin. Bu numara başlığınızın uzunluğuna uyacak şekilde ayarlanabilir. Telefon, sol: 4VH
Gelişmiş sekme

Daha sonra, başlığa bazı özel CSS ekleyeceğiz, bu yüzden bir simge ile ortada. Gelişmiş sekmesini açın ve Blurb başlığına 12 piksel dolgu ekleyin.
Gelişmiş Sekme Başlık Blurb CSS Kustom: Dolgu Top: 12 Piksel
Bulanık modülün ikiye katlanın

Ardından, çoğaltma düğmesi modülünü üç kez tıklayarak modül açıklamasının üç kopyasını yapın. Bu, metin bağlantısının yerine geçer öğesi için açıklama modülünü kullanmamıza izin verecektir.
İkinci açıklama modülünü açın ve bağlantının başlığını ekleyin, yeni bir simge seçin ve URL’yi ekleyin. Tasarım sekmesini açın ve görüntü/simge sınır rengini #db0eb7 olarak değiştirin.
Başlık: Bağlantı Adınız

Ikon: Tek PAS anahtarı

Başlık URL bağlantısı: bağlantınız
Görüntü Sınır Renk/Simge: #DB0EB7
Üçüncü açıklama modülünü açın ve bağlantının başlığını ekleyin, yeni bir simge seçin ve URL’yi ekleyin. Tasarım sekmesini açın ve görüntü/simge sınır rengini #f59910 olarak değiştirin.
Başlık: Bağlantı Adınız
Simge: Tek Dişler

Başlık URL bağlantısı: bağlantınız
Görüntü Sınır Renk/Simge: #F59910
Dördüncü açıklama modülünü açın ve bağlantının başlığını ekleyin, yeni bir simge seçin ve URL’yi ekleyin. Tasarım sekmesini açın ve görüntü/simge sınır rengini #db0eb7 olarak değiştirin. İlk modülü klonladığınız için bu bu renge göre düzenlenmiştir.
Başlık: Bağlantı Adınız
Simge: Çift dişliler

Başlık URL bağlantısı: bağlantınız
Görüntü Sınır Renk/Simge: #DB0EB7
Aşağıdaki sonuçlar, masaüstü sürümü için bir öğe altbilgisi olarak divi açıklama modülümüz ve düzenimden telefondur. Bulanık modül altbilgisi ile masaüstü
Bu, altbilginin masaüstü sürümümüzün görüntülenmesidir. Bulanık modül altbilgisi ile cep telefonu
Aşağıda bir akıllı telefonda bir altbilgi ekranıdır.Bulanık modül altbilgisi öğesinin nasıl kullanılacağı hakkındaki düşünceyi sonlandırarak, bu, divi altbilginizdeki altbilgi öğesi için açıklama modülünün nasıl kullanılacağı konusundaki görünümümüzdür.Blurb, bağlantılar için iyi bir seçimdir.Kullanımı kolaydır ve görüntülere ve simgelere birçok ayar seçeneği vardır.Sınırlı veya sınırsız bir simge kullanın ve istediğiniz kadar yapın.Burada kullandığımız simge, başlık menüsü tasarımıyla mükemmel bir şekilde çalışıyor. Sizden haber almak istiyoruz.Divi web sitenizdeki altbilgi öğeleri için bir açıklama modülü kullandınız mı?Bize yorumlardaki deneyiminizden bahsedin.

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir