Güzel bir dinamik blog yazısının kahraman bölümü nasıl yapılır & amp;Divi ile ilginç
Yeni bir güncelleme her ortaya çıktığında, tasarımınızın olasılığı artar. Örneğin, dinamik içeriği ve gamış seçeneklerini birleştirmek şaşırtıcı sonuçlar sağlayabilir. Bunu göstermek için, yalnızca varsayılan Divi seçeneklerini kullanarak şaşırtıcı olan dinamik blog gönderen 3 bölümünü nasıl oluşturacağınızı göstereceğiz. Kendi varyasyonunuzu yapmanız için size ilham verecek her örnekte size adım adım rehberlik edeceğiz. Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, yapacağımız üç örneğin nihai sonuçlarına bakalım. örnek 1
Örnek #2 Örnek #3 Yeni bir blog yazısı detay ekleyin ilk önce yeni bir blog yazısı oluşturarak başlayın. Başlıklar, seçilen kategoriler ve üstün görüntüler ekleyin. Bittiğinde Divi Builder’ı etkinleştirin. Divi Sayfa Ayarları Visual Builder’a geçmeden önce, yeni blog yayınının sağ üst köşesindeki Divi sayfa ayarlarını değiştirin.Sayfa Düzeni: Tam Genişlik
Gönderi başlığı: gizle Visual Builder’a dönersek, çeşitli örnekler yapmaya başlamak için Visual Builder’a geçme zamanıdır! Modül oluşturma Yeni bir bölüm ekleyin + bir satır bir sütun her örneğe ayrı ayrı dalmadan önce, dinamik içerik içeren bir metin modülü oluşturarak başlayacağız. Üç örnek boyunca, tasarımı tamamlamak için bu önceden yapılmış modülü kullanacağız. Yeni bir parça ekledikten sonra, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin: Metin Modülü Başlık Gönderimi Seçin Dinamik İçerik Başlığı İhtiyacımız olan ilk dinamik modülün gönderilmesi gönderinin başlığını içerecektir. Yeni bir metin modülü ekleyin ve dinamik içerik listesindeki yayın başlığını seçin. Metin Ayarları Ardından, metin ayarlarını açın ve bazı değişiklikler yapın. Metin yazı tipi: Lato
Metin yazı tipi ağırlığı: kalınlık
Metin rengi: #000000
Metin boyutu: 58px (masaüstü), 45px (tablet), 35px (telefon)
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Mesafe ayrıca boşluk değerini değiştirir. Alt kenar boşluğu: 50 piksel
Üst dolgu: 10 piksel
Dolgu Alt: 10 piksel
Metin Modülü Gönderme Tarihi Gönderme Seçim Tarih Dinamik İçerik Gönderi İhtiyacımız olan ikinci modül gönderme tarihini içeren bir metin modülüdür. Lütfen bir tane ekleyin ve dinamik içerik listesinde yayınlama tarihini seçin. Metin Ayarları Bir sonraki modül metin ayarlarını değiştirin. Metin yazı tipi ağırlığı: ışık
Metin rengi: #000000
Metin boyutu: 30px (masaüstü), 20px (tablet), 16px (cep telefonu)
Metin mektubu alanı: 14px
Metin Oryantasyonu: Orta
Mesafe biraz alt kenar boşlukları da ekleyin. Alt kenar boşluğu: 50 piksel
Metin Modülü Gönderme Kategorisi Ekleyeceğimiz son dinamik içerik kategorisini seçin Dinamik içerik yayın kategorileri içeren bir metin modülüdür. Metin Ayarları Metin ayarlarını açın ve metin yönünü değiştirin. Metin Oryantasyonu: Orta
Bağlantı metnini ayarlayın Ardından, bağlantı ayarlarına birkaç değişiklik uygulayın. Bağlantı mektubu ağırlığı: çok kalın
Bağlantı yazı tipi stili: büyük harf
Bağlantı metninin rengi: #000000
Bağlantı Metin Boyutu: 15px
Bağlantı mesafesi: 5 piksel
Mesafe Aşağıdaki bir sonraki dolguyu ekleyin. Dolgu Alt: 20 piksel
Sınır ve pürüzsüz bir alt sınırla bitirin. Alt sınır genişliği: 1 piksel
Alt sınır rengi: #000000
Örnek #1 Dostun Yeni Bir Bölümü Ekle İlk örneği yapmaya başlayalım! Oluşturduğunuz önceki bölümün hemen altında, devam edin ve yeni bir bölüm ekleyin. Ayarları açın ve tüm varsayılan özel dolguları silin. Aşağıda dolgu: 0px
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısına sahip yeni bir satır ekleyerek devam edin:
Yapıştırıcı Bu satır boyutu ayarlarını açın ve birçok şeyi değiştirin. Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek sütunu eşitleyin: evet
Mesafe Bir sonraki özel alan değerleri ekleyin.
Üst dolgu: 0px Aşağıda dolgu: 0px
Sütun 2 Dolgu Üst: 130px
Sütun 2 Dolgu Alt: 130 piksel
Sütun 2 Dolgu Sol: 50px
Sütun 2 Dolgu Sağ: 50px
Resim Modülünü Sütun 1’e Ekleyin Özel görüntünün dinamik içeriğini seçin. İlk sütuna görüntü modülünü ekleyerek devam edin. Görüntü yüklemek yerine, modülü dinamik bir üstün görüntüye bağladı.
Sınır varsayılan olarak imleci yönlendirirken doğru sınırı da ekledi. Bunu yapmak için, önce aşağıdaki varsayılan sınır genişliğini seçin: Sağ sınır genişliği: 0px Sınırı işaret edin ve imleci yönlendirirken aşağıdaki ayarları ekleyin:
Sağ sınır genişliği: 24 piksel Sağ kenar renk: #ffffff
Varsayılan Gölge Kutusu Aynı şey kutunun gölgesi için geçerlidir, aşağıdaki varsayılan kutunun gölge ayarlarını uygulayın:
Dikey Konum Gölge Kutusu: 0px Bulanık Güç Gölgesi Kutusu: 0px
Gölge kutularının dağılımının gücü: 80px
Gölge Renk: RGBA (255,255,255.0)
Kutunun gölgesinde gezinin ve yüzerken etraftaki şeyleri değiştirin:
Yatay Konum Gölge Kutusu: 600 piksel Dikey Konum Gölge Kutusu: 0px
Bulanık Güç Gölgesi Kutusu: 0px
Kare Dağıtım Kutusu: 80px Gölge Renk: #E4BAC7
Geçiş Düzgün bir geçiş yapmak için, Gelişmiş sekmesindeki geçiş süresini değiştirin.
Geçiş süresi: 1200ms
Dinamik Modülü Sütun 2’ye yerleştirin Bu örneği tamamlamak için yapılacak tek şey, bu öğreticinin ilk bölümüne ikinci sütunda yaptığımız modülü yerleştirmektir.
Örnek #2 Yapın Varsayılan üst bölücünün yeni bir bölümünü bir sonrakine ekleyin! Aşağıdaki üst bölücü ile yeni bir parça ekleyin:
Bölme Stili: Listede bulun
Bölme Ayarları: Yukarıdaki İçerik Bölümü
İmleçi yönlendirirken bölücünün bölücünün yüksekliğini değiştirme konusunda yönlendirin.
Böcek Yüksekliği: 174px
Mesafe Bir sonraki bölümdeki tüm özel minderleri silin. Bu, sıraların ve parçaların sonraki adımlardan birinde çarpışmasına izin verecektir. Üst dolgu: 0px
Aşağıda dolgu: 0px Pürüzsüz bir bölücü geçişi yapmak için, Gelişmiş sekmesindeki geçiş süresini değiştirin.
Geçiş süresi: 500ms
Geçerli sütun yapısının yeni bir satırını ekleyin, devam edin ve aşağıdaki sütun yapısını kullanarak satırı kendi tarafınıza ekleyin: Varsayılan arka plan rengi Aşağıdaki arka plan rengini ekleyin:
Arka plan rengi: #ffffff Yüzerken arka plan rengini değiştirmek için arka plan rengini yönlendirin. Arka plan rengi: RGBA (255,255,255.0.56)
Dinamik Görüntü Arka Plan görüntüsü, dinamik çizgi arka plan görüntüsü olarak üstün görüntüler yükledi. Bunu yaptıktan sonra arka plan görüntüsü karışımını değiştirin. Arka Plan Görüntü Karışımı: Ekran
Yapıştırıcı, satırın boyut ayarlarını değiştirerek tüm ekran genişliğini doldurmasına izin verir. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet Talang genişliği: 1 mesafe ve bazı özel dolgu alanı değerleri ekleyin.
Üst dolgu: 200px
Dolgu Alt: 200px
Sol dolgu: 100px (masaüstü), 50px (tablet), 20px (cep telefonu) Sağ dolgu: 100 piksel (masaüstü), 50px (tablet), 20px (cep telefonu)
Son fakat en az değil, geçiş süresini değiştirerek sorunsuz bir geçiş yapın.
Geçiş süresi: 700ms
Dinamik modülleri sütununuza yerleştirin Şimdi tüm dinamik modülleri satır sütununa yerleştirebilir ve ikinci örnekle bitmişsiniz!
Örnek #3 Son örneğe öne çıkan arka plan görüntüsünün dinamik görüntüsünün yeni bir bölümünü ekleyin! Yeni bir bölüm ekleyin ve arka plan görüntüsü olarak üstün bir görüntü seçin. Varsayılan alan daha sonra, tüm varsayılan özel dolguları o bölümden silin.
Üst dolgu: 0px Aşağıda dolgu: 0px Alanı Yönlendirin İmleci küçülme efekti oluşturmaya yönlendirirken bazı özel marjlar ekleyin. Sol dolgu: 150 piksel (masaüstü), 50px (tablet), 30px (cep telefonu)
Sağ dolgu: 150 piksel (masaüstü), 50px (tablet), 30px (cep telefonu)
Geçiş değişimi geçiş süresi de. Geçiş süresi: 500ms
Ayarları değiştirmeyi bitirdikten sonra sütun yapısının yeni bir satırı ekleyin, aşağıdaki sütun yapısına sahip yeni bir satır ekleyerek devam edin:
Varsayılan arka plan rengi Aşağıdaki arka plan rengini ekleyin: Arka plan rengi: #ffffff
Yüzerken arka plan rengini değiştirmek için arka plan rengini yönlendirin. Arka plan rengi: RGBA (255,255,255.0.46) Arka Plan Gradyan radyal gradyanın arka planını da ekler.
Renk 1: RGBA (41,196,169.0) Renk 2: #ffffff
Gradyan Türü: Radyal Başlangıç Pozisyonu:% 29
Son pozisyon:% 29
Yapıştırıcı Bir sonraki satır boyutu ayarlarını değiştirin.
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Mesafe ve bazı özel dolgu değerleri ekleyin.
Üst dolgu: 200px
Dolgu Alt: 200px
Sol dolgu: 100px (masaüstü), 50px (tablet), 20px (cep telefonu) Sağ dolgu: 100 piksel (masaüstü), 50px (tablet), 20px (cep telefonu)
Son fakat en az değil geçiş, düzgün bir geçiş için geçiş süresini değiştirin.
Geçiş süresi: 500ms
Dinamik modülleri sütuna lütfen yerleştirin ve tüm önceden yapılmış modülleri satır sütununa yerleştirin.
Metin Oryantasyonunu Değiştir Tüm Modül Bu modül hakkında değiştirmeniz gereken tek şey metin yönüdür ve tamamlanmıştır! Metin Oryantasyonu: Sol
Önizleme Şimdi tüm adımlardan geçtik, yaptığımız üç örneği görelim. örnek 1 Örnek #2 Örnek #3
Bu yazıdaki son zihin, inanılmaz bir blog gönderisi bölümü oluşturmak için dinamik içeriği Hover Divi seçeneğiyle nasıl birleştireceğinizi gösterdik. Bu örnekler, kendi varyasyonunuzu yapmanız ve oraya koyduğunuz blog yayınlarını kişiselleştirmeniz için size ilham vereceği yadsınamaz. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
