Divi ile Kaydırılabilir Metin Önizleme Tableti Nasıl Oluşturulur
Yayınlanan: 2017-08-08Bugünkü eğitimde, web sitenizde nasıl kaydırılabilir bir metin önizleme tableti oluşturacağınızı göstereceğiz. Metin önizlemesi, ziyaretçilerin paylaşılan bölümlerden birkaçını okumak için tabletin içinde gezinebilecekleri bir tablette gösterilecektir.
Web sitenize bir metin önizleme tableti eklemek, ziyaretçilerinizle alay etmenin mükemmel bir yoludur. Onlara, oluşturduğunuz içeriğin bir parçasını keşfetme şansı veriyorsunuz. İçeriği okuduktan ve ilgilerini çektikten sonra, geri kalanını da okumak isteme olasılıkları daha yüksektir. Bir metin önizleme tableti kullanmak, aşağıdaki durumlarda ilgi çekici olabilir, örneğin:
- kitap satarken
- Ziyaretçilerinizle ücretsiz bir e-kitap paylaşırken ve onları tam sürümü indirmeye teşvik etmek istediğinizde (abone olarak)
- Vaka çalışmalarını veya referansları paylaşırken
Size tam olarak ne demek istediğimizi göstermek için, adım adım nasıl yeniden oluşturacağınızı göstereceğimiz bir örnek oluşturduk:
Tablete dilediğiniz kadar içerik ekleyebilirsiniz. Kaydırma çubuğu, ziyaretçilerinizin içeriği kolayca kaydırmasına olanak tanır.
Divi ile Kaydırılabilir Metin Önizleme Tableti Nasıl Oluşturulur
Youtube Kanalımıza Abone Olun
Bölümü Oluşturun ve Değiştirin
Yaptığımız örneği yeniden oluşturmak için ihtiyaç duyacağımız ilk şey bir bölüm. Bunu kolaylaştırmak için, bu bölümü yeni bir sayfaya ekleyeceğiz ve sonucu oluşturmak için kullanılan tüm adımları açıklamak için Görsel Oluşturucu'ya geçeceğiz.
Yeni Sayfa Ekle
Yeni bir sayfa eklemek için WordPress Panonuz > Sayfalar > Yeni Ekle'ye gidin . Yeni sayfayı ekledikten sonra Divi Builder'ı etkinleştirin ve hemen Visual Builder'a geçin.
İki Sütunlu Satırlı Bir Bölüm Ekleme
Yeniden oluşturduğumuz örnek için yalnızca bir bölüme ihtiyacımız olacak. Standart bir bölüm ekleyin ve bu bölüm içinde iki sütunlu bir satır oluşturun. Metin önizleme tabletini yerleştirmek için sol sütuna ve bilgi vermek ve harekete geçirici mesaj yerleştirmek için ikinci sütuna ihtiyacımız olacak.
Gradyan Arka Planı Ekle
Açıklayacağımız bir sonraki adım Gradyan Arka Planıdır. Gerçekten basit bir şey seçtik ama bu bölüme güzel bir katma değer getiriyor. Arka plan gradyanını yeniden oluşturmak için bölümünüzün ayarlarına gidin. Ardından, arka plan alt kategorisindeki degrade arka planınız için aşağıdaki iki rengi kullanın:
- #e02b20
- #f2f2f2
Degrade arka planı için kullandığımız ayarlar şunlardır:
- Gradyan Türü: Doğrusal
- Gradyan Yönü: 143deg
- Başlangıç Konumu: %28
- Bitiş Konumu: %28
İlk Sütun: Kod Modülü ve Metin Önizleme Tableti Ekleme
İlk sütun için, metin önizleme tableti ile kod modülünü ekleyeceğiz. Metin önizleme tabletini tamamlamak için üç şey yapmamız gerekecek; kod modülünü ekleyin, HTML kod satırlarını Kod Modülünün içine ekleyin ve gerekli CSS kod satırlarını sayfanın kendisine ekleyin. CSS kod satırlarını Tema Seçenekleri veya Tema Özelleştirici'ye de ekleyebilirsiniz. Ancak bu durumda buna gerek olmadığı için sadece oluşturduğumuz sayfaya ekleyeceğiz.
Kod Modülünü Ekleyin
Oluşturduğunuz satırın ilk sütununa bir Kod Modülü ekleyerek başlayın.
HTML Kodunu Ekle
Ardından, bu Kod Modülünü açın ve İçerik Kutusuna aşağıdaki satırları ekleyin:
<div id="tab-container"> <div class="tablet"> <div class="tab"> <h1 class="title">Chapter 1</h1> <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p> <h1 class="title">Chapter 2</h1> <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p> <footer> 2017 *Author* </footer> </div> </div> </div>
Metin önizlememizde üç bölüm olduğunu fark edeceksiniz; başlık, paragraflar ve alt bilgi. Metin önizlemesini istediğiniz kadar yapabilirsiniz. Bu örnek için, her biri bir başlık ve bir paragrafla temsil edilen iki bölüm ekledik. Elbette tablette istediğiniz yere birden fazla paragraf ve başlık ekleyebilirsiniz.
Gerekli CSS Kodunu Ekleyin
HTML kodunu ihtiyaçlarınıza göre ayarladıktan sonra, tabletinizin görünmesini istediğiniz gibi görünmesini sağlayan CSS kodunu ekleyebilirsiniz. Oluşturacağımız sayfada sadece bu tablete ihtiyacımız olacağı için; kodu doğrudan sayfaya ekleyeceğiz. Sayfanızın Görsel Oluşturucusu içinde, ayarlar simgesine tıklayın:
Ardından, CSS sekmesine gidin ve aşağıdaki CSS kodu satırlarını Özel CSS alanına yapıştırın:
*{ box-sizing: border-box; }
.tablet {
position: relative;
background: #1c1c1c;
width: 100%;
height: 600px;
max-width: 450px;
max-height: 600px;
margin: 0 auto 0;
padding: 30px 24px 30px 24px;
border-radius: 18px;
border-top:2px solid #3C3F45;
border-right:2px solid #202227;
border-bottom:2px solid #202227;
border-left:2px solid #3C3F45;
box-shadow:11px 11px 24px rgba(0,0,0,0.5);
}
@media only screen and (max-width:768px) {
height: 400px;
}
.tablet .tab {
background: #f9f9f9;
color: black;
padding: 50px 40px 50px 40px;
overflow: scroll;
height: 100%;
text-align: justify;
}
.tablet .tab h1 {
font-size: 30px;
font-family: "Dancing script";
font-weight: bold;
font-style: italic;
text-align: center;
margin: 0 0 20px 0;
padding: 4px;
font-size: 25px;
}
.tablet .tab p {
margin: 0 0 20px 0;
font-family: "Arial";
font-size: 13px;
}
footer {
background: black;
color: white;
margin-bottom: 8px;
}
Bu CSS kod satırlarında ihtiyacınıza göre her şeyi değiştirebilirsiniz. Kod satırlarında da fark edebileceğiniz gibi, metin önizleme tabletinizin görünümünü ve verdiği hissi değiştirebileceğiniz beş ana bölüm var.
- Tabletin dış görünüşü
- Tabletin iç görünümü
- Başlık
- paragraflar
- altbilgi
Tableti, böylece metin önizleme tabletini entegre ettiğiniz her tür sayfaya sığdırabilirsiniz.
İkinci Sütun: İki Metin Modülü ve bir CTA ekleyin
Yapacağımız son şey, modülleri sağ sütuna eklemek. İnsanlara metin önizleme tabletinde ne okuyacaklarını bildirmek önemlidir. Aynı zamanda bir CTA'dan yararlanmak için ideal bir fırsattır. CTA, gerçek metin önizleme tabletine ne kadar yakınsa ve ne kadar dikkat çekici olursa, insanların metin önizlemesini okuduktan sonra harekete geçme olasılığı o kadar artar.
İlk Metin Modülü
İlk Metin Modülünü ikinci satıra ekleyerek başlayın. Ayarları açın ve İçeriğin Metin alt kategorisi içindeki İçerik Kutusuna bir başlık yazın. Ayrıca Tasarım sekmesine gidin ve Metin alt kategorisinde aşağıdaki değişiklikleri yapın:
- Metin Yazı Tipi: Dans Eden Senaryo
- Metin Yazı Tipi Stili: Kalın ve İtalik
- Metin Yazı Tipi Boyutu: 40 (masaüstü), 35 (tablet), 30 (telefon)
- Metin Rengi: #1c1c1c
- Metin Satırı Yüksekliği: 1.7em
Aynı sekmeyi aşağı kaydırın ve Üst Kenar Boşluğuna '%40' ekleyin.
İkinci Metin Modülü
Ayrıca, ikinci metin modülünü ekleyin. İçerik sekmesindeki İçerik kutusuna metni ekleyerek başlayın ve Tasarım sekmesine geçin. Tasarım sekmesinde, Metin alt kategorisinde de aşağıdaki ayarlamaları yapın:
- Metin Yazı Tipi: Arimo
- Metin Yazı Tipi Boyutu: 14
- Metin Satırı Yüksekliği: 1.7em
Düğme Modülü
Son olarak, ikinci sütuna bir Düğme Modülü de eklememiz gerekecek. CTA'nın renklerini degrade arka planla eşleştirdik. İlk olarak Düğme Modülünü ekleyin ve Ayarlar'ı açın. Ardından, İçerik sekmesine CTA ve URL'yi ekleyin. Tasarım sekmesine geçerek ve Düğme alt kategorisinde aşağıdaki ayarlamaları yaparak devam edin:
- Düğme için Özel Stilleri Kullan: Evet
- Düğme Boyutu Metin: 14 (masaüstü ve tablet), 12 (telefon)
- Düğme Metin Rengi: #f9f9f9
- Düğme Arka Plan Rengi: #e02b20
- Düğme Kenar Genişliği: 0
- Düğme Sınır Yarıçapı: 3
- Düğme Yazı Tipi: Arimo
İpucu: e-kitabınızı metin önizlemesi aracılığıyla tanıtıyorsanız, aşağıdaki gönderide açıklandığı gibi bir Trigger on Click Bloom katılım formu da bağlayabilirsiniz.
Sonuç
Bu gönderideki tüm adımları izlediyseniz, kitap önizlemeniz için aşağıdaki sonucu almış olmalısınız:
toparlamak
Kod modülü ile istediğiniz kadar yaratıcı olabilirsiniz. Bu gönderi, kişisel tercihinizin bazı unsurlarını entegre ederseniz Divi web sitenizi ne kadar çeşitli hale getirebileceğinizin bir örneğiydi. Bu gönderiyi adım adım izlediyseniz, kitap önizlemesini yeniden oluşturabilmeniz ve web sitenizde kullanabilmeniz gerekir. Kitap önizlemesini yalnızca yazar web siteleri için kullanmakla kalmaz, aynı zamanda oluşturduğunuz ve e-posta listenizi oluşturmak istediğiniz bir e-kitabın önizlemesini yapmak için de kullanabilirsiniz. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bize bir yorum bırakmaktan çekinmeyin!
Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!