Yeni Divi hattı uygulama seçeneğini kullanmanın yaratıcı yolları
Bugünün Divi öğreticisinde, kârınız için Divi’deki yeni çizgi seviye seçeneğini nasıl kullanabileceğinizi göstereceğiz. Divi Gelişmiş Tasarım seçeneğiyle neler yapılabileceğine genel bir bakış sunmak için çizgi tesviye seçeneklerini diğer varsayılan tasarım seçenekleriyle birleştireceğiz. Size nasıl yeniden yapacağınızı göstereceğimiz örnek ek kodlar içermez, bu da herhangi bir uzmanlığa sahip herkesin bu tasarımı başarabileceği anlamına gelir. Başlayalım! Aşağıdaki tasarım, bugün (masaüstünde) bugün ne yapacağımıza bir bakış:
Ve bu cep telefonundaki tasarım ekranı: Yeni Hat Uygulama seçeneğini kullanmanın yaratıcı yolları Divi YouTube kanallarımıza abone Olduğumuz gibi ana menü tema ayarlarını ayarladık, ana menüyü düzen ile eşleştirdik. Ana menü çubuğunuzu değiştirmek için WordPress Gösterge Tablosu> Ekran> Ayar> Başlığı ve Navigasyon> Ana Menü Çubuğu> ve aşağıdaki değişiklikleri yapın:Logo görüntülerini gizle: Etkinleştir
Menü Yüksekliği: 30
Metin Boyutu: 17
Mektup alanı: -1
Yazı tipi stili: büyük harf
Metin rengi: #ffffff
Aktif bağlantı rengi: #ffffff
Arka plan rengi: RGBA (255, 255, 255, 0)
Açılır arka plan rengi: RGBA (255, 255, 255, 0) Kahramanlar Ana menünüzü değiştirdikten sonra, düzen ile başlama zamanı. Yapmanız gereken ilk şey yeni bir sayfa eklemek, görsel oluşturucuya geçmek ve yeni bir standart bölüm eklemektir. Bu ilk bölüm kahramanlarımızın bir parçası olacak ve şöyle görünecek: Gradyan Arka Plan Ayarları Standart bir parça ekledikten sonra, gradyanın arka planını ona ekleyebilirsiniz: İlk Renk: #9E5555
Renk İkinci: #000000
Gradyan Türü: Doğrusal
Gradyan yönü: 180 derece
Başlangıç Pozisyonu:% 50
Son pozisyon:% 50
Renk katmanı satırını ayarla, o bölüme bir sütun satır ekleyin ve ayarları açın. Yapmamız gereken ilk şey renk kaplaması eklemek. Koyu gri bir renk seçerek ne kadar karanlık istediğinizi seçebilirsiniz. Bu durumda ‘#595959’ kullandık. Arka plan görüntüsü yapmamız gereken bir sonraki şey, bir sütun satırına bir arka plan görüntüsü eklemek ve renk kaplamasını uygulanabilir hale getirmektir. Yer paylaşım renklerini ve arka plan görüntülerini karıştırmak için, arka plan görüntüsünüzün bir karışımı olarak ‘çarpın’ seçeneğini seçin. Orta çizgilerin hizalanması Çoğu web sitesi gibi, kahraman için orta çizginin seviyesini seçeceğiz. Geniş bir tam çizgi için, çizgimizin tam olarak geniş olmasını istiyoruz, bu nedenle tasarım sekmesinin boyutunun alt kategorisindeki seçeneği etkinleştireceğiz. Özel Dolma Satır ayarında yapmamız gereken son şey, üst ve altta özel ‘300 piksel’ dolgu eklemektir. İlk metin modülü Tüm ayarlara sahip olduktan sonra, ilk metin modülünü satıra ekleyeceğiz. İçerik sekmesinde görüntülemek istediğiniz metni seçin ve Tasarım sekmesine devam edin. Tasarım sekmesinde, alt kategori metni için aşağıdaki ayarların geçerli olduğundan emin olun: Metin Yazı Tipi: Arvo
Metin yazı tipi boyutu: 64 (masaüstü), 47 (tablet), 33 (cep telefonu)
Metin rengi: #ffffff
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
İkinci metin modülü daha sonra başka bir metin modülü ekleyin. İkinci metin modülü, bunun yerine aşağıdaki ayarları içerir: metin yazı tipi: lato Metin yazı tipi boyutu: 25 (masaüstü), 18 (tablet), 16 (cep telefonu)
Metin rengi: #ffffff
Hat yüksekliği metni: 1.7em
Metin Oryantasyonu: Orta
Kahraman bittikten sonra ikinci kısım, ikinci bölüme gidebiliriz. Bu bölüm için, güzel bir etki yaratmak için özel kenar boşlukları ve sütunun arka planı ile birlikte olmak yerine sağ satır seviyesini kullanacağız. Bu bölümde iki satır versiyonu yapmalıyız: masaüstü sürümü ve tablet/cep telefonu sürümü. Bu, tasarımın her türlü ekranda çarpıcı görünmesini sağlayacaktır.
Gradyanın arka plan kısmını ayarlamak İkinci parçayı ekledikten sonra, aşağıdaki gradyan arka planını ekleyin: İlk renk: #000000 Renk İkinci: #D6D6D6
Gradyan Türü: Doğrusal
Gradyan yönü: 184deg
Başlangıç Pozisyonu:% 20
Son pozisyon:% 20
Masaüstü satırlarını daha sonra ekleyin, devam edebilir ve ilk iki sütunun satırlarını ekleyebilirsiniz; Bu satır bir masaüstü sürümü olacak. Neyse ki, tablet/hücresel versiyonların çoğunu da yeniden kullanabiliriz. Arka plan satırı sütunu içerik sekmesinde ayarlayın, ikinci sütunun arka plan rengi olarak ‘#ffffff’ ekleyin.
Sağ satır hizalaması Tasarım sekmesine geçer ve sağ satır seviyesini seçin. Bir sonraki tam çizgiyi yapın, boyutlandırma alt kategorisini açın ve ‘Bu satır tam genişliği yap’ seçeneğini etkinleştirin. Pilding Custom Row ayarında yapmanız gereken son şey, aşağıdaki satırlara ‘300px’ üst dolgusunu eklemek ve ikinci sütuna dolgu: Yukarıda: 35px Doğru: 35px
Aşağıda: 150 piksel
Sol: 35px
İlk sütun için ilk bölücü modülünün 1. sütunu, bir bölücü modülü ekleyerek başlayacağız. İçerik sekmesinin görünürlük alt kategorisinde ‘Ekran’ seçeneğini etkinleştirin. Tasarım sekmesine geçin ve bölücü rengi olarak ‘#ffffff’ seçin.
Ardından, bir bölücü stili olarak ‘katı’ ve kuvvet alt kategorisinde bölücü konumu olarak ‘yukarıda’ seçin. Bölüm Modülü Tasarım sekmesinde yapmanız gereken son şey, boyut alt kategorisinde aşağıdaki ayarlamaları yapmaktır: Bölücü ağırlığı: 3 Yükseklik: 0px Genişlik:% 20
Modül hizalaması: doğru
İlk metin modülü bölücü modülünün hemen altındadır, ilk metin modülünü ekleyin ve Tasarım sekmesinin metin alt kategorisinde aşağıdaki ayarları kullanın:
Metin Yazı Tipi: Arvo
Metin yazı tipi boyutu: 30px Metin rengi: #000000
Hat yüksekliği metni: 1.6em
Metin Oryantasyonu: Orta
İlk bölücü modülü klon ve yaptığımız bölücü modülünün klonlanmasının seviyesini değiştirin ve ilk metin modülünün hemen altına yerleştirin. Değiştirilmesi gereken tek şey, modülün boyut alt kategorisinde hizalanmasıdır. Sağ tarafta olması yerine solunu seçin.
İkinci Metin Modülü İlk sütuna eklemeniz gereken son şey, aşağıdaki ayarlara sahip başka bir metin modülüdür:
Metin yazı tipi: lato
Metin yazı tipi boyutu: 14
Hat yüksekliği metni: 1.7emMetin Oryantasyonu: Orta
Sütun 2 Görüntü Modülü İkinci sütuna eklemeniz gereken ilk şey, Tasarım sekmesindeki boşluk alt kategorisinde aşağıdaki ayarlara sahip görüntü modülüdür:
Resmin altındaki alanı göster: Evet
Üst kenar: -300px Sol: -80px
Metin Modülü Ardından, görüntü modülünün hemen altındaki metin modülünü ekleyin ve tasarım sekmesindeki metin alt kategorisindeki aşağıdaki ayarları seçin:
Metin yazı tipi: lato
Metin Yazı Tipi Boyutu: 14 Yüksek Satır Metin: 1.7EM Metin Oryantasyonu: Orta
Modül Sosyal Medyayı Takip Edin İkinci sütuna eklemeniz gereken son şey sosyal medyayı takip etmek için modüldür. İstediğiniz kadar sosyal simge ekleyin ve tasarım sekmesindeki öğelerin hizalanması olarak ‘orta’ seçtiğinizden emin olun.
Bir tablet ve cep telefonunda devre dışı bırakın Her şey bittikten sonra, cep telefonunuzda ve tabletinizde devam edebilir ve satırları devre dışı bırakabilirsiniz.
Masaüstü klon hattının hücresel satırını ekleyin Şimdi masaüstü sürümünü yaptık ve mobil sürümü çok daha hızlı çalıştırdık. Masaüstü hattını klonlamak ve bir sonraki adımı izleyin. Anahtarlama sütunları, her iki sütunda bulunan modülü değiştirerek başlar.
Bundan sonraki sütunun arka plan rengi, ikinci sütunun arka plan rengini silin ve ilk sütuna yerleştirin. Sütun yatakları İkinci sütunda özel dolgu yapmak yerine, ilk sütunda almalıyız. Buna ek olarak, alt dolgu ‘150px’ değil, üst, sağ ve sol dolgu gibi ’35px’. Orta çizginin hizalamasını daha sonra kullanın, hatların seviyesini ‘orta’ olarak değiştirmeliyiz. Son fakat en az değil masaüstünü devre dışı bırakın, satırın masaüstünde devre dışı bırakıldığından emin olun. Üçüncü bölümün üçüncü kısmı ikinciye çok benzeyecektir. Bu bölümü yapmak kolay olacaktır çünkü ikinci bölümün ayarlarının çoğunu devralabilir ve bazı ayarlamalar yapabiliriz. Tüm adımları bitirdikten sonra, aşağıdaki sonuçları izleyebileceksiniz: Gradyanın arka plan kısmını ayarlama Yeni standart parçayı ekleyin ve aşağıdaki gradyan arka planını kullanın: Birinci renk: #D6d6d6 Renk İkinci: #9E5555 Gradyan Türü: Doğrusal Gradyan yönü: 184deg
Başlangıç Pozisyonu:% 30
Son pozisyon:%30 özel marj daha sonra, özel ‘-200 piksel’ marj ekleyin.
Masaüstü Hatları Üçüncü bölüm için aynı çalışma yöntemi hesaplanır; Bir masaüstü sürümü ve tablet/cep telefonu oluşturacağız. İkinci kısımdaki masaüstü klon hattı, masaüstü hattını önceki bölümden klonlayarak başlar. Düzenlemelerin çoğu aynıdır ve yapılması gereken değişiklikleri tartışacağız. Anahtarlama Sütunları Yapmamız gereken değişikliklerden biri, her iki sütunda bulunan modülü değiştirmektir. Sütunun arka plan rengi daha sonra, ikinci sütunun arka plan rengini çıkarmamız ve ilk sütunun arka plan rengi olarak ‘#000000′ eklememiz gerekir.
Sütun Sütun Reliep Dolma Özel Sütun 2 ve ilk sütunun özel dolgusu, sağ, alt ve sol için ’35px’ kullanın.
Sol çizgi seviyesini de kullanın, satır seviyesini sağdan sola değiştirin.
Özel Marj Görüntü Modülü Alt Kategori Görüntü modülünden uzaklık da bazı değişiklikler gerektirir: Üst: -150px Doğru: -80px Özel kenar ilk bölücü modülü, ‘200px’ üst marjını ikinci sütundaki ilk bölücü modülüne ekleyin. Fark ettiğiniz gibi zıt rengi kullanın; Renk kullanımı ikinci bölümün tersidir. Lütfen ve tüm yazı tipi renklerini ‘#ffffff’ olarak değiştirin ve bölücü rengini ‘#000000’ olarak değiştirin. Tabletler ve cep telefonlarında devre dışı bırakın Çizgiler tabletlerde ve cep telefonlarında (klonlama nedeniyle) devre dışı bırakılmış olsa da, emin olmak istiyorsanız görünürlük alt kategorisine gidebilirsiniz. Hücresel Satır Klonlama Klonlama Hücresel sürümler, az önce yaptığınız masaüstü satır klonları için önceki masaüstü hatları. Orta çizgi seviyesini kullanın Sıra ayarlarını açın ve satır seviyesini ortaya değiştirin. Özel Gar görüntü modülü yapmanız gereken başka bir şey, görüntü modülünün kenar boşluğunu ‘-20’ olarak değiştirmek.
Son fakat en az değil masaüstünü devre dışı bırakın, bu son satırın masaüstünde devre dışı bırakıldığından emin olun.
Sonuçlar Bu öğreticiyi adım adım izleyerek, masaüstünde aşağıdaki sonuçları elde edebilmeniz gerekir: Ve işte cep telefonundaki sonuçlar: Bu yazıdaki son zihin, Divi Builder’da farklı çizgi tesviye seçeneklerini nasıl yaratıcı bir şekilde kullanabileceğinizi gösterdik. İnsanlar yaparak en çok öğrenirler, bu yüzden size nasıl yapılacağını adım adım gösterdiğimiz bir örnek veriyoruz. Sorularınız veya önerileriniz varsa; Aşağıdaki yorumlar bölümünde yorum bırakmaktan çekinmeyin. Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!
