Divi Gönderilerine ve Sayfalarına Çekme Alıntıları Nasıl Eklenir (5 farklı stille)

Çekme alıntılar, yazarlar ve editörler için uzun metnin monotonluğunu kırmak ve okuyucunun dikkatini önemli bir alıntıyla çekmek için yararlı bir yol olarak uzun süredir var olmuştur. Ayrıca, iyi tasarlanmış alıntılar metne temiz ve profesyonel bir görünüm katar.

Bir çekme alıntısı, bir alıntıyı diğerlerinden farklı kılmak için bloke etmesi bakımından blok alıntıya benzer. Teknik olarak, bir alıntı ile bir blok alıntı arasındaki fark, kullanılan içeriktir. Bir çekme alıntısı, bir gönderide daha önce bahsedilen önemli bir alıntıyı tekrarlar. Blok alıntı, harici bir kaynaktan alınır.

Bugün size blok alıntı etiketini ve özel CSS'yi kullanarak Divi yayınlarınıza veya sayfalarınıza benzersiz tarzda çekme alıntılarını nasıl ekleyebileceğinizi göstereceğim. Bunları çekme tırnak olarak mı yoksa blok alıntı olarak mı kullanacağınız size kalmış.

Başlayalım.

Divi Gönderilerine ve Sayfalarına Çekme Alıntıları Nasıl Eklenir (5 farklı stille)

Youtube Kanalımıza Abone Olun

Çekme Teklifiniz İçin Özel CSS Ekleme

Çekme tırnakları yalnızca CSS kullanılarak biçimlendirilecek ve konumlandırılacaktır. Kısa alıntılarınız için stili uygulamak için Divi → Tema Özelleştirici seçeneğine gidin ve Genel Ayarlar altında Özel CSS kutusuna aşağıdaki CSS'yi ekleyin:

/*pullquotes css*/

/*Pull quote text styling*/
blockquote.et-pullquote p {
font-size: 22px;
line-height: 35px;
font-style: italic;
letter-spacing: 1px;
color: #666;
font-weight: 300;
}

/*Pull quotes with open quotation mark*/

blockquote.et-pullquote.left.quote, blockquote.et-pullquote.right.quote{
position: relative;
border-left: none;
}

blockquote.et-pullquote.left.quote:before {
    content: "\201C";
    font-size: 75px;
    position: absolute;
    top: 10px;
    left: -16px;
    font-family: lato;
    color: #888;
}

blockquote.et-pullquote.right.quote:before {
    content: "\201C";
    font-size: 75px;
    position: absolute;
    top: 10px;
    left: -16px;
    font-family: lato;
    color: #888;
}

/*Pull quotes with top border*/
blockquote.et-pullquote.left.topborder, blockquote.et-pullquote.right.topborder{
border-left: none;
border-top-width: 5px;
border-top-style: solid;
padding: 5px;
}

/*Pull quotes with dark background*/
blockquote.et-pullquote.left.dark, blockquote.et-pullquote.right.dark{
border-left: none;
padding: 10px;
background: #333;
}

blockquote.et-pullquote.left.dark p, blockquote.et-pullquote.right.dark p {
color: #fff;
}

@media all and (min-width: 700px) {

blockquote.et-pullquote{
padding: 0 20px;
max-width: 300px;
}

/*Pull quote Left*/
blockquote.et-pullquote.left{
    float: left;
    margin: 20px 20px 20px -10%;
}
/*Pull quote Right*/
blockquote.et-pullquote.right{
    float: right;
    margin: 20px -10% 20px 20px;
}
}

Yukarıdaki CSS, her bir alıntı stili için kodu ayırt edebilmeniz için yorumlara sahiptir. Umarım geri dönüp çekme teklifinin stilini ihtiyaçlarınıza göre ayarlamanız sizin için daha kolay olacaktır.

Gönderiyi veya Sayfayı Ayarlama

Artık CSS'niz yerinde. Sayfanızı veya yayınınızı eklemenin zamanı geldi. Bu örnek için bir gönderi kullanacağım.

WordPress Kontrol Panelinden Divi → Gönderiler → Yeni Ekle seçeneğine gidin.

Gönderiniz için Divi Builder'ı veya Varsayılan Düzenleyici'yi kullanmanız fark etmez. Ancak bu örnek için Divi Builder'ı kullanıyorum, bu yüzden büyük mor “Divi Builder'ı Kullan” düğmesini tıklayın.

Gösterilen varsayılan standart bölümden, Satır Modülü Ayarlarını düzenlemek için tıklayın.

Genel Ayarlar altında aşağıdakileri değiştirin:

Özel Genişlik Kullan: EVET
Özel Genişlik: 600 piksel

Kaydet çık

Ardından, satırınıza tam genişlikte bir sütun ekleyin.

Ardından, tam genişlikli sütununuza bir Metin Modülü ekleyin.

Metin Modülü Ayarlarında, wysiwyg düzenleyici kutunuzdaki “metin” sekmesine tıkladığınızdan ve yaklaşık 5 paragraf metin eklediğinizden emin olun. Alıntı için kullanmak istediğiniz metin bloğunu vurgulayın ve metni blok alıntı etiketine sarmak için B-QUOTE kısa kod düğmesini tıklayın.

Artık blok alıntı etiketinize, daha önce girdiğiniz özel CSS'ye göre çekme teklifinizi şekillendirecek benzersiz sınıflar eklemeye hazırsınız.

Blok Alıntı Etiketleri ile Çekme Alıntılarınızı Ekleme ve Şekillendirme

Çekme alıntılarınızı şekillendirmenin sayısız yolu vardır. Sağa veya sola hizalama ile kullanabileceğiniz 5 farklı stil ekledim.

Sola veya Sağa Kayan Bir Çekme Teklifi Ekleyin

Alıntıyı Sola Çek

Bu blok alıntıyı ekleyin:

<blockquote class="et-pullquote left">Eu est quot porro legimus, ne elitr aliquam menandri duo, quo dictas vituperata ut. Ei mei tale expetendis.</blockquote>

Bu sonuç:

Alıntıyı Sağa Çekin

Bu blok alıntıyı ekleyin:

<blockquote class="et-pullquote right">Eu est quot porro legimus, ne elitr aliquam menandri duo, quo dictas vituperata ut. Ei mei tale expetendis.</blockquote>

Bu sonuç:

Not: Alıntıdaki sol kenarlığın rengi, tema vurgu renginiz olarak belirlediğiniz şey olacaktır. Bunu değiştirmek için Divi → Tema Özelleştirici → Genel Ayarlar → Düzen Ayarları'na gidin ve Tema Vurgu Rengi seçeneğini değiştirin.

Büyük Bir Açık Teklifle Çekme Teklifleri Ekleme

Büyük bir açık alıntı ile sola hizalanmış bir çekme alıntısı için bu blok alıntıyı ekleyin:

<blockquote class="et-pullquote left quote">Eu est quot porro legimus, ne elitr aliquam menandri duo, quo dictas vituperata ut. Ei mei tale expetendis.</blockquote>

İşte sonuç:

Üst Kenarlıklı Çekme Tırnakları Ekleme

Üst kenarlıklı, sola hizalanmış bir çekme alıntısı için bu blok alıntıyı ekleyin:

<blockquote class="et-pullquote left topborder">Eu est quot porro legimus, ne elitr aliquam menandri duo, quo dictas vituperata ut. Ei mei tale expetendis.</blockquote>

İşte sonuç:

Koyu Arka Planla Çekme Alıntıları Ekleme

Koyu arka plana sahip sola hizalanmış bir çekme alıntısı için bu blok alıntıyı ekleyin:

<blockquote class="et-pullquote left dark">Eu est quot porro legimus, ne elitr aliquam menandri duo, quo dictas vituperata ut. Ei mei tale expetendis.</blockquote>

İşte sonuç:

Çekme tırnaklarınızı tam genişliğe değiştirme

Şu anda çekme teklifleriniz maksimum 300 piksel genişliğe sahip. Bunları tam genişlikte yapmak ve içerik bölümünün uzunluğunu uzatmak için aşağıdaki CSS'yi değiştirin:

blockquote.et-pullquote{
padding: 0 20px;
max-width: 300px;
}

Bununla…

blockquote.et-pullquote{
padding: 0 20px;
}

Büyük bir açık alıntı ile sola hizalama kısa alıntısının tam genişlikte nasıl göründüğüne dair bir örnek:

Bu kadar!

Duyarlı mı?

Evet. Alıntının sol ve sağ konumlandırması yalnızca 700 piksel ve üzeri ekran boyutlarını etkiler. 700 pikselin altındaki herhangi bir ekran boyutu, çekme alıntısını normal bir blok alıntı olarak konumlandıracaktır (tam genişlikte ve düzgün aralıklı).

Son düşünceler

Blogunuzda varsayılan bir blok alıntıyla yetinmek istemiyorsanız, bu özel çekme alıntılarından yararlanın. Okuyucuların dikkatini çekecek ve yazılarınıza güzel bir tasarım özelliği katacaklar.

Umarım bu, blogunuzda ve/veya bir sonraki projenizde yardımcı olur.

Blok alıntılara ve alıntılara daha derinlemesine bakmak ve bunları blogunuzda nasıl kullanacağınızı öğrenmek için bu gönderiye göz atın.

Yorumlarda sizden haber bekliyorum.