Divi'de kaydırılabilir bir tablete tanıtım içeriği eklemek ister misiniz?
İçeriğinize teaser içeriği ekleme Site Web bir strateji olabilir pazarlama etkili. Bu özellikle aşağıdakiler için işe yarar: desteklemek e-kitaplar gibi şeyler. Onlara içeriğin bir önizlemesini verirsiniz, böylece daha fazlasını isterler.
Bugünkü eğitimde, size Divi'de açılır 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 bir açılır kapsayıcıya (tablet gibi görünecek şekilde tasarlanmış) dönüştürmek için Divi'nin yerleşik seçeneklerinden yararlanacağız.
İçin kullanabilirsiniz desteklemek herhangi bir e-kitabın ilk bölümlerini, portföyünüzdeki veya başka herhangi bir içerik türünden örnek tasarımları görüntüleyin.
Başlayalım!
anket
İşte bu eğiticide oluşturacağımız kaydırılabilir içeriğe sahip tablete hızlı bir bakış.
Divi Builder ile yeni bir sayfa oluşturun
WordPress kontrol panelinde şuraya gidin: “Sayfalar > Yeni Ekle”
Size mantıklı gelen bir başlık verin ve ardından "DiviBuilder'ı kullanın"
Ardından “Başlangıç İnşası”
Divi'de kaydırılabilir teaser içeriğine sahip tablet tasarımı
Divi sütunlu açılır tablet kapsayıcısını 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 ayarlarını açın ve sütuna beyaz bir arka plan ekleyin.
- Arkaplan: #ffffff
Sınır ve Kenar Boşluğu
Sekmeye git Dizayn açılır seçenek aralık ve ayarları aşağıdaki gibi değiştirin:
- Dolgu (Üst, Alt, Sol ve Sağ): 25 piksel (üst, alt, sol, sağ)
Ardından seçeneği aşağı çekin sınır ve ayarları buna göre değiştirin:
- Yuvarlatılmış Köşeler: 20 piksel
- Kenar Genişliği: 30px
- Kenar Rengi: #000000
Gölge kutusu
Tablet tasarımına biraz derinlik kazandırmak için seçeneği aşağı çekin Kutu Gölgesi ve aşağıdaki kutu gölgesini ekleyin:
- Kutu Gölgesi: ekran görüntüsüne bakın
- Kutu Gölgesi (Yatay ve Dikey) Konumu: 5 piksel
- Gölge Rengi: #555555
CSS ile özel sütun yüksekliği ve genişliği
Sütun içeriğini kaydırılabilir yapmanın anahtarı, ona tanımlanmış bir yükseklik vermektir. Bu, içeriğin sütun yüksekliğini aşmasına neden olur.
Ayrıca tabletin en boy oranının tutarlı kalmasını 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 sekmeye gidin gelişmiş ve aşağıdakileri güncelleyin:
Sous özel CSS, masaüstü ekranı için aşağıdaki CSS'yi ekleyin (Ana Öğe):
height:650px;
max-width: 488px;
Ardından, diğer ekran için sekmeyi etkinleştirin ve ana öğenin 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ırma
Daha önce de belirtildiği gibi, sütun artık tanımlanmış bir yüksekliğe sahiptir ve bu da kaçınılmaz olarak sütun içeriğinin dikey olarak taşmasına neden olacaktır.
Sütunu aşağı kaydırarak taşan içeriğin görüntülenebilmesini sağlamak için görünürlük dikey taşma seçeneğini "taslak". Bunu yapmak için seçeneği genişletin Görünürlük sekme gelişmiş
- Dikey Taşma: Kaydır
Açılır sütuna teaser içeriği ekle
Bu noktada kolon (veya raf) içerik 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 modülden oluşacak kukla e-kitap içeriği ekliyoruz. kitap kapağındaki övgü yazısı (ilk harekete geçirici mesajı görüntülemek için), bir modül Resim (kitap kapağını görüntülemek için) ve bir modül Metin (e-kitabın bazı bölümlerini görüntülemek için).
Kitap kapağı arka planıyla birlikte kayan CTA (Harekete Geçirici Mesaj)
Ekleyeceğimiz ilk teaser içerik öğesi bir modüldür. kitap kapağındaki övgü yazısı eylem çağrısı olarak hizmet edecek "Önizlemeye kaydır".
Arka plan resmi ve renk gradyan kaplaması olarak kitap kapağı ile bir sunum simgesi, başlık ve arka plan kullanacağız.
Tablet sütununda bir modül ekleyin kitap kapağındaki övgü yazısı.
İçeriği aşağıdaki gibi güncelleyin:
- Başlık: Bir alıntıyı okumak için kaydırın
Açılır seçenek “Görüntü ve Simge”
- Simgeyi Kullan: Evet
- Simge: ekran görüntüsüne bakın
Ardından seçeneği aşağı çekin Olayın Arka Planı ve bir degrade ekleyin
- Sol taraf rengi: rbga(0,0,0,0,0.0)
- Sağ Taraf Rengi: #ffffff
- Başlangıç pozisyonu: %20
- Nihai konum: %85
- Arka Plan Resminin Üzerinde Kare Gradyan: EVET
Ardından kitap kapak resmini ekleyin. En iyi sonuçlar için, yaklaşık 600 piksele 850 piksellik bir resim ekleyin .
Tasarım sekmesinde, simge ve başlık için aşağıdaki stilleri güncelleyin:
- Simge Rengi: #000000
- Simge yazı tipi boyutu: 80 piksel (masaüstü ve tablet), 70 piksel (telefon)
- Başlık Yazı Tipi: Montserrat
- Başlık Metni Hizalama: ortalanmış
- Metin Rengi: #000000
Ardından, bir üst kenar boşluğu 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 kapağının görüntüsü
Bir sonraki teaser içeriği, kitap kapağının bir görüntüsü olacaktır. Bir görüntü eklemek için, Blurb modülünün altına bir Görüntü modülü eklemeniz yeterlidir.
Ardından, tanıtım yazısı arka planı için kullanılan aynı resmi yükleyin.
Metin önizlemesinin içeriği
Son teaser içeriğimiz, e-kitabımızdan bazı kurgusal bölümleri içerecek olan metin olacaktır. Metni eklemek için önceki resmin altına yeni bir Metin modülü ekleyin.
Ardından aşağıdaki HTML kodunu gövde metni sekmesine yapıştırın:
<h3>Chapitre 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>Chapitre 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
- Yazı Tipi Ağırlığı: Ultra Kalın
- Metin Hizalama: Ortalanmış
- Satır Yüksekliği: 1,3 em
- Dolgu: %10 (Üst ve Alt)
Birkaç son dokunuş
Satır parametrelerini güncelleme
İçerik yerindeyken, tasarımı daha duyarlı hale getirmek için satırda bazı ayarlamalar yapmamız gerekiyor. Hat Ayarları'nı açın ve aşağıdakileri güncelleyin:
- Genişlik: %100 (masaüstü), %90 (tablet ve telefon)
- Maksimum Genişlik: 1 piksel (masaüstü), 080 piksel (tablet ve telefon)
2. sütuna ek içerik ekleyin
Bu noktada gerekirse 2. sütuna ek içerik ekleyebiliriz. Bu örnek için, bir Metin modülü ve bir Düğme modülü ekledik ve bunları e-kitap yerleşim paketimizde gösterilen tasarıma benzer şekilde özelleştirdik.
DIVI'yı Şimdi İndirin !!!
Nihai sonuç
Şimdi son sonucu görelim.
Dizüstü bilgisayar tabletinin içinde bulunan açılır içeriğe göz atın.
Ve tasarım, tablet ve telefon ekranında bu şekilde yığılır.
Sonuç
Bu kayan tablet tasarımıyla ilgili belki de en iyi şey, çok yönlülüğüdür. Tablet aslında bir Divi sütunu olduğundan, sergilemek istediğiniz içeriği tasarlamak için istediğiniz sayıda Divi modülünü (metin, resim, düğme) kullanabilirsiniz.
Umarım bu, bir dahaki sefere bazı teaser içeriğini vitrininizde sergilemeniz gerektiğinde size yardımcı olur. Site Web.
Divi hakkında daha fazla bilgi edinmek isterseniz, kataloğumuzu ziyaret etmekten çekinmeyin. Div dersleri. Ayrıca danışabilirsiniz Divi Blog modülü ile Blog sayfası nasıl oluşturulur
Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum yapmaktan çekinmeyin.
Ancak, ayrıca kaynaklarımız, İnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
