Bağlantı Bağlantıları ve CTA'lar İçeren ÜCRETSİZ Kitap Önizleme Divi Açılış Sayfası Düzenini İndirin

İster fiziksel bir kitap ister e-kitap satıyor olun, bunun için etkili bir açılış sayfasına sahip olmak harikalar yaratabilir. Bu açılış sayfasına geleneksel şekilde yaklaşabilir veya onu bir kitap ön izleme açılış sayfasına dönüştürebilirsiniz. Bir kitap önizleme açılış sayfası, insanların kitabınızın belirli bölümlerini veya bölümlerini önceden okumasını sağlar. Ayrıca, farklı kısımlar veya bölümler arasında sorunsuz bir şekilde gezinmeyi sağlayan bağlantı bağlantılarıyla donatılmıştır. Üstüne üstlük, kitabınızı sattığınız her yere trafik çekecek bir CTA'yı da ön plana çıkarmak istersiniz.

Bu öğreticide, Divi ile sıfırdan çarpıcı bir kitap önizleme açılış sayfası oluşturacağız. Ayrıca hemen web sitenize eklemek isterseniz JSON düzenini ü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

Kitap Önizleme Açılış Sayfası Düzenini ÜCRETSİZ olarak indirin

Ücretsiz kitap önizleme açılış sayfası düzenine el 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

aralık

Yeni bir sayfa oluşturarak başlayın ve ona normal bir bölüm ekleyin. Bölüm ayarlarını açın ve tüm özel üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Satır ekle

Sütun Yapısı

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

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

Sütun 3 Gradyan Arka Planı

Üçüncü sütuna da bir degrade arka planı ekleyin.

• Renk 1: #6a30ff
• Renk 2: #a202ff
• Sütun 3 Gradyan Türü: Doğrusal
• Sütun 3 Gradyan Yönü: 166deg

boyutlandırma

Ardından, boyutlandırma ayarlarına gidin ve aşağıdaki boyutlandırma ayarlarını ekleyerek satırın ekranın tüm genişliğini kaplamasına izin verin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Boşluk ayarlarına geçin ve satırın özel üst ve alt dolgusunu kaldırın. Birinci ve üçüncü sütuna da bazı dolgu değerleri ekleyin.

• Üst Dolgu: 0vw
• Alt Dolgu: 0vw
• Sütun 1 Üst Dolgu: 15vw (Masaüstü), 10vw (Tablet ve Telefon)
• Sütun 2 Alt Dolgu: 15vw (Masaüstü), 10vw (Tablet ve Telefon)
• Sütun 1 Sol Dolgu: 7vw

Sütun 2 CSS Kimliği

Bu yazının önizlemesinde fark edebileceğiniz gibi, ikinci sütuna eklenmiş bir kaydırma çubuğu var. Bu kaydırma çubuğunu gönderide daha sonra biçimlendirmek istiyorsanız, devam edin ve ikinci sütuna bir CSS kimliği ekleyin.

• Sütun 2 CSS Kimliği: stil kaydırma çubuğu

Sütun 2 Ana Eleman

Bir sonraki yapacağımız şey, sütun 2 ana öğesine aşağıdaki CSS kod satırlarını ekleyerek sütunun kaydırılabilir olmasını sağlamak:

overflow-y: scroll;
height: 57.87vw;
scroll-behavior: smooth;

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

İçerik Ekle

Artık tüm satır ayarlarını değiştirdiğimize göre modülleri eklemeye başlayabiliriz! 1. sütunda bir Metin Modülü ile başlayın ve istediğiniz içeriği ekleyin.

Metin Ayarları

Modülün metin ayarlarına gidin ve bazı değişiklikler yapın.

• Metin Yazı Tipi: Lato
• Renk: #666666
• Metin Boyutu: 1.6vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)
• Metin Satır Yüksekliği: 2vw

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

görünürlük

Bir sonraki ekleyeceğimiz 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 rengi değiştirin.

• Renk: #5802ed

boyutlandırma

Boyutlandırma değerleriyle de oynayın.

• Bölücü Ağırlığı: 4px
• Genişlik: 3vw (Masaüstü), 6vw (Tablet), 9vw (Telefon)
• Yükseklik: 0 piksel

aralık

Ve alan yaratmak için bazı özel üst ve alt dolgular ekleyin.

• Üst Marj: 1vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)
• Alt Marj: 7vw

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

İçerik Ekle

Başka bir Metin Modülü olan üçüncü modüle geçiyoruz. Burada, içerik kutusuna bir sembol (►) ve ardından ilk bölüm başlığı ekledik.

Link ekle

Bu modülün tamamını, bu gönderiye daha sonra ekleyeceğimiz bir bağlantı kimliğine bağlıyoruz.

• Modül Bağlantı URL'si: https://yourwebsite.com/pagetitle/#chapter-1

Metin Ayarları

Metin ayarlarına giderek devam edin ve içeriği tam istediğiniz gibi şekillendirin.

• Metin Yazı Tipi: Lato
• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Rengi: #666666
• Metin Boyutu: 1.3vw (Masaüstü), 2vw (Tablet), 3.3vw (Telefon)

aralık

Bazı özel üst ve alt dolguları da ekleyin.

• Üst Dolgu: 1vw
• Alt Dolgu: 1vw

Klon Metin Modülü #2 İki Kez

Metin Modülünü değiştirmeyi bitirdikten sonra, onu iki kez (veya paylaşmak istediğiniz kadar bölüme kadar) kopyalayın.

İçeriği Değiştir

Yinelenenlerin her birinin içeriğini değiştirin.

Bağlantıları Değiştir

Modül bağlantı URL'sinin sonundaki bağlantı kimliğiyle birlikte. Bu durumda bu, ilk kopyaya '#bölüm-2' ve ikinci kopyaya '#bölüm-3' eklemek anlamına gelir.

Sütun 2'ye Metin Modülü Ekle

İçerik Ekle

Kaydırılabilir olan bir sonraki sütuna. Burada, kitap ön izlemesinin farklı sayfalarını eklemek için Metin Modüllerini kullanacağız. Seçtiğiniz bazı içeriklerle ilk Metin Modülünü ekleyerek başlayın.

Arka plan rengi

Ardından, arka plan ayarlarına gidin ve beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

Metin Ayarları

Metin ayarlarını da değiştirin.

• Metin Yazı Tipi: Lato
• Metin Boyutu: 0.8vw (Masaüstü), 1.6vw (Tablet), 2.1vw (Telefon)
• Metin Satırı Yüksekliği: 1.7vw (Masaüstü), 3.3vw (Tablet), 3.8vw (Telefon)

H2 Metin Ayarları

H2 metin ayarlarıyla da oynayın.

• Başlık 2 Yazı Tipi: Lato
• Başlık 2 Yazı Tipi Ağırlığı: Ağır
• Başlık 2 Metin Rengi: #5802ed
• Başlık 2 Metin Boyutu: 2vw (Masaüstü), 2.5vw (Tablet), 2.9vw (Telefon)
• Başlık 2 Satır Yüksekliği: 2.3vw

aralık

Aralık ayarlarına gidip aşağıdaki özel kenar boşluğu ve dolgu değerlerini ekleyerek devam edin:

• Üst Marj: 2vw (Masaüstü), 7vw (Tablet), 10vw (Telefon)
• Alt Kenar Boşluğu: 2vw (Masaüstü), 7vw (Tablet), 10vw (Telefon)
• Sol Kenar Boşluğu: 5vw
• Sağ Marj: 5vw
• Üst Dolgu: 6vw
• Alt Dolgu: 6vw
• Sol Dolgu: 6vw
• Sağ Dolgu: 6vw

Kutu Gölge

İnce bir kutu gölgesi ekleyerek Metin Modülünü şekillendirin.

• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(0,0,0,0.09)

CSS kimliği

Metin Modülüne bir CSS Kimliği ekleyerek devam edin. Satırın ilk sütununda bağlandığınız CSS kimliğini kullandığınızdan emin olun.

• CSS Kimliği: bölüm-1

Metin Modülünü İki Kez Klonla

Metin Modülünün stilini oluşturduktan sonra, istediğiniz kadar kopyalayın.

İçeriği Değiştir

Her Metin Modülü kopyasının içeriğini değiştirin.

CSS kimliklerini değiştir

CSS kimlikleri ile birlikte.

• CSS Kimliği: bölüm-2
• CSS Kimliği: bölüm-3

Sütun 3'e Metin Modülü Ekle

İçerik Ekle

Bir sonraki ve son sütuna! Seçtiğiniz bazı içeriğe sahip bir Metin Modülü ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi: Lato
• Metin Yazı Tipi Ağırlığı: Ağır
• Metin Rengi: #ffffff
• Metin Boyutu: 2vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)
• Metin Satır Yüksekliği: 2vw
• Metin Yönü: Merkez

aralık

Sonra bazı özel sol ve sağ dolgu ekleyin.

• Sol: 2vw
• Sağ: 2vw

Sütun 3'e Düğme Modülü Ekle

Kopya Ekle

Seçtiğiniz bir kopya ile üçüncü sütuna bir Düğme Modülü ekleyerek devam edin.

hizalama

Sonraki düğme hizalamasını değiştirin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Düğme ayarlarını da değiştirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 1.5vw (Tablet), 2.4vw (Telefon)
• Düğme Metin Rengi: #5802ed
• Düğme Arka Plan Rengi: #ffffff
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 10vw
• Düğme Harf Aralığı: 0px
• Yazı Tipi Ağırlığı: Ultra Kalın
• Yazı Tipi Stili: Büyük Harf

aralık

Modülü biçimlendirmek ve konumlandırmak için bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Üst Marj: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)
• Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Alt Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Sol Dolgu: 3vw (Masaüstü), 7vw (Tablet), 9vw (Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 7vw (Tablet), 9vw (Telefon)

Stil Kaydırma Çubuğu

Sayfa Ayarlarını Aç

Bu öğreticinin son kısmı, ikinci sütunun kaydırma çubuğunun stiline ayrılmıştır. Sütun kaydırma çubuğunun stilini belirleyip belirlememek tamamen size kalmış. Stil vermemek, işlevsellik hakkında hiçbir şeyi değiştirmez. Kaydırma çubuğunun stilini belirlemeye karar verirseniz, sayfa ayarlarını açın.

CSS Kodu Ekle

Ardından, gelişmiş sekmeye gidin ve Özel CSS kutusuna biraz özel CSS ekleyin ve işiniz bitti!

#style-scrollbar::-webkit-scrollbar {
width: 1.1vw;
}
#style-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
#style-scrollbar::-webkit-scrollbar-thumb {
background: #333333;
}

Ö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, kitabınızın farklı bölümlerine veya bölümlerine bağlantı bağlantıları ve öne çıkan bir CTA içeren çarpıcı ve etkili bir kitap önizleme açılış sayfasını nasıl oluşturacağınızı gösterdik. Ayrıca, oluşturduğunuz herhangi bir web sitesine hemen eklemeye başlayabilmeniz için JSON düzenini ücretsiz olarak paylaştık! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümünde 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.