Divi'de Kaydırılabilir Teaser İçeriğine Sahip Bir Tablet Nasıl Tasarlanır

Web sitenize teaser içeriği eklemek etkili bir pazarlama stratejisi olabilir. Bu, özellikle e-kitaplar gibi şeyleri tanıtmak için işe yarar. Daha fazlasını istemelerini sağlamak için onlara içeriğin gizli bir bakışını verirsiniz. Bugünkü eğitimde, size Divi'de kaydırılabilir bir tablette teaser içeriğini nasıl sergileyeceğinizi göstereceğiz. Bunu yapmak için, bir sütunu istediğiniz her tür içeriği içerebilen kaydırılabilir bir kapsayıcıya (tablete benzemek üzere tasarlanmış) dönüştürmek için Divi'nin yerleşik seçeneklerinden yararlanacağız. Herhangi bir e-kitabın ilk birkaç bölümünü tanıtmak, portföyünüzden örnek tasarımları veya başka herhangi bir içerik türünü görüntülemek için kullanabilirsiniz.

Başlayalım!

Gizlice Bakış

İşte bu eğiticide oluşturacağımız kaydırılabilir teaser içeriğine sahip tablete hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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.

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi'de Kaydırılabilir Teaser İçeriğine Sahip Bir Tablet Nasıl Tasarlanır

Bölüm 1: Divi Sütunlu Kaydırılabilir Tablet Kabı Oluşturma

Satır ekle

Başlamak için, normal bölümü olan iki sütunlu bir satır oluşturun.

Sütun 1 Ayarları

Arka plan rengi

Sütun 1 için ayarları açın ve sütuna beyaz bir arka plan ekleyin.

• Arka Plan Rengi: #ffffff

Dolgu ve Bordür

Ardından sütuna aşağıdaki gibi bir kenarlık ve dolgu ekleyin:

• Dolgu: 25 piksel (üst, alt, sol, sağ)
• Yuvarlatılmış Köşeler: 20px
• Kenar Genişliği: 30px
• Kenar Rengi: #000000

Kutu Gölge

Tablet tasarımına biraz derinlik kazandırmak için aşağıdaki kutu gölgesini ekleyin:

• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölgesi Yatay Konumu: 5px
• Kutu Gölgesi Dikey Konumu: 5px
• Gölge Rengi: #555555

CSS ile Özel Sütun Yüksekliği ve Genişliği

Sütunun içeriğini kaydırılabilir yapmanın anahtarı, ona belirli bir yükseklik vermektir. Bu, içeriğin sütunun yüksekliğinden taşmasına neden olacaktır. Ayrıca tabletin en boy oranını tutarlı tutmak istiyoruz, bu nedenle sütuna maksimum genişlik vermek de iyi bir fikirdir. Sütuna özel bir yükseklik ve genişlik vermek için Gelişmiş sekmesine gidin ve aşağıdakileri güncelleyin:

Özel CSS altında, Ana Öğe masaüstü ekranı için aşağıdaki CSS'yi ekleyin:

height:650px;
max-width: 488px;

Ardından duyarlı sekmeleri etkinleştirin ve ana öğe telefon ekranı için aşağıdaki özel CSS'yi yapıştırın:

max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;

Dikey Taşma: Kaydır

Daha önce belirtildiği gibi, sütun artık içeriğin kaçınılmaz olarak sütundan dikey olarak taşmasına neden olacak bir ayarlanmış yüksekliğe sahiptir. Taşan içeriğin sütun üzerinde kaydırılarak görüntülenebildiğinden emin olmak için görünürlük dikey taşma seçeneğini "kaydır" olarak ayarlayın.

• Dikey Taşma: Kaydır

Bölüm 2: Kaydırılabilir Sütuna Teaser İçeriği Ekleme

Bu noktada, sütun (veya tablet) bazı içerikler için hazırdır. Önizleme içeriğinizi oluşturmak için bu sütundaki herhangi bir Divi modülünü kullanabilirsiniz. Bu örnekte, bir tanıtım yazısı modülünden (ilk harekete geçirici mesajı görüntülemek için), bir resim modülünden (kitap kapağını görüntülemek için) ve bir metin modülünden (birkaç bölümü görüntülemek için) oluşacak bazı sahte e-kitap içeriği ekliyoruz. Metin).

Kitap Kapağı Arka Planı ile Kaydırma CTA'sı

Ekleyeceğimiz ilk teaser içeriği, "önizlemeye kaydır" harekete geçirici mesaj olarak hizmet edecek bir tanıtım modülüdür. Arka plan resmi ve degrade renk kaplaması olarak bir tanıtım yazısı simgesi, başlık ve kitap kapağı olan bir arka plan kullanacağız.

Tablet sütununun içine bir tanıtım yazısı modülü ekleyin.

Aşağıdaki içeriği güncelleyin:

• Başlık: Önizlemeye Kaydırın
• Simgeyi Kullan: EVET
• Simge: ekran görüntüsüne bakın

• Arka Plan Gradyanı Sol Renk: şeffaf
• Arka Plan Gradyanı Sağ Renk: #ffffff
• Başlangıç ​​Konumu: %20
• Bitiş Konumu: %85
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Ardından kitap kapak resmini ekleyin. En iyi sonuçlar için yaklaşık 600 piksele 850 piksel boyutunda bir resim ekleyin .

Tasarım sekmesi altında, simge ve başlık için aşağıdaki stilleri güncelleyin:

• Simge Rengi: #000000
• Simge Yazı Tipi Boyutu: 80px (masaüstü ve tablet), 70px (telefon)
• Başlık Yazı Tipi: Montserrat
• Başlık Metni Hizalama: orta
• Başlık Metin Rengi: #000000

Tanıtım yazısının yüksekliğini, %100 yükseklik kullanarak tableti dolduracak şekilde sütun yüksekliğine uyacak şekilde ayarlayabiliriz. Bu yükseklik yüzdesi değeri yalnızca sütunumuzun ayarlanmış bir yüksekliği olduğu için çalışır. Ardından, üst dolgu ekleyerek simgeyi ve başlığı sütunun altına taşıyabiliriz.

Tanımlamayı boyutlandırmak ve boşluk bırakmak için aşağıdakileri güncelleyin:

• Yükseklik: %100
• Kenar boşluğu: 25 piksel alt
• Dolgu: 400 piksel (masaüstü ve tablet), 270 piksel (telefon)

Kitap Kapak Resmi

Bir sonraki teaser içeriği, kitap kapağının bir görüntüsü olacaktır. Bir resim eklemek için, tanıtım yazısı modülünün altına bir resim modülü eklemeniz yeterlidir.

Ardından, tanıtım yazısının arka planı için kullanılan aynı resmi yükleyin.

Metin Önizleme İçeriği

Son teaser içeriğimiz, e-kitabımızın birkaç deneme bölümünü içeren metin olacaktır. Metni eklemek için önceki resmin altına yeni bir metin modülü ekleyin.

Ardından, aşağıdaki HTML'yi gövdenin metin sekmesine yapıştırın:

<h3>Chapter 1</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

<h3>Chapter 2</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Tasarım sekmesi altında, başlık stilini ve aralığını aşağıdaki gibi güncelleyin:

• Başlık 3 Yazı Tipi: Montserrat
• Başlık 3 Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık 3 Metin Hizalama: Merkez
• Başlık 3 Çizgi Yüksekliği: 1.3em

• Dolgu: %10 (üst ve alt)

Bölüm 3: Birkaç Son Dokunuş

Satır Ayarlarını Güncelle

İçerik yerleştirildikten sonra, tasarımı daha duyarlı hale getirmek için satırda birkaç ayarlama yapmamız gerekiyor. Satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Genişlik: %100 (masaüstü), %90 (tablet ve telefon)
• Maksimum Genişlik: 1080 piksel (masaüstü), 488 piksel (tablet ve telefon)

2. Sütun'a Ek İçerik Ekle

Bu noktada, gerektiğinde 2. sütuna ek içerik ekleyebiliriz. Bu örnek için, bir metin modülü ve düğme modülü ekledim ve bunları Ebook Layout Pack'teki tasarıma benzer şekilde şekillendirdim.

Son sonuç

Şimdi nihai sonucu kontrol edelim.

Tabletin içinde bulunan kaydırılabilir içeriğe göz atın.

Ve işte tasarımın tablet ve telefon ekranında nasıl istiflendiği.

Son düşünceler

Bu kaydırılabilir tablet tasarımının belki de en iyi yanı, çok yönlülüğüdür. Tablet aslında bir Divi sütunu olduğundan, öne çıkarmak istediğiniz içeriği tasarlamak için istediğiniz sayıda Divi modülünü (metin, resim, düğme) kullanabilirsiniz. Umarım, bir dahaki sefere teaser içeriğini web sitenizde sergilemeniz gerektiğinde bu kullanışlı olacaktır.

Yorumlarda sizden haber bekliyorum.

Şerefe!