Açılış Sayfanız İçin İlginç Kitap İncelemeleri Nasıl Tasarlanır Ebook Divi
Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Bir düzen paketi için, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, Sürdürülebilir Divi Tasarım Girişimimizin bir parçası olarak, yalnızca Divi e -kitap düzeni paketini ve Divi varsayılan seçeneklerini kullanarak yaklaşan e -kitap yön sayfalarınız için ilginç kitap incelemelerinin nasıl tasarlanacağını göstereceğiz. Bu, 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 iyi bir yoludur.
Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Yaratmaya başlayalım! Düzen Paketi Yükle E -Kitap Düzeni Sayfaları İlk Sayfaların Düzeni Yeni Sayfalara Düzenleme Yapmanız gereken ilk şey, daha önce yapılan düzende bulabileceğiniz e -kitap düzeni sayfalarının düzenini kullanarak yeni bir sayfa yapmaktır.
Kaydırma’nın yeni bir bölümünü sayfanın düzenine ekleyin ve kitap incelemesi istediğiniz yere yeni bir parça ekleyin. Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Sütun 1 Herhangi bir modül eklemeden gradyan arka planı, satır ayarlarını açın ve degradenin arka planını ilk sütuna ekleyin. Renk 1: #ffffff
Renk 2: #F4F4F4
Sütun 1 Başlangıç Pozisyonu:% 12
Sütun 1:% 12’nin son konumu
Arka Plan Rengi Sütun 2 İkinci sütuna da özel bir arka plan rengi ekleyin. Sütun 2 Renk Arka Plan: #9400FF
Yapıştırıcılar Tasarım sekmesine geçer ve aşağıdaki ayarları kullanarak sütunlar arasındaki tüm özel alanı silin: Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Mesafemiz aynı zamanda satır alanı ayarlarını da değiştirir. Üst kenar boşluğu: 100 piksel
Alt kenar boşluğu: 100 piksel
Üst dolgu: 0px
Dövme Alt: 0px Sütun 1’e Görüntü Modülü Ekle Şekil 1: 1 Satır ayarlarınız yerine yerleştirildikten sonra, ilk sütundaki görüntü modülünden başlayarak çeşitli modüller eklemeye başlayabilirsiniz. Seçtiğiniz resmi yükleyin, ancak Şekil 1: 1’deki orandan emin olun. Bu, yüksekliğin ve genişliğin aynı değere sahip olması gerektiği anlamına gelir.
Akıcı Görüntü Tasarım sekmesinde sol görüntü seviyelendirmesini seçin. Görüntü Tesviye: Sol Yapıştırıcımız ayrıca bu modülün genişliğini çeşitli ekran boyutlarında değiştirdi.
Genişlik:% 20 (masaüstü ve tablet),% 30 (telefon) Mesafe Sıranın sol tarafında üst üste binmeye izin vermek için, mesafe modülü mesafesini ayarlamak için negatif bir sol marj değeri ekleriz.
Sol kenar boşluğu: -30px Görüntü tasarımını tamamlamak için sınır ayarlarındaki her köşeye ’50VW’ ekleriz. Bu, görüntünün dairesel şeklini çeşitli ekran boyutlarında korumasını sağlayacaktır.
Sütun 1’e Metin Modülü #1 ekleyin STAR SEMPEMLE SEYRAK SEMPEMİ SONRAKİ İÇERİK BOX’a bir sonraki modüle, Metin Derecelendirme Modülüne ekleyin. Yıldız sıralamalarını görüntülemek için sembolleri kullanacağız. Devam edin ve aşağıdaki sembolleri kopyalayın ve yeni metin modülü içerik kutusuna yapıştırın :. Arka plan rengi bir sonraki modülün arka planını değiştirir. Arka plan rengi: #9400ff Metin ayarları Tasarım sekmesine geçer ve metin ayarlarını da değiştirir.
Metin yazı tipi: Montserrat Metin yazı tipi: Ağırlık
Metin boyutu: 45px (masaüstü), 30px (tablet), 25px (telefon)
Hat yüksekliği metni: 1em
Hizalama Metni: Orta
Yapıştırıcılar modülün genişliğini değiştirerek devam eder.
Genişlik:% 35 Mesafe ve bazı özel alanlar ekleyin.
Sol kenar boşluğu: 50 piksel Sağ kenar boşluğu: 50 piksel
Üst dolgu: 20px
Dolgu Alt: 20 piksel
Gölge Kutusu Sıralama kutusunu vurgulamak için kutunun düzgün bir gölgesi ekleyeceğiz.
Gölge Rengi: RGBA (0.0,0,0,3) Çeviriyi değiştirin ve daha az önemli değil, bazı özel dönüşüm dönüşüm değerlerini kullanarak metin modülünü yeniden konumlandıracağız. Tüm modülleri sütununuza ekleyene kadar bu adımı geciktirebilirsiniz.
Sağ: 360px (masaüstü), -84px (tablet), -70px (cep telefonu)
Botto,: -113px (masaüstü), 190px (tablet), 141px (cep telefonu) Sütun 1’e Metin Modülü #2 ekleyin Sütun 1’de ihtiyacımız olan bir sonraki modülün içeriğini ekleyin başka bir metin modülü. İstediğiniz içeriği ekleyin ve gözden geçiren ve kitaba bağlı.
Bağlantı Metni Rengi: #9400FF
Mesafe daha sonra, boşluk ayarlarını açın ve özel bir marj değeri kullanarak elemanın konumunu değiştirin. Üst kenar: -100 piksel (masaüstü), 0px (tablet ve cep telefonu)
Sol kenar boşluğu: 200px (masaüstü), 50px (tablet), 20px (telefon) Sağ kenar boşluğu: 50 piksel (tablet), 20px (cep telefonu)
Sütun 1’e Metin Modülü #3 ekleyin H3 içeriği, H3 incelemesinin başlığını içeren bir sonraki modüle H3 içeriği ekleyin.
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 Renk Metni: #000000
Mesafe de bazı özel marjlar ekleyin.
Üst kenar: 80px (masaüstü), 50px (tablet ve cep telefonu)
Sol kenar boşluğu: 50 piksel (masaüstü ve tablet), 20px (telefon) Sağ kenar boşluğu: 50 piksel (masaüstü ve tablet), 20px (telefon)
#4 metin modülünü sütun 1’e ekleyin, içeriği bir sonrakine ekleyin ve son olarak, gerçek incelemeli başka bir metin modülü olan Sütun 1’de ihtiyacımız var. Mesafe bu modül için alan ayarlarını açıyor ve aşağıdaki ayarları uyguluyor :
Üst kenar boşluğu: 20px
Alt kenar boşluğu: 50 piksel Sol kenar boşluğu: 50 piksel (masaüstü ve tablet), 20px (telefon) Sağ kenar boşluğu: 50 piksel (masaüstü ve tablet), 20px (telefon)
Resim Modülünü Sütun 2’ye Ekleyin Kitabın kapak görüntüsünü yükleyin İkinci sütunda, kitabın kapağını taşıyan görüntü modülünden başlayarak iki modüle ihtiyacımız olacaktır. Bu öğretici için, Divi e -Kitap Düzeni Paketine dahil olan bir kitap kapağı kullanıyoruz, ancak bunun yerine kendi kitabınızın kapağını ekleyebilirsiniz.
Yapıştırıcı tasarım modülü tasarım sekmesine taşındı ve genişliği değiştirdi.
Genişlik:% 79 (masaüstü),% 40 (tablet ve cep telefonu)
Mesafe ayrıca boşluk ayarlarını değiştirin. Üst kenar boşluğu: 60 piksel Alt kenar boşluğu: 60 piksel
Kutunun gölgesi ve kitabın kapağını vurgulamak için kutunun gölgesini ekleyin. Dikey Konum Gölge Kutusu: 40px
Bulanık Güç Gölgesi Kutusu: 80px
Kutunun gölgesinin dağılımının gücü: -20px Gölge Rengi: RGBA (0.0,0,0.8)
Düğme modülünü sütun 2’ye ekleyin Bir sonraki bölümün bir kopyasını ekleyin ve son olarak 2 sütunda ihtiyacımız olan şey düğme modülüdür. İstediğiniz bazı kopyaları ekleyin ve insanların kitabınızı satın alabileceği sayfaya bağlı.
Düğmenin hizalanması Tasarım sekmesine geçer ve düğme hizalamasını değiştirir.
Düğmenin hizalanması: orta
Düğme Düğmesi Ayarlama Düzenleme Paketinin ekran ve tonları ile eşleşecek ayarları ayarlayın. Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 16px
Metin Renk Düğmesi: #fffffff Arka Plan Renk Düğmesi: #000000
Düğmenin sınır genişliği: 0px
Sınır Sınır Yarıçapı: 0PXFont Düğmesi: Montserrat
Mektup Ağırlığı Düğmesi: Kalın
Düğmeye bazı özel dolgu değerleri ekleyerek ilk kitap incelemesinin tasarımını tamamlayın.
Üst dolgu: 16px
Dolgu Alt: 16px
Sol dolgu: 38px
Sağ dolgu: 38px Klon, ilk kitap incelemesini yapmayı bitirdikten sonra istediğiniz kadar, yön sayfanızda kaç incelemeyi görüntülemek istediğinize bağlı olarak istediğiniz kadar çok satırı klonlayabilirsiniz.
Farklı bir görüntü yükleyin Gözden geçirici görüntüsünü değiştirin.
Gerekirse kitabın kapağıyla birlikte kitabın kapağını değiştirin.
Kopyalayı değiştirin ve tüm kopyaları da değiştirin.
Bu yazının önizlemesinde görebileceğiniz gibi satırdaki sütun 2’nin arka plan sütununu keşfedin ve değiştirin, bu ikinci inceleme için farklı bir renk paleti kullanıyoruz. Bizim için daha kolay hale getirmek için satır ayarlarını açacağız ve sütun 2’nin arka planına doğru tıklayacağız, ardından Bul ve Değiştir’i tıklayacağız. Sırada kullanılan mor rengi değiştirin ve bitirin! Sayfanıza eklediğiniz her yinelenen kitap incelemesi için bu adımları tekrarladığınızdan emin olun. İçinde: Bu satır Değiştir: #31d190 Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü Hücresel
Yaratmaya başlayalım! Düzen Paketi Yükle E -Kitap Düzeni Sayfaları İlk Sayfaların Düzeni Yeni Sayfalara Düzenleme Yapmanız gereken ilk şey, daha önce yapılan düzende bulabileceğiniz e -kitap düzeni sayfalarının düzenini kullanarak yeni bir sayfa yapmaktır.
Kaydırma’nın yeni bir bölümünü sayfanın düzenine ekleyin ve kitap incelemesi istediğiniz yere yeni bir parça ekleyin. Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Sütun 1 Herhangi bir modül eklemeden gradyan arka planı, satır ayarlarını açın ve degradenin arka planını ilk sütuna ekleyin. Renk 1: #ffffff
Renk 2: #F4F4F4
Sütun 1 Başlangıç Pozisyonu:% 12
Sütun 1:% 12’nin son konumu
Arka Plan Rengi Sütun 2 İkinci sütuna da özel bir arka plan rengi ekleyin. Sütun 2 Renk Arka Plan: #9400FF
Yapıştırıcılar Tasarım sekmesine geçer ve aşağıdaki ayarları kullanarak sütunlar arasındaki tüm özel alanı silin: Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Mesafemiz aynı zamanda satır alanı ayarlarını da değiştirir. Üst kenar boşluğu: 100 piksel
Alt kenar boşluğu: 100 piksel
Üst dolgu: 0px
Dövme Alt: 0px Sütun 1’e Görüntü Modülü Ekle Şekil 1: 1 Satır ayarlarınız yerine yerleştirildikten sonra, ilk sütundaki görüntü modülünden başlayarak çeşitli modüller eklemeye başlayabilirsiniz. Seçtiğiniz resmi yükleyin, ancak Şekil 1: 1’deki orandan emin olun. Bu, yüksekliğin ve genişliğin aynı değere sahip olması gerektiği anlamına gelir.
Akıcı Görüntü Tasarım sekmesinde sol görüntü seviyelendirmesini seçin. Görüntü Tesviye: Sol Yapıştırıcımız ayrıca bu modülün genişliğini çeşitli ekran boyutlarında değiştirdi.
Genişlik:% 20 (masaüstü ve tablet),% 30 (telefon) Mesafe Sıranın sol tarafında üst üste binmeye izin vermek için, mesafe modülü mesafesini ayarlamak için negatif bir sol marj değeri ekleriz.
Sol kenar boşluğu: -30px Görüntü tasarımını tamamlamak için sınır ayarlarındaki her köşeye ’50VW’ ekleriz. Bu, görüntünün dairesel şeklini çeşitli ekran boyutlarında korumasını sağlayacaktır.
Sütun 1’e Metin Modülü #1 ekleyin STAR SEMPEMLE SEYRAK SEMPEMİ SONRAKİ İÇERİK BOX’a bir sonraki modüle, Metin Derecelendirme Modülüne ekleyin. Yıldız sıralamalarını görüntülemek için sembolleri kullanacağız. Devam edin ve aşağıdaki sembolleri kopyalayın ve yeni metin modülü içerik kutusuna yapıştırın :. Arka plan rengi bir sonraki modülün arka planını değiştirir. Arka plan rengi: #9400ff Metin ayarları Tasarım sekmesine geçer ve metin ayarlarını da değiştirir.
Metin yazı tipi: Montserrat Metin yazı tipi: Ağırlık
Metin boyutu: 45px (masaüstü), 30px (tablet), 25px (telefon)
Hat yüksekliği metni: 1em
Hizalama Metni: Orta
Yapıştırıcılar modülün genişliğini değiştirerek devam eder.
Genişlik:% 35 Mesafe ve bazı özel alanlar ekleyin.
Sol kenar boşluğu: 50 piksel Sağ kenar boşluğu: 50 piksel
Üst dolgu: 20px
Dolgu Alt: 20 piksel
Gölge Kutusu Sıralama kutusunu vurgulamak için kutunun düzgün bir gölgesi ekleyeceğiz.
Gölge Rengi: RGBA (0.0,0,0,3) Çeviriyi değiştirin ve daha az önemli değil, bazı özel dönüşüm dönüşüm değerlerini kullanarak metin modülünü yeniden konumlandıracağız. Tüm modülleri sütununuza ekleyene kadar bu adımı geciktirebilirsiniz.
Sağ: 360px (masaüstü), -84px (tablet), -70px (cep telefonu)
Botto,: -113px (masaüstü), 190px (tablet), 141px (cep telefonu) Sütun 1’e Metin Modülü #2 ekleyin Sütun 1’de ihtiyacımız olan bir sonraki modülün içeriğini ekleyin başka bir metin modülü. İstediğiniz içeriği ekleyin ve gözden geçiren ve kitaba bağlı.
Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:
Metin yazı tipi: Montserrat
Bağlantı Metni Rengi: #9400FF
Mesafe daha sonra, boşluk ayarlarını açın ve özel bir marj değeri kullanarak elemanın konumunu değiştirin. Üst kenar: -100 piksel (masaüstü), 0px (tablet ve cep telefonu)
Sol kenar boşluğu: 200px (masaüstü), 50px (tablet), 20px (telefon) Sağ kenar boşluğu: 50 piksel (tablet), 20px (cep telefonu)
Sütun 1’e Metin Modülü #3 ekleyin H3 içeriği, H3 incelemesinin başlığını içeren bir sonraki modüle H3 içeriği ekleyin.
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 Renk Metni: #000000
Mesafe de bazı özel marjlar ekleyin.
Üst kenar: 80px (masaüstü), 50px (tablet ve cep telefonu)
Sol kenar boşluğu: 50 piksel (masaüstü ve tablet), 20px (telefon) Sağ kenar boşluğu: 50 piksel (masaüstü ve tablet), 20px (telefon)
#4 metin modülünü sütun 1’e ekleyin, içeriği bir sonrakine ekleyin ve son olarak, gerçek incelemeli başka bir metin modülü olan Sütun 1’de ihtiyacımız var. Mesafe bu modül için alan ayarlarını açıyor ve aşağıdaki ayarları uyguluyor :
Üst kenar boşluğu: 20px
Alt kenar boşluğu: 50 piksel Sol kenar boşluğu: 50 piksel (masaüstü ve tablet), 20px (telefon) Sağ kenar boşluğu: 50 piksel (masaüstü ve tablet), 20px (telefon)
Resim Modülünü Sütun 2’ye Ekleyin Kitabın kapak görüntüsünü yükleyin İkinci sütunda, kitabın kapağını taşıyan görüntü modülünden başlayarak iki modüle ihtiyacımız olacaktır. Bu öğretici için, Divi e -Kitap Düzeni Paketine dahil olan bir kitap kapağı kullanıyoruz, ancak bunun yerine kendi kitabınızın kapağını ekleyebilirsiniz.
Yapıştırıcı tasarım modülü tasarım sekmesine taşındı ve genişliği değiştirdi.
Genişlik:% 79 (masaüstü),% 40 (tablet ve cep telefonu)
Mesafe ayrıca boşluk ayarlarını değiştirin. Üst kenar boşluğu: 60 piksel Alt kenar boşluğu: 60 piksel
Kutunun gölgesi ve kitabın kapağını vurgulamak için kutunun gölgesini ekleyin. Dikey Konum Gölge Kutusu: 40px
Bulanık Güç Gölgesi Kutusu: 80px
Kutunun gölgesinin dağılımının gücü: -20px Gölge Rengi: RGBA (0.0,0,0.8)
Düğme modülünü sütun 2’ye ekleyin Bir sonraki bölümün bir kopyasını ekleyin ve son olarak 2 sütunda ihtiyacımız olan şey düğme modülüdür. İstediğiniz bazı kopyaları ekleyin ve insanların kitabınızı satın alabileceği sayfaya bağlı.
Düğmenin hizalanması Tasarım sekmesine geçer ve düğme hizalamasını değiştirir.
Düğmenin hizalanması: orta
Düğme Düğmesi Ayarlama Düzenleme Paketinin ekran ve tonları ile eşleşecek ayarları ayarlayın. Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 16px
Metin Renk Düğmesi: #fffffff Arka Plan Renk Düğmesi: #000000
Düğmenin sınır genişliği: 0px
Sınır Sınır Yarıçapı: 0PXFont Düğmesi: Montserrat
Mektup Ağırlığı Düğmesi: Kalın
Düğmeye bazı özel dolgu değerleri ekleyerek ilk kitap incelemesinin tasarımını tamamlayın.
Üst dolgu: 16px
Dolgu Alt: 16px
Sol dolgu: 38px
Sağ dolgu: 38px Klon, ilk kitap incelemesini yapmayı bitirdikten sonra istediğiniz kadar, yön sayfanızda kaç incelemeyi görüntülemek istediğinize bağlı olarak istediğiniz kadar çok satırı klonlayabilirsiniz.
Farklı bir görüntü yükleyin Gözden geçirici görüntüsünü değiştirin.
Gerekirse kitabın kapağıyla birlikte kitabın kapağını değiştirin.
Kopyalayı değiştirin ve tüm kopyaları da değiştirin.
Bu yazının önizlemesinde görebileceğiniz gibi satırdaki sütun 2’nin arka plan sütununu keşfedin ve değiştirin, bu ikinci inceleme için farklı bir renk paleti kullanıyoruz. Bizim için daha kolay hale getirmek için satır ayarlarını açacağız ve sütun 2’nin arka planına doğru tıklayacağız, ardından Bul ve Değiştir’i tıklayacağız. Sırada kullanılan mor rengi değiştirin ve bitirin! Sayfanıza eklediğiniz her yinelenen kitap incelemesi için bu adımları tekrarladığınızdan emin olun. İçinde: Bu satır Değiştir: #31d190 Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü Hücresel
