Divi ile genişletilebilecek içerikle “yapışkan notlar” oluşturun
Varsayılan Divi seçeneği ile, web sitenizde hizmetleri ve/veya işlem adımlarını görüntülemenin birçok yolu vardır. İlham almanıza yardımcı olmak için, yalnızca Divi’nin varsayılan seçeneklerini kullanarak genişletilmiş bir içerikle nasıl yapışkan bir not yapacağınızı göstereceğiz. Bu, ziyaretçiler etkileşimi tetikledikten sonra ek içerik paylaşmanın eğlenceli bir yoludur. Bu tasarımı üzerinde çalıştığınız herhangi bir web sitesi için kullanabilirsiniz ve JSON dosyalarını ücretsiz olarak da indirebilirsiniz! Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım.
Masaüstü
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! Yaratıcı başlayalım!
YouTube kanalına abone Olması gereken ilk şeyin yeni düzenli kısmını ekliyoruz, üzerinde çalıştığınız sayfaya yeni bir düzenli bölüm eklemektir.
Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek yeni bir sütun yapısı satır ekleyin: Herhangi bir modül eklemeden geçiş süresi, satır ayarlarını açın. Gelişmiş sekmesindeki geçiş süresini değiştirerek anında geçiş yapıyoruz. Geçiş süresi: 0ms
1 numaralı metin modülünü Sütun 1’e ekleyin, içeriği ekleyin Modül eklemeye başlamanın zamanı geldi! Satırın ilk sütununa yeni bir metin modülü ekleyin ve macun notu tasarımında görüntülemek istediğiniz H2 içeriğini girin. Arka plan rengi daha sonra, arka plan ayarını açın ve uygun arka plan rengini değiştirin: Arka plan rengi: #ffd800
H2 metin ayarları H2 metin ayarlarına geçer ve orada da bazı değişiklikler yapın: Başlık 2 yazı tipi: indie çiçek
Başlık 2 Metin Seviyesi: Orta
Başlık 2 Renk Metni: #3A0CF2
Başlık 2 Metin Boyutu: 40 PX
Yapışkan notun görünümünü ve hissini yapmak için mesafe, modüle bazı özel dolgu değerleri ekleyeceğiz: Üst dolgu: 150px
Dolgu Alt: 150 piksel
Sol dolgu: 20px
Doğru dolgu: 20 piksel
Sınırımız ayrıca aşağıdaki ayarları kullanarak üst sınırı ekler: Üst sınır genişliği: 20px
Üst sınır rengi: #ffc300
Bölme modülünü ilk sütunda ihtiyacımız olan bir sonraki modülün Sütun 1 görünürlüğüne ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun. Divisor göster: evet
Renk o zaman, tasarım sekmesini açın ve bölücünün rengini değiştirin. Renk: #ffc300 Aynı zamanda bölücü kuvvetini ayarlayın.
Bölücü stili: noktalı Yapıştırıcı ve ayrıca boyut ayarlarını değiştirin.
Bölücü ağırlığı: 5px Yükseklik: 0px
Önceki modüller ile bu arasındaki boşluk yapmak için mesafe, üst kenar boşluklarının bir kısmını ekledik.
Üst kenar boşluğu: 150 piksel Rotasyonu değiştirin Bu yazının önizlemesinde dikkat edebileceğiniz gibi, yatay bölen değil dikey böcekler yapmak istiyoruz. Bunu başarmak için, bölücü modülünün dönme dönüşüm ayarlarındaki sol değeri değiştireceğiz:
Sol: 270 derece Görünürlüğümüz ayrıca bölücü modülünün metin modülünün altında görünmesini sağlamak istiyor. Bunu yapmak için, Gelişmiş sekmesindeki Bölüğü’nden Z dizinini azaltacağız.
Dizin Z: -99 Sütun 1’e Metin Modülü #2 ekleyin Bir sonraki sütunda ihtiyaç duyduğumuz bir sonraki ve son olarak içerik içeriği kutusuna sembol ekleyin başka bir metin modülü. İçerik kutusuna ‘●’ karakterini ekleyin.
Metin Ayarları Ardından, Tasarım sekmesine devam edin ve metin ayarlarını değiştirin. Metin yazı tipi: SANS’ı aç
H3 Metin Ayarları Tasarım sekmesini açın ve uygun H3 metin ayarlarını değiştirin: Başlık 3 Yazı Tipi: Indie Flower Başlık 3 Renk Metni: #3A0CF2
Başlık 3 Metin Boyutu: 30px
Mesafe Bir sonraki geleneğe bazı kenar boşlukları ekleyin:
Üst kenar: 400 piksel (masaüstü), 200px (tablet), 150px (Telefon) Sütun 2’ye metin modülü #4 ekleyin. Seçtiğiniz bazı paragraf içerikleri girin. Ardından metin ayarları, tasarım sekmesini açın ve metin ayarlarını değiştirin.
Metin yazı tipi: SANS’ı aç Metin Boyutu: 13px Hat yüksekliği metni: 2em
Yapıştırıcı Bir sonraki modülün genişliğini değiştirin.
Genişlik:% 78
Mesafe ve bazı üst ve alt kenar boşlukları ekleyin. Üst kenar boşluğu: 10 piksel
Alt kenar boşluğu: 50 piksel Düğme Modülünü Sütun 2’ye Ekleyin İkinci sütunda ihtiyaç duyduğumuz son modülün bir kopyasını düğme modülü ekleyin. Seçtiğiniz bazı kopyaları girin.
Sonra düğmeyi ayarlayın, tasarım sekmesini açın ve stili düğmeye verin.
Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 20px Metin Renk Düğmesi: #3A0CF2
Arka Plan Renk Düğmesi: #FFD800
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 0px
Yazı tipi düğmesi: Abhaya Libre
Mesafe Bazı özel dolgu değerleri de ekleyin.
Üst dolgu: 20px
Dolgu Alt: 20 piksel Sol dolgu: 60 piksel
Sağ dolgu: 60 piksel
Klon satırı tüm modülleri ekleyerek bitirdikten sonra iki kez devam edebilir ve çizgiyi iki kez klonlayabilirsiniz.
Yinelenen Satır #1 Değiştir Metin modülünün arka plan rengini değiştir #1 Birincisinden başlayarak iki kopyanın 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ünün üst sınır rengini değiştirin #1 Üst sınır rengini de değiştirin. Üst sınır rengi: #00E0C2
Bölücünün rengini değiştirin, sonra bölücü için aşağıdaki renk kodunu kullanın: Renk Renk: #00E0C2
Düğme modülünün arka plan rengini değiştirin ve düğmenin arka plan rengini değiştirin. Arka Plan Renk Düğmesi: #00ffee
Yinelenen Satırı Değiştir #2 Renk Arka Plan Metin Modülünü Değiştir #1 İkinci yinelenen satıra geçin, Sütun 1’deki ilk metin modülünü açın ve arka plan rengini değiştirin. Arka plan rengi: #42ff21 Metin modülünün üst sınır rengini değiştirin #1 Üst sınır rengini de değiştirin.
Üst sınır rengi: #1de524 Bölünmenin renklerini değiştirin, ardından bölücü modülünü açın ve aşağıdaki bölücü rengini kullanın:
Renk Renk: #1de524 Düğme modülünün arka plan rengini değiştirin ve daha az önemli değil, arka plan renk düğmesini değiştirin:
Arka Plan Renk Düğmesi: #42FF21 Genişletilmiş bir İçerik Oluşturma Varsayılan satır boyutunu tüm satırlara ekleyin Şimdi bizim tarafımızdaki tüm satırları ayarladık, içeriğin genişletilebilmesi zamanı. Bunu yapmak için her satırı açın ve aşağıdaki maksimum yüksekliği uygulayın:
Maksimum Yükseklik: 397px Tüm satırlara satırın boyutunu ekleyin İmleci ‘%100’ e yönlendirirken maksimum yüksekliği değiştirin. Bu, satırların başlangıç boyutunu tekrar almasına izin verecektir.
Maksimum Yükseklik:% 100 Tüm satırlar için taşmayı değiştirin, her satırın taşmasını da gizlediğinizden emin olun ve bitirin!
Yatay taşma: gizli Dikey taşma: gizli
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü Hücresel
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! Yaratıcı başlayalım!
YouTube kanalına abone Olması gereken ilk şeyin yeni düzenli kısmını ekliyoruz, üzerinde çalıştığınız sayfaya yeni bir düzenli bölüm eklemektir.
Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek yeni bir sütun yapısı satır ekleyin: Herhangi bir modül eklemeden geçiş süresi, satır ayarlarını açın. Gelişmiş sekmesindeki geçiş süresini değiştirerek anında geçiş yapıyoruz. Geçiş süresi: 0ms
1 numaralı metin modülünü Sütun 1’e ekleyin, içeriği ekleyin Modül eklemeye başlamanın zamanı geldi! Satırın ilk sütununa yeni bir metin modülü ekleyin ve macun notu tasarımında görüntülemek istediğiniz H2 içeriğini girin. Arka plan rengi daha sonra, arka plan ayarını açın ve uygun arka plan rengini değiştirin: Arka plan rengi: #ffd800
H2 metin ayarları H2 metin ayarlarına geçer ve orada da bazı değişiklikler yapın: Başlık 2 yazı tipi: indie çiçek
Başlık 2 Metin Seviyesi: Orta
Başlık 2 Renk Metni: #3A0CF2
Başlık 2 Metin Boyutu: 40 PX
Yapışkan notun görünümünü ve hissini yapmak için mesafe, modüle bazı özel dolgu değerleri ekleyeceğiz: Üst dolgu: 150px
Dolgu Alt: 150 piksel
Sol dolgu: 20px
Doğru dolgu: 20 piksel
Sınırımız ayrıca aşağıdaki ayarları kullanarak üst sınırı ekler: Üst sınır genişliği: 20px
Üst sınır rengi: #ffc300
Bölme modülünü ilk sütunda ihtiyacımız olan bir sonraki modülün Sütun 1 görünürlüğüne ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun. Divisor göster: evet
Renk o zaman, tasarım sekmesini açın ve bölücünün rengini değiştirin. Renk: #ffc300 Aynı zamanda bölücü kuvvetini ayarlayın.
Bölücü stili: noktalı Yapıştırıcı ve ayrıca boyut ayarlarını değiştirin.
Bölücü ağırlığı: 5px Yükseklik: 0px
Önceki modüller ile bu arasındaki boşluk yapmak için mesafe, üst kenar boşluklarının bir kısmını ekledik.
Üst kenar boşluğu: 150 piksel Rotasyonu değiştirin Bu yazının önizlemesinde dikkat edebileceğiniz gibi, yatay bölen değil dikey böcekler yapmak istiyoruz. Bunu başarmak için, bölücü modülünün dönme dönüşüm ayarlarındaki sol değeri değiştireceğiz:
Sol: 270 derece Görünürlüğümüz ayrıca bölücü modülünün metin modülünün altında görünmesini sağlamak istiyor. Bunu yapmak için, Gelişmiş sekmesindeki Bölüğü’nden Z dizinini azaltacağız.
Dizin Z: -99 Sütun 1’e Metin Modülü #2 ekleyin Bir sonraki sütunda ihtiyaç duyduğumuz bir sonraki ve son olarak içerik içeriği kutusuna sembol ekleyin başka bir metin modülü. İçerik kutusuna ‘●’ karakterini ekleyin.
Metin Ayarları Ardından, Tasarım sekmesine devam edin ve metin ayarlarını değiştirin. Metin yazı tipi: SANS’ı aç
Metin rengi: #3A0CF2
Metin Boyutu: 100 piksel
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Bir sonraki negatif kenar boşluklarından bazılarını ekleyerek istenen örtüşme mesafesi.
Üst kenar boşluğu: -50px
H3 Metin Ayarları Tasarım sekmesini açın ve uygun H3 metin ayarlarını değiştirin: Başlık 3 Yazı Tipi: Indie Flower Başlık 3 Renk Metni: #3A0CF2
Başlık 3 Metin Boyutu: 30px
Mesafe Bir sonraki geleneğe bazı kenar boşlukları ekleyin:
Üst kenar: 400 piksel (masaüstü), 200px (tablet), 150px (Telefon) Sütun 2’ye metin modülü #4 ekleyin. Seçtiğiniz bazı paragraf içerikleri girin. Ardından metin ayarları, tasarım sekmesini açın ve metin ayarlarını değiştirin.
Metin yazı tipi: SANS’ı aç Metin Boyutu: 13px Hat yüksekliği metni: 2em
Yapıştırıcı Bir sonraki modülün genişliğini değiştirin.
Genişlik:% 78
Mesafe ve bazı üst ve alt kenar boşlukları ekleyin. Üst kenar boşluğu: 10 piksel
Alt kenar boşluğu: 50 piksel Düğme Modülünü Sütun 2’ye Ekleyin İkinci sütunda ihtiyaç duyduğumuz son modülün bir kopyasını düğme modülü ekleyin. Seçtiğiniz bazı kopyaları girin.
Sonra düğmeyi ayarlayın, tasarım sekmesini açın ve stili düğmeye verin.
Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 20px Metin Renk Düğmesi: #3A0CF2
Arka Plan Renk Düğmesi: #FFD800
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 0px
Yazı tipi düğmesi: Abhaya Libre
Mesafe Bazı özel dolgu değerleri de ekleyin.
Üst dolgu: 20px
Dolgu Alt: 20 piksel Sol dolgu: 60 piksel
Sağ dolgu: 60 piksel
Klon satırı tüm modülleri ekleyerek bitirdikten sonra iki kez devam edebilir ve çizgiyi iki kez klonlayabilirsiniz.
Yinelenen Satır #1 Değiştir Metin modülünün arka plan rengini değiştir #1 Birincisinden başlayarak iki kopyanın 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ünün üst sınır rengini değiştirin #1 Üst sınır rengini de değiştirin. Üst sınır rengi: #00E0C2
Bölücünün rengini değiştirin, sonra bölücü için aşağıdaki renk kodunu kullanın: Renk Renk: #00E0C2
Düğme modülünün arka plan rengini değiştirin ve düğmenin arka plan rengini değiştirin. Arka Plan Renk Düğmesi: #00ffee
Yinelenen Satırı Değiştir #2 Renk Arka Plan Metin Modülünü Değiştir #1 İkinci yinelenen satıra geçin, Sütun 1’deki ilk metin modülünü açın ve arka plan rengini değiştirin. Arka plan rengi: #42ff21 Metin modülünün üst sınır rengini değiştirin #1 Üst sınır rengini de değiştirin.
Üst sınır rengi: #1de524 Bölünmenin renklerini değiştirin, ardından bölücü modülünü açın ve aşağıdaki bölücü rengini kullanın:
Renk Renk: #1de524 Düğme modülünün arka plan rengini değiştirin ve daha az önemli değil, arka plan renk düğmesini değiştirin:
Arka Plan Renk Düğmesi: #42FF21 Genişletilmiş bir İçerik Oluşturma Varsayılan satır boyutunu tüm satırlara ekleyin Şimdi bizim tarafımızdaki tüm satırları ayarladık, içeriğin genişletilebilmesi zamanı. Bunu yapmak için her satırı açın ve aşağıdaki maksimum yüksekliği uygulayın:
Maksimum Yükseklik: 397px Tüm satırlara satırın boyutunu ekleyin İmleci ‘%100’ e yönlendirirken maksimum yüksekliği değiştirin. Bu, satırların başlangıç boyutunu tekrar almasına izin verecektir.
Maksimum Yükseklik:% 100 Tüm satırlar için taşmayı değiştirin, her satırın taşmasını da gizlediğinizden emin olun ve bitirin!
Yatay taşma: gizli Dikey taşma: gizli
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü Hücresel
