Divi ve Divi Builder 'ı kullanarak güzel WordPress web siteleri oluşturun.

Divi'de İçerik Önizleme Tableti Nasıl Oluşturulur

Rifat Divi Eğitimleri Oct 6, 2021

Demo/Önizleme öğeleri, bunları web sitenizde kullanırsanız başarılı bir pazarlama taktiği olabilir. E-kitaplar gibi dijital ürünlerin tanıtımı söz konusu olduğunda özellikle yararlıdır. Gelecek olanın tadıyla onları kızdırırsın, böylece daha fazlası için yaygara koparırlar. Bugünün makalesinde, size Divi'nin kaydırılabilir tabletini teaser materyalini görüntülemek için nasıl kullanacağınızı öğreteceğiz. Divi'nin yerleşik özelliklerini kullanarak, bir sütunu her tür bilgiyi tutabilen kaydırılabilir bir kapsayıcıya (tablet gibi görünmesi amaçlanan) dönüştüreceğiz. Portföyünüzden veya diğer içeriğinizden herhangi bir e-kitap tasarımının ilk birkaç bölümünü bu araçla tanıtabilirsiniz.

Hadi, bunun için gidelim!

Tasarıma Bakış

Burada, tasarımı bitirdikten sonra kaydırılabilir bir içerik önizleme tabletinin nasıl görüneceğini görebilirsiniz.

Tasarım Segmenti Bölüm 1: Konteyner Yapısı

Panodan yeni bir sayfa oluşturun ve Divi ile Düzenle ile ilerleyin. Ardından Sıfırdan Oluştur'u seçin ve oluşturmaya başlayın.

Harika Web Siteleri Oluşturun

En iyi ücretsiz sayfa oluşturucu Elementor ile

Şimdi başla

Satır Ekleme

İki sütunlu bir satırla başlayalım. Unutmayın, bunu varsayılan bölümde oluşturuyoruz.

Ayarlar: Sütun 1

Arka plan rengi

Ardından, Sütun 1'in seçeneklerine gidin ve ona beyaz bir arka plan verin.

  • Arka Plan Rengi: #ffffff

Kenarlık Ve Dolgu

Şimdi, sütuna biraz dolgu ekleyin ve üzerine bir kenarlık ekleyin.

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

Kutu Gölge

Bu tasarımı biraz daha detaylı ve derinlikli hale getirmek için ona bir fiyonk gölgesi ekleyelim.

  • 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 Kullanarak Özel Yükseklik ve Genişlik

İçeriği göz atılabilir hale getirmek için sütunun yüksekliğini belirli bir değere ayarlayın. İçerik artık sütunun maksimum boyutunu aşacak. Tabletin en boy oranını sabit tutmak istiyoruz, bu nedenle sütun için tam genişlik ayarlamak mantıklı. Gelişmiş sekmesine gidin ve sütunun yüksekliğinde ve genişliğinde aşağıdaki değişiklikleri yapın:

Aşağıdaki özel CSS'yi, Özel CSS seçeneği altındaki Ana Öğe'deki Masaüstü sürümüne ekleyin.

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

Şimdi kodu mobil sürüme ekleyin.

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

Dikey Taşma: Kaydır

Sütunun yeni ayarlanan yüksekliği nedeniyle içerik sonunda taşacaktır. Sütunu kaydırarak taşan malzemenin görülebildiğinden emin olmak için görünür dikey taşma seçeneğini "kaydır" olarak ayarlayın.

  • Dikey Taşma: Kaydır

Tasarım Segmenti 2. Bölüm: Tablete İçerik Ekleme

Şimdi sütuna veya tablete biraz içerik ekleyeceğiz. Divi modülleri tarafından yapılan her şeyi görüntüleyebilirsiniz. Burada, tanıtım yazısı modülü tarafından oluşturulan bir içeriğin, bir kapak resminin ve bir eylem düğmesinin nerede olacağını gösteren bir E- kitap yapacağız.

Görüntü Arka Planı ile CTA Düğmesi

Tablete, ziyaretçiyi kaydırması için bilgilendirecek bir tanıtım modülü ekleyeceğiz. Tanıtım yazısı simgesi ve metnin dışında, Kapak önizlemesi olarak bir arka plan resmi kullanacağız.

Blurb Modülü Ayarları

Tanımlama modülünde aşağıdaki ayarlamaları yapın.

  • 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

Tasarım sekmesinden aşağıdaki ayarları değiştirin.

  • 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

Tableti doldurmak için tanıtım yazısının yüksekliğini sütunun yüksekliğine uyacak şekilde ayarlayabiliriz. Sütunumuz önceden belirlenmiş bir boyuta sahip olduğundan, bu yükseklik yüzdesi işe yarar. Üst dolguyu ekledikten sonra, simgeyi ve başlığı sütunun altına taşıyabileceğiz.

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

Ekleyeceğimiz bir sonraki öğe bir kapak resmi. Önceki tanıtım modülünün altına bir görüntü modülü ekleyin.

Tanımlama modülünde kullanılanla aynı görüntüyü kullanın.

Metin içeriği

Ekleyeceğimiz tabletteki son öğe, bazı metin içeriğidir. Bunun için metin modülünü kullanın.

Ardından Text kısmından body kısmına aşağıdaki kodu ekleyin.

>h3/h3h3/h3

Tasarım sekmesinden aşağıdaki stilleri 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)

Tasarım Segmenti Bölüm 3: Son Rötuş

Satır Ayarı - Güncellendi

Artık tüm içeriğe sahip olduğumuza göre, daha duyarlı hale getirmek için satır ayarlarını yapalım.

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

Sütun 2 İçindekiler

Şimdiye kadar sadece 1. sütunun çalışmasını yaptık. Şimdi tasarımımızı daha çekici ve büyüleyici kılmak için 2. sütuna biraz içerik ekleyeceğiz. Tasarımı daha doğal hale getirmek için metin modülleri ve düğme modülleri ekleyeceğiz.

Nihai Çıktı

İşte Divi tarafından yapılmış güzel bir içerik önizleme tableti.

Toplama

Bu ön izleme modülü/tablet tasarımının en önemli faydası, onu çeşitli durumlarda kullanabilmemizdir. Sonuç olarak, tablet esasen bir Divi sütunu olduğundan, öne çıkarmak istediğiniz malzeme herhangi bir sayıda Divi modülü (metin, resim, düğme) kullanılarak tasarlanabilir. Gelecekte web sitenizde önizleme/gizli bakış içeriği sunmanız gerekiyorsa, umarım bu yararlı olacaktır. Düşüncelerinizi yorum bölümünde paylaşın ve ihtiyaç duyabilecekleri için arkadaşlarınızla paylaşmayı unutmayın!