Divi ile piyasaya sürülebilecek bir önizleme tablet metni nasıl yapılır

Bugünün öğreticisinde, web sitenize sunulabilecek bir önizleme metin tabletinin nasıl oluşturulacağını göstereceğiz. Metin önizlemesi, ziyaretçilerin dağıtılan birkaç bölümü okumak için tablette kaydırabileceği bir tablette görüntülenecektir. Web sitenize bir önizleme tableti eklemek, ziyaretçilerinizi cezbedmenin en iyi yoludur. Onlara oluşturduğunuz içeriğin kısmını keşfetme fırsatı verirsiniz. İçeriği okuduktan ve kendisine ilgi duyduktan sonra, büyük olasılıkla gerisini okumak istiyorlar. Bir önizleme tablet metni kullanmak aşağıdaki durumlarda çekici olabilir, örneğin:
Kitap satarken
Ücretsiz e -kitapları ziyaretçilerinizle paylaşırken ve tam sürümlerini indirmeye teşvik etmek isterken (abone olun)
Vaka çalışmaları veya referansları paylaşırken
Size tam olarak ne demek istediğimizi göstermek için, adım adım adım nasıl yeniden yapacağınızı göstereceğimize dair bir örnek verdik:

Tablete istediğiniz kadar içerik ekleyebilirsiniz. Scrollbar, ziyaretçilerinizin içeriği kolayca kaydırmasına izin verecektir. YouTube kanalımıza Divi aboneliğimizle kaydırılabilecek bir önizleme tableti nasıl yapılır
Yaptığımız örneği yeniden yapmamız gereken ilk bölümü oluşturun ve değiştirin. Daha kolay hale getirmek için, bu bölümü yeni bir sayfaya ekleyeceğiz ve sonuçları yapmak için kullanılan tüm adımları açıklamak için görsel oluşturucuya geçeceğiz. Yeni bir sayfa eklemek için yeni bir sayfa ekleyin, WordPress Dashboard> Sayfa> Yeni Ekle’yi açın. Yeni bir sayfa ekledikten sonra, Divi oluşturucuyu etkinleştirin ve hemen görsel oluşturucuya geçin.

Yeniden yaptırdığımız örnek için iki sütun satırı ile bir parça ekleyin, sadece bir parçaya ihtiyacımız var. Standart kısmı ekleyin ve bu bölümde iki sütun satırı yapın. Bilgi sağlamak ve harekete geçmesi için bir davet yapmak için metnin ve ikinci sütunun önizlemesini yerleştirmek için sol sütununa ihtiyacımız var. Degradenin arka planını ekleyin Bir sonraki adımda gradyan arka planı. Çok basit bir şey seçtik ama bu bölüme iyi katma değer getirdi. Bir arka plan gradyanını yeniden oluşturmak için bölüm ayarlarınızı açın. Ardından, arka plan alt kategorisinde gradyanınızın arka planı için aşağıdaki iki rengi kullanın:

#E02B20
#F2f2f2
Gradyanın arka planı için kullandığımız ayarlar aşağıdaki gibidir:

Gradyan Türü: Doğrusal
Gradyan yönü: 143 derece
Başlangıç ​​Pozisyonu:% 28
Son pozisyon:% 28
İlk sütun: Kod Modülü ve Tablet Birincil Metin Ekle İlk sütun için, önizleme tablet metnine sahip bir kod modülü ekleyeceğiz. Metin önizleme tabletini tamamlamak için üç şey yapmamız gerekir; Kod modülünü ekleyin, kod modülüne HTML kod satırını ekleyin ve sayfanın kendisine gerekli CSS kod satırını ekleyin. Ayrıca CSS kod satırını tema seçeneğine veya tema ayarına da ekleyebilirsiniz. Ancak bu durumda gerekli olmadığından, sadece yaptığımız sayfaya ekleyeceğiz.

Kod modülünü ekleyin, oluşturduğunuz satırın ilk sütununa kod modülünü ekleyerek başlayın. Bir sonraki HTML kodunu ekleyin, kod modülünü açın ve içerik kutusuna aşağıdaki satırı ekleyin:
>

Bölüm 1

Sed ut perspicatis unde omnis iste natus hatası oturma voluptatem accusantium doloremque laudantium, totam aperiam frenler, eaque Ipsa quee ablo Illo Inventatatic et quasi mimaro beatae vitta dicta dicta sunt ekstricabo.Nemo enim iPSsam Volupptatem Quia Volupptas Sit Aspernatur Aut Odit Aut Fugit, Sed Quia Convequuntur Magni Dolores Eos Qui Ratie Voluptatem Sekul Nescunt.Neque porro quisquam est, qui Dolorem iPsum Quia Dolor Sit amet, kavram, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam queerat voluratm.Ut enim ad minima veniam, quis nostrum egzersizi ullam corporis suscipit laboriosam, nisi ut aliquid ea commodi sonuç?Quis autem vel eum iure reprheHenderit qui in ea velruptate velit esse quam nihil molestiae convequatur, illum qui dolorem eum fugiat quo voluptas nulla nulla pariatur?

Bölüm 2

Sed ut perspicatis unde omnis iste natus hatası oturma voluptatem accusantium Doloremque laudantium, totam aperiam frenler, eaque Ipsa quee ablo Illo Inventore et quasi mimaro beatae vitta dicta sunt inipsabo. Nemo enim iPSsam Volupptatem Quia Volupptas Sit Aspernatur Aut Odit Aut Fugit, Sed Quia Convequuntur Magni Dolores Eos Qui Ratie Voluptatem Sekul Nescunt. Neque porro quisquam est, qui Dolorem iPsum Quia Dolor Sit amet, kavram, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam queerat voluratm. Ut enim ad minima veniam, quis nostrum egzersizi ullam corporis suscipit laboriosam, nisi ut aliquid ea commodi sonuç? Quis autem vel eum iure rephenderit qui in ea velites esse quam nihil molestiae sonuçları, illum qui dolorem eum fugiat quo volution nulla pariratur?

2017 *Yazar *

Metnimizin önizlemesinde üç bölüm olduğunu göreceksiniz; başlık, paragraf ve altbilgi. 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 birkaç paragraf ve başlık ekleyebilirsiniz. HTML kodunu ihtiyaçlarınıza göre ayarladıktan sonra gereken CSS kodunu ekleyin, tabletinizi istediğiniz gibi görünmesini sağlayan CSS kodunu ekleyebilirsiniz. Çünkü bu tablete sadece yaptığımız sayfada ihtiyacımız var; Kodu doğrudan sayfaya ekleyeceğiz. Sayfanızın görsel oluşturucusunda Ayarlar simgesini tıklayın:
Ardından, CSS sekmesini açın ve aşağıdaki CSS kod satırını CSS özel alanına yapıştırın: *{Box-Boyuting: Border-box; }. Tablet {
Pozisyon: göreceli;

Arka plan: #1C1C1C;

Genişlik:%100;
Yükseklik: 600 piksel;
Max-Width: 450px;
Maksimum yükseklik: 600 piksel;
Marj: 0 otomatik 0;
Dolgu: 30px 24px 30px 24px;
Border-Radius: 18px;
Sınır üstü: 2px katı #3C3F45;
Sınır-sağ: 2px katı #202227;
Sınır dip: 2px katı #202227;
Sınır sol: 2px katı #3C3F45;
Box-Shadow: 11px 11px 24px RGBA (0.0.0.0.5);
}
@Media sadece ekran ve (maksimum genişlik: 768px) {
Yükseklik: 400 piksel;
}
.tablet .tab {
Arka plan: #f9f9f9;
Siyah renk;
Dolgu: 50px 40px 50px 40px;
Taşma: Kaydırma;
Yükseklik:%100;
Metin-align: haklı;
}
. Tablet. Tab H1 {
yazı tipi boyutu: 30px;
yazı tipi ailesi: “dans senaryosu”;
Yazı tipi-ağırlık: kalın;
yazı tipi tarzı: italik;
Metin-align: merkez;
Marj: 0 0 20px 0;
Dolgu: 4px;
yazı tipi boyutu: 25px;
}
.tablet. sekme p {
Marj: 0 0 20px 0;
yazı tipi ailesi: “Arial”;
yazı tipi boyutu: 13px;
}
Footer {
Arka plan: Siyah;
Beyaz renk;
Marj-Alt: 8px;
}
Bu CSS kod satırındaki her şeyi ihtiyaçlarınıza göre değiştirebilirsiniz. Kod satırında dikkat edebileceğiniz gibi, metin önizleme tabletinizin görünümünü ve hissini değiştirebileceğiniz beş ana parça vardır.
Dış Tablet Ekran
Tabletin iç kısmını görüntüleyin
Başlık

Paragraf
dipnot
Anda dapat membuat tablet sesuai dengan jenis halaman apa pun yang Anda integrasikan dengan tablet pratinjau teks. Kolom Kedua: Tambahkan Dua Modul Teks & sebuah CTA Hal terakhir yang akan kita lakukan adalah menambahkan modul ke kolom kanan. Penting untuk memberi tahu orang-orang apa yang akan mereka baca di tablet pratinjau teks. Ini juga merupakan kesempatan ideal untuk memanfaatkan CTA. Semakin dekat CTA dengan tablet pratinjau teks yang sebenarnya, dan semakin terlihat, semakin besar kemungkinan orang akan mengambil tindakan setelah membaca pratinjau teks.Modul Teks Pertama Mulailah dengan menambahkan Modul Teks pertama ke baris kedua. Buka pengaturan dan tuliskan judul di Kotak Konten di dalam subkategori Teks dari Konten. Selanjutnya, buka tab Desain dan buat perubahan berikut pada subkategori Teks:
Metin Yazı Tipi: Dans Etme Komut Dosyası
Gaya Font Teks: Tebal & Miring
Ukuran Font Teks: 40 (desktop), 35 (tablet), 30 (ponsel)
Warna Teks: #1c1c1c
Hat yüksekliği metni: 1.7em
Gulir ke bawah tab yang sama dan tambahkan ‘40%’ ke Margin Atas.
Modul Teks Kedua Selanjutnya tambahkan modul teks kedua. Mulailah dengan menambahkan teks di kotak Konten di dalam tab Konten dan lanjutkan ke tab Desain. Di dalam tab Desain, buat penyesuaian berikut juga pada subkategori Teks:
Metin Yazı Tipi: Arimo
Metin yazı tipi boyutu: 14
Hat yüksekliği metni: 1.7em

Modul Tombol Terakhir, kita juga perlu menambahkan Modul Tombol ke kolom kedua. Kami telah mencocokkan warna CTA dengan latar belakang gradien. Pertama, tambahkan Modul Tombol dan buka Pengaturan. Kemudian, tambahkan CTA dan URL di dalam tab Konten. Lanjutkan dengan berpindah ke tab Desain dan lakukan penyesuaian berikut pada subkategori Tombol:

Düğmeler için özel bir stil kullanın: evet
Metin Düğmesi Boyutu: 14 (Masaüstü ve Tablet), 12 (Telefon) Metin Renk Düğmesi: #F9F9F9
Arka Plan Renk Düğmesi: #E02B20
Sınır sınır genişliği: 0

Sınır sınır yarıçapı: 3
Yazı tipi düğmesi: Arimo
İpucu: Ebook’unuzu metin önizlemesi yoluyla tanıtıyorsanız, aşağıdaki yazıda açıklandığı gibi Tıklama Bloom Katılım Formuna Tetikleyiciyi de bağlayabilirsiniz. Sonuçlar Bu yazıdaki tüm adımları izlediyseniz, kitap önizlemeniz için aşağıdaki sonuçları almalısınız:
Bir kod modülü ile sarın, istediğiniz kadar yaratıcı olabilirsiniz. Bu yazı, kişisel tercihlerinizin bazı unsurlarını entegre ederseniz, divi web sitenizi ne kadar çeşitli görünür hale getirebileceğinize bir örnektir. Bu gönderiyi adım adım izlediyseniz, bir kitap yeniden yapabilmeniz ve web sitenizde kullanabilmeniz gerekir. Kitapları yalnızca yazarın web sitesi için kullanmakla kalmaz, aynı zamanda oluşturduğunuz e -kitabın önizlemesini görmek ve e -posta listenizi oluşturmak istediğiniz de kullanabilirsiniz. Sorularınız veya önerileriniz varsa; Aşağıdaki yorumlar bölümüne yorum yapmaktan çekinmeyin! Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir