Gutenberg Gönderiniz Boyunca Divi Yapılı Vurgulanan Alıntılar Nasıl Eklenir

Bir blog yazısı yazarken, genellikle kendinizi birinden alıntı yapmak veya normal bir paragrafta kullanılan bir cümleyi vurgulamak isterken bulacaksınız. Şimdi, Gutenberg editöründe, hemen bir alıntı bloğu ekleyebilirsiniz, ancak bu size potansiyel olarak istediğiniz kadar tasarım özgürlüğü sağlamaz. Divi'nin yerleşim blokları ile bu artık sorun değil. Başka bir yerde Gutenberg ortamını korurken Divi ile belirli bir bloğu kolayca oluşturabilirsiniz. Bu eğitimde, Divi kullanarak blog gönderilerinize satır içi vurgulanmış alıntıları nasıl ekleyeceğinizi göstereceğiz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

Örnek 1

masaüstü

Mobil

Örnek #2

masaüstü

Mobil

Divi-Build Vurgulanan Alıntılar Düzenlerini ÜCRETSİZ İndirin

Ellerinizi ücretsiz Divi tarafından oluşturulmuş vurgulanmış alıntı düzenlerine koymak için, önce aşağıdaki düğmeyi kullanarak bunları indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

https://youtu.be/zScpa4-I7-8

Youtube Kanalımıza Abone Olun

Düzen Bloğu JSON'u İçe Aktarma

Düzeni Divi Kitaplığına Yükle

Yukarıda indirebildiğiniz JSON dosyasını içe aktarmak için WordPress panonuzun arka ucundaki Divi Kitaplığınıza gidin ve 'İçe Aktar ve Dışa Aktar'ı tıklayın.

Ardından, indirme klasörünüzün içindeki JSON dosyasını seçin ve 'Divi Builder Düzenlerini İçe Aktar'a tıklayın.

Gutenberg Post İçine Yeni Divi Blok Bloğu Ekle

Düzeniniz içe aktarıldıktan sonra Gutenberg postanıza gidebilir ve yeni bir Divi düzen bloğu ekleyebilirsiniz.

Kaydedilen Düzenlerden JSON Dosyasını İçe Aktarın

Ardından, 'Kütüphaneden Yükle'yi tıklayın, 'Kaydedilen Düzenleriniz'e gidin ve vurgulanan tırnak düzenini blog yayınınıza aktarmak için düzeni seçin. Bu kadar!

Genel Adımlar

Basit ve UX Dostu Blog Gönderi Şablonu Kullanın

Şablonu İndir

Bu öğreticinin stilini tanımlamak için önceki bir gönderinin gönderi şablonunu kullanacağız. Bu gönderiye gidin ve şablonu indirin.

Divi Theme Builder'a gidin

Ardından Divi Tema Oluşturucu'ya gidin.

Gönderi Şablonu Yükle

Sağ üst köşedeki simgeye tıklayın, içe aktarma sekmesine gidin ve bu eğitimin ilk adımında indirdiğiniz gönderi şablonunu içe aktarın.

Mevcut Gutenberg Postasını Açın veya Yenisini Oluşturun

Bir gönderi şablonu ayarladıktan sonra, yeni bir Gutenberg gönderisi oluşturabilir veya mevcut bir gönderiyi açabilirsiniz.

Yeni Satır İçi Divi Bloğu Ekle

Gönderinizin içine yeni bir Divi bloğu ekleyin.

Divi Bloğunun İçinde Yeni Düzen Oluşturun

Bloğu ekledikten sonra iki seçeneğiniz olacak. 'Yeni Düzen Oluştur' yazanı seçin.

Örnek 1'i Yeniden Oluştur

Bölüm Ayarları

aralık

Divi yerleşim bloğu düzenleyicisine girdikten sonra bir bölüm göreceksiniz. İlk örnek tasarımı yeniden oluşturmak için bölüm ayarlarını açın ve kenar boşluk değerlerini buna göre değiştirin:

• Üst Kenar Boşluğu: 50px
• Alt Kenar Boşluğu: 50px
• Sol Kenar Boşluğu: -5%
• Sağ Marj: -5%

Sınır

Sonraki bölüme bir sol kenarlık ekleyin.

• Sol Kenar Genişliği: 2px
• Sol Kenar Rengi: #000000

Animasyon

Ve aşağıdaki animasyon ayarlarını kullanın:

• Animasyon Stili: Slayt
• Animasyon Yönü: Aşağı
• Animasyon Süresi: 1500ms
• Animasyon Yoğunluğu: %200
• Animasyon Opaklığı Başlatma: %100
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

boyutlandırma

Satır ayarlarını açın ve boyutlandırma ayarlarını buna göre değiştirin:

• Genişlik: %90
• Maksimum Genişlik: %100

Animasyon

Animasyon ayarlarını aşağıdaki gibi değiştirerek satır ayarlarını tamamlayın:

• Animasyon Stili: Soluk
• Animasyon Gecikmesi: 1500ms
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış

Sütuna Metin Modülü Ekle

H3 İçeriğini Ekle

İhtiyacımız olan tek modül bir Metin Modülü. H3 vurgulanan alıntı içeriğini ekleyin.

H3 Metin Ayarları

H3 metin ayarlarını aşağıdaki gibi değiştirerek modül ayarlarını tamamlayın:

• H3 Yazı Tipi Stili: İtalik
• H3 Metin Boyutu: 2.1rem (Masaüstü), 1.5rem (Tablet), 1.3rem (Telefon)
• H3 Çizgi Yüksekliği: 1.5em

Örnek 2'yi Yeniden Oluştur

Bölüm Ayarları

aralık

Bunun yerine ikinci tasarım örneğini yeniden oluşturmak ister misiniz? Bölüm ayarlarını açın ve boşluk değerlerini aşağıdaki gibi değiştirin:

• Üst Kenar Boşluğu: 50px
• Alt Kenar Boşluğu: 50px
• Sol Kenar Boşluğu: -5%
• Sağ Marj: -5%
• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Ardından, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın tüm bölüm kapsayıcısının genişliğini almasına izin verin.

• Genişlik: %100
• Maksimum Genişlik: %100

Sütuna Metin Modülü #1 Ekle

İçerik Ekle

İlk Metin Modülünden başlayarak modül ekleme zamanı. İçerik kutusuna bir teklif ekleyin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Playfair Ekranı
• Metin Rengi: #eaeaea
• Metin Boyutu: 500px
• Metin Satır Yüksekliği: 0em

aralık

Biz de biraz üst marj ekliyoruz.

• Üst Kenar Boşluğu: 150 piksel

Animasyon

Ardından, animasyon ayarlarını değiştireceğiz.

• Animasyon Stili: Çevir
• Animasyon Yönü: Merkez
• Animasyon Gecikmesi: 500ms
• Animasyon Yoğunluğu: %200
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış

Konum

Konum ayarlarını da değiştirerek teklifin satır kapsayıcısının sol üst köşesine yerleştirildiğinden emin olacağız.

• Pozisyon: Mutlak
• Konum: Sol Üst

Sütuna Metin Modülü #2 Ekle

H3 İçeriği Ekle

Sonraki Metin Modülüne geçin. H3 ile vurgulanan alıntı içeriğini içerik kutusuna ekleyin.

H3 Metin Ayarları

Modülün tasarım sekmesine gidin ve H3 metin ayarlarını aşağıdaki gibi değiştirin:

• Başlık 3 Yazı Tipi Stili: İtalik
• Başlık 3 Metin Boyutu: 2.6rem (Masaüstü), 1.7rem (Tablet), 1.3rem (Telefon)
• Başlık 3 Çizgi Yüksekliği: 1.4em

aralık

Farklı ekran boyutlarına da bazı özel kenar boşluğu değerleri ekleyin.

• Üst Kenar Boşluğu: 150 piksel
• Alt Kenar Boşluğu: 150 piksel
• Sol Kenar Boşluğu: 150px (Masaüstü), 70px (Tablet), 30px (Telefon)
• Sağ Kenar Boşluğu: 150px (Masaüstü), 70px (Tablet), 30px (Telefon)

Animasyon

Ve animasyon ayarlarını aşağıdaki gibi değiştirerek modül ayarlarını tamamlayın:

• Animasyon Stili: Soluk
• Animasyon Gecikmesi: 2000ms
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış

Sütuna Metin Modülü #3 Ekle

İçerik Ekle

Başka bir Metin Modülü olan bir sonraki ve son modüle geçiyoruz. İçerik kutusuna bir alıntı sembolü ekleyin.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını değiştirin.

• Metin Yazı Tipi: Playfair Ekranı
• Metin Rengi: #eaeaea
• Metin Boyutu: 500px
• Metin Satır Yüksekliği: 0em
• Metin Hizalama: Sağ

Animasyon

Daha sonra aşağıdaki animasyon ayarlarını kullanın:

• Animasyon Stili: Çevir
• Animasyon Yönü: Merkez
• Animasyon Gecikmesi: 1000ms
• Animasyon Yoğunluğu: %200
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış

Konum

Ve alıntının satır kapsayıcısının sağ alt köşesine yerleştirildiğinden emin olun.

• Pozisyon: Mutlak
• Konum: Sağ Alt

Alıntı Düzenlerini Yeniden Kullanmak İçin Divi Kitaplığına Kaydet

Seçtiğiniz alıntı düzenini tamamladıktan sonra, gelecekteki gönderilerde kullanabilmeniz için onu Divi Kitaplığınıza kaydettiğinizden emin olun!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

Örnek 1

masaüstü

Mobil

Örnek #2

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi'nin yerleşim bloklarıyla nasıl yaratıcı olunacağını gösterdik. Daha spesifik olarak, size Gutenberg blog gönderinize animasyonlu vurgulanmış alıntıları nasıl ekleyeceğinizi gösterdik. Tasarım olanakları sonsuzdur, ancak size başlayabileceğiniz iki örnek sağladık. JSON dosyalarını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.