Divi Ebook Açılış Sayfanız İçin Göz Alıcı Kitap İncelemeleri Nasıl Tasarlanır

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, yalnızca Divi'nin Ebook Layout Pack ve Divi'nin yerleşik seçeneklerini kullanarak yaklaşan e-kitap açılış sayfanız için nasıl göz alıcı kitap incelemeleri tasarlayacağınızı göstereceğiz. Bu, açılış sayfalarınıza sosyal kanıt eklemenin, güvenilirliği artırmanın ve insanların kısa incelemelerini zarif bir şekilde paylaşmanın harika bir yoludur.

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 İncelemeleri Bölüm Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz kitap incelemeleri bölümü düzenine 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!

E-Kitap Düzen Paketi Açılış Sayfası Düzenini Yeni Sayfaya Yükleyin

Yapmanız gereken ilk şey, önceden hazırlanmış düzenler içinde bulabileceğiniz Ebook Layout Pack açılış sayfası düzenini kullanarak yeni bir sayfa oluşturmaktır.

Yeni Bölüm Ekle

Sayfa düzenini aşağı kaydırın ve kitap incelemelerinin görünmesini istediğiniz yere yeni bir bölüm ekleyin.

Yeni Satır Ekle

Sütun Yapısı

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

Sütun 1 Gradyan Arka Planı

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve ilk sütuna bir degrade arka planı ekleyin.

• Renk 1: #ffffff
• Renk 2: #f4f4f4
• Sütun 1 Başlangıç ​​Konumu: %12
• Sütun 1 Bitiş Konumu: %12

Sütun 2 Arka Plan Rengi

İkinci sütuna da özel bir arka plan rengi ekleyin.

• Sütun 2 Arka Plan Rengi: #9400ff

boyutlandırma

Tasarım sekmesine gidin ve aşağıdaki ayarları kullanarak sütunlar arasındaki tüm özel alanı kaldırın:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Ayrıca satır aralığı ayarlarını da değiştiriyoruz.

• Üst Kenar Boşluğu: 100 piksel
• Alt Kenar Boşluğu: 100 piksel
• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütun 1'e Görüntü Modülü Ekle

1:1 Resim Yükle

Satır ayarlarınız yerine getirildikten sonra, ilk sütunda bir Görüntü Modülü ile başlayarak çeşitli modülleri eklemeye başlayabilirsiniz. Seçtiğiniz bir resmi yükleyin ancak resim oranının 1:1 olduğundan emin olun. Bu, yükseklik ve genişliğin aynı değeri taşıması gerektiği anlamına gelir.

Görüntü Hizalama

Tasarım sekmesinde sol görüntü hizalamasını seçin.

• Görüntü Hizalama: Sol

boyutlandırma

Ayrıca bu modülün genişliğini farklı ekran boyutlarında değiştiriyoruz.

• Genişlik: %20 (Masaüstü ve Tablet), %30 (Telefon)

aralık

Satırın sol tarafında örtüşmeye izin vermek için, Görüntü Modülünün boşluk ayarlarına negatif bir sol kenar boşluğu değeri ekliyoruz.

• Sol Kenar Boşluğu: -30px

Sınır

Görsel tasarımını tamamlamak için ayrıca kenarlık ayarlarındaki köşelerin her birine '50vw' ekliyoruz. Bu, görüntünün dairesel şeklini farklı ekran boyutlarında korumasını sağlayacaktır.

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

İçerik Kutusuna Yıldız Sembolleri Ekleme

Derecelendirme Metin Modülü olan bir sonraki modüle geçin. Yıldız derecelendirmelerini göstermek için semboller kullanacağız. Devam edin ve aşağıdaki sembolleri kopyalayın ve bunları yeni bir Metin Modülünün içerik kutusuna yapıştırın: ★★★★✰.

Arka plan rengi

Sonraki modülün arka planını değiştirin.

• Arka Plan Rengi: #9400ff

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını da değiştirin.

• Metin Yazı Tipi: Montserrat
• Metin Yazı Tipi Ağırlığı: Ağır
• Metin Boyutu: 45px (Masaüstü), 30px (Tablet), 25px (Telefon)
• Metin Satırı Yüksekliği: 1em
• Metin Hizalama: Merkez

boyutlandırma

Modülün genişliğini değiştirerek devam edin.

• Genişlik: %35

aralık

Ve bazı özel boşluklar ekleyin.

• Sol Kenar Boşluğu: 50px
• Sağ Kenar Boşluğu: 50px
• Üst Dolgu: 20px
• Alt Dolgu: 20px

Kutu Gölge

Derecelendirme kutusunu vurgulamak için ince bir kutu gölgesi ekleyeceğiz.

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

Dönüştür Çeviri

Ve son olarak, bazı özel dönüştürme çevirme değerleri kullanarak Metin Modülünü yeniden konumlandıracağız. Tüm modülleri de sütununuza ekleyene kadar bu adımı erteleyebilirsiniz.

• Sağ: 360px (Masaüstü), -84px (Tablet), -70px (Telefon)
• Alt,: -113px (Masaüstü), 190px (Tablet), 141px (Telefon)

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

İçerik Ekle

Sütun 1'de ihtiyacımız olan bir sonraki modül başka bir Metin Modülü. Seçtiğiniz içeriği ekleyin ve gözden geçirene ve kitaba bağlantı verin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Montserrat
• Metin Boyutu: 18px

Bağlantı Metni Ayarları

Bağlantı metni rengini de değiştirin.

• Bağlantı Metni Rengi: #9400ff

aralık

Ardından, boşluk ayarlarına gidin ve özel kenar boşluğu değerlerini kullanarak öğeyi yeniden konumlandırın.

• Üst Kenar Boşluğu: -100px (Masaüstü), 0px (Tablet ve Telefon)
• Sol Kenar Boşluğu: 200px (Masaüstü), 50px (Tablet), 20px (Telefon)
• Sağ Kenar Boşluğu: 50px (Tablet), 20px (Telefon)

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

H3 İçeriği Ekle

H3 inceleme başlığını içeren bir Metin Modülü olan bir sonraki modüle geçin.

H3 Metin Ayarları

Tasarım sekmesine gidin ve H3 metin ayarlarını değiştirin.

• Başlık 3 Yazı Tipi: Montserrat
• Başlık 3 Yazı Tipi Ağırlığı: Kalın
• Başlık 3 Metin Rengi: #000000

aralık

Bazı özel kenar boşlukları da ekleyin.

• Üst Kenar Boşluğu: 80px (Masaüstü), 50px (Tablet ve Telefon)
• Sol Kenar Boşluğu: 50px (Masaüstü ve Tablet), 20px (Telefon)
• Sağ Kenar Boşluğu: 50px (Masaüstü ve Tablet), 20px (Telefon)

Sütun 1'e Metin Modülü #4 Ekle

İçerik Ekle

Asıl incelemeye sahip başka bir Metin Modülü olan sütun 1'de ihtiyacımız olan sonraki ve son modüle geçiyoruz.

aralık

Bu modülün boşluk ayarlarına gidin ve aşağıdaki ayarları uygulayın:

• Üst Kenar Boşluğu: 20px
• Alt Kenar Boşluğu: 50px
• Sol Kenar Boşluğu: 50px (Masaüstü ve Tablet), 20px (Telefon)
• Sağ Kenar Boşluğu: 50px (Masaüstü ve Tablet), 20px (Telefon)

Sütun 2'ye Görüntü Modülü Ekle

Kitap Kapak Resmini Yükle

İkinci sütunda, kitap kapağını taşıyan bir Görüntü Modülü ile başlayan iki modüle ihtiyacımız olacak. Bu eğitim için Divi's Ebook Layout Pack ile birlikte gelen kitap kapaklarını kullanıyoruz, ancak bunun yerine kendi kitap kapağınızı ekleyebilirsiniz.

boyutlandırma

Görüntü Modülünün tasarım sekmesine gidin ve genişliği değiştirin.

• Genişlik: %79 (Masaüstü), %40 (Tablet ve Telefon)

aralık

Boşluk ayarlarını da değiştirin.

• Üst Kenar Boşluğu: 60px
• Alt Kenar Boşluğu: 60px

Kutu Gölge

Ve kitap kapağını vurgulamak için bir kutu gölgesi ekleyin.

• Kutu Gölge Dikey Konumu: 40px
• Kutu Gölge Bulanıklığı Gücü: 80px
• Kutu Gölge Yayılma Gücü: -20px
• Gölge Rengi: rgba(0,0,0,0.8)

Sütun 2'ye Düğme Modülü Ekle

Kopya Ekle

Sütun 2'de ihtiyacımız olan sonraki ve son modül Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin ve insanların kitabınızı satın alabileceği sayfaya bağlantı verin.

Düğme Hizalama

Tasarım sekmesine gidin ve düğme hizalamasını değiştirin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Düzen paketinin görünümüne ve hissine uyacak şekilde düğme ayarlarını değiştirin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 16px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Montserrat
• Düğme Yazı Ağırlığı: Kalın

aralık

Ve düğmeye bazı özel dolgu değerleri ekleyerek ilk kitap inceleme tasarımını tamamlayın.

• Üst Dolgu: 16px
• Alt Dolgu: 16px
• Sol Dolgu: 38px
• Sağ Dolgu: 38px

İstenildiği Kadar Kez Klonlama Satırı

İlk kitap incelemesini oluşturmayı tamamladığınızda, açılış sayfanızda kaç inceleme görünmesini istediğinize bağlı olarak tüm satırı istediğiniz kadar çoğaltabilirsiniz.

Farklı Resim Yükle

Gözden geçirenin resmini değiştirin.

Kitap Kapağını Değiştir

Gerekirse kitap kapağıyla birlikte.

Kopyayı Değiştir

Ve tüm kopyayı da değiştirin.

Satırda Sütun 2 Arka Plan Rengini Bul ve Değiştir

Bu yazının önizlemesinde fark edebileceğiniz gibi, bu ikinci inceleme için farklı bir renk paleti kullanıyoruz. Kendimiz için kolaylaştırmak için, satır ayarlarını açacağız ve 2. sütun arka planına sağ tıklayıp ardından bul ve değiştir'e tıklayacağız.

Satır içinde kullanılan mor rengi değiştirin ve işiniz bitti! Sayfanıza eklediğiniz yinelenen kitap incelemelerinin her biri için bu adımları tekrarladığınızdan emin olun.

• İçinde: Bu Satır
• Şununla Değiştir: #31d190

Ö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, yaklaşmakta olan e-kitap açılış sayfalarınız için nasıl çarpıcı kısa kitap incelemeleri tasarlayacağınızı gösterdik. Bu, sayfanıza sosyal kanıt eklemenize ve ziyaretçileri kitabınızın güvenilirliğine ikna etmenize yardımcı olur. Bu kullanım örneği öğreticisi, her hafta tasarım araç kutunuza fazladan bir şey koymaya çalıştığımız devam eden Divi tasarım girişimimizin bir parçasıdır. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne 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.