Divi Blog Modülünde “Devamını Oku” bağlantısı nasıl ayarlanır
Tam “Okuma” bağlantı blogu, kullanıcı deneyimini geliştirmek için önemli bir unsur olabilir. Bu nedenle, onu nasıl doğru ayarlayacağımızı bilmemiz önemlidir. Divi’de, “okuma” bağlantısı blog modülünde blog içeriği oluşturan diğer birçok öğeyle birlikte ayarlanabilir. Bu öğreticide, tasarım üzerinde daha fazla kontrole sahip olmanız için DIVI blog modülündeki “Devamını Oku” bağlantısını nasıl ayarlayacağınızı göstereceğiz. Bu yazıda size bir yol göstereceğiz: – Daha fazla okuma bağlantı stili “Divi varsayılan seçeneğini kullanarak – tam okuma bağlantısını hizalayın” (sol, orta, sağ) – Tam okuma bağlantısını tam geniş düğmeye değiştirin – “Daha fazla oku” düğmesi özellikle yüzer etkisi ile – metnini değiştirin “Devamını Oku” (“Post’u ziyaret” gibi).
Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız tasarımın bir bakış.
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. Birlikte takip edin 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!
YouTube kanalımıza abone olun
Parçanın düzenini Divi kütüphanenize aktarmak için Divi kütüphanesine gidin. İçe Aktar düğmesini tıklayın. Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin. Ardından İçe Aktar düğmesini tıklayın.
Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Doğrudan öğreticiye mi gidiyorsunuz? Divi Blog Modülündeki “Devamını Oku” bağlantısını nasıl ayarlanır “Daha fazla bilgi edinin” bağlantısını ayarlamaya başlamak için divi oluşturucuyu kullanarak sayfaya bir blog modülü içerir, divi oluşturucudan sayfayı düzenlerken divi blog modülüne erişmeniz gerekir önünde. Önceden yapılan düzeni istediğiniz herhangi bir blog modülüyle yükleyebilir veya sayfaya yeni bir blog modülü ekleyebilirsiniz. Süreci başlatmak için yapay zeka düzeni paketinden bir blog sayfası şablonu kullanacağız. Bölüm 1: Tam Okuma Bağlantısı Metnini Düzenleme ve Hizalama Her Blog Modülünün Düzendeki her makale için okuma bağlantısını görüntüleme veya gizleme seçeneği vardır. Okuma bağlantısını daha da görüntülemek için blog ayarlarını açın ve “Okuma düğmesini görüntüleyin”, görüntülemek istediğiniz blog öğeleri listesinden “Evet” olarak aktarın. Sevgili metni tasarım sekmesinin altındaki varsayılan divi seçeneğiyle daha fazla okumak, daha fazla okumak, Okuma metnini daha fazla ayarlayabilirsiniz Varsayılan seçeneklerden birini kullanır. Bu örnek için aşağıdakileri güncelleyelim: Daha Fazla Yazı Tipi: Barlow Yazı tipinin tüm ağırlığını okuyun: Yarı kalınlık
Daha Fazla Yazı Tip Stili: Büyük Kesin (TT), Altı Çizgi (U)
Daha düşük çizgi rengi daha fazla oku: #3C5BFF
Daha fazla oku metin rengi: #db0eb7
Daha Fazla Mektup Mesafesi: 1 piksel
Sonuç bu.
Şu anda tam okuma bağlantısını hizalayan “Posta Oku” bağlantısı, içerik metninden metin seviyesini değiştirmedikçe varsayılan olarak sola doğru olacaktır. Orta veya sağ direkle bağlantıyı uyumlu hale getirmek için CSS parçalarını aşağıdaki gibi eklersiniz: Blog ayarlarının devamı sekmesi altında, tam okuma düğmesine aşağıdaki CSS ekleyin CSS: Display: Block; Metin-align: doğru;
Sonuç bu. Bölüm 2: Bu örnek için CSS ile basit bir geniş düğme stili yapan bir düğme gibi görünmesi için tam okuma bağlantısını düzenleme, “Devamını Oku” için basit bir geniş düğme stili yapacağız. Özel bir CSS eklemeden önce, blog ayarlarını açmadan ve tam okuma metni tasarımını aşağıdaki gibi güncellemeden önce: Daha fazla yazı tipi stilini okuyun: COPER Daha fazla oku metin rengi: #fff Önceki örnekte, kabın tam genişliğine ulaşmak ve metni konsantre etmek için bir bağlantı almak için ekran: blok ve metin-align: center kullanıyoruz. Bir düğme gibi görünmesini sağlamak için, tek yapmamız gereken birkaç CSS parçasıyla arka plan renkleri ve boşluklar eklemek.
“Devamını Oku” bağlantısı için tam geniş bir düğme stili yapmak için devam eden sekmeyi açın ve tam okuma düğmesini aşağıdaki gibi güncelleyin: Ekran: Blok;
Metin-align: merkez; Arka Plan rengi:#01012c;
Dolgu: 0.3EM 1EM;
Marj-Top: 10 piksel;
Sonuç bu!
Gelişmiş bir düğme stili oluşturma ve yönü CSS ile yönlendirmenin etkisi Oluşturma düğmesi stilini başka bir seviyeye getirmek istiyorsanız, daha gelişmiş bir arka plan ve sarkma efekti ekleyebiliriz. Bunu yapmak için CSS’nin tamamını aşağıdakilerle değiştirin: Ekran: Sline-Block;
Marj-Top: 10 piksel; Dolgu: 0.3EM 1EM; Arka plan-görüntü: doğrusal gradyan (90deg,#01012C%50, RGBA (0.0.0.0)%50);
Arka plan rengi: #3C5BFF;
Geçiş: 300ms;
Arka planı değiştirmek için yüzerken, aşağıdaki CSS’yi okuma düğmesine daha fazla kayan durumda koyabilirsiniz: Ekran: Satır içi blok;
Marj-Top: 10 piksel;
Dolgu: 0.3EM 1EM; Arka Plan rengi: #01012c;
Sonuç bu!
Bölüm 3: “Daha Fazla Oku” metnini “Daha fazla oku” metnini “ziyareti yayınlama” gibi başka bir şeye dönüştürmek, bunun gerçekleşmesi için küçük bir jQuery’ye ihtiyacımız var. Ama endişelenme, sadece birkaç satır. JQuery kodunu eklemeden önce, blog modülüne aşağıdaki gibi özel bir CSS sınıfı ekleyin: CSS Sınıfı: ET-Custom-Read-More-Text
Not: JQuery’nin çalışması için sınıf adının doğru olduğundan emin olun. “Daha fazla oku” metnini değiştiren jQuery eklemek için blog modülünün altına kod modülünü ekleyin. Ardından aşağıdaki jQuery kodunu yapıştırın ve kodu gerekli komut dosyası etiketiyle sardığınızdan emin olun: (işlev ($) {
$ (belge) .on (“hazır ajaxComplete”, function () {
$ (. }); }) (jQuery);
Bu kod temel olarak tarayıcıya sayfa yüklendikten veya bir kez daha Pagination Modül Blogu (AJAX) ile yüklenen blogu gönderdikten sonra “Daha Fazlasını Oku” bağlantısının metnini değiştirmesini söyler.
Sonuç bu!
Buradaki nihai sonuç, tamamladığımız bağlantı tasarımının (veya “tam okun” düğmesinin başka bir ekranıdır.
Divi Blog Modülünün son zihni, “Oku Oku” bağlantı tasarımını yaratıcı bir şekilde hedeflemenizi sağlar. Birkaç CSS parçasını denemek istiyorsanız, kendi daha sofistike tasarımınızı yapabilirsiniz. Umarım, bu öğretici bir sonraki seviyeye “Devamını Oku” bağlantısını getirmenize yardımcı olacaktır. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
YouTube kanalımıza abone olun
Parçanın düzenini Divi kütüphanenize aktarmak için Divi kütüphanesine gidin. İçe Aktar düğmesini tıklayın. Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin. Ardından İçe Aktar düğmesini tıklayın.
Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Doğrudan öğreticiye mi gidiyorsunuz? Divi Blog Modülündeki “Devamını Oku” bağlantısını nasıl ayarlanır “Daha fazla bilgi edinin” bağlantısını ayarlamaya başlamak için divi oluşturucuyu kullanarak sayfaya bir blog modülü içerir, divi oluşturucudan sayfayı düzenlerken divi blog modülüne erişmeniz gerekir önünde. Önceden yapılan düzeni istediğiniz herhangi bir blog modülüyle yükleyebilir veya sayfaya yeni bir blog modülü ekleyebilirsiniz. Süreci başlatmak için yapay zeka düzeni paketinden bir blog sayfası şablonu kullanacağız. Bölüm 1: Tam Okuma Bağlantısı Metnini Düzenleme ve Hizalama Her Blog Modülünün Düzendeki her makale için okuma bağlantısını görüntüleme veya gizleme seçeneği vardır. Okuma bağlantısını daha da görüntülemek için blog ayarlarını açın ve “Okuma düğmesini görüntüleyin”, görüntülemek istediğiniz blog öğeleri listesinden “Evet” olarak aktarın. Sevgili metni tasarım sekmesinin altındaki varsayılan divi seçeneğiyle daha fazla okumak, daha fazla okumak, Okuma metnini daha fazla ayarlayabilirsiniz Varsayılan seçeneklerden birini kullanır. Bu örnek için aşağıdakileri güncelleyelim: Daha Fazla Yazı Tipi: Barlow Yazı tipinin tüm ağırlığını okuyun: Yarı kalınlık
Daha Fazla Yazı Tip Stili: Büyük Kesin (TT), Altı Çizgi (U)
Daha düşük çizgi rengi daha fazla oku: #3C5BFF
Daha fazla oku metin rengi: #db0eb7
Daha Fazla Mektup Mesafesi: 1 piksel
Sonuç bu.
Şu anda tam okuma bağlantısını hizalayan “Posta Oku” bağlantısı, içerik metninden metin seviyesini değiştirmedikçe varsayılan olarak sola doğru olacaktır. Orta veya sağ direkle bağlantıyı uyumlu hale getirmek için CSS parçalarını aşağıdaki gibi eklersiniz: Blog ayarlarının devamı sekmesi altında, tam okuma düğmesine aşağıdaki CSS ekleyin CSS: Display: Block; Metin-align: doğru;
“Display: Block”, geniş bir kapsayıcı (bu durumda içeriğin içeriği) içeren blok öğesiyle bağlantıyı değiştirir. Blok öğesinden sonra metni metin-align: doğru kullanarak sağa hizalayabiliriz.
Sonuç bu.
Sonuç bu. Bölüm 2: Bu örnek için CSS ile basit bir geniş düğme stili yapan bir düğme gibi görünmesi için tam okuma bağlantısını düzenleme, “Devamını Oku” için basit bir geniş düğme stili yapacağız. Özel bir CSS eklemeden önce, blog ayarlarını açmadan ve tam okuma metni tasarımını aşağıdaki gibi güncellemeden önce: Daha fazla yazı tipi stilini okuyun: COPER Daha fazla oku metin rengi: #fff Önceki örnekte, kabın tam genişliğine ulaşmak ve metni konsantre etmek için bir bağlantı almak için ekran: blok ve metin-align: center kullanıyoruz. Bir düğme gibi görünmesini sağlamak için, tek yapmamız gereken birkaç CSS parçasıyla arka plan renkleri ve boşluklar eklemek.
“Devamını Oku” bağlantısı için tam geniş bir düğme stili yapmak için devam eden sekmeyi açın ve tam okuma düğmesini aşağıdaki gibi güncelleyin: Ekran: Blok;
Metin-align: merkez; Arka Plan rengi:#01012c;
Dolgu: 0.3EM 1EM;
Marj-Top: 10 piksel;
Sonuç bu!
Gelişmiş bir düğme stili oluşturma ve yönü CSS ile yönlendirmenin etkisi Oluşturma düğmesi stilini başka bir seviyeye getirmek istiyorsanız, daha gelişmiş bir arka plan ve sarkma efekti ekleyebiliriz. Bunu yapmak için CSS’nin tamamını aşağıdakilerle değiştirin: Ekran: Sline-Block;
Marj-Top: 10 piksel; Dolgu: 0.3EM 1EM; Arka plan-görüntü: doğrusal gradyan (90deg,#01012C%50, RGBA (0.0.0.0)%50);
Arka plan rengi: #3C5BFF;
Geçiş: 300ms;
Arka planı değiştirmek için yüzerken, aşağıdaki CSS’yi okuma düğmesine daha fazla kayan durumda koyabilirsiniz: Ekran: Satır içi blok;
Marj-Top: 10 piksel;
Dolgu: 0.3EM 1EM; Arka Plan rengi: #01012c;
Sonuç bu!
Bölüm 3: “Daha Fazla Oku” metnini “Daha fazla oku” metnini “ziyareti yayınlama” gibi başka bir şeye dönüştürmek, bunun gerçekleşmesi için küçük bir jQuery’ye ihtiyacımız var. Ama endişelenme, sadece birkaç satır. JQuery kodunu eklemeden önce, blog modülüne aşağıdaki gibi özel bir CSS sınıfı ekleyin: CSS Sınıfı: ET-Custom-Read-More-Text
Not: JQuery’nin çalışması için sınıf adının doğru olduğundan emin olun. “Daha fazla oku” metnini değiştiren jQuery eklemek için blog modülünün altına kod modülünü ekleyin. Ardından aşağıdaki jQuery kodunu yapıştırın ve kodu gerekli komut dosyası etiketiyle sardığınızdan emin olun: (işlev ($) {
$ (belge) .on (“hazır ajaxComplete”, function () {
$ (. }); }) (jQuery);
Bu kod temel olarak tarayıcıya sayfa yüklendikten veya bir kez daha Pagination Modül Blogu (AJAX) ile yüklenen blogu gönderdikten sonra “Daha Fazlasını Oku” bağlantısının metnini değiştirmesini söyler.
Sonuç bu!
Buradaki nihai sonuç, tamamladığımız bağlantı tasarımının (veya “tam okun” düğmesinin başka bir ekranıdır.
Divi Blog Modülünün son zihni, “Oku Oku” bağlantı tasarımını yaratıcı bir şekilde hedeflemenizi sağlar. Birkaç CSS parçasını denemek istiyorsanız, kendi daha sofistike tasarımınızı yapabilirsiniz. Umarım, bu öğretici bir sonraki seviyeye “Devamını Oku” bağlantısını getirmenize yardımcı olacaktır. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
