Bugün size kullanarak göz alıcı kitap incelemeleri için bir tasarımın nasıl tasarlanacağını göstereceğim. Ebook Yalnızca Divi Düzen Paketi ve Divi yerleşik seçenekleri. Açılış sayfalarınıza sosyal kanıt eklemenin, güvenilirliği artırmanın ve insanların kısa yorumlarını zarif bir şekilde paylaşmanın harika bir yoludur.
Tasarım başlayalım
E-kitap paketi açılış sayfası düzenini yükleyin
Yapılacak ilk şey, açılış sayfası düzenini kullanarak yeni bir sayfa oluşturmaktır.Ebook Hazır Düzenlerde bulacağınız Düzen Paketi.
Yeni bölüm ekle
Düzeni aşağı kaydırın ve kitap incelemelerini görüntülemek istediğiniz yere yeni bir bölüm ekleyin.
Yeni bir satır ekle
Sütun yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır eklemeye devam edin:
1 Sütun Degrade Arka Planı
Daha fazla modül eklemeden satır ayarlarını açın ve ilk sütuna bir degrade arka plan ekleyin.
- 1 renk: #ffffff
- 2 renk: #f4f4f4
- Sütun 1 Başlangıç Konumu:% 12
- Sütun 1 Nihai Konum:% 12
Sütun 2 Arka Plan Rengi
Ayrıca ikinci sütuna özel bir arka plan rengi ekleyin.
- Sütun 2 Arka Plan Rengi: #9400ff
boyutlandırma
Tasarım sekmesine geçin ve aşağıdaki ayarları kullanarak sütunlar arasındaki tüm özel boşlukları kaldırın:
- Özel bir oluk genişliği kullanın: Evet
- Oluk genişliği: 1
aralık
Satır aralığı ayarlarını da değiştiriyoruz.
- Üst kenar boşluğu: 100px
- Alt kenar boşluğu: 100px
- Üst Dolgu: 0px
- Alt doldurma: 0px
1. sütuna bir görüntü modülü ekleyin
1 Yükle: 1 Resim
Satır ayarlarınız yerine getirildikten sonra, ilk sütundaki bir görüntü modülünden başlayarak farklı modülleri eklemeye başlayabilirsiniz. İstediğiniz bir resmi yükleyin, ancak en boy oranının 1: 1 olduğundan emin olun. Bu, yükseklik ve genişliğin aynı değerde olması gerektiği anlamına gelir.
Resim Hizalama
Tasarım sekmesinde sol görüntünün hizalamasını seçin.
- Görüntü hizalama: sol
boyutlandırma
Bu modülün genişliğini de farklı ekran boyutları için değiştiriyoruz.
- Genişlik:% 20 (masaüstü ve tablet),% 30 (telefon)
aralık
Çizginin sol tarafında örtüşmeye izin vermek için, Resim modülünün Aralık ayarlarına negatif bir sol kenar boşluğu değeri ekliyoruz.
- Sol kenar boşluğu: -30px
Sınır
Görüntünün tasarımını tamamlamak için, kenarlık ayarlarında her bir köşeye '50vw' ekliyoruz. Bu, görüntünün dairesel şeklini farklı ekran boyutlarında korumasını sağlayacaktır.
1 metin modülünü 1 sütununa ekle
İçerik alanına yıldız sembolleri ekleme
Bir sonraki modül olan sıralama metni modülüne geçelim. Yıldız sayısını vurgulamak için sembolleri kullanacağız. Devam edin, aşağıdaki sembolleri kopyalayıp kutuya yapıştırın içindekiler yeni bir metin modülü: ★★★★.
Arka plan rengi
Sonra modülün altını değiştirin.
- Arka plan rengi: # 9400ff
Metin ayarları
Tasarım sekmesine geçin ve metin ayarlarını da değiştirin.
- Metin Yazı Tipi: Montserrat
- Metnin yazı tipi ağırlığı: Ağır
- Metin boyutu: 45px (masaüstü), 30px (tablet), 25px (telefon)
- Metin satırının yüksekliği: 1em
- Metnin hizalanması: orta
boyutlandırma
Modülün genişliğini değiştirerek devam edin.
- Genişlik:% 35
aralık
Ve özel bir boşluk ekleyin.
- Sol kenar boşluğu: 50px
- Sağ kenar boşluğu: 50px
- Üst Dolgu: 20px
- Alt doldurma: 20px
Gölge kutusu
Derecelendirme kutusunu vurgulamak için ince bir gölge ekleyeceğiz.
- Kutu Gölge Bulanıklığı Gücü: 50px
- Gölge rengi: rgba (0,0,0,0,3)
Trafo Çevir
Son olarak, özel çeviri dönüştürme değerlerini kullanarak metin modülünü yeniden konumlandıracağız. Sütununuza tüm modülleri ekleyene kadar bu adımı erteleyebilirsiniz.
- Sağ: 360px (masaüstü), -84px (tablet), -70px (telefon)
- Alt: -113px (masaüstü), 190px (tablet), 141px (telefon)
2 metin modülünü 1 sütununa ekle
İçerik ekle
Sütun 1'de ihtiyacımız olan bir sonraki modül başka bir metin modülüdür. Ekle içindekiler seçiminize göre ve eleştirmene ve kitaba bir bağlantı.
Metin ayarları
Tasarım sekmesine geçin ve metin ayarlarını buna göre değiştirin:
- Metin Yazı Tipi: Montserrat
- Metin boyutu: 18px
Metin bağlantısı ayarları
Bağlantı metninin rengini de değiştirin.
- Bağlantı metni rengi: #9400ff
aralık
Ardından aralık ayarlarına gidin ve özel kenar boşluğu değerlerini kullanarak öğeyi yeniden konumlandırın.
- Üst marj: -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)
3 metin modülünü 1 sütununa ekle
H3 içeriği ekle
H3 revizyonunun başlığını içeren bir metin modülü olan bir sonraki modüle geçelim.
H3 metin ayarları
Tasarım sekmesine geçin 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
Ayrıca özel bir marj ekleyin.
- Üst marj: 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)
4 metin modülünü 1 sütununa ekleyin
İçerik ekle
Gerçek revizyonlu başka bir metin modülü olan 1 sütununda ihtiyacımız olan sonraki ve son modüle geçelim.
aralık
Bu modülün aralık 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)
2. sütuna bir görüntü modülü ekleyin
2 sütununun CSS ayarlarını değiştirin
Görüntüyü merkeze hizalamak için flex özelliklerini kullanacağız:
ekran: esnek;
Kitap kapak resmini indirin
İkinci sütunda, kitabın kapağıyla birlikte bir görüntü modülünden başlayarak iki modüle ihtiyacımız olacak. Bu eğitim için Divi'ye genel bakış kitabıyla sağlanan kitap kapaklarını kullanıyoruz, ancak kendi kitap kapağınızı da 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)
Gelişmiş Birincil Eleman
Burada görüntüyü merkeze hizalamaya çalışacağız.
- hizalama özü: merkez;
Tasarımı istediğiniz kadar klonlayın
İlk kitap incelemesini oluşturduktan sonra, açılış sayfanızda görmek istediğiniz inceleme sayısına bağlı olarak çizginin tamamını istediğiniz kadar klonlayabilirsiniz.
Son düşünceler
Bu eğitimde, bir sonraki e-kitap yayınlama sayfalarınız için nasıl harika kitap incelemeleri tasarlayacağınızı gösterdik. Bu, sayfanıza sosyal kanıt eklemenize ve ikna etmenize yardımcı olur ziyaretçi kitabınızın güvenilirliği. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!
