Blog modülünün Devamını Oku bağlantısını özelleştirmek ister misiniz? Divi ? Ardından eğitimimizi takip edin.
Bir blogun "Daha Fazla Oku" bağlantıları, geliştirmenin çok önemli bir parçası olabilir kullanıcı deneyimi. Bu nedenle, bunları nasıl doğru şekilde özelleştireceğimizi bilmemiz önemlidir.
Bu eğitimde, Blog modülündeki “Devamını Oku” bağlantısını nasıl özelleştireceğinizi göstereceğiz. Bu makalede, size nasıl yapılacağını göstereceğiz:
- Yerleşik seçenekleri kullanarak "Daha Fazla Oku" bağlantısını özelleştirin. Divi
- "Daha Fazla Oku" bağlantısını hizalayın (sol, orta, sağ)
- "Daha Fazla Oku" bağlantısını tam ekran düğmesine dönüştürün
- Hover Efektleri ile Özel Bir Devamını Oku Düğmesi Oluşturun
- "Devamını Oku" metnini başka bir şeyle değiştirin ("Makaleyi okuyun" gibi).
anket
İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.
Divi'nin Tema Oluşturucusunu Kullanarak Bir Sayfaya Blog Modülü Yükleme
Daha Fazla Oku bağlantılarını özelleştirmeye başlamak için bir Blog modülüne erişmeniz gerekir.
You can önceden tanımlanmış bir düzeni yükle istediğiniz herhangi bir Blog modülüyle veya bir sayfaya yeni bir Blog modülü eklemeniz yeterlidir.
İşlemi başlatmak için önceden tanımlanmış düzenden blog sayfasını kullanacağız. Yapay Zeka.
WordPress Kontrol Panelinden yeni bir sayfa ekleyin
Ardından sayfanıza bir başlık verin ve ardından " utiliser Divi inşaatçı".
Ardından " Düzen seçin«
Bul ve seç " Yapay zeka Blog Sayfası«
Son olarak, Blog düzenini seçin ve “ Düzen seçin«
Bağlantı metnini özelleştirin ve hizalayın
Her Blog modülü, düzendeki her makale için "Daha Fazla Oku" bağlantısını gösterme veya gizleme seçeneği sunar. “Devamını Oku” bağlantısını görüntülemek için blog ayarlarını açın ve “ Devamını Oku düğmesini göster görüntülemek istediğiniz blog öğeleri listesinde "EVET" olarak seçin.
Stil sekmesi altında, yerleşik seçeneklerden birini kullanarak Daha Fazla Oku metnini özelleştirebilirsiniz. Bu örnek için aşağıdakileri güncelleyelim:
- Yazı Tipi Devamını Oku: Barlow
- Daha fazla oku Loş Işık: Yarı Kalın
- Devamını Oku Kopyalama Stili: Büyük Harf (TT), Altı Çizili (U)
- Metin rengi Devamını okuyun: #db0eb7
- Devamını oku Altı çizili metin Renk: #3c5bff
- Harf aralığı Devamını oku: 1px
İşte sonuç.
Şu anda, hizalamayı değiştirmediğiniz sürece "Daha Fazla Oku" bağlantısı varsayılan olarak solda yer almaktadır. Bağlantıyı gönderinin ortasına veya sağına hizalamak için şöyle bir CSS parçacığı ekleyin:
Blog ayarları gelişmiş sekmesi altında, Devamını Oku Düğmesi CSS'sine aşağıdaki CSS'yi ekleyin:
display: block;
text-align: right;
"display:block", kapsayıcısının tüm genişliğini kapsayan bir blok öğesine olan bağlantıyı değiştirecektir (bu durumda, bloğun gövdesi). içindekiler yayın). Bir blok öğesi olarak tanımlandıktan sonra metni “text-align:right” kullanarak sağa hizalayabiliriz.
Ayrıca Oku: Divi'de Yapışkan Genel Başlık Nasıl Oluşturulur
İşte sonuç.
Bağlantıyı ortalamak için, aşağıdaki gibi "metin hizalama" özelliğinin değeri için "sağ"ı "orta" ile değiştirin:
İşte sonuç.
"Daha fazlasını oku" bağlantısını bir düğme gibi görünecek şekilde özelleştirin
Bu örnekte, "Daha Fazla Oku" bağlantısı için basit bir tam genişlikte düğme stili oluşturacağız. Özel CSS'yi eklemeden önce blog ayarlarını açın ve "Devamını Oku" bağlantı metnini aşağıdaki gibi güncelleyin:
- Devamını oku Kopyalama stili: büyük harf (TT)
- Metin rengi Devamını oku: #ffffff
Önceki örnekte, bağlantının kabın tüm genişliğine yayılmasını ve metni ortalamasını sağlamak için "display:block" ve "text-align:center" kullandık.
Ayrıca bakınız: Divi'de kayan ve itmeli menü nasıl oluşturulur
Bir düğme gibi görünmesi için tek yapmamız gereken, bazı ekstra CSS parçacıkları ile birlikte biraz arka plan rengi ve boşluk eklemek. Bunu yapmak için Gelişmiş sekmesine gidin ve "Daha fazla oku" düğmesinin CSS'sini aşağıdaki gibi güncelleyin:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
Sonuç
İşte sonuç!
CSS ile gelişmiş bir düğme stili oluşturma
Düğme stilini başka bir düzeye taşımak istiyorsanız, bir arka plan ve vurgulu efekti ekleyebiliriz.
Bunu yapmak için, "Daha Fazla Oku Düğmesi" için CSS'yi aşağıdakiyle değiştirin:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-image: linear-gradient(90deg,#01012C 50%,rgba(0,0,0,0) 50%);
background-color: #3c5bff;
transition: all 300ms;
Fareyle üzerine gelindiğinde arka planı değiştirmek için, fare imlecini gezdirirken aşağıdaki CSS'yi "Daha Fazla Bilgi Edin Düğmesine" yapıştırabilirsiniz:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
Sonuç
İşte sonuç!
"Daha Fazla Oku" metnini başka bir şeyle değiştirin
"Daha fazla oku" metnini "Makaleyi oku" gibi başka bir şeye değiştirmek için biraz jQuery'ye ihtiyacımız olacak. Ama merak etmeyin, bunlar sadece birkaç satır.
jQuery kodumuzu eklemeden önce Blog modülüne aşağıdaki gibi özel bir CSS sınıfı ekleyin:
- CSS sınıfı: et-özel-daha fazla-metin
NOT: jQuery'nin çalışması için sınıf adının doğru olduğundan emin olun.
"Devamını Oku" metnini değiştiren jQuery'yi eklemek için Blog modülünün altına bir Kod modülü ekleyin.
Ardından, kodu gerekli komut dosyası etiketleriyle sardığınızdan emin olarak aşağıdaki jQuery kodunu yapıştırın:
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);Bu kod temel olarak tarayıcıya, sayfa yüklendiğinde "Daha fazla oku" bağlantısının metnini "Makaleyi oku" olarak değiştirmesini söyler.
Sonuç
İşte sonuç!
Nihai sonuçlar
Yaptığımız Daha Fazla Oku bağlantısı (veya düğmesi) özelleştirmelerine başka bir bakış.
DIVI'yı Şimdi İndirin !!!
Sonuç
Yani ! Bu makale için bu kadar. Divi'nin Blog modülü, "Daha Fazla Oku" bağlantısını yaratıcı bir şekilde özelleştirmenize olanak tanır. Birkaç CSS parçacığıyla deneme yapmak istiyorsanız, kendiniz daha da gelişmiş değişiklikler oluşturabilirsiniz.
Bu öğreticinin, bu "Daha Fazla Oku" bağlantılarını bir sonraki düzeye taşımanıza yardımcı olacağını umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ancak, ayrıca kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
