Divi ile Genişletilebilir İçerikle “Yapışkan Notlar” Oluşturma

Divi'nin yerleşik seçenekleriyle, web sitenizde hizmetleri ve/veya işlem adımlarını öne çıkarmanın birçok yolu vardır. İlham almanıza yardımcı olmak için, yalnızca Divi'nin yerleşik seçeneklerini kullanarak genişletilebilir içerikli yapışkan notları nasıl oluşturacağınızı göstereceğiz. Bu, ziyaretçi etkileşimi tetiklediği anda ek içeriği paylaşmanın eğlenceli bir yoludur. Bu tasarımı, üzerinde çalıştığınız herhangi bir web sitesi için kullanabilir ve JSON dosyasını da ücretsiz olarak indirebilirsiniz!

Hadi hadi bakalım!

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Yapışkan Not Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz yapışkan not düzenine koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Yeniden Yaratmaya Başlayalım!

Youtube Kanalımıza Abone Olun

Yeni Normal Bölüm Ekle

Yapmanız gereken ilk şey, üzerinde çalıştığınız sayfaya yeni bir normal bölüm eklemek.

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

Geçiş süresi

Henüz herhangi bir modül eklemeden satır ayarlarını açın. Gelişmiş sekmesinde geçiş süresini değiştirerek anında geçiş oluşturuyoruz.

• Geçiş Süresi: 0ms

Metin Modülü #1'i Sütun 1'e ekleyin

İçerik Ekle

Modül eklemeye başlama zamanı! Satırın ilk sütununa yeni bir Metin Modülü ekleyin ve yapışkan not tasarımında görünmesini istediğiniz H2 içeriğini girin.

Arka plan rengi

Ardından, arka plan ayarlarına gidin ve arka plan rengini buna göre değiştirin:

• Arka Plan Rengi: #ffd800

H2 Metin Ayarları

H2 metin ayarlarına geçin ve orada da bazı değişiklikler yapın:

• Başlık 2 Yazı Tipi: Bağımsız Çiçek
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #3a0cf2
• Başlık 2 Metin Boyutu: 40px

aralık

Yapışkan not görünümü ve hissi yaratmak için modüle bazı özel dolgu değerleri ekleyeceğiz:

• Üst Dolgu: 150 piksel
• Alt Dolgu: 150 piksel
• Sol Dolgu: 20px
• Sağ Dolgu: 20px

Sınır

Ayrıca aşağıdaki ayarları kullanarak bir üst kenarlık ekliyoruz:

• Üst Kenar Genişliği: 20px
• Üst Kenar Rengi: #ffc300

Sütun 1'e Bölücü Modülü Ekle

görünürlük

İlk sütunda ihtiyacımız olan bir sonraki modül bir Bölücü Modül. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Renk

Ardından tasarım sekmesine gidin ve ayırıcı rengini değiştirin.

• Renk: #ffc300

Stiller

Ayırıcının stil ayarlarını da değiştirin.

• Bölücü Stili: Kesikli

boyutlandırma

Ve boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 5px
• Yükseklik: 0 piksel

aralık

Önceki modül ile bu modül arasında biraz boşluk yaratmak için biraz üst kenar boşluğu ekliyoruz.

• Üst Kenar Boşluğu: 150 piksel

Dönüştür Döndür

Bu gönderinin önizlemesinde fark edebileceğiniz gibi, yatay bir bölücü yerine dikey bir bölücü oluşturmak istiyoruz. Bunu başarmak için, Bölücü Modülünün dönüştürme döndürme ayarlarında sol değeri değiştireceğiz:

• Sol: 270 derece

görünürlük

Ayrıca Ayırıcı Modülün Metin Modülünün altında göründüğünden emin olmak istiyoruz. Bunu yapmak için, gelişmiş sekmesindeki bölücünün z indeksini azaltacağız.

• Z İndeksi: -99

Metin Modülü #2'yi Sütun 1'e ekleyin

İçerik Kutusuna Sembol Ekle

İlk sütunda ihtiyacımız olan sonraki ve son modül başka bir Metin Modülü. İçerik kutusuna '●' karakterini ekleyin.

Metin Ayarları

Ardından tasarım sekmesine geçin ve metin ayarlarını değiştirin.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #3a0cf2
• Metin Boyutu: 100px
• Metin Satırı Yüksekliği: 1em
• Metin Yönü: Merkez

aralık

Sonra bir miktar negatif üst kenar boşluğu ekleyerek istenen örtüşmeyi oluşturun.

• Üst Kenar Boşluğu: -50px

Sütun 2'ye Metin Modülü #3'ü ekleyin

H3 İçeriği Ekle

İkinci sütuna geçelim. Burada ihtiyacımız olan ilk modül bir Metin Modülü. Seçtiğiniz bazı H3 içeriğini girin.

H3 Metin Ayarları

Tasarım sekmesine gidin ve H3 metin ayarlarını buna göre değiştirin:

• Başlık 3 Yazı Tipi: Bağımsız Çiçek
• Başlık 3 Metin Rengi: #3a0cf2
• Başlık 3 Metin Boyutu: 30px

aralık

Sonra bazı özel üst kenar boşluğu ekleyin:

• Üst Kenar Boşluğu: 400 piksel (Masaüstü), 200 piksel (Tablet), 150 piksel (Telefon)

Sütun 2'ye Metin Modülü #4'ü ekleyin

İçerik Ekle

Başka bir Metin Modülü olan bir sonraki modüle geçin. Seçtiğiniz bazı paragraf içeriğini girin.

Metin Ayarları

Ardından tasarım sekmesine gidin ve metin ayarlarını değiştirin.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Boyutu: 13px
• Metin Satır Yüksekliği: 2em

boyutlandırma

Daha sonra modülün genişliğini değiştirin.

• Genişlik: %78

aralık

Ve biraz üst ve alt kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: 10px
• Alt Kenar Boşluğu: 50px

Sütun 2'ye Düğme Modülü Ekle

Kopya Ekle

İkinci sütunda ihtiyacımız olan son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı girin.

Düğme Ayarları

Ardından, tasarım sekmesine gidin ve düğmenin stilini belirleyin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 20px
• Düğme Metin Rengi: #3a0cf2
• Düğme Arka Plan Rengi: #ffd800
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Abhaya Libre

aralık

Bazı özel dolgu değerleri de ekleyin.

• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 60px
• Sağ Dolgu: 60px

Satırı İki Kez Klonla

Tüm modülleri eklemeyi bitirdikten sonra devam edip satırı iki kez klonlayabilirsiniz.

Yinelenen Satır #1'i Değiştir

Metin Modülü #1 Arka Plan Rengini Değiştir

İlkinden başlayarak her iki kopyanın da renk paletini değiştiriyoruz. Sütun 1'deki ilk Metin Modülünü açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #00ffee

Metin Modülü #1 Üst Kenar Rengini Değiştir

Üst kenarlık rengini de değiştirin.

• Üst Kenar Rengi: #00e0c2

Bölücü Rengini Değiştir

Ardından, ayırıcı için aşağıdaki renk kodunu kullanın:

• Bölücü Rengi: #00e0c2

Düğme Modülü Arka Plan Rengini Değiştir

Ve düğme arka plan rengini değiştirin.

• Düğme Arka Plan Rengi: #00ffee

Yinelenen Satır #2'yi Değiştir

Metin Modülü #1 Arka Plan Rengini Değiştir

İkinci kopya satırına geçin, 1. sütundaki ilk Metin Modülünü açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #42ff21

Metin Modülü #1 Üst Kenar Rengini Değiştir

Üst kenarlık rengini de değiştirin.

• Üst Kenar Rengi: #1de524

Bölücü Rengini Değiştir

Ardından, Bölücü Modülünü açın ve aşağıdaki bölücü rengini kullanın:

• Bölücü Rengi: #1de524

Düğme Modülü Arka Plan Rengini Değiştir

Son olarak, düğmenin arka plan rengini değiştirin:

• Düğme Arka Plan Rengi: #42ff21

Genişletilebilir İçerik Oluşturun

Tüm Satırlara Varsayılan Satır Boyutlandırması Ekle

Artık bölümümüzdeki tüm satırları özelleştirdiğimize göre, içeriği genişletilebilir hale getirmenin zamanı geldi. Bunu yapmak için satırların her birini açın ve aşağıdaki maksimum yüksekliği uygulayın:

• Maksimum Yükseklik: 397px

Tüm Satırlara Vurgulu Satır Boyutlandırması Ekle

Fareyle üzerine gelindiğinde maksimum yüksekliği '%100' olarak değiştirin. Bu, satırın tekrar ilk boyutunu almasına izin verecektir.

• Maksimum Yükseklik: %100

Tüm Satırlar İçin Taşmayı Değiştir

Satırların her birinin taşmalarını da gizlediğinizden emin olun ve işiniz bitti!

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, yalnızca Divi'nin yerleşik seçeneklerini kullanarak genişletilebilir notlarla nasıl yapışkan notlar oluşturabileceğinizi gösterdik. Bu, hizmetleri web sitenizde sergilemenin yaratıcı ve eğlenceli bir yoludur. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.